背景

“時(shí)間”作為人機(jī)交互界面中經(jīng)常出現(xiàn)的元素，本質(zhì)上都是為了去傳遞時(shí)間維度的信息。但是我們平時(shí)在使用一些互聯(lián)網(wǎng)產(chǎn)品時(shí)會(huì)發(fā)現(xiàn)，關(guān)于“時(shí)間”的顯示狀態(tài)或形式在不同場(chǎng)景、不同頁(yè)面里往往是不太一樣的，這是出于怎樣的考慮呢？今天我們就來(lái)聊一聊，如何在產(chǎn)品設(shè)計(jì)中把握“時(shí)間”顯示的訣竅，讓其在頁(yè)面中發(fā)揮最大的作用。

“時(shí)間”元素的分類

按照“時(shí)間”元素在頁(yè)面中的出現(xiàn)場(chǎng)景和所起到的作用，可以大致歸為以下幾類：

A.事件的關(guān)鍵構(gòu)成要素

B.行為的時(shí)間標(biāo)記

指用戶本人作為行為主體或行為的接收對(duì)象，在某一動(dòng)作發(fā)生后為其所打上的時(shí)間標(biāo)記，比方說(shuō)“我”購(gòu)買商品下單的時(shí)間或收到一封郵件的時(shí)間。

C.內(nèi)容的附屬信息

用戶在使用產(chǎn)品進(jìn)行內(nèi)容消費(fèi)時(shí)，時(shí)間作為該條內(nèi)容的附屬信息，起到補(bǔ)充說(shuō)明的作用，比方說(shuō)一條短視頻或新聞的發(fā)布時(shí)間。

在上面的案例中，我們會(huì)發(fā)現(xiàn)“時(shí)間”在對(duì)應(yīng)場(chǎng)景里所發(fā)揮的作用不同，用戶在使用產(chǎn)品時(shí)往往對(duì)時(shí)間存在不一樣的關(guān)注程度。因此我們?cè)谧鲰?yè)面設(shè)計(jì)時(shí)，要根據(jù)具體場(chǎng)景和用戶訴求判斷“時(shí)間”元素的重要性和優(yōu)先級(jí)，通常情況下：時(shí)間作為事件的關(guān)鍵構(gòu)成要素＞行為的時(shí)間標(biāo)記＞內(nèi)容的附屬信息，之后再思考用什么樣的設(shè)計(jì)形式去展示來(lái)達(dá)到我們的目標(biāo)。

“時(shí)間”的呈現(xiàn)方式和運(yùn)用技巧

在討論“時(shí)間”元素的設(shè)計(jì)之前，我們先共識(shí)一些有關(guān)時(shí)間的理解和概念。時(shí)間可以劃分為“時(shí)間點(diǎn)”和“時(shí)間段”兩個(gè)維度，類似我們高中物理時(shí)學(xué)過(guò)的“時(shí)刻”和"時(shí)間間隔“的概念。

拿開會(huì)舉例子：“下午4:30會(huì)議開始”、“下午6:00會(huì)議結(jié)束”描述的是事件開始、結(jié)束的時(shí)間點(diǎn)，而“整個(gè)會(huì)議持續(xù)1.5小時(shí)”、“會(huì)議時(shí)間為下午4:30-6:00”描述的是事件過(guò)程的時(shí)間段；但是，我們?cè)跁?huì)議開始時(shí)也可以這樣講“會(huì)議將在1.5小時(shí)后結(jié)束”。

通過(guò)上面的例子我們可以發(fā)下，同樣是描述一件事情，運(yùn)用不同的時(shí)間點(diǎn)、時(shí)間段的方式去表達(dá)，意思一樣但卻傳遞出不一樣的情感，并且兩者存在如下的“換算”關(guān)系：

1）時(shí)間段加上定語(yǔ)會(huì)變成時(shí)間點(diǎn)（但同樣是時(shí)間點(diǎn)，“下午6:00”是絕對(duì)時(shí)間，而“1.5小時(shí)后”是相對(duì)時(shí)間，剛好對(duì)應(yīng)到我們?cè)O(shè)計(jì)時(shí)兩種時(shí)間戳類型）；

2）兩個(gè)時(shí)間點(diǎn)之間則表示時(shí)間段。

所以，我們?cè)谄綍r(shí)表達(dá)或設(shè)計(jì)時(shí)，要先想清楚用“時(shí)間”是想側(cè)重表達(dá)某一事件、動(dòng)作發(fā)生的即刻時(shí)間節(jié)點(diǎn)？還是想描述其所持續(xù)的時(shí)間過(guò)程？之后我們?cè)籴槍?duì)不同語(yǔ)境去選取合適的文案和呈現(xiàn)方式。

時(shí)間的呈現(xiàn)方式離不開：時(shí)間戳類型、時(shí)間顯示格式、時(shí)間顆粒度。其中，時(shí)間顆粒度指的是描述時(shí)間的最小單位，往往顆粒度越細(xì)，給用戶傳達(dá)的確定感越強(qiáng)（如轉(zhuǎn)賬時(shí)間是12日15:15:20），對(duì)用戶的激勵(lì)作用越明顯（如距搶購(gòu)結(jié)束僅剩00時(shí)01分23.6秒）。

1.絕對(duì)時(shí)間戳

絕對(duì)時(shí)間可理解為事物發(fā)生時(shí)的確切時(shí)間，由具體日期（年、月、日）和時(shí)間（時(shí)、分、秒）組成。使用絕對(duì)時(shí)間戳的優(yōu)勢(shì)是信息傳達(dá)精準(zhǔn)，顯得正式，給人確定感和安全感，同時(shí)排布規(guī)整，便于形成認(rèn)知習(xí)慣；但缺點(diǎn)是內(nèi)容顯示過(guò)長(zhǎng)不利于閱讀，并且占用空間較大。

在時(shí)間顯示格式的選擇上，為了避免混淆，推薦使用文字格式或“-”分隔符來(lái)分隔日期，而“/”分隔符在不同國(guó)家有不同的展示順序習(xí)慣，容易造成誤解，盡量少用。

時(shí)間顆粒度的選擇依情況而定，一般場(chǎng)景總結(jié)如下：

2.相對(duì)時(shí)間戳

相對(duì)時(shí)間在產(chǎn)品設(shè)計(jì)領(lǐng)域通常是指內(nèi)容生產(chǎn)、到達(dá)、或狀態(tài)發(fā)生改變時(shí)，距當(dāng)前時(shí)間點(diǎn)的時(shí)間差值，多用于push通知、信息流產(chǎn)品，側(cè)重強(qiáng)調(diào)內(nèi)容的時(shí)效性；而“倒計(jì)時(shí)”也算相對(duì)時(shí)間的一種，側(cè)重營(yíng)造時(shí)間的緊迫感。使用相對(duì)時(shí)間戳的優(yōu)勢(shì)是用戶辨識(shí)、理解成本低，不用通過(guò)計(jì)算來(lái)判斷時(shí)間過(guò)去或還剩下多久；缺點(diǎn)是不夠精確、正式，并很難衡量?jī)蓚€(gè)時(shí)間點(diǎn)的臨近性。

在使用相對(duì)時(shí)間是，要注意格式友好。時(shí)間單位可隨著時(shí)間的推移自動(dòng)改變；數(shù)字不要過(guò)多，盡量取整；并且可設(shè)置其與絕對(duì)時(shí)間轉(zhuǎn)換的臨界點(diǎn)。

總結(jié)

在設(shè)計(jì)界面中的“時(shí)間”元素時(shí)，要遵循場(chǎng)景貼合、便于閱讀理解的總體原則；之后根據(jù)場(chǎng)景和目標(biāo)，再選取合適的“時(shí)間”呈現(xiàn)方式（包括時(shí)間戳類型、時(shí)間顯示格式、時(shí)間顆粒度）。

當(dāng)時(shí)間作為“A.事件的關(guān)鍵構(gòu)成要素”時(shí)

一般情況下使用絕對(duì)時(shí)間，并且要看是為了強(qiáng)調(diào)某一關(guān)鍵時(shí)間節(jié)點(diǎn)，還是側(cè)重表達(dá)整個(gè)持續(xù)過(guò)程。此外，選用關(guān)聯(lián)場(chǎng)景的文案或者運(yùn)用倒計(jì)時(shí)（相對(duì)時(shí)間）的形式，可一定程度上促進(jìn)用戶更加集中注意力，提升對(duì)信息的關(guān)注度，并達(dá)到特殊的激勵(lì)作用和轉(zhuǎn)化效果。

當(dāng)時(shí)間作為“B.行為的時(shí)間標(biāo)記”時(shí)

該場(chǎng)景通常是為了追求確定感，通過(guò)提供精準(zhǔn)的時(shí)間和日期便于用戶定位到過(guò)去或?qū)?lái)的某個(gè)時(shí)間點(diǎn)（段）去查找、回顧相應(yīng)內(nèi)容，因此大多數(shù)采用絕對(duì)時(shí)間，時(shí)間顆粒度依具體情況而定。

當(dāng)時(shí)間作為“C.內(nèi)容的附屬信息”時(shí)

如果所設(shè)計(jì)的產(chǎn)品供給內(nèi)容的更新速度快，用戶活躍度高，并且此時(shí)內(nèi)容的時(shí)間信息準(zhǔn)確性不那么重要反而更側(cè)重于內(nèi)容的時(shí)效性，那么通常會(huì)使用相對(duì)時(shí)間。部分信息流產(chǎn)品（比如新聞資訊類、社區(qū)類）會(huì)在列表頁(yè)使用相對(duì)時(shí)間，在詳情頁(yè)使用絕對(duì)時(shí)間，時(shí)間顆粒度也是依情況而定；并且會(huì)隨著時(shí)間推移，在某一時(shí)間節(jié)點(diǎn)前把相對(duì)時(shí)間轉(zhuǎn)換為絕對(duì)時(shí)間。

前言

說(shuō)起按鈕，很多做設(shè)計(jì)的小伙伴是熟悉的不能再熟悉了，它是我們?cè)谠O(shè)計(jì)界面時(shí)最常用、最重要的組件之一，也是易被忽略的元素之一，所以在設(shè)計(jì)之前，做好對(duì)按鈕組件的認(rèn)識(shí)、了解非常有必要。

從我們有記憶認(rèn)知開始，按鈕就時(shí)刻在和我們打交道，墻上的電燈開關(guān)、電視機(jī)的調(diào)節(jié)按鈕、遙控器的按鈕等等，這些物理按鈕不僅僅是當(dāng)下UI按鈕組件的前身，且不會(huì)消失，依然會(huì)有很多非數(shù)字化的產(chǎn)品及機(jī)器設(shè)備在持續(xù)延用，不管如何演變，基本不會(huì)脫離實(shí)物參考。按鈕最吸引我們的莫過(guò)于通過(guò)簡(jiǎn)單觸摸就能輕松滿足自己的行為需求，按鈕設(shè)計(jì)的直觀性及易用性會(huì)影響著人們完成一件事情的意愿及效率。

在UI設(shè)計(jì)中，如何完美的避開問(wèn)題、把按鈕設(shè)計(jì)的更好，是每個(gè)設(shè)計(jì)師需要深思的問(wèn)題。按鈕設(shè)計(jì)的好壞，將直接關(guān)系著用戶引流、觸發(fā)行動(dòng)、產(chǎn)品轉(zhuǎn)化率等至關(guān)重要的問(wèn)題。另外，精致的按鈕也會(huì)讓整個(gè)頁(yè)面的視覺提升檔次。本篇文章將對(duì)按鈕作出解析，介紹在設(shè)計(jì)按鈕時(shí)需要著重考慮的因素及設(shè)計(jì)標(biāo)準(zhǔn)，并將理論付諸于實(shí)踐。

分享目錄

一、按鈕的作用

二、按鈕的類型

三、按鈕的狀態(tài)

四、按鈕的大小及風(fēng)格

五、常見誤區(qū)及避坑指南

六、總結(jié)

一、按鈕的作用

1. 什么是按鈕

在UI設(shè)計(jì)中，按鈕是一個(gè)明確指示交互行為動(dòng)作的組件，主要用于觸發(fā)某一個(gè)即時(shí)操作，很多時(shí)候，我們需要采取下一步行動(dòng)或返回到上一步，都要通過(guò)按鈕（部分場(chǎng)景可用手勢(shì)交互）來(lái)完成。

在視覺層面，按鈕的組成看起來(lái)很簡(jiǎn)單，由一個(gè)底色塊/線框加上一組文案即可組成，但真正要將按鈕設(shè)計(jì)好，僅停留在視覺層面并不嚴(yán)謹(jǐn)，其大小、位置、色值、文案...等每一個(gè)細(xì)節(jié)的處理都關(guān)系著用戶的操作體驗(yàn)，下面的這幾種情況大家肯定有碰到過(guò)：

2 按鈕有什么用

通常，我們?cè)谠O(shè)計(jì)按鈕之前，需要詳細(xì)理解按鈕所存在的意義，哪里該加、哪里不該加、為什么要加，主要從以下幾點(diǎn)來(lái)體現(xiàn)按鈕的作用：

2.1 功能性操作

這種按鈕很常見，比如展開、收起、下拉、加減等，按鈕視覺較弱，重點(diǎn)強(qiáng)調(diào)該頁(yè)面的功能，突出主體信息，在操作之后會(huì)發(fā)生一些交互變化，這類按鈕主要起到功能形態(tài)的作用。

2.2 明確引導(dǎo)下一步操作

當(dāng)用戶完成一個(gè)頁(yè)面的內(nèi)容填充或信息確認(rèn)，就會(huì)失去視覺焦點(diǎn)，而下一步按鈕就會(huì)聚焦視覺重心，通過(guò)文案告知用戶下一步該怎么做，常見的有保存、下一步、支付、確定...等。

另外，用戶需要完成某個(gè)任務(wù)，但同一個(gè)任務(wù)流程的信息、種類較多，這時(shí)就會(huì)通過(guò)分步驟、分頁(yè)的方式，并在每個(gè)步驟的末尾增加一個(gè)能起到上下銜接作用的按鈕，明確引導(dǎo)用戶進(jìn)入下一步操作，以此來(lái)提升用戶完成整個(gè)任務(wù)的成功率。

2.3 培養(yǎng)行為習(xí)慣

如果在操作某個(gè)按鈕之后得到了一定的利益，且能持續(xù)為用戶帶來(lái)價(jià)值，那么不妨將這個(gè)按鈕設(shè)計(jì)的更醒目，并在同等級(jí)但不同的地方保持視覺的統(tǒng)一，持續(xù)培養(yǎng)用戶點(diǎn)擊習(xí)慣，當(dāng)用戶下次再看到類似這種按鈕時(shí)，慣性思維就會(huì)引導(dǎo)點(diǎn)擊。

3 按鈕的組成

在大部分的認(rèn)知中，最常見的按鈕就是一個(gè)底色塊加上一句文案就完成了，殊不知一個(gè)好的按鈕需要經(jīng)過(guò)很多細(xì)節(jié)的把控，才能發(fā)揮出按鈕的最大作用。例如文案的長(zhǎng)短/邊距、容器的大小/圓角、填充色的主/次之分...等，下面我們來(lái)看看一個(gè)按鈕到底是由哪些屬性、元素組成。

◇ 圓角：傳達(dá)出按鈕的氣質(zhì)，決定用戶的視覺感受，最常見的為小圓角，也有較為嚴(yán)謹(jǐn)、力量型的全直角、卡通可愛、年輕化風(fēng)格的全圓角。

◇ 圖標(biāo)：用于按鈕含義的圖形化抽象表達(dá)，例如加載中、編輯；

◇ 容器：整個(gè)按鈕的載體，容納文案、圖標(biāo)等元素；

◇ 邊框：確定按鈕的邊界，常用于次級(jí)按鈕描邊；

◇ 文案：用文字表達(dá)按鈕的含義，精簡(jiǎn)文案；

◇ 背景：表達(dá)按鈕的當(dāng)前狀態(tài)，對(duì)按鈕合理的使用主體色能有效傳播品牌氣質(zhì)；

◇ 投影：讓按鈕具有層次感，配合漸變背景能體現(xiàn)出微質(zhì)感的效果。

二、按鈕的類型

1 功能類型

按照功能屬性分類，可將按鈕類型分為流程控制和功能選項(xiàng)操作。

流程控制：常見的傳統(tǒng)按鈕，如支付、下一步、確定、保存等，容器承載著圖標(biāo)、圖標(biāo)+文案、文案。

功能選項(xiàng)：開關(guān)/加減控件、標(biāo)簽欄/分類、狀態(tài)切換等，操作之后只針對(duì)當(dāng)前頁(yè)面做出屬性的調(diào)整，不涉及流程的變化。

2 視覺樣式（橫向）

視覺樣式有所區(qū)別，在不同的頁(yè)面可能存在同等級(jí)的權(quán)重。

常規(guī)按鈕：最常見的按鈕，當(dāng)同一個(gè)頁(yè)面出現(xiàn)多個(gè)常規(guī)按鈕時(shí)，會(huì)有主次之分；

虛線按鈕：常用于添加、上傳等操作；

文本按鈕：僅用文字作為觸發(fā)點(diǎn)，部分會(huì)用主色、右側(cè)箭頭、下劃線等方式突出。

3 層級(jí)分類（縱向）

高權(quán)重：帶有填充色的主操作按鈕，當(dāng)同一個(gè)頁(yè)面存在多個(gè)按鈕，只允許存在一個(gè)高權(quán)重（主操作）按鈕；

中權(quán)重：帶邊框輪廓的概述按鈕，同一頁(yè)面可存在多個(gè)中權(quán)重的按鈕；

低權(quán)重：純文本按鈕，以及淺色填充+淺色文字的按鈕，同一頁(yè)面可存在多個(gè)低權(quán)重按鈕。

三、按鈕的狀態(tài)

在設(shè)計(jì)按鈕時(shí)，為了體現(xiàn)按鈕不同的具體含義，以及后續(xù)設(shè)計(jì)、開發(fā)的統(tǒng)一性，明確按鈕交互樣式是設(shè)計(jì)過(guò)程中不可缺少的重要組成部分。設(shè)計(jì)師需要在不干擾界面視覺的前提下，對(duì)每個(gè)按鈕的樣式、狀態(tài)有清晰的定義，與其他元素、布局區(qū)分開來(lái)，以確保按鈕的可供性。常見的狀態(tài)主要有以下幾種：

◇ 待激活狀態(tài)：需要完成一定的操作、或有一個(gè)以上必要的前置條件后才允許交互；

◇ 正常狀態(tài)：按鈕的正常顯示狀態(tài)，可進(jìn)行交互操作；

◇ 點(diǎn)擊狀態(tài)：觸碰效果，表示按鈕正在進(jìn)行交互且未結(jié)束，會(huì)在正常狀態(tài)的基礎(chǔ)上增加一個(gè)純黑色不且透明度為10%的蒙層，交互完成后，即會(huì)引發(fā)此按鈕的真實(shí)作用；

◇ 加載狀態(tài)：產(chǎn)生交互后沒有立即執(zhí)行、或系統(tǒng)需要一定的時(shí)間才能執(zhí)行完成；

◇ 禁用狀態(tài)：系統(tǒng)默認(rèn)暫不允許操作、或需要用戶離開此頁(yè)面去完成一定的前置條件才能使用。

四、按鈕的大小及風(fēng)格

1 按鈕的尺寸

在PC端設(shè)計(jì)按鈕時(shí)，因?yàn)槭髽?biāo)的精準(zhǔn)點(diǎn)擊，我們通常會(huì)將按鈕設(shè)計(jì)的小一些，同時(shí)也能讓整個(gè)界面看起來(lái)更加細(xì)膩，只要不影響操作，36px~48px范圍內(nèi)的按鈕是比較常見的。但移動(dòng)端的按鈕設(shè)計(jì)，我們要更多的考慮到物理尺寸，即手指（指尖）在操作時(shí)需占用的實(shí)際范圍。

iOS的設(shè)計(jì)規(guī)范中，將按鈕的最小點(diǎn)擊區(qū)域規(guī)定為44pt，一旦小于這個(gè)數(shù)值，操作時(shí)就會(huì)出現(xiàn)精準(zhǔn)度較低的情況，導(dǎo)致操作失誤或無(wú)效。

在實(shí)際的iOS界面中，很多應(yīng)用在設(shè)計(jì)按鈕時(shí)并未嚴(yán)格遵循最小44pt的這個(gè)標(biāo)準(zhǔn)，例如很多一、二級(jí)界面的次級(jí)功能入口，有些連30pt都不到，也并未對(duì)用戶造成多大的影響，可能是對(duì)應(yīng)的功能權(quán)重、用戶點(diǎn)擊頻率都非常低的原因，還有一部分文字按鈕，其本身永遠(yuǎn)都不可能達(dá)到最小的觸控標(biāo)準(zhǔn)（觸控?zé)釁^(qū)加大即可），所以關(guān)于按鈕的尺寸大小并非規(guī)定的很死板。

費(fèi)茨定律告訴我們「目標(biāo)尺寸越大，移動(dòng)至目標(biāo)所花費(fèi)的時(shí)間就越短」，所以，在滿足手指觸控范圍的同時(shí)，還要根據(jù)所對(duì)應(yīng)功能的權(quán)重占比來(lái)適當(dāng)調(diào)節(jié)按鈕的大小。不難理解，當(dāng)某個(gè)元素的尺寸越大就越吸引眼球，就更容易被視覺捕捉到，也更容易被「點(diǎn)擊」，精準(zhǔn)度被降低的同時(shí)，也減少了用戶的操作成本。

我們以8像素柵格系統(tǒng)、iOS的2倍圖為例，較為常見的有：小型-64px、中型-80~88px、大型-98px、超大型-隨機(jī)這四種按鈕。

2 按鈕的風(fēng)格

在UI設(shè)計(jì)中，幾乎每個(gè)頁(yè)面都存在按鈕，樣式、種類也有很多，但設(shè)計(jì)風(fēng)格常見的也就幾種，例如扁平化、微質(zhì)感、擬物化、新擬態(tài)（概念）...

2.1 扁平化按鈕

通常在容器中填充一個(gè)純色即可，沒有多余的視覺干擾，操作簡(jiǎn)便，這種類型的按鈕一般在應(yīng)用中用的最多。例如：工具型應(yīng)用、B端應(yīng)用等。

2.2 微質(zhì)感按鈕

相比扁平化，填充漸變色再加上淺淺的投影，不僅能保持信息內(nèi)容的簡(jiǎn)潔、讓用戶產(chǎn)生更強(qiáng)的操作欲望，還能讓頁(yè)面具有品質(zhì)感，更加耐看。例如：年輕化應(yīng)用、娛樂類應(yīng)用、兒童應(yīng)用等。

2.3 擬物化按鈕

大多設(shè)計(jì)的很立體，3D質(zhì)感、屬性樣式豐富多彩，參考現(xiàn)實(shí)世界中的事務(wù)或攝取應(yīng)用場(chǎng)景中的某些元素，使其更加逼真，有較強(qiáng)的代入感。例如：游戲類應(yīng)用、H5專題、運(yùn)營(yíng)banner等。

2.4 新擬態(tài)按鈕

2021年風(fēng)靡一時(shí)，幾乎無(wú)人不知，但要想落地卻不太現(xiàn)實(shí)，實(shí)用性不強(qiáng)，也只能在飛機(jī)稿中出出風(fēng)頭，隨著時(shí)間的流逝，逐漸銷聲匿跡，不知哪天會(huì)不會(huì)經(jīng)改良后再次面世（當(dāng)初扁平化問(wèn)世，也是幾經(jīng)波折，經(jīng)多年改良才逐漸被大眾所接受）。目前只有少數(shù)工具類應(yīng)用使用了新擬態(tài)，例如：計(jì)算器、AI設(shè)備控制、有道云筆記等。

五、常見誤區(qū)及避坑指南

1 主/次操作層級(jí)分明

當(dāng)同一個(gè)頁(yè)面出現(xiàn)多個(gè)按鈕時(shí)，只允許存在一個(gè)主操作按鈕，其他不做特別設(shè)定。當(dāng)然，如果次要操作較多，也不益過(guò)多的出現(xiàn)次級(jí)按鈕，可根據(jù)權(quán)重降級(jí)處理，以小圖標(biāo)或文字按鈕的方式呈現(xiàn)。

2. 統(tǒng)一樣式

主/次操作按鈕要統(tǒng)一樣式，用戶需操作時(shí)，盡可能的減少其思考及選擇時(shí)間，按鈕應(yīng)該迎合用戶固有認(rèn)知及慣性思維，節(jié)省時(shí)間成本，提高操作效率。

3. 圓角值

在大多數(shù)界面設(shè)計(jì)中，我們通常所見到按鈕還是小圓角和全圓角居多，也有部分按鈕完全直角，需要根據(jù)產(chǎn)品的行業(yè)屬性與氣質(zhì)來(lái)選擇最合適的圓角類型。不管如何，盡量避免大圓角（卡片除外）按鈕，不方不圓、不倫不類的，顯的不夠成熟也不好看。

3.1 小圓角

小圓角按鈕的圓角值通?？刂圃诟叨鹊?/5、1/6，兒童類型的應(yīng)用也有1/4（較大）的，并非絕對(duì)值。如果習(xí)慣使用8像素網(wǎng)格，根據(jù)按鈕的尺寸大小，直接將圓角值固定在8px、16px、24px（較大）這幾個(gè)數(shù)值，能減少設(shè)計(jì)組件的數(shù)量，也利于開發(fā)做組件封裝后續(xù)調(diào)用。

3.2 全圓角

全圓角按鈕的圓角值固定為高度的1/2，或者在軟件的圓角設(shè)置中直接將數(shù)值拉到極限。

3.3 直角

不設(shè)圓角值，在PC端較為常見，也有部分較為嚴(yán)謹(jǐn)?shù)囊苿?dòng)端應(yīng)用使用直角按鈕。

4. 按鈕中的文字

按鈕中的文字要便于用戶理解，不能過(guò)于陌生或繞口，用戶碰到不易理解的信息會(huì)產(chǎn)生困惑，甚至誤導(dǎo)用戶導(dǎo)致操作失誤從而造成損失。除此之外，文字還需要精簡(jiǎn)，不能過(guò)多或折行且能合理的引導(dǎo)用戶完成操作。

上圖的文案歧義就很明顯，自以為聰明的設(shè)計(jì)師想要挽留用戶，刻意將主次按鈕樣式對(duì)換，希望用戶操作不成功，那么用戶在需要取消訂單時(shí)就疑惑了，到底是點(diǎn)擊「確定」還是主操作按鈕「取消」才能取消成功呢？或許稍加思考，用戶也能反應(yīng)過(guò)來(lái)，但無(wú)疑增加了選擇難度、思考時(shí)間及操作成本。

5. 文字與按鈕比例

按鈕中的文字太大或太小都會(huì)影響用戶對(duì)信息接收的效率，大小比例需要適中。文字太大會(huì)感覺很擁擠（跟大家衣服買小了感覺一樣），沒有呼吸感，要給文字四周留下足夠的空間，同時(shí)文字太小會(huì)顯得小氣，看起來(lái)也會(huì)比較吃力，不利于信息接收。

6. 按鈕與其他組件的區(qū)分

設(shè)計(jì)好按鈕組件之后，頁(yè)面中的其他組件或元素要與按鈕有很明顯的區(qū)別，避免讓用戶產(chǎn)生不必要的誤解。

7. 彈窗主/次按鈕的位置

在彈窗中，主按鈕是在左？還是在右？這是一個(gè)爭(zhēng)論不休的問(wèn)題，那么不爭(zhēng)了，在移動(dòng)端的彈窗設(shè)計(jì)中，主按鈕靠右就行了，不一定絕對(duì)正確，但絕對(duì)不是錯(cuò)的。根據(jù)調(diào)查數(shù)據(jù)顯示，單手使用右手操作手機(jī)的用戶比左手操作手機(jī)的用戶量高，且用戶也有一定的意識(shí)，左側(cè)為上一步、右側(cè)為下一步，頂部左側(cè)為返回，右側(cè)為保存或確定。

8. 無(wú)障礙設(shè)計(jì)

可訪問(wèn)性是按鈕設(shè)計(jì)最重要目標(biāo)之一，不僅要樣式統(tǒng)一，還應(yīng)符合用戶的認(rèn)知，讓用戶能快速知曉這個(gè)元素能否點(diǎn)擊？點(diǎn)擊之后會(huì)發(fā)生什么？甚至有種似曾相識(shí)的感覺。如果將按鈕樣式設(shè)計(jì)的與用戶認(rèn)知有較大的偏差，不易于用戶理解。

9. 減少使用禁用按鈕

在表單設(shè)計(jì)中，大部分都需要用戶完成一定任務(wù)之后才能正常操作下一步按鈕，在完成之前，需少用禁用按鈕，在前面有講到「待激活狀態(tài)」，即在按鈕中填充淺淺的主體色等待用戶完成任務(wù)激活。

通常系統(tǒng)默認(rèn)不允許操作或存在時(shí)間限制會(huì)用到填充為灰色的禁用按鈕，即便如此，也要盡量讓系統(tǒng)將其隱藏，萬(wàn)不得已的情況下需要在按鈕附近說(shuō)明情況，以免使用不當(dāng)引起用戶的負(fù)面情緒。

10. 投影的使用

在給按鈕添加投影時(shí)，選擇灰色或純黑色加調(diào)整不同明度即可滿足基本效果，但如果想要更好的視覺體驗(yàn)，可以基于按鈕本身的色值來(lái)調(diào)整，讓投影效果看起來(lái)更舒適，跟頁(yè)面更搭。另外，切勿過(guò)度使用投影，寧缺毋濫，若按鈕的投影太深，看起來(lái)粗糙臟亂，還不如不用，顏色較淺的按鈕盡量不使用投影，否則可能會(huì)影響按鈕的識(shí)別度，讓這個(gè)頁(yè)面看起來(lái)不夠清爽。

六、總結(jié)

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，按鈕作為設(shè)計(jì)組件之一，有很多細(xì)節(jié)容易被忽略，我們需要對(duì)每一個(gè)細(xì)小的元素進(jìn)行深入思考，如論任何大小組件，都需要做到精益求精，才能給用戶帶來(lái)更好的使用體驗(yàn)。

以下內(nèi)容主要分成兩大部分，第一是聊聊響應(yīng)式和自適應(yīng)的區(qū)別和原理，以及我們應(yīng)該如何去設(shè)計(jì)響應(yīng)式界面；第二部分也是比較關(guān)鍵的B端系統(tǒng)設(shè)計(jì)的核心，B端設(shè)計(jì)中臺(tái)完整構(gòu)建過(guò)程的具體步驟，以及應(yīng)用到的格式塔原則，和命名的一些注意事項(xiàng)，內(nèi)容較多，大家可以根據(jù)上述目錄來(lái)選擇性閱讀。

1.1多端兼容設(shè)計(jì)的發(fā)展史

簡(jiǎn)單概括多端兼容設(shè)計(jì)的發(fā)展史，最早是桌面端，比如桌面的一些應(yīng)用；后來(lái)出現(xiàn)了移動(dòng)端，針對(duì)移動(dòng)端大家用的都是WAP，指一種無(wú)線應(yīng)用協(xié)議，大家在用手機(jī)瀏覽一些網(wǎng)站，會(huì)把網(wǎng)站翻譯成一種低流量的瀏覽方式，比如去掉圖片大圖，只剩全文字，因?yàn)楫?dāng)時(shí)網(wǎng)絡(luò)不好，早在3G和2G時(shí)代移動(dòng)端用的都是WAP；在2008年之后出現(xiàn)了響應(yīng)式，也就是做一套代碼可以兼容三端（網(wǎng)頁(yè)、移動(dòng)端、iPad）設(shè)備，在發(fā)展的同時(shí)也遇到很多問(wèn)題，但響應(yīng)式同時(shí)也遇到了很多問(wèn)題；于是又出現(xiàn)了自適應(yīng)，指不同的設(shè)備打開不同的頁(yè)面進(jìn)行自適應(yīng)，自適應(yīng)能增加效率，但需要增加工作量；2017年以后直到現(xiàn)在看到最常用的就是漸進(jìn)式，類似完整的像在使用一個(gè)APP。這是多端兼容設(shè)計(jì)的整體的發(fā)展。

1.2 響應(yīng)式布局的種類

1.2.1 響應(yīng)式布局RWD

可以理解成用戶在手機(jī)、電腦、ipad打開同一個(gè)界面，所呈現(xiàn)的界面是一樣的。需要考慮移動(dòng)端設(shè)計(jì)和網(wǎng)頁(yè)端怎么通過(guò)一套代碼進(jìn)行兼容。

1.2.2 自適應(yīng)布局AWD

自動(dòng)布局算是響應(yīng)式的一種，但平時(shí)看到很多響應(yīng)式其實(shí)并不是真正的響應(yīng)式，而是自動(dòng)布局，因?yàn)榻缑嬖诓煌脑O(shè)備用的是不同的模板，當(dāng)我們用電腦打開呈現(xiàn)的是一套模板，而用手機(jī)打開則是另外一套模板，這種看起來(lái)是響應(yīng)式，其實(shí)不是。因?yàn)楫?dāng)我在開發(fā)者模式下調(diào)節(jié)不同設(shè)備展示時(shí)，就會(huì)發(fā)現(xiàn)，其實(shí)是換了一個(gè)網(wǎng)址來(lái)根據(jù)不同的設(shè)備進(jìn)行自適應(yīng)的，而真正的響應(yīng)式是不需要刷新的，在拖小窗口的時(shí)候就會(huì)變成手機(jī)端的那個(gè)樣子。

1.2.3 漸進(jìn)式布局PWD

漸進(jìn)式布局是近幾年比較新起的，這種布局設(shè)計(jì)，很像一個(gè)網(wǎng)站或者本身它就是一個(gè)網(wǎng)站，但用起來(lái)就像一個(gè)APP一樣，看到這里大家很容易相到，小程序就是漸進(jìn)式布局得一種，小程序明顯是一個(gè)網(wǎng)頁(yè)，但通過(guò)技術(shù)的一些嵌入和一些接口或者緩存的方式的操作，讓用戶在使用的時(shí)候感覺小程序就是一個(gè)APP，但核心技術(shù)還是web網(wǎng)頁(yè)。

1.3 如何應(yīng)用設(shè)計(jì)響應(yīng)式

響應(yīng)式的原理是通過(guò)定位的方式來(lái)做響應(yīng)式的各種開發(fā)，需要在頁(yè)面中至少標(biāo)出這十個(gè)點(diǎn)：中心點(diǎn)，上下左右點(diǎn)，上左上右點(diǎn)和下左下右點(diǎn)，這幾個(gè)點(diǎn)其實(shí)就代表了做響應(yīng)式和做布局相應(yīng)的位置。這樣可能大家不容易理解，其實(shí)結(jié)合figma來(lái)看，這些點(diǎn)對(duì)應(yīng)的就是這樣（如下圖），在figma中的布局點(diǎn)。設(shè)計(jì)師通過(guò)調(diào)節(jié)圖形的布局點(diǎn)，可以做到在頁(yè)面拉伸時(shí)，讓想動(dòng)的元素跟隨變化，不動(dòng)的元素靜止不動(dòng)，這就是響應(yīng)式的原理。換言之，我們做響應(yīng)式布局的原理也就是通過(guò)figma或者sketch中的布局約束這個(gè)功能來(lái)實(shí)現(xiàn)的。

1.4 響應(yīng)式和自適應(yīng)的區(qū)別

01、響應(yīng)式

如下圖是響應(yīng)式的優(yōu)點(diǎn)和缺點(diǎn)。響應(yīng)式其實(shí)就是只開發(fā)一套頁(yè)面，這個(gè)頁(yè)面兼容三端。雖然做了響應(yīng)式，但如何響應(yīng)是需要設(shè)計(jì)師去設(shè)計(jì)的。比如我們?cè)O(shè)計(jì)了一個(gè)移動(dòng)端界面，然后全部做好對(duì)應(yīng)的自動(dòng)布局，再進(jìn)行頁(yè)面拉伸，內(nèi)容隨之會(huì)發(fā)生變化，比如當(dāng)拉伸到1024*768的時(shí)候，也就是iPad的尺寸，就會(huì)發(fā)現(xiàn)局部在設(shè)計(jì)上有些不合實(shí)際情況，這時(shí)就需要設(shè)計(jì)師在對(duì)應(yīng)尺寸的設(shè)計(jì)稿上進(jìn)行內(nèi)容上的微調(diào)，比如按鈕不可能那么長(zhǎng)，就把按鈕設(shè)計(jì)的短一點(diǎn)。當(dāng)繼續(xù)進(jìn)行拉伸到1440網(wǎng)頁(yè)的寬度時(shí)，然后再酌情針對(duì)網(wǎng)頁(yè)尺寸的呈現(xiàn)樣式，局部進(jìn)行尺寸的調(diào)整，比如文字和按鈕被拉伸到網(wǎng)頁(yè)版都需要居中對(duì)齊，電腦端的樣式就需要設(shè)計(jì)師重新排版了。

通常在B端系統(tǒng)，設(shè)計(jì)師需要做響應(yīng)式設(shè)計(jì)時(shí)，往往是從大往小做設(shè)計(jì)，這也取決于這個(gè)B端產(chǎn)品是否需要進(jìn)行移動(dòng)端的設(shè)計(jì)，《B端設(shè)計(jì)總概二》中提到過(guò)什么情況下進(jìn)行設(shè)計(jì)B端移動(dòng)端。如果需要設(shè)計(jì)B端移動(dòng)端，就需要我們將網(wǎng)頁(yè)改成移動(dòng)端設(shè)計(jì)，比如B端的側(cè)邊欄導(dǎo)航在拉伸到移動(dòng)端時(shí)，就會(huì)變成用一個(gè)折疊懸浮的iocn來(lái)替代等等這樣設(shè)計(jì)上的改變。在figma中，做三端拉伸時(shí)候，可以用斷點(diǎn)插件來(lái)進(jìn)行演示，通過(guò)對(duì)斷點(diǎn)插件的設(shè)置，就可以完美的看到頁(yè)面在三端不同情況的適配呈現(xiàn)，斷點(diǎn)插件用來(lái)做演示非常方便。

02、自適應(yīng)

如下圖是自適應(yīng)的優(yōu)點(diǎn)和缺點(diǎn)，其實(shí)就是一個(gè)項(xiàng)目開發(fā)三個(gè)頁(yè)面，分別做定制設(shè)計(jì)，網(wǎng)頁(yè)端、移動(dòng)端和Ipad端。

2.1必讀前言

我們都知道2021年也就是今年是我國(guó)新基建的元年，十四五規(guī)劃2035遠(yuǎn)景目標(biāo)里提到重點(diǎn)發(fā)展傳統(tǒng)企業(yè)數(shù)字化轉(zhuǎn)型，尤其是今年我們?cè)O(shè)計(jì)師更能深刻體會(huì)，C端和B端已經(jīng)是完全兩個(gè)不同的行業(yè)，C端發(fā)展近十年，已經(jīng)很難再做到創(chuàng)新上的突破，該做的功能和創(chuàng)新都已經(jīng)做了，而B端這片藍(lán)海才剛剛開始發(fā)力，很多企業(yè)也都在考慮B端系統(tǒng)的搭建，降本提效率成了很多公司新的指標(biāo)，因此數(shù)字化轉(zhuǎn)型重點(diǎn)在于B端系統(tǒng)探索，B端重點(diǎn)在于中臺(tái)的搭建！設(shè)計(jì)師通過(guò)設(shè)計(jì)中臺(tái)，構(gòu)建出基本的業(yè)務(wù)類型，再分類到業(yè)務(wù)中，構(gòu)建出不同的業(yè)務(wù)界面，所以設(shè)計(jì)中臺(tái)非常關(guān)鍵，很多公司經(jīng)常會(huì)用這兩個(gè)系統(tǒng)去構(gòu)建，Antdesign和Elemnet就是設(shè)計(jì)中臺(tái)，我們會(huì)發(fā)現(xiàn)用Antdesign可以做出很多的系統(tǒng)，那怎么進(jìn)行設(shè)計(jì)中臺(tái)的設(shè)計(jì)呢？和我們?cè)O(shè)計(jì)師有什么樣的關(guān)聯(lián)度呢？帶著這個(gè)問(wèn)題，我們深度探索B端設(shè)計(jì)中臺(tái)的落地！

2.2 中臺(tái)的概念及作用

概念：中臺(tái)是互聯(lián)網(wǎng)的術(shù)語(yǔ)，一般應(yīng)用于大型企業(yè)，中國(guó)互聯(lián)網(wǎng)的變革永遠(yuǎn)是從大型互聯(lián)網(wǎng)開始，大型互聯(lián)網(wǎng)公司引發(fā)了技術(shù)的變革，這也是中臺(tái)的興起，一般指搭建一個(gè)靈活快速應(yīng)對(duì)變化的架構(gòu)，快速實(shí)現(xiàn)前端提的需求，避免重復(fù)建設(shè)，達(dá)到提高工作效率目的。

作用：降本提效。如果沒有組件庫(kù)，普通設(shè)計(jì)師一天最多做十個(gè)頁(yè)面，再多就不太可能了，如果有組件化得產(chǎn)生，一天可以做一百個(gè)左右的界面。在面對(duì)B端系統(tǒng)這樣幾千個(gè)頁(yè)面的巨大的工作量前，組件庫(kù)的作用尤為重要。但如果落地，就需要前端工程師的密切配合，因?yàn)樵O(shè)計(jì)師設(shè)計(jì)的組件只是一個(gè)樣式，而前端需要把組件進(jìn)行代碼化，所以組件一定是代碼化的，也就是說(shuō)只有代碼化的組件才是真正的組件。所以視覺組件的復(fù)用，和前端代碼的復(fù)用，可以大大提高設(shè)計(jì)師的工作效率。

2.3 設(shè)計(jì)中臺(tái)的構(gòu)建過(guò)程

2.3.1 基本庫(kù)建立

基本庫(kù)指的是一些色彩系統(tǒng)、字體系統(tǒng)、圖標(biāo)系統(tǒng)、柵格系統(tǒng)、間距系統(tǒng)等等，之所以強(qiáng)調(diào)系統(tǒng)兩個(gè)字，有系統(tǒng)就要統(tǒng)一規(guī)則和統(tǒng)一規(guī)范，然后進(jìn)行調(diào)用應(yīng)用在系統(tǒng)中的各個(gè)地方，比如我們想調(diào)用一個(gè)顏色，不是去隨選用一個(gè)顏色，應(yīng)該嚴(yán)格的從色彩系統(tǒng)中去調(diào)用，如果系統(tǒng)組件庫(kù)里沒有這個(gè)顏色，我們也絕對(duì)不可以使用，可以先用替代色做或者根據(jù)業(yè)務(wù)再進(jìn)行補(bǔ)充顏色進(jìn)組件庫(kù)為了后續(xù)的調(diào)用，這是一種比較嚴(yán)謹(jǐn)?shù)氖褂梅绞健Ｋ栽诮⒔M件庫(kù)的時(shí)候我們要考慮全面，組件庫(kù)中如果沒有相應(yīng)的組件，我們應(yīng)該試著反推一下，是否要加進(jìn)組件庫(kù)中去，來(lái)進(jìn)行系統(tǒng)的調(diào)用。在做中臺(tái)的過(guò)程中，我們一直使用Antdesign，我們對(duì)組件的名稱，組件的分類其實(shí)一點(diǎn)都不陌生，其實(shí)Antdesign也在借鑒國(guó)外的Bootstrap組件庫(kù)（大家感興趣可以下載Bootstrap組件庫(kù)進(jìn)行查看），所以并不是Antdesign組件庫(kù)形成了一定的規(guī)則，它也是在沿用別人的規(guī)則，而這些規(guī)則也需要不斷的有大公司去繼承出來(lái)，所以慢慢衍生出來(lái)現(xiàn)在這樣的組件庫(kù)，那中臺(tái)設(shè)計(jì)，首先要搭建基本庫(kù)，把基本庫(kù)里的基礎(chǔ)一些系統(tǒng)搭建好后，我們繼續(xù)去做擴(kuò)展庫(kù)。

2.3.2 擴(kuò)展庫(kù)建立

如下圖，擴(kuò)展庫(kù)中包含了很多內(nèi)容，比如分了四類，導(dǎo)航系統(tǒng)，數(shù)據(jù)錄入，數(shù)據(jù)展示和反饋系統(tǒng)。其中導(dǎo)航系統(tǒng)又包含了，面包屑導(dǎo)航、下拉菜單、導(dǎo)航菜單、頂部導(dǎo)航等等，包括后面的數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋系統(tǒng)也包含了很多內(nèi)容。我們做這樣的擴(kuò)展庫(kù)，也不需要做成像Antdesign的組件庫(kù)里包含的那么多，或者和新出得字節(jié)Arco組件庫(kù)，因?yàn)樗鼈兠嫦虻氖窍到y(tǒng)級(jí)的解決方案，各行各業(yè)都可以用它，它面向的是一個(gè)大系統(tǒng)，也許我們只涉及到了其中的20%，因?yàn)橐矝]有一個(gè)系統(tǒng)能用到它所有的組件，所以我們自己在設(shè)計(jì)組件庫(kù)的時(shí)候，一定是按照我們自己項(xiàng)目的范圍去做組件庫(kù)，而不是做一個(gè)大而全的，大而全的組件庫(kù)對(duì)我們也沒有意義。它們做的是公共平臺(tái)，而我們要做的是一個(gè)專屬平臺(tái)。

2.3.3 方法庫(kù)建立

形成完基本庫(kù)和擴(kuò)展庫(kù)后，第三步是建立方法庫(kù)。方法庫(kù)告訴我們的是什么時(shí)候用，比如我做了一個(gè)多選框，這個(gè)多選框應(yīng)該什么時(shí)候用，是不是只要遇見一個(gè)選擇就去用多選框，肯定不是，應(yīng)該加以說(shuō)明什么時(shí)候用這個(gè)多選框。類似于是組件的設(shè)計(jì)說(shuō)明。

2.3.4 案例庫(kù)建立

最后再做一個(gè)案例庫(kù)，最佳實(shí)踐庫(kù)，具體組件什么時(shí)候用我們知道了，接著案例庫(kù)就是在告訴我們應(yīng)該如何正確的使用，或者說(shuō)的方法是什么。比如標(biāo)簽的左對(duì)齊和右對(duì)齊，這種情況都對(duì)，什么時(shí)候用頂對(duì)齊，什么時(shí)候用左對(duì)齊，什么時(shí)候用右對(duì)齊呢？那么根據(jù)眼動(dòng)儀實(shí)驗(yàn)數(shù)據(jù)數(shù)據(jù)來(lái)看，并且結(jié)合給出一些工作中業(yè)務(wù)中的最佳實(shí)踐得案例放進(jìn)去，給使用的人去做指引。

所以設(shè)計(jì)師做的事情，不僅僅是應(yīng)用組件庫(kù)和創(chuàng)造組價(jià)庫(kù)，還應(yīng)該指導(dǎo)其他設(shè)計(jì)師，指導(dǎo)開發(fā)人員在去復(fù)用每個(gè)頁(yè)面組件的的時(shí)候，應(yīng)該怎么正確的使用，這也是在B端設(shè)計(jì)中一個(gè)關(guān)鍵的環(huán)節(jié)，同時(shí)我們的視覺系統(tǒng)一定也是和業(yè)務(wù)有關(guān)聯(lián)度的，所以在B端中做設(shè)計(jì)一定也不會(huì)脫離業(yè)務(wù)去做，我們一定要聯(lián)系到實(shí)際的業(yè)務(wù)場(chǎng)景中，這個(gè)業(yè)務(wù)場(chǎng)景指的就是業(yè)務(wù)和視覺的結(jié)合，在做C端的時(shí)候，業(yè)務(wù)場(chǎng)景一定不會(huì)比B端多，C端的業(yè)務(wù)場(chǎng)景大多是定制化的業(yè)務(wù)場(chǎng)景，它要求的是個(gè)性化，不要求通用，盡量得個(gè)性化，比如圖標(biāo)、按鈕、頁(yè)面，而B端需要統(tǒng)一化，中臺(tái)組件庫(kù)的落地，可以大大提高設(shè)計(jì)師的工作效率和開發(fā)人員的協(xié)同效率，嚴(yán)謹(jǐn)?shù)恼{(diào)用組件使用組件，可以使得系統(tǒng)頁(yè)面保持高度的一致。

2.4 認(rèn)識(shí)格式塔原則

2.4.1接近性

如圖1：可以看出縱列的關(guān)系更緊密，因?yàn)榭v間距小于行間距。

如圖2：可以看出行間距大于列間距，它得橫向關(guān)系更加緊密。通過(guò)圖中這樣的視覺設(shè)計(jì)為什么會(huì)感覺間距更加緊密呢？這屬于用戶心理學(xué)的應(yīng)用，如果元素相鄰的更近，元素之間的關(guān)系就會(huì)更加的緊密。

如圖3：如果元素相鄰的關(guān)系都是保持一樣的，那么它們的關(guān)系是相對(duì)對(duì)等的。

由此可以得出結(jié)論，如果相鄰的關(guān)系越近，它們的關(guān)聯(lián)度就越近，如果相鄰的越遠(yuǎn)，它們的關(guān)聯(lián)度就越遠(yuǎn)。

應(yīng)用案例：如圖4卡片中得標(biāo)題和內(nèi)容，設(shè)計(jì)中把標(biāo)題和內(nèi)容進(jìn)行區(qū)分，所以我們會(huì)做大量的留白，這樣的留白就會(huì)讓信息結(jié)構(gòu)具有層次感，層次感就是指它們信息結(jié)構(gòu)的關(guān)聯(lián)度，如果想讓它們有關(guān)聯(lián)度，就讓它們距離近一點(diǎn)不要做區(qū)分，如果不想讓它們有關(guān)聯(lián)度，或者關(guān)聯(lián)度出現(xiàn)一個(gè)等級(jí)的區(qū)分，那么就可以加一條線，讓它們之間的關(guān)聯(lián)度分隔開。這就是格式塔接近性的應(yīng)用。

2.4.2 相似性

如圖5：如果去區(qū)分右邊的形狀，通常我們會(huì)根據(jù)形狀進(jìn)行區(qū)分，因?yàn)槿说臐撘庾R(shí)會(huì)認(rèn)為相似的形狀會(huì)更有相關(guān)的分類性。這就是格式塔中的相似性原則。

應(yīng)用案例：如果文字的標(biāo)題大小是保持一致的，包括它有統(tǒng)一的大小，統(tǒng)一的色彩，統(tǒng)一的字號(hào)，那系統(tǒng)中的其他同樣功能的地方，都應(yīng)該用統(tǒng)一的文字，這就是格式塔相似性的應(yīng)用，比如圖標(biāo)也是一樣，只有用了相似的圖形大小，相似的顏色，在相同的位置，用相同的圖標(biāo)進(jìn)行表達(dá)，圖標(biāo)之間的設(shè)計(jì)才具有相似性。

2.4.3 主體與背景

如圖6：可以看到有一個(gè)L，是主體與背景進(jìn)行了區(qū)分，如果在設(shè)計(jì)的時(shí)候讓L看的更加明顯，我們采用的辦法就是將主體的色彩或者形狀變的更加獨(dú)特，或者將背景的顏色變得更加分明，這樣就可以做到那個(gè)L看的更加明顯。這就是主題與背景區(qū)分原則。

應(yīng)用案例：比如警告彈出，可以用色彩去區(qū)分，目標(biāo)就是讓用戶看的更加得清晰，當(dāng)警告的時(shí)候給用戶一個(gè)警告的信息，當(dāng)成功的時(shí)候給用戶一個(gè)成功的信息。還有類似對(duì)話框的彈出，采用背景變暗和加陰影的方式，都使用到了格式塔的主體與背景變化關(guān)系的原理。因此應(yīng)用在我們?cè)O(shè)計(jì)系統(tǒng)中，前景和背景進(jìn)行區(qū)分的時(shí)候，我們就可以通過(guò)色彩進(jìn)行區(qū)分，色彩的區(qū)分要保持統(tǒng)一，比如背景色彩透明度50%同時(shí)加一些背景模糊，其他的背景也需要保持一致，陰影也是一樣，如果把陰影放在一個(gè)平面上，距離平面越近，它得陰影越短，距離平面越遠(yuǎn)，它得陰影越長(zhǎng)，這也是陰影的層級(jí)關(guān)系。

2.4.4 封閉性

如圖7：可以看出這是一個(gè)四分之一的圓形。

如圖8：這個(gè)圖可以看出是一個(gè)五角星。

封閉性應(yīng)用案例：當(dāng)一個(gè)形狀被另外一個(gè)形狀或者被另外一個(gè)色彩阻斷的時(shí)候，并不影響人們對(duì)這個(gè)形狀額外得認(rèn)知，一定會(huì)腦補(bǔ)出另外一個(gè)形狀，這個(gè)原則和我們UI的關(guān)系是什么呢？比如一個(gè)loading，半圓一直在旋轉(zhuǎn)，或者圖表中的圓占比，我們就可以判斷出誰(shuí)大誰(shuí)小，誰(shuí)多誰(shuí)少，判斷出當(dāng)前的進(jìn)程和位置，封閉性原則通常應(yīng)用在圖標(biāo)的設(shè)計(jì)，圖表的設(shè)計(jì)和步驟條的設(shè)計(jì)中。

2.4.5 連續(xù)性

如圖9：可以看出用一些簡(jiǎn)單得形狀來(lái)體現(xiàn)，其中三角形具有明顯的指向性，三角形箭頭指向右邊，上面五個(gè)是一組，可以看出它們具有連續(xù)性；另外一組三角形箭頭指向右下角，可以看出它們是連續(xù)的一組。不同的形狀會(huì)有連續(xù)性，箭頭也特別有指向性，這就是為什么返回和前要進(jìn)放在不同的位置，當(dāng)我們的數(shù)據(jù)需要有連續(xù)的時(shí)候，我們也要使用相似的形狀來(lái)表達(dá)，這就是連續(xù)性原則的應(yīng)用。

同理如圖10：連續(xù)性一定是要有連續(xù)等階的變化，從左上角開始，向下和向右我們可以看出有明顯的顏色連續(xù)等階變化，通過(guò)色彩的透明度也可以做到連續(xù)性。

2.5 組件的命名規(guī)則

2.5.1 如何正確的命名

很多公司或者不同公司有不同的命名方式，這個(gè)需要和團(tuán)隊(duì)開發(fā)提前做溝通，主要以方便開發(fā)習(xí)慣操作為主，如果不命名也不能非得說(shuō)成是錯(cuò)誤的，命名可以理解成是一件錦上添花的事情，因?yàn)橐磺卸家孕蕛?yōu)先，命名自然會(huì)影響工作效率，通常情況，組件的命名可以分成組件的名稱、級(jí)別、尺寸、狀態(tài)，這樣的命名順序來(lái)進(jìn)行，這樣命名開發(fā)使用也比較方便，因?yàn)槭前凑樟碎_發(fā)的統(tǒng)一規(guī)則來(lái)進(jìn)行命名的。如圖所示：

2.5.2 更多命名英文詞匯

當(dāng)英文不好的時(shí)候，推薦大家記常用組件英文名，以及常用狀態(tài)名、級(jí)別名、內(nèi)部名、尺寸名和位置名，那這些英文也幾乎涵蓋了工作中80%的英文詞匯，收藏記憶哦~

至此B端系統(tǒng)設(shè)計(jì)總概系列為終結(jié)篇，回顧第一篇主要內(nèi)容是如何正確設(shè)計(jì)組件庫(kù)，B端業(yè)務(wù)調(diào)研的具體過(guò)程步驟，以及視覺規(guī)范的建立，可以看出第一篇屬于B端設(shè)計(jì)的方法論或者設(shè)計(jì)指導(dǎo)，也是為開展B端設(shè)計(jì)前的一些準(zhǔn)備工作；回顧第二篇總概主要內(nèi)容是如何設(shè)計(jì)表單、表格、圖標(biāo)、儀表盤這些經(jīng)常用到的設(shè)計(jì)難點(diǎn)，第二篇更加講究設(shè)計(jì)落地過(guò)程中遇到的疑難雜癥，專業(yè)技法；回顧當(dāng)前總概三，主要內(nèi)容就是中臺(tái)規(guī)范的建立和自適應(yīng)、響應(yīng)式適配的難點(diǎn)，主要是成系統(tǒng)的B端設(shè)計(jì)步驟。我們都知道B端市場(chǎng)剛剛打開，而且當(dāng)下對(duì)B端設(shè)計(jì)師的需求還遠(yuǎn)遠(yuǎn)不能滿足我國(guó)現(xiàn)代化建設(shè)，數(shù)字化推進(jìn)這么的大市場(chǎng)，作為UIUX，更早的拓寬一條路是我們當(dāng)下必要的選擇，謝謝閱讀，祝愿各位2022乘風(fēng)破浪，B端設(shè)計(jì)學(xué)有所成，如虎生翼！