今天對(duì) B 端作品集的項(xiàng)目應(yīng)該怎么展示和包裝做次更新，來(lái)分享應(yīng)該如何正確、有效的完成對(duì)作品集的輸出。

更多作品集設(shè)計(jì)方法：

一、項(xiàng)目作品集包裝的基本結(jié)構(gòu)

項(xiàng)目作品集包裝，就是用一種更合理、更能被接受的方式，來(lái)展示我們的設(shè)計(jì)方案。這里有個(gè)默認(rèn)的前提，就是直接把界面堆一起展示出來(lái)，是不行的，是不被市場(chǎng)認(rèn)可的。

因?yàn)锽端界面本身視覺(jué)樣式的上限就不高，而且信息又密集功能又難懂，光看一套界面圖例往往 —— 既沒(méi)設(shè)計(jì)看點(diǎn)又看不懂，沒(méi)人想看這樣成套堆積起來(lái)的 B 端界面圖。換你你也不想看這樣的設(shè)計(jì)案例。

所以項(xiàng)目肯定要換種形式展示，且光展示圖也不夠，因?yàn)?B 端界面的復(fù)雜性導(dǎo)致外人很難理解，即看不懂這是什么項(xiàng)目，又不明白這些界面有什么用。于是，為項(xiàng)目的展示添加文字說(shuō)明也就有了必要性，比如添加項(xiàng)目說(shuō)明，再依次補(bǔ)充頁(yè)面說(shuō)明、功能說(shuō)明、操作說(shuō)明等。

但這種基礎(chǔ)說(shuō)明方式只是流水賬，它們與其說(shuō)是項(xiàng)目說(shuō)明更不如說(shuō)是簡(jiǎn)化的 ——?產(chǎn)品說(shuō)明書(shū)。所以問(wèn)自己一個(gè)簡(jiǎn)單的問(wèn)題：你喜歡看產(chǎn)品說(shuō)明書(shū)嗎？

不想做成產(chǎn)品說(shuō)明書(shū)，且 B 端界面視覺(jué)也沒(méi)有太多能講的，所以項(xiàng)目包裝想要吸引人，就要圍繞設(shè)計(jì)的核心價(jià)值點(diǎn)去開(kāi)展，即 ——?設(shè)計(jì)解決了什么問(wèn)題。

所有商業(yè)設(shè)計(jì)項(xiàng)目本質(zhì)上都是基于商業(yè)目標(biāo)開(kāi)展的商業(yè)活動(dòng)，所以設(shè)計(jì)的核心價(jià)值就是滿足商業(yè)的訴求。所以最好的項(xiàng)目展示方式，就是解釋你得設(shè)計(jì)產(chǎn)生了什么樣的價(jià)值，解決了哪些問(wèn)題。

比如一個(gè)原本用起來(lái)非常別扭的產(chǎn)品要重構(gòu)，你能不能做出讓操作者用起來(lái)更順手的新全局框架。一個(gè)需要高頻操作的復(fù)雜的采購(gòu)申請(qǐng)流程，你能不能根據(jù)需求大幅度優(yōu)化交互步驟和界面引導(dǎo)提高操作效率。

在一個(gè)正式項(xiàng)目中，為了實(shí)現(xiàn)這樣的設(shè)計(jì)目標(biāo)，就肯定會(huì)搭建一個(gè)對(duì)應(yīng)的工作流程，而不是聽(tīng)一遍產(chǎn)品（老板）的需求以后繼續(xù)打開(kāi)設(shè)計(jì) Figma 做圖。

如果我們把 B 端設(shè)計(jì)項(xiàng)目按一個(gè)比較完成的流程整理下來(lái)，就包含 “計(jì)劃” 和 “實(shí)施” 兩個(gè)模塊。每個(gè)模塊下還會(huì)包含若干的工作節(jié)點(diǎn)，分別解決不同的問(wèn)題，為后續(xù)的工作提供提供提供準(zhǔn)備和依據(jù)。

所以展示最合理的方式，就是去還原這個(gè)流程，解釋項(xiàng)目本身的需求是什么，你是怎么分析并確定設(shè)計(jì)方案，以及完成最終設(shè)計(jì)結(jié)果的。這是作為招聘方、面試者最喜歡也最想看到的內(nèi)容，因?yàn)槠髽I(yè)招聘找你來(lái)就是讓你用設(shè)計(jì)去解決他們想要的結(jié)果，而不是僅讓你把圖做出來(lái)而已。

同時(shí)這也是面試必問(wèn)的問(wèn)題，讓你介紹項(xiàng)目和設(shè)計(jì)的思路，如果你的回答只是停留在視覺(jué)上的考慮或理論解釋?zhuān)臼遣粫?huì)獲得好的評(píng)價(jià)的。

相信這部分邏輯很好理解，那么我們來(lái)面對(duì)一個(gè)更重要的問(wèn)題，要是你自己的項(xiàng)目就沒(méi)那么執(zhí)行隨便應(yīng)付，或是你沒(méi)工作經(jīng)驗(yàn)項(xiàng)目是改版或模擬的，那項(xiàng)目包裝不就沒(méi)東西寫(xiě)？

這就需要我們自己“編”出來(lái)了，即建立一個(gè)包裝的內(nèi)容框架，再根據(jù)這個(gè)框架來(lái)填充里面的內(nèi)容。當(dāng)然，這個(gè)過(guò)程不是胡編亂造，而是根據(jù)自己的分析重新把這個(gè)流程 “補(bǔ)充” 一遍，去建立一套有邏輯性的包裝內(nèi)容。

而這就要進(jìn)入我們下個(gè)章節(jié)的解釋。

二、項(xiàng)目包裝的結(jié)構(gòu)定義

到這個(gè)階段，我們就要組織項(xiàng)目的具體包裝內(nèi)容和結(jié)構(gòu)了。項(xiàng)目包裝之所以叫包裝，因?yàn)樗?strong>不是純粹做虛假的美化，而是要有目的性的控制對(duì)一個(gè)項(xiàng)目的展示內(nèi)容。

所以不是往里面堆越多內(nèi)容越好，因?yàn)閷?zhuān)業(yè)的設(shè)計(jì)過(guò)程中可以寫(xiě)得東西太多了，全寫(xiě)即沒(méi)必要也沒(méi)人想看，所以我們往里面添加內(nèi)容一定要夠精簡(jiǎn)、有足夠的必要性。要完成這個(gè)步驟就先確定展示的主要模塊有哪些，然后再進(jìn)一步細(xì)化。

雖然不同項(xiàng)目會(huì)有很大的差異，但大體上我們可以遵循下面這樣的結(jié)構(gòu)來(lái)完成（僅供參考你們要自己做調(diào)整和增減）：

1. 項(xiàng)目封面
2. 項(xiàng)目介紹
3. 業(yè)務(wù)說(shuō)明
4. 設(shè)計(jì)目標(biāo)/問(wèn)題
5. 用戶(hù)/體驗(yàn)分析
6. 風(fēng)格定義
7. 界面展示
8. 結(jié)束頁(yè)

有了模塊的結(jié)構(gòu)，那么下一步就是編寫(xiě)文案內(nèi)容（自己用文檔工具寫(xiě)），完成后再將圖文置入畫(huà)布中進(jìn)行最后的排版設(shè)計(jì)并輸出。下面我們簡(jiǎn)單介紹下不同節(jié)點(diǎn)之間的內(nèi)容都有哪些。

1. 封面和結(jié)束頁(yè)

首先封面和結(jié)束頁(yè)是最基本的頁(yè)面類(lèi)型，它們存在的價(jià)值是為了區(qū)分作品集之間不同的項(xiàng)目，所以尤其是封面的設(shè)計(jì)，可以不需要添加很多文字信息但項(xiàng)目名一定要醒目，視覺(jué)要突出，才能讓觀看者很輕易的識(shí)別要開(kāi)始瀏覽新的項(xiàng)目。

2. 項(xiàng)目介紹

項(xiàng)目介紹就是簡(jiǎn)單說(shuō)明這個(gè)項(xiàng)目、產(chǎn)品是什么，以及項(xiàng)目的目標(biāo)有哪些。讓觀看者進(jìn)入狀態(tài)，對(duì)項(xiàng)目有個(gè)起碼的認(rèn)識(shí)，以及清楚你設(shè)計(jì)針對(duì)的問(wèn)題是什么。

3. 業(yè)務(wù)說(shuō)明

業(yè)務(wù)說(shuō)明就是根據(jù)你的理解對(duì)項(xiàng)目面向的核心業(yè)務(wù)進(jìn)行說(shuō)明，可以展示的是業(yè)務(wù)架構(gòu)圖也可以是業(yè)務(wù)流程圖。作用是展示自己對(duì)產(chǎn)品業(yè)務(wù)的熟悉程度，而不是指望觀看者真的完全看懂。

如果產(chǎn)品包含的業(yè)務(wù)非常多且復(fù)雜，那么就要自己確認(rèn)出核心的業(yè)務(wù)模塊出來(lái)，尤其是后續(xù)設(shè)計(jì)中展示的部分，而不是單純?yōu)榱藴愖謹(jǐn)?shù)添加大量的業(yè)務(wù)說(shuō)明但和后續(xù)設(shè)計(jì)沒(méi)有任何聯(lián)系。

4. 設(shè)計(jì)目標(biāo)/問(wèn)題

有項(xiàng)目的基本要求和對(duì)業(yè)務(wù)的理解，就會(huì)引出進(jìn)一步設(shè)計(jì)的方向，如設(shè)計(jì)目標(biāo)上要更換全局框架、搭建組件庫(kù)、優(yōu)化操作流程等等。如果是改版項(xiàng)目，也可以提供原有項(xiàng)目設(shè)計(jì)中存在的缺陷有哪些，而設(shè)計(jì)的目標(biāo)就是優(yōu)化這些問(wèn)題。

5. 用戶(hù)體驗(yàn)分析

用戶(hù)體驗(yàn)分析可以包含好幾個(gè)階段和步驟，看自己怎么發(fā)散，核心是對(duì)項(xiàng)目操作對(duì)象或產(chǎn)品體驗(yàn)的要點(diǎn)做總結(jié)，比如原用戶(hù)對(duì)產(chǎn)品哪些操作不滿意的信息收集，或是你自己發(fā)現(xiàn)的產(chǎn)品體驗(yàn)待優(yōu)化的空間有哪些。

要注意 B 端和 C 端不一樣，用戶(hù)的分析最好是直接溝通訪談收集的反饋，而不需要大規(guī)模測(cè)試和實(shí)驗(yàn)（就沒(méi)那么多用戶(hù)），用戶(hù)群體不是非常特殊也不用整用戶(hù)畫(huà)像出來(lái)。只要他們的訴求和反饋?zhàn)銐蛴姓f(shuō)服力即可。

6. 風(fēng)格定義

這里就是展示行成項(xiàng)目視覺(jué)風(fēng)格的主要思路和規(guī)范，包括情緒版的定義，以及設(shè)計(jì)規(guī)范和組件庫(kù)的展示。規(guī)范展示建議可以直接展示軟件中創(chuàng)建的規(guī)范信息，而不是就隨便丟一點(diǎn)字體、色彩、組件上去，看起來(lái)會(huì)非常的糊弄。

7. 界面展示

最后一個(gè)，就是對(duì)完成的頁(yè)面進(jìn)行具體的展示了。展示頁(yè)面有兩種不同的展示模式，一種是圍繞單一頁(yè)面做展示，解釋它的框架、功能點(diǎn)設(shè)計(jì)思路，另一種是圍繞模塊、流程的多頁(yè)面展示，更重點(diǎn)去解釋流程和交互的設(shè)計(jì)思路。

一個(gè)有節(jié)奏的頁(yè)面展示過(guò)程最好是能混合這兩種形式，讓下方的頁(yè)面展示效果能更豐富和多元，而不是變成流水賬看過(guò)去。而合適的頁(yè)面展示數(shù)量在20頁(yè)上下，至少有3-5個(gè)關(guān)鍵單頁(yè)，以及2-3個(gè)核心流程的展示。

對(duì)界面的說(shuō)明一定要盡可能?chē)@前面分析涉及到的問(wèn)題開(kāi)展，而不是每個(gè)頁(yè)面各解釋各的，和前后毫無(wú)聯(lián)系。

到這里一個(gè)作品集項(xiàng)目的包裝內(nèi)容就完成了，不同的項(xiàng)目當(dāng)然可以輸出不同的包裝，但本質(zhì)上就是你得給它定一個(gè)類(lèi)似寫(xiě)作的輸出的順序（大綱），然后跟著這個(gè)流程推進(jìn)。這樣不僅做起來(lái)會(huì)更有效率，后續(xù)進(jìn)行項(xiàng)目解釋的時(shí)候也可以更清晰、更從容一點(diǎn)。

結(jié)尾

最后還有一點(diǎn)，B 端作品集不用做的非常的花哨，清晰的排版和舒適的視覺(jué)，加上合理的文本與邏輯，就可以構(gòu)成一套非常專(zhuān)業(yè)優(yōu)秀的作品集。

我們下篇再賤~

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」