首頁

如何設(shè)計(jì)友好易用的表單

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

表單對(duì)于用戶和產(chǎn)品同樣重要。當(dāng)我們需要收集數(shù)據(jù)時(shí),表單是我們最常采取的方式(也許是由于在互聯(lián)網(wǎng)普及之前,表單就已經(jīng)長(zhǎng)期應(yīng)用于我們?nèi)粘I钪?)。因此,將表單設(shè)計(jì)得友好易用是提高用戶信息填寫完成率的關(guān)鍵。


表單拆解

表單的樣式會(huì)根據(jù)業(yè)務(wù)目標(biāo)、內(nèi)容的不同而發(fā)生變化,但是有一些基礎(chǔ)的組成部分能幫助用戶快速順利地完成表單的填寫。


1.類別標(biāo)題:類別標(biāo)題能夠幫助用戶瀏覽表單并同時(shí)解釋整個(gè)表單的大致內(nèi)容是什么。當(dāng)你需要把被收集的信息分類為多個(gè)部分時(shí),比如個(gè)人信息、職業(yè)信息和財(cái)務(wù)狀況,這時(shí)類別標(biāo)題就可以派上用場(chǎng)。


2.文本標(biāo)簽: 文本標(biāo)簽?zāi)軌蛱崾居脩粼诿總€(gè)輸入框中應(yīng)該填寫什么樣的信息。


3.提示文字:文本標(biāo)簽的附加說明。


4.錯(cuò)誤信息提示:向用戶反饋為什么輸入框中輸入的信息有誤。


5.重要行為召喚按鈕:表單末尾的按鈕,用來提交表單上輸入的內(nèi)容。



表單狀態(tài)


在用戶使用表單時(shí),有三種最基本的狀態(tài)能夠幫助用戶完成操作。


1.默認(rèn)狀態(tài):默認(rèn)狀態(tài)是用戶未進(jìn)行任何操作時(shí)的狀態(tài)。


2.激活狀態(tài):當(dāng)用戶點(diǎn)擊輸入框后,輸入框就變成激活狀態(tài)并通過樣式的變化強(qiáng)調(diào)顯示。如果用戶視線離開了屏幕一小會(huì)兒,這個(gè)狀態(tài)可以幫助用戶快速瀏覽定位。


3.反饋狀態(tài):此狀態(tài)一般在完成一個(gè)信息的填寫,并進(jìn)行下一個(gè)字段輸入的時(shí)候出現(xiàn),讓用戶了解輸入的信息是否正確。對(duì)于一些無法立即驗(yàn)證的信息可以在用戶提交表單的時(shí)候進(jìn)行反饋。



設(shè)計(jì)原則


1.保持簡(jiǎn)單:將表單設(shè)計(jì)得短且簡(jiǎn)單。只收集必要的信息,避免讓用戶分開填寫姓氏和名字(分開填寫姓氏和名字一般只存在于外國網(wǎng)站)。允許用戶查看已輸入的密碼,而不要讓用戶填寫兩次密碼去確認(rèn)。


2.使用內(nèi)嵌提示:當(dāng)用戶輸入信息有誤時(shí)要給出錯(cuò)誤提示,同時(shí)要將錯(cuò)誤原因注明在相應(yīng)的輸入框旁。


3.組合相關(guān)項(xiàng):將有相關(guān)性的填寫項(xiàng)組合在一起,然后將它們以合理的順序整理,這可以幫助用戶不必花費(fèi)太多認(rèn)知成本去填寫必要的內(nèi)容, 這個(gè)過程不僅輕松而且只需要用戶很短的專注時(shí)間。


4.使用左對(duì)齊的文本標(biāo)簽:始終在輸入字段上方放置文本標(biāo)簽。不要用文本標(biāo)簽替換提示文字,不然用戶在提交表單之前很難檢查他們輸入的信息,會(huì)浪費(fèi)較多的時(shí)間。請(qǐng)把標(biāo)簽放在輸入字段上方并且左對(duì)齊。


5.根據(jù)輸入信息的格式設(shè)計(jì)輸入框:簡(jiǎn)單來說,確保輸入框的格式與輸入信息的格式協(xié)調(diào)。比如說,地址的輸入框應(yīng)該比手機(jī)號(hào)碼的輸入框更長(zhǎng)。


6.CTA按鈕(行為召喚按鈕)

一般表單的后面會(huì)有一個(gè)或多個(gè)按鈕,比如“提交”、“下一步”之類的。在按鈕有多個(gè)的情況下,最重要、或者是最想要用戶點(diǎn)擊的按鈕應(yīng)該要突出,而其他按鈕弱化處理。

當(dāng)使用模態(tài)視圖狀態(tài)下的表單時(shí),有時(shí)會(huì)有一個(gè)關(guān)閉按鈕用于關(guān)閉模態(tài)視圖。另一種設(shè)計(jì)方式是使用叉號(hào)圖標(biāo)并將其放置在頂部的右側(cè)邊緣,它可以代替關(guān)閉按鈕,如圖所示。


7.搜索字段:當(dāng)網(wǎng)站內(nèi)容比較多的時(shí)候,把搜索字段做的明顯些,方便用戶對(duì)網(wǎng)站內(nèi)容進(jìn)行篩選。同樣的,在用戶使用了搜索功能獲取到結(jié)果后,不要清除搜索框內(nèi)的搜索關(guān)鍵字,因?yàn)橛脩艨赡軙?huì)查看最初他們搜索了什么。


8.清晰:向用戶清晰地表達(dá)信息,不要出現(xiàn)含糊不清的詞。用戶可能不愿意填寫表單,所以盡可能清晰簡(jiǎn)單。如下圖的綠色按鈕文字使用“提現(xiàn)”而不要使用“確定”。


原文:https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

作者:Momoh Silm

譯者:Ballen貝林、春風(fēng)似蛋撻

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

授權(quán)截圖

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

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


文章來源:站酷   作者:Ballen成明

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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è)方向多維度分析服務(wù)設(shè)計(jì)

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

服務(wù)設(shè)計(jì)大家也不陌生了吧,關(guān)注我們的同學(xué)也看過我們寫過很多關(guān)于服務(wù)設(shè)計(jì)的文章這其中也有一些枯燥的科普文還有理性討論的文章,當(dāng)然也有很多不了解服務(wù)設(shè)計(jì)的小伙伴,所以這篇文章就來幫大家介紹一下:服務(wù)設(shè)計(jì)。

從用戶體驗(yàn)到服務(wù)設(shè)計(jì):沒有人會(huì)告訴你這赤裸裸的真相
如果你想學(xué)服務(wù)設(shè)計(jì),有哪些可選專業(yè)?[備查]
為什么要應(yīng)用服務(wù)設(shè)計(jì)?
服務(wù)設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì):有什么區(qū)別?


吸引客戶并與公司建立聯(lián)系


服務(wù)設(shè)計(jì)方法幫助公司更有效地執(zhí)行新思想、滿足客戶期望、打破藩籬并創(chuàng)造商業(yè)價(jià)值。通過可視化新的想法和客戶旅程,并從第一天就與客戶和員工進(jìn)行測(cè)試,這種方法突出了潛在的挑戰(zhàn),并產(chǎn)生想法來緩解它們,從而增強(qiáng)了對(duì)想法的信心和對(duì)行動(dòng)的更高承諾。


結(jié)論

  • 服務(wù)設(shè)計(jì)關(guān)注客戶需求,執(zhí)行想法并創(chuàng)造商業(yè)價(jià)值。

  • 從最開始,服務(wù)設(shè)計(jì)就通過與客戶和員工進(jìn)行測(cè)試來降低商業(yè)風(fēng)險(xiǎn)。

  • 在整個(gè)公司中共享客戶洞見,可以打破藩籬,并使工作一致。


沒有良好執(zhí)行的聰明策略很少能實(shí)現(xiàn)卓越的服務(wù)。需要工藝、正確的方法和技能,才能以具體的方式將客戶與企業(yè)聯(lián)系起來。服務(wù)設(shè)計(jì)是幫助公司實(shí)現(xiàn)新的客戶體驗(yàn)、滿足客戶期望、處理內(nèi)部挑戰(zhàn)和創(chuàng)造商業(yè)價(jià)值的強(qiáng)大工具。


顧客的視角


服務(wù)設(shè)計(jì)方法將人的關(guān)注點(diǎn)引入到服務(wù)的開發(fā)中。它幫助公司以客戶的眼光來看待全局,并提供工具來設(shè)計(jì)客戶與整個(gè)公司之間的每一個(gè)小小的互動(dòng)。


客戶洞見是有價(jià)值的


市場(chǎng)調(diào)查告訴你客戶喜歡什么,但可能無法告訴你為什么。


服務(wù)設(shè)計(jì)者使企業(yè)能夠更深層次地了解客戶。從深度訪談和觀察到創(chuàng)意客戶研討會(huì),這些方法幫助公司理解為什么人們經(jīng)常言行不一,以及尋找下一個(gè)大創(chuàng)意。


在整個(gè)公司中分享客戶洞見也可以有效地打破藩籬并協(xié)調(diào)工作,這樣公司就能夠交付通過多種渠道與客戶互動(dòng)的體驗(yàn)。

觀察顧客去了哪里,他們看到了什么,聽他們說了什么。獲得深刻的客戶洞見,推動(dòng)新想法。


眼見為實(shí)


讓想法看得見摸得著是在組織內(nèi)部澄清和獲得新概念認(rèn)同的有力方式。這種方法也突出了可能出現(xiàn)的潛在挑戰(zhàn),并有助于產(chǎn)生緩解這些挑戰(zhàn)的想法,從而增強(qiáng)對(duì)這些想法的信心,提高對(duì)行動(dòng)的承諾。


這就是為什么服務(wù)設(shè)計(jì)者總是在想法和解決方案出現(xiàn)時(shí)就將其可視化的原因。一種策略可以以可視的格式更有效地進(jìn)行溝通,客戶和員工之間的交流配上一段動(dòng)畫就會(huì)更容易理解,一個(gè)提議可以通過web界面的設(shè)計(jì)細(xì)節(jié)得到強(qiáng)化。

服務(wù)場(chǎng)景可以讓企業(yè)立即了解新服務(wù)對(duì)客戶和員工意味著什么。


服務(wù)藍(lán)圖


客戶互動(dòng)或接觸點(diǎn)的關(guān)鍵時(shí)刻,越來越多地蔓延到公司的不同部分。


服務(wù)藍(lán)圖是一個(gè)可視化的工具,幫助公司協(xié)調(diào)不同的部門作為一個(gè)整體一起工作,以創(chuàng)建一個(gè)好的、一致的客戶體驗(yàn)。藍(lán)圖是一幅地圖,描述了客戶通過新服務(wù)的旅程,以及公司如何通過各種渠道與他們接觸。新客戶體驗(yàn)的愿景共享有助于部門之間的協(xié)調(diào),并使他們更致力于項(xiàng)目。

服務(wù)藍(lán)圖使公司能夠看到各個(gè)渠道必須如何協(xié)同工作才能提供良好的服務(wù)體驗(yàn)。


測(cè)試體驗(yàn)


盡管在研發(fā)方面投入了大量資金,但仍有很多產(chǎn)品和服務(wù)在客戶或交付成本方面失敗的例子。


服務(wù)設(shè)計(jì)者通過讓客戶和員工從第一天就參與到測(cè)試中來降低這些風(fēng)險(xiǎn)。因此,在大量資金投入技術(shù)或公司變革之前,公司就可以學(xué)習(xí)、改變和完善理念。


可以快速而廉價(jià)地構(gòu)建服務(wù)原型。設(shè)計(jì)師使用簡(jiǎn)單的模型和場(chǎng)景對(duì)少量客戶和員工進(jìn)行測(cè)試。在后期階段,客戶和部門數(shù)量有限的試點(diǎn)也可以產(chǎn)生更多的證據(jù),證明服務(wù)可以在更大的范圍內(nèi)發(fā)揮作用。

一項(xiàng)針對(duì)英國無工作人群的為期9個(gè)月的試驗(yàn)證明了不同的人群是如何成功進(jìn)入職場(chǎng)的。


它很有趣!


服務(wù)設(shè)計(jì)師被訓(xùn)練成以高度協(xié)作的方式工作,并擁有廣泛的創(chuàng)造性方法來將這種思維模式帶到公司中。


系統(tǒng)的、創(chuàng)造性的解決問題的方法的結(jié)合產(chǎn)生了大量的解決方案,并激勵(lì)著團(tuán)隊(duì)不斷創(chuàng)新。讓我們玩得開心!服務(wù)設(shè)計(jì)方法放大了你克服障礙的潛力,使雄心勃勃的想法成為成功的現(xiàn)實(shí)。

我認(rèn)為服務(wù)設(shè)計(jì)是當(dāng)今商業(yè)世界中最重要的設(shè)計(jì)分支。-Kerry Bodine, Forrester Research副總裁兼客戶體驗(yàn)部首席分析師

持久的客戶關(guān)系


服務(wù)設(shè)計(jì)提供了創(chuàng)造性的、以人為中心的方法、工具和技能來執(zhí)行策略。用這種方法來彌補(bǔ)公司所能做的和人們需要和想要的之間的差距。其結(jié)果將是創(chuàng)造更好的體驗(yàn),建立持久的客戶關(guān)系。

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

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



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

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)


UX映射方法對(duì)比:同理心地圖、客戶旅程圖、體驗(yàn)地圖和服務(wù)藍(lán)圖

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

在工作中,由于每個(gè)人對(duì)用戶目標(biāo)、用戶需求的理解點(diǎn)不同,而且每個(gè)人多多少少從自身體驗(yàn)出發(fā),設(shè)計(jì)師、產(chǎn)品、技術(shù)人員很難對(duì)產(chǎn)品達(dá)成一致,導(dǎo)致產(chǎn)品需求評(píng)審、設(shè)計(jì)評(píng)審過程中發(fā)生很多爭(zhēng)論、分歧,而且很難說服彼此。大家可以回想一下,是不是也經(jīng)歷過這些?


設(shè)計(jì)師和開發(fā)、產(chǎn)品經(jīng)歷,通常來自不同背景和經(jīng)驗(yàn)的團(tuán)隊(duì),他們必須就項(xiàng)目目標(biāo)、用戶需求和行為,甚至所涉及的組件流程達(dá)成共識(shí)。這種共同理解通常是通過可視化(通常稱為映射)構(gòu)建的。映射理解并描述了與產(chǎn)品相關(guān)的各個(gè)方面和過程。

四種類型的映射

本文概述了四種常用映射、它們的定義特征以及何時(shí)使用:

  • 同理心地圖

  • 客戶旅程地圖

  • 體驗(yàn)地圖

  • 服務(wù)藍(lán)圖

外,本文將概述在創(chuàng)建這些映射之前必須做出的準(zhǔn)備。


同理心地圖

同理心地圖幫助團(tuán)隊(duì)成員了解用戶的心態(tài)。


定義: 同理心地圖是用來表述我們所知道的一個(gè)特定類型的用戶的工具。它將用戶知識(shí)外化,以便 1) 建立共同的理解,以及 2) 輔助決策。

特征:

  • 地圖分為 4 個(gè)象限:所說、所想、所做、感覺。

  • 它顯示了用戶對(duì)與產(chǎn)品相關(guān)任務(wù)的看法。

  • 它不是按時(shí)間順序或任務(wù)順序排列的。

  • 每個(gè)角色或用戶類型都有一個(gè)移情圖(1:1 映射)。

為什么使用它:

  • 與用戶建立同理心

  • 強(qiáng)制團(tuán)隊(duì)內(nèi)部人員對(duì)齊和理解用戶類型

何時(shí)使用:

  • 任何設(shè)計(jì)過程的開始

  • 在對(duì)用戶訪談中的研究筆記進(jìn)行分類時(shí)

客戶旅程圖

客戶旅程地圖側(cè)重于特定客戶與產(chǎn)品或服務(wù)的互動(dòng)。

定義: 客戶的旅程地圖是過程的可視化:一個(gè)人為了實(shí)現(xiàn)特定的業(yè)務(wù)或產(chǎn)品目標(biāo)的過程。它用于理解和解決客戶的需求和痛點(diǎn)。

在最基本的形式中,旅程地圖首先將一系列用戶目標(biāo)和操作編譯到時(shí)間線框架中。接下來,用用戶的想法和情感充實(shí)骨架以創(chuàng)建敘事。最后,該敘述被濃縮為一個(gè)可視化、用于傳達(dá)將為設(shè)計(jì)過程提供信息的工具。

特征:

  • 該地圖與特定產(chǎn)品或服務(wù)相關(guān)聯(lián)。

  • 它分為 4 個(gè)泳道:階段、行動(dòng)、思想、心態(tài)/情緒。

  • 它反映了用戶的觀點(diǎn):

    • 包括她的心態(tài)、想法和情感

    • 省略大部分流程細(xì)節(jié)

  • 它是按時(shí)間順序的。

  • 每個(gè)角色/用戶類型有一張地圖(1:1 映射)。

為什么使用它:

  • 確定導(dǎo)致痛苦或愉悅的特定客戶旅程接觸點(diǎn)

  • 打破孤島,對(duì)客戶旅程建立一種共享的、組織范圍內(nèi)的理解

  • 將旅程中關(guān)鍵接觸點(diǎn)的所有權(quán)分配給內(nèi)部部門

何時(shí)使用:

  • 在設(shè)計(jì)過程的任何時(shí)候,作為整個(gè)產(chǎn)品設(shè)計(jì)周期中團(tuán)隊(duì)之間的參考點(diǎn)

體驗(yàn)地圖

體驗(yàn)地圖概括了跨用戶類型和產(chǎn)品的客戶旅程地圖的概念。

定義: 體驗(yàn)地圖是“一般”人為實(shí)現(xiàn)目標(biāo)而經(jīng)歷的整個(gè)端到端體驗(yàn)的可視化。這種體驗(yàn)與特定業(yè)務(wù)或產(chǎn)品無關(guān)。它用于理解一般的人類行為(與客戶旅程地圖相反,后者更具體并專注于與特定業(yè)務(wù)相關(guān))。

特征:

  • 它與特定的產(chǎn)品或服務(wù)無關(guān)。

  • 它分為 4 個(gè)泳道:階段、行動(dòng)、思想、心態(tài)/情緒。

  • 它提供了一個(gè)普遍的人類視角;它不是特定于特定用戶類型或產(chǎn)品/服務(wù)的。

  • 它按時(shí)間順序描述事件。

為什么使用它:

  • 了解一般人類行為

  • 創(chuàng)建對(duì)產(chǎn)品/服務(wù)不可知的體驗(yàn)的基線理解

何時(shí)使用:

  • 在客戶旅程地圖之前,以獲得對(duì)一般人類行為的理解

  • 將多種體驗(yàn)(工具和特定用戶不可知)融合到一個(gè)可視化中時(shí)

服務(wù)藍(lán)圖

服務(wù)藍(lán)圖是客戶旅程地圖的對(duì)應(yīng)物,專注于員工。

 

定義: 服務(wù)藍(lán)圖可視化不同的業(yè)務(wù)組件之間的關(guān)系-人、道具(物理或數(shù)字證據(jù))和流程-這是直接與接觸點(diǎn)在特定客戶的旅程。

將服務(wù)藍(lán)圖視為客戶旅程地圖的第二部分。與客戶旅程地圖類似,藍(lán)圖在涉及許多服務(wù)相關(guān)產(chǎn)品的復(fù)雜場(chǎng)景中發(fā)揮著重要作用。藍(lán)圖是實(shí)現(xiàn)全渠道、涉及多個(gè)接觸點(diǎn)或需要跨職能工作(即多個(gè)部門的協(xié)調(diào))的體驗(yàn)的理想方法。

特征:

  • 它與特定服務(wù)相關(guān)聯(lián)。

  • 它分為 4 個(gè)泳道:客戶行動(dòng)、前臺(tái)行動(dòng)、后臺(tái)行動(dòng)和支持流程。

  • 它反映了組織的觀點(diǎn):

    • 專注于服務(wù)提供商和員工

    • 遺漏了大多數(shù)客戶詳細(xì)信息

  • 它是按時(shí)間順序和等級(jí)劃分的。

為什么使用它:

  • 發(fā)現(xiàn)組織中的弱點(diǎn)

  • 確定優(yōu)化機(jī)會(huì)

  • 彌合跨部門的努力

  • 打破孤島并創(chuàng)建一種對(duì)如何提供服務(wù)的組織范圍內(nèi)的共享理解

何時(shí)使用:

  • 客戶旅程映射之后

  • 在進(jìn)行組織或流程變更之前

  • 在內(nèi)部查明漏斗或斷點(diǎn)時(shí)

三步?jīng)Q策框架 

在開始任何映射工作(無論類型如何)之前,必須做出 3 個(gè)決定:

1. 當(dāng)前與未來

這個(gè)決定涉及可視化中描述的動(dòng)作和狀態(tài):它們反映了當(dāng)前狀態(tài)還是理想狀態(tài)?

  • 當(dāng)前映射基于您正在映射的實(shí)際“今天”狀態(tài)。當(dāng)映射目標(biāo)是識(shí)別和記錄現(xiàn)有問題和痛點(diǎn)時(shí),這種方法是理想的。使用當(dāng)前狀態(tài)圖幫助分析研究或圍繞數(shù)據(jù)驗(yàn)證問題調(diào)整團(tuán)隊(duì)。

  •  未來的映射基于用戶類型、體驗(yàn)或未來服務(wù)結(jié)構(gòu)的“理想”狀態(tài)。未來狀態(tài)圖有助于重塑和構(gòu)思用戶或體驗(yàn)在未來的感受。使用未來狀態(tài)圖為您的產(chǎn)品或服務(wù)的理想形式設(shè)置基準(zhǔn)或目標(biāo)。

2. 假設(shè)與研究

此決定取決于您將用于構(gòu)建映射的輸入類型。 

  • 假設(shè)映射基于團(tuán)隊(duì)或組織內(nèi)現(xiàn)有理解的積累。這種方法是合并多個(gè)現(xiàn)有團(tuán)隊(duì)視圖、創(chuàng)建研究計(jì)劃(基于假設(shè)圖中出現(xiàn)的差距)以及邁向更高保真度、基于研究的地圖的第一步的好方法。 

  • 研究制圖基于專門為構(gòu)建地圖而收集的數(shù)據(jù)。當(dāng)有時(shí)間和資源專門用于制定研究計(jì)劃時(shí),這種方法是最好的。雖然這種方法可以創(chuàng)建最好的地圖,但它需要時(shí)間和大量的支持。無論您從哪里開始,您的地圖都應(yīng)該是迭代的,并隨著新發(fā)現(xiàn)不斷更新。 

3. 低保真與高保真

該決定與最終地圖可視化的質(zhì)量有關(guān)。

  • 低保真地圖未經(jīng)打磨,通常以靈活、未經(jīng)修飾的方式使用便簽創(chuàng)建。這些地圖在過程的早期階段是最好的。低保真度意味著人們能夠根據(jù)需要進(jìn)行協(xié)作、修改和更新。使用便利貼(物理貼在墻上或使用 Mural.co 等工具以數(shù)字方式進(jìn)行)或協(xié)作 Excel 表格。

  • 高保真地圖經(jīng)過打磨、數(shù)字化創(chuàng)建,看起來很完美。高保真地圖最適合創(chuàng)建將在許多人之間共享的工件。高保真可以更容易閱讀,但由于產(chǎn)品的“完成”性質(zhì),靈活性較差。這些地圖通常以數(shù)字方式創(chuàng)建,然后分散。

結(jié)論

所有 UX 映射都有兩個(gè)好處。首先,創(chuàng)建地圖的過程會(huì)迫使對(duì)話和一致的心理模型。其次,映射產(chǎn)生的共享工件可在團(tuán)隊(duì)、組織或合作伙伴之間使用,以傳達(dá)對(duì)用戶或服務(wù)的理解。隨著團(tuán)隊(duì)的前進(jìn),這個(gè)工件也可以成為決策的基礎(chǔ)。

在一種映射方法上使用另一種映射方法不會(huì)對(duì)項(xiàng)目造成破壞,理想情況下,可以根據(jù)需要在產(chǎn)品設(shè)計(jì)流程的不同節(jié)點(diǎn)使用所有四項(xiàng)的組合,以深入了解用戶需求。

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

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



文章來源:站酷   作者:ZZiUP

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ì)更有價(jià)值——設(shè)計(jì)流程指南

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

一些典型問題也相應(yīng)顯現(xiàn):上手就干、主觀設(shè)計(jì)、缺少方法、忽視跟進(jìn)等等。

所以我們撰寫了「UI標(biāo)準(zhǔn)設(shè)計(jì)流程」,希望能為UI設(shè)計(jì)師提供對(duì)于設(shè)計(jì)支撐思路的共識(shí),讓設(shè)計(jì)更有價(jià)值:



從接到需求到上線后跟蹤,我們把流程拆分為五個(gè)節(jié)點(diǎn):需求分析-交互設(shè)計(jì)-視覺設(shè)計(jì)-視覺規(guī)范-方案驗(yàn)證。

當(dāng)然,在設(shè)計(jì)流程中我們只表達(dá)不同流程中的行為目的及標(biāo)準(zhǔn),相關(guān)方法論我們會(huì)配套一份「設(shè)計(jì)師成長(zhǎng)指南」,不久之后再與大家分享。


1.需求分析


我們?cè)诮拥揭粋€(gè)設(shè)計(jì)需求后,要做的第一步是進(jìn)行分析并確定設(shè)計(jì)目標(biāo)。

我們需要:了解背景、用戶和競(jìng)品,能準(zhǔn)確理解產(chǎn)品定位和需求目標(biāo),評(píng)估需求的合理性和準(zhǔn)確性,并提供相應(yīng)策略;甚至洞見機(jī)會(huì)點(diǎn),通過設(shè)計(jì)對(duì)業(yè)務(wù)產(chǎn)生正向價(jià)值。



背景分析


目的:背景分析是為了讓我們?cè)趧偨佑|產(chǎn)品的時(shí)候,去洞察表面背后的東西。通過背景分析,能幫助我們快速切入產(chǎn)品,并根據(jù)已有信息去制定準(zhǔn)確并具有說服力的設(shè)計(jì)策略。

行為:我們需要了解:產(chǎn)品的定位及價(jià)值是什么,它的現(xiàn)狀如何,是否有既往的數(shù)據(jù)沉淀或經(jīng)驗(yàn)總結(jié)。



用戶分析


目的:對(duì)UI設(shè)計(jì)師而言,用戶分析是為了讓我們更好地了解產(chǎn)品,并擁有對(duì)整個(gè)產(chǎn)品的宏觀思路。通過用戶分析,能為我們的視覺設(shè)計(jì)提供方向,并為我們做出決策提供實(shí)際落點(diǎn)。

行為:我們通常需要了解:用戶畫像、用戶需求、用戶行為、用戶路徑等。



競(jìng)品分析


目的:競(jìng)品分析能夠讓我們獲得行業(yè)內(nèi)的優(yōu)秀經(jīng)驗(yàn),減少我們的思維盲區(qū),同時(shí)還為我們提供了一份可被量化的標(biāo)準(zhǔn),使我們可以基于競(jìng)品去反推現(xiàn)有產(chǎn)品。

行為:UI設(shè)計(jì)師可以從競(jìng)品定位、主要功能、迭代動(dòng)向、產(chǎn)品結(jié)構(gòu)、頁面布局、交互動(dòng)效、視覺設(shè)計(jì)、優(yōu)劣勢(shì)對(duì)比這幾個(gè)維度去進(jìn)行競(jìng)品分析。



需求評(píng)估


目的:在了解以上的通用信息后,我們要對(duì)需求進(jìn)行評(píng)估,去決定采用哪種方式、制定什么樣的策略。

行為:我們接到的需求,通??梢苑譃槿N:全新產(chǎn)品類、產(chǎn)品改版類、功能新增或優(yōu)化類。

           對(duì)不同類型的需求,我們都可以用5個(gè)問題去評(píng)估:

           1.是否可被證偽?

           2.目標(biāo)是否明確?

           3.投產(chǎn)比如何?

           4.是否有更優(yōu)解法?

           5.是否有可預(yù)見風(fēng)險(xiǎn)?

           基于以上問題,我們可以去協(xié)同交互、產(chǎn)品做相應(yīng)調(diào)整和策略制定,甚至發(fā)現(xiàn)新的機(jī)會(huì)點(diǎn)并進(jìn)行推動(dòng)。



目標(biāo)對(duì)齊


目的:設(shè)計(jì)為目標(biāo)服務(wù),所以我們要在設(shè)計(jì)開始前與需求方對(duì)齊目標(biāo),這也能為設(shè)計(jì)價(jià)值的佐證提供標(biāo)準(zhǔn)。

行為:設(shè)計(jì)目標(biāo)通常有3種,我們可以從中去對(duì)需求目標(biāo)轉(zhuǎn)譯:提升數(shù)據(jù)型、解決問題型、創(chuàng)新項(xiàng)目型。

           針對(duì)不同目標(biāo)我們可以去制定不同的設(shè)計(jì)策略,并對(duì)策略的落地進(jìn)行數(shù)據(jù)監(jiān)測(cè)與分析,進(jìn)行方案校正。



2.交互設(shè)計(jì)


在產(chǎn)品流程中,交互設(shè)計(jì)的作用在于,通過信息架構(gòu)的組織去產(chǎn)出體驗(yàn)流暢的界面原型。

我們需要:充分理解整體流程與交互原型,基于設(shè)計(jì)原則去發(fā)現(xiàn)可優(yōu)化的部分;同時(shí)能平衡產(chǎn)品、設(shè)計(jì)與開發(fā)的效益最大化,并驅(qū)動(dòng)產(chǎn)品的體驗(yàn)提升。




設(shè)計(jì)原則


目的:設(shè)計(jì)原則能為我們提供一個(gè)行之有效的設(shè)計(jì)向?qū)Щ蛱崾?。熟知各類設(shè)計(jì)原則,能使我們?cè)谠O(shè)計(jì)支撐時(shí),擁有更豐厚的專業(yè)度和更敏銳的洞察力。

行為:我們需要去了解市面常見的Guildline如iOS、Material、UWP等,以及一些常用原則如菲茲定律、格式塔理論等等。



流程梳理


目的:流程的再梳理,可以幫助我們?cè)谝曈X設(shè)計(jì)前,快速地理解和診斷流程邏輯。

行為:在流程再梳理的過程中,我們需要注意以下4個(gè)問題:

           1.功能是否完整?

           2.鏈路是否流暢?

           3.步驟是否冗余?

           4.是否易于理解?

           基于以上問題,我們可以用自身的專業(yè)儲(chǔ)備去推動(dòng)流程的優(yōu)化。



原型優(yōu)化


目的:交互原型是需求內(nèi)容的外在表現(xiàn),通過原型優(yōu)化,可以最大程度地避免視覺評(píng)審后的設(shè)計(jì)返工。

行為:在對(duì)交互原型優(yōu)化的過程中,我們要重點(diǎn)注意以下4個(gè)問題:

           1.架構(gòu)是否符合目標(biāo)

           2.層級(jí)是否足夠精簡(jiǎn)

           3.信息是否傳達(dá)準(zhǔn)確

           4.狀態(tài)是否有所缺失

       在視覺設(shè)計(jì)時(shí),我們基于以上四點(diǎn)可以去同步優(yōu)化原型,并根據(jù)經(jīng)驗(yàn)去尋求體驗(yàn)和成本的最佳平衡。



3.視覺設(shè)計(jì)


視覺設(shè)計(jì)是產(chǎn)品與用戶直接連接的媒介,優(yōu)質(zhì)而恰當(dāng)?shù)囊曈X設(shè)計(jì),可以極大地提升產(chǎn)品吸引力。

我們需要:基于分析確定視覺方向、定義設(shè)計(jì)語言,輸出準(zhǔn)確且高質(zhì)量的視覺頁面。




設(shè)計(jì)情緒板


目的:設(shè)計(jì)情緒板可以為設(shè)計(jì)語言的構(gòu)建提供可視化參考,也有助于我們前期快速與各方達(dá)成共識(shí)。

行為:我們通?;诜治?,去確定設(shè)計(jì)關(guān)鍵詞,并基于關(guān)鍵詞去衍生映射物、建立圖形情緒板,最終分析和確定設(shè)計(jì)方向。



設(shè)計(jì)語言


目的:設(shè)計(jì)語言是情緒板的具象表達(dá),它將構(gòu)建起用戶對(duì)產(chǎn)品的視覺感知。

行為:在明確設(shè)計(jì)方向后,我們就要基于情緒版去定義設(shè)計(jì)語言,主要包括主視覺、色彩、字體、圖標(biāo)、圖形、動(dòng)效等。



典型頁面


目的:典型頁面是設(shè)計(jì)語言在場(chǎng)景中直觀體現(xiàn),這有助于我們制定設(shè)計(jì)規(guī)范,并為其他頁面的設(shè)計(jì)提供參考。

行為:我們通常需要設(shè)計(jì)首頁、頻道頁或其他具有示例作用的典型頁面,在設(shè)計(jì)的過程中我們還需要同步去規(guī)范間距、卡片、視覺變量、圖形應(yīng)用等,以此為視覺規(guī)范夯實(shí)基礎(chǔ)。



4.設(shè)計(jì)系統(tǒng)


在設(shè)計(jì)典型頁面的同時(shí),其背后其實(shí)已經(jīng)對(duì)應(yīng)了一套設(shè)計(jì)規(guī)范和組件,而我們基于此去整理并沉淀出設(shè)計(jì)系統(tǒng),能極大地提升統(tǒng)一性和迭代效率。

我們需要:制定完整、清晰的基礎(chǔ)規(guī)范,沉淀圖標(biāo)庫、組件庫等,并持續(xù)優(yōu)化和更新,形成可持續(xù)沿用的產(chǎn)品設(shè)計(jì)系統(tǒng)。




基礎(chǔ)規(guī)范


目的:基礎(chǔ)規(guī)范是設(shè)計(jì)語言的沉淀,也是視覺變量的基本粒子。它可以保證頁面的基本統(tǒng)一,同時(shí)我們可以基于不同業(yè)務(wù)快速地拓展其他主題。

行為:在我司,一份基礎(chǔ)規(guī)范的構(gòu)成包括:色彩、字體、間距、布局、斷點(diǎn)、層級(jí)、圓角、透明度、陰影。



圖標(biāo)庫


目的:圖標(biāo)規(guī)范可以幫助其他成員快速、準(zhǔn)確地進(jìn)行圖標(biāo)拓展,而沉淀的圖標(biāo)庫也可以極大地提升產(chǎn)出效率。

行為:基于具體需要,我們可以設(shè)定多套圖標(biāo)風(fēng)格,規(guī)范其柵格、筆畫、圓角等,并將已有的圖標(biāo)資產(chǎn)進(jìn)行沉淀。同時(shí)我們也會(huì)去規(guī)范一些常見圖形并沉淀,如空態(tài)插畫、懸浮入口、徽章、商品等。



組件庫


目的:組件庫是對(duì)常用控件進(jìn)行設(shè)計(jì)規(guī)范、開發(fā)、封裝的可被復(fù)用的集合,組件分而治之,可被自由組合,能保證設(shè)計(jì)品質(zhì)、統(tǒng)一用戶體驗(yàn)、提升產(chǎn)研效率。

行為:在我司,一套組件庫通常包括:通用、布局、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋、其它。除通用原子組件外,我們也會(huì)對(duì)常用模塊進(jìn)行梳理,沉淀業(yè)務(wù)組件庫。



5.落地跟蹤


在設(shè)計(jì)完成之后,我們需要對(duì)設(shè)計(jì)方案進(jìn)行評(píng)審、驗(yàn)收及數(shù)據(jù)跟蹤,以保證設(shè)計(jì)方案的落地并跟進(jìn)調(diào)整。

我們需要:運(yùn)用合理策略以保證設(shè)計(jì)方案的高質(zhì)量落地,對(duì)方案上線后的用戶反饋進(jìn)行有效跟進(jìn),運(yùn)用多種方式驗(yàn)證目標(biāo),迭代產(chǎn)品。




設(shè)計(jì)評(píng)審


目的:設(shè)計(jì)評(píng)審?fù)ǔ0私换ヅc視覺,其目的在于審查設(shè)計(jì)方案中的可用性問題。

行為:在我司,視覺評(píng)審即終評(píng),我們需要在視覺稿中標(biāo)注出所有交互邏輯,并對(duì)潛在問題有預(yù)判,能與各方確認(rèn)目標(biāo)、分桶與數(shù)據(jù)埋點(diǎn);同時(shí)我們要對(duì)開發(fā)實(shí)現(xiàn)有預(yù)判,能與研發(fā)確認(rèn)實(shí)現(xiàn)細(xì)節(jié)。



設(shè)計(jì)驗(yàn)收


目的:設(shè)計(jì)驗(yàn)收是為了確保需求滿足、體驗(yàn)流暢,并且設(shè)計(jì)細(xì)節(jié)能高質(zhì)量落地。

行為:視覺設(shè)計(jì)師主要驗(yàn)收視覺細(xì)節(jié)的還原度,并且要在一定程度上對(duì)開發(fā)的適配、樣式解法有預(yù)知,減少二次驗(yàn)收。同時(shí)需要保證驗(yàn)收有沉淀,利于后續(xù)跟進(jìn)。



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


目的:數(shù)據(jù)驗(yàn)證除了分析分桶之外,也可以分析產(chǎn)品上線后的一些問題、并在迭代中修改。同時(shí)我們也可以總結(jié)設(shè)計(jì)經(jīng)驗(yàn)、提升未來設(shè)計(jì)的準(zhǔn)確率。

行為:我們通?;谠O(shè)計(jì)策略,去對(duì)數(shù)據(jù)進(jìn)行篩選與分析,以此衡量設(shè)計(jì)對(duì)于目標(biāo)達(dá)成的增益度。對(duì)于有問題的,能反思并且修改;對(duì)于結(jié)果好的,能總結(jié)并且沉淀。



設(shè)計(jì)復(fù)盤


目的:設(shè)計(jì)復(fù)盤以結(jié)果為導(dǎo)向,我們可以通過復(fù)盤對(duì)設(shè)計(jì)策略的價(jià)值進(jìn)行總結(jié)驗(yàn)證,并去發(fā)現(xiàn)、優(yōu)化流程中的不足之處。

行為:我們需要陳述設(shè)計(jì)目標(biāo)和策略,對(duì)設(shè)計(jì)價(jià)值進(jìn)行驗(yàn)證,并能總結(jié)過程中的亮點(diǎn)與不足,制定后續(xù)計(jì)劃、沉淀相關(guān)經(jīng)驗(yàn)。


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

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


文章來源:站酷   作者:酷家樂UED

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)品設(shè)計(jì)中的容錯(cuò)性思考》

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

使用互聯(lián)網(wǎng)產(chǎn)品過程中,會(huì)有很多因素造成操作錯(cuò)誤或失誤,導(dǎo)致無法順利完成任務(wù)。因此產(chǎn)品的容錯(cuò)性設(shè)計(jì)是交互設(shè)計(jì)中的重要內(nèi)容。


用戶在實(shí)際使用互聯(lián)網(wǎng)產(chǎn)品的過程中,會(huì)有很多因素造成操作錯(cuò)誤或者失誤,而導(dǎo)致無法順利完成任務(wù),或者完成任務(wù)的效率很低。產(chǎn)品自身所具備的容錯(cuò)能力對(duì)于各種使用場(chǎng)景的有效覆蓋,可以提升產(chǎn)品糾錯(cuò)效率、降低用戶操作出錯(cuò)概率,因此產(chǎn)品的容錯(cuò)性設(shè)計(jì)是交互設(shè)計(jì)中的重要內(nèi)容,也是提升用戶體驗(yàn)不可忽視的一個(gè)環(huán)節(jié)。



1、容錯(cuò)性是什么


容錯(cuò)性概念源于計(jì)算機(jī)領(lǐng)域,容錯(cuò)性是指計(jì)算機(jī)系統(tǒng)在發(fā)生故障的情況下,依然能夠保證系統(tǒng)正常運(yùn)行。計(jì)算機(jī)這種保證系統(tǒng)正常運(yùn)行的能力也被稱為容錯(cuò)能力。

本篇內(nèi)容我們討論的是容錯(cuò)性在互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域的內(nèi)涵和意義。延伸到互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)領(lǐng)域,容錯(cuò)性的范疇更為寬泛,涉及產(chǎn)品對(duì)錯(cuò)誤操作承載能力的多個(gè)方面,包括:如何降低用戶操作的出錯(cuò)率,如何及時(shí)提供糾錯(cuò)幫助,以及如何給用戶提供解決方案等內(nèi)容。


2、為什么需要容錯(cuò)性設(shè)計(jì)

「 即便你的產(chǎn)品90%的時(shí)間都運(yùn)行良好,但是如果在用戶需要幫助時(shí)置之不理,他們是不會(huì)忘記這一點(diǎn)的?!禛etting Real》」

一個(gè)產(chǎn)品設(shè)計(jì)的無論多么簡(jiǎn)單,用戶都難免在使用過程中因?yàn)楦鞣N原因而犯錯(cuò)。互聯(lián)網(wǎng)產(chǎn)品面向的用戶群體是復(fù)雜多樣化,教育背景的不同,行為習(xí)慣的差異,復(fù)雜的使用場(chǎng)景,都會(huì)使得用戶的真實(shí)操作相比產(chǎn)品設(shè)計(jì)之初的預(yù)期有一定出入。此外,一些產(chǎn)品本身存在的因素,例如產(chǎn)品路徑復(fù)雜,邏輯不暢等,也有可能造成用戶無法順利完成任務(wù),亦或是完成任務(wù)的效率低,出錯(cuò)率高。產(chǎn)品在遇到錯(cuò)誤如不能夠及時(shí)糾錯(cuò)幫用戶挽回?fù)p失,會(huì)給用戶帶來不好的用戶體驗(yàn),也是產(chǎn)品的一種設(shè)計(jì)缺陷。因此設(shè)計(jì)師應(yīng)具有良好的容錯(cuò)性設(shè)計(jì)思維,盡量避免用戶錯(cuò)誤操作的出現(xiàn),當(dāng)用戶出現(xiàn)錯(cuò)誤操作時(shí),幫助用戶識(shí)別、診斷,及時(shí)反饋問題所在,并提出有效的解決方案,幫助用戶快速從錯(cuò)誤中恢復(fù)。最終達(dá)到使產(chǎn)品更可用、更易用的目的,給用戶帶來更優(yōu)的用戶體驗(yàn),使用戶與產(chǎn)品的交流更加順暢。


3、容錯(cuò)性的設(shè)計(jì)方法

互聯(lián)網(wǎng)產(chǎn)品的容錯(cuò)設(shè)計(jì)可從用戶使用產(chǎn)品的三個(gè)階段來考慮,即操作前、操作中、操作后。可大致歸納為以下幾方面內(nèi)容:首先在用戶操作前給予正確有效的引導(dǎo);其次在重要的操作步驟給予用戶及時(shí)有效的提示;當(dāng)用戶發(fā)生操作錯(cuò)誤或失誤時(shí)及時(shí)為用戶糾錯(cuò)并提供有效的解決方案;最后幫助用戶在錯(cuò)誤發(fā)生后迅速回到正確狀態(tài)。


3.1給予用戶正確有效的引導(dǎo)

在用戶開始任務(wù)操作前給出用戶正確有效的提示,可減少錯(cuò)誤操作的發(fā)生。需要注意的是,引導(dǎo)應(yīng)盡量醒目且簡(jiǎn)單易理解,確保能引起用戶注意,并且在用戶注意到后快速獲取信息,到有效的防錯(cuò)幫助。

產(chǎn)品常見的引導(dǎo)主要針對(duì)兩種情況。第一種是針對(duì)于新手用戶的功能介紹,不同于曾使用過產(chǎn)品的用戶或者高級(jí)用戶,新用戶首次使用產(chǎn)品的過程其實(shí)是一個(gè)學(xué)習(xí)的過程,此時(shí)需要讓用戶快速了解產(chǎn)品核心功能及主要的操作,幫助他們更快地上手。

例如下圖導(dǎo)航APP新版本的新手引導(dǎo)【如圖1】,在用戶首次啟動(dòng)產(chǎn)品時(shí),產(chǎn)品用趣味性的圖文形式給用戶展示了打車、公交乘車、實(shí)時(shí)公交路線等功能的信息介紹,能夠讓新用戶快速熟悉核心功能,并在正式使用產(chǎn)品的過程中提升效率,降低出錯(cuò)率。


undefined

圖1-導(dǎo)航APP新手引導(dǎo)



第二種情況是針對(duì)產(chǎn)品上線的新功能或者較大的功能變動(dòng)而設(shè)計(jì)的初次引導(dǎo),產(chǎn)品的功能改動(dòng)可能會(huì)是用戶產(chǎn)生不同程度的陌生感,適當(dāng)?shù)奶崾究蓭椭脩艨焖偈煜ば鹿δ茳c(diǎn)或頁面信息的調(diào)整。初次引導(dǎo)常見的方式有很多種,包括:遮罩式引導(dǎo)、彈窗式引導(dǎo)、氣泡、浮層式引導(dǎo)等等。

例如版本升級(jí)后的音樂APP【如圖2】,首頁使用情感化圖文設(shè)計(jì)加遮罩式的引導(dǎo),可以有效將注意力集中到特定功能上,用戶進(jìn)入頁面第一時(shí)間就注意到,確保了信息傳達(dá)的有效性。

圖2-新版首頁的遮罩引導(dǎo)


以上列舉的內(nèi)容屬于狹義層面的引導(dǎo),用戶尚處在被動(dòng)接受引導(dǎo)的學(xué)習(xí)階段,在此階段引導(dǎo)的目的是提醒和防錯(cuò)。從廣義的層面來講,我們可將對(duì)用戶的引導(dǎo)理解為”消減信息的不對(duì)稱性“,當(dāng)用戶面對(duì)可影響其決策的因素時(shí),給予用戶關(guān)鍵性的信息提示和說明,可以促使用戶做出正確的決策。

針對(duì)需要加工時(shí)間的特殊品類,如烘焙蛋糕,京東到家在用戶決策的關(guān)鍵頁面和步驟展示時(shí)效提醒【如圖3】,避免用戶在完成訂單信息填寫或結(jié)算后才發(fā)現(xiàn)商品的配送時(shí)間超出用戶的期望,會(huì)給用戶帶來極為不好的購物體驗(yàn)。


圖3-京東到家頁面中的時(shí)效提醒



3.2 給予用戶及時(shí)有效的提示

當(dāng)用戶進(jìn)行一些如修改、刪除、覆蓋等不可逆操作時(shí),系統(tǒng)需要在用戶做出這類操作指令后告知其產(chǎn)生的后果,讓用戶自主決策是否選擇繼續(xù)執(zhí)行。在此階段的提示需要注意從以下兩個(gè)角度考慮:一是提示的方式,二是提示的時(shí)機(jī)。


3.2.1提示的方式

在用戶完成任務(wù)的操作路徑中,大部分產(chǎn)品首先會(huì)選擇以彈框的形式對(duì)用戶進(jìn)行信息提示。彈框可以分為模態(tài)彈框和非模態(tài)彈框兩種大的類型【如圖4】,主要區(qū)別在于是否強(qiáng)制用戶進(jìn)行交互操作。如何選擇合適的彈框形式對(duì)用戶進(jìn)行提示,要依據(jù)提示信息的優(yōu)先級(jí)和視覺權(quán)重的大小,同時(shí)要清楚不同類型的彈框適合的場(chǎng)景。


圖4-彈框分類


模態(tài)彈窗是較重的提示方式,在用戶進(jìn)行重要且有風(fēng)險(xiǎn)的操作時(shí)可優(yōu)先考慮使用。其優(yōu)點(diǎn)是可以快速獲取用戶的視覺焦點(diǎn),缺點(diǎn)是會(huì)打斷用戶當(dāng)前的操作流程,用戶需要進(jìn)行如單擊“確定”、“取消”、“關(guān)閉”按鈕等操作指令將該對(duì)話框關(guān)閉后才可繼續(xù)操作。

而非模態(tài)彈框?qū)儆谳p量級(jí)的提示方式,其優(yōu)點(diǎn)是不強(qiáng)制用戶進(jìn)行交互操作,或者用戶依然可以在頁面進(jìn)行其他操作。彈框出現(xiàn)一段時(shí)間后會(huì)自動(dòng)消失,所以但不利于承載過多文字信息。非模態(tài)彈框?qū)τ脩粼斐傻母蓴_較小,但也因此容易被用戶忽視。


3.2.2 提示的時(shí)機(jī)

給用戶的信息提示還有一點(diǎn)不可忽視的是反饋時(shí)機(jī),應(yīng)確保用戶在關(guān)鍵的操作步驟得到及時(shí)的反饋,因?yàn)闇蟮姆答伩赡軙?huì)導(dǎo)致用戶因?yàn)槟骋粋€(gè)環(huán)節(jié)的錯(cuò)誤操作不得不重復(fù)操作一遍之前的流程,或者要修改關(guān)的一系列信息。

【如圖5】中的登錄頁面,用戶登錄需要依次輸入手機(jī)號(hào)、密碼、圖片驗(yàn)證碼,但如果用戶輸錯(cuò)了密碼并不能馬上得到反饋,依然可以繼續(xù)填寫驗(yàn)證碼,只有在全部信息填寫完之后點(diǎn)擊登錄,系統(tǒng)才會(huì)校驗(yàn)密碼,并提示用戶密碼錯(cuò)誤重新確認(rèn),用戶需要再次輸入密碼以及識(shí)別并輸入一次驗(yàn)證碼。但如果系統(tǒng)驗(yàn)證密碼可以提前到輸入圖片驗(yàn)證碼的步驟之前,在用戶在得到密碼填寫錯(cuò)誤提示后則可以停止操作后面的步驟,馬上修改密碼。


圖5-登錄頁面中的提示滯后



3.3 為用戶提供糾錯(cuò)幫助以及解決方案

一旦用戶出現(xiàn)錯(cuò)誤或失誤操作的情況,系統(tǒng)需要為用戶及時(shí)提供糾錯(cuò)幫助及有效的解決方案,以提高用戶操作的成功率。 
關(guān)于糾錯(cuò)文案的表達(dá)應(yīng)注意盡量簡(jiǎn)潔清晰、精煉準(zhǔn)確,避免使用難懂的術(shù)語,不要在出錯(cuò)信息中使用威脅或者責(zé)備的語氣。應(yīng)主動(dòng)識(shí)別用戶的情感狀況,語氣友好,讓用戶感受到“情感支持”,盡量為用戶緩解因操作失誤產(chǎn)生的挫敗、焦慮等負(fù)面情緒。 
此外,糾錯(cuò)信息內(nèi)容不可僅描述場(chǎng)景,還需要向用戶反饋出錯(cuò)原因,并且有明確的指向性,為用戶指出錯(cuò)誤出在什么地方。例如在填寫部分內(nèi)容較多的表單時(shí)【如圖6】,當(dāng)證件號(hào)填寫出錯(cuò)時(shí),系統(tǒng)及時(shí)為用戶糾錯(cuò)并用一條紅色的下劃線明確指出了信息填寫錯(cuò)誤的位置,用戶可以立即定位并修改錯(cuò)誤信息。 


同時(shí),盡量為用戶提供相應(yīng)的解決方案,這樣可以提升糾錯(cuò)信息有效性。BOSS直聘會(huì)因?yàn)槭謾C(jī)儲(chǔ)存空間不足給用戶報(bào)錯(cuò),并且會(huì)告知用戶如何去管理儲(chǔ)存空間,以解決此問題【如圖7】。


圖6-多行表單報(bào)錯(cuò)頁面



圖7-存儲(chǔ)空間不足報(bào)錯(cuò)提醒 


在產(chǎn)品設(shè)計(jì)中,為降低操作的出錯(cuò)率,限制也是一種方式。在可能造成錯(cuò)誤操作的入口適當(dāng)設(shè)置操作障礙或者禁止操作,增加不可逆操作的難度,可以有效規(guī)避錯(cuò)誤操作發(fā)生風(fēng)險(xiǎn)、減少誤操作概率。例如常見的頁面信息置灰、按鈕置灰的設(shè)計(jì),可以有效避免用戶的誤操作。

此外通過讓控件、動(dòng)作、選項(xiàng)等變得可見,盡可能減少用戶記憶負(fù)擔(dān),把需要記憶的內(nèi)容作為輔助信息提供給用戶,或幫助用戶自動(dòng)完成信息填寫也可以幫助用戶快捷高效地完成既定任務(wù),降低出錯(cuò)率。例如【如圖8】在信息填寫的步驟,可在用戶已復(fù)制的內(nèi)容和上傳的圖片中自動(dòng)識(shí)別姓名、電話、地址等內(nèi)容,并在用戶確認(rèn)后自動(dòng)幫用戶填寫對(duì)應(yīng)信息,為用戶大大節(jié)省時(shí)間和記憶成本,快捷高效地完成既定任務(wù),降低出錯(cuò)率。


圖8-系統(tǒng)自動(dòng)識(shí)別用戶復(fù)制文本中的姓名、電話、地址 


3.4 幫助用戶在錯(cuò)誤發(fā)生后迅速回到正確狀態(tài)

在用戶執(zhí)行操作后,應(yīng)盡可能的為用戶保留已操作的信息,以便在發(fā)生錯(cuò)誤或失誤后可撤銷之前的操作。針對(duì)一些流程較為復(fù)雜的操作任務(wù),記錄用戶在每一步驟的操作信息,讓用戶可以從出錯(cuò)的步驟上及時(shí)恢復(fù)到正確的流程上,或恢復(fù)到距離錯(cuò)誤操作最近的步驟,可有效的幫用戶挽回失誤。例如很多圖片編輯的APP都支持用戶撤銷當(dāng)前的操作,在用戶對(duì)照片進(jìn)行多編輯后頁面上會(huì)有回到上一步和下一步操作的按鈕,可讓用戶有機(jī)會(huì)恢復(fù)到上一步操作結(jié)果上。


圖9-圖片編輯頁面頂部切換上一步和下一步的操作按鈕


總結(jié)

以上是關(guān)于互聯(lián)網(wǎng)產(chǎn)品中容錯(cuò)設(shè)計(jì)的概念、重要性以及設(shè)計(jì)方法的一些闡述和思考。在產(chǎn)品設(shè)計(jì)的實(shí)際應(yīng)用的中,可以模擬使用場(chǎng)景,對(duì)目標(biāo)用戶使用產(chǎn)品的真實(shí)操作進(jìn)行行為觀察,分析對(duì)比產(chǎn)品設(shè)計(jì)的操作路徑與用戶真實(shí)操作的差別,發(fā)現(xiàn)并收集用戶可能發(fā)生錯(cuò)誤或失誤操作的關(guān)鍵步驟,驗(yàn)證產(chǎn)品的容錯(cuò)能力是否能達(dá)到有效覆蓋。同時(shí),也要通過產(chǎn)品數(shù)據(jù)的對(duì)比分析得出用戶操作錯(cuò)誤及失誤的真實(shí)原因,指導(dǎo)并提升產(chǎn)品容錯(cuò)能力的設(shè)計(jì)優(yōu)化,進(jìn)而不斷提升產(chǎn)品的可用性和易用性。


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

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


文章來源:站酷   作者:DXC設(shè)計(jì)體驗(yàn)中心

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)





互聯(lián)網(wǎng)B端設(shè)計(jì)不可缺失的一項(xiàng)技能——視覺校驗(yàn)

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


今天這篇文章,傳授我在工作中關(guān)于校驗(yàn)的心得~





01.  在工作中遇到的狀況

不管是在大公司工作、還是小公司工作,設(shè)計(jì)師常常會(huì)遇到這樣的問題,在新產(chǎn)品發(fā)布之前,都會(huì)做一遍線上的ui視覺校驗(yàn),在這個(gè)過程中,前端開發(fā)工程師所寫的界面總會(huì)發(fā)生圖片變形,文字字號(hào)不對(duì),元素與元素之間不對(duì)齊的事情發(fā)生。


設(shè)計(jì)師給前端開發(fā)工程師標(biāo)記了已經(jīng)實(shí)現(xiàn)頁面中錯(cuò)誤的地方,但是多數(shù)前端開發(fā)工程師一聽那么多頭都大了,在緊張的上線日期限制下更有甚者不予理睬直接上線,用戶吐槽設(shè)計(jì)不嚴(yán)謹(jǐn),導(dǎo)致設(shè)計(jì)背鍋。

為什么老板會(huì)覺得不好呢?其實(shí)是產(chǎn)品在用戶體驗(yàn)的本能層次出現(xiàn)的不好的體驗(yàn)。


02.  好產(chǎn)品具備的特征

全球的認(rèn)知心理學(xué)家(美)諾曼在《情感化設(shè)計(jì)》這本書中講產(chǎn)品本能水平的設(shè)計(jì)——本能層;行為水平的設(shè)計(jì)——行為層;反思水平的設(shè)計(jì)——反思層。


如果把產(chǎn)品做的做為產(chǎn)品一個(gè)目標(biāo)的話,我們可以利用產(chǎn)品五要素把產(chǎn)品劃分5個(gè)層次,再用諾曼教授提出的感情感化設(shè)計(jì)的3個(gè)層次聯(lián)系起來,并把這些情感分為5個(gè)緯度進(jìn)行考察就可以得到下面這張知識(shí)網(wǎng)絡(luò)圖。

從上面這張圖我們可以看出用戶評(píng)判一個(gè)產(chǎn)品好壞的標(biāo)準(zhǔn)還是來自于產(chǎn)品的表現(xiàn)層、框架層、結(jié)構(gòu)層中的直觀體驗(yàn)也就本能層次和行為層次的感受,如果產(chǎn)品的吸引度、完成度、滿意度、忠誠度、推薦度的數(shù)據(jù)很高也就證明產(chǎn)品很好,如果數(shù)據(jù)表現(xiàn)不好那可以判斷產(chǎn)品還是有需要提升的地方。


回到第一張圖片,老板覺得有問題的原因就在于產(chǎn)品在本能層次的不合格,那重點(diǎn)來了有什么設(shè)計(jì)方法可以避免本能層出現(xiàn)問題的情況嗎?我的答案是可以使用設(shè)計(jì)走查這個(gè)方法。


03.  設(shè)計(jì)走查的意義

一名專業(yè)的B端設(shè)計(jì)師,并不是說你把設(shè)計(jì)稿做的很完美,把標(biāo)注和切圖完整的交給開發(fā)小哥哥之后就完事了,其實(shí)在這個(gè)階段設(shè)計(jì)只是完成設(shè)計(jì)工作中產(chǎn)出效果圖的工作,并沒有進(jìn)行最后驗(yàn)收的環(huán)節(jié),如果開發(fā)還原出來的產(chǎn)品跟設(shè)計(jì)稿差距較大的話,設(shè)計(jì)其實(shí)也是要負(fù)很大責(zé)任的。


就好比工廠的流水線中一臺(tái)電腦的生產(chǎn),把電腦從工廠搬到運(yùn)輸車上也算是電腦生產(chǎn)完畢,但是必須要送到客戶手里,客戶簽字確認(rèn),工廠才能算是電腦賣出去了,由此可見設(shè)計(jì)走查是保證用戶有高質(zhì)量體驗(yàn)的不可缺少的一個(gè)環(huán)節(jié)。


我理解設(shè)計(jì)走查的意義在于3點(diǎn):

1、確保產(chǎn)品的設(shè)計(jì)細(xì)節(jié)的還原度合格,從而保證產(chǎn)品的視覺效果和交互體驗(yàn)?zāi)軡M足用戶需求。

2、是設(shè)計(jì)師衡量設(shè)計(jì)師是否合格設(shè)計(jì)師的一項(xiàng)重要指標(biāo);

3、通過細(xì)致入微的專業(yè)設(shè)計(jì)素質(zhì)贏得公司團(tuán)隊(duì)內(nèi)部設(shè)計(jì)話語權(quán)的提升。


既然設(shè)計(jì)走查這么重要為什么大家還會(huì)忽視呢?其實(shí)大家對(duì)設(shè)計(jì)走查的看法有一個(gè)誤區(qū),如果你想成為一名專業(yè)的B端設(shè)計(jì)師,一定要改變以上的錯(cuò)誤觀念,擺正一個(gè)正確的設(shè)計(jì)觀念。


設(shè)計(jì)師在公司代表著視覺上的最高水準(zhǔn),設(shè)計(jì)稿則是設(shè)計(jì)師專業(yè)能力的體現(xiàn),如果一個(gè)設(shè)計(jì)師的能力是100分,設(shè)計(jì)稿的分值90分,開發(fā)實(shí)現(xiàn)后的產(chǎn)品分值為50分,在沒有進(jìn)行設(shè)計(jì)校驗(yàn)的情況下,這時(shí)候?qū)a(chǎn)品發(fā)布出去,用戶或者老板只知道該公司的產(chǎn)品設(shè)計(jì)只有50分,而不會(huì)知道背后設(shè)計(jì)師最高的水準(zhǔn)是100分。


慢慢的設(shè)計(jì)師就會(huì)在開發(fā)團(tuán)隊(duì)中做設(shè)計(jì)變得很被動(dòng),越被動(dòng)就會(huì)越?jīng)]有話語權(quán),所以對(duì)一名專業(yè)的B端設(shè)計(jì)師來說,除了擁有很強(qiáng)大的效果圖設(shè)計(jì)能力之外,還需要有保證效果圖落地能力。




01.  設(shè)計(jì)走查的種類

設(shè)計(jì)走查是一種設(shè)計(jì)層面找尋問題的方法,多數(shù)應(yīng)用在找尋產(chǎn)品問題或者是對(duì)項(xiàng)目開發(fā)過程中的測(cè)試環(huán)節(jié)。具體的方式我歸類為3種:


1)體驗(yàn)設(shè)計(jì)走查:是指人機(jī)交互之間的細(xì)節(jié)體驗(yàn)、比如非力度測(cè)試、滿意度測(cè)試??捎眯詼y(cè)試的調(diào)查這些方法都是體驗(yàn)走查的一部分。

2)交互設(shè)計(jì)走查:是指針對(duì)產(chǎn)品場(chǎng)景與場(chǎng)景之間的動(dòng)態(tài)交互效果進(jìn)行走查。

3)視覺設(shè)計(jì)走查:是指前端開發(fā)出來的靜態(tài)頁跟設(shè)計(jì)師出得效果進(jìn)行視覺細(xì)節(jié)的校對(duì)和檢查,確保開發(fā)出來的視覺和設(shè)計(jì)圖保持一致。


02.  制作走查表的三種方法

設(shè)很多人會(huì)納悶了,我們公司是沒有這種走差表的那怎么進(jìn)行這三種設(shè)計(jì)走查呢?這里告訴大家我的一個(gè)工作辦法,總共分為3個(gè)階段“尋找·借鑒”——“思考·定制”——“優(yōu)化·完善”。


a.尋找·借鑒

當(dāng)大家有一個(gè)知識(shí)的概念如果想更深入了了解這個(gè)概念就需要在網(wǎng)上找一些關(guān)于這個(gè)概念的信息,這個(gè)過程就是尋找。如果大家沒有做過類似這種設(shè)計(jì)走查的經(jīng)驗(yàn),那第一時(shí)間也是去尋找,尋找設(shè)計(jì)走差的概念甚至是做好了的走查表用過工作中,那有人會(huì)有疑問那不是抄襲嗎?我的回答“是的”,但是大家要想清楚一個(gè)問題,在工作中用最高效簡(jiǎn)單的辦法是完成工作內(nèi)容是最重要的。


可能還會(huì)有人問,別的公司和我們公司做的行業(yè)不同,那別人公司的走差表我們公司能用嗎?我的回答是可以復(fù)用70%左右的,那剩下的30%就需要進(jìn)入下一個(gè)步驟“思考·定制”階段了。


b.思考·定制

當(dāng)我們完成第一步之后,就需要做自己所處的行業(yè)或者產(chǎn)品有一個(gè)認(rèn)知,思考我們的用戶類型是什么,他們的使用場(chǎng)景是什么,他們最需要解決的需求是什么等等問題,然后在根據(jù)這些問題定制一系列體驗(yàn)、交互、設(shè)計(jì)的問題,那就成為了自己產(chǎn)品定制的一份設(shè)計(jì)走查表了。


c.優(yōu)化·完善

任何工作都需要持續(xù)迭代,為了變得更好的適合當(dāng)前的工作。比如在第二階段定制的問題有些微交互動(dòng)效果的問題前年是用戶比較在意的,現(xiàn)在很多產(chǎn)品都有了微交互動(dòng)效了現(xiàn)在還問意義就沒有那么大了,我們的設(shè)計(jì)走查表也要根據(jù)互聯(lián)網(wǎng)的大環(huán)境不斷的進(jìn)行優(yōu)化和完善。



03.  產(chǎn)品表現(xiàn)層——視覺校驗(yàn)

設(shè)計(jì)走查和設(shè)計(jì)校驗(yàn)并沒有大的區(qū)分,但是我理解設(shè)計(jì)走查是一個(gè)比較新型的詞,設(shè)計(jì)走查的范圍要比設(shè)計(jì)校驗(yàn)的范圍大一些。


有些公司會(huì)把設(shè)計(jì)走查應(yīng)用與改版之前當(dāng)作找尋產(chǎn)品問題的一種方法,也有一些公司會(huì)把設(shè)計(jì)走查應(yīng)用于項(xiàng)目做完開發(fā)在測(cè)試環(huán)節(jié)做測(cè)試的一種方法。比如在啟動(dòng)產(chǎn)品改版前可以通過“視覺設(shè)計(jì)基礎(chǔ)自查表”來收集產(chǎn)品目前的視覺體驗(yàn)問題;

當(dāng)項(xiàng)目處于即將上線在測(cè)試階段時(shí)候可以使用“視覺設(shè)計(jì)基礎(chǔ)自查表”來審查產(chǎn)品視覺實(shí)現(xiàn)層面是否合格,現(xiàn)在很多公司都用更簡(jiǎn)單的“設(shè)計(jì)校驗(yàn)問題記錄”表格來把視覺問題記錄。


04.  視覺校驗(yàn)需要審查那些緯度

設(shè)計(jì)校驗(yàn)驗(yàn)收表可以簡(jiǎn)單的理解為是用于審查產(chǎn)品表現(xiàn)層的“形狀、色彩、字體、構(gòu)成、質(zhì)感、動(dòng)效這六點(diǎn)問題的記錄的表格。其實(shí)這六點(diǎn)也是諾曼教授提出的感情感化設(shè)計(jì)中本能層次和行為層次審查的六點(diǎn)。




再講如何做之前,大家還是要先了解一下驗(yàn)收流程中的步驟。


01.  視覺校驗(yàn)做什么

這里描述兩點(diǎn)一個(gè)是開發(fā)階段、測(cè)試階段的流程。

在公司的項(xiàng)目開發(fā)階段:是設(shè)計(jì)師設(shè)計(jì)完效果圖,進(jìn)行標(biāo)注(現(xiàn)在大家都是使用第三方標(biāo)注軟件比如藍(lán)湖、摹刻、Sketch Measure 等),在交付開發(fā)。


在項(xiàng)目測(cè)試階段:一般都是產(chǎn)品經(jīng)理發(fā)起一個(gè)項(xiàng)目進(jìn)入測(cè)試階段的通知把設(shè)計(jì)師、開發(fā)、測(cè)試、和產(chǎn)品經(jīng)理都設(shè)置為參與者,之后由測(cè)試人員進(jìn)行產(chǎn)品功能邏輯的測(cè)試、設(shè)計(jì)師進(jìn)行視覺驗(yàn)收;驗(yàn)收完成后產(chǎn)品經(jīng)理驗(yàn)收測(cè)試結(jié)果,如有問題找開發(fā)進(jìn)行修改;修改完畢再找測(cè)試、設(shè)計(jì)、產(chǎn)品進(jìn)行確認(rèn),沒問題就封版了,產(chǎn)品經(jīng)理確認(rèn)發(fā)版日期,如果還有問題就再修改。


02.  視覺校驗(yàn)的驗(yàn)收標(biāo)準(zhǔn)

很多剛?cè)胄械脑O(shè)計(jì)新手,在校驗(yàn)階段不知道那些緯度的視覺差別,以至于很多視覺元素都需要查看,對(duì)于c端誰是來說界面的場(chǎng)景因?yàn)榻换ケ容^簡(jiǎn)單還能應(yīng)付,


但是對(duì)于模塊功能復(fù)雜、交互場(chǎng)景眾多的B端ui設(shè)計(jì)來說每個(gè)場(chǎng)景都要查看很耗費(fèi)精力工作效率也不高。


所以我總結(jié)以下幾個(gè)高頻出現(xiàn)問題的點(diǎn)供大家參考,大家可以按照以下幾個(gè)緯度進(jìn)行視覺走查,提高自己在工作中的效率。


a.檢查設(shè)計(jì)稿的可行性

人無完人,再專業(yè)的設(shè)計(jì)師,也不可能100%保證自己的設(shè)計(jì)方案就是最好的設(shè)計(jì)方案,在交付設(shè)計(jì)稿前期設(shè)計(jì)師應(yīng)該自我檢查自己的設(shè)計(jì)稿是否能清晰的傳遞信息,對(duì)于一些重要的模塊是否能凸顯出來,對(duì)于一些比較復(fù)雜的交互場(chǎng)景開發(fā)是否能夠?qū)崿F(xiàn),市場(chǎng)上眾多的屏幕尺寸,這樣的布局方式是否是最為合理的等這些緯度進(jìn)行思考做設(shè)計(jì),保證設(shè)計(jì)方案的可行性。

這里我舉一個(gè)我真實(shí)的案例,起初我接到的需求就是設(shè)計(jì)一個(gè)模塊里面信息排版,如果我采用我直接采用第一個(gè)方案那肯定是不行,因?yàn)樾畔蛹?jí)區(qū)分不夠明顯,所以第二個(gè)方案把數(shù)字標(biāo)簽用顏色進(jìn)行了區(qū)分,但是我又想如果出現(xiàn)文案比較多的場(chǎng)景,對(duì)齊方式都是左對(duì)齊那“指標(biāo)值”的細(xì)心就不可能保持左對(duì)齊,所以我又出了第四個(gè)方案,目前來看第四種方案可是適應(yīng)多種場(chǎng)景,算是最佳方案。


假設(shè)當(dāng)時(shí)我就交付前端開發(fā)第一種方案,上線后出現(xiàn)問題,還需要調(diào)整到第四種方案,慢慢的前端開發(fā)就會(huì)質(zhì)疑設(shè)計(jì)的專業(yè)能力,后續(xù)合作也會(huì)難以推進(jìn)了。


b.組件調(diào)用是否正確

B端產(chǎn)品的業(yè)務(wù)復(fù)雜、,模塊交叉設(shè)計(jì)數(shù)量多,所以在設(shè)計(jì)b端產(chǎn)品初級(jí)都是用原子化的思維搭建一個(gè)組件庫,前端是開發(fā)階段在樣式庫中寫一個(gè)標(biāo)準(zhǔn)的控件樣式,然后在不同的頁面場(chǎng)景中調(diào)用公共樣式,原理類似于我們?cè)?Sketch 中搭建 Symbol。我們要從兩個(gè)方面看組件是否調(diào)用正確。


1)公共組件是否正確

公共組件調(diào)用正確,好處就是公產(chǎn)品的整體視覺風(fēng)格是一致的,比如頁面的側(cè)邊導(dǎo)航,搜索場(chǎng)景、詳情頁場(chǎng)景布局是否一致,在斷網(wǎng)或者報(bào)錯(cuò)的場(chǎng)景中出現(xiàn)提醒條樣式是否一致。可進(jìn)行交互的按鈕樣式出現(xiàn)的交互狀態(tài)的按鈕是否一致等等。


2)業(yè)務(wù)組件是否正確

在真實(shí)開發(fā)場(chǎng)景中,有一些前端開發(fā)在雖然調(diào)用一個(gè)樣式,但是在設(shè)計(jì)規(guī)范中一個(gè)樣式可能會(huì)有多個(gè)尺寸,比如這個(gè)按鈕,在開發(fā)階段避免不了出現(xiàn)樣式雖然是對(duì)的,但是尺寸調(diào)用錯(cuò)誤的情況出現(xiàn),所以要查看一下組件的樣式和尺寸前端開發(fā)是否調(diào)用正確。

按照這個(gè)思路去設(shè)計(jì)最為重要的就是要檢查開發(fā)人員調(diào)用的組件庫的規(guī)格是否是我們?cè)O(shè)計(jì)稿的規(guī)格,以此類推去整體的布局、按鈕樣式,報(bào)錯(cuò)樣式。


這里需要描述的內(nèi)容相對(duì)較多,以后有機(jī)會(huì)我可以再補(bǔ)充一份關(guān)于《如何搭B端建組件庫》的文章,咱們?cè)敿?xì)聊一聊。


c.空間關(guān)系是否一致

空間關(guān)系可以簡(jiǎn)單的理解為模塊與模塊之間的“間距”關(guān)系和組件與組件之間“間距”的關(guān)系。


1)模塊與模塊之間——間距

所有模塊(卡片)之間的間距,這里具體指的頁面布局包括橫向間距和縱向間距,大家可以采用4px(或者8px)的倍數(shù)進(jìn)行刪格布局,把刪格布局的基礎(chǔ)規(guī)范梳理出來,以這個(gè)規(guī)范當(dāng)作標(biāo)注來審查橫向間距和縱向間距。


2)組件與組件之間——間距

另外一點(diǎn)就是我們?cè)诖罱ńM件階段,組件與組件之間的間距關(guān)系是否一致,不要出現(xiàn)不對(duì)齊的情況出現(xiàn)。


3)為什么要用統(tǒng)一間距

大家了解空間關(guān)系都看那些緯度后,我們?cè)賮斫獯鹨幌麓蠹业男闹械囊苫蟆?傉f要間距要保持一致,但是為什么要保持一致呢?主要原因有以下三點(diǎn):


對(duì)于如何使用間距,我建議大家可以看一看《寫給大家看的設(shè)計(jì)書》里面關(guān)于版式設(shè)計(jì)四大原則的講解和有關(guān)格式塔原理的文章。



d.文案的顯示是否清晰

在ui設(shè)計(jì)中,我們總避免不了與字體打交道,字體也經(jīng)常是我們?cè)谠O(shè)計(jì)中容易忽視的部分,影響字體的清晰度無非是字體、字號(hào),字重,段間距這幾個(gè)參數(shù)的設(shè)計(jì)。


1)字體

字體的實(shí)現(xiàn)其實(shí)是電腦渲染的一個(gè)過程,mac電腦默認(rèn)字體是蘋方,wids電腦默認(rèn)字體是微軟雅黑。在字體的選擇里面行業(yè)里是有標(biāo)準(zhǔn)的規(guī)范的,比如ont-family:serif、sans-serif、monospace、cursive和fantasy這無種字體,前端在編寫代碼時(shí)候會(huì)把這種多個(gè)字體名稱保存為“字體的回退機(jī)制”來定義,意思就是如果展示的設(shè)備(瀏覽器)檢索是沒有第一款字體就依次順延使用下一款字體,這個(gè)大家只需要了解就好,在字體選擇中使用頻次最多的還是對(duì)數(shù)字字體的選擇。


對(duì)于數(shù)字的字體設(shè)計(jì)要提前查看是否字體有版權(quán)。這里分享一個(gè)可以免費(fèi)查詢字體的網(wǎng)站:https://fonts.safe.#/?from=bd

不同的網(wǎng)站對(duì)字體排序的方式可能不一樣,有興趣的小伙伴可以用下面這個(gè)的方法進(jìn)行查看。


2)字號(hào)/行高

對(duì)字體的字號(hào)也要進(jìn)行走查,因?yàn)樵陂_發(fā)階段在不同的瀏覽器種顯示的字號(hào)會(huì)有變形的情況出現(xiàn)。


另外考慮各個(gè)瀏覽器的兼容問題,pc端建議使用最好的字號(hào)是12pt,因?yàn)?2pt可以保證在現(xiàn)在市面上的瀏覽器種是可以清晰顯示的,如果有特殊場(chǎng)景需要用到12pt以下的字號(hào),需要和開發(fā)說明并且標(biāo)注出來。


3)字重

設(shè)計(jì)區(qū)分文案層級(jí)的場(chǎng)景使用頻率最高、視覺效果最好的設(shè)計(jì)方法就是給字體加粗的字體樣式了。


這里要注意的是初級(jí)設(shè)計(jì)師的眼力可能還沒有達(dá)到很高的水平,尤其是最小的字體顯示加粗或者不加粗的效果視覺在電腦那么大的屏幕上感官并不是很明顯,所以最好可以通過從代碼的層面進(jìn)行核對(duì),具體方式可以看圖:



e.顏色的選擇是否科學(xué)

產(chǎn)品是給用戶呈現(xiàn)面積最大的一個(gè)元素對(duì)用戶來說感官層也是表現(xiàn)最為明顯的一個(gè)元素,所以在校驗(yàn)中“顏色”是最容易造成落地頁面與設(shè)計(jì)稿視覺差異的一個(gè)因素。


1)色差

因?yàn)榇蠹移聊坏募夹g(shù)一般是LG屏幕(屏幕的使用時(shí)間越長(zhǎng)色彩的還原度越低)。


雖然有的時(shí)候在查看代碼時(shí)候色值是正確的,但是也要根據(jù)具體的場(chǎng)景進(jìn)行分析,這里建議大家不要使用具有不透明度的色值(雖然在c端中經(jīng)常會(huì)使用,有不透明度會(huì)使顏色比較透亮但是在B端產(chǎn)品中定位是工具,工具就要以效率在第一位,美觀在第二位,所以這個(gè)場(chǎng)景的顏色使用盡量以清晰展示為第一準(zhǔn)則。


2)顏色種類

b端產(chǎn)品中,柱狀圖、折線圖的樣式比較多,在設(shè)計(jì)這類圖標(biāo)時(shí)候盡量避免多種顏色的出現(xiàn),還是因?yàn)锽端產(chǎn)品定位的原因,太多的顏色設(shè)計(jì)勢(shì)必會(huì)干擾用戶進(jìn)行判斷。



g.圖標(biāo)的尺寸是否合理

不管是在C端產(chǎn)品還是B端產(chǎn)品中圖標(biāo)的也是高頻出現(xiàn)的一個(gè)元素,圖標(biāo)本身的意思就是簡(jiǎn)化文字信息,通過圖形去高效的傳達(dá)一個(gè)固定的文案信息。


對(duì)于圖標(biāo)的設(shè)計(jì)走查大致分為兩點(diǎn):


1)大小

我們?cè)谠O(shè)計(jì)icon圖標(biāo)時(shí)候,會(huì)根據(jù)不同的場(chǎng)景進(jìn)行圖標(biāo)尺寸的規(guī)范輸出,但是在真實(shí)的開發(fā)環(huán)境當(dāng)中,開發(fā)在使用我們提供的插件(藍(lán)湖)進(jìn)行icon下載時(shí)候,會(huì)提供3種icon的尺寸下載,前端開發(fā)在使用切圖時(shí)候往往會(huì)忽視掉圖標(biāo)的尺寸問題,對(duì)于圖標(biāo)的設(shè)計(jì)走查,是否圖標(biāo)使用的尺寸是我們?cè)O(shè)計(jì)使用的規(guī)范,所以第一個(gè)就要看大小是否能清晰的展示。


2)svg格式開發(fā)

因?yàn)閜c電腦的屏幕尺寸、分辨率往往是高于移動(dòng)端的屏幕尺寸、分辨率,圖標(biāo)的切片做的太小上傳到屏幕上會(huì)出現(xiàn)模糊的展示效果,如果圖標(biāo)不能清晰的展示圖標(biāo)所呈現(xiàn)的圖形,那就會(huì)造成用戶一定的識(shí)別障礙,所以一定要保證圖標(biāo)不要有模糊的情況出現(xiàn),盡量使用svg格式圖標(biāo)切片給到開發(fā)。



設(shè)計(jì)校驗(yàn)工作不能說難,但是有耐心有細(xì)心的設(shè)計(jì)師都可以完成的,一遍視覺校驗(yàn)需要1——2天的時(shí)間,相對(duì)來時(shí)比較耗費(fèi)大家的精力。


換個(gè)角度思考,如果我們從項(xiàng)目開發(fā)的前期就控制設(shè)計(jì)走查的工作量,那我們可能會(huì)減少了走查的工作量。接下來我們就聊一聊怎么減少設(shè)計(jì)校驗(yàn)的工作量。


01.  了解需要視覺校驗(yàn)的原因

前面我們一直講的是做視覺校驗(yàn)需要校驗(yàn)的維度,我相信更多的設(shè)計(jì)師還是希望把精力放在做設(shè)計(jì)效果圖階段,畢竟如何做只能單純的提高我們的校驗(yàn)的效率,想要在開發(fā)過程中減少對(duì)項(xiàng)目的設(shè)計(jì)校驗(yàn)的工作,


我們需要清楚兩個(gè)答案,一個(gè)是“在開發(fā)過程中為啥需要設(shè)計(jì)走查”和“開發(fā)不愿意修改的原因”。


a.誰負(fù)責(zé)實(shí)現(xiàn)樣式

開篇我已經(jīng)講了設(shè)計(jì)走查的意義(原因),為啥要做視覺校驗(yàn)其實(shí)和設(shè)計(jì)走查的原因差不多,但是我想從開發(fā)流程再聊一聊。在一個(gè)產(chǎn)品開發(fā)中設(shè)計(jì)師下游需要對(duì)接人的人員角色統(tǒng)稱為開發(fā)工程師。


但是在這類角色中其實(shí)也是會(huì)細(xì)分為三種角色:前端工程師、后段工程師、測(cè)試工程師。而前端工程師是我們主要對(duì)接工作內(nèi)容的對(duì)象。

因?yàn)樽鲰?xiàng)目多數(shù)情況是多人寫作共同完成的工作可以從上面圖片可以看出,前端工程師是實(shí)現(xiàn)我們效果圖樣式的主要人員。


b.前端工程師心里所想

前端工程師的工作內(nèi)容需要一一查看設(shè)計(jì)師提供的標(biāo)注,然后再一一去實(shí)現(xiàn),所以難免不了心里會(huì)這樣所想:好麻煩,如不我自己按照感覺寫。


在真實(shí)的工作中,前端開發(fā)按照規(guī)范進(jìn)行項(xiàng)目開發(fā)這種思路是對(duì)的,但是設(shè)計(jì)師強(qiáng)硬的要求前端開發(fā)工程師,按照規(guī)范進(jìn)行開發(fā)是過于“理想化”的一種表現(xiàn)。


所以我們還是要先從自身出發(fā),循循漸進(jìn)的要求前端工程師按照我們的設(shè)計(jì)規(guī)范進(jìn)行開發(fā),這就來到我們下一個(gè)話題。


02.  如何避免呢

那么接下來我們來聊一聊身為設(shè)計(jì)師我們要怎么做,才能避免進(jìn)入過多的設(shè)計(jì)校驗(yàn)?zāi)亍?


a.了解開發(fā)實(shí)現(xiàn)原理

如果想成為一個(gè)高端進(jìn)階的設(shè)計(jì)師,我們要給自己增加籌碼,那最為直接增加籌碼的方式就是——站在開發(fā)者的視野看待問題,了解開發(fā)思維。


國內(nèi)前端寫樣式的代碼基本上是HTML+css,jacascript,注意這不算是編程,只是一個(gè)寫樣式的語言,簡(jiǎn)單的理解就是盒子模型(css語言)


1)盒子模型

CSS盒子模型 又稱框模型 (Box Model) ,包含了元素內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)幾個(gè)要素。如圖:

舉一個(gè)圖文模塊的例子:圖(1)是設(shè)計(jì)師輸出的設(shè)計(jì)稿, 圖(2)是開發(fā)需要的標(biāo)注信息(我們實(shí)際給到開發(fā)的標(biāo)注)開發(fā)需要的查看的就是色塊的尺寸和色塊之間的間距。



2)用框架化思維做設(shè)計(jì)稿

了解完前端制作咱們效果圖的原理后,我們就要用這個(gè)盒子模型的概念,像是搭建房子的原理去制作效果圖,所有的組件之間都是有理有據(jù)的,那這個(gè)專業(yè)術(shù)語就叫做框架化ui。


前端開發(fā)工程師通過一個(gè)個(gè)盒子填充來將我們的組件元素放入其中,最終形成前端展示的頁面。

注意:標(biāo)準(zhǔn)的額框架化就像前面的盒子模型是一塊一塊制作的,考慮到開發(fā)同學(xué)開發(fā)階段組件的嵌套邏輯。


3)開發(fā)者模式

如果還是不太了解盒子模型具體是什么的同學(xué)可以在線上使用下圖的方法自己去查看。


設(shè)計(jì)師在視覺校驗(yàn)時(shí)使用瀏覽器就可以看到開發(fā)寫的盒子,了解盒子也可以方便我們走查時(shí)知道問題在哪。具體操作步驟:



b.檢查自己的設(shè)計(jì)稿

在給前端開發(fā)工程師的提供設(shè)計(jì)標(biāo)注階段需要提前保證自己出的效果圖是有效的設(shè)計(jì)方案,符合基礎(chǔ)的視覺需求,都能保證模塊設(shè)計(jì)的可擴(kuò)展性及規(guī)范化,避免定稿后在反復(fù)修改設(shè)計(jì)方案。


比如;當(dāng)我們?cè)O(shè)計(jì)產(chǎn)品中的搜索條件模塊時(shí)候,我們需要考慮在一行展示3個(gè)搜索條件,一行展示4個(gè)搜索條件或者一行展示6個(gè)搜索條件并且放不下的情況下,那效果的展示樣式都是應(yīng)該是什么樣式的這列問題。

再比如,我們?cè)O(shè)計(jì)完一個(gè)場(chǎng)景的設(shè)計(jì)稿之后,還要考慮不同屏幕尺寸下這套效果圖的布局是否能滿足產(chǎn)品需求,如果不滿足在那設(shè)計(jì)稿需要調(diào)整成什么樣式的設(shè)計(jì)稿。



03.  做好標(biāo)注文檔

除了確保設(shè)計(jì)稿的可行性之外,還要做好設(shè)計(jì)稿的標(biāo)準(zhǔn)文檔。如果項(xiàng)目是小版本的迭代就只需要進(jìn)行簡(jiǎn)單的描述即可,如果是組件庫的升級(jí),那就需要 給前端工程師的標(biāo)注文檔,盡量是詳細(xì)的、準(zhǔn)確的。


包括設(shè)計(jì)稿、切圖(規(guī)范的切圖命名、壓縮好的圖片文件)標(biāo)注、設(shè)計(jì)規(guī)范已級(jí)交互文檔(包含標(biāo)字體標(biāo)注)。


a.描述到什么程度

那細(xì)致描述到什么程度呢?這里我簡(jiǎn)單的說幾個(gè)點(diǎn),比如:
·側(cè)邊導(dǎo)航欄在正常模式下、縮緊模式下,導(dǎo)航欄的寬度是如何變化的,
·如有有圖片信息的上傳,是什么圖片比例是什么,是21:9‘16:9,4:3.1:1?
·如果出現(xiàn)文案超長(zhǎng)的信息場(chǎng)景,不可展示的文案信息是什么樣子展示,是文案后面是省略號(hào)展示?還是鼠標(biāo)滑上去有氣泡彈窗的展示樣式。


b.圖標(biāo)命名的規(guī)范

隨著業(yè)務(wù)增多,團(tuán)隊(duì)內(nèi)對(duì)圖標(biāo)的隨意命名的習(xí)慣也開始凸顯出弊端,這種不好的習(xí)慣會(huì)造成同一類功能的圖標(biāo)會(huì)出現(xiàn)不同樣式尺寸,所以我們?cè)诖罱▓D標(biāo)規(guī)范時(shí)候,就可以把切片的命名規(guī)范好。


在圖標(biāo)規(guī)范中,圖標(biāo)需要有著單獨(dú)的后綴,這樣可以讓公用圖標(biāo)與業(yè)務(wù)圖標(biāo)更方便的溯源。值得注意的是我svg格式的圖標(biāo)可以不用寫切片的尺寸,而png的圖標(biāo)我建議寫上切片的尺寸。

有些公司習(xí)慣于去icon進(jìn)行英文的格式命名,左側(cè)是我整理的比較高平使用的命名,文章末尾我會(huì)分享出來文字格式,供大家使用。


c.圖標(biāo)的上傳

可以在開發(fā)前在與前端開發(fā)溝通達(dá)成共識(shí)、圖標(biāo)制作完成確認(rèn)后,將圖標(biāo)上傳到阿里巴巴圖標(biāo)庫中,更方便前端調(diào)用圖標(biāo)大小和調(diào)整顏色。


如果開發(fā)需要自己去找到相關(guān)圖標(biāo),也可以給予權(quán)限讓開發(fā)從藍(lán)湖上傳圖標(biāo)(前提是得整理好圖標(biāo)到藍(lán)湖上)。




04.  和前端開發(fā)工程師的溝通

在雖然很多時(shí)候項(xiàng)目的到發(fā)版本時(shí)間、驗(yàn)收標(biāo)準(zhǔn)團(tuán)隊(duì)內(nèi)部都是由明確的規(guī)劃和標(biāo)準(zhǔn),但是有些問題還需要特別分析、特別對(duì)待:這里我就列舉幾點(diǎn)我在項(xiàng)目由幾個(gè)比較重要的點(diǎn)。


a.進(jìn)行設(shè)計(jì)宣講

設(shè)計(jì)宣講最大的意義就是加深他們的印象,提前大家心里都有一個(gè)預(yù)估,把一些規(guī)范標(biāo)準(zhǔn)類的問題暴露出來,把關(guān)鍵核心點(diǎn),規(guī)則講清楚,為了后面減輕設(shè)計(jì)走查的工作量,開發(fā)也輕松一些。


1)用認(rèn)知對(duì)齊,目標(biāo)一致

如果團(tuán)隊(duì)內(nèi)部四個(gè)角色成員大家的認(rèn)知都是一致的——提升用戶體驗(yàn)是我們公共目標(biāo)。


如果不一致,那就要說服其中一個(gè)角色,最好是項(xiàng)目負(fù)責(zé)人,說明校驗(yàn)影響發(fā)版時(shí)間,如果大家都按照規(guī)范去完成自己工作內(nèi)容,可提高效率。確保大家理解一致:設(shè)計(jì)師要和開發(fā)、測(cè)試確認(rèn)視覺表現(xiàn)層的驗(yàn)收內(nèi)容、確保內(nèi)容大家理解一致。


2)做有效的溝通

認(rèn)真是前提、尊重是法寶。


在部分開發(fā)團(tuán)隊(duì)中,設(shè)計(jì)師的也不能太過于教條的對(duì)待自己的設(shè)計(jì)標(biāo)準(zhǔn),畢竟開發(fā)生氣請(qǐng)假不修改了,那就真的沒有人可以進(jìn)行代碼的修改了,設(shè)計(jì)效果更是顯示不了了在開發(fā)之前,就要和開發(fā)溝通,目前這些界面的效果在技術(shù)層面上是否能實(shí)現(xiàn),針對(duì)比較復(fù)雜的界面場(chǎng)景,實(shí)現(xiàn)出來的代價(jià)有多少,權(quán)和利弊后在確定是否按照效果圖進(jìn)行開發(fā)。


針對(duì)復(fù)雜的頁面需要把標(biāo)注標(biāo)記的更加詳細(xì),并且明確告知他們,我的刪格在哪里說明,布局規(guī)范在哪里說明,在這個(gè)交涉過程中設(shè)計(jì)師就需要尊重他人工作成果,明確自己的需要做的事情,把問題描述清楚就好,不可要求開發(fā)同學(xué)100%還原設(shè)計(jì)稿、過多的干預(yù)別的開發(fā)團(tuán)隊(duì)的開發(fā)步驟和內(nèi)容。


3)不必焦慮

前端開發(fā)工程師找我們溝通他們的疑問點(diǎn)時(shí)候我們要積極回應(yīng)他們,并且和他們一起處理問題,比如某些復(fù)雜的頁面,避免不了實(shí)現(xiàn)效果圖不好的情況出現(xiàn),這時(shí)候不要一口咬定就是開發(fā)的原因,先溝通具體原因,然后找出解決辦法。


不必焦慮、遺留問題下一版再解決:開發(fā)人員在修改的代碼的階段,開發(fā)人員的效率是有限的,而且大家都是身兼多條業(yè)務(wù)線,在這種開發(fā)的場(chǎng)景中可以在不影響正常發(fā)版日期的階段,把不太重要的視覺問題,放到下一個(gè)版本中在進(jìn)行修改。


4)規(guī)劃時(shí)間節(jié)點(diǎn)

而且在工作項(xiàng)目中也要注意分配自己的精力,我建議用對(duì)需求等級(jí)進(jìn)行劃分。

把問題的界面自己標(biāo)記優(yōu)先級(jí),定期(每天定時(shí))跟程序員溝通,跟他一起制定解決方案和時(shí)間。如果時(shí)間允許可以慢一點(diǎn)修改,只要改對(duì)了就可以,畢竟完成比完美更加重要。



對(duì)于設(shè)計(jì)校驗(yàn)的工具就一個(gè)原則:你開心就好,工具的最大作用就是提升工作效率,只要你覺得能提升你工作效率,你喜歡用啥就用啥。


如果還在迷茫用什么工具進(jìn)行設(shè)計(jì)校驗(yàn)的同學(xué),我把我使用的工具主要分類兩類工具,第一類是發(fā)現(xiàn)開發(fā)問題和效果圖的不符合的工具;第二類是針對(duì)如果高效記錄、追蹤問題的工具。重要目的就是提高設(shè)計(jì)師在設(shè)計(jì)走查中的工作效率。


01.  4款發(fā)現(xiàn)問題的工具

我在工作中發(fā)現(xiàn)很多時(shí)候開發(fā)不愿意檢查自己代碼樣式的一個(gè)原因就是不知道以下四種工具,在很多公司里面前端開發(fā)工程師都是多條業(yè)務(wù)線并行開發(fā)的局面,沒有更多的工作時(shí)間自己做設(shè)計(jì)審查,覺得又繁瑣又麻煩,


這是時(shí)候我們可以提供工具給予開發(fā),幫助他們提高工作效率。設(shè)計(jì)師同學(xué)也可以借助以下4款工具進(jìn)行校驗(yàn):

前三款都是Google Chrome瀏覽器的具體操作步驟可以看下面的圖片,如果還有不懂的地方可以在評(píng)論區(qū)給我留言,我看到后會(huì)為大家一一解答。


至于“他山石”這款軟件大家有興趣的話可以在晚上直接打名稱就會(huì)出來軟件信息。


02.  記錄追蹤問題的工具

介紹完發(fā)現(xiàn)問題的工具后,咱們?cè)倭囊涣挠涗涀粉檰栴}的工具,有的人會(huì)問了,你前面講了視覺校驗(yàn)都要看哪里,有推薦了視覺校驗(yàn)的工具來發(fā)現(xiàn)問題,我直接把需要修改的地方告訴前端開發(fā)工程師不就可以了嗎?為什么還要知道這個(gè)記錄追蹤問題的工具呢?


a.進(jìn)為什么要使用記錄追蹤問題的工具

在一些設(shè)計(jì)團(tuán)隊(duì)稍微成熟的公司里面由于項(xiàng)目的規(guī)模比較大,涉獵的模塊多,參與的人員相對(duì)也多。


面對(duì)這種體量的項(xiàng)目如果不進(jìn)行問題的記錄的話,這周做項(xiàng)目里面的1號(hào)模塊,下周做項(xiàng)目里面的2號(hào)模塊,大下周要對(duì)項(xiàng)目里面的1號(hào)模塊進(jìn)行修改,然后自己就會(huì)發(fā)現(xiàn)1號(hào)模塊當(dāng)初的修改問題是什么忘記了,更有甚者都忘記一起協(xié)同工作前端開發(fā)工程師的名字了。


這時(shí)“記錄追蹤問題的工具”就顯的尤其重要了,因?yàn)檫@種工具的出現(xiàn)可以幫助我們回憶起當(dāng)初具體的修改問題和修改的進(jìn)度,從而降低上線安全性的風(fēng)險(xiǎn)度。



b.TO DO LIST 思維模式

to do list是一種實(shí)際走查階段使用的一種走查模式。


在設(shè)計(jì)走查階段,主要由設(shè)計(jì)師發(fā)現(xiàn)問題、記錄匯總遞交到前端工程師這里進(jìn)行修改和跟進(jìn),主要的優(yōu)勢(shì)是在于協(xié)助走查可以順利的開展,不遺漏掉任何信息。


在輸出的表格比較注重3點(diǎn),問題需要逐條記錄、需要截問題圖片及描述修改正確內(nèi)容、相關(guān)對(duì)接人員的名稱和處理進(jìn)度。

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

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


文章來源:站酷   作者:斜杠7濕兄

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ì)還會(huì)遠(yuǎn)嗎?

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



前不久看了阿里巴巴的設(shè)計(jì)周,其中有一個(gè)話題引起我注意“適老化”設(shè)計(jì),今天就來聊一聊適老化設(shè)計(jì)的注意點(diǎn)。*文章末尾我會(huì)把阿里巴巴的演講ppt分享出來,如果這篇文章能幫助到你,還請(qǐng)點(diǎn)贊、分享。





1 老齡化是一個(gè)全球趨勢(shì)

據(jù)《世界人口展望:2019年修訂版》的數(shù)據(jù)顯示,到2050年,全世界每6人中,就有1人年齡在65歲(16%)以上,而這一數(shù)字在2019年僅為11人(9%)。

再來看看我國情況:因中國的人口基數(shù)龐大,中國目前老齡化進(jìn)程是世界第一。我國的網(wǎng)民除了地域呈現(xiàn)從一線城市向四、五線城市的遷移之外,也呈現(xiàn)出偏向老齡化的特征。



2 三孩政策暗示老齡化時(shí)代來臨

前不久國務(wù)院發(fā)布國家開放了“三孩政策”也看出來國家針對(duì)人口老齡化表現(xiàn)所作出的國家方針的決策?;貧w我們所在的互聯(lián)網(wǎng)行業(yè),也許慢慢的互聯(lián)網(wǎng)的原住民不再是z時(shí)代的年輕群體,他會(huì)慢慢的向中年、老年人所遷移。

今年1月份國家也開始重視了關(guān)于老年人互聯(lián)網(wǎng)生活感受,先后頒布了《關(guān)于切實(shí)解決老年人運(yùn)用智能技術(shù)困難的實(shí)施方案》。通知在全國范圍內(nèi)組織了為期一年的互聯(lián)網(wǎng)應(yīng)用適老化及無障礙改造專項(xiàng)行動(dòng), 專項(xiàng)行動(dòng)方案針對(duì)老年人、視障聽障人士、肢體障礙人士使用app需求,進(jìn)行改造要求,并且列出43個(gè)手機(jī)APP的適老化改造產(chǎn)品清單。



我體驗(yàn)了百度、支付寶、喜馬拉雅、滴滴打車這四款app針對(duì)適老化項(xiàng)目的改版。



老年版還有一個(gè)特殊的名稱,就是精簡(jiǎn)版。從產(chǎn)品的功能上進(jìn)行了大量的精簡(jiǎn),比如支付寶在老年版的模式中只提供了使用頻次比較高的功能健康碼、結(jié)賬付款、充話費(fèi)等功能,做到了功能上的精簡(jiǎn)。




我相信在未來的幾年,我們的產(chǎn)品會(huì)有適老化的改版需求。聽完我說這么多大家心中都會(huì)有一個(gè)疑問:哪些群體屬于老年群體?生活中老年人用戶數(shù)量比較少不了解他們的需求?針對(duì)適老化項(xiàng)目我們應(yīng)該怎么改?


1.老年群體的劃分

各國對(duì)老年人口的年齡界限的規(guī)定各不相同,有的國家規(guī)定為65歲以上,有的規(guī)定為60歲以上。 我國《老年人權(quán)益保障法》第2條規(guī)定老年人的年齡起點(diǎn)標(biāo)準(zhǔn)是60周歲,即凡年滿60周歲的中華人民共和國公民都屬于老年人。



2.老年人的需求有哪些

身邊的人肯定會(huì)有上了年紀(jì)的人,回答這個(gè)問題前,咱們先說老年人和我們有什么不同, 其實(shí)當(dāng)人類的生理年齡超過20歲,人類的老化過程就可以開始,老年用戶最大的特點(diǎn)就是其五力—視力、聽力、表達(dá)力、行動(dòng)力和認(rèn)知力的弱化,導(dǎo)致產(chǎn)品的可讀性和體驗(yàn)型低,造成用戶對(duì)我們的產(chǎn)品失望更有甚者認(rèn)為我們的產(chǎn)品是一個(gè)糟糕的產(chǎn)品。



如果把這些需求進(jìn)行整理,就會(huì)發(fā)現(xiàn)多數(shù)情況是用戶的聽力、視力和手部敏捷度下降造成用戶的可讀性下降,從而導(dǎo)致用戶產(chǎn)生了不理解、犯錯(cuò)的操作。歸根到底我們可以把用戶的需求分為兩種類型“服務(wù)需求”和“生理需求”。



3. 為啥老年人看不清楚

人的眼球就像是一部精密的照相機(jī),眼之所以能看見物體,是因?yàn)檎赵谖矬w上的反射光線,經(jīng)過眼球的角膜、晶狀體及玻璃體等屈光間質(zhì)折射后,成像在視網(wǎng)膜上。

隨著年齡增長(zhǎng)人的晶狀體會(huì)出現(xiàn)硬化、睫狀肌衰弱的情況出現(xiàn),造成物體不能很好地成像在視網(wǎng)膜上,具調(diào)查反饋在 40 歲時(shí),只有一半的光線像 20 歲時(shí)一樣進(jìn)入視網(wǎng)膜。對(duì)于 60 歲的人來說,只有 20%。正是因?yàn)橐陨系脑?,?dǎo)致老年人的視覺分辨物體的敏感度、明暗感覺、空間感覺、色彩感覺的能力下降,有看不清楚的情況出現(xiàn)。



4 別讓適老化的設(shè)計(jì)只有“大、大、大”

設(shè)計(jì)師是團(tuán)隊(duì)中唯一站在用戶的角度考慮問題的人員,我們不應(yīng)該只把適老化設(shè)計(jì)變成只是“大字版”的解決方案——加大字號(hào)、加大音量、加大屏幕尺寸這么簡(jiǎn)單。



5. 有規(guī)劃的設(shè)計(jì)解決方案

凸顯我們?cè)O(shè)計(jì)的專業(yè)程度應(yīng)當(dāng)站在用戶同理心的角度,針對(duì)的為自己用戶的群體設(shè)計(jì)一份專業(yè)化的設(shè)計(jì)思路,把需要解決分問題點(diǎn)都一 一梳理清楚,再動(dòng)手制作設(shè)計(jì)圖紙。



undefined


老年人眼睛最常見的問題是視力障礙,俗稱“老花眼”,影響用戶進(jìn)行閱讀。 如果老年人不會(huì)閱讀它,或者如果他們無法閱讀或理解它,那么擁有它又有什么意義呢?

我歸納出4種方法,大家可以按照以下歸納的設(shè)計(jì)方法和設(shè)計(jì)技巧來做適老化的設(shè)計(jì)改版。



1 字體

ui中的文字是產(chǎn)品界面中最重要的一個(gè)元素,我們先來看看關(guān)于字體的一些技巧。當(dāng)產(chǎn)品中的文本給用戶很難閱讀的感覺,用戶想閱讀的意愿就會(huì)降低,還有一個(gè)場(chǎng)景細(xì)心的同學(xué)不難發(fā)現(xiàn),當(dāng)用戶閱讀時(shí)間變長(zhǎng)了之后就會(huì)彎腰駝背,甚至瞇起眼閱讀,如果發(fā)現(xiàn)產(chǎn)品的用戶出現(xiàn)這樣的情況,那就要注意以下幾點(diǎn)。

A 使用非襯線體

襯線指的是字母結(jié)構(gòu)筆畫之外的裝飾性筆畫。有襯線的字體叫襯線字體(serif);沒有襯線的字體,則叫做無襯線體(sans-serif)。

簡(jiǎn)單的理解就是非襯線體(例如黑體等)就是沒有裝飾性筆畫的末尾,這種無襯線體也是被廣泛應(yīng)用網(wǎng)頁端或手機(jī)端的產(chǎn)品,所以非襯線字體有醒目而且輪廓清晰的特點(diǎn),是提升屏幕可讀性的首選。

*注意的是在設(shè)計(jì)過程中避免使用多種字體或者精心設(shè)計(jì)的造型字體,因?yàn)檫@可能會(huì)造成用戶混淆。



2 文本

隨著年齡的增大,老年人可看到的視野也是變化的他會(huì)越來越小,所以在設(shè)計(jì)多字文本場(chǎng)景時(shí)候我們要注意以下兩點(diǎn)。


A 文本字號(hào)不小于16像素

有資料顯示12像素的字體可以正常閱讀文本了,但是對(duì)于大多數(shù)讀者來說,12 像素仍然太小了。即使是 15 像素也會(huì)讓原本可能會(huì)轉(zhuǎn)換的訪問者望而卻步。

為什么文本字號(hào)要設(shè)計(jì)為16像素呢?有研究表明在我們屏幕上 16 像素的文本大小與印刷在書籍或雜志上的文本大小相同,這很符合人的閱讀習(xí)慣,但是人閱讀還有一個(gè)因素是不能忽視的,就是人和屏幕之間的距離。



舉一個(gè)例子,我們讀書都是手捧著書,印刷字體通常設(shè)置在 10 點(diǎn)~12點(diǎn)左右,考慮到用戶距離屏幕的距離其實(shí)和顯示器上16像素的字體大小相同的。(一般前端開發(fā)會(huì)使用em單位進(jìn)行字體大小開發(fā),這個(gè)可以保證在不同分辨率上字體的比例,設(shè)計(jì)師只需要了解即可。 )



*瀏覽器的默認(rèn)字體高都是16像素,除非特殊情況,通常情況下字體不建議使用10 像素。

*任何閱讀類或點(diǎn)擊類的內(nèi)容都應(yīng)該按一定比例放大,尤其是在設(shè)計(jì)按鈕上面的字號(hào),應(yīng)該盡量保持較大,不少于16像素。



說一個(gè)有趣的事情,我發(fā)現(xiàn)在印刷中小至 8 像素的字體是可讀性和成本之間的理想折衷方案,我查閱了相關(guān)文章,是因?yàn)檫^大的字號(hào)會(huì)浪費(fèi)紙張?jiān)斐捎∷⒊杀驹黾?。?Web 上,不需要為更多空間而支付任何費(fèi)用,考慮的是給用戶高效的傳達(dá)文本信息。


B 添加設(shè)置字體大小的功能

現(xiàn)在很多系統(tǒng)中都會(huì)有調(diào)節(jié)字號(hào)的功能,如果在資源條件充沛的情況下可以開發(fā)類似的功能,方便用戶自己進(jìn)行設(shè)置調(diào)節(jié)。下圖是蘋果系統(tǒng)自定義文字大小功能。



3 顏色

任何設(shè)計(jì)都是離不開色彩的那么接下來讓我們看看在顏色的選擇上要注意那些情況。


A 使用和現(xiàn)實(shí)生活中認(rèn)知一致的顏色

老年人通常會(huì)用經(jīng)驗(yàn)去判斷一個(gè)事物,尤其是與外國人相比中國人更習(xí)慣以經(jīng)驗(yàn)來思考問題,所以我們?cè)谧鲈O(shè)計(jì)時(shí)候要盡量降低老年人的學(xué)習(xí)成本。比如我們生活中常常會(huì)見到十字路口的紅綠燈,綠色代表通行,黃色代表等待,紅色代表禁止,我們?cè)谠O(shè)計(jì)重要提示時(shí)候也可以借鑒這種方式去設(shè)計(jì),保持和老年人現(xiàn)實(shí)生活對(duì)色彩的認(rèn)知是一致的。



B 避免使用藍(lán)色

前面已經(jīng)說 老年人對(duì)對(duì)比度差異的敏感度降低、區(qū)分相似顏色方面變得更差。尤其是無法分辨藍(lán)色和紫色之間的區(qū)別,對(duì)綠色鑒別能力下降更明顯。

考慮到老年人眼睛對(duì)藍(lán)顏色的陰影不敏感,那么就要降低設(shè)計(jì)中使用藍(lán)色和紫色相互配合的場(chǎng)景,比如背景、文字、圖標(biāo)、圖片等模塊。



C 找到最合適的對(duì)比度

使用具有高對(duì)比度級(jí)別的配色方案使頁面更具可讀性在顏色的對(duì)比度上,可以根據(jù)WCAG2.1(Web Content Accessibility Guideline,Web內(nèi)容無障礙指南)設(shè)計(jì)顏色的對(duì)比,比如把重要的文字信息的對(duì)比度設(shè)計(jì)到AAA,次級(jí)的文字信息的對(duì)比度設(shè)計(jì)到AA。



在適老化設(shè)計(jì)中,色彩對(duì)比度要在4.5:1之上,即對(duì)比度達(dá)到 AAA級(jí)和AA級(jí),讓界面中的信息與其背景間的關(guān)系對(duì)比度較大,才能足以讓老年人看清信息。



如果不了解怎么判斷對(duì)比度是什么級(jí)別,我建議大家可以收藏下面的網(wǎng)站。只需要把色紙?zhí)钊氲杰浖?,就可以看到兩個(gè)顏色關(guān)系的對(duì)比度。



4 交互

人在手機(jī)上的交互手勢(shì)會(huì)有很多種,根據(jù)不同的業(yè)務(wù)場(chǎng)景,我們使用的交互手勢(shì)也不相同。 大致分為四類:?jiǎn)螕簦╰ap);長(zhǎng)按(long press);雙擊(Double Tap);長(zhǎng)按&拖拽(long press & Drag)。



這么多交互手勢(shì),機(jī)器需要先判斷你是什么手勢(shì)再根據(jù)手勢(shì)指令給出相應(yīng)的反饋。

當(dāng)手指貼合上屏幕的時(shí)候,反饋的熱區(qū),并不是均勻向四周擴(kuò)散的,而是向下的擴(kuò)散。對(duì)于觸摸中心點(diǎn),在觸摸的過程中,就會(huì)有向下的一個(gè)偏移,如圖:



例如在iOS內(nèi)的手勢(shì)識(shí)別,有一個(gè)專門的接口來做識(shí)別:PanGestureRecognizer,這個(gè)接口會(huì)在10px內(nèi)先判定手指移動(dòng)的方向和距離,再對(duì)具體觸發(fā)的手勢(shì)來做定義。



A  大的間距

在移動(dòng)端,按鈕尺寸根據(jù)手指觸摸屏幕的最小點(diǎn)觸區(qū)域,平均長(zhǎng)度在10-14mm之間,指尖的長(zhǎng)度為8-10mm,所以10mm x 10mm就是一個(gè)最小觸摸目標(biāo)尺寸。在iOS 人機(jī)交互規(guī)范里面的 44*44 point是Apple HIG建議的手指點(diǎn)觸最小點(diǎn)觸面積。所以我們可以在不同設(shè)備不同 PPI 時(shí)處理尺寸,在移動(dòng)端設(shè)定點(diǎn)觸尺寸的最小點(diǎn)觸區(qū)域大小來設(shè)置按鈕尺寸的大小。



·移動(dòng)端:按鈕高度35px-50px之間,字號(hào)13pt-17pt,圓角4-8

·web端:按鈕高度24px-48px,字號(hào)12-18,圓角6-10



因?yàn)槔夏耆说氖种钙?,反映變慢,就要需要把相關(guān)按鈕的大小、組合的間距等設(shè)計(jì)的足夠?qū)挻?,方便用戶點(diǎn)擊;一些操作反饋的時(shí)長(zhǎng)也需要拉長(zhǎng),給老年人足夠的反應(yīng)時(shí)間。建議至少保持在8像素以上的間距。



B 點(diǎn)擊好于輸入

基于以上因素考慮,對(duì)于老年人群,選擇類的交互和輸入類的交互相比,用戶的效率會(huì)大大提高,所以點(diǎn)擊類交互要好于輸入類交互。



C 符合用戶心理預(yù)期

這里我列舉一個(gè)蘋果的案例,蘋果在設(shè)計(jì)積極按鈕的時(shí)候通常會(huì)放到布局的最右側(cè),舉個(gè)例:

這里有“取消”和“確認(rèn)”兩個(gè)按鈕,對(duì)于業(yè)務(wù)方來說判斷“確定”是積極按鈕,所以在設(shè)計(jì)這樣的彈窗時(shí)候 會(huì)把“確定”放在最右側(cè)。



5 具體的內(nèi)容


A 形象應(yīng)更加真實(shí)

老人對(duì)設(shè)計(jì)師的樣式判斷不是那么清晰和明顯,設(shè)計(jì)師尤其是在制作活動(dòng)banner場(chǎng)景中,使用具象的圖像往往會(huì)比插畫的圖像信息傳達(dá)更為直接。



B 圖標(biāo)加文案

人與人之間的認(rèn)知水平是存在差距的,老年人的認(rèn)知水平相對(duì)較低。比如在圖標(biāo)的設(shè)計(jì)方向,可能一個(gè)通話的圖標(biāo)會(huì)有手提電話和座機(jī)電話兩種表現(xiàn)方式,但是真正使用那種圖標(biāo)就會(huì)給用戶產(chǎn)生誤區(qū),最好的解決辦法是用“純文字加圖標(biāo)”的形式表達(dá)是最為合理的一種方式。



C 色彩更有辨識(shí)度

對(duì)于部分的用戶來說,有好的色彩更能增加信息傳達(dá)的辨識(shí)度。比如我們?cè)诎褕D標(biāo)雖然加上了文案,用戶第一眼看上去還是撞色處理的方式更好。



D 有引導(dǎo)性文案

對(duì)于老年人,我們可以運(yùn)用潛意識(shí)作為界面中的隱形向?qū)В_保視覺提示清晰,幫助產(chǎn)品順利完成目標(biāo)行為。



老年人的理解能力也會(huì)比常人要弱一些,對(duì)于一些文案或者專有名詞要描述具體,便于用戶進(jìn)行理解和做出選擇。研究發(fā)現(xiàn)帶有目的性的行動(dòng)文案要好于描述類的文案。



6 語音功能的加入

語音功能也是輔助老年人的一項(xiàng)功能點(diǎn),通過語音搜索直達(dá)某個(gè)功能等。比如在搜索場(chǎng)景、客服場(chǎng)景、查詢場(chǎng)景等等。

值得注意的是在設(shè)計(jì)之初要考慮以下幾個(gè)場(chǎng)景:

·適當(dāng)?shù)卦龃笠袅俊⑹菇邮盏穆曇舾忧逦?/strong>

·添加聲音反饋機(jī)制,如果聲音發(fā)送成功,應(yīng)該給予正確的聲音提示。




1 驗(yàn)證的范圍

其實(shí)驗(yàn)證設(shè)計(jì)是否成功和我們正常做項(xiàng)目的思路大致相同,無外乎從比如產(chǎn)品體驗(yàn),用戶服務(wù),產(chǎn)品功能這三個(gè)層面進(jìn)行跟蹤反饋。



2 驗(yàn)證的指標(biāo)

目前都是通過定量測(cè)試的方式,進(jìn)行可用性指標(biāo)來進(jìn)行衡量的。我列舉了四個(gè)緯度,方便大家進(jìn)行借鑒和衡量。

任務(wù)成功率:用戶能否順利的完成任務(wù),解決用戶需求。

任務(wù)完成率:用戶多快能完成任務(wù),耗費(fèi)時(shí)間多久,多數(shù)情況用于衡量效率。

任務(wù)出錯(cuò)率:在用戶完成任務(wù)的路徑出,用戶出錯(cuò)幾次,用于衡量出錯(cuò)頻率。

用戶滿意度:用戶完成任務(wù)后,用戶對(duì)產(chǎn)品的功能進(jìn)行打分,用戶衡量用戶的滿意程度。





其實(shí)國家提倡的適老化設(shè)計(jì),我們可以設(shè)想另外一個(gè)話題——為老年人做設(shè)計(jì)等于為更多的人做設(shè)計(jì)。



1 無障礙設(shè)計(jì)在互聯(lián)網(wǎng)產(chǎn)品中的應(yīng)用

如果你使用的是蘋果MacOS系統(tǒng)的操作系統(tǒng),你可以看到蘋果在這種老年人(無障礙)設(shè)計(jì)中的功能設(shè)計(jì),比如蘋果的輔助功能中的設(shè)計(jì)選項(xiàng),有興趣的同學(xué)可以體驗(yàn)一下。



其實(shí)在國內(nèi)的互聯(lián)網(wǎng)產(chǎn)品公司也有做過無障礙的設(shè)計(jì),比如小米發(fā)布的MIUI系統(tǒng)中的無障礙觸感設(shè)計(jì),有興趣的小伙伴可以自己下載去體驗(yàn)。



2 開拓自己的知識(shí)面

其實(shí)網(wǎng)上有很多關(guān)于無障礙設(shè)計(jì)可以借鑒的參考文獻(xiàn),比如W3C無障礙指南(WCAG 2.1)就是其中一款,WCAG是Web Content Accessibility Guidelines 即web內(nèi)容無障礙指南有興趣的同學(xué)可以查詢一下。



很多設(shè)計(jì)規(guī)范網(wǎng)站都會(huì)有關(guān)于無障礙設(shè)計(jì)的介紹,有興趣的同學(xué)也可以查看。



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

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



文章來源:站酷   作者:斜杠7濕兄

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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和交互的需要注意45個(gè)微細(xì)節(jié)

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

1.用微妙的雙重投影來讓你的卡片看起來更加清晰

在某些元素周圍使用多個(gè)放置陰影或非常精細(xì)的邊框(僅比實(shí)際陰影暗一點(diǎn))可以使這些元素看起來更清晰、更清晰,并幫助你避免那些看起來渾濁的陰影。



2.減少標(biāo)題上的字母間距以提供更好的光學(xué)平衡

你的標(biāo)題很可能會(huì)比正文更大,也比正文更重,所以字母之間的間距有時(shí)會(huì)看起來更大,

減少一點(diǎn)間距,就可以使你的標(biāo)題更加清晰



3.為了保持一致性,請(qǐng)確保圖標(biāo)共享相同的視覺樣式。

在ui中實(shí)現(xiàn)圖標(biāo)時(shí),保持一致。

確保它們具有相同的視覺風(fēng)格; 相同的重量,或者填充,或者輪廓。



4.在你的設(shè)計(jì)中只用一種字體就好了

在創(chuàng)建設(shè)計(jì)時(shí)只使用一種字體是比較好的,這樣做實(shí)際上可以幫助你產(chǎn)生統(tǒng)一的設(shè)計(jì)效果。

使用字重、大小和顏色的組合,你還是可以用一個(gè)單獨(dú)的字體表達(dá)清晰的文字的結(jié)構(gòu)



5.留白

留白可以讓你的設(shè)計(jì)具有呼吸感,更加舒適



6.選擇底色,然后使用色調(diào)和陰影來增加一致

通過選擇一個(gè)基色,然后使用你選擇的顏色的色調(diào)和陰影,可以以最簡(jiǎn)單的方式為你的設(shè)計(jì)增加一致性



7.提高用戶的入職體驗(yàn)。 拇指法則記住。

允許用戶隨時(shí)跳過你的移動(dòng)應(yīng)用程序登錄序列,并將該跳過鏈接放在拇指容易觸及的位置。

只是一個(gè)簡(jiǎn)單的調(diào)整,可以讓你的用戶有更好的體驗(yàn)(我常常體驗(yàn)國內(nèi)一些APP,關(guān)閉按鈕特別遠(yuǎn),特別難按)



8.光影需要是來自同一個(gè)光源

確保你的陰影總是來自同一個(gè)光源,會(huì)素描的同學(xué)很好理解,光源關(guān)系一致表達(dá)空間統(tǒng)一性的基礎(chǔ)



9.提高文本和圖像之間的對(duì)比度

基本的處理方式是,在圖片上增加一個(gè)透明漸變蒙版來使得字體看的更加清楚



10.同一種字體時(shí),使用多字重的字體

如果只使用一個(gè)字體,盡量選擇有多字重的字體,比如:阿里巴巴普惠體、思源、OPPO



11.在淺色背景上你的文字可見性需要注意

在淺色背景下工作時(shí),文字顏色不要太淺,雖然看起來很舒服,但可見性不較差,不利于閱讀



12.長(zhǎng)文本中,文字閱讀感不要太搶眼

當(dāng)涉及到長(zhǎng)格式的內(nèi)容時(shí),某些常規(guī)的粗體字體在屏幕上看起來還是有點(diǎn)太重,太呆板了。

建議,選擇像深灰色(即# 4f4f)來降低文本的色調(diào),這樣閱讀起來會(huì)更加舒服



13.行動(dòng)按鈕需要是最聚焦的。

通過使用顏色對(duì)比、尺寸和標(biāo)簽,確保“行動(dòng)按鈕”盡可能突出



14.字號(hào)越小,你的行距就越高

隨著字號(hào)的減小,增加行高可以獲得更好的易讀性。




16.突出菜單中最常用的元素


在設(shè)計(jì)應(yīng)用程序內(nèi)部使用的菜單時(shí),請(qǐng)確保提供最常用的操作(即; 上傳圖像,添加文件等…)最突出的屏幕



17.從你的圖像中挑選顏色,讓你的產(chǎn)品栩栩如生。

只需從你的產(chǎn)品圖像中挑選顏色,然后將你選擇的顏色的各種色調(diào)和陰影應(yīng)用到你的背景、文本、圖標(biāo)……,就能為你的設(shè)計(jì)增添大量的視覺趣味



18.根據(jù)字體的x高度設(shè)置行高。

不同x高度的字體需要不同的行高測(cè)量來實(shí)現(xiàn)文本行之間的正確分隔。

即使你可能有兩種字體大小相同(即; 18px)它們的x高度可能會(huì)有很大差異,選擇正確行高是非常有必要的



19.突出最重要的元素

undefined

通過使用字體大小、權(quán)重、顏色和布局的組合,你可以輕松突出UI中最重要的元素



20.告知錯(cuò)誤的原因

undefined

在用戶剛剛執(zhí)行的操作附近添加一條錯(cuò)誤消息,可以幫助用戶提高正確登入,也可以緩解用戶焦慮(他可以更加清晰那里出錯(cuò))



21.嘗試在手機(jī)上創(chuàng)建更大可點(diǎn)擊的區(qū)域。

undefined

當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí),嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域

對(duì)于按鈕和僅由文本組成的鏈接來說,點(diǎn)擊區(qū)域會(huì)很小,所以盡可能使用帶有標(biāo)簽的圖標(biāo)。

iOS和Android的最低建議點(diǎn)擊區(qū)域

iOS為44 x 44pt

安卓48 x 48dp



22.在短標(biāo)題上使用大寫的字母

undefined

長(zhǎng)標(biāo)題都是大寫字母的話,閱讀轉(zhuǎn)化上比較慢(你明白他是什么意思比較慢)

短標(biāo)題都是大字母的話,相對(duì)來說比較快可以和記憶中的單詞對(duì)應(yīng)上



23.保持淺色文本和圖像之間的對(duì)比度

undefined

始終確保淺色文本在淺色圖像背景下清晰可見。

只需在文本后面應(yīng)用一個(gè)低透明的深色背景,就能保持這些元素之間的良好對(duì)比度



24.排版的親密性,要一直記得

undefined

標(biāo)題、正文、標(biāo)題、正文……這樣的排列中如果是間距都是相同的,那么在閱讀上就很難區(qū)分標(biāo)題是屬于上文還是下文的。

正確的做法是,標(biāo)題距離上文的距離>標(biāo)題距離下文的距離,這樣閱讀起來,標(biāo)題會(huì)比較清晰的對(duì)應(yīng)的是下文



25.在下載中盡量給進(jìn)度提醒

undefined

當(dāng)下載速度是一閃而過時(shí),則無需提示

當(dāng)下載等待時(shí)間>3S時(shí),建議給進(jìn)度提示



26.文字也有情緒

undefined

在項(xiàng)目中處理文本時(shí),選擇正確的字體將影響文本的語音類型。 那么大聲、或者溫柔、或者正式,嚴(yán)肅,或者有趣。每種字體都有自己獨(dú)特的聲音



27.為正文選擇合適的行長(zhǎng),并提高可讀性。

undefined

基于人閱讀情緒,如果閱讀一行很長(zhǎng),一直閱讀下去,會(huì)出現(xiàn)你眼前閱讀的內(nèi)容“不見”的情況

對(duì)于單列頁面,45到75個(gè)字符被廣泛認(rèn)為是令人滿意的行長(zhǎng),66個(gè)字符的行(包括字母和空格)是最合適的。

當(dāng)然,字體大小和行高也是決定可讀性的一個(gè)因素,但是對(duì)于行長(zhǎng),要保持在45到75個(gè)字符之間



28.偶爾使用純粹的裝飾性元素是可以的,但要保持可訪問性。

undefined

需要適當(dāng),如果裝飾的強(qiáng)了主要表達(dá)的,則不可取



29.使UI中的元素相互區(qū)分。

按鈕。 通知。 UI中兩個(gè)獨(dú)立但必不可少的元素。

一定要確保你的用戶能夠快速準(zhǔn)確地將他們區(qū)分開來



30.陰影不要太重

undefined

舒服的投影會(huì)增加你的設(shè)計(jì)的質(zhì)感,和透氣感。太重的投影會(huì)顯得你畫面比較臟



31.使用遞進(jìn)分類時(shí),需要明確當(dāng)前選中的元素

undefined


32.使用高度飽和的顏色? 試著用色調(diào)或陰影把事情調(diào)小一點(diǎn)。

undefined

高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)在網(wǎng)站上看起來很不錯(cuò),但過度使用時(shí),會(huì)讓用戶眼睛疲勞,主要是與文本內(nèi)容一起使用時(shí)。



33.使用用戶熟悉認(rèn)知的圖標(biāo)表達(dá)

undefined

在向設(shè)計(jì)中添加圖標(biāo)時(shí),使用用戶熟悉認(rèn)知的圖標(biāo)。新的圖標(biāo)雖有很好看,很有個(gè)性,但是會(huì)讓用戶疑惑



34.接近律

undefined

需要承上表達(dá)的元素,排版上接近對(duì)應(yīng)的元素,可以讓用戶心理聯(lián)系起來是一體的



35.減少標(biāo)題的行高是很好的。

undefined

與長(zhǎng)格式正文文本(需要足夠的行高以提高可讀性)不同,標(biāo)題通常要短得多,因此可以稍微縮小間距。標(biāo)題的建議行高通常是文本大小的1到1.3倍



36.從色輪上挑選配色

undefined

類比色和鄰近色是最和諧的配色方案之一,也是最不會(huì)出錯(cuò)的配色



37.想用更輕松的語氣, 盡量用小寫字母。

undefined

在處理特定項(xiàng)目時(shí),使用類似于所有小寫字母的文本可以表達(dá)更加輕松的意思

但需要注意,在圖像和文本之間使用某種顏色疊加,以獲得更強(qiáng)的對(duì)比度



38.使用重量、大小和顏色來表示你的結(jié)構(gòu)層次感。

undefined


39.深色背景+淺色文本, 增加字重,提升易讀性

undefined

當(dāng)在淺色背景下設(shè)置深色文本時(shí),偶爾可以選擇較輕的字體。

但是…

反之:淺色文本>深色背景。

最好是把字體的重量增加一點(diǎn),尤其是長(zhǎng)文本,原因是,讓用戶避免視覺疲勞,獲得更好的易讀性



40.使用爭(zhēng)取的字體類型,表達(dá)對(duì)應(yīng)的情感

正確的字體選擇對(duì)于讓你的內(nèi)容更快的正確傳達(dá)更重要



41.全部大寫+字母間距=更好的易讀性。

只需稍微增加字母之間的間距,就可以提高字跡的易讀性,并為大寫字母增加一些設(shè)計(jì)感



42.讓表單上的錯(cuò)誤信息變得有用和容易理解。

確保錯(cuò)誤提示,解釋了哪里出錯(cuò)和如何解決

始終讓用戶了解最新情況,即使是普通的表單,讓這些錯(cuò)誤消息變得有用,不要讓用戶懵逼



43.加載占位符

使用占位符可以更好的緩解用戶焦慮



44.通知用戶如果應(yīng)用某個(gè)特定操作將會(huì)發(fā)生什么。

在應(yīng)用可能產(chǎn)生后果的特定操作之前,請(qǐng)?jiān)敿?xì)地通知用戶。尤其適用于具有不可逆轉(zhuǎn)后果的行為,例如永久刪除某個(gè)內(nèi)容。讓用戶知道將要發(fā)生什么,并要求他們確認(rèn)



45.不要在下拉列表中隱藏重要的操作

用戶需要采取的基本操作(例如,注冊(cè)或登錄)隱藏在下拉列表中,甚至可能找到用戶想要的。

解決:將重要的功能提出來,不要隱藏


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

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


文章來源:站酷   作者:木七木七

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ì)驅(qū)動(dòng)產(chǎn)品的增長(zhǎng)設(shè)計(jì)

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

在《增長(zhǎng)黑客》中有這樣一句話“If you are not growing,then you are dying!”(如果企業(yè)不在增長(zhǎng),那么就在衰亡?。?,這話也適用于個(gè)人。人生畢竟不像企業(yè),是非成敗,似乎都無可厚非,所以我們常常放飛自我偏離軌道,以至于有時(shí)候不得不提醒自己“不在成長(zhǎng),就在消亡”。我們來人間一趟,有沒有全力以赴想要成全的事?可以反復(fù)嘗試、不斷接近嗎?所以,我認(rèn)為,增長(zhǎng)它是一個(gè)永恒的話題,我們?cè)趯W(xué)生時(shí)代讀書的時(shí)候希望自己的分?jǐn)?shù)與排名能增長(zhǎng),在企業(yè)上班工作的時(shí)候,我們希望我們的收入能增長(zhǎng),當(dāng)我們創(chuàng)業(yè)的時(shí)候,我們希望自己企業(yè)的業(yè)績(jī)能增長(zhǎng),增長(zhǎng)是長(zhǎng)期伴隨著我們生活的一個(gè)指數(shù)。

《在大數(shù)據(jù)時(shí)代》一書中提出了“量化一切”的概念,即一切都可以用數(shù)據(jù)來衡量。其實(shí),在“數(shù)字敏感”的互聯(lián)網(wǎng)時(shí)代,電商平臺(tái)“銷量”、電影票房、百大up主、文章閱讀10w+等等,我們其實(shí)早已在不知不覺中用數(shù)據(jù)丈量著一切。

增長(zhǎng)設(shè)計(jì)這個(gè)概念好像是最近幾年才廣為互聯(lián)網(wǎng)從業(yè)人員才熟知,成為每個(gè)互聯(lián)網(wǎng)er所討論的熱門話題,因?yàn)樵谶^去的十多年,是中國經(jīng)濟(jì)數(shù)字化騰飛發(fā)展的十年,我們90后更是親身見證著互聯(lián)網(wǎng)企業(yè)的成長(zhǎng),“眼見他起高樓,眼見他宴賓客,眼見他樓塌了”。

我們關(guān)于用戶增長(zhǎng)也是在不斷的迭代的,從最早期的雛形AIDA法則,由路易斯提出推銷模式,西方推銷學(xué)中一個(gè)重要的公式,AIDA法則也稱“愛達(dá)”公式,然后到2007年的facebook,提出這個(gè)概念,即,我們知道我們的廣告費(fèi)是浪費(fèi)掉了,但是我不知道是哪一半,于是,精于廣告投放的facebook便通過科學(xué)的,可復(fù)制性,可以被檢測(cè)的廣告投放可以幫助于其他企業(yè)做好用戶增長(zhǎng),然后便是我們知道后期比較流行的AARRR海盜模型這樣更加精細(xì)的用戶增長(zhǎng)策略.


2.1 關(guān)于增長(zhǎng)設(shè)計(jì)


在近幾年我們經(jīng)歷了從互聯(lián)網(wǎng)市場(chǎng)在基本火熱到冷靜,尤其是隨著移動(dòng)互聯(lián)網(wǎng)的流量紅利開始消失,“增長(zhǎng)黑客”與“用戶增長(zhǎng)”這兩個(gè)概念開始慢慢火爆開來,我們國內(nèi)互聯(lián)網(wǎng)企業(yè)互聯(lián)網(wǎng)從業(yè)人員也開始重視用戶增長(zhǎng)。

企業(yè)的增長(zhǎng),也可以理解為企業(yè)的成長(zhǎng),所以企業(yè)能否保持增長(zhǎng),是老板和員工都比較關(guān)心的一件事,因?yàn)槠髽I(yè)只有保持一定幅度的增長(zhǎng),才能保證大家在未來繼續(xù)過上好日子。以前傳統(tǒng)企業(yè)做增長(zhǎng)可能就是通過贊助冠名一個(gè)很火的電視欄目,或者請(qǐng)個(gè)明星作為企業(yè)產(chǎn)品代言人,都可以在一定時(shí)期內(nèi)來吸引消費(fèi)者的關(guān)注,實(shí)現(xiàn)快速增長(zhǎng)。但是這幾年我們可能也發(fā)現(xiàn)了,傳統(tǒng)意義上的營(yíng)銷手段似乎不太管用了。因?yàn)橐郧拔覀儚脑陔娨暫蛡鹘y(tǒng)紙媒上獲取信息的用戶都慢慢轉(zhuǎn)移到朋友圈、B站、抖音等互聯(lián)網(wǎng)頭部平臺(tái),過去的傳統(tǒng)營(yíng)銷三板斧來拉動(dòng)企業(yè)業(yè)績(jī)的增長(zhǎng),已經(jīng)變得越來越難。

所以我們發(fā)現(xiàn),在2017 年可口可樂宣布取消 CMO(首席營(yíng)銷官),由 CGO(首席增長(zhǎng)官)替代,以增長(zhǎng)為中心的各個(gè)職位在招聘網(wǎng)站上也如雨后春筍一般涌出。

看到這里,這些好像和我們從事Ui視覺工作的好像關(guān)系并不是很大,而恰恰相反,我認(rèn)為用戶增長(zhǎng)設(shè)計(jì)并不是一套虛無縹緲的說辭,而是一種能夠與團(tuán)隊(duì)協(xié)助的工作形式,在一個(gè)產(chǎn)品團(tuán)隊(duì)中,我們每一個(gè)人都應(yīng)該了解一些關(guān)于用戶增長(zhǎng)設(shè)計(jì)方面的知識(shí)。

我們所知道的產(chǎn)品是為用戶在服務(wù),是為了滿足用戶的實(shí)際的需求,所以我們所理解的增長(zhǎng)設(shè)計(jì)便是產(chǎn)品創(chuàng)造了價(jià)值,而增長(zhǎng)設(shè)計(jì)是將產(chǎn)品的價(jià)值放大傳遞,讓更多的人去發(fā)現(xiàn)。


2.20 關(guān)于以用戶為中心的增長(zhǎng)設(shè)計(jì)


而我們體驗(yàn)設(shè)計(jì)師更多關(guān)注在做產(chǎn)品增長(zhǎng)設(shè)計(jì)的時(shí)候盡可能的不去傷害到用戶,以同理心去思考做增長(zhǎng)設(shè)計(jì)的策略。這個(gè)我們會(huì)稱為用戶增長(zhǎng)設(shè)計(jì)(User Growth Design),即簡(jiǎn)稱UGD,簡(jiǎn)單的理解為用戶增長(zhǎng)設(shè)計(jì)要以用戶為中心,以用戶的角度和思維方式去想問題,去做用戶的增長(zhǎng)。

讓產(chǎn)品簡(jiǎn)單到“傻瓜”也能操作,是喬布斯和張小龍做產(chǎn)品的核心理念。坐擁10億用戶的微信之父張小龍說過,產(chǎn)品經(jīng)理要有傻瓜心態(tài)?!拔乙?jīng)過5~10分鐘的醞釀才能達(dá)到傻瓜狀態(tài),馬化騰需要1分鐘,功力最深的是喬布斯,傳說他能在專家和傻瓜之間隨意切換,來去自如,即所謂的Stayfoolish?!?

當(dāng)然,此傻瓜不是彼傻瓜,而是一種跳出當(dāng)下局限的外行心態(tài),是站在普通用戶的角度是操作、帶有同理心去思考產(chǎn)品,這樣才會(huì)更容易發(fā)現(xiàn)產(chǎn)品本質(zhì)上的問題和抓住真痛點(diǎn),找到影響用戶增長(zhǎng)的關(guān)鍵因素。

2.30 設(shè)計(jì)師該如何去做設(shè)計(jì)增長(zhǎng)


我們?cè)O(shè)計(jì)師要想所做的用戶增長(zhǎng)肯定不是去街上發(fā)個(gè)小廣告,去地鐵上拿著產(chǎn)品的下載二維碼讓用戶去下載我們的產(chǎn)品,我們?cè)O(shè)計(jì)師著手的設(shè)計(jì)增長(zhǎng)范圍還是從用戶體驗(yàn)去入手的,所以我們?cè)诳紤]提升產(chǎn)品數(shù)據(jù)的時(shí)候也需要考慮用戶的使用體驗(yàn),例如,公司現(xiàn)在想要提升產(chǎn)品的成交額,我們?cè)O(shè)計(jì)師肯定不會(huì)提出的方案肯定不會(huì)是讓公司去請(qǐng)個(gè)明星代言來吸引用戶下單之類的,我們?cè)O(shè)計(jì)事所要思考的是如何提升用戶在下單過程中的流暢感,如何縮短路徑,讓用戶能方便成交,所以我們?cè)O(shè)計(jì)師的增長(zhǎng)觀一定是在產(chǎn)品現(xiàn)有的基礎(chǔ)上,提升用戶的體驗(yàn),盡量讓用戶有良好的體驗(yàn)下來提升用戶的數(shù)據(jù)增長(zhǎng)。


2.40 什么樣的產(chǎn)品適合做增長(zhǎng)設(shè)計(jì)


那我們產(chǎn)品都是來自五花八門的類目,那什么樣的產(chǎn)品適合做增長(zhǎng)或者以什么樣的形式做增長(zhǎng)合適呢?在增長(zhǎng)設(shè)計(jì)概念最火熱的幾年,我聽過這樣的一個(gè)有趣的故事,一個(gè)做服務(wù)于醫(yī)療聚合類的設(shè)計(jì)同學(xué)去給面試官講他們這個(gè)產(chǎn)品的怎么做用戶增長(zhǎng)的,其中講到他們通過如何通過增長(zhǎng)策略去拉動(dòng)用戶增長(zhǎng),如何留住用戶,面試官聽完,反問了一句,那們這個(gè)增長(zhǎng)設(shè)計(jì)的策略是通過給城市投病毒導(dǎo)致那么多人生病的嗎?

所以,世間萬物的增長(zhǎng)都需要條件,用戶的增長(zhǎng)需要內(nèi)在的動(dòng)力,不能浮于表面,需要認(rèn)清內(nèi)在動(dòng)力這樣才能有助我們找到增長(zhǎng)的關(guān)鍵因素,從而合理有針對(duì)性的部署資源和策略。


(1)C端產(chǎn)品如何做增長(zhǎng)設(shè)計(jì)


C 端的產(chǎn)品,一般是個(gè)人消費(fèi)場(chǎng)景,單一決策購買,所以我們需要給用戶持續(xù)使用產(chǎn)品的動(dòng)力,即產(chǎn)品可以持續(xù)給用戶提供其他產(chǎn)品無法提供的價(jià)值。用戶在使用產(chǎn)品獲得價(jià)值提升,例如獲得友情、愉快、知識(shí)、優(yōu)惠、收入等等,用戶才會(huì)繼續(xù)使用,甚至?xí)o身邊的好友去推薦。

例如我們的國民軟件微信,拉進(jìn)了人與人之間的距離,帶來了免費(fèi)通話和朋友圈和這個(gè)門檻最低的社交網(wǎng)絡(luò),我們可以通過朋友圈去展示和表達(dá),我們微信上的各種”相親相愛的一家人“”多少級(jí)的同學(xué)“群成為我們?nèi)ゾS系友情親情的寶地,現(xiàn)在我們通過掃一掃便可以完成生活中很多事情,都為用戶提供了極大的便利,微信獨(dú)有的社交屬性促成了巨大的網(wǎng)狀人際關(guān)系,讓用戶自發(fā)的去加入,并難以離開。在2020年3月底QuestMobile提供的數(shù)據(jù)來看,微信活躍用戶180日留存率為95.5%,位于常用APP用戶留存率排行的首位,擁有如此高的用戶長(zhǎng)期留存,可見微信為用戶提供的價(jià)值之大。

所以C端的產(chǎn)品只有能為用戶提供價(jià)值,用戶才會(huì)選擇留下,甚至?xí)鲃?dòng)傳播為產(chǎn)品帶來更多有價(jià)值的用戶,這才是最理想的、良性的用戶增長(zhǎng)。


(2)B端產(chǎn)品如何做增長(zhǎng)設(shè)計(jì)


B端的產(chǎn)品和C端的產(chǎn)品不同,B端的產(chǎn)品往往是做決策的過程比較復(fù)雜,往往能決定購買的人并不是產(chǎn)品的使用者,他們只是負(fù)責(zé)采購的,另外有的采購量比較大的企業(yè)往往和銷售的人脈關(guān)系掛鉤,

但是阿里的團(tuán)隊(duì)通過不斷的深耕B端的市場(chǎng)發(fā)現(xiàn),雖然 To B 增長(zhǎng)很難,但在中小企業(yè)的增長(zhǎng)很有機(jī)會(huì)。一般的中小企業(yè),使用的人數(shù)不是特別多,一般都是5人以內(nèi)的使用者,這類企業(yè)能決定購買和使用者是同一類的人,所以它會(huì)與我們C端的購買決策的路徑比較相似。另外中小企業(yè)的數(shù)量也是比較多,所以這塊的市場(chǎng)還是有挖掘空間的。


2.50 什么是用戶的增長(zhǎng)設(shè)計(jì)


用戶增長(zhǎng)設(shè)計(jì)設(shè)計(jì)其實(shí)就是從吸引新用戶的注意力到產(chǎn)品能給用戶一些價(jià)值最后用戶認(rèn)可我們產(chǎn)品的過程,這是一個(gè)從短期流量到長(zhǎng)效流量轉(zhuǎn)化的過程,


(1)用戶的吸引力(獲客)


我們一般獲取用戶的方式最直接便是去投放廣或者軟文推廣,用戶通過點(diǎn)擊下載APP來訪問我們的產(chǎn)品界面,在我們的產(chǎn)品中尋找自己想要的信息,一直周而復(fù)始,直到找到自己想要的信息,反正,產(chǎn)品的內(nèi)容沒能吸引用戶,這時(shí)候,用戶便會(huì)退出產(chǎn)品,也就是用戶的流失。


在這個(gè)過程中,一直圍繞著三個(gè)比較關(guān)鍵的因素“使用者(人)”、“使用場(chǎng)景”、“用戶行為”,我們需要明確用戶的使用路徑中,產(chǎn)生行為的原因和流失的因素。


(2)用戶的注意力(激活)


我們?cè)谠O(shè)計(jì)中怎么通過設(shè)計(jì)策略去避免用戶的流失呢?我們需要去引導(dǎo)用戶的注意力,讓用戶在使用過程中對(duì)我們產(chǎn)品有認(rèn)可,都可以有效的去避免用戶的流失,


·如何引導(dǎo)用戶的注意力


我們?cè)趺慈ズ饬课覀兊漠a(chǎn)品是否吸引了用戶的注意力呢?根據(jù)Alibaba Design Ucan 2020所提出的一個(gè)公式。用戶的注意力=心理需求*視線所及,用戶的注意力是用戶的心里所想和目標(biāo)所看到的交匯,當(dāng)產(chǎn)品給用戶看到的信息是用戶想要的東西的時(shí)候,這時(shí)候,用戶便會(huì)點(diǎn)擊進(jìn)入,所以通常曝光率則可以驗(yàn)證用戶在產(chǎn)品使用中的注意力。


例如,我們?cè)跒g覽商品的時(shí)候,我們的目標(biāo)首先關(guān)注的商品的品牌然后是名稱和價(jià)格,我們用戶心里想的可能是哪個(gè)品牌會(huì)比較可靠,哪個(gè)的價(jià)值比較低,有沒有我常用的品牌,視線所及便是我們展現(xiàn)給用戶的列表,當(dāng)用戶看到某品牌有我喜歡的明星的代言或者喜歡明星的同款,這便是用戶所想的。當(dāng)滿足這些前置條件,用戶便會(huì)產(chǎn)生點(diǎn)擊行為。


·如何引導(dǎo)用戶認(rèn)同我們的產(chǎn)品


我們想要用戶去認(rèn)可我們產(chǎn)品的價(jià)值,我們需要了解用戶,了解用戶可以從三個(gè)關(guān)鍵因素去入手,1.用戶群體,2.認(rèn)同目標(biāo),3.說服用戶



例如當(dāng)新用戶進(jìn)去拼多多后,界面會(huì)彈出新人的專享紅包,引導(dǎo)新人用戶的點(diǎn)擊,下一個(gè)頁面便是彈出手氣最佳的紅包,最后展示頁面出現(xiàn)現(xiàn)在限時(shí)下單全額度返利的banner,每一個(gè)頁面的場(chǎng)景關(guān)聯(lián)度極強(qiáng)。一步一步的去說服用戶去下單、有效的提升用戶點(diǎn)擊率。從而提升新用戶的首次下單的增長(zhǎng)。


(3)用戶的安全感(留存)


張小龍?jiān)岢鲆粋€(gè)產(chǎn)品觀叫“用完即走”,與我們常常提到的“留存”“粘性”的原則是背道而馳的,其實(shí)我理解的用完即走便是產(chǎn)品其實(shí)不想讓用戶離開,我們的產(chǎn)品能給用戶一個(gè)確定性的答案,無論是在產(chǎn)品的易用性還是在產(chǎn)品體驗(yàn)層面,都可以保持高效,讓用戶在使用過程中有愉悅感,讓用戶遷移成本提升,便是用完即走后的戀戀不忘、

例如早期的打車軟件和團(tuán)購軟件,那時(shí)候用戶在網(wǎng)上打車和線上支付習(xí)慣還沒養(yǎng)成,對(duì)產(chǎn)品的模式的認(rèn)同度還不夠,所以,那時(shí)候打車軟件和團(tuán)購軟件給予人的確定的心理印象便是,你在我這里支付購買會(huì)便宜。培養(yǎng)用戶的使用習(xí)慣,給用戶一個(gè)用了該軟件確實(shí)會(huì)便宜的心理安全感,從而實(shí)現(xiàn)了用戶的留存。

我們平時(shí)準(zhǔn)備出門或者去一些陌生的地方,我們都會(huì)使用高德地圖或者百度地圖看下路上是否堵車,我們這次出行走哪條路需要用時(shí)多久,以方便我們?nèi)ミx擇合適自己的出行方式。

我們?cè)O(shè)計(jì)師在做設(shè)計(jì)的時(shí)候也是一樣的,我們通過之前的數(shù)據(jù),也可以分析出產(chǎn)品一些不一樣的改版點(diǎn),我們能把一些抽象的問題具體化,能更好的去度量我們的設(shè)計(jì),所以設(shè)計(jì)師在學(xué)習(xí)如何增長(zhǎng)設(shè)計(jì)前,我們需要了解一些關(guān)于產(chǎn)品的數(shù)據(jù)知識(shí),我們分析一款產(chǎn)品的時(shí)候,通過比較關(guān)注的點(diǎn)是用戶、需求和數(shù)據(jù)。

當(dāng)我們的產(chǎn)品上線或者上新某一個(gè)功能的時(shí)候,往往用戶的意見反饋代表的是個(gè)體的聲音,而數(shù)據(jù)是用戶對(duì)于產(chǎn)品的客觀反饋,數(shù)據(jù)的變化能代表用戶對(duì)產(chǎn)品的態(tài)度,所以,設(shè)計(jì)師要是能讀一些數(shù)據(jù)報(bào)表,那么我們可以從體驗(yàn)設(shè)計(jì)師角度去給產(chǎn)品迭代的時(shí)候能提出不一樣的觀點(diǎn),輔助我們所服務(wù)企業(yè)的app的成長(zhǎng)。


3.10 數(shù)據(jù)是如何產(chǎn)生的


數(shù)據(jù)如如何產(chǎn)生的,比較深的知識(shí)是不需要我們?nèi)ド钔诘?,我們?nèi)粘=佑|到數(shù)據(jù)反饋都是來自產(chǎn)品的“埋點(diǎn)”,而埋點(diǎn)數(shù)據(jù)的獲取通常通過第三方的工具進(jìn)行獲取,比較常見的數(shù)據(jù)分析企業(yè)有友盟、七麥、GrowingIO等,這些工具可以在我們想要的頁面或者功能按鈕上添加監(jiān)聽功能,當(dāng)條件被滿足的時(shí)候,便會(huì)完成一次數(shù)據(jù)的統(tǒng)計(jì),埋點(diǎn)需要提供兩個(gè)關(guān)鍵的信息:一是需要埋點(diǎn)的內(nèi)容,二是埋點(diǎn)的名稱,這可以方便我們以后快速的找到相關(guān)的數(shù)據(jù),當(dāng)埋點(diǎn)完成后,產(chǎn)品上線就會(huì)檢測(cè)用戶的行為動(dòng)作,當(dāng)用戶進(jìn)入我們的“埋點(diǎn)"界面或者功能的時(shí)候,后臺(tái)系統(tǒng)就會(huì)上報(bào)數(shù)據(jù),我們就會(huì)收到數(shù)據(jù)反饋,但是在現(xiàn)實(shí)工作的場(chǎng)景可能比這個(gè)要復(fù)雜的多,我們可以根據(jù)具體的場(chǎng)景在靈活應(yīng)變。

3.20 設(shè)計(jì)師為什么要了解數(shù)據(jù)


我們對(duì)一款的產(chǎn)品的優(yōu)化可能有很多層面的思考,但是我們?nèi)?duì)用戶數(shù)據(jù)的分析則是對(duì)當(dāng)前產(chǎn)品最有價(jià)值的參考點(diǎn),數(shù)據(jù)的采集與分析無論是對(duì)產(chǎn)品的規(guī)劃還是對(duì)設(shè)計(jì)師下一步的工作開展都是比較重要的指標(biāo),因?yàn)橛脩艨赡軙?huì)因?yàn)橐恍┛陀^的原因可能不會(huì)說出自己內(nèi)心的真心話。

例如我們?nèi)ッ嬖嚨臅r(shí)候,在一番精心的準(zhǔn)備和問答之后,我們?cè)诿嬖嚱Y(jié)束之后,如果去問面試官“您覺得我這樣面試表現(xiàn)怎樣”,有的面試官可能會(huì)就你這次的變現(xiàn)去做出比較切合實(shí)際的點(diǎn)評(píng)或者建議,但是有可能你那場(chǎng)面試因?yàn)橥獠康脑驎?huì)失常發(fā)揮,但有的面試官可能會(huì)照顧你的面子,可能會(huì)說表現(xiàn)的還可以之類的話來安慰你,但是面試官最后會(huì)不會(huì)錄用你這點(diǎn)他肯定不會(huì)作假,所以有時(shí)候我們?cè)诜治鲇脩粜袨榧安僮髀窂降臅r(shí)候,一些用戶的數(shù)據(jù)表現(xiàn)便是我們對(duì)產(chǎn)品優(yōu)化的關(guān)鍵因素。

我們通常將數(shù)據(jù)的指標(biāo)分為三大類:1.用戶相關(guān)指標(biāo)、2.用戶行為指標(biāo)、3.業(yè)務(wù)數(shù)據(jù)指標(biāo)



3.30 用戶相關(guān)指標(biāo)


我們常見的與用戶相關(guān)的指數(shù)有像DAU、MAU、新增人數(shù)等,我們需要了解的數(shù)據(jù)為1.用戶的活躍指數(shù),2.用戶的留存率,3.人均使用時(shí)長(zhǎng)。

3.31 用戶的活躍指數(shù)


在互聯(lián)網(wǎng)行業(yè)里,通常我們會(huì)通過拉新把客戶引過來,但是經(jīng)過一段時(shí)間可能就會(huì)有一部分客戶逐漸流失了。那些留下來的人或者是經(jīng)常回訪我們公司網(wǎng)站 / App 的人就稱為留存。

在一段時(shí)間內(nèi),對(duì)某個(gè)網(wǎng)站 / App 等有過任意行為的用戶,稱之為這個(gè)網(wǎng)站 / App 這段時(shí)間的活躍用戶,這個(gè)任意行為可以是訪問網(wǎng)站、打開 App 等等。

我們常見的用戶指標(biāo)有「日活」 即日活躍用戶量,縮寫為DAU,,縮「周活」 即周活躍用戶量,縮寫為WAU,「月活」 即月活躍用戶量,縮寫為MAU。


3.32 用戶的留存率


留存率是最能反映一個(gè)產(chǎn)品是否對(duì)用戶有吸引力的指標(biāo),一般的留存率是基于某個(gè)時(shí)間段而得出的結(jié)論,例如我們常常聽說的次日留存和七日留存率。

次日的留存率計(jì)算公式為:當(dāng)天拉新的用戶中,次日留存率=在注冊(cè)的第二天繼續(xù)登錄/第一天拉新用戶的總數(shù)量

七日留存率的計(jì)算公式為:在第一天拉進(jìn)的用戶中,七日留存率=在注冊(cè)七天后還有登錄的用戶數(shù)/第一天拉新的用戶總數(shù)。




3.33 人均使用時(shí)長(zhǎng)


人均使用時(shí)長(zhǎng)通常是對(duì)內(nèi)容和游戲類的參考價(jià)值的很大,它可衡量我們產(chǎn)品是否做的比較優(yōu)秀,能不能留住用戶的注意力。如果我們做的是工具類的產(chǎn)品,例如計(jì)算機(jī)之類的,這個(gè)時(shí)候的人均使用比較長(zhǎng),說明我們的產(chǎn)品可能出現(xiàn)了問題,無法讓用戶在短時(shí)間內(nèi)得到他想要結(jié)果。

人均使用時(shí)長(zhǎng)的計(jì)算公式為:人均使用時(shí)長(zhǎng)= 總活躍時(shí)長(zhǎng) /總活躍用戶數(shù)。


3.40 用戶行為指標(biāo)


用戶行為相關(guān)常見的指數(shù)有用戶的頁面訪問量率、轉(zhuǎn)化率等指標(biāo)。



3.41 頁面訪問量率


我們對(duì)頁面的訪問流量的定義分為兩種,一種是PV(page View)即頁面瀏覽量,另外一UV(UniqueVisitor):獨(dú)立訪客數(shù)。

PV(page View)也就是頁面瀏覽量,即你每觀看一次就會(huì)漲一個(gè)PV,類似于B站的播放量,我們每個(gè)賬戶只要點(diǎn)開觀看一次視頻,播放量就會(huì)增長(zhǎng)一次,關(guān)閉在打開,也會(huì)在增長(zhǎng)一次,所以我們每播放一次,便會(huì)漲一個(gè)PV值。

UV(UniqueVisitor):也就是獨(dú)立訪客數(shù),類似于騰訊視頻和優(yōu)酷的播放量,每個(gè)賬戶點(diǎn)進(jìn)去播放只會(huì)增長(zhǎng)一個(gè)播放量,你再關(guān)閉再點(diǎn)進(jìn)去也只漲一個(gè)VU值。在正常情況下是依靠瀏覽器的cookies來確定訪客是否為獨(dú)立訪客之前是否訪問過該頁面。


(1) UV的類別


在統(tǒng)計(jì)數(shù)據(jù)的過程中, 我們會(huì)將不同的點(diǎn)擊率來劃分,從而更好的可以來統(tǒng)計(jì)數(shù)據(jù)來分析。我們將UV分為:1.

曝光UV ,2.點(diǎn)擊UV , 3.意向UV。



·曝光UV


曝光UV即曝光在視野內(nèi)的用戶數(shù),例如我們?cè)诰〇|或者天貓去搜索某個(gè)產(chǎn)品進(jìn)入了搜索的feed列表頁的時(shí)候,當(dāng)我在當(dāng)前的列表停留2-3秒的時(shí)候,都可以算一次曝光UV。


·點(diǎn)擊UV


點(diǎn)擊UV即有點(diǎn)擊行為的用戶數(shù),例如我們?cè)诰〇|或者天貓去搜索某個(gè)產(chǎn)品進(jìn)入了搜索的feed列表頁的時(shí)候,我點(diǎn)擊某個(gè)商品進(jìn)去了詳情頁,那么就可以算一個(gè)有效的點(diǎn)擊UV。


·意向UV


意向UV即進(jìn)入意向頁面的用戶數(shù),例如我現(xiàn)在想去買一個(gè)Macbookpro, 我在B站看完關(guān)于Macbookpro,的評(píng)測(cè)視頻,在百度看完Macbookpro的參數(shù)后,我在去天貓和京東去搜索進(jìn)行比價(jià)的時(shí)候這個(gè)時(shí)候我就屬于意向UV,在舉個(gè)我們比價(jià)常見的例子,當(dāng)我們?cè)诎俣人阉鲗汃R的時(shí)候,排在前面的經(jīng)常是各種五花八門的關(guān)于車的廣告,在百度看來,我們便是想去買車的意向UV,是有機(jī)會(huì)促成交易的。

所以我們看用戶對(duì)我們的產(chǎn)品或者活動(dòng)是否感興趣,便可以看看PV和VU的數(shù)據(jù)如何。

3.42 頁面的轉(zhuǎn)化率


頁面的轉(zhuǎn)化率是任何一個(gè)企業(yè)都比較關(guān)心的數(shù)據(jù)為,我們的任何運(yùn)營(yíng)活動(dòng)和產(chǎn)品的推廣都是為了轉(zhuǎn)化用戶的時(shí)間或者金錢,我們費(fèi)盡心思的用戶點(diǎn)擊進(jìn)來,也都是為了轉(zhuǎn)化用戶的購買。

用戶的注冊(cè)、下單、登錄和復(fù)購都可以用轉(zhuǎn)化率來進(jìn)行量化,我們根據(jù)產(chǎn)品不同的情況來制定轉(zhuǎn)化率的指標(biāo)。通常我們計(jì)算轉(zhuǎn)化率:產(chǎn)生購買行為的戶人數(shù)/總的用戶訪客* 100%。例如我們這個(gè)頁面訪問人數(shù)是1000,接下來有100人進(jìn)行了購買的行動(dòng),那么我們頁面轉(zhuǎn)化率為:100/1000*100%=10%的轉(zhuǎn)化率。


(1)意向用戶轉(zhuǎn)化率


意向用戶轉(zhuǎn)化率,即意向Intention Click Value Rate,簡(jiǎn)稱意向UV CVR,是通過直觀科學(xué)的角度去評(píng)判需求是否達(dá)到了預(yù)期的效果,意向用戶轉(zhuǎn)化率一般用來衡量用戶訪購行為,是可以通過該指數(shù)去發(fā)現(xiàn)問題中隱藏的核心問題的依據(jù),非意向UV的轉(zhuǎn)化流失有很多不確定因素,而意向UV的流失往往跟產(chǎn)品體驗(yàn)有更大關(guān)聯(lián)性,通常計(jì)算的方法為:產(chǎn)生購買行為的客戶人數(shù)/所有到達(dá)店鋪的意向訪人數(shù)* 100%。

例如像民宿和酒店類的APP的核心轉(zhuǎn)化率是客房的預(yù)定量,像B站和西瓜的核心轉(zhuǎn)換率則是用戶評(píng)論和點(diǎn)贊。


3.43  頁面的點(diǎn)擊率與意向率


通常我們?cè)谄毓釻V和點(diǎn)擊UV直接會(huì)有一個(gè)點(diǎn)擊率的關(guān)系,Click-thougphRate,簡(jiǎn)寫為CTR,即點(diǎn)擊數(shù)占展示次數(shù)的百分比,通常的計(jì)算形式為,點(diǎn)擊率=點(diǎn)擊次數(shù)/頁面訪問次數(shù),

在曝光UV與意向UV之前也有一個(gè)比例關(guān)系,叫意向率,即意向UV占曝光UV的比例關(guān)系,通常用以衡量運(yùn)營(yíng)活動(dòng)或者功能的導(dǎo)流能力,主要用來看用戶的質(zhì)量,通常的計(jì)算方式是意向率=意向UV/占曝光UV。

3.43 跳出率


跳出率是在設(shè)計(jì)用的比較少的一個(gè)數(shù)據(jù),一般是運(yùn)營(yíng)人員會(huì)關(guān)心的數(shù)據(jù)指標(biāo)。指的是用戶通過搜索點(diǎn)擊進(jìn)入該商品的詳情頁,只是簡(jiǎn)單的瀏覽一遍就關(guān)掉了頁面,在該頁面沒有任何的活動(dòng)行為我們稱之為一次跳出行為。

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


3.50 業(yè)務(wù)數(shù)據(jù)指標(biāo)


我們對(duì)業(yè)務(wù)的數(shù)據(jù)指標(biāo)可以將他們分為兩類:一是免費(fèi)供用戶使用的產(chǎn)品,例如微信、B站等產(chǎn)品,我們更多的關(guān)注用戶的使用時(shí)長(zhǎng)和停留時(shí)長(zhǎng)。二是需要用戶有購買行為產(chǎn)品,例如淘寶、拼多多和京東之類的,這里的產(chǎn)品我們更多關(guān)注的是產(chǎn)品的GMV和ARPU等指數(shù)。



3.51 GMV


Gross merchandise Volume,簡(jiǎn)稱為GMV,指標(biāo)通常稱為網(wǎng)站成交金額,屬于電商平臺(tái)企業(yè)成交類指標(biāo),主要指拍下訂單的總金額,包含付款和未付款兩部分。

GMV反映的是電商平臺(tái)直觀的成績(jī),但在電商行業(yè),GMV包括拍下未支付的訂單金額,GMV=銷售額+取消訂單金額+拒收訂單金額+退貨訂單金額,

3.52 ARPU


ARPU是 “The average revenue per user” 的縮寫,譯為每用戶平均收入或平均每用戶收入。也可以理解為單個(gè)用戶的價(jià)值。

通常的ARPU用來反映這個(gè)產(chǎn)品在這段時(shí)間內(nèi)從單個(gè)用戶獲得的利潤(rùn)和收益,通常用來計(jì)算用戶生命周期價(jià)值的作用:它是 App 成功的指標(biāo),是用戶忠誠度的反應(yīng),是預(yù)測(cè)用戶增長(zhǎng)的工具。簡(jiǎn)單來說,用戶生命周期價(jià)值是驅(qū)動(dòng)移動(dòng)市場(chǎng)預(yù)算的動(dòng)力。它會(huì)告訴你每個(gè)用戶值多少錢;你應(yīng)該花多少成本去獲取一個(gè)用戶。

ARPU的計(jì)算公式為:ARPU=在指定時(shí)期總收入/指定時(shí)期的付費(fèi)用戶的總數(shù)*100%。

3.53 付費(fèi)率


付費(fèi)率是用來衡量用戶轉(zhuǎn)化行為的指標(biāo),通常所有用戶和付費(fèi)用戶之間的一個(gè)轉(zhuǎn)化比率。我們前面說到的ARPU值是付費(fèi)用戶的人數(shù)來計(jì)算的,我們通常會(huì)把付費(fèi)率和ARPU值放在一起分析。一般該產(chǎn)品的付費(fèi)率越高,這說明用戶對(duì)該產(chǎn)品的認(rèn)可度越高。

我們的產(chǎn)品每個(gè)階段的增長(zhǎng)指標(biāo)在不同階段會(huì)有不同的定義。每個(gè)時(shí)期所需要注意的事項(xiàng)也是不一樣的,我們對(duì)基礎(chǔ)的數(shù)據(jù)有了認(rèn)識(shí)和了解之后,我們更重要的事情就是怎么去實(shí)踐在我們自己的產(chǎn)品中。


4.10 提升列表CTR的設(shè)計(jì)策略


我們產(chǎn)品中很多時(shí)候,我們的設(shè)計(jì)做的是否合理,我們的商品類別該怎么去排序,都和CTR的數(shù)據(jù)去掛鉤,產(chǎn)品中的很多核心的數(shù)據(jù)也需要CTR等基礎(chǔ)數(shù)據(jù)去做支撐,那么我們一起來復(fù)盤下提升列表的CTR策略點(diǎn):1.增加影響用戶決策的信息,2.梳理列表的信息層級(jí),3.新增適當(dāng)?shù)慕换ィ?.標(biāo)題優(yōu)化(非設(shè)計(jì)角度)

4.11 增加影響用戶決策的信息


平時(shí)我們?cè)诠浣值臅r(shí)候一定會(huì)發(fā)現(xiàn)這樣的場(chǎng)景,當(dāng)一條街上開了很多店的時(shí)候,每個(gè)店鋪一定會(huì)派出自己店鋪長(zhǎng)相比較甜美的店員或者比較擅長(zhǎng)口播的店員在自己店前面進(jìn)行“吆喝”,比較小的店鋪就算人手不足也會(huì)用音箱去反復(fù)播放店內(nèi)的促銷信息,這些策略都是為了在眾多的店鋪中去吸引過往行人的注意力。

那么我們做設(shè)計(jì)也是一樣的原理,我們?cè)谠谧隽斜頃r(shí)候,想要提升用戶擊我們的列表進(jìn)入詳情頁的意愿,首先我們需要了解我們的用戶對(duì)什么樣的信息比較感興趣,我們將它整理并放出來,從而達(dá)到吸引用戶來點(diǎn)擊。


4.12 梳理列表的信息層級(jí)


我們平時(shí)去逛超市的時(shí)候,我們發(fā)現(xiàn)每個(gè)類目的貨架前都會(huì)擺放特價(jià)或者促銷力度比較的商品的合集,理貨員會(huì)將他們放在一起,這樣,對(duì)于價(jià)格敏感的會(huì)直接過去挑選。

我們?cè)谑崂砹斜淼男畔⒁彩且粯拥?,我們需要將用戶比較關(guān)注的信息或者產(chǎn)品的賣點(diǎn)信息層級(jí)抬高,減少用戶在挑選時(shí)候的跳出率。


4.13 新增適當(dāng)?shù)慕换?


我們想提升列表的點(diǎn)擊率也可以從另外一個(gè)角度是入口,就是想辦法讓用戶在最短時(shí)間內(nèi)可以看到更多的信息列表,讓質(zhì)變產(chǎn)生量變,這一點(diǎn)我們可以從改進(jìn)交互的操作入手,讓讓用戶看的比較多的列表交互。


(1)十字交互


因?yàn)檫@種形式的設(shè)計(jì)他占用的位置比較少,且只需用用戶通過手指左右去滑動(dòng),便可以查看更多的信息列表或者產(chǎn)品列表。

(2)隨機(jī)的列表


在交互層面另外一個(gè)可以讓用戶看的更多的設(shè)計(jì)形式便是點(diǎn)擊就換一批,這樣可以讓用戶感受到我每次點(diǎn)擊過后的詳情列表和產(chǎn)品列表都是不一樣的,這樣每一次點(diǎn)擊都會(huì)有新的“多巴胺”去刺激用戶再次去點(diǎn)擊“換一批”按鈕,從而達(dá)到讓用戶看到更多的列表,以質(zhì)變產(chǎn)生量變。

4.14 標(biāo)題優(yōu)化(非設(shè)計(jì)角度)


(1)美化標(biāo)題


我們經(jīng)常上網(wǎng)經(jīng)常瀏覽新聞的朋友一定知道有個(gè)詞叫做“標(biāo)題黨”,簡(jiǎn)單的來說就是標(biāo)題經(jīng)常以夸張、“故弄玄虛”的方式出現(xiàn),UC是眾多平臺(tái)中運(yùn)用標(biāo)題“最好的楷模”,所以網(wǎng)民也會(huì)親切的稱之“UC震驚部”,所以一個(gè)列表流的標(biāo)題對(duì)點(diǎn)擊量的影響也是比較大的。


(2)字符限制


另外一個(gè)角度就是當(dāng)標(biāo)題顯示不全的時(shí)候,用戶對(duì)信息傳遞無法感知的時(shí)候, 我們?nèi)≡俸玫臉?biāo)題也是沒用的,也許關(guān)鍵信息會(huì)被省略掉,所以我們?cè)谠O(shè)計(jì)標(biāo)題的時(shí)候,也可以限制標(biāo)題可輸入的字?jǐn)?shù),避免文字的縮略顯示,讓用戶可以完全看清標(biāo)題的意思,提升用戶的點(diǎn)擊欲望。


4.20 上新功能如何提升CTR


我們產(chǎn)品在上新一個(gè)新功能的時(shí)候,我i們?nèi)绾尾季帜苋プ層脩魪氖煜さ绞褂梦覀兊男鹿δ芏际切枰粋€(gè)過程的,我們需要慢慢的去引導(dǎo)用戶,我們可以從一下策略去去入手:1.替換用戶習(xí)慣的功能,2.把控出現(xiàn)時(shí)間,3.用動(dòng)態(tài)吸引注意力,4.合理劃分功能層級(jí).、

4.21 替換用戶習(xí)慣點(diǎn)擊的功能(按鈕)


我們每個(gè)都會(huì)有自己的習(xí)慣性的動(dòng)作,例如我們習(xí)慣左手寫字,右手拿筷子吃飯,我們每天回家習(xí)慣性的走同一條路,這些都是我們下意識(shí)的動(dòng)作,是不需要經(jīng)過思考的意識(shí),那我們?cè)谲浖氖褂弥?,也?huì)有這樣的習(xí)慣,例如,通常底Tap欄的圖標(biāo)第一個(gè)通常是首頁或者軟件的主要功能,而最后一個(gè)通常會(huì)放個(gè)人中心,這也是我們?cè)谲浖褂玫闹械墓沧R(shí),所以我們可以利用人下意識(shí)的習(xí)慣將常用的功能與新功能去替換,用戶便會(huì)在下意識(shí)的慣性中去點(diǎn)錯(cuò),例如網(wǎng)易云音樂為了推廣“云村”功能,便會(huì)將以前在最后一個(gè)的“我的”給替換成“云村,會(huì)導(dǎo)致很多用戶的下意識(shí)的動(dòng)作點(diǎn)錯(cuò)而提升新上的功能”云村“的點(diǎn)擊率。

4.22 把控出現(xiàn)時(shí)間


我們?cè)谙掳嗷丶业穆飞?,?dāng)我路過一些小吃攤的時(shí)候會(huì)覺得街邊的小吃特別想吃,也特別有購買的欲望,這是為什么呢?因?yàn)槲覀冊(cè)趧诶鄣墓ぷ髁?,下班的時(shí)間也正是需要吃飯的時(shí)候,所以這個(gè)時(shí)候我們會(huì)看到街邊攤的小吃特別想吃,也特別想買,因?yàn)樗麛[攤的時(shí)間點(diǎn)和位置都恰好滿足了我們的需求,所以我們轉(zhuǎn)換到界面里也是一樣的,我們想要用戶去分享一篇文章的時(shí)候,一定要等看用戶在讀的時(shí)候,然后在出現(xiàn)分享功能,這個(gè)時(shí)候如果用戶讀到比較精彩的內(nèi)容,便會(huì)和朋友分享這篇文章,例如用戶在進(jìn)入商品也可以瀏覽的時(shí)候,我們這個(gè)時(shí)候可以出現(xiàn)滿減的紅包,這都是在適當(dāng)?shù)臅r(shí)候給與用戶想要的,把控好了出現(xiàn)的時(shí)間。


4.23 用動(dòng)態(tài)吸引注意力


在一些靜態(tài)的元素中,突然有一個(gè)元素動(dòng)起來,那么,那個(gè)動(dòng)起來肯定是更吸引人的眼球的,所以我們?cè)陔娚痰捻撁骓撁嬷?,?huì)經(jīng)??吹揭恍?huì)動(dòng)的icon和一些會(huì)動(dòng)的膠囊導(dǎo)航,我能在付款頁面也可以看到一些立即付款的按鈕會(huì)忽大忽小的動(dòng)起來,這都是為了吸引我們的注意力,引起我們?nèi)リP(guān)注它的存在。


4.24 合理劃分功能層級(jí)


我們做設(shè)計(jì)排版的時(shí)候一定都聽說過這樣的一句話,就是你什么都想突出,結(jié)果你卻什么都沒有突出,這句話的意思是我們?cè)谧鲈O(shè)計(jì)的時(shí)候一定要注意運(yùn)用對(duì)比,將次要元素與主要功能的要做好主次的對(duì)比,這樣的層次對(duì)比才有利于用戶的閱讀,可以分清主次。

我們?cè)趗i設(shè)計(jì)中也是一樣的,要想用戶快速的找到想要的功能,高頻使用的功能和不常用的功能要做好強(qiáng)弱的設(shè)計(jì)區(qū)分,這樣才能讓用戶一眼能看到自己想找的功能,例如美團(tuán)和支付寶,都是將用戶高頻的操作放大并放置于頂部比較顯眼的位置,方便用戶去操作。


4.25 合理使用彈窗功能


我們都知道,彈窗在軟件中屬于級(jí)別最高的通知,就相當(dāng)于學(xué)校里面的校園廣告,只要打開軟件的人,基本都可以看到,所以我們想推廣一個(gè)新功能的時(shí)候,使用彈窗是流量比較大的,但是也是比較打擾用戶的,我們需要看情況而定。

4.30 提升人均使用時(shí)長(zhǎng)的策略


軟件的人均使用時(shí)長(zhǎng)代表用戶對(duì)我們?nèi)司浖P(guān)注度和我們給予用戶的價(jià)值,當(dāng)人均使用時(shí)長(zhǎng)在增長(zhǎng)的時(shí)候,說明我們的產(chǎn)品正在良性的增長(zhǎng),在提升人均使用時(shí)長(zhǎng)我們可以從以下幾個(gè)策略入手:1.讓用戶忘記時(shí)間,2.弱化用戶的負(fù)面情緒,3.多變的板式消除疲勞,4.激發(fā)用戶的好奇心



4.31 讓用戶忘記時(shí)間


我們放假在家打游戲的時(shí)候,總有這樣的感覺,就是打著打著不知不知的天就黑了,或者打著打著天就亮了,感覺時(shí)間過的非???,但是我們需要注意一個(gè)細(xì)節(jié)就是一般打游戲的時(shí)候,游戲是會(huì)將頂部的時(shí)間狀態(tài)給隱去的,是為了給用戶更好的沉浸式的體驗(yàn),正因?yàn)槲覀兛床坏綍r(shí)間,所以便會(huì)忘記這件事情,一局一局的打著游戲。例如早期的抖音,在進(jìn)去界面后變會(huì)隱藏時(shí)間條,讓用戶在刷抖音的過程中忽略時(shí)間,所以 ,我們想要提升人均使用時(shí)長(zhǎng),在一些娛樂性的產(chǎn)品或者模式下,可以嘗試著隱藏時(shí)間條,給予用戶更沉浸式的體驗(yàn),這樣用戶便會(huì)忽略時(shí)間這件事情。

4.32 弱化用戶的負(fù)面情緒


我們?cè)陲埖旮叻迤谌ゲ蛷d吃飯的時(shí)候,一般會(huì)遇到餐廳客滿需要排隊(duì)拿號(hào)的情況,海底撈的做法是給排隊(duì)的客戶免費(fèi)的小零食,外界對(duì)海底撈的服務(wù)評(píng)價(jià)可以用16個(gè)字來概括:有求必應(yīng),無微不至,噓寒問暖,小恩小惠,中國有古話是這樣說的“伸手不打笑臉人”,也許我們?cè)诰筒椭袝?huì)有各種不滿,但是海底撈都可以用他的服務(wù)去抵消客戶的負(fù)面情緒。所以,我們一般在餐廳催菜是時(shí)候,不管菜做沒有,服務(wù)員都會(huì)對(duì)我們說菜正在做,都是抵消我們等待中的負(fù)面情緒,讓客戶不會(huì)在等待的過程中離開或者退菜。

我們?cè)谧鼋缑嬷幸彩且粯拥牡览?,我們的APP在實(shí)際運(yùn)行過程中肯定也會(huì)遇到各式各樣異常問題,我們做設(shè)計(jì)的時(shí)候要為用戶提前給考慮進(jìn)去,為用戶提供貼心、無微不至的服務(wù)。例如我們用戶可能在使用過程中可能手機(jī)信號(hào)不好,有的頁面加載不出來,我們需要設(shè)計(jì)有趣的加載動(dòng)畫和頁面加載不出來的時(shí)候的占位符,告訴用戶我們的APP還是在正常的運(yùn)行中,不是宕機(jī)了。


4.33 多變的板式消除疲勞


我們都開車或者坐車經(jīng)過高速公路,我們會(huì)發(fā)現(xiàn)高速公路在一條直道后馬上會(huì)迎來一個(gè)彎道,我們小學(xué)的時(shí)候都學(xué)過,兩點(diǎn)之間直線最短,那么高速公路為了節(jié)省司機(jī)開車的時(shí)候,能否直接全部設(shè)計(jì)成直線的呢?答案是不可以,除了有些地方路線的規(guī)劃外,其次安全因素也很重要,經(jīng)科學(xué)家研究表明在筆直的公路長(zhǎng)期行駛很容易導(dǎo)致駕駛員發(fā)生事故,這是因?yàn)樵诠P直的高速上行駛,駕駛員的神經(jīng)長(zhǎng)時(shí)間處于放松狀態(tài),容易麻痹大意,如果適當(dāng)?shù)臅r(shí)候來個(gè)轉(zhuǎn)彎會(huì)提醒駕駛員注意力集中,減速行駛,從而減少事故發(fā)生率。其次從心理學(xué)角度來說,駕駛員一旦在筆直的高速上行駛,容易產(chǎn)生飆車行為,誰都會(huì)想猛踩油門來追逐刺激,如果適當(dāng)時(shí)候來個(gè)彎路,能夠抑制飆車行為的發(fā)生,從而減少故事發(fā)生率。

所以我們?cè)谠O(shè)計(jì)板式布局的時(shí)候,讓用戶盯著單一的布局形式,用戶很容易感覺到疲勞,從而會(huì)在頁面跳出。我們?yōu)榱吮苊膺@樣的情況發(fā)生,讓用戶在瀏覽過程中能感受到板式的變化,而不是滑到底都是一樣,單一且無趣,很容易疲勞,我們?cè)O(shè)計(jì)者需要在單一的板式尋求不一樣的解決方案。


4.34 激發(fā)用戶的好奇心


我們都比較喜歡看懸疑劇的一個(gè)重要的因素是因?yàn)榍楣?jié)一環(huán)扣一環(huán),線索和劇情結(jié)合的比較緊密,劇情比較扣人心弦,能激發(fā)我們對(duì)真相的探索欲,這才是我們喜歡追懸疑劇的原因之一。

所有,我們做設(shè)計(jì)時(shí)候也需要給予線索讓用戶去探索,讓用戶感受到內(nèi)容源的充沛,用戶才會(huì)興趣去向下探索,從而提升用戶的使用時(shí)長(zhǎng),所以,大部分的APP在最后一個(gè)板式都會(huì)做成瀑布流的形式,因?yàn)樗诨瑒?dòng)的時(shí)候會(huì)不斷給予用戶新的提示,告訴用戶你不斷往下滑,都會(huì)有新的內(nèi)容。

4.40 提升留存率的策略


留存率是用于反映產(chǎn)品的的運(yùn)營(yíng)情況的統(tǒng)計(jì)指標(biāo),我們產(chǎn)品的留存越高,說明我們產(chǎn)品很活躍,真正穩(wěn)步的向前邁進(jìn),那我們?cè)趦?yōu)化留存的策略可以從以下幾個(gè)入手:1.優(yōu)化初次上手體驗(yàn),2. 減輕用戶的使用負(fù)擔(dān),用內(nèi)容留住用戶,3.完善獎(jiǎng)勵(lì)機(jī)制,4.增加沉沒成本

4.41 優(yōu)化初次上手體驗(yàn)


我們現(xiàn)在年輕人由于生活的節(jié)奏越來越快,在使用APP的時(shí)間往往都是碎片化的,用戶的持續(xù)注意力會(huì)越來越短,一個(gè)產(chǎn)品在初次上手的難度越高,能勸退的用戶就越多,用戶在上手一款產(chǎn)品的時(shí)候,首先會(huì)關(guān)注界面是否易于上手,能不能快速找到自己想要的功能,例如在登錄的時(shí)候設(shè)計(jì)驗(yàn)證碼登錄或者第三方的快捷登錄,在新用戶初次進(jìn)去的時(shí)候,對(duì)新功能有使用說明,用戶在初次體驗(yàn)是很重要,有了第一次的良好體驗(yàn)印象,用戶才會(huì)有第二次第三次的回訪率,這也是提升留存的第一步。



4.42 減輕用戶的使用負(fù)擔(dān),用內(nèi)容留住用戶


減輕用戶的使用負(fù)擔(dān)是指在核心功能盡量能讓用戶能用最短的時(shí)間去完成,讓用戶感受到產(chǎn)品對(duì)用戶是有價(jià)值的,做到用完即走,例如,微信就算其他功能做在有趣,上手在簡(jiǎn)單,它的核心聊天功能做的不好,用戶發(fā)一條要等很久, 我相信也不會(huì)有人去選擇用它去聊天,早期的米聊,其他的功能和想法都是比較超前的,微信也是根據(jù)米聊的模式改進(jìn),但是早期米聊在即時(shí)通信領(lǐng)域不是很擅長(zhǎng),在發(fā)送消息的即時(shí)性上欠缺,導(dǎo)致失了先手,在手機(jī)聊天領(lǐng)域輸了給微信。

在產(chǎn)品做好了核心功能,能夠吸引一批忠實(shí)的種子用戶,這樣我們?cè)谝恍└郊庸δ?,才是錦上添花,例如現(xiàn)在無論什么產(chǎn)品都喜歡做社區(qū)功能,就是希望用內(nèi)容去留住用戶的注意力,附加功能一般都是利用人性的七宗罪去設(shè)計(jì)布局的(傲慢、嫉妒、憤怒、懶惰、貪婪、淫欲和暴食。)例如微信的搖一搖是利用人想認(rèn)識(shí)新的異性,擴(kuò)大好友圈,汽車APP的社區(qū)功能會(huì)經(jīng)常發(fā)一些車站的車模,來吸引精準(zhǔn)用戶的注意力,這些都可以提升用戶再次來使用我們的產(chǎn)品。


4.43 完善獎(jiǎng)勵(lì)機(jī)制


我們?cè)诠ぷ髦?,一定遇到這樣的情況,就是公司會(huì)設(shè)置獎(jiǎng)勵(lì)機(jī)制,當(dāng)員工的績(jī)效達(dá)到一定的程度的時(shí)候,公司會(huì)給予員工一定的獎(jiǎng)勵(lì),反正則會(huì)觸發(fā)懲罰機(jī)制,這會(huì)使得員工為了完成目標(biāo)而努力工作,從而達(dá)到目標(biāo)得到的獎(jiǎng)勵(lì)會(huì)觸發(fā)員工的“爽點(diǎn)”。

這是因?yàn)檫@樣,所以越來越多的產(chǎn)品開始做自己的會(huì)員體系,在加入積分商城,最后在來個(gè)簽到獎(jiǎng)勵(lì),簡(jiǎn)單來講,就是通過給予用戶一些“爽”的東西,來讓用戶幫我們的產(chǎn)品達(dá)成一些我們需要的商業(yè)目標(biāo),其中最主要的目的就是用戶的留存率.

4.44  增加沉沒成本


我們?cè)谌ダ戆l(fā)店去理發(fā)或者在去網(wǎng)吧上網(wǎng)的時(shí)候,他們都會(huì)希望我們?nèi)マk理一張會(huì)員卡,在往里面存在錢,有的是存多少送多少,當(dāng)我們一但存錢辦理會(huì)員后,我們會(huì)惦記著我們有類似的消費(fèi)的時(shí)候,都會(huì)想起我在那家店里會(huì)員還有余額,會(huì)員里的余額就是們遷移的成本。

所以共享單車會(huì)推出月卡服務(wù),視頻會(huì)員會(huì)有連續(xù)包月或者年卡套餐,甚至我們點(diǎn)外賣開通會(huì)員也能享受大額的折扣,讓用戶感覺占便宜的感覺,這些都是為了鎖定用戶,增加用戶的遷移成本,來達(dá)到讓用戶再次來我們產(chǎn)品來消費(fèi),從而提升用戶的留存率。

4.50 提升產(chǎn)品活躍度發(fā)力點(diǎn)


產(chǎn)品的活躍度也可以稱為產(chǎn)品的粘性,產(chǎn)品的留存率是計(jì)算單次打開產(chǎn)品的次數(shù)。而多次打開我們的產(chǎn)品也可以稱為產(chǎn)品的活躍度,或者用戶對(duì)我們產(chǎn)品的粘性,我們?nèi)?yōu)化產(chǎn)品的活躍的可以從以下幾個(gè)策略入手:1.讓產(chǎn)品看起來生機(jī)勃勃,2.主動(dòng)與用戶溝通,3.讓用戶有自己的社交圈,

4.51 讓產(chǎn)品看起來生機(jī)勃勃


我們都會(huì)有湊熱鬧的習(xí)慣,看到街邊有人排長(zhǎng)隊(duì)我們會(huì)不自覺的看過去,所以我們?cè)谛侣効吹搅司W(wǎng)紅店會(huì)請(qǐng)人來排隊(duì),都是為了營(yíng)造該店看起來很有生機(jī),人很多,很熱鬧。

我們?cè)谧霎a(chǎn)品設(shè)計(jì)的時(shí)候也是一樣的,需要在設(shè)計(jì)層面讓用戶看我們的產(chǎn)品也是很有熱鬧,很有生機(jī),例如我們產(chǎn)品的運(yùn)營(yíng)區(qū)的圖片會(huì)經(jīng)常更換,讓人感覺有人在運(yùn)營(yíng),每天都是不一樣的,當(dāng)我們的用戶關(guān)注的人比較少或者沒關(guān)注的時(shí)候, 我們需要給用戶去推薦質(zhì)量比較高KOL去讓用戶去關(guān)注,有什么活動(dòng)我也可以主動(dòng)推送給用戶,這都是可以讓我們產(chǎn)品看起來有活力,從而讓用戶可以多次打開,提升活躍度。

4.52 主動(dòng)與用戶溝通


我們小時(shí)候通常會(huì)被家長(zhǎng)教導(dǎo),遇到熟人和長(zhǎng)輩要主動(dòng)打招呼,這樣會(huì)讓我們看起來比較有禮貌,我們生活中也樂于和有禮貌的人去交往,因?yàn)閷?duì)方會(huì)看起來比較有親和力,比較好溝通。

我們做設(shè)計(jì)的時(shí)候也是一樣,我們的產(chǎn)品也需要主動(dòng)與產(chǎn)品去溝通,讓用戶去了解我們,例如,我們?cè)u(píng)論去外露,是在告訴用戶我們這個(gè)商品已經(jīng)得到了大多數(shù)的肯定,也可以讓用戶感受到我們這個(gè)產(chǎn)品其實(shí)用的人還是不少的,比較有生命力。

4.53 讓用戶有自己的社交圈


不知道從什么時(shí)候起,無論是什么類目都有了自己的社區(qū),淘寶有自己微淘,咸魚有自己的魚塘,求職找工作的APP也開放了求職討論專區(qū),連墨跡天氣都開放了社區(qū)功能,讓大家可以拍自己的當(dāng)?shù)氐娘L(fēng)景來討論。

為什么大量的產(chǎn)品開始做社區(qū)功能呢?因?yàn)樗麄兿M约旱挠脩裟茉谧约旱漠a(chǎn)品有自己的社交圈,只有用戶有自己固定的圈子,才會(huì)有用戶粘性,把路人用戶轉(zhuǎn)化為死忠粉,大家一起來討論,從而達(dá)到提升產(chǎn)品的活躍度。

4.60 提升產(chǎn)品核心轉(zhuǎn)化率發(fā)力點(diǎn)


核心轉(zhuǎn)換率一般我們的用戶需要走的流程比較多,我們需要按照實(shí)際情況去刪減合并流程,來保障用戶無障礙的可以付款下單,我總結(jié)一下幾個(gè)優(yōu)化策略:1.優(yōu)化核心流程,2.豐富決策信息,降低轉(zhuǎn)化顧慮


4.61 優(yōu)化核心流程


我們以前在放學(xué)的路上一定熟知自己家到學(xué)校的各種小道,在巷子的玩玩轉(zhuǎn)轉(zhuǎn),比走大路要節(jié)省很多時(shí)間,節(jié)省了很多時(shí)間。


(1)合并優(yōu)化流程


我們?cè)谧鲭娚藺PP的時(shí)候,想要讓用戶快速下單購買也是需要提升用戶的下單效率,例如我們以前輸入完密碼還需要點(diǎn)確認(rèn)才能付款,現(xiàn)在我們?cè)谳斎胪甑?位數(shù)密碼的時(shí)候就直接付款了,現(xiàn)在手機(jī)的升級(jí)了指紋和面容識(shí)別后都不需要輸入,就可以直接付款了,點(diǎn)外賣的時(shí)候,會(huì)有一鍵搭配購買,這都把以前復(fù)雜的步驟給整合優(yōu)化,提升用戶的下單效率。


(2)復(fù)雜流程分開顯示,提升放棄成本


已經(jīng)簡(jiǎn)化到最簡(jiǎn)單的流程仍然步驟還是很多的時(shí)候,我們可以將流程分開展示給用戶,例如我們的流程一共有12項(xiàng),已經(jīng)是優(yōu)化的最精簡(jiǎn)了,這個(gè)時(shí)候,我們每個(gè)頁面顯示4個(gè)給用戶去填寫,如果用戶在第二個(gè)或者第三個(gè)想放棄的時(shí)候我們這個(gè)時(shí)候提示他,馬上就要完成了,用戶想著我之前已經(jīng)填寫一頁了,反正也沒多少了,我就在堅(jiān)持寫一頁把,例如我們常見的電商產(chǎn)品,現(xiàn)在都是支持先選購商品加入購物車,在需要購買的時(shí)候在提升用戶登錄并付款,避免用戶還沒選商品就被登錄界面給阻攔了。這都是可以提升核心轉(zhuǎn)化率的策略。

4.62 豐富決策信息,降低轉(zhuǎn)化顧慮


我們?cè)诔匈徫飼r(shí)候,一般會(huì)先看看產(chǎn)品信息和生產(chǎn)品日期,然后在看看品牌,最后看看產(chǎn)品的價(jià)格,覺得合適就拿走付錢了,就算我們有挑選的空間,也會(huì)在這這家超市買,因?yàn)橥鶅杉页懈舻亩际潜容^遠(yuǎn)的,跑來跑去比較費(fèi)力,但是我們?cè)诰W(wǎng)上購物或者選東西的,換平臺(tái)成本比較低,也不怎么費(fèi)力,所以我們需要將我們的能有的優(yōu)勢(shì)都展示出來,降低用戶的下單顧慮。

例如自如租房的優(yōu)勢(shì)就是有管家服務(wù),服務(wù)比較全,這是它的優(yōu)勢(shì),也是我們租房的時(shí)候比較擔(dān)心的,有時(shí)候房間洗衣機(jī)或者熱水器壞了找人也找不到,另外就是我們商品的銷量好也需要展示出來,那么多人都買了都沒問題,我也肯定可以放心的下單購買,我們產(chǎn)品或者平臺(tái)有什么優(yōu)勢(shì)都可以展示全,去盡力打消用戶最后的心理防線,從而提升下單轉(zhuǎn)化率。

5.10 確定增長(zhǎng)指標(biāo)


當(dāng)我們想做增長(zhǎng)的時(shí)候,會(huì)遇到各種各樣的指標(biāo),經(jīng)常我們會(huì)覺得提升哪個(gè)指標(biāo)都會(huì)比較重要,然后我們?cè)诎迅鱾€(gè)指標(biāo)一把抓的時(shí)候卻發(fā)現(xiàn)與目標(biāo)卻是南轅北轍的背道而馳,最終是研究了很多數(shù)據(jù)指標(biāo),卻仍然沒做好增長(zhǎng)設(shè)計(jì)。

其中最關(guān)鍵的因素是我們每找到唯一的關(guān)鍵性指標(biāo),即OMTM,,全稱是 One Metric That Matters,最早提出這一概念的是《精益數(shù)據(jù)分析》這本書中提出的,后來肖恩·艾利斯在《增長(zhǎng)黑客》一書將其稱為“北極星指標(biāo)(North Star Metric)”,現(xiàn)在“北極星指標(biāo)”已經(jīng)稱為行業(yè)的通用詞匯。

北極星指標(biāo)即在紛繁的產(chǎn)品世界中照耀著我們?nèi)プ呦蚪K點(diǎn)的指標(biāo),它是產(chǎn)品走向成功的關(guān)鍵且唯一的指標(biāo),我們整個(gè)組織的增長(zhǎng)目標(biāo)都應(yīng)該統(tǒng)一指向北極星指標(biāo)。那么北極星指標(biāo)有什么作用?

(1)明確目標(biāo):讓我們避免南轅北轍,,幫助我們確定現(xiàn)階段的產(chǎn)品最需要解決的問題,幫助我們找到清晰的目標(biāo),來促進(jìn)用戶的增長(zhǎng)。

(2)集中資源:有助于減少內(nèi)部的溝通成本,整合企業(yè)的人力、技術(shù)、資金等資源,明確方向,力往一處使,利出一孔。


5.11 怎么確定北極星指標(biāo)


我們?cè)谇懊嬲f到北極星指標(biāo)的重要性,我們前面也講到關(guān)于很多數(shù)據(jù)指標(biāo),我們?cè)趺纯梢源_定符合企業(yè)定位的北極星指標(biāo)呢?

北極星指標(biāo)確立和我們自身的產(chǎn)品的屬性、行業(yè)是密不可分的,不同的產(chǎn)品和行業(yè)也對(duì)應(yīng)著不同的用戶和盈利模式,用戶價(jià)值的不同和商業(yè)模式不同,所對(duì)應(yīng)的關(guān)鍵指標(biāo)也會(huì)不同,因此,我們要確定北極星指標(biāo)首先要了解產(chǎn)品的受眾和我們的產(chǎn)品可以給受眾提供什么樣的價(jià)值來盈利、

在過去互聯(lián)網(wǎng)高速的發(fā)展的過程中,也衍生出了不同品類的產(chǎn)品。但是總體來說,我們大致可以把互聯(lián)網(wǎng)產(chǎn)品給歸類為內(nèi)容產(chǎn)品、社交產(chǎn)品、電商產(chǎn)品、工具產(chǎn)品、游戲等幾大類目。我們可以看看不同的產(chǎn)品所對(duì)應(yīng)的北極星指標(biāo)。


5.20 怎么拆解增長(zhǎng)指標(biāo)


如果我們確定了產(chǎn)品的北極星指標(biāo),那么接下來我們需要做的就是任務(wù)的分配工作以及各部門的協(xié)作與協(xié)調(diào),讓每位成員能夠能明確各自的職責(zé),這樣我們?cè)O(shè)立的北極星指標(biāo)才可能完成,這里我推薦一種在各大企業(yè)都開始推行的一種工作方式OKR((Objectives and Key Results)工作法。全稱為目標(biāo)和關(guān)鍵成果,是一套明確和跟蹤目標(biāo)及其完成情況的管理工具和方法。

OKR 這套系統(tǒng)最初由英特爾公司制定,在谷歌成立不久,被風(fēng)投家約翰·都爾(John-Doerr)引入谷歌,并一直沿用至今。除了Google以外,現(xiàn)如今有很多公司在使用,國外Facebook,Twitter,Linkedin,國內(nèi)我知道知乎,字節(jié)跳動(dòng),明道等在使用。

通過這么多公司的使用充分說明了OKR方式的可行性,OKR在執(zhí)行過程主

要以季度為周期來進(jìn)行管理。

整個(gè)OKR制定是從上到下,逐級(jí)進(jìn)行拆分的類似金字塔式結(jié)構(gòu),最終拆分到團(tuán)隊(duì)或者個(gè)人OKR。


OKR中的“O”代表我們這次工作的目標(biāo),例如:年度目標(biāo)、季度目標(biāo)、階段目標(biāo),“KR”是關(guān)鍵成果,就是這些目標(biāo)可以通過哪些關(guān)鍵成功可以完成,然后還有一個(gè)Action(行動(dòng)方案),這些關(guān)鍵成功需要通過哪些方案去達(dá)成。



我們以一款內(nèi)容社區(qū)類的產(chǎn)品為例子,我們這個(gè)產(chǎn)品的季度的北極星指標(biāo)為提升用戶的粘性,那么可能分配到我們?cè)O(shè)計(jì)負(fù)責(zé)人手上的目標(biāo)為提升用戶的留存率和簡(jiǎn)化產(chǎn)品的操作留程,那我們?cè)O(shè)計(jì)師需要做的可能是新增一個(gè)簽到功能,讓用戶每天都記得簽到來領(lǐng)獎(jiǎng)勵(lì),或者簡(jiǎn)化直達(dá)看帖區(qū)的交互步驟,讓內(nèi)容能留住用戶

所以我們北極星指標(biāo)結(jié)合OKR工作法,如何在合適的階段做合適的事,如下圖所示


5.30 GSM數(shù)據(jù)驅(qū)動(dòng)


GSM模型是Google的用戶體驗(yàn)團(tuán)隊(duì)提出的一種指標(biāo)體系,與OKR工作法不同,OKR主要適用于整個(gè)企業(yè)的任務(wù)的排兵布陣,而GSN體系主要是用來量化用戶體驗(yàn)的,GSM分別為目標(biāo)(Goal)→信號(hào)(Signal)→指標(biāo)(Metric),所以也簡(jiǎn)稱GSM模型。

但是由于我們國內(nèi)的互聯(lián)網(wǎng)情況和國外的環(huán)境也是不一樣的,經(jīng)過本土化的改良,我們國內(nèi)的GSM被精細(xì)化為6步。

我們來結(jié)合實(shí)際的案例來看下吧!

例如我們我們公司的一款民宿的產(chǎn)品,我們的產(chǎn)品團(tuán)隊(duì)接到的需求是提升我們產(chǎn)品的活躍度。


(1)數(shù)據(jù)目標(biāo)


那我們的數(shù)據(jù)目標(biāo)便是提升產(chǎn)品的活躍度,我們接下來的工作便是對(duì)產(chǎn)品的現(xiàn)狀進(jìn)行分析,以方便我們開展接下來的設(shè)計(jì)工作。


(2)用戶分析


用戶分析主要是對(duì)我們現(xiàn)在的用戶進(jìn)行一個(gè)比較全面的分析,了解我們用戶群體的使用習(xí)慣,發(fā)現(xiàn)用戶主要的查看內(nèi)容和用戶的痛點(diǎn),以方便我們做針對(duì)性的設(shè)計(jì)策略

(3)發(fā)現(xiàn)問題

我們對(duì)用戶問題的采集主要是通過軟件自帶的用戶意見反饋和APP store 的用戶評(píng)價(jià),從這里去獲取的用戶對(duì)產(chǎn)品的評(píng)價(jià)都會(huì)是比較客觀的。

我們通過評(píng)價(jià)可以發(fā)現(xiàn),用戶對(duì)產(chǎn)品存在的一些隱形的坑的體驗(yàn)不好,例如附近有裝修會(huì)影響人睡覺的之類的,那我們?cè)趺慈椭脩羧ケ苊膺@些問題呢?我們可以讓一些經(jīng)常住民宿的人去寫一些住店的體驗(yàn)日記,方便我們用戶去查看。


(4)用戶表現(xiàn)


有了住店日記,我們的用戶表現(xiàn)是什么樣的呢?我們的用戶在決定入駐一些民宿的時(shí)候,可以去多方位的去查看其他人發(fā)入住日記??梢宰龆喾矫娴膶?duì)比,這樣用戶不僅可以減少踩到坑,在對(duì)比的過程中,在使用我們軟件的時(shí)間也會(huì)更長(zhǎng)了。


(5)設(shè)計(jì)策略


那我們?cè)趺纯梢宰屢恍┤胱∵^用戶去寫一些入住日記呢?我們可以針對(duì)愿意寫的用戶寫的好的用戶的日記進(jìn)行曝光,他可以獲得自己的粉絲群里,然后,你發(fā)一篇日記,我們會(huì)獎(jiǎng)勵(lì)給你相應(yīng)的金幣,這些金幣在積累后可以獲得優(yōu)惠券,在下次入住后可以減免相應(yīng)的入住費(fèi)用,然后我們的產(chǎn)品可以發(fā)現(xiàn)寫的比較好的日記推送給沒有住過的新用戶,或者有意向、搜索過的用戶,方便用戶橫向?qū)Ρ?,從而提升用戶的活躍度

(6)衡量指標(biāo)

因?yàn)榛钴S度它是比較抽象的一個(gè)概念。我們?cè)趺慈ヲ?yàn)證我們的設(shè)計(jì)策略呢?我們可以通過一些用戶的金幣的積累去驗(yàn)證我們數(shù)據(jù),這樣就會(huì)比較直觀。只有當(dāng)有有用戶去發(fā)表住店日記,他才能獲得金幣的獎(jiǎng)勵(lì)。


增長(zhǎng)設(shè)計(jì)需要精準(zhǔn)的界定用戶的痛點(diǎn),這是用戶增長(zhǎng)的重要基礎(chǔ),然后在聚焦核心的業(yè)務(wù),不斷的強(qiáng)化痛點(diǎn)來驅(qū)動(dòng)用戶的增長(zhǎng)。

隨著行業(yè)的發(fā)展,現(xiàn)在行業(yè)對(duì)Ui設(shè)計(jì)的要求也是水漲船高,我們每一次改動(dòng)需要給企業(yè)去提供一個(gè)能說得通的理由,我們也需要不斷的去學(xué)習(xí)行業(yè)里的新的知識(shí),來豐富我們的思維,這樣我們才能在寒冬中走自己的坦途,一起加油!



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

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


文章來源:站酷   作者:Endings

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)力工具中的設(shè)計(jì)

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

樹形控件是種常見的設(shè)計(jì)模式,幾乎與圖形化用戶界面同時(shí)誕生,通過結(jié)構(gòu)化的組織方式逐級(jí)展示內(nèi)容,讓整體信息架構(gòu)一目了然,非常適合以網(wǎng)頁或桌面端為載體的 B 端產(chǎn)品和生產(chǎn)力工具,比如電腦文件管理系統(tǒng)。



使用場(chǎng)景

樹形控件通常有以下 4 種表現(xiàn)形式:


可以把它們進(jìn)一步總結(jié)為 2 個(gè)使用場(chǎng)景:


其中,樹列表、思維導(dǎo)圖在 2 個(gè)場(chǎng)景中都有應(yīng)用,而樹導(dǎo)航和樹選擇多以查看為主。不同的使用場(chǎng)景,在設(shè)計(jì)上會(huì)有不同取舍??梢园阉鼈冞M(jìn)一步總結(jié)為 2 個(gè)使用場(chǎng)景:



交互設(shè)計(jì)

結(jié)合樹形控件的使用場(chǎng)景,對(duì)其的操作也如此分類。顯然,「查看為主」時(shí),對(duì)查看類操作的體驗(yàn)要求更高,而「編輯為主」時(shí)則相反。


新增節(jié)點(diǎn)

以新增節(jié)點(diǎn)為例,不同場(chǎng)景下用戶有不同的訴求:


查看為主

可以考慮鼠標(biāo)懸停到節(jié)點(diǎn)出現(xiàn)相關(guān)操作。


但此時(shí)較難預(yù)測(cè)的是用戶到底是想增加一個(gè)子節(jié)點(diǎn)還是同級(jí)節(jié)點(diǎn)。一個(gè)完備的解法就是讓用戶選擇。但實(shí)際業(yè)務(wù)中,此處可能還要選擇節(jié)點(diǎn)類型,比如語雀要選擇文檔還是表格。所以「節(jié)點(diǎn)類型 x 層級(jí)選項(xiàng)」有可能導(dǎo)致選項(xiàng)過多。此時(shí)可以有兩種處理方式:


針對(duì)第一種方法,我們需要額外思考一個(gè)問題:新建的子節(jié)點(diǎn)應(yīng)該放在第一位還是最后一位?



我的第一反應(yīng)是第一位,因?yàn)樗x操作區(qū)域最近,從操作到反饋都很自然,也避免目錄發(fā)生大幅度滾動(dòng),所以在語雀目錄中是這樣設(shè)計(jì)的。但是實(shí)際也有很多用戶反饋希望是最后一個(gè)子節(jié)點(diǎn),類似于1,2,3…… 的順序從老到新排列。我沒有辦法去驗(yàn)證如果真的是加為最后一個(gè)子節(jié)點(diǎn),會(huì)不會(huì)又有另一波反饋聲音。后來我發(fā)現(xiàn)思維導(dǎo)圖新增子節(jié)點(diǎn)就是新增在末尾,以及絕大多數(shù)產(chǎn)品也是加在末尾,所以下次我大概會(huì)選擇放在最后試試?;蛘咚餍赃x擇上述第二種方法來避免這個(gè)問題。


此外,界面上還需要提供一種方式,允許用戶創(chuàng)建最頂層的一級(jí)節(jié)點(diǎn)。當(dāng)界面較大時(shí),可以放置在頂部,讓用戶更易發(fā)現(xiàn)。



編輯為主

相較于上述方法,可以給出更明確直接的界面操作和添加位置示意或快捷鍵。



語雀在進(jìn)行目錄改版時(shí),本想統(tǒng)一「閱讀頁面」和「編排目錄頁面」的交互方式——采用「查看為主」的添加方式,卻忽略了兩個(gè)頁面的用戶訴求不一樣。此時(shí)這里其實(shí)還可以借鑒思維導(dǎo)圖的創(chuàng)建方式,使用Enter/Tab 鍵快速添加節(jié)點(diǎn)。



修改節(jié)點(diǎn)屬性

結(jié)合實(shí)際業(yè)務(wù),節(jié)點(diǎn)可能有不同屬性,比如名稱、類型、狀態(tài)、優(yōu)先級(jí)等?!覆榭礊橹鳌箷r(shí),修改操作使用不多,可以考慮放入「…」中。



而「編輯為主」時(shí),除了單個(gè)節(jié)點(diǎn)修改屬性方便,還需要考慮連續(xù)修改多個(gè)屬性,甚至是批量修改。如下圖,樹列表可以支持連續(xù)修改屬性節(jié)點(diǎn)。


如下圖,思維導(dǎo)圖可以通過多選然后在格式面板統(tǒng)一修改屬性。



調(diào)整結(jié)構(gòu)


樹形控件最有價(jià)值的部分就是其所表達(dá)的層級(jí)關(guān)系,常用調(diào)整結(jié)構(gòu)的操作總結(jié)如下:


無論采用那種方式,都遵循以下設(shè)計(jì)原則:



拖拽調(diào)整

簡(jiǎn)單而言,設(shè)計(jì)上要解決以下問題:

1.如何讓用戶知道可以拖拽?



2.如何讓用戶知道可以怎么拖拽到哪里?


可以在拖拽中采用「插入位置符號(hào)」暗示用戶,通常是一條彩色線條。應(yīng)盡可能增加「插入位置符號(hào)」出現(xiàn)的機(jī)率,減少用戶的困惑。設(shè)計(jì)時(shí)可以考慮上下左右兩個(gè)方向的拖拽運(yùn)動(dòng)分別可以觸發(fā)什么結(jié)果。


比如按以下方式簡(jiǎn)單把拖拽規(guī)則分為 3 大類,


當(dāng)然在「插入位置符號(hào)」盡可能多出現(xiàn)的同時(shí),也要讓其出現(xiàn)的位置符合用戶預(yù)期且易理解。

比如向左移動(dòng)「非末尾子節(jié)點(diǎn)」,如果強(qiáng)行給以一個(gè)符合邏輯的響應(yīng),「插入位置符號(hào)」可能離當(dāng)前光標(biāo)很遠(yuǎn),甚至在屏幕外,且放手后可能引起目錄結(jié)構(gòu)較大變化,那么不如選擇此時(shí)拖拽無響應(yīng)。



這里再介紹「把一個(gè)節(jié)點(diǎn)調(diào)整為另一個(gè)的子節(jié)點(diǎn)」的兩種拖拽規(guī)則,分別適用于不同場(chǎng)景。


3.如何讓用戶快速拖拽到目標(biāo)位置?

當(dāng)用戶掌握了拖拽規(guī)則后,就需要幫助用戶快速實(shí)現(xiàn)自己的調(diào)整目標(biāo)。拖拽過程中注意以下幾點(diǎn):

 ① 被拖拽節(jié)點(diǎn)可以半透明顯示,以盡量少遮擋樹形控件,方便用戶定位目標(biāo)位置。

 ② 被拖拽節(jié)點(diǎn)的原始位置可以以較弱的視覺效果展示,提示用戶節(jié)點(diǎn)從哪里被拖拽。

 ③ 整棵樹的結(jié)構(gòu)不要發(fā)生變化,以免原先確定的目標(biāo)位置發(fā)生位移。

 ④ 結(jié)構(gòu)層級(jí)較深時(shí),通過輔助示意幫助用戶確定會(huì)將節(jié)點(diǎn)拖拽到哪一層級(jí)。



4.如何讓用戶確定拖拽結(jié)果滿足自己的期望?

當(dāng)以上問題都解決后,這個(gè)也許就不成問題。當(dāng)然也可以增加二次確認(rèn)的微交互。


非拖拽調(diào)整

調(diào)整結(jié)構(gòu)也可以通過非拖拽的方式完成。拖拽是一種直觀,但不輕松的操作,尤其是當(dāng)樹很龐大需跨屏拖拽時(shí)。此時(shí)可以增加按鈕操作,直接指定目標(biāo)位置,精確且快速。

         



當(dāng)「編輯為主」時(shí),調(diào)整結(jié)構(gòu)也需要考慮批量操作。如下圖,支持多選節(jié)點(diǎn)同時(shí)調(diào)整,被調(diào)整結(jié)構(gòu)的節(jié)點(diǎn)有可能在原處于不同分支的不同等級(jí),批量調(diào)整后會(huì)成為同一個(gè)字節(jié)的同級(jí)節(jié)點(diǎn)。



刪除節(jié)點(diǎn)


刪除是個(gè)比較慎重的操作,所以此處應(yīng)該詢問用戶是只刪除本節(jié)點(diǎn),還是本節(jié)點(diǎn)及其下所有節(jié)點(diǎn)。


如果只刪除本節(jié)點(diǎn),首先本節(jié)點(diǎn)需要從樹形控件中消失,以代表刪除成功,然后其子節(jié)點(diǎn)可以上移一級(jí),保證用戶不會(huì)誤以為內(nèi)容丟失。




縮放視圖

查看時(shí),思維導(dǎo)圖可視化效果更好。針對(duì)思維導(dǎo)圖,需要考慮視圖的放大縮小,適應(yīng)視口/真實(shí)大小切換。比如下圖語雀思維導(dǎo)圖的「縮放視圖」功能(不過這個(gè)設(shè)計(jì)把回到中心和適應(yīng)畫布藏的有點(diǎn)深)。



折疊層級(jí)

當(dāng)樹形控件龐大時(shí),需要能夠快速折疊/展開層級(jí),包括全部層級(jí)或者某一層級(jí)。如果是一棵「私人樹」,記住用戶折疊的展示層級(jí),并且在下次進(jìn)來時(shí)仍舊保持。如果是一棵「公開樹」,可以增加默認(rèn)展開設(shè)置,比如下圖語雀中編排目錄的操作。




值得注意的是,折疊層級(jí)和縮放視圖的操作都應(yīng)該提供快捷鍵,會(huì)比通過界面操作更加高效,也不會(huì)打斷查看過程??梢韵胂笠幌履阏谝粋€(gè)會(huì)議中展示一張思維導(dǎo)圖,在界面上操作「縮放視圖」耗費(fèi)更多時(shí)間,也會(huì)在奪走走觀眾的注意力。

附上常見查看操作快捷鍵,僅供參考:


上述部分快捷鍵會(huì)和瀏覽器自帶快捷鍵沖突,使用時(shí)需要覆蓋瀏覽器快捷鍵。



搜索和篩選

當(dāng)節(jié)點(diǎn)數(shù)量很多時(shí),樹形控件應(yīng)該支持搜索查找節(jié)點(diǎn),搜索關(guān)鍵詞可以高亮顯示;或按條件篩選展示節(jié)點(diǎn)及其上級(jí)節(jié)點(diǎn)路徑。


使用列表時(shí),還有一個(gè)常見的操作是「排序」,但是整棵樹「排序」和樹形控件本身的層級(jí)順序是相矛盾的。所以「樹列表」基本沒有「排序」功能。

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

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



文章來源:站酷   作者:Ant_Design

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

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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è)人資料

存檔