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

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

紅綠燈的啟示

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

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

這是再簡單不過的常識，但同樣的思維遷移到設計上來，會引發(fā)很多有趣的思考。

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

設計規(guī)范三宗罪

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

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

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

紅綠燈是一個特別簡單的“約束”，紅燈停，綠燈走，至于怎么停、怎么走，交給甲乙丙丁自行決定�！秈Phone Design Guideline》的制定者非常有先見之明，他們在撰寫規(guī)范的時候，選擇了一種寬泛的表述方式，沒有定義“點擊按鈕”應該多大、沒有定義“返回按鈕”必須長左上角、沒有定義刪除就非得有一個扔進垃圾桶的動畫…表述越細，限制越大，反而會成為設計團隊創(chuàng)新的枷鎖。

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

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

大指引，小規(guī)范

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

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

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

提示系統(tǒng)作為軟件設計中一個小點，很多團隊都不會在意，過去我們有一套比較完整的信息提示系統(tǒng)，將提示分成了四類：

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

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

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

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

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

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

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

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

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

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

標簽： 紅綠燈產(chǎn)品設計原則 產(chǎn)品設計 設計規(guī)范 

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