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

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

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

適合讀者:

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

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

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

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

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

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

?這一抹鮮艷的綠色,碩大的黑色圖標,細到幾乎看不清的字體……時隔 3 年,我再次看到這份 UI 的時候,心情是這樣的:

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

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

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

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

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

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

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

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

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

導航部分的視覺設計非常容易,我下載了蘋果官方 UI 模板,直接複製狀態欄、標籤欄。標籤欄的圖標都是直接從 Material Design 網站(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 | 每周一杯咖啡,聊聊用戶體驗

推薦閱讀:

忽見陌頭楊柳色,作品展就看斯芬克!
我的第一個學生:小陸陸的故事
拼貼技巧 | 抽象迷幻的人像 —— Alana Dee Haynes
北卡製片學姐從前方發回報道
獨家教程 | 30分鐘搞定「熱點分析圖」,千萬別再用PS畫熱力點了!

TAG:用户体验设计 | 交互设计 | 作品集portfolio |