免费的一体化
产品设计协作平台
免费开始
首页 设计协作文章 iOS设计规范 – 从iOS界面结构的四大模块讲起

iOS设计规范 – 从iOS界面结构的四大模块讲起

晓庄
2024-04-16 20:28:16
分享到:

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年,功能强大,素材丰富,简单易用,可以帮助设计师提高工作效率,简化对接协作问题,降低工作繁琐度,目前已成为众多设计师的“心头爱”。

墨刀 - 在线一体化产品设计协作平台

原型、设计、流程图、思维导图......享受创造的乐趣,成就团队和个人

晓庄
2024-04-16 20:28:16
分享到: