UI設(shè)計(jì)師該如何展示自己的作品？可千萬別被網(wǎng)絡(luò)上那些精美的一圖流欺騙了。今天這篇是實(shí)實(shí)在在的干貨，教你如何包裝自己的作品，如何展示給面試官看。這里講的包裝，并不是說要讓自己的作品集看起來炫酷狂拽，而是讓自己的作品有一個(gè)完整的過程。

本篇文章適合求職UI職位的朋友以及UI想要轉(zhuǎn)UX職位的朋友。

什么是UI？什么是UX？很多人覺得UI就是美工，就是做做圖。exucuseme？看我不打死你。

UI和UX是不能分離的，沒有好的UX，再美的產(chǎn)品也沒人愿意用，同理，沒有好的UI，再好用的產(chǎn)品也沒人想去嘗試。

所以，請(qǐng)謹(jǐn)記，UX和UI是密不可分的。

1.設(shè)計(jì)流程

設(shè)計(jì)流程會(huì)讓面試官覺得你是一個(gè)專業(yè)的設(shè)計(jì)師而不是美工?。?！

各位朋友可以看看自己的作品集，里面有沒有至少一個(gè)項(xiàng)目有詳細(xì)的流程介紹？

根據(jù)本蛋的長期偷窺，很多UIdesingers的作品集往往只有最終效果圖，能有一些Wireframe的都是少數(shù)。我的觀點(diǎn)或許跟在座的有些不同，我認(rèn)為作品集不應(yīng)該只有這些最終的炫酷狂拽屌，而且應(yīng)該讓看你作品集的人知道，你這些炫酷狂拽是怎么來的。

所以，就涉及到了所謂的設(shè)計(jì)流程。

看到這里，你可能會(huì)想說：寶寶就是面UI，根本不需要什么過程啊，好不好看最重要。

對(duì)于這個(gè)疑問，本蛋只想說，針對(duì)不同的公司，需求可能不同，但是如果你想要真正進(jìn)入IXD這個(gè)行業(yè)，對(duì)于UX的了解是必須的。或許你已經(jīng)了解了UX，但是你作品集里并沒有體現(xiàn)，那么這不就是埋沒了你的才華嗎？

一個(gè)清晰的設(shè)計(jì)流程，不僅可以讓你輕松的去講解你的設(shè)計(jì)，同時(shí)，還可以讓面試官覺得雖然你面試的是UI，但是同時(shí)你對(duì)UX的了解程度可以讓你很好的去和UX設(shè)計(jì)師合作。

看到這里的朋友，可以看看自己的作品集里有沒有一個(gè)項(xiàng)目包含了完整的設(shè)計(jì)流程？如果沒有，本蛋這里會(huì)舉一些例子來告訴大家怎么來“完整”自己的項(xiàng)目。

設(shè)計(jì)流程有很多種，大同小異。而如今，開發(fā)和設(shè)計(jì)開始緊密結(jié)合，很多公司在招聘的時(shí)候就會(huì)提到一些開發(fā)的方法，所以今天我要講的設(shè)計(jì)流程中會(huì)提到一些開發(fā)流程。他們分別是Waterfall（瀑布流式開發(fā)）&agile（敏捷開發(fā)）.（劃重點(diǎn)啦）。而如今agile成為主流的開發(fā)流程方法，雖然我們不是程序猿，但是我們同樣可以在面試的時(shí)候提到這些這些方法，讓面試官覺得你不僅只是個(gè)美工。

UI設(shè)計(jì)流程可以關(guān)注：《入門必讀！UI設(shè)計(jì)的整個(gè)工作流程是怎樣的？》

講了這多廢話，下面用我自己的作品舉個(gè)例子吧（當(dāng)然這個(gè)作品我只挑重點(diǎn)發(fā)局部，完整版下次發(fā)）

題目，介紹下項(xiàng)目的名字，種類。

這里相當(dāng)于是一個(gè)隔頁or封面，用于起到分割的作用。

2.設(shè)計(jì)流程Overview（劃重點(diǎn)！）

在這一頁，詳細(xì)介紹你整個(gè)設(shè)計(jì)的過程，這里我寫到從了解項(xiàng)目-用戶研究-設(shè)計(jì)-評(píng)估-再設(shè)計(jì)，并且搶到了設(shè)計(jì)-評(píng)估-再設(shè)計(jì)是一個(gè)反復(fù)的流程，這里比較符合agile的開發(fā)方法。

這一頁非常重要，因?yàn)檫@樣會(huì)讓面試你的人或是看你作品的人對(duì)你項(xiàng)目的流程有個(gè)宏觀的認(rèn)識(shí)，并且知道你不僅僅只是局限在某一環(huán)節(jié)。如果你只參與了其中一部分，比如UI設(shè)計(jì)，你可以著重強(qiáng)調(diào)。

3.項(xiàng)目背景介紹/用戶介紹/各種背景知識(shí)介紹

這頁我選擇的是用戶介紹，用了infographic去展示我的插畫能力同時(shí)起到視覺吸引效果，說實(shí)話，沒有誰會(huì)一字一句讀這些內(nèi)容，但是有這個(gè)用戶介紹，會(huì)讓面試官對(duì)你的設(shè)計(jì)背景有更好的理解。

4.用戶調(diào)研

作為一個(gè)交互設(shè)計(jì)師，你的作品應(yīng)該是有數(shù)據(jù)來源的，為了更好的了解用戶，你需要收集數(shù)據(jù)。這里我推薦最基礎(chǔ)的兩種調(diào)研方法，問卷和訪談。所以，在你的作品的過程里，加上用戶調(diào)研，會(huì)使得你的最終結(jié)果非常有說服力。（沒有？沒有你可以編礙）

5.角色板

這個(gè)可要可不要，就是根據(jù)你的調(diào)研模擬出幾個(gè)代表性的用戶。

6.設(shè)計(jì)需求/洞察點(diǎn)

當(dāng)你有一系列數(shù)據(jù)作為支撐了并且還有假定的用戶組了，你就可以列出你的設(shè)計(jì)洞察點(diǎn)了。

7.頭腦風(fēng)暴

這里就是炫草圖的時(shí)候了，瘋狂的堆草圖，顯得你做了很多方案動(dòng)了很多腦子?。?！

頭腦風(fēng)暴怎么做？來看這份超詳細(xì)的指南：《別急著畫稿！來看這份全面細(xì)致的頭腦風(fēng)暴指南》

8.交互模型

咱們是交互設(shè)計(jì)師，不是美工，為你的產(chǎn)品繪制一個(gè)交互模型會(huì)讓面試官覺得不明覺厲，同時(shí)更好的了解你的作品是怎么“交互”的。、

9.HTAChart&Wireframe

HTAChart是表達(dá)層級(jí)的圖，這里也可以用flowchart代替。線框圖大家都很熟悉啦。都放進(jìn)作品集里會(huì)讓人清楚的了解到你一步一步是怎么到線框圖這個(gè)步驟的。

10.UI效果圖

圖略

這里大家都有啦，就是各種炫酷狂拽屌了，但是提醒大家的是，最好放大你這個(gè)產(chǎn)品的特色進(jìn)行展示。

11.評(píng)估

對(duì)我來講，做完UI不代表完事兒了，你還需要對(duì)你的作品進(jìn)行評(píng)估，這里我用的是啟發(fā)式評(píng)估，非?？焖儆行У姆绞?。把評(píng)估這一環(huán)節(jié)做進(jìn)你作品集里，會(huì)讓面試官覺得眼前一亮（我猜）

12.再設(shè)計(jì)

再次略

就是把評(píng)估找出來的問題能解決的盡量解決。

13.最終展示圖

還是略

最后再來張炫酷狂拽的！就完事啦！

請(qǐng)聯(lián)系網(wǎng)站客服，了解詳細(xì)的優(yōu)惠課程信息~

優(yōu)質(zhì)、權(quán)威、便捷、省心