首頁(yè)

以用戶體驗(yàn)為中心的商家后臺(tái)設(shè)計(jì)

純純

本文是參考國(guó)內(nèi)交互設(shè)計(jì)標(biāo)準(zhǔn)網(wǎng)站及用戶行為研究實(shí)現(xiàn)的用戶體驗(yàn)設(shè)計(jì)規(guī)范,用于后臺(tái)設(shè)計(jì),網(wǎng)站設(shè)計(jì)等。


一、統(tǒng)一性

涉及到的產(chǎn)品越多,產(chǎn)品統(tǒng)一性越強(qiáng),實(shí)現(xiàn)信息同頻,開(kāi)發(fā)和設(shè)計(jì)快速了解信息

  • 字段統(tǒng)一:模塊之間的tab的字段位置保持統(tǒng)一,減少用戶記憶負(fù)擔(dān)


  • 按鈕位置統(tǒng)一:(頁(yè)面功能操作按鈕,添加按鈕,導(dǎo)出按鈕,批量操作按鈕的位置)

一個(gè)項(xiàng)目中會(huì)涉及到多種按鈕,甚至一個(gè)頁(yè)面中也會(huì)涉及到多種不同功能的按鈕,這個(gè)就需要把同一類型或同一功能的按鈕,它們的位置統(tǒng)一。減少用戶學(xué)習(xí)成本。


因?yàn)槿绻粯拥墓δ馨粹o在不同的變換位置的話會(huì)打亂用戶已經(jīng)形成的習(xí)慣,增加其學(xué)習(xí)成本。(盡量采取以下情況的一種)


  • 幫助說(shuō)明的統(tǒng)一性

幫助說(shuō)明的表現(xiàn)形式有很多種,但不管選那種整個(gè)項(xiàng)目要保持統(tǒng)一,一些特殊情況除外,固定一個(gè)位置,可以方便用戶在最短的時(shí)間內(nèi),快速完成此項(xiàng)操作和獲取內(nèi)容。



二、權(quán)重性

權(quán)重是為了突出有效信息,也能在不同元素建立一種有組織的層次結(jié)構(gòu),讓用戶快速識(shí)別關(guān)鍵信息。

  • 主次關(guān)系對(duì)比

為了讓用戶能在操作上(類似表單、彈出框等場(chǎng)景)快速做出判斷,來(lái)突出其中一項(xiàng)相對(duì)更重要或者更高頻的操作。

突出的方法,不局限于強(qiáng)化重點(diǎn)項(xiàng),也可以是弱化其他項(xiàng)。

按鈕主次

信息主次

但是在一些需要用戶慎重決策的場(chǎng)景中,系統(tǒng)應(yīng)該保持中立,不能替用戶或者誘導(dǎo)用戶做出判斷

數(shù)字主次


  • 操作難易順序

表單在遵守操作流程的情況下,讓用戶涉及到的操作從易到難,讓用戶有填下去的動(dòng)力。

排序規(guī)則

(1)有“有默認(rèn)項(xiàng)”的選項(xiàng);

(2)有“選項(xiàng)”的選項(xiàng);

(3)只輸入“數(shù)字”的選項(xiàng);

(4)“添加圖片”“修改”等涉及復(fù)雜操作的選項(xiàng);

(5)“備注”“商品賣(mài)點(diǎn)”等選擇。

左右排版的時(shí)候?qū)ⅰ爸匾靥铐?xiàng)”先在從左邊(縱向排列)開(kāi)始排版(排版時(shí)仍按照我們的從簡(jiǎn)到難的規(guī)則)

注:當(dāng)“必填項(xiàng)”比“非必填項(xiàng)”多時(shí),排版上要考慮,就按照次序,左邊排滿,再排右邊。

  • 可視區(qū)域不=可點(diǎn)擊區(qū)域

在使用Table 時(shí),文字鏈的點(diǎn)擊范圍受到文字長(zhǎng)短影響,可以設(shè)置整個(gè)單元格為熱區(qū),以便用戶觸發(fā)。

注:當(dāng)懸浮在“客戶”所在的文字鏈單元格時(shí),鼠標(biāo)

【指針】隨即變?yōu)椤臼中汀?,單擊即可跳轉(zhuǎn)。


當(dāng)需要增強(qiáng)按鈕的響應(yīng)性時(shí),可以通過(guò)增加用戶點(diǎn)擊熱區(qū)的范圍,而不是增大按鈕形狀,從而增強(qiáng)響應(yīng)性,又不缺失美感。

注:在移動(dòng)端尤其適用。

鼠標(biāo)移入按鈕附近,即可激活Hover 狀態(tài)



三、有效交互

  • 頁(yè)內(nèi)編輯:

單字段行內(nèi)編輯

當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí),可以使用『?jiǎn)螕艟庉嫛?


狀態(tài)一:普通的瀏覽模式,不區(qū)分可編輯行和不可編輯行;

狀態(tài)二:鼠標(biāo)懸停時(shí),『指針』變?yōu)椤菏中汀唬庉媴^(qū)域底色變黃,出現(xiàn)『Tooltips』提示單擊編輯;

狀態(tài)三:鼠標(biāo)點(diǎn)擊后,出現(xiàn)『輸入框』、『確定』、『取消』表單元素,同時(shí)光標(biāo)定位在『輸入框』中。


單字段行內(nèi)編輯

當(dāng)『易讀性』為主,同時(shí)又要突出操作性的『易編輯性』時(shí),可使用『文字鏈/圖標(biāo)編輯』

狀態(tài)一:在可編輯行附近出現(xiàn)文字鏈/圖標(biāo);

狀態(tài)二:鼠標(biāo)點(diǎn)擊『編輯』后,出現(xiàn)『輸入框』、『確定』、『取消』表單元素,同時(shí)光標(biāo)定位在『輸入框』中。


多字段行內(nèi)編輯

當(dāng)『易讀性』遠(yuǎn)比『易編輯性』重要時(shí),可以使用『?jiǎn)螕艟庉嫛?

注:編輯模式在不破壞整體性的前提下,可擴(kuò)大空間,以便放下『輸入框』等表單元素;其中,在Table 中進(jìn)行編輯模式切換時(shí),需要保證每列的不跳動(dòng)。



  • 輕量化設(shè)計(jì)

減少負(fù)擔(dān),增加輕量化的操作

注:刪除的操作是謹(jǐn)慎的,系統(tǒng)在不打斷當(dāng)前操作的時(shí)候給出二次提醒確認(rèn)。


  • 輸入框?qū)崟r(shí)判斷

填寫(xiě)表單的條件反饋。

注:不需要提交后才出現(xiàn)提示,輸入及時(shí)給用戶反饋



  • toast反饋提示

完成整個(gè)操作后的提示以及系統(tǒng)提示

注:重要的,文字多于15個(gè)字以上不適合放在toast里面提示。


  • 提供邀請(qǐng)

提供下一步操作的入口

不僅要提示他發(fā)生了什么,還能引導(dǎo)他怎么做,甚至能讓他一步到位直接跳轉(zhuǎn)到要進(jìn)行下一步操作的頁(yè)面去操作

當(dāng)頁(yè)面沒(méi)有按鈕時(shí),提供明確的入口。


最后,關(guān)于后臺(tái)的用戶體驗(yàn)設(shè)計(jì)規(guī)范就總結(jié)到這里啦。

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

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

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


Design System 界面設(shè)計(jì)原則-視覺(jué)篇

博博

有正確的設(shè)計(jì)觀作判斷好壞的標(biāo)準(zhǔn),并結(jié)合行之有效的設(shè)計(jì)原則作指引,才能制定出最優(yōu)的設(shè)計(jì)方案。



前言


近年來(lái),「設(shè)計(jì)規(guī)范」逐漸被「設(shè)計(jì)體系」或「設(shè)計(jì)語(yǔ)言」的概念重塑?;谝惶准軜?gòu)嚴(yán)謹(jǐn)、規(guī)則統(tǒng)一的體系框架,產(chǎn)品表現(xiàn)層面的設(shè)計(jì)工作可以逐漸實(shí)現(xiàn)模塊化運(yùn)作,從而讓視覺(jué)設(shè)計(jì)工作變得更加高效。


「Design System 系列」將會(huì)從設(shè)計(jì)觀、設(shè)計(jì)原則、設(shè)計(jì)形式三個(gè)方向入手,由深到淺、由整到分地演繹設(shè)計(jì)體系對(duì)整個(gè)產(chǎn)品迭代過(guò)程的價(jià)值和意義。有正確的設(shè)計(jì)觀作判斷好壞的標(biāo)準(zhǔn),并結(jié)合行之有效的設(shè)計(jì)原則作指引,才能制定出最優(yōu)的設(shè)計(jì)方案。



簡(jiǎn)介


Robin Williams 的四大基本設(shè)計(jì)原則相信大家都不陌生,尤其在平面設(shè)計(jì)領(lǐng)域內(nèi)對(duì)它的應(yīng)用更為廣泛。在此基礎(chǔ)上,我結(jié)合中后臺(tái)產(chǎn)品的設(shè)計(jì)特點(diǎn),將其縮寫(xiě)為「兩對(duì)兩性」原則,即:對(duì)齊、對(duì)比、親密性、一致性。


每個(gè)優(yōu)秀的設(shè)計(jì)中都會(huì)應(yīng)用這些設(shè)計(jì)原則,并且各自是相互關(guān)聯(lián)的,只應(yīng)用某一個(gè)原則的情況很少。


作為設(shè)計(jì)體系的一部分,這套設(shè)計(jì)原則也為設(shè)計(jì)實(shí)踐提供了理論依據(jù)。本章引用中后臺(tái)產(chǎn)品設(shè)計(jì)中一些常見(jiàn)的案例,并以簡(jiǎn)潔凝練的語(yǔ)言,分析總結(jié)了這四個(gè)基本原則的實(shí)際應(yīng)用方法和注意事項(xiàng)。


本章大綱如下:




一、對(duì)齊原則


任何元素都不能在頁(yè)面上隨意擺放,每一項(xiàng)都應(yīng)該與頁(yè)面上的另一項(xiàng)或多項(xiàng)存在某種視覺(jué)關(guān)聯(lián)。即使對(duì)齊的元素空間上是相互分開(kāi)的,但在水平或垂直位置上也會(huì)有一條“隱形的線”把它們連在一起。


在界面設(shè)計(jì)中,將元素進(jìn)行對(duì)齊,既符合用戶的認(rèn)知特性,也能引導(dǎo)視覺(jué)流向,讓用戶更流暢地接收信息。



1. 左對(duì)齊


左對(duì)齊是將文本信息或視覺(jué)元素沿垂直方向向左對(duì)齊的一種對(duì)齊方式,左側(cè)會(huì)有一條“隱形的線”,將彼此分離的文本或元素連在了一起。


文案類、列表類、表單類等排版會(huì)常用到左對(duì)齊的方式,這能讓用戶順著視覺(jué)流的方向,快速高效地接收信息或填寫(xiě)表單內(nèi)容。



2. 右對(duì)齊


右對(duì)齊與左對(duì)齊相反,右側(cè)會(huì)有一條“隱形的線”,將文本信息或視覺(jué)元素連在一起。


在表格或表單中使用右對(duì)齊,可以實(shí)現(xiàn)快速對(duì)比數(shù)值大小,建議數(shù)值的格式保持統(tǒng)一。常規(guī)類數(shù)值可以統(tǒng)一使用千位符,如「1,024」;金額類數(shù)值可以保留小數(shù)點(diǎn)后兩位,如「¥88.00」。



3. 居中對(duì)齊


居中對(duì)齊是第三種常見(jiàn)的對(duì)齊方式,中間會(huì)有一條“隱形的線”,將文本信息或視覺(jué)元素連在一起。


居中對(duì)齊會(huì)形成一種更正式、更穩(wěn)重的外觀。盡管這是一種合理的對(duì)齊方式,但邊界是“軟”的,“對(duì)齊線”的強(qiáng)度也較弱,所以會(huì)顯得中規(guī)中矩。通常,首頁(yè)的功能介紹文案以及數(shù)據(jù)、金融等類型的產(chǎn)品界面會(huì)使用這種對(duì)齊方式。



4. 兩端對(duì)齊


兩端對(duì)齊也稱方形左右對(duì)齊,因?yàn)槲谋拘畔⒌淖笥覂啥司鶎?duì)齊。


通常在商品信息結(jié)算、帶有輔助說(shuō)明的列表等場(chǎng)景中會(huì)使用兩端對(duì)齊的方式,不僅能讓橫向的文案更具關(guān)聯(lián)性,易于用戶接受信息,也能使排版顯得更加工整和嚴(yán)謹(jǐn)。




二、對(duì)比原則


對(duì)比可以有效地增強(qiáng)頁(yè)面的視覺(jué)效果,同時(shí)也有助于元素之間建立一種有組織的層級(jí)結(jié)構(gòu),讓用戶快速識(shí)別關(guān)鍵信息。


需要注意的是,要想實(shí)現(xiàn)有效的對(duì)比,就應(yīng)當(dāng)拉開(kāi)元素之間的差異,差異越大,對(duì)比效果越明顯。



1. 字體對(duì)比


字體對(duì)比包括:襯線體和無(wú)襯線體的對(duì)比,如 Georgia 和 PingFang;字重粗細(xì)的對(duì)比,如 Regular 和 Semibold;字號(hào)大小的對(duì)比,如 14px 與 20px;字體顏色的對(duì)比,如 #333 和 #999。


當(dāng)界面或模塊的標(biāo)題字體大而粗、且顏色較深,正文字體小而細(xì)、且顏色較淺時(shí),信息層級(jí)關(guān)系更明顯,字體對(duì)比效果將更理想。



2. 顏色對(duì)比


顏色對(duì)比包括:色相對(duì)比,如 Red 和 Blue;飽和度對(duì)比,如 S100 和 S60;明度對(duì)比,如 B100 和 B60。


下圖中的百分比堆疊面積圖利用不同維度 (區(qū)域) 的色相對(duì)比,清晰的反應(yīng)每個(gè)數(shù)值所占百分比隨時(shí)間或類別變化的趨勢(shì),對(duì)于分析自變量是大數(shù)據(jù)、時(shí)變數(shù)據(jù)、有序數(shù)據(jù)時(shí)各個(gè)指標(biāo)分量占比極為有用。



3. 大小對(duì)比


大小對(duì)比就是在同一畫(huà)面里利用大小兩種元素,以小襯大,或以大襯小,使主體得到突出。大小對(duì)比主要體現(xiàn)在面積或體積兩種維度上的對(duì)比。


在下圖的 Dialog 中,主體圖片的面積相對(duì)于商品信息文字的面積得到最大化突出,主次更加分明,視覺(jué)沖擊感也更加強(qiáng)烈。



4. 水平與垂直對(duì)比


水平與垂直對(duì)比,是指水平分布的視覺(jué)元素與垂直分布的視覺(jué)元素在橫縱方向上的對(duì)比。


在排版上,水平與垂直對(duì)比可以打破單一呆板的排列方式,在保持對(duì)齊的基礎(chǔ)上,豐富了界面元素的空間表現(xiàn)形式,減輕了用戶的疲勞感和無(wú)味感。




三、親密性原則


如果信息之間關(guān)聯(lián)性越高,它們之間的距離就應(yīng)該越接近,從而形成一個(gè)視覺(jué)單元;反之,則它們的距離就應(yīng)該越遠(yuǎn),從而形成多個(gè)視覺(jué)單元。


親密性的根本目的是實(shí)現(xiàn)組織性,讓用戶對(duì)頁(yè)面結(jié)構(gòu)和信息層級(jí)一目了然。



1. 水平空間關(guān)系


為了自適應(yīng)不同尺寸的屏幕,同時(shí)保持橫向上控件的關(guān)聯(lián)性,因而采用柵格布局的方式來(lái)組織擺放元素和控件,保證布局的靈活性。


同一控件內(nèi)部的元素,橫向間距上也會(huì)有“親疏”之分,以體現(xiàn)組織性。



2. 垂直空間關(guān)系


在復(fù)雜的頁(yè)面或模塊設(shè)計(jì)中,縱向上需要使用高、中、低三種規(guī)格的間距來(lái)區(qū)分信息的層級(jí)關(guān)系?;凇冈g距」8px,三種規(guī)格可以是 24px (高間距)、16px (中間距)、8px (低間距)。


注:縱向間距公式:y=8+8×n。其中 y 是縱向間距,8 是元間距,n≥0。


另外,增加「分割線」等視覺(jué)元素,也是有效劃分頁(yè)面結(jié)構(gòu)和信息層級(jí)的常用手段。




四、一致性原則


可以把「一致性」理解為「復(fù)用」,相同的元素在整個(gè)界面中不斷復(fù)用,復(fù)用元素可以是線框、顏色、控件、文本格式、空間間距、設(shè)計(jì)要素等等。


一致性的根本目的是統(tǒng)一元素,并增強(qiáng)視覺(jué)效果,降低用戶的學(xué)習(xí)成本,幫助用戶快速識(shí)別出這些元素之間的關(guān)聯(lián)性。



1. 線框復(fù)用


同類信息的載體可以是相同粗細(xì)的線框、相同投影的卡片、或是相同顏色的底面,注意保持樣式屬性值的一致,以及上下左右間距的一致。



2. 顏色復(fù)用


在界面設(shè)計(jì)中,相同的功能提示、圖表數(shù)據(jù)、文字層級(jí)、按鈕、圖標(biāo)、分割線、背景等,應(yīng)使用相同的顏色,保持色彩體系上的統(tǒng)一,避免同類型的元素使用不同顏色給用戶造成認(rèn)知困擾。



3. 控件復(fù)用


使用統(tǒng)一的導(dǎo)航、按鈕、彈框、圖表、選擇器等控件,既可以提高設(shè)計(jì)者和開(kāi)發(fā)者的工作效率,避免重復(fù)造輪子的現(xiàn)象出現(xiàn),又可以保持界面設(shè)計(jì)的一致性,降低用戶的理解成本,提高使用效率。



4. 格式復(fù)用


相同類型、維度或級(jí)別的文案,應(yīng)使用相同的展現(xiàn)格式。注意標(biāo)題、正文、輔助信息的層級(jí)關(guān)系,使用統(tǒng)一的對(duì)齊方式,讓關(guān)聯(lián)性高的信息之間形成一個(gè)視覺(jué)整體。




本章小結(jié)


1. 對(duì)齊

任何元素都不能在頁(yè)面上隨意擺放,每一項(xiàng)都應(yīng)該與頁(yè)面上的另一項(xiàng)或多項(xiàng)存在某種視覺(jué)關(guān)聯(lián)。


2. 對(duì)比

對(duì)比可以有效地增強(qiáng)頁(yè)面的視覺(jué)效果,建立一種有組織的層級(jí)結(jié)構(gòu),如果想讓元素不同,那就讓它們截然不同。


3. 親密性

如果信息之間關(guān)聯(lián)性越高,它們之間的距離就應(yīng)該越接近,從而形成一個(gè)視覺(jué)單元,這有助于組織信息,減少混亂。


4. 一致性 

一致性的根本目的是統(tǒng)一元素,并增強(qiáng)視覺(jué)效果,降低用戶的學(xué)習(xí)成本,幫助用戶快速識(shí)別出這些元素之間的關(guān)聯(lián)性。


    • 文章來(lái)源:站酷   作者:Neil彭彭

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

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

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



十分鐘認(rèn)識(shí)界面設(shè)計(jì)中卡片式設(shè)計(jì)技法

博博

正確認(rèn)識(shí)卡片式設(shè)計(jì),什么是卡片、總結(jié)卡片優(yōu)勢(shì)、卡片正確設(shè)計(jì)知識(shí)通過(guò)設(shè)計(jì)兩個(gè)案例進(jìn)行講解,卡片在運(yùn)用時(shí)的技法,望能幫助大家

好久沒(méi)有發(fā)文章了,今天順叔和大家一起聊一聊卡片式設(shè)計(jì),無(wú)論是WEB還是APP卡片式設(shè)計(jì)運(yùn)用的比較多,很多UI設(shè)計(jì)師比較偏愛(ài)這樣的表現(xiàn),卡片式設(shè)計(jì)會(huì)給人一種視覺(jué)上的享受,也能對(duì)于界面具有層次感。但往往在卡片設(shè)計(jì)中有一些技法還是需要了解,不能因?yàn)榭ㄆ皆O(shè)計(jì)而卡片式設(shè)計(jì),要能更好的應(yīng)用到界面場(chǎng)景中。希望在這次分享中一些知識(shí)點(diǎn)能幫助到大家,之后的幾篇系列文章中,順叔會(huì)從界面中比較趨勢(shì)的設(shè)計(jì)技法進(jìn)行分析,希望能幫助到一些設(shè)計(jì)的小伙伴。


教程前的引言

卡片式設(shè)計(jì)這幾年比較流行,同樣這樣的設(shè)計(jì)表達(dá)也是個(gè)趨勢(shì),應(yīng)用在APP PC界面中至今還流行著,從事UI設(shè)計(jì)的都會(huì)知道卡片式設(shè)計(jì),具有把內(nèi)容整合模塊化,從視覺(jué),個(gè)性化體驗(yàn)上進(jìn)行呈現(xiàn),是設(shè)計(jì)師在設(shè)計(jì)時(shí)常用的一種表現(xiàn),同樣也具有獨(dú)特的創(chuàng)新概念。

在一些項(xiàng)目中,一些客戶會(huì)說(shuō)這個(gè)設(shè)計(jì)的APP界面有點(diǎn)太白,沒(méi)有層次感怎么辦,那這時(shí)你應(yīng)該和客戶說(shuō)在APP設(shè)計(jì)中運(yùn)用了現(xiàn)在比較流行的一個(gè)表現(xiàn)手法,卡片式設(shè)計(jì),可以解決在畫(huà)面中有個(gè)性化 、變化、 層次感的設(shè)計(jì)。那客戶又問(wèn)什么是卡片式設(shè)計(jì)呢?


一、什么是卡片

無(wú)處不在的卡片設(shè)計(jì)具有個(gè)性的美感和很好的易用性,是以文字標(biāo)題,小標(biāo)題, 圖形或圖片組成的模塊化,以塊狀形式規(guī)整的整合內(nèi)容,讓內(nèi)容更規(guī)整化,視覺(jué)上更個(gè)性化,也是操作上快捷的內(nèi)容信息入口。更直觀的表達(dá)內(nèi)容信息和快捷跳轉(zhuǎn)操作。成為當(dāng)今在設(shè)計(jì)中一個(gè)比較流行趨勢(shì),而卡片在設(shè)計(jì)中也占用一定的優(yōu)勢(shì),讓整體更加的有層次感,在運(yùn)用起來(lái)也比較方便,從視覺(jué)、體驗(yàn)、交互都具有不錯(cuò)的優(yōu)點(diǎn)


設(shè)計(jì)效果圖展示

順叔為了這個(gè)文章特意設(shè)計(jì)了兩個(gè)案例,通過(guò)這兩個(gè)案例進(jìn)行一些講解。請(qǐng)見(jiàn)下圖:


二、卡片設(shè)計(jì)優(yōu)勢(shì)

1.趨勢(shì)

無(wú)論是大平臺(tái) 還是小平臺(tái)的產(chǎn)品都會(huì)運(yùn)用這樣的卡片式,跟風(fēng)式設(shè)計(jì)趨勢(shì),也讓卡片式設(shè)計(jì)成為了一個(gè)現(xiàn)在常用的優(yōu)勢(shì),不過(guò)卡片式設(shè)計(jì)的確有很好的效果

2. 層次感

具有一定的層次感,能在頁(yè)面版式中起到設(shè)計(jì)上的不同,個(gè)性化變化,頁(yè)面層次感區(qū)分強(qiáng)烈,能更好的體現(xiàn)提煉出內(nèi)容

3. 規(guī)整化

卡片式設(shè)計(jì)以圖片、 圖標(biāo) 、LOGO、 標(biāo)題、 整合到一起 以塊狀的形式在界面中展示,更規(guī)整的排版呈現(xiàn)。雖然內(nèi)容多會(huì)導(dǎo)致頁(yè)面亂,一個(gè)模塊包含內(nèi)容之后就會(huì)規(guī)整不少,也給頁(yè)面設(shè)計(jì)上帶來(lái)了更好的視覺(jué)

4. 視覺(jué)體驗(yàn)

卡片式給整個(gè)頁(yè)面會(huì)增加視覺(jué)上的體驗(yàn),特別那種大圖片卡片式更具有視覺(jué)上的沖擊力,背景襯托出前景卡片式設(shè)計(jì)。同樣對(duì)卡片式也感覺(jué)到舒適感。卡片式設(shè)計(jì)還是需要根據(jù)整個(gè)布局、 產(chǎn)品需求 、功能進(jìn)行設(shè)計(jì)。以達(dá)到最好的用戶體驗(yàn)、視覺(jué)體驗(yàn)。

不要為了卡片設(shè)計(jì)而卡片設(shè)計(jì)。

5. 易用性

卡片式設(shè)計(jì)在易用性和靈活性上比較高,在響應(yīng)式設(shè)計(jì)中同樣應(yīng)用的也比較多一些。能更好的有序排列。

6.簡(jiǎn)約設(shè)計(jì)

簡(jiǎn)約設(shè)計(jì)會(huì)更顯得品質(zhì),不需要過(guò)多的進(jìn)行裝飾,哪怕就是一個(gè)白色的色塊,上面點(diǎn)綴有色彩的圖標(biāo)和標(biāo)題 副標(biāo)的變化,也會(huì)覺(jué)得顯得高大上,就算是一個(gè)帶有顏色的色塊卡片,也無(wú)須過(guò)多的設(shè)計(jì) 內(nèi)容上的標(biāo)題 、圖標(biāo)、 按鈕就足以支撐起卡片

7. 交互效果

在卡片式的設(shè)計(jì)中會(huì)有一些動(dòng)效交互,比如整體卡片放大、 縮小 、左滑、 右滑,可以整模塊化滑動(dòng) 縮放。整體效果增加了不錯(cuò)的視覺(jué)交互體驗(yàn)


三、卡片正確設(shè)計(jì)知識(shí)

一般在界面設(shè)計(jì)中卡片的存在的意義和表現(xiàn)手法都是什么樣的呢,下面為大家舉例了幾種常用的正確的設(shè)計(jì)表達(dá)姿勢(shì)。希望小伙伴在設(shè)計(jì)的同時(shí)有所靈感和參考,把一些表現(xiàn)手法加入到自己的設(shè)計(jì)中,適合才最重要。卡片式設(shè)計(jì)還是要根據(jù)整個(gè)風(fēng)格和整個(gè)布局而進(jìn)行展示,在做進(jìn)一步的對(duì)比和布局中以最好的效果為最終展示方式,總結(jié)分析幾個(gè)常見(jiàn)代表例子,如有不全請(qǐng)討論補(bǔ)充,下面就是一些例子


1.卡片式形式一

以色塊為主體并用現(xiàn)在比較流行的漸變色組成,其中四邊為圓角,同樣色塊下邊陰影襯托出主題,這個(gè)是在卡片中設(shè)計(jì)比較常見(jiàn)的運(yùn)用手法,卡片的長(zhǎng)高在設(shè)計(jì)中也是根據(jù)結(jié)構(gòu),內(nèi)容功能而進(jìn)行設(shè)定。正方形,長(zhǎng)方形都是一個(gè)表現(xiàn)得手法,在色塊上面標(biāo)題文字,圖標(biāo),圖形是整個(gè)卡片的布局的形式,無(wú)非就是左右布局和上下布局

應(yīng)用場(chǎng)景:卡包、天氣、類別、入口、優(yōu)惠劵,卡劵

此圖片來(lái)自于網(wǎng)絡(luò)

2. 卡片式形式二

這種形式共同點(diǎn)都是在頭部C位出現(xiàn)的卡片式設(shè)計(jì),其中承載著標(biāo)題,副標(biāo)題,以及圖文版式,不難發(fā)現(xiàn),如果圖片有顏色,那么下面是白色底,這樣在白底上面色塊的出現(xiàn)還是比較簡(jiǎn)約凸顯卡片,如果背景有顏色,卡片也有顏色那么卡片的凸顯程度就不會(huì)那么強(qiáng),圖二很多在會(huì)員卡設(shè)計(jì)中常用的比較多,也比較簡(jiǎn)約,另外兩個(gè)共同特點(diǎn)背景有顏色,一般底部背景顏色就是整個(gè)界面的主色調(diào),背景有色塊,上面就用白色卡片,卡片上方標(biāo)題、 文字、 圖片呈現(xiàn)。只不過(guò)排版的方式有所不同而已,在很多APP設(shè)計(jì)中,這樣的表達(dá)也很多,通過(guò)主色調(diào)可以很融合的把上面的狀態(tài)欄,導(dǎo)航欄融為一體視覺(jué)上統(tǒng)一性,底部背景顏色延續(xù)下來(lái),上面凸顯白色卡片,這樣更具有視覺(jué)感和層次感。白色的卡片不需要過(guò)多的修飾,更能體現(xiàn)的上面的文字和圖片。

應(yīng)用場(chǎng)景:會(huì)員卡,滑動(dòng)卡片,圖文標(biāo)題,入口

此圖片來(lái)自于網(wǎng)絡(luò)

3. 卡片式形式三

這種形式上圖下文字,或者是上標(biāo)題,下圖片的形式,這種形式特別在圖片素材的選擇上尤為重要,有視覺(jué)效果好的圖片通過(guò)剪切,處理,合成,攝影,插畫(huà)等等方式,出現(xiàn)的圖片質(zhì)量上好的話可以帶動(dòng)整個(gè)設(shè)計(jì)的逼格,通過(guò)有效的圖片傳達(dá),文字傳達(dá),讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現(xiàn)的比較多,同樣也能體現(xiàn)出整體化和視覺(jué)化

應(yīng)用場(chǎng)景:滑動(dòng)卡片,圖文標(biāo)題,入口,列表

此圖片來(lái)自于網(wǎng)絡(luò)

4. 卡片式形式四

大圖卡片式,一般以攝影圖片,插畫(huà)形式,文字壓與圖片之上,這樣的效果更具有沖擊力,也能顯得出比較潮流。體驗(yàn)也很不錯(cuò),放大視覺(jué),展示內(nèi)容,圖片相結(jié)合,讓瀏覽者更愿意多看一會(huì)。表達(dá)的圖片與文字內(nèi)容相符,做到圖文交融的程度。一般這樣對(duì)于圖片的選擇上還是比較要求嚴(yán)格的。沒(méi)有質(zhì)量的圖效果會(huì)降低。

應(yīng)用場(chǎng)景:列表,說(shuō)明,入口,天氣


此圖片來(lái)自于網(wǎng)絡(luò)

5.卡片式形式五

列表卡片設(shè)計(jì),這種形式一般白色的卡片,上面標(biāo)題,頭像,按鈕,扁平插畫(huà)形式體現(xiàn),更多應(yīng)用在一級(jí)頁(yè)面的下方內(nèi)容,以及二級(jí)頁(yè)面的列表頁(yè)或者集合頁(yè),整體弱化背景以白色為主,給予圓角及陰影承托出層次感同時(shí),體現(xiàn)上面內(nèi)容部分。每個(gè)模塊的單元體具有統(tǒng)一的視覺(jué)。

應(yīng)用場(chǎng)景:列表,集合頁(yè),入口

此圖片來(lái)自于網(wǎng)絡(luò)

6. 卡片式形式六

大卡片式設(shè)計(jì),表現(xiàn)為一塊特大的卡片式,上面會(huì)有標(biāo)題,按鈕等信息,同樣表現(xiàn)出突出層次感,個(gè)性化設(shè)計(jì)的特質(zhì)。體現(xiàn)出內(nèi)容,一般背景有顏色上面卡片為白色,如下面背景為白色,那么卡片的形式也可色塊,在對(duì)比上有個(gè)反差,才能突出卡片的作用性。

應(yīng)用場(chǎng)景:提示,說(shuō)明,優(yōu)惠劵,劵,入口

此圖片來(lái)自于網(wǎng)絡(luò)

以上總結(jié)的幾種卡片的形式,在設(shè)計(jì)中可以根據(jù)情況而設(shè)計(jì),卡片多樣化,布局多樣化,適合自己產(chǎn)品的才最重要,雖然在界面設(shè)計(jì)中常用的設(shè)計(jì),但不要盲目的為了卡片而卡片套用設(shè)計(jì),這樣起不到作用反而效果達(dá)不到理想程度。希望幾個(gè)卡片形式總結(jié)能給大家?guī)?lái)一些靈感和啟發(fā)。

同樣在這些卡片中會(huì)有一些基本的共同的特點(diǎn)

共同的特點(diǎn)是

1. 四個(gè)角都是圓角

2. 根據(jù)潮流漸變色或白卡片

3. 色塊下的陰影,色塊下的陰影更能體現(xiàn)出層次

4. 卡片上面組成部分,標(biāo)題,副標(biāo)題,圖形,按鈕,圖片,頭像

5. 字體大小,字體顏色的變化

6. 一般卡片應(yīng)用在會(huì)員,列表,說(shuō)明,優(yōu)惠劵,分類,類別,集合頁(yè),歡迎頁(yè)等場(chǎng)景常見(jiàn)


三、卡片正確設(shè)計(jì)知識(shí)

為了講解文章,順叔臨時(shí)構(gòu)思一個(gè)產(chǎn)品原型,而快速進(jìn)行了簡(jiǎn)單的設(shè)計(jì),一個(gè)第一版,一個(gè)優(yōu)化版,主要為了講解一下這個(gè)卡片設(shè)計(jì)一些問(wèn)題,

以下此圖為構(gòu)思的原型圖

經(jīng)過(guò)分析原型圖之后開(kāi)始進(jìn)行設(shè)計(jì),首先設(shè)計(jì)一個(gè)版本的,如果這樣卡片布局設(shè)計(jì),這樣色彩搭配的情況下,會(huì)怎么樣呢,整體設(shè)計(jì)用了藍(lán)紫色為主色調(diào),首先鋪藍(lán)紫色的色塊作為背景,然后上面放白色卡片,以至于卡片上詳細(xì)的內(nèi)容,比如數(shù)字,圖形 能更好的豐富支撐卡片。同樣數(shù)據(jù)流也是比較重要的C位。也是比較重要的位置。接著根據(jù)原型圖下面有兩個(gè)卡片,通過(guò)扁平化設(shè)計(jì),以色塊為主設(shè)計(jì)一個(gè)藍(lán)色,一個(gè)橙色的卡片,上面并有圖標(biāo),頭像,以及標(biāo)題,兩個(gè)顏色的對(duì)比,更讓視覺(jué)有沖擊力,整體看這個(gè)設(shè)計(jì)并沒(méi)有什么,但有個(gè)問(wèn)題在于單個(gè)模塊拿出來(lái)效果的確都不錯(cuò),但組成之后上面的卡片C位讓下面的兩個(gè)帶顏色的卡片搶了視覺(jué),當(dāng)打開(kāi)這個(gè)界面的時(shí)候視覺(jué)落點(diǎn)在彩色卡片上,那么這個(gè)整體設(shè)計(jì)上就出現(xiàn)了問(wèn)題,上面的數(shù)據(jù),白色卡片其實(shí)是比較重要的,而且整個(gè)畫(huà)面都是卡片毫無(wú)設(shè)計(jì)上的變化,

那么只能在這個(gè)基礎(chǔ)上在進(jìn)行優(yōu)化,其實(shí)大家在做設(shè)計(jì)的同時(shí)也這樣,在考慮功能模塊前提下,用戶體驗(yàn),也要考慮視覺(jué)體驗(yàn),那么視覺(jué)從哪方面來(lái),色彩、層次、版式等等方面。那么能不能在進(jìn)行一下優(yōu)化呢,其實(shí)還是有空間在進(jìn)行優(yōu)化。以下圖為第一版

設(shè)計(jì)第一版

根據(jù)上面的設(shè)計(jì)在進(jìn)行優(yōu)化,同樣保留白色卡片部分元素,在卡片與卡片之間放一些顏色的圖標(biāo),這樣更好的給功能上快捷入口,也能給卡片設(shè)計(jì)增添了變化。使得整個(gè)畫(huà)面更靈活

雖然白色卡片,但有一些色彩的點(diǎn)綴,也讓白色卡片活躍起來(lái),把顏色的卡片改成白色卡片,從上到下的版式舒服多了,也沒(méi)有那么跳。整個(gè)風(fēng)格更簡(jiǎn)約,同時(shí)功能也更全面。

調(diào)整后

從原型圖,在到設(shè)計(jì)第一版,在到優(yōu)化調(diào)整之后,證明一點(diǎn),卡片不要因?yàn)榭ㄆ自O(shè)計(jì),反而會(huì)失去效果,考慮功能模塊,用戶體驗(yàn),視覺(jué)體驗(yàn)也一定讓整體舒服。一直都說(shuō),繪畫(huà)中需要有主有次,設(shè)計(jì)中也一定要有主,有次的進(jìn)行設(shè)計(jì)。這樣層級(jí)關(guān)系才能更清晰。

但這些條件一定是從,體驗(yàn)、色彩、布局、版式等方面進(jìn)行對(duì)比和研究的。設(shè)計(jì)不要先著急做設(shè)計(jì),前期的進(jìn)行思考,邏輯清楚了,在進(jìn)行設(shè)計(jì)的時(shí)候會(huì)更加的順暢??ㄆ皆O(shè)計(jì),大家都在應(yīng)用,希望這個(gè)文章能給大家?guī)?lái)一點(diǎn)點(diǎn)知識(shí)點(diǎn),那就不枉費(fèi)我在熬夜寫(xiě)這篇文章。

不為別的,只是一個(gè)喜歡分享的肉團(tuán)子。這篇文章就寫(xiě)到這里,如果喜歡請(qǐng)給個(gè)贊吧。如內(nèi)容有沒(méi)說(shuō)到的地方,各位可以進(jìn)行補(bǔ)充,以上兩個(gè)圖你稀罕哪個(gè)呢?


    • 文章來(lái)源:站酷   作者:張?jiān)鲰?/span>

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

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

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



【B端設(shè)計(jì)】表單設(shè)計(jì)的模式及使用場(chǎng)景

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

一:平鋪


平鋪:指的是將表單信息完整的排版在界面中。




無(wú)論是在B端還是C端設(shè)計(jì)中,平鋪的表單設(shè)計(jì)是最常見(jiàn)的,這樣的表單用戶可以一覽看全所有表單的信息(但是對(duì)于表單字段多且復(fù)雜的場(chǎng)景,平鋪也不能一覽所有)。所以對(duì)于平鋪的表單設(shè)計(jì)而言,一般是針對(duì)表單信息簡(jiǎn)單且字段信息較少的情況,如果字段信息小于兩屏且字段信息強(qiáng)相關(guān),那么我們可以選擇采用平鋪的表單設(shè)計(jì)方式。


例如:飛書(shū)的審批表單頁(yè)面設(shè)計(jì)就是采用平鋪的設(shè)計(jì)方式







二:分組


表單的第二種設(shè)計(jì)方式是分組,分組的排版方式又可以細(xì)分為三種方式。分別是:折疊分組、區(qū)域分組、標(biāo)題分組。下面分別介紹了三種分組的詳情。


01:折疊分組


折疊分組:指的是將表單信息分類顯示,通過(guò)點(diǎn)擊按鈕展開(kāi)和收起表單的具體信息。





在B端設(shè)計(jì)中,會(huì)存在很多設(shè)置類表單設(shè)計(jì),最常見(jiàn)的圖表數(shù)據(jù)和樣式外觀設(shè)置,對(duì)于一個(gè)圖而言,會(huì)讓用戶自定義圖表的各種信息設(shè)置,并且需要在一個(gè)表單中顯示完整圖表設(shè)計(jì)所涉及到的范圍,所以大多數(shù)都會(huì)采用折疊分組的形式。


折疊分組用戶可以一眼看全表單所涉及到的大范圍,用戶鎖定某個(gè)標(biāo)題范圍后,再展開(kāi)去完善對(duì)應(yīng)的具體表單信息,這樣用戶就可以不用在龐大的表單信息中去尋找自己需要完成的表單信息。折疊表單一般會(huì)包含一些默認(rèn)的數(shù)值,用戶可不做調(diào)整,不調(diào)整也不會(huì)影響功能的使用。如果說(shuō)表單信息需要用戶手動(dòng)完整的填寫(xiě)或者確認(rèn),那么最好不要選擇這種表單的設(shè)計(jì)方式。


例如:Grafana的自定義BI圖表設(shè)置信息就采用了折疊的表單形式






02:區(qū)域分組


區(qū)域分組:指的是將表單信息分類顯示,通過(guò)矩形背景劃分區(qū)域,形成小組表單信息。





在B端設(shè)計(jì)中,一些復(fù)雜的表單會(huì)通過(guò)區(qū)域分組的形式排版設(shè)計(jì),可以將一個(gè)表單的信息通過(guò)信息的關(guān)聯(lián)關(guān)系劃分不同的區(qū)域形成小組信息,這樣有利于信息的歸類以及信息的填寫(xiě)。用戶在看到復(fù)雜表單的時(shí)候不會(huì)被龐大的表單迷惑,可以更好的找到表單字段,也可以讓用戶填寫(xiě)表單更有秩序、更清晰。區(qū)域分組的使用場(chǎng)景,一般也是針對(duì)復(fù)雜表單且具有強(qiáng)相關(guān)的信息關(guān)系。


例如:下面是我在工作中所運(yùn)用的一個(gè)區(qū)域分組的表單設(shè)計(jì)方式。









03:標(biāo)簽分組


標(biāo)簽分組:指的是將表單信息分組標(biāo)簽化,形成獨(dú)立的小表單信息,分為上下結(jié)構(gòu)和左右結(jié)構(gòu)。


上下結(jié)構(gòu)




左右結(jié)構(gòu)






復(fù)雜的表單可以采用區(qū)域分組的形式,還可以采用標(biāo)簽分組的設(shè)計(jì)形式。標(biāo)簽分組可以一眼看全所有分組大類信息,對(duì)于一個(gè)表單涉及到多種信息字段的情況,并且每個(gè)組的字段信息都是獨(dú)立的,不是強(qiáng)相關(guān)的,那么我們就可以采用標(biāo)簽分組的形式。


標(biāo)簽分組可以直接點(diǎn)擊標(biāo)簽快速定位到想要查看和填寫(xiě)的表單區(qū)域,這樣使用戶操作更加快速便捷。并且也讓龐大的表單信息得到更好的整理,讓用戶使用更方便,可降低用戶對(duì)于龐大表單信息的焦慮感。


下面可以看一下在B端產(chǎn)品中我對(duì)于一些復(fù)雜表單標(biāo)簽分組的設(shè)計(jì)方式。










三:分頁(yè)


分頁(yè):指的是將整個(gè)表單信息通過(guò)多頁(yè)的形式展示。





分頁(yè)表單設(shè)計(jì)一般會(huì)針對(duì)具有步驟前后順序關(guān)系的表單。也就是指需要先完成上一步表單信息才能進(jìn)入到下一步的表單頁(yè)面,形成一個(gè)完整的閉環(huán)流程才能使表單信息提交成功。


同樣的,下面截圖為B端實(shí)際業(yè)務(wù)工作中的一個(gè)分頁(yè)表單設(shè)計(jì)頁(yè)面,因?yàn)闃I(yè)務(wù)的保密性,所以就不做太多的業(yè)務(wù)信息,只需要看到分頁(yè)表單的一個(gè)實(shí)際設(shè)計(jì)場(chǎng)景即可。










表單的4大呈現(xiàn)方式及使用場(chǎng)景



一:彈窗(對(duì)于信息較少的表單)





最常見(jiàn)的表單呈現(xiàn)方式即彈窗,無(wú)論是在C端還是B端,我們都隨處可見(jiàn)彈窗形式的表單。彈窗表單一般呈現(xiàn)在屏幕中間,底部有暗色遮罩層,將底部信息與彈窗表單隔離,使用戶專注于表單的填寫(xiě)。彈窗模式的表單一般是針對(duì)表單信息較少的情況,并且填寫(xiě)表單不需要關(guān)注底部頁(yè)面的信息。用戶可以在彈窗表單中順利完成表單的任務(wù)。


案例:













二:抽屜(內(nèi)容信息較多,且與底部信息強(qiáng)關(guān)聯(lián))


抽屜形式的表單一般是針對(duì)表單信息較多且與底部信息具有強(qiáng)相關(guān)的關(guān)系。用戶在填寫(xiě)表單時(shí)需要根據(jù)底部信息的輔助完成,或者需要同時(shí)操作底部面板中的相關(guān)信息,來(lái)協(xié)助完成表單信息及讓交互使用更方便。


抽屜形式的表單展示方式是從屏幕右側(cè)彈出,有時(shí)候也會(huì)有從底部彈出的情況。這里主要分享從右側(cè)彈出的抽屜表單模式,抽屜模式還分為三種模式:有遮罩層的抽屜模式、無(wú)遮罩層的抽屜模式、擠壓模式。


下面分別介紹這三種模式的區(qū)別以及使用場(chǎng)景。




有遮罩層的抽屜模式




有遮罩層的抽屜模式指的是抽屜底部有暗色遮罩層,將抽屜表單信息與底部頁(yè)面信息隔離,這里的遮罩層與上面彈窗中的遮罩層是同樣的作用。那么就有人有疑問(wèn)了,既然都是有遮罩層具有同樣的隔離作用,那為什么要從右側(cè)彈出,而不直接和彈窗一樣展示在屏幕中間呢?


有遮罩層的右側(cè)抽屜模式的表單具有以下特點(diǎn):


01:右側(cè)抽屜出現(xiàn)位置在屏幕的右側(cè),雖然有遮罩層,但是然可以看到遮罩層底部頁(yè)面的相關(guān)信息,如果在填寫(xiě)表單的同時(shí)需要關(guān)注底部信息,并為填寫(xiě)表單做輔助,那么右側(cè)抽屜表單模式比常規(guī)的彈窗模式更適合。


02:右側(cè)抽屜模式的表單面積更大,更適用于復(fù)雜表單的呈現(xiàn),可以展示更多的信息。





案例:










無(wú)遮罩層的抽屜模式




無(wú)遮罩層的抽屜模式指的是抽屜底部沒(méi)有暗色遮罩層,抽屜直接浮在底部?jī)?nèi)容之上,一般通過(guò)對(duì)抽屜背景做投影來(lái)區(qū)分底部?jī)?nèi)容與抽屜內(nèi)容,讓兩者之間能更清晰地辨別使用。


無(wú)遮罩層的右側(cè)抽屜模式的表單具有以下特點(diǎn):


01:與有遮罩層的模式一樣具有可根據(jù)底部信息輔助完成表單信息的填寫(xiě)的特點(diǎn)。


02:適用于復(fù)雜表單且可以展示更多的字段信息。


03:另外有一個(gè)更加重要的特點(diǎn)是:由于底部?jī)?nèi)容是沒(méi)有遮擋層,所以用戶還可以同時(shí)操作底部頁(yè)面,使用戶切換信息更便捷,使用效率得到提高。


案例:











三:擠壓模式



擠壓模式指的是表單信息從右側(cè)出現(xiàn),將原本畫(huà)布的內(nèi)容區(qū)域?qū)挾葴p小,從而展示右側(cè)表單。這樣的展示方式界面需要做適配,做到畫(huà)面中的元素自動(dòng)適配畫(huà)布大小,以滿足正常的閱讀和使用。


擠壓模式與上面的無(wú)遮罩層的抽屜模式具有相同的特點(diǎn),另外擠壓模式還具有可以完整看到原本界面中的內(nèi)容,右側(cè)表單可以自由展開(kāi)和收起。


但是對(duì)于表單信息龐大且復(fù)雜的業(yè)務(wù)情況就不太適用于右側(cè)擠壓的模式,因?yàn)楸韱螌挾日紦?jù)太多會(huì)影響原本界面內(nèi)容的展示,原本內(nèi)容會(huì)因?yàn)閷挾葏^(qū)域太小而布局錯(cuò)亂的問(wèn)題,如果因?yàn)橛覀?cè)擠壓的表單出現(xiàn)而改變?cè)薪缑鎯?nèi)容的布局,對(duì)于用戶而言使用也不太友好。


案例:













四:頁(yè)面(單獨(dú)表單填寫(xiě),且信息量較多)




上一期已經(jīng)分享過(guò)關(guān)于分頁(yè)展示的表單模式,其實(shí)和這里的頁(yè)面展示類似,當(dāng)表單信息龐大且與原界面無(wú)強(qiáng)相關(guān)的可以直接采用新頁(yè)面呈現(xiàn)。使表單單獨(dú)成頁(yè)更好展示表單信息減少其它信息的干擾。


案例:












總結(jié)



B端的業(yè)務(wù)比較復(fù)雜,不同的表單信息的復(fù)雜程度有所不同,需要根據(jù)實(shí)際業(yè)務(wù)的情況合理選擇表單的展示方式,也需要考慮用戶的使用場(chǎng)景以及業(yè)務(wù)表單的關(guān)聯(lián)關(guān)系。

簡(jiǎn)單且不具有強(qiáng)相關(guān)的表單可選擇平鋪,呈現(xiàn)方式可選擇彈窗

復(fù)雜且具有強(qiáng)相關(guān)的表單可選擇區(qū)域分組,呈現(xiàn)方式可選擇無(wú)遮罩層抽屜/擠壓

復(fù)雜且不具有強(qiáng)相關(guān)的可選擇標(biāo)簽分組,呈現(xiàn)方式可選擇有遮罩層抽屜

具有先后順序的則選擇分頁(yè),表單信息獨(dú)立可選擇分頁(yè)的呈現(xiàn)方式

(并非強(qiáng)制的表單設(shè)計(jì)選擇方式,需要合理考慮業(yè)務(wù)哦!)

文章來(lái)源:站酷   作者:設(shè)計(jì)小余
分享此文一切功德,皆悉回向給文章原作者及眾讀者.


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

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



如何通過(guò)數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)

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

一、前言


在日常的工作中,會(huì)經(jīng)常接觸到一些數(shù)據(jù)方面的內(nèi)容,同時(shí)我也在不斷的加強(qiáng)相關(guān)方面的專業(yè)知識(shí)學(xué)習(xí),希望可以借此做一個(gè)總結(jié),與大家分享。如果你也在平時(shí)的工作中遇到相關(guān)的數(shù)據(jù)問(wèn)題、不知如何利用數(shù)據(jù)推動(dòng)設(shè)計(jì)、或者對(duì)數(shù)據(jù)抱有一定的興趣,那我們可以一起往下看。

本文主要圍繞以下幾個(gè)方面來(lái)進(jìn)行解釋說(shuō)明:




二、背景


隨著互聯(lián)網(wǎng)大環(huán)境從增量進(jìn)入到存量市場(chǎng),企業(yè)發(fā)展與產(chǎn)品的迭代越來(lái)越離不開(kāi)數(shù)據(jù)的指導(dǎo),數(shù)據(jù)驅(qū)動(dòng)已然成為當(dāng)下產(chǎn)品的主趨勢(shì)。身為設(shè)計(jì)師的我們,更應(yīng)該對(duì)數(shù)據(jù)保持高度敏感,通過(guò)一系列的數(shù)據(jù)分析推動(dòng)設(shè)計(jì)迭代,并讓其更合理、更具有可信度。

任何一款產(chǎn)品,設(shè)計(jì)師都無(wú)法根據(jù)自己的心情、想法,一拍腦門(mén)的迅速產(chǎn)出。好的產(chǎn)品,既要考慮市場(chǎng)價(jià)值,也離不開(kāi)用戶體驗(yàn),應(yīng)該明確目標(biāo)而進(jìn)行實(shí)現(xiàn),所以設(shè)計(jì)過(guò)程中需要依靠數(shù)據(jù)給予我們指導(dǎo),即利用數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)。



三、深入了解數(shù)據(jù)


3.1 數(shù)據(jù)的作用

數(shù)據(jù)在產(chǎn)品迭代過(guò)程中有著舉足輕重的地位,對(duì)于設(shè)計(jì)師而言也是極其重要。在了解數(shù)據(jù)之前,簡(jiǎn)單的理解一下為什么需要數(shù)據(jù),在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中,數(shù)據(jù)的作用主要分為以下三點(diǎn)。


3.1.1 提效賦能

工作中或許會(huì)常常面臨多種需求并線進(jìn)行的狀況,合理客觀的數(shù)據(jù)有助于我們更好的分清任務(wù)的優(yōu)先級(jí),并聚焦于當(dāng)前最緊急的任務(wù)展開(kāi)進(jìn)行。合理有序的安排可以推動(dòng)任務(wù)的快速高效完成。



3.1.了解用戶

設(shè)計(jì)師與真正的用戶之間往往存在一定的差異,我們不能按照設(shè)計(jì)師固有的思維方式去衡量用戶的想法,更不能想當(dāng)然的覺(jué)得用戶需要什么。

數(shù)據(jù)可以幫助我們更好的了解用戶,利用數(shù)據(jù)分析的種種方法,我們可以進(jìn)行抽絲剝繭,發(fā)現(xiàn)更深層次的問(wèn)題,不斷的去深挖用戶需求,進(jìn)而更好的滿足用戶,只有這樣我們才能更好的留住用戶,促進(jìn)產(chǎn)品增收。



3.1.設(shè)計(jì)支撐

在進(jìn)行設(shè)計(jì)輸出的過(guò)程中,我們可能常常會(huì)遇到以下情況:

我相信各位設(shè)計(jì)師在日常的對(duì)接中,一定是根據(jù)需求文檔進(jìn)行了設(shè)計(jì)輸出,但是在設(shè)計(jì)評(píng)審階段卻很難去說(shuō)服各需求方。數(shù)據(jù)在此情景下就顯得非常重要,它可以幫助我們針對(duì)設(shè)計(jì)方案有一個(gè)理性的數(shù)據(jù)支撐,去衡量我們的設(shè)計(jì)方案是否合理有效。

其次在項(xiàng)目上線后依據(jù)數(shù)據(jù)反饋,可以驗(yàn)證此次設(shè)計(jì)是否達(dá)到理想目標(biāo),是否還有進(jìn)一步優(yōu)化的空間。了解數(shù)據(jù)可以更好的幫助我們深耕需求、把控方向。



3.2 數(shù)據(jù)的類型

為了進(jìn)一步了解數(shù)據(jù),現(xiàn)將所有的數(shù)據(jù)進(jìn)行整合區(qū)分,大致上可以分為兩個(gè)類型,分別是定性數(shù)據(jù)與定量數(shù)據(jù)兩大類。

定性數(shù)據(jù)指導(dǎo)設(shè)計(jì)過(guò)程,往往判斷某件事物的意義與價(jià)值。定量數(shù)據(jù)關(guān)注數(shù)據(jù)頻率,在結(jié)果上更具有說(shuō)服力。這兩種數(shù)據(jù)的類型在數(shù)據(jù)分析以及設(shè)計(jì)驅(qū)動(dòng)的過(guò)程中都非常重要。時(shí)常會(huì)通過(guò)定性數(shù)據(jù)來(lái)發(fā)現(xiàn)、定義問(wèn)題,最后再由定量數(shù)據(jù)來(lái)驗(yàn)證結(jié)果。


3.2.1 定性數(shù)據(jù)

定性數(shù)據(jù)是非統(tǒng)計(jì)數(shù)據(jù),在樣本選取上,數(shù)據(jù)量較少,主要收集途徑有以下方法:應(yīng)用商店評(píng)論、客服反饋、音視頻記錄、筆記反饋、訪談?wù){(diào)研等。

可以快速了解到用戶的行為和態(tài)度,這種數(shù)據(jù)具有可調(diào)查性,是可以進(jìn)行深入研究的,能進(jìn)一步推斷出設(shè)計(jì)的哪些方面存在問(wèn)題,從而通過(guò)設(shè)計(jì)方法優(yōu)化產(chǎn)品設(shè)計(jì)體驗(yàn)。


3.2.2 定量數(shù)據(jù)

定量數(shù)據(jù)是統(tǒng)計(jì)性的,可以用來(lái)問(wèn)“多少”的問(wèn)題,最終生成結(jié)論性的數(shù)據(jù)信息。收集途徑可以有以下方法:測(cè)試、產(chǎn)品數(shù)據(jù)、指標(biāo)上報(bào)、實(shí)驗(yàn)調(diào)查等。

定量數(shù)據(jù)提供了對(duì)設(shè)計(jì)的間接評(píng)估,可以快速了解用戶基礎(chǔ)信息數(shù)據(jù)以及對(duì)產(chǎn)品的使用感知,例如完成率、滿意度等等數(shù)據(jù)指標(biāo),它不僅可以幫助我們快速統(tǒng)計(jì)信息,還能驗(yàn)證結(jié)果。




3.3 數(shù)據(jù)的維度

數(shù)據(jù)不應(yīng)該是只停留在表面的數(shù)字,需要深入的了解數(shù)據(jù),善于從這一堆數(shù)字背后,發(fā)現(xiàn)數(shù)據(jù)的真實(shí)意義。

由此,Google推出HEART模型,作為一套完善的用以評(píng)估以及提升用戶體驗(yàn)的標(biāo)準(zhǔn)。HEART模型包括五個(gè)維度,分別為:愉悅度(Happiness)、參與度(Engagement)、接受度(Adoption)、留存度(Retention)、完成度(Task success)。通過(guò)這種方式將數(shù)據(jù)分為五個(gè)維度,可以更有效的明白不同類型的數(shù)據(jù)所體現(xiàn)的真實(shí)含義。



3.3.1 愉悅度(Happiness)

什么是愉悅度?關(guān)于這個(gè)問(wèn)題,大概一千個(gè)人會(huì)有一千個(gè)回答吧,因此愉悅度更偏向于用戶在產(chǎn)品使用過(guò)程中直觀的主觀感受,例如滿意度、產(chǎn)品體驗(yàn)感受、推薦指數(shù)、易用性感知等等體驗(yàn)指標(biāo),通過(guò)這一類的數(shù)據(jù)可以有效的了解用戶對(duì)于產(chǎn)品或者某個(gè)功能的喜好程度。

可以利用定性研究的方式獲取用戶在體驗(yàn)和感知上愉悅程度,例如一對(duì)一訪談、觀察小組、可行性測(cè)試等。也可以通過(guò)定量調(diào)查中的問(wèn)卷、數(shù)據(jù)反饋、AB測(cè)試等了解用戶的使用情況以及推薦指數(shù)等。



3.3.2 參與度(Engagement)

指用戶在使用產(chǎn)品功能時(shí)的參與深度,衡量指標(biāo)即為有效活躍用戶的數(shù)量。用戶參與度并沒(méi)有統(tǒng)一的可量化的界定標(biāo)準(zhǔn),但大致上可以分為以下幾個(gè)指標(biāo),產(chǎn)品訪問(wèn)頻次、平均訪問(wèn)時(shí)長(zhǎng)、訪問(wèn)頁(yè)面數(shù)量、產(chǎn)品使用間隔。

數(shù)據(jù)的衡量只是最基礎(chǔ)的一步,更重要的是如何提升用戶的參與度,對(duì)于新用戶而言,可以通過(guò)引導(dǎo)、幫助等建立良好的第一印象;對(duì)于老用戶,需要合理的推送相關(guān)優(yōu)惠與活動(dòng),也可以利用游戲化運(yùn)營(yíng)建立長(zhǎng)期關(guān)系,這些都是比較有效的提升參與度的方法。



3.3.3 接受度(Adoption)

當(dāng)一個(gè)新的產(chǎn)品與功能出現(xiàn)時(shí),由于陌生感,用戶短時(shí)間內(nèi)很難接受,而接受度就是指用戶在特定時(shí)間內(nèi)真正開(kāi)始習(xí)慣并使用。

為了快速得到用戶的認(rèn)可,往往產(chǎn)品設(shè)計(jì)中會(huì)通過(guò)競(jìng)品分析的方式確保框架內(nèi)容與市場(chǎng)的同類產(chǎn)品保持一致,滿足用戶的使用習(xí)慣。而針對(duì)大部分的新用戶也會(huì)使用新功能引導(dǎo)以及相關(guān)通知推送等加快新用戶的接受度。



3.3.4 留存度(Retention)

在產(chǎn)品運(yùn)營(yíng)中,留存是最關(guān)鍵的數(shù)據(jù)指標(biāo),它也是產(chǎn)品獲利與增長(zhǎng)中最主要因素之一,留存直接決定了用戶是否愿意繼續(xù)使用,它是最真實(shí)的數(shù)據(jù)表現(xiàn),而留存通常體現(xiàn)在,多日留存率、回訪率、不同平臺(tái)的使用重合率等。

針對(duì)這一數(shù)據(jù)我們需要關(guān)注的核心問(wèn)題就是如何提升用戶留存率,大致的方法可以分為以下兩個(gè)維度:

(1) 產(chǎn)品維度

產(chǎn)品功能決定是決定用戶留存的關(guān)鍵。在需求設(shè)計(jì)上,通過(guò)挖掘潛在需求,刺激用戶長(zhǎng)期使用,并且通過(guò)拓展應(yīng)用場(chǎng)景,不斷提供細(xì)分服務(wù),進(jìn)一步滿足用戶;甚至我們也會(huì)發(fā)現(xiàn)在大多數(shù)產(chǎn)品中,通過(guò)建立社區(qū),打造社交圈子,強(qiáng)化用戶的粘性。

(2) 運(yùn)營(yíng)維度

產(chǎn)品使用過(guò)程中,合理的運(yùn)營(yíng)也是提升用戶留存的關(guān)鍵之一,常用的方法有定期舉辦活動(dòng)、例如砍價(jià)、助力、簽到、每日任務(wù)等;也可以通過(guò)消息推送挽留用戶。



3.3.5 完成度(Task success)

完成度主要是指用戶對(duì)于關(guān)鍵任務(wù)的完成率,常常用來(lái)衡量交互流程是否合理。主要包括以下維度:首次點(diǎn)擊時(shí)間、操作完成時(shí)間、完成點(diǎn)擊次數(shù)、完成率、失敗率、出錯(cuò)率等。

A: 任務(wù)完成度的衡量指標(biāo)該怎么計(jì)算呢?

(1) 任務(wù)完成時(shí)間

用戶在整個(gè)任務(wù)過(guò)程中,所花費(fèi)的時(shí)間即為任務(wù)完成時(shí)間。

(2) 完成率

完成率=完成的操作次數(shù)/開(kāi)始操作的次數(shù)


產(chǎn)品設(shè)計(jì)中,為了提升完成率,需要輔助用戶進(jìn)行交互并進(jìn)行引導(dǎo)設(shè)計(jì),不僅需要符合不同場(chǎng)景變化以及用戶的心智模型,還要給予用戶體驗(yàn)流程中的舒適感受,進(jìn)一步輔助其完成任務(wù)。


B: 如何提升任務(wù)的完成率呢?

(1) 降低理解成本

利用設(shè)計(jì)手法,降低任務(wù)流程中的理解成本,切入到實(shí)際的場(chǎng)景中,幫助用戶快速完成任務(wù)。

例如在列表模塊中,默認(rèn)狀態(tài)下的輸入框內(nèi),展示灰色的提醒文案,提前告知用戶該區(qū)域應(yīng)該填寫(xiě)的內(nèi)容;比如說(shuō)高德地圖通過(guò)AR技術(shù)結(jié)合導(dǎo)航,快速幫助用戶完成導(dǎo)航任務(wù);再類似于可視化數(shù)據(jù)看板,幫助用戶快速獲取信息結(jié)果。


(2) 精簡(jiǎn)任務(wù)流程

降低理解成本只能單一的滿足用戶操作前的理解,而操作過(guò)程中的步驟長(zhǎng)短也起到非常關(guān)鍵的作用。優(yōu)化任務(wù)流程,目的就是為了提升完成率。

例如用戶在進(jìn)行登錄注冊(cè)時(shí),可以點(diǎn)擊右上角的文案即可實(shí)現(xiàn)登錄注冊(cè)狀態(tài)的快速切換,減少用戶切換的流程步驟。再比如說(shuō)表單填寫(xiě)類的產(chǎn)品,還可以將相同的內(nèi)容進(jìn)行整合,減少操作。甚至電商產(chǎn)品中,可以通過(guò)找相似減少用戶的篩選成本。



(3) 系統(tǒng)智能預(yù)判,提供幫助

結(jié)合用戶的場(chǎng)景與行為,進(jìn)行合理的預(yù)判設(shè)計(jì),有助于縮短用戶操作路徑、引導(dǎo)用戶轉(zhuǎn)化。例如下面的案例,在表單信息填寫(xiě)中,通過(guò)智能判斷關(guān)聯(lián)內(nèi)容,提供幫助,甚至通過(guò)判斷用戶的行為,進(jìn)行精準(zhǔn)內(nèi)容推送。



3.4 常用的數(shù)據(jù)

通過(guò)以上數(shù)據(jù)的五個(gè)維度,可以發(fā)現(xiàn)數(shù)據(jù)的覆蓋面是十分廣泛的,不同的數(shù)據(jù)反映不同的內(nèi)容。在工作中我們也會(huì)接觸到復(fù)雜且多樣的數(shù)據(jù),對(duì)于設(shè)計(jì)師而言,常用的數(shù)據(jù)大致可以劃分為用戶數(shù)據(jù)、行為數(shù)據(jù)、業(yè)務(wù)數(shù)據(jù)這三大類別。



3.4.1 用戶數(shù)據(jù)

從字面上理解用戶數(shù)據(jù)即為與用戶有關(guān)的數(shù)據(jù),這種數(shù)據(jù)常常用來(lái)描述用戶人群、用戶基礎(chǔ)屬性等。通過(guò)一系列的“用戶數(shù)據(jù)”進(jìn)行支撐,可以快速梳理關(guān)于產(chǎn)品的基礎(chǔ)用戶群體,構(gòu)建用戶的畫(huà)像。

不同的產(chǎn)品屬性,有不同的用戶人群畫(huà)像。比如說(shuō)美柚這款記錄類APP,主要的用戶人群是年輕的女性,對(duì)生活有一定的追求;再比如說(shuō)英語(yǔ)流利說(shuō)這款產(chǎn)品,主要的用戶人群是年輕的、有明確學(xué)習(xí)英語(yǔ)需求的人群。

用戶數(shù)據(jù)主要包括兩大類別:用戶基本屬性與用戶生命周期數(shù)據(jù)。


a、用戶基本屬性

用戶基本屬性通俗解釋即為關(guān)于用戶自身最基本的屬性,包括性別、地域、年齡、職業(yè)、學(xué)歷、收入、婚姻狀況等等......通過(guò)這一系列的屬性,我們可以對(duì)用戶有一個(gè)更深刻、更全面的認(rèn)知。

只有更好的了解用戶,我們才能進(jìn)行針對(duì)化的設(shè)計(jì)產(chǎn)出、精準(zhǔn)投放,從而推動(dòng)產(chǎn)品更好的發(fā)展。這就好比兩個(gè)人談戀愛(ài),只有清楚對(duì)方的想法、習(xí)慣、喜好,才能減少吵架的幾率,實(shí)現(xiàn)和諧發(fā)展。



b、用戶生命周期數(shù)據(jù)

生命周期指的是從開(kāi)始到結(jié)束,用戶都會(huì)經(jīng)歷著從接觸到流失的階段,我們通過(guò)生命周期結(jié)合用戶數(shù)據(jù)可以簡(jiǎn)單分為新增、活躍、留存、流失。


1、新增用戶數(shù)

新增用戶從字面上拆解開(kāi)來(lái)即為新、增,廣泛意義上來(lái)說(shuō),我們可以將一段時(shí)間內(nèi)打開(kāi)產(chǎn)品的新用戶人數(shù)算作新增用戶,但是更嚴(yán)謹(jǐn)一點(diǎn)的話,則表示某產(chǎn)品一段時(shí)間內(nèi)新增加的注冊(cè)用戶數(shù)量。

通常我們將下載且訪問(wèn)過(guò)產(chǎn)品的用戶稱為訪客,這部分人群是潛在的注冊(cè)用戶。


2、活躍用戶數(shù)

活躍用戶在體驗(yàn)產(chǎn)品的過(guò)程中會(huì)花費(fèi)更多的時(shí)間與精力,相比普通用戶而言他們更加認(rèn)可平臺(tái),對(duì)于平臺(tái)的發(fā)展有著重要的地位。那什么是活躍用戶?如何具體的去定義活躍用戶呢?

通常來(lái)說(shuō),用戶在規(guī)定的時(shí)間周期內(nèi),有打開(kāi)過(guò)產(chǎn)品,這就算做一個(gè)活躍用戶。當(dāng)然,不同平臺(tái)對(duì)于活躍用戶的定義存在一定差異。而活躍用戶主要也分為兩類:新用戶與老用戶,而從商業(yè)的角度上還可以劃分為低價(jià)值用戶與高價(jià)值用戶。

活躍用戶數(shù)常見(jiàn)的指標(biāo)有DAU、WAU、MAU。

DAU:Daily Active User,表示日活躍用戶數(shù)量,指的是從0:00-24:00一個(gè)自然日(統(tǒng)計(jì)日)之間,登錄并使用了某一功能的用戶數(shù)量。

例:某個(gè)產(chǎn)品的日活計(jì)算方式為打開(kāi)該APP即算活躍,2022年1月19日這天打開(kāi)APP的行為有50次,經(jīng)排重后發(fā)現(xiàn)有30個(gè)用戶打開(kāi)了APP,那么該產(chǎn)品的DAU就是30。

了解完DAU,我相信大家對(duì)于WAU(周活躍用戶數(shù)量)與MAU(月活躍用戶數(shù)量)應(yīng)該不至于陌生了。WAU與MAU,他們兩者最大的區(qū)別就是計(jì)算周期的不同,但需要注意的是,月活的計(jì)算并不是簡(jiǎn)單的日活相加,我們需要進(jìn)行去重。



3、用戶留存率

在講解用戶留存率之前,我們應(yīng)該了解用戶留存。何為用戶留存?顧名思義,就是最終留下來(lái)的用戶。用戶留存率這一指標(biāo)可以反饋當(dāng)前產(chǎn)品的質(zhì)量如何,這是產(chǎn)品自初期開(kāi)始就需要持續(xù)關(guān)注的內(nèi)容。常用的用戶留存指標(biāo)有次日留存、3日留存、7日留存、15日留存和30日留存。



4、用戶流失

用戶流失的定義是什么?用戶流失需要結(jié)合時(shí)間(Time)與動(dòng)作(Action)這兩個(gè)指標(biāo)進(jìn)行,即用戶在一段特定時(shí)間內(nèi)未進(jìn)行關(guān)鍵行為的操作。與之常常相關(guān)聯(lián)的因素大致分為產(chǎn)品生命周期、負(fù)面體驗(yàn)、競(jìng)品策略等等。

用戶流失率的存在表明了用戶對(duì)產(chǎn)品的負(fù)面反映,對(duì)于產(chǎn)品發(fā)展有著非常重要的數(shù)據(jù)反饋。

當(dāng)下市場(chǎng)中的獲客成本越來(lái)越高,獲取新用戶的成本要比留住現(xiàn)有用戶的成本高出5倍。因此降低用戶流失率,就顯得尤為重要。



3.4.2 行為數(shù)據(jù)

行為數(shù)據(jù)常用來(lái)描述用戶使用方式,指的是用戶在使用產(chǎn)品過(guò)程中所產(chǎn)生的一系列交互相關(guān)的數(shù)據(jù),通過(guò)分析快速了解用戶特征,為流程優(yōu)化、精細(xì)化運(yùn)營(yíng)、產(chǎn)品體驗(yàn)等設(shè)計(jì)措施提供判斷依據(jù)、輔助設(shè)計(jì)。

行為數(shù)據(jù)的指標(biāo)主要包括轉(zhuǎn)化率、平均停留時(shí)長(zhǎng)、跳出率、PV、UV等等。

1、轉(zhuǎn)化率

什么是轉(zhuǎn)化率?轉(zhuǎn)化率就是下一頁(yè)面與當(dāng)前頁(yè)面的訪問(wèn)占比。它常常被用來(lái)衡量產(chǎn)品路徑中的用戶體驗(yàn)是否合理,從而進(jìn)一步推動(dòng)流程優(yōu)化以及設(shè)計(jì)迭代。

以下圖為例,有200個(gè)人來(lái)到了頁(yè)面A,其中有100人點(diǎn)擊頁(yè)面A的按鈕進(jìn)入頁(yè)面B,那么頁(yè)面A按鈕的轉(zhuǎn)化率則為(100/200)*100%=50%。


2、啟動(dòng)次數(shù)

通常指的是某一特定時(shí)間段內(nèi)用戶啟動(dòng)應(yīng)用的次數(shù)。與之相關(guān)的兩大指標(biāo)分別為用戶總啟動(dòng)次數(shù)與人均啟動(dòng)次數(shù),常用來(lái)反映用戶粘性與活躍度。


3、使用時(shí)長(zhǎng)

使用時(shí)長(zhǎng)是指某一特定時(shí)間段內(nèi)用戶從打開(kāi)到關(guān)閉產(chǎn)品的使用時(shí)間。使用時(shí)長(zhǎng)需關(guān)注的指標(biāo)為用戶總使用時(shí)長(zhǎng)、人均使用時(shí)長(zhǎng)、單次使用時(shí)長(zhǎng)。這些指標(biāo)常用來(lái)衡量用戶粘性與活躍度,常常需要與啟動(dòng)次數(shù)一起結(jié)合進(jìn)行分析。


4、訪問(wèn)分析

頁(yè)面訪問(wèn)分析包括頁(yè)面訪問(wèn)次數(shù)、停留時(shí)長(zhǎng)、跳出/退出率、用戶訪問(wèn)頁(yè)面數(shù)和用戶訪問(wèn)路徑。


(1) 訪問(wèn)次數(shù)

訪問(wèn)次數(shù)是指訪客完整打開(kāi)頁(yè)面進(jìn)行訪問(wèn)的次數(shù),常用來(lái)衡量產(chǎn)品的訪問(wèn)速度。

(2) 停留時(shí)長(zhǎng)

停留時(shí)長(zhǎng)表示用戶進(jìn)入產(chǎn)品中,呆了多長(zhǎng)時(shí)間后離去。這一指標(biāo)是考量用戶粘性以及貢獻(xiàn)度的重要指標(biāo)。

(3) 跳出率/退出率

跳出率,指的是只訪問(wèn)了入口頁(yè)面即退出的次數(shù)與入口頁(yè)面訪問(wèn)次數(shù)的占比數(shù)。

跳出率越低,說(shuō)明流量越好,用戶對(duì)產(chǎn)品的興趣越高。

計(jì)算公式為:跳出率=訪問(wèn)一個(gè)頁(yè)面后離開(kāi)的次數(shù)/總訪問(wèn)次數(shù)*100%

 

退出率是指從該頁(yè)面退出的頁(yè)面訪問(wèn)數(shù)與進(jìn)入該頁(yè)面的頁(yè)面訪問(wèn)數(shù)之比。

計(jì)算公式為:退出率=退出次數(shù)/總訪問(wèn)次數(shù)*100%


跳出率為(2/8)*100%=25%

退出率為{(2+2)/(8+2)}*100%=40%

 

注意:跳出率與退出率較高,也不全部都是壞事。我們需要具體問(wèn)題具體分析。比如說(shuō)某些下單頁(yè)面,點(diǎn)擊提交后會(huì)進(jìn)入第三方支付平臺(tái),該頁(yè)面跳出率高則為正常。



(4) 用戶訪問(wèn)頁(yè)面數(shù)

用戶訪問(wèn)頁(yè)面數(shù)常常離不開(kāi)兩方面的指標(biāo),PV值與UV值。

PV(Page View):指的是在一個(gè)特定周期內(nèi),頁(yè)面訪問(wèn)量或點(diǎn)擊量,側(cè)重瀏覽量。

用戶每訪問(wèn)一次就算作一個(gè)PV。

UV(User View):指的是在一個(gè)特定周期內(nèi),訪問(wèn)頁(yè)面的人數(shù)之和,側(cè)重訪客數(shù)。

一天內(nèi)同個(gè)用戶多次訪問(wèn)僅算作一個(gè)UV。



(5) 用戶訪問(wèn)路徑

用戶訪問(wèn)路徑是統(tǒng)計(jì)用戶從進(jìn)入產(chǎn)品到離開(kāi)產(chǎn)品整個(gè)過(guò)程中的路徑與頁(yè)面訪問(wèn)情況,不同的用戶路徑是不同的,我們需要去定位關(guān)鍵節(jié)點(diǎn),針對(duì)性的產(chǎn)出優(yōu)化方案。

如下圖所示,用戶在進(jìn)行針對(duì)性的查找歌曲時(shí),通過(guò)首頁(yè)的搜索入口進(jìn)入,在搜索引導(dǎo)頁(yè)面中輸入歌名,最終出現(xiàn)結(jié)果頁(yè)。通過(guò)用戶的訪問(wèn)路徑分析,可以為我們進(jìn)行優(yōu)化提供合理的切入點(diǎn)。





3.4.3 業(yè)務(wù)數(shù)據(jù)


1、ARPU

ARPU是 “The average revenue per user” 的縮寫(xiě),是指在某一周期內(nèi)用戶產(chǎn)生的平均收入,用來(lái)衡量單個(gè)用戶為企業(yè)所帶來(lái)的效益。

注意:ARPU值是有時(shí)間屬性的,我們?cè)谟?jì)算的時(shí)候需要有清楚的時(shí)間定義,不同的定義方法,計(jì)算出來(lái)的結(jié)果是有很大差異的。



2、付費(fèi)率

不同業(yè)務(wù)模式之間的付費(fèi)率計(jì)算方式是不同的,在進(jìn)行分析之前,我們就需要弄清楚分析的維度。

(1) 注冊(cè)用戶付費(fèi)率

注冊(cè)用戶付費(fèi)率=付費(fèi)人數(shù)/注冊(cè)人數(shù)

(2) 活躍用戶付費(fèi)率

活躍用戶付費(fèi)率=付費(fèi)人數(shù)/活躍用戶人數(shù)



3、GMV (成交金額

GMV (Gross Merchandise Volume),即成交金額。這個(gè)指標(biāo)常用在電商行業(yè),是用來(lái)衡量電商企業(yè)綜合實(shí)力的核心指標(biāo)。

GMV=真實(shí)成交金額+未付款訂單金額+拒收訂單金額+退貨訂單金額。簡(jiǎn)而言之就是GMV為已付款訂單與未付款訂單兩者之和。



4、LTV (用戶終身價(jià)值)

LTV(Life Time Value),為用戶生命周期價(jià)值。一般常用指標(biāo)為3日、5日、7日、30日、60日、90日LTV。常用來(lái)衡量用戶從開(kāi)始使用到不再使用產(chǎn)品的整個(gè)生命周期內(nèi),為企業(yè)貢獻(xiàn)了多少收入。

它的計(jì)算方式由兩部分組成:LTV=LTxARPU,LT為用戶生命周期,ARPU為每用戶平均收入。




四、數(shù)據(jù)分析思維

數(shù)據(jù)分析不僅僅是擺數(shù)據(jù),同時(shí)深度的結(jié)論也非常重要??沼袛?shù)據(jù),沒(méi)有結(jié)論,對(duì)于決策者而言并沒(méi)有什么明確的用處。那么,面對(duì)一堆數(shù)據(jù),我們?cè)撊绾畏治龅贸錾疃鹊慕Y(jié)論,從而驅(qū)動(dòng)決策?


4.1 數(shù)據(jù)來(lái)源

數(shù)據(jù)的獲取渠道有很多種方式,接下來(lái)分享幾個(gè)我在工作中經(jīng)常使用的方法。


4.1.1、數(shù)據(jù)分析平臺(tái)


注意:同一關(guān)鍵詞,不同平臺(tái)的搜索結(jié)果可能存在一定差異




4.1.2、內(nèi)部咨詢

平時(shí)的工作中,我們不能僅僅是沉浸在自己的世界,需要加強(qiáng)與其他同事之間的溝通交流。通過(guò)與用戶運(yùn)營(yíng)、數(shù)據(jù)分析師的交流,可以了解到最新的數(shù)據(jù)情況,時(shí)刻保持敏感度。

如果公司沒(méi)有專門(mén)的數(shù)據(jù)分析師,也可以從客服人員下手,他們無(wú)疑是與客戶打交道最直接的人了,他們對(duì)于用戶的痛點(diǎn)會(huì)更及時(shí)感知??梢酝ㄟ^(guò)詢問(wèn)客服人員,更好的了解用戶的痛點(diǎn)需求,輔助我們?cè)O(shè)計(jì)方案的執(zhí)行。




4.1.3、用戶反饋

我們可以通過(guò)多種方式了解用戶對(duì)于產(chǎn)品的反饋,比如說(shuō)Feedback用戶反饋,Twitter、Facebook等社交媒體,以及Google Play應(yīng)用商店評(píng)論等。



4.1.4、數(shù)據(jù)埋點(diǎn)

針對(duì)想要查看相關(guān)數(shù)據(jù)的模塊內(nèi)容,提交關(guān)鍵數(shù)據(jù)指標(biāo)給到數(shù)據(jù)分析師、開(kāi)發(fā)等,從而進(jìn)行一個(gè)定制化的內(nèi)容獲取。

注意:說(shuō)到這里就不得不提到數(shù)據(jù)埋點(diǎn),有一個(gè)需要我們注意的地方,那就是在進(jìn)行埋點(diǎn)時(shí),一定要在設(shè)計(jì)階段就提前告知開(kāi)發(fā)以及數(shù)據(jù)分析師,做好溝通工作,針對(duì)需要的數(shù)據(jù)進(jìn)行埋點(diǎn)處理。



4.1.5、需求評(píng)審

在需求評(píng)審前,設(shè)計(jì)師可以提前了解相關(guān)數(shù)據(jù),幫助我們對(duì)于設(shè)計(jì)層面有個(gè)更深刻的理解。在評(píng)審過(guò)程中,通過(guò)溝通碰撞了解到更多的數(shù)據(jù),也能依據(jù)之前項(xiàng)目的數(shù)據(jù)資料作為參考,輔助本次設(shè)計(jì)優(yōu)化。



4.1.6復(fù)盤(pán)分享

在一些大的項(xiàng)目上線一段時(shí)間后需要進(jìn)行數(shù)據(jù)反饋,大家針對(duì)結(jié)果做一個(gè)項(xiàng)目復(fù)盤(pán),開(kāi)展相關(guān)會(huì)議。在這結(jié)果之外,我們還需要關(guān)注是否產(chǎn)生了新問(wèn)題以及是否有新的機(jī)會(huì)發(fā)掘點(diǎn)。在復(fù)盤(pán)之后,針對(duì)知識(shí)點(diǎn)進(jìn)行共享,設(shè)計(jì)師可以通過(guò)這種方式了解更多信息,方便后期迭代。




4.2 甄別數(shù)據(jù)

數(shù)據(jù)的呈現(xiàn)往往告訴我們已經(jīng)發(fā)生了什么,但它沒(méi)有告訴我們將會(huì)發(fā)生什么。我們應(yīng)該利用數(shù)據(jù),從歷史中吸取教訓(xùn),也可以依據(jù)過(guò)去的趨勢(shì)預(yù)測(cè)未來(lái),甚至可能是非常準(zhǔn)確的預(yù)測(cè)。我們需要對(duì)數(shù)據(jù)有一個(gè)理性的判斷,進(jìn)行甄別。

4.2.1 虛榮數(shù)據(jù)

什么是虛榮數(shù)據(jù)?如果空有一個(gè)數(shù)據(jù),盡管該數(shù)字看起來(lái)很美,卻無(wú)法依靠該數(shù)據(jù)去進(jìn)行設(shè)計(jì)驅(qū)動(dòng)以及提供具體價(jià)值,那么該數(shù)據(jù)就是一個(gè)虛榮數(shù)據(jù),毫無(wú)意義。

以下幾個(gè)指標(biāo)則是常見(jiàn)的虛榮數(shù)據(jù),我們需要引起注意。


1、點(diǎn)擊量

無(wú)論什么網(wǎng)站,只要頁(yè)面上存在的可點(diǎn)擊區(qū)域多,那么該頁(yè)面的整體點(diǎn)擊量數(shù)字必然都比較高。相比之下,我們更應(yīng)該關(guān)注的是點(diǎn)擊人數(shù),而不是點(diǎn)擊次數(shù)。100個(gè)用戶每人點(diǎn)擊1次,與1個(gè)人點(diǎn)擊100次,后續(xù)帶來(lái)的結(jié)果是必然不同的。


2、下載量 

下載量的多少有時(shí)候會(huì)影響產(chǎn)品在應(yīng)用商店中的排名,但是這個(gè)數(shù)據(jù)指標(biāo)并不能帶來(lái)實(shí)際價(jià)值。反觀下載之后的注冊(cè)轉(zhuǎn)化率、付費(fèi)轉(zhuǎn)化率等等才是我們關(guān)注的重點(diǎn)。


3、用戶數(shù)

用戶數(shù)量越大,這個(gè)產(chǎn)品聽(tīng)起來(lái)似乎就越成功。但是產(chǎn)品的成功與否,并不僅僅取決于這一個(gè)數(shù)字,而是與之相關(guān)的一系列指標(biāo)。

比如說(shuō)A、B兩款產(chǎn)品的用戶量分別為100萬(wàn)以及50萬(wàn),用戶活躍度分別為1%與30%,其他都是沉默用戶,那么就一定能說(shuō)A產(chǎn)品要比B產(chǎn)品好嗎?

用戶數(shù)量再大,沒(méi)有體現(xiàn)出對(duì)應(yīng)的價(jià)值,那么就是虛擬數(shù)據(jù)。我們不能被這些虛擬數(shù)字所欺騙,還沾沾自喜。


4、停留時(shí)長(zhǎng)

用戶的停留時(shí)間越長(zhǎng)就說(shuō)明這個(gè)產(chǎn)品越好嗎?真的是由于產(chǎn)品的用戶體驗(yàn)做的足夠好而讓用戶產(chǎn)生了沉浸式的體驗(yàn)從而一直停留嗎?

用戶的停留時(shí)長(zhǎng)并不是越長(zhǎng)越好,這個(gè)指標(biāo)也無(wú)法直觀反映用戶對(duì)產(chǎn)品的粘性。我們更應(yīng)該結(jié)合完成度、內(nèi)容跳出率等數(shù)據(jù)進(jìn)行綜合判斷。




4.2.2 異常數(shù)據(jù)

數(shù)據(jù)分析過(guò)程中,也會(huì)存在很多異常數(shù)據(jù),需要從多個(gè)角度看待數(shù)據(jù),一般來(lái)說(shuō),產(chǎn)品的部分?jǐn)?shù)據(jù)指標(biāo)存在固定的波動(dòng)周期,當(dāng)某項(xiàng)數(shù)據(jù)指標(biāo)突然不符合常規(guī)波動(dòng)變化的時(shí)候,我們就需要去進(jìn)行深入的研究,挖掘異常背后的原因。


1、幸存者偏差

幸存者偏差是數(shù)據(jù)分析中常見(jiàn)的邏輯錯(cuò)誤,那么簡(jiǎn)單來(lái)說(shuō)是什么意思呢?

通過(guò)以上幾個(gè)例子,想必大家對(duì)于幸存者偏差都有一定的理解了吧。所謂幸存者偏差,即我們?cè)谶M(jìn)行統(tǒng)計(jì)的時(shí)候忽略了樣本的隨機(jī)性與全面性,用局部樣本代替總體樣本。歸根到底這就是由于獲取信息知識(shí)的不全導(dǎo)致的認(rèn)知偏差。這啟示我們?cè)诓榭磾?shù)據(jù)的時(shí)候,不能只看顯而易見(jiàn)的信息,同時(shí)還要找出沉默信息。否則,一定會(huì)存在著巨大偏差。


2、數(shù)據(jù)樣本不夠

在進(jìn)行數(shù)據(jù)提取的過(guò)程中,除了需要注意上面所描述的樣本選擇問(wèn)題上,還需保證足夠多的樣本數(shù)量來(lái)進(jìn)行支撐。按照常規(guī)定律來(lái)說(shuō),數(shù)據(jù)樣本達(dá)到一定的數(shù)量程度,才能展示出相對(duì)真實(shí)的規(guī)律。

例:比如說(shuō)我們?cè)诋a(chǎn)品中新增了一個(gè)功能,但是由于預(yù)算、人力資源等原因在前期的推廣宣傳階段并沒(méi)有多少曝光,只有一部分老用戶知道,這就說(shuō)明這個(gè)功能很失敗,沒(méi)有存在的意義嗎?答案未必是這樣。

所以在進(jìn)行數(shù)據(jù)提取時(shí),我們就需要盡可能的保證有足夠多的樣本數(shù)據(jù),這樣才能保證最終輸出的數(shù)據(jù)結(jié)果是最客觀的。


3、存在臟數(shù)據(jù)

臟數(shù)據(jù),也被稱為壞數(shù)據(jù),常常是指不合理、對(duì)于業(yè)務(wù)毫無(wú)用處的數(shù)據(jù)。

臟數(shù)據(jù)產(chǎn)生的原因有多種,數(shù)據(jù)統(tǒng)計(jì)過(guò)程中可能是由于輸入了多余空格、重復(fù)插入多余數(shù)據(jù)等等。在前期數(shù)據(jù)收集分析階段,例如問(wèn)卷調(diào)查,往往會(huì)存在很多無(wú)意義的問(wèn)卷,為了保證問(wèn)卷的準(zhǔn)確性,可以通過(guò)設(shè)置分支題目、陷阱題目等等方式來(lái)進(jìn)一步篩選問(wèn)卷,做好對(duì)臟數(shù)據(jù)的防控與清洗。



4.3 分析方法

接下來(lái)給大家分享幾個(gè)平時(shí)工作中常用的數(shù)據(jù)分析方法,包括以下幾種:漏斗分析法、矩陣分析法、對(duì)比分析法。


4.3.1 漏斗分析法

漏斗分析法是數(shù)據(jù)分析過(guò)程中非常重要的一種分析模型,能夠科學(xué)的反映用戶行為狀態(tài)以及從起點(diǎn)到終點(diǎn)各階段之間的用戶轉(zhuǎn)化情況。

常用的指標(biāo)包含轉(zhuǎn)化率與流失率。通過(guò)層層的分析,觀察流程中是否存在提高轉(zhuǎn)化率的機(jī)會(huì)點(diǎn),挖掘設(shè)計(jì)。(后面會(huì)結(jié)合實(shí)際項(xiàng)目為例進(jìn)行詳細(xì)闡述,這里就不做過(guò)多講解)


4.3.2 對(duì)比分析法

所謂的對(duì)比分析,就是給孤零零的數(shù)據(jù)一個(gè)合理的參考,否則這種數(shù)據(jù)是沒(méi)有意義的。在利用對(duì)比分析法進(jìn)行數(shù)據(jù)分析時(shí),需要關(guān)注兩個(gè)方面內(nèi)容:對(duì)比對(duì)象與對(duì)比維度。

在產(chǎn)品迭代測(cè)試的過(guò)程中,為了增強(qiáng)說(shuō)服力,擇決出最佳方案,往往會(huì)采用對(duì)比分析,也就是常說(shuō)的A/B Test。A/B Test最核心的思想是要保證單一變量,其他條件保證相同?;氐皆O(shè)計(jì)本身,一般來(lái)說(shuō)每個(gè)方案應(yīng)該大體上相同,只是某一個(gè)地方有所不同,比如某處文案、顏色、圖標(biāo)等。然后針對(duì)不同的用戶展示不同方案,統(tǒng)計(jì)并對(duì)比不同方案的轉(zhuǎn)化率、留存率等指標(biāo),從而確定最優(yōu)方案。


4.3.3 矩陣分析法

矩陣分析法常常是通過(guò)兩個(gè)指標(biāo)的交叉,利用分析矩陣劃分為四個(gè)象限,找出問(wèn)題的優(yōu)先級(jí)。

例:如下圖所示,為某個(gè)運(yùn)營(yíng)活動(dòng)點(diǎn)擊的四象限分布情況。X軸自左向右,Y軸自下而上,分別代表了從低到高。

通過(guò)矩陣分析的方式,我們可以快速定位當(dāng)前最值得的MVP優(yōu)化方式,指引我們?cè)趶?fù)雜的數(shù)據(jù)中正確前行。



五、數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)

作為一名設(shè)計(jì)師,在了解了數(shù)據(jù)基礎(chǔ)的內(nèi)容后,就需要掌握通過(guò)數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)最關(guān)鍵的內(nèi)容,接下來(lái)我將通過(guò)用戶、行為、業(yè)務(wù)三個(gè)角度來(lái)給大家分享幾個(gè)不錯(cuò)的設(shè)計(jì)案例。


5.1 用戶增長(zhǎng)

通過(guò)上面的分析,我們了解到用戶數(shù)據(jù)涉及到兩個(gè)方面,用戶的基礎(chǔ)屬性數(shù)據(jù)可以很好的輔助設(shè)計(jì),通過(guò)數(shù)據(jù)對(duì)用戶進(jìn)行分層,例如性別、年齡、地域,這些都是常見(jiàn)的用戶基礎(chǔ)屬性;

除此之外,與用戶相關(guān)并關(guān)聯(lián)產(chǎn)品的重要數(shù)據(jù)還包括新增用戶、用戶活躍度、用戶留存率、用戶流失率等數(shù)據(jù),我們可以通過(guò)這些數(shù)據(jù)的表現(xiàn)挖掘背后的原因,進(jìn)而通過(guò)設(shè)計(jì)手法深入優(yōu)化促進(jìn)用戶數(shù)據(jù)增長(zhǎng),形成閉環(huán)。簡(jiǎn)單分享以下幾個(gè)方法。


5.1.1 產(chǎn)品拉新

關(guān)于產(chǎn)品拉新,并不只是產(chǎn)品上線后需要考慮的事情,在產(chǎn)品設(shè)計(jì)的每一環(huán)節(jié)中,都是需要去進(jìn)行考慮的。產(chǎn)品拉新可以通過(guò)邀請(qǐng)碼、新手福利、邀請(qǐng)好友等幾個(gè)方面進(jìn)行。


1、邀請(qǐng)碼

邀請(qǐng)碼通常是由企業(yè)發(fā)放,優(yōu)先發(fā)放給種子用戶,然后通過(guò)種子用戶的社交圈去進(jìn)行擴(kuò)散,進(jìn)而吸引更多的用戶參與進(jìn)來(lái)。

前段時(shí)間爆火的一款國(guó)外音頻社交軟件Clubhouse,便是利用了這種方式進(jìn)行擴(kuò)散傳播。與Facebook、Instagram、Twitter等社交軟件有所區(qū)別,Clubhouse并沒(méi)有對(duì)全部用戶開(kāi)放,而是需要得到其他用戶發(fā)出的邀請(qǐng)碼驗(yàn)證后才能進(jìn)行使用。邀請(qǐng)碼的稀缺性將Clubhouse的熱度炒得越來(lái)越高,使得參與其中的用戶能產(chǎn)生一種自我滿足感,同時(shí)這種模式大大保證了音頻內(nèi)容的質(zhì)量。


2、新手福利

一些產(chǎn)品針對(duì)未注冊(cè)或者未使用過(guò)產(chǎn)品的新用戶,會(huì)發(fā)放專屬福利,促進(jìn)用戶轉(zhuǎn)化。

新手福利通常是以開(kāi)屏頁(yè)、Banner、彈窗、活動(dòng)頁(yè)、新手任務(wù)等形式進(jìn)行領(lǐng)取,隨著市場(chǎng)環(huán)境的緊張,獲客成本越來(lái)越高,新手福利的成本的也在逐漸增加。


3、邀請(qǐng)好友

針對(duì)注冊(cè)或使用過(guò)產(chǎn)品的用戶而言,通過(guò)發(fā)掘他們自身的社交圈子,促使老用戶自覺(jué)邀請(qǐng)新用戶,提升產(chǎn)品的用戶數(shù)量增長(zhǎng)。

邀請(qǐng)好友有以下兩個(gè)常見(jiàn)方式:

(1) 增加分享入口

老用戶可通過(guò)點(diǎn)擊分享圖標(biāo)的形式直接分享給相應(yīng)的好友。比如說(shuō),網(wǎng)易云音樂(lè)這款產(chǎn)品,用戶可以邀請(qǐng)好友一同在線聽(tīng)歌,或者是單獨(dú)分享給特定的人。這種方式主要是利用了人的分享和展示心理。

(2) 福利刺激

平臺(tái)發(fā)放一定的優(yōu)惠券、獎(jiǎng)勵(lì)等給到用戶,新老用戶都可以通過(guò)這種方式獲得對(duì)應(yīng)的獎(jiǎng)勵(lì)。這種方式主要是利用了人的獲利心理。


5.1.2 活躍運(yùn)營(yíng)

活躍運(yùn)營(yíng)可以提升沉默用戶的活躍度,對(duì)于產(chǎn)品的發(fā)展有著非常重要的作用,常常通過(guò)一系列的方式來(lái)進(jìn)行布局。

1、用戶積分體系

積分體系如果運(yùn)用的好,那么對(duì)于增加用戶粘性以及提升活躍度是非常有幫助的。這個(gè)積分體系是否能夠吸引到用戶,就在于積分所兌換的產(chǎn)品是否有足夠價(jià)值。

比如說(shuō)常見(jiàn)的外賣(mài)平臺(tái)——餓了么的積分體系,其核心就是圍繞下單行為而展開(kāi),下單之后返還吃貨豆,吃貨豆可兌換紅包,紅包再次消費(fèi)抵扣。整個(gè)操作流程,圍繞用戶的核心行為構(gòu)建獎(jiǎng)勵(lì)并形成閉環(huán)。


2、簽到

很多產(chǎn)品都設(shè)置了簽到功能,希望借此方式提升用戶粘性。這一功能的常見(jiàn)名稱為“簽到”“打卡”,或者根據(jù)運(yùn)營(yíng)活動(dòng)的場(chǎng)景來(lái)進(jìn)行命名,比如說(shuō)螞蟻莊園、新浪種樹(shù)等。

一種良好的簽到模式對(duì)于用戶習(xí)慣的培養(yǎng)是有著積極的正向作用的,但是關(guān)于在產(chǎn)品中是否增加該功能,也是要根據(jù)自身的產(chǎn)品特性去進(jìn)行更細(xì)致的考量。

簽到的方式主要有自動(dòng)簽到與手動(dòng)簽到這兩種。

(1)自動(dòng)簽到

登錄自動(dòng)簽到的方式常見(jiàn)于游戲類應(yīng)用中,比如說(shuō)王者榮耀這款產(chǎn)品,用戶打開(kāi)即以彈窗形式告知用戶,領(lǐng)取相應(yīng)的獎(jiǎng)勵(lì)。

(2)手動(dòng)簽到

用戶點(diǎn)擊簽到入口,即可完成簽到。相比自動(dòng)簽到而言,這種簽到方式應(yīng)用范圍更加廣泛。


3、社區(qū)

現(xiàn)如今越來(lái)越多的產(chǎn)品開(kāi)始打造自己的社區(qū),比如說(shuō)淘寶的逛逛,咸魚(yú)的會(huì)玩等等。為什么社區(qū)功能越來(lái)越普遍呢?社區(qū)的存在,可以讓用戶在產(chǎn)品有一個(gè)屬于自己的社交圈子,這樣有助于用戶產(chǎn)生粘性,從而提升產(chǎn)品活躍度。

例:Keep通過(guò)打造高品質(zhì)的UGC內(nèi)容社區(qū),滿足新老用戶的價(jià)值需求。頂部Tab分為關(guān)注、精選、圈子三個(gè)模塊。關(guān)注一欄方便用戶快速查看自己感興趣的人,滿足社交需求。精選一欄承載了KOL與內(nèi)容生產(chǎn)者的分享內(nèi)容、用戶社交留存功能。圈子一欄更好的滿足用戶想要一群人打卡的情感訴求。


5.1.3 留存

留存的本質(zhì)是要滿足用戶的核心需求,只有滿足了這個(gè)條件后用戶才會(huì)持續(xù)使用。它應(yīng)該貫穿于整個(gè)用戶生命周期,而不僅僅是局限于其中某一個(gè)節(jié)點(diǎn)。好了,廢話不多說(shuō),直接上例子。

1、流暢的首次體驗(yàn)

用戶首次使用該產(chǎn)品時(shí)是否順暢,能否在第一時(shí)間找到自己所需要的內(nèi)容,很大程度上會(huì)影響用戶后續(xù)的留存情況。

比如說(shuō)現(xiàn)如今很多產(chǎn)品為了降低用戶的登錄注冊(cè)成本,通過(guò)手機(jī)號(hào)一鍵注冊(cè)即可實(shí)現(xiàn)快速登錄。若未注冊(cè)過(guò),在登錄時(shí)系統(tǒng)會(huì)自動(dòng)判斷并為其創(chuàng)建賬號(hào)。這種方式極大的降低了用戶記憶成本,同時(shí)還有安全性的保障。


2、降低學(xué)習(xí)成本

通常來(lái)說(shuō)一款產(chǎn)品的學(xué)習(xí)成本越高,用戶理解起來(lái)就越困難,那么用戶長(zhǎng)期留在該平臺(tái)的概率就會(huì)降低,故而我們應(yīng)該通過(guò)一些設(shè)計(jì)手法去降低用戶的學(xué)習(xí)成本。

例如一些金融產(chǎn)品,其晦澀難懂的專業(yè)知識(shí)對(duì)于新手小白來(lái)說(shuō)真的是非常困難,基本的認(rèn)知都存在困難的前提下,更別說(shuō)指望用戶轉(zhuǎn)化了?;诖吮尘?,新手引導(dǎo)提示、新手教學(xué)視頻、在線客服服務(wù)、模擬交易等等方案,都會(huì)極大的降低用戶理解成本,為后續(xù)用戶的下單轉(zhuǎn)化提供有力的幫助。


3、遷移成本

何為用戶遷移成本?用戶選擇新產(chǎn)品的行為需承擔(dān)的代價(jià)。隨著遷移成本的增加,用戶長(zhǎng)期使用該產(chǎn)品的概率也會(huì)相應(yīng)增加。

例如有道云筆記這款產(chǎn)品,用戶在該平臺(tái)創(chuàng)作了大量的內(nèi)容后,就很有可能會(huì)長(zhǎng)期留在該平臺(tái),因?yàn)橹匦聯(lián)Q平臺(tái)的成本著實(shí)有點(diǎn)高。




5.1.4 挽留機(jī)制

挽留機(jī)制是留住用戶、促進(jìn)用戶轉(zhuǎn)化的最后一道程序。

常見(jiàn)的挽留機(jī)制有以下幾種形式:

1、提供解決方案

當(dāng)淘寶用戶在進(jìn)行退款時(shí),若原因是地址填寫(xiě)錯(cuò)誤,那么頁(yè)面會(huì)自動(dòng)出現(xiàn)彈窗提醒用戶修改即可,避免用戶取消訂單,從而降低退款率。


2、利益刺激

當(dāng)用戶退出購(gòu)買(mǎi)頁(yè)面關(guān)鍵節(jié)點(diǎn)時(shí),會(huì)以彈窗形式進(jìn)行挽留。

例:知乎會(huì)員購(gòu)買(mǎi)頁(yè)面退出時(shí),系統(tǒng)會(huì)自動(dòng)出現(xiàn)二次確認(rèn)彈窗,將價(jià)值點(diǎn)信息以動(dòng)效形式展示在視覺(jué)中心,并對(duì)支付按鈕進(jìn)行突出設(shè)計(jì),吸引用戶注意,再次挽留。

例:拼多多的二次挽留同樣以彈窗形式展示,突出利益點(diǎn),同時(shí)有時(shí)間維度,使得用戶產(chǎn)生緊迫感,刺激用戶下單。


3、操作警告

操作警告類的文案二次提示,可以讓用戶對(duì)當(dāng)前行為有更清楚的認(rèn)知,并仔細(xì)思考。用戶會(huì)考慮到一些時(shí)間成本、花費(fèi)精力等因素,可能會(huì)取消放棄的念頭。

例:全民K歌這款應(yīng)用,用戶想要?jiǎng)h除之前發(fā)布過(guò)的創(chuàng)作內(nèi)容,點(diǎn)擊刪除之后,會(huì)出現(xiàn)二次警示確認(rèn)彈窗,對(duì)用戶的行為進(jìn)行一個(gè)挽留。就算最終用戶刪除了創(chuàng)造內(nèi)容,還可以在最新刪除列表中恢復(fù)。這樣既可以避免用戶誤操作引起的后果,還能最大程度的保護(hù)創(chuàng)作內(nèi)容的多樣化存在。




5.2 行為優(yōu)化

行為數(shù)據(jù)描述用戶使用方式,雖然與用戶相關(guān),但更加關(guān)注的是使用的流程、方式與產(chǎn)品體驗(yàn),其中重點(diǎn)關(guān)注的數(shù)據(jù)包含點(diǎn)擊率、轉(zhuǎn)化率、訪問(wèn)分析等。


5.2.1 行為場(chǎng)景復(fù)現(xiàn)

深入分析用戶的訪問(wèn)數(shù)據(jù),模擬行為場(chǎng)景,更好的把握用戶當(dāng)下的心理,從用戶角度出發(fā)去設(shè)計(jì)。下面,我將以一個(gè)工作中的實(shí)際項(xiàng)目為例,詳細(xì)闡述如何從設(shè)計(jì)側(cè)推動(dòng)項(xiàng)目迭代。

例如我們接到一個(gè)需求,需要進(jìn)行注冊(cè)流程的優(yōu)化,提升這一模塊的轉(zhuǎn)化率。很多時(shí)候,我們往往會(huì)陷于視覺(jué)層面進(jìn)行調(diào)整,但這并不能從根本上解決問(wèn)題。我們需要靜下心來(lái)仔細(xì)思考,真正找到這個(gè)需求背后的目的以及當(dāng)前存在的問(wèn)題。

那么我們可以怎樣去進(jìn)行呢?首先,為了對(duì)用戶行為有更直觀的理解與感受,可以利用用戶體驗(yàn)地圖的形式將用戶行為場(chǎng)景復(fù)現(xiàn),通過(guò)對(duì)用戶的情緒曲線、想法的剖析,從中找到合適的機(jī)會(huì)點(diǎn),為后續(xù)設(shè)計(jì)的迭代優(yōu)化提供一定思路。

通過(guò)對(duì)用戶的旅程進(jìn)行分析,可以發(fā)現(xiàn)在不同關(guān)鍵階段中所對(duì)應(yīng)的數(shù)據(jù)指標(biāo)也不同。因此在設(shè)計(jì)的過(guò)程中可以針對(duì)不同的行為場(chǎng)景,制定對(duì)應(yīng)的數(shù)據(jù)優(yōu)化目標(biāo),從而提升整體的產(chǎn)品價(jià)值。



5.2.2 行為路徑優(yōu)化

用戶的行為是決策的重要因素,了解用戶的行為和意圖后,會(huì)發(fā)現(xiàn)大部分用戶的行為與設(shè)計(jì)會(huì)存在很大的偏差,所以需要更多關(guān)注用戶的行為數(shù)據(jù),揣摩用戶行為下的真實(shí)心理與訴求,才能做出用戶滿意的產(chǎn)品。

緊接著上面的案例,咱們繼續(xù)通過(guò)漏斗模型進(jìn)行深入分析,優(yōu)化用戶在登錄注冊(cè)路徑上的體驗(yàn),提升轉(zhuǎn)化率。

原有的登錄流程轉(zhuǎn)化率如下圖所示


1、快速定位問(wèn)題環(huán)節(jié)

通過(guò)數(shù)據(jù)反饋,發(fā)現(xiàn)從注冊(cè)頁(yè)面到點(diǎn)擊注冊(cè)按鈕這頁(yè)面之間存在較高的流失率,其次再是安全驗(yàn)證頁(yè)面。我們需要對(duì)這一流程中的關(guān)鍵節(jié)點(diǎn)進(jìn)行梳理,同時(shí)將主要的精力聚焦于該模塊的優(yōu)化。針對(duì)流失率較高的主要頁(yè)面進(jìn)行著重設(shè)計(jì)。


2、分析問(wèn)題

通過(guò)數(shù)據(jù)分析可知,用戶很大一部分都在點(diǎn)擊注冊(cè)按鈕這一頁(yè)面流失掉了,當(dāng)前頁(yè)面的停留時(shí)長(zhǎng)較長(zhǎng),那么我們是否可以縮短停留時(shí)長(zhǎng),幫助用戶快速注冊(cè)呢?該怎樣設(shè)計(jì)才能提高用戶的操作效率呢?


3、方案輸出

通過(guò)聚焦問(wèn)題后,發(fā)現(xiàn)最終我們的落腳點(diǎn)應(yīng)該在如何提升用戶的操作效率,幫助用戶快速完成注冊(cè)。

針對(duì)此設(shè)計(jì)目標(biāo),運(yùn)用競(jìng)品分析、用戶體驗(yàn)地圖等方式對(duì)于該模塊進(jìn)行了思維拓展。提出了一些可行性方案,比如在輸入郵箱時(shí)增加常用高頻郵箱格式后綴,減少用戶手動(dòng)輸入的步驟;比如增加用戶輸入錯(cuò)誤之后的快捷刪除圖標(biāo),方便用戶一鍵操作.....等等(詳細(xì)的可見(jiàn)之前項(xiàng)目復(fù)盤(pán))。


4、數(shù)據(jù)驗(yàn)證

在設(shè)計(jì)上線一段時(shí)期后,查看數(shù)據(jù)情況。

經(jīng)過(guò)一段時(shí)間的驗(yàn)證,漏斗模型的數(shù)據(jù)轉(zhuǎn)化有了很大提升。再次驗(yàn)證,此次改版方案較為成功。

以上案例大致展示了工作中如何運(yùn)用數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)的常規(guī)流程與方法。從整體漏斗分析原因,定位關(guān)鍵問(wèn)題節(jié)點(diǎn),進(jìn)而推動(dòng)問(wèn)題環(huán)節(jié)的優(yōu)化,最終解決問(wèn)題。



5.3 價(jià)值體現(xiàn)

數(shù)據(jù)會(huì)給到我們一定的指導(dǎo)作用,我們需要對(duì)數(shù)據(jù)進(jìn)行深入思考,從設(shè)計(jì)的層面去賦能業(yè)務(wù)。從宏觀的角度去看待業(yè)務(wù)價(jià)值的增長(zhǎng)點(diǎn),尋找設(shè)計(jì)機(jī)會(huì)。那么我們?cè)撊绾瓮ㄟ^(guò)設(shè)計(jì)手段提升業(yè)務(wù)價(jià)值呢?產(chǎn)品價(jià)值的實(shí)現(xiàn)離不開(kāi)用戶,從用戶的角度進(jìn)行拆解分析,可以更好的洞察到機(jī)會(huì)點(diǎn)。

例如我們需要提升會(huì)員模塊的開(kāi)卡率,該怎么進(jìn)行落地執(zhí)行呢?


5.3.1 目標(biāo)拆解

我們將用戶的行為路徑劃分為感知——決策——行動(dòng)——傳播這幾個(gè)主要階段,通過(guò)體驗(yàn)地圖,深挖可優(yōu)化的空間。

通過(guò)流程的梳理,將目標(biāo)進(jìn)行拆解,我們可以從中找到一些值得優(yōu)化的地方。



5.3.2 設(shè)計(jì)方案

有明確的設(shè)計(jì)目標(biāo)之后,我們就需要針對(duì)每一節(jié)點(diǎn)進(jìn)行針對(duì)性的設(shè)計(jì)。

1、感知階段-用戶觸達(dá)

當(dāng)前會(huì)員購(gòu)買(mǎi)的入口隱藏的過(guò)深,很多用戶都對(duì)該模塊的存在缺少認(rèn)知。要想會(huì)員卡的購(gòu)買(mǎi)率有所提升,最基本的舉措就是要加大對(duì)其宣傳力度。因此,我們需要增強(qiáng)用戶感知。常見(jiàn)的形式有Push推送、郵件、短信等等,吸引用戶去查看相關(guān)的內(nèi)容,并引導(dǎo)后續(xù)轉(zhuǎn)化。

我們需要提升關(guān)于會(huì)員內(nèi)容的用戶感知,就可以嘗試在首頁(yè)增加會(huì)員入口。宣傳的形式可以采用Banner圖,方便用戶直接點(diǎn)擊就可進(jìn)入了解詳情。另外,產(chǎn)品頁(yè)面還可增加氣泡文案引導(dǎo),底部懸浮彈窗等等,增強(qiáng)用戶的感知。

有一個(gè)需要特別注意的地方,就是在進(jìn)行宣傳引導(dǎo)時(shí),一定要考慮到產(chǎn)品自身的屬性,進(jìn)行差異化設(shè)計(jì)。比如說(shuō)海外產(chǎn)品的用戶一般都很討厭廣告,那么我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候就要做到克制。在滿足運(yùn)營(yíng)需求的前提下,盡量減少對(duì)用戶造成不好的體驗(yàn)。


2、決策階段-價(jià)值觸達(dá)

用戶受吸引來(lái)查看會(huì)員相關(guān)內(nèi)容時(shí),我們需要對(duì)會(huì)員的價(jià)值進(jìn)行一個(gè)高效快捷的輸出傳遞。只有讓用戶在該階段感受到價(jià)值大于價(jià)格,才會(huì)有后續(xù)的購(gòu)買(mǎi)行動(dòng)。在會(huì)員權(quán)益模塊,需要根據(jù)用戶的狀態(tài)進(jìn)行區(qū)分,針對(duì)化展示。人群大致劃分為普通用戶、會(huì)員與過(guò)期會(huì)員。

我們可以通過(guò)一些設(shè)計(jì)手法,強(qiáng)化用戶的價(jià)值觸達(dá)感知。

(1)文案刺激。告訴用戶辦會(huì)員卡一年預(yù)計(jì)能省下多少錢(qián)。

(2)增加計(jì)算器功能,讓用戶根據(jù)自己的習(xí)慣輸入預(yù)計(jì)交易額,更智能的感知優(yōu)惠。

(3)向用戶發(fā)放一定的優(yōu)惠券,并增加倒計(jì)時(shí),出于沉沒(méi)成本,用戶轉(zhuǎn)化的幾率很有可能會(huì)增加。

(4)人數(shù)比例展示,利用人的從眾心理,促進(jìn)購(gòu)買(mǎi)。



3、行動(dòng)階段-購(gòu)買(mǎi)轉(zhuǎn)化

到了行動(dòng)階段,用戶的整體購(gòu)買(mǎi)流程是否高效、是否順暢則成了我們需要關(guān)注的重點(diǎn)。我們?cè)诂F(xiàn)階段的設(shè)計(jì)策略,可通過(guò)以下方式進(jìn)行展開(kāi):


(1)避免用戶過(guò)多選擇

原有的會(huì)員頁(yè)面將三種會(huì)員模式全都展示出來(lái)讓用戶自己選擇,對(duì)于很多新手來(lái)說(shuō)這無(wú)疑是非常困難的,會(huì)員的購(gòu)買(mǎi)率也比較低。更新后,我們將會(huì)員的價(jià)值點(diǎn)簡(jiǎn)單的羅列出來(lái),讓用戶可以直觀的了解會(huì)員卡的優(yōu)勢(shì),同時(shí)會(huì)員卡按照時(shí)間周期與價(jià)格劃分為3個(gè)不同的層級(jí),針對(duì)平臺(tái)主推的年卡,增加標(biāo)簽,強(qiáng)化感知。


(2)減少頁(yè)面跳轉(zhuǎn)

用戶在進(jìn)行購(gòu)買(mǎi)時(shí),無(wú)需跳轉(zhuǎn)頁(yè)面,只需在當(dāng)前頁(yè)面操作即可。懸浮收銀臺(tái)的形式,可以避免用戶在跳轉(zhuǎn)頁(yè)面之間可能帶來(lái)的數(shù)據(jù)流失,最大化的保障用戶購(gòu)買(mǎi)行為的完成。


4、分享階段-持續(xù)正向裂變

用戶完成分享即可獲得相對(duì)的獎(jiǎng)勵(lì),被分享的新用戶再進(jìn)入產(chǎn)品進(jìn)行體驗(yàn),即可獲得新用戶獎(jiǎng)勵(lì)。在進(jìn)行分享的操作中,有以下優(yōu)化方向。

(1) 增加分享引導(dǎo)

可以通過(guò)文案引導(dǎo)、運(yùn)營(yíng)位的形式進(jìn)行宣傳,吸引用戶進(jìn)行分享操作。

(2) 優(yōu)化分享體驗(yàn)

增加分享的渠道,引入常用的Twitter、Facebook、Telegram等社交平臺(tái);

增加用戶分享圖的制作,為用戶提供更多的選擇空間。




六、總結(jié)

數(shù)據(jù)驅(qū)動(dòng)是一項(xiàng)長(zhǎng)期的工作,需要去不斷的跟蹤、反饋,通過(guò)不斷的數(shù)據(jù)驅(qū)動(dòng),才能推動(dòng)設(shè)計(jì)的更優(yōu)發(fā)展。在日常的工作中,我們需要對(duì)數(shù)據(jù)保持敏感,從這些數(shù)據(jù)背后找出真正的原因,并進(jìn)行針對(duì)性的優(yōu)化。設(shè)計(jì)師了解一定的數(shù)據(jù)知識(shí),可以更好的輔助我們進(jìn)行設(shè)計(jì)產(chǎn)出,使得我們的方案更有說(shuō)服度。

感謝閱讀,以上就是我要分享的如何利用數(shù)據(jù)驅(qū)動(dòng)設(shè)計(jì)的全部?jī)?nèi)容。

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


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

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


如何促使用戶更快的決策

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

設(shè)計(jì)師不僅僅只是個(gè)畫(huà)圖仔,而更應(yīng)該懂得用戶心理學(xué),明白用戶行為背后的動(dòng)機(jī)。利用這幾個(gè)用戶心理學(xué),我們將可以促使用戶更快的做出決策。


一、損失規(guī)避

人們獲得損失時(shí)產(chǎn)生的痛苦遠(yuǎn)大于獲得收益時(shí)所帶來(lái)的快樂(lè)!心理學(xué)家把這種對(duì)損失更加敏感的底層心里狀態(tài)叫做損失規(guī)避。


其實(shí)簡(jiǎn)單來(lái)說(shuō)就是,相比于得到,你更在意失去。


舉個(gè)例子:你今天在上班的路上撿到100元錢(qián),心里很高興??墒且徊恍⌒陌彦X(qián)弄丟了,那么你就會(huì)很沮喪了,甚至一天的心情都會(huì)很不好,雖然說(shuō)這錢(qián)本來(lái)就不屬于你的。


我們可以用損失規(guī)避系數(shù)來(lái)描述人們對(duì)不同東西損失規(guī)避的程度。對(duì)于一般的消費(fèi)品,損失規(guī)避系數(shù)大概是2,也就是說(shuō),人們需要得到2倍于原先的價(jià)格才肯放棄已經(jīng)擁有的商品。


損失規(guī)避系數(shù)因不同的事物而不同,如果涉及到情感等方面的因素,損失規(guī)避系數(shù)就會(huì)大大上升,一旦涉及到健康和生命等問(wèn)題,損失規(guī)避系數(shù)就成百上千地增長(zhǎng)了。這就解釋了在商場(chǎng)買(mǎi)衣服你會(huì)跟銷(xiāo)售員討價(jià)還價(jià),但在醫(yī)院你絕對(duì)不敢跟醫(yī)生討價(jià)還價(jià)。


我們習(xí)慣于自然地規(guī)避風(fēng)險(xiǎn),因而更加辛苦地工作只為避免一些微不足道的損失,而不愿冒險(xiǎn)去爭(zhēng)取更大的回報(bào)。規(guī)避損失是人的本性。這也解釋了為什么大多數(shù)人只能上班,而創(chuàng)業(yè)者始終只是極少數(shù)。


那么,有哪些利用了損失規(guī)避心理的案例?


a.強(qiáng)調(diào)“失去”,而非“得到”


因?yàn)槿说男睦韺?duì)損失更在意,因此要告訴用戶如果不買(mǎi),會(huì)受到什么樣的損失。


對(duì)比以下兩個(gè)文案:

達(dá)芬奇畫(huà)作世界巡展,邀請(qǐng)來(lái)感受世界傳世名畫(huà)的魅力。

達(dá)芬奇畫(huà)作世界巡展,如果不來(lái),你將失去一生中唯一一次和世界傳世名畫(huà)邂逅的機(jī)會(huì)。


你覺(jué)得哪種方式更吸引你?


b.天貓雙11紅包

每年的雙11活動(dòng),天貓都會(huì)提前給你發(fā)一堆的紅包,雖然數(shù)額不大。但規(guī)定只能在雙11當(dāng)天使用。這時(shí)你就會(huì)心甘情愿的在當(dāng)天剁手,因?yàn)槿绻悴毁I(mǎi),就會(huì)白白浪費(fèi)掉這些紅包。而人的心理對(duì)損失是很抗拒的。



c.以舊換新

京東家電類目有個(gè)以舊換新的服務(wù),以前我一直搞不明白這樣做的目的何在?現(xiàn)在才知道,原來(lái)這也是利用了人的損失規(guī)避心理。


消費(fèi)者想買(mǎi)新電器,但是家里已經(jīng)有一個(gè),直接丟掉會(huì)感覺(jué)浪費(fèi)。那商家搞以舊換新,用舊家電抵扣一部分錢(qián),這比直接給打折優(yōu)惠,對(duì)消費(fèi)者來(lái)說(shuō)更有誘惑力。因?yàn)槟闶召?gòu)了客戶的二手電器,讓他感覺(jué)自己的舊家電沒(méi)有白白浪費(fèi)了。



二、錨定效應(yīng)


所謂“錨定效應(yīng)”是指人們?cè)谧鰶Q定或下判斷前,容易受到之前的信息影響,該信息猶如一個(gè)沉重的錨,沉到了海底,讓你的思維以該信息為基準(zhǔn),在它的一定范圍內(nèi)做判斷。


簡(jiǎn)單來(lái)說(shuō),就是當(dāng)你在作決策之前,需要一個(gè)參考,貨比多家。比如:你去菜市場(chǎng)買(mǎi)菜,你第一次買(mǎi)這個(gè)菜,你根本就不知道這個(gè)價(jià)格是否合理,這時(shí)候你不好決定是否買(mǎi),你就會(huì)去多問(wèn)幾家。從而內(nèi)心會(huì)形成對(duì)這個(gè)菜的價(jià)格錨定。


生活中錨定效應(yīng)無(wú)處不在:

在線下超市我們會(huì)經(jīng)??吹缴唐方ㄗh零售價(jià)100元,而實(shí)際售價(jià)78元。各大電商平臺(tái)也采用了這種價(jià)格的對(duì)比效果,加快用戶的決策。


在線下的服裝店商家非常喜歡開(kāi)一個(gè)天價(jià)然后等你還價(jià),開(kāi)價(jià)150元,到最后居然能還到50元,這水分……


你去婚紗攝影店咨詢,開(kāi)始銷(xiāo)售員會(huì)給一個(gè)比較高的價(jià)格,然后后面會(huì)自主動(dòng)給你減掉一千,這樣很容易讓消費(fèi)都產(chǎn)生購(gòu)買(mǎi)的沖動(dòng)。


你去電腦城買(mǎi)電腦,當(dāng)你買(mǎi)完電腦后,這時(shí)銷(xiāo)售員給你推薦電腦保護(hù)套,你很容易會(huì)購(gòu)買(mǎi),因?yàn)槟銜?huì)想這么貴的電腦都買(mǎi)了, 這幾十塊錢(qián)的保護(hù)套自然就不在話下了。但如果直接叫你買(mǎi)保護(hù)套的話,你就沒(méi)那么容易產(chǎn)生購(gòu)買(mǎi)行為。


還有奶茶店價(jià)格菜單也是經(jīng)過(guò)設(shè)計(jì)的,通常會(huì)采用降序排列,這種排列方式更有利于顧客購(gòu)買(mǎi)。因?yàn)橛脩艨吹降牡谝粋€(gè)貴的價(jià)格會(huì)形成錨,往下價(jià)格越便宜,消費(fèi)者更容易決策。


三、羊群效應(yīng)

在一群羊前面橫放一根木棍,第一只羊跳了過(guò)去,第二只、第三只也會(huì)跟著跳過(guò)去,這時(shí)候,如果把那根木棍撤走,盡管攔路的棍子已經(jīng)不在了,后面的羊,走到這里,仍然會(huì)像前面的羊一樣,向上跳一下。這樣的群體盲目跟從就是所謂的“羊群效應(yīng)”,也稱為“從眾心理”


這些動(dòng)物的行為看起來(lái)愚蠢搞笑,可是看看我們自己,又何嘗不是如此呢?從眾是一種普遍的社會(huì)心理和行為現(xiàn)象,在很多情況下,人們都會(huì)表現(xiàn)出人云亦云的特征。


“羊群效應(yīng)”是由個(gè)人理性行為導(dǎo)致的集體的非理性行為。由于信息的不對(duì)稱,人們并不能得到做出判斷所需的全部信息,那么在無(wú)法作出準(zhǔn)確的判斷時(shí),其他人的選擇自然就是最合理的參照。這并非全無(wú)道理的,因?yàn)楹芏嗲闆r下,多數(shù)人的做法往往都是正確的,參考他們的做法可以最大限度的降低個(gè)人的決策風(fēng)險(xiǎn)。這也是群體盲目背后的根本原因。


但是,凡事有利就有弊。跟隨大眾的做法,有時(shí)候很容易被誤導(dǎo)。比如謠言的傳播就是個(gè)最大的反例。


我想以下場(chǎng)景你一定不會(huì)陌生,在一個(gè)廣場(chǎng)上,有商家正在進(jìn)行著某種商品的促銷(xiāo)活動(dòng),人們隨著廣播的聲音慢慢湊了過(guò)去,到后來(lái)簡(jiǎn)直到了里三層外三層的地步。但就在這個(gè)時(shí)候,經(jīng)過(guò)的人反而有了更大的興致,越是后來(lái)的人越是想擠到人群中去,甚至他并不知道里面究竟是在進(jìn)行什么活動(dòng)。這是典型的“羊群效應(yīng)”。


經(jīng)常網(wǎng)購(gòu)用戶都明白,我們很容易受到商品銷(xiāo)量的影響,我們的潛意識(shí)里會(huì)認(rèn)為銷(xiāo)量越好,商品質(zhì)量越好,因此會(huì)傾向于選擇銷(xiāo)量高的商品。

羊群效應(yīng)還表現(xiàn)在對(duì)權(quán)威的順從,人們決策時(shí)所盲從的對(duì)象由大多數(shù)平常人變成了某一個(gè)具有一定權(quán)威性的人。

人們?cè)谧龀瞿撤N選擇都是在追求安全感,降低風(fēng)險(xiǎn),而跟隨權(quán)威人士給出的意見(jiàn)和建議,會(huì)讓人們安全感倍增。權(quán)威之所以稱為權(quán)威,就是因?yàn)樵谀硞€(gè)領(lǐng)域他們是最專業(yè)的。因此人們更愿意相信權(quán)威人士的意見(jiàn),甚至愿意改變自己的選擇去迎合權(quán)威的意見(jiàn)。


在設(shè)計(jì)工作中,嘗試借用權(quán)威的號(hào)召力,達(dá)到對(duì)用戶消費(fèi)決策的影響。經(jīng)常逛淘寶的人就知道,很多商家在商品詳情頁(yè)為了證明產(chǎn)品質(zhì)量合格,經(jīng)常會(huì)提供某權(quán)威機(jī)構(gòu)的檢測(cè)認(rèn)證,或借助某個(gè)明星的推薦。因而會(huì)對(duì)其觀點(diǎn)或者意見(jiàn)表現(xiàn)得非常順從。


四、稀缺效應(yīng)

在消費(fèi)心理學(xué)的研究中,研究者把人們由于商品稀缺而引起的購(gòu)買(mǎi)行為現(xiàn)象,稱之為“稀缺效應(yīng)”。


“稀缺效應(yīng)”在我們的日常生活中太常見(jiàn)了,比如在線下逛商場(chǎng)時(shí),經(jīng)??梢钥吹缴碳蚁矚g用“一次性大甩賣(mài)”、“限量100件”等廣告語(yǔ)來(lái)引誘顧客,以吸引顧客進(jìn)店購(gòu)買(mǎi)。這些廣告語(yǔ)會(huì)給顧客造成這各種假象:如果現(xiàn)在不買(mǎi)下次再也沒(méi)有這樣難得的機(jī)會(huì)了。


俗話說(shuō),物以稀為貴,人們對(duì)于稀缺物品會(huì)表現(xiàn)出強(qiáng)烈的占有欲望,這在人們的心理需求層次中,屬于較高的層次。越是不容易得到的東西,人們?cè)絻A向于得到,以此實(shí)現(xiàn)在精神層面上的價(jià)值滿足。


在這種心理因素的驅(qū)使下,人們對(duì)于供不應(yīng)求的東西,總是會(huì)給予特別的關(guān)注,同時(shí)也愿意支付更高的代價(jià)。某種商品一旦限量供應(yīng),那么其本身也就具備了稀缺的屬性。


限量供應(yīng)的銷(xiāo)售原則,也吊足了顧客的胃口,很多顧客完全落入稀缺效應(yīng)的心理戰(zhàn)術(shù)之中,即便當(dāng)天買(mǎi)不到,第二天也必定會(huì)早早前來(lái)購(gòu)買(mǎi)。


比如天貓慣用的搶紅包伎倆,吸引了一波又一波的少女們?nèi)ク偪竦膿?,它?huì)設(shè)定在某一個(gè)時(shí)間點(diǎn),限量提供一些紅包,如果沒(méi)有搶到。那么用戶第二天還會(huì)來(lái)?yè)尩模@就提高了用戶的粘性。


五、緊迫感

為了加快用戶下單的決策時(shí)間,我們需要給給用戶造成一種緊迫感的氛圍,告訴客戶剩余的時(shí)間不多了。如果不立即行動(dòng),將錯(cuò)過(guò)這次優(yōu)惠活動(dòng)。他們常使用一個(gè)很顯眼的倒計(jì)時(shí),時(shí)時(shí)刻刻在提醒用戶所剩的時(shí)間已經(jīng)不多了,再不剁手就沒(méi)機(jī)會(huì)了!天貓雙11活動(dòng)就是利用了這樣的用戶心理成功讓廣大女同胞們不知不覺(jué)中剁手了。


稀缺性與緊迫感可以結(jié)合著使用,你要明明白白的告訴用戶,如果錯(cuò)過(guò)了就會(huì)損失什么。如果立即行動(dòng),可以獲得什么好處。兩者之間強(qiáng)烈地對(duì)比可以吸引用戶立即購(gòu)買(mǎi)。


比如“今天下單可以立減500元!” “錯(cuò)過(guò)今天,你要多付出500元,而且沒(méi)有贈(zèng)品”等等。


如果沒(méi)有制造稀缺性和緊迫感,用戶就會(huì)拖延,猶豫甚至放棄購(gòu)買(mǎi)??蛻魰?huì)認(rèn)為再過(guò)一天來(lái)買(mǎi)也是可以的。這時(shí)你需要斬釘截鐵地告訴用戶,產(chǎn)品、贈(zèng)品、特價(jià)是有限的。


比如:“產(chǎn)品僅限10件啦,再不買(mǎi)就錯(cuò)過(guò)了!”,“贈(zèng)品只有30件,剛才張三又搶走了一件,馬上就搶光了!”,“特價(jià)產(chǎn)品只剩25件啦,賣(mài)完這25件就恢復(fù)原價(jià)?!蓖ㄟ^(guò)人為的制造稀缺性與客戶哄搶的氣勢(shì),促使客戶做出立即購(gòu)買(mǎi)的決定,從而提升轉(zhuǎn)化率。

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

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


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

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

產(chǎn)品體驗(yàn)思考

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

一、好的收藏體驗(yàn)該怎么做?

用戶喜歡在網(wǎng)上收藏各種東西,把收藏到的東西占為己有,滿足自我的占有欲,每個(gè)用戶都為此而樂(lè)此不疲。

很多互聯(lián)網(wǎng)產(chǎn)品在用戶點(diǎn)擊收藏后,讓用戶去選擇收藏夾。其實(shí)用戶并不喜歡去選擇,他們只想簡(jiǎn)單的把自己喜歡的東西收藏下來(lái)。



選擇本身并不是一件很容易的事情,尤其是對(duì)于那些有選擇困難癥的人來(lái)說(shuō)。實(shí)際上,我每次都是選默認(rèn)那個(gè)。

這并不是一個(gè)好的用戶體驗(yàn)。


微信收藏潤(rùn)物細(xì)無(wú)聲

當(dāng)然也有一些做的很好的體驗(yàn),比如微信的收藏,收藏后會(huì)出現(xiàn)一個(gè)“收藏成功”的非模態(tài)反饋。

同時(shí)可以添加標(biāo)簽,但這個(gè)并非強(qiáng)制,為了滿足那些有這種需求的用戶。添加標(biāo)簽的目的是為了方便用戶在日后的檢索。



在收藏列表,微信會(huì)根據(jù)收藏的內(nèi)容自動(dòng)分成鏈接、文件、圖片和視頻等,最近使用位于第一位。

也就是說(shuō)并不需要用戶去創(chuàng)建自定義分類。


你也可以搜索標(biāo)簽來(lái)找到之前收藏的內(nèi)容。通過(guò)這些方式基本上滿足了大部分用戶的需求。



拼趣(pinterest)智能識(shí)別收藏夾

網(wǎng)站會(huì)根據(jù)你采集的圖片在極短的時(shí)間內(nèi),自動(dòng)識(shí)別出圖片對(duì)應(yīng)的收藏夾類型??梢灾苯硬杉綄?duì)應(yīng)的文件夾。

然而經(jīng)過(guò)測(cè)試,經(jīng)常會(huì)出現(xiàn)誤差。因?yàn)閳D片的分類其實(shí)很復(fù)雜的,屬于高度自定義,很顯然,智能識(shí)別并不是一個(gè)好的解決方案。



花瓣的快速采集

花瓣是一個(gè)設(shè)計(jì)師收集靈感的網(wǎng)站,該網(wǎng)站常見(jiàn)的用戶使用場(chǎng)景是,設(shè)計(jì)師在瀏覽素材時(shí),會(huì)大量采集自己感興趣的素材,但每次都要選擇文件夾,非常繁瑣且低效。

后來(lái)花瓣網(wǎng)加入了快速采集的功能,其邏輯是網(wǎng)站會(huì)默認(rèn)選擇上一次采集的收藏夾,這大大提高了用戶采集圖片的效率。

而如果你需要選擇其他文件夾則可點(diǎn)擊普通采集。這兩種采集方式滿足了設(shè)計(jì)師的不同需求。


二、互動(dòng)信息的隱私保護(hù)

社區(qū)類產(chǎn)品有各種點(diǎn)贊,收藏等互動(dòng)信息,但用戶又不想被別人知道這些信息。

因此,在規(guī)劃產(chǎn)品時(shí)需要考慮到用戶互動(dòng)隱私的保護(hù),這是用戶側(cè)的剛性需求。


私密的點(diǎn)贊列表

抖音個(gè)人主頁(yè)的點(diǎn)贊列表,我記得剛開(kāi)始是公開(kāi)的,且不能設(shè)置為私密。

用戶點(diǎn)贊的視頻會(huì)出現(xiàn)在這里,卻少有人希望這些信息被別人看到,總有些點(diǎn)贊視頻你并不想被別人看到。

如果點(diǎn)贊列表可見(jiàn),那么用戶在點(diǎn)贊的時(shí)候就會(huì)有所顧慮,這不利于平臺(tái)的互動(dòng)率。


特別是隨著抖音上熟人也越來(lái)越多,強(qiáng)關(guān)系社交場(chǎng)景在漸漸加強(qiáng)。


抖音后來(lái)也發(fā)現(xiàn)了這個(gè)問(wèn)題,把它設(shè)計(jì)成了默認(rèn)隱藏。(當(dāng)然可以自己設(shè)置為公開(kāi),但只有極少數(shù)用戶會(huì)這樣做。)



由于點(diǎn)贊是私密的,用戶可以隨心所欲的點(diǎn)贊自己喜歡的視頻,毫無(wú)社交壓力。


這是為何?

源于人性心理學(xué):窺私欲。人人都喜歡窺視別人的隱私,而不喜歡自己的隱私被窺視。

不然為何如今的QQ空間基本上都設(shè)置了權(quán)限,畢竟,誰(shuí)想被別人窺視當(dāng)年那個(gè)煞筆的自己呢?


公眾號(hào)“在看”和視頻號(hào)“私密贊”的邏輯

現(xiàn)在訂閱號(hào)打開(kāi)率越來(lái)越低,朋友圈分享曾是訂閱號(hào)流量來(lái)源的一大入口。

朋友圈早已淪為了一個(gè)人設(shè)打造的陣地,現(xiàn)在的人發(fā)圈越來(lái)越謹(jǐn)慎。

用戶似乎越來(lái)越不愿意在朋友圈分享文章了,除非是有利于自己人設(shè)打造的內(nèi)容。

為了減輕用戶的這種社交壓力,微信推出了“在看”的功能。


用戶點(diǎn)了“在看”后,此文章會(huì)出現(xiàn)在看一看這個(gè)模塊,且七天前的分享將不可見(jiàn),這就相當(dāng)于一個(gè)弱化版的分享功能。



這將大大減輕用戶分享的社交壓力。對(duì)于公眾號(hào)主來(lái)說(shuō),相當(dāng)于增加了一個(gè)流量入口,激發(fā)他們創(chuàng)作更多的內(nèi)容。


視頻號(hào)點(diǎn)贊也是同理,會(huì)被朋友看到,導(dǎo)致用戶在點(diǎn)贊的時(shí)候就會(huì)有所顧慮。


他會(huì)考慮,我點(diǎn)贊了這個(gè)視頻,我老師、上司、父母、親戚、朋友會(huì)不會(huì)看到?他們會(huì)怎么想?


但他在抖音上點(diǎn)贊是沒(méi)有這么多顧慮的,單純的喜歡就行。


第一,抖音是弱關(guān)系平臺(tái);

第二,抖音上的點(diǎn)贊默認(rèn)是私密的。


因此,微信才推出了私密贊的功能,需要長(zhǎng)按才能觸發(fā)。

這并是一個(gè)優(yōu)雅的解決方案,一是操作成本有點(diǎn)高,二是用戶存在較高的學(xué)習(xí)成本。



微信作為一個(gè)強(qiáng)關(guān)系社交場(chǎng)景,這正是微信與抖音不一樣的地方。

以上兩者的目的都是一致的,那就是為了減輕用戶的社交壓力。


三、確定按鈕放左邊還是右邊?

同時(shí)用過(guò)mac OS和windows系統(tǒng)的用戶不知是否發(fā)現(xiàn),這兩個(gè)操作系統(tǒng)的彈窗按鈕“確定”和“取消”的位置是不一樣的?



mac的彈窗按鈕確定在右,取消在左;而windows的剛好反過(guò)來(lái),確定在左,取消在右。


為什么會(huì)有這樣的差異?哪一種更加合理?


模態(tài)反饋定義

在交互設(shè)計(jì)中,這種彈窗叫做模態(tài)反饋,艾倫·庫(kù)珀在《About Face 4》中提到:模態(tài)模式一種臨時(shí)模式,它通過(guò)遮罩將用戶當(dāng)前看到的內(nèi)容和之前看到的內(nèi)容區(qū)分開(kāi)來(lái),界面中只有 popup(彈出層)組件具有可交互行為,需要用戶操作才能退出該模式。模態(tài)的優(yōu)勢(shì)在于讓用戶專注于完成某個(gè)任務(wù)而不被干擾。


哪個(gè)優(yōu)先級(jí)更高

首先我們要明白這兩個(gè)按鈕哪個(gè)使用率更高,一般來(lái)說(shuō),“確定”的點(diǎn)擊率要遠(yuǎn)遠(yuǎn)高于“取消”。這是因?yàn)榇蠖鄶?shù)用戶對(duì)于自己的操作行為是明確的。


所以這兩個(gè)按鈕在視覺(jué)上一定要做出差異化,“確定”的視覺(jué)層級(jí)要高于“取消”,這樣用戶才會(huì)一目了然,不會(huì)感到困惑。


兩者背后的邏輯差異

回到剛才的問(wèn)題,逆向思考這兩者背后的邏輯差異。


windows彈窗的背后邏輯:

人的閱讀習(xí)慣是從左到右,所以把點(diǎn)擊率更高的按鈕放在左邊更加符合人的正常閱讀習(xí)慣。


mac彈窗的背后邏輯:

根據(jù)一般的任務(wù)的流程,“取消”在左代表返回上一步操作,而“確定”在右代表進(jìn)入下一步任務(wù)流程。


看上去似乎都有道理,這兩種交互方式本身沒(méi)有絕對(duì)的對(duì)與錯(cuò)。只要在整個(gè)系統(tǒng)中保持一致性,讓用戶形成操作習(xí)慣就沒(méi)有啥問(wèn)題。


從個(gè)人的使用習(xí)慣而言,個(gè)人更傾向于mac的這種方式。



四、手機(jī)的實(shí)體鍵怎么放才合理?

手機(jī)上的實(shí)體按鍵電源鍵和音量鍵通常有兩種分布方式,放在左右兩側(cè)或都放在右側(cè),前者以iPhone為代表,后者以安卓手機(jī)為代表。



這兩種方式有什么區(qū)別?哪種方式更加合理?電源鍵和音量鍵屬于完全不同類型的兩種按鍵,且都是高頻使用,它們的功能自然不用贅述。


用戶場(chǎng)景

我們先來(lái)看看都放在右側(cè)會(huì)有什么問(wèn)題,以下使用場(chǎng)景相信用戶不會(huì)陌生:


用戶a,在地鐵上玩王者,聲音有點(diǎn)大,想把聲音調(diào)小,結(jié)果不小心按到了電源鍵,導(dǎo)致手機(jī)息屏,而此刻你正在激烈的團(tuán)戰(zhàn),內(nèi)心有一萬(wàn)只“草尼瑪”奔騰而過(guò)……


用戶b,每次按電源鍵(解鎖或鎖屏)都會(huì)不小心同時(shí)按到音量鍵,結(jié)果直接就截圖了!這種情況發(fā)生了不止一次,因?yàn)檫@兩個(gè)按鍵離的太近了……


用戶c,自家的小米11,電源鍵位于中間位置,右手拿時(shí)大拇指會(huì)觸碰到,左手拿時(shí)中指剛好會(huì)觸碰到,而電源鍵又有指紋鎖功能,導(dǎo)致手機(jī)在不斷的解鎖,而你毫無(wú)察覺(jué)……


通過(guò)上面的案例,可以得出結(jié)論:若按鍵都放在右側(cè),會(huì)導(dǎo)致用戶經(jīng)常誤觸而造成不必要的麻煩。


放在兩側(cè)就不會(huì)有這樣的問(wèn)題??梢杂行Х乐拐`觸,尤其是盲按,不用擔(dān)心按錯(cuò),減少誤操作的幾率。


電源鍵并非一開(kāi)始位于右側(cè)

值得一提的是,iPhone手機(jī)的電源鍵一開(kāi)始是位于頂部位置,這是為何?



因?yàn)閯傞_(kāi)始時(shí)手機(jī)都是小屏幕(3.5~4寸左右),對(duì)于iPhone5S及以前的手機(jī)來(lái)說(shuō),單手操控,拇指Home,食指電源,剛剛好。


所以電源鍵放在頂部既按得到又可以減少誤操作。


后來(lái)隨著手機(jī)大屏的趨勢(shì)(4.7寸以上),這個(gè)時(shí)候單手已經(jīng)不方便按到頂端了,從6代開(kāi)始就把電源鍵放在右側(cè)了。


但無(wú)論是哪種方式, 兩個(gè)按鍵都是分開(kāi)放。


按鍵不在中間的原因

還有一個(gè)小細(xì)節(jié),iPhone的實(shí)體鍵不是在右側(cè)正中間,而是在靠上的位置。



iPhone設(shè)計(jì)理念是單手持握,并且大多數(shù)人右手握手機(jī),大拇指經(jīng)常會(huì)碰到右側(cè)邊框,若果放中間,這樣會(huì)造成誤觸音量鍵和靜音鍵。


其實(shí)上面的案例3就已經(jīng)說(shuō)明了按鍵放在中間的弊端。


我想起了當(dāng)年的錘子T1,左右按鍵一樣大且位于兩側(cè)的中間,這是典型的為了追求完美的對(duì)稱而向用戶體驗(yàn)妥協(xié)。

iPhone從初代開(kāi)始就已經(jīng)建立了自己的設(shè)計(jì)理念,不管是工業(yè)設(shè)計(jì)還是界面設(shè)計(jì),并沿用至今。



五、iPhone靜音鍵有存在的必要么?

從初代開(kāi)始,iPhone機(jī)身左側(cè)音量鍵上方就有一個(gè)靜音鍵。

這些年來(lái),iPhone一直在減少各種實(shí)體按鍵以及外部接口,比如3.5mm耳機(jī)孔、home鍵。

但直到如今這個(gè)靜音鍵卻一直保留下來(lái),為何iPhone對(duì)于這個(gè)按鍵情有獨(dú)鐘?



靜音鍵開(kāi)啟后,任何來(lái)電或通知都是無(wú)聲的,震動(dòng)也會(huì)消失。

在無(wú)需點(diǎn)亮屏幕的情況下實(shí)現(xiàn)一鍵靜音,方便快捷,深受用戶的青睞。


哪些場(chǎng)景用戶會(huì)開(kāi)啟呢?

根據(jù)自身的使用習(xí)慣以及用戶研究,無(wú)非以下幾種使用場(chǎng)景,比如看電影、開(kāi)會(huì)、上課等:


1.進(jìn)電影院看電影前,我一般都會(huì)撥一下,避免在看電影的過(guò)程中被來(lái)電鈴聲打擾,影響了自己和別人觀影。

2.開(kāi)會(huì)的時(shí)候也會(huì)撥一下,以防在開(kāi)會(huì)的時(shí)候突然被來(lái)電鈴聲所打擾,避免不必要的尷尬。

3.學(xué)生黨在上課前一般也會(huì)開(kāi)啟,這樣整節(jié)課都不怕打電話進(jìn)來(lái)了。


總之,就是不希望自己的手機(jī)鈴聲打擾到自己和別人,帶來(lái)不必要的麻煩。


如果是虛擬靜音鍵,需要先解鎖手機(jī),對(duì)著手機(jī)屏幕一頓操作。

而實(shí)體鍵不需要這么麻煩,可以盲操作,放在褲兜里都不影響操作。


安卓手機(jī)為何沒(méi)有實(shí)體靜音鍵?

這個(gè)按鍵這么重要,卻很少看到安卓手機(jī)上有(除了一加基本上沒(méi)有)。

實(shí)體靜音鍵并非蘋(píng)果首創(chuàng),之前的Palm、Blackberry(黑莓)早已有這樣的設(shè)計(jì)。


可能的原因是安卓控制中心很早有靜音按鈕,甚至有些定制系統(tǒng)還可以把靜音按鈕直接放在桌面上,設(shè)置靜音非常方便,也就沒(méi)必要再多加一個(gè)實(shí)體鍵了,顯得多余又徒增成本。


一加三段式按鍵

上面提到過(guò)的,作為安卓陣營(yíng)唯一的靜音鍵,一加手機(jī)引以為傲的三段式按鍵,該設(shè)計(jì)可以通過(guò)物理鍵直接實(shí)現(xiàn)在靜音、免打擾與正常模式當(dāng)中快速切換。



但個(gè)人認(rèn)為這個(gè)設(shè)定復(fù)雜了,三種模式遠(yuǎn)比兩種模式復(fù)雜。用戶并不一定能搞明白,有一定的學(xué)習(xí)成本。


iPhone設(shè)計(jì)靜音實(shí)體鍵的初衷

在早期,iPhone的控制中心并沒(méi)有靜音按鈕,想要設(shè)置個(gè)靜音并不是一件容易的事情,而這個(gè)功能又是必須的,蘋(píng)果索性直接做了一個(gè)實(shí)體物理鍵。


這樣靜音的時(shí)候只需要把靜音鍵撥過(guò)來(lái)就可以了,一步到位,使用體驗(yàn)也很好,所以一直保留至今。


雖然現(xiàn)在iPhone的控制中心已經(jīng)加入了勿擾模式,但考慮到老用戶的使用習(xí)慣,以及品牌調(diào)性,蘋(píng)果對(duì)于這個(gè)實(shí)體按鍵的去掉還是顯得很謹(jǐn)慎。


考慮到之后iPhone在防水、機(jī)身內(nèi)部空間的改進(jìn),不排除蘋(píng)果終有一天會(huì)取消iPhone上這個(gè)靜音鍵。


靜音鍵的缺點(diǎn)

靜音鍵雖好,但也并非沒(méi)有缺點(diǎn)。用戶有時(shí)候會(huì)無(wú)意中觸發(fā)這個(gè)按鍵而不自知,或者開(kāi)啟后忘記關(guān)閉,導(dǎo)致錯(cuò)過(guò)了一些重要的電話。


靜音并非絕對(duì)

雖然開(kāi)啟了靜音鍵,但并不是絕對(duì)的靜音。如果是鬧鐘,鈴聲還是會(huì)響起,因?yàn)轸[鐘的優(yōu)先級(jí)要遠(yuǎn)高于靜音模式。

蘋(píng)果這是考慮到了如果有用戶不小心觸發(fā)了靜音鍵,或者開(kāi)啟后忘記了關(guān)閉,害怕用戶耽誤了重要事情。

這就很好的解釋了為何明明開(kāi)啟了靜音模式,卻還可以調(diào)解音量大小的原因所在。細(xì)微之處方見(jiàn)真功夫。



六、經(jīng)典的旋鈕式交互

在日常生活中,旋鈕是個(gè)很常見(jiàn)的東西,比如音箱,微波爐,收音機(jī),老式電視,車(chē)載旋鈕……

在機(jī)械產(chǎn)品上,旋鈕凸起的把手和它下面的圓盤(pán)刻度,是最明顯不過(guò)的旋轉(zhuǎn)暗示,符合人的自然感知。



旋鈕式交互是個(gè)人非常偏愛(ài)的一種交互方式,我認(rèn)為這種交互跟iPhone的home鍵一樣經(jīng)典,主要原因有三:

1.操作簡(jiǎn)單

旋鈕操作簡(jiǎn)單,看到這種按鈕,一歲小孩子都會(huì)忍不住用手去抓。對(duì)于用戶來(lái)說(shuō),幾乎不需要學(xué)習(xí)成本。

2.盡在掌控

在旋轉(zhuǎn)的過(guò)程中,可調(diào)大調(diào)小,一切盡在用戶的掌控之中,用戶感覺(jué)到有十分的安全感。

3.即時(shí)反饋

在調(diào)節(jié)的過(guò)程中,調(diào)大調(diào)小都能立刻收到即時(shí)的反饋,這是用戶最喜歡的交互方式。


我們?cè)谟|摸屏上很少看到這種旋鈕式交互,因?yàn)檫@種交互是要建立在抓住旋鈕實(shí)物的感受。

而觸控屏是個(gè)二維的世界,沒(méi)有真實(shí)抓握的手感,無(wú)法還原出三維世界的真實(shí)手感。


汽車(chē)上最常見(jiàn)的旋鈕就要數(shù)音量和空調(diào)了。然而自從特斯拉在車(chē)上推廣大屏幕后,越來(lái)越多的國(guó)內(nèi)廠家開(kāi)始盲目跟風(fēng),把絕大部分的功能按鈕集成到屏幕中,比如空調(diào),不僅不方便,行車(chē)中使用還容易造成危險(xiǎn)駕駛。



車(chē)上的觸控體驗(yàn)跟手機(jī)上是完全是兩碼事,使用場(chǎng)景也完全不同。最大的區(qū)別在于后者沒(méi)有安全問(wèn)題。

都知道開(kāi)車(chē)不玩手機(jī),可是行車(chē)時(shí)操作中控屏跟玩手機(jī)有什么兩樣?


車(chē)載旋鈕有什么優(yōu)勢(shì)?

1.駕駛更加安全

對(duì)于駕駛員來(lái)說(shuō)更加安全,通過(guò)旋鈕調(diào)節(jié)空調(diào),熟悉后完全可以實(shí)現(xiàn)盲操,邊開(kāi)車(chē)邊操作毫無(wú)壓力。

如果是觸控屏,你必須看著屏幕,一頓操作猛如虎,而在開(kāi)車(chē)過(guò)程中眼睛哪怕離開(kāi)前方一秒鐘就意味著危險(xiǎn)。

而安全是汽車(chē)駕駛的重中之重。

2.更加真實(shí)的反饋

用戶的操作有真實(shí)的物理反饋,旋鈕阻尼。

屏幕上虛擬按鍵反饋根本無(wú)法與實(shí)體旋鈕相提并論。

3.更加穩(wěn)定的機(jī)械結(jié)構(gòu)

軟件系統(tǒng)用久了會(huì)變卡,可能會(huì)死機(jī),難免會(huì)有bug。而這些不穩(wěn)定因素將成為汽車(chē)駕駛的潛在危險(xiǎn)因素。

一旦屏幕失靈,或者系統(tǒng)死機(jī)了,那所有按鍵都失效了。

雖然特斯拉為了提升其車(chē)載系統(tǒng)的穩(wěn)定性下了很大功夫,但是問(wèn)題從來(lái)都沒(méi)有停止過(guò)。

但是硬件基本上很少會(huì)出問(wèn)題,物理旋鈕才讓人100%放心。



無(wú)論廠家如何吹噓,虛擬屏幕按鍵在大多數(shù)情況下都不會(huì)比實(shí)體按鍵有更好的使用體驗(yàn)。

因此,有一些實(shí)體鍵出于安全駕駛的考慮還是應(yīng)該保留,將各種功能按鈕都集成在屏幕里并不見(jiàn)得是一個(gè)明智的選擇。盲目的把實(shí)體按鍵變?yōu)橛|摸按鍵存在安全隱患。
文章來(lái)源:站酷   作者:CdzhcHappy

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


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

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

數(shù)據(jù)分析的正確打開(kāi)方式

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

作為一枚設(shè)計(jì)小萌新,對(duì)上述場(chǎng)景,是否似曾相識(shí)呢?此些尷尬的情況,也映射出了不少問(wèn)題:數(shù)據(jù)化設(shè)計(jì)意識(shí)薄弱,數(shù)據(jù)基礎(chǔ)知識(shí)模糊,缺乏系統(tǒng)的體驗(yàn)評(píng)估模型和度量方法等等。


那么,我們?cè)搹哪男┚S度進(jìn)行數(shù)據(jù)分析呢?數(shù)據(jù)的基礎(chǔ)知識(shí)又有什么呢?常見(jiàn)的數(shù)據(jù)分析方法又有哪些?諸位看官抓好扶好,入門(mén)版航班即將起飛,讓我們一起走進(jìn)數(shù)據(jù)的世界,掌握一定的數(shù)據(jù)分析能力,告別“我要我覺(jué)得”的任性決策。





增量尚不明確,存量博弈的下半場(chǎng),都以去肥增瘦的方式,宣告著精細(xì)化運(yùn)營(yíng)的時(shí)代到來(lái),似乎也對(duì)設(shè)計(jì)師同學(xué)提出更高專業(yè)的要求。數(shù)據(jù)意識(shí)作為能力象限中的某個(gè)小瓦塊,雖然細(xì)微,但也是專業(yè)輸出的切入點(diǎn)。


在面對(duì)產(chǎn)品功能迭代、用戶行為分析、日常監(jiān)測(cè)、設(shè)計(jì)決策以及效果評(píng)估等等問(wèn)題時(shí),單純的從視覺(jué)維度進(jìn)行推導(dǎo),會(huì)稍顯單薄。而基于客觀數(shù)據(jù)的分析,可以更科學(xué)準(zhǔn)確的輔助我們進(jìn)行決策。





所謂的“數(shù)據(jù)指標(biāo)”,簡(jiǎn)單來(lái)說(shuō)就是可將某個(gè)事件量化,且可形成數(shù)字,來(lái)衡量目標(biāo)。在一定程度上,“數(shù)據(jù)指標(biāo)”能揭示出產(chǎn)品用戶的行為和業(yè)務(wù)水平狀況。


目前市面上的產(chǎn)品種類繁多,大致都圍繞“用戶是誰(shuí)、做了何事、結(jié)果如何”進(jìn)行歸納整合,分別對(duì)應(yīng)著用戶數(shù)據(jù)、行為數(shù)據(jù)、業(yè)務(wù)數(shù)據(jù)三類指標(biāo)。



用戶數(shù)據(jù):包含存量、增量、留存及渠道來(lái)源四類

1. 存量:反映某一時(shí)間段內(nèi)活躍的用戶數(shù)。以日活(DAU)、周活(WAU)、月活(MAU)維度進(jìn)行統(tǒng)計(jì)。其中,Active需以關(guān)鍵用戶的自發(fā)行為來(lái)進(jìn)行定義,常見(jiàn)的動(dòng)作有登錄、瀏覽內(nèi)容等。

2. 增量:一般用新增用戶數(shù)來(lái)反映,同樣分為日新增(DNU)、周新增(WNU)、月新增(MNU)三類統(tǒng)計(jì)維度。其中,增量的定義相對(duì)模糊,需提前與渠道確認(rèn)好新增指標(biāo),建議根據(jù)內(nèi)部的賬號(hào)體系進(jìn)行指標(biāo)的取舍,選擇新增注冊(cè)用戶還是新增設(shè)備數(shù)。

3. 來(lái)源:用戶從何而來(lái),包含自然搜索、產(chǎn)品導(dǎo)流、好友邀請(qǐng)等多種渠道。結(jié)合不同渠道用戶的數(shù)據(jù)表現(xiàn),可以指導(dǎo)后續(xù)的推廣方案。

4. 留存:通過(guò)留存率來(lái)評(píng)判產(chǎn)品的健康程度,表示新用戶在一定時(shí)間段內(nèi),某些行為重復(fù)發(fā)生的比率。其中,日留存和月留存的評(píng)判分析作用又有所不同:

  • 日留存:作為衡量用戶渠道質(zhì)量的重要依據(jù),如老王的公眾號(hào)在站酷、知乎、微信群進(jìn)行導(dǎo)流宣傳,通過(guò)分析不同渠道的用戶留存表現(xiàn),從而優(yōu)化受眾用戶的投放來(lái)源。

  • 月留存:作為用戶粘性的重要判斷,通過(guò)指標(biāo)來(lái)分析產(chǎn)品對(duì)用戶是否長(zhǎng)期有吸引力。也可用作產(chǎn)品上新后,功能迭代是否符合預(yù)期的判斷依據(jù)。


行為數(shù)據(jù):記錄用戶使用產(chǎn)品的相關(guān)行為,可包含行為質(zhì)量(訪問(wèn)深度、轉(zhuǎn)化率、跳出率、用戶停留時(shí)長(zhǎng))與數(shù)量(次數(shù)、頻率、點(diǎn)擊率、訪問(wèn)時(shí)長(zhǎng))兩維度

1. 訪問(wèn)深度:用戶單次瀏覽頁(yè)面的過(guò)程中,瀏覽了頁(yè)面的數(shù)量越多,表示用戶訪問(wèn)深度越深,產(chǎn)品粘性較好。

2. 轉(zhuǎn)化率:指在一個(gè)統(tǒng)計(jì)周期內(nèi),完成轉(zhuǎn)化行為的次數(shù)占總訪問(wèn)次數(shù)的比率。轉(zhuǎn)化率=(轉(zhuǎn)化次數(shù)/點(diǎn)擊量)×100%。如在電商、理財(cái)?shù)犬a(chǎn)品中,轉(zhuǎn)化率是衡量產(chǎn)品優(yōu)秀與否的重要指標(biāo)之一。

3. 跳出率:訪問(wèn)了單個(gè)頁(yè)面的用戶占全部訪問(wèn)用戶的百分比,可用來(lái)衡量訪問(wèn)質(zhì)量,高跳出率通常表示內(nèi)容或體驗(yàn)與用戶目標(biāo)脫節(jié)。

4. 停留時(shí)長(zhǎng):用戶游逛的時(shí)間長(zhǎng)度,需要區(qū)分對(duì)待內(nèi)容消費(fèi)與工具效率場(chǎng)景,高停留時(shí)長(zhǎng)并非全是正向反饋。

5. 次數(shù):包含頁(yè)面訪問(wèn)次數(shù)(PV)和用戶訪問(wèn)次數(shù)(UV),通過(guò)頁(yè)面或者用戶作為計(jì)數(shù)單位,但需進(jìn)行相應(yīng)數(shù)據(jù)去重,保證數(shù)據(jù)的真實(shí)性。

6. 點(diǎn)擊率:CTR(Click-Through-Rate)即點(diǎn)擊通過(guò)率,某一內(nèi)容被點(diǎn)擊的次數(shù)與被顯示次數(shù)之比,CTR是衡量互聯(lián)網(wǎng)廣告效果的一項(xiàng)重要指標(biāo)。影響用戶點(diǎn)擊的因子較多,作為入口級(jí)內(nèi)容,卻具備較大的設(shè)計(jì)發(fā)揮空間,可通過(guò)信息的布局與核心利益點(diǎn)的外化,實(shí)現(xiàn)行為號(hào)召(Call to Action)


業(yè)務(wù)數(shù)據(jù):產(chǎn)品在商業(yè)化過(guò)程中,對(duì)業(yè)務(wù)結(jié)果的貢獻(xiàn)程度,如總成交量、人均消費(fèi)金額、消費(fèi)人數(shù)、續(xù)費(fèi)率、用戶周期價(jià)值等

1. 總成交量:GMV(Gross Merchandise Volume)屬于電商平臺(tái)企業(yè)成交類指標(biāo),主要指訂單的總金額,包含付款與未付款兩部分

2. 人均消費(fèi)金額:ARPU(Average Revenue Per User)即每用戶平均收入。這個(gè)指標(biāo)計(jì)算的是某時(shí)間段內(nèi)平均每個(gè)活躍用戶為應(yīng)用創(chuàng)造的收入。

3. 續(xù)費(fèi)率:指的是在訂閱期結(jié)束時(shí),選擇續(xù)費(fèi)的用戶占所有應(yīng)續(xù)費(fèi)用戶的百分比

4. 付費(fèi)率:付費(fèi)用戶占活躍用戶的比例。

5. 用戶周期價(jià)值:LTV(life time value)是產(chǎn)品從用戶獲取到流失所得到的全部收益的總和,當(dāng)LTV大于平均獲客成本和后續(xù)的運(yùn)營(yíng)成本時(shí),產(chǎn)品獲得凈收益。






對(duì)上述數(shù)據(jù)類別有所了解之后,我們?cè)诿鎸?duì)紛紜復(fù)雜的應(yīng)用類型與數(shù)據(jù)概念時(shí),到底該怎么選取合適的指標(biāo)進(jìn)行衡量和分析呢?接下來(lái),讓我們進(jìn)入下一個(gè)知識(shí)點(diǎn)-指標(biāo)建模。我們大致可以按照以下方法進(jìn)行關(guān)鍵指標(biāo)的選取。

① 明確業(yè)務(wù)的最終目的;

② 判斷業(yè)務(wù)模塊所屬類型;

③ 根據(jù)模塊類型選擇數(shù)據(jù)指標(biāo);


① 明確業(yè)務(wù)的最終目的

任何產(chǎn)品都有其商業(yè)或生存目的,且通常會(huì)使用一些支撐手段的工具、或是支撐手段的手段來(lái)達(dá)成目的。我們以“設(shè)計(jì)軟件-Figma”為例,進(jìn)行業(yè)務(wù)目的與手段的拆解。

1. 目的:Figma 是一個(gè)基于瀏覽器的協(xié)作式 UI 設(shè)計(jì)工具,其最終目的是完成商業(yè)變現(xiàn),讓更多用戶付費(fèi)購(gòu)買(mǎi)。

2. 手段:為達(dá)成這一目標(biāo),而采用基于web的模式這一手段,極大的方便了團(tuán)隊(duì)協(xié)作辦公的需求,繼而備受青睞,普及率節(jié)節(jié)攀升。

3. 支持手段的工具:此外,借助開(kāi)源的插件及完善的組件功能,為設(shè)計(jì)創(chuàng)作者提供更便捷的工具支持。



② 判斷業(yè)務(wù)模塊所屬類型

在從業(yè)務(wù)的最終目的出發(fā),梳理業(yè)務(wù)模塊后,可進(jìn)一步的拆解該業(yè)務(wù)模塊的具體類型。為方便理解,可以按照產(chǎn)品價(jià)值,將功能模塊分為4種類別:工具、內(nèi)容瀏覽、社區(qū)、交易。

1. 針對(duì)本身自帶價(jià)值屬性的產(chǎn)品,按照幫助用戶節(jié)省時(shí)間和消磨時(shí)間可分為:

工具類:剪映、輕顏相機(jī)、飛書(shū)文檔及翻譯查詞等
內(nèi)容瀏覽類:各類圖、文、音視頻體裁的消費(fèi)內(nèi)容,如短視頻、喜馬拉雅、知乎等


2. 另一類產(chǎn)品本身不產(chǎn)生價(jià)值,通過(guò)自身的平臺(tái)屬性來(lái)連接資源,同樣按照幫助用戶節(jié)省時(shí)間和消磨時(shí)間可分為:

社區(qū)類:小紅書(shū)、即刻、微博等
交易類:電商板塊、會(huì)員付費(fèi)板塊以及直播打賞充值等


③ 根據(jù)模塊類型選擇數(shù)據(jù)指標(biāo)

按照時(shí)間與價(jià)值維度,將產(chǎn)品劃分為4類模塊,每類都有各自需要核心關(guān)注的指標(biāo)要素


下面對(duì)4種分類的功能模塊,分別介紹如何選取指標(biāo)體系

1. 工具類:通過(guò)產(chǎn)品達(dá)成個(gè)人目標(biāo),高頻的使用行為,可以培養(yǎng)用戶的固定習(xí)慣。因而可主要關(guān)注使用量、目標(biāo)達(dá)成率、頻次數(shù)據(jù)指標(biāo)。(示例:剪映)


2. 交易類:以詳情頁(yè)作為用戶購(gòu)買(mǎi)動(dòng)機(jī)的誘因,實(shí)現(xiàn)付費(fèi)轉(zhuǎn)化。倘若能多次反復(fù)的購(gòu)買(mǎi)商品或服務(wù),整體轉(zhuǎn)化效果更佳。因而,可選取詳情頁(yè)轉(zhuǎn)化率、客單價(jià)、復(fù)購(gòu)率作為衡量指標(biāo)。(示例:百度網(wǎng)盤(pán))


3. 內(nèi)容瀏覽類:用戶是否已獲得更優(yōu)質(zhì)的內(nèi)容,愿意投入更多的時(shí)間瀏覽內(nèi)容,并能觸發(fā)與內(nèi)容的互動(dòng)行為。因而可選取瀏覽數(shù)、瀏覽廣度、瀏覽時(shí)長(zhǎng)和互動(dòng)行為作為衡量指標(biāo)。(示例:快手)


4. 社區(qū)類:社區(qū)環(huán)境主要受人與內(nèi)容、以及人與人之間的關(guān)系影響。鼓勵(lì)用戶發(fā)布內(nèi)容,以創(chuàng)造的內(nèi)容來(lái)吸引其他用戶產(chǎn)生共鳴,從而進(jìn)行內(nèi)容創(chuàng)造與互動(dòng)行為。因而,可選取發(fā)布量、互動(dòng)量、用戶間的關(guān)系密度作為衡量指標(biāo)。(示例:即刻)





在產(chǎn)品迭代發(fā)展的過(guò)程中,掌握有效的數(shù)據(jù)分析方法,能讓冰冷客觀的數(shù)據(jù)鮮活起來(lái),為決策提供判斷依據(jù)。接下來(lái),就給大家推薦兩類高頻數(shù)據(jù)分析方法,請(qǐng)注意查收。

AARRR模型

由Dave McClure 2007提出的客戶生命周期模型,可以幫助大家更好地理解獲客和維護(hù)客戶的原理。其核心為AARRR漏斗模型,對(duì)應(yīng)著實(shí)現(xiàn)用戶增長(zhǎng)的5個(gè)指標(biāo):

1. 獲取(Acquisition):用戶如何發(fā)現(xiàn)(并來(lái)到)你的產(chǎn)品?

2. 激活(Activation):用戶的第一次使用體驗(yàn)如何?

3. 留存(Retention):用戶是否還會(huì)回到產(chǎn)品(重復(fù)使用)?

4. 收入(Revenue):產(chǎn)品怎樣(通過(guò)用戶)賺錢(qián)?

5. 傳播(Refer):用戶是否愿意告訴其他用戶?

我們?cè)谶M(jìn)行數(shù)據(jù)分析的時(shí)候,應(yīng)該考慮用戶正處于AARRR模型的哪個(gè)部分、關(guān)鍵數(shù)據(jù)指標(biāo)是什么、對(duì)應(yīng)的分析方法又是什么?


漏斗分析

科學(xué)反映用戶行為狀態(tài)以及從起點(diǎn)到終點(diǎn)各階段用戶轉(zhuǎn)化率情況,是一種重要的分析模型。廣泛應(yīng)用于網(wǎng)站和App用戶行為分析的流量監(jiān)控、電商行業(yè)、零售的購(gòu)買(mǎi)轉(zhuǎn)化率、產(chǎn)品營(yíng)銷(xiāo)和銷(xiāo)售等日常數(shù)據(jù)運(yùn)營(yíng)與數(shù)據(jù)分析的工作中。

例如:在完成電商購(gòu)物行為時(shí),共包含瀏覽選擇、查看詳情、添加購(gòu)物車(chē)、生成訂單、支付等環(huán)節(jié)。通過(guò)監(jiān)控用戶在流程上的行為路徑,漏斗能夠展現(xiàn)各個(gè)環(huán)節(jié)的轉(zhuǎn)化率,直觀地發(fā)現(xiàn)和說(shuō)明問(wèn)題所在,更快定位出某個(gè)環(huán)節(jié)的具體問(wèn)題。






除了需要了解分析方法之外,還需要提防以下數(shù)據(jù)分析常見(jiàn)謬誤,避免落入陷阱之中,從而做出錯(cuò)誤的決策。

1. 數(shù)據(jù)偏?

在分析數(shù)據(jù)時(shí)受個(gè)?偏?和動(dòng)機(jī)的影響,即僅選擇?持你聲明的數(shù)據(jù),同時(shí)丟棄不?持聲明的部分?!皵?shù)據(jù)偏?”將讓數(shù)據(jù)的客觀性蕩然?存。 避免這種謬誤的?法是在分析數(shù)據(jù)時(shí),盡可能收集相關(guān)數(shù)據(jù),并詢問(wèn)他?意?。


2. 采樣偏差

在做抽樣分析時(shí),選取的樣本不夠隨機(jī)或不夠有代表性。例如,互聯(lián)網(wǎng)圈的人極少會(huì)使用PDD,為何該應(yīng)用還會(huì)有這么好的市值表現(xiàn)?


3. 因果相關(guān)謬誤

將兩個(gè)同時(shí)發(fā)生的事件,判斷為因果關(guān)系,忽略了其中間變量。例如,隔壁老王生了個(gè)孩子,同時(shí)種了一棵樹(shù)。孩子和樹(shù)都隨著時(shí)間的推移而長(zhǎng)高,在一定時(shí)間內(nèi),如果使用相關(guān)性分析,可以得出這兩個(gè)變量具有相關(guān)性。然而我們都很清楚,孩子長(zhǎng)高和樹(shù)長(zhǎng)高之間,并不具有因果關(guān)系。


4. ?普森悖論

即在某個(gè)條件下的兩組數(shù)據(jù),分別討論時(shí)都會(huì)滿足某種性質(zhì),可是一旦合并考慮,卻可能導(dǎo)致相反的結(jié)論。避免“辛普森悖論”給我們帶來(lái)的誤區(qū),就需要斟酌個(gè)別分組的權(quán)重,以一定的系數(shù)去消除以分組資料基數(shù)差異所造成的影響。


5. 定義謬誤

在看某些報(bào)告或者公開(kāi)數(shù)據(jù)時(shí),經(jīng)常會(huì)有人魚(yú)目混珠?!妇W(wǎng)站訪問(wèn)量過(guò)億」,是指的訪問(wèn)用戶數(shù)還是訪問(wèn)頁(yè)面數(shù)?


6. 比率謬誤

談?wù)摯祟愋椭笜?biāo)時(shí),都需要明確分子和分母是什么。另一方面,在討論變化的百分比時(shí),需注意基數(shù)大小。如小王和小劉體重都上漲了10%,但二者的體重基數(shù)分別為60kg、90kg。

文章來(lái)源:站酷   作者:美工李大強(qiáng)



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


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

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


2022追波設(shè)計(jì)流行趨勢(shì)

周周

為了保證這篇文章的質(zhì)量,追波年度的每個(gè)作品都超過(guò)550贊。在此原則下挑選了828件作品,作品總的大小為2.2G。


相比于《2020年追波設(shè)計(jì)流行趨勢(shì)》多出了328件作品。


總結(jié)

從挑選出的828件作品中,排名前十的作品中9件為B端設(shè)計(jì),另一件作品也是B端產(chǎn)品C端化的產(chǎn)物。其中:

B端界面設(shè)計(jì)占比476/828,57.4%;

C端界面設(shè)計(jì)占比180/828,21.7%;

視頻動(dòng)效作品占比223/828,26.9%;


明眼人都能看出其中的比重關(guān)系,B端設(shè)計(jì)再次大火,為什么是再次?因?yàn)锽端設(shè)計(jì)之前火過(guò),只不過(guò)沒(méi)有趕上一個(gè)好的時(shí)代,在C端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著C端市場(chǎng)飽和與數(shù)字化的浪潮下,實(shí)體經(jīng)濟(jì)、ToB 、ToG的產(chǎn)業(yè)再次迎來(lái)了它的曙光。視頻動(dòng)效的作品占比也已超過(guò)C端界面設(shè)計(jì),相信今年視頻動(dòng)效作品占比還會(huì)再次提升。



追波年度最佳作品

追波年度最佳作品來(lái)自大家最熟悉的UI8團(tuán)隊(duì)中的Tran Mau Tri Tam ?,作者來(lái)自越南西貢,最佳作品截止目前355K瀏覽量,2933個(gè)贊。


為什么看似平平無(wú)奇的作品卻能獲得追波年度最佳作品呢?既不是C端也不是純B端的作品,更像一個(gè)網(wǎng)頁(yè)與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕,你可以理解它就是一個(gè)平面作品,一個(gè)字體加幾何形體構(gòu)建的作品,為了豐富畫(huà)面的層次,讓畫(huà)面更加的活潑采用了多彩加幾何色塊,讓標(biāo)題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標(biāo)題文字中脫穎而出,這種使用線條突出重要信息的設(shè)計(jì)也是今年追波設(shè)計(jì)流行趨勢(shì)之一。


MetroUI是Windows8的界面設(shè)計(jì)語(yǔ)言,在2010年至2013年間曾經(jīng)風(fēng)靡一時(shí),那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年,現(xiàn)在國(guó)家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng)To B 、To G 的發(fā)展元年,通過(guò)幾何色塊(MetroUI)實(shí)現(xiàn)B端產(chǎn)品與C端設(shè)計(jì)風(fēng)格的傳承與銜接,你會(huì)發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng),毛玻璃的多彩高斯模糊漸變風(fēng),年度作品當(dāng)之無(wú)愧。


最后來(lái)看下按鈕的設(shè)計(jì),正常的按鈕要么文字加色塊,要么左圖標(biāo)加右文字,它設(shè)計(jì)成左文本加右圖標(biāo),更加注重信息的可讀性和易讀性,也體現(xiàn)B端設(shè)計(jì)重功能和交互體驗(yàn),視覺(jué)點(diǎn)到為止的設(shè)計(jì)理念。


下面我們來(lái)欣賞年度最佳作品里面的流行趨勢(shì)吧。


易讀性(停頓感)

字體三原則:可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章,肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上,不能過(guò)于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每個(gè)位設(shè)計(jì)師都息息相關(guān),因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時(shí)候?qū)懽魑臅r(shí),不會(huì)寫(xiě)的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感,更加適合用戶閱讀。


通過(guò)給用戶制作停頓感來(lái)增加用戶的易讀性??梢栽谙嚓P(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來(lái)更好的理解文本內(nèi)容,豐富文本內(nèi)涵。比如情侶間表達(dá)愛(ài)意時(shí)會(huì)輸入文本,“我愛(ài)你”、“我Love你”、“我ai你”、“我??你”,哪個(gè)更加會(huì)有情感共鳴呢?不言而喻,相信你心中已經(jīng)有答案了。



曲線

在標(biāo)題文字上添加曲線來(lái)突出重要文案是2021追波最流行的趨勢(shì)之一,第一個(gè)設(shè)計(jì)目的就是突顯文字,其次就是想表現(xiàn)鉛筆真實(shí)書(shū)寫(xiě)的感覺(jué)。之前很多帶有簽名的設(shè)計(jì)中,簽字的文本都是手寫(xiě)體的感覺(jué),手寫(xiě)體對(duì)比電腦的機(jī)械字體會(huì)帶有一種人文氣息,也會(huì)讓兩者之間產(chǎn)生一種對(duì)比、矛盾。


除了突顯文本外,曲線還有視覺(jué)引導(dǎo)的作用。通過(guò)視覺(jué)引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測(cè)試,通過(guò)真實(shí)用戶眼睛瀏覽界面顯示對(duì)應(yīng)的熱點(diǎn)圖。



多彩高斯?jié)u變風(fēng)

多彩高斯?jié)u變風(fēng)是從色彩的角度來(lái)傳達(dá)和豐富畫(huà)面的,多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過(guò)程,多彩漸變多為冷暖對(duì)比來(lái)制造畫(huà)面的沖突,需要控制冷暖畫(huà)面的大小來(lái)實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫(huà)面的作用。


多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新,給用戶呈現(xiàn)一種更加新穎的視覺(jué)表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上,為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺(jué)風(fēng)格。




B端界面設(shè)計(jì)


側(cè)邊欄Sidebar

B端設(shè)計(jì)的火爆帶動(dòng)了B端相關(guān)模塊設(shè)計(jì),更多的人也愿意嘗試B端相關(guān)模塊設(shè)計(jì),側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng),好的側(cè)邊欄設(shè)計(jì)能為用戶帶來(lái)更好的效率。主流側(cè)邊欄都做了展開(kāi)、收起、拖拽等交互效果,也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì),而是一套實(shí)用美觀可落地的設(shè)計(jì)。



儀表盤(pán)設(shè)計(jì)

儀表盤(pán)設(shè)計(jì)是一個(gè)很好的隱喻,想象一下開(kāi)摩托車(chē)或汽車(chē)主駕駛前面的屏幕,汽車(chē)儀表有燃油表、車(chē)速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺(tái)界面的儀表盤(pán)設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài),大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù),團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長(zhǎng)等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同,自定義的儀表盤(pán)也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài),需要分層級(jí)系統(tǒng)性去思考和設(shè)計(jì)。



流程設(shè)計(jì)

復(fù)雜的事情簡(jiǎn)單化,簡(jiǎn)單的事情標(biāo)準(zhǔn)化,標(biāo)準(zhǔn)的事情流程化,流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù),可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計(jì)的難點(diǎn),需要對(duì)業(yè)務(wù)高度抽象,讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。



B端C化

B端C化是B端產(chǎn)品設(shè)計(jì)的視覺(jué)表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計(jì)的視覺(jué)靠齊,國(guó)內(nèi)B端產(chǎn)品界面設(shè)計(jì)視覺(jué)水平還有很大的提高空間。除了視覺(jué)上的提升外,由于業(yè)務(wù)的發(fā)展,B端產(chǎn)品也開(kāi)始移動(dòng)化、智能化,國(guó)內(nèi)主流還是通過(guò)小程序、H5來(lái)現(xiàn)實(shí)B端產(chǎn)品C端化



輕代碼化

輕代碼化是一種低代碼賦能無(wú)代碼的方式,彌補(bǔ)無(wú)代碼拓展性差、覆蓋場(chǎng)景少的問(wèn)題。在保有無(wú)代碼靈活、易用、快捷的同時(shí),又能覆蓋低代碼使用場(chǎng)景。簡(jiǎn)單理解就是無(wú)需代碼開(kāi)發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng),輕松實(shí)現(xiàn)多元業(yè)務(wù)場(chǎng)景的數(shù)字化管理。


輕代碼化將功能進(jìn)行打包,升級(jí)成全局可以用的配置,技術(shù)人員配置好后,業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版,綁定對(duì)應(yīng)的變量即可使用。




界面設(shè)計(jì)技巧


人文氣息

為什么人加色塊的組合方式能流行起來(lái)?還是B端行業(yè)流行帶動(dòng)的。B端講的更多的是企業(yè)對(duì)企業(yè)。企業(yè)對(duì)企業(yè)除了講行業(yè)解決方案外,還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對(duì)于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。


當(dāng)然企業(yè)也需要進(jìn)行營(yíng)銷(xiāo),抓人眼球。幾千年來(lái)的遺傳證明了,人的大腦對(duì)食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營(yíng)銷(xiāo)的功能。真可謂一舉兩得。


這種風(fēng)格更適合大公司,國(guó)內(nèi)的一些手機(jī)廠商O(píng)PPO、VIVO等也會(huì)通過(guò)手機(jī)+背景+人物來(lái)體現(xiàn)科技與人文的結(jié)合,而對(duì)于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。



毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應(yīng)當(dāng)下UI扁平化的設(shè)計(jì)趨勢(shì)。蘋(píng)果Mac OS Big Sur系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術(shù)-C4D創(chuàng)建彩色玻璃的4個(gè)技法”,完全能滿足UI設(shè)計(jì)師。當(dāng)然還有一個(gè)好消息就是Mac用戶可以享有OC一年免費(fèi)的使用權(quán),具體安裝購(gòu)買(mǎi)方法可以上“某寶”就可以輕松搞定,真香。




輕擬物

輕擬物這幾年一直流行,在UI設(shè)計(jì)中趨于穩(wěn)定的位置。從寫(xiě)實(shí)到扁平再到輕擬物,其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對(duì)形體產(chǎn)生的視覺(jué)感受。在色彩中對(duì)高光、亮面、明暗交界線、暗面、反光(環(huán)境光)五個(gè)部分的處理。寫(xiě)實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡(jiǎn)潔的畫(huà)面中,扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中,比如B端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma軟件對(duì)于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡(jiǎn)單且出彩。




簡(jiǎn)潔設(shè)計(jì)

簡(jiǎn)潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則,在B端產(chǎn)品界面中更加需要簡(jiǎn)潔設(shè)計(jì),我們最熟悉的Sketch軟件界面已經(jīng)是相當(dāng)?shù)暮?jiǎn)潔了?;氐浆F(xiàn)實(shí)當(dāng)需求功能不斷增加,產(chǎn)品界面的編排如何取舍,如何保證界面的簡(jiǎn)潔是設(shè)計(jì)師需要深度思考的問(wèn)題?如何與上級(jí)溝通?該功能是否可做可不做?是否需要埋點(diǎn)用數(shù)據(jù)說(shuō)話?如果只是一味競(jìng)品有我們就需要有,功能不斷累加只會(huì)讓界面越來(lái)越重。



幾何圖形

幾何圖形和幾何插畫(huà)有異曲同工之妙,幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象,產(chǎn)品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個(gè)整體。B端產(chǎn)品視覺(jué)設(shè)計(jì)C端化的進(jìn)程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年追波B端產(chǎn)品的視覺(jué)設(shè)計(jì)一定會(huì)更上一個(gè)臺(tái)階。



幾何圖形另一個(gè)場(chǎng)景化的地方就是品牌,作為一名UI設(shè)計(jì)師一定會(huì)經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過(guò)程,品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主,至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對(duì)產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。



暗黑設(shè)計(jì)

暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長(zhǎng)增大,如何在夜晚這個(gè)特定場(chǎng)景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。


在設(shè)計(jì)暗黑主題時(shí),不能為了突顯視覺(jué)上的逼格,而去使用高飽和度鮮艷的色彩來(lái)突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design給出了暗黑主題的設(shè)計(jì)準(zhǔn)則,即正文和背景之間的對(duì)比度應(yīng)至少為15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì),可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”(Figma、Sketch、XD、Chrome插件)用來(lái)測(cè)試界面的對(duì)比度。



模塊化(組件化)

為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁(yè)面來(lái)快速的搭建界面,但在B端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提,是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一,它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力


產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分,也就是幾個(gè)模塊,每一部分都是具有獨(dú)立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產(chǎn)品族中可以重用和互換,相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過(guò)模塊的組合配置,就可以創(chuàng)建不同需求的產(chǎn)品,滿足客戶的定制需求 。




插畫(huà)

插畫(huà)作為設(shè)計(jì)的一大品類,不同的插畫(huà)師都有自己擅長(zhǎng)的風(fēng)格,本質(zhì)是都有自己的個(gè)性,但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來(lái)講故事,表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫(huà)師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫(huà)風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合,插畫(huà)不會(huì)過(guò)時(shí),而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。



幾何插畫(huà)

幾何插畫(huà)算是插畫(huà)簡(jiǎn)化的一種表現(xiàn)形式,人和物的形態(tài)不再寫(xiě)實(shí),而是抽象成幾何圖形拼湊的感覺(jué),同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn),傳達(dá)出簡(jiǎn)潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上,平時(shí)多練習(xí)練習(xí)速寫(xiě)還是很有必要的。



線面插畫(huà)

線面插畫(huà)最近一兩年非常流行,準(zhǔn)確的說(shuō)是非常適合。首先線面插畫(huà)主要是由線條和塊面組合而成,用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會(huì)表現(xiàn)不出來(lái),這時(shí)候用線條簡(jiǎn)單勾勒后,結(jié)構(gòu)就會(huì)清晰明了。其次當(dāng)線面插畫(huà)運(yùn)用在界面上時(shí),可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫(huà)的風(fēng)格提升畫(huà)面熱鬧感的同時(shí),還能保持界面的干凈整潔。




動(dòng)效


微交互

界面微交互動(dòng)效會(huì)讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì),微交互和動(dòng)效設(shè)計(jì)是繞不開(kāi)的,UI界面設(shè)計(jì)通過(guò)微交互反饋告知用戶當(dāng)前正在發(fā)生的事情,所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒,取悅用戶。C端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了,一部分功勞來(lái)自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品,還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值,共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。



Mg動(dòng)畫(huà)

Mg動(dòng)畫(huà)需要很好的節(jié)奏感、韻律,每一個(gè)場(chǎng)景動(dòng)畫(huà)都需要其中的元素進(jìn)行連接變化,讓轉(zhuǎn)場(chǎng)動(dòng)畫(huà)更加自然,MG人物動(dòng)畫(huà)通過(guò)點(diǎn)線面的動(dòng)效變化讓畫(huà)面更加有趣、自然,通過(guò)粒子效果讓特定場(chǎng)景無(wú)限循環(huán)會(huì)讓人更加印象深刻。




三維


三維圖標(biāo)

MacOS Big Sur系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行,三維圖標(biāo)的應(yīng)該場(chǎng)景還是需要有較大留白空間的界面,因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺(jué)又回到了擬物化和扁平化哪個(gè)更好的問(wèn)題上?設(shè)計(jì)師應(yīng)該保持開(kāi)放多元的視角。設(shè)計(jì)本身也在不斷的演化融合,存在即合理。合適最重要,它們都會(huì)有適合自己的場(chǎng)景和設(shè)計(jì)價(jià)值。



輕三維

為什么輕三維在界面設(shè)計(jì)中占有一席之位?一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容,并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來(lái)自手機(jī)界面中的各種元素,比如組件、開(kāi)關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等,這些都是用戶日常使用系統(tǒng)軟件常見(jiàn)的元素,通過(guò)簡(jiǎn)單的幾何形體建模—打燈光—加材質(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角,結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加,特別是當(dāng)下流行的毛玻璃效果,玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光,局部的漸變色或環(huán)境光更佳出彩。



P4D(PS+C4D)

P4D是PS加C4D的設(shè)計(jì)表現(xiàn)技法,也是視覺(jué)設(shè)計(jì)的最后一個(gè)環(huán)節(jié),通過(guò)PS對(duì)C4D的渲染圖片進(jìn)行調(diào)色,利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵,還可以利用PS強(qiáng)大的合成功能,將渲染圖片與圖片素材進(jìn)行合成,來(lái)表現(xiàn)畫(huà)面的視覺(jué)度,當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果,也可以通過(guò)PS的后期合成來(lái)實(shí)現(xiàn),這也是P4D的強(qiáng)大之處。



卡通IP

卡通IP設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟,卡通IP也從傳統(tǒng)的純PS手繪技法,轉(zhuǎn)到C4D建?!巧壎ā狹D衣服制作—OC渲染—PS(靜態(tài))/AE(動(dòng)態(tài))調(diào)色。


卡通IP火的本質(zhì)更適合做營(yíng)銷(xiāo),相比于品牌或Slogan,卡通IP具有親和力和畫(huà)面感。隨著各種手辦行業(yè)大熱,受互聯(lián)網(wǎng)大廠影響下,卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒(méi)有這樣能力的人,也可以通過(guò)繪制好二維,一套三維可以選擇外包完成。


對(duì)于UI設(shè)計(jì)師來(lái)說(shuō)學(xué)習(xí)是有成本的,暫時(shí)并不是必備技能,如果喜歡完全可以學(xué)習(xí),從設(shè)計(jì)差異化的角度來(lái)看三維視覺(jué)確實(shí)有一定的競(jìng)爭(zhēng)力



三維動(dòng)畫(huà)

C4D三維場(chǎng)景動(dòng)畫(huà)通過(guò)構(gòu)建實(shí)物和場(chǎng)景模擬生活中的現(xiàn)實(shí)場(chǎng)景,會(huì)讓用戶體驗(yàn)真實(shí)感,三維軟件制作動(dòng)效的最大優(yōu)勢(shì)是通過(guò)動(dòng)力學(xué)和表達(dá)式來(lái)模擬真實(shí)感,未來(lái)在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。在三維動(dòng)畫(huà)中C4D軟件對(duì)于域、動(dòng)力學(xué)還是有一定的優(yōu)勢(shì)。



總結(jié)

上一次寫(xiě)追波流行趨勢(shì)還是兩年前了,通過(guò)兩年的沉淀對(duì)趨勢(shì)流行有了更深的認(rèn)知。十年的互聯(lián)網(wǎng)行業(yè)風(fēng)風(fēng)火火,隨著最近的互聯(lián)網(wǎng)裁員潮大家也慢慢的進(jìn)入到反思層,客觀的看待和理解這個(gè)真實(shí)的世界,曾經(jīng)的流行趨勢(shì)也需要慢慢的沉淀下來(lái)。


存在即合理,趨勢(shì)流行稍縱即逝,注定是不長(zhǎng)久的,只有大浪淘沙歷史遺留下來(lái)的風(fēng)格才能更長(zhǎng)久。但我們也不能不去關(guān)注,因?yàn)槟挠惺裁此^的創(chuàng)新,只不過(guò)是舊元素的重新組合,并符合當(dāng)下這個(gè)時(shí)代人的審美需求。香奈兒的“時(shí)尚易逝,風(fēng)格永存”大概就是這個(gè)意思吧。


6000多字的設(shè)計(jì)流行趨勢(shì),希望能幫助設(shè)計(jì)師度過(guò)互聯(lián)網(wǎng)裁員的寒春。最后希望以后每年堅(jiān)持輸出設(shè)計(jì)流行趨勢(shì)。為設(shè)計(jì)行業(yè)奉獻(xiàn)微薄之力。



文章來(lái)源:站酷   作者:水手哥

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


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

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

UI設(shè)計(jì)師交互設(shè)計(jì)-B端選擇器設(shè)計(jì)要點(diǎn)

周周

對(duì)于B端選擇器的交互邏輯使用場(chǎng)景的分析

之前總結(jié)了B端表單頁(yè)設(shè)計(jì)的一些問(wèn)題,其中信息錄入是比較重要的部分,信息錄入中選擇錄入是最為常用及復(fù)雜的組件,平時(shí)工作中遇到的相關(guān)問(wèn)題也是最多的,此次針對(duì)選擇錄入常用組件的應(yīng)用場(chǎng)景和交互規(guī)則進(jìn)行總結(jié)

選擇錄入的類型比較多,可以簡(jiǎn)單的分為兩大類即

基礎(chǔ)選擇組件:?jiǎn)芜x/多選/開(kāi)關(guān)/下拉選擇

復(fù)雜選擇組件:時(shí)間/日期/穿梭框/級(jí)聯(lián)選擇/樹(shù)形選擇等

B端表單業(yè)務(wù)場(chǎng)景比較多,很多場(chǎng)景具有通用性,有的場(chǎng)景卻有一定的獨(dú)立性,需要了解場(chǎng)景及用戶的需求和組件的適用性才能提高用戶操作體驗(yàn)和效率 

一.單選框

單選框(Radio)是表單中比較常用的控件,它通常被用來(lái)從一組互斥的相關(guān)選項(xiàng)中選擇一個(gè)單獨(dú)的選項(xiàng)。

當(dāng)點(diǎn)擊一個(gè)未選中的單選名時(shí),它會(huì)被選中,其他按鈕為未選中狀態(tài)。英文命名Radio來(lái)源于舊收音機(jī)上的按鈕,用于舊收音機(jī)不同頻道的切換,當(dāng)一個(gè)按鈕被按下時(shí),其他按鈕會(huì)彈起,使被按下的按鈕處于唯一被選擇狀態(tài)的按鈕。

  • 使用場(chǎng)景

1.當(dāng)用戶需要在一組互斥的選項(xiàng)中進(jìn)行單一選擇時(shí)使用單選框;如果要進(jìn)行多個(gè)選擇,推薦使用多選框。

2.當(dāng)選項(xiàng)數(shù)目在2-7個(gè)之間時(shí)使用單選框;如果選項(xiàng)超過(guò)7個(gè),推薦使用下拉框。

3.如果有兩個(gè)含義相反的選項(xiàng),如“同意”和“不同意”,“接受”和“拒絕”等,建議使用一個(gè)多選框或者開(kāi)關(guān)勾選為同意,不勾選為不同意。

4.如果每個(gè)選項(xiàng)都有同等的優(yōu)先級(jí),沒(méi)有推薦選項(xiàng)時(shí),使用單選框;如果需要向用戶推薦某個(gè)選項(xiàng),可以使用下拉框。

5.如果提供給用戶的選項(xiàng)很熟悉,看了第一個(gè)選項(xiàng)就能預(yù)見(jiàn)到所有的內(nèi)容,如“周一”,那么后邊的選項(xiàng)是“周二到周日”等,這種情況下就不需要將所有的選項(xiàng)都展示出來(lái),可以使用下拉框來(lái)簡(jiǎn)化界面。

  • 交互邏輯

1.選項(xiàng)的設(shè)置,在設(shè)計(jì)單選框的選項(xiàng)時(shí),要充分考慮用戶的實(shí)際情況,給出的選項(xiàng)要覆蓋到所有的情況。應(yīng)該滿足“互斥”的原則,因此選項(xiàng)之間要避免存在交集,同時(shí)也要注意選項(xiàng)覆蓋要全面,不能出現(xiàn)遺漏。

例如,要考慮到用戶不進(jìn)行選擇的情況,這時(shí)需要提供一個(gè)“無(wú)”的選項(xiàng)。給出的選項(xiàng)有可能都不符合用戶的情況,如果所有的選項(xiàng)用戶都可能不會(huì)選,就需要提供一個(gè)“其它”選項(xiàng)。

2.默認(rèn)選項(xiàng),一般情況下為第一個(gè)選項(xiàng),需要選擇最安全,最有可能的選項(xiàng)作為默認(rèn)選項(xiàng),提前預(yù)判用戶的選擇,提升用戶選擇效率。

3.選項(xiàng)排序會(huì)影響用戶選擇效率,所以需要遵循一定的原則。按照邏輯順序,選擇概率由高到低;或者按照復(fù)雜程度排序,由簡(jiǎn)單到復(fù)雜;也可以按照操作后風(fēng)險(xiǎn)排序,將最安全的操作放在前邊,由風(fēng)險(xiǎn)最低到最高進(jìn)行排序

4.排列對(duì)齊方式,豎直排列相對(duì)于水平排列而言,容易讀取和定位,可以提高用戶的瀏覽效率,所有的選項(xiàng)進(jìn)行左對(duì)齊,不用受制于選項(xiàng)的標(biāo)簽文字長(zhǎng)短,但豎直排列會(huì)占用較多的垂直空間;水平排列要注意每個(gè)選項(xiàng)之間的間距,間距盡量大一點(diǎn),要不然用戶會(huì)分不清單選按鈕的文字到底是在前邊,pc端水平空間比較大,所以相對(duì)而言,水平排列的方式更加常用。

5.交互區(qū)域,單選框的面積較小,用戶在點(diǎn)擊的時(shí)候會(huì)比較困難。可以通過(guò)擴(kuò)大點(diǎn)擊區(qū)的交互區(qū)域來(lái)提高易用性,將標(biāo)簽文字也設(shè)置為可點(diǎn)擊,增加操作區(qū)域的面積,方便用戶操作

6.文字標(biāo)簽,每個(gè)選項(xiàng)的文字都要簡(jiǎn)潔明了的表達(dá)該選項(xiàng)所代表的含義。一般使用短語(yǔ)而不是句子,因此不需要以句號(hào)來(lái)結(jié)尾。盡量保證每個(gè)文字標(biāo)簽用語(yǔ)的表達(dá)的一致性,不要出現(xiàn)有的用名詞,有的用動(dòng)詞的情況。如果需要解釋說(shuō)明,可以在選項(xiàng)下方使用單獨(dú)一行文字。如果標(biāo)簽文字無(wú)法進(jìn)行精簡(jiǎn),必須使用多行文字,將單選按鈕與文字頂對(duì)齊

7.交互狀態(tài),每個(gè)選項(xiàng)都有選中和未選中兩種情況,每種情況對(duì)應(yīng)了3種交互狀態(tài),分別為默認(rèn)、懸浮和禁用。


二.多選框

多選框的交互定義是幫助用戶完成從若干個(gè)互斥的選項(xiàng)集合當(dāng)中選取一個(gè)或者多個(gè)選項(xiàng)的任務(wù),多選框多用于表單中。傳統(tǒng)意義上,多選框是方形,單選框是圓的,用戶已經(jīng)形成這種習(xí)慣認(rèn)知,所以盡量避免使用特殊形狀

  • 使用場(chǎng)景

1.當(dāng)用戶需要在一組互斥的選項(xiàng)中進(jìn)行多個(gè)選擇,完成N選n的任務(wù),使用多選框

2.當(dāng)選項(xiàng)數(shù)目在3-7個(gè)之間時(shí)使用多選框;如果選項(xiàng)超過(guò)7個(gè),推薦使用下拉選擇

3.當(dāng)選項(xiàng)數(shù)量為一個(gè),包含“是”和“否”的邏輯,也可叫單個(gè)多選框 比如常見(jiàn)的用戶協(xié)議頁(yè)面,通常采用單個(gè)多選框。

  • 交互邏輯

選項(xiàng)排序/對(duì)齊方式/交互區(qū)域/文字標(biāo)簽等邏輯與單選框基本一致

1.選項(xiàng)的設(shè)置,因?yàn)樗羞x項(xiàng)處于外露狀態(tài),所以超過(guò)7個(gè)時(shí)建議使用下拉選擇器,避免選項(xiàng)過(guò)多難以展示

2.默認(rèn)選項(xiàng),相對(duì)單選框,默認(rèn)選擇在多選框中并不常見(jiàn)

3.提交操作,單個(gè)多選場(chǎng)景中,提交時(shí)必不可少的,可以是確認(rèn)按鈕或是其他方式;下拉選框中為了提高效率也可不用確認(rèn),點(diǎn)擊空白處即確認(rèn)選擇。

4.排列對(duì)齊方式:縱向排布,適用于選項(xiàng)內(nèi)容較多或信息長(zhǎng)度差異較大的情況;橫向,適用于選項(xiàng)數(shù)量多且內(nèi)容簡(jiǎn)短的情況

5.特殊狀態(tài):相對(duì)于其他控件,多選有了兩個(gè)較為特殊的狀態(tài)“半選中”“禁用(已選)”

1)半選中狀態(tài)是全選狀態(tài)的一種特殊狀態(tài),依附于全選狀態(tài),所以當(dāng)多選框中存在全選時(shí)才可能出現(xiàn)半選狀態(tài),同時(shí)還需要有選中狀態(tài)的子項(xiàng),全選半選狀態(tài)屬于【父級(jí)】狀態(tài),交互的邏輯是狀態(tài)的變化是隨時(shí)體現(xiàn)的,所以【子級(jí)】狀態(tài)的變化,作為【父級(jí)】狀態(tài)也應(yīng)該隨之變化,這樣父子級(jí)聯(lián)動(dòng)才會(huì)有半選中狀態(tài)的出現(xiàn)。

2)禁用狀態(tài)有未選禁用和已選禁用,未選禁用一般是該條數(shù)據(jù)不滿足條件無(wú)法選中進(jìn)行操作。而已選禁用一般用戶的權(quán)限不足無(wú)法進(jìn)行操作,通常展示出來(lái)只是為了讓用戶了解到有此操作。 

  • 應(yīng)用場(chǎng)景

1.復(fù)雜選擇器

復(fù)雜選擇器中常常會(huì)用到多選框,可以明確展示選項(xiàng)的選擇狀態(tài),需要注意的是多選框可以承載的半選,全選狀態(tài)所對(duì)應(yīng)的關(guān)系,是否符合業(yè)務(wù)場(chǎng)景。在實(shí)際工作中,我曾遇到過(guò)父級(jí)選擇影響子級(jí)但是子級(jí)無(wú)法影響父級(jí)的多選場(chǎng)景,不符合常規(guī)的多選習(xí)慣,但是在實(shí)際業(yè)務(wù)場(chǎng)景中真實(shí)存在。

2.權(quán)限設(shè)置

在很多權(quán)限設(shè)置/流程設(shè)置的頁(yè)面中,常常會(huì)用到多選框,需要注意的是各個(gè)場(chǎng)景中選中,取消,默認(rèn),重置等不同狀態(tài)下,頁(yè)面的變化,狀態(tài)扭轉(zhuǎn)時(shí)交互邏輯的合理性和易用性。

3.表格多選

表格頁(yè)面情況多且復(fù)雜,對(duì)于勾選有兩種形式一種是勾選多選框,一種是點(diǎn)擊行數(shù)據(jù)選擇,需要明確哪一種更適合當(dāng)前的業(yè)務(wù)場(chǎng)景。另外表格的中最多的功能即是全選操作或是部分選擇操作,需明確操作后對(duì)整個(gè)表格的影響 

三.開(kāi)關(guān)

開(kāi)關(guān)用于兩種相對(duì)對(duì)立的狀態(tài)的切換,多用于「開(kāi)/關(guān)」「啟用/停用」等,不同于單選和多選開(kāi)關(guān)是一個(gè)即時(shí)性的操作,這也導(dǎo)致開(kāi)關(guān)使用的特殊性。開(kāi)關(guān)能明確的展示當(dāng)前的功能狀態(tài),讓用戶能高效的進(jìn)行跳轉(zhuǎn)操作。

  • 使用場(chǎng)景

1.用于對(duì)流程的快速開(kāi)啟,如表格中開(kāi)啟或關(guān)閉某條數(shù)據(jù)/功能

2.權(quán)重較高的功能或設(shè)置,如配置表單的停用/啟用,用戶權(quán)限的啟用/停用

3.用于開(kāi)啟/關(guān)閉全局權(quán)限,后設(shè)置其他功能的操作,如業(yè)務(wù)規(guī)則的設(shè)置等

  • 交互邏輯

1.開(kāi)關(guān) 配有對(duì)應(yīng)的文字說(shuō)明,開(kāi)啟/關(guān)閉某種功能或權(quán)限

2.開(kāi)關(guān)具有聯(lián)動(dòng)性,通過(guò)開(kāi)關(guān)去控制下層功能的操作

3.開(kāi)關(guān)的每一次變更狀態(tài)都要有相應(yīng)的反饋,輔助用戶進(jìn)行狀態(tài)判斷


四.下拉選擇

下拉選擇B端業(yè)務(wù)中最常用的組件,且下拉選擇的類型也比較廣,一般有下拉單選,下拉多選,下拉級(jí)聯(lián),下拉樹(shù)等基本場(chǎng)景是可選項(xiàng)過(guò)多時(shí),會(huì)使用下拉選擇器對(duì)所有選項(xiàng)進(jìn)行整合方便用戶高效錄入信息。選項(xiàng)層級(jí)建議不超過(guò) 三層且需要有一定的邏輯排序,通常包括觸發(fā)器和下拉面板兩個(gè)部分當(dāng)選項(xiàng)數(shù)量過(guò)多的時(shí)候,建議增加「搜索」功能。

  • 下拉選擇結(jié)構(gòu)

1.標(biāo)簽文本:選擇器標(biāo)題,明確選擇內(nèi)容

2.選框:與文本框類似,需有一個(gè)外邊框,為可操作的熱區(qū)范圍,主要功能是與下拉菜單進(jìn)行聯(lián)動(dòng)

當(dāng)選項(xiàng)較多的時(shí)候,多選框會(huì)配上搜索功能,目的是為了讓用戶快速找到對(duì)應(yīng)的選項(xiàng),而形式主要有以下兩種

3.右側(cè)標(biāo)識(shí)(可選):每個(gè)選框右側(cè)的圖標(biāo),都是選框類型的象征。常見(jiàn)的是下拉箭頭,默認(rèn)朝下;展示選項(xiàng)列表時(shí),箭頭朝上。

4.占位符:保持暗提示的簡(jiǎn)潔,避免把暗提示作為選擇器的輔助說(shuō)明,默認(rèn)占位文字,格式為「請(qǐng)選擇xxx」

5.回顯值:回顯值通常包括兩種類型

1)當(dāng)下拉單選,一般采用純文本回顯即可

2)當(dāng)下拉多選,需要同時(shí)展示多個(gè)選中項(xiàng),因此在錄入框中采取Tag形式,使單個(gè)選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán)

6.選項(xiàng):下拉選擇一般針對(duì)選項(xiàng)數(shù)超過(guò)5個(gè)

內(nèi)容:1)選框 + 文本 + 副文本; 2)選框 + 文本; 3)文本 + 副文本; 4)文本。除了選項(xiàng)內(nèi)容的不同,形式中也有較為復(fù)雜的,重點(diǎn)分析級(jí)聯(lián)選擇和樹(shù):

1)樹(shù)展示,可選擇的數(shù)據(jù)是一個(gè)樹(shù)形結(jié)構(gòu)時(shí),例如公司層級(jí)、學(xué)科系統(tǒng)、分類目錄等,樹(shù)結(jié)構(gòu)中可以自由選擇子節(jié)點(diǎn)和根結(jié)點(diǎn)。

2)級(jí)聯(lián)展示,針對(duì)的一般是有所屬關(guān)系的選項(xiàng)且所屬關(guān)系比較明確,層級(jí)一般3-5級(jí),選擇到最末子級(jí)才能完成選擇一般是由大到小進(jìn)行選擇,選項(xiàng)數(shù)量上3>2>1,比如省市縣選擇

3)分組展示,選項(xiàng)過(guò)多時(shí)考慮使用的方式,使用分割線將同一類選項(xiàng)進(jìn)行劃分,用戶選擇時(shí)會(huì)思考從大的分類到具體的選項(xiàng)。但選項(xiàng)過(guò)多則還是建議用樹(shù)結(jié)構(gòu)

7.選項(xiàng)面板:承載所有可選擇的選項(xiàng)列表,在選項(xiàng)數(shù)量過(guò)多時(shí)會(huì)對(duì)下拉菜單的高度進(jìn)行限制,即設(shè)置下拉菜單的最大高度,當(dāng)超過(guò)最大高度時(shí),出現(xiàn)滾動(dòng)條。面板相當(dāng)于一個(gè)容器可以根據(jù)業(yè)務(wù)需求承載復(fù)雜的形式 例如tab分類、錨點(diǎn)、字母定位等,


  • 選擇器狀態(tài)

默認(rèn)(Default  

懸停(Hover

1.未選擇,若選框有搜索功能則光標(biāo)變成文本輸入狀態(tài),若沒(méi)有搜索功能則光標(biāo)變成小手(示例

2.已選擇,選擇后懸停狀態(tài)下全部清空的功能,不是所有場(chǎng)景下配置該功能, 要考慮實(shí)際業(yè)務(wù)中是否需要清空

激活(Active

1.未選擇,點(diǎn)擊框體激活下拉面板,單選一般是勾選后自動(dòng)關(guān)閉面板,多選則需要點(diǎn)擊面板以外確認(rèn)關(guān)閉面板

2.已選擇,若是已選擇再次激活,需要將已選擇的選項(xiàng)高亮,再次點(diǎn)擊已選選項(xiàng)則取消選擇;選項(xiàng)熱區(qū),一般將整行作為熱區(qū)擴(kuò)大點(diǎn)擊范圍,方便用戶操作。

禁用(Disable

1.選框禁用,用戶無(wú)法激活,選框置灰,在設(shè)計(jì)工程中需要將禁用于正常狀態(tài)之間拉開(kāi)差距,這樣用戶能快速識(shí)別

2.選項(xiàng)禁用,表示該選項(xiàng)無(wú)法被選擇,不影響整個(gè)選擇器的功能,只用將該選項(xiàng)置灰即可,光標(biāo)置入時(shí)會(huì)變成Not allowed


  • 回顯規(guī)則

  1. 單選,多數(shù)單選選擇后下拉面板自動(dòng)收起,回顯選擇的選項(xiàng),選項(xiàng)回顯時(shí)有一些特殊情況如存在極端情況文案過(guò)長(zhǎng)則結(jié)尾用「…」展示, hover 顯示「文字提示氣泡」;或者選項(xiàng)中存在主文本副文本,考慮實(shí)際業(yè)務(wù)場(chǎng)景回顯時(shí)可只顯示主文本。

  2. 多選,以Tag形式展示已選擇項(xiàng)使單個(gè)選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán);存在的極端情況是當(dāng)選項(xiàng)過(guò)多時(shí)的展示效果,一般有兩種形式撐開(kāi)高度和選項(xiàng)融合

      1)撐開(kāi)高度,一般用在需要完全展示選擇項(xiàng)同時(shí)可快速調(diào)整已選項(xiàng)的場(chǎng)景中,通過(guò)改變錄入框的整體高度來(lái)展示完整的選型,撐開(kāi)的高度能在表單中實(shí)現(xiàn)一些疏密變化,一般也不會(huì)無(wú)限撐開(kāi),會(huì)有一定的限制,并且在右側(cè)增加滾動(dòng)條。

     2)選項(xiàng)融合,對(duì)選項(xiàng)展示不作要求的場(chǎng)景中可根據(jù)文本框的寬度進(jìn)行選項(xiàng)融合,展示具體的選項(xiàng)數(shù)量即可,這樣能最大程度的保證表單的的整齊,讓選擇器的適配性更高。

     3)省略展示選項(xiàng),以文本形式展示,鼠標(biāo)hover氣泡展示全部選項(xiàng)信息

問(wèn)題思考

何時(shí)用下拉選框,何時(shí)用彈窗選擇?

大部分情況下,單選優(yōu)先用下拉選框,用戶比較高效的完成選擇,同時(shí)也可以明確自己的選擇。而多選場(chǎng)景中對(duì)于選項(xiàng)數(shù)量可控,選項(xiàng)復(fù)雜度較低的可以用下拉選框。但是對(duì)于選項(xiàng)結(jié)構(gòu)復(fù)雜,內(nèi)容過(guò)載,用戶頻繁的滾動(dòng)容易造成誤操作影響選擇的準(zhǔn)確性和高效性,此時(shí)會(huì)考慮使用彈窗,且多選彈窗一般需要配有搜索區(qū),選項(xiàng)區(qū),已選區(qū)。需要注意的是,已選項(xiàng)在彈窗內(nèi)的顯示以及回顯形式。多選彈窗一般可以比較直觀的展示已選項(xiàng),所以可以采用省略展示選項(xiàng)的方式。


選擇搜索如何顯示?

如下彈窗選擇中,對(duì)于數(shù)量和層級(jí)比較復(fù)雜的選擇項(xiàng),搜索是很有必要的,對(duì)于搜索結(jié)果的展現(xiàn)形式不同的場(chǎng)景可能會(huì)有不同,用戶使用搜索一般是對(duì)于選項(xiàng)比較明確,所以推薦搜索結(jié)果展示末級(jí),用戶可以更高效的做出選擇,避免復(fù)雜的層級(jí)關(guān)系干擾。


五.時(shí)間與日期選擇器

  • 兩種類型

1.時(shí)間點(diǎn)選擇,選定某一個(gè)時(shí)間/日期點(diǎn),B端時(shí)間點(diǎn)選擇的業(yè)務(wù)場(chǎng)景較少

2.時(shí)間段選擇,選定某一個(gè)時(shí)間范圍,一般有開(kāi)始時(shí)間和結(jié)束時(shí)間,時(shí)間段的應(yīng)用一般是在數(shù)據(jù)篩選的場(chǎng)景中

確定時(shí)間類型后,要考慮時(shí)間粒度,時(shí)間粒度分為年、季、月、周、天、時(shí)、分、秒,B端圖表頁(yè)面中針對(duì)年度、季度、月度的篩選時(shí)很常見(jiàn)的,需要結(jié)合場(chǎng)景選擇時(shí)間粒度。

日期選擇器中一般是通過(guò)點(diǎn)擊讓用戶選擇時(shí)間,除了讓用戶點(diǎn)選外,時(shí)間選擇器還會(huì)提供一些快捷選項(xiàng)例如“今天、本周、本月,本季度“等。選擇后回顯的時(shí)間顯示格式有多種如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平臺(tái)需要確定統(tǒng)一的樣式,避免增加用戶的認(rèn)知成本。

時(shí)間段選擇,常見(jiàn)兩種形式分段式和連體式,在不同的平臺(tái)都有應(yīng)用,在交互上的區(qū)別分段式需要用戶點(diǎn)擊兩次分別選擇開(kāi)始時(shí)間和結(jié)束時(shí)間,連體式是用戶點(diǎn)擊一次調(diào)起時(shí)間選擇時(shí)間段,相對(duì)而言連體式操作更便捷,但是分段式理解更簡(jiǎn)單,連體式存在一定的認(rèn)知成本,總體上來(lái)說(shuō)其實(shí)區(qū)別并不大,平臺(tái)需要建立統(tǒng)一的標(biāo)準(zhǔn),這樣能形成較為統(tǒng)一的體驗(yàn)和習(xí)慣。 


選擇器在實(shí)際工作中應(yīng)用廣泛,B端業(yè)務(wù)復(fù)雜,總會(huì)遇到各種新的場(chǎng)景,總結(jié)會(huì)有不足不全之處,歡迎大家一起探討交流。


文章來(lái)源:站酷   作者:MuMu魚(yú)

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


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

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

日歷

鏈接

個(gè)人資料

存檔