編者按：其實(shí)網(wǎng)頁(yè)或者App中的導(dǎo)航（Navigation）這個(gè)概念遠(yuǎn)不止我們熟悉的導(dǎo)航欄，而是一個(gè)更加廣的交互概念：引導(dǎo)用戶和產(chǎn)品進(jìn)行有效的交互，實(shí)現(xiàn)用戶的目標(biāo)。本文將詳細(xì)地介紹界面的導(dǎo)航設(shè)計(jì)。

一個(gè)網(wǎng)頁(yè)或App產(chǎn)品要想有很好的可用性（usability），需要做好的最基本的一點(diǎn)是導(dǎo)航的設(shè)計(jì)或者說(shuō)引導(dǎo)用戶的設(shè)計(jì)。如果用戶在使用一個(gè)網(wǎng)站或者App的時(shí)候找不到自己的處在什么位置或者該怎么去到想要的頁(yè)面，那么視覺(jué)效果再怎么有創(chuàng)意或者抓人眼球都無(wú)法彌補(bǔ)產(chǎn)品的缺陷。無(wú)論你的產(chǎn)品想滿足用戶什么需求，讓用戶知道產(chǎn)品當(dāng)下的狀態(tài)和每一步操作之后的結(jié)果是對(duì)用戶最基本的尊重。

導(dǎo)航

首先，讓我們弄清楚導(dǎo)航這個(gè)概念。最基本的含義就是在我們的現(xiàn)實(shí)世界中，當(dāng)我們從一個(gè)地方到另一個(gè)地方，需要一些引導(dǎo)和指示。英文中Navigation這個(gè)詞來(lái)源于拉丁文，原意就是：操縱船只在海上航行。所以導(dǎo)航就是能夠幫助我們到達(dá)目的地的行為。導(dǎo)航的其他意思都是建立在這個(gè)原意的基礎(chǔ)上。

所以回到UX／UI設(shè)計(jì)上，導(dǎo)航毫無(wú)疑問(wèn)是可用性的一個(gè)要點(diǎn)。它可以定義為一系列引導(dǎo)用戶成功地與產(chǎn)品互動(dòng)并且實(shí)現(xiàn)他們目標(biāo)的動(dòng)作組合或者技巧組合。 用戶帶著他們的期望和目標(biāo)來(lái)使用你的網(wǎng)站或者產(chǎn)品，作為設(shè)計(jì)師的你需要給他們提供實(shí)現(xiàn)他們目標(biāo)的最好操作流程。因此當(dāng)你的導(dǎo)航設(shè)計(jì)得非常高效，用戶體驗(yàn)?zāi)艿玫綐O大的提升。

在你剛開始設(shè)計(jì)你的界面時(shí)，就要思考怎么設(shè)計(jì)一個(gè)有效的無(wú)縫銜接的導(dǎo)航。通過(guò)一些可交互的元素，比如按鈕（buttons），開關(guān)（switches），鏈接（links），標(biāo)簽（tabs），條（bas），菜單（menus），區(qū)域（fields），讓用戶在不同的界面之間進(jìn)行切換。

我們工作室的設(shè)計(jì)思路是，在界面設(shè)計(jì)的早期就全面地思考導(dǎo)航的設(shè)計(jì)，包括界面的布局，頁(yè)面間如何切換，導(dǎo)航元素的放置和具體功能。并且通過(guò)低保真原型來(lái)進(jìn)行驗(yàn)證，保證用戶能清楚地理解所有重要的操作。如果跳過(guò)這一步，設(shè)計(jì)將有巨大的風(fēng)險(xiǎn)，其他事情有可能到頭來(lái)都白干了。所以無(wú)論，對(duì)用戶還是客戶還是設(shè)計(jì)團(tuán)隊(duì)來(lái)講，做好這最基礎(chǔ)的部分是非常有好處的。

菜單（Menu）

菜單是我們最熟悉的具備導(dǎo)航功能的元素，它向用戶展示了界面的所有重要選項(xiàng)?；旧?，它可以是用動(dòng)詞命名的一系列指令，用戶可以用它來(lái)指示系統(tǒng)做出動(dòng)作，像保存，刪除等；它也可以是一個(gè)用名詞命名的目錄，用來(lái)代表不同內(nèi)容的集合。

在界面設(shè)計(jì)中菜單可以放在不同的位置（側(cè)邊菜單，頂部菜單，底部菜單等），擁有不同的交互和視覺(jué)形式（下拉菜單，上拉菜單，滑動(dòng)菜單等）。要想設(shè)計(jì)好菜單的位置、交互和視覺(jué)形式，設(shè)計(jì)師需要經(jīng)過(guò)全面的用戶調(diào)查，包括目標(biāo)用戶的預(yù)期和要求、接受能力和使用情境。好的菜單設(shè)計(jì)能讓用戶更快地實(shí)現(xiàn)他們的目標(biāo)，為用戶體驗(yàn)打下堅(jiān)實(shí)的基礎(chǔ)。

△ 作者：Tubik

這是一個(gè)博客APP的界面設(shè)計(jì)，采用了側(cè)邊菜單以及目錄的形式，文字直接說(shuō)明內(nèi)容，再加上圖標(biāo)來(lái)做為輔助的視覺(jué)說(shuō)明。

△ 作者：Ludmila Shevchenko

這個(gè)UI概念設(shè)計(jì)的例子很好的運(yùn)用了顏色作為標(biāo)記，這是一種很有效的導(dǎo)航技巧：每個(gè)分類的背景色使用了和目錄相同的的顏色，這樣目錄和內(nèi)容有著非常強(qiáng)的相關(guān)性，用戶能自然地將他們聯(lián)系起來(lái)。

行為召喚（CTA）

CTA是用戶行為召喚的簡(jiǎn)稱（call to action）。CTA簡(jiǎn)單來(lái)說(shuō)就是指設(shè)計(jì)師通過(guò)設(shè)計(jì)，刺激用戶去做出一些行動(dòng)。相應(yīng)的，CTA元素就是指那些能刺激用戶做出行動(dòng)的交互元素。典型的CTA元素是按鈕，標(biāo)簽或者鏈接。

不管在什么界面，CTA元素都是高效的交互行為的核心，極大的關(guān)系到產(chǎn)品的可用性和導(dǎo)航有效性。如果CTA元素的設(shè)計(jì)不到位的話，用戶會(huì)產(chǎn)生困惑并且得費(fèi)勁地去嘗試。產(chǎn)品的轉(zhuǎn)化率和用戶體驗(yàn)都會(huì)大打折扣。這就是為什么CTA元素特別值得注意。無(wú)論什么樣的界面，它都必須是最矚目的元素之一，用來(lái)直接地告訴用戶怎么用這個(gè)產(chǎn)品。

△ 作者：Eugene Cameel

一些CTA元素直接用圖標(biāo)形式而沒(méi)有任何文字說(shuō)明，但只適用于大家都熟知其含義的圖標(biāo)，比如聽筒圖標(biāo)和信封圖標(biāo)。上圖這個(gè)例子中，這個(gè)聽筒圖標(biāo)就是這個(gè)界面中一個(gè)焦點(diǎn)，是一個(gè)典型的CTA元素，引導(dǎo)用戶快速地實(shí)現(xiàn)他們的目標(biāo)。不需要任何文字說(shuō)明，用戶也能懂點(diǎn)擊這個(gè)圖標(biāo)的結(jié)果。

但是，如果一個(gè)圖標(biāo)的含義不是那么明顯或者可能造成誤解，最好還是加上文字說(shuō)明。

△ 作者：Tania Bashkatova

上面這個(gè)例子是一個(gè)關(guān)于制作海鮮的網(wǎng)站的著陸頁(yè)（Landing page）。頁(yè)面的標(biāo)題let’s cook還有食材照片是一個(gè)CTA，但不是一個(gè)可交互的CTA。可交互的CTA是下面這個(gè)紅色按鈕，用戶點(diǎn)擊這個(gè)按鈕能看到更多關(guān)于不同主題和菜譜的信息。 抓人眼球的顏色強(qiáng)調(diào)了頁(yè)面的視覺(jué)層級(jí)關(guān)系，把用戶的注意力拉到關(guān)鍵的交互區(qū)域中。

條（Bar）

條（Bar）指的是界面中一組用戶可以點(diǎn)擊的元素，用來(lái)快速與產(chǎn)品進(jìn)行互動(dòng)，或者還能讓用戶知道事件的進(jìn)程。

標(biāo)簽條（Bar）

最基本的條是標(biāo)簽條（Tab bars），常出現(xiàn)在APP界面的底部，讓用戶能在APP的不同模塊間快速切換。

△ 作者：Sergey Valiukh

載入條（Loading bar）

載入條是用來(lái)告知某個(gè)動(dòng)作的進(jìn)展，用戶可以通過(guò)時(shí)間、百分比或者其他信息了解整個(gè)過(guò)程。

△ 作者：Sergey Valiukh

進(jìn)度條（Progress bar）

給用戶提供反饋，讓他們了解事件的進(jìn)度，比如說(shuō)計(jì)劃的事情完成了多少。

△ 作者：Valentyn Khenkin

按鈕（Button）

按鈕應(yīng)該是用得最多的元素了。按鈕能讓用戶在對(duì)系統(tǒng)發(fā)出指令后得到恰當(dāng)?shù)姆答仭Ｓ脩敉ㄟ^(guò)按鈕對(duì)系統(tǒng)下命令，跟系統(tǒng)進(jìn)行交互從而實(shí)現(xiàn)他們某個(gè)目標(biāo)，比如發(fā)送郵件，買一個(gè)東西，下載文件，播放音樂(lè)等等這樣的指令。按鈕之所以那么的常用和對(duì)用戶那么友好，是因?yàn)榘粹o很好地模仿了人和真實(shí)世界里跟物品的交互。

現(xiàn)如今的UI按鈕有不計(jì)其數(shù)的設(shè)計(jì)樣式，能滿足很多的設(shè)計(jì)需求。按鈕典型的用途是表明這個(gè)地方是可點(diǎn)擊，因此需要具有非常高的視覺(jué)識(shí)別，有著特定的形狀還有文字說(shuō)明它能實(shí)現(xiàn)什么動(dòng)作。設(shè)計(jì)師通常需要花不少時(shí)間好好考慮怎么讓按鈕很好地融合界面的風(fēng)格，同時(shí)又能在視覺(jué)上跳脫出來(lái)。

△ 作者：Ernest Asanov

以下是在APP和網(wǎng)頁(yè)設(shè)計(jì)中常用的幾種具備附加功能的按鈕。

漢堡按鈕

漢堡按鈕隱藏著一個(gè)菜單。當(dāng)用戶點(diǎn)擊他們的時(shí)候，能把菜單調(diào)出來(lái)。有這個(gè)名字是因?yàn)樗怯扇龡l水平線組成的，看起來(lái)就像是漢堡的形式。它是一個(gè)典型的交互元素，也是頗具爭(zhēng)議的元素。

大多數(shù)用戶知道點(diǎn)擊這個(gè)按鈕能展開一個(gè)菜單，所以不需要額外的說(shuō)明。漢堡菜單極大地節(jié)省了界面的空間，能讓界面看起來(lái)更簡(jiǎn)潔，也為其他重要的界面元素騰出了必要的空間。它同時(shí)非常適合響應(yīng)式設(shè)計(jì)，通過(guò)隱藏菜單讓整個(gè)設(shè)計(jì)更統(tǒng)一，界面能在不同設(shè)備間保持一致。盡管它因?yàn)橐恍┤秉c(diǎn)而飽受爭(zhēng)議，但因?yàn)檫@極大的好處，它目前仍然被廣泛的使用。關(guān)于這個(gè)元素的主要詬病是，對(duì)于一些對(duì)界面不太熟悉的用戶來(lái)說(shuō)，這個(gè)比較抽象的設(shè)計(jì)元素可能會(huì)讓他們產(chǎn)生困惑。所以，在決定使用漢堡菜單前，應(yīng)該調(diào)查一下目標(biāo)用戶的接受程度和他們的需求。

△ 作者：Ernest Asanov

上圖這個(gè)概念設(shè)計(jì)就是用了漢堡按鈕把菜單隱藏了起來(lái)，從而實(shí)現(xiàn)一個(gè)簡(jiǎn)潔的頁(yè)面布局和視覺(jué)效果。

加號(hào)按鈕（Plus button）

一般通過(guò)這個(gè)按鈕，用戶可以實(shí)現(xiàn)添加某個(gè)內(nèi)容的動(dòng)作，比如添加新的聯(lián)系人，狀態(tài)，筆記，位置等所有用戶在產(chǎn)品里能做的基本動(dòng)作。有時(shí)候，點(diǎn)擊這個(gè)按鈕會(huì)出現(xiàn)新的窗口。有時(shí)候還會(huì)出現(xiàn)一些選項(xiàng)供用戶進(jìn)行選擇添加什么內(nèi)容，這取決于是什么產(chǎn)品。

△ 作者：Sergey Valiukh

上面這個(gè)例子就是用戶在點(diǎn)擊加號(hào)按鈕后出現(xiàn)了可以選擇添加的內(nèi)容（圖片，視頻，文字），在選擇了之后才會(huì)彈出添加內(nèi)容的窗口。盡管這個(gè)操作可能增加一些額外的交互動(dòng)作，但因?yàn)榻o予了用戶選擇空間，所以還是對(duì)用戶很友好的一種設(shè)計(jì)。

分享按鈕（Share Button）

分享按鈕顧名思義就是能讓用戶把內(nèi)容分享到他們的社交平臺(tái)賬號(hào)上。大多數(shù)情況下，這個(gè)按鈕都是用社交平臺(tái)的Logo作為視覺(jué)形象，這樣非常易于識(shí)別和認(rèn)知。

開關(guān)（Switch）

同樣，這也是一個(gè)用戶非常好理解的元素，在界面中用得也非常多。因?yàn)樗芎玫啬７铝爽F(xiàn)實(shí)世界里人們熟悉的開關(guān)概念。關(guān)于這個(gè)元素的設(shè)計(jì)，特別要注意的是開和關(guān)的狀態(tài)在視覺(jué)上要差別非常明顯。這樣能避免用戶花時(shí)間去研究怎樣是開怎樣是關(guān)。很多種的形式對(duì)比或者切換動(dòng)畫都可以解決這個(gè)問(wèn)題，從而設(shè)計(jì)出很好的用戶體驗(yàn)。

△ 來(lái)源：Tubikstudio

這個(gè)案例是來(lái)自一款鬧鐘應(yīng)用Toonie。動(dòng)畫效果讓交互變得更流暢和自然，同時(shí)整個(gè)控件顏色的改變和滑動(dòng)元素形態(tài)的變化讓用戶能夠輕易地識(shí)別出開關(guān)的狀態(tài)。如果你想了解整個(gè)App的案例研究，可以到來(lái)源查看。

選擇器（Picker）

也很好理解，就是讓用戶在一些選項(xiàng)里選出目標(biāo)選項(xiàng)。通常包含一個(gè)可滑動(dòng)的列表，上面是一列數(shù)值，比如小時(shí)，分鐘，日期，度量，幣種等等。通過(guò)滑動(dòng)列表，用戶可以選定想要的數(shù)值。這個(gè)元素廣泛地應(yīng)用在有時(shí)間設(shè)定這個(gè)功能的界面設(shè)計(jì)上。

△ 來(lái)源：Tubikstudio

復(fù)選框（Checkbox）

復(fù)選框是可以用來(lái)同時(shí)標(biāo)記多個(gè)特定的內(nèi)容。同樣的，也是借用了我們?cè)诂F(xiàn)實(shí)世界里熟悉的概念。我們?cè)诳荚嚨臅r(shí)候，或者填調(diào)查問(wèn)卷的時(shí)候會(huì)在選項(xiàng)前的小方框里涂上顏色作為選中的標(biāo)記。和開關(guān)一樣，復(fù)選框同樣用得很多，主要在設(shè)置頁(yè)面設(shè)計(jì)里。不過(guò)，復(fù)選框還有另外一個(gè)用得比較多的地方，那就是含有任務(wù)管理，待辦事項(xiàng)，時(shí)間記錄等類似功能的App或者網(wǎng)頁(yè)。

△ 作者：Tubik

上面這個(gè)是一個(gè)待辦事項(xiàng)App的概念設(shè)計(jì)。用戶點(diǎn)擊復(fù)選框后，表示這個(gè)內(nèi)容已經(jīng)完成。字體變粗的同時(shí)顏色發(fā)生了改變，這樣就非常明顯地把這個(gè)已完成的任務(wù)和其他未完成的任務(wù)區(qū)分開來(lái)。

界面的導(dǎo)航（Navigation）是用戶體驗(yàn)設(shè)計(jì)的核心之一。毫無(wú)疑問(wèn)，如果你看不到路, 你就去不了你的目的地。用戶現(xiàn)在正面對(duì)著越來(lái)越多的網(wǎng)站和APP產(chǎn)品。越來(lái)越多的選擇會(huì)讓用戶期望這些產(chǎn)品具備符合他們使用習(xí)慣的導(dǎo)航設(shè)計(jì)。

圖標(biāo)（Icons）

圖標(biāo)可以定義為一個(gè)象征著某個(gè)概念或物體的視覺(jué)形象，有著加強(qiáng)與受眾溝通的目的。會(huì)和文字結(jié)合一起使用，將想要傳達(dá)給受眾的信息表現(xiàn)出來(lái)。在界面設(shè)計(jì)中，圖標(biāo)通常是象形符號(hào)或表意文字，對(duì)可用性和成功的人機(jī)交互有重要意義 。

毫無(wú)疑問(wèn)，圖標(biāo)的其中一個(gè)重要作用是可以有效地替代文字描述。因?yàn)楸绕鹞淖?，用戶?duì)圖片的理解速度更快，所以這個(gè)特點(diǎn)能極大提升用戶體驗(yàn)，增強(qiáng)產(chǎn)品的導(dǎo)航和對(duì)用戶的引導(dǎo)。但是，需要注意，即使是輕微的歧義或者誤解都會(huì)導(dǎo)致糟糕的用戶體驗(yàn)。所以在設(shè)計(jì)圖標(biāo)的時(shí)候要做必要的測(cè)試，根據(jù)目標(biāo)用戶平衡好文字和圖標(biāo)的使用。最有效的方式是同時(shí)使用圖標(biāo)和文字，這樣大部分用戶都不會(huì)有問(wèn)題。電商APP或者網(wǎng)站最常使用這樣的形式來(lái)給用戶足夠的信息，讓他們能輕松快速地瀏覽。

△ 作者：Tubik

根據(jù)圖標(biāo)的功能，我們可以將它們分為一下幾類：

交互式圖標(biāo)（interactive icons）

這類圖標(biāo)具備交互功能。他們是可點(diǎn)擊的，能回應(yīng)用戶的要求，觸發(fā)圖標(biāo)代表的動(dòng)作。這種圖標(biāo)告知用戶按鈕、控件或者其他界面交互元素的功能或者特點(diǎn)。在大多數(shù)情況下，這類圖標(biāo)的意義明確，不需要文字輔助說(shuō)明。

△ Tab Bar

△ 菜單概念設(shè)計(jì)

說(shuō)明性圖標(biāo)（clarifying icons）

起到說(shuō)明作用的圖標(biāo)，設(shè)計(jì)師用它來(lái)表示某一個(gè)特點(diǎn)或者內(nèi)容的種類。它有時(shí)候不屬于界面布局的元素或者并不具備直接的交互功能。經(jīng)常和文字結(jié)合使用。

△ 作者：Tubik

△ 作者：Ernest Asanov

娛樂(lè)性和裝飾性圖標(biāo)（entertaining and decorative icons）

這類圖標(biāo)注重抓人眼球的視覺(jué)效果并非功能，通常用在節(jié)日或者特別款的場(chǎng)景。他們能有效地吸引用戶的注意力，增強(qiáng)視覺(jué)沖擊力。

復(fù)活節(jié)和春天主題的圖標(biāo)：

△ 圖片作者：Arthur Avakyan

APP圖標(biāo)（app icons）

在各個(gè)平臺(tái)上可交互的品牌標(biāo)志，展示品牌和產(chǎn)品的形象。最常見的就是我們手機(jī)界面上每一個(gè)App的圖標(biāo)，上面通常是品牌和產(chǎn)品的Logo。

△ 作者：Arthur Avakyan

網(wǎng)頁(yè)圖標(biāo)（favicons）

就是我們經(jīng)常在網(wǎng)址欄或者書簽里看到的URL前面的那個(gè)小圖標(biāo)，也是代表著產(chǎn)品或者品牌的形象。能讓用戶在瀏覽網(wǎng)頁(yè)時(shí)給他們快速的視覺(jué)提示。

搜索區(qū)域（Search Field）

搜索區(qū)域又常常被稱作搜索框（search box）或者搜索條（search bar），代表著用戶可以在這個(gè)區(qū)域內(nèi)輸入想要搜索的內(nèi)容。它是那些有著很多內(nèi)容的網(wǎng)站或APP的核心導(dǎo)航元素，像博客，電商，新聞等產(chǎn)品。設(shè)計(jì)得好的搜索框能讓用戶輕松地找到想要的信息。因?yàn)樗軒椭脩羰∪ズ芏鄷r(shí)間和精力，所以它是一個(gè)對(duì)用戶特別友好的界面元素。

它的設(shè)計(jì)形式有很多種，可以是標(biāo)簽的形態(tài)，也可以是引導(dǎo)輸入的一條線或者簡(jiǎn)單的一個(gè)搜索圖標(biāo)。大多數(shù)情況下搜索框的圖標(biāo)是一個(gè)放大鏡的樣式?；旧纤械挠脩舳级眠@個(gè)圖標(biāo)的含義，所以能實(shí)現(xiàn)非常直觀的導(dǎo)航設(shè)計(jì)。想要在這個(gè)圖標(biāo)上做文章的話，要好好測(cè)試一下，因?yàn)楦牡貌缓玫脑挄?huì)嚴(yán)重影響交互和界面的可用性。搜索框還可以加入提供候選項(xiàng)的下拉菜單或者自動(dòng)填補(bǔ)內(nèi)容的功能。

△ 作者：Ernest Asanov

另外需要注意的一點(diǎn)是搜索框控件在界面中的位置。在網(wǎng)頁(yè)設(shè)計(jì)中，搜索框經(jīng)常出現(xiàn)在網(wǎng)頁(yè)的頂部。這是一個(gè)很恰當(dāng)?shù)脑O(shè)計(jì)，因?yàn)橥ǔ＞W(wǎng)頁(yè)的頂部區(qū)域具有很高的可見性，用戶打開網(wǎng)頁(yè)就看到了，不需要再花時(shí)間去找到這個(gè)控件。舉個(gè)反面例子，如果一個(gè)電商網(wǎng)站因?yàn)樗阉骺虻脑O(shè)計(jì)有問(wèn)題，導(dǎo)致用戶沒(méi)辦法快速方便地找到想買的東西，網(wǎng)站銷售表現(xiàn)會(huì)受到極大的影響。因?yàn)楝F(xiàn)在很多網(wǎng)站都將搜索框放在網(wǎng)頁(yè)的頂部，所以用戶也養(yǎng)成了在那里找到搜索框的習(xí)慣。

至于App界面的話，要視具體情況而定，設(shè)計(jì)師可能面臨更多的限制。如果是一個(gè)有著大量?jī)?nèi)容的APP，而且搜索是核心功能之一的話，那么一般放在一個(gè)顯眼的標(biāo)簽條（tab bar）上。如果搜索并不是核心功能，那么可以把它藏到菜單里或者只在需要的用到的地方顯示或者時(shí)刻顯示出來(lái)。

△ 作者：Sergey Valiukh

標(biāo)簽（Tag）

標(biāo)簽是一個(gè)標(biāo)有關(guān)鍵詞的可交互元素。標(biāo)簽其實(shí)是給用戶提供快速通道的元數(shù)據(jù)，用戶可以通過(guò)它快速導(dǎo)航到與關(guān)鍵詞相關(guān)的所有內(nèi)容。除了網(wǎng)頁(yè)或者App本身帶有的標(biāo)簽，在很多情況下用戶也可以自己創(chuàng)建標(biāo)簽。

△ 作者：Design4users

標(biāo)簽這個(gè)界面元素被廣泛地應(yīng)用在用戶原創(chuàng)內(nèi)容平臺(tái)（UGC）的界面設(shè)計(jì)里。當(dāng)用戶上傳圖片、狀態(tài)到社交網(wǎng)絡(luò)的時(shí)候，可以加上關(guān)鍵詞作為標(biāo)簽。上圖就展示博客網(wǎng)站Design4Users運(yùn)用了標(biāo)簽來(lái)加強(qiáng)網(wǎng)站的內(nèi)容導(dǎo)航。通過(guò)點(diǎn)擊某個(gè)標(biāo)簽，能切換到帶著這個(gè)標(biāo)簽的所有內(nèi)容的頁(yè)面。標(biāo)簽是友好的搜索引擎優(yōu)化（SEO-friendly）技巧，能提高用戶搜索內(nèi)容的成功率。

△ 作者：Unsplash

再舉一個(gè)例子，上圖是圖片素材網(wǎng)站Unsplash的界面。當(dāng)用戶想要下載圖片時(shí)，可以輸入描述圖片的關(guān)鍵詞作為標(biāo)簽。通過(guò)這樣的形式幫助用戶有效地找到想要的圖片。我們還可以注意到，輸入框內(nèi)加入了引導(dǎo)用戶進(jìn)行操作的說(shuō)明，這樣更進(jìn)一步地提高了產(chǎn)品的可用性。設(shè)計(jì)的細(xì)節(jié)真的很重要?？偠灾瑯?biāo)簽是一種用戶可以自行創(chuàng)造的導(dǎo)航元素，拉近了界面和目標(biāo)用戶之間的距離。

全面地設(shè)計(jì)好整個(gè)界面的導(dǎo)航不是一件容易的事，需要一些心理學(xué)、交互模式、用戶測(cè)試的基礎(chǔ)知識(shí)，還需要在項(xiàng)目的早期思考清楚網(wǎng)站或者App的信息架構(gòu)。但是做好這一點(diǎn)的話，能夠讓你的產(chǎn)品很好地幫助用戶解決他們的問(wèn)題，給優(yōu)秀的用戶體驗(yàn)打下堅(jiān)實(shí)的基礎(chǔ)，讓他們對(duì)你的產(chǎn)品產(chǎn)生越來(lái)越大的粘性。

作者：程遠(yuǎn)

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎ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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)、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ì)公司

更多精彩文章：

手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之二：三分鐘搞懂，iPhone 12發(fā)布后的設(shè)計(jì)尺寸調(diào)整

手機(jī)及小程序界面設(shè)計(jì)之三：從 Dribbble 高贊的 828 個(gè)作品中，總結(jié)出 2022 設(shè)計(jì)趨勢(shì)

手機(jī)及小程序界面設(shè)計(jì)之四：手機(jī)屏幕越來(lái)越大，UX設(shè)計(jì)師面臨哪些挑戰(zhàn)？

手機(jī)及小程序界面設(shè)計(jì)之五：連高手都容易忽略的9個(gè) iOS 與 Android 間的交互差異

手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之七：基礎(chǔ)科普！超全面的 UI 元素尺寸設(shè)置指南（上）

手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！

手機(jī)及小程序界面設(shè)計(jì)之九：手機(jī)端表格設(shè)計(jì)：我整理了一套循序漸進(jìn)的處理方法

手機(jī)及小程序界面設(shè)計(jì)之十：超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄

Z Yuhan：對(duì)于手機(jī)端的表格設(shè)計(jì)，本文將為你提供了一些思考方向，希望能夠帶給你啟發(fā)。

表格似乎和移動(dòng)設(shè)備很難融合，強(qiáng)行貼上還真有些毀三觀。即便是想方設(shè)法地避免，也總會(huì)有這樣那樣的原因，而不得不同時(shí)面對(duì)它們的時(shí)候。

其實(shí)有很多方法可以優(yōu)化手機(jī)端的表格，但是可能不一定每一種都適合你遇到的情況，所以我整理了一套循序漸進(jìn)的處理方法。

一. 整理信息

假設(shè)你在設(shè)計(jì)一款類似微信聊天群的功能，PM給你一張「成員信息表」，并要求你把它放在群成員管理界面上。這張表格里的信息的排列方式也許非常隨便，看起來(lái)讓人摸不著頭腦。

△ 組員信息表

首先你需要弄清楚這張表格擺出來(lái)的意義是什么。假設(shè)這張表格是為了「讓群主查看并管理成員」，那么你就能分析得出：

• 「頭像和昵稱」是基本信息，用來(lái)分辨成員身份。
• 「活躍度」肯定是用來(lái)進(jìn)行成員管理的主要依據(jù)，最好以此進(jìn)行排序，其次“加入時(shí)間”也是重要的輔助信息。
• 「是否為好友」可能對(duì)群主本人也是較為在意的信息。
• 「性別和位置」在通常情況下并不重要。
• 「ID和個(gè)性簽名」對(duì)成員管理和查看幾乎沒(méi)有什么幫助。

按照重要程度擺放各信息，并合理排序后，表格看起來(lái)就更好理解了：

△ 整理后的組員信息表

二. 界面整合

如果你的情況不允許對(duì)表格對(duì)形式進(jìn)行變動(dòng)，那么可能就真的要用手機(jī)端展示表格了。

在確保文字能夠看清的情況下，表格很有可能橫向展示不全，所以滑動(dòng)難以避免。以下兩點(diǎn)可以優(yōu)化表格的滑動(dòng)體驗(yàn)：

• 將第一列基本信息固定不動(dòng)，只滑動(dòng)其余輔助信息。
• 讓用戶能夠看到展示了多少信息，還有多少是隱藏的。

這樣，復(fù)雜的表格至少能夠從表面上融入手機(jī)界面了：

三. 優(yōu)化細(xì)節(jié)

再仔細(xì)看看這張表格，即便不做大的調(diào)整，還是有很多地方可以通過(guò)微調(diào)來(lái)改善體驗(yàn)：

• 「ID和個(gè)性簽名」這種對(duì)于實(shí)際場(chǎng)景（管理和查看成員列表）沒(méi)有幫助的信息可以去掉。
• 「性別」信息可以使用符號(hào)、顏色等方式簡(jiǎn)化。
• 「好友」數(shù)量不多，所以可以用標(biāo)簽的形式。
• 「活躍度」和「加入時(shí)間」用戶可能在管理成員過(guò)程中需要進(jìn)行正向和負(fù)向排序。

優(yōu)化后，表格看起來(lái)更簡(jiǎn)單了：

四. 信息設(shè)計(jì)

手機(jī)的窄屏對(duì)于表格來(lái)說(shuō)總不是最佳選擇，所以如果可能的話，還是避免使用這種形式。

一個(gè)人在同一時(shí)間的注意力是有限的，大多數(shù)情況并不需要像傳統(tǒng)印刷品那樣，完整列出所有信息。重新思考真實(shí)的使用場(chǎng)景和用戶心理，你會(huì)發(fā)現(xiàn)并不需要一次性把所有東西都扔出來(lái)。

如果你想要像微信那樣，用頭像+昵稱這種形式，也許很容易被給你表格的人反駁：

你可以篩選出相對(duì)有用的信息提供給用戶，并用更有意義的方式整理出來(lái)：

• 「頭像和昵稱」依舊是不變的基本信息。
• 「活躍度」是群主進(jìn)行成員管理的主要依據(jù)。
• 「加入時(shí)間」是成員管理的輔助信息，但是時(shí)間長(zhǎng)短可能比加入日期更加一目了然。
• 當(dāng)成員數(shù)量較多時(shí)，自定義排序依舊重要。

于是原本臃腫的表格可以被整合重新設(shè)計(jì)成完全不一樣的輕便形式：

總結(jié)

本文提供了一些思考方向希望能夠帶給你啟發(fā)，以后遇到類似問(wèn)題，不要老老實(shí)實(shí)地把表格原封不動(dòng)地貼到手機(jī)上了。

作者：程遠(yuǎn)

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎ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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)、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ì)公司

更多精彩文章：

手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之二：三分鐘搞懂，iPhone 12發(fā)布后的設(shè)計(jì)尺寸調(diào)整

手機(jī)及小程序界面設(shè)計(jì)之三：從 Dribbble 高贊的 828 個(gè)作品中，總結(jié)出 2022 設(shè)計(jì)趨勢(shì)

手機(jī)及小程序界面設(shè)計(jì)之四：手機(jī)屏幕越來(lái)越大，UX設(shè)計(jì)師面臨哪些挑戰(zhàn)？

手機(jī)及小程序界面設(shè)計(jì)之五：連高手都容易忽略的9個(gè) iOS 與 Android 間的交互差異

手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之七：基礎(chǔ)科普！超全面的 UI 元素尺寸設(shè)置指南（上）

手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！

手機(jī)及小程序界面設(shè)計(jì)之九：手機(jī)端表格設(shè)計(jì)：我整理了一套循序漸進(jìn)的處理方法

手機(jī)及小程序界面設(shè)計(jì)之十：超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄

滴滴出行在 iPhone X 發(fā)售前就針對(duì)其操作特性進(jìn)行了界面適配，保障了 iPhone X 用戶的全面屏操作。現(xiàn)在 iPhone X 的適配結(jié)果已經(jīng)得到了良好的用戶反饋，由此我們梳理了移動(dòng)端界面 iPhone X 的適配方案，并從整個(gè)適配過(guò)程中探索到萬(wàn)變不離其宗的適配方法，為后續(xù)不斷更新的多尺寸屏幕提供更好更快的適配思路。

整篇文章分四個(gè)章節(jié)

• iPhone X 系統(tǒng)特性
• 界面常用元素適配方案
• 「去邊界化」設(shè)計(jì)
• 「去邊界化」設(shè)計(jì)的應(yīng)用

iPhone X 操作特性

iPhone X 是蘋果公司十周年推出的重點(diǎn)產(chǎn)品，無(wú)論外觀還是技術(shù)都有著革命性的創(chuàng)新。讓我們先來(lái)回顧下 iPhone X 在界面使用體驗(yàn)上都有哪些操作特性。

如果你對(duì) iPhone X 還不夠了解，可以看看這些 ：

• 《優(yōu)設(shè)首發(fā)！iPhone X 官方人機(jī)交互指南中文版》
• 《iPhone X適配沒(méi)那么復(fù)雜，但也不是看上去這么簡(jiǎn)單》
• 《取消了Home鍵的 iPhone X，交互方式都有哪些變化？》

1. 屏幕變長(zhǎng)

因大部分設(shè)計(jì)師都用 iPhone 8 來(lái)做設(shè)計(jì)稿，所以我們用 iPhone 8 與 iPhone X 做對(duì)比。

iPhone 6、iPhone 6s、iPhone 7 與 iPhone 8 屏幕分辨率一致。

iPhone X 使用了 5.8 英寸高分辨率、大圓角顯示屏。iPhone X 與 iPhone 8 的顯示屏寬度一致都是 375pt ，高度上 iPhone X 高出 145pt，可以在垂直空間多展示約 20% 的畫面。

iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同，使用 @3x 的圖像，界面內(nèi)容由手機(jī)硬件遮罩成帶圓角和傳感器（頂部齊劉海）的形狀。所以界面設(shè)計(jì)時(shí) iPhone X 和 iPhone 8 的設(shè)計(jì)寬度可以通用 375pt，而實(shí)際 iPhone X 的屏幕像素為 375pt×812pt (1125×2436px)，且切圖使用 @3x 圖片。

喬布斯曾說(shuō)，手持設(shè)備最理想的屏幕尺寸是3.5寸，這是因?yàn)閱问植僮鲿r(shí)3.5寸屏幕基本能做到大拇指無(wú)障礙全覆蓋。但隨著人們對(duì)手機(jī)功能多樣化的需求，主流屏幕遠(yuǎn)大于3.5寸。

iPhone X 是 5.8 寸，屏幕已經(jīng)超越了絕大多數(shù)用戶的拇指覆蓋范圍，這就導(dǎo)致左上和右下角的單手操作不夠方便。很多基于 F 型流動(dòng)視線設(shè)計(jì)的 App，通常會(huì)將重要的功能入口置于左上角，在 iPhone X 上，視線優(yōu)先和拇指操作未必可以同時(shí)滿足，這就要求設(shè)計(jì)師們對(duì)操作盲區(qū)的功能進(jìn)行多重考量，評(píng)估是否要針對(duì) iPhone X 做出位置調(diào)整。

2. 異形狀態(tài)欄（齊劉海）

iPhone 8 屏幕狀態(tài)欄高 20pt，iPhone X 狀態(tài)欄高 44pt 并有齊劉海形狀遮罩。狀態(tài)欄位置顯示的信息，在 iPhone X 上受齊劉海遮罩影響，需要特殊考慮展示效果，甚至重新設(shè)計(jì)信息展示方式避讓狀態(tài)欄，以便保持各屏幕展示效果的統(tǒng)一。

蘋果官方不建議采用隱藏或遮擋狀態(tài)欄的設(shè)計(jì)，相對(duì) iPhone 8 ，iPhone X 有更高的縱向顯示空間足夠展示更多的內(nèi)容，且狀態(tài)欄顯示了對(duì)用戶有用的信息，除非隱藏狀態(tài)欄能帶來(lái)更大的收益，否則還是建議保留。

3. 增加主屏幕指示條

iPhone X 屏幕最底部設(shè)置了主屏幕指示條，用戶可從屏幕底端使用滑動(dòng)手勢(shì)進(jìn)入主屏幕或切換應(yīng)用。這些系統(tǒng)的全局操作會(huì)優(yōu)先于App應(yīng)用的操作。在設(shè)計(jì)用戶沉浸式的產(chǎn)品如視頻、游戲時(shí)，可以適當(dāng)?shù)碾[藏主屏幕指示條。

主屏幕指示條下方的內(nèi)容仍是可點(diǎn)擊操作的，但要避免在屏幕最底部設(shè)置重要操作內(nèi)容，且要避免使用與指示條相沖突的操作手勢(shì)。主屏幕指示條只有黑白兩種顏色，會(huì)根據(jù)指示條底部背景自動(dòng)切換。

4. 設(shè)置安全區(qū)

從 iOS 11 開始，蘋果引入了安全區(qū)域的概念。在 iPhone 8 等屏幕上，安全區(qū)域默認(rèn)是除了狀態(tài)欄以外的屏幕范圍。在 iPhone X 上，安全區(qū)域默認(rèn)是除去頂部狀態(tài)欄以及底部主屏幕指示條周邊的范圍。

遵照系統(tǒng)安全區(qū)的概念進(jìn)行設(shè)計(jì)和開發(fā)，大多數(shù)使用系統(tǒng)標(biāo)準(zhǔn)UI元素（如導(dǎo)航欄、表單、內(nèi)容集）的應(yīng)用程序會(huì)自動(dòng)適應(yīng)設(shè)備的新外形，不需手動(dòng)調(diào)整，這樣會(huì)大量節(jié)省開發(fā)人員的工作量。所以在這里提倡大家遵照系統(tǒng)提倡的方式進(jìn)行開發(fā)布局，不僅方便 iPhone X 的適配工作，也方便后續(xù) iOS 系統(tǒng)更新以及界面元素的自動(dòng)匹配。

固定在屏幕上展示的內(nèi)容應(yīng)始終在安全區(qū)域內(nèi)，如頂導(dǎo)、底部tab欄等。垂直滾動(dòng)的內(nèi)容，如列表，圖片流，需要一直延伸到底部，也就是會(huì)在安全區(qū)之外展示，這樣才能確保提供全面屏操作體驗(yàn)。

常用元素適配方案

正是因?yàn)?iPhone X 有著許多操作特性，我們的設(shè)計(jì)方案必須針對(duì) iPhone X 進(jìn)行適配。以下是針對(duì)常見界面元素整理的通用適配規(guī)則。

1. 吸頂元素

對(duì)于吸頂元素的適配原則是：避讓狀態(tài)欄，內(nèi)容區(qū)吸附于安全區(qū)頂部，狀態(tài)欄背景顏色根據(jù)吸頂元素進(jìn)行調(diào)整。

• 頂部導(dǎo)航欄：導(dǎo)航欄直接平移到安全區(qū)頂部即可，iPhone X 狀態(tài)欄高度自動(dòng)適配，狀態(tài)欄底色與iPhone 8 時(shí)保持統(tǒng)一。
• 頂部通知：通知區(qū)域平移至安全區(qū)域，通知背景向上加高 44pt，狀態(tài)欄內(nèi)容保持在最上層展示。

2. 吸底元素

吸底元素的適配原則是：內(nèi)容平移至安全區(qū)底部，界面背景層元素（界面背景色、背景圖片、全屏地圖等）充滿屏幕，主屏幕指示條下方區(qū)域與吸底元素顏色協(xié)調(diào)。

• 吸底tab欄、選擇器、對(duì)話輸入框等：信息內(nèi)容平移至安全區(qū)域底部，主屏幕指示條下方填充相應(yīng)背景色。
• 吸底按鈕：信息內(nèi)容平移至安全區(qū)域底部，界面底部背景填充相應(yīng)背景色，按鈕可點(diǎn)擊區(qū)域不變。
• 底部擴(kuò)展信息：有些信息位于底部隱藏狀態(tài)，需展開顯示，由于 iPhone X 屏幕較長(zhǎng)，且安全區(qū)域未撐滿屏幕，所以會(huì)露出原本隱藏的信息。這時(shí)候通常會(huì)采用形狀遮罩遮蓋隱藏信息，或?qū)Φ撞侩[藏信息的位置進(jìn)行特殊調(diào)整。

3. 信息流

信息流從主屏幕指示條下方穿過(guò)，撐滿屏幕顯示，滑動(dòng)瀏覽信息不受影響。主屏幕指示條下方內(nèi)容仍可點(diǎn)擊，此區(qū)域滑動(dòng)手勢(shì)優(yōu)先觸發(fā)系統(tǒng)操作。信息流最底部?jī)?nèi)容要保障在安全區(qū)內(nèi)。

4. 全屏元素

全屏元素多為圖片、視頻、游戲畫面、全屏地圖等信息，適配規(guī)則是：全屏元素在 iPhone X 上仍要保持充滿屏幕的狀態(tài)，要保證圖像信息比例正確不變形，并接受硬件傳感器齊劉海和圓角遮罩。

• 全屏圖片：因全屏圖片在 iPhone X 上仍要保持全屏的話，會(huì)被裁剪掉圖片信息，所以要根據(jù)畫面具體元素進(jìn)行選擇，是充滿屏幕裁剪圖片，還是在空白區(qū)域填充色塊（系統(tǒng)默認(rèn)填充黑色）。App 開屏圖片直接調(diào)取 iPhone 8 Plus 在 iPhone X 展示會(huì)被裁剪，所以最好是單獨(dú)出圖適配，圖片尺寸為 375pt×812pt (1125×2436px @3x)。

因 iPhone X 與 iPhone 8 Plus 都使用@3x圖片，所以開屏圖片不做單獨(dú)適配的話可以調(diào)取 iPhone 8 Plus 圖片裁剪使用。

• 全屏閱讀模式：當(dāng)需要沉浸式閱讀的時(shí)候，我們會(huì)采用隱藏狀態(tài)欄的形式，將屏幕全部用于展示信息，但是這種形式在iPhone X 上因?yàn)辇R劉海的原因效果并不理想。所以在 iPhone X 上建議保留頂部狀態(tài)欄，信息在頂部安全區(qū)內(nèi)展示，狀態(tài)欄的底色可以根據(jù)信息內(nèi)容進(jìn)行調(diào)整。

5. 左右布局元素

最典型的左右布局就是抽屜導(dǎo)航，抽屜拉出后，如果信息卡片和主屏幕指示條交錯(cuò)疊加，就會(huì)稍顯信息混亂，建議抽屜導(dǎo)航的寬度根據(jù)主屏幕指示條的位置進(jìn)行調(diào)整，完整露出或完全遮擋指示條。

6. 居中元素

居中元素在適配中的影響較小，對(duì)話框、Toast 提示等均不需單獨(dú)適配。

• 對(duì)話框：對(duì)話框?yàn)槿志又械脑?，不受四周元素的影響，?iPhone X 上不需單獨(dú)適配，保障對(duì)話框的背景充滿屏幕即可。

• 缺省頁(yè)：因頂部狀態(tài)欄是不建議遮擋的部分，所以頂部加上頂導(dǎo)距離會(huì)很高，這樣就導(dǎo)致整體界面稍有重心下移的感覺(jué)。尤其在缺省圖形居中的界面，重心下移的感覺(jué)更為明顯，這種情況下建議對(duì)界面元素進(jìn)行單獨(dú)適配調(diào)整，以便達(dá)到視覺(jué)平衡。

以上的適配規(guī)則基本可以滿足所有場(chǎng)景的基礎(chǔ)適配需求。當(dāng)然還有很多特殊場(chǎng)景，不需要特意保持 iPhone 8 和 iPhone X 展現(xiàn)效果的一致性，這種情況就需要單獨(dú)設(shè)計(jì)方案，不是通用規(guī)則能滿足的了。

滴滴出行針對(duì)內(nèi)部產(chǎn)品做了一套適配指南，幾十頁(yè)滿滿的適配方案說(shuō)明，盡可能詳盡的將普適規(guī)則與特殊規(guī)則運(yùn)用場(chǎng)景舉例說(shuō)明。設(shè)計(jì)平臺(tái)將此適配指南發(fā)放到各業(yè)務(wù)部門，由業(yè)務(wù)方產(chǎn)出自己各功能場(chǎng)景下的適配方案。

在此過(guò)程中我們發(fā)現(xiàn)，即使規(guī)則已經(jīng)很詳盡，Webapp、H5頁(yè)面等多場(chǎng)景下仍有一些不清楚如何適配，或不能通用適配規(guī)則的情況，需要設(shè)計(jì)平臺(tái)持續(xù)跟進(jìn)，講解規(guī)則走查適配效果。

造成這種情況的原因大多是因?yàn)榻缑嬖O(shè)計(jì)的時(shí)候沒(méi)有充分考慮其后期延展，導(dǎo)致多屏幕下不能保持統(tǒng)一樣式，無(wú)法通用適配規(guī)則。這讓我們開始思考如何設(shè)計(jì)界面才能包容多屏幕的展現(xiàn)。

「去邊界化」設(shè)計(jì)

設(shè)備屏幕在不斷更新，適配需求就是持續(xù)的無(wú)盡的，iPhone 從 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不斷在變化，甚至屏幕的形狀邊界也在變化，更不用說(shuō)安卓系統(tǒng)各種各樣的屏幕尺寸及屏幕形狀。例如，夏普AQUOS S2。

設(shè)計(jì)界面時(shí)，如果對(duì)市面的主流屏幕挨個(gè)設(shè)計(jì)是有極其高的時(shí)間成本的，那怎么才能讓適配更從容，不必緊張的跟隨手機(jī)廠商的發(fā)售腳步？是否有提高適配效率的方法？適配可否是一勞永逸的？需要適配的元素有沒(méi)有一些共性……

帶著這些問(wèn)題不斷的思考總結(jié)，我們形成了一套自己的設(shè)計(jì)理念，能夠讓適配這件事情以一抵百，萬(wàn)變不離其宗，這就是「去邊界化」設(shè)計(jì)。

「去邊界化」設(shè)計(jì)，是指在設(shè)計(jì)之初把邊界限制去掉，定義好界面元素的特性及層級(jí)關(guān)系后，再套用到屏幕邊框之中。與常規(guī)設(shè)計(jì)的區(qū)別在于，讓內(nèi)容成為獨(dú)立且完整的組合體，再根據(jù)設(shè)定好的變化規(guī)則組合到不同的邊界中去。這樣保障了內(nèi)容的最大適用程度，且保障各屏幕展示規(guī)則的統(tǒng)一性。

目前我們最常做還是手機(jī)界面，未來(lái)VR、AR 成熟起來(lái)，我們所設(shè)計(jì)的界面就會(huì)更大，甚至?xí)蟮綗o(wú)形。運(yùn)用「去邊界化」設(shè)計(jì)，可以讓我們更好的適應(yīng)未來(lái)。

另外回到手機(jī)界面，我們完成一個(gè)設(shè)計(jì)方案后，也可以運(yùn)用“去邊界化”的方式檢查界面元素是否在多屏幕適配上存在問(wèn)題，減少不必要的適配工作量。

其大無(wú)外，其小無(wú)內(nèi)，在界面設(shè)計(jì)上，我們也需要突破界限，精益求精，讓每一個(gè)元素都豐富而完整。

「去邊界化」設(shè)計(jì)的應(yīng)用

1. 定義元素特性

這里的元素特性，除了元素本身的基礎(chǔ)功能及操作方式外，從三個(gè)角度進(jìn)行思考，延展性、吸附性、流動(dòng)性。

這里我們以同倍率，不同尺寸的屏幕適配為例，省略倍率換算方便我們更簡(jiǎn)單的了解「去邊界化」設(shè)計(jì)。

• 延展性：延展性指元素是否會(huì)在不同尺寸屏幕進(jìn)行尺寸變化。定義元素的延展屬性是適配的基礎(chǔ)，確定什么元素大小可變，什么元素大小不可變，才能讓適配方案清晰統(tǒng)一。

如下圖中，圖片、卡片、背景、列表、按鈕 等元素可隨著屏幕進(jìn)行延展變化，而icon、文字等為固定大小不會(huì)隨著屏幕進(jìn)行變化。

延展變化又可分為：等比延展、橫向延展、全部延展。

通常圖片、視頻元素使用等比延展，保障畫面比例統(tǒng)一不變形；列表、按鈕 等多采用橫向延展，信息量不變高度無(wú)需變化；卡片、背景等多根據(jù)其承載信息和屏幕背景尺寸進(jìn)行調(diào)整，長(zhǎng)寬均跟隨變化。

• 吸附性：界面中的元素都不是獨(dú)立存在的，每個(gè)元素都和其它某個(gè)元素存在一定聯(lián)系，所以定義好元素之間的吸附關(guān)系，方便后續(xù)元素的重新組合。

如下圖，button 吸附于界面（或安全區(qū)）底部，適配到其它屏幕依然保持與界面（或安全區(qū)）底部的吸附性。而下圖中的toast 提示為界面居中元素，也就是它的吸附性就是界面的中心，適配到其它屏幕仍保持這一吸附屬性。

• 流動(dòng)性：流動(dòng)性將元素比作水，依附與一個(gè)容器內(nèi)展示，根據(jù)容器的尺寸變化而變化。多為文字流、圖片流等信息元素所具備。

針對(duì)流動(dòng)性的元素主要是定義其容器的延展性和吸附性，流動(dòng)元素本身大小不變，位置形態(tài)上跟隨容器進(jìn)行變化。當(dāng)然還要考慮元素過(guò)多超出容器后的顯示方案，是被截?cái)噙€是省略等等。

如下圖，文字圖片流在信息容器內(nèi)進(jìn)行流動(dòng)展示。

2. 組織信息結(jié)構(gòu)

從平面維度思考元素關(guān)系可以理解為元素間的吸附性，但界面元素不總是在同一個(gè)平面上，App 界面通常分為 背景層 、內(nèi)容層 、操作層 、狀態(tài)層 ，這些層級(jí)在高度上是相互疊加的。

決定元素層級(jí)的因素主要是其表達(dá)內(nèi)容的主次關(guān)系，重要而緊急元素在最上方，不重要不緊急的元素在最下方。將界面從平面維度填充為立體維度讓產(chǎn)品功能更豐富，更貼近人們真實(shí)的立體世界，也就更符合用戶的認(rèn)知和操作邏輯。

無(wú)論界面的邊界如何變化，元素間的層級(jí)結(jié)構(gòu)一旦定下是不會(huì)隨邊界變化而改變的。建立元素的縱向?qū)蛹?jí)關(guān)系，便于在不同場(chǎng)景保持統(tǒng)一的元素優(yōu)先級(jí)。

在「去邊界化」設(shè)計(jì)中，除了元素自身特性（延展性、吸附性、流動(dòng)性）清晰，元素間的組合層級(jí)關(guān)系必須排布合理、邏輯清晰，才能讓整個(gè)產(chǎn)品層級(jí)統(tǒng)一，多屏幕展現(xiàn)層級(jí)統(tǒng)一。

3. 元素組件化

我們有講到界面中所有的元素都不是獨(dú)立的，有時(shí)某幾個(gè)元素組合表達(dá)同一個(gè)功能，關(guān)系非常緊密，甚至可以捆綁移動(dòng)，我們把這些功能密切相關(guān)的元素進(jìn)行封裝，看做一個(gè)完整的大元素，這就是我們常說(shuō)的組件。

組件化的特點(diǎn)就是詳盡每個(gè)元素的操作反饋、延展方案、顯示容器、極限情況等等場(chǎng)景，然后定義元素與元素之間的吸附關(guān)系，操作聯(lián)動(dòng)，使其成為一個(gè)完整的操作場(chǎng)景。

說(shuō)到組件化設(shè)計(jì)，這有一篇必看好文：《進(jìn)階必讀！可能是最全面的組件化開發(fā)與設(shè)計(jì)指南》。

組件還可以根據(jù)功能需求與其它元素自由組合，使得組件可以不斷復(fù)用，大大提升設(shè)計(jì)效率，及適配效率。

組件化的意義有很多，可以方便設(shè)計(jì)元素的復(fù)用，方便開發(fā)組件的復(fù)用，減少代碼及元素冗余，方便設(shè)計(jì)方案的修改等等。橫向組件化之于「去邊界化」設(shè)計(jì)，主要是在確立了元素特性及層級(jí)關(guān)系后，以整合元素成為組件的方式提升設(shè)計(jì)及適配效率。

以上就是「去邊界化」設(shè)計(jì)理念，包括定義元素三大特性：延展性、吸附性、流動(dòng)性，然后確定信息的橫縱向?qū)蛹?jí)關(guān)系，橫向功能關(guān)系緊密的元素可進(jìn)行組件化處理。這樣整個(gè)界面的元素都是層級(jí)清晰且不依靠邊界的，這時(shí)再給界面套用一個(gè)屏幕邊框就非常有依據(jù)了，且能保障所有適配界面具有統(tǒng)一性。

梳理清楚設(shè)計(jì)理念之后，還需要將上述原則梳理形成設(shè)計(jì)規(guī)范，同步至團(tuán)隊(duì)所有成員，以達(dá)到團(tuán)隊(duì)共識(shí)保障最終的效果呈現(xiàn)。

4. 制定設(shè)計(jì)規(guī)范

以規(guī)矩為方圓則成，以尺寸量長(zhǎng)短則得，設(shè)計(jì)規(guī)范可以幫助設(shè)計(jì)師快速認(rèn)知元素特性及使用規(guī)則，工作中快速?gòu)?fù)用通用元素，提升設(shè)計(jì)效率，且可以通過(guò)規(guī)范說(shuō)明對(duì)新功能尋求設(shè)計(jì)指導(dǎo)和參考。

規(guī)范的貫徹執(zhí)行，可以保持產(chǎn)品設(shè)計(jì)語(yǔ)言與品牌形象的統(tǒng)一，保障在不斷更新迭代中產(chǎn)品體驗(yàn)不走樣。統(tǒng)一的使用體驗(yàn)可以保障用戶流暢的使用產(chǎn)品，快速識(shí)別產(chǎn)品功能，簡(jiǎn)單高效進(jìn)行操作。此外通過(guò)規(guī)范說(shuō)明，可以實(shí)現(xiàn)開發(fā)人員與設(shè)計(jì)師的高效溝通，另外，將組件開發(fā)形成設(shè)計(jì)組件庫(kù)，可以提升開發(fā)效率，方便代碼的復(fù)用。

在「去邊界化」的設(shè)計(jì)理念中設(shè)計(jì)規(guī)范也是不可缺少的環(huán)節(jié)，把定義好的元素特性和確定的組織結(jié)構(gòu)總結(jié)成設(shè)計(jì)規(guī)范，是把理論層面上的探索轉(zhuǎn)換成實(shí)踐指導(dǎo)。

以上就是完整的「去邊界化」設(shè)計(jì)理念在實(shí)際工作中的應(yīng)用：從定義應(yīng)用中元素的延展性、吸附性和流動(dòng)性，到把零散的信息元素組成橫向、縱向有序的結(jié)構(gòu)，并把上述特性和結(jié)構(gòu)形成設(shè)計(jì)規(guī)范在設(shè)計(jì)、開發(fā)團(tuán)隊(duì)中應(yīng)用推廣。

總結(jié) 

從蘋果發(fā)布會(huì)開始，滴滴設(shè)計(jì)團(tuán)隊(duì)內(nèi)部就開始進(jìn)行著iPhone X的適配工作。了解iPhone X的操作特性、探究滴滴出行應(yīng)用的適配規(guī)范、上線后跟蹤反饋等，適配只是一個(gè)很小的工作需求，但也可以做的很大，做的很多，我們希望抱著這種極致執(zhí)行的態(tài)度做好每一件事情。

從這次的適配工作中我們不僅看到了 iPhone X ，還看到了未來(lái)不斷會(huì)出現(xiàn)的新產(chǎn)品、新系統(tǒng)等，我們不滿足于一次次被動(dòng)的適配，更希望可以主動(dòng)的應(yīng)對(duì)變化，所以我們摸索出了「去邊界化」設(shè)計(jì)理念，希望這個(gè)理念能對(duì)大家的設(shè)計(jì)工作有所啟發(fā)，讓我們?yōu)槲磥?lái)做好準(zhǔn)備。

作者：滴滴出行CDX - 張瑨

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎ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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)、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ì)公司

更多精彩文章：

手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之二：三分鐘搞懂，iPhone 12發(fā)布后的設(shè)計(jì)尺寸調(diào)整

手機(jī)及小程序界面設(shè)計(jì)之三：從 Dribbble 高贊的 828 個(gè)作品中，總結(jié)出 2022 設(shè)計(jì)趨勢(shì)

手機(jī)及小程序界面設(shè)計(jì)之四：手機(jī)屏幕越來(lái)越大，UX設(shè)計(jì)師面臨哪些挑戰(zhàn)？

手機(jī)及小程序界面設(shè)計(jì)之五：連高手都容易忽略的9個(gè) iOS 與 Android 間的交互差異

手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之七：基礎(chǔ)科普！超全面的 UI 元素尺寸設(shè)置指南（上）

手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！

手機(jī)及小程序界面設(shè)計(jì)之九：手機(jī)端表格設(shè)計(jì)：我整理了一套循序漸進(jìn)的處理方法

手機(jī)及小程序界面設(shè)計(jì)之十：超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄

一、基礎(chǔ)規(guī)則

1. 官方規(guī)范

對(duì)于剛開始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計(jì)規(guī)范的作用就是告訴你們?cè)氐拇笮『驮趺丛O(shè)置，只要看完了就能懂得如何設(shè)計(jì) iOS 或 Android 應(yīng)用。而實(shí)際上，這些規(guī)范并不能幫助你們解決這個(gè)問(wèn)題，因?yàn)樵O(shè)計(jì)規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜。

我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫(kù)所示。

官方不會(huì)提供一個(gè)列表，逐一羅列每個(gè)元素的長(zhǎng)寬和其它參數(shù)，所以想弄明白，要自己在這兩套素材庫(kù)中選中元素查看。如下圖這個(gè)按鈕，我們就能看見它的參數(shù)值。

免費(fèi)獲取 →  iOS 11設(shè)計(jì)規(guī)范發(fā)布了，來(lái)下載官方源文件！

在初期，我們想要設(shè)計(jì)出嚴(yán)格符合官方規(guī)范的設(shè)計(jì)，就可以嚴(yán)格照搬官方的元素設(shè)置。但是，即使官方的源文件包含的元素字體已經(jīng)非常多了，在實(shí)際設(shè)計(jì)過(guò)程中，還是會(huì)出現(xiàn)它們無(wú)法覆蓋的設(shè)計(jì)類型，需要依靠我們自己設(shè)置。

還有如字體的應(yīng)用，官方源文件使用的語(yǔ)言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計(jì)場(chǎng)景下，我們是不可能照搬這種規(guī)范的。

新人要明白，官方的規(guī)范，只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無(wú)法設(shè)計(jì)出有趣個(gè)性化的設(shè)計(jì)的，比如下面這幾款已經(jīng)看不到 「 iOS 設(shè)計(jì) 」的應(yīng)用。

官方的參數(shù)決定我們?cè)O(shè)計(jì)的下限，當(dāng)你不知道該怎么做，或者設(shè)計(jì)的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺(jué)為準(zhǔn)，那么照搬就行了。后面的文章要說(shuō)的，就是脫離開這些束縛，正確自定義 UI 元素的尺寸。

2. 尺寸設(shè)置原則

UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無(wú)論是海報(bào)或畫冊(cè)，使用百分比、目測(cè)的形式就足以讓我們做出很多優(yōu)秀的作品，無(wú)需緊盯著其中出現(xiàn)的每個(gè)元素的長(zhǎng)寬高數(shù)值。而 UI 的設(shè)計(jì)中，無(wú)論字體、圖標(biāo)還是按鈕，都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長(zhǎng)寬高，如下圖設(shè)計(jì)一個(gè)按鈕的操作。

這么做的原因是因?yàn)樵陔娮悠聊恢?，圖像的呈現(xiàn)是由屏幕中的像素點(diǎn)來(lái)完成的，像素點(diǎn)是最小的顯示單位，一個(gè)點(diǎn)只能顯示一個(gè)顏色，所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值，那么這個(gè)元素的邊緣就會(huì)虛化。所以為了避免這種事情出現(xiàn)，我們就得用整數(shù)來(lái)定義元素的長(zhǎng)和寬。

這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問(wèn)題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識(shí)，我會(huì)在另外的文章里分享，后面文章所有的長(zhǎng)度單位默認(rèn)以 PT 為準(zhǔn)，即 XD 和 Sketch 默認(rèn)畫布的單位，PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以2。

只有分隔線，是唯一可以不使用整數(shù)的例外，因?yàn)?1pt 的分隔線看起來(lái)會(huì)非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個(gè)列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。

無(wú)論在 iOS 或 Android 的規(guī)范中，也都提到過(guò)使用 8 x 8 的網(wǎng)格做輔助，這導(dǎo)致網(wǎng)上有很多片面的文章會(huì)反復(fù)強(qiáng)調(diào)對(duì)元素的尺寸使用 8 的倍數(shù)。

• iOS：使用 8px 網(wǎng)格系統(tǒng)，網(wǎng)格系統(tǒng)可以讓線條和圖像內(nèi)容在所有尺寸上保持清晰，無(wú)需太多的修飾和銳化。將圖形邊界對(duì)齊到網(wǎng)格上，減少按比例縮小圖像時(shí)出現(xiàn)的半像素和內(nèi)容模糊的情況。
• Android：所有組件都與間隔為 8dp 的基準(zhǔn)網(wǎng)格對(duì)齊。排版/文字與間隔為 4dp 的基準(zhǔn)網(wǎng)格對(duì)齊。在工具中的圖標(biāo)同樣與間隔為 4dp 的基準(zhǔn)網(wǎng)格對(duì)齊。

實(shí)際上，我們?cè)谡鎸?shí)的設(shè)計(jì)環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好處我會(huì)在后面的文章中做說(shuō)明。如果發(fā)現(xiàn) 4 的倍數(shù)無(wú)法滿足某些特定的需要，如多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26等。

以上就是我們一開始要建立的元素尺寸原則，精簡(jiǎn)完即：

• 使用整數(shù)，只有分隔線可以使用 0.5 的小數(shù)；
• 使用 4 的倍數(shù)，根據(jù)實(shí)際情況可以切換成一般偶數(shù)。

有了這樣的原則，并養(yǎng)成習(xí)慣，我們就能在每次設(shè)計(jì)前對(duì)元素尺寸有個(gè)大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整，如下面設(shè)計(jì)注冊(cè)登錄頁(yè)面的輸入框作為案例。

開始我使用 280 寬，44 高的尺寸，但是覺(jué)得有點(diǎn)僵硬，太正式了。這時(shí)候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4×2)=52 。這時(shí)候又覺(jué)得太高了，實(shí)際輸入內(nèi)容也沒(méi)那么寬，于是再對(duì)高減 4，寬減 40，獲取最終結(jié)果。

所以，因?yàn)檫@樣的操作原則，決定了 UI 元素的尺寸不是憑感覺(jué)用鼠標(biāo)拖拽出來(lái)的（拖動(dòng)效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計(jì)過(guò)程就是一個(gè)不停鍵入?yún)?shù)和調(diào)整參數(shù)的過(guò)程。

3. 總結(jié)

以上就是對(duì)與 UI 元素尺寸定義的第一部分，因?yàn)橐v清楚需要花的篇幅太長(zhǎng)，所以我會(huì)將后面具體的案例講解拆成 4 部分，分別由控件、文字、圖標(biāo)、組件部分組成。

二、控件尺寸定義

這里要聲明，在我的語(yǔ)系中，控件指的是在界面中最基本的交互單位，如按鈕、滑塊、開關(guān)、分頁(yè)器等，更復(fù)雜的如動(dòng)態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。

下面，會(huì)根據(jù)前面定義的規(guī)范，分別講解控件應(yīng)該使用的尺寸范圍：

1. 按鈕

按鈕是界面交互操作中使用最頻繁的元素了，當(dāng)然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。

在進(jìn)入具體參數(shù)的講解前，要先理解按鈕實(shí)際上是所有控件中最復(fù)雜的一個(gè)，并不是因?yàn)樵谠O(shè)計(jì)樣式上的復(fù)雜，而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。

在上圖中，可以點(diǎn)擊的東西不少，我們就說(shuō)外觀是標(biāo)準(zhǔn)樣式的按鈕，就有 9 個(gè)。而這里面，權(quán)重最高的必然是 「加入購(gòu)物車」。權(quán)重最低的，應(yīng)該是前往新品頁(yè)。

定義按鈕尺寸，我們首先要知道的是，按鈕在界面或整個(gè)應(yīng)用中的權(quán)重，尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對(duì)重要性表現(xiàn)的關(guān)鍵因素，不過(guò)不在這里展開。

按鈕高度

當(dāng)我們?cè)O(shè)計(jì)按鈕時(shí)，優(yōu)先要從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來(lái)匹配權(quán)重，分成高、中、低三類：

• 高權(quán)重：40-56pt
• 中權(quán)重：24-40pt
• 低權(quán)重：12-24pt

高權(quán)重的按鈕，類似登錄頁(yè)的注冊(cè)、登錄，購(gòu)物詳情頁(yè)的購(gòu)買，流程頁(yè)中的下一步，它的最小高度應(yīng)該從 40pt 開始遞增，低于這個(gè)大小，那么這個(gè)按鈕就很難在這個(gè)頁(yè)面起到視覺(jué)支撐，因?yàn)楦杏X(jué)太細(xì)了。

中權(quán)重的按鈕，類似個(gè)人主頁(yè)的關(guān)注、點(diǎn)贊、評(píng)論按鈕等。這個(gè)層級(jí)的按鈕依舊有比較高頻的交互次數(shù)，我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊最小的尺寸了。這種按鈕通常是組件的一部分，不像層級(jí)最高的按鈕常常是處于一個(gè)孤立的空間，所以高度如果超出 40pt，就會(huì)對(duì)當(dāng)前模塊產(chǎn)生直觀的破壞。

低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對(duì)于按鈕的交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。

使用上面這種方法，在頁(yè)面中根據(jù)權(quán)重定尺寸就可以了。還需要注意的是，不同尺寸的按鈕之間，高度的差距不要小于 4 ，否則差異太小不僅拉不開層次，還容易使視覺(jué)感受變差。

按鈕寬度

主流的按鈕都是橫向的長(zhǎng)方形，正方形也有，但是不能變成縱向的矩形。

按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無(wú)視內(nèi)容的數(shù)量。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或全屏的，可以特殊處理。

普通按鈕，左右間距距離內(nèi)容過(guò)多，就會(huì)讓按鈕看起來(lái)非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容來(lái)設(shè)置按鈕左右的寬，最大寬度應(yīng)該小于內(nèi)容距離上下的 2 倍。

按鈕圓角

按鈕尺寸還有最后一個(gè)屬性，就是按鈕的圓角設(shè)置了。矩形的邊角有三種類型，即直角矩形、圓角矩形、半圓矩形。

為矩形設(shè)置圓角，是為了讓按鈕看起來(lái)有一定的圓潤(rùn)感不會(huì)顯得太尖銳，這種圓角的數(shù)值賦予要適當(dāng)，只要超出了一定的范疇，就會(huì)對(duì)視覺(jué)的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯(cuò)誤案例。

所以，我們?cè)谠O(shè)計(jì)圓角的過(guò)程中，一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，不大于高度的 1/4。例如，一個(gè)24pt的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt，如上圖的效果。

以上就是按鈕相關(guān)尺寸定義的說(shuō)明，當(dāng)然，在真實(shí)的設(shè)計(jì)需求中可能遇到很多無(wú)法滿足的情況，這就需要大家多做嘗試了。

2. 輸入框

輸入框也是我們比較常用的元素之一，它和按鈕有非常接近的外形。最常見的就是登錄頁(yè)賬號(hào)密碼輸入框，以及首頁(yè)上方的搜索欄了。

輸入框的使用高度尺寸，常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來(lái)會(huì)非常擁擠，比如我用下面學(xué)生的案例做個(gè)演示。

3. 步進(jìn)器

常見的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來(lái)增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28 – 40 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28 以后，就會(huì)發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。

步進(jìn)器中常見的錯(cuò)誤，是在我們?cè)O(shè)置圓角外框時(shí)，繪制左右兩個(gè)按鈕，并沒(méi)有合理的減去內(nèi)側(cè)的圓角，這是絕對(duì)不應(yīng)該忽略的細(xì)節(jié)。

4. 下拉菜單

下拉菜單要注意包含多種狀態(tài)，默認(rèn)、展開和選中。默認(rèn)狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當(dāng)菜單展開后，下方多出來(lái)的選項(xiàng)菜單，就值得注意了。

菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)，高度是不大于默認(rèn)的選項(xiàng)框的。新手很容易在彈出菜單中設(shè)定過(guò)小的高度，使整個(gè)控件看起來(lái)會(huì)非常的別扭。

5. 開關(guān)

開關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁(yè)的列表中，上方就是它主流的幾種樣式。在設(shè)計(jì)開關(guān)的時(shí)候，要先確定一個(gè)矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt。之后再將細(xì)節(jié)填入。

6. 滑塊

滑塊形式接近開關(guān)，通常在中間有一個(gè)操作節(jié)點(diǎn)，下面有一個(gè)用來(lái)表示區(qū)間的線條。實(shí)際上我們?cè)撟龅木褪欠謩e決定它們的尺寸。

節(jié)點(diǎn)如果做的太小，不僅會(huì)顯得難看，而且會(huì)讓人覺(jué)得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下面的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。

7. 指示器

指示器用來(lái)展示元素序列，雖然在 APP 中沒(méi)有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來(lái)和諧。大多數(shù)人在定義指示器時(shí)，不是太大，就是太小，可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會(huì)出錯(cuò)。

指示器主要是圓形和矩形兩種形式：

• 圓形：8、10、12
• 矩形：14×2、16×2、20×3

8. 提示紅點(diǎn)

提示紅點(diǎn)也是大多數(shù)應(yīng)用會(huì)使用的一個(gè)控件，它的大小應(yīng)該在 24-32pt 之間。作為一個(gè)圓形，這個(gè)控件設(shè)計(jì)起來(lái)很容易，但設(shè)計(jì)師往往忽略一件事，那就是如果中間的數(shù)值超過(guò) 10 變成 2 位以后，要怎么處理。

在設(shè)計(jì)這樣的元素時(shí)，我們要用一個(gè)矩形元素來(lái)表現(xiàn)，即畫一個(gè)正方形，然后將圓角設(shè)成最大，那它看上去就是一個(gè)圓形。那么每增加一位字符，我們就需要為這個(gè)矩形增加該字符的寬度，可以用左右間距判斷。

因?yàn)橄嗤痔?hào)下，不同英文、數(shù)字的寬度都是不一樣的，我們要根據(jù)實(shí)際輸入的內(nèi)容所增加的寬度，去增加圓點(diǎn)的寬度。

9. 分頁(yè)控件

最后一個(gè)控件，就是分頁(yè)控件了，安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響，較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。

下面是高度：

• 高權(quán)重：40-48
• 低權(quán)重：28-36

分頁(yè)控件主要應(yīng)用在頭部和頁(yè)面中部的組件中，如下方的案例：

雖然很多時(shí)候分頁(yè)器是沒(méi)有背景色的，但是背景矩形是必須畫出來(lái)的，即隱藏填充和描邊，這樣我們就可以通過(guò)垂直居中的方式，來(lái)確定中間文字的位置。

一個(gè)完整的分頁(yè)控件，里面會(huì)包含兩個(gè)或以上的選項(xiàng)，所以定義每個(gè)選項(xiàng)的寬也是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時(shí)，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt 以上，才不會(huì)顯得過(guò)度擁擠。

分頁(yè)控件選項(xiàng)處于選中狀態(tài)時(shí)，有的設(shè)計(jì)是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個(gè)元素如果定義得不好，會(huì)讓整個(gè)控件看起來(lái)非常粗糙，它需要在樣式中能起到畫龍點(diǎn)睛的作用。

下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都應(yīng)該不大于 2pt。寬度的定義，第一種和每個(gè)選項(xiàng)背景區(qū)域相等，第二種則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計(jì)效果：

10. 總結(jié)

前面說(shuō)到了不少元素的尺寸，那么真實(shí)應(yīng)用的效果會(huì)如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁(yè)面中去。

可以看到，模塊大小很均衡，看上去不會(huì)覺(jué)得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設(shè)計(jì)稿了。

這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會(huì)被設(shè)計(jì)得很奇怪。當(dāng)你們沒(méi)有對(duì)于特殊化風(fēng)格設(shè)計(jì)的控制能力時(shí)，就先學(xué)會(huì)正確的使用上面的這些參數(shù)吧。

作者：超人的電話亭

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎ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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)、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ì)公司

更多精彩文章：

手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之二：三分鐘搞懂，iPhone 12發(fā)布后的設(shè)計(jì)尺寸調(diào)整

手機(jī)及小程序界面設(shè)計(jì)之三：從 Dribbble 高贊的 828 個(gè)作品中，總結(jié)出 2022 設(shè)計(jì)趨勢(shì)

手機(jī)及小程序界面設(shè)計(jì)之四：手機(jī)屏幕越來(lái)越大，UX設(shè)計(jì)師面臨哪些挑戰(zhàn)？

手機(jī)及小程序界面設(shè)計(jì)之五：連高手都容易忽略的9個(gè) iOS 與 Android 間的交互差異

手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之七：基礎(chǔ)科普！超全面的 UI 元素尺寸設(shè)置指南（上）

手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！

手機(jī)及小程序界面設(shè)計(jì)之九：手機(jī)端表格設(shè)計(jì)：我整理了一套循序漸進(jìn)的處理方法

手機(jī)及小程序界面設(shè)計(jì)之十：超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄

簡(jiǎn)介說(shuō)明

1. 理論表述

任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需要的時(shí)間，與目標(biāo)距離正相關(guān)，與目標(biāo)大小負(fù)相關(guān)。

2. 研究背景

1954 年，Paul Morris Fitts 根據(jù)信息類比提出一個(gè)假設(shè)，該假設(shè)能夠量化「移動(dòng)到目標(biāo)選擇任務(wù)」這個(gè)操作的難度「1」。雖然該假設(shè)還未涉及到人機(jī)交互中的具體參數(shù)，卻給了后來(lái)的交互研究人員極大的啟發(fā)。

我們現(xiàn)在經(jīng)常看到的 Shannon 公式（即上面那個(gè)公式）是由約克大學(xué)教授 Scott Mackenzie 在 1992 年提出的一個(gè)菲茨公式的變體「2」，該變體被廣泛地應(yīng)用于需要指針操作的人機(jī)交互系統(tǒng)當(dāng)中。作為交互設(shè)計(jì)和 UI 設(shè)計(jì)的理論基礎(chǔ)，它更簡(jiǎn)潔明了地闡述了時(shí)間 T 和目標(biāo)距離 D 以及目標(biāo)大小 W 之間的函數(shù)關(guān)系：因?yàn)橐?2 為底的指數(shù)函數(shù)是遞增函數(shù)，所以，T 與 D 正相關(guān)（D 越大 T 越大），而與 W 負(fù)相關(guān)（W 越大 T 越小）。

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

人們做出一個(gè)移動(dòng)指針的操作通常需要兩步：

• 將指針快速移動(dòng)至目標(biāo)大致所在的區(qū)域；
• 精細(xì)調(diào)節(jié)指針的位置以達(dá)到可點(diǎn)擊的區(qū)域。

菲茨定律所包含的兩點(diǎn)內(nèi)容：

• 指針當(dāng)前位置與目標(biāo)間的距離 D 越長(zhǎng)，所需時(shí)間越長(zhǎng)；
• 目標(biāo)的寬度 W 越大，所需時(shí)間越短。

綜合兩者來(lái)看，菲茨定律中的 D 在第一步中起更為明顯的作用，而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示，主要也是從這兩方面入手。

1. 需要連續(xù)操作的控件盡可能接近

案例1：系統(tǒng)右鍵菜單，微信彈出菜單

最典型的例子就是菜單，無(wú)論是 PC/Mac 中的右鍵菜單還是微信聊天頁(yè)里面的加號(hào)鍵都遵循著這一原則。作為用戶，點(diǎn)擊這類按鈕之后一定會(huì)有后續(xù)的任務(wù)和操作，所以這些任務(wù)都被安排在了距離所點(diǎn)擊區(qū)域更近的菜單中。

案例2：夸克和 Safari 的 url 輸入框位置比較

另外一個(gè)例子是瀏覽器的搜索欄輸入框，現(xiàn)在已經(jīng)有一些瀏覽器（比如簡(jiǎn)單搜索、夸克）會(huì)將輸入框以及一些其他更常用操作置于底部，這是因?yàn)槲覀冋Ｎ粘质謾C(jī)時(shí)，大拇指離底部更近，所以需要進(jìn)行點(diǎn)擊操作的話底部的輸入框操作起來(lái)更方便，也更快。

2. 可點(diǎn)擊的按鈕盡可能大

這一點(diǎn)在現(xiàn)今的 APP 中做得已經(jīng)非常到位了。

案例3：哈羅出行

作為哈羅單車租用操作的入口，頁(yè)面中的「開鎖」按鈕做得足夠大，用戶可以輕易快速地點(diǎn)擊到這個(gè)使用頻率最大的按鈕。登錄（也就是開始）按鈕也是一樣的道理。

3. 邊角的利用

還有一個(gè)比較特殊的就是對(duì)于邊角的利用，無(wú)論是在 Windows 還是在 MacOS 中，邊角總是有一些比較重要的操作，比如 Windows 的「開始菜單」（在左下角），MacOS 的 Dock 欄（在底部）以及頂部狀態(tài)欄，包括 Mac 特有的觸發(fā)角。

案例4：MacOS 觸發(fā)角設(shè)置

為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權(quán)重相當(dāng)之高的組件或者操作呢？在硬件設(shè)備中邊角是一個(gè)極其特殊的存在，由于指針再怎么移動(dòng)都不可能超越屏幕邊界，只能停留在邊界上，所以邊界對(duì)于用戶的操作來(lái)說(shuō)是「無(wú)限可觸發(fā)」的，這有什么意義呢？這意味著對(duì)于隱性存在的目標(biāo)來(lái)說(shuō)，W 趨于無(wú)限大。

既然 W 趨于無(wú)限大，根據(jù)公式時(shí)間 T 就趨于常量 a。

結(jié)論就是無(wú)論指針距離目標(biāo)物多遠(yuǎn)，所需要花費(fèi)的時(shí)間都已經(jīng)達(dá)到了理論的最小值，輕松且高效。而在移動(dòng) APP 中同樣有邊角的應(yīng)用，比如最近拿了 Google Play 設(shè)計(jì)大獎(jiǎng)的 Drops。

案例5：Drops

創(chuàng)新的交互將屏幕底邊充分的利用了起來(lái)，只要將單詞移到底部，就代表用戶已經(jīng)記住這個(gè)單詞了。注意整個(gè)底部都是可以觸發(fā)的，而不僅僅是腦袋那個(gè)圓形區(qū)域。本來(lái)「移動(dòng)」這個(gè)操作對(duì)于「按鈕」來(lái)說(shuō)更加繁瑣，但是在 Drop 的應(yīng)用場(chǎng)景下這樣的移動(dòng)反而沒(méi)有覺(jué)得麻煩，滑起來(lái)相當(dāng)帶勁。

4. 菲茨定律的逆向應(yīng)用

菲茨定律給我們的啟示通常都是正向的，都是以縮短用戶的操作時(shí)間為主要目標(biāo)，但也有一些場(chǎng)景需要反其道而行之。比如如果遇到需要用戶謹(jǐn)慎的操作時(shí)，可以逆向運(yùn)用菲茨定律，增加操作的復(fù)雜度。

案例6：iPhone 關(guān)機(jī)和微信刪除聊天窗

iPhone 的滑動(dòng)關(guān)機(jī)延長(zhǎng)了用戶關(guān)機(jī)操作的時(shí)間，以提醒用戶此操作為不可逆，需要謹(jǐn)慎操作。微信也是同理，甚至還縮小了刪除按鈕的大小，以達(dá)到警示的目的。

另一個(gè)典型就是彈出窗口的關(guān)閉按鈕。

案例7：Luckin Coffee 的彈出窗

彈出窗口里一般都包含了開發(fā)商的推廣、廣告、運(yùn)營(yíng)活動(dòng)等等，所以開發(fā)商會(huì)希望用戶花盡量多的時(shí)間去注意到它們的內(nèi)容，這時(shí)候雞賊的開發(fā)商會(huì)把關(guān)閉按鈕做得又小又遠(yuǎn)（遠(yuǎn)離視覺(jué)中心），讓用戶花更多的時(shí)間去尋找和點(diǎn)擊它們，效果拔群。

注意事項(xiàng)

注意點(diǎn)1：D 不能過(guò)分短

過(guò)分短的間距不僅無(wú)法提升操作效率，反而會(huì)造成視覺(jué)壓力從而降低用戶體驗(yàn)。

反面案例1：唯物魔改版

按照菲茨定律魔改的唯物登錄頁(yè)面，理應(yīng)操作得更迅捷方便，然而實(shí)際上除了視覺(jué)上造成額外的擁擠感、破壞畫面負(fù)空間構(gòu)成之外，我嘗試著點(diǎn)了一下覺(jué)得十分逼仄擠手，所以過(guò)度縮減按鈕間的間距并不合理。

注意點(diǎn)2：W 不能過(guò)分大

大尺寸的點(diǎn)擊目標(biāo)確實(shí)能夠有效地降低用戶操作成本，但是過(guò)分大的目標(biāo)也會(huì)很直接地破壞畫面的平衡，浪費(fèi)屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關(guān)系，當(dāng)按鈕已經(jīng)足夠大時(shí)，再增大就沒(méi)有什么體驗(yàn)上的提升了，如下圖所示。

反面案例2：KEEP 魔改版

與唯物類似，當(dāng)按鈕大到一定程度之后，會(huì)對(duì)畫面造成恐怖的破壞效果。

總結(jié)

• 盡可能縮短連續(xù)操作所相關(guān)按鈕的間距，盡可能做大需要頻繁點(diǎn)擊的按鈕（但都不要太過(guò)分）。
• 注意屏幕四邊和四角在交互中的價(jià)值。
• 逆向運(yùn)用菲茨定律以延長(zhǎng)用戶在當(dāng)前頁(yè)面的時(shí)間，或?qū)τ脩舻南乱徊讲僮靼l(fā)出警示。

現(xiàn)在大多數(shù)的 PM /交互/ UI 設(shè)計(jì)師，在設(shè)計(jì)產(chǎn)品的時(shí)候都是以 iOS 為基準(zhǔn) 思考產(chǎn)品上的各種功能邏輯、交互狀態(tài)，而很容易忽略了某些功能在 Android 里并不能「一稿適應(yīng)兩端」，部分產(chǎn)品差異在安卓上是不一樣的。

所以本文就講下 Android 和 iOS 9大產(chǎn)品/交互差異，希望你在日后的產(chǎn)品設(shè)計(jì)時(shí)，可以考慮到更多層面的知識(shí)點(diǎn)。

虛擬商品、支付規(guī)則和方式的不同

支付規(guī)則

對(duì)在于一些虛擬商品的支付上，如 vip 會(huì)員、xx幣，xx豆。iOS 和 Android 就存在不同的支付規(guī)則：Android 基本無(wú)限制，無(wú)抽成。而 iOS 限制比較多，而且要抽成大約 30% 的手續(xù)費(fèi)。

舉個(gè)例子：同樣充值 30 元，Android 端會(huì)得到 300 金幣，而在 iOS 中，只有 210 金幣。正因這個(gè)抽成規(guī)則的不同（沒(méi)辦法，這是蘋果硬性規(guī)定的），才會(huì)出現(xiàn)各種平臺(tái)的虛擬貨幣，在 Android 和 iOS 中的充值比例是不一樣的，如快手：

所以對(duì)于虛擬商品在 iOS 端的抽成規(guī)則，在產(chǎn)品設(shè)計(jì)時(shí)一定得考慮清楚，因?yàn)檫@關(guān)系產(chǎn)品的商業(yè)和盈利模式。通常有 2 種解決思路：

A. 讓用戶承擔(dān) 30% 的抽成：

同樣的價(jià)格，iOS 用戶得到的商品少些

如同樣充值 30 元，Android 端會(huì)得到 300 金幣，而在 iOS 中，只有 210 金幣。像快抖音、陌陌等各種貨幣充值。

同樣的商品，iOS 用戶支付更高的費(fèi)用

如 3 個(gè)月的 vip 會(huì)員，Android 端定價(jià)是 58 元，iOS 端則可以設(shè)為 68 元。如優(yōu)酷、騰訊視頻的 vip 會(huì)員價(jià)格。

B. 公司自己承擔(dān) 30% 的抽成：

如 iOS 端充值 30 元，公司實(shí)收 21 元，但 iOS 用戶能得到和 Android 一樣的 300 個(gè)金幣。（理論上是有這個(gè)解決思路，但現(xiàn)實(shí)中很少有公司去實(shí)現(xiàn)，畢竟抽成成本就擺在那里）

另外還需要注意的是：因?yàn)槌槌梢?guī)則的不同，對(duì)于同一個(gè) ID 的賬戶余額，在 Android 和 iOS 端中是不能通用的。因此在產(chǎn)品設(shè)計(jì)時(shí)需要將這點(diǎn)告知用戶，預(yù)防用戶犯錯(cuò)、以及惡意刷幣。

支付方式

Android 由于開源的特性，因此對(duì)接的都是第三方支付平臺(tái)，如微信支付、支付寶、銀聯(lián)卡等。 而 iOS 出于系統(tǒng)的封閉性和安全性考慮，只能調(diào)用蘋果自己的支付系統(tǒng)：登錄 Apple ID ，然后用授權(quán)的支付方式（支付寶、銀聯(lián)卡）進(jìn)行付款。

狀態(tài)欄交互的不同

「狀態(tài)欄」也就是我們手機(jī)界面最頂部的電池欄，它除了可以在不同背景里切換顏色外，在交互的觸發(fā)上，Android 和 iOS 中也各不相同。

iOS ：用戶在 Y 軸滾動(dòng)了很長(zhǎng)內(nèi)容時(shí)，點(diǎn)擊狀態(tài)欄可以快速回到初始位置。

Android ：無(wú)論用戶滾動(dòng)了多長(zhǎng)內(nèi)容，都是點(diǎn)擊無(wú)任何效果。

雖然這一交互差異是 iOS 專有的，但它卻啟發(fā)我們一個(gè)新的設(shè)計(jì)思路：在必要的時(shí)候，狀態(tài)欄可以為產(chǎn)品承載新的交互狀態(tài)。如網(wǎng)易的 LOFTER（ iOS 端），用戶離開音樂(lè)播放界面時(shí)，狀態(tài)欄就用于顯示音樂(lè)信息和操作入口，方便用戶在瀏覽其他內(nèi)容時(shí)可以快速關(guān)閉音樂(lè)，極大提升了用戶的操作效率。

下載方式和狀態(tài)的不同

這種大多應(yīng)用于運(yùn)營(yíng)的「拉新」場(chǎng)景，為了能讓新用戶得到好處（紅包、優(yōu)惠券、更好看的內(nèi)容等）。通常會(huì)讓新用戶下載產(chǎn)品 APP 領(lǐng)取。而由于 Android 與 iOS 的下載方式不同，會(huì)帶來(lái)不同的交互狀態(tài)和產(chǎn)品邏輯。

Android ：可以在當(dāng)前頁(yè)面（后臺(tái)）下載，也可以在應(yīng)用商店下載；過(guò)程中可以顯示進(jìn)度，且允許用戶暫停下載；下載完成后調(diào)起安裝頁(yè)面，用戶可以取消安裝，也可以自動(dòng)安裝……正因?yàn)?Android 下載軟件的各種便捷性，所以才會(huì)帶來(lái)各種交互狀態(tài)：未下載、下載中、暫停中、已下載但未安裝、已安裝。這些都是交互設(shè)計(jì)師需要特別注意的，每個(gè)不同的狀態(tài)背后都會(huì)不同的產(chǎn)品邏輯。

iOS ：只能跳轉(zhuǎn)到 App Store 里下載，所有下載流程和狀態(tài)都是在那完成的，可以脫離開活動(dòng)頁(yè)面，相比于 Android 的下載方式就簡(jiǎn)單很多。跳轉(zhuǎn)的方式可以是全屏幕，也可以是半屏。

軟件更新方式的不同

Android ：由于安卓的開源特性，當(dāng)有新版本時(shí)都會(huì)提示用戶更新，且每個(gè)產(chǎn)品內(nèi)部都帶有「版本更新」入口。而更新的方式可分 2 種：

• 引導(dǎo)更新：彈出提示讓用戶更新 APP ，用戶點(diǎn)擊「更新」按鈕前往應(yīng)用商店更新、或者在當(dāng)前頁(yè)面更新并顯示下載進(jìn)度。
• 強(qiáng)制更新：也是先提示用戶更新，只不過(guò)用戶點(diǎn)擊「更新」按鈕，即調(diào)起軟件安裝頁(yè)面。（前提是產(chǎn)品已在用戶處于 wifi 模式下，將安裝包已下載完成）

iOS ：而 iOS 端出于對(duì)用戶體驗(yàn)的考慮，是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的 iOS 產(chǎn)品，都是沒(méi)有「版本更新」入口的原因（像 QQ 、支付寶、百度網(wǎng)盤等大廠產(chǎn)品）。

即使有，點(diǎn)擊了也直接跳轉(zhuǎn)到 App Store 查看版本情況。且下載渠道都固定在 App Store 里。理所應(yīng)當(dāng)?shù)?，軟件的更新方式也只能?App Store 里進(jìn)行，無(wú)法做到與 Android 一樣后臺(tái)下載、后臺(tái)更新。

文字發(fā)送指令位置的不同

在手機(jī)鍵盤里輸入文字時(shí)，iOS 由于系統(tǒng)的限制，對(duì)文字的發(fā)送指令只能在鍵盤上來(lái)完成，因此 iOS 用戶的交互操作都全部集中在鍵盤右下角。

而 Android 端就靈活很多，不僅可以在鍵盤上執(zhí)行發(fā)送指令，也可以在輸入欄/搜索欄周邊新增操作入口。

退出浮層列表的不同

長(zhǎng)按一張圖片后，都會(huì)彈出一個(gè)列表浮層，因?yàn)?iOS 手機(jī)只有一個(gè)「Home 鍵」 而已，為方便用戶退出浮層才增加了「取消」入口。

而 Android 手機(jī)本來(lái)就有「返回」虛擬鍵，安卓用戶的退出/返回行為都習(xí)慣于通過(guò)虛擬鍵觸發(fā)，所以多做一個(gè)「取消」的意義性不大。

刪除方式的不同

iOS 端一直教育著用戶使用「左滑」刪除列表信息，所有的刪除功能都是支持「左滑」來(lái)實(shí)現(xiàn)的。

而 Android 系統(tǒng)大部分只能通過(guò)「長(zhǎng)按」來(lái)觸發(fā)編輯狀態(tài)，其中就包括了刪除功能。

不過(guò)現(xiàn)在也有極少數(shù)的產(chǎn)品，正在逐漸打破這兩端間的「刪減」界限，比如網(wǎng)易郵箱（Android）就做到了左滑刪除信息。

消息推送機(jī)制的不同

當(dāng)我們第一次打開產(chǎn)品、允許了獲取消息通知的權(quán)限后，所有的信息傳輸都會(huì)基于服務(wù)器進(jìn)行推送。而兩端在這塊的推送機(jī)制又有所不同：

iOS ：所有新信息都會(huì)實(shí)時(shí)推送到你的手機(jī)里，即使你關(guān)閉了軟件，還是一樣會(huì)收到提示。就算是你處于斷網(wǎng)狀態(tài)，信息也會(huì)先儲(chǔ)存于蘋果服務(wù)器，等你聯(lián)網(wǎng)時(shí)再一次性把收到的信息推送給你。既釋放手機(jī)內(nèi)存，又不會(huì)讓用戶遺漏有新消息。

Android ：而安卓則不同，你若退出了產(chǎn)品，數(shù)據(jù)的推送只有等你再次打開產(chǎn)品時(shí)，才會(huì)通知你有多少新信息。雖然減少了對(duì)用戶的干擾性，但也增加了服務(wù)器數(shù)據(jù)儲(chǔ)存的壓力，還容易耽誤用戶接收新消息。

復(fù)制文字后，剪切板狀態(tài)的不同

也就是我們手機(jī)的搜狗輸入法鍵盤，在微信聊天內(nèi)、手機(jī)短信里復(fù)制了一段內(nèi)容后，由于 Android 與 iOS 的平臺(tái)特性差異，會(huì)給兩端用戶帶來(lái)不同的交互差異。

iOS ：復(fù)制完文字后，打開輸入法鍵盤會(huì)顯示來(lái)自剪切板的文字內(nèi)容。用戶只需點(diǎn)擊，即可將文字復(fù)制在搜索欄、輸入欄等需要文字填寫的操作區(qū)域里，無(wú)需觸發(fā)「粘貼」操作。

Android ：而有些安卓機(jī)（如小米/錘子/樂(lè)視等)，無(wú)論你復(fù)制了什么信息（文字、數(shù)字、網(wǎng)址等），都很難實(shí)現(xiàn)輸入法里的「剪切板」功能。用戶需要觸發(fā)「粘貼」功能，才能輸入剛剛的復(fù)制內(nèi)容。

而對(duì)于特定的信息類型：如網(wǎng)址。用戶復(fù)制網(wǎng)址往往都帶有極強(qiáng)的目標(biāo)性、搜索性，一些瀏覽器產(chǎn)品會(huì)預(yù)判用戶這一操作行為，將復(fù)制的網(wǎng)址前置展示出來(lái)，以抵消 Android 端對(duì)于復(fù)制文字帶來(lái)的系統(tǒng)限制。如 QQ 瀏覽器（安卓端）就有 2 種解法方法：

方法1：利用安卓系統(tǒng)的消息權(quán)限，在手機(jī)界面的頂部彈出網(wǎng)址欄提示，無(wú)論是在微信還是短信中，復(fù)制網(wǎng)址后都能快速地觸達(dá)目標(biāo)。

方法2：復(fù)制網(wǎng)址后打開搜索功能，會(huì)將網(wǎng)址自動(dòng)定位并粘貼到搜索欄中，便于用戶查詢。

而 UC 和百度也有類似的解決辦法：將復(fù)制后的廣泛信息（文字/數(shù)字/網(wǎng)址/郵箱地址等等）嵌入在搜索框下方，用戶點(diǎn)擊就能搜索。

這也是一種妥當(dāng)?shù)慕鉀Q方法，因?yàn)橛脩艨蓮?fù)制的信息類型特別廣泛、目標(biāo)不是很清晰。無(wú)法準(zhǔn)確判斷出用戶一定會(huì)有搜索訴求。所以才將復(fù)制后的信息放在搜索框下面，而不是自動(dòng)粘貼到搜索框中，既考慮了用戶目標(biāo)，又兼顧了操作效率。

總結(jié)

以上就是 Android 與 iOS 的差異總結(jié)，若有描述得不當(dāng)請(qǐng)多指教！下面是總結(jié)文件。

作者：土撥鼠

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎ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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)、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ì)公司

更多精彩文章：

手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之二：三分鐘搞懂，iPhone 12發(fā)布后的設(shè)計(jì)尺寸調(diào)整

手機(jī)及小程序界面設(shè)計(jì)之三：從 Dribbble 高贊的 828 個(gè)作品中，總結(jié)出 2022 設(shè)計(jì)趨勢(shì)

手機(jī)及小程序界面設(shè)計(jì)之四：手機(jī)屏幕越來(lái)越大，UX設(shè)計(jì)師面臨哪些挑戰(zhàn)？

手機(jī)及小程序界面設(shè)計(jì)之五：連高手都容易忽略的9個(gè) iOS 與 Android 間的交互差異

手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之七：基礎(chǔ)科普！超全面的 UI 元素尺寸設(shè)置指南（上）

手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！

手機(jī)及小程序界面設(shè)計(jì)之九：手機(jī)端表格設(shè)計(jì)：我整理了一套循序漸進(jìn)的處理方法

手機(jī)及小程序界面設(shè)計(jì)之十：超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄

@布萊恩臣 ：iPhone X 在 2017 年上市以來(lái)，全面屏手機(jī)就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機(jī)型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現(xiàn)，物理 Home 鍵都被舍棄改成虛擬按鍵，甚至是沒(méi)有虛擬按鍵的手勢(shì)滑動(dòng)操作。

而這些手機(jī)都有一個(gè)共同的特點(diǎn)，就是屏幕尺寸越來(lái)越大。屏幕尺寸變大后，手握手機(jī)的方式和界面交互操作方式也隨之改變，那對(duì)于設(shè)計(jì)而言，是否也應(yīng)該隨之進(jìn)行改變呢？

拇指的操作范圍

想單手點(diǎn)擊屏幕的操作，需要手足夠靈活進(jìn)行一輪操作才能夠到屏幕上方，過(guò)程中稍有不慎，手機(jī)隨時(shí)會(huì)砸地上。作者的手機(jī)屏幕已經(jīng)修了幾次，差不多趕上一臺(tái)二手機(jī)的價(jià)格了。

在 2013 年，國(guó)外設(shè)計(jì)師 Steven Hoober 發(fā)表了一篇《手機(jī)界面設(shè)計(jì)》的研究報(bào)告中，對(duì)一千三百名手機(jī)使用者進(jìn)行量化研究數(shù)據(jù)：

據(jù)當(dāng)時(shí)研究的數(shù)據(jù)可以看出，有近半的用戶是單手使用手機(jī)（現(xiàn)在肯定不止）。當(dāng)用戶單手操作的時(shí)候，實(shí)際拇指可以觸摸到的區(qū)域是如下圖這樣的。綠色區(qū)域是拇指的正常操作區(qū)域，黃色區(qū)域是拇指能觸碰到的最大限度范圍，紅色區(qū)域是觸摸比較困難的區(qū)域。

然而這份研究報(bào)告的數(shù)據(jù)是在 2013 年發(fā)布，當(dāng)時(shí)還沒(méi)有全面屏的出現(xiàn)，如果把上面研究結(jié)論的區(qū)域，套用到如今的手機(jī)屏幕尺寸上，頂部的紅色區(qū)域會(huì)占更大比例。以 iPhone 11 尺寸比例作為參考，如下圖：

拇指可操作范圍大約在 3 分之 2 的區(qū)域，可見想要觸碰到紅色區(qū)域是有一定難度的。也正是因?yàn)檫@份報(bào)告只適合當(dāng)時(shí)的手機(jī)市場(chǎng)情況，在當(dāng)今已經(jīng)不適用了，因此需要重新去考慮如何為大屏幕手機(jī)進(jìn)行界面設(shè)計(jì)。

為拇指區(qū)域設(shè)計(jì)

根據(jù) 2020 年手機(jī)UX設(shè)計(jì)趨勢(shì)，大屏幕設(shè)計(jì)將會(huì)成為熱點(diǎn)。根據(jù)數(shù)據(jù)報(bào)告中有說(shuō)明，2018 年 10 月使用大屏手機(jī)的用戶比例是16.3%，到 2019 年 12 月，該數(shù)據(jù)已經(jīng)上升到 41%，并且會(huì)在未來(lái)更多新機(jī)型的出現(xiàn)中持續(xù)上漲。

那隨著大屏幕手機(jī)的普及，就意味著設(shè)計(jì)師在設(shè)計(jì)界面的時(shí)候，要為大屏幕手機(jī)的使用場(chǎng)景進(jìn)行界面調(diào)整，避免用戶難以使用的體驗(yàn)問(wèn)題。以下是我整理的一些設(shè)計(jì)建議方案：

1. 頭部區(qū)域設(shè)計(jì)更高

通過(guò)將標(biāo)題欄的信息區(qū)域放大，盡量把主要操作內(nèi)容向拇指區(qū)域靠近。

2. 常用導(dǎo)航與操作居于底部

比起導(dǎo)航欄放在頂部，更適合大屏幕手機(jī)的方式是將導(dǎo)航和重要操作盡量往屏幕底部放置。

3. 手勢(shì)操作頁(yè)面切換與返回

抖音和 Instagram story 等短視頻應(yīng)用界面都是通過(guò)手勢(shì)滑動(dòng)屏幕的方式，對(duì)頁(yè)面進(jìn)行切換，操作的學(xué)習(xí)成本很低，而且主要操作也在屏幕底部。這種操作方式也會(huì)在今年越來(lái)越多地被使用。

4. 提示彈窗從底部升起

常用的彈窗，很多是設(shè)計(jì)在屏幕中間彈出，為了適配大屏幕，不妨嘗試從底部彈出，關(guān)鍵選項(xiàng)都能輕松選擇，提高轉(zhuǎn)化率。

5. 使用大卡片

屏幕尺寸變大以后，使用整張大卡片可以讓用戶瀏覽內(nèi)容更專注，大面積的配圖和留白，也能提高用戶的點(diǎn)擊欲望。

除此以外，作為手機(jī)廠商，在發(fā)布大屏幕手機(jī)的時(shí)候，就有對(duì)界面操作做了一些對(duì)應(yīng)系統(tǒng)級(jí)的設(shè)計(jì)調(diào)整，比如界面下拉懸停，鍵盤單手模式，屏幕邊緣滑動(dòng)返回等等。

總結(jié)

大屏幕尺寸已經(jīng)是趨勢(shì)，屏幕大意味著內(nèi)容可以更大限度地得到展示，有利于產(chǎn)品提供更多的服務(wù)，不再糾結(jié)首屏無(wú)法展示完主要內(nèi)容。在這個(gè)信息爆炸的時(shí)代，用戶也不再滿足于小屏幕的瀏覽方式。可以說(shuō)，大屏幕已經(jīng)是無(wú)法改變的趨勢(shì)。與其擔(dān)心問(wèn)題到來(lái)，設(shè)計(jì)師更應(yīng)該思考如何去適應(yīng)產(chǎn)品的快速迭代，不斷更新自己的設(shè)計(jì)思維模型，更全面思考問(wèn)題，產(chǎn)出更合理、體驗(yàn)更好的設(shè)計(jì)方案。

希望本文內(nèi)容可以對(duì)你有所啟發(fā)。

作者：布萊恩臣

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎ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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)、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ì)公司

更多精彩文章：

手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之二：三分鐘搞懂，iPhone 12發(fā)布后的設(shè)計(jì)尺寸調(diào)整

手機(jī)及小程序界面設(shè)計(jì)之三：從 Dribbble 高贊的 828 個(gè)作品中，總結(jié)出 2022 設(shè)計(jì)趨勢(shì)

手機(jī)及小程序界面設(shè)計(jì)之四：手機(jī)屏幕越來(lái)越大，UX設(shè)計(jì)師面臨哪些挑戰(zhàn)？

手機(jī)及小程序界面設(shè)計(jì)之五：連高手都容易忽略的9個(gè) iOS 與 Android 間的交互差異

手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則：菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之七：基礎(chǔ)科普！超全面的 UI 元素尺寸設(shè)置指南（上）

手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！

手機(jī)及小程序界面設(shè)計(jì)之九：手機(jī)端表格設(shè)計(jì)：我整理了一套循序漸進(jìn)的處理方法

手機(jī)及小程序界面設(shè)計(jì)之十：超詳細(xì)解讀：UI導(dǎo)航設(shè)計(jì)不僅僅指的是導(dǎo)航欄

近年來(lái)，互聯(lián)網(wǎng)進(jìn)入下半場(chǎng)，C 端流量紅利逐漸消退，很多企業(yè)轉(zhuǎn)向了 B 端服務(wù)，隨之而來(lái)的是產(chǎn)品設(shè)計(jì)者的轉(zhuǎn)型，現(xiàn)在越來(lái)越多的 C 端產(chǎn)品設(shè)計(jì)師開始涉足到 B 端產(chǎn)品的設(shè)計(jì)，這是一個(gè)知識(shí)遷移的過(guò)程，需要認(rèn)識(shí)到這 2 類產(chǎn)品的特點(diǎn)和區(qū)別，你才能夠快速適應(yīng)這個(gè)遷移的過(guò)程。

在互聯(lián)網(wǎng)和信息化高度發(fā)達(dá)的今天，我們都是 B 端和 C 端產(chǎn)品的用戶，能切身體會(huì)到產(chǎn)品的好壞，那么兩個(gè)完全不同類別的產(chǎn)品放在一起時(shí)，會(huì)有什么新發(fā)現(xiàn)呢？今天想通過(guò)自己的設(shè)計(jì)歷程，來(lái)梳理這 2 種產(chǎn)品的區(qū)別和價(jià)值。

C 全稱是 Customer，即消費(fèi)者（泛指用戶）的產(chǎn)品，個(gè)人用戶或終端用戶，使用的是客戶端。例如：微信、網(wǎng)易新聞、網(wǎng)易云音樂(lè)、有道翻譯官、網(wǎng)易考拉等等。

B 全稱是 Business，即商家（泛指企業(yè)）的產(chǎn)品，通常是企業(yè)或商家，為工作或商業(yè)目的而使用的系統(tǒng)型軟件、工具或平臺(tái)。例如：京東云、阿里云、網(wǎng)易云、網(wǎng)易有數(shù)或企業(yè)內(nèi)部的 ERP 系統(tǒng)等等。

相同點(diǎn)

1. 都要給人使用

小到打車、外賣和購(gòu)物軟件，大到邏輯復(fù)雜連產(chǎn)品經(jīng)理有時(shí)候都犯糊涂的企業(yè)級(jí)業(yè)務(wù)系統(tǒng)，無(wú)論個(gè)人用戶，還是企業(yè)用戶，本質(zhì)都是由人來(lái)使用，只不過(guò)產(chǎn)品類型不同。

2. 都要兼顧用戶體驗(yàn)和業(yè)務(wù)之間的平衡

既然是給人來(lái)使用的產(chǎn)品，就要兼顧用戶體驗(yàn)和業(yè)務(wù)之間的平衡。無(wú)論是 C 端或 B 端，誰(shuí)都不愿意使用一個(gè)不好用且耽誤效率的產(chǎn)品，當(dāng)然還是會(huì)有一些用戶體驗(yàn)較差，用戶又不得不使用的產(chǎn)品存在，因?yàn)樗赡芫哂幸欢ǖ膲艛嘈再|(zhì)，或者在某些場(chǎng)景下被強(qiáng)迫使用，用戶本身是別無(wú)選擇的。但不能說(shuō)用戶體驗(yàn)就不重要，只能說(shuō)對(duì)于業(yè)務(wù)更復(fù)雜、為工作而生的 B 端產(chǎn)品來(lái)說(shuō)，想要做好這一點(diǎn)會(huì)比 C 端更困難。

3. 都要堅(jiān)守做產(chǎn)品設(shè)計(jì)的核心思想

對(duì)于每一個(gè)產(chǎn)品設(shè)計(jì)者來(lái)說(shuō)，「在什么場(chǎng)景下為怎樣的用戶（客戶）采取什么方法解決哪些問(wèn)題」，這句話是再熟悉不過(guò)了，也是經(jīng)常討論或掛在嘴邊的話。可是面對(duì)工作中蜂擁而至、突如其來(lái)的事情時(shí)，卻又常常容易忽略掉。就像是一個(gè)人如果太餓了，只顧著吃飯?zhí)铒柖亲?，卻忘記了吃了什么。

不同點(diǎn)

1. 目標(biāo)用戶

首先，我們明確一下 C 端產(chǎn)品和 B 端產(chǎn)品的用戶是誰(shuí)，產(chǎn)品給哪些人用？

C端

產(chǎn)品是面向個(gè)人用戶，服務(wù)于每個(gè)脫離「企業(yè)」場(chǎng)景之外的人，也就是生活場(chǎng)景。他需要做更細(xì)致的用戶畫像，比如：用戶的年齡、職業(yè)、文化程度、收入水平、工作單位、個(gè)人喜好等都會(huì)影響到功能設(shè)計(jì)，每個(gè)人都可以對(duì)產(chǎn)品提出優(yōu)化意見，這個(gè)意見只代表個(gè)人，而不是任何社會(huì)群體，但這些意見只要被產(chǎn)品經(jīng)理驗(yàn)證是可以提升產(chǎn)品價(jià)值的，就可能會(huì)排進(jìn)迭代周期內(nèi)。

相對(duì)來(lái)說(shuō)，C 端產(chǎn)品不管從服務(wù)范圍、滲透力、密度都遠(yuǎn)遠(yuǎn)超過(guò) B 端，原因是因?yàn)樗嫦虻挠脩羧后w更廣泛，用一個(gè)核心功能解決大多數(shù)人的一個(gè)主要訴求，我們每個(gè)人隨時(shí)隨地都可以成為 C 端用戶，可選用的產(chǎn)品也非常多，產(chǎn)品團(tuán)隊(duì)更多的思考是讓我們更長(zhǎng)時(shí)間的停留在產(chǎn)品上面，讓用戶有更高的粘性和活躍度，需要利用產(chǎn)品的特色功能和優(yōu)質(zhì)體驗(yàn)來(lái)吸引我們，并解決我們?cè)谏畋憷颓榫w方面的問(wèn)題，讓我們享受這些服務(wù)并為此買單。

B端

產(chǎn)品則是服務(wù)于企業(yè)用戶，這個(gè)「企業(yè)」可以是一個(gè)組織、商家、團(tuán)隊(duì)，是某種經(jīng)營(yíng)的主體，當(dāng)然使用者也是個(gè)人，不過(guò)這個(gè)「?jìng)€(gè)人」是代表了組織中的某個(gè)角色而已。這類人無(wú)論性別、年齡、地區(qū)有何差異，他們都是一類角色，比如企業(yè)中的項(xiàng)目總監(jiān)、項(xiàng)目經(jīng)理、項(xiàng)目顧問(wèn)，我們的產(chǎn)品要提供給這類角色使用，而不是某個(gè)人使用。假設(shè)我們做一個(gè)項(xiàng)目管理系統(tǒng)，主要提供給項(xiàng)目經(jīng)理使用，張三和李四都是產(chǎn)品的用戶，也許張三在工作之外是個(gè)活潑少女，喜歡刷短視頻、購(gòu)物、旅游，被簡(jiǎn)約的界面風(fēng)格所折服；李四卻是個(gè)內(nèi)向宅男，喜歡宅在家里打游戲、看書，喜歡炫酷的界面風(fēng)格，但他們的個(gè)人喜好都無(wú)法影響系統(tǒng)功能的設(shè)計(jì)。這里說(shuō)的功能設(shè)計(jì)的主要依據(jù)就是企業(yè)對(duì)項(xiàng)目經(jīng)理這個(gè)角色的業(yè)務(wù)定位和考核目標(biāo)，他們共同的角色都是項(xiàng)目經(jīng)理，所以系統(tǒng)只需要提供項(xiàng)目經(jīng)理相應(yīng)的功能和體驗(yàn)即可。

所以功能設(shè)計(jì)需要是多個(gè)業(yè)務(wù)功能滿足特定人群的多個(gè)需求、多個(gè)場(chǎng)景，他所面對(duì)的用戶具有特定的職業(yè)屬性，也就是說(shuō)他的用戶只會(huì)在「工作」的場(chǎng)景下使用他，有些還是強(qiáng)制使用，個(gè)人沒(méi)有選擇余地，因?yàn)楦顿M(fèi)者是企業(yè)領(lǐng)導(dǎo)，而不是基層員工，而使用最多的反而是基層員工，所以 B 端產(chǎn)品的用戶關(guān)系會(huì)比 C 端更集中、更垂直，做功能設(shè)計(jì)時(shí)，要權(quán)衡付費(fèi)者和使用者之間的利弊，他們要求產(chǎn)品的時(shí)效性，注重如何滿足企業(yè)用戶的既定目標(biāo)。

2. 使用場(chǎng)景

C端

它會(huì)存在于生活中的各種場(chǎng)景下，而且自由度非常高，當(dāng)然也包含工作場(chǎng)景，比如我在坐地鐵時(shí)刷一下朋友圈、在睡前打開網(wǎng)易云聽歌、在工作間隙上點(diǎn)了一份外賣、周末變身肥宅吃了一天雞等等，所以 C 端產(chǎn)品的使用場(chǎng)景是碎片化的，用戶并不會(huì)連續(xù)幾個(gè)小時(shí)一直盯著同一個(gè) APP，而是在多個(gè)應(yīng)用之間隨意切換。比如落地成盒了會(huì)打開微信回復(fù)消息，歌聽乏了去看看電子書等等，所以我們看到一些比較優(yōu)秀的產(chǎn)品，他們都在內(nèi)容和用戶體驗(yàn)上下足了功夫，目的就是為了留存用戶，減少跳出率。因此 C 端產(chǎn)品更講究操作直接，信息簡(jiǎn)潔，有娛樂(lè)性、社交性、可傾訴性，是為了解決生活上的問(wèn)題而生，寄生于我們的情緒之中，被產(chǎn)品的情感化設(shè)計(jì)所折服。

B端

與 C 端正好相反，他們是為了工作而使用這個(gè)產(chǎn)品，因此他們必然要長(zhǎng)時(shí)間使用產(chǎn)品，而且是沉浸式使用，同時(shí)使用頻率是可預(yù)測(cè)的，他們并不能帶著個(gè)人喜好去使用，不能說(shuō)這個(gè)產(chǎn)品太難用了，我就可以不用了。比如上下班打卡，公司要求用 A 產(chǎn)品，你覺(jué)得不好用，就推薦大家使用 B 產(chǎn)品，對(duì)不起，雖然你是產(chǎn)品真正的使用者，但決策權(quán)和付費(fèi)者是高層領(lǐng)導(dǎo)。個(gè)人的情緒左右不了使用場(chǎng)景。所以 B 端產(chǎn)品更講究嚴(yán)謹(jǐn)?shù)牧鞒淘O(shè)計(jì)、貼近現(xiàn)實(shí)的場(chǎng)景面積、低風(fēng)險(xiǎn)、高效率、數(shù)據(jù)精準(zhǔn)。它是為了解決工作上的問(wèn)題而生，寄生于企業(yè)制度之中，被產(chǎn)品的用戶體驗(yàn)影響著工作效率。

3. 業(yè)務(wù)和本質(zhì)

C端

滿足自我情緒。

比如社交類產(chǎn)品就是構(gòu)建「聊天」方式，這個(gè)聊天可以是語(yǔ)音、文字、圖片、分享等形式，解決個(gè)人在情感、空間、工作、虛榮、欲望等情緒問(wèn)題。在核心功能之外還可以附加一些「增值功能」，比如設(shè)置好友查看權(quán)限、購(gòu)買 VIP 等，這都是為了提高產(chǎn)品的使用價(jià)值和盈利口徑。

因此 C 端產(chǎn)品通常只有一個(gè)核心功能（比如音樂(lè)類 app 的核心功能就是聽音樂(lè)，閱讀類 app 的核心功能就是閱讀，游戲類 app 的核心功能就是游戲），多個(gè)輔助功能，核心功能影響著產(chǎn)品的特色、定位、調(diào)性，而合理的輔助功能則會(huì)讓產(chǎn)品保值增值、增強(qiáng)產(chǎn)品與產(chǎn)品之間的差異化，如果去除這些附加功能，產(chǎn)品的體驗(yàn)會(huì)受到一定影響，但實(shí)際上并不會(huì)阻礙用戶使用核心功能。例如：去除了評(píng)論功能，但用戶依舊可以聽音樂(lè)；去除了打賞功能，同樣也不影響用戶閱讀文章和作者寫文章；去除了分享，用戶還是可以愉快地吃雞。

所以 C 端產(chǎn)品的特性可以歸納為「分享」，前面所提到的「評(píng)論」、「打賞」其實(shí)都基于「分享」的場(chǎng)景下，即：讓他人聽見「我」的聲音、看見「我」的想法、贊同「我」的觀點(diǎn)，滿足雙方的情緒設(shè)定。

盈利方式：內(nèi)容付費(fèi)、廣告付費(fèi)、平臺(tái)抽成、增值服務(wù)（VIP、卡券、權(quán)限等）。

B端

共同完成一個(gè)目標(biāo)。

日常使用產(chǎn)品工作的人，自己是無(wú)法獨(dú)立完成一個(gè)任務(wù)的，他需要和周圍的人協(xié)同完成一個(gè)任務(wù)流程的閉環(huán)，比如我發(fā)起一個(gè)請(qǐng)假申請(qǐng)，以「完成」和「打回」作為流程結(jié)點(diǎn)，根據(jù)企業(yè)制度設(shè)定，這個(gè)流程中會(huì)涉及到 3 種角色：發(fā)起人（我）、審核人（上級(jí)）、歸檔人（人事或行政）。

B 端產(chǎn)品的業(yè)務(wù)邏輯是復(fù)雜和多變的，尤其是權(quán)限系統(tǒng)，往往每個(gè)人都是流程中一個(gè)非常小的部分，就如上段所說(shuō)，需要進(jìn)行協(xié)作使用，這里不能窮舉出每個(gè)業(yè)務(wù)，因?yàn)椴煌墓緲I(yè)務(wù)則完全不一樣，公司可以對(duì)該產(chǎn)品當(dāng)中的功能選擇性購(gòu)買或租賃。而對(duì)實(shí)際用戶來(lái)說(shuō)，這個(gè)產(chǎn)品沒(méi)有功能的層級(jí)，自己負(fù)責(zé)哪一塊，哪一塊就是他的主要任務(wù)、經(jīng)常使用的功能。也就是說(shuō)，從功能架構(gòu)上看，這些核心功能都是扁平的，他們分配到各種使用角色的手中，沒(méi)有先后排名。

而 B 端產(chǎn)品的本質(zhì)則是滿足用戶的工作需要，但這從來(lái)不是單一的功能就可以滿足的，這里一定包括了多項(xiàng)功能的組合及嵌套應(yīng)用支持。當(dāng)用戶需要繪制多種不同類型的圖表時(shí)，產(chǎn)品就絕不能只提供單項(xiàng)類型的圖表功能。比如：甲公司的產(chǎn)品只能畫柱狀圖，而乙公司的產(chǎn)品卻能畫 10 種甚至更多不同類型的圖表，以適應(yīng)不同需求場(chǎng)景，若你是客戶，你會(huì)選擇購(gòu)買哪個(gè)產(chǎn)品呢？

盈利方式：按功能模塊付費(fèi)、按使用人數(shù)付費(fèi)、需求付費(fèi)、后期維護(hù)費(fèi)用。

4. 產(chǎn)品需求

C端

更多滿足使用者的日常生活需求，所以需求來(lái)源會(huì)多樣化一些，因?yàn)槟康亩际抢?、促活、留存、轉(zhuǎn)化、裂變。像競(jìng)品分析、數(shù)據(jù)分析、用戶行為分析都可能幫助挖掘出有價(jià)值的需求。我們也有很多時(shí)候因?yàn)榕笥言谟眠@個(gè)產(chǎn)品，或者看到產(chǎn)品的廣告才下載這個(gè)應(yīng)用，但下載以后用來(lái)干什么，那只有等我們有訴求的時(shí)候才會(huì)再次打開應(yīng)用，這個(gè)訴求可能是空虛、無(wú)聊、想購(gòu)物了等等。所以很多普通用戶根本不知道自己的真實(shí)需求是什么，甚至有時(shí)陰差陽(yáng)錯(cuò)打開某應(yīng)用，然后被里面的買家秀、活動(dòng)促銷等運(yùn)營(yíng)模塊所吸引，最后產(chǎn)生購(gòu)買欲望。

因此，C 端產(chǎn)品就是站在上帝的視角，需求直接來(lái)源于用戶的行為和反饋，從用戶這里獲取最真實(shí)的訴求。產(chǎn)品設(shè)計(jì)者則需要關(guān)注市場(chǎng)流行趨勢(shì)，關(guān)注用戶偏好及意見，將有效的分析結(jié)果轉(zhuǎn)化為產(chǎn)品需求，再輸出功能，引導(dǎo)用戶產(chǎn)生共鳴，并通過(guò)一些運(yùn)營(yíng)手段，增加轉(zhuǎn)化（變現(xiàn)）概率和裂變的輻射面積。

B端

B 端產(chǎn)品更多是基于已有的「業(yè)務(wù)」形態(tài)，把傳統(tǒng)線下工作，通過(guò)程序化、系統(tǒng)化、信息化轉(zhuǎn)換為線上行為，使業(yè)務(wù)的流轉(zhuǎn)效率更高，辦公成本更低。所以更要求產(chǎn)品設(shè)計(jì)者能熟練掌握相應(yīng)的行業(yè)知識(shí)、捋清業(yè)務(wù)邏輯。

需求一般來(lái)源于產(chǎn)品戰(zhàn)略定位、各部門對(duì)接、租戶（客戶、外部付費(fèi)者）的個(gè)性需求，有些靠銷售企業(yè)軟件盈利的公司為了把職責(zé)再細(xì)分，通常會(huì)配置指定的一線顧問(wèn)來(lái)對(duì)接租戶的需求及跟進(jìn)服務(wù)，然后再將需求反饋到負(fù)責(zé)這個(gè)產(chǎn)品的產(chǎn)品經(jīng)理，產(chǎn)品經(jīng)理在這里就是負(fù)責(zé)收集需求、分析、規(guī)劃、設(shè)定開發(fā)優(yōu)先級(jí)，然后交由開發(fā)團(tuán)隊(duì)進(jìn)行接下來(lái)的產(chǎn)品設(shè)計(jì)等工作。

B 端產(chǎn)品的客戶可能不在網(wǎng)上，而是在全國(guó)各地的企業(yè)里，往往需要通過(guò)老板和銷售才能接觸到客戶，這會(huì)造成不能獲取真實(shí)的客戶需求，我把這種現(xiàn)象叫做「需求斷層」。所以最好的調(diào)研方式就是做一個(gè)「面對(duì)面」的用戶訪談，可以真實(shí)的面對(duì)面、也可以是視頻或者電話溝通，這能容易把復(fù)制的需求溝通清楚，而不是通過(guò)郵件和文字。因?yàn)槟繕?biāo)用戶有固定的職業(yè)領(lǐng)域，有時(shí)候你所設(shè)計(jì)的流程你認(rèn)為最合理，但和他們實(shí)際使用起來(lái)卻有很大的差異，所以和真實(shí)用戶面對(duì)面聊聊他們的工作習(xí)慣和業(yè)務(wù)規(guī)則，這一定能夠幫助到你設(shè)計(jì)產(chǎn)品。

很多時(shí)候，做的產(chǎn)品只是為了滿足付費(fèi)者（即高層領(lǐng)導(dǎo)）的需求，而不是實(shí)際用戶（即基層工作者），導(dǎo)致實(shí)際用戶吐槽產(chǎn)品易用性差，其實(shí)是改變了他們的工作習(xí)慣而引發(fā)的抱怨，然而領(lǐng)導(dǎo)卻達(dá)到了監(jiān)控和實(shí)時(shí)獲取數(shù)據(jù)的目的。因此在收集這些需求時(shí)，會(huì)受到來(lái)自付費(fèi)者和真實(shí)用戶 2 種角色聲音的影響，這就需要產(chǎn)品設(shè)計(jì)者具有更理性的思考方式和處理手段。

5. 產(chǎn)品思維

C端-流量思維

做 C 端產(chǎn)品設(shè)計(jì)，我們一切行為的出發(fā)點(diǎn)，都是流量，流量直接影響著變現(xiàn)，無(wú)論是外部的流量引入、各環(huán)節(jié)的轉(zhuǎn)化、留存策略，還是產(chǎn)品體驗(yàn)的提升、流程的優(yōu)化、資源的投入，我們都是在為提升流量、轉(zhuǎn)化流量服務(wù)。我們經(jīng)常做的各種活動(dòng)專題、分析各類數(shù)據(jù)，去追求所謂的情懷、情感化設(shè)計(jì)，其根本還是為了引流，想方設(shè)法從全網(wǎng)獲取流量，從而來(lái)提升產(chǎn)品的轉(zhuǎn)化率，這是一切 C 端產(chǎn)品的宗旨，沒(méi)有流量的產(chǎn)品只是一個(gè)花瓶。

B端-效率思維

對(duì)于 B 端產(chǎn)品，我們更多關(guān)注的是效率，不管是面向外部客戶，還是服務(wù)于公司內(nèi)部各業(yè)務(wù)角色/部門，B 端產(chǎn)品要解決的始終都是如何提升企業(yè)的運(yùn)營(yíng)效率（即工作效率），解決的是「開源節(jié)流」中的節(jié)流部分。所以我們會(huì)通過(guò)流程優(yōu)化、工具打磨、策略調(diào)整，去提升各個(gè)環(huán)節(jié)的人效，降低各方面成本，從根本上提升企業(yè)效率，這點(diǎn)從我們做流程設(shè)計(jì)的時(shí)候能清晰的反應(yīng)出來(lái)，設(shè)計(jì)目標(biāo)都是在合理且效率的基礎(chǔ)上，讓用戶舒適的完成這個(gè)流程，并不是說(shuō)企業(yè)投入資金購(gòu)買了一款數(shù)據(jù)統(tǒng)計(jì)軟件，結(jié)果數(shù)據(jù)統(tǒng)計(jì)還沒(méi)有人工來(lái)的精準(zhǔn)、方便。

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

C端

在 C 端產(chǎn)品設(shè)計(jì)的過(guò)程中，我們首先要明確核心功能是給哪些目標(biāo)用戶使用的，也就是我們最初的設(shè)計(jì)目標(biāo)是什么，需要保持產(chǎn)品的場(chǎng)景多樣化，突出核心功能，因?yàn)?C 端產(chǎn)品的同質(zhì)化現(xiàn)象非常嚴(yán)重，因此我們要好好思考，如何將我們的產(chǎn)品在眾多產(chǎn)品中脫穎而出，如何讓產(chǎn)品的品牌設(shè)計(jì)輻射到更多的地方，如何在功能和體驗(yàn)上尋找新的亮點(diǎn)。

再者就是要保持良好運(yùn)營(yíng)手段，因?yàn)?C 端的用戶是自由的（忠誠(chéng)度低，隨時(shí)可以換產(chǎn)品使用），所以需要通過(guò)一些運(yùn)營(yíng)手段來(lái)綁定用戶的留存。C 端產(chǎn)品的本質(zhì)都是一個(gè)核心功能，所以設(shè)計(jì)師在產(chǎn)品初期時(shí)就需要全盤考慮，哪個(gè)功能是產(chǎn)品最核心、最不可丟棄的，哪個(gè)功能是錦上添花，為了提升產(chǎn)品的附加價(jià)值的。因此，我們拋開這些基本原則，還需要對(duì)用戶行為進(jìn)行塑造，塑造用戶行為就是「綁架」用戶。

把握關(guān)鍵時(shí)機(jī)：把握用戶在使用 C 端產(chǎn)品過(guò)程中注意力的關(guān)鍵時(shí)機(jī)，用戶在使用產(chǎn)品的過(guò)程中，注意力的分配是不均等的，比如同類產(chǎn)品太多，先下載 2、3 個(gè)試用，進(jìn)到產(chǎn)品里不知道干什么，隨便逛逛，逛著逛著就刪除 APP 了，這就是典型的沒(méi)有把握用戶關(guān)鍵時(shí)機(jī)，沒(méi)有提供給用戶有用的東西，敗在了產(chǎn)品策略和本能層次。沒(méi)有在第一時(shí)間讓用戶知道產(chǎn)品是干什么的？能從中得到什么？亮點(diǎn)內(nèi)容在哪里？是如何引導(dǎo)我使用的？那么作為產(chǎn)品的界面設(shè)計(jì)師就需要知道在哪些關(guān)鍵節(jié)點(diǎn)上，用戶的注意力是集中的，哪些節(jié)點(diǎn)是分散的，如何引導(dǎo)用戶關(guān)注這個(gè)點(diǎn)。

所以通過(guò)研究這些用戶在使用過(guò)程中的關(guān)鍵節(jié)點(diǎn)，可以抓住關(guān)鍵時(shí)機(jī)，來(lái)達(dá)到塑造用戶行為的目的。那么，這些所謂的「關(guān)鍵」時(shí)機(jī)反映在注意力理論下，對(duì)應(yīng)的就是注意的「中心點(diǎn)」，反之為「分散點(diǎn)」。用戶在使用產(chǎn)品的時(shí)候，注意力總是從中心和邊緣來(lái)回切換。

舉個(gè)例子：讓交互設(shè)計(jì)師在信息流頁(yè)面做一個(gè)閱讀提示，用于用戶在更新消息流之后的場(chǎng)景，目的是能讓用戶發(fā)現(xiàn)更新之前的閱讀位置，并在此處刷新，不讓重復(fù)信息出現(xiàn)，不影響用戶體驗(yàn)。那么下圖中哪個(gè)方案更合適？

中心點(diǎn)：「上次看到這里，點(diǎn)擊刷新」的提示消息出現(xiàn)在此位置和時(shí)機(jī)是有講究的，由于它們出現(xiàn)在舊消息之前，新刷新的消息之后，用戶的閱讀注意力正在從新的信息流轉(zhuǎn)到舊的信息流，中間會(huì)出現(xiàn)注意力斷層的中心點(diǎn)。所以在此出現(xiàn)的提示更容易被用戶察覺(jué)，提示內(nèi)容才能發(fā)揮更大的價(jià)值，因此 A 方案最合適。

分散點(diǎn)：B方案中消息提示在用戶刷新之后出現(xiàn)在底部，雖然該方式在 toast 的層級(jí)里，干擾性是最低的，因?yàn)樗奈恢迷诘撞?，?huì)適當(dāng)減少用戶瀏覽內(nèi)容時(shí)所產(chǎn)生的干擾，但是從用戶行為路徑上看，顯然不合適，用戶的行為是要翻閱信息流，而它的出現(xiàn)方式與「翻閱」的行為是相違背的，反觀還是會(huì)阻礙用戶的瀏覽，雖然它的感知程度很強(qiáng)，能讓用戶第一眼發(fā)現(xiàn)這個(gè)貼心的功能，但是出現(xiàn)的時(shí)機(jī)不對(duì)，這就影響了用戶體驗(yàn)。

增加趣味性：所謂趣味性，是指能引發(fā)用戶的正面情緒，比如使人感到愉悅、有意思，能感染人、打動(dòng)人、教育人，這是能夠引起用戶注意力的重要因素。

增加產(chǎn)品趣味性的途徑有很多種，就拿微信 H5 為例：

隨著 H5 頁(yè)面技術(shù)上的突破和微信推廣程序井噴式的發(fā)展，微信 H5 推廣領(lǐng)域已經(jīng)成為各大 C 端產(chǎn)品的必爭(zhēng)之地。推廣的形式可以基于 H5 的框架進(jìn)行多種形式的拓展，比如：小游戲、邀請(qǐng)好友贏紅包、小程序等等。微信端 H5 推廣的優(yōu)點(diǎn)就是將推廣的趣味性融入產(chǎn)品當(dāng)中，將營(yíng)銷手段運(yùn)用在用戶使用過(guò)程中。這樣做的好處顯而易見，通過(guò)趣味的游戲程序打開市場(chǎng)的缺口，用戶基于推廣程序的趣味性，有很強(qiáng)的分享動(dòng)機(jī)。

說(shuō)到分享動(dòng)機(jī)，就不得不說(shuō)最近刷爆朋友圈的《能進(jìn)***的個(gè)個(gè)都是人才》，這個(gè)長(zhǎng)圖就很有意思，每段內(nèi)容都能讓用戶產(chǎn)生共鳴，根本想不到這是篇廣告推文，直到最后一小段內(nèi)容才曝光了品牌和產(chǎn)品，但效果顯而易見（短短幾天閱讀量10萬(wàn)+），所以這種趣味性的運(yùn)營(yíng)方式很容易帶動(dòng)用戶去分享，分享即裂變式傳播，而 C 端產(chǎn)品的運(yùn)營(yíng)目的就是引流、裂變。

增加創(chuàng)意性：王者榮耀無(wú)疑是近年來(lái)受眾最廣、用戶最多、盈利最大的線上手游。我們通過(guò)分析這樣一個(gè)標(biāo)桿級(jí)的產(chǎn)品，可以得出創(chuàng)意對(duì)一個(gè)產(chǎn)品的成功與否到底起了什么作用？這款游戲火到咖啡廳一群人坐在那里玩一中午的原因在哪里？我想用我設(shè)計(jì)的眼光去審視一下王者榮耀，它到底為廣大玩家提供了一種怎樣的體驗(yàn)？

「容易上手」幾乎是王者榮耀玩家的共同感覺(jué)，而這種直觀感覺(jué)決定了一款手游能在多大程度上流行。一方面，王者榮耀采用了雙輪盤（左右兩邊一個(gè)操控區(qū)域）的操控方式，玩家通過(guò)左右兩邊的虛擬按鈕進(jìn)行控制，同時(shí)可以控制自動(dòng)攻擊。新手玩家默認(rèn)自動(dòng)攻擊，從可玩性角度很大程度上減少了用戶的學(xué)習(xí)成本。

雙輪盤的操作方式并不是王者榮耀首創(chuàng)，但是他卻成就了這種經(jīng)典的交互方式，為后來(lái)產(chǎn)品樹立了一個(gè)成功的典范。操作方式的創(chuàng)新點(diǎn)還在于取消技能施法的方式。區(qū)別于 PC 端游戲，移動(dòng)終端沒(méi)有鼠標(biāo)來(lái)控制技能釋放與否，王者榮耀采用技能滑至右上取消的方式，創(chuàng)新性地解決了小屏幕交互上存在的問(wèn)題。

除了以上幾個(gè)設(shè)計(jì)點(diǎn)外，C 端產(chǎn)品的設(shè)計(jì)手段還有很多，主要包括：推送提醒、各種紅點(diǎn)提示、彈窗提示、嵌入廣告、分享刺激、打賞刺激等。無(wú)論采用任何設(shè)計(jì)方法，其核心的目標(biāo)始終是落在用戶的注意力上，通過(guò)吸引用戶注意的方式，達(dá)到塑造用戶行為的目的。

B端

產(chǎn)品設(shè)計(jì)者對(duì)于用戶的需求在一定程度上是可知的，所以 B 端產(chǎn)品是輔助用戶行為，比如我們要做一個(gè)企業(yè)報(bào)銷系統(tǒng)，這些流程和工作行為已經(jīng)有一套標(biāo)準(zhǔn)的流程了，我們只需要將這些場(chǎng)景轉(zhuǎn)化為流程設(shè)計(jì)。那這個(gè)系統(tǒng)會(huì)存在哪些場(chǎng)景，只需要找到相應(yīng)的使用角色一聊就能挖掘出來(lái)，而且場(chǎng)景相對(duì)較固定，不用考慮用戶是不是喜歡這個(gè)功能，因?yàn)檫@是公司制度要求，不喜歡也得用。因此在設(shè)計(jì)初期，我們要做的就是充分挖掘相應(yīng)的功能需求，盡量把流程做到完善，而在設(shè)計(jì)上要有：合理的功能與模塊劃分、嚴(yán)謹(jǐn)?shù)臉I(yè)務(wù)流程設(shè)計(jì)、一致性的操作體驗(yàn)、干凈簡(jiǎn)潔的界面設(shè)計(jì)。

合理的功能與模塊劃分：即在做產(chǎn)品信息架構(gòu)時(shí)，就需要仔細(xì)考慮功能、模塊的劃分，客戶常用功能模塊有哪些，模塊與模塊之間的關(guān)系是怎樣的，當(dāng)然有些產(chǎn)品版本是通過(guò)客戶需求進(jìn)行個(gè)性化設(shè)計(jì)的，比如有的客戶要求為他們企業(yè)單獨(dú)設(shè)計(jì)一套工作流程，那么怎樣組合該客戶的功能模塊呢，這也是做 B 端產(chǎn)品經(jīng)常遇到的需求。而對(duì)于不同崗位的人員，他們的權(quán)限劃分也是不同的，比如在不同權(quán)限人員登錄時(shí)顯示的頁(yè)面有哪些不同？能查看到的模塊有哪些，里面的界面狀態(tài)是怎樣的？如果某崗位人員擁有不同的權(quán)限范圍，怎么設(shè)置他的功能可見性？不同權(quán)限的人員怎么協(xié)同工作？需要多人協(xié)作辦公時(shí)，如何進(jìn)行業(yè)務(wù)上的移交、提醒、工作流的顯示？這些都是設(shè)計(jì)師需要仔細(xì)考慮的點(diǎn)。

都說(shuō) B 端產(chǎn)品業(yè)務(wù)復(fù)雜，細(xì)分下來(lái)，權(quán)限設(shè)計(jì)就是最要花心思的，因?yàn)樗婕暗讲煌挠脩艚巧?、崗位、?chǎng)景，不能像 C 端那樣常規(guī)化。

嚴(yán)謹(jǐn)?shù)臉I(yè)務(wù)流程設(shè)計(jì)：B 端產(chǎn)品不用揣測(cè)客戶打開產(chǎn)品會(huì)干什么、引導(dǎo)他干什么，因?yàn)樗枪ぷ鬈浖?，在使用時(shí)，客戶必然有明確的目的，需要什么他自己會(huì)打開，因?yàn)槎际撬麄冏约鹤钍煜さ臉I(yè)務(wù)范圍?？偛豢赡芾盟槠臅r(shí)間在工作軟件上休閑一下吧，這個(gè)場(chǎng)景明顯不成立。同時(shí)，設(shè)計(jì)師需要對(duì)產(chǎn)品的行業(yè)和業(yè)務(wù)具有一定的了解，如果產(chǎn)品只針對(duì)單一行業(yè)，設(shè)計(jì)師只需要了解對(duì)應(yīng)行業(yè)的特性和需求即可，若是平臺(tái)類產(chǎn)品，需要面向多元行業(yè)，那設(shè)計(jì)師就需要了解所有的目標(biāo)行業(yè)特性，找到他們的異同點(diǎn)，針對(duì)不同使用場(chǎng)景，分析客戶的具體需求，最后產(chǎn)出合理且專業(yè)的流程方案。如果你不了解客戶的工作業(yè)務(wù)，你就不能有質(zhì)量的產(chǎn)出他們滿意的流程方案，所以做 B 端產(chǎn)品不光要學(xué)習(xí)本職崗位的技能，還要了解目標(biāo)客戶他們的工作流程、業(yè)務(wù)知識(shí)。

一致性的用戶體驗(yàn)：無(wú)論是 B 端還是 C 端產(chǎn)品都應(yīng)該遵循這一點(diǎn)，這是互聯(lián)網(wǎng)產(chǎn)品最基本的素養(yǎng)。保持交互和視覺(jué)的一致性，讓用戶在使用時(shí)，能感到熟悉、親切，能直觀地了解到操作會(huì)帶來(lái)怎樣的結(jié)果。在用戶疑惑時(shí)，及時(shí)給予反饋，在遇到困難時(shí)，給予幫助。在用戶迷茫時(shí)，有效引導(dǎo)用戶，這就是一款聰明的產(chǎn)品，它能夠提前預(yù)知到用戶的所想所需。同時(shí)，B 端產(chǎn)品的界面元素復(fù)用面積會(huì)比 C 端廣而大，因此 B 端產(chǎn)品更應(yīng)該注重交互的一致性。做過(guò)后臺(tái)的都應(yīng)該知道，一個(gè)提醒方式、一個(gè)表單控件，它們能覆蓋到 80% 的頁(yè)面。

干凈簡(jiǎn)潔的界面設(shè)計(jì)：B 端產(chǎn)品是為了工作而生，界面里往往都是「內(nèi)容為王」，不宜使用過(guò)于強(qiáng)烈的色彩對(duì)比，也不需要過(guò)于浮夸的設(shè)計(jì)，整體產(chǎn)品調(diào)性都應(yīng)該盡量簡(jiǎn)潔，不要讓視覺(jué)效果喧賓奪主，而應(yīng)該減少干擾用戶的「多余設(shè)計(jì)」。這里不是說(shuō)炫酷的設(shè)計(jì)不實(shí)用，而是 B 端產(chǎn)品的目標(biāo)用戶不同于 C 端用戶，B 端用戶主要是通過(guò)產(chǎn)品來(lái)完成枯燥的工作，即便視覺(jué)效果做的再吸引用戶，他們也不會(huì)給你的產(chǎn)品帶來(lái)流量和黏度，因?yàn)橘I單者是高層，使用時(shí)間也相對(duì)固定。所以還不如把開發(fā)、設(shè)計(jì)的成本放在提升產(chǎn)品性能和流程體驗(yàn)上。

雖然我一名設(shè)計(jì)師，但毫無(wú)疑問(wèn)，做 B 端產(chǎn)品必須要維持：功能為主的設(shè)計(jì)原則、視覺(jué)服務(wù)于功能的產(chǎn)品素養(yǎng)。這也是為什么很多 B 端產(chǎn)品喜歡用藍(lán)色系的原因，因?yàn)榕c藍(lán)色相關(guān)的負(fù)面信息很少，同時(shí)色彩上也不會(huì)過(guò)于強(qiáng)烈、刺激，一般人都不會(huì)排斥它，并且色彩含義也為理性、商務(wù)、科技，這就更適合 B 端產(chǎn)品的特性。

關(guān)注點(diǎn)

1. C端關(guān)注人性

產(chǎn)品強(qiáng)調(diào)：剛需、痛點(diǎn)、高頻、體驗(yàn)。

剛需

在 B 端產(chǎn)品設(shè)計(jì)中，我們往往面對(duì)的是剛需。用戶會(huì)非常明確的告訴你，幾乎無(wú)需挖掘，「我想要什么功能，我線下是怎么完成這個(gè)任務(wù)流程的，有這個(gè)功能我就付費(fèi)，沒(méi)有這個(gè)功能我就不買單」。當(dāng)然，用戶所講并非用戶所需，需求仍需要梳理和驗(yàn)證。

而為什么 C 端產(chǎn)品卻要刻意強(qiáng)調(diào)「剛需」？因?yàn)?C 端產(chǎn)品的需求不同于 B 端產(chǎn)品，C 端產(chǎn)品的用戶量大、散、廣，缺乏組織性，需求具有模糊性，所以需要刻意去挖掘。經(jīng)?？吹揭恍┊a(chǎn)品 YY 出一些客戶需求（「我」認(rèn)為的設(shè)計(jì)），其實(shí)這些需求用戶根本不需要。

痛點(diǎn)

在 B 端產(chǎn)品中，用戶選擇產(chǎn)品的決策過(guò)程中，有足夠的說(shuō)服時(shí)間和機(jī)會(huì)，另外價(jià)格也會(huì)是一個(gè)非常重要的參考因素。

而在 C 端產(chǎn)品中，用戶喜歡更換成本較低（QQ和微信等社交類C端產(chǎn)品的更換成本很高，不在此列）、決策時(shí)間短，所以能否在極端的時(shí)間內(nèi)，抓住用戶痛點(diǎn)，就非常關(guān)鍵，比如通過(guò)運(yùn)營(yíng)活動(dòng)和情感化的視覺(jué)設(shè)計(jì)，在短時(shí)間內(nèi)引起用戶的共鳴，形成熱點(diǎn)式引流。如果不能抓住用戶痛點(diǎn)，產(chǎn)品很可能不會(huì)被下載，即使被下載，使用頻率也會(huì)非常低，漸漸的就藏在手機(jī)某個(gè)角落幾個(gè)月不更新，從隱藏逐漸走向了刪除，這樣的產(chǎn)品就會(huì)喪失競(jìng)爭(zhēng)力。所以很多 C 端產(chǎn)品經(jīng)常推送一些運(yùn)營(yíng)消息，文案還特別吸引人，目的都是為了讓用戶回歸，告訴你它還很想你。

高頻

在 B 端產(chǎn)品中，用戶使用頻率是由業(yè)務(wù)和工作量決定的，所以提高 B 端產(chǎn)品用戶使用頻率的機(jī)會(huì)并不多，總不能節(jié)假日的時(shí)候推送一條消息「少年，快回來(lái)工作吧，加薪升職就是現(xiàn)在」，這樣做毫無(wú)意義，也違背了它本身的商業(yè)價(jià)值。

而在 C 端產(chǎn)品中，用戶粘性、付費(fèi)率、轉(zhuǎn)化率、活躍度等往往跟用戶使用的頻率緊密相連。C 端產(chǎn)品很多都是免費(fèi)使用，通過(guò)增值服務(wù)收費(fèi)，比如充值 VIP 享受更多特權(quán)等，只有通過(guò)免費(fèi)的方式，讓用戶先使用，從而培養(yǎng)了使用頻率，這才是增值服務(wù)收費(fèi)的基礎(chǔ)。所以高頻和流量就成為了能否實(shí)現(xiàn)增值收費(fèi)的關(guān)鍵點(diǎn)。

體驗(yàn)

C 端產(chǎn)品由于用戶缺乏組織的壓力，并且更換產(chǎn)品的成本低到?jīng)]有，刪除你就是幾個(gè)交互手勢(shì)而已，所以 C 端產(chǎn)品必須極其重視用戶體驗(yàn)，想盡一切辦法留住用戶、鎖住用戶、讓用戶把產(chǎn)品當(dāng)成生活中不可分割的一部分。

用戶體驗(yàn)對(duì) B 端產(chǎn)品也非常重要，但通?？蛻舾匾暪δ?、流程和效率，而用戶體驗(yàn)則更多的體現(xiàn)在產(chǎn)品性能方面，試想你使用一款軟件工作，由于產(chǎn)品性能響應(yīng)非常遲鈍，而且數(shù)據(jù)不精準(zhǔn)，你一定會(huì)很抓狂，很有可能一天的工作計(jì)劃被這款「該死」的產(chǎn)品所耽誤，所以在用戶體驗(yàn)上，性能要比界面更重要。

2. B端關(guān)注組織與業(yè)務(wù)

產(chǎn)品核心訴求：功能、流程、效率。

功能

不同于 C 端產(chǎn)品需要深入挖掘用戶的需求，B 端產(chǎn)品的需求往往是非常明確的，在功能的場(chǎng)景覆蓋面積上，和 C 端產(chǎn)品恰恰相反，功能多、大而全，這代表了一個(gè) B 端產(chǎn)品的完整性。但這里所謂的「功能多」，并不是一些雜七雜八的錦上添花的功能，而是為了覆蓋到更多業(yè)務(wù)場(chǎng)景的主要功能，這樣才能拿去賣錢，才能給客戶選擇性使用，才有了更多的商業(yè)競(jìng)爭(zhēng)機(jī)會(huì)。

至于功能過(guò)多而產(chǎn)生的學(xué)習(xí)成本過(guò)高現(xiàn)象，在 B 端領(lǐng)域也不是一個(gè)大問(wèn)題，因?yàn)?B 端領(lǐng)域的客戶往往需要專業(yè)的學(xué)習(xí)，客戶也通常不會(huì)認(rèn)為是負(fù)擔(dān)，反而因?yàn)檎莆樟诉@些技能而實(shí)現(xiàn)了自身價(jià)值的增值，因?yàn)?B 端產(chǎn)品是公司主動(dòng)要求員工使用的。其次我們作為 B 端產(chǎn)品的開發(fā)者，很多公司也會(huì)提供相應(yīng)的業(yè)務(wù)培訓(xùn)和售后服務(wù)。

當(dāng)然，SAAS 類產(chǎn)品（B端產(chǎn)品之一）由于免實(shí)施的特點(diǎn)，決定了功能要全面、又要容易上手的特點(diǎn)，所以 SAAS 產(chǎn)品是 B 端產(chǎn)品中最難設(shè)計(jì)的一種，需要在商業(yè)和體驗(yàn)之間權(quán)衡。

流程

既然 B 端產(chǎn)品要滿足業(yè)務(wù)信息化的需求，那就必然涉及到流程設(shè)計(jì)。B 端系統(tǒng)必須要能貼合企業(yè)用戶的業(yè)務(wù)流程才能正常運(yùn)行，而不同企業(yè)的流程是不一樣的，所以 B 端產(chǎn)品的流程設(shè)計(jì)是一個(gè)非常大的挑戰(zhàn)。

因?yàn)楹芏鄷r(shí)候 B 端產(chǎn)品是將線下的流程轉(zhuǎn)移到線上，實(shí)現(xiàn)無(wú)紙化辦公、敏捷辦公，所以功能流程已經(jīng)在線下有一套完善的流程了，只需要在現(xiàn)有的流程上做簡(jiǎn)化和整合即可，甚至一些線下的紙質(zhì)文件在線上變成電子檔時(shí)，客戶都要求貼近原始文件，只有這樣才能順從之前的使用場(chǎng)景，降低學(xué)習(xí)成本，所以前面為什么說(shuō)做 B 端產(chǎn)品設(shè)計(jì)要懂業(yè)務(wù)，就是因?yàn)楫a(chǎn)品里的功能流程是線下轉(zhuǎn)移到線上，了解線下業(yè)務(wù)能幫助你更嚴(yán)謹(jǐn)?shù)卦O(shè)計(jì)線上流程。

效率

B 端的產(chǎn)品的業(yè)務(wù)經(jīng)常涉及到海量的數(shù)據(jù)，所以在 B 端產(chǎn)品中，效率遠(yuǎn)遠(yuǎn)比用戶體驗(yàn)更重要，客戶不是在休閑時(shí)刻把玩你的產(chǎn)品，而是通過(guò)你的產(chǎn)品完成工作任務(wù)。比如要上傳 1000 條數(shù)據(jù)，那么批量上傳等高效率的功能設(shè)計(jì)和性能保障，就比優(yōu)化上傳界面的用戶體驗(yàn)要重要得多。

至今我們?nèi)匀豢梢钥吹接行┥坛€在用一些 DOS 平臺(tái)上開發(fā)的收銀系統(tǒng)，雖然這些系統(tǒng)已經(jīng)非常陳舊、用戶體驗(yàn)已經(jīng)很差了。但是由于使用時(shí)間很長(zhǎng)，而且效率非常高，所以依然保持著旺盛的生命力。

產(chǎn)品特性對(duì)比

1. 客戶VS用戶

客戶

使用 B 端產(chǎn)品的人或組織。說(shuō)白了就是給錢的合作方，它們通常是一個(gè)企業(yè)，以企業(yè)或部門的名義，購(gòu)買或租賃了你們公司所開發(fā)的產(chǎn)品。

用戶

使用 C 端產(chǎn)品的人。而個(gè)人使用者則是不受工作場(chǎng)景限制的每個(gè)人，拿起一個(gè)產(chǎn)品就可以注冊(cè)登錄，并直接上手把玩。

客戶是理性的，用戶是感性的。客戶關(guān)心 ROI（投入產(chǎn)出比），用戶關(guān)心過(guò)程（滿足人性的某個(gè)弱點(diǎn)）。

舉個(gè)例子：雙十一基本上成為一個(gè)全民狂歡節(jié)，很多人吃土也要剁手，為什么？因?yàn)楸阋耍芏嗳顺弥諊粵_動(dòng)就各種買買買了。

但我們很少聽說(shuō)有 B 端產(chǎn)品在搞促銷，一是因?yàn)槠髽I(yè)的采購(gòu)?fù)ǔＳ杏?jì)劃安排，可能還需要財(cái)務(wù)的各種審批，不太可能剛好就在你促銷的時(shí)候企業(yè)就需要采購(gòu)；二是企業(yè)的采購(gòu)要考慮投入產(chǎn)出比，而不會(huì)因?yàn)槟愦騻€(gè)折扣就決定買你家的商品，這關(guān)乎到企業(yè)利益和你自己的利益。

但個(gè)人用戶不一樣，購(gòu)物車存了好長(zhǎng)時(shí)間的商品，總是嫌貴舍不得買，可是看到雙十一突然打5折，這下便有了沖動(dòng)的借口，畢竟錯(cuò)過(guò)再等一年。

客戶有級(jí)別之分，用戶則基本一樣

企業(yè)有大小之分，10 個(gè)人的微企業(yè)和 100 個(gè)人的小型企業(yè)是不一樣的，同樣 1000 個(gè)人的中型企業(yè)和 10000 個(gè)人的大型企業(yè)也不一樣。更準(zhǔn)確地說(shuō)，對(duì)于同類產(chǎn)品不同大小的企業(yè)它們的需求是不一樣的，可能因?yàn)槠髽I(yè)的管理方式不一樣，有些企業(yè)會(huì)提出一些個(gè)性化的需求。

比如同樣需要內(nèi)部溝通產(chǎn)品，10 個(gè)人的企業(yè)大家都坐在一個(gè)辦公室里，需要找誰(shuí)討論問(wèn)題，吼一嗓子隔壁公司都能聽見，隨時(shí)隨意可以開會(huì)，需要的只是傳播聲音的載體──空氣。

但如果是 100 個(gè)人的小型企業(yè)，可能吼一嗓子就沒(méi)那么好用了，因?yàn)椴皇敲總€(gè)人都熟悉，并且座位可能會(huì)離的很遠(yuǎn)，這時(shí)候就需要一個(gè)微信群方便大家溝通，這時(shí)的傳播載體是──微信群。

如果是 1000 人的中型企業(yè)，跨部門協(xié)作的場(chǎng)景就非常多，很多時(shí)候要找的人是不認(rèn)識(shí)的，還有可能對(duì)方故意潛水半天不回信息，這個(gè)時(shí)候提高溝通效率就顯得特別重要，所以「釘釘」和「企業(yè)微信」的「已讀、未讀」功能就很受這種場(chǎng)景的歡迎，對(duì)方是否在故意潛水，就看是不是已讀，如果長(zhǎng)時(shí)間未讀那就可以通過(guò)語(yǔ)音或電話找，所以中型企業(yè)就很適合用這類產(chǎn)品。

那 10000 人以上的企業(yè)，可能「釘釘」和「企業(yè)微信」他們的原生功能也不一定能滿足復(fù)雜的協(xié)同需求，需要更多人性化的功能，這種情況一般是自己開發(fā)相應(yīng)功能，或外包給第三方開發(fā)，然后接入「釘釘」或「企業(yè)微信」。

上面說(shuō)的是 B 端產(chǎn)品面向的客戶有大小之分，下面我們來(lái)看看 C 端產(chǎn)品面向的用戶是怎么基本一樣的。

再拿微信舉個(gè)例子，從身份地位、收入上看微信的用戶也是千差萬(wàn)別，但是從微信滿足的人性弱點(diǎn)角度來(lái)看（懶惰、窺竊、色欲、存在感、虛榮、貪婪、沖動(dòng)、從眾、分享、嫉妒等），用戶與用戶之間并沒(méi)有什么區(qū)別。一位成功人士和一位無(wú)業(yè)游民都有懶惰、虛榮等缺點(diǎn)。只是嚴(yán)重程度可能有所差別，他們都有通過(guò)朋友圈各種「炫耀」的需求，只是炫耀的內(nèi)容可能不一樣而已。所以作為 C 端產(chǎn)品，理論上是能滿足所有用戶的需求的，當(dāng)然有極少部分是不看不發(fā)朋友圈的，這種小概率群體可以不計(jì)算在內(nèi)。所以 C 端產(chǎn)品留下來(lái)的用戶，他們的需求都是被該產(chǎn)品所解決過(guò)的，因?yàn)檫@些用戶都有相同的需求，雖然他們的身份都不一樣。

2. 工具VS「玩具」

工具的目標(biāo)是性價(jià)比，玩具目標(biāo)是休閑

性價(jià)比包含了兩個(gè)指標(biāo)，性能（效率）和價(jià)格。不難理解的是，企業(yè)之間的競(jìng)爭(zhēng)本質(zhì)上就是生產(chǎn)效率的競(jìng)爭(zhēng)。所以企業(yè)采購(gòu)的工具（B端產(chǎn)品）肯定是為了提高生產(chǎn)效率，比如各種管理系統(tǒng)是為了提高客戶管理的效率，數(shù)據(jù)庫(kù)系統(tǒng)是為了提高記錄和運(yùn)算的效率，在此基礎(chǔ)上再橫向?qū)Ρ葍r(jià)格，性價(jià)比最高的當(dāng)然最適合。要吸引企業(yè)來(lái)購(gòu)買產(chǎn)品，B 端產(chǎn)品不得不考慮產(chǎn)品效率和價(jià)格。

「玩具」的主要目標(biāo)是好玩、休閑，這里指的都是用戶體驗(yàn)，可以理解為用戶通過(guò)碎片化的時(shí)間去享受產(chǎn)品給他帶來(lái)的愉悅感、歸屬感、放松感，而用戶體驗(yàn)則是吸引用戶的重點(diǎn)。而滿足人性弱點(diǎn)的體驗(yàn)就是好的體驗(yàn)，好的體驗(yàn)都出現(xiàn)在「聰明」的產(chǎn)品上，即「眼色活」、幫助用戶思考、做到用戶行為的前面去，講的就是要滿足用戶「懶得思考」的弱點(diǎn)。比如我們都知道國(guó)民產(chǎn)品微信的用戶體驗(yàn)做得很棒，其中有一點(diǎn)就是易用性，老年人都可以用的產(chǎn)品，滿足了「懶」這一人性弱點(diǎn)，再加上其它的一些功能滿足「虛榮（炫耀）」、「偷窺（看過(guò)去的朋友圈）」等弱點(diǎn)，就能讓產(chǎn)品變得好玩，只有好玩才能引流，這正是 C 端產(chǎn)品追逐的目標(biāo)，因?yàn)楹芏?C 端產(chǎn)品的商業(yè)模式都是建立在巨大的用戶群體之上，有了流量，金錢也正在路上。

工具的生命周期比「玩具」的生命周期更長(zhǎng)久

相對(duì)于 C 端產(chǎn)品，B 端產(chǎn)品的生命周期更長(zhǎng)，一是因?yàn)?B 端產(chǎn)品作為業(yè)務(wù)工具，本身就比較復(fù)雜，開發(fā)這樣的產(chǎn)品是需要大量的行業(yè)經(jīng)驗(yàn)積累和技術(shù)積累，因此一款 B 端產(chǎn)品一旦贏得市場(chǎng)認(rèn)可，就能建立經(jīng)驗(yàn)和技術(shù)壁壘。二是 B 端產(chǎn)品基本都是要花錢購(gòu)買的，一旦企業(yè)采購(gòu)了該產(chǎn)品，員工也熟悉了如何使用，再換新的產(chǎn)品成本就比較大，所以更換的意愿會(huì)比較低。

C 端產(chǎn)品為好玩而存在，當(dāng)新推出的產(chǎn)品更好玩的時(shí)候，那老產(chǎn)品的生命周期和地位可能要面臨著挑戰(zhàn)。比如 QQ 和微信推出后，短信就被替代了，同樣是通訊類產(chǎn)品，微信和 QQ 就好玩很多?？赡苡腥藭?huì)說(shuō)因?yàn)槎绦攀召M(fèi)，這并不是最重要的原因，即便短信現(xiàn)在完全免費(fèi)，估計(jì)也沒(méi)幾個(gè)人用了，因?yàn)槲⑿挪恢鼓馨l(fā)消息，還能發(fā)各種表情、圖片、語(yǔ)音、視頻、支付等，自然前者就被后者所替代了。同理，當(dāng)微信被玩膩，人們發(fā)現(xiàn)下一個(gè)產(chǎn)品更好玩時(shí)，微信也同樣會(huì)受到挑戰(zhàn)，可以對(duì)比下三年前和現(xiàn)在的朋友圈、訂閱號(hào)原創(chuàng)文章的質(zhì)量就明白了。對(duì)了，還有「曇花一現(xiàn)的子彈短信」。所有說(shuō)產(chǎn)品都是有周期性的，只不過(guò) C 端產(chǎn)品要比 B 端產(chǎn)品的生命周期更短。

工具復(fù)雜難用，玩具簡(jiǎn)單易用

B 端產(chǎn)品復(fù)雜難用這是眾所周知的，而 C 端產(chǎn)品老人都可以用得很溜。為什么？一方面，B 端產(chǎn)品是工具類，用于生產(chǎn)，而不是我們的日常生活，使用工具很多時(shí)候不是人的本能行為，而是為了達(dá)到某一目的而學(xué)會(huì)的技能，因此一般是要經(jīng)過(guò)培訓(xùn)學(xué)習(xí)才會(huì)使用，所以很多 B 端產(chǎn)品有售前/售后方案、使用手冊(cè)、業(yè)務(wù)培訓(xùn)等等。

另一方面，這和 B 端產(chǎn)品的目標(biāo)有關(guān)（效率、準(zhǔn)確、安全），當(dāng)開發(fā)資源都用在打造產(chǎn)品性能的時(shí)候，用在用戶體驗(yàn)方面的開發(fā)資源難免會(huì)不足，所謂「功能先行」，就是這個(gè)道理。

而 C 端產(chǎn)品的目標(biāo)就是易用性、易通性，只有用戶體驗(yàn)做的比競(jìng)品好，才能贏得用戶和流量。假如 C 端產(chǎn)品需要拿著產(chǎn)品說(shuō)明書才能玩下去，那這種產(chǎn)品一定會(huì)被淘汰。

3. 「賣軟件」VS「秀軟件」

B端產(chǎn)品「賣軟件」

之所以說(shuō) B 端產(chǎn)品的商業(yè)模式是「賣軟件」，是因?yàn)?B 端產(chǎn)品實(shí)實(shí)在在的一手交錢一手交貨，也就是說(shuō) B 端產(chǎn)品開發(fā)出來(lái)是要直接賣錢的。即 B 端產(chǎn)品從誕生第一天起就要考慮如何銷售，甚至有些開發(fā)團(tuán)隊(duì)直接用原型 demo 去談客戶，最后還成交了。

通常來(lái)說(shuō)一款 B 端產(chǎn)品如果能有幾十萬(wàn)客戶已經(jīng)是用戶量特別大的產(chǎn)品了，不像 C 端產(chǎn)品動(dòng)不動(dòng)就是上千萬(wàn)、上億，甚至上十億用戶量。因此通過(guò)流量變現(xiàn)的方法是行不通的?？梢韵胂笕绻粋€(gè)企業(yè)工具里面插入各種雜七雜八的廣告，這得受到多少企業(yè)用戶的吐槽，關(guān)鍵是這些廣告還不能直接變現(xiàn)，這里最基本的口碑就沒(méi)了。另一方面，對(duì)于性價(jià)比高的 B 端產(chǎn)品，企業(yè)是愿意自主付費(fèi)的。自然而然就形成了垂直變現(xiàn)的商業(yè)模式。

C端產(chǎn)品「秀軟件」

C 端產(chǎn)品的商業(yè)模式通常是間接變現(xiàn)。通過(guò)開發(fā)出用戶需要的產(chǎn)品，把產(chǎn)品的體驗(yàn)做好，內(nèi)容形式有針對(duì)性，從而吸引更多的用戶來(lái)使用。產(chǎn)品本身是免費(fèi)的，比如百度，支付寶，微信等產(chǎn)品。在用戶量足夠大的前提下，通過(guò)廣告、推廣等方式變現(xiàn)，本質(zhì)上就是流量間接變現(xiàn)的商業(yè)模式。之所以 C 端產(chǎn)品這么做，是因?yàn)橛脩羧后w足夠龐大，當(dāng)用戶量足夠大的時(shí)候，廣告產(chǎn)生的收入就很可觀，同時(shí)還能實(shí)現(xiàn)同類產(chǎn)品引流，把用戶引導(dǎo)到各種「同父異母」的應(yīng)用上，創(chuàng)造二次流量。比如「手機(jī)百度」看短視頻必須要打開「全民小視頻」和「好看視頻」。

設(shè)計(jì)師從C轉(zhuǎn)向B是什么感受？

不少設(shè)計(jì)師在做過(guò)一段時(shí)間 B 端產(chǎn)品設(shè)計(jì)后會(huì)感覺(jué)缺乏激情和多樣性，因?yàn)樽隹犰诺囊曈X(jué)效果和時(shí)尚的微交互的機(jī)會(huì)并非常有。時(shí)間一長(zhǎng)就會(huì)發(fā)現(xiàn)它既無(wú)聊又單調(diào)，整天面對(duì)一些表單、可視化數(shù)據(jù)，何時(shí)才能出頭？時(shí)間一長(zhǎng)會(huì)懷疑人生。

正因如此，設(shè)計(jì)師們感受不到設(shè)計(jì)帶來(lái)的成就感，如果不重新認(rèn)清自我、調(diào)整好心態(tài)、設(shè)立工作計(jì)劃，很容易原地踏步。這里不是說(shuō)設(shè)計(jì)師不利于做 B 端產(chǎn)品，而是要結(jié)合自己的職業(yè)規(guī)劃做選擇。

我從 C 端轉(zhuǎn)戰(zhàn) B 端之后，發(fā)現(xiàn) B 端產(chǎn)品吸引我的有以下幾點(diǎn)。

1. 更有挑戰(zhàn)性

B 端產(chǎn)品相對(duì)而言，場(chǎng)景、功能、業(yè)務(wù)流程、信息架構(gòu)要比 C 端更復(fù)雜，面對(duì)的異常情況也比較多，一些專業(yè)性強(qiáng)的行業(yè)，甚至還需要一定的背景門檻，比如一些互金公司會(huì)幫助 PM 和設(shè)計(jì)師考取金融行業(yè)相關(guān)資格證。正因難度更大，設(shè)計(jì) B 端產(chǎn)品才更具挑戰(zhàn)性。

而C端產(chǎn)品目前各行業(yè)基本成熟，產(chǎn)品同質(zhì)化相當(dāng)嚴(yán)重，競(jìng)品中有大部分都差不多，設(shè)計(jì)師很多時(shí)候的工作就是在做領(lǐng)導(dǎo)和產(chǎn)品經(jīng)理的需求，「借鑒、學(xué)習(xí)」成熟競(jìng)品的設(shè)計(jì)。而 B 端市場(chǎng)還處在發(fā)展中狀態(tài)，現(xiàn)在正是市場(chǎng)紅利的時(shí)候，競(jìng)品雖少，但商業(yè)競(jìng)爭(zhēng)殘酷，即便下載了競(jìng)品，你沒(méi)有體驗(yàn)賬號(hào)還是進(jìn)不去的，所以從一定意義上講，做 B 端產(chǎn)品的設(shè)計(jì)，很多時(shí)候都需要自己去調(diào)研用戶需求，去摸索設(shè)計(jì)方法，并做出方案去驗(yàn)證它。對(duì) UI 和交互設(shè)計(jì)師來(lái)說(shuō)，復(fù)雜的業(yè)務(wù)場(chǎng)景和產(chǎn)品邏輯能讓你養(yǎng)成嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)習(xí)慣（思維），以后 UI 轉(zhuǎn)交互，或轉(zhuǎn)產(chǎn)品經(jīng)理，B 端的設(shè)計(jì)經(jīng)驗(yàn)都是一個(gè)非常牢固的基礎(chǔ)。

2. 更能體現(xiàn)設(shè)計(jì)師的價(jià)值

上面也說(shuō)了，C 端的成熟產(chǎn)品很多，產(chǎn)品也經(jīng)過(guò)市場(chǎng)檢驗(yàn)了，優(yōu)秀的產(chǎn)品站在更高的角度，去除設(shè)計(jì)師自己的情懷來(lái)看，在一段時(shí)間內(nèi)很難再有突破性的創(chuàng)新，只能在細(xì)節(jié)和體驗(yàn)上微創(chuàng)新，主要還是靠產(chǎn)品經(jīng)理發(fā)現(xiàn)功能痛點(diǎn)或運(yùn)營(yíng)的手段，設(shè)計(jì)師在這種情況下發(fā)揮的價(jià)值有限，往往地位也很低下。一般的互聯(lián)網(wǎng)公司，很多設(shè)計(jì)師都是執(zhí)行者，很難參與到產(chǎn)品層面的工作，在開發(fā)眼里覺(jué)得設(shè)計(jì)師就是畫圖的。

3. 更能進(jìn)行行業(yè)深耕

B 端設(shè)計(jì)師對(duì)行業(yè)、業(yè)務(wù)的了解遠(yuǎn)遠(yuǎn)深得多，他們做的不止是框架層和表現(xiàn)層的東西，每設(shè)計(jì)一個(gè)功能，必須要了解該功能在整個(gè)產(chǎn)業(yè)鏈的位置、功能目的，對(duì)其他業(yè)務(wù)環(huán)節(jié)有什么影響等等，只有對(duì)行業(yè)了解得更深入，才有更多的機(jī)會(huì)享受行業(yè)帶來(lái)的紅利。

以上是我的個(gè)人看法，當(dāng)然設(shè)計(jì)師如何選擇 C 端和 B 端，這和自己的興趣、職業(yè)方向有非常大的關(guān)聯(lián)。偏視覺(jué)的設(shè)計(jì)師做B端產(chǎn)品時(shí)肯定會(huì)有一些局限性，偏交互的設(shè)計(jì)師在你經(jīng)歷完 B 端的產(chǎn)品設(shè)計(jì)之后，你會(huì)發(fā)現(xiàn) C 端的邏輯真的很簡(jiǎn)單。所以無(wú)論怎么選，請(qǐng)先考慮好自己的個(gè)人因素，并不能因?yàn)楝F(xiàn)在 B 端火，你就跟風(fēng)，喜不喜歡、適不適合、能不能在 B 端領(lǐng)域生存下去，還是要看你自己。

作者：UXD筆記

轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎ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)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

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

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)、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ì)公司

更多精彩文章：

Cs界面設(shè)計(jì)之一：做交互選B端還是C端？來(lái)看這篇親歷分析！

Cs界面設(shè)計(jì)之二：如何區(qū)別B端與C端的產(chǎn)品設(shè)計(jì)差異？我總結(jié)了26條對(duì)比！

Cs界面設(shè)計(jì)之三：從3個(gè)方面，詳細(xì)分析B端和C端的差異化

Cs界面設(shè)計(jì)之四：如何打造一個(gè)優(yōu)秀的C端組件庫(kù)？來(lái)看貝殼設(shè)計(jì)的實(shí)戰(zhàn)案例！

Cs界面設(shè)計(jì)之五：B端產(chǎn)品C端化是自嗨？對(duì)不起我想得太簡(jiǎn)單了！

Cs界面設(shè)計(jì)之六：做C端還是做B端，該如何選擇？來(lái)看大廠設(shè)計(jì)師的分析！

Cs界面設(shè)計(jì)之七：B端設(shè)計(jì)師來(lái)看！帶你深入了解「B端C化」的設(shè)計(jì)理念

Cs界面設(shè)計(jì)之八：超全基礎(chǔ)科普！全方位解析 C 端和 B 端的產(chǎn)品特性