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

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

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

　　突出顯示能改善視覺設(shè)計(jì)；

　　可以分割評(píng)估視覺設(shè)計(jì)。

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

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

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

　　這是什么？

　　怎么使用？

　　為什么要使用？

　　回答這些問題是功能和可用性的關(guān)鍵組成部分，尤其是對(duì)于交互產(chǎn)品。舉些例子來(lái)說(shuō)明：

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

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

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

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

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

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

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

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

能讓這個(gè)更突出嗎？

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

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

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

圖4---Firefox下載頁(yè)

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

圖 5---Flock下載頁(yè)

可以分割評(píng)估視覺設(shè)計(jì)

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

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

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

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

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

圖6---eBay意大利主頁(yè)

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