今天，我們則要圍繞一個更重要的話題展開討論，即作品集中的作品，有哪些設(shè)計要求，以及應(yīng)該做成什么樣。

往期干貨：

一、作品集中的作品要求

作品集是設(shè)計師表現(xiàn)自己專業(yè)能力的載體，里面囊括了大量的內(nèi)容和圖文信息，而最讓設(shè)計師頭疼的東西就是作品集中的“分析”內(nèi)容，包括產(chǎn)品、項(xiàng)目、體驗(yàn)、用戶、交互等分析對象。

要把它們寫好并合理的展示在作品集中確實(shí)很困難，對設(shè)計師的能力、經(jīng)驗(yàn)、表達(dá)、項(xiàng)目質(zhì)量都有一定的要求，所以很多新手會把大量的注意力、精力應(yīng)用在這些領(lǐng)域，尤其是對項(xiàng)目包裝的理解即 —— 使用精妙的話術(shù)來編寫項(xiàng)目分析文案。

這種偏向，當(dāng)然是錯誤的！之前的分享里一直強(qiáng)調(diào)過，作品集為什么叫作品集，因?yàn)樗亲髌返募?，對于設(shè)計師來說作品本身才是作品集里最重要的部分。

只不過簡單的羅列界面看起來太簡陋，而且感覺很不正式，所以催生出了對作品進(jìn)行包裝的需要。通過使用更有設(shè)計感的排版，加上文字的描述，讓作品展示能像一本藝術(shù)介紹畫冊一樣娓娓道來，增加觀看體驗(yàn)。

不管是藝術(shù)畫冊還是設(shè)計師作品集，包裝都是為了展示作品本身而服務(wù)，作品本身有值得展示的水平，才有包裝的空間，如果作品本身沒有說服力，那么不管增加什么話術(shù)和包裝內(nèi)容都是徒勞的。

至于作品做到什么程度才能滿足展示的基本要求，可以歸納為下面幾個要點(diǎn)：

1. 作品內(nèi)容的完整性、連續(xù)性
2. 設(shè)計符合規(guī)范、交互、體驗(yàn)的基本要求
3. 能具有一定的設(shè)計風(fēng)格和品牌調(diào)性

第一點(diǎn)，是作品展示的前提，即挑選出來展示界面數(shù)量要足，且能代表產(chǎn)品的主要服務(wù)、模塊、流程，而不是隨便選一些頁面湊上去，或者像很多新手作品集里一個項(xiàng)目就只放 5、6 個界面。

作品內(nèi)容太空洞，那這個項(xiàng)目就可以直接判死刑了，不管你怎么包裝都沒有用。具體的操作思路在上面的分享鏈接已經(jīng)加了，就不在這里再放出來了。

第二點(diǎn)，就是界面要符合系統(tǒng)規(guī)范、交互操作、用戶體驗(yàn)的相關(guān)要求。具體怎么個要求法，當(dāng)然不可能一條條列出來，那等于把基礎(chǔ)的 UI 知識點(diǎn)回顧一遍，總結(jié)起來就一句話 —— 挑不出毛病的要求。

比如系統(tǒng)規(guī)范部分，很多新手連頂部狀態(tài)欄的正確應(yīng)用都沒理解，展示出來的界面都是錯的，那是非常致命的問題。

再到交互和體驗(yàn)的部分，雖然這些內(nèi)容在產(chǎn)品實(shí)際使用過程中有很大深究的空間，但在作品集這種只能展示少數(shù)靜態(tài)頁面的模式下，就大大消除了這種可能。我們作為觀看者，只能從展示的頁面中大致判斷交互是否合理，體驗(yàn)是否符合常規(guī)要求。

所以作品本身展示上只要確保交互做的不太極端，頁面整體設(shè)計處于常規(guī)認(rèn)知范圍內(nèi)，我們就很難挑出錯誤來。而很多初級設(shè)計師卻追求的標(biāo)新立異就是反面案例，等于提供了大量可以產(chǎn)生疑問（批判）的素材。

前面兩點(diǎn)都很好理解，只要掌握 UI 設(shè)計就能滿足。而最后一點(diǎn)最特殊，即表現(xiàn)項(xiàng)目的風(fēng)格和品牌調(diào)性。

從本質(zhì)上講，品牌調(diào)性就是“差異性”，需要在設(shè)計層面和其它產(chǎn)品產(chǎn)生差異并形成風(fēng)格，才能塑造品牌調(diào)性。比如馬蜂窩、攜程、飛豬，可以很清晰地感受到不同品牌之間的調(diào)性差異。

但上一點(diǎn)我們也提了，就是設(shè)計不能為了追求標(biāo)新立異而標(biāo)新立異，給交互和體驗(yàn)制造漏洞，這個原則和品牌性特征本身是相悖的。所以我們就要在“品牌調(diào)性” 和不影響交互和體驗(yàn)的 “安全性” 之間拉扯，去找到平衡。

穩(wěn)妥點(diǎn)的做法，就是使用基礎(chǔ)的頁面框架和交互上，在視覺樣式上尋找突破，包括更平面化的組件設(shè)計、復(fù)雜的圖標(biāo)設(shè)計、更豐富的配色等等。

可以參考一些視覺復(fù)雜的線上案例：

最后這點(diǎn)，就不止是 UI 基礎(chǔ)能力的體現(xiàn)了，而是更進(jìn)階的界面視覺能力輸出，需要設(shè)計師經(jīng)過更長時間的訓(xùn)練和積累。

但進(jìn)階的輸出還分成兩個階段，第一個階段是對單一界面視覺樣式的突破，第二個階段則是掌握全局對整體視覺方案的管理和落實(shí)。

更具體解釋，就是進(jìn)階前期可以完成對單一頁面的深度視覺優(yōu)化，但這種優(yōu)化只針對該頁面，不和其它頁面產(chǎn)生聯(lián)系，一個頁面一個優(yōu)化思路，容易導(dǎo)致最終的呈現(xiàn)效果缺乏整體性，觀感割裂。

而進(jìn)階狀態(tài)，則是先建立整體的設(shè)計風(fēng)格和效果預(yù)期，再開展對頁面的設(shè)計，不同頁面之間的設(shè)計細(xì)節(jié)聯(lián)系緊密，一致性強(qiáng)，才能形成真正的品牌調(diào)性和設(shè)計風(fēng)格。

雖然 UI 對比其它設(shè)計是不怎么難，但要達(dá)到這種水平也是有門檻的，可以輕易剔除絕大多數(shù) UI 設(shè)計師，也是新手在準(zhǔn)備作品集時面對的最大挑戰(zhàn)（不是分析）。

這部分能力是判斷 UI 設(shè)計師能力的關(guān)鍵之一，雖然新手做不到無中生有，但我們可以通過注意一些細(xì)節(jié)來規(guī)避會出現(xiàn)的問題，讓作品的輸出看起來可以更成熟、專業(yè)。

二、關(guān)于作品輸出的整體性

對于一個項(xiàng)目而言，風(fēng)格和品牌性是建立在四要素的 “一致性” 之上的，不管你用了什么設(shè)計思路、視覺、配色，都要保證整體的一致，才能為用戶建立品牌的視覺定位。

而一致性中最關(guān)鍵的，就是設(shè)計規(guī)范的建立，如何在創(chuàng)建品牌風(fēng)格以后，將規(guī)范建立并應(yīng)用到全局中。

這里的難點(diǎn)有兩個，第一是怎么建立可以形成規(guī)范的設(shè)計風(fēng)格，第二是怎么把設(shè)計規(guī)范在全局中進(jìn)行應(yīng)用。下面我們就用一個之前分享過的學(xué)員案例作為說明對象。

相信不少同學(xué)看過我們之前做過的一個旅游產(chǎn)品的作品優(yōu)化，原圖和改版后的案例如下：

這個案例在各平臺上的反對聲音居多，理由大致都是改版后更“平庸了”、“沒個性了”、“更沒設(shè)計感”等等。

這些評價在一定程度上是正確的，因?yàn)楦陌婺繕?biāo)就是是在消除特異性，建立整體性，而很多人只看圖不看字（看作品集同理），以他們的認(rèn)知無法理解這么改動的理由。

那下面，我們就更進(jìn)一步，來看看風(fēng)格過度突出的設(shè)計會發(fā)生什么問題。下面是同一套作品中后續(xù)完成的界面設(shè)計，我們將這些界面擺到一起來瀏覽：

相信放一起看可以直觀感受到，頁面的設(shè)計是 —— 割裂的。

而看作品集的人評價項(xiàng)目，評價的是一個整體，這種前后不一致造成的影響是非常負(fù)面的，因?yàn)樗憩F(xiàn)出設(shè)計師無法駕馭整個項(xiàng)目的視覺，且沒有辦法做好項(xiàng)目規(guī)范的整理和應(yīng)用。

在原設(shè)計中，首頁的三個狀態(tài)之間設(shè)計已經(jīng)開始割裂，在這種背景下是無法整理設(shè)計規(guī)范的，所以重新整理就是必要的。

在這個過程中，對初級設(shè)計師最大的建議，就是降低設(shè)計的復(fù)雜性和細(xì)節(jié)的突出性。前期設(shè)計階段類似概念設(shè)計，設(shè)計師可以自由揮灑創(chuàng)意和想法沒錯，但在現(xiàn)實(shí)世界中，適合落地的方案大多是“減配”版本。

因?yàn)橐粌蓚€界面你可以靈光乍現(xiàn)、找到好的參考，妙手偶得出讓自己滿意的結(jié)果。但如果這種靈感不能延續(xù)的話，那這種突破就會變成項(xiàng)目的 “雜音”，起到負(fù)面的影響。

所以在前期階段，一定要審查主要界面設(shè)計的成果，當(dāng)視覺開始脫離掌控，無法駕馭的時候，就要適當(dāng)消除個性，讓它回到可以控制的水平里來。

然后要對設(shè)計規(guī)范進(jìn)行細(xì)致的整理，抽取界面風(fēng)格形成的核心細(xì)節(jié)點(diǎn)，再應(yīng)用到后續(xù)的界面中去，不管這些規(guī)范要不要展示到項(xiàng)目包裝中去。

再強(qiáng)調(diào)一遍規(guī)范之所以有價值，是因?yàn)樗苎永m(xù)并統(tǒng)一全局的設(shè)計風(fēng)格，而很多作品集中的規(guī)范展示只是湊數(shù)的，隨便放一些顏色、字體樣式，對最終的設(shè)計展示毫無價值。

在新的調(diào)整案例中，我們就需要將前面的設(shè)計要素，應(yīng)用到后續(xù)的頁面中去，比如下面的一些細(xì)節(jié)：

下面是我們對整體進(jìn)行統(tǒng)一調(diào)整后的改版（簡單演示不會做的太深入）：

可以再對比前面的版本，來感受一致性之間有什么差異和提升，在作品集展示中，改動的結(jié)果和原圖對比起來哪套看起來更專業(yè)……

結(jié)尾

項(xiàng)目的設(shè)計遠(yuǎn)遠(yuǎn)不是把項(xiàng)目做出來而已，要關(guān)注的細(xì)節(jié)有很多，而這些細(xì)節(jié)才能真正體現(xiàn)一個 UI 設(shè)計師的視覺輸出能力。作為初級設(shè)計師，是不可能還沒學(xué)會走就想飛，直接把自己當(dāng)一個成熟的設(shè)計師認(rèn)為它們不重要，開始追求更復(fù)雜、深入的內(nèi)容。

建議把分享的幾篇一起看完，會對怎么輸出項(xiàng)目有全新的認(rèn)識。

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