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

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

2017/06/19 13141评论区

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

为了让大家都能把作品集做得美美哒,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=。希望大家都能把自己的作品集项目改得美美哒,找到满意的工作~

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

uxcoffeeqr

「作品集制作修改指南」

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

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

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

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/improve-your-portfolio-case

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 转场动效 优设大课堂 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 配色 设计师专访 视觉设计 素材下载 web前端开发 设计流程 AI教程 用户体验设计 设计理论 神器下载 字体下载 海报设计 设计趋势 设计规范 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里