學(xué)會網站設計技巧讓您把網站建設得更突出【幹貨】

當越來越多的網站出現在網站的時候，面(miàn)對(duì)設計師的已經(jīng)是設計的瓶頸，如何才能(néng)讓自己的網頁脫穎而出呢？和所有的類型化設計一樣(yàng)，數字雜志式的網頁設計是有“最佳實踐”的。通常來說，一個設計得體，感覺專業的數字雜志式的網站，需要具備下面(miàn)9種(zhǒng)特征。

1、明确和突出的品牌設計

這(zhè)是顯而易見的事(shì)情。印刷出版的雜志通常會有明顯而突出的品牌設計，通過(guò)品牌化的設計，有的會強調其權威性，有的會強調其個性。很大程度上，品牌化的設計是爲了從激烈的競争者脫穎而出。數字雜志同樣(yàng)如此。

突出品牌的方式有很多，内容是其中很重要的部分，同時視覺和體驗也不容忽略。比如在技術類數字雜志中極爲出名的 Wired ，也就是《連線》雜志。獨樹一幟的LOGO，黑白分明的配色融入整個數字雜志的網站設計，和LOGO以及品牌本身遙相呼應。

將(jiāng)品牌的色彩、設計元素貫穿到整個數字雜志的網站設計，這(zhè)樣(yàng)能(néng)自然而然地強化整個品牌的概念。

2、搶眼獨到的頭條

數字雜志外有品牌化設計，内要有強大的内容支撐。頭條是這(zhè)個網站的拳頭，它要搶眼，幹脆，直擊用戶，在網頁上要一目了然，是視覺焦點。清晰的排版和易于浏覽的頭條文章，是必須要有的。

看看 UX Magazine 的首頁設計，相信你就明白了我的意思。頭條字體采用了展示性的字體，厚重，和正文形成(chéng)明确的對(duì)比。在頭條文案上，也需要多花心思打磨，這(zhè)樣(yàng)才能(néng)确保它真正有吸引力。

3、有階梯層級的導航

雖然現在主流的導航設計都(dōu)奔著(zhe)簡化去了，但是強調專業性的網站其實還(hái)是多少需要多層級的大型導航欄的。一方面(miàn)，這(zhè)類數字雜志類的網站通常有著(zhe)類别多樣(yàng)文章和大量的存檔，另一方面(miàn)，這(zhè)樣(yàng)的導航會給人以“專業”的感覺。

無論你用的是Wordpress這(zhè)樣(yàng)的CMS平台還(hái)是自己寫的網站，都(dōu)可以使用這(zhè)樣(yàng)的導航。在Wordpress 當中，無論是加入标簽還(hái)是進(jìn)行自定義分類都(dōu)很方便，類别多了之後(hòu)可以采用下拉式菜單，但是不論怎樣(yàng)設計，盡量讓體驗順滑流暢。

Atlanta Magazine 的大型導航菜單給人的體驗就非常流暢，下拉菜單中嵌入了大量的鏈接。由于響應式的滑動導航在移動端上也已經(jīng)很常見了，這(zhè)使得它還(hái)輕松兼顧到了移動端的設計。

4、文章推薦小插件

每個數字雜志風格的網頁首頁看起(qǐ)來都(dōu)不盡相同，它們有著(zhe)相似的首頁，但是借助不同的排版布局，見縫插針的各式文章推薦的小插件，實現不一樣(yàng)的視覺效果，引導用戶不時停下來點擊感興趣的文章。

這(zhè)些熱點文章推薦的小插件是非常引人矚目的。用來推廣熱門文章和最近文章是相當有用的。

Search Engine Journal 的首頁上就采用了一個這(zhè)樣(yàng)的輪播式文章推薦小插件，每次展示3篇推薦文章，并且輪播滾動的時候會在左側視覺化地展示出相應的圖片。你可以仔細看看你所喜歡的數字雜志網站都(dōu)是怎麼(me)設計這(zhè)樣(yàng)的小插件的，或者了解一下他們用的都(dōu)是哪些插件。

5、顯著的分享按鈕

社交媒體的重要性是不言而喻的。如果你想讓你的網站擁有更多的訪客，充分利用社交媒體，讓你的網站文章有更多的曝光度，是不錯的選擇。在這(zhè)樣(yàng)的需求之下，盡量讓每篇文章當中的分享按鈕盡量明顯一些。

在著名科技博客 ZDNet 上，每篇文章下方都(dōu)有一連串非常醒目的社交媒體分享按鈕。在許多流行的雜志和網絡媒體網站上，你能(néng)找到許多值得參考的案例，具體多看看吧。

6、相關文章推薦

在許多網站上，我們會在看完文章之後(hòu)看到底部或者側面(miàn)有更多相關文章推薦，這(zhè)是遵循用戶偏好(hǎo)的一種(zhǒng)内容推薦機制，非常有用。

這(zhè)應該是所有以内容爲導向(xiàng)的内容都(dōu)應該有的組件和功能(néng)，因爲這(zhè)是幾乎不費吹灰之力就能(néng)獲得更多浏覽量的方法。

Real Simple 的相關文章推薦和絕大多數網站并沒(méi)有太大差别，但是絕大多數時候，這(zhè)樣(yàng)的推薦都(dōu)會發(fā)揮作用。

7、可用性良好(hǎo)的搜索引擎

現如今每個網站都(dōu)有搜索引擎了。對(duì)于目标相對(duì)比較明确的訪客而言，他們多數時候會直接使用搜索引擎開(kāi)始搜索而不是漫無目的地浏覽。

而數字雜志類網站的問題在于，其中所涵蓋的内容信息量都(dōu)很大，如果需要針對(duì)文章内容進(jìn)行檢索的話，搜索引擎壓力并不小，但是用戶的需求是非常明晰的，所以網站的開(kāi)發(fā)者需要提供可用性良好(hǎo)的搜索引擎，幫助用戶找到内容，提高用戶的停留時間和内容的打開(kāi)率。

設計師需要讓搜索引擎顯著的位置，讓用戶在任何時候都(dōu)能(néng)夠快速找到它，并且可以進(jìn)行搜索

8、自定義的頁面(miàn)元素

其實這(zhè)個界定有點含糊。你會發(fā)現，絕大多數的内容爲主的博客和數字雜志都(dōu)大同小異。但是也有那麼(me)一些網站給人感覺稍稍不同：它們會在頁面(miàn)細節上進(jìn)行一定程度的定制，讓信息更容易被(bèi)消化，或者更加個性化。

通常而言，這(zhè)些效果突出的網站會在下面(miàn)的部分花心思：

重點内容和引用的文本

目錄

圖片和輪播圖

相關文章推薦

就像我前文所提到的，相關文章推薦，這(zhè)個模塊你可以設計得更加走心，更加吸引人。科技博客 TechCrunch 和 Hongkiat 都(dōu)是在文章推薦上非常花心思。

我無法确切地告訴你到底有多數功能(néng)和模塊可以進(jìn)行定制和修改，這(zhè)些部分通常需要創意團隊集思廣益。

9、頁頭焦點圖

如果你想一進(jìn)入頁面(miàn)就將(jiāng)用戶的注意力牢牢抓住，那麼(me)你需要有醒目而抓人眼球的文案，以及一張同樣(yàng)在視覺上矚目的高清特色圖。

WordPress 這(zhè)類CMS系統通常會有這(zhè)樣(yàng)的焦點圖模塊，尺寸在後(hòu)台有詳細說明，不同的主題會設置不同的尺寸。對(duì)于數字雜志式的網站，圖片是讓用戶點擊的重要元素之一，最好(hǎo)用大圖，強化視覺，在頁頭展示。你可以像下面(miàn)的Dwell 一樣(yàng)，使用全屏圖片。

無論怎麼(me)設計，在哪個位置，都(dōu)應該以展示内容爲核心，在視覺上最大化。