過(guò)馬路的時(shí)候突然注意到紅綠燈，恰好最近的新交通規(guī)則也熱火朝天，就順勢(shì)吐槽下關(guān)于“設(shè)計(jì)規(guī)范”的思考。

提到設(shè)計(jì)規(guī)范，很多人都覺(jué)得是個(gè)很虛、不務(wù)實(shí)的績(jī)效工程，很多企業(yè)為設(shè)計(jì)規(guī)范而設(shè)計(jì)規(guī)范，拍腦袋定規(guī)則，投了精力進(jìn)去，面子起來(lái)了，最后死掉了。以前也很不情愿去制定設(shè)計(jì)規(guī)范，經(jīng)歷多個(gè)終端的設(shè)計(jì)痛苦后，漸漸明白了設(shè)計(jì)規(guī)范“存在即合理”的意義。

紅綠燈的啟示

扯淡之前，還是先回到紅綠燈這個(gè)事兒上：

這是再常見(jiàn)不過(guò)的紅綠燈。當(dāng)工業(yè)化城市化達(dá)到一定程度，出現(xiàn)車如流水馬如龍的復(fù)雜交通，紅綠燈也便應(yīng)運(yùn)而生。在這里，紅綠燈起到的就是規(guī)范的作用，路人、司機(jī)達(dá)成一致共識(shí)：紅燈停，綠燈走。一切有序進(jìn)行。缺少它，過(guò)馬路將變得驚心動(dòng)魄。

這是再簡(jiǎn)單不過(guò)的常識(shí)，但同樣的思維遷移到設(shè)計(jì)上來(lái)，會(huì)引發(fā)很多有趣的思考。

�？吹疆a(chǎn)品設(shè)計(jì)團(tuán)隊(duì)經(jīng)常對(duì)導(dǎo)航、反饋等交互問(wèn)題進(jìn)行激烈討論，雖然多元碰撞是好事，但一旦系統(tǒng)開(kāi)始龐大，問(wèn)題也將顯露水面：團(tuán)隊(duì)成員各有創(chuàng)意追求，尤其是視創(chuàng)意如生命的設(shè)計(jì)師，對(duì)規(guī)則創(chuàng)新的追求更為突出，如果團(tuán)隊(duì)缺少“紅燈停綠燈走”這樣的共識(shí)、缺少設(shè)計(jì)約束，將導(dǎo)致規(guī)則無(wú)序疊加，使得軟件的整體交互變凌亂復(fù)雜。

設(shè)計(jì)規(guī)范三宗罪

1. 規(guī)范制定時(shí)機(jī)過(guò)早/過(guò)遲

小村莊的道路是不需要紅綠燈的，因?yàn)閴焊�用不著，紅綠燈的存在反而限制了人們的自由走動(dòng)。但卻有那么一類公司，在早期產(chǎn)品野蠻成長(zhǎng)、規(guī)模還小的時(shí)候，早早制定設(shè)計(jì)規(guī)范，花大功夫，卻無(wú)人接受，難以執(zhí)行。與過(guò)早相對(duì)，太遲也不合適，大公司也會(huì)犯這樣的錯(cuò)誤，如google，android在4.0之前出了個(gè)相當(dāng)粗糙、有和沒(méi)有一個(gè)樣的規(guī)范，等到自家系統(tǒng)跑著很多長(zhǎng)iPhone模樣的app時(shí)才發(fā)現(xiàn)問(wèn)題的嚴(yán)重。

2. 規(guī)范過(guò)于詳盡

紅綠燈是一個(gè)特別簡(jiǎn)單的“約束”，紅燈停，綠燈走，至于怎么停、怎么走，交給甲乙丙丁自行決定�！秈Phone Design Guideline》的制定者非常有先見(jiàn)之明，他們?cè)谧珜?xiě)規(guī)范的時(shí)候，選擇了一種寬泛的表述方式，沒(méi)有定義“點(diǎn)擊按鈕”應(yīng)該多大、沒(méi)有定義“返回按鈕”必須長(zhǎng)左上角、沒(méi)有定義刪除就非得有一個(gè)扔進(jìn)垃圾桶的動(dòng)畫(huà)…表述越細(xì)，限制越大，反而會(huì)成為設(shè)計(jì)團(tuán)隊(duì)創(chuàng)新的枷鎖。

3. 規(guī)范一成不變

早期的紅綠燈就只有兩種顏色更替，但還是會(huì)遇到一定的危險(xiǎn)，經(jīng)過(guò)不斷的改進(jìn)才出現(xiàn)了由紅黃綠組成的三色信號(hào)燈并一直沿用至今（最近有人冒出來(lái)把黃燈給否定了）。紅綠燈也已經(jīng)不是簡(jiǎn)單的顏色更替，而是一套完整的信號(hào)系統(tǒng)，人行道的、車道的、帶方向指示的…設(shè)計(jì)規(guī)范同樣如此，當(dāng)產(chǎn)品變復(fù)雜，大到像一只龐然大物如QQ、微信時(shí)，為了保證體驗(yàn)的一致性，規(guī)范會(huì)逐漸完善和明晰。規(guī)范的建立是一個(gè)長(zhǎng)期的過(guò)程，寬泛的設(shè)計(jì)指引應(yīng)該與時(shí)俱進(jìn)。

大指引，小規(guī)范

關(guān)于規(guī)范的討論，在這之前就已經(jīng)有很多前輩進(jìn)行過(guò)各種思考激辯，至于執(zhí)行，也會(huì)因團(tuán)隊(duì)因項(xiàng)目而各有差異。

以iPhone的產(chǎn)品設(shè)計(jì)為例，蘋(píng)果官方的《iOS Human Interface Guidelines》（以前叫《iPhone Human Interface Guidelines》）比較系統(tǒng)，很多產(chǎn)品設(shè)計(jì)直接參考這份文檔去構(gòu)建自己的app，產(chǎn)品生命周期中唯一的設(shè)計(jì)規(guī)范也就是這份現(xiàn)成的參考。我們除了會(huì)以官方的設(shè)計(jì)指引為基本參考，還會(huì)根據(jù)項(xiàng)目的需要將設(shè)計(jì)規(guī)范細(xì)化，以1+1（平臺(tái)規(guī)范和應(yīng)用規(guī)范）的方式整理軟件繁瑣的交互細(xì)節(jié)。

規(guī)范案例（一）：信息提示系統(tǒng)

提示系統(tǒng)作為軟件設(shè)計(jì)中一個(gè)小點(diǎn)，很多團(tuán)隊(duì)都不會(huì)在意，過(guò)去我們有一套比較完整的信息提示系統(tǒng)，將提示分成了四類：

3.0設(shè)計(jì)過(guò)程中我們對(duì)整套提示系統(tǒng)再次進(jìn)行了優(yōu)化，徹底去掉Toast提示，并且將Banner Tips統(tǒng)一為一種樣式，直接挨著導(dǎo)航欄下方。

規(guī)范案例（二）：菜單系統(tǒng)

菜單是軟件設(shè)計(jì)里中另外一種常見(jiàn)的交互系統(tǒng)，我們第一個(gè)版本剛出來(lái)的時(shí)候使用了隱晦的方式（橫滑）設(shè)計(jì)菜單，經(jīng)過(guò)幾個(gè)版本的演進(jìn)，菜單的出現(xiàn)更加直接、更容易擴(kuò)展，并對(duì)不可操作的異常提供了解釋說(shuō)明。

iPhoneQQ音樂(lè)發(fā)展到現(xiàn)在，儼然是個(gè)龐大的產(chǎn)品，有海量樂(lè)庫(kù)的信息組織、個(gè)人音樂(lè)資產(chǎn)的管理，基礎(chǔ)的播放操作體驗(yàn)….

除了上述的信息提示和菜單系統(tǒng)，我們還對(duì)產(chǎn)品的幾個(gè)常見(jiàn)交互系統(tǒng)提供了一些簡(jiǎn)單的指引，包括：

1. 導(dǎo)航：定義全局導(dǎo)航規(guī)則，包括普通的層級(jí)進(jìn)入、臨態(tài)界面、界面內(nèi)互調(diào)、跨產(chǎn)品互調(diào)

2. 異常處理：如網(wǎng)絡(luò)中斷、內(nèi)容為空時(shí)的提醒及引導(dǎo)

3. 品牌傳達(dá)：在異常、邊緣情況、產(chǎn)品幻燈片展示方面對(duì)音樂(lè)品牌的視覺(jué)傳達(dá)

當(dāng)然，如果出現(xiàn)某種不能滿足的情況，我們會(huì)再重新審視，及時(shí)調(diào)整。高效可控的交互體系是應(yīng)需而變的。

最后，說(shuō)回投入/產(chǎn)出比的問(wèn)題，既然大部分自定義的規(guī)范意義都不大（平臺(tái)級(jí)的規(guī)范除外），何必投入大把精力？其實(shí)這種官方規(guī)范之外的小規(guī)范成本非常低，不需要整理成一個(gè)完整的樣式庫(kù)，只需要簡(jiǎn)單地把規(guī)范羅列在一張大圖上，供團(tuán)隊(duì)成員或中間接手的設(shè)計(jì)師參考即可。對(duì)于節(jié)奏非常敏捷的移動(dòng)互聯(lián)網(wǎng)產(chǎn)品而言，簡(jiǎn)單，才最具生命力。(本文出自Tencent CDC Blog，轉(zhuǎn)載時(shí)請(qǐng)注明出處)

標(biāo)簽： 紅綠燈產(chǎn)品設(shè)計(jì)原則 產(chǎn)品設(shè)計(jì) 設(shè)計(jì)規(guī)范 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。