當(dāng)前位置: 首頁 > 設(shè)計資訊 > 理論文摘 > 正文

視覺設(shè)計常見誤解

2008-11-28 17798 0

  最近,我有機會研究對視覺設(shè)計作用的常見誤解,這些誤解仍然盛行于行政主管、產(chǎn)品主管,工程經(jīng)理和市場專家中。設(shè)計團隊成員如何說明這些認(rèn)識是錯誤的?又該如何向同事和老板展示視覺設(shè)計真相?

  視覺設(shè)計師在特定產(chǎn)品領(lǐng)域或職業(yè)生涯中會面對各種困難,但有三種誤解頻繁發(fā)生:

  視覺設(shè)計是美化產(chǎn)品;

  突出顯示能改善視覺設(shè)計;

  可以分割評估視覺設(shè)計。

視覺設(shè)計是美化產(chǎn)品

  這種信條可能起源于工業(yè)時代的設(shè)計理念引入。從那時起,產(chǎn)品以前所未有的方式進(jìn)行設(shè)計,并形成風(fēng)格。Raymond Lowey等工業(yè)設(shè)計師對呆板產(chǎn)品進(jìn)行美學(xué)設(shè)計,而聲名大噪。

  視覺設(shè)計固然能美化產(chǎn)品,但其與人交互的潛能早已超越美麗外觀。通過組織視覺元素,設(shè)計師可以傳達(dá)回答關(guān)鍵問題的核心信息:

  這是什么?

  怎么使用?

  為什么要使用?

  回答這些問題是功能和可用性的關(guān)鍵組成部分,尤其是對于交互產(chǎn)品。舉些例子來說明:

  圖1到圖3,某個網(wǎng)絡(luò)應(yīng)用工具,相同基本設(shè)置的三種表現(xiàn)方式,字體、顏色、漸變和圖片都相同。三者主要區(qū)別是頁面元素組織方式不同。這種區(qū)別表明該網(wǎng)絡(luò)應(yīng)用工具存在三種主要使用方法。


圖1------網(wǎng)絡(luò)應(yīng)用工具設(shè)計示例

  圖1,表現(xiàn)方式清晰顯示出主要功能------查找客戶聯(lián)系信息;其次,用戶可以編輯、刪除或者增加備注。圖2,重點是顧客和公司之間的交流;其次,用戶可以查看、編輯和刪除聯(lián)系人信息。


圖2---相同網(wǎng)絡(luò)應(yīng)用工具,不同視覺組織

  圖3,關(guān)注點放在編輯客戶信息上。查看聯(lián)系人信息和跟蹤正在進(jìn)行的會話功能被弱化。


圖3---另一種視覺組織

  相同應(yīng)用工具,三種不同視覺組織,三種不同主操作:查找聯(lián)系人信息、管理客戶交流以及維護(hù)客戶記錄。每個例子中,影響視覺設(shè)計的因素大體一致:顏色、字體、漸變和圖片。

  顯而易見,視覺設(shè)計不僅是美化此工具。它傳達(dá)工具的核心功能:它是什么?如何使用?為什么要使用?,而同時有美化了界面。

[Page: ]

能讓這個更突出嗎?

  很多網(wǎng)站都喜歡把logo做得比較大,客戶和老板常要求視覺設(shè)計師著重強調(diào)頁面上某些元素。這類評論有時可以幫助我們發(fā)現(xiàn)設(shè)計中的最重要元素,但也常引發(fā)視覺設(shè)計的另一常見誤解:改善網(wǎng)站視覺設(shè)計,通過加大、加粗、變紅或同時使用三種方法來實現(xiàn)!

  頁面任何元素的相對重要性都是由其周邊元素決定。白色頁面放上紅色圓圈,會吸引很多注意力。但把紅圈放在10個粉色圓圈旁就不會吸引那么多注意力。突出重要元素是整體設(shè)計的一個過程,并不是改變?nèi)魏螁我辉?。給予單個元素額外視覺權(quán)重會破壞布局平衡,攪亂相關(guān)元素、主操作等之間的關(guān)系。

  要是滿足客戶和老板每個強化某些功能的需求,頁面所有元素都會去搶著吸引用戶注意—— 結(jié)果就是都得不到注意。圖4和圖5,兩個互聯(lián)網(wǎng)瀏覽器下載頁面。Firefox頁面,下載瀏覽器號召很明顯,頁面其他元素——Thunderbird、 Mozilla商店和最新內(nèi)容——沒有干擾。


圖4---Firefox下載頁

  圖5,F(xiàn)lock下載頁面強調(diào)了許多不同元素,設(shè)計團隊決定提供四個下載入口——右上角、左側(cè)菜單底部、新聞面板右上角和頁腳。如果頁面上沒強調(diào)那么多其他元素,F(xiàn)lock下載頁面或許可以和Firefox一樣只用一個下載按鈕。


圖 5---Flock下載頁

[Page: ]

可以分割評估視覺設(shè)計

  沒有從設(shè)計整體考慮,而強調(diào)單個元素會非常困難,同樣做出孤立改變也很難。但是視覺設(shè)計師收到的大部分反饋集中在孤立元素上:可以把Logo做大點嗎?能改變標(biāo)題顏色嗎?這里可以換張圖嗎?

  這些的確幫助設(shè)計師明白用戶和老板想要的東西,但他們沒有考慮優(yōu)秀設(shè)計必需的整體分析。改變顏色需要反復(fù)思考整體配色,因為設(shè)計師必須確保顏色對比明顯,才能突出關(guān)鍵操作。改變圖片意味著同時要改變周邊元素,因為原圖片形成的焦點可能已不存在。諸如此類。

  產(chǎn)品總體視覺設(shè)計源于謹(jǐn)慎平衡頁面元素------傳達(dá)產(chǎn)品功能、可用性和優(yōu)勢的關(guān)鍵信息。如果要調(diào)整一項元素,設(shè)計師需要重組全局,重歸平衡。孤立設(shè)計決策無法保持修改前后整體一致。

  孤立評估基于互聯(lián)網(wǎng)的產(chǎn)品特別脆弱。單個產(chǎn)品可以進(jìn)行獨立測試,所以產(chǎn)品團隊就會假設(shè)"這些產(chǎn)品結(jié)合在一起也會很好", 而常常把單獨表現(xiàn)良好的產(chǎn)品組合起來。圖6,孤立決策的后果。

  在這個eBay頁面,頁頭水桶測試(bucket testing)表現(xiàn)良好,PayPal保護(hù)機制的logo在焦點小組(focus group)中獲得好分?jǐn)?shù),攝影物品宣傳也獲得不錯點擊流,但把三個元素綜合到一個頁面上,并沒有形成有效設(shè)計。事實上,頁面上很多元素似乎互相競爭,互相干擾。


圖6---eBay意大利主頁

  希望這些例子能解釋對視覺設(shè)計角色的一些常見誤解。只有同事和老板能直接體驗視覺設(shè)計潛能,他們才會相信視覺設(shè)計絕不僅僅是設(shè)計樣式、顯化元素或做出孤立決定。


200
評論區(qū)(0)
正在加載評論...