如何創造網頁設計的7個維度

網站能承載多種多樣的內容，但無論是哪種內容，通常都會遵循一定的資訊架構。在這其中，故事是很特別的一種型別。講故事，往往能以更敘事、更情感化的方式，將內容傳遞給使用者。一個好的故事，往往始於筆端，但是最終呈現，還是要依靠精巧的設計。那麼設計是如何講好故事的呢?今天的文章，為你分享一下創造故事的7個維度。就跟隨本站小編一起去了解下吧，想了解更多相關資訊請持續關注我們應屆畢業生考試網!

　　1、圖片

首先，想要講好故事，要通過設計在視覺上吸引使用者。這一切要從乾淨清晰的視覺設計開始。壯美的圖片，有趣的插畫，驚豔的視訊，都會抓住使用者的注意力，並給予使用者第一印象。

在視覺上足夠突出的圖片，搭配以文案，一切開始擁有了畫面感，而故事因此而誕生。從照片到色彩，從文字到細節，故事所傳達出來的資訊和氣質，和整個視覺設計應該是保持一致的，而好的故事，能夠帶著使用者一路走過來。

　　2、角色

當我們在設計網站的時候，常常會探討使用者本身和故事的角色。在網站的開發過程中，使用者所代表的身份，和呈現在使用者面前的角色，有著怎樣的關係，這是內容和設計上需要探討的關鍵問題。

這個角色可以是一個貫穿整個設計是實體角色，也可以是被包含在視覺和文字內容中的一種“氣質”，或者“腔調”。

Freddie 公司旗下產品MailChimp 中所建立的視覺形象就是一隻有趣的猴子，而這隻猴子不僅僅是他們的LOGO，而且這個形象貫穿了整個設計，這個角色為整個產品作出了不小的貢獻：

首先，這個形象和公司、產品的名稱相互呼應，也解釋了為什麼叫MailChimp。雖然MailChimp 這個生造的詞彙會讓使用者感到迷惑，可是看到猴子的形象，他們能夠很快Get到這個命名的含義。

這個形象還揭示出了這個公司的特色，有趣的設計和獨特的氣質。

猴子Freddie 本身就代表著故事，它是怎麼來的?名字怎麼起的?這個形象本身就自帶故事屬性。

　　3、互動

引導使用者與內容進行互動，這是設計能帶來的重要價值之一。通過動效和行為召喚(CTA)讓使用者自然地注意到關鍵的內容和重要的控制元件，引導使用者與之互動，這是為了促使使用者與內容緊互動，參與到這個故事中來。

想要使用者參與到故事中來的另外一種方式則是視差滾動。它從視覺上鼓勵使用者持續地向下滾動，在保證體驗愉悅的同時，用動態而有趣的視覺設計，強化互動。

一個好故事並不需要做的太複雜。Humaan 就很直接的藉助團隊照片和懸浮動效來講述故事，幫助訪客瞭解這個團隊的成員。這種設計簡單而有效。(注意懸浮狀態下每個成員姿勢和表情的變化，非常有意思)

　　4、遊戲

故事本身的構建可能是最麻煩的地方，相反，講述故事反而是簡單的事情。如果你不知道要如何呈現故事，那麼不妨將它設計成一個簡單的遊戲，為使用者提供一個有趣的聽故事的渠道。

而藉助遊戲講述故事的技巧在於，保持簡單和提供獎勵。不論是虛擬的成就徽章，還是優惠券，你要讓使用者從中獲利，才能促進他們繼續聽取你的故事。

你所提供的遊戲並不一定要像Pokemon Go 那樣有趣而好玩，Dropbox 通過完成任務獲得額外的雲盤空間，一樣是非常有效的手段。Dropbox 所設定的任務多種多樣，有邀請好友，也有帳號連結郵箱，但是無論是哪種，都具有一定的遊戲性，達成了一定有獎勵。許多忠誠的Dropbox 使用者都是這麼一步一步過來的。

當然，對於不想玩這些遊戲的使用者而言，直接付費一樣可以達成效果。你要讓使用者覺得，不論怎麼玩，他們都是贏家。

　　5、微互動

如今的網頁和APP設計中，有著大量的動效和微互動。許多社交媒體都樂於使用微互動，因為它們簡單，並且能夠帶來優秀的體驗。

微互動所帶來的有趣體驗為使用者創造出一個有趣的瞬間。每次儲存設定，傳送訊息，登入帳號，都會伴隨著好玩而微妙的微互動，以Instagram 中點讚的按鈕為例，使用者在嘗試過之後，對於這種互動會有的'沉迷的感覺，樂此不疲。

有意義的微互動非常重要。就像上面所說的點贊，它是具有功能性的，它給整個產品的體驗帶來了明顯的提升。

　　6、敘述

故事的構成大多不復雜，開頭，過程，結局，這三者是絕大部分的故事的三個基本環節。

如果你需要講述故事，這種公式化的結構其實是最容易為使用者所接受的：

開頭：LOGO和標題。讓使用者知道這是什麼網站，以及他們為什麼會在這裡。

過程：通過陳述內容，展現特殊性。你的網站能給使用者帶來什麼不一樣的東西?他們能預期一些什麼東西?

結局：行為召喚，呼籲使用者購買，或者訂閱，等等。

　　7、簡單

雖然這可能會和上面的一條有所衝突，但是故事最好還是保持簡單。簡單的故事往往能更快的讓使用者Get到核心資訊。

故事要能夠抓住使用者的注意力，給使用者留下好印象，讓他們成為回頭客。

UpStream 在自己的首頁上就做到了這一點——雖然使用者可以通過滾動，到中間部位檢視更多的內容，但是隻需快速的掃視開頭，中間和結尾三個部分，就能搞清楚這個故事的全貌。通過視覺設計搭配文字，就能搭建出一個故事的梗概。此外，螢幕上的“參與”按鈕也相當的“誘人”。

簡單的故事往往更加有效。

　　8、結語

你在設計故事的時候應該明白，你自己的故事往往更加動人。一個真實的故事，帶有你自己的烙印，講述出來才更容易觸動到使用者。