近年來(lái)安卓手機(jī)的用戶量加速增長(zhǎng)，對(duì)于淘寶這樣體量的APP而言，亟需有一套自己的安卓設(shè)計(jì)規(guī)范，來(lái)適應(yīng)當(dāng)下的安卓用戶使用習(xí)慣和快速發(fā)展的商業(yè)模式。App的設(shè)計(jì)師應(yīng)該學(xué)習(xí)系統(tǒng)界面設(shè)計(jì)師的思維從最基礎(chǔ)的用戶體驗(yàn)來(lái)規(guī)范整個(gè)app的使用邏輯。

近年來(lái)安卓手機(jī)的用戶量加速增長(zhǎng)，尤其是中國(guó)地區(qū)的手機(jī)銷量前5名都已被國(guó)產(chǎn)安卓手機(jī)站穩(wěn)。對(duì)于淘寶這樣體量的APP而言，亟需有一套自己的安卓設(shè)計(jì)規(guī)范，來(lái)適應(yīng)當(dāng)下的安卓用戶使用習(xí)慣和快速發(fā)展的商業(yè)模式。

那么作為設(shè)計(jì)師，如何設(shè)計(jì)迭代現(xiàn)有業(yè)務(wù)體驗(yàn)，又能跟上安卓不斷升級(jí)的設(shè)計(jì)語(yǔ)言？

下文將以淘寶設(shè)計(jì)師的實(shí)戰(zhàn)思考為例向你介紹，不要走開，全是干貨！

一、問題背景

當(dāng)前，設(shè)計(jì)師默認(rèn)以蘋果手機(jī)為設(shè)計(jì)基礎(chǔ)，適配基本上由前端開發(fā)同學(xué)來(lái)完成。此時(shí)，當(dāng)輸出的設(shè)計(jì)元素在安卓手機(jī)上無(wú)法兼容，就會(huì)導(dǎo)致用戶實(shí)際看到的界面元素會(huì)有很大差異。從而給安卓端帶來(lái)許多不統(tǒng)一甚至錯(cuò)誤的界面視覺元素，影響用戶原有的體驗(yàn)流暢性。

二、影響用戶體驗(yàn)一致性的因素

作為一個(gè)跨平臺(tái)的APP，我們希望在蘋果和安卓?jī)蓚€(gè)終端的用戶體驗(yàn)盡量一致，首當(dāng)其沖的就是視覺層面的改造。

1. 視覺樣式的影響

目前大部分的設(shè)計(jì)師都是以蘋果750*1334的分辨率來(lái)輸出設(shè)計(jì)源文件，對(duì)應(yīng)的安卓規(guī)范設(shè)計(jì)分辨率為720*1280。

在兩種分辨率相對(duì)應(yīng)的標(biāo)準(zhǔn)屏幕物理尺寸下，設(shè)計(jì)圖片會(huì)有一定的間距大小差異，甚至圖片被拉伸的情況，尤其安卓手機(jī)同一分辨率會(huì)有多種屏幕的物理尺寸，這就需要我們對(duì)安卓的適配規(guī)范做新的規(guī)范定義，來(lái)減小這種視覺上的差異。

2. 安卓設(shè)計(jì)規(guī)范基礎(chǔ)

從最初Cupcake的軌跡球到如今Pie的全面屏手勢(shì)操作，兼容手機(jī)廠商和屏幕分辨率不斷增多，基礎(chǔ)柵格和多分辨率適配原則卻一直沿用至今，得益于安卓的開放化，我們可以對(duì)這些基礎(chǔ)的設(shè)計(jì)元素進(jìn)行改造。

（1）適配邏輯

為了適配不同大小的設(shè)備，安卓給出了一套基于物理尺寸和分辨率為基礎(chǔ)的設(shè)計(jì)適配邏輯，具體如下：

（2）PPI

pixels per inch，屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量，即屏幕像素密度。

（3）DPI

dots per inch，起初用于衡量打印物上每英寸的點(diǎn)數(shù)密度，即打印機(jī)可以在一英寸內(nèi)打多少個(gè)點(diǎn)。dpi的概念用在計(jì)算機(jī)屏幕上時(shí)，就稱之為ppi。

（4）DP DIP

安卓上的長(zhǎng)度開發(fā)單位單位。dp和dip都是Density Independent Pixels的縮寫，密度獨(dú)立像素，即同一物理尺寸，使用同樣的設(shè)置在不同手機(jī)上顯示的效果看起來(lái)是一樣的。

（5）SP

scaled pixels的縮寫，安卓上的字體開發(fā)單位，sp與dp類似。

（6）PX

pixels的縮寫即通常所說(shuō)的像素，是設(shè)計(jì)中使用最多的長(zhǎng)度單位。將顯示器分成非常細(xì)小的方格，每個(gè)方格就是一個(gè)像素。

三、改變了什么

對(duì)安卓基礎(chǔ)控件的改造可以保證在兼容現(xiàn)有業(yè)務(wù)的情況下，對(duì)未來(lái)版本的升級(jí)規(guī)范樣式，保持兩端的統(tǒng)一性，減少用戶的識(shí)別和學(xué)習(xí)成本。

1. 新的柵格系統(tǒng)

對(duì)蘋果和安卓的柵格系統(tǒng)進(jìn)行梳理后我們發(fā)現(xiàn)，兩者原理上相同只在一些間隔細(xì)節(jié)的數(shù)字定義上有所區(qū)別，兼容需要調(diào)整到兩端都可以適配的閾值，以750*1334的蘋果手機(jī)和720*1080的安卓手機(jī)為例調(diào)整后的樣子如下，兩端基本看不出差異：

2. 安卓的沉浸式狀態(tài)欄

商品中心化和內(nèi)容中心化在淘寶越來(lái)越重要，當(dāng)用戶在專心瀏覽一件商品的圖片或視頻介紹的時(shí)候，沉浸式的狀態(tài)欄顯的體驗(yàn)更好，且在多種復(fù)雜頁(yè)面間跳轉(zhuǎn)的時(shí)候，狀態(tài)欄的顏色不斷變換，又跟導(dǎo)航欄顏色不一致，會(huì)降低用戶的使用好感，安卓在5.0系統(tǒng)版本后支持自定義狀態(tài)欄顏色，給了我們改動(dòng)的可行性。

3. 彈窗的改造

安卓的彈窗樣式和底部半浮層在實(shí)際的應(yīng)用中作用并不相同，既作為提供警示信息、詢問用戶授權(quán)，又能作為二次確認(rèn)或者下一步任務(wù)操作的選擇器等，原生安卓彈窗是直角帶陰影的樣式，這不符合手淘中扁平圓角的統(tǒng)一 性。

我們?cè)谠鷺邮降幕A(chǔ)上進(jìn)行了樣式的改造，使用了統(tǒng)一的圓角設(shè)計(jì)和系統(tǒng)配色，不單是這樣，由于系統(tǒng)對(duì)APP權(quán)限的限制，一些系統(tǒng)層級(jí)的彈窗無(wú)法改動(dòng)，在能保證加載速度的前提下，我們嘗試用新的彈層樣式覆蓋原來(lái)默認(rèn)的，以達(dá)到統(tǒng)一樣式的目標(biāo)。

4. 持續(xù)的改進(jìn)

某種意義上來(lái)說(shuō)：規(guī)范輸出的那一刻也就是它被淘汰的時(shí)候，安卓和蘋果目前都在保持一年一更的狀態(tài)，等到他們的規(guī)范出來(lái)再做對(duì)應(yīng)的升級(jí)本來(lái)就已慢了一拍，落地上線的時(shí)間就會(huì)更加靠后。

所以對(duì)于系統(tǒng)規(guī)范的升級(jí)是一個(gè)持續(xù)不斷的改進(jìn)過(guò)程，保持開放的心態(tài)，不斷兼容新的業(yè)務(wù)和功能，我們也會(huì)持續(xù)更新淘寶的安卓設(shè)計(jì)規(guī)范，包括字體，交互邏輯，動(dòng)畫降級(jí)方式等。

結(jié)語(yǔ)

淘寶的體量越來(lái)越大，已經(jīng)變成了一個(gè)類系統(tǒng)的app式存在，在這樣的app里制定符合平臺(tái)的規(guī)范需要極大的耐心，尤其在安卓用戶占比日益增長(zhǎng)的前提下，app的設(shè)計(jì)師更應(yīng)該學(xué)習(xí)系統(tǒng)界面設(shè)計(jì)師的思維從最基礎(chǔ)的用戶體驗(yàn)來(lái)規(guī)范整個(gè)app的使用邏輯。

規(guī)范落地的時(shí)候設(shè)計(jì)師會(huì)遇到很大阻力，盲目的上線新的規(guī)范可能導(dǎo)致向下兼容的問題，設(shè)計(jì)師需要多了解不同業(yè)務(wù)間的需求和用戶在使用時(shí)遇到的具體問題找到改進(jìn)的平衡點(diǎn)，掌握好二八原則，使最基礎(chǔ)的規(guī)范變?yōu)槿粘５脑O(shè)計(jì)準(zhǔn)則。

作者：賢親

鏈接：https://mp.weixin.qq.com/s/oGpKwdk-zMbVZcs9jIirQw

本文由 @淘寶用戶體驗(yàn)設(shè)計(jì) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)允許，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。