达达骑士端App升级的设计思路

为什么要做视觉全新升级？

达达骑士端是达达-京东到家提供的骑士接单工具类平台，原UI方面样式老旧，缺乏一致性。

既然要做视觉升级，那前期就要调研当前视觉变化趋势，制定策略。

升级策略

我们要从哪几方面下手，产品定位是什么？

从App Store 十年来的视觉变化分析，可以很清晰的发现设计趋势的演变。(摘自彩云译设计）

根据内部用研报告数据分析，骑士端用户25-35岁左右占大多数，也就意味着我们的主流群体是年轻人。除此之外，保持品牌的年轻化，也是每个公司都希望做到的。

本次升级希望传递用户三个核心点：更简洁、更年轻、更专业。（那么 就动起来～）

Part.1 8点网格栅格化布局

什么是8点网格栅格化布局？它能带来什么好处？

建立8点为一个单位的网格，所有的元素尺寸都是8的倍数。

如果你用8作为设计的最小单位，你可以很方便的缩小的你的设计尺寸，8/2=4,4/2=2,2/2=1。如果你从10开始，你缩小到的网格单位可能是2.5像素，在往下是1.25像素。

使用8点网格：更统一的UI 、更少的选择=节约更多的时间 、 多平台的响应式设计。

栅格化布局让页面富有统一的秩序感和韵律；让元素、模块、页面间距有规律可循。

Part.2 创建团队组件库

什么是组件库？创建的意义是什么？

组件库就是界面设计常用控件或元素的集合。

使用组件库意义：保持视觉风格统一、保持交互一致性、便于多设计师协作，也便于修改、满足不同场景需求、便于多个项目后续迭代升级。

（Sketch的Symbols真的很好用呐～）

Part.3 icon规范标准化建立

为什么要建立icon标准化？

之前icon画法并不统一，导致视觉大小不统一；描边过细与制定App风格相违背。

App Icon

Part.4 重新定义色彩

如何使用多种色彩？

标准色

随着业务的发展，App体量越来越大，色彩的用法越来越丰富；我们将字体、icon、品牌等联系起来定义色彩，确保在真实业务场景下赋予对应的色彩。

按钮

轻渐变 增强趣味性 更年轻化

Part.5 拉大字体大小梯度

对用户有哪些体验上对提升？

字号规范

增加大字号标题 应用提升留白率、文字清晰度与可阅读性

Part.6 提升呼吸感

使用哪些小技巧体现呢？

大标题、多留白、大间隔、轻渐变

弱化卡片容器，突出内容

Part.7 提升呼吸感提升品牌归属感

在哪些方面加入自身品牌、品牌归属呢？

缺省页

赋予骑士独有特征（黄帽沿、黄方巾），更新骑士形象并统一缺省页插图。

slogan

底部加入slogan ，合理利用底部空白，提升品牌性及归属感。

应用市场介绍图

使用最新UI界面并结合骑士形象与各个城市地标介绍APP主要功能。

新手引导模块

更新最新版UI内容，改变技术实现方式，多机型完美适配。

结束感悟

设计才刚刚开始...

好啦，这篇就结束了，希望你们能在升级或改版中得到灵感并实际应用。

作者：李梓晔

原文链接：https://www.ui.cn/detail/470992.html