APP用户界面设计原则(上)——IOS设计标准规范

用户头像
北京/UI设计师/8年前/2588浏览
APP用户界面设计原则(上)——IOS设计标准规范

本文将详细阐述和解释,在设计IOS用户界面时需注意和理解的一些设计原则。

目前来而苹果手机在智能手机市场中所占据的比重可以说是不可小觑,所以如何按照IOS平台的设计规范做成一套高质量界面设计,给用户熟悉流畅的用户体验,成为一项衡量UI设计师专业能力的重要标准。那么在本文中将详细阐述和解释,在设计IOS用户界面时需注意和理解的一些设计原则。

b2b159b5e254a8012028a97536e4.jpg

一、iPhone尺寸及分辨率:

      目前市场上较为常见的设备机型主要为一下几个型号:iPhone6/6s、iPhone6 plus、iPhone5/5s/5c,对应的设计像素分别时750*1334px、1242*2208px、640*1136px,我们在做设计界面的时候通常会采用750*1334px(iPhone6/6s)做设计稿,建议除图片外,所有设计元素都按用矢量路径来做(方便放大图像不会模糊),在这个尺寸下切出的ICON就是2@X切图,在等比例放大1.5倍的情况下对应的是3@X切图,用以适配1242*2208px(iPhone6 plus),其中640*1136px(iPhone5/5s/5c)用的同样也是2@X切图。

ef3059b5e270a8012028a9eefc27.jpg       从上面表格中我们可以找到对应的倍率,由于iPhone1-3目前在市场上的使用率并不是很高,所以在为IOS切图时,一般是切2、3@X为主。设计师在只做一套界面设计稿时,应以iPhone6/6s的尺寸为准,这样一来既方便向上适配iPhone6Plus,也方便向下适配iPhone5和iPhone4的尺寸,文件文件的分辨率应设置为72,颜色模式设置为RGB格式。

a25359b5e320a8012028a9495819.jpg

二、iPhone界面组成元素 

       iOS系统界面的基本组成元素一般由四个板块组成,分别为:状态栏、导航栏、主菜单栏、内容区域。

       由于目前多以750*1334px的尺寸来设计,那我们就说说在这个尺寸下这些元素的具体尺寸。

  • 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px

  • 导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px

  • 标签栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px

  • 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:1108px

      需要明确的是在设备iPhone5/5s/5c、iPhone4/4s、iPad3/4/Air/Air2/mini2的设计中状态栏、导航栏、标签栏的高度和以上数值一致的(iPhone6/6s),iPhone6Plus的数值则是在上述数值的基础上乘以1.5倍的数额(3@X),即(60、132、147),iPad1/2/mini的数值是在iPhone6/6s的基础上除以2的数额(1@X),即(20、44、49),可参考下表。

10d759b5e468a801211d256c606c.jpg

三、iOS10官方中、英文字字体

       iOS10系统中依旧延续了从iOS9才开始使用的苹方(中)和San Francisco(英)字体,在8的基础上增加了字体的字重数量,由原先的2个增加到6个字重,满足了日常的设计和阅读需求,字形也更趋优美,在屏幕的显示更加清晰易读。

b4ac59b5e4c1a8012028a9b4df04.jpg

下面我们来看IOS上具体字体常用字号规律。

      导航栏标题一般在34~42px之间,正文部分的字号大小在28~36px之间,新闻类的app字号为了方便阅读会大一些,比如网易新闻正文字号36。底部的标签栏一般在20~24px之间,一般图标在有图标的情况下,文字会偏小一些,例如微信的字号为20px。在单纯只有文字的情况下,此处字号可以按需要调整,因为替代的是图标的作用。

       在文字颜色上没有特殊的限制,会有几个推荐的色号数值,可以在设计的过程中作参考作用(文字黑色#282828、文字深灰色#555555、文字浅灰色#98989、边框浅灰色#C3C3C3、背景淡灰色#f2f2f2、按钮背景纯白色#ffffff)当然具体情况具体分析,还需结合界面来定颜色数值。

786e59b5e4f1a801211d251e9a04.jpg

四、启动图标

      最后一部分是在首页上启动图标的设计规范,比较省时省力的是我们在出这图标元素的时候,是不需要像安卓一样将图标处理成圆角的,只需要给前端工程师一个正方形的PNG图片就可以了,苹果在上传时会自动对图片进行剪裁。

6b3759b5e513a8012028a94a56e8.jpg

       当然为了适配APP store、spotlight、标签栏等不同尺寸大小,需要出不同大小的启动图标,具体可以参考下图列表。

748359b5e542a801211d257d668a.jpg

0d9159b5e55ba8012028a9f6880e.jpg

     关于IOS设计标准规范的设计原则,主要需要注意的就是以上的四个方面,在下一篇文章中将继续从这几方面,详细阐述安卓平台的设计规范,有兴趣的朋友可以届时将两个平台的不同之处做一下归纳,相信会更有收获。

22
举报
|
22
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
新拟态风格 UI设计组件库
手表表盘UI系列
【新年UI图标】酒店icon
【新年UI图标】家具icon
智能家居中心 简约 UI设计组件库
Security Camera UI kit
UI应用平面图标
【新年UI图标】珠宝icon
拟物风质感写实UI卡片合集源文件
【新年UI图标】银行卡icon
UI界面 组件
【新年UI图标】30个图标
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】美妆icon
科技医疗透明柜UI界面设计
新能源APP应用UIKit
高级感金属拟物 UI设计组件库
盲盒APP UI设计
【新年UI图标】影音icon
UI通用设计素材1
UI 登录界面设计模板包
我的钱包-UI界面设计-app
柠檬黄主题UI作品集模版
你可能喜欢
大家都在看
登录注册