在进行软件功能原型设计过程中，关于组件的使用规范不是十分到位，没有系统的学习过，很多控件使用比较模糊。系统性的阅读本书后，对MD和IOS的设计规范有了初步清楚的认识，对其他的组件控件的使用背景也有了深入的理解，如果你跟我有一样的困扰，可以去读读这本书，以下为本书内容精简版读书笔记。
第一章 MD和IOS设计规范
1、阴影
①MD风格非常喜欢真实世界中的元素的物理规律与空间关系来表现组件之间的层级关系。
②MD的按钮会带有阴影，而iOS没有。
③浮动操作按钮（Floating Action Button,FAB），安卓较常见带有阴影的浮动操作按钮。
2、导航体系
①导航体系主要是菜单栏，根据位置及交互可以分为顶部栏菜单，底部栏菜单和侧边栏菜单。
②iOS风格的导航体系主要是底部栏菜单构成，MD风格的导航体系大量使用了顶部栏菜单和侧边栏菜单。相比来讲，MD的设计规范更注重界面空间的利用，底部栏菜单容易被高度遮挡，很多产品滑动时隐藏底部栏菜单。
安卓不经常使用底部按钮因为会有物理键盘，容易误操作。
③底部栏菜单（高度98px）适合单手持机操作，逐渐大屏化则要求用户双手持机，顶部栏和侧边栏的易用性更强。
④侧边导航栏需要点击二次操作才可以调出来，相类似的有“汉堡”按钮。
3、配色
①MD风格提倡使用高饱和度的对比色提倡视觉表现力，大色块，高饱和。
IOS的风格就是间接，单调，性冷淡风格。
②产品界面设计中，对比效果主要由配色、尺寸、间距和阴影来完成。
4、组件
①iOS设计的风格中，对话框和按钮都是居中对齐，MD是提示偏左，按钮偏右。
5、适配
适配是为了让同一个界面在不同的尺寸，不同的分辨率上的设备具备相同的显示效果。
像素：由一个数字序列表示的图像中的一个最小单位。
分辨率分为ppi和dpi。像素是设计中最小的设计单位，点pt是iOS中最小的开发单位。
ppi：每英寸（长度）所包含的像素点数目。
dpi：每英寸（长度）所包含的数目。
①适配原则：同一分辨率，同一尺寸。
②同分辨移植方法：高度不变，水平方向尺寸或间距自适应；等比缩放。
③全面屏手机适配：刘海区高度44pt，home indicator高度34pt.
6、手势
节省界面空间，简化交互方式。
常见手势：点击，滑击，拖曳，长按，多点触控等。
①拇指法则：手机屏幕分为容易区（主要功能），伸展区，困难区。针对不同的目标用户进行调整。
②功能可见性，让用户感知到手势的存在是手势设计的重要前提。
引导用户的方法：（培养用户对于手势的感知）
· 引用现实生活中的隐喻
· 浮层引导
· 对隐藏内容进行适当展示
③滑动优先
常用的两种手势：滑动和点击，滑动比点击更容易操作，滑动的落点区一般是全屏操作，点击的落点区域要求较高。
瀑布流中更常见使用滑动手势，不需要点击加载，节省界面控件和多余操作。但是越往下滑，加载的内容越多，会降低页面性能，而且滑动手势无法标记位置，再回去找比较费劲。
④考虑场景
不同手势在不同的场景和落点中可能会有不同的操作，手势会撞车。手势的操作的也不一定仅限于屏幕上，例如删除记录后，摇晃手机即可撤销操作，更加有趣味性。
7、异常场景
· 所有的报错反馈/提示都可以拆解为：报错现象（原因）和解决方案。因此在发生故障时先告知报错现象，在提供解决方案。
·常见的报错样式：Toast，Snackbar，对话框，通告栏，界面内嵌与空页面。
7.1 网络故障
有的场景，网络要求不是很高，中断时可以不主动提示用户，避免造成困扰，当用于执行了请求数据的操作时在进行告知网络故障。
--页面缓存数据情况：
页面存在缓存数据，可以给缓存数据设置有效期，超过这个有限期，网络还未恢复，就提示用户网络故障，可采用Toast演示，不影响用户正常流程操作。还可以使用snackbar承载点击事件，点击跳转至网络设置页中。
网络故障提示的诉求：给予用户持续性提示的前提下，还不能干扰用户的正常操作。--使用Snackbar和通告栏。
--页面没有缓存数据情况：
①展示空白页面
·提供“刷新页面”按钮
·提供“查找解决方案”按钮
可以先显示刷新按钮，没有解决显示Snackbar跳转解决方案的链接。
②展示骨架屏（skeleton screen）
展示页面框架，数据请求完成时在进行渲染，占好位置再加载数据即占位符。
7.2 网络切换
· WiFi->4G
①不可以使用Toast提示，因为某些安卓手机会关闭推送同时禁用Toast。
②提示的方式有内嵌和对话框两种方式。根据不同APP和场景会有区分。视频类-->内嵌，音频类-->对话框，优先级高的反馈我们都只考虑使用对话框，因为可以让用户看到，不会遗漏。
7.3 网络恢复
①网易云音乐恢复网络后，自动完成刷新和加载，不需要用户手动刷新：可减少用户的操作步骤，避免使用弹窗。在产品设计中，如果可以通过控件自身状态的改变而让用户感知状态的变更，那么我们就没有必要使用弹框。使用弹框来通知用户是我们最后的选项。
②热点开启后会影响界面，造成下移问题。
7.4 空白页
①首先要思考空白页是否有存在的必要
eg：没有保单的用户，点击“我的保险”可以直接跳入保单商城，引导用户进行购买而不是展示一个空白页。
②空白页需要向用户介绍这是一个什么页面，告知用户当前的位置并解释空白原因，以及接下来可以干什么，将会出现什么情况。
引导用户进行下一步操作。
eg：列举了懒人英语，喜马拉雅的空白页，购买车票时，没有直达可以提供中转，甚至推荐机票，增加产品内不同模块之间的渗透率。
③品牌化设计与空白页结合
④文案简单，引导用户进行下一步操作。
7.5 超越临界值
①极端场景、操作中断、流程闭环、提供额外的解决办法。
第三章 元素
色彩、文字、图标、布局、图片和按钮是界面设计的六大视觉元素。
3.1 色彩
随着目前发展的流行，极简风会使界面的配色越来越少。
3.1.1 为什么要配色
产品配色体系的建立主要有三个目标：视觉区分，调整界面风格，吸引用户注意力。
①视觉区分
·将信息内容和功能模块进行整体规划，建立界面的信息层级，帮助用户在视觉上进行区分。让用户一想到配色就会想起相应的功能模块。
·除了配色，文字，图像（图标），布局都可以实现视觉区分。
eg：同一个借款页面，用户主要关心的内容（借款金额）要凸显出来，从其他元素中进行区分。体现信息的优先级。
②调整界面风格
·配色：根据市场地位和目标用户群来决定，医疗类->绿色主色调，电商类->红色和橙色主色调，电脑蓝屏可以安抚用户情绪，还可以根据不同配色与节日结合渲染营销气氛。
·文字跳跃率：同一界面中不同文字之间的大小比率。排版设计会有字体、字号和字重的区别。文字跳跃率高的界面跟活泼，低的页面平静沉着。
·图片跳跃率：文艺风格产品配色比较单调无法激起用户兴趣，可以采取提升图片跳跃率来提升产品品界面活力。
③吸引用户的注意力
·配色：行为召唤按钮（call to action）配色与背景色差距较大，从背景中凸显。
·留白：谷歌搜索页面中有大面积留白，一个页面一个功能，不需要其他信息来进行干扰。
·阴影：提升目标元素“海拔”，让他凸出来。
·模糊：模糊处理不重要的内容（背景）以凸显重要内容。
④为什么是色彩
·从视觉角度来看，一款产品给用户留下最深的印象是其整体的配色。
·饱和度过高的配色会表达出很多主观的内容，适用于内容少的页面。内容多的页面，需要让用户注意力聚焦，配色应当简单。
3.1.2 配色规范
①选取色彩
·配色：一般选择产品的品牌色作为主色调，一个页面最多出现2-3种颜色。
·互补色搭配：色轮中处于彼此的对立面的两种颜色被叫做互补色。搭配起来会形成强烈的对比效果，以此吸引用户的注意力。但是同一个页面使用多个互补色会造成页面信息杂乱，建议优先级最高的信息考虑使用互补色搭配。
·单色搭配：整个产品的界面中，除品牌色和必要的中性色外，精简到极致。
避免用户的注意力被配色吸引，可以让其关注内容本身；
提升用户对于品牌的感知度。
·类比色搭配：选用一款色作为主色调，再将色轮中临近的颜色作为辅色，搭配起来不会突兀。
②主体风格
·产品定位：可读性第一，聚焦于内容建议选用浅色背景（深色长时间看容易增加疲劳感，浅色背景会增加空间感）；
视觉表现力强更加酷炫，采取深色背景。
·使用场景：户外场景较多的产品使用浅色背景更合适（深色阳光照射下屏幕会反光）；
光线不佳使用深色背景更加稳妥（阅读类APP夜间护眼模式黑底白字）。
3.2 布局（整合信息的方式）
·列表式布局和宫格式布局
3.2.1 视觉吸引力
宫格式布局：一级页面（脸面，多功能聚合页面展示多个入口，可以更改宫格尺寸来调整用户的注意力分布改变信息的优先级，视觉吸引强，可拓展性差）
3.2.2 可拓展性
列表式布局：二级、三级页面，可拓展性强（为应对将来未知的改变）可以不影响界面布局无限制增加新功能入口。可以承载更多的信息量。
·功能的改变：数量的改变和状态的改变，状态改变分为外部状态改变和内部状态改变。
·外部状态改变是指产品层面的变化，针对C端产品，例如定期组织营销活动来吸引用户（九宫格针对不同的活动，可以配置不同风格的icon）。
·对于一级页面的设计，不要把功能入口放入顶部栏，但是上线高级功能，又不想打乱界面的原有布局就可以放入顶部栏，例如可以放入搜索/城市定位/分享/筛选/通知等全局功能。
3.2.3 信息量
·列表式布局所占页面空间更大，因此可以承载更多的信息量。宫格式布局主要以icon为主展示信息较少，上下左右移动对用户来说体验不好。
3.3 文字
·大多数产品的底部菜单栏即便有icon也会在底部加上文字说明，具象的元素可以让用户更快地感知信息，但无法保证精准性。
·产品中的文字主要分四类：标题类，正文类，提示类，交互类。
3.3.1 标题类文字
·APP中标题一般有顶部栏标题、底部栏标题、列表标题、表标题等。
·不同类别的标题代表了不同的等级，可以选择不同的字色和字号来区分不同等级的标题。
·一般来说，层级越低的标题，颜色越浅，字号越小。
·很少会将品牌色设为标题色，因为品牌色饱和度过高，容易分散用户的注意力，底部栏菜单中选中的颜色会考虑使用品牌色。
3.3.2 正文类文字
·正文类文字是给用户提供详细说明和解释，配色较浅，字号稍小。不要过于吸引用户注意力且长时间阅读引起视觉疲劳。
·不要使用衬线字体，像素低的会出现锯齿效果，对阅读产生影响。
3.3.3 提示类文字
·提示类文字的用于给用户展示当前状态，状态少的产品可以搭配不同配色，状态多的产品可以用文案区分。
3.3.4 交互类文字
·交互类文字和按钮有很多共同特点，支持点击跳转，可以展示状态切换，交互类文字与按钮相比更加轻量化，适用于极简设计风格。
·交互类文字要让用户觉得可以点击：
①使用配色，可以使用蓝色，普遍认为蓝色可点击；
②文字+icon；
③行为召唤语句：使用动词，“快速注册”，“忘记密码”。
3.3.5 文案
①用户视角，确保用户可以看懂，错误示例如下；
②语气，和用户之间建立感情联系，更好的文案可以展示产品的特性；
③一致性，同样的报错/操作提示在不同模块尽量保持一致性。
3.4 图标
3.4.1 可识别性
·用户能否在极短的时间内，很容易地接收你要提供的信息；
3.4.2 网格
·引用网格避免图标设计大小不一致，网格分为内容区和留白区；
·图标的一致性要强调视觉权重的一致性，检查方法可以通过高斯模糊处理。
3.4.3 视觉统一
·图标库，每个图标共有的元素的集合成为图标的视觉统一，纯色or渐变色，描边像素 ，圆角像素，还可加入节日元素。
3.5 按钮
·组成按钮的元素可以分为形状、填充和内容。
3.5.1 形状
·无论什么形状的按钮都要保持统一；
·浮动按钮，加上阴影可以拉近与用户间的距离，而且浮动按钮不仅只可以用在MD设计规范中，IOS设计规范中也可以使用，提升用户的产品体验。
3.5.2 填充
·面状按钮：更能吸引用户注意力，有更强的点击性；
·线状按钮：适合展示次要功能，面状展示主要两个搭配使用；
·弱化功能也可将按钮变成跟其他项相同，类似“退出登录”按钮；
·按钮风格还可参照品牌色，同一个按钮不同状态会有不同的表现形式。
3.5.3 内容
·按钮中的内容包括文案和icon，icon布局时不能简单居中，要结合视觉效果进行左右偏移。
3.5.4 状态
·按钮不仅可以录入同时还可用于反馈。
3.5.5 按钮组
·场景：供用户进行选择（2个）判断（>2个）；
·设计：样式上区分优先级；
·替代：开关（switch），两种相互对立的状态之间的切换，多用于表示功能的开启和关闭，开启后会延展出其他配置项；
3.6 间距
·主要作用：①块外间距：区分不同的内容块；②块内间距：区分内容块内的信息；
3.6.1 块内/块外间距
·块外级别越高的内容，间距越大：块内间距也会根据信息优先级对间距进行划分；
·间距会选择8或者12的倍数（12,24,36,48px），若界面间距紧凑还可选择4的倍数（8,16,24,32px），一般将行高设为字符高度的30%。
3.6.2 间距与分割线
·分割线：通栏分割线（贯穿全屏）和非通栏分割线（有缺口）；
·通栏分割线：内容区分方面效果明显，提现不同模块间的独立性，但是容易影响用户信息的获取效率，阻碍阅读；
·分割线适用于不规则杂乱的信息数据进行归类，有条理的布局可以去掉分割线使用间距留白，可以同步使用。
3.6.3 间距的替代品
·配色、阴影、图案等也可完成内容区分，还可以引用图标和配色来强化不同内容之间的对比。
3.6.4 慎用间距
·间距会增加页面长度，造成多屏滚动。
3.7 插画
3.7.1 提升信息传达效率
·用户更容易感知具象元素，若是用于营销活动中则会增加推送消息的打开率。
3.7.2 插画or图像
·插画比图像更具有代入感用户更容易，图像过于写实，插画可以抽象处理。
3.7.3 尺寸比例
3.8 动画
· 任何设计元素的特性都是来自于其自身的差异性。动画与其他元素的最大区别在于其具有连续性。动画可以演示整个过程，从状态A到状态B的具体路径。
3.8.1 引导
· 对不同元素之间的联系转变为交互过程的动态演示，引导用户，减少学习成本。
eg：添加购物车，动画车内数量增加；最小化窗口；指纹解锁错误的左右晃动；新用户的操作引导。
3.8.2 吸引用户的注意力
· 流量分发（注意力分发），对于某些优先级并不是非常高的功能，我们没有必要通过修改配色和界面布局来吸引用户的注意力，可以考虑使用动画来完成一次性地吸引用户的注意力任务。
3.8.3 转场过渡
· 两种状态是由两种不同的元素来进行表达的，防止用户视觉流的中断可用动画进行转场。
3.8.4 对“花瓶”说不
· 减少动画的加载时间，控制在0.5-1s
· 如何判断一个设计元素的取舍呢？
①这个设计元素在当前界面中是起什么作用的？能够完成什么样的功能？
②去掉以后是否会影响用户的正常操作？
③如果影响用户的正常操作，那么是否有更简洁的设计元素来替代？
第四章 体系
4.1 导航体系
· 利用“通道”让内容有了关联性，串联各个模块。
①现在处于哪个页面；
②从哪个来到这个页面？是否可以回去？
③从这个页面可以到哪个页面去？
4.1.1 基本元素
①tab
· 按照方向可以分为横向栏tab和侧边栏tab，横向栏可以展示2-5个tab，超过需要左右滑动页面。维度较多可以选择侧边栏tab， 可以再一级页面中展示更多的入口，给用户提供更多的选择空间。
②列表
· 功能结构极其简单的工具类产品单一使用列表式导航，对应是宫格式导航。还可以和tab进行组合式导航。
③标签
· 将单选按钮、多选按钮、Switch等统称为标签，与tab和列表组合出现进行筛选。
4.1.2 组合样式
①tab+tab
· 每个tab代表一个类别，筛选功能优先会使用tab，功能结构复杂可采用双层tab。
②tab+列表
· 复杂的筛选需要tab展示维度，列表展示具体选项。
③tab+列表+标签
· 多维度、深层级的导航需求。
4.1.3 容器
· 汉堡按钮可作为容器的按钮，调出隐藏菜单。
· 筛选项需要容器来承载，容器可以是页面，底部菜单栏，列表菜单栏和抽屉式菜单栏。
· AIrbnb APP的筛选功能最大亮点是可以向用户即时反馈筛选结果的数目，避免进入没有搜索结果的空页面，减少无效操作。
4.2 搜索功能
· 快速定位：搜索功能跟导航筛选功能都是为了让用户可以快速找到期望内容，其中搜索功能对于位置的定位更加快速和准确。
· 介绍功能：通过搜索可以了解产品可提供的功能服务，更好地了解产品。
· 完整的搜索流程：①搜索入口；②信息录入；③搜索结果。
4.2.1 搜索入口
· 常见入口搜索框。搜索入口样式取决于用户对搜索功能的诉求。
①不同产品的搜索框展示方式存在差异：
功能：有的外露搜索框直接搜索（易于发现，使用方便）；有的隐藏点击放大镜图标（搜索文字）触发搜索框（节省空间，不影响布局，适合快速迭代期或对搜索诉求低产品）。
样式：圆角，描边，背景色，阴影效果等，产品一致性和功能定位进行考虑是否凸显搜索框。
②用户需要查找的内容可能属于不同类别
4.2.2 信息录入
· 文字录入，语音录入（语音转换文字，搜歌听音识曲），图片录入（拍立淘，以图搜图），AR录入（对准产品显示基本信息）；
· 搜索记录+推荐搜索：搜索历史使用宫格式布局，推荐搜索使用tab列表；
· 搜索自动填充：可选列表。
4.2.3 搜索结果
· 结果过多：结合导航筛选提供搜索结果。
· 无结果：空页面展示，并且需要解释无结果的原因。
4.3 返回功能
4.3.1 两种返回
· 层级返回：回到上一层。
· 任务流返回：回到上一步。
· iOS设计中返回样式有icon，icon+文字；MD设计中返回一般都是icon，因为MD设计中界面标题偏左，加文字容易混淆。
4.3.2 返回路径
· 提供用户两种返回途径，引入返回和关闭两功能。
4.3.3 手势返回
· 提供手势易用性更高，还可同时保留该功能按钮提供过渡；
· 手势还可节省空间，半透明额按钮样式也可增加浏览区域。
· 考虑不同使用场景，不能光依赖手势。
4.4 反馈机制
· 操作反馈和用户反馈（在线反馈、客服咨询、问卷调查、用户访谈等收集投诉和建议）。
4.4.1 为什么要有操作反馈
· 帮助用户随时感知系统的状态。
①什么时候给用户反馈？
②通过什么方式给用户反馈？
4.4.2 实时性
· 实时给出反馈，避免无效操作，比如输入错误的身份证号，密码超过限制要求。
4.4.3 自身反馈
· 最好不要用弹窗承载反馈功能，不具备指向性，可以输入框/按钮状态更换及时进行反馈。
4.4.4 轻量化
· 不仅局限于视觉层面的轻量化，更应该优化交互，减少操作步骤。
eg：弹窗上增加跳转按钮进行下一步反馈操作；微信浮窗手势删除。
4.4.5 反馈的种类
· 常见的反馈方式有6种：弹框、页面、标签、（功能性）动画、红点和声音。
①弹框最主要，是一种临时视图，反馈偏向动作。
②页面承载信息更多，反馈偏向动作流程。
弹窗浮于页面，页面其他地方无法点击，“所见即所得”心理的解决方法：i、设置弹窗的显示时间，自动消失，但是会影响产品转化率；ii、页面形式展示；iii、（思考）区分按钮样式/增加明显关闭icon/点击空白弹窗消失。
③标签：表单录入项过多，文字标签的反馈更具有指向性。
④动画：表示过程的状态用动画演示十分合适，比如“正在下载中”、“正在加载中”...，但是注意不要过于复杂影响加载速度。
⑤红点：Badge，可以显示消息数量，标记状态发生变更。
⑥声音：声音也是一种反馈，**（思考）但是要考虑静音情况，是不是还可以结合震动。
4.5 分享功能
· 用户完成任何一个既定行为的三要素：动机、能力和触发器。
4.5.1 动机（理由）
· 用户的动机点很分散，分享场景尽量细化，兼顾所有的动机点，不仅可以分享链接，还可以分享其中让用户感兴趣的内容。
4.5.2 能力
· 降低用户分享的操作成本，让分享变容易，分享按钮（界面右上角，界面底部和跟随信息流）。
· 易用性来讲，底部分享更加友好适合单手握持机的用户。跟随信息流分享按钮用于社交类appp，外露用于引流。
4.5.3 触发器
· 除了用户主动分享还需要寻找触发分享功能的时机引导用户分享，比如点赞/截图后弹出分享行为。
4.5.4 载体
· 超链接：内容过多需要深入了解，内容详细。
· 图片：内容少，更直观。
4.6 引导页
· 引导用户快速上手，可由浮层、弹框和引导页等元素组成。
4.6.1 启动页、引导页和开屏广告
· 启动页：APP每次打开都需要加载资源，会耗费时间，需要启动页进行过渡。
· 开屏广告：特定的宣传需求，配置相应的开屏广告，增加对应的超链接，用户可直接进入目标页。
· 引导页：onboarding，首次安装产品或者产品版本更新后首次打开出现，并且只会出现一次，可在短时间内告诉用户核心功能或者本次版本更新上线的新功能，让用户有大致了解。
4.6.2 引导页设计要素
· 引导页：设计风格和内容取决于核心功能和目标用户群，主要就是以友好、易懂、最具吸引力的方式快速告知用户产品的基本信息。可由插画、文字、动画和图片组成。
①插画和图像：更具象快速传达。
②文字：足够简明扼要，减低用户阅读时间，具有概括性。
③动画：提升对产品的印象，但是会带来加载负担。
④跳过选项：最好页面右上角提供跳过引导页选项。
4.6.3 不只是引导页
· 第一次打开产品时，还可以让用户参与填写一些选择信息，提供个性化定制。
4.7 顶部栏（页面的头部，一般128px）
4.7.1 去标题化
· 为什么要有标题：标题的功能就是告诉用户当前界面的名称；
· 为什么要删标题：①一级界面有底部栏可告知用户界面名称，可以删除；②一级页面曝光量大，要展示足够的功能和内容，增加标题会压缩用户浏览区域；很多产品去掉了“首页”和“我的”页面的标题。
4.7.2 可点击
· 标题可以不仅仅是文字而已，可加入可点击元素；未登录的用户浏览时头部可以提供快速登录/注册功能；内容性的还可做下拉列表筛选呃逆荣。
· 极简化设计理念：删减与用户任务无关的非功能性元素或者把装饰性元素转变成功能性元素。
4.7.3 背景色
· 顶部栏背景色：品牌色、白色、深灰色、透明色。
①品牌色：品牌化处理可以直观知道品牌产品，但是不要大量使用，容易丧失层次感。
②透明色：节省界面空间。
4.7.4 导航栏
· 部分产品舍弃底部导航栏转用顶部栏做成一级导航栏，例如音乐类appp底部显示当前播放歌曲进度。
· 顶部/底部各有各的优势，还是要结合产品定位来确定。
4.7.4 隐藏
· 滑动隐藏：阅读类/内容模块，下滑阅读时增加用户浏览空间进行顶部栏隐藏，上拉时出现。
· 全程隐藏：相关空能放置底部栏。
第五章 组件
5.1 弹框
· 弹框：模态弹框与非模态弹框，区别为是否强制用户交互。
5.1.1 模态弹框
· 优点：很好获取用户视觉焦点，需要用户进行重要且不可逆的操作或者系统状态发生了明显变更。
· 缺点：打断用户当前的操作流程。
①对话框：吸引用户注意力，用户根据提示进行后续操作，很重要、有风险或不可逆操作。
单按钮，双按钮和多按钮。对话框是容器还可加输入框快速录入，还可以根据营销活动做成活动页样式，但是具体关闭按钮位置需要评估。
②底部动作栏：从页面底部向上滑出的面板统称（Bottom Sheets--MD规范，Action View/Action Sheets--iOS规范），底部动作栏是操作选项的容器，操作可采用列表式（2-5）/ 宫格式布局。
① vs ②：对话框（ask）文字较多，询问类多用；底部动作栏（confirm）默认用户已知操作内容，只需要确定操作即可。
③浮层（iOS设计规范中被称为Popover和UIMenuController）：点击空间或某个区域出来的半透明临时视图，一个页面有多个同类元素，浮层可以给用户根据指向性的提示。
① vs ② vs ③：
i、告知当前状态及风险性操作，优先考虑对话框；
ii、展示多个操作项，优先考虑底部动作栏；
iii、明确不同视图关系，给予更多指向性提示，考虑浮层。
5.1.2 非模态弹框
· 优点：不会对用户造成干扰。
①Toast：不会打断用户的操作流程，但是容易被用户忽略，不适合展示过多的信息，容易消失。提升信息的可读性和美感，可增加文字+icon组合样式。
②Snackbar：可点击的toast，不仅可以快速消失，还可以设置持续时间（京东断网提示可一致持续到网络正常）。
③Noticebar：一次可出现多个，不会浮于界面，可以融入界面元素中，一直提醒用户。
5.1.3 弹框体系的建立
· 能不用就不用。
①明确优先级：优先级不同要获得不同的视觉权重，弹窗要低频又合理的使用，重要信息不要用toast。
②多态按钮：通过改变自身状态减少弹框使用。
③多机型与多场景
5.2 表单
· 表单三要素：标签（标题）、输入框和按钮。
5.2.1 标签（这个列表项是什么）
表单过多，需要对内容进行分组整合提升内容的可读性。
· 左标签：常见，但是会占据屏幕较大空间，多行文本在右边输入框内无法展示完整信息。
· 顶部标签：可以给输入框腾出较大空间，但是会占用纵向空间，建议使用在信息层级更高的内容上，凸显其优先级。
· 行内标签：输入提示，切换到输入中就看不到这些标签了，可以考虑在键盘顶端增减提示，或者增加图标表示列表项，减少记忆成本。
5.2.2 输入框
· 提供用户完成信息录入，所以要提升信息的录入效率，数字掉起数字键盘，文字掉起全键盘。结合组件使用，避免手动输入造成格式错误。
5.2.3 容错性设计
· 减少用户的输入借由系统完成，表单容错性设计也是梳理表单中的鸡肋项。
①给予用户足够的操作提示；②自动填充完成录入的功能，输入时系统猜测可能的答案提供可选列表；③设置合理的默认值；
· 表单报错：单行表单报错/多行表单报错；
①单行表单报错：建议底部文字报错提示，实时检验实时反馈。
②多行表单报错：因为输入项过多，无法将报错提示和错误项联系起来，建议改变错误项文字颜色、输入框背景色和设置提示文案抖动，或者toast明确告知用户错误原因和解决方法。
5.2.4 按钮
· 位置A：符合从上而下的视觉习惯和操作流程但是如果表单项目过多，则需要滑屏才可看到按钮；
· 位置B：按钮固定页面底部，适用于列表项多但是很多是非必填不需要用户全部浏览完成；
· 位置C：逐渐淘汰，手机屏幕过大不方便单手触碰，而且不符合视觉习惯和操作流程。
5.3 tab
· 顶部栏tab（二级导航），侧边栏tab（三级导航）和底部栏tab（一级导航）。
5.3.1 位置
①筛选诉求的程度
侧边栏tab放在左边符合用户从上往下，从左到右的Z形浏览习惯，备用功能可放在右边（城市列表拼音项）。
②隐藏还是显示
一般有隐藏tab栏需求时会放在右边，避免和返回按钮冲突。
5.3.2 状态
· 文字和icon组成，状态可分为选中/未选中，可以利用字号、字色、线条和背景色凸显选中状态。但是要注意减少用户对导航体系设计的注意力而是更多注重内容。
· 与UI设计沟通时，除了界面风格功能点外，还需要涉及信息层级，具象实际需求，避免重复修改。
5.3.3 使用场景
· 功能单一的简单产品可以无需tab（QQ邮箱），tab过多的产品可以切换成弹框宫格/列表展示更多筛选项。
5.3.4 tab与Segment Control
· tab是MD设计规范中的组件（可容纳多个选项，通过滑动查看更多）。Segment Control是IOS设计规范中的组件（2-5个选项）。虽然tab可容纳多个但是选项过多可用弹框展示多个选项。
5.4 标记系统
· 当产品中出现同类别的元素时，我们考虑使用标机系统帮助用户区分不同状态。
5.4.1 角标
· 表现力强，用于产品的营销宣传期间，提升用户点击率，“爆款”，“折扣”，“热销”。缺点是同个产品多个卖点，需要对信息进行优先级排序，避免过多造成拥挤。
· 表现力强
5.4.2 标签（Tag）
· 标记任务：表现力稍弱于角标，不太重要功能，同时展示多个，可以设置不同的背景色来区分。
· 同时还有信息筛选和分类作用。
5.4.3 红点（Badge）
· 展示状态的变更，可放数量或数字以外的文本内容，甚至直接红点展示。适当缩小尺寸避免产生烦躁情绪。
5.4.4 印章
· 用户表单内信息的标记首选。
5.4.5 场景和层级
· 场景不同，样式不同：同一款产品中，使用场景和信息层级的不同，相同的组件也会有多种不同的展示样式。
· 层级不同，样式不同：同样的标签列表页面用面状吸引用户，详情页线状展示。
5.5 信息录入
· 优化信息录入场景，提升信息录入的效率，尽量避免用户手动输入。
5.5.1 下拉框
适合选项较多，存在多层级结构关系
· 优点：节约界面空间；无限量增加选项；可展示多层级的选项。
· 缺点：点击弹出才可看到所有选项；所有选项由上至下，无法提现优先级。
（思考）优先级可以重要的放在前面，还有一个缺点是过多的输入项，不断滚动很麻烦。
5.5.2 单选按钮
适合选项较少，页面空间充足
· 优点：直观展示所有选项；
· 缺点：影响页面整齐。
5.5.3 开关
中要区分这两种样式，开关状态不同（关闭还可置灰设计）。
5.5.4 计数器和滑块
· 用户数字录入，计数器（InputNum-ber）/滑块（Slider）。
· 计数器：小范围调整，进行数量调整，配合支持用户手动输入。
· 滑块：区间范围，不是很精准的场景，有的滑块也支持具体数值选择。
PS：两个值不一定要设计两个控件，会增加点击次数，结合场景也可以整合为一个控件完成两个数值录入。
