首頁

B2B用戶畫像的創(chuàng)建與使用

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

01 什么是用戶畫像(what)

02 B2B用戶畫像的特色(what)

03 為什么要構(gòu)建B2B用戶畫像(why)

04 如何構(gòu)建B2B用戶畫像(how)

05 B2B用戶畫像的傳播與使用(how)

本文嘗試通過what-why-how的結(jié)構(gòu),結(jié)合自己的工作做一些實(shí)踐,和大家分享下B2B用戶畫像的整體概念框架以及構(gòu)建方法。出于對我司數(shù)據(jù)的保密,無法直接分享給大家細(xì)粒度且對應(yīng)的數(shù)據(jù),所以分享過程中我會結(jié)合業(yè)界和其他前輩在網(wǎng)上分享的內(nèi)容和數(shù)據(jù)作為案例,如有不足和錯誤之處,還望大家批評指正。

 

那在講B2B用戶畫像之前,我想先來說說用戶畫像的概念,在看一些文章時發(fā)現(xiàn)有些作者混淆了用戶畫像的兩種概念??赡芎芏嗳藳]有注意到,用戶畫像這個詞包含了2種不同的含義,一種是User Persona,一種Use Profile。

 

1.1 User Persona

User Persona是對一個用戶群體的整體抽象。這一概念最早源于交互設(shè)計(jì)領(lǐng)域,是Alan Cooper在《About Face:交互設(shè)計(jì)精髓》一書中提到的研究用戶的系統(tǒng)化方法。“贏在用戶”這本書將其翻譯為“人物角色”,目前業(yè)內(nèi)使用“用戶畫像”這個術(shù)語。表達(dá)的意思一樣,是真實(shí)用戶的虛擬代表,是在深刻理解真實(shí)數(shù)據(jù)的基礎(chǔ)上得出的一個的虛擬用戶。

  • 研究方法:定量+定性研究,更注重的是定性的研究;
  • 畫像用途產(chǎn)品&交互&設(shè)計(jì)使用,是他們了解用戶目標(biāo)和需求、與開發(fā)團(tuán)隊(duì)及相關(guān)人交流、避免設(shè)計(jì)陷阱的重要工具;
  • 研究方向:更深和細(xì),會更為深入的去挖掘底層用戶的動機(jī)、原因、動機(jī)、欲望、痛點(diǎn)等屬性,Persona幫助我們了解why產(chǎn)品的用戶為什么會有這個行為。

 

1.2 User Profile

User Profile是對每一個個體的畫像,是在產(chǎn)品用戶量有一定規(guī)模以后進(jìn)行的。利用用戶的行為數(shù)據(jù)或者填報的資料進(jìn)行的用戶屬性標(biāo)簽提取,更多被運(yùn)營和數(shù)據(jù)分析師使用,它是各類描述用戶數(shù)據(jù)的變量集合。在大數(shù)據(jù)時代,企業(yè)通過對海量數(shù)據(jù)信息進(jìn)行清洗、聚類、分析,將數(shù)據(jù)抽象成標(biāo)簽,再利用這些標(biāo)簽將用戶形象具體化的過程。

  • 研究方法:偏向于定量研究與數(shù)據(jù)分析;
  • 畫像用途:主要運(yùn)營&市場使用,個性化推薦、廣告系統(tǒng)、活動營銷、內(nèi)容推薦、興趣偏好都是基于用戶畫像的應(yīng)用,比如說我們通常看到很多網(wǎng)站,千人千面,其實(shí)也是User Profile 精細(xì)化運(yùn)營的結(jié)果;
  • 研究方向:更廣和全,更多的是研究人的基礎(chǔ)屬性、社會屬性和行為習(xí)慣,更關(guān)注的相關(guān)性的數(shù)據(jù)分析和挖掘。幫助我們了解what產(chǎn)品為誰而設(shè)計(jì)。

兩類畫像的對比如下圖:

明確了兩種畫像的區(qū)別,那本文我們就重點(diǎn)談?wù)?strong>User Persona類型的B2B用戶畫像(后續(xù)文中簡稱“用戶畫像”)。至于User Profile,比較適合用戶體量大的產(chǎn)品,而B端產(chǎn)品除了頭部企業(yè),很難達(dá)到這個量級,無疑用User Persona更合適,本文就不再贅述。

 

不管是B2B還是B2C產(chǎn)品也好,不論是商業(yè)層面上(比如在資源有限情況下聚焦關(guān)鍵用戶類型)、或是在產(chǎn)品層面上(更好理解用戶想要什么,確定功能的范圍和優(yōu)先級),建立用戶畫像的本質(zhì)都是為了輔助一些決策。

不同之處在于C端面向的是大量且分散的個人用戶,用戶畫像的主要目的是把用戶聚類,更好的了解不同類型用戶的特點(diǎn)和偏好。而B端產(chǎn)品,面向的是企業(yè)級用戶,滿足的是企業(yè)的管理或經(jīng)營需求,關(guān)注的是成本和效率。畫像的目的是針對業(yè)務(wù)不同環(huán)節(jié)中、具有類似任務(wù)的用戶進(jìn)行更立體、豐富的需求整理和挖掘,往往和角色相關(guān)。

其決定了B2B用戶畫像的幾個特點(diǎn):

 

2.1 受企業(yè)生命周期的影響

伊查克·愛迪思(IchakAdizes)提出了企業(yè)生命周期理論,企業(yè)的發(fā)展大致有初創(chuàng)期、成長期、成熟期和衰退期四個階段。不同階段的企業(yè),其組織形態(tài)、關(guān)注點(diǎn)、管理方式等都會有所不同,產(chǎn)品需求側(cè)重點(diǎn)不同,用戶畫像的方向和調(diào)研方式也會有不同。

初創(chuàng)期:產(chǎn)品立項(xiàng)階段

這個階段往往指的是公司剛成立,此時產(chǎn)品、企業(yè)文化尚未成形,處于客戶積累階段,較為關(guān)注引流。需要通過用戶畫像定位細(xì)分市場、產(chǎn)品模式及功能,這個階段需做定性調(diào)研了解目標(biāo)用戶,初步形成用戶畫像為需求做底層支撐,這個階段的用戶畫像顆粒度可以粗些,旨在幫助團(tuán)隊(duì)快速就“我們的用戶是誰”達(dá)成共識。

 

成長期:產(chǎn)品運(yùn)營中(已有數(shù)據(jù)積累)

這個時候產(chǎn)品已有demo或已上線迭代,產(chǎn)品處于完善、升級的階段。可使用“數(shù)據(jù)挖掘+定量篩選+定性豐富”的方式,結(jié)合項(xiàng)目的已有數(shù)據(jù),使用定量篩選用戶,做大量微觀且具體的用戶調(diào)研,基于后臺、第三方平臺監(jiān)控發(fā)現(xiàn)問題,定位問題關(guān)鍵及原因分析,優(yōu)化產(chǎn)品功能及運(yùn)營模式,再通過調(diào)研訪談了解具體的行為細(xì)節(jié)和態(tài)度。該階段的用戶畫像可用來驗(yàn)證問題、完善或發(fā)現(xiàn)新的機(jī)會點(diǎn)。

 

成熟期:產(chǎn)品相對穩(wěn)定

客戶資源相對穩(wěn)定,可能已有一定的規(guī)模,內(nèi)部管理需求增長,市場地位趨于穩(wěn)定,日常工作也大多以維護(hù)為主。且現(xiàn)有增長點(diǎn)已遇上了瓶頸,用戶活躍將不可阻逆地緩慢下降,即使你做再多產(chǎn)品優(yōu)化、燒錢運(yùn)營都無法改變產(chǎn)品終將走向衰退的命運(yùn),時間問題。企業(yè)急于尋找突破口和新的增長點(diǎn),用戶畫像又將被賦予新的使命:基于用戶畫像進(jìn)行“新增長點(diǎn)”的分析,定性挖掘藍(lán)海,再定量進(jìn)行驗(yàn)證

 

衰退期:產(chǎn)品活躍度快速下降

進(jìn)入到這個階段,說明產(chǎn)品沒有成功轉(zhuǎn)型。這時候再做用戶畫像的意義其實(shí)不大,如果一定要做,除了提高回流率、挖掘增長點(diǎn)外,可以定性了解原因,調(diào)整產(chǎn)品。

 

2.2 產(chǎn)品使用角色多樣性

不同于C端產(chǎn)品的的用戶單一性,B端產(chǎn)品的用戶畫像對應(yīng)的不是一個個體,而是一個組織或機(jī)構(gòu),同時涵蓋組織機(jī)構(gòu)中不同的人員。產(chǎn)品面向的使用對象可能從普通員工到企業(yè)高層,覆蓋銷售、技術(shù)、行政人事部分等,基于工作場景不一樣,對產(chǎn)品的需求可能也大相徑庭。

以一個CRM系統(tǒng)為例,一個復(fù)雜的B端產(chǎn)品可能會涉及以下四種角色的用戶:決策者、主要使用者、次要使用者、間接使用者。如下圖所示:

決策者:下決策購買產(chǎn)品或服務(wù)的人,可能是業(yè)務(wù)線負(fù)責(zé)人,也可能是公司董事長、CEO,他們常常不是產(chǎn)品的使用者,使用頻次低甚至完全不用,他們通常都是從公司的整體利益出發(fā),更關(guān)注產(chǎn)品能否給公司業(yè)務(wù)帶來幫助,降本還是提效了。其評價某個功能的好壞,往往與使用者的感受是相悖的,如釘釘?shù)摹癉ING一下”,他們并不太關(guān)注使用過程、體驗(yàn),更關(guān)注產(chǎn)品的核心價值,將利益最大化。

滿足決策者的需要是做好B端產(chǎn)品的前提,也是制作用戶畫像所要明確的方向;很多體驗(yàn)做的不好、難看的產(chǎn)品之所以也能在B端市場有一席之地,就是因?yàn)闈M足了企業(yè)的需要。比較理想的情況下,團(tuán)隊(duì)對目標(biāo)客群有一定深入的研究,形成趨于標(biāo)準(zhǔn)化的產(chǎn)品,就能打動目標(biāo)客戶群的大部分決策者。

主要使用者:真正頻繁使用產(chǎn)品的人,也是產(chǎn)品/設(shè)計(jì)師想要提升產(chǎn)品體驗(yàn)要瞄準(zhǔn)的人群

他們可能更關(guān)注產(chǎn)品的具體使用,是不是易用,有沒有幫助他們更便捷地完成工作,有沒有提高他們的工作效率。主要使用者是最容易識別的,以CRM系統(tǒng)為例,如果沒有銷售日常在系統(tǒng)中錄入客戶數(shù)據(jù),管理層就無法查看成單量、進(jìn)度等他們所關(guān)注的信息。

次要使用者:使用產(chǎn)品頻率相對主要使用者更低,用到的功能也比較少,只在某個中間流程涉及少量操作。如CRM系統(tǒng)中人事、財(cái)務(wù)會涉及到其中錢或出差的審批對他們而言,主要需求是能快速找到自己的任務(wù)并完成就可以了。

間接使用者:不直接使用產(chǎn)品但會被產(chǎn)品影響的人群,產(chǎn)品和設(shè)計(jì)師在設(shè)計(jì)過程如果有資源和精力能兼顧他們的需求和體驗(yàn),那就太貼心了。如審計(jì)、政府人員,屬于不緊急,非必要需求。

 

2.3 崗位職責(zé)決定了用戶目標(biāo)和使用場景

B端用戶使用場景多和業(yè)務(wù)形態(tài)密切相關(guān),產(chǎn)品通常要解決的是某類角色工作時發(fā)生的問題,所以不同于C端用戶畫像,從用戶視角出發(fā),關(guān)注用戶個人的場景、訴求、痛點(diǎn)和情緒,核心是滿足用戶的需求,關(guān)注用戶的年齡、性別、收入、個性、習(xí)慣、消費(fèi)模式等標(biāo)簽。

但是在B端產(chǎn)品中,我們拋開了用戶作為個人存在的標(biāo)簽,我們更關(guān)注用戶所代表的角色,他的崗位職責(zé)是什么,它在工作場景中需要完成哪些任務(wù),這些任務(wù)要做什么的,其崗位職責(zé)決定了它完成任務(wù)的目標(biāo)、場景、使用什么工具去,需要跟其他角色配合嗎等信息。

所以B2B畫像更關(guān)注角色的分類、工作/使用場景、用戶目標(biāo)、操作鏈路、角色協(xié)同等信息,很難看到類似這個人是不是已婚,小孩多大這些不知道如何應(yīng)用于產(chǎn)品設(shè)計(jì)的內(nèi)容。而在一個C端產(chǎn)品用戶畫像上很少看到有哪些讓他壓力山大的KPI等信息。

仍然以CRM系統(tǒng)為例,其主要使用者-銷售的目標(biāo)就是用該系統(tǒng)錄入商機(jī)、線索等,然后根據(jù)數(shù)據(jù)情況制定客戶溝通回訪計(jì)劃等,聚焦的是該系統(tǒng)能否讓他很好的履行了其崗位責(zé)任。和他這個人在哪個城市、已婚未婚等個人特性是無關(guān)的。

 

2.4 由客戶畫像和角色畫像構(gòu)成

B2B產(chǎn)品面向的是企業(yè)用戶,滿足的是產(chǎn)業(yè)鏈中各企業(yè)的經(jīng)營需求,這時B2B畫像應(yīng)該具備行業(yè)、客戶屬性這一維度;但是最終購買者、使用者都是企業(yè)中的某一角色,這決定了B2B畫像還有角色這一維度。所以,小編認(rèn)為,B2B用戶畫像是企業(yè)和多個核心角色共同構(gòu)成的畫像,建立B2B畫像,需要客戶(企業(yè))畫像和角色畫像兩部分的信息。

 

1)客戶畫像

客戶畫像指的是使用B端產(chǎn)品或服務(wù)的企業(yè)用戶,具有行業(yè)特征、企業(yè)特征及角色特征。其的目標(biāo)是促成銷售,主要用來幫助銷售/運(yùn)營人員他們快速定位目標(biāo)企業(yè),幫助他們更好的認(rèn)識我們客戶是什么樣的人,讓他們的工作更有方向。

一個典型的客戶色畫像會包括:

基本信息:外在的標(biāo)簽,如所處行業(yè)、地域、人員規(guī)模、收入規(guī)模(年?duì)I業(yè)額)

業(yè)務(wù)模式:線下的實(shí)際業(yè)務(wù)流程-視行業(yè)而定,如商業(yè)模式(靠什么賺錢)、業(yè)務(wù)模式(業(yè)務(wù)怎么運(yùn)作)

組織機(jī)構(gòu):自上而下都有哪些機(jī)構(gòu),彼此之間的關(guān)系。

關(guān)鍵角色:各個機(jī)構(gòu)里有哪些崗位/工種,決策鏈上有哪些角色、誰才是有價值的關(guān)鍵角色,角色話語權(quán)。企業(yè)的關(guān)鍵決策人隨企業(yè)大小而不同,一般中小型企業(yè)都是老板、合伙人等。而大型企業(yè)采購B端軟件都是需要經(jīng)過內(nèi)部流程的,最終審核人是老板,但其中影響決策最大的往往是商務(wù)經(jīng)理負(fù)責(zé)人。

 

2)角色畫像

B端產(chǎn)品雖然面向企業(yè),但是最終使用執(zhí)行的還是人,這些執(zhí)行層(終端使用者)也是產(chǎn)品的檢驗(yàn)者。在企業(yè)決定購買產(chǎn)品之前,執(zhí)行層沒有話語權(quán),但是在續(xù)費(fèi)的時候,他們的話語權(quán)比重會開始顯著提升。

因此在我們的產(chǎn)品設(shè)計(jì)階段,會更關(guān)注執(zhí)行層的角色畫像。當(dāng)我們討論產(chǎn)品、需求、場景、用戶體驗(yàn)的時候,往往需要將焦點(diǎn)聚集在這類人群上。

一個典型的角色畫像會包括:

基本信息:如角色名稱、照片、角色/工種、平臺偏好、文化水平、辦公場地、使用頻次,角色名稱以及照片是為了更有代入感的個人情況說明,但值得注意的是,這里的情況更多圍繞職業(yè)情況展開,比如工作年限,工作職責(zé),能力維度等,那些在C端中常見的家庭情況,幾個孩子什么的統(tǒng)統(tǒng)不重要。

用戶行為驅(qū)動:用戶的工作目標(biāo)、工作任務(wù)和考核指標(biāo),B端角色通常是企業(yè)員工,為了薪酬,有一般都會有結(jié)合任務(wù)而完成的考核指標(biāo),了解考核指標(biāo)可以在設(shè)計(jì)過程中更明確知道哪些內(nèi)容是用戶最關(guān)注的東西;

使用場景:工作的時間、地點(diǎn)及工作內(nèi)容是什么,使用場景是重要但容易被忽略的一個內(nèi)容,尤其要搞清楚使用產(chǎn)品的場景有哪些、用戶平時的工作流程是如何的、主要使用什么功能??捎靡粋€真實(shí)、普遍、易懂的故事勾勒一下

使用期望:日常工作面臨的挑戰(zhàn)和痛點(diǎn),期望獲得的幫助。

角色畫像和客戶畫像之間沒有直接關(guān)系。因?yàn)槟繕?biāo)不同,所以會有不同的用戶細(xì)分:客戶畫像的目標(biāo)是成銷售,獲取利益;角色畫像是為了解決問題和為用戶創(chuàng)造價值,進(jìn)一步為公司創(chuàng)造價值。但是在刻畫B2B用戶畫像時,如果只考慮執(zhí)行者的話,沒有客戶畫像作為指引、摸清決策者的特征與行為,你的產(chǎn)品功能或者體驗(yàn)設(shè)計(jì)上可能就會出現(xiàn)嚴(yán)重偏差,甚至方向錯誤。

3.1 客戶畫像的價值

產(chǎn)品和服務(wù)只是企業(yè)將價值傳遞給客戶的一種工具和媒介,無論產(chǎn)品形態(tài)如何,其本質(zhì)都是在解決客戶的問題。如果沒法滿足客戶的業(yè)務(wù)需求,基本上該產(chǎn)品對客戶是沒有價值的??蛻舢嬒褡饔秘灤┊a(chǎn)品生命全周期,產(chǎn)品/市場/銷售較為關(guān)注,它的價值主要體現(xiàn)有三點(diǎn):

對產(chǎn)品:明確為誰服務(wù),快速的了解客戶的需求和狀況,確定產(chǎn)品功能設(shè)計(jì),學(xué)會識別用戶的解決方案和用戶在場景下的訴求,不斷迭代調(diào)整產(chǎn)品;

對市場/運(yùn)營人員:建立對客戶盡量全面的了解并基于客戶畫像確定營銷內(nèi)容、營銷策略和渠道選擇,使產(chǎn)品的服務(wù)對象更聚焦;

對銷售人員:幫助銷售進(jìn)行客戶篩選,找到有效客戶,提高轉(zhuǎn)化率,確定業(yè)務(wù)方向和銷售打法。合理配置團(tuán)隊(duì),完成KPI。

客戶畫像越早建立越好,但是務(wù)必注意控制深度和成本,因?yàn)椴煌A段的企業(yè)其側(cè)重點(diǎn)有所不同。在初創(chuàng)期,產(chǎn)品團(tuán)隊(duì)可以通過關(guān)注典型客戶來積累定性數(shù)據(jù),從而低成本搭建客戶畫像;而到了成長期和成熟期,在擁有大量客戶數(shù)據(jù)的前提下,企業(yè)可以逐漸過渡到使用定性&定量相結(jié)合的方式來形成更為清晰的客戶畫像。

 

3.2 角色畫像的價值

以前業(yè)界有種說法,做B端,能用是第一位,用戶體驗(yàn)不重要。所以除了一些成規(guī)模的SaaS公司,設(shè)計(jì)師在B端幾乎無用武之地,成了組件化的搬運(yùn)工、工具人。所以大部分的企業(yè)在跑馬圈地時期是不注重用戶體驗(yàn)的,企業(yè)有客戶畫像,卻未必有角色畫像。

還說用戶體驗(yàn)不重要的人,可以看看有贊CEO白鴉的公開說明。

圖片來源于網(wǎng)絡(luò)

2020年,疫情為企業(yè)級SaaS帶來流量,在今年2月宣布延期復(fù)工后,釘釘搜索量激增數(shù)倍,無論中大型企業(yè)還是小微企業(yè)都紛紛加入了遠(yuǎn)程辦公的行列,協(xié)同辦公SaaS獲得了大量的“試用客戶”,加快了市場激活的進(jìn)程,但接下來,流量轉(zhuǎn)化和用戶留存成為后疫情時代的核心關(guān)注點(diǎn)。

后疫情時代,對企業(yè)來說,改善產(chǎn)品用戶體驗(yàn),了解使用產(chǎn)品的終端用戶,構(gòu)建角色畫像愈加重要。而角色畫像作為產(chǎn)品和設(shè)計(jì)師比較關(guān)注的畫像,有以下三點(diǎn)價值

設(shè)計(jì)前:幫助確立設(shè)計(jì)目標(biāo)、設(shè)計(jì)策略與準(zhǔn)則

設(shè)計(jì)中:解決架構(gòu)混亂問題,明確需求功能的合理性和優(yōu)先級;解決需求爭議問題和溝通問題,與團(tuán)隊(duì)成員就服務(wù)目標(biāo)達(dá)成共識,

設(shè)計(jì)后:解決可用性測試問題,幫助我們鎖定合適的測試用戶;

總結(jié)一下就是角色畫像是產(chǎn)品的根基,客戶畫像是產(chǎn)品的外延生命力的象征,兩者相輔相成。

 

對于這個章節(jié)。我將以我所負(fù)責(zé)的一款企業(yè)產(chǎn)品為例,來講述用戶畫像的創(chuàng)建過程。在這個項(xiàng)目中我們通過定性研究創(chuàng)建了用戶畫像,當(dāng)然如果必要,大家也可以在后期再通過定量研究對得到的用戶畫像進(jìn)行驗(yàn)證。

用戶畫像的創(chuàng)建可分為以下幾個步驟:

 

Step 1:研究準(zhǔn)備與數(shù)據(jù)收集

B端用研和C端有一點(diǎn)不同,企業(yè)用戶的使用場景基于業(yè)務(wù),背景復(fù)雜、角色多樣、使用工具特殊(如企業(yè)自有后臺系統(tǒng))等,導(dǎo)致無法在可用性實(shí)驗(yàn)室中切實(shí)地模擬出來,所以我們得接近用戶、基于業(yè)務(wù)場景去了解用戶。

小編大致總結(jié)了一下,B端用研有以下3大痛點(diǎn):

信息獲取難:B端產(chǎn)品主要針對用戶工作和業(yè)務(wù)開展,一般都是強(qiáng)制使用產(chǎn)品不存在“挑剔”的選擇空間,導(dǎo)致用戶的反饋就非常少,信息的獲取壁壘較高。“深度訪談”是最核心也是獲取信息性價比最高的一種方法,但是出于對信息用途的不了解,對商業(yè)隱私、生意經(jīng)驗(yàn)泄露的擔(dān)憂,B端用戶可能不愿意配合調(diào)研或不信任你。

業(yè)務(wù)復(fù)雜:缺乏行業(yè)經(jīng)驗(yàn),難以理解業(yè)務(wù),這會讓用研對象覺得你不專業(yè),仿佛雞同鴨講、對牛談琴。而且在不理解業(yè)務(wù)的情況下,設(shè)計(jì)師在訪談過程中會過于關(guān)注基礎(chǔ)業(yè)務(wù),無法進(jìn)行更深層次的訪談,采集的信息并非用戶的真正需求。

視角不同:設(shè)計(jì)師視角容易缺乏框架性思考,搞不清每個業(yè)務(wù)模塊/功能的邊界以及它們之間的關(guān)系,不能站在用戶(決策者、使用者)的角度思考問題,以至于被用戶牽著鼻子走,用戶說什么就是什么,能和用戶產(chǎn)生共鳴的部分極少。

俗話說“磨刀不誤砍柴工”,針對以上三大痛點(diǎn),項(xiàng)目伊始有必要進(jìn)行一輪全面的桌面研究,幫助我們快速建立對行業(yè)的全局認(rèn)知并了解業(yè)務(wù),另一方面,也有助于我們更好地和用戶進(jìn)行溝通。

 

研究內(nèi)容:

  • 1.產(chǎn)品的定位、盈利點(diǎn)及目標(biāo)客戶
  • 2.當(dāng)前的業(yè)務(wù)目標(biāo)是什么,主要解決什么問題
  • 3.整體業(yè)務(wù)框架,核心業(yè)務(wù)流程和使用場景
  • 4.不同角色之間如何協(xié)同以及每種角色的價值和目標(biāo)
  • 5.專業(yè)術(shù)語的理解
  • 6.達(dá)成業(yè)務(wù)目標(biāo)的關(guān)鍵資源和能力

 

研究途徑:

  • 1.公司官網(wǎng)、競品網(wǎng)站、查閱行業(yè)內(nèi)相關(guān)報告、參加行業(yè)會議等,形成對行業(yè)的整體認(rèn)知,如艾瑞網(wǎng)、易觀、CBDNData等專業(yè)網(wǎng)站。(部分報告需開通會員才能查閱)
  • 2.通過搜索引擎查詢關(guān)鍵詞查詢相關(guān)文章。
  • 3.最快捷的方式是向產(chǎn)品經(jīng)理/業(yè)務(wù)方要相關(guān)文檔或直接向他們請教。
  • 4.銷售??/客服/實(shí)施顧問等,一般上線的產(chǎn)品都會有客戶反饋群或來收集整理客戶實(shí)時反饋的需求信息,可以通過他們大概了解到目前產(chǎn)品有哪些問題
  • 5.如果有這方面的專家用戶,可以虛心向這些專家用戶請教,他們對業(yè)務(wù)的理解更加深入。

 

Step 2:確定目標(biāo)與畫像維度

此處有2個注意點(diǎn):

  • 1.如何篩選出目標(biāo)用戶?
  • 2.畫像維度有哪些?

針對以上2三點(diǎn),下文將依次展開說明。

 

1、如何篩選出目標(biāo)用戶?

Cooper指出,不能為超過3個以上的用戶畫像設(shè)計(jì)產(chǎn)品,這樣容易產(chǎn)生需求沖。當(dāng)有多個用戶畫像的時候,需要考慮用戶畫像的優(yōu)先級。前面講B2B畫像特點(diǎn)的提到過,由于是企業(yè)產(chǎn)品,僅僅產(chǎn)品中一條業(yè)務(wù)線,角色也是多樣的,所以在篩選目標(biāo)用戶時有一點(diǎn)尤其要注意:應(yīng)識別出關(guān)鍵的用戶畫像。

以我公司的招聘業(yè)務(wù)為例,為了便于大家在宏觀上確定什么樣的企業(yè)是我們主要的目標(biāo)用戶,我們的做法是按企業(yè)類型定義了三個KA客戶畫像。由產(chǎn)品、市場、以及各組leader一起來完成用戶畫像的優(yōu)先級排序工作。確定用戶畫像優(yōu)先級時,我們可以主要從以下幾個方面來考慮:

  • 使用頻率
  • 市場大小
  • 收益的潛力
  • 競爭優(yōu)勢/策略等

然后再找關(guān)鍵的角色畫像,即角色畫像中的決策者和主要使用者,次要使用者和間接使用者因時間、金錢的關(guān)系,現(xiàn)階段不做考慮。我司產(chǎn)品的客戶主要是勞動密集型企業(yè),作用是幫助客戶解決藍(lán)領(lǐng)用工問題和發(fā)薪合規(guī)問題。以招聘業(yè)務(wù)線為例,想把這個產(chǎn)品賣給某企業(yè),首先要打動該企業(yè)的HR總監(jiān),再說服CEO/董事長,再讓招聘部員工-HR試用。

那么這條決策鏈上的關(guān)鍵人就包括了HR總監(jiān)、CEO/董事長、HR。那在這個案例中,HR總監(jiān)是決策鏈的關(guān)鍵人物,因?yàn)橹挥兴J(rèn)可之后,才會申請購買或在CEO面前夸這個產(chǎn)品。而HR是最終產(chǎn)品的使用者,雖然他們在企業(yè)購買產(chǎn)品前沒有話語權(quán),但是在續(xù)費(fèi)階段,他們的話語權(quán)最大。對于處于成長期的產(chǎn)品來說,我們現(xiàn)階段的調(diào)研目標(biāo)也是為了獲取HR總監(jiān)和HR兩類角色的用戶畫像,每個角色訪談4~6人;

 

2、畫像維度有哪些?

篩選出了目標(biāo)用戶,那畫像維度有哪些呢?。以本案例為例,在本次用戶畫像的設(shè)計(jì)中,因我司產(chǎn)品處于優(yōu)化迭代階段,做用戶畫像的目的是了解用戶的使用情況,比如各功能的使用頻率、使用中遇到的問題,定位問題關(guān)鍵及原因分析,優(yōu)化產(chǎn)品功能及運(yùn)營模式,同時也希望通過了解用戶的具體行為細(xì)節(jié)和態(tài)度,發(fā)現(xiàn)新的機(jī)會點(diǎn)。

對于企業(yè),主要了解其企業(yè)規(guī)模、行業(yè)屬性、業(yè)務(wù)流程、組織架構(gòu)、機(jī)構(gòu)里有哪些崗位/工種。這個信息主要由產(chǎn)品或銷售采集,應(yīng)該前置于角色畫像。而我們第一步的業(yè)務(wù)研究中,很大一部分內(nèi)容也來自于此。

對于決策者,主要向其了解企業(yè)管理、業(yè)務(wù)等方面的需求信息,對于本產(chǎn)品決策者關(guān)注的是營收增長、效率提高還是減少成本等方面的問題。

對于主要使用者,側(cè)重了解用戶特征、產(chǎn)品認(rèn)知、使用場景與痛點(diǎn),各功能的使用頻率、使用中遇到的問題等

根據(jù)前面前文提到的的用戶畫像構(gòu)成要素和自身業(yè)務(wù)情況,有選擇性的摘取,最終梳理出本案的用戶畫像維度如下:

 

Step 3:確定調(diào)研方法

明確了調(diào)研對象后,就可以展開調(diào)研了。一般有三種方式:

  • 定性研究,基于小樣本的研究,如用戶訪談、實(shí)地調(diào)研、輪崗-理解現(xiàn)象原因;
  • 定量研究,收集更大規(guī)模樣本的調(diào)查數(shù)據(jù),如問卷調(diào)研、數(shù)據(jù)分析-發(fā)現(xiàn)現(xiàn)象;
  • 定量+定性研究,兩者的結(jié)合。

定量和定性調(diào)研究雖各有優(yōu)劣,但定量較為昂貴、費(fèi)時,也需要有精通統(tǒng)計(jì)分析的認(rèn)為協(xié)助,在B端調(diào)研方式中并不太實(shí)用。對大多數(shù)團(tuán)隊(duì)而言,定性是性價比最高、最合適的。它不僅提供了“用戶是誰、他們想要什么”,還是基于數(shù)據(jù)、經(jīng)濟(jì)高效較為快捷的一種方式。

采用何種研究方法,主要根據(jù)企業(yè)生命周期、研究目的、項(xiàng)目時間和經(jīng)費(fèi)等進(jìn)行綜合考量,本案中我們選擇深度訪談收集一手資料。

 

Step 4:采集角色資料

在明確目標(biāo)與方法后,需要對整個研究進(jìn)行細(xì)化,制定具體詳實(shí)的執(zhí)行計(jì)劃并開始招募用戶采集資料了??赏ㄟ^前中后三個階段性策略的來進(jìn)行訪談。

 

1. 訪談前:搭建信任基礎(chǔ)

在構(gòu)建用戶畫像的step 1中,我們已經(jīng)對業(yè)務(wù)和要訪談的用戶角色有了一定的了解。只需在訪談時間的4-7天前,根據(jù)確定的畫像維度來設(shè)計(jì)訪談大綱。設(shè)計(jì)大綱的目的是避免訪談過程中對話內(nèi)容發(fā)散、混亂而無法收集到足夠多的有效信息。

需要注意的是:大綱需要針對訪談的每一條需求,做到詳細(xì)、縝密,同時要考慮用戶對訪談題目的理解,可根據(jù)產(chǎn)品使用順序,由易到難、客觀到主觀、概括到具體的順序展開,比如產(chǎn)品功能的使用頻率就可以作為一個客觀問題放在問題的開始。且要考慮訪談的時間,因?yàn)樵L談的時間不易過長,所以訪談提綱也不能過于冗長,典型的訪談大綱模板如下圖所示:

并提前將訪談目的告知受訪者,能讓他們看到訪談的直接或間接價值(提高工作效率、降低成本等),也就能更好地建立雙方的信任。因此,我們需要提前確認(rèn)整個訪談的規(guī)劃,并主動將相關(guān)信息告知受訪者,包括訪談的時間、地點(diǎn)、方式、目的、流程,還有過程中可能涉及的問題、后續(xù)發(fā)放的獎品等。

 

2. 訪談中:表現(xiàn)專業(yè)特質(zhì)

開場介紹

跟C端訪談一樣,正式訪談開始之前的開場白非常重要!除了再次介紹自己(不管是什么崗位,此刻我就是用戶研究員),說明這次訪談的目的,一定還要強(qiáng)調(diào)訪談的隱私性和數(shù)據(jù)安全性,畢竟他們面對的是真金白銀的生意。

 

暖場

在正式訪談前,可以先和用戶閑聊2~3分鐘,通過一定的溝通活躍氣氛,讓用戶更加放松,同時增強(qiáng)用戶對我們信任。暖場和開場介紹可穿插進(jìn)行,沒有絕對的先后之分,在訪談?wù)咦晕医榻B完成之后,也可以讓被訪者進(jìn)行自我介紹。

 

一般問題

一般問題是指一些比較基礎(chǔ)性問題,用戶不需要進(jìn)行太多思考即可回答,比如“你最常用的功能是哪些”、“使用時間多長”。

 

深入問題

深入問題是用戶行為和想法更加深入的探索,會更關(guān)注用戶行為細(xì)節(jié)和行為背后的動機(jī)。一般在問這些問題時,訪談?wù)咝枰粩嗟卦儐栍脩魹槭裁矗钡接脩魺o法繼續(xù)回答。深入問題是整個訪談的核心,也最容易挖掘到用戶需求和痛點(diǎn)。

 

回顧與總結(jié)

每部分的訪談結(jié)束后可進(jìn)行簡單的小結(jié)。訪談?wù)咄ㄟ^回顧訪談過程對用戶的行為和態(tài)度進(jìn)行客觀闡述,一方便有助于訪談?wù)呤崂硭悸罚硪环矫孀層脩魧υL談結(jié)果再次確認(rèn)。

 

3. 訪談后:實(shí)現(xiàn)長線共贏

最好和訪談對象建立長期聯(lián)系,尤其是一線業(yè)務(wù)人員。人和人面對面聊過后,會產(chǎn)生基本的信任感和好感,要借助訪談的機(jī)會,拉近和業(yè)務(wù)人員的距離。如果后續(xù)項(xiàng)目中遇到問題,想獲取最真實(shí)的一線反饋,可以聯(lián)系之前的訪談對象,尋求幫助。

 

Step 5:分析建模

1)根據(jù)角色對訪談對象分組

將用戶訪談后得出的重點(diǎn)信息寫在便利貼上(或Excel表中打印后切片),設(shè)計(jì)師需要根據(jù)產(chǎn)品用戶角色不同,將受訪的用戶歸類分組,如HR和HR總監(jiān)。

 

2)找出行為變量

分組后,需要識別關(guān)鍵的行為變量,將調(diào)研到的用戶與行為變量進(jìn)行一一對應(yīng),并識別差異化行為模式。如下圖所示

 

3)映射訪談對象與行為變量的關(guān)系

再將不同的角色間同類行為模式歸納(合并同類項(xiàng)),進(jìn)行行為描述。此處需注意以行為變量為依據(jù)進(jìn)行用戶對應(yīng)時,不必追求絕對的精準(zhǔn),只要相對能映射清楚即可。梳理完后,觀察可發(fā)現(xiàn)某些用戶群體聚集在幾個行為變量上,它們構(gòu)成了一個顯著的行為模式,由此聚類出某個角色類型。依此類推,可以發(fā)現(xiàn)幾個不同的行為模式。為保證全面,映射完最好遍歷一下,檢查是否有用戶或變量的遺漏。

 

4)找出共性行為模式

完成映射后,尋找在變量軸上的對象群。梳理完后,如果一組對象聚集在多個不同的變量上,則可以代表一類角色存在顯著的共性行為表現(xiàn)(通常每類角色會有2~3個共性行為)。共性行為能幫我們識別標(biāo)準(zhǔn)化產(chǎn)品需要滿足的用戶需求,而差異化行為可以根據(jù)企業(yè)需求做定制化服務(wù),一個B端產(chǎn)品是不太可能滿足所有用戶的需求的。

 

Step 6:畫像呈現(xiàn)

一旦我們找到共性行為,就可以創(chuàng)造用戶畫像了。梳理出每類角色的行為、目標(biāo)、痛點(diǎn)等維度特征,形成畫像的基本框架。最后再完善用戶畫像,此時我們需要做的事情主要是:

  • 1)結(jié)合真實(shí)的數(shù)據(jù),選擇典型特征加入到用戶畫像中
  • 2)結(jié)合使用場景進(jìn)行故事描述,在描述中體現(xiàn)行為變量等因素,讓畫像更加豐滿、真實(shí)。
  • 3)讓用戶畫像容易記憶,比如用照片、名字、年齡、幾條簡單的關(guān)鍵特征描述,都可以減輕讀者的記憶負(fù)擔(dān)

最終客戶畫像呈現(xiàn)如下圖

數(shù)據(jù)已脫敏,非真實(shí)數(shù)據(jù)

 

最終角色畫像呈現(xiàn)如下圖 

數(shù)據(jù)已脫敏,非真實(shí)數(shù)據(jù)

 

用戶畫像作為一個強(qiáng)大的設(shè)計(jì)和交流工具,能夠讓利益相關(guān)人目標(biāo)始終保持一致,它的價值在于傳播與使用。舉個例子,90年代,庫珀將用戶畫像的描述做成一頁紙貼在墻上,一個產(chǎn)品的一個用戶畫像做一頁紙,這樣設(shè)計(jì)團(tuán)隊(duì)成員每天走進(jìn)辦公室就能看到。

用戶畫像制作出來后,與整個項(xiàng)目團(tuán)隊(duì)共享定義的用戶畫像是很重要的,千萬不要讓他在共享文檔里積灰或掛在墻上當(dāng)擺設(shè)。你要做的是讓用戶畫像從紙上躍起,走進(jìn)你同事的心里,讓他在每次討論、每個決策時,自然、自發(fā)地被提起。所以用戶畫像的使用也是極其重要的,不然前面的工作都是無用之功。

所以,你可能需要:

向團(tuán)隊(duì)介紹用戶畫像?;c(diǎn)時間介紹研究的過程,展示照片給他們看,聊一聊畫像的需求,期望,痛點(diǎn),性格等。最好以故事性的方式進(jìn)行引導(dǎo),并長期地在會議里提到并討論它

 

在你的用戶故事中使用用戶畫像。“如果我是**業(yè)務(wù)招聘員,我想要快速識別出今天某門店招聘的人數(shù)和到崗的人數(shù)”。設(shè)計(jì)時,花點(diǎn)時間想象一下軟件會被用戶在工作中如何應(yīng)用。

 

造訪不同團(tuán)隊(duì),介紹用戶畫像,包括它從何來,如何用。教他們怎么招募有代表性的用戶進(jìn)行測驗(yàn),如何寫用戶情景來啟發(fā)設(shè)計(jì)或作為可用性測試任務(wù)

 

總的來說,在你能力范圍之類的地方,宣傳用戶畫像的商業(yè)價值,提升大家的信任。畢竟用戶畫像可以幫助產(chǎn)研團(tuán)隊(duì)跳出自己的需求,了解真正使用產(chǎn)品的人的需求。當(dāng)越來越多的團(tuán)隊(duì)使用用戶畫像,那么用戶畫像就會越來越像一個真實(shí)的用戶,幫助團(tuán)隊(duì)從用戶的角度出發(fā)去設(shè)計(jì)產(chǎn)品。

 

值得注意的一點(diǎn)是,用戶畫像并非一成不變的,很大程度上受環(huán)境和周期的影響,所以我們要定期回顧自己的用戶畫像,對他們進(jìn)行一些更新,確保和現(xiàn)實(shí)一致性。市場變化和策略的變化可能會重新定義你的業(yè)務(wù)受眾,也可能出現(xiàn)其他的細(xì)分,這也是重新調(diào)整用戶畫像的好機(jī)會,否則它們最終將失去生命力。希望你的用戶畫像也能始終對業(yè)務(wù)起到幫助,為體驗(yàn)助力。

文章來源:學(xué)UI網(wǎng)   作者:小紐扣

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ù)



我們對2021年的用戶體驗(yàn)有何期待?

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

用戶體驗(yàn)設(shè)計(jì)是一個動態(tài)領(lǐng)域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數(shù)字世界和現(xiàn)實(shí)世界之間的互動方式發(fā)生了突然的變化。人們不僅開始在網(wǎng)上花費(fèi)更多的時間;他們的思考方式和表現(xiàn)方式也發(fā)生了不同。

本文主要闡述2021用戶體驗(yàn)的趨勢,我們相信這將在新的一年里占據(jù)主導(dǎo)地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


語音介面

我們在2020年UX狀態(tài)預(yù)測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設(shè)計(jì)中最熱門的趨勢之一。可以肯定地說,明年不應(yīng)忽略它。

毫無疑問,到2021年,語音聊天機(jī)器人和虛擬助手將繼續(xù)流行。用戶在數(shù)字體驗(yàn)方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術(shù)的迅速發(fā)展使品牌別無選擇,只能在其產(chǎn)品中包含基于語音的功能。

已經(jīng)有許多企業(yè)為廣泛的VUI實(shí)施奠定了基礎(chǔ)。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機(jī)器人。其目標(biāo)是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗(yàn)。



簡約的UI

極簡主義可能是當(dāng)今視覺設(shè)計(jì)中最明顯的趨勢之一。用戶正在體驗(yàn)越來越多的網(wǎng)站所有者想要傳遞的關(guān)鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉(zhuǎn)化網(wǎng)站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設(shè)計(jì)應(yīng)運(yùn)而生的地方。

但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優(yōu)雅”和“高效”。盡管必須使用數(shù)量有限的顏色,設(shè)計(jì)元素和明亮的組合,但UX設(shè)計(jì)人員仍然有很大的發(fā)揮空間。此外,元素的功能最為重要,正確突出產(chǎn)品功能并傳達(dá)正確信息的能力需要大量的創(chuàng)造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




內(nèi)容,消息和導(dǎo)航的清晰度是UX設(shè)計(jì)的簡約方法的另一個重要方面。信息過載對于大多數(shù)現(xiàn)代用戶來說是一個痛苦,這意味著網(wǎng)站所有者應(yīng)努力使自己的UX文字簡潔明了。


負(fù)空間

負(fù)空間是用戶體驗(yàn)設(shè)計(jì)的一種大趨勢,它已經(jīng)脫離了對簡約UI的市場需求。簡而言之,負(fù)空間是頁面布局中對象周圍(宏空間)或?qū)ο髢?nèi)部(微空間)的空白區(qū)域。它已經(jīng)成為獨(dú)立的設(shè)計(jì)元素,在視覺美學(xué)和用戶體驗(yàn)優(yōu)化中起著至關(guān)重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創(chuàng)建的網(wǎng)站就是很好的例子。






留出一定的空間,在設(shè)計(jì)中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負(fù)空間的主要功能是整理網(wǎng)頁,以吸引用戶對關(guān)鍵對象和消息的注意。建立清晰的內(nèi)容層次結(jié)構(gòu)有助于UX設(shè)計(jì)人員將用戶的注意力吸引到最重要的內(nèi)容上。




負(fù)空間有時也稱為“空白區(qū)域”或“留白區(qū)域”。所有這些術(shù)語都是可以互換的。當(dāng)區(qū)域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗(yàn)趨勢。

不完美的元素

在發(fā)生COVID-19大流行之后的在線體驗(yàn)將與我們習(xí)慣的在線體驗(yàn)不同。UX設(shè)計(jì)以相關(guān)方式反映了缺陷。為了使品牌的數(shù)字化形象更具關(guān)聯(lián)性,設(shè)計(jì)師有意在版面設(shè)計(jì)中實(shí)現(xiàn)了一些“缺陷”。 它可以是任何東西,從手繪對象到構(gòu)圖或頁面的不尋常元素。







通常,不完美的設(shè)計(jì)可以很好地證明品牌的身份并突出其獨(dú)特性。但是,如果要應(yīng)用這種UX趨勢,則必須記住一個關(guān)鍵規(guī)則:必須保持平衡。如果你做得過多,那是行不通的。



同態(tài)

中性風(fēng)格是UI設(shè)計(jì)中其他兩種大規(guī)模方法(擬態(tài)和平面設(shè)計(jì))的組合,它們通常被認(rèn)為彼此相對。擬態(tài)化是關(guān)于模仿現(xiàn)實(shí)世界中的物體以及我們與物體交互的方式。

幾十年前,當(dāng)需要使用超現(xiàn)實(shí)元素來創(chuàng)建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設(shè)計(jì)是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

同質(zhì)性兼顧了兩者的優(yōu)點(diǎn)。它使用圖形強(qiáng)度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創(chuàng)建它們。中性風(fēng)格不會將現(xiàn)實(shí)主義推到極致。取而代之的是,它努力實(shí)現(xiàn)淺色和微妙對比度的“柔和”外觀。



在過去大約一年的時間里,同質(zhì)化一直是UI / UX專業(yè)人員中討論最多的主題之一。盡管仍然沒有很多真正的數(shù)字產(chǎn)品的用戶界面遵循這種方法,但許多設(shè)計(jì)人員對該概念感到興奮。像Behance和Dribbble這樣的專業(yè)平臺已經(jīng)包含了許多同態(tài)的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現(xiàn)在我們的手機(jī)和筆記本電腦中。



3D元素和視差

視差效果和3D元素并不是UX設(shè)計(jì)中的全新內(nèi)容。我們已經(jīng)看到了如何在許多Web設(shè)計(jì)解決方案中實(shí)現(xiàn)它們。但是,我們?nèi)匀挥^察到這些用戶體驗(yàn)趨勢正在逐步普及。

首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網(wǎng)絡(luò)上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務(wù)品牌的網(wǎng)站和應(yīng)用上。




另一種趨勢是嘗試在一個界面中結(jié)合視差效果和3D圖形。使用視差滾動時,網(wǎng)頁背景和前景元素以不同的速度移動。僅憑它就能產(chǎn)生深度感。通過為此添加3D對象,您可以創(chuàng)建一種真正的身臨其境的體驗(yàn),并將在用戶的記憶中保留很長時間。


 



  

不對稱

隨著我們設(shè)備屏幕的變寬,UI / UX設(shè)計(jì)中出現(xiàn)了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術(shù)和網(wǎng)頁設(shè)計(jì)中與極簡主義相反的一種風(fēng)格。但是,如果與其他殘酷的設(shè)計(jì)元素分開使用,它可以使您的網(wǎng)站看起來有趣,同時使它保持微妙和優(yōu)雅。


不對稱布局的UI / UX趨勢通常與其他創(chuàng)造性的Web設(shè)計(jì)技術(shù)一起實(shí)現(xiàn),例如破碎的網(wǎng)格,重疊的元素和分割的屏幕。您也可以將不對稱性應(yīng)用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




但是,請務(wù)必記住,非對稱設(shè)計(jì)并不意味著“隨機(jī)放置的UI元素”。在布局上定位對象的不尋常方式應(yīng)該引導(dǎo)用戶的眼睛朝正確的方向前進(jìn),并幫助品牌強(qiáng)調(diào)重要信息。

動畫制作

今天,當(dāng)我們在互聯(lián)網(wǎng)上進(jìn)入隨機(jī)網(wǎng)站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運(yùn)動設(shè)計(jì)元素。動畫在用戶體驗(yàn)設(shè)計(jì)中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導(dǎo)航。他們還可以為數(shù)字產(chǎn)品或服務(wù)注入生命,使它們更具個性。



如果要在用戶界面設(shè)計(jì)中使用這種軟件開發(fā)趨勢,那么明智地執(zhí)行此操作至關(guān)重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計(jì)劃的要早離開網(wǎng)頁。動畫元素也不應(yīng)使用戶界面不必要地復(fù)雜。它們始終必須是相關(guān)的,有價值的和平穩(wěn)的。

信息架構(gòu)

信息體系結(jié)構(gòu)是在頁面上組織和構(gòu)造不同內(nèi)容的方式。它是以用戶為中心的設(shè)計(jì)(UCD)的基本要素,旨在使用戶的數(shù)字環(huán)境更加舒適。與用戶研究和可用性測試一起,構(gòu)建有效,有用且一致的信息體系結(jié)構(gòu)是UCD流程的必不可少的階段。



為了創(chuàng)建一個實(shí)用的信息體系結(jié)構(gòu),UX設(shè)計(jì)人員需要對產(chǎn)品的目標(biāo)受眾,其行為以及使用數(shù)字解決方案的原因有深入的了解。用戶應(yīng)該無需花費(fèi)太多精力就能獲得所需的結(jié)果。因此,在設(shè)計(jì)過程的線框階段始終必須考慮用戶的目標(biāo),清晰的導(dǎo)航和內(nèi)容表示(包括盲點(diǎn)監(jiān)視)。

最后的想法

我們創(chuàng)建此文章是為了讓您在當(dāng)今競爭異常激烈的數(shù)字世界中站穩(wěn)腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網(wǎng)站的用戶體驗(yàn)。即使用戶期望很高,它們也可以使您的產(chǎn)品在視覺上對目標(biāo)受眾更具吸引力。


文章來源:站酷   作者:ZZiUP

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ù)


我們對2021年的用戶體驗(yàn)有何期待?

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

用戶體驗(yàn)設(shè)計(jì)是一個動態(tài)領(lǐng)域,每年都會為我們帶來新的趨勢,最近十二個月也不例外。全球新冠病毒大流行和國家封鎖使我們與數(shù)字世界和現(xiàn)實(shí)世界之間的互動方式發(fā)生了突然的變化。人們不僅開始在網(wǎng)上花費(fèi)更多的時間;他們的思考方式和表現(xiàn)方式也發(fā)生了不同。

本文主要闡述2021用戶體驗(yàn)的趨勢,我們相信這將在新的一年里占據(jù)主導(dǎo)地位。查看一下您可以利用哪些趨勢超越競爭對手并在人群中脫穎而出吧。


語音介面

我們在2020年UX狀態(tài)預(yù)測中討論了語音用戶界面(VUI)。如今年所示,語音指令仍然是UX設(shè)計(jì)中最熱門的趨勢之一??梢钥隙ǖ卣f,明年不應(yīng)忽略它。

毫無疑問,到2021年,語音聊天機(jī)器人和虛擬助手將繼續(xù)流行。用戶在數(shù)字體驗(yàn)方面一直在尋求簡單性和效率。市場需求,高期望值以及人工智能技術(shù)的迅速發(fā)展使品牌別無選擇,只能在其產(chǎn)品中包含基于語音的功能。

已經(jīng)有許多企業(yè)為廣泛的VUI實(shí)施奠定了基礎(chǔ)。例如,星巴克推出了一種名為My Starbucks Barista的基于AI的聊天機(jī)器人。其目標(biāo)是通過允許用戶通過語音命令購買自己喜歡的飲料來改善咖啡訂購體驗(yàn)。



簡約的UI

極簡主義可能是當(dāng)今視覺設(shè)計(jì)中最明顯的趨勢之一。用戶正在體驗(yàn)越來越多的網(wǎng)站所有者想要傳遞的關(guān)鍵消息。Cookie彈出窗口,打折廣告和各種通知旨在吸引和轉(zhuǎn)化網(wǎng)站訪問者,但它們也吸引了我們的注意力。這就是簡約的以用戶為中心的設(shè)計(jì)應(yīng)運(yùn)而生的地方。

但是,“極簡主義”并不意味著“沉悶”或“原始”。意思是“優(yōu)雅”和“高效”。盡管必須使用數(shù)量有限的顏色,設(shè)計(jì)元素和明亮的組合,但UX設(shè)計(jì)人員仍然有很大的發(fā)揮空間。此外,元素的功能最為重要,正確突出產(chǎn)品功能并傳達(dá)正確信息的能力需要大量的創(chuàng)造力。相反,僅具有裝飾目的的組件正逐漸失去其重要性。




內(nèi)容,消息和導(dǎo)航的清晰度是UX設(shè)計(jì)的簡約方法的另一個重要方面。信息過載對于大多數(shù)現(xiàn)代用戶來說是一個痛苦,這意味著網(wǎng)站所有者應(yīng)努力使自己的UX文字簡潔明了。


負(fù)空間

負(fù)空間是用戶體驗(yàn)設(shè)計(jì)的一種大趨勢,它已經(jīng)脫離了對簡約UI的市場需求。簡而言之,負(fù)空間是頁面布局中對象周圍(宏空間)或?qū)ο髢?nèi)部(微空間)的空白區(qū)域。它已經(jīng)成為獨(dú)立的設(shè)計(jì)元素,在視覺美學(xué)和用戶體驗(yàn)優(yōu)化中起著至關(guān)重要的作用。谷歌的主頁,蘋果的官方商店以及一些用Webflow創(chuàng)建的網(wǎng)站就是很好的例子。






留出一定的空間,在設(shè)計(jì)中添加“寂靜的感覺”,必須是始終有意義的。否則,用戶可以將其視為缺少信息。負(fù)空間的主要功能是整理網(wǎng)頁,以吸引用戶對關(guān)鍵對象和消息的注意。建立清晰的內(nèi)容層次結(jié)構(gòu)有助于UX設(shè)計(jì)人員將用戶的注意力吸引到最重要的內(nèi)容上。




負(fù)空間有時也稱為“空白區(qū)域”或“留白區(qū)域”。所有這些術(shù)語都是可以互換的。當(dāng)區(qū)域中沒有元素時,您還可以在深色模式或任何其他顏色下使用此用戶體驗(yàn)趨勢。

不完美的元素

在發(fā)生COVID-19大流行之后的在線體驗(yàn)將與我們習(xí)慣的在線體驗(yàn)不同。UX設(shè)計(jì)以相關(guān)方式反映了缺陷。為了使品牌的數(shù)字化形象更具關(guān)聯(lián)性,設(shè)計(jì)師有意在版面設(shè)計(jì)中實(shí)現(xiàn)了一些“缺陷”。 它可以是任何東西,從手繪對象到構(gòu)圖或頁面的不尋常元素。







通常,不完美的設(shè)計(jì)可以很好地證明品牌的身份并突出其獨(dú)特性。但是,如果要應(yīng)用這種UX趨勢,則必須記住一個關(guān)鍵規(guī)則:必須保持平衡。如果你做得過多,那是行不通的。



同態(tài)

中性風(fēng)格是UI設(shè)計(jì)中其他兩種大規(guī)模方法(擬態(tài)和平面設(shè)計(jì))的組合,它們通常被認(rèn)為彼此相對。擬態(tài)化是關(guān)于模仿現(xiàn)實(shí)世界中的物體以及我們與物體交互的方式。

幾十年前,當(dāng)需要使用超現(xiàn)實(shí)元素來創(chuàng)建直觀且用戶友好的UI時,它很流行。垃圾桶就是例子之一。另一方面,平面設(shè)計(jì)是一個更新的,簡化的概念,圍繞二維元素,極簡主義和鮮艷的色彩。

同質(zhì)性兼顧了兩者的優(yōu)點(diǎn)。它使用圖形強(qiáng)度大的元素,陰影和漸變來使按鈕和卡片類似于自然界中的對象,而不是精確地重新創(chuàng)建它們。中性風(fēng)格不會將現(xiàn)實(shí)主義推到極致。取而代之的是,它努力實(shí)現(xiàn)淺色和微妙對比度的“柔和”外觀。



在過去大約一年的時間里,同質(zhì)化一直是UI / UX專業(yè)人員中討論最多的主題之一。盡管仍然沒有很多真正的數(shù)字產(chǎn)品的用戶界面遵循這種方法,但許多設(shè)計(jì)人員對該概念感到興奮。像Behance和Dribbble這樣的專業(yè)平臺已經(jīng)包含了許多同態(tài)的例子。因此,我們有充分的理由相信,這一趨勢最終將在2021年出現(xiàn)在我們的手機(jī)和筆記本電腦中。



3D元素和視差

視差效果和3D元素并不是UX設(shè)計(jì)中的全新內(nèi)容。我們已經(jīng)看到了如何在許多Web設(shè)計(jì)解決方案中實(shí)現(xiàn)它們。但是,我們?nèi)匀挥^察到這些用戶體驗(yàn)趨勢正在逐步普及。

首先,它的使用量顯著增加。如今,3D元素和視差效果已不再是網(wǎng)絡(luò)上奇特的事物。它們更為常見,特別是在代表著脫穎而出的時尚和電子商務(wù)品牌的網(wǎng)站和應(yīng)用上。




另一種趨勢是嘗試在一個界面中結(jié)合視差效果和3D圖形。使用視差滾動時,網(wǎng)頁背景和前景元素以不同的速度移動。僅憑它就能產(chǎn)生深度感。通過為此添加3D對象,您可以創(chuàng)建一種真正的身臨其境的體驗(yàn),并將在用戶的記憶中保留很長時間。


 



  

不對稱

隨著我們設(shè)備屏幕的變寬,UI / UX設(shè)計(jì)中出現(xiàn)了不對稱趨勢。通常,不對稱是野獸派的一種屬性,這是藝術(shù)和網(wǎng)頁設(shè)計(jì)中與極簡主義相反的一種風(fēng)格。但是,如果與其他殘酷的設(shè)計(jì)元素分開使用,它可以使您的網(wǎng)站看起來有趣,同時使它保持微妙和優(yōu)雅。


不對稱布局的UI / UX趨勢通常與其他創(chuàng)造性的Web設(shè)計(jì)技術(shù)一起實(shí)現(xiàn),例如破碎的網(wǎng)格,重疊的元素和分割的屏幕。您也可以將不對稱性應(yīng)用于排版。如果操作正確,它將使您的品牌信息更加引人注目和令人難忘。




但是,請務(wù)必記住,非對稱設(shè)計(jì)并不意味著“隨機(jī)放置的UI元素”。在布局上定位對象的不尋常方式應(yīng)該引導(dǎo)用戶的眼睛朝正確的方向前進(jìn),并幫助品牌強(qiáng)調(diào)重要信息。

動畫制作

今天,當(dāng)我們在互聯(lián)網(wǎng)上進(jìn)入隨機(jī)網(wǎng)站時,很可能會看到GIF,微型動畫,動畫插圖或其他一些運(yùn)動設(shè)計(jì)元素。動畫在用戶體驗(yàn)設(shè)計(jì)中仍然很流行,并且使用頻率不斷增長。

除了具有視覺吸引力之外,移動物體還可以改善用戶參與度并簡化導(dǎo)航。他們還可以為數(shù)字產(chǎn)品或服務(wù)注入生命,使它們更具個性。



如果要在用戶界面設(shè)計(jì)中使用這種軟件開發(fā)趨勢,那么明智地執(zhí)行此操作至關(guān)重要。漂浮在屏幕上沒有特定目的的對象可能會使訪問者感到困惑,從而促使他們甚至比計(jì)劃的要早離開網(wǎng)頁。動畫元素也不應(yīng)使用戶界面不必要地復(fù)雜。它們始終必須是相關(guān)的,有價值的和平穩(wěn)的。

信息架構(gòu)

信息體系結(jié)構(gòu)是在頁面上組織和構(gòu)造不同內(nèi)容的方式。它是以用戶為中心的設(shè)計(jì)(UCD)的基本要素,旨在使用戶的數(shù)字環(huán)境更加舒適。與用戶研究和可用性測試一起,構(gòu)建有效,有用且一致的信息體系結(jié)構(gòu)是UCD流程的必不可少的階段。



為了創(chuàng)建一個實(shí)用的信息體系結(jié)構(gòu),UX設(shè)計(jì)人員需要對產(chǎn)品的目標(biāo)受眾,其行為以及使用數(shù)字解決方案的原因有深入的了解。用戶應(yīng)該無需花費(fèi)太多精力就能獲得所需的結(jié)果。因此,在設(shè)計(jì)過程的線框階段始終必須考慮用戶的目標(biāo),清晰的導(dǎo)航和內(nèi)容表示(包括盲點(diǎn)監(jiān)視)。

最后的想法

我們創(chuàng)建此文章是為了讓您在當(dāng)今競爭異常激烈的數(shù)字世界中站穩(wěn)腳跟。這里提到的所有UX趨勢絕對可以改善幾乎每個軟件解決方案或網(wǎng)站的用戶體驗(yàn)。即使用戶期望很高,它們也可以使您的產(chǎn)品在視覺上對目標(biāo)受眾更具吸引力。

文章來源:站酷   作者:ZZiUP

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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設(shè)計(jì)分享達(dá)人

深色模式并不萬能 


從移動屏幕到大型電視,深色的UI界面隨處可見。深色模式可以表達(dá)力量、奢華、精致和優(yōu)雅,但這種設(shè)計(jì)模式也會帶來很多挑戰(zhàn),應(yīng)用不當(dāng)難免會被用戶吐槽。所以開始設(shè)計(jì)前,大家最好深色熟慮下,是否真的需要做深色。


物理學(xué)家說,黑色并不是一種真正的顏色,它沒有光。艾薩克·牛頓爵士在通過棱鏡照耀陽光的實(shí)驗(yàn)中,甚至沒有將黑色包含在顏色光譜中。


在色彩心理學(xué)中,大多數(shù)色彩代表不同的人、不同的事物。西方文化里,黑色常與死亡、神秘和邪惡聯(lián)系在一起;綠色與生長、自然相關(guān);藍(lán)色可以使人平靜,因?yàn)樗屓寺?lián)想到天空和水,所以,顏色是飽含情感的。其他影響還來自文化,例如紫色仍與奢侈品聯(lián)系在一起,在許多古代文化中,紫色是昂貴稀有的,只有貴族才能負(fù)擔(dān)得起。


深色界面的數(shù)字產(chǎn)品,是未來發(fā)展的一大趨勢。人們常說,這種模式可以減輕眼睛疲勞,但并沒有相關(guān)證據(jù)表明是真的。在某些情況下,它還代表著節(jié)省電池壽命,也是一種美學(xué)意義上的選擇。



深色模式應(yīng)用限制

并非所有界面都適合深色主題。設(shè)計(jì)師應(yīng)考慮品牌契合度、文化適應(yīng)性和顏色心理學(xué),在選擇搭配時考慮情感影響,雖然這些因素不容易平衡。針對千禧一代的金融類應(yīng)用程序,可能會用深色模式營造炫酷的效果,但對于以大眾作為目標(biāo)人群的銀行網(wǎng)站就不太合適了。當(dāng)用戶想要查看自己的余額與支付賬單時,太黑暗、太時髦都會顯得華麗不實(shí)用。


B2B SaaS應(yīng)用程序的深色模式很難設(shè)計(jì),標(biāo)準(zhǔn)的Web UI組件(例如數(shù)據(jù)表、窗口小部件、表單和下拉菜單)在深色界面中看起來可能很奇怪。由于許多配色方案不適用于深色界面,對于某些品牌和產(chǎn)品來說,深色模式并不是最優(yōu)選擇。


從未接觸過深色模式的設(shè)計(jì)師,如果想要搭建一個深色界面,不妨參照以下條件,先來判斷下是否需要,什么情況下建議使用深色模式?

-當(dāng)設(shè)計(jì)版面相對稀疏,極簡型的內(nèi)容比較少時;

-適用于連貫呈現(xiàn)的內(nèi)容,例如夜間娛樂應(yīng)用程序;

-想要創(chuàng)造醒目的戲劇性外觀時。


以下這些情況下不建議使用深色模式:

-出現(xiàn)大量文本時(在深色背景上閱讀相對困難);

-當(dāng)設(shè)計(jì)需要多種顏色時。


深色模式下的桌面應(yīng)用信息中心 by Ramotion 


在深色模式中形成對比

深色模式并不非要設(shè)計(jì)成黑色的,你可以將它理解為是一種「低光」模式。設(shè)計(jì)的核心點(diǎn)之一,就是表達(dá)出足夠的對比度,這樣視覺元素就會被分離開,且文本也會變得清晰易讀。大多數(shù)設(shè)計(jì)師認(rèn)為多用黑色,是獲得強(qiáng)烈對比度的最佳選擇。我的建議是,最好不要將純黑色(#000000)用于背景或者盡量少用,把它留給其他UI元素,比如較小的圖形或邊框性質(zhì)類的圖形。


Google的Material Design深色模式,推薦使用深灰色(#121212)作為界面主色,目的是為了表達(dá)出更有深度的空間感。在定義配色方案時,往深灰中添加一些微妙的深藍(lán)色,可以讓數(shù)字產(chǎn)品的界面擁有更好的深色調(diào)性。


Brittany Chiang網(wǎng)站將深灰色與藍(lán)色融合,形成了令人愉悅的深色模式


使用灰色的優(yōu)點(diǎn)在于,它給了設(shè)計(jì)師更多發(fā)揮的空間,去表達(dá)更廣泛的顏色?;疑{(diào)同深藍(lán)色有同樣功能,幫助畫面更有深度,也更輕松地看到元素陰影。


需要特別注意深色模式中的文本對比,網(wǎng)頁內(nèi)容可訪問性指南(WCAG)要求——「文本的視覺呈現(xiàn)對比度,至少應(yīng)為4.5:1」,大型文本的對比度至少在3:1。設(shè)計(jì)師需要確保文字內(nèi)容在黑暗模式下能夠清晰可辨認(rèn)。


另外,測試其他UI元素(例如卡片、按鈕、字段和各種顯示器上的圖標(biāo))之間的對比也是一個好辦法。如果UI元素之間沒有突出的對比,那么設(shè)計(jì)就需要調(diào)整下了,枯燥無味的設(shè)計(jì)對于用戶來說也是一種折磨。


左側(cè)的深色模式中,文本和背景之間的對比明顯不足


重點(diǎn)注意一:配色

顏色在深色模式中非常突出,最好使用淺色、飽和度低的配色方案,避免過于刺激視覺。顏色與文本一起使用時,需要參照WCAG的AA標(biāo)準(zhǔn),至少4.5:1。Google建議顏色數(shù)量不必太多,使界面都處于深色中。


Jabra Sound +應(yīng)用程序只給深色模式配色選擇了2-3種顏色


適宜的配色方案能營造出非常好的對比效果。Colorable在線工具,只要輸入色號就能看到文本和背景色組合在一起是否合適;Google的Material Design網(wǎng)站上也有一個調(diào)色板生成器,設(shè)計(jì)師可以使用它創(chuàng)建調(diào)色板,應(yīng)用到UI上。


文字和基本元素(例如按鈕和圖標(biāo))在深色背景上顯示時應(yīng)符合易讀性標(biāo)準(zhǔn)。如上面的Jabra Sound +應(yīng)用程序所示,文本和圖標(biāo)可以使用白色以外的顏色進(jìn)行搭配。


“使用強(qiáng)烈對比色來提高可讀性。人們對于顏色的感知會受到許多因素影響,包括字號、字重、顏色亮度、屏幕分辨率和照明條件。” ——Apple人機(jī)界面指南


深色模式并不需要大量顏色來堆砌


重點(diǎn)注意二:利用負(fù)空間,少即是多

成功的深色模式設(shè)計(jì),需要巧妙利用負(fù)空間。如果設(shè)計(jì)不當(dāng),會使數(shù)字產(chǎn)品顯得笨拙與沉重。為了平衡這一點(diǎn),設(shè)計(jì)師可以利用極簡主義中的負(fù)空間,讓深色界面更輕巧,也能讓用戶更容易識別信息內(nèi)容。


UI元素周圍的大量負(fù)空間使界面被重新定義,而且元素也不會出現(xiàn)密集與混亂感。如果沒有呼吸空間,用戶在閱讀界面時,可能很快的略過,因?yàn)榇竽X沒有快速的識別出重要內(nèi)容。


充斥著太多元素和文本的界面,是導(dǎo)致深色模式體驗(yàn)差的禍根。設(shè)計(jì)師需要仔細(xì)考慮深色模式中的視覺層次結(jié)構(gòu),從而提升用戶體驗(yàn)。


極簡主義的深色模式界面 by Denys Tyrynskyi


重點(diǎn)注意三:版式

深色模式中的每一段文字都需要仔細(xì)檢查,更需要關(guān)注2個方面——可讀性和對比性。首先,界面中的文本必須足夠大,以確保清晰易讀(深色背景上的小文字,閱讀起來體驗(yàn)很差);其次,文本和背景之間必須有明顯的對比。設(shè)計(jì)師可以通過增加對比度,為較小的文本調(diào)整字體大小、字符間距和行高,去優(yōu)化可讀性問題。


W3C AAA建議常規(guī)尺寸的文本(如果不是粗體,則小于18pt)的對比度至少應(yīng)為7:1。這也適用于其他UI元素——圖標(biāo)、文本圖像和文本標(biāo)簽(按鈕標(biāo)簽),設(shè)計(jì)師有責(zé)任確保所有人都能正確應(yīng)用界面。


深色模式中應(yīng)用優(yōu)秀字體很有必要,像Google字體和字體庫,以及Adobe Typekit都能提供便捷的設(shè)計(jì)支持。


AirPods Pro頁面使用超大字體和強(qiáng)烈的對比,以達(dá)到最好的效果


重點(diǎn)注意四:空間深度感

深色模式不應(yīng)該是平淡的,在正常明亮模式下,元素的高光或是陰影都會讓界面產(chǎn)生深度感。而深色界面更具挑戰(zhàn)性,建議設(shè)計(jì)師可以使用類似3-4多個層面,以及相應(yīng)的配色方案來傳達(dá)深度感。


為什么要有深度?深度感是與物理世界的一種呼應(yīng)。我們的視覺有深度感知的能力,因?yàn)槿藗兪巧钤?D世界中的。表面的照明方式不同,以表示不同的海拔高度。位置越高,越接近隱式光源,表面就越亮。一個非常亮的表面,更容易區(qū)分組件之間的高度,還有助于查看陰影,使每個表面的邊緣線更明顯。


表面越亮,越接近隱藏光源 by Material Design


設(shè)置每個級別的表面顏色需要小心,建議不要超過4或5個級別,最好在設(shè)計(jì)系統(tǒng)中將元素的文本顏色指定為純黑色(#000000),以在淺灰色背景上實(shí)現(xiàn)良好的對比度。


深色模式設(shè)計(jì)啟發(fā)

基于上述原則,以下是一些優(yōu)秀的深色模式示例:


The Atom Finance website


Atom Finance利用深色模式打造了精致外觀,并將其強(qiáng)調(diào)色限制為3種。復(fù)雜的金融網(wǎng)站采用了極簡設(shè)計(jì),而且很好地使用了陰影來表現(xiàn)不同組件的深度感。


電子商務(wù)網(wǎng)站 by Daniel Klopper


電子商務(wù)網(wǎng)站 by Darion Mitchell


IBM儀表板 by Ruben Fernandez


盡管處理SaaS的深色模式遇到了挑戰(zhàn),但I(xiàn)BM的數(shù)據(jù)可視化儀表板仍是典范。強(qiáng)調(diào)色的數(shù)量最少,并且該網(wǎng)站使用細(xì)微的陰影顯示不同元素的深度。


Wego,Spotify和Apple的深色模式APP(Android和iOS)


使用深色模式固然好,但需要依據(jù)實(shí)際產(chǎn)品屬性來判斷,不應(yīng)出于時髦、流行甚至是與眾不同或模仿他人等因素確定。設(shè)計(jì)者應(yīng)有充分的選擇依據(jù),并考慮其內(nèi)容、使用環(huán)境以及顯示設(shè)備是否適合來最終敲定。


深色模式適用于一些數(shù)字產(chǎn)品,而非所有產(chǎn)品,界面簡潔非常關(guān)鍵。對于復(fù)雜且數(shù)據(jù)繁重的B2B平臺,以及文本繁多的頁面,深色模式都是不適合的。對于從情感和美學(xué)角度去探索深色模式的設(shè)計(jì)師來說,他們開辟了一個新的領(lǐng)域。

文章來源:站酷   作者:UX辭典

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ù)


管理學(xué) - 抽屜式管理法

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

實(shí)用的管理方法


抽屜式管理法是一種通俗形象的管理術(shù)語,在現(xiàn)代管理中也叫做職務(wù)分析。抽屜式管理的主要含義是在每個管理人員的辦公桌的抽屜里,都有一個明確的職務(wù)工作規(guī)范。它包括兩個方面的含義

 

 - 每個人所從事的、責(zé)、權(quán)、等四個方面進(jìn)行明確的規(guī)定,做到四者統(tǒng)一;


 - 明確每個人所從事的管理和主要專業(yè)業(yè)務(wù),分工協(xié)作關(guān)系,橫向縱向聯(lián)合事宜,以及上下左右的對口單位等,達(dá)到理順企業(yè)管理關(guān)聯(lián)的目的。


抽屜式管理是近幾年世界上最為流行的管理方法。

他的主要內(nèi)容包括兩個方面

 

 - 業(yè)務(wù)部門的職務(wù)分析,即職能權(quán)限范圍。業(yè)務(wù)部門的職責(zé)權(quán)限范圍分析,應(yīng)根據(jù)企業(yè)的總體目標(biāo)、生產(chǎn)經(jīng)營指標(biāo),以及專業(yè)對口的要求和協(xié)作關(guān)系進(jìn)行層層的分析、逐級落實(shí)、明確規(guī)定;


 - 管理人員的職務(wù)分析,即職務(wù)說明或職務(wù)規(guī)范;


管理人員的能力分析要根據(jù)管理層次的不同劃分來進(jìn)行,它的關(guān)鍵是處理好集權(quán)分權(quán)的關(guān)系。例如一家設(shè)計(jì)公司,美術(shù)指導(dǎo)要對設(shè)計(jì)總監(jiān)負(fù)責(zé),資深設(shè)計(jì)師要對美術(shù)指導(dǎo)負(fù)責(zé),設(shè)計(jì)師要對資深設(shè)計(jì)師負(fù)責(zé),設(shè)計(jì)助理要對設(shè)計(jì)師負(fù)責(zé),實(shí)習(xí)生要對設(shè)計(jì)助理負(fù)責(zé)。

 

企業(yè)在施行抽屜式管理方法時,首先要組織一個由各個部門結(jié)成的職務(wù)分析小組。并對職務(wù)分析小組進(jìn)行短期培訓(xùn),以掌握抽屜式管理的概念和內(nèi)涵。其次,企業(yè)應(yīng)圍繞企業(yè)的總體目標(biāo)、生產(chǎn)經(jīng)營指標(biāo)、根據(jù)業(yè)務(wù)對口,編制業(yè)務(wù)職責(zé)權(quán)限范圍。

 

企業(yè)應(yīng)分層進(jìn)行管理人員分析,按職、責(zé)、權(quán)、利四者統(tǒng)一,制定管理人員職務(wù)說明或職務(wù)規(guī)范。最后,企業(yè)需要制定必要的考核、獎懲機(jī)制,與職務(wù)分析法配套執(zhí)行。

 

 


流行的管理方法


在一些商業(yè)企業(yè)中,不同程度的存在著職責(zé)分不清,分工不明確,權(quán)利與責(zé)任相分離等問題,造成辦事效率低,拖拉等狀況,它們一般都表現(xiàn)在

 

 - 各部門分工不明確,一些工作上的事情誰都不管,有些事情又都想插手,造成互相扯皮,嚴(yán)重影響了實(shí)際工作效率;


 - 企業(yè)內(nèi)部橫向聯(lián)系比較差,協(xié)調(diào)能力弱,使執(zhí)行人員只能聽四方指示,八方匯報,大大的延長了工作流程,極大的影響了實(shí)際工作效率與人員浪費(fèi);


 - 企業(yè)用人多少缺乏一個客觀標(biāo)準(zhǔn),容易受魅力偏見的影響,強(qiáng)壯的和漂亮的應(yīng)聘者更受歡迎;對于設(shè)計(jì)行業(yè)而言作品造假,作品集過度包裝引起的能力與職位不匹配的問題,沒有一個較為標(biāo)準(zhǔn)的審查機(jī)制,都屬于個人的主觀因素。


 

企業(yè)要進(jìn)行策略管理,就必須明確企業(yè)內(nèi)部各個崗位的主要職責(zé)以及各職務(wù)之間的分工協(xié)作關(guān)系,它能大大的提高企業(yè)戰(zhàn)略管理的科學(xué)性、系統(tǒng)性和有效性。

 

抽屜式管理在人力資源管理中一般用于職務(wù)分析。隨著社會經(jīng)濟(jì)的發(fā)展,抽屜式管理的公司也越來越普遍,人們認(rèn)為抽屜式管理是21世紀(jì)初現(xiàn)代化管理發(fā)展的新趨勢

 

當(dāng)前一些經(jīng)濟(jì)發(fā)達(dá)國家的大中型企業(yè)都非常重視抽屜式管理和職位分類,并且都在抽屜式管理的基礎(chǔ)上,不同程度的建立了職位分類制度。絕大部分世界500強(qiáng)企業(yè)都在實(shí)施抽屜式管理,這一工具在福特經(jīng)理們的心目中,具有非常重要的地位,幾乎每一個經(jīng)理人都在管理下級之中應(yīng)用了這一工具。

 

 

 

抽屜式管理的步驟


第一步 - 建立一個由各部門組成的職務(wù)分析小組


考評小組的組成人員包括:


 - 企業(yè)領(lǐng)導(dǎo)者:可以保障部門權(quán)責(zé)設(shè)定與企業(yè)整體目標(biāo)一致,保障權(quán)威性與決策的有效性。

 - 人力資源管理領(lǐng)導(dǎo)者:抽屜式管理模式的主管者,有利于人力資源管理精準(zhǔn)性的提升。

 - 各部門角領(lǐng)導(dǎo)者和員工代表:促進(jìn)決策的民主性和科學(xué)性。



第二步 - 正確處理企業(yè)內(nèi)部的集權(quán)和分權(quán)關(guān)系

 

要考慮與正確劃分,在哪些領(lǐng)域或事項(xiàng)上集權(quán),在哪些工作上分權(quán),部門權(quán)責(zé)考評小組要以整體績效為基準(zhǔn)。


第三步 - 圍繞企業(yè)的總體目標(biāo),層層分解、逐級落實(shí)職責(zé)權(quán)限范圍

 

層層分解與逐級落實(shí)是“抽屜式”管理模式的核心環(huán)節(jié),或者說是管理落實(shí)與職權(quán)細(xì)化的關(guān)鍵性步驟。整體目標(biāo)指的是企業(yè)戰(zhàn)略總目標(biāo),實(shí)現(xiàn)企業(yè)經(jīng)濟(jì)效益、提升管理績效與職權(quán)分解、落實(shí)是目標(biāo)與手段的關(guān)系。



第四步 - 編寫職務(wù)說明書,制定出每個職務(wù)工作的要求準(zhǔn)則

 

職務(wù)說明書包括兩部分,即對部門領(lǐng)導(dǎo)者和員工的職務(wù)都進(jìn)行規(guī)范化說明。其次制定員工職務(wù)說明書,通過書面化的形式將員工工作相關(guān)內(nèi)容進(jìn)行明確規(guī)定。哪個員工在哪個環(huán)節(jié)上出了問題,只要拿出放在抽屜內(nèi)的職務(wù)說明書即可進(jìn)行查詢。


第五步 - 制定考核與獎懲制度,與職務(wù)分析法配套執(zhí)行

 

績效考核與獎懲制度是抽屜式管理模式的保障性措施,也是提升管理有效性的配套手段。制定與權(quán)、責(zé)相配套的獎懲、晉升制度。以職務(wù)說明書為依據(jù),通過績效考核反饋給予認(rèn)真履職者獎勵,給予玩忽職守者相應(yīng)的懲罰。



總結(jié):其實(shí)抽屜式管理法就是管理層的一種管理手段,在抽屜里放一些對于員工的職務(wù)職責(zé)的約束規(guī)則,在心理上給員工施壓,進(jìn)而使之完善所做的工作;在規(guī)則上也同樣施壓,一旦員工的工作不飽和,又或沒有完善部分工作,就可以直接拿規(guī)則說事兒,企業(yè)也挺雞賊的。


對于員工而言還是要不斷完善自身能力,自己沒有問題別人也挑不出問題,其次要注意溝通協(xié)作的問題,把自己工作做好的同時,如果有精力和能力也幫助同事提升能力和幫助完善部分工作,對自己負(fù)責(zé),對公司負(fù)責(zé),同事和公司才會對你負(fù)責(zé),更看重你。

文章來源:站酷   作者:羅耀_系列

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ì)定義

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

人類一切創(chuàng)造性活動造物活動都可以稱為設(shè)計(jì),這是從廣義角度去理解設(shè)計(jì)的定義。從狹義角度理解設(shè)計(jì)的定義,設(shè)計(jì)就是構(gòu)想和解決問題的過程。應(yīng)以人為本,通過系統(tǒng)化的方法滿足消費(fèi)者的市場需求,進(jìn)而產(chǎn)生功能價值審美價值。


除了廣義與狹義的設(shè)計(jì)定義,處在不同時期不同的人站在的角度和立場均不同,產(chǎn)生的觀點(diǎn)是各抒己見,各不相同。在國內(nèi)考研只用采用其中一種定義就可以了,但知識是要去學(xué)習(xí)和理解的,這里我研讀了近100本書籍,把所有關(guān)于設(shè)計(jì)的定義都整理出來供大家學(xué)習(xí)與參考。

 


設(shè)計(jì)的定義


彼得·勞倫斯(美國設(shè)計(jì)學(xué)會創(chuàng)始人):設(shè)計(jì)是一種手段,通過這種手段可以提高生活質(zhì)量,并能有效的滿足人類的需求


王受之教授:設(shè)計(jì)是把計(jì)劃、規(guī)劃、設(shè)想、解決問題的方式,通過視覺化的形式傳達(dá)出來的過程


《大不列顛百科詞典》(1786年 / 工業(yè)革命前):設(shè)計(jì)指的是立體、色彩、結(jié)構(gòu)、輪廓、線條、形狀、比例、動態(tài)和審美方面的協(xié)調(diào)

 

《大不列顛百科詞典》(1976年 / 工業(yè)革命后):設(shè)計(jì)常指擬定計(jì)劃的過程,又特指記在心中或者制作成草圖的具體計(jì)劃

6:19 STUDIO - slava balbek / Nata Kurylenko

 


《簡明不列顛百科全書》(1985年 / 中美編譯):Design包含兩個層面,第一個層面指“心理上的計(jì)劃”,即計(jì)劃的思考與擬定計(jì)劃的過程;第二個層面指“藝術(shù)計(jì)劃”,即把計(jì)劃中的想法制成草圖的具體計(jì)劃。

 

《韋伯斯特大辭典》(名詞方面):針對某一目的在腦中形成的規(guī)劃;根據(jù)對象預(yù)先所作出的模型;文學(xué)、戲劇作品的輪廓;音樂作品的框架;視覺藝術(shù)作品的線條、細(xì)節(jié)、外觀等方面的相互關(guān)系

 

《韋伯斯特大辭典》(動詞方面):頭腦中的想象與計(jì)劃;策劃;創(chuàng)造功能;為了達(dá)到目的而進(jìn)行的創(chuàng)造、規(guī)劃和計(jì)算;用商標(biāo)、符號表達(dá);對物象的描繪;零部件的形狀與配置

 

《牛津英文詞典》(1588年):設(shè)計(jì)是由人所設(shè)想一種計(jì)劃,或是為了實(shí)現(xiàn)某物而做的綱要

6:19 STUDIO - slava balbek / Nata Kurylenko


《授予博士碩士學(xué)位和培養(yǎng)研究生的學(xué)科專業(yè)簡介》(1999年):設(shè)計(jì)是一門多學(xué)科交叉的、實(shí)用性的藝術(shù)科學(xué),其內(nèi)涵是按照文化藝術(shù)與科學(xué)技術(shù)相結(jié)合的規(guī)律,創(chuàng)造人類生活的物質(zhì)產(chǎn)品和精神產(chǎn)品的一門科學(xué)

 

柳冠中教授《工業(yè)設(shè)計(jì)學(xué)概論》:設(shè)計(jì)應(yīng)該被認(rèn)為是一種方法論,應(yīng)提高‘一切人為事物’的角度來認(rèn)識

 

李硯祖教授:設(shè)計(jì)是人類改變原有事物,使其變化、增益、更新、發(fā)展的創(chuàng)造性活動,設(shè)計(jì)是構(gòu)想和解決問題的過程,它涉及人類一切有目的的價值創(chuàng)造活動

 

尹定邦教授:設(shè)計(jì)其實(shí)就是人類把自己的意志加在自然界之上,用以創(chuàng)造人類文明的一種廣泛的活動,設(shè)計(jì)是一種文明

6:19 STUDIO - slava balbek / Nata Kurylenko

  


我國《高級漢語大詞典》:按照任務(wù)的目的和要求,預(yù)先設(shè)定好工作方案和計(jì)劃,繪制出為解決這個問題而設(shè)計(jì)的圖案

 

我國綜合字典《辭?!?/strong>:設(shè)計(jì)指“按照任務(wù)的目的和要求,預(yù)先定出工作方案和計(jì)劃,繪出圖樣,為解決這個問題而專門設(shè)計(jì)的圖案”

 

赫伯特·西蒙《人工科學(xué)》書中的一段話:凡是以現(xiàn)存情形改變成向往情形,為目標(biāo)而構(gòu)思行動方案的人都是在搞設(shè)計(jì)

6:19 STUDIO - slava balbek / Nata Kurylenko  



阿切爾:設(shè)計(jì)是圍繞目標(biāo)的問題求解的活動

 

路甬祥:設(shè)計(jì)是在一定的約束條件下,最合理的滿足社會的需求


佩齊:設(shè)計(jì)是從客觀現(xiàn)實(shí)向未來可能富有想象力的跨越

6:19 STUDIO - slava balbek / Nata Kurylenko

 


???/strong>:設(shè)計(jì)是獲得足夠把握前,對未來產(chǎn)品盡可能多地模仿

 

喬尼斯:設(shè)計(jì)是表達(dá)一種精粹信念的活動

 

里斯維克:設(shè)計(jì)是從無到有的創(chuàng)造,創(chuàng)造新的、有用的事物

 

 


考研知識


國內(nèi)的知識大多數(shù)采用國內(nèi)教育工作者對設(shè)計(jì)的定義,例如我們在網(wǎng)上查關(guān)于設(shè)計(jì)的定義,一般都會出現(xiàn)相同的搜索結(jié)果,也就是《現(xiàn)代漢語詞典》對設(shè)計(jì)的定義,即“在正式做某件工作之前,根據(jù)一定目的的要求,預(yù)先制定方法、圖樣等。

6:19 STUDIO - slava balbek / Nata Kurylenko

 

另外考研的知識點(diǎn)還有設(shè)計(jì)的核心內(nèi)容知識,包括以下三個階段;


第一階段 計(jì)劃,構(gòu)思的形成

第二階段 將計(jì)劃、構(gòu)思、設(shè)想、解決問題的方式利用視覺化的傳達(dá)方式表現(xiàn)出來,如圖紙、制作效果圖、模型等

第三階段 將設(shè)計(jì)的方案實(shí)施完成    

 

 

 

附加知識


以上指的設(shè)計(jì)的定義是不包含工程設(shè)計(jì)的,工程設(shè)計(jì)主要解決人造物(機(jī)械、設(shè)備、交通工具、建筑等等)中的物與物之間的關(guān)系,包括產(chǎn)品的內(nèi)部功能、結(jié)構(gòu)、傳動原理、組裝條件等。


工程設(shè)計(jì)主要是研究和實(shí)施建筑、城市、景觀設(shè)計(jì)與工業(yè)產(chǎn)品(建筑屬于工業(yè))、造型設(shè)計(jì)、功能性設(shè)計(jì)、結(jié)構(gòu)設(shè)計(jì)、可靠性設(shè)計(jì)、生產(chǎn)工藝設(shè)計(jì)、生產(chǎn)系統(tǒng)集成設(shè)計(jì)等的工程技術(shù)領(lǐng)域,工程設(shè)計(jì)更注重產(chǎn)品的實(shí)施與落地。

6:19 STUDIO - slava balbek / Nata Kurylenko

工業(yè)設(shè)計(jì)就是對工業(yè)產(chǎn)品的使用方式、人機(jī)關(guān)系、外觀造型等做設(shè)計(jì)和定義的過程。他將產(chǎn)品的功能通過有型的方式創(chuàng)造性的體現(xiàn),使得工業(yè)產(chǎn)品和人的適當(dāng)?shù)摹⒏咝У?,甚至有情感的交流得以?shí)現(xiàn)。是一種產(chǎn)品與人溝通的語言,是工業(yè)產(chǎn)品和人之間的重要紐帶,是用戶體驗(yàn)的決定性組成部分。


文章中提到的設(shè)計(jì)是解決物與物關(guān)系的同時,更側(cè)重于解決物與人的關(guān)系問題,考慮產(chǎn)品對人的生理、心理的作用。因此設(shè)計(jì)是包含藝術(shù)審美同時又有科學(xué)技術(shù)的人文科學(xué)、社會科學(xué)相結(jié)合的藝術(shù)。

文章來源:站酷   作者:羅耀_系列

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ì) 80 個為什么(2):設(shè)計(jì)和理念

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

這 80 個問答將分為 7 篇,每天更新一篇:

  • 《誕生和發(fā)展》
  • 《設(shè)計(jì)和理念》
  • 《聊天》
  • 《搖一搖、附近的人和漂流瓶》
  • 《朋友圈、視頻動態(tài)和狀態(tài)》
  • 《小程序和微信支付》
  • 《公眾號、看一看和視頻號》

資料主要來源于:

  • 張小龍公開演講和媒體采訪報道。
  • 陸樹燊(前支付寶資深產(chǎn)品經(jīng)理,微信創(chuàng)始團(tuán)隊(duì)成員)的微信公眾號:行者慎思。
  • Genie(微信產(chǎn)品經(jīng)理)的產(chǎn)品分享。
  • KantZhou(拼多多用戶端產(chǎn)品總監(jiān),前微信產(chǎn)品經(jīng)理)的產(chǎn)品分享。
  • 啃餅(微信研發(fā)工程師)的微信公眾號:啃餅隨想。

設(shè)計(jì)和理念

問: 微信的頁面設(shè)計(jì)很少改,那微信的設(shè)計(jì)師們每天在做什么呢?很閑嗎?

陸樹燊答: 張小龍?jiān)u審微信的功能有一個習(xí)慣:不看原型圖,不看設(shè)計(jì)稿,也不看 Demo,要體驗(yàn)前后臺代碼開發(fā)好后的產(chǎn)品。這就意味著:如果一個功能在給到用戶之前有過 N 個方案,則微信設(shè)計(jì)師已經(jīng)設(shè)計(jì)了 N 個方案,前后端開發(fā)人員已經(jīng)開發(fā)過 N 個版本的代碼。給張小龍體驗(yàn),然后 100 個需求能砍掉 70 個。其中 30 個再優(yōu)化 N 次,才真正發(fā)布給用戶使用。

問: 對做微信的設(shè)計(jì)師有什么特別的要求嗎?

張小龍答: 在廣研(微信事業(yè)群前身)里面我們禁止使用競爭對手的產(chǎn)品,特別是 UI 設(shè)計(jì)師。因?yàn)榇蠹抑溃坏┠阌昧烁偁帉κ值漠a(chǎn)品,你一定會受它的影響。你會覺得“哦,那樣做是最好的”,你會擺脫不了它的影子。之前我們也經(jīng)常發(fā)生這樣的情況,UI 設(shè)計(jì)師一旦用了競爭對手的產(chǎn)品以后,設(shè)計(jì)里面就會不自覺地帶有對方的影子。所以后來我們干脆規(guī)定不允許使用競爭對手的產(chǎn)品。這個問題對我們公司來說其實(shí)蠻嚴(yán)重的,有很多時候可能我們覺得只是借鑒一下,但是一旦借鑒就會受到影響。所以最直接的方法就是禁止使用。希望大家所在的團(tuán)隊(duì)也可以嘗試使用這個方法。這個方法不會讓大家損失任何東西。

但我們要了解競爭對手怎么辦?我們可以讓產(chǎn)品經(jīng)理去體驗(yàn)競品,讓產(chǎn)品經(jīng)理總結(jié)哪些體驗(yàn)是挺好的,UI 設(shè)計(jì)師知道這些體驗(yàn)是很好的,但是 UI 設(shè)計(jì)師要自己想辦法去實(shí)現(xiàn)好的體驗(yàn),而不是被對手所牽制和影響。

問: 對于微信來說,最關(guān)注的體驗(yàn)是什么?

張小龍答: 操作的響應(yīng)速度永遠(yuǎn)是第一體驗(yàn)。我們在做郵箱時思考:對于一個好產(chǎn)品來說,可能需要滿足幾個要求,比如“切入要準(zhǔn)”“功能設(shè)計(jì)得要好”。但我們把速度這項(xiàng)單獨(dú)列出來,就是“速度一定要快”,這個速度是指系統(tǒng)響應(yīng)的速度。

我們回顧 QQ 郵箱能做起來,有兩點(diǎn)是最重要的:第一是簡單;第二是速度快。簡單和速度快,合起來是「簡捷」,簡單快捷?!负唵魏汀翱旖荨笔怯脩趔w驗(yàn)里面 最重要的兩個關(guān)鍵詞。

在微信 4.0 的時候,點(diǎn)擊進(jìn)入一個會話群的響應(yīng)速度是挺慢的,我們做了很多的改進(jìn)來保證進(jìn)入速度得到提高。而在微信的朋友圈里,時間線的流暢度也非常重要,我們的開發(fā)在這里做了很多次的重構(gòu)才保證了流暢的體驗(yàn)感,保證我們速度能超越所有有時間線的產(chǎn)品。雖然為了提升這里的速度,開發(fā)的代價很大,但是這樣的代價是值得的。

問: 微信 UI 設(shè)計(jì)最看重哪方面?

張小龍答:UI 里面最重要的是條理清晰。有時我們會誤認(rèn)為 UI 就是怎么把用戶界面表現(xiàn)得更絢麗一些,但是所有的視覺表現(xiàn)都不如條理清晰重要。

舉個例子。微信的語音輸入條經(jīng)過了很多進(jìn)化,現(xiàn)在用的是最下面的式樣。

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

最下面的式樣具有美感,字體也很清晰,「加好友」按鈕在右邊也很順手。這都是經(jīng)過了很多變遷的。前兩個設(shè)計(jì),在語音和文字切換的時候,還需要通過菜單來完成。后來一個 UI 設(shè)計(jì)師朋友提出意見,覺得這個地方使用不方便,每次切換都要用菜單多點(diǎn)一下。但是語音文字的切換是最常用的,應(yīng)該放在左邊固定。我覺得他說得很有道理,我們就在下一個版本里面修改了。

所以 UI 做得絢麗并不是最重要的。微信里面用的東西都很樸實(shí),你不會看到花花綠綠的東西,能用系統(tǒng)控件的就用系統(tǒng)控件,而且盡可能保持一致的式樣,包括一種字體、一種控件、一種背景,所有的東西最好只使用一種,不要增加兩種或者更多種。

我們也一直鼓勵每個界面只有一個主題。學(xué)習(xí)過攝影的同事都知道,一張照片里面只有一個主題。所以我們不會做兩分式的設(shè)計(jì),并且每個界面都會突出這個主題,把別的主題都虛化掉,或者把它放到一邊去。每個對話框都有一個明顯的默認(rèn)按鈕。比如每個對話框右上角都有一個完成按鈕,并且是藍(lán)色的。我們還用了文字來規(guī)定必須這樣做。因?yàn)槲覀円層脩暨M(jìn)到一個對話框后立即可以找到哪里可以完成,所以按鈕一定要很顯眼。

這是一個反面例子:

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

這個界面右上角有一個按鈕,底下有兩個按鈕,會讓人覺得很迷惑。很多用戶跟我們說,以前他是壓縮發(fā)圖,但是現(xiàn)在有兩個按鈕,他就會點(diǎn)原圖發(fā)送了。然后就忘記去點(diǎn)完成了,造成了一定的迷惑。這是一個不好的例子,是我們需要優(yōu)化的地方。

問: 為什么微信的主題色是綠色?

張小龍答: 最初版的微信主色調(diào)是藍(lán)色,后來換成了綠色。其實(shí)我們現(xiàn)在有點(diǎn)后悔用綠色,因?yàn)樵诤芏喟沧渴謾C(jī)上,綠色的偏色很嚴(yán)重,看起來就是黃綠黃綠的。

剛開始是藍(lán)色的,因?yàn)榈谝粋€版本是比較匆忙的,當(dāng)時用的是系統(tǒng)的顏色。后來我們有一個版本就覺得應(yīng)該調(diào)整一下顏色,就換成了綠色了。然而,這個時候微信的產(chǎn)品形態(tài)已經(jīng)基本定型了,用戶數(shù)也非常龐大,這時再去調(diào)整品牌顏色是不太可能了。其實(shí)我們現(xiàn)在很糾結(jié),但現(xiàn)在改起來就對形象有影響了。

問: 為什么拼多多喜歡挖微信的產(chǎn)品經(jīng)理?

答: 微信產(chǎn)品經(jīng)理通過微信觀察到了全中國網(wǎng)民的使用習(xí)慣,拼多多挖走微信的產(chǎn)品經(jīng)理,因此才能設(shè)計(jì)出更符合在微信環(huán)境內(nèi)傳播的接地氣方案。

問: 為什么微信只有 4 個 Tab?能把朋友圈做成第 5 個 Tab 嗎?

張小龍答: 源起 Tony (騰訊前 CTO 張志東),他經(jīng)常向微信團(tuán)隊(duì)提一些需求要加?xùn)|西,我說沒地方放了,他就說沒關(guān)系,你們只有 4 個 Tab,還可以加一個。我說不能這樣。過幾天 Tony 又有一個需求,我說沒地方放了,他又說,可以加一個 Tab。我想這樣的需求反復(fù)幾次,最后會沒完沒了。然后我就跟 Tony 定一個君子協(xié)議,兩年之內(nèi),微信只有 4 個 Tab,不允許再有第五個,因?yàn)?4 個最簡單了,一旦變成 5 個就變復(fù)雜了,不好了,對整個產(chǎn)品會有破壞性的打擊,然后 Tony 也認(rèn)同了,最終變成一個協(xié)議就確定下來了。這樣就很好啊,我們在做朋友圈的時候,也沒有把它放成第五個 Tab。然后 Tony 說這個朋友圈的入口是不是太深了。我們說,已定過協(xié)議了,所以不能放出來,我們自己不能破壞這個協(xié)議。當(dāng)然“朋友圈”能不能放在第五個 Tab 上,還有別的原因。它總是有好處有壞處的,至少我們現(xiàn)在能保證兩年之內(nèi)只有 4 個 Tab,但一切也不是絕對的。如果有一個非常大的誘惑,說不定還是會加第五個 Tab 的。

問: 微信里是怎么引導(dǎo)用戶設(shè)置頭像的?

張小龍答: 在我們最早的微信版本里面,用戶自己說的話是不帶自己頭像的,后面才把自己的頭像展現(xiàn)出來,當(dāng)用戶看到自己的頭像沒有設(shè)置的時候,很快就會去設(shè)置頭像了??梢娺@樣的設(shè)計(jì)比經(jīng)由別的環(huán)節(jié)去引導(dǎo)用戶設(shè)置頭像要自然很多。因?yàn)檫@是用戶自發(fā)的,而不是被“引導(dǎo)”的。

問: 為什么微信里很少出現(xiàn)新手引導(dǎo) Tips?

張小龍答: 我們在討論其他產(chǎn)品的設(shè)計(jì)的時候,常常會想,怎么才能不打擾到用戶,特別是我們想把新功能體現(xiàn)給用戶的時候?,F(xiàn)在很常見的是用 Tips 去提示新功能,看似體貼,實(shí)則讓人煩躁,用戶會覺得為什么要把這些提示強(qiáng)加到我當(dāng)前的操作里面,感覺被打擾了。

需要文字解釋的功能不是好體驗(yàn)。做 UI 的同事盡量不需要通過文字的解釋就把這個功能做好,最好也不要用 Tips 這樣的東西。剛才微博的同事還跟我聊到,做微博的時候,有新功能了需要通過彈 Tips 來告訴用戶。我問為什么要這樣做呢,他說怕用戶不知道。但其實(shí)用戶不知道就不知道吧,又不會損失什么。為什么所有東西都要用戶知道呢?所以產(chǎn)品里面最好能立一個規(guī)定,能不用就最好不要用。但是微信也還沒做到完全不用。因?yàn)槲⑿胚€有一些地方?jīng)]處理到位,所以偶爾也會用到 Tips。但是自己要知道一點(diǎn):每一次都是因?yàn)樽龅貌缓貌庞?Tips。

問: 為什么 QQ 的頭像是圓的?微信的頭像是方的?

QQ 設(shè)計(jì)師答:

  • 相比方形,人的頭像更接近圓形。圓形 QQ 頭像能更突出頭像弱化背景,也更鼓勵用戶使用真實(shí)自拍作為 QQ 頭像。
  • QQ 作為平臺會接入游戲和第三方應(yīng)用內(nèi)容,圓形 QQ 頭像在這些方形、異形圖標(biāo)環(huán)境中提高辨識度,降低用戶的認(rèn)知門檻。
  • QQ 希望給用戶傳遞樂在溝通,展現(xiàn)年輕個性的態(tài)度,圓形 QQ 頭像更具靈動和活力,與之無縫銜接的頭像掛件也為用戶帶來更個性化的搭配和豐富的自我展示。

微信設(shè)計(jì)師答: 因?yàn)檎掌緛硎欠降模筋^像更符合用戶習(xí)慣。

問: 微信的啟動畫面是一個小人站在地球還是月球?為什么是站在月球上看地球而不是在火星上看地球?

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

張小龍答: 其實(shí)第一個版本是在地球上看月球,但是后來就變成在月球上看地球,有了突破性的變化。但是這個變化并不重要。有些人甚至做了一些調(diào)研:用戶看到這個畫面到底有什么感覺?然后把調(diào)研結(jié)果分享給我,發(fā)現(xiàn)用戶各種感覺都有,很不一樣。然后問他,我們到底是怎么想的。我回答:能讓用戶有不同的感覺就對了。如果思路太統(tǒng)一就變成烏合之眾和愚昧了。所以這樣是最好的。

但是如果我們把微信的 LOGO 放在那里閃啊閃的,那就沒意思了,沒有任何想象的空間了。這個畫面也讓我們看到人類的孤獨(dú)感(這個小人都離開地球了,感到孤獨(dú)了)。而孤獨(dú)是永恒的主題。

問: 為什么微信沒有“系統(tǒng)管理員”這種官方賬號?

張小龍答: 大概在兩三年(這里指 2009 年)以前,我突發(fā)奇想,為什么我們給 QQ 郵箱用戶的通知信都是“系統(tǒng)管理員”作為發(fā)信方,為什么不是我們自己的美女產(chǎn)品經(jīng)理作為發(fā)信方,這不是顯得更加人性化一些嗎?從那個時候開始,我們就再也不用“系統(tǒng)管理員”這個賬號來給用戶發(fā)信了。用戶收到的每一封來自“系統(tǒng)管理員”的郵件,都被替換為一個真實(shí)的產(chǎn)品經(jīng)理。如圖中案例所示,會看到真實(shí)的產(chǎn)品經(jīng)理的落款,有她的頭像和名字。

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

問: 為什么微信 3.0 版本的啟動頁面上放出了邁克爾·杰克遜的圖,寫了一句話:“你說我是錯的,那你最好證明你是對的?!??

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

張小龍答: 之前的微信版本被批評得挺多的,特別是被業(yè)界的評論家批評。所以我想了這個辦法回應(yīng)一下。剛好在那段時間里,我在上班下班的路上,MJ 的音樂聽得很多。也覺得他的音樂跟我們的產(chǎn)品有某種關(guān)聯(lián)性,因此覺得非常需要去感謝一下 MJ。直到有一天這種感覺越來越強(qiáng)烈,就做了這個設(shè)計(jì)。為了能做出這個效果,我還特地請同事們到他的車?yán)锶ヂ?MJ 的音樂,覺得這樣效果會好一點(diǎn),讓他們能找到做這個頁面的感覺。通過這個設(shè)計(jì)我們向外界所有的評論家表達(dá):如果你說我是錯的,最好證明你是對的。

問: 為什么微信 4.2 的啟動畫面寫著「是時候放下手機(jī),和朋友面對面了」?

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

張小龍答: 拿一個停留時長衡量一個 App,這個跟我對互聯(lián)網(wǎng)的初心的認(rèn)知是背離的。每個人一天只有 24 個小時。互聯(lián)網(wǎng)人的使命不應(yīng)該是讓所有人除了吃喝拉撒,把時間都花在看手機(jī)上面。一個用戶每天的時間是有限的,這是次要的。最主要的是,技術(shù)的使命應(yīng)該是幫助人類提高效率。比如作為一個好的溝通工具,一定要高效。

用戶其實(shí)并不會按照你的內(nèi)容多少來決定它的時間分配,但我覺得這是很合理的。 如果我們非要停留時間更長的話,我們當(dāng)然有很多辦法來做到這一點(diǎn)。但是這只會讓用戶覺得不爽,因?yàn)樗纳缃恍式档土?。如果非要把他半個小時能完成的事情延續(xù)到一個小時的話,只能代表效率降低。微信永遠(yuǎn)都不會把用戶停留時長作為一個目標(biāo)。

問: 微信 7.0 UI 改版那么多用戶不滿,為什么不改回去?

張小龍答: 其實(shí)任何一個大的改版都會帶來用戶的不滿,因?yàn)槿肆?xí)慣于自己熟悉的界面,覺得是最好的。我們沒辦法讓 10 億人來投票決定什么是好的,也投不出來。那怎么才能通過改變尋求設(shè)計(jì)的優(yōu)化,讓它變得更好呢?這個決策必須遵循好的設(shè)計(jì)原則。

就像微信 7.0 版本的時候我們內(nèi)部使用了很長時間,我自己一直在兩個版本不停的切換,當(dāng)我用了一段時間,我不愿意切換到舊的版本去。也許用戶一下子不能接受,但是我相信他們適應(yīng)以后也會接受。重要的是我們必須要用我們的產(chǎn)品不停的適應(yīng)時代,而不是因?yàn)楹ε掠脩舻谋г咕筒蝗ジ淖兯?

尤其是 UI 上,我們永遠(yuǎn)不可能讓所有的人滿意。但是,我們比如讓產(chǎn)品越來越美,符合甚至引導(dǎo)當(dāng)前用戶的審美,而不是落伍于時代。

問: 微信 7.0 版本啟動頁是一朵花,包括你寫的看見之類的話,靈感是來自王陽明嗎?

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

張小龍答: 跟王陽明的書有一定關(guān)系。當(dāng)時寫的是,「因你看見,所以存在」。王陽明的書里是說,一朵花長在山里的石頭縫,你不看它,它就不在,你看它,它就在那里。在 7.0 版本,我們想表達(dá)的是說,看見的力量。如果按照王陽明的心學(xué),心的力量是很大的。同理到社交上,如果你看不見這個朋友,這個朋友十年沒見了,他其實(shí)不是你的朋友了。當(dāng)你看見他,他才是你的朋友。王陽明的書還可以跟量子力學(xué)結(jié)合。我們微信 7.0 那句話,「因你看見,所以存在」,完全符合量子力學(xué)的角度。因?yàn)橐粋€粒子,當(dāng)你觀察它的時候,它才存在。你不觀察它,它就是一道波。

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

問: 微信 8.0 的啟動頁是怎么設(shè)計(jì)的?

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

張小龍答: 做產(chǎn)品其實(shí)是個很枯燥,很理性的過程,無法把個人情緒和情感帶入。唯一有機(jī)會帶入的地方就是啟動頁,你可以有一些情緒的發(fā)泄。微信 8.0 的啟動頁,有個故事我跟同事們說過,有次我在開一個很正經(jīng)的會,中間我開小差了,拿了當(dāng)時的一張紙,在上面寫了現(xiàn)在開屏頁的這幾句話。我覺得可以代表這次更新的每一個功能,剛好連起來了,而且我也覺得特別簡潔,沒有任何修飾和形容詞。我自己覺得挺好的。我看見你,代表了通過視頻號看到另一個身份的你。笑臉,代表了你的狀態(tài)。煙花,是代表新的表情。一首歌代表了新的音樂播放。你看見了你,其實(shí)代表直播,通過你的眼來看到你眼前的世界。

問: 為什么張小龍說「好的產(chǎn)品應(yīng)該是用完即走」?

張小龍答: 我發(fā)現(xiàn)大家對于這個詞有特別多的一些誤解。大家都會說,因?yàn)榇蠹叶茧x不開微信,所以才會說“用完即走”,去年對這點(diǎn)可能沒有解釋得特別清楚,我其實(shí)只說了上半句話,用完即走,但其實(shí)還有下半句話,走了還會回來。

用完即走的本質(zhì)是任何一個工具都是幫助用戶完成一個任務(wù),越高的效率越好。 當(dāng)我們完成一個任務(wù)以后,我們當(dāng)然希望用戶能做別的事情,而不是一定耗在一個工具里。

比如說用微信,我們當(dāng)然希望微信能給用戶帶來更多的幫助,但并不意味著我們希望用戶一直低效率地在微信里處理事情,如果他一天信息的處理要用兩個小時,那我們應(yīng)該幫助用戶盡可能在兩個小時之內(nèi)處理完,而不是說一定要把兩個小時的任務(wù)變成三個小時,讓他在微信里花費(fèi)更多的時間,我認(rèn)為如果那樣就不是一個用完即走的概念。

所以用完即走和用戶再回來,其實(shí)并不矛盾,相反只有當(dāng)一個用戶在一個工具里用得很愉悅,用得很高效,他才會下一次回過頭來使用這個工具。我們現(xiàn)在說的小程序也是這樣的,小程序應(yīng)該是幫助用戶盡可能在短的時間里面完成一個任務(wù),并且離開這個小程序,這樣的話他才會有很好的體驗(yàn),下一次他會繼續(xù)回來用這樣一個小程序。

問: 微信一直倡導(dǎo)用完即走,但 8.0 版本怎么給人感覺用完不走了?比如視頻號加了更多推薦內(nèi)容,似乎增加了用戶的停留時長

張小龍答: 推薦的東西,如果把它定義為是娛樂時段的話,那么它是在這里娛樂消費(fèi)的。目標(biāo)是消耗時間的。在這一個板塊,并不是說非要他立即就走。用完即走并不是說用戶必須使用的時間越短越好。就像一個 120 分鐘的劇,不是說為了讓你用完即走,我用技術(shù)讓你 60 分鐘看完,這樣就不合理了。

問: 微信的「悠閑」表情怎么戒煙了?

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

答: 很早之前,QQ 和新浪微博就撤除了吸煙表情。據(jù)悉這是北京控?zé)焻f(xié)會活動的結(jié)果,控?zé)焻f(xié)會認(rèn)為這些軟件在日常生活中使用頻率非常高,每一次發(fā)送都會產(chǎn)生潛移默化的影響,有誘導(dǎo)青少年吸煙的傾向。

問: 為什么微信對用戶稱呼統(tǒng)一都是“你”而不是“您”?

張小龍答: 我們并不需要用一個很尊敬的態(tài)度稱呼用戶,而是應(yīng)該當(dāng)朋友一樣稱呼,所以應(yīng)該是一種很平等的關(guān)系,這個寫進(jìn)我們的產(chǎn)品條約里面去了。

問: 微信是工具還是平臺?

張小龍答: 在我們對公司的一次培訓(xùn)里面,有個同事問我微信的戰(zhàn)略是什么?我當(dāng)時只說了一句話,我說微信只是一個工具,我們應(yīng)當(dāng)想如何做好這個工具。在同事們的心目中,微信并不僅僅是一個工具,大家認(rèn)為微信是一個平臺。但我認(rèn)為微信是一個工具,這是一個非常宏大的目標(biāo),我并不認(rèn)為一個工具是一個很低層面的東西,事實(shí)上人類從原始人進(jìn)化智能人類的過程,就是因?yàn)槿藭圃旃ぞ撸覀兯玫慕^大部分的產(chǎn)品本質(zhì)上來說都是工具,但是工具有好壞之分,能夠做一個非常好的工具其實(shí)難度是非常大的,但是如果說我們要做一個平臺,我會不知道我們要做什么?一個好的工具應(yīng)該有一個很強(qiáng)的屬性,就是提高效率,用完即走。

問: 為什么微信的設(shè)計(jì)很克制?

張小龍答: 克制這個詞從來沒有在我的腦袋里面出現(xiàn)過,如果說做一些事情我們要求自己很克制的話,那是一種什么樣行為?那是一種自我壓制的行為,但是我并不認(rèn)為我們在做這樣的決定時我們要自我壓制,或者說自己切割掉我們很多想要做的事情,那不是一個很好的狀態(tài)。

相反的,我們在做很多很多決定的時候,反而要去判斷什么樣的東西是最合理的,合理性才是這里面要考慮的一個最重要的因素,我們會舍棄掉很多很多本來想要做,后來發(fā)現(xiàn)做不好的東西,這種舍棄并不是因?yàn)檎f我們很克制,所以我們少做一點(diǎn),而是說我們發(fā)現(xiàn)有很多事情做不好,或者說有很多決定它一開頭是錯的,或者說很多的想法,最后驗(yàn)證可能是行不通的,那我們?nèi)绻惨プ鲞@些事情是不合理的,我們會把它舍棄掉,而不是說我們要克制。

問: 為什么微信 8.0 浮窗從懸浮改成了左上角?

張小龍答: 我其實(shí)一直很不喜歡浮窗。因?yàn)樗拖窆菲じ嗨?。這也是 PC 時代大部分網(wǎng)頁瀏覽的體驗(yàn)都不好的一個原因。

為了解決一篇文章要很久才看完,而中途要不斷處理微信消息的需要,我們有了浮窗功能。但它并不完美。很多時候,一篇文章,一個長視頻,是要分很多次才看完的,如果每次都要先拖到浮窗,也是很繁瑣的。

現(xiàn)在,微信提供了一個尚未看完的內(nèi)容的列表,方便可以隨時找回這些內(nèi)容繼續(xù)看完。尤其是對于長視頻,更加需要隨時可以切走,然后又能快速找到。直播也一樣需要。

問: 為什么微信安卓版不采用 Android Design 設(shè)計(jì)風(fēng)格?

Kantzou 答: 我每次在「知乎」上吐槽 Android Design 的時候,總是會有人在下面說,“哎呦,原來「微信」的安卓版做那么 Low 是嫌 Android Design 做的不好啊?!边@種評論,我都不會回復(fù)。

我講一下為什么差呢,舉個例子:我給我爸買了個安卓手機(jī),給他用。「微信」在那個時候,Tab 欄是在頂部的,然后我告訴他,“哎,左右滑動是可以切換的?!?

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

我觀察他用,我會發(fā)現(xiàn):4.7 寸屏,他往上按的時候,他不會去滑的,因?yàn)樗吹侥抢镉袀€字,他就會去按,因?yàn)樗麤]有學(xué)習(xí)到那個程度。Android Design 的問題在于太超前,我這么說,那些喜歡 Android Design 的人心里會不會更舒服一點(diǎn)?

為什么喬布斯那么牛 B?是因?yàn)樗?,觸摸屏出來以后,人的自然反應(yīng)就是「press」,而不是「滑」?!富乖诂F(xiàn)今這個階段還不夠自然。Android Design 在這個問題上解決的不好,因?yàn)榻^大多數(shù)的大眾不像我們,我們是已經(jīng)充分學(xué)習(xí)了的。我相信很多大眾,比方說不是我們這個專業(yè)的學(xué)生,你去讓他們用一下 Android Design,我相信大多數(shù)人都是點(diǎn),很費(fèi)勁的點(diǎn),Android Design 為什么會做成這樣?他覺得?。捍笃烈欢ㄒ龅淖屓朔奖?,所以操作是滑動,這樣不用讓他點(diǎn)擊,就不會讓他覺得那么累。所以我為什么覺得谷歌是一個除了個別 App 設(shè)計(jì)的不錯,其他 App 設(shè)計(jì)的都很爛的公司。谷歌設(shè)計(jì)的真的不好,我說的設(shè)計(jì)的不好,不是皮毛上面,所以你不要跟我糾結(jié)這些細(xì)節(jié),我說的是他的邏輯不對,谷歌是一個太工程師思維的公司。

Android Design 有個「應(yīng)用抽屜」,我跟我爸說,“我給你裝微信了”。

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

他問,“在哪里?。俊蔽艺f,“點(diǎn)那個地方?!薄芭丁彼f,“知道了。”下次又問,“微信在哪里???”我跟他說,“點(diǎn)那個地方?!比芜€是不知道,為什么?因?yàn)?Android Design 在給他二維的導(dǎo)航,因?yàn)槟阋谧烂嫔厦婊瑒樱绻烂嫔厦婊瑒記]有,你還要給他一個「應(yīng)用抽屜」,在一個新的地方左右滑動,簡直 Unbelievable,但是對于安卓的技術(shù)思維的人來講,這個很合情合理啊。

問: 微信「設(shè)置」里為什么會有個「插件」?

張小龍答: 給用戶選擇權(quán)。為了保持微信的簡單,在微信里面,除了核心功能,大部分的功能都做成插件的形式。這個方向很早就定下來了。這讓我們就算加了很多東西,也沒有把微信變得復(fù)雜。

陸樹燊答: 微信團(tuán)隊(duì)的基因里原來就有實(shí)驗(yàn)室文化的,這個要從微信的歷史說起。

微信團(tuán)隊(duì)在做微信之前做的是 QQ 郵箱。QQ 郵箱里面有一個功能叫“郵箱體驗(yàn)室”,用戶在這里開通一些新奇的功能。QQ 郵箱正是靠一次次的實(shí)驗(yàn),嘗試各種功能,才從一個爛到?jīng)]人用的雞肋郵箱,慢慢變成雄踞行業(yè)第一位置的七星級郵箱。

微信產(chǎn)品設(shè)計(jì) 80 個為什么(2):設(shè)計(jì)和理念

而微信從創(chuàng)始之初,就一直在繼承 QQ 郵箱的「遺產(chǎn)」,從郵箱的 QQ 對話功能到微信的「QQ 離線消息」,從郵箱「漂流瓶」到微信「漂流瓶」,從「附件收藏」到「微信收藏」,從郵箱的「閱讀空間」和「郵件訂閱」到微信的公眾號……

同樣的,微信也繼承郵箱的體驗(yàn)室,有了「第一個實(shí)驗(yàn)室」,那時的名字叫「插件」。所謂插件,就是把功能選擇的權(quán)限給到用戶,用戶覺得喜歡和需要,就「安裝」插件,覺得不需要,就「卸載」插件。而開發(fā)團(tuán)隊(duì)屆可以通過看用戶安裝和卸載的情況來決定插件的去留。

于是,有的插件試著試著就變成不可插拔的功能了,比如朋友圈,現(xiàn)在已經(jīng)不能卸載了;有的插件試著試著就不見了,比如微博閱讀。

后來,大概在 13 年,微信 5.0 發(fā)布前后,微信插件改叫「功能」,深埋在微信的設(shè)置選項(xiàng)里面。因?yàn)殡S著微信用戶量的增長,用戶習(xí)慣的改變,早期的那些插件功能已經(jīng)被證明不需要了,但又有個別老用戶在用,不好刪除,就把它們的入口深埋起來。比如語音記事本、QQ 離線助手、QQ 郵箱提醒、群發(fā)助手。

這個修改,某種程度上意味著,微信的第一個實(shí)驗(yàn)室時代結(jié)束了。這一輪實(shí)驗(yàn),基本伴隨著微信團(tuán)隊(duì)在移動互聯(lián)網(wǎng)的探索和成長。實(shí)驗(yàn)之后,微信也奠定了它的行業(yè)地位,所謂的「移動互聯(lián)網(wǎng)船票」。

問: 微信為什么重視產(chǎn)品設(shè)計(jì)而很少提到運(yùn)營?

張小龍答: 對于一個產(chǎn)品,我們更應(yīng)該偏向產(chǎn)品本身還是運(yùn)營?這是一個老生常談的問題。這里也沒有絕對的衡量標(biāo)準(zhǔn),只是看各家的特長和偏好了。而且對于不同的產(chǎn)品,也會有不同的偏重點(diǎn)。

而我的觀點(diǎn)是做一勞永逸的事情是最好的。很多開發(fā)的同事知道,在開發(fā)上我們到底是要做「類型」還是做一個一個「實(shí)例」?如果我們不是把各種訂閱內(nèi)容抽象為一個訂閱平臺的話,可能就會做了很多很多的「實(shí)例」出來,產(chǎn)品變得非常復(fù)雜。比如微信的「漂流瓶」和郵箱的「漂流瓶」到底有什么不同?除了微信的「漂流瓶」可以發(fā)語音,在產(chǎn)品結(jié)構(gòu)上的不同在哪里呢?郵箱里面的「漂流瓶」有不同種類,比如「同城瓶」「交友瓶」,它更偏運(yùn)營一些;而微信里面的「漂流瓶」就只有一種。因此我們發(fā)現(xiàn),在郵箱里面這樣做,我們會因?yàn)橛脩舻男枨箢愋驮黾?,需要不斷地增加?nèi)容才能滿足用戶,可以想象這么運(yùn)營下去,會把大家都累死。所以我們更加傾向直接做到最本質(zhì)的東西,至于它能滿足用戶什么需求,那是用戶自己的行為。我們做一個「類型」,而用戶自己來產(chǎn)生「實(shí)例」就可以了,也就是說,我們用「類型」的思路,把所有「實(shí)例」都做了。

我們按此方法做完很多特性以后,發(fā)現(xiàn)已經(jīng)沒有改進(jìn)的空間了,也不需要去改進(jìn)了,一改進(jìn)可能就不對了。因?yàn)橐桓倪M(jìn)就可能變成去把它「具體化」,一旦開始「具體化」以后,就需要不斷地「具體化」,就沒有可以想象的空間了。

文章來源:優(yōu)設(shè)   作者:龍爪槐守望者

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ù)

B端Dashboard設(shè)計(jì)指南系列

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

Dashboard的含義

前言

Dashboard在B端設(shè)計(jì)的工作中是一個繞不開的話題,在此我根據(jù)自己工作中實(shí)際的一些經(jīng)驗(yàn)總結(jié)給大家歸納出一篇更符合工作場景中Web端的Dashboard設(shè)計(jì)內(nèi)容。


什么是Dashboard?

Dashboard的中文直譯是儀表盤,最初與dashboard相關(guān)在界面出現(xiàn)的是蘋果電腦系統(tǒng)Mac OS X v10.4 Tiger操作系統(tǒng)中的應(yīng)用程序,用作稱為“widget”的小型應(yīng)用程序之運(yùn)行基礎(chǔ)。



B端常見Dashboard

2013年Stephen Few寫的《Information Dashboard Design》中指出“儀表盤是為了實(shí)現(xiàn)某些特定目標(biāo)而對重要信息進(jìn)行的視覺傳達(dá),對一屏上的內(nèi)容進(jìn)行組織呈現(xiàn)使人一瞥便能掌握其所傳達(dá)的信息。簡單點(diǎn)來說就是:為用戶提供全局概覽,讓用戶快速掌握工作進(jìn)展及進(jìn)入工作狀態(tài)并可以訪問最重要的數(shù)據(jù),功能和控件。



Dashboard設(shè)計(jì)案例

以下是Dashboard常見4點(diǎn)設(shè)計(jì)不是很好的案例,現(xiàn)在帶大家一個個看下怎么才是更為合理。


案例一:右邊Dashboard上的信息做了層級的區(qū)分,相對左邊更加直觀。


案例二:左邊Dashboard顏色偏熒光色,色彩語言相對右邊不適合長期工作使用。


案例三:設(shè)計(jì)方案時沒有采用格柵格化解決適配對不齊等等問題


案例四:dashboard模塊之間間距沒有呼吸感。



B端Dashboard的功能分類

設(shè)計(jì)師需要了解的功能分類

B端設(shè)計(jì)中,設(shè)計(jì)師要實(shí)時了解哪些是重要內(nèi)容以及核心數(shù)據(jù)。Dashboard可以直接傳遞出:“業(yè)務(wù)整體狀況如何?有哪些關(guān)鍵指標(biāo)?各指標(biāo)的運(yùn)行情況分別如何?哪些指標(biāo)出現(xiàn)異常?需要用戶做些什么?”。由此可知,B端Dashboard產(chǎn)品中大多數(shù)都以看為主,輔以功能控制。主要分為監(jiān)控操作、分析處理兩大場景。當(dāng)業(yè)務(wù)較為復(fù)雜時,可以用戰(zhàn)略概覽場景提供快速入口。



1.監(jiān)控操作:

使用戶可以一目了然地檢查其狀態(tài),提供關(guān)鍵指標(biāo)實(shí)時監(jiān)測并且告知異常狀態(tài)。更重視實(shí)時觀看狀態(tài)。


2.分析處理:

通過數(shù)據(jù)圖表,配合控件進(jìn)行不同維度的數(shù)據(jù)分析。以數(shù)據(jù)為中心,并顯示盡可能多的相關(guān)數(shù)據(jù)視圖。


數(shù)據(jù)性Dashboard。數(shù)據(jù)概覽可視化展示為主。幫助用戶提供較為直觀數(shù)據(jù)維度,更好分析決策。


綜合性Dashboard,既有提供數(shù)據(jù)全局概覽可視化,同時也能快速在頁面進(jìn)行操作完成工作。國內(nèi)B端產(chǎn)品最常出現(xiàn)的Dashboard功能模式。本篇文章也是著重介紹如何完成這個類型需求


3.戰(zhàn)略概覽:

在復(fù)雜的業(yè)務(wù)中,可以呈現(xiàn)業(yè)務(wù)分散的重點(diǎn)信息,用戶可以通過提供入口快速跳轉(zhuǎn)至相關(guān)模塊。



設(shè)計(jì)前分析

了解Dashboard的用戶

B端設(shè)計(jì)過程中每多了解一個維度分析就更有利于下一步Dashboard框架搭建。因此在對Dashboard有了一些簡單了解之后,我們再來了解下用戶場景。例如:用戶是財(cái)務(wù)人員審批商戶充值申請。工作人員進(jìn)入dashboard之后先是進(jìn)行充值打款申請。那么設(shè)計(jì)時可以考慮在Dashboard中加入常用功能:充值。并且需要給到相應(yīng)充值數(shù)據(jù)概覽:賬戶余額。每個B端產(chǎn)品都有自己特定工作場景。因此從用戶、場景和任務(wù)這三方面考慮,可以做到幫助設(shè)計(jì)師更清晰設(shè)計(jì)dashboard布局以及設(shè)計(jì)自查。

因此以上這些信息都是需要在設(shè)計(jì)Dashboard時弄清楚的內(nèi)容。



信息處理

當(dāng)弄清楚需要呈現(xiàn)信息內(nèi)容后,需要進(jìn)一步對信息做處理。從用戶的角度,舉個例子在FMS財(cái)務(wù)系統(tǒng)記賬中,財(cái)務(wù)需要查看季度報表。那么數(shù)據(jù)的單位以默認(rèn)季度呈現(xiàn)會更為符合使用用戶需求,準(zhǔn)確且高效。具體可以從以下四個維度來做進(jìn)一步處理:覆蓋范圍、時間跨度、粒度、個性定制。一般核心指標(biāo)不超過7個,確定核心指標(biāo)的聯(lián)系及優(yōu)先級。

合理的信息結(jié)構(gòu)能夠幫助用戶高效閱讀,理解內(nèi)容。如何將信息碎片有邏輯地組合在一起,合理呈現(xiàn)和布局,選擇使用什么結(jié)構(gòu)視內(nèi)容而定。


舉個例子:

對于管理者的角色來說使用Dashboard的訴求是:及時把控業(yè)務(wù)情況

信息處理內(nèi)容:

1.掌握重要業(yè)務(wù)數(shù)據(jù):經(jīng)營數(shù)據(jù),訂單數(shù)據(jù),客戶數(shù)據(jù);

2.了解員工工作進(jìn)度;

3.處理急需解決的工作任務(wù)。

對于執(zhí)行者的角色來說使用Dashboard的訴求是:高效完成工作任務(wù)

信息處理內(nèi)容:

1.急需解決的工作任務(wù):待發(fā)貨訂單,待退款,待跟進(jìn)客戶

2.了解自己的工作進(jìn)度

3.經(jīng)常使用的功能:發(fā)布商品,添加客戶,開單

4.查看重要通知公告:公司發(fā)布的公告


了解Dashboard的表現(xiàn)設(shè)計(jì)類型

Dashboard表現(xiàn)結(jié)構(gòu)常見兩種類型:卡片型、流程型。


卡片型

最常見就是卡片型。即將有相關(guān)聯(lián)的內(nèi)容進(jìn)行分組呈現(xiàn),讓Dashboard內(nèi)容歸類而不雜亂無章。


流程型

內(nèi)容相互之間具有一定的邏輯關(guān)系,如地理位置關(guān)系、數(shù)字包含關(guān)系、對象父子關(guān)系等,這種結(jié)構(gòu)可以讓對象之間的邏輯關(guān)系十分直觀。很直觀的呈現(xiàn)了資源對象之間的相互關(guān)系。



Dashboard的設(shè)計(jì)

Dashboard的表現(xiàn)構(gòu)成

國內(nèi)B端產(chǎn)品一般是由以下這幾個部分組成的。全局導(dǎo)航、數(shù)據(jù)概覽、待辦事項(xiàng)、常用功能、任務(wù)進(jìn)展、平臺推送、數(shù)據(jù)圖表。下面帶大家仔細(xì)看下具體每個部分具體如何設(shè)計(jì)。


1.全局導(dǎo)航

在B端Dashboard中,全局導(dǎo)航一般由三個部分組成。平臺LOGO、功能入口導(dǎo)航、快捷功能導(dǎo)航。


1.1平臺LOGO

一般這里都會放LOGO,對于一些壁壘標(biāo)準(zhǔn)化B端服務(wù),這里通常是給好標(biāo)準(zhǔn)規(guī)則,后臺自動配不同客戶的LOGO。因此要考慮到區(qū)域的色彩是否適用各種不同LOGO。如果是OA或是定制化B端服務(wù),那么就可以直接定制設(shè)計(jì)。


1.2功能入口導(dǎo)航

就是菜單導(dǎo)航,在B端Dashboard一般都是在側(cè)邊。建議最多不要超過9個,遵循7±2原則。盡量將同類型歸類,好好利用下二級分類。另外入口不要太深,用戶容易找不到入口。盡量設(shè)計(jì)優(yōu)化合并來減少用戶使用負(fù)擔(dān)。


在國內(nèi)B端產(chǎn)品中,最常就是將功能入口導(dǎo)航放在側(cè)邊。適用于更專注功能和快速操作的系統(tǒng)

優(yōu)點(diǎn):

拓展性,一級導(dǎo)航的數(shù)目可以展示更多;

層級清晰,一二三級導(dǎo)航都可以流暢展示;

操作效率高,用戶在操作和瀏覽中可以快速定位和切換當(dāng)前位置。

缺點(diǎn):

視覺動線左右折回,比頂部導(dǎo)航更易疲勞,

內(nèi)容區(qū)的排版空間更小,需要考慮適配問題。


在國內(nèi)B端結(jié)構(gòu)比較龐大的后臺中,通常會將功能入口導(dǎo)航設(shè)計(jì)為混合模式?;旌夏J骄褪菍⒐δ苋肟诜譃轫敳颗c側(cè)邊兩邊都有。這是因?yàn)閭?cè)邊模式已經(jīng)無法層級擴(kuò)展性已經(jīng)無法很好的滿足產(chǎn)品架構(gòu)了。

優(yōu)點(diǎn):

層級拓展性強(qiáng),可達(dá)四、五級導(dǎo)航。

缺點(diǎn):

操作難度上升、視覺動線更復(fù)雜。



還有一種模式:頂部模式,這種模式在國外產(chǎn)品中較多,在國內(nèi)的B端產(chǎn)品中較為少應(yīng)用。原因之一是起初最早的國內(nèi)B端產(chǎn)品就采用這種排版模式,在國內(nèi)形成了一種用戶操作習(xí)慣。國外最常見的B端頂部導(dǎo)航:saleforces、hubspot、zoho。

優(yōu)點(diǎn):

沉浸感比側(cè)邊以及混合都要強(qiáng),幾乎不會對于用戶的閱讀行為有干擾,因?yàn)閃eb也有頂部瀏覽器菜單。

缺點(diǎn):

一級導(dǎo)航欄的欄數(shù)及字段內(nèi)容受限嚴(yán)重。國內(nèi)B端產(chǎn)品會有很多快捷功能就更不利用采用這種模式



1.3快捷功能導(dǎo)航

一般包含:消息通知、賬號信息、幫助中心、設(shè)置。在國內(nèi)B端產(chǎn)品中基本上都是在右上角







2.數(shù)據(jù)概覽

在B端Dashboard中,數(shù)據(jù)概覽通常都是選取最關(guān)注的數(shù)據(jù)指標(biāo)來展示,而不是全部數(shù)據(jù);選取最關(guān)注的時間段,而非全部時間段。

構(gòu)成:數(shù)據(jù)名稱+數(shù)字

這個模塊在設(shè)計(jì)表現(xiàn)上最重要就是信息層級的設(shè)計(jì)處理。如何能夠讓用戶一眼就看到最關(guān)注的數(shù)據(jù)內(nèi)容指標(biāo)。設(shè)計(jì)時注意突出數(shù)據(jù)才是關(guān)鍵。設(shè)計(jì)時關(guān)鍵數(shù)字上就要字號大一點(diǎn),甚至可以采用特殊的數(shù)字字體,例如DIN系列,來加強(qiáng)對比。



3.待辦事項(xiàng)

待辦事項(xiàng)模塊通常是應(yīng)用在執(zhí)行角色的Dashboard中。節(jié)省工作人員尋找任務(wù)的時間,避免遺漏任務(wù)。

構(gòu)成:待辦事項(xiàng)名稱+數(shù)字+可點(diǎn)擊跳轉(zhuǎn)的鏈接

待辦事項(xiàng)的展示方式可以是數(shù)據(jù)可視化也可以是數(shù)據(jù)概覽。但是有一點(diǎn),數(shù)據(jù)必須是要能夠點(diǎn)擊的,因?yàn)榇k事項(xiàng)就是要有入口去操作。同時也可以把待辦事項(xiàng)平鋪出來,平鋪幾個可以根據(jù)具體情況定。如果待辦樣式本身很多的情況下,可以采用tap切換的樣式全部展示出來。



4.常用功能

用戶高頻操作快捷入口,點(diǎn)擊跳轉(zhuǎn)相應(yīng)操作頁面。這個模塊每個b端產(chǎn)品都不一樣,需要仔細(xì)反復(fù)斟酌是否是用戶需要的高頻功能。



5.任務(wù)進(jìn)展

用戶當(dāng)前最關(guān)心的任務(wù),常用進(jìn)度條或者時間軸的形式表示。



6.平臺推送

平臺用來觸達(dá)企業(yè)的信息,一般有產(chǎn)品更新動態(tài),學(xué)習(xí)培訓(xùn),客服,廣告推送,活動消息(這個一般比較常出現(xiàn)在平臺類的b端產(chǎn)品中)



7.卡片式數(shù)據(jù)圖表

卡片式數(shù)據(jù)圖表可以拆分成圖表+輔助兩種組成部分


7.1圖表

B端設(shè)計(jì)師需要準(zhǔn)確通過圖表來表達(dá)出用戶需要的維度信息。

7.1.1折線圖

隨時間(連續(xù)內(nèi)容)而變化的連續(xù)數(shù)據(jù),適合表現(xiàn)趨勢。Y 軸刻度值選擇要合理,以數(shù)據(jù)波動要最大化的顯示


7.1.2面積圖

面積圖和折線圖比較類似,針對只有單個數(shù)據(jù)類型有面積區(qū)域的表達(dá)效果比折線圖好。數(shù)據(jù)類型盡量不要超過2個,有2個數(shù)據(jù)類型時,注意調(diào)整面積區(qū)域的透明度以及色系保持統(tǒng)一



7.1.3柱狀圖

通常用來統(tǒng)計(jì)累積疊加數(shù)據(jù),數(shù)據(jù)之間能夠非常清晰直觀對比。柱狀圖的單位寬度不要是固定值,單位寬度之間間距在不同分辨率屏幕下的對比要合理。不用大圓角元素,不夠嚴(yán)謹(jǐn),太活潑。最多使用兩種顏色,一種默認(rèn),一種hover或tap,保持界面統(tǒng)一性



7.1.4扇形圖

有共同的上一級層級作為統(tǒng)計(jì)總合,數(shù)據(jù)之間平級且有占比。數(shù)據(jù)必須是正整數(shù),至少兩個以上數(shù)據(jù),且用不同顏色表示




7.1.5環(huán)形圖

與扇形圖很相似,但是比扇形圖更加直觀瀏覽且不被搶視覺。避免過于太細(xì)太粗,控制好留白呼吸感




以上是常用的圖形圖表,絕不是全部。有興趣的同學(xué)可以到以下兩個網(wǎng)站可以利用碎片化時間擴(kuò)展學(xué)習(xí)

EChart:

https://echarts.apache.org/examples/zh/index.html

AntV:

https://antv.gitee.io/zh](https://antv.gitee.io/zh




7.2輔助元素

卡片型圖表的第二部分也就是輔助元素。輔助元素里面還有很多細(xì)節(jié)元素組成:標(biāo)題、軸、提示信息、標(biāo)簽、氣泡信息、功能(篩選、導(dǎo)出、保存)。當(dāng)然在實(shí)際設(shè)計(jì)中,會根據(jù)場景去修飾刪減一些元素,以此來減少冗余信息,幫助用戶快速達(dá)成目標(biāo),在最少的時間內(nèi)獲取更多的信息。



7.2.1標(biāo)題

標(biāo)題是區(qū)分卡片信息,迅速讓用戶了解卡片圖表的重要元素。通常需要斟酌嚴(yán)謹(jǐn)不重復(fù),簡潔概括。



7.2.2軸

軸上最重要的內(nèi)容就是單位,將每個數(shù)據(jù)在同一軸上都是維持同種基準(zhǔn)。便于進(jìn)行數(shù)據(jù)測量。



7.2.2.1軸的細(xì)節(jié)

現(xiàn)在知道了軸由哪幾部分構(gòu)成,那么接著了解細(xì)節(jié)



軸線

軸線細(xì)節(jié)一般只考慮是否顯示,在有網(wǎng)格線的情況下,可以考慮隱藏x/y軸線。通常顯示數(shù)據(jù)的軸作為隱藏,突出視覺重點(diǎn),減少不必要的線條。


軸刻度

軸刻度是軸線上的間距不宜過密,確保信息可讀性以及呼吸感,根據(jù) 7±2 法則,在可見的卡片內(nèi)盡量保持這個規(guī)則,可以利用抽樣顯示的手段來優(yōu)化軸標(biāo)簽重疊的問題,這種一般是在連續(xù)性內(nèi)容上可以使用。若軸上單位信息確實(shí)過多,雖然是連續(xù)性內(nèi)容例如展示30天單位,由于本身卡片信息不是過于最重要層級,設(shè)計(jì)在相對狹小空間尺寸中,那么建議考慮在軸線上安排滾動條,并將重看單位放置前位。設(shè)計(jì)特別注意點(diǎn),將滾動條設(shè)計(jì)作為輔助元素不宜搶視覺。


網(wǎng)格線

網(wǎng)格線是用來輔助圖表數(shù)據(jù)直觀對比的,增加數(shù)據(jù)更快速的閱讀性。舉個例子:數(shù)據(jù)展示軸線在左邊。那么離左邊最近的數(shù)據(jù)圖形可能不需要網(wǎng)格線就能立即對應(yīng)到相應(yīng)數(shù)字。但是越靠近右邊的數(shù)據(jù)圖形就相對比左邊的數(shù)據(jù)圖形就比較難一眼識別。因此網(wǎng)格線也擔(dān)任了刻度尺的功能。在設(shè)計(jì)網(wǎng)格線時要注意網(wǎng)格線更多是輔助的角色。表現(xiàn)類型可以選擇虛線或是實(shí)線。但是要把握好顏色選用不搶視覺重點(diǎn)又能看到。




7.2.3提示信息

以對照的方式來理解可視化對象的項(xiàng)目歸類信息,總結(jié)圖形形狀和文本組成內(nèi)容。



7.2.4標(biāo)簽

在圖表中,標(biāo)簽是對當(dāng)前的一組數(shù)據(jù)進(jìn)行的內(nèi)容標(biāo)注。根據(jù)不同的圖表類型選擇使用。



7.2.5氣泡信息

當(dāng)標(biāo)簽?zāi)J(rèn)不顯示,氣泡信息一般是鼠標(biāo)tap或者h(yuǎn)over時,顯示該位置的數(shù)據(jù)。在簡潔的頁面中,也能讓用戶直觀看到信息對應(yīng)數(shù)據(jù)結(jié)果



7.2.6功能

這個模塊涉及的內(nèi)容偏多,在表單頁面更常出現(xiàn),以后有機(jī)會可以單獨(dú)說。一般常用功能如篩選、導(dǎo)出、保存??梢宰層脩艨刂坪陀押玫捏w驗(yàn)



確定B端產(chǎn)品的設(shè)計(jì)風(fēng)格

首先tob的產(chǎn)品dashboard說到底還是給使用用戶所使用,也就是“人”。所以通常情況下dashboard除了傳遞出用戶想要的數(shù)據(jù)信息,還要傳遞服務(wù)于人。此外最重要的是B端設(shè)計(jì)師需要理解項(xiàng)目背景。例如某個財(cái)務(wù)應(yīng)用平臺不屬于科技未來感,而是突出一種安全,高效,具有客戶親和力的商業(yè)產(chǎn)品特性。那么關(guān)鍵詞:服務(wù)、輕松、高效、親和、精致。那么一個干凈、相對輕量、統(tǒng)一的Dashboard UI界面就提煉出來。



色彩

常說色彩是一種情緒版,在Dashboard設(shè)計(jì)中,色彩也是映射關(guān)鍵詞的非常重要一個環(huán)節(jié)



字體

B端產(chǎn)品一般都是以數(shù)據(jù)為主要信息源,針對一些關(guān)鍵信息指標(biāo)時,可以采用特殊的數(shù)字字體。由于本身數(shù)字字體包內(nèi)存不大,所以也方便調(diào)用。例如DIN系列等等



設(shè)計(jì)稿尺寸

本篇內(nèi)容都是針對pc端內(nèi)容,具體移動端以后有機(jī)會會分享。大多數(shù)B端設(shè)計(jì)師都知道以1440x900設(shè)計(jì),但是在工作中會以埋點(diǎn)數(shù)據(jù)了解到事實(shí)上真實(shí)場景還是以1920x1080的尺寸為多數(shù)。畢竟時代不一樣了。以1440做設(shè)計(jì)主要還是考慮從上下兼容的角度的。B端與C端不同,C端往往照顧大多數(shù)的用戶群體或是主要消費(fèi)力群體。但是B端一般不會放棄任何一個用戶,哪怕定制化。這個在C端是不太現(xiàn)實(shí)的。因此適配對于B端產(chǎn)品來說也是尤為重要。



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

上面的內(nèi)容更多是闡述每個部分的內(nèi)容,實(shí)際工作中設(shè)計(jì)Dashboard時不一定按照那個順序進(jìn)行,因此在此再強(qiáng)調(diào)下設(shè)計(jì)Dashboard的設(shè)計(jì)順序以及原則。要先弄清楚目標(biāo)用戶以及使用場景,確定好關(guān)鍵的大約7個核心指標(biāo)。將用戶整個流程梳理流暢之后,再開始考慮Dashboard設(shè)計(jì)執(zhí)行。


同時在設(shè)計(jì)執(zhí)行上也要特別注意幾個點(diǎn):

1.突出核心指標(biāo)(7個左右)

2.信息層級區(qū)分

3.減少用戶選擇,盡可能默認(rèn)給到用戶需要的數(shù)據(jù)維度

4.界面簡潔嚴(yán)謹(jǐn)

5.避免過多顏色與不統(tǒng)一

6.數(shù)據(jù)維度正確圖表選擇



設(shè)計(jì)的注意事項(xiàng)以及建議

1.tob的設(shè)計(jì)師要了解業(yè)務(wù)所處的周期在什么樣的階段。在探索期建議dashboard的設(shè)計(jì)應(yīng)用于市面上現(xiàn)成的組件進(jìn)行搭建,以便與研發(fā)團(tuán)隊(duì)一起為業(yè)務(wù)助力。更好更快的發(fā)展。

2.在tob的dashboard設(shè)計(jì)中,設(shè)計(jì)師要特別注意數(shù)據(jù)表現(xiàn)的落地效果

3.當(dāng)dashboard只在設(shè)計(jì)層面改版,并且改版內(nèi)容過大時,推薦保留舊版入口,提前進(jìn)行埋點(diǎn)用戶以便應(yīng)對用戶對于大版本適應(yīng)緩解焦慮。如果有新功能或功能調(diào)整要及時加入一些引導(dǎo)設(shè)計(jì),以便減少用戶的學(xué)習(xí)成本。關(guān)于引導(dǎo)設(shè)計(jì)的內(nèi)容歡迎參考我的上一篇文章:《B端必看的引導(dǎo)設(shè)計(jì)(一)》

4.允許用戶定制和共享dashboard,雖然不適用于所有的B端產(chǎn)品,如果類似于團(tuán)隊(duì)協(xié)作中多種角色共用一套的dashboard平臺,可以考慮引入這個功能。幾組定制模塊可以滿足于不同角色的用戶需求,并且能夠增加dashboard的使用率

5.dashboard關(guān)鍵信息數(shù)據(jù)盡量設(shè)計(jì)在一屏以內(nèi),作為數(shù)據(jù)可視化,內(nèi)容快速瀏覽獲知全局,并且完成任務(wù)是比較重要的。

6. 突出統(tǒng)計(jì)數(shù)據(jù)的變化并對異常情況作出反應(yīng)

7.數(shù)字設(shè)置不一定要設(shè)置為右對齊,但是單位是金額,那么要將金額設(shè)置為右對齊,為了使用用戶識別方便,快速比較。

8.設(shè)計(jì)完Dashboard一定要自查一遍,是否真的符合工作人員的使用場景。有沒有理解不準(zhǔn)確的地方。



最后

為什么b端設(shè)計(jì)師要懂得Dashboard,在很多b端業(yè)務(wù)場景中,有個特點(diǎn),設(shè)計(jì)師常常會接到大量數(shù)據(jù)展示要求。如果設(shè)計(jì)師對dashboard缺乏認(rèn)知,就有很大的可能性會造成信息雜亂,并且在Dashboard的界面中充斥著一些無關(guān)緊要的指標(biāo),這就是失去了Dashboard存在的意義。另一方面在b端產(chǎn)品中,Dashboard往往是以首頁的形式出現(xiàn)的,是非常重要的。

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

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ù)

探索“流暢感”—談手勢動效體驗(yàn)設(shè)計(jì)

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

當(dāng)我們設(shè)計(jì)師輸出了精美的設(shè)計(jì)稿,然后附帶了一個流暢的手勢動畫,交付給開發(fā)的時候,也期待著開發(fā)大佬搞出和自己預(yù)期一樣體驗(yàn)流暢。但是等到實(shí)際體驗(yàn)的時候,卻發(fā)現(xiàn)有一種說不出的鬧心。

“這個感覺不好按...”


“劃起來咋這么費(fèi)勁呢?”


“怎么感覺動畫怪怪的。”



Chapter 1

——————————

我們與流暢的距離


當(dāng)你正準(zhǔn)備和開發(fā)一通友好探討的時候,這個時候開發(fā)向你發(fā)起了一系列靈魂拷問:


“你這個左滑的手勢,劃多少才算觸發(fā)?劃多快才算觸發(fā)?如果劃了一半劃回去算不算觸發(fā)?如果我先點(diǎn)擊后滑動算不算觸發(fā)?松手之后的動畫是多快的速度?什么速度曲線?要不要回彈效果?回彈阻尼系數(shù)是多少?”


這個時候你發(fā)現(xiàn),自己提出的設(shè)計(jì)需求根本太天真了。



系統(tǒng)組件無法直接調(diào)用了

剛才的問題真實(shí)原因是,在做很多手勢識別或者一些我們看起來日常的效果,其實(shí)是蘊(yùn)含了很多復(fù)雜邏輯的。


這些復(fù)雜邏輯原本被封裝在操作系統(tǒng)內(nèi),在系統(tǒng)內(nèi)時可以隨時調(diào)用。但是一旦脫離了操作系統(tǒng),那手勢的處理邏輯就會比較簡陋,導(dǎo)致最終的體驗(yàn)不佳。


那這個時候也許你會想問,我們怎么會脫離操作系統(tǒng)呢?我們的手機(jī)不都是iOS和Android的嗎?不都是操作系統(tǒng)嗎?其實(shí)這里指的操作系統(tǒng),是指操作系統(tǒng)的原生組件。這類組件只有在原生開發(fā)中才能被調(diào)用。



如今,很多App都使用前端語言來開發(fā)內(nèi)部頁面(HTML/CSS/JS)。隨著Web混合開發(fā),F(xiàn)lutter等跨端技術(shù)棧的出現(xiàn),越來越多的團(tuán)隊(duì)開始擁抱這樣的跨平臺技術(shù)棧。在節(jié)約了開發(fā)成本的同時,隨之而來的就是,在日常開發(fā)過程中,離純原生組件越來越遙遠(yuǎn)。


在這樣的背景下,研發(fā)團(tuán)隊(duì)的體驗(yàn)設(shè)計(jì)師需要自己來研究用戶行為,手勢、組件和動效,實(shí)現(xiàn)原生組件類似的復(fù)雜邏輯,才能最大程度的接近甚至超越原生組件的體驗(yàn)。



不加處理的直接調(diào)用前端接口

其實(shí)使用各個技術(shù)框架,也是有內(nèi)置一些接口的。例如一些事件監(jiān)聽器 / 動效曲線等。這也是騰訊文檔之前一直在使用的,但是會遇到一些問題??偨Y(jié)下來,主要有以下幾個問題:



無法精確操作:用戶的操作和操作反饋被自己的手指擋住,無法完成精確操作。


手勢識別誤觸:同一熱區(qū)支持了多個手勢,可是用戶的實(shí)操時的手勢動作又沒那么標(biāo)準(zhǔn),導(dǎo)致用戶誤觸其他手勢。


手勢觸發(fā)費(fèi)力:滑動費(fèi)勁,需要滑動很長距離才能觸發(fā)預(yù)期的動作。


動畫不流暢:各個技術(shù)框架自帶的動畫曲線和插值器,良莠不齊,體驗(yàn)不統(tǒng)一且不夠流暢。



系統(tǒng)組件背后的復(fù)雜邏輯

對于原生組件,我們習(xí)以為常的系統(tǒng)控件和手勢設(shè)計(jì),里面蘊(yùn)含的智慧遠(yuǎn)比我想象的更多。


舉個簡單的例子:iOS系統(tǒng)的首頁,它可以支持橫豎各個方向的滑動,并且在觸發(fā)一個方向的手勢之后,就無法再觸發(fā)其他手勢了。



但是其實(shí)有個問題,手指和平時演示的不太一樣。


就是手指貼合上屏幕的時候,手指與屏幕的貼合面,并不是均勻向四周擴(kuò)散的,而是向下的擴(kuò)散更大一些。對于觸摸中心點(diǎn),在觸摸的過程中,就會有向下的一個偏移。



如果直接識別,這個偏移直接被識別為向下滑動,那就會無法觸發(fā)左右滑動的手勢。


例如在iOS內(nèi)的手勢識別,有一個專門的接口來做識別:PanGestureRecognizer,這個接口會在10px內(nèi)先判定手指移動的方向和距離,再對具體觸發(fā)的手勢來做定義。例如下圖,雖然剛開始手指位置有些許下移,但是最終還是可以左滑判定成功。


所以你會發(fā)現(xiàn),如果在iOS桌面上輕微的向左右滑動(10pt內(nèi)),桌面是不會有任何響應(yīng)的。就是因?yàn)樵?0pt內(nèi),系統(tǒng)還無法確認(rèn)手勢的方向。


另外,系統(tǒng)還自帶了很多手勢反饋操作,包括回彈效果,甩出效果。里面的小邏輯設(shè)計(jì)需要非常精準(zhǔn)。并且對于滑動的手勢還帶了回彈效果,看起來非常爽。




打造流暢體驗(yàn)設(shè)計(jì)


騰訊文檔是基于Web / Flutter的應(yīng)用,并且接管了很多原生系統(tǒng)的能力,包括排版能力、光標(biāo)選區(qū)能力,拖動能力等。因此,很多基于Native開發(fā)能很簡單解決的問題,在Web下就要重新打磨一套我們?nèi)粘A?xí)以為常卻邏輯復(fù)雜的組件。



Chapter 2

——————————

精準(zhǔn)且適應(yīng)性的規(guī)則


由于騰訊文檔是基于Web的的應(yīng)用,接管了很多原生系統(tǒng)的能力,所以不能使用系統(tǒng)的Gesture Recognizer,也不能使用系統(tǒng)的選區(qū)光標(biāo)能力。


如果是簡單的使用前端的操作監(jiān)聽器,那會要求用戶使用極其標(biāo)準(zhǔn)的手勢操作才能觸發(fā),否則就會觸發(fā)失敗。因此需要設(shè)計(jì)更精準(zhǔn)且適應(yīng)性的規(guī)則,來包容用戶不那么標(biāo)準(zhǔn)的實(shí)操手勢。需要幫助用戶在粗糙的實(shí)操手勢下,猜測用戶原圖,并精準(zhǔn)完成的操作。



常用手勢的進(jìn)階定義

可能你以為手勢操作并不常用,其實(shí)并不是的。


一個單擊,一個雙擊,其實(shí)本質(zhì)上都是手勢。


不過,很多人可能會認(rèn)為,按說這些操作都有原生的監(jiān)聽器,不需要再去定義。但是其實(shí)如果不做一些進(jìn)階定義,就會出現(xiàn)操作不靈敏的問題。例如下面這個問題。


在很多安卓手機(jī)上,或者是我們自己的騰訊文檔里,時常遇到一個問題:就是原本以為雙擊文本區(qū)域可以選中文字,可是卻發(fā)現(xiàn)這個雙擊成了一個玄學(xué)事件。雙擊有時生效而有時不生效。


理想的雙擊大概是這樣的,是需要2次有效的Tap事件:



這個Bug讓我們來定位一下。讓我們還原一下事情的經(jīng)過:



哦!原來是因?yàn)殡p擊的其中一稍微偏移了一下,拖動到了光標(biāo),導(dǎo)致系統(tǒng)判定是一次Tap一次Drag的行為,這樣就沒有辦法觸發(fā)雙擊行為了。


解決方法也很簡單。把10px偏移距離內(nèi)的滑動行為都判定為點(diǎn)擊行為就可以了。從這里看,我們其實(shí)需要做的是,規(guī)范“點(diǎn)擊”這個手勢的定義。


因?yàn)樵瓉淼南到y(tǒng)自帶定義,容易造成誤操作,而且手指貼上屏幕的時候,都會產(chǎn)生輕微位移,或者一不小心滑動了頁面,或者不小心拖動了光標(biāo),導(dǎo)致手勢識別的不靈敏。


原定義:“點(diǎn)擊并在500ms內(nèi)在原處松手”。


需重新定義為:“點(diǎn)擊并在在500ms內(nèi),在10px以內(nèi)處松手”。


另外,文檔移動端也定義了一系列更進(jìn)階的手勢的操作,在這樣對手勢的進(jìn)階定義后,操作可以被更精準(zhǔn)和智能的判斷。這些定義被寫在了設(shè)計(jì)規(guī)范中,包括了單擊 / 雙擊 / 長按 / 拖拽





光標(biāo)拖動&長按選中

騰訊文檔的整個文本編輯區(qū)域都是使用Canvas實(shí)現(xiàn)的,由前端自主控制渲染。因此,選區(qū)光標(biāo)就無法直接使用系統(tǒng)能力,需要設(shè)計(jì)師來設(shè)計(jì)一套選區(qū)光標(biāo),并且支持系統(tǒng)的各種選區(qū)光標(biāo)的手勢。


由于騰訊文檔的光標(biāo)選區(qū)是非?;A(chǔ)基礎(chǔ)的編輯組件。這個組件在一般的產(chǎn)品中,都是直接復(fù)用的系統(tǒng)組件,但是在騰訊文檔中,就需要重新去考慮光標(biāo)組件。


首先有個需求,光標(biāo)是可以在文本中快速拖動的。


經(jīng)常會遇到拖動。無論是光標(biāo)拖動,還是長按選中,我們都希望能清楚的看到光標(biāo)的位置,所以我們在用戶拖動光標(biāo)和選區(qū)的時候,使被拖動的組件放大1.5倍,使用戶可以看到拖動效果。



這就夠了嗎?不夠的。


如果用戶想要精準(zhǔn)的控制光標(biāo),首先要讓用戶完整的看到光標(biāo)。用戶在拖動光標(biāo)的時候,手指經(jīng)常會不自覺的向下移動。這是為了讓自己看清光標(biāo),這個時候,我們不應(yīng)該把這個移動當(dāng)做是把光標(biāo)向下移動一行,光標(biāo)本身不應(yīng)該跟隨向下,應(yīng)該只在同一行,并且只響應(yīng)左右移動。



但是當(dāng)我向下拖更多距離的時候,光標(biāo)就應(yīng)該一直保持在手的上方,以確保用戶可以精確操作。



同樣,我們定義了長按后可以拖動選擇的手勢。在拖動的過程中,允許用戶向下偏移一定的區(qū)域,來看清選區(qū)的具體邊界位置。



手機(jī)端的光標(biāo)選區(qū),一個我們?nèi)粘A?xí)以為常的光標(biāo),里面竟然有那么多小細(xì)節(jié)在里面,才能讓光標(biāo)變得好用。



滑動觸發(fā)規(guī)則

當(dāng)一個滑動手勢被觸發(fā)時,我應(yīng)該如何判斷這個手勢已經(jīng)被觸發(fā)了呢?這個判斷并非簡單的橫劃豎劃,而是針對的不同的場景,去做特殊的處理的。


案例1:向下滑動手勢


例如說,一個非常簡單的手勢,半屏向下滑動關(guān)閉。我們通常來說我們的日常體驗(yàn),會是一個對距離的判斷,當(dāng)手指拖動容器超過一定的距離,然后松手,就可以觸發(fā)手勢。


但是僅僅判斷距離是不夠的。因?yàn)槭謩菔菍ΜF(xiàn)實(shí)世界的映射。很多時候用戶希望滑動很短的距離,把東西“甩”出去。


如果僅僅判斷距離,那就很難“甩”出去。這時候就還需要判定用戶手指在離屏?xí)r的速度了。最后能達(dá)成一個比較輕松就能觸發(fā)手勢的結(jié)果。




案例2:左右切換相機(jī)


這是騰訊文檔的文檔掃描頁面。上半屏是大面積的取景畫面,底部是文檔類型的選擇。


因?yàn)槿【绊撁婵梢渣c(diǎn)擊對焦和測光,因此輕微的滑動不應(yīng)該導(dǎo)致整個取景頁面或者底部Tab的滑動,應(yīng)當(dāng)是當(dāng)整個頁面檢測到一個比較大的滑動動作之后,才自動移動切換。


但是如果需要離手才能觸發(fā),如果用戶劃動的速度比較慢,整個體驗(yàn)也會隨之變得過于拖沓。所以這里還加了一條邏輯:當(dāng)手指滑動速度的加速度急劇減小時,不用松手也可以觸發(fā)手勢。這樣的體驗(yàn)感會覺得流暢很多。





Chapter 3

——————————

愉悅且有意義的動畫


在騰訊文檔中,點(diǎn)擊、滑動、懸浮、長按等手勢操作貫穿用戶的使用過程,動畫效果是所有交互操作的視覺反饋,也許它沒有那么的「高逼格」,但它卻是這臺精密儀器運(yùn)轉(zhuǎn)不可缺少的“潤滑劑”,流暢愉悅的動效能夠讓體驗(yàn)更美好。


但是由于騰訊文檔起初是基于web混合開發(fā),后面又加入了Flutter框架,這就導(dǎo)致多個平臺、框架的動效邏輯混在一起,在這個背景下,設(shè)計(jì)師們就需要從多方面重新梳理并定義動畫的基礎(chǔ)規(guī)則。





自然流暢

自然流暢是騰訊文檔內(nèi)所有動效運(yùn)行的基礎(chǔ)原則。


由于騰訊文檔是基于Web、flutter等多框架混合開發(fā)的應(yīng)用,動畫曲線又都是基于各自框架自帶的貝塞爾曲線(cubic-bezier),這就經(jīng)常導(dǎo)致一些同類型的手勢操作,最后所呈現(xiàn)的動畫效果卻相差很多。并且原生的動畫曲線,在實(shí)際使用上并沒有達(dá)到很好的效果,只是能夠比沒有動畫要強(qiáng)上一些。因此,確定一套統(tǒng)一、自然并且適合騰訊文檔的動畫曲線,是設(shè)計(jì)師優(yōu)先要解決的問題。


為此我們根據(jù)動畫使用的場景,定義了四種標(biāo)準(zhǔn)曲線。同時輸出給開發(fā)同學(xué),作為標(biāo)準(zhǔn)可調(diào)用的曲線。



緩動(Ease Both)

緩動曲線應(yīng)用的場景最為廣泛,也是騰訊文檔的默認(rèn)曲線。相對于傳統(tǒng)web端或者flutter框架內(nèi)的默認(rèn)曲線,騰訊文檔的緩動曲線開始時會比較迅速,這樣能給用戶及時反饋、高效運(yùn)行的感受;在運(yùn)動快結(jié)束的階段,為了避免快速反饋帶來急躁的負(fù)面感受,曲線會更加平緩,進(jìn)而使正在運(yùn)動的元素吸引用戶的注意力,并讓用戶能夠有一定的思考時間,保證動畫的合理性。




緩出(Ease Out)

即減速曲線。運(yùn)動元素在開始階段時位移變化會很大,但是后面會越來越小。緩出曲線前期快速運(yùn)動,不需要過多讓用戶留意,在結(jié)束的時候逐漸減慢速度,讓用戶關(guān)注到其新的狀態(tài),用戶就可以提前切入到定位尋找的階段,等動畫停止后就可以立即進(jìn)行操作。這種類型的曲線通常是用在元素進(jìn)入界面時使用。



彈性(Spring)

彈性曲線是一種基于阻尼彈性振蕩的原理實(shí)現(xiàn)的復(fù)雜曲線,阻尼比決定了曲線具體動畫感受,根絕阻尼比的不同,彈性曲線可以分為三種,分別是欠阻尼運(yùn)動、臨界阻尼運(yùn)動及過阻尼運(yùn)動。在騰訊文檔中,通常只會使用到欠阻尼運(yùn)動及臨界阻尼運(yùn)動。



彈性曲線卻并不適合在所有的使用場景中,因?yàn)檫@種運(yùn)動一般情況會需要相對多一些的時間來完成整個運(yùn)動過程,讓整個過程變得過于拖沓。同時過于活潑的彈性動畫也會過分的吸引用戶注意力,打斷主進(jìn)程的操作,影響效率。



運(yùn)動時長

時長是元素移動所需的時間,在創(chuàng)建自然流暢的動畫中起著重要作用。如果動畫太慢,會使用戶感到卡頓和厭煩;但是如果速度太快,就會給人緊張急迫的感覺。因此動畫的持續(xù)時間應(yīng)該給與用戶充分的反應(yīng)時間,同時又不用過久等待為標(biāo)準(zhǔn)。


在移動端上,我們設(shè)定動畫的持續(xù)時間在300-400ms。而在web端上,我們設(shè)定動畫的持續(xù)時間在200-300ms內(nèi)。具體的運(yùn)動時長視具體動畫而定,時長并不一成不變。





積極肯定

曲線是動效的靈魂,有時候你覺得平凡的動畫,或許只需要簡單地?fù)軇幽菞l運(yùn)動曲線,就可以讓這個動畫瞬間變得充滿靈氣。盡管曲線可以解決大部分動效問題,但在動畫的實(shí)際落地中,還是有一些問題,是它無法解決的。這就會涉及到動畫更底層的渲染及邏輯。比如說在web端,前端動畫卡頓與否其實(shí)是和動畫本身實(shí)現(xiàn)性能有關(guān)系的,瀏覽器的屏幕刷新率都可能被代碼拖慢。這也是騰訊文檔在初期并沒有在web端增加太多動畫的原因,過多的動畫效果其實(shí)意味著需要更多的性能資源傾斜到動畫上。




高效愉悅

在動畫上除了希望提供自然流暢的積極體驗(yàn),我們也希望繼續(xù)深入,“讓工具褪去冷冰的外殼,走進(jìn)與智能隔空對話的新世界”。讓體驗(yàn)更有情感,讓用戶更愉悅。


在待辦事項(xiàng)上,優(yōu)化前每當(dāng)用戶點(diǎn)擊完成一項(xiàng)事項(xiàng)時,完成動畫僅僅是機(jī)械的從未完成向完成圖標(biāo)的替換,反饋效果非常“高效”的完成了它的任務(wù),但是這樣就足夠了么?不一定,當(dāng)一項(xiàng)事項(xiàng)被列為待辦時,就證明這件事對于用戶來說是重要的。在現(xiàn)實(shí)中,當(dāng)重要的事情完成時,我們都是歡欣的,就像心里在放煙花,完成待辦時候的動畫理應(yīng)如此,讓用戶在完成的那一刻體驗(yàn)到“煙花”的綻放。




Chapter 4

——————————

關(guān)于流暢感...


但是總有一些產(chǎn)品,或者是通用性的考慮,或者是一些歷史原因,或者是一些成本考量,走上了非原生開發(fā)的路,這樣的產(chǎn)品在未經(jīng)打磨的情況下直接一把梭搞出來,的確會顯得卡頓,或者難用。


這其中不僅需要工程師一點(diǎn)一滴的性能優(yōu)化,這也對體驗(yàn)設(shè)計(jì)師對細(xì)節(jié)的把控提出了更高的要求。只有對用戶的行為處處關(guān)照,才能無限接近最極致的體驗(yàn)。


文章來源:站酷   作者:騰訊ISUX

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ì)

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

過去的一周,基金應(yīng)該算是熱門話題中的頂流。微信里各種設(shè)計(jì)群、校友群、帶貨群、滑雪群都充斥著一片財(cái)富縮水的哀嚎。 
每逢這個時候,大家也就開始順勢討論起各種基金投資APP好不好用的問題。 
今天抽點(diǎn)時間,聊聊 招商銀行、 螞蟻財(cái)富、 天天基金這三家APP的基金詳情頁設(shè)計(jì)。 

undefined

基金產(chǎn)品的詳情頁大體是圍繞一只基金的概況、盤中行情、歷史數(shù)據(jù)、持倉情況、基金經(jīng)理介紹、基金檔案、交易規(guī)則等一級模塊,來“客觀包裝”這只基金。 
一級模塊的信息下包含了眾多層次級信息,各家APP對于同一個次級信息,是否曝光在詳情頁的一級模塊里,都有著獨(dú)立的思考,這在很大程度上決定著信息分發(fā)和觸達(dá)的效率。 
為什么要強(qiáng)調(diào)“客觀包裝”,因?yàn)闊o論你看到與否,信息都在那里,而信息曝光的順序卻直接影響到用戶對基金的認(rèn)知。 
就好像我們了解一個人,如果只是看他的穿搭、氣質(zhì)、體態(tài),可能會覺得這是一個藝術(shù)家。 
但你若先把眼睛蒙上,聽他講量化策略、深度學(xué)習(xí),你發(fā)現(xiàn)這人居然是個技術(shù)男! 
比如我們挑一只基金,來看看它在三個APP的詳情頁里,分別長啥樣。 


01/ 招商銀行

總體觀感舒適,沒有信息密度過高導(dǎo)致的視覺焦躁感。用色非??酥?,留白空間較多。段落式結(jié)構(gòu)清晰,文本層級和對比度清晰,便于信息檢索,但分段式布局有點(diǎn)old fashion。 
undefined
基金概況:在日內(nèi)漲跌幅和最新凈值基礎(chǔ)上,補(bǔ)充了近1年收益率,可能是考慮到進(jìn)入該詳情頁以后,行情模塊會默認(rèn)定位到“成立以來收益率”(其他會普遍定位到近1年收益率),可能是給投資者建立“基金需要長線投資”的心理預(yù)期。 
信任力背書:白底通欄形式與整體UI規(guī)范相融,完全被淹沒在頁面里,不易被識別。應(yīng)當(dāng)在視覺表現(xiàn)層有所凸顯。 
數(shù)據(jù)看板:這是基金詳情里最重要的模塊之一,值得注意的是,業(yè)績走勢&凈值估算、業(yè)績排名&歷史回測這在別家往往會分成兩個模塊。 
這兩個模塊里有信息重疊交叉,比如近1月~近1年的收益情況在折線圖和列表里都能看到,與同類基金的相對位置關(guān)系也能可視化,但列表更具有量化結(jié)果的優(yōu)勢,因而更受到專業(yè)投資者的青睞。 
而招行根據(jù)歷史收益、凈值、盤中估算3個維度整合成了一個模塊。一個模塊的優(yōu)勢是折線圖和列表數(shù)據(jù)可以聯(lián)動觀察。只不過默認(rèn)配置的三行數(shù)據(jù)有點(diǎn)少,查看更多就得跳轉(zhuǎn)。 
招行這個模塊令人詬病的點(diǎn)在于,一是收益走勢里缺了近6個月的維度,二是折線圖采用了曲線,且線寬過粗,導(dǎo)致不能像折現(xiàn)那樣直觀地反映出時間顆粒度,得手動長按觸發(fā)對應(yīng)交易日的明細(xì)。 

undefined

基金診斷:招行自有的一套評估體系,內(nèi)置有業(yè)績回測、夏普比率、最大回撤、基金經(jīng)理任期評估等信息,相對更專業(yè)。而詳情頁一級模塊里展示的這個4個定性維度,怎么看都有點(diǎn)偏小白。 
基金持倉:這是最重要的模塊之二,如果把基金比作一道菜,這就是菜譜。跟做菜一樣,對每一道食材的烹調(diào)和火候把控決定了最終呈現(xiàn)出的風(fēng)味。 
基金重倉股的盤中行情對于基金經(jīng)理而言,就是每一道食材在制作中的狀態(tài),可以幫助經(jīng)驗(yàn)投資者了解基金的布局在當(dāng)下的市場狀況,以便做出決策。 
而限于銀行體系內(nèi)無法接入證券交易所數(shù)據(jù),招行在基金持倉這塊的盤中行情是空缺的,只能顯示持倉占比和市值估算。對于老手來說,難免是個缺憾。 

undefined

基金經(jīng)理介紹:這一塊在布局結(jié)構(gòu)上有點(diǎn)bug,按常理“現(xiàn)任經(jīng)理”和“劉某某”屬于從屬關(guān)系,所以標(biāo)題欄右側(cè)放置“歷任經(jīng)理”并且用兩端封閉式分割線就不太合理。 

招行估計(jì)是考慮到?jīng)]有配置現(xiàn)任經(jīng)理的詳情,又不想浪費(fèi)標(biāo)題右側(cè)的空間,才作此設(shè)計(jì)。

其他相關(guān):這部分包含的基金公司、基金檔案、交易規(guī)則屬于并列關(guān)系,理應(yīng)出現(xiàn)的分割線卻沒有體現(xiàn),雖不影響投資者使用但反映出UI組件規(guī)范缺乏一定邏輯性。

交易規(guī)則:在購買時間點(diǎn)缺少了T日(交易日)收盤時間(15:00前)提示和周歷提示。頁面空間是富余的,完全可以將信息曝光提高投資者的時間感知度,而不是跳轉(zhuǎn)二級頁面才能了解詳情。



02/ 天天基金

功能模塊十分豐富,cover了關(guān)于一只基金的所有直接和間接描述。直接的包含了概況、行情、歷史回測、持倉、經(jīng)理介紹等內(nèi)容,間接的包含了問答、討論、資訊、公告等內(nèi)容。

在產(chǎn)品的廣度與深度方面,天天基金選擇了把廣度拉寬,將很多二級內(nèi)容拍平,嵌入到一級頁面中,可以說非常適合經(jīng)驗(yàn)型投資者,但隨之而來的劣勢也十分明顯 - 頁面過長。

undefined

非常直觀,天天的基金頁面長度是招行(或螞蟻)的兩倍不止。

有了上面招行基金詳情頁的大致結(jié)構(gòu)做支撐,這里就不把天天基金的頁面逐個模塊拆解分析了,我們挑一些有意思的來說。

基金概況:跟隨漲跌變化的紅/綠頁頭,這是天天最具標(biāo)志性的設(shè)計(jì)之一,個人對此保留意見,這么大面積綠色在過去的一周,實(shí)在是令人焦慮。

凈值行情/歷史數(shù)據(jù):天天基金在凈值模塊單列出了“單位凈值”和“累計(jì)凈值”的走勢圖,還直接標(biāo)明了不同時段區(qū)間內(nèi)的最高最低值。(“累計(jì)凈值”是基金自成立之日起至今的凈值表現(xiàn),“單位凈值”是基金運(yùn)作期間扣除分紅和份額拆分影響之后的凈值表現(xiàn)。)

undefined

聽說這是區(qū)分老基民和新人小白最直接的一道坎,當(dāng)然作為一個UX設(shè)計(jì)師,我也就摻這一句,畢竟資格還遠(yuǎn)遠(yuǎn)夠不上老基民。

非常貼心的一點(diǎn)是,天天在這添加了定投該產(chǎn)品的收益可視化。根據(jù)歷史收益率回測和不同定投算法,進(jìn)行一段時間內(nèi)的收益率估算。與此類似設(shè)計(jì)的產(chǎn)品還有漲樂財(cái)富通。

undefined

特色數(shù)據(jù):這也是經(jīng)驗(yàn)投資者非常重視的三個指標(biāo)。波動率反映收益率波動的程度,越小越好;夏普比率指基金每承受一點(diǎn)風(fēng)險能夠獲得多少超額收益,越高越好;最大回撤指基金凈值從最高到最低的降幅,越小越好。

基金持倉:這又是一個老基民的福利專區(qū)。上面分析過招行基金持倉tab的優(yōu)勢,而天天直接把帶有重倉股盤中行情的持倉列表、資產(chǎn)/行業(yè)分布餅圖直接嵌入到一級頁面里,雖然默認(rèn)只顯示前五只重倉股,但對于了解相關(guān)板塊行情也很有幫助。

undefined

這一模塊的二級頁面也支持投資者切換時間去觀察基金經(jīng)理每一季度的調(diào)倉風(fēng)格。其實(shí)我個人更傾向于直接把十大重倉股行情全都放進(jìn)來,默認(rèn)折疊需要時展開。畢竟調(diào)倉不是個高頻動作,我不會需要頻繁地跳進(jìn)二級頁面去觀察調(diào)倉。

基金經(jīng)理:作為后臺烹飪的cook,這塊的簡介過于“簡潔”了。其實(shí)次一級的經(jīng)理詳情頁里有非常詳實(shí)的背景概述和任期間業(yè)績回報評估,完全可以精選一些標(biāo)簽化的內(nèi)容在一級模塊里完善包裝。

社交化:然后比較有意思的就是“社區(qū)”概念。天天基金上每只基金都分別有兩個“bar”,一個問答吧一個貼吧,貼吧包含了問答吧。

這里能體現(xiàn)出天天對于細(xì)分場景的重視。貼吧里的話題天南海北,吐槽的、圍觀的、提問的、表態(tài)的、發(fā)小作文的、曬收益/虧損的,啥都有。

天天的產(chǎn)品經(jīng)理還是為提問用戶單獨(dú)開辟了一片凈土,讓內(nèi)容的傳播與觸達(dá)更加高效。

回到UI層面,天天基金頁面的文本內(nèi)容在邏輯結(jié)構(gòu)上比較復(fù)雜,但視覺上沒有將不同層級的對比度拉開,導(dǎo)致文本信息過于平均,不利于重點(diǎn)信息的快速檢索。



03/ 螞蟻財(cái)富

螞蟻的基金詳情頁遵循整體UI風(fēng)格采用了卡片式布局,信息架構(gòu)更清楚。與前兩個案例中的文本信息相比,設(shè)計(jì)質(zhì)感好了不少。 
頁頭的藍(lán)色背景標(biāo)志著螞蟻集團(tuán)的品牌基因,強(qiáng)化投資者對品牌的感知力度。且開辟了一個入口支持基金公司財(cái)富號里關(guān)于產(chǎn)品的宣導(dǎo)視頻。 

undefined

財(cái)富號視頻:視頻可以展開和收起。產(chǎn)品還給它配置了觀看人次,側(cè)面為該基金公司和旗下基金產(chǎn)品做熱度營銷。

基金概況:除了基金相關(guān)的基本信息以外,模塊內(nèi)展示了晨星評級和關(guān)注人氣。既有客觀權(quán)威評估體系,也有用戶層的氛圍烘托,通過兩層信任力建設(shè)占領(lǐng)用戶心智。

信任力背書:“支付寶金選”是由支付寶理財(cái)智庫、中國證券報聯(lián)合推出的一套理財(cái)產(chǎn)品評估體系,背后有一些專家KOL背書。能夠篩選出部分歷史業(yè)績表現(xiàn)優(yōu)異、基金經(jīng)理業(yè)績突出的產(chǎn)品。

相比于前幾個信任力的營造,這一點(diǎn)的重要性和優(yōu)先級遠(yuǎn)遠(yuǎn)勝出。因此在視覺層面也用黑金配色體現(xiàn)出權(quán)威性和尊享感。

能夠很明顯地察覺到互金平臺和金融機(jī)構(gòu)在產(chǎn)品包裝上的玩法不同:互金平臺傾向于權(quán)威背書和人氣營銷,金融機(jī)構(gòu)傾向于指標(biāo)構(gòu)建和數(shù)據(jù)展示。

行情/數(shù)據(jù):這一模塊增加了一個可以手動關(guān)閉的tag,是關(guān)于“風(fēng)險回報比率”的描述,一個聽上去類似“夏普比率”的指標(biāo)。優(yōu)勢在于螞蟻直接量化轉(zhuǎn)譯了指標(biāo)的結(jié)果——“好于同類98%基金”,省去了投資者分析指標(biāo)的過程。

基金經(jīng)理介紹:關(guān)于這部分,雖然在基金經(jīng)理介紹的二級詳情頁里,天天基金比螞蟻財(cái)富要詳實(shí)得多,但一級模塊里螞蟻的人物包裝還是更到位?!敖鹋*劦弥鳌焙蛯W(xué)歷/從業(yè)背景簡述能直觀地提高產(chǎn)品在用戶側(cè)的信任力。

持倉行情:這可以說是該頁面視覺創(chuàng)新的重頭戲。螞蟻財(cái)富由于相關(guān)個股數(shù)據(jù)缺失,并不能像招行和天天基金那樣橫向比對每個季度基金經(jīng)理的調(diào)倉動作,對于經(jīng)驗(yàn)投資者研判這只基金來說,少了一個觀察維度。

undefined

而視覺層面的創(chuàng)新則顯得十分取巧,原本枯燥的個股行情列表被轉(zhuǎn)譯為可視化的矩陣,矩形的大小和底色能直接映射該股票的持倉占比和實(shí)時行情。并且橫向滑動的組件也支持在不跳轉(zhuǎn)的情況下完整顯示10只重倉股。

對于持有或長期關(guān)注這只基金的用戶而言,除非你要分析調(diào)倉,否則是不需要頻繁進(jìn)入二級頁面查看持倉明細(xì)的。

以及細(xì)致到小數(shù)點(diǎn)后兩位的持倉占比,意義也不大,了解大致的配比關(guān)系即可。螞蟻這個可視化組件在帶來新穎視覺觀感的同時,也解決了這一問題。



結(jié)語

對于產(chǎn)品而言,信息架構(gòu)往往是最容易有爭議的部分。而金融產(chǎn)品的信息深度和業(yè)務(wù)復(fù)雜度尤為明顯,與之俱來的必然是各平臺在架構(gòu)策略上百花齊放。

文章來源:站酷    作者:loven

藍(lán)藍(lán)設(shè)計(jì)www.bouu.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ù)

日歷

鏈接

個人資料

存檔