【打卡人】百里袁方

【打卡日期】2020.2.19

【学习内容】UI设计规范-iOS设计规范

  第一次分享学习笔记，感兴趣的可以一起探讨、一起成长，个人v：www1508499381

1.设计规范的意义

设计规范其实是由设计升华而来，是众多前辈设计师给后人提供的建议，从视觉上来看就是素材库，产品需要什么样的视觉呈现和元素定义，都有可遵循的标准，可以保证日后迭代可以延续产品所传递的思想和价值，最大限度保证产品一致性

做UI需要遵循哪些规范

「系统设计规范」操作系统的设计规范，移动端中iOS和Android最常见

「公司设计规范」一般会规定产品的品牌调性与其所传达的情感价值

「产品设计规范」基于操作系统和公司规范制定，可让界面设计更统一协调

2.iOS设计的三大原则

「清晰」视觉层面的清晰

  文字、图标等界面元素要做到：统一、精确、清晰，让用户一目了然，符合用户习惯，突出主要内容并传达交互性

  而清楚≠清晰，而清晰指的是用户看到这个图标的时候就知道它是做什么的，以微信图标举例，相信大家很熟悉，即使遮挡住下面的文字相信大家也猜得出这些图标代表了什么，如果换成其他陌生的图形来替代，这时候用户也会一脸茫然，不知道哪个功能是哪个，这样一来用户对产品的学习成本就会大大增加，造成不好的体验

微信Tab 栏图标

  一句话概括就是：减少用户学习成本，避免过度设计

「遵从」交互层面的遵从

  流畅的交互和清晰美观的界面可以帮助用户快速了解内容交互，遵从用户的交互习惯，比如下拉刷新，滑动切换页面等，这些用户已经形成的交互习惯，设计时要遵从。不能因为交互方式太陌生增加用户学习的成本，也不能因为交互过于花哨而干扰用户使用

  使用时让用户知道：现在在哪个页面，从哪里跳转来的，会去向哪里

「深度」结构层面的深度

  使用不同的视觉层级和真实的运动效果传达层次性，通过营造立体感和空间感赋予界面活力，促进用户理解内容，比如界面上的立体动效元素和VR实景等，不仅会让用户产生喜悦感，更加方便了解功能，还能使用户关注到额外内容，在对内容导航的时候，层级的专场效果都是一种有深度的感觉

  3.iOS规范细节拆解

  从「界面结构」「系统字体」「人机交互」和「实际案例解析」来更好的理解iOS设计规范

「界面结构」

  01.状态栏（Status bar） 

位于界面顶部，固定且不可修改

  状态栏里面的内容是不可修改的，也不要自己去绘制这个状态栏，sketch组件库都会有自带，页面滚动时注意要让状态栏固定在自己的位置，避免滚动内容直接和状态栏重叠

  @1x（1倍图）：20pt（指高度，宽度为设备宽度，一般是375pt）

  状态栏的颜色可以更改成黑或白，根据所属界面的色调，以保证界面美观清晰，

而在用户全屏观看媒体的时候可以考虑隐藏状态栏，比如全屏观看视频的时候，用户不希望被打扰

  02.导航栏（Navigtaion Bar）

位于状态栏下方

  @1x：44pt（iPhone X是88pt，因为有个刘海），会以70%或90%的半透明和不透明呈现，为避免内容过多，导航栏的功能数一般不超过2个，而且导航栏本身也不容易点击

导航栏尽量简洁，太多功能容易误操作

  iOS11之后的导航栏分为2种形式：

常规（左）  大标题（右

  03.标签栏（Tab Bar）

位于在页面底部，以70%的半透明出现

  我们在往下滑的时候，透过半透明还能看到有东西在下面，可以促使我们浏览

  尺寸是 @1x：49pt（iPhone X是83pt），tab bar一次性可承载最多5个标签，多于5个图标以列表形式收纳到更多里，通常不会超过5个，标签栏用来组织整个应用程序的信息结构，而且它的图标还有正负形（已选中和未选中）告知用户现在在哪个页面

  04.工具栏（Tool Bar）

位于页面底部，以70%的半透明呈现

    @1x ：44pt iPhone X为83pt，此位置容易点击适合放功能性指令（删除、编辑、添加）和用户最常用的指令（评论、点赞、收藏等功能性指令），可放置文字或图标，项目超过三个以上时可以只使用图标

「系统文字」

  用户界面中的每个文字和字体都至关重要，好字体也是好设计不可或缺的一部分，在iOS9之前是：Helvetica（英文）和华文黑体（中文），iOS9之后变成了中文字体「苹方」，英文字体也变成了San Francisco（旧金山），这也是我们做iOS设计稿时要用到的字体

苹方笔画更均匀，没有尖角使其更加柔和

「人机交互」

  入境的人机交互与以往不同，早期iOS和Android设备按键分布不同，所以系统差异较大，早期iOS设备下面有一个home键，而安卓有三个虚拟按键，后来因为手机往全面屏发展，这些按键也逐渐消失，所以系统的差异也逐渐在缩小，下面是设计要点

  01.手势

  引用菲兹定律，滑动的交互范围较大，用户更容易操作；点击的交互范围较小，而且有些地方无法点击，点击的地方并非用户所想，相对于滑动来说较难操作，比如微信朋友圈拖动更改图片位置，用手指轻轻拖动即可更改图片位置，用户更喜欢直接的操作，所以能用滑动、拖拽的地方，尽量不要用点击

  点击、双击、滑动、清扫、触摸并按住（适用于文字编辑）、摇晃（微信摇一摇）

  4.实际案例解析——内容类产品

  以内容为主，连接人与信息，核心是信息，用户用产品是为了以最快的速度获取最有用的信息；抓住自己有的 ，别人没有的内容才是王道

「图文排版」：内容阅读类产品的主要内容是文字，图片较为次要，所以应采用左文右图排版方式，突出内容的核心主题，吸引读者

「搜索体验」：大多数用户使用内容类产品时都有明确的目的，需要进行搜索，每日热门推荐和搜索历史是人性化的体现，注意：搜索历史是要可以清空的，以免造成信息堆积对引起不必要的麻烦

「内容刷新」：是一种符合用户习惯的交互方式，阅读类还有一种常见形式“Feed流”即上滑出现新内容 ：比如看新闻的时候，拖到下面到底了，想看新内容的时候，手指上拉屏幕就可以加载出来

「内容加载」：分为分步加载、懒加载和预加载；分步加载可优先加载占用网络资源少的内容，其次加载占用资源多的内容；懒加载主要出现在长界面中，用户可以不断向下查看更多内容，达到某个点之后或触发拉动后自动加载更多内容；预加载出现在首屏启动页提前加载首页内容

「个人中心」：阅读类APP可以在个人中心的设计上考虑版式的选择，从版式上体现对社交的倾向性，例如突出粉丝、人气、关注等和社交相关的内容

「阅读体验」：尊重用户的阅读体验，减少不必要的信息，让用户专注于文字内容本身，把设置等其他功能隐藏到二级弹窗，引用「奥卡姆剃刀原理」阅读页面是用户高频使用的页面，应保持清爽

「评论回复」：内容类产品都可以直接在当前页面的评论直接进行回复，无需二次操作

直接在本页面回复评论

「学习感悟」学习最好的方法就是输入+输出

「结尾」后续还会分享更多学习笔记和个人总结的干货，感兴趣可以一起交流