越來越多的網站和博客已經走上專業化的道路了,從運營到整體的設計均是如此。為了尋求給人以專業性的視覺和體驗,有一部分網站會采用數字雜志式的設計。和所有的類型化設計一樣,數字雜志式的網頁設計是有“最佳實踐”的。通常來說,一個設計得體,感覺專業的數字雜志式的網站,需要具備下面9種特征。
1、明確和突出的品牌設計
這是顯而易見的事情。印刷出版的雜志通常會有明顯而突出的品牌設計,通過品牌化的設計,有的會強調其權威性,有的會強調其個性。很大程度上,品牌化的設計是為了從激烈的競爭者脫穎而出。數字雜志同樣如此。
突出品牌的方式有很多,內容是其中很重要的部分,同時視覺和體驗也不容忽略。比如在技術類數字雜志中極為出名的 Wired ,也就是《連線》雜志。獨樹一幟的LOGO,黑白分明的配色融入整個數字雜志的網站設計,和LOGO以及品牌本身遙相呼應。
將品牌的色彩、設計元素貫穿到整個數字雜志的網站設計,這樣能自然而然地強化整個品牌的概念。

2、搶眼獨到的頭條
數字雜志外有品牌化設計,內要有強大的內容支撐。頭條是這個網站的拳頭,它要搶眼,干脆,直擊用戶,在網頁上要一目了然,是視覺焦點。清晰的排版和易于瀏覽的頭條文章,是必須要有的。
看看 UX Magazine 的首頁設計,相信你就明白了我的意思。頭條字體采用了展示性的字體,厚重,和正文形成明確的對比。在頭條文案上,也需要多花心思打磨,這樣才能確保它真正有吸引力。

3、有階梯層級的導航
雖然現在主流的導航設計都奔著簡化去了,但是強調專業性的網站其實還是多少需要多層級的大型導航欄的。一方面,這類數字雜志類的網站通常有著類別多樣文章和大量的存檔,另一方面,這樣的導航會給人以“專業”的感覺。
無論你用的是Wordpress這樣的CMS平臺還是自己寫的網站,都可以使用這樣的導航。在Wordpress 當中,無論是加入標簽還是進行自定義分類都很方便,類別多了之后可以采用下拉式菜單,但是不論怎樣設計,盡量讓體驗順滑流暢。
Atlanta Magazine 的大型導航菜單給人的體驗就非常流暢,下拉菜單中嵌入了大量的鏈接。由于響應式的滑動導航在移動端上也已經很常見了,這使得它還輕松兼顧到了移動端的設計。

4、文章推薦小插件
每個數字雜志風格的網頁首頁看起來都不盡相同,它們有著相似的首頁,但是借助不同的排版布局,見縫插針的各式文章推薦的小插件,實現不一樣的視覺效果,引導用戶不時停下來點擊感興趣的文章。
這些熱點文章推薦的小插件是非常引人矚目的。用來推廣熱門文章和最近文章是相當有用的。
Search Engine Journal 的首頁上就采用了一個這樣的輪播式文章推薦小插件,每次展示3篇推薦文章,并且輪播滾動的時候會在左側視覺化地展示出相應的圖片。你可以仔細看看你所喜歡的數字雜志網站都是怎么設計這樣的小插件的,或者了解一下他們用的都是哪些插件。

5、顯著的分享按鈕
社交媒體的重要性是不言而喻的。如果你想讓你的網站擁有更多的訪客,充分利用社交媒體,讓你的網站文章有更多的曝光度,是不錯的選擇。在這樣的需求之下,盡量讓每篇文章當中的分享按鈕盡量明顯一些。
在著名科技博客 ZDNet 上,每篇文章下方都有一連串非常醒目的社交媒體分享按鈕。在許多流行的雜志和網絡媒體網站上,你能找到許多值得參考的案例,具體多看看吧。

6、相關文章推薦
在許多網站上,我們會在看完文章之后看到底部或者側面有更多相關文章推薦,這是遵循用戶偏好的一種內容推薦機制,非常有用。
這應該是所有以內容為導向的內容都應該有的組件和功能,因為這是幾乎不費吹灰之力就能獲得更多瀏覽量的方法。
Real Simple 的相關文章推薦和絕大多數網站并沒有太大差別,但是絕大多數時候,這樣的推薦都會發揮作用。

7、可用性良好的搜索引擎
現如今每個網站都有搜索引擎了。對于目標相對比較明確的訪客而言,他們多數時候會直接使用搜索引擎開始搜索而不是漫無目的地瀏覽。
而數字雜志類網站的問題在于,其中所涵蓋的內容信息量都很大,如果需要針對文章內容進行檢索的話,搜索引擎壓力并不小,但是用戶的需求是非常明晰的,所以網站的開發者需要提供可用性良好的搜索引擎,幫助用戶找到內容,提高用戶的停留時間和內容的打開率。
設計師需要讓搜索引擎顯著的位置,讓用戶在任何時候都能夠快速找到它,并且可以進行搜索。

8、自定義的頁面元素
其實這個界定有點含糊。你會發現,絕大多數的內容為主的博客和數字雜志都大同小異。但是也有那么一些網站給人感覺稍稍不同:它們會在頁面細節上進行一定程度的定制,讓信息更容易被消化,或者更加個性化。
通常而言,這些效果突出的網站會在下面的部分花心思:
重點內容和引用的文本
目錄
圖片和輪播圖
相關文章推薦
就像我前文所提到的,相關文章推薦,這個模塊你可以設計得更加走心,更加吸引人。科技博客 TechCrunch 和 Hongkiat 都是在文章推薦上非常花心思。
我無法確切地告訴你到底有多數功能和模塊可以進行定制和修改,這些部分通常需要創意團隊集思廣益。

9、頁頭焦點圖
如果你想一進入頁面就將用戶的注意力牢牢抓住,那么你需要有醒目而抓人眼球的文案,以及一張同樣在視覺上矚目的高清特色圖。
WordPress 這類CMS系統通常會有這樣的焦點圖模塊,尺寸在后臺有詳細說明,不同的主題會設置不同的尺寸。對于數字雜志式的網站,圖片是讓用戶點擊的重要元素之一,最好用大圖,強化視覺,在頁頭展示。你可以像下面的Dwell 一樣,使用全屏圖片。
無論怎么設計,在哪個位置,都應該以展示內容為核心,在視覺上最大化。

情非得已
21個Sketch實用高頻小技巧2019-02-15
25款值得收藏的優秀網站模板免費下載2015-09-16
20套高質量的免費網頁模版PSD素材2013-09-02
20款國外時尚大氣的按鈕開關PSD素材下載2013-07-31
CSS實例教程:十步學會用CSS建站2011-10-05
網頁設計師:淺淡網頁BANNER設計2010-09-27
網頁細節教程:WEB設計精確點滴2010-09-13
網頁設計中的點滴細節把握2010-09-01
總結交互組件創新的四種方式2010-06-28
最全的國外電子商務CSS模板下載2010-06-18
5個網站設計實例解析網頁設計趨勢
相關文章4452018-11-29
5個作品集網站設計中常見的問題
相關文章3742018-05-10
詳解個性化網站設計的優點和缺點
相關文章3702018-01-10
深度解析尼爾森十大交互設計原則
相關文章3552018-01-10
5招技巧幫助您設計出優秀的網頁設計
相關文章2542017-02-15
讓經典的尼爾森十大可用性原則幫你
相關文章3832016-11-01
聊聊Web網站設計和移動App的六大差異
相關文章2932016-02-20
詳細解析優秀的交互設計師的養成計劃
相關文章1672015-12-14
