首頁

必讀!用戶體驗設(shè)計指南 - KIT組件庫一站式體驗搭建

ui設(shè)計分享達人

本文將從理論到實踐,從軟件到插件,再到不同應(yīng)用場景拆解和團隊協(xié)同的重構(gòu),一步步教你如何搭建產(chǎn)品KIT組件庫。也給大家?guī)砟嫣斓腁nima插件教程,組件化設(shè)計的必備插件,目前國內(nèi)還比較少有文章講到。手把手!嘴對嘴!堪稱全網(wǎng)最細(xì)保姆級教程!




01. 什么是KIT組件庫?


一個成熟的設(shè)計團隊,都會為產(chǎn)品制定設(shè)計規(guī)范,搭建產(chǎn)品KIT組件庫,組件化思維也是設(shè)計師的必備思維之一。組件庫會讓團隊協(xié)作變得高效且一致,讓團隊成員專注于深耕體驗和細(xì)節(jié),實現(xiàn)設(shè)計向產(chǎn)品賦能。極大的節(jié)省設(shè)計和開發(fā)成本,優(yōu)化用戶在界面流轉(zhuǎn)間的感知差異體驗。


KIT組件庫本質(zhì)上是一個集合的Sketch文件,由原子、分子、組織、模板、頁面組成。原子理論支撐可復(fù)用、可修改、易于協(xié)同和維護。


由Google推出的當(dāng)時媲美蘋果全新設(shè)計語言的Material Design,Material Design也是最為經(jīng)典組件庫設(shè)計。現(xiàn)如今阿里的Ant Design和Element給我們提供了一套完整可復(fù)用的組件庫。



02. 原子設(shè)計理論


原子設(shè)計是將界面設(shè)計中最小元素——原子,組合嵌套為分子、組織、模板、頁面的系統(tǒng)規(guī)范化設(shè)計過程。




1.  原子 Atoms

原子Atoms,我們知道是指化學(xué)反應(yīng)不可再分的基本微粒。原子在化學(xué)反應(yīng)中不可分割,但在物理狀態(tài)中可以分割的。原子由原子核和繞核運動的電子組成,所以原子是構(gòu)成物質(zhì)的最小粒子這就不對了。


但在界面設(shè)計中我們所說的原子是構(gòu)成界面的最小顆粒度元素,在設(shè)計中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標(biāo)、分割線等。

2. 分子 Molecules

由原子按照一定的規(guī)律和目的組成的部分為分子,在界面設(shè)計中比如Button按鈕、swittch開關(guān)、非模態(tài)彈窗Toast等,可以理解為比較簡單的小組件。

3. 組織 Organisms

將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯(lián)系人容器卡片、Table列表、Nav-bar、Tab-bar等等。


4. 模板 Templates

將組織與分子、原子進行特定的組合就形成了模板。這一步已經(jīng)能展示界面的主要功能和交互了。一般這一步得到的結(jié)果就是我們?nèi)粘9ぷ髦械脑蛨D,產(chǎn)品的大致形態(tài)也慢慢清晰。所以模板可以理解成未上色的界面。


5. 頁面 Pages

最終輸出的高保真設(shè)計圖即為我們說的表現(xiàn)層的頁面Pages。將模板填充信息和圖片內(nèi)容,就得到了高保真設(shè)計界面。


03. KIT組件庫搭建過程詳解


以最近做的一個NFT項目為例子,展示具體搭建細(xì)節(jié)的全過程。




1.  命名規(guī)范


命名按照:一級分類 / 二級分類 / 三級分類 。例如:一級標(biāo)題樣式/蘋方/常規(guī)/灰階0


其中 “/” 為層級結(jié)構(gòu)分隔符,Sketch會自動識別。組件庫的搭建需要按照層級規(guī)范命名,從最外層到最內(nèi)層,就像一個抽屜,每一層都對應(yīng)放著東西。規(guī)范的命名會使后期調(diào)用維護、團隊協(xié)同變得清晰高效。




2. 樣式


(1)顏色樣式

我們設(shè)計一般都需要定義顏色樣式,一般有主色調(diào)(Main tone)、輔助色(Minor)、漸變色(Gradient)、字體的灰階度(Gray scale)等。選中你需要創(chuàng)建樣式的顏色,點擊「外觀 - 創(chuàng)建」,在輸入框內(nèi)輸入層級規(guī)范命名。



(2)文字樣式

定義文字樣式,文字具有字體、大小、字重、灰階等屬性,選中文字,點擊【外觀-新建】,在輸入框內(nèi)輸入層級規(guī)范命名。




(3)樣式切換

當(dāng)我們需要切換一個定義好的文字樣式時,比如從“閱讀文本樣式”更換為“一級標(biāo)題樣式”,只需要選中文字 - 點擊「當(dāng)前文檔」下定義的文字樣式 - 點擊需要更改的文字樣式即可。




(4)樣式修改 - 解綁與更新

當(dāng)我們需要對定義好的文字樣式進行修改時,比如在設(shè)計的過程中突然感覺"閱讀文本樣式"字體小了點,為了優(yōu)化閱讀體驗需要增大字號。


1. 單個修改 - 解綁

將文字調(diào)整更改為你需要的大小或字重,此時只對單個文本修改,不對其他文本產(chǎn)生影響,點擊解綁,便可與定義好的樣式分離。


2. 整體同步 - 更新

將文字調(diào)整更改為你需要的大小或字重,樣式名稱后會出現(xiàn) "*" 星號,此時代表未保存,且更新按鈕激活,點擊更新按鈕則所有使用該樣式的字段都會更改,整體同步更新。




3. 組件

組件是將元素定義為標(biāo)準(zhǔn)化可復(fù)用的集合體,對組件進行規(guī)范的命名,形成高效設(shè)計的KIT組件庫。


(1)文本組件

選中我們需要定義的文本字段,注意!根據(jù)實際應(yīng)用場景選擇合適的文本對齊方式,否則修改字段信息是會出錯。這里文本選擇左對齊,點擊 「創(chuàng)建控件」- 按照層級規(guī)范命名,選擇從左往右布局 - 點擊 「覆蓋層」即可對文本字段內(nèi)容進行修改。




(2)標(biāo)簽組件


1. 單個標(biāo)簽

當(dāng)設(shè)計完標(biāo)簽后,對標(biāo)簽創(chuàng)建組件。依次選中便簽中的文字“LIMIT”、“2000份”,依次將文本選擇左對齊,步驟同上。將整個標(biāo)簽打組,點擊 「創(chuàng)建控件」- 按照層級規(guī)范命名,選擇從左往右布局(這里注意!從左往右布局表示標(biāo)簽在更改字段信息后,便簽左邊固定不動,從左往右自適應(yīng)) - 在覆蓋層修改文本字段信息,庫存標(biāo)簽組件自適應(yīng)。




2. 標(biāo)簽修改           
         

如果我們覺得這個庫存標(biāo)簽設(shè)計的不滿意,或者還需新增倒計時標(biāo)簽、已售標(biāo)簽,那怎樣又該怎么做的?


第一步:這時我們新建一個Sketch文件,命名為「 *** KIT 組件庫」。選中標(biāo)簽圖標(biāo)復(fù)制,將圖標(biāo)粘貼到新建文件內(nèi),注意!此時需要給圖標(biāo)添加合適的畫板,并按規(guī)范命名。

第二步:將Sketch文件保存到桌面,拖動到「首選項-組件庫」內(nèi)。

第三步:選中組件,回車可進入控件(組件)頁面,可直接調(diào)用定義好的控件,進行修改。





Tips:這里畫板的作用是

(1)畫板是用來規(guī)范固定組件位置和大小的,成套系的KIT Library需要建立畫板。

(2)畫板組件在創(chuàng)建后,調(diào)用時只固定大小和邊界。

(2)如果只是做較少的界面,較少的復(fù)用的樣式,就可以不用做畫板。




3. 多個標(biāo)簽

當(dāng)頁面需要不止一個標(biāo)簽時,就需要新增標(biāo)簽,通常為左右或上下布局。若直接增加一個標(biāo)簽修改字段,文本標(biāo)簽不會自適應(yīng)。 和之前操作一致,將新建的標(biāo)簽新建組件后,可實現(xiàn)標(biāo)簽文本自適應(yīng)。




4. Sketch素材調(diào)用

繼續(xù)添加商品作者組件、價格組件。點擊右邊覆蓋層可修改文本字段。點擊文字右邊小icon可調(diào)用Sketch自帶的數(shù)據(jù)。




(3)容器組件整合

將前面定義好的所有組件整合到容器中,形成可直接復(fù)用的商品信息容器組件。


第一步:調(diào)用定義好的閱讀文本樣式,注意!直接拖過來即可,文本框的長度左右拉到合適的左右間距,這里不需要動文本框的高度,否則會出錯。將底部容器(卡片)的收起到合適的高度


第二步:選中整體打組,創(chuàng)建組件。注意! 此時選擇從上向下布局。


第三步:選中整體,在右側(cè)覆蓋層可對文本進行編輯,輸入文本字段,此時容器高度實現(xiàn)自適應(yīng)。




(4)組件的拆解與重構(gòu)


頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構(gòu)為組織、模板和頁面。




(5)Anima插件


如果上下同時有卡片的情況該怎么呢? 當(dāng)然,我們完全可以將它們一起定義組件,但有沒有其他更便捷,更靈活的方法呢?這里跟大家介紹Anima插件的使用,會使得大家在搭建組件庫時變得更加靈活高效。


Anima插件為一款在線自動響應(yīng)式的插件,其中的STACK與PADDING功能簡直是Sketch設(shè)計必備,簡直逆天。




1. PADDING功能

新建一個文本,當(dāng)點擊PADDING后,會自動生成一個底板,選中底板可對其進行編輯,更改顏色、原角度等。在PADDING輸入框內(nèi)可輸入距離上下左右的邊距。此時注意文本的對其方式,左對齊一般適合標(biāo)簽使用較多,而居中對齊適合一般的居中按鈕,如立即支付、立即報名等。




2. STACK功能

將三個標(biāo)簽分別打組,再全選整體打一個組,點擊STACK,選擇左右排版和居中對齊,輸入你需要的間距。此時Anima插件最牛的STACK功能就是可以雙擊選中任一個標(biāo)簽,拖拽可改變排列順序,松手后還可以自適應(yīng)。




04. 為什么要搭建組件庫?


(1)統(tǒng)一(Unified)


1. 團隊不同成員或新來設(shè)計師之間協(xié)同配合,保證輸出的一致性和穩(wěn)定性。


2. 統(tǒng)一的組件庫樣式,會減輕用戶在頁面流轉(zhuǎn)間的疑惑感和理解成本,使用戶體驗得到了提高。



(2)效率(Efficientcy)


1. 減少相同模塊的重復(fù)設(shè)計。一個產(chǎn)品功能流轉(zhuǎn)、頁面交互必定會涉及到大量的重復(fù)設(shè)計的樣式與組件。試想一下,如果每一個都重新設(shè)計將是一個巨大的時間成本浪費。


2. 如果從產(chǎn)品的全生命周期來看,搭建好設(shè)計中臺KIT組件庫,并與開發(fā)進行溝通,能減少前端開發(fā)樣式,將時間更多的放在功能交互體驗和項目推動上,極大提高了效率。



(3)協(xié)同(Together)


1. 建立完善的設(shè)計規(guī)范和KIT組件庫,提高組件庫優(yōu)化迭代效率。組件庫團隊協(xié)同自動更新。


2. KIT組件庫一鍵修改,也可通過組件分離功能(解綁)單獨對樣式進行修改,工作中需要對設(shè)計反復(fù)調(diào)整打磨,可進行批量一鍵更改,單個模塊的單獨修改。




05. 什么時候搭建組件庫?


什么時候時候搭建組件庫?先定義規(guī)范都是扯淡!所謂實踐才是檢驗真理的唯一標(biāo)準(zhǔn),“在設(shè)計開始之前就制定設(shè)計規(guī)范,是不切實際的做法,你會發(fā)現(xiàn)做好的規(guī)范在實際操作中是無用且白費精力的”摘自《破繭成蝶 用戶體驗設(shè)計師的成長之路》。所以組件庫中的組件必定是經(jīng)過反復(fù)修改后適合產(chǎn)品以及可后期可復(fù)用的。


















并不是所有的設(shè)計都需要做設(shè)計規(guī)范或者KIT組件庫。組件庫的搭建本身就是一個耗費時間人力的事情,如果是一次性項目那根本就沒有必要做組件庫了。是否需要創(chuàng)建樣式或組件取決于該樣式或組件在后續(xù)的工作中是否會被復(fù)用或復(fù)用的頻次。也會減少前端工程師重復(fù)開發(fā)CSS樣式以及后臺數(shù)據(jù)的封裝成本。



06. 團隊協(xié)同


將組件都定義在新建的Sketch文件中,將文件發(fā)給你的團隊其他成員。步驟同上。


第一步:新建一個Sketch文件,命名為「 *** KIT組件庫」,將組件都創(chuàng)建在新建文件內(nèi)。

第二步:將Sketch文件發(fā)送給團隊其他成員,拖動到Sketch「首選項-組件庫」內(nèi)。

第三步:直接調(diào)用定義好的組件。


共享組件庫個人使用 Sketch Cloud,但組件庫有更新Sketch右上角會有提示,及時溝通更新即可。



藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:JI_Design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


情感化設(shè)計心理學(xué):用戶心理定律及優(yōu)秀案例分析

ui設(shè)計分享達人

將普遍存在的人性用戶心理規(guī)律運用于設(shè)計,增加設(shè)計的溫度。

近來對用戶心理比較感興趣,去看相關(guān)設(shè)計資料的時候發(fā)現(xiàn)相關(guān)內(nèi)容重復(fù)性較高,多方搜集資料結(jié)合自己的一些分析總結(jié)出一篇補充。

定律是鑰匙,在遇到讓我們上癮,持續(xù)付出或獲得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能為我們的后續(xù)的設(shè)計吸收。










undefined

undefined

undefined

undefined

undefined

最后想說,設(shè)計師的價值不僅僅在視覺,好的設(shè)計必是好用好看好懂用戶的??珙I(lǐng)域?qū)W習(xí)補充自己的視野,多思多想,掌握鑰匙,開啟用戶不同的心門。

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:唐小蔥

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

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

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


案例分享 PM/UX 必看 [用戶體驗]

ui設(shè)計分享達人


 

講User Research | 用戶研究 之前,有必要先介紹下“用戶體驗”。這兩者是密切關(guān)聯(lián)的。

 


作為一枚互聯(lián)網(wǎng)老兵,先說一下歷史吧。

 

N年前,UX Designer還不怎么流行。

 

隨著喬幫主iphone4的橫空出世,驚為天人,徹底改變了整個手機生態(tài)。于是在中國市場,各種熱錢涌入,到處都是創(chuàng)業(yè)公司(start-up),各類APP紛紛孵出(我在上海)。這是整個移動互聯(lián)網(wǎng)行業(yè)野蠻生長的年代。公司那么多了,那么UI,iOS開發(fā),Android 開發(fā)等等都是供不應(yīng)求的。

 

 

當(dāng)然,那么多創(chuàng)業(yè)公司,90%都會在一年內(nèi),在天使輪的階段死掉。能活下來的,都是壯士!現(xiàn)在你看看你手機上裝的啥耳熟能詳?shù)腁PP,基本也就是那些了。

 

題外話:我當(dāng)時的公司樓上是一家知名網(wǎng)游公司。某天我很快樂(KU B)的去上班(Make Money),結(jié)果就看到新聞?wù)f那家創(chuàng)始人CEO昨天半夜心臟病發(fā),人沒了。隔天就看到他家公司門口貼訃告了。(此處默哀!)創(chuàng)業(yè)不易,真心能活下來的都是壯士!

 

野蠻生長的年代,對于崗位要求不會那么精細(xì)。做UI的,最好你什么都會,十項全能。平面/手繪/App UI/ Web UI/H5/交互/動效/前端最好也懂一些/其他。。。


那時候少有交互崗,因為交互崗?fù)ǔ划a(chǎn)品崗,或者UI崗兼了。但隨著這些年WEB/APP越來越成熟,用戶對于體驗的要求越來越高。另外,隨著各類海歸人才帶回來的國外先進設(shè)計理念。各路大中小廠對于UX交互也就越來越重視。

 

于是,就有了UX Design | 交互設(shè)計的專門崗位,有些也叫User Experience Design | 用戶體驗設(shè)計,在互聯(lián)網(wǎng)行業(yè),兩者基本一個意思。

(我們這里不討論用戶體驗的五個層次,戰(zhàn)略層、結(jié)構(gòu)層、表現(xiàn)層之類的。這些太理論,大概知道就行了,多說我也困。真要硬掰,那交互設(shè)計實際算是用戶體驗中的結(jié)構(gòu)層。但在國外專業(yè)文獻中,UX Design=User Experience Design。不要硬剛。 :P)

 

人類總是情緒化的,總是對他們世界里的產(chǎn)品做出情緒化的反應(yīng)

-艾倫·庫珀,Cooper公司總裁,Visual Basic之父

 

 

一.什么是 User Experience | 用戶體驗?


通常來說,“用戶體驗”就是人們在使用產(chǎn)品時候的感受。用戶體驗并不僅限于互聯(lián)網(wǎng)行業(yè),各行各業(yè)都有。


用戶體驗更關(guān)注的是人和物的交互(Human-Objects Interaction)之間的聯(lián)系。


“物”在互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用可以是Web,APP,System等。

 

舉個生活中的例子,迪斯尼。

迪斯尼,娛樂行業(yè)吧?但它更是一家徹徹底底的體驗公司,極其注重體驗管理。


迪斯尼樂園為小朋友們,大朋友們筑造了一個夢。迪斯尼的體驗管理,就是從造夢這個目的出發(fā)的。


對于服務(wù)人員、演職人員的要求,干凈、禮貌都是最基本的。


迪斯尼對演員的要求是,你不是演米老鼠,你就是米老鼠。用戶體驗細(xì)致到如下:

只要有賓客在,演員就不能把頭套摘下。之前有新聞?wù)f演員中暑了,也堅持不取下頭套。(這里我們不討論勞工權(quán)益之類的問題)因為不能毀滅孩子們的夢。

在同一個視野里,不能有兩個同樣的米老鼠。因為對于孩子來說,米老鼠只有一個!

全世界演米老鼠的演員,都要苦練簽名。因為對于孩子來說,全世界只有一個米老鼠,簽名當(dāng)然是一摸一樣的。


這只是演員,還有其他工作人員,還有工作以外的服務(wù)。此處不再延申討論了。


 

二.什么是 User Experience Design | 用戶體驗設(shè)計(即UX Design | 交互設(shè)計)?


用戶體驗設(shè)計,顧名思義,就是為產(chǎn)品/服務(wù)設(shè)計一個良好的體驗。用戶體驗設(shè)計同樣并不僅限于互聯(lián)網(wǎng)行業(yè),各行各業(yè)都有。

 

舉個生活中的例子,麥當(dāng)勞的打包袋設(shè)計。


傳統(tǒng)設(shè)計是這樣的。

漢堡薯條什么的全部裝紙袋,沒有提手,每次都捏到我手指抽筋。飲料再另外裝個塑料袋。

一個捏,一個提。其實是不舒服也不方便的。

 

用戶體驗好的設(shè)計可以是這樣的。方便快捷,節(jié)約資源,解放手指。

(gif動圖,刷新頁面重播)

 

我們這里想說的用戶體驗設(shè)計,特指互聯(lián)網(wǎng)行業(yè)。


早期的Web頁,幾乎就是個靜態(tài)網(wǎng)頁,就提供些信息展示。那時候用的還是asp, php, .net技術(shù),快捷點的話有個模板套套,新聞/產(chǎn)品就能后臺維護了。


從大概2010年以后,Web就開始越來越復(fù)雜了,APP也開始越來越精細(xì)和規(guī)范了。這對于交互的要求就越來越高,需要有一個良好的用戶體驗設(shè)計。

 

舉個APP的例子。

淘寶最近對“確認(rèn)收貨方式”做了優(yōu)化(大致在2021.9),不知道你發(fā)現(xiàn)了嗎?


淘寶購物時,首先,在買東西付款的時候,就需要輸入第1次支付密碼。


最后,在收貨確認(rèn)時,

Before: 原來,還需要再輸入第2次支付密碼。

Now: 現(xiàn)在,只需要點擊“確認(rèn)”就行了,不需要再輸入一次支付密碼了。此次優(yōu)化,就是簡化用戶的操作,提升用戶體驗。

 

如下圖為最新優(yōu)化后的截圖:


 

如圖,

Before: 原來,在Step 3中,原來還需要再輸入第2次密碼。

Now:現(xiàn)在,在Setp3中,直接從Setp3——>Setp4.


三.為什么UX Design | 交互設(shè)計很重要呢?

 

產(chǎn)品成功與否,涉及到太多方面了。戰(zhàn)略決策、產(chǎn)品、內(nèi)容、用戶體驗、技術(shù)、運營、服務(wù)、競品情況,資金投入、運氣等等,缺一不可。而用戶體驗/交互是其中重要的一環(huán)。


專注于用戶的交互設(shè)計,大大增加了項目成功的機會。因為產(chǎn)品是給人用的,尤其是互聯(lián)網(wǎng)產(chǎn)品,用戶不會因為產(chǎn)品是知名品牌,就堅定不移的支持它,買它,用它。


要是產(chǎn)品不好用,那放棄它,也是遲早的事情了。


畢竟,能讓大家都喜愛的,還不管怎么樣都愛到死的,也只有RMB人民幣了。

 

 

四.什么是 UX Designer | 交互設(shè)計師?


 

交互設(shè)計師,需要通過調(diào)查和分析等用戶研究方法來設(shè)計產(chǎn)品,或者對產(chǎn)品做優(yōu)化改進,以保證用戶能有一個良好的用戶體驗。


 

五.UX 和UI的區(qū)別?


UI,純粹的UI,通俗來說,就是負(fù)責(zé)好看。把產(chǎn)品做好看了,做精致了,讓用戶看得賞心悅目,心情舒暢。這是美學(xué)意義上的工作。

 

UX,通俗來說,就是負(fù)責(zé)好用。讓整個產(chǎn)品流程簡單又便利,用戶使用產(chǎn)品不會有停頓和疑問,讓用戶使用產(chǎn)品的感受非常好。最終目的是為了增加用戶的粘性,提高產(chǎn)品的流量,促進產(chǎn)品的轉(zhuǎn)化率,為公司帶來直接或間接的收益增長。

 

UX是產(chǎn)品中的重要一環(huán)。

 

當(dāng)然,在實際工作中,如果產(chǎn)品——長得好看+體驗好。那就是王者~

這也應(yīng)該是做產(chǎn)品的要求和標(biāo)準(zhǔn),也應(yīng)該是設(shè)計師對自己的要求和標(biāo)準(zhǔn)。

 

 

舉個兩者結(jié)合的例子,摩拜單車。

(雖然他欠用戶押金,雖然他已經(jīng)沒了,成為了美團單車。但是他的故事還是可以講一講的)

 

設(shè)計方面,

摩拜單車的聯(lián)合創(chuàng)始人王曉峰(負(fù)責(zé)具體的研發(fā)、運營及市場工作)回憶當(dāng)年做摩拜單車的時候,首先考慮的是產(chǎn)品和服務(wù)要讓消費者有面子。


前期他做了很多市場調(diào)研(看,用戶研究),當(dāng)年在校園外騎車的只有三種:除了專業(yè)騎賽車的,就是藍領(lǐng)工人和老年人。


想讓白領(lǐng)階層都愿意騎自行車,就必須要讓他們覺得有面子。如果讓一個白領(lǐng),騎著五花八門,甚至還叮當(dāng)帶響的自行車上路,那是很沒面子的,這種生意一定會失敗。


于是,摩拜就設(shè)計出一輛金屬感十足的橙色自行車,好看又酷炫。

 

用戶體驗方面,

摩拜單車能夠提供給用戶的體驗一直有著不錯的口碑,比如車身結(jié)實、開鎖方便、損壞率低。但是,在夸贊的后面,用戶們往往會補刀:「好是好,就是太重了?!梗ǖ谝淮亓繛?5公斤,是普通自行車重量的2倍。)


于是,為了改善用戶體驗(看,基于用戶反饋。又是用戶研究。),第二代摩拜單車在確保安全和耐用的前提下對每個零件減重,整車僅重 15.5kg。比于第一代單車「減重」了約 10 公斤。


這還僅僅是車身重量,其他各方面,輪胎,鎖,鏈條,車座等等,全部做了優(yōu)化改進。此處不再延申討論。

 

 


回到做WEB或者APP的設(shè)計上。


中國的互聯(lián)網(wǎng)行業(yè)并不羞于抄襲對手,現(xiàn)在產(chǎn)品同質(zhì)化這么嚴(yán)重,靠單純的產(chǎn)品創(chuàng)意早已經(jīng)無法取勝了。


現(xiàn)在產(chǎn)品更多的核心優(yōu)勢是ABC——人工智能(AI)、大數(shù)據(jù)(BIG DATA)和云計算(CLOUD)。我們頂尖的算法工程師們(Data Scientist)好不容易對數(shù)據(jù)做了識別、分析和精準(zhǔn)有效的輸出。


結(jié)果在交互這一環(huán)沒做好,用戶找不到,看不懂,不會用這些產(chǎn)品/內(nèi)容。你做設(shè)計的良心會不會痛?


 

六.用戶體驗設(shè)計就是需要“以用戶為中心”(user-centered)而設(shè)計


不要拍腦袋決定,不要自己YY。

不然只能設(shè)計出一個你自己想要的,或者是你老板想要的產(chǎn)品。

 

舉個反面案例:生活中的例子,廁所標(biāo)識。

 

用戶體驗—— 正常

這張圖,好理解吧,廁所標(biāo)志。就算右邊那個清朝的個性了點,那也是設(shè)計得不錯,能看懂。


 

用戶體驗—— 差

這張圖,額。雞?讓我想想,哪個是公雞,哪個是母雞?只要我努力辨認(rèn),我還是有機會成功上廁所的。


 

用戶體驗—— 極品差

這就是設(shè)計師自己YY的結(jié)果。


這張圖,這都是什么玩意兒?大象?長頸鹿?什么意思?設(shè)計師,你給我出來,你信不信我打不死你?


這樣的廁所標(biāo)志,我猜都猜不出來,我只能跑到廁所門口張望,當(dāng)個女流氓,看看廁所里的坑位是什么樣的,我才有指望上廁所。

 

好了,那位設(shè)計師現(xiàn)身說法了,他的靈感源于動物習(xí)慣,大家弄不清楚的原因是他們不了解動物的具體習(xí)性。


長頸鹿在噓噓時會張開雙腿,這標(biāo)志著女廁所,而大象則用象鼻噴水,這標(biāo)志著男廁所。他的靈感在大部分人看來太牽強,因為一般人對于這些動物習(xí)慣一無所知,用大象和長頸鹿來分辨廁所之間的區(qū)別是不是很無語?


這設(shè)計師就光顧自己玩創(chuàng)意了,自己YY。廁所是為了給大家?guī)矸奖愕?,好的設(shè)計創(chuàng)意是一回事,但最大的問題也是要方便眾人使用的。

 



舉個正面案例:APP的例子, AR(增強現(xiàn)實)。


現(xiàn)在AR技術(shù)已經(jīng)相對成熟了,導(dǎo)航,家居,翻譯,試妝,試鞋,地球儀都有AR。

 

拿AR試鞋舉例子。

Before: N年前,AR試鞋還是把鞋子投到地面上,看個大致效果。(左側(cè)Before截圖大概是我3年前截的)

Now: 現(xiàn)在,AR技術(shù)做強了,AR試鞋就直接投到腳上,能夠看到鞋子上腳的效果。對用戶而言,體驗更好。對商家而言,轉(zhuǎn)化率會更高。

 

好了,用戶體驗就講到這了,是不是很輕松,看看故事就有些體會了?


 

最后,

今年是喬幫主逝世10周年,緬懷下!原來,他已經(jīng)離開這么久了。

 

I skate to where the puck is going to be, not where it has been. 

- Wayne Douglas Gretzky

這句話簡單來說,就是預(yù)判形勢,提前準(zhǔn)備。

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:Lu傾傾
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



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

ui設(shè)計分享達人

背景

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


undefined


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


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


undefined


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

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

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


undefined


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


undefined


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


undefined



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

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


undefined


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

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

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

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


競品分析|尋找實踐證據(jù),謹(jǐn)慎驗證

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


undefined


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

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


undefined


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


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


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


文字陷阱:中英文字高不等于字號


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


undefined


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


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

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

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

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


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


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


undefined


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


undefined



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

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


undefined


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


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


undefined


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


視覺層|高密度-克制的留白

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


undefined


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


undefined



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

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


undefined


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


undefined



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

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


undefined


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


undefined


結(jié)語

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

文章來源:站酷  作者:An t_design
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



從體驗層面出發(fā),分析App搜索框設(shè)計的要點

ui設(shè)計分享達人

搜索動作在App中依靠搜索框來完成,好用的搜索框很大程度上決定了產(chǎn)品的搜索體驗如何。大多數(shù)搜索框存在相似性,但真正好的搜索框會在細(xì)節(jié)上為用戶帶來差異化的反饋,帶來很暖很貼心的感覺。


1、搜索框結(jié)構(gòu)分析 

從體驗層面上看,一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為:

使用前-找到搜索框入口;使用中-點擊輸入內(nèi)容;使用后-展示搜索結(jié)果。

其中使用中會涉及到跳轉(zhuǎn)和輸入兩種不同的狀態(tài),在下面的文章里我會展開來分析。


2、搜索框的常見類型 

回想常用App的搜索框,好像它們的樣式看起來差別并不是很大,但其實每個搜索框的細(xì)節(jié)都是經(jīng)過精心設(shè)計的,下面總結(jié)了幾種常見的搜索框類型。

搜索圖標(biāo)

頁面上只提供一個放大鏡圖標(biāo),通常需要用戶點擊圖標(biāo)后才能跳轉(zhuǎn)到搜索頁面,例如小紅書就將搜索圖標(biāo)放置在頁面右上角。

基本搜索框

基本的搜索框組成包括放大鏡圖標(biāo)、文字提示、輸入框三部分。微信主頁的搜索框采用了這種基本形式,文字提示為搜索,簡潔清晰。

文字提示類搜索框

和基本搜索框的唯一不同的地方在于,這類搜索框中的文字提示部分不再是搜索兩個字,而是根據(jù)產(chǎn)品需求支持預(yù)置多組文字提示并在搜索框內(nèi)循環(huán)展示

▲ 在大眾點評的頂部搜索框中,文字提示部分循環(huán)展示了三組不同的內(nèi)容,引導(dǎo)用戶快速檢索到好吃和好玩的。

功能類搜索框

之所以叫做功能類搜索框,是在文字提示類搜索框的基礎(chǔ)上根據(jù)產(chǎn)品功能的需要額外添加了常用的功能性圖標(biāo),如掃碼圖標(biāo)、拍照圖標(biāo)、語音圖標(biāo)等,賦予搜索框更多的功能屬性。

▲ 經(jīng)常使用豆瓣看書評的同學(xué)可能會注意到豆瓣主頁的搜索框中有一個掃碼圖標(biāo),點擊之后可以快速掃描圖書條碼或二維碼,快速識別書的內(nèi)容,省去檢索的麻煩。

▲ 淘寶搜索框的組成更復(fù)雜,除了支持掃碼外還有相機圖標(biāo),方便用戶拍照識別商品。 


3、搜索框設(shè)計狀態(tài)分析 

使用搜索框搜索的過程總體可以分為四部分:搜索前、點擊搜索框、輸入中、搜索后。設(shè)計分析過程中我們要先理清整體的搜索流程,再考慮每個狀態(tài)對應(yīng)的交互細(xì)節(jié)及反饋,這樣才能保持邏輯清晰。

搜索前-默認(rèn)狀態(tài)

位置

大多數(shù)搜索框出現(xiàn)在頁面頂部,作為一個大的觸摸目標(biāo)更符合用戶的認(rèn)知習(xí)慣,更容易被用戶發(fā)現(xiàn)和使用。

▲ 在蘋果自帶的地圖應(yīng)用中,搜索框放在頁面中部偏下的位置,相比于頂部搜索框,這樣的位置分布更方便用戶單手操作。

樣式

搜索前的狀態(tài)除了前面講的幾種常見的搜索框樣式外,有些產(chǎn)品會直接在搜索框增加“搜索”按鈕。

▲ 阿里系產(chǎn)品包括淘寶、支付寶、閑魚等主頁搜索框都額外添加了“搜索”按鈕,相比于點擊搜索框再點擊鍵盤搜索內(nèi)容推薦,直接點擊按鈕簡化了搜索流程。

點擊后-獲取焦點

搜索框

點擊搜索框后,框內(nèi)的放大鏡圖標(biāo)會消失,出現(xiàn)閃爍的光標(biāo)引導(dǎo)用戶輸入,搜索框右側(cè)會出現(xiàn)“取消”按鈕。

▲ 點擊大眾點評的搜索框后,搜索頁會出現(xiàn)三個選項,點擊每一個選項,搜索框內(nèi)的文字提示都會改變,有效幫助用戶提升搜索準(zhǔn)確度,雖然是很小的點但做的很用心。

鍵盤

點擊搜索框后會彈起鍵盤,在不輸入內(nèi)容的情況下,點擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內(nèi)容。

搜索頁

搜索頁的內(nèi)容通常包括歷史搜索、搜索發(fā)現(xiàn)、熱門推薦等版塊,記錄用戶的搜索行為,推薦目標(biāo)商品或服務(wù),提高轉(zhuǎn)化率。

▲ 豆瓣將最熱門的內(nèi)容都展現(xiàn)在搜索頁中,包括實時更新的熱門書影音榜單、熱門小組、熱門話題等,為用戶提供有效的引導(dǎo)。

關(guān)于歷史搜索我們還可以繼續(xù)深入分析,思考這些記錄怎么排序、最多顯示幾條記錄……

▲ 網(wǎng)易云音樂的歷史搜索最多可以保留10條,采用橫向滑動的手勢交互可以節(jié)省屏幕空間。根據(jù)內(nèi)容長短一屏一次可以顯示2-3條記錄,這會導(dǎo)致排在后面的歷史記錄不容易被用戶快速發(fā)現(xiàn)。

▲ 淘寶的歷史搜索可以容納更多的數(shù)量,當(dāng)搜索記錄超過兩行時會有一個小的展開按鈕,點擊按鈕可以查看早期的記錄,這樣既能節(jié)省屏幕空間也能最大化容納歷史記錄。

搜索中-輸入內(nèi)容

刪除/取消

當(dāng)開始輸入內(nèi)容時,在搜索框的右側(cè)會出現(xiàn)刪除圖標(biāo),方便用戶一鍵刪除輸入的內(nèi)容,這里要注意區(qū)分刪除和取消的區(qū)別。

▲ 在淘寶中點擊“刪除”圖標(biāo),頁面會返回到上一級也就是搜索頁;

▲ 點擊“取消”按鈕,頁面會直接返回到主頁也就是搜索前的狀態(tài)。

搜索提示

在用戶輸入內(nèi)容時,產(chǎn)品會根據(jù)用戶輸入的內(nèi)容提供相對應(yīng)的搜索推薦,這是搜索框的必備的交互反饋。

通過合理的詞條推薦能極大降低用戶的思考時間,提高搜索效率,同時省去再次點擊搜索按鈕的流程,降低用戶的操作步驟。

字?jǐn)?shù)限制

目前我所知道的大多數(shù)App在搜索時都沒有字?jǐn)?shù)限制問題。

回顧一下搜索使用場景會發(fā)現(xiàn)用戶在搜索框內(nèi)輸入任何內(nèi)容都是有可能的,盡量不要約束用戶的輸入內(nèi)容。無論用戶輸入多少內(nèi)容,點擊都可以完成基本的搜索操作,這樣整個流程才完整。

▲ 在百度中輸入過多字符時,會提示查詢限制在38個漢字以內(nèi),多的字符會被忽略,雖然給出了提示但并未打斷用戶的操作流程,可以讓用戶繼續(xù)完成搜索。

搜索后-展示結(jié)果

符合預(yù)期

搜索的理想狀態(tài)是搜索到的結(jié)果符合用戶的預(yù)期,滿足用戶的搜索需求,并把最吻合的搜索結(jié)果排在前面,為用戶帶來清晰的結(jié)果展示。

智能提示

智能提示是對用戶輸入內(nèi)容上的一種提示或糾正,如果用戶輸入的內(nèi)容有問題或不夠標(biāo)準(zhǔn),在搜索結(jié)果中會能給最貼切的搜索結(jié)果。

▲ 在淘寶中輸入“shouji”或“souji”,淘寶會根據(jù)拼音給出“手機”的搜索結(jié)果,但仍保留原標(biāo)簽,方便用戶再次點擊搜索;輸入“手ji”時,會直接給出“手機”標(biāo)簽,這種差異化的反饋能更好的為用戶服務(wù)。

無結(jié)果提示

如果沒有搜索到用戶輸入的內(nèi)容,搜索頁會顯示一個空狀態(tài),提示用戶沒有搜索結(jié)果。關(guān)于空狀態(tài)如何設(shè)計可以看我之前寫的一篇文章——如何做好「空狀態(tài)」設(shè)計?來看資深設(shè)計師的總結(jié)!詳細(xì)分析了空狀態(tài)的設(shè)計方法。

▲ 相比于直接顯示搜索無結(jié)果的狀態(tài),拼多多的搜索結(jié)果首先會標(biāo)明相關(guān)商品較少,然后將搜索內(nèi)容拆分成不同的標(biāo)簽進一步引導(dǎo)用戶來發(fā)現(xiàn)內(nèi)容。

文章來源:站酷  作者:Clippp
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

掌握這20條用戶體驗設(shè)計原則,助力設(shè)計成長!

ui設(shè)計分享達人

文章整理了20條用戶體驗設(shè)計原則,希望通過這份簡潔易懂的合集能夠讓你對用戶體驗領(lǐng)域有一個初步的概覽和了解。

1.以用戶為中心 

這是最常被提及的用戶體驗設(shè)計基礎(chǔ),當(dāng)涉及到產(chǎn)品設(shè)計決策時,提醒我們要學(xué)會使用同理心,而不是僅憑個人的想法或意見。

真正好的用戶體驗設(shè)計是為用戶量身打造的,用戶的意見、痛點、愿望、偏好和需求對產(chǎn)品來說至關(guān)重要,所以在項目初始階段需要投入大量的時間和精力去了解用戶。

用戶體驗研究重點是了解用戶,為接下來的產(chǎn)品設(shè)計做準(zhǔn)備。以用戶為中心的設(shè)計理念是設(shè)計師迎合用戶的需求,區(qū)分了設(shè)計任何人都可以使用的產(chǎn)品和為目標(biāo)用戶設(shè)計的產(chǎn)品。


一款特定的產(chǎn)品需要面對不同的目標(biāo)群體,前期研究中需要了解目標(biāo)人群需要什么并在產(chǎn)品中反映出來,這是針對性很強的設(shè)計研究。 


2.了解信息架構(gòu)

可能很多人對信息架構(gòu)的定義很模糊,這里舉個例子來具象說明一下信息架構(gòu)的含義。

例如在一款產(chǎn)品中,如果把所有內(nèi)容都堆到一個列表或頁面中,可能我們將無法使用這款產(chǎn)品,所以我們看到大多數(shù)的App和網(wǎng)站都包含很多的導(dǎo)航和頁面結(jié)構(gòu),按照內(nèi)容重要程度有序地來組織內(nèi)容。

信息體系結(jié)構(gòu)的最終目標(biāo)是幫助用戶理解他們在看什么,并幫助他們找到需要尋找的內(nèi)容。

信息架構(gòu)在制作線框圖或原型之前完成,因為它是產(chǎn)品的基礎(chǔ),有助于設(shè)計師考慮什么功能是最重要的,哪些是用戶最需要的以及哪些次要內(nèi)容可以隱藏起來等。

這種結(jié)構(gòu)與產(chǎn)品的導(dǎo)航設(shè)計密切相關(guān),有助于將用戶引導(dǎo)到正確的位置。導(dǎo)航和信息架構(gòu)都試圖讓用戶以最少的認(rèn)知努力來完成操作。


信息架構(gòu)的設(shè)計不當(dāng)會造成重大故障甚至可能危及整個產(chǎn)品。如果用戶在使用產(chǎn)品時找不到任何想要的內(nèi)容,點擊任何元素都沒有反應(yīng),會給用戶帶來很糟糕的使用體驗。 


3.考慮使用場景

沒有場景,任何設(shè)計都很難生效。設(shè)計師在項目開始時會投入時間去了解用戶面臨的問題以及圍繞這些問題的背景。


這條原則有助于設(shè)計師考慮還有哪些因素會影響用戶和產(chǎn)品,很多產(chǎn)品設(shè)計會為用戶提供一些有助于消除使用摩擦的操作提示。 
例如在設(shè)計表單時,會盡可能的添加 輸入提示,最大程度地減少用戶出錯的機會。 


4.了解一致性及其重要性

保持一致性是用戶體驗設(shè)計的關(guān)鍵原則。擁有一致設(shè)計的產(chǎn)品可以更快地被新用戶接受,因為用戶不需要再次學(xué)習(xí)如何操作,他們會回憶起之前的操作習(xí)慣并將其作為指導(dǎo),這也解釋了為什么同類型的產(chǎn)品例如電商類App頁面設(shè)計的很相似。

保持一致意味著在需要時可以重復(fù)使用某些UI組件,并在整個產(chǎn)品中保持一致的行為。例如當(dāng)點擊或懸停在按鈕上面時,所以按鈕的狀態(tài)應(yīng)該是一致的。


從邏輯上講,產(chǎn)品越大,這種一致性會變得越來越有挑戰(zhàn)性,這促使許多設(shè)計團隊創(chuàng)建自己的設(shè)計系統(tǒng)。一款產(chǎn)品的學(xué)習(xí)曲線越長越陡,放棄的用戶就會越多,在市場營銷中,這通常被稱為銷售漏斗中的漏洞。 


5.給予用戶適當(dāng)?shù)目刂茩?quán)

這條原則意味著用戶希望能控制產(chǎn)品,無論是完成任務(wù)還是定制滿足他們需求的內(nèi)容。

在設(shè)計過程中一直試圖給用戶盡可能多的控制權(quán),例如允許用戶撤消操作、更改設(shè)置、自定義UI外觀、創(chuàng)建快捷方式等中。


需要注意的是,當(dāng)提供太多選項或用戶太依賴于自己的選擇時,用戶可能會不知所措,造成所謂的 選擇悖論。所以在設(shè)計時要了解用戶樂于掌控的余地,不能讓用戶感到使用壓力。 


6.把可用性放在首位

在整體上看,建立高標(biāo)準(zhǔn)的可用性是為用戶做的最好的事情,有助于檢查用戶是否能夠輕松地完成任務(wù)、產(chǎn)品是否正常運行以及是否完成工作。


可用性的重要之處在于要理解可用性的靈活性和重要性。 


7.了解用戶測試

結(jié)合可用性的概念,我們還要進行用戶測試,這是設(shè)計師對工作進行測試的方式,對新的產(chǎn)品來說至關(guān)重要。

當(dāng)設(shè)計思想和理念被轉(zhuǎn)化為有形的原型時,設(shè)計師要觀察真實的用戶是如何與之交互的,可以通過許多不同的方式例如簡單的A/B測試到全面的審核測試等來實現(xiàn)。


測試通常分幾輪進行,團隊在向原型添加更多細(xì)節(jié)之前驗證每個步驟。隨著測試結(jié)果的出現(xiàn),設(shè)計也隨之發(fā)生了變化。 
如果發(fā)生更改,將會進行新一輪的測試,通過這個過程,設(shè)計團隊可以改進他們的工作,直到達到可用性標(biāo)準(zhǔn)。 


8.少即是多

在創(chuàng)造力和創(chuàng)造獨特事物的渴望中,很多設(shè)計師很容易無意中弄亂產(chǎn)品界面甚至產(chǎn)品本身。

功能過多的產(chǎn)品可能會失去焦點并削弱吸引力。具有太多元素的頁面會變得充滿視覺沖擊,但也會給用戶帶來負(fù)面體驗,在設(shè)計時要學(xué)會克制并優(yōu)先考慮真正關(guān)鍵的部分很重要。


另外手機端的屏幕空間非常小,創(chuàng)建一個有效的布局,想出巧妙的方法來隱藏次要元素并創(chuàng)建一個令人愉悅的界面需要付出很大的努力和創(chuàng)造力。 


9.視覺層次

視覺層次是向用戶傳達產(chǎn)品中元素重要性的方式。良好的層次結(jié)構(gòu)有助于用戶視線在界面上移動,并立即了解最重要的內(nèi)容以及這些內(nèi)容與其他部分的關(guān)系。

視覺層次結(jié)構(gòu)與布局設(shè)計緊密相連,幫助用戶消化所接觸到的信息。


創(chuàng)建層次結(jié)構(gòu)從概念的草圖開始,一直持續(xù)到完成設(shè)計。例如發(fā)送按鈕通常會用綠色而是不紅色,而次要按鈕會顯示為灰色或與背景混合,并顯示“撤消”或“返回”。 


10.了解用戶的心智模型

為用戶創(chuàng)建心智模型是嘗試使用同理心的一種方式,是幫助設(shè)計師從用戶的角度看待問題的工具。

正確使用意味著用戶無需投入精力就可以使用的直觀產(chǎn)品,而錯誤的思維模型會導(dǎo)致一些問題,例如界面混亂、高昂的交互成本。


為了匹配用戶的心智模型,可以采用多種不同類型的研究方法,常見的方法包括 卡片分類、決策樹、對用戶行為的密切觀察,或者使用大量的數(shù)據(jù)來建立關(guān)鍵用戶的心理模型。 


11.設(shè)計中的講故事

講故事的方式更加直觀,利用圖像、視頻、動畫和文本等元素讓整個頁面與用戶對話。用戶體驗設(shè)計中的視覺敘事是為了喚起用戶的情感,給用戶留下持久的印象。


想出一種可視化的方式來傳達復(fù)雜的內(nèi)容具有挑戰(zhàn)性,但同時也是有益的,可以更好地接近用戶并將其作為提高產(chǎn)品可學(xué)習(xí)性的方法。 


12.不要直接跳到高保真原型上

高保真原型是設(shè)計項目的最終目標(biāo),但是直接使用原型軟件不斷添加各種頁面細(xì)節(jié)是錯誤的操作。


避免直接出高保真的主要原因是因為這樣做的成本會更高。在沒有任何用戶研究和測試的情況下,一款產(chǎn)品無論具有多少的細(xì)節(jié)都有可能面臨不符合用戶使用的情況。 


13.可訪問性測試很重要

不僅要檢查關(guān)鍵用戶是否可以流暢地使用產(chǎn)品,還應(yīng)該檢查其他所有用戶例如少數(shù)群體等是否都能夠正常使用產(chǎn)品。


事實上,殘疾人和其他用戶一樣需要數(shù)字產(chǎn)品,但很多產(chǎn)品在設(shè)計時并沒有考慮到這些群體,但這也提供了一個機會,為所有用戶提供一個可以依賴的好產(chǎn)品。 


14.熟悉并在用戶體驗設(shè)計中使用

我們知道為用戶提供一致的設(shè)計有助于克服學(xué)習(xí)曲線,同時為用戶提供熟悉的東西也有助于縮短學(xué)習(xí)曲線。

例如,大多數(shù)用戶都會立即識別某些UI組件(漢堡菜單/單選按鈕),這意味著他們會本能地知道這些組件代表什么意思或者如何操作。

使用用戶已經(jīng)熟悉的東西并不一定會讓產(chǎn)品的獨特性消失,有經(jīng)驗的設(shè)計師會利用這種熟悉性來來創(chuàng)造一些獨特的設(shè)計,同時也是直觀的,不需要太多努力就可以使用。


設(shè)計一個完全不依賴熟悉度的產(chǎn)品可能是具有風(fēng)險的行為,因為它很容易讓那些不熟悉產(chǎn)品的用戶超負(fù)荷,形成巨大的學(xué)習(xí)曲線,增加用戶負(fù)擔(dān)。 


15.了解交付成果的力量

可交付成果是可以在整個團隊中交付的內(nèi)容,包括用戶畫像、心智模型、用戶旅程以及線框圖和原型等,是一種有形和具體的表現(xiàn)。

可交付成果是用戶體驗設(shè)計原則,可以幫助設(shè)計團隊和其他利益相關(guān)者理解和交流概念。

▲ 用戶畫像可以捕捉理想用戶,并提供可以相關(guān)聯(lián)的真實面孔,是一種指導(dǎo)設(shè)計的工具。用戶旅程圖幫助設(shè)計師了解用戶完成任務(wù)需要的具體步驟,有助于確保這些步驟確實可以輕松執(zhí)行,并且整個過程很流暢。


這些交付成果服務(wù)于關(guān)鍵功能,設(shè)計師需要在整個項目中都依賴它們,不斷轉(zhuǎn)換為用戶可以與之交互的真實有形的設(shè)計。 


16.專業(yè)的原型設(shè)計工具

用戶體驗設(shè)計的過程不是線性的,而是一個循環(huán)。無論創(chuàng)建什么樣的產(chǎn)品,都需要專業(yè)的原型工具,將基本框架放在一起,然后添加可能需要的所有細(xì)節(jié)。


從邏輯上講,設(shè)計團隊的具體需求會因團隊而異,但一些關(guān)鍵功能例如團隊協(xié)作、需求管理、交互設(shè)計和開發(fā)移交等,對于大多數(shù)團隊來說是必要的。 


17.精心管理產(chǎn)品需求

一切都從收集需求開始,然后慢慢創(chuàng)建關(guān)鍵列表。雖然簡單地列出一個列表聽起來很容易,但隨著項目的進展,要保持列表的條理性確實是一個挑戰(zhàn)。


除了創(chuàng)建需求和檢查復(fù)選框之外,還有一個問題就是調(diào)整需求,需要從 設(shè)計、技術(shù)和業(yè)務(wù)各個方面來處理各種需求,還要確保這些需求之間沒有相互矛盾。  


18.了解移動和網(wǎng)絡(luò)產(chǎn)品之間的差異

網(wǎng)頁端和移動端產(chǎn)品最明顯的區(qū)別是屏幕尺寸,這意味著所有的視覺層次結(jié)構(gòu)和信息架構(gòu)都將將從Web到App發(fā)生變化。


移動端產(chǎn)品會有更多影響設(shè)計決策的因素,例如設(shè)備的操作系統(tǒng)、使用產(chǎn)品的環(huán)境等。了解移動端產(chǎn)品在 導(dǎo)航設(shè)計、用戶流程等關(guān)鍵方面的差異是至關(guān)重要的用戶體驗設(shè)計原則。 


19.利用UX設(shè)計模式

幾乎所有的產(chǎn)品都專注于設(shè)計模式,它們可靠、易于查找并通過減少設(shè)計時間來為項目增加實用性。


▲ 當(dāng)用戶在谷歌搜索中輸入的內(nèi)容有問題時,谷歌會提供一個相關(guān)的搜索提示,輔助用戶進行精確地搜索,解決用戶使用不同方式在搜索欄中傳達他們正在尋找的內(nèi)容的問題。 


20.使用合適的工具才能有效

擁有單一的內(nèi)容來源可以為團隊帶來清晰性和高效性,如果線框和原型分散在多個渠道中,這種內(nèi)容的集合就會變得很難達成。


通過合適高效的工具能夠避免產(chǎn)品在到達終點時遇到各種各樣的可用性問題,防止產(chǎn)品細(xì)節(jié)沒有表現(xiàn)出來或者被忽略。 


最后

通過這份用戶體驗設(shè)計原則的合集希望能夠讓你對這個領(lǐng)域有一個大致的了解。

沒有人知道用戶體驗設(shè)計在未來會引領(lǐng)我們走向哪里,不過我們可以確定,無論它帶給我們什么,肯定都會很有趣

慢慢來比較快,希望對你有所幫助~

文章來源:站酷  作者:Clippp
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

5個方面改善用戶體驗

ui設(shè)計分享達人

當(dāng)你在一個既定的服務(wù)領(lǐng)域工作,但想要進行革新時


1.詳細(xì)研究當(dāng)前的用戶體驗


分析當(dāng)前的服務(wù)體驗,解讀用戶旅程中涉及到的行為,接觸點,出現(xiàn)的痛點。構(gòu)建現(xiàn)有的體驗旅程圖可以捕捉到服務(wù)體驗的全貌,立即發(fā)現(xiàn)需要重新設(shè)計的關(guān)鍵問題,促進組織內(nèi)部的一致性。對于這種復(fù)雜的服務(wù),根據(jù)分析結(jié)果建立服務(wù)藍圖也大有好處,可以捕捉到流程中的關(guān)鍵問題還有不同接觸點的關(guān)系中的重要方面。

建議:
自己進行嘗試,能夠有效地發(fā)現(xiàn)細(xì)節(jié),涵蓋分析中的所有步驟。


2.分析服務(wù)構(gòu)建


體驗和過程只是服務(wù)的一部分:在分析現(xiàn)有服務(wù)時,我們也要考慮底層系統(tǒng)是如何搭建組件和動態(tài)結(jié)構(gòu)的。只有對系統(tǒng)進行全面理解,我們才能發(fā)現(xiàn)連接缺失,精力和資源的潛在浪費和重復(fù)。創(chuàng)建一個系統(tǒng)地圖有助于讓團隊成員明確這些問題,討論潛在的改善機會。

建議:
我們需要將系統(tǒng)中的所有行為者聯(lián)系在一起,全面理解系統(tǒng)過程,減少重復(fù),彌補差距。


3.設(shè)定具體的目標(biāo),指導(dǎo)設(shè)想


在開始構(gòu)思之前,花些時間來思考系統(tǒng)和體驗的分析結(jié)果,并通過重新設(shè)計確定自己達到的關(guān)鍵目標(biāo)。目標(biāo)可以是橫向的(比如 “優(yōu)化整個旅程中的信息流”),也可以是非常具體的(比如 “入職:從填寫表格到熱情的歡迎會”)。最重要的是,我們首先要詳細(xì)了解現(xiàn)狀,才能設(shè)定目標(biāo),制定正確的方法,同時意識到急需解決的潛在局限性和障礙。

建議:
我們也可以將期待體驗設(shè)定為目標(biāo)旅程,為體驗中的每一步設(shè)定一個具體目標(biāo)。


4.創(chuàng)造新點子和解決辦法


提出新的想法,解決旅程中所有已知痛點或系統(tǒng)中的差距,以及抓住有趣的機會。這些想法包括既稍微改進一些特定功能,也可以影響整個服務(wù)模式的寬泛概念。在這個階段,不要限制自己的想法數(shù)量,更不用考慮可行性:捕捉每一個想法,與其他團隊成員分享,并在彼此的思考之上建立一個新想法。

建議:
快速構(gòu)思是一種頭腦風(fēng)暴的練習(xí),團隊中的每個人都寫下他們心中的每一個想法,然后再進行小組討論。


5.確定最有可能實現(xiàn)的概念


收集所有想法,確定下一步的行動計劃。如果項目很簡單,我們可以簡單地將所有的想法整合成一個重新設(shè)計方案,逐步發(fā)展。在其他情況下,你可能最終得到50多個想法,對當(dāng)前的服務(wù)體驗進行創(chuàng)新,但顯然我們不能訴諸于每個想法,那么……從哪著手呢?我們可以建立一個評估矩陣,確定標(biāo)準(zhǔn),分析每個概念(例如,對用戶的價值,實施成本,獨特性等),并對它們進行相應(yīng)的評分。這樣我們就可以篩選出最有可能實現(xiàn)的想法,創(chuàng)造較大的價值(這些想法可能是最先開發(fā)的)。簡略的概念可以很好地改善部分服務(wù),但不會產(chǎn)生較大的影響(容易實現(xiàn)的目標(biāo));而較復(fù)雜的概念從長遠來看會對服務(wù)體驗產(chǎn)生更積極影響,但需要投入大量的時間和精力。

建議:
我們需要考慮的最核心內(nèi)容是新概念給用戶和組織帶來的價值,而不是實施的可行性或復(fù)雜性-但這可以根據(jù)具體環(huán)境而改變。

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷  作者:馬克筆設(shè)計留學(xué)

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

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

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

你常常忽略的7個具有破壞性的體驗鴻溝

資深UI設(shè)計者

若想戰(zhàn)勝競爭對手,產(chǎn)品無疑需要在設(shè)計上做好提前規(guī)劃,并時刻樹立優(yōu)化意識,盡量滿足用戶的體驗期望。然而研發(fā)團隊有時總?cè)菀紫萑胝`區(qū),本篇文章里,作者就產(chǎn)品研發(fā)過程中可能忽略的、對用戶體驗具有破壞性的因素做了總結(jié),一起來看一下。

毫無疑問,要想獲得出色的用戶體驗 (UX) 需要在數(shù)字世界中保持競爭優(yōu)勢。盡管如此,由于某些關(guān)鍵盲點,改善用戶體驗的努力并不總能取得成功。如果忽略這些盲點,那么無論預(yù)算大小和團隊的努力如何,失敗都會預(yù)先留存在項目中。事實上,如果實施不準(zhǔn)確,可能會導(dǎo)致所謂的“經(jīng)驗差距”造成的設(shè)計上的損失。

你常常忽略的 7 個具有破壞性的體驗鴻溝

上圖所示的具體案例:某銀行投資了近 50 萬美元改進其手機銀行應(yīng)用程序,卻導(dǎo)致整體客戶滿意度下降。其根本原因是金融公司未能發(fā)現(xiàn)和預(yù)防不同級別的內(nèi)部經(jīng)驗差距。那么,該如何及時識別和避開這些盲點,以保障耗資巨大的大規(guī)模數(shù)字化項目的成功呢?

一、即使預(yù)算龐大,用戶體驗工作也可能失敗 UX efforts can fail even with huge budgets

在過去十年中,大量研究證實,用戶體驗對公司市場效率存在優(yōu)先影響。根據(jù)甲骨文的一份報告,如果糟糕的用戶體驗導(dǎo)致多個業(yè)務(wù)問題,那么積極的用戶體驗會增加推薦、保留率和收入,因為 86% 的客戶愿意為更好的用戶體驗支付更多費用。

看起來一切都很簡單——只要增加預(yù)算和成本,就足以提供最好的體驗?但在實際操作中,這并不容易。根據(jù)貝恩公司的研究,80% 的 CEO 認(rèn)為他們提供了卓越的體驗,而只有 8% 的客戶同意這一點。

其主要原因可以用“經(jīng)驗鴻溝”來解釋——這是客戶期望的體驗與他們從數(shù)字服務(wù)中獲得的體驗之間的負(fù)面差異。如果體驗比預(yù)期的差很多,就會產(chǎn)生許多令人不快的后果,比如客戶忠誠度下降、大量負(fù)面評論,甚至客戶決定離開品牌。

在大多數(shù)情況下,人們往往無法認(rèn)識到真正的經(jīng)驗鴻溝。

即使公司的領(lǐng)導(dǎo)和員工覺得有些地方不對勁,他們也往往不明白“要改進什么”以及“為什么要改進”。如果沒有意識到某件事,就不可能管理它。

二、現(xiàn)實生活中的例子:行動中的經(jīng)驗鴻溝 Real-life example: Experience gap in action

為了解釋“經(jīng)驗鴻溝”可能導(dǎo)致麻煩的基本原理,我想分享一個現(xiàn)實生活中的例子。

幾年前,一家知名且受人尊敬的中歐銀行開始了大規(guī)模的數(shù)字化轉(zhuǎn)型之旅。當(dāng)時,該銀行的應(yīng)用程序的評級為 3.5,并且已經(jīng)過時。所以,為了實現(xiàn)數(shù)字化、提升銀行形象,并在不斷增長的數(shù)字市場中獲得競爭機會,管理層打算緊急創(chuàng)建并推出一款現(xiàn)代化的銀行應(yīng)用程序。因此,最初的設(shè)計和開發(fā)周期為 6 個月。

盡管如此,銀行還是花了三倍時間(1 年零八個月)自主構(gòu)建新應(yīng)用程序。無論從時間來說,還是從投資預(yù)算來說,這都可以稱得上是一個重要項目。從項目的范圍、所做改進和時間表來看,總成本估計在 50 萬左右。

然而,結(jié)果完全沒有達到預(yù)期。新應(yīng)用發(fā)布后,它從之前的 3.5 下降到 2.4,并且因為它沒有改進,以至一年后,其評分仍在下降,其用戶體驗也日漸惡化。

銀行盡一切努力改善用戶體驗,整個團隊努力工作近兩年,怎么會發(fā)生這種情況?

這種情況的產(chǎn)生,正是由于“經(jīng)驗鴻溝”的存在。盡管該銀行啟動數(shù)十名頂級專業(yè)人士花費了 20 個月和 50 萬來改良產(chǎn)品,但它仍未滿足用戶的期望。

雖然客戶不滿意的真正原因是無意識的“體驗鴻溝”,但公司往往傾向于通過指責(zé)外部環(huán)境來解釋它。例如市場的變化、競爭對手的活動、創(chuàng)新的出現(xiàn)、消費模式的變化。當(dāng)然,這也是客觀事實,但一家適應(yīng)性強的公司應(yīng)該考慮將這些因素用于其增長,而不是作為“替罪羊”。

但衡量適應(yīng)效果的最重要方式是公司服務(wù)在多大程度上滿足甚至超過了消費者的期望。沒有意識到他們服務(wù)和客戶期望之間存在差距的公司注定無法適應(yīng)外部環(huán)境的變化。

在某些情況下,公司的行為甚至?xí)?dǎo)致經(jīng)驗鴻溝擴大到臨界水平。這通常會導(dǎo)致目標(biāo)客戶對公司產(chǎn)品和服務(wù)的需求急劇下降。

如果我們回到這個例子,似乎管理層對重大改進是否可以成功充滿信心,并投入了大量資金和精力進行廣告宣傳。同時,那些宣傳此應(yīng)用程序現(xiàn)代、創(chuàng)新和友好的廣告,激發(fā)了消費者的高期望,以至于大大超出了其服務(wù)的實際質(zhì)量。

結(jié)果,當(dāng)產(chǎn)品最終發(fā)布時,客戶驚訝地發(fā)現(xiàn)他們的期望落空了,新應(yīng)用程序比改良前更糟糕。并且相關(guān)的負(fù)面評論不僅出現(xiàn)在 App Store 和 Google Play 上,也在社交媒體上大量涌現(xiàn),人們在推特上不斷諷刺該銀行失敗的數(shù)字化項目。

三、對鴻溝的不了解是主要威脅 Unawareness of the Gap is the main threat

接下來,讓我們探討一下數(shù)字服務(wù)和用戶期望之間的鴻溝是如何形成的,以及為什么沒有人能夠阻止它。

事實上,最大的挑戰(zhàn)是大家往往很難注意到這些差距。他們的原因并不明顯,并且可以同時存在于各個組織架構(gòu)之上。此外,它們的影響令人難以察覺,以至于最終會導(dǎo)致意想不到的破壞性后果。最終,直到團隊面對產(chǎn)品在市場上的失敗,才有人明白原因是什么。

彌合鴻溝的主要困難在于,級別越高對經(jīng)驗鴻溝的不了解程度越高。實際上,在組織架構(gòu)的頂部,通常會找到造成鴻溝的根源。級別越低,離用戶越近,員工越能覺察到問題和差距,但他們往往沒有權(quán)力和能力去消除它們,他們受制于文化。

在這種特殊情況下,售后部門每天都會接到數(shù)千個關(guān)于產(chǎn)品問題的電話,但由于業(yè)務(wù)流程分散,他們對此也無能為力。

客戶的挫敗感變得更加強烈。即使是最簡單的日常場景,他們面臨的問題也難以執(zhí)行,但他們從銀行員工那里得到的反饋是,他們并不是唯一產(chǎn)生困惑的人,而且目前銀行正忙于交付新功能,而不是修復(fù)當(dāng)前問題。

使事情變得復(fù)雜的是,經(jīng)驗鴻溝背后的內(nèi)部流程,是由過去促進公司生存和增長的相同機制引起的。該公司受制于過去的成功。就像諾基亞一樣,這家全球最大的以硬件為中心的手機工廠,在蘋果智能手機引領(lǐng)的軟件革命中被徹底擊敗。

由于任何組織都有惰性,這些機制受到內(nèi)在信念和價值觀的影響,對適應(yīng)市場和彌合經(jīng)驗鴻溝造成了阻礙。

首先,應(yīng)該在管理層面解決鴻溝。因此,級別越低,離領(lǐng)導(dǎo)層越遠,離客戶越近,就越能感受和認(rèn)識到鴻溝的存在。自然,一線員工將擁有從那些期望沒有得到滿足的客戶那里得到最多的數(shù)據(jù)。

四、7 種體驗鴻溝盲點 The 7 types of experience gap blind spots

主要的體驗鴻溝可能是由組織中七個層次(文化、反饋、執(zhí)行、設(shè)計、價值、品牌承諾、情感聯(lián)系)中的一個或幾個盲點造成的。

你常常忽略的 7 個具有破壞性的體驗鴻溝

1. 文化鴻溝

在文化層面缺乏以顧客為中心的理念,員工無法使服務(wù)更接近客戶期望,導(dǎo)致了“文化鴻溝”。在具有“文化鴻溝”的公司中,有助于以客戶為中心的流程和活動都是處于低優(yōu)先級的,相應(yīng)的,它們也不會得到相關(guān)的資源。

2. 反饋鴻溝

缺乏關(guān)于客戶期望和他們對產(chǎn)品或服務(wù)的體驗數(shù)據(jù)會造成“反饋鴻溝”。在這種情況下,公司可能經(jīng)常收集數(shù)據(jù),但沒有對其進行分析,也沒有采取任何措施來改善這種情況。

3. 設(shè)計鴻溝

即使優(yōu)先考慮以客戶為中心的方法,并且收集了大量有關(guān)客戶期望的數(shù)據(jù),但在設(shè)計能力和方法上仍可能存在鴻溝。擁有合適的專業(yè)知識,就可以構(gòu)建高質(zhì)量的數(shù)字產(chǎn)品生態(tài)系統(tǒng),從而根據(jù)客戶需求提供最佳服務(wù)。

4. 執(zhí)行鴻溝

這種鴻溝與糟糕的設(shè)計執(zhí)行有關(guān)。如果不優(yōu)先以用戶為中心的來設(shè)計產(chǎn)品,那么創(chuàng)建最終產(chǎn)品和服務(wù)的決策和努力將注定是低質(zhì)量和低效率的。這決定了公司在數(shù)字時代創(chuàng)造有競爭力的服務(wù)和產(chǎn)品的能力。

5. 價值鴻溝

如果設(shè)計生態(tài)系統(tǒng)在 價值金字塔的五個層次(功能、可用性、美學(xué)、地位、使命)上不符合用戶的期望,就會形成價值鴻溝。

6. 過度承諾的鴻溝

正如我在上述銀行案例中所表明的那樣,如果一家公司只顧著積極推廣其服務(wù),承諾一些產(chǎn)品無法提供的東西,它會導(dǎo)致用戶對期望的更大失望。因此,由于廣告承諾與現(xiàn)實不符,對該服務(wù)的負(fù)面評價可能會翻倍。

7. 情感鴻溝

如果品牌傳播是純粹的信息傳播,專注于功能特征,那么就無法與用戶形成情感聯(lián)系。由于人類基于情感做出決策,因此基于情感構(gòu)建服務(wù)價值會對客戶期望和最終用戶體驗產(chǎn)生積極影響。

五、彌合經(jīng)驗鴻溝 Bridging the experience gap

每個客戶都會不知不覺地根據(jù)自己的期望來評估他們所接受的服務(wù)。用戶體驗質(zhì)量所引發(fā)的情感將形成品牌的聲譽。

在現(xiàn)代世界,數(shù)字渠道已成為品牌的主要“營銷”和公關(guān)渠道。

一個應(yīng)用程序,即使有一百年的服務(wù)客戶歷史和其他渠道的優(yōu)質(zhì)服務(wù),負(fù)面體驗也會破壞品牌推廣的所有努力。

這僅僅是因為在數(shù)字時代,移動渠道占主導(dǎo)地位,對于某些人來說,它正在成為與品牌互動的唯一途徑。這就是為什么了解如何彌合數(shù)字產(chǎn)品出現(xiàn)的七個體驗鴻溝的方法如此重要。

1. 彌合文化鴻溝

在文化方面,轉(zhuǎn)型基于高層心態(tài)的改變并將這種影響滲透到整個的公司文化和內(nèi)部價值觀。特別是,可形成“以客戶為中心”的體驗思維模式。

2. 彌合反饋鴻溝

在銀行案例中,開始彌合反饋鴻溝的第一步,是深入了解社交媒體上的負(fù)面評論以及致電售后部門的電話。接近這些客戶才容易消除反饋鴻溝。事實上,他們比管理層更了解應(yīng)解決哪些問題,并且往往渴望積極分享自己的情緒并希望得到傾聽。如果一家公司足夠開放并準(zhǔn)備好接受批評,它可以使用這些數(shù)據(jù)來彌合鴻溝并提高產(chǎn)品迭代的敏捷性。

3. 彌合設(shè)計鴻溝

通過整合設(shè)計方法和設(shè)計思維來制定彌合鴻溝的策略,可以使用設(shè)計金字塔。該框架從五個層次(流程、團隊、行動、結(jié)果和價值)確定了能夠提高公司整體效率的設(shè)計集成。

4. 彌合執(zhí)行鴻溝

組織必須將經(jīng)過驗證的設(shè)計執(zhí)行方法(例如設(shè)計思維、HCD 或 UX 設(shè)計方法)與分步系統(tǒng)相結(jié)合,以設(shè)計符合客戶期望并能夠彌合執(zhí)行鴻溝的數(shù)字產(chǎn)品。

5. 彌合價值鴻溝

產(chǎn)品的功能級別為客戶創(chuàng)造真正的價值和利益,并通過提供卓越的可用性進行功能擴展;美學(xué) ——令人驚嘆的視覺識別;狀態(tài) —— 針對產(chǎn)品特定受眾的個性化,最后是建立產(chǎn)品的價值觀與使命。

6. 彌補過度承諾的鴻溝

數(shù)字時代的客戶要求透明、關(guān)懷、誠實和開放的溝通。由于網(wǎng)絡(luò)效應(yīng),幾乎不可能銷售劣質(zhì)產(chǎn)品,因為每個人都可以在社交媒體上發(fā)布負(fù)面反饋,而這些負(fù)面反饋將深深地?fù)p害客戶的信任。因此,做出不僅可以兌現(xiàn),甚至可以超額兌現(xiàn)的承諾至關(guān)重要。

7. 彌合情感鴻溝

對客戶的同情和關(guān)懷比以往任何時候都更加重要。在品牌與客戶之間建立情感聯(lián)系對于確保長期忠誠度和需求至關(guān)重要。這種聯(lián)系是通過之前涵蓋的所有階段建立的——將客戶放在第一位的正確心態(tài);收集反饋并在此基礎(chǔ)上進行改進;使用正確的工具和方法來創(chuàng)建產(chǎn)品設(shè)計和生態(tài)系統(tǒng);創(chuàng)造真正的價值和利益,最后,通過誠實和超額兌現(xiàn)承諾。

六、成為深受喜愛品牌的途徑 The pathway toward becoming a beloved brand

該途徑涵蓋了可能破壞數(shù)字產(chǎn)品創(chuàng)造的 7 個主要體驗鴻溝以及可以幫助避免和解決這些鴻溝的 7 個橋梁。如果一個品牌能意識到這些盲點,它可以立即獲得比仍處于盲點的競爭對手的顯著市場優(yōu)勢。

僅憑意識就可以產(chǎn)生巨大的差異,但將意識與行動相結(jié)合會導(dǎo)致長期成功,成為一個需求量很大和深受喜愛的品牌。

本文翻譯已獲得作者的正式授權(quán)(授權(quán)截圖如下)

你常常忽略的 7 個具有破壞性的體驗鴻溝

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:人人都是產(chǎn)品經(jīng)理  作者:TCC翻譯情報局

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

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

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


如何從用戶角度出發(fā)打造產(chǎn)品體驗

ui設(shè)計分享達人

文章定位:

好的產(chǎn)品能為用戶帶來高效的解決方案,在迭代升級中實現(xiàn)用戶價值。

以下文章主要探討設(shè)計師 如何從用戶角度出發(fā)打造產(chǎn)品體驗,通過設(shè)計幫助產(chǎn)品帶來高溢價。

 

01、用戶思維

用戶思維最基本就是 圍繞用戶 去設(shè)計,幫助他們 解決實際問題。

Q:為什么要圍繞用戶做設(shè)計?

A:想將自己產(chǎn)品打造成為好產(chǎn)品,最終留住用戶。

Q:什么是好產(chǎn)品?

A:“讓產(chǎn)品自然生長,不要去碰用戶,不要去打擾他們,讓他們自然形成一種互動關(guān)系”。不要強塞東西給用戶,切切實實的在用戶需要的時候能快速給到他們價值,解決某個問題,或滿足他們的情感,情緒。

即:幫助用戶解決實際問題,并提供解決該問題的優(yōu)秀設(shè)計。

所以設(shè)計師產(chǎn)出設(shè)計方案前需思考的是:

  1. 解決什么實際問題?

  2. 應(yīng)該提供怎樣的設(shè)計?




02、確定用戶面臨的問題點

解決哪些實際問題是每個案子的核心,在該階段設(shè)計師常容易陷入誤區(qū)

如:我要做 一個…東西、我要怎么怎么做……下意識的就去研究怎么做,而不是首要思考具體解決什么問題,該誤區(qū)到后期往往會造成設(shè)計偏離。

為了避免該情況,首要需確定問題,并將問題清晰表述出來,表述的越清晰解決起來就越容易。

那我們應(yīng)該怎么去確定這個問題呢?


– 利用同理性圖譜構(gòu)建用戶認(rèn)知

好的設(shè)計需要與用戶心智相符合,貼合用戶當(dāng)時情境下的訴求。

為了讓優(yōu)化方案更有依據(jù),在發(fā)現(xiàn)問題的時候,需要從用戶視角出發(fā),結(jié)合當(dāng)前產(chǎn)品的頁面去分析是否符合當(dāng)前用戶的訴求。

——可以采用 同理心圖譜 的方式:

從 說了什么、做了什么、想了什么、感覺到什么 四個維度去勾勒用戶真實的想法感受。


以下以優(yōu)化案為例:

在實際優(yōu)化案中,可結(jié)合需改版頁面按照四個維度走一遍,可讓設(shè)計師更了解當(dāng)前頁面幫助用戶做什么,后續(xù)有哪些優(yōu)化方向。

如:QQ支付頁面整體流程優(yōu)化設(shè)計

① 用戶需給好友發(fā)紅包,在輸入完紅包金額點擊支付時,向上滑出了支付面板,用戶看到這個面板時候,其心理活動可能是怎樣的呢?

② 用戶想要更換支付方式,點擊更換后看到下方頁面,用戶對該頁面的的感受會是怎樣的呢?

③ 用戶輸入密碼后,以為馬上就成功了,卻發(fā)現(xiàn)卡里沒錢了,這時候用戶更加迫切的是什么呢?

通過以上這樣 【移情】的方式,使我們更能了解用戶,在沒有用戶訪談的情況下對他們的 愿望、需求、訴求點 有個概念,當(dāng)有了這個 共鳴 在后續(xù)就可以將這個共鳴變成一個有著明確優(yōu)化方向的 問題陳述。


– 自問自答式推理逐漸確定問題

在挖掘用戶需求點過程中,可以采用不斷詢問不斷回答的方式,將自己腦子里想的直接寫出來,通過這樣的方式構(gòu)建自己思考的邏輯。

如:“在下單頁轉(zhuǎn)化率太低 > 在下單頁用戶無法快速驗證信息 > 在下單頁重點信息不集中,其余信息太顯眼 >…..”

在這個過程其實就是刨根問底的過程,在反復(fù)的試錯過程中也會離真相更近。

類似下面這張Julie Zhuo的自我審視圖:


03、問題陳述(POV)


– 什么是問題陳述

通過陳述句將產(chǎn)品當(dāng)前狀態(tài)(問題)和期望狀態(tài)(目標(biāo))的差距描述出來。POV有助于我們強調(diào)用戶痛點,保證自己將重點始終放在用戶身上。


– 問題陳述怎么寫

那怎么陳述才能更好的將問題及規(guī)劃表達好呢?以下有兩個方式:

  • 基于用戶角度來說:我看QQ群里搶紅包很熱鬧,我也想快速參與進去,但是輪到我發(fā)的時候,我因為我不是非常熟悉整個流程,導(dǎo)致我反應(yīng)慢了,這讓群里的人以為我故意這么慢才發(fā),影響大家氛圍,這讓我有點沮喪。

  • 基于用戶研究來說(4W):我們的初中生因為特別活躍,喜歡在群里踴躍發(fā)言參與活動,所以一旦群里有好玩的消息總是想第一時間參與進去。我們的解決方案應(yīng)該 為他們 提供快速能夠完成紅包發(fā)送的鏈路與方式,不掃他們的興。

以上兩種陳述方式都是針對同一個問題,只是表述方式不同。所以只要你足夠?qū)W⒂脩?,理解他們需要什么以及為什么需要,就可以快速?gòu)建你后續(xù)的設(shè)計方案。


– 問題陳述注意點

① 用戶與他們的需求是問題陳述的核心,避免:我們應(yīng)該怎么做、產(chǎn)品應(yīng)該…作為開頭。

② 保持陳述的寬泛性,不要過早拋出細(xì)致的解決方案、技術(shù)限制等內(nèi)容,避免團隊發(fā)散受限。

③ 專注一點,不要讓用戶的需求和目標(biāo)過于寬泛,導(dǎo)致自己很難找到一個合適解決方案。所以不要視圖在一個問題陳述中解決太多用戶需求,一次解決一個就很好了。


04、如何打磨設(shè)計方案

在經(jīng)過問題陳述我們對要解決的問題了然于胸,在解決方案上,設(shè)計師需要考慮 易用性、易理解性、及著力提升用戶任務(wù)效率,給用戶一個更好的體驗。面對不同的項目,可考慮以下幾點:


– 結(jié)構(gòu)簡潔,重點突出

例1:


該例子非常能體現(xiàn)出 訴求 與 解決方案 的契合。

首先工作人員唯一的目的性就是 篩查 有問題的人,所以在眾多人中需 快速判斷,這個轉(zhuǎn)化到設(shè)計上解決方式:

通過大面積的 色塊直觀反饋;

通過實時的 滾動時間+滾動背景反饋真實性;

在結(jié)合下方核酸與疫苗輔助判斷,整體非常貼合實際訴求,重點突出,有節(jié)奏感。


例2:

通過體驗核心信息,將內(nèi)容合理布局,重點突出,操作劃分明確,有助于信息獲取與確定。


– 管理復(fù)雜(滿足不同訴求)

人的認(rèn)知資源有限,天生不善于處理復(fù)雜信息,所以在面對復(fù)雜信息時設(shè)計師需將復(fù)雜的內(nèi)容以一定秩序邏輯管理,分而治之,減少用戶的選擇,讓正確的行為變得自然和明顯。


例1:

在58二手車頁面的改版中,可以看出在面對不同用戶訴求的情況下在 模塊化結(jié)構(gòu) 與 坪效 找到了平衡:

頂部按鈕直接 分流 不同目的用戶;

中間模塊展示用戶 最關(guān)心的維度:價格、品牌、車類型;

下方 透出推薦內(nèi)容 吸引用戶往下逛。


– 注重情感化

情感化不一定都是很精美的插畫、動效等表現(xiàn)層面上的,有時候 貼心的記錄、舒緩的內(nèi)容、小游戲…… 也可以起到 情緒調(diào)節(jié) 的作用,提高用戶看到復(fù)雜信息的 忍耐度。


– 場景化設(shè)計(預(yù)判你的預(yù)判)

多考慮用戶使用場景,挖掘一些場景是可以通過我們的設(shè)計 幫助用戶多走一步,幫他們排除障礙,減少負(fù)擔(dān)。


例1:

打車軟件在特定時間點自動浮出目的地,以及截圖后立刻打開微信聊天窗,圖片自動在對話框中浮出的方式都是通過用戶的行為預(yù)判了用戶下一步的行為,


例2:

用戶輸入密碼后下意識認(rèn)為操作成功,但卻被告知失敗,對用戶而言是一次打擊,若這時直接前置化用戶后續(xù)可能會的操作,將條路徑重新接上,可以讓整個過程更加高效。


所以在具體設(shè)計方案上,設(shè)計師需要不斷的去思考打磨設(shè)計方案,讓自己的設(shè)計:

① 顯而易見的,讓用戶體驗后覺得「沒錯,就應(yīng)該是這樣」;

② 有價值的,它為用戶解決實際的問題;

③ 與用戶的心理模型相符,它不意味著更多的設(shè)計。



05、驗證體系

驗證方式有很多,目前市場上有幾大比較成熟的體驗度量體系,針對不同的關(guān)注點進行 定性+定量 檢測。

除去性能表現(xiàn)外,主要都是圍繞用戶行為數(shù)據(jù)及使用感受來進行度量

在行為數(shù)據(jù)上,主要關(guān)注:訪問頻率、留存率、頁面訪問次數(shù)…

在用戶感受上,主要關(guān)注:滿意度、用戶評價、推薦度…



– 設(shè)計師怎么確定自己設(shè)計方案的驗證指標(biāo)

對于設(shè)計師而言,不需要做的這么全面,我們只需要針對我們 具體優(yōu)化頁面、場景 找到可以直接驗證的指標(biāo)即可。

例:

在上述的發(fā)紅包支付頁面的優(yōu)化設(shè)計中,由于主要優(yōu)化的方向是為了讓用戶更聚焦,提升整體支付體驗,所以基于這個目的,我們可以以 整體的支付成功率 來驗證大致優(yōu)化效果;

其次,可以從 每個觸點的轉(zhuǎn)化漏斗、和 各頁面停留時長 上分析具體頁面改版效果。


– 面向真實用戶驗證設(shè)計

除去行為數(shù)據(jù)上的驗證,用戶真實反饋同樣重要,我們可以采用用戶調(diào)研的方式了解用戶對產(chǎn)品體驗的反饋,主要可以從下面三個方面執(zhí)行:

① 可用性測試:可針對核心優(yōu)化的功能點設(shè)定測評任務(wù),來觀察用戶的完成情況,如:如果你余額不足,你會怎么做?

② 滿意度測試:采用界面可用性問卷調(diào)研,可以采用SUS問卷收集反饋

③ 推薦度測試:通過NPS量表來衡量,通過將分值劃分為:0~6分為貶損者,7~8分為被動者,分值高于8分為推薦者,帶入計算公式(NPS值=推薦者% – 貶損者%)算出推薦度數(shù)值,數(shù)值越高,說明用戶滿意度越好,用戶的推薦意向越高。


藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

文章來源:站酷   作者:小發(fā)歌

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

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

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


正態(tài)分布模型在體驗設(shè)計中的分析及應(yīng)用舉例

ui設(shè)計分享達人

B端產(chǎn)品往往都具有較長的業(yè)務(wù)流程和操作步驟,需要用戶循規(guī)蹈矩、通過較多的步驟找到相應(yīng)的頁面,來觸達相應(yīng)的用戶目標(biāo)。落實到體驗設(shè)計中,需要設(shè)計師充分考慮用戶在操作路徑中的操作權(quán)重(頻率&停留時長),進一步以核心步驟為中心向路徑兩端延伸,完成頁面布局。


如何分析和評估用戶在操作路徑中的權(quán)重呢?今天介紹一下,本人從統(tǒng)計學(xué)中借用的一個概念——正態(tài)分布模型,并將其應(yīng)用到體驗設(shè)計的流程中。


1 首先,什么是正態(tài)分布模型呢?


正態(tài)分布,也稱“常態(tài)分布”,或高斯分布,是一個在數(shù)學(xué)、物理及工程等領(lǐng)域都非常重要的概率分布,在統(tǒng)計學(xué)的許多方面有著重大的影響力。


如果一個指標(biāo)受到若干獨立因素共同影響,且每個因素不能產(chǎn)生支配性的影響,不管每個因素本身是什么分布,它們疊加后影響的這個指標(biāo)平均值就是正態(tài)分布。


如圖:

標(biāo)準(zhǔn)正態(tài)分布模型


正態(tài)曲線呈鐘型,兩頭低,中間高,左右對稱因其曲線呈鐘形,因此,人們又經(jīng)常稱之為鐘形曲線。


標(biāo)準(zhǔn)的正態(tài)分布模型包含了中心極限定理的三要素,影響因素獨立,因素影響程度隨機但無法支配,各個因素之間是相加的關(guān)系。

中心極限定理三要素


當(dāng)然,在體驗設(shè)計中正態(tài)分布模型就沒有那么復(fù)雜,而且用戶的操作也不是隨機分布。那如何在體驗設(shè)計中如何應(yīng)用呢?


接下來,介紹一下基于用戶體驗,提煉的正態(tài)分布模型。


如圖:

體驗設(shè)計中標(biāo)準(zhǔn)正態(tài)分布模型


總的來說,體驗設(shè)計中的正態(tài)分布模型,是一種用來探討用戶在某一功能的操作過程(或產(chǎn)品的整個生命周期)中,操作頻率(權(quán)重)所集中的區(qū)間與頁面布局、信息架構(gòu)之間關(guān)系的方法與思維。


這個模型涉及兩個維度:

一是帶有指向性的操作路徑(步驟/功能模塊),可以是一個功能的詳細(xì)、單一的操作路徑,也可以是一個產(chǎn)品從使用到停止使用的生命周期中,用戶對整體功能使用流程;


二是頻率,操作路徑中的步驟或者核心功能被使用的頻率,即權(quán)重。這個維度可以直觀的反應(yīng)出用戶的關(guān)注重點和高頻操作,便于后續(xù)的用戶引導(dǎo)及頁面布局等。


將用戶的操作頻率按流程順序放置到坐標(biāo)中,即可得到類似于正態(tài)曲線的圖形,直觀的反映出用戶在功能步驟(模塊)上的關(guān)注度。


2 體驗設(shè)計中正態(tài)模型的類型


根據(jù)分析功能的顆粒度不同,得到正態(tài)分布模型的驗證結(jié)果也不相同。


由此,體驗設(shè)計中的正態(tài)模型,大體上可分為兩類:

第一類是具體的功能(功能型),通過該功能的起始到完成,獲得該功能高頻操作及核心頁面,可有助于功能路徑優(yōu)化及頁面布局、功能排布,讓用戶更方便的獲取高頻操作。


第二是產(chǎn)品整體功能(產(chǎn)品型),通過用戶從使用到停止使用該產(chǎn)品的全部路徑,獲取用戶在使用產(chǎn)品時關(guān)注的功能,有利于明確產(chǎn)品定位、優(yōu)化功能架構(gòu),在B端產(chǎn)品上還可以進行角色和權(quán)限的管理。


接下來,我們就詳細(xì)探討一下兩種類型的正態(tài)分布模型。


2.1 功能型的正態(tài)分布模型

功能型的正態(tài)分布模型多用于優(yōu)化產(chǎn)品功能及路徑。這種類型的模型關(guān)注更加聚焦,結(jié)論也更加直接,甚至可以直接應(yīng)用到設(shè)計方案上。因此在分析功能路徑時,要簡化相關(guān)聯(lián)的分支路徑,避免其對聚焦問題的干擾,使分析結(jié)論更加精準(zhǔn)。


例如,一個手機TB的購物流程,如果要研究用戶購買行為,就需要更多的關(guān)注用戶對商品的選擇、比較等操作,同時簡化用戶的支付操作路徑;如果研究的是購物流程中用戶的支付行為,就應(yīng)該相應(yīng)的簡化用戶選擇產(chǎn)品的路徑。


如圖:

舉例:淘寶購物流程分析


另外,這種類型分析結(jié)果的落地,需要格外關(guān)注功能操作路徑的入口及其他功能的銜接,保證在更大層級上的操作不會出現(xiàn)斷點,保證使用流暢。


2.2、產(chǎn)品型的正態(tài)分布模型

產(chǎn)品型的正態(tài)分布模型,可以看作眾多功能型路徑的簡化提煉版本,忽略操作細(xì)節(jié),著眼于業(yè)務(wù)在功能模塊之間的流轉(zhuǎn),多用于產(chǎn)品定位升級或架構(gòu)調(diào)整。這種類型的模型是將產(chǎn)品的拓?fù)鋱D,按照用戶從開始使用到停止使用的的操作路徑(產(chǎn)品的生命周期),將其映射到坐標(biāo)軸上,來直觀表現(xiàn)出產(chǎn)品的核心功能。


如圖:

產(chǎn)品型&功能型


其結(jié)果屬于定性結(jié)論,在設(shè)計方案時更多的是參考意義,只有在進行產(chǎn)品定位迭代及架構(gòu)調(diào)整時,才具有指導(dǎo)意義。因此,在不同場景下用合適的模型才能更具有說服力。


正態(tài)分布模型的可以應(yīng)用到B/C/G等多種類型的產(chǎn)品上,根據(jù)不同類型的產(chǎn)品,該模型還會有其他功能的擴展。


例如,B/G端產(chǎn)品往往都具有長流程、多角色、多模塊的特點,當(dāng)正態(tài)分布模型在B/G端產(chǎn)品上應(yīng)用時,還可以清晰凸顯角色、權(quán)限的結(jié)構(gòu),有利于對用戶權(quán)限和角色的定義與管理。


3 案例分析


在本人所從事的安防行業(yè)中,實時報警的處理是較為高頻、且重要的業(yè)務(wù)功能。本文僅對功能型模型進行案例分析,希望該方法(思維)的表達更加清晰明確,也能夠幫到大家。


3.1 業(yè)務(wù)概述:

實時報警的業(yè)務(wù)流程大致是這樣的:在監(jiān)控中心或崗?fù)ぃ0踩藛T對園區(qū)的安防狀態(tài)進行警戒時,如果有異常狀況觸發(fā)了報警,系統(tǒng)會反饋推送給安保人員,安保人員通過錄像抓圖等信息判斷報警的緊急程度以及處理方式。


3.2 業(yè)務(wù)定性

該功能是典型的“海島事件”,具有偶然性和急迫性的特點。所謂海島事件,是本人對具有偶然性與急迫性特點業(yè)務(wù)的概括統(tǒng)稱,后續(xù)可以寫文章專門探討該問題。


3.3  場景推演

安保人員每時每刻都全神貫注監(jiān)管整個區(qū)域的安全狀態(tài),是不可能的,更何況這類海島事件呢?所以,在發(fā)生報警時安保人員大概率處在“摸魚”狀態(tài)。



當(dāng)有報警進入時,安保人員第一時間需要確認(rèn)的是報警的類型以及位置,從而快速判斷如何處理。只有當(dāng)報警信息不明確時,安保人員才會進一步通過錄像、抓圖、關(guān)聯(lián)的監(jiān)控來進一步判斷報警信息。


實時報警場景推演


3.4  報警業(yè)務(wù)處理的正態(tài)模型分析

在整個場景推演過程中,用戶的關(guān)注重點是報警詳情以及報警信息的確認(rèn)過程,會有較少的概率查看輔助信息,因此需要保留輔助信息的入口。


如圖:


3.5  方案展示

方案采用瀑布流式,高權(quán)重的關(guān)鍵信息擁有更高的頁面權(quán)重,用戶可以快速獲取信息,以判斷處理方式。同時,漸進式展示確認(rèn)信、輔助信息,如抓圖、錄像、關(guān)聯(lián)視頻等,一方面可以減少對用戶決策的干擾,同時能夠快速獲取這些信息,輔助用戶做出判斷。


由于方案涉及到公司項目,所以方案不方便直接展示,這里只展示頁面信息布局。



我們都知道,在頁面縱向布局上,隨著視覺流的下移,用戶的關(guān)注度會逐步降低,因此,在實時報警處理頁面布局上,將從上到下信息的重要性逐級降低。


首先是實時報警處理的核心區(qū),分為兩個部分基本信息區(qū)與視頻輔助區(qū),這兩部分信息是判斷實時報警性質(zhì)以及處理方式的主要依據(jù)。其中,基本信息區(qū)是最重要的,用戶可以根據(jù)報警的基本信息,來確定如何處理報警。對于大部分的報警信息,用戶可直接判斷報警是否需要處理,或是進一步的確認(rèn)及驗證,盡可能的減少用戶的操作;因此,報警的處理入口,緊隨基本信息。


而視頻輔助區(qū)是對部分報警的回放確認(rèn),是在查看基本信息后的進一步操作,頻率相對較低,因此雖然屬于核心區(qū),但是層級卻低于基本信息的展示。


輔助驗證區(qū)放置的報警期間的連續(xù)抓圖,可以滿足用戶的放大查看,進行報警輔助確認(rèn),隨著用戶視覺流下移,其重要程度迅速降低,相應(yīng)的操作的步驟也較為復(fù)雜,頁面視覺權(quán)重也有較大的壓縮。


最后,對于極少的報警信息,用戶需要通過關(guān)聯(lián)視頻的信息進行驗證,可通過頁面底部的關(guān)聯(lián)視頻入口,點擊展開關(guān)聯(lián)視頻浮層,進行報警信息驗證。這是整個實時報警的最后一個層級信息展示。



4 寫在最后


正態(tài)分布模型不僅僅是一個工具、方法,同時,也是一種設(shè)計思維。


在設(shè)計之初,充分理解功能的定位,完善功能入口,讓用戶更容易觸達產(chǎn)品的核心功能。然后通過核心功能向業(yè)務(wù)兩側(cè)進行延伸,進而覆蓋整個業(yè)務(wù),完成產(chǎn)品的框架與流程的構(gòu)建。


在設(shè)計之中,關(guān)注高頻的核心步驟,讓用戶的高頻操作具有更簡便的操作空間,把用戶更想知道、更想操作的內(nèi)容推送到用戶面前,讓用戶在整個操作流程中的操作頻率與頁面布局的權(quán)重分布相匹配,而不是想當(dāng)然。


只有這樣,設(shè)計才更具價值,才能培養(yǎng)更忠誠的用戶。

文章來源:站酷  作者:體驗設(shè)計思

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

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

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


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔