建站常識
自然選擇:自然界的顏色與界面設計
2006-12-19 10:41:00
互聯(lián)網(wǎng)充斥著枯燥的設計,惠普、IBM、戴爾、微軟,以及其他數(shù)不盡的網(wǎng)站(相似的布局,相似的配色)。可能有人會說通過這樣一種標準化的界面可以使瀏覽更方便,而事實上這些網(wǎng)站帶給用戶一種很世俗的體驗,并不能與訪客產(chǎn)生一種積極的聯(lián)系。
面對這種單調(diào)的設計,有一種解決方法,就是使用顏色。可能沒有其他設計元素能像顏色一樣能影響人們對世界(比如網(wǎng)站,比如家居裝潢)的感受。顏色可以瞬間改變我們的情緒和意見。顏色會讓我們感覺到舒適、敬畏,或者激動。在界面設計中,自然界的顏色組合對設計非常有用。從復雜的 Web 應用程序到很多信息類 brochure-ware 網(wǎng)站,自然界的顏色可以區(qū)分設計(讓用戶更加難忘)、引導用戶(使用戶專注于交互)、吸引用戶(使頁面布局更舒適,更有魅力),并且?guī)盱`感(給設計師配色上的靈感)。
區(qū)分設計
在生活中,我們很容易忘記日常的事。我們趨向于記住那些有獨特體驗的或者有情感參與的事件。在網(wǎng)絡上也是如此。當所有網(wǎng)站看上去一樣,我們可能會產(chǎn)生這個就是那個的幻覺。而且當在網(wǎng)站之間跳轉(zhuǎn)越來越快,這樣的幻覺也越容易產(chǎn)生。
所以一旦有機會可以讓網(wǎng)站更獨特,就不能放棄。如果你的網(wǎng)站很“跳”,那么用戶可能會花更多時間瀏覽并且想是從哪里訪問過來的,他們有可能記住這個網(wǎng)站并且下次再訪問。可能沒有比顏色更好的元素可以達到這樣的效果了。人們會馬上對顏色產(chǎn)生感覺:激動、高興或者枯燥乏味。
自然界的顏色搭配可以馬上讓你跳出互聯(lián)網(wǎng)的顏色(Fig 1),并且設計一個更容易讓人記住的網(wǎng)站。舉個例子,通過 Fig 2 中自然界的顏色組合設計的網(wǎng)站原型(Fig 3)完全區(qū)別于“標準”版本的同一個網(wǎng)站(Fig 4)。用柔和的顏色作為背景,足以突出頁面上 4 塊主要的信息區(qū)域。
但是在用“牧場的顏色”到你的設計上之前,必須知道顏色選擇也必須和設計主題一致。因為顏色與用戶的交流非常的直接高效,用正確的顏色也很重要。
引導用戶
“功能決定形式——這是錯誤的理解。形式和功能應該是一體的,在精神上融合。” —— Frank Lloyd Wright
自然界中的顏色通常具備較低的飽和度,對比“人造的數(shù)字顏色”,眼睛看上去更加舒服。這樣可以讓用戶更加專注于交互,不會被其他亮色調(diào)打擾。當你試圖在一個充滿飽和色調(diào)的頁面上(Fig 4)瀏覽信息時,你的眼睛會不斷地返回那些亮的顏色(比如頁面頂部的藍色)。相反地,F(xiàn)ig 3 中使用的藍色和黃色,創(chuàng)造了一種平衡,從而突出了圖片、導航和內(nèi)容。(這對信息量大的頁面尤其有效。)最強的視覺元素是最重要的:導航和 4 塊內(nèi)容區(qū)域,而不是背景色。這可能就是因為自然顏色組合帶來的效果,我們對這些顏色很親切熟悉。我們趨向于忘記那些深藍、黃色和灰色,因為每天都看到。
在那些用戶需要長時間在線使用的 Web 應用程序中,注意這一點尤為重要。不是很強烈的配色可以使用戶專注于工作和接收重要信息。當然完美的 Web 體驗不能僅僅依靠顏色,結(jié)構(gòu)、交互、布局等方面也必須協(xié)同工作,來創(chuàng)建可用、易用的網(wǎng)站和應用程序。但是顏色是平衡中的重要部分,不能忽略。
吸引用戶
“自然顏色非常親切并且具有很高的接受度?!?—— Edward Tufte, 1989
自然界的顏色組合對另外一種設計思考也很有幫助,那就是情感反饋。可用性(Usability)讓用戶很方便的從 A 點到 B 點,但是有時降低了有趣的體驗,那些人們想重復體驗的或者與人分享的。
考慮一下下圖中兩個版本的事務表單。其中一種(Fig 5)使用了寒冷和具有脅迫性的配色。另外一種使用了暖和和更有魅力的顏色,自然,使得表單更有親和力?,F(xiàn)在假設有一個書記必須重復性的填寫這個表單,那么較少脅迫性的表單可以吸引他在這個舒適的框架下完成工作。
帶來靈感
自然界的顏色蘊含的另外一個財富就是可以帶來靈感。豐富多彩的自然界,給我們持續(xù)不斷的帶來新的想法,包括顏色的選擇。舉個實例,為了促進都柏林的旅游業(yè),設計師并沒有使用橙色、綠色和白色(愛爾蘭國旗的顏色),而是采用了愛爾蘭海岸的一種顏色組合。這種組合非常生動和吸引人,是都柏林看起來很有游玩的樂趣,并且廣闊、豪華。非??上У氖沁@個配色并沒有被帶到都柏林的網(wǎng)站上,少了很多生動和魅力。
當然所有上面談到的,自然界的顏色組合并不就是一把尚方寶劍。有時候你可能想給你的訪客帶來一種“震驚懼怕”的感覺,你最好的賭注就是那些從來不在自然界中一起出現(xiàn)過的顏色組合(所以看上去不舒服)。有時候你的訪客想要的,或許就是你最喜歡的那種企業(yè)藍。但是在復雜的交互和需要創(chuàng)意的時候,自然界的顏色組合肯定會是你很重要的一件武器。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設計的五大特點
- [2023-04-27 14:05:55] Html 5 響應式網(wǎng)站設計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設計應該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設為什么要設置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應該如何選擇一家水平高的網(wǎng)站建設公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設計都有哪些新的趨勢?
延伸閱讀
- [2019-05-29 09:17:14] 運用什么技巧使用戶喜歡我的產(chǎn)品設計
- [2009-08-25 22:19:00] 猜測vs數(shù)據(jù):作為設計建議的原則
- [2009-06-09 22:35:00] 交互設計的KISS原則
- [2005-12-29 21:14:00] 網(wǎng)頁高手之淺談設計中的文字
- [2009-06-11 08:19:00] 低成本提高web可用性的幾個細節(jié)(二)
- [2009-05-11 22:27:00] 會員注冊頁面的交互細節(jié)
- [2009-07-22 22:14:00] 從長尾理論和二八定律的比較去看用戶體驗
- [2006-05-26 16:31:00] 關(guān)于網(wǎng)站設計的幾點矛盾
- [2010-07-15 16:00:00] 讓用戶更容易地找到需要的信息5
- [2006-11-08 11:08:00] 如何有效進行網(wǎng)站的設計、管理和維護?
- [2010-08-26 22:39:00] 一個選項卡寬度的哥德巴赫猜想
- [2009-06-24 08:14:00] 可用性和用戶體驗的關(guān)系
解決方案
輪胎行業(yè)網(wǎng)站設計解決方案 機械行業(yè)網(wǎng)站設計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設計解決方案 科技企業(yè)網(wǎng)站設計解決方案 電子家電網(wǎng)站設計解決方案 食品行業(yè)網(wǎng)站設計解決方案 集團公司網(wǎng)站設計解決方案 企事業(yè)單位網(wǎng)站設計解決方案 外貿(mào)行業(yè)網(wǎng)站設計解決方案 健身運動網(wǎng)站設計解決方案 美容與化妝品網(wǎng)站設計解決方案 建筑設計行業(yè)網(wǎng)站設計解決方案 物流行業(yè)網(wǎng)站設計解決方案
TAGS關(guān)鍵字
企業(yè)網(wǎng)站設計 蘋果系統(tǒng) 網(wǎng)站設計趨勢 企業(yè)網(wǎng)站建設 插畫 良好的導航 集團公司網(wǎng)站建設 網(wǎng)站制作 青島開發(fā)區(qū)建站公司 視覺靈感 網(wǎng)站動畫 微信小程序 青島網(wǎng)站案例 企業(yè)網(wǎng)站 css 網(wǎng)站建設的步驟有哪些 青島網(wǎng)頁制作 青島網(wǎng)站營銷 海信網(wǎng)絡科技 青島黃島、紅島網(wǎng)站建設公司 網(wǎng)站交互設計 外貿(mào)網(wǎng)站設計 中小型企業(yè)網(wǎng)站建設 高端網(wǎng)站設計 青島SEO 網(wǎng)站設計資訊 企業(yè)建站 網(wǎng)站品牌 企業(yè)網(wǎng)站為什么要備案 青島網(wǎng)站建設基礎(chǔ)知識