一、引言

中國互聯(lián)網(wǎng)公司的迅速發(fā)展正在推動(dòng)著整個(gè)軟件行業(yè)的審美革命，在C端產(chǎn)品市場逐漸飽和的情況下，互聯(lián)網(wǎng)大廠正在將資本逐步轉(zhuǎn)移到B端市場的廣闊藍(lán)海中?！盉端C端化“的設(shè)計(jì)理念也應(yīng)運(yùn)而生，認(rèn)為可以用C端的模式和思維來進(jìn)行B端產(chǎn)品的設(shè)計(jì)。 

二、背景

除了剛剛有說到的資本慢慢向B端市場的藍(lán)海轉(zhuǎn)移，還有一點(diǎn)就是中國互聯(lián)網(wǎng)環(huán)境的迅速發(fā)展，智能手機(jī)的大范圍普及，工作人群的年輕化，使得人們已經(jīng)熟練的掌握了各種軟件的使用，并且在快速迭代的產(chǎn)品中慢慢變得挑剔、謹(jǐn)慎。 

并且不斷優(yōu)化迭代的互聯(lián)網(wǎng)軟件產(chǎn)品也在無形中為用戶完成了底層認(rèn)知的搭建，一些功能、操作、交互邏輯已經(jīng)深入人心，用戶也已經(jīng)被教育成了"高玩"。 

所以如今一些新型B端產(chǎn)品的設(shè)計(jì)理所應(yīng)當(dāng)?shù)脑谟脩趔w驗(yàn)五要素中最貼近用戶的結(jié)構(gòu)層、框架層 和表現(xiàn)層中與一些C端產(chǎn)品在一定程度保持了一致，這種設(shè)計(jì)理念其實(shí)也很好的解決了傳統(tǒng)軟件的復(fù)雜、門檻高、難用等痛點(diǎn)，很大程度降低了用戶的認(rèn)知成本和學(xué)習(xí)成本，把高效、簡單、易用的工具帶到大家的日常工作中。 

三、對(duì)B端C化的理解

對(duì)這個(gè)概念的理解我認(rèn)為是："B端產(chǎn)品在使用體驗(yàn)和視覺感受這兩個(gè)方面和C端產(chǎn)品接近"。這是我們設(shè)計(jì)師需要特別關(guān)注的，傳統(tǒng)的思維中，大多數(shù)設(shè)計(jì)師會(huì)認(rèn)為B端是給公司內(nèi)部人員或者商家使用的，只是一個(gè)管理系統(tǒng)，并不需要太過于精細(xì)，至于體驗(yàn)也是停留在“能用就行”的程度。但是在我看來不管是C端還是B端，其實(shí)它的使用對(duì)象都是“人”，應(yīng)該要遵循人們對(duì)于事物的認(rèn)知和一系列復(fù)雜的人體工程學(xué)操作習(xí)慣。兩者都需要關(guān)注用戶在使用時(shí)的體驗(yàn)感受，順暢的使用流程、清晰的信息展示和高效的行為效率，以及有效的引導(dǎo)都能夠快速的幫助用戶完成目標(biāo)任務(wù)。無論是C端設(shè)計(jì)還是B端設(shè)計(jì)，滿足這些條件無疑可以給用戶帶來更好的體驗(yàn)。 

但是也不能以偏概全的認(rèn)為C端的設(shè)計(jì)思維可以完全復(fù)用過來。B端產(chǎn)品的場景其實(shí)比C端產(chǎn)品還是要復(fù)雜的多，應(yīng)該說是各有各的側(cè)重點(diǎn)，思維和設(shè)計(jì)模式上不能完全照搬，下面我就先說說它們各自的不同處，再舉例帶你看看B端產(chǎn)品在哪些方面可以向C端產(chǎn)品借鑒學(xué)習(xí)。 

四、B端C端的不同

1.使用者不同

B端使用者多是同一個(gè)組織集體，以群體為單位進(jìn)行協(xié)同。比如：老板、部門主管、員工或商戶。而C端使用者相對(duì)比較單一，目標(biāo)用戶群體即是主要使用人群，使用目標(biāo)、偏好、個(gè)性比較明確。 

2.業(yè)務(wù)不同：

B端業(yè)務(wù)大多數(shù)會(huì)存在多重維度、場景，使用場景跟業(yè)務(wù)緊密相關(guān)，同一個(gè)系統(tǒng)不同角色使用時(shí)的業(yè)務(wù)處理和所關(guān)注的數(shù)據(jù)信息，側(cè)重點(diǎn)會(huì)有很大的不同，需要全局考慮。不同角色使用產(chǎn)品的流程差異大，需要不同業(yè)務(wù)上更專業(yè)的解決方案。而C端業(yè)務(wù)一般維度比較單一，業(yè)務(wù)邏輯相對(duì)固定，任務(wù)路徑和展示內(nèi)容比較單一。 

 3.價(jià)值主張不同：

B端注重效率、成本、管控、數(shù)據(jù)分析等。追求產(chǎn)品的穩(wěn)定性、業(yè)務(wù)的增長性，保證產(chǎn)品性能和技術(shù)上的安全性。而C端注重用戶的體驗(yàn)、使用簡單、有樂趣。 

4.產(chǎn)品思維不同：

B端產(chǎn)品多數(shù)基于服務(wù)思維，工具化思維，更加理性；更多的是幫助B端用戶提高效率，完成業(yè)務(wù)目標(biāo)。而C端多數(shù)為產(chǎn)品化思維，游戲化思維，更感性，更多的是娛樂和情感的滿足。 

5.產(chǎn)品形態(tài)不同：

B端產(chǎn)品注重業(yè)務(wù)的梳理，多數(shù)會(huì)用到圖表、表格、模型，多數(shù)產(chǎn)品形態(tài)偏向更垂直行業(yè)或更專業(yè)的面板形態(tài)。而C端更注重用戶的感受，會(huì)用到很多夸張的動(dòng)效，炫彩的顏色。 

五、B端C化在產(chǎn)品中具體的表現(xiàn)

1.結(jié)構(gòu)層 

結(jié)構(gòu)層確定各個(gè)將要呈現(xiàn)給用戶的選項(xiàng)的模式和順序。結(jié)構(gòu)層是用來設(shè)計(jì)用戶如何到達(dá)某個(gè)頁面，并且要考慮他們完成事情之后能夠去哪里。 

具體在B端產(chǎn)品的表單交付場景下可以體現(xiàn)出，以前的B端表單往往過于冗長，借鑒C端一些注冊場景的設(shè)計(jì)，把表單拆分成3步內(nèi)的行為步驟，減少用戶的疲憊感提升體驗(yàn)。 

2.框架層

產(chǎn)品的框架層包括：按鈕、控件、照片、文本區(qū)域的位置。框架層是用于優(yōu)化頁面設(shè)計(jì)布局的。 

具體在B端產(chǎn)品的列表頁可以體現(xiàn)出，列表頁中整體的按鈕、文本區(qū)域的位置、搜索和篩選的布局設(shè)計(jì)其實(shí)與C端產(chǎn)品中的商品詳情頁是類似的，遵循用戶的閱讀順序和視覺焦點(diǎn)來進(jìn)行設(shè)計(jì)。 

3.表現(xiàn)層

視覺、聽覺、（觸覺）的體驗(yàn)設(shè)計(jì)。多體現(xiàn)在一些情感化的設(shè)計(jì)也被運(yùn)用在了B端產(chǎn)品中。 

六、B端C化未來的設(shè)計(jì)方向

反觀現(xiàn)在C端產(chǎn)品的一些設(shè)計(jì)風(fēng)格和流行趨勢，有哪些可以運(yùn)用在B端產(chǎn)品的設(shè)計(jì)中呢？ 

1.3D化

B端因?yàn)閷?duì)數(shù)據(jù)的展示有較強(qiáng)的需求，用戶在使用過程中提高效率的判斷緯度也包括信息數(shù)據(jù)的獲取效率，而3D的視覺在數(shù)據(jù)可視化層面有著天然的優(yōu)勢，可以幫助用戶更快速的理解數(shù)據(jù)維度所表達(dá)的核心價(jià)值。近年來網(wǎng)速等硬件設(shè)施的升級(jí)也為3D化視覺帶來可落地的基礎(chǔ)，設(shè)計(jì)師也嘗試在產(chǎn)品設(shè)計(jì)中融入更多的3D化元素。 

2.情感化

人們對(duì)傳統(tǒng)B端產(chǎn)品的印象往往是覺得它們比較枯燥、呆板的，如今一些新型的B端產(chǎn)品的設(shè)計(jì)理念也試圖在拋開用戶對(duì)于產(chǎn)品的這種既定印象，所以很多產(chǎn)品在往一些娛樂化、IP化的方向嘗試，并且都達(dá)到了一些比較好的效果，未來在這方面的思考和嘗試只會(huì)越來越多。 

3.個(gè)性化

B端產(chǎn)品的同質(zhì)化嚴(yán)重，所以B端產(chǎn)品也需要從一些產(chǎn)品定位去定制更加富有個(gè)性的品牌基因，可以讓用戶產(chǎn)生對(duì)產(chǎn)品的感情，達(dá)到從同類產(chǎn)品中能夠脫穎而出的目標(biāo)。 

七、總結(jié)：

不管是B端還是C端，目的都是為了解決業(yè)務(wù)場景中遇到的問題，使用對(duì)象都是人，都應(yīng)該站在“人性”的角度考慮問題，有人說B端產(chǎn)品一般都不注重設(shè)計(jì)，C端產(chǎn)品的設(shè)計(jì)更能滿足設(shè)計(jì)師對(duì)美的追求，我只能說它們的側(cè)重點(diǎn)不同，C端更注重視覺感受，要做到在視覺表現(xiàn)的感性層面吸引用戶，而B端其實(shí)更為復(fù)雜，需要做到底層的強(qiáng)大數(shù)據(jù)處理能力，產(chǎn)品的專業(yè)性包括交互、視覺的吸引力，這樣才能從眾多產(chǎn)品中得到用戶的認(rèn)可并脫穎而出。設(shè)計(jì)師還需要不斷打磨細(xì)節(jié)和優(yōu)化體驗(yàn)來吸引和留住用戶。 

所以說“B端C端化”也只是在某些方面通用，但核心側(cè)重點(diǎn)不同，不能以偏概全、一概而論，但可以借鑒與參考，B端產(chǎn)品也可以做的很精彩。 

文章來源：優(yōu)設(shè)網(wǎng)    作者：酷家樂UED

前言：為什么要看懂B端基礎(chǔ)邏輯

相信很多設(shè)計(jì)師同學(xué)都接觸過B端產(chǎn)品，對(duì)于很多設(shè)計(jì)師而言，遇上B端產(chǎn)品是一件令人又愛又恨的事情，愛是因?yàn)槟壳笆袌錾洗蠖鄶?shù)的公司主要經(jīng)營的都是B端系統(tǒng)，B端系統(tǒng)相對(duì)于C端來說UI界面顯得并沒有那么的重要，所以設(shè)計(jì)師的責(zé)任也相對(duì)沒有那么重，而恨是因?yàn)槟壳按蠖鄶?shù)B端系統(tǒng)頁面都是由前端UI框架搭建的，前端同學(xué)很多時(shí)候直接套用組件即可，所以UI設(shè)計(jì)師對(duì)于整個(gè)系統(tǒng)來講也顯得可有可無，導(dǎo)致設(shè)計(jì)師話語權(quán)也特別的低，甚至有些做B端系統(tǒng)的公司壓根不用UI設(shè)計(jì)師也能完成項(xiàng)目開發(fā)。

但是作為交互設(shè)計(jì)師(小公司一般是產(chǎn)品經(jīng)理)在B端卻特別吃香，并且擁有主要的話語權(quán)，因?yàn)槲覀冎鲗?dǎo)這整個(gè)系統(tǒng)的基礎(chǔ)邏輯與業(yè)務(wù)邏輯設(shè)計(jì)，所以無論是前端還是后端同學(xué)都需要根據(jù)我們的設(shè)計(jì)進(jìn)行開發(fā)，最終完成整個(gè)系統(tǒng)。

因此，今天這篇文章并不是告訴大家有哪些前端UI框架或后臺(tái)組件等..（相信這些大家也看得太多了，工作中都是套框架，能用得上的沒幾個(gè)），而是從交互上如何去看懂B端后臺(tái)的基礎(chǔ)邏輯以及以后自己晉升成產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師時(shí)，怎樣去設(shè)計(jì)一個(gè)完整閉環(huán)的系統(tǒng)。

一、B端產(chǎn)品有哪些基礎(chǔ)邏輯

B端產(chǎn)品和C端不同，C端產(chǎn)品大多數(shù)都是針對(duì)個(gè)人用戶，設(shè)計(jì)的關(guān)系結(jié)構(gòu)相對(duì)來說比較簡單，每一個(gè)用戶擁有的權(quán)限都是一樣的，例如微信、淘寶等，我能看到的頁面你都能看得到，很少不存在權(quán)限差異問題。

而B端產(chǎn)品的用戶一般都是企業(yè)，企業(yè)用戶一般會(huì)管理著多個(gè)角色，也就是角色多元化（例如一些校園系統(tǒng)角色就分為：普通教師、級(jí)長、主任等角色），不同的角色對(duì)系統(tǒng)的需求和職能也不一樣，我們需要根據(jù)角色的需求去劃分不同的權(quán)限，讓他們互不干擾但又滿足他們的需求問題，因此B端產(chǎn)品的基礎(chǔ)邏輯比C端產(chǎn)品相對(duì)復(fù)雜。

看完上面文字的同學(xué)可能蒙了，又角色又權(quán)限的，能不能說點(diǎn)人話？

行！其實(shí)很簡單，B端系統(tǒng)無非三個(gè)邏輯（也是三個(gè)頁面）：用戶管理、角色管理以及菜單管理。（有些系統(tǒng)因?yàn)闃I(yè)務(wù)需求可能有部門管理，那么算上部門管理就四個(gè)）

二、什么是用戶、角色跟菜單

（1）什么是菜單

為什么我把菜單放到最前面跟大家講？是因?yàn)椴藛喂芾肀惹懊鎯蓚€(gè)相對(duì)簡單，而什么是菜單也特別好解釋，大家可以直接認(rèn)為系統(tǒng)左側(cè)的頁面列表就是菜單，系統(tǒng)中擁有多少個(gè)頁面那么就有多少個(gè)菜單，你的菜單越多就以為著你的權(quán)限就越多。

菜單管理的作用就是用于管理員對(duì)整個(gè)系統(tǒng)頁面的管理（管理最主要就是增刪改查），而有一些公司為了減少開發(fā)工作量會(huì)直接不要菜單管理，有多少個(gè)頁面都由代碼直接寫死，管理員不能通過頁面進(jìn)行人工配置，這樣會(huì)導(dǎo)致以后擴(kuò)展會(huì)非常麻煩，當(dāng)然了，有一些系統(tǒng)的菜單幾乎不改的話，代碼寫死也沒問題。

（2）什么是權(quán)限

在講解用戶之前我需要提前跟大家講一下什么是權(quán)限，準(zhǔn)確來講應(yīng)該是權(quán)限分為哪些？

在目前的后臺(tái)系統(tǒng)中，權(quán)限一共分為三種權(quán)限，分別是菜單權(quán)限（也就是上面介紹的）、數(shù)據(jù)權(quán)限以及操作權(quán)限。

菜單權(quán)限決定了用戶有沒有這個(gè)頁面，例如學(xué)校系統(tǒng)中，主任有看到所有教師的教學(xué)數(shù)據(jù)的界面，而教師卻沒有這個(gè)功能，那么在給主任新增賬號(hào)的時(shí)候就應(yīng)該把對(duì)應(yīng)菜單賦予進(jìn)去?？瓷先ズ軓?fù)雜，其實(shí)具體操作就是新增的時(shí)候把對(duì)應(yīng)的菜單勾選上就可以了。

數(shù)據(jù)權(quán)限則決定用戶能不能看到對(duì)應(yīng)的數(shù)據(jù)。還是學(xué)校系統(tǒng)的例子，初中部主任只能看到初中部所有教師的教學(xué)數(shù)據(jù)，而高中部主任也只能看到高中部教師的教學(xué)數(shù)據(jù)，不同用戶能看到的數(shù)據(jù)也是不同的，所以在新增的時(shí)候需要給用戶配置（一般配置就是勾選）好對(duì)應(yīng)的數(shù)據(jù)權(quán)限。

但是這里有一個(gè)問題，配置數(shù)據(jù)權(quán)限時(shí)我們?nèi)绻粋€(gè)一個(gè)人去勾選配置的話會(huì)特別的麻煩，假如初中部主任只能看到初中部的老師，那么我在給他配置賬號(hào)的時(shí)候需要一個(gè)一個(gè)的初中老師勾選上，張三、李四、王五..等等，如果人多的話可能需要勾選成百上千次，用戶體驗(yàn)就會(huì)變得特別差，因此現(xiàn)在的系統(tǒng)在配置數(shù)據(jù)權(quán)限時(shí)都是以部門為單位進(jìn)行配置，也就是說，直接選擇部門就代表著擁有整個(gè)部門的數(shù)據(jù)權(quán)限。

最后操作權(quán)限即決定了用戶有沒有對(duì)數(shù)據(jù)進(jìn)行操作（一般是增刪改查）的功能。還是上面的例子，初中部主任擁有查看教師的頁面以及數(shù)據(jù)，那么他能不能對(duì)教師們的數(shù)據(jù)進(jìn)行增刪改查或者導(dǎo)入導(dǎo)出呢？這就取決于操作權(quán)限的配置了。目前很多的后臺(tái)系統(tǒng)在配置菜單權(quán)限的時(shí)候同時(shí)需要把操作權(quán)限進(jìn)行配置（因?yàn)橹荒芟扔许撁娌拍苓M(jìn)行操作），操作權(quán)限一般就是增加、刪除、修改以及查詢，當(dāng)然如果頁面還有導(dǎo)入導(dǎo)出或者其他功能，這些也需要在操作權(quán)限中進(jìn)行配置。

（3）系統(tǒng)中的用戶

用戶其實(shí)也很容易理解，B端系統(tǒng)的用戶其實(shí)就是需要登錄進(jìn)系統(tǒng)的賬號(hào)，所以有一些系統(tǒng)的用戶管理也叫賬號(hào)管理。

因此用戶管理的作用就是對(duì)登錄進(jìn)系統(tǒng)的賬號(hào)進(jìn)行增刪改查等，當(dāng)我們需要對(duì)別人提供一個(gè)賬號(hào)時(shí)，我們就新增一個(gè)用戶的賬號(hào)密碼給他們，直到他們用完了再把他們的賬號(hào)進(jìn)行刪除。

那么問題來了，上面我們說到，不同的用戶可能有不同的需求問題，那么就意味著我們每一個(gè)用戶給要他們分配不同的菜單去做他們的事情。

例如在學(xué)校系統(tǒng)中：普通教師只負(fù)責(zé)自己班級(jí)學(xué)生的成績錄入，所以普通教師只有班級(jí)成績錄入的菜單，但是學(xué)校主任卻不一樣，他不僅僅能看到各班學(xué)生成績，還能根據(jù)各班成績進(jìn)行對(duì)比分析，年級(jí)學(xué)生排名等等..

因此在剛開始的傳統(tǒng)權(quán)限系統(tǒng)中，我們會(huì)直接把相應(yīng)的菜單權(quán)限、數(shù)據(jù)權(quán)限、操作權(quán)限賦予給用戶，每新增一個(gè)用戶我們就選擇好所有的權(quán)限都勾選上賦予給用戶，最后提供給用戶進(jìn)行操作。

然而這種操作方式有一個(gè)弊端，就是如果每新增一個(gè)用戶，系統(tǒng)管理員就需要重復(fù)進(jìn)行勾選相同的權(quán)限，那么就會(huì)耗費(fèi)大量的精力（一個(gè)用戶要配置的權(quán)限特別多，如果用這個(gè)方式操作的話新增一個(gè)用戶可能就需要花費(fèi)很長時(shí)間）。因此，為了解決這個(gè)問題，我們在用戶與權(quán)限之間建立了角色管理。

（4）角色的作用

系統(tǒng)中角色的定義其實(shí)跟生活中是一樣的，我們把固定的權(quán)限集合到一起從而形成了角色。例如，生活中UI角色就負(fù)責(zé)頁面的視覺設(shè)計(jì)，而交互設(shè)計(jì)師則負(fù)責(zé)了產(chǎn)品的邏輯或者用戶體驗(yàn)設(shè)計(jì)，這些角色擁有的權(quán)限一般很少變化，也幾乎不會(huì)進(jìn)行刪除或者修改，就好像UI設(shè)計(jì)師或者交互設(shè)計(jì)師這些角色不會(huì)一時(shí)半刻就被完全消滅一樣。

有了角色，我們可以先把對(duì)應(yīng)的權(quán)限集合賦予給角色，然后新增用戶時(shí)，再選擇用戶對(duì)應(yīng)的角色即可。

這樣做的好處是什么呢？好處就是當(dāng)我們新增用戶的時(shí)候，如果是相同角色的用戶，我們不再需要重復(fù)去大量勾選相應(yīng)的權(quán)限了，只需選擇好該用戶是那個(gè)角色就可以間接對(duì)用戶賦予權(quán)限，并且后續(xù)要對(duì)用戶進(jìn)行權(quán)限的修改也十分便捷。因此，在現(xiàn)在的后臺(tái)系統(tǒng)中，大多數(shù)都是采用權(quán)限賦予角色，然后新增用戶時(shí)再選擇用戶對(duì)應(yīng)的角色的方式。

三、整體流程

如果看完上面的知識(shí)點(diǎn)還有點(diǎn)懵的話也沒關(guān)系，這部分給大家展示在后臺(tái)系統(tǒng)中菜單管理、角色管理與用戶管理的實(shí)際應(yīng)用是怎樣的。

第一步先查看菜單管理有哪些內(nèi)容，一般情況下，一個(gè)成熟系統(tǒng)的菜單頁面幾乎是已經(jīng)固定不變的，那么也就是說菜單管理列表中所擁有的菜單都不需要怎么操作，列表中有多少數(shù)據(jù)就代表著系統(tǒng)總體有多少菜單。

第二步進(jìn)行角色管理，如果是成熟系統(tǒng)的話，角色管理的角色也早已經(jīng)分配好了，我們并不需要過多的進(jìn)行操作，但如果是剛研發(fā)完成的系統(tǒng)，那么我們就需要根據(jù)現(xiàn)實(shí)的用戶需求進(jìn)行角色的設(shè)置，具體添加角色的主要參數(shù)包括角色名稱、菜單權(quán)限、數(shù)據(jù)權(quán)限以及操作權(quán)限（其實(shí)也就是上文介紹的三種權(quán)限），其他的參數(shù)都是根據(jù)自身業(yè)務(wù)進(jìn)行添加。

最后一步就是用戶管理，配置好角色后，我們就可以根據(jù)需求進(jìn)行用戶的新增操作，例如現(xiàn)在我們需要新增一個(gè)賬號(hào)進(jìn)行登錄系統(tǒng)，那么在用戶管理頁面中點(diǎn)擊新增按鈕，隨后填寫用戶名稱與密碼，最后選擇用戶角色，點(diǎn)擊確定按鈕即可完成（因此，新增用戶的三個(gè)必要參數(shù)是用戶名、密碼以及角色，有部門的需要填寫所屬部門，其他參數(shù)根據(jù)系統(tǒng)業(yè)務(wù)進(jìn)行添加）。添加完成后你們可以試一試使用自己所填寫的用戶名密碼登錄后臺(tái)系統(tǒng)，隨后體驗(yàn)一下作為其他角色是否能完成自身需要的業(yè)務(wù)。

四、最后總結(jié)（特別重要）

用戶管理、角色管理以及菜單管理是B端系統(tǒng)最基礎(chǔ)的邏輯，也是同學(xué)們將來需要轉(zhuǎn)崗B端交互設(shè)計(jì)師或者產(chǎn)品設(shè)計(jì)師所必須掌握的知識(shí)，上面所介紹的僅僅是RBAC模型中最簡單的一種，現(xiàn)實(shí)設(shè)計(jì)中可能出現(xiàn)各種情況，因此關(guān)于這次的B端產(chǎn)品設(shè)計(jì)我想給大家?guī)c(diǎn)Tips：

    1、在現(xiàn)實(shí)開發(fā)中，后臺(tái)系統(tǒng)并不一定像我上面所說的那么完善，有些系統(tǒng)并不需要菜單管理，老板要求直接代碼寫死就好了，又或者有些系統(tǒng)就只有一個(gè)角色，那么角色管理也不需要了，這些情況都是有可能發(fā)生的，所有我們做設(shè)計(jì)的時(shí)候除了運(yùn)用自己的知識(shí)以外，更多的是工作經(jīng)驗(yàn)，知識(shí)是死的，人是活的，永遠(yuǎn)別忘了設(shè)計(jì)的本質(zhì)是解決用戶需求問題。

    2、很多時(shí)候后臺(tái)的邏輯管理會(huì)比我上面說的要復(fù)雜的多，例如一個(gè)用戶可以擁有多個(gè)角色嗎？不同角色能不能有相同的權(quán)限？如果有角色被刪除了，那么該角色關(guān)聯(lián)的所有用戶應(yīng)該怎么處理？可能你認(rèn)為這些并不是自己目前需要考慮的問題，但是除非你以后并不想晉升到更高的位置，不然這些問題以后肯定會(huì)遇到的。

    3、上面介紹的管理操作都是基于超級(jí)管理員賬號(hào)（admin）進(jìn)行操作的，如果你拿一個(gè)普通賬號(hào)的話一般是沒有對(duì)應(yīng)的菜單權(quán)限，我擔(dān)心有同學(xué)看完文章后馬上登錄自己的后臺(tái)系統(tǒng)進(jìn)行操作，接著登錄進(jìn)去找了半天都沒有找到對(duì)應(yīng)的菜單在哪里。

好了，最后希望文章能讓大家有所收獲，如果大家有不明白或者其他想法的話，歡迎大家一起探討，共勉。

文章來源：優(yōu)設(shè)網(wǎng)    作者：北沐而川

作者：餿面包
來源：站酷

進(jìn)入喜茶小程序的時(shí)候給我的感受是簡潔、時(shí)尚、極致的設(shè)計(jì)風(fēng)格，截了兩張小程序內(nèi)的兩個(gè)界面。 確實(shí)做的還挺不錯(cuò)的，為什么給人感受不一樣？接下來我們分析分析

1.版式

1.首先從下面的頁面我們能發(fā)現(xiàn)，界面的排版只有卡片左邊距留了20的安全距離，而卡片右邊安全距離為0，這樣特別的版式設(shè)計(jì)給人不對(duì)稱的感覺，這樣的設(shè)計(jì)能讓用戶記住，同時(shí)又有一點(diǎn)時(shí)尚范的感覺，很符合喜茶目標(biāo)用戶年輕人的審美。
2.同時(shí)產(chǎn)品的banner是3:2的比例，較為靠近黃金比例的尺寸。 

1.點(diǎn)單頁面，喜茶新增了新品推廣位，一些新上的產(chǎn)品都會(huì)在推廣位呈現(xiàn)，尺寸比例4:3，給人的感受像是線下海報(bào)一樣，同時(shí)第三個(gè)廣告位露出部分，讓用戶知道后面還可以左滑查看。同時(shí)推廣頁的右下角有個(gè)箭頭指引，告知用戶可點(diǎn)擊。 

2.看完這幾個(gè)頁面會(huì)發(fā)現(xiàn)，喜茶的基本上都是純直角的設(shè)計(jì)語言，推廣頁是直角、標(biāo)簽是直角、按鈕微圓角，直角的設(shè)計(jì)語言給人的感受是時(shí)尚、極致、極簡的設(shè)計(jì)感受，個(gè)人非常喜歡。 

3.但是點(diǎn)單頁面的有點(diǎn)亂，標(biāo)簽的顏色過多，不夠統(tǒng)一，圖標(biāo)的也非常的多，這樣給人的感受就會(huì)比較凌亂，盡可能少的去表現(xiàn)，這樣更加能提高用戶的效率。

1.在點(diǎn)單頁面用戶上滑，推廣位漸漸的往上消失，這樣產(chǎn)品的展示會(huì)更多，利于用戶挑選和尋找。 

2.用戶在選口味界面，發(fā)現(xiàn)每一個(gè)標(biāo)簽的內(nèi)的文字左右的安全距離一致，依次排列，具有節(jié)奏感，頁面給人感受簡潔、易操作，同時(shí)用戶可以選自己的口味，可進(jìn)行保存，下次點(diǎn)直接就可以選擇自己的口味。

在喜茶的百貨界面能清晰發(fā)現(xiàn)每一個(gè)模塊的都是不一樣的，很多產(chǎn)品的商場頁面都是一致的，而喜茶在產(chǎn)品的展示會(huì)以不一樣的形式出現(xiàn)，每一個(gè)模塊都有尺寸和排版的差異，這樣給用戶有種落錯(cuò)感，更加有設(shè)計(jì)。

2.會(huì)員頁

1.喜茶的會(huì)員頁給我眼前一亮的感覺，會(huì)員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺。 

2.會(huì)員頁用戶在切換的同時(shí)圖標(biāo)的顏色會(huì)跟著會(huì)員的顏色變化，特權(quán)的內(nèi)容也會(huì)有不一樣的變化，讓用戶有明顯的等級(jí)感知。 

3.切換到“黑卡”的時(shí)候，會(huì)發(fā)現(xiàn)會(huì)員頁的“喜”字加上了質(zhì)感。 

4.會(huì)員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產(chǎn)品的會(huì)員做了區(qū)分的同時(shí)又加深了品牌印象。

3.圖標(biāo) 

喜茶有兩種不同風(fēng)格的圖標(biāo)，一種是比較極簡，線性，差異性沒有那么強(qiáng)，而另一種則是插畫風(fēng)格的圖標(biāo)，給人感受比較有趣，更有差異，極簡則符合喜茶整體小程序的調(diào)性，而插畫又豐富了頁面的單調(diào)性。

4.動(dòng)畫 

1.喜茶頂部的banner做非常不錯(cuò)，例如跟FENDI合作的會(huì)在首屏加入視頻，用戶一進(jìn)入小程序就能看到能很好的吸引用戶的注意。 

2.用戶在左右切換banner時(shí)，文字會(huì)先出現(xiàn)然后底部的圖片漸漸出現(xiàn)，給用戶感受自然、流暢的感受，好的動(dòng)畫效果能給產(chǎn)品加分，給用戶留下好的感受。

5.字體

1.喜茶的數(shù)字字體是NeutraText-DemiAlt，每次進(jìn)去喜茶看到他們的數(shù)字字體非常有獨(dú)特性，給人的感受時(shí)尚、極致、有設(shè)計(jì)。 

2.部分界面和海報(bào)喜茶會(huì)用上方正悠宋，有點(diǎn)中國風(fēng)、古風(fēng)的韻味在里面，而且也非常有獨(dú)特的設(shè)計(jì)美感，喜茶會(huì)應(yīng)用在國風(fēng)的海報(bào)以及會(huì)員頁的“喜”字上，突出風(fēng)格化。

3.好的字體能很好的提高產(chǎn)品的品牌感和設(shè)計(jì)美感，更能傳達(dá)該品牌想傳達(dá)的東西。

6.更多界面欣賞

作者：黃小偉
來源：站酷

一、獲取原型圖

從產(chǎn)品經(jīng)理處獲取項(xiàng)目原型圖，當(dāng)獲取到原型圖后不要盲目的去進(jìn)行設(shè)計(jì)，要先分析了解整個(gè)項(xiàng)目的功能、特性、用戶群體、項(xiàng)目的定位等等，特別是對(duì)功能的疑惑處一定要找產(chǎn)品經(jīng)理溝通，只有做到對(duì)項(xiàng)目了熟于胸才能做出優(yōu)秀的設(shè)計(jì)。

二、競品分析

當(dāng)我們對(duì)項(xiàng)目的功能、特性、用戶群體、項(xiàng)目的定位都有所了解后，還是不能馬上進(jìn)入設(shè)計(jì)環(huán)節(jié)。我們需要先對(duì)市面上同類型的產(chǎn)品進(jìn)行分析和對(duì)比，包括設(shè)計(jì)風(fēng)格、配色、排版、功能樣式等等，了解其優(yōu)劣勢，做到取長補(bǔ)短，思考如何讓我們的產(chǎn)品更加的完善，這時(shí)候我們的腦海里面基本上對(duì)自己要設(shè)計(jì)的東西已經(jīng)有了一個(gè)大概的雛形。

三、設(shè)計(jì)UI界面

1、界面設(shè)計(jì)規(guī)范

這篇文章內(nèi)所有的數(shù)值均以2倍圖為例，使用1倍圖的同學(xué)請(qǐng)自行除以2。

現(xiàn)在UI設(shè)計(jì)通常使用的是全面屏的設(shè)計(jì)規(guī)范，全面屏的設(shè)計(jì)稿更加美觀，且做作品集的時(shí)候搭配全面屏樣機(jī)視覺效果也更加突出。通常只設(shè)計(jì)一套蘋果全面屏的設(shè)計(jì)稿，不需要另外設(shè)計(jì)安卓端設(shè)計(jì)稿，安卓端由安卓工程師自行適配。

界面尺寸：

界面：750px1624px

狀態(tài)欄：750x88px

導(dǎo)航欄：750x88px

菜單欄：750x98px

指示器：750x68px

左右邊距：32px或24px

*其中狀態(tài)欄和指示器不需要進(jìn)行額外的設(shè)計(jì)，是系統(tǒng)默認(rèn)控件，除顏色外不可改變。

常用圖標(biāo)尺寸：

頂部功能：48x48px

底部菜單欄（有文字）：48x48px

底部菜單欄（無文字）：64x64px

文字：

尺寸：36px、32px、28px、24px

顏色：正常（#333333）、輔助（#999999）、未輸入提示（#CCCCCC）

*利用文字尺寸對(duì)比和顏色對(duì)比可以得到不錯(cuò)的效果。也可以給文字顏色添加少量的藍(lán)色，讓顏色不那么呆板。

2、組件控件系統(tǒng)

組建控件系統(tǒng)可以讓我們的設(shè)計(jì)稿更加的規(guī)范，也便于修改，可以極大的提高我們的工作效率。

所有的圖標(biāo)都需要做成控件，方便我們切圖。然后就是會(huì)重復(fù)使用的狀態(tài)欄、導(dǎo)航欄、菜單欄、指示器、列表、彈框、按鈕等控件。

除了我們常用的控件以外，顏色、投影等特殊效果、文字大小都可以保存樣式，把項(xiàng)目的配色、特殊效果、文字尺寸都保存下來，不同的設(shè)計(jì)工具有不同的保存方式，大家可以根據(jù)自己使用的設(shè)計(jì)工具進(jìn)行設(shè)置。

3、設(shè)計(jì)風(fēng)格

我們需要讓項(xiàng)目保持一個(gè)統(tǒng)一的設(shè)計(jì)風(fēng)格，讓項(xiàng)目更加的整體、統(tǒng)一、協(xié)調(diào)。不同的風(fēng)格有不同的優(yōu)勢，選對(duì)與項(xiàng)目屬性相符的設(shè)計(jì)風(fēng)格可以讓項(xiàng)目更加的出彩。

傳統(tǒng)UI風(fēng)格：

這種風(fēng)格沒找到合適的名稱，我個(gè)人一般叫它傳統(tǒng)風(fēng)格。這種設(shè)計(jì)風(fēng)格使用分割線分割小的模塊，用背景色塊分割大的模塊，特別適合列表信息。雖然給人感覺沒有特別強(qiáng)烈的設(shè)計(jì)感，但簡單實(shí)用、樸實(shí)無華，層級(jí)劃分清晰明了。

卡片式風(fēng)格：

卡片式風(fēng)格是借用現(xiàn)實(shí)世界中卡片的特征和概念，將一個(gè)模塊或同類型元素放到一個(gè)卡片容器類，可以增加內(nèi)容的獨(dú)立性，讓模塊劃分關(guān)系變得非常的清晰，是現(xiàn)在非常常用的一種設(shè)計(jì)方式。

常用做法是采用淺灰的背景+白色卡片的方式，卡片都帶有一定的圓角，類似于將撲克牌一張張的放在桌子上，桌面是灰色背景，每一張撲克牌就是一個(gè)卡片。也不排除暗夜模式的卡片式設(shè)計(jì)，背景會(huì)更暗一些，卡片略亮。

大標(biāo)題去線段化：

在傳統(tǒng)UI風(fēng)格的基礎(chǔ)上去除背景色塊和分割線，單以間距來區(qū)分模塊和元素，對(duì)親密性的應(yīng)用有較高的要求。有時(shí)候單以間距來區(qū)分模塊和元素時(shí)，可能會(huì)導(dǎo)致模塊層級(jí)不分明，所以會(huì)使用將標(biāo)題加大的形式，讓模塊與模塊之間的區(qū)分更加明顯。因?yàn)槿コ朔指罹€，留白就更多，會(huì)顯得界面更加的干凈、清爽。

新擬態(tài)設(shè)計(jì)風(fēng)格：

新擬態(tài)是19年底在追波開始出現(xiàn)的一種設(shè)計(jì)風(fēng)格，特點(diǎn)是使用統(tǒng)一的光源做出立體的浮雕效果，元素有厚度但沒有紋理和材質(zhì)的輕擬物風(fēng)。

常規(guī)做法是假設(shè)一個(gè)統(tǒng)一的左上方光源，給元素分別添加一個(gè)左上角和右下角的投影，左上角（被光源照射的一側(cè)）投影使用亮色，右下角投影使用暗色，讓元素可以浮起來。而在按下或選中狀態(tài)時(shí)則使用兩個(gè)內(nèi)陰影，左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個(gè)顏色，所以顏色不能使用純白或純黑，否則有一側(cè)的投影就會(huì)看不見，通常是使用藍(lán)灰色或深灰色背景。

新擬態(tài)風(fēng)格視覺效果新穎、柔和，對(duì)比度低，看得久了會(huì)產(chǎn)生一定的視覺疲勞，研發(fā)成本也較高，所以現(xiàn)在更多的還是處于概念稿，實(shí)際項(xiàng)目中應(yīng)用較少?？梢宰鳛橐环N練習(xí)或部分功能的使用。

四、交付

1、切圖

設(shè)計(jì)稿完成之后我們需要將圖標(biāo)等元素切圖導(dǎo)出交付給開發(fā)，IOS和安卓需要根據(jù)要求導(dǎo)出不同倍數(shù)的png格式切圖文件。

切圖套數(shù)

IOS：現(xiàn)在通常是輸出2套，以@2x、@3X為后綴，也就是2倍圖、3倍圖；

Android：現(xiàn)在通常是輸出3套，xhdpi（超清，對(duì)應(yīng)IOS的2倍圖）、xxhdpi（超超清，對(duì)應(yīng)IOS的3倍圖）、xxxhdpi（超超超清），安卓切圖不需要將倍數(shù)加到切圖命名內(nèi)，而是每種尺寸單獨(dú)建立一個(gè)文件夾。

輸出格式

png：最常用的切圖文件格式，背景無底透明，所以在導(dǎo)出切圖文件時(shí)需要先去掉背景色（figma將畫板填充色隱藏，sketch畫板不要勾選“包含于導(dǎo)出項(xiàng)”）；

svg：矢量切圖，需要背景無底透明，部分網(wǎng)頁端項(xiàng)目可能需要svg格式的切圖文件；

bmp：部分硬件機(jī)器的項(xiàng)目需要使用的圖片格式，需要注意的是bmp無法實(shí)現(xiàn)背景透明，如果背景是透明的會(huì)自動(dòng)帶上白色，需要切圖文件把背景帶上一起切，而且figma和sketch等UI設(shè)計(jì)軟件無法直接導(dǎo)出bmp格式，需要先導(dǎo)出為png或jpg格式，再使用ps或其他工具轉(zhuǎn)換一次。

切圖命名

只能使用英文、下滑線、數(shù)字進(jìn)行命名，不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態(tài)（有些切圖沒有多種狀態(tài)則不需要添加狀態(tài)命名）。

以蘋果端舉例：如底部菜單欄的首頁圖標(biāo)命名則是ico_bottom_home_nor@2x（圖標(biāo)_底部_首頁_未選中狀態(tài)）和ico_bottom_home_sel@2x（圖標(biāo)_底部_首頁_選中狀態(tài)）。

頂部的搜索圖標(biāo)沒有多個(gè)狀態(tài)，命名是ico_nav_search@2x（圖標(biāo)_頂部_搜索）。

類別一般只有3種：圖標(biāo)（icon）、圖片（image）、按鈕（button），我們通常會(huì)簡寫為ico、img、btn。

狀態(tài)一般只有4種：正常（normal）、按下（press）選中（selected）、禁用（disabled），我們通常會(huì)簡寫為nor、pre、sel、dis。pc端會(huì)多一種狀態(tài)：懸停（hover）。

sketch和figma等UI設(shè)計(jì)軟件可以同時(shí)導(dǎo)出多個(gè)尺寸的切圖文件和前綴/后綴，所以我們只需要設(shè)置圖標(biāo)本身的命名如ico_bottom_home_sel，而不需要每個(gè)切圖都去手動(dòng)的添加IOS后綴的@2x和@3X，以及安卓的前綴xhdpi等，在導(dǎo)出設(shè)置中設(shè)置好每個(gè)尺寸的文件夾名稱和后綴，再統(tǒng)一導(dǎo)出即可。

切圖輸出

軟件內(nèi)部導(dǎo)出：現(xiàn)在的UI設(shè)計(jì)軟件Sketch、Figma、Mstergo等都可以直接導(dǎo)出切圖文件，只需要設(shè)置好相應(yīng)的倍數(shù)和前綴、后綴，就可以快速的導(dǎo)出切圖文件；

上傳第三方：最常用的就是將設(shè)計(jì)文件上傳至藍(lán)湖，研發(fā)人員可以在藍(lán)湖上下載自己需要的切圖文件，但在上傳藍(lán)湖之前需要把設(shè)計(jì)稿中需要切圖的元素設(shè)置為切片。

2、標(biāo)注

和切圖文件一起交付給開發(fā)的還有設(shè)計(jì)稿的標(biāo)注文件，讓研發(fā)人員可以清楚地知道界面內(nèi)元素的顏色、尺寸、對(duì)齊方式、距離、透明度，文字的字體、字號(hào)、行高等。

輸出到藍(lán)湖

很多設(shè)計(jì)文件都可以安裝藍(lán)湖插件，再通過插件將設(shè)計(jì)稿導(dǎo)出到藍(lán)湖，研發(fā)人員就可以便捷的查看界面的標(biāo)注。

軟件內(nèi)部標(biāo)注

Figma、Mastergo等在線設(shè)計(jì)軟件都可以切換為開發(fā)者模式，只需要將研發(fā)人員邀請(qǐng)到自己的設(shè)計(jì)文件所在團(tuán)隊(duì)內(nèi)，研發(fā)人就可以查看到界面的標(biāo)注；

插件導(dǎo)出

有部分公司有一定的保密措施，會(huì)禁止設(shè)計(jì)師使用第三方平臺(tái)或是聯(lián)網(wǎng)操作，這種情況設(shè)計(jì)也無法使用Figma、Mastergo等在線設(shè)計(jì)軟件，只能使用Sketch等客戶端，輸出標(biāo)注就需要使用相應(yīng)的插件，Sketch可以使用Sketch Measure導(dǎo)出HTML格式的標(biāo)注文件。

五、上線

在項(xiàng)目上線的階段UI設(shè)計(jì)需要輔助研發(fā)提供上線應(yīng)用商店需要的項(xiàng)目預(yù)覽圖、啟動(dòng)LOGO，也需要設(shè)計(jì)補(bǔ)充出APP的啟動(dòng)頁、閃屏頁等。

1、項(xiàng)目預(yù)覽頁

上線應(yīng)用商店需要的預(yù)覽圖，通常是使用項(xiàng)目中比較有特色的幾個(gè)UI界面加以設(shè)計(jì)。

2、啟動(dòng)LOGO

上線應(yīng)用商店必須提供的LOGO，手機(jī)中啟動(dòng)APP的入口，但不同的應(yīng)用商店有不同的尺寸，華為、蘋果、小米、三星、應(yīng)用寶等所需要的啟動(dòng)LOGO都有所不同，所以輸出多個(gè)尺寸。以蘋果App Store為例，需要以下尺寸：

3、啟動(dòng)頁、引導(dǎo)頁

啟動(dòng)頁和引導(dǎo)頁一般是和UI界面一起設(shè)計(jì)，不過需要項(xiàng)目上線后才會(huì)有其價(jià)值，所以可以先設(shè)計(jì)完項(xiàng)目的界面，在研發(fā)開發(fā)的過程中再去設(shè)計(jì)啟動(dòng)頁和引導(dǎo)頁，只要在項(xiàng)目上線前提供給研發(fā)就可以。

六、持續(xù)跟進(jìn)和優(yōu)化

當(dāng)一個(gè)項(xiàng)目上線后，只能代表我們的現(xiàn)階段的工作已經(jīng)全部完成。每個(gè)項(xiàng)目上線后都會(huì)收集用戶反饋，根據(jù)用戶反饋的信息優(yōu)化功能和界面設(shè)計(jì)，通過持續(xù)不斷的優(yōu)化、迭代讓我們的產(chǎn)品越來越好，這個(gè)過程中也需要我們UI設(shè)計(jì)不斷的去進(jìn)行調(diào)整和優(yōu)化。

作者：Mu姜子
鏈接：https://www.zcool.com.cn/article/ZMTQxMDY1Ng==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

作為設(shè)計(jì)師，要對(duì)自己的設(shè)計(jì)有一個(gè)檢驗(yàn)標(biāo)準(zhǔn)，明白什么設(shè)計(jì)才是好的設(shè)計(jì)。這一篇簡單，有點(diǎn)枯燥，但是非常重要。

              什么是好的設(shè)計(jì)？好設(shè)計(jì)，就是不改稿的設(shè)計(jì)，甲方買單的設(shè)計(jì)，這句話多大多數(shù)設(shè)計(jì)師來說是沒錯(cuò)的。因?yàn)樵O(shè)計(jì)師也要吃飯的、要生活。只要客戶買單了，我們就能達(dá)到經(jīng)濟(jì)上的收益。

       但是僅僅客戶買單就足夠了嗎？我覺得對(duì)于一個(gè)想要提升自己的設(shè)計(jì)師來說并不足夠。這個(gè)客戶買單了說明你在一定程度上，在當(dāng)前滿足了這個(gè)需求層次或者審美的客戶群體。

       當(dāng)客戶發(fā)現(xiàn)設(shè)計(jì)并沒有在實(shí)際宣傳中達(dá)到目的，買完單的客戶也沒辦法回頭再找設(shè)計(jì)師退款，但是，可想而知這個(gè)客戶就流失了。而且如果只滿足于應(yīng)對(duì)這一需求層次的客戶，當(dāng)面對(duì)要求更高的客戶的時(shí)候，我們也會(huì)變得無能為力。只能看著客戶流失，或者勉強(qiáng)接下項(xiàng)目，卻在不斷的改稿中疲于奔命。

 

       想了解什么是好的設(shè)計(jì)，首先需要要了解什么是設(shè)計(jì)，設(shè)計(jì)的目的是什么。

       設(shè)計(jì)是有目的的策劃，平面設(shè)計(jì)是這些策劃將要采取的形式之一，在平面設(shè)計(jì)中你需要用視覺元素來傳播你的設(shè)想和計(jì)劃，用文字和圖形把信息傳達(dá)給受眾，讓人們通過這些視覺元素了解你想表達(dá)的信息，這才是我們設(shè)計(jì)的定義。平面設(shè)計(jì)的目的不僅是視覺表層的美觀度，更重要的、最根本的是信息的傳達(dá)。

       所以好的設(shè)計(jì)就是，能準(zhǔn)確直觀的傳播設(shè)計(jì)目的，被受眾更有效、更愿意接收信息的設(shè)計(jì)。簡單來講，信息（包括內(nèi)容信息和情感信息）傳達(dá)的是設(shè)計(jì)的基礎(chǔ)，是設(shè)計(jì)中一切行為的第一準(zhǔn)則，是對(duì)的設(shè)計(jì)。在此基礎(chǔ)上具備良好的美感傳達(dá)就是好的設(shè)計(jì)。

      我們可能在設(shè)計(jì)學(xué)習(xí)過程中學(xué)到了很多的設(shè)計(jì)法則，形式美法則、創(chuàng)意思維、排版原則、色彩原則、字體運(yùn)用原則。但是很多時(shí)候用到的時(shí)候就想不起來，用了也沒達(dá)到效果？

       我理解更多的是因?yàn)闆]有從根本上理解這些法則存在的意義、運(yùn)用的目的。設(shè)計(jì)師應(yīng)該做最吝嗇的人，過程中每一個(gè)視覺元素的運(yùn)用都要有其目的性。這個(gè)目的性就應(yīng)該是信息傳達(dá)和美感傳達(dá)。以此為標(biāo)準(zhǔn)反復(fù)檢驗(yàn)自己的設(shè)計(jì)作品，相信我們能做出好的設(shè)計(jì)。

（一）客戶對(duì)設(shè)計(jì)的期待信息準(zhǔn)確有效傳遞，受眾對(duì)信息要求直觀、易讀。

       這是一個(gè)高效時(shí)代，時(shí)間就是金錢。同時(shí)是一個(gè)信息大爆炸的時(shí)代，每天我們會(huì)面對(duì)各種不同媒介的信息，不斷沖擊這我們的視覺。我們不能要求受眾有時(shí)間和耐心完整仔細(xì)的觀看閱讀整個(gè)設(shè)計(jì)。這就要求我們的設(shè)計(jì)，即便一眼，就能判斷設(shè)計(jì)究竟在表現(xiàn)什么信息，而不被其他不重要信息干擾。當(dāng)客戶對(duì)表達(dá)信息有一個(gè)直觀的概念后，希望繼續(xù)閱讀下去的話，我們就要在易讀方面進(jìn)行深化。

       明確最重要的信息

       對(duì)于設(shè)計(jì)需求的分析得出最重要的信息，最想傳達(dá)的信息

       突出最重要的信息

       將它擺放在突出的位置，整體的烘托，對(duì)比的凸顯，合適的構(gòu)圖

       次要信息

       相對(duì)最重要的信息較弱

       信息的篩選

       設(shè)計(jì)中包含的信息必須有明確的效用，而不被不必要的信息干擾導(dǎo)致失去閱讀興趣

       設(shè)置重要等級(jí)

       針對(duì)內(nèi)容設(shè)置重要性等級(jí)，然后根據(jù)相應(yīng)等級(jí)進(jìn)行設(shè)計(jì)。

       信息分組

       這是受眾感知多條信息的前題，將相關(guān)的信息放置或整合為一體，這樣就可以實(shí)現(xiàn)分組。大多數(shù)情況下三至四個(gè)信息組已經(jīng)足夠了。

       閱讀性文字排版 （閱讀性文字指的是需要受眾閱讀的，而非裝飾性、不需要識(shí)別性的）

       在文字排版當(dāng)中易讀是必須追求的。

       對(duì)齊：為了達(dá)到易讀效果，首先要從對(duì)齊開始。

       檢索：易于檢索目標(biāo)內(nèi)容，精心處理檢索方式。（依據(jù)版式設(shè)計(jì)原則中的對(duì)比，重復(fù)原則實(shí)現(xiàn)）

       記憶：要點(diǎn)便于記憶，突出主要內(nèi)容。（依據(jù)版式設(shè)計(jì)原則中的對(duì)比，重復(fù)原則實(shí)現(xiàn)）

       文字：文字大小、字間距、行距、字體、文字的排布五個(gè)方面。過小的字體、過大的字體，過度裝飾的字體，不符合視覺流程，不合理的版式布局。都是會(huì)影響閱讀的易讀性。

 

（二）客戶對(duì)設(shè)計(jì)的期待能引人注意、獲得好的反饋，受眾希望從設(shè)計(jì)中收到某種刺激、有所收獲。

       人們每天沒數(shù)量驚人的信息淹沒，面對(duì)潮水涌來的信息。我們的頭腦中會(huì)形成一個(gè)過濾器，只會(huì)對(duì)能引發(fā)我們興趣的信息，能夠得到某種刺激的信息，才能順利通過并留下清晰的印象。因此，想要設(shè)計(jì)從眾多信息中脫穎而出并抓住受眾的實(shí)現(xiàn)。就必須引人注目、傳遞刺激，讓受眾在你的設(shè)計(jì)上逗留。

       美的視覺效果比較容易給人帶來刺激

       這時(shí)候我們學(xué)習(xí)的各種原則知識(shí)，構(gòu)成知識(shí)（點(diǎn)線面，平衡、對(duì)比、調(diào)和、節(jié)奏、變異.....）、版式知識(shí)（位置、比例、分割、留白、網(wǎng)格.....）等都可以充分發(fā)揮作用了。 

       滿足期待

       人們希望沖設(shè)計(jì)只能夠得到收獲，包括有用的文字信息和情感上的。反過來如果已經(jīng)知道了，沒有興趣，無我無關(guān)的信息，是無法吸引受眾的。選用一種能夠傳達(dá)設(shè)計(jì)內(nèi)容及主題思想的吸睛元素就很有必要?？梢允俏淖郑ǘY物、服務(wù)、免費(fèi)、抽獎(jiǎng)、限時(shí)、折扣等）或者圖形元素、圖片。

       吸睛元素與設(shè)計(jì)需求要匹配 

       選取吸睛元素必須與設(shè)計(jì)主題信息密切相關(guān)。例如，在定位是高品質(zhì)的項(xiàng)目設(shè)計(jì)中，放置一個(gè)花哨刺眼的打折；在畫面中一個(gè)無關(guān)的美女。這確實(shí)很可能在短時(shí)間內(nèi)贏得受眾的注意，但是當(dāng)文字或圖片與設(shè)計(jì)需要傳達(dá)的信息完全無關(guān)的情況下。也會(huì)很快的失去他們的關(guān)注。

       情感刺激

       一個(gè)好的吸睛元素往往能激發(fā)受眾的情感——受眾會(huì)覺得驚喜，感覺自己的情感獲得了認(rèn)可，也可能會(huì)對(duì)設(shè)計(jì)產(chǎn)生共鳴。一旦感情上拉近了受眾與設(shè)計(jì)的距離，就有可能增加受眾良好的反饋行動(dòng)達(dá)到商業(yè)目的（購買產(chǎn)品、產(chǎn)生消費(fèi)等）。

       消極情感    

       人們被設(shè)計(jì)激發(fā)的情感并非總是積極正面的。更重要的是有針對(duì)性的激發(fā)觀眾的情感。應(yīng)該根據(jù)不同的設(shè)計(jì)目的，激發(fā)觀眾內(nèi)心相應(yīng)的情感。例如一個(gè)減肥中心的宣傳設(shè)計(jì)，畫面營造一種胖人失落的畫面（沒有偏見我自己也是個(gè)胖子~），從而激發(fā)受眾不安的消極情緒。這也可能引起受眾的關(guān)注，并愿意深入了解。

       受眾反應(yīng)的不確定性    

       視覺會(huì)給人帶來一連串的生理上的、心理上的、情感上的、行動(dòng)上的反應(yīng)，設(shè)計(jì)是視覺經(jīng)驗(yàn)的科學(xué)。他包括兩個(gè)方面，一個(gè)是不以人為而改變的即生理感受的人的基本反應(yīng)，另一個(gè)是隨即的或不確定因素構(gòu)成。如個(gè)人喜好，性格等等、等等，導(dǎo)致我們無法完全確定受眾在面對(duì)設(shè)計(jì)時(shí)候的情感等反應(yīng)。

       相對(duì)穩(wěn)定的方面： 主要是生理上的視知覺，人們的一些視覺習(xí)慣、視覺流程、視覺邏輯，如從上到下，從左到右，喜歡連貫的、重復(fù)，喜歡有對(duì)比的，還有在顏色方面人們最喜歡的其實(shí)是有對(duì)比的互補(bǔ)色等等。這都是跟人們的生理上的習(xí)慣有關(guān)，都是人生理機(jī)能的本能反應(yīng)。作為設(shè)計(jì)師應(yīng)該對(duì)這些知識(shí)能充分了解、靈活運(yùn)用，設(shè)計(jì)是對(duì)人本的關(guān)注，首先應(yīng)對(duì)文化與人的感知方式這些相對(duì)穩(wěn)定的方面進(jìn)行研究，并且需要我們在實(shí)踐中去總結(jié)。
       不穩(wěn)定的方面： 不穩(wěn)定的方面主要是指情感、素質(zhì)、品位、閱歷上的不同，在設(shè)計(jì)過程中你需要具備一定的判斷和把握能力，你需要客觀和克制，才能完成卓越的設(shè)計(jì)。
       設(shè)計(jì)思維的科學(xué)： 設(shè)計(jì)是必須具有科學(xué)的思維方法，能在相同中找到差別，能在不同當(dāng)中找到共同之處，能掌握運(yùn)用各種思維方法，如縱向關(guān)聯(lián)思維和橫向關(guān)聯(lián)思維以及發(fā)散式的思維，善于運(yùn)用科學(xué)的思維方式找到奇特的新的視覺形象，才能不斷發(fā)現(xiàn)新的可能。 

 

  設(shè)計(jì)學(xué)習(xí)過程中的總結(jié)和整理，有些內(nèi)容來自網(wǎng)絡(luò)，如有冒犯請(qǐng)聯(lián)系我刪改！僅為自身學(xué)習(xí)提升的記錄，如果對(duì)內(nèi)容有更好的理解，歡迎交流探討。

作者：藝修行者
鏈接：https://www.zcool.com.cn/article/ZMTAyNDQyMA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.teruid.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ì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

本文講述百度激勵(lì)視頻廣告，從0到1的容器框架設(shè)計(jì)，以及如何通過設(shè)計(jì)舉措進(jìn)一步提升轉(zhuǎn)化效果的設(shè)計(jì)思考。

近年來，行業(yè)內(nèi)不斷探索廣告的新玩法，激勵(lì)視頻廣告成為一種愈加流行的廣告形式，當(dāng)前已經(jīng)是媒體主流變現(xiàn)模式之一，以滿足廣告主營銷效果、媒體變現(xiàn)效率最大化。對(duì)用戶而言，觀看激勵(lì)視頻廣告能夠獲得相應(yīng)獎(jiǎng)勵(lì)；對(duì)于客戶，激勵(lì)視頻廣告通過獎(jiǎng)勵(lì)機(jī)制，得到更長時(shí)間的曝光來提升轉(zhuǎn)化率；對(duì)于平臺(tái)，有更高的變現(xiàn)效率能帶來更高的收益。

百度激勵(lì)視頻廣告承載著百度APP任務(wù)系統(tǒng)、權(quán)益場景、活動(dòng)場景等的重要變現(xiàn)任務(wù)，本文將從激勵(lì)視頻廣告的框架、提升轉(zhuǎn)化效果兩個(gè)方面，來闡述容器結(jié)構(gòu)設(shè)計(jì)與提升轉(zhuǎn)化效果的設(shè)計(jì)思考。

框架：建立場景核心轉(zhuǎn)化流程

激勵(lì)視頻廣告是獨(dú)立的視頻場景，場景內(nèi)的元素布局、容器結(jié)構(gòu)不依賴于所在的宿主場景，在整個(gè)交互鏈路中能夠采用更有創(chuàng)新的設(shè)計(jì)形式。

1、布局跨場景橫向一致

基于激勵(lì)視頻廣告的元素來明確內(nèi)容分區(qū)，考慮元素作用與通用性可分為頂部框架區(qū)、附加掛載區(qū)、內(nèi)容信息區(qū)、轉(zhuǎn)化決策區(qū)，在結(jié)構(gòu)設(shè)計(jì)上，將核心獎(jiǎng)勵(lì)計(jì)時(shí)組件置于頂部框架區(qū)并保持穩(wěn)定展現(xiàn)，保證百度APP內(nèi)的視頻廣告在布局上橫向一致性，同時(shí)也有利于場景之間創(chuàng)意交叉驗(yàn)證與復(fù)用。

2、容器、元素組件選型

從激勵(lì)視頻的鏈路流程出發(fā)，結(jié)合主動(dòng)交互行為的各類組件狀態(tài)：獎(jiǎng)勵(lì)計(jì)時(shí)與完成、視頻播放與完播、瀏覽落地頁、退出挽留四種核心狀態(tài)。

1）獎(jiǎng)勵(lì)計(jì)時(shí)與完成：考慮獎(jiǎng)勵(lì)計(jì)時(shí)器會(huì)存在于多種不同場景情況，需要具備橫向統(tǒng)一的計(jì)時(shí)形式來穩(wěn)定用戶預(yù)期，以及通過視覺反饋給予用戶明確的狀態(tài)變化感知，來降低不同場景下的理解成本，通過ABtest的方式，最終選用場景元素圖標(biāo)與文本計(jì)時(shí)形式，圖標(biāo)能夠根據(jù)獎(jiǎng)勵(lì)的不同支持靈活配置，滿足多元化場景的適配訴求，同時(shí)選用視覺感知較弱的樣式與動(dòng)畫形式，盡可能避免與點(diǎn)擊、轉(zhuǎn)化無關(guān)的元素動(dòng)畫稀釋用戶對(duì)內(nèi)容的注意力，從而影響廣告效果。

2）視頻播放與完播：播放狀態(tài)下，為盡量降低對(duì)視頻內(nèi)容的遮擋，在轉(zhuǎn)化組件的呈現(xiàn)上，采用“延遲展現(xiàn)吸引觀看，漸進(jìn)式增強(qiáng)吸引點(diǎn)擊”的手段，視頻完播狀態(tài)下呈現(xiàn)視頻尾幀，尾幀增加再看一個(gè)視頻功能，為想要獲得金幣的用戶縮短操作步長，提升激勵(lì)視頻廣告的分發(fā)。

3）瀏覽落地頁：瀏覽落地頁過程中也需明示獎(jiǎng)勵(lì)計(jì)時(shí)，為了保證視頻場景和落地頁場景的計(jì)時(shí)延續(xù)與組件統(tǒng)一性，采用避讓計(jì)時(shí)組件的面板化落地頁容器。

4）退出挽留：當(dāng)用戶在不同獎(jiǎng)勵(lì)狀態(tài)下會(huì)在退出的主動(dòng)行為，挽留彈窗承載挽留與再看功能的重要作用，彈窗作為前后鏈路場景的共性組件，在彈窗設(shè)計(jì)上頂部承載所在場景主視覺IP，以滿足多元化場景的下活動(dòng)主視覺的延續(xù)，使激勵(lì)視頻廣告更契合所在活動(dòng)場景。

3、轉(zhuǎn)化鏈路降步長

在原有的基礎(chǔ)路徑上，獎(jiǎng)勵(lì)計(jì)時(shí)與倒計(jì)時(shí)結(jié)束的兩個(gè)環(huán)節(jié)僅有計(jì)時(shí)器形態(tài)的變化，元素變化是容易起到聚焦視覺的作用的，以倒計(jì)時(shí)結(jié)束為節(jié)點(diǎn)，將用戶從"視頻場景"帶入到"決策場景"，通過容器結(jié)構(gòu)形態(tài)的變化來解放停留在計(jì)時(shí)器上的視覺焦點(diǎn)，面板結(jié)構(gòu)能承載更多的增益內(nèi)容，延展信息載量，視頻完播是判斷用戶對(duì)內(nèi)容感興趣的重要契機(jī)，在視頻完播狀態(tài)自動(dòng)調(diào)起落地頁，通過縮短轉(zhuǎn)化步長提升轉(zhuǎn)化效率。

激勵(lì)視頻廣告容器每一步迭代都伴隨大量的前置思考、歸因分析、嚴(yán)謹(jǐn)實(shí)驗(yàn)，經(jīng)歷多輪迭代最終完成流程框架搭建，后面我們?nèi)砸伎既绾瓮ㄟ^設(shè)計(jì)方法，在現(xiàn)有的框架上進(jìn)一步提升轉(zhuǎn)化效果。

提轉(zhuǎn)：內(nèi)容化與獎(jiǎng)勵(lì)玩法助決策

在廣告創(chuàng)意視角下，通過內(nèi)容信息命中用戶訴求、滿足心理期望能夠提升轉(zhuǎn)化效果；在用戶目標(biāo)視角下，我們希望充分發(fā)揮激勵(lì)機(jī)制，給予用戶更多豐富的獎(jiǎng)勵(lì)交互與玩法，持續(xù)獲取收益與滿足感。

1、增益信息前置，助力轉(zhuǎn)化決策

輪播推薦詞：推薦詞輪播的形式來營造場景內(nèi)互動(dòng)氛圍，在一些節(jié)日期間通過契合節(jié)日的情感化文案，讓內(nèi)容更貼合節(jié)日營銷氛圍，同時(shí)將落地頁中的優(yōu)質(zhì)廣告賣點(diǎn)、數(shù)據(jù)生成的熱度等多元的營銷信息前置，助力用戶決策。

行動(dòng)號(hào)召詞：不同廣告內(nèi)容之間的轉(zhuǎn)化文案存在差異化的表達(dá)，通過符合廣告內(nèi)容的決策性文案披露，將固定文案升級(jí)為營銷目標(biāo)及類型特征文案，輔助轉(zhuǎn)化決策，在容器內(nèi)每一個(gè)元素都應(yīng)該作為廣告創(chuàng)意的一部分。

2、分段獎(jiǎng)勵(lì)計(jì)時(shí)，引導(dǎo)視頻完播

點(diǎn)擊率、轉(zhuǎn)化率隨視頻播放時(shí)長的數(shù)據(jù)變化，發(fā)現(xiàn)呈現(xiàn)正相關(guān)的趨勢，我們希望用戶能夠選擇看完視頻，核心思路是將用戶從低變現(xiàn)效率場景，引導(dǎo)至高變現(xiàn)效率的場景，由此我們通過兩段計(jì)時(shí)獎(jiǎng)勵(lì)的設(shè)計(jì)形式，激勵(lì)用戶可以拿到更多獎(jiǎng)勵(lì)并將視頻看完，考慮多種不同場景以及理解成本的問題，最終選用兩段獎(jiǎng)勵(lì)計(jì)時(shí)組件的方式。

3、彩蛋營造驚喜，提升轉(zhuǎn)化

為了更好的匹配各大電商平臺(tái)調(diào)起類廣告的預(yù)算，大促期間的突然出現(xiàn)的禮物彩蛋為用戶營造節(jié)日驚喜感，在點(diǎn)擊行為后，紅包元素的彈窗與彩帶動(dòng)畫形式來承載金幣獎(jiǎng)勵(lì)與氛圍，獎(jiǎng)勵(lì)感知的觸達(dá)能夠提升用戶的獲得感，同時(shí)在獎(jiǎng)勵(lì)彈窗上進(jìn)一步承載調(diào)起任務(wù)，從而更好的滿足客戶營銷訴求。

4、強(qiáng)化轉(zhuǎn)化組件，增強(qiáng)獎(jiǎng)勵(lì)觸達(dá)

延續(xù)以上驚喜感獎(jiǎng)勵(lì)滿足促轉(zhuǎn)化的思路，針對(duì)下載類廣告，我們在轉(zhuǎn)化組件上進(jìn)行與獎(jiǎng)勵(lì)內(nèi)容的結(jié)合，在任務(wù)計(jì)時(shí)完成但并沒有形成轉(zhuǎn)化的時(shí)機(jī)下，通過變色與光效視覺吸引來傳遞獎(jiǎng)勵(lì)信息，通過強(qiáng)化獎(jiǎng)勵(lì)感知和轉(zhuǎn)化組件來助力轉(zhuǎn)化決策。

寫在最后

激勵(lì)視頻廣告至今經(jīng)歷了多個(gè)不同的階段，如何在商業(yè)效果與用戶感知之間選取一個(gè)平衡點(diǎn)，一直都是激勵(lì)視頻廣告的長久的設(shè)計(jì)課題，目前也只是一個(gè)開始，還有很多的設(shè)計(jì)提轉(zhuǎn)機(jī)會(huì)點(diǎn)等待我們?nèi)ド钔?，相信在不久的將來能夠探索更加多元的激?lì)玩法，發(fā)現(xiàn)更多契合用戶訴求的場景，為更好的價(jià)值生產(chǎn)不斷迭代功能與體驗(yàn)，我們希望能夠給予用戶、客戶、平臺(tái)更多的價(jià)值增益，做用戶喜歡、客戶滿意、平臺(tái)有利的商業(yè)設(shè)計(jì)。

作者：百度MEUX
來源：站酷

一、認(rèn)識(shí)帕累托法則

1.帕累托法則的背景

19世紀(jì)末，意大利經(jīng)濟(jì)學(xué)家和工程師維爾弗雷多·帕累托（Vilfredo Pareto）發(fā)現(xiàn)，自家花園中80%的豌豆產(chǎn)自于20%的豌豆莢，在隨后研究土地所有權(quán)和財(cái)富不平等的問題中，再次發(fā)現(xiàn)意大利 80%的土地屬于 20%的人。
20世紀(jì)初，由管理學(xué)家約瑟夫·朱蘭（Joseph Juran）將其命名為帕累托法則，即80%的結(jié)果是20%的原因造成的，并且號(hào)召關(guān)注「重要的少數(shù)」而不是在「瑣碎的多數(shù)」當(dāng)中投注精力。后續(xù)在經(jīng)濟(jì)學(xué)中得出結(jié)論（80%的財(cái)富掌握在20%的人手里）更加證實(shí)了帕累托法則的觀點(diǎn)。

2.正確理解80與20

帕累托法則有很多不同的叫法，如帕列托法則、關(guān)鍵少數(shù)法則、二八法則、巴萊特定律、最省力的法則、不平衡原則等，后續(xù)筆者將其稱為「80/20法則」。
其實(shí)，80/20法則是一個(gè)較為抽象的概念，可以理解為：大部分的效果由少數(shù)幾項(xiàng)關(guān)鍵的因素來決定。在實(shí)際的場景中，“大部分”不是精確的80%，“幾項(xiàng)關(guān)鍵因素”也不是固定的20%，數(shù)據(jù)會(huì)有所浮動(dòng)，可能是70%+30%或者90%+10%，但不管這些數(shù)字如何波動(dòng)，其背后蘊(yùn)含的規(guī)律（集中的投入將產(chǎn)出大于預(yù)期的結(jié)果）是不變的，并且生活中存在的許多不平衡現(xiàn)象，都與這個(gè)規(guī)律相當(dāng)接近。

3.可適用范圍

80/20法則并不受人為直接控制，更多時(shí)候是自然而然的形成，其適用領(lǐng)域非常廣泛。早期大多數(shù)用于社會(huì)、經(jīng)濟(jì)、管理以及工程等領(lǐng)域，而在80年代末就已經(jīng)有設(shè)計(jì)師將其設(shè)計(jì)領(lǐng)域，在各行各業(yè)中，已經(jīng)有大量的案例證明了 80/20原則：

• 人類80%的科學(xué)發(fā)明，來自于20%的人口
• 社會(huì)上20%的人占有80%的財(cái)富
• 城市80%的交通，集中在20%的道路上
• 20%的客戶為公司貢獻(xiàn)了80%的收入
• 公司80%的收益來源于20%的產(chǎn)品
• 20%的網(wǎng)站獲取了 80%的網(wǎng)絡(luò)流量
• 20%的常見軟件錯(cuò)誤導(dǎo)致了80%的系統(tǒng)崩潰
• ......

4.設(shè)計(jì)領(lǐng)域中的運(yùn)用

70年代中期出現(xiàn)圖形化界面，而到80年代末，80/20法則就已經(jīng)被設(shè)計(jì)師引用在設(shè)計(jì)規(guī)范當(dāng)中，后續(xù)經(jīng)過不斷的發(fā)展及優(yōu)化，現(xiàn)已深入設(shè)計(jì)中的方方面面，PM用來處理KPI、UX用來劃分權(quán)重、UI用來決策版面布局等。
界面設(shè)計(jì)中該如何應(yīng)用80/20法則，這就需要設(shè)計(jì)師時(shí)刻注意如何讓用戶更快找到目標(biāo)、如何更順暢的完成任務(wù)以及如何擁有更愉悅的心理感受。例如80%的用戶只會(huì)用到20%的功能，那么設(shè)計(jì)師就應(yīng)該將80%的時(shí)間、精力集中在這20%的功能上，不斷迎合用戶需求以及使用體驗(yàn)。

二、產(chǎn)品如何應(yīng)對(duì)80與20

1.關(guān)鍵性的20%

80/20法則能夠幫助我們提供決策思路、梳理設(shè)計(jì)方向，通過前面的了解，我們應(yīng)該清楚了產(chǎn)品80%的用戶只會(huì)用到20%的功能，而80%的收益也恰恰來自于20%的付費(fèi)用戶，甚至低于20%。
雖然一直呼吁盡量滿足所有用戶，但產(chǎn)品團(tuán)隊(duì)的重心始終要圍繞著20%來進(jìn)行，從產(chǎn)品到設(shè)計(jì)、再到開發(fā)測試，都能以此為方向制定問題的解決方案。

2.非關(guān)鍵性的80%

任何一款產(chǎn)品都不能忽略主次，每隔一段時(shí)間就要重新評(píng)估功能價(jià)值，以備后續(xù)的更新迭代，針對(duì)非關(guān)鍵性的80%切勿耗費(fèi)過多的精力，以免喧賓奪主，不僅得到不好的反饋、還會(huì)帶來不必要的損失，吃力不討好。
對(duì)于已經(jīng)過期的核心（曾經(jīng)20%）功能，需要及時(shí)降低權(quán)重以及精力的消耗，不然即便是掌聲一片、也可能無法變現(xiàn)。

3.僅關(guān)注 20%有風(fēng)險(xiǎn)

用20%的部分創(chuàng)造80%的價(jià)值，并不意味著只關(guān)注20%的關(guān)鍵性指標(biāo)、其它的就可以被忽略，這樣做表面上看是挺誘人，但會(huì)讓其他很多指標(biāo)停滯，呈現(xiàn)出產(chǎn)品過度優(yōu)化的情況，造成短時(shí)間內(nèi)隱藏的負(fù)面影響。
團(tuán)隊(duì)?wèi)?yīng)該要有眾覽全局的眼光，考慮到各指標(biāo)間的相互影響，可視情況而定將時(shí)間和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是將大部分用在關(guān)鍵性指標(biāo)上即可。

三、在UI設(shè)計(jì)中的運(yùn)用

在UI設(shè)計(jì)中，我們會(huì)將主要精力花費(fèi)在20%的頁面設(shè)計(jì)上，例如APP底部標(biāo)簽欄的幾大主頁或其它重要的一/二級(jí)頁面，會(huì)花費(fèi)更多的心思去構(gòu)思不一樣的布局、表現(xiàn)手法，將設(shè)計(jì)功底凸顯出來。而剩下80%的頁面就相對(duì)機(jī)械化，會(huì)使用一些常規(guī)樣式以及復(fù)用的方式像搭積木一樣快速完成，成本之低、效率之高毋庸置疑。
同一個(gè)頁面的設(shè)計(jì)方式也是如此，設(shè)計(jì)師將大量心思放在首屏及位置靠上的功能上，待超過一屏后下滑時(shí)，設(shè)計(jì)也會(huì)逐漸輕量、組件化，這有助于節(jié)省產(chǎn)品、設(shè)計(jì)、開發(fā)更多的時(shí)間。

1.排版布局（F型）

用戶瀏覽屏幕時(shí)，眼球移動(dòng)的順序通常都是從左到右、從上到下（基于網(wǎng)頁瀏覽眼動(dòng)測試），這種移動(dòng)軌跡很像字母「F」，這也讓F型布局成為網(wǎng)頁設(shè)計(jì)中效率最高的方式之一，所以設(shè)計(jì)師通常會(huì)將重要的信息放在左上角或左側(cè)，不重要的信息放在右側(cè)。
如下面這張眼動(dòng)測試圖，F(xiàn)型布局也正好詮釋了80/20法則合理性與可行性，在頁面中20%的關(guān)鍵區(qū)域，吸引了用戶80%的注意力。

2.功能入口設(shè)計(jì)

很多產(chǎn)品因?yàn)闃I(yè)務(wù)功能的龐大，一股腦的將信息全部展示出來，看起來十分臃腫，用戶不能快速找到自己想要的信內(nèi)容，就會(huì)失去信心。
優(yōu)酷APP首頁將熱門頻道和點(diǎn)擊頻率較高的頻道顯示在頂部導(dǎo)航中，如精選、電視劇、電影、最新院線等，而其他更多的分類則隱藏在頻道選項(xiàng)卡中，將少量（≈20%）重要的內(nèi)容放在明顯的位置，目的就是為了讓大部分用戶更快觸達(dá)，提高了產(chǎn)品的易用性。

3.選項(xiàng)列表設(shè)計(jì)

在一些選項(xiàng)列表中，由于選項(xiàng)數(shù)量的龐大，會(huì)給用戶增加使用難度。
例如，使用美團(tuán)購買火車票在選擇地址時(shí)，面對(duì)超長的地址列表，逐個(gè)查看或通過字母篩選，都要花費(fèi)一定的時(shí)間和操作成本，即便可以通過碼字搜索來完成，但因?yàn)樽孕休斎胗泻芏嗟牟豢煽匦裕茏層脩暨x擇的就不要讓其輸入。對(duì)于地址列表，除開自動(dòng)定位和搜索歷史，運(yùn)用80/20法則就能很好的解決這一問題，系統(tǒng)將約20%高頻選擇的熱門城市作為單獨(dú)的模塊放在全部列表之前，提高了大部分用戶的搜索效率。

4.極簡風(fēng)格設(shè)計(jì)

極簡風(fēng)格的界面設(shè)計(jì)跟80/20法則在精神上保持著高度的一致，剔除多余、無用的元素，而保留的每一個(gè)元素都是有目的、有針對(duì)性的，也是絕對(duì)必要的存在。在極簡主義設(shè)計(jì)中，視覺上簡單干凈，大部分都是通過通過留白來襯托關(guān)鍵性元素的存在，讓用戶更加聚焦于主要功能/信息。

四、與其他法則的糾葛

1.與奧卡姆剃刀的結(jié)合

奧卡姆剃刀指出「如無必要，勿增實(shí)體」，需知頁面中每多一個(gè)元素都會(huì)增加視覺“噪聲”，意味著用戶需要花費(fèi)額外的時(shí)間和理解成本，對(duì)用戶體驗(yàn)的影響是很大的。那么問題來了，當(dāng)產(chǎn)品需要增加一項(xiàng)需求量小但確實(shí)存在的功能，該怎么處理？
這時(shí)我們可以將奧卡姆剃刀原則作為最終的評(píng)判標(biāo)準(zhǔn)，是否需要增加上述所說的功能，就要看看能否很好的控制團(tuán)隊(duì)開發(fā)成本和用戶體驗(yàn)成本。其實(shí)在80/20法則中，很多小眾但確實(shí)存在的功能需求基本很難抵消所造成的用戶體驗(yàn)損失，所以即便實(shí)現(xiàn)了這個(gè)需求，也很難分配出20%的精力去維護(hù)與迭代，甚至“俺耳盜鈴”般的將其遺忘，但這個(gè)視覺“噪聲”一直存在，如果事先能分析出這種結(jié)果，這個(gè)需求根本不需要增加。

2.與長尾模型的對(duì)抗

在2004年長尾模型才被提出來的時(shí)候，很多人認(rèn)為這是在顛覆80/20法則，它們的曲線長得很像，但結(jié)論完全相反，那條長長的“尾巴”（非關(guān)鍵的80%）所占據(jù)的長度幾乎與頭部的（關(guān)鍵的20%）高度相當(dāng)，這說明收益雖低，但這么多數(shù)量的累積，依然值得重點(diǎn)關(guān)注。所以有很多企業(yè)在采集差異化戰(zhàn)略時(shí)運(yùn)用了長尾理論，例如小米搭建的全品類商城用的是長尾理論。
乍一聽好像很有道理，難道80/20法則被推翻了嗎？事實(shí)并非如此，長尾理論的成立必須要滿足兩個(gè)條件，第一是尾巴真的足夠長（小眾需求確實(shí)非常多），第二長尾巴能被用戶發(fā)現(xiàn)（龐大的用戶量），這兩個(gè)條件缺一不可。例如京東、淘寶、微信、支付寶等，其前提都是建立在大規(guī)模、且海量的用戶資源之上，不管多么隱蔽、多小的動(dòng)能，總能擁有一些不錯(cuò)的曝光度，所以才能發(fā)揮長尾模型的作用。
說道這里，大家應(yīng)該就明白了，那些中小型的產(chǎn)品對(duì)長尾模型大多是望塵莫及，所以在你的產(chǎn)品規(guī)模、用戶量沒有達(dá)到一定的級(jí)別之前，就不要妄捧長尾模型，用好80/20法則就好。

五、結(jié)語

80/20法則在實(shí)際工作中是一個(gè)相對(duì)普遍的定律，它能讓我們靈活思考設(shè)計(jì)問題，更好的為用戶服務(wù)，雖然80/20法則也存在一定的爭議，但還是適用于覺絕大多數(shù)的場景，在關(guān)鍵時(shí)候使用，能幫助我們準(zhǔn)確的找到問題點(diǎn)，在有限的時(shí)間和精力下快速作出優(yōu)化決策并、關(guān)注核心功能，最終達(dá)成目標(biāo)。

作者：大漠飛鷹CYSJ
來源：站酷

貼吧虛擬形象創(chuàng)意玩法探索，通過特色互動(dòng)形式，拉近與年輕用戶的關(guān)系，帶來全新社區(qū)體驗(yàn)。

一、項(xiàng)目背景

虛擬形象產(chǎn)品形態(tài)現(xiàn)已逐步成熟，“捏臉+社區(qū)” 的模式逐漸成為年輕人的虛擬社交游樂場，競品QQ、Soul、淘寶等產(chǎn)品先后融入虛擬形象，探索年輕、有趣的社交模式。

貼吧在這一方向上進(jìn)行了創(chuàng)意玩法探索，希望可以通過特色互動(dòng)形式，拉近與年輕用戶的關(guān)系，為后續(xù)開拓社交場景奠定基礎(chǔ)。

二、視覺風(fēng)格滿足年輕用戶喜好

通過用戶調(diào)研，了解年輕用戶喜好個(gè)性十足和精致細(xì)膩的設(shè)計(jì)，同時(shí)希望可以有更多的搭配空間，我們針對(duì)設(shè)計(jì)成本與用戶喜好，建立十字坐標(biāo)軸篩選設(shè)計(jì)方向，匹配不同用戶，帶來差異化感知。

1、潮流、漫畫雙風(fēng)格設(shè)定，滿足用戶自我表達(dá)

潮流風(fēng)格具備年輕時(shí)髦感，漫畫風(fēng)格質(zhì)感更細(xì)膩，打造出產(chǎn)品的精致度，雙風(fēng)格設(shè)計(jì)可以最大程度滿足用戶的多元自我表達(dá)需求。

2、形象工程量產(chǎn)，滿足搭配的豐富度

為了達(dá)到玩法多變的目標(biāo)，我們對(duì)形象進(jìn)行工程化文件拆分，以發(fā)型區(qū)為例，通過層層分區(qū)來實(shí)現(xiàn)顏色、素材的靈活搭配。

拆分不同的發(fā)片，與身體、面部相互穿插，可以搭配出不同發(fā)型，對(duì)底色、陰影、描邊的拆分，實(shí)現(xiàn)代碼著色改變發(fā)色，每個(gè)形象完成36層拆解，達(dá)到顏色、素材的多元展現(xiàn)。

漫畫風(fēng)格，在表現(xiàn)上相比潮流風(fēng)格更加細(xì)膩，采用同樣的裸模坐標(biāo)與拆分標(biāo)準(zhǔn)，實(shí)現(xiàn)雙風(fēng)格靈活搭配。

針對(duì)兩種風(fēng)格我們批量化產(chǎn)出了服飾、發(fā)型、配飾、五官等標(biāo)準(zhǔn)化素材，實(shí)現(xiàn)全部素材多變量靈活搭配，形象設(shè)計(jì)從軟萌可愛到年輕潮流，貼合了年輕用戶的多重喜好，為了提升與研發(fā)的對(duì)接效率，同步制定了工程文件產(chǎn)出規(guī)范，通過對(duì)坐標(biāo)軸、熱區(qū)的定位，圖層規(guī)范化的命名，實(shí)現(xiàn)所有素材快速開發(fā)上線，降低產(chǎn)研溝通走查成本。

三、創(chuàng)新交互玩法增加可玩性

1、點(diǎn)選切換展示區(qū)讓創(chuàng)作更便捷

從0-1搭建基礎(chǔ)框架，為了降低學(xué)習(xí)操作成本，讓用戶可以快速上手，框架采用上部展示區(qū)、下部選擇區(qū)的形象制定產(chǎn)品通用布局。

在交互形態(tài)上，我們進(jìn)行了創(chuàng)意玩法創(chuàng)新，新增點(diǎn)選切換形式提升便捷度，用戶能通過點(diǎn)選展示區(qū)當(dāng)前部位快速定位操作，簡化使用，縮短裝扮時(shí)長。

2、靈活手勢創(chuàng)新實(shí)現(xiàn)玩法多變

針對(duì)貼吧用戶腦洞大開、鬼馬個(gè)性的特點(diǎn)，提供靈活操作，提升形象創(chuàng)意度，以下圖為例，可以看到眼睛、嘴巴等元素通過用戶的旋轉(zhuǎn)、縮放、位移等操作產(chǎn)生了很多鬼畜搞笑的形象，更有阿凡達(dá)、小岳岳、一眼丁真等形象加持，趣味十足。

3、豐富表態(tài)吸引用戶快速參與

通過動(dòng)態(tài)輕互表情帶來驚喜感，同時(shí)增加長按觸發(fā)連擊效果，提升用戶互動(dòng)爽感，狀態(tài)表達(dá)幫助用戶快速選擇當(dāng)時(shí)狀態(tài)，更低成本參與自我表達(dá)。

四、強(qiáng)化感知多場景觸達(dá)虛擬形象

為了讓貼吧用戶快速玩起來，提升用戶滲透，我們在貼吧全場景進(jìn)行傳播。

1、串聯(lián)核心場景實(shí)現(xiàn)用商聯(lián)動(dòng)變現(xiàn)

串聯(lián)端內(nèi)成長體系這一核心任務(wù)，打通多場景閉環(huán)，形象設(shè)定之后，在首頁、圖文詳情頁、個(gè)人主頁等核心場景展示個(gè)人形象，形成全場景滲透，有效擴(kuò)大虛擬形象在端內(nèi)的傳播。

高定裝扮聯(lián)通會(huì)員權(quán)益與成長值，通過漲、兌、買路徑，實(shí)現(xiàn)會(huì)員權(quán)益激勵(lì)、成長體系、形象變現(xiàn)的三方激勵(lì)串聯(lián)。

采用細(xì)膩手繪技法為對(duì)魔域游繪制精品形象，吸引游戲深度用戶完成形象裝扮，同時(shí)實(shí)現(xiàn)設(shè)計(jì)變現(xiàn)。

2、建立分享回流機(jī)制實(shí)現(xiàn)社區(qū)裂變

通過端外引流和影響力擴(kuò)散，吸引用戶產(chǎn)生回流，增加用戶粘性，持續(xù)增加用戶量。

五、結(jié)語

以上就是虛擬形象設(shè)計(jì)在整個(gè)創(chuàng)新玩法探索中的思路與舉措。

回顧設(shè)計(jì)過程，我們探索了更加貼切用戶的快捷交互體驗(yàn)，提升操控效率、縮減觸發(fā)路徑；我們緊跟設(shè)計(jì)趨勢，時(shí)刻關(guān)注年輕用戶需求，通過多風(fēng)格、工程化、輕互動(dòng)等手段，打造年輕化產(chǎn)品；我們通過與貼吧核心場景串聯(lián)融合，給老產(chǎn)品帶來全新社區(qū)體驗(yàn)。

虛擬形象上線后滲透率持續(xù)增長到15%，用戶累積佩戴數(shù)達(dá)百萬級(jí)別，效果超預(yù)期，吧友們在虛擬形象吧里進(jìn)行深入的評(píng)價(jià)與討論。定制出了高顏值、個(gè)性化、輕幽默等不同風(fēng)格的形象。

最后也期待廣大吧友們可以通過對(duì)貼吧虛擬形象的關(guān)注和喜愛來到貼吧，在我們的特色平臺(tái)定制出獨(dú)一無二的自己。

未來我們也將不斷探索、創(chuàng)新更多年輕化創(chuàng)意玩法，讓貼吧成為用戶喜愛具有歸屬感的繁榮社區(qū)。

作者：百度MEUX
來源：站酷

從設(shè)計(jì)“工具類軟件本身”思考復(fù)雜操作類軟件設(shè)計(jì)時(shí)的宏觀的思路，希望能反過來幫助應(yīng)用。希望大家多批評(píng)指正，互相交流

作者：younglion0610
來源：站酷