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

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

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

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

所以，請謹記，UX和UI 是密不可分的。

1. 設計流程

設計流程會讓面試官覺得你是一個專業的設計師而不是美工！！！

各位朋友可以看看自己的作品集，里面有沒有至少一個項目有詳細的流程介紹？

根據本蛋的長期偷窺，很多UI desingers的作品集往往只有最終效果圖，能有一些Wireframe 的都是少數。我的觀點或許跟在座的有些不同， 我認為作品集不應該只有這些最終的炫酷狂拽屌，而且應該讓看你作品集的人知道，你這些炫酷狂拽是怎么來的。

所以，就涉及到了所謂的設計流程。

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

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

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

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

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

UI 設計流程可以關注：《入門必讀！UI設計的整個工作流程是怎樣的？》

講了這多廢話，下面用我自己的作品舉個例子吧 （當然這個作品我只挑重點發局部，完整版下次發）

題目，介紹下項目的名字，種類。

這里相當于是一個隔頁or封面，用于起到分割的作用。

2. 設計流程Overview（劃重點！）

在這一頁，詳細介紹你整個設計的過程，這里我寫到從了解項目-用戶研究-設計-評估-再設計，并且搶到了設計-評估-再設計是一個反復的流程，這里比較符合agile的開發方法。

這一頁非常重要，因為這樣會讓面試你的人或是看你作品的人對你項目的流程有個宏觀的認識，并且知道你不僅僅只是局限在某一環節。如果你只參與了其中一部分，比如UI 設計，你可以著重強調。

3. 項目背景介紹/用戶介紹/各種背景知識介紹

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

4. 用戶調研

作為一個交互設計師，你的作品應該是有數據來源的，為了更好的了解用戶，你需要收集數據。這里我推薦最基礎的兩種調研方法，問卷和訪談。 所以，在你的作品的過程里，加上用戶調研，會使得你的最終結果非常有說服力。（沒有？沒有你可以編啊... ）

5. 角色板

這個可要可不要，就是根據你的調研模擬出幾個代表性的用戶。

6. 設計需求/洞察點

當你有一系列數據作為支撐了并且還有假定的用戶組了，你就可以列出你的設計洞察點了。

7. 頭腦風暴

這里就是炫草圖的時候了，瘋狂的堆草圖，顯得你做了很多方案動了很多腦子！！！

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

8. 交互模型

咱們是交互設計師，不是美工，為你的產品繪制一個交互模型會讓面試官覺得不明覺厲，同時更好的了解你的作品是怎么“交互”的。、

9. HTA Chart & Wireframe

HTA Chart 是表達層級的圖，這里也可以用flow chart代替。線框圖大家都很熟悉啦。都放進作品集里會讓人清楚的了解到你一步一步是怎么到線框圖這個步驟的。

10. UI 效果圖

圖略

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

11. 評估

對我來講，做完UI 不代表完事兒了，你還需要對你的作品進行評估，這里我用的是啟發式評估，非常快速有效的方式。把評估這一環節做進你作品集里，會讓面試官覺得眼前一亮（我猜）

12. 再設計

再次略

就是把評估找出來的問題能解決的盡量解決。

13. 最終展示圖

還是略

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

歡迎關注作者的團隊MDD Design。

「學習UI 設計都不能錯過的iOS 10 設計指南」

1. 《熱門好文！從IOS 10設計指南變化看設計的新趨勢》
2. 《中文版來了！UI設計師必讀的IOS 10人機界面設計指南 （一）》
3. 《中文版來了！UI設計師必讀的IOS 10人機界面設計指南 （二）》
4. 《中文版來了！UI設計師必讀的IOS 10人機界面設計指南 （三）》
5. 《中文版來了！UI設計師必讀的IOS 10人機界面設計指南 （四）》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量150萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com