在web 或 ui 设计过程中,由于长期以来的习惯,导致一些“此处应有思考”的部分由于长久以来的工作本能,因而直接完成了。但事实上,在这过程中,潜意识下是有一个思考在里面的。就比如下面我要说的这个设计交错法
设计交错法是我自己起的名字,来源于在 Photoshop 中 png 图片导出时的选项Interlaced(交错)
这个选项的功能是能够使图片在页面加载过程中由模糊到清晰逐步呈现。多适用于比较大的头图。但是缺点是会使图片的大小稍微变大那么一点点。
而我所说的设计交错法是指在设计中,先设计出 重要 - 次要 - 最次要 这样视觉优先逐级递减的规范,从字号,颜色选用等等。也就是按照视觉优先级来制作一套 ui kit。而后接下来的就是在设计界面中,闭上眼,想象你看到这这样一个界面。先把你第一眼看到的最首要的元素用按照重要级的规范从你之前制作的 ui kit 中设计出来。而后以此类推,再完成次要级的和最次要级的设计。这样在整个设计过程中,你的思路,就像你在看一副页面上交错出现的图片一样。又模糊到清晰的一个呈现过程。
这样的做的好处有
- 逻辑清晰,条理性强。符合界面关注度顺序。
- 有层次感,不同层级之间有明显的对比。
- 如果把之前的 ui kit 做成 sketch 中的 symbol,在实际效果中统一调整,根据实际界面视觉效果做出反馈修改,会很方便。
这个方法也可以应用于原型设计阶段,在纸上用不同粗细的针笔,不同硬度的铅笔,来描绘不同视觉优先级的元素。