為什么要做視覺全新升級？

達達騎士端是達達-京東到家提供的騎士接單工具類平臺，原UI方面樣式老舊，缺乏一致性。

既然要做視覺升級，那前期就要調(diào)研當前視覺變化趨勢，制定策略。

升級策略

我們要從哪幾方面下手，產(chǎn)品定位是什么？

從App Store 十年來的視覺變化分析，可以很清晰的發(fā)現(xiàn)設計趨勢的演變。(摘自彩云譯設計）

根據(jù)內(nèi)部用研報告數(shù)據(jù)分析，騎士端用戶25-35歲左右占大多數(shù)，也就意味著我們的主流群體是年輕人。除此之外，保持品牌的年輕化，也是每個公司都希望做到的。

本次升級希望傳遞用戶三個核心點：更簡潔、更年輕、更專業(yè)。（那么 就動起來～）

Part.1 8點網(wǎng)格柵格化布局

什么是8點網(wǎng)格柵格化布局？它能帶來什么好處？

建立8點為一個單位的網(wǎng)格，所有的元素尺寸都是8的倍數(shù)。

如果你用8作為設計的最小單位，你可以很方便的縮小的你的設計尺寸，8/2=4,4/2=2,2/2=1。如果你從10開始，你縮小到的網(wǎng)格單位可能是2.5像素，在往下是1.25像素。

使用8點網(wǎng)格：更統(tǒng)一的UI 、更少的選擇=節(jié)約更多的時間 、 多平臺的響應式設計。

柵格化布局讓頁面富有統(tǒng)一的秩序感和韻律；讓元素、模塊、頁面間距有規(guī)律可循。

Part.2 創(chuàng)建團隊組件庫

什么是組件庫？創(chuàng)建的意義是什么？

組件庫就是界面設計常用控件或元素的集合。

使用組件庫意義：保持視覺風格統(tǒng)一、保持交互一致性、便于多設計師協(xié)作，也便于修改、滿足不同場景需求、便于多個項目后續(xù)迭代升級。

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

Part.3 icon規(guī)范標準化建立

為什么要建立icon標準化？

之前icon畫法并不統(tǒng)一，導致視覺大小不統(tǒng)一；描邊過細與制定App風格相違背。

App Icon

Part.4 重新定義色彩

如何使用多種色彩？

標準色

隨著業(yè)務的發(fā)展，App體量越來越大，色彩的用法越來越豐富；我們將字體、icon、品牌等聯(lián)系起來定義色彩，確保在真實業(yè)務場景下賦予對應的色彩。

按鈕

輕漸變 增強趣味性 更年輕化

Part.5 拉大字體大小梯度

對用戶有哪些體驗上對提升？

字號規(guī)范

增加大字號標題 應用提升留白率、文字清晰度與可閱讀性

Part.6 提升呼吸感

使用哪些小技巧體現(xiàn)呢？

大標題、多留白、大間隔、輕漸變

弱化卡片容器，突出內(nèi)容

Part.7 提升呼吸感提升品牌歸屬感

在哪些方面加入自身品牌、品牌歸屬呢？

缺省頁

賦予騎士獨有特征（黃帽沿、黃方巾），更新騎士形象并統(tǒng)一缺省頁插圖。

slogan

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

應用市場介紹圖

使用最新UI界面并結合騎士形象與各個城市地標介紹APP主要功能。

新手引導模塊

更新最新版UI內(nèi)容，改變技術實現(xiàn)方式，多機型完美適配。

結束感悟

設計才剛剛開始...

好啦，這篇就結束了，希望你們能在升級或改版中得到靈感并實際應用。

作者：李梓曄

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