在信息流產(chǎn)品中，個(gè)人資料卡是一個(gè)很重要的頁面。一方面，創(chuàng)作者通過這個(gè)頁面展示賬號(hào)價(jià)值，突顯賬號(hào)魅力，引導(dǎo)用戶關(guān)注；另一方面，消費(fèi)型用戶通過這個(gè)頁面了解創(chuàng)作者，查看創(chuàng)作者更多內(nèi)容，是眾多消費(fèi)型用戶消費(fèi)內(nèi)容中重要的一環(huán)。只有把這個(gè)循環(huán)做好才能長(zhǎng)期促進(jìn)平臺(tái)生態(tài)發(fā)展。

這個(gè)頁面承載著這么多的價(jià)值，該如何設(shè)計(jì)？本篇將以 QB 看點(diǎn)號(hào)資料卡升級(jí)的設(shè)計(jì)思路為例，進(jìn)行分析解答。

前言

在前期分析過程中，我們發(fā)現(xiàn)當(dāng)前版本存在諸多問題。

從數(shù)據(jù)上看，對(duì)比公司內(nèi)同類產(chǎn)品，關(guān)注按鈕轉(zhuǎn)化率較低（出于數(shù)據(jù)保護(hù)，數(shù)據(jù)隱藏）。

從樣式上看，信息布局較亂，重點(diǎn)不突出。

基于以上背景，我們開始對(duì)資料卡進(jìn)行改版升級(jí)。

設(shè)計(jì)前應(yīng)該思考什么

做任何一個(gè)設(shè)計(jì)前，都應(yīng)該思考設(shè)計(jì)目標(biāo)，否則設(shè)計(jì)出來的結(jié)果沒有意義，也缺乏過程依據(jù)和支撐。那么資料卡的設(shè)計(jì)目標(biāo)是什么呢？這要從資料卡在信息流產(chǎn)品中的使命和價(jià)值說起。

一方面，消費(fèi)型用戶通過這個(gè)頁面了解創(chuàng)作者，查看更多內(nèi)容；另一方面，創(chuàng)作者通過這個(gè)頁面展示賬號(hào)價(jià)值，突顯賬號(hào)魅力，引導(dǎo)瀏覽者關(guān)注。

如果創(chuàng)作者能夠在資料卡充分展現(xiàn)自己的才華和魅力，帶來了更多瀏覽者的“關(guān)注”，那他們就更有動(dòng)力分享或生產(chǎn)優(yōu)質(zhì)內(nèi)容，進(jìn)而使產(chǎn)品內(nèi)容更加豐富；從而吸引更多新用戶的瀏覽、留存。

更多新用戶的加入、瀏覽、留存，讓內(nèi)容生產(chǎn)者有更多的漲粉空間，粉絲規(guī)模做起來之后再進(jìn)行商業(yè)化。這樣對(duì)消費(fèi)型用戶、內(nèi)容生產(chǎn)者、平臺(tái)方都有利，進(jìn)而處于良性循環(huán)。

如何進(jìn)行資料卡設(shè)計(jì)

了解了資料卡的使命和價(jià)值，設(shè)計(jì)目標(biāo)也呼之欲出，作為平臺(tái)方，我們需要幫創(chuàng)作者解決兩個(gè)問題：輔助創(chuàng)作者吸粉 & 助力商業(yè)化變現(xiàn)

當(dāng)然，創(chuàng)作者產(chǎn)出優(yōu)質(zhì)的內(nèi)容才是吸粉的關(guān)鍵，平臺(tái)方只能助攻。但不同的信息流產(chǎn)品有著不同的定位和側(cè)重點(diǎn)，吸引著不同的用戶，所以資料卡設(shè)計(jì)的樣式也不盡相同。

1. 輔助創(chuàng)作者吸粉

在輔助創(chuàng)作者吸粉這里，有兩個(gè)維度可以思考：

• 內(nèi)容展示維度
• 用戶關(guān)注維度

內(nèi)容展示分析

在資料卡中，有三個(gè)大區(qū)域：頭圖區(qū)、信息區(qū)和作品區(qū)。

• 頭圖區(qū)：指的是頂部的頭圖區(qū)域，這里可以讓創(chuàng)作者設(shè)置個(gè)性化頭圖，展示個(gè)性。
• 個(gè)人信息區(qū)：主要是作者的基本信息，包括昵稱、賬號(hào)名、簡(jiǎn)介、粉絲數(shù)、認(rèn)證信息等…這里通常還承載著一些等級(jí)、榜單，屬于信息展示和官方背書區(qū)。
• 作品區(qū)：主要展示賬號(hào)發(fā)布的內(nèi)容，這部分通常是瀏覽者最關(guān)注、瀏覽時(shí)間最長(zhǎng)的部分。

通過對(duì)比市面 20+信息流產(chǎn)品，我們發(fā)現(xiàn)了一些有趣的規(guī)律：

① 頭圖區(qū)：越是社區(qū)類產(chǎn)品，對(duì)頭圖個(gè)性化重視程度越高，而資訊類的產(chǎn)品則不太重視。

從產(chǎn)品功能上來看，越是偏向于社區(qū)類屬性產(chǎn)品，頭圖區(qū)域越大，可自定義替換的范圍也越廣。從用戶使用角度來看，社區(qū)類產(chǎn)品的用戶也更愛展示自我，頭圖替換的比例也更大，風(fēng)格更多樣化。而資訊類產(chǎn)品的創(chuàng)作者大多使用默認(rèn)頭圖，并不進(jìn)行個(gè)性化設(shè)置，自定義頭圖的比例很小。

所以我們?cè)谠O(shè)計(jì)頁面布局時(shí)，需要思考自身產(chǎn)品定位以及創(chuàng)作者需求，把有限的空間利用在刀刃上。

② 信息區(qū)：越是追求多元化收益商業(yè)化的產(chǎn)品，信息區(qū)承載量越大。

創(chuàng)作者不是活雷鋒，想讓他長(zhǎng)久的留在平臺(tái)必然需要給到創(chuàng)作者更多收益（收益除了顯性也有隱形的，比如 B 站，很多創(chuàng)作者在 B 站發(fā)文平臺(tái)收益相比其他平臺(tái)少，但因?yàn)槠放坡暳看?、氛圍好，獲得了巨大的關(guān)注和曝光，所以即使收益低，創(chuàng)作者也會(huì)持續(xù)在平臺(tái)投稿）。

除了流量分成外，平臺(tái)們也在幫助創(chuàng)作者實(shí)現(xiàn)多元化的收益，比如商鋪、直播、付費(fèi)課程粉絲圈等。甚至抖音很多創(chuàng)作者直接把商務(wù)合作寫在了個(gè)人簡(jiǎn)介中招商引資。所以這個(gè)區(qū)域，隨著多元化商業(yè)收入的更多嘗試，信息承載量也越來越大。

③ 內(nèi)容區(qū)：越是長(zhǎng)內(nèi)容，越傾向于展示更多作品和更多信息；越是短內(nèi)容，越是“看就完了”。

對(duì)比多款產(chǎn)品我們發(fā)現(xiàn)，越是長(zhǎng)內(nèi)容的產(chǎn)品，在內(nèi)容區(qū)越是注重效率選擇。通常會(huì)顯示更多內(nèi)容，且單條內(nèi)容會(huì)顯示更多維度幫助瀏覽者決策是否點(diǎn)擊查看。猜測(cè)可能是因?yàn)閮?nèi)容較長(zhǎng)，瀏覽者通常會(huì)花費(fèi)更多精力在選擇上。而越是短內(nèi)容，把單條內(nèi)容放大，促進(jìn)瀏覽者點(diǎn)擊，直接“看就完了”，反正一條也沒太長(zhǎng)時(shí)間。

所以設(shè)計(jì)資料卡時(shí)，需要設(shè)計(jì)者清晰了解自己平臺(tái)內(nèi)容特征以及用戶行為偏好，做出更合適自己平臺(tái)風(fēng)格的設(shè)計(jì)。

綜上，在做內(nèi)容布局展示時(shí)，需要綜合考慮產(chǎn)品定位，思考這些區(qū)域?qū)τ诋a(chǎn)品和創(chuàng)作者瀏覽者意味著什么。

比如頭圖區(qū)域，資訊類產(chǎn)品并不重視，畢竟賬號(hào)還是靠?jī)?nèi)容說話，即便是放張個(gè)性化頭圖，瀏覽者也不會(huì)因此而關(guān)注。而且大家都使用默認(rèn)頭圖，個(gè)性化無從說起，就更沒有什么意義了。

那么如何讓頭圖有價(jià)值？創(chuàng)作者愿意為此更換，而瀏覽者看到能夠感受到帳號(hào)的特殊性？

筆者提供一個(gè)思路拋磚引玉，參考 App Store 的編輯精選：只有精選的 APP 才可以有頭圖權(quán)利，其他 APP 都是默認(rèn)樣式。而稀缺性和被認(rèn)可，正是人類所追逐和渴望的。如果平臺(tái)選出一些精選帳號(hào)，賦予其設(shè)置頭圖資格。作為創(chuàng)作者，非常有意愿去更換，因?yàn)榭梢泽w現(xiàn)出和其他賬號(hào)的不同。瀏覽者也可以通過頭圖感受到當(dāng)前賬號(hào)的優(yōu)質(zhì)屬性。

用戶行為關(guān)注調(diào)研

既然要幫賬號(hào)吸粉，那么我需要了解瀏覽者的行為偏好，知曉瀏覽者根據(jù)哪些內(nèi)容判斷是否關(guān)注該賬號(hào)。這里我們線下調(diào)研了 12 名用戶，了解他們?cè)谛畔⒘鳟a(chǎn)品中（產(chǎn)品不限于 B 站、抖音、小紅書、知乎、快手等）進(jìn)入資料卡后，通過哪些信息和元素來決策是否關(guān)注賬號(hào)。

通過訪談，我們得到了 12 名用戶的原始表述。

我們發(fā)現(xiàn)，瀏覽者在關(guān)注賬號(hào)的時(shí)候，主要在意“內(nèi)容是不是感興趣” 、“粉絲量多少” 和 “內(nèi)容領(lǐng)域”。少量同學(xué)提到了會(huì)關(guān)注下作品數(shù)，其他信息基本不看。

原話摘錄：

• 主要看作者發(fā)的內(nèi)容，把高播放量的看一下，如果都比較感興趣就會(huì)關(guān)注。會(huì)看一下粉絲量，粉絲量多代表質(zhì)量比較好，關(guān)注不會(huì)踩坑。作品數(shù)會(huì)看一眼，如果作品太少，比如5個(gè)以下就不關(guān)注了直接看。
• 只看內(nèi)容，其他作者資料基本都不看，偶爾看一下粉絲數(shù)。教程不看粉絲數(shù)，教程如果是我需要的內(nèi)容，就算粉絲少我也會(huì)關(guān)注。
• 主要看作者別的視頻，關(guān)注主要是為收藏，不看別的只看所有視頻。會(huì)關(guān)注最近內(nèi)容的播放量怎么樣，其他基本不看。
• 那肯定是看內(nèi)容是不是感興趣啊，關(guān)鍵還是看內(nèi)容，粉絲量和點(diǎn)贊作品數(shù)會(huì)看一下，但不會(huì)作為關(guān)注的主要原因。如果粉絲量作品數(shù)多的話，關(guān)注動(dòng)力會(huì)大一些。其他的都不看。
• 還是看內(nèi)容是不是感興趣。粉絲量分情況，特別需要的內(nèi)容不關(guān)注粉絲量，搞笑類生活類的會(huì)看下粉絲量再考慮是不是關(guān)注。有一些作者如果只看個(gè)別內(nèi)容感興趣但整個(gè)領(lǐng)域不感興趣的話不會(huì)關(guān)注。通過標(biāo)題大概判斷是不是自己喜歡的類型，最主要的還是內(nèi)容，其他的不看，粉絲量會(huì)看一下別太差就行。

而在操作路徑上，進(jìn)入資料卡后：先到作品區(qū)查看內(nèi)容列表 → 拖動(dòng)頁面向上查看更多內(nèi)容 → 返回信息區(qū)查看粉絲量 → 關(guān)注賬號(hào)。呈現(xiàn)先下后上的操作路徑。

行為路徑結(jié)合關(guān)注決策，有三個(gè)關(guān)鍵元素是形成操作鏈條并綁定在一起：內(nèi)容、 粉絲數(shù) 、關(guān)注按鈕，且內(nèi)容為高播放量?jī)?nèi)容。所以高播放量?jī)?nèi)容，粉絲數(shù)是決策關(guān)鍵，激發(fā)下一步關(guān)注行為。

而且我們?cè)谠L談中發(fā)現(xiàn)，關(guān)注行為也是一個(gè)偏沖動(dòng)行為，用戶通常在進(jìn)入資料卡的幾分鐘內(nèi)做出決定，在頁面停留時(shí)間越長(zhǎng)，越不容易發(fā)生關(guān)注行為。所以在設(shè)計(jì)中，盡量縮短決策路徑，減少?zèng)Q策時(shí)間。

基于以上結(jié)論我們做了兩個(gè)方案再次進(jìn)行測(cè)試：

• 方案1：傳統(tǒng)樣式
• 方案2：高播放量?jī)?nèi)容，粉絲量，關(guān)注按鈕放置在同一區(qū)域，縮短決策路徑

為什么做一個(gè)傳統(tǒng)方案進(jìn)行對(duì)比測(cè)試也是因?yàn)楝F(xiàn)在很多產(chǎn)品資料卡頁面趨同，大家已經(jīng)形成了認(rèn)知慣性，而尊重用戶習(xí)慣也是產(chǎn)品設(shè)計(jì)中需要考量的因素。接下來，我們又找了 12 名同學(xué)進(jìn)行訪談和測(cè)試。

出乎意料的是，大家對(duì)于新事物的接受程度很高，有八名同學(xué)選擇方案 2。雖然只是理論上的選擇，并沒有延伸到實(shí)際行為，但也佐證了大家對(duì)于高播放量?jī)?nèi)容確實(shí)存在很高的需求。對(duì)于選擇方案 1（傳統(tǒng)樣式）的同學(xué)來說，主要是不喜歡橫滑操作和不想改變既有習(xí)慣。

原話摘錄：

• 喜歡方案1，不喜歡橫滑，習(xí)慣豎著操作，標(biāo)題清晰
• 喜歡方案1，橫著這樣展示好像沒有豎著這樣展示清晰，喜歡這種長(zhǎng)條的樣式
• 喜歡方案2，喜歡這個(gè)，重點(diǎn)突出，符合我的習(xí)慣，如果高播放量?jī)?nèi)容都不錯(cuò)我就會(huì)關(guān)注，省得找來找去了
• 喜歡方案2，上面這個(gè)類似youtube的popular uploads的東西能讓你第一眼看出這個(gè)UP主牛在哪

不管哪種樣式，內(nèi)容都是重中之重。既然是重中之重，大家也會(huì)注意到，有些內(nèi)容區(qū)視頻是雙列形式，有些視頻是單列形式。那么瀏覽者如何看待這種區(qū)別呢？會(huì)對(duì)關(guān)注產(chǎn)生影響嗎？

基于兩種樣式進(jìn)行訪談，比分最后打成平手。雖然在 2 選 1 的要求下大家各有各的選擇，但最后也都表示差不太多，都能接受。從信息利用率上來講，雙列的形態(tài)展示的內(nèi)容更多，而且對(duì)視頻更加友好，預(yù)覽圖比較大。所以如果是視頻內(nèi)容，可以使用雙列大預(yù)覽圖樣式。

以上是關(guān)注吸粉的部分，設(shè)計(jì)時(shí)需要綜合考慮產(chǎn)品定位和用戶行為特征進(jìn)行頁面布局。

2. 助力商業(yè)化變現(xiàn)

商業(yè)化能力是創(chuàng)作者與平臺(tái)形成強(qiáng)關(guān)系的紐帶。平臺(tái)為幫助創(chuàng)作者變現(xiàn)，不僅通過各類扶持政策給予補(bǔ)貼， 更是通過整合各類商業(yè)資源，不斷拓展商業(yè)化渠道，打通全流程商業(yè)鏈條，幫助創(chuàng)作者實(shí)現(xiàn)內(nèi)容價(jià)值最大化。

一般平臺(tái)提供商業(yè)化有三種類型：

基礎(chǔ)工具

• 商業(yè)基礎(chǔ)：平臺(tái)提供流量分成、現(xiàn)金獎(jiǎng)勵(lì)等
• 商業(yè)化功能：打賞、電商功能、內(nèi)容付費(fèi)功能、直播功能等
• 精準(zhǔn)推送功能：粉絲分組推送、粉絲必達(dá)等

平臺(tái)政策

• 扶持計(jì)劃：出臺(tái)各類流量扶持政策，賦能變現(xiàn)
• 獎(jiǎng)勵(lì)政策：MCN 簽約、創(chuàng)作活動(dòng)

資源整合

商業(yè)資源整合：整合平臺(tái)內(nèi)外部的廣告主資源、商業(yè)活動(dòng)資源、投融資服務(wù)、新媒體賬號(hào)孵化等各類資源

資料卡涉及到的商業(yè)化展示主要為：電商能力，內(nèi)容付費(fèi)，粉絲圈/粉絲付費(fèi)。當(dāng)有這些商業(yè)化內(nèi)容的時(shí)候，通常占用信息區(qū)一行區(qū)域，大多數(shù)信息流產(chǎn)品多如此。

但當(dāng)多種商業(yè)化能力同時(shí)提供時(shí)，不同的產(chǎn)品給出了不同的解決方案。比如大多數(shù)產(chǎn)品合并在信息區(qū)的一行，通過橫劃展示更多，以保證其他內(nèi)容的露出。畢竟對(duì)于瀏覽者來講，內(nèi)容才是最重要的。

有一些產(chǎn)品則沒有選擇合并的方式而每個(gè)占用一行空間，與此同時(shí)，把創(chuàng)作者的信息展示的也更為詳細(xì)，可能和本身社區(qū)類產(chǎn)品的定位有關(guān)，希望更能關(guān)注除了內(nèi)容以外，創(chuàng)作者自身的獨(dú)特價(jià)值。

還有一些產(chǎn)品則利用了內(nèi)容 tab 區(qū)域承載櫥窗和付費(fèi)服務(wù)，減少信息區(qū)的占用，還可以通過邏輯把不同渠道或不同場(chǎng)景的用戶引導(dǎo)不同 tab，讓瀏覽者看到更適合自己的內(nèi)容。

總結(jié)

資料卡里承載了很多的信息，從創(chuàng)作者的個(gè)性展示到內(nèi)容到商業(yè)化變現(xiàn)，需要我們不斷平衡每個(gè)區(qū)域的關(guān)系。

別的產(chǎn)品這么做，并不一定適合自己的業(yè)務(wù)，需要我們找準(zhǔn)自己產(chǎn)品的定位，結(jié)合當(dāng)下業(yè)務(wù)重點(diǎn)去綜合考慮。

業(yè)務(wù)是偏資訊的還是偏社區(qū)的？是偏短內(nèi)容平臺(tái)還是長(zhǎng)內(nèi)容？有沒有提供足夠多的商業(yè)變現(xiàn)能力給到創(chuàng)作者？商業(yè)化能力做的如何？不同模塊的用戶數(shù)據(jù)怎么樣？只有對(duì)現(xiàn)有業(yè)務(wù)充分了解，才知道哪些是現(xiàn)階段的重點(diǎn)，才能對(duì)一個(gè)頁面做出更有依據(jù)的設(shè)計(jì)。

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

文章來源：優(yōu)設(shè)   作者：騰訊設(shè)計(jì) 

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

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

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

消息通知可以及時(shí)地將狀態(tài)、內(nèi)容的更新觸達(dá)到用戶，用戶則可以根據(jù)收到的消息做后續(xù)判斷。但是如果沒有及時(shí)將重要消息觸達(dá)到用戶或者濫用消息，則失去了消息通知的初衷。特別是針對(duì)涉及復(fù)雜任務(wù)流程的產(chǎn)品，消息類型繁雜，難以全面盤點(diǎn)消息類型，消息系統(tǒng)的設(shè)計(jì)就顯得尤為重要。

希望通過這篇文章讓各位在設(shè)計(jì)消息通知系統(tǒng)的時(shí)候能夠更加全面高效。

如何「理解」消息通知

消息通知需要為產(chǎn)品服務(wù)，幫助用戶快速獲取對(duì)應(yīng)的通知信息。收到一條新回復(fù)的提示、工作臺(tái)展示工作進(jìn)度、朋友的來電，生活中處處是信息的交換。在 App 和網(wǎng)頁應(yīng)用中最常見的信息交換方式則是消息通知。

消息作為一種信息交換方式，抽象其過程，即為“在達(dá)到某一觸發(fā)條件下，由發(fā)送方發(fā)送消息給到接收方，接收方可針對(duì)此條消息提供反饋”。需要包含以下關(guān)鍵因素：

消息觸發(fā)時(shí)間與條件（何時(shí)什么事）：如按周期重復(fù)的時(shí)間點(diǎn)，或系統(tǒng)狀態(tài)變更、用戶操作結(jié)果等；

消息發(fā)送方（誰發(fā)現(xiàn)的事）：可能是系統(tǒng)、第三方服務(wù)商，或者某個(gè)用戶；

消息接收方（誰需要知道）：即接收方，可能是系統(tǒng)中的全部用戶，也可能會(huì)根據(jù)權(quán)限劃分推送到某個(gè)用戶群組，或者是某個(gè)特定用戶；

消息觸達(dá)渠道（怎么找到他）：短信、電話、App 內(nèi)通知等；

消息通知內(nèi)容（告訴他什么）：短信的文本、電話對(duì)話內(nèi)容、通知消息的文案等消息通知；

消息操作反饋（他可以干嘛）：主要分為只讀與操作反饋。只讀，即當(dāng)前消息用戶在瀏覽后不需要做更多的操作，主要以了解為主；操作反饋，即當(dāng)前消息需要用戶瀏覽，且在瀏覽后做相應(yīng)的后續(xù)操作。

好的消息系統(tǒng)要滿足什么條件：

全面：通知的消息項(xiàng)要完整全面，用戶才能放心地通過消息通知系統(tǒng)了解消息更新內(nèi)容；

及時(shí)：消息的觸達(dá)方式要及時(shí)有效，在消息相關(guān)事件發(fā)生后，用戶能在第一時(shí)間獲取到信息并提供操作反饋給到消息發(fā)送方；

高效：能通過合理的消息發(fā)送途徑，允許用戶設(shè)置及合并相似信息等方式避免過多消息侵?jǐn)_用戶，讓用戶能夠高效處理消息通知。

如何「盤點(diǎn)」消息通知

設(shè)計(jì)全面、及時(shí)、有效的消息通知系統(tǒng)需要對(duì)消息的六個(gè)關(guān)鍵因素進(jìn)行全面盤點(diǎn)，通過分步的方式逐步完成消息通知系統(tǒng)的設(shè)計(jì)。主要分為以下三步：

① 盤點(diǎn)系統(tǒng)中包含的消息項(xiàng)：包含其觸發(fā)條件、通知來源及通知對(duì)象。需要盤點(diǎn)完整消息項(xiàng)從而保證消息系統(tǒng)的完整性；

② 確定消息觸達(dá)渠道：包含各消息項(xiàng)的觸達(dá)渠道。讓所有消息都能觸達(dá)到用戶的同時(shí)，能夠讓重要信息更易觸達(dá)，保證消息通知的及時(shí)性；

③ 撰寫通知內(nèi)容與操作反饋：包含各消息項(xiàng)的通知內(nèi)容與操作反饋。讓消息內(nèi)容能夠有效地傳達(dá)給用戶，讓用戶能快速反饋、操作。

盤點(diǎn)的過程，即對(duì)消息通知清單的梳理。與產(chǎn)品、研發(fā)等團(tuán)隊(duì)成員的溝通也將使用該清單。最終目標(biāo)即完成下方表格的填寫：

1. 盤點(diǎn)系統(tǒng)中包含的消息項(xiàng)

當(dāng)前步驟需要對(duì)系統(tǒng)中可能會(huì)有的消息項(xiàng)進(jìn)行完整的盤點(diǎn)。盤點(diǎn)消息項(xiàng)可以通過按消息類型走查方式完成。市場(chǎng)上比較有共識(shí)的消息的分類方式主要分為禁止、警告、成功三類。但是在實(shí)際設(shè)計(jì)工作中還需要配合以下的消息分類方式去更完整地盤點(diǎn)消息項(xiàng)：

盤點(diǎn)出的每個(gè)消息項(xiàng)

都需要補(bǔ)充以下四個(gè)關(guān)鍵因素：

觸發(fā)條件：結(jié)合產(chǎn)品核心場(chǎng)景梳理完整?？赏ㄟ^狀態(tài)圖或泳道圖查缺補(bǔ)漏（詳見下段內(nèi)容）;

通知來源：可能是某個(gè)內(nèi)部系統(tǒng)，可能是某個(gè)用戶組，也可能是某個(gè)具體用戶。用戶組的劃分需要提前與產(chǎn)品、研發(fā)同事溝通完成；

通知對(duì)象：可能是全部用戶，也可能是某個(gè)用戶組或具體用戶。由觸發(fā)條件中的場(chǎng)景決定；

重要性：需要與團(tuán)隊(duì)溝通得出，可使用“高”、“中”、“低”的分類方式。

盤點(diǎn)完成的消息項(xiàng)使用下表進(jìn)行整理，方便產(chǎn)品、設(shè)計(jì)、研發(fā)之間的溝通。

用流程圖或泳道圖查缺補(bǔ)漏：

對(duì)于 ToB 或 ToG 類含有復(fù)雜狀態(tài)轉(zhuǎn)換以及任務(wù)流的產(chǎn)品，除了使用分類的方式盤點(diǎn)消息項(xiàng)，還需要對(duì)照流程圖或泳道圖查缺補(bǔ)漏，避免消息類型的遺漏。

如，顧客線上購(gòu)買商品并收取商品的商品相關(guān)狀態(tài)變化如下圖所示，每個(gè)狀態(tài)都可對(duì)應(yīng)著一條消息項(xiàng)：

線上購(gòu)物過程中的消息流程圖示意

當(dāng)系統(tǒng)內(nèi)包含多角色，且角色間流程有交互時(shí)，則可以使用泳道圖的方式進(jìn)行梳理。在泳道圖中的每一條狀態(tài)變更線，都對(duì)應(yīng)著一個(gè)狀態(tài)變更提醒。其中角色間交互的線，由于需要角色主動(dòng)處理方可進(jìn)入下一流程狀態(tài)，這條消息一般會(huì)成為一條待辦消息。

什么類型的消息不要納入消息通知系統(tǒng)：

需要注意的是，雖然通知的完備性很重要，但某些消息在前期梳理時(shí)就需要從清單中剔除，包括：

• 單純問候類消息，如“好久不見”等
• 不需要用戶知道的消息，如系統(tǒng)后臺(tái)數(shù)據(jù)更新等

2. 確定消息觸達(dá)渠道

確定要推送給用戶的消息類型后，需要給各消息匹配適合的通知方式。不同的通知方式會(huì)有不同的適用場(chǎng)景，可對(duì)照下表結(jié)合第一步整理的重要性配置消息的觸達(dá)渠道：

消息觸達(dá)渠道的配置結(jié)果到第一步的表格中：

平衡通知量：

一個(gè)好的消息系統(tǒng)需要能有效觸達(dá)的同時(shí)不過分侵?jǐn)_用戶。這就要求我們對(duì)系統(tǒng)實(shí)際運(yùn)行中可能會(huì)出現(xiàn)的通知量進(jìn)行預(yù)估，并適量調(diào)整通知方式，讓重要的消息能夠更有效及時(shí)地觸達(dá)到用戶。最終調(diào)整后的消息數(shù)量與提醒強(qiáng)度的關(guān)系最好能形成如下圖所示金字塔的模式。

提醒強(qiáng)度與消息數(shù)量的金字塔關(guān)系

合并重復(fù)消息：

對(duì)于出現(xiàn)頻率較高，且用戶不需及時(shí)了解每條消息的消息項(xiàng)，可以通過合并消息的方式減少通知的數(shù)量。合并主要有兩種方式：合并流程過往節(jié)點(diǎn)信息和合并同類消息。

• 合并流程過往節(jié)點(diǎn)消息：對(duì)于一些流程類通知，若用戶在響應(yīng)或查看前，流程已經(jīng)進(jìn)入到下一階段，歷史節(jié)點(diǎn)的信息已經(jīng)無需了解時(shí)，可合并過往流程節(jié)點(diǎn)的消息。如淘寶在展示物流時(shí)，針對(duì)同一訂單的物流，僅保留最新的一條。
• 合并同類信息：對(duì)于同類型消息過多，且用戶不需要一一查看，只需在用戶有需要的時(shí)候提供入口查看完整內(nèi)容時(shí)，自動(dòng)合并同類型的消息，減少對(duì)用戶的打擾。如 Instagram 在展示用戶動(dòng)態(tài)信息時(shí)，會(huì)合并同一天同一類型的消息。

兩種合并消息方式

智能推送：有條件的系統(tǒng)可根據(jù)用戶行為分析及用戶畫像，進(jìn)行智能推送。如基于用戶畫像按類型推送運(yùn)營(yíng)類消息，基于用戶接受消息數(shù)量，判斷是否合并消息推送等。

渠道間消息項(xiàng)的延續(xù)與統(tǒng)一：

出于信息持續(xù)性的考慮，觸達(dá)渠道之間有部分關(guān)聯(lián)關(guān)系在制定消息觸達(dá)渠道時(shí)需要注意，如：

• 若系統(tǒng)包含 App、web 等不同端，相同通知類型的消息要保持統(tǒng)一
• badge 提示需要在應(yīng)用內(nèi)消息通知模塊有對(duì)應(yīng)消息提示
• push 消息的文案需要與應(yīng)用內(nèi)消息中心保持一致

3. 撰寫通知內(nèi)容與操作反饋

通知的內(nèi)容需要滿足簡(jiǎn)明易懂的同時(shí)，還要讓用戶能夠快速處理。根據(jù)大量經(jīng)驗(yàn)總結(jié)，通知內(nèi)容的撰寫可使用一個(gè)通用撰寫公式：

在應(yīng)用撰寫公式寫內(nèi)容時(shí)，需注意以下要點(diǎn)：

• 重點(diǎn)前置：用戶觸達(dá)的第一場(chǎng)景，可能是手機(jī)的 push 消息，可能是多個(gè)消息的列表。這就要求在撰寫文案時(shí)要將重要信息前置，如驗(yàn)證碼、還款金額、事件提醒名稱等。
• 敏感信息保護(hù)：由于無法確認(rèn)用戶獲取信息的場(chǎng)景是否私密。對(duì)于金額、個(gè)人信息等隱私數(shù)據(jù)，建議在應(yīng)用內(nèi)或其他渠道提供設(shè)置項(xiàng)，提供用戶自主選擇是否在消息通知中包含具體數(shù)值。如果要默認(rèn)顯示，需要提前告知用戶。
• 來源信息露出：在郵件、短信等非產(chǎn)品自有渠道推送消息時(shí)，用戶可能會(huì)不確定消息的來源是否官方，需要包含消息來源信息。
• 提供觸發(fā)時(shí)間：當(dāng)消息的發(fā)生時(shí)間對(duì)用戶后續(xù)判斷、操作有影響時(shí)，需要在通知內(nèi)容中包含消息發(fā)生的時(shí)間。

除了以上通用注意事項(xiàng)，由于渠道本身的特征差異，還需注意以下渠道相關(guān)的要點(diǎn)：

電話：需要設(shè)定客服話術(shù)標(biāo)準(zhǔn)，一般需要在會(huì)話開始前先告知用戶來電是誰、有什么目的。在講述完通知內(nèi)容后，還應(yīng)告知用戶如何處理當(dāng)前信息，如果想了解詳細(xì)內(nèi)容該前往哪個(gè)渠道了解。

短信-來源平臺(tái)：由于通知類短信的發(fā)送號(hào)碼可能會(huì)由于服務(wù)商設(shè)置的問題導(dǎo)致有多個(gè)發(fā)送號(hào)碼發(fā)送給用戶，用戶無法根據(jù)號(hào)碼判斷發(fā)件人身份。故需要在短信最開始說明平臺(tái)來源，建立品牌認(rèn)知，避免用戶錯(cuò)認(rèn)為是垃圾短信。如：「騰訊科技」***

短信-操作反饋：由于大部分短信為純文本短信，相關(guān)操作反饋需要通過鏈接或者路徑指引的方式提供。若短信包含詳情鏈接，鏈接最好能設(shè)置為保留根域名的短鏈，如：點(diǎn)擊了解詳情：cdc.qq.com/d8djei

郵件：與短信相似會(huì)有來源可信度問題，郵件內(nèi)容需包含品牌元素，同時(shí)發(fā)件的郵箱地址后綴使用產(chǎn)品官方網(wǎng)站。另外需要注意，某些郵件軟件會(huì)設(shè)置不自動(dòng)下載圖片，郵件重要內(nèi)容不要使用圖片。

push 推送（移動(dòng)端）：是消息在移動(dòng)端的特有觸達(dá)渠道，由手機(jī)系統(tǒng)發(fā)送。發(fā)送的信息格式會(huì)受系統(tǒng)要求有所限制。最新的推送要求可參考相關(guān)設(shè)計(jì)規(guī)范文檔或接口規(guī)范。應(yīng)用的 icon 與名稱系統(tǒng)會(huì)自動(dòng)補(bǔ)充，撰寫文案時(shí)不用包含。

微信公眾號(hào)（訂閱號(hào)/服務(wù)號(hào)）：由于微信對(duì)訂閱號(hào)與服務(wù)號(hào)的消息推送方式會(huì)經(jīng)常變化，需要確認(rèn)最新的要求并撰寫文案。

在完成通知內(nèi)容以及操作反饋的梳理后，對(duì)消息梳理表格進(jìn)行更新，補(bǔ)充相關(guān)信息：

自此，消息項(xiàng)的盤點(diǎn)已經(jīng)完成，后續(xù)可基于該表格與產(chǎn)品、研發(fā)溝通。當(dāng)業(yè)務(wù)出現(xiàn)變更時(shí)，也需要對(duì)表格內(nèi)容進(jìn)行同步更新。

如何「設(shè)計(jì)」消息中心

消息通知的觸達(dá)渠道中，電話、短信、push 推送的呈現(xiàn)由系統(tǒng)決定。但是若產(chǎn)品有獨(dú)立 App，往往需要消息中心去承載全量的消息列表。本章會(huì)介紹如何設(shè)計(jì)消息中心。

不同應(yīng)用的消息中心處理方式受產(chǎn)品定位、應(yīng)用框架等因素影響，設(shè)計(jì)差異化較大。但是可以通過按路徑分割去簡(jiǎn)化設(shè)計(jì)：消息中心的入口、消息列表的組織方式、消息卡片的樣式、消息的設(shè)置等幾個(gè)部分。

1. 消息中心入口

主要有底部 tab、個(gè)人中心附近的圖標(biāo)入口、個(gè)人中心的菜單項(xiàng)等三種入口形式：

消息中心的三種入口

• 底部 tab：一般適用于產(chǎn)品核心功能中包含大量用戶間通訊，或者希望通過強(qiáng)化消息露出來促進(jìn)用戶上傳更多內(nèi)容。對(duì)于重要的消息類型可提供數(shù)字 badge 作為未讀消息數(shù)量的提示；
• 頂部圖標(biāo)入口：一般適用于產(chǎn)品消息數(shù)量較少，或消息對(duì)產(chǎn)品核心場(chǎng)景的影響較少的情況。一般會(huì)在首頁的頂部，或個(gè)人中心頁的頂部有一圖標(biāo)作為入口。圖標(biāo)會(huì)包含數(shù)字 badge 作為未讀消息數(shù)量的提示；
• 個(gè)人中心菜單項(xiàng)：一般適用于當(dāng)產(chǎn)品頂部空間作他用，沒有圖標(biāo)入口的位置時(shí)使用。

2. 消息列表

從消息中心入口點(diǎn)擊后跳轉(zhuǎn)到消息列表。由于消息的即時(shí)性，需要按時(shí)間維度排列。但是如果產(chǎn)品的消息類型較多，可通過分組合并或者分 tab 的方式提升用戶觸達(dá)消息的效率。

分組合并消息列表

分 Tab 合并消息列表

對(duì)于通知類型復(fù)雜的系統(tǒng)，還可使用二級(jí)列表的形式對(duì)消息進(jìn)一步分類展示，如微信及支付寶，由于其包含大量第三方服務(wù)，消息復(fù)雜，均設(shè)置了二級(jí)消息列表幫助用戶分類查找消息。

二級(jí)消息列表

3. 消息卡片

消息列表中的卡片有兩種樣式可選，一般在一級(jí)消息列表使用小卡片樣式，讓用戶有更高的瀏覽效率。大卡片樣式則用于二級(jí)消息列表，或當(dāng)前應(yīng)用的消息數(shù)量較少時(shí)。

消息卡片應(yīng)用示意

4. 消息中心設(shè)置

一般位于消息中心列表頁右上角，若可設(shè)置項(xiàng)較多，則提供設(shè)置入口在二級(jí)頁設(shè)置。一些常用的消息設(shè)置項(xiàng)如下：

全部已讀：對(duì)于消息數(shù)量較多，且未讀態(tài)會(huì)影響 badge 的展示時(shí)需要提供該設(shè)置項(xiàng)。點(diǎn)擊后設(shè)置列表消息項(xiàng)全部已讀。

發(fā)起對(duì)話：若系統(tǒng)包含通訊功能，一般會(huì)在消息類表頁提供發(fā)起對(duì)話的快捷入口。點(diǎn)擊后跳轉(zhuǎn)到通訊錄或好友列表。

設(shè)置通知提示方式：提供按消息類型設(shè)置某些通知項(xiàng)的接受渠道、接收時(shí)間段、各渠道之間的已讀聯(lián)動(dòng)等，如微博；或者讓用戶選擇消息通知的精確度，是否包含具體信息，如微信可接收“您收到了一條信息”的模糊消息。

打開消息推送權(quán)限：一些應(yīng)用有一些狀態(tài)更新或重要的提醒需要用戶在系統(tǒng)設(shè)置中打開當(dāng)前應(yīng)用的通知權(quán)限，會(huì)包含提示用戶打開通知的功能。這些提示需要在用戶進(jìn)行了如“辦理事項(xiàng)”、“上傳狀態(tài)”等發(fā)起流程的操作后提示。不建議在用戶啟動(dòng) App 時(shí)就彈窗提示打開通知。

總結(jié)

本文是對(duì)消息通知系統(tǒng)設(shè)計(jì)的初步介紹，希望能幫助到新手產(chǎn)品、交互、產(chǎn)品體驗(yàn)設(shè)計(jì)師快速了解消息通知系統(tǒng)的內(nèi)容盤點(diǎn)與消息中心的設(shè)計(jì)方法，制定及時(shí)、高效、完整的消息通知系統(tǒng)。

本期提綱：

• 為什么我們需要新的設(shè)計(jì)原則
• 制定新的設(shè)計(jì)原則
• 推行新的設(shè)計(jì)原則
• 新設(shè)計(jì)原則的影響

在本文中，我們將分享如何提煉出設(shè)計(jì)原則，并在團(tuán)隊(duì)中引推廣實(shí)施的。

去年，我們一群人聚在一起探討了一個(gè)棘手的問題：隨著 Spotify 的不斷發(fā)展，我們?nèi)绾卧诋a(chǎn)品迭代中保持高水平的設(shè)計(jì)質(zhì)量？

經(jīng)過研究和討論，我們確定了一個(gè)方向：為了提高質(zhì)量，我們需要清晰、有用的設(shè)計(jì)原則。一方面，我們認(rèn)為只有定義了 Spotify 的設(shè)計(jì)原則是什么，才能夠幫助團(tuán)隊(duì)評(píng)估他們是否以 “Spotify 方式” 進(jìn)行設(shè)計(jì)。另一方面，我們還希望幫助設(shè)計(jì)師在討論設(shè)計(jì)目標(biāo)和設(shè)計(jì)評(píng)審時(shí)使用相同的評(píng)價(jià)標(biāo)準(zhǔn)。通過不斷更新的設(shè)計(jì)原則可以實(shí)現(xiàn)保持高水平設(shè)計(jì)質(zhì)量的目標(biāo)。

為什么我們需要新的設(shè)計(jì)原則

為了解決設(shè)計(jì)無法標(biāo)準(zhǔn)化的問題，2013 年，Spotify 制定了最初的設(shè)計(jì)原則：內(nèi)容優(yōu)先、盡量活潑、建立熟悉感、爭(zhēng)取事半功倍、保持真實(shí)、恰如其分，這些原則讓設(shè)計(jì)師們?cè)谳敵龊陀懻摲桨傅臅r(shí)候有方向可循。有了設(shè)計(jì)原則之后，我們的設(shè)計(jì)方案在字體、色彩、圖片、板式、信息架構(gòu)和交互方式等方面都具備了一致性，即使不是設(shè)計(jì)師也能夠?qū)ξ覀兊脑O(shè)計(jì)產(chǎn)生共鳴。

Spotify 在 2013 年制定的設(shè)計(jì)原則：內(nèi)容優(yōu)先、盡量活潑、建立熟悉感、爭(zhēng)取事半功倍、保持真實(shí)、恰如其分。

但設(shè)計(jì)原則是需要與我們的業(yè)務(wù)目標(biāo)一起向前的，到了 2020 年，Spotify 已經(jīng)發(fā)生了很大變化，我們?cè)诓タ蜕霞颖栋l(fā)力，我們?yōu)橄M(fèi)者提供的不僅僅是音樂，而是包含廣播、故事等更多元的音頻形式；我們服務(wù)的對(duì)象，不僅僅是聽眾，還有藝術(shù)家和廣告商；我們的設(shè)計(jì)師團(tuán)隊(duì)也不斷的壯大，發(fā)展到現(xiàn)在已經(jīng)有近 200 人。

看著 2013 年制定的設(shè)計(jì)原則，我們問自己：這些設(shè)計(jì)原則對(duì)于我們現(xiàn)在的設(shè)計(jì)是否還是正確的？Spotify 的設(shè)計(jì)師們是否真的意識(shí)到這些設(shè)計(jì)原則的存在？答案是否定的。

我們經(jīng)過對(duì)現(xiàn)有設(shè)計(jì)原則的討論，發(fā)現(xiàn)了以下三個(gè)方面的問題：

1. 無法滿足不同內(nèi)容的需求：原本的設(shè)計(jì)原則，更專注于消費(fèi)者的音樂體驗(yàn)，然而隨著 Spotify 的發(fā)展壯大，我們的產(chǎn)品不僅僅是音樂，而是包含更多內(nèi)容的音頻，但這些原則似乎并不適用于我們?cè)O(shè)計(jì)的所有內(nèi)容。

2. 概念容易混淆：比如 “l(fā)agom” 和 “do less”，都有簡(jiǎn)約的、恰到好處的意思，在表意上存在重疊使得它們很難分辨，在評(píng)估設(shè)計(jì)方案時(shí)，我們很難確定從哪一方面評(píng)估我們的工作。

3. 數(shù)量過多的原則很難記?。焊鶕?jù)我們的調(diào)研和設(shè)計(jì)師的反饋，設(shè)計(jì)師們往往記不住這些設(shè)計(jì)原則的內(nèi)容，這也就導(dǎo)致了他們無法很好的在設(shè)計(jì)實(shí)踐中應(yīng)用。

簡(jiǎn)而言之，舊的設(shè)計(jì)原則需要更新。

制定新的設(shè)計(jì)原則

去年，我們工作組的十幾名產(chǎn)品設(shè)計(jì)師和用戶體驗(yàn)設(shè)計(jì)師，在一個(gè)協(xié)作研討會(huì)上聚在一起討論如何制定新的設(shè)計(jì)原則，我們希望團(tuán)隊(duì)中的每個(gè)人都參與進(jìn)來，而不是讓一個(gè)人來決定 Spotify 的設(shè)計(jì)原則應(yīng)該是什么。

我們通過以下三個(gè)問題，指導(dǎo)我們制定新的設(shè)計(jì)原則：

• 我們?yōu)槭裁匆贫ㄟ@些設(shè)計(jì)原則？
• 它們是給誰用的？
• 它們將如何使用？

經(jīng)過一番激烈的辯論，我們得到了答案：

• 設(shè)計(jì)原則是為了幫助設(shè)計(jì)創(chuàng)造，并為評(píng)估設(shè)計(jì)成果提供衡量標(biāo)準(zhǔn)。
• 設(shè)計(jì)原則的核心對(duì)象是我們的設(shè)計(jì)師。
• 在設(shè)計(jì)創(chuàng)作過程中設(shè)計(jì)可以幫助產(chǎn)品設(shè)計(jì)師做出設(shè)計(jì)決策；在評(píng)估設(shè)計(jì)時(shí)，提供統(tǒng)一的衡量標(biāo)準(zhǔn)，避免以短暫流行風(fēng)格進(jìn)行判斷。

然而真正的挑戰(zhàn)是應(yīng)該怎樣定義新的設(shè)計(jì)原則。我們?cè)谠O(shè)計(jì)時(shí)應(yīng)該追求什么樣的價(jià)值觀和設(shè)計(jì)屬性？產(chǎn)品應(yīng)該傳遞給用戶什么感受？

對(duì)于這些問題，每一位設(shè)計(jì)師都有自己的觀點(diǎn)。我們讓所有人將自己對(duì) spotify 的設(shè)計(jì)原則進(jìn)行定義，并將這些想法寫在便利貼上。我們將這些想法進(jìn)行總結(jié)分類，為了避免重復(fù)性的概念，我們把相似的概念歸為同一類別，并且讓大家對(duì)這些觀點(diǎn)進(jìn)行具體的描述，來幫助大家理解他們想要的設(shè)計(jì)原則。最后，我們將所有的想法都匯集在一個(gè)巨大的矩陣圖中，通過設(shè)計(jì)師們的投票來幫助我們縮小范圍，確定大家認(rèn)為合理的設(shè)計(jì)原則。

帶有便利貼的矩陣圖

通過上面的方式，我們提出了新原則的草案。同時(shí)我們也通過與用戶溝通，進(jìn)一步了解用戶對(duì)于 spotify 設(shè)計(jì)的理解，根據(jù)這些反饋，我們進(jìn)一步在設(shè)計(jì)原則的概念細(xì)節(jié)上進(jìn)行調(diào)整后，確定了新的 Spotify 設(shè)計(jì)原則：相關(guān)性、人性化、統(tǒng)一性。

Spotify 新設(shè)計(jì)原則：相關(guān)性、人性化、統(tǒng)一性

1. 相關(guān)性

把每個(gè)用戶作為一個(gè)獨(dú)立的個(gè)體來看待。

Spotify 是為每一位用戶量身定做的，我們希望 Spotify 具有個(gè)性化的感覺。為了給用戶提供專享的感受，在設(shè)計(jì)過程中，我們認(rèn)真思考我們所展示的內(nèi)容是什么、展示給誰以及在什么背景下呈現(xiàn)。簡(jiǎn)單來說，我們會(huì)在正確的時(shí)間提供正確的信息給特定的人，我們不想要 “一刀切” 的體驗(yàn)。

那么我們?cè)诰唧w的實(shí)踐中，是怎樣體現(xiàn) “相關(guān)性” 的設(shè)計(jì)原則呢？

舉個(gè)例子，同樣是歌曲 “pure seduction” 的封面，歐美國(guó)家的用戶看到的畫面可能是激情熱吻，但對(duì)于相對(duì)內(nèi)斂的東南亞國(guó)家用戶，封面的內(nèi)容就會(huì)以更加含蓄柔和的方式呈現(xiàn)。同樣的，印度用戶大多數(shù)更喜歡聽印度語的歌曲，我們?cè)谝婚_始就讓他們選擇自己喜歡的音樂語言，使用戶得到與自己具有 “相關(guān)性” 的音樂內(nèi)容。

我們尊重不同的文化和社會(huì)環(huán)境，我們希望每一個(gè)視覺呈現(xiàn)都能夠適合當(dāng)?shù)赜脩簦軌虮划?dāng)?shù)赜脩羲斫狻?

Spotify 播放列表封面和注冊(cè)頁面的示例

2. 人性化

人性化的設(shè)計(jì)是可以與用戶交流的。

Spotify 是依賴于推薦算法的產(chǎn)品，但這種技術(shù)也是基于人的喜好的。Spotify 像人類一樣，也會(huì)有情感，有自己的思考方式。我們希望用戶在使用 Spotify 時(shí)，可以有一種 “和人交流的感覺”，如果我們把 Spotify 設(shè)計(jì)得太工具化，就會(huì)失去這種感覺了。我們的每周推薦歌單封面，沒有選用精致的照片，而是直接使用用戶的個(gè)人頭像，通過這種方式我們告訴用戶 “這是只為你一個(gè)人準(zhǔn)備的歌單”，還有什么比自己的個(gè)人形象更加 “人性化” 呢？再舉個(gè)例子，在 Spotify 的兒童版本中，我們將創(chuàng)建個(gè)人資料的行為變成了創(chuàng)建有趣的卡通角色的過程，“人性化” 的虛擬形象使 Spotify 與兒童用戶更流暢的交流。

Discover Weekly 封面和 Spotify Kids 應(yīng)用程序的示例

3. 統(tǒng)一性

統(tǒng)一性可以使線下產(chǎn)品和線上產(chǎn)品實(shí)現(xiàn)品牌感。

我們的線上和線下產(chǎn)品的設(shè)計(jì)風(fēng)格都應(yīng)該具有統(tǒng)一性，即使沒有過多的說明，人們看到一眼也可以知道這是 Spotify 的設(shè)計(jì)。統(tǒng)一的設(shè)計(jì)風(fēng)格，可以讓用戶對(duì)于我們的產(chǎn)品有一定的熟悉感和信任感。正因如此，我們沒有完全拋棄 2013 年制定的的設(shè)計(jì)原則，去創(chuàng)造新的方向，而是根據(jù)之前的設(shè)計(jì)原則進(jìn)行修改和優(yōu)化。為了實(shí)現(xiàn)品牌的一致性，我們希望我們所制定的原則是可以在不同設(shè)計(jì)對(duì)象和設(shè)計(jì)場(chǎng)景中復(fù)用的。

下圖中是一個(gè)營(yíng)銷活動(dòng)的案例，無論是線下的廣告牌、宣傳海報(bào)，還是線上的活動(dòng)頁面，我們的設(shè)計(jì)風(fēng)格都保持了統(tǒng)一性，無論你在線下還是線上看到，你都會(huì)知道這是 Spotify 的產(chǎn)品。

Spotify 營(yíng)銷活動(dòng)的示例

推行新的設(shè)計(jì)原則

提出設(shè)計(jì)原則是一回事，讓每個(gè)人都參與進(jìn)來完全是另一回事。如果我們想讓新設(shè)計(jì)原則持續(xù)運(yùn)行下去，就需要一個(gè)執(zhí)行計(jì)劃。

在推行設(shè)計(jì)原則的初期，我們?cè)谝粋€(gè)設(shè)計(jì)團(tuán)隊(duì)的工作坊中試運(yùn)行了新的設(shè)計(jì)原則。通過觀察設(shè)計(jì)師在實(shí)際工作過程中，是否由于運(yùn)用了新的設(shè)計(jì)原則更好的完成了設(shè)計(jì)實(shí)踐，幫助我們判斷這些原則是否是真的發(fā)揮作用。之后，我們將這些原則納入現(xiàn)有的設(shè)計(jì)活動(dòng)中 —— 例如，在全員設(shè)計(jì)會(huì)議中，介紹這些原則，并將它們添加到我們的設(shè)計(jì)手冊(cè)和新員工的入職流程中。幾個(gè)月后，我們與 Spotify 的所有設(shè)計(jì)團(tuán)隊(duì)都開展了一系列工作坊。這樣，每個(gè)設(shè)計(jì)師都可以學(xué)習(xí)如何將設(shè)計(jì)原則應(yīng)用在工作實(shí)踐當(dāng)中。

在工作坊中，我們將設(shè)計(jì)項(xiàng)目中應(yīng)用設(shè)計(jì)原則的案例記錄下來，比如，以用戶的名字來命名歌單，建立與用戶的 “相關(guān)性”。我們將這些設(shè)計(jì)師們?cè)谡鎸?shí)的項(xiàng)目中遇到的案例整理到一起，以便其他設(shè)計(jì)師看到具體案例時(shí)，更好的理解新的設(shè)計(jì)原則。

展示如何使用設(shè)計(jì)原則的卡片

在推行新的設(shè)計(jì)原則的過程中，我們發(fā)現(xiàn)有兩點(diǎn)值得注意：

1. 恰當(dāng)?shù)陌咐?，有助于我們?duì)新設(shè)計(jì)原則的理解

口頭上表達(dá) Spotify 的設(shè)計(jì)原則是 “人性化” 或是 “相關(guān)性” 是很容易的，但是什么樣子的設(shè)計(jì)才是 “人性化” 和 “相關(guān)性” 的呢？在推行設(shè)計(jì)原則時(shí)，用例子來說明這些原則的含義非常有用，案例越多越有利于我們對(duì)這些抽象設(shè)計(jì)原則的理解。

2. 周邊產(chǎn)品可有助于設(shè)計(jì)師理解和記憶新的原則

設(shè)計(jì)原則也可以通過更多的周邊產(chǎn)品，如海報(bào)、貼紙或其他產(chǎn)品去推廣。理解新的設(shè)計(jì)原則和理念需要很多時(shí)間，周邊產(chǎn)品可以幫助團(tuán)隊(duì)理解和記憶這些原則。為了推行新的設(shè)計(jì)原則，我們已經(jīng)開始設(shè)計(jì)相關(guān)的海報(bào)、文具等周邊產(chǎn)品。

設(shè)計(jì)原則的在線下產(chǎn)品應(yīng)用的示例（由 deepyellow 和 dribbble 圖形組成的樣機(jī)模板）

在沒有 “官方” 的周邊產(chǎn)品時(shí)，一位設(shè)計(jì)師把設(shè)計(jì)原則作為自己的筆記本電腦桌面背景，這也是一個(gè)很好的理解設(shè)計(jì)原則的方法。

帶有壁紙的筆記本電腦，壁紙上寫著設(shè)計(jì)原則：相關(guān)的、人性化的、統(tǒng)一的。

新設(shè)計(jì)原則的影響

我們推出了這些設(shè)計(jì)原則后，有什么變化呢？

1. 新的設(shè)計(jì)原則更容易被大家記住和應(yīng)用

現(xiàn)在，大多數(shù)設(shè)計(jì)師都意識(shí)到了 Spotify 有設(shè)計(jì)原則。根據(jù)我們的設(shè)計(jì)行動(dòng)小組最近的一項(xiàng)調(diào)查表明，設(shè)計(jì)師們已經(jīng)了解了 “相關(guān)性、人性化和統(tǒng)一性” 的設(shè)計(jì)原則，并且在設(shè)計(jì)過程中，設(shè)計(jì)師們也會(huì)考慮這些原則。這表明新的設(shè)計(jì)原則與我們之前的六項(xiàng)原則（內(nèi)容優(yōu)先、盡量活潑、建立熟悉感、爭(zhēng)取事半功倍、保持真實(shí)、恰如其分）相比，更適用且更容易被記住，也更容易在實(shí)踐中應(yīng)用。

2. 為設(shè)計(jì)評(píng)審建立了統(tǒng)一的標(biāo)準(zhǔn)

設(shè)計(jì)師有時(shí)在設(shè)計(jì)評(píng)審時(shí)會(huì)參考這些原則，但在這方面還有有待改進(jìn)。在評(píng)審期間，設(shè)計(jì)師仍然需要有意識(shí)的參考設(shè)計(jì)原則。隨著時(shí)間的推移，我們希望這成為設(shè)計(jì)師的本能反應(yīng)。

我們開始制定新的設(shè)計(jì)原則時(shí)，目的是幫助設(shè)計(jì)師提升設(shè)計(jì)質(zhì)量。那么我們的新設(shè)計(jì)原則是否使設(shè)計(jì)質(zhì)量有所提升呢？現(xiàn)在說還為時(shí)過早。但我們希望 “相關(guān)性、人性化和統(tǒng)一性” 可以傳達(dá)出 Spotify 的產(chǎn)品目標(biāo)，這些原則能夠不斷提醒我們做得更好。

總結(jié)

設(shè)計(jì)原則不應(yīng)該是一成不變的，設(shè)計(jì)原則需要根據(jù)我們的產(chǎn)品目標(biāo)的不斷發(fā)展進(jìn)行優(yōu)化更新，不斷適應(yīng)新的設(shè)計(jì)環(huán)境和設(shè)計(jì)對(duì)象，以持續(xù)保持高質(zhì)量的設(shè)計(jì)輸出。

好的設(shè)計(jì)原則應(yīng)該是更容易被大家記住，并在工作實(shí)踐中應(yīng)用的。好的設(shè)計(jì)原則可以幫助我們?cè)诠ぷ髦凶龀稣_的設(shè)計(jì)決策，在設(shè)計(jì)評(píng)審中建立統(tǒng)一的標(biāo)準(zhǔn)。相比設(shè)計(jì)原則的制定，設(shè)計(jì)原則的推行也同樣重要，合理的推行方式可以使設(shè)計(jì)師真正的理解設(shè)計(jì)原則，并能夠像本能反應(yīng)一樣在設(shè)計(jì)實(shí)踐中應(yīng)用。

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

文章來源：優(yōu)設(shè)    作者：騰訊設(shè)計(jì)

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

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

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

對(duì)于一家做項(xiàng)目型的公司而言（今天主要講的是項(xiàng)目性質(zhì)的設(shè)計(jì)工作，產(chǎn)品可以繞道哦），時(shí)間就是成本這句話體現(xiàn)的淋漓盡致?；旧辖o到UI設(shè)計(jì)的時(shí)間，是少之又少，那么如何在一個(gè)有限的時(shí)間里，設(shè)計(jì)出優(yōu)秀的作品呢？這是接下來我想跟大家一起討論的～

我們都知道用戶體驗(yàn)五要素（戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層），這五大點(diǎn)是一個(gè)個(gè)遞進(jìn)的過程，是一個(gè)從初步的想法到最后落地的過程。也就是說我們最后看到的表現(xiàn)層（UI界面）是如何做出來的，都需要靠前面一點(diǎn)點(diǎn)的去研究、細(xì)化、分析。所以這么一個(gè)強(qiáng)大而繁瑣的過程，我們?nèi)绾我谝粋€(gè)有限的時(shí)間內(nèi)去完成，下面跟大家聊一聊我在實(shí)際工作中的例子。

一、溝通

溝通是一切事物的前提和基礎(chǔ)，這個(gè)溝通一定是要跟客戶的直接溝通，不管是遠(yuǎn)程還是面對(duì)面也好。中間人的傳達(dá)會(huì)加上個(gè)人思想理解的轉(zhuǎn)化，到你這里就不再是一手消息，也許就不會(huì)那么準(zhǔn)確。拿到一個(gè)項(xiàng)目之后，我們要了解項(xiàng)目，所以需要對(duì)項(xiàng)目的背景、目標(biāo)用戶、產(chǎn)品目標(biāo)、核心競(jìng)爭(zhēng)力進(jìn)行分別分析。

項(xiàng)目背景

為什么設(shè)計(jì)師的背后總是有一群指點(diǎn)江山的人，因?yàn)槲覀兊脑O(shè)計(jì)沒有被體現(xiàn)在產(chǎn)品上，只是表層，每次給別人解釋設(shè)計(jì)理念的時(shí)候總是說“我覺得這樣好看”、“我認(rèn)為這塊應(yīng)該用這個(gè)顏色”，卻沒有說出這個(gè)項(xiàng)目本身想要表達(dá)的是一個(gè)什么理念。

本次項(xiàng)目是需要把手機(jī)版的內(nèi)容改版成PC端，原有需求邏輯不變。那么問題來了，現(xiàn)在是一個(gè)移動(dòng)互聯(lián)網(wǎng)的天下，為什么客戶卻需要將手機(jī)端的內(nèi)容移到PC上呢？因?yàn)檫@個(gè)產(chǎn)品的使用環(huán)境之一就是在工作中，試想一下，工作中一直拿著手機(jī)刷來刷去，不知道的人還以為你在劃水。考慮到用戶使用環(huán)境的因素，就需要有PC端的設(shè)計(jì)。

目標(biāo)用戶

產(chǎn)品的核心是用戶。所以一切要從用戶的角度出發(fā)，做用戶滿意的產(chǎn)品。在用戶調(diào)研這塊，常見的用戶分析有：用戶畫像、一對(duì)一訪談、問卷調(diào)查、焦點(diǎn)小組、眼動(dòng)測(cè)試、測(cè)評(píng)以及埋點(diǎn)數(shù)據(jù)分析，但是項(xiàng)目型工作周期短，時(shí)間緊，沒有那么多的成本去做大量的分析，所以我們基本上采用三種方式去解決這個(gè)問題。1、與我們的客戶（甲方）去溝通，他們肯定更了解自己的用戶群體；2、通過現(xiàn)在市場(chǎng)上比較知名的網(wǎng)站（艾瑞網(wǎng)）中提供的大數(shù)據(jù)分析出的結(jié)果；3、如果身邊有這種用戶群體可以對(duì)他們進(jìn)行簡(jiǎn)單訪談。通過以上三種辦法也是可以得到一個(gè)較為準(zhǔn)確的調(diào)研數(shù)據(jù)的。

在跟客戶的溝通中了解到，我們的主要用戶是基中層領(lǐng)導(dǎo)，目的為提升領(lǐng)導(dǎo)力。下面會(huì)有我對(duì)這部分人群的用戶畫像分析。

項(xiàng)目目標(biāo)

知己知彼，要了解我們此次設(shè)計(jì)的主要目的是什么？需要解決什么問題？

因?yàn)檫@已經(jīng)是一個(gè)已經(jīng)上線一年的產(chǎn)品，我在跟客戶的溝通中很明確了目前有兩大問題：第一是：如何提高完成率；第二是：國(guó)外市場(chǎng)用戶使用不習(xí)慣。

這兩個(gè)信息很重要，為后面的設(shè)計(jì)提供了一個(gè)明確的方向。

核心競(jìng)爭(zhēng)力

這是體現(xiàn)我們產(chǎn)品優(yōu)勢(shì)的地方，我們需要盡量的把產(chǎn)品強(qiáng)有力的能力展現(xiàn)出來，從而獲得目標(biāo)用戶的信賴。把產(chǎn)品的能力、優(yōu)勢(shì)，可以給用戶帶來的價(jià)值，要體現(xiàn)在比價(jià)明顯一些的地方。

此次是一個(gè)本身有強(qiáng)大的體系支撐，有一個(gè)成熟的結(jié)構(gòu)，在此基礎(chǔ)上開發(fā)研制的一套產(chǎn)品，所以產(chǎn)品的目標(biāo)用戶量，獲得的成就就可以直接展示在首頁上，并且把正在學(xué)習(xí)人數(shù)或者為多少人帶來成就都體現(xiàn)出來。讓用戶感受到有這么多人都在努力，有這么多努力的人已經(jīng)完成了自己的目標(biāo)。

二、分析

我首先把手機(jī)版的功能都體驗(yàn)了一遍，隨時(shí)記錄了在使用過程中不喜歡的地方并且可以優(yōu)化的點(diǎn)，這都是點(diǎn)點(diǎn)滴滴的隨記，可以為后面設(shè)計(jì)中提供一些方向或靈感。根據(jù)上面了解到的信息。

可以得到此次設(shè)計(jì)的主要方向，第一：針對(duì)目標(biāo)用戶進(jìn)行用戶畫像分析，以此來確定如何才能更好的提升完成率；第二：針對(duì)國(guó)外同類產(chǎn)品分析，對(duì)國(guó)外市場(chǎng)用戶使用不習(xí)慣的了解，并且還要結(jié)合國(guó)內(nèi)市場(chǎng)優(yōu)化交互體驗(yàn)。

用戶畫像分析

在上面一個(gè)階段了解到我們的用戶群體是基中層領(lǐng)導(dǎo)者。根據(jù)市場(chǎng)數(shù)據(jù)分析，一般基中層領(lǐng)導(dǎo)者主要以男性居多，年齡大概在28-35歲之間，以需要提升領(lǐng)導(dǎo)力為目的，那么從這幾個(gè)特征中我們看出，這些人都有哪些特點(diǎn)呢？首先28-35歲的年齡段，基本上是已經(jīng)結(jié)婚的比較多，并且有很大一部分人群也有了孩子，這個(gè)年齡段的孩子還比較小，基本也是在2-6歲之間較多。對(duì)于這種類型家庭而言，無論是在工作上還是生活上都較為忙碌。并且因?yàn)槭穷I(lǐng)導(dǎo)者的原因，時(shí)間上也較為分散，一天下來沒有辦法集中去做一件事情，開會(huì)、匯報(bào)、溝通需求、分布任務(wù)等。由于不像在學(xué)校，事情太多也太雜，很多時(shí)候沒有辦法安心去做一件事情，導(dǎo)致規(guī)劃能力不強(qiáng)，需要借助平臺(tái)可以有個(gè)推力。

國(guó)外同類產(chǎn)品分析

其次是針對(duì)國(guó)外市場(chǎng)用戶使用不習(xí)慣這個(gè)問題，我對(duì)國(guó)外幾個(gè)大型的相關(guān)網(wǎng)站做了了解。edX、Coursera、Udacity這三個(gè)網(wǎng)站是國(guó)外市場(chǎng)使用較多，知名度較大的幾個(gè)網(wǎng)站。分別從內(nèi)容上和視覺上進(jìn)行分析，去了解國(guó)外市場(chǎng)的設(shè)計(jì)方式，用戶使用習(xí)慣等。

從以上的分析中最終得出了以下三個(gè)結(jié)論：

1、操作習(xí)慣：這個(gè)與國(guó)內(nèi)的差不多，都是從上到下，從左到右呈Z字形排列布局的方式，視覺的落腳點(diǎn)都會(huì)在畫面的左上方，所以我們?cè)谠O(shè)計(jì)的時(shí)候，要把重要或者想要表達(dá)的內(nèi)容放在這個(gè)位置，使用戶進(jìn)入頁面后就可以很快看到它。

2、采用Complexion Reduction設(shè)計(jì)語言：將標(biāo)題放大，制造視覺上的沖擊力，拉開頁面的層級(jí)關(guān)系，這種設(shè)計(jì)方式也是國(guó)外較喜歡、較常用的一種設(shè)計(jì)方式。

3、視覺風(fēng)格：國(guó)外網(wǎng)站的設(shè)計(jì)整體留白較多，讓頁面更有呼吸感，頁面上幾乎沒有無用的裝飾性元素，非常簡(jiǎn)潔，顏色使用也比較簡(jiǎn)單，不會(huì)用過多的顏色去擾亂用戶，簡(jiǎn)單的設(shè)計(jì)對(duì)于教育類的行業(yè)來說，可以減少視覺疲勞，讓眼睛放在有用的事物上去。

通過以上對(duì)用戶畫像和國(guó)外同類產(chǎn)品分析，總結(jié)出：我們要從多維度考慮，以優(yōu)化交互為目的讓頁面更有層次感，從而給用戶帶來輕松的體驗(yàn)感。是這次設(shè)計(jì)的核心思想。

1、從用戶的時(shí)間分散且忙碌的特點(diǎn)，得到我們需要盡量?jī)?yōu)化交互邏輯，減少用戶學(xué)習(xí)成本，讓用戶可以快速找到自己想要的東西；并且要讓用戶在本身就較為忙碌的情況下盡量輕松的學(xué)習(xí)，不要再給用戶增加壓力。

2、通過用戶規(guī)劃能力不夠強(qiáng)的特點(diǎn)，得到我們可以給用戶定制一個(gè)“學(xué)習(xí)計(jì)劃”，幫助用戶規(guī)劃自己的學(xué)習(xí)能力，并且在學(xué)習(xí)中增加互動(dòng)性，比如隨堂筆記、收藏、標(biāo)記這種小功能，隨時(shí)給用戶帶來互動(dòng)，讓用戶更有參與感。

3、從國(guó)外同類產(chǎn)品分析中總結(jié)出，整體國(guó)外市場(chǎng)的喜好是簡(jiǎn)潔、少裝飾、以大面積留白來增加頁面的呼吸感，采用盡量簡(jiǎn)單的卡片式的設(shè)計(jì)方式來拉開頁面的層級(jí)關(guān)系。

三、設(shè)計(jì)

現(xiàn)在就到了設(shè)計(jì)階段了，上面了解分析了那么多，給我們?cè)O(shè)計(jì)提供了那么多基礎(chǔ)材料，這個(gè)時(shí)候就派上了用場(chǎng)。上面的最后提到說：我們要從維度考慮，以優(yōu)化交互為目的讓頁面更有層次感，從而給用戶帶來輕松的體驗(yàn)感。接下來我就要講述，如何在設(shè)計(jì)去運(yùn)用了。

輕松-這個(gè)很重要。

如何讓用戶在生活和工作那么繁忙的情況下，還要努力的去學(xué)習(xí)，努力的提升自己呢？所以我們這里就采用插畫的形式，插畫像是動(dòng)畫片，讓我們回到了小時(shí)候，并且融入了AI人機(jī)對(duì)話，沉浸式的體驗(yàn)更是可以讓用戶在一個(gè)輕松的氛圍內(nèi)完成自己的學(xué)習(xí)。

增加互動(dòng)性

原有手機(jī)端的功能缺少與用戶之間的互動(dòng)，看視頻就是看視頻，做題就是做題。讓用戶在使用的時(shí)候不能按照自己的意愿去支配，這種感覺不好，一定要讓用戶有參與感，讓用戶占到主導(dǎo)性，而不是那么強(qiáng)硬的讓用戶跟著你走。所以在課程這塊的設(shè)計(jì)上第一采用了全屏的方式，讓用戶不用返回，在當(dāng)前就完成本階段的所有的課程，增加效率。第二在原有的功能上增加“課堂筆記”、“收藏”和“學(xué)習(xí)計(jì)劃”等一些小功能，讓用戶隨時(shí)按照自己的意愿去學(xué)習(xí)，實(shí)時(shí)跟產(chǎn)品進(jìn)行互動(dòng)。

層次感的表達(dá)

教育類型的網(wǎng)站，頁面相對(duì)來說比較干凈、整潔一些，可以有效減少用戶視覺疲勞，避免不必要的干擾元素出現(xiàn)影響用戶的體驗(yàn)。

在本次的設(shè)計(jì)中，學(xué)習(xí)了國(guó)外同類網(wǎng)站的設(shè)計(jì)風(fēng)格，采用卡片式的方式，將元素與標(biāo)題包裹在一起，有效與其他元素進(jìn)行區(qū)分，增加投影設(shè)計(jì)，讓頁面更加有層次感和空間感。標(biāo)題上面采用了Complexion Reduction的設(shè)計(jì)語言，將標(biāo)題放大，制造視覺上的沖擊力，拉開元素之間的層級(jí)關(guān)系，豐富頁面的設(shè)計(jì)。這也是國(guó)外網(wǎng)站較喜歡的一種設(shè)計(jì)方式。

四、走查

設(shè)計(jì)完成之后，切圖交到開發(fā)手里之后，不能算就完成了，最后走查這一步很重要，要保證實(shí)現(xiàn)出來的效果跟設(shè)計(jì)稿保持一致。不然前面說的再多，設(shè)計(jì)的再炫都是白搭，實(shí)際使用的用戶可不知道你前面都做了什么，他只感受他現(xiàn)在感受到的。

我一般的方法是用Word的方式，將有問題的頁面截圖并標(biāo)記出來問題點(diǎn)，并且按照菜單進(jìn)行分類。這樣開發(fā)對(duì)照看起來就特別明確，只用文字不配圖的表達(dá)都是耍流氓，誰知道你說的是哪個(gè)頁面的哪個(gè)點(diǎn)。用Word進(jìn)行歸類最重要后面追蹤也特別容易，可以很明確看到你哪塊問題還沒有修改，不用再反復(fù)提交。

總結(jié)一下：

一般我的設(shè)計(jì)流程就是：了解-分析-設(shè)計(jì)-走查，因?yàn)椴皇钱a(chǎn)品性質(zhì)的，所以最后的迭代或者驗(yàn)證這一步驟就會(huì)不那么重要，如果是做產(chǎn)品型的后面的驗(yàn)證也會(huì)是非常重要，因?yàn)槭琼?xiàng)目型的所以這里就不多做說明。以上就是我個(gè)人在設(shè)計(jì)中的案例分析，大家有想法的可以多溝通，多交流。

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

文章來源：站酷   作者：醬油不咸

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

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

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

What 是什么

「合理預(yù)設(shè)」是指系統(tǒng)提供默認(rèn)選項(xiàng)，這些默認(rèn)選項(xiàng)不需要用戶做任何操作，可以節(jié)省用戶完成表單的時(shí)間和精力。

這些默認(rèn)選項(xiàng)來的數(shù)據(jù)源包括: 先前輸入的會(huì)話數(shù)據(jù)、來自用戶帳戶的信息、當(dāng)前位置、當(dāng)前數(shù)據(jù)和時(shí)間等等。

案例 釘釘?shù)摹按k事項(xiàng)”設(shè)置功能，可以自動(dòng)抓取到語句中的時(shí)間信息，自動(dòng)幫助用戶默認(rèn)填寫時(shí)間，減少用戶的操作時(shí)長(zhǎng)：

相關(guān)模式 ：語句填空

Why 為什么

系統(tǒng)通過提供合理的默認(rèn)信息和答案，分擔(dān)了用戶思考和輸入信息的工作，減少時(shí)間，提高效率。

而就算預(yù)設(shè)信息不是用戶想要的，也為用戶提供了一個(gè)示例來說明答案應(yīng)該是什么樣子的。這一點(diǎn)也可以節(jié)約用戶幾秒的思考時(shí)間，或者避免輸入錯(cuò)誤的信息。

另外，合理的默認(rèn)值還可以幫助用戶應(yīng)對(duì)一些“難題”。如果用戶跳過了一塊字段，那么可能是這個(gè)問題沒有引起他的注意。用戶可能是不理解這個(gè)問題、或是默認(rèn)值的含義。輸入答案，選擇值，或單擊按鈕的動(dòng)作會(huì)迫使用戶有意識(shí)地面對(duì)這個(gè)問題。

比如疫情期間，大部分公司都需要做健康打卡，下圖中有一些選項(xiàng)是直接填了默認(rèn)值，但是有些就沒有填。比如下圖的左圖中，有關(guān)于“請(qǐng)假未到崗”這些問題，因?yàn)闆]有填默認(rèn)值，用戶就會(huì)對(duì)這個(gè)問題有印象。然后比如“今日是否有發(fā)熱癥狀”，“是否有咳嗽”這些，因?yàn)楸幌到y(tǒng)默認(rèn)填了，用戶很容易就忽略過去了。

所以一些刻意希望被關(guān)注的問題，其實(shí)最好不要提供預(yù)設(shè)值，這樣可以讓用戶感知到這個(gè)重要信息的存在，進(jìn)而加深對(duì)內(nèi)容的認(rèn)知。

When 什么時(shí)候使用

當(dāng)產(chǎn)品要求用戶提供類似表單的信息輸入（例如文本框或單選按鈕），并希望減少用戶填寫時(shí)長(zhǎng)時(shí)，可以使用提供默認(rèn)設(shè)置。

但是當(dāng)問題的答案會(huì)很敏感或是與政治相關(guān)時(shí)，最好不要提供默認(rèn)值，例如密碼、性別或公民身份等。最好也不要為用戶擅自訂閱非必要的內(nèi)容信息，如“請(qǐng)給我發(fā)送廣告郵件”等。

使用條件

· 用戶需要做類似表單的信息輸入操作；

· 系統(tǒng)希望減少用戶需要做的工作；

· 系統(tǒng)希望確保用戶填寫的準(zhǔn)確性和一致性；

· 可能用戶并不知道或者不關(guān)心答案，不需要引起用戶的重視；

· 問題的答案不屬于敏感信息或是與政治無關(guān)。

How 如何使用

設(shè)定「合理預(yù)設(shè)」有兩種普遍的用法：

1、使用一個(gè)通用的、常識(shí)性的、滿足大部分用戶需求的默認(rèn)值，預(yù)先填寫輸入框；

2、可以調(diào)用用戶早些時(shí)候提供給系統(tǒng)的信息來動(dòng)態(tài)地設(shè)置默認(rèn)值。例如，某個(gè)用戶提供了一個(gè)中國(guó)的郵政編碼，系統(tǒng)可以從這個(gè)編碼推導(dǎo)出用戶所在的省，甚至市和區(qū)的名稱。

除此之外要注意幾點(diǎn)應(yīng)用原則：

· 使用預(yù)設(shè)的默認(rèn)值不僅僅是為了防止用戶留下空白的輸入?yún)^(qū)域；

· 要充分的了解你的用戶，默認(rèn)值的設(shè)定要有絕對(duì)合理的理由 —— 否則，系統(tǒng)會(huì)給所有人帶來額外的工作量。

Example 案例

案例一：唯品會(huì)小程序在購(gòu)買服飾類選擇 SKU

用戶需求：購(gòu)買服裝時(shí)需要選擇尺碼

唯品會(huì)小程序在購(gòu)買服飾類選擇 SKU 時(shí)，每個(gè)尺碼點(diǎn)擊后會(huì)顯示對(duì)應(yīng)的衣服參數(shù)，用戶不再需要去商品描述中的尺碼表格中再找，也可以是設(shè)置好自己的身材數(shù)據(jù)，平臺(tái)會(huì)默認(rèn)選中適合你的尺碼。

案例二：螞蟻鏈實(shí)人認(rèn)證表單

用戶需求：需要根據(jù)表單內(nèi)容填寫和上傳文件

螞蟻鏈實(shí)人認(rèn)證在上傳證件時(shí)會(huì)根據(jù)用戶所在國(guó)家和地區(qū)，幫助用戶默認(rèn)選擇概率最大的選項(xiàng)，不需要用戶自己操作。

案例三：Photoshop 創(chuàng)建新文件

用戶需求：創(chuàng)建新文件，調(diào)整畫布大小

在 Photoshop CC 中創(chuàng)建新的圖像文件時(shí)，默認(rèn)情況下會(huì)從操作系統(tǒng)剪切板開始。這里的假設(shè)是用戶剛剛創(chuàng)建了一個(gè)屏幕截圖，并且正在編輯該圖像。因此，Photoshop 在剪貼板中獲取圖像的寬度和高度，并使用它們來預(yù)先填充創(chuàng)建新文件的尺寸，這是一種節(jié)省時(shí)間的聰明方法。不用擔(dān)心圖像和畫布會(huì)有尺寸不匹配的情況。

當(dāng)用戶想要調(diào)整畫布大小時(shí)，原先畫布的長(zhǎng)寬尺寸會(huì)預(yù)設(shè)出現(xiàn)在新的畫布大小里面，方便用戶進(jìn)一步進(jìn)行尺寸調(diào)整。

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

文章來源：站酷    作者：Ant_Design

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

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

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

用戶目標(biāo)與用戶調(diào)研的關(guān)系

• 什么是用戶目標(biāo)

設(shè)計(jì)要以用戶目標(biāo)為導(dǎo)向，那用戶目標(biāo)是什么呢？目標(biāo)不等于任務(wù)或活動(dòng)。目標(biāo)是對(duì)最終情況的預(yù)期，而任務(wù)和活動(dòng)只是達(dá)成一個(gè)或者一組目標(biāo)的中間步驟。

舉例：從家中抵達(dá)公司為目標(biāo)。可以使用任何一種通勤方式：公交車、地鐵、打車、徒步、自行車等等，這些通勤方式是活動(dòng)，使用并完成通勤方式的每一個(gè)步驟都是任務(wù)。

• 為什么要關(guān)注用戶目標(biāo)

關(guān)注用戶目標(biāo)方便建立更具差異化的用戶畫像，對(duì)用戶畫像劃分有顯著作用。用戶在完成目標(biāo)時(shí)會(huì)決定通過哪些任務(wù)達(dá)成目標(biāo)，完成任務(wù)會(huì)影響用戶行為，最終設(shè)計(jì)根據(jù)用戶行為做出優(yōu)化，達(dá)成用戶體驗(yàn)的提升。

因?yàn)橛脩裟繕?biāo)不同，完成的任務(wù)也不同，具體的用戶行為也會(huì)有更大的差別，設(shè)計(jì)方案也需要不斷的進(jìn)行優(yōu)化滿足不同的用戶群體。

用戶目標(biāo)如同透鏡，設(shè)計(jì)師必須通過目標(biāo)來考慮產(chǎn)品的功能。產(chǎn)品的功能和行為必須通過任務(wù)來處理目標(biāo)，通常任務(wù)越少越好。必須牢記，任務(wù)只是達(dá)到結(jié)果的手段，目標(biāo)才是最終的目的。 

不關(guān)注用戶目標(biāo)，只為實(shí)現(xiàn)商業(yè)目標(biāo)的產(chǎn)品或商業(yè)服務(wù)，都很難滿足用戶的使用體驗(yàn)。例如便利商店為了用戶成為會(huì)員從而達(dá)成商業(yè)目標(biāo)，在結(jié)賬環(huán)節(jié)進(jìn)行復(fù)雜引導(dǎo)設(shè)計(jì)，這樣的設(shè)計(jì)方案使結(jié)賬任務(wù)增加，因此用戶行為增加而又復(fù)雜，增加完成目標(biāo)的困難度，最終失去了用戶體驗(yàn)。

• 如何關(guān)注用戶目標(biāo)

通常我們無法直接詢問一個(gè)人的目標(biāo)是什么，他要么無法清楚地表述出來，要么表述得不準(zhǔn)確，或者沒有實(shí)話實(shí)說。人們完全沒有回答這種自省式問題的準(zhǔn)備。因此，設(shè)計(jì)者和研究人員需要認(rèn)真地從觀察到的行為、對(duì)他問題的回答、非言語暗示，以及諸如書架上的書名等，環(huán)境的暗示中重新構(gòu)造目標(biāo)。人物模型建模中的最關(guān)鍵任務(wù)之一是要找出目標(biāo)，簡(jiǎn)明地表述出來: 每個(gè)目標(biāo)表述成一個(gè)簡(jiǎn)單的句子。     

• 用戶目標(biāo)的分類

在用戶調(diào)研中了解用戶目標(biāo)是非常重要的，但是用戶目標(biāo)也有很多不同，可以大致分為三類：

1、體驗(yàn)?zāi)繕?biāo)是本能的體驗(yàn)產(chǎn)品，即用戶想要從產(chǎn)品或商業(yè)服務(wù)中感受什么，以此為調(diào)研可以幫助我們優(yōu)化產(chǎn)品的細(xì)節(jié)功能；

2、最終目標(biāo)是用戶操作產(chǎn)品的行為，即用戶想要從產(chǎn)品或商業(yè)服務(wù)中做什么，以此為調(diào)研可以幫助我們優(yōu)化產(chǎn)品或商業(yè)服務(wù)的流程體驗(yàn)；

3、人生目標(biāo)是個(gè)人對(duì)期待，用戶使用產(chǎn)品想要成為什么，以此為調(diào)研可以幫助我們優(yōu)化產(chǎn)品或商業(yè)服務(wù)的價(jià)值體現(xiàn)。

下面我將舉例說明三種目標(biāo)如何使用。

用戶目標(biāo)分類

用下廚舉例用戶的體驗(yàn)?zāi)繕?biāo)、終極目標(biāo)、人生目標(biāo)是怎樣的，在進(jìn)行用戶調(diào)研時(shí)需要注意哪些內(nèi)容，最終可以對(duì)設(shè)計(jì)方案提供有用的價(jià)值。

• 體驗(yàn)?zāi)繕?biāo)的調(diào)研

用戶操作下廚房的本能反應(yīng)。搜索內(nèi)容、瀏覽信息、點(diǎn)擊按鈕等操作，這些都屬于體驗(yàn)?zāi)繕?biāo)的行為。在用戶調(diào)研中需要對(duì)用戶使用產(chǎn)品的行為細(xì)節(jié)進(jìn)行調(diào)研，了解每一步操作會(huì)得到怎樣的反饋，通過調(diào)研結(jié)果優(yōu)化產(chǎn)品功能體驗(yàn)，完成用戶的體驗(yàn)?zāi)繕?biāo)。

• 終極目標(biāo)的調(diào)研

用戶參考下廚房菜譜完成烹飪。從瀏覽菜譜內(nèi)容、購(gòu)買食材、清洗切菜、上鍋烹飪、承盤食用，用戶通過下廚房的菜譜完成每一步任務(wù)學(xué)習(xí)做菜。用戶通過操作產(chǎn)品的行為，會(huì)達(dá)成一個(gè)結(jié)果。在用戶調(diào)研中，需要完整的了解用戶使用產(chǎn)品的流程，整體流程中完成每一步任務(wù)，以及每一步任務(wù)下的行為。在設(shè)計(jì)產(chǎn)品的時(shí)需要讓用戶有完整的流程體驗(yàn)，讓用戶清楚知道每一步需要做什么，順利完成每一步任務(wù)。

• 人生目標(biāo)的調(diào)研

用戶期望使用下廚房學(xué)習(xí)做菜成為一名廚師。用戶每一次使用產(chǎn)品會(huì)希望完成預(yù)期結(jié)果，最終成為想要的樣子。在用戶調(diào)研中需要了解用戶長(zhǎng)久的預(yù)期，方便了解產(chǎn)品是否可以達(dá)成用戶。在設(shè)計(jì)產(chǎn)品時(shí)，產(chǎn)品價(jià)值需要達(dá)成用戶預(yù)期。

 圖片來源：www.pexels.com

下面我將使用另一個(gè)案例，如何建立訪談提綱，來完成用戶目標(biāo)的調(diào)研。

云筆記案例

• 商業(yè)背景

某設(shè)計(jì)資源網(wǎng)站有100萬+的注冊(cè)用戶，該網(wǎng)站準(zhǔn)備在近期開發(fā)一款云筆記軟件，用戶是面向廣大的設(shè)計(jì)師和創(chuàng)意工作者，希望在6個(gè)月內(nèi)完成V1.0的試測(cè)產(chǎn)品上線。

由于云筆記市場(chǎng)上的競(jìng)爭(zhēng)對(duì)手眾多，設(shè)計(jì)資源網(wǎng)希望能夠出一款具有創(chuàng)新性設(shè)計(jì)或功能的云筆記，快速吸引一批用戶關(guān)注和使用。

該云筆記的商業(yè)目標(biāo)：用戶量快速增長(zhǎng)，增強(qiáng)用戶黏性，并培養(yǎng)一批忠實(shí)的付費(fèi)用戶。

• 產(chǎn)品背景

碎片化學(xué)習(xí)已經(jīng)成為現(xiàn)代人一種常見的學(xué)習(xí)模式，如何設(shè)計(jì)一款適合碎片化學(xué)習(xí)，靈感和idea記錄的云筆記，幫助設(shè)計(jì)和創(chuàng)意人員進(jìn)行知識(shí)的及時(shí)保存，記錄和整理。

• 拆解背景得到設(shè)計(jì)目標(biāo)

云筆記作為創(chuàng)意工作者的工作助手，在碎片化學(xué)習(xí)大背景下，創(chuàng)造性的完成創(chuàng)意收集，靈感記錄和整理。

• 分析用戶目標(biāo)

根據(jù)創(chuàng)意工作者通過使用云筆記，達(dá)成碎片化學(xué)習(xí)的目標(biāo)，分為三類：

體驗(yàn)?zāi)繕?biāo)——云筆記可能的操作，記錄、瀏覽、整理等；

終極目標(biāo)——通過使用云筆記進(jìn)行碎片化學(xué)習(xí)，達(dá)成階段性學(xué)習(xí)成果；

人生目標(biāo)——通過每一次階段性學(xué)習(xí)，達(dá)成長(zhǎng)久的預(yù)期結(jié)果。

通過拆解用戶目標(biāo)分類，了解用戶達(dá)成目標(biāo)要完成哪些任務(wù)，從而具體了解用戶做出了哪些行為，用戶行為便于為設(shè)計(jì)方案作出針對(duì)性的指引。

• 用戶訪談大綱

根據(jù)《用戶體驗(yàn)要素》書中提到設(shè)計(jì)的順序“戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層”，所以在用戶調(diào)研同樣需要符合設(shè)計(jì)順序進(jìn)行訪談“人生目標(biāo)、終極目標(biāo)、體驗(yàn)?zāi)繕?biāo)”。

了解個(gè)人特征——人生目標(biāo)

個(gè)人身份認(rèn)同

職業(yè)狀態(tài)變化

碎片化學(xué)習(xí)狀態(tài)——終極目標(biāo)

碎片化學(xué)習(xí)習(xí)慣

碎片化學(xué)習(xí)記錄

學(xué)習(xí)內(nèi)容回顧

學(xué)習(xí)內(nèi)容實(shí)踐

云筆記的使用——體驗(yàn)?zāi)繕?biāo)

云筆記記錄操作

整理回顧與輸出

使用場(chǎng)景

常用功能

完整訪談提綱：https://shimo.im/docs/rhXhkKtyxTWgHYYC/ 

• 用戶分類

為了關(guān)注并區(qū)分用戶目標(biāo)，訪談時(shí)需要層層剝繭，對(duì)用戶的學(xué)習(xí)習(xí)慣、學(xué)習(xí)場(chǎng)景、學(xué)習(xí)計(jì)劃，學(xué)習(xí)過程中使用云筆記的各種行為、需求、偏好等進(jìn)行詳細(xì)的提問，由淺入深的訪談后最終了解用戶學(xué)習(xí)的目標(biāo)。

訪談過后根據(jù)設(shè)計(jì)目標(biāo)選擇用戶終極目標(biāo)進(jìn)行用戶群體劃分，劃分后的用戶群體有著很大差異性的用戶行為，這些用戶行為將在設(shè)計(jì)方案中做出重要的指引。

滿足終極目標(biāo)即可完成初期的產(chǎn)品目標(biāo)，經(jīng)過不斷的迭代設(shè)計(jì)，滿足更多的終極目標(biāo)即可滿足人生目標(biāo)，達(dá)成產(chǎn)品的商業(yè)目標(biāo)。當(dāng)然，這些需要良好的體驗(yàn)?zāi)繕?biāo)作為基石。

• 設(shè)計(jì)建議

符合用戶碎片化學(xué)習(xí)的目標(biāo)。碎片化學(xué)習(xí)到云筆記的使用路徑為：學(xué)習(xí)目標(biāo)——瀏覽資料——記錄材料，目前的市場(chǎng)流行云筆記產(chǎn)品，只關(guān)注瀏覽與記錄的用戶過程。云筆記設(shè)計(jì)方案需要滿足兩類用戶群的不同的行為、偏好、痛點(diǎn)需求，就可以完成不同目標(biāo)的用戶群體，從而滿足適合碎片化學(xué)習(xí)產(chǎn)品價(jià)值，最終完成增強(qiáng)用戶粘性的商業(yè)目標(biāo)。

了解行業(yè)對(duì)用戶訪談的幫助

任何行業(yè)都有自身的發(fā)展史、環(huán)境、現(xiàn)狀，有時(shí)我們不需要自身分類用戶目標(biāo)有哪些，只需根據(jù)現(xiàn)有行業(yè)材料，即可完成用戶訪談的部分工作，達(dá)到事半功倍的效果。

• 游戲玩家目標(biāo)的劃分

針對(duì)游戲產(chǎn)品與衍生產(chǎn)品的設(shè)計(jì)，需要對(duì)游戲玩家進(jìn)行訪談了解游戲玩家目標(biāo)，可以使用現(xiàn)有論文結(jié)果，對(duì)訪談結(jié)果進(jìn)行整理。

在《HEARTS, CLUBS, DIAMONDS, SPADES: PLAYERS WHO SUIT MUDS》論文中，論文對(duì)游戲玩家的目標(biāo)展開了深度的探索，最終將游戲玩家分為四類：殺手型、社交型、探索型、成就型。直接使用論文中的結(jié)論可以方便我們快速了解玩家游戲目標(biāo)，完成用戶調(diào)研。

殺手型玩家目標(biāo)是制造麻煩。

游戲中的行為會(huì)具有十足的攻擊性，對(duì)其他玩家制造麻煩。例如魔獸世界中做出對(duì)立陣營(yíng)的設(shè)定，并且在劇情與游戲中給予對(duì)立陣營(yíng)制造沖突，同時(shí)給予獎(jiǎng)勵(lì)，用來完成對(duì)殺手型玩家的游戲目標(biāo)。

社交性玩家目標(biāo)不在游戲本身，而是在于游戲帶來的社交體驗(yàn)。

具體行為和好朋友一起打游戲，游戲打得好不好無所謂，重要的是和朋友在一起；或者在游戲中任何網(wǎng)友，和網(wǎng)友在一起游戲，度過每一次的游戲時(shí)光。例如英雄聯(lián)盟的“雙排、三排、五黑”的游戲玩法。

成就型玩家目標(biāo)是挑戰(zhàn)，比如世界第一或通關(guān)速度挑戰(zhàn)等。

具體行為是獲取積分與獎(jiǎng)勵(lì)，從而挑戰(zhàn)更難的游戲關(guān)卡等。所以在針對(duì)成就動(dòng)機(jī)的游戲玩家，需要做出具有挑戰(zhàn)性的游戲難度帶來的榮譽(yù)感。例如游戲成績(jī)榜單，競(jìng)賽冠軍等設(shè)置。

探索型玩家目標(biāo)是體驗(yàn)游戲的所有。

具體的行為會(huì)是收集道具，體驗(yàn)不同的游戲玩法，發(fā)現(xiàn)設(shè)計(jì)師留下的彩蛋。跟據(jù)這樣的游戲目標(biāo)，我們可以在游戲中做出相應(yīng)的題樣。例如收集道具、成就系統(tǒng)、更多的探索空間等。

• 實(shí)際案例

曾經(jīng)參加游戲社區(qū)優(yōu)化設(shè)計(jì)比賽，在用戶訪談中直接使用論文結(jié)果，使用戶訪談完成極為高效，用戶訪談結(jié)果極為豐滿。

根據(jù)游戲玩家目的進(jìn)行用戶群體劃分，在設(shè)計(jì)方案中提供滿足用戶目標(biāo)的功能設(shè)計(jì)——?dú)⑹中陀脩艚o予游戲快速攻略，社交型玩家給予開黑交友。

總結(jié)

用戶訪談是一種用戶探索方法，為了尋求用戶需求、動(dòng)機(jī)、痛點(diǎn)等，而不是一組組冰冷的數(shù)據(jù)，用戶訪談可以讓設(shè)計(jì)師真正理解用戶，讓設(shè)計(jì)方案有血有肉。

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

文章來源：站酷   作者：zhiking

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

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

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

二、背景

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

四、B端C端的不同

1.使用者不同

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

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

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

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

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

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

2.框架層

3.表現(xiàn)層

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

1.3D化

2.情感化

3.個(gè)性化

七、總結(jié)：

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

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

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

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

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

    


        


            

                 //var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
            

        

    

    


        


            


            

        

        


            

                var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery 
            

        

    

    


        


            


            

        

        


            

                var option = {
            

        

    

    


        


            


            

        

        


            

                tooltip: {
            

        

    

    


        


            


            

        

        


            

                trigger: 'axis',
            

        

    

    


        


            


            

        

        


            

                axisPointer: {
            

        

    

    


        


            


            

        

        


            

                type: 'shadow'
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                legend: {
            

        

    

    


        


            


            

        

        


            

                data: ['計(jì)劃勞務(wù)資源', "實(shí)際勞務(wù)資源"],
            

        

    

    


        


            


            

        

        


            

                //align: 'left',
            

        

    

    


        


            


            

        

        


            

                right: 10,
            

        

    

    


        


            


            

        

        


            

                textStyle: {
            

        

    

    


        


            


            

        

        


            

                color: "#fff"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                itemWidth: 14,
            

        

    

    


        


            


            

        

        


            

                itemHeight: 10,
            

        

    

    


        


            


            

        

        


            

                itemGap: 13,
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                grid: {
            

        

    

    


        


            


            

        

        


            

                left: '3%',
            

        

    

    


        


            


            

        

        


            

                right: '4%',
            

        

    

    


        


            


            

        

        


            

                bottom: '3%',
            

        

    

    


        


            


            

        

        


            

                containLabel: true
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                xAxis: [{
            

        

    

    


        


            


            

        

        


            

                type: 'category',
            

        

    

    


        


            


            

        

        


            

                data: ['1月','2月','3月', '4月'],
            

        

    

    


        


            


            

        

        


            

                axisLine: {/x軸線的顏色以及寬度
            

        

    

    


        


            


            

        

        


            

                show: true,
            

        

    

    


        


            


            

        

        


            

                lineStyle: {
            

        

    

    


        


            


            

        

        


            

                color: "rgba(219,225,255,1)",
            

        

    

    


        


            


            

        

        


            

                width: 0,
            

        

    

    


        


            


            

        

        


            

                type: "solid"
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                axisTick: {
            

        

    

    


        


            


            

        

        


            

                show: false,
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                axisLabel: {//x軸文字的配置
            

        

    

    


        


            


            

        

        


            

                show: true,
            

        

    

    


        


            


            

        

        


            

                textStyle: {
            

        

    

    


        


            


            

        

        


            

                color: "rgba(219,225,255,1)",
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                splitLine: {//分割線配置
            

        

    

    


        


            


            

        

        


            

                show:false,
            

        

    

    


        


            


            

        

        


            

                lineStyle: {
            

        

    

    


        


            


            

        

        


            

                color: "rgba(219,225,255,1)",
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }],
            

        

    

    


        


            


            

        

        


            

                yAxis: [{
            

        

    

    


        


            


            

        

        


            

                type: 'value',
            

        

    

    


        


            


            

        

        


            

                name:"單位：人",//y軸上方的單位
            

        

    

    


        


            


            

        

        


            

                nameTextStyle:{//y軸上方單位的顏色
            

        

    

    


        


            


            

        

        


            

                color:'#151515' 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                axisLabel: {//y軸文字的配置
            

        

    

    


        


            


            

        

        


            

                textStyle: {
            

        

    

    


        


            


            

        

        


            

                color: "rgba(219,225,255,1)",
            

        

    

    


        


            


            

        

        


            

                margin: 15
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                // formatter: '{value} %'//y軸的每一個(gè)刻度值后面加上‘%’號(hào)
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                axisTick: {
            

        

    

    


        


            


            

        

        


            

                show: false,
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                axisLine: {//y軸線的顏色以及寬度
            

        

    

    


        


            


            

        

        


            

                show: false,
            

        

    

    


        


            


            

        

        


            

                lineStyle: {
            

        

    

    


        


            


            

        

        


            

                color: "rgba(219,225,255,1)",
            

        

    

    


        


            


            

        

        


            

                width: 1,
            

        

    

    


        


            


            

        

        


            

                type: "solid"
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                splitLine: {//分割線配置
            

        

    

    


        


            


            

        

        


            

                show:false,
            

        

    

    


        


            


            

        

        


            

                lineStyle: {
            

        

    

    


        


            


            

        

        


            

                color: "rgba(219,225,255,1)",
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }],
            

        

    

    


        


            


            

        

        


            

                series: [{
            

        

    

    


        


            


            

        

        


            

                name: '計(jì)劃勞務(wù)資源',
            

        

    

    


        


            


            

        

        


            

                type: 'bar',
            

        

    

    


        


            


            

        

        


            

                data: [38,38,42,48],
            

        

    

    


        


            


            

        

        


            

                barWidth: 10, //柱子寬度
            

        

    

    


        


            


            

        

        


            

                barGap: .5, //柱子之間間距
            

        

    

    


        


            


            

        

        


            

                itemStyle: {
            

        

    

    


        


            


            

        

        


            

                normal: {
            

        

    

    


        


            


            

        

        


            

                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            

        

    

    


        


            


            

        

        


            

                offset: 0,
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(0, 153, 239, 0.8)'
            

        

    

    


        


            


            

        

        


            

                }, {
            

        

    

    


        


            


            

        

        


            

                offset: 1,
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(66, 187, 255, 1)'
            

        

    

    


        


            


            

        

        


            

                }]),
            

        

    

    


        


            


            

        

        


            

                opacity: 1,
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }, {
            

        

    

    


        


            


            

        

        


            

                name: '實(shí)際勞務(wù)資源',
            

        

    

    


        


            


            

        

        


            

                type: 'bar',
            

        

    

    


        


            


            

        

        


            

                data: [40, 30, 42, 50],
            

        

    

    


        


            


            

        

        


            

                barWidth: 10,
            

        

    

    


        


            


            

        

        


            

                barGap: .5,
            

        

    

    


        


            


            

        

        


            

                itemStyle: {
            

        

    

    


        


            


            

        

        


            

                normal: {
            

        

    

    


        


            


            

        

        


            

                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            

        

    

    


        


            


            

        

        


            

                offset: 0,
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(0, 242, 159, 1)'
            

        

    

    


        


            


            

        

        


            

                }, {
            

        

    

    


        


            


            

        

        


            

                offset: 1,
            

        

    

    


        


            


            

        

        


            

                color: 'rgba(76, 240, 254, 1)'
            

        

    

    


        


            


            

        

        


            

                }]),
            

        

    

    


        


            


            

        

        


            

                opacity: 1,
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }]
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                myChart.setOption(option);
            

        

    

    


        


            


            

        

        


            

                window.addEventListener("resize", () => {
            

        

    

    


        


            


            

        

        


            

                myChart.resize();
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

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

文章來源：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.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)