設計

設計和心理學一直是緊密關聯的。今天我們來聊聊網站首頁的設計中所隱藏的心理學現象:即時情緒和預期情緒。

這兩種概念並不複雜,甚至很容易理解,一旦你掌握,就能得心應手地運用。

即時情緒


即時情緒其實就是使用者對於產品直接情緒反應。當你的網頁出現可用性、可訪問性或者可讀性的問題的時候,用戶出現負面的情緒反應,舉個例子,當網頁無法流暢滾動,無法載入資訊的時候,你的直接反應可能是無奈、困惑甚至不信任。這是使用者對於產品所呈現出的一種即時情緒。

當然,用戶的即時情緒可能是負面的,自然也可能是正面的。比如一個設計優秀的頁面會在你看到的第一時刻,令你為之驚歎,留下深刻印象。這種正面的即時情緒也是設計師們所追求的效果。

160414 1

Acorns 是一個線上零錢投資APP,可以幫你將閒置的資金動起來。整個主頁設計充分使用了簡約的設計來平復訪客的情緒,整個簡約的環境下,用戶可以看到這款APP覆蓋了全部的平臺,在可用性上無可挑剔!

當他們看到$6,363.71 會進而產生“這款應用能賺錢!”的心理暗示,整個這一套下來,讓用戶對這款應用產生正面的情緒,引導他們下載使用。

160414 2

CartoDB 可以讓地理資訊以最漂亮的形態呈現出來。雖然地理資訊怎麼都不像是能漂亮起來的東西,但是CartoDB還真就做到了。當你打開網頁的時候,你會看到一幅令人興奮且足夠華麗的地圖。

CartoDB的首頁大圖就是有這樣吸引人的魅力。雖然他們的資料庫並不是拿來銷售的,但是僅目前的網頁設計就可以吸引相當一部分潛在客戶。

160414 3

作為一款流媒體APP,Reuter TV 無時無刻不在做自我展示。整個網站導航並不多也不複雜,這也使得時刻不停的視頻背景顯得特別抓人眼球。但是這種方法卻以更加直接的方式為使用者展示正在發生的新聞,並且可以讓用戶產生真實的即時情緒。

預期情緒


預期情緒和即時情緒不同,用戶會結合他們看到的過去的經驗來產生對於未來的某種預期。這方面最常見的例子,就是在網頁中展示購買了產品之後的人們幸福的生活照。

這樣的場景是吸引潛在客戶並打消他們的由於的最重要的手段之一,而且,當使用者開始想像自己使用產品的場景的時候,就會自然而然地同產品產生情感紐帶。

如果你的產品能在使用者中引起積極的情緒,就能為品牌和產品增加信任度,使用者的忠誠度也會隨之提高

 

 

160414 4

我們曾經多次推薦過Grovemade 的網站,這是一個銷售手工木製品的網站,從顯示器支架到手機殼,不一而足。

當你打開網站的時候,設計師用輪播圖展示一系列產品的使用場景圖,精緻,細膩,吸引人。

你會在這些圖片中看到你的電腦用上他們的支架有多漂亮,用上他們的手機殼有多帥氣,用戶就是在這一張張照片中被吸引、被說服的。

 

160414 5

這個網站所展示的照片則更多的是生活方式類的圖。整個網站採用的是單頁設計,而且整個頁面也相當的長,設計師在這個網頁中通過九張圖展示了一款定制化的錢包,文字很少,圖片很贊。

這種產品的展現方式談不上多麼突出,但是缺乏干擾的呈現方式讓產品圖更加吸引人,千言萬語不如一張圖來的直接。你要的是什麼?漂亮的產品麼?來買就好了。

 

160414 6

Narrative 可穿戴的相機,它可以每隔幾分鐘就幫你拍張照片,這種功能使得這款相機有許多不同於其他產品的優秀特性。所以,當你打開網站的時候,映入眼簾的是個一個由不同生活瞬間構成的視頻。

頁面最終確實給你展示了相機的造型和外觀,但是這不是最重要的——你買的最終並不是一個實體相機,更多的是一種生活方式,或者說就是生活本身。

你再也不需要掏出手機來刻意記錄,這個相機會幫你拍攝,那些難忘的記憶也會清晰地記錄在其中,這是一個簡單但是意蘊豐富的鏡頭,幫你記錄生活的瞬間。

 

專注價值

我們都很清楚,專注於呈現產品的價值和優勢,而非分析它為何會這樣。所以,讓使用者與產品產生情感聯繫是最重要的。從上面的案例可以看出來,情感聯繫和情緒感染對產品銷售而言是何等的重要。

當然,文案是整個設計中的重要組成部分,如果你想設計出真正調動用戶情緒,吸引人的優秀首頁,那麼不妨參考一下下面的優秀文案。

 

160414 7

搜集想法並輸入,將正確的人引入到討論當中。你可以將一段對話發給任何人,即使他們並不使用Evernote。

— Evernote

160414 8

瞭解談話對象, 始終看著說話的人。你會更輕鬆掌握他們的社交狀況。

— UberConference

160414 9

運行良好, 通常手掌誤觸、刪除和混淆只會在紙張和非支援的應用中出現,不過 Paper Pencil 依然可以在非連接狀態下,同任何其他應用中作為觸摸設備而使用。

— Pencil by FiftyThree

160414 10

不再錯過任何郵件主題, 相比於在諸多郵件中迷失,團隊即時聊天、清晰的任務管理和項目計畫等功能的集成,將會很好的緩解你的困境。交流資訊、分享回饋都可以很好地幫你完成工作。

— Flow

結語

瞭解用戶的需求和心理並不難,更好地利用產品的特性和使用者的情緒才是最終達成目標的設計技巧。我想就是這樣的。

原文地址:designmodo
原文作者:Paula Borowska
優設譯文:@陳子木

網頁設計不同於平面設計,網頁設計必須了解資訊軟硬體的最新脈動及優化,創造更好的用戶體驗,並將設計樣式發揮至極致。

2015年的網頁設計趨勢是什麼?來看看以下的分析:

1. 響應式網頁設計再繼續:

響應式網頁設計2010年開始有概念,2011年網頁設計技術成熟,2012.2013年整個大發,2014年不做響應式網頁設計就等於落伍了;

但在台灣仍有許多客戶們不知道響應式網頁設計的好處, 為了價錢考量刪除響應式網頁設計的功能,

很遺憾的通知這些客戶,使用手機上網的人數逐漸攀升,這個功能依舊躲不掉!

也許客戶有一個很好的理由不用響應式網頁設計,但設計潮流是隨著使用者走的,

在過去的幾年裏,響應式網頁設計快速鞏固了自己作為網頁設計的新標準。

當然,也有爭論,但是沒人說,“讓我們擺脫響應式網頁設計吧”。實際上,越來越多的網站選擇響應式的方向。

2014年確實如此,2015年也還會繼續。這已經不是種趨勢,而是常態了。

在網頁設計中,頁腳(FOOTER)是用戶尋找資訊的地方。所以在設計網站時也不要忽略這個地方。

在FOOTER裏需要包含哪些元素?如何組織FOOTER的內容使其不突兀並保持整體美感?

1.保持設計簡單

這是大部分網頁設計項目的關鍵之一,但是這點也是重中之重。在處理大量資訊放在頁腳的的時候,簡單設計就顯得尤為重要。

堅持清理元素,保證充足的空間並有目的地組織資訊。儘量避免混亂,思考哪些元素需要出現在你的頁腳中,以及它們為什麼要在那裏。

頁腳的尺寸一般都跟你網站頁面數和信息量有關。 Agra-Culture 在頁腳中使用顏色、圖示和文字,不過它很簡單,而且流量很大。每個鏈結都易於點擊,綠色背景中農場圖像的微妙細節是個很好的嘗試。

 

色環(The color wheel)是一種幫助我們理解色彩和色彩關係的工具。
最常見的色環是 12 色環。通常一個色環包含至少 6 種、多到 24、48、96 或更多種顏色。

三原色

色環中有三種原色。它們分別是紅、黃、藍。理論上這三種顏色可以混合出任何其他顏色。當你把這三種顏色混合到一起時,理論上會產生黑色。
(譯註:本文的三原色理論基於較傳統的顏料消減型混合體系,有別於電腦領域常用的 RGB 光源疊加型三基色體系和 CMYK 印刷消減型分色體系。

三間色

通過混合兩種原色,你將得到一種間色。總共有三種間色,分別是綠色、紫色、橙色。橙色由紅和黃混合而來,紫色由藍和紅混合而來,而綠色由黃和藍混合而來。 Tertiary colors

複色

色環中的第三類顏色就是複色,或稱為三次色。它們是由色環中鄰近的原色和間色混合而來。這六種複色分別是黃綠色、藍綠色、藍紫色、紫紅色、紅橙色、黃橙色。

 

第 3 頁,共 9 頁

聯絡資訊

ring@des13.com

 @igodos

403 台中市西區台灣大道二段181號11樓之11(環瑞通商大樓)

04-23174836 / 04-23296485 / 0931-303767

106 台北市大安區忠孝東路169號6樓之1(需預約)

02-27790715

thedes13 

line

 

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

DMC Firewall is a Joomla Security extension!