騰訊CDC：紅綠燈與設計規范

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

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

　　紅綠燈的啟示

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

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

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

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

　　設計規范三宗罪

　　1. 規范制定時機過早/過遲

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

　　2. 規范過於詳盡

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

　　3. 規范一成不變

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

　　大指引，小規范

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

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

　　規范案例(一)：信息提示系統

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

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

　　規范案例(二)：菜單系統

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

　　iPhoneQQ音樂發展到現在，俨然是個龐大的產品，有海量樂庫的信息組織、個人音樂資產的管理，基礎的播放操作體驗….

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

　　1. 導航：定義全局導航規則，包括普通的層級進入、臨態界面、界面內互調、跨產品互調

　　2. 異常處理：如網絡中斷、內容為空時的提醒及引導

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

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

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