创建UI组件库的内容

释放双眼,带上耳机,听听看~!

**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>

人已赞赏
知识整理

AE基础教程

2018-3-27 13:59:09

知识整理

PR在A视频局部添加B视频

2018-3-29 12:22:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索