DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 設計理論:交互設計中色彩的運用
設計理論:交互設計中色彩的運用
編輯:關於網頁技巧     

網頁制作poluoluo文章簡介:設計理論:交互設計中色彩的運用.

也許有人說,色彩是視覺設計師需要考慮的問題,交互中可以不考慮顏色。沒錯,視覺設計師對於顏色有較強的見解和把握,由於色彩設計的重要度(人們對於信息的把握,首先也是由色彩開始的,其次才是圖形,文字),在產品設計過程中,視覺設計師有著第一評判權。

對於色彩的認知,從哲學層面轉入科學范疇後,人們發現,色彩對於人的心理影響有其固化的習慣性,這些認知也就延伸到了人對於產品的使用中。這樣,在產品交互過程中,色彩也就可以被寬泛的表述進來,從而明確人的行為動機。


先舉幾個生活中的例子,紅綠燈已經很明確顏色對於人的行為的認知了;冷熱水管中,紅色代表熱水,藍色代表冷水…..這些都是根據人對色彩的心理認知而做的指示設計,至於紅是哪個紅,藍是天藍還是钴藍,這些就要根據不同品牌來明確給用戶了,這也就是視覺設計師要考慮的。

在互聯網產品設計中,這個道理同樣存在,網絡最初定義的文字顏色,藍色為鏈接,黑色為文本色,灰色為當前不可點或者非重要信息,紅色起到強調、警示作用,默認鏈接還有下劃線。

具體講一個改進的例子,以前“我的淘寶”中,交易提醒內容為:“買入:在最近三個月內,您共有13筆買入交易記錄,請到“已買到的寶貝”中查看。”新版做了優化,先是縮減文案改成:“最近三個月買入(13)”。整條可點擊,這裡的問題就是文字不像鏈接,可視提示不明確,用戶以為黑字不可點,都點後面的數字,數字區域又很小。最後改成“三個月買入(13)”,文字用鏈接色(又一次縮減了文案)。這裡還有個問題,提醒中,有馬上需要操作的提醒,如:待確認收貨。也有用戶看看就可以,不需要馬上操作的,如:三個月買入。這樣,又做了一個調整,需要用戶馬上操作的,後面數字用橙色,如:待確認收貨(9),不需要馬上操作的,數字還是用黑色。(強調提醒用暖色系更能讓人注意,比如紅色,淘寶慣用橙色)。

上面這個例子的幾經變遷,就是通過顏色的調整使用戶更快速的完成任務,當然我們更可以改進功能直接讓用戶確認某個寶貝收貨。


在色彩理論中,色相對應其特點相對給人的感覺固定些,比如暖色有膨脹感,貼近感,急切感;冷色系後退感,冷靜感,收縮感;無色系有客觀,敘述,優雅等感覺。


有研究表明,深色車比亮色車易發車禍,原因就是深色車的收縮感使後面的司機感覺離前面的車還比較遠,而且看起來小,注意度就會降低。顏色都到了人命關天的地步,不過沒這麼恐怖,呵呵。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved