Sketch 特训 - 2
Sketch 作为 UI 的专属工具，其最大特性是快捷，天下武功，唯快不破。如果你想做酷炫的视觉，PS 明显具有更大的优势。但作为一名交互设计师，我首先重视效率，在可行的情况下，也会不断探索如何用 Sketch 快速做出匹敌 PS 的视觉效果。
今天探索一下列表的创建。在 APP 中，由于界面大小受限，列表结构无处不在，无论是文字列表或卡片列表，单行列表或多行列表。所以形成一套自己对列表结构的理解，有利于日后快速创建界面。
List Structure
列表重点总结：
- 视线移动
- 列表单位分隔
- 列表单位内容层级
- 视觉优化
视线移动
当我们看列表内容的时候，我们视线大部分是从上到下，再从左到右，如下图：
视线移动
这样一来，我觉得，强调每一行的起点便尤其重要。不能快速定位每一行的起点，用户便不能保持流畅阅读。因此，我认为的列表结构如下：
突出头部内容，确定行起点
列表单位分隔
当用户定位到行起点后，会完成该行内容的阅读。此时用户有阅读新行内容的需求，如何让他们快速分别行与行的区别，即列表单位分隔，选择想读的新行，便显得重要了。
列表单位分隔方法：
- 留白分隔
- 横线分隔
- 阴影分隔
- 边框分隔
- 背景分隔
1-5 从左至右排列
我个人的设计偏好是简单，能不用分隔辅助的时候尽量不用。但是当信息复杂度达到必须使用分隔帮助用户梳理信息的时候，多试试不同的样式，选择合适的即可。
列表单位内容层级
对于列表的每个单位，我们也需要区分其优先级。当用户阅读每个单位内容的时候，什么信息对用户是最重要的，什么是次要的，最后在视觉上将重要性体现出来（大小，间距，颜色等）。
内容层级
视觉优化
我尝试临摹一下简书APP首页的列表。
左-改版前，右-改版后
重点总结：
- 视线移动：用方形的图片(视觉面积较圆形大)，吸引用户注意力
- 列表单位分隔：用留白加短线分隔列表单位，弱化视觉负担
- 列表单位内容层级：不同大小和颜色字体区分内容层级
- 视觉优化：根据自己对页面的感受进行微调，如间距，大小
设计流程可参考 Sketch APP UI 15天特训 - 1。
推荐
为了提高 Sketch 的操作效率，推荐大家一个插件 Runner. 它可以像 Mac 的 Spotlight 一样，快捷键打开，通过全局搜索执行操作，很大的节省了鼠标查找再点击的操作。
Runner
感谢您的阅读，我们下期再见。
网友评论