抱怨不會(huì)寫作品集分析的情況有不少，基本每周都有人反饋，已經(jīng)成為設(shè)計(jì)行業(yè)世紀(jì)難題了。

所以今天針對(duì)這個(gè)問題，來解釋下新手或者初級(jí)UI設(shè)計(jì)師，作品集的前半部分析內(nèi)容，具體應(yīng)該怎么寫才好。

寫作品的分析，首先要知道為什么需要分析，不是因?yàn)?“大家都寫所以我也要寫” ，要從根本上理解，才能做出讓人信服的內(nèi)容，而不是變成毫無營養(yǎng)深度的 “小學(xué)生作文” 展示。

之所以 UI 行業(yè)非常注重分析內(nèi)容，核心的原因就是——UI 設(shè)計(jì)太簡單了。

不僅做界面門檻低，界面的美觀度在今天對(duì)項(xiàng)目的正面影響也越來越小，尤其是在以“又不是不能用”為指導(dǎo)思想的B端領(lǐng)域。所以企業(yè)為支付UI設(shè)計(jì)師高昂的人工成本時(shí)，自然需要設(shè)計(jì)師產(chǎn)出的界面不僅是為了好看，而是要解決項(xiàng)目中存在的實(shí)際問題，帶來更大的收益。

而解決問題這句話，從剛開始學(xué)設(shè)計(jì)就開始聽，聽到入行，對(duì)于大多數(shù)新手來說和 “正確的廢話” 沒有區(qū)別。所以我們必須要發(fā)現(xiàn)問題在哪里，什么是解決問題。

我們陸續(xù)做的一些改版案例其實(shí)就是在做解決問題的演示，比如前幾天改的騰訊云的產(chǎn)品導(dǎo)航，就是解決原有信息設(shè)計(jì)不合理導(dǎo)致的檢索、操作效率低下的交互和體驗(yàn)問題：

點(diǎn)擊閱讀：這次終于要對(duì)忍了很久的騰訊云下手了

還有很多其它的實(shí)際案例，感興趣的就要在超人的電話亭公眾號(hào)里往前翻了。

要注意的是，用設(shè)計(jì)解決問題，最重要的就是先學(xué)會(huì)發(fā)現(xiàn)問題，而這恰恰是多數(shù)設(shè)計(jì)師最欠缺的思考能力。比如之前我們做過的一個(gè)評(píng)論里備受爭議的改動(dòng)，優(yōu)化表格頁的篩選框。我把頂部都羅列出來的選項(xiàng)都收納進(jìn)了下拉菜單里，需要通過二次操作才能選擇這些選項(xiàng)。

點(diǎn)擊閱讀：多年的B端交互設(shè)計(jì)經(jīng)驗(yàn)分享，4個(gè)原則幫你提升使用感

光看設(shè)計(jì)稿的情況下，改后有提升篩選效率嘛？當(dāng)然沒有，篩選的操作明顯變麻煩了，本來很簡單的操作步驟還變長了。那為什么需要那么改？因?yàn)闃I(yè)務(wù)方，或者說用戶明確的吐槽了進(jìn)入這個(gè)頁面首要目的是看下方的表格，篩選操作八百年用一回，而原設(shè)計(jì)在正常顯示中占據(jù)了大半屏，完全不符合使用需要。

所以擺在面前的解決方式就很清晰了，必須要減少篩選區(qū)域的高度，即使?fàn)奚慕换バ砸矝]關(guān)系，因?yàn)樗鼪]有“那么重要”。

再比如之前改過的淘寶商家端千牛的商品表單頁面，原有類目屬性的表單排列形式，即缺少排序邏輯，又很難辨識(shí)和交互，也和前端的三列式展示樣式不一致。

點(diǎn)擊閱讀：B端設(shè)計(jì)改版 | 淘寶商家后臺(tái)千牛表單設(shè)計(jì)優(yōu)化

所以解決的方式就是把標(biāo)題和輸入框拆分，讓標(biāo)題獨(dú)立成一行且左對(duì)齊更好被瀏覽和讀取，同時(shí)改成3列和前端的展示效果對(duì)齊，保證編輯人對(duì)展示出去的結(jié)果又預(yù)期。

還有一個(gè)AI繪圖工具StableDiffusion的標(biāo)簽欄改版，原有標(biāo)簽欄展示詞匯完全是堆砌型的，要靠手動(dòng)自己去換行，并且語法中一些特殊的應(yīng)用沒有像常規(guī)代碼編輯器一樣高亮，導(dǎo)致標(biāo)簽數(shù)量較多的情況下即難調(diào)節(jié)又難閱讀。

點(diǎn)擊閱讀：AI工具Stable Diffuion體驗(yàn)改版優(yōu)化

所以在改動(dòng)中為它增加了自定義分類，通過換行即可增加新分類。同時(shí)為語法中不同關(guān)鍵的用詞進(jìn)行高亮，提高閱讀性和可維護(hù)性。

所有改版案例都是圍繞在發(fā)現(xiàn)問題的基礎(chǔ)上進(jìn)行的，通過發(fā)現(xiàn)問題，思考解決方案，再在實(shí)施的過程中 “順便” 優(yōu)化視覺，最后給出解決的成果。

類似上面這些案例，總結(jié)起來，就是項(xiàng)目中設(shè)計(jì)可以解決的最基礎(chǔ)的問題類型。比如：視覺樣式、交互方法、使用體驗(yàn)、信息展示等等。這些問題不需要經(jīng)過太復(fù)雜的分析，就可以通過個(gè)人的專業(yè)能力和經(jīng)驗(yàn)進(jìn)行主觀分析得出，并給出讓人信服的理由和結(jié)果。

但這些問題放在整個(gè)項(xiàng)目的框架里，層級(jí)并不高，自然分量也不夠。所以我們向上探索，再上一層的問題可以總結(jié)成業(yè)務(wù)需求、用戶特征、技術(shù)限制。

業(yè)務(wù)的需求就是產(chǎn)品面關(guān)聯(lián)業(yè)務(wù)所產(chǎn)生的需求，比如一個(gè)多人編輯的員工績效考核頁面，或者一個(gè)包含了非常多字段和狀態(tài)變更的卡片，設(shè)計(jì)它之前優(yōu)先關(guān)注的應(yīng)該是業(yè)務(wù)的邏輯和流程，這是需要花時(shí)間做總結(jié)和分析的。

而之所以這一級(jí)中沒有寫產(chǎn)品需求的原因，就是因?yàn)锽端所有產(chǎn)品需求理應(yīng)從業(yè)務(wù)需求中轉(zhuǎn)化而來，分析產(chǎn)品需求的本質(zhì)也是理解業(yè)務(wù)需求。

點(diǎn)擊閱讀：奇怪的績效考核表單頁面優(yōu)化實(shí)例

點(diǎn)擊閱讀：簡單的列表卡片優(yōu)化分享

用戶特征，就是對(duì)產(chǎn)品用戶進(jìn)行的相關(guān)調(diào)查和研究。和C端不同的是，B端用戶的研究更多不是集中在體驗(yàn)上的（除了SaaS類），而是使用效率上的。因?yàn)轶w驗(yàn)不太好，對(duì)于內(nèi)部項(xiàng)目而言根本不是什么問題，但是因?yàn)楫a(chǎn)品的設(shè)計(jì)不符合用戶的認(rèn)知和行為模式，導(dǎo)致效率低下和出錯(cuò)，就是很嚴(yán)重的問題（降低利潤）。

所以對(duì)于企業(yè)想看的用戶特征，是集中在解決產(chǎn)品和用戶 “兼容性” 上的，而不是圍繞用戶生辰八字和家長里短的專研……

所以用戶調(diào)研，必然都是和產(chǎn)品相關(guān)聯(lián)的調(diào)查研究，比如指定產(chǎn)品相關(guān)命題的訪談、問卷，或者可用性相關(guān)的測試和研究。有效的調(diào)研結(jié)果，必然可以對(duì)產(chǎn)品的設(shè)計(jì)產(chǎn)生指導(dǎo)作用和正面影響。

最后一條技術(shù)限制，就是設(shè)計(jì)如何基于開發(fā)的效率和限制上提出有效的方案。B端項(xiàng)目中，開發(fā)權(quán)重必然是遠(yuǎn)遠(yuǎn)高于設(shè)計(jì)的，這是成本和產(chǎn)出決定的，所以設(shè)計(jì)在這一環(huán)要提供價(jià)值，就必須是設(shè)計(jì)方案基于技術(shù)做“妥協(xié)”，而不是以強(qiáng)推設(shè)計(jì)追求為榮（除非能證明推進(jìn)后的商業(yè)效益）。

比如，使用第三方技術(shù)框架下怎么制定出一套即符合框架規(guī)范又滿足項(xiàng)目品牌需要的規(guī)范，在有主題切換的問題下如何配合開發(fā)制定一套高效專業(yè)的 Deisgn Token，或者甲方需要實(shí)現(xiàn)的復(fù)雜可視化動(dòng)效如何快速測試方案并讓開發(fā)落地等等。

上面提到的三個(gè)問題，雖然層次上升了，但依舊是項(xiàng)目的局部，還可以再往上追溯，那就是企業(yè)戰(zhàn)略和競品認(rèn)識(shí)。

企業(yè)戰(zhàn)略就是企業(yè)對(duì)這款產(chǎn)品發(fā)展的計(jì)劃，包含了公司對(duì)當(dāng)前市場的分析，和對(duì)市場機(jī)遇的理解（雖然不一定是準(zhǔn)確的，但公司打算那么做了）。所有業(yè)務(wù)需求、用戶對(duì)象、技術(shù)要求，都是通過企業(yè)的戰(zhàn)略引發(fā)出來的，就像要做一款面向小微企業(yè)使用的 OA 工具，不會(huì)蹦出大數(shù)據(jù)處理的技術(shù)要求，或面向大型跨國企業(yè)高管的用戶群體。

而競品理論上也是戰(zhàn)略確定后才要考慮的因素，之所以放在同一級(jí)，是因?yàn)閲鴥?nèi)企業(yè)對(duì)競品的重視度遠(yuǎn)遠(yuǎn)比你們想象的大，即使在人人都是產(chǎn)品經(jīng)理等網(wǎng)站中搜索排名第一的關(guān)鍵字都是競品分析。

原因是國內(nèi)的B端市場環(huán)境競爭非常的激烈，而且很多行業(yè)增長不夠快，接近零和的狀態(tài)，導(dǎo)致產(chǎn)品的發(fā)展戰(zhàn)略受到競品的大量干擾。很多B端產(chǎn)品的實(shí)際戰(zhàn)略就是，在同一個(gè)賽道中超越競品。

而競品分析要找出的問題，就是要找到競品在設(shè)計(jì)相關(guān)的要素中存在的優(yōu)勢，如何在設(shè)計(jì)領(lǐng)域中給出追趕或者超越它們的方案。

當(dāng)然，如果你的產(chǎn)品僅僅是內(nèi)部產(chǎn)品，那么就沒有研究競品的必要。

總結(jié)起來，市場和企業(yè)想看到的分析和解決的問題，就包含下面這樣的結(jié)構(gòu)：

上面的結(jié)構(gòu)，和用戶體驗(yàn)五要素邏輯是一樣的，只是我們用作品集分析的思路來做的話，并不適合直接套用五要素的框架，因?yàn)槲逡乇挥玫奶啵姨珕?，?huì)讓分析內(nèi)容看起來非常的刻意和死板。

有了項(xiàng)目問題的來源，下面就要開始具體的進(jìn)行項(xiàng)目分析內(nèi)容輸出的計(jì)劃了。

每個(gè)項(xiàng)目都應(yīng)該有一個(gè)自己的分析輸出流程，并一定是完全遵照實(shí)際項(xiàng)目流程里的所有分析內(nèi)容。因?yàn)榉治鲆敵?，就需要包?“邏輯”，也就是前面寫的東西，得和后面的內(nèi)容關(guān)聯(lián)上。而很多作品集的分析內(nèi)容之所以是堆砌，就是因?yàn)樗庠谇懊娣治鐾诳?，但是后面不填，那寫得再多也只是湊字?jǐn)?shù)。

而結(jié)構(gòu)內(nèi)的內(nèi)容也不是讓你全盤照搬都寫出來的，而是要學(xué)會(huì)如何根據(jù)具體項(xiàng)目篩選出必要的內(nèi)容，再結(jié)合到你的項(xiàng)目包裝中去。

這就需要再每次項(xiàng)目輸出前先寫個(gè)具體的大綱，然后再開始做后續(xù)的設(shè)計(jì)，比如：

• 項(xiàng)目和戰(zhàn)略目標(biāo)介紹

• 問題發(fā)現(xiàn) - 同行業(yè)內(nèi)競爭對(duì)手，以及競品的設(shè)計(jì)相關(guān)優(yōu)勢點(diǎn)A、B、C，后面要總結(jié)

• 問題發(fā)現(xiàn) - 業(yè)務(wù)需求包含的主要設(shè)計(jì)目標(biāo)，模塊A、B包含非常復(fù)雜的邏輯和流程，需要展示出來

• 問題發(fā)現(xiàn) - 用戶對(duì)老版本產(chǎn)品的可用性分析，使用用戶體驗(yàn)地圖和訪談，總結(jié)出模塊 A和B的問題

• 方案展示 - 構(gòu)建項(xiàng)目框架，展示產(chǎn)品地圖，優(yōu)化項(xiàng)目結(jié)構(gòu)來解決業(yè)務(wù)和體驗(yàn)中發(fā)現(xiàn)的一部分問題

• 方案展示 - 交互流程搭建，展示原型和流程，構(gòu)思模塊 A、B的交互解決思路

• 方案展示 - 視覺風(fēng)格展示，根據(jù)企業(yè)戰(zhàn)略和品牌發(fā)展，以及一部分對(duì)用戶的認(rèn)識(shí)，搭建對(duì)應(yīng)的情緒版和設(shè)計(jì)規(guī)范

• 頁面展示 - 模塊1，解決部分視覺、交互的xx問題

• 頁面展示 - 模塊2，解決交互，信息展示上的xx問題

• 頁面展示 - 模塊3，解決交互，體驗(yàn)上的xx問題

• ……

不同項(xiàng)目搭建的大綱必然是有很大差異的，有的項(xiàng)目有競品，有的完全沒有競品。有的項(xiàng)目是迭代有老項(xiàng)目對(duì)比，有的項(xiàng)目是全新的項(xiàng)目，由客戶指派。

但是不管項(xiàng)目怎么變，大綱的目的都在于有針對(duì)性的去思考項(xiàng)目可以挖掘的問題，并像寫小說一樣的在前期內(nèi)容中埋坑在后面填坑。

這也是一個(gè)很好的檢驗(yàn)，如果你完全分析不出任何問題，要不然就是你自己的基礎(chǔ)知識(shí)水平是不足的，沒辦法支撐你用比較專業(yè)的方式來解決問題，只是跟著模糊的感覺做設(shè)計(jì)或是“模仿”?；蛘吣銓?duì)項(xiàng)目的業(yè)務(wù)不夠熟悉，根本不清楚業(yè)務(wù)會(huì)有哪些體驗(yàn)、交互、設(shè)計(jì)上的痛點(diǎn)存在。

其中，業(yè)務(wù)一定存在需要被解決的問題。因?yàn)槿魏螛I(yè)務(wù)都僅僅只是一種抽象的概念，它要轉(zhuǎn)化成可視且可以交互的界面實(shí)體，就必然有合適的標(biāo)準(zhǔn)。比如一個(gè)政府部門使用的嚴(yán)肅系統(tǒng)和一個(gè)面向互聯(lián)網(wǎng)團(tuán)隊(duì)的泛文檔工具在設(shè)計(jì)中就存在截然不同的要求。

而缺失基礎(chǔ)知識(shí)和業(yè)務(wù)理解這兩部分能力，就必然導(dǎo)致整個(gè)項(xiàng)目的包裝是空洞的，一看就知道設(shè)計(jì)師相關(guān)分析能力的不足（不會(huì)有別的解釋）。

遵循這個(gè)結(jié)構(gòu)帶來的另一個(gè)幫助，就是確定分析內(nèi)容的邊界，可能你的項(xiàng)目實(shí)在沒有什么值得描述的問題，或者你能想到的問題點(diǎn)也就這些了，那么其它你給不出解決方案的問題就全都 “不是問題”，沒有去寫入的必要。也不要為了湊字?jǐn)?shù)去強(qiáng)行加入一些別的作品集里寫的東西，比如整了個(gè)埋點(diǎn)統(tǒng)計(jì)、數(shù)據(jù)分析、雙鉆模型、SWOT 分析等等，然后再在里面科普這些專業(yè)知識(shí)點(diǎn)是什么，為什么重要……

還有一個(gè)你們很難發(fā)現(xiàn)的細(xì)節(jié)，就是為了做項(xiàng)目的包裝，不是項(xiàng)目做什么樣你最后貼啥圖，而是在規(guī)劃了輸出大綱和解決哪些問題以后，是可以根據(jù)這些目標(biāo)去修改原圖以滿足解決方案需要的。也就是項(xiàng)目設(shè)計(jì)根據(jù)包裝的需要做改動(dòng)和篩選，逆向補(bǔ)全，這才是最有效的項(xiàng)目包裝思路。

最后總結(jié)一遍，輸出作品集的分析內(nèi)容，就是實(shí)現(xiàn)找出問題并解決的閉環(huán)。從對(duì)項(xiàng)目的不同層次分析，提煉出項(xiàng)目的問題，然后再以這些問題作為起點(diǎn)，制定項(xiàng)目包裝的大綱，并在大綱中添加能給出的解決方案，再對(duì)難以滿足解決方案需要的設(shè)計(jì)稿進(jìn)行逆向調(diào)整。

可以看我們兩個(gè)分析更完整的案例作為參考：

B端交互框架改版 - 我用即時(shí)設(shè)計(jì)改了即時(shí)設(shè)計(jì)頁面
超肝交互改版?| 飛書多維表格交互改版全流程分享

結(jié)尾

關(guān)于分析的介紹寫起來比較掙扎..... 因?yàn)樯婕暗那闆r和場景太多，很難用一個(gè)標(biāo)準(zhǔn)的答案或者給你們一個(gè)通用的結(jié)構(gòu)。分析的專業(yè)性是靠日常積累出來的知識(shí)和經(jīng)驗(yàn)組成的，絕對(duì)不是套路化寫作或者 GPT 可以給你生成出來的。

這篇內(nèi)容的作用就是為了讓你們知道分析的價(jià)值是如何體現(xiàn)的，以及專業(yè)的項(xiàng)目包裝是怎么組織內(nèi)容的，如果無法實(shí)現(xiàn)相關(guān)的要求，那就寧愿刪減也好過畫蛇添足，把精力更多花在作品界面本身的質(zhì)量完善上，以免作品集最后的效果一無是處，自己都不忍直視。

后面我會(huì)進(jìn)一步提供作品集分析的具體案例，想要成為案例的同學(xué)可以在微信上給我們發(fā)布自己的作品集。想要快速積累這些必要知識(shí)的話，建議參加我們下期的B端設(shè)計(jì)全能班。

課程介紹：今年最后一期｜B端產(chǎn)品設(shè)計(jì)課開啟招生

我們下篇分享再賤~