细节很重要！实战案例告诉你如何进行视觉优化

为什么要视觉优化？

大多数人看来，从视觉层面的优化好像无足轻重，但作为产品的表现层来说，视觉语言能为用户传达出不同的心理感受，引导用户操作，间接能给产品带来实际利益。

战略层面：

通过视觉手段进行品牌升级，让产品更加符合品牌定位，打造用户信赖的品牌。

产品层面：

目前市场上的产品同质化严重，需要根据产品自身特点设计出区别于其他的竞品，来提升产品识别性和友好性。

个人层面：

设计出优秀的产品也是设计师自身的价值体现，并使设计师具有成就感。

如何进行视觉优化？

设计师们工作过程中，肯定遇到过比较紧急的情况，对一些设计进行视觉上的优化。

那么接下来，我将通过实战案例的具体界面来告诉你，每一处细细碎碎的细节都是设计价值的体现。

优化设计的大体思路其实就两件事：发现问题&解决问题。

1.   图中的icon圆角，大小各异，这个时候就需要我们统一圆角半径，保持视觉的统一性。

2.  「首页管理」界面，元素之间间距可适当调整，物理距离的远近可直接影响到视觉上的分组。

3.  「G7商城」界面，卡片划分不明确，与背景融为一体。

4.  「我的」界面，精简画面细节，强调主次。

5.  「我的活动」界面，“已结束”直角略微突兀，替换为圆角更和谐；位置稍往下移，与大背景隔开。

6.  行车事件界面，画面略微复杂，改进建议如下：

1）顶部“点击购买”处底色改为品牌色深紫色，加强品牌感；深紫色与白色文字对比更强烈，刺激用户点击欲望进而购买；

2）考虑到新旧年交接，比如2020/12/31到2021/01/01，日期处增加年份，更准确；两侧横线去掉，减少不必要的视觉干扰

3）“引擎熄火”、“引擎点火”、“进入xx”、“急转弯”遵循用户对色彩的基本认知，“熄火为停，点火为行，转弯为提示”所以颜色升级为红绿黄，并且前面icon与文字统一成同一种颜色，视觉统一，起到分隔作用，也方便用户直观认知

4）去掉横向分割线，以留白的间距划分区块，设计上做减法

5）竖向连接线改为浅灰色虚线，并且加长，增加连贯性

7.  「资讯频道」界面，右侧图片比例不一致，界面稍显混乱，统一成同一比例的图片更整洁。

      

8.  精简界面细节，强调品牌感。用户对颜色的记忆是敏锐的，通过运用品牌色加深用户对产品的印象。

     

9. 「我的账户」界面，黄色替换为紫色，加强品牌感；卡片增加描边，与大背景白色作区分

    

10. 「使用说明」界面

1）功能目录行间距可适当加大，增加视觉的呼吸感，减轻浏览大量内容时的压迫感；触发区域面积加大，用户更容易点击，减少出错

2）背景色其实作用不大，可做成白底黑字，更易阅读

3）减少不必要的装饰元素，减少视觉干扰

4）使用说明的页数较多，纵向滑动更顺滑；“返回目录”按钮可悬浮于页面底部，尺寸适当加大，方便用户点击；样机略微老旧，可替换成新机型，跟上潮流

11.   「常见问题」界面：

1）颜色：绿色可替换为品牌色紫色，加大G7品牌渗透，加深用户对G7品牌的感知度

2）问题前面的123标号可去掉，此场景下用户更关注的是问题本身，并非排号，精简画面，减少视觉干扰；节约空间

3）可添加搜索功能，用户没有找到自己想找的问题的话，可以自行输入问题并搜索

4）区块划分，弱化分割线，减少视觉干扰，画面更干净

     

总结

设计是由方方面面的细节构成的，很多设计师容易犯的一个错：设计细节不统一、不精致。

以上就是今天要分享的几个小知识点，都是在平时执行过程中总结的，希望能给大家带来一点启发。

每一次执行都是最好的总结机会，学到了什么？运用了什么？这些都是我们需要思考的，积少成多。

欢迎沟通交流，一起进步。

一个人可以走很快，但一群人可以走很远。

共勉。