Indie Hackers - 創業駭客 (NoCode, Webflow)

交互設計作品集應該準備哪些內容?

很多人覺得鋪陳一些線框圖就是交互的作品集。不能說線框圖沒意義,但是線框圖能代表的東西實在太少。交互設計作品集的本質和大部分設計相似,就是對於你解決設計問題的思考過程、結果和反思進行故事性的陳述

個人覺得,一份好的交互設計作品集需要擁有:一個中心(講故事 Tell a story)兩個基本點(展示設計思考過程 Demonstrate your design thinking process + 展示你的專業技巧 Demonstrate your professional skill )

1.Tell a story:如何陳述好一個故事?

儘管你放上了所有交互設計師可能會交付的產出:從研究到用戶畫像,到建模到原型,甚至到介面設計,但只是羅列"結果"上去是沒意義的。就像別人給你講故事說「小明吃了兩碗飯,小明找到了不錯的工作,小明成為了兩個孩子的父親,小明死掉了」是很無趣的一樣,如果交付的結果能代表一切的話,那為什麼大家沒看電影前那麼怕被劇透呢。

我覺得陳述好一個交互設計故事的要點在於:清晰的表達了對於產品中交互內容的想法,並且能讓你看到你是怎麼思考並解決問題的。 設計其實就是提供一種解決方案不是嗎?

「看,這是A,這是B,這是C,這是D,這是E,這是F「

「看,針對這個問題,我定義出了A這個核心設計關注點,經過研究和分析我們有了B,所以我在第一步做了C嘗試解決這個問題,經過討論和用戶測試發現C不太完善,於是在它的基礎上又設計了D,後來發現它可以用E來改進,進一步優化方案,我們有了F」

如果你在向別人講一個你如何克服各種困難去解決問題的故事,更吸引人不是嗎?至少不是冷冰冰的展示,而是和觀看的人進行對話和交流。大家可以看看這位設計師的作品陳述,可以得到一些陳述上的啟發。

2. Demonstrate your design thinking process & professional skill:如何「賣」出你自己?

當你的作品呈現在他人面前,其實就是開始推銷自己的過程了。你,作為一名優秀的銷售,最重要的知道:客戶需要什麼,而我有什麼?

了解客戶需要什麼,其實就是了解用人單位或學校招生委員會的招人需求。儘管每個公司、設計團隊、學校的招人需求有差異,但考慮到看這份答案的讀者大部分是初出茅廬的設計師/想申請交互相關專業的人,所以不管是公司或者學校對潛在人才的特質本質上都有共性,即有熱情有興趣主動性強願意思考+懂得基本的交互設計原則和方法。

當你知道了客戶需要什麼后,你嘗試滿足他們的需求,讓他們從你的作品集中可以看到他們想看到的東西:

(1)如何展現你有熱情有興趣主動性強願意思考:其實沒有什麼套路可言,但如果你能去思考設計細節而不是一直關注在宏觀資訊架構層面、去評估設計好壞,讓你的作品能夠讓人感覺到你是一直在主動學習和不斷反思的狀態,你成功了。

  • **思考設計細節:**大部分人呈現的交互設計只停留于頁面跳轉的邏輯。拜託,點擊<註冊>按鈕跳到輸入手機和密碼的介面這種事就不用說了好嗎,跟說自己會使用Word打字有什麼兩樣。說說你為什麼用側滑菜單而不用懸浮按鈕,為什麼要在螢幕畫圈圈喚出相機而不是快速雙擊power鍵,為什麼在聊天時發語音要按住說話,而不是點一下開始說話再點一下結束。思考並呈現這些交互細節不僅能讓你的作品有深度,還能不斷地迫使自己思考交互最本質的問題,讓自己進步。恭喜你,你看起來是個願意思考的孩子,明天來上班吧。
  • **評估設計的好壞:**同樣,大部分人呈現的交互設計只到把介面放出來就戛然而止了。拜託,觀點誰都會說,有理有據走一波?對自己問一個問題:如何評價你的這份設計?思考你可能用上的設計評估和測試方法及它們的指標,呈現你的評估和測試結果。然後好的設計講可以說說它的價值,壞的設計講出你的反思和收穫。恭喜你,你看起來依舊是個願意思考的孩子,下午就來上班吧。

(2)如何展現你了解基本的設計原則和方法:於是大家最熟悉的部分來了,放上那些包含結果和過程的產出,用戶研究、畫像、故事版、同理心地圖、線框圖、高保真原型… 然而放上它們就萬事大吉了嗎?NO,時刻記住你在tell a story,每個小章節的結局不代表全部,大家依舊希望看到整個故事的起承轉合

圖1. 好久以前的作品呈現中的一部分,展示設計的用戶流程

在客戶覺得他的基本需求得到滿足后,你要做的是,強化你的賣點,即最大化展現你的個人個性化的能力。你與眾不同的地方,才是最動人的地方。

Any work samples which demonstrate your skills would be considered a “portfolio”

這一步不就是你做作品集的最終目的嗎?前面說的東西都是幫助你來講好自己多麼牛逼而鋪墊的。一個人跑過來跟你說「我邏輯思維很好,我創造力很強」,你會深以為然嗎?在你們沒有相處過和互相了解前,只有他告訴你他的故事,你才有可能對他的能力進行評估。

所以說,故事不是隨便亂說的,一個作家的絕妙之處在於他把自己的寫作優勢在文章中最大化。很多故事都很精彩,但有的讓人流連於他的心理細節刻畫,有的行為和動作場景引人入勝,有的營造的氛圍和共鳴讓人慾罷不能。

有的人有心理學和人類學背景,他們可以在產品的設計過程中發揮在用戶研究分析中舉足輕重的作用,把自己對人行為和認知的理解展現得十分完美;有的人學工業設計或者視覺傳達,所有的設計想法都渲染得十分直接清晰易懂;有的學理科或者工程,能夠把主觀化的設計思路進行清晰的邏輯化和結構化闡釋。我不相信在同一個故事下,他們三者的作品集是一樣的。

圖2. 同樣是多年前的陳年老設計。我覺得把微交互和動效也設計得清晰易懂是我的能力嘛

圖3. 陳年老設計+1。為什麼交互一定是黑白線框?為了闡釋自己的思路,做出突破也沒事 that&#39;s my story,服務於我自己的目的

**說什麼樣的故事在於自己,體現什麼樣的個性和價值在於自己。方法是死的,人是活的。**有些人用三張圖就讓人看到他的價值,有些人寫一篇部落格讓人看到他的能力。沒有誰是一樣的,關鍵在於你怎麼去用一個故事(不論情節是否精彩)最大化的表現自己的能力。

那麼最後,真的要恭喜你了。客戶發現自己的需求被滿足,又被你有感染力的故事情節和個性打動。你的作品整合功把你推銷出去了。


關於該回答不斷更新的Q&A

Q1. 每個作品都講故事的話,呈現的內容會不會很多?

Tell a story 是很花時間時間的一件事情,如果時間不充裕,或者篇幅不允許,不推薦把自己的每個項目都做成這樣,拿你覺得可以講出好故事的1-2個項目來就好了,剩下的可以選取代表性的設計交付物和設計流程階段標誌進行簡單呈現。

另一件很重要的事是,少用大量文字表達,多用視覺化和圖形化的方式表達。既可以提高讀者閱讀效率,也能讓你整體作品集觀感更加豐富。視覺設計能力一般的設計師,那麼追求邏輯和結構清晰無誤的展現為目標,一定要注意注意可讀性,經驗來看,大部分初級設計師的作品集可讀性都很差…千萬不要在可讀性這種最基本的問題上為您自己扣分啊。

Q2. 線框圖該以什麼樣的方式存在?

在實際工作場景中,線框圖最重要的作用是幫助開發理解邏輯,以及作為進行設計走查的輔助文件。整個項目完整的線框圖其實沒有什麼值得展示的,並且沒有人真的會去看你的線框邏輯頁面跳轉(把它做清楚就吐了口老血了,你自己都不會去再看一遍吧)。但在作品集中,它可以服務於兩個目的(1)對局部或細節的交互邏輯進行說明(2)告訴讀者你是會做線框圖的。

如果你做了一個規模宏大的線框圖,很想展示,OK,弱化視覺減少版面佔用(幾乎沒有人會去看的),甚至當作背景,能表達你會和你有做,就完事了。你可以用這樣的處理方法:

圖4. 我作品集中用一個圖片來表達「快看,我做了好多線框圖!」

Q3. 怎麼評估自己的設計?

很多人的很多設計項目並不是上線產品,沒有用戶數據進行驗證。但是沒事啊,Evaluation的方式有這麼多(愛學習的你一定會去了解各種評估和測試方法的),低成本的用戶測試和啟發性評估是比較常用的,不需要大動干戈就能完成的。

——————————————
所謂的講故事的陳述原則,IBM Design的指導可能有幫助:IBM Design: blog 。當然,講故事這件事,說起來簡單,但也是需要長期的鍛煉以及技巧指導的。才疏學淺,一點體會,歡迎大牛批評指正。如果需要作品集設計的意見指導,可以私聊我~