玩转视觉设计

用户头像
北京/产品设计师/8年前/1889浏览
玩转视觉设计
用户头像
安思

分析和运用视觉思维

产品的视觉效果会直接影响着用户的体验,也是产品的品质体现,今天通过猎财大师APP为例,通过一致性、视觉流、空间流、抗风险和规整度这五个维度的集创思维来分析一下这个产品,希望对你有所启发。

维度一:一致性

undefined

主色调运用蓝色,给人理性、简洁、安静的视觉体验,视觉的一致性,有助于对信息的深度思考和分析,做出更加理性的选择,也比较符合目标用户的审美需求。文字、颜色、间距、控件都展现出一致性,容易区分,很有节奏感。

undefined

一致性不足:“基金类型”的筛选按钮,而“七日年化”没有筛选选项,建议选项为一个时无需提供选项,标题直接更换为“货币”或者保持一致性去掉筛选按钮。

undefined

在一级页面上,图一和图二的图标一致,但和图三的图标不一致,这方面没有严格的要求,最好是在颜色或者样式上有一定的相关性会减少用户对产品产生的认知偏差,避免出现两个产品的误解。

维度二:视觉流

undefined

图一的信息强点在购买的“百分比”和“收益率”上,很直观、便捷,建议在快要接近售完时用“百分比”醒目的颜色刺激和吸引用户抢购。

图二的信息强点体现在“立即购买”上,但是跟主题色蓝色相近,不容易凸显出来,这也是考虑避免因为颜色过于醒目对文字信息阅读的干扰采取的更为理性和成熟的考虑方式,挺赞。

信息的强点容易破坏正常的视觉流(从左到右、从上到下),为了凸显重点信息,但也避免凸显的信息类型过多造成视觉负荷,建议在三个以内,颜色的对比度适中即可。

维度三:空间流

undefined

以文字内容为例,图一至图三的标题和内容用字体大小、间距和颜色加以区分,达到舒适的状态,而图四中的详情介绍没有重点文字区分,文字大的不是用户关注的重点,这样的阅读不利于用户更好的吸收,需要优化一下,从业务流程来看,理性消费者还是比较注重产品详情这一块,如果因为阅读体验不佳导致信息理解不到位或产品的品质产生偏见,很可能会降低业务的转化率。

维度四:抗风险

undefined

图一的banner和图三的默认头像的设计,有效的避免图片的缺失带来的丑陋感受,图二这方面没有完善,误以为加载完成的最终样子,建议加上加载的状态提示,最好是加上有趣的加载动画。

图片的缺失可能是网速加载、设备运行缓慢等因素导致的,这个过程都是在呈现完整信息之前出现的,潜在的影响用户的视觉体验,即使最终完整的信息呈现的视觉再好也不可替代最差的状态出现所带来的风险,所以这方面的设计也要考虑进去,为用户的体验做到尽善尽美。

维度五:规整度

undefined

图二和图三,界面里的条目中,元素的排布如同搁置在天平上,越平衡越舒服,在信息完善、层次突出的基础上,保证元素的大小、颜色、间距等因素分布均衡,条目的一致、单屏内模块布局的一致性,给用户带来更舒适的体验。

图一,首页模块展示较多,单屏出现5个不同样式的模块,这时候的结构容易因为机构的不同容易打乱造成一定的视觉的负荷。可以通过每个模块内保证平衡,将相邻的模块尽量设计成相似的样式,能够有效的减缓在单屏的场景中带来的视觉负荷。

以上图中,元素的颜色和大小区别体现出一定的对比度和识别度,让用户更便捷的找到产品所要传达的重点信息。


视觉分析技巧小结

一致性:1.文字、颜色、间距、控件;2.原子栅格

视觉流:1.视觉强点是否是信息强点;2.视觉流是否合理;3.是否存在视觉干扰

空间流:1.场和留白;2.文字的留白

抗风险:1.图片置换;2.元素缺失如何应对

规整度:1.界面的平衡;2.结构是否对齐;3.元素对比度和识别度

(以上分析方法来源集创堂《视觉的评审》)

12
举报
|
27
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
我的钱包-UI界面设计-app
盲盒APP UI设计
【新年UI图标】秒杀icon
【新年UI图标】钱包icon
3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
【新年UI图标】会员icon
钱包ui模板
【新年UI图标】影音icon
智能家居中心 简约 UI设计组件库
【新年UI图标】汽车icon
Security Camera UI kit
高级表盘系列UI源文件
新拟态风格 UI设计组件库
3D卡通UI界面图标可爱插画免扣素
抽象液态渐变UI背景模版
【新年UI图标】珠宝icon
【新年UI图标】30个图标
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
矢量立体简约UI蓝白图标
UI界面 组件
科技医疗透明柜UI界面设计
UI 登录界面设计模板包
你可能喜欢
大家都在看
登录注册