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