整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

5个步骤,完成UX作品集整理设计

5个步骤,完成UX作品集整理设计

文作者结合自己的经验和实际案例,与大家系统性地分享了UX作品集的设计思路,希望对你有所帮助,enjoy~

回想2017年11月,当时我的作品集上只有一个项目,我把它提交给一个愿意帮忙指点的招聘人员后,受到了严厉的批评,所以我对作品集感到非常担忧。

于是我把自己的作品集发布到 Facebook 和 Slack 小组,希望得到一些提升项目展示的建议和方法,然后获得了很多素未谋面的设计师们的帮助和支持。

我非常感激他们的帮助,这也是我写这篇作品集创建历程的原因,同时也希望这篇文章能够帮助更多的设计师创造出结构合理而又独特的作品集网站。

去年秋天,很荣幸我的作品集被 bestfolios.com 选为编辑精选。

在 Medium 上已经有很多关于创建UX作品的建议了。我不想再讲类似的建议,而是希望把我作品集的创建过程作为一个案例研究,这样就可以知道我究竟是如何将那些建议用在实践中了。我将会讲到以下几个方面:

  1. 我如何学习他人的作品集
  2. 我为什么决定自己来写网站的代码
  3. 我如何在设计作品集的时候考虑到它的用户(作品集的用户有正在为设计团队招人的招聘人员和设计师)
  4. 我如何快速收集反馈并迭代设计
  5. 我如何在作品集中表现出自己的个性并让它脱颖而出(一定要读这个部分!很有意思!)

你可以选择你最想了解的部分进行阅读。下面让我们开始吧!

01 向有更多经验的设计师学习

就像我设计其他项目时一样,我一开始都会去学习现有最好的设计,看一看有更多经验的设计师们都是怎么创作的。

1. 作品集资源

我开始并不知道一个UX作品集是什么样子的,所以我首先查看了来自美国顶级HCI项目的学生网站。我浏览了大量的作品,就是想了解作品集里有什么,他们都把哪些项目放到作品里面。

这里是我浏览的部分网站:

  • Georgia Tech’s MS-HCI Students/Alumni
  • CMU’s MHCI Students/Alumni
  • University of Washington’s MHCI+D Students/Alumni
  • Bestfolios
  • Cofolios

在 Mudium 上也有一些讲述如何创建UX作品集的优秀文章,我从中学到了很多:

from Geunbae “GB” Lee

from Nick Babich

2. 好的艺术家摹仿,伟大的艺术家偷师

首先,设计不是艺术。那为什么不引用史蒂芬乔布斯和毕加索的名言呢?他们对如何从别人哪里获得灵感有非常独到的看法。

对于我来说,看别人的作品不是为了抄袭,而是要去学习他们哪里做的好,他们是如何解决在作品集设计中遇到的难题,为什么他们的解决方案很好,甚至是他们哪里做的不好,这样你才能发挥自己的优势,取其精华去其糟粕,用自己的方式去解决他们没有搞定的问题。

我接下来会讲在我创作作品集的过程中所作出的具体决策,而且会详细来说我究竟从别人的作品集中学到了什么。

02 选择合适的平台

有很多工具可以帮助设计师来创建作品集,比如说 Squarespace, Wix, Readymag, Adobe Portfolio, Webflow 这些模版平台, 或者直接自己动手使用 HTML/CSS/JS 语言 来写网站等等。那么我是如何抉择的呢?

选择合适的工具就如同打下了坚实的基础:你需要付出哪些努力,你的网站可以实现哪些功能,你能够选择或创建的样式等等,而这些都取决于你最初选择的工具。

在我研究作品集的过程中,我会记录下其他人的网站上有用的功能(侧边栏导航,可展开内容等),并添加了一些我认为会使我的网站更有用和更具吸引力的功能。

然后我学习了所有可用的工具,去了解它们分别能够实现什么功能。因为我很明确我的作品集里面需要什么,而且我想要通过独特的交互来使作品集具有很强的个性,所以我最终决定还是自己来写代码建网站。

也就是说,自己写代码就意味着我需要自己考虑所有的细节,比如保持样式一致性,让网页能够支持响应式,能够很好的适配手机、平板电脑还有所有主流的台式机屏幕分辨率。

当我开始建网站的时候,我花了相当长的时间去纠结这些技术细节,但是其实我本该把这些时间花在项目打磨上的。我可以想象如果想要去完全重建作品集网站是很困难的。而 Squarespace 这类工具都帮你搞定这些东西了,你可以专注于你的内容展示。

这对我难说很难取舍,但是我真的很希望我的网站能够有自己的特色,所以我还是愿意去花时间和精力在写代码上。当我有时间的时候我也会去逛以下 Webflow ,它也会提供一些高度自定义的交互方式。

这是我主要的收获:当创建作品集的时候,思考什么对你和你的目标用户更重要,然后选择合适的工具来帮你实现这个目标。

03 考虑用户需求

设计师要以用户为中心。如果你申请的是一份UX/产品设计师的工作,但是你自己的作品集网站很难用,这就很讽刺了。

但是在我浏览其他人的作品集网站的时候,还是会发现很多网站不好用。有些会在主页放一些设计作品的好看图片和富有创意的名字,但是这些信息并没有告诉我们作品本身是什么,还有它解决的问题有哪些。

有一些会在案例说明中放上很详尽的设计过程,我更喜欢这种;但是如果在页面上没有大纲或者导航,我很快就不知道自己看到哪里了,然后就不会继续往下看。有一些有很酷的动画和视觉效果,但是让人眼花缭乱,我没办法很快定位到我需要的信息,特别是当我时间有限的时候。

如果我们站在目标用户(招聘人员和设计师忙于他们的工作)的角度,并着眼于他们的需求进行设计,就可以避免很多类似的问题。

有的功能是我特意放在作品集网站中的,为了让目标用户浏览起来更方便。其中有些是受到其他设计师优秀设计的启发,有些是我自己思考出来的,还有的是我从评论中得到的反馈。

我不会分享这些具体评论,因为我觉得这只是创建作品集网站的方法,但是它们真的)有帮助我在网站上得到了很多积极的反馈。

1. 简明而翔实的作品列表

招聘者和设计师们翻阅我们的作品集,查看我们的项目和经验,是为了了解我们做了哪种类型的设计,我们是哪种设计师,还有我们给人的印象是否和他们要找的人相吻合。

通过和不同的招聘者及设计师交谈,我学到的第一件事就是他们通常会去看我们的项目列表,因为我们的作品能够证明我们的能力。

所以,为他们提供更多项目的信息很重要,这可以帮助他们快速决定要更多了解哪个项目。以下是我放在每个作品描述中的内容:

  • 项目名称和图片
  • 描述设计作品类型的标签,在项目中用了那些设计方法
  • 一句话概括项目内容

我不仅提供了项目的图片和名称,还提供了更多的信息。

再次说明一下,我不是说这是唯一的解决方案,但是这是我对它的思考。很多人会默认点击列表中的第一个项目,如果他们没有看到自己想看的内容就会离开网页。当然大多数情况下我们的第一个项目应该是最引以为豪的那个。

但是,如果他寻找的是与信息可视化相关的项目,而这个项目在列表第三个,这时候该怎么办呢?我们应该让他们一个一个看项目直到发现想看的那个,如果这时候他们还没有放弃的话;还是说我们给项目加上相关信息?

我认为这些页面的目标就是去吸引合适的人去查看他们感兴趣的项目,最大限度地增加自己作为潜在适合者的机会。所以我试着去做这些工作,让他们能够一下看到想看的内容。

2. 项目概况

对于我们做过的项目,我们总想去深入挖掘,然后展示所有考虑到的细节,这样去表现自己的设计技巧和思维能力。

但是,对于那些不熟悉项目背景也没有太多时间查看所有项目的人来说,他们只是希望快速了解这个项目到底是什么,值不值得点击去浏览。

一个快速提供这些内容的方法就是展示出来项目概况,包括以下内容:

  • 你的设计想要解决的问题
  • 你的解决方案概述
  • 你的设计流程概览和你对每个步骤的贡献
  • 项目相关的其他信息(项目长度、团队/个人、你的角色、使用的工具)
  • 视觉稿/动画/你的解决方案,就像在 App store 上架那样展示

我发现最后一点非常有用——每一个我放在作品集里面的项目,我尝试去展示其主要功能和价值主张,并且设法去推销它,好像我真的在吸引顾客一样。

这种做法推动我去更深入地思考设计的新增价值;也帮助我的读者很快知道我的设计是什么,为什么他们需要关注它。

在这个部分的最后,我还是会给到用户直接跳转到最终原型的页面的选择,如果他们想要跳过设计过程直接上手体验产品。这取决于他们的时间和兴趣,他们可以很快地看我的设计成品,也可以详细阅读设计过程的文档。

项目概览示例

3. 侧边导航

我最初是在 Geunbae Lee’s 的作品集中看到侧边导航形式的,并且认为很有用。因为侧边导航对我的网站很重要,但是它在很多网站模版工具中又不能实现,所以这也成为我自己动手写代码来建作品集网站的原因之一了。

侧边导航最终版本

有很多原因能说明侧边栏对我来说很重要。首先,我的设计过程通常复杂又灵活,在其中会反映出我在设计过程中学到了什么,遇到了哪些问题,我接下来应该怎么做,诸如此类。

我想完整地记录我的设计过程和思考,因为我认为这是我的长处之一。但我知道不同的人访问我的网站是想看不同的东西,可能会挑着去找他们最需要的信息。所以有了侧边栏就意味着我可以为所有的内容提供一个大纲,他们可以选择重要的内容去看。这给了我的读者一种可控感。

说到大纲,侧边栏还有助于为读者说明整个案例研究的信息架构。你可能现在已经忘记了,你正在读的是“考虑用户需求”的“侧边导航”小节的内容。

虽然知道这在某些情况下并不重要,但让读者了解他们在文章中所处的位置,并让他们对接下来将要阅读的内容有预期,肯定会有助于创造更好的阅读体验,尤其是当他们时间比较少的情况下。

4. 可扩展内容

另一个帮助别人快速浏览作品案例的功能是可扩展内容,我最开始是在 Phil Kimura-Thollander’s 的作品集中看到的。

通过跟很多设计师和招聘者交谈,我了解到他们在设计流程中最想看的是:

  • 用户研究的主要收获
  • 你是怎么作出设计决策的
  • 你的用户研究和反馈是如何影响设计决策的

所以我决定把这些信息直接放在页面第一层级,让每个人都能够看到。

但是交谈中有些人还是对细节很感兴趣,比如我的研究是如何展开的,详细的结果是什么,我是怎么诠释这些结果的,为什么我只选择了特定的平台去设计等等。

对于这些信息,我决定在主线流程中进行隐藏,只让那些感兴趣的人去探索。某种意义上来说,这就如同是为普通用户和那些需要更多控制和信息的专家用户做设计一样。

用信息可视化的术语来说,网站/案例研究的整个流程类似于 Shneiderman 的口头禅:先展示概览,然后进行精简和筛选,接着按需要展示更详细的信息。那些可展开的内容就是更详细的信息。

展开内容

5. 在滚动时候高亮重点

另一个帮助别人快速浏览作品案例的功能是增加高亮。一开始我把设计故事的核心句子加粗,这样别人可以了解到我的故事或论证的中心思想。

然后我被 Wan-Ting Huang 的作品集激发了灵感,决定在用户滚动页面的同时高亮重点内容,这样可以更好的引起他们的注意,也有更惊艳的阅读体验。

滑动时候高亮重要内容

通过收集到的反馈,我发现用户真的很喜欢高亮的形式,因为这让他们能够更快地找到重要信息。也有人问我这个功能是怎么实现的,而且也看到有其他人的作品集中也用了类似功能。

04 快速试错&迭代

当我们谈到设计师的良好特质时,能够接受建设性的批评,让自己很受伤但是仍然能够快速失败并不断迭代的能力一直是其中之一。

当我在创建自己作品集的时候,我也会确保我从不同的人那里收集到了反馈。在的佐治亚理工学院,当校友或来自不同公司的招聘人员访问的时候,可以得到很多作品集评审的机会。我会抓住机会收集作品集的反馈。

我通常会用两种方式来收集反馈。有时候我会让评审作品集的人进行浏览,就像他们正在网上从成百上千的建立中寻找感兴趣的某一个作品集一样。我会问他们要找哪些内容,然后观察他们的习惯,让我的作品集能够在这种情况下符合他们的要求。

还有一种方式是,我会对着作品集来为他们讲解一个案例,就像我正在参加面试一样。我会记录下我跳过的地方,一些比较难解释的想法还有他们的问题,然后我可以优化流程和内容。

还有其他一些我利用到的资源。比如,Slack 和 Facebook 上一些作品集相互帮助的小组。他们给我提供了各种各样的见解。但是,我也会对采纳的建议有所选择,因为每个人都会从自己的角度来批判作品集。最终,我会来定义优先级,作出最终的决定。

我现在的作品集是我的第二个主要版本,但是它已经经过了上百次的迭代。我仍然很乐意去继续完善我的作品集,我也欢迎各位的反馈。

05 让作品集个性化

招聘者想要招到对自己的工作充满热情,会为团队做出贡献,而且将来会成为好同事的人。

我曾经为在美国申请大学的学生提供建议,指导他们写个人陈述。我通常对他们说的是,你的个人陈述是唯一一个在面试之前可以表达自己的声音,并向招生者展示自己的地方。我认为作品集也是如此。

如果你的简历是对经历的客观总结,那么你的作品集就是一个真实的个人空间,通过你所介绍的项目、你描述流程的方式以及你设计整个作品集的方式,可以展示你是谁,你对什么事情报以热情,你是如何思考的。

以下这些作品集中的内容很受大家喜欢。

1. 有趣的个性化加载

这真的是我作品集中最自豪的一个部分了。尽管它不是一个重要的部分,很多面试官都很喜欢它,因为他们认为这个动效表现了我的个性和对细节的专注。

有图片、动画和视频的案例研究通常需要一些加载时间,会让浏览体验不那么好。这就是为什么许多人更喜欢使用预加载器作为临时占位符,并且仅在加载完所有内容后才显示网页内容的原因了。

但是预加载过程也会很重复无聊,特别是当一个页面需要十多秒去加载的时候。我们可以为这些等待时间增加什么乐趣,从而让用户不用去盯着同样的加载占位符重复一遍又一遍?

我最初的灵感来自于 Google Chrome。当网络链接断掉的时候,Chrome 会优雅地提供一个简单的恐龙游戏。这让等待很有趣,也消除了人们可能会体验到的的挫败感。

恐龙游戏

但是我不只是想给用户一个有趣的等待体验;我想要我的加载动画展示我是谁,这样用户每次打开一个新页面,他就会多了解我一点,即使他还没看过我的作品。

通过很多探索,我决定去展示一些作品中永远都不会写的关于我自己的趣味轶事。我整理了20条,关于我的兴趣,过去的经历,写作,思考等等,让它们随机出现在加载过程中。

这些趣味轶事5秒内就能浏览完,每次人们刷新页面时都会更新,这可以帮助他们更好地将我想象为自己的同事/朋友,但它又不是必不可少的,所以如果人们错过了它,我不会有任何损失,因为这说明页面加载速度比预期的快。

预加载过程中的一个趣味轶事

很多看过我作品集的人都会跟我提gif中的这个细节,有些人甚至会试着刷新很多次就为了看我所有的趣味轶事。我设计这个小交互的时候也觉得很有趣,我很高兴可以利用我的设计和编程技能完成它,我也建议你们都利用自己的优势,去让自己的作品集变得个性又惊艳。

2. 展示你的优势

作品集中的项目和你展示它们的方式应该能够反映出你的优势,这能够帮助你定义整个作品集网站的风格和感觉。

如果你去浏览那些成功的作品集网站,你会发现他们的出彩是因为不同的原因。一些是因为有很多种类的高品质项目,一些是因为有详尽的设计过程和深入的思考,还有一些用了很好看的插画去简洁地传达用户需求和设计解决方案。

这些设计师的优势和个人风格也都有意无意地反映在他们的作品里面,就像观众可以从 Quentin Tarantino 或者 Christopher Nolan 的电影来判断他们的风格,你的作品集的访问者应该能够从你的项目和你记录它们的方式来判断出你是哪种设计师。

对于我来说,我很早就发现自己不太擅长画画(我只能画盒子/界面!)尽管我也学着去用可视化的方式来更好地表达我的想法,但是我可能比不上那些画了十多年的人。

在过去的两年里我也只做了少数几个项目,这就是为什么我要专注于我的优势,去为我的项目记录高度详尽的流程,深思熟虑的结构和深刻的反思。

当每个喜欢我的作品集的人都表示他们惊艳于我的设计流程、我对细节的关注还有作品质量的时候,我知道我成功了。但是,拥有详尽的设计流程也意味着我的案例研究会很长。这也是为什么我会那些在第三部分提到的些设计决策,去方便跳过和浏览。

3. 展示你的兴趣

UX/产品设计师通常都来自不同的背景,有着各自独特的兴趣。我有计算机科学和心理学的学科背景,所以我对为人工智能和 VR / AR / VUI 等新兴技术做设计特别感兴趣,这样我们可以利用它们的优势来使人们的生活更方便。

因此,我选择与这些技术相关的学校项目和附带项目,并让自己对这些新兴领域的设计原则进行更多的思考。我把这些内容放到作品集中去展示我喜欢设计什么,同时也写下我对声音语音设计和AI设计的思考。

你的项目应该能够证明你的能力和兴趣。确定你选择的项目是可以反映它们的,然后做好用你的热情去讲述每一个作品集中的项目的准备。

4. 个人品牌

虽然我不是一个品牌设计师,我却着迷于创建品牌形象。这和在作品集中展示优势和兴趣类似,但是创建个人品牌需要更进一步:你实质上是在试图去为读者建立你自己的形象,并让自己和一些形容词/技能挂钩。

由于我没有视觉设计的背景,我不能够去作出一个能代表自己的logo(如果有人感兴趣,我乐意提供帮助!)相反,通过思考我的经验和优势,我头脑风暴了很多方法想让别人记住我。

最终,我决定在我的名字——Tony上搞些花样,作为“技术爱好者,思想家和T形设计师”,所有这些都以T开头,反映了我的技能/兴趣/个性。

这像是在做一些营销上的努力。我在作品集、简历、领英个人主页和 Medium 主页上给自己打上标签。当我在面试中介绍自己或者现场演讲的时候也会提到这些。通过这种方式,我确定我的作品集和其他所有材料都传达了我想要表达的信息,共同向目标用户展示了一致的品牌形象。

我觉得这么做很有趣,也还在深入探索个人品牌究竟是什么。

你终于看完了!觉得感受如何?继续寻找你自己的优势和风格,然后尝试在你的作品集里展示它们。

作者:Tony Jin

原文链接:https://uxdesign.cc/how-i-designed-and-built-my-ux-design-portfolio-from-scratch-f1f9b5261029

翻译:Evelyn;审核:Maisie;翻译小组公众号:交译所

本文由 @交译所 翻译发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

章来源:D9設計

设计爱好者们再熟悉不过了

原研哉 (Kenya Hara),1958年06月11日出生于日本,日本中生代国际级平面设计大师、日本设计中心的代表、武藏野美术大学教授,无印良品(MUJI)艺术总监。

原研哉,一直活跃在设计领域,在重视 "物" 的设计的同时,还重视 "事" 的设计。

原研哉先生始终以一种不受外界影响的自在世界观去面对“日常生活”,用谦逊敏感的目光去发现设计点,然后用精准的洞察力去修正现存的设计行为理念,将现代设计推向一个更高的层次。

其设计一向遵循极简、留白、自然的风格。对于如何驾驭“地域性”和“国际性”二者的关系,原研哉回答到:“日本设计有四大特点,分别是:细致、慎重、纤细、简洁。这四点渗透到了日本的方方面面。越是质朴到极致的东西,越是高级感更足,这种‘周到的精细’在设计中是非常有价值的。”

“设计是一种教养”,原研哉,说出在他心中设计的定位,他认为“设计师”不该是社会中特殊的行业,设计更不该让人难以亲近,设计品也不仅是“礼品”。设计应该是一种教养,就像是公德心、礼貌般,是能随时挂在嘴边,是能环绕在日常生活之中,是能无声无息影响着人们的生活的。

下面一起来看下他近两年最全新作品吧:

——

Osaka Metro 大阪地铁VI视觉设计

由公营转为民营、重新开业的“大阪地铁”的VI规划。

其象征图案反映了同样用于企业口号的品牌概念–“不断行进,不断变化”。通过内含地铁“Metro”的“M”,以及大阪“Osaka”的“O”的螺旋动感形态(活动M),体现出充满活力的大阪街巷,以及不断行进的生命力。

——

ISETAN DOOR定期送货服务品牌视觉设计

LOGO中“DOOR”的“OO”好比具有高度鉴别力的百货商店采购员的“眼睛”,表达方式让人感到亲切。送货的快递箱上也变形绘出“眼睛”的表情,既简洁明快,融合于生活,又富有新意。

——

SICF19 艺术节品牌视觉设计

“SICF19”以发掘、培养、支持年轻创作者为目的的艺术节品牌

灵感以“发掘原石”为理念,

来制作LOGO、VI工具、动画和奖杯

——

韩华保险子公司“LifePlus”品牌新形象设计

LifePlus成立于2017年,是由韩华生命、韩华损害保险、韩华投资证券、韩华资产运用和韩华储蓄银行6家韩华集团金融子公司联合创建的以面向生活服务的金融品牌。

LifePlus全新的标识让人联想起我们的生活,从“固定”到“移动”的扩展,形成一种有机变化和成长的生活方式,将现代人的生活融入Life Plus品牌价值中,并期望能够改变人们的生活并得到积极的发展。

——

草间弥生美术馆 视觉识别设计

从前卫艺术家草间弥生的亲笔签名中获得灵感,设计出的视觉识别。已应用于宣传册、开馆纪念展宣传单页、名片和信封。

采用富有特色的人类形象图形,使参观者能直观理解单向行进路线,可顺利参观馆内各处。

充分利用视觉识别和草间作品的要素,应用于美术馆原创商品的包装、工作人员T恤等。

草间弥生美术馆开馆纪念展的展品目录。封面采用将作品贴在质感明显的粗涩材质上的设计,再加以黑色和银色的烫金处理等,打造出富有质感的目录。

——

MUJI无印良品全球最大门店

这些插图广泛应用于火车上的数字标牌和网页横幅广告中。主要通过火车、公共汽车和其他交通系统和标牌上的广告推广无印良品。(详细请看往期介绍链接)

——

MIKIMOTO日本珠宝商品牌VI视觉设计

在赋予标识以正体所应有品格的同时又行整理,使其兼备现代性与清晰度。品牌色为“未成之白”–换而言之,即将其设置为功成圆满前具有可能性的“白”,通过运作富于变化的“白”而进行呈现。

——

YOSUI BOX《100个白人》新书

——

La Seine Musicale导视设计

位于巴黎郊外赛甘岛上的音乐复合设施的VI与标识规划。象征图案为抽象化的建筑造型,在建筑物内部起着显示各项设施场所的功能。标识规划则是在类似五线谱的条格上配置文字及箭头,使信息漂浮于空间。

——

MUJI HOTEL 无印酒店深圳

开设于中国深圳的旅行休憩之地–“无印酒店”,在下榻的同时还可欣赏无印良品。

从酒店内的服务指南到客房插座的位置,无一不体现出无印良品自身的思想与思索。

——

无印良品餐厅蒸汽标志

在无印良品银座地下一层,无印良品餐厅致力于将其提供的食物中的原材料、天然风味发挥出来。为了鼓励步行在银座地区的人们参观这家餐厅,设计师想出了在街道入口处安装这个标志的主意。

——

第21届米兰三年(Triennale di Milano)“新?史前时代 100个动词”展

第21届米兰三年(Triennale di Milano)“新?史前时代 100个动词”展,由意大利建筑师Andrea Branzi和原研哉共同收集整理的代表人类欲望进化的100个动词和物品。原设计研究所负责企划、制作、展示计划。

最后来欣赏一下原研哉的标志logo作品:

- END -

有仓设计(http://yooooc.com/shop.html),广受90后设计师喜爱的设计资源平台,设计气象台唯一官方指定网站。内容涵盖建筑/规划/景观/室内四大板块,你可以快速找到方案文本/作品集/竞赛图纸/施工图/SU模型/3DMAX模型/Lumion模型/分析图/轴测图/教程/工装效果图/家装效果图/插件/电子书/字体/笔刷/PPT模板/平面图/立面图/剖面图/简历/软件插件/施工图/素材/ID模板/参考规范/名人资料/意向图等高端设计资源。

免责声明:

以上图片及资料内容部分来源于网络,由我方原创整理,版权归原作者所有;若此图库侵犯到您的权益,请与我们联系删除。若转载,请在公众号后台回复“转载”。

UX-BOY :设计行业相关的小伙伴们找工作时一定要做的一件事是准备作品集,而作品集完备后接下来会做的另一件事就是作品集的压缩。关于压缩作品集这事儿让人有多纠结,我想有过类似经历的小伙伴会有一些感触。所以这次想跟大家分享如何在限定条件下,拿到最佳质量的 PDF 作品集。

现状及问题

目前大家压缩作品集用的最多的应该是 SmallPdf,这个网站使用方便,压缩率也很可观。

详细介绍请看 → https://www.uisdc.com/online-pdf-convert-websites

但它存在的问题是什么呢?压缩比率不可控、压缩后生成文件大小不可控,最重要的是压缩后图像品质不可控。就像一套流水线,不管把什么类型的 PDF 放进去,它都会执行同样的操作,然后输出同一标准的文件,这个文件有可能会非常小,也有可能仍然比较大。当文件小的时候品质一般不太好,会比较模糊,而当文件大的时候你也没法让它进一步变小。

理想的压缩方式是什么样的

好的压缩是什么样呢?比如 Boss 直聘、脉脉等网站要求附件简历 10M 以内,这个时候我压缩后的作品集最好是 9.6M、9.7M。而对于那些留有邮箱的职位,附件 20M 以内比较合适,这时候我希望作品集压缩后是 19M、19.6M。

对于压缩而言,文件体积的减小,一定是伴随着图像品质的丢失,这点我想大家应该能和我达成共识。所以我们在限定条件下让作品集的大小尽可能的接近于那个限定值,这个时候拿到的作品集就是在限定条件下质量最佳的作品集。显然要达到这个目的,SmallPdf 这类全自动的压缩工具是无法满足需求的。

Adobe Acrobat

官网链接:https://acrobat.adobe.com/us/en/acrobat/pdf-reader.html

作品集要达到在限定条件下图像质量最佳的目标,可以使用 Adobe Acrobat。

PDF 这个文件格式最初是由 Adobe 公司创建并定义的,所谓知子莫若父,所以处理 PDF 我觉得没有比 Adobe Acrobat 更擅长的了。

打开软件我们看到有 N 多处理 PDF 文件的选项,但压缩 PDF 我们只会用到红框里的「优化 PDF」。

点击「优化 PDF」,选择你要优化的 PDF 文件,之后会看到如下图的界面:

1. 初级优化:一键压缩、满足基本需求

与压缩 PDF 有关的是红框里的前两个选项「减小文件大小」、「高级优化」。

「减小文件大小」这个选项与使用 SmallPdf 在线压缩效果几乎一致,我测试的 PDF 文件用 Sketch 制作,共 79 页、每页大小 1920*1080、文件大小 55.8M,使用 SmallPdf 压缩后 9.3M、使用「减小文件大小」这个选项压缩后刚好是 10M,然后查看两个文件,发现图像效果没有大的差异,后者色彩稍微好一些。「减小文件大小」这个操作点两下就好,不需要自己做过多设置。

「减小文件大小」的操作过程:

「减小文件大小」跟 SmallPdf 压缩一样简单高效,但是问题也是不能自定压缩的比率,没法很好控制文件大小。接下介绍另外一个选项「高级优化」,它能满足我们更精准的操作需求。

2. 高级优化:完全自定义,想要多大就多大

点开高级优化选项会看到如下界面(默认设置):

图像跟字体是影响 PDF 文件大小的关键因素,对于设计师的作品集来讲,图像基本会占到文件大小的 97% 以上,所以优化时仅调整图像选项卡上的内容就可以了,其它选项讲多了反而乱,不好理解。

第一步:利用 PDF 优化器压缩作品集

调整兼容性为最高(最新)版本。兼容性越低,能删掉、优化的数据就越多,压缩的比率就越大。这里不用担心兼容性低别人打不开的问题,因为兼容的是编辑功能,而我们作品集是发给招聘方看的,对方没有编辑我们作品集的需求。

第二步:按照红框里的参数把自己软件里默认的数值都改过来

灰度图像跟单色图像在作品集中比例较小,它们最佳压缩方式分别是 ZIP 和 JBIG2,ZIP 是无损压缩,JBIG2 也推荐设置为无损,因为单色图片少,所以无损跟有损对文件大小影响几乎可以忽略。彩色图像有 JPEG 和 JPEG2000 两种压缩方式,JPEG2000 是 JPEG 的升级版,压缩性能更高,但是在压缩比小于 10:1 的情况下,使用 JPEG 压缩后的图片视觉上更锐利清晰一些,我们作品集一般压缩比都是小于 10:1 的,所以彩色图像我推荐的是 JPEG 的压缩方式。如果有小伙伴作品集很大,想压缩到很小,比如 150M 的要压缩到 10M,这时候 JPEG2000 就是更好的选择,对应设置看下图:

第三步:通过调整采样分辨率,精确控制压缩比率以及压缩后文件的大小

正如我文章开始提到的那样,对于同一个 PDF 文件,如果对方要求文件小于 10M,那么压缩后 9.8M 文件的显示品质必然是要优于 7.8M 的。而接下来这一步就可以保证我们在限定条件下,让作品集的大小无限接近于那个临界值,从而争取更好的显示效果,这也是利用 Adobe Acrobat 压缩作品集时最有价值的点。

通过调整采样分辨率,可以以 KB 为单位精确控制压缩后的作品集大小。刚开始时可以以较大的跨度去调整采样分辨率,比如从 150ppi 调整到 96ppi。以我的测试文件来看,这个调整可以将原文件 55.8M 分别压缩到 17.4M、13.5M,也就是从150ppi 调整到 96ppi,文件减小 4M 。之后可以采用从 96ppi 调整到 95ppi、94ppi 的方式微调文件的大小,这种微调每次大概会减少 200多kb 的空间。如此我们就达到了最初的目的:在限定条件下,拿到接近那个限定值的最佳压缩品质的作品集。

总结

1. Adobe Acrobat 使用方法

Adobe Acrobat 的使用方法:

  • 打开「优化 PDF」这个选项,选择要优化的 PDF 文件。
  • 按照截图的内容修改默认参数。
  • 点击「确定」按钮导出。

2. 压缩网站 iLovePDF

除了 SmallPdf,我还发现另一个在线 PDF 压缩网站:iLovePDF,比 SmallPdf 多了一些选项,使用起来更灵活,压缩效果也不错。如果你对于作品集的压缩要求不高,我建议优先使用 iLovePDF;如果有较高的要求,建议使用 Adobe Acrobat 的高级优化,自定义压缩比;如果 iLovePDF 这个网站你打不开,再考虑使用 SmallPdf。

△ https://www.ilovepdf.com/compress_pdf

看完文章也许有人会说,关于作品集压缩有必要这么大费周章么?只要作品内容好,糊不糊都无所谓。

首先我认为这个观点是没问题的,毕竟有人找工作作品集也是不需要的,甚至简历也可以不给,即使这样也能去好公司拿非常高的薪水。但对于大多数人来讲在当前环境下找一份称心如意的工作还是比较难的,所以我愿意花时间分享一点点经验,倘若它能在你找工作的路上提供一点点帮助,即便是那份帮助微不足道,我也觉得我这一下午的时间是值得的