越來越多的網站和部落格已經走上化的道路了,從運營到整體的設計均是如此。為了尋求給人以性的視覺和體驗,有一部分網站會採用數字雜誌式的設計。和所有的型別化設計一樣,數字雜誌式的網頁設計是有 “理想實踐” 的。通常來說,一個設計得體,感覺的數字雜誌式的網站,需要具備下面 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 一樣,使用全屏圖片。

  無論怎麼設計,在哪個位置,都應該以展示內容為核心,在視覺上大化。