04 视觉升级目前视觉上存在的细节问题：
1.模块之间区分不明显、元素间距缺乏一致性 。
2.旧版的图标样式及文字层级相对违和且卡片投影较重导致界面沉闷 。
3.缺乏提效的组件库导致后期设计维护成本高 。
1. 卡片容器优化为了整体视觉体体量更加轻量化、背景色采用较深的灰摒弃原有的重投影 。并且统一卡片容器，用卡片化区分不同模块和内容减少用户认知负担 。聚焦核心信息展示，加强设计统一性 。
2. 图标样式换新1.业务功能区图标-运用晶白的的设计手法以及圆润的设计语言、通过四种不同的的渐变背景对应不同业务，提升视觉辨识度 。
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 协议
推荐阅读
- 梦到给小女孩穿鞋 梦到给小女孩穿鞋子是什么意思
- 梦到穿鞋子 梦到穿鞋子是什么意思 周公解梦
- 梦到流产大出血 梦到流产大出血是什么征兆
- 单反相机的光圈是什么意思 单反相机的光圈是什么意思啊
- 梦到小孩掉冰水里 梦到小孩掉冰水里了是什么意思
- 梦到小孩不见了 梦到小孩不见了是什么意思
- 梦到很多小孩 梦到很多小孩是什么意思
- 招商银行消费贷款申请条件是什么
- 梦到过年拜年 梦到过年拜年是什么意思
- 梦到骑马逃跑 梦到骑马逃跑是什么兆头