**1. 顶部导航栏**
**2. 底部导航栏**
**3. 键盘**
**4. 表单**
**5. 按钮**
**6. 会话**
**7. 弹框**
**8. toast**
**9. 上拉菜单**
**10. 发布**
**11. 内容**
**12. icon**
[## 1. 顶部导航栏]
* 建议同时准备浅色和深色两套组件，绝大多数产品的需求在线框图阶段均可以通过这两套方案满足。
* 导航栏左端、右端的控件可以分别作为Symbol嵌套进导航栏，”加号/返回/搜索/拍照/用户/更多“等图标按钮和文字按钮可以方便地直接切换，而不用重绘整个导航栏。
* 导航栏主要需要考虑的形式包括：普通、最小化（页面向下滚动后）、直接作为搜索栏、直接作为Tab控件等形式。
* 二级导航需要考虑不同形式的搜索栏（及其获得焦点时的状态）和Tab页（一般同时准备分段式和标签式两种）
<image w=454 h=2000 describe= name=Notes_1522209037536.png>
[## 2. 底部导航栏]
* 同样，建议同时准备浅色和深色两套底栏，以应对绝大多数产品的需求。
* 以四分式的底栏为例，4种不同激活状态可以直接命名为4-1、4-2、4-3、4-4四个Symbol，绘制不同一级页面时可以直接切换。
* 图标建议单独作为内嵌Symbol，这样在需要修改图标时只要修改一个地方就可以实现全部更新。
* 红点提醒同样建议作为内嵌Symbol，需要准备共4种状态：一位数、两位数、无数字（小红点）、无。除了底栏外，产品中任何出现红点提示的地方（例如聊天列表等）都可以直接嵌入这些Symbol，实现4种状态间的快速切换。
<image w=800 h=1670 describe= name=Notes_1522211598065.png>
[## 3. 键盘]
* 一般以下11种键盘可以满足大多数场景使用：默认键盘（Default）、密码键盘（ASCIICapable）、数字符号键盘（NumbersAndPunctuation）、数字键盘（NumberPad）、搜索键盘（Search）、小数键盘（DecimalPad）、推特键盘（Twitter）、文本数字键盘（NamePhonePad，特殊在于次键盘，主键盘与默认键盘相同）。
* 键盘的Enter按钮可能有换行（Return）、搜索（Search）、完成（Done）、发送（Send）等多种可能，因此建议单独拆出作为Symbol嵌套在键盘组件中，便于切换。
* 输入条、输入提示、表情面板（及相应的分页器）在同一产品内也可以进行组件化处理。
<image w=740 h=2000 describe= name=Notes_1522211691384.png>
[## 4.表单]
* 需要考虑的列表项类型：单行式，双行式（带副标题或描述文字）、文章摘要式（纯文字/图文式）、列表标题和脚注、”查看更多“项、输入框（单行/多行，输入前/输入中/输入后）、滑块。
* 广义而言，与社交相关的联系人列表、聊天列表也是表单的一种，同样可以归为这类组件。
* 建议作为内嵌Symbol单独绘制的左端元素：文字前的icon（或空白缩进）、勾选控件（单选/多选，选中/未选中）、用户头像（单用户头像/群聊头像）等。
* 建议作为内嵌Symbol单独绘制的右端元素：小箭头（向右/向上/向下）、详细信息（居左对齐/居右对齐）、各类图标（如用于提示的”i“图标、如输入框的删除图标等）、开关控件（开/关，可用/不可用）、星级控件。
* 列表组内，各项之间的分隔线都是有缩进的，第一项的上分隔线和最后一项的下分隔线除外。因此，这里特别建议的是将列表项的上分隔线、下分隔线也单独绘制为内嵌Symbol，每条分隔线都设置全宽（Full）、缩进90/30/20（Retract90/30/20）共4个子类，加上每个内嵌Symbol都可以设置为None（不显示）状态，即可应对一个列表项出现在一个列表组中时的任意情况。在Sketch提供Symbol内嵌功能前，如果要准确地呈现分隔线，对每一类列表项都要绘制4种可能性：位于列表组首项、位于列表组末项、位于列表组中间项、自己单独作为一个列表组（此时上下分隔线都是全宽的），而在这一重要功能更新后，只需要灵活切换上下分隔线的Symbol即可。
* 列表项如果支持左滑操作时，也可以对正常状态和左滑状态进行组件化处理。
<image w=680 h=2000 describe= name=Notes_1522211774884.png>
[## 5.按钮]
* 这里的按钮特指容易组件化、也容易在各产品间复用的文字按钮，而icon按钮一般在设计相应的产品时，在产品内部相应地制定规范即可。
* 对这类按钮，按尺寸可以分为全宽、半宽、小型、表单式共4种，按功能样式同样可以分为主要操作、次要操作、警告操作、线型按钮4种，按照以上两个维度的组合，基本可以满足一般产品中常见的文字按钮需求。
<image w=800 h=1196 describe= name=Notes_1522211821279.png>
[## 6. 会话]
* 对话气泡、时间戳、长按菜单均可以进行组件化处理。
* 对话气泡需要考虑的情形：左还是右，行数和宽度（线框图阶段考虑一到两行即可，其中两行的宽度是稳定的，而一行的宽度会随字数变化）、头像带不带用户名（一般而言，右侧也就是自己的头像肯定是不带用户名的，而左侧也就是对方的头像，需要考虑带用户名和不带用户名的两种情况）。圆角气泡和小箭头可以分别作为Symbol进行更灵活的组合。
* 时间戳：主要考虑的是不同字数对应的宽度。
* 长按菜单：以一种常见的圆角水平菜单为例，最左项的左端和最右项的右端是有圆角的，中间项没有圆角，而如果菜单只有一项时，左右两端都有圆角，因此，可以将其拆分成最左项、最右项、中间项、全圆角共4类Symbol，同时小箭头也作为一个Symbol，与菜单项自由组合。
* 文章推送也是一种会话的形式，同样可以作为一个组件。
<image w=800 h=1860 describe= name=Notes_1522211899646.png>
[## 7. 弹框]
* 弹框需要考虑的情形：带不带标题、有几行提示文字、有几个按钮、带不带图片，对可能用到的弹框形式均可以设计相应的Symbol。
* 遮罩层同样可以作为一个组件，一般准备全屏遮罩层和露出导航栏的遮罩层2种即可。
<image w=800 h=1720 describe= name=Notes_1522211942759.png>
[## 8. toast]
* 常见的Toast形式需要考虑居中型（带icon）、顶端型（带icon）、底端型（纯文字）三类。带icon的Toast，在线框图阶段准备以下4类即可应对绝大多数场景：成功型、失败型、警告型和等待型。
<image w=800 h=900 describe= name=Notes_1522212009884.png>
[## 9. 上拉菜单]
* 菜单标题、普通按钮、取消按钮、Gap（普通按钮组与取消按钮之间的间距）等Symbol即可组合出满足大多数需要的ActionSheet。其中，普通按钮需要考虑居中、居左、带icon居左这三种形式，其中主文字居左时还要考虑右端是否有描述文字。
* 此外，导航栏”更多”按钮调出的下拉菜单实际上也是可以考虑组件化的控件，但ActionSheet作为一个有平台规范约束的控件，一致性和复用性较好，在设计师个人的组件积淀中更有组件化的价值，而对下拉菜单、分享菜单等其他形式，在有针对性地设计一个产品时再对其进行组件化设计也来得及。因此本文的介绍中暂不涉及这些菜单。
<image w=800 h=540 describe= name=Notes_1522212075756.png>
[## 10. 发布]
* 这里主要指类似社交或内容平台中，编辑或用户发布的卡片式Timeline，以微信、易信等IM中朋友圈模块为例，看似这类模块的情形较多、难以组件化，但如果仔细按行分解的话，无非是以下这些元素行的组合：头像ID行、文字内容行、链接内容行、图片内容行（单图、多图）、时间地点信息行、互动控件行、点赞名单行（单行、多行）、评论行。
<image w=800 h=1020 describe= name=Notes_1522212118480.png>
[## 11. 内容]
* 与在Axure中习惯用一个叉号表示图片的占位符类似，这里实际上就是将这类图片占位符根据产品需要，细化成多种更具体的类型，从而让交互稿更有效地传达设计师的意图。
* 比较通用的可以考虑以下几种：地图、一般性照片（风景等）、饮食、图书、人物、统计图表（柱状图、趋势图、饼图）、用户头像，以及音视频的播放器。其他的可以根据自己当前产品的需要，自行添加。
<image w=800 h=340 describe= name=Notes_1522212165886.png>
[## 12. icon]
* 当做过的产品比较多时我们很容易感觉到，常见的icon无非界面、社交、电商支付、档案、书影音、文字编辑、饮食、设备、交通、天气等类型，如果随时整理和积累，在新项目中找icon时，就可以不知不觉享受到信手拈来的快感。
* 一般而言，建议每个icon准备以下4类：浅色线性、浅色实心、深色线性、深色实心。
* 不过icon集不一定要全部放进项目的Symbol库，尤其是当积累了一定数目时，Symbol数量过大会显著拖慢Sketch的响应速度。因此更建议icon集单独在一个文件中积累，项目需要时再按需选择即可。
<image w=800 h=580 describe= name=Notes_1522212218593.png>
Comments | NOTHING