Tag

情感化設計

Browsing

網頁或App介面的情感化設計,作為使用者體驗和需求金字塔的最高層級,越來越多的受到設計師們的關注和重視。

網頁或App介面的情感化設計,作為使用者體驗和需求金字塔的最高層級,越來越多的受到設計師們的關注和重視。Donald Arthur Norman, 作為享譽全球的認知心理學家和尼爾森·諾曼集團的聯合創辦人之一,也在其名為《情感化設計》的書籍中,從本能,行為和反思三個設計維度,講述 了情感在介面設計的重要地位和作用,強調web或app設計要從情感層面吸引和留住使用者,提升使用者體驗。

但作為設計師, 究竟如何才能將情感元素巧妙地融入網頁或軟體設計,使介面輕鬆擺脫冰冷的人機交流,增強介面吸引力和引導力的同時,提升使用者認同感和忠誠度呢?

以下,本文將從六個方面為大家分析和講解UI 介面設計中應該如何應用情感化設計,為Web或App設計錦上添花。當然,為方便大家理解和借鑑,小編也將結合最新且充滿人情味的UI 設計例項和相關原型設計例項(本文所有原型例項都是小編使用一款 簡單快速的原型工具 ,Mockplus,製作完成)進行介紹,希望對大家有所幫助:

首先,什麼是網頁或App UI的情感化設計?

網頁或App UI的情感化設計是指,設計師利用介面元素或元素的組合,激發和帶給使用者正面,積極的情緒反映,例如快樂,喜愛,自由等等。 一定情境下,一些設計師甚至大膽使用別出心裁的頁面設計,激發使用者負面情感(比如悲傷,遺憾等等),以求引起使用者共鳴,從而拉近與使用者的心理距離,更加高效地引導使用者,提升使用者認同感。

簡而言之,情感化設計具體包括利用彩配色激發使用者情感,或高興,或溫暖,或寧靜祥和;利用簡單易懂,自由流暢的互動設計,吸引使用者點選或參與;以及利用暖心體貼的介面文字設計,打動使用者等等。

總之,好的情感化設計介面會讓使用者眼前一亮,迅速抓住使用者的心,讓使用者擁有更加暖心,愉悅的體驗。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,利用介面所有元素,尤其是圖片和文案,向用戶傳達其產品安全而值得信賴的情感資訊。

那麼,如何才能設計出充滿人情味的Web或App設計?

正如以上情感化設計定義講述的那樣,Web或App設計的每一個元素或細節都可能成為使用者情緒的激發點和源頭。那麼,設計師如何才能更加高效的利用簡單常見的介面元素,打造吸睛又不失人情味的頁面設計呢?為方便大家理解和借鑑,這裏主要從6個主要方面為大家介紹:

1). 利用視覺元素的情感化設計,打動人心

視覺設計元素也可人情味十足。具體而言,設計師可以從以下幾個方面嘗試設計:

*利用色彩吸引使用者,激發使用者情感

色彩,作為頁面視覺設計中最重要的元素之一,對於Web或App UI 能否在第一眼就吸引並留住使用者發揮著至關重要的作用。無論是單個色彩的應用,還是多種色彩的搭配使用, 例如網頁主色調,配色以及圖片文字色調的選擇等等,終究都是爲了通過色彩帶給使用者不同的情緒反應,獲得不同的情感體驗。

例如,黃,紅等積極的色彩或主色調的應用,給人以熱情,青春,幸福,快樂等正面情緒,讓使用者不自覺地擁有更加積極正面的情感。而,藍,綠,黑等消極色彩或配色的應用,給人以安靜祥和,自由舒適之感,讓使用者不自覺地平靜下來,變得更加理智而有耐心。總之,利用色彩引發不同的情感傾向,是頁面設計中表達情感的重要途徑之一。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,作為一款中餐廳的線上網頁設計,設計師選擇了最具東方特色的紅,黃色作為整款設計的主色調。這樣的色彩選擇不僅讓整款設計直觀吸睛,引人入勝。而且,還營造出了極具東方之美的氛圍,讓人忍不住喜愛而躍躍欲試。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,以藍,白色為主色調的404報錯頁面,能夠在無形中傳遞出平靜舒適之感,從而更加有效的緩解使用者突然面對報錯時的負面情緒。

*打造清晰直觀的佈局和排版設計,拒絕煩亂和使用者反感

選擇或設計更加清晰,直觀,結構化和層次化的頁面佈局和排版,能夠讓使用者更加簡單快速的把握介面主次,從而避免雜亂無章或毫無層次重點的內容設計,帶給使用者的不快和反感。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,利用更加清晰直觀,且層次結構分明的佈局和排版,突出介面主次,方便使用者更加簡單快捷的查詢所需內容, 拒絕煩亂和使用者反感。

*利用網頁視覺元素的組合和對比,打造舒適,統一的設覺設計

除了利用單個視覺元素(例如色彩,圖片,文字等)吸引使用者,多種視覺元素的組合和對比,對於打造舒適,統一的介面設計,作用也是極佳。比如,通過圖片和文字的色彩,大小,位置,對齊方式,數量,以及層級的組合和對比,建立更加清晰直觀,舒適易懂的頁面設計。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,通過利用Mockplus的「圖片」,「 單行文字」以及「按鈕」 等元件的組合,結合其尺寸,位置,排版,色彩,以及對齊方式的不同,打造出視覺上舒適,統一的網頁原型設計。

此外,一定形狀,網格以及動畫的新增,也能夠非常有效地幫助設計師建立更具視覺魅力的頁面設計。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,通過Mockplus的 快速格子 和 自動填充 功能製作極富視覺魅力的網格,並結合其「單行文字」和「多行文字」元件,設計出層次結構清晰,排版佈局直觀易懂的網頁原型設計,為使用者提供更加簡單流暢的體驗。

最前沿的中國產品人和設計師

總之,把握好各種視覺元素以及元素之間相互組合的基本設計規律,有目的的營造出一定的頁面情感,從而實現與使用者情感層面的對話,給使用者留下極佳的第一映像。

2). 利用便捷流暢的互動設計,提供愉悅的使用者體驗

Web或App設計之中,互動設計不僅能夠滿足使用者需求,體現其功能性和實用性,而且還能夠激發使用者的愉悅心情,提升使用者體驗。換而言之,一款優質的網頁或應用的互動設計,不僅要簡單易懂,讓使用者輕鬆的知道做什麼,怎麼做,以滿足其需求。而且還能允許使用者自由流暢地完成互動設計,成功購買或瞭解相關軟體或產品,提供愉悅的互動體驗,加深使用者印象。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,以上的互動設計,不僅讓使用者瞭解到在登入時需要做什麼。而且,當用戶輸入密碼時,上面的動態人偶還會相應的捂住雙眼。當用戶密碼輸入錯誤時,輸入的密碼不僅會變紅,提醒使用者。 而且,人偶也會相應的給出反映。總之,整款設計給人以俏皮安全之感。可以說是十分暖心的設計了。

當然,互動設計也需要符合實際情境,再簡單流暢的互動設計,不符合相應情境,也可能引起使用者不滿而反感。

3).採用獨具魅力的設計風格和主題,打造有趣特別的使用者體驗

採用獨具魅力的頁面設計風格和主題,不僅能夠提升其頁面設計的趣味性和獨特性,還能夠極大的加深使用者對產品或品牌的印象,讓使用者戀戀不忘,從而成為軟體或產品的直接傳播者或推廣者。而設計師可以從以下幾個方面嘗試進行情感化設計:

*利用不同的設計技巧或風格,簡化或優化介面設計

極簡主義設計風格,能夠極大的簡化網頁介面設計,讓介面更加快速實用,從而緩解使用者因頁面載入而不得不等待的焦躁乏味之感。( 點選瞭解更多簡約網頁設計技巧 )

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,簡約設計的風格,帶給使用者簡單便捷的瀏覽體驗。

扁平化設計風格,作為時下最流行的介面設計風格之一,能夠讓頁面設計更加平滑,突出頁面內容的視覺層級,從而更加方便使用者簡單快速的查詢需要的介面內容。( 點選瞭解更多的扁平化設計技巧 )

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖的例項設計,設計師可以利用Mockplus的「圖示」( Mockplus封裝了超過3000個向量圖示的強大圖示庫,方便設計師更具需要選擇和使用 )元件,簡單設計出具有扁平化設計風格的網頁原型,讓頁面更加平滑流暢,視覺層級突出,使使用者更加方便快捷的查詢和使用需要的資訊。

漸進式設計技巧,隱藏部分介面功能,減少介面噪音對使用者的干擾,從而讓使用者更加直觀快速的完成需要的操作。( 點選連結更多漸進式設計技巧 )

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,漸進式設計技巧,對於提升網頁使用者體驗,作用也是極佳的。

總之,多樣的設計技巧和風格的應用,能夠帶給使用者不一樣的體驗。

*分析受眾特點,選擇不同的設計主題,帶給使用者不同的情感體驗

在具體的網頁或軟體設計中,設計師也要注意分析和把握軟體或產品受眾特點,選擇不同的設計主題,表達不同的情感,從而提供不同的情感體驗。例如,面向兒童的網頁或App設計,就需要更多的新增明亮色彩,可愛有趣的卡通形象,動畫以及遊戲,吸引受眾的同時,體現網站對兒童的喜愛。

*利用幽默風趣的設計,快速引起使用者注意和共鳴

幽默風趣的設計風格,最能直接快速的引起使用者注意,激發使用者情感共鳴,留住使用者的同時,提升使用者參與度。所以,在具體的情感化設計中,也可在介面設計中,嘗試多設計和新增一些幽默視訊,圖片,插畫或動畫,更加有效的吸引和留住使用者。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,幽默風趣的設計風格,給人以輕鬆自由之感,應用到各種報錯頁面,能夠非常有效的緩解使用者的負面情緒。

總之,不同設計風格,技巧以及主題選擇和應用,能夠極大地簡化或優化頁面,帶給使用者不同的情感體驗。

4). 利用暖心文字設計,激發使用者好感和共鳴

直擊心靈的文字設計也是實現與使用者情感交流的重要途徑。相較於冰冷且毫無人情味的介面說明,報錯資訊,通知以及反饋,帶有設計師主觀情感,溫暖,貼心的文字設計,更能激發使用者好感,引導使用者行為的同時,加深使用者對軟體和產品的認可和喜愛。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,暖心的文字設計,結合擬人化的圖示設計,實現與使用者在情感方面的交流,提共更佳的情感體驗。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,委婉而不失趣味性的文字設計,讓頁面更具吸引力的同時,能夠有效地緩解使用者的負面情緒。

2018介面情感化設計,拒絕冷冰冰的人機交流

此款Mockplus網頁原型設計,除了通過可愛的企鵝簡筆畫吸引使用者注意,而且還巧妙的新增帶有撒嬌賣萌意味的文字設計,讓使用者看完後,忍不住點選瞭解詳情。這就是文字設計的魅力。

5). 別出心裁的創意設計,賦予網頁或App個性

創意,創意,創意! 無論哪種設計,失敗與成功之間,差的,始終只是創意。這也是設計師們時常會在著手設計之前,大量瀏覽最新的網頁或情感化設計資源,以激發設計靈感的原因。別出心裁的創意設計,能夠賦予頁面個性和靈氣,讓使用者感受到對方是 「有血有肉的人」,而非冰冷的工具或機器。( 點選下載更多的最新設計資源和素材 )

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖, 利用文字與圖片相互呼應的創意,傳達頁面情感,達到與使用者情感層面的交流。

而這一方面,為更加簡單快捷的原型化,測試並迭代各種情感化設計創意,小編建議大家可以嘗試使用功能強大的Mockplus.

首先,Mockplus提供了強大的元件庫,圖示庫以及 樣式庫 ,能夠幫助設計師快速的將設計創意原型化。而且,其提供的 8種演示和分享方式 ,對於設計師及時測試,獲取反饋並迭代相應創意,也非常實用。

當然,如若,需要團隊協作完成某些Web或App UI的情感化設計,其團隊版和企業版的 團隊協作和管理功能 也是非常值得嘗試的。

6).其它打動使用者的細節設計

情感化設計,可以應用到網頁或App很多頁面設計中,以緩解使用者負面情緒,更加高效的引導使用者行為,並提升使用者對品牌的認同感和忠誠度。比如,登入註冊,引導,反饋,載入,404報錯等頁面的細節設計,不僅能夠打動使用者,讓原本冰冷的人機互動充滿人情味,還能夠有效的促成購買,實現其商業價值。( 點選檢視更多最新創意404報錯設計 )

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,搜尋框圖示變化的細節設計,讓介面更加暖心而有活力。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,登入頁面的歡迎語句的新增,讓死板枯燥的頁面多了一絲暖意。

所以,細節設計也能決定成敗。設計師在平時的UI設計中要重視每一個細節,讓介面處處都流露出真情,使使用者不忍離開。

總之,希望以上提及介面情感化設計技巧和最新設計例項,能對你有所啓發。

最後,情感化設計過程中有哪些注意事項呢?

情感化Web或App介面設計的過程中,設計師們也需要牢記一些注意事項,避免適得其反的情況出現:

*情感化設計在於把握和激發使用者的情感,而不僅僅是設計師感情的抒發

適當在設計中新增代表個人態度的圖片,文字或互動,體現設計師的情感和立場,目的是為激發使用者相應的情緒反應,引起共鳴,從而加深使用者對品牌和產品的印象,增加產品銷量,提升使用者忠誠度。但,設計師需要牢記,萬萬不能將其作為個人情感抒發,甚至發泄的平臺,過多主觀情感的新增,反而會激起一部分使用者的不滿,帶來不好的效果。

2018介面情感化設計,拒絕冷冰冰的人機交流

如圖,一定引語的新增,能夠有效的表明設計師的情感和立場,引起共鳴。 但過多的主觀情感的新增,則可能引起使用者反感,結果反而會適得其反。

*情感化設計具有一定的時效性

同時,設計師也需要了解:情感化設計具有一定的時效性。時代在變化,代表某一情感的象徵(例如文字,圖片,圖示,事物等),也在發生變化。所以,設計師在情感化設計的過程中,也需要考慮到這一點,適時的更新相應的情感設計。

*情感化設計要以軟體功能為基礎

無論是本文所提到的情感化設計,還是小編之前分析過的 頁面視覺層級設計 ,亦或是網頁設計風格的選擇等等,都需要以簡單實用,且滿足使用者需求的軟體功能為基礎。

脫離功能的情感設計,再暖心,也會因無用,而被使用者無情的拋棄。

*情感化設計要注意情境的把控

幽默可以給使用者帶來輕鬆愉悅的體驗,但並不是所有情景都適合幽默風趣的調調。其它情感設計風格和細節也是如此。所以,設計要注意情境的把控,避免引起使用者不滿和反感。

結語

網頁或App介面設計不再僅僅依賴於其功能性,實用性以及適用性的提高,具有更高層級的功能介面人性化設計,也越來越多的受到設計師們關注和重視,以便為使用者提供更加愉悅,暖心的使用者體驗。而情感化設計作為人性化設計的重要組成部分,對於網站能否在第一眼直擊使用者心靈,吸引和留住使用者,提升使用者認同感和忠實度,甚至在潛移默化中將使用者轉化成軟體或產品的宣傳者等等,都發揮著不容小覷的作用。

所以,設計師在Web或App介面設計中,要注意適當新增情感元素,情感化介面的各個模組,讓冷冰冰的人機交流變得暖意洋洋,帶給使用者不一樣的情感體驗。

總之,希望以上講解的Web或App UI 情感化設計技巧 ,最新設計例項以及原型相關設計例項,能對你有所幫助。