更多相關(guān)干貨：

最近咨詢的同學(xué)、內(nèi)部學(xué)員的作品集、線上新發(fā)的作品集看了不少，有個(gè)非?；A(chǔ)但又致命的問(wèn)題 —— 頁(yè)面的展示不合理。

為了解決這個(gè)問(wèn)題，所以我專門(mén)做一篇簡(jiǎn)單的分享來(lái)說(shuō)明。

一、項(xiàng)目展示中的問(wèn)題分析

作品集做項(xiàng)目展示就是展示項(xiàng)目的設(shè)計(jì)思路、流程、意圖、巧思，來(lái)表現(xiàn)自己對(duì)設(shè)計(jì)的理解和專業(yè)性，所以我們也叫它作品包裝。

而為了表現(xiàn)這些內(nèi)容，項(xiàng)目中就要包含大量的“八股文”，關(guān)于產(chǎn)品項(xiàng)目分析、用戶分析、體驗(yàn)分析、交互分析之類的長(zhǎng)篇大論。老實(shí)講這些內(nèi)容要寫(xiě)不難，難的是要把它們放到項(xiàng)目展示里，還要排版設(shè)計(jì)出來(lái)，是有難度，而且非常占用精力的。

因?yàn)樗鼈冏銎饋?lái)麻煩，每次項(xiàng)目包裝花費(fèi)在分析部分的精力占比就過(guò)高。而這進(jìn)一步導(dǎo)致了，留給結(jié)尾的項(xiàng)目成果展示的比重不多了……

而越是新手還是初級(jí)設(shè)計(jì)師，在這方面的問(wèn)題就越嚴(yán)重，因?yàn)樗麄兪冀K沒(méi)搞明白一件事，那就是所有設(shè)計(jì)分析、項(xiàng)目包裝 —— 都是給最后的設(shè)計(jì)成果做鋪墊的。

分析是因，設(shè)計(jì)是果，分析的目標(biāo)是讓設(shè)計(jì)的結(jié)果更有說(shuō)服力，而不是光看你怎么分析的。如果最后的設(shè)計(jì)成果拉胯了，那么前面的所有內(nèi)容都是白給。

而目前很多作品集中的成果展示問(wèn)題，甚至還沒(méi)到關(guān)注質(zhì)量的地步，而是壓根就 —— 沒(méi)看到幾張。

比如從網(wǎng)上隨便找的幾份項(xiàng)目的展示案例：

篇幅關(guān)系前面就不放了，可以說(shuō)前期分析內(nèi)容的比重遠(yuǎn)遠(yuǎn)比后面的界面內(nèi)容多。如果大家的工作抬頭是交互用研、或者純體驗(yàn)（只做方案不做圖那種），那么字多圖少?zèng)]問(wèn)題。

但作為 UI 設(shè)計(jì)師，工作性質(zhì)可是以產(chǎn)出界面為目標(biāo)的，結(jié)果一個(gè)項(xiàng)目里，我看不到幾張界面圖。

而且作為初級(jí)設(shè)計(jì)師，你前面的分析內(nèi)容也很難寫(xiě)出吸引人的內(nèi)容，套路性、湊字?jǐn)?shù)、或者干脆一眼 GPT 的內(nèi)容很多了，設(shè)計(jì)稿還巨少。少就算了，可能設(shè)計(jì)得還不太好……

那作品集中這套項(xiàng)目存在的意義是什么，讓別人陪你遨游在設(shè)計(jì)理念的汪洋大海中不能自拔嘛？

做作品集的準(zhǔn)備分析時(shí)，怎么處理成果展示的權(quán)重是最高的，而且對(duì)于越初級(jí)的設(shè)計(jì)師來(lái)重要性越高。因?yàn)樗?UI 設(shè)計(jì)師專業(yè)能力表現(xiàn)的基石，尤其主流的作品集瀏覽習(xí)慣，都是：

先拉到下方看界面產(chǎn)出的質(zhì)量，如果質(zhì)量達(dá)到要求再回去看前面的項(xiàng)目分析寫(xiě)了什么。

如果作品本身質(zhì)量太差，那么直接就關(guān)掉這份作品集，沒(méi)有往前看的必要，更不可能從分析的第一頁(yè)開(kāi)始慢慢往下看。

所以，做項(xiàng)目展示之前，好好想想這個(gè)模塊要怎么處理。

二、項(xiàng)目中的成果展示準(zhǔn)備

成果展示模塊應(yīng)該放什么內(nèi)容，要在這個(gè)項(xiàng)目包裝開(kāi)始做之前就做好計(jì)劃，而不是做到這個(gè)地方了再開(kāi)始想。

并且這個(gè)節(jié)點(diǎn)越早越好，在我們的系列課程中，甚至建議學(xué)員要在選擇作品集展示項(xiàng)目，項(xiàng)目還沒(méi)創(chuàng)建文件夾之前就要確定出來(lái)！

具體怎么做先放一放，我們要遵循 3 個(gè)基本的原則：

完整性就是展示要有頭有尾，能覆蓋項(xiàng)目設(shè)計(jì)的主要功能、頁(yè)面、流程，而不是東一個(gè)頁(yè)面西一個(gè)頁(yè)面。

內(nèi)容多則是展示的頁(yè)面的數(shù)量和內(nèi)容整體觀感要豐富，頁(yè)面數(shù)量的展示盡量不要低于 16-20 頁(yè)，避免放內(nèi)容很空曠的頁(yè)面類型進(jìn)去。

權(quán)重高指的是放的頁(yè)面對(duì)于項(xiàng)目來(lái)講是足夠重要的，和分析內(nèi)容關(guān)聯(lián)性高的，而不要放注冊(cè)、通知、設(shè)置、報(bào)錯(cuò)之類無(wú)關(guān)緊要的頁(yè)面進(jìn)來(lái)湊數(shù)（太劃水）。

上面三個(gè)原則都是基于觀看者角度定義出來(lái)的，因?yàn)樽髌芳墙o別人看的，你的目標(biāo)是要讓別人看得爽，就要考慮他們?cè)趺聪耄皇怯媚阕约阂粠樵傅南敕ㄈポ敵觥?/p>

接下來(lái)就要解釋怎么制定展示內(nèi)容了，首先以完整的項(xiàng)目為例，它必然要包含完整的產(chǎn)品頁(yè)面結(jié)構(gòu)，我們可以用思維導(dǎo)圖中的 “頁(yè)面地圖” 先總結(jié)出來(lái)。

這個(gè)思維導(dǎo)圖非常重要，因?yàn)樗梢院芮逦秧?xiàng)目包含的頁(yè)面和結(jié)構(gòu)呈現(xiàn)出來(lái)。雖然初步整理的版本可能比較簡(jiǎn)陋，有很多缺漏，但可以通過(guò)后續(xù)的步驟彌補(bǔ)。

然后下一步，就是在這個(gè)圖形中對(duì)項(xiàng)目展示中需要露出的內(nèi)容做篩選，挑出合適數(shù)量且有展示必要的頁(yè)面出來(lái)。

基于上面的原則，就可以完成一次初篩。

但初篩不代表最終展示的頁(yè)面只有這些，我們要做進(jìn)一步的整理，對(duì)項(xiàng)目包裝的展示模塊做大綱梳理。而作為潮汐這款產(chǎn)品，它的核心功能點(diǎn)就是專注、睡眠、小憩、呼吸 4 個(gè)類型的冥想和放松功能，所以重點(diǎn)為以它們展開(kāi)，再輔助次要的模塊。

下面做個(gè)簡(jiǎn)單的展示順序示例：

上面基本上就囊括了項(xiàng)目的核心功能點(diǎn)和頁(yè)面類型了，但任務(wù)結(jié)束了嘛？

還沒(méi)有，因?yàn)檫@只是最初步的梳理，不代表最終的展示結(jié)果也能那么符合邏輯。所以我們必須要思考推演一遍，這些內(nèi)容置入以后的效果，并做出改善。

比如其中一個(gè)問(wèn)題，就是內(nèi)容的重復(fù)性，雖然專注、睡眠、小憩、呼吸在功能和頁(yè)面上都是獨(dú)立的，但它們的下級(jí)頁(yè)面、選項(xiàng)、交互卻非常接近，尤其是睡眠和小憩，基本上是一樣的。

所以如果要展示，重復(fù)的內(nèi)容就要移除掉，只專注展示其中一個(gè)模塊為主。而展示專注模塊，就獨(dú)立擺那幾個(gè)頁(yè)面？

當(dāng)然是很無(wú)聊的，所以既然展示一個(gè)功能模塊，那盡可能把它表現(xiàn)清楚，最簡(jiǎn)單的做法就是把它的交互流程相關(guān)頁(yè)面都展示出來(lái)：

因?yàn)檫@個(gè)流程展示了，睡眠和小憩就只需要合并一起展示特殊的頁(yè)面類型。

最后呼吸模塊比較特殊，它和前面的模塊不一樣，但它只有一個(gè)頁(yè)面有展示的必要，只是狀態(tài)不一樣，所以我們可以著重去展示一個(gè)頁(yè)面的不同狀態(tài)。

之后的探索模塊，一級(jí)頁(yè)面內(nèi)容幾乎都是一樣的，不需要太花篇幅簡(jiǎn)單展示就行，而一些 Plus 內(nèi)容可以在這個(gè)模塊中展示，就可以以探索為起點(diǎn)完成一次 Plus 內(nèi)容的交互流程。

重新調(diào)整一遍，那么展示的內(nèi)容就進(jìn)一步細(xì)化了，增加了前面頁(yè)面地圖沒(méi)整理到的東西：

到這一步，那么對(duì)設(shè)計(jì)展示模塊的規(guī)劃也就完成了，還要再進(jìn)一步準(zhǔn)備的話，就是準(zhǔn)備相關(guān)的說(shuō)明內(nèi)容、文案了，那就是另一個(gè)問(wèn)題我們以后再談。

雖然整理到這步也不算難，但面對(duì)真實(shí)項(xiàng)目，可能出現(xiàn)的問(wèn)題會(huì)打亂我們的節(jié)奏，比如：

項(xiàng)目的頁(yè)面太少

項(xiàng)目的迭代涉及的頁(yè)面太少

重要的頁(yè)面設(shè)計(jì)得很難看

很多頁(yè)面內(nèi)容很空

頁(yè)面相似度太高重復(fù)性強(qiáng)（尤其 B 端）

……

這些都不是問(wèn)題，規(guī)劃的目的是確定方向，而有了方向以后有什么問(wèn)題，你就要去解決什么問(wèn)題。

上面提到的所有問(wèn)題，設(shè)計(jì)師都可以根據(jù)自己對(duì)項(xiàng)目的理解重新梳理、設(shè)計(jì)出來(lái)，而不要原來(lái)項(xiàng)目長(zhǎng)什么樣，你項(xiàng)目包裝里設(shè)計(jì)產(chǎn)出就長(zhǎng)什么樣……

如果中間有些頁(yè)面還沒(méi)做，或者需要重做，你就要花時(shí)間去準(zhǔn)備，而這本身就是做作品集中最重要的一個(gè)環(huán)節(jié)。先有好的作品，才有好的作品集！

作品就像食材，包裝是烹飪過(guò)程，食材質(zhì)量越好結(jié)果的上下限越高，甚至生食都要夸贊你的“食材本味”。而劣質(zhì)、單調(diào)的食材，是做不出可口佳肴的……

結(jié)尾

提升這種計(jì)劃的能力其實(shí)很簡(jiǎn)單， 只要像上面一樣把線上案例作為一個(gè)展示對(duì)象，去安排展示內(nèi)容，你很快就能抓到訣竅。而直接用你們自己的項(xiàng)目，顧慮會(huì)太多反而效果很差。

進(jìn)步就靠你們自己了……

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