從和客戶溝通了解客戶需求到畫出草圖進行構思和創(chuàng)意，直至打開Photoshop完成整個的設計,，每一個網(wǎng)頁設計師都在每一個新的設計項目中不斷重復這個過程,。整個看上去規(guī)范而流程化的工作方式似乎按部就班就能夠順利拿到讓大家都滿意的結果，但其實在每一個步驟中都存在難度，某一個方面沒有做好,，可能就會影響到最終設計稿的質量,。因此在這篇文章中我就來結合自己的設計體會談談這其中存在的常見問題，以及我們應該如何有意識的避免或者解決它們,。

這篇文章中的內容我已經(jīng)在SDC的網(wǎng)頁設計講座中和大家談到,，這次算是對整個講座內容的總結和歸納，如果大家需要查看講座當天的文字記錄,，歡迎加飛魚的聲納的QQ群：233898966,。關于網(wǎng)頁設計中的問題，我總結了個人認為常見的六個,，下面一一道來,。

問題一 、和客戶溝通的不夠充分,，導致設計方向出現(xiàn)偏差,。

這個問題是在設計流程中出現(xiàn)最多,，也最容易導致客戶和設計師產(chǎn)生矛盾的問題,。最終的結果是客戶覺得怎么修改設計都不能讓自己滿意，而設計師卻不勝其煩,，認為客戶太難說話,，原因其實就出在雙方的溝通上。

作為客戶來說,，很多時候他們對于期望的設計產(chǎn)品腦子里往往只有模糊的概念,，只能交代給設計師一個過于粗略的設計方向，甚至有些客戶提出”先做一稿出來我再看”的要求,。遇到這種情況,，設計師要清楚客戶自己的設計需求是不明晰的，而作為設計師來說,，這時就需要積極地引導客戶，使他們明晰設計需求,，從而避免由于雙方未在設計目標和期許上達成一致,，造成設計方向上出現(xiàn)偏差，而導致設計中大范圍,、不斷的修改設計稿,，甚至一遍一遍的推倒重來的結果。

要使雙方對最終的設計都滿意,，就需要盡可能詳細的溝通,，客戶和設計師之間理解程度越高，最后達成的一致性也越高，這兩者是呈正相關的關系,。要做到這一點,，我個人的方法是在溝通的環(huán)節(jié)設計系統(tǒng)的調查問卷讓客戶作答，以幫助客戶梳理,、明晰設計需求,。下面是我經(jīng)常使用的調查問卷內容，其中需要客戶作答7個問題,，這些問題基本可以幫助客戶和設計師明確設計方向,，你也可以依據(jù)在和客戶溝通中的具體情況修改或者完善這些問題。

1,、當訪問者訪問你的網(wǎng)站的時候,，你希望它們做什么？（比如購買某種產(chǎn)品,、服務,，或者展示企業(yè)的形象等）

2、網(wǎng)站的主體用戶是哪部分人群,？（白領年輕女性,、有某方面需求的老年人等）

3、網(wǎng)站的整體風格是什么,？當訪問者進入你的網(wǎng)站,，你希望他們有什么感覺？不希望他們有什么感覺,？

4,、舉幾個你喜歡的網(wǎng)站，并說明原因,；例舉幾個你討厭的網(wǎng)站,，也說明原因。（請將網(wǎng)站鏈接或者截圖粘貼在下方）

5,、網(wǎng)站欄目有哪些,？并提供具體信息內容（可粘貼在下方）

6、請?zhí)峁┚W(wǎng)站設計的資料,，包括logo,，公司圖片，產(chǎn)品圖片等（打包以附件形式發(fā)送至設計師郵箱）

7,、請?zhí)峁┠穆?lián)系方式,。（QQ、手機或者郵箱）

問題二：跳過網(wǎng)站功能及信息架構上的研究,，直接開始視覺創(chuàng)作,。

網(wǎng)站的功能和信息架構是網(wǎng)站的核心，一個網(wǎng)站不是單純的讓訪問者去感受視覺上的美觀，美觀永遠是第二位的,，而功能性卻是第一位的,。一個企業(yè)網(wǎng)站是為了展示企業(yè)的形象、售賣企業(yè)的產(chǎn)品和服務,；一個門戶網(wǎng)站是為了更好的提供信息內容,，一個個人博客是為了分享個人的觀點，樹立個人品牌等等,，保證了這些功能更好的實現(xiàn)了之后才應該去考慮視覺上是否美觀的問題,。

我在之前的一篇文章《從千鳥志看網(wǎng)頁設計中的功能性》中分析過千鳥的個人博客在功能性和用戶體驗方面的優(yōu)點，雖然初次打開該博客并不會被它看上去似乎沒怎么設計的灰白界面所吸引,，但這個網(wǎng)站良好的用戶體驗卻一定會讓你記憶深刻,。

更重要的是，網(wǎng)站功能以及它的信息架構對于視覺是有非常重要的影響的,，這點我在《網(wǎng)頁核心內容對視覺表現(xiàn)的影響》這篇文章中有較為詳細的論述,，在這里就不再展開了。

問題三,、缺乏對網(wǎng)站整體風格的思考和把握,，做到哪里算哪里。

這個問題也非常常見,，以下是一個設計師發(fā)給我的問題及我的答復,，應該說非常典型的反映了這個問題,。

“想請教你一下,，一個學校的網(wǎng)站，客戶說要做活潑一點,，怎么搞呀,？我設計了一個頭部，我發(fā)給你看一下??！指點一下 但是下面我就不知道怎么布局了，現(xiàn)在頭都想大了,?！?/p>

答復：這是一個沒有系統(tǒng)的考慮整體風格而急于動手的例子。問題主要由以下幾個方面：

一,、布局上,，Banner割裂的邊緣限制了視線的拓展，顯得死板而不夠透氣,。其他元素也是大框套小框的思路,。總體的布局思路沒有逃脫條條框框的限制，看得出來,，整個設計是思路沒有打開卻急于動手的表現(xiàn),。要做到活潑的設計，不是用一張現(xiàn)成的關于兒童的圖片放上去就行了,，要讓個的設計元素往這個方向走,，比如布局，比如色彩,，比如質感,，比如插圖和圖標的使用，比如字體的選擇等等,，所以你的問題是完全沒有系統(tǒng)的思考這些問題,，還沒找到答案就急于往前走，結果肯定是剛剛開始就感覺無所適從,。

二,、再來說說具體的問題，Banner的設計在整個頁面中通常起到非常重要的作用,，是視覺的焦點,，先不說你選的這個圖片方向對不對，但這個設計看上去過于小氣,，原因是圖片中的元素視覺比重都差不多,，沒有重點，沒有主次,。其次是Logo文字以及宣傳語文字的設計,，感覺太散、太單薄,，需要加強他們的視覺比重和氣氛感受,。Banner底部的弧形邊緣不僅沒有起到給整個氣氛加分的效果，反而割裂了Banner的設計,，看上去很不美觀,。

如何避免盲目開始，途中無從下手的問題出現(xiàn),？很簡單,，畫草圖。雖然我個人有時候也會省略畫圖的步驟,，但每次至少會在 PS 中做一個主頁的設計方案,，其中包括需要放置的信息內容、排版,、色彩方案以及設計方案的說明文字,。但我發(fā)現(xiàn)相較于紙和筆來說,，這樣的方式還是限制了創(chuàng)意的拓展。所以還是強烈建議大家在開始設計之前畫草圖,。很難想象,，不通過畫草圖的方式能做出來下面的設計效果。

但是紙和筆的方式也有它的缺陷就是在設計排版方面不能精確的定位元素的空間,。所以為了彌補這個缺憾,，建議大家使用 960 像素網(wǎng)格系統(tǒng)的草圖稿紙。紙和筆的自由保證了創(chuàng)意的拓展,，而不用糾纏于實現(xiàn)方面的技術問題,。

下載

另外，在平時的學習積累中,，多從整體風格上分析優(yōu)秀的設計作品是如何考慮和實現(xiàn)的,，可以嘗試從以下幾個方面分析網(wǎng)站風格：一、概念元素：背景,、修飾圖形等,；二、具象元素：文字,、照片,、插圖、圖標圖形,；三,、關系元素：方向、位置,、空間,、重心；四,、交互方式：節(jié)奏,、運動方式；五,、色彩方案。

問題四 ,、設計過程中遇到困難,，隨意調整設計方向。

畫好了草圖就要按照設計方向堅決執(zhí)行,，這樣才能保證前期的創(chuàng)意階段的工作不被浪費,。很多設計師前期的創(chuàng)意構思都很有想法，但是一旦開始設計,，途中遇到尋找素材或者技術方面的困難,，或者突然發(fā)現(xiàn)某一個素材很不錯,，很漂亮，馬上拋棄前面的整個創(chuàng)意,，開辟一條新路從頭開始,，但往往做到半中間就再做不下去了，導致設計總是半途而廢,，情緒上不斷受挫,，焦躁不堪。而我們如果看過高手的設計過程,，比如文子的光大銀行的設計視頻,，我們就會發(fā)現(xiàn)高手從來都不輕易的改變已經(jīng)設定好的設計方向，并且總能把我們看來完全用不著的素材變廢為寶,，從而擁有化腐朽為神奇的本事,。千萬不要花費大量時間去尋找完美的、拿來不用調整就能用的設計素材,，能找到這樣的素材的幾率比中彩票還要低,，而是要不斷提高我們將看上去和整體設計毫不搭邊的素材融合進整體設計的能力。

問題五 ,、細節(jié)不夠講究,，顯得粗糙。

一些設計師給我發(fā)來個人作品讓我給說說建議,，我發(fā)現(xiàn)其中共同存在的問題就是設計中細節(jié)做的不好,。漸變和高光過于生硬、陰影的距離和不透明度太高,、對齊方式偏差幾個像素,、上下左右邊距距離太小、元素和背景的反差不夠造成元素清晰度不夠等幾個問題是常見的設計毛病,。這些問題雖然也涉及到技術的問題,，但是最重要的我認為還是用心不夠、認為做到差不多就行了的態(tài)度問題,。這里我向大家推薦Dribbble 和PremiumPixels這兩個網(wǎng)站,，這其中的設計作品無論哪一個細節(jié)都是非常完美、無可挑剔的,，下面是我隨手從這兩個網(wǎng)站中拿出來的作品,，大家應該能從這里理解網(wǎng)頁設計就是細節(jié)的藝術這句話的含義。

問題六 ,、技術不過關,，創(chuàng)意無法得到實現(xiàn)。

這個無需多說,，只有通過大量的設計和練習才能盡可能多的掌握具體的技術,。但是無論是跟著網(wǎng)上的設計教程學習,，還是通過研究別人的PSD文件也好，不能做過一遍就過去了,，拿我之前翻譯的《在photoshop中制作一個飄浮于空中的茂盛的”樹屋”》這篇文章來說,，你需要通過這篇教程掌握的是如何處理手頭的素材，將其融合于整體的場景之中的思路的方法,，看看高手是如何通過使用調整圖層,、自由變換、色彩范圍選擇等一系列的技術去實現(xiàn)需要的效果,，而不僅僅是按照教程做一遍就完了,，下次遇到需要自己動手創(chuàng)建場景的時候依然無所適從。如果你已經(jīng)有了一定的PS基礎,，我建議多練習些圖標和場景的創(chuàng)建,，例如下面這個精致的西紅柿圖標和幾個場景的創(chuàng)建，認真研究,，你一定能學到很多東西,。

原文地址：http:///web-design-process-analysis-and-recommendations/