聲明:如需轉(zhuǎn)載,請申請本人授權(quán)并保留文章全部信息,嚴禁私自用于任何商業(yè)用途,請尊重作者權(quán)益。
人是有感覺、思想和情感。這些年我看到的一些優(yōu)秀網(wǎng)站和app的體驗都是為情感而設計——不單單只展示一個任務,一路上也在引導反饋。這種反應可以是一句簡單的“好酷”,可以是“哇哦”。
當電影導演創(chuàng)造場景想要他們的觀眾感受到恐懼、悲傷、同情之類的情緒,他們會煞費苦心地選擇正確的燈光、聲音、地點、順序和攝像鏡頭來創(chuàng)造創(chuàng)景。在電影的世界,我們叫這個為“場景設置”,它是電影美感的一個不可缺少的部分。

左圖:諾蘭的《星際穿越》—— 黑洞場景,見證了Matthew McConaughey掉進黑洞的恐懼,驚訝和好奇。右圖:Tony Scott’的《壯志凌云》——摩托車場景,看到了湯姆.克魯斯和一駕F-14噴氣式戰(zhàn)斗機賽跑的興奮感,刻畫了他的動機和冒險精神
現(xiàn)在,你可能想知道情感化如何運用到互聯(lián)網(wǎng)設計中。創(chuàng)造情感化的響應可能不是現(xiàn)代設計師首要考慮的問題,他們經(jīng)常想要用戶做A/B測試。當然,這依賴于我們正在設計的是什么以及設計的背景。然而,用戶也是人,他們是我們的觀眾——不僅僅是一個用在你網(wǎng)站或app的人口統(tǒng)計數(shù)據(jù)。我們用UI元素、畫像、手勢和交互做我們自己的“場景設置”,我們創(chuàng)造氛圍,制造出整個用戶體驗。
數(shù)字世界的運用實例
這里有一些很優(yōu)秀的互聯(lián)網(wǎng)設計,我覺得提供了很棒的體驗給他們的用戶。
一次海上旅行
http://sortieenmer.archives.grouek.com/

浸入式的交互體驗讓你身臨其境
與以上不同的是,這一部分是以第一人稱的角度來簡述故事和經(jīng)驗。前提很簡單,人物角色最終從船上落下,你放在了他的鞋子里——用你的滾輪停留在表面。你真實地感覺自己在用力掙扎以保持不沉,和這種簡單的交互式力學的結(jié)合——累的感覺,聲音,令人窒息,無情的大海。少量的UI元素暗示著人物的能量以及你和界面的關(guān)系。你感到恐懼,疲憊,絕望和悲傷。
這個網(wǎng)站是做什么的?它是為Guy Gotton宣傳航海服的,通過一個宣傳海上安全的鏡頭。他們本來可以做另一個宣傳網(wǎng)站,去展示這個服裝的特性和防水材料相關(guān)的技術(shù)數(shù)據(jù)。取而代之,他們講了一個故事,一個在海上發(fā)生意外的故事,他們給用戶一種浸入式的體驗,讓用戶變得有參與感。它吸引了你,讓你感受到情緒,變得更令人難忘而有意義。
Citymapper
http://citymapper.com/
安卓版(http://citymapper.com/android?referrer=topnav)
IOS版(http://citymapper.com/ios?referrer=topnav)

一些功能展示,不僅僅把用戶帶到他們想要的地方,與此同時也融入了自身的個性
這更是一個明智的例子,關(guān)于如何讓app幫助人們導航他們所在的城市。市面上有大量的地理定位app,Citymapper脫穎而出是被大量用例驅(qū)動。Citymapper融入一些情感是通過一些有個性的優(yōu)秀功能。比如,“帶我去那”的功能就能讓用戶從A到B,當你應該在某一站下車時,會有像振動的小提示。略有變化的設計大大幫助了用戶理解導航。
它能讓用戶很有信心地去探索一座城市,并且使用起來很方便——去處理這種未知的恐懼感。力量和個性匹配——比如當使用帶我回家的功能——hoverboard是一個選項,會觸發(fā)Marty McFly跳上他的懸浮滑板,這能讓你在設備上控制使用的傾斜度。之前的版本是包括彈射器模式和火箭模式。當然這個并不是必要的,很多人可能會問為什么他們要花時間去用這些功能,但是這些小功能會讓這個app變得有趣,用起來很快樂。與大功能匹配的一些小特性在很大程度上會引發(fā)情緒上的反饋。
情非得已
3個平面設計技巧學會動態(tài)字體海報2020-07-09
如何設計出優(yōu)秀的文字類海報排版2020-04-02
7個有效提升傳達率折頁設計技巧2020-03-19
設計師如何解決作品視覺缺少層次感2020-03-14
詳細解析平面設計中元素的使用技巧2020-03-13
設計師必須要學習的平面設計配色技巧2020-03-11
解析設計師常用的6大構(gòu)圖方法2020-03-11
3個幫你快速掌握字體搭配思路2020-03-10
設計師如何設計出中國風主題LOGO2019-10-21
詳解如何讓板式海報設計變得簡單2019-10-21
4個配色技巧幫助您解決色彩問題2021-03-10
設計師需要掌握的平面設計技巧2021-03-10
詳細解析插畫類海報的繪制思路和方法2021-03-09
詳細解析設計師必須掌握的色彩知識2021-03-09
設計師必須要學習的高級配色技法2021-03-10
設計師必須要學習的幾個排版小技巧2021-03-10
詳細解析UI設計中終極配色寶典2021-03-11
詳解如何把產(chǎn)品和背景融合到一起2021-03-11
詳細解析UI設計中終極配色寶典
相關(guān)文章1162021-03-11
詳解如何把產(chǎn)品和背景融合到一起
相關(guān)文章1072021-03-11
設計師必須要學習的幾個排版小技巧
相關(guān)文章1682021-03-10
4個配色技巧幫助您解決色彩問題
相關(guān)文章2022021-03-10
設計師需要掌握的平面設計技巧
相關(guān)文章1882021-03-10
設計師必須要學習的高級配色技法
相關(guān)文章1762021-03-10
詳細解析設計師必須掌握的色彩知識
相關(guān)文章1792021-03-09
詳細解析插畫類海報的繪制思路和方法
相關(guān)文章1842021-03-09
