原副标题：商品副经理画蓝本，掌控这3类原素就能了！
他们平常看见的APP，都是由栏、命令行和快照Aulaye介面原素共同组成的。掌控那些下层、此基础的模块，能提高蓝本结构设计的潜能。责任编辑对Aulaye常用的介面原素进行了剖析，一起来看呵呵吧。
商品副经理有很大一部分时间，都在做商品结构设计，商品结构设计有几项很重要的工作是蓝本结构设计。
在做蓝本结构设计时，时常会碰到以下难题：
没有逐步形成他们有效的模块库，每天画蓝本的时候都现想，工作效率低； 索韦泰，Churu，能把蓝本画出来，但每一介面加进什么原素，为何要用这个原素，是不确切的； 只考量介面，不考量情景，不能做出更佳的可视化计划；出现以上那些难题，是对可视化结构设计的科学知识掌控得不够，这首诗剖析了iOS可视化中常用的四类介面原素，主要包括栏、命令行和快照。
能说他们看见的所有APP，都是由Aulaye原素共同组成。掌控那些下层、此基础的模块，能提高蓝本结构设计的潜能。
Aulaye原素包涵具体内容的子原素，栏有6个，命令行有14个，快照有13个，总共33个原素，很大要熟练掌控。简而言之熟练掌控，最合适是能达到这种程度：
提过原素的中英文名； 能够知道每两个原素的具体内容采用情景； 每两个原素，能有1-3个结构设计图；熟识了那些原素后，再画两遍，逐步形成他们国际标准模块库，以后画蓝本会用上。Aulaye原素的国际标准来自于iOS，但在大部分情况下，也适用于于Android应用领域、H5应用领域。
为何要他们画两遍？因为他们画两遍能加强记忆，很多下层此基础的东西，是要读懂才行。
千万别寄希望于在网路上去浏览两个通用型的模块库，自此十分困难，网路上很多写手撷取的模块的确很全，但有很多输入输出的，可能80%都Niederbronn。
掌控最此基础的原素，能配搭出各种模块，很大要逐步形成他们的模块库，主要包括散纹撷取的模块，也是给大家两个参照，千万别做本土化。
上面他们来具体内容说呵呵具体内容原素的采用。
01 栏
在iOS人机可视化结构设计指南里，把栏总共分为6种，分别是状态栏、导航栏、搜索栏、标签栏、工具栏、侧边栏。
为了方便梦境，能按照所处的位置，从上到下，顶部有状态栏、导航栏、搜索栏，底部有标签栏、工具栏，侧面有侧边栏。
1）状态栏 StatusBar
状态栏显示用户当前的移动网络信息、WiFi信号、时间、电量等，大部分情况下，需要让用户知晓那些信息，但为了沉浸式的效果，也能隐藏。
不同机型，状态栏不一样，但他们画蓝本时，有两个能占位的模块就行了。
2）导航栏 NavBar
导航栏通常左侧显示返回按钮，中间显示页面副标题、右侧显示快捷操作。
微信的导航栏，当页面数据正在加载时，副标题处显示正在加载的效果。
3）搜索栏 SearchBar
搜索栏，主要是用于搜索的入口，搜索栏通常配合搜索介面，在搜索介面，显示最近的搜索记录，还能一键清空搜索内容。
当搜索结果较多时，能加两个范围选择，能快速进行分类。
微信的搜索页：
小红书的搜索页：
4）标签栏 TabBar：
标签栏位于页面底部，能快捷切换，换到不同的页面，通常作为商品的一级导航。
微信的标签栏：
小红书的标签栏：
5）工具栏 ToolBar
工具栏是对快照的操作，比如对文章、音乐、视频的点赞、收藏、评论。
小红书的点赞、收藏、评论：
工具栏容易和标签栏混淆，标签栏属于导航，而工具栏属于操作，这是本质的区别。
6）侧边栏 SideBar
侧边栏，默认情况下是收起的状态，当点击某个按钮的时候，从侧面弹出，当移动端页面内容紧凑时，会考量采用侧边栏，比如个人中心、分类筛选项目较多。
侧边栏最典型的代表是豆瓣：
02 命令行
1）按钮 Button
按钮是比较常用的命令行，通常是用商品进行输入操作发起的入口。
2）开关 Swichs
用于状态控制，也是比较常用的操作。
3）情景菜单 ContextMenus
移动端屏幕尺寸较小，一些功能性的操作不能完全平铺出来，此时，通过情景菜单，能扩展更多的操作选项。
比如在iOS系统里，长按图标，能弹出撷取、删除、编辑等操作。
4）编辑菜单 EditMenus
能在一些文本快照、网页快照中，选中文本，来执行更多的操作，如复制、转发、收藏。
微信公众号文章的文本编辑菜单：
5）选择器 Pickers
当某两个选项可能包涵多个值时，能使用选择器，比如省市区、项目类型等。
6）滑块 Sider
在选择简单数值时，能采用数字滑块。比如在借贷商品里，选择借款金额时。设置参数档位：
7）步进器 Stepper
能更快速调节数字。
8）进度控制器 Progress Indicators
在加载页面时，能通过进度控制器显示当前进度。
9）刷新 Refresh Content Controls
在页面加载数据时，能采用刷新加载命令行。微信时聊天介面是在导航栏里加了加载的状态。
10）分段器 Segmented Controls
在移动端，分段器的采用频率比较高，尤其是在一些订单的状态分类情景中。
11）页面指示器 Page Controls
在两个页面里，要展示更多的内容，能采用页面指示器来容纳更多的内容。iPhone的页面指示器：
12）文本框 Text Fields
文本框是时常加进的命令行，文本框的样式也有很多种，结构设计文本框时，有几个要点：
最合适是做实时的校验，减少用户重新输入的成本； 加入一键清空的按钮，能让用户快速清空，重新填写； 友好的提示文案； 同一页面千万别加入太多表单，当表单太多时，分步骤实现。13）标签 Lables
14）色彩面板 Color Wells
这个命令行的采用频率相对较低。
03 快照
快照是各类原素的组合，掌控此基础的快照，能更高效完成蓝本。
快照能分为内容类的，如表格、文本、图像、网页以及集合，还有操作类的，如行动菜单、警告框、弹出框、工作表、活动快照。其他的快照还有分栏快照、滚动快照和翻页快照。
1）表格 Table
2）文本快照 Text View
3）图像快照 Image View
4）网页快照 Web View
5）集合 Collections
集合是由比较复杂的模块共同组成，没有太固定的模式，比较灵活。
6）行动菜单 Action Sheets
需要执行比较重要的操作，或者选项超过2个以上时，能采用行动菜单，行动菜单通常是从底部往上弹出。
7）警告框 Alerts
8）弹出框 Popovers
Popover是正常操作流程中短暂出现的两个控制区域，根据iOS人机可视化指南的原则，尽量千万别在iPhone里采用这个空间，因为iPhone的屏幕相对比较小，在iPad这种屏幕较大的系统里，能采用这个空间。
9）工作表 Sheets
工作表是相对比较复杂的可视化，在两个活动快照里加了一些表单。比如发送邮件。
10）活动快照 Activity Views
活动快照，是对当前上下文有用的任务，例如在微信里，对文章的一些列操作：
11）分栏快照
分栏快照管理两个并排的快照，主快照中显示主要内容，右侧辅助快照中显示辅助内容。在iPhone里，很少加进这种快照，在iPad等较大的设备上，比较常用。
12）滚动快照 Scroll Views
当一屏显示不完整时，采用滚动快照，能展示更多的内容，在iPhone上很常用。
13）翻页快照
翻页快照提供了一种内容页面之间实现线性导航的方法，帮助从两个页面流畅的切换到另外两个页面。
写在最后
以上内容均来自《iOS人机可视化指南》，虽然是iOS的指南，但其背后的逻辑是相通的。
每一商品都是由界面共同组成，每一介面又都是由栏、命令行和快照那些原素共同组成。Web商品、移动H5商品、移动iOSAndroid商品都是这样。
作为商品副经理，虽然不必精通可视化，但应该具备可视化结构设计的基本科学知识，至少掌控一套移动端的命令行，一套Web端的命令行。
移动端的命令行，主要包括uniapp、vant都跟iOS的可视化很类似，所以掌控最下层的iOS可视化结构设计规范，就掌控了大部分移动端的结构设计规范。
Web端的命令行，也有很多国际标准的前段框架，比如element、layui、bootstrap，推荐大家学习呵呵element的模块。
还是那句话，千万别去网路上浏览别人做好的模块库，他们阅读呵呵官方的结构设计指南，然后动手他们画一套，明确每一模块的可视化逻辑，应用领域场景。
别人输出的东西，是经过加工的，掌控下层的规则，他们进行加工输出，会更牢固的掌控相关科学知识。
看完这首诗， 希望你能动手去剖析移动端和web端的模块，逐步形成他们的模块库。
专栏作家
散纹，微信公众号：散纹说，人人都是商品副经理专栏作家。7年商品老司机，现任某互联网公司高级商品专家，有丰富的金融项目经验，丰富的实操经验，擅于输出接地气的实用干货，帮助成千上万的商品副经理晋升成长。
题图来自Unsplash，基于 CC0 协议。
