建站常識
當視覺設(shè)計師遇上產(chǎn)品經(jīng)理、開發(fā)工程師…
2010-01-12 17:31:00
我是一個初入互聯(lián)網(wǎng)的視覺設(shè)計師,和以往做設(shè)計感受最大的不同就是:一個設(shè)計的最終定稿會受到多方面的挑戰(zhàn),有來自產(chǎn)品經(jīng)理的,來自開發(fā)的,來自測試的…等等。那如何在其他團隊成員的面前不卑不亢,游刃有余地應(yīng)對呢?下面這篇文章給了我很大的啟發(fā),特別分享給大家。
產(chǎn)品經(jīng)理、開發(fā)工程師和市場策劃專員等產(chǎn)品利益關(guān)系人認為——視覺設(shè)計師在整個團隊中沒有突出的地位。難道這個論斷是正確的嗎?我們還能用哪些實例來向這些利益關(guān)系人證明視覺視覺設(shè)計的重要性呢?
盡管,視覺設(shè)計師在他的職業(yè)生涯中或者是在某個產(chǎn)品開發(fā)進程中會面臨不同的阻礙,以下3點是會被經(jīng)常提及的:
● 視覺設(shè)計就是怎樣把東西做得更漂亮
● 做流行的東西就可以提高視覺設(shè)計的品質(zhì)
● 我們從單個元素出發(fā)來評價視覺設(shè)計的效果
視覺設(shè)計就是怎樣把東西做得更漂亮
盡管現(xiàn)在只有很少的一部分人依舊堅持著這個觀點,但認為視覺設(shè)計只是蛋糕上的奶油這個觀念已存在很久。這就好比把最后一步的視覺設(shè)計比喻成產(chǎn)品包裝上的一個吸引人注意的蝴蝶結(jié)。
這個觀點也許源于工業(yè)時代。在當時,工業(yè)產(chǎn)品才開始出現(xiàn)不同以往的外觀設(shè)計,而且像雷蒙·羅維(Raymond Loeway,1889-1988,法國)這樣的現(xiàn)代工業(yè)設(shè)計師開始大張旗鼓地宣揚自己的產(chǎn)品美學(xué)。
顯而易見的,視覺設(shè)計確實可以改善產(chǎn)品的表征,但是它可以傳遞給用戶的信息其實更多。通過對不同元素的排列布局,視覺設(shè)計師也在向用戶傳遞著產(chǎn)品的核心價值:
● 這是什么?
● 我怎么使用?
● 為什么我只使用它?
上述3個問題在交互式產(chǎn)品的設(shè)計上尤其顯得至關(guān)重要。下面我們通過一個實例來說明。
圖1到圖3呈現(xiàn)的是同一個網(wǎng)站的不同視覺排列,基于相同的視覺元素——字體、顏色、漸變和圖片。不同的布局直接影響著主要功能點的不同。
圖1
上圖中,我們可以清晰地看出頁面的主要功能是查看客戶聯(lián)系信息。然后則是用戶可以編輯、刪除或者為聯(lián)系信息寫備注。在圖2中,頁面的重點放在了客戶和公司的交流上,然后是用戶可以瀏覽、編輯和刪除客戶信息。
圖2
最后,圖3的設(shè)計重點是用戶信息的可編輯性。查看和實時跟蹤客戶信息的功能被弱化了。
圖3
這3種不同的視覺呈現(xiàn)方案告訴了我們用戶的3個主要任務(wù):查看客戶聯(lián)系信息、管理和更新這些信息以及保留客戶的記錄。在每個方案中,視覺設(shè)計的基本元素是相同的:顏色、字體、漸變和圖片。
視覺設(shè)計可以做到的遠比美化界面多得多。它還肩負著傳遞產(chǎn)品核心功能的作用?!斑@是什么?”“怎么使用這些功能?”“怎樣更高效地使用?”
#p#做流行的東西就可以提高視覺設(shè)計的品質(zhì)
就像現(xiàn)在很流行的網(wǎng)站“make my logo bigger”所為客戶做的事一樣,產(chǎn)品經(jīng)理經(jīng)常會要求視覺設(shè)計師更多地關(guān)注排版中的某個細節(jié)。這些意見在幫助我們更容易抓住設(shè)計重點的同時,也暴露了對于視覺設(shè)計的另一個誤解:“為了改進這個網(wǎng)站的視覺效果,你要把這個做得大一下,這個字體用粗體,變成紅色!”
然而,頁面中任何元素的重要性如何是取決于它周圍環(huán)境的。比如,在一個頁面中放入一個大紅色的圓,它會很引人注目。如果把同一個圓放在10個粉色的圓邊上,它就不會那么醒目了。因此,決定某個元素的重要性要從設(shè)計的整體出發(fā)。我們不應(yīng)該只關(guān)注于某個元素來改進設(shè)計。如果這樣做的話,頁面的整體平衡就會被破壞,也會混淆頁面功能的層次關(guān)系。
如果你答應(yīng)每個利益關(guān)系人去逐個調(diào)整頁面的不同細節(jié),你每次的調(diào)整都要在用戶需求和產(chǎn)品需求之間做抉擇,然而,大多數(shù)情況下,兩種需求是無法同時得到滿足。圖4和圖5是兩個不同下載頁面的比較。火狐的頁面中有一個醒目的下載按鈕來觸發(fā)這個行為。而頁面中其他的元素,比如產(chǎn)品特性等就不會那么明顯。
圖4
圖5是Flock的下載頁面,有4個地方可被點擊來觸發(fā)下載的行為:頁面的右上角、左邊菜單的底部、新聞板塊的右上角和頁腳的位置。如果不是因為每個下載細節(jié)都被強化的話,F(xiàn)lock可能就會像火狐一樣——只有一個下載的按鈕。
圖5
我們從單個元素出發(fā)來評價視覺設(shè)計的效果
如果我們把關(guān)注的重點單單落在某個元素上而不是整體頁面的話,也會讓局部的調(diào)整很困難?!澳隳馨裭ogo做得大一些嗎?”“你能把標題的顏色變一下嗎?”“我們能在這里換一張圖片嗎?”…
這些零散的建議確實可以幫助我們更了解客戶的意圖,但客戶很少會關(guān)注到這對整體頁面設(shè)計的影響。換一個顏色可能需要重新定義頁面的色調(diào),設(shè)計師還需確保新的色調(diào)不會影響到用戶關(guān)注主要任務(wù)。換一張圖片可能意味著也要同時調(diào)整它周圍的元素,因為原先圖片制造的視覺焦點可能不復(fù)存在…等等。
一個最終的視覺設(shè)計稿應(yīng)該是建立在平衡和調(diào)整各個元素相互關(guān)系上的——同時傳遞產(chǎn)品的核心價值。所以,當設(shè)計師在調(diào)整了一個元素后,他還必須重新考慮頁面的布局以不破壞原有的平衡。孤立地完成一個個小設(shè)計,合在一起后并不能說這就是一個完整的設(shè)計。
互聯(lián)網(wǎng)產(chǎn)品的頁面元素尤其容易被獨立開來進行評估。因為它也許是分一個個單獨的模塊做測試的,團隊里的一個成員也可能認為我只要把自己的那部分給做好了,整體的項目也就做好了。圖6就表明了獨立設(shè)計可能造成的結(jié)果。
當我們單獨看頁面頭部ebay的logo、paypal提供安全保障的提示和正中照相機的促銷廣告是,都會覺得不錯。事實上,當這三者同時出現(xiàn)在一個頁面上時,他們更像在互相競爭,都過于搶眼了。
圖6
但愿以上這些實例已經(jīng)證明了視覺設(shè)計師在團隊中的價值。但要讓更多的團隊成員認同視覺設(shè)計不僅僅關(guān)乎到樣式、流行等,視覺設(shè)計師還需多提升自我經(jīng)驗,在項目初期就表明視覺設(shè)計對于整個項目的重要性。
《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
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計都有哪些新的趨勢?
延伸閱讀
- [2010-06-24 08:15:00] 視覺設(shè)計師成長的三個階段
- [2009-07-22 07:57:00] 什么是產(chǎn)品經(jīng)理不該考慮的?
- [2009-06-24 08:07:00] 為什么視覺設(shè)計師需要懂HTML
- [2009-06-19 08:29:00] 我們到底是不是產(chǎn)品經(jīng)理:給互聯(lián)網(wǎng)、軟件業(yè)者
- [2006-06-30 09:02:00] 如何引導(dǎo)自已成為一名網(wǎng)頁視覺設(shè)計師
- [2010-03-24 14:56:00] 設(shè)計的溝通與協(xié)作
- [2009-06-12 08:35:00] 交互設(shè)計師容易犯的錯誤:把自己禁錮在解決方
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
版面布局 青島海洋投資集團 SEO 力圖 robots 網(wǎng)站品牌 網(wǎng)站優(yōu)化 集團性網(wǎng)站 響應(yīng)式設(shè)計 青島網(wǎng)頁制作 高端輪胎網(wǎng)站設(shè)計 青島網(wǎng)頁設(shè)計 GOOGLE 網(wǎng)站動畫 青島做網(wǎng)站多少錢 微網(wǎng)站 網(wǎng)站規(guī)劃 網(wǎng)站推廣 H5定制設(shè)計 建站常識 搜索引擎蜘蛛 外貿(mào)網(wǎng)站設(shè)計 企業(yè)網(wǎng)站為什么要備案 企業(yè)網(wǎng)站設(shè)計 網(wǎng)站交互設(shè)計 青島高端網(wǎng)站建設(shè)公司哪家好 網(wǎng)站視覺 青島網(wǎng)站優(yōu)化 網(wǎng)站設(shè)計趨勢 網(wǎng)站設(shè)計