首頁

來了!解讀2022年10種UI/UX設計趨勢

周周

想成為更優(yōu)秀的設計師, 需要了解設計趨勢和受眾目標的需求。了解UI/UX設計趨勢本質(zhì)上與了解時尚或者消費行業(yè)的趨勢并無本質(zhì)差別,都必須傾聽人們的需求,關注人們?nèi)绾问褂卯a(chǎn)品,創(chuàng)造出美觀、簡單、易用的設計,使產(chǎn)品脫穎而出。

我們收集了一份UX/UI設計趨勢的清單,幫助你了解2022年的相關行業(yè)變化。

如何正確建立B端系統(tǒng)設計規(guī)范

周周

結合營銷管理后臺系統(tǒng)案例,詳細聊聊B端設計規(guī)范建立過程

實例解析!從理論到落地,B端移動app設計指南

周周

隨著跨設備跨平臺的趨勢不斷顯現(xiàn),比如最近很火的鴻蒙,一部手機就可以完成辦公場景到生活娛樂場景的轉化,未來B端的管理系統(tǒng)不在局限于pc端,體驗將不斷向移動化對齊,使B端用戶不再受時間和地點限制。

交互深耕-B端設計師要懂的信息架構

純純

網(wǎng)上關于信息架構的知識內(nèi)容參差不齊,在學習與探究的過程中查閱了很多資料,反復修改多次,盡量用直白的語言結合實例來闡述信息架構。目錄如下:





1.1 前言

這篇文章的起源,來源于最近看到的話題“B端設計師會被組件庫取代嗎?”。從表面上看,在組件庫越來越完善的時代,很多頁面設計依靠組件庫就能夠快速搭建。


那么在這種情況下,B端設計師存在的意義和價值到底體現(xiàn)在哪里呢?其實B端設計的重點并不在頁面的視覺上,視覺只是作為設計師最終輸出成果的一小部分。個人認為B端設計師工作重心體現(xiàn)在做「正確的設計」,比如以下幾個方面:

1.這個設計能否完成對應的商業(yè)目標和產(chǎn)品目標;

2.我們的信息呈現(xiàn)是否合理以及能否解決當前需求;

3.用戶能否在頁面上快速找到想要的信息;

而想要弄清楚并解決上述這些問題,在眾多的話題闡述之下,我發(fā)現(xiàn)其論述本質(zhì)上都逃離不了「信息架構」這個概念。因此我認為設計師都需要對這個概念有充分的認知,這能夠幫助我們做出正確且出色的設計。


1.2信息架構概念

關于信息架構的概念,在百科上面的定義大部分都比較晦澀難懂,比如維基百科和百度百科的解釋:

相信大部分人都很難明白其中描述的意思。在這里換種思路,將信息架構拆分為信息與架構去理解。

信息指的是內(nèi)容的載體,常見的文字、圖像等都是信息;架構的含義則形容對應的組織和結構。那么信息架構就是將信息通過一定的形式組織起來,然后呈現(xiàn)出來。其本質(zhì)就是研究信息的表達與傳遞。

通俗點講,信息架構就是讓用戶可以更容易的理解我們的產(chǎn)品,讓用戶在使用我們的產(chǎn)品時可以更順利、更自然。因此信息架構沒有一個具體的呈現(xiàn)形式,它更多的是體現(xiàn)在產(chǎn)品設計的各方面。具體主要表現(xiàn)為組織系統(tǒng)、標簽系統(tǒng)、導航系統(tǒng)和搜索系統(tǒng)。





為什么需要信息架構?我們都知道B端產(chǎn)品設計的核心是「降本提效」,在設計這一側的可以將其理解為降低認知成本,提升使用效率。

降低認知成本需要我們更好的表達信息,讓用戶能看明白我們的產(chǎn)品能夠做什么,如何用;提升使用效率需要提升信息的傳遞效率,讓用戶能夠很容易的找到需要的功能;


而信息架構從本質(zhì)上來講也正是研究信息的表達和傳遞。因此我們需要通過它來幫助我們更好的完成B端產(chǎn)品設計。如果沒有信息架構來作底層支撐,那么我們在頁面上看到的可能就只有功能的堆疊,讓產(chǎn)品陷入難以上手或者不知道怎么用的尷尬境地。

一個強大信息架構是產(chǎn)品質(zhì)量的保證,是作為設計支撐點的骨架,它會減少可用性問題,提升整體導航行,創(chuàng)造對用戶友好的體驗。比如舉一個工具層面的例子:

PS的工具欄堆疊在界面各個部分,而Figma的工具欄則集中在右側且只出現(xiàn)當前需要的功能。很明顯Figma在信息架構中的信息組織部分做得更為友好,PS則會顯得遜色一些。這也是我們在學習PS的時候會顯得比較吃力的原因之一。


可以說良好的信息架構是高效用戶體驗的基礎。視覺元素,功能,交互和導航都是在信息架構的基礎上構建的。因此想要做出體驗好且合理的頁面設計,我們就需要參與到信息架構這個過程中來,和產(chǎn)品一起完成對應架構的梳理。而不是只完成從原型到頁面這個部分。


如果想要搭建一個好的建筑,我們需要知道其建造的目的,是按照什么樣的結構搭建,內(nèi)部有哪些系統(tǒng),以及最后呈現(xiàn)的模樣。


那么信息架構也同理,我們首先需要知道信息是為了什么目標服務,然后我們通過怎樣的結構來組織這些信息,以及過程中會用到的信息元素,最后如何呈現(xiàn)它們。這都是我們在搭建信息架構中需要進行的必要步驟。如果某些環(huán)節(jié)沒有做好或者沒有了解透徹,那么在輸出信息架構時往往會出現(xiàn)方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現(xiàn)的。


3.1 信息獲?。合壤斫鈽I(yè)務,再談架構

B端行業(yè)對于業(yè)務理解的要求是比較高的,只有在理解業(yè)務的基礎上,將業(yè)務需求轉化為對應的設計目標,我們才能夠輸出合理的信息架構方案。

個人認為理解業(yè)務的基礎,就是能夠用一句話講清楚當前設計的產(chǎn)品。這句話可以描述為:誰在什么地方想要完成什么目標。比如「用戶想要不出門就能夠吃到東西」,這就是外賣軟件提供的產(chǎn)品服務。


雖然看上去這句話很簡單,但其中包括了三個要素:用戶、場景和目標。因此我們在分析和梳理業(yè)務的過程中首先要弄清楚的就是這三個要素。


3.1.1用戶:分清購買者與使用者

用戶永遠是排在第一位的,也是我們首先需要弄清楚的。在B端設計中,本質(zhì)上可以分為兩類角色:客戶和用戶。比如我們常用的釘釘或企業(yè)微信,購買客戶是企業(yè),實際用戶是員工。

對于企業(yè):「我想要有一款軟件可以更好的管理員工」

對于員工:「我想要這款軟件能夠更好地提高工作效率」

客戶決定了我們產(chǎn)品的購買(部分情況下也兼顧使用),而用戶則決定了后續(xù)產(chǎn)品的復購率。因此在業(yè)務理解中,我們需要弄清楚當前產(chǎn)品所處的服務階段,比如初期為了打開市場肯定更傾向于客戶,而中后期為了提高產(chǎn)品的使用體驗又會偏向于用戶。


因此我們首先需要弄清楚的就是當前產(chǎn)品是為哪些「目標用戶」服務,這也就決定了我們在設計信息架構時對應的不同側重點。


3.1.2場景:需求源于場景

場景是指需求產(chǎn)生的某種條件,這個條件包括但不限于環(huán)境、時間、地點、空間等,只有上述條件滿足,這個需求才能成立。這里可以把場景理解為產(chǎn)生該問題的原因。

比如當用戶提出「她需要一件衣服」,那么我們就需要弄清楚用戶為什么需要添加衣服,是她感冒了自身覺得冷還是因為外界環(huán)境冷。這兩種場景涉及到的解決方案是完全不一樣的。


在平日的工作中我們可以通過以下兩種方式來更好的了解業(yè)務場景:

1.通過業(yè)務方文檔進行業(yè)務背景的初步理解。業(yè)務文檔中一般都會包括需求背景,我們可以通過文檔進行初步了解。

2.通過業(yè)務溝通進一步加深業(yè)務背景的理解。由于很多B端業(yè)務離設計師本身的生活比較遠。因此對于需求背景中不理解或者比較模糊的部分,我們可以通過與業(yè)務方或產(chǎn)品多次溝通來挖掘最底層的背景。

畢竟需求背景是理解業(yè)務的重要步驟,我們只有知道需求產(chǎn)生的原因,才能夠針對性的給出解決方案。


3.1.3目標:業(yè)務目標和設計目標

目標決定了我們的產(chǎn)品最終的方向。我們首先接觸到的一般都是業(yè)務目標,而我們要做的就是將業(yè)務目標轉化為我們此次的設計目標。


A.業(yè)務目標

業(yè)務目標就是此次業(yè)務想要解決的實際問題,它通常是一個宏觀上的描述。比如打車軟件的業(yè)務目標簡單概括來講就是讓用戶能夠更快速地打到車,減少等待焦慮。我們一般通過文檔或者溝通來了解該目標。


B.設計目標

設計目標是我們基于業(yè)務目標而給出的設計策略,是一種更具體的實現(xiàn)方式。比如我們要讓用戶快速的打到車,那么這個時候我們的設計目標就是通過將用戶位置和司機位置進行快速匹配,并通過超時補貼紅包的方案來降低用戶焦慮。從而實現(xiàn)業(yè)務目標。而這一過程涉及到的信息點就有:司機位置、乘客位置、等車時間、補貼金額等元素,并需要思考它們之間的關系和呈現(xiàn)方式。


可以發(fā)現(xiàn)從業(yè)務目標轉化到設計目標這個過程,實際上就是在確定功能和信息點的過程。這樣才能讓我們更好地設計信息架構。


3.2信息架構核心:信息組織

從前文可以看出我們會在整體設計過程中出現(xiàn)很多的信息元素。如果不經(jīng)過對應的組織和處理,直接堆疊在一起,那么信息含義會比較亂且難以調(diào)用。比如下方:

而右側圖片信息的組織過程可以理解為通過將零散的數(shù)據(jù)信息進行分類,再以某種結構化的形式將它們重新組合排布的過程,直白一點就是先分類,再結構化呈現(xiàn)。我用一張圖來表明這個過程:

那么這個過程中「信息組織」和「結構呈現(xiàn)」到底應該怎么做,也就是接下來要講的組織方式和結構類型。


3.2.1組織方式:模糊分類和精確分類

組織方式可以分為精確分類和模糊分類。精確分類就是我們會利用物體本身物理屬性來進行分類,比如位置、字母表、時間、類別、層級等方式進行組織。一些工具類應用例如滴答清單內(nèi)容信息都是按照時間來進行組織的:

而模糊分類則是按照更為主觀的邏輯對信息進行分類, 如主題、任務、用戶、隱喻等來進行歸類,比如我們常用的APP商城是按照不同的主題類別來進行區(qū)分的。

但在很多時候,產(chǎn)品傾向于將兩種組織方式結合起來形成復合型組織方式,從而能夠使我們的整體組織形式更符合用戶的使用習慣。比如藍湖的信息組織,其中既包含了模糊分類(按使用類型等分類),也包含了精確分類(按上傳文件時間等)。

其實在大部分B端產(chǎn)品中,大都按照模糊分類來進行處理,比如按照任務、流程等方式。而精確分類更多用于在頁面內(nèi)的局部信息模塊,比如創(chuàng)建時間和文件大小等。


歸根結底,我們分類方式的選擇需要結合我們前面提到的用戶、場景和目標,這樣才能讓我們的分類更具說服力。


3.2.2組織結構:選擇合適的結構類型

當信息按照分類維度組織后,我們接下來就是把整體信息進行結構化,這樣才可以將信息整體連接起來并呈現(xiàn)出來。一般分為以下四種組織方式:


A.層級結構(最重要的結構)

這是信息架構中最為常見的結構,也是比較符合用戶認知的結構。有時也稱為「樹狀結構」。以子父節(jié)點的形式一層一層延展。

層級結構的優(yōu)勢就在于可以承載復雜的多層級內(nèi)容,通過層級遞進的方式將復雜的多層級拆解得更簡潔。


但我們需要把控好內(nèi)容的廣度和深度,廣度指的是在層級結構中每一層的數(shù)目,最好控制在7個以內(nèi)。如果廣度太寬意味著每個頁面會給用戶展示太多的信息,增加尋找內(nèi)容的負擔。深度為縱向結構,建議一般3層,最多不超過5層。過深的層級會讓用戶點擊很多次,且不容易被用戶發(fā)現(xiàn)。比如飛書的基本信息架構也是主要以層級結構來進行的。


B.矩陣結構(多維度結構)

矩陣結構是各個節(jié)點都相互連接的一種信息架構方式,通俗來講就是用戶既可以通過多個維度去觸達同一信息,也可以從單個維度連接多種信息。

這種結構其實就更類似于我們在做相關功能時:比如當你進入電影全屏時想要退出時,既可以通過點擊按鈕退出,還可以通過鍵盤的Esc返回到,通過多點觸達同一操作。


又比如我們的聯(lián)系人功能,我們既可以通過輸入數(shù)字撥打電話,也可以查找聯(lián)系人進行撥打,還可以查詢電話記錄進行回撥。

矩陣結構最重要的意義在于給用戶提供多種路徑,使用戶能夠在不同路徑中尋找各自想要的東西。


C.自然結構(隨機性)

自然結構不遵循任何一致的模式,節(jié)點都是被逐一連接起來的。

自然結構一般都具有隨機性和不確定性。這種更傾向于泛娛樂化的C端應用。比如我們常見視頻網(wǎng)站的在推薦流都是應用的自然結構。比如打開B站等視頻平臺,你很難猜到剛進入看到的是什么。

但一般自然結構不會單獨存在,比如B站在自然結構中也綁定了層級結構來進行層級上的劃分。


D.線性結構(單一性)

線性結構是非常單一的一個結構,整體是一層一層向下遞進。比較強調(diào)先后順序的一種結構。


這種結構通常用于我們常見的軟件安裝程序等,也可以用于部分功能結構,比如網(wǎng)站的視頻發(fā)布,一般都是經(jīng)過上傳-編輯-發(fā)布這三個步驟來依次進行。

大家可以發(fā)現(xiàn)在進行信息架構時,我們在很多情況下可能會運用多種組織結構方式,我們需要根據(jù)對應的用戶決策場景來考慮讓最適合的幾種方式相結合。但最終目的都是為了讓用戶能夠更快速的獲取信息。


3.2.3注意事項:關注用戶心智模型

在信息的組織過程中,我們需要注意用戶的心智模型。比如當我們看到紅點就知道有新信息通知,看到下拉箭頭就知道可以展開。這是互聯(lián)網(wǎng)產(chǎn)品在無形中給用戶建立的底層習慣認知。用戶目前對于普遍產(chǎn)品的一些基礎布局、功能名稱和交互邏輯都形成了一定的習慣,這都屬于用戶的心智模型的內(nèi)容。


因此我們在組織信息時盡可能不要去打破用戶常見的心智模型,否則必然會導致用戶的不習慣。我們常見的「掃一掃」功能,微信、支付寶和QQ會隱藏在「+」號里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。

這樣會導致用戶難以發(fā)現(xiàn)該功能。因為用戶接觸新的信息時,會以最初接觸的局部信息為依據(jù)展開并形成初步認知,用戶認知中的信息組織邏輯和實際信息的吻合度越高, 他在進一步查看或?qū)ふ倚畔⒌倪^程中體驗會更順暢, 反之, 若一開始形成的認知與實際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個吻合程度其實就是用戶心智模型。


雖然建議在一定程度上遵循用戶心智,但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業(yè)術語,我們需要通過靈活有效的提示(比如標記注釋等)來引導用戶就可以了。比如我們剛才提出的抖音掃一掃,它的應用場景其實是用于抖音官網(wǎng)后臺登錄,且在后臺登錄時已經(jīng)給出了對應提示,那么這樣的設計也是合理的。


3.3信息架構支撐:標簽、導航和搜索

當經(jīng)過上面的信息組織,其實我們已經(jīng)能夠歸納出一個大體的信息架構框架。但在信息組織之外,我們還需要關注以下三點:標簽、導航和搜索。這對于信息架構的完整性也有非常重要的意義。


3.3.1 標簽系統(tǒng):讓信息識別更通用

標簽系統(tǒng),通俗來講就是要我們對當前整個系統(tǒng)信息節(jié)點的命名,從而讓信息的呈現(xiàn)更容易識別。拿個最簡單的例子來進行說明:

可以看到左側和右側關于衛(wèi)生間的信息標示,可能左邊你能一眼區(qū)分,右邊可能就需要反應半天才能猜出到底代表什么含義了。


這其實就是關于我們的信息命名是否能夠被大多數(shù)用戶所接受的場景,也就是我們標簽作用所起的作用。標簽可以分為圖片和文字標簽,都需要考慮用戶對該信息命名的認知程度,也就是前面提到的心智模型。那么如何能夠更好的去定義標簽名稱呢,這里需要注意2個方面:


A.優(yōu)先選用被行業(yè)廣泛接受的詞或圖標

在進行標簽定義的時候,盡量選擇已經(jīng)被用戶所熟知的詞語,比如「工作臺」「通訊錄」等已經(jīng)被運用得非常熟練,對于類似功能就直接以該形式命名,比如我們的設計軟件中,很多圖標和功能名稱都是通用的:

這樣做能夠很大程度減少用戶的學習成本。因此在B端設計中我們也需要注意到我們所在的行業(yè),哪些名詞已經(jīng)達成了共識,就無需再造新名詞。


B.不確定的詞語可以參考競品或調(diào)研來決策

當某類功能或場景的標簽難以確定時,我們就可以嘗試去找一下競品是否有類似功能,或者找該行業(yè)的領頭羊(比如聊天工具的巨頭微信),那么在進行標簽定義的時候,可以參考它的命名體系。因為它已經(jīng)替我們教育了一部分用戶,會間接降低學習成本。


如果某些標簽在上述過程中還是無法確定,那么我們結合自己經(jīng)驗或者與咨詢業(yè)務相關人員來進行討論,在必要時候可以在標簽旁邊添加注釋來進一步說明。


3.3.2 導航系統(tǒng):讓用戶不迷路

導航系統(tǒng)其實應該是大家比較熟知的一個系統(tǒng)了。就像使用導航系統(tǒng)來規(guī)劃行程一樣,導航系統(tǒng)都會存在于每個網(wǎng)站中。比如我們常見的側邊導航、頂部導航等。

因為網(wǎng)上關于導航系統(tǒng)已經(jīng)有很多資料的講解了,在這里闡述下四類導航的含義:

1.全局導航:位于頁面最上層的導航,用戶幾乎在頁面的每個地方都可以看見,是最高層級的導航系統(tǒng);

2.局部導航:位于最高導航的下級子類導航,子類導航并不是必須的導航,根據(jù)場景進行取舍;

3.情景式導航:通過點擊文字鏈接進行跳轉的導航,比如在個人資料里面植入其它網(wǎng)站的鏈接地址;

4.輔助導航:這里包括網(wǎng)站地圖,網(wǎng)站索引,網(wǎng)站指南等輔助類型的導航。


輔助導航的網(wǎng)站指南包括新手引導和演示教程等?,F(xiàn)階段更巧妙的功能引導,是當用戶在進行某些功能的操作時及時進行提示,這樣不僅達到了為用戶引導的效果,還減少了一連串的新手引導對于用戶的打擾。比如figma在進行組件更新后,只有當你調(diào)用組件功能時,才會及時進行提醒。


3.3.3 搜索系統(tǒng):讓用戶輕松找信息

搜索,是我們平日最常用的查找信息的功能,它能夠幫助我們快速進行信息的檢索。雖然搜索功能非常重要,但并不是每個系統(tǒng)每個頁面都需要搜索。我們決策是否添加搜索時需要考慮下列三點:

1:內(nèi)容復雜度:當前頁面承載的內(nèi)容復雜度如果較少,對于簡單內(nèi)容頁面往往不需要搜索;

2:內(nèi)容性質(zhì):當前頁面的性質(zhì)是偏向于用戶瀏覽還是查找,根據(jù)用戶行為來決定是否需要搜索;

3.搜索場景:如果搜索場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜索內(nèi)容很復雜,我們還可以搜索結合篩選來更好的查找信息;


上述3點決定了我們是否需要考慮搜索功能。而關于搜索的其他細節(jié)點,比如搜索規(guī)則和搜索結果等,在這里不做進一步的闡述。在這篇文章中更重要的是弄清楚我們何時需要搜索功能。


3.4信息架構表達:視覺化你的架構

我們通過上述方法已經(jīng)知道如何梳理信息架構了,那么我們應該如何呈現(xiàn)它呢。這部分其實也是很多資料中比較模糊的點。

在學習的過程中,發(fā)現(xiàn)部分資料認為信息架構就是單純的指思維導圖,但實際上信息架構并不能單純只用思維導圖就能夠完全表示。

因為信息架構包含了很多部分的內(nèi)容。只能說思維導圖可以是信息架構的一種表現(xiàn)形式,其可以幫助我們在思考階段梳理整體產(chǎn)品的信息構成。


這里拋出一個很有意思的觀點,那就是「功能結構圖」和「信息架構圖」到底什么關系,這里用兩張圖示例:

可以看到,功能結構圖更多體現(xiàn)的形式是功能闡述,一般形式為名詞+動詞,比如頭像設置;而信息架構圖重點呈現(xiàn)的應該都為信息元素,一般為名詞,比如頭像圖片。

但在大多數(shù)時候我們看到的產(chǎn)品架構圖,其實更偏向于功能結構圖和信息架構圖的結合。因為在很多時候闡述信息構成時需要依賴功能進行輔助說明。


因此這篇文章講述的信息架構更偏向于基于產(chǎn)品的整體架構。其實信息架構對于呈現(xiàn)形式并沒有特別的限制,只要能夠幫助你清晰表達產(chǎn)品整體結構就行?!缎畔⒓軜嫞撼絯eb設計》第4版中其實也并沒有對表現(xiàn)形式這一塊進行嚴苛的定義,其用「顯示信息元素間的關系——站點地圖」的說法概括了信息架構的呈現(xiàn)形式,其表達如下:

可以看到其表達形式包括思維導圖和流程圖等形式:思維導圖的優(yōu)勢是能夠總覽全局信息,查看信息的深度和廣度,而流程圖的優(yōu)勢則更能夠表達整體的邏輯關系。


因此信息架構的呈現(xiàn)需要根據(jù)你的產(chǎn)品場景選擇合適的視覺框架表達。不必讓形式限制了我們的發(fā)揮,而是應該形式追隨于我們的架構表達。其只是一個信息梳理結構的說明結果(類似于中間態(tài)),我們需要借助它來更好的闡述思路與溝通想法。


3.5信息架構之后:讓信息具像化

在輸出信息架構之后,其實這里想聊一聊頁面的呈現(xiàn)。因為當梳理好大的框架后,剩余的頁面細節(jié)其實都需要通過原型圖來進行體現(xiàn)。這個過程是從框架到頁面的階段,其實對于設計師來說也是很重要的部分。在這里根據(jù)自己的理解列出了以下幾方面的注意點:

A.頁面能夠讓用戶看懂

這其實就是涉及到我們的信息組織和標簽系統(tǒng)。如果當我們的某個頁面不能讓用戶第一時間獲取到該頁面表達的信息,反思一下是在哪個方面做得不好。是標簽系統(tǒng)含義模糊呢,還是信息的組織分類方式不對。從頁面呈現(xiàn)倒推信息架構。

綜合來說就是設計時的排列要考慮用戶的心智模型(比如網(wǎng)頁的常規(guī)排版和通用名詞定義等),對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產(chǎn)品想要完全避免學習成本是不可能的,但我們可以盡量減少其學習成本。


B.考慮用戶的視覺動線

當我們在進行信息排列時,這時需要思考的就是用戶的視覺動線,也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說,采用不同的動線模型能夠讓用戶更好地查找信息。

F模型和Z模型的使用區(qū)分其實就是在使用場景上,對于內(nèi)容頁面來說F模型會更為合適(比如文章或者搜索結果),適合文本類的內(nèi)容。但對于非文本的頁面,則更適合用Z模型,Z型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右,從上到下,能夠更好引導用戶的視線。


C.掌控好適度的信息層級

B端由于在視覺的發(fā)揮空間不多,那么相對來說保持良好的信息層級能夠讓整體的體驗變得更為良好。

不管是原型圖還是視覺,整體的視覺層級要體現(xiàn)得更為清晰。按理說最好的視覺層級控制在三級左右。如果發(fā)現(xiàn)視覺層級過多,需要考慮是不是因為信息架構設計時縱向?qū)蛹夁^深,通過調(diào)整架構的形式來更好的呈現(xiàn)信息。以及對同頁面的信息進行重要程度分級。


當我們做完或者聽別人闡述對應的信息架構時,該如何評判呢,到底怎樣的信息架構才算優(yōu)秀呢。個人認為可以從3方面去進行判斷:

業(yè)務層:

1.設計目標合理:能平衡商業(yè)目標和用戶的目標,保證客戶和用戶都有較為良好的體驗;

2.核心任務目標:能夠讓用戶順利完成產(chǎn)品的核心任務,需要通過用戶測試來進行驗證

結構層:

1.平衡廣度和深度:在進行功能使用時不會隱藏的太深而找不到,是否有冗余步驟

2.保證拓展性:當前信息架構在面對未來新增或者刪減信息時能夠穩(wěn)定拓展

體驗層:

1.保證易讀性:用戶不經(jīng)過介紹,通過頁面信息呈現(xiàn)能夠看懂該產(chǎn)品是用來做什么的

2.保證易查找性:用戶在需要某個功能時能否快捷的找到,是否有多種查找方法(比如搜索或篩選)


合理的信息架構需要具備以上條件,我們需要在做設計呈現(xiàn)時也盡量保證以上條件。但在很多情況下其實并不能完全滿足,這個時候我們需要根據(jù)業(yè)務目標的重要性來選擇某些點進行滿足。


梳理一下整體文章的架構,其實是按照「是什么-為什么-怎么做」的形式來進行拆分的:

這篇文章想要表達的觀點,不是讓設計師獨立去梳理整體信息架構,而是讓設計師擁有信息架構意識,了解其是如何進行并產(chǎn)生的。這樣你在看到整體架構時,有足夠的理論支撐去判斷它的好壞,并通過自己的理論認知去理解和改進不好的地方。


當我們對信息架構有足夠的認知時,我們在設計頁面時才能有合理的思考方向,做出「正確的設計」,避免成為無情的作圖機器。信息架構作為產(chǎn)品交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗才能夠有本質(zhì)上的提升。


注:文章中不可避免會存在不足之處,如果對文章中內(nèi)容有更好建議,歡迎隨時交流。


  參考資料:

《web信息架構》第四版

《信息焦慮》

《用戶體驗要素》

《信息架構設計》

「從設計前/設計中階段,了解信息架構知識點」

「互聯(lián)網(wǎng)產(chǎn)品如何搭建信息架構」

文章來源:進擊的M(站酷)
作者:進擊的M

轉載請注明:交互深耕-B端設計師要懂的信息架構

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

B端引導設計指南

純純

B端產(chǎn)品中很常見但是很少提及以及忽略的一個領域——引導設計



文章來源:一九互七(站酷)
作者:一九互七

轉載請注明:B端引導設計指南

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


「北京2022冬奧會·阿里巴巴云展廳」幕后設計大揭秘

seo達人


 

①數(shù)字冰雪

在北京冬奧會的云展平臺上,我們打造了“阿里巴巴云展廳”虛擬展廳,用數(shù)字化的方式呈現(xiàn)冰雪與科技之美、鋪設競技與溫暖的賽道。
1月25日,北京冬奧會倒計時10天之際,奧運史上首個云展廳“北京2022云展廳“正式上線,這是一個集奧運合作伙展示與線上趣味互動為一體的云聚合平臺,由阿里巴巴集團提供技術和運營支持,為公眾打造一個與奧運會零距離接觸的線上會場!

圖片

-展廳廣告圖

同期,由阿里云設計中心和達摩院XR實驗室攜手制作的【阿里巴巴云展廳】也同步對外,借由虛擬現(xiàn)實技術,為觀眾呈現(xiàn)一個精彩紛呈的阿里冬奧線上空間。本次北京2022云展廳于1月25日上線后將一直陪伴公眾直至3月13日北京冬殘奧會閉幕。

 

冰雪數(shù)化

〇 空間質(zhì)感

在項目伊始,我們希望能在這次的項目中實現(xiàn)傳統(tǒng)虛擬展廳與沉浸式數(shù)字空間的平衡,在有效傳達信息的同時能讓用戶獲得耳目一新的體驗。因此在整體設計風格上,我們根據(jù)北京冬奧會的特點,在最初的設計基調(diào)上融入了冰雪、冰絲帶和戶外運動等元素,同時輔助溫暖的橙色、科技元素來展現(xiàn)阿里巴巴集團的品牌心智。比如,展廳的質(zhì)感選擇上我們采用了冰雪、玻璃與金屬相結合的搭配;在造型上則會以幾何和曲線為主的簡潔構造來體現(xiàn)運動感與科技感;而在整個展廳的采光設計中,我們以偏冷的自然光為主,與隱藏于結構中的橙色燈光相輔助,共同營造了明亮干凈的視覺氛圍。

圖片

-空間質(zhì)感設定

 

〇 體驗設計

同時在體驗設計層面,我們從冬奧會展廳面向的用戶角度出發(fā),將展廳設計為線性的瀏覽方式,以此來簡化操作和提升體驗。用戶進入云展廳后,會依次經(jīng)過【讓精彩每天出彩】、【云上奧運@北京2022】和【阿里巴巴以電商服務全球奧運粉絲】三個展廳,其中每個展廳都會通過轉場視頻來銜接,使得用戶的觀展體驗更加順暢。

圖片

-導覽路線圖

這也使得我們在思考展廳的空間設計的過程中,將不同的展廳通過戶內(nèi)外場景結合的方式依次連接在一起,這讓觀眾的動線更加順暢的同時,也使得展廳能夠更加通透自由和富有層次。

圖片

-空間設計總覽

展廳1- 【讓精彩每天出彩】

圖片

-展廳1-初始視角

圖片

展廳1-室內(nèi)場景

圖片

展廳1-室內(nèi)場景

圖片

-銜接展廳一和展廳二的走廊

 

展廳2 -【云上奧運@北京2022】

圖片

-展廳2-入口

圖片

-展廳2-虛擬轉播臺

 

展廳3 -【阿里巴巴以電商服務全球奧運粉絲】

圖片

-展廳3 – 初始視角

圖片

-展廳3 – 奧林匹克官方旗艦店

 

· UI設計

除此之外,UI界面的設計上我們采用了2D與3D空間結合的方式
  1. 空間層-在3D空間中展示最關鍵的一級信息(圖片、視頻、標題性文字),讓用戶像真正線下逛展般沉浸游覽;
  2. UI層/內(nèi)容層-在2D空間中通過醒目的標簽綁定3D空間中位置信息來展示次要的二級信息,用戶點擊標簽后可以看到該展位的詳情內(nèi)容;
  1. 聲音層-為了配合UI視覺層的信息立體展示,我們植入虛擬人IP通過聲覺層穿插講解,給用戶打造聲光電立體沉浸的信息可視方案;

圖片

-多層級信息結構圖

圖片

 

-虛擬IP聲音層講解

· 技術亮點

相較于傳統(tǒng)三維全景展廳,我們本次采用了達摩院XRlab自研的三維渲染引擎,它強大的能力允許我們在視效和內(nèi)容上做更多創(chuàng)新。在該引擎的加持下我們引入了基于真3D技術的虛擬云小寶講解員,它可以在不同展位間移動,為觀眾帶來生動的講解。我們也在本次展廳設計中引入更多動畫效果來豐富觀眾云逛展的體驗,例如虛擬轉播臺的設計。

-亮點1 — 全景技術與動態(tài)真3D的結合

針對本次展廳受眾群體,我們打造了一個“動畫引導+觀眾主動探索”結合的沉浸式展廳。觀眾進入云展廳后,我們會設置一個最佳視角的視窗來引導參觀流程。當觀眾準備進入下一個展廳時,視角將自動匹配到轉場動畫的第一幀,以此來達到順暢的觀展體驗。

 

動畫引導+全景探索

-主動引導型展廳結構

 

最終線上發(fā)布的效果

-PC端體驗錄屏

 

體驗二維碼

圖片

-識別圖中二維碼即刻體驗

 

冰雪之約

全面體驗時代,數(shù)字世界,虛擬空間成為了商業(yè)數(shù)字化轉型的潮流和必須。
阿里云設計中心的數(shù)字巡展產(chǎn)品致力于在虛擬/現(xiàn)實空間中運用最先進的表現(xiàn)技術對物理世界轉譯、重構,并進行沉浸式表現(xiàn)。不僅能有創(chuàng)造力地實現(xiàn)具有多元、豐富、有趣的視覺表現(xiàn)力的場景,還能用豐富的游戲化交互形式在保證趣味性的同時將信息準確傳達給用戶。
借助2022北京冬奧會的舞臺,阿里巴巴為奧運打造首個云上展廳,將全景技術、真3D漫游、虛擬IP等前沿技術與創(chuàng)新設計結合形成全域XR綜合營銷體驗鏈路,未來也將會有更多的企業(yè)、商業(yè)場景等待我們的發(fā)掘和探索。
數(shù)字巡展,虛實之間,沉浸生活。

圖片

-數(shù)字巡展產(chǎn)品海報

 

過往案例

-阿里巴巴云棲大會·互動導覽

-阿里云金融峰會·云上數(shù)艙

-達摩院數(shù)字展廳·云游達摩

-人工智能實驗室線上展廳·云游AI

 

原文地址:阿里設計中心(公眾號)
作者:阿里設計中心
轉載請注明:學UI網(wǎng)》「北京2022冬奧會·阿里巴巴云展廳」幕后設計大揭秘

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


【軟件界面設計】近期觀察到的 UI 設計表現(xiàn)技巧

seo達人



01、不一樣的優(yōu)惠券疊加設計

優(yōu)惠券在電商購物場景中運用普遍,如何提高優(yōu)惠券的關注度和使用率是至關重要的探索。特別是在多個優(yōu)惠券疊加的場景中,如何在交互層面和視覺引導層面進行突破,作為設計師來說都在不斷嘗試新的解決方案。

最近發(fā)現(xiàn)得物(毒)將多個優(yōu)惠券設計成左右滑動的動效形式,方便用戶關注到更多不一樣的優(yōu)惠券。將有效期設計成失效的倒計時,營造時間緊迫感,提高用戶的關注度和優(yōu)惠券的使用率。

[優(yōu)化輸出圖像]

 

02、突出品牌感的輪播 Banner 設計

輪播圖在產(chǎn)品設計中較為普遍,以推廣營銷活動為主。除了在 Banner 設計本身進行創(chuàng)意發(fā)揮以外,在 UI 布局層面也是設計師探索的方向。

得物(毒)在最近的一次新年活動中,利用品牌展示和輪播 Banner 相結合進行布局呈現(xiàn),不僅突出活動主題,也強化了活動品牌的曝光度。除了自動輪播之外,也可以點擊品牌卡片切換,操作也是非常便利。Banner 底部卡片的展示也能讓用戶在當前視野中瀏覽到其他品牌,提高了更多品牌的曝光度。

圖片

 

 

03、多種分類下的輪播設計

單輪播設計較為普遍,當我們遇到按照不同類別輪播類別內(nèi)的內(nèi)容時,如何處理好類別的樣式和輪播的呈現(xiàn)方式呢?相信這個設計解決方案是一個不錯的思路。

網(wǎng)易云音樂 APP 播客欄目中,隨心聽 FM 除了卡片輪播以外,下方設計了音樂類別的選擇,模擬調(diào)頻場景設計,操作不僅非常便利,感官體驗也是非常不錯。背景顏色也會隨著類別切換進行微變化,帶給用戶非常自然的視覺過度。

[優(yōu)化輸出圖像]

 

 

04、通過手勢拖拽隱藏紅點提示

紅點效應從強迫癥已經(jīng)開始過度到治愈期,不過針對信息列表較多的部分,紅點提示太多也是非常干擾用戶體驗的。

在 MOMO 陌陌 APP 消息欄目中,如果你覺得紅點提示消息過多時,可以通過拖拽紅點隱藏顯示,無需挨個刪除或者閱讀。配合微動效的設計表現(xiàn),帶給用戶非常流暢自然的操作體驗,借助手勢交互的設計提升用戶體驗。

圖片

 

05、右滑手勢探索新的世界

手勢交互設計在產(chǎn)品中逐漸得到應用,可以在有限的空間里面探索更多的互動體驗,帶給用戶更加便利的操作體驗。

最近研究手勢交互的時候,發(fā)現(xiàn) MOMO 陌陌 APP 首頁右滑即可開啟新功能,探索新的世界,吸引用戶前往這個小宇宙去探索。

圖片

 

06、刷新設計的情感化表達

把簡單的功能做到極致,把重復的動作做到更有情感化。想要抓住用戶的情感共鳴,就要在細微之處帶給用戶更有情感化的體驗。

喜馬拉雅 APP 在下拉刷新時,不是固定的文案提示,針對這個動作設置了不一樣的文案提示。每一次刷新都會展示不一樣的文案,讓用戶感受到這是一個有溫度的產(chǎn)品,情感化設計的表達提高了用戶的情感共鳴。

圖片

 

07、融入春節(jié)元素的金剛區(qū)設計

春節(jié)元素融入到 UI 設計中近期出現(xiàn)了很多案例,在金剛區(qū)圖標設計中的表現(xiàn)尤為突出,帶給用戶情感化的場景代入感。

自如 APP 就將春節(jié)中的元素融入到金剛區(qū)的圖標設計中,帶來的感官體驗也是非常不錯的。運用到的元素涉及鞭炮、福字、元寶、紅包、糖葫蘆等等,結合中國紅營造出濃厚的春節(jié)氛圍。

圖片

 

08、醒目的引導提示設計

針對新業(yè)務或者新功能的新手引導設計,有助于提高用戶對于內(nèi)容的熟悉度,也能降低摸索學習的成本。

記賬城市 APP 在打開應用時,會在底部彈出新增的一些功能或者交互玩法。通過俏皮可愛的卡通形象以對話式的形式傳遞內(nèi)容,降低了用戶的學習成本,一目了然且不會形成對主功能區(qū)域的干擾。

圖片

 

09、用設計為北京冬奧會加油

最近比較熱門的話題就是北京冬奧會了,各大品牌都在不同的渠道通過各種形式進行曝光,借助營銷策劃或者單純的加油祝賀,為北京冬奧會的舉辦增添色彩。

高德地圖 APP 在地圖主頁添加火炬元素突出冬奧主題,點擊會展開“點燃昂揚斗志,中國隊加油”。保持當前結構的基礎上,通過元素的添加達到主題的突出,既不干擾用戶操作,也能通過情感化的設計與用戶產(chǎn)生共鳴。

圖片

 

 

10、游戲化的簽到積分設計

簽到掙積分獲取相應的獎勵,在產(chǎn)品中較為常見,特別是電商類產(chǎn)品。隨著這種形式的普及,起初的新鮮感逐漸減少,有差異和創(chuàng)意的表達方式才能吸引用戶的關注度。

得物(毒)結合游戲化的形式表達簽到和領取積分的設計,通過積分換取優(yōu)惠券和禮品等。積分采用極光的形式表達,不足的情況下可以通過“找極光”獲取,激發(fā)用戶的參與度。

圖片

 

 

小結

從感官體驗的角度體驗產(chǎn)品,總結了在 UI 設計視覺層面的解決方案,有助于提高 UI 設計師的視覺表現(xiàn)能力。對比相同功能的不同視覺表達,總結優(yōu)秀的設計呈現(xiàn)方案,希望這個欄目可以帶給你更多幫助!

 

原文地址:黑馬家族(公眾號)
 
作者:黑馬青年
 
轉載請注明:學UI網(wǎng)》【軟件界面設計】近期觀察到的 UI 設計表現(xiàn)技巧

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


【軟件界面設計】這個風格的詳情頁,我真的很喜歡??!

seo達人


艾美特官方旗艦店 丨 石墨烯取暖器 
 
圖片
圖片  
圖片   
 
圖片 
 
圖片
圖片圖片圖片圖片 
 
圖片  
圖片 
 
圖片
 
圖片
ps:案例來源于網(wǎng)絡,僅做交流分享,侵權必刪  
  
 
原文地址:三個小美工(公眾號)  
作者:three  
轉載請注明:學UI網(wǎng)》【軟件界面設計】這個風格的詳情頁,我真的很喜歡!!

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


量化用戶研究:可用性測試

seo達人


WHAT? 什么是用戶研究?

用戶研究聽起來是個非常大的學科和話題,沒有具象的描述和切實的研究方法就顯得虛無縹緲,讓人有種霧里看花的感覺。用戶研究和用戶體驗一樣,在國外市場得到驗證、認可并被不同行業(yè)的企業(yè)所接受,而國內(nèi)市場處于萌芽階段,只有部分行業(yè)的頭部企業(yè)對其有較為清晰的認知和應用。

那么怎么定義用戶研究?首先,用戶研究的目的是了解用戶,對用戶有更清晰、具象的畫像,是一系列研究方法的概括型的名稱。聚焦互聯(lián)網(wǎng)行業(yè),什么崗位的同學最需要關注和學習用戶研究方法?與用戶、數(shù)據(jù)打交道的崗位需要對相關用研方法和分析方法有不同程度了解和應用能力,例如,用戶研究員、市場研究員、數(shù)據(jù)分析師、產(chǎn)品經(jīng)理、體驗設計師、交互設計師等等。作為體驗設計師或交互設計師,可以通過研究方法對用戶目標、需求和能力的系統(tǒng)研究,用于指導設計、產(chǎn)品結構或者工具的優(yōu)化,提升用戶工作和生活體驗。

圖片

 

HOW? 怎么做用戶研究?

研究中包含的用研方法有很多,可以根據(jù)實際場景和資源選擇適合的方法,目前常用的實用性、可操作性比較強的四大方法:可用性測試、網(wǎng)站訪客(埋點數(shù)據(jù))、用戶調(diào)查、A/B Test。在設計過程中的每個階段,用戶研究是都需要做的工作,但很多時候由于工期較短,deadline在前,設計師在產(chǎn)品設計初期沒有辦法做到較為完善的用戶研究,那么這部分工作就會被延后,在驗證階段研究任務就會變得比較重,后期的優(yōu)化對此依賴性也比較強。可用性測試是設計師在驗證階段相對比較能貼近用戶的用研方式,在測試過程中通過觀察用戶行為,從即時的反饋中更容易獲得貼近真實的定性數(shù)據(jù),用對話溝通的方式深度挖掘用戶遇到的問題,從而鎖定優(yōu)化重點。

圖片

 

1、了解可用性測試

1.1 可用性測試的優(yōu)勢

可用性測試是確定用戶是否完成目標的核心方式,它與其他用戶研究方法有許多相同的測試指標,并且能夠得出較多可用的定性數(shù)據(jù),可以收集的數(shù)據(jù)類型也比較多,例如,完成率、出錯數(shù)、任務時間、任務水平的滿意度、測試水平的滿意度、尋求幫助的次數(shù)和可用性問題清單,這些數(shù)據(jù)極大的便利了后續(xù)的分析工作,幫助多維度的判斷產(chǎn)品的狀態(tài)、用戶的滿意度、體驗問題等等。

 

1.2 可用性測試的類型

可用性測試可以分為兩種測試類型:形成性測試(Formative Test)和總結性測試(Summative Test)

 

1.形成性測試:主要作用于查找與修復可用性問題,提供及時反饋便于改進,是設計師重點參與的測試類型

  • 通常以小樣本量的定性調(diào)查
  • 數(shù)據(jù)以問題描述和設計建議形成輸出
  • 采用頻率和嚴重性為指標量化問題,追蹤那些用戶用到什么樣的問題,衡量完成任務時長,并判定他們是否成功的完成任務等

 

2.總結性測試:用指標度量可用性,用來評估效果,其中又分為基準測試和比較測試

圖片

 

1.3 可采集的數(shù)據(jù)

樣本量:通常大于30,當數(shù)據(jù)量小于10可通過統(tǒng)計學方法計算得到有效統(tǒng)計分析結論

代表性:樣本能夠代表預期要描述的用戶群,若存在不同用戶群組中有重要差異因素的使用分層抽樣(Stratified Sampling)的方式

隨機性:考慮所有重要變量,設計理想樣本,合理合并用戶群組

測試數(shù)據(jù):現(xiàn)場/遠程測試,觀察記錄用戶用戶行為,與用戶互動深入挖掘問題

完成率:即成功率,完成=1、失敗=0,完成率=完成任務用戶數(shù)/用戶總數(shù)

可用性問題:根據(jù)問題出現(xiàn)的頻率和影響程度評估嚴重性、優(yōu)先級

任務時間:任務完成時間、直到用戶失敗所用的時間、任務總時間

出錯數(shù):嘗試任務產(chǎn)生的無意識的出錯數(shù)量,診斷失敗原因,預判可能出現(xiàn)的場景

滿意度評分:使用標準化可用性問卷,回收數(shù)據(jù)計算得出

復合分數(shù):復合型總結可為用戶體驗提供更好的總體描述

 

2、可用性測試問卷

經(jīng)過長期的研究和市場驗證,目前已沉淀出很多標準化的可用性問卷,不同的問卷的評估針對性不一樣,可以滿足大部分用研需求。使用標準化的問卷是因為這些問卷是經(jīng)過大量的使用后驗證校準后產(chǎn)生的,是被認可具有通識性的衡量標準,這些問卷都具備客觀性、重復性、量化、經(jīng)濟、溝通、科學的普適性的優(yōu)質(zhì)屬性。

 

2.1 標準化的可用性測試問卷

問卷類型主要可以分為以下兩大類:

圖片

列表中的問卷大部分是需要繳納一定的費用后才能使用,但其中系統(tǒng)可用性整體評估問卷、軟件可用性問卷、場景后問卷是標準可用性問卷中可以免費使用的。應用廣泛且被專家推薦的測試問卷是:軟件可用性問卷主要針對系統(tǒng)或功能進行整體評估,問題設計精煉清晰,使用快捷方便;單項難易度問題追求的是心理測試的簡單和適用性,有5分和7分制,7分制的可靠性更高;主觀腦力負荷問題是在線測試,靈敏性更好。綜合評估下,軟件可用性問卷(Software Usability Scale,SUS)是設計日常中最合適最經(jīng)濟實用的測試問卷。

 

2.2 軟件可用性問卷(SUS)

軟件可用性問卷是可用性測試結束時的主觀性評估問卷,應用廣泛,測試后該問卷使用占比約43%。整個問卷共10題,每題為5分制,奇數(shù)項為正面描述,偶數(shù)項為反面描述,可以通過修改問題文案聚焦測試范圍;如有需要可以將偶數(shù)項的問題調(diào)整為正面描述,但數(shù)據(jù)驗證調(diào)整為正面描述的問卷結果與包含負面描述的問卷差異不大,不影響問卷的測試結論。在完成測試任務后,用戶需快速完成各個題目,不進行過多思考,若用戶因某些原因無法完成其中某個題目,則視為選擇中間值。

圖片

 

2.3 可用性、易用性抽取

問卷整體可以抽取部分題目作為子測量表來作為單獨的問卷有針對性的進行可用性和易學性測量,可用性由問卷中1-3、5-9題構成,易學性由問卷中4、10題構成。研究表明使用子測量表對量表的可信度的減低可忽略不計(0.92  → 0.91),并且使用子測量表可減少答題時間。

 

2.4 分值計算

得分計算:范圍在0-4,每題進行轉化分值;奇數(shù)題(正面):原始分減去1,(x-1);偶數(shù)題(負面):5減去原始分,(5-x)

  • SUS總分= 所有轉化過的分值相加 * 2.5, 多樣本算SUS總分均值
  • 可用性總分=所有轉化過的可用性分數(shù)相加*3.125
  • 易用性總分=所有轉化過的易用性分數(shù)相加*12.5

 

3、統(tǒng)計學描述方法

可用性測試因為耗費時間較長,能夠參與測試的用戶資源稀缺,回收樣本量小能夠收集到的樣本量一般會比較小。樣本量小的情況下這個樣本量所能概括的整體是范圍比較大的,會存在較大誤差,那么在較為嚴謹?shù)膱蟾嬷?,可能需要對所得分?shù)和除測試樣本外的分值預期進行描述,這時候會涉及到統(tǒng)計學中常用的描述方式,即通過置信度及置信區(qū)間來描述,根據(jù)置信區(qū)間的下邊界看軟件是否低于行業(yè)標準。

 

3.1 相關概念

置信區(qū)間是指在一定概率下包含樣本位置總體參數(shù)的這部分數(shù)值區(qū)間,通過計算置信區(qū)間來描述測試結果的概率。置信區(qū)間寬度和樣本量之間是一個逆平方根的關系, 樣本量越小,誤差越大,未知樣本數(shù)據(jù)可能所在的區(qū)間更大。

置信度就是說,你測得的均值,和總體真實情況的差距小于這個給定的值的概率,應該是1-α;換句話描述,即我們有1-α的信心認為,你測得的這個均值和總體的實際期望很接近了(測得的均值就是總體期望是很草率的,但是說,我有95%的把握認為我測得的均值,非常接近總體的期望了)。研究員可以選擇0%-100%之間的任意數(shù)值的置信度,通常設為90%或95%(最常用)。

臨界值是在原假設下,檢驗統(tǒng)計量在分布圖上的點,這些點定義一組要求否定原假設的值。

圖片

 

3.2 置信區(qū)間計算

置信區(qū)間= (樣本平均值-誤差幅度)~(樣本平均值+誤差幅度)=(x -(x- μ))~(x +(x- μ))

  • x = 樣本平均值
  • 誤差幅度=臨界值*(樣本標準差/樣本量的平方根),即:(x – μ) = α* (s / sqrt(n))
  • α=臨界值(Excel函數(shù)=TINV(1-置信度,樣本量-1))
  • μ=被檢驗的基準值(行業(yè)標準)
  • s=樣本的標準差(Excel函數(shù)=STDEVP(N1,N2,..))
  • n=樣本量

tips:臨界值可以通過所設置信度和樣本量在t分布表中查找相應的值

圖片

 

3.3 可用性測試策劃應用

在做可用性測試前,需要進行很多準備,過程中也需要記錄很多相關的信息,初步嘗試的設計師可以參照以下步驟完成可用性測試的整個流程:

  • Step1: 確定調(diào)研目標(目的、用戶、時間、環(huán)境)
  • Step2: 確定測試任務(任務內(nèi)容、測試方案、SUS問卷地址),任務內(nèi)容可以通過抽取用戶體驗地圖(User Journey Map)流程中的觸點設計,保證流程的完整性和任務的關聯(lián)性

圖片

  • Step3: 引導測試用戶完成可用性測試,過程中記錄測試時間、用戶遇到的問題、發(fā)生的頻率等等,記錄類型可以根據(jù)測試測中點進行記錄

圖片

  • Step4:  用戶填寫SUS問卷,回收問卷分數(shù)進行計算,得出SUS分數(shù)、可用性分數(shù)、易用性分數(shù)的均值作為本次測試的結論

圖片

圖片

  • Step5: 作為補充,可以計算SUS樣本分數(shù)的置信區(qū)間,預期未被測到的目標用戶對產(chǎn)品的評分可能落在的區(qū)間,區(qū)間下限可橫向?qū)Ρ?,看是否低于行業(yè)標準??梢悦枋鰹椤皹颖痉謹?shù)標準誤差約=5.34,置信區(qū)間為63.78~69.12;有95%的把握認為測得的均值接近總體期望,未測樣本分值將落在63.78~69.12之間,符合行業(yè)標準預期”。
  • Step6: 通過測試過程中觀察用戶行為,探討用戶提出或下意識忽略的問題,并進行問題的記錄和分類
  • Step7: 用戶訪談記錄問題進行解析,對問題的嚴重程度進行評級,選出問題較多的部分并提供可能的解決辦法進行優(yōu)化

圖片

  • Step8: 根據(jù)以上結論對測試進行總結性分析

 


 

原文鏈接:酷家樂用戶體驗設計(公眾號)

作者:藜漫

轉載請注明:學UI網(wǎng)》量化用戶研究:可用性測試

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

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



日歷

鏈接

個人資料

藍藍設計的小編 http://www.yvirxh.cn

存檔