首頁

B端設(shè)計(jì)師不可忽視的【產(chǎn)品】和【用戶】

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


我們公司是做停車場(chǎng)產(chǎn)品的,阿里作為我們公司的大股東,在合作過程中很榮幸學(xué)到了很多阿里的流程規(guī)范和設(shè)計(jì)體系,以及最重要的復(fù)盤的好習(xí)慣。



一,背景介紹

B端產(chǎn)品是指為企業(yè)(business)提供服務(wù)的產(chǎn)品。近年來,C端市場(chǎng)紅利削減,傳統(tǒng)行業(yè)的市場(chǎng)逐步凸顯,再加上新冠疫情的“催化”,眾多企業(yè)紛紛轉(zhuǎn)向B端服務(wù)。由于B端業(yè)務(wù)的復(fù)雜性,所以設(shè)計(jì)師在分析需求前,一定要清晰的知道公司的“產(chǎn)品定位”和“用戶畫像”。


二,B端的產(chǎn)品定位


1. 區(qū)分定義

1.1 市場(chǎng)定位

所謂市場(chǎng)定位就是在我們確定下來為之服務(wù)的客戶群體上進(jìn)行的定位,此時(shí)我們要考慮的不是為哪些人服務(wù)的問題,而是為已經(jīng)確定的人群提供什么服務(wù)的內(nèi)容,包括產(chǎn)品定位、品牌定位、功能定位、形象定位、價(jià)格定位、渠道定位等等一系列的定位,不同的行業(yè)關(guān)注的定位方向會(huì)有不同。

因此,市場(chǎng)定位是一個(gè)包羅諸定位的概念。必須是先有市場(chǎng)才有定位,市場(chǎng)都沒有,你都不知道給誰用,何談定位?定位的目的就是為了差異化區(qū)分競(jìng)爭(zhēng)對(duì)手,為客戶提供更好的產(chǎn)品和服務(wù),如果整個(gè)市場(chǎng)上就你一家說了算,你就沒必要定位,因?yàn)榭蛻魶]得選擇,就這東西你愛要不要。實(shí)際上這種情況很少存在,我們絕大多數(shù)企業(yè)都處在激烈的競(jìng)爭(zhēng)環(huán)境中,要比對(duì)手更好地滿足客戶的需求,要讓客戶認(rèn)為你比誰都更適合他,要做到這一點(diǎn)就必須把定位工作轉(zhuǎn)移到顧客的心智中去。


1.2 品牌定位

定位是這樣一種邏輯關(guān)系:接受是因?yàn)橄矚g,喜歡是因?yàn)榱粝铝撕糜∠?,留下好印象是因?yàn)樾闹嵌ㄎ坏某晒ΑJ聦?shí)上,這種邏輯關(guān)系正是品牌定位考慮的內(nèi)容。品牌的使命就是讓客戶記住你,忠誠于你。定位大師特勞特的定位就是站在品牌的角度來說的。強(qiáng)調(diào)在客戶心智階梯上定位就是要攻心為上,而攻心是所有品牌定位的關(guān)鍵。


1.3 產(chǎn)品定位

很多企業(yè)把品牌定位想得過于簡(jiǎn)單,用一些精神感召激情四射的詞藻堆砌品牌個(gè)性與品牌精神,然后展開猛烈的宣傳攻勢(shì),以為這樣就行了。這是遠(yuǎn)遠(yuǎn)不夠的,在精神與個(gè)性、信念與態(tài)度的背后是老老實(shí)實(shí)的支持類工作,即品牌質(zhì)量的打造。沒有足夠優(yōu)質(zhì)的產(chǎn)品,再煽情的品牌價(jià)值主張也是蒼白無力的??蛻羰窃谡J(rèn)可了你的硬指標(biāo)之后,才會(huì)接受你的軟指標(biāo)。要做出優(yōu)質(zhì)的產(chǎn)品,必須要進(jìn)行有效的產(chǎn)品定位,有效的產(chǎn)品定位是有效的品牌定位的基礎(chǔ)。圍繞客戶關(guān)心的產(chǎn)品的功能屬性、產(chǎn)品提供的利益價(jià)值等等變量進(jìn)行的與競(jìng)爭(zhēng)對(duì)手相區(qū)隔的定位工作就是產(chǎn)品定位。


總之,不論是什么定位,其主要目的都是區(qū)隔同類競(jìng)品。而最為大家熟知的市場(chǎng)定位就涵蓋了很多內(nèi)容,其中就包含了了品牌定位和產(chǎn)品定位。


1.4 總結(jié)


市場(chǎng)定位:

目的:解決“給誰用”,“用什么”,“怎么用”的問題。


產(chǎn)品定位:

目的:確定產(chǎn)品的核心功能,就是用戶可以用這款產(chǎn)品做什么的。

如“釘釘”:中小微企業(yè)管理者提供全方位的數(shù)字管理服務(wù)。


品牌定位:

目的:如何讓用戶記住你,忠誠于你。

如“釘釘”:酷公司,用釘釘。


客戶選擇產(chǎn)品有兩層需求

1.功能實(shí)用性層面需求,由產(chǎn)品定位解決。

2.精神情感層面需求,由品牌定位解決。


了解了三者的區(qū)別后,我們就著重介紹一下產(chǎn)品定位。上文已經(jīng)簡(jiǎn)單的介紹了產(chǎn)品定位的概念,接下來大家首先回憶一下是否遇到過這樣的場(chǎng)景。一群人臉紅脖子粗地討論一個(gè)很簡(jiǎn)單的界面問題:



A說:某模塊重要,應(yīng)該在視覺上強(qiáng)化

B說:老板說要這么改的

c說:競(jìng)品也是這么做的

D說:應(yīng)該直接照著某網(wǎng)站抄啊

E說:只要做的好看就行,能用就行

……

大家各抒己見、七嘴八舌的亂成一團(tuán),最后完全忘記了我們要討論的內(nèi)容,整個(gè)會(huì)開完也沒有任何結(jié)果。


2. 產(chǎn)品定位的意義

2.1 定位對(duì)公司的重要性

如果定位的實(shí)質(zhì)是與同類競(jìng)品的區(qū)分,那么定位的意義也就是與同類競(jìng)品區(qū)分的意義。


2.11 用戶多元

用戶是多種多樣的,產(chǎn)品需求也自然各不相同,我們沒有辦法用同一款產(chǎn)品去滿足不同用戶多元的需求。當(dāng)產(chǎn)品處于0~1的階段時(shí),就應(yīng)該做產(chǎn)品定位,選定部分用戶的需求去滿足。


2.12 競(jìng)爭(zhēng)激烈

各行各業(yè)都會(huì)有很多的競(jìng)品,產(chǎn)品公司的競(jìng)爭(zhēng)是非常激烈的,用戶的選擇非常的多,一不小心就會(huì)死在沙灘上。想要在競(jìng)爭(zhēng)中脫穎而出,就必須得讓我們產(chǎn)品有“特別的印象”。


2.13 資源有限

任何一家公司的財(cái)力,物力,人力,人脈都是有限的,只有深耕于所定位的細(xì)分市場(chǎng),才能讓自己的產(chǎn)品做得更專業(yè),讓目標(biāo)用戶無法摒棄我們的產(chǎn)品,從而使有限的資源積淀為公司的資產(chǎn)。清晰的定位能為我們運(yùn)營團(tuán)隊(duì)的小伙伴提供一個(gè)精準(zhǔn)投放的方向。沒有任何一家公司有無限的財(cái)力,再加上互聯(lián)網(wǎng)時(shí)代,各種廣告植入,用戶的注意力是非常稀缺的,明確一個(gè)產(chǎn)品的定位,一方面可以將有限的運(yùn)營資源精準(zhǔn)的投入到目標(biāo)客戶群體中,另一方面,也能夠用最有效的語言快速打動(dòng)用戶。


2.2 定位對(duì)設(shè)計(jì)師的重要性

產(chǎn)品定位的意義其實(shí)是貫穿整個(gè)產(chǎn)品研發(fā)過程的,需求調(diào)研、產(chǎn)品立項(xiàng)、產(chǎn)品設(shè)計(jì)、交互設(shè)計(jì)、UI設(shè)計(jì)、研發(fā)、測(cè)試......


2.21 設(shè)計(jì)前

在產(chǎn)品立項(xiàng)階段,公司領(lǐng)導(dǎo),產(chǎn)品團(tuán)隊(duì),運(yùn)營團(tuán)隊(duì),用研團(tuán)隊(duì)等會(huì)提出各式各樣的需求,只有明確一個(gè)產(chǎn)品的定位,在產(chǎn)品評(píng)審階段,我們就可以更好的理解需求,甚至反駁掉一些我們認(rèn)為不合理,違反產(chǎn)品定位的一些偽需求。


2.22 設(shè)計(jì)中

如果缺產(chǎn)品定位,設(shè)計(jì)師不僅難以決策需求的優(yōu)先級(jí),還會(huì)浪費(fèi)大量時(shí)間在不必要的糾結(jié)上。因?yàn)槲覀儧]有明確的產(chǎn)品定位,就沒有了明確的設(shè)計(jì)目標(biāo),只能自己猜想設(shè)計(jì)方案,這就是為什么很多設(shè)計(jì)師的過稿率很低,因?yàn)槟阃耆珱]有理由說服自己的領(lǐng)導(dǎo)或者客戶。眾所周知,我們需要依據(jù)來支撐設(shè)計(jì)方案,在下文中會(huì)提到用戶畫像就是方向盤,讓我們能一步一步的朝著目標(biāo)前行,而產(chǎn)品定位就是汽車導(dǎo)航,指引我們?cè)O(shè)計(jì)的方向。


2.23 設(shè)計(jì)后

而在設(shè)計(jì)評(píng)審環(huán)節(jié),不同崗位之間經(jīng)常會(huì)出現(xiàn)對(duì)功能設(shè)計(jì)、視覺設(shè)計(jì)、交互設(shè)計(jì)不同的意見,甚至?xí)a(chǎn)生很大的爭(zhēng)議,在面對(duì)這樣的爭(zhēng)議很多時(shí)候其實(shí)設(shè)計(jì)師在產(chǎn)品經(jīng)理、運(yùn)營的面前是沒有什么話語權(quán)的,這主要是因?yàn)榇蟛糠衷O(shè)計(jì)師不熟悉業(yè)務(wù)的熟悉,產(chǎn)品思維較弱,而別的崗位也會(huì)經(jīng)常把設(shè)計(jì)當(dāng)作美工,導(dǎo)致了現(xiàn)在很多設(shè)計(jì)師的設(shè)計(jì)稿通過率很低。

如果此時(shí)我們的腦海里有一個(gè)清晰的產(chǎn)品定位,很大程度上能夠?qū)@個(gè)弱項(xiàng)進(jìn)行彌補(bǔ)。所以我們需要解決的一切問題都是要圍繞產(chǎn)品定位來展開,只有嚴(yán)格遵循產(chǎn)品定位來設(shè)計(jì)的方案才是有理有據(jù),不僅能夠在設(shè)計(jì)目標(biāo)上與同事達(dá)成共識(shí),解決溝通過程中的各種爭(zhēng)議問題,還能讓你的設(shè)計(jì)真正做到言之有物,經(jīng)得起推敲從而大大提升你的話語權(quán)。


因此,在確定具體需求之前,一定要首先考慮產(chǎn)品定位是什么,如果沒有產(chǎn)品定位,產(chǎn)品就如同失去了方向盤的汽車,橫沖直撞;項(xiàng)目團(tuán)隊(duì)也會(huì)成為一盤散沙。


3. 產(chǎn)品定位的內(nèi)容

產(chǎn)品定位包括兩方面的內(nèi)容:【產(chǎn)品定義】和【用戶需求】。

產(chǎn)品定義主要從產(chǎn)品角度考慮;用戶需求主要從用戶角度考慮。最終的產(chǎn)品定位應(yīng)該是綜合考慮兩者關(guān)系的結(jié)果。“產(chǎn)品定義”中的【主要功能】、【產(chǎn)品特色】和“用戶需求”中的【目標(biāo)用戶】形成了產(chǎn)品定位中核心的內(nèi)容,是產(chǎn)品設(shè)計(jì)的最主要方向和依據(jù)。



對(duì)于B端的產(chǎn)品而言,目標(biāo)用戶是在客戶群體細(xì)分的基礎(chǔ)上得到的,它也在一定程度上影響了使用場(chǎng)景和用戶目標(biāo)。


3.1 產(chǎn)品定義

產(chǎn)品定義包含:客戶群體、主要功能、產(chǎn)品特色。

產(chǎn)品定義可以用一句話來表述,如釘釘:中小微企業(yè)管理者提供全方位的數(shù)字管理服務(wù)。這里的客戶群體是“中小微企業(yè)”,主要功能是“管理”,產(chǎn)品特色是“全方位的”。如果你的產(chǎn)品很難用一句話描述清楚,那么很可能是因?yàn)槟愕漠a(chǎn)品定位不夠清晰,方向不夠明確。



“客戶群體”幫助你明確產(chǎn)品主要為誰服務(wù),所有的功能、內(nèi)容、設(shè)計(jì)風(fēng)格的設(shè)定都圍繞這類群體來進(jìn)行;“主要功能”為你劃定了功能的范圍和限制;“產(chǎn)品特色”使你的產(chǎn)品區(qū)別于同類競(jìng)爭(zhēng)對(duì)手,讓你的產(chǎn)品在同類產(chǎn)品中“脫穎而出”,更具競(jìng)爭(zhēng)力。


舉個(gè)例子(案例中的敏感數(shù)據(jù)已做處理):

當(dāng)我們團(tuán)隊(duì)在設(shè)計(jì)一套停車場(chǎng)管理系統(tǒng)時(shí), 產(chǎn)品經(jīng)理需要事先考慮什么方面?大家知道B端系統(tǒng)主要針對(duì)企業(yè)或組織,他們所處的行業(yè),市場(chǎng)規(guī)模,公司組織架構(gòu)關(guān)系都不相同,具體的需求也不一樣,滿足所有客戶的需求是不可能的,這樣只能制造出一個(gè)“功能堆砌,無法標(biāo)準(zhǔn)化”的產(chǎn)品。因此需要知道運(yùn)營停車場(chǎng)的企業(yè)大概有哪些(如寫字樓、商場(chǎng),物業(yè)小區(qū)、政府單位、旅游景點(diǎn)等等集團(tuán)單位),他們各自有什么特征,哪類企業(yè)更適合重點(diǎn)關(guān)注,如何更好地滿足他們的需求;如何突出特色功能,與競(jìng)爭(zhēng)對(duì)手拉開差距。


當(dāng)然客戶群體、主要功能、產(chǎn)品特色一般是產(chǎn)品經(jīng)理基于市場(chǎng)調(diào)查、用戶研究,以及對(duì)自身資源的綜合分析得出的初步結(jié)論,不是拍腦袋就能想出來的。


例如市場(chǎng)調(diào)研給出的停車場(chǎng)企業(yè)占比結(jié)果是:國有企業(yè)占45%、政府機(jī)關(guān)占25%、上市公司占10%、民營企業(yè)占5%、其它占5%。而公司目前主要以國有企業(yè)居多,且這部分企業(yè)群體的資金雄厚,盈利較高,對(duì)我們公司更有商業(yè)價(jià)值,因此選擇國有企業(yè)作為該產(chǎn)品主要的客戶群體。而根據(jù)競(jìng)品分析和用戶調(diào)研,可能會(huì)發(fā)現(xiàn)市面上同類的停車產(chǎn)品存在各種各樣的問題,其中比較突出有集團(tuán)無法統(tǒng)一化管理子停車場(chǎng),欠缺多元化支付方式,子車場(chǎng)財(cái)務(wù)信息對(duì)不上。而公司恰好有這些方面的資源可以很好地改善這些問題,那么就可以把連接集團(tuán)統(tǒng)一化管理,多元化支付方式,財(cái)務(wù)信息透明化管理等作為產(chǎn)品的特色和賣點(diǎn)最后得出的簡(jiǎn)單產(chǎn)品定義如下:


客戶群體:國有企業(yè)。

主要功能:停車場(chǎng)經(jīng)營管理。

產(chǎn)品特色:支付方式多元化,財(cái)務(wù)信息透明化,集團(tuán)管理統(tǒng)一化。


有了產(chǎn)品定義還不夠,它只是給了方向和范圍,還需要在此基礎(chǔ)上深入挖掘用戶需求,提升用戶體驗(yàn),這樣才能使產(chǎn)品進(jìn)一步走向成功。


3.2 用戶需求

用戶需求包含:目標(biāo)用戶、使用場(chǎng)景、用戶目標(biāo)。

在這里大家要知道目標(biāo)用戶并不是一類人群。因?yàn)槲覀兊目蛻羧后w是一個(gè)企業(yè)或組織,所以目標(biāo)用戶就是要具體到該企業(yè)某角色的人群。首先我們需要把客戶群體的組織架構(gòu)關(guān)系理清楚。


還是停車場(chǎng)的例子:

決策層:CEO、董事長(zhǎng)

管理層:區(qū)域負(fù)責(zé)人、財(cái)務(wù)人員...

基層:崗?fù)ぢ毷厝藛T、物業(yè)人員...


一個(gè)用戶需求可看作是“目標(biāo)用戶”在“使用場(chǎng)景”下的“用戶目標(biāo)”,其實(shí)就是“誰who”在“什么環(huán)境下where/when”想要“解決什么問題what”。用戶需求其實(shí)就是一個(gè)個(gè)生動(dòng)的故事,告訴設(shè)計(jì)師用戶的真實(shí)境況。設(shè)計(jì)師需要了解這些故事,幫助用戶解決問題,并在這個(gè)過程中讓他們感到愉快,回到上述停車場(chǎng)產(chǎn)品的例子上, 作為一個(gè)設(shè)計(jì)師, 應(yīng)該考慮哪些內(nèi)容呢?設(shè)計(jì)師可以通過頭腦風(fēng)暴的方式,邀請(qǐng)產(chǎn)品人員一起在產(chǎn)品定義的基礎(chǔ)上暢所欲言,列出所有想到的內(nèi)容。


在這個(gè)過程中,大家頭腦中會(huì)浮現(xiàn)出一連串的故事,幫助設(shè)計(jì)師確定用戶需求。


A:“年終總結(jié),公司領(lǐng)導(dǎo)想知道集團(tuán)運(yùn)營的車場(chǎng)中,哪個(gè)盈利最多……

B:“財(cái)務(wù)人員想要一鍵導(dǎo)出車場(chǎng)營收賬單……”

C:“區(qū)域經(jīng)理需要為商場(chǎng)的商家分發(fā)消費(fèi)者停車優(yōu)惠券…… ”


當(dāng)然這些內(nèi)容一定不要脫離前面產(chǎn)品定義的范圍。最后整理出的用戶需求如下。


目標(biāo)用戶:董事長(zhǎng)

使用場(chǎng)景:接待合作商時(shí),做經(jīng)營車場(chǎng)的決策時(shí)

用戶目標(biāo):清晰展示車場(chǎng)實(shí)時(shí)數(shù)據(jù),展示集團(tuán)所有車場(chǎng)營收狀況排名。


目標(biāo)用戶:區(qū)域經(jīng)理

使用場(chǎng)景:周匯報(bào),月匯報(bào),車場(chǎng)設(shè)備異常時(shí)……

用戶目標(biāo):一鍵導(dǎo)出車場(chǎng)相關(guān)數(shù)據(jù),車場(chǎng)異常設(shè)備告警。


目標(biāo)用戶:崗?fù)ぢ毷厝藛T

使用場(chǎng)景:交接班時(shí)

用戶目標(biāo):快速準(zhǔn)確的結(jié)算前一值班人員的現(xiàn)金收入。



根據(jù)上述內(nèi)容,設(shè)計(jì)師可進(jìn)一步發(fā)散,考慮如何更好地解決用戶的問題,考慮的范圍包含功能、內(nèi)容、特色等。


目標(biāo)用戶:董事長(zhǎng)  區(qū)域經(jīng)理,崗?fù)ぢ毷厝藛T

關(guān)鍵詞:數(shù)據(jù)全面,配置權(quán)限,設(shè)置公司組織架構(gòu),底下停車場(chǎng)光線昏暗,露天停車場(chǎng)光線過曝……


使用場(chǎng)景:匯報(bào),工作中,車場(chǎng)設(shè)備異常時(shí)

關(guān)鍵詞:下載數(shù)據(jù)表,可視化大屏,異常設(shè)備實(shí)時(shí)上報(bào),收藏常用表格……


用戶目標(biāo):管理停車場(chǎng),管理下屬,增加車場(chǎng)收入,提好工作效率,監(jiān)控設(shè)備……

關(guān)鍵詞:車場(chǎng)數(shù)據(jù)實(shí)時(shí)反饋,車場(chǎng)斷網(wǎng)實(shí)時(shí)警報(bào),分析車場(chǎng)車位利用率,子公司營收數(shù)據(jù)對(duì)比,一鍵導(dǎo)入本地表格自動(dòng)分析數(shù)據(jù),自定義表頭……



選擇不同類型的目標(biāo)用戶、使用場(chǎng)景、用戶目標(biāo),都會(huì)得出不同的產(chǎn)品需求。由此可見事先確定范圍的重要性。需要說明的是,CEO、區(qū)域經(jīng)理、崗?fù)ぢ毷厝藛T雖然有區(qū)別,但他們之間并不是絕對(duì)獨(dú)立和互斥的關(guān)系,他們的一些使用場(chǎng)景和用戶目標(biāo)甚至是重合的。例如,CEO和區(qū)域經(jīng)理可能都有查看車場(chǎng)季度營收情況的需求。如何將這些角色的需求融到同一產(chǎn)品當(dāng)中,但對(duì)他們個(gè)人無關(guān)痛癢的或者保密類的內(nèi)容信息屏蔽掉,就就涉及到權(quán)限配置的問題,這里就不過多贅述。因此在發(fā)散使用場(chǎng)景和用戶目標(biāo)時(shí),不需要太受群體類型的限制?!胺拧钡迷綄?,“收”的時(shí)候才越有選擇余地,越不會(huì)遺漏重要內(nèi)容。


選擇目標(biāo)用戶前面己經(jīng)列出了長(zhǎng)長(zhǎng)的清單,里面有不同的目標(biāo)用戶、使用場(chǎng)景和用戶目標(biāo),這是一個(gè)“放”的過程。接下來應(yīng)該從想象回到現(xiàn)實(shí)了,從中篩選需要的內(nèi)容,這是一個(gè)“收”的過程。

在目標(biāo)用戶、使用場(chǎng)景、用戶目標(biāo)3個(gè)因素中,目標(biāo)用戶是最關(guān)鍵的。一方面,明確目標(biāo)用戶可以使你更專注于服務(wù)某類特定群體,這樣更容易提升這類群體的滿意度,你的產(chǎn)品也更容易獲得成功;另一方面,目標(biāo)用戶的特征對(duì)使用場(chǎng)景和用戶目標(biāo)有較大的影響。因此目標(biāo)用戶的選擇是非常關(guān)鍵的。


前面按照對(duì)停車場(chǎng)的需求將目標(biāo)用戶分成3類:CEO(決策層)、區(qū)域經(jīng)理(管理層)和崗?fù)ぶ凳厝藛T(基層)。CEO:主要為了查看集團(tuán)各個(gè)停車場(chǎng)的運(yùn)營數(shù)據(jù),根據(jù)數(shù)據(jù)提供經(jīng)營決策,從而增加集團(tuán)車場(chǎng)收入,減少車場(chǎng)投入的人力成本;區(qū)域負(fù)責(zé)人:負(fù)責(zé)管理車場(chǎng)基層員工工作狀況以及運(yùn)營管轄區(qū)域停車場(chǎng),目的是提高自己以及下屬工作效率,增加停車場(chǎng)收入;崗?fù)ぢ毷厝藛T:負(fù)責(zé)監(jiān)控停車場(chǎng)設(shè)備是否正常運(yùn)行,辦理停車會(huì)員業(yè)務(wù)目的是為了提高工作效率。


該選擇哪類群體作為產(chǎn)品的目標(biāo)用戶,需要綜合權(quán)衡用戶對(duì)公司的價(jià)值以及潛在需求量。


確定產(chǎn)品定位并據(jù)此篩選需求

目標(biāo)用戶確定后,產(chǎn)品定位也相應(yīng)產(chǎn)生。這樣就可以根據(jù)產(chǎn)品定位篩選匹配的使用場(chǎng)景和用戶目標(biāo)了,從而得出相匹配的關(guān)鍵詞(產(chǎn)品需求)。



使用客戶:中大型國營企業(yè)。

目標(biāo)用戶:ceo  區(qū)域經(jīng)理,崗?fù)ぢ毷厝藛T

主要功能:停車場(chǎng)經(jīng)營管理

產(chǎn)品特色:支付方式多元化,財(cái)務(wù)信息透明化,集團(tuán)管理統(tǒng)一化。

使用場(chǎng)景:匯報(bào),工作中,車場(chǎng)設(shè)備異常時(shí)

用戶目標(biāo):管理停車場(chǎng),管理下屬,增加車場(chǎng)收入,提好工作效率……

關(guān)鍵詞:數(shù)據(jù)全面,配置權(quán)限,設(shè)置公司組織架構(gòu),底下停車場(chǎng)光線昏暗,露天停車場(chǎng)光線過曝,下載數(shù)據(jù)表,可視化大屏,異常設(shè)備實(shí)時(shí)上報(bào),收藏常用表格,車場(chǎng)數(shù)據(jù)實(shí)時(shí)反饋,車場(chǎng)斷網(wǎng)實(shí)時(shí)警報(bào),分析車場(chǎng)車位利用率,子公司營收數(shù)據(jù)對(duì)比,一鍵導(dǎo)入本地表格自動(dòng)分析數(shù)據(jù),自定義表頭……


使用場(chǎng)景、用戶目標(biāo)、關(guān)鍵詞的結(jié)果依賴于不同的思考、調(diào)研方式。例如這里使用的是頭腦風(fēng)暴的方式,如果使用其他的方式可能會(huì)得到其他的結(jié)果。

它們雖不屬于產(chǎn)品定位中最核心的部分,但同樣對(duì)后續(xù)的需求文檔撰寫、設(shè)計(jì)方向起到非常關(guān)鍵的作用。從關(guān)鍵詞中,已經(jīng)可以看到產(chǎn)品需求的雛形了。在整個(gè)過程中可以看到,產(chǎn)品經(jīng)理的決策是至關(guān)重要的。在和設(shè)計(jì)師一起確定產(chǎn)品定位前,產(chǎn)品經(jīng)理需要事先做很多準(zhǔn)備工作,如了解市場(chǎng)調(diào)研結(jié)果、了解市場(chǎng)上同類產(chǎn)品的情況、了解潛在用戶的基本情況、了解自身優(yōu)勢(shì)與劣勢(shì)……如果缺乏了這些必要步驟,設(shè)計(jì)師再怎么努力也無濟(jì)于事。所以設(shè)計(jì)師不要盲目地等待需求文檔,定要幫助產(chǎn)品經(jīng)理明確、落實(shí)這些內(nèi)容,配合產(chǎn)品經(jīng)理一起明確產(chǎn)品定位,再進(jìn)行詳細(xì)的需求定義、文檔撰寫、設(shè)計(jì)工作等。當(dāng)然,每個(gè)產(chǎn)品的情況不一樣,各公司的環(huán)境也大相徑庭。這里僅拋磚引玉,介紹一種產(chǎn)品定位的思路,在實(shí)際工作中還需要具體問題具體分析。


三,B端的用戶畫像


這里并非否認(rèn)用戶畫像對(duì)C端的重要性,而是C端用戶價(jià)值很難量化,而B端用戶的價(jià)值往往更理性,可衡量。


1. 什么是用戶畫像

1.1 用戶畫像的定義(persona)

用戶畫像這個(gè)理念是交互設(shè)計(jì)之艾倫·庫柏(Alan Cooper) 提出來的。

在設(shè)計(jì)網(wǎng)站上可以看到很多案例都模板式的使用了用戶畫像,但卻沒有然后了,只字不提是怎么推導(dǎo)出設(shè)計(jì)方案的……

設(shè)計(jì)師需要站在用戶的角度考慮問題,因此在需求分析、設(shè)計(jì)階段,都要盡量去傾聽用戶的聲音,這樣才有可能設(shè)計(jì)出受用戶歡迎的產(chǎn)品。

把自己當(dāng)作目標(biāo)用戶,去揣摩用戶的心思是遠(yuǎn)運(yùn)不夠的,設(shè)計(jì)師還應(yīng)該真正走到用戶當(dāng)中去,了解用戶的情況,目標(biāo)用戶的文化程度是什么樣的?他們對(duì)產(chǎn)品的期望是什么?他們的工作環(huán)境是怎樣的?他們要完成什么任務(wù)?他們對(duì)競(jìng)品是怎么看的,在這個(gè)過程中,經(jīng)常會(huì)有出乎意料的結(jié)果,如:我們?cè)谠O(shè)計(jì)按鈕時(shí)已經(jīng)做的很明顯了,但是用戶就是找不到;原來用戶是這么理解這個(gè)功能的,這和跟我當(dāng)初的設(shè)想完全不一樣……

產(chǎn)品不可能滿足所有用戶的需要,因此在大家決定走到用戶中去時(shí)首先要明確誰才是目標(biāo)用戶,而用戶畫像,就是對(duì)目標(biāo)用戶的具象化表達(dá)。交互設(shè)計(jì)之父艾倫·庫柏(Alan Cooper) 認(rèn)為, 用戶畫像是真實(shí)用戶的虛擬代表.是建立在一系列真實(shí)數(shù)據(jù)之上的目標(biāo)用戶模型。需要從大量用戶數(shù)據(jù)中提煉出共性特征,井具象成一個(gè)真實(shí)的用戶形象,讓公司內(nèi)產(chǎn)品、設(shè)計(jì)、運(yùn)營等角色都可以直觀地感受到,他們服務(wù)的是一群怎樣的人,讓他們建立起對(duì)目標(biāo)用戶的同理心。


有的產(chǎn)品經(jīng)理和設(shè)計(jì)師還會(huì)把用戶畫像虛擬成具體的人物,井將其制作成卡片貼在自己的辦公桌上,時(shí)刻提醒自己:“這才是我的目標(biāo)用戶,我做需求、設(shè)計(jì)決策時(shí)要圍繞他來考慮:他的使用場(chǎng)景、使用目標(biāo)是什么?我們希望他如何使用我們的產(chǎn)品,以實(shí)現(xiàn)產(chǎn)品的商業(yè)價(jià)值?

因此,用戶畫像雖然是虛構(gòu)的形象,但每個(gè)用戶畫像所體現(xiàn)出來的細(xì)節(jié)特征描述應(yīng)該是真實(shí)的,是建立在用戶調(diào)研收集的真實(shí)用戶數(shù)據(jù)之上的。

而有些設(shè)計(jì)師們認(rèn)為既然是虛構(gòu)的形象,做做頭腦風(fēng)暴、開個(gè)會(huì)討論一下,就能高效的做出一個(gè)用戶畫像,這種做法反而是浪費(fèi)了原本應(yīng)該去真實(shí)用戶那里收集信息的時(shí)間。


1.2 C端用戶和B端用戶區(qū)別



C端,強(qiáng)調(diào)用戶體驗(yàn)。由于C端市場(chǎng)已經(jīng)飽和,很多產(chǎn)品已經(jīng)非常成熟了,大家只能拼用戶體驗(yàn)了。

B,強(qiáng)調(diào)客戶價(jià)值。ToB 也強(qiáng)調(diào)用戶體驗(yàn),但是用戶體驗(yàn)不是致勝的關(guān)鍵。國內(nèi)外有很多 ToB 的產(chǎn)品其實(shí)體驗(yàn)非常糟的,視覺上也是千篇一律根本談不上美觀度,但是它們卻在市場(chǎng)上生存了下來,因?yàn)檫@些產(chǎn)品準(zhǔn)確地滿足了客戶的需求,為客戶帶來價(jià)值。要知道在B端產(chǎn)品設(shè)計(jì)過程中:可用性(功能)大于易用性(體驗(yàn))。


C端,個(gè)人決策鏈路短。是否使用這款產(chǎn)品就在用戶的一個(gè)念頭瞬間。因?yàn)榕陌宓娜恕⑹褂玫娜?、?biāo)準(zhǔn)把關(guān)的人是同一個(gè)角色,所以C端產(chǎn)品個(gè)人決策鏈路非常短。

B,企業(yè)決策鏈路長(zhǎng)。產(chǎn)品路徑因角色不同發(fā)生變化。比如上面說的三個(gè)不同角色, CEO、區(qū)域經(jīng)理和使用的基層員工,他們的使用權(quán)限其實(shí)不一樣。包括他們有管理者視角,有使用者視角,還有使用之后產(chǎn)生數(shù)據(jù)給管理者看的這樣一個(gè)流程。整個(gè)產(chǎn)品路徑會(huì)因?yàn)闆Q策鏈路長(zhǎng),而發(fā)生較大的改變。


C端,易被用戶摒棄。這一點(diǎn)很容易理解,你自己就能決定用不用,一旦用戶遇到了更好的產(chǎn)品,分分鐘就可以摒棄你。但是 ToB 不一樣。

B,難被用戶摒棄。一家公司上上下下幾十到上萬人不等,要想員工換一個(gè)工作軟件,這中間要付出的成本是至少發(fā)一個(gè)文通知大家,然后所有人去下載新軟件,然后激活,然后再上手使用。整個(gè)遷移成本太高。所以一般的企業(yè)不會(huì)輕易換掉已經(jīng)使用的B端產(chǎn)品。


C端,最終目的是讓用戶爽。根據(jù)馬斯洛需求金字塔可以知道,人的需求分為五級(jí),從層次結(jié)構(gòu)的底部向上,需求分別為:生理(食物和衣服),安全(工作保障),社交需要(友誼),尊重和自我實(shí)現(xiàn)。

B,最終目的是為了讓客戶賺錢。釘釘一直提“我們的使命是讓企業(yè)降本提效”,降低成本、提高效率,其實(shí)就是為了讓它能夠更好的活下去。作為一個(gè)企業(yè),商業(yè)訴求是最根本的;它很少是純公益的。純公益的叫公益組織,不叫企業(yè)。


總的來說相較于C端用戶,B端用戶更不容易獲得,個(gè)人的體驗(yàn)并不能完全決定產(chǎn)品使用意愿。但對(duì)于我們企業(yè)一旦獲得了一個(gè)B端客戶,那就意味著短時(shí)間內(nèi)他們是很難被挖走的。


2. B端用戶畫像構(gòu)成

2.1 客戶畫像

在上文“產(chǎn)品定位”中的“客戶群體”就是介紹客戶畫像的,作為設(shè)計(jì)師如果能清晰了解以下表格內(nèi)容,那對(duì)我們理解業(yè)務(wù)是非常有個(gè)幫助,當(dāng)然這一切都是更好的做設(shè)計(jì),具體內(nèi)容如下:


2.2 角色畫像

2.21 三種關(guān)鍵角色

我們可以根據(jù)客戶畫像中的“組織結(jié)構(gòu)”選出3種關(guān)鍵的角色:



1.EB經(jīng)濟(jì)購買影響力(拍板的人)

2.UB用戶購買影響力(使用的人)

3.TB技術(shù)購買影響力(標(biāo)準(zhǔn)把關(guān)的人)


2.22 角色畫像內(nèi)容

我們根據(jù)不同的角色對(duì)其做分析,從而獲得用戶畫像的內(nèi)容:


3. 如何做B端用戶畫像

上面我們說到了用戶畫像的構(gòu)成(客戶畫像以及用戶角色),接下來我們需要通過用戶調(diào)研來完成具體的用戶畫像內(nèi)容的填充。當(dāng)然上面內(nèi)容表格只是我們做的一份調(diào)研前的計(jì)劃,待用戶調(diào)研完成后,我們是需要對(duì)畫像模型進(jìn)行維護(hù)和補(bǔ)充,這個(gè)過程其實(shí)就像設(shè)計(jì)一個(gè)產(chǎn)品一樣,用戶畫像也是需要不斷迭代的。

用戶調(diào)研開始前,首先需要明確用戶研究目的,這往往與產(chǎn)品所處的階段以及用戶研究需求的層次相掛鉤;接下來根據(jù)研究目的來選用適合的研究方法以達(dá)到事半功倍的效果;然后在用研執(zhí)行層面充分挖掘核心用戶的實(shí)際需求;最終輸出具有指導(dǎo)價(jià)值的用戶畫像。


3.1 明確用戶研究的目的


根據(jù)產(chǎn)品發(fā)展階段結(jié)合業(yè)務(wù)研究層次明確用戶研究目的,帶來好的開始。

產(chǎn)品開發(fā)階段:在互聯(lián)網(wǎng)領(lǐng)域的產(chǎn)品開發(fā)階段,不同的周期和設(shè)計(jì)階段,研究目的不盡相同。用戶研究主要應(yīng)用于三個(gè)階段:

3.11 產(chǎn)品計(jì)劃階段

對(duì)于新產(chǎn)品來說,用戶研究一般用來明確用戶需求點(diǎn),幫助設(shè)計(jì)師選定產(chǎn)品的設(shè)計(jì)方向。深入用戶獲取可能性與機(jī)會(huì)點(diǎn),探索新的方向。

3.12 產(chǎn)品發(fā)布后

對(duì)于已經(jīng)發(fā)布的產(chǎn)品來說,用戶研究一般用于獲取反饋,發(fā)現(xiàn)產(chǎn)品問題,傾聽用戶的聲音,幫助設(shè)計(jì)師優(yōu)化產(chǎn)品設(shè)計(jì)和體驗(yàn),快速迭代。

3.13產(chǎn)品評(píng)估階段

用戶研究用于輔助產(chǎn)品的性能測(cè)試,為產(chǎn)品做可用性評(píng)估、與競(jìng)品的對(duì)比等,及時(shí)評(píng)估和調(diào)整產(chǎn)品設(shè)計(jì)策略,提升產(chǎn)品核心競(jìng)爭(zhēng)力。


因此在產(chǎn)品設(shè)計(jì)的不同階段,需要首先明確希望解決的問題是什么?在當(dāng)前設(shè)計(jì)過程中哪些信息是需要獲取的?哪些知識(shí)缺口是需要填補(bǔ)的?明確研究目標(biāo)是制定調(diào)研方案選擇調(diào)研方法的前提。


3.2 選擇研究方法

搞清楚目的以后需要了解使用何種途徑和方法能夠幫助我們快速填補(bǔ)知識(shí)的空白,解答我們的需求。在時(shí)間及測(cè)試者有限的情況下,應(yīng)該選擇哪些研究方法達(dá)成目標(biāo)呢?



解答這個(gè)問題就需要對(duì)用戶研究的方法有所了解,通過選定的研究方法來收集信息并將其整理成具體的調(diào)研方案。用戶研究有很多種方法,一般從兩個(gè)維度來區(qū)分:一個(gè)是定性(直接)到定量(間接),比如用戶訪談就屬于定性研究,而問卷調(diào)查就屬于定量研究。前者重視探究用戶行為背后的原因并發(fā)現(xiàn)潛在需求和可能性,后者通過足量數(shù)據(jù)證明用戶的傾向或是驗(yàn)證先前的假設(shè)是否成立。



另外一個(gè)維度是態(tài)度到行為,比如用戶訪談就屬于態(tài)度,而現(xiàn)場(chǎng)觀察就屬于行為。從字面上理解,就是用戶訪談是問用戶覺得怎么樣,現(xiàn)場(chǎng)觀察是看用戶實(shí)際怎么操作?!岸ㄐ浴焙汀皯B(tài)度”偏主觀感性,需要調(diào)研者保持中立客觀的態(tài)度,適合了解調(diào)研對(duì)象對(duì)于產(chǎn)品最直接的反饋。而“定量”和“行為”偏客觀理性,需要數(shù)據(jù)抓取和行為記錄,后期分析過程中調(diào)研者若能在嚴(yán)謹(jǐn)?shù)臄?shù)據(jù)分析中迸發(fā)感性的靈感就能提煉出更多有價(jià)值的猜想。然而很多情況下定性和定量?jī)蓚€(gè)維度的研究是相輔相成的。因此選擇合理的方法,執(zhí)行調(diào)研計(jì)劃,對(duì)可能出現(xiàn)的意外靈活應(yīng)變,才能更好地獲取有價(jià)值的調(diào)研數(shù)據(jù)。



評(píng)估階段:在做產(chǎn)品大市場(chǎng)分析評(píng)估時(shí),需要用戶研究來衡量產(chǎn)品表現(xiàn),與歷版本或者競(jìng)品做一些比較,這時(shí)候就應(yīng)該以定量研究為主,推薦使用的方法有A/B測(cè)試、問卷調(diào)查、可用性測(cè)試等;

探索階段:在產(chǎn)品開發(fā)的策劃需求期,可以采用定性研究和定量研究相結(jié)合的方法,如問卷調(diào)查、焦點(diǎn)小組等;

在產(chǎn)品設(shè)計(jì)及產(chǎn)品測(cè)試階段:更推薦使用用戶訪談、問卷調(diào)查、數(shù)據(jù)分析等用戶研究方法。


3.3 進(jìn)行用戶研究

不同的用戶研究方法在具體實(shí)踐過程中流程不盡相同,需要具體問題具體分析。但是在用戶研究過程中有兩個(gè)共性的關(guān)鍵因素可直接決定研究的價(jià)值。

3.31 找對(duì)用戶,找到最佳的被訪者

用戶研究,顧名思義最關(guān)鍵的就是找到最佳的被訪者。用戶找不對(duì),研究結(jié)論或有偏頗或沒有目標(biāo)性,可用性很低。

3.32 深入挖掘用戶真實(shí)需求

不僅要找對(duì)用戶還要通過適用的用戶研究方法捕捉用戶的真實(shí)需求。訪談不夠深入,容易獲取萬人皆知的表象信息,無法獲取潛在和深層次的本質(zhì)需求,研究結(jié)論意義不大。


3.4 三種創(chuàng)建用戶角色的方法對(duì)比

在《讀書筆記——贏在用戶:如何創(chuàng)建人物角色》中,作者提到了創(chuàng)建用戶角色的三種方法,主要是從研究步驟、優(yōu)點(diǎn)、缺點(diǎn)、適用性四個(gè)緯度進(jìn)行對(duì)比的,各位設(shè)計(jì)師可以根據(jù)公司產(chǎn)品的發(fā)展階段,需求目標(biāo)等等來決定使用哪種方法。


3.41 定性人物角色

研究步驟

1.定性研究:訪談、現(xiàn)場(chǎng)觀察、可用性測(cè)試

2.細(xì)分用戶群:根據(jù)用戶的目標(biāo)、觀點(diǎn)和行為找出一些模式

3.為每一個(gè)細(xì)分群體創(chuàng)建一個(gè)人物角色

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

1.成本低:與15個(gè)用戶訪談,細(xì)分用戶群和創(chuàng)建人物角色

2.簡(jiǎn)單:增進(jìn)理解和接受程度

3.需要的專業(yè)人員較少

缺點(diǎn)

1.沒有量化證據(jù):必須是適用于所有用戶的模式

2.已有假設(shè)不會(huì)受到質(zhì)疑

適用性

1.條件和成本所限

2.管理層認(rèn)同,不需要量化證明

3.使用任務(wù)角色風(fēng)險(xiǎn)小

4.在小項(xiàng)目上進(jìn)行的實(shí)驗(yàn)


3.42 經(jīng)定量驗(yàn)證的定性人物角色

研究步驟

1.定性研究

2.細(xì)分用戶群

3.通過定量研究來驗(yàn)證用戶細(xì)分:用大樣本來驗(yàn)證細(xì)分用戶模型

4.為每一個(gè)細(xì)分群體創(chuàng)建一個(gè)人物角色

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

1.量化的證據(jù)可以保護(hù)人物角色

2.簡(jiǎn)單:增進(jìn)理解和接受程度

3.需要的專業(yè)人員較少,可以自己進(jìn)行簡(jiǎn)單的交叉分析

缺點(diǎn)

1.工作量較大

2.已有假設(shè)不會(huì)受到質(zhì)疑

3.定量數(shù)據(jù)不支持假設(shè),需要重做

適用性

1.能投入較多的時(shí)間和金錢

2.管理層需要量化的數(shù)據(jù)支撐

3.非常確定定性細(xì)分模型是正確的


3.43 定量人物角色

研究步驟

1.定性研究

2.形成關(guān)于細(xì)分選項(xiàng)的假說:一個(gè)用戶定量分析、擁有多個(gè)候選細(xì)分選項(xiàng)的列表

3.通過定量研究收集細(xì)分選項(xiàng)的數(shù)據(jù)

4.基于統(tǒng)計(jì)聚類分析來細(xì)分用戶:尋找一個(gè)在數(shù)學(xué)意義上可描述的共性和差異性的細(xì)分模型

5.為每一個(gè)細(xì)分群體創(chuàng)建一個(gè)人物角色

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

1.定量技術(shù)與定性分析相結(jié)合:模型第一時(shí)間得到驗(yàn)證

2.迭代的方式能發(fā)現(xiàn)最好的方案

3.聚類分析可以堅(jiān)持更多的變量

缺點(diǎn)

1.工作量大,需要7~10周

2.需要更多專業(yè)人員

3.分析結(jié)果可能與現(xiàn)有假設(shè)和商業(yè)方向相悖

適用性

1.能投入時(shí)間和金錢

2.管理層需要量化的數(shù)據(jù)支撐

3.希望通過研究多個(gè)細(xì)分模型來找到最適合的那個(gè)

4.最終的人物角色由多個(gè)變量確定,但不確定哪個(gè)是最重要的


3.5 產(chǎn)出研究結(jié)論

分析調(diào)研數(shù)據(jù)后產(chǎn)出具有指導(dǎo)性的結(jié)論與報(bào)告。同樣一份報(bào)告,通過不同的分析方法可以得到很多不同的信息,解答我們要研究的問題,證實(shí)或證偽我們的假設(shè),整合分析我們搜集到的數(shù)據(jù),發(fā)現(xiàn)其中隱含的機(jī)遇和啟示。研究報(bào)告的呈現(xiàn)方式多樣,一般情況下會(huì)包含結(jié)論匯總,人物角色和用戶形象如用戶畫像等,典型用戶場(chǎng)景如故事板等,基礎(chǔ)完整版數(shù)據(jù)分析,得到的分析結(jié)論點(diǎn)以文字結(jié)合數(shù)據(jù)可視化圖表的形式展現(xiàn)出來。研究報(bào)告要注重結(jié)構(gòu)的清晰,需要有明確的結(jié)論,往往總分總的結(jié)構(gòu)能夠更好地把思路捋順。這里有幾點(diǎn)注意事項(xiàng):

3.51 充分了解產(chǎn)品

熟悉產(chǎn)品才能深挖背后的原因,調(diào)研結(jié)果才能落到地上,清晰認(rèn)識(shí)它的市場(chǎng)定位、用戶定位、已有用戶特征等,才能給設(shè)計(jì)、決策提供參考和依據(jù)。

3.52 保持中立的態(tài)度

在用戶調(diào)研過程中,做到態(tài)度中立,圍繞主題逐層拆解問題,不要帶有目的性地引導(dǎo)用戶。


用戶研究的價(jià)值就體現(xiàn)在以用戶體驗(yàn)的思路挖掘用戶需求,結(jié)合依據(jù)提出關(guān)于產(chǎn)品的核心發(fā)現(xiàn)及洞察,推導(dǎo)產(chǎn)品定位,從而指導(dǎo)產(chǎn)品設(shè)計(jì)。


3.6 注意事項(xiàng)



  • 要明確了解人物角色既不是用戶細(xì)分也不是平均用戶,更不是真實(shí)用戶。人物角色描述的結(jié)果是一個(gè)勾勒的原型,對(duì)象是產(chǎn)品目標(biāo)群體,內(nèi)容是目標(biāo)群體的真實(shí)特征。

  • 人物角色能夠被創(chuàng)建的重要前提是認(rèn)同以用戶為中心的設(shè)計(jì)理念。前期一定需要團(tuán)隊(duì)全員參與,統(tǒng)一目標(biāo)和訴求。

  • 最后將完整的人物角色模型和故事板印制出來掛在團(tuán)隊(duì)成員能夠看到的地方,為產(chǎn)品設(shè)計(jì)帶來潛移默化的影響。在產(chǎn)品的不同發(fā)展階段,有影響性變化的情況下定期更新人物角色。


4. 用戶畫像的對(duì)設(shè)計(jì)的意義

我曾經(jīng)在知乎上看到一個(gè)大牛這么形容用戶畫像的:


BAT 最核心的能力,就是大數(shù)據(jù)的用戶畫像能力。再跟大家說個(gè)段子,大家都知道騰訊,騰訊做產(chǎn)品很強(qiáng),如果你做了一個(gè)產(chǎn)品被騰訊盯上了,騰訊也做個(gè)產(chǎn)品,騰訊能很快超越你,為什么呢?因?yàn)轵v訊有一個(gè)非常強(qiáng)大的用戶的挖掘能力。舉個(gè)例子,騰訊的技術(shù)分為T1、T2、T3、T4、T5。T5 相當(dāng)于首席科學(xué)家,基本上就- -兩個(gè)人,T4在騰訊有不少人,幾十個(gè)人,什么叫T4?騰訊叫T4專家組,就是能在騰訊進(jìn)入T4的,一般都是經(jīng)過上億次用戶運(yùn)營的這種技術(shù)高手。騰訊公司遇到問題,就上T4專家組,就讓這幫擅長(zhǎng)用戶畫像的T4專家組來解決問題,幾乎沒有他們解決不了的問題。來源:《小米爆品課:持續(xù)打造現(xiàn)象級(jí)產(chǎn)品的方法論》


由此可見,用戶畫像,是互聯(lián)網(wǎng)公司核武器。同樣用戶畫像對(duì)設(shè)計(jì)師的意義也是不容小覷的。


4.1 幫助設(shè)計(jì)師快速理解業(yè)務(wù)

設(shè)計(jì)師很容易進(jìn)入魔障,做自嗨的設(shè)計(jì),要想我們的能力更上一層樓理解業(yè)務(wù)是前提。特別是做B端的設(shè)計(jì)師在做設(shè)計(jì)之前更是需要透徹理解業(yè)務(wù)。在剛接觸到公司產(chǎn)品的時(shí)候我們可以先通過用戶畫像快速了解到目標(biāo)用戶的信息,并且?guī)椭覀兝砬宄畔⒓軜?gòu)的邏輯。


4.11 理解產(chǎn)品定位

在剛接觸到公司產(chǎn)品的時(shí)候,設(shè)計(jì)師們可以通過用戶畫像迅速清晰產(chǎn)品定位模糊這個(gè)問題,幫助我們精確地知道公司在為一群什么樣的人服務(wù),這樣就把準(zhǔn)了產(chǎn)品的相對(duì)較為準(zhǔn)確的定位,規(guī)避了后面我們?cè)诔鲈O(shè)計(jì)方案時(shí)出現(xiàn)偏差的風(fēng)險(xiǎn)。


4.12 理解信息架構(gòu)

設(shè)計(jì)師明確用戶畫像可以在一開始就理清我們產(chǎn)品的功能架構(gòu)的邏輯,因?yàn)橛脩舢嬒窨梢悦鞔_的知道用戶的具體目標(biāo),用戶的行為習(xí)慣,用戶的操作環(huán)境等等,從而理解信息分類的依據(jù)。劉津在《破繭成蝶—用戶體驗(yàn)設(shè)計(jì)師的成長(zhǎng)之路》中說“好的導(dǎo)航是成功的一半?!边@句話讓我印象深刻,確實(shí)在我的實(shí)際工作當(dāng)中,要想快速理解業(yè)務(wù)我必須明確用戶是用什么習(xí)慣進(jìn)行信息分類的,而不是通過產(chǎn)品邏輯去分類。


4.13 理解需求優(yōu)先級(jí)

設(shè)計(jì)師在日常工作當(dāng)中會(huì)同時(shí)接到幾個(gè)需求,我們?nèi)绾螌?duì)這些需求進(jìn)行輕重緩急的分類,就需要我們依據(jù)用戶對(duì)這些功能的緊急程度。此時(shí)每一個(gè)功能都可以歸類到相應(yīng)的模塊,功能所處的位置可以按照需求的重要程度進(jìn)行優(yōu)先級(jí)的位置放置,同時(shí)交互更加符合實(shí)際使用場(chǎng)景,確保產(chǎn)品在投入使用后能快速上手,快速解決用戶的問題。


4.2 防止設(shè)計(jì)進(jìn)入誤區(qū)

4.21 避免為自己設(shè)計(jì)

設(shè)計(jì)不等于藝術(shù)。簡(jiǎn)單地說,藝術(shù)是感性的,而設(shè)計(jì)是相對(duì)理性的。藝術(shù)為表達(dá)創(chuàng)作者的個(gè)人意識(shí),而設(shè)計(jì)是為了解決用戶具體的問題。很多不了解設(shè)計(jì)的人會(huì)以為設(shè)計(jì)是充滿想象力、天馬行空的,而非理性的。實(shí)際上設(shè)計(jì)并不是搞藝術(shù):設(shè)計(jì)師既需要靈感和天分,也需要后天努力學(xué)習(xí),掌握技巧和方法,更重要的是嚴(yán)謹(jǐn)、細(xì)致的心思。我見過很多設(shè)計(jì)師進(jìn)行界面設(shè)計(jì)時(shí),沒有任何章法,完全憑想象和喜好繪制,這就變成了沒有實(shí)用價(jià)值的“藝術(shù)創(chuàng)作”了。而糟糕的設(shè)計(jì)也多半來源于此。

作為B端產(chǎn)品的設(shè)計(jì)師,我們很小概率能成為自己產(chǎn)品的目標(biāo)用戶,所以一位合格的設(shè)計(jì)師是不可以單憑主觀判斷設(shè)計(jì)的合理性,因此參照用戶畫像是非常有必要的。


4.22 避免彈性用戶

不知道大家有沒有發(fā)現(xiàn)很多產(chǎn)品做著做著就跑偏了,因?yàn)锽端產(chǎn)品的特殊性,我們很容易被客戶牽著鼻子走,那作為設(shè)計(jì)師我們?nèi)绾瓮ㄟ^用戶畫像堅(jiān)持設(shè)計(jì)立場(chǎng)呢?

我們經(jīng)常在做設(shè)計(jì)時(shí),為了說服自己,就強(qiáng)行安給用戶一個(gè)需求,認(rèn)為這個(gè)肯定也是用戶需要的,結(jié)果"用戶"變成了一個(gè)彈性概念,為了適應(yīng)我們的觀點(diǎn)和假設(shè),不斷地變化。最終把很多精力和時(shí)間浪費(fèi)在了并不重要的功能方面,產(chǎn)品成功的關(guān)鍵是目標(biāo)而非特性,通過用戶畫像,可以幫助我們時(shí)刻聚焦在幫助企業(yè)完成目標(biāo)上,而非做功能堆砌。用戶畫像給了我們一個(gè)強(qiáng)有力的工具,讓我們辨識(shí)出偽需求。


4.3 提高設(shè)計(jì)團(tuán)隊(duì)的話語權(quán)

相比流程圖和功能列表由于用戶畫像是以敘述方式描述產(chǎn)品的目標(biāo)用戶,這使得它非常易于理解,可以讓團(tuán)隊(duì)中的所有人迅速理解到用戶,保證產(chǎn)品設(shè)計(jì)過程中都時(shí)刻記著設(shè)計(jì)目標(biāo)。相信大家遇到過這種情況,根據(jù)需求文檔設(shè)計(jì)出來的功能,被開發(fā)砍掉,在有了用戶畫像之后,為討論哪些功能是否該砍掉提供了更有力的依據(jù)。

B端設(shè)計(jì)師經(jīng)常在團(tuán)隊(duì)里會(huì)出現(xiàn)話語權(quán)不足的情況,這是由B端以業(yè)務(wù)的中心的特征決定的,越理解業(yè)務(wù)話語權(quán)自然也越高,在做用戶畫像的過程中,設(shè)計(jì)師對(duì)業(yè)務(wù)的理解也會(huì)更深入一步。用戶畫像使得自己的設(shè)計(jì)有理有據(jù),提升設(shè)計(jì)提案被通過的可能性,提高設(shè)計(jì)團(tuán)隊(duì)在公司的話語權(quán)。


四,結(jié)語

表面看起來,設(shè)計(jì)和商業(yè)似乎是相悖的:設(shè)計(jì)充滿情懷,商業(yè)唯利是圖。其實(shí)不然,設(shè)計(jì)優(yōu)雅地解決人們的問題,商業(yè)利益則是對(duì)此的一份獎(jiǎng)賞及回報(bào);以商業(yè)利益為前提的設(shè)計(jì)更容易把握用戶的“痛點(diǎn)”及訴求,畢竟有用戶量、有用戶的認(rèn)可,企業(yè)才有可能盈利。所以兩者并不沖突,且互相成就。

理順了這層關(guān)系,大家就會(huì)明白好的設(shè)計(jì)師一定是懂產(chǎn)品、懂行業(yè)、懂商業(yè)的,這樣才能做到有的放矢,和企業(yè)共同成長(zhǎng),最終實(shí)現(xiàn)雙贏。當(dāng)然這需要多年的積累,設(shè)計(jì)師們不妨把它當(dāng)作未來努力的長(zhǎng)遠(yuǎn)方向。

我為什么特意強(qiáng)調(diào)說“產(chǎn)品定位”“用戶畫像”,那是因?yàn)檫@是我們?cè)O(shè)計(jì)師最容易忽略的問題,理論的缺失往往使我們?cè)O(shè)計(jì)晉升路上的絆腳石。

上述的觀點(diǎn)站在的巨人的肩膀上,也結(jié)合了我工作中的實(shí)戰(zhàn)經(jīng)驗(yàn),拋磚引玉。每家公司的工作流程都不一樣,所以各位設(shè)計(jì)師要根據(jù)實(shí)際情況來做具體分析,本文所拋出來的觀點(diǎ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



文章來源:站酷   作者:菜菜不甜

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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.sillybuy.com )是一家專注而深入的界面設(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ù)


AntV 圖可視分析解決方案(設(shè)計(jì)篇)

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

1. 到底什么是圖?



「圖」對(duì)于很多人來說是一個(gè)熟悉又陌生的東西,那么到底什么是圖?以上圖的小游戲?yàn)槔?,為了演示方便,我們抽取其?0個(gè)人關(guān)于鍵盤和音樂類型的喜好的信息,如果以鍵盤和音樂喜好為關(guān)系,把這10個(gè)人聯(lián)系起來的話,會(huì)得到下方這樣能一張關(guān)系圖。



基于這張圖能大致了解這10個(gè)人中對(duì)于音樂和鍵盤喜好是什么情況,比如:沒有人喜歡流行樂和紅軸鍵盤,甚至可以進(jìn)行一些簡(jiǎn)單的推理:喜歡古典樂的人大概率會(huì)喜歡黑軸和青軸。



本質(zhì)上來說,通過前面的小游戲收集到的數(shù)據(jù)是一張表格數(shù)據(jù),當(dāng)把這些靜態(tài)的數(shù)據(jù)以某個(gè)維度的信息關(guān)聯(lián)起來,就能構(gòu)建成一張圖,基于這張圖我們能進(jìn)行各種各樣的解讀和分析。這其實(shí)就構(gòu)成了在我們圖這個(gè)領(lǐng)域中的 DIKW 模型。把靜態(tài)的數(shù)據(jù),逐步轉(zhuǎn)化成信息,再到分析出有意義的「知識(shí)」,在實(shí)際的業(yè)務(wù)場(chǎng)景中,借助算法或者更復(fù)雜的分析手段,甚至能從圖中分析出價(jià)值更高的「智慧」。




隨著一張圖中的節(jié)點(diǎn)數(shù)量越多,節(jié)點(diǎn)之間能互相產(chǎn)生的關(guān)系會(huì)指數(shù)型的增長(zhǎng),對(duì)于這個(gè)關(guān)系網(wǎng)來說,它能產(chǎn)生的經(jīng)濟(jì)效益也是指數(shù)型的增長(zhǎng),在經(jīng)濟(jì)學(xué)領(lǐng)域把這一效應(yīng)稱之為「梅特卡夫效應(yīng)」。其實(shí)在日常生活中,最常見的圖,就是一張由人際關(guān)系構(gòu)成的社交關(guān)系網(wǎng)絡(luò),我們每天都在用的各種社交平臺(tái)都符合這一效應(yīng)。



在實(shí)際的 B 端業(yè)務(wù)場(chǎng)景中,圖在圖數(shù)據(jù)庫、網(wǎng)絡(luò)安全、企業(yè)風(fēng)控、知識(shí)圖譜等場(chǎng)景下有非常廣泛的應(yīng)用。

 


2. 設(shè)計(jì)挑戰(zhàn)



分享一個(gè)在知識(shí)圖譜這個(gè)業(yè)務(wù)場(chǎng)景下的真實(shí)故事,某天 PD 發(fā)過來如上圖的釘釘消息,希望幫他設(shè)計(jì)一個(gè)圖的需求,然后隔一段時(shí)間發(fā)來不同的希望在圖上面表達(dá)的語義訴求。隨著要表達(dá)的信息越來越多,后面再去設(shè)計(jì)圖的樣式時(shí),就陷入了不知道該怎么辦的境地…



 

2.1 視覺通道有限

在可視化設(shè)計(jì)中,常見的視覺通道就那么幾種:形狀、方向、紋理、尺寸、值、顏色,隨著產(chǎn)品功能的拓展,需要在圖上表達(dá)的信息維度越來越多,且根本沒有停下來的趨勢(shì)。這時(shí)我們會(huì)面臨圖這類產(chǎn)品設(shè)計(jì)時(shí)的第一個(gè)挑戰(zhàn):視覺通道有限,無法滿足日益增長(zhǎng)的語義表達(dá)的需求。



 

2.2 數(shù)據(jù)量超預(yù)期

下圖左側(cè)是一張交付給前端同學(xué)的設(shè)計(jì)稿,基本上滿足 PD 提到的各類語義表達(dá)的訴求。然而實(shí)際驗(yàn)收的時(shí)候,帶進(jìn)實(shí)際數(shù)據(jù)的時(shí)候效果是右圖這樣的。這是面臨的第二個(gè)挑戰(zhàn),在設(shè)計(jì)一張圖的時(shí)候,設(shè)計(jì)師往往是按照非常理想的情況去設(shè)計(jì)的,但當(dāng)實(shí)際的數(shù)據(jù)灌入進(jìn)去,再加上還原度的問題,布局的問題,會(huì)導(dǎo)致實(shí)際一張圖渲染出來的效果是非?!阁@人」的,可讀性幾乎為0。



 

2.3 連續(xù)分析效果不可控

下圖的 GIF 是最基礎(chǔ)的一種圖分析的操作:從一個(gè)節(jié)點(diǎn)出發(fā),逐步的選擇感興趣的節(jié)點(diǎn)展開,以隨著關(guān)系的逐步擴(kuò)散發(fā)掘出更多有價(jià)值的信息。GIF 中所看到的從起始的藍(lán)色節(jié)點(diǎn)擴(kuò)散到青色節(jié)點(diǎn),再到紅色、綠色節(jié)點(diǎn),這樣逐步擴(kuò)展,分層展示,是一個(gè)設(shè)計(jì)師的理想情況。但實(shí)際的情況往往是下圖這樣的,每次擴(kuò)展開的節(jié)點(diǎn)都會(huì)在原來的基礎(chǔ)上覆蓋,連續(xù)擴(kuò)散幾次之后,節(jié)點(diǎn)和邊密密麻麻的重疊在一起。連續(xù)分析的情況下,效果再一次超出我們的預(yù)期。



 

回顧一下為何會(huì)出現(xiàn)上面的幾個(gè)問題:在面對(duì)圖這樣一個(gè)陌生的設(shè)計(jì)對(duì)象時(shí),在對(duì)其有更深入的了解之前,我們往往只能看到表面的靜態(tài)的視覺的設(shè)計(jì),單點(diǎn)的交互設(shè)計(jì),看不到也沒法控制的是藏在圖這座冰山之下的數(shù)據(jù)量、布局效果、加載速度和用戶連續(xù)分析的路徑。



 

為了解決上面提到的幾個(gè)挑戰(zhàn),以及便于更多設(shè)計(jì)師更快速的上手圖產(chǎn)品的設(shè)計(jì),避免一些我們此前踩過的坑,同時(shí)為了規(guī)范圖產(chǎn)品的設(shè)計(jì),我們基于在不同業(yè)務(wù)線的圖產(chǎn)品的實(shí)踐和思考,產(chǎn)出了「AntV 圖可視分析設(shè)計(jì)指引」。



       更好的閱讀體驗(yàn),推薦訪問語雀版 



3. 設(shè)計(jì)指引

設(shè)計(jì)指引從全局樣式(Global Style)、交互規(guī)范(Guide)、組件(Conponents)、功能模板(Templates)、綜合案例(Examples)幾個(gè)視角出發(fā)組織相關(guān)的內(nèi)容。由于大部分設(shè)計(jì)師對(duì)「圖」是不太了解的,所以增加了一篇「總則」來介紹「圖」是什么,在做相關(guān)產(chǎn)品的設(shè)計(jì)時(shí),面臨的設(shè)計(jì)對(duì)象是什么,以及幾條最通用的設(shè)計(jì)指引內(nèi)容。同時(shí)也提供了 Sketch 組件庫模板資產(chǎn),內(nèi)置了優(yōu)雅好看的圖的樣式和常用圖的模板。


  


3.1 全局樣式



回顧前面提到的知識(shí)圖譜里的這個(gè)圖設(shè)計(jì)的需求,我們踩過那么多坑之后,再回頭去看,該如何設(shè)計(jì)這一一張圖呢?其實(shí)把上面這張 DEMO 圖拆解來看,再復(fù)雜的圖,本質(zhì)上無外乎就是「兩點(diǎn)一線」,以及在節(jié)點(diǎn)和邊上的文字標(biāo)簽。


undefined



再抽象一層看,會(huì)發(fā)現(xiàn)組成圖的最基礎(chǔ)的元素有:點(diǎn)、邊、箭頭、標(biāo)簽、布局這么5種元素。以其中的點(diǎn)為例,再去拆解看一下,設(shè)計(jì)這個(gè)圖里面最基礎(chǔ)的元素的時(shí)候,適用于表達(dá)點(diǎn)的視覺樣式的有大小、顏色、描邊、形狀、圖標(biāo)、角標(biāo) 這么幾個(gè)視覺參數(shù)。其中,「描邊」還能細(xì)分為單層描邊或多層描邊,「圖標(biāo)」還能區(qū)分為線型還是面型,各自再對(duì)應(yīng)不同的視覺參數(shù)。



有了最適合點(diǎn)的視覺通道和對(duì)應(yīng)的參數(shù)之后,回顧一下我們此前需求中我們需要在節(jié)點(diǎn)上表達(dá)的各類語義,可以歸納3大類:

  • 數(shù)據(jù)特性:數(shù)據(jù)中固有的一些特性,比如類型、規(guī)模、權(quán)限等,這些特性不會(huì)隨著呈現(xiàn)的平臺(tái)的不同而變化,而是屬于數(shù)據(jù)本身的一些特性;

  • 功能屬性:在具體的產(chǎn)品中,隨著產(chǎn)品功能的不斷豐富,賦予給節(jié)點(diǎn)的屬性,比如一個(gè)產(chǎn)品有了預(yù)測(cè)或推理的能力,就需要在圖中表達(dá)出節(jié)點(diǎn)是否是「預(yù)測(cè)的」或者是「疑似」的;

  • 鼠標(biāo)狀態(tài):鼠標(biāo) Hover 、Focus、Disable 等常見鼠標(biāo)交互事件

這3類語義,共同決定了一個(gè)節(jié)點(diǎn)應(yīng)該表達(dá)什么維度的信息,樣式應(yīng)該是什么樣子的。這時(shí)再去設(shè)計(jì)一個(gè)節(jié)點(diǎn)的樣式時(shí),其實(shí)就是一個(gè)把語義類型和適用的視覺通道和參數(shù)連線的過程。無論需要表達(dá)的語義如何新增,節(jié)點(diǎn)樣式的表達(dá)都有一定的內(nèi)在邏輯可循。



 

圖的基礎(chǔ)元素中,除了點(diǎn)之外,其他的基礎(chǔ)元素也按照類似的思路梳理出需要表達(dá)的語義和使用的視覺通道,這樣我們就完整的,成體系地歸納出了所有影響一張圖「長(zhǎng)什么樣」的基礎(chǔ)元素、視覺通道和參數(shù)。有了這樣一張「參數(shù)表」,再去設(shè)計(jì)一張圖時(shí),就明確的知道有哪些要素可以考慮。



 

當(dāng)然,能做的不止于此。結(jié)合我們前端同學(xué)的能力,我們把上述「參數(shù)表」工程化了,做成了一個(gè)在線工具 — GraphMaker 。在這個(gè)工具里可以根據(jù)實(shí)際的數(shù)據(jù)量,調(diào)整節(jié)點(diǎn)、邊、布局的所有視覺通道參數(shù),以調(diào)整到一個(gè)合適的視覺效果。最終導(dǎo)出成代碼,用到實(shí)際的項(xiàng)目中。及時(shí)完全不懂圖,也能在這個(gè)工具上,調(diào)試出理想的視覺效果,再將對(duì)應(yīng)的代碼導(dǎo)出給到開發(fā)同學(xué)使用。

 

 

3.2 交互規(guī)范



在圖產(chǎn)品中,常見的操作對(duì)象有:畫布、節(jié)點(diǎn)、邊、Combo 和其他這五種類型。為了捋清楚圖產(chǎn)品中常見的交互事件,以交互事件三要素的形式,將所有的交互事件全部梳理和枚舉出來,并以操作對(duì)象為分類維度,歸納整理出一份完整的「交互時(shí)事件庫」,提供給設(shè)計(jì)師使用。



 

3.3 組件 & 分析模式



前面介紹了「交互事件」,很多時(shí)候,一個(gè)復(fù)雜的交互事件需要有一個(gè)獨(dú)立的組件來承載。比如:關(guān)聯(lián)節(jié)點(diǎn)的搜索查詢、代碼輸入框、算法模板選擇器等都有一個(gè)共性:都是屬于「輸入某中查詢條件」的組件,這類組件則統(tǒng)一歸納為「條件輸入組件」,主要由「條件輸入」和「確認(rèn)執(zhí)行」兩部分內(nèi)容組成。相同的邏輯,我們將各類業(yè)務(wù)場(chǎng)景下常見的組件歸納為基礎(chǔ)組件、條件輸入、信息輸出、高級(jí)功能四種類型。定義好每種類型組件的基本特性,確保產(chǎn)品在不斷迭代新增新功能的過程中,新增的功能組件都能保持基本一致的體驗(yàn)。



以最常見的一個(gè)「算法模板」查詢的場(chǎng)景為例,在左側(cè)的條件輸入面板選擇一個(gè)合適的算法模板,畫布上會(huì)渲染出對(duì)應(yīng)的結(jié)果內(nèi)容,然后用戶會(huì)選擇其中感興趣的節(jié)點(diǎn)查看詳情。這三個(gè)組件共同組成了一個(gè)完成的圖分析操作,這類有固定條件輸入的分析模式被定義為「有明確目的分析」。圖分析產(chǎn)品中,常見的分析模式有3類:

  • 有明確目的:這類分析模式是有明確的分析或查詢條件,這個(gè)條件的呈現(xiàn)形式可能是一個(gè)規(guī)則表達(dá)式,一段 Gremlin 或 GQL 的查詢語句,或明確的起點(diǎn)和終點(diǎn),甚至是直接查看某個(gè)節(jié)點(diǎn)或某條邊的具體信息。常見的模式有:規(guī)則查詢、Gremlin 查詢、關(guān)聯(lián)分析、篩選/搜索畫布、查看詳情等;

  • 無明確目的:無明確目的地探索是指基于已有數(shù)據(jù)內(nèi)容,進(jìn)行關(guān)系的 N 度擴(kuò)展、下鉆分析、子圖探索、撤銷回退等操作,來挖掘數(shù)據(jù)中的特性,發(fā)現(xiàn)價(jià)值或機(jī)會(huì)點(diǎn)的分析過程;

  • 特殊場(chǎng)景:

    • 內(nèi)置了 AI 算法能力的分析場(chǎng)景:這類分析場(chǎng)景通常需要借助內(nèi)置的算法或規(guī)則推理能力來實(shí)現(xiàn),從海量數(shù)據(jù)中快捷的挖掘出符合特定規(guī)則的目標(biāo)節(jié)點(diǎn)和關(guān)系,常見的有:擔(dān)保圈、實(shí)控人、最短路徑等;

    • 結(jié)合時(shí)間或地理信息的分析場(chǎng)景:在源數(shù)據(jù)中含有時(shí)間和地理維度的內(nèi)容時(shí),會(huì)出現(xiàn)結(jié)合時(shí)間或地理信息的分析場(chǎng)景。



 

回顧一下前面介紹的內(nèi)容,從「全局樣式」到「分析模板」其實(shí)都是在做同一件事情:在面對(duì)一個(gè)「圖」這樣一個(gè)陌生的設(shè)計(jì)對(duì)象時(shí),梳理其內(nèi)在的邏輯,并在這個(gè)陌生的領(lǐng)域,定義清楚其運(yùn)行和存在的邏輯。從最原子級(jí)的樣式和交互、組件再到一個(gè)完整的分析模式,從不同維度去定義圖產(chǎn)品的「規(guī)則」,以確保不論多復(fù)雜的場(chǎng)景,圖分析產(chǎn)品的體驗(yàn)是可控且有序的。類似于積木一樣,有了統(tǒng)一的接口規(guī)范,無論積木的形狀如何變化,都能完美的拼裝出玩家想要的形狀。



從 ETCGG 的角度出發(fā),介紹了「AntV 圖可視分析解決方案」設(shè)計(jì)相關(guān)的內(nèi)容,解決方案還有非常重要一部分的內(nèi)容就是「技術(shù)方案」,稍后會(huì)由我的搭檔 @山果 給大家?guī)砀敿?xì)的介紹內(nèi)容。

 

總結(jié)

在整個(gè)分享中,我們介紹了圖分析產(chǎn)品的4個(gè)不同的業(yè)務(wù)應(yīng)用領(lǐng)域、3種圖分析模式,定義出了4種圖分析產(chǎn)品的組件類型,同時(shí)以交互事件3要素的形式梳理出所有的圖交互事件,以及找到了所有影響「圖」樣式的基礎(chǔ)元素和參數(shù)。理想情況下,有了這些信息之后,我們?cè)偃ピO(shè)計(jì)一個(gè)圖分析產(chǎn)品時(shí),可能就是一個(gè)從左到右的連線過程。為此我們也正在努力將這一理念轉(zhuǎn)化為現(xiàn)實(shí),開源工具 Graphin 2.0 正在設(shè)計(jì)&開發(fā)中,也盡情期待。



 

「系統(tǒng)看上去混亂無序,但在其背后卻隱藏著一種非常微妙的秩序」 - 諾貝爾獎(jiǎng)得主、物理學(xué)家 Murray Gell-Mann 曾經(jīng)說過這樣一句話來描述自然界中那些看上去混亂無序,實(shí)則內(nèi)含秩序的系統(tǒng)現(xiàn)象。這句話用來描述「圖」這類產(chǎn)品也非常貼切,當(dāng)前圖分析產(chǎn)品處于發(fā)展期,相關(guān)的設(shè)計(jì)領(lǐng)域更是一片不毛之地。AntV 圖方向的同學(xué)們此前的一些探索,以及沉淀下來的「設(shè)計(jì)指引」和「解決方案」就是在圖這類產(chǎn)品的混亂和無序的復(fù)雜中,找到其內(nèi)在的秩序。


undefined



圖可視分析領(lǐng)域是一個(gè)小眾而又專業(yè)度很高的領(lǐng)域,希望以上的分享的實(shí)踐和思考能給在這個(gè)領(lǐng)域相關(guān)的同學(xué)一些啟發(fā)。目前設(shè)計(jì)在這一領(lǐng)域剛剛開始邁出一小步,還有巨大的未知和機(jī)會(huì)等著我們?nèi)ヌ剿?,歡迎通過各種渠道隨時(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



文章來源:站酷   作者: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.sillybuy.com )是一家專注而深入的界面設(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è)級(jí)中后臺(tái)產(chǎn)品的探索和實(shí)踐

資深UI設(shè)計(jì)者




引言

今年,我們?cè)趦?nèi)部中后臺(tái)產(chǎn)品進(jìn)行嘗試,發(fā)現(xiàn)「易用度」可以作為合適的度量指標(biāo),并成功推廣到 35 個(gè)產(chǎn)品,幫助PD、設(shè)計(jì)師、工程師等產(chǎn)品設(shè)計(jì)者去衡量產(chǎn)品體驗(yàn)現(xiàn)狀,發(fā)現(xiàn)改進(jìn)機(jī)會(huì)點(diǎn)。實(shí)踐證明,易用度,相比滿意度、尖叫度、NPS,更適合技術(shù)類產(chǎn)品的體驗(yàn)度量。結(jié)合用戶行為數(shù)據(jù),可以為用戶畫像、改進(jìn)方向、運(yùn)營策略提供更準(zhǔn)確的決策依據(jù)。


一、中后臺(tái)體驗(yàn)度量現(xiàn)狀

在公司內(nèi)部,技術(shù)類產(chǎn)品種類繁多,有很大一部分是開發(fā)、運(yùn)維人員使用的中后臺(tái)產(chǎn)品,且以從 0-1 階段為主。由于這部分同學(xué)本身工作復(fù)雜度高,又必須依賴內(nèi)部產(chǎn)品來完成,所以長(zhǎng)期以來“簡(jiǎn)單易用”成為大家追求的產(chǎn)品體驗(yàn)標(biāo)準(zhǔn),他們也把“如絲般順滑”作為終極目標(biāo)。但現(xiàn)實(shí)情況是,上手門檻高是使用技術(shù)類產(chǎn)品最大的痛點(diǎn)。


對(duì)于前臺(tái)業(yè)務(wù)的設(shè)計(jì)者,經(jīng)常會(huì)使用「人+錢」,也就是「流量+付費(fèi)」來衡量產(chǎn)品效果。通過成功率、轉(zhuǎn)化率等指標(biāo),可以快速看到用戶行為上的反饋,來指引后續(xù)優(yōu)化。但對(duì)于技術(shù)類產(chǎn)品,尤其是強(qiáng)流程、工具型產(chǎn)品,很難找到一套契合業(yè)務(wù)特點(diǎn)的度量方式。理論上,使用「成本+效率」是比較合適的衡量維度,實(shí)際操作下來,找到設(shè)計(jì)和產(chǎn)品效果之間的因果關(guān)系,并非易事。


我們做了一個(gè)內(nèi)部調(diào)查,發(fā)現(xiàn)產(chǎn)品設(shè)計(jì)者經(jīng)常容易遇到這些問題:

  • 體驗(yàn)度量是一個(gè)繞不開的話題。天貓、阿里云、華為、京東都有嘗試提出解決方案,但沒有統(tǒng)一的衡量維度。

  • 設(shè)計(jì)方案與產(chǎn)品的市場(chǎng)反饋,需要一個(gè)可以解釋關(guān)聯(lián)關(guān)系的抓手,這對(duì)迭代方向的指引至關(guān)重要。

  • 產(chǎn)品團(tuán)隊(duì)逐漸重視用戶用戶,但缺乏有說服力的指標(biāo)。


業(yè)界在體驗(yàn)度量上的方案,大致分為 3 個(gè)派別:

  • 客觀衡量法:通過數(shù)據(jù)埋點(diǎn)監(jiān)測(cè)用戶行為數(shù)據(jù)。例如經(jīng)典的 PULSE 模型,還有大家熟悉的運(yùn)營指標(biāo),活躍用戶數(shù)、留存率、ARPU、LTV等等。這對(duì)于還未商業(yè)化、用戶基數(shù)少的產(chǎn)品不適用。

  • 主觀衡量法:收集用戶主觀打分。經(jīng)典的滿意度、尖叫度、NPS,可用性測(cè)試量表(如SUS),美國客戶滿意度指數(shù)ACSI。

  • 主觀+客觀衡量法:把用戶行為數(shù)據(jù)和主觀打分結(jié)合起來,多數(shù)用歸一化方式得出一個(gè)總分,把分?jǐn)?shù)劃分成不同檔次作參考。Google 經(jīng)典的 HEART 模型,內(nèi)部 的 PTECH 模型,阿里云 QoUE 模型 ,華為云的用戶體驗(yàn)?zāi)P汀?


在掌握了這些信息之后,我們?cè)趦?nèi)部的技術(shù)類產(chǎn)品上,進(jìn)行了一輪新的探索。經(jīng)過半年時(shí)間的試點(diǎn),結(jié)合業(yè)界的解決方案、內(nèi)部產(chǎn)品的業(yè)務(wù)特性,我們最終選擇主觀衡量法,并使用「易用度」這個(gè)衡量指標(biāo)。



二、易用度指標(biāo)

易用度,英文 Customer Effort Score ,簡(jiǎn)稱「易用度」,也有譯成「費(fèi)力度」,指的是用戶使用某個(gè)產(chǎn)品/服務(wù)來解決問題的難易程度。目的是消除或減少用戶使用產(chǎn)品過程中的障礙。


該定義來自 2010年 《哈佛商業(yè)評(píng)論》發(fā)表的文章——《Stop Trying to Delight Your Customers》。2013年,Gartner 子公司 CEB 發(fā)布 易用度2.0版本 的測(cè)量方法,定義為“解決問題的難易程度”(make it easy to handle my issue)。


它的源頭可以追溯到美國用戶研究專家 Jeff Sauro(2009)提出的單項(xiàng)難易度問卷(Single Ease Question,SEQ),在可用性測(cè)試之后,用戶需要對(duì)一個(gè)問題進(jìn)行打分,問法是“整體上,這個(gè)任務(wù)是非常困難-非常容易(7分制)”。


為什么說「易用度」更適合技術(shù)類的產(chǎn)品?主要基于技術(shù)類產(chǎn)品的三大特點(diǎn)。





衡量維度

總體指標(biāo)

易用度:使用**產(chǎn)品完成**工作的容易程度。


影響因素

  • 主要因素:產(chǎn)品及設(shè)計(jì)給用戶操作帶來的復(fù)雜度,我們稱之為「基礎(chǔ)體驗(yàn)」,包括幫助引導(dǎo)、功能入口、概念術(shù)語、任務(wù)流程、操作反饋。

  • 次要因素:用戶特征對(duì)使用易用度的調(diào)節(jié)作用,也稱之為「調(diào)節(jié)因素」。不同特點(diǎn)的用戶,會(huì)影響易用度分?jǐn)?shù),包括操作熟練度、先驗(yàn)知識(shí)、行為習(xí)慣。





量表開發(fā)

大家肯定要問,這些影響因素是怎么確定的,如何證明它們的合理性?這就要提到量表開發(fā)方法,基本上可以分為幾個(gè)步驟:


step1.理論借鑒

從相關(guān)領(lǐng)域查找經(jīng)典量表,站在巨人的肩膀上,經(jīng)過實(shí)踐檢驗(yàn)的量表更可靠。我們首先從15種國際可用性測(cè)試量表中借鑒,抽出了一些關(guān)鍵的衡量維度。另外,易用度創(chuàng)始人Matt Dixon(2014)在《the effortless effort》書中,總結(jié)了在客戶服務(wù)場(chǎng)景,費(fèi)力的關(guān)鍵因素:

    1. 信息分類不恰當(dāng),反復(fù)描述問題(82%)

    2. 需要多次求助(62%)

    3. 幫助指引不清晰(59%)

    4. 找不到相關(guān)入口,頻繁切換溝通渠道(59%)



step2.實(shí)踐總結(jié)

我們盤點(diǎn)發(fā)現(xiàn),技術(shù)類產(chǎn)品,絕大部分屬于工具型產(chǎn)品,強(qiáng)調(diào)任務(wù)流程,也是用戶痛點(diǎn)集中的地方。匯總多條業(yè)務(wù)線近1年的調(diào)研結(jié)果。除了功能、性能問題外,根據(jù)對(duì)完成任務(wù)的阻礙程度,無論是0-1階段,還是1-N階段,高頻體驗(yàn)問題分布都集中在5個(gè)維度:

  • 幫助引導(dǎo)

  • 操作反饋

  • 任務(wù)流程

  • 概念術(shù)語

  • 功能入口



step3.數(shù)據(jù)分析

通過整理歸納的影響因素,需要經(jīng)過信效度驗(yàn)證,才能有說服力。簡(jiǎn)單來說,信度就是“可信與否”,指的是結(jié)果的一致性、穩(wěn)定性及可靠性;效度就是“命中與否”,指的是結(jié)果反映所想要考察內(nèi)容的程度。通過統(tǒng)計(jì)學(xué)的探索性因子分析,驗(yàn)證性因子分析,我們確定 5 個(gè)維度可以有效測(cè)量易用度分?jǐn)?shù)的變化。詳細(xì)可查閱如何找到影響用戶體驗(yàn)的關(guān)鍵因素?。



與滿意度、尖叫度、NPS的區(qū)別

從易用度-滿意度-尖叫度-NPS,是一個(gè)用戶預(yù)期的漸進(jìn)變化。從中可以看出,易用度更關(guān)注的是基礎(chǔ)體驗(yàn),也就是“簡(jiǎn)單好用”。





為什么易用度相比其他指標(biāo)更適合技術(shù)類產(chǎn)品呢?主要有 3 個(gè)原因:

1.內(nèi)部試點(diǎn)發(fā)現(xiàn),滿意度無法準(zhǔn)確衡量技術(shù)類產(chǎn)品體驗(yàn)

  • 滿意度不能很好衡量真實(shí)體驗(yàn),分?jǐn)?shù)虛高。我們?cè)谝恍┊a(chǎn)品上,同時(shí)使用「易用度」和「滿意度」作為總體指標(biāo),發(fā)現(xiàn) 43% 的用戶滿意度評(píng)分,高于易用度評(píng)分,可以理解為“產(chǎn)品我滿意但不好用”。此外,易用度分?jǐn)?shù)與滿意度分?jǐn)?shù)相關(guān)性高達(dá)0.77,具備很高的可替代性。

  • 易用度更接近用戶真實(shí)體驗(yàn)。對(duì)任務(wù)難易程度作出評(píng)價(jià),用戶在判斷時(shí)會(huì)更直接,考慮使用過程中付出的腦力、時(shí)間等成本。對(duì)滿意度作出評(píng)價(jià),除了考慮產(chǎn)品本身的易用性,內(nèi)部用戶還會(huì)考慮其他主觀因素,例如:

  1. 合作關(guān)系:你是研發(fā),我是用戶,擔(dān)心給你滿意度打低分了,之后就不滿足我的需求了。

  2. 中庸傾向:滿意度調(diào)查,已經(jīng)是人盡皆知的評(píng)分,國人都傾向于打中上。

  3. 評(píng)價(jià)范圍:易用度問的是完成工作的容易程度,范圍更小,用戶評(píng)價(jià)的時(shí)候更聚焦。滿意度問的是整體是否滿意,范圍更大,用戶會(huì)綜合考慮很多因素,例如上面提到的服務(wù)支持、上下游協(xié)作、需求響應(yīng)等等。


2.行業(yè)實(shí)踐表明,易用度比 NPS 更能預(yù)測(cè)用戶留存和成本變化

  • 易用度更能預(yù)測(cè)用戶留存?!豆鹕虡I(yè)評(píng)論》(2010年)發(fā)表易用度時(shí),調(diào)研7500多名用戶,數(shù)據(jù)顯示易用度低的客戶,94%的有復(fù)購意愿,88%表示會(huì)增加支出,僅1%表示會(huì)對(duì)公司持負(fù)面態(tài)度。Garter(2013)發(fā)布報(bào)告,基于49000多名用戶數(shù)據(jù)發(fā)現(xiàn),易用度分值從1分提升到5分,可以使用戶忠誠度提高22%。Oracle(2015)發(fā)布服務(wù)云易用度白皮書發(fā)現(xiàn),當(dāng)用戶表示使用產(chǎn)品付出了更少的努力,忠誠度提高18%。相反,從滿足用戶預(yù)期到超出用戶預(yù)期,用戶忠誠度的變化并不明顯。

  • 易用度更能預(yù)測(cè)成本變化。 Gartner(2019)對(duì)100+公司、12.5w用戶的調(diào)研發(fā)現(xiàn),易用度從高分到低分,可以降低37%的成本。


3.行業(yè)實(shí)踐表明,尖叫度更適合成熟度較高的產(chǎn)品類型

  • 目前在市場(chǎng)上,至少在國內(nèi),ToB 產(chǎn)品沒有達(dá)到飽和,定位也各有不同。在企業(yè)用戶心中,并沒有足夠清晰的心智和經(jīng)驗(yàn)去判斷。例如企業(yè)微信和釘釘,基本上很少有用戶會(huì)同時(shí)使用這兩個(gè)產(chǎn)品,那用戶就無法準(zhǔn)確評(píng)價(jià)二者的好壞。

  • 更關(guān)鍵的是,很多 ToB 產(chǎn)品,用戶多數(shù)是被動(dòng)接受使用的,極少有選擇余地。普遍的高技術(shù)門檻,也把他們嘗試的意愿和可能性大打折扣。


優(yōu)劣對(duì)比

對(duì)比滿意度、尖叫度、NPS指標(biāo),易用度的優(yōu)勢(shì)在于:

  • 關(guān)注用戶完成任務(wù)過程中的阻礙,重視基礎(chǔ)體驗(yàn);

  • 適合去度量特定的用戶接觸點(diǎn)和任務(wù)流程,以便了解用戶解決問題的難易程度。

劣勢(shì)在于:

  • 對(duì)于分?jǐn)?shù)過高或過低的情況,沒有通用的基線,需要區(qū)分行業(yè)、產(chǎn)品類型、產(chǎn)品復(fù)雜度來衡量分?jǐn)?shù)是否合格;

  • 側(cè)重基本體驗(yàn),無法衡量用戶的總體滿意度。





三、易用度基線

經(jīng)過半年的實(shí)踐,我們采集了 35 個(gè)技術(shù)類產(chǎn)品的易用度,根據(jù)產(chǎn)品類型、產(chǎn)品階段來區(qū)分。結(jié)合內(nèi)部試點(diǎn)和行業(yè)調(diào)研,我們把技術(shù)類產(chǎn)品的易用基線,設(shè)定為 5.5 分。主要發(fā)現(xiàn):

  • 產(chǎn)品類型越復(fù)雜,易用度越低。試點(diǎn)產(chǎn)品中,ToC 產(chǎn)品易用度均值 5.46,ToB 產(chǎn)品易用度均值 5.32,ToD 產(chǎn)品易用度均值 5.07。

  • 產(chǎn)品階段越早期,易用度越低。試點(diǎn)產(chǎn)品中,0-1 階段的產(chǎn)品易用度均值 5.09,1-N 階段的產(chǎn)品易用度均值 5.28。


內(nèi)部實(shí)踐

如圖所示,易用度有很好的區(qū)分度,不同產(chǎn)品類型的不同產(chǎn)品階段分?jǐn)?shù)呈現(xiàn)出差異性,我們可以根據(jù)這個(gè)數(shù)據(jù),去評(píng)估自己的產(chǎn)品所在位置。





為什么總體上選擇 5.5 分作為“易用”標(biāo)準(zhǔn)?


我們?cè)谶@ 35 個(gè)產(chǎn)品上進(jìn)行易用度的嘗試,最終收集了 4000+ 問卷數(shù)據(jù),得出了技術(shù)類產(chǎn)品的體驗(yàn)基線:

  • 總體均值 5.07 分,中位數(shù) 5 分。具體分布如圖所示,認(rèn)為“比較容易”(5-7分)的用戶占 69%。

  • 但由于內(nèi)部的技術(shù)類產(chǎn)品,大多處于 0-1階段,以現(xiàn)在的狀態(tài)作為“易用”基線,顯然不合理。





業(yè)界標(biāo)準(zhǔn)

因此,我們需要結(jié)合業(yè)界的實(shí)踐作為參考。我們收集到 2 家用戶研究領(lǐng)域的老牌公司 Nicereply 和 HotJar 的數(shù)據(jù)。Nicereply 是一家咨詢公司,它服務(wù)的對(duì)象既包括 C 端用戶,也包括 B 端用戶。HotJar 是一家專做用戶行為監(jiān)控的公司,它服務(wù)的對(duì)象主要是 C 端用戶。因此,我們傾向于采納 Nicereply 發(fā)布的基線 5.5 分,作為參考。

  • Nicereply 公司在2018 年發(fā)布的易用度 benchmark,基線為 5.5 分。

  • HotJar 公司在 2019 年發(fā)布的易用度 benchmark,基線為 6.09 分。





分析思路

很多設(shè)計(jì)者會(huì)想,不就是一個(gè)問卷嘛,能發(fā)揮多大的作用?實(shí)際上,當(dāng)問卷數(shù)據(jù)+用戶行為數(shù)據(jù),它將發(fā)揮更大的價(jià)值。

  • 現(xiàn)狀描述:對(duì)產(chǎn)品當(dāng)前的功能、體驗(yàn)、性能的在用戶心中的水位進(jìn)行摸底,通過數(shù)據(jù)和主觀反饋找到原因。

  • 對(duì)比差異:技術(shù)型產(chǎn)品往往有多個(gè)角色共同使用,并且有上下游協(xié)作關(guān)系,可以通過問卷和數(shù)據(jù)發(fā)現(xiàn)不同角色的偏好,找出差異化的改進(jìn)方向。

  • 影響關(guān)系:當(dāng)發(fā)現(xiàn)某些模塊用戶評(píng)價(jià)低時(shí),需要下鉆找到最相關(guān)的影響因素,這時(shí)需要用到相關(guān)分析,找到此消彼長(zhǎng)或相輔相成的變化關(guān)系,以及用到回歸分析,找到可能的因果關(guān)系。

  • 聚類分析:結(jié)合問卷數(shù)據(jù)和用戶行為數(shù)據(jù),我們可以對(duì)典型用戶進(jìn)行分層,也就是我們通常說的“用戶畫像”,可以結(jié)合經(jīng)典的 RFM 模型,找到高頻、忠誠、高付費(fèi)且評(píng)價(jià)好的用戶。





現(xiàn)狀描述

以某個(gè)技術(shù)類產(chǎn)品 A 為例,通過現(xiàn)狀描述,可以發(fā)現(xiàn)低分人群抱怨的問題集中在哪里,提出問題優(yōu)先級(jí)排序。




對(duì)比差異

通過對(duì)比差異,把用戶根據(jù)人口學(xué)、行為特征進(jìn)行單維分類,與易用度分?jǐn)?shù)做交叉分析,找出人群之間的差異,有針對(duì)性改進(jìn)。





影響關(guān)系

通過影響關(guān)系分析,可以找到影響產(chǎn)品 A 易用度分?jǐn)?shù)的主要原因,也就是用戶為什么覺得好用/不好用。





聚類分析

通過聚類分析,結(jié)合問卷數(shù)據(jù)和用戶行為數(shù)據(jù),可以發(fā)現(xiàn)典型人群,制定差異化的運(yùn)營策略。





現(xiàn)象與洞察

在 35 個(gè)技術(shù)類產(chǎn)品上的實(shí)踐,我們發(fā)現(xiàn)了一些常見現(xiàn)象和經(jīng)驗(yàn)性的洞察,它并非都是普適的,卻有很高的參考價(jià)值。





結(jié)論

基于內(nèi)部技術(shù)類產(chǎn)品的體驗(yàn)度量實(shí)踐,我們得出以下結(jié)論:

  • 實(shí)踐證明,易用度指標(biāo)衡量技術(shù)類產(chǎn)品更有效。技術(shù)類產(chǎn)品降本增效的商業(yè)目的、降低技術(shù)門檻的用戶訴求、流程復(fù)雜上手難的痛點(diǎn),決定了體驗(yàn)度量要關(guān)注基礎(chǔ)體驗(yàn)。滿意度、尖叫度、NPS去衡量都不太準(zhǔn)確。

  • 易用度的衡量維度,包括 5 個(gè)部分的基礎(chǔ)體驗(yàn)。即幫助引導(dǎo)、功能入口、概念術(shù)語、任務(wù)流程、操作反饋。

  • 結(jié)合內(nèi)部試點(diǎn)和行業(yè)調(diào)研,我們把技術(shù)類產(chǎn)品的易用基線,設(shè)定為 5.5 分。當(dāng)前內(nèi)部技術(shù)類產(chǎn)品的易用度基線是 5.07分,行業(yè)技術(shù)類產(chǎn)品的易用度基線是 5.5 分,產(chǎn)品類型(ToC/ToB/ToD)、產(chǎn)品階段(0-1階段,1-N階段)也會(huì)有所差異。

  • 結(jié)合行為數(shù)據(jù),易用度可以進(jìn)行描述、分類。使用現(xiàn)狀描述找出低分人群的高頻問題,使用對(duì)比差異找到多角色的不同訴求,分析影響關(guān)系找到影響易用度的主要因素,結(jié)合用戶行為數(shù)據(jù)進(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



文章來源:站酷   作者: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.sillybuy.com )是一家專注而深入的界面設(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ù)






服務(wù)藍(lán)圖的背后到底是什么,該怎么用?

資深UI設(shè)計(jì)者

前言

用戶體驗(yàn)地圖與服務(wù)藍(lán)圖常常會(huì)一起出現(xiàn)。因?yàn)?,用戶體驗(yàn)地圖更聚焦于用戶在前臺(tái)端到端的體驗(yàn),而服務(wù)藍(lán)圖更聚焦于由表面到核心后臺(tái)業(yè)務(wù)及如何交付和幕后的操作,并且能與用戶體驗(yàn)強(qiáng)關(guān)聯(lián)起來。

什么是服務(wù)藍(lán)圖?

服務(wù)藍(lán)圖是以公司角度展示的可視化界面工具。在每個(gè)階段為用戶提供的服務(wù),且在服務(wù)過程中會(huì)涉及到的不同人員和不同的條件。并且在公司內(nèi),所有的人員都可以客觀的理解并使用(所需各方的服務(wù)和支持)。

1. 主要構(gòu)成

服務(wù)藍(lán)圖直觀上同時(shí)從 4 個(gè)主要方面展示:

服務(wù)藍(lán)圖的背后到底是什么,該怎么用?

用戶行為

用戶在所有階段中的體驗(yàn)節(jié)點(diǎn)。這里需要注意的是:一定要清晰的羅列出,用戶在什么觸點(diǎn)下做的什么行為。這樣才能更好的進(jìn)行技術(shù)(方案)評(píng)估及更好的服務(wù)用戶。

服務(wù)藍(lán)圖的背后到底是什么,該怎么用?

前臺(tái)

前臺(tái)是圍繞著與用戶產(chǎn)生交互行為關(guān)系所展開的具體內(nèi)容,內(nèi)容可包含員工、數(shù)字設(shè)備、技術(shù)方案,也就是用戶能看見的服務(wù)和能接觸到的服務(wù)。

服務(wù)藍(lán)圖的背后到底是什么,該怎么用?

后臺(tái)

后臺(tái)是給前臺(tái)提供技術(shù)方案支持的存在。

服務(wù)藍(lán)圖的背后到底是什么,該怎么用?

支持

支持過程包含內(nèi)部人員和外部人員履行的服務(wù)步驟和互動(dòng)行為。

服務(wù)藍(lán)圖的背后到底是什么,該怎么用?

如何用服務(wù)藍(lán)圖優(yōu)化產(chǎn)品/業(yè)務(wù)?

優(yōu)化產(chǎn)品/業(yè)務(wù)主要從 4 個(gè)關(guān)鍵點(diǎn)出發(fā):

1. 找出服務(wù)流程的崩潰點(diǎn)或斷點(diǎn)

對(duì)于線下智能服務(wù),我們應(yīng)該遵守一個(gè)基本原則:在一個(gè)完整的流程中,不應(yīng)該出現(xiàn)「用戶不知道要做什么和需要未知等待的事情」。

怎么找到崩潰點(diǎn)和斷點(diǎn)?

主要從「田野調(diào)查」和「深度訪談」獲得??筛鶕?jù)實(shí)際的項(xiàng)目展開定性研究。

2. 新服務(wù)、新體驗(yàn)該怎么執(zhí)行

在更新體驗(yàn)流程的時(shí)候,一定要基于全新的角度出發(fā)。把自己想象成:我是一名刁鉆的用戶,你需要喂我吃飯的境界,最好還要幫我把飯粒粒分離。

還是以無人零售商店舉例:前期準(zhǔn)備節(jié)點(diǎn)

如(新服務(wù)):在購物流程說明的物料中,把關(guān)鍵字圈出并劃重點(diǎn),在前期推廣的時(shí)候安排店員進(jìn)行隨時(shí)講解。

如(新體驗(yàn)):把之前的定制便宜的物料,換成高逼格的、貼紙換成超大號(hào)的。

該怎么執(zhí)行:根據(jù)藍(lán)圖規(guī)劃設(shè)計(jì)“高峰值”的體驗(yàn)點(diǎn),對(duì)購物流程說明的物料進(jìn)行資源傾斜。

3. 衡量服務(wù)過程的每一步是否達(dá)標(biāo)

衡量的標(biāo)準(zhǔn):數(shù)據(jù)角度出發(fā)/用戶購物速度/體驗(yàn)流程的銜接度等等

如(漏斗數(shù)據(jù)):開業(yè)前期宣傳來了 100 人,100 人閱讀了購物流程,留下了多少人,在留下人中,多少人是在 10 秒內(nèi)完成閱讀進(jìn)店體驗(yàn)(X 人….X 秒/分鐘…)

4. 定義服務(wù)的“高峰值”

在不同的階段設(shè)計(jì)用戶的心理峰值曲線。

峰值和終值,是由 2002 諾貝爾獎(jiǎng)得主、心理學(xué)家丹尼爾·卡尼曼提出的。他發(fā)現(xiàn)大家對(duì)體驗(yàn)的記憶由兩個(gè)核心因素決定: 第一個(gè)是體驗(yàn)最高峰的時(shí)候,無論是正向的最高峰還是負(fù)向的最高峰,一定是能記得住的。第二個(gè)是結(jié)束時(shí)的感覺。這就是峰終定律(Peak-End Rule)

舉個(gè)栗子:宜家購物

服務(wù)藍(lán)圖的背后到底是什么,該怎么用?

宜家會(huì)在每個(gè)階段給與用戶不同的情感體驗(yàn)(我特別喜歡那個(gè)冰淇淋,如果你也是的話文章末尾點(diǎn)個(gè)贊唄)。

服務(wù)藍(lán)圖的增值體現(xiàn)

那么如何在藍(lán)圖上體現(xiàn)增值的點(diǎn)?主要從以下 4 個(gè)方面:

1. 時(shí)間:服務(wù)質(zhì)量再高也會(huì)隨著時(shí)間的消耗而消耗。

服務(wù)藍(lán)圖中的一步可能需要 5 秒,也可能需要 5 分鐘,所以在頂部增加的時(shí)間能幫助大家更好的理解這個(gè)服務(wù)。

2. 衡量標(biāo)準(zhǔn):服務(wù)的成功或價(jià)值需要一些體驗(yàn)因素來衡量。

這些因素是用戶在心里判斷服務(wù)是成功還是失敗的關(guān)鍵時(shí)刻。比如,等待時(shí)間。

3. 情緒表達(dá):對(duì)某些服務(wù)來說,理解用戶的情緒狀態(tài)是非常必要的。

比如,用戶注冊(cè)時(shí),突然手機(jī)斷網(wǎng)了也需要納入考量因素。

注釋說明:在內(nèi)部討論時(shí),將說明的重點(diǎn)用 icon 的形式標(biāo)記出來

#完整的服務(wù)藍(lán)圖

服務(wù)藍(lán)圖的背后到底是什么,該怎么用?

總結(jié)

企業(yè)的資源是有限的,你不可能在所有點(diǎn)都達(dá)到用戶的預(yù)期或者給用戶全程的超高體驗(yàn) 。所以,需要做的是,在服務(wù)藍(lán)圖上配置資源來制造用戶體驗(yàn),使用戶擁有一個(gè)美好的峰值和令人回味的終值,并且全程不突破用戶的底線。

服務(wù)藍(lán)圖的結(jié)構(gòu)要素,實(shí)際上定義了服務(wù)傳遞系統(tǒng)的整體規(guī)劃,包括服務(wù)的設(shè)置、服務(wù)能力的規(guī)劃。服務(wù)藍(lán)圖不是一個(gè)人的事情,在服務(wù)環(huán)節(jié)中的每個(gè)人都必須把“用戶滿意”作為自己的服務(wù)標(biāo)準(zhǔn)。服務(wù)藍(lán)圖提供了一個(gè)全局觀點(diǎn)。服務(wù)藍(lán)圖也可以平衡業(yè)務(wù)需求和用戶需求。


藍(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



文章來源:優(yōu)設(shè)   作者:七月Xavier

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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.sillybuy.com )是一家專注而深入的界面設(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ù)



網(wǎng)頁UI設(shè)計(jì)如何體現(xiàn)視覺層次感

seo達(dá)人




但是,究竟如何才能結(jié)合網(wǎng)頁/產(chǎn)品特色和用戶的真實(shí)需求, 將頁面視覺內(nèi)容層級(jí)化, 從而提供更加優(yōu)質(zhì)的用戶體驗(yàn),實(shí)現(xiàn)與用戶的互動(dòng), 最終促成產(chǎn)品購買呢?下面小編就結(jié)合最新且具有極佳視覺層次感的網(wǎng)頁設(shè)計(jì)實(shí)例分析和介紹視覺內(nèi)容組織技巧,以及在原型化這些網(wǎng)頁設(shè)計(jì)的過程中(結(jié)合小編最愛的一款又快又簡(jiǎn)單的原型工具M(jìn)ockplus)需要注意的原型設(shè)計(jì)技巧:


1.利用界面元素尺寸大小建立層級(jí)結(jié)構(gòu)

界面元素(例如文字,圖片或形狀等)尺寸越大,越突出,越容易吸引用戶的注意。所以,在具體的網(wǎng)頁界面設(shè)計(jì)中,設(shè)計(jì)師可以通過有梯度的尺寸變化,創(chuàng)建頁面信息的層級(jí)關(guān)系。當(dāng)然內(nèi)容重要性上,也應(yīng)該是與尺寸大小成正比的(即越大越重要)。

大圖模式

如圖,利用文字的尺寸大小,體現(xiàn)網(wǎng)頁信息的層級(jí)。

注意:尺寸大小也要控制在用戶能夠接受的范圍內(nèi)

太大,能夠展示的內(nèi)容有限。太小,易讀性差,也會(huì)比較繁雜。


原型設(shè)計(jì)技巧:

在利用Mockplus (一款具有豐富組件庫和圖標(biāo)庫的原型工具)創(chuàng)建網(wǎng)頁原型時(shí),絕大部分的組件都是可以簡(jiǎn)單通過寬高屬性或拖拉邊框兩種方式調(diào)整其尺寸,輕松創(chuàng)建直觀的層次結(jié)構(gòu)。

大圖模式

如圖,Mockplus允許用戶簡(jiǎn)單通過寬高屬性或拖拉邊框的方式調(diào)整組件尺寸大小。


2.利用界面元素明暗,陰影以及透明度的不同,體現(xiàn)簡(jiǎn)單層級(jí)

如白底黑字般,同類元素,同一色彩,不同的明暗,陰影以及透明度,也可體現(xiàn)簡(jiǎn)單的層級(jí)關(guān)系。當(dāng)然,在沒有過多顏色的參與下,不同文字,圖片等多種的頁面元素結(jié)合透明度,陰影以及明暗,也可使整款設(shè)計(jì)極具簡(jiǎn)約風(fēng)和層次感。(點(diǎn)擊鏈接更多的簡(jiǎn)約風(fēng)網(wǎng)頁設(shè)計(jì)技巧)

大圖模式

如圖,文字明暗,結(jié)合尺寸變化,讓頁面層級(jí)更加清晰簡(jiǎn)約:


原型設(shè)計(jì)技巧:

而在這一方面,小編發(fā)現(xiàn)Mockplus提供了專門透明度屬性,可以根據(jù)層級(jí)設(shè)計(jì)需求,修改屬性數(shù)值進(jìn)行設(shè)置。


如若,需要添加元素陰影,也可輕松通過組件的重疊實(shí)現(xiàn)。

大圖模式

如圖,“圖片”與“形狀”組件的組合,實(shí)現(xiàn)陰影的添加。


3.利用色彩,劃分頁面層級(jí)

色彩,作為設(shè)計(jì)師最常使用的視覺層次工具,也為他們創(chuàng)建極富層級(jí)感的網(wǎng)頁設(shè)計(jì)發(fā)揮著舉足輕重的作用。而具體的設(shè)計(jì)技巧,大家可以參考以下幾點(diǎn):


首先,色彩明亮的頁面元素更容易從相對(duì)柔和的元素中脫穎而出。如圖:

大圖模式

如圖,明亮的紅色和黃色更易從相對(duì)較柔和的粉色背景中脫穎而出。


而且,某些色彩,尤其是某些主題配色方案的選擇,對(duì)于確定網(wǎng)頁的整體基調(diào),吸引用戶注意,作用也非常明顯。例如,藍(lán)色,一般代表平靜祥和,適合一些日常事物管理類軟件選擇。而紅色,則代表熱情喜氣,適合一些節(jié)日相關(guān)購物促銷類軟件選擇。


大圖模式

如圖,利用紅色突出網(wǎng)頁促銷信息。

其次,色彩飽和度的梯度變化,也可體現(xiàn)直觀而豐富的層次結(jié)構(gòu)。

同一色彩,飽和度的梯度變化,也可幫助展現(xiàn)網(wǎng)站元素的層次結(jié)構(gòu)。如圖:

大圖模式

最后,色彩模塊,對(duì)于體現(xiàn)界面元素的邏輯關(guān)系,作用也是顯而易見

存在同一邏輯關(guān)系的各個(gè)頁面元素就近放置在同一色彩模塊,可以讓頁面組織結(jié)構(gòu)更加清晰,易于用戶快速查看相關(guān)內(nèi)容。


大圖模式

如圖,利用色彩模塊,更直觀地劃分功能區(qū)。

原型設(shè)計(jì)技巧:

而這一方面,Mockplus提供了非常強(qiáng)大的色彩選擇器,設(shè)計(jì)師們可以簡(jiǎn)單點(diǎn)擊實(shí)現(xiàn)色彩的選擇和添加。其色彩收藏功能,也為以后復(fù)用和保持整款設(shè)計(jì)配色的一致性提供了可能。


當(dāng)然,結(jié)合“形狀”組件,為頁面添加豐富的功能色塊,以及添加“鼠標(biāo)懸停時(shí)”或“點(diǎn)擊時(shí)”的簡(jiǎn)單色彩交互狀態(tài),也不是難事。

大圖模式

如圖,添加色塊劃分界面功能結(jié)構(gòu)。

4.利用頁面布局,展現(xiàn)網(wǎng)頁層級(jí)結(jié)構(gòu)

頁面布局也是設(shè)計(jì)師們常用的視覺工具之一。一方面,同一網(wǎng)站,內(nèi)部各個(gè)頁面可以根據(jù)軟件或產(chǎn)品展示內(nèi)容需求,采用多樣的布局模式,增加頁面的多變性和可讀性。另一方面,也可直接在不同頁面采用重復(fù)的頁面布局,方便幫助用戶形成一定的閱讀習(xí)慣,快速有效的查詢需要的信息。

而具體單個(gè)頁面的布局模式,大家可以嘗試以下的方式實(shí)現(xiàn):


*利用網(wǎng)格劃分不同頁面模塊

網(wǎng)格是公認(rèn)的劃分頁面功能模塊的工具之一。而它在組織界面視覺內(nèi)容方面,作用也不可小視。加之,結(jié)合各個(gè)網(wǎng)格的色彩變化,也能使整個(gè)頁面更加炫酷直觀。如下圖:

大圖模式

*利用位置不同體現(xiàn)邏輯關(guān)系

同一邏輯關(guān)系(比如同類,從屬,因果等)或相近/相關(guān)的元素放在同一或并列的網(wǎng)頁位置或模塊內(nèi),更易于用戶瀏覽所需頁面信息。


當(dāng)然,每個(gè)邏輯關(guān)系內(nèi),結(jié)合大小標(biāo)題和列表進(jìn)行展示,層級(jí)關(guān)系會(huì)更加深入清晰。


*利用點(diǎn)線

網(wǎng)頁設(shè)計(jì)中,設(shè)計(jì)師不僅可以直接使用點(diǎn)線標(biāo)出需要強(qiáng)調(diào)的內(nèi)容,還可以利用點(diǎn)線劃分頁面板塊和布局。

大圖模式

如圖,通過位置的不同體現(xiàn)內(nèi)容之間的邏輯關(guān)系。同時(shí),利用線條劃分頁面結(jié)構(gòu)和布局。


*利用對(duì)齊方式的不同

文字,圖片以及相關(guān)元素的對(duì)齊方式,也是體驗(yàn)不同層級(jí)結(jié)構(gòu)的重要工具。

總之,頁面布局也可幫助設(shè)計(jì)師們創(chuàng)建更具美感和層次感的網(wǎng)頁設(shè)計(jì)。


原型設(shè)計(jì)技巧:

在使用Mockplus時(shí),設(shè)計(jì)師可簡(jiǎn)單使用“快速格子+自動(dòng)填充”的功能組合,實(shí)現(xiàn)界面網(wǎng)格的輕松添加。而且,在具體的設(shè)計(jì)過程中,對(duì)齊方式,標(biāo)尺以及參考線等工具的使用,也可使網(wǎng)頁布局設(shè)計(jì)更加簡(jiǎn)便快捷。


大圖模式

如圖,利用Mockplus的快速格子和自動(dòng)填充功能制作網(wǎng)頁網(wǎng)格,劃分界面功能結(jié)構(gòu)。


5.利用留白和間距,突出界面視覺內(nèi)容

留白的巧妙運(yùn)用,能夠非常有效地突出頁面信息。而頁面內(nèi)部元素之間,保持適當(dāng)?shù)拈g距,讓彼此之間的相互聯(lián)系而不“擁擠雜亂”,也是吸引用戶注意的不錯(cuò)策略。如圖:


大圖模式

6.利用對(duì)比,凸顯網(wǎng)頁層級(jí)結(jié)構(gòu)關(guān)系

以上所提及的各種視覺組織工具,例如尺寸,色彩,明暗,間距等等,同類或不同類之間的鮮明對(duì)比,也可以讓頁面視覺上更加美觀而豐富,同時(shí)體現(xiàn)元素之間的結(jié)構(gòu)層次關(guān)系。


大圖模式

如圖,利用色彩的強(qiáng)烈對(duì)比,突出頁面層級(jí)。

此外,頁面元素的相互疊加,清晰度,以及細(xì)節(jié)展示程度的對(duì)比,也能有效地凸顯網(wǎng)頁內(nèi)容的重要性層級(jí)。


大圖模式

如圖,靠前的圖片和文字應(yīng)該更加重要,清晰,細(xì)節(jié)也應(yīng)更豐富,從而方便用戶識(shí)別讀取,避免層次混亂。


7.采用不同的界面風(fēng)格,打造獨(dú)特的網(wǎng)頁視覺層級(jí)

當(dāng)然,并不是說設(shè)計(jì)師就必須通過以上的設(shè)計(jì)工具展示網(wǎng)頁重要性層級(jí)結(jié)構(gòu)。實(shí)際上,結(jié)合設(shè)計(jì)師特有創(chuàng)意,獨(dú)特紋理(texture),圖形或圖像元素等,打造出具有設(shè)計(jì)師獨(dú)特風(fēng)格的視覺層級(jí),也會(huì)是不錯(cuò)的嘗試。如下圖:


大圖模式

總之,不管是否使用以上的設(shè)計(jì)工具,結(jié)合設(shè)計(jì)師創(chuàng)意,打造獨(dú)具一格的視覺層級(jí)風(fēng)格,都是不錯(cuò)的設(shè)計(jì)理念。


原型設(shè)計(jì)技巧:

而在這一點(diǎn)上,Mockplus提供了很多優(yōu)質(zhì)功能,幫助設(shè)計(jì)師隨心設(shè)計(jì),并簡(jiǎn)單快捷的原型化,測(cè)試和迭代這些天馬行空的創(chuàng)意。


比如,其團(tuán)隊(duì)協(xié)作和團(tuán)隊(duì)管理功能,方便設(shè)計(jì)師更加高效地完成設(shè)計(jì)。其8種演示和分享方式,例如導(dǎo)出圖片,HTML以及演示包等等,為設(shè)計(jì)師根據(jù)切實(shí)需要,選擇適當(dāng)?shù)姆绞綔y(cè)試和分享相關(guān)設(shè)計(jì)提供了便利。


此外,其組件樣式庫,也為保存和分享需要的組件樣式并隨時(shí)復(fù)用提供了可能。


8.分析用戶需求和網(wǎng)頁瀏覽模式,優(yōu)化頁面內(nèi)容和位置

在進(jìn)行網(wǎng)頁界面層級(jí)結(jié)構(gòu)化的過程中,并不是毫無章法,盲目的隨意添加或突出某個(gè)部分,而是需要分析用戶行為,根據(jù)用戶需求等級(jí)進(jìn)行相應(yīng)結(jié)構(gòu)層次的劃分。否則,再怎么賦有層次感,用戶也會(huì)因?yàn)檎也坏叫枰臇|西,莞爾離開。


此外,除了根據(jù)用需求決定哪些內(nèi)容需要放在最緊要,最突出的位置,以吸引用戶。同時(shí)還需要根據(jù)用戶瀏覽網(wǎng)頁時(shí)的閱讀模式,分析重要內(nèi)容的頁面位置。


根據(jù)美國著名網(wǎng)站設(shè)計(jì)工程師Nielsen Norman Group研究表示,用戶總是在網(wǎng)頁瀏覽中慣用“F”或“Z”型閱讀模式,即用戶常常是從左到右,開頭結(jié)尾詳細(xì)閱讀,而中間部分則根據(jù)網(wǎng)頁或文章大小標(biāo)題結(jié)構(gòu),選擇性閱讀的模式。如下圖:

大圖模式

那么,網(wǎng)頁設(shè)計(jì)中,設(shè)計(jì)師就需要注意頁面首尾內(nèi)容的趣味性和實(shí)用性,以及中間主體部分注意大小標(biāo)題簡(jiǎn)潔明了,建立清晰的框架層次結(jié)構(gòu)。

總之,無論是用戶行為畫像,還是用戶瀏覽模式分析,最終都是希望能夠根據(jù)用戶需求,更加合理的安排和分布頁面內(nèi)容,直觀清晰,易識(shí)別。


9.其他設(shè)計(jì)工具

而其它視覺設(shè)計(jì)工具,例如界面文本方面,文本字體,排版,對(duì)齊方式等等,也可突出頁面的層級(jí)關(guān)系。


原型設(shè)計(jì)技巧:

如若設(shè)計(jì)師希望通過網(wǎng)頁文本的尺寸,字體,顏色,排版以及對(duì)齊方式等實(shí)現(xiàn)框架結(jié)構(gòu)的構(gòu)建時(shí),Mockplus的“單行文字”和“多行文字”組件就可以輕松幫助實(shí)現(xiàn)。而且,適當(dāng)?shù)慕Y(jié)合一定的交互設(shè)計(jì),也可使整款設(shè)計(jì)更具吸引力。


結(jié)語

當(dāng)然,層次結(jié)構(gòu)化不僅能讓網(wǎng)頁更加直觀清晰,賞心悅目。而且,具有一定局限性的Android 或iOS app,例如頁面尺寸的限制,設(shè)備屏幕的限制,響應(yīng)與否的限制等等,更需要清晰的層次結(jié)構(gòu),讓頁面擺脫混亂繁雜,吸引更多用戶點(diǎn)擊使用。而這方面,也同樣適用以上所有設(shè)計(jì)技巧。


總之, 無論如何, 及時(shí)地將各種設(shè)計(jì)想法,通過一款實(shí)用且強(qiáng)大的原型工具(比如以上介紹到的Mockplus), 轉(zhuǎn)化成直觀可視的原型,更進(jìn)一步的測(cè)試和迭代,才是創(chuàng)建真正美觀實(shí)用,深受用戶喜愛的web/app的必經(jīng)之道。


總之,希望以上介紹的相關(guān)層次結(jié)構(gòu)設(shè)計(jì)技巧和原型設(shè)計(jì)技巧能對(duì)你有所啟發(fā)。



藍(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)系。

                                                            微信圖片_20210513163802.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.sillybuy.com )是一家專注而深入的界面設(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ì)師定制的UI設(shè)計(jì)配色技巧

seo達(dá)人


每當(dāng)我看到一個(gè)漂亮,優(yōu)雅并且簡(jiǎn)潔美觀的界面,就會(huì)忍不住保存下來?,F(xiàn)在,我已經(jīng)收集了100多個(gè)美不勝收的UI 界面。在一次次觀摩,欣賞和學(xué)習(xí)后,我發(fā)現(xiàn)這些界面有很多共同點(diǎn)??删烤故鞘裁醋屛覍?duì)它們一見鐘情呢?現(xiàn)在我找到了答案,是色彩。

本文中,結(jié)合自身經(jīng)歷,我總結(jié)了一些UI 設(shè)計(jì)配色技巧。雖然它們不能像魔術(shù)一樣讓你搖身一變成為最優(yōu)秀的UI設(shè)計(jì)師,但是我保證,這些為你量身打造的UI 設(shè)計(jì)配色技巧,定會(huì)讓你受益匪淺。

1. 色彩的魔力

色彩是會(huì)說話的,甚至可以像語言一樣強(qiáng)大?;叵胍韵拢慨?dāng)你初見一個(gè)網(wǎng)站或產(chǎn)品,給你留下第一印象的是什么呢?是視覺外觀,而視覺外觀很大程度上是取決于色彩運(yùn)用。

那么,在UI設(shè)計(jì)中,色彩究竟可以做些什么?

1)反映品牌的內(nèi)涵和品質(zhì)

顏色可以為品牌設(shè)定基調(diào)。 CCICOLOR的一項(xiàng)研究表明,用戶在評(píng)估一款在線商品時(shí),只需花費(fèi)短短90秒,而判斷的依據(jù)高達(dá)62%至90%將取決于配色方案。

2)實(shí)現(xiàn)更佳的用戶體驗(yàn)

色彩的有效運(yùn)用能提升整體美感,提供更優(yōu)的閱讀體驗(yàn),創(chuàng)造清晰和諧的風(fēng)格。

3)影響購買決策

根據(jù)Kissmetrics的說法,產(chǎn)品的視覺外觀是影響消費(fèi)者購買決策的首要因素。此外,QuickSprout的研究也表明,90%的產(chǎn)品評(píng)估都與顏色有關(guān)。Neil Patel曾寫到,“顏色在你購買特定產(chǎn)品的原因中占據(jù)85%的分量”。正因如此,顏色已成為當(dāng)今重要的營銷手段之一。

2. 色彩的基本概念

色彩被長(zhǎng)久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨(dú)特的語言和象征。解讀色彩的語言,請(qǐng)看下表:


大圖模式
點(diǎn)擊此處添加圖片說明文字

3. UI 設(shè)計(jì)配色技巧

1) 色彩使用也講究“天時(shí)地利人和”

存在即合理,沒有哪一個(gè)色彩本身就是丑陋和不具備美感的,只能說,如果我們錯(cuò)誤的使用了色彩,那么它的美一旦被破壞,就只剩下丑陋和別扭了。

想象一下,如果麥當(dāng)勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色,你還對(duì)他們的炸雞充滿饑腸轆轆的感覺嗎?女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對(duì),為什么?因?yàn)檫@樣會(huì)讓她們看起來性感迷人。

不同的顏色傳達(dá)不同的含義和感覺。如何明智地進(jìn)行選取和搭配呢?這里請(qǐng)注意5點(diǎn):選取合適的顏色,運(yùn)用于合適的設(shè)計(jì)場(chǎng)景,注意時(shí)間變化,關(guān)注目標(biāo)用戶,明確想要達(dá)到的目的。

這里請(qǐng)認(rèn)真查看上圖,明確顏色的意義。但如果你非要冒險(xiǎn)追求獨(dú)一無二的設(shè)計(jì),那么祝您好運(yùn)。


大圖模式
點(diǎn)擊此處添加圖片說明文字

2)留心藍(lán)色

為什么專門談藍(lán)色?藍(lán)色不是海洋天空的專屬色,藍(lán)色也是UI 設(shè)計(jì)的青睞色。


看看你常用的一些比較有名的APP或者網(wǎng)站,比如Facebook,Safari以及辦公軟件等等。有什么發(fā)現(xiàn)呢?是的,它們的界面都是藍(lán)色,各種層次的藍(lán)色。

有研究表明,藍(lán)色是唯一一種讓女性和男性都鐘愛的顏色。藍(lán)色幾乎無處不在,大自然中,各網(wǎng)站的UI界面,服飾衣物等,藍(lán)色隨處可見。包括我此刻寫入文章的Microsoft Word,界面也是藍(lán)色的。

藍(lán)色無疑是一種安全的顏色,它能最大程度上獲得用戶的信任并被廣泛接受,藍(lán)色可以說是UI配色中的典型例子。如果你的UI界面沒有更好的選擇,請(qǐng)用藍(lán)色。


大圖模式
點(diǎn)擊此處添加圖片說明文字

3)背景色和元素之間的色彩變化技巧

看看以下的界面:


大圖模式

(來源)

這里暫且不談這又是關(guān)于藍(lán)色的UI界面,讓我們專注于它的色彩變化。主題顏色是藍(lán)色,其他元素是較暗的藍(lán)色和更明亮的藍(lán)色。整體看上去,各層次的顏色平衡和諧且又脈絡(luò)清晰。

怎么做到自然而又極具美感的色彩變化?

只是一個(gè)簡(jiǎn)單的黃金法則:通過降低亮度和增加飽和度可以使色彩變得更深;通過增加亮度和降低飽和度來使色彩變得更淺。

4)色彩組合的黃金比例——(6:3:1)規(guī)則

在設(shè)計(jì)時(shí),色彩組合必不可免。組合顏色很容易,但組合后如何避免色彩混亂和累贅?如何既能夠不顯得單調(diào)又展示設(shè)計(jì)感?

記住二個(gè)原則:

第一個(gè):6:3:1規(guī)則

60%+ 30%+ 10%的比例是為了平衡顏色。這個(gè)公式能創(chuàng)造出一種平衡的感覺,并能提供更佳的用戶體驗(yàn),可以讓用戶的實(shí)現(xiàn)從一個(gè)點(diǎn)舒緩的移動(dòng)到另一個(gè)點(diǎn)。

第二個(gè):最多3個(gè)原色

這個(gè)規(guī)則與黃金(6:3:1)規(guī)則相匹配。這是避免混亂并保持平衡的最佳辦法。


大圖模式

5)顏色組合和互補(bǔ)

提供和諧的配色方案時(shí),需要注意些什么?在這個(gè)過程中需要考慮以下方面:

第一, 色調(diào)

您可以在色環(huán)上生成單個(gè)“色度”的許多變體。通過添加白色,黑色和灰色來生成不同的色調(diào)。

實(shí)現(xiàn)平衡色調(diào),最簡(jiǎn)單的方案是單色(單色)方案。

第二, 對(duì)比

顏色的不同對(duì)比可以喚起不同的情感反應(yīng)。色輪上相對(duì)的兩種顏色可以提供最高的對(duì)比度,比如黑色和白色。強(qiáng)烈的對(duì)比度可以讓人集中精力,并且產(chǎn)生緊張的心情; 柔和的對(duì)比度則適用于輕松、休閑的UI設(shè)計(jì)。


大圖模式

注意:對(duì)比的使用不要過火,這樣容易使用戶產(chǎn)生困擾。

6)黑白色搭配不過時(shí)

黑色是所有中性色中最強(qiáng)的,而白色是最常用的背景顏色。黑色是一個(gè)很好的選擇,有種高端和永恒的感覺,而白色可以帶給用戶自由,寬敞和透氣的感覺。如上所述,黑色和白色也是最大的對(duì)比色,如果合理的使用黑色配合白色,會(huì)營造出一種優(yōu)雅的氛圍。黑白色的搭配主要用于網(wǎng)站UI界面。


大圖模式

7)從自然和藝術(shù)中獲得靈感

自然與藝術(shù)是靈感的主要源泉。抬頭看看天空,你會(huì)發(fā)現(xiàn)藍(lán)色發(fā)揮到淋淋盡致的經(jīng)典模樣。從大自然中獲得的配色靈感可以使您的設(shè)計(jì)更加切合用戶的審美,非常自然,不帶刻意的痕跡。而藝術(shù)是對(duì)自然的直接反映,是非常寶貴的資源,值得好好利用。


大圖模式

8)顏色心理學(xué) – 避免性別誤區(qū)

或許天生如此,女人不喜歡灰色,橙色和棕色。她們鐘愛藍(lán)色,紫色和綠色。而男人不喜歡紫色,橙色和棕色。男人喜歡藍(lán)色,綠色和黑色。只要記住,當(dāng)你的產(chǎn)品目標(biāo)用戶群是男性時(shí),選擇能傳達(dá)男性氣概的色彩。如果你把運(yùn)動(dòng)類App的界面使用了女性色彩,結(jié)果可想而知。

還有一個(gè)誤區(qū),人們以為粉色是女性的喜愛,但結(jié)果也許會(huì)讓你大跌眼鏡。


大圖模式

4. 工具和模板

這里我總結(jié)了一些有助于UI配色的工具和模板,希望對(duì)您有所幫助:

1)Coolors.co

Coolors.co是挑選顏色的好工具。只需鎖定所選顏色并按空格即可生成調(diào)色板,還提供了鎖定部分色卡再次生成顏色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。

2)Mockplus

Mockplus是一款非常方便的UI / UX設(shè)計(jì)工具,其啟動(dòng)頁面加入了配色精美的示例項(xiàng)目和模板,可直接導(dǎo)入桌面客戶端。其編輯器中,可對(duì)組件進(jìn)行多樣的色彩設(shè)置和編輯,內(nèi)部也包含完整的顏色選擇器,支持導(dǎo)入圖片和GIF,如果您是要在原型設(shè)計(jì)過程中產(chǎn)出精美的UI 界面,Mockplus能滿足您的需求。


大圖模式

3)Paletton

Paletton有點(diǎn)類似于Kuler,但又不僅限于5個(gè)色調(diào)。當(dāng)您已經(jīng)擁有原色并想要使用其他色調(diào)時(shí),Paletton將會(huì)是您很好的選擇,它可以創(chuàng)建協(xié)同色彩組合工作,是強(qiáng)大的UI調(diào)色板。

4)Check my Color

Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具,也是一款能夠檢查不同網(wǎng)頁自己的顏色亮度和對(duì)比度差異的工具。

5)Chinaz

該網(wǎng)站提供了豐富的配色資源,包括在線調(diào)色板,網(wǎng)頁常用色彩,web安全色以及網(wǎng)頁顏色選擇器,會(huì)使您UI 配色的一個(gè)很好的幫助。建議對(duì)色彩運(yùn)用比較初級(jí)的設(shè)計(jì)師可以做一個(gè)參考。


注意:可用性是關(guān)鍵

創(chuàng)建華麗的UI界面永遠(yuǎn)不是最終的目標(biāo)。提供卓越的用戶體驗(yàn),為用戶的生活增添快樂和幸福才是我們?cè)O(shè)計(jì)的目的。因此,在UI 設(shè)計(jì)配色上,每位UI設(shè)計(jì)師應(yīng)該記住,界面應(yīng)該是符合高度實(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)系。

                                                            微信圖片_20210513163802.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.sillybuy.com )是一家專注而深入的界面設(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ù)

react全家桶從0搭建一個(gè)完整的react項(xiàng)目(react-router4、redux、redux-saga)

前端達(dá)人

react全家桶從0到1(最新)

本文從零開始,逐步講解如何用react全家桶搭建一個(gè)完整的react項(xiàng)目。文中針對(duì)react、webpack、babel、react-route、redux、redux-saga的核心配置會(huì)加以講解,通過這個(gè)項(xiàng)目,可以系統(tǒng)的了解react技術(shù)棧的主要知識(shí),避免搭建一次后面就忘記的情況。

代碼庫:https://github.com/teapot-py/react-demo

首先關(guān)于主要的npm包版本列一下:

  1. react@16.7.0
  2. webpack@4.28.4
  3. babel@7+
  4. react-router@4.3.1
  5. redux@4+

從webpack開始

思考一下webpack到底做了什么事情?其實(shí)簡(jiǎn)單來說,就是從入口文件開始,不斷尋找依賴,同時(shí)為了解析各種不同的文件加載相應(yīng)的loader,最后生成我們希望的類型的目標(biāo)文件。

這個(gè)過程就像是在一個(gè)迷宮里尋寶,我們從入口進(jìn)入,同時(shí)我們也會(huì)不斷的接收到下一處寶藏的提示信息,我們對(duì)信息進(jìn)行解碼,而解碼的時(shí)候可能需要一些工具,比如說鑰匙,而loader就像是這樣的鑰匙,然后得到我們可以識(shí)別的內(nèi)容。

回到我們的項(xiàng)目,首先進(jìn)行項(xiàng)目的初始化,分別執(zhí)行如下命令

mkdir react-demo // 新建項(xiàng)目文件夾
cd react-demo // cd到項(xiàng)目目錄下
npm init // npm初始化 
  • 1
  • 2
  • 3

引入webpack

npm i webpack --save
touch webpack.config.js 
  • 1
  • 2

對(duì)webpack進(jìn)行簡(jiǎn)單配置,更新webpack.config.js

const path = require('path');

module.exports = {
  entry: './app.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 定義輸出目錄
    filename: 'my-first-webpack.bundle.js'  // 定義輸出文件名稱
  }
}; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

更新package.json文件,在scripts中添加webpack執(zhí)行命令

"scripts": {
  "dev": "./node_modules/.bin/webpack --config webpack.config.js"
} 
  • 1
  • 2
  • 3

如果有報(bào)錯(cuò)請(qǐng)按提示安裝webpack-cli

npm i webpack-cli 
  • 1

執(zhí)行webpack

npm run dev 
  • 1

如果在項(xiàng)目文件夾下生成了dist文件,說明我們的配置是沒有問題的。

接入react

安裝react相關(guān)包

npm install react react-dom --save 
  • 1

更新app.js入口文件

import React from 'react
import ReactDom from 'react-dom';
import App from './src/views/App';

ReactDom.render(<App />, document.getElementById('root')); 
  • 1
  • 2
  • 3
  • 4
  • 5

創(chuàng)建目錄 src/views/App,在App目錄下,新建index.js文件作為App組件,index.js文件內(nèi)容如下:

import React from 'react';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (<div>App Container</div>);
    }
}
export default App; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

在根目錄下創(chuàng)建模板文件index.html

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
    <div id="root"></div>
</body>
</html> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

到了這一步其實(shí)關(guān)于react的引入就OK了,不過目前還有很多問題沒有解決

  1. 如何解析JS文件的代碼?
  2. 如何將js文件加入模板文件中?

Babel解析js文件

Babel是一個(gè)工具鏈,主要用于在舊的瀏覽器或環(huán)境中將ECMAScript2015+的代碼轉(zhuǎn)換為向后兼容版本的JavaScript代碼。

安裝babel-loader,@babel/core,@babel/preset-env,@babel/preset-react

npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D 
  • 1
  1. babel-loader:使用Babel轉(zhuǎn)換JavaScript依賴關(guān)系的Webpack加載器, 簡(jiǎn)單來講就是webpack和babel中間層,允許webpack在遇到j(luò)s文件時(shí)用bable來解析
  2. @babel/core:即babel-core,將ES6代碼轉(zhuǎn)換為ES5。7.0之后,包名升級(jí)為@babel/core。@babel相當(dāng)于一種官方標(biāo)記,和以前大家隨便起名形成區(qū)別。
  3. @babel/preset-env:即babel-preset-env,根據(jù)您要支持的瀏覽器,決定使用哪些transformations / plugins 和 polyfills,例如為舊瀏覽器提供現(xiàn)代瀏覽器的新特性。
  4. @babel/preset-react:即 babel-preset-react,針對(duì)所有React插件的Babel預(yù)設(shè),例如將JSX轉(zhuǎn)換為函數(shù).

更新webpack.config.js

 module: {
    rules: [
      {
        test: /\.js$/, // 匹配.js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

根目錄下創(chuàng)建并配置.babelrc文件

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
} 
  • 1
  • 2
  • 3

配置HtmlWebPackPlugin

這個(gè)插件最主要的作用是將js代碼通過

npm i html-webpack-plugin -D 
  • 1

webpack新增HtmlWebPackPlugin配置

至此,我們看一下webpack.config.js文件的完整結(jié)構(gòu)

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
      filename: path.resolve(__dirname, 'dist/index.html')
    })
  ]
}; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

執(zhí)行 npm run start,生成 dist文件夾

當(dāng)前目錄結(jié)構(gòu)如下
目錄結(jié)構(gòu)

可以看到在dist文件加下生成了index.html文件,我們?cè)跒g覽器中打開文件即可看到App組件內(nèi)容。

配置 webpack-dev-server

webpack-dev-server可以極大的提高我們的開發(fā)效率,通過監(jiān)聽文件變化,自動(dòng)更新頁面

安裝 webpack-dev-server 作為 dev 依賴項(xiàng)

npm i webpack-dev-server -D 
  • 1

更新package.json的啟動(dòng)腳本

“dev": "webpack-dev-server --config webpack.config.js --open" 
  • 1

webpack.config.js新增devServer配置

devServer: {
  hot: true, // 熱替換
  contentBase: path.join(__dirname, 'dist'), // server文件的根目錄
  compress: true, // 開啟gzip
  port: 8080, // 端口
},
plugins: [
  new webpack.HotModuleReplacementPlugin(), // HMR允許在運(yùn)行時(shí)更新各種模塊,而無需進(jìn)行完全刷新
  new HtmlWebPackPlugin({
    template: './index.html',
    filename: path.resolve(__dirname, 'dist/index.html')
  })
] 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

引入redux

redux是用于前端數(shù)據(jù)管理的包,避免因項(xiàng)目過大前端數(shù)據(jù)無法管理的問題,同時(shí)通過單項(xiàng)數(shù)據(jù)流管理前端的數(shù)據(jù)狀態(tài)。

創(chuàng)建多個(gè)目錄

  1. 新建src/actions目錄,用于創(chuàng)建action函數(shù)
  2. 新建src/reducers目錄,用于創(chuàng)建reducers
  3. 新建src/store目錄,用于創(chuàng)建store

下面我們來通過redux實(shí)現(xiàn)一個(gè)計(jì)數(shù)器的功能

安裝依賴

npm i redux react-redux -D 
  • 1

在actions文件夾下創(chuàng)建index.js文件

export const increment = () => {
  return {
    type: 'INCREMENT',
  };
}; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在reducers文件夾下創(chuàng)建index.js文件

const initialState = {
  number: 0
};

const incrementReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'INCREMENT': {
      state.number += 1
      return { ...state }
      break
    };
    default: return state;
  }
};
export default incrementReducer; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

更新store.js

import { createStore } from 'redux';
import incrementReducer from './reducers/index';

const store = createStore(incrementReducer);

export default store; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

更新入口文件app.js

import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';

ReactDom.render(
    <Provider store={store}>
        <App />
    </Provider>
, document.getElementById('root')); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

更新App組件

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    render() {
        return (
            <div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick()}>點(diǎn)擊+1</button></div>

            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

點(diǎn)擊旁邊的數(shù)字會(huì)不斷地+1

引入redux-saga

redux-saga通過監(jiān)聽action來執(zhí)行有副作用的task,以保持action的簡(jiǎn)潔性。引入了sagas的機(jī)制和generator的特性,讓redux-saga非常方便地處理復(fù)雜異步問題。
redux-saga的原理其實(shí)說起來也很簡(jiǎn)單,通過劫持異步action,在redux-saga中進(jìn)行異步操作,異步結(jié)束后將結(jié)果傳給另外的action。

下面就接著我們計(jì)數(shù)器的例子,來實(shí)現(xiàn)一個(gè)異步的+1操作。

安裝依賴包

npm i redux-saga -D 
  • 1

新建src/sagas/index.js文件

import { delay } from 'redux-saga'
import { put, takeEvery } from 'redux-saga/effects'

export function* incrementAsync() {
  yield delay(2000)
  yield put({ type: 'INCREMENT' })
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

解釋下所做的事情,將watchIncrementAsync理解為一個(gè)saga,在這個(gè)saga中監(jiān)聽了名為INCREMENT_ASYNC的action,當(dāng)INCREMENT_ASYNC被dispatch時(shí),會(huì)調(diào)用incrementAsync方法,在該方法中做了異步操作,然后將結(jié)果傳給名為INCREMENT的action進(jìn)而更新store。

更新store.js

在store中加入redux-saga中間件

import { createStore, applyMiddleware } from 'redux';
import incrementReducer from './reducers/index';
import createSagaMiddleware from 'redux-saga'
import { watchIncrementAsync } from './sagas/index'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(incrementReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchIncrementAsync)
export default store; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

更新App組件

在頁面中新增異步提交按鈕,觀察異步結(jié)果

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    onClick2() {
        this.props.dispatch({ type: 'INCREMENT_ASYNC' })
    }

    render() {
        return (
            <div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick()}>點(diǎn)擊+1</button></div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick2()}>點(diǎn)擊2秒后+1</button></div>
            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

觀察結(jié)果我們會(huì)發(fā)現(xiàn)如下報(bào)錯(cuò):

這是因?yàn)樵趓edux-saga中用到了Generator函數(shù),以我們目前的babel配置來說并不支持解析generator,需要安裝@babel/plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime 
  • 1

這里關(guān)于babel-polyfill、和transfor-runtime做進(jìn)一步解釋

babel-polyfill

Babel默認(rèn)只轉(zhuǎn)換新的JavaScript語法,而不轉(zhuǎn)換新的API。例如,Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對(duì)象,以及一些定義在全局對(duì)象上的方法(比如Object.assign)都不會(huì)轉(zhuǎn)譯。如果想使用這些新的對(duì)象和方法,必須使用 babel-polyfill,為當(dāng)前環(huán)境提供一個(gè)墊片。

babel-runtime

Babel轉(zhuǎn)譯后的代碼要實(shí)現(xiàn)源代碼同樣的功能需要借助一些幫助函數(shù),而這些幫助函數(shù)可能會(huì)重復(fù)出現(xiàn)在一些模塊里,導(dǎo)致編譯后的代碼體積變大。
Babel 為了解決這個(gè)問題,提供了單獨(dú)的包babel-runtime供編譯模塊復(fù)用工具函數(shù)。
在沒有使用babel-runtime之前,庫和工具包一般不會(huì)直接引入 polyfill。否則像Promise這樣的全局對(duì)象會(huì)污染全局命名空間,這就要求庫的使用者自己提供 polyfill。這些 polyfill一般在庫和工具的使用說明中會(huì)提到,比如很多庫都會(huì)有要求提供 es5的polyfill。
在使用babel-runtime后,庫和工具只要在 package.json中增加依賴babel-runtime,交給babel-runtime去引入 polyfill 就行了;
詳細(xì)解釋可以參考

babel presets 和 plugins的區(qū)別

Babel插件一般盡可能拆成小的力度,開發(fā)者可以按需引進(jìn)。比如對(duì)ES6轉(zhuǎn)ES5的功能,Babel官方拆成了20+個(gè)插件。
這樣的好處顯而易見,既提高了性能,也提高了擴(kuò)展性。比如開發(fā)者想要體驗(yàn)ES6的箭頭函數(shù)特性,那他只需要引入transform-es2015-arrow-functions插件就可以,而不是加載ES6全家桶。
但很多時(shí)候,逐個(gè)插件引入的效率比較低下。比如在項(xiàng)目開發(fā)中,開發(fā)者想要將所有ES6的代碼轉(zhuǎn)成ES5,插件逐個(gè)引入的方式令人抓狂,不單費(fèi)力,而且容易出錯(cuò)。
這個(gè)時(shí)候,可以采用Babel Preset。
可以簡(jiǎn)單的把Babel Preset視為Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6轉(zhuǎn)換有關(guān)的插件。

更新.babelrc文件配置,支持genrator

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
} 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14


點(diǎn)擊按鈕會(huì)在2秒后執(zhí)行+1操作。

引入react-router

在web應(yīng)用開發(fā)中,路由系統(tǒng)是不可或缺的一部分。在瀏覽器當(dāng)前的URL發(fā)生變化時(shí),路由系統(tǒng)會(huì)做出一些響應(yīng),用來保證用戶界面與URL的同步。隨著單頁應(yīng)用時(shí)代的到來,為之服務(wù)的前端路由系統(tǒng)也相繼出現(xiàn)了。而react-route則是與react相匹配的前端路由。

引入react-router-dom

npm install --save react-router-dom -D 
  • 1

更新app.js入口文件增加路由匹配規(guī)則

import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const About = () => <h2>頁面一</h2>;
const Users = () => <h2>頁面二</h2>;

ReactDom.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route path="/" exact component={App} />
                <Route path="/about/" component={About} />
                <Route path="/users/" component={Users} />
            </Switch>
        </Router>
    </Provider>
, document.getElementById('root')); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

更新App組件,展示路由效果

import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';
import { Link } from "react-router-dom";

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    onClick() {
        this.props.dispatch(increment())
    }

    onClick2() {
        this.props.dispatch({ type: 'INCREMENT_ASYNC' })
    }

    render() {
        return (
            <div>
                <div>react-router 測(cè)試</div>
                <nav>
                    <ul>
                    <li>
                        <Link to="/about/">頁面一</Link>
                    </li>
                    <li>
                        <Link to="/users/">頁面二</Link>
                    </li>
                    </ul>
                </nav>

                <br/>
                <div>redux & redux-saga測(cè)試</div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick()}>點(diǎn)擊+1</button></div>
                <div>current number: {this.props.number} <button onClick={()=>this.onClick2()}>點(diǎn)擊2秒后+1</button></div>
            </div>
        );
    }
}
export default connect(
    state => ({
        number: state.number
    })
)(App); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48


點(diǎn)擊列表可以跳轉(zhuǎn)相關(guān)路由

總結(jié)

至此,我們已經(jīng)一步步的,完成了一個(gè)簡(jiǎn)單但是功能齊全的react項(xiàng)目的搭建,下面回顧一下我們做的工作

  1. 引入webpack
  2. 引入react
  3. 引入babel解析react
  4. 接入webpack-dev-server提高前端開發(fā)效率
  5. 引入redux實(shí)現(xiàn)一個(gè)increment功能
  6. 引入redux-saga實(shí)現(xiàn)異步處理
  7. 引入react-router實(shí)現(xiàn)前端路由

麻雀雖小,五臟俱全,希望通過最簡(jiǎn)單的代碼快速的理解react工具鏈。其實(shí)這個(gè)小項(xiàng)目中還是很多不完善的地方,比如說樣式的解析、Eslint檢查、生產(chǎn)環(huán)境配置,雖然這幾項(xiàng)是一個(gè)完整項(xiàng)目不可缺少的部分,但是就demo項(xiàng)目來說,對(duì)我們理解react工具鏈可能會(huì)有些干擾,所以就不在項(xiàng)目中加了。

后面會(huì)新建一個(gè)分支,把這些完整的功能都加上,同時(shí)也會(huì)對(duì)當(dāng)前的目錄結(jié)構(gòu)進(jìn)行優(yōu)化。



藍(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


部分借鑒自:csdn  作者:鄭清

原文鏈接:

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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.sillybuy.com )是一家專注而深入的界面設(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ù)

前端開發(fā)框架與方案總結(jié)——藍(lán)藍(lán)設(shè)計(jì)

前端達(dá)人

在與客戶的溝通中,聆聽了許多建議,學(xué)習(xí)到了很多知識(shí),也收到過贊美與批評(píng),在經(jīng)過千錘百煉過后  總結(jié)了一點(diǎn)點(diǎn)經(jīng)驗(yàn)

首先:



框架選擇

    網(wǎng)站css框架選擇(簡(jiǎn)潔,節(jié)約成本,快速開發(fā))

    對(duì)于一些簡(jiǎn)單靜態(tài)網(wǎng)站,展示類網(wǎng)站項(xiàng)目,達(dá)到快速開發(fā)建站,而又節(jié)約成本人力的情況下 選擇一些用于css庫的框架最為合適,


1.Bootstrap

        Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。

        預(yù)處理工具  雖然可以直接使用 Bootstrap 提供的 CSS 樣式表,但是不要忘記,Bootstrap 的源碼是采用最流行的 CSS 預(yù)處理工具

        一個(gè)框架、多種設(shè)備。 你的網(wǎng)站和應(yīng)用能在 Bootstrap 的幫助下通過同一份源碼快速、有效地適配手機(jī)、平板和 PC 設(shè)備,這一切都是 CSS 媒體 查詢(Media Query)的功勞。

功能完備  Bootstrap 提供了全面、美觀的文檔,你能在這里找到關(guān)于普通 HTML 元素、HTML 和 CSS 組件以及 jQuery 插件方面的所有詳細(xì)文檔。

Bootstrap 是最受歡迎的 CSS 框架,被認(rèn)為是擁有最好的響應(yīng)性的CSS框架。專為前端開發(fā)而設(shè)計(jì),有助于構(gòu)建web設(shè)計(jì)理念、移動(dòng)優(yōu)先項(xiàng)目、網(wǎng)格系統(tǒng)、排版和按鈕等。


iShot2021-05-31 10.55.29.png


2.layui

開源模塊化前端 UI 框架

開源模塊化前端 UI 框架

      由職業(yè)前端傾情打造,面向全層次的前后端開發(fā)者,易上手開箱即用的 Web UI 組件庫

Layui 是一款采用自身模塊規(guī)范編寫的情懷型前端UI框架,遵循原生HTML/CSS/JS的書寫與組織形式,門檻極低,拿來即用。其外在極簡(jiǎn),卻又不失飽滿的內(nèi)在,體積輕盈,組件豐盈,從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過精心雕琢,非常適合界面的快速開發(fā)。


iShot2021-05-31 14.50.44.png


   3.Semantic-UI


Semantic 是一個(gè)開發(fā)框架,可以使用人性化的 HTML 幫助創(chuàng)建漂亮的響應(yīng)式布局。Semantic UI 旨在使網(wǎng)站構(gòu)建過程更加語義化。核心特征是利用自然語言原理使代碼更易于閱讀,更容易理解。

iShot2021-05-31 18.36.54.png

4.Pure

Pure 非常輕量級(jí),經(jīng)過壓縮后不過 3.8KB。這是一個(gè)特別為移動(dòng)端考慮的框架,為了壓縮大小,每一行代碼都經(jīng)過仔細(xì)考量。當(dāng)然如果你不使用框架給出的全部模塊,體量還可以更小。

iShot2021-05-31 18.37.30.png

5.Skeleton

Skeleton 如其名字,非常小巧,設(shè)計(jì)簡(jiǎn)約,麻雀雖小五臟俱全。網(wǎng)格系統(tǒng),文本,表單,按鈕,列表,表格,媒體查詢等功能面面俱到。非常適合快速創(chuàng)建簡(jiǎn)約網(wǎng)站的需求。


iShot2021-05-31 18.38.17.png


快速搭建

為客戶節(jié)省時(shí)間成本, 并滿足客戶快速建站的需求,開發(fā)過程中 使用到css模塊化,html也應(yīng)簡(jiǎn)潔實(shí)用。

手寫源生 CSS

在我們最初學(xué)習(xí)寫頁面的時(shí)候,大家都學(xué)過怎么去寫 css,也就以下幾種情況:

  • 行內(nèi)樣式,即直接在 html 中的 style 屬性里編寫 css 代碼。
  • 內(nèi)嵌樣式,即在 html h 中的 style 標(biāo)簽內(nèi)編寫 class,提供給當(dāng)前頁面使用。
  • 導(dǎo)入樣式,即在內(nèi)聯(lián)樣式中 通過 @import 方法,導(dǎo)入其他樣式,提供給當(dāng)前頁面使用。
  • 外部樣式,即使用 html 中的 link 標(biāo)簽,加載樣式,提供給當(dāng)前頁面使用。

我們?cè)诓粩嗝髦?,逐漸形成了以編寫內(nèi)嵌樣式和外部樣式為主要的編寫習(xí)慣。

讀到這里大家肯定有所疑問,為什么不建議使用行內(nèi)樣式?

使用行內(nèi)樣式的缺點(diǎn)
  • 樣式不能復(fù)用。
  • 樣式權(quán)重太高,樣式不好覆蓋。
  • 表現(xiàn)層與結(jié)構(gòu)層沒有分離。
  • 不能進(jìn)行緩存,影響加載效率。

然后我們繼續(xù)剖析一下,為什么不建議使用導(dǎo)入樣式?

經(jīng)測(cè)試,在 css 中使用 @import 會(huì)有以下兩種情況:

1、在 IE6-8 下,@import 聲明指向的樣式表并不會(huì)與頁面其他資源并發(fā)加載,而是等頁面所有資源加載完成后才開始下載。

2、如果在 link 標(biāo)簽中去 @import 其他 css,頁面會(huì)等到所有資源加載完成后,才開始解析 link 標(biāo)簽中 @import 的 css。

使用導(dǎo)入樣式的缺點(diǎn) - 導(dǎo)入樣式,只能放在 style 標(biāo)簽的第一行,放其他行則會(huì)無效。 - @import 聲明的樣式表不能充分利用瀏覽器并發(fā)請(qǐng)求資源的行為,其加載行為往往會(huì)延后觸發(fā)或被其他資源加載掛起。 - 由于 @import 樣式表的延后加載,可能會(huì)導(dǎo)致頁面樣式閃爍。

使用預(yù)處理器 Sass/Less

隨著時(shí)間的不斷發(fā)展,我們逐漸發(fā)現(xiàn),編寫源生的 css 其實(shí)并不友好,例如:源生的 css 不支持變量,不支持嵌套,不支持父選擇器等等,這些種種問題,催生出了像 sass/less 這樣的預(yù)處理器。

預(yù)處理器主要是強(qiáng)化了 css 的語法,彌補(bǔ)了上文說了這些問題,但本質(zhì)上,打包出來的結(jié)果和源生的 css 都是一樣的,只是對(duì)開發(fā)者友好,寫起來更順滑。

后處理器 PostCSS

隨著前端工程化的不斷發(fā)展,越來越多的工具被前端大佬們開發(fā)出來,愿景是把所有的重復(fù)性的工作都交給機(jī)器去做,在 css 領(lǐng)域就產(chǎn)生了 postcss。

postcss 可以稱作為 css 界的 babel,它的實(shí)現(xiàn)原理是通過 ast 去分析我們的 css 代碼,然后將分析的結(jié)果進(jìn)行處理,從而衍生出了許多種處理 css 的使用場(chǎng)景。

常用的 postcss 使用場(chǎng)景有:

  • 配合 stylelint 校驗(yàn) css 語法
  • 自動(dòng)增加瀏覽器前綴 autoprefixer
  • 編譯 css next 的語法

更多 postcss 使用場(chǎng)景

CSS 模塊化迅速發(fā)展

隨著 react、vue 等基于模塊化的框架的普及使用,我們編寫源生 css 的機(jī)會(huì)也越來越少。我們常常將頁面拆分成許多個(gè)小組件,然后像搭積木一樣將多個(gè)小組件組成最終呈現(xiàn)的頁面。

但是我們知道,css 是根據(jù)類名去匹配元素的,如果有兩個(gè)組件使用了一個(gè)相同的類名,后者就會(huì)把前者的樣式給覆蓋掉,看來解決樣式命名的沖突是個(gè)大問題。

為了解決這個(gè)問題,產(chǎn)生出了 CSS 模塊化的概念。

CSS 模塊化定義

  • 你是否為 class 命名而感到苦惱?
  • 你是否有怕跟別人使用同樣 class 名而感到擔(dān)憂?
  • 你是否因?qū)蛹?jí)結(jié)構(gòu)不清晰而感到煩躁?
  • 你是否因代碼難以復(fù)用而感到不爽?
  • 你是否因?yàn)?common.css 的龐大而感到恐懼?

你如果遇到如上問題,那么就很有必要使用 css 模塊化。

CSS 模塊化的實(shí)現(xiàn)方式

BEM 命名規(guī)范

BEM 的意思就是塊(block)、元素(element)、修飾符(modifier)。是由 Yandex 團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法讓你的 css 類對(duì)其他開發(fā)者來說更加透明而且更有意義。

BEM 的命名規(guī)范如下:

/* 塊即是通常所說的 Web 應(yīng)用開發(fā)中的組件或模塊。每個(gè)塊在邏輯上和功能上都是相互獨(dú)立的。 */ .block { } /* 元素是塊中的組成部分。元素不能離開塊來使用。BEM 不推薦在元素中嵌套其他元素。 */ .block__element { } /* 修飾符用來定義塊或元素的外觀和行為。同樣的塊在應(yīng)用不同的修飾符之后,會(huì)有不同的外觀 */ .block--modifier { }

通過 bem 的命名方式,可以讓我們的 css 代碼層次結(jié)構(gòu)清晰,通過嚴(yán)格的命名也可以解決命名沖突的問題,但也不能完全避免,畢竟只是一個(gè)命名約束,不按規(guī)范寫照樣能運(yùn)行。

CSS Modules

CSS Modules 指的是我們像 import js 一樣去引入我們的 css 代碼,代碼中的每一個(gè)類名都是引入對(duì)象的一個(gè)屬性,通過這種方式,即可在使用時(shí)明確指定所引用的 css 樣式。

并且 CSS Modules 在打包的時(shí)候會(huì)自動(dòng)將類名轉(zhuǎn)換成 hash 值,完全杜絕 css 類名沖突的問題。

使用方式如下:

1、定義 css 文件。

.className { color: green; } /* 編寫全局樣式 */ :global(.className) { color: red; } /* 樣式復(fù)用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }

2、在 js 模塊中導(dǎo)入 css 文件。

import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 

3、配置 css-loader 打包。

CSS Modules 不能直接使用,而是需要進(jìn)行打包,一般通過配置 css-loader 中的 modules 屬性即可完成 css modules 的配置。

// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use:{ loader: 'css-loader', options: { modules: { // 自定義 hash 名稱  localIdentName: '[path][name]__[local]--[hash:base64:5]', } } } ] } }; 

4、最終打包出來的 css 類名就是由一長(zhǎng)串 hash 值生成。

._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }

CSS In JS

CSS in JS,意思就是使用 js 語言寫 css,完全不需要些單獨(dú)的 css 文件,所有的 css 代碼全部放在組件內(nèi)部,以實(shí)現(xiàn) css 的模塊化。

CSS in JS 其實(shí)是一種編寫思想,目前已經(jīng)有超過 40 多種方案的實(shí)現(xiàn),最出名的是 styled-components。

使用方式如下:

import React from "react"; import styled from "styled-components"; // 創(chuàng)建一個(gè)帶樣式的 h1 標(biāo)簽 const Title = styled.h1`  font-size: 1.5em;  text-align: center;  color: palevioletred; `; // 創(chuàng)建一個(gè)帶樣式的 section 標(biāo)簽 const Wrapper = styled.section`  padding: 4em;  background: papayawhip; `; // 通過屬性動(dòng)態(tài)定義樣式 const Button = styled.button`  background: ${props => (props.primary ? "palevioletred" : "white")};  color: ${props => (props.primary ? "white" : "palevioletred")};   font-size: 1em;  margin: 1em;  padding: 0.25em 1em;  border: 2px solid palevioletred;  border-radius: 3px; `; // 樣式復(fù)用 const TomatoButton = styled(Button)`  color: tomato;  border-color: tomato; `; <Wrapper> <Title>Hello World, this is my first styled component!</Title> <Button primary>Primary</Button> </Wrapper>; 

可以看到,我們直接在 js 中編寫 css,案例中在定義源生 html 時(shí)就創(chuàng)建好了樣式,在使用的時(shí)候就可以渲染出帶樣式的組件了。

除此之外,還有其他比較出名的庫:

  • emotion
  • radium
  • glamorous

總結(jié)

最后放一張總結(jié)好的圖。




v2-0c8a8007eae08838730306aa8e03c677_1440w.jpg


下一篇我們講一下主流js框架 與js開發(fā)


藍(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.sillybuy.com )是一家專注而深入的界面設(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ù)


Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。

Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架,用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。

用戶故事——UI設(shè)計(jì)的基礎(chǔ)

藍(lán)藍(lán)設(shè)計(jì)的小編

這篇文章很好,提供了一種“以用戶為中心”把自己和項(xiàng)目組成員隨時(shí)假定為一個(gè)用戶的身份,去思考,提出一系列問題,把這些問題編號(hào),去一一解決,注重用戶體驗(yàn),以此為基本框架,嚴(yán)格遵守,一旦設(shè)立不增加臨時(shí)的多余的功能,不把沒有用戶故事的界面元素放在界面上,保證了精簡(jiǎn)的內(nèi)容圍繞確立的框架中,井井有條。這篇文章值得看十遍。

讓數(shù)據(jù)更美:B端圖表視覺設(shè)計(jì)思考

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

隨著大數(shù)據(jù)的興起,數(shù)據(jù)價(jià)值的不斷挖掘,圖表作為數(shù)據(jù)呈現(xiàn)與分析的有效手段,正扮演著越來越重要的角色。我們?cè)谶M(jìn)行B端平臺(tái)設(shè)計(jì)時(shí)也在思考:如何讓圖表清晰的傳達(dá)信息,同時(shí)帶來美觀的視覺感受。

 

為了達(dá)到清晰傳達(dá)和視覺美觀的目標(biāo),我們結(jié)合實(shí)際項(xiàng)目,進(jìn)行大量探索及思考,梳理總結(jié)了一套適用于B端后臺(tái)類產(chǎn)品的圖表設(shè)計(jì)思路及方法,涵蓋了曲線圖、柱狀圖、餅圖、雷達(dá)圖、漏斗圖等各類常用圖表類型。

 



圖表視覺層級(jí)

 

圖表能夠承載大量數(shù)據(jù)信息,同時(shí)視覺元素較多,如果只是憑借設(shè)計(jì)師的審美喜好進(jìn)行視覺設(shè)計(jì),沒有整體信息讀取考量,可能會(huì)導(dǎo)致重要信息未能凸顯,降低用戶讀取效率。

 

 

為清晰傳達(dá)信息,進(jìn)一步提升讀取效率,我們采用元素重要程度與視覺強(qiáng)度相綁定的方法。依據(jù)元素重要程度,將圖表元素分為三類,分別為“底層元素”、“中層元素”和“頂層元素”,并依據(jù)不同視覺強(qiáng)度分別設(shè)計(jì)三類元素。底層元素最弱,頂層元素最強(qiáng)。通過這種方法,梳理圖表元素的前后關(guān)系,能夠清晰把握元素視覺層次,保證信息傳遞效率。

 

 

| 底層元素設(shè)計(jì)

 

在各類圖表中,我們把輔助說明數(shù)據(jù)的軸線、刻度等定義為底層元素。為了減少視覺干擾,最大程度突出主圖形,底層元素全部使用淺灰色進(jìn)行設(shè)計(jì)。我們發(fā)現(xiàn),當(dāng)元素與背景顏色的明度對(duì)比在1.2:1時(shí),人眼較難看到元素;當(dāng)對(duì)比度在2.0:1時(shí),視覺強(qiáng)度過強(qiáng),易吸引用戶注意力。通過元素視覺強(qiáng)度的調(diào)研及視覺嘗試,最終確定元素與背景對(duì)比度在1.6:1左右,視覺強(qiáng)度偏弱但人眼能夠看清的程度。以保證元素視覺不突兀,只在需要查看時(shí)可以被發(fā)現(xiàn)。


| 中層元素設(shè)計(jì)


中層元素的內(nèi)容包括數(shù)據(jù)圖形、數(shù)據(jù)線段等承載主要數(shù)據(jù)信息的元素,是圖表中表達(dá)數(shù)據(jù)的關(guān)鍵元素。與底層元素相比,中層元素采用更低明度與更高飽和度的數(shù)據(jù)色來表現(xiàn),使元素從頁面中凸顯出來,保證可讀性。同時(shí)在樣式上適當(dāng)加入漸變、描邊等樣式,豐富視覺層次,帶來美觀的視覺感受。

 

 

| 頂層元素設(shè)計(jì)

 

我們把頂層元素定義為圖表高亮信息,內(nèi)容包括懸停樣式、懸停后的詳細(xì)數(shù)據(jù)說明等。在設(shè)計(jì)上為保證視覺樣式突出,使用深灰色、強(qiáng)調(diào)色等強(qiáng)對(duì)比度樣式,并輔以動(dòng)畫、投影等手法保證明顯的視覺強(qiáng)調(diào)效果,保證頂層信息最有效的傳達(dá)給用戶。

 

| 最終效果

 

通過層級(jí)梳理,并綁定元素重要程度和視覺強(qiáng)度的方法,設(shè)計(jì)后圖表主次信息均按重要程度進(jìn)行對(duì)應(yīng)視覺強(qiáng)度的展示,讓用戶能夠在第一時(shí)間接收到最重要的信息,提升信息讀取效率。



圖表排版設(shè)計(jì)


  

圖表排版是指各元素在圖表中的尺寸及布局等,對(duì)于B端后臺(tái)類產(chǎn)品來說,不同排版對(duì)用戶使用體驗(yàn)造成較大影響。如何建立一套合理的規(guī)范保證用戶的使用體驗(yàn)?我們經(jīng)過大量討論推敲,梳理出一套針對(duì)B端后臺(tái)類產(chǎn)品的排版規(guī)則,力求保證用戶圖表的使用體驗(yàn)。

 

| 圖表尺寸

 

圖表尺寸指圖表整體長(zhǎng)寬高。在項(xiàng)目中我們發(fā)現(xiàn)不同尺寸的圖表對(duì)數(shù)據(jù)展現(xiàn)效果影響巨大,例如巨量數(shù)據(jù)的圖表擠在名片大小的區(qū)域例顯示,這使得信息讀取的效率大打折扣。為此我們收集并提取出“全貌概覽”、“多角度環(huán)視”、“詳情分析”三類典型場(chǎng)景,并制定了“迷你圖”、“中號(hào)圖表”、“大號(hào)圖表”三類尺寸,針對(duì)不同尺寸優(yōu)化圖表的信息展示密度,以達(dá)到高效讀取信息的目的。

 

“迷你圖”尺寸最小,舍棄了Y軸等不必要信息,利用小面積展示最關(guān)鍵的圖表信息,并控制數(shù)據(jù)密度,保證信息高效讀取。


“中號(hào)圖表”尺寸受限,限制坐標(biāo)軸刻度數(shù)量和數(shù)據(jù)的密度,例如曲線圖數(shù)據(jù)點(diǎn)不高于每4像素1個(gè)數(shù)據(jù)點(diǎn),Y軸坐標(biāo)刻度不超過5個(gè),以確保信息密度不過載,這類圖表尺寸通常用在針對(duì)某大類內(nèi)容進(jìn)行多方面檢視時(shí)。


“大號(hào)圖表”尺寸最大,不限制數(shù)據(jù)信息密度,給予最全最詳細(xì)的展示,這類尺寸通常用在數(shù)據(jù)詳情頁等詳細(xì)分析場(chǎng)景中。

 

最后考慮到多圖表混合排列時(shí),餅圖、地圖等大面積填色圖表,相較折線圖等描邊型圖表,視覺感受更加膨脹。我們縮小了填色類圖表的實(shí)際高度,保證多種圖表混合排列時(shí),視覺感受的均衡。

 

| 坐標(biāo)軸

 

坐標(biāo)軸在圖表中出現(xiàn)的頻率較高,那么坐標(biāo)軸常見的設(shè)計(jì)問題有哪些呢?


第一是橫縱坐標(biāo)軸的刻度出現(xiàn)過密情況。

如果坐標(biāo)軸所承載的是連續(xù)數(shù)據(jù)(連續(xù)數(shù)據(jù)指可量化的,連續(xù)不斷的,在區(qū)間內(nèi)可任意取值的數(shù)據(jù),如時(shí)間、金額、人數(shù)等),設(shè)計(jì)師可自行增減刻度數(shù)量以保證視覺舒適度。如果承載是離散數(shù)據(jù)(離散數(shù)據(jù)指不可量化的,無關(guān)聯(lián)的,不可在區(qū)間內(nèi)任意取值的數(shù)據(jù),如分類、軟件版本、省份等),可采取增加坐標(biāo)軸縮放功能以解決.


第二個(gè)常見問題是刻度的說明文字過長(zhǎng)。


如果是X軸(橫軸)文字過長(zhǎng),除了在可控范圍內(nèi)減少刻度,還可采取文字傾斜45°~90°的辦法(如文字全部為中文,可用豎排代替傾斜90°),緩解信息過密看不清的情況。


如果是Y軸(縱軸)文字過長(zhǎng),需聯(lián)合研發(fā)一起調(diào)整數(shù)據(jù)的單位,比如把“元”調(diào)整為“百萬元”。


如果不能調(diào)整,那就要根據(jù)所使用的圖表庫有針對(duì)性調(diào)整。例如常用的Echarts圖表、D3圖表等開源圖表庫,需要提前預(yù)估刻度文字長(zhǎng)度并預(yù)留出來,否則刻度文字可能會(huì)被頁面裁掉而不能完全顯示。如你是用的是AntV等可自適應(yīng)的圖表庫,則不必提前處理,圖表庫會(huì)自動(dòng)按刻度長(zhǎng)度進(jìn)行整體調(diào)整。


| 圖例

 

圖例作為圖表中不可或缺的部分,在各類圖表庫中位置不盡相同,由于不同圖表樣式差異很大,圖例的位置需整體考慮并適當(dāng)布局?jǐn)[放,但在同一產(chǎn)品或頁面內(nèi),過于隨意的擺放圖例,會(huì)導(dǎo)致頁面統(tǒng)一性較差,同時(shí)增加用戶的瀏覽成本。我們團(tuán)隊(duì)所負(fù)責(zé)的B端商業(yè)產(chǎn)品矩陣,作為面向用戶的產(chǎn)品集合,產(chǎn)品間聯(lián)系非常緊密。過于靈活隨意的圖例擺放不利于用戶對(duì)于圖表的瀏覽。為解決此問題,我們基于業(yè)務(wù)特點(diǎn),針對(duì)B端商業(yè)產(chǎn)品矩陣制定了圖例布局指導(dǎo)原則。

 

我們以提升屏幕信息密度為目標(biāo),分析不同場(chǎng)景的頁面排布,制定了頂部和右側(cè)兩種較為寬松的指導(dǎo)原則,供設(shè)計(jì)師在沒有明確的更優(yōu)方案時(shí)選用。


當(dāng)圖表是左右兩端對(duì)齊的類型,例如折線圖、柱狀圖時(shí),建議將圖例放置在圖表頂部。這樣能結(jié)合標(biāo)題等其他元素進(jìn)行統(tǒng)一排布,減少占用空間。當(dāng)圖表本身左右都有空余空間時(shí),例如餅圖,建議將圖例放置于圖表的右側(cè)。也能夠節(jié)省頁面的空間。



數(shù)據(jù)色板設(shè)計(jì)


 

色板作為常見的數(shù)據(jù)表達(dá)手段,能夠利用不同顏色明確體現(xiàn)分類信息、數(shù)值高度、狀態(tài)信息等。但目前市面上鮮有專業(yè)用途圖表的配色工具。我們經(jīng)過大量探索嘗試,梳理總結(jié)出圖表色彩的兩個(gè)關(guān)鍵維度:辨識(shí)度與統(tǒng)一性。既需要顏色間突出強(qiáng)烈可清晰辨別,又需要顏色整體能形成統(tǒng)一風(fēng)格,以達(dá)到清晰傳遞和美觀的目標(biāo)。如何平衡辨識(shí)度與統(tǒng)一性,是我們遇到的難題。

 

| 辨識(shí)度

 

辨識(shí)度在圖表中有兩方面:顏色與頁面底色的辨識(shí)度,各顏色之間的辨識(shí)度。對(duì)于第一種,我們采用控制顏色的明亮程度來確保色彩辨識(shí)度,尤其對(duì)于黃色、青色等本身較亮的顏色,降低顏色的明度,確保在淺色背景下顏色可辨識(shí)。

 

對(duì)于第二種也就是各顏色之間的辨識(shí)度,通過實(shí)驗(yàn)發(fā)現(xiàn)單純的顏色色相變化,例如紅色與橙色的區(qū)分,人眼不容易分辨。所以采用了色相變化+明度變化的方法,既深紅色與亮橙色,深藍(lán)色與亮紫色等,這樣用戶能在第一眼就明確分辨,保證顏色間的辨識(shí)度。最終把顏色映射到色彩空間的三維坐標(biāo)中,運(yùn)用歐幾里得距離公式測(cè)算顏色間的距離長(zhǎng)短,來衡量各顏色間色差數(shù)值。顏色間距離越遠(yuǎn)代表色差越大,利用數(shù)據(jù)輔助衡量辨識(shí)效果。

 

| 統(tǒng)一性

 

色彩統(tǒng)一性的作用在于確保圖表整體風(fēng)格一致,色彩搭配舒適,從而帶來美觀、統(tǒng)一的視覺感受。為達(dá)目的,我們首先提煉商業(yè)產(chǎn)品設(shè)計(jì)風(fēng)格為明亮、強(qiáng)對(duì)比,其次把設(shè)計(jì)風(fēng)格轉(zhuǎn)化為色彩數(shù)值。經(jīng)過實(shí)驗(yàn),把顏色明度限制在50%-70%,把飽和度限制在75%-85%,并在區(qū)間內(nèi)不斷波動(dòng)。這樣既保證了色彩視覺感受的統(tǒng)一,各顏色間又能夠有清晰的辨識(shí)度。

 

| 顏色量化與工具

 

量化顏色,將色彩轉(zhuǎn)化為數(shù)值,利用數(shù)值來驗(yàn)證設(shè)計(jì)師的「感覺」,能夠保證方案合理性,保證設(shè)計(jì)質(zhì)量。但通過嘗試,我們常用的色彩模式均不能科學(xué)合理的量化顏色。通過查閱大量資料,我們最終決定以小眾的HCL色彩模式來衡量色彩。其中H表示色相、C表示飽和度、L表示明度。HCL區(qū)別于傳統(tǒng)的RGB或HSB模式,它能夠?qū)⑷搜蹖?duì)顏色的感知精確的量化為數(shù)值,例如黃色相比藍(lán)色明度更高,都能如實(shí)的反饋到數(shù)值上。也由于此特性,HCL模式在誕生距今不到20年間,已被一些先鋒設(shè)計(jì)師用于數(shù)據(jù)可視化的呈現(xiàn)中。

 

但是HCL作為小眾色彩模式,目前設(shè)計(jì)軟件鮮有支持,造成了HCL色彩不直觀、不方便調(diào)色等的問題。為解決此問題,我們已初步完成智能配色程序,只需輸入品牌色,就能自動(dòng)生成圖表色版,并在風(fēng)格上與品牌色匹配,達(dá)到整體色彩的統(tǒng)一。我們也將一套調(diào)配好的色板及HCL實(shí)用小工具附在文末,幫助大家直觀的查看和使用HCL模式顏色。 



結(jié)語


 

數(shù)據(jù)價(jià)值就像不為人知的寶藏,隱藏在一條條枯燥晦澀的數(shù)據(jù)背后。而圖表則是開啟寶藏的鑰匙,是發(fā)掘數(shù)據(jù)價(jià)值的強(qiáng)有力武器。通過對(duì)圖表的不斷探索優(yōu)化,我們希望能夠最大化數(shù)據(jù)的價(jià)值。通過圖表,讓數(shù)據(jù)最直觀的展現(xiàn);通過圖表,讓其背后的規(guī)律浮出水面被人探知;通過圖表,讓B端不再有難懂的數(shù)據(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



文章來源:站酷  作者:百度MEUX

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(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.sillybuy.com )是一家專注而深入的界面設(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è)人資料

存檔