通過(guò)故事型脈絡(luò )打造 UX 作品集，讓作品集更有邏輯

作者：RenaHuang

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

目錄

1. 什么是“故事型脈絡(luò )”？

2. 開(kāi)端：矛盾鮮明的問(wèn)題闡述

*. 發(fā)展：環(huán)環(huán)相扣的策略推演

4. 高潮：能體現解決能力+專(zhuān)業(yè)能力的關(guān)鍵頁(yè)展示

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

6. 做好整體的內容把控

（以下是正文）

1. 什么是“故事型脈絡(luò )”？

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

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

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

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

如上圖所示，這也就是我想重點(diǎn)展開(kāi)解釋的 UX作品集的“故事型脈絡(luò )”。

總結出這個(gè)“術(shù)”并應用在各種項目實(shí)操后，我發(fā)現“故事型脈絡(luò )”不僅有助于我們設計師自身更好地理解和梳理項目，也有助于提升信息對于受眾的傳遞效率。其實(shí)這個(gè)現象可以被合理解釋?zhuān)阂驗槿说亩虝r(shí)記憶容量十分有限，受眾不可能記住你羅列的所有散點(diǎn)式要點(diǎn)，然后在腦內自動(dòng)進(jìn)行合理性的推演和評估。他們最多只能記住每個(gè)模塊的要點(diǎn)信息，并順著(zhù)你的展示思路去思考、判斷和記憶每個(gè)節點(diǎn)的合理性，產(chǎn)生最終的評估印象：

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

2. 開(kāi)端：矛盾鮮明的問(wèn)題闡述

步驟一：找到可對比的至少兩個(gè)方面，并制造一個(gè)鮮明的矛盾點(diǎn)

開(kāi)端的目的是要明確闡述項目開(kāi)始的緣由，以“引領(lǐng)著(zhù)”受眾“駛上”這個(gè)項目的“公路”。而對于這個(gè)開(kāi)端的性質(zhì)，如果項目是一個(gè)從零到一的全新產(chǎn)品設計，那么它更偏向于 “機遇型闡述”——因為機會(huì )很大，所以才有后面的創(chuàng )造創(chuàng )新。如果是基于既存產(chǎn)品的優(yōu)化改版，那么它更偏向于 “問(wèn)題型闡述”——因為問(wèn)題很大，所以才有后面的優(yōu)化改版。

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

1. 至少包含了可進(jìn)行對比的兩個(gè)方面。

2. 被對比的方面最好總結自客觀(guān)型信息。

比較常見(jiàn)的矛盾點(diǎn)+例子有：

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

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

步驟二：以言之有物、語(yǔ)言凝練的一句話(huà)總結機遇/問(wèn)題

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

*. 發(fā)展：環(huán)環(huán)相扣的策略推演

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

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

1. 用戶(hù)導向的情景：探究產(chǎn)品可能性 - 如果商業(yè)和用戶(hù)利益正相關(guān)，或至少沒(méi)有明顯沖突點(diǎn)，那么設計師需要探究出盡可能好的、全面的、滿(mǎn)足用戶(hù)期望的產(chǎn)品設計方案。

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

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

步驟二：展開(kāi)策略——用設計方法推演出設計要點(diǎn)

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

1. 對于“探究產(chǎn)品可能性”類(lèi)策略

后續展開(kāi)設計要點(diǎn)的大致思路是：從用戶(hù)的使用場(chǎng)景出發(fā)，以假設的痛點(diǎn)為基準產(chǎn)出想法，并基于用戶(hù)體驗的反饋進(jìn)行評估與迭代。

每個(gè)環(huán)節常見(jiàn)的設計方法和使用目的如下：

2. 對于“平衡用戶(hù)體驗”類(lèi)策略

后續展開(kāi)設計要點(diǎn)的大致思路是：從商業(yè)模式出發(fā)，尋找能滿(mǎn)足商業(yè)模式的產(chǎn)品方案，并同時(shí)圍繞商業(yè)目標和用戶(hù)體驗的反饋進(jìn)行評估與迭代。

每個(gè)環(huán)節常見(jiàn)的設計方法和使用目的如下：

4. 高潮：能體現解決能力+專(zhuān)業(yè)能力的關(guān)鍵頁(yè)展示

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

那么這個(gè)環(huán)節的展示思路該怎么安排呢？我認為， 展示思路需要由展示目的決定。一般來(lái)說(shuō)，關(guān)鍵頁(yè)面的展示目的有：

1. 承接上個(gè)環(huán)節（并針對重點(diǎn)問(wèn)題），用界面設計進(jìn)一步展開(kāi)“解決方案”的細節，說(shuō)明其合理性。

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

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

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

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

問(wèn)題二：展示出諸如：設計系統的統籌規劃、視覺(jué)設計、品牌設計等這類(lèi)能力是求職/求學(xué)中必要的展示點(diǎn)嗎？

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

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

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

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

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

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

那么這個(gè)環(huán)節應該如何展開(kāi)呢？我常用的敘述順序是：先總結，再展望：

上圖中的其他部分都非常簡(jiǎn)單明了，除了產(chǎn)品愿景，這里我想強調描述它時(shí)的關(guān)鍵點(diǎn)：

1. 保持精簡(jiǎn)，控制在1-2句話(huà)以?xún)葹橐恕?/p>

2. 符合情理，它需要符合企業(yè)戰略和產(chǎn)品的定位，更需要符合重點(diǎn)用戶(hù)的期望。

*. 具有野心，“不想當將軍的士兵，不是好士兵”，可以著(zhù)眼于領(lǐng)域最高標準，或對標領(lǐng)域當前最杰出產(chǎn)品。

6. 做好整體的內容把控

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

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

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

（點(diǎn)擊標題跳轉）

大廠(chǎng)被裁，心態(tài)崩了

UI/UX設計師如何處理任務(wù)及優(yōu)化流程

那些大廠(chǎng)App里對用戶(hù)行為的預判設計

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

麻煩點(diǎn)贊、在看鼓勵一下吧???