Build content before design

內容於設計之前：給設計者的寫作建議

前言

設計 UI 不僅僅包含圖形介面，也包含文案寫作的規劃，設計者應該要能夠理解內容並為其服務。

UI 介面當中文字佔據了絕大多數的內容，文字充斥在設計的每個角落，它們是最有威力的設計元素之一，以極為精簡的形式傳遞深刻的意涵。這篇文章想分享設計與內容可以是相輔相成的概念，並且討論設計者在沒有內容的情況下設計可能造成什麼樣的問題。

你同意設計應該為內容服務嗎？

Dribble 網頁作品時常被詬病過於花俏無用

視情境而定。

關鍵在於設計於產品當中的角色，如果設計本身就是目的，那麼內容甚至可以為設計服務，但網頁的特別之處在於，各式各樣的使用者或族群都應當可以透過網路接觸，「網頁的初衷即是開放與無障礙」。

因此網頁 UI 設計者的職責不再只是設計介面，而是能夠理解內容並為其服務，現今環境比以往更加期望設計者可以兼顧兩者，並達成「設計與內容同步進行」的流程。

最終，設計為誰服務並沒有單一絕對的答案，視產品類別目標受眾而定，「設計不一定為內容服務，但一定要替使用者著想」。

文案直接或間接的都會影響設計呈現方式，以我的經歷來說就時常遇到語言的表達形式不同（篇幅長度、閱讀習慣、文化背景不同）導致設計的呈現方式不同，像是：中英文長度與閱讀方向有極大的差異、中文字體於網頁上的可行性……

觀察許多套版網站或者是不同的樣式庫會發現單純的「換皮」感覺上就是不太對勁或是太相似，原因也在於文字與內容的呈現方式沒有靈魂，內容與外觀脫節，因此提倡可以多觀察與借鑑大型設計團隊橫跨地域的設計規範，透過文字替產品打造獨特一致的聲音：

或是尋找類似文化背景的設計案例，更好的理解文案與設計的關係，像是我喜歡到同在漢字文化圈內的日本網站🔗中尋找靈感：

muuuuu.org

時時刻刻留意文案與設計的關係，並且尋找最適合的方式來呈現。我也特別喜歡瀏覽不同種類的個人網站，因為這些網站通常會有更強烈的個性，也最能夠看到設計者如何處理文案與設計整體搭配的關係，推薦可以到網頁東東工具箱看看我覺得有趣的網站。

在沒有內容的情況下設計，通常會使用假內容來填充，像是 Lorem🔗 假篇幅生成器。我們將文字視為設計中可被點綴的細節，但實際上它是產品中不可或缺的一部分，用戶與內容互動而不單只停留於表面的設計。

UI 拆解大致由以下三種基本文案類型所組成：

界面文字：通常被稱為 UI 文字或微文本，它是深度融入界面中的文字，例如表單字段的標籤、按鈕上的文本、網站上的導航標籤、錯誤訊息等。通常由單個詞或短語組成。如果從界面中刪除這些文字會導致界面「崩潰」或極其難以使用。
產品文字：與網站、產品、應用程序、體驗的功能密切相關的文字，但不一定是界面的直接部分——例如引導郵件的正文，或者變更日誌中應用程序更新的描述。這是專注於幫助或支持讀者的內容。
行銷文字：這是主要用於填充銷售或促銷角色的長形寫作。這是專注於說服讀者的內容。

「設計當中的寫作」並不全然是行銷用途文字，也可以是非常微小的介面文字，此外包含但不限於：

統整下來這些與用戶關聯的使用者體驗寫作（UX writing）是一個獨立有趣的領域，並且也值得設計者去關注。

當留意到問題存在即是成功的一半，剩下的另一半需要持續的察覺並實踐在日常當中，我相信開啟對於用戶的關切之心，是好設計的核心要素。

我也尚在學習不同領域的知識與角度，你也可以嘗試透過描述看看使用者體驗與設計之間的關聯，以及如何讓兩者相互配合，藉此來釐清觀念與想法。