如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里 

在進(jìn)行App設(shè)計(jì)時(shí)，有沒(méi)有什么規(guī)范參考標(biāo)準(zhǔn)，還是自己想象一個(gè)出來(lái)？究竟如何去根據(jù)iOS的規(guī)范具體實(shí)現(xiàn)設(shè)計(jì)落地？今天@Jaret_杰瑞特 （優(yōu)酷土豆上海部設(shè)計(jì)經(jīng)理）這篇用優(yōu)酷的實(shí)戰(zhàn)案例帶你入門(mén)。

最近，與上海的“谷歌開(kāi)發(fā)者社區(qū)”（GDG）一起策劃并與大家進(jìn)行了一期關(guān)于Material Design的話題分享會(huì)。

這幾天我抽空將當(dāng)天分享的PPT內(nèi)容再精簡(jiǎn)整理了一下，并在關(guān)鍵頁(yè)面配上了對(duì)應(yīng)的文字說(shuō)明，便于分享給沒(méi)有來(lái)得及到場(chǎng)及更多的朋友。

我問(wèn)過(guò)很多人這個(gè)問(wèn)題：在進(jìn)行App設(shè)計(jì)時(shí)，有沒(méi)有什么規(guī)范參考標(biāo)準(zhǔn)，還是自己想象一個(gè)出來(lái)？

許多人說(shuō)他們使用“iOS”設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)：“iPhone 6的尺寸做App的統(tǒng)一視覺(jué)設(shè)計(jì)，然后再翻到Android的尺寸上?！? 但這只是一個(gè)操作方法，并不是具體的規(guī)范描述。

于是我繼續(xù)追問(wèn)：究竟如何去根據(jù)iOS的規(guī)范具體實(shí)現(xiàn)設(shè)計(jì)落地？

無(wú)數(shù)人此刻脫口而出的一個(gè)經(jīng)典回答是：比如“一個(gè)按鈕范圍大小為最小44x44pt”。還有呢？

此刻偶爾有少數(shù)人說(shuō)出幾個(gè)系統(tǒng)默認(rèn)的頂／底部欄／系統(tǒng)狀態(tài)欄的高度及應(yīng)用icon的顯示和典型字體的大小尺寸。然而這類系統(tǒng)通用型的固定控件對(duì)我們自己的產(chǎn)品設(shè)計(jì)參考并沒(méi)有多少實(shí)際作用。我不放棄，繼續(xù)追問(wèn)，比如：這個(gè)list列表里列表項(xiàng)的高度是多高？與下方的文本間距是如何進(jìn)行規(guī)范的？

有意思的是，此時(shí)大多數(shù)人的回答突然從“iOS標(biāo)準(zhǔn)”切換到了“行業(yè)普遍現(xiàn)象”，即參照大多數(shù)現(xiàn)有的產(chǎn)品／競(jìng)品來(lái)取個(gè)數(shù)值。比如：大多數(shù)的app都把這個(gè)高度設(shè)置在“54-58”之間。于是乎，除了“按鈕的44×44”，以及幾個(gè)系統(tǒng)固定的頂／底部bar之外，真正涉及到自己的app設(shè)計(jì)的時(shí)候，似乎iOS的設(shè)計(jì)規(guī)范標(biāo)準(zhǔn)一下子又不見(jiàn)了。

所以我發(fā)現(xiàn)，貌似如果使用iOS的設(shè)計(jì)規(guī)范并不能解決現(xiàn)在我所遇到的問(wèn)題。

面臨的主要問(wèn)題如下：

1. 由于團(tuán)隊(duì)屬性的特殊性，團(tuán)隊(duì)成員會(huì)參與多個(gè)不同的業(yè)務(wù)項(xiàng)目，甚至一個(gè)大的業(yè)務(wù)項(xiàng)會(huì)拆分單獨(dú)的幾個(gè)業(yè)務(wù)細(xì)化到團(tuán)隊(duì)中的不同成員。各做各的，卻又要時(shí)常合并各自的設(shè)計(jì)項(xiàng)目或根據(jù)業(yè)務(wù)需求互相維護(hù)迭代，故而造成期間的維護(hù)和合作成本比較高。

2. 公司雖有自己的主業(yè)務(wù)設(shè)計(jì)規(guī)范，但規(guī)范設(shè)定籠統(tǒng)、不清晰且局限（設(shè)定規(guī)范的團(tuán)隊(duì)僅以本身負(fù)責(zé)的業(yè)務(wù)涵蓋點(diǎn)出發(fā)），在實(shí)際工作中無(wú)法真正給予各業(yè)務(wù)端有價(jià)值的參考。

3. 大型成熟產(chǎn)品不易輕易顛覆或重新設(shè)計(jì)，特別是各業(yè)務(wù)端做為模塊集成部分時(shí)很難有突破。

突破方式：

尋找一份詳盡、系統(tǒng)但又靈活的設(shè)計(jì)規(guī)范參考來(lái)進(jìn)行具體業(yè)務(wù)項(xiàng)目的設(shè)計(jì)開(kāi)發(fā)。

“廣泛性”是指從“List列表”高度的建議參考數(shù)值到“按鈕”大小的規(guī)范展示，甚至到“分割線”的粗細(xì)；顏色等。

“擴(kuò)展性”是指“List列表”的多種細(xì)分狀態(tài)下的各參數(shù)建議到“按鈕”最小；最大等可能出現(xiàn)的擴(kuò)展情況等都有詳細(xì)的說(shuō)明。

不僅有視覺(jué)排版的具體參數(shù)建議，還有針對(duì)動(dòng)效設(shè)計(jì)的一些說(shuō)明。

甚至包括（彈窗等）操作提示／反饋等文本描述的文義規(guī)范等。

最右側(cè)上方帶有標(biāo)題的彈窗為iOS系統(tǒng)進(jìn)行“地點(diǎn)精準(zhǔn)化”的提示：“開(kāi)啟藍(lán)牙將能改進(jìn)地理位置的精準(zhǔn)度”。按鈕文字的“OK”容易造成對(duì)用戶的判斷干擾，到底是代表：“OK（開(kāi)啟）”還是“OK（我知道了）”？針對(duì)不同的理解可能會(huì)對(duì)應(yīng)不同的結(jié)果：1. 完成開(kāi)啟一項(xiàng)功能 2. 僅為告知功能，并未觸發(fā)任何操作

下方帶有標(biāo)題的彈窗為基于Material Design規(guī)范進(jìn)行的彈窗提示：“添加話題及你感興趣的來(lái)源到你的庫(kù)中”。按鈕文字“明白了”。表示僅被告知到信息，不會(huì)觸發(fā)任何操作。

Material Design的誕生就是為了解決多設(shè)備，多平臺(tái)的關(guān)系。 Airbnb版本的設(shè)計(jì)很好的詮釋了Material Design在多平臺(tái)下帶來(lái)的一致性和便捷性。

我在進(jìn)行利用Material Design來(lái)規(guī)范團(tuán)隊(duì)設(shè)計(jì)前，主要羅列了幾項(xiàng)困難挑戰(zhàn)點(diǎn)及相應(yīng)的解決這些難題的方式。

針對(duì)“復(fù)雜繁多的需求點(diǎn)及展現(xiàn)，該如何運(yùn)用MD設(shè)計(jì)”時(shí)，我進(jìn)行了“逆向”的操作整理方式。第一步，先從整理Material Design標(biāo)準(zhǔn)化模板開(kāi)始入手。先了解需要遵從的規(guī)范是看展一切后續(xù)工作的前提。如果連本身參考的范本都不足夠了解，也就無(wú)法進(jìn)行合理的參照設(shè)計(jì)。

參考方法：

將Sketch自帶或者在Google官網(wǎng)上下載的PS／Ai版本的Sticker Sheet整理拼合出一個(gè)典型頁(yè)面，包含頂部欄，列表，文本及按鈕等（如上圖）。并將其模塊化，并列出其典型擴(kuò)展性的屬性。如上圖：帶有頭像的列表為例。

回到自己的項(xiàng)目中，在參考之前進(jìn)行的Material Design典型標(biāo)準(zhǔn)化模塊的基礎(chǔ)上，對(duì)目前的自己的產(chǎn)品也進(jìn)行一次模塊化的整理。（盡可能依照之前的Material Design模塊來(lái)整理自身產(chǎn)品的模塊）整理完成后，將整理出來(lái)的模塊按照Material Design的標(biāo)準(zhǔn)參數(shù)進(jìn)行排版排列。

在完成上述過(guò)程后，我發(fā)現(xiàn)根據(jù)之前的業(yè)務(wù)需求和繼承下來(lái)的業(yè)務(wù)屬性，完全根據(jù)Material Design的標(biāo)準(zhǔn)模塊參數(shù)去設(shè)計(jì)，會(huì)與其他業(yè)務(wù)模塊形成比較強(qiáng)烈的對(duì)比和差異。此時(shí)，不得不進(jìn)行一些調(diào)整來(lái)彌補(bǔ)和解決這個(gè)問(wèn)題

在Material Design的規(guī)范中提到所有的控件都是基于8dp的方形標(biāo)準(zhǔn)網(wǎng)格來(lái)進(jìn)行對(duì)齊布局設(shè)計(jì)，文本／圖標(biāo)元素（工具欄上）都是基于4dp的方形標(biāo)準(zhǔn)網(wǎng)格來(lái)進(jìn)行對(duì)齊布局設(shè)計(jì)。

于是，我通過(guò)這個(gè)信息并結(jié)合Material Design提供的參考，自己設(shè)定了一個(gè)布局調(diào)整的原則 — “4/8原則”（控件元素每次最小對(duì)齊移動(dòng)一個(gè)整“4dp”，最大對(duì)齊移動(dòng)一個(gè)整“8dp”以此類推：2個(gè)，3個(gè)4dp…，2個(gè)，3個(gè)8dp…）

查閱Material Design中提供的參數(shù)可以發(fā)現(xiàn)基本都是類似4/8這樣的調(diào)整。 以List列表為例：“2行帶頭像”項(xiàng)的標(biāo)準(zhǔn)高度為72dp，列表首行與上一模塊間距8dp?！?行帶頭像”項(xiàng)的緊湊模式高度為60（縮減了3個(gè)“4dp”），列表首行與上一模塊間距4dp（縮減了1個(gè)“4dp”）。

根據(jù)業(yè)務(wù)需求及往期和其他業(yè)務(wù)模塊的相對(duì)統(tǒng)一性，將實(shí)際業(yè)務(wù)產(chǎn)品按照4/8原則的規(guī)范進(jìn)行適當(dāng)?shù)恼{(diào)整。例如在“頭像列表模塊”的高度在標(biāo)準(zhǔn)的“緊湊模式”60dp下，再縮減一個(gè)4dp：為56dp。發(fā)表用戶與其發(fā)表的評(píng)論文本之間的間距由標(biāo)準(zhǔn)的文本間距8dp縮減為4dp。主文本信息的屏幕對(duì)齊從標(biāo)準(zhǔn)的左側(cè)72dp縮減為56dp（縮減了2個(gè)“8dp”）等。

新舊對(duì)比：左側(cè)為原版本實(shí)現(xiàn)效果，右側(cè)為基于Material Design規(guī)范的優(yōu)化過(guò)效果。可以看出在大的布局結(jié)構(gòu)上并沒(méi)有太大的奇異和過(guò)于夸張的布局變化，但在細(xì)節(jié)和整體的閱讀體驗(yàn)上具有明顯的提升。

在兼容平臺(tái)上，基于Material Design的模塊化設(shè)計(jì)更容易進(jìn)行不同平臺(tái)的遷移。利用Sketch中的Resizing功能可以基本實(shí)現(xiàn)快速0成本的Android／iOS雙平臺(tái)的適配。

每個(gè)項(xiàng)目，每個(gè)團(tuán)隊(duì)，每個(gè)人都有其獨(dú)特的一些狀況和屬性， 僅以我個(gè)人在實(shí)際工作中的一些經(jīng)歷來(lái)分享給大家，歡迎大家一起討論并互相學(xué)習(xí)到更優(yōu)的一些技巧和經(jīng)驗(yàn)。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)