首頁

好的單選框設(shè)計具備哪些特質(zhì)?把握住這些知識點!

lanlanwork


一、什么是單選框?

顧名思義,單選框表示只能選擇一個選項,再具體一點,可以理解為只能從一組相互排斥的選項中選擇其中一個選項。

單選框有選中和未選中兩種狀態(tài),樣式上用填充的圓表示選中,描邊的圓表示未選中,通過改變狀態(tài)來給用戶反饋。

圖片

▲ 常見的樣式是按鈕在左標簽在右,在結(jié)合特定的場景使用時,兩者的位置可以視情況靈活調(diào)換。

 

二、何時使用單選框?

除了單選框,選擇類組件還有很多其他形式,比如下拉列表、復選框等,我們首先來對比區(qū)分一下這幾個易混淆的組件。

 

單選框VS下拉列表

當用戶需要從大量選項中進行選擇時,為了節(jié)省空間,可以使用下拉列表代替單選按鈕。但是下拉列表將內(nèi)容都隱藏在下一層級中,需要用戶多做一次選擇,操作成本和認知成本都會變高

圖片

▲ 當選擇不多于3項,建議使用單選框,這樣選項可以直接展示出來,用戶只需要點擊選擇即可;當選擇超過5項時,可以考慮使用下拉列表,確保選項不會占用大量空間。

 

單選框VS復選框

復選框允許用戶一次選擇多個選項,選中其中一個選項,不會對其他選項產(chǎn)生影響。對于何時使用單選框還是復選框沒有明確的界定,需要具體問題具體分析。

圖片

▲ 這里提一個使用復選框時需要注意的小問題,比如在只有兩個選項時使用復選框,用戶可能會以為只需要從這兩個選項里面選擇一個,反而造成誤導。

 

三、單選框設(shè)計指南

始終確保良好的可用性

對于這樣一個簡單的組件,想要做好用好,在設(shè)計上有一些不可忽視的細節(jié)。

首先要避免在單選框列表中嵌套下一層級的選項,因為使用單選框的目的之一就是為了讓所有選項清晰呈現(xiàn)給用戶,嵌套過多層級會導致整個結(jié)構(gòu)的混亂。

圖片

▲ 另外要明確的是,單選按鈕不應(yīng)該是唯一可點擊的熱區(qū),而是要將按鈕和標簽一起作為熱區(qū),便于用戶準確點擊操作。

圖片

▲ 這個選擇模塊由單選按鈕、文字標簽和圖標共同組成,可操作的范圍很大,視覺層次也很清晰,設(shè)計得既整潔又實用。

 

保證可讀性

單選框列表的布局要有邏輯性,盡量減輕用戶的認知負荷。

圖片

▲ 用戶習慣于上下瀏覽選項和列表,如果將這些選項水平排布,可能會造成兩點問題:一個是瀏覽時視線移動的不習慣,另一個就是如果選項位置過于緊湊,用戶可能不知道每個標簽到底對應(yīng)哪個按鈕。

除了列表要垂直布局,標簽也需要很簡潔。標簽越長,用戶需要花費更多的時間和精力才能了解整個列表。

 

提供認選擇

想象這樣一個使用場景,我們下載了一個新的設(shè)計軟件,第一次打開時跳出一個彈窗,提示我們是選擇經(jīng)典布局,還是個性化布局,但是我們對這個軟件不是很了解,可能并不清楚這兩個布局到底是什么樣子。

圖片

▲ 在這種情況下,最好默認選中其中一個選項,這樣做一方面可以減輕用戶對于選項的糾結(jié),另一方面還能有目的地引導用戶使用。

 

最后

最后為大家精選了單選框設(shè)計樣式資源,學習好的單選框設(shè)計風格和樣式,獲取最新的設(shè)計靈感!

圖片

關(guān)注公眾號后臺回復【單選框】獲取設(shè)計文件。

 

原文地址:Clip設(shè)計夾(公眾號)

作者:Clippp

轉(zhuǎn)載請注明:學UI網(wǎng)》好的單選框設(shè)計具備哪些特質(zhì)?把握住這些知識點!

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



工作經(jīng)驗| B 端產(chǎn)品組件設(shè)計細節(jié)及經(jīng)驗分享(一)

lanlanwork


1、中性色色值為什么要使用透明度? 

有細心的用戶發(fā)現(xiàn),在 Ant Design 的設(shè)計規(guī)范里,中性色色值可以按照透明度來設(shè)置,見下圖中性色色值表(百分數(shù)代表不透明度):

圖片

平時大家似乎更喜歡使用 #333333、#666666 這種色值,那使用透明色有什么優(yōu)勢呢?

我們知道,中性色主要被大量的應(yīng)用在界面的文字部分,此外背景、邊框、分割線等場景中也非常常見。產(chǎn)品中性色的定義需要考慮背景以及有色背景的差異,同時結(jié)合 WCAG 2.0 標準。

現(xiàn)在  Ant Design 的色板中,透明色模式和實色模式都是有的。透明度模式可以做到背景色兼容。

如下圖示例,我們以顏色 gray-6 為例,這個顏色在實色模式的色值是 #BFBFBF,透明色模式的色值是 000000-25%。兩者在白色背景上的顏色完全相同,但是在灰色或其他顏色的背景上,卻有明顯差別:

圖片

因此在透明色模式下,以中性色為主的前景色,會與背景色有一個更明顯的色彩對比,對背景的兼容性也會更好,保證內(nèi)容的可讀性。

Ant Design 提供了透明色和實色兩種顏色模式供用戶選擇,也會使組件更具通用性。

 

2、組件和設(shè)計師之間的關(guān)系是? 

當下很多常見的、優(yōu)秀的組件庫,都為設(shè)計和開發(fā)的工作提供了便利。

圖片

那么使用組件庫可以替代設(shè)計師么?組件和設(shè)計師之間的關(guān)系又是什么呢?我個人觀點如下:

 

1 . 組件是「效率」工具

組件是工具,用來為設(shè)計師和開發(fā)提升工作效率。所有組件庫的初衷都不是要替代設(shè)計師,而是要提高整個團隊的工作效率。使用組件可以從兩個方面提效:

(1)工作內(nèi)容上:可以將不必要的、重復性勞動的時間節(jié)省出來

(2)工作流程上:便于設(shè)計師與前端開發(fā)做交接和協(xié)作,節(jié)省溝通成本

 

2 . 組件是「質(zhì)量」保障

使用組件做設(shè)計稿,可以在一定程度上保證工作質(zhì)量。組件規(guī)范了前端和設(shè)計師的工作方法,建立相對底層的系統(tǒng),設(shè)定了設(shè)計和開發(fā)的質(zhì)量底線。

圖片

基于組件規(guī)范設(shè)計和開發(fā)的產(chǎn)品更容易具備:

(1)一致性:具備相對一致的表現(xiàn)樣式,設(shè)計風格和交互體驗上均可保持統(tǒng)一

(2)可用性:對于用戶操作,可以保證最基本的可理解性和可操作性

(3)審美性:符合基本審美標準,雖不會很亮眼,但也不會很難看

 

3 . 設(shè)計師要「沉淀」業(yè)務(wù)組件

設(shè)計師可以嘗試沉淀有針對性的業(yè)務(wù)組件。很多業(yè)務(wù)領(lǐng)域有其獨特性,比如金融類組件和政務(wù)類的產(chǎn)品頁面列表內(nèi)容就有很大區(qū)別。單一的元素組件在應(yīng)用的過程中可以被再次組合和沉淀。

舉個例子,我之前在做業(yè)務(wù)需求設(shè)計時,相比于 AntD,其實更常用的是 TechUI —— 它是建立在 AntD 基礎(chǔ)上的、由我們螞蟻的設(shè)計師通過對業(yè)務(wù)需求的提煉、組合和封裝,做成的一套于螞蟻自己的【業(yè)務(wù)組件】

圖片

再總結(jié)下二者的區(qū)別:

– Ant Design:是所有人的,是通用的,是單一的原子級別的(比如一個輸入框)組件。

– TechUI:是螞蟻自己的,是私有的,是組合的區(qū)塊級別的(比如一整個表單)組件,更具備螞蟻集團自己的業(yè)務(wù)屬性。

圖片

針對你公司不同業(yè)務(wù)類型,沉淀出不同種類的區(qū)塊級別的組件,這類組件使用起來也會更加得心應(yīng)手、加倍提效。這也是 B 端設(shè)計師可以去學習和精進的一點。

 

4 . 設(shè)計師要「洞察」業(yè)務(wù)訴求

使用組件可以讓設(shè)計師把節(jié)約出來的時間和精力放到更多有價值的工作上去。作為 Ant Design 的設(shè)計師之一,坦白的說,即使你的設(shè)計稿全部使用了 Ant Design 的組件搭建,最終的頁面效果也仍不完善,在用戶體驗上始終可以更進一步。

設(shè)計師應(yīng)該更多去關(guān)注對用戶需求和業(yè)務(wù)邏輯的深入挖掘,不僅僅是在界面細節(jié)的表現(xiàn)手法上下功夫,還要學會站在全局,用系統(tǒng)性思維看待每一個項目,為整個產(chǎn)品的系統(tǒng)流程做優(yōu)化,做更全面的產(chǎn)品體驗升級。

 

原文鏈接:長弓小子(公眾號)

作者:元堯

轉(zhuǎn)載請注明:學UI網(wǎng)》工作經(jīng)驗| B 端產(chǎn)品組件設(shè)計細節(jié)及經(jīng)驗分享(一)

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


測試了新手指引方案,總結(jié)下失敗經(jīng)驗

lanlanwork


圖片

上圖來源:Monday

 

不要給用戶選擇

有些產(chǎn)品還挺重視新手指引的,準備了好幾個課程。

由于內(nèi)容太多,所以拆分出來展示給用戶,甚至讓用戶自己選擇。

圖片

圖片

上圖來源:Zendesk

 

例如上面的案例,雖然并沒有強制用戶手動選擇,光是新手指引的內(nèi)容列出來給用戶這件事情,已經(jīng)讓人壓力山大了。

其實用戶剛進來時,只想要利用新手指引快速上手,并不想要看到關(guān)于新手指引的介紹,更無法決定選擇什么新手指引。

如果真的不同人群的使用功能相差很大,那么直接根據(jù)對方情況提供相應(yīng)內(nèi)容即可。

這讓我想起了第一次在牛肉火鍋店點菜的情景,我這種牛肉小白用戶根本看不懂菜單,能不能給先上一份普通牛肉?

圖片

 

指引氣泡不需要標題

Windows 系統(tǒng)給界面設(shè)計帶來一個奇怪的習慣,那就是不管什么面板,都必須有一行標題。

圖片圖片

如果實在想不到用什么標題了,就把描述文字第一行拆出來做標題,甚至哪怕是用系統(tǒng) logo 占位,也必須要有標題!

這讓很多新手指引的氣泡,也習慣性地配一個標題。

如果標題就能直達主題也還好,但如果是為了占位了湊出來的,那可就太浪費用戶時間了。

圖片

 

不要強調(diào)跳過按鈕

科技產(chǎn)品改變了人們的生活習性,其中之一就是讓我們形成了條件反射:看到任何突然出現(xiàn)的彈窗和氣泡,快速點擊主按鈕并讓其消失。

后來因為移動端廣告彈窗的泛濫,現(xiàn)在已經(jīng)進化到了,看到彈窗先找 ? 了。

圖片

上圖來源:不要這樣用彈窗,真的很煩

 

很多新手指引的氣泡都會提供跳過按鈕,這樣做挺好的,因為有的用戶可能真趕時間。

但是如果跳過按鈕做得太強,就會激發(fā)用戶的條件反射,想都不想直接點跳過:

圖片

這個我嘗試過了,大腦真的控制不了自己,手速已經(jīng)跟膝跳反射一個級別了!

所以,這個跳過按鈕一定要做小一點,盡量不要激發(fā)用戶的條件反射:

圖片

 

只要不是單擊,就得有圖示

前面提到,千萬不要小看條件反射這個東西,這個是生物本能。

用戶最習慣的操作就是單擊,如果你指一個箭頭給他們,十有八九立即就上去點一下。

點一下不行,就多點幾下,實在不行就雙擊。

如果雙擊還不行,就直接放棄了。

大半人根本不會看到,旁邊赫然寫著「點擊鼠標右鍵」幾個字。

圖片

以上就是我多年做用戶測試的常見場景,總結(jié)就是:只要不是雙擊,就要有圖示,寫字根本沒什么用。

如果是右鍵,可以把鼠標畫出來:

圖片

如果是雙擊,可以給個動效:

圖片

如果是拖拽,除了操作對象之外,還要把目標位置高亮,并給一個指示箭頭:

圖片

沒錯,一定做要掃一眼就能懂的程度。

 

遮罩別太深

有些產(chǎn)品,為了讓更多用戶走完新手指引,會給操作對象和氣泡之外的部分加遮罩。

這樣沒什么不好,看起來還挺清晰的。

但是我發(fā)現(xiàn)有的新手指引遮罩太強,反而起不到學習的作用。因為用戶看不清界面整體的樣貌,還是記不住操作路徑,引導完后全忘了。

新手指引的遮罩,一定不要按照彈窗的遮罩標準去看。

因為有彈窗時,頁面的其他部分確實不用看了;但是新手指引需強調(diào)重點,界面其它部分最好還是能看到。

圖片

 

總結(jié)

把上面的幾點都集合在一張圖,對比一下:

圖片

這些問題,如果放在產(chǎn)品的一般功能上,也許不算什么。就算第一次出錯,下次也總能習慣。

但是新手指引不一樣,這是產(chǎn)品給用戶的第一印象,而且通常只出現(xiàn)一次,錯過就沒有第二次機會了。

這個步驟,也能直接影響到用戶的轉(zhuǎn)化意愿。

所以,新手指引真的要避免任何小問題,把體驗的標準往上高一點。

 

原文地址:體驗進階(公眾號)

作者:設(shè)計師ZoeYZ

轉(zhuǎn)載請注明:學UI網(wǎng)》測試了新手指引方案,總結(jié)下失敗經(jīng)驗

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



這逆天的效果,竟然是10秒鐘做出來的,真實大開眼界!

lanlanwork

莫b

圖片

圖片

圖片

再酷炫一點的,甚至可以讓3d動起來:

這樣的效果如果做成封面,是不是老帥了!

如果你不會動效也不會3d,沒關(guān)系,今天給大家介紹一個神奇,上面的3d動態(tài)效果非常多:

咔咔就是一頓選擇! 還有各種屬性各種調(diào)整:

圖片

調(diào)整出自己滿意的效果之后,文字往上面咔咔一放:

圖片

圖片

圖片

尤其是后面的元素是動態(tài)的:

這封面可不得了啊,做個匯報啥的,必須震懾一下老板,讓他尖叫就完了!
(我這個動態(tài)gif圖效果是用屏幕錄制,然后用ps把mov格式轉(zhuǎn)成gif的)

 

原文地址:菜心設(shè)計鋪(公眾號)
作者:菜心設(shè)計鋪
轉(zhuǎn)載請注明:學UI網(wǎng)》這逆天的效果,竟然是10秒鐘做出來的,真實大開眼界!

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)



B端產(chǎn)品C端化,抱歉我想的太簡單!

lanlanwork


為什么要 C 端化?

其實 B 端產(chǎn)品 C 端化,并不是因為傳統(tǒng)的 B 端產(chǎn)品沒 C 端好用(不是這么比的)。

其實關(guān)鍵還是獲客模式的轉(zhuǎn)變。

傳統(tǒng)的 B 端產(chǎn)品是銷售驅(qū)動,銷售人員通過電話、上門拜訪等形式促使客戶下單。

一旦成功賣出,只要后續(xù)的服務(wù)不太差,客戶就沒必要更換遷移。

現(xiàn)在 B 端市場越來越大、行業(yè)信息越來越透明、客戶的判斷能力越來越強,傳統(tǒng)銷售模式開始變?yōu)?/strong>互聯(lián)網(wǎng)營銷。

B 端產(chǎn)品在網(wǎng)上發(fā)布信息并投放廣告,吸引客戶自己前來試用并購買,只需提供少量客服人員即可。

這與以往的 B 端業(yè)務(wù)模式有很大不同,所以就需要變革。

所謂「B 端產(chǎn)品 C 端化」,表面上是學習 C 端的用戶體驗,背后的真正意圖是要學習人家 C 端的互聯(lián)網(wǎng)獲客能力。

圖片

 

怎樣才是好的 C 端化?

我發(fā)現(xiàn) B 端產(chǎn)品的 C 端化程度,和他們的互聯(lián)網(wǎng)廣告投放力度成正相關(guān)。

例如我在油管上經(jīng)常受到 Monday、GoDaddy 這兩款 B 端產(chǎn)品的輪番轟炸。

先不說好不好用(畢竟我也不是目標客戶),我發(fā)現(xiàn)他們用起來真的很有「C 端感」,和傳統(tǒng)的 B 端產(chǎn)品果真不一樣。

倒不是什么“輕量化、趣味性和人文關(guān)懷”,而是因為他們在我打開網(wǎng)站的那一刻,就開始不斷吸引我探索使用。

我拿 GitLab 和 Monday 的官網(wǎng)首頁對比一下,也許你就能感受到了:

圖片

前者像是一板一眼的「老實人」,后者則像是對你笑瞇瞇的「綠茶妹」,高下立判。

“輕量化、趣味性和人文關(guān)懷”這些東西,并不足以打動用戶試用和購買,頂多只能算是「低段位」手段。

只有「高段位」手段,才能讓用戶不自主地地被吸引,心甘情愿地掏錢。

可是要做到「高段位」真的很不容易,我今天就總結(jié)幾個技巧吧~

 

1. 直接坦誠

遇到兩個陌生人:一個打官腔又遮遮掩掩的;另一個說話友善接地氣又誠實,你會更喜歡哪個?

可能大多數(shù)人跟我一樣會喜歡第二個。

C 端化做得好的 B 端產(chǎn)品,會把自己的產(chǎn)品預覽圖直接放到首頁供人觀看,而不是搞一張概念圖外加一堆高大上的廣告詞。

前面放過的那張案例,這里也可能拿來用:

圖片

GitLab 的官網(wǎng)畫了一些很抽象的概念圖,寫了一些很抽象的描述,給人感覺很模糊。

Monday 的官網(wǎng)明確把自己的業(yè)務(wù)類型列了出來供用戶選擇,還把每種業(yè)務(wù)對應(yīng)的圖標和展示方式畫了出來,感覺很明確清晰。

 

2. 有效互動

遇到兩個健身房銷售:一個上來就說一個勁地介紹服務(wù);另一個則先確認你平時的健身習慣,再根據(jù)你的情況介紹服務(wù),你會更愿意聽誰說話?

我肯定更喜歡第二個。

C 端化做得好的 B 端產(chǎn)品,不是簡單地展示信息,而是先了解用戶,再根據(jù)用戶的需求提供不同的信息甚至服務(wù)。

圖片

Zendesk 的網(wǎng)站,會把自己的功能列出來給用戶,給的圖像和描述又很抽象,毫無互動感。

而 Asana 會讓用戶選擇自己需要的功能,并直接給出具體案例的界面展示圖。

 

3. 降低門檻

遇到商場逛街時遇到兩個陌生餐館,一家在二樓;另一家在一樓,你會愿意嘗試哪家?

肯定是第二個。

很多 C 端化做的好的 B 端產(chǎn)品,會把表單用彈窗的樣式放在產(chǎn)品上面,讓用戶感覺只要填寫完就能立即使用了

圖片

比起 Trello, Smartsheet 只是在表單展示了一下產(chǎn)品內(nèi)部,就讓用戶感覺門檻低了好多。

即便 Smartsheet 的新用戶后面發(fā)現(xiàn)背后那張圖真的這是一張圖而已,要填的一點不少,但這時都已經(jīng)快填完了……

 

4. 循序漸進

兩家陌生的兩家餐廳都把菜單擺出來了,一家的菜單寫得密密麻麻;另一家的菜單雖然菜品不多,但是推薦菜品和菜式分類很清晰,你會更愿意嘗試哪家?

我相信很多人都會更愿意嘗試后者。

C 端化做得好的 B 端產(chǎn)品,不會太在意自己的產(chǎn)品是不是看起來功能齊全,而是更在意用戶是否能夠很好的理解產(chǎn)品,不要造成心理負擔。

圖片

上圖來源:Figma這些交互細節(jié),B端設(shè)計也值得借鑒

 

Sketch 和 Figma 的屬性面板在功能上其實沒有很大的差異,但是后者看起來卻清晰簡潔許多,對新用戶更加友好。

 

總結(jié)

B 端產(chǎn)品 C 端化這個理念其實很好,但如果被誤以為只是向 C 端學習用戶體驗那就可惜了。

用戶體驗只是手段,關(guān)鍵目的是在沒有銷售人員參與的情況下,如何從互聯(lián)網(wǎng)獲客。

這次的經(jīng)驗的提醒我,以后如果再看到一些很火概念,不要簡單的從表面理解,而是要站在決策者的角度,多思考背后的真實意圖。

 

原文地址:體驗進階(公眾號)

作者:設(shè)計師ZoeYZ

轉(zhuǎn)載請注明:學UI網(wǎng)》B端產(chǎn)品C端化,抱歉我想的太簡單!

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


重新設(shè)計東南亞頭部在線超市的真實案例

lanlanwork


I. 發(fā)現(xiàn)

客戶訪談

由于這位甲方的合作態(tài)度良好,所以設(shè)計師有機會與 SESA 的創(chuàng)始人和產(chǎn)品經(jīng)理進行了 2-3 次會議。

借此了解了業(yè)務(wù)目標、用戶需求和技術(shù)限制等關(guān)鍵問題:

圖片

主要問題:

  • 低轉(zhuǎn)化率:雜亂的界面使用戶很難瀏覽商品。
  • 手機端體驗不友好:幾乎 90% 的用戶是通過手機訪問網(wǎng)站,但手機版的設(shè)計不夠理想。
  • 手機端糟糕的界面和體驗:目前他們使用的是現(xiàn)有的網(wǎng)站模板,根據(jù)目標用戶的反饋,缺乏優(yōu)化而且加載速度很慢。

客戶需求

  • 一鍵式購物
  • 輕松的界面和體驗
  • 無縫的商品搜索
  • 折扣和優(yōu)惠更容易被看到
  • 使用網(wǎng)站時能感覺熟悉而簡便

成功指標

  • 增加客單價
  • 增強人們的對品牌的認知感
  • 增加用戶和訂單數(shù)量
  • 無縫的體驗
  • 讓健康的生活方式更加受歡迎、評價、容易取得,更加有趣而美好
  • 提供并教育用戶健康的生活方式,并轉(zhuǎn)化為愉快美好的生活

 

目標人群

根據(jù)產(chǎn)品團隊提供的數(shù)據(jù),整理出了目標人群的特征:

圖片

 

II. 構(gòu)思

人物角色

根據(jù)以上信息,整理出了兩個完全不同的人物角色:

圖片圖片

 

故事版

沒有區(qū)分人物角色的故事版:

圖片

目標用戶的故事版:

圖片

 

體驗地圖

思考分析用戶旅程的五個階段(探索網(wǎng)站、比較商品、確認下單、完成購買和接收配送)和用戶感知的三個方面(行為、思考和感知),制作了體驗地圖:

圖片

將當中的關(guān)鍵信息挑選出來:

圖片

 

競品分析

設(shè)計師找到了三家主要競品,先大概了解他們的特色和優(yōu)勢:

圖片圖片圖片

然后從 Google Play 的評論中尋找競品的問題,這樣就可以思考如何戰(zhàn)勝他們:

圖片圖片

P.S. 評論分析是一種簡單有效的競品分析利器(也可以用來分析自己的產(chǎn)品),具體方法我之前有分享過:別總想著數(shù)據(jù)分析/用戶調(diào)研,先把評論分析做了吧!

 

III. 設(shè)計

信息導航

先把大致的用戶流程確定下來,這樣對整個產(chǎn)品就有了一個整體構(gòu)思:

圖片

 

線框圖

然后用手畫出線框圖,定下頁面的整體布局:

圖片

 

低保真

將線框圖手稿用繪圖軟件細化,制作成低保真方案,用來向客戶展示和做用戶測試:

圖片

圖片

 

IV. 完成

可用性測試

找用戶做測試時,用的是低保真可交互原型。

根據(jù)測試發(fā)現(xiàn)的問題,設(shè)計師直接將優(yōu)化方案運用到了高保真方案上,所以下面整理的問題都用高保真方案來配圖展示:

  • 1. 自動定位:測試之前用戶必須手動搜索位置。
  • 2. 屬性選擇:由于客戶想要一鍵式購物,所以當用戶點擊熟悉(通常是重量)右側(cè)的箭頭時,可以反轉(zhuǎn)卡片進行詳細選擇。

圖片

  • 3. 促銷展示:原本設(shè)計了三個促銷區(qū),但是測試中發(fā)現(xiàn)用戶面對大量的信息無法充分理解,所以移除了一部分,只保留了頭圖和分類優(yōu)惠。

  • 4. 商品導航:為了避免用戶迷路,將商品分類導航放在了所有頁面頂部,并且懸停時展示子分類和相關(guān)文章。

 

高保真

圖片

 

響應(yīng)式

這個網(wǎng)站需要具備很高的響應(yīng)式能力,不論在 PC 端還是手機端,都能輕松使用。

但由于 PC 端和手機端的尺寸相差太大了,所以不得不使用斷點(Breakpoint)來判斷用戶當前處在哪個端,并展示相應(yīng)的界面。

這個斷點的概念在柵格系統(tǒng)很常用到,指的是當界面尺寸縮小或增大到某個(或幾個)零界點時,間距大小或其它界面元素發(fā)生突變。

圖片

上圖來源:三種最主流的響應(yīng)式柵格

 

這個方案的對于移動端的特殊處理包括:

  • 確保商品分類的位置,方便用戶記憶
  • 使用漢堡菜單
  • 提供模仿原生 APP 的吸底導航

圖片

 

Before&After

最后對比一下優(yōu)化前后的方案:

圖片

圖片
圖片
圖片

圖片

 

原文地址:體驗進階(公眾號)

作者:設(shè)計師ZoeYZ

轉(zhuǎn)載請注明:學UI網(wǎng)》重新設(shè)計東南亞頭部在線超市的真實案例

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)




原子設(shè)計方法論!值得一學的設(shè)計思維模式

lanlanwork


1、什么是原子設(shè)計?

原子設(shè)計是創(chuàng)建設(shè)計系統(tǒng)的理論方法,分為原子、分子、組織、模板、頁面五個層次。從最基礎(chǔ)的原子開始,原子構(gòu)成分子,分子組成組織,相互協(xié)作以創(chuàng)造出更有效的頁面。

原子設(shè)計借鑒了化學中看待事物的方式,并將其應(yīng)用在數(shù)字產(chǎn)品中。例如我們看的界面是由一些基本的元素組成,文字,顏色和圖標等都是一個個原子。

圖片

原子設(shè)計是一種思維模式,并不特指某一種設(shè)計風格或框架。通過原子設(shè)計理論,將產(chǎn)品和頁面聯(lián)系為一個有機的整體,其中的每個小元素都發(fā)揮著至關(guān)重要的作用。

 

2、原子設(shè)計方法論: 從原子到產(chǎn)品

原子設(shè)計有特定的框架,方便幫助設(shè)計師組織思路并在設(shè)計過程中作為指導。

 

原子

原子指化學反應(yīng)不可再分的基本微粒,雖然基礎(chǔ)但會對分子和個體的形成產(chǎn)生很大的影響。

同理在設(shè)計中,原子是構(gòu)成設(shè)計的最基礎(chǔ)的元素,可以是一個icon、一種字體…本身不具備特有的功能但這些基礎(chǔ)元素同樣值得重視。

圖片

 

分子

分子由原子構(gòu)成,以一定的次序和排列方式結(jié)合成分子?;氐皆O(shè)計中,多個設(shè)計元素組合在一起,也會創(chuàng)造出一種新東西——具有明確功能性的組件。

圖片

原子設(shè)計強大的地方在于,可以為分子(組件)的創(chuàng)造分配時間,以確保組件具有明確的意義和功能。

 

組織

不同的分子組合形成組織,在設(shè)計中各種不同的組件組合在一起,形成一個完整的功能模塊,例如在首頁輪播圖模塊,有圖像、文字等元素,還有按鈕、導航箭頭等組件。

利用組織這個概念能幫助設(shè)計師建立模塊化意識,對頁面結(jié)構(gòu)有更深入的理解。

圖片

 

模板

通過元素、組件和功能模塊的相互關(guān)聯(lián),從而得到產(chǎn)品的模板即產(chǎn)品框架,也可以理解為產(chǎn)品的低保真線框圖。

圖片

在這個階段,產(chǎn)品的信息架構(gòu)和可視化的層次結(jié)構(gòu)變得非常重要。產(chǎn)品頁面、搜索結(jié)果頁、主頁等都有各自的模板,會顯示內(nèi)容的結(jié)構(gòu)和基本的原型,方便后期使用。

 

頁面

在模板基礎(chǔ)上,繼續(xù)添加需要的細節(jié),最終會形成完整的頁面,即產(chǎn)品的高保真原型。

這個階段中需要注意的是,頁面中所有的占位符盡可能提供真實的內(nèi)容——真實的圖像、真實的文案。

圖片

對于完成的頁面,我們可以利用原子設(shè)計的靈活性來調(diào)整和優(yōu)化頁面設(shè)計。

比如當有某些地方的設(shè)計沒有達到預期,可以靈活調(diào)整頁面中的某個分子或組織模塊來實現(xiàn)想要的效果。

 

3、原子設(shè)計的優(yōu)勢

靈活性和適應(yīng)性

原子設(shè)計是在設(shè)計過程中構(gòu)建事物的方式,但它并不限制對環(huán)境變化做出反應(yīng)的自由。

通過為產(chǎn)品中的每種類型的內(nèi)容創(chuàng)建組件和模式,獲得一個靈活的系統(tǒng)。模板為產(chǎn)品的一致性提供了一定的支撐,后期既可以按這些模板原型快速設(shè)計,也可以根據(jù)需求靈活調(diào)整。

原子設(shè)計相當于將設(shè)計內(nèi)容納入到一個模式里,組成的頁面不僅擁有準確的內(nèi)容,并能以最好的樣式展現(xiàn)出來。

圖片

 

系統(tǒng)模式

原子設(shè)計鼓勵設(shè)計師投入時間和精力來創(chuàng)建整個系統(tǒng),以便在產(chǎn)品設(shè)計的最后階段,能夠以一種高效的方式靈活地完成設(shè)計工作。

圖片

 

更少的組件,更高效的開發(fā)

利用原子設(shè)計可以確保在項目過程中組件的數(shù)量會受到一定的控制,避免團隊重復設(shè)計同一個組件的多個版本或提供樣式差不多的副本。

圖片

控制UI組件的數(shù)量,帶來的好處之一就是開發(fā)的效率會變得更高。有了以原子設(shè)計方法為基礎(chǔ)的理論架構(gòu),設(shè)計過程的每個環(huán)節(jié)會緊緊串聯(lián)在一起,避免混亂。

 

最后

原子設(shè)計成為一種用戶體驗設(shè)計方法,以全新的方式帶領(lǐng)大家設(shè)計每一個元素、組件以及頁面,通過這樣的方法論有助于設(shè)計師構(gòu)建一個完整的設(shè)計系統(tǒng)。

 

原文地址:Clip設(shè)計夾(公眾號)

作者:Clippp

轉(zhuǎn)載請注明:學UI網(wǎng)》原子設(shè)計方法論!值得一學的設(shè)計思維模式

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)



2021 必備的超贊神器,用上它,效率都要提升三倍!!

lanlanwork


圖片
上圖就是這個神器制作出來的一些效果,之前看Dribble上面有很多類似的設(shè)計,現(xiàn)在終于知道它們大部分來源于這個神器。
下面我也找了一些案例,大家一起來看看。
圖片
圖片
圖片
這樣看,效果還是真的不錯,它支持顏色修改、樣式修改,目前一共有11種幾何樣式。
圖片
好了,現(xiàn)在下面正式介紹這個傳說中的神器,我相信大家一定會喜歡上的。
圖片
上圖就是這個神器的基本外貌,一共11種基礎(chǔ)類型,當點擊其中一個進去后,可以進行編輯。
這里我點擊上圖中的第二個模式(MIXTAPE)進去。
圖片
如果大家英文不好,可以將整個頁面翻譯成中文,Google自帶的翻譯。
進入這個頁面,大家可以根據(jù)自己喜歡的風格調(diào)整樣式,同時還可以修改顏色。
圖片

比如我可以選擇8X12列和行的幾何布局。

圖片
對顏色、列和行、開啟陰影調(diào)整,得到如上效果。
圖片

最終可以導出一張高清大圖(3240X4860),尺寸是完全夠用的。

圖片

隨便調(diào)整下又是一張不錯的幾何背景,還可以作為作品集封面。好了,關(guān)鍵時刻來了,神器的網(wǎng)址已經(jīng)打包好,大家可以拿去使用。

領(lǐng)取方式如下:添加小編微信,備注:神器699,小編會將下載地址發(fā)給你(小編不是機器人,回復會慢一些,大家稍等)。

 

原文地址: 功夫UX(公眾號)
作者: 功夫UX

轉(zhuǎn)載請注明:學UI網(wǎng)》2021 必備的超贊神器,用上它,效率都要提升三倍??!

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)



需求太碎?設(shè)計師如何在小業(yè)務(wù)中提煉價值

lanlanwork


Chapter One .
理清小業(yè)務(wù)的業(yè)務(wù)目標

相對于大業(yè)務(wù)(例如網(wǎng)站改版),小業(yè)務(wù)因為簡單,其業(yè)務(wù)目標界定常容易被忽略。在日常設(shè)計中常會遇見設(shè)計師在不知道業(yè)務(wù)目標是什么、目標模糊、目標不正確的情況,直接從梳理小業(yè)務(wù)具備哪些功能入手,分析下現(xiàn)狀問題后開始制定設(shè)計策略,這往往會導致設(shè)計出現(xiàn)解決不了關(guān)鍵問題、出現(xiàn)偏差情況。產(chǎn)品功能本身只是滿足用戶需求和實現(xiàn)業(yè)務(wù)目標的服務(wù)載體,只是策略的表象。理清小業(yè)務(wù)所承擔的業(yè)務(wù)目標是前提,那么如何理清呢?

 

理清業(yè)務(wù)目標

小業(yè)務(wù)目標來自大業(yè)務(wù)目標,對大業(yè)務(wù)的業(yè)務(wù)目標進行一級級向下拆解后,即可獲得小業(yè)務(wù)對應(yīng)的目標。目標拆解需要遵循MECE原則,拆解方法包含:二分法、過程法、要素法、公式法、矩陣法。(tips:目標的拆解有一定難度)

圖片

Dapp設(shè)計詳情為例,在酷家樂大增長業(yè)務(wù)背景下,用戶活躍和用戶留存為核心的目標,設(shè)計詳情處于設(shè)計路徑的一個節(jié)點,拆解得到設(shè)計詳情的5個主要業(yè)務(wù)目標:

  • 設(shè)計詳情-用戶周活躍
  • 設(shè)計詳情-新用戶留存
  • 設(shè)計詳情-老用戶留存
  • 設(shè)計詳情-內(nèi)容投稿數(shù)
  • 設(shè)計詳情-內(nèi)容分享數(shù)
圖片

業(yè)務(wù)目標可分為2個類別:

  • 第一類別:符合用戶意愿,如活躍、留存,在滿足用戶需求的情況下可以自然達成;
  • 第二類別:不符合用戶意愿,如內(nèi)容投稿、內(nèi)容分享,用戶不太會主動去完成,需要去創(chuàng)造動機,激勵用戶進行。

 

Chapter Two .
挖掘小業(yè)務(wù)關(guān)聯(lián)的用戶需求場景

有小業(yè)務(wù)的業(yè)務(wù)目標后,第二步就需要給用戶提供價值滿足用戶需求,以此來實現(xiàn)業(yè)務(wù)目標的達成。梳理清楚小業(yè)務(wù)服務(wù)了哪些用戶需求是提供價值的前提,那如何獲取用戶需求場景呢?

 

用戶訪談——獲取相關(guān)用戶需求場景

用戶需求場景可以幫我們清晰了解到用戶使用產(chǎn)品的原因。用戶需求場景可以一句話進行界定,包含四個關(guān)鍵要素,其中需求本身最為核心,需要挖掘出當前訴求和其背后的潛在需求。

“在【某環(huán)境下】,【某用戶】做了【某事】來滿足【某需求】”

圖片

用戶訪談為了挖掘到更為深入用戶需求場景的要素信息。以設(shè)計師入行年限分組(1-3年、3-5年、5年以上),每次分組訪談2-3個設(shè)計師。梳理出設(shè)計詳情相關(guān)的8個需求場景:

圖片

訪談信息整合如下

圖片

 

規(guī)整用戶需求場景

在業(yè)務(wù)訪談中獲取的場景往往都是碎片化的,碎片化場景對設(shè)計指導容易出現(xiàn)偏差,需要把場景結(jié)構(gòu)化,為后續(xù)的方案設(shè)計提供依據(jù)。我把獲得的場景按照設(shè)計師設(shè)計流程進行規(guī)整,按設(shè)計前、設(shè)計中、設(shè)計后三個階段進行劃分。

圖片

以上梳理了設(shè)計詳情相關(guān)的用戶需求場景,再來看原設(shè)計詳情只基礎(chǔ)滿足了資料管理和方案展示的2個單一場景,在設(shè)計師的整個設(shè)計流程中只占了一部分。從設(shè)計層面來看,該2個場景局限在方案設(shè)計大場景中,設(shè)計更多做的是對其方案設(shè)計操作的體驗優(yōu)化,在原有較好操作體驗的現(xiàn)狀下,其對給用戶創(chuàng)造價值上沒有很大增量。再從以上業(yè)務(wù)目標來看,2個單一場景很難去促使用戶對內(nèi)容進行分享和投稿。

 

Chapter Three .
梳理產(chǎn)品功能矩陣

在理清小業(yè)務(wù)的業(yè)務(wù)目標和需求場景后,下一步就是按照場景去梳理產(chǎn)品能力。

 

小業(yè)務(wù)功能現(xiàn)狀分析

老版app設(shè)計詳情的功能進行初步的現(xiàn)狀分析,設(shè)計詳情包含渲染、圖文編輯、圖片管理、投稿、分享5個主要功能。從需求場景來看,多個場景無法實現(xiàn),如營銷、談單;從業(yè)務(wù)目標來看,通過當前功能有較大的優(yōu)化空間,如當前投稿很難讓用戶知道投稿有什么價值。

圖片

 

產(chǎn)品能力梳理

分析現(xiàn)狀發(fā)現(xiàn)功能不足以支撐用戶需求場景,有獲取功能2個方向:

  1. 挖掘現(xiàn)有能力:可以擴大梳理范圍,從小業(yè)務(wù)所在的上一級業(yè)務(wù)到整個平臺,一級級往上梳理場景對應(yīng)的現(xiàn)有功能。
  2. 打造新能力:圍繞場景,打造出新的功能

圖片

挖掘平臺上現(xiàn)有能力,可對業(yè)務(wù)的能力價值最大化利用,與其他業(yè)務(wù)形成互通,實現(xiàn)1+1大于2的業(yè)務(wù)價值。亦可圍繞場景打造新能力,可反推產(chǎn)品去發(fā)倔新功能。

以下是設(shè)計詳情涉及所有場景的產(chǎn)品功能矩陣,從平臺獲取到了很多全新的能力,以及對原有的能力進行了能力拓展。

圖片

 

Chapter Four .
拆解每個場景的設(shè)計目標和策略

在梳理出產(chǎn)品能力后,需要通過設(shè)計策略把產(chǎn)品能力有效組織起來,讓用戶快速感知快速上手使用。設(shè)計策略推導自設(shè)計目標,那如何得到設(shè)計目標?

基于用戶需求場景將行為事件拆分,提煉行為事件再推導出設(shè)計目標,再基于設(shè)計目標給出設(shè)計策略。

圖片

Dapp設(shè)計詳情受制于移動端能力,只涉及設(shè)計詳情中5個相關(guān)場景,其設(shè)計目標和設(shè)計策略的拆解結(jié)果如下

圖片

拆解出設(shè)計目標后,基于目標分析產(chǎn)品現(xiàn)狀得到存在的設(shè)計問題。為什么要基于目標分析現(xiàn)狀?首先需要明確什么是問題,問題是導致目標和現(xiàn)狀不一致的原因。只有明確了目標才可以理性分析與現(xiàn)狀存在多少問題。在日常中時??吹皆O(shè)計師會直接得到問題,很多情況是默認假設(shè)了一個預設(shè)目標,但這目標得到不嚴謹、不全面,容易導致得到的問題本身也出現(xiàn)偏差。設(shè)計策略基于設(shè)計目標或問題得出,其最終都來自設(shè)計目標。

圖片

對老版Dapp設(shè)計詳情現(xiàn)狀進行了分析,得到了問題:

圖片

 

Chapter Five .
設(shè)計策略落地

在上一步得到設(shè)計策略后,圍繞著設(shè)計策略是設(shè)計方案。本段將不全部展開說明,只選3個關(guān)鍵點講述設(shè)計方案的思考

 

設(shè)計詳情框架的設(shè)計

Dapp設(shè)計詳情涉及5個場景的承載及產(chǎn)品功能繁多,設(shè)計三步思考:

第一步:簡化功能認知,對功能結(jié)構(gòu)化,以場景的維度重組織功能,并以場景打造功能集合的認知,建立場景能力區(qū);

第二步:梳理場景共同涉及的內(nèi)容,作為聯(lián)系的載體承載場景的放置,設(shè)計詳情中展示態(tài)的方案涉及到了5個場景中的4個場景;

第三步:提取場景中即時性和高優(yōu)先級功能,打造快捷功能區(qū)

框架如下:

圖片

建立框架后,填充具體的能力和內(nèi)容。如場景入口放置于底部,并根據(jù)場景優(yōu)先級做了主次的區(qū)分。

圖片

設(shè)計詳情框架建立后,打造細分場景中的設(shè)計。

 

營銷獲客場景設(shè)計

營銷場景的設(shè)計,將營銷組成拆分為可營銷內(nèi)容、營銷的渠道、渠道內(nèi)容展現(xiàn)三大類,就可以清晰去梳理出現(xiàn)有的功能,以及可從內(nèi)容、渠道各自去拓展挖掘。內(nèi)容和渠道清晰后,再傳達各渠道提供的價值激勵用戶去觸發(fā)行為。

圖片

 

談單場景設(shè)計

談單場景關(guān)鍵在方案詳情上,談單面對不同情況,存在多種內(nèi)容形式去展示方案。在上面內(nèi)容梳理中最主要是3個內(nèi)容:圖文方案、全屋漫游、渲染圖冊。在方案詳情中,頭部承載了全屋漫游、圖冊,如圖文方案過于繁瑣可直接點擊全屋漫游圖進行講解,亦可點擊封面進入圖冊直接圖片說明。圖文詳情加上了房間切換的導航,可快速切換到需要講解的地方。

 

Chapter Six .
上線驗證

上線后數(shù)據(jù)平穩(wěn)后觀測,設(shè)計詳情的周活提升了89%,每個場景下的功能數(shù)據(jù)都得到顯著的提升(tips:有部分數(shù)據(jù)因技術(shù)原因沒有采集到)。除了改版了Dapp側(cè)的設(shè)計詳情,后續(xù)對PCweb側(cè)的設(shè)計詳情進行迭代,同樣起到不錯的結(jié)果。數(shù)據(jù)的結(jié)果驗證了方法的可行,并起到了積極的效果。

圖片

 

Chapter Seven .
思考小結(jié)

以上是我應(yīng)用這套設(shè)計方法去做了塊小業(yè)務(wù)優(yōu)化,反向推動進入產(chǎn)品迭代,上線后取得了不錯的成績。在本次賦能后,對小業(yè)務(wù)中多了一些感悟

  • 小業(yè)務(wù)是大業(yè)務(wù)的縮影,可以作為去賦能大業(yè)務(wù)前沿驗證的實驗田,大概率可以快速驗證自己的想法,即使方向錯了因為小業(yè)務(wù)改動影響面也小
  • 因知識廣度和深度的限制,不是所有設(shè)計師都可以一開始就可以把控大業(yè)務(wù),小業(yè)務(wù)可作為打磨設(shè)計深度專業(yè)度,一些小業(yè)務(wù)的復雜度并不低于大業(yè)務(wù)
  • 該設(shè)計方法同樣適用于大業(yè)務(wù),但方法是死的,不是所有情況都套用,得需要把握重點靈活應(yīng)用
  • 不要總想著搞個大新聞,在能力未被業(yè)務(wù)方認可時,小業(yè)務(wù)的賦能可以成為一個很好的發(fā)聲口
  • 不要輕視小業(yè)務(wù),有可能是你根本還不了解

以上內(nèi)容,感謝閱讀!

 

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

作者:小波

轉(zhuǎn)載請注明:學UI網(wǎng)》需求太碎?設(shè)計師如何在小業(yè)務(wù)中提煉價值

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


重新設(shè)計東南亞頭部在線超市的真實案例

lanlanwork


I. 發(fā)現(xiàn)

客戶訪談

由于這位甲方的合作態(tài)度良好,所以設(shè)計師有機會與 SESA 的創(chuàng)始人和產(chǎn)品經(jīng)理進行了 2-3 次會議。

借此了解了業(yè)務(wù)目標、用戶需求和技術(shù)限制等關(guān)鍵問題:

圖片

主要問題:

  • 低轉(zhuǎn)化率:雜亂的界面使用戶很難瀏覽商品。
  • 手機端體驗不友好:幾乎 90% 的用戶是通過手機訪問網(wǎng)站,但手機版的設(shè)計不夠理想。
  • 手機端糟糕的界面和體驗:目前他們使用的是現(xiàn)有的網(wǎng)站模板,根據(jù)目標用戶的反饋,缺乏優(yōu)化而且加載速度很慢。

客戶需求

  • 一鍵式購物
  • 輕松的界面和體驗
  • 無縫的商品搜索
  • 折扣和優(yōu)惠更容易被看到
  • 使用網(wǎng)站時能感覺熟悉而簡便

成功指標

  • 增加客單價
  • 增強人們的對品牌的認知感
  • 增加用戶和訂單數(shù)量
  • 無縫的體驗
  • 讓健康的生活方式更加受歡迎、評價、容易取得,更加有趣而美好
  • 提供并教育用戶健康的生活方式,并轉(zhuǎn)化為愉快美好的生活

 

目標人群

根據(jù)產(chǎn)品團隊提供的數(shù)據(jù),整理出了目標人群的特征:

圖片

 

II. 構(gòu)思

人物角色

根據(jù)以上信息,整理出了兩個完全不同的人物角色:

圖片圖片

 

故事版

沒有區(qū)分人物角色的故事版:

圖片

目標用戶的故事版:

圖片

 

體驗地圖

思考分析用戶旅程的五個階段(探索網(wǎng)站、比較商品、確認下單、完成購買和接收配送)和用戶感知的三個方面(行為、思考和感知),制作了體驗地圖:

圖片

將當中的關(guān)鍵信息挑選出來:

圖片

 

競品分析

設(shè)計師找到了三家主要競品,先大概了解他們的特色和優(yōu)勢:

圖片圖片圖片

然后從 Google Play 的評論中尋找競品的問題,這樣就可以思考如何戰(zhàn)勝他們:

圖片圖片

P.S. 評論分析是一種簡單有效的競品分析利器(也可以用來分析自己的產(chǎn)品),具體方法我之前有分享過:別總想著數(shù)據(jù)分析/用戶調(diào)研,先把評論分析做了吧!

 

III. 設(shè)計

信息導航

先把大致的用戶流程確定下來,這樣對整個產(chǎn)品就有了一個整體構(gòu)思:

圖片

 

線框圖

然后用手畫出線框圖,定下頁面的整體布局:

圖片

 

低保真

將線框圖手稿用繪圖軟件細化,制作成低保真方案,用來向客戶展示和做用戶測試:

圖片

圖片

 

IV. 完成

可用性測試

找用戶做測試時,用的是低保真可交互原型。

根據(jù)測試發(fā)現(xiàn)的問題,設(shè)計師直接將優(yōu)化方案運用到了高保真方案上,所以下面整理的問題都用高保真方案來配圖展示:

  • 1. 自動定位:測試之前用戶必須手動搜索位置。
  • 2. 屬性選擇:由于客戶想要一鍵式購物,所以當用戶點擊熟悉(通常是重量)右側(cè)的箭頭時,可以反轉(zhuǎn)卡片進行詳細選擇。

圖片

  • 3. 促銷展示:原本設(shè)計了三個促銷區(qū),但是測試中發(fā)現(xiàn)用戶面對大量的信息無法充分理解,所以移除了一部分,只保留了頭圖和分類優(yōu)惠。

  • 4. 商品導航:為了避免用戶迷路,將商品分類導航放在了所有頁面頂部,并且懸停時展示子分類和相關(guān)文章。

 

高保真

圖片

 

響應(yīng)式

這個網(wǎng)站需要具備很高的響應(yīng)式能力,不論在 PC 端還是手機端,都能輕松使用。

但由于 PC 端和手機端的尺寸相差太大了,所以不得不使用斷點(Breakpoint)來判斷用戶當前處在哪個端,并展示相應(yīng)的界面。

這個斷點的概念在柵格系統(tǒng)很常用到,指的是當界面尺寸縮小或增大到某個(或幾個)零界點時,間距大小或其它界面元素發(fā)生突變。

圖片

上圖來源:三種最主流的響應(yīng)式柵格

 

這個方案的對于移動端的特殊處理包括:

  • 確保商品分類的位置,方便用戶記憶
  • 使用漢堡菜單
  • 提供模仿原生 APP 的吸底導航

圖片

 

Before&After

最后對比一下優(yōu)化前后的方案:

圖片

圖片
圖片
圖片

圖片

 

原文地址:體驗進階(公眾號)

作者:設(shè)計師ZoeYZ

轉(zhuǎn)載請注明:學UI網(wǎng)》重新設(shè)計東南亞頭部在線超市的真實案例

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

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

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(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è)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)




日歷

鏈接

個人資料

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

存檔