细节很重要!实战案例告诉你如何进行视觉优化
有个机会做了G7手机管车app视觉优化梳理方案,总结了一些小小心得,欢迎设计师们交流,共同进步。
为什么要视觉优化?
大多数人看来,从视觉层面的优化好像无足轻重,但作为产品的表现层来说,视觉语言能为用户传达出不同的心理感受,引导用户操作,间接能给产品带来实际利益。
战略层面:
通过视觉手段进行品牌升级,让产品更加符合品牌定位,打造用户信赖的品牌。
产品层面:
目前市场上的产品同质化严重,需要根据产品自身特点设计出区别于其他的竞品,来提升产品识别性和友好性。
个人层面:
设计出优秀的产品也是设计师自身的价值体现,并使设计师具有成就感。
如何进行视觉优化?
设计师们工作过程中,肯定遇到过比较紧急的情况,对一些设计进行视觉上的优化。
那么接下来,我将通过实战案例的具体界面来告诉你,每一处细细碎碎的细节都是设计价值的体现。
优化设计的大体思路其实就两件事:发现问题&解决问题。
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)区块划分,弱化分割线,减少视觉干扰,画面更干净

总结
设计是由方方面面的细节构成的,很多设计师容易犯的一个错:设计细节不统一、不精致。
以上就是今天要分享的几个小知识点,都是在平时执行过程中总结的,希望能给大家带来一点启发。
每一次执行都是最好的总结机会,学到了什么?运用了什么?这些都是我们需要思考的,积少成多。
欢迎沟通交流,一起进步。

一个人可以走很快,但一群人可以走很远。
共勉。














































































