1 何时整理作品集

最好是天晴时修屋顶，平时就定期复盘

在投简历前建议先认真制作一版令自己满意的完整作品集

如果是打算先快速出一版基础作品集然后边投递边完善，那么很有可能因为初版作品集的质量一般而错过好机会

早点做好优质作品集，能让自己在每个阶段集中精力做好一件事

在后期的面试中，面试官可能会对作品集的局部细节提出质疑，如果作品集的确存在瑕疵，那么可以继续迭代优化

2 把什么放入作品集

2.1 原则

坚持原创，深挖作品，宁缺毋滥

不胡编乱造设计数据，只展示自己熟练应用的用研知识

要注意保护企业机密，不能把墨刀/蓝湖链接发出来当作品集

2.2 放什么项目

已经工作的小伙伴就别展示大篇幅的练习稿啦，要以呈现工作项目为主，如果工作中的设计没有很满意，此时可以再优化

我通常会从项目背景、竞品分析、最优质界面及其设计思考、设计成果等维度介绍一套项目

“低保真原型图”我一般不会放入作品集，因为都已经有成套高保真设计图了，灰白线框图并不能额外展示我的设计能力

“最优质界面+设计思考”是精华部分，需重点展示

“设计成果”我通常会写用户反馈和数据转化，如果获取不到数据不写也行，但是不要胡编乱造假数据

2.3 放几个项目

放几个质量最上乘的项目即可

如果项目数量太多，就不太容易深挖精髓

3 视觉包装稿

3.1 原则

找工作用的作品集，视觉冲击力要强

3.2 规范

3.2.1 宽高比

常见的有2种：宽高比16:9的PPT，宽度固定&高度任意的长图

如果采用PPT，那么推荐单张页面大小为1440*810px

1280*720也OK，只是浏览时会相对模糊些

不建议使用1920*1080，因为导出的PDF文件可能会超出招聘平台的文件大小上限

当使用长图时，我通常设置宽度1400，每1张长图的高度尽量控制在6000以内 (一般不超8000)

因为高度比较自由，所以视觉包装上好发挥；限制最大高度，可以让图片加载得快些，节省HR时间

3.2.2 栅格

可以用12个栅格来规范包装稿元素的横向布局

因为12是2和3的整数倍，所以可以很灵活地根据需求在同1行放置1个/2个/3个界面

在Figma中可以按照下图所示来设置12栅格

3.2.3 样机

3.2.3.1 数量

作品集中出现的样机数量建议控制在0～2种，可以不用样机，整体视觉效果会更轻盈

日常注意收集优质素材，不必囤积成千上百份资源，与其放收藏夹吃灰，不如只留下最精致的那一批样机然后灵活使用

3.2.3.2 样式

建议使用流行通用设备，比如iPhoneX

优质样机下载地址www.uistore.design/categories/mockups/

3.2.3.3 灵活使用在线样机工具

推荐2款小工具

1、快速创建3D样机模型&演示动画www.designcamera.app/

提供手机、iPad、笔记本电脑、台式机等多种设备，且支持360°旋转样机

只需要把图片拖入包含样机的黑色窗口，就可快速将界面放入样机中

可以为样机添加阴影、设置阴影强度

也可以修改底图的背景色和外框颜色

2、快速把界面放样机中展示https://cleanmock.com/designer

3.2.4 色彩

没有极强的设计功底，就严格控制配色

作品集大基调背景色的设计，我认为以下的几种方向还不错

“白色”与“带品牌色相的浅灰色”交织错落，“品牌色”点缀，详见下方第1张图

“白色”与“品牌色”1:1，详见下方第2张图

“黑色”为主，“品牌色”点缀，详见下方第3张图

3.2.5 字体

正文字体的数量建议1～2种，字体数量过多会有些喧宾夺主

建议使用免费字体，比如思源黑体

不建议大面积使用花体字，如果把控不了尺度就很容易过度设计

正文的颜色建议使用无彩色系

当包装稿宽度为1400px时，字体≥14px

3.2.6 圆角

整体保持统一

根据作品的气质选用合适的圆角

想突出“高级感”，就用直角/小圆角

想体现“亲和力”，就用较大的圆角

3.3 设计中做几版通用样式

作品集要像1本时尚杂志/1套PPT一样，有固定的几种版式，省事、统一、和谐

3.4 视觉设计

3.4.1 头图

头图需要精心设计，争取先声夺人

潦草的头图大概率会劝退他人

3.4.2 全局装饰性小元素

可以将“基础的圆形”充分应用到包装稿中

也可根据包装稿的大场景设计通用小元素，比如大场景是“宇航员女孩遨游太空”，那就可以用“星星连线”和“灯光投射”作点缀

3.4.3 包装稿配图

包装作品时要根据具体场景选用合适的图片

3.4.4 用户调研

可以从身份、占比、职业等多维度来介绍用户

举几个典型人物的例子，能让读者快速代入产品使用场景

可以呈现在职期间用户的增长情况等数据，这是设计有效性的一种验证。但要注意，如果没有数据就不要瞎写，胡编乱造一堆假数据是在给自己埋地雷。同时要谨记“增长”多数情况是团队共同奋斗的成果，面试时别太自大

此模块可以用圆环、进度条、图文列表等多形式来丰富视觉

3.4.5 功能架构

简约清爽，条理清晰即可

3.4.6 设计风格

呈现时注意顺序，从笼统到具体：设计策略、情绪板、具体用色

可以用基础形状&线条展示“全局设计策略”的推导

用图片&花体字展示情绪板

大色块拼接能直观展示色彩系统

3.4.7 Logo改版

多样化呈现Logo改版前后的效果对比、多维度设计思考、方案探索

3.4.8 优质界面展示

3.4.8.1 原则

坚持作品的原创性，万万不可截图搬运，可以菜但不能烂

拒绝太过陈旧的包装稿风格，平时多收集多研究大佬的作品包装稿

包装时不能态度随意，尽量避免以下问题：设计稿和背景色融为一体、图片模糊、图文不搭、表单文案都一样内容不真实、不按样机来适配设计 (比如选取的是有刘海屏的iPhone手机，但是没有微调“顶部导航栏”和“底部标签栏”，不规范)

3.4.8.2 界面配图

用好看的图片替代工作中快速找的占位图，能快速提升作品逼格

3.4.8.3 展示1张图

内容可以从边界延展开来，不要被设备外框限制住

3.4.8.4 展示2~3张图

如果没有说明文案，可直接展示漂亮的界面

3.4.8.5 界面间的衔接

很简单的一种方式就是“用线条连接”2个页面

连接线上可以添加说明文案，备注可交互的元素

如下图，小手图标是部分界面中已有的元素，把它提取出来作装饰，此外小手icon也表示“触发了点击事件”，能直观展示页面的从属关系

3.4.8.6 展示关联界面

父子界面可以使用包含交互动效的Gif展示

注意界面滑动的速度要适中

可参考下图，其中的Report和Finish镂空文字可以这么实现：在PS中设置图层“填充”0%，再添加“描边”图层样式

3.4.8.7 GIF图的高度

既可以单独做一张漂亮的GIF图（在AE中做动效，PS中包装）

也可以将动效融合在一张长图中，前提是“确保图片清晰可读”，好处是“GIF图看起来和其它的图片不会有明显断层，浏览顺畅”

3.4.8.8 水平方向上建议放1个完整Web界面

因为Web界面宽度大，所以为了完整清晰展示网页效果，建议在水平方向上只放1个界面就好

当需要展示说明文案时，可以这样分配横向空间：在12栅格的前提下，左侧4栅格放“界面说明”(文案居右对齐)，界面占中间7栅格，最右边的1栅格留白

3.4.8.9 样式相似的Web弹窗，一行可放3个

可参考下图样式

3.4.8.10 如果有复杂的交互逻辑，可以展开阐述

可以用表格和流程图的形式呈现

3.4.8.11 日常练习

精选展示优质的日常练习，画龙点睛

3.4.9 尾图

封底可以和封面在视觉上首尾呼应

比如下图中，封面是宇航员女孩遨游太空，封底也展示了女孩插画

比如下图中的封面是“抽取一本发光的优质作品集”，封底是将作品集放回书架上，十分巧妙

3.5 总页数

16:9的PPT共40～60页比较合适

3.5.1 如何衡量

1、做一张宽高比16:9的图片，导出PNG格式

2、在石墨文档中新建文档，命名为“最小篇幅40张图”，把步骤1中的图片贴40张

3、在石墨文档中新建文档，命名为“最大篇幅60张图”，把步骤1中的图片贴60张

4、在石墨文档中新建文档，命名为“作品集实时预览”，把作品集的PNG图片和GIF图统一放在这个文档中

5、确保3份文档的图片之间都没有空行

6、电脑全屏截图，对比最右侧“滚动条”的高度，确保在合适的范围内（“最大篇幅60张图”滚动条高度≤“作品集实时预览”滚动条高度≤“最小篇幅40张图”滚动条高度）

4 发作品集

4.1 发之前的自查

预览整体视觉效果是否满意

通篇核对文案，检查错别字

4.2 发送的格式

4.2.1 链接

个人推荐链接形式

如果作品可公开，就发表在知名设计平台上，比如UI中国

如果作品不可公开，就放在石墨/腾讯文档中

4.2.1.1 用石墨/腾讯文档来承载作品集

把设计好的包装稿图片，按顺序导入到"空白在线文档"中

支持gif动图；瀑布流预览，比pdf更丝滑；有历史编辑记录，万一作品集被盗用，可用来证明自己的原创性

在分享时可以设置“公开只读link”，将默认分享文案修改成固定格式（比如：UI作品集-某某某-2年https://shimo.im/docs/ababab1ysl），发送前要确认链接可点击

4.2.2 PDF

招聘方主动要的话，我们再给

较正规的招聘方，会要求我们发作品集到企业邮箱

注意修改PDF文件名称，可以使用“UI作品集-某某某-5年-15198888888”的类似格式

Powered by Froala Editor