在檢核中迷失的設計師

操作情境百百種，面對各種檢核條件，和產品的不斷迭代，常常會出現各種版本的提示訊息文字。這件事不僅是讓設計師之間，也讓前端的工程師們感到無所適從。

在前面的第 11、12 天時我們有提到建立元件庫（Library）的好處，像是提升開發效率。不過元件本身只是一個框架，如果在設計上沒有一個準則（Guideline），就像不同的不同的著色畫，由不同人所畫會有不同結果。

不同的設計師也會設計出缺少統一性，各種客制性的設計，尤其是錯誤檢核的 「提示訊息」 和 「彈窗訊息」！接下來我們以彈窗為範例，介紹如何建立提示訊息的範本規範吧！

（圖片來源：Winter Coloring Pages for Kids - Just Print & Go! - Friends Art Lab）

UX Writing Pattern：確保提示訊息的清晰與一致

那如何避免因為各種情境產生各種五花八門的彈窗文字、彈窗按鈕、樣式造成工程師、設計師雙方的困擾（太多版本了 😓）？

缺少一致邏輯和語言的彈窗文字，也會讓原本就因為被從心智流程打斷的使用者感到混亂！

以下有幾個步驟建議大家可以逐步發展：

1. 步驟一： 將所有期望出現彈窗的情境列出。
2. 步驟二： 收羅和對應情境整理類似專案的所有彈窗。像是：成功執行、錯誤、流程提示。
3. 步驟三： 思考所有變化性的最大公因數。就像元件一樣，尋找同樣情境中不同設計中的基本盤。

實質應用到設計流程中 aka 控制設計師

還記得 UI Pattern 嗎？該是他出場的時候了！

規劃完彈窗文案的規則（Guideline）後，設計師們可以將這些定好的 UI Pattern 放到彈窗元件中做成 UI 元件，如下圖。

下圖是最終的幾款彈窗設計，我們將彈窗狀態分為以下 4 種，分別是：

1. success：成功
2. warning/error：警告/錯誤
3. behavior-driven (neutral)：中性行為驅動
4. behavior-driven (high-impact)：強力行為驅動

不同的狀態會搭配不同的樣式，如 success 會有象徵成功的綠色標題、behavior-driven (high-impact) 會有警告的亮色系。不同的狀態下，也會有不同的情境，像是申請成功和覆核成功，每個情境與狀態會有固定的提示文字，設計師和前端只需要帶入專案的變數（如：obj、ApprovalStatus）用字，能夠快速設計與開發！

補充：彈窗是什麼

彈窗（dialog，彈跳視窗），是數位產品與使用者傳達提示訊息的常見方式之一。

彈窗通常會打斷使用者 「正在進行中」 的流程，使用者必須點擊操作按鈕才可以關閉視窗。主要用於 「提醒」 和 「警告」 使用者，在重要或高風險操作時跳出視窗，提示使用者接下來的操作會有比較大的影響。

因此彈窗都是位於所見頁面的最上層，並通常搭配半透明的黑色遮罩（Mask），沈浸式的引導使用者注意訊息內容。

（圖片來源：Material Design）