我從事內(nèi)容相關(guān)工作已超過13年，其中8年專注于內(nèi)容設(shè)計。即便到了2025年，我仍在向同事、利益相關(guān)者和合作伙伴倡導(dǎo)內(nèi)容優(yōu)先的設(shè)計理念。
許多人自稱是內(nèi)容優(yōu)先設(shè)計的“擁護者”，也確實會在一開始就邀請我參與。但通常，合作僅止于此。
一旦工作啟動，主導(dǎo)權(quán)往往仍落在產(chǎn)品設(shè)計和產(chǎn)品管理手中。關(guān)于內(nèi)容的討論雖會早期展開，但關(guān)鍵決策依然孤立進行。
經(jīng)過多年實踐，我總結(jié)出一份7步指南，幫助團隊真正踐行內(nèi)容優(yōu)先的設(shè)計方法。
這將助力設(shè)計師和團隊轉(zhuǎn)向一種以內(nèi)容驅(qū)動、塑造并強化用戶體驗的流程。
什么是內(nèi)容優(yōu)先設(shè)計？
顧名思義，內(nèi)容優(yōu)先設(shè)計意味著在動筆之前，先思考和規(guī)劃內(nèi)容。
更正式的定義是：內(nèi)容優(yōu)先設(shè)計是一種方法論，它優(yōu)先規(guī)劃、創(chuàng)建和組織內(nèi)容，再考慮視覺與交互設(shè)計元素。
其核心在于，我們首先關(guān)注核心內(nèi)容是什么、它的目的以及用戶如何與之互動，而非外觀設(shè)計。
一個類比
想象建造一座房子。你不會從建筑風(fēng)格、外立面或景觀設(shè)計開始，對吧？你會先考慮每個空間的功能與用途：需要多少房間、家庭成員如何使用、動線如何規(guī)劃等。
圖片來源：Pexels
明確核心“內(nèi)容”（空間功能與用途）后，再設(shè)計內(nèi)外裝飾以滿足這些需求。例如，窗戶位置需考慮采光，材料選擇需兼顧耐用與舒適，整體美學(xué)需協(xié)調(diào)一致。
因此，內(nèi)容優(yōu)先設(shè)計即優(yōu)先規(guī)劃功能元素，再聚焦視覺與美學(xué)。
在深入之前，需明確幾點：
內(nèi)容不等同于界面文案
內(nèi)容優(yōu)先不意味著內(nèi)容設(shè)計師主導(dǎo)設(shè)計流程
內(nèi)容優(yōu)先不要求先完成所有文案和文檔再開始視覺設(shè)計
它指的是一種設(shè)計流程——內(nèi)容（故事、目的或功能）指導(dǎo)視覺體驗設(shè)計。
如何實踐內(nèi)容優(yōu)先設(shè)計
要將團隊的設(shè)計流程轉(zhuǎn)向內(nèi)容優(yōu)先，需在早期階段進行規(guī)劃與重構(gòu)。以下步驟多在項目初期完成。
第一步：明確策略
開始前，團隊需清晰理解待解決的問題、目標(biāo)用戶及其需求。此階段需對齊：
項目目標(biāo)是什么？
目標(biāo)用戶是誰？
對用戶有何影響？
對業(yè)務(wù)有何價值？
明確目標(biāo)、用戶影響和業(yè)務(wù)價值后，方可深入問題與用戶研究。
第二步：理解用戶及其需求
團隊需全面洞察用戶的需求、痛點與機會。關(guān)鍵問題包括：
已知用戶哪些信息？
希望幫助用戶實現(xiàn)什么目標(biāo)？
如何滿足或超越用戶預(yù)期？
用戶目前如何解決需求？
用戶可能遇到哪些障礙？
現(xiàn)有解決方案是否可復(fù)用或改進？
哪些關(guān)鍵研究問題尚未探索？
部分答案可從過往研究、社區(qū)論壇或?qū)＜乙娊庵蝎@取，其余需專項調(diào)研。
圖片來源：Pexels
第三步：分析現(xiàn)狀
評估當(dāng)前體驗的優(yōu)勢與不足，明確可改進之處。此階段需重點關(guān)注信息流，厘清用戶在各階段已知、缺失的信息及潛在機會。
方法包括：
繪制當(dāng)前用戶旅程圖
盤點現(xiàn)有內(nèi)容資產(chǎn)（文案、文檔等）
體驗審計
用戶測試以發(fā)現(xiàn)痛點
第四步：研究競品
分析競品如何處理類似問題。競品分析可揭示其功能、流程與設(shè)計成果，從中汲取靈感、發(fā)現(xiàn)差距或了解行業(yè)標(biāo)準(zhǔn)。
關(guān)鍵問題：
競品如何解決問題？
其信息流如何設(shè)計？
傳遞了哪些關(guān)鍵信息？
使用了哪些術(shù)語與概念？
視覺元素如何應(yīng)用？
其優(yōu)勢與不足？
是否存在可填補的空白？
第五步：理解現(xiàn)有模型
三類模型助力內(nèi)容優(yōu)先設(shè)計：心智模型、領(lǐng)域模型和概念模型。理解現(xiàn)狀有助于精準(zhǔn)構(gòu)建解決方案。
心智模型
用戶對系統(tǒng)運作的理解，受既往經(jīng)驗與假設(shè)影響。可通過社區(qū)論壇、用戶反饋或訪談獲取。
延伸閱讀：心智模型與用戶體驗設(shè)計
領(lǐng)域模型
描述特定領(lǐng)域的關(guān)鍵概念、實體及其關(guān)系，是系統(tǒng)設(shè)計的基石。
延伸閱讀：領(lǐng)域模型簡介?|?結(jié)構(gòu)化內(nèi)容的領(lǐng)域建模
概念模型
結(jié)合領(lǐng)域模型與用戶心智模型，抽象出用戶感知的價值，聚焦能力與關(guān)系，隱藏技術(shù)細(xì)節(jié)。
三者結(jié)合可全面理解用戶與系統(tǒng)，指導(dǎo)內(nèi)容的結(jié)構(gòu)與呈現(xiàn)方式，促進團隊對齊。
第六步：繪制內(nèi)容地圖
對話映射是有效的起點。通過角色扮演模擬用戶與系統(tǒng)的互動，深化對用戶需求與語言的理解。
如何操作
圖片來源：Pexels
需明確：用戶起點與目標(biāo)（用戶目標(biāo)）、業(yè)務(wù)目標(biāo)。兩人一組，分別扮演用戶與系統(tǒng)，即興對話并記錄。
分析對話中的：
自然對話序列
用戶需提供的信息
需解釋的概念及方式
使用的術(shù)語
潛在阻礙
最終繪制用戶旅程圖，團隊討論并投票確定終版。
工具參考：Figma對話映射模板
第七步：構(gòu)建內(nèi)容框架
基于對話映射，為流程中的每個界面創(chuàng)建內(nèi)容框架。
步驟：
定義界面在流程中的目的與目標(biāo)
結(jié)合用戶問題與任務(wù)，分組排序
形成優(yōu)先級指南，用于早期測試
內(nèi)容框架可替代線框圖，為視覺設(shè)計奠定基礎(chǔ)，確保信息流清晰。
開始寫作與設(shè)計
內(nèi)容設(shè)計師可據(jù)此定義可復(fù)用內(nèi)容模式，創(chuàng)建術(shù)語表與概念解釋；產(chǎn)品設(shè)計師可依此草圖設(shè)計界面。
團隊可提前構(gòu)建模式庫、信息架構(gòu)等，無需等待視覺設(shè)計。
內(nèi)容優(yōu)先設(shè)計：多方共贏
若我們能精準(zhǔn)預(yù)判用戶所需內(nèi)容、順序與形式，并擁有可復(fù)用的內(nèi)容與設(shè)計組件，工作將何其高效！
內(nèi)容優(yōu)先設(shè)計助你更懂用戶需求，做出更明智的設(shè)計決策，并提升團隊協(xié)作。
若想打造真正以用戶為中心的產(chǎn)品，請從內(nèi)容開始——讓它成為你的起點。
精選文章：
密斯·凡·德·羅的建筑：現(xiàn)代主義的浮夸與比例的完美