IOS移动端设计规范

先是整个文章的框架

01 规范的意义

为什么要遵循规范？

规范是由设计升华而来。从视觉的角度来说，实际上就是一个素材库。产品有什么样的视觉呈现和元素定义，都有可遵循的标准，保证日后迭代可以延续产品所传递的思想跟价值，最大限度保证了产品的一致性。

界面规范就像现实社会中，交通规则红灯行、绿灯行。

ui设计要遵循哪些规范？

• 操作系统规范

系统平台的规范可以让新手少走些弯路，遵循规范的前提可以让界面不出大问题。

• 公司设计规范

遵循公司的规范可以让ui风格与公司形象保持一致，更具品质。

• 产品内设计规范

需要基于平台和公司规范基础上参与制作，产品规范可以让界面的设计更统一协调。

ios设计三大原则

• 视觉层：清晰

在整个系统中，文字在每一个尺寸都是清晰易读的，图标精确而清晰，装饰精巧而适合，使得用户更容易理解功能，负空间，颜色、字体、图形和界面元素巧妙突出重要内容，并传达交互性。————减少用户学习成本，避免过度设计。

• 设计要点 01 颜色

设计早期可以通过较灰的颜色来避免色台对于间距和布局的影响，一旦设计完成，需要调整颜色和色调，保证色彩在任何情况下都可以辨识。同时，也需要关注色盲人群的体验。

• 设计要点02 排版

对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。

• 交互层：遵从

流畅的动画和清晰美观的界面可以帮助人们了解和与内容交互，而不应该（因为太过花哨）而干扰到用户的使用。内容通常充满整个屏幕，而半透明和模糊常常暗示有更多内容。————让用户知道从哪里来，即将去哪儿。

• 结构层：深度

使用不同的视觉层级和真实的运动效果来传达层次的感觉，赋予界面活力，并促进用户的理解。让用户通过触摸和探索来发现程序的功能不仅会使用产生喜悦感、更加方便了解功能，还能使用户关注到额外内容。在对内容进行导航时，层级的转场效果提供一种有深度的感觉。————赋予界面z轴层级，视觉更立体

从z轴上进行区分主任务层、底板层、背景层

• 主任务层

物理空间最高层级，放置主任务元素，如主要功能入口，主元素（车辆）等，需要加以投影抬高视觉层级。

• 底板层

物理空间中间层级，作为托起主元素的底板，色彩为白色，二维空间最高层级。

• 背景层

物理空间最低层级，作为整个产品的背景元素，多位重色（深灰色、主题蓝色等）

02 IOS设计规范

界面结构

设计要点 01:状态栏（status bar）

• 状态栏始终固定在屏幕上边缘

• @1x下尺寸为20pt

• 不要自定义状态栏

• 避免滚动内容直接透过状态栏显示（设计抽屉导航时）

• 在用户全屏观看媒体时，可以考虑隐藏状态栏以及所有界面ui

• Tip：很多产品会故意隐藏状态栏，从而增加页面停留时长

设计要点 02:导航栏（navigation bar）

• 导航栏是半透明的（70%），位于状态栏下方

• @1x下尺寸为44pt（iphone x是88pt）

• 避免导航栏内内容过多，功能数目一般不超过2个

• Ios导航栏分两种形式

设计要点 03:标签栏（tab bar）

• 标签栏是半透明的（70%），始终出现在屏幕底部

• @1x下尺寸为49pt（iPhone x上为83pt）

• 标签栏一次最多承载5个标签，多余5个的图标以列表形式收纳到“更多”里

• 标签栏用来组织整个应用层面的信息结构

• 标签栏的图形有正负形

设计要点 04:工具栏（tool bar）——通常在二级页面

• 工具栏是半透明的（70%）

• @1x下尺寸为44pt（iphone x上为83pt）

• 工具栏内放置用户最常用的指令

• 工具栏可以放置文字或图标，当项目超过3个以上的项目可以使用图标。

系统字体

在用户界面中，每一个单词和字母都至关重要。好的字体等于好的设计。字体成了界面设计的基石，而我们设计师，则是这些这类【信息基石】的修造者。

Ios 9之后，IOS中文字体：苹方；英文字体 san francisco（旧金山）

评判一个字体的适用程度，只需看两个方面：

1、看数字：3、6、9；数字区分是否明显

2、看大写的I和小写的l。

人机交互

Ios 11将这个先进的移动操作系统又一次提升至新标准，它让iphone和ipad变得更为强大、更个性化，同时也变得更为智能。

手势（gestures）

用户通过在屏幕上执行手势与ios设备进行交互。这些手势与内容密切关系，并增强与对象的直接操控感。

内容类产品UI设计要点

内容类产品分为PGC和UGC

PGC：专业生产内容——腾讯新闻

UGC：用户生产内容——抖音

内容类产品解析

设计要点 01:左图右文与左文右图

阅读app内容设计符合用户浏览习惯的排版方式，把不必要的信息弱化，突出内容，减少和弱化不必要的干扰信息，让用户更专注。

设计要点 02:搜索体验

在顶部导航栏，随时搜索关键词，记录用户搜索历史，每天热门推荐也是阅读APP很人性化的功能。

设计要点 03:内容刷新

下拉刷新功能是用户习惯认知的一种交互方式，阅读类的内容刷新还有一种常见形式“feed流”，即上滑出现新内容

设计要点 04:页面加载

分布加载：优先加载占用网络资源少的内容，再加载占用网络资源多的内容

懒加载：主要出现在长界面中，用户可以不断地向下查看内容，达到某个点之后或触发拉动后自动加载更多内容。

预加载：是一种提前加载的方式，例如在闪屏的时候提前加载首页内容

设计要点 05:个人中心

阅读app可以在个人中心的设计上考虑版式的选择，从版式上体现出对社交的倾向性

设计要点 06:阅读体验

尊重用户的阅读体验，尽量减少不必要的信息，让用户专注于内容文字本身，把设置等干扰元素隐藏到二级弹窗

同时加入更多人性化功能，长按对文字编辑和查询。

设计要点 07:评论回复

用户在阅读内容可直接进行评论和回复，无需二次点击，简化操作流程。

03 多设备适配原则

• 像素px
  

像素是指由图像的小方格即所谓的像素（pixel）组成的，这些小方块都有一个明确的位置和被分配的色彩数值，而这些一小方格的颜色和位置就决定该图像所呈现出来的颜色。

• 物理尺寸cm/mm

就是指我们能用的物理方法测出的尺寸（如物体长2m），它是可见的尺寸。

• 像素密度ppi

即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。

• 视网膜屏幕retina

当你所拿的东西距你10-12英寸（约25-30厘米时），它只要达到300ppi这个神奇的数字（每英寸300个像素点）以上，你的视网膜就无法分辨出像素点了。

• 逻辑像素pt（dp）与实际像素px（IOS用pt、安卓用dp）

作为设计师，当你在iphone 8 plus手机的屏幕上看到一条水平横线时，1px应该是正常的预期，但是细想一下，这个1px，你就会发现，脑子里形成的这个“1px”的概念其实正是逻辑像素。很显然，iPhone 8 plus 的分辨率非常高，以至于人眼已经分辨不出一个显像单元的大小，所以如果用实际的1px来显示一条线的话，应该很难看得清楚。

现如今我们都是用pt来标注

苹果ios 375*667 pt

iPhone x 375*812 pt

安卓 360*640 dp

附一张图，方便理解

什么情况下需要单独做适配？

适配：同一个界面，不同的机型，用户看到的内容应该是一致的。

• 逻辑尺寸宽度变化

• 屏幕显示区域异形

常见的适配方案（同样的内容，显示在不同宽度的手机上）

• 适配方案A 间距等比放大、头像大小不变

• 适配方案B 头像等比放大、间距大小不变（常用模式）

• 适配方案C 间距等比放大、当超过一定数值后增加一个头像

• 适配方案D 间距与头像都等比放大

精准适配细节

• 字符行高与还原度

在sketch中，文字是有默认行高的，一般是字号的1.4倍。当文字只有一行时，需要手动调整行高与字号相等，而文字出现多行时，其margin就容易被行高打乱了节奏。

• 文字适配常见情况

对于适配来讲，最不确定的因素就是文字的长度了，文字适配的好与坏对于用户来讲有非常直接的感受。————自动换行、超出省略、缩字号、限定字符

• 自动换行：出现多行几率较高的文本信息，并且对于当前页面的信息展示较为重要时。或者当前页面无二级页面时，必须通过换行的方式来显示全部

• 超出省略：当前省略的信息页面有二级页面，并且二级页面点击频率较高时，或者当前需要省略的内容非重要信息。

• 缩字号：文本超出一行的几率不大，但偶尔会出现时。没有二级页面或者信息内容对于当前页面较为重要。

• 限定字符：防止文本适配出现问题最根本的就是从后台字符数量上解决，适用于非用户主观输入的信息，或者可以预期用户的最大字符数量时。

注明：（总行高-字号大小）/2=文本框空白高度

关于UI设计的更多内容，可以关注我的个人公众号「云木的设计日记」，与我共同学习进步。

公众号内回复：云木

即可加我二维码，与我交流指教。