有關網頁設計的那些事兒

　　從這周起，將匯總QQ交流群中每天回復讀者的一個網頁設計方面的問題，按照一周的周期集結成文章，每周五發布在博客並共享在群中，供大家閱讀參考。相較於我們經常發布的設計教程，這樣的問答對於個人來說更有針對性，離我們日常的設計工作更近一些。我個人也有這樣的體會，有時會有一兩個問題長期停留在腦子裡，得不到解決，偶然的碰到剛好涉及到這方面的文章，會有一下子豁然開朗的感覺。所以這樣的形式也是非常有價值的。以下就是第1周的所有問題和答復，希望在設計對大家有所幫助。

　　一、質感的表現、作品好壞的評價(小李飛刀於8月24日星期五)

　　網站裡怎麼表現質感啊，很干淨，很震撼的感覺。‏望群主給解答，最好具體些，比如導航光亮的感覺有幾種表現方式，布局應該怎麼布局，請問怎麼知道自己做的作品是好還是不好，比如海報超市的海報。怎麼才能改進覺得自己的問題寬泛了，也可能是我沒說清楚。總之希望群主能聽到我的心聲，我遇到瓶頸了，不知道什麼是好作品，對於海報。

　　答復： 光亮感覺的設計看上去樣式很多，其實主要在於細節方面的變化，如果要問具體有多少種設計樣式的話，可以說多到無窮盡。關鍵是看元素的結構以及高光和陰影的變化。不同的元素結構和光線效果就能產生不同的元素樣式。隨便舉幾個例子來說明：

　　上面這四個元素，由於結構和光線的不同，差異應該說還是非常明顯的。具體在你的設計中應該使用哪種風格，哪種色彩，要和設計的信息內容相關聯，要能產生視覺上的聯想。舉個例子，如果你要設計一個關於汽車拉力賽的設計，很顯然，這種干淨而光亮的風格是不合適的，而更應該考慮粗糙、原始、自然的視覺感受，可能你需要用到的更多的某種粗糙的筆刷的效果，而不是上面的這些設計風格。

　　回答你的第二個問題，關於如何評價作品的好壞的問題。有人說這完全是仁者見仁，智者見智，完全沒有標准。我個人感覺這種說法只說對了某一部分，不能說概括了全部。好的設計應該是有他的某些標准的，例如，要展示的產品的特性或者表達的某種概念是否在設計中得到了較好的體現?重要的信息在視覺上得到了重要的體現而次要的信息做了次要的處理?色彩方案和產品是否契合?整個的設計氣氛夠不夠?我想對於這些問題，應該還是有一些比較一致的看法的。

　　二、資源分類、遇到瓶頸再提高(Weison於2012年8月27日星期一)

　　飛魚哥，您好!聽過你的幾次講座和看了你的BLOG，感覺你很專業。我是一名畢業兩個多月的設計專業類的學生，打算從事網頁設計相關的工作(界面設計)， 現在我想請教你幾個問題：

　　1.在日常生活中，我會搜集一些我覺得有意思的、很有質感的圖片和網站，但一多就不方便查找和管理，我想請教一下該如何分門別類呢?

　　2.我的PS技術已經很熟練了，但感覺設計出來的作品還不夠高質量，還不能給人一種心靈的攝服力，就是一種看完後會覺得”哇，真好”的感覺，我想請教一下，我該如何做才能這種效果呢?

　　3.我覺得我的設計思維還不夠開闊，雖然看過很多別人的設計，但一到了實際工作中，想來想去都只有加點漸變、投影、高光等，我該怎麼做才能做到有創意呢? 附上我的作品，期待你的指點，謝謝!

　　答復 ：我來逐條回答。

　　1、我個人經驗最好的分類方法是按照設計涉及的行業來分類，例如酒店、教育、設計工作室等，按照這些名字創建文件夾，將相關的設計作品分類放入。之前我還按照風格分過類，比如中國風、web2.0風格等等，但發現需要的時候不容易找到，因為我們想要參考借鑒別的的作品的時候的想法通常是”讓我看看別人做過的有關酒店的網站是什麼樣的?”所以這時我們只需要找到酒店的那個文件夾就行了，非常便捷。

　　2、其實這是所有設計師追求的目標，看過你給我發的個人作品後，我建議你在下面兩點上下功夫。首先是設計的細節。我們可以觀察到，所有讓我們在內心不由自主喊出”哇，真好!”的作品可以說在細節方面是無可挑剔的。拿你的作品來說，我個人覺得還需要在細節上有所提高，簡單 的舉兩個例子，比如：

　　中國海軍網中，項目列表和頁面左側的距離太小，讓頁面看上去滿滿當當，有些擁擠。文字的黑色和背景白色對比度太大，文字很多就會讓整個頁面顯得髒，建議在保證可閱讀性的前提下調成灰色。虛線分割線相較於文字來說明顯是次要的元素，所以不要做的這麼顯眼，再低調處理一下應該更好。

　　標題多樣化軍事任務左側的海浪圖標和標題內容契合度不夠，圖標本身也不夠明晰，打眼一看不知道是什麼東西，風格和整個頁面的風格也不太搭，所以你可以看到，單單一個圖標的使用就要考慮非常多的東西，而這些可以說都是細節，什麼時候這些問題都考慮到了，設計的水平也就提高了。另外，理論研究的背景色綠色和直擊前沿的背景色藍色接觸的地方看上去很模糊，讓人感覺設計上還不夠用心，在網頁設計中，像這些1像素的地方往往正是設計美感體現出來的地方。

　　細節考慮到了以後，接下來就是設計的氣氛了。氣氛是個很難說明白的東西，我個人的理解是，網頁設計整體的氣氛是靠各個元素視覺風格上的統一來營造的，要保證整體的氣氛足夠，必須要有設計方向上的統一。舉個例子，看下圖：

　　這是大家都很熟悉的荒野求生的主持人貝爾的一個專題頁面，大家可以觀察到，無論頁面上的哪個元素，寫在石頭上的導航、破舊磨損過的文字kv、粗糙筆觸畫出的內容分割線以及撕裂的紙張構成的內容背景在視覺風格上都是既有差別而方向上統一的。所以打開這個頁面，撲面而來的就是原始、自然、充滿野性的氣息了，這是我們在做設計中營造令人深入情景的值得注意的一個方面。

　　3、這個問題說明你做的、看的還不夠多，表現手法欠缺和不足。再拿上面的頁面來說，假如讓你做這個頁面，你能想到用寫在石頭上的導航、破舊磨損過的文字kv、粗糙筆觸畫出的內容分割線以及撕裂的紙張來去完成每一部分的信息內容，既讓他們發揮原有的功能性，還能保證視覺上的感受嗎?這是多多練習以後才能達到的水准，所以還是老話，多學、多做總沒錯。關於你說的加漸變、高光等手法、只是代表了一種類型的設計風格，看到上面充滿野性的設計頁面，我想我們一下就能明白自己的局限了。

　　三、利用css框架快速布局(ds於2012年8月28日星期二)

　　您好!老師。我想請教下老師，我div+css排版 框架如何才能搭的快一些，排版頁面也能迅速一些，您有沒有成熟的div+css的框架體系，為我們分享一些您的結構。同時有沒有好的建議可以給我!

　　答復：我自己對於用css排版沒有速度上的迫切要求，所以一直使用EditPlus手寫。如果你需要某種現成的框架來提升排版效率的話，可以試試 960網格系統，960網格系統不僅提供了設計時所需要的psd模板文件，而且對於前期的代碼也是支持的。使用框架雖然能夠提高前期設計和排版的效率，但是前提是要熟悉框架的結構和預設值。960網格系統基本的排版代碼如下：

　　

<div class="container_12"> /*表示960像素內總共有12欄*/
<div class="grid_7 prefix_1"> /*共占7欄，前面預留1欄 */
<div class="grid_2 alpha"> /*共占2欄，第一行的第一個類選擇器需要添加alpha類 */
</div>
<div class="grid_3">
</div>
<div class="grid_2 omega"> /*共占2欄，第一行的最後一個類選擇器需要添加omega類*/
</div>
</div>
<div class="grid_3 suffix_1"> /*共占7欄，後面留出1欄*/
</div>
</div>

 

　　四、有沒有所謂的設計行業規范?(LoidCo於2012年8月29日星期三)

　　想請教一下大家，在網頁設計中，有沒有所謂的設計行業規范呢?比如字體一般默認用宋體 雙數的字號，或者過去很多網站的logo設計都是包括圖標+中文+域名這樣的。而像下面的導航中選中狀態一般如何設計是符合行業規范的?像花瓣這樣 導航條中選中狀態用紅色 那如果我的標志色是藍色 用藍色是合適的嗎?

　　答復：我個人認為，不存在所謂的行業標准，怎麼設計都行，關鍵考量的點在於信息表達的是否清晰、用戶的體驗是否良好以及視覺