UI设计不是艺术设计,这就限定了我们要从设备和现有技术出发进行设计。所以熟知各平台设计规则成为了每个设计师入门的第一课,也是每个设计师必备的专业知识。
今天小编给大家带来的是iOS设计规范,希望能够帮助各位设计师快速熟悉ios平台设计规范,帮助大家提高工作效率,规避设计前期的一些细节错误。
iOS设计规范的存在意义
首先,我们要明白设计规范存在的意义:
所有设计都存在规范,规范也是由设计升华而来,可以理解为我们现实生活中的法律条例或是红绿灯。规范约束了产品的视觉呈现和元素定义,使其都有可遵循的标准,在日后更新迭代时能够保证产品定位与价值的延续,守住产品的“初心”。
其次,我们还要熟悉iOS的不同机型尺寸,整理如下:
①5/5C/5S:320x480pt 640X1136px
②6/6S/7/7S:375x667pt 640X1136px
③6 Plus/6S Plus/7 Plus/7S Plus:414x736pt 1242X2208px
④X:375x812pt 1125X2436px
其中iPhone X是ios首次使用的OLED屏幕,比较特殊,具体分辨率:1125×2436px;PPI:458ppi;状态栏:88px; home触发区:68Px。所以计算可以得出iPhone X的设计区域是2280px。
了解了以上内容,最后就是我们的具体ios设计规范啦!下面具体从界面结构的四大模块——状态栏、导航栏、标签栏和工具栏出发给大家详细讲解:
iOS设计规范的四大模块
一:IOS设计规范之状态栏
1.状态栏位置处于屏幕上边缘,始终固定。(即手机最上方显示时间,电量的区域)
2.@1x下尺寸:20pt。
3.不能自定义
4.在进行抽屉导航设计时,需防止滚动内容直接透过状态栏。
5.在用户全屏使用时,可以隐藏状态栏以及界面UI。
Ps:适当隐藏状态栏,可帮助增加页面停留时长,但要把握好度。
二: IOS设计规范之导航栏
1.导航栏位于状态栏下方,中部是页面标题,左右是功能图标区域,70%透明度。
2.@1x下尺寸:44pt(比较特殊的iphone x是88pt)
3.IOS有两种形式的导航栏,数目不超过2,避免内容过多。
三:IOS设计规范之标签栏
1.标签栏与导航栏一样是70%透明度的,是屏幕底部的区域,也是用户最常用的一个区域。例如QQ的标签栏有:消息、联系人、看点和动态4个。
2.@1x下尺寸:49pt(比较特殊的iphone x是83pt)
3.标签栏标签一次性承载上限为5,多余标签将被收纳到[更多]中。
4.标签栏图形有正负形两种,通常会在图标下设置10pt(20px)注释文字,避免用户找不到功能入口。
5.标签栏作用:进行应用层面整个信息结构的组织。
四:IOS设计规范之工具栏
1.工具栏与标签栏和导航栏一样,都是70%透明度的。
2.@1x下尺寸:44pt(比较特殊的iphone x是83pt)
3.工具栏通常位于二级页面,承载用户常用指令。
4.工具栏可使用图标或文字,使用图标的最低限制是3个及以上项目数量。
说完iOS设计规范界面设计四大模块,剩下字体和颜色两方面需要注意:
一、字体:
1.英文:San Francisco (SF) or NewYork;
2.中文:苹方黑体。
二、颜色:
iPhone上显示色域相较作图时的RGB色域来说更广,所以对于设计而言,颜色选择非常自由。
以上便是UI设计中IOS设计规范相关内容,想做好设计,除了明确规范,还需要一款好用的设计工具,墨刀作为一款在线产品设计协作软件,深耕设计协作领域7年,功能强大,素材丰富,简单易用,可以帮助设计师提高工作效率,简化对接协作问题,降低工作繁琐度,目前已成为众多设计师的“心头爱”。