作者：RenaHuang

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

目錄

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

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

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

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

*. 結(jié)局：令人期待的愿景設(shè)想

6. 做好整體的內(nèi)容把控

（以下是正文）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

而上述的這種設(shè)計的“使命”，即可以轉(zhuǎn)譯成設(shè)計的“策略”：

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

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

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

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

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

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

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

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

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

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

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

1. 承接上個環(huán)節(jié)（并針對重點問題），用界面設(shè)計進一步展開“解決方案”的細(xì)節(jié)，說明其合理性。

2. 根據(jù)求學(xué)/求職需求展示設(shè)計能力，包括：界面設(shè)計、交互設(shè)計、動效設(shè)計、設(shè)計系統(tǒng)的統(tǒng)籌規(guī)劃、視覺設(shè)計、品牌設(shè)計等等。

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

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

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

問題二：展示出諸如：設(shè)計系統(tǒng)的統(tǒng)籌規(guī)劃、視覺設(shè)計、品牌設(shè)計等這類能力是求職/求學(xué)中必要的展示點嗎？

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

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

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

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

*. 結(jié)局：令人期待的愿景設(shè)想

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

那么這個環(huán)節(jié)應(yīng)該如何展開呢？我常用的敘述順序是：先總結(jié)，再展望：

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

1. 保持精簡，控制在1-2句話以內(nèi)為宜。

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

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

6. 做好整體的內(nèi)容把控

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

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

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

（點擊標(biāo)題跳轉(zhuǎn)）

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

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

那些大廠App里對用戶行為的預(yù)判設(shè)計

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

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