15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > UI页面设计思路-下篇

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方案效率得到了大幅度提升,重要的是大概率的避免了被产品经理推翻重来的风险。

另外,通过大量的实例,优秀的设计方案并不是一开始靠设计师自己想就能做出来,更像一块玉需要结合业务、用户、参考等多种元素加进行细节打磨才可形成具有神韵的美玉。





关键词:思路,设计

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭