UI页面设计思路-下篇
时间:2023-10-04 07:18:01 | 来源:网站运营
时间:2023-10-04 07:18:01 来源:网站运营
UI页面设计思路-下篇:小伙伴们大家好~
我们接着上期的话题:如何从低保真原型转化为高保真UI页面的设计思路(1.分析需求-> 2.寻找参考-> 3.重新布局-> 4.输出方案),这期继续跟大家分享该设计思路的应用。
项目介绍
甲方客户:医药商业公司
业务类型:B2B
项目背景:创建一个可以让甲方企业内部的业务员进行对外推广与处理客户(订单、物流、咨询)等日常工作。
需求负责人:产品经理(李哥)
使用终端:小程序
案例二
页面名称:指标分析下图是产品经理提供的原型稿,原型稿从体验角度虽然能满足可用的目标,可依然存在比较大的优化的地方。然而这次优先跟产品经理进行沟通梳理,分析出需要优化点避免UI方案被推翻的风险。
1.需求分析
针对页面内容模块进行梳理分析,得到以下分析图:
通过沟通分析,我得出以下几点优化点:
1.页面的年份信息比重也相对较高,因为常规的阅读逻辑是(年-> 月-> 日),可该年份信息并不明显而且容易被忽略
优化:更换年份切换控件的样式,重点是让当前年份信息突出明显;
2.由于需展示12个月的信息内容,当前首屏只显示4个月的信息内容,用户查看内容信息都需要上下滚动幅度较大,体验非常不友好;
优化:每月的数据模块大小进行压缩,尽可能首屏能看到更多信息内容,可以考虑以表格的形式呈现数据,因为业务员习惯看表格数据;
3.月份信息进行了加粗放大的样式处理显得格外明显,可用户更多的是需要关注数据模块里面的数据信息;
优化:适当弱化月份信息的比重,但依然保持清晰也能起到充当标题的作用;
4.数据模块的(销售金额、毛利、回款金额、毛利率)等信息重复率高、面占比高,形成了多余的内容噪点;
优化:弱化这四个标题字段,突出用户关注的数据信息;
2.寻找参考
好~该需求是一个数据反馈类页面结合需要优化的点,金融类APP会比较适合例如支付宝
3.重新布局结合参考,以原型稿需求内容为基础,重新快速布局排版为<版式初稿>,然后发给产品经理进行沟通。
沟通反馈有以下几点:
1.年份依然不够明显,而且年份控件右侧留白过多;
2.月份数据反馈希望能进行纵向对比,当前选卡方式隐藏了信息还缺乏对比而且需要点选操作,所以体验并不友好;
3.用户会优先关注合计里的销售情况,再会细看当月信息反馈;
结合以上几点反馈进行调整,再快速把调整后的版式发给产品经理并确认。
4.输出方案
与产品经理清晰思路并确认版式后,结合之前找到的参考,思路如下:
以下是最终的确认UI设计效果方案
最后再针对6个重点优化点进行检查,检查是否都能满足
经过检查基本能满足,然后发给产品经理并通过了方案。
拿原型稿跟确认UI方案对比
调优后的UI确认方案无论是视觉美观度得到大幅度提升,而且信息传递的速度有所提高也满足了业务的需求,最终还能达到产品经理的预期并且获得认同。
总结
结合(1.分析需求-> 2.寻找参考-> 3.重新布局-> 4.输出方案)设计思路套用到其他页面,我输出优质的UI方案效率得到了大幅度提升,重要的是大概率的避免了被产品经理推翻重来的风险。
另外,通过大量的实例,优秀的设计方案并不是一开始靠设计师自己想就能做出来,更像一块玉需要结合业务、用户、参考等多种元素加进行细节打磨才可形成具有神韵的美玉。