• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】從馬路紅綠燈與談及設計規範




    從馬路紅綠燈與談及設計規範

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自Tencent的設計理論類文章,寫教學的作者是Blog,感謝Blog提供設計理論的實作教學。

    教學大綱:

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


    設計理論教學開始

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

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

    紅綠燈的啟示

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

    從馬路紅綠燈與談及設計規範

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

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

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

    設計規範三宗罪

    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. 品牌傳達:在異常、邊緣情況、產品幻燈片展示方面對音樂品牌的視覺傳達

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

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

    — —

    文章永久連結為: 從馬路紅綠燈與談及設計規範