首頁

中后臺(tái)加載-被忽略的體驗(yàn)細(xì)節(jié)

純純

undefined

大部分設(shè)計(jì)師應(yīng)該都遇到過這種場(chǎng)景：在做設(shè)計(jì)前并沒有考慮到加載，但在進(jìn)行還原度走查或者驗(yàn)收的時(shí)候才發(fā)現(xiàn)，由于某些頁面數(shù)據(jù)請(qǐng)求較慢，導(dǎo)致在頁面中會(huì)出現(xiàn)空屏狀態(tài)。這時(shí)才想起需要在這些頁面添加動(dòng)畫來承載頁面的過渡。

歸根結(jié)底是因?yàn)樵O(shè)計(jì)師在設(shè)計(jì)過程中，更多關(guān)注頁面本身，而很少去思考頁面在呈現(xiàn)過程中何時(shí)會(huì)出現(xiàn)白屏狀態(tài)，都是后知后覺去補(bǔ)充完善。加載作為必備的一環(huán)，卻總是被忽略。目前很多B端產(chǎn)品在這方面都沒有一個(gè)系統(tǒng)合理的規(guī)劃，導(dǎo)致系統(tǒng)的加載體驗(yàn)缺失或者不統(tǒng)一。

因此希望這篇文章能夠講清楚中后臺(tái)加載出現(xiàn)的場(chǎng)景和規(guī)則，對(duì)需要深入了解加載以及在制定加載規(guī)則的設(shè)計(jì)師朋友們帶來一些幫助。


undefined

加載通俗來講就是用戶從觸發(fā)頁面操作，到頁面最終呈現(xiàn)的一個(gè)等待過程。這個(gè)過程始終存在不可避免，只是時(shí)間有快有慢?？斓募虞d只需要幾百毫秒就結(jié)束，但慢的加載就可能會(huì)達(dá)到幾秒甚至十幾秒，讓人產(chǎn)生焦慮。

而為什么會(huì)有如此大的差距，這就需要從頁面渲染的整體過程來進(jìn)行說明。當(dāng)我們從瀏覽器輸入網(wǎng)址，再到我們看到完整頁面的這個(gè)過程，網(wǎng)頁到底經(jīng)過了哪些步驟呢。經(jīng)過資料查詢和與前端確認(rèn)，整體過程可以闡述如下：

從這里我們可以看到頁面的呈現(xiàn)是程序經(jīng)過了一系列操作才最終呈現(xiàn)到我們面前的。在這里可以將其簡化為四個(gè)階段：用戶操作功能→頁面向服務(wù)器發(fā)送請(qǐng)求→服務(wù)器接受并返回?cái)?shù)據(jù)→頁面呈現(xiàn)。

而決定整個(gè)頁面加載快慢的就在于請(qǐng)求與數(shù)據(jù)這里。一般我們可以將頁面的數(shù)據(jù)分為2種類型：靜態(tài)資源和動(dòng)態(tài)資源。


靜態(tài)資源：前端的固定頁面，這里面包含HTML、CSS、JS、圖片等等，不需要查數(shù)據(jù)庫也不需要程序處理，直接就能夠顯示的頁面?？梢院唵卫斫鉃槟?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">頁面上的固定字段和結(jié)構(gòu)。這種頁面一般加載速度比較快，比如我們看到的展示型官網(wǎng)一般都是前端寫好的靜態(tài)資源。


動(dòng)態(tài)資源：而對(duì)于頁面上的動(dòng)態(tài)變化的，需要程序處理或者從數(shù)據(jù)庫中讀數(shù)據(jù)，能根據(jù)不同的條件在頁面顯示不同的數(shù)據(jù)，比如表格數(shù)據(jù)、統(tǒng)計(jì)數(shù)據(jù)等稱為動(dòng)態(tài)資源，這種都需要調(diào)用后臺(tái)接口來進(jìn)行返回，因此加載速度相比于靜態(tài)資源就會(huì)更慢。

而它們的區(qū)分點(diǎn)用下圖可以表示：

可以看到靜態(tài)資源基本是直接返回，而動(dòng)態(tài)資源還需要連接數(shù)據(jù)庫調(diào)取資源，尤其是在遇到數(shù)據(jù)庫調(diào)取較慢時(shí)就會(huì)花費(fèi)更多時(shí)間。而我們加載緩慢的大多數(shù)問題，也基本上更多出現(xiàn)在動(dòng)態(tài)資源的獲取上。


undefined

當(dāng)我們清楚加載形成的原因，接下來要做的就是在需要加載的地方對(duì)其進(jìn)行處理。這也是在設(shè)計(jì)過程中我們經(jīng)常遺漏的地方。我們先看一下目前常見的2種處理方式：「默認(rèn)處理」和「使用進(jìn)度指示器」


2.1程序默認(rèn)處理方式：直接顯示

當(dāng)我們對(duì)加載過程不進(jìn)行任何處理時(shí)，程序就會(huì)以默認(rèn)的方式進(jìn)行-即根據(jù)資源獲取速度一步步呈現(xiàn)?？梢钥吹胶俚旰笈_(tái)的處理過程就是一種默認(rèn)處理方式：

但是這種做法就會(huì)導(dǎo)致我們?cè)陧撁婕虞d過程中會(huì)出現(xiàn)空屏狀態(tài)，比如上圖切換到概覽時(shí)出現(xiàn)了空屏狀態(tài)，尤其是當(dāng)遇到了網(wǎng)絡(luò)緩慢的情況，會(huì)造成在加載時(shí)頁面停留在當(dāng)前狀態(tài)下不動(dòng)，往往會(huì)讓用戶陷入到「系統(tǒng)故障」的錯(cuò)覺。


2.2通用處理方式：進(jìn)度指示器

這個(gè)名詞說起來可能比較陌生，它指代的就是我們平時(shí)經(jīng)?？吹降募虞d動(dòng)畫、骨架屏或者進(jìn)度條等。進(jìn)度指示器的作用就是告知用戶當(dāng)前頁面并沒有故障，而是正在讀取數(shù)據(jù)。

通過添加進(jìn)度指示器來對(duì)空屏狀態(tài)進(jìn)行承載，能夠減輕用戶的焦慮感。目前很多B端產(chǎn)品更通用的形式是添加動(dòng)畫來過渡。

但是在體驗(yàn)過程中很容易發(fā)現(xiàn)一個(gè)問題，就是在產(chǎn)品的整體加載過程中，某些空屏狀態(tài)是沒被加載動(dòng)畫覆蓋到的。當(dāng)這些沒被覆蓋到的加載過程過長時(shí)，很容易出現(xiàn)焦慮感。比如神策數(shù)據(jù)在左側(cè)列表切換時(shí)的加載過程就沒被覆蓋：

想要更全面的把加載動(dòng)畫覆蓋到所有頁面，我們就需要弄清頁面在哪些狀態(tài)下會(huì)出現(xiàn)空屏狀態(tài)，從而制定統(tǒng)一的加載動(dòng)畫規(guī)則。這個(gè)問題可以先思考一下，后面解答。


undefined

在制定統(tǒng)一加載規(guī)則之前，我們需要明確一個(gè)概念，就是加載的模態(tài)與非模態(tài)。


3.1模態(tài)加載

模態(tài)加載的含義就是當(dāng)前加載會(huì)中斷用戶其余操作，用戶在這個(gè)期間只能等待加載而不能進(jìn)行其他操作（有的模態(tài)會(huì)提供取消按鈕）。如果你的頁面涉及到以下2種情況，可以考慮使用：

1.用戶當(dāng)前的操作本身不能與其他操作同時(shí)進(jìn)行。比如系統(tǒng)更新，或者工具類的導(dǎo)入導(dǎo)出相關(guān)操作，我們只能等待更新、導(dǎo)出完成才能繼續(xù)進(jìn)行后續(xù)的操作。這時(shí)候可以使用模態(tài)加載來承載，比如protopie的導(dǎo)入操作；

2.當(dāng)用戶進(jìn)入到一個(gè)全新的頁面時(shí)，這個(gè)時(shí)候頁面什么都沒有，我們只能等待頁面加載完成才能進(jìn)行后續(xù)的操作，因此在這種情況下也可以采用模態(tài)加載，比如我們剛進(jìn)入Asanan產(chǎn)品頁面看到的首屏加載動(dòng)畫：

除了上述2種情況外，你也可以根據(jù)你的業(yè)務(wù)場(chǎng)景來進(jìn)行模態(tài)加載的選擇，但建議是盡量少用模態(tài)加載，其會(huì)對(duì)用戶的打斷和干擾性比較強(qiáng)。


3.2非模態(tài)加載

非模態(tài)加載的話，這種加載通常只會(huì)出現(xiàn)在需要加載的部分，不會(huì)中斷用戶其他操作。對(duì)用戶干擾比較小。比如我們常見的功能切換加載、數(shù)據(jù)篩選加載等都屬于非模態(tài)加載。

非模態(tài)加載相比于模態(tài)加載會(huì)更輕量，因?yàn)橛脩綦S時(shí)都可以打斷也不會(huì)影響到其他操作。因此建議在大部分情況下都可以使用非模態(tài)彈窗來進(jìn)行承載，比如飛書的左側(cè)欄切換操作：


undefined

接下來我們進(jìn)入正題，在這里我從加載的角度將網(wǎng)頁整體加載過程分為呈現(xiàn)加載規(guī)則和操作加載規(guī)則。

我們先談頁面呈現(xiàn)規(guī)則。前面已經(jīng)明確加載產(chǎn)生的原因和類型后，我們就可以開始為我們的產(chǎn)品制定統(tǒng)一的加載規(guī)則，以保證后續(xù)頁面加載的一致性。


4.1 頁面的加載過程拆解

在拆解頁面的加載過程前，我們進(jìn)一步闡述之前提到的渲染原則，從前文中提到最后會(huì)經(jīng)過「解碼」和「渲染」2個(gè)步驟，這也是決定了我們看到的頁面的最終呈現(xiàn)順序：


1.頁面的渲染順序

我們看到的頁面是由HTML、CSS和JavaScript來進(jìn)行構(gòu)成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式，JavaScript則是負(fù)責(zé)頁面中的交互(當(dāng)然JS也可以控制樣式，這里只描述主要功能)。

頁面在「解碼」階段，拿到的HTML文檔會(huì)被解碼為DOM樹，同時(shí)將CSS文件解析成CSSOM，這兩者結(jié)合后一起渲染頁面，JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染，最后渲染交互。視覺的角度來講就是先看到元素樣式，然后才能進(jìn)行對(duì)應(yīng)操作。


2.頁面呈現(xiàn)的視覺順序

由于瀏覽器渲染順序一般會(huì)根據(jù)代碼的順序進(jìn)行渲染，而代碼在頁面中的構(gòu)建一般也是按照頁面的上下和左右的順序去寫的，因此我們看到的頁面的視覺呈現(xiàn)順序也是遵循從上到下，從左到右。

所以幾乎所有的產(chǎn)品都是先看到頂欄，然后左側(cè)邊欄，然后其他內(nèi)容。因此我們可以通過這個(gè)原則來拆解對(duì)應(yīng)的頁面，我們按照頁面常規(guī)結(jié)構(gòu)可以將其分為三個(gè)加載部分：頂欄、左側(cè)導(dǎo)航欄、內(nèi)容區(qū)域。而其加載順序如圖所示：

當(dāng)知道對(duì)應(yīng)頁面的渲染順序后，我們就能夠清楚在頁面渲染的過程中哪些地方會(huì)出現(xiàn)空屏了。因此將頁面加載過程拆解為如下順序：

undefined

我們的加載動(dòng)畫需要承載的就是上述這些白屏的地方，從而將加載細(xì)化為三種場(chǎng)景的拆分：全局加載+局部加載+內(nèi)部加載。如圖所示：

undefined

通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細(xì)闡述一下這三種類型的定義和用法。


4.2 全局加載

如上圖所示，全局加載的目的是為了覆蓋用戶從輸入網(wǎng)址到頁面的資源渲染的這個(gè)中間過程的空屏狀態(tài)而存在的。而這種狀態(tài)會(huì)涉及三種場(chǎng)景：

1.通過網(wǎng)址進(jìn)入到一個(gè)新的頁面時(shí)；

2.通過鼠標(biāo)右鍵或網(wǎng)頁刷新按鈕對(duì)該頁面刷新時(shí)；

3.通過頁面操作需要新開頁面時(shí)。

該全局加載的動(dòng)畫構(gòu)成為：

1：覆蓋整個(gè)頁面的加載，由純白色+加載動(dòng)畫構(gòu)成；

2：加載類型為模態(tài)加載，因?yàn)橛脩粼谶@種頁面狀態(tài)下并不能進(jìn)行其它操作。

undefined

但在這里我們需要注意全局加載的開始和結(jié)束時(shí)間：

開始時(shí)間：當(dāng)進(jìn)入頁面時(shí)立即呈現(xiàn)加載動(dòng)畫；

結(jié)束時(shí)間：當(dāng)頁面加載出頂欄的時(shí)候，此時(shí)停止加載。


為何要這么處理結(jié)束時(shí)間，原因其實(shí)圖中已經(jīng)給出了。這里再解釋一下原則：只要有頁面資源返回，我們的全局加載動(dòng)畫就會(huì)結(jié)束，隨后啟用局部加載來承接后續(xù)的狀態(tài)，避免用戶在當(dāng)前狀態(tài)長時(shí)間等待。而頂欄在一般情況下都是最先加載出來的，所以以頂欄出現(xiàn)作為結(jié)束全局加載的標(biāo)準(zhǔn)。當(dāng)然如果你的結(jié)構(gòu)沒有頂欄，可以以左側(cè)欄來作為結(jié)束標(biāo)準(zhǔn)。


4.3 局部加載

局部加載是用在頁面整體框架加載的過程中，承接在全局加載后。局部加載的使用場(chǎng)景可以概括如下：

1.頂欄加載結(jié)束后，用在剩余框架的加載效果（具體體現(xiàn)為左側(cè)邊欄和右側(cè)內(nèi)容區(qū)域）；

2.對(duì)于涉及到局部頁面的切換操作都會(huì)進(jìn)行局部加載（比如左側(cè)邊欄的切換）；

光看文字可能不是特別清晰，在這里可以舉一個(gè)動(dòng)態(tài)的例子來幫助理解：


上述展示的是在頁面呈現(xiàn)的時(shí)候一個(gè)完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動(dòng)畫上是可以有區(qū)分的，可以通過程序控制讓這種加載動(dòng)畫只在初次加載時(shí)出現(xiàn)。


第一次加載時(shí)出現(xiàn)是因?yàn)槲覀冃枰屑虞d動(dòng)畫來承接框架首次加載的空屏?xí)r間：

但第二次的時(shí)候由于有緩存（緩存會(huì)加載我們的靜態(tài)資源，能夠讓我們的頁面框架在第二次時(shí)更快顯示），這樣在讀取框架時(shí)基本不需要加載，我們就可以通過程序來直接去掉其中的局部加載動(dòng)畫，直接顯示框架來進(jìn)行呈現(xiàn)。

undefined

目前在飛書和釘釘?shù)菳端產(chǎn)品后臺(tái)均采用了這種處理方式?？梢钥吹綀D中我在第一次切換到角色管理時(shí)是有碰撞小球的局部動(dòng)畫存在的，而第二次再次進(jìn)入時(shí)則直接出現(xiàn)框架。這樣既能夠保證加載動(dòng)畫能夠覆蓋所有的空屏狀態(tài)，又避免了局部加載動(dòng)畫的頻繁出現(xiàn)。


4.4 內(nèi)部加載

內(nèi)部加載是用在頁面內(nèi)部不同模塊數(shù)據(jù)間的加載。當(dāng)框架都已經(jīng)加載結(jié)束，但某些數(shù)據(jù)由于接口比較慢，此時(shí)還沒有返回，這時(shí)我們就可以用內(nèi)部加載來進(jìn)行承載。這應(yīng)該是我們更常見的加載情況：

在進(jìn)行內(nèi)部加載的時(shí)候，需要注意，內(nèi)部加載的時(shí)候一般標(biāo)題是存在的，因?yàn)闃?biāo)題基本都是固定的，所以能夠很快被拉取。比如Zoho的內(nèi)部加載，加載時(shí)標(biāo)題已經(jīng)出現(xiàn)了：

通過這三種類型的加載，能夠覆蓋從用戶輸入網(wǎng)址，到頁面渲染完成這個(gè)頁面呈現(xiàn)過程中的全部加載場(chǎng)景。


undefined

說完頁面的呈現(xiàn)規(guī)則，再談頁面操作加載規(guī)則。頁面的操作其實(shí)對(duì)應(yīng)的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態(tài)，而且需要考慮到控件影響的其他頁面范圍。


5.1需要考慮控件本身加載

控件的加載并不是隨時(shí)都需要，我們要根據(jù)實(shí)際的數(shù)據(jù)量大小及業(yè)務(wù)場(chǎng)景來選擇性使用。目前我們需要考慮的控件及其加載狀態(tài)主要有如下：

undefined

比如圖中的按鈕的加載狀態(tài)是必備的，在很多場(chǎng)景下都會(huì)用到。但是下拉列表和級(jí)聯(lián)列表，在一般的場(chǎng)景下都不太需要進(jìn)行加載，當(dāng)遇到列表中的數(shù)據(jù)特別多或者調(diào)取特別慢時(shí)就可以考慮為其加上加載狀態(tài)。


5.2當(dāng)控件操作會(huì)影響到頁面其他元素

這種控件比如日期篩選、表格篩選或者保存等操作，當(dāng)你切換篩選條件后所有與其相關(guān)的頁面元素都會(huì)發(fā)生變化。在這種情況下我們需要考慮到被影響元素的狀態(tài)。目前的設(shè)計(jì)實(shí)現(xiàn)上有兩種做法：

1.被影響元素不可被操作，且該區(qū)域有遮罩+加載動(dòng)畫來覆蓋；

2.被影響元素可進(jìn)行操作，無任何動(dòng)畫，但操作并不會(huì)影響之前提交的結(jié)果；


這兩種方案一種是利用遮罩防止用戶無效操作，另一種則是保持了足夠的操作自由性。個(gè)人在這里更傾向于處理方式1，我認(rèn)為被影響的元素是需要有遮罩+動(dòng)畫的，來避免用戶在加載期間對(duì)其進(jìn)行無效操作，比如示例中方案2后面修改的名稱是沒有被系統(tǒng)保存的。

需要注意的是如果在產(chǎn)品中使用方案1，我們的遮罩區(qū)域只需要覆蓋被影響的元素就可以了（保存這種可以將按鈕一起覆蓋），比如通過篩選導(dǎo)致圖表數(shù)據(jù)發(fā)生變化，這時(shí)只需覆蓋圖表區(qū)域，而不用覆蓋篩選區(qū)域。這樣的好處是當(dāng)某些篩選數(shù)據(jù)出現(xiàn)加載過慢問題時(shí)，用戶可以通過切換篩選項(xiàng)來打斷當(dāng)前加載。

上述描述的操作都是針對(duì)于當(dāng)前頁加載。當(dāng)控件導(dǎo)致頁面刷新或者跳轉(zhuǎn)時(shí)，則整體遵照頁面呈現(xiàn)的規(guī)則進(jìn)行加載。


undefined

上面闡述的加載已經(jīng)完全能夠覆蓋我們頁面整體的加載，但是還是需要提及一下骨架屏和進(jìn)度條這兩種加載形式。

undefined

先說骨架屏。實(shí)際上骨架屏的使用效果體驗(yàn)是優(yōu)于加載動(dòng)畫的體驗(yàn)的（骨架屏的加入使用會(huì)讓用戶感覺網(wǎng)頁出現(xiàn)的更快）。那么為什么在大部分的B端業(yè)務(wù)頁面中沒被用到呢，主要有2點(diǎn)原因：

1.每種骨架屏都需要進(jìn)行對(duì)應(yīng)的定制開發(fā)，需要與加載后的頁面框架保持一致，這會(huì)增加了開發(fā)成本。

2.中后臺(tái)的業(yè)務(wù)界面對(duì)來說固定結(jié)構(gòu)的頁面會(huì)較少，這對(duì)于骨架屏的使用機(jī)會(huì)就相對(duì)較少。

個(gè)人認(rèn)為在前期可以以統(tǒng)一加載體驗(yàn)為主，在后期業(yè)務(wù)相對(duì)成熟后，可以針對(duì)固定結(jié)構(gòu)，通過骨架屏的使用優(yōu)化加載體驗(yàn)。


再說進(jìn)度條。我理解的進(jìn)度條的使用條件：對(duì)于加載時(shí)間較長的規(guī)定場(chǎng)景可以考慮用進(jìn)度條來承載，比如我們常見的游戲加載中進(jìn)度條就用得比較多，因?yàn)橛螒蛞话阗Y源比較大。還比如figma在進(jìn)入設(shè)計(jì)文件的過程中也采用了進(jìn)度條加載也是因?yàn)樵O(shè)計(jì)文件可能會(huì)很大。

進(jìn)度條在特定場(chǎng)景下能夠緩解用戶焦慮，讓用戶知道進(jìn)展。但進(jìn)度條在多數(shù)情況下都抓取不到程序的真實(shí)進(jìn)度，這也會(huì)導(dǎo)致有時(shí)候我們看著加載到99%，那最后的1%遲遲加載不出來的的原因。目前很多中后臺(tái)產(chǎn)品對(duì)于進(jìn)度條加載使用相對(duì)較少的原因，很大程度是沒有那種加載特別長的場(chǎng)景。


因此這兩種加載場(chǎng)景的使用會(huì)更加定制化，如果需要使用請(qǐng)根據(jù)具體的業(yè)務(wù)場(chǎng)景來進(jìn)行選擇。


如果把加載動(dòng)畫等比作頁面加載的外在，那么緩存和加載策略則是頁面加載的內(nèi)核，合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度，讓用戶更快速地看到頁面。


7.1 關(guān)于頁面的資源緩存

大家肯定聽過緩存這個(gè)概念，前后端都可以使用緩存。緩存就是數(shù)據(jù)交換的緩沖區(qū)（稱作Cache），是存貯數(shù)據(jù)（使用頻繁的數(shù)據(jù)）的臨時(shí)地方。在這里主要講一下瀏覽器緩存：

undefined

從這張圖可以看出，服務(wù)器在請(qǐng)求數(shù)據(jù)時(shí)，會(huì)進(jìn)行緩存的判斷，如果有緩存則首先讀取緩存，如果沒有則從服務(wù)器中拿取。調(diào)取緩存會(huì)在很大程度上提升頁面的加載速度，縮短了從服務(wù)獲取數(shù)據(jù)的時(shí)間。通常瀏覽器會(huì)主動(dòng)對(duì)頁面的靜態(tài)資源進(jìn)行對(duì)應(yīng)的緩存，這也就解釋了我們第二次進(jìn)入頁面會(huì)比初次進(jìn)入頁面時(shí)加載快的原因。


但程序其實(shí)也可以對(duì)動(dòng)態(tài)資源（也就是需要從數(shù)據(jù)庫等拿到的資源）進(jìn)行緩存的，并且可以設(shè)置緩存的過期時(shí)間（比如設(shè)置過期時(shí)間為1小時(shí)，那么1小時(shí)過后就會(huì)重新拉取新資源）。對(duì)于某些動(dòng)態(tài)資源拉取過慢并且更新頻率不高的我們可以采用動(dòng)態(tài)資源緩存的策略，從而提升整體的頁面加載體驗(yàn)。


7.2 加載策略的正確使用

現(xiàn)階段我們常用的主要有下列6種加載策略：

加載策略的本質(zhì)就是通過對(duì)應(yīng)的加載設(shè)置來縮短產(chǎn)品與服務(wù)器交換數(shù)據(jù)的時(shí)間，接下來我們?cè)敿?xì)看一下每種加載策略的具體使用策略：


7.2.1懶加載

懶加載是當(dāng)內(nèi)容落入視窗被用戶看到時(shí)，才會(huì)進(jìn)行加載。這種比較節(jié)省資源和減輕服務(wù)器壓力。對(duì)于當(dāng)前頁面內(nèi)容很多的可以采用這種加載策略。而這種加載策略的設(shè)計(jì)，能夠讓用戶更快看到當(dāng)前屏幕內(nèi)的內(nèi)容，減少等待時(shí)間。

比如蘋果官網(wǎng)的加載策略就采取了這樣的一種方式。我們可以看到右側(cè)的資源只有在我們向下滾動(dòng)出現(xiàn)在屏幕中時(shí)才會(huì)進(jìn)行對(duì)應(yīng)的加載，這樣能夠保證用戶在進(jìn)入網(wǎng)頁第一時(shí)間看到首屏內(nèi)容，并且用戶幾乎感知不到這種加載延遲。


7.2.2預(yù)加載

預(yù)加載是在頁面空閑的時(shí)候就把用戶即將用到的資源加載完存到緩存中，等用戶需要使用時(shí)，通過緩存直接調(diào)用呈現(xiàn)。比如用戶在看A頁面的時(shí)候，就可以通過預(yù)加載來準(zhǔn)備用戶需要的B頁面資源。當(dāng)用戶需要B頁面的時(shí)候，立刻就可以呈現(xiàn)。

比如某些頁面在實(shí)際中加載比較慢，這個(gè)時(shí)候就可以考慮是否用預(yù)加載的策略來提升網(wǎng)頁整體加載速度。比如知乎的視頻和文字在都進(jìn)行了對(duì)應(yīng)的預(yù)加載。即使當(dāng)你處于斷網(wǎng)狀態(tài)（圖中我將頁面網(wǎng)絡(luò)切換為斷開狀態(tài)），可以看到依舊可以點(diǎn)擊全文進(jìn)行查看和視頻的部分預(yù)覽。


7.2.3分步加載

當(dāng)頁面中有文字和圖片時(shí)，優(yōu)先加載占用網(wǎng)絡(luò)資源小的，比如文字資源，然后再進(jìn)行占用資源較大的加載，比如圖片資源。通過分步加載也能有效減少頁面等待時(shí)間。比如大眾點(diǎn)評(píng)等圖片很多的網(wǎng)站往往會(huì)采用這種加載策略。


7.2.4分頁加載

分頁加載是我們目前很常見的方式，比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載，分頁適用于數(shù)據(jù)量比較大的內(nèi)容，比如表格數(shù)據(jù)或者大數(shù)據(jù)搜索場(chǎng)景可以使用。

分頁加載可以理解為當(dāng)前獲取到100條數(shù)據(jù)，但是將100條數(shù)據(jù)分別拆成5頁每頁20條數(shù)據(jù)提供給用戶，這樣也可以讓用戶減少等待時(shí)間：

在目前還有一種滾動(dòng)分頁的加載，就是不提供視覺上的分頁，而是當(dāng)用戶進(jìn)行滾動(dòng)時(shí)，自動(dòng)加載一定數(shù)量的內(nèi)容，這樣從用戶的視角看就是一個(gè)連續(xù)不間斷的數(shù)據(jù)展示。比如一些資訊類的網(wǎng)站就是采用的這種加載策略，有的也把這種滾動(dòng)分頁的方式稱為自動(dòng)加載。


7.2.5延遲加載

這里講的延遲加載更多的是一種防護(hù)加載機(jī)制，一般延遲設(shè)置的時(shí)間為300ms。這里的延遲加載有2種使用，第一種多用于搜索，通過延遲加載能夠讓用戶更好進(jìn)行連續(xù)輸入，避免搜索結(jié)果被高頻率刷新，同時(shí)緩解服務(wù)器壓力。如下圖，可以看到我在輸入1后會(huì)有個(gè)延遲才出現(xiàn)加載列表，并且我在連續(xù)輸入12306的過程中是沒有對(duì)結(jié)果進(jìn)行更新的，當(dāng)我輸入完后才更新。

第二種則是通過延遲加載可以更好防止反復(fù)操作。當(dāng)用戶在同一組件上面進(jìn)行切換時(shí)，如果該操作小于300ms,則只記錄最后的點(diǎn)擊操作。這種情況可以用在我們的表格翻頁和開關(guān)等狀態(tài)上，防止用戶瘋狂點(diǎn)擊導(dǎo)致數(shù)據(jù)反復(fù)請(qǐng)求和屏幕閃爍的情況。我們可以通過下面這個(gè)組件演示例子來進(jìn)行對(duì)應(yīng)的感知：

延遲加載更多用于上述2種場(chǎng)景，對(duì)于其他情況的加載，直接加上就可以了，并不需要刻意設(shè)置延遲。


7.2.6后臺(tái)加載

這里想要表達(dá)的含義是當(dāng)用戶在操作后，客戶端立即反饋操作成功，然后把請(qǐng)求放到后臺(tái)與服務(wù)器交互，這一過程用戶不需要了解，不需要等待。無論在什么網(wǎng)絡(luò)環(huán)境下你基本上都能操作成功。比如微信的朋友圈發(fā)布就是這樣的操作，即使你在斷網(wǎng)的情況下都能夠立刻發(fā)布，但實(shí)際上這個(gè)時(shí)候并沒有發(fā)送成功，還需要上傳到服務(wù)器后才你的朋友們才能看見。


這樣的好處是用戶使用起來非常流暢，但是壞處就是，當(dāng)操作不成功時(shí)，用戶并不能及時(shí)進(jìn)行感知，仍然以為操作已經(jīng)成功了。所以這種場(chǎng)景我們也需要根據(jù)場(chǎng)景進(jìn)行對(duì)應(yīng)的判斷和選擇。對(duì)于復(fù)雜的B端場(chǎng)景個(gè)人建議慎用或者不用這種操作，畢竟很多發(fā)布的功能會(huì)同時(shí)影響很多業(yè)務(wù)線。


這里就拿微信的朋友圈發(fā)布來進(jìn)行舉例，下方手機(jī)狀態(tài)都為斷網(wǎng)狀態(tài)，可以看到微信立即發(fā)布，而貼吧在這種狀態(tài)下提示網(wǎng)絡(luò)錯(cuò)誤。

通過這些加載策略的選擇性使用，能夠在特定環(huán)境下提升我們系統(tǒng)的整體使用體驗(yàn)。因此我們需要對(duì)這些加載策略有一個(gè)比較全面的認(rèn)識(shí)，這樣我們不僅知道加載慢的原因，還可以利用加載策略去提升頁面性能。



在整體的加載過程中，別忘了考慮加載異常的情況。在通常情況下我們會(huì)我們會(huì)遇到網(wǎng)絡(luò)速度過慢或者突然斷網(wǎng)這兩種狀況讓頁面一直加載不出來，這時(shí)我們需要考慮對(duì)長時(shí)間的加載過程進(jìn)行處理。

通常做法是我們要對(duì)加載狀態(tài)有一個(gè)最長時(shí)間的限制，一般為加載不超過10s，超過最長時(shí)間后就進(jìn)行異常狀態(tài)顯示（提示語+刷新按鈕）。這樣用戶可以選擇重新加載或者離開此頁面，而不是一直等待。

在這里還想到一點(diǎn)，就是對(duì)于編輯頁面，我們應(yīng)當(dāng)加入網(wǎng)絡(luò)連接是否異常的判斷，比如當(dāng)進(jìn)入到編輯頁面后，如果遇到網(wǎng)絡(luò)斷開，需要在頁面的頂部加上常駐提示條【當(dāng)前網(wǎng)絡(luò)連接斷開】，這樣用戶能夠及時(shí)進(jìn)行察覺并修復(fù)。避免在無網(wǎng)環(huán)境下繼續(xù)輸入。這對(duì)于某些需要輸入很多內(nèi)容且并不提供本地保存的頁面來講是非常有必要的。


加載在設(shè)計(jì)中是非常容易被忽略的模塊，因?yàn)樵诖蟛糠智闆r下網(wǎng)絡(luò)速度都較快，人們很難深刻地感受到加載過程。但加載卻在產(chǎn)品運(yùn)行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個(gè)點(diǎn)：

1.我們需要明白加載為什么會(huì)出現(xiàn)，這個(gè)過程是怎么樣的；

2.加載的通用處理手段是怎么樣的，非通用處理方式有哪些；

3.通過緩存和對(duì)應(yīng)加載策略能夠讓頁面加載速度有本質(zhì)上的提升。


這樣當(dāng)我們?cè)陧撁嫔嫌龅郊虞d速度慢的問題時(shí)，在為其加上動(dòng)畫承載過渡的同時(shí)，還應(yīng)該思考其加載緩慢背后的原因，是因?yàn)閿?shù)據(jù)量太大還是加載策略的相關(guān)問題，是否可以將其進(jìn)行懶加載或者分步加載，這時(shí)我應(yīng)該去找前端或者后端如何溝通。從源頭上解決加載時(shí)間長的問題，才是后續(xù)產(chǎn)品設(shè)計(jì)過程中的長久思路。


作者：蒙東東    來源：站酷

藍(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



評(píng)論(0) 瀏覽(804)

信息無障礙研究與應(yīng)用

純純

信息無障礙，是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著互聯(lián)網(wǎng)覆蓋越來越廣，對(duì)于身體有局限的群體而言，更加迫切通過互聯(lián)網(wǎng)獲取信息，而這就需要互聯(lián)網(wǎng)產(chǎn)品進(jìn)行信息無障礙的優(yōu)化。在我國其受益人群至少包括：8500多萬殘障人士，2億多60歲以上的老年人，數(shù)量龐大。率先考慮信息無障礙能為產(chǎn)品增加優(yōu)勢(shì)而帶來更多用戶。


如今智能手機(jī)掀起了一場(chǎng)無障礙輔助工具的革命，而站在這個(gè)關(guān)鍵點(diǎn)的互聯(lián)網(wǎng)設(shè)計(jì)師，也要開始行動(dòng)起來，先從以下這幾個(gè)容易實(shí)現(xiàn)的事情開始著手進(jìn)行無障礙的優(yōu)化吧。




關(guān)于讀屏


對(duì)視障用戶來說，是用聽取讀屏語音來了解你設(shè)計(jì)的界面信息的。讀屏軟件就像他們了解互聯(lián)網(wǎng)世界的眼睛，它的原理是直接讀出界面里的文字，如果icon按鈕未加無障礙標(biāo)簽讀屏?xí)x為"無法發(fā)音"，那么視障者就無法獲取這些信息，自然也就無法使用你設(shè)計(jì)的功能。


解決的辦法是:


1.需要在產(chǎn)品代碼中添加無障礙標(biāo)簽(Android :contentDescription ; iOS:accessibilityLabel在對(duì)應(yīng)的開發(fā)者文檔里很容易找到，可以發(fā)給你合作的研發(fā)同學(xué))。


2.裝飾性icon可隱藏標(biāo)簽不讀，提升讀屏效率。不建議不做處理也不加標(biāo)簽，那么用戶聽到的就是“無標(biāo)簽”，這樣會(huì)讓用戶以為這里有什么重要信息讀不到而感到不安。


3.標(biāo)簽語義簡短準(zhǔn)確，盡可能使用動(dòng)詞。


4.必要時(shí)需要走查焦點(diǎn)順序，確保不會(huì)被錯(cuò)誤的焦點(diǎn)順序誤導(dǎo)頁面含義。 



并且最好由設(shè)計(jì)師進(jìn)行語義的標(biāo)注，因?yàn)樵O(shè)計(jì)師才是對(duì)頁面里圖形應(yīng)用最了解的人。避免出現(xiàn)“搜索”被寫成“放大鏡”、或者是“searchBtn_123”之類的情況。 





關(guān)于色彩


顏色可以用來區(qū)分信息數(shù)據(jù)的類別和維度，也可以幫助傳達(dá)情緒等重要信息。然而，世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾。我們通常籠統(tǒng)的稱這類人群為“色盲”，他們是典型的識(shí)別顏色有問題的群體。


"色彩"的目標(biāo)是"易于感知"，指的是互聯(lián)網(wǎng)產(chǎn)品的內(nèi)容信息的色彩對(duì)任何人來說，都應(yīng)該擁有足夠高的辨識(shí)度和舒適度，我從以下4個(gè)方向進(jìn)行介紹。 

 

1.更安全的配色


a.色盲人群：


設(shè)計(jì)師在進(jìn)行設(shè)計(jì)配色時(shí)應(yīng)時(shí)刻自測(cè)，避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色，因?yàn)檫@樣的配色勢(shì)必會(huì)造成色盲用戶的可讀性問題。并且，紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對(duì)他們來說顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內(nèi)的深紅色的強(qiáng)調(diào)字，從而遺漏關(guān)鍵信息（設(shè)計(jì)時(shí)，可利用此插件模擬色盲眼中的顏色：Color Oracle） 。




b.文化差異：


因?yàn)樯试诓煌瑖椅幕写聿煌x,所以對(duì)于國際用戶來說也是存在障礙的。在西方文化里，紅色通常用于表示消極趨勢(shì)，而綠色則表示積極趨勢(shì)，但在東方文化中卻正相反。


c.特殊群體：


臨床醫(yī)學(xué)研究表明對(duì)于部分自閉癥患者來說，高飽和高對(duì)比度的顏色，甚至只是黃色都會(huì)讓他們感到不舒服和不安，因此在自閉癥康復(fù)中心是不會(huì)出現(xiàn)過于對(duì)比刺激的顏色的。


另外，老年群體隨著年齡的增長，晶狀體變黃變渾濁，會(huì)選擇性的吸收藍(lán)光，從而導(dǎo)致老年人對(duì)藍(lán)色的鑒別能力下降明顯，如果你的主流用戶是老年人，請(qǐng)盡量避免將藍(lán)色運(yùn)用到重要的按鍵中去。



2.更強(qiáng)的文本對(duì)比度


文本對(duì)比度與可讀性息息相關(guān)，它測(cè)量的文本顏色和背景色之間的明度差。WCAG AA對(duì)于文本對(duì)比度的規(guī)范是：4.5:1，若字號(hào)夠大（>18pt，或粗體>14pt）時(shí)，標(biāo)準(zhǔn)可降到3:1。如果滿足4.5:1這個(gè)標(biāo)準(zhǔn)會(huì)讓你的頁面視覺看起來不那么優(yōu)雅，可以嘗試局部加強(qiáng)可視性的方法：



關(guān)于可讀性其他需要注意的點(diǎn)：盡量不要在圖片上疊加文字，除非你能保證圖片背景顏色單一且對(duì)比度足夠高。



Material Design設(shè)計(jì)規(guī)范建議，需要淡淡的遮罩確保上層文字的可讀性；并且不建議極高對(duì)比度的文本，因?yàn)檫@樣會(huì)使一部分視障者看到的字旋轉(zhuǎn)模糊。


 

3.更多樣的視覺變量 


顏色是數(shù)據(jù)可視化中最常用的視覺變量之一。但是對(duì)于無法辨別顏色的用戶，如果顏色作為的唯一的提示信息，他們可能將無法理解你傳達(dá)的信息。那么有什么改善的方法呢?


a. 不讓顏色成為唯一的視覺變量：除顏色外，我們可以追加圖標(biāo)、紋理或者文字來加以標(biāo)注。



b.色盲模式：Trello作為一款工具產(chǎn)品，在標(biāo)注信息時(shí)，提供色盲模式可打開和關(guān)閉，并用不同紋理加以區(qū)別，色盲友好模式是一個(gè)很好的范例，它可以有效幫助色盲，又不會(huì)妨礙非色盲用戶。


c.以明度飽和度為度量：雖然色盲人士對(duì)色相的辨識(shí)能力較弱，但卻對(duì)明度、飽和度非常敏感。我們可以使用明度或飽和度區(qū)分信息。看這個(gè)例子：傳統(tǒng)熱力圖習(xí)慣用暖色代表熱力高冷色代表熱力低，Google Analaytics的熱力圖采用深藍(lán)色顯示熱度高的時(shí)段、淺藍(lán)色顯示熱度低的時(shí)段，簡單有效。




關(guān)于控件


控件可以是按鈕、鏈接、輸入框或任何帶有事件監(jiān)聽器的HTML元素。控件太小或彼此太靠近可能會(huì)給用戶帶來糟糕的體驗(yàn)問題。


比如對(duì)于無法用指尖精確定位的用戶（有顫抖疾病的用戶），或因年齡而導(dǎo)致靈活性降低的老年用戶，都會(huì)難以點(diǎn)擊過小控件。


為了給用戶足夠的間距來準(zhǔn)確選擇控件，Material Design建議至少48×48dp，iOS設(shè)計(jì)系統(tǒng)將目標(biāo)熱區(qū)尺寸最小值定為44 x 44pt，而WCAG對(duì)WEB的規(guī)范則建議至少44×44px。一個(gè)控件可以在視覺上是24 x 24px，但是在所有邊上都會(huì)有一個(gè)額外的填充使它達(dá)到44×44px。并且太靠近的控件可能會(huì)因誤點(diǎn)擊而帶來挫敗感，所以同時(shí)還建議控件之間的空間足夠遠(yuǎn)以減少誤觸。Microsoft給pc的建議是至少有8px的間距，而Material Design推薦的控件至少間隔8dp。我們可根據(jù)以上規(guī)范來審視自己設(shè)計(jì)的控件。




關(guān)于文字


1.文字大?。?/strong>


有視覺障礙的用戶可能會(huì)把字號(hào)調(diào)得很大。你需要保證你的設(shè)計(jì)在大字號(hào)的情況下內(nèi)容不會(huì)溢出或排版錯(cuò)亂。做設(shè)計(jì)的時(shí)候，可以使用2倍以上的字體測(cè)試你的設(shè)計(jì)。


在互聯(lián)網(wǎng)早期，設(shè)計(jì)了字號(hào)在9-14px之間的網(wǎng)頁，如今已與20年前不同，瀏覽器已經(jīng)可以在任何尺寸設(shè)備上使用，小到智能手表大到4K熒幕，我們不能再使用固定的字號(hào)來設(shè)計(jì)產(chǎn)品了。字號(hào)應(yīng)該與設(shè)計(jì)本身一樣具有響應(yīng)性。例如可以允許用戶自定義字號(hào)、行高或字間距等以達(dá)到舒適的閱讀水平。


 

2.文字樣式:


文字作為傳達(dá)信息的重要載體，對(duì)于許多用戶來說，裝飾字體或草書字體都是比較難閱讀的。且用過細(xì)的、過小的、斜體和全大寫文本，也會(huì)降低識(shí)別度。




關(guān)于動(dòng)效


有效的動(dòng)畫可以給頁面帶來生命感，但如果濫用動(dòng)效不僅會(huì)分散用戶注意力，嚴(yán)重的話對(duì)某些用戶來說來說可能是致命的（光敏性癲癇的臨床誘因之一就是閃光圖像的刺激）。


1997年的一天，日本電視臺(tái)正在播放《精靈寶可夢(mèng)》第38集“電腦戰(zhàn)士3D龍”，但就在這天晚上發(fā)生了600多名兒童昏倒在家中集體送醫(yī)事件，轟動(dòng)了動(dòng)畫界，任天堂的股價(jià)也隨之大跌。原來，為了達(dá)到震撼效果，3D龍的背景運(yùn)用了“藍(lán)-紅-藍(lán)”的快速閃爍來表現(xiàn)爆炸，這樣高頻率的閃爍刺激了孩子們脆弱的眼睛，導(dǎo)致他們集體患上了急性光敏癥。也因?yàn)檫@件事日本開始著手對(duì)動(dòng)畫片的制作制定規(guī)范。Twitter在2019年為了保護(hù)對(duì)閃爍圖像敏感的人員安全，也采取了禁用APNG動(dòng)圖格式的措施。


另外WCAG 2.3.3官方說明，一些用戶會(huì)因滾動(dòng)頁面的動(dòng)效（例如緩動(dòng)和視差滾動(dòng)）而觸發(fā)大腦前庭疾病從而產(chǎn)生頭暈的癥狀，所以iOS、Mac、Windows 10都具有關(guān)閉動(dòng)效的功能。


為了避免給特殊人群造成困擾，設(shè)計(jì)師在開始做動(dòng)效之前，應(yīng)該看看以下四條是否滿足：


1.動(dòng)效每秒閃動(dòng)不超過3次，發(fā)生的閃光區(qū)域不超過超過25％否則，光敏癲癇患者會(huì)有發(fā)病的風(fēng)險(xiǎn)。


2.避免過于夸張的視差和運(yùn)動(dòng)效果，因?yàn)榇竽X前庭失調(diào)者會(huì)引發(fā)眩暈。


3.避免有多個(gè)元素通過不斷移動(dòng)、閃爍而分散注意力，因?yàn)檫@可能會(huì)讓注意力缺陷者產(chǎn)生困擾 。


4.如果有上述情況，需提供一些控件或選項(xiàng)來暫停、隱藏或者更改任何動(dòng)畫或效果的頻率。


結(jié)語


作為體驗(yàn)設(shè)計(jì)師，研究無障礙會(huì)讓我們收獲良多。當(dāng)然，目前所做的改進(jìn)并非一勞永逸，而是我們與更廣范圍的用戶保持持續(xù)對(duì)話的開端。不斷改進(jìn)產(chǎn)品的無障礙體驗(yàn)，讓產(chǎn)品更友善，讓美妙的互聯(lián)網(wǎng)的世界變得更平等，我們希望能不斷向這一目標(biāo)前進(jìn)。




作者：百度MEUX    來源：站酷

藍(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(752)

同理心思維，在工作和生活中有著怎樣的應(yīng)用？

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

在我們之前的文章中，同理心思維，在工作和生活中有著怎樣的應(yīng)用？關(guān)于產(chǎn)品原創(chuàng)和服務(wù)設(shè)計(jì)都有提到“同理心”，今天想來系統(tǒng)地分享一下。它不僅應(yīng)用在旅行的產(chǎn)品和服務(wù)上，還可以應(yīng)用在每天生活的方方面面，提高我們生活和工作的效率。

評(píng)論(0) 瀏覽(991)

如何分析競(jìng)品設(shè)計(jì)語言？

seo達(dá)人

圖片

做設(shè)計(jì)語言分析最重要的就是選對(duì)分析對(duì)象，不管是哪個(gè)行業(yè)，選對(duì)了方向基本上不會(huì)出什么大問題。

比如，要做一個(gè)音樂產(chǎn)品設(shè)計(jì)改版，想看看一些品牌基因塑造比較好的APP是怎么做的，這時(shí)候可以選擇國內(nèi)外排名靠前一些音樂去研究分析。

如何選擇正確的分析對(duì)象，一般情況下選擇直接和間接競(jìng)品，如果你不知道有哪些優(yōu)秀的產(chǎn)品，可以在這個(gè)網(wǎng)站看看。

圖片

七麥數(shù)據(jù)

比如，搜索一個(gè)音樂后，就可以看到音樂在國內(nèi)的排名，當(dāng)然還可以切換國家，看看其他國家的APP排名。

競(jìng)品的對(duì)象一般選擇3~5個(gè)靠前就差不多了，因?yàn)檫x擇越多，后期分析起來越麻煩。

 

圖片

前面我們已經(jīng)確定了幾個(gè)分析對(duì)象，那么到這里我們就開始分析所選產(chǎn)品的設(shè)計(jì)語言。

一般情況下，設(shè)計(jì)語言的分析維度有色彩、圖形、布局、字階、卡片，當(dāng)然你還可以增加陰影、圓角、動(dòng)效等細(xì)節(jié)。

圖片

 

1、色彩分析

色彩分析我們一般看品牌主色調(diào)、輔助色、拓展色、安全色、以及文字顏色，目的是了解他們的色彩運(yùn)用規(guī)則和制定策略。

比如常規(guī)色、按壓色、不可點(diǎn)擊色彩是如何塑造的。

圖片

看個(gè)列子，比如白色和灰色的應(yīng)用場(chǎng)景。

圖片

 

2、圖形分析

圖形一般品牌圖形的應(yīng)用，看看這些產(chǎn)品如何打造品牌DNA，如何強(qiáng)化用戶印象，圖形的維度一般在圖標(biāo)上體現(xiàn)居多。

圖片

比如再來看看Line的

圖片

 

3、布局

布局一般我們看產(chǎn)品內(nèi)容間距，內(nèi)容網(wǎng)格是如何打造的，間距節(jié)奏如何定義。目前主流的網(wǎng)格定義大部分基于2/4/8三個(gè)原子數(shù)值來定義。

圖片

圖片

內(nèi)容間距網(wǎng)格

圖片

頁面布局網(wǎng)格

 

4、字階

字體節(jié)奏這個(gè)比較簡單，一般就是看看他們一級(jí)標(biāo)題、二級(jí)標(biāo)題、三級(jí)文本、輔助文字等等的字體大小如何定義，找到一個(gè)基本的參考方向。

比如像LINE設(shè)計(jì)語言，他們標(biāo)題提供了4種尺寸大小，正文也是提供了4種。

圖片

標(biāo)題提供4種尺寸大小，應(yīng)用在不同場(chǎng)景

圖片

正文提供4種尺寸大小，應(yīng)用在不同場(chǎng)景

 

5、卡片

卡片一般情況下我們要分析圓角節(jié)奏，卡片的比例應(yīng)用情況。

圖片

一般情況下黃金比例，特殊場(chǎng)景除外，比如Banner。

圖片

需要了解卡片的圓角節(jié)奏是如何定義的。

 

圖片

當(dāng)前面我們分析完所有內(nèi)容后，并了解這些產(chǎn)品設(shè)計(jì)語言的應(yīng)用情況以及制定策略，在最后這一步我們就需要將這些分析內(nèi)容進(jìn)行梳理成可參考的文檔，向團(tuán)隊(duì)成員分享你發(fā)現(xiàn)的一些核心策略和競(jìng)品視覺語言做得比較好的地方，提供給團(tuán)隊(duì)參考。

這些分析只是參考，站在巨人肩膀?qū)W習(xí)，這樣也是避免在成長過程中走錯(cuò)方向。最重要還需要接下來的執(zhí)行，根據(jù)分析結(jié)論重新塑造自家產(chǎn)品的設(shè)計(jì)語言。

 

寫在最后，

由于篇幅有限，沒有將所有案例全部展開，但給大家提供了一個(gè)清晰的流程和思路，可以下去嘗試使用這種方法做一次分析，就掌握了，有什么不清楚的地方，歡迎留言和我討論。


作者：劉濤導(dǎo)師

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何分析競(jìng)品設(shè)計(jì)語言？

藍(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




評(píng)論(0) 瀏覽(723)

用戶體驗(yàn)研究應(yīng)該安排在哪里？

博博

用研的進(jìn)階

根據(jù)公司結(jié)構(gòu)和職能角色的需求不同，用研中部分是行為觀察，部分是商業(yè)戰(zhàn)略，部分是心理學(xué)，部分是數(shù)據(jù)分析，部分是設(shè)計(jì)，部分是團(tuán)隊(duì)促進(jìn)。用研可以有不同的風(fēng)格，因此可以在行業(yè)范圍內(nèi)四處移換位置。根據(jù)公司規(guī)模和類型的不同，我見過很多用研團(tuán)隊(duì)變成設(shè)計(jì)部門的一部分，有些則變成營銷部門的一部分，還有一些則在產(chǎn)品管理部門——最終在哪都根據(jù)公司的規(guī)模和類型來決定。在我任職期間的某個(gè)時(shí)候，我自己的團(tuán)隊(duì)已經(jīng)集結(jié)到了之前提到的各個(gè)部門。

所以...有沒有一個(gè)部門可以更加適合配備用研部門，讓用研更加成功且具有影響力呢? 這是我想找到的答案。

...

用研部門應(yīng)該存在于...

...在設(shè)計(jì)團(tuán)隊(duì)？



攝影：Harpal Singh 于 Unsplash

優(yōu)勢(shì)：

研究與設(shè)計(jì)交織在一起：用研已經(jīng)成為許多用戶體驗(yàn)設(shè)計(jì)師工作職位描述中的一部分，而用研的核心就是指導(dǎo)設(shè)計(jì)。研究結(jié)果可以指導(dǎo)交互行為，并且它從一開始就已經(jīng)嵌入了設(shè)計(jì)過程里。如果一個(gè)設(shè)計(jì)團(tuán)隊(duì)有專門設(shè)立研究部門，會(huì)讓這個(gè)團(tuán)隊(duì)變成一個(gè)強(qiáng)大的聯(lián)盟。讓更大的設(shè)計(jì)團(tuán)隊(duì)統(tǒng)一研究整體用戶策略，會(huì)讓之后的調(diào)研和設(shè)計(jì)過程更加整體和完善。同樣，設(shè)計(jì)師也有想改善用戶體驗(yàn)的眾多想法，并且通常很高興能看到用戶和他們的想法進(jìn)行交流。這直接與這些創(chuàng)造用戶體驗(yàn)改善的設(shè)計(jì)師們，促成了一個(gè)強(qiáng)有力的文化測(cè)試、迭代、再測(cè)試的過程。由于設(shè)計(jì)與用研的過程是結(jié)合在一起的，因此可以立刻將這些用戶洞察應(yīng)用到設(shè)計(jì)中去。

類似的工作流程：用研的工作流程與傳統(tǒng)的設(shè)計(jì)流程十分相似。設(shè)計(jì)領(lǐng)導(dǎo)者可以無縫地理解研究的各個(gè)階段：復(fù)查現(xiàn)有的數(shù)據(jù)，引導(dǎo)生產(chǎn)性研究，匯編各種信息從而尋找新的模式，創(chuàng)建一份報(bào)告，陳述研究結(jié)果，在上線后測(cè)試等等。同時(shí)，從設(shè)計(jì)概念開始，征求意見、進(jìn)行測(cè)試比較設(shè)計(jì)方案的好壞、迭代設(shè)計(jì)、產(chǎn)出最終的版本、呈現(xiàn)并且在上線之后進(jìn)行迭代。設(shè)計(jì)和用研通常希望攜手合作，共同努力改善數(shù)字化體驗(yàn)。

劣勢(shì)：

設(shè)計(jì)≠用研：不是所有的設(shè)計(jì)師都會(huì)進(jìn)行研究，要么是因?yàn)樗麄儧]有時(shí)間，要么是因?yàn)樗麄儧]有接受過理解研究方法的訓(xùn)練。（相反，也不是所有的研究人員都是設(shè)計(jì)師）通常，公司會(huì)安排設(shè)計(jì)師同時(shí)做研究員的工作，反之亦然。這對(duì)最終實(shí)現(xiàn)的產(chǎn)品來說可能是災(zāi)難性的。尤其是在較小的公司中，設(shè)計(jì)師需要扮演很多職能。這意味著他們“有時(shí)候“有時(shí)間能親自調(diào)研。不幸的是，在設(shè)計(jì)和用研沒有明確定義的前提下，這意味著雇傭部門和領(lǐng)導(dǎo)團(tuán)隊(duì)認(rèn)為這兩者是可以互換的 (注意: 這并不意味著某些設(shè)計(jì)師沒有資格，只是“視覺設(shè)計(jì)師 / 平面設(shè)計(jì)師”、“UI設(shè)計(jì)師”和“UX設(shè)計(jì)師”的技能組合是有區(qū)別的，但我不會(huì)在這里討論這些!)

用戶需求可能會(huì)被遺忘: 有時(shí)候，一個(gè)設(shè)計(jì)規(guī)劃圖會(huì)被過分熱烈的創(chuàng)造性驅(qū)動(dòng)從而創(chuàng)建，而不是來自于數(shù)據(jù)或研究。很多時(shí)候，創(chuàng)意人員會(huì)對(duì)他們喜歡的新想法產(chǎn)生依戀，即使它并非源于用戶需要的東西(有時(shí)候我們都會(huì)為此感到內(nèi)疚)。不幸的是，這意味著研究可能是事后的想法，更經(jīng)常地被作為驗(yàn)證工具而使用，而不是在產(chǎn)品生命周期中預(yù)先定義需求。這對(duì)于用研來說可能成為難以克服的一個(gè)障礙，特別是如果設(shè)計(jì)概念與利益攸關(guān)方或決策者領(lǐng)導(dǎo)人一起審查，他們喜歡并認(rèn)為這是一個(gè)“ 可以去做的設(shè)計(jì)”。這意味著研究的機(jī)會(huì)很有可能喪失。

...在市場(chǎng)運(yùn)營團(tuán)隊(duì)？



攝影：Carlos Muza 于 Unsplash

優(yōu)勢(shì)：

相似的技能組合:市場(chǎng)研究和 UX / 產(chǎn)品的研究在他們特定的核心研究中，共享相似的過程和研究方法。在社會(huì)心理學(xué)、市場(chǎng)營銷學(xué)、人類學(xué)、人的因素、運(yùn)作和設(shè)計(jì)等許多領(lǐng)域進(jìn)行 “人的研究” 所使用的工具包非常相似：定量方法，如大樣本調(diào)查和分析；定性方法，如面對(duì)面的觀察，焦點(diǎn)小組，適度的訪談，日記研究以及其他。每個(gè)領(lǐng)域的方法都需要研究設(shè)計(jì)、用戶招募和研究分析。對(duì)于市場(chǎng)團(tuán)隊(duì)來說，這是一個(gè)非常熟悉的世界，作為 用研 流動(dòng)到這個(gè)部門意味著領(lǐng)導(dǎo)者可能會(huì)對(duì)你的角色需求有一個(gè)徹底的了解。

共同的目標(biāo)是了解用戶: 市場(chǎng)團(tuán)隊(duì)也將是你的擁護(hù)者。無論如何，源自于產(chǎn)品和設(shè)計(jì)的用戶研究的洞察力，為市場(chǎng)部門關(guān)注的許多舉措增添了直接價(jià)值。透過略微不同的角度來看，市場(chǎng)營銷和用戶體驗(yàn)有著相似的目標(biāo)(理解客戶) 。盡管如此，當(dāng)團(tuán)隊(duì)協(xié)作并共享信息，在以業(yè)務(wù)或用戶為中心的舉措之間建立平衡時(shí)，用研結(jié)果還是能夠幫助我們進(jìn)行決策。

劣勢(shì)：

商業(yè)需求可能與用戶需求相反:如果組成“聚焦點(diǎn)”的事物變化太大，那么這個(gè)”聚焦點(diǎn)“既可以將市場(chǎng)營銷與用戶體驗(yàn)結(jié)合起來，也可以將它們分開。當(dāng)業(yè)務(wù)需求與用戶需求相矛盾時(shí)，可能會(huì)產(chǎn)生摩擦。如果市場(chǎng)部門的領(lǐng)導(dǎo)層將眼前的業(yè)務(wù)優(yōu)先級(jí)置于用戶研究之上，那么獲取工具和客戶的途徑就可能受到限制。在一天結(jié)束的時(shí)候，市場(chǎng)團(tuán)隊(duì)關(guān)注創(chuàng)收，即使這對(duì)用戶來說不是最好的體驗(yàn)(比如在某個(gè)地方放置廣告，可能會(huì)干擾網(wǎng)頁，以確保用戶看到它) ; 而用研團(tuán)隊(duì)關(guān)注什么是對(duì)用戶體驗(yàn)最好的(比如在頁面上放置一個(gè)廣告，使其不會(huì)干擾用戶的任務(wù)，冒著用戶看不到并參與其中的風(fēng)險(xiǎn))。

用研 ≠ 市場(chǎng)研究: 有時(shí)候，流動(dòng)到市場(chǎng)部門意味著其他人將 用研視作為市場(chǎng)研究的延伸。由于這一點(diǎn)，一些項(xiàng)目有可能被認(rèn)為應(yīng)該由市場(chǎng)專家處理，而不是用戶體驗(yàn)專家。例如，營銷活動(dòng)的目標(biāo)可能是“我們?nèi)绾巫層脩羰褂眠@次促銷活動(dòng)” ？另一方面，用研 可能會(huì)強(qiáng)調(diào)用戶的需求，比如“用戶希望如何獲得有關(guān)促銷活動(dòng)的通知” ？這種情況（關(guān)注點(diǎn)的轉(zhuǎn)移）并不可能經(jīng)常出現(xiàn)在市場(chǎng)部的議程表上。

...在產(chǎn)品管理團(tuán)隊(duì)？



攝影：Marvin Meyer 于 Unsplash

優(yōu)勢(shì)：

為產(chǎn)品使用路徑圖研究分配時(shí)間:通過將 用研 嵌入到產(chǎn)品管理團(tuán)隊(duì)中，研究有機(jī)會(huì)通過在產(chǎn)品路徑圖中劃出其應(yīng)有的空間和時(shí)間來充分發(fā)揮其潛力。通過讓 用研 和產(chǎn)品經(jīng)理向同一個(gè)領(lǐng)導(dǎo)層匯報(bào)，這意味著目標(biāo)和優(yōu)先級(jí)可以被共享，并且在同一時(shí)間被一起審查。這可能是一個(gè)有效的工作方式，特別是當(dāng)你與產(chǎn)品經(jīng)理一起工作的項(xiàng)目，他們知道如何使他們的產(chǎn)品更直觀地呈現(xiàn)給用戶。用研的產(chǎn)品管理為定義實(shí)際產(chǎn)品需求創(chuàng)建了一種更加無縫的方法。這意味著路線規(guī)劃圖中留出了時(shí)間，在積壓成定局之前走出去，獲得用戶見解。這告知了大家需要開發(fā)的功能的優(yōu)先級(jí)，并在完成設(shè)計(jì)之前，就形成產(chǎn)品了本身的特性。當(dāng) 用研 與產(chǎn)品經(jīng)理的目標(biāo)緊密相連時(shí)，每個(gè)注入了用戶見解的產(chǎn)品階段都變得更加容易(因?yàn)樗鼞?yīng)該是在一個(gè)理想的世界中!)

更容易地與決策者進(jìn)行知識(shí)交換:將產(chǎn)品經(jīng)理的內(nèi)部結(jié)構(gòu)與 用研 的內(nèi)部結(jié)構(gòu)相結(jié)合，也意味著他們可以獲得更多用戶關(guān)于他們的體驗(yàn)的言論，從而形成定期更新，并且可以更容易地進(jìn)入用戶途徑。用研經(jīng)常關(guān)注復(fù)查定性趨勢(shì)的反饋(比如 Qualtrics 或者 Medallia 系統(tǒng))（在線調(diào)查或客戶體驗(yàn)管理系統(tǒng)），這意味著產(chǎn)品經(jīng)理聽到這些趨勢(shì)的機(jī)會(huì)變得更加頻繁。產(chǎn)品經(jīng)理一般來說應(yīng)該對(duì)他們的用戶群有深刻的理解，但是他們通常很難在傾聽用戶的基礎(chǔ)上來保持沖刺、業(yè)務(wù)分析、 KPI 和產(chǎn)品路線圖規(guī)劃。因?yàn)閳F(tuán)隊(duì)會(huì)議中現(xiàn)在有一個(gè)指定的用戶代言人一直在場(chǎng)，這就是為什么與 用研 如此緊密地聯(lián)系在一起對(duì)產(chǎn)品經(jīng)理來說是有益的。參加這些會(huì)議使得 用研 有機(jī)會(huì)直接與那些最需要了解用戶需求的人進(jìn)行自發(fā)的對(duì)話。加入同一個(gè)團(tuán)隊(duì)可以使這些溝通渠道更加開放，并且可以更加頻繁地了解用戶對(duì)產(chǎn)品經(jīng)理的需求。

劣勢(shì)：

研究的優(yōu)先級(jí)可能會(huì)降低:不幸的是，轉(zhuǎn)到產(chǎn)品管理團(tuán)隊(duì)意味著有時(shí)研究的優(yōu)先級(jí)會(huì)降低。當(dāng)利益相關(guān)者對(duì)產(chǎn)品交付施加壓力時(shí)，這通常意味著產(chǎn)品需要盡快推出。然之后，產(chǎn)品經(jīng)理必須專注于發(fā)布他們產(chǎn)品路線圖規(guī)劃上的項(xiàng)目，并在時(shí)間表和開發(fā)周期內(nèi)實(shí)現(xiàn)業(yè)務(wù)目標(biāo)。為了滿足這些時(shí)間要求，盡快交付某些東西成為更緊迫的目標(biāo)，而不是交付一個(gè)經(jīng)過研究和磨練的產(chǎn)品(這需要更多的時(shí)間)。

更多的評(píng)估而不是生產(chǎn)性研究: 把用研流動(dòng)這個(gè)部門可能意味著這項(xiàng)研究變得更加可評(píng)估(或者驗(yàn)證、可用性和迭代測(cè)試) ，而不是生產(chǎn)性(或者理解需求、價(jià)值和概念發(fā)現(xiàn)或開發(fā)的測(cè)試) ，就像在設(shè)計(jì)團(tuán)隊(duì)下可以做的那樣。這不是一件壞事，而只是需要牢記在心，以便作為一個(gè)用戶倡導(dǎo)者，用研 的工作可以更直言不諱地說，需要留出時(shí)間來做更深入、生產(chǎn)性的工作，從長遠(yuǎn)來看而不是短期內(nèi)為產(chǎn)品提供信息。提前了解這個(gè)可能的障礙意味著用研可以更好地裝備自己的 ROI（投資回報(bào)率）影響，以便為更深入的研究騰出時(shí)間。

...在自己獨(dú)立的部門？



攝影：José Alejandro Cuffia 于 Unsplash

注意: 我還沒有在一個(gè)獨(dú)立的，指定的 UX 研究部門作為一個(gè) UX 研究員的工作經(jīng)驗(yàn)。我只能推測(cè)將一個(gè)獨(dú)立的 用研 團(tuán)隊(duì)集合起來會(huì)是什么樣子，或者當(dāng) 用研 成為一個(gè)大型組織中自己的分支時(shí)，領(lǐng)導(dǎo)力的優(yōu)缺點(diǎn)是什么。

優(yōu)勢(shì)（推測(cè)）：

擁有自己帶領(lǐng)的用研部門，可以為更深入地研究需求提供機(jī)會(huì)。它將有能力根據(jù)合作伙伴的規(guī)劃路線圖從而制定自己的規(guī)劃路線圖。它可以讓部門領(lǐng)導(dǎo)層能夠深入地支持研究人員的需求，因?yàn)樾枨蠼?jīng)常遇到障礙（如招聘、用戶日程安排、預(yù)算、批準(zhǔn)、 ResearchOps（ Research Operation service 研究運(yùn)營管理） 的行政工作等)。能夠擁有一個(gè)研究路線規(guī)劃圖，并為發(fā)現(xiàn)和生成性研究騰出時(shí)間，從長遠(yuǎn)來看，可能會(huì)大大有助于產(chǎn)品和客戶體驗(yàn)的信息共享。擁有一個(gè)獨(dú)立的團(tuán)隊(duì)可以使這些研究成為奢侈品。當(dāng)一個(gè)領(lǐng)導(dǎo)者致力于使研究成功，這意味著他們希望研究可以帶來更多戰(zhàn)略上的影響。

正如我之前提到的，一些被稱為 “ ResearchOps（研究運(yùn)營管理）” 或者研究操作的東西，是一個(gè)趨勢(shì)短語，類似于 “ designnops①” 或者 “ DevOps②” 等等。拋開時(shí)髦不說，設(shè)立一個(gè)獨(dú)立的部門和領(lǐng)導(dǎo)層可能意味著在決策層有一個(gè)更大的席位，這反過來又意味著在使體驗(yàn)研究產(chǎn)生影響方面有更多的投資。當(dāng)投入更多資金進(jìn)行研究時(shí)，業(yè)務(wù)側(cè)就有機(jī)會(huì)進(jìn)行戰(zhàn)略思考并得到支持。一個(gè)獨(dú)立的 用研 部門反過來將能夠雇傭人來支持行政管理，為研究人員能夠?qū)Ｗ⒂谒麄冄矍暗墓ぷ骱头治龆?fù)責(zé)。在小型組織中，甚至在大型組織中的小型 用研 團(tuán)隊(duì)中(比如我的團(tuán)隊(duì)) ，研究人員往往負(fù)責(zé)所有的職能，這也是可以的！但是，如果有一個(gè)專門關(guān)注于這些研究人員需求的部門，并擴(kuò)大他們工作的影響(不管團(tuán)隊(duì)規(guī)模有多大) ，我相信將有更大的機(jī)會(huì)去收集更好、更深入的見解，研究過程也能充分發(fā)揮其影響力和潛力。

①Design Systems Ops 是設(shè)計(jì)團(tuán)隊(duì)的一部分，他需要足夠了解設(shè)計(jì)，并且要了解他們?cè)噲D概念化什么。同時(shí)，Design Systems Ops 需要理解工程師的需求和定義方法，這將有助于設(shè)計(jì)系統(tǒng)的裝運(yùn)和規(guī)模化。在某些程度上，一個(gè) Design Systems Ops 是兩個(gè)世界的翻譯。

② DevOps（ Development和Operations的組合詞）是一組過程、方法與系統(tǒng)的統(tǒng)稱，用于促進(jìn)開發(fā)（應(yīng)用程序/軟件工程）、技術(shù)運(yùn)營和質(zhì)量保障（QA）部門之間的溝通、協(xié)作與整合。它是一種重視“軟件開發(fā)人員（Dev）”和“IT運(yùn)維技術(shù)人員（Ops）”之間溝通合作的文化、運(yùn)動(dòng)或慣例。透過自動(dòng)化“軟件交付”和“架構(gòu)變更”的流程，來使得構(gòu)建、測(cè)試、發(fā)布軟件能夠更加地快捷、頻繁和可靠。

劣勢(shì)（推測(cè)）：

相反，單獨(dú)作為一個(gè)獨(dú)立的 用研 部門，也可能使得決策層難以接受。如果不流入一個(gè)直接產(chǎn)生收入影響的部門內(nèi)（至少在短期內(nèi)，比如在銷售或營銷方面) ，那么 用研 的工作就很難得到認(rèn)可。利益相關(guān)者之間的伙伴關(guān)系和一致性，對(duì)于用研人員能夠成功地完成他們的工作來說至關(guān)重要。如果沒有它，如果 用研 的需求被認(rèn)為不是直接以產(chǎn)品為中心，同樣的職位可以幫助 用研， 也可能會(huì)阻礙他們。開展生產(chǎn)性研究的時(shí)間可能被視為“有風(fēng)險(xiǎn)” ，而且當(dāng)團(tuán)隊(duì)的領(lǐng)導(dǎo)層與其他更為成熟的角色(即風(fēng)險(xiǎn)較低的角色)分離時(shí)，可能很難獲得合作伙伴和利益相關(guān)者的支持。

同樣，投資一個(gè)獨(dú)立的用研團(tuán)隊(duì)總的來說可能是有風(fēng)險(xiǎn)的?？赡芎茈y預(yù)測(cè)到有形的ROI（投資回報(bào)率）預(yù)測(cè)，以便業(yè)務(wù)合作伙伴能夠理解，并在第一時(shí)間投入資金。這意味著，決策者們可能認(rèn)為給用研分配預(yù)算或增加人數(shù)是有風(fēng)險(xiǎn)的，其他研究需求也是如此。一般來說，R&D（產(chǎn)品研發(fā)）在組織中是一個(gè)棘手的領(lǐng)域，而 用研 肯定會(huì)在這個(gè)預(yù)算范圍內(nèi)。盡管有證據(jù)表明，對(duì)研發(fā)的投資有能力改變企業(yè)經(jīng)營的底線，并且可以通過創(chuàng)新保持企業(yè)價(jià)值，所以相對(duì)于獨(dú)立的用研部門，緊迫的商業(yè)需求可能話語權(quán)更大。

...







作者：三分設(shè)



藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加微信ban_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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

評(píng)論(0) 瀏覽(810)

點(diǎn)贊功能背后的洞察與價(jià)值

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

關(guān)于「點(diǎn)贊功能」的一些思考，之前一直存放在我的Blog里，第一次發(fā)布站酷，感謝

最近美劇《風(fēng)騷律師》第六季正式回歸，本來想等著全部更新完之后在一口氣看個(gè)痛快。但是豆瓣里一萬多名用戶給出了9.9分的評(píng)價(jià)，就讓我有點(diǎn)坐不住了，勢(shì)必要看看「律師」是如何超越「毒師」的，也彌補(bǔ)一下近期的劇荒

當(dāng)我打開Netflix之后，引起我注意的是「超愛這部!」這個(gè)功能，第一眼看到的時(shí)候有些疑惑，這個(gè)功能的意義是什么？與點(diǎn)贊功能的區(qū)別是什么？我點(diǎn)了之后會(huì)怎么樣？我一直理解Netflix的點(diǎn)贊功能和Youtube、Twitter和抖音類似，點(diǎn)擊之后會(huì)推薦給我更符合口味的內(nèi)容或者有收藏的作用。但是對(duì)于Double the Thumbs的疑問是，除了喜歡與不喜歡之外，還可以給用戶帶來什么體驗(yàn)？它是Like功能的進(jìn)化體么？已經(jīng)擁有18年歷史的點(diǎn)贊功能還有可優(yōu)化的空間么？借此話題，來和大家聊聊點(diǎn)贊功能背后的洞察與價(jià)值 


幼年時(shí)期的點(diǎn)贊


早期的點(diǎn)贊把原本靜止的內(nèi)容變成了社交的媒介，用戶間通過贊來簡單直接的交流。我喜歡，我就點(diǎn)贊，蘊(yùn)含贊同、支持和鼓勵(lì)，此時(shí)的點(diǎn)贊更單純與純粹

2004年，社交新聞聚合器Digg的創(chuàng)始人Kevin Rose發(fā)明了Digg功能，用戶從內(nèi)容列表中查找自己感興趣的內(nèi)容并將其“Digg”出來——本意「挖掘」，你可以理解為「頂」——以表達(dá)自己對(duì)這篇報(bào)道的認(rèn)可。當(dāng)一篇文章得到足夠的Digg之后，就會(huì)被提升到首頁上，讓更多的人看到 


就像是一個(gè)朋友給你講了一個(gè)故事，你十分激動(dòng)。這個(gè)故事是你從來沒有聽過的，你記住了它并將這個(gè)故事分享給了其他的朋友 

2007 年，社交聚合網(wǎng)站FriendFeed 將“Like” 按鈕作為一項(xiàng)新功能發(fā)布并推廣，兩年后，隨著 FriendFeed 被 Facebook 收購，這項(xiàng)功能也整合到了 Facebook 里。隨后，各大社交產(chǎn)品紛紛效仿，同期的 Tumblr、Vimeo以及后來的 Instagram 都增加了這一功能。在國內(nèi)，微信4.0版本推出的朋友圈，后來抖音的小紅心、知乎的大拇指或者老鐵雙擊666，不管什么樣式的圖標(biāo)和表達(dá)方式，點(diǎn)贊即可滿足用戶的基本需求，又可以為產(chǎn)品實(shí)現(xiàn)商業(yè)價(jià)值，已經(jīng)成為了社交產(chǎn)品的標(biāo)配并且一直延用至今 


點(diǎn)贊背后的洞察


去點(diǎn)贊 


先問各位幾個(gè)問題，你一天會(huì)給幾條抖音、朋友圈或者知乎的回答點(diǎn)贊？你一天又會(huì)收到幾個(gè)點(diǎn)贊？那你會(huì)記得一天跟多少人打過招呼么？ 

可能你會(huì)認(rèn)為我很無聊，誰會(huì)每天統(tǒng)計(jì)點(diǎn)贊和打招呼的次數(shù)呢?？烧且?yàn)檫@些你根本不在意的數(shù)字，無意的一個(gè)舉動(dòng)影響著生活。在電梯里碰到同事你要點(diǎn)頭示意，領(lǐng)導(dǎo)發(fā)了一條朋友圈你要點(diǎn)贊附和，朋友積贊領(lǐng)優(yōu)惠券你要支持。你需要禮貌的簡單問候，或是處于功利維護(hù)人際關(guān)系，點(diǎn)贊無非是門檻最低，負(fù)擔(dān)最小的表達(dá)方式，是敷衍的象征。相比于轉(zhuǎn)發(fā)顯得太重，評(píng)論則需要輸出觀點(diǎn)，模糊不清的態(tài)度絕對(duì)不會(huì)承擔(dān)責(zé)任，還可以維持住一定的距離感 


在社交媒體里，我們點(diǎn)贊做的只是觀察他們，表示認(rèn)同，而不是向他們展示我們關(guān)心的事情，更別說用它加深友誼 「 Karen North - 數(shù)字社交媒體教授」

在傳統(tǒng)的社交中，我們有點(diǎn)頭之交的關(guān)系，然而互聯(lián)網(wǎng)的出現(xiàn)讓我們生活和工作中又出現(xiàn)了一種新型的關(guān)系“點(diǎn)贊之交”，它已經(jīng)成為了網(wǎng)絡(luò)社交的通用禮儀，雖然它無關(guān)緊要，含義不足以加深感情，但是想躲也躲不掉 


被點(diǎn)贊


作為一名內(nèi)容輸出者來說我的體會(huì)更深，我的視頻怎么沒人看，為什么點(diǎn)贊還不到一百個(gè)，每十分就會(huì)拿起手機(jī)看十幾次，內(nèi)心的掙扎與惶恐開始糾纏著我，是不是話術(shù)太枯燥，是不是燈光太暗了等等的問題反復(fù)的問自己。就比如當(dāng)你精心拍了一張照片，編輯好一段文案準(zhǔn)備點(diǎn)擊發(fā)布按鈕的那一刻你在擔(dān)心什么？你耗費(fèi)幾個(gè)小時(shí)發(fā)出自我感覺良好的的一條朋友圈之后，點(diǎn)贊數(shù)只有稀稀拉拉的一兩個(gè)。原本的炫耀因?yàn)辄c(diǎn)贊數(shù)太少變成了日記本

相反，點(diǎn)贊數(shù)成倍增加的時(shí)候，大腦就會(huì)開始分泌大量的多巴胺腎上腺素飆升，同時(shí)，你可能將在更多的社交平臺(tái)重復(fù)這一受捧的過程，以及無數(shù)次打開這條動(dòng)態(tài)，進(jìn)入一種高度的自我欣賞狀態(tài)。一個(gè)必要功能的出現(xiàn)，也意味著它承載著人們必要的需求。點(diǎn)贊滿足的就是人們「被關(guān)注被看見被認(rèn)同」的底層需求 


點(diǎn)贊的商業(yè)價(jià)值


重要的指標(biāo) 


當(dāng)產(chǎn)品經(jīng)理們發(fā)現(xiàn)了用戶的底層需求之后，如何讓用戶不產(chǎn)生疏離感，積極參與并且促進(jìn)用戶留存？點(diǎn)贊功能給了他們一個(gè)非常輕量級(jí)的機(jī)會(huì)，任何用戶只要點(diǎn)個(gè)贊，就可以在整個(gè)社區(qū)的內(nèi)容量級(jí)評(píng)定上貢獻(xiàn)自己的影響力。另一方面，內(nèi)容的生產(chǎn)者能夠從點(diǎn)贊中獲得更正面的反饋，進(jìn)而更愿意進(jìn)行分享實(shí)現(xiàn)轉(zhuǎn)化，這是平臺(tái)更愿意看到的

Facebook 2009年在全球推廣點(diǎn)贊功能之后，用戶發(fā)貼的數(shù)量和質(zhì)量都隨之提升，約 30% 的用戶每天都會(huì)多次點(diǎn)贊。另外，廣告商們馬上解鎖了「營銷密碼」，F(xiàn)acebook將數(shù)據(jù)售賣給廣告商，打破了傳統(tǒng)媒體市場(chǎng)的盈利模式，把用戶的「喜愛度」拿捏的死死的。就連美國國務(wù)院在 2011 年 – 2013 年，只為在 Facebook 上獲得更多的贊，就已經(jīng)花費(fèi)了 63 萬美金

但凡事都有利弊，畢竟人性極端化是難以避免的。不知道各位有沒有經(jīng)歷過可以在淘寶上給微博買粉買贊買評(píng)論的階段，看似大把的流量在手其實(shí)都是流量造假，早期微博上的電影大V都是靠著一手盜版資源和買粉賺的盆滿缽滿，如果活躍度較高，很容易成為天選之子，平臺(tái)還會(huì)親自送你粉絲，這種效果顯然與社交網(wǎng)絡(luò)設(shè)計(jì)之初，希望通過虛擬社區(qū)增進(jìn)情感聯(lián)絡(luò)的初心是相悖的，另外，造假產(chǎn)業(yè)環(huán)環(huán)相扣侵蝕了平臺(tái)的利益，這就不是平臺(tái)愿意看到的了，所以改善社區(qū)環(huán)境是必然

各個(gè)平臺(tái)也做過努力，例如微信朋友圈在點(diǎn)贊功能發(fā)布不久，就對(duì)公眾號(hào)集贊送禮品等誘導(dǎo)分享行為嚴(yán)厲打擊。2019年左右Facebook、Instagram包括Twitter在內(nèi)的 Demetrication（去數(shù)量化）顧名思義，就是將點(diǎn)贊數(shù)量隱藏，讓用戶看不到有多少人給帖子點(diǎn)贊，強(qiáng)制用戶把注意力放在內(nèi)容上。類似于教育改革落實(shí)“雙減”政策將百分制改為ABCD的等級(jí)制，考試結(jié)果不排名、不公布，全面關(guān)注學(xué)生綜合素質(zhì)的培養(yǎng)。但是，有條新聞，一名老師大白天的拉著窗簾偷偷摸摸搞培訓(xùn)被社區(qū)抓現(xiàn)形的新聞想必大家都看過，貪榮慕利，眾星捧月的潘多拉魔盒已經(jīng)打開了，與用戶的底層需求博弈注定不是短期就可以完成的

轉(zhuǎn)眼已經(jīng)三年過去了，海外的社交平臺(tái)顯然沒有做到 Demetrication，技術(shù)手段根本完不成的任務(wù)。國內(nèi)的社交平臺(tái)則是把壓力放在了創(chuàng)作者身上，利用起了用戶底層需求，你想讓作品在流量池里獲得更多的點(diǎn)贊、評(píng)論和轉(zhuǎn)發(fā)就要不斷優(yōu)化內(nèi)容質(zhì)量，尋找自身問題，或者花錢買數(shù)據(jù)，抖音的抖加和小紅書的薯?xiàng)l都是社區(qū)平臺(tái)迭代后的現(xiàn)狀。既能避免黑產(chǎn)保護(hù)平臺(tái)利益，又能給創(chuàng)作者來帶可觀的數(shù)據(jù)何樂而不為呢 


更好的評(píng)分制 


說回 Netflix 的 Double the Thumbs，官方給到的解釋“這是一種讓會(huì)員們了解自身喜好，更精準(zhǔn)的看到想看的電影和電視的另一種方式”

其實(shí)就是通過更細(xì)微的分類比如導(dǎo)演、演員類型或者制作團(tuán)隊(duì)等等給奈飛的用戶推薦相關(guān)的內(nèi)容，只能說這很奈飛。從1997年開始賣碟片直到2006年轉(zhuǎn)戰(zhàn)流媒體，Netflix 的用戶增長和商業(yè)成功的關(guān)鍵就是把猜你喜歡做到極致，這也是手握全球兩億付費(fèi)用戶的原因

不難看出Netflix更依賴用戶，用戶對(duì)于平臺(tái)的反饋很重要。2017年Netflix拋棄了類似豆瓣一樣的五星評(píng)分制，原因在于用戶的打分并未遵從內(nèi)心，評(píng)分較高的電視劇/電影會(huì)越來越火，不火的內(nèi)容永遠(yuǎn)不會(huì)被用戶看到，亂打分的現(xiàn)象頻繁出現(xiàn)，Netflix不希望用戶變成批判家，受到其他人影響，你只需要看你喜歡的內(nèi)容就好。就比如說，周末你想跟女朋友去甜甜蜜蜜度過一個(gè)周末，舞臺(tái)劇「莎士比亞」和電影「小時(shí)代」你會(huì)選哪個(gè)？我想大部分人都會(huì)選「小時(shí)代」，因?yàn)樗掝}性強(qiáng)，電影結(jié)束后可以在餐桌上和女朋友一起吐吐槽。但是，如果讓你在平臺(tái)上給兩部劇評(píng)分，一定是「莎士比亞」高于「小時(shí)代」，問題就在于Netflix在乎的并不是評(píng)分，而是用戶會(huì)看哪部劇 


顯示性偏好（Revealed preference）和是期望性偏好（Aspirational preference），這在日常生活中也很常見，比如一個(gè)決定中午吃輕食的人實(shí)際點(diǎn)了炸雞，一個(gè)計(jì)劃下午去圖書館備考的人實(shí)際仍躺在宿舍里刷劇，一個(gè)決定更溫和些的人在面臨類似的矛盾時(shí)仍選擇發(fā)脾氣 - 經(jīng)濟(jì)學(xué)家保羅·薩默爾森（P.Samuelson） 

另外，Netflix與YouTube、抖音和B站又有所不同，Netflix全部都是PGC內(nèi)容，都是自己花錢買的，流媒體版權(quán)的成本越來越高，被淹沒掉的內(nèi)容幾乎失去了競(jìng)爭力，對(duì)于平臺(tái)的沖擊巨大

Netflix不得不做出改變，只有不斷優(yōu)化推薦算法，向用戶推薦更精準(zhǔn)的內(nèi)容才是王道，顯然點(diǎn)贊/點(diǎn)踩對(duì)于用戶來說更方便且選擇單一，是獲取數(shù)據(jù)最高效最精準(zhǔn)的方法，在一項(xiàng) Beta 測(cè)試中，Netflix 向全球數(shù)十萬新用戶推出了點(diǎn)贊/點(diǎn)踩手勢(shì)，發(fā)現(xiàn)評(píng)級(jí)參與度上升了 200% 


Netflix產(chǎn)品副總裁Todd Yellin指出這種無法完全準(zhǔn)確洞察用戶喜好的評(píng)級(jí)系統(tǒng)對(duì)Netflix當(dāng)下原創(chuàng)內(nèi)容的儲(chǔ)備沒有益處 

如果各位很喜歡看美劇應(yīng)該知道Netflix有非常多的自制劇，自制劇要比買別人的版權(quán)便宜的多，如果版權(quán)到期或者競(jìng)品的乘勝追擊，也不會(huì)讓自己處于被動(dòng)局面。只有自制劇、自制內(nèi)容才是平臺(tái)的護(hù)城河，比如「紙牌屋」和「魷魚游戲」等等，這些優(yōu)質(zhì)的內(nèi)容之所以能制作成功出現(xiàn)在大眾視野，全部都來自點(diǎn)贊功能獲取的用戶數(shù)據(jù)

如今，Netflix在點(diǎn)贊/點(diǎn)踩的旁邊增加了Double the Thumbs，改為了三星評(píng)分制度，從官方給到的解釋“用戶可以通過它告訴 Netflix，自己對(duì)某種特定內(nèi)容情有獨(dú)鐘，包括主演、制作團(tuán)隊(duì)、角色類型、小眾劇集類型等等，Netflix 的推薦也就能夠更具體入微”，反之，Netflix可以通過更細(xì)微的分類來洞察用戶喜好，一方收獲了利益，一方收獲了效率


作者：Hubooooo

轉(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(740)

總結(jié)的高效 UI 配色策略

純純

從平面到屏幕，CMYK 到 RGB，墨點(diǎn)到像素，色彩越來越豐富，形式越來越復(fù)雜。而 UI 的發(fā)展從擬物的繁瑣細(xì)節(jié)中掙脫出來，卻在色彩的展現(xiàn)中放飛了自我。


零售業(yè)有個(gè)有趣的研究成果 —— “七秒鐘定律”：人們?cè)谔暨x商品和服務(wù)時(shí) ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。


要在小小的手機(jī)屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實(shí)不易。如果你還對(duì)配色一無所知，完全不知道配色應(yīng)該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗(yàn)總結(jié)的配色思路。






無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：


雖然是不同的應(yīng)用，但是這個(gè)拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應(yīng)用邏輯。


很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。


HSB 是色彩科學(xué)中對(duì)所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡潔、干練。


因?yàn)橐粋€(gè)正確的選色過程，是先確定出色相，然后再在這個(gè)色相維度下選出明度和飽和度，所以我們首先要關(guān)注色相選擇條。


細(xì)心的同學(xué)應(yīng)該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因?yàn)樯嗟男蛄惺且粋€(gè)首尾相接的環(huán)形模式，所以它實(shí)際上就是色環(huán)的柱狀展示圖，應(yīng)用起來和色環(huán)沒有實(shí)際區(qū)別。


接下來就要說到重點(diǎn)，飽和度和明度選擇區(qū)，我自己使用的習(xí)慣，是將這個(gè)選擇區(qū)通過黃金三分法的方式切割成等比的 9 個(gè)區(qū)域，然后明確它們?cè)?UI 中的對(duì)應(yīng)情緒和應(yīng)用場(chǎng)景。


在過去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會(huì)往右上角聚集，一些次要、不可點(diǎn)的色彩聚集在中上方，而文字背景色則聚集在左側(cè)，無人區(qū)則是我們重點(diǎn)避開的對(duì)象。


下面我們分析幾個(gè)案例，看看它們?cè)谶@個(gè)選擇區(qū)中的色彩分布情況：

undefined


大家也可以自己拿一些主流的應(yīng)用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會(huì)得到基本一致的結(jié)果。牢記這 9 個(gè)區(qū)域的場(chǎng)景劃分，可以幫助我們非常高效、安全地完成 UI 配色。






在眾多的 UI 設(shè)計(jì)規(guī)范中，色彩部分的介紹，都必然包含三種類型，分別是：


  • 主色：應(yīng)用的核心色彩，品牌色

  • 輔色：豐富頁面視覺和傳達(dá)效果的次要顏色

  • 中性：沒有色相的文字、背景用色



2.1 主色的選擇


主色是一個(gè)應(yīng)用的最核心的色彩，品牌的象征色，比如想到餓了么的藍(lán)色、微信的綠色、京東的紅色、淘寶的橙色。


確定主色，并沒有大家想象的那么復(fù)雜，它的要點(diǎn)在于 —— 你想讓用戶感受到哪種情緒，然后通過情緒關(guān)聯(lián)一個(gè)大致的色彩范圍，再進(jìn)行微調(diào)。


在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應(yīng)用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設(shè)計(jì)中的用色有非常大的不同。


移動(dòng)端產(chǎn)品要在一個(gè)方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調(diào)是無法實(shí)現(xiàn)這個(gè)目標(biāo)的，所以今天主色飽和度越來越極致，比如我們之前整理的，發(fā)在站酷的一篇總結(jié)：


支付寶主色變更分析


再加上屏幕的 RGB 顯示特性，高對(duì)比度，高動(dòng)態(tài)范圍的特質(zhì)能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區(qū)域選出合適的色值。



2.2 輔助色的選擇


輔助色是豐富應(yīng)用中的次要色彩，它會(huì)包含一到若干個(gè)和主色不同的色彩，除了品牌傳達(dá)外，具有更強(qiáng)的實(shí)用性。


前面我們提到過色環(huán)，這里就要派上用場(chǎng)了。我們知道色環(huán)是個(gè)色彩序列首尾相連的環(huán)形模型，它蘊(yùn)含一個(gè)最樸素的原則，即兩個(gè)顏色在這個(gè)環(huán)形中角度越大，那么視覺差異性越大，對(duì)比越強(qiáng)，比如下圖的展示：

undefined

這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個(gè)色彩對(duì)比度的判斷標(biāo)準(zhǔn)。而真正輔助色的選擇，是根據(jù)實(shí)際場(chǎng)景的功能決定的。


比如通知、提醒、取消用大紅色，確認(rèn)、同意用綠色或者藍(lán)色，收藏、打分、評(píng)價(jià)用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準(zhǔn)的用色類型，跟著常規(guī)方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。


沒有標(biāo)準(zhǔn)元素用色的情況下，再考慮應(yīng)用色環(huán)的 “角度原則”，越需要被突出的顏色，可以在色環(huán)中離主色越遠(yuǎn)，越不需要被突出的則越近。


比如下方攜程的案例，主色在藍(lán)色的情況下，支付、保險(xiǎn)金標(biāo)簽這些需要被重點(diǎn)突出的色彩，使用了主色的互補(bǔ)色， 讓我們一眼就能看見并產(chǎn)生強(qiáng)烈的操作欲望。



2.3 中性色的選擇


中性色，是頁面中文字、背景用到的顏色，它們承擔(dān)起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關(guān)緊要，實(shí)際情況恰恰相反。


主色輔助色決定了界面視覺是否出彩，而中性色的應(yīng)用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應(yīng)該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁面和進(jìn)行使用也不會(huì)有絲毫的障礙。


中性色的配置，就是制定一個(gè)由深到淺的灰度階梯，應(yīng)用在對(duì)應(yīng)權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。

undefined

中性色雖然指的是無個(gè)性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍(lán)色飽和度，提升觀看體驗(yàn)（滿足 RGB 的某種特性）。


這種做法，顏色越淺的時(shí)候飽和度應(yīng)用色值就越低，將這個(gè)規(guī)律在拾色器中進(jìn)行表現(xiàn)，那么我們就可以得到一個(gè) L 型曲線，我稱它為 “中性曲線”。


掌握對(duì)于主色、輔助色、中性色的選擇方法，那么對(duì)于 UI 配色的奧義來說，你已經(jīng)掌握了一半，接下來就要了解更具體的實(shí)踐思路了。






配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學(xué)和理論，卻很少關(guān)心它們應(yīng)用如何應(yīng)用，如何配置。


所以，我根據(jù)主色和輔助色應(yīng)用總結(jié)了一個(gè)配色的四象限表格，在分別看看它們對(duì)應(yīng)的案例：

undefined


3.1 主色占比大，色彩豐富度高


主色會(huì)作為頂部標(biāo)題欄或其它重要模塊中的背景色，進(jìn)行大面積應(yīng)用，加深用戶對(duì)品牌的認(rèn)知和辨識(shí)度。而產(chǎn)品中又包含了大量功能和服務(wù)，需要用豐富的色彩來進(jìn)行暗示，吸引用戶關(guān)注。


undefined



3.2 主色占比大，色彩豐富度低 


這類配色中，主色的應(yīng)用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對(duì)正式、品牌感強(qiáng)的應(yīng)用。


undefined



3.3 主色占比小，色彩豐富度高


這是多數(shù)主流應(yīng)用的趨勢(shì)，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務(wù)和功能。


undefined



3.4 主色占比小，色彩豐富度低


通常，會(huì)應(yīng)用這種方式是因?yàn)楫a(chǎn)品的服務(wù)是相對(duì)單一，但也需要用戶投入注意力的應(yīng)用，設(shè)計(jì)師就會(huì)盡力避免給予用戶過多的干擾。


undefined

每次在進(jìn)行配色的時(shí)候，我們都需要對(duì)自己要應(yīng)用哪種配色應(yīng)用方式做出規(guī)劃，然后再動(dòng)手執(zhí)行。有了這個(gè)目標(biāo)，后面在整個(gè)項(xiàng)目的設(shè)計(jì)中的配色步驟就是水到渠成的事情了。






在實(shí)踐前，我們要簡單講講一個(gè)應(yīng)用或者界面的標(biāo)準(zhǔn)配色的流程了，流程順序如下：



undefined



具體應(yīng)該怎么使用這套流程，我們用一個(gè)圖蟲 APP 改版的案例來做演示，首先從四象限中的第一個(gè)主色占比高、色彩豐富度高的類型做起。



4.1 配色流程演示


原型是 UI 設(shè)計(jì)的基本藝能了，在開始具體設(shè)計(jì)、配色前，搭建頁面的框架原型是一個(gè)必備的條件，下面，是我們已經(jīng)準(zhǔn)備好的原型案例。


然后，我們確定以橙色作為應(yīng)用主色，并在拾色器中進(jìn)行確認(rèn)。


有了主色，就可以對(duì)頁面進(jìn)行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標(biāo)題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。


接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現(xiàn)模塊層級(jí)，文字信息的權(quán)重。


最后，就是添加輔助色和其它色彩的元素了，這個(gè)步驟建議都是放在最后一步操作。因?yàn)樯试截S富，越難控制，容易讓整個(gè)畫面顯得雜亂無序，所以先完成基礎(chǔ)搭建，可以更好的幫助我們判斷彩色的使用是否合理。


下面，我們使用彩色的金剛區(qū)圖標(biāo)，然后將用戶關(guān)注、認(rèn)證用戶、標(biāo)簽等元素使用其它色彩，來豐富頁面的色彩內(nèi)容。

undefined



4.2 其他配色類型應(yīng)用


根據(jù)第一個(gè)方案，我們可以再用這個(gè)原型來實(shí)現(xiàn)其余的三個(gè)方案的配色。


比如下面的主色占比大，但是色彩豐富度低的。因?yàn)橐呀?jīng)不太應(yīng)用其它輔助色，所以主色填充上我們不再填充頂部導(dǎo)航欄的背景，而是將更多元素應(yīng)用主色，減少輔助色數(shù)量。

undefined

然后是主色占比小，色彩豐富度高的方案，進(jìn)一步降低主色應(yīng)用的比例，然后在金剛區(qū)、標(biāo)簽等處使用較為豐富的配色。

undefined

最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。

undefined

根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結(jié)果和風(fēng)格，在每次設(shè)計(jì)開始實(shí)施前，我們都可以根據(jù)這種做法來做嘗試，并選出自己滿意的方案。


要再次強(qiáng)調(diào)，UI 配色是極其強(qiáng)調(diào)形式的應(yīng)用科學(xué)，最后做的往往會(huì)和一開始想的效果有極大出入，所以需要我們有幾個(gè)備選方案，可以隨時(shí)進(jìn)行調(diào)整，并選出合理的那個(gè)。






以上是我們關(guān)于配色有關(guān)知識(shí)點(diǎn)的分享，希望可以幫助大家提升對(duì) UI 配色的認(rèn)識(shí)。


最后放一張阿瑪尼的配色格言，我們下一篇再賤！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



評(píng)論(0) 瀏覽(1119)

UI設(shè)計(jì)師的產(chǎn)品體驗(yàn)

純純

01、騰訊視頻，色覺障礙優(yōu)化

騰訊視頻在播放視頻時(shí)可以通過輔助功能調(diào)節(jié)色覺障礙優(yōu)化，針對(duì)色覺障礙的用戶提供了相應(yīng)色彩畫面的選擇。通過優(yōu)化視頻色彩來提高畫面辨識(shí)度，更加人性化的照顧更多用戶群體。

代代 摘錄





02、騰訊視頻，重回后繼續(xù)播放的小細(xì)節(jié)

當(dāng)用戶觀影過程中需要暫停退出當(dāng)前窗口，當(dāng)重新切換回來時(shí)，視頻播放進(jìn)度會(huì)自動(dòng)調(diào)節(jié)到暫停前 3-5 秒。這樣的處理可以讓用戶可以更好的對(duì)劇情進(jìn)行重新銜接，延續(xù)離開時(shí)的記憶，非常人性化的細(xì)節(jié)處理。

代代 摘錄





03、高德地圖十一期間不一樣

高德地圖節(jié)日期間在左上角新增了“景區(qū)隨身聽”服務(wù)，打造千人千面的全新語音導(dǎo)覽體驗(yàn)，首批覆蓋全國逾500個(gè)熱門景區(qū)，為高德用戶帶來不一樣的十一假期體驗(yàn)。

黑馬青年 摘錄





04、剪映，拖動(dòng)試聽音樂有助于選擇

剪映在添加音樂時(shí)，可以通過拖動(dòng)音頻來快速試聽該音樂，快速跳過緩慢的前奏部分，直接試聽音樂高潮部分。根據(jù)當(dāng)前素材選擇最適合的高潮部分配音，可以節(jié)省用戶選擇配音的時(shí)間。

Liaju 摘錄





05、高德地圖，截圖生成長圖

搜索好目的地之后如果選擇公交地鐵出行，為了防止可能由于網(wǎng)絡(luò)不佳等因素不能及時(shí)查看交通信息，可通過截圖功能，保存完整的路線指引圖。保存圖片后可在相冊(cè)中查看長圖，也方便分享給好友，非常人性化。

疏晶晶 摘錄





06、企鵝 FM，左滑到底直接刪除收聽記錄

企鵝 FM 最近收聽記錄中，不僅可以左滑配合點(diǎn)擊刪除，還可以左滑到底直接刪除當(dāng)前操作內(nèi)容。

許文娟 摘錄





07、攜程旅行語音導(dǎo)覽

在攜程旅行 APP 中，針對(duì)部分景點(diǎn)介紹有設(shè)置語音導(dǎo)覽的功能，初次體驗(yàn)?zāi)憧梢赃x擇該旅游景區(qū)的三個(gè)景點(diǎn)進(jìn)行試聽。對(duì)于很多游客來說只是看風(fēng)景，如果不了解景點(diǎn)背后的故事，是很難有代入感的，這個(gè)功能可以讓你對(duì)景點(diǎn)有個(gè)初步認(rèn)知。

黑馬青年 摘錄





08、微信讀書，想看啥搖一搖

微信讀書，搖一搖！它會(huì)根據(jù)用戶的閱讀記錄推薦類似的書籍。當(dāng)用戶不知道看什么書的時(shí)候就搖一搖，以有趣的交互解決用戶選擇困難癥。

代代 摘錄





09、bilibili 漫畫跨頁拼貼閱讀

一般的漫畫都是在一頁之中進(jìn)行分鏡，在手機(jī)上閱讀時(shí)不會(huì)有什么障礙，但是當(dāng)出現(xiàn)一些比較大的跨頁插畫時(shí)，手機(jī)上的觀看體驗(yàn)就不是那么友好。而當(dāng)出現(xiàn)跨頁時(shí)，bilibili 漫畫可以通過向下滑動(dòng)來進(jìn)行拼頁，將跨頁拼成一頁來進(jìn)行觀看，優(yōu)化了閱讀體驗(yàn)。

住住 摘錄





10、叮咚買菜購物車領(lǐng)券激活用戶購買欲

隨著生活方式的不斷變化，現(xiàn)在買菜這樣的家常小事都可以服務(wù)到家。


最近在體驗(yàn)叮咚買菜 App 的時(shí)候，發(fā)現(xiàn)購物車頂部會(huì)有領(lǐng)券提示，通過滿減、優(yōu)惠券等形式可以更快的激活用戶購買欲?？諣顟B(tài)的購物車可以激活用戶進(jìn)行商品添加，已選擇商品后會(huì)看到滿減提示，激活用戶選擇更多的商品達(dá)到滿減權(quán)限，一舉多得。

黑馬青年 摘錄





11、微博動(dòng)漫，不一樣的性別設(shè)置

點(diǎn)擊右上角的男生/女生頭像便可直接替換角色，區(qū)別于常見的輸入形式，簡化用戶操作步驟，并且推送內(nèi)容會(huì)根據(jù)用戶性別進(jìn)行差異化推送。

Cherry 摘錄





12、記賬城市，游戲化記賬玩法

對(duì)于我們這一代的年輕人來說能堅(jiān)持記賬的估計(jì)相對(duì)較少，一些互聯(lián)產(chǎn)品的引入相對(duì)可以激活這一部分人群。最近體驗(yàn)的記賬城市讓我影響深刻，將游戲化的場(chǎng)景引入產(chǎn)品設(shè)計(jì)中，你記錄一次就相當(dāng)于為自己的虛擬城市進(jìn)行一次基建，帶入了幾分趣味性。


也可以點(diǎn)擊拍攝圖標(biāo)進(jìn)行照片記錄，調(diào)整好需要展示的城市場(chǎng)景，點(diǎn)擊拍攝時(shí)模擬了類似拍立得形式的照片打印。整個(gè)體驗(yàn)不僅年輕化、游戲化，也結(jié)合了趣味性，在細(xì)節(jié)的處理上面也非常到位。

黑馬青年 摘錄





13、美圖秀秀以營銷思路引導(dǎo)登錄

通常訪問個(gè)人中心都需要用戶登錄賬戶，如何引導(dǎo)用戶創(chuàng)建賬戶是產(chǎn)品不斷思考的問題。美圖秀秀以紅包微動(dòng)效替換默認(rèn)頭像，以登錄領(lǐng)紅包引導(dǎo)用戶創(chuàng)建賬戶，也算是一種不錯(cuò)的以營銷思路作為引導(dǎo)的方式。

黑馬青年 摘錄





14、骨骼，繪畫人的熱愛

很喜歡這款解析人體結(jié)構(gòu)的 App，設(shè)計(jì)很大膽，有個(gè)性。點(diǎn)擊右上角“顯示插針”會(huì)顯示插針在某個(gè)部位，點(diǎn)擊插針還能出現(xiàn)對(duì)這個(gè)部位的解釋。還能對(duì)骨骼進(jìn)行360旋轉(zhuǎn)，深入解剖每個(gè)部位。


功能操作控件放在上下左右四個(gè)角，內(nèi)容的布局打破常規(guī)設(shè)計(jì)，左下角的“滑輪”操作，當(dāng)你滑動(dòng)時(shí)就會(huì)在“顯示界面”跟“隱藏界面”之間切換。

Liaju 摘錄





15、Keep 不一樣的任務(wù)設(shè)置

Keep 的任務(wù)設(shè)置采用 H5 的形式，區(qū)別于其他大眾的常規(guī)任務(wù)形式。沒人喜歡做任務(wù)，用講故事的方式去設(shè)置任務(wù)關(guān)卡，會(huì)增加用戶的參與度。


“卡路里工廠”在取名上就增加了不少趣味性與點(diǎn)擊欲望，進(jìn)入“卡路里工廠”界面用星球、星空等元素設(shè)計(jì)，畫面具有神秘感，讓用戶覺得是在探索星球中完成任務(wù)。結(jié)合游戲化的形式更有趣味性，因而提升用戶參與度。

Liaju 摘錄





16、音兔，音樂智能推薦

音兔 App 在進(jìn)行圖片和視頻編輯時(shí)，音樂的類型會(huì)根據(jù)圖片和視頻的內(nèi)容進(jìn)行推薦，如發(fā)的風(fēng)景照就會(huì)推薦旅行相關(guān)的音樂，發(fā)的貓咪照片就會(huì)推薦貓奴的音樂，方便用戶在進(jìn)行圖片和視頻編輯時(shí)更快捷的選到適合的音樂。

Xindy 摘錄





17、微信讀書滑到頭還能無限場(chǎng)

卡片式滑動(dòng)翻頁現(xiàn)在非常普及，起點(diǎn)通常是無法滑動(dòng)的，但是微信讀書打破了你的思維局限。在開始時(shí)允許你向右滑動(dòng)，此時(shí)便可進(jìn)入無限場(chǎng)，帶給你不一樣的互動(dòng)體驗(yàn)。

黑馬青年 摘錄





18、招商銀行雙重刷新相結(jié)合

招商銀行 App 進(jìn)入社區(qū)狀態(tài)下 icon 變?yōu)樗⑿聵邮?，可以手?shì)下拉進(jìn)行刷新，也可以點(diǎn)擊 icon 進(jìn)行刷新，操作更加便捷。

Cherry 摘錄





19、網(wǎng)易云音樂，生日祝福

生日那天，網(wǎng)易云音樂的每日推薦圖標(biāo)會(huì)變成一個(gè)蛋糕圖形，每日推薦的第一首歌是「祝你生日快樂」。這些小細(xì)節(jié)是不是很暖心呢，反正我是被俘獲了。（Android Version 6.3.2）

無休 摘錄





20、Space FM 通過音樂交友

Space FM 模擬宇宙太空，把每個(gè)用戶比作一個(gè)宇航員，宇航員添加喜歡的歌曲，形成自己的音樂星球；宇航員可以帶著自己的星球在太空漫游，每隔30秒匹配新的宇航員，如果雙方都停留下來，可以聽對(duì)方的歌曲，還可以打招呼、聊天，聊得來可以收聽對(duì)方的音樂，即可私聊。


以太空星辰為動(dòng)態(tài)背景，播放著自己喜歡的歌，營造了一個(gè)輕松的氛圍。在與陌生人打招呼，有了音樂為話題引子，不會(huì)顯得唐突尷尬。

無休 摘錄





21、貓耳 FM 的閃屏啟動(dòng)音

貓耳 FM 增加啟動(dòng)音的設(shè)置，區(qū)別于傳統(tǒng) App 閃屏啟動(dòng)，加入聲音的閃屏啟動(dòng)音更增趣味性。推薦的啟動(dòng)音也非常符合產(chǎn)品二次元的調(diào)性，讓用戶在進(jìn)入 App 時(shí)有聲優(yōu)體驗(yàn)的沉浸感受，每一次的打開都是一次驚喜的體驗(yàn)。


“歡迎回來，主人”、“早安，大小姐”…等聲音錄制來自不同動(dòng)漫的經(jīng)典重現(xiàn)，能抓住一部分特定用戶人群的喜愛，也是非常棒的運(yùn)營策略。

老白 摘錄





22、京東商城添加活動(dòng)日歷功能

京東商城在首頁添加了活動(dòng)日歷的功能，用戶可以了解到未來一周的優(yōu)惠促銷活動(dòng)?？商砑踊顒?dòng)提醒，這樣用戶就不會(huì)錯(cuò)過好的優(yōu)惠活動(dòng)，同時(shí)也提高了平臺(tái)的轉(zhuǎn)化率。

逆光 摘錄





23、騰訊視頻，播放短視頻中推薦正片

觀看短視頻的時(shí)候，播放大概 5 秒左右，視頻下方標(biāo)題欄會(huì)變成正片內(nèi)容導(dǎo)航，避免用戶找影視名字的繁瑣，既能滿足用戶需要，又能增加產(chǎn)品需求。

皓月長歌 摘錄





24、酷狗音樂，透視立體翻頁設(shè)計(jì)

酷狗音樂歌單頁，頭部推薦歌單采用透視立體翻頁效果呈現(xiàn)，增強(qiáng)視覺畫面感，主體內(nèi)容更突出，也區(qū)別于平鋪卡片形式。頭部的背景顏色也融合當(dāng)前卡片的色調(diào)，整體更協(xié)調(diào)。類似這種呈現(xiàn)簡單立體翻頁效果的表現(xiàn)手法，在 UI 應(yīng)用場(chǎng)景中也越來越常見。

Liaju 摘錄





25、途家民宿，未完成訂單的設(shè)計(jì)呈現(xiàn)

當(dāng)用戶有未完成的任務(wù)訂單，在“首頁”和“我的”以顯著位置提示用戶完成訂單。多個(gè)訂單“首頁”以輪播形式進(jìn)行展示，“我的”以上下滑動(dòng)形式展示并提示用戶。

皓月長歌 摘錄





26、QQ 夜間模式下的 icon 設(shè)計(jì)

切換 QQ 夜間模式，底部標(biāo)簽欄消息選中模式下的 icon 結(jié)合睡覺打呼的情景設(shè)計(jì)，符合夜間場(chǎng)景。貼合場(chǎng)景的細(xì)節(jié)設(shè)計(jì)，帶給用戶更好的體驗(yàn)。

Liaju 摘錄





27、馬蜂窩旅游，詳情頁照片展示處理

馬蜂窩旅游在文章詳情頁展示作者拍攝的景點(diǎn)照片時(shí)，不會(huì)對(duì)照片進(jìn)行裁切等處理，而是以寬度固定高度自定義的方式進(jìn)行呈現(xiàn)。展示出照片本身的原始狀態(tài)，不僅方便作者拍攝不同比例的照片，也方便用戶從不同的視角觀看景點(diǎn)。

黑馬青年 摘錄





28、毒湯日歷，點(diǎn)贊也要扎心

一款毒雞湯產(chǎn)品，覺得很喪就打開看看，說不定喪喪就好了。點(diǎn)贊 icon 設(shè)計(jì)也是帶“扎”的，恰好符合產(chǎn)品屬性；當(dāng)你想翻過明天的時(shí)候，會(huì)提示“明天，怎么翻也翻不過去”。

Liaju 摘錄





29、百度翻譯，通過引導(dǎo)互動(dòng)完成信息采集

引導(dǎo)頁在產(chǎn)品中比較常見，從靜態(tài)、動(dòng)態(tài)、視頻等不斷演變到互動(dòng)式新形式引導(dǎo)設(shè)計(jì)。


在百度翻譯 APP 中，通過引導(dǎo)頁和用戶進(jìn)行互動(dòng)，來了解用戶群信息。通過這樣的互動(dòng)形式可以更好的被用戶所接受，并進(jìn)行相應(yīng)信息的選擇。

疏晶晶 摘錄





30、抖音，背景圖編輯預(yù)覽更人性化

在抖音設(shè)置個(gè)人主頁背景圖，更換圖片來自個(gè)人相冊(cè)，在進(jìn)行圖片編輯時(shí)，可以預(yù)覽基于布局結(jié)構(gòu)上的呈現(xiàn)效果，便于用戶截取需要的圖片顯示區(qū)域。

疏晶晶 摘錄





31、編輯微信朋友圈動(dòng)態(tài)試試長按照片

編輯微信朋友圈動(dòng)態(tài)過程中，如果選錯(cuò)圖片通常大家都是點(diǎn)擊圖片預(yù)覽時(shí)刪除。還有一種長按拖拽刪除可能容易被你忽略，不妨試試看，通過長按拖拽刪除照片更能方便用戶操作。

疏晶晶 摘錄





32、酷狗音樂，30 秒副歌播放

通過 30 秒的副歌播放，為你快速篩選是否喜歡這首歌，30 秒縮短了用戶試聽歌曲的時(shí)間成本。也會(huì)提示用戶下一步操作，如果 30 秒不夠可以增加 30 秒。 

Matilda 摘錄





33、QQ 音樂制作視頻歌詞海報(bào)

喜歡的歌詞可以制作成動(dòng)態(tài)海報(bào)，還可以自定義拍攝視頻，符合當(dāng)下流行的小視頻。將喜歡的歌詞歌曲同時(shí)賦予視頻的記憶，聽覺+視覺體驗(yàn)結(jié)合，給人更加豐富的情感體驗(yàn)。

Matilda 摘錄


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



評(píng)論(0) 瀏覽(1141)

底部標(biāo)簽欄全面解析

純純

目錄：


1、標(biāo)簽欄是什么？

2、為什么標(biāo)簽欄要放于底部？

3、標(biāo)簽欄的三大規(guī)則

4、標(biāo)簽欄的基礎(chǔ)規(guī)范

5、標(biāo)簽欄的圖標(biāo)樣式

6、標(biāo)簽欄的展示樣式

7、賦予標(biāo)簽欄更多內(nèi)容



一、標(biāo)簽欄是什么？


標(biāo)簽欄也叫Tab Bar，是移動(dòng)端應(yīng)用程序中最常用的UI元素之一。標(biāo)簽欄出現(xiàn)在應(yīng)用程序屏幕的底部，可以讓用戶在應(yīng)用程序中的不同部分之間快速切換。標(biāo)簽欄可以是半透明的，也可以具有背景色，在所有屏幕方向上都保持相同的高度，并且在顯示鍵盤時(shí)被隱藏。標(biāo)簽欄可以包含任意數(shù)量的標(biāo)簽，但是可見標(biāo)簽的數(shù)量根據(jù)設(shè)備的大小和方向而變化。如果由于水平空間有限而無法顯示某些選項(xiàng)卡，則最終的可見選項(xiàng)卡將變?yōu)椤案唷边x項(xiàng)卡，該選項(xiàng)卡將在單獨(dú)屏幕上的列表中顯示其他選項(xiàng)卡。


標(biāo)簽欄在任何目標(biāo)頁面中的高度是不變的，iOS 規(guī)定它的高度為98px(iOS @2x)。但因?yàn)?iPhone X 之后的全面屏手機(jī)引入了 Home Bar ，所以在進(jìn)行界面適配的時(shí)候，請(qǐng)務(wù)必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標(biāo)簽欄中標(biāo)簽的展示，這會(huì)讓兩個(gè)控件發(fā)生操作手勢(shì)沖突。




二、為什么標(biāo)簽欄要放于底部？


史蒂文·霍伯（Steven Hoober）在對(duì)移動(dòng)設(shè)備使用情況的研究中發(fā)現(xiàn)，人們會(huì)根據(jù)自己的設(shè)備，需求和背景以多種方式觸摸手機(jī)，觸摸手機(jī)屏幕或按鈕的用戶分三種基本方式：抱著手機(jī)的人占36%、兩只手使用手機(jī)的人占15%，而49％的人依靠一只手在手機(jī)上完成事情，除此之外75％的用戶僅用一個(gè)拇指觸摸屏幕。



在下圖中，出現(xiàn)在手機(jī)屏幕上的圖表是近似覆蓋圖，其中的顏色表示用戶的拇指可以接觸到哪些區(qū)域以與屏幕交互。綠色表示用戶可以輕松到達(dá)的區(qū)域；黃色，需要伸展的區(qū)域；紅色區(qū)域，要求用戶改變握持設(shè)備的方式。



這意味著：

將常用的“行為”放在屏幕底部很重要，因?yàn)橹恍枰绘I式的交互即可輕松到達(dá)這些“行為”。



三、標(biāo)簽欄的三大原則


底部標(biāo)簽欄設(shè)計(jì)應(yīng)當(dāng)遵循三大原則：結(jié)構(gòu)合理、位置清晰、可預(yù)測(cè)行為。


3.1 結(jié)構(gòu)合理

為了讓標(biāo)簽欄表現(xiàn)清晰，兩大平臺(tái)在規(guī)范里都對(duì)標(biāo)簽數(shù)量給出了相同的建議：建議標(biāo)簽欄內(nèi)的標(biāo)簽個(gè)數(shù)為3個(gè)至5個(gè)。因?yàn)闃?biāo)簽過多會(huì)使每一個(gè)單元標(biāo)簽的可觸空間降低，人們?cè)谖锢砩希ㄊ种福╇y以點(diǎn)擊或誤觸，除此之外還會(huì)增加應(yīng)用程序結(jié)構(gòu)的復(fù)雜性。



注：如果你因?yàn)楫a(chǎn)品結(jié)構(gòu)非常繁雜，標(biāo)簽數(shù)量想要達(dá)到更多，那么在 iOS 中就會(huì)給你強(qiáng)硬處理，iOS 人機(jī)交互規(guī)范告訴產(chǎn)品設(shè)計(jì)者們：標(biāo)簽欄雖然可以包含任意數(shù)量的標(biāo)簽，但可見標(biāo)簽的數(shù)量會(huì)根據(jù)設(shè)備的大小(平板或手機(jī))和方向(豎屏或橫屏)而自適應(yīng)變化。如果由于水平空間有限而無法顯示某些標(biāo)簽時(shí)，最后的一個(gè)可見標(biāo)簽將被會(huì)被系統(tǒng)強(qiáng)行轉(zhuǎn)換為“更多”選項(xiàng)，需要用戶點(diǎn)擊“更多”選項(xiàng)之后，系統(tǒng)才將在單獨(dú)屏幕上的列表中顯示其他被隱藏的標(biāo)簽。


3.2 位置清晰

“我在哪里？” 是用戶成功導(dǎo)航所需要回答的一個(gè)基本問題，我們應(yīng)當(dāng)采用適當(dāng)?shù)囊曈X提示讓用戶知道目前所處的位置（選中狀態(tài)）。在APP應(yīng)用中我們常見的處理方式有4種：改變圖標(biāo)樣式、改變大小、改變顏色、改變展示樣式。它們并不一定是獨(dú)立存在的，可以同時(shí)作用于一個(gè)標(biāo)簽。



3.3 可預(yù)測(cè)行為

選取每個(gè)底部導(dǎo)航選項(xiàng)都有通向它的目的地，底部導(dǎo)航應(yīng)當(dāng)將用戶直接引導(dǎo)到相關(guān)頁面，不應(yīng)該打開菜單或其他窗口。如果在某些情況下可以使用標(biāo)簽，但在其他情況下則無法使用，則應(yīng)用程序的界面將變得不穩(wěn)定且不可預(yù)測(cè)。我們要確保所有選項(xiàng)卡始終處于啟用狀態(tài)，并說明為什么選項(xiàng)卡內(nèi)容不可用。例如造作新家APP，當(dāng)用戶處于未登錄狀態(tài)時(shí)，就不能查看底部標(biāo)簽“我的”信息，當(dāng)我點(diǎn)擊標(biāo)簽“我的”，就會(huì)彈出快捷登陸界面，這樣就能讓用戶明白不能使用的原因是賬號(hào)未登陸，從另一層面講也很好的引導(dǎo)了用戶注冊(cè)與登陸。



注：不要使用標(biāo)簽欄為用戶提供對(duì)當(dāng)前屏幕或應(yīng)用程序模式下的元素起作用的控件，如果需要提供控件，請(qǐng)使用工具欄。



四、標(biāo)簽欄的基礎(chǔ)規(guī)范


在設(shè)計(jì)標(biāo)簽欄前我們首先要了解它的基礎(chǔ)規(guī)范，在保證基礎(chǔ)規(guī)范合理的情況下再去進(jìn)行設(shè)計(jì)。


4.1 圖標(biāo)視覺大小

為了保證圖標(biāo)的尺寸大小一致性，我們往往會(huì)建立基礎(chǔ)的網(wǎng)格尺寸來進(jìn)行繪制圖標(biāo)，下面就以常用的24x24為大家舉例：



網(wǎng)格包含2px出血位。這樣可以確保圖標(biāo)在導(dǎo)出時(shí)將保留其所需的比例和周圍的空白區(qū)域，同時(shí)還能夠很好的平衡圖標(biāo)的視覺重心。



最后加入圖標(biāo)的keyline，keyline由圓形，正方形，矩形，正交，三角形和對(duì)角線組成。它可以為您提供圖標(biāo)集中基本形狀或比例的一致大小。這使創(chuàng)建視覺上的穩(wěn)定變得更加容易，并有助于在設(shè)計(jì)相似比例的圖標(biāo)時(shí)有共同的參考準(zhǔn)則。


在24尺寸下的keyline構(gòu)成如下（24尺寸下的出血區(qū)域?yàn)?）：



當(dāng)把圖標(biāo)畫在網(wǎng)格上時(shí)可以很好的規(guī)范圖標(biāo)，讓它們從整體的視覺上看著統(tǒng)一規(guī)范。



4.2 標(biāo)簽欄布局

標(biāo)簽的數(shù)量以及標(biāo)簽的展示形式?jīng)Q定了標(biāo)簽的布局形式，標(biāo)簽的常見布局一共有2種：屏幕等分、圖標(biāo)左右間距相等。


4.2.1 屏幕等分

屏幕等分是最常見的標(biāo)簽布局形式，因?yàn)椴还芩嬖诙嗌賵D標(biāo)，都可以用它進(jìn)行屏幕劃分，計(jì)算方法也十分簡單，屏幕的寬度除以標(biāo)簽個(gè)數(shù)就是每列寬度。采用此等劃分的案例有：懂車帝、今日頭條。



4.2.2 圖標(biāo)左右間距相等

圖標(biāo)左右距離相等多用在標(biāo)簽數(shù)量為3個(gè)的情況下，計(jì)算方法是先去除中間圖標(biāo)的尺寸，然后再左右平均劃分等距。相對(duì)于屏幕等分，圖標(biāo)左右間距相等劃分更為緊湊。



4.3 標(biāo)簽欄熱點(diǎn)區(qū)域

根據(jù)菲茲定律，使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大?。⊿）有關(guān)。標(biāo)簽欄作為向用戶展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，熱點(diǎn)區(qū)域（可點(diǎn)擊區(qū)域范圍）的設(shè)定一定要合理。底部圖標(biāo)尺寸較小，如果將圖標(biāo)作為熱點(diǎn)區(qū)域，那么可點(diǎn)擊區(qū)域就偏小，很可能出現(xiàn)用戶點(diǎn)擊不到的情況，正確的做法是以標(biāo)簽欄的布局作為基礎(chǔ)設(shè)定，在標(biāo)簽相鄰的部分劃出一定區(qū)域作為不可點(diǎn)擊區(qū)域，以免用戶誤操作，參考如下，紅色為可熱點(diǎn)區(qū)域，藍(lán)色為不可點(diǎn)擊區(qū)域：




五、標(biāo)簽欄的圖標(biāo)樣式


在產(chǎn)品設(shè)計(jì)中，不同樣式的圖標(biāo)會(huì)給人不同的感受，隨著APP風(fēng)格越來越簡潔化，標(biāo)簽欄圖標(biāo)風(fēng)格緊緊地跟著界面的風(fēng)格而改變。經(jīng)過長時(shí)間的沉淀，標(biāo)簽欄圖標(biāo)常見的默認(rèn)設(shè)計(jì)樣式一共可分為四類：線性圖標(biāo)、面性圖標(biāo)、線性+面性圖標(biāo)、輕質(zhì)感圖標(biāo)。


5.1 線性圖標(biāo)

線性圖標(biāo)通過線來塑造輪廓，在圖標(biāo)設(shè)計(jì)中使用的線有粗細(xì)之分，常用的App圖標(biāo)設(shè)計(jì)線的粗細(xì)一般有2px、3px、4px，不同的線條粗細(xì)所帶來的視覺感受也不同，我在“如何讓你的圖標(biāo)具有說服力”文章中提到過，線條越粗那么圖標(biāo)的性格就越活潑、粗曠，線條越細(xì)圖標(biāo)性格就越精致、商務(wù)，圖標(biāo)使用描邊的粗細(xì)可以根據(jù)產(chǎn)品的氣質(zhì)來決定。



選中狀態(tài)：當(dāng)選中狀態(tài)為高亮線性圖標(biāo)時(shí)，選中狀態(tài)的圖標(biāo)顏色會(huì)與默認(rèn)狀態(tài)的圖標(biāo)顏色形成較強(qiáng)的反差，但由于線和線的差異性并不強(qiáng)，線性圖標(biāo)沒有面性圖標(biāo)更具吸引力（引導(dǎo)性），即使加入了高亮色識(shí)別度也不及面性強(qiáng)。airbnb在處理線性圖標(biāo)選中狀態(tài)時(shí)就考慮到了這一點(diǎn)，選中狀態(tài)下不僅對(duì)圖標(biāo)的顏色做了較大變化，還加大了圖標(biāo)及文字的描邊粗細(xì)，從一定程度上加強(qiáng)了圖標(biāo)的引導(dǎo)性。（注：線性狀態(tài)的圖標(biāo)選中狀態(tài)也可以變?yōu)槊嫘詧D標(biāo)或線性+面性圖標(biāo)）



5.2面性圖標(biāo)

面性圖標(biāo)是通過面來塑造形體的圖標(biāo)，采用了剪影的設(shè)計(jì)形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感，面性圖標(biāo)的承載信息相對(duì)與線性圖標(biāo)來說更重，更具有引導(dǎo)性。

選中狀態(tài)：面性圖標(biāo)的選中狀態(tài)為高亮面性圖標(biāo)，顏色可以為純色、也可以為漸變、透明。愛奇藝的選中狀態(tài)就采用了高亮面性圖標(biāo)的展現(xiàn)方式，除了把圖標(biāo)底色及文字的顏色加深以外，還加入了品牌色，甚至為了讓“會(huì)員”標(biāo)簽更加突出，還單獨(dú)對(duì)“會(huì)員”標(biāo)簽的顏色進(jìn)行了修改。



5.3線性+面性圖標(biāo)

線面結(jié)合圖標(biāo)相較單一的線性圖標(biāo)或單一的面性圖標(biāo)樣式更加豐富、也更富有趣味性。從設(shè)計(jì)的角度上說，由于元素的多樣化，設(shè)計(jì)更容易獲得好的效果。相反，如果運(yùn)用不當(dāng)會(huì)顯得圖標(biāo)非常雜亂，如何有效的把控好兩者之間的過度是關(guān)鍵。

選中狀態(tài)：線性圖標(biāo)的選中狀可以為高亮的線性+面性圖標(biāo)。懂車帝在處理標(biāo)簽選中狀態(tài)時(shí)就把圖標(biāo)底部加入了高亮黃色圓形塊狀，即保存了線性也添加了面，加深了選中狀態(tài)的視覺重量，更加明確的讓用戶感知自己所處的位置。



5.4輕質(zhì)感圖標(biāo)

輕質(zhì)感圖標(biāo)層次簡單，用色素雅干凈，采用輕投影、輕漸變的方法設(shè)計(jì)，這類圖標(biāo)具有一定的立體感，能給人輕盈、簡潔、精致的感覺。輕質(zhì)感圖標(biāo)在標(biāo)簽欄中運(yùn)用的較少，在特殊情況下才會(huì)使用，例如盒馬，就把輕質(zhì)感圖標(biāo)用在了首頁標(biāo)簽與盒馬小鎮(zhèn)標(biāo)簽，首頁標(biāo)簽的引入是為了讓用戶加強(qiáng)對(duì)品牌形象的認(rèn)知，而盒馬小鎮(zhèn)標(biāo)簽的引入則是為了加強(qiáng)圖標(biāo)的引導(dǎo)性。



*圖標(biāo)樣式的常用變化（選中與未選中）

在我調(diào)研上百種應(yīng)用程序中，發(fā)現(xiàn)主流的APP標(biāo)簽欄樣式變化大致分為六種：線性-線性、線性-面性、線性-線+面、面性-面性、面性-線+面、線+面-線+面。雖然標(biāo)簽的樣式變化繁多，但是使用率最多的是“由線性轉(zhuǎn)面性”標(biāo)簽。




六、標(biāo)簽欄的展示形式


標(biāo)簽欄的不同展示形式會(huì)給用戶帶來不同的使用習(xí)慣和使用感受，常見的標(biāo)簽展示形式有四種：圖標(biāo)+文字、純圖標(biāo)、純文字、舵式。


6.1圖標(biāo)+文字

圖標(biāo)+文字是最常見的標(biāo)簽展示形式，為了讓用戶能夠很好的明白圖標(biāo)的意圖，所以在圖標(biāo)下方會(huì)配有文字提示，這樣就能大大的降低誤讀的可能性。正因?yàn)橛形淖痔崾?，所以沒有必要過于擔(dān)心圖標(biāo)的識(shí)別性問題，那么圖標(biāo)就可以得到更深的延展，可以做的更有趣，更具有產(chǎn)品氣質(zhì)，甚至可以代入更深層次的動(dòng)效。

例如東家·守藝人APP，專門售賣各種手藝人的親手制作的各種藝術(shù)品，面向的對(duì)象是喜歡傳統(tǒng)文化的人群，在這樣的背景下東家結(jié)合宋體的筆畫（筆畫拆分）把圖標(biāo)設(shè)計(jì)的更加傳統(tǒng)、古樸，創(chuàng)造出具有東方韻味且極具形式感的圖標(biāo)設(shè)計(jì)。



6.2純圖標(biāo)

采用純圖標(biāo)展示形式的產(chǎn)品比較少見，純圖標(biāo)樣式的最大缺點(diǎn)就是識(shí)別性低，沒有文字說明會(huì)導(dǎo)致用戶很難找到自己想要去的位置，也不明確自己所處的狀態(tài)。所以我們?nèi)绻O(shè)計(jì)純圖標(biāo)形式，那么必須要考慮到圖標(biāo)的識(shí)別性問題，間接的舍棄掉圖標(biāo)更多的延展性，讓圖標(biāo)變得更規(guī)矩。（識(shí)別性的提升我之前寫的圖標(biāo)文章中提到過，主要可以從大眾認(rèn)知隱喻與真實(shí)世界映射兩個(gè)方向出發(fā)去提升）

使用純圖標(biāo)樣式的產(chǎn)品特征：產(chǎn)品單一、領(lǐng)域垂直、小眾化、用戶群體接受度高。即使?jié)M足這些條件下產(chǎn)品使用純圖標(biāo)標(biāo)簽，用戶第一次使用往往也是比較迷茫，需要等用戶熟悉后才會(huì)得到好轉(zhuǎn)，所以一定要慎用。除此之外不太建議用于電商、視頻、學(xué)習(xí)、社交等領(lǐng)域。

對(duì)于我們?cè)O(shè)計(jì)師來說使用純圖標(biāo)樣式的產(chǎn)品中最為熟悉的就是花瓣了。



6.3純文字（部分含標(biāo)識(shí)）

采用純文字展示形式能夠更直觀的讓用戶進(jìn)行操作，遵循簡單易用的原則。適合用戶群體跨度較大的產(chǎn)品，多用于直播類、內(nèi)容類、簡單工具類APP中。缺點(diǎn)也顯而易見，圖標(biāo)樣式比較單一，沒法加入更多趣味化、具有產(chǎn)品特性的元素到標(biāo)簽中。

采用純文字展示形式的產(chǎn)品有很多，最熟悉不過的就是抖音，抖音的標(biāo)簽?zāi)J(rèn)狀態(tài)下采用了純文字形式，選中狀態(tài)則把文字高亮顯示，并且底部加入了圓角矩形，對(duì)于用戶群體跨度較大的產(chǎn)品，這樣的展現(xiàn)形式再好不過了。（抖音在途中改用過圖標(biāo)+文字格式，不過后面也放棄了，我當(dāng)時(shí)用著圖標(biāo)+文字類型的抖音，的確感覺太奇怪?。?/span>



6.4舵式

舵式標(biāo)簽可以看為底部標(biāo)簽式導(dǎo)航的一種變體。它在后者的基礎(chǔ)上，突出強(qiáng)調(diào)了一個(gè)標(biāo)簽并且放在中間的位置，樣子看起來像攢了一個(gè)舵，所以取名為舵式標(biāo)簽。一般舵式標(biāo)簽的顏色、大小等視覺表現(xiàn)會(huì)被設(shè)計(jì)得和其他普通標(biāo)簽有所差異，通過視覺對(duì)比的方式吸引用戶關(guān)注。舵式標(biāo)簽通常和產(chǎn)品框架體現(xiàn)無關(guān)，大多數(shù)應(yīng)用程序使用舵式標(biāo)簽是用來承載系統(tǒng)功能。起初是因?yàn)樯鐓^(qū)類APP為了激勵(lì)和方便用戶隨時(shí)隨地地輸出UGC內(nèi)容，所以把觸發(fā)用戶創(chuàng)作/發(fā)布的功能按鈕放置在標(biāo)簽欄中。

因?yàn)槎媸綐?biāo)簽可以很好地承載產(chǎn)品的重要功能，而被許多的應(yīng)用程序設(shè)計(jì)所采用，經(jīng)過越來越多的應(yīng)用采用舵式標(biāo)簽，使用的形式也越來越多樣，它現(xiàn)在并不再單一地用于承載產(chǎn)品功能，而是配合營銷場(chǎng)景、付費(fèi)場(chǎng)景，給產(chǎn)品的變現(xiàn)、拉新賦能。拼多多就把它拉新的主要入口作用到了舵式圖標(biāo)上，并且為了讓圖標(biāo)更加顯目，甚至把圖標(biāo)做成了輕質(zhì)感的形式體現(xiàn)，同時(shí)也通過2像素的線性圖標(biāo)減弱其他4個(gè)標(biāo)簽的引導(dǎo)性。




七、賦予標(biāo)簽更多內(nèi)容


標(biāo)簽欄不僅是向用戶展現(xiàn)產(chǎn)品框架的關(guān)鍵控件，還可以貫穿整個(gè)產(chǎn)品的商業(yè)價(jià)值的體現(xiàn)，它是連接著整個(gè)產(chǎn)品最重要的頂層信息。如果想要讓標(biāo)簽變得更加豐富，想要標(biāo)簽內(nèi)容中含有更多的情感需求、 商業(yè)需求、運(yùn)營需求，那么我們可以重點(diǎn)從這兩個(gè)層面考慮：視覺層面、交互層面。


7.1視覺層面

在視覺層面上我們可以迎合用戶的偏好與期望，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅能夠很好的向用戶傳遞著產(chǎn)品調(diào)性還能吸引用戶關(guān)注以及引導(dǎo)用戶進(jìn)行操作。


7.1.1設(shè)計(jì)裝飾性圖標(biāo)

裝飾性圖標(biāo)僅僅是用來提升整個(gè)界面的視覺體驗(yàn)，通過豐富視覺體驗(yàn)的方法來增加內(nèi)容的觀賞性，這樣不僅可以吸引并留住用戶，還可以讓整個(gè)用戶體驗(yàn)更加積極。


&整體裝飾圖標(biāo)

整體裝飾性圖標(biāo)的出現(xiàn)往往是為了滿足情感需求與商業(yè)需求，整體裝飾圖標(biāo)并不是一直存在的，它的特點(diǎn)是季節(jié)性與周期性，并且它并不具備任何功能性。

從情感需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：例如世界杯火熱進(jìn)行時(shí)，優(yōu)酷為了滿足用戶的情感需求，就把標(biāo)簽欄的圖標(biāo)全部替換為帶有世界杯元素的圖案，讓用戶與其產(chǎn)生情感的共鳴。



從商業(yè)需求出發(fā)設(shè)計(jì)裝飾圖標(biāo)：現(xiàn)在的年貨節(jié)，之前的雙十二、雙十一、618等，每到節(jié)日促銷活動(dòng)的時(shí)候，很多電商應(yīng)用都會(huì)換上裝飾性圖標(biāo)，例如一號(hào)店，在過年前就把標(biāo)簽欄圖標(biāo)全部改為含帶過年氣息的元素，提前來預(yù)熱活動(dòng)，引導(dǎo)用戶消費(fèi)。



&單個(gè)裝飾性圖標(biāo)

單個(gè)裝飾性圖標(biāo)的出現(xiàn)大部分都是為了滿足運(yùn)營需求，運(yùn)營為了推出某個(gè)活動(dòng)或功能，往往會(huì)單獨(dú)裝飾某個(gè)圖標(biāo)的設(shè)計(jì)視覺，以便于提高圖標(biāo)的引導(dǎo)性，最直接的例子就是我剛才提到過的拼多多。



7.1.2加入品牌基因

我們可以在標(biāo)簽中加入更多的品牌基因，讓其與品牌產(chǎn)生聯(lián)動(dòng)性，這一形式是大部分應(yīng)用程序都在做的，我們可以從這6個(gè)層面加入品牌基因：品牌顏色、品牌LOGO、品牌元素、品牌名稱、品牌性格、品牌吉祥物。


&品牌顏色

色彩是圖標(biāo)設(shè)計(jì)中重要的構(gòu)成元素之一，我們可以直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺元素。例如站酷，站酷的品牌色是黃色，標(biāo)簽欄的圖標(biāo)（選中狀態(tài)）就提取了品牌的黃色，讓其與品牌調(diào)性高度一致。



當(dāng)然品牌顏色除了可以直接用外，還可以在提取時(shí)適當(dāng)調(diào)整色彩的飽和度、明度，做更多的形式變化。例如懂車帝，就在原有的黃色基礎(chǔ)上做了些許調(diào)整，圖標(biāo)采用黃色透明漸變的處理方式，在與品牌顏色呼應(yīng)的同時(shí)，使得整個(gè)圖標(biāo)更加精致、有活力。



&品牌LOGO

提取品牌LOGO是最常用的使用方式，我們從品牌中提取出來的圖標(biāo)一般運(yùn)用在APP首頁標(biāo)簽。因?yàn)槭醉撌茿PP中最重要的頁面，也是進(jìn)入APP默認(rèn)的頁面，把首頁圖標(biāo)替換成品牌LOGO，能反復(fù)加強(qiáng)了用戶對(duì)App的LOGO印象，這樣不但使App內(nèi)外形成了視覺聯(lián)系，同時(shí)也二次傳遞了品牌形象。例如大眾點(diǎn)評(píng)，它的首頁標(biāo)簽就用了品牌LOGO，同時(shí)也使用了品牌顏色。



&品牌元素

我們可以在品牌中提取它識(shí)別性較強(qiáng)的局部元素作為圖標(biāo)。例如虎牙直播，它就提取了品牌卡通形象的外輪廓作為首頁圖標(biāo)。



品牌提取的元素并不只是所見到的品牌視覺形象，還可以提取與品牌內(nèi)容強(qiáng)相關(guān)的元素。例如QQ音樂，它并沒有把它的品牌LOGO直接放于其中，而是通過大眾所熟知的音符作為首頁圖標(biāo)。



&品牌名稱

如果你的品牌還不為大眾所熟知，那么為了強(qiáng)化用戶對(duì)品牌名稱的認(rèn)知，可以把品牌名稱直接放入標(biāo)簽欄中。例如MONO，就把它的名稱分為四個(gè)字母分別放在了4個(gè)標(biāo)簽內(nèi)，需要注意的是這類圖標(biāo)不能單獨(dú)出現(xiàn)，因?yàn)樗旧聿痪邆渥R(shí)別性與引導(dǎo)性，必須配合文字一起出現(xiàn)，這樣才能讓用戶理解標(biāo)簽的真正功能，我們不能為了設(shè)計(jì)而設(shè)計(jì)。



&品牌性格

圖標(biāo)風(fēng)格可以與品牌性格保持一致，一套帶有濃厚品牌感的圖標(biāo)，會(huì)讓人記憶猶新。例如：每日故宮，它的圖標(biāo)就非常具有特色，結(jié)合了品牌的性格以及定位，加入了眾多的古代中國元素，整體看起來有股濃濃的古韻之風(fēng)。



&品牌吉祥物

現(xiàn)在大部分品牌都會(huì)含帶吉祥物，我們可以在設(shè)計(jì)圖標(biāo)時(shí)提取吉祥物的外形，把它用于產(chǎn)品的標(biāo)簽中。例如盒馬，它就把吉祥物做為了底部標(biāo)簽，不過需要我們注意的是如果吉祥物的風(fēng)格與我們的圖標(biāo)風(fēng)格差別較大，我們就需要對(duì)它做風(fēng)格化的處理，不然看起來就十分突兀。（盒馬對(duì)吉祥物做了輕質(zhì)感的風(fēng)格化處理）



7.1.3讓用戶自定義

讓用戶自定義的標(biāo)簽現(xiàn)在越來越常見，而每個(gè)產(chǎn)品對(duì)其思考的層面也都有所不同。自定義標(biāo)簽往往出現(xiàn)在個(gè)人中心，它會(huì)根據(jù)用戶上傳的頭像或用戶的捏臉生成圖標(biāo)。


&用戶頭像

目前市面上很多APP都把用戶上傳的頭像作為了個(gè)人中心標(biāo)簽展示，例如我們常用的百度網(wǎng)盤就采用了此方案，當(dāng)用戶注冊(cè)未上傳用戶頭像時(shí)，會(huì)默認(rèn)顯示系統(tǒng)標(biāo)簽，當(dāng)用戶上傳完后就會(huì)顯示用戶頭像，并且如果你是會(huì)員，還會(huì)把會(huì)員標(biāo)示顯示在標(biāo)簽的右上方，彰顯會(huì)員用戶的尊貴性。

我們可以很明顯的發(fā)現(xiàn)百度網(wǎng)盤的底部標(biāo)簽?zāi)J(rèn)狀態(tài)為線性圖標(biāo)，而個(gè)人中心不管默認(rèn)狀態(tài)還是選擇狀態(tài)都為面性圖標(biāo)，所以如果你想要加強(qiáng)個(gè)人中心的引導(dǎo)性，那么可以采取此方案。



&捏臉

捏臉功能作為SOUL的一大特色，捏臉的虛擬形象賦予了真實(shí)人格屬性，加強(qiáng)了社交的傳播性，所以SOUL決定把用戶自定義的捏臉放于個(gè)人中心標(biāo)簽中。


7.2交互層面

除了對(duì)標(biāo)簽做視覺的提升外，我們還可以對(duì)其加入合理的交互效果，一方面可以提升用戶在使用產(chǎn)品過程中的樂趣，另一方面還可以為用戶提供更多便利，從而增強(qiáng)用戶體驗(yàn)。


7.2.1標(biāo)簽功能切換

在不同的狀態(tài)下點(diǎn)擊標(biāo)簽的功能也不一樣，一個(gè)標(biāo)簽可承載2到3個(gè)功能，可以滿足不同狀態(tài)下的用戶需求。


&承載2個(gè)功能案例

SOUL的廣場(chǎng)標(biāo)簽（進(jìn)入選取頁+刷新）

SOUL的廣告標(biāo)簽承載了2個(gè)功能，當(dāng)你處于其他標(biāo)簽時(shí)，點(diǎn)擊廣場(chǎng)標(biāo)簽則直接進(jìn)入到廣場(chǎng)頁面；當(dāng)你處于廣場(chǎng)頁面中時(shí)，再次點(diǎn)擊標(biāo)簽則會(huì)刷新整個(gè)頁面。



有貨的發(fā)現(xiàn)標(biāo)簽（進(jìn)入選取頁+上傳圖片）

有貨的發(fā)現(xiàn)標(biāo)簽也承載了2個(gè)功能，在設(shè)計(jì)上運(yùn)用的非常巧妙，當(dāng)你處于其他標(biāo)簽時(shí)，點(diǎn)擊發(fā)現(xiàn)標(biāo)簽則進(jìn)入到發(fā)現(xiàn)頁面；當(dāng)你在發(fā)現(xiàn)頁面時(shí)你的發(fā)現(xiàn)標(biāo)簽則變?yōu)榱松蟼鲌D片標(biāo)簽，可以點(diǎn)擊上傳圖片。



&承載3個(gè)功能案例

淘寶首頁標(biāo)簽（進(jìn)入選取頁+刷新+置頂）

淘寶的首頁標(biāo)簽同時(shí)承載了3個(gè)功能，當(dāng)你處于其他標(biāo)簽中，點(diǎn)擊首頁標(biāo)簽則直接進(jìn)入到首頁頁面；當(dāng)你在首頁頁面第一屏?xí)r，你點(diǎn)擊首頁標(biāo)簽則會(huì)刷新整個(gè)頁面；當(dāng)你滑過3分之1屏?xí)r，首頁標(biāo)簽的功能則變?yōu)橹庙?。所以在不同狀態(tài)下首頁標(biāo)簽也會(huì)具備不同的功能，并且每種狀態(tài)下的標(biāo)簽樣式也是不同。



愛奇藝首頁標(biāo)簽（進(jìn)入選取頁+到達(dá)指定位置+置頂）

愛奇藝的首頁標(biāo)簽也是同時(shí)承載了3個(gè)功能，不過它與淘寶有些許不同，愛奇藝并不能刷新頁面，而作為替換的功能是直接到達(dá)指定位置“猜你喜歡”。



7.2.2觸覺與聽覺

我們做的設(shè)計(jì)不要僅限于視覺所看到的，還要考慮到所觸摸的、所聽到的，我們可以利用觸覺與聽覺去輔助用戶確認(rèn)自己的選擇，當(dāng)然我們一定要合理利用，反之則會(huì)讓用戶感到十分反感。


&觸覺

西瓜視頻與今日頭條在點(diǎn)擊標(biāo)簽欄圖標(biāo)時(shí)手機(jī)就會(huì)發(fā)出輕微的震動(dòng)，給予了用戶很好的點(diǎn)擊反饋。



&聽覺

SOUL點(diǎn)擊星球標(biāo)簽時(shí)手機(jī)就會(huì)發(fā)出戀愛鈴聲，在SOUL的產(chǎn)品報(bào)告中，SOUL主要面對(duì)女性用戶，女性用戶約為男性用戶的2.4倍（女人更偏感性），并且它的主要需求是滿足測(cè)試、匹配、交友，所以戀愛鈴聲能夠很好的引起用戶的情感共鳴。不過鈴聲有利有弊，當(dāng)你在特定場(chǎng)景下使用SOUL時(shí)，點(diǎn)擊到星球標(biāo)簽周圍人也都能聽到戀愛鈴聲，實(shí)屬尷尬，所以我在特定場(chǎng)景下使用SOUL時(shí)都會(huì)默默的關(guān)掉聲音。



7.2.3標(biāo)簽動(dòng)畫

精彩的圖標(biāo)動(dòng)畫，對(duì)整體的設(shè)計(jì)具有畫龍點(diǎn)睛的作用，降低標(biāo)簽切換時(shí)的枯燥感，提升操作的愉悅度和期待感。甚至可以通過 tab 的動(dòng)畫設(shè)計(jì)給用戶傳達(dá)出整個(gè) APP 設(shè)計(jì)的品牌及理念。標(biāo)簽動(dòng)畫往往都比較簡單，主要有：縮放、旋轉(zhuǎn)、顏色過渡、位移、抖動(dòng)、填充、線性軌跡、結(jié)合容器、元素介質(zhì)等。接下來我們來看看SOUl、虎牙、汽車之家是怎么做的。


&SOUL-彈性縮放+結(jié)合容器+線性軌跡

SOUL的底部標(biāo)簽欄運(yùn)用到了彈性動(dòng)畫、結(jié)合容器以及線性軌跡。帶有彈性縮放的標(biāo)簽反饋，讓整體的設(shè)計(jì)更加具有趣味性，相比線性縮放也更有視覺沖擊力。圖標(biāo)的運(yùn)動(dòng)規(guī)則：先從 0 放大到最大（數(shù)值根據(jù)實(shí)際情況設(shè)定），然后再回彈至正常大小。除了彈性動(dòng)畫外，它還結(jié)合了容器的元素對(duì)內(nèi)部進(jìn)行了顏色的替換以及單線條的軌跡動(dòng)畫。這樣的處理不僅趣味性十足，還強(qiáng)化了選中當(dāng)前狀態(tài)，整體標(biāo)簽切換的一致性也較高。



&虎牙-抖動(dòng)+趣味表達(dá)

虎牙一直是我比較喜歡的直播平臺(tái)，它的底部標(biāo)簽動(dòng)畫也是非常值得借鑒，運(yùn)用到的動(dòng)畫形式是抖動(dòng)與趣味表達(dá)。抖動(dòng)是通過圖標(biāo)的左右、上下快速位移或旋轉(zhuǎn)形成，整體的動(dòng)畫效果節(jié)奏較快，具有一定的速度感，使整個(gè)標(biāo)簽切換的情緒表達(dá)較為俏皮、可愛。除了抖動(dòng)外還在切換過程中代入了更多小元素的趣味表達(dá)，賦予了圖標(biāo)更多的性格，對(duì)我們的設(shè)計(jì)進(jìn)行再升華，從而提高整體設(shè)計(jì)的質(zhì)感和趣味。



&汽車之家-結(jié)合容器+細(xì)節(jié)晃動(dòng)

因?yàn)橛脩羧后w的不同，汽車之家在標(biāo)簽動(dòng)畫的設(shè)計(jì)上也相對(duì)簡單、嚴(yán)謹(jǐn)，它的動(dòng)畫形式主要是結(jié)合容器與細(xì)節(jié)晃動(dòng)。選中效果由線切換為面，并加入了品牌底色，這樣能夠清晰的給用戶傳達(dá)當(dāng)前頁面。并且為了不使整體的切換效果變得生硬，在切換過程中采用了透明度與彈性縮放，讓其過渡的相對(duì)柔和。在細(xì)節(jié)的處理上也是非常用心，每個(gè)圖標(biāo)都帶有笑臉的形狀，間接的給用戶傳達(dá)“笑臉”信息，在選取標(biāo)簽時(shí)內(nèi)部形狀會(huì)輕微晃動(dòng)。整體來看汽車之家的標(biāo)簽動(dòng)效雖然偏向嚴(yán)謹(jǐn)，但是在細(xì)節(jié)上也給予用戶傳達(dá)了更多的情感。


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


評(píng)論(0) 瀏覽(4081)

移動(dòng)端選擇器的正確使用指南

純純

一.什么是選擇器


選擇器是一個(gè)輸入字段， 用戶必須在其中選擇一個(gè)（或多個(gè)）選項(xiàng)，這與文本字段中用戶可以自由使用的輸入?yún)^(qū)不同。選擇器具有各種不同的形狀和形式。下拉菜單，復(fù)選框，切換按鈕，滑塊等都是不同類型的選擇器，但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項(xiàng)數(shù)量：一個(gè)或多個(gè)。



二.選擇器的類別


-單選選擇器

-多選選擇器



1.單選選擇器


單選選擇器按效果又可以分為：點(diǎn)擊選擇器、滑動(dòng)選擇器、多聯(lián)動(dòng)選擇器、開關(guān)選擇器、可搜索效果的選擇器、地圖選擇器。


特點(diǎn)：同一時(shí)間只能選擇一個(gè)選項(xiàng)，當(dāng)你已經(jīng)選擇完一項(xiàng)后，準(zhǔn)備選取另一項(xiàng)，那么后選的一項(xiàng)會(huì)立刻使先選的一項(xiàng)被取消選擇。

 

1-1點(diǎn)擊選擇器


點(diǎn)擊選擇器可分為兩種狀態(tài)，狀態(tài)一為立即觸發(fā)，當(dāng)你點(diǎn)擊后會(huì)立即跳到下一步操作；狀態(tài)二為再次確認(rèn)觸發(fā)，當(dāng)選中某項(xiàng)時(shí)，不會(huì)立即觸發(fā)操作，而是需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。

 

-立即觸發(fā)式：


特點(diǎn)：直接進(jìn)入，并沒有再次確認(rèn)的按鈕，可以讓你快速到達(dá)想要的目的。


建議：雖然目的能快速達(dá)到，不過也很可能會(huì)造成誤操作，所以在設(shè)定這類選擇器時(shí)要多考慮手指的觸碰區(qū)域以及每個(gè)選擇元素的距離，同時(shí)正因?yàn)槭侵苯犹D(zhuǎn)，所以應(yīng)當(dāng)加入一些操作提示。


舉例：汽車之家在用戶選擇二手車時(shí)就會(huì)出現(xiàn)此選擇器，當(dāng)我在汽車之家想要選擇二手車時(shí)，它會(huì)彈出立即觸發(fā)式選擇器控件，我們?cè)诳丶峡梢钥吹接?個(gè)圓形選項(xiàng)，分別為：汽車之家誠信聯(lián)盟、準(zhǔn)新車、奧迪、奔馳、寶馬、三廂轎車、分期購車，當(dāng)我點(diǎn)擊“奧迪”選項(xiàng)時(shí)就會(huì)立即跳轉(zhuǎn)選擇后的頁面，為了讓用戶知道自己選擇后的狀態(tài)，在跳轉(zhuǎn)頁面時(shí)還會(huì)彈出非模態(tài)彈窗的文字提示“共找到1943輛車”。


-再次確認(rèn)觸發(fā)式：


特點(diǎn)：這是最為常見的選擇器類型，當(dāng)所在選項(xiàng)選上，除了選擇另一個(gè)選項(xiàng)之外，便沒法取消選中狀態(tài)。（選且只能選擇一個(gè)選項(xiàng)）


建議：在設(shè)定此類選擇器時(shí)我們應(yīng)該從產(chǎn)品的角度去考慮是否給用戶一個(gè)默認(rèn)選項(xiàng)，甚至是否考慮給出一個(gè)重置按鈕。


舉例：我剛注冊(cè)小紅書時(shí)，在小紅書填寫信息頁面中，它的默認(rèn)選項(xiàng)是“男”，我點(diǎn)擊“女”，則會(huì)自動(dòng)取消掉“男”，它們兩者并不能同時(shí)存在，并且只有我點(diǎn)擊下一步按鈕時(shí)才會(huì)正式確認(rèn)我選擇完成。


1-2滑動(dòng)選擇器


特點(diǎn)：滑動(dòng)選擇器是將需要選中的內(nèi)容滑動(dòng)至中部，然后點(diǎn)擊確認(rèn)按鈕確認(rèn)選中后返回選中內(nèi)容。大多數(shù)運(yùn)用在選擇時(shí)間或地址上。


建議：滑動(dòng)選擇器的展示區(qū)域有限，部分選項(xiàng)會(huì)被隱藏，最好是當(dāng)用戶對(duì)所有選項(xiàng)都比較熟悉、有預(yù)期的時(shí)候，才使用它。為了保證手機(jī)屏幕觸控精度，以免發(fā)生誤觸，滾輪選擇器建議控制在5列以內(nèi)。

舉例：在小紅書填寫年齡信息時(shí)，我們只需用手指在區(qū)域內(nèi)滑動(dòng)即可選擇想要的選項(xiàng)。


1-3多聯(lián)動(dòng)選擇器


特點(diǎn)：多聯(lián)動(dòng)選擇器是由兩個(gè)或兩個(gè)以上的中繼器制作而成，第一個(gè)中繼器選擇后，一般會(huì)對(duì)第二個(gè)中繼器進(jìn)行篩選，不過因?yàn)轱@示的區(qū)域有限，所以當(dāng)你要切換時(shí)，還只能挨個(gè)切換，效率低下。


建議：可以通過數(shù)據(jù)以及功能來減少選擇時(shí)間，例如在選擇地區(qū)時(shí)，根據(jù)當(dāng)前GPS定位地理位置，定位相關(guān)省級(jí)信息及名稱，減少滑動(dòng)操作。


舉例：如下，當(dāng)我選擇了內(nèi)蒙古自治區(qū)，那么2級(jí)內(nèi)容就應(yīng)該篩選掉內(nèi)蒙古以外的城市，比較適用于省份-城市或者品牌-產(chǎn)品這種類似的選擇，當(dāng)然下面第一張多聯(lián)動(dòng)選擇器也結(jié)合了滑動(dòng)選擇器。


多聯(lián)動(dòng)選擇器展示的方式非常多，不僅可以用滑動(dòng)形式展示，還可以用點(diǎn)擊、平鋪列表等形式展示。


在左圖選擇城市時(shí)，我們必須要先選擇省份，再選擇城市，最后才能選擇縣；


右圖則沒有先后順序，不過當(dāng)你首先選擇顏色時(shí)，如果沒有相同尺碼的衣服，缺貨的尺碼則不會(huì)被選中，先選擇尺碼也是相同道理。


1-4切換開關(guān)選擇器


特點(diǎn)：切換開關(guān)選擇器有且只有兩種選項(xiàng)，用來在開和關(guān)兩種狀態(tài)之間切換。開關(guān)屬于觸發(fā)類組件，撥動(dòng)開關(guān)時(shí)，它所指揮的某個(gè)操作會(huì)立即生效，常見的使用就是授權(quán)。開關(guān)的默認(rèn)狀態(tài)并不都是關(guān)閉的，還要從產(chǎn)品本身的設(shè)定上來決策。


建議：如果某開關(guān)的功能是用戶經(jīng)常使用的狀態(tài)，那么可以在默認(rèn)狀態(tài)下打開開關(guān)，不過需要注意的是在某些特殊的開關(guān)按鈕需要打開時(shí)，必須要提前告知用戶。


舉例：當(dāng)我打開UC瀏覽器的設(shè)置時(shí)，它的輔助功能就使用了切換開關(guān)選擇器，切換的開關(guān)只需要點(diǎn)擊即可。


1-5可搜索選擇器


特點(diǎn)：可搜索選擇器一般用于選擇項(xiàng)較多時(shí)，特別是對(duì)于電商購物類的APP搜索選擇器是必不可少的，搜索選擇器會(huì)根據(jù)用戶輸入的內(nèi)容，對(duì)中繼器進(jìn)行模糊的搜索，讓用戶快速找到并選擇內(nèi)容。


建議：在搜索區(qū)域輸入文字時(shí)，可給予用戶更多的文字提示以及以及引導(dǎo)類信息。


舉例：小紅書在搜索時(shí)就會(huì)出現(xiàn)數(shù)字化的信息提示，這樣能夠很好的引導(dǎo)用戶進(jìn)入到想要的搜索結(jié)果：筆記或者商品頁面。


1-6地圖選擇器


特點(diǎn)：作為最特別的選擇器，它的功能是復(fù)雜的，它的操作方式也是多樣化的，地圖選擇器的操作可點(diǎn)擊、可拖拽、可放大縮小等等，它多用于生活類APP。


建議：可以在選擇器中加入更多趣味、互動(dòng)、可感知的設(shè)計(jì)，如加入過節(jié)元素、車輛行駛路徑、熱門區(qū)域、甚至選取后手機(jī)的震動(dòng)等。


舉例：


打車類APP必用的地圖選擇器，滴滴出行的用戶可以實(shí)時(shí)看到車輛信息，可以采用點(diǎn)擊、拖拽、放大等操作來選取上車地點(diǎn)，選取后還有文字信息提示，讓用戶確認(rèn)操作是否正確。


貝殼APP則用地圖選擇器來讓用戶選擇二手房，同時(shí)也采用了聯(lián)動(dòng)式的效果，第一步是查看區(qū)域，可以明確看到區(qū)域的售房套數(shù)，點(diǎn)擊選擇區(qū)域后我們可以看到每個(gè)路段的房子套數(shù)，點(diǎn)擊路段后就可以看到每個(gè)樓盤的套數(shù)以及均價(jià)，直到點(diǎn)擊樓盤就會(huì)彈出詳細(xì)信息框。這樣有助于用戶在選擇二手房時(shí)從大數(shù)據(jù)分析二手房的情況，有更好的對(duì)比性與選擇性。



2.多選選擇器


當(dāng)單選選擇器不能滿足用戶需要時(shí)，這時(shí)我們就可以采用多選選擇器，一般常用的多選選擇器都是采用點(diǎn)擊的方式，當(dāng)然也有滑動(dòng)類型的多選選擇器。


2-1點(diǎn)擊多選選擇器


特點(diǎn)：當(dāng)用戶想要選擇多個(gè)類別的情況下，我們就可以用點(diǎn)擊多選選擇器來展示提供給用戶選擇，通過屏幕點(diǎn)擊選中或取消選中該選項(xiàng)，它不會(huì)立即觸發(fā)操作，需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。


建議：從用戶的角度來講盡量不要強(qiáng)制用戶選擇數(shù)量或者默認(rèn)全部數(shù)量；多選項(xiàng)時(shí)觸碰區(qū)域不能太小，以免造成誤操作。


舉例：小紅書在選擇感興趣的內(nèi)容時(shí)就采用了點(diǎn)擊多選選擇器，不過在選擇興趣時(shí)它就強(qiáng)制用戶至少關(guān)注4個(gè)興趣，而對(duì)于單興趣或者少興趣的用戶來講，這無疑會(huì)造成用戶體驗(yàn)的不佳，被逼再次從中選擇次要的興趣。


2-2滑動(dòng)多選選擇器

特別注明：從用戶的角度來看，它可以選擇多個(gè)區(qū)域段的內(nèi)容，所以我把它分為多選選擇器中。


特點(diǎn)：當(dāng)系統(tǒng)給出的選項(xiàng)不在自己的選擇區(qū)間時(shí)，可以很好的自定義選擇區(qū)間，把定義權(quán)限交在用戶手里。同樣，它需要再點(diǎn)擊別的觸發(fā)類組件（如保存按鈕）后，再執(zhí)行操作。


建議：在用戶滑動(dòng)操作期間要有明確的操作提示，讓用戶時(shí)刻感知目前處于的狀態(tài)；滑動(dòng)區(qū)域盡量不要超過100刻度，如果刻度距離太小，用戶在滑動(dòng)時(shí)也很難精準(zhǔn)的選擇范圍。


舉例：在汽車之家APP中，當(dāng)我要選擇汽車價(jià)格范圍時(shí)就會(huì)出現(xiàn)此選擇器，我們可以用手指滑動(dòng)來選取它的價(jià)格區(qū)間，相對(duì)于上半部分的單選價(jià)格拓展性更強(qiáng)，用戶可以自行選擇上半部分的單選選擇器，也可以選擇滑動(dòng)多選選擇器，給予用戶更多的選擇。



三、選擇器的十大應(yīng)用要點(diǎn)


1、簡單易懂


標(biāo)題易懂：

在選擇器中標(biāo)題一定要簡單明了，很快的讓用戶知道他在為什么做選擇（如：當(dāng)你關(guān)注某烹飪的APP后，它會(huì)讓你勾選喜歡的菜譜，你的標(biāo)題就可以用“選擇菜譜”四個(gè)字，簡單明了）


文字標(biāo)簽易懂：

一般使用短語而不是句子，也并不需要用標(biāo)點(diǎn)符號(hào)來結(jié)尾。（如：當(dāng)選擇想要的菜譜時(shí)，菜譜后的文字不需要加入標(biāo)點(diǎn)符號(hào)）


選取狀態(tài)易懂：

用戶能夠明確感知什么是選中狀態(tài)，什么是未選中狀態(tài)，什么是禁用狀態(tài)。（如：選中狀態(tài)為高亮顯示，未選中為普通顯示，禁用狀態(tài)為灰度顯示）


反饋提示易懂：

當(dāng)你在選擇中遇到選項(xiàng)限制或是否需要確認(rèn)操作時(shí)，反饋提示一定要一目了然。（如：當(dāng)你選擇某衣服時(shí)，S碼不能選擇，則會(huì)用灰度顯示的文字代替，甚至可以用中橫線劃過文字，明確告訴用戶不能選擇）


2、基本排序


從邏輯順序：

邏輯排序能讓用戶很快很準(zhǔn)的找到自己需要的選項(xiàng)，特別是對(duì)于選擇地址/時(shí)間/個(gè)數(shù)等常規(guī)的選項(xiàng)時(shí)，可以按照字母/遠(yuǎn)近/大小來進(jìn)行排序。例如下面在選擇地址時(shí)，就是按照A-Z字母排序，這樣可以大大節(jié)省用戶選擇的時(shí)間。


從產(chǎn)品利益角度排列順序：

當(dāng)然為了產(chǎn)品自身的利益也可以自己優(yōu)化排序方式，選項(xiàng)的順序可以說服用戶進(jìn)行選擇，用戶可能因?yàn)榈谝粋€(gè)選項(xiàng)在列表中的位置而選擇了第一個(gè)選項(xiàng)；可以輔助用戶，也可以讓用戶向著產(chǎn)品所希望的方向傾斜。例如你在選擇菜譜時(shí)，產(chǎn)品為了讓用戶選擇更加優(yōu)質(zhì)的菜譜，就會(huì)把用戶評(píng)價(jià)高的菜譜放在前列；當(dāng)然商家也會(huì)這么做，例如你要去買某款商品，商家會(huì)在選項(xiàng)中把熱門、優(yōu)質(zhì)的產(chǎn)品放在最上方，讓你優(yōu)先選擇。


從用戶體驗(yàn)排列順序：

從用戶角度來說哪些對(duì)用戶體驗(yàn)好，那么就把它排在前面。例如汽車之家在進(jìn)行車輛類別的排序中就把用戶量最多的轎車排在第一位，而把用戶量最少的輕客放在了最后一位；同樣它在汽車品牌選擇中，單獨(dú)列出了熱門品牌把它放在前列，讓用戶進(jìn)行快速選擇。


3、一致性


視覺布局一致：

每個(gè)元素之間的對(duì)齊、元素與元素之間的間距、按鈕不同狀態(tài)的視覺體現(xiàn)。一般情況下移動(dòng)端更傾向于左對(duì)齊，這樣有利于快速讀取選擇內(nèi)容，可以提高用戶的瀏覽效率并減少錯(cuò)誤。


圖片/插畫風(fēng)格統(tǒng)一：

在圖文結(jié)合的選擇器中，我們一定要保證圖片（插畫）的優(yōu)質(zhì)以及風(fēng)格的統(tǒng)一。


4、合理運(yùn)用默認(rèn)選項(xiàng)

默認(rèn)選項(xiàng)是選擇器的開始狀態(tài)。在不同的選擇器中有不同的默認(rèn)方式。


默認(rèn)未選中：

這是最常見的一種狀態(tài)，特別是對(duì)于選擇年齡、生日這些個(gè)人隱私信息，系統(tǒng)也沒有辦法進(jìn)行默認(rèn)選擇。


默認(rèn)選中其中一個(gè)選項(xiàng)：

要想默認(rèn)其中一項(xiàng)，必須考慮兩點(diǎn)因素，因素一：你想要潛意識(shí)的像用戶傳達(dá)信息，在單選選擇器中默認(rèn)選擇一項(xiàng)后，就可以潛意識(shí)的向用戶傳遞信息必須要在這組單選項(xiàng)之中選擇一個(gè)。因素二就是產(chǎn)品的傾向，例如此產(chǎn)品的性別9成都是女性，那么建議默認(rèn)選項(xiàng)為女性。


默認(rèn)選中全部：

其實(shí)默認(rèn)選中全部在用戶體驗(yàn)上來講真的不是那么的友好，例如微博這個(gè)選擇器界面，剛進(jìn)這個(gè)界面時(shí)已經(jīng)全部勾選中，并且當(dāng)你沒注意習(xí)慣性的點(diǎn)擊下面的按鈕時(shí)會(huì)生立即效，沒有返回的余地。（吐槽：有些APP甚至沒有一鍵取消功能，要一個(gè)個(gè)的點(diǎn)擊取消...）這也是為了產(chǎn)品犧牲掉了部分用戶體驗(yàn)吧！


5、給用戶更多選擇


單選選擇器的更多選擇：

如果用戶不想做出選擇，那么應(yīng)該提供一個(gè)中立選項(xiàng)，為用戶提供一個(gè)明確的方向，中立選項(xiàng)比勉強(qiáng)選擇要好。例如在選擇行業(yè)領(lǐng)域時(shí)，以上并沒有你所處的領(lǐng)域或你不確定你的領(lǐng)域，你就可以選擇“不限”或“其他”。


多選選擇器的更多選擇：

在多選選擇器中，如果不能把控到用戶的準(zhǔn)確選項(xiàng)區(qū)間，那么可以考慮滑動(dòng)多選選擇器，讓用戶有更多的選擇區(qū)間，不管是汽車之家還是懂車帝在選擇車輛價(jià)格上兩者都是采用的相同方式。


6、控件狀態(tài)

選擇控件在操作過程中必須更改其狀態(tài)/外觀，要明確讓用戶知道是否能選中，是否被選中?？丶顟B(tài)一般分為三種：未選中、選中、禁用。


未選中

選擇器的開始狀態(tài)，向用戶表明，可對(duì)該選擇控件進(jìn)行操作。


選中

用戶操作選取狀態(tài)，選擇控件處于被選中的狀態(tài)。


禁用

一般情況會(huì)為灰色顯示，用戶將無法與選項(xiàng)進(jìn)行交互。


7、操作提示

指的是用戶在操作中讓用戶得到相應(yīng)的反饋，用戶根據(jù)這些反饋可以判斷當(dāng)前狀態(tài)以及操作后狀態(tài)。在選擇器中，操作提示一般用輔助文案提示及非模態(tài)彈窗提示。


輔助文案提示（選擇前與選擇中）：

輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當(dāng)說明，例如下面是地區(qū)選擇，我在選擇不同層級(jí)的區(qū)域時(shí)，它的上方會(huì)出現(xiàn)輔助提示文案，讓你明確的知道你上一層級(jí)選擇的是什么。


同樣，當(dāng)我在選擇價(jià)格區(qū)間時(shí)，滑動(dòng)選擇器的左上方一樣有文字類的提示：


非模態(tài)彈窗提示（選擇后）：

非模態(tài)彈窗一般出現(xiàn)在用戶操作完的跳轉(zhuǎn)頁面中，為了讓用戶感知所選的選項(xiàng)在頁面的狀態(tài)，如下，非模態(tài)彈窗告知用戶一共有7輛車符合標(biāo)準(zhǔn)。


當(dāng)然除了非模態(tài)彈窗外，還有模態(tài)彈窗，但是用戶體驗(yàn)極差，目前很少使用，所以就不列出來了。


8、合理使用操作區(qū)域


擴(kuò)大點(diǎn)擊區(qū)域：

在選取按鈕類的操作時(shí)，容易出現(xiàn)點(diǎn)擊不到或誤操作的現(xiàn)象，我們可以通過擴(kuò)大點(diǎn)擊區(qū)的交互區(qū)域來提高易用性，例如下圖，雖然按鈕在左邊，但是可以把橫向區(qū)域都列為可點(diǎn)擊區(qū)域。


當(dāng)然我們也可以從設(shè)計(jì)的角度來擴(kuò)大視覺范圍，從而也提高了點(diǎn)擊范圍，這樣的處理不僅提升了視覺層面，還提升了交互體驗(yàn)。（圖文結(jié)合方式）


注意交互間距：

在元素與元素之間一定要有合理的交互間距，不然很容易出現(xiàn)誤選的情況。


合理利用有效區(qū)域：

在選項(xiàng)較多的選擇器中，我們可以利用好選擇主體控件之外的區(qū)域，例如在選擇城市/品牌時(shí)，我們可以做A-Z index式字母交互區(qū)，幫助用戶快速找到想要的選項(xiàng)。


9、趣味性

讓用戶選擇本來就是一件枯燥乏味的事情，如果讓這件事變得有趣那么會(huì)極大的提升用戶體驗(yàn)。


從文本層面：

例如當(dāng)用戶填寫性別信息時(shí)，你給予用戶的文字信息并不是“男”/“女”，而是“帥氣的boy”與“酷酷的girl”，這樣會(huì)讓用戶覺得這是一件比較有趣的事情，而不是被動(dòng)選擇。（注：這樣的取名一定要符合產(chǎn)品的特性）


從視覺層面：

加入可玩兒性的選項(xiàng)，例如汽車之家的頭像切換，可以選擇自己喜歡的頭像。（頭像并不是強(qiáng)制選擇的，如果不進(jìn)行操作則是默認(rèn)選項(xiàng)）


從交互層面：

讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒，在未選擇狀態(tài)他的人物會(huì)360度圍繞著轉(zhuǎn)動(dòng)，當(dāng)然你也可以快速拖拽，或者放大縮小，可玩兒性十足，并且在內(nèi)部設(shè)定了最匹配/新人的高亮顯示，協(xié)助用戶去選擇。


10、合理使用選擇器


不同的產(chǎn)品在使用選擇器時(shí)都各有不同，因?yàn)槊總€(gè)選擇器都有他的利弊，而真正要怎么去選擇還要根據(jù)產(chǎn)品本身來定。


那么我就拿目前市面上最常見的5個(gè)地址選擇器的類型來分析一下利弊：


1/多聯(lián)動(dòng)選擇器（平鋪式）


貨車幫采用的是多聯(lián)動(dòng)平鋪式選擇器，它最大的特點(diǎn)就是能夠一眼就看清楚所有地址，不過地址多時(shí)需要花時(shí)間去找，只是當(dāng)你經(jīng)常使用此功能時(shí)便會(huì)形成記憶，再此搜索的時(shí)候就能形成記憶點(diǎn)擊，效率很高，并且在操作外還有路徑提示，不僅可以幫助你記住層級(jí)選項(xiàng)，還可以實(shí)時(shí)返回路徑進(jìn)行重新選擇。


手勢(shì)操作：點(diǎn)－點(diǎn)－點(diǎn)


2/多聯(lián)動(dòng)選擇器（列表跳轉(zhuǎn)式）


閑魚采用的是多聯(lián)動(dòng)列表跳轉(zhuǎn)式選擇器，這個(gè)選擇器最大的缺陷就是選擇三級(jí)之后用戶可能會(huì)忘了上一級(jí)的內(nèi)容，那么就又要切換到上一級(jí)，閑魚采用它的原因是因?yàn)樗挥卸?jí)聯(lián)動(dòng)，不存在遺忘現(xiàn)象，不過這樣列表式的選擇效率并沒有平鋪的效率高，人眼習(xí)慣掃視橫向內(nèi)容，所以橫向的內(nèi)容獲取往往要比縱向的多，在地址選擇器上我個(gè)人是不太建議采用多聯(lián)動(dòng)列表跳轉(zhuǎn)式，因?yàn)椴⒉桓咝б膊恢庇^。


手勢(shì)操作：滑－點(diǎn)－點(diǎn)


3/多聯(lián)動(dòng)選擇器（列表式）


轉(zhuǎn)轉(zhuǎn)采用的是多聯(lián)動(dòng)列表式選擇器，它的優(yōu)點(diǎn)是可以根據(jù)右側(cè)字母來找城市，數(shù)據(jù)偏大也能夠很快的查找。不過如果在層級(jí)的選項(xiàng)中出現(xiàn)錯(cuò)誤，同樣就要切換到上一級(jí)，并且在操作中沒有輔助信息提示。


手勢(shì)操作：滑/點(diǎn)－滑/點(diǎn)


4/多聯(lián)動(dòng)選擇器（下滑式）


安居客采用的是多聯(lián)動(dòng)下滑式選擇器，這種形式的選擇器不會(huì)遮擋后面的主要內(nèi)容信息，在選擇完地址之后能立即看到地址的篩選結(jié)果。優(yōu)點(diǎn)是能快速選擇多級(jí)地址，并且層級(jí)分明，擴(kuò)展性較強(qiáng)可以做成地址多選。缺點(diǎn)是不適合3個(gè)層級(jí)以上的地址選擇。


手勢(shì)操作：點(diǎn)－滑/點(diǎn)－點(diǎn)


5/地圖選擇器


美團(tuán)外賣采用的是地圖選擇器，這個(gè)選擇器一般用在需要精準(zhǔn)定位的生活類APP中，它的優(yōu)點(diǎn)就是能夠快速精準(zhǔn)定位，并且自動(dòng)錄取定位信息，它的缺點(diǎn)也顯而易見，不能含帶層級(jí)并且對(duì)范圍也有約束。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(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ì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



評(píng)論(0) 瀏覽(2048)

日歷

鏈接

個(gè)人資料

存檔