首頁(yè)

交互設(shè)計(jì)之探索GUI和VUI

純純

一、GUI和VUI的定義:


1.1GUI


GUI(Graphical UserInterface)圖形界面,市面上最常見(jiàn)的交互方式。點(diǎn)觸,滑動(dòng),作為主要輸入方式。圖像顯示作為主要輸出方式。




1.2VUI


VUI(Voice User Interface)語(yǔ)音界面,常見(jiàn)沒(méi)有屏幕的智能音箱/耳機(jī),靠語(yǔ)言輸入和交流,如我們常見(jiàn)的小艾同學(xué),天貓精靈等。





二、GUI和VUI的發(fā)展歷程:


2.1GUI的發(fā)展歷程


1973年第一個(gè)可視化操作的Alto電腦在施樂(lè)帕洛阿爾托研究中心(Xerox PARC)完成。Alto是第一個(gè)把計(jì)算機(jī)所有元素結(jié)合到一起的圖形界面操作系統(tǒng)。它使用3鍵鼠標(biāo)、位運(yùn)算顯示器、圖形窗口、以太網(wǎng)絡(luò)連接。

1981年施樂(lè)公司推出了Alto的繼承者Star,Alto曾首次使用了窗口設(shè)計(jì)。

1983年蘋(píng)果電腦公司推出Apple Lisa個(gè)人電腦,是全球第一款搭載圖形用戶界面(GUI)的個(gè)人電腦。

1984年蘋(píng)果電腦公司推出Macintosh。

1986年首款用于Unix的窗口系統(tǒng)X Window System發(fā)布。

1988年IBM發(fā)布OS/2 1.10標(biāo)準(zhǔn)版演示管理器(Presentation Manager),這是第一種支持Intel計(jì)算機(jī)的穩(wěn)定的圖形界面。

1992年微軟公司發(fā)布Windows 3.1,增加了多媒體支持。

1995年微軟的Windows 95發(fā)布,其窗口操作系統(tǒng)的外觀基本定型。

1996年微軟發(fā)布Microsoft Bob,此軟件具有動(dòng)畫(huà)助手和有趣的圖片。

1996年IBM發(fā)布OS/2 Warp 4,它的交互界面得到顯著改善,至今仍有不少ATM機(jī)運(yùn)行這樣的系統(tǒng)。

1997年KDE和GNOME兩大開(kāi)源桌面項(xiàng)目啟動(dòng)。

1997年蘋(píng)果電腦公司發(fā)布Mac OS 8,這個(gè)系統(tǒng)具有三維外觀并提供了SpringLoaded Folder功能。

2000年蘋(píng)果電腦公司推出Mac OS X系統(tǒng)的默認(rèn)外觀Aqua。

2001年微軟發(fā)布Windows XP,實(shí)現(xiàn)了主題支持。

2003年Mac OS X v10.3提供了一鍵單擊訪問(wèn)任何已打開(kāi)窗口的功能。

2003年Sun公司的Java桌面系統(tǒng)為GNOME桌面添加了和Mac類(lèi)似的效果。

2006年微軟發(fā)布Windows Vista,對(duì)此前其視窗操作系統(tǒng)的外觀作了較大的修改,實(shí)現(xiàn)了Aero功能。



2.2VUI的發(fā)展歷程


20世紀(jì)90年代,誕生了第一個(gè)可行的、非特定的(每個(gè)人都可以對(duì)他說(shuō)話)的語(yǔ)音識(shí)別系統(tǒng),交互式語(yǔ)音應(yīng)答(Interactive Voice Response,IVR)系統(tǒng)的出現(xiàn)代表了VUI的第一個(gè)重要時(shí)期。人通過(guò)電話線路進(jìn)行交互并執(zhí)行任務(wù),如機(jī)票預(yù)訂、銀行轉(zhuǎn)帳、業(yè)務(wù)查詢等。


目前很多像siri、Google這類(lèi)集成了視覺(jué)和語(yǔ)音信息的APP,以及Amazon Echo這類(lèi)純語(yǔ)音的設(shè)計(jì)產(chǎn)品,逐步發(fā)展并成為主流。隨著語(yǔ)音識(shí)別技術(shù)、AI技術(shù)、互聯(lián)網(wǎng)技術(shù)的發(fā)展,我們已經(jīng)可以在手機(jī)設(shè)備中用語(yǔ)音處理很多事情,但還有很多事情目前無(wú)法通過(guò)語(yǔ)音完成,需要我們探索。




三、GUI和VUI的設(shè)計(jì)要領(lǐng):


3.1GUI



        交互的多樣性:


不同于PC機(jī)通過(guò)鼠標(biāo)來(lái)點(diǎn)擊,在觸控設(shè)備上通過(guò)手指點(diǎn)按,由于手指的精確度相對(duì)于鼠標(biāo)指針差很多,所以子啊移動(dòng)頁(yè)面設(shè)計(jì)當(dāng)中的交互元素一定得辨識(shí)作用,手機(jī)并沒(méi)有懸停操作所以圖標(biāo)如果特征不明顯時(shí)一定要加文字識(shí)別,設(shè)計(jì)時(shí)也應(yīng)注意圖標(biāo)和菜單元素的尺寸。


拖拽和移動(dòng)是很相似的交互工作,被拖拽的元素始終跟隨著緊貼屏幕的指尖


除了使用單指之外,還可以用兩個(gè)手指放大,縮小圖片,如果設(shè)計(jì)了一些新的多指交互一定要給用戶提示和指導(dǎo)。


3.2VUI


3.3VUI的適用場(chǎng)景


智能家居

在智能家居領(lǐng)域VUI應(yīng)用越來(lái)越廣泛,相信在不久的將來(lái)我們一定能夠享受到更多的VUI所帶給我們的便利。


輔助駕駛

車(chē)載語(yǔ)音交互系統(tǒng)使得我們可以在開(kāi)車(chē)的同時(shí)接聽(tīng)電話、聽(tīng)廣播等。


企業(yè)應(yīng)用

未來(lái)大型企業(yè)中將會(huì)多領(lǐng)域應(yīng)用VUI,用于書(shū)寫(xiě)、記錄等工作。


醫(yī)療教育

智能記錄病例、管理病例的出入。


四、VUI的語(yǔ)言設(shè)計(jì)注意事項(xiàng)


過(guò)多的聲音干擾,不但會(huì)增加用戶的心智負(fù)擔(dān),將會(huì)引起用戶感到厭煩,尤其是,語(yǔ)音在資訊的負(fù)荷量上又比單純的聲音來(lái)的更多,考量是否存在存在的必要性就放在格外重要。而言,可以尋找替代的方式,透過(guò)震動(dòng)和燈光甚至狀態(tài)變化來(lái)提示,減少使用者的認(rèn)知負(fù)荷,并確保聲音只會(huì)在特定的時(shí)間點(diǎn)出現(xiàn),并提供使用者自行設(shè)定關(guān)閉聲音的功能


除了聲音本身的設(shè)計(jì)外,還要考慮整體環(huán)境的影響因素,可能周遭受非常的吵雜。換句話說(shuō),在KTV的包廂,吵雜的環(huán)境,會(huì)使用者無(wú)法聽(tīng)到消防警鈴響,而容易造成危險(xiǎn)事件的產(chǎn)生。也因?yàn)槿绱?,消防警鈴的聲音頻率設(shè)計(jì)就應(yīng)該介于2kM到4kM,因?yàn)檠芯恐赋鋈祟?lèi)的耳朵對(duì)于這個(gè)范圍的聲音最敏感


從音量的角度來(lái)看,耳朵對(duì)不同頻率的音量有不同的感知程度,有些聲音聽(tīng)起來(lái)很響亮,有些則是很沉悶因人而異,但比較客觀的量化體驗(yàn)指標(biāo)就是分貝(decibel,dB) ,在尺度上超過(guò)70分貝以上,會(huì)讓人產(chǎn)生憂慮不安,并引發(fā)各種癥狀,因此要盡量避免尺寸大小過(guò)大的設(shè)計(jì), ,,降低主動(dòng)的侵入性。基于這些因素總和來(lái)說(shuō),還要考量到用戶和產(chǎn)品間的距離,與產(chǎn)品愈近,對(duì)于體積的需求量較大,反之為然


在聲音體驗(yàn)設(shè)計(jì)(Amber Case,2018)一書(shū)指出,當(dāng)警告或提示音出現(xiàn)的頻率愈高,就應(yīng)該設(shè)計(jì)成愈短,但不足就是,如果把聲音設(shè)計(jì)成短而急促,從而使用者需要集中相反地,事件發(fā)生時(shí)間間隔長(zhǎng)且久,則聲音提示更需要明顯且激烈的聲音來(lái)提醒用戶,例如手機(jī)鈴聲響時(shí),需要告知用戶

文章來(lái)源:站酷    作者:張陽(yáng)光Designer

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)

交互設(shè)計(jì):如何做到驚喜?

純純

保持好奇,巧妙融合,追求卓越,自然而然

一家之言,未必全面,甚至未必正確。歡迎交流探討。


01
交互設(shè)計(jì)的驚喜,是什么?

之前的文章,有簡(jiǎn)單定義過(guò)交互設(shè)計(jì)的“驚喜”,即為:超出用戶預(yù)期,并讓用戶開(kāi)心。

具體而言有兩類(lèi),分別是:小驚喜、大驚喜。

1 小驚喜

所謂小驚喜,是指一些頗具趣味性或人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。


先說(shuō)趣味性。常見(jiàn)的有兩類(lèi),第一類(lèi)是比較好玩的動(dòng)效,第二類(lèi)是一些小功能。第二類(lèi)有時(shí)也會(huì)包含第一類(lèi)。

動(dòng)效這塊,大家比較熟悉的,有 iPhone 上刪除應(yīng)用前圖標(biāo)的抖動(dòng),仿佛是嚇的發(fā)抖,也可能是在搖頭求饒;還有移動(dòng)端登錄 B 站、輸入密碼時(shí),動(dòng)畫(huà)人物的捂眼捂臉動(dòng)作。

(B 站登錄頁(yè)面)

小功能這塊,也可以分成兩類(lèi)。一類(lèi)是隱藏的小功能,一類(lèi)是有趣的小功能


很多隱藏功能,頭幾次用的時(shí)候,多少會(huì)有一些驚喜之感。

比如在訂閱號(hào)消息列表頁(yè),某個(gè)公眾號(hào)你已經(jīng)幾個(gè)月沒(méi)看過(guò),對(duì)它失去了興趣和信任。這時(shí),嘗試長(zhǎng)按這個(gè)公眾號(hào)的頭像或名稱,會(huì)呼出一個(gè)包含“刪除消息”和“取關(guān)”功能的彈窗。

(訂閱號(hào)消息列表)

還有些隱藏功能,既能讓用戶覺(jué)得驚喜和方便,又能引發(fā)用戶思考。這種思考,可能會(huì)讓用戶感嘆設(shè)計(jì)之妙,也可能也會(huì)給用戶一種猜對(duì)謎語(yǔ)的欣喜之感。

比如用墨刀的時(shí)候,嘗試按數(shù)字鍵 1,會(huì)呼出“內(nèi)置組件”這個(gè)使用頻率非常高的功能,會(huì)讓人覺(jué)得墨刀很聰明。

如果再仔細(xì)看一下,會(huì)發(fā)現(xiàn),“內(nèi)置組件”的縮略圖標(biāo),和其他 4 個(gè)諸如“我的組件”、“圖標(biāo)”等功能的縮略圖標(biāo),并成一列。這 5 個(gè)縮略圖標(biāo)的排列順序(上到下),和它們快捷鍵("、"鍵和數(shù)字鍵1、2、3、4)的排列順序(左到右),是完全一致的。不得不說(shuō),這是一個(gè)簡(jiǎn)單又巧妙的設(shè)計(jì)。


再比如朋友圈里,某個(gè)不熟的好友每天都發(fā)集贊的小廣告,搞的我們不勝其煩。長(zhǎng)按其頭像,會(huì)呼出設(shè)置權(quán)限(屏蔽等)的功能。

有意思的是,長(zhǎng)按好友名字,則不會(huì)呼出這個(gè)功能。要知道點(diǎn)擊頭像或名字是都能進(jìn)入好友主頁(yè)的;另外剛才那個(gè)例子,長(zhǎng)按公眾號(hào)頭像或名字,也都能呼出取關(guān)的彈窗。

個(gè)人的理解,生活中,我們用力長(zhǎng)按一個(gè)人,通常是表達(dá)強(qiáng)烈不滿,比如打架時(shí)。比起長(zhǎng)按名字,長(zhǎng)按頭像更像是長(zhǎng)按真人,所以也更能表達(dá)我們的不滿。


說(shuō)完隱藏的小功能,再說(shuō)下有趣的小功能。比如微信聊天里的扔骰子、石頭剪刀布,微信給朋友發(fā)生日快樂(lè)后漫天飄落的蛋糕,拍照軟件里的貼紙,等等。

最后說(shuō)下帶有人文屬性的交互設(shè)計(jì)小細(xì)節(jié)。常見(jiàn)的有如下類(lèi)型:幫助弱勢(shì)、關(guān)照情緒、表達(dá)情感、保護(hù)隱私。


幫助弱勢(shì)這塊,比如 iPhone 的輔助功能,里面有針對(duì)視力障礙的放大鏡功能、有針對(duì)不識(shí)字群體的旁白功能。

關(guān)照情緒這塊,很重要的一點(diǎn),就是避免引起用戶的負(fù)面情緒。比如微信的刪好友是單方面刪除,被刪時(shí)我們很難察覺(jué)到,而且微信也不會(huì)通知我們。個(gè)人覺(jué)得,微信之所以不通知我們,其中一點(diǎn),就是不給我們添堵。類(lèi)似的還有,微信消息沒(méi)有“已讀”功能,這就大大減輕了接收者的回復(fù)壓力。

表達(dá)情感這塊,比較為人所知的例子,5 月 20 號(hào)這天,微信紅包的限額,從 200 元升到了 520 元。還有一個(gè)例子,在微信聊天里發(fā)一個(gè)“ohh”,長(zhǎng)按并點(diǎn)翻譯,結(jié)果也是一個(gè)驚喜。

保護(hù)隱私這塊,比如借助 iPhone 的“引導(dǎo)式訪問(wèn)”功能,可以讓小朋友只能訪問(wèn)你的某個(gè)視頻應(yīng)用來(lái)看動(dòng)畫(huà)片。再比如別人用你電腦的時(shí)候,如果你不想讓對(duì)方看到你的微信,就可以通過(guò)手機(jī)微信來(lái)鎖定或退出電腦版微信。

2 大驚喜

所謂大驚喜,是指那些系統(tǒng)性大創(chuàng)新,并且能夠引領(lǐng)潮流、代表未來(lái)的交互設(shè)計(jì)。通常而言,這些大驚喜,最開(kāi)始給用戶的感覺(jué),就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone,帶來(lái)了當(dāng)時(shí)的大屏幕:3.5 寸屏幕,以及純觸摸屏,和極為靈敏的觸控體驗(yàn)。

2011 年,Siri 同 iPhone 4S 一起問(wèn)世,為我們帶來(lái)了語(yǔ)音交互。如今,在 100 元就能買(mǎi)到品牌類(lèi)智能音響的情況下,依靠語(yǔ)音交互的智能音響也在慢慢走入尋常百姓家。

也許后喬布斯時(shí)代的 iPhone 創(chuàng)新不如以前,但不可否認(rèn)的是,時(shí)至今日,iPhone 依然在引領(lǐng)潮流,在給我們大驚喜。比如這幾年流行的手機(jī)無(wú)線充電和以 AirPods 為代表的極簡(jiǎn)的無(wú)線耳機(jī)。

以上是比較廣為人知的交互設(shè)計(jì),還有一些不太為人所知的設(shè)計(jì)。比如在家里網(wǎng)購(gòu)一條床單,但是不知道床的尺寸,家里又沒(méi)有尺子。這時(shí),打開(kāi) iPhone 里的測(cè)距儀這款 App,就可以量出床的尺寸,會(huì)不會(huì)覺(jué)得有點(diǎn)酷。

(測(cè)距儀 App)

微信在引領(lǐng)潮流方面也有一些建樹(shù),比如極大的普及了二維碼和掃一掃。小程序作為一種體驗(yàn)接近原生 App、同時(shí)又不用下載的產(chǎn)品,也正在引領(lǐng)新一輪的潮流。

還有一個(gè)比較酷的功能,就是以圖搜圖。筆者最早用過(guò)百度和谷歌的相關(guān)功能,主要是在電腦上搜索相似的圖片,使用頻率極低。

假設(shè)一個(gè)場(chǎng)景,比如在路上看到一個(gè)陌生人的外套很好看,但又不好意思上前問(wèn),就可以拿起手機(jī),利用淘寶的拍立淘功能,拍張照就能馬上看到相同或相似的商品。

如果淘寶上沒(méi)有搜到類(lèi)似商品,還可以用微信的掃一掃識(shí)物。和拍立淘相比,區(qū)別之處有兩點(diǎn)。第一,不用拍,直接能識(shí)別,不過(guò)通常得等 1-3 秒;第二,識(shí)物結(jié)果里面,除了商品,可能還會(huì)有百科詞條和資訊。


02
交互設(shè)計(jì):如何做到驚喜?

個(gè)人覺(jué)得,有 4 個(gè)要點(diǎn):既要有好奇心,又要有卓越心;既要天馬行空,又要保持自然。

聽(tīng)起來(lái)可能有點(diǎn)亂,且聽(tīng)筆者一一道來(lái)。


1 保持好奇心

筆者觀察身邊讀小學(xué)的小孩,發(fā)現(xiàn),當(dāng)大人聊天時(shí),特別是談?wù)聲r(shí),小孩特別喜歡坐在旁邊聽(tīng),而且聽(tīng)的很認(rèn)真。小孩有時(shí)也會(huì)說(shuō)兩句,或是問(wèn)問(wèn)題,或是發(fā)表自己的看法。

看得出來(lái),小孩對(duì)成年人的世界,懷有極大的好奇心。實(shí)際上,不止于成年人的世界,小孩對(duì)周遭世界都有比較強(qiáng)烈的好奇心。

整體而言,成年人對(duì)周遭世界的好奇心,遠(yuǎn)不如小孩。我們互聯(lián)網(wǎng)從業(yè)者也不例外。

好奇心和交互設(shè)計(jì),有什么關(guān)系?

交互設(shè)計(jì),某種程度上,也是一種創(chuàng)作。好的創(chuàng)作,一定來(lái)自生活。這就需要我們?nèi)ビ^察生活。

觀察生活,非常重要的一點(diǎn),就是好奇心,對(duì)周遭人、事、物要有足夠的好奇心。

比如上文提到的例子,在 iPhone 上刪除應(yīng)用前,應(yīng)用圖標(biāo)會(huì)抖。這種抖是一種趣味隱喻,既可以理解成嚇的發(fā)抖,也可以理解成搖頭求生。如果對(duì)生活沒(méi)有足夠的好奇心,是很難留意到這種生活細(xì)節(jié),并把它們作為一種隱喻運(yùn)用到交互設(shè)計(jì)中的。

以上是關(guān)于好奇心,還有一種特質(zhì),也是在小孩身上表現(xiàn)突出,同時(shí)也和本文主題有關(guān),那就是:童趣。

還是上文的例子,在 B 站 App 上輸入登錄密碼時(shí),動(dòng)畫(huà)人物會(huì)捂眼睛。這個(gè)設(shè)計(jì),可能不會(huì)打動(dòng)所有用戶,但至少一部分用戶會(huì)覺(jué)得比較有趣。如果我們內(nèi)心沒(méi)有一點(diǎn)童趣,可能也會(huì)覺(jué)得,這個(gè)設(shè)計(jì),沒(méi)啥意思。

玩是人的天性。對(duì)于比較好玩的交互設(shè)計(jì),大部分人是比較容易產(chǎn)生共鳴的。實(shí)際上,據(jù)筆者觀察,我們大部分從業(yè)者是有童趣的。我們比較缺的,是好奇心。

那么,怎樣判斷自己是否擁有足夠的好奇心,其標(biāo)志是什么?

個(gè)人觀點(diǎn),有兩個(gè)標(biāo)志。第一,是對(duì)與個(gè)人利益無(wú)關(guān)的生活小事的關(guān)注,遠(yuǎn)多于對(duì)個(gè)人利益本身的關(guān)注。第二,觀察和思考,遠(yuǎn)多于評(píng)價(jià)和自大;追本和溯源,遠(yuǎn)多于偏見(jiàn)和傲慢。

為什么會(huì)提到個(gè)人利益?

因?yàn)椋ǔ6?,個(gè)人利益,尤其是短期利益(比如少花時(shí)間設(shè)計(jì)和修改原型),往往會(huì)和用戶體驗(yàn)存在一個(gè)此消彼長(zhǎng)的關(guān)系。

如果過(guò)于關(guān)注個(gè)人利益,不僅很難照顧到用戶體驗(yàn),甚至?xí)τ脩趔w驗(yàn)。至于給用戶帶來(lái)驚喜,就更無(wú)從談起了。

回到現(xiàn)實(shí)當(dāng)中。在時(shí)代洪流面前,好奇心的兩個(gè)標(biāo)志,顯得很難,該如何實(shí)現(xiàn)?

關(guān)鍵在于找到背后的源動(dòng)力。這個(gè)源動(dòng)力,在筆者看來(lái),有兩點(diǎn),分別是:求知若渴、淡泊寧?kù)o。


求知若渴,可以源源不斷的驅(qū)動(dòng)我們?nèi)ビ^察、去思考萬(wàn)事萬(wàn)物的規(guī)律和聯(lián)系。

淡泊寧?kù)o,正如諸葛亮在《誡子書(shū)》中所說(shuō),“非淡泊無(wú)以明志,非寧?kù)o無(wú)以致遠(yuǎn)”。人的心力和精力終歸是有限的,如果我們沉迷名利、物欲、享樂(lè),就難有興趣和精力去琢磨萬(wàn)事萬(wàn)物了。

所以,只要找回自己童年的那種求知若渴,同時(shí)修身養(yǎng)性到淡泊寧?kù)o,這份好奇心,就會(huì)回來(lái)。

2 巧妙融合

某種程度上,很多帶給我們驚喜的交互設(shè)計(jì),都是一種巧妙融合。

筆者把這種巧妙融合,初步分成了三類(lèi),分別是:簡(jiǎn)單融合、直接融合、委婉融合


簡(jiǎn)單融合,最常見(jiàn)的就是隱藏功能。把一個(gè)較為簡(jiǎn)單的操作動(dòng)作,比如長(zhǎng)按、雙擊、下拉、左滑等,和一個(gè)合適的功能,融合在一起。用電腦時(shí)我們常說(shuō)的快捷鍵,也屬于這一類(lèi)。

通常而言,操作對(duì)應(yīng)什么功能,講究的是合適,并無(wú)固定章法束縛。比如在微信朋友圈,發(fā)表文字的功能可以靠長(zhǎng)按(相機(jī)圖標(biāo))喚起,設(shè)置權(quán)限的功能也可以靠長(zhǎng)按(好友頭像)喚起。所以,簡(jiǎn)單融合這塊,可供我們發(fā)揮的空間很大。

另外,簡(jiǎn)單融合最常見(jiàn)的形式——隱藏功能,既實(shí)現(xiàn)了界面的簡(jiǎn)潔,又帶來(lái)了一定驚喜。

簡(jiǎn)單融合,既簡(jiǎn)單,又實(shí)用。建議大家充分開(kāi)發(fā)這一塊。

直接融合,是指將生活中的趣味性,直接搬到軟件中,搬到交互設(shè)計(jì)中。比如微信聊天中的扔骰子、石頭剪刀布,以及漂流瓶、抽獎(jiǎng)等。

這一類(lèi)融合,有點(diǎn)像商場(chǎng)里的電玩城,雖然我們不會(huì)經(jīng)常去玩,但確實(shí)比較好玩。

委婉融合,是指用明喻或隱喻的手法,將生活中微不足道的一些細(xì)節(jié),移植到交互設(shè)計(jì)中。

這種移植,有時(shí)是直白的。比如 Mac 上打開(kāi)應(yīng)用時(shí),其圖標(biāo)會(huì)在 dock 欄里有規(guī)律的彈跳,這會(huì)讓我們聯(lián)想到皮球的彈跳。

這種移植,有時(shí)是隱晦的。比如 iPhone 上刪除應(yīng)用前,其圖標(biāo)會(huì)抖。這種抖,是害怕還是求饒,任憑我們想象。

這種移植,有時(shí)是無(wú)聲的。比如在朋友圈,要想呼出隱藏的設(shè)置權(quán)限功能,只能長(zhǎng)按頭像,長(zhǎng)按名字則不行。這個(gè)設(shè)計(jì),不乏想象空間。如果不嘗試長(zhǎng)按名字,則不會(huì)發(fā)現(xiàn)這個(gè)細(xì)節(jié)。

委婉融合,有時(shí)會(huì)帶一些趣味性。更為重要的是,它能夠引發(fā)我們的思考和想象,所以是一種很出彩的融合。這種融合,也會(huì)賦予交互設(shè)計(jì),一種禪的味道。

整體而言,筆者非常推薦委婉融合。

3 追求卓越

如果目標(biāo)是小驚喜,則保持好奇心、并做到巧妙融合,基本足矣。

如果目標(biāo)是大驚喜,則需要雄心壯志,需要舍我其誰(shuí),需要追求卓越。

日常工作中,可能會(huì)有這樣的對(duì)話。“這個(gè)動(dòng)效/功能,實(shí)現(xiàn)不了”。

大驚喜里的幾個(gè)例子,比如初代 iPhone 的觸控體驗(yàn),iPhone 里的測(cè)距儀,微信的掃一掃識(shí)物。這種設(shè)計(jì),意味著要修一條最好的長(zhǎng)城,背后往往有很多技術(shù)難題要攻克,有很多臟活累活要做。

如果團(tuán)隊(duì)文化就是做出最優(yōu)秀的交互設(shè)計(jì),那么,“實(shí)現(xiàn)不了”這句話,估計(jì)就聽(tīng)不到了。取而代之的,可能是:“還在研究中”,“下個(gè)大版本能上”。

4 自然而然

提到驚喜,還有一款值得研究和學(xué)習(xí)的產(chǎn)品,那就是錘子手機(jī)的 Smartisan OS。

個(gè)人觀點(diǎn),在小驚喜方面,Smartisan OS 頗有建樹(shù)。在大驚喜方面,Smartisan OS 也進(jìn)行了一些值得學(xué)習(xí)的探索。

先說(shuō)小驚喜,比如華麗而細(xì)膩的桌面翻頁(yè)動(dòng)畫(huà),比如四指橫劃桌面可以切換桌面背景。還有一些貼心的小功能,比如靜音可以設(shè)置時(shí)間,比如方便的長(zhǎng)截屏。

(靜音可設(shè)置時(shí)間)

(長(zhǎng)截屏)

再說(shuō)大驚喜。2016 年 10 月發(fā)布的一步和大爆炸,是比較大比較系統(tǒng)的功能,在當(dāng)時(shí)也很新。錘子公司也一直有宣傳這兩個(gè)功能。所以相對(duì)而言,這兩個(gè)功能是 Smartisan OS 的大驚喜。

筆者的備用機(jī)是錘子手機(jī),身邊也有朋友在用錘子手機(jī)。以一步為例,這個(gè)功能,筆者體驗(yàn)過(guò)很多次。但平常很少用,身邊朋友的情況也類(lèi)似。

(一步)

根據(jù)使用情況和主觀感受,個(gè)人覺(jué)得,一步這個(gè)大驚喜,還存在進(jìn)步空間,主要有兩個(gè)方面。

第一,宏觀層面。一步作為新生事物,好比一顆新種子。種子破土而出時(shí),是一顆嫩芽,而不是一棵大樹(shù)。新生的一步功能繁多,猶如一棵破土而出的大樹(shù),一方面有違自然規(guī)律,另一面因?yàn)楣δ芊倍?,很多用戶無(wú)法一下子看懂,看不懂可能就不想用了。

第二,微觀層面。一步這棵新大樹(shù),結(jié)了很多不同的果子,比如拖拽圖片到其他應(yīng)用、切換后臺(tái)應(yīng)用、展示最近圖片/文件等。這些果子,是用戶真正需要的嗎?這個(gè)是要存疑的。

比如拖拽圖片到朋友圈就能發(fā)朋友圈這個(gè)設(shè)計(jì)。通常而言,我們發(fā)到朋友圈的圖片都是精挑細(xì)選的,會(huì)占用一定量的時(shí)間,比如旅游或聚會(huì)結(jié)束后發(fā)的照片。一步解決的是效率問(wèn)題。發(fā)朋友圈的時(shí)候,少點(diǎn)幾下這種效率問(wèn)題,優(yōu)先級(jí)是比較靠后的,我們沒(méi)那么在乎。

還有拖拽圖片/文件這個(gè)交互動(dòng)作,大家通常在電腦上用的比較多,在手機(jī)上是沒(méi)有這個(gè)習(xí)慣的,實(shí)際上應(yīng)用場(chǎng)景也少。在手機(jī)上,大家一般只習(xí)慣拖拽應(yīng)用圖標(biāo)。

還有切換后臺(tái)應(yīng)用這塊,大家第一個(gè)想到的,一定是系統(tǒng)自帶的,已經(jīng)用慣了。而且喚起速度比一步快,點(diǎn)擊面積也比一步大。

總的來(lái)說(shuō),微觀層面上,比較缺讓大家能馬上想到一步的功能點(diǎn)。

最后,總結(jié)一下。對(duì)于領(lǐng)先時(shí)代、引領(lǐng)潮流的交互設(shè)計(jì),需要做到自然。

具體而言,就是,大驚喜是一種系統(tǒng)性的大功能,好比一棵大樹(shù)。這棵大樹(shù),最好有一個(gè)從種子到果子的生長(zhǎng)過(guò)程,這樣最自然,生命力也會(huì)最旺盛。

因?yàn)?,從破土而出的嫩芽階段,就可以通過(guò)用戶反饋和數(shù)據(jù)來(lái)檢驗(yàn),這種嫩芽,是不是真的對(duì)用戶有價(jià)值。如果價(jià)值不大或沒(méi)有價(jià)值,還可以再調(diào)整。如果長(zhǎng)成大樹(shù)結(jié)滿果子,再去調(diào)整,就很難了。


結(jié)語(yǔ)

交互設(shè)計(jì)小細(xì)節(jié),如果有一定的趣味性或人文屬性,則是小驚喜。

系統(tǒng)性工程的交互設(shè)計(jì),如果最初感覺(jué)很酷,而且能引領(lǐng)潮流、代表未來(lái),則是大驚喜。

始終保持孩童身上那種非功利的好奇心,用心觀察并思考生活中的小事;

將生活小事和交互設(shè)計(jì)巧妙融合起來(lái);

以上兩點(diǎn),可以幫我們做出小驚喜類(lèi)的交互設(shè)計(jì)。

追求卓越,獨(dú)立思考,做最酷最好的交互設(shè)計(jì);

酷是結(jié)果也好,是目標(biāo)也好,都不是最重要的。最重要的是,避免刻意和心切。醞釀大驚喜,猶如培養(yǎng)一個(gè)新生的孩子,需要投入極大耐心和精力,需要讓孩子自然成長(zhǎng)。沒(méi)有家長(zhǎng)會(huì)教半歲的孩子唱歌、把 3 歲的孩子送到高中念書(shū)。

再加上以上兩點(diǎn),可以幫我們做出大驚喜類(lèi)的交互設(shè)計(jì)。

最后,用愛(ài)因斯坦的一句話來(lái)共勉。

想象力比知識(shí)更重要。

文章來(lái)源:站酷    作者:SnowDesign
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


交互設(shè)計(jì)之尼爾森的十大可用性原則

純純

系統(tǒng)應(yīng)該在合適的時(shí)間內(nèi)通過(guò)適當(dāng)?shù)姆答?始終讓用戶了解正在發(fā)生的事情——尼爾森


自我理解:用戶無(wú)論在界面上做什么,都應(yīng)該及時(shí)告知他發(fā)生了什么或者進(jìn)展到什么程度??梢岳斫鉃槿伺c人的溝通,界面需要及時(shí)告訴我們做了什么,現(xiàn)在是什么情況。


a.  這種告知應(yīng)該是及時(shí)的。

加載任務(wù)在互聯(lián)網(wǎng)中是最常見(jiàn)的,在加載過(guò)程中應(yīng)當(dāng)及時(shí)傳達(dá)加載過(guò)程,減少用戶的心理等待時(shí)間。在外部加載總時(shí)間無(wú)法優(yōu)化的時(shí)候,使用何種方式能有更好的用戶體驗(yàn)是設(shè)計(jì)時(shí)需要考慮的。

undefined

undefined

undefined


b.  應(yīng)當(dāng)告知用戶你在哪里

你的界面需要引導(dǎo)用戶來(lái)操作,即作為用戶應(yīng)該清楚的明白我在什么位置,我下一步可以去做什么操作。

現(xiàn)在app的很多設(shè)計(jì)基礎(chǔ)包括頂部的導(dǎo)航分欄和底部的tab bar都是為了告訴用戶他在哪里。

在做一些概念設(shè)計(jì)時(shí)候,如果單純是為了更好的視覺(jué)效果,就對(duì)這些基礎(chǔ)分欄進(jìn)行大刀闊斧的設(shè)計(jì),最終導(dǎo)致了好看是好看,可是用戶都不知道這頁(yè)面是干什么的結(jié)果,很明顯是違背了最基本的交互原則 狀態(tài)可見(jiàn)原則。

undefined


c.  應(yīng)當(dāng)告知用戶事情怎么樣了

用戶在你的界面是要做什么事情,這是你在設(shè)計(jì)之前應(yīng)該思考的問(wèn)題。

如何把用戶要做的這件事情更好的呈現(xiàn)給用戶,反饋給用戶以及有哪些信息需要反饋給用戶都是你要從交互的角度思考的,這包括過(guò)去發(fā)生的信息和即將發(fā)生的信息,也包括正向反饋和負(fù)向反饋。(這種操作是否成功了?這種操作進(jìn)展到什么程度了?如果這樣操作會(huì)有什么后果?點(diǎn)擊之后會(huì)達(dá)到什么頁(yè)面?這里是否可以點(diǎn)擊?)


很多概念性的設(shè)計(jì)很酷,從交互的角度上來(lái)看也是因?yàn)榻缑鎸?duì)信息進(jìn)行了很好的反饋,比如下面的設(shè)計(jì)就是對(duì)登山的信息進(jìn)行了很直觀的反饋。(來(lái)自設(shè)計(jì)設(shè)計(jì)師anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept


undefined


undefined


自我理解:不同的人生活在不同的環(huán)境里面,不同的界面也有不同的外部環(huán)境。盡量保證界面在自己產(chǎn)品定義的風(fēng)格里面,如果有機(jī)會(huì)還原真實(shí)世界的狀態(tài)也很好。


a.  根據(jù)用戶制定產(chǎn)品語(yǔ)言

在制定產(chǎn)品語(yǔ)言時(shí),要了解產(chǎn)品的用戶人群,使用相對(duì)應(yīng)的用戶群體所熟悉的文字語(yǔ)言 圖形語(yǔ)言  板式結(jié)構(gòu)  配色方法。要讓我們的用戶覺(jué)得這個(gè)產(chǎn)品很符合自己,而不是讓一個(gè)老大爺去滑滑梯的感覺(jué)。一般來(lái)講即便是同一產(chǎn)品,在國(guó)內(nèi)外的產(chǎn)品語(yǔ)言也是有所不同的。

a. 模擬真實(shí)環(huán)境

產(chǎn)品在一些展示上模仿現(xiàn)實(shí)世界的樣子,可以讓用戶快速接受,并感受到真實(shí)易懂。不僅僅局限于靜態(tài)外觀的模仿,還包括模擬真實(shí)物品的動(dòng)態(tài)效果 聲音等 都能給用戶良好的使用體驗(yàn)

很多逼真的動(dòng)效也是來(lái)自真實(shí)世界的映照。比如下面的可樂(lè)瓶的晃動(dòng)就和真實(shí)世界很接近,讓用戶有很強(qiáng)的代入感。(作品來(lái)自設(shè)計(jì)師dannniel 原地址:https://dribbble.com/shots/6351526-Select-Drink-Animation

自我理解:為了不讓用戶進(jìn)入一個(gè)錯(cuò)誤的場(chǎng)景或者結(jié)果,對(duì)于一些特殊操作應(yīng)該給予撤回重做,讓用戶能夠充分的確定接下來(lái)的行為。

a.  返回到原始狀態(tài)

可以理解為悔棋,即已經(jīng)發(fā)生的行為返回到原始的頁(yè)面狀態(tài),這個(gè)條件的設(shè)置也應(yīng)該有一些條件的限制,不能一直無(wú)限返回。





自我理解:君子常常言行一致,好的產(chǎn)品也是一樣。保持為一個(gè)統(tǒng)一的整體,包括產(chǎn)品內(nèi)部和產(chǎn)品外部,也包括線上和線下。


a.  與競(jìng)品保持一致

很多人講現(xiàn)在的同一類(lèi)產(chǎn)品的同質(zhì)化現(xiàn)象嚴(yán)重,其背后也是有一定原因的。相同或相似產(chǎn)品的用戶習(xí)慣保持一致,即意味著用戶需要更少的時(shí)間去學(xué)習(xí)甚至不需要學(xué)習(xí)。從產(chǎn)品設(shè)計(jì)上講,用戶使用越方便易用,產(chǎn)品設(shè)計(jì)的越成功。和相關(guān)主流競(jìng)品做出比較大差異化設(shè)計(jì)時(shí)候,雖然擺脫了同質(zhì)化的問(wèn)題,但是很多常規(guī)操作卻需要用戶重新學(xué)習(xí),這樣帶來(lái)的后果很有可能就是用戶流失。所以,沒(méi)有充分的理由,請(qǐng)與競(jìng)品保持一致。



b.  請(qǐng)建立一套完整的規(guī)范

一套完整的規(guī)范包括組件 色彩 間距  版塊結(jié)構(gòu) 等。規(guī)范可以讓你的產(chǎn)品一致性更強(qiáng),你要讓用戶能夠?qū)δ愕漠a(chǎn)品產(chǎn)生一定的規(guī)范性印象,當(dāng)他看到一張頁(yè)面就能聯(lián)想到這是什么產(chǎn)品。

undefined


c.  請(qǐng)保持產(chǎn)品迭代的一致性

現(xiàn)在隨著互聯(lián)網(wǎng)市場(chǎng)的不斷穩(wěn)定,很多產(chǎn)品進(jìn)入了穩(wěn)定的迭代期。但是在迭代期也應(yīng)該以保持產(chǎn)品語(yǔ)言 用戶使用習(xí)慣的一致性為一大重要原則,版本的迭代也應(yīng)該逐步進(jìn)行,不要急功近利。盡量保持原有的設(shè)計(jì)元素一致性,新功能的創(chuàng)新也盡量不要損害原有用戶的使用體驗(yàn)。


自我理解:再發(fā)生錯(cuò)誤之前采取措施來(lái)避免。


a. 引導(dǎo)用戶,不要讓錯(cuò)誤出現(xiàn)。

很多app迭代更新之后會(huì)有操作指引,目的就是為了讓用戶學(xué)習(xí),減少錯(cuò)誤操作。很多引導(dǎo)頁(yè)也有相類(lèi)似的功能。


b. 給予提示,尤其是用戶在做一些重要操作的時(shí)候

一些重要的敏感操作,產(chǎn)品通過(guò)二次詢問(wèn)得到用戶的確認(rèn),




自我理解:能讓你的軟件產(chǎn)品來(lái)記住,就不要讓你的用戶來(lái)記。盡可能的在設(shè)計(jì)產(chǎn)品的時(shí)候,不要讓用戶去記憶,把用戶當(dāng)傻瓜。

a 記住用戶的使用操作記錄

這個(gè)記錄不單單是在某一設(shè)備上,一般來(lái)講都是跨設(shè)備進(jìn)行同步。用戶在使用的時(shí)候不用來(lái)回調(diào)整,體驗(yàn)感是很強(qiáng)。

 


b  讓用戶選擇信息而不是填寫(xiě)

填寫(xiě)是一件成本極大的事情,很多用戶不愿意在這上面花費(fèi)時(shí)間。所以產(chǎn)品在設(shè)計(jì)的時(shí)候要盡量讓用戶去選,而不是去寫(xiě)。

undefined

c 自動(dòng)讀取

思考產(chǎn)品一些功能的使用場(chǎng)景,有沒(méi)有自動(dòng)智能化的需要。即不用問(wèn)候產(chǎn)品使用者,自動(dòng)提供解決方案。注意,這里講的是提供方案,不是解決方案。提供大多數(shù)的解決方案,可以節(jié)省使用者的交互步驟或者瀏覽時(shí)間等,也是易用性高的表現(xiàn)。

d 提供適量的信息

其實(shí)另外一個(gè)交互定律法則(以后會(huì)講)其實(shí)提到了選擇的數(shù)量,移動(dòng)端的選項(xiàng)一般不會(huì)超過(guò)五個(gè),超過(guò)五個(gè)用戶的頭腦就會(huì)混亂。所以要考慮信息的擺放位置在哪里,一方面是需求決定的,另一方面也應(yīng)該控制每一個(gè)選項(xiàng)的數(shù)量,不要讓用戶感到焦慮。


自我理解:一般來(lái)講產(chǎn)品的用戶群體是多樣化,用戶的使用熟悉度也是有差別的。要照顧到絕大多數(shù)用戶群體的使用體驗(yàn),所謂的高頻是每一個(gè)用戶群體比較常使用。


a.  設(shè)置快捷/重復(fù)入口

講產(chǎn)品常用或者主打的功能放在產(chǎn)品容易操作的位置或者重復(fù)出現(xiàn),用戶可以高效的完成自己的需求。

一般來(lái)講用戶的使用頻率越高越要放在操作熱區(qū)和表面,反之亦然。

b.  用戶自定義常用功能

照顧到不同用戶對(duì)于某些功能的需求不同,對(duì)產(chǎn)品的部分功能進(jìn)行用戶自定義化操作,提高用戶使用的靈活性。


c.  給用戶默認(rèn)選項(xiàng)

將用戶經(jīng)常使用的選項(xiàng)作為默認(rèn),減少用戶操作時(shí)間,達(dá)到靈活高效的目的。像淘寶都會(huì)設(shè)置默認(rèn)的收貨地址,每次下單不用每次都輸入,十分高效。(當(dāng)然也有翻車(chē)的時(shí)候)



自我理解:互聯(lián)網(wǎng)用戶閱讀產(chǎn)品的一個(gè)很重要的特點(diǎn)就是快。即不是來(lái)閱讀不是來(lái)看,而是掃一眼。所以要求頁(yè)面上的內(nèi)容能夠清晰可見(jiàn),方便用戶快速捕捉到自己喜歡閱讀的信息,減少不必要的干擾,簡(jiǎn)潔高效。

a.  清晰的板塊劃分

把頁(yè)面內(nèi)容的優(yōu)先級(jí)別進(jìn)行分級(jí),清晰的板塊劃分將會(huì)引導(dǎo)用戶操作。還可以將頁(yè)面的主推內(nèi)容向用戶展示,避免用戶分不清重點(diǎn)。


b.  減少視覺(jué)噪音

注意頁(yè)面的主角是誰(shuí),在平面設(shè)計(jì)中也有相同的概念。不要讓背景或者裝飾嘩眾取寵,而影響主要信息的傳遞,視覺(jué)設(shè)計(jì)是來(lái)輔助業(yè)務(wù)表達(dá)的。如果核心需求沒(méi)有傳遞好,那就會(huì)單純地成為一件藝術(shù)品,而不是設(shè)計(jì)作品。所以在設(shè)計(jì)過(guò)程中,要權(quán)衡視覺(jué)點(diǎn),減少不必要的噪音干擾。


c. 嚴(yán)格遵守設(shè)計(jì)的四大基本原則:親密  對(duì)比  重復(fù)   對(duì)齊

落實(shí)到界面上包括間距 字號(hào) 字重 版式節(jié)奏 。其實(shí)看到看到很多界面做的不精彩不優(yōu)美,就是基礎(chǔ)性的原則就沒(méi)有完全落實(shí)貫徹。這里就不舉例,基本所有的設(shè)計(jì)都要遵守的原則,很重要,很重要,很重要。


undefined


自我理解:要考慮到頁(yè)面可能發(fā)生意外,錯(cuò)誤發(fā)生后要及時(shí)彌補(bǔ)。


a.  提供清晰地說(shuō)明和解決方案

考慮到可能會(huì)達(dá)到的錯(cuò)誤界面。在發(fā)生的錯(cuò)誤結(jié)果上,使用明確清晰的語(yǔ)言告知錯(cuò)誤的原因,并給予解決方案。

自我理解:要考慮到頁(yè)面可能發(fā)生意外,錯(cuò)誤發(fā)生后要及時(shí)彌補(bǔ)。這一部分其實(shí)主要進(jìn)行一些說(shuō)明,讓用戶操作方便,相當(dāng)于使用說(shuō)明書(shū)。

a.  無(wú)需文檔

進(jìn)行新頁(yè)面的設(shè)計(jì)盡量直觀清晰,符合用戶習(xí)慣,無(wú)需引導(dǎo)即可使用。

b.  一次性提示

改版引導(dǎo)或者新功能引導(dǎo)給予一定的提示

c.  常駐性提示

對(duì)于產(chǎn)品的操作性功能或者操作必須注意到的問(wèn)題,產(chǎn)品需要進(jìn)行一定說(shuō)明

d.  幫助文檔

用來(lái)解釋一些常見(jiàn)問(wèn)題。



文章來(lái)源:站酷    作者:花城丶

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



淺析用戶體驗(yàn)四維度

ui設(shè)計(jì)分享達(dá)人

用戶體驗(yàn),是用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種純主觀感受。

 

解讀用戶體驗(yàn),可以有很多視角。本文提供一個(gè)以人為本的視角:用戶體驗(yàn)四維度。具體如下。

 

HI X:Human Interface Experience,人與界面的交互體驗(yàn)。

HC X:Human Content Experience,人與內(nèi)容的交互體驗(yàn)。

HH X:Human Human Experience,人與人的交互體驗(yàn)。

HB X:Human Brand Experience,人與品牌的交互體驗(yàn)。


用戶體驗(yàn)四維度

 

 

01 四維度的概念

 

怎樣判斷一款產(chǎn)品有幾個(gè)維度?這就要從四維度的概念說(shuō)起。

 

1. HI X(人與界面的交互體驗(yàn))

 

HI X 是指用戶在瀏覽、閱讀、操作界面過(guò)程中產(chǎn)生的主觀感受。

 

HI X 既受信息架構(gòu)、交互設(shè)計(jì)和UI設(shè)計(jì)的影響,也受根需求和功能架構(gòu)的影響。主要依托手機(jī)和電腦的互聯(lián)網(wǎng)產(chǎn)品,天然存在界面。所以,HI X 屬于基礎(chǔ)屬性,所有產(chǎn)品都有。

 

2. HC X(人與內(nèi)容的交互體驗(yàn))

 

HC X 是指用戶在消費(fèi)內(nèi)容時(shí),內(nèi)容本身帶給用戶的主觀感受。

 

這里的內(nèi)容,既包括衣服、鞋子等實(shí)體商品,也包括文章、圖片、視頻等虛擬內(nèi)容。諸如淘寶、網(wǎng)易嚴(yán)選等電商產(chǎn)品,以及公眾號(hào)、Instagram、抖音等 UGC 產(chǎn)品,都具備 HC X 屬性。

 

3. HH X(人與人的交互體驗(yàn))

 

HH X 是指用戶與其他用戶、產(chǎn)品工作人員溝通交流時(shí)產(chǎn)生的主觀感受,或產(chǎn)品的社區(qū)氛圍、溝通氛圍帶給用戶的主觀感受。

 

所以 HH X 有兩層含義。第一層發(fā)生在用戶與用戶之間,是指當(dāng)用戶扎堆或溝通交流時(shí),交流氛圍、交流內(nèi)容帶給用戶的主觀感受。第二層發(fā)生在用戶與產(chǎn)品工作人員之間,是指當(dāng)產(chǎn)品依靠人力向用戶提供咨詢、售后、配送等服務(wù)時(shí),產(chǎn)品工作人員的服務(wù)行為帶給用戶的主觀感受。

 

關(guān)于第一層含義,不管是更強(qiáng)調(diào)社區(qū)屬性的產(chǎn)品,比如天涯社區(qū)、豆瓣小組、百度貼吧,還是更強(qiáng)調(diào)內(nèi)容屬性的產(chǎn)品,比如公眾號(hào)、微博、小紅書(shū)的筆記,都具備 HH X 屬性。

 

關(guān)于第二層含義,常見(jiàn)的 HH X 由客服人員提供。如果是電商產(chǎn)品,提供人員還包括快遞員和售后人員等。

 

4. HB X(人與品牌的交互體驗(yàn))

 

HB X 是指當(dāng)用戶想起、談?wù)撈鹌放疲蚴褂闷放频漠a(chǎn)品、體驗(yàn)品牌的服務(wù)時(shí),品牌帶給用戶的主觀感受。

 

只要一款產(chǎn)品做成了品牌,它就有 HB X 屬性。

 

HB X 會(huì)直接影響到我們是否信任、喜歡一個(gè)品牌,以及是否會(huì)使用它的產(chǎn)品和服務(wù)。所以,我們對(duì) HB X 往往會(huì)有一個(gè)抓重點(diǎn)的綜合評(píng)價(jià)。就像一個(gè)外向活潑的女生,雖然在外向程度方面和一個(gè)內(nèi)向安靜的男生不一致,但雙方也可能會(huì)選擇在一起,因?yàn)閮?nèi)向、外向并非雙方關(guān)注的重點(diǎn)。

 

因?yàn)?HB X 牽涉到對(duì)品牌的綜合評(píng)價(jià),所以就像工作都有一段試用期、戀愛(ài)都有一段了解期一樣,HB X 的形成往往也需要較長(zhǎng)時(shí)間,通常至少要 3~5 年。

 

 

02 四維度的價(jià)值

 

每一個(gè)維度,各有什么價(jià)值?

 

1. HI X(人與界面的交互體驗(yàn))

 

作為基礎(chǔ)屬性,HI X 的價(jià)值主要體現(xiàn)在以下兩方面。

如果是一款只具有 HI X 屬性的工具型產(chǎn)品,比如視頻會(huì)議產(chǎn)品 Zoom,那于這款產(chǎn)品而言,HI X 就是一切,這款產(chǎn)品的成敗也幾乎完全取決于 HI X。

 

如果是一款同時(shí)具有 HC X、HH X 屬性的內(nèi)容型社區(qū)型產(chǎn)品,比如 B 站、快手這些視頻類(lèi)產(chǎn)品,那此時(shí)的 HI X 就會(huì)扮演一個(gè)類(lèi)似交通出行(基礎(chǔ)設(shè)施)的角色。如果 HI X 比較差,這個(gè)“出行”過(guò)程就會(huì)像出去玩時(shí)的塞車(chē)一樣,讓人難受;如果 HI X 很優(yōu)秀,這個(gè)“出行”過(guò)程就會(huì)像準(zhǔn)點(diǎn)的高鐵、飛機(jī)一樣,又快又爽。

 

2. HC X(人與內(nèi)容的交互體驗(yàn))

 

HC X 主要從內(nèi)容層面影響用戶滿意度。

 

如果 HC X 比較好,用戶消費(fèi)時(shí)的決策時(shí)間就會(huì)被大大縮減,同時(shí)用戶滿意度也會(huì)比較高。比如淘寶上就有一些原創(chuàng)設(shè)計(jì)、質(zhì)量不錯(cuò)、價(jià)格不貴的精品小店,很受歡迎。我們?nèi)ゾW(wǎng)易嚴(yán)選、優(yōu)衣庫(kù)天貓旗艦店這些質(zhì)量不錯(cuò)、設(shè)計(jì)不錯(cuò)、價(jià)格適中的店鋪買(mǎi) 東西時(shí),也會(huì)很快很省心。

 

以上說(shuō)的是電商產(chǎn)品,對(duì)于 UGC 類(lèi)的內(nèi)容產(chǎn)品,也是類(lèi)似的道理。比如站酷上的首頁(yè)推薦和編輯推薦,相對(duì)而言,HC X 比較不錯(cuò),所以看這些內(nèi)容的用戶也會(huì)比較多。

 

3. HH X(人與人的交互體驗(yàn))

 

HH X 是用戶情緒的最大影響因素,在情感方面對(duì)用戶具有最大吸引力。物以類(lèi)聚,人以群分。HH X 良好的產(chǎn)品,會(huì)像一場(chǎng)談笑風(fēng)生、其樂(lè)融融的聚會(huì),吸引用戶去扎堆。

 

良好的 HH X 往往意味著良好的氛圍,它不僅能帶給我們諸如輕松、愉快等積極情緒,還能在一定程度上帶給我們一種歸屬感。最終的結(jié)果,就是我們喜歡用這款產(chǎn)品。比如 B 站的 HH X 就比較好,具體而言就是彈幕氛圍比較歡樂(lè)友好,這樣的氛圍帶給用戶的感覺(jué)是比較好的,用戶也喜歡在 B 站就著彈幕看視頻。

 

4. HB X(人與品牌的交互體驗(yàn))

 

HB X 事關(guān)品牌能不能以正面形象住進(jìn)用戶心里。

良好的 HB X,往往意味著良好的品牌美譽(yù)度和忠誠(chéng)度。HB X 良好的產(chǎn)品,就像你信任和喜歡的男/女朋友一樣,他/她會(huì)在你心里占據(jù)一定的分量和地位,讓你樂(lè)意介紹給家人和朋友認(rèn)識(shí)。比如蘋(píng)果的 Mac,就有很高的品牌美譽(yù)度和忠誠(chéng)度,用戶也很樂(lè)意把 Mac 推薦給身邊的朋友。

 

 

03 四維度的關(guān)系

 

四維度之間存在怎樣的關(guān)系?

 

1. HI X 是另外三個(gè)維度的基礎(chǔ)

 

HI X 作為基本維度,相當(dāng)于“水之源,木之本”。如果把用戶體驗(yàn)四維度比作一個(gè)金字塔的話,塔底的基石一定是 HI X,塔尖則是 HB X。

 

2. HC X 通常是 HH X 的基礎(chǔ)

 

HH X 的產(chǎn)生,通常離不開(kāi) HC X。也就是說(shuō),通常得有一個(gè)合適的“內(nèi)容”或“主題”,才能把人聚攏過(guò)來(lái)。比如結(jié)婚的時(shí)候,你可以邀請(qǐng)到很多親朋好友來(lái)參加婚禮,但在平時(shí),你很難邀請(qǐng)到這么多人。我們?cè)?B 站看視頻的時(shí)候,彈幕通常比較歡樂(lè)友好,氛圍不錯(cuò),但如果沒(méi)有這些視頻,也就不會(huì)有這些彈幕,以及不錯(cuò)的社區(qū)氛圍。

 

3. HI X、HC X 和 HH X 共同構(gòu)成了 HB X 的基礎(chǔ)

 

HC X、HH X 和 HI X 一樣,都可以成就 HB X。

 

以早期 Keep 為例,剛開(kāi)始只有課程這個(gè)功能,也就是說(shuō)只有 HI X 和 HC X 這兩個(gè)屬性。其中,HI X 還可以,HC X 比較優(yōu)秀。在此基礎(chǔ)上,慢慢發(fā)展出了社區(qū)功能(HH X 屬性),而且做得不錯(cuò)。再往后,有了“自律給我自由”的品牌精神。在課程、社區(qū)、品牌精神等因素的助力下,Keep 有了不錯(cuò)的品牌美譽(yù)度和忠誠(chéng)度。也就是說(shuō),HC X、HH X 和品牌精神等因素,一起成就了良好的 HB X。

 

4. HB X 也可以僅有 HI X 這一個(gè)基礎(chǔ)

 

有些產(chǎn)品并不具有 HC X 和 HH X 這兩個(gè)屬性,而是僅有 HI X 這一個(gè)屬性。單憑一個(gè)良好的 HI X,也可以成就良好的 HB X。

 

比如 Zoom,作為一款開(kāi)視頻會(huì)議的工具應(yīng)用,它最初只有 HI X 這一個(gè)屬性。但是因?yàn)楹芎糜茫琀I X 很優(yōu)秀,所以如今的 Zoom 即便沒(méi)有內(nèi)容(HC X)和社區(qū)(HH X)屬性,依然成了一個(gè)在全球都很受歡迎的品牌,擁有了不錯(cuò)的 HB X。

 

總的來(lái)說(shuō),在四維度的金字塔里面,它們的關(guān)系如下圖所示。


用戶體驗(yàn)四維度的金字塔關(guān)系

文章來(lái)源:站酷  作者:Snow Design

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


B端產(chǎn)品界面高屏效初探

ui設(shè)計(jì)分享達(dá)人

背景

在 B 端設(shè)計(jì)領(lǐng)域中,不管是內(nèi)部用戶、產(chǎn)品、設(shè)計(jì)師、開(kāi)發(fā),還是外部產(chǎn)品、設(shè)計(jì)師等,總能聽(tīng)到關(guān)于界面「屏效」方面的訴求或吐槽。


undefined


「屏效」狹義理解是「界面過(guò)度留白」;廣義理解,「屏效」源自諧音“坪效”,指的是每坪的面積可以產(chǎn)出多少營(yíng)業(yè)額(營(yíng)業(yè)額/專(zhuān)柜所占總坪數(shù))。而「屏效」對(duì)于界面而言可以指屏幕單位時(shí)間、單位面積內(nèi)的信息可以帶來(lái)多少商業(yè)效益/效率提升。


為了探索在 B 端產(chǎn)品中用戶為何對(duì)「界面過(guò)度留白」或「屏效」問(wèn)題如此敏感,于是我們展開(kāi)了「屏效」專(zhuān)題的設(shè)計(jì)探索與實(shí)踐?!钙列А箤?zhuān)題探索主要以「探索」與「實(shí)踐」相結(jié)合的方式展開(kāi),將實(shí)踐過(guò)程中反復(fù)驗(yàn)證有效的設(shè)計(jì)策略沉淀成設(shè)計(jì)手冊(cè),同步將部分功能進(jìn)行工程化,確??梢蚤_(kāi)箱即用。


undefined


探索階段-為誰(shuí)在何時(shí)何地設(shè)計(jì)

用戶聲音|不同的故事相似的訴求

面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求》《中后臺(tái)產(chǎn)品滿意度調(diào)研》問(wèn)卷中認(rèn)為提高屏效能極大提升用戶體驗(yàn)的設(shè)計(jì)師占 58.14%;認(rèn)為提升屏效對(duì)體驗(yàn)有提升的終端用戶占 50.6%。


undefined


外部知乎上針對(duì)《Ant Design 4.0 設(shè)計(jì)價(jià)值觀》的 13 條反饋里,其中就有 2 點(diǎn)提到關(guān)鍵字「效率」。


undefined


通過(guò)了解不同用戶和產(chǎn)品類(lèi)型發(fā)現(xiàn),不同的用戶在工作場(chǎng)景的產(chǎn)品使用中有著相似的特征:


undefined



案例收集|發(fā)現(xiàn)問(wèn)題,大膽假設(shè)

縱觀 B 端產(chǎn)品界面,發(fā)現(xiàn)普遍問(wèn)題和收錄在解決屏效問(wèn)題上實(shí)踐得比較好的案例,為了逐步突破問(wèn)題,選擇以數(shù)據(jù)產(chǎn)品中覆蓋率極高的表格為設(shè)計(jì)切入點(diǎn),通過(guò)線上跨產(chǎn)品多端地毯式的體驗(yàn)走查,發(fā)現(xiàn)表格三個(gè)層次的問(wèn)題:


undefined


視覺(jué)、交互層在無(wú)需理解業(yè)務(wù)場(chǎng)景和用戶目標(biāo)的情況下,都較容易發(fā)現(xiàn),屬基礎(chǔ)問(wèn)題,但很多「過(guò)度留白」的屏效問(wèn)題往往是信息被組織方式的差異導(dǎo)致的「過(guò)度留白」。

綜上我們提出假設(shè):為提高屏效,可從視覺(jué)、交互、信息三個(gè)層次解決

視覺(jué)層為提高信息查閱速度,可以通過(guò)提高信息密度;交互層為提高操作速度,可以縮短當(dāng)前手勢(shì)到目標(biāo)之間的距離;信息層為提高信息被理解的速度,可以通過(guò)重組織等方式。

基于假設(shè),我們進(jìn)行了進(jìn)一步的桌面研究,查閱論文等書(shū)籍,尋找設(shè)計(jì)理論的驗(yàn)證和指導(dǎo)。


競(jìng)品分析|尋找實(shí)踐證據(jù),謹(jǐn)慎驗(yàn)證

我們知道視覺(jué)上界面留白過(guò)多(過(guò)疏會(huì)增加滾屏成本,過(guò)密因易串行而影響閱讀效率),以表格「行高」為例,探索各表格在字號(hào)、字高和行高的關(guān)系,因?yàn)椴煌煮w的同字號(hào)實(shí)際像素高度會(huì)有差異,因此選擇的是字高(即文字垂直高度的視覺(jué)大?。┒亲痔?hào)或字行高,決定留白的兩個(gè)重要因子是字高和表格行高,以次推演,界面元素和元素間距的留白關(guān)系,探究在視覺(jué)層怎樣的留白率能保證甚至提升屏效。


undefined


以數(shù)據(jù)產(chǎn)品中的表格為例,通過(guò)直接和間接競(jìng)對(duì)的方式,分別從數(shù)據(jù)的查閱(視覺(jué))、分析(交互)維度進(jìn)行功能點(diǎn)和設(shè)計(jì)細(xì)節(jié)上的比對(duì),來(lái)看看優(yōu)秀產(chǎn)品是如何解決屏效問(wèn)題。

直接競(jìng)對(duì):內(nèi)部用戶口碑較好的產(chǎn)品 A、B外界競(jìng)對(duì):同領(lǐng)域的 Tableau、網(wǎng)易有數(shù)、金山、微軟表格;間接競(jìng)對(duì):谷歌郵箱、AntD 等的緊湊主題的常規(guī)列表(一維表格)


undefined


通過(guò)競(jìng)品分析可以發(fā)現(xiàn),數(shù)據(jù)分析領(lǐng)域的表格留白率普遍較低(信息密度高),尤其是金山和微軟的電子表格,其次是同類(lèi)面向數(shù)據(jù)用戶的 Tableau、網(wǎng)易有數(shù),而谷歌郵箱等工作臺(tái)常用的常規(guī)列表緊湊版本中,留白率和數(shù)據(jù)領(lǐng)域的電子表格不相上下。


緊湊版的使用場(chǎng)景也常常是面對(duì)數(shù)據(jù)量巨大的信息呈現(xiàn),通過(guò)切換緊湊主題,提升信息的快速瀏覽,而這也非常適合數(shù)據(jù)分析場(chǎng)景中巨大的數(shù)據(jù)量呈現(xiàn)。因此我們的產(chǎn)品在留白率的提升空間極大,而在實(shí)際案例實(shí)踐中,也已經(jīng)將表格行高優(yōu)化至 30px,克制的使用留白。


除此外,競(jìng)品其他層次的設(shè)計(jì)也做了比對(duì),總結(jié)來(lái)看整體設(shè)計(jì)做法:高密度、少屏數(shù)、少留白等。


文字陷阱:中英文字高不等于字號(hào)


舉個(gè)容易犯錯(cuò)的競(jìng)品參考是,谷歌在緊湊版主題下字號(hào) 12px,列表行高是 28px,但在 AntD Table 中同樣的 12px 和列表行高 28px 就會(huì)發(fā)現(xiàn)非常擁擠,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字體,實(shí)際字高只有 10px,而 AntD Table 的語(yǔ)境是中文字偏多,實(shí)際字高有 12px,所以留白的差異在于一個(gè)是 18px(28-10),一個(gè)是 16px(28-12),這也是為什么決定決定留白的兩個(gè)重要因子是「字高」和表格行高,而非「字號(hào)」和表格行高,進(jìn)一步推演,決定界面留白的是「元素視覺(jué)高度」和「元素間距」。


論文查閱|尋找理論證據(jù),謹(jǐn)慎驗(yàn)證

研究表明,低密度認(rèn)知負(fù)荷低,但高密度任務(wù)完成率高,用戶更喜好

參考資料:論文《基于眼動(dòng)的網(wǎng)頁(yè)對(duì)稱性和復(fù)雜度對(duì)用戶認(rèn)知的影響的研究》

對(duì)于信息,用戶需要需要閱讀(視覺(jué)),思考和理解(認(rèn)知),需要點(diǎn)擊按鈕、操作鼠標(biāo)和打字(行動(dòng)),在人機(jī)工程學(xué)中,統(tǒng)稱為負(fù)荷。即認(rèn)知(記憶)負(fù)荷、視覺(jué)負(fù)荷、動(dòng)作負(fù)荷,即分別對(duì)應(yīng)用戶體驗(yàn)設(shè)計(jì)的三個(gè)層級(jí),信息/視覺(jué)/交互。而負(fù)荷所花費(fèi)資源從多到少依次為:認(rèn)知 > 視覺(jué) > 行動(dòng)。


認(rèn)知負(fù)荷,舉個(gè)例子,看了但不一定懂了。你是否有這么一種體驗(yàn)——刷抖音,雖然很多(信息密度小,輸出效率低),但可以一直刷下去并且刷很久;而看一門(mén) C4D 教學(xué)視頻,即使就短短十來(lái)分鐘(信息密度大,輸出效率高),但是卻要看上半天。因?yàn)樗⒍桃曨l時(shí),你的輸入效率遠(yuǎn)高于作者的輸出效率,而看一門(mén) C4D 教學(xué)視頻時(shí),你的輸入效率遠(yuǎn)低于作者的輸出效率??墒?,輸出效率是客觀的,輸入效率是主觀的。如果輸出效率很高,你可以通過(guò)提高自己的輸入效率(比如讓自己成為 C4D 專(zhuān)家)來(lái)跟上作者,從而變強(qiáng);否則輸出效率很低(信息質(zhì)量低),你的輸入效率很高(很專(zhuān)業(yè)),信息于你而言都是無(wú)效的。


假設(shè)負(fù)荷總量不變的情況下,那么以上三類(lèi)場(chǎng)景界面需要對(duì)用戶負(fù)擔(dān)分配大致如下,官網(wǎng)品宣類(lèi)需要低認(rèn)知成本,低視覺(jué)負(fù)擔(dān),視覺(jué)要求高,用戶才會(huì)被吸引過(guò)來(lái)閱讀,甚至酷炫的交互更能增加互動(dòng)體驗(yàn)而帶來(lái)的趣味感,比如蘋(píng)果官網(wǎng),信息量極少、圖版率高帶來(lái)極具藝術(shù)的視覺(jué)體驗(yàn)、進(jìn)而吸引用戶愿意跟隨屏幕滾動(dòng)漸進(jìn)式接受信息,而 B 端應(yīng)用因?yàn)槭菍?zhuān)業(yè)使用,首先認(rèn)知方面隨著員工的專(zhuān)業(yè)度提高而降低,因此可以通過(guò)提高視覺(jué)負(fù)擔(dān),來(lái)降低行動(dòng)負(fù)擔(dān),進(jìn)而減少操作用時(shí),當(dāng)然最佳情況是三個(gè)維度能整體降低負(fù)擔(dān),讓總負(fù)擔(dān)降低,就需要更多設(shè)計(jì)巧思了。


undefined


面向內(nèi)部設(shè)計(jì)師和終端用戶投放的《高屏效訴求調(diào)研》預(yù)設(shè)解決方案中,設(shè)計(jì)師常用的 Top 3 做法為:【信息層】隱藏不必要信息、【視覺(jué)層】提高布局緊湊度、【交互層】減少點(diǎn)擊跳轉(zhuǎn)。


undefined



實(shí)踐階段-如何設(shè)計(jì)

通過(guò)以上的探索,我們可以確定的是,B 端產(chǎn)品面向?qū)I(yè)人員的工作界面設(shè)計(jì)中,提高屏效可從視覺(jué)、交互、信息三個(gè)層次進(jìn)行,視覺(jué)層-高密度,即提高屏幕信息密度;交互層-低跳轉(zhuǎn),通過(guò)減少頁(yè)面跳轉(zhuǎn)、手勢(shì)與常用操作的距離等;信息層-有效性,通過(guò)重組織或輔助信息幫助用戶理解,甚至提供幫助手冊(cè)等以提高用戶專(zhuān)業(yè)能力。


undefined


基于以上的總結(jié),對(duì)產(chǎn)品進(jìn)行優(yōu)化。下面以一個(gè)簡(jiǎn)單案例進(jìn)行設(shè)計(jì)策略的解讀。一位運(yùn)營(yíng)同學(xué)想對(duì)比 A、B 兩不同人群在相同維度(白領(lǐng)-有信用卡)下的人數(shù)差異,尋找運(yùn)營(yíng)機(jī)會(huì)點(diǎn)。


如下表格經(jīng)過(guò)高屏效策略優(yōu)化前后對(duì)比圖,優(yōu)化前相同維度下不同人群數(shù)量的對(duì)比需要視線來(lái)回跳動(dòng)比對(duì),而優(yōu)化后的表格內(nèi)容,更符合用戶看差異場(chǎng)景下分析目的數(shù)據(jù)查閱,視線鎖定相同維度,即可快速比對(duì)數(shù)值大小。


undefined


下面以視覺(jué)、交互、信息三個(gè)層次解剖設(shè)計(jì)過(guò)程背后的思考。


視覺(jué)層|高密度-克制的留白

眼動(dòng)理論:研究表明,人眼最小可視視角 0.3 度,水平最大眼動(dòng)舒適轉(zhuǎn)動(dòng)區(qū) 30度,垂直最大眼動(dòng)舒適轉(zhuǎn)動(dòng)區(qū) 55度??傻贸鋈搜圩钚∽R(shí)別范圍 12px,水平視野舒適眼動(dòng)寬 1200px,垂直視野舒適眼動(dòng)高 2200px。參考資料:論文《基于眼動(dòng)交互的用戶界面設(shè)計(jì)與研究》


undefined


如圖,縮小表格行高的同時(shí),目標(biāo)信息之間的眼動(dòng)距離隨之縮短,在眼動(dòng)舒適區(qū)內(nèi)看到更多信息,便于信息的高效獲取。


undefined



交互層|低跳轉(zhuǎn)-高頻信息前置

理論基礎(chǔ):菲茨定律是用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)位置所需時(shí)間的數(shù)學(xué)模型,它由保羅·菲茨在1954年首先提出。這個(gè)模型考慮了用戶定位點(diǎn)的初始位置與目標(biāo)的相對(duì)距離、目標(biāo)的大小、移動(dòng)的最短時(shí)間。三者之間關(guān)系公式為:T=a+blog2(D/W+1),W為其中目標(biāo)的大小;D為到目標(biāo)的距離;T為移動(dòng)到目標(biāo)所用最短時(shí)間。參考資料:菲茲定律


undefined


表格單元格借助交互狀態(tài),增加懸浮出現(xiàn)的信息組件,前置顯示目標(biāo)單元格明細(xì)信息,同時(shí)通過(guò)交互出現(xiàn)的指示器輔助行列信息的獲取,高頻操作考慮手勢(shì)位置放置,縮短與操作目標(biāo)的距離,以提高整體操作效率。


undefined



信息層|有效性-信息重組織

理論基礎(chǔ):交互設(shè)計(jì)四大策略「組織、刪除、隱藏、轉(zhuǎn)移」參考資料:《簡(jiǎn)約至上》


undefined


用戶為了對(duì)比 A、B 兩不同人群在相同維度(白領(lǐng)-有信用卡)下的人數(shù)差異,但內(nèi)容的重組織方式讓兩數(shù)據(jù)行需要頻繁點(diǎn)擊滾動(dòng)條來(lái)查看,根據(jù)用戶目標(biāo),將關(guān)聯(lián)性大的數(shù)據(jù)放置相鄰列(即將要對(duì)比的人群放置列頭),即可快速查閱,減少眼跳距離。


undefined


結(jié)語(yǔ)

設(shè)計(jì)趨勢(shì)中常見(jiàn)的大字體大留白界面,但在 B 端場(chǎng)景中,面對(duì)緊張的工作節(jié)奏,時(shí)間和注意力變得尤為可貴,相對(duì)而言,基于復(fù)雜度守恒定律, B 端信息量大且高頻訪問(wèn)的產(chǎn)品中,「用得快」要比「看得美」更重要,「高密度」「低跳轉(zhuǎn)」詮釋的即是「空間換時(shí)間」,少一次點(diǎn)擊,少一次跳轉(zhuǎn),少一份等待,就多一份時(shí)間和效率。

文章來(lái)源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



詳解|用戶體驗(yàn)地圖,到底該如何使用?

ui設(shè)計(jì)分享達(dá)人

用戶體驗(yàn)地圖是什么 | WHAT

用戶體驗(yàn)地圖(Experience Maps)旨在通過(guò)描述用戶歷程和故事,使設(shè)計(jì)師、產(chǎn)品經(jīng)理等項(xiàng)目成員更好地了解用戶和洞察訴求。所以對(duì)于用戶體驗(yàn)地圖,我們可以將其定義為以下內(nèi)容:

- 是一種描述用戶故事的可視化工具;

- 是一種幫助設(shè)計(jì)師、產(chǎn)品經(jīng)理等更好地了解用戶的共創(chuàng)工具;

- 從用戶視角出發(fā),直觀展現(xiàn)產(chǎn)品流程各個(gè)觸點(diǎn)上用戶的痛點(diǎn)、需求和情緒;

- 用戶體驗(yàn)地圖繪制的形式并不唯一,可以根據(jù)項(xiàng)目需求,增減內(nèi)容。


undefined  

△ 途家 App 用戶租房 · 用戶體驗(yàn)地圖案例



通常在接觸到需求之后,設(shè)計(jì)師就可以開(kāi)始梳理現(xiàn)有流程、使用用戶體驗(yàn)地圖了。要注意的是:

- 需要梳理的功能不分大小,都可以使用;

- 做之前,務(wù)必要先調(diào)研和訪談?dòng)脩羰褂卯a(chǎn)品的情況。

建議時(shí)長(zhǎng):

- 重要項(xiàng)目:120~180 分鐘- 日常項(xiàng)目:60~120分鐘

參與者:

- 必選:設(shè)計(jì)師、產(chǎn)品- 可選:研發(fā)、市場(chǎng)、其他

工具:

- 電腦或白板+便利貼

 

為什么需要用戶體驗(yàn)地圖 | WHY

需要發(fā)現(xiàn)和拆解產(chǎn)品現(xiàn)有問(wèn)題,梳理用戶流程時(shí)使用用戶體驗(yàn)地圖,可以在聚焦階段,整合用戶訴求和業(yè)務(wù)訴求,共創(chuàng)機(jī)會(huì)點(diǎn),找出解決方案,通常在以下場(chǎng)景中使用:

- 新產(chǎn)品設(shè)計(jì):需要對(duì)需求進(jìn)行拆解和優(yōu)先級(jí)排序;

- 產(chǎn)品優(yōu)化:發(fā)現(xiàn)產(chǎn)品現(xiàn)有問(wèn)題,洞察設(shè)計(jì)發(fā)力點(diǎn)。

 

由此可見(jiàn),在設(shè)計(jì)過(guò)程中使用用戶體驗(yàn)地圖作為設(shè)計(jì)工具,有以下益處:

- 更好的以用戶視角來(lái)看產(chǎn)品的體驗(yàn);

- 通過(guò)共創(chuàng),項(xiàng)目成員達(dá)成共識(shí);

- 確認(rèn)觸點(diǎn),作為我們的設(shè)計(jì)方向;

- 通過(guò)用戶痛點(diǎn)找到機(jī)會(huì)點(diǎn);

- 幫助梳理產(chǎn)品流程。


undefined


△ 用戶體驗(yàn)地圖共創(chuàng)現(xiàn)場(chǎng)

 

用戶體驗(yàn)地圖操作流程 | HOW

我們通常會(huì)將流程分成4 個(gè)階段:定義原則和目的 —— 梳理階段流程 —— 洞察痛點(diǎn) —— 尋找機(jī)會(huì)點(diǎn)。


1. 定義原則和目的

首先要了解我們做用戶體驗(yàn)地圖的原因和目的,包括用戶是誰(shuí)、解決什么問(wèn)題、用戶的目標(biāo)、產(chǎn)品的整體目標(biāo)、限定條件等等,對(duì)用戶群體、整個(gè)項(xiàng)目背景和共創(chuàng)任務(wù)目標(biāo)有清晰、全面的認(rèn)知。


undefined


2. 梳理階段流程 

首先是劃分階段,將用戶的行為拆分成幾個(gè)大的階段,在整理時(shí)要注意:

- 在整個(gè)產(chǎn)品的范圍之內(nèi)盡量把故事、流程講完整;- 以廣度優(yōu)先,而非深度,不要過(guò)早的沉浸到細(xì)節(jié)中。

接下來(lái)我們要將主要階段拆分成單個(gè)任務(wù),并梳理具體的任務(wù)和觸點(diǎn),羅列出過(guò)程中的任務(wù)和各個(gè)觸點(diǎn),要做到事無(wú)巨細(xì)。


undefined


然后根據(jù)任務(wù)和觸點(diǎn),整理對(duì)應(yīng)的用戶疑問(wèn)、用戶感受/情緒。通過(guò)對(duì)用戶的觀察和訪談進(jìn)行梳理,客觀的描述事實(shí),切勿自說(shuō)自話或是將自己的情緒代入其中,也不要急于猜想與分析。


undefined


3. 洞察痛點(diǎn)

這一步需要我們匯總用戶的痛點(diǎn),并將痛點(diǎn)分級(jí),洞察用戶痛點(diǎn)背后的真實(shí)訴求。這個(gè)過(guò)程中可以先讓大家在一定時(shí)間內(nèi)寫(xiě)出自己的想法,每一條寫(xiě)在一張卡片上,做到先相互不干擾,之后再統(tǒng)一整理和總結(jié)。


undefined


4. 尋找機(jī)會(huì)點(diǎn)

通過(guò)上述總結(jié),思考新的機(jī)會(huì)點(diǎn)、解決方案、優(yōu)化整體流程,并對(duì)新流程下的功能做優(yōu)先級(jí)排序。可以通過(guò)準(zhǔn)備一些問(wèn)題來(lái)刺激大家腦爆出更多的內(nèi)容,比如:用戶還有其他選擇么?怎么做用戶才能更爽?其他用戶來(lái)到這里該怎么處理?等等。在這個(gè)階段需要:

- 對(duì)內(nèi)容進(jìn)行對(duì)標(biāo)、討論,把公認(rèn)的點(diǎn)保留下來(lái),無(wú)用的點(diǎn)剔除出局;- 根據(jù)實(shí)際情況和項(xiàng)目成本、進(jìn)度等條件,對(duì)新流程下的功能做優(yōu)先級(jí)排序。


undefined


 

如何為過(guò)程提效 |TIPS

在實(shí)際的工作過(guò)程中,因?yàn)轫?xiàng)目時(shí)間都非常緊張,繪制這樣一個(gè)完整的用戶體驗(yàn)地圖比較耗費(fèi)時(shí)間,所以推薦大家?guī)讉€(gè)提效的技巧,既可以減少時(shí)間浪費(fèi),也可以提高共創(chuàng)質(zhì)量:

1. 事前

充分做好用戶調(diào)研,提前準(zhǔn)備好用戶地圖模板,可以在開(kāi)始之前的一到兩天發(fā)給參會(huì)人員,讓所有人對(duì)產(chǎn)品有一個(gè)整體梳理和思考,有助于提高大家的產(chǎn)出質(zhì)量。

2. 事中

如果是優(yōu)化的產(chǎn)品,可以將設(shè)計(jì)稿 demo 或者線上產(chǎn)品截圖打印出來(lái),這樣可以增強(qiáng)大家的代入感,有利于想法的輸出。

3. 事后

整理電子版體驗(yàn)地圖,需要跟隨產(chǎn)品的演進(jìn)進(jìn)行更新,上傳到項(xiàng)目共享空間隨時(shí)查看。

文章來(lái)源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)



用戶體驗(yàn)是玄學(xué)嗎?

純純

Part 01 - 用戶體驗(yàn)和用戶體驗(yàn)設(shè)計(jì)


關(guān)于“用戶體驗(yàn)”這個(gè)詞,很多剛?cè)胄械男氯硕加X(jué)得它玄之又玄,妙不可言。一方面是不知道他具體到底是什么,就好像那是一塊理想地,看不見(jiàn)也摸不著,另一方面呢糟糕的用戶體驗(yàn),作為用戶是能清晰感覺(jué)到它的存在。所以呢,在這里,會(huì)圍繞“用戶體驗(yàn)”這個(gè)詞做一個(gè)科普性質(zhì)的解釋和綜述,希望對(duì)初學(xué)者一些小小的幫助。



1.1 什么是用戶體驗(yàn)?

用戶體驗(yàn)的定義有很多種,我比較傾向的解釋是:

“用戶體驗(yàn)是人對(duì)于使用一個(gè)產(chǎn)品、系統(tǒng)、服務(wù)時(shí)的預(yù)期和反應(yīng)。”

首先明確第一個(gè)概念,體驗(yàn)是一個(gè)過(guò)程,生活中的一切皆是體驗(yàn),我們赤裸裸的來(lái)到這個(gè)世界,最后赤裸裸的離開(kāi),來(lái)人世走一遭就是來(lái)體驗(yàn)來(lái)了。

從廣義上來(lái)看,體驗(yàn)的主體是人,客體可以是一切物體和事情,媒介是我們的感官;當(dāng)我們的感官作用在一切事物上,會(huì)產(chǎn)生相應(yīng)的心理行為,比如預(yù)期,比如反饋,比如情緒,著所有的一切一起作用,形成了用戶體驗(yàn)過(guò)程。


只要留心生活,你會(huì)發(fā)現(xiàn)用戶體驗(yàn)無(wú)處不在。

舉兩個(gè)例子:

第一個(gè)是北京隨處可見(jiàn)的地鐵充值機(jī),我經(jīng)??吹接脩粽驹谀抢镢卤疲钪饕氖撬`背了用戶的操作習(xí)慣,插卡機(jī)器的的行為總會(huì)讓人聯(lián)想到APM機(jī),而幾乎所有的APM機(jī)器卡都是插一半然后自動(dòng)吸進(jìn)去的,而北京地鐵卡是需要插到底,然后還需要用力按一下才能成功識(shí)別,跟多用戶懵逼在這一步,并沒(méi)有用力按,然后以為是機(jī)器壞了沒(méi)有識(shí)別。

第二個(gè)例子是我工作的地方旁邊商場(chǎng)一樓有一個(gè)肯德基,它有兩個(gè)門(mén)可以進(jìn)入,第一個(gè)門(mén)是在商場(chǎng)外臨街,第二個(gè)門(mén)是在商場(chǎng)內(nèi)。

我連續(xù)兩周的工作日每天早上9點(diǎn)半到10點(diǎn)在這家店吃早餐,發(fā)現(xiàn)一件很有趣的現(xiàn)象,由于工作人員的疏忽,商場(chǎng)內(nèi)的門(mén)二經(jīng)常會(huì)忘記打開(kāi),因?yàn)檫@個(gè)商場(chǎng)的負(fù)二樓和地鐵站連在一起,所有很多人地鐵到站的人群從地鐵站口出直接從商場(chǎng)內(nèi)走向街道:

在這些人群里,如果他們正巧有買(mǎi)早餐的需求,他們往往會(huì)從門(mén)2進(jìn),如果正巧由于工作人員的疏忽,門(mén)2沒(méi)開(kāi)。按照常人的思維,哪怕門(mén)2沒(méi)開(kāi),那不還有一個(gè)門(mén)1么,用戶完全可以多走幾步出去從街道門(mén)1進(jìn)入啊,應(yīng)該不會(huì)太影響。如果你能得出這樣的結(jié)論,又碰巧你正好是互聯(lián)網(wǎng)的設(shè)計(jì)或者產(chǎn)品人員,那么你可能有“自我安慰型人格”。

我吃早餐的兩周里做了一個(gè)統(tǒng)計(jì),10個(gè)工作日里,每天在我吃早餐的這半個(gè)小時(shí)內(nèi),試圖推開(kāi)門(mén)2卻發(fā)現(xiàn)打不開(kāi)的,平均到每天有6位,按照每個(gè)人平均買(mǎi)一份早餐套餐15元錢(qián)來(lái)算,10天內(nèi),由于工作人員的失誤,這個(gè)門(mén)至少阻擋了至少900元營(yíng)業(yè)額。


回到剛剛那個(gè)“自我安慰”的思維,我發(fā)現(xiàn),10天內(nèi)被這個(gè)門(mén)阻擋的實(shí)際62位用戶里,真正出街道從街道門(mén)1再次進(jìn)入的人,只有十七位。也就是說(shuō)這個(gè)實(shí)驗(yàn)中肯德基早餐用戶被最短路徑阻隔之后,再次選擇次路徑完成轉(zhuǎn)化的轉(zhuǎn)化率17/62(27%)。

別急,還有更吃驚的數(shù)據(jù):在被門(mén)2阻隔的62個(gè)人中,有17個(gè)是自身順路要往街道右邊走路過(guò)門(mén)1的。但是由于被門(mén)2阻隔,他們17個(gè)人當(dāng)中,哪怕自身行走路徑要路過(guò)門(mén)1,選擇從門(mén)1進(jìn)去的也只有7位,大概在11/17(64%)(判斷順路依據(jù)是他們吃完后從門(mén)1出門(mén)往右走)。


再看一下肯德基這個(gè)例子的數(shù)據(jù)結(jié)論:

被門(mén)2阻攔的62個(gè)人里,45人流失。

其余17位選擇從門(mén)1再次進(jìn)入,這17人里,本身就要順路經(jīng)過(guò)門(mén)一的占11位,說(shuō)明大概率只有順路才會(huì)進(jìn)入完成轉(zhuǎn)化。


這個(gè)例子說(shuō)明什么呢?

在替代品遍地都在的今天,不要試圖去挑戰(zhàn)用戶的體驗(yàn)。


當(dāng)用戶看到肯德基的門(mén)2,他們產(chǎn)生的預(yù)期是馬上就可以推開(kāi)享受一頓早餐,這時(shí)候由于門(mén)2打不開(kāi),使得用戶預(yù)期受挫。

受挫用戶的第一反應(yīng)并不是想解決辦法(表現(xiàn)在例子中就是尋找另一個(gè)門(mén)進(jìn)入),而是放棄它。畢竟,沒(méi)有肯德基我還可以吃麥當(dāng)勞,還有星巴克,還有面包店,各種各樣的選擇。


這就是為什么互聯(lián)網(wǎng)行業(yè)把產(chǎn)品用戶體驗(yàn)看得這么重要的原因,除了社交產(chǎn)品以外的用戶是很難有忠誠(chéng)度的,你的產(chǎn)品難用,你不能給用戶更大的福利,用戶一旦發(fā)現(xiàn)別的產(chǎn)品做得比你好,用戶會(huì)馬上放棄你,轉(zhuǎn)而用別的替代品。


上面的那個(gè)例子主要表達(dá)的是用戶預(yù)期受阻帶來(lái)的糟糕體驗(yàn)導(dǎo)致用戶流失。其實(shí)整個(gè)用戶體驗(yàn)的過(guò)程當(dāng)中,是有很多很的因素相互制約,協(xié)同作用的:


戶體驗(yàn)本身一個(gè)很龐雜繁復(fù)的系統(tǒng);在一個(gè)過(guò)程內(nèi),用戶對(duì)整個(gè)過(guò)程中的元素的預(yù)期和反應(yīng)(情感和生物反應(yīng))構(gòu)成了整個(gè)用戶體驗(yàn)系統(tǒng)。這里面包含了很多很多的旁支,比如人的感知、人的經(jīng)驗(yàn)系統(tǒng)和使用場(chǎng)景決定了人對(duì)于單個(gè)體驗(yàn)的預(yù)期,而如果超過(guò)預(yù)期會(huì)帶來(lái)驚喜,促使用戶正向評(píng)價(jià),也促使用戶再次體驗(yàn)。比如人感知和體驗(yàn)中客體呈現(xiàn)的意符決定了人的行為等等…


用戶體驗(yàn)最初的時(shí)候它只是用于表征易用性方面,而現(xiàn)在,它的概念更多的表現(xiàn)在情感的一個(gè)分支,包含設(shè)計(jì)情感互動(dòng)和評(píng)估情緒 。因?yàn)槿说那榫w是很難拿捏的,面對(duì)不同教育背景不同生活經(jīng)歷的用戶,我們最初其實(shí)很難歸納出到底什么樣的設(shè)計(jì)是具有好的用戶體驗(yàn)。


好的用戶體驗(yàn)各有各的優(yōu)點(diǎn),但是,糟糕的用戶體驗(yàn)卻很容易被歸納和識(shí)別出來(lái)。


設(shè)計(jì)師們不斷的在識(shí)別和總結(jié)糟糕的體驗(yàn)問(wèn)題,慢慢在優(yōu)化這些問(wèn)題的過(guò)程中積累經(jīng)驗(yàn),其實(shí)也慢慢的有了一些關(guān)于用戶體驗(yàn)的方法論形成,這種方法論作用于各個(gè)設(shè)計(jì)行業(yè),工業(yè)設(shè)計(jì)、服裝設(shè)計(jì)、奢侈品、廣告、互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)各個(gè)行業(yè)產(chǎn)生的方法論其實(shí)不盡相同。




1.2 什么是用戶體驗(yàn)設(shè)計(jì)?


說(shuō)起設(shè)計(jì)(Design)這個(gè)詞,那就厲害了 ,作為設(shè)計(jì)師的你聽(tīng)說(shuō)過(guò)解釋肯定有很多種,而我個(gè)人對(duì)”設(shè)計(jì)“的理解是:設(shè)計(jì)是一種”約束條件下,解決問(wèn)題的可行的辦法“。而對(duì)于用戶體驗(yàn)設(shè)計(jì)而言,早期的時(shí)候,我們僅能夠基于經(jīng)驗(yàn)主義去完成一些設(shè)計(jì),這時(shí)候?qū)<业淖饔脮?huì)被放大,因?yàn)閷?zhuān)家提出的不要這樣、不要那樣,往往會(huì)成為指導(dǎo)性方案:


但是隨著發(fā)展,不斷地有人站出來(lái)嘗試描述和定義用戶體驗(yàn)的邊界,比如:


隨著探索者越來(lái)越多,我們最終也是大致能夠夠了出用戶體驗(yàn)設(shè)計(jì)的定義范圍:既然體驗(yàn)是一個(gè)過(guò)程,那么狹義的,用戶體驗(yàn)設(shè)計(jì)實(shí)際上是通過(guò)改善和優(yōu)化用戶與產(chǎn)品交互過(guò)程,從而提升用戶的滿意度的過(guò)程。


這里有兩個(gè)要點(diǎn):


1、用戶體驗(yàn)設(shè)計(jì)的目標(biāo)是逐步不斷提升用戶滿意度,前面兩有個(gè)定語(yǔ):“逐步“、”不斷”,對(duì)于用戶而言,永遠(yuǎn)沒(méi)有所謂“最滿意”的說(shuō)法,只有“相較于上一次體驗(yàn)更滿意”.所以除非定義一種可量化的終極滿意度模型作為指標(biāo)參照,否則用戶體驗(yàn)設(shè)計(jì)是一個(gè)永遠(yuǎn)都有優(yōu)化空間的過(guò)程。


2、用戶體驗(yàn)設(shè)計(jì)是圍繞過(guò)程的設(shè)計(jì),在互聯(lián)網(wǎng)行業(yè)中,這個(gè)過(guò)程主要指用戶與產(chǎn)品(app、PC端,客戶端、VR等)的交互過(guò)程中,所以下文重點(diǎn)討論的是在互聯(lián)網(wǎng)行業(yè)中的用戶體驗(yàn)設(shè)計(jì)。



Part 02 - 用戶體驗(yàn)設(shè)計(jì)是一個(gè)崗位嗎?


以2018年2月為時(shí)間節(jié)點(diǎn)的目前來(lái)說(shuō),用戶體驗(yàn)設(shè)計(jì)不是一個(gè)崗位,現(xiàn)階段來(lái)看,它更像是一個(gè)協(xié)同目標(biāo),每個(gè)公司的所有設(shè)計(jì)師(UI/視覺(jué)/交互),用研人員,包括開(kāi)發(fā)人員其實(shí)工作的目標(biāo)都是為了逐步提升自己公司產(chǎn)品的用戶體驗(yàn)。


雖然用戶體驗(yàn)設(shè)計(jì)目前還不是一個(gè)崗位,但是它正在趨向于成為一個(gè)崗位。要解釋這一點(diǎn),我們還是要從用戶體驗(yàn)的定義說(shuō)開(kāi)去,還記得用戶體驗(yàn)設(shè)計(jì)是什么嗎?用戶體驗(yàn)設(shè)計(jì)是通過(guò)改善和優(yōu)化用戶與產(chǎn)品交互過(guò)程,從而提升用戶的滿意度的過(guò)程。


既然要改善和優(yōu)化用戶與產(chǎn)品交互過(guò)程,那把這個(gè)句子拆分開(kāi)來(lái),大概需要的知識(shí)儲(chǔ)備有:

1、從主語(yǔ)的角度看:首先你要了解用戶吧?用戶是人,要提升人的滿意度,對(duì)人感到心理滿足的機(jī)制是不是需要了解?


2、從客體的角度看:客體是產(chǎn)品,在互聯(lián)網(wǎng)行業(yè)表現(xiàn)為手機(jī)(app)、pad(app)、PC(軟件)和VR設(shè)備等等。這些產(chǎn)品是我們著重需要關(guān)注的點(diǎn),比如一個(gè)app中視覺(jué)信息的呈現(xiàn),app的信息架構(gòu)、app的交互設(shè)計(jì)、app的可用性和易用性等等,都是需要考慮的。


3、既然是用戶與產(chǎn)品交互過(guò)程,是不是要知道人和產(chǎn)品(手機(jī)、app、PC)到底是如何交互的?每一次的點(diǎn)擊,滑動(dòng)對(duì)于用戶來(lái)看心理應(yīng)該是怎樣,產(chǎn)品的每一次反饋都意味著什么?


吶,你現(xiàn)在來(lái)看,其實(shí)我們互聯(lián)網(wǎng)行業(yè)現(xiàn)在劃分的UI/視覺(jué)/交互/用研,甚至往廣了說(shuō)包括產(chǎn)品/開(kāi)發(fā)/測(cè)試,工作內(nèi)容都是構(gòu)成用戶體驗(yàn)的要素,它需要的知識(shí)面特別特別廣,對(duì)人的綜合素質(zhì)要求很高,所以目前來(lái)看,用戶體驗(yàn)還不能是一個(gè)崗位,但是很多大公司,比如騰訊阿里,他們期待設(shè)計(jì)師能夠變成有更大洞察和對(duì)業(yè)務(wù)、人性有更多了解的全方位人才,而不是一個(gè)只會(huì)畫(huà)圖的美工,所以說(shuō)未來(lái),用戶體驗(yàn)設(shè)計(jì)師可能會(huì)變成一個(gè)title,但是可以預(yù)料的是,用戶體驗(yàn)涵蓋的這么多方面知識(shí),每個(gè)人都是有側(cè)重和專(zhuān)長(zhǎng)的:可能有些人就是很喜歡視覺(jué)設(shè)計(jì)和UI設(shè)計(jì),那他們?cè)诰羞@部分的同時(shí),相應(yīng)的懂一些交互方面的知識(shí),這就算是優(yōu)秀的偏視覺(jué)方向的用戶體驗(yàn)設(shè)計(jì)師;那視覺(jué)表現(xiàn)很差的人能不能算優(yōu)秀設(shè)計(jì)師呢?當(dāng)然可以,比如他是心理學(xué)或者HCI(人機(jī)交互設(shè)計(jì))的研究生,對(duì)人和用戶心理有自己獨(dú)特的認(rèn)識(shí),再加上精通定性和定量研究方法,對(duì)數(shù)據(jù)有獨(dú)特的敏感,那他未來(lái)可能是用戶研究方向的用戶體驗(yàn)設(shè)計(jì)師。


只不過(guò)我們現(xiàn)在因?yàn)閸徫还袒?,大多?shù)公司,每個(gè)人的工作職責(zé)僅限于那一塊,你是做視覺(jué)/UI的,那就好好畫(huà)界面,你是做交互的,那就好好研究布局,你是用研,你是DBA,你是什么職位就做什么職位的事情,從來(lái)不越界,這樣其實(shí)是不利于人的發(fā)展的,那我們追求上進(jìn)的設(shè)計(jì)師們只能自己下來(lái)多看書(shū),多去做研究,私下來(lái)多花時(shí)間修煉自己的內(nèi)功心法,才能讓自己立于不敗之地。


用戶體驗(yàn)設(shè)計(jì)發(fā)展到今天,目前包含了最大的三個(gè)有模糊邊界的模塊是用戶研究、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)?,F(xiàn)在絕大多數(shù)互聯(lián)網(wǎng)公司也都是按照以上這三個(gè)模塊去設(shè)置崗位的,這樣有一個(gè)很大的問(wèn)題其實(shí)是不利于設(shè)計(jì)師的發(fā)展。


阿里巴巴1688的設(shè)計(jì)總監(jiān)汪方進(jìn)關(guān)于這三個(gè)崗位,有這樣的一番評(píng)述:

比如交互崗位,如果對(duì)接的是一位能力較強(qiáng)的PD,他們可能把交互稿定了七八成,交互設(shè)計(jì)師完善后交付給視覺(jué)設(shè)計(jì)師,而對(duì)接的視覺(jué)設(shè)計(jì)師又有一些交互Sense,他也許把交互稿又改了改,那么這個(gè)過(guò)程下來(lái),交互設(shè)計(jì)師的內(nèi)容,還能保留多少呢?我所說(shuō)的這種情況,可能也是當(dāng)下我們交互設(shè)計(jì)師同學(xué)所面臨的痛。

而視覺(jué)設(shè)計(jì)師又是怎樣的現(xiàn)狀呢?視覺(jué)設(shè)計(jì)師拿到交互稿后,在交互稿的基礎(chǔ)上美化潤(rùn)色一下,自主發(fā)揮空間不太大。從我們集團(tuán)總體情況來(lái)看,視覺(jué)設(shè)計(jì)師的(P級(jí))成長(zhǎng)是比較慢的,因?yàn)槲覀冎v求論述自身設(shè)計(jì)的價(jià)值是什么,但把視覺(jué)從整體中剝離出來(lái),視覺(jué)設(shè)計(jì)師設(shè)計(jì)的某一個(gè)頁(yè)面,具體能帶來(lái)多少商業(yè)價(jià)值?視覺(jué)設(shè)計(jì)師很難去論述這點(diǎn)。


關(guān)于用研、視覺(jué)、交互這三個(gè)模塊,我也想分開(kāi)來(lái)談?wù)?,希望能?duì)目前剛?cè)胄谢蛘呷胄胁痪酶械矫悦5男』锇橛兴鶐椭?



Part 03 - 用戶研究


上面我們說(shuō)到,用研、交互、視覺(jué)這三個(gè)模塊構(gòu)成了一個(gè)用戶體驗(yàn)設(shè)計(jì)的能力維度,要搞清楚這三個(gè)維度,我們不妨先看看業(yè)界最出名的一張用戶體驗(yàn)要素圖:

我們一般把最下面戰(zhàn)略層的部分分解開(kāi),其中除了產(chǎn)品和公司戰(zhàn)略之外,關(guān)于用戶需求的定義交給用研(用戶研究)人員去完成。


關(guān)于用戶研究,如果是一個(gè)從0到1的產(chǎn)品,產(chǎn)品初期是需要對(duì)產(chǎn)品用戶進(jìn)行定位劃分和用戶畫(huà)像,就是我的這個(gè)產(chǎn)品是為了解決什么樣的用戶的什么需求的,這些用戶的屬性是怎樣的,他們具有什么樣的特質(zhì)和顏色、他們一般使用產(chǎn)品的情景是如何的?


這里需要注意的是,如果你不是一位有用研經(jīng)驗(yàn)的人去第一次嘗試做用研,需要留心我們很容易落入理想化用戶設(shè)計(jì)的陷阱。再客觀的站在用戶角度去思考,去設(shè)計(jì)也會(huì)有主觀和流于表面的情況出現(xiàn)。我們不能想當(dāng)然的按照理想情景去思考用戶需求,用戶需求是復(fù)雜的,再加上企業(yè)自己的,以及各部門(mén)的需求紛繁,所以一般在產(chǎn)品迭代的過(guò)程中新的功能很容易陷入想當(dāng)然的“用戶就是需要啊”的思維之中。所以對(duì)于成熟的產(chǎn)品來(lái)說(shuō),需要?jiǎng)澐趾诵闹髁骱推胀ㄓ脩舨⒎謩e畫(huà)像。關(guān)于用戶畫(huà)像的方法有很多很多,大家可以去隨意搜索在這里就不細(xì)談了。


還有如果是一個(gè)初次開(kāi)展用戶研究的同學(xué)做用戶研究的時(shí)候,可以掌握幾種常見(jiàn)的方法,訪談法,焦點(diǎn)小組,易用性測(cè)試,問(wèn)卷調(diào)查這些方法各有利弊,最重要的是找到當(dāng)前情境下解決問(wèn)題且行之有效的方案,比如訪談或者焦點(diǎn)小組,精心整理問(wèn)題并邀請(qǐng)公司的一些員工或者核心用戶進(jìn)行訪談并全程錄音,在結(jié)束后認(rèn)真提煉訪談中多次被用戶提到的關(guān)鍵詞,從關(guān)鍵詞中按維度抽象整理出用戶的需要,是訪談的核心價(jià)值。并且輸出文檔,賦予思考,再以此作為整個(gè)設(shè)計(jì)改版的核心依托,讓里面用戶提到的關(guān)鍵詞在設(shè)計(jì)頁(yè)面中體現(xiàn),這才是有效的設(shè)計(jì)。


關(guān)于用戶研究的常用方法,具體推薦給大家兩本大部頭的書(shū),大家感興趣或者不知道自己感不感興趣,可以去看看《設(shè)計(jì)調(diào)研》和《洞察用戶體驗(yàn)方法與實(shí)踐》 第二版。



Part 04 - 交互設(shè)計(jì) 


交互設(shè)計(jì)的輸出物是產(chǎn)品原型,也就是你們看到的線框圖。那線框圖是怎么產(chǎn)生的呢?這個(gè)需要從產(chǎn)品經(jīng)理那邊對(duì)功能梳理開(kāi)始。

一般大一點(diǎn)的有交互團(tuán)隊(duì)的公司,比如新浪微博啊之類(lèi)的,他們的產(chǎn)品經(jīng)理的工作重點(diǎn)會(huì)更加focus在功能本身到底是不是用戶所需要的,而經(jīng)過(guò)產(chǎn)品提出來(lái)的需求文檔,一般只有功能需求List和他們的優(yōu)先級(jí),如果遇到要畫(huà)圖說(shuō)明的,也就是簡(jiǎn)略的幾一個(gè)草圖。

這時(shí)候,交互設(shè)計(jì)師會(huì)根據(jù)產(chǎn)品的提出的功能需求List去進(jìn)行整理和區(qū)分:

這里整理和區(qū)分的方法是合并,拆分和歸納。

比如功能A是可以拆分成更細(xì)顆粒度的需求A1和A2的,其中A1和A2又碰巧屬于不同的已有的兩個(gè)功能區(qū)塊,那么就可以把他們拆分到不同的功能線上,如果某些功能發(fā)現(xiàn)他們有同樣的屬性,那是不是考慮把他們整合在一起?


這樣整合完了需求,再按照優(yōu)先/重要的二維表格去劃分,最后得到一個(gè)需求量表:

然后我們根據(jù)這樣的版本需求量表優(yōu)先級(jí)和重要性,有的放矢的去設(shè)計(jì)功能入口和信息架構(gòu),就會(huì)游刃有余:


而一般復(fù)雜產(chǎn)品新增功能的時(shí)候,往往要考量很多因素,不能一味的去做功能堆砌,還是需要把不重要的功能隱藏或轉(zhuǎn)移,突出重要的功能,再把一些同屬性的功能入口組織在一起并列,這些都是在原型之前需要思考的問(wèn)題。再往下,那就是根據(jù)一個(gè)一個(gè)的信息去設(shè)計(jì)產(chǎn)品低保證原型圖,那就沒(méi)啥好說(shuō)的了,你們看到的原型圖幾乎都差不多,但是至于你們的交互設(shè)計(jì)師的原型是不是按照我上面步驟一步一步推演出來(lái)的,那就要打個(gè)問(wèn)號(hào)了,這可能是區(qū)分一般交互設(shè)計(jì)師和高級(jí)一點(diǎn)的交互設(shè)計(jì)師的一種辦法。(如果你見(jiàn)到聽(tīng)到功能就開(kāi)始畫(huà)低保真的交互,那…)



如果你以為交互設(shè)計(jì)師就是畫(huà)個(gè)原型,那你就錯(cuò)了,交互設(shè)計(jì)師切記不要淪為產(chǎn)品助理……其實(shí)在真?zhèn)€UX體系中,交互設(shè)計(jì)師承擔(dān)的是最重要也是最核心的一個(gè)環(huán)節(jié),那就是優(yōu)化用戶路徑(即優(yōu)化流量路徑)。


什么叫優(yōu)化用戶路徑呢,舉個(gè)例子,全民k歌是一款唱歌的app,那用戶最核心的功能就是在上面唱歌,而關(guān)于唱歌,大概有獨(dú)唱、合唱兩種維度。比如現(xiàn)在,我作為普通用戶,想要去完成獨(dú)唱一首歌的行為。這種行為從用戶路徑上看就是用戶從任何頁(yè)面到唱歌詳情頁(yè)。那么到底有多少條路?既是說(shuō),到底有多少個(gè)頁(yè)面可以跳轉(zhuǎn)到唱歌詳情頁(yè)?然后你會(huì)發(fā)現(xiàn),其實(shí)能跳到唱歌詳情頁(yè)的,除了清唱那種獨(dú)特的方法以外,其他的都是要通過(guò)伴奏詳情頁(yè)跳轉(zhuǎn),那么問(wèn)題又來(lái)了,到底有多少個(gè)頁(yè)面可以跳轉(zhuǎn)到伴奏詳情頁(yè)呢?

就這樣,去窮舉所有的用戶路徑,然后看看這些路徑過(guò)程中有沒(méi)有一些冗余操作是可以刪減的:


窮舉所有用戶路徑,看看有沒(méi)有哪一跳是可以被優(yōu)化的(以唱吧為例



這里面有很大很大的學(xué)問(wèn),如果展開(kāi)說(shuō)的話可能是一個(gè)幾萬(wàn)字都說(shuō)不清楚的篇幅。

總之,一個(gè)好的app一定是功能和產(chǎn)品形態(tài)足夠扁平簡(jiǎn)單。

要讓產(chǎn)品形態(tài)足夠扁平簡(jiǎn)單,就需要根據(jù)app的形態(tài)去整理和梳理交互層級(jí),針對(duì)流量問(wèn)題進(jìn)行具體的分流設(shè)計(jì):

比如當(dāng)我們看到一個(gè)200wpv的頁(yè)面,下屬三個(gè)平行按鈕分別只有40w、12w和3wpv,刨除場(chǎng)景問(wèn)題之外,從交互出發(fā)那是不是我們可以設(shè)計(jì)一個(gè)內(nèi)頁(yè)的segment組件去完成三個(gè)內(nèi)頁(yè)的滑動(dòng)跳轉(zhuǎn)、降低操作成本呢?

比如淘寶這樣:

又或者說(shuō),我們是不是可以未一個(gè)pv較低卻承載功能較大的頁(yè)面另外設(shè)置另多個(gè)入口呢?

比如像外賣(mài)產(chǎn)品這樣:

最后的最后,交互設(shè)計(jì)的工作產(chǎn)出就是原型了,既然都思考妥當(dāng)了,畫(huà)個(gè)圖就就沒(méi)啥好說(shuō)的了...



Part 05 - UI設(shè)計(jì)



再往后,交互設(shè)計(jì)師會(huì)把原型給到UI設(shè)計(jì)師,UI設(shè)計(jì)師的工作范圍大家想必很了解,就是把低保真的原型變成高保真的設(shè)計(jì)稿。


在這里再啰嗦一遍啊:


UI設(shè)計(jì)師的基本技能是精確的信息視覺(jué)傳達(dá),不是視覺(jué)炫酷的界面!

UI設(shè)計(jì)師的基本技能是精確的信息視覺(jué)傳達(dá),不是視覺(jué)炫酷的界面!

UI設(shè)計(jì)師的基本技能是精確的信息視覺(jué)傳達(dá),不是視覺(jué)炫酷的界面!


重要的事情說(shuō)三遍!


我們唱吧UED最近一直在招人。

看UI的簡(jiǎn)歷,然后發(fā)現(xiàn)一個(gè)很大的問(wèn)題是,我發(fā)現(xiàn)UI設(shè)計(jì)師的簡(jiǎn)歷真的是千奇百怪五花八門(mén),有那種插畫(huà)畫(huà)的很好的,有那種第一眼上來(lái)就是一個(gè)很立體的3D建模渲染震撼到你的,也有那種大漸變dribbble風(fēng)給你一種好像很厲害的樣子的,但是這些都不重要,如果一個(gè)界面上的內(nèi)容信息沒(méi)有主次區(qū)分,或者展現(xiàn)得沒(méi)有層級(jí)對(duì)比,再花哨的東西都沒(méi)有用。


關(guān)于UI需要掌握的比如格式塔啊之類(lèi)的東西已經(jīng)有太多人說(shuō)了,在這里就不贅述,具體也可以看我的文章《形式與內(nèi)容的關(guān)系 -  app的視覺(jué)美成因分析》。


UI設(shè)計(jì)其實(shí)都不是鬧著玩的工作,也絕對(duì)不是純主觀感性的工作,判斷一個(gè)UI界面的好壞可以通過(guò)易用性和易讀性測(cè)試、瞇眼測(cè)試的方法檢驗(yàn),判斷一個(gè)產(chǎn)品交互設(shè)計(jì)的優(yōu)劣也可以從易用性測(cè)試和用戶反饋中得出線索,判斷哪種交互手段和信息架構(gòu)更為可行通過(guò)ab test的方法得出結(jié)論,這一些的一些設(shè)計(jì)它都是一個(gè)有著科學(xué)的方法論作為指導(dǎo)的。


希望從此之后大家審視產(chǎn)品的時(shí)候不要以UI美丑這種最低級(jí)的主觀因素去思考(當(dāng)然UI的一致性和美觀度很重要),但是更多的,要想想更深層次功能布局和信息架構(gòu),以及產(chǎn)品打的人群上往更加宏觀和抽象的高胃度進(jìn)行思考。


文章來(lái)源:站酷   作者:Seany

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




從交互維度量化用戶體驗(yàn)

純純

和大家分享一些在產(chǎn)品和交互設(shè)計(jì)中的一些自己的方法。



Part - I 什么是交互

狹義的交互(Interaction)定義交互主體必須是人本身,而客體可以是產(chǎn)品,環(huán)境,服務(wù)等等,且不論交互客體是什么,只要主體是人,人和客體去進(jìn)行交互的時(shí)候,一定是人帶著心理預(yù)期施加一個(gè)行為,然后客體會(huì)根據(jù)這個(gè)行為給與一個(gè)反饋(沒(méi)有反饋本質(zhì)也是一個(gè)反饋),而人會(huì)根據(jù)這個(gè)反饋是否符合預(yù)期去進(jìn)行心理修正。如下圖所示,這就是我理解的最小交互模型:

當(dāng)時(shí)我舉的例子是用翻頁(yè)器去控制ppt翻頁(yè):


如上圖所示,拆解這一套交互行為:

當(dāng)我我點(diǎn)擊翻頁(yè)器的“下一頁(yè)”按鈕,我點(diǎn)擊行為附帶的心理預(yù)期是“PPT翻往下一頁(yè)”,然后我點(diǎn)擊的時(shí)候,遙控器塑膠按鈕給到我手指一個(gè)物理反饋,證明我按下的行為已經(jīng)完成了,這是“輸出端(我的手)的交互與反饋”,這時(shí)候遙控器接收到按鈕指令,把指令通過(guò)紅外線傳輸?shù)経SB接收器上,接收器把指令傳到PC端然后完成翻頁(yè)動(dòng)作,再通過(guò)大屏幕傳到我的眼(輸入端)中,我就可以確認(rèn)這一次交互反饋是符合預(yù)期的。BTW這里有一點(diǎn)想要補(bǔ)充:設(shè)備對(duì)設(shè)備(上圖中黑色箭頭),也屬于廣義的交互,只不過(guò)現(xiàn)階段大家研究的交互設(shè)計(jì)都是狹義的,人為主體的交互。


在我們?nèi)沼每萍籍a(chǎn)品的早期,有兩個(gè)東西是無(wú)法跳過(guò)的,那就是按鍵手機(jī)和PC電腦:


他們幾乎是同步在發(fā)展的,而這兩個(gè)產(chǎn)品的交互行為基本上延續(xù)到了觸屏手機(jī)時(shí)代,所以為了弄明白觸屏手機(jī)的交互,這兩個(gè)產(chǎn)品是值得講一講的。


先看按鍵手機(jī)(就是我們小時(shí)候用的非智能手機(jī)):

在按鍵手機(jī)中,最讓用戶困惑的其實(shí)是按鍵和屏幕之間存在一個(gè)映射關(guān)系,而不同廠商缺乏一個(gè)統(tǒng)一的規(guī)范,各家映射規(guī)則不一樣。大家是否還記得當(dāng)年的手機(jī)說(shuō)明書(shū)那可以說(shuō)是相當(dāng)厚,因?yàn)檎f(shuō)明書(shū)必須要給用戶建構(gòu)一個(gè)心理模型;比如上圖,點(diǎn)擊左上角和右上角那兩個(gè)“-”按鈕,其實(shí)一一對(duì)應(yīng)的是屏幕左下角的“Goto”和右下角的“Names”。這個(gè)一一對(duì)應(yīng)關(guān)系作為今天的用戶來(lái)看應(yīng)該是很平常而且很易懂的,但是當(dāng)年沒(méi)用過(guò)手機(jī)的人,需要花很長(zhǎng)時(shí)間閱讀說(shuō)明書(shū),才能夠明白物理按鍵和屏幕上的映射關(guān)系,這就是觸屏手機(jī)很難用的地方,也是很反人性的地方。因?yàn)樽鳛橛脩魜?lái)說(shuō),心智上,我們當(dāng)然希望所觸即所得。

再來(lái)看PC,作為和按鍵手機(jī)差不多一起出現(xiàn)的載體形式,人們操作PC端人是通過(guò)媒介(也就是鼠標(biāo)+鍵盤(pán))輸入的,其實(shí)本質(zhì)上也是我們通過(guò)鼠標(biāo)在桌面上滑動(dòng)x-y區(qū)域?qū)?yīng)到電腦桌面上指針的移動(dòng)來(lái)創(chuàng)造屏幕中x-y的映射關(guān)系,然后鍵盤(pán)上幾十個(gè)鍵配合輸入完成操作。


大家發(fā)現(xiàn)了么,上述的兩種設(shè)備其實(shí)本身就是在制造一種一一對(duì)應(yīng)的映射關(guān)系去完成交互行為,這兩種載體從出身開(kāi)始就還是需要很大交互成本的。

隨著科技的發(fā)展,觸屏感應(yīng)技術(shù)推出了之后,印象中觸屏手機(jī)就是兩三年時(shí)間就摧枯拉朽的淘汰了按鍵手機(jī),本質(zhì)上是干掉了一一對(duì)應(yīng)的交互映射,所按即所得:

觸屏手機(jī)出現(xiàn)之后,交互專(zhuān)家們不禁要問(wèn)一個(gè)問(wèn)題了:

手和觸摸屏到底有多少種交互方式?

答案是有很多種:

越是高階越是隱藏的交互手勢(shì)越復(fù)雜,所謂的“交互成本”也越高,比如錘子三指滑動(dòng)換屏保那種,就是利用了高階交互便捷實(shí)現(xiàn)邊界功能。那這么看起來(lái),iOS也好還是所有的安卓手機(jī)都好,從用戶端而言,就是組合交互手勢(shì),讓信息更好的傳達(dá)而已。那么同理,在App中也是一樣,如果我們了解了每一個(gè)交互行為的用戶心理預(yù)期,對(duì)設(shè)計(jì)工作而言就能做到有的放矢:


我們以“單擊”和“滑動(dòng)”這兩個(gè)最簡(jiǎn)單的交互行為舉例。

所謂單擊手機(jī)屏幕,用戶其實(shí)最核心的是有兩個(gè)預(yù)期:

第一是選中一個(gè)元素,比如Radio組件。第二是邏輯上的Next,比如點(diǎn)了一件衣服,應(yīng)該Next到衣服的詳情;點(diǎn)了付款,應(yīng)該出現(xiàn)付款流程,點(diǎn)了返回,應(yīng)該back到上一路徑點(diǎn)等等。


劃動(dòng)交互也是一樣的,用戶在一塊手機(jī)屏幕上單指劃劃劃,用戶內(nèi)心的預(yù)期其實(shí)也不復(fù)雜,最核心的預(yù)期也就兩點(diǎn):

第一是查看屏幕外的線索(前提是設(shè)計(jì)師給用戶留下線索了或者是這個(gè)UI組件長(zhǎng)得就是可以劃動(dòng)的樣子)第二是查看相鄰標(biāo)簽的內(nèi)容,或者查看同一個(gè)標(biāo)簽下的相鄰元素,比如iOS的segment controlle組件就是典型例子:


當(dāng)我們了解了這些之后,我們?cè)趯?shí)際的設(shè)計(jì)工作中就可以根據(jù)上面這些理論來(lái)合理選擇UI組件去呈現(xiàn)對(duì)應(yīng)的信息了。




Part - II 從交互維度合理選擇UI組件

我們?cè)谠O(shè)計(jì)工作中,選擇UI組件,本質(zhì)上就是選擇信息的呈現(xiàn)形式。

每一個(gè)常見(jiàn)的UI界面和UI組件,都一定也滿足上面所說(shuō)的最小交互模型:



在這里我舉一些例子說(shuō)明。

第一個(gè)例子:同樣的內(nèi)容,選擇不同的UI組件呈現(xiàn),給用戶呈現(xiàn)的是完全不同的產(chǎn)品結(jié)構(gòu):

大家看下面這張圖:


這兩個(gè)UI模塊擺在大家面前,大家應(yīng)該能清晰的感受到,左邊是一個(gè)segment控制下面內(nèi)容的UI;而右邊是一個(gè)所有內(nèi)容列表的集合頁(yè),只不過(guò)通過(guò)tab聚類(lèi)了而已。

第一件事應(yīng)該想到的是如果需要采用右邊的排列形式就必須要控制tag的字?jǐn)?shù);然后由于右邊的tag占據(jù)了推薦貼的位置,導(dǎo)致推薦貼可能沒(méi)有左邊的那種展現(xiàn)形式更加醒目。但是相對(duì)的,圖右的優(yōu)勢(shì)在于,由于豎向排列tag可以讓一個(gè)屏幕顯示更多的tag,可以讓用戶更方便的定位內(nèi)容,比如外賣(mài)產(chǎn)品之所以用右邊這種形式是因?yàn)榱η笠黄琳故靖嗟牟?,而且外賣(mài)產(chǎn)品的左側(cè)tag一般是一家店鋪的菜的品類(lèi),用戶下滑菜品配合點(diǎn)擊品類(lèi),點(diǎn)完即走,很方便(京東和淘寶電商類(lèi)平臺(tái)也是類(lèi)似的)。

但是比如今日頭條,新聞?lì)惪蛻舳酥荒懿捎米筮叺倪@種形式,因?yàn)樾侣勵(lì)惪蛻舳耸切枰脩糸L(zhǎng)時(shí)間沉浸的,比如用戶選中一個(gè)“體育”的tag之后一般要沉浸的看好久好久,用戶需要沉浸在這個(gè)tag下的內(nèi)容中,那這個(gè)時(shí)候顯然用右邊這種設(shè)計(jì)方式讓tag常駐屏幕左側(cè)是不合適的。


再來(lái)看第二個(gè)例子,就是UI應(yīng)該會(huì)隨著內(nèi)容而進(jìn)行調(diào)整和優(yōu)化:


這里舉一個(gè)唱吧的例子,唱吧從7.0到8.6之間做了三次改版,大家可以看到,唱吧團(tuán)隊(duì)幾乎是損失了屏幕效率來(lái)加大了間隔和突出了歌名,這是為什么呢?

這是因?yàn)轫?yè)面承載的關(guān)鍵任務(wù)不同,大家對(duì)比著7.0時(shí)候和8.6時(shí)候的UI樣式,正好是今天快手和唱吧的對(duì)比:

大家會(huì)發(fā)現(xiàn),其實(shí)這個(gè)頁(yè)面,快手和唱吧承載的內(nèi)容都是消費(fèi)轉(zhuǎn)化,都希望用戶點(diǎn)擊進(jìn)去消費(fèi)內(nèi)容,但是兩款產(chǎn)品做了截然不同的UI風(fēng)格,原因是什么呢?

快手在這個(gè)頁(yè)面,其實(shí)承載的關(guān)鍵任務(wù)是:“迅速讓用戶找到感興趣的點(diǎn)”,它這么設(shè)計(jì)的本質(zhì)原因是因?yàn)樗慕貓D可以幫助用戶判斷內(nèi)容本身,比如第一張圖是一個(gè)人在打高爾夫,右邊是一個(gè)工人,然后第二排左邊是一個(gè)游戲的鏡頭,右邊是一個(gè)傳遞正能量,大家可以很方便的通過(guò)圖片識(shí)別里面的內(nèi)容,用戶更沉浸更聚焦的去選自己喜歡的點(diǎn)擊進(jìn)入消費(fèi)就可以了。但是唱吧的視頻截圖其實(shí)是不能識(shí)別里面內(nèi)容的,大家可以看到,第一張圖是一個(gè)妹子,第二場(chǎng)圖是一個(gè)妹子,第三張圖還是一個(gè)妹子,那用戶點(diǎn)擊進(jìn)去的動(dòng)力在哪兒了?除了這個(gè)照片長(zhǎng)相之外,更多的其實(shí)是文字決定的,是這個(gè)人唱的這首歌的歌曲名是不是我喜歡的,或者是這個(gè)演唱者的的歌手等級(jí)。

所以基于這種跟深層次的邏輯,唱吧和快手兩款產(chǎn)品的這個(gè)頁(yè)面都是為了促進(jìn)消費(fèi)轉(zhuǎn)化,但是UI長(zhǎng)相上完全不同。


我們看第三個(gè)例子:


同樣組件下,選擇不同的交互方式,也會(huì)使得效果完全不同,比如現(xiàn)在有一個(gè)UI頁(yè)面,主要由一個(gè)tab(iOS叫segment controlled)組件控制下面的內(nèi)容,樣子張這樣:


我先假定一個(gè)前提:這個(gè)app中的這個(gè)組件不支持橫劃,只支持點(diǎn)擊切換。

好了,現(xiàn)在我假設(shè)這是一款已經(jīng)穩(wěn)定運(yùn)營(yíng)了一年的產(chǎn)品,為了說(shuō)明問(wèn)題,我假設(shè)一個(gè)理想數(shù)據(jù):

假設(shè)每天有20W的uv訪問(wèn)這個(gè)頁(yè)面,其中分流情況是:

10Wuv消費(fèi)“推薦”下的內(nèi)容

2Wuv消費(fèi)“生活”下的內(nèi)容

1Wuv消費(fèi)“段子”下的內(nèi)容

3Wuv消費(fèi)“美女”下的內(nèi)容

4Wuv消費(fèi)“游戲”下的內(nèi)容


這時(shí)候,為了優(yōu)化交互行為,有一天決定把這個(gè)tab組件從不可橫向劃動(dòng)改成可以劃動(dòng)的(并且告訴用戶這里可以滑動(dòng)了喲~),然后給你一次機(jī)會(huì)重新排列這五個(gè)tab順序,你會(huì)怎么做呢?最簡(jiǎn)單的辦法當(dāng)然是把五個(gè)tab按照用戶消費(fèi)意愿逐一排列,即:“推薦、游戲、美女、生活、段子”。

這樣排列當(dāng)然沒(méi)有任何問(wèn)題,但是還有沒(méi)有更優(yōu)解呢?我給出的解決辦法是這樣的,大家評(píng)判一下:

按照用戶的消費(fèi)量,“游戲”是消費(fèi)量第二的一個(gè)tab,毫無(wú)疑問(wèn)我會(huì)把它排在第二項(xiàng),這樣可以刺激用戶劃動(dòng)行為,然后“美女”是消費(fèi)量第三的,我會(huì)把他放在第四位,這時(shí)候我會(huì)把“段子”和“生活”這兩個(gè)消費(fèi)率最低的tab分AB test做兩個(gè)版本放在第三和第五位拿去測(cè),以判斷之前的“段子”和“生活”是由于自身內(nèi)容不夠優(yōu)質(zhì),還是之前交互成本太低導(dǎo)致的數(shù)據(jù)較差:



最后我們來(lái)看第四個(gè)例子:


比如一個(gè)app,他的UI張如下圖所示的這個(gè)樣子


現(xiàn)在假設(shè)在運(yùn)營(yíng)和市場(chǎng)團(tuán)隊(duì)不做任何努力的情況下,單從產(chǎn)品交互的角度,能不能優(yōu)化上面這個(gè)版塊的點(diǎn)擊率?

首先我們來(lái)分析一下頁(yè)面架構(gòu):

如果我們認(rèn)為,不管是點(diǎn)擊右上角的“>”,還是點(diǎn)擊留個(gè)圓形入口都算完成轉(zhuǎn)化的話,我們現(xiàn)在的這個(gè)紅色的UI組件,入口位置一共有7個(gè)。根據(jù)長(zhǎng)尾理論,如果我們把這個(gè)圓形入口從6個(gè)擴(kuò)展到比如九個(gè),是不是一定對(duì)轉(zhuǎn)化率有正向影響?答案并不一定:

為什么呢?因?yàn)橹饕沁@樣的改動(dòng)會(huì)帶來(lái)一個(gè)未知的泳道橫劃交互,它會(huì)產(chǎn)生一定的影響,如下圖所示:

用戶看到這個(gè)泳道之后可能出現(xiàn)三種行為:

a.“用戶完全不滑動(dòng)”——那入口就從7個(gè)變成了7.5個(gè),別的沒(méi)有變量影響。

b.“用戶滑動(dòng)看完了之后,點(diǎn)擊某一個(gè)或者左上角的“>”進(jìn)入”——這是我們想要的轉(zhuǎn)化

c.“用戶滑動(dòng)看了這些圓形入口之后松手,就是不點(diǎn)擊進(jìn)去”——這是我們不愿意看到的結(jié)果

想到這里,那為什么我們不能讓用戶直接滑動(dòng)之后松手就跳轉(zhuǎn)呢?


想到這里,所以優(yōu)化方案如下圖所示,給與用戶一個(gè)x軸區(qū)間,滑動(dòng)手勢(shì)操過(guò)那個(gè)區(qū)間則告訴用戶你現(xiàn)在松手默認(rèn)跳轉(zhuǎn),用戶不愿意跳轉(zhuǎn)也可以回劃,只要不足這個(gè)x區(qū)間就給與用戶自主選擇的機(jī)會(huì):


我之前在上家工作的時(shí)候,我們把6個(gè)圓形入口變成了10個(gè),然后用這個(gè)“松手跳轉(zhuǎn)”的交互把單元模塊的穿透率從21%提升到了31%,這是一個(gè)實(shí)戰(zhàn)當(dāng)中的真實(shí)例子。


當(dāng)然了,請(qǐng)大家再思考這樣的一個(gè)問(wèn)題:


一個(gè)頁(yè)面的流量就這么大,一個(gè)地方漲了11%,那勢(shì)必別的地方就會(huì)相應(yīng)的損失11%。一般情況下app首頁(yè)承擔(dān)著80%以上的分流工作,根據(jù)流量漏斗來(lái)看的話每一次引流都會(huì)導(dǎo)致其他模塊的數(shù)據(jù)下降,所以設(shè)計(jì)師們應(yīng)該要根據(jù)運(yùn)營(yíng)策略和公司大的產(chǎn)品OKR來(lái)合理選用合適的交互組件,以達(dá)到想要的目的,還是那句話:“小孩兒才分對(duì)錯(cuò),大人只看利弊。”




Part - III 從交互的維度量化用戶體驗(yàn)

移動(dòng)互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,尤其是在中國(guó)的app產(chǎn)品,有兩大分歧陣營(yíng):

“扁平”陣營(yíng)表示了,我們需要產(chǎn)品足夠扁平,最好就是三次交互可以觸達(dá)所有app界面:

“簡(jiǎn)潔”陣營(yíng)也表示了,我們需要頁(yè)面信息足夠簡(jiǎn)潔,最好一個(gè)頁(yè)面只完成一個(gè)核心任務(wù):



雙發(fā)你來(lái)我往,誰(shuí)也說(shuō)服不了誰(shuí),如下圖所示,“簡(jiǎn)潔”陣營(yíng)反駁“扁平”陣營(yíng)說(shuō):你們一點(diǎn)都不遵守席客定律,層級(jí)扁平是扁平了,但是相應(yīng)的頁(yè)面信息變得越來(lái)越多,給用戶呈現(xiàn)的干擾就越來(lái)越多,用戶做出決定的時(shí)間也越來(lái)越多,所以你們“扁平黨”都是辣雞。這時(shí)候“扁平”陣營(yíng)也找到了反駁的論點(diǎn),他們說(shuō)你看你頁(yè)面足夠簡(jiǎn)潔了,但是頁(yè)面層級(jí)就很深啊,交互成本這么高,每一次都伴隨流失,可用性這么差,你們還有理了?所以“簡(jiǎn)潔黨”你們才是辣雞!


中國(guó)的互聯(lián)網(wǎng)產(chǎn)品,很難做到既簡(jiǎn)潔又扁平,這個(gè)問(wèn)題的根源在于永遠(yuǎn)有那么多信息需要呈現(xiàn),永遠(yuǎn)有那么多功能需要添加,這個(gè)是中國(guó)的激烈市場(chǎng)競(jìng)爭(zhēng)導(dǎo)致的,并不是說(shuō)中國(guó)的產(chǎn)品就不如國(guó)外的好(我的哥哥之前在Facebook現(xiàn)在Airbnb工作,他經(jīng)常感嘆道國(guó)外的互聯(lián)網(wǎng)產(chǎn)品到中國(guó)來(lái)真的都得死...)我想要討論的是,面對(duì)中國(guó)現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品市場(chǎng)現(xiàn)狀, 如果一款產(chǎn)品非要你站隊(duì)上面兩派陣營(yíng),你會(huì)選哪一派?我現(xiàn)在的選擇是“扁平黨”,因?yàn)橛脩裘媾R一款眼花繚亂的app,如果是經(jīng)常使用,缺功能布局信息架構(gòu)很少改動(dòng)的前提下,早晚也會(huì)習(xí)慣和適應(yīng)的,但是如果一些核心的東西不能第一時(shí)間暴露在用戶眼中,很有可能用戶就不知道你有這種功能。這個(gè)就是為什么我們?cè)O(shè)計(jì)經(jīng)常會(huì)說(shuō)這個(gè)產(chǎn)品經(jīng)理傻逼吧,怎么什么東西都想展現(xiàn)出來(lái),這一堆東西找個(gè)入口集合收起來(lái)頁(yè)面多干凈多清爽多好看呀~~我早年間也是和諸位一樣的觀點(diǎn),但是現(xiàn)在我越來(lái)越覺(jué)得,界面清爽了,你的大功能feature因?yàn)樵O(shè)計(jì)隱藏沒(méi)有被發(fā)現(xiàn),不是設(shè)計(jì)開(kāi)發(fā)測(cè)試都白做了么,說(shuō)好的ROI在哪里?


我們大家都是互聯(lián)網(wǎng)從業(yè)者,不管看到這篇文章的你是一位設(shè)計(jì)、產(chǎn)品、還是開(kāi)發(fā)、測(cè)試、運(yùn)營(yíng)人員,我們都明白用戶體驗(yàn)這個(gè)詞是由N多維度綜合而成的一個(gè)過(guò)程性評(píng)價(jià),它和方方面面都有關(guān)系。



那既然是這么專(zhuān)業(yè)且牽連甚廣的一個(gè)名詞,我們真的就沒(méi)有辦法去量化評(píng)價(jià)它了嗎?

永遠(yuǎn)不要忘記,用戶體驗(yàn)是個(gè)過(guò)程,而我們每個(gè)人也都是用戶本身。在這里我提供一種普通用戶維度的比較好用的用戶體驗(yàn)評(píng)估方法是“窮舉分析用戶行為路徑”。


比如你是一款外賣(mài)產(chǎn)品的設(shè)計(jì)師,那么用戶在不同產(chǎn)品模塊下定一個(gè)外賣(mài)的流程路徑大概有多少種,都窮舉出來(lái)。比如你是一款在線演唱類(lèi)的產(chǎn)品設(shè)計(jì)師,那么用戶在產(chǎn)品中完成一首歌需要的用戶路徑到底有多少條,窮舉所有路徑之后一一優(yōu)化,讓路徑變得更加扁平,或許是一個(gè)最“笨”但是有效的方案,怎么優(yōu)化呢?用淘寶消息頁(yè)舉個(gè)例子:


淘寶消息頁(yè)上面有“交易物流”、“通知”、“互動(dòng)”三個(gè)tab,這時(shí)候我們假設(shè)一個(gè)用戶三個(gè)按鈕下面都有消息,用戶想要看完這三個(gè)消息大概需要幾次交互?答案是至少6次:“點(diǎn)擊第一個(gè)進(jìn)去 - 返回 - 點(diǎn)擊第二個(gè)進(jìn)去 - 返回 - 點(diǎn)擊第三個(gè)進(jìn)去 - 返回”,這樣的交互顯得呆板且冗長(zhǎng),淘寶團(tuán)隊(duì)巧妙的把三個(gè)內(nèi)頁(yè)集合成一個(gè)頁(yè)面的三個(gè)tab形式,大大縮短的交互成本,這就是所謂的“把用戶路徑變得更扁平”:


大家在使用很多產(chǎn)品的過(guò)程中,多多留心就會(huì)發(fā)現(xiàn)原來(lái)細(xì)節(jié)里面總有魔鬼。


文章來(lái)源:站酷   作者:Seany

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


用戶體驗(yàn)度量模型

周周

本文介紹了幾個(gè)關(guān)于用戶體驗(yàn)度量的模型,UES模型、適合網(wǎng)站的 PLUSE、谷歌的 HEART、螞蟻的 PTECH和GSM模型,它們各有切入點(diǎn),也各有其適應(yīng)場(chǎng)景。對(duì)各個(gè)模型的概念和它們相應(yīng)的維度做了詳細(xì)的介紹。

你好,我是《用戶體驗(yàn)四維度》

ui設(shè)計(jì)分享達(dá)人

你好,我是《用戶體驗(yàn)四維度》,一本關(guān)于用戶體驗(yàn)的新書(shū),今天正式上市了。


具體內(nèi)容方面,我選擇了聚焦于“人”——主要探討了人與界面、人與內(nèi)容、人與人和人與品牌的交互體驗(yàn)——大部分話題既有宏觀上的綱領(lǐng),也有微觀上的實(shí)現(xiàn)細(xì)節(jié)。這四類(lèi)交互體驗(yàn),下文的提及會(huì)使用簡(jiǎn)稱,所以先看下簡(jiǎn)稱及對(duì)應(yīng)的全稱。

 

HI X:Human Interface Experience,人與界面的交互體驗(yàn);

HC X:Human Content Experience,人與內(nèi)容的交互體驗(yàn);

HH X:Human Human Experience,人與人的交互體驗(yàn);

HB X:Human Brand Experience,人與品牌的交互體驗(yàn)。



下面把時(shí)間交給作者李瀟,由他來(lái)做一些分享。

 

你好,我是作者李瀟。我主要分享兩點(diǎn),第一點(diǎn)是這本書(shū)的來(lái)龍去脈,第二點(diǎn)是這本書(shū)的主要特點(diǎn)。

 

 

01 《用戶體驗(yàn)四維度》的緣起

 

2019 年 7 月 15 日,我在個(gè)人公眾號(hào)上發(fā)表了第一篇設(shè)計(jì)類(lèi)文章《淺談 Keep 的 UI 設(shè)計(jì)》,轉(zhuǎn)到朋友圈后有很多人點(diǎn)贊,也有朋友說(shuō)寫(xiě)得不錯(cuò),轉(zhuǎn)到站酷后也有很多設(shè)計(jì)師留言稱贊。算是一個(gè)還行的開(kāi)頭,這給了我信心。

 

之所以會(huì)寫(xiě)公眾號(hào),是因?yàn)楫?dāng)時(shí)我成立了一個(gè)個(gè)人的設(shè)計(jì)工作室,希望借公眾號(hào)的文章引來(lái)一些客流。之所以第一篇文章會(huì)寫(xiě) Keep,一方面是因?yàn)?Keep 比較知名,另一方面是因?yàn)槲冶容^喜歡 Keep,也是 Keep 比較忠實(shí)的用戶。

 

當(dāng)時(shí)的計(jì)劃就是挑一些個(gè)人比較喜歡的、具有一定知名度的產(chǎn)品來(lái)寫(xiě),每款產(chǎn)品至少寫(xiě)兩篇文章,一篇寫(xiě) UI 設(shè)計(jì),一篇寫(xiě)交互設(shè)計(jì),或許還可以就產(chǎn)品功能再寫(xiě)一篇。因?yàn)槲曳謩e從事過(guò)產(chǎn)品經(jīng)理和 UI 設(shè)計(jì)的工作,同時(shí)也兼任過(guò)交互設(shè)計(jì)的工作,有這些方面的經(jīng)驗(yàn)。

 

按照計(jì)劃,第二篇文章很自然地就是關(guān)于 Keep 的交互設(shè)計(jì),不過(guò)名字是《淺談 Keep 的用戶體驗(yàn)》。因?yàn)樗鶎?xiě)內(nèi)容已經(jīng)超出了“交互設(shè)計(jì)”的范疇,而“用戶體驗(yàn)”恰好是一個(gè)更合適的主題。這篇文章的反響依然還行。另外,有趣的是,根據(jù)使用感受,我發(fā)現(xiàn) Keep 這個(gè)擁有課程和社區(qū)的運(yùn)動(dòng)品牌,它的用戶體驗(yàn)可以用四個(gè)維度來(lái)描述,它們分別是:人與界面、人與內(nèi)容(課程)、人與人(社區(qū))、人與品牌。沒(méi)錯(cuò),這就是本書(shū)最原始的雛形了。

 

再加上也有讀者朋友反饋說(shuō)“用戶體驗(yàn)的四維度”挺不錯(cuò),有啟發(fā)。于是第三篇文章就“拐彎”了——沒(méi)寫(xiě) Keep 的產(chǎn)品功能,也沒(méi)寫(xiě)其他產(chǎn)品,而是把“用戶體驗(yàn)的四維度”單獨(dú)寫(xiě)成了一篇文章:《淺談?dòng)脩趔w驗(yàn)的 4 個(gè)維度》。

 

某種程度上,第三篇文章的反響好過(guò)前兩篇,因?yàn)楫?dāng)時(shí)有 3 個(gè)業(yè)內(nèi)比較知名的公眾號(hào)(分別是 MicroUX、應(yīng)謀鬼計(jì)、UXPA,在此向他們致以謝意)轉(zhuǎn)載了這篇文章,且有一名立志成為產(chǎn)品經(jīng)理的大學(xué)生根據(jù)這篇文章的觀點(diǎn)寫(xiě)了一篇分析 QQ 和微信用戶體驗(yàn)的文章:《從微信與 QQ 的交互比較中談?dòng)脩趔w驗(yàn)》。另外,當(dāng)時(shí)在跟一些朋友聊起我寫(xiě)公眾號(hào)的近況時(shí),有兩位設(shè)計(jì)師朋友都提了句“可以寫(xiě)書(shū)/出書(shū)”。

 

不知說(shuō)者是否有意,但是聽(tīng)者有心,朋友的話更加堅(jiān)定了我內(nèi)心逐漸萌發(fā)的寫(xiě)書(shū)的想法。第三篇文章之后,我就開(kāi)始認(rèn)真考慮寫(xiě)書(shū)這件事了:首先,“用戶體驗(yàn)的四維度”這個(gè)概念比較新,或許可以作為書(shū)的框架;其次,個(gè)人對(duì)用戶體驗(yàn)非常感興趣,也就是對(duì)這個(gè)潛在的書(shū)的框架非常感興趣;第三,發(fā)在網(wǎng)上的文章,包括“用戶體驗(yàn)的四維度”這個(gè)概念,反響都還行;第四,公眾號(hào)我是全職在寫(xiě),為了質(zhì)量寫(xiě)得很慢(平均兩周一篇 4000 多字的文章),時(shí)間成本已然很高,還不如再增加點(diǎn)時(shí)間成本來(lái)寫(xiě)書(shū)。

 

所以,是不是真的可以把“用戶體驗(yàn)的四維度”寫(xiě)成一本書(shū)?

 

試試才知道。于是,在參考很多書(shū)的大綱以后,2019 年 8 月下旬,我就為“用戶體驗(yàn)的四維度”列好了一個(gè)初步的大綱。

 

之后發(fā)在網(wǎng)上的所有文章,也就是從第四篇開(kāi)始,就是按照這個(gè)大綱來(lái)寫(xiě)的。也就是說(shuō),我是先把書(shū)稿寫(xiě)成了網(wǎng)文,這種網(wǎng)文的更新一直持續(xù)到第 2 章 HI X(人與界面的交互體驗(yàn))的尾聲,隨后斷更。因?yàn)槟菚r(shí)已和出版社簽好合同了,按照約定,書(shū)里的內(nèi)容不再發(fā)到網(wǎng)上。對(duì)于那些曾在網(wǎng)上追過(guò)我文章的讀者朋友,在此我要說(shuō)聲抱歉,請(qǐng)見(jiàn)諒。

 

順便說(shuō)下書(shū)稿和網(wǎng)文的主要區(qū)別。歷經(jīng)編輯的指導(dǎo)與建議、作者的反復(fù)修改、審校流程的打磨,與網(wǎng)文相比:

一,書(shū)稿的邏輯與結(jié)構(gòu)更加嚴(yán)謹(jǐn)、合理,內(nèi)容和語(yǔ)言也比網(wǎng)文精簡(jiǎn);

二,書(shū)稿更加體系化,相互之間(如 HI X 部分的根需求、功能架構(gòu)和信息架構(gòu))盡可能做到了“環(huán)環(huán)相扣”,章節(jié)之間的起承轉(zhuǎn)合也更加連貫、自然;

三,書(shū)稿在內(nèi)容層面進(jìn)行了一定程度的修改和優(yōu)化,個(gè)別章節(jié)(第 1 章的四維度,第 2 章的根需求、功能架構(gòu)等)則是進(jìn)行了極大程度的修改和優(yōu)化。

四,書(shū)稿在產(chǎn)品案例和生活案例方面也進(jìn)行了一定程度的調(diào)優(yōu)。

 

以上就是這本書(shū)的一個(gè)簡(jiǎn)單緣由,接下來(lái)分享下它的主要特點(diǎn)。

 

 

02 《用戶體驗(yàn)四維度》的特點(diǎn)

 

這本書(shū)主要有四個(gè)特點(diǎn),它們分別是:追求深度、追求卓越、展望未來(lái)、兼顧大小。當(dāng)然,我也很期待你去發(fā)現(xiàn)這本書(shū)的其他特點(diǎn),包括它的缺點(diǎn)。



1 追求深度
 
無(wú)論是宏觀上的大綱(用戶體驗(yàn)四維度),還是微觀上的具體內(nèi)容(根需求、功能架構(gòu)、UI 設(shè)計(jì)、HH X 等),本書(shū)都著力于深挖本質(zhì)。
 
先以根需求為例。在日常工作中,“需求”是一個(gè)高頻詞匯:大到上線一個(gè)大功能,小到改一下字體顏色,都被我們稱之為“需求”。面對(duì)大大小小、林林總總的“需求”,是不是有必要關(guān)注下根需求(本質(zhì)需求)?因?yàn)楦枨笫且磺行枨蟮母尽H绻枨笥袉?wèn)題,往往意味著用戶的根需求沒(méi)有完全得到滿足,那由此衍生出來(lái)的一系列大小需求都會(huì)有問(wèn)題;如果根需求有問(wèn)題,就意味著這個(gè)行業(yè)的類(lèi)似產(chǎn)品,依然有機(jī)會(huì),直到用戶的根需求完全得到滿足為止。所以本書(shū)就以幾乎人人都會(huì)用的資訊產(chǎn)品為例,比較深入地探討了兩類(lèi)用戶(生產(chǎn)型用戶和消費(fèi)型用戶)的根需求。
 
再以 UI 設(shè)計(jì)為例。關(guān)于 UI 設(shè)計(jì),最近幾年出現(xiàn)了一些“商業(yè)化設(shè)計(jì)”“增長(zhǎng)設(shè)計(jì)”的概念,也就是說(shuō),UI 設(shè)計(jì)的肩膀上多了“增長(zhǎng)”“商業(yè)化”這些擔(dān)子。這不禁使人擔(dān)心,未來(lái)會(huì)不會(huì)有新的擔(dān)子,繼續(xù)加在 UI 設(shè)計(jì)的肩膀上?另外,術(shù)業(yè)有專(zhuān)攻,職能亦有分工,這些擔(dān)子,UI 設(shè)計(jì)擔(dān)負(fù)得起嗎?我認(rèn)為未必?fù)?dān)負(fù)得起。就像于動(dòng)物的生命而言,心肝肺各有分工、各有貢獻(xiàn),總不能讓心臟負(fù)責(zé)呼吸、肝臟負(fù)責(zé)跳動(dòng)、肺負(fù)責(zé)造血。于心肝肺而言,做好分內(nèi)的事情就是最大的擔(dān)當(dāng)與貢獻(xiàn);于 UI 設(shè)計(jì)、交互設(shè)計(jì)、信息架構(gòu)、產(chǎn)品功能等而言,情況亦然。那 UI 設(shè)計(jì)的分內(nèi)事是什么?是它的本質(zhì),這便是本書(shū)關(guān)于 UI 設(shè)計(jì)的探討視角。
 
2 追求卓越
 
在本書(shū)中,有些話題有嘗試深挖本質(zhì),有些話題沒(méi)有。不管有沒(méi)有深挖本質(zhì),最終目的都是落腳于“如何做到更好”,也就是追求卓越。
 
以交互設(shè)計(jì)為例,在規(guī)劃它的大綱時(shí),我嘗試過(guò)不同的切入點(diǎn):大的設(shè)計(jì)原則(iOS Human Interface Guidelines, 尼爾森十大交互原則等)、小的交互細(xì)節(jié)(微交互)、設(shè)計(jì)哲學(xué)(3-4 個(gè)要點(diǎn))、設(shè)計(jì)目的(人人喜愛(ài))。仔細(xì)斟酌之后,我發(fā)現(xiàn)要想實(shí)現(xiàn)“人人喜愛(ài)”這個(gè)設(shè)計(jì)目的,“設(shè)計(jì)哲學(xué)”這個(gè)方法的可能性是最大的,而且設(shè)計(jì)哲學(xué)本身是足夠“海納百川”足夠“獨(dú)立成章”的,所以最終果斷摒棄了其他切入點(diǎn),而只保留了“設(shè)計(jì)哲學(xué)”這個(gè)切入點(diǎn)。具體而言,這個(gè)設(shè)計(jì)哲學(xué)就是:周到,品質(zhì),驚喜,善意。想象一下,一個(gè)為人周到、能力(品質(zhì))卓越、時(shí)不時(shí)會(huì)給身邊人帶來(lái)驚喜、同時(shí)又很善良的人,自然會(huì)受到身邊人的喜愛(ài)。類(lèi)似的交互設(shè)計(jì),同樣會(huì)受到用戶的喜愛(ài)。

3 展望未來(lái)
 
內(nèi)容“扎根生活”是本書(shū)的追求之一。但是當(dāng)探討到目前面臨困境并存在諸多不足的話題時(shí)——比如 UGC 產(chǎn)品(HC X 部分)——本書(shū)則會(huì)更多地展望一下未來(lái)。
 
UGC 產(chǎn)品面臨什么困境,存在什么不足?
 
以文章類(lèi) UGC 產(chǎn)品為例:各行各業(yè)的從業(yè)者——比如教師和律師——都有自我充電(如看到本行業(yè)高品質(zhì)的深度文章)的需求,這個(gè)需求基本上能在公眾號(hào)里得到滿足;但是,不管一篇深度文章的品質(zhì)有多高,公眾號(hào)這個(gè)包含各類(lèi)信息的平臺(tái),都是像黑洞一樣將其“吞噬”和“湮沒(méi)”,而不是像書(shū)店、圖書(shū)館一樣將其“陳列”和“流傳”下去。再以極其熱門(mén)的短視頻類(lèi) UGC 產(chǎn)品為例:得益于簡(jiǎn)單易用等諸多優(yōu)勢(shì),短視頻類(lèi) UGC 產(chǎn)品在“信息和知識(shí)的大眾普惠”(尤其是針對(duì)老年人)上做出了重要貢獻(xiàn);但是,短視頻類(lèi) UGC 產(chǎn)品也存在一定不足,比如容易使人上癮、沉迷,比如上面的信息和知識(shí)一定程度上缺乏質(zhì)量保障。
 
未來(lái)更好,或更受歡迎和尊重的 UGC 產(chǎn)品,會(huì)是什么樣子?
 
個(gè)人觀點(diǎn),首先是簡(jiǎn)單清晰的分類(lèi),也即 UGC 產(chǎn)品需要分成知識(shí)型 UGC 和信息型 UGC,前者以知識(shí)為主,后者會(huì)包含前者。實(shí)際上這個(gè)分類(lèi)目前是存在的,比如站酷、人人都是產(chǎn)品經(jīng)理、CSDN 等社區(qū)就屬于知識(shí)型 UGC,公眾號(hào)、B 站、抖音等平臺(tái)則屬于信息型 UGC。
 
篇幅所限,這里僅說(shuō)下信息型 UGC。以短視頻類(lèi)的信息型 UGC 產(chǎn)品為例,雖然大熱,但也飽受爭(zhēng)議,甚至飽受詬病。什么樣的信息型 UGC,在廣受歡迎的同時(shí)還受人尊重,甚至受人喜愛(ài)?據(jù)個(gè)人觀察,有兩大類(lèi)。一類(lèi)是像公眾號(hào)這樣足夠多元的“真實(shí)世界”,另一類(lèi)是像 B 站、Instagram 這樣在某些方面比較美好的“理想世界”。“真實(shí)世界”和“理想世界”,值得所有信息型 UGC 來(lái)學(xué)習(xí)。

關(guān)于信息型 UGC,怎么建立更多“真實(shí)世界”和“理想世界”?關(guān)于知識(shí)型 UGC,未來(lái)更好的產(chǎn)品會(huì)是什么樣子?這些問(wèn)題,本書(shū)都嘗試進(jìn)行了探討,以供參考。

4 兼顧大小
 
用戶體驗(yàn)的四個(gè)維度,交互設(shè)計(jì)的設(shè)計(jì)哲學(xué),知識(shí)型 UGC 和信息型 UGC,都是比較宏觀的大話題。本書(shū)不光有這些大話題,還有與之對(duì)應(yīng)的關(guān)乎“怎么實(shí)現(xiàn)”的小細(xì)節(jié)。
 
還以交互設(shè)計(jì)為例,周到的、高品質(zhì)的、給人驚喜的、帶有善意的交互設(shè)計(jì)會(huì)受人喜愛(ài),那交互設(shè)計(jì)如何做到周到、品質(zhì)、驚喜和善意呢?自然而然地,本書(shū)就這四個(gè)問(wèn)題進(jìn)行了比較深入的探討。以“驚喜”為例,本書(shū)先是將交互設(shè)計(jì)的“驚喜”分為“小驚喜”和“大驚喜”,簡(jiǎn)單給出了定義和示例,然后又就“如何做到驚喜”分別給出了針對(duì)短期(可以立馬實(shí)現(xiàn),更適合“小驚喜”)和長(zhǎng)期(需要長(zhǎng)期積累,更適合“大驚喜”)的建議。
 
于 UI 設(shè)計(jì)、信息架構(gòu)、功能架構(gòu)、HH X 等話題而言,也是同樣的或類(lèi)似的寫(xiě)作手法。


分享完主要特點(diǎn),接下來(lái)請(qǐng)?jiān)试S我簡(jiǎn)單介紹下這本書(shū)適合哪些讀者,供你參考。
 
5 適宜人群
 
得益于以上幾個(gè)主要特點(diǎn),再加上本書(shū)涉及的話題既有屬于基礎(chǔ)的根需求、功能架構(gòu)、信息架構(gòu)、交互設(shè)計(jì)、UI 設(shè)計(jì),也有更進(jìn)一步的 HC X(人與內(nèi)容的交互體驗(yàn))、HH X(人與人的交互體驗(yàn))和 HB X(人與品牌的交互體驗(yàn)),個(gè)人觀點(diǎn):
 
本書(shū)既適合一線從業(yè)者(產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI 設(shè)計(jì)師等),也適合相關(guān)從業(yè)者(技術(shù)人員、運(yùn)營(yíng)人員、市場(chǎng)人員等);
既適合創(chuàng)業(yè)者(“根需求”“功能架構(gòu)”以及“知識(shí)型 UGC”“信息型 UGC”等部分或許會(huì)使你發(fā)現(xiàn)更多新的機(jī)會(huì)),也適合學(xué)生。
 
希望你能在書(shū)中找到自己需要的、或自己感興趣的內(nèi)容。
 
以上就是我的分享,接下來(lái)把時(shí)間交給《用戶體驗(yàn)四維度》。
 
 
結(jié)語(yǔ)
 
好的,謝謝作者李瀟的分享,讓我意識(shí)到我的出生似乎是個(gè)意外;也謝謝李瀟把我夸得這么好,但我還是要補(bǔ)充一句,他的夸獎(jiǎng)僅供參考,一切以自己的切身感受為準(zhǔn)。
 
用戶即人,談?dòng)脩趔w驗(yàn),自然離不開(kāi)對(duì)人的關(guān)注。人作為高級(jí)動(dòng)物,自然有其強(qiáng)大和理智的一面;人作為動(dòng)物本身——置身于高速發(fā)展的現(xiàn)代社會(huì),置身于“亂花業(yè)已迷人眼”的智能化信息社會(huì),置身于既相互溫暖也相互競(jìng)爭(zhēng)甚至還相互“傷害”的同類(lèi)中——也有其脆弱和感性的一面。正如李宇春在《軟肋》里唱的那樣: 


是最堅(jiān)強(qiáng)的人,是最脆弱的人   
是最理智的人,是最敏感的人   
固若金湯的人,語(yǔ)無(wú)倫次的人   
不過(guò),血肉之身   


 
同樣作為人的互聯(lián)網(wǎng)從業(yè)者,在打造自家產(chǎn)品時(shí),在兼顧商業(yè)化的同時(shí),有沒(méi)有可能以更美好的方式去對(duì)待這一個(gè)個(gè)用戶,一個(gè)個(gè)血肉之身?
 
我想這是一些產(chǎn)品正在面臨的問(wèn)題,也是所有產(chǎn)品都難以回避的問(wèn)題(用戶利益和企業(yè)利益難免會(huì)發(fā)生矛盾)。互聯(lián)網(wǎng)行業(yè)在中國(guó)的蓬勃發(fā)展,不過(guò)二三十年的歷史,所以相信這也是一個(gè)布滿荊棘、充滿希望的問(wèn)題?!队脩趔w驗(yàn)四維度》從根本上探討的,也正是這個(gè)問(wèn)題。希望我的探討,能為你帶來(lái)一點(diǎn)參考或啟發(fā)。
 
最后,謝謝你的時(shí)間。


- -  The End - -


實(shí)拍圖:

undefined

文章來(lái)源:站酷      作者:SonwDesign

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)



日歷

鏈接

個(gè)人資料

存檔