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




  • 【 設計理論】產品設計如何用色彩引導用戶獲取信息




    產品設計如何用色彩引導用戶獲取信息

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

    文章出處是來自百度UED的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

    商業產品有這樣幾個特點:1.信息量大;2.功能模塊繁多;3.用戶角色多樣化;4.操作者水平參差不齊。


    設計理論教學開始

    商業產品有這樣幾個特點:1.信息量大;2.功能模塊繁多;3.用戶角色多樣化;4.操作者水平參差不齊。

    產品設計如何用色彩引導用戶獲取信息

    通常情況下,圖形及色彩是引導用戶的第一要素。在商業系統中,圖形不可濫用。

    那麼如何用色彩引導用戶獲取信息是系統設計中的一個重點。

    這裡舉個例子:導視系統會告訴你在哪裡,你想去的地方怎麼走,那裡有什麼?

    產品設計如何用色彩引導用戶獲取信息

    合理的色彩應用亦有這樣的效果:

    – 你在哪裡

    – 哪些是可操作的

    – 哪些是重要的信息

    – 哪些是對你有幫助的信息

    – 信息之間的關係是什麼

    那麼我們可以將整體色彩劃分成兩大類,主體色系和提示色系

    主體色系

    1.主視覺色:決定你的整體視覺風格。通常情況下,一種冷色,其它都為灰度輔助色。這樣的好處是降低色彩對信息主體的影響,同時灰色系的應用將很好襯托圖表的呈現及信息層次表達;

    產品設計如何用色彩引導用戶獲取信息

     

    2.可操作色:讓可操作的項顯而易見,這點非常重要。有鏈接、按鈕和區域幾種形式,我們將所有的操作項或區域都定義為藍色,包括按鈕也是偏冷色調,鏈接擺脫掉討厭的下劃線,使信息識別更為清晰;

    產品設計如何用色彩引導用戶獲取信息

     

    3.激活色:也可叫當前色,用來申明當前信息與其相關信息的關係,通常應用在Tab標籤、導航、樹形菜單,這裡我們沒有進行嚴格的色彩定義(如果能統一則更好),遵從色彩一致性原則就好。

    產品設計如何用色彩引導用戶獲取信息

     

    提示色系

    這個色彩應用比較趨向標準,按信息程度來區分就好,這類色系通常情況下跟狀態色一同應用,比如廣告系統中常用的物料狀態

    成功提示:這個比較簡單,給予用戶操作的正常反饋及激勵;

    功能、操作及幫助提示:也叫幫助色,使用戶形成統一的認知,快速定位或識別該信息;

    警示色:我們定義了兩級警示色,一類屬於警告或出錯,另一類屬於警示,需要關注和修正

    產品設計如何用色彩引導用戶獲取信息

     

    合理的色彩體系能降低用戶的學習成本,完成簡單有效的信息指引!

    — —

    文章永久連結為: 產品設計如何用色彩引導用戶獲取信息