列表设计牵一发动全身
-----------------------------------
众所周知，表格在设计的过程中，往往是牵一发而动全身。比如需求修改了文案、增删列、变更信息属性、屏幕尺寸适配等等等等情况。
设计反思
----------------
我在一开始接触表格的设计时，设计的组件不够灵活，经常面临解除组件---修改麻烦---逐渐烦躁的过程。
比如将建立行组件，通过复制行的方式组成表格，这样子每一个表格都需要创建新的行组件；
又或者将单元格背景与文字组合，这就导致有时候出现错位问题，或者想换背景时比较麻烦。
之后重新反思设计逻辑，思考如何更合理的利用sketch中的组件来减少自己的改动成本、提高效率、避免不必要的工作摩擦。
——————————————————————————————————————————————————
今天只是综合之前的一些设计经历，分享一下自己目前在sketch中快速、灵活构建列表的方式。
表格设计基本要求
好的列表设计文件应该满足：可快速搭建、可灵活修改、可适配的
重新定义整体的设计逻辑
背景与内容分开处理；按列组合；单元设计。
设计逻辑
1个表头文字单元+N个内容单元=1列
1个表头背景行单元+N个内容背景行单元=整个表格背景
N列+表格背景=整体表格
先拆解成小单元吧
------------------------------------
从最基本列表着手，按功能拆分元素，尽量分解到最小单元，再扩充样式库
1、先确定基本单元，包括： 表头单元、内容单元、表头背景行单元、内容背景行单元、边框
2、将基本单元进行组合：列组合、背景组合
3、合成表格
1）确定基本单元类型：
确定基本单元类型
2）梳理各基本单元包含类型及常见状态
-----------------------------------
一般来说，表头单元的样式只需要设置一种就足够使用了：文字+icon（icon设置为组件方便替换）
而内容单元除了设置文字居中、居左、居右的情况外，还需考虑各种类型的单元格内容。
常见的比如： 纯文本描述、可点击文字、复选框、状态、标签、图片等。分别做成单一组件，方便在列的属性发生改变时进行快速替换。
内容单元
3）设置单元组件的样式及参数
--------------------------
做单元组件时，要设置好文字对齐方式、元素尺寸、靠边固定方式、整体布局变动方式。让整体布局在文本信息变动时不会乱掉。
拿 “状态单元” 来说明一下：
设置单元格样式
组合成列
----------
设置好小单元，就可以进行组合列
因为常见的表格默认展示10或5条，所以按1表头单元+ 10或5个内容单元组成一列。
组合成列
按列组合的原因在于：
1）不同表格的差异在于列数，按列组合后，可以更方便控制列之间的间隔
更方便控制列之间的间隔
2） 利用平均分布的数值调节，可轻松调节行间距
轻松调节行间距
3）可以批量修改单列的属性：单元类型、文字信息、表头单元与内容单元对齐方式
批量修改单列的属性
列与背景如何配合
---------------------------------
背景与行背景与内容行背景组成
组合背景
任意拉伸背景宽度
任意拉伸背景宽度
快速调节行高，适配内容行数
快速调节行高，适配内容行数
以上方法只是我在项目过程中提炼出适合自己的，如果有更好的设计方式，也希望能够分享给我～
网友评论