實戰乾貨 · 手把手教你把作品集項目改得美美噠

作品集是設計師的門面，找工求職時，它決定了公司對設計師的第一印象。學生作品集里通常會有一些學校項目，它們的特點就是「重過程，輕視覺」，過程都非常全面、詳實，而視覺上花的功夫比較少，這其實是很吃虧的。

為了讓大家都能把作品集做得美美噠，Hoka 找出了自己 3 年前的第一份 UI 設計作業，做了視覺重設計，並且記錄下了重設計的思路和視覺設計的小技巧，分享給大家~

適合讀者：

• 剛畢業或還在上學，需要找實習和第一份工作的同學們

• 想要申請設計/HCI類項目的同學們

因為這份作業是在美國讀書時做的，所以 UI 是英語的，不過設計的思路無論中英文都是共通的。

第一份 UI 作業：大學生運動 app

這是我的第一個設計項目，一個典型的學生項目。當時被密歇根大雪凍僵的我，摸著越來越圓的小肚紙，決定做一個幫助大學生參加體育活動的 app。app 的目標很簡（yòu）單（zhì），用戶能看到學校里正在/即將展開的體育活動，並且登記參加這項運動。比如有一群小夥伴想去打籃球，還缺一個人，就可以發布到這個 app 上，想打籃球的同學看到了，覺得時間、地點、人數沒有問題，就可以登記參加。

講完了 app 的背景，我們看一下我當時設計的首頁長什麼樣子吧：

我當時就拿著這個項目去面試了一些設計實習，一份 offer 都沒有拿到，最後還是做起了自己的老本行用戶研究。現在想來，這些公司還是很有眼光的。。

沒有關係，魯迅大大說了，真的猛士，敢於直面慘淡的人生。現在 3 年過去了，為了寫這篇文章，我重新設計了這個 UI。先看一下最終稿：

是不是感覺高大上了很多！雖然起點低，但是我們進步大啊！默默給自己鼓個掌~~

好啦，言歸正傳，我是怎麼一步一步，把原來醜醜的界面改好的呢？

1. 減少不必要的導航元素，把空間留給最重要的內容

這個界面其實比較簡單，主要由導航和列表元素組成，我先從導航著手，刪減不必要的元素。

• 我刪減了屏幕上方的地圖。當時放上地圖是為了表達「我們給你推薦的都是學校周邊的活動哦」，但是除此之外，這張地圖並沒有什麼實際作用，因為地圖實在太小了，沒法導航，還非常佔用空間，所以我決定用更簡單的方式來傳遞同樣的信息：直接用文字顯示地名。

• 標籤欄（tab bar）有三個選項：首頁、創建新活動、我的活動。這裡「我的活動」與導航條（navigation bar）里的「個人資料」和「設置」有些重合，所以我決定合併這三者，畢竟它們不是這個頁面的重點，我也不希望面試官過多關注這些部分。

1. 刪除了導航欄的圖標，合併到了標籤欄的「個人頁面」。2. 去掉了地圖，直接顯示地名。

導航部分的視覺設計非常容易，我下載了蘋果官方 UI 模板，直接複製狀態欄、標籤欄。標籤欄的圖標都是直接從 Material Design 網站（http://material.io）上找的，非常方便。

2. 重設計列表元素（每一場活動），讓信息更直觀

這個頁面 70% 以上都是由活動項目構成的，所以為活動確定一個基本的框架非常重要，我分析了最重要的 3 個元素和視覺上存在的問題：

活動開始時間

學生的日常主要以學習為主，運動時間都是圍繞著上課、學習，所以要突出時間，幫助學生安排日程。第一版里時間的突出程度尚可，但是這個日期的表達方式讓人費解，「20 Mar」是什麼時候？今天？明天？還是三個月後？體育鍛煉是比較即興的活動，應該更強調相對時間，比如用「明天」、「下周一」之類的幫助用戶快速理解日期，畢竟一個人不太會去註冊三個月後的鍛煉活動…… 至於 9:00–11:00 這種上午下午不分的低級錯誤就更不用說了。

用相對日期代替日期

位置

位置能幫助學生確定距離，還能幫他們導航，但在第一版里，我用的是地址（天啦嚕，你記得你們學校大活的地址嗎？？），用場館名稱會更直觀。

用場館名稱代替地址

運動類型

運動類型非常重要，因為一個人喜歡或擅長的運動就那麼幾項，剩下的運動對 ta 沒有特別大的意義。但是第一版里碩大的球類圖標太過吸睛，長得還都差不多，效果不理想。

運動類型的解決方案有：文字（不夠顯眼）、圖標（球類縮小了看起來都差不多）、場館圖片。考慮到場館圖片能比較清晰地傳達運動種類，還能豐富頁面元素（剩下的元素都是文字），所以我決定試試用場館圖片，並加上文字輔助理解。

用場館照片和文字代替厚重的圖標

3. 迭代排版，視覺調整

確定了視覺內容，接下來就是排版啦！第一步就是去掉綠色的背景，當時流行彩色背景，但現在看來果然黑白才是永恆的經典。

3 年前的版本里，所有文字都是一模一樣的處理方式（字型大小、灰度、粗細、行間距、相對位置），從遠處看，除了圖標非常顯眼之外，文字看起來就是一團，抓不到重點。在重設計里，我增加了文字處理的多樣性：把標題加粗、加深，作為視覺錨點，幫助用戶瀏覽。把兩張圖片進行模糊處理後的視線對比：

左：在舊版本中，視線集中在運動圖標上，這不是我們想要達到的目標。右：標題加粗、分隔按鈕後，視線的移動軌跡是：照片、標題、頭像和按鈕。

在色彩方面，我挑了幾個不同灰度的藍灰色作為字體顏色，比純灰更好看=v=。

很快改出了 A 版：

這個版本的按鈕顏色太跳，吸引了太多注意力，所以我刪去了按鈕的背景顏色填充。

在沒有填充矩形的情況下，有幾種辦法來做出按鈕效果：

• 全大寫

• 加入圖標

• 加入分割線

考慮到橫向空間比較緊湊，我用了全大寫設計，視覺上平衡了一些：

版本 B 的按鈕被分隔在了屏幕右邊，通過全大寫來創造按鈕的形狀

A、B 兩版排版有一個共同問題：每個學校的場館數量有限，那麼用戶會看到的照片數量也比較有限，如果在首頁里有很多重複的圖片，圖片這麼大就沒有太大意義。再考慮到圖片質量可能不夠高（用戶生成的內容的質量控制是面試常見問題），放大圖說不定會把用戶嚇跑，所以我嘗試著把照片縮小，做了版本 C：

在版本 C 里我還加上了第二個 call-to-action：保存活動，靈感來自 Facebook Events，除了「Im going」，Facebook Events 還非常強調「Im interested」，因為「Im going」是一個承諾，這個決定不是這麼容易作出，可以讓用戶先保存好活動，之後再考慮要不要參加。

在 Facebook Events 中，很多用戶會先表明對一個活動感興趣，再決定要不要參與

4. 簡化註冊流程，讓用戶邊瀏覽邊篩選

3 年前設計這個 app 時，我的想法是讓用戶在註冊時輸入所有運動相關的偏好，不是很多，大概也就 100 頁吧，告訴系統 ta 最喜歡的運動有哪些，水平是怎樣的，喜歡跟男生還是女生打球，諸如此類。註冊完畢後，用戶來到首頁，就會看到自己感興趣的活動。

這個註冊流程的目的其實是細化用戶能看到的活動項目。現在看來，這個流程並不合理，要求用戶在註冊時填寫這麼多信息不利於體驗，畢竟在註冊時，用戶還不知道填寫這些信息到底有沒有用。估計用戶在註冊的時候心情是這樣的：

所以我決定刪去這一部分，把「細化」移到首頁里，先讓用戶看到活動，然後通過搜索、篩選的方式來細化活動的條件。

因為喜歡 Airbnb 的搜索，而且時間、地點、事件的條件類型也很相似，所以我一開始採用了相似的模式。

Airbnb 的搜索

但是這個模式重瀏覽，輕搜索，如果用戶只想要找某個類型的運動（比如籃球），需要點好幾下才能篩選運動。於是在 Google app 的啟發下，我嘗試了這個版本：

版本 D：按運動分類的側滑小卡片

這一版的特點是直接按類別呈現活動，採用智能推薦的方式，給用戶推薦他們最感興趣的運動類別。如果用戶非常明確自己想要參與什麼類型的活動、而且系統有非常準確的推薦的話，或許這會是一個好的方案。但是小卡片的空間有些逼仄，而且很可能現實里某些運動類型下只有一個活動，這樣的話，就只有一張卡片孤零零的，那畫面就有點尷尬了。而且，這個模式暗示了運動類型具有排他性，但有時用戶可能只是想鍛煉，只要是自己喜歡的幾種運動之一就可以，並不一定是「我就是想打籃球，其他的都不想干」。

更重要的是，在這個 app 里，搜索其實並不重要。因為位置限定在一個校園，體育活動並不會很多，篩選條件又很少，把篩選隱藏到搜索里，反而增加了用戶的交互成本。Airbnb 的搜索模式適合有 300 多萬房源、篩選條件比較複雜、用戶決策成本比較高的產品，但不適合只有幾十個活動、只需要簡單篩選的 app。

因此，在「重篩選、中分組、輕搜索」的指導方針下，我做了最終版本 E：

版本 D--> 版本 E：弱化搜索，把篩選條件（地點、時間、運動）都呈現出來，而不是藏在搜索里

我把時間和地點放回首頁，方便用戶篩選調整，並且用紙片視圖（chips），把最常見的運動種類都呈現出來，方便用戶選擇。感覺好像還不錯，可以拿去用戶測試啦！

---

Hoka：其實最終方案還是有很多理想化的地方，但作為一個尋找（有限的）活動並預約的 app，視覺設計和大致的用戶體驗還是比較清晰的。

有些同學可能會說「我是 UX 設計師，我的視覺不需要很好」，但如果常常關注 UX Coffee 的話，會發現現在越來越多的公司都在推行「產品設計師」的概念，設計師從產品構想、線框圖到視覺交付，每一項都要參與。而且，UI 是設計師傳達想法的媒介，不管是多有洞察力的研究，還是新穎的設計理念，最終還是要體現在 UI 上。如果 UI 不容易理解的話，就很難讓人相信這個設計師能做出好的設計。

所以說，作品集是設計師的門面，而視覺設計就是作品集的門面。我們要追求的是，作品集的顏值和內涵一樣高=v=。希望大家都能把自己的作品集項目改得美美噠，找到滿意的工作~

---

微信公眾號：uxcoffee | 每周一杯咖啡，聊聊用戶體驗

推薦閱讀：