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

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

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

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

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

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

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

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

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

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

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

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

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

2. Salesforce：Lightning Design System

3. Material Design

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

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

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

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

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

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

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

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

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

03 組件庫

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

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

接下來我通過 Minecraft 這個游戲來總結(jié)了組件庫。

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

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

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

04 適用人群

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

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

05 設(shè)計原則 Design Principes

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

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

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

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

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

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

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

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

說點兒不同的。

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

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

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

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

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

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

在《交互設(shè)計精髓中》也單獨列了一章來講“防止錯誤，通知決定”。

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

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

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

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

06 模態(tài)框 Modal

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

模態(tài)框一詞最早是從技術(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è)計中，模態(tài)窗口是一個從屬于主窗口的圖形控制元素。

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

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

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

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

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

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

07 對話框 Dialog

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

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

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

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

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

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

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

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

因為書中也沒有具體舉例，所以我接下來會按照這五種類型列舉在黑帕云中的對話框示例。

1. 屬性對話框 Property Dialog

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

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

2. 功能對話框 Function Dialog

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

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

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

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

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

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

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

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

4. 通知對話框 Notification Dialog

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

常見的有通知中心對話框，處理完成某個操作的告知等等。

5. 公告對話框 Bulleting Dialog

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

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

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

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

我之前犯的錯誤就是用這種對話框承載了一個功能性的操作對話框。

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

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

09 危險提示 Danger Alert

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

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

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

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

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

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

你看容錯處理多重要，有效幫助運維大哥延年益壽。

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

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

因為你知道可以在用 CMD+Z 進(jìn)行撤回，也可以在回收站找到它們。

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

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

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

10 寫在最后

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

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

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