先是整个文章的框架
为什么要遵循规范？
规范是由设计升华而来。从视觉的角度来说，实际上就是一个素材库。产品有什么样的视觉呈现和元素定义，都有可遵循的标准，保证日后迭代可以延续产品所传递的思想跟价值，最大限度保证了产品的一致性。界面规范就像现实社会中，交通规则红灯行、绿灯行。
ui设计要遵循哪些规范？
操作系统规范
系统平台的规范可以让新手少走些弯路，遵循规范的前提可以让界面不出大问题。
公司设计规范
遵循公司的规范可以让ui风格与公司形象保持一致，更具品质。
产品内设计规范
需要基于平台和公司规范基础上参与制作，产品规范可以让界面的设计更统一协调。
ios设计三大原则
视觉层：清晰
在整个系统中，文字在每一个尺寸都是清晰易读的，图标精确而清晰，装饰精巧而适合，使得用户更容易理解功能，负空间，颜色、字体、图形和界面元素巧妙突出重要内容，并传达交互性。————减少用户学习成本，避免过度设计。
设计要点 01 颜色
设计早期可以通过较灰的颜色来避免色台对于间距和布局的影响，一旦设计完成，需要调整颜色和色调，保证色彩在任何情况下都可以辨识。同时，也需要关注色盲人群的体验。
设计要点02 排版
对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。
交互层：遵从
流畅的动画和清晰美观的界面可以帮助人们了解和与内容交互，而不应该（因为太过花哨）而干扰到用户的使用。内容通常充满整个屏幕，而半透明和模糊常常暗示有更多内容。————让用户知道从哪里来，即将去哪儿。
结构层：深度
使用不同的视觉层级和真实的运动效果来传达层次的感觉，赋予界面活力，并促进用户的理解。让用户通过触摸和探索来发现程序的功能不仅会使用产生喜悦感、更加方便了解功能，还能使用户关注到额外内容。在对内容进行导航时，层级的转场效果提供一种有深度的感觉。————赋予界面z轴层级，视觉更立体
从z轴上进行区分主任务层、底板层、背景层
主任务层
物理空间最高层级，放置主任务元素，如主要功能入口，主元素（车辆）等，需要加以投影抬高视觉层级。
底板层
物理空间中间层级，作为托起主元素的底板，色彩为白色，二维空间最高层级。
背景层
物理空间最低层级，作为整个产品的背景元素，多位重色（深灰色、主题蓝色等）
界面结构
设计要点 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和UGCPGC：专业生产内容——腾讯新闻UGC：用户生产内容——抖音
内容类产品解析
设计要点 01:左图右文与左文右图
阅读app内容设计符合用户浏览习惯的排版方式，把不必要的信息弱化，突出内容，减少和弱化不必要的干扰信息，让用户更专注。
设计要点 02:搜索体验
在顶部导航栏，随时搜索关键词，记录用户搜索历史，每天热门推荐也是阅读APP很人性化的功能。
设计要点 03:内容刷新
下拉刷新功能是用户习惯认知的一种交互方式，阅读类的内容刷新还有一种常见形式“feed流”，即上滑出现新内容
设计要点 04:页面加载
分布加载：优先加载占用网络资源少的内容，再加载占用网络资源多的内容懒加载：主要出现在长界面中，用户可以不断地向下查看内容，达到某个点之后或触发拉动后自动加载更多内容。预加载：是一种提前加载的方式，例如在闪屏的时候提前加载首页内容
设计要点 05:个人中心
阅读app可以在个人中心的设计上考虑版式的选择，从版式上体现出对社交的倾向性
设计要点 06:阅读体验
尊重用户的阅读体验，尽量减少不必要的信息，让用户专注于内容文字本身，把设置等干扰元素隐藏到二级弹窗同时加入更多人性化功能，长按对文字编辑和查询。
设计要点 07:评论回复
用户在阅读内容可直接进行评论和回复，无需二次点击，简化操作流程。
像素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 ptiPhone x 375*812 pt安卓 360*640 dp附一张图，方便理解
什么情况下需要单独做适配？
适配：同一个界面，不同的机型，用户看到的内容应该是一致的。
逻辑尺寸宽度变化
屏幕显示区域异形
常见的适配方案（同样的内容，显示在不同宽度的手机上）
适配方案A 间距等比放大、头像大小不变
适配方案B 头像等比放大、间距大小不变（常用模式）
适配方案C 间距等比放大、当超过一定数值后增加一个头像
适配方案D 间距与头像都等比放大
精准适配细节
字符行高与还原度
在sketch中，文字是有默认行高的，一般是字号的1.4倍。当文字只有一行时，需要手动调整行高与字号相等，而文字出现多行时，其margin就容易被行高打乱了节奏。
文字适配常见情况
对于适配来讲，最不确定的因素就是文字的长度了，文字适配的好与坏对于用户来讲有非常直接的感受。————自动换行、超出省略、缩字号、限定字符
自动换行：出现多行几率较高的文本信息，并且对于当前页面的信息展示较为重要时。或者当前页面无二级页面时，必须通过换行的方式来显示全部
超出省略：当前省略的信息页面有二级页面，并且二级页面点击频率较高时，或者当前需要省略的内容非重要信息。
缩字号：文本超出一行的几率不大，但偶尔会出现时。没有二级页面或者信息内容对于当前页面较为重要。
限定字符：防止文本适配出现问题最根本的就是从后台字符数量上解决，适用于非用户主观输入的信息，或者可以预期用户的最大字符数量时。
注明：（总行高-字号大小）/2=文本框空白高度
关于UI设计的更多内容，可以关注我的个人公众号「云木的设计日记」，与我共同学习进步。
公众号内回复：云木
即可加我二维码，与我交流指教。
