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

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

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

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

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

  1 、當訪問者訪問您的網站的時候,您希望它們做什麼?(比如購買某種產品、服務,或者展示企業的形象等)

  2 、網站的主體多使用者是哪部分人群?(白領年輕女性、有某方面需求的老年人等)

  3 、網站的整體風格是什麼?當訪問者進入您的網站,您希望他們有什麼感覺?不希望他們有什麼感覺?

  4 、舉幾個您喜歡的網站,並說明原因;例舉幾個您討厭的網站,也說明原因。(請將網站連結或者截圖貼上在下方)

  5 、網站欄目有哪些?並提供具體資訊內容(可貼上在下方)

  6 、請提供網站設計的資料,包括 logo,公司圖片,產品圖片等(打包以附件形式傳送至設計師郵箱)

  7 、請提供您的聯絡方式。(QQ 、手機或者郵箱)

  問題二:跳過網站功能及資訊架構上的研究,直接開始視覺創作。

  網站的功能和資訊架構是網站的核心,一個網站不是單純的讓訪問者去感受視覺上的美觀,美觀永遠是第二位的,而功能性卻是位的。一個企業網站是為了展示企業的形象、售賣企業的產品和服務;一個入口網站是為了更好的提供資訊內容,一個個人部落格是為了分享個人的觀點,樹立個人品牌等等,保證了這些功能更好的實現了之後才應該去考慮視覺上是否美觀的問題。

  我在之前的一篇文章《從千鳥志看網頁設計中的功能性》中分析過千鳥的個人部落格在功能性和多使用者體驗方面的優點,雖然初次開啟該部落格並不會被它看上去似乎沒怎麼設計的灰白介面所吸引,但這個網站良好的多使用者體驗卻一定會讓您記憶深刻。

  問題三、缺乏對網站整體風格的思考和把握,做到哪裡算哪裡。

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

  “想請教您一下,一個學校的網站,客戶說要做活潑一點,怎麼搞呀?我設計了一個頭部,我發給您看一下啊!指點一下但是下面我就不知道怎麼佈局了,現在頭都想大了。”

  答覆:這是一個沒有系統的考慮整體風格而急於動手的例子。

  問題主要由以下幾個方面:

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

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

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

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

  另外,在平時的學習積累中,多從整體風格上分析優秀的設計作品是如何考慮和實現的,可以嘗試從以下幾個方面分析網站風格:一、概念元素:背景、修飾圖形等;二、具象元素:文字、照片、插圖、圖示圖形;三、關係元素:方向、位置、空間、重心;四、互動方式:節奏、運動方式;五、色彩方案。

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

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

  問題五、細節不夠講究,顯得粗糙。

  一些設計師給我發來個人作品讓我給說說建議,我發現其中共同存在的問題就是設計中細節做的不好。漸變和高光過於生硬、陰影的距離和不透明度太高、對齊方式偏差幾個畫素、上下左右邊距距離太小、元素和背景的反差不夠造成元素清晰度不夠等幾個問題是常見的設計毛病。這些問題雖然也涉及到技術的問題,但是重要的我認為還是用心不夠、認為做到差不多就行了的態度問題。

  問題六、技術不過關,創意無法得到實現。

  只有透過大量的設計和練習才能儘可能多的掌握具體的技術。但是無論是跟著網上的設計教程學習,還是透過研究別人的 PSD 檔案也好,不能做過一遍就過去了。一般來說我們經常需要需要透過教程掌握的是如何處理手頭的素材,將其融合於整體的場景之中的思路的方法,看看高手是如何透過使用調整圖層、自由變換、色彩範圍選擇等一系列的技術去實現需要的效果,而不僅僅是按照教程做一遍就完了,下次遇到需要自己動手建立場景的時候依然無所適從。如果您已經有了一定的 PS 基礎,應該多練習些圖示和場景的建立,認真研究,您一定能學到很多東西。