作品集是設(shè)計師的門面，找工求職時，它決定了公司對設(shè)計師的第一印象。學(xué)生作品集里通常會有一些學(xué)校項目，它們的特點就是「重過程，輕視覺」，過程都非常全面、詳實，而視覺上花的功夫比較少，這其實是很吃虧的。
為了讓大家都能把作品集做得美美噠，Hoka 找出了自己 3 年前的第一份 UI 設(shè)計作業(yè)，做了視覺重設(shè)計，并且記錄下了重設(shè)計的思路和視覺設(shè)計的小技巧，分享給大家~
適合讀者：
剛畢業(yè)或還在上學(xué)，需要找實習(xí)和第一份工作的同學(xué)們
想要申請設(shè)計/HCI類項目的同學(xué)們
因為這份作業(yè)是在美國讀書時做的，所以 UI 是英語的，不過設(shè)計的思路無論中英文都是共通的。
第一份 UI 作業(yè)：大學(xué)生運動 App
這是我的第一個設(shè)計項目，一個典型的學(xué)生項目。當(dāng)時被密歇根大雪凍僵的我，摸著越來越圓的小肚紙，決定做一個幫助大學(xué)生參加體育活動的 app。app 的目標(biāo)很簡(yòu)單(zhì)，用戶能看到學(xué)校里正在/即將展開的體育活動，并且登記參加這項運動。比如有一群小伙伴想去打籃球，還缺一個人，就可以發(fā)布到這個 app 上，想打籃球的同學(xué)看到了，覺得時間、地點、人數(shù)沒有問題，就可以登記參加。
講完了 App 的背景，我們看一下我當(dāng)時設(shè)計的首頁長什么樣子吧：
這一抹鮮艷的綠色，碩大的黑色圖標(biāo)，細到幾乎看不清的字體……
我當(dāng)時就拿著這個項目去面試了一些設(shè)計實習(xí)，一份 offer 都沒有拿到，最后還是做起了自己的老本行用戶研究?，F(xiàn)在想來，這些公司還是很有眼光的。。
沒有關(guān)系，魯迅大大說了，真的猛士，敢于直面慘淡的人生?，F(xiàn)在 3 年過去了，為了寫這篇文章，我重新設(shè)計了這個 UI。先看一下最終稿：
是不是感覺高大上了很多!雖然起點低，但是我們進步大啊!
好啦，言歸正傳，我是怎么一步一步，把原來丑丑的界面改好的呢?
這個界面其實比較簡單，主要由導(dǎo)航和列表元素組成，我先從導(dǎo)航著手，刪減不必要的元素。
我刪減了屏幕上方的地圖。當(dāng)時放上地圖是為了表達「我們給你推薦的都是學(xué)校周邊的活動哦」，但是除此之外，這張地圖并沒有什么實際作用，因為地圖實在太小了，沒法導(dǎo)航，還非常占用空間，所以我決定用更簡單的方式來傳遞同樣的信息：直接用文字顯示地名。
標(biāo)簽欄(tab bar)有三個選項：首頁、創(chuàng)建新活動、我的活動。這里「我的活動」與導(dǎo)航條(navigation bar)里的「個人資料」和「設(shè)置」有些重合，所以我決定合并這三者，畢竟它們不是這個頁面的重點，我也不希望面試官過多關(guān)注這些部分。
刪除了導(dǎo)航欄的圖標(biāo)，合并到了標(biāo)簽欄的「個人頁面」。
去掉了地圖，直接顯示地名。
導(dǎo)航部分的視覺設(shè)計非常容易，我下載了蘋果官方 UI 模板，直接復(fù)制狀態(tài)欄、標(biāo)簽欄。標(biāo)簽欄的圖標(biāo)都是直接從 Material Design 網(wǎng)站(http://material.io)上找的，非常方便。
這個頁面 70% 以上都是由活動項目構(gòu)成的，所以為活動確定一個基本的框架非常重要，我分析了最重要的 3 個元素和視覺上存在的問題：
活動開始時間
學(xué)生的日常主要以學(xué)習(xí)為主，運動時間都是圍繞著上課、學(xué)習(xí)，所以要突出時間，幫助學(xué)生安排日程。第一版里時間的突出程度尚可，但是這個日期的表達方式讓人費解，「20 Mar」是什么時候?今天?明天?還是三個月后?體育鍛煉是比較即興的活動，應(yīng)該更強調(diào)相對時間，比如用「明天」、「下周一」之類的幫助用戶快速理解日期，畢竟一個人不太會去注冊三個月后的鍛煉活動…… 至于 9:00–11:00 這種上午下午不分的低級錯誤就更不用說了。
△ 用相對日期代替日期
位置
位置能幫助學(xué)生確定距離，還能幫他們導(dǎo)航，但在第一版里，我用的是地址(天啦嚕，你記得你們學(xué)校大活的地址嗎??)，用場館名稱會更直觀。
△ 用場館名稱代替地址
運動類型
運動類型非常重要，因為一個人喜歡或擅長的運動就那么幾項，剩下的運動對 ta 沒有特別大的意義。但是第一版里碩大的球類圖標(biāo)太過吸睛，長得還都差不多，效果不理想。
運動類型的解決方案有：文字(不夠顯眼)、圖標(biāo)(球類縮小了看起來都差不多)、場館圖片?？紤]到場館圖片能比較清晰地傳達運動種類，還能豐富頁面元素(剩下的元素都是文字)，所以我決定試試用場館圖片，并加上文字輔助理解。
△ 用場館照片和文字代替厚重的圖標(biāo)
確定了視覺內(nèi)容，接下來就是排版啦!第一步就是去掉綠色的背景，當(dāng)時流行彩色背景，但現(xiàn)在看來果然黑白才是永恒的經(jīng)典。
3 年前的版本里，所有文字都是一模一樣的處理方式(字號、灰度、粗細、行間距、相對位置)，從遠處看，除了圖標(biāo)非常顯眼之外，文字看起來就是一團，抓不到重點。在重設(shè)計里，我增加了文字處理的多樣性：把標(biāo)題加粗、加深，作為視覺錨點，幫助用戶瀏覽。把兩張圖片進行模糊處理后的視線對比：
左：在舊版本中，視線集中在運動圖標(biāo)上，這不是我們想要達到的目標(biāo)。右：標(biāo)題加粗、分隔按鈕后，視線的移動軌跡是：照片、標(biāo)題、頭像和按鈕。
在色彩方面，我挑了幾個不同灰度的藍灰色作為字體顏色，比純灰更好看。
很快改出了 A 版：
這個版本的按鈕顏色太跳，吸引了太多注意力，所以我刪去了按鈕的背景顏色填充。
在沒有填充矩形的情況下，有幾種辦法來做出按鈕效果：
全大寫
加入圖標(biāo)
加入分割線
考慮到橫向空間比較緊湊，我用了全大寫設(shè)計，視覺上平衡了一些：
版本 B 的按鈕被分隔在了屏幕右邊，通過全大寫來創(chuàng)造按鈕的形狀
A、B 兩版排版有一個共同問題：每個學(xué)校的場館數(shù)量有限，那么用戶會看到的照片數(shù)量也比較有限，如果在首頁里有很多重復(fù)的圖片，圖片這么大就沒有太大意義。再考慮到圖片質(zhì)量可能不夠高(用戶生成的內(nèi)容的質(zhì)量控制是面試常見問題)，放大圖說不定會把用戶嚇跑，所以我嘗試著把照片縮小，做了版本 C：
在版本 C 里我還加上了第二個 call-to-action：保存活動，靈感來自 Facebook Events，除了「I’m going」，F(xiàn)acebook Events 還非常強調(diào)「I’m interested」，因為「I’m going」是一個承諾，這個決定不是這么容易做出，可以讓用戶先保存好活動，之后再考慮要不要參加。
在 Facebook Events 中，很多用戶會先表明對一個活動感興趣，再決定要不要參與。
3 年前設(shè)計這個 app 時，我的想法是讓用戶在注冊時輸入所有運動相關(guān)的偏好，不是很多，大概也就 100 頁吧，告訴系統(tǒng) ta 最喜歡的運動有哪些，水平是怎樣的，喜歡跟男生還是女生打球，諸如此類。注冊完畢后，用戶來到首頁，就會看到自己感興趣的活動。
這個注冊流程的目的其實是細化用戶能看到的活動項目。現(xiàn)在看來，這個流程并不合理，要求用戶在注冊時填寫這么多信息不利于體驗，畢竟在注冊時，用戶還不知道填寫這些信息到底有沒有用。
所以我決定刪去這一部分，把「細化」移到首頁里，先讓用戶看到活動，然后通過搜索、篩選的方式來細化活動的條件。
因為喜歡 Airbnb 的搜索，而且時間、地點、事件的條件類型也很相似，所以我一開始采用了相似的模式。
△ Airbnb 的搜索
但是這個模式重瀏覽，輕搜索，如果用戶只想要找某個類型的運動(比如籃球)，需要點好幾下才能篩選運動。于是在 Google app 的啟發(fā)下，我嘗試了這個版本：
版本 D：按運動分類的側(cè)滑小卡片
這一版的特點是直接按類別呈現(xiàn)活動，采用智能推薦的方式，給用戶推薦他們最感興趣的運動類別。如果用戶非常明確自己想要參與什么類型的活動、而且系統(tǒng)有非常準確的推薦的話，或許這會是一個好的方案。但是小卡片的空間有些逼仄，而且很可能現(xiàn)實里某些運動類型下只有一個活動，這樣的話，就只有一張卡片孤零零的，那畫面就有點尷尬了。而且，這個模式暗示了運動類型具有排他性，但有時用戶可能只是想鍛煉，只要是自己喜歡的幾種運動之一就可以，并不一定是「我就是想打籃球，其他的都不想干」。
更重要的是，在這個 app 里，搜索其實并不重要。因為位置限定在一個校園，體育活動并不會很多，篩選條件又很少，把篩選隱藏到搜索里，反而增加了用戶的交互成本。Airbnb 的搜索模式適合有 300 多萬房源、篩選條件比較復(fù)雜、用戶決策成本比較高的產(chǎn)品，但不適合只有幾十個活動、只需要簡單篩選的 app。
因此，在「重篩選、中分組、輕搜索」的指導(dǎo)方針下，我做了最終版本 E：
版本 D–> 版本 E：弱化搜索，把篩選條件(地點、時間、運動)都呈現(xiàn)出來，而不是藏在搜索里
我把時間和地點放回首頁，方便用戶篩選調(diào)整，并且用紙片視圖(chips)，把最常見的運動種類都呈現(xiàn)出來，方便用戶選擇。感覺好像還不錯，可以拿去用戶測試啦!
Hoka：其實最終方案還是有很多理想化的地方，但作為一個尋找(有限的)活動并預(yù)約的 app，視覺設(shè)計和大致的用戶體驗還是比較清晰的。
有些同學(xué)可能會說「我是 UX 設(shè)計師，我的視覺不需要很好」，但如果常常關(guān)注 UX Coffee 的話，會發(fā)現(xiàn)現(xiàn)在越來越多的公司都在推行「產(chǎn)品設(shè)計師」的概念，設(shè)計師從產(chǎn)品構(gòu)想、線框圖到視覺交付，每一項都要參與。而且，UI 是設(shè)計師傳達想法的媒介，不管是多有洞察力的研究，還是新穎的設(shè)計理念，最終還是要體現(xiàn)在 UI 上。如果 UI 不容易理解的話，就很難讓人相信這個設(shè)計師能做出好的設(shè)計。
所以說，作品集是設(shè)計師的門面，而視覺設(shè)計就是作品集的門面。我們要追求的是，作品集的顏值和內(nèi)涵一樣高=v=。希望大家都能把自己的作品集項目改得美美噠，找到滿意的工作~
以上就是上海網(wǎng)站制作公司——海淘科技為你推出《UI 重設(shè)計實戰(zhàn)案例》的全部內(nèi)容。想看更多的內(nèi)容，可點擊：微博運營方案，于此同時，海淘科技還提供了網(wǎng)站建設(shè)案例，可點擊：機械行業(yè)營銷型網(wǎng)站建設(shè)案例
