控件是构成APP原型的基本元素，比如：按钮、导航、弹窗、开关、浮层、表单等等。就像工业产品一样，一块块基础的零件，组合起来构成了一个产品。在了解了基本规范之后，我们才能在设计中，结合商业需求与用户体验进行延展或者突破。
控件大致可分为通用控件和其它控件。本文将围绕着产品基础控件，对设计要点进行总结。
▼ 通用控件一览，以IOS端为例
01 状态栏 Status Bar
状态栏通常显示设备信息或用户收到的通知，在IOS中有2个特性：透明、固定在屏幕顶端。虽然状态栏是最没可说的Bar之一，但其实还是有几点细节值得注意：
1.不要自定义状态栏
状态栏更多的是对系统以及当前环境状态的显示，不是体现产品个性化内容的区域。如果一个WIFI图标，在几个APP中都是不同的形式，就会增加用户的识别成本。
2.保证状态栏内容不被干扰
状态栏本身是透明的，为防止状态栏信息与滚动内容重叠，需要在底部叠加一个背景。例如微信朋友圈，向下滑动至一定的区域，导航栏底部会增加一个背景。
3.状态栏并非强制要求出现
有些APP没有导航栏。比如助眠类APP Calm，刻意地去掉状态栏会让人忘记时间，沉浸在模拟的环境当中，减少失眠的焦虑。
有些APP会暂时隐藏导航栏。例如一些阅读、视频等需要沉浸式体验的页面，用户可以使用简单的手势重新显示状态栏。
▼ 图1：助眠软件 - CALM；图2：微信读书 - 通过轻触点击隐藏/显示状态栏
02 导航栏 Navigation Bar（安卓叫Top App Bar）
iOS中，导航栏是位于产品顶部、状态栏下方的容器区域，层级应高于当前页面内容。
如何理解导航栏？现实世界中，导航的作用是告诉你目前在哪，能去哪。在界面设计中，导航栏的作用其实也是一样的。
1.大标题or常规标题
导航栏尺寸不止一种。随着全面屏手机的普及，移动设备在屏幕高度上有了一定的扩展，大标题导航栏的设计随后也引入平台规范。
常规标题字号一般为17pt-19pt（官方为17pt）。
大标题官方为34pt，但同等字号中文视觉上看起来比英文大，实际项目中文会适当缩小，通常在28pt-32pt之间。
大标题导航栏的优势在于呼吸感强、大气现代。但其缺点也一样明显，因为增加了导航栏的高度，导致屏幕利用率降低。于是产生了风格改进的大标题导航栏（例如QQ音乐），在不占用屏幕利用率的情况下，增加标题的高度，这样就能够增大首屏内容的展示率。
1）例如像短信、信息这样以阅读为主的页面适合大标题，大字号能够拉开与内容的层次。
2）当需要凸显产品简约文艺时适合大标题。留白、强烈的文字对比，给人大气简约的感受。但非高端电商和交友类的产品可能不适合，太冷清的页面，不符合产品定位。
一些工具类产品不那么适合大标题。这一类产品，大量交互行为发生在操作按钮上，大标题反而会干扰用户的注意力。
2.导航栏可置入控件
基于导航栏层级始终高于内容区域的特性，我们通常可以将分段控件、分页标签、搜索栏等用户可能随时使用的工具放在导航栏中。
▼ 为了快速落地，双平台会存在一稿适配的情况。例如导航栏也可以置入溢出菜单，尽管这只是是MD提出的设计理念。
3.通栏与非通栏
通栏导航栏的视觉呼吸感更强，和banner板块似乎融合在一起,相对来说第一屏显示的内容更多。
当产品经理说，用户老是把我们和竞品混淆，导航栏按钮点击不理想时。这时非通栏可能更适合，将品牌色作为导航栏底色，ICON也会更突出。
▼ 非通栏第一屏幕显示的内容较通栏少一点。当产品有一些重要信息没有展现出来时，可以考虑缩小banner的高度
03 安全设计区 Safe Area
根据产品属性进行设计的部分，包含各种卡片、列表。每个产品的安全设计区，都有一套不断迭代后，沉淀下来的规范。
首先我们理解一下“流”的概念，我们可以联想到水流，是指以图片、信息、按钮为载体的一个流体，可以不断的向下延伸内容。
1.图片流
图片流是以图片为视觉重点，满足用户筛选图片的需求。
花瓣、Pinterest的首页展现方式就是用的卡片流去承载图片、用户头像、用户名等信息。
2.卡片流
在生活中，一堆杂乱的物品放在桌面上，我们找东西就会很慢。这时候用收纳盒，进行科学的分类和归纳之后，效率会高很多。
卡片流的作用也是如此，通过科学的排版方式， 提高用户的阅读效率，帮助用户快速找到功能入口。
3.feed流
feed流其实是将单词‘feed’与“流”这2歌概念融合在一起了。
feed字面意思是喂养，feed流指的就是不断的向用户投放他们可能感兴趣的最新内容，把用户当作等待喂养内容信息的人。
04 标签栏 Tabbar（安卓叫工具栏 App Bottom bar）
标签栏位于屏幕底部，它是悬浮在当前页面之上的，并且会一直存在，只有当用户点击跳转到二级菜单后才会消失，数量 一般在3-5个。
在界面落地后，“标签栏”是在视觉层面向用户展现产品框架最直接的控件。
1.标签栏≠底部导航栏
标签栏是对多个平级页面的切换，导航栏是对于当前页面位置的阐述与承接。
2.IOS中标签栏的形式
数量上，建议在3-5个之内。标签过多，会使产品结构变复杂，并且由于触控面积变小，容易导致用户误触。
版式上，纵向模式为上下结构，横向模式下为左右结构，icon与icon之间距离平均分配；
另外，有些标签栏会使用纯文字，有些会使用纯icon。
我的理解是，文字在视觉上是没有图标那么吸引眼球的，并且最直观，抖音界面中的核心焦点在于动态的视频，并且右侧已经有图标了，使用纯文字标签栏保证画面焦点不会太分散。
3.视觉分割
视觉分割是为了区分标签栏与安全设计区的层级。防止视觉上的混淆。
当今线上APP，用毛玻璃和线条来做分割的标签栏较多，用投影的较少，用色块的更少。
4.舵式标签
某些社区类APP标签栏中部嵌入一个工具按钮，这种标签栏称为舵式标签。
起初是为了方便用户输出UGC内容。但因为舵式标签可以很好地凸显产品的重要功能，从而被许多产品所采用（尤其是内容社区类）。
舵式标签的工具按钮通常与产品框架无关。用户可以在任意页面随时操作该功能，该操作并不属于任何一个页面。
▼ 舵式标签栏 - 将重要功能置于标签栏中央，缩短交互路径
05 工具栏 Tools Bar
1.标签栏与工具栏的区别
根据功能来区分两者，标签栏是对于多个页面的切换，而工具栏则是当前页面中的工具按钮。
Ios指南规定，标签栏和工具栏不应当同时放在一起，会使用户认知产生歧义。
2.工具栏也可以隐藏
工具栏可在需要对当前页面需要操作时出现，许多产品都可控制工具栏的隐藏与出现。
▼ 百度网盘未选中文件时底部为标签栏，选中文件时底部为工具栏
本次主要是针对控件的基本形式、规范进行总结，以后会继续探索每个控件的表现层。
千里之行,积于跬步
下期将探索产品中的其它控件。
下期见～
