赞助商
立即赞助

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

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

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

标准页面的设计

前面准备做完,就终到我们具开始动手做设计的阶段。为一个完整项目,设计必先从标准页面类型展开,样方便进行视风的定和统一。

1. 封面设计

封面设计是别人打开我们品集看见的一眼,而一眼,就要尽量建立良的印象。

谓的好印象,是你像做电商一样非有侵略性的视觉效果侵袭观看者的“眼睛”,而是简单又失优雅地展示自己孤的味和矜持(怎么这么绕口)……

所以,封面设尽得简介、练,能舒的观看体验。如果自己什么法,就多到网找 PPT 式的优秀案例,对版式行合理的模仿(不用完全一摸一样)。

比如下制作简单案例:

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

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

TIPS:不封面一些精度特别差的插画,或者拍的太随意的自拍照片,颜自信的就找天真蓝还海马之类的拍点职业照。

2. 人介绍页

人介绍页面,主我们自己人的基本简介,这里强调作品集的人介绍完整的简历文档不一样的。

作品主要展示作品为主,太琐碎个信息是没有必要加入,所以该页需要含基础 3 个模块:照片、基本信息、个简介。

针对个人简介,你可以参考下面这的布局形式:

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

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

定要保持介绍页简洁,观,避免废话。尤其是些学校奖项、经历试者来说毫意义。

3. 职业经历页

关于个工作经验部分,需要和介绍分隔开,单独放页。

工作经历是有非常的间属性的,所以在制作过程中也要尽量能让观者清晰的出从业的整体情况,建议使用间线的方式来呈现该页面。

比参考下面的案例:

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

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

4. 目录页

目录页,主要用来快速交代份作品含作品、结构、序,而不是放常正像真实书籍样标注应页位。

所以,在这个页面除了模块标题外,尽可能搭配相关的图片,让观者更容易识别。

至目录应该以设计类型还是项目为单位,或者要呈现几级,就是者自己决定的。

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

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

5. 类型分隔页

我们要个大模块,设计应封作为前后内容分隔,告诉观看者进入新章节,以及应作品是什么。

这类封面的计,只需保证标题清晰、对展示内容呈现准确,避免过度计即可。

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

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

常,类型封设计比较随意作品,会导致观看过程没有顿,阅读体验变。

以上案例只是给大家的一些参考,任何类型的页面布局、计都可以有由发挥的空间,只要计能符该页面的功能性即可。

作品展示页面设计

完成标准页面的展示,下面就要上主菜,展开对完整项目、视觉作品展示的制作了。

1. UI 类项目展示

项目案例前面有提过,重点要放的是你认为最能代表你水准,或者符投递公喜好的类型,只需要放 3-5 个就够了。但每个项目要展示什,才是这要重点谈论的西。

对 UX 的项目来说,优的界面视品是必备的,果你选出的项目质量不行,么一定要花点时间翻新一遍设计和样式,证输出内容的优质。

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

要注意的是,界面的视,只是我们对项目品判断的其中一部分而已,对注重战、效率、KPI 的团来说,占比甚至更低。

我们要知道 UX 设计的核心念,是户体验为中心的设计实践,通过户获得满意的体验从而升产效益。,项目的展示要体现这种要素。

换法,就如何用的专业能力,项目产品赋能(赚钱……)。把它当一份报告看待,那么项目的主线就应该了解决项目问题,了什么,果如何。

定要牢记,视觉设计如何和有没有解决项目问题提升品效益没有必然联系,你必须过其它展示内容来表现。

项目展示是麻烦的,不同领域、项目的做法也不一。所以为了解决这种问题,要先通过大纲规划,让展示的内容有说服力,贯性和逻辑性。

大纲的规划方式并不需要借助其它工具,只要像写报告、论文的形式将主要步骤录下来即,比:

  • 介绍项目的基本情况,以及产品需求
  • 讲目标用户的对应认识和总结
  • 分析当前产已有的问题,升的机会点
  • 给出自己如何改版的相关法、构思
  • 根据前想法输出新流程和原型
  • 以及对应新的色彩和其它细节规范展示
  • 对最终设计出来的页面进行细节的说明
  • 展示改版后相数据指标的升,肯定设计成果

个规划是以任意整的,以及将展示的内容规划到更细的面,比用户认识上,有用户画像的整理、同理心地图、访谈、问卷和情绪版等等。

还有,更灵一点的展示甚至可在开头放你做的项目准备的流程,设计过程中的分团队摄影图和难点说明,在项目结尾放有的复盘和反思等等。

如果对整体的纲划,只硬的照搬别人案例展示的内分析具,那这样的项目非常空洞的。项目展示的合理性,并不了高高,假空的分析内用多了,反越让面试官觉得外强中。

如没有实战项目,Redesign 项目设计思路不要照搬真实项目,尤其是没有真实性数据展现和分析。

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

使用其它分析法来解决问题,样可以到让信服结,不要放你驾驭不了内容和编造数据。

着就要动进行内容的计了。首先,项目在展示的形式上有种,网页式和 PPT 式的。

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

它最大的不同点在于,网页式的展示更讲究内容的一气呵成,制作难度更高,效果也更好。而 PPT 式则是不同的展示模块泾渭,对式布局有比较多的局限。

我们前面讲,品集尽量以标准页面,也就是以 PPT 形式展示,在一特定的模块中使用长图,样效率也比网页型的更高。

而项目展示的页面数量同样是的,我们借助前面的规划,还要进一步梳具体包含哪些展示页面,如:

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

上面的案例作为示例较精简,级 UX 设计师的作集往往只多。页面越多,我们在做规划的时候就要越仔细一点,免后续的执行中刹住车越做页面越多越乱。

虽然页面的类型多,但展示的设排版制作 PPT 或画册依旧很相似的,可以看看下面的示例:

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

如果我们所页面采取统一的宽比,局限性会体出页面的况下。比如首页、精选这种高度特别的界面,完全无法纳。所以,我会建议遇到这样的况,就增加该页面的高度,即使变比例也不紧。

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

每套项目应用的可以作品集整体的视觉保持统一,也可以根据项目独立制。当然,如果让每项目的排版视觉产差异,那我只建议躲色彩下功夫,不排版字体文章。

时,在 UI 类项目展示上,样是不可或缺,论过场景 Mockup 渲染主题氛围,是使用普边框容纳界画布,都可以很好提升展示内容专业性。

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

2. 网页类作品展示

项目展示完,主完了,后我们就端品出了。展示就不用再这么复杂了,只需以突出视觉主就可以。

首先讲是网页有关作品,依旧属于 UI 有关范畴。如不是作为项目展示网站话,那么网页展示议以主页、关键页进展示即可。

同的,展示网页不是把导出的页面直填充作品集画布去就完事了,也同需要经过一些包装和计。

首先是单屏高的网页品,类展示来是最容易的,缩小案例的尺寸置画中,增加一背元素即。

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

果是长屏的网页,类似官网主页或产品主页,么该展示页同样要增加高度去容纳它,同时也增加背、背图、电脑样机等素材来富展示效果。

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

3. 运营类作品展示

然后,就是运营类计的展示了。一来说,计 Banner 和活动页是工作计得最多的种运营材料。

Banner 的展示同样需要有背为衬托,但是,果我们要放 Banner 的,就尽量是一次放一套同主题、同风的品,不要一放一个界面,样像是强行在拉篇幅。

如果手头没有整套的,那就根据原有的设计作进行拓展,自己定一些案做成整组的,这样看起来才具有更好的专性,展示案例可看图:

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

而在 H5 页面的展示上,一个项目尽可展示多个页面,作的整更圆满一点。

如果这套 H5 的设过程非常复杂,也可以把构思准备作也去。当然,这类作品的视觉求高,需花多的思到场景的设氛围的丰富。

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

4. 它作展示

最后,我们来讲讲插画或者 C4D 作的展示(填)了。作为已经避免面试正职的作集来说,插画或者 C4D 类的作,多数情况是需要放的,尤在你自己没有过或者掌握程一般的情况。

插画 C4D 对于用户体验的效果并不多,且它们的主应用方向都运营类的设(少部分感化)。如果一展示这类设作品,一不一些巴巴的练习作品,内不知所谓空洞无的练习或临摹,比如下面这些。

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

作面试官,看这部分机能看的,怎么业务场景下输出应用插画技能或 3D 技能,不展示一些半吊子看看网教程就能出的作品。

所以插画和 C4D 你要放,定要分配应载体,是做 Banner 上,是 H5、网页、管理界、商品详情等。

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

完成作品应装,最后,可以开始合并 PDF 文件了。

作品集的制作和导出

本来这部分不想放,发现很多学在这个问题上都会生常大分歧,所以统解释遍。

1. 作品制作软件

制作作品,页主要制作工具必然是要使用 Sketch/XD/Figma ,原和设计 UI 界类似,页数多,内容多,为了效率需要使用这类软件。

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

如现在抱着使用 PS、AI 思路来制作内容页(不是不可以),那么效率定会受到严拖累。它们应用场景并不在制作主要页过程,而是特定素材进处理。

比如常见的 UI 机素材,质量最好的一都是由 PSD 文件构成的,无论是机还是景图。

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

需要通过 PS 来完成多数素材的调整,机图片的修改、成、导出,将有背景的景图导出成 JPG,将透背景的机导出成 PNG,再导入作品集画布中去。

以及,最终我们也使用 PS 来输出 PDF 文件,即将所有页面导出成位图并命名以,使用 PS 的“文件——自动——PDF演示文稿” 功能生成即。

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

2. PDF 文件的压缩

虽然可以通过 PS 快速生成一 PDF 文件,但流程还没完全结束。正常生成一 PDF 的文件通常都非常大(超过 100M),因为页面数多了。这大的文件不仅传输起来费劲,而且多不支持 10MB 以上的简历提交。

所以,我们还有个目标,就把 PDF 压缩到 10MB 以内。

压缩 PDF,并是我们看见的字面意思,直接拿 PDF 工具压缩,这种压缩效果非差。最好的压缩办法,是对作集页面的位图件先进行压缩,然后再合并 PDF。这里,还是建议使 PS,使 “件——脚本——图像处器”,将质设置成3-6,量的压缩图片。

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

压缩后的有图片件尺寸,可通过上级件夹来查看,如果远超 10MB,就把图片质量再往调,直至达到指定要求为止。

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

当然这是一种较偷懒的办法,如果你嫌麻烦,想要在 10MB 获得最好的画质效果,那么每张图片的压缩例是可有差异的。简单的、标准页面压缩率更,把空间留给展示容更多的页面。

这时我们就可以使用 PS 的 “文件——导出——WEB所用格式”,将格式设置 JPG,然后拖动品质的滑块控制导出质文件小。

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

终,过反复的调试,直至我们导出一份满意的小于 10MB 的作品集文件止。

素材分享一览

针对作品集应该用到的素内,我们已煞费苦的准备好了,包含了各式各样的文件内,下面我们统一罗列出。文末/底部下载即可

1. 我们的自创素分享

文章中包含的部分素会分享出,包含栅格的 PNG、标准页面、网页包装原型 APP 包装原型的 Sketch 源文件。

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

2. 字体素材分享

为你们准备了最的中和西字体,数量虽然多,却是我们在产项目包时使频率最、通性最强的。一共十二款字体,中西各六款。在作集中使没有任何版权问题,商记得自己百搜。

中文字体包含阿里巴巴普惠、冬青黑、小米兰亭、汉仪旗黑、思源黑体、OPPOSans:

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

英文数字字体包含 BEBAS、DIN、Futura、Gotham、Monsterrat、Moon:

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

3. Mockup 素材分享

对作集中需要使的样机、场景,做了对应收集,包含了 6 种类的 Mockup,VI、名片、手表、iPad、收集和电脑:

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

4. 品包装参考

最,对品集包装的一参考,我们也做对应的整理,包含对 APP 项目的包装,以及网页的相关包装图例,帮助大家找到更灵感:

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

时间关系,还有很素材还来不及整理完善,我们持续持套品集内容的更新,以一阵子回复,说不定就有新上内容。

结尾分享

前面基已经把品集该怎么做的内容讲完,最就夹带点私货,分享一个人的见。

作集作为一个面向社会职场的展示口,就包含了在的社会属性,它和社会公约是无法切割开的。当你把作集做开始在公共场合、平台展示,或者投递,就要受到公约的审视。

也就作品集中伪造作验、张冠李戴、恶性抄袭、雇佣枪手,就直视可能产的后果。类似阵子某阿里新入职员素级抄袭被举报事件,后的结果必然被除再厂黑单,被同行不齿。

然,有些觉抄抄了,反正不去大厂,被发现再换个公司,首要问题是解决入问题。这是常危险思想,短期内作品不过很正常,正常心态是要从自己身上挖掘问题,提升自己和作品质量来实现目标。

但是,不以能力为核心,总想着偏门作假,那丢失的心气就基本找不回来了,绝大多数情况下只会迈向更高的造假,更复杂的谎言和更没有下限的演。

周树人(万能引用)说,果已经跪下爬习惯,就忘何直立行走……

希望这篇分享可帮助到你们,有它疑惑的同可在留言区中留言。

我们下篇再贱……

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

相关文章

距离2021年的金三银四黄金求职季不到100天了,所以关于作品集这个化石级的老话题,我还是得絮叨絮叨。 从去年开始组建团队...
作品集
春节后的招聘旺季已然来临,掀起了设计师跳槽的热潮,你是否萌生了跳槽的想法呢? 招聘季带来了很多岗位机遇,也是验证自己...
作品集包装
写在前面: 经常帮社群里的同学看作品集,发现很多问题其实是会有共性的,今天就分享其中一部分我看到的,可能只需要做少量修...
作品集
这是我知乎上时间线出现得比较多的一个问题,也是新手转行过程中最关注的事情之一。过去一直没有系统回答这方面的疑问,所以...
UI
作品集的认识 我发现,有很多设计师已经工作几年了,其实依旧不太清楚作品集到底是什么,长什么样,对于设计师的意义。所以我...
作品集
一年很快,转眼就年底了,好好复盘整理作品集是设计师必做的一件事。本篇涵盖了比较完整的作品集整理思路,可以作为年终作品...
作品集
编者按:这篇文章出自资深设计总监 Diana Malewicz 之手,她经常会分享一些实操性极强的文章,这篇文章是她基于以往招聘设计...
UI作品集
作为设计师都希望自己能在关键时刻展示一个niubility的作品集,但如何能与众不同,给人眼前一亮这个问题却令人头疼。 有的铁...
Figma