用一个实战案例,手把手教你把作品集改得焕然一新!

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

为了让大家都能把作品集做得美美哒,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 网站(http://material.io)上找的,非常方便。

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

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

活动开始时间

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

用一个实战案例,手把手教你把作品集改得焕然一新!

△  用相对日期代替日期

位置

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

用一个实战案例,手把手教你把作品集改得焕然一新!

△  用场馆名称代替地址

运动类型

运动类型非常重要,因为一个人喜欢或擅长的运动就那么几项,剩下的运动对 ta 没有特别大的意义。但是第一版里硕大的球类图标太过吸睛,长得还都差不多,效果不理想。

运动类型的解决方案有:文字(不够显眼)、图标(球类缩小了看起来都差不多)、场馆图片。考虑到场馆图片能比较清晰地传达运动种类,还能丰富页面元素(剩下的元素都是文字),所以我决定试试用场馆图片,并加上文字辅助理解。

用一个实战案例,手把手教你把作品集改得焕然一新!

△  用场馆照片和文字代替厚重的图标

3. 迭代排版,视觉调整

确定了视觉内容,接下来就是排版啦!第一步就是去掉绿色的背景,当时流行彩色背景,但现在看来果然黑白才是永恒的经典。

3 年前的版本里,所有文字都是一模一样的处理方式(字号、灰度、粗细、行间距、相对位置),从远处看,除了图标非常显眼之外,文字看起来就是一团,抓不到重点。在重设计里,我增加了文字处理的多样性:把标题加粗、加深,作为视觉锚点,帮助用户浏览。把两张图片进行模糊处理后的视线对比:

用一个实战案例,手把手教你把作品集改得焕然一新!

左:在旧版本中,视线集中在运动图标上,这不是我们想要达到的目标。右:标题加粗、分隔按钮后,视线的移动轨迹是:照片、标题、头像和按钮。

在色彩方面,我挑了几个不同灰度的蓝灰色作为字体颜色,比纯灰更好看。

用一个实战案例,手把手教你把作品集改得焕然一新!

很快改出了 A 版:

用一个实战案例,手把手教你把作品集改得焕然一新!

这个版本的按钮颜色太跳,吸引了太多注意力,所以我删去了按钮的背景颜色填充。

在没有填充矩形的情况下,有几种办法来做出按钮效果:

  • 全大写
  • 加入图标
  • 加入分割线

考虑到横向空间比较紧凑,我用了全大写设计,视觉上平衡了一些:

用一个实战案例,手把手教你把作品集改得焕然一新!

版本 B 的按钮被分隔在了屏幕右边,通过全大写来创造按钮的形状

A、B 两版排版有一个共同问题:每个学校的场馆数量有限,那么用户会看到的照片数量也比较有限,如果在首页里有很多重复的图片,图片这么大就没有太大意义。再考虑到图片质量可能不够高(用户生成的内容的质量控制是面试常见问题),放大图说不定会把用户吓跑,所以我尝试着把照片缩小,做了版本 C:

用一个实战案例,手把手教你把作品集改得焕然一新!

在版本 C 里我还加上了第二个 call-to-action:保存活动,灵感来自 Facebook Events,除了「I'm going」,Facebook Events 还非常强调「I'm interested」,因为「I'm 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=。希望大家都能把自己的作品集项目改得美美哒,找到满意的工作~

大家可以通过以下方式订阅收听我们的节目:

用一个实战案例,手把手教你把作品集改得焕然一新!

「作品集制作修改指南」

  1. 《毕业季福利!过来人教你应如何准备个人作品集》
  2. 《面试不成功别怪面试官,作品集就该做到这八个方面!(上)》
  3. 《面试不成功别怪面试官,作品集就该做到这八个方面!(下)》
  4. 《5个要点教你改造作品集,提高求职成功率!》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

收藏 25
点赞

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。