赞助商
立即赞助

万字干货!UX作品集制作指南(上)

就业职场3年前 (2021)发布 流光
2.3K 0 0

万字干货!UX作品集制作指南(上)

作品集的认识

我发,很多设师已作几了,其实依旧不太清楚作品集到底什么,什么样,对于设师的意义。所以我们第一部分行解释,帮家建立出明确的概念。

1. 作品集的重性

对于不同职业,价他们水平如何的方法都不一样,越文书、理、内勤、协调非显性技能的职业,判起就越困难。所以厂招聘会尽可能从高学历、厂背景入手,因这些维度易判。

万字干货!UX作品集制作指南(上)

但价一设师好坏,重的东必然他的 —— 作品水平,不学历、背景、验。于,就需一 “载体”存自己的作品供他查看,了解我们的水平。

不同类型的设计师,选择不同的载来自己的品集,最有代表的,就是去品牌、建筑、工业等设计师,通一套完整的画册为品集进行展示。

万字干货!UX作品集制作指南(上)

在领域中,越是高级的设计师,品集的排版、装帧、质量就越。因为品集是设计师和外界沟通的桥梁,它就是设计师身力的映射。

如设计师想要在市场上获招聘青睐以及试会,千言语都远不如份让震撼作品能令信服(不过大多数做不出这样作品出来)。

因为,对于经验丰富的面试官来讲,可直接从你的作集中判断你的设计、规范掌握。

所以,初、中计想要获得更好的发展空间、、薪资,就越是要制作出足够让人服的优质作品集。这是一个贯穿整个职业生涯的工作内容,需要长期进行准备、维护和更新。

2. 作品集制作的难点

纸质的载体必然不适 UI/UX 的作品展示,因为的作品基于 RGB 环下显示。所以在今,大多 UI/UX 使用 PDF 或网页等格式来记录。

虽然载体变了,但作品集所运用的设思、排版、行文、规格,都的延续保留。所以,平面基础(排版版式)越好,输出作品集的质水平也就越高。

但是,绝大数 UI/ 从业者平面能力是不及的,种能力匮乏的基础导致只能依靠模仿来完成作品集设计,于造了 —— 作品集同质化。

浏览站酷、UICN 的品,或者招聘看应聘者投递的简历,你就现,UI/UX 品集从内容到样式排版表现出高度的一致。

万字干货!UX作品集制作指南(上)

其中,不仅仅是因为抄袭成风,还因为普遍的 UI 设计师平面基础差,设计、艺术素孱弱。品集首先是一份输出视感受文件,才是里面的思路、文字、想法、决的问题。

如你在解决问题思路上,不能提供常个性、手称赞案,那么你作品避免不了和质化结局,不能脱颖而出。

最好在视觉感受到的第一步,就和别的简历拉开距离,即供更有 B 格,更级的视觉展示输。

万字干货!UX作品集制作指南(上)

作集中反应的实之一,就是设计师自身的审美趣味,但这是一个较玄的问题,它隐藏在你设计中的每个角落……

应用素材、配图的巧和审美息息相关,这是只能依靠积累才能提升的地方,是无法通过的建议、享来速成的。

所以,我建议家多花时间浏览 Bahance 的各类首页作品推荐作品展示行积累。或者一空闲时间就到当的图书,免费看看那些非常厚重的设、摄影、建筑画册。

万字干货!UX作品集制作指南(上)

这些积累会非常效的提升平面展示排版设的眼界,并后续的制作提供效的借鉴思。

3. 作品集的格式应用

面讲了,我们用电子格式保存自己的作品集。但,相对网页,PDF 一重的格式,因求职过程发送 PDF 比网页效得多,且显得式。

主流的品集 PDF 方案,是通完成基础页面的设计,合并成一份完整的 PDF 文件。所以,我们需要个设计程和导出程中的基础规范。

万字干货!UX作品集制作指南(上)

首先是对画创建上的问题,品集的展示类似 PPT,拆分成不同的页面,并使用相对统一的规(内边距、页眉、页脚等细节)。

页般以长形比例为主,可以使用 3:2、4:3、16:10、16:9 等常见比例,或者可以应用标准屏幕分辨率尺寸。

万字干货!UX作品集制作指南(上)

可能很多学立想到 1920*1080 尺寸,在这我要先浇盆冷。这个分辨率是常不适合应用在作品上,原和 WEB 设计类似。

1080P 实际上是一个非大的画布,创建这样的画布会面非多的问题,首先就是件体积,由数十上百个 1080p 页面组成的作集,默认尺寸就轻松过 100MB,会对后期的压缩成极大的压。

还有,作为面官在查作品集的候,通常都是以窗化的方式查文件的(没见过全屏作品集的),比如下面这。

万字干货!UX作品集制作指南(上)

过大的辨率不仅浪费,而且新会难控制素的大,字体的大,导致制作过程中的版式失控。所以,通常建议新将作品集长宽置成 1280*800 即可。

还,普通 PPT 文件的所页面高度比例一致的,但作品集并不需遵守这规则。因会部分的作品展示用当的比例无法满足。如 UI 完整页面、网页、H5 图,隔断它们看起也会非常不理。

万字干货!UX作品集制作指南(上)

所以,遇到默认高度无法满足的况时,就可以选择增加该页面的高度直至符合展示需止(宽度不变)。不用太担高度不统一的问题,只页面内的展示合理莫其妙的截断,那么就不会让观众感到不。了解规格的概念以后,具体的展示制作方法,将后面行解释。

作品集内容的规划

作品集的制作不一次纯粹的自我表达,毕竟它连接招聘方,将自己推出去。这需设师过深思熟虑,所以我们还了解,关于自我表达,我们需什么准备。

1. 市场看什么作品集

提高推的概率,我们就必须站买的立场里行思考,什么样的作品集能获得他们的青睐。换句话,我们表出什么样的能力,能满足招聘市场的需。

我将招聘市场划分成两个部分,低级市场和高级市场。不是指设计师水平的高低,而是招聘企业身的 Level 高低,它们的区别以概括成:

万字干货!UX作品集制作指南(上)

低级市场就没什么分析的,我们主要针对高级市场做分析,即大的设计师需要我们具备哪能力。

万字干货!UX作品集制作指南(上)

通常,大对 UI 设计师的要求不只有视而已,更考量的是设计师的思考能力。业的 UED 团是要通设计来提升产品数据、转化和收益的,而不是仅仅做出 “看” 的设计。

所以,你既要了解你用户,做出能让它们满意设计,也要参与和理解业务,出能让内部成员满意案。我们般也称这设计师叫 “全链路设计师” 或者 “UX 设计师”。

万字干货!UX作品集制作指南(上)

作品要去满足这些特性,才是符合招聘需要作品,而不是盲目跟从市上高喊 UI 设计师又需要掌握插画、3D、动画软件,你去学这些东西然后硬往里塞,导致份作品看起来支离破碎。

多时间招聘整目标行、企的招聘需求,和的设计师进行沟通,可更好的帮助我们建立对招聘要求的认识,于一步的容制定。

2. 展示作筛

有了招聘需求的分析结果,这一步我们就要想往作集塞哪些作了。在流的场中,我们在作集 PDF 中可放的作要有面这些类:

万字干货!UX作品集制作指南(上)

在一个作集中现有类,必然是可的,我们要有目的性的挑符合招聘需求的容来放。中,最核心的作必然是整的 UI 项目,包括 APP、WEB、B 端等。

建议最少不少于 3 个,多不超过 5 个,展示多的项目会导致作品集起来过度臃肿,即使过去做过再多的项目,也只要挑选出其中最值得展示的个出来既可。

除了项目外,其它设类型的展示,一面向的岗对口,如果不校招,就千万不临摹、练习类的字样。

万字干货!UX作品集制作指南(上)

即使过去这种验,也输出练习稿的时候能保证看去真实的项目,并且具备能撑起该类设展示的数。

有想法,就以更进一步,把要安排到品集的内容录下来,比参考下图的案例:

万字干货!UX作品集制作指南(上)

3. 作品集目录制

展示哪些作品确好了,并不规划就到此止。作品集除了作品外,还会包含其它通用型的页面,同样需我们好划的。

通用型页面包含但不局下面的案例:

万字干货!UX作品集制作指南(上)

页面的引用数是必要的,因为品集质上就是一电子画册,我们要证读者的观看验,就要穿插不同的标准页面来控浏览的节奏,而不是陷无穷无尽的文字和图中。

越专业设计师,在这些页使用上也会越严谨。合理组合用型页,可以保证我们作品看起来正、专业、有态度。

例如,我要制定自己作集,那我会这么:

万字干货!UX作品集制作指南(上)

更具体的目录结构我会在后续的 DEMO 版本中放。

最后,目录结构的定义还有一个别重要的作用,就是把作品集当成一个项目来待的话,这个目录罗列了这个项目的任总量。

我们的,就顺这任务列表把后面所的内完。如果任务远远超出自己的承受能力,就一当的缩减,保证能按时完作品集。

作品集风格制定

规划了内,下一就制风格,把作品集当一 UI 项目完,好处就这里就了我们自由发挥视觉效果的空间了。

1. 什么作品集风格

面过,作品集其实就一本了自己作品的画册,除了作品内外,这本“画册”本身也过设的,既然设了,也就产相应的风格。

万字干货!UX作品集制作指南(上)

设风格这词汇比较抽象一点,即使作观看者,多数况下也很难完整、准确的去描绘看到的具体什么风格。

所以,为决个问题,通常我只建议大家关注下面几个要点:

万字干货!UX作品集制作指南(上)

我们需要像 UI 项目视规范一样来去定品集中的要素,并在整套品集页面中持统一。

为套作品会含页数量是常多,不做好规划,会做着做着发现作品都不体,像是缝合怪把几本册子硬拼到起去。

面,我们就分别来介绍一它们各自的要点。

2. 作集的色系

这里我的是色调,而是色彩,因为它是一个更宽泛的容。我们脑海里构思整册格调,可是暗黑、黑金、波普、呼吸感、宅寂白、幽暗蓝、蹦迪紫之类的……

这是一种色彩的大致应用范畴,如果你有比较多的面、网页经验,或者已经有钟的能代表的色彩喜好,可以直开始动做配色。

如果脑子里概念,那么就建议多花点时间去看优秀的 PPT、画册、作品展示案例,找到自己喜欢的色调行模仿。

万字干货!UX作品集制作指南(上)

色调的考统一整套作品集的氛围基调,可以严肃也可以卡通(根据不同行业可能会偏向性),但防止我们制作过程中色彩缺乏控制滥用,如果终效果变赛博朋克蒸汽波孟菲斯风,基本就已走向失控……

万字干货!UX作品集制作指南(上)

3. 作品集的布局

下来,就布局的问题上了。在这也不是让大家立马开始动做页面的布局,而是确定页面的基本栅格系统。

栅格什么我就不具体介绍了,简单讲,就确了页面的基本尺寸后,规范内部的页面距离内分布、格线系统。确了格线系统后,再分别将内对齐到格线中去。

比幻灯式网页的栅应用:

万字干货!UX作品集制作指南(上)

或者直接查看画册、PPT 类系统的定:

万字干货!UX作品集制作指南(上)

在我们使用的 1280*800 的页面尺寸中,以使用 12、16、24 三种数量,以通下载我们对应的素材来获得对应的 PNG 栅系统。

万字干货!UX作品集制作指南(上)

面,我们的案例中统一使用 24 列的栅进行展示。

4. 品集中的字

和 UI 规范一样,品集的文字使用,肯定也包含标题、正文、注释三个大类,以及数字、引用等特殊文字。

万字干货!UX作品集制作指南(上)

要定什么文字类型,是大家各自设计程中自己决定的,但不管定少文字样式,不选择字重要。

在这里也强调,作为个作品,你选择任何体都没问题,不用担心版权和商用风险,所以不要在制作过程把体局限在免费体库。

再者,根据互联领域的特点,我们是很难在作集中偏手写、传统的字体类的,尤对于手而言,尽可避免使 “衬线体”或者笔画奇怪的个性字体。

万字干货!UX作品集制作指南(上)

最后强调一,字在作集的作是 —— 展示想法容,而要把字体本身当成设计要素过开发。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

要想找到一个好设计师,首先要明确好设计师的标准。而我心目中的好设计师,首先应该具备较高的审美水平,其次要有良好的沟通...
优秀设计师
今天,咱们还是来聊找工作必备物品——作品集。这一篇文章将从整体角度上分享整理作品集时应该遵循的三个基础原则,分别是美观...
作品集
最近我投入了很多时间招人,所以这几个月看了几百份简历和作品集,说实话多数都不太理想,能在众多作品集中脱颖而出的少之又...
作品集
本文要介绍的「Free Mockup Generator」来自 Pixeltrue,是一个免费、简单样机模型产生器,使用者只需要几次点击就能建立好看...
免费样机
大家好,我是彩云。最近有不少设计师朋友在我的设计交流群里问作品集压缩相关的问题,就干脆再写一篇文章详细介绍作品集压缩...
作品集
在最近的招聘旺季里面,你开始跳槽了吗?这个季节总是高手过招的时候。是人才还是“废柴”出来比划一下就知道啦! 如果正在求...
作品集
这是我知乎上时间线出现得比较多的一个问题,也是新手转行过程中最关注的事情之一。过去一直没有系统回答这方面的疑问,所以...
UI
如何避免同质化的作品集,请仔细阅读这篇万字干货,可能需要 20-30 分钟 其他行业入职只要一份简历,而设计师找工作还要一份...
UI作品集