作為一名產(chǎn)品經(jīng)理，可能會(huì)遇到?jīng)]有資源給你做交互，也沒有資源給你畫UI的情況，這種時(shí)候便需要學(xué)會(huì)自給自足。這個(gè)系列是作者在兩年中“自給自足”做設(shè)計(jì)的一些發(fā)現(xiàn)，本文分析了設(shè)計(jì)體系和模態(tài)對(duì)話框，一起來(lái)看一下吧。

眾所周知（大霧，黑帕云這樣的產(chǎn)品幾乎使用了所有類型 B 端的組件。

由于我司設(shè)計(jì)資源有限，所以在擁有了組件庫(kù)、設(shè)計(jì)師定好了設(shè)計(jì)規(guī)范之后，作為產(chǎn)品經(jīng)理就直接可以手?jǐn)]設(shè)計(jì)稿了。

作為一個(gè)長(zhǎng)大了的產(chǎn)品經(jīng)理，有時(shí)候沒有資源給你做交互沒有資源給你畫 UI 的，你要自己學(xué)會(huì)自給自足。

這個(gè)系列就是作為產(chǎn)品經(jīng)理的我，在這兩年中“自給自足”做設(shè)計(jì)的一些總結(jié)與發(fā)現(xiàn)。

自給自足的前提是，前面說(shuō)的組件庫(kù)和設(shè)計(jì)規(guī)范，即擁有一個(gè)設(shè)計(jì)體系（Design System）。

01 什么是設(shè)計(jì)體系？

關(guān)于設(shè)計(jì)體系的定義和內(nèi)容各家都不同，我找出來(lái)了以下案例供參考。

1. 《設(shè)計(jì)體系：數(shù)字產(chǎn)品設(shè)計(jì)的系統(tǒng)化方法》

Tilio（一個(gè)寫作和筆記應(yīng)用）聯(lián)合創(chuàng)始人，有十年 UX 設(shè)計(jì)經(jīng)驗(yàn)的阿拉·霍爾馬托娃在《設(shè)計(jì)體系：數(shù)字產(chǎn)品設(shè)計(jì)的系統(tǒng)化方法》一書中這么定義：

設(shè)計(jì)體系是為了實(shí)現(xiàn)數(shù)字產(chǎn)品的目的而組織起來(lái)的一套相互關(guān)聯(lián)的模式和共享實(shí)踐。模式指的是界面中那些重復(fù)的要素：用戶流程、交互方式、按鈕、文本框、圖標(biāo)、配色、排版、文案，等等。實(shí)踐則是我們?nèi)绾蝿?chuàng)建、捕獲、共享和使用這些模式，尤其是在團(tuán)隊(duì)協(xié)作時(shí)做這些事情的方法。

書中將設(shè)計(jì)體系分成以下幾個(gè)部分：設(shè)計(jì)目的、設(shè)計(jì)原則、組件庫(kù)、樣式指南，以及用于提高設(shè)計(jì)師和開發(fā)人員溝通效率的工作流程和實(shí)用工具。

整理之后，可以參考下圖：

2. Salesforce：Lightning Design System

3. Material Design

可以發(fā)現(xiàn)，以上設(shè)計(jì)體系無(wú)論如何定義概念，都是由設(shè)計(jì)原則+設(shè)計(jì)指南+一些基礎(chǔ)的元素（比如 Design Token、Material Foundation、Icons）+組件庫(kù)+其他資源工具構(gòu)成。

形成這些內(nèi)容的目的都是為了給自己產(chǎn)品建立一套保證設(shè)計(jì)質(zhì)量、提升設(shè)計(jì)決策、提升溝通效率的“工具包”，從而讓產(chǎn)品形成自己的符合設(shè)計(jì)原則的風(fēng)格。

所以設(shè)計(jì)體系是什么不重要，重要的是如何在遵循設(shè)計(jì)原則下，能夠高效做出高質(zhì)量的設(shè)計(jì)。

02 設(shè)計(jì)原則（Design Principes）

一個(gè)開源設(shè)計(jì)原則和方法的網(wǎng)站 Design Principle這樣定義設(shè)計(jì)原則：Design Principles are a set of considerations that form the basis of any good product.

譯為“設(shè)計(jì)原則是構(gòu)成任何好產(chǎn)品的一套基礎(chǔ)考慮因素?！?/p>

比如 Salesforce 的設(shè)計(jì)原則是：清晰、高效、一致、美觀。并且優(yōu)先級(jí)由前到后。

可以理解為 Salesforce 會(huì)追求清晰大于高效、一致、美觀，比如在產(chǎn)品設(shè)計(jì)中，讓用戶清楚的看到、理解、自信地去操作要比任何事情都要重要。

這個(gè)準(zhǔn)則很容易理解，可以推論出 Salesforce 在度量體驗(yàn)時(shí)，將“易用性”放在了第一位，即作為一個(gè) SaaS 產(chǎn)品，不能有任何讓用戶產(chǎn)生疑惑的地方。如果在設(shè)計(jì)上的美觀而要犧牲清晰，這就是不可取的。

03 組件庫(kù)

有了設(shè)計(jì)原則之后，下一步是需要一個(gè)組件庫(kù)。這里說(shuō)的組件庫(kù)囊括了無(wú)論是原子化的顏色、字體、陰影、Icon 這些基本的元素，還包括了已經(jīng)封裝好的組件，如 Button、Alert、Toast、Text Input。

關(guān)于為什么要組件化，也不多說(shuō)了，之前看過(guò)一篇閱文體驗(yàn)設(shè)計(jì) YUX 的《組件化思維—— 適應(yīng)并推動(dòng)業(yè)務(wù)及產(chǎn)品變革的設(shè)計(jì)案例》寫得非常清楚。

接下來(lái)我通過(guò) Minecraft 這個(gè)游戲來(lái)總結(jié)了組件庫(kù)。

玩過(guò)生存模擬類游戲大家都知道，在游戲中會(huì)有一些可以靠雙手勞動(dòng)得來(lái)的基礎(chǔ)材料，比如砍樹砍來(lái)的木頭、地上撿的石頭、挖礦挖的燧石。這些基礎(chǔ)材料可以合成一些簡(jiǎn)單處理過(guò)的材料，比如把木頭合成為木板。然后可以再把半成品進(jìn)一步加工，比如木棍。

在 Minecraft 這個(gè)游戲中，如果玩家要制造一個(gè)弓箭，需要一個(gè)弓和一個(gè)箭。弓和箭的合成又需要一些半成品和成品或者原材料來(lái)加工制作，如下圖：

對(duì)應(yīng)在設(shè)計(jì)組件庫(kù)中可以對(duì)照查看，一個(gè)完整的頁(yè)面是可以通過(guò)一些元素、控件、組件、大組件組成：

04 適用人群

關(guān)于 「B 端設(shè)計(jì)總結(jié)」這一系列，主要是我個(gè)人在已有了我們的設(shè)計(jì)規(guī)范和組件庫(kù)后，“自給自足”的情況下探索出來(lái)的一些組件使用規(guī)則，更偏向產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師來(lái)參考。

所以系列中不會(huì)寫設(shè)計(jì)規(guī)范，比如說(shuō)字號(hào)、顏色、間距等等這些屬于設(shè)計(jì)規(guī)范中內(nèi)容。而是基于已有的規(guī)范，總結(jié)之前我們功能中涉及到的該使用哪些組件，也可以稱之為狹義上的設(shè)計(jì)指南（Design Guidelines）或者設(shè)計(jì)模式（Design Patterns）。

05 設(shè)計(jì)原則 Design Principes

正式開始之前，想整理一個(gè)合格的設(shè)計(jì)應(yīng)該有哪些方面的考量因素，這樣能夠幫助我們?cè)谧鲈O(shè)計(jì)時(shí)，盡大可能地保證設(shè)計(jì)的質(zhì)量。

在前言中提到設(shè)計(jì)原則，使用了 Salesforce 作為案例介紹了他們的設(shè)計(jì)原則是：清晰、高效、一致、美觀。

但這更像是宏觀層面的品牌原則，不僅是設(shè)計(jì)，而是覆蓋在方方面面?zhèn)鬟f給用戶的感知。

而國(guó)內(nèi)的設(shè)計(jì)團(tuán)隊(duì)，會(huì)把設(shè)計(jì)原則落實(shí)在細(xì)節(jié)。這也更通用、更加能指導(dǎo)設(shè)計(jì)執(zhí)行。

比如騰訊云的 Element UI 的設(shè)計(jì)原則是：

京東的 LEGAO Design 的設(shè)計(jì)原則是：一致性、可控性、秩序性、提高效率、及時(shí)反饋、簡(jiǎn)潔美觀、寬容性。

這兩個(gè)設(shè)計(jì)團(tuán)隊(duì)給出的設(shè)計(jì)原則都包含了一致、反饋、效率、可控，LEGAO Design 在基礎(chǔ)上增加了秩序性、簡(jiǎn)潔美觀和寬容性。

在 LEGAO Design 的設(shè)計(jì)原則中有非常詳盡的舉例和說(shuō)明，在此就不搬運(yùn)了，建議像我一樣沒有設(shè)計(jì)基礎(chǔ)的產(chǎn)品經(jīng)理同學(xué)仔細(xì)學(xué)習(xí)。

說(shuō)點(diǎn)兒不同的。

其中 Element Design 和 LEGAO Design 的“可控”稍有不同，Element Design 的可控包含兩個(gè)方面：

1. 用戶的決策是可控的，要根據(jù)場(chǎng)景給予操作建議或安全提示，但不能代替用戶決策。
2. 結(jié)果要求是可控的，用戶可以自由決策，包括撤銷、回退和終止當(dāng)前操作。

LEGAO Design 在此基礎(chǔ)上將“用戶決策”和“結(jié)果可控”結(jié)合在一起，認(rèn)為在危險(xiǎn)操作或者破壞性操作需要提前告知用戶，并且應(yīng)該要提供撤銷、回退和終止等操作。

另外還對(duì)“可控”增加了“進(jìn)度可控”：清晰地告知用戶當(dāng)前處在系統(tǒng)的什么位置，從哪里來(lái)，可以到哪里去。比如提供清晰便捷的導(dǎo)航方式，非必要條件下導(dǎo)航各個(gè)標(biāo)簽權(quán)重保持一致，不要因?yàn)椴町惢瘜?duì)用戶產(chǎn)生選擇性干擾。

此外， LEGAO Design 在可控的基礎(chǔ)上，格外增加了“寬容性”，聲明應(yīng)當(dāng)允許用戶犯錯(cuò)：

設(shè)計(jì)應(yīng)該是幫助用戶避免犯錯(cuò)，當(dāng)危險(xiǎn)發(fā)生時(shí)能保護(hù)用戶免受傷害。寬容性設(shè)計(jì)是通過(guò)約束和良好的功能可見性來(lái)防止錯(cuò)誤的發(fā)生，能提示潛在的危險(xiǎn)，當(dāng)某一選擇能帶來(lái)傷害時(shí)會(huì)要求先確認(rèn)后執(zhí)行。寬容性設(shè)計(jì)允許錯(cuò)誤發(fā)生時(shí)的動(dòng)作可逆性操作。

在《交互設(shè)計(jì)精髓中》也單獨(dú)列了一章來(lái)講“防止錯(cuò)誤，通知決定”。

沒有人能夠保證所有的設(shè)計(jì)都是“清晰”（Salesforce 的 Design Principe）的，即便是設(shè)計(jì)是清晰的，也會(huì)有意外的情況。所以好的設(shè)計(jì)應(yīng)該是清晰，并且允許用戶犯錯(cuò)的。

容錯(cuò)處理能夠在心理上暗示鼓勵(lì)用戶安心地多去探索你的產(chǎn)品。

而在一些情況上，容錯(cuò)處理有較大的成本，還來(lái)不及進(jìn)入開發(fā)，這時(shí)應(yīng)該換一種思路：我們需要盡可能地?cái)r截錯(cuò)誤的發(fā)生（這一部分見文末的小節(jié)「危險(xiǎn)提示 Danger Alert」）。

設(shè)計(jì)原則說(shuō)的差不多了，下面開始這個(gè)系列的正文。

06 模態(tài)框 Modal

在寫什么是模態(tài)對(duì)話框（Modal Dialog）之前，先來(lái)寫寫模態(tài)框（Modal）和對(duì)話框（Dialog）。

模態(tài)框一詞最早是從技術(shù)同事那聽來(lái)的，因?yàn)槲夷菚?huì)兒一直管這些叫彈框，事實(shí)也確實(shí)是如此。

在維基百科中這么定義：

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application’s main window.

A modal window creates amodethat disables the main window but keeps it visible, with the modal window as achild windowin front of it. Users must interact with the modal window before they can return to theparentapplication. This avoids interrupting theworkflowon the main window. Modal windows are sometimes calledheavy windowsormodal dialogsbecause they often display adialog box.

不專業(yè)地翻譯一下：

在應(yīng)用程序的交互設(shè)計(jì)中，模態(tài)窗口是一個(gè)從屬于主窗口的圖形控制元素。

一個(gè)模態(tài)窗口創(chuàng)建后，主窗口就失效了，但仍然保持可見。模態(tài)窗口能夠作為一個(gè)子窗口在主窗口的前面。此時(shí)用戶必須先與模態(tài)窗口進(jìn)行交互，才能返回到父窗口。這避免了中斷主窗口的工作流程，模態(tài)窗口有時(shí)候也被稱為重窗口（？）或者模態(tài)對(duì)話框，因?yàn)樗麄兘?jīng)常以對(duì)話框形式展示。

在一個(gè) React UI框架 Material-UI中這么描述模態(tài)框：

“模態(tài)框”（Modal）這個(gè)詞有時(shí)也被用來(lái)指代“對(duì)話框”，但是這種用法屬于誤用。模態(tài)框的窗口描述了 UI 的一部分。如果一個(gè)元素阻擋了用戶與應(yīng)用的其它部分的互動(dòng)，這個(gè)元素就是模態(tài)的。

簡(jiǎn)單總結(jié)就是：當(dāng)這個(gè)模態(tài)框被打開后，當(dāng)前的所有進(jìn)程都被阻斷了，直到這個(gè)模態(tài)框關(guān)閉。

基于上述的定義，歸納模態(tài)框常見的類型可以有以下幾種：

注意：這些類型不代表只屬于模態(tài)，也可以以非模態(tài)形式存在。

07 對(duì)話框 Dialog

第一次接觸“Dialog”這個(gè)詞還是在《交互設(shè)計(jì)精髓》中，書中給了很明確的概念：對(duì)話框以對(duì)話的方式讓使用者參與進(jìn)來(lái)，在對(duì)話框中它給出消息或要求輸入。

對(duì)話框又可以分為模態(tài)（Modal）和非模態(tài)（Modeless）兩種類型。

模態(tài)框在前面已經(jīng)描述過(guò)了，與之相反的就是非模態(tài)：當(dāng)非模態(tài)對(duì)話框被打開后，用戶可以運(yùn)行其他事情。

關(guān)于為什么要使用模態(tài)對(duì)話框這種類型，簡(jiǎn)單快速地可以使用這樣的決策原則：有重要的信息需要來(lái)阻斷當(dāng)前的進(jìn)程，希望用戶必須完成操作之后才能繼續(xù)往下進(jìn)行。

08 模態(tài)對(duì)話框 Modal Dialog

這篇文章主要寫我們常用的模態(tài)對(duì)話框。

在《交互設(shè)計(jì)精髓》中，將模態(tài)對(duì)話框按照“目的導(dǎo)向”分為五種類型：

1. 屬性（Property）
2. 功能（Function）
3. 進(jìn)度（Process）
4. 通知（Notification）
5. 公告（Bulletin）

因?yàn)闀幸矝]有具體舉例，所以我接下來(lái)會(huì)按照這五種類型列舉在黑帕云中的對(duì)話框示例。

1. 屬性對(duì)話框 Property Dialog

屬性對(duì)話框常見在一些設(shè)置、詳情中，比如電腦的系統(tǒng)設(shè)置、黑帕云的小組件配置。

這個(gè)對(duì)話框通常由一些復(fù)雜的設(shè)置項(xiàng)構(gòu)成。這種對(duì)話框適用于一些不太頻繁的操作。

2. 功能對(duì)話框 Function Dialog

功能對(duì)話框通常在菜單或者某個(gè)具體的按鈕打開，對(duì)話框中有一些對(duì)接下來(lái)這個(gè)功能事件的設(shè)置，這種對(duì)話框通常都會(huì)有一個(gè)[下一步]或者[確定]的主按鈕（Primary Boutton）用來(lái)確認(rèn)設(shè)置、關(guān)閉對(duì)話框并且執(zhí)行功能。

另外成對(duì)出現(xiàn)的還會(huì)有[取消]按鈕。

3. 進(jìn)度對(duì)話框 Process Dialog

這種對(duì)話框向用戶表明正在忙于某些內(nèi)部的功能，其他處理能力可能會(huì)降低。

在一些耗時(shí)較長(zhǎng)的進(jìn)度對(duì)話框中，還應(yīng)該有以下信息：

• 什么事情在進(jìn)行中
• 現(xiàn)在一切正常
• 最好能展示出現(xiàn)在還需要多久完成
• 現(xiàn)在進(jìn)度是多少，可以用“完成百分比”或者“已完成數(shù)/總需要完成數(shù)”表示
• 取消進(jìn)程的按鈕入口

上圖的例子中，macOS 軟件更新中的取消進(jìn)程是在 hover 進(jìn)度條時(shí)出現(xiàn)了“×”，代表可以取消下載。

黑帕云中批量編輯由于耗時(shí)較短（通常情況下小于 10 秒），在用戶等待感知的范圍內(nèi)，只需告知操作正在進(jìn)行中，一切正常即可，無(wú)需提供詳盡的進(jìn)度信息。

4. 通知對(duì)話框 Notification Dialog

通知對(duì)話框是將一些重要的信息匯報(bào)給用戶，來(lái)源可以是一些觸發(fā)的事件，也可以是其他用戶的通知。

常見的有通知中心對(duì)話框，處理完成某個(gè)操作的告知等等。

5. 公告對(duì)話框 Bulleting Dialog

公告對(duì)話框也是由程序自動(dòng)啟動(dòng)的。包含三種類型：錯(cuò)誤、警告、確認(rèn)。

這種對(duì)話框通常不會(huì)要求用戶填寫什么，只會(huì)詢問你“真的要進(jìn)行嗎？”或者告訴你一件事情。

所以在這種對(duì)話框上，一般只會(huì)有只有[取消]和[確認(rèn)]，或者[OK]。

這種對(duì)話框比較特殊，因?yàn)闆]有一般對(duì)話框的 Header 和關(guān)閉按鈕。
的框架，他們把這種類型的對(duì)話框直接做成一種組件，命名為警告對(duì)話框（Alert）。

我之前犯的錯(cuò)誤就是用這種對(duì)話框承載了一個(gè)功能性的操作對(duì)話框。

當(dāng)時(shí)是在做“復(fù)制應(yīng)用”這個(gè)功能，需要一個(gè)對(duì)話框來(lái)承載復(fù)制的應(yīng)用時(shí)是否復(fù)制應(yīng)用中的數(shù)據(jù)?？梢岳斫鉃?，復(fù)制一個(gè)文檔時(shí)，只復(fù)制這個(gè)文檔的目錄結(jié)構(gòu)作為模板，還是連同文檔內(nèi)容一起復(fù)制。

當(dāng)時(shí)不了解功能對(duì)話框和公告對(duì)話框的區(qū)別，所以直接用 Alert 組件這樣畫圖：

09 危險(xiǎn)提示 Danger Alert

前面在設(shè)計(jì)原則中提到了“容錯(cuò)處理”，在這一小節(jié)也詳細(xì)寫一寫曾經(jīng)被教育過(guò)的經(jīng)歷。

在很多破壞性的操作都會(huì)二次進(jìn)行提醒，讓用戶確認(rèn)操作，比如說(shuō)刪除操作。在刪除之前都會(huì)詢問用戶“你真的要?jiǎng)h除嗎？”

想一想……你在看到這些提示的時(shí)候，是不是眼疾手快地按下那個(gè)[確認(rèn)]按鈕？

在《交互設(shè)計(jì)精髓》中有一節(jié)把這樣的行為叫“大喊‘狼來(lái)了’的對(duì)話框”。

所以這種對(duì)話框在沒有容錯(cuò)處理時(shí)，非常容易被我們這種無(wú)腦按[確認(rèn)]的用戶釀成大錯(cuò)。比如我手賤只是試試這個(gè)刪除，然后就把某個(gè)表幾千條辛苦寫了一個(gè)月的數(shù)據(jù)刪掉了。

所以，如果沒有撤回或者回收站之類的功能的話，我會(huì)非常崩潰……然后聯(lián)系產(chǎn)品的客服人員找某個(gè)倒霉的運(yùn)維大哥幫我在數(shù)據(jù)庫(kù)恢復(fù)數(shù)據(jù)。

你看容錯(cuò)處理多重要，有效幫助運(yùn)維大哥延年益壽。

如果產(chǎn)品本身已經(jīng)具備了容錯(cuò)能力，聽起來(lái)喊“狼來(lái)了”的危險(xiǎn)提示似乎不是必要的？

是的。我們?cè)?macOS 中刪除文件時(shí)，沒有任何提示，直接被刪掉。在郵箱刪除郵件時(shí)，一樣沒有任何提示。

因?yàn)槟阒揽梢栽谟?CMD+Z 進(jìn)行撤回，也可以在回收站找到它們。

但是，如果產(chǎn)品還來(lái)不及做回收站或者撤回時(shí)，你不得不想點(diǎn)別的辦法讓刪除確認(rèn)變得不那么“狼來(lái)了”。

一個(gè)傻瓜但是有作用的辦法是讓刪除確認(rèn)增加一點(diǎn)成本：

自從我們研發(fā)老哥哥花了 5 分鐘做了這個(gè)輸入驗(yàn)證的功能之后，誤刪應(yīng)用、誤刪業(yè)務(wù)表的用戶來(lái)找我們的次數(shù)直接斷崖式下降到了 0。

10 寫在最后

這個(gè)系列會(huì)寫的比較隨意，大概會(huì)按照我覺得哪些容易寫就會(huì)先寫。

在完結(jié)之后，再根據(jù)常見的結(jié)構(gòu)再進(jìn)行梳理。

下一篇不出意外的話會(huì)寫輸入和選擇控件（Entry&Selection Control），包含常見的文字輸入（Text Input）、選擇輸入（Select Input）、日期輸入（Date Input）、單選輸入（Radio Input）、多選輸入（CheckBox Input）、開關(guān)輸入（Switch Input）。