图标|怎样通过业务诉求和用户反馈优化首页?( 二 )


2.Tabbar、Navbar-简化图标造型,未选中状态减轻过重的差异化呈现。

图标|怎样通过业务诉求和用户反馈优化首页?
文章插图
3. 系统化设计规范栅格系统
全新采用12列网格系统布局,元素均基于合理的排版、网格、间距和比例进行设计。
此栅格以 750 x 1624(iPhoneX @2x)分辨率为基准设定; 能被2、3、4等分的12栅格体系; 边距(M=32)自适应,内容区自动适配不同分辨率; 元素间距 以 4 为最小单位;

图标|怎样通过业务诉求和用户反馈优化首页?
文章插图
4. 文字系统在设计时中英文默认使用苹方字体,重要数据展示使用D-Din,强化页面信息节奏感。
页面信息通过字号、字重和字色的差异,明确信息层级,为用户提供更流畅阅读体验。

图标|怎样通过业务诉求和用户反馈优化首页?
文章插图
5. 图标系统统一的网格背景底板;
遵循清晰、简洁、圆润的设计语言来设计图标;
图标|怎样通过业务诉求和用户反馈优化首页?】为了保持图标的韵律感和统一性,圆角规律设置为 4、2、1;

图标|怎样通过业务诉求和用户反馈优化首页?
文章插图
05 组件规范为了提高设计协作效率和一致性打造通用组件库,方便团队内部使用和管理,提高开发还原度、开发效率。

图标|怎样通过业务诉求和用户反馈优化首页?
文章插图
06 效果展示
图标|怎样通过业务诉求和用户反馈优化首页?
文章插图
设计稿中的图片来源于网络在次仅作为展示、学习用,不作为商业用途。
07 总结以上是此次改版升级的主要思路。从前期发现问题、定义问题、制定设计策略、设计执行,并建立了相应的设计规范。对之前的历史遗留问题以及业务和用户需求分析后推动了此次项目改版。目前项目还在重构,且还有不足点,后续也会在改版中持续优化,让产品有更好的体验。
感谢读到这里的小伙伴。谢谢~~??
作者:KG 公众号:KG的设计沉淀
本文由 @KG 原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自 Unsplash,基于 CC0 协议