什麼是用戶體驗
我們在談「用戶體驗設計」之前,首先要弄懂「什麼是用戶體驗」,官方對它的定義是:用戶在使用產品過程中建立起來的一種純主觀感受。
「用戶體驗」這一概念第一次是在Donald Norman 2010年在Uxdesign.com發表的《UX Design Dedined》一文中被提起的。
那「什麼是用戶體驗設計」呢?官方定義是:以用戶為中心的一種設計手段,以用戶需求為目標而進行的設計。翻譯成大白話就是:好的用戶體驗設計就是圍繞着用戶目標,設計出讓他們覺得真香、還想要的使用感受。
用戶體驗設計 & 交互設計 & UI設計的區別
UE/UX用戶體驗設計
UX即User Experience, UX設計是以用戶為中心,將用戶的需求與體驗作為設計的目標與評價標準的設計理念和手段。體驗設計是從消費者的體驗來理解和表達設計。
交互設計
交互設計是定義、設計人造系統的行為的設計領域,它定義了兩個或多 個互動的個體之間交流的內容和結構, 使之互相配合,共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關係。交互設計是從人的交互行為本質來理解和表達設計。
UI設計
UI即User Interface,是人與信息交互的媒介。UI設計包含對軟件的人機交互、操作邏輯、界面美觀的整體設計。但與交互設計師的分工後,當前互聯網U|設計師主要負責界面視覺表現、組件規範、設計系統等。UI設計是從界面交互媒介表達來理解和表達設計。
影響用戶體驗的五要素
《用戶體驗要素》這本書,把影響用戶體驗的因素分為5個層次:a.戰略存在層;b.能力範圍層;c.資源結構層:d.框架層;e.感知層。
(圖源來源網絡)
Tips:大家都聽過上面這個框架,但有多少人會在日常工作時代入式的去思考呢?其實核心是大家平常在做設計時,一定要有產品框架思維的意識去做設計,不要僅停留在好不好看層面,撿了芝麻丟了西瓜,抓不住問題本質。
1. 戰略層
戰略層是一切產品體驗的根本,在這一層要考慮的兩個問題:1.產品想得到什麼,怎樣引導用戶實現?2.用戶想得到什麼,怎樣實現?
用戶需求可通過:問卷調查、用戶訪談、焦點小組、市場調查、現場調研等方法來提取核心點
隨着公司的不斷壯大,它的戰略也會發生改變,戰略可能是一個大戰略會細分到不同的小戰略,他們的目標都是在這個大戰略的基礎上
(圖源來源網絡)
我們拿美團舉例,美團經歷過一次「變黃」,我們嘗試着拿「用戶體驗五要素」來看這件事。
那麼美團的戰略是什麼呢?
可以看出,近幾年美團已經從以前的「團購產品」,把戰略聚焦為Food+Platform,正以「吃」為核心,建設生活服務業從需求側到供給側的多層次科技服務平台。
(圖源來源網絡)
它的這個戰略,跟用戶最基礎的「食」、「住」、「行」需求完美匹配。因此,找到「產品定位」和「用戶需求」之間的平衡點,是保證用戶體驗的第一步。這也就解釋了為什麼有很多產品明明交互視覺體驗很爛,還是會有很多人使用,是因為它們在戰略層做對了。
2. 範圍層
當把用戶需求和產品目標轉變成產品應該提供給用戶什麼樣的內容和功能時,戰略就變成了範圍層。
範圍層指的是:1.我們要做哪些事;2.我們不做哪些事。有了清晰的戰略,「範圍層」就可以朝着戰略的方向變化、拓展。
比如,美團明確了自己的戰略後,就一直圍繞着「戰略層」拓展自己的功能和服務。
(圖源來源網絡)
「吃」前你要出行,因此有了打車和騎行服務
「吃」後你要可以唱歌,看電影,因此有了娛樂相關服務
「吃」太多胖了怎麼辦?游泳健身服務了解一下
(圖源來源美團app)
再比如,支付寶戰略是:鏈接和「錢」有關係的一切服務。因此,在範圍層就不在對「社交」抱有太大的執念,而是也不斷擴充相關功能服務,例如:轉賬、餘額寶、記賬本、彩票、生活繳費、發票管家,等等...
(圖源來源支付寶app)
可以看出,有了清晰的戰略,「範圍層」不僅不會被競爭對手牽着鼻子走,且使產品帶來正向收益,同時還給用戶提供了更聚焦的服務體驗。
3. 結構層
結構層是根據「範圍層」確定下來的功能和信息,通過分析這些信息之間的關係,進行結構化的歸納組合,使其符合用戶心理心智。
這時候我們要在結構層里梳理出產品功能的信息框架,按照戰略強相關的功能優先展示,比如哪個頁面該展示哪些功能,以及展示的順序和大體的流程.交互設計師把控信息架構的合理性,以及前後關係操作起來是否高效.
下面是美團目前涉及到的大概的功能信息結構:
(圖源來源網絡)
右圖中可以看到幾款app信息架構的不同:「訂單」其實是屬於「我的」範疇內,在大眾點評和淘寶里,它們只是「我的」裡面的一個入口,而在美團確單獨拎出來一個tab來承載它。
所以在結構上,不僅要分清楚功能信息之間的從屬關係,同時也要考慮自己產品的特性,進行處理。合理的結構層,能夠使產品功能得到合理的曝光,同時也能讓用戶快速找到他們想要的內容。
4. 框架層
框架層是基於我們上一趴「結構層」梳理出來的功能信息,進行可視化的框架設計,這部分一般是由交互設計師來完成的。
交互設計師在設計交互流程圖的時候會考慮很多的設計點,比如如何將功能信息有效的組織起來,信息之間的關係如何排布,在當前的場景下應該使用什麼樣的交互控件,功能樣式統一性,用戶使用起來是否方便,前後之間的邏輯等問題,交互流程圖是需要反覆思考和驗證的.
有趣的、創新的交互形式固然重要,但是解決產品真正問題,才是最核心的。
比如,拿美團首頁的框架舉例,來看看應該如何從交互角度思考。
(圖源來源網絡)
整個首頁分為了:基礎功能區、生活服務區、廣告區、內容推薦區、導航區。
首先我們看下「基礎功能區」,由於它在不太易操作頂部,所以把位置留給操作頻率較低的功能,比如:「位置切換」、「+」功能;或者給更加全局性的功能:「搜索」。
然後,左上角的個人頭像,點擊進去裡面是產品的「積分體系」,這是給運營同學,讓他們通過一些積分任務手段提升產品的留存和活躍,因此在首頁露出。
「生活服務區」是整個產品戰略的核心,也是用戶來這個產品的首要目標,因此要放在金剛位。
「廣告區」,是擔負着產品收入目標的,放在生活服務區下面,能夠確保在小屏手機也能漏出,不然廣告方會不同意,這畢竟是商務好不容易談來的合作(但如果廣告質量不好的話,會很影響用戶體驗)。
「內容推薦區」,不僅為用戶推薦了優質的內容,同時也給優質的商家更多曝光機會。這樣同時鼓勵其他的商家,告訴他們如果你好好干、好好服務,用戶口碑好了,你也能上推薦位,上來後就會有大波流量過去,你就能賺更多的錢。這樣商家開心、用戶開心、平台也開心,良性循環。
「導航區」這塊就是全局的導航。
因此你可以看出,框架層要考慮的因素包含着:產品戰略、商務合作、運營玩法、商家流量、操作體驗等。優秀的交互設計師,在框架層不僅要權衡好功能之間的主次關係,同時還要平衡好產品目標和用戶體驗的之間的關係。
5. 表現層
最後是「表現層」,也是用戶最直觀能感受到的地方了。
雖然這層經常被稱為「視覺效果」,但是,它絕對不是說好看就完事的,而是你有沒有清晰的傳遞產品定位和業務目標。
到了表現層,UI設計師會根據產品的戰略,功能,以及內容,根據市場的調研分析,使用人群等來判斷這塊產品從視覺上要傳達給用戶什麼樣的設計感覺出來,比如專業的,親民接地氣的,高大上的,二次元的等視覺表現形式。在設計當中利用顏色及空間劃分視覺層級,通過不同平台思考設計表現形式,梳理控件樣式形成規範性及統一性。整體視覺樣式儘量做減法,讓用戶輕鬆看到核心內容以及核心操作。
比如,像開頭所說的「美團變黃了」,不僅在線上的APP整體升級。線下的周邊產品也全黃了。
他們為什麼要變黃呢?
1.它為什麼要變?
從戰略角度上來看,他們定位是生活服務平台,那麼也就意味這是線上和線下相結合的。
目前美團的產品線在品牌認知上比較散,沒有統一的認識,如何做到線下品牌和流量和線上品牌和流量的認知形象達到一個點上,才是核心問題。他們應該是想形成自己的視覺錘,讓用戶有統一的認知,所以才要變。
2.為什麼是黃色?
美團的四大支柱業務分別是:外賣、到店、酒店/旅遊、出行,其中外賣是流量最大的,而且大街上無處不在的穿着黃色衣服的外賣小哥,一看就知道是美團外賣,已經無形中紮根於用戶心智中,在很多人心中美團外賣=美團,所以選擇黃色,看起來是最合適的,教育成本最低的選擇。
所以,視覺設計師在日常工作中要學會抓住問題的本質,要抱着解決業務問題的心態,去做設計,才能給用戶傳遞更優的體驗。
參考文章
https://www.zcool.com.cn/article/ZOTgxOTcy.html
https://www.zcool.com.cn/article/ZNDY2MDQ4.html