過馬路的時候突然注意到紅綠燈,恰好最近的新交通規則也熱火朝天,就順勢吐槽下關于「設計規範」的思考。
提到設計規範,很多人都覺得是個很虛、不務實的績效工程,很多企業為設計規範而設計規範,拍腦袋定規則,投了精力進去,面子起來了,最後死掉了。以前也很不情願去制定設計規範,經歷多個終端的設計痛苦後,漸漸明白了設計規範「存在即合理」的意義。
紅綠燈的啟示
扯淡之前,還是先回到紅綠燈這個事兒上:
這是再常見不過的紅綠燈。當工業化城市化達到一定程度,出現車如流水馬如龍的複雜交通,紅綠燈也便應運而生。在這裡,紅綠燈起到的就是規範的作用,路人、司機達成一致共識:紅燈停,綠燈走。一切有序進行。缺少它,過馬路將變得驚心動魄。
這是再簡單不過的常識,但同樣的思維遷移到設計上來,會引發很多有趣的思考。
常看到產品設計團隊經常對導航、回饋等交互問題進行激烈討論,雖然多元碰撞是好事,但一旦系統開始龐大,問題也將顯露水面:團隊成員各有創意追求,尤其是視創意如生命的設計師,對規則創新的追求更為突出,如果團隊缺少「紅燈停綠燈走」這樣的共識、缺少設計約束,將導致規則無序疊加,使得軟體的整體交互變淩亂複雜。
設計規範三宗罪
1. 規範制定時機過早/過遲
小村莊的道路是不需要紅綠燈的,因為壓根用不著,紅綠燈的存在反而限制了人們的自由走動。但卻有那麼一類公司,在早期產品野蠻成長、規模還小的時候,早早制定設計規範,花大功夫,卻無人接受,難以執行。與過早相對,太遲也不合適,大公司也會犯這樣的錯誤,如google,android在4.0之前出了個相當粗糙、有和沒有一個樣的規範,等到自家系統跑著很多長iPhone模樣的app時才發現問題的嚴重。
2. 規範過於詳盡
紅綠燈是一個特別簡單的「約束」,紅燈停,綠燈走,至於怎麼停、怎麼走,交給甲乙丙丁自行決定。《iPhone Design Guideline》的制定者非常有先見之明,他們在撰寫規範的時候,選擇了一種寬泛的表述方式,沒有定義「點擊按鈕」應該多大、沒有定義「返回按鈕」必須長左上角、沒有定義刪除就非得有一個扔進垃圾桶的動畫…表述越細,限制越大,反而會成為設計團隊創新的枷鎖。
3. 規範一成不變
早期的紅綠燈就只有兩種顏色更替,但還是會遇到一定的危險,經過不斷的改進才出現了由紅黃綠組成的三色信號燈並一直沿用至今(最近有人冒出來把黃燈給否定了)。紅綠燈也已經不是簡單的顏色更替,而是一套完整的信號系統,人行道的、車道的、帶方向指示的…設計規範同樣如此,當產品變複雜,大到像一隻龐然大物如QQ、微信時,為了保證體驗的一致性,規範會逐漸完善和明晰。規範的建立是一個長期的過程,寬泛的設計指引應該與時俱進。
大指引,小規範
關於規範的討論,在這之前就已經有很多前輩進行過各種思考激辯,至於執行,也會因團隊因專案而各有差異。
以iPhone的產品設計為例,蘋果官方的《iOS HumanInterface Guidelines》(以前叫《iPhone Human Interface Guidelines》)比較系統,很多產品設計直接參考這份文檔去構建自己的app,產品生命週期中唯一的設計規範也就是這份現成的參考。我們除了會以官方的設計指引為基本參考,還會根據專案的需要將設計規範細化,以1+1(平臺規範和應用規範)的方式整理軟體繁瑣的交互細節。
規範案例(一):資訊提示系統
提示系統作為軟體設計中一個小點,很多團隊都不會在意,過去我們有一套比較完整的資訊提示系統,將提示分成了四類:
3.0設計過程中我們對整套提示系統再次進行了優化,徹底去掉Toast提示,並且將Banner Tips統一為一種樣式,直接挨著巡覽列下方。
規範案例(二):功能表系統
功能表是軟體設計裡中另外一種常見的交互系統,我們第一個版本剛出來的時候使用了隱晦的方式(橫滑)設計功能表,經過幾個版本的演進,功能表的出現更加直接、更容易擴展,並對不可操作的異常提供瞭解釋說明。
iPhoneQQ音樂發展到現在,儼然是個龐大的產品,有海量樂庫的資訊組織、個人音樂資產的管理,基礎的播放操作體驗….
除了上述的資訊提示和功能表系統,我們還對產品的幾個常見交互系統提供了一些簡單的指引,包括:
1. 導航:定義全域導航規則,包括普通的層級進入、臨態介面、介面內互調、跨產品互調
2. 異常處理:如網路中斷、內容為空時的提醒及引導
3. 品牌傳達:在異常、邊緣情況、產品幻燈片展示方面對音樂品牌的視覺傳達
當然,如果出現某種不能滿足的情況,我們會再重新審視,及時調整。高效可控的交互體系是應需而變的。
最後,說回投入/產出比的問題,既然大部分自訂的規範意義都不大(平臺級的規範除外),何必投入大把精力?其實這種官方規範之外的小規範成本非常低,不需要整理成一個完整的樣式庫,只需要簡單地把規範羅列在一張大圖上,供團隊成員或中間接手的設計師參考即可。對於節奏非常敏捷的移動互聯網產品而言,簡單,才最具生命力。
- (本文出自Tencent CDC Blog,轉載時請注明出處)
</p>特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy