萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

騰訊 CDC:紅綠燈隱喻設計規範——從「三宗罪」到「大指引,小規範」的演進之道

過馬路注意到紅綠燈,恰逢新交規熱議,順勢吐槽「設計規範」思考。

紅綠燈啟示:規範即共識,秩序之源

紅綠燈

工業化城市化達到程度,車水馬龍中紅綠燈應運而生。路人、司機達成共識:紅燈停、綠燈行,秩序井然。缺之,過馬路驚心動魄。同理遷移至設計:產品團隊常就導航、反饋激烈討論,多元碰撞雖好,但系統龐大後,成員創意追求不同,缺乏「紅燈停綠燈行」共識與約束,導致規則無序疊加,交互變凌亂複雜。

設計規範三宗罪

  1. 制定時機過早/過晚:小村莊不需紅綠燈,早期產品野蠻生長期強推規範無人執行;過晚如 Android 4.0 前規範粗糙,等自家系統跑滿山寨 iOS App 才覺嚴重。
  2. 規範過於詳盡:紅綠燈極簡:紅停綠行,怎麼停怎麼行交由個體。《iPhone Design Guideline》採寬泛表述,未定義按鈕尺寸、返回鍵位置、刪除動畫細節。表述越細,限制越大,反成創新枷鎖。
  3. 一成不變:早期紅綠燈兩色,經改進成三色並成完整信號系統(人行道/車道/帶向導)。設計規範同理,產品變複雜(如 QQ、微信),為保體驗一致性,規範須逐漸完善明晰。建立是長期過程,寬泛指引應與時俱進。

大指引,小規範:1+1 體系

以 iPhone 產品設計為例,蘋果官方《iOS Human Interface Guidelines》系統完整,多數產品直接參考構建 App,產品生命週期唯一規範即此現成參考。我們除以官方指引為基準,再按項目需要細化,以「1+1」(平台規範+應用規範)整理繁瑣交互細節。

規範案例一:信息提示系統優化

提示系統常被忽視。過去分四類:

舊提示系統四類

3.0 版優化:徹底去除 Toast,統一 Banner Tips 樣式,直貼導航欄下方:

新提示系統

規範案例二:菜單系統演進

首版用隱晦橫滑設計,經幾版演進:出現更直接、擴展性更強、對不可操作異常提供解釋:

菜單系統演進

iPhone QQ 音樂現為龐大產品(海量樂庫、個人音樂資產、基礎播放體驗)。除上述兩系統,還對導航(層級/臨態/界面互調/跨產品互調)、異常處理(斷網/空狀態)、品牌傳達(異常/邊緣/幻燈片)提供簡單指引。遇無法滿足情況,重新審視及時調整。高效可控交互體系源於應需而變。

投入產出比:小規範成本極低,生命力最強

大部分自定義規範意義不大(平台級除外),何必投入大量精力?實際小規範成本極低:無需整理完整樣式庫,只需將規範列在一張大圖上,供團隊成員或中途接手設計師參考。對節奏敏捷的移動互聯網產品,**簡單,才最具生命力**。

(本文出自 Tencent CDC Blog,轉載請註明出處)

copyright © 萬盛學電腦網 all rights reserved