網(wǎng)頁設(shè)計(jì)流程中常見問題分析及建議

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

問題一 、和客戶溝通的不夠充分，導(dǎo)致設(shè)計(jì)方向出現(xiàn)偏差。

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

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

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

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

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

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

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

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

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

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

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

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

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

這個(gè)問題也非常常見，以下是一個(gè)設(shè)計(jì)師發(fā)給我的問題及我的答復(fù)，應(yīng)該說非常典型的反映了這個(gè)問題。

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

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

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

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

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

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

下載

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

問題四 、設(shè)計(jì)過程中遇到困難，隨意調(diào)整設(shè)計(jì)方向。

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

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

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

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

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