作者：RenaHuang

021yin.com/article/ZMTQwOTkyMA==.html#kuak

目錄

1. 什么是“故事型脈絡”？

2. 開端：矛盾鮮明的問題闡述

*. 發展：環環相扣的策略推演

4. 高潮：能體現解決能力+專業能力的關鍵頁展示

*. 結局：令人期待的愿景設想

6. 做好整體的內容把控

（以下是正文）

1. 什么是“故事型脈絡”？

早些年由于經驗和思考都比較少，我對于優秀UX作品集的理解十分淺顯：視覺上好看、內容上充實就行——無腦把“項目背景”、“競品分析”、“用戶調研”、“用戶畫像”、“痛點分析”、“情緒版”、UI成品圖等內容一頓亂擺，也從來沒好好思考過每個環節存在的原因和目的是什么。這就導致了，作品集在求學/求職的項目展示環節中，我仿佛“無情的PPT閱讀機器”，而受眾更是呵欠連連，不明所以。這曾讓我非?？鄲溃簳r間大把大把花下去，明明作品集看起來精美又充實，但是產出的東西似乎像是“美麗而言之無物的幾頁作品”。

終于，在反復踩坑后，我開始反思：其實，無論是什么分析或展示手段，它們最終也只是一種幫助你探索設計或闡述想法的工具罷了。對于展示的受眾，極少有人會關心你運用了多少種眼花繚亂的分析手段、引用了多少個振聾發聵的專業理論、流程圖展示得多么精美詳實。他們關心的是：你在解決什么問題，你是如何解決問題的、解決方案的合理性和潛能...等等。

所以說，如果把一個作品集比作一條公路，我認為一個好的UX作品集，它需要做到的是把受眾自然、順滑地引導到你期望的終點，看到你想給他們看的風景。而在這路途中可能會遇到山川河海的地形障礙，那么這時候各種工具和方法自然而然就成為了山麓隧道和跨海大橋。

說得更通俗一些， 好的UX作品集要做到能讓你像講一個故事一樣精彩紛呈去呈現內容——它有開頭、有結局、中間有抑有揚；不求面面俱到，但求脈絡清晰、環環相扣：

如上圖所示，這也就是我想重點展開解釋的 UX作品集的“故事型脈絡”。

總結出這個“術”并應用在各種項目實操后，我發現“故事型脈絡”不僅有助于我們設計師自身更好地理解和梳理項目，也有助于提升信息對于受眾的傳遞效率。其實這個現象可以被合理解釋：因為人的短時記憶容量十分有限，受眾不可能記住你羅列的所有散點式要點，然后在腦內自動進行合理性的推演和評估。他們最多只能記住每個模塊的要點信息，并順著你的展示思路去思考、判斷和記憶每個節點的合理性，產生最終的評估印象：

那么言歸正傳，我們如何組織出UX作品集的“故事型脈絡”呢？以下將按照開端、發展、高潮、結局幾個部分分別解釋。

2. 開端：矛盾鮮明的問題闡述

步驟一：找到可對比的至少兩個方面，并制造一個鮮明的矛盾點

開端的目的是要明確闡述項目開始的緣由，以“引領著”受眾“駛上”這個項目的“公路”。而對于這個開端的性質，如果項目是一個從零到一的全新產品設計，那么它更偏向于 “機遇型闡述”——因為機會很大，所以才有后面的創造創新。如果是基于既存產品的優化改版，那么它更偏向于 “問題型闡述”——因為問題很大，所以才有后面的優化改版。

當然了，為開端擬定一個合適的闡述類型只是基本。一個引人入勝的好開頭，最關鍵是需要體現出一個鮮明的矛盾點，這個“矛盾點”有兩個關鍵：

1. 至少包含了可進行對比的兩個方面。

2. 被對比的方面最好總結自客觀型信息。

比較常見的矛盾點+例子有：

用這種制造矛盾的方式來挖掘問題/機遇，既有助于我們清晰自信地展示出項目的價值點，同時，它相較于“用單一維度去平鋪直敘展開問題”這種方法，給受眾的觀感更強烈、更能產生深刻的記憶點。

讓我們再回過頭，深入思考一下可對比制造矛盾點的“事實”，可以發現，無外乎不圍繞 市場、產品、用戶這三個元素的 現狀或需求來展開。那么我們能用怎么樣的手段，為這些元素論證出明確的趨勢或傾向（以便后續從對比中制造出矛盾）呢？以下例舉了一些常見的手段及其目的，至于每個手段具體的實施方式，這里就不做詳細展開了：

步驟二：以言之有物、語言凝練的一句話總結機遇/問題

點明了矛盾點后，可以進一步總結收尾：用一句話概括 這個機遇/問題是什么 + 為什么要抓住機遇/解決問題。這樣一來，受眾就能獲取到非常精簡凝練的環節記憶點，并帶著它繼續順著邏輯理解項目了。

*. 發展：環環相扣的策略推演

步驟一：以設計師視角切入，尋找合理策略

在上個環節中，我們圍繞市場、產品、用戶去挖掘了這個項目產生的背景問題/機遇。而到了策略階段，我們需要正式拉回 設計師視角，來展開探索并最終收斂出設計方案。讓我們依然用上個環節舉的例子作為案例，可以發現：無論是由問題還是機遇作為起始點，設計在這些產品環節中的主要使命無非就是兩種：

1. 用戶導向的情景：探究產品可能性 - 如果商業和用戶利益正相關，或至少沒有明顯沖突點，那么設計師需要探究出盡可能好的、全面的、滿足用戶期望的產品設計方案。

2. 商業導向的情景：平衡用戶體驗 - 如果商業和用戶利益（對于2B產品，可能是購買者和使用者的利益）有明顯沖突，或在商業目標權重較大的情況下，設計師需要設計出滿足商業需求的產品，并盡可能找到和消弭掉用戶使用產品時的障礙。

而上述的這種設計的“使命”，即可以轉譯成設計的“策略”：

步驟二：展開策略——用設計方法推演出設計要點

確定并闡明了項目的設計策略后，我們必須要將抽象的策略具象化成設計要點，以作為后續具體設計方案的總體指導。針對上一個步驟提到的兩種策略方向，我們后續可以用下面的流程或手段進行設計要點的推演：

1. 對于“探究產品可能性”類策略

后續展開設計要點的大致思路是：從用戶的使用場景出發，以假設的痛點為基準產出想法，并基于用戶體驗的反饋進行評估與迭代。

每個環節常見的設計方法和使用目的如下：

2. 對于“平衡用戶體驗”類策略

后續展開設計要點的大致思路是：從商業模式出發，尋找能滿足商業模式的產品方案，并同時圍繞商業目標和用戶體驗的反饋進行評估與迭代。

每個環節常見的設計方法和使用目的如下：

4. 高潮：能體現解決能力+專業能力的關鍵頁展示

相信經過前面幾個環節的層層推演，此時此刻我們已經引出了方向非常明確的設計方案了，包括：功能清單（和重點功能）、信息結構、低保真頁面等等。這時候，我們就可以著手界面和視覺設計的相關展示了。當然，就算這個部分是UX作品集最重頭戲的部分，展示的內容也是“貴精不貴多”。畢竟這不是項目交付或審核文檔，我們需要讓受眾“了解重點”、“留下印象”，而非“掌握全局”。

那么這個環節的展示思路該怎么安排呢？我認為， 展示思路需要由展示目的決定。一般來說，關鍵頁面的展示目的有：

1. 承接上個環節（并針對重點問題），用界面設計進一步展開“解決方案”的細節，說明其合理性。

2. 根據求學/求職需求展示設計能力，包括：界面設計、交互設計、動效設計、設計系統的統籌規劃、視覺設計、品牌設計等等。

但其實， 最好的能力展示就是在“實際問題的解決中“展示它，即上述的2.中某些部分可以由1.來更強有力地達成。因此，展示的思路還是應該圍繞“重點問題”的解決方案展開：我們應該按某種標準篩選出*-4個重點問題和解決方案（簡單闡述這兩點即可，主要是為了喚起受眾對前個環節中相應觀點的記憶），并挑選出最關鍵的元素、頁面或流程（頁面組）詳細展示并解釋：

而對于設計系統的統籌規劃（設計指南）、視覺設計、品牌設計等這些往往無法涵蓋在主體內容的能力展示相關的物料，我們又能怎么合理安排進這個環節呢？首先請先思考兩個問題：

問題一：項目是新產品、大改版、大規模更新嗎？受眾對新品牌/界面/形象缺少基本的了解嗎？單刀直入高保真的展示和分析，會給受眾直接帶來信息斷層嗎？

問題二：展示出諸如：設計系統的統籌規劃、視覺設計、品牌設計等這類能力是求職/求學中必要的展示點嗎？

如果問題二“是”，問題一“否”：那么可能當前選擇的作品，其屬性不太能滿足你全方位展示必要能力的需求，重新思考選題或者在別的作品集中補缺將會是較好的選擇；

如果問題一和二都是“否”，那么我們完全可以放棄這些能力點的模塊化展示。如果實在覺得可惜，可以以低文字信息、高圖片密度的展示方式將內容重新排個版，作為視覺點綴模塊，置于環節或作品集的頭/尾部。我給這個點綴模塊取了個名字叫 “不甘心模塊”。

如果問題一和二都是“是”，那么我們可以在進入本環節的主體部分前，簡明扼要地展示出視覺規范的產出過程，以及關鍵內容。這里要強調的是這部分展示的“克制性”——畢竟這是UX作品集，且受眾短時間能接收的信息量是有限的，所有的模塊都應該基于其服務主脈絡的強弱，而增減規模。當然，如果實在有這類內容想要展示，同樣可以將它歸納進1-2個“不甘心模塊”點綴在合適的位置，或者引導受眾在另外的文檔/作品集中展開專門的閱讀。

至于具體的設計展示方面的技巧理論和優秀作品，它們在各大設計網站數量多、質量高、非常容易獲取和學習，這篇文章就不贅述了。

*. 結局：令人期待的愿景設想

在完成“關鍵頁面展示”這個全局最關鍵的環節后，常規的操作可能是直接進行收尾——感謝大家的觀看，以及放上自己以及其他主創人員的姓名、聯系方式等。但其實這里還有進一步提升項目展示的空間：我們可以對項目（目前的方案）進行總結和展望，這樣不僅有助于拉深思考層次、將項目的意義升華，還能給受眾更好的項目印象（畢竟受眾的終峰體驗最影響他們的評價）。更重要的是，這也為后續（如果有的話）和受眾的交流討論環節增加了開放型話題素材。

那么這個環節應該如何展開呢？我常用的敘述順序是：先總結，再展望：

上圖中的其他部分都非常簡單明了，除了產品愿景，這里我想強調描述它時的關鍵點：

1. 保持精簡，控制在1-2句話以內為宜。

2. 符合情理，它需要符合企業戰略和產品的定位，更需要符合重點用戶的期望。

*. 具有野心，“不想當將軍的士兵，不是好士兵”，可以著眼于領域最高標準，或對標領域當前最杰出產品。

6. 做好整體的內容把控

當我們將以上四個環節的展示內容整理并銜接好之后，可以將視角重新從局部移回整體，進行進一步的評估和調整：

關鍵方面有且不限于：是否有頭有尾、每個環節的銜接點是否自然、關鍵名詞的稱謂是否一致等等。其中，最重要的是：每個環節的體量是否合理，一般四個環節的體量比重如下圖所示。當然，這只是對于UX作品集的一個常規參考，實操中可以根據作品集展示的側重點，主觀調整比例。

以上就是我近期對UX作品集的脈絡整理上的一些心得，非常高興最近終于能有時間系統化地整理并和大家分享這些觀點。相信擁有了“故事型脈絡”后，我們的作品集能在視覺精美的基礎上，變得更加精確、合理、有邏輯感，將我們想傳達的信息更有效且有吸引力地傳達給受眾。

（點擊標題跳轉）

大廠被裁，心態崩了

UI/UX設計師如何處理任務及優化流程

那些大廠App里對用戶行為的預判設計

如果你喜歡這篇文章???

麻煩點贊、在看鼓勵一下吧???