網(wǎng)頁設(shè)計核心內(nèi)容對視覺表現(xiàn)的影響

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

     一、質(zhì)感的表現(xiàn)、作品好壞的評價

     網(wǎng)站里怎么表現(xiàn)質(zhì)感啊，很干凈，很震撼的感覺。‏望群主給解答，最好具體些，比如導(dǎo)航光亮的感覺有幾種表現(xiàn)方式，布局應(yīng)該怎么布局，請問怎么知道自己做的作品是好還是不好，比如海報超市的海報。怎么才能改進覺得自己的問題寬泛了，也可能是我沒說清楚�？傊�希望群主能聽到我的心聲，我遇到瓶頸了，不知道什么是好作品，對于海報。

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

     上面這四個元素，由于結(jié)構(gòu)和光線的不同，差異應(yīng)該說還是非常明顯的。具體在你的設(shè)計中應(yīng)該使用哪種風(fēng)格，哪種色彩，要和設(shè)計的信息內(nèi)容相關(guān)聯(lián)，要能產(chǎn)生視覺上的聯(lián)想。舉個例子，如果你要設(shè)計一個關(guān)于汽車拉力賽的設(shè)計，很顯然，這種干凈而光亮的風(fēng)格是不合適的，而更應(yīng)該考慮粗糙、原始、自然的視覺感受，可能你需要用到的更多的某種粗糙的筆刷的效果，而不是上面的這些設(shè)計風(fēng)格。

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

     二、資源分類、遇到瓶頸再提高（Weison于2012年8月27日星期一）

     您好！聽過你的幾次講座和看了你的BLOG，感覺你很專業(yè)。我是一名畢業(yè)兩個多月的設(shè)計專業(yè)類的學(xué)生，打算從事網(wǎng)頁設(shè)計相關(guān)的工作（界面設(shè)計）， 現(xiàn)在我想請教你幾個問題：

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

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

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

     答復(fù) ：我來逐條回答。

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

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

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

     多樣化軍事任務(wù)左側(cè)的海浪圖標(biāo)和標(biāo)題內(nèi)容契合度不夠，圖標(biāo)本身也不夠明晰，打眼一看不知道是什么東西，風(fēng)格和整個頁面的風(fēng)格也不太搭，所以你可以看到，單單一個圖標(biāo)的使用就要考慮非常多的東西，而這些可以說都是細節(jié)，什么時候這些問題都考慮到了，設(shè)計的水平也就提高了。另外，理論研究的背景色綠色和直擊前沿的背景色藍色接觸的地方看上去很模糊，讓人感覺設(shè)計上還不夠用心，在網(wǎng)頁設(shè)計中，像這些1像素的地方往往正是設(shè)計美感體現(xiàn)出來的地方。
        細節(jié)考慮到了以后，接下來就是設(shè)計的氣氛了。氣氛是個很難說明白的東西，我個人的理解是，網(wǎng)頁設(shè)計整體的氣氛是靠各個元素視覺風(fēng)格上的統(tǒng)一來營造的，要保證整體的氣氛足夠，必須要有設(shè)計方向上的統(tǒng)一。舉個例子，看下圖：

<img border="0" alt="企業(yè)網(wǎng)站模板" src="http://img.iisp.com/image/20130305/20130305144140_26578.png" data-ke-src="http://img.iisp.com/image/20130305/20130305144140_26578.png">

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

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

     三、利用css框架快速布局

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

     答復(fù)：我自己對于用css排版沒有速度上的迫切要求，所以一直使用EditPlus手寫。如果你需要某種現(xiàn)成的框架來提升排版效率的話，可以試試企業(yè)網(wǎng)站模板，企業(yè)網(wǎng)站模板不僅提供了設(shè)計時所需要的psd模板文件，而且對于前期的代碼也是支持的。使用框架雖然能夠提高前期設(shè)計和排版的效率，但是前提是要熟悉框架的結(jié)構(gòu)和預(yù)設(shè)值。960網(wǎng)格系統(tǒng)基本的排版代碼如下：

<div class="container_12"> /*表示960像素內(nèi)總共有12欄*/
<div class="grid_7 prefix_1"> /*共占7欄，前面預(yù)留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>

     四、有沒有所謂的設(shè)計行業(yè)規(guī)范？

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

     答復(fù)：我個人認為，不存在所謂的行業(yè)標(biāo)準，怎么設(shè)計都行，關(guān)鍵考量的點在于信息表達的是否清晰、用戶的體驗是否良好以及視覺上舒服不舒服。所謂的設(shè)計規(guī)范，也只能說是大家常用，時間久了似乎就成了設(shè)計的規(guī)矩了，實際上這些所謂的設(shè)計規(guī)矩隨時能夠打破，比如大家在使用中文字體時，用12像素和14像素的文字，原因是這兩個字體大小既保證了可讀性看上去還很美觀，但是如果作為標(biāo)題來說，14像素大小的文字有時也顯得過于小了，這時候22或者24像素的大小也許更為適合。再比如黑體相較于宋體很少用在正文中，原因也是一般正文14像素大小的黑體可讀性不如宋體好，但是如果放在設(shè)計某些宣傳口號中，黑體也許更為合適。所以要視情況來定，既沒必要刻意的去打破這些習(xí)慣，更不要被這些習(xí)慣所束縛。對于英文來說，網(wǎng)頁設(shè)計中常會涉及到非襯線字體中的Arial，Tahoma，Verdana以及襯線字體中的Georgia字體，這些都是會經(jīng)常用到的字體。

     五、網(wǎng)站信賴感、調(diào)整設(shè)計中焦躁情緒

     1、在設(shè)計中怎么樣給人安全感？比如：網(wǎng)銀/支付寶支付頁面？色彩搭配還是構(gòu)圖堅固？

     2、怎么引導(dǎo)用戶更有繼續(xù)觀看的欲望？或者說怎么在構(gòu)圖中設(shè)置懸念？

     3、怎么調(diào)節(jié)關(guān)于設(shè)計倦怠的情緒？處在這種時期總會莫名狂躁…

     答復(fù)：第一個問題。你想說的問題應(yīng)該是一個網(wǎng)站如何給訪問者以信賴感？讓訪問者放心的在其上填寫個人信息、進行資金方面的敏感信息的操作？這的確是個問題。但是影響到訪問者對一個網(wǎng)站的信賴感的因素非常多，你說的視覺方面因素例如色彩搭配、構(gòu)圖等因素只是其中的一個方面，而且可能還一個小的方面。但這并不是說視覺方面不重要，想想一個面目猙獰、飄滿廣告的網(wǎng)站能讓人在上面進行敏感信息的操作嗎？但是下面的因素也許能讓我們產(chǎn)生更多的信賴感：

     1、品牌的知名度。我個人的網(wǎng)上賬戶操作基本上都是用支付寶來完成，但是哪天蘋果或者微軟推出本地的第三方支付服務(wù)，我想我是會放心的嘗試一下的。

     2、優(yōu)質(zhì)的服務(wù)�？旖轃o障礙的支付體驗，快速的提現(xiàn)、轉(zhuǎn)賬、信用卡還款等功能。

     3、良好的用戶體驗。這體現(xiàn)在網(wǎng)站的每一個細節(jié)，比如，在填寫信用卡號時，將信用卡號以四位一組自動斷開，或者是清晰簡潔的表單說明文字等等，往往是網(wǎng)站的細節(jié)最能留住人。

     4、舒服的視覺感受。這就是你上面提到的色彩搭配、構(gòu)圖等等要素。

     一個好的網(wǎng)站要做的東西很多，視覺方面的東西是我們最直觀感受到的，但相較于網(wǎng)站的信息以及功能來講，卻不是最重要的方面，而這些東西才是我們最應(yīng)該關(guān)注的地方。

     第二個問題。我個人覺得沒有那么玄，我做東西從沒有在構(gòu)圖中設(shè)置懸念的意識，呵呵，可能水平還不夠，我覺得東西做好了用戶自然有觀看的欲望。

     第三個問題。這應(yīng)該是一個比較普遍的問題，大家在做設(shè)計的過程中應(yīng)該都有這種感受，尤其是任務(wù)重、時間緊的情況下，更是焦躁不堪，表現(xiàn)在設(shè)計上就是考慮不充分，東抓一把，西抓一把，剛冒出一個想法，趕緊就去實施，沒做兩步，只要一遇到需要耐心慢慢去做的地方，馬上改換另外一套方案，做兩步，又感覺不行，越做越焦躁、越焦躁越做不好，成了惡性循環(huán)。為避免這種情況，我個人覺得在無論時間多緊，還是不要急于動手，前期的考慮、草圖絕對是必要的，一定要克制自己打開PS的欲望，一點一點做并且按照考慮好的方向堅決執(zhí)行，我想這樣既能保證作品的質(zhì)量，也能讓設(shè)計過程沒那么煎熬，真的焦躁了，歇一歇，干點別的也是一個好方法。