作品集是设计师的门面，找工求职时，它决定了公司对设计师的第一印象。学生作品集里通常会有一些学校项目，它们的特点就是「重过程，轻视觉」，过程都非常全面、详实，而视觉上花的功夫比较少，这其实是很吃亏的。

　　为了让大家都能把作品集做得美美哒，Hoka 找出了自己 3 年前的第一份 UI 设计作业，做了视觉重设计，并且记录下了重设计的思路和视觉设计的小技巧，分享给大家~

　　适合读者：

　　刚毕业或还在上学，需要找实习和第一份工作的同学们

　　想要申请设计/HCI类项目的同学们

　　因为这份作业是在美国读书时做的，所以 UI 是英语的，不过设计的思路无论中英文都是共通的。

　　第一份 UI 作业：大学生运动 App

　　这是我的第一个设计项目，一个典型的学生项目。当时被密歇根大雪冻僵的我，摸着越来越圆的小肚纸，决定做一个帮助大学生参加体育活动的 app。app 的目标很简(yòu)单(zhì)，用户能看到学校里正在/即将展开的体育活动，并且登记参加这项运动。比如有一群小伙伴想去打篮球，还缺一个人，就可以发布到这个 app 上，想打篮球的同学看到了，觉得时间、地点、人数没有问题，就可以登记参加。

　　讲完了 App 的背景，我们看一下我当时设计的首页长什么样子吧：

　　这一抹鲜艳的绿色，硕大的黑色图标，细到几乎看不清的字体……

　　我当时就拿着这个项目去面试了一些设计实习，一份 offer 都没有拿到，最后还是做起了自己的老本行用户研究。现在想来，这些公司还是很有眼光的。。

　　没有关系，鲁迅大大说了，真的猛士，敢于直面惨淡的人生。现在 3 年过去了，为了写这篇文章，我重新设计了这个 UI。先看一下最终稿：

　　是不是感觉高大上了很多!虽然起点低，但是我们进步大啊!

　　好啦，言归正传，我是怎么一步一步，把原来丑丑的界面改好的呢?

　　1. 减少不必要的导航元素，把空间留给最重要的内容

　　这个界面其实比较简单，主要由导航和列表元素组成，我先从导航着手，删减不必要的元素。

　　我删减了屏幕上方的地图。当时放上地图是为了表达「我们给你推荐的都是学校周边的活动哦」，但是除此之外，这张地图并没有什么实际作用，因为地图实在太小了，没法导航，还非常占用空间，所以我决定用更简单的方式来传递同样的信息：直接用文字显示地名。

　　标签栏(tab bar)有三个选项：首页、创建新活动、我的活动。这里「我的活动」与导航条(navigation bar)里的「个人资料」和「设置」有些重合，所以我决定合并这三者，毕竟它们不是这个页面的重点，我也不希望面试官过多关注这些部分。

　　删除了导航栏的图标，合并到了标签栏的「个人页面」。

　　去掉了地图，直接显示地名。

　　导航部分的视觉设计非常容易，我下载了苹果官方 UI 模板，直接复制状态栏、标签栏。标签栏的图标都是直接从 Material Design 网站()上找的，非常方便。

　　2. 重设计列表元素(每一场活动)，让信息更直观

　　这个页面 70% 以上都是由活动项目构成的，所以为活动确定一个基本的框架非常重要，我分析了最重要的 3 个元素和视觉上存在的问题：

　　活动开始时间

　　学生的日常主要以学习为主，运动时间都是围绕着上课、学习，所以要突出时间，帮助学生安排日程。第一版里时间的突出程度尚可，但是这个日期的表达方式让人费解，「20 Mar」是什么时候?今天?明天?还是三个月后?体育锻炼是比较即兴的活动，应该更强调相对时间，比如用「明天」、「下周一」之类的帮助用户快速理解日期，毕竟一个人不太会去注册三个月后的锻炼活动…… 至于 9:00–11:00 这种上午下午不分的低级错误就更不用说了。

　　△ 用相对日期代替日期

　　位置

　　位置能帮助学生确定距离，还能帮他们导航，但在第一版里，我用的是地址(天啦噜，你记得你们学校大活的地址吗??)，用场馆名称会更直观。

　　△ 用场馆名称代替地址

　　运动类型