精品網(wǎng)頁設(shè)計(jì)欣賞及評(píng)析

1、精品網(wǎng)頁設(shè)計(jì)欣賞及評(píng)析1. 商業(yè)清爽型 國(guó)外現(xiàn)在較流行的風(fēng)格，國(guó)內(nèi)也有不少模范者，可是往往在色彩調(diào)配和細(xì)節(jié)方面有所欠缺。 圖一 圖二 特點(diǎn)：利用方框構(gòu)圖，簡(jiǎn)介明了，圖片一般大面積出現(xiàn)，但圖片一定要結(jié)構(gòu)清晰，色彩鮮明色彩方面多使用大面積淺灰度和白色，以襯托 logo 和配圖的色彩鮮艷，配以高明度小小色塊（如導(dǎo)航處）。因?yàn)榻Y(jié)構(gòu)構(gòu)圖簡(jiǎn)單，細(xì)節(jié)方面一定要講究，不適宜有過于復(fù)雜的logo 和點(diǎn)綴出現(xiàn)，多用簡(jiǎn)潔明快的幾何圖形結(jié)合。 一般此類風(fēng)格背景如果是彩色，都會(huì)是低純度低亮度彩色，以反襯主題圖片和 logo。在大面積背景壓住的情況下，圖片明度越高越爽。畫面應(yīng)該有一個(gè)主色調(diào)。注意圖二左下腳的 logo，有

2、意與背景色調(diào)相同，以免搶了視覺中心，這是很多人常犯的錯(cuò)誤。 圖三 注意細(xì)節(jié)圖案的使用，這是大多數(shù)設(shè)計(jì)者弱點(diǎn)所在，細(xì)直線條與箭頭、方塊、園點(diǎn)不要亂用，每個(gè)點(diǎn)的存在你都要有理由。 2. 商業(yè)門戶型 現(xiàn)在的商業(yè)門戶網(wǎng)站在幾乎都是三欄，上面是 logobanner 。其實(shí)門戶網(wǎng)站因?yàn)樾畔⒋螅骂l繁，在設(shè)計(jì)時(shí)應(yīng)該充分考慮可擴(kuò)展性，我認(rèn)為可以充分利用下拉特性，充分考慮左上位置的設(shè)計(jì)，主體爭(zhēng)取結(jié)構(gòu)明了簡(jiǎn)潔。下面我們一起來看看幾個(gè)門戶網(wǎng)站的設(shè)計(jì)。 圖四所示的這個(gè)網(wǎng)站是卡通網(wǎng)站，廣告欄很大，但通過精心設(shè)計(jì)使之醒目而不凌亂。圖片統(tǒng)一使用斜角，統(tǒng)一又不呆板。 圖五所示網(wǎng)站使用曲線與直線的結(jié)合，藍(lán)灰色主色，畫面沉靜

3、而不臟，這里的色彩難度很高，需要細(xì)心調(diào)試，色塊分割，簡(jiǎn)單明了。 圖六所示網(wǎng)站主題部分簡(jiǎn)之又簡(jiǎn)，在背景上做足了功夫，輕輕的灰度變化，是現(xiàn)在國(guó)際流行的風(fēng)格，高雅，不花，充分烘托主體。 圖四 圖五 圖六 3. IT 企業(yè)實(shí)用模板 圖七 圖八 圖九 圖十 4. 時(shí)尚企業(yè)網(wǎng)站模板 圖十一 圖十二 5. 主題型實(shí)用網(wǎng)站模板 圖十三 上圖所示模板其logo 和圖片以及其綠色的主色調(diào)與動(dòng)物園的環(huán)境和業(yè)務(wù)非常貼切。 美食業(yè)務(wù)主題網(wǎng)站，布局合理大方，整體設(shè)計(jì)“色香味”俱全，主題鮮明，功能齊全。6. 學(xué)校教育型模板 圖十四 圖十五 7. 兒童主題型網(wǎng)站模板 圖十六 圖十七 圖十八 圖十九 8. 個(gè)人個(gè)性化網(wǎng)站模板以

4、下的10個(gè)網(wǎng)頁設(shè)計(jì)作品是ThemeForest上最受歡迎的優(yōu)秀企業(yè)網(wǎng)站設(shè)計(jì)模板的其中一小部分。它們風(fēng)格低調(diào)沉穩(wěn)，幾乎只使用黑白灰三種色彩，卻不雷同，并且在細(xì)節(jié)上都非常講究。ThemeForest是非常值得網(wǎng)頁設(shè)計(jì)師關(guān)注的高品質(zhì)網(wǎng)站，其上的幾乎每一個(gè)設(shè)計(jì)模板都稱得上是杰出的設(shè)計(jì)作品，值得我們認(rèn)真揣摩學(xué)習(xí)。這篇文章里我將根據(jù)自己的觀點(diǎn)對(duì)這10個(gè)設(shè)計(jì)模板的設(shè)計(jì)思路和方法做一總結(jié)，列出其中的要點(diǎn)，挖掘值得我們?cè)诰W(wǎng)頁設(shè)計(jì)中值得借鑒的東西，希望能夠?qū)Υ蠹矣兴鶐椭?。一、設(shè)計(jì)的目的是為了信息更好的傳播1、整體風(fēng)格感覺很干凈，原因是整個(gè)頁面近乎于白色，只用非常亮的不同層次的灰色來區(qū)分各信息區(qū)域。主視覺背景應(yīng)用的

5、灰色漸變顏色最暗的值也才是#F4F4F4。而灰色之上用高飽和度和亮度的成色做跳出色，不至于讓頁面看上去灰灰的一片。下面的截圖顯示這個(gè)設(shè)計(jì)中使用的灰色是非常亮的，而跳出的橙色基本上使用了最大的色值。2、整個(gè)頁面沒有過多的設(shè)計(jì)元素出現(xiàn)，導(dǎo)航?jīng)]有設(shè)計(jì)導(dǎo)航條，”Read more”也沒有做成按鈕的樣式。只是將文字、圖片放置于頁面上，通過元素之間的間距、文字大小、文字顏色來組織信息，尤其是各部分信息間較寬的留白，讓頁面也更有透氣感。從這個(gè)設(shè)計(jì)我們可以了解到設(shè)計(jì)的核心目的在于為功能性加分，作為網(wǎng)頁設(shè)計(jì)來說，就是更好的傳遞信息，就像百度聯(lián)盟用戶體驗(yàn)中心的主視覺上寫的”讓復(fù)雜的內(nèi)容通過設(shè)計(jì)的手段達(dá)到最優(yōu)的傳播

6、性?！倍覀兂３榱藛渭兊乃^”酷”和”炫”的設(shè)計(jì)，通過深入的分析這個(gè)設(shè)計(jì)案例可以得到反思。3、整個(gè)頁面為通欄設(shè)計(jì)，內(nèi)容居中于930像素范圍之內(nèi)。這樣的設(shè)計(jì)去除了左右的邊框，更有透氣感，是企業(yè)網(wǎng)站設(shè)計(jì)中常用的布局方法。4、設(shè)計(jì)中出彩的地方在于主視覺文案部分的大尺寸的字體，讓整篇文字大小看上去差不多的頁面有了視覺中心和層次感。5、亮度較高或者白色背景下圖片邊框的設(shè)計(jì)可以作為參考的設(shè)計(jì)樣式。二、傳統(tǒng)頁面式居中布局1、和前一個(gè)設(shè)計(jì)類似，這個(gè)設(shè)計(jì)中的色彩思路是，整個(gè)設(shè)計(jì)灰度偏暗并且各層次之間反差較小，營(yíng)造一種平靜的基調(diào)，用亮度和飽和度較高的色彩跳出，打破整體灰色的沉悶，也讓使用了色彩的信息文字更為醒目

7、。2、主視覺部分幻燈片的樣式，包括當(dāng)前圖片狀態(tài)（左下角小圓圈）、幻燈切換按鈕（左右箭頭）以及文案的表現(xiàn)方式可以作為一種設(shè)計(jì)方式參考。3、行為請(qǐng)求按鈕區(qū)域（Buy Now）功能上的重要性在視覺設(shè)計(jì)上也得到了突出，區(qū)別于其他區(qū)域，這部分的背景添加了斜紋的材質(zhì)，色彩上也更深一些。其他區(qū)域，例如下面的Portfolio和Our Service信息區(qū)域部分用1像素的線隔開，既體現(xiàn)出隸屬于不同的區(qū)域，又不割裂個(gè)區(qū)域之間的關(guān)系。4、深色背景下的圖片邊框設(shè)計(jì)方式很簡(jiǎn)單，加一個(gè)亮度稍高一點(diǎn)的色彩就可以了。5、信息關(guān)系差別較大的區(qū)域，例如底部的最新評(píng)論、最新小工具、關(guān)于我們以及聯(lián)系表單部分用不同灰度的背景色彩區(qū)分

8、開，并且在邊緣用較寬的線條分割和過度。此處的圖片邊框使用了較背景更深的顏色，但添加了1像素亮度高于背景的外邊框。從整體上看，此區(qū)域的重要性較低，所以你可以觀察到聯(lián)系表單的文字框并沒有添加內(nèi)陰影，提交按鈕沒有應(yīng)用任何圖層樣式，這就是功能性在視覺設(shè)計(jì)上的表現(xiàn)。6、白色的設(shè)計(jì)方案比深灰色的設(shè)計(jì)看上去更干凈清爽，導(dǎo)航和行為請(qǐng)求部分用亮度較高的灰色區(qū)別，同樣和背景顏色差別不大，讓頁面看上去更為清爽干凈。三、理性而硬朗的設(shè)計(jì)1、相較于前面的灰色設(shè)計(jì)來講，這種充滿了漸變光和1像素高光線條的設(shè)計(jì)看上去理性而硬朗，原因是漸變類似于金屬的表面光澤，而90度直角和1像素高光的大量出現(xiàn)好像元素的邊緣鋒利到能夠劃破手指

9、一般。前面兩個(gè)設(shè)計(jì)風(fēng)格簡(jiǎn)潔所以不會(huì)出現(xiàn)過多的設(shè)計(jì)元素，而這個(gè)設(shè)計(jì)模板相較之下就要濃烈一些，所以無論是滑動(dòng)展示區(qū)、圖片邊框還是”Read more”按鈕都有更多的設(shè)計(jì)在里面。所以在設(shè)計(jì)中需要把握一個(gè)整體的設(shè)計(jì)方向，才能對(duì)于如何處理各個(gè)頁面元素做到心中有數(shù)。2、和前面的案例相同，不同信息區(qū)域用不同顏色做一劃分也在這個(gè)設(shè)計(jì)中得到了體現(xiàn)，附屬導(dǎo)航和聯(lián)系信息位于頁面的最頂部，屬于第一個(gè)部分，也是色彩最暗的區(qū)域。Logo、主導(dǎo)航、主視覺屬于同一個(gè)信息區(qū)域，是色彩最濃烈和醒目的區(qū)域。原因是這部分在顯示器中處于第一屏的位置，要有一下子抓住人的效果。高亮的灰色區(qū)域是頁面的主體部分，是主要的信息閱讀區(qū)域，要給人柔

10、和舒服的閱讀感受；頁腳以及版權(quán)信息部分是最后一個(gè)區(qū)域，色彩和前面的Logo、主導(dǎo)航以及主視覺部分相呼應(yīng)，也起到視覺平衡的作用。3、每一個(gè)信息區(qū)域的邊緣都有非常清晰的1像素高光，Logo、主導(dǎo)航以及主視覺部分的背景也不是簡(jiǎn)單的顏色填充而已，而是疊加了類似于光線的效果，主視覺以及下面圖片邊框底部?jī)蓚?cè)的陰影讓內(nèi)容框有了中間突起的感覺。圖片邊框的效果更能夠吸引人，頁腳部分的背景也疊加了漸變，這些都給整個(gè)設(shè)計(jì)增加了質(zhì)感。3、和第一個(gè)設(shè)計(jì)一樣，這個(gè)案例依然延續(xù)了通欄的設(shè)計(jì)布局。四、黑白世界1、企業(yè)網(wǎng)站模板從整體上來講布局中規(guī)中矩，變化不多，色彩是比較低調(diào)的，以白色、灰色、以及飽和度和亮度較低的大塊色彩應(yīng)用

11、居多，整體風(fēng)格平靜而簡(jiǎn)約。這個(gè)設(shè)計(jì)也延續(xù)了這種設(shè)計(jì)風(fēng)格。2、和上一個(gè)設(shè)計(jì)類似，這個(gè)設(shè)計(jì)沒有過多討論的地方。值得琢磨的是其中一些細(xì)節(jié)的設(shè)計(jì)，比如圖片樣式的設(shè)計(jì)：內(nèi)容框樣式的設(shè)計(jì)：分割線樣式的設(shè)計(jì)：五、不同層次藍(lán)色的設(shè)計(jì)1、布局上這個(gè)設(shè)計(jì)模板也采用了和案例一的直接將信息放置在背景上的布局方式。2、色彩應(yīng)用上，和前面的幾個(gè)設(shè)計(jì)主打灰色不同，這個(gè)設(shè)計(jì)采用了不同層次的藍(lán)色作為色板。雖然幾個(gè)層次的藍(lán)色并不完全屬于同一色相，但是色彩跳躍非常小。背景是亮度和飽和度很低的藍(lán)色，而側(cè)邊欄的內(nèi)容框背景色彩更暗，頁面上的鏈接文字、線條是高亮的部分，使用了亮度和飽和度都非常高的藍(lán)色，和背景拉開大的層次，非常醒目。3、和

12、前面的幾個(gè)設(shè)計(jì)風(fēng)格相比，這個(gè)設(shè)計(jì)屬于那種打眼一看看不太明白的那種，似乎有一點(diǎn)酷的感覺。所以如果你被告知要求設(shè)計(jì)一個(gè)干凈、簡(jiǎn)潔風(fēng)格的作品，做成這樣應(yīng)該算是跑題了。影響這種風(fēng)格的元素一是由于整個(gè)頁面屬于暗色，二是頁面上元素比較多，且形式不一。可以觀察到，其中的圖案樣式有兩種，斜紋和1像素的一黑一白點(diǎn)狀圖案。在主頁不同欄目的設(shè)計(jì)樣式上不是以我們經(jīng)?？吹降木匦螀^(qū)域出現(xiàn)，而是幾乎各不相同，其中的統(tǒng)一元素是斜邊，在下面截圖中我們都可以看到斜邊的應(yīng)用。六、設(shè)計(jì)中留白和精致的體現(xiàn)這個(gè)設(shè)計(jì)里我想要強(qiáng)調(diào)一下留白和細(xì)膩精致這兩個(gè)設(shè)計(jì)要點(diǎn)。要讓設(shè)計(jì)看上去清爽、透氣，留白在其中的作用非常重要。不用多說，看看下圖各設(shè)計(jì)元

13、素之間的間距，你會(huì)發(fā)現(xiàn)設(shè)計(jì)師特別舍得在各元素之間留出空間來，然后我們?cè)賹?duì)比自己設(shè)計(jì)中經(jīng)常使用的間距就能發(fā)現(xiàn)問題所在了。要讓設(shè)計(jì)看上去細(xì)膩和精致也不難，把”精確到每一像素”作為設(shè)計(jì)的座右銘，尤其關(guān)注元素邊緣的精準(zhǔn)度，以及所有其它的細(xì)節(jié)，認(rèn)真觀察這個(gè)設(shè)計(jì)中每一信息區(qū)域的1像素高光的邊緣，按鈕的樣式，漸變和陰影的柔和，把這些東西掌握在手中，我們就能在作品的精致程度上進(jìn)步很多。七、時(shí)尚的弧形設(shè)計(jì)1、整個(gè)設(shè)計(jì)由于版式和布局的不一般以及弧形邊緣給整個(gè)設(shè)計(jì)增添了時(shí)尚的感覺。這是整個(gè)設(shè)計(jì)有創(chuàng)意的地方，所以這里帶給我們的問題是：”我們應(yīng)該在哪種設(shè)計(jì)要求下或者期望中考慮到使用弧形元素？”不能說只要與眾不同，所以我

14、不用直線，而用弧形，作為一個(gè)設(shè)計(jì)師我們要對(duì)各種布局、形狀、色彩、材質(zhì)帶給人的心理感受有比較充分的認(rèn)識(shí)和把控，這樣我們才能夠做到對(duì)于整個(gè)設(shè)計(jì)風(fēng)格的走向有充分而靈活的掌握。2、背景部分有3個(gè)層次，上半部分模糊的有空間感的圖片，中間部分帶有一點(diǎn)色值的亮灰色，底部是稍暗一些同樣帶有一點(diǎn)色值的灰色。重點(diǎn)是上半部分的模糊圖片，雖然高斯模糊值不小，但是還能感受到圖片中的空間感，這就使得整個(gè)背景在不搶眼的同時(shí)，有給整個(gè)設(shè)計(jì)帶來透氣的感覺。3、頁面割裂為兩部分，主要內(nèi)容區(qū)和左側(cè)側(cè)邊欄，主要內(nèi)容區(qū)為白色，側(cè)邊欄為比背景圖片的色調(diào)更暗一些，色相接近的色彩，所以這里我們又可以觀察到色彩上的三個(gè)層次，最亮的白色、中間調(diào)

15、的圖片色、暗色調(diào)的側(cè)邊欄。4、文字在字體、大小、顏色上區(qū)分讓文字在視覺上拉開功能性方面的區(qū)分。這些都是細(xì)節(jié)，但是體現(xiàn)出設(shè)計(jì)上的專業(yè)性。八、柔和的亮灰色漸變1、又是不同層次灰度劃分信息區(qū)域的一個(gè)設(shè)計(jì)。主頁中亮灰色搭配圓角的設(shè)計(jì)總給人一種柔和，圓潤(rùn)的心理感受。2、這個(gè)設(shè)計(jì)中有很多有創(chuàng)意的地方，不僅讓整個(gè)設(shè)計(jì)看上去別出心裁而且對(duì)于信息的傳遞起到了加分的作用，值得我們借鑒學(xué)習(xí)。例如，主頁介紹公司業(yè)務(wù)和客戶反饋的碩大的1、2、3三個(gè)序號(hào)；博客插圖、日期、標(biāo)題、日志附屬信息的設(shè)計(jì)以及圓形的博客縮略圖樣式都是非常有效而且漂亮的設(shè)計(jì)。九、不同頁面不同的背景圖片1、我個(gè)人其實(shí)更偏愛這種居中帶有邊框的設(shè)計(jì)，看上去信息更為集中。而這個(gè)設(shè)計(jì)內(nèi)容框下的一個(gè)頁面一更換的大圖片背景讓設(shè)計(jì)更有趣味性，也更有空間感。2、主內(nèi)容區(qū)接近白色的亮灰色背景看上去更柔和，不那么刺眼，也讓閱讀更