来了！全网zui肝 UX 作品集分享

发布时间：2020-12-30 13:59:17来源：UI设计达人

本系列的内容比较多，一个关于UX作品集输出的完整分享。会包前中后四篇8个模块，分别是：

UX作品集的认识

作品集内容的规划

作品集设计风格制定

标准页面制作思路

核心项目展示方法

其它作品展示建议

常见误区避坑指南

作品集常用素材整理

每个模块下还会包含若干的要点，总字数一定不少（又是一场血雨腥风…），建议大家耐心追完全篇，对UX作品集有一个彻底的认识。

文末作品集资源包下载，下面开始正文……

虽然作品集很重要，但到底有多重要，对于设计师来讲的意义是什么，多数新手其实并没有一个很好的认识。

所以，我还是要先做一些解释，给大家建立一些正确的观念。

首先，对于不同职业，评价他们水平如何的方法都不一样，越是文书、管理、内勤、协调等非显性技能的职业，评判起来就越困难。

为了尽可能提升招聘的效率，大厂就会直接设置学历门槛，从学历高精尖、大厂背景的精英中挑选适合的对象，起码他们在学习能力上证明过自己，不需要浪费时间再从低学历人群中逐一排查。

但对于设计师来讲，学历、经验、背景都没办法作为核心评价标准，因为评价一个设计师好坏，最重要的东西必然是他的——作品水平。

于是，我们就要有一个“载体”，专门用来存放自己的作品，让其他人可以直接来查看我们的作品，了解我们对应的水平。

不同类型的设计师，会选择不同的载体来制作自己的作品集，最有代表性的，就是过去品牌、建筑、工业等设计师，会通过制作一套完整的画册作为作品集进行展示。

在这些领域中，越是高级的设计师，作品集的排版、装帧、质量就越好。因为作品集是设计师和外界沟通的桥梁，它就是设计师本身实力的映射。

如果设计师想要在市场上获得招聘方的青睐以及面试机会，千言万语都远不如一份让人震撼的作品集能令人信服（只不过大多数人做不出这样的作品集出来）。

虽然纸质的作品集不适用于UI/UX设计师，我们现在普遍采用PDF格式作为载体，但是，作品集所运用的设计思路、排版、行文、规格，都和过去的纸质画册类似，然后再根据作品的特征，进行细节的更改。

制作作品集，必然要拓展有关平面、画册设计相关的知识（后面慢慢说）。在此大家要有一个清醒的认识，那就是完善作品集是设计师最重要的工作内容。

你的职业经验、项目经历、软件技能，都要能转化成作品集的内容和优势，尤其对于职业初级阶段的设计师，你的学习、成长路径，都需要围绕作品集的输出展开。

想要把作品集完整做出来，并不是一件容易的事情。但不管我后续或其他人分享的技巧还是经验，都没办法帮助你们逾越这个障碍——作品集同质化。

多浏览站酷、UICN的作品，或者做过招聘方看过应聘者投递的简历，你就会发现，UI/UX作品集从内容到样式排版都表现出了高度的一致性。

其中，不仅仅是因为抄袭成风（比如最近某阿里新入职设计师抄袭在职设计师的问题），还因为普遍性的UI设计师平面基础差，设计、艺术素养孱弱。

作品集首先是一份输出视觉感受文件，然后才是里面的思路、文字、想法、解决的问题。

如果你在展示内容、解决问题的方法上，不能提供非常个性、拍手称赞的方案，那么你的作品集就避免不了和别人同质化的结局。

最好能在视觉感受到的第一步，就能和别的简历拉开距离，即提供更有B格，更高级的视觉展示输出。

作品集中反应的实力之一，就是设计师自身的审美趣味，但这是一个比较玄学的问题，它隐藏在你设计中的每个角落……

只有这个方向我是无能为力的，因为不管我提供什么素材、配图，都不可能让你们的审美能力突然暴涨。

所以，为了输出更有个性的作品集，我建议大家多花时间浏览Bahance的各类首页作品推荐作品展示进行积累。

或者，一有空闲时间就到当地的图书馆，免费白piao那些非常厚重的设计、摄影、建筑画册。

这会非常有效的提升大家对作品展示和排版的眼界，并为后续的制作提供有效的借鉴思路。

2.1市场的需求分析

作品集的制作不是一次纯粹的自我表达，毕竟它要连接招聘方，将自己推销出去。

要提高推销的概率，我们就必须站在买房的立场里进行思考，什么样的作品集能获得他们的青睐。换句话说，我们要表现出什么样的能力，能满足招聘市场的需要。

我将招聘市场划分成两个部分，低级市场和高级市场。这不是指设计师水平的高低，而是招聘企业本身的Level高低，它们的区别可以概括成：

-低级市场多数只看视觉内容，希望设计师身兼多职，技能全面，具备最基本的协作方法和思考能力。

-高级市场则更看重分析水平，围绕业务、用户展开设计，能有逻辑性的解决项目问题，不强调UI以外的软件技能。

低级市场就没什么好分析的了，我们主要针对高级市场做分析，即大厂的设计师需要我们具备哪些能力。

通常，大厂对UI设计师的要求不会只有视觉而已，更多考量的是设计师的思考能力。专业的UED团队是要通过设计来提升产品数据、转化和收益的，而不是仅仅做出“好看”的设计。

所以，你既要了解你的用户，做出能让它们满意的设计，也要参与和理解业务，给出能让内部成员满意的方案。我们一般也称这种设计师叫“全链路设计师”或者“UX设计师”。

我将要求简化成以下四点：

-扎实的设计基础：软件掌握、界面设计、情感设计

-熟练的理论应用：视觉理论、产品理论、交互理论

-清晰的设计思路：产品分析、用户分析、逻辑思维

-前卫的探索精神：流行风格、视觉尝试、技巧突破

作品集要去满足这些特性，才是符合招聘需要的作品集，而不是盲目跟从市面上高喊UI设计师又需要掌握的插画、3D、动画软件，你就去学这些东西然后硬往里塞。

多花时间去招聘网站整理目标行业、企业的招聘需求，和内部的设计师进行沟通，可以更好的帮助我们建立对招聘要求的认识，便于下一步的内容制定。

有了招聘需求的分析结果，这一步我们就要想往作品集塞哪些作品了。在主流的市场中，我们在作品集PDF中可以放的作品主要有下面这些类型：

在一个作品集中出现所有类型，必然是不可能的，我们要有目的性的挑选符合招聘需求的内容来放。其中，最核心的作品必然是完整的UI项目，包括APP、WEB、B端等。

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

除了项目外，其它设计类型的展示，一定要和你面向的岗位对口，如果不是校招生，就千万不要放有临摹、练习类的字样。

即使你过去没有这种经验，你也要输出练习稿的时候能保证看上去像真实的项目，并且具备能撑起该类设计展示的数量。

有了这些想法，就可以更进一步，把要安排到作品集的内容记录下来，比如下图的案例：

要展示哪些作品确定好了，并不是规划就到此为止。作品集除了作品外，还会包含其它通用型的页面，同样是需要我们做好计划的。

这些通用型页面包含但不局限于下面的列表：

封面：简历的封面，作为全篇内容的引导画面

扉页：放一些人生格言或者其它提升逼格元素的页面

目录：作为整个作品集内容列表的快速呈现

个人介绍：放个人相关信息的页面，罗列生辰八字

工作经历：专门放职业有关的经历和项目经历

类型封面：进入某个作品类型作品的引导封面

项目封面：用来强调下方展示哪个项目的封面

联系方式：专门用来展示联系电话、二维码的页面

尾页：用来致谢和收尾完结的页面

……

这些页面的引用多数是必要的，因为作品集本质上就是一本电子画册，我们要保证读者的观看体验，就要穿插不同的标准页面来控制浏览的节奏，而不是陷入无穷无尽的文字和图片中。

越专业的设计师，在这些页面的使用上也会越严谨。合理组合通用型页面，可以保证我们的作品集看起来正式、专业、有态度。

例如，我要制定自己作品集，那我会这么安排：

封面、目录、个人介绍、工作经历、APP类型封面、APP项目1展示……尾页

更具体的目录结构我会在后续的完整版当中放出。

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

而我们要做的，就是顺着这个任务列表把后面所有的内容全部做完……

前面说过，作品集其实就是一本放了自己作品的画册，除了作品内容外，这本“画册”本身也是要经过设计的，而既然设计了，也就要产生相应的风格。

设计风格这个词汇是比较抽象一点，即使作为观看者，多数情况下你也很难完整、准确的去描绘看到的具体是什么风格。

所以，为了解决这个问题，通常我只建议大家关注下面几个要点：

色调

布局

字体

我们需要像制作UI项目视觉规范一样来去制定作品集中的这些要素，并在整套作品集页面中保持统一。

因为整套作品集会包含的页面数量是非常多的，不做好规划，会做着做着发现作品集一点都不整体，像是缝合怪把几本册子硬拼到一起去。

所以下面，我们就分别来介绍一下它们各自的要点。

这里我用的是色调，而不是色彩，因为它是一个更宽泛的内容。我们脑海里构思整册格调，可以是暗黑、黑金、波谱、呼吸感、宅寂白、幽暗蓝、蹦迪紫之类的……

这是一种色彩的大致应用范畴，如果你有比较多的平面、网页经验，或者已经有钟意的能代表自己的色彩喜好，可以直接开始动手做配色。

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

色调的考量是统一整套作品集的氛围和基调，你可以严肃也可以卡通（根据不同行业可能会有偏向性），但防止我们在制作过程中色彩缺乏控制而滥用，最终效果变成赛博朋克蒸汽波孟菲斯风……

3.3作品集的布局

接下来，就到布局的问题上了。在这里也不是让大家立马开始动手做页面的布局，而是确定页面的基本栅格系统。

栅格是什么我就不具体介绍了，简单来讲，就是确定了页面的基本尺寸后，规范内部的页面距离和内容分布、格线系统。

比如模仿幻灯片式网页的栅格应用：

或者直接查看画册、PPT类格线系统的制定：

这里还涉及到一个作品集尺寸的问题，在这里我直接建议大家用1280*800的尺寸，避免用1920*1080。

如果对栅格没有了解的同学，也可以直接用我下面提供的这个模版，在后续的演示中我们也使用该标准。

3.4作品集中的字体应用

最后一点，就是在作品集中应用字体的方案。和UI规范一样，作品集的文字使用，肯定也包含标题、正文、注释这三个大类，以及数字、引用等特殊文字。

要定什么文字类型，是大家各自设计过程中自己决定的，但不管定多少文字类型，都不如选择字体重要。

在这里也强调，作为个人的作品集，你选择任何字体都没问题，不用担心版权和商用的风险，所以不要在制作过程把字体局限在免费字体库中。

再者，根据互联网领域的特点，我们是很难在作品集中运用偏手写、传统的字体类型的，尤其对于新手而言，极可能避免使用“衬线体”。

至于对字体的应用，我们主要分成中英文两个部分，下面是推荐字体：

这些字体素材也会统一整理进行送出，文末有获取方式。

有了基本的作品集风格上的计划，接着就要展开具体的标准页面制作了。

这类页面我就不讲具体怎么设计和做什么细节了，这是自由发挥的事情，建议大家在刚开始就先参考一些优秀的案例，提前对板式进行规划，然后填充内部的图片、文字内容。

比如下面制作的简单案例。

心得分享，不要在封面上放一些精度特别差的插画，或者拍的太随意的照片。

4.2个人介绍页

个人介绍页面，主要放我们自己个人的基本简介，这里要强调作品集的个人介绍和完整的简历文档是不一样的。

作品集主要展示作品为主，太琐碎的个人信息是没有必要加入的，所以该页面只需要包含基础的3个模块：照片、基本信息、个人简介。

针对个人简介，你可以参考下面这样的布局形式。

一定要保持介绍页的简洁，直观，避免废话。尤其是一些学校的奖项、经历对面试者来说毫无意义。

4.3经历页面

关于个人工作经验的部分，需要和介绍分隔开，单独放一页。

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

目录页，主要用来快速交代整份作品集中包含的作品、结构、顺序，而不是放得非常正式的像真实书籍一样还标注对应页面位置。

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

至于目录应该以设计类型还是项目为单位，或者要呈现几级，就是制作者自己决定的了。

我们要对每个大的模块之间，设计对应的封面作为前后内容的分隔，告诉观看者进入新的章节，以及对应的作品是什么。

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

通常，对类型封面设计比较随意的作品集，会导致观看过程没有停顿，阅读体验变差。

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

今天的分享到这里结束，下一篇会整理更多作品集素材下载哦！敬请期待！

作品集资源打包下载

点个在看，在公众号后台回复作品集，2020字体，就能获取资料下载链接。

主页君个人微信

添加主页君个人微信领取：大厂设计规范及组件库、免费商用中文字体、样机全家桶

推荐阅读

（点击标题可跳转阅读）

关注『UI设计达人』

看UI设计精选文章.案例.高薪职位.教程

↓↓↓

回复灵感获取UI设计灵感合辑

点个“在看”好文不断