视觉设计细节 锦集

近半年设计工作从纯交互向体验设计过度，经常出现的问题是，会忽略很多视觉细节，导致最后产出的视觉稿仍旧有“交互稿”的影子。这里记录一些设计产品时的日常视觉细节收集和思考。

微信7.0：

信息层级扁平化：整体采用比较弱的配色对比，扁平化了背景部分，通过加粗 icon 的线条和颜色突出避免难以阅读；顶部tab和置顶消息的颜色统一。

间距调整：增大了各个列表的高度，间距增加后阅读更舒适，且可操作面积更大。

一致性：icon 风格、颜色的统一；操作按钮。

子弹短信

新版的子弹短信，脱离了锤子的设计风格。整体更加年轻化和易读。

颜色：减少大面积的品牌色。

icon：从面+线型改成了线性。

操作：原先聊天对话里面，语音按钮是一个小的按钮。现在面积更大。

做云产品官网时，出现的问题

颜色：确定主色的时候，取色不够干净。

配色：在辅助色上，容易使用纯黑纯灰，同时容易过度使用品牌色，使页面过于单调。画配图的时候，有时为了加强对比，会不断压低暗色的明度，会比较容易沉闷。可以提亮整体配色，同时小面积使用深色。

字号：字号太小拉不开间距。

间距：页面间距过大，容易使得页面松散。缺少横向和纵向的视觉基线。

插图构思：由于很少画插画，在开始的时候，很担心画面过于单一，所以想了很多个“主体”。但实际带来了很多问题，比如构思时间过长；实际的展示空间小但元素多；画面分散。