我是一個(gè)初入互聯(lián)網(wǎng)的視覺設(shè)計(jì)師，和以往做設(shè)計(jì)感受最大的不同就是：一個(gè)設(shè)計(jì)的最終定稿會受到多方面的挑戰(zhàn)，有來自產(chǎn)品經(jīng)理的，來自開發(fā)的，來自測試的…等等。那如何在其他團(tuán)隊(duì)成員的面前不卑不亢，游刃有余地應(yīng)對呢？下面這篇文章給了我很大的啟發(fā)，特別分享給大家。

產(chǎn)品經(jīng)理、開發(fā)工程師和市場策劃專員等產(chǎn)品利益關(guān)系人認(rèn)為——視覺設(shè)計(jì)師在整個(gè)團(tuán)隊(duì)中沒有突出的地位。難道這個(gè)論斷是正確的嗎？我們還能用哪些實(shí)例來向這些利益關(guān)系人證明視覺視覺設(shè)計(jì)的重要性呢？

盡管，視覺設(shè)計(jì)師在他的職業(yè)生涯中或者是在某個(gè)產(chǎn)品開發(fā)進(jìn)程中會面臨不同的阻礙，以下3點(diǎn)是會被經(jīng)常提及的：

● 視覺設(shè)計(jì)就是怎樣把東西做得更漂亮
● 做流行的東西就可以提高視覺設(shè)計(jì)的品質(zhì)
● 我們從單個(gè)元素出發(fā)來評價(jià)視覺設(shè)計(jì)的效果
視覺設(shè)計(jì)就是怎樣把東西做得更漂亮

盡管現(xiàn)在只有很少的一部分人依舊堅(jiān)持著這個(gè)觀點(diǎn)，但認(rèn)為視覺設(shè)計(jì)只是蛋糕上的奶油這個(gè)觀念已存在很久。這就好比把最后一步的視覺設(shè)計(jì)比喻成產(chǎn)品包裝上的一個(gè)吸引人注意的蝴蝶結(jié)。

這個(gè)觀點(diǎn)也許源于工業(yè)時(shí)代。在當(dāng)時(shí)，工業(yè)產(chǎn)品才開始出現(xiàn)不同以往的外觀設(shè)計(jì)，而且像雷蒙·羅維（Raymond Loeway，1889-1988，法國）這樣的現(xiàn)代工業(yè)設(shè)計(jì)師開始大張旗鼓地宣揚(yáng)自己的產(chǎn)品美學(xué)。

顯而易見的，視覺設(shè)計(jì)確實(shí)可以改善產(chǎn)品的表征，但是它可以傳遞給用戶的信息其實(shí)更多。通過對不同元素的排列布局，視覺設(shè)計(jì)師也在向用戶傳遞著產(chǎn)品的核心價(jià)值：

● 這是什么？
● 我怎么使用？
● 為什么我只使用它？

上述3個(gè)問題在交互式產(chǎn)品的設(shè)計(jì)上尤其顯得至關(guān)重要。下面我們通過一個(gè)實(shí)例來說明。

圖1到圖3呈現(xiàn)的是同一個(gè)網(wǎng)站的不同視覺排列，基于相同的視覺元素——字體、顏色、漸變和圖片。不同的布局直接影響著主要功能點(diǎn)的不同。

圖1

上圖中，我們可以清晰地看出頁面的主要功能是查看客戶聯(lián)系信息。然后則是用戶可以編輯、刪除或者為聯(lián)系信息寫備注。在圖2中，頁面的重點(diǎn)放在了客戶和公司的交流上，然后是用戶可以瀏覽、編輯和刪除客戶信息。

圖2

最后，圖3的設(shè)計(jì)重點(diǎn)是用戶信息的可編輯性。查看和實(shí)時(shí)跟蹤客戶信息的功能被弱化了。

圖3

這3種不同的視覺呈現(xiàn)方案告訴了我們用戶的3個(gè)主要任務(wù)：查看客戶聯(lián)系信息、管理和更新這些信息以及保留客戶的記錄。在每個(gè)方案中，視覺設(shè)計(jì)的基本元素是相同的：顏色、字體、漸變和圖片。

視覺設(shè)計(jì)可以做到的遠(yuǎn)比美化界面多得多。它還肩負(fù)著傳遞產(chǎn)品核心功能的作用?！斑@是什么？”“怎么使用這些功能？”“怎樣更高效地使用？”

做流行的東西就可以提高視覺設(shè)計(jì)的品質(zhì)

就像現(xiàn)在很流行的網(wǎng)站“make my logo bigger”所為客戶做的事一樣，產(chǎn)品經(jīng)理經(jīng)常會要求視覺設(shè)計(jì)師更多地關(guān)注排版中的某個(gè)細(xì)節(jié)。這些意見在幫助我們更容易抓住設(shè)計(jì)重點(diǎn)的同時(shí)，也暴露了對于視覺設(shè)計(jì)的另一個(gè)誤解：“為了改進(jìn)這個(gè)網(wǎng)站的視覺效果，你要把這個(gè)做得大一下，這個(gè)字體用粗體，變成紅色！”

然而，頁面中任何元素的重要性如何是取決于它周圍環(huán)境的。比如，在一個(gè)頁面中放入一個(gè)大紅色的圓，它會很引人注目。如果把同一個(gè)圓放在10個(gè)粉色的圓邊上，它就不會那么醒目了。因此，決定某個(gè)元素的重要性要從設(shè)計(jì)的整體出發(fā)。我們不應(yīng)該只關(guān)注于某個(gè)元素來改進(jìn)設(shè)計(jì)。如果這樣做的話，頁面的整體平衡就會被破壞，也會混淆頁面功能的層次關(guān)系。

如果你答應(yīng)每個(gè)利益關(guān)系人去逐個(gè)調(diào)整頁面的不同細(xì)節(jié)，你每次的調(diào)整都要在用戶需求和產(chǎn)品需求之間做抉擇，然而，大多數(shù)情況下，兩種需求是無法同時(shí)得到滿足。圖4和圖5是兩個(gè)不同下載頁面的比較?；鸷捻撁嬷杏幸粋€(gè)醒目的下載按鈕來觸發(fā)這個(gè)行為。而頁面中其他的元素，比如產(chǎn)品特性等就不會那么明顯。

圖4

圖5是Flock的下載頁面，有4個(gè)地方可被點(diǎn)擊來觸發(fā)下載的行為：頁面的右上角、左邊菜單的底部、新聞板塊的右上角和頁腳的位置。如果不是因?yàn)槊總€(gè)下載細(xì)節(jié)都被強(qiáng)化的話，F(xiàn)lock可能就會像火狐一樣——只有一個(gè)下載的按鈕。

圖5

我們從單個(gè)元素出發(fā)來評價(jià)視覺設(shè)計(jì)的效果

如果我們把關(guān)注的重點(diǎn)單單落在某個(gè)元素上而不是整體頁面的話，也會讓局部的調(diào)整很困難?！澳隳馨裭ogo做得大一些嗎？”“你能把標(biāo)題的顏色變一下嗎？”“我們能在這里換一張圖片嗎？”…

這些零散的建議確實(shí)可以幫助我們更了解客戶的意圖，但客戶很少會關(guān)注到這對整體頁面設(shè)計(jì)的影響。換一個(gè)顏色可能需要重新定義頁面的色調(diào)，設(shè)計(jì)師還需確保新的色調(diào)不會影響到用戶關(guān)注主要任務(wù)。換一張圖片可能意味著也要同時(shí)調(diào)整它周圍的元素，因?yàn)樵葓D片制造的視覺焦點(diǎn)可能不復(fù)存在…等等。

一個(gè)最終的視覺設(shè)計(jì)稿應(yīng)該是建立在平衡和調(diào)整各個(gè)元素相互關(guān)系上的——同時(shí)傳遞產(chǎn)品的核心價(jià)值。所以，當(dāng)設(shè)計(jì)師在調(diào)整了一個(gè)元素后，他還必須重新考慮頁面的布局以不破壞原有的平衡。孤立地完成一個(gè)個(gè)小設(shè)計(jì)，合在一起后并不能說這就是一個(gè)完整的設(shè)計(jì)。

互聯(lián)網(wǎng)產(chǎn)品的頁面元素尤其容易被獨(dú)立開來進(jìn)行評估。因?yàn)樗苍S是分一個(gè)個(gè)單獨(dú)的模塊做測試的，團(tuán)隊(duì)里的一個(gè)成員也可能認(rèn)為我只要把自己的那部分給做好了，整體的項(xiàng)目也就做好了。圖6就表明了獨(dú)立設(shè)計(jì)可能造成的結(jié)果。

當(dāng)我們單獨(dú)看頁面頭部ebay的logo、paypal提供安全保障的提示和正中照相機(jī)的促銷廣告是，都會覺得不錯(cuò)。事實(shí)上，當(dāng)這三者同時(shí)出現(xiàn)在一個(gè)頁面上時(shí)，他們更像在互相競爭，都過于搶眼了。

圖6

但愿以上這些實(shí)例已經(jīng)證明了視覺設(shè)計(jì)師在團(tuán)隊(duì)中的價(jià)值。但要讓更多的團(tuán)隊(duì)成員認(rèn)同視覺設(shè)計(jì)不僅僅關(guān)乎到樣式、流行等，視覺設(shè)計(jì)師還需多提升自我經(jīng)驗(yàn)，在項(xiàng)目初期就表明視覺設(shè)計(jì)對于整個(gè)項(xiàng)目的重要性。
《Common Visual Design Misconceptions》
By Luke Wroblewski
原文鏈接：http://www.uxmatters.com/mt/archives/2008/11/common-visual-design-misconceptions.php

來源：http://cdc.tencent.com/?p=2141