大家好，我是灰色执照~很开心在过年期间又开发出了一款非常便利的设计神器：NB Earth 这是一款可以快速制作可视化地球的工具，无需下载任何软件，打开网站你就可以直接生成各种类型的地球。你还可以在地球上增加标注、在地球上增加路径动画。往期神器：三维地图绘制神器 NB MAP 升级了！

大家好，我是灰色执照~很开心在过年期间又开发出了一款非常便利的设计神器：NB Earth 这是一款可以快速制作可视化地球的工具，无需下载任何软件，打开网站你就可以直接生成各种类型的地球。你还可以在地球上增加标注、在地球上增加路径动画。

往期神器：

三维地图绘制神器 NB MAP 升级了！可支持下载区县、乡镇地图！ 大家好，我是灰色执照~ 经过一段时间的努力，NB Map 又发布新版本了！

阅读文章 >

软件体验地址： https://www.nbchart.com/lab/lab.php

打开网站后，你会看到 6 种不同形式的地球，鼠标点击就可以进入对应的预设效果。

相关操作你也可以直接看这个视频教程：

当视频无法加载时请刷新页面， 或前往PC获得最佳体验。

这就是软件的主界面了，他总共可以分为 4 个操作区域，方便你添加数据，修改细节：

软件主要可以生成以下效果：

效果 1：飞线图

飞线图常用于制作网络攻击、数据传输……

输入对应的经纬度后，就可以生成点、四棱锥形状的标注、线条、文字以及地面上的水波纹动画。所有的参数都可以自己调整，比如点的位置、颜色、是否带动画、线条的样式……

效果 2：旅游路径动画

如果你需要像朋友展示某一次旅行要去的地方，相信 NB Earth 会给你带来非常清晰直观的效果。

如果你是乘坐火车出行，同样可以把轨迹线条调整成紧贴地球：

效果 3：柱状图

可以直观的在地球上展示柱状图数据。

上图为 2022 年各省的人口数据

效果 4：科技感地球

我试着尝试模拟了一下 github 首页科技感地球的效果。因为软件可以自行上传地表贴图，制作点状的地形贴图后很容易实现非常精美的地球可视化效果。

效果 5：光柱柱状图

由于柱状图的样式可以调节，为了增强科技感，你能够将柱状图设置成发光的形式。

不得不说，这种外发光的柱状图还是挺炫酷。

由于云层可以自己上传贴图，如果想要制作这种 2 层嵌套的科技感地图，也是同样十分方便

好了，以上就是我这款软件的具体介绍了，更多详细的内容等待你自己去探索吧，今天的文章到这里就要结束了，希望你喜欢我的作品。开发不易，点个赞吧~

更多 可视化设计 神器：

数据可视化神器！帮你一秒生成三维地图的免费工具NB Maps 大家好，我是灰色执照。

阅读文章 >

可视化神器第二弹！一秒生成三维饼图的免费工具NB PIE 大家好，我是灰色执照~ 很开心又和大家见面了。

阅读文章 >

2022 年已经过去 2 个月了，这算是一篇迟到的文章，但是年终总结对于我们回顾过去展望未来有很重要的作用。到了年关岁末，很多公司都要求写年终总结，年终总结很多时候和我们的晋升和加薪有着直接的联系。年终总结的目标是回顾过去，展望未来。

2022 年已经过去 2 个月了，这算是一篇迟到的文章，但是年终总结对于我们回顾过去展望未来有很重要的作用。

到了年关岁末，很多公司都要求写年终总结，年终总结很多时候和我们的晋升和加薪有着直接的联系。年终总结的目标是回顾过去，展望未来。对于我们个人来说，是对自己一年工作的复盘，总结今年做了哪些事？有哪些成长和收获？有哪些不足；对于工作来说，这是一次展示自己付出、能力、工作成果的机会；对于公司来说，从团队成员的工作总结中，能看到每个团队成员的成长和不足、项目中的难点，帮助公司制定团队成长、流程优化、管理优化的规划有很好的指导作用。

那么如何去写好一份年终总结呢？

更多 年终总结 干货：

设计师工作总结和年终汇报怎么写？送你一个通用思路！ 临近年终，我最近经常会收到大家关于述职报告和工作总结相关的问题。

阅读文章 >

一、不同阶段的设计师汇报的重点不同 设计师在不同阶段所思考的内容应该也会有所不同，我自身也是从实习生-初级设计师-高级设计师-资深设计师-设计专家（设计负责人）这样一路走过来的，每个阶段对于设计的理解和工作重心也会有所不同。接触过的设计师也是形形色色，我能看到工作 10 年的设计师还在展示自己设计的技法，才刚实习的视觉设计师在妄谈产品目标、产品策略...

我会把设计师的成长路径主要分为 3 个阶段 ：

第一个阶段（专业纵深），1-3 年设计师

在专业纵深上进行不断反复的长时间训练，逐渐拓展在自己专业上的技能，比如视觉设计师要持续打磨自己视觉设计的能力

第二个阶段（横向拓展），3-5 年设计师

在这个阶段我们不应该只把自己定义成为一个只会画图的画图仔，而是专业技能过硬的商业设计师，既有深度，又有专业度，我们关注的点更多是在用户、业务、数据、体验上，对上游和下游的职业虽然我们不会直接参与执行，但是我们了解并能够深度参与到其中，并发挥出设计的最大价值

第三个阶段（塑造影响力），5 年以上的设计师

5 年以上的设计师不出意外的话基本上成为公司的中流砥柱了，可能已经成为小组长或者管理者了，我们需要的是开始注重自身影响力（对内、对外）的拓展，比如沉淀方法论、培养设计师、对外发声…

所以，对于第一阶段的设计师来说，年终总结的内容应该聚焦到具体的项目执行、产出质量上面；第二阶段的设计师，年终总结应该聚焦到对于业务的赋能，专业度和深度的展现；第三阶段的 设计师 ，年终总结应该聚焦到方法论沉淀、团队赋能、影响力塑造方向上来。

二、年终总结汇报的四个步骤 1. 工作业绩

工作业绩要写明做了哪些工作，采取了怎样的措施、方法和步骤，有什么效果，取得了哪些成绩，取得成绩的主客观原因是什么，哪些做法是成功的、行之有效的。

工作太乱太细碎，要怎么写？

很多初级的设计师工作一般都比较细碎，不成体系，一个个展示的话很难突出重点，我们不妨将这些浩繁的工作，分成几小类，最终分小标题来写，这样就条理清晰了。

哪些工作值得写？

要回答这个问题就需要你站在老板和领导的角度去思考，把图做的漂亮只是设计师最基本的技能，老板关注的是你的图能够帮助他赚多少钱，你的工作对于团队的贡献有多少。我总结下来主要有 3 个方面的工作时值得被写出来的：业务赋能、团队赋能、体系化建设

业务赋能：比如你公司的某个节日活动，因为你的设计帮助业务提升了 30%的销售额 团队赋能：比如你主导建立设计插画库，设计团队的整理设计效率整体缩短了 40%的时间；你沉淀出设计 IP 设计的方法，让团队的产出更高效更专业；通过输出专业文章，全网曝光量 40w，帮助团队提升影响力 体系化建设：体系化是一个面，比如说你改版一个界面就是线，而你改版塑造整体的产品调性就是面，常见的体系化有：产品品牌体系构建、设计系统搭建、会员体系搭建... 体系化是每个阶段的设计师都需要考虑的点，体系化的思维能够让我们有更加全局的的视角

2. 经验亮点

在工作完成的基础上，进一步做总结和深入思考，标明重点、亮点，这是体现设计师能力的关键。那么哪些是经验亮点的工作呢？

领导关注的工作

取得好成绩的工作

大家评价都比较高的工作

通过创新的方法、经验完成的工作

解决业务痛点的工作...

这些都属于经验亮点的一些工作

3. 问题不足

不管你身处的职位如何，每个人都会有自己的问题和不足，我们应该客观虚心的去谈，找到问题的根源，并尝试给出解决方案，遇到同类问题后面应该如何去解决。我们可以分三步走“描述问题+分析问题+解决问题”

描述问题：哪一项工作没有做好，面对的困难是什么？ 分析问题：是什么原因导致问题的发生？ 解决问题：下次遇到了同类问题你会如何解决？

4. 来年规划

前面提到的 3 个方面都是回顾过去，那么接下来的来年规划就是对未来的行动了，对于来年的规划，我们可以考虑从以下 2 个方面去写：

① 个人目标应与团队或公司目标为导向

我看过很多设计师年终总结是以个人为导向，比如:要看多少本书、要学习什么课程，但是这个和你的领导老板有什么关系呢？这时候我们不妨转换下视角去说，发现目前团队对于 C4D 的能力欠缺，经常需要寻求外部合作，所以今年计划学习 C4D 的课程，补足这部分的能力

② 结合总结的不足进行规划

对于自身的短板和不足，我们不应该放任它，而应该着手去解决它，所以来年我们可以针对这些不足有详细的规划

最后要提醒的是，同时一份好的来年规划，必须符合 SMART 原则：具体的、可衡量的、可达到的、有相关性的、有明确时间的

三、年终总结需要注意的几个细节 1. 不同阶段，重点不同

设计师在不同的阶段，汇报的重点应该有所不同。千万不要还刚入行就大谈策略，设计总监还在讲设计技法。

2. 数据说话，价值可视

设计的价值量化一直是一个非常难的课题，在产出自身设计价值的时候我们尽可能通过数据将我们的价值可视化呈现在领导面前，而不是讲产出的设计多么炫酷。

3. 主题明确，突出重点

年终总结是对当年成果的高度精炼，我们对每个项目价值点、经验、不足都需要做到主题明确，让领导能够很明确的了解你阐述的重点是什么。

4. 功劳苦劳，把握清楚

功劳是努力能够得到明显的收获，甚至对业务对团队有着重大的推动作用；苦劳是辛辛苦苦去做，收到的价值和效果却非常小；所以我们在年终总结的时候应该多讲功劳，放大自己的价值。

5. 适度包装，闪亮登场

作为设计师来说，年终总结的包装也是必不可少的，我是主张内容大于形式，做适度的包装，能够体现设计师身份就可以，而不需要像做作品集那样做精细化的包装。

写在最后 对于我们设计师来说，把设计做好是本职工作，但是我们应该也要学会如何向别人呈现自己的价值，这对于我们来说也是个非常重要的课题。

不知道如何写年终总结？收下这份速成攻略（附实用模板） 想必大家跟我一样最近都在忙着写年终总结，最近的公众号和知乎也各种给我推相关的文章，我挑了几篇读了一下，教了在下很多框架性的问题，虽然也很受用，但基本都是指导思想，具体怎么落地，从哪块动笔好像真没说明白，想来想去总觉着差点意思…

阅读文章 >

设计师如何写好年终总结？我总结了4个维度！ 2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。

阅读文章 >

2022 年已经过去 2 个月了，这算是一篇迟到的文章，但是年终总结对于我们回顾过去展望未来有很重要的作用。到了年关岁末，很多公司都要求写年终总结，年终总结很多时候和我们的晋升和加薪有着直接的联系。年终总结的目标是回顾过去，展望未来。

2022 年已经过去 2 个月了，这算是一篇迟到的文章，但是年终总结对于我们回顾过去展望未来有很重要的作用。

到了年关岁末，很多公司都要求写年终总结，年终总结很多时候和我们的晋升和加薪有着直接的联系。年终总结的目标是回顾过去，展望未来。对于我们个人来说，是对自己一年工作的复盘，总结今年做了哪些事？有哪些成长和收获？有哪些不足；对于工作来说，这是一次展示自己付出、能力、工作成果的机会；对于公司来说，从团队成员的工作总结中，能看到每个团队成员的成长和不足、项目中的难点，帮助公司制定团队成长、流程优化、管理优化的规划有很好的指导作用。

那么如何去写好一份年终总结呢？

更多 年终总结 干货：

设计师工作总结和年终汇报怎么写？送你一个通用思路！ 临近年终，我最近经常会收到大家关于述职报告和工作总结相关的问题。

阅读文章 >

一、不同阶段的设计师汇报的重点不同 设计师在不同阶段所思考的内容应该也会有所不同，我自身也是从实习生-初级设计师-高级设计师-资深设计师-设计专家（设计负责人）这样一路走过来的，每个阶段对于设计的理解和工作重心也会有所不同。接触过的设计师也是形形色色，我能看到工作 10 年的设计师还在展示自己设计的技法，才刚实习的视觉设计师在妄谈产品目标、产品策略...

我会把设计师的成长路径主要分为 3 个阶段 ：

第一个阶段（专业纵深），1-3 年设计师

在专业纵深上进行不断反复的长时间训练，逐渐拓展在自己专业上的技能，比如视觉设计师要持续打磨自己视觉设计的能力

第二个阶段（横向拓展），3-5 年设计师

在这个阶段我们不应该只把自己定义成为一个只会画图的画图仔，而是专业技能过硬的商业设计师，既有深度，又有专业度，我们关注的点更多是在用户、业务、数据、体验上，对上游和下游的职业虽然我们不会直接参与执行，但是我们了解并能够深度参与到其中，并发挥出设计的最大价值

第三个阶段（塑造影响力），5 年以上的设计师

5 年以上的设计师不出意外的话基本上成为公司的中流砥柱了，可能已经成为小组长或者管理者了，我们需要的是开始注重自身影响力（对内、对外）的拓展，比如沉淀方法论、培养设计师、对外发声…

所以，对于第一阶段的设计师来说，年终总结的内容应该聚焦到具体的项目执行、产出质量上面；第二阶段的设计师，年终总结应该聚焦到对于业务的赋能，专业度和深度的展现；第三阶段的 设计师 ，年终总结应该聚焦到方法论沉淀、团队赋能、影响力塑造方向上来。

二、年终总结汇报的四个步骤 1. 工作业绩

工作业绩要写明做了哪些工作，采取了怎样的措施、方法和步骤，有什么效果，取得了哪些成绩，取得成绩的主客观原因是什么，哪些做法是成功的、行之有效的。

工作太乱太细碎，要怎么写？

很多初级的设计师工作一般都比较细碎，不成体系，一个个展示的话很难突出重点，我们不妨将这些浩繁的工作，分成几小类，最终分小标题来写，这样就条理清晰了。

哪些工作值得写？

要回答这个问题就需要你站在老板和领导的角度去思考，把图做的漂亮只是设计师最基本的技能，老板关注的是你的图能够帮助他赚多少钱，你的工作对于团队的贡献有多少。我总结下来主要有 3 个方面的工作时值得被写出来的：业务赋能、团队赋能、体系化建设

业务赋能：比如你公司的某个节日活动，因为你的设计帮助业务提升了 30%的销售额 团队赋能：比如你主导建立设计插画库，设计团队的整理设计效率整体缩短了 40%的时间；你沉淀出设计 IP 设计的方法，让团队的产出更高效更专业；通过输出专业文章，全网曝光量 40w，帮助团队提升影响力 体系化建设：体系化是一个面，比如说你改版一个界面就是线，而你改版塑造整体的产品调性就是面，常见的体系化有：产品品牌体系构建、设计系统搭建、会员体系搭建... 体系化是每个阶段的设计师都需要考虑的点，体系化的思维能够让我们有更加全局的的视角

2. 经验亮点

在工作完成的基础上，进一步做总结和深入思考，标明重点、亮点，这是体现设计师能力的关键。那么哪些是经验亮点的工作呢？

领导关注的工作

取得好成绩的工作

大家评价都比较高的工作

通过创新的方法、经验完成的工作

解决业务痛点的工作...

这些都属于经验亮点的一些工作

3. 问题不足

不管你身处的职位如何，每个人都会有自己的问题和不足，我们应该客观虚心的去谈，找到问题的根源，并尝试给出解决方案，遇到同类问题后面应该如何去解决。我们可以分三步走“描述问题+分析问题+解决问题”

描述问题：哪一项工作没有做好，面对的困难是什么？ 分析问题：是什么原因导致问题的发生？ 解决问题：下次遇到了同类问题你会如何解决？

4. 来年规划

前面提到的 3 个方面都是回顾过去，那么接下来的来年规划就是对未来的行动了，对于来年的规划，我们可以考虑从以下 2 个方面去写：

① 个人目标应与团队或公司目标为导向

我看过很多设计师年终总结是以个人为导向，比如:要看多少本书、要学习什么课程，但是这个和你的领导老板有什么关系呢？这时候我们不妨转换下视角去说，发现目前团队对于 C4D 的能力欠缺，经常需要寻求外部合作，所以今年计划学习 C4D 的课程，补足这部分的能力

② 结合总结的不足进行规划

对于自身的短板和不足，我们不应该放任它，而应该着手去解决它，所以来年我们可以针对这些不足有详细的规划

最后要提醒的是，同时一份好的来年规划，必须符合 SMART 原则：具体的、可衡量的、可达到的、有相关性的、有明确时间的

三、年终总结需要注意的几个细节 1. 不同阶段，重点不同

设计师在不同的阶段，汇报的重点应该有所不同。千万不要还刚入行就大谈策略，设计总监还在讲设计技法。

2. 数据说话，价值可视

设计的价值量化一直是一个非常难的课题，在产出自身设计价值的时候我们尽可能通过数据将我们的价值可视化呈现在领导面前，而不是讲产出的设计多么炫酷。

3. 主题明确，突出重点

年终总结是对当年成果的高度精炼，我们对每个项目价值点、经验、不足都需要做到主题明确，让领导能够很明确的了解你阐述的重点是什么。

4. 功劳苦劳，把握清楚

功劳是努力能够得到明显的收获，甚至对业务对团队有着重大的推动作用；苦劳是辛辛苦苦去做，收到的价值和效果却非常小；所以我们在年终总结的时候应该多讲功劳，放大自己的价值。

5. 适度包装，闪亮登场

作为设计师来说，年终总结的包装也是必不可少的，我是主张内容大于形式，做适度的包装，能够体现设计师身份就可以，而不需要像做作品集那样做精细化的包装。

写在最后 对于我们设计师来说，把设计做好是本职工作，但是我们应该也要学会如何向别人呈现自己的价值，这对于我们来说也是个非常重要的课题。

不知道如何写年终总结？收下这份速成攻略（附实用模板） 想必大家跟我一样最近都在忙着写年终总结，最近的公众号和知乎也各种给我推相关的文章，我挑了几篇读了一下，教了在下很多框架性的问题，虽然也很受用，但基本都是指导思想，具体怎么落地，从哪块动笔好像真没说明白，想来想去总觉着差点意思…

阅读文章 >

设计师如何写好年终总结？我总结了4个维度！ 2021年已经快过去了，作为设计师来说总结并分析问题才能获取经验，本文将会和大家一起探讨学习下作为设计师如何写好总结。

阅读文章 >

前言我们今天讲一下如何整理自己的作品集，好多人呢辛辛苦苦工作一年了，完了之后发现没有什么拿的出手的东西，今天做一点需求，明天做一点需求，做的东西零零散散的，发现没有什么可提取出来的，最后到总结的时候抓头挠腮的。更多作品集设计方法：作品集有很多虚拟项目，为什么还是求职失败？最近不少同学在筹备作品集，而很多缺乏项目经...

前言

我们今天讲一下如何整理自己的作品集，好多人呢辛辛苦苦工作一年了，完了之后发现没有什么拿的出手的东西，今天做一点需求，明天做一点需求，做的东西零零散散的，发现没有什么可提取出来的，最后到总结的时候抓头挠腮的。

更多 作品集 设计方法：

作品集有很多虚拟项目，为什么还是求职失败？ 最近不少同学在筹备作品集，而很多缺乏项目经验的毕业生，不知道怎么选择虚拟项目。

阅读文章 >

一、你对作品集了解多少 1. 作品集初衷

首先要明白做作品集是为了什么，你是为了总结你近 2 年的设计项目，还是为了找工作，我相信大部分人都是为了找工作才做作品集，一个好的作品集能够直观的体现设计师的个人能力，能够为设计师带来实质性的价值，而作品集也是为了帮助企业筛选出合适的人才，所以现在应该清楚了吧，作品集不单单是一堆项目堆砌起来就是一栋房子，而是要堆砌出能住、能看的房子。

2. 作品集而不是秀品集

为什么这么说呢，因为现在好多设计师的作品集说是为了面试，而半路做着做着就跑偏了，首先内容上在梳理项目的时候全部都放进去，也不管重要不重要，还有的是看别人放了一堆理论方法，自己也要放，也不管会不会用没用过，这些你虽然发到平台上大家会觉得你好厉害，但真到面试的时候面试官问你怎么办呢，能回答上一二三吗？

第二方面是视觉，好多的 UI 作品集里页面展示没几张，视觉装饰元素特别丰富，这样就导致你的核心内容浏览起来收到了干扰，还是那个问题，你发到平台大家觉得你的作品很炫酷，但面试官的感受我们还是要考虑一下，毕竟划水看作品集和工作需要看作品集侧重点不一样。

3. 瞄准才有可能打到靶心

这里的意思是可以有针对性的去作品集，因为每个公司要求的不一样，有的公司是社交类产品，有的是金融类，或者有的是 b 端 c 端这种要求，如果你的项目很丰富，类目很多，那在做作品集的时候就可以同一个模板换不同的设计项目，然后点对点的投递，这样你的面试几率大一些。

需要注意的是作品集里一定要写自己的个人介绍，而不是全是项目图片，一般在招聘平台投递作品集的时候对方都是些 HR，而不是专业的设计人员，他们筛选的流程是按照你的学历、经历这些点去筛，如果你的作品集里没放个人信息，hr 接到一个未知的作品集很容易 pass 掉。

二、作品集制作流程 其实非常简单，4 个步骤教你整理作品。

1. 收集

大家平常在工作中都会写日报周报和季报，或者一些 OKR，像这些其实都是我们可以利用的一个点，我们就可以把这些东西一点一点的去抽取出来，日报抽取出来组成周报，周报组成月报以此类推，从小到大提进行项目提取，当然这个前提是大家在工作中要有个复盘的习惯，否则在总结的时候发现还要临阵磨枪的去做作品集。

2. 归类

针对你抽取出来的这些项目，去进行一个归类，一般会分为 3 个维度，即产品基建、业务赋能、体验优化

产品基建：0-1 的项目，所有数据没有参照

业务赋能：对于一些功能上的优化，通过设计的手段帮助业务达成目标，例如通过优化页面背景，增加了用户停留时长

体验升级：完整度较高的一些项目，例如整个产品 1.0-2.0，或者核心页面优化升级

3. 筛选

我们对项目进行归类之后，就需要进行筛选，因为并不是所有的项目都适合放进作品集里，我们要把重要的筛选出来，那么什么是重要的，我们通过 4 个象限去评估，即重要度、完整度、产品价值、用户价值；

筛选完成后还需要我们进行加工一下设计，因为工作中的设计稿很大一部分都是带有产品或者其他人的思考在里面，这时候我们放作品集里可能展现不出我们的价值，所以建议还是稍微优化下后在进行包装。

4. 风格

作品集风格要提前确定，这个和我们做页面是一样的，如果后期在改是很麻烦的事情，例如风格定义沉稳专业亦或者是卡通可爱，当然建议还是跟你的核心项目风格保持一直，这样能够从头到尾贯穿下来，让面试官看着更加流畅

我们平常会做一些项目的时候，会进行一个小复盘，做一个项目复盘一个项目，但是每一个项目复盘的风格是不一样的，有些人呢，做作品集就会省事，他就把不同的项目的复盘去拼装起来，这样的话，你在整理成作品集的时候，你会发现每一个项目跳脱太大了，我看上面一个项目的时候，风格是这样的，我看下一个项目的时候，风格忽然说又变了，这样你看你整个作品集的时候是来回是比较跳的，所以说我们这一块一定要在做的时候要统一风格，好了，按照这四步自己的作品集基本有一个雏形了

三、制作过程注意事项 1. 内容排序

作品集中的项目排序也很重要，不同的项目顺序达到的结果不一样，我们可以从以下 2 个维度去拆。

① 招聘方要求

像开始说的，不同招聘方要求不同，我们投的时候避免海投而是针对性的去投，例如某公司要求具有社交项目经验的设计师，那刚好作品集里有社交项目，这时候就可以把该项目的排序放在第一位，这样不管是 hr 还是面试官看到你的作品集时都会多看几眼，毕竟有相关行业设计经验。

② 项目价值

我们如果不按照点对点的投递方式的话，就可以筛选自己的项目内容，按照价值的维度去排序，建议优先级是

项目价值：因为越重要越能说出价值，在面试时才能更流畅的阐述清楚，另一方面也能体现设计能力；

项目完整度：项目内容完整度较高，例如改版优化，0-1 构建等等这种能体现你的综合能力

2. 分类

我们在制作作品集时千万不要一股脑全部都放进去，一定要分清楚你要找什么工作，例如你要找 UI 或者交互岗，尽量别放一些运营设计相关的内容，或者是少放，放一些能体现你的设计技法的运营图，全放进作品集会让面试官觉得你做的东西不够精。

其次我们在分类的时候一定要把维度梳理清楚，例如 APP 设计、网站设计、自驱设计等等，让人觉得你是一个有规划的人，面试官看的时候也会轻松很多，直接就可以跳到他需要的设计去看，如果分不清面试官可能就会懒得去找，直接关掉，毕竟人家时间是宝贵的。

3. 包装

避免重复：现在很多的设计作品集不管是交互还是 UI，新手们都放了一堆样机，放样机没问题但是我们也要去筛选出合适的样机，选择样机的时候要选择那些重复度低、机型高的样机，我见过很多设计师的样机都是被人用过无数次了；

与时俱进：样机一定不要使用老旧的，现在手机都出到 14 了，样机还在用苹果 8 这种情况，这样的样机做出来的作品集质量也高不起来；

样机数量：我们在使用的时候一定要控制数量，我之前接到过作品集，一个项目里全是样机，甚至在设计说明部分也使用各种样机，样机是为了让页面更美观，而设计说明是阐述设计价值。

最新的样机打包：

新鲜出炉！iPhone 14官方展示样机素材打包下载 iPhone 14 刚刚发布，苹果官方就发布了展示样机素材，涵盖了iPhone 14、iPhone 14 Plus、iPhone 14 Pro、iPhone 14 Pro Max 四款新机型和新的配色，样机包括PSD和PNG两种格式，我们已经打包好了，想用的抓紧下载哟。

阅读文章 >

4. 尺寸

我们作品集尺寸选择也是尤为重要，切记不要像网站一样做成连体的展示尺寸，面试官看的时候基本都是放大后用键盘控制页数去看，如果我们单页高度很高就会严重影响观看体验，这里推荐尺寸 960*540、1920*1080、3840*2160

5. 导出

导出作品集建议两种方式一种 PDF 一种 PPT，PDF 是最常见的投递形式，不管在任何系统上都可以无障碍打开，而 PPT 是为了作品集中动效做准备，有的 设计师作品集 中可能放了 GIF，但是 PDF 不支持动画播放，所以有需求的设计师可以导出 2 份，当然也可以附上个人网站的链（一般内推渠道无法使用）。

欢迎关注作者微信公众号：「防脱发药水」

前言在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。有的时候流程和业务都不在话下，但是到了具体的页面设计就会捉襟见肘。如何引导用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。

前言

在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。

有的时候流程和业务都不在话下，但是到了具体的 页面设计 就会捉襟见肘。如何引导用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。

在一二线城市，相信很多人都去过宜家，有媒体统计过：宜家的迷宫式动线设计创造了 60%的冲动购物。宜家的动线设计将用户与各类商品区进行了有效的串联，在刻意设计的路线上，商家填满了各类家用商品，用户在从入口到出口的路上，使高冲动购物率成为了可能。从动线展示图中我们可以看到，一条“清晰明了”的曲线引导用户前进，同时还会提供一些捷径供用户穿梭，这像极了页面中的友好链接，帮助快速抵达目的地。

在整个宜家商场的设计中我们可以看到，这条清晰明了但实际不存在的线带给了商家巨大的收益，这个设计表达中，离不开实际存在的悬挂路标、小地图、地面标识、醒目的商品名称、价签和特意设计的商品堆积，当然还有一些消费者手册等。

这与我们的页面设计有着异曲同工之妙，将商场的商品陈设和页面中的信息组织放在一起我们可以发现，都在向消费者或用户传递一种建议和方向。所以，在页面设计我更愿意称之为页面框架或者页面信息设计，就是将该页面的内容信息通过一定的框架组织起来，然后呈现出来，实际上就是在与用户沟通交流，使得页面易学易用。

有一个成语是“明修栈道，暗渡陈仓”，而我们要做的是“暗修栈道，明渡陈仓”，所谓的栈道就是设计师所搭建的页面框架。经过 设计师 的合理分析和设计，使用看不见的设计手段和看得见的表现方式，给予用户明确的“提示”，帮助用户迅速的完成任务。

往期干货：

B端干货！4个章节帮你掌握筛选功能设计 面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。

阅读文章 >

如何进行页面框架设计 前面对页面框架设计有了一定的了解，那么怎样才能设计出好的页面，应该运用什么方法，采用什么流程。

在《信息架构-超越 Web 设计》一书中，作者将“如何做”阐述为：设计相应的信息颗粒度和组合方式，为用户创造他们所熟悉的环境。根据日常的工作经历，将“如何做”这个过程分成了以下四个步骤。

1. 了解业务

在着手进行整体页面设计之前，必要的设计工作就是进行切实的业务分析，了解我们要做什么，为了什么做。

在辛向阳的交互设计五要素中强调了， 交互设计 的对象是行为，他们之间的联系可以概括为：用户在某个场景下通过某种媒介产生行为，最后达成了他的目标。

那么如何让用户产生更有利于目标实现的行为，在设计之前先了解一下这些业务要素。

① 用户

简单来说就是使用我们平台的人。在一些 B 端产品中用户会分很多的角色，比如管理角色和普通角色，每个角色的诉求也是不一样的。

管理者：我希望能够看到团队中所有人的工作进度。 普通员工：我希望能快速的完成自己的任务。

这两种角色的诉求都是用户需求，分析阶段需要做好用户分层，在后面的目标拆解中就可以获得更明确的方向。

② 场景

对于用户提出的反馈或者意见，要切实考虑应用场景，辨别用户提供的是需求还是方案。

比如上个月用户提到一个需求，希望在某某页面中，复制粘贴就可以上传图片，某某平台就是这么做的。接到这个反馈，我的第一反应就是你在“教我做设计？”（开玩笑），首先他的这个方案我们目前是不具备的，然后这个设计确实很方便，但是目前团队没有时间做这个。找到特定的用户聊过之后，他表示当前只能点击或者拖拽上传，截图的文件需要本地保存后才能上传，很不方便。我向她提供了我们目前平台要实施的方案：1、可以直接在描述的富文本中编辑保存；2、可以在下个迭代将要实现的备注中直接粘贴上传附件。听了我的解释后，他表示这两个方案都可以，不需要页面的随意上传了。所以在真实的项目中，要找到真实的需求场景，而不是被用户牵着鼻子走。

具体如何去了解我们的用户场景，除了业务或者产品经理的阐述和解释，另外我们在前期进行竞品分析的时候也是不错的时机，因为在相似业务场景中，不同平台之间的表现方式不会出现太大差异，相当于设计思考前置，由方案倒推了需求。不过还是建议以具体业务具体分析为主，毕竟每个公司的工作方式是不同的。

③ 目标

对于设计师而言，目标就是这次设计的目的是什么、解决什么问题、创造什么价值，利用某些设计策略手段，对未来一段时间内所要达成的预期结果。设计的目标是要依附于业务，忠实于用户。一个平台的每次升级侧重点不一样，但是业务和体验是要同时考虑到的。

业务提出了今年我们要在去年的基础上，提升用户满意度 15%那么设计就应该去分析低满意度背后的原因是什么，用户为什么打了低分，这可能会涉及到任务流程、页面布局、组件使用等问题。当我们确定好影响满意度的因素之后，可以对其中一个因素提出设计目标：缩短用户完成某个任务的时间 20%，以此来聚焦用户操作流程的低效问题。

设计目标是在了解业务和用户之后所得到的一个共赢产物，也是将抽象的业务信息转化为具体的设计要素的过程。

④ 媒介

用户产生交互行为的最大媒介就是我们的页面，细化一下颗粒度，就会落到我们每一个页面组件上面。而组件并非是简单的平铺，而是要做的设计目标的指导下，选择合适的组件和表现方式，使用户看到页面时，快速的产生恰当的行为。

⑤ 行为

在界面中中用户主要的操作动作无外乎：点击、悬浮、滑动、拖拽，应考虑怎样的触发形式能使用户最低成本、最顺畅地完成行为。当然行为并不是孤立存在的，它需要多个动作和媒介，以及视觉行动等共同构成。而如何让用户产生恰当的行为，需要功能信息显性化的设计。

2. 组织信息

组织信息是页面设计的重要组成部分，我们看到的页面信息都是整齐的，每个整齐的背后又暗含了特殊的组织关系。对于业务分析或者需求文档所得到的业务信息需要设计师进行下一步的精加工，首先要了解当前所处页面的主要功能是什么，其次是明确功能信息并进行相应的分析，获得可以搬运罗列的功能块。《佐藤可士和的超整理术》对信息组织的策略有着非常专业的建议，作者从中提炼出以下处理方式。

① 明确信息

通过业务了解，明确当前页面将要进行哪些操作或者应该具备哪些功能点。

以上图所展示的简单需求为例。从当前页面中我们可以看到，这是一个任务管理的模块页面。在任务管理中，要支持用户创建三类任务，创建结束后还要支持信息的浏览、查找和编辑。而这些信息的来源就是上面我们分析的业务场景，这只是经过整理之后的。

② 罗列信息

明确了业务信息之后，相对应的我们要将我们页面布局所需要的核心元素剥离出来，比如创建数据，就可以剥离成一个创建按钮。

对于刚才的信息我们可以简单的罗列如下：创建 A、创建 B、创建 C、修改、删除、标题、筛选状态、关键词筛选、数据列表

③ 导入观点，确定关系

确定信息元素之间的关系是为了在页面中更好的划分和取用，方便在后面页面布局中给相关信息找到恰当的位置。

以刚才的需求为例，在罗列的过程中大概也能找到信息之间的关系。可以分为三类：操作、筛选和数据展示。

如果我们对个别的信息再进行赋予观点，还能出现新的关系。如果从业务使用频率进行观点导入，那么任务 A、B、C 的使用频率依次降低，最后可以确定的优先级关系就是创建 A>B>C。在任务页面中，创建类的操作优先级要明显高于编辑类，所以“创建”>“编辑”。操作和筛选作为数据产生和查找的工具，需要放在更显眼的位置以更容易被发现。

以上是对展示页面的简单信息进行的处理，对于一些表单页面我们也可以采用相应的策略。通过信息的属性维度可以大体分类，如果信息量很大，那么信息的层级关系就会展现出来，方便页面布局中采取相对应的设计方式。针对信息的关系，我们可以确定信息的先后顺序、页面位置以及颜色等样式的使用。

当然组织信息的最后产物还是虚拟的，我们输出的信息关系无外乎，比如信息组、信息架构、优先级等。组织信息是继了解业务之后的信息处理和清洗的步骤，也是业务场景以及设计目标的应用，可以为后面页面布局提供更有针对性的建议。另外，我们还可以了解一些常规的信息组织方式。

④ 常见的组织方式

常见的组织方式可以分为精确分类和模糊分类。

精确分类将信息分成定义明确和互斥的区域，采取的是客观态度。如果用户通过已知的明确信息，可以迅速的找到相应的位置，并且这种分类方式好维护。字母顺序、时间顺序、地理位置等都属于精确分类。

比如 App 中的城市选择，就是采取的字母分类，用户可以根据目标城市的首字母，迅速定位到相应的位置。

模糊分类将信息分成不精确定义的种类，采取的是主观态度。受困于人的主观性和分类标准的模糊性，因此很难设计和维护。但是在一些场景中，模糊分类却更重要和有用。主题、任务、受众、隐喻导向等属于模糊分类。上面操作按钮的分类就是采用了任务导向，将按钮分成了创建和编辑两个部分。

京东商城的左侧商品分类采用的就是模糊分类。

混合方案是在 B 端产品中常见的方式，能灵活的处理页面信息，应对不同用户和信息的场景差异。在 Ant design 的典型页面中，左侧菜单采用了模糊分类（主题），而表格信息采用的是精准分类（时间倒序）。

3. 组件选择

组件的选择是信息可视化的第一步，是为信息寻找相应容器载体的过程。

① 导航

导航存在的作用是任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式。常见的导航可分为：

全局导航：属于常驻导航，基本平台的每个页面会存在，常见的组件形式有侧边、顶部、弹出式、下拉等。

页内导航：根据当前业务场景所配置的导航，常见的组件有页头、Tree 树型控件、锚点、回到顶部、走马灯等。

返回导航：常见的组件有面包屑、返回按钮等。

友好导航：不在该模块的信息架构规范内，用户可以通过点击跳到其他页面查看，比如操作日志中的超链接。

其他导航：常见的有步骤条、分页器等。

② 标签

标签通常是向用户显示组织系统和导航系统最明显的方式，例如全站导航系统相匹配的文字标签：主页、搜索等。

标签分文字标签和图形标签：文字标签涉及到页面中所有功能的文案命名，例如标题、导航、按钮、链接、索引词、提示等，这是用户理解信息最直接的方式，所以文字标签的选择要常见并且易于理解，选择行业中的通用用法。比如在协同工具的领域，一些最主要业务单元的命名，无外乎项目、需求、任务、缺陷、迭代等，即使是新出现的平台，也会默认去遵循这个行业命名。因为在业务的发展过程中，这些标签已经成为了协同领域中相互共识的点，如果为了强差异化，反而会增加用户教育的成本，降低平台的使用效率。

图形标签在页面设计中，作为文字标签的补充，会更形象的传达信息。主要应用的地方的是图标。图形的使用也是要易于理解，不要让形式凌驾于功能之上，不能给用户带来思考成本。在 Iconfont 上搜索“返回”，检索的结果都是相似的箭头，即使有设计师会做一些样式调整，但是都离不开箭头这个符号，因为这已经形成了深刻的用户心智。

还有图文类的软件，我们可以看到他们上面展示的文字和标签都是相似的，大家都在做一些微调，但是都在遵循最初 Office 给用户形成的符号认知。所以针对新的平台产品，除了调研用户对标签的使用习惯之外，还可以参考竞品的使用现状，这属于行业的隐形共享资源。

③ 搜索

搜索系统是用户快速寻找信息的工具，搜索系统的使用要根据页面信息的内容量和场景要求进行配置选择。

常见的组件可以分为：

输入类筛选：输入类筛选需要用户输入一定的文本关键词，筛选出对应的数据；

选择类筛选：选择器类筛选可以是单选或者多选，用户点击选择待选项即可；

平铺类筛选：平铺类筛选是将所有的待选项铺出来，方便用户直观选择；

分页筛选：分页 Tabs 类似于平铺类筛选，都是将待选项平铺出来；

高级筛选：高级筛选的判断关系较多，一般会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、等于、不等于等）、筛选值和添加。具体的筛选类型的特点和使用场景，已经在上次的文章中有所阐述，详情可点击查看：

B端干货！4个章节帮你掌握筛选功能设计 面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。

阅读文章 >

以上是阐述了对页面结构设计影响较大的三类组件，像按钮、选择器等颗粒度的组件，可以到大厂的设计网站查看详细的使用说明，这里不再描述。

4. 页面布局

页面布局是页面设计的最后一步，是功能信息布局的关键，是为用户搭建易于发现的流程节点。

① 选载体

首先根据当前的业务的场景特点，先选择信息的承载方式。

目前有三种方式：页面、对话框、抽屉

页面：信息承载量最大，适合信息浏览、数量级较大的创建和展示；

对话框：信息承载量小于页面，流程中断性较强，适合轻量级的信息创建、处理和展示；

抽屉：信息承载量大于对话框，小于页面，流程中断性较弱。

在具体的使用过程中：

如果信息量较大，有组合方式比较复杂的信息创建和展示，考虑使用页面； 如果信息与触发页面有较强的关联性，考虑使用抽屉； 如果信息与触发页面有较弱的关联性，需要聚焦当前任务，考虑使用对话框或页面。 ② 分区域

在确定好使用的承载方式之后，要对基本的大块信息区域进行划分。首页要确定的是导航的位置，导航代表了用户当前所处的位置和能去的位置。因此要放在非常显眼且稳定的地方。

以一开始展示的需求页面为例，根据 F 型视觉动线理论顶部和左侧用户关注点较多和稳定性较强的地方。在大厂的典型页面中我们也可以看到相应的实践。顶部和左侧相比，扩展性较弱，为方便后面业务扩展，将导航区域选在了左侧。其次是操作、筛选和数据展示区，根据前面组织信息的结论，操作和筛选要放在比数据展示更容易发现的固定位置，根据 F 模型，放在信息展示区的顶部。这样基本的页面区域就划分好了：导航区、操作筛选区、数据展示区。

按照本文的阐述，选载体和分区域略显啰嗦，在实际的工作中，往往导航等框架组件的选择与分区域同时进行，所以，我们一般可以从以下方面迅速开始：

如果是老平台，只是做部分功能扩展，需要按照原来的页面框架设计进行新的功能设计，保持界面的一致性。 如果是新的页面，可以参考竞品的页面，因为他们的处理方式已经经过市场和用户的检验，具有一定的可靠性。 参考各大厂规范的典型页面，这些页面是他们内部设计师经过多次讨论才上线对外，应用场景上具有一定的广泛性和通用性，并且用户对这类页面可能会更熟悉。 3. 调布局

在划分好区域之后，需要对页面中的组件布局进行调整。比如前面的我们所确定的按钮关系，在页面中，为创建类和编辑类的按钮分别选择了填充和线框按钮，当前按钮数量太多，页面空间受限，可以对按钮进行组织收起，根据使用频率高低进行相应的排序。同时筛选和操作是两类信息且优先级有差异，可以区分更明显一些，同时页面中的右侧有视觉空白，可以将筛选类组件右对齐。

在 B 端产品中常见的表单页面中，根据 Ant design 的复杂度模型，从页面信息的复杂度和关联性维度上，对相应的组合容器进行划分，方便设计师准确匹配，快速呈现出用户更容易理解和查找的内容模块布局。其中步骤分组一般用在创建页面，Tab 分组一般用在展示页面。

在具体的组件布局中，还需要考虑组件的对齐方式、尺寸、位置等，这些都需要根据当前的业务特点、页面空间大小、浏览效率等进行实际判断决策。如果说页面空间有限，但是业务字段又非常多，在很多的后台软件中，我们会发现做左对齐的方式比较常见，因为在一屏内它的信息承载量是最大的，屏效比最高。

4. 建议

① 设计理论的应用

设计理论和原则是前人在实践的基础上总结出来的规律和方法，虽然设计趋势会发生变化，但是信息的传递原理短期内是相对稳定的。通过理论的应用，引导用户关注页面架构的焦点，就可以达到信息传递的目的。

1）视觉动线理论

F 型视觉动线模型是尼尔森于 2006 年提出的，模型中指出，用户常用习惯方式是：扫描。在信息浏览过程中，遵循最省力的路径来浏览内容，直至找到想要的信息，因此前几行左侧内容看得多，而右侧内容和页面靠后部分便看得少，通常情况下便形成大体的 F 型。

Z 型视觉动线模型也是尼尔森对用户的浏览习惯进行研究后得出的结论，一般会用在门户类、文字类网站，Z 布局应用很简单，将重要的信息元素放到 Z 形上面，用户扫描过程中会沿着这条路径获取信息。但是 Z 形也有弱点，用户很容易会受其他显眼的元素吸引，所以在布局的时候，要控制好这些元素。

2）交互设计四策略

删除

将产品中可有可无或者没有使用频率的功能删除，使用户能聚焦在核心流程上，减少信息干扰和产品维护成本。在具体的设计中，还包括不必要的装饰元素，比如分割，空间分割和线分割保留一种方式即可，叠加使用反而耗费产品的简洁感，给用户增加视觉负担。

分类

面对种类和数量众多的功能，为了能让用户更迅速的定位到目的位置，可以将信息分类组织，使页面更清晰。刚才上面的操作关系就是分类的一种，面对一一摆开的按钮，用户难免会有选择延迟，快速定位后可以有效加快选择。还有产品中的一些状态、标签、颜色等，合理的分类组织，设定边界，再次复用可保持产品的一致性。

隐藏

将高频的功能和信息适时适地的展示，其他的则进行合理隐藏，也是为了页面聚焦，减少视觉负担，保持页面简洁。像表格中的操作按钮，一般情况下都会将用户将会使用的两个高频按钮放在外面，其他的放在更多中；另外，按钮的使用还有一定的引导性，比如从平台角度讲，希望用户的数据越来越多，所以不是很希望用户删除或注销，所以这类按钮都会放在架构设计的末端。

转移

一般情况下是将复杂进行转移，将用户的重复或复杂操作，交给后台处理，增加任务处理效率。

3）格式塔心理学

格式塔心理学源于视知觉，通过对视觉元素形式、图形的研究，帮助人们产生某种视觉倾向，从而快速的辨别。

在这里主要说一下这四个原则：

接近性原则：在人们的视觉感受中，会习惯于将彼此接近的元素看成一个整体。元素之间的距离越小，说明彼此的关系越近，当然，这个原则也是反过来用，如果想让人感受到两个元素不是一个整体或类别，那么把他们的距离拉大即可。

购物 APP 的卡片浏览模式，图片下的标签与图片的距离差异，可以让人轻易的区分出，图片和标签的整体关系。我们在划分区域的时候，一般内容区中导航区、数据展示和操作可以通过距离来划分，使页面归类感更强，提高信息获取效率。

相似性原则：人们的视觉判断中，可以轻易的将相似的元素归为一类，面对数量众多的元素，可以根据样式分成若干组合。比如形状、大小、颜色、方向等都是视觉判断的维度。与亲密性有一定的相似，但是亲密性强调的是位置，相似性强调的是内容。

在美团 APP 的首页中，根据图形的样式，我们可以清晰的分辨出首页的金刚区和内容卡片区。

闭合性原则：人们的视觉会主动将不完整的图形补全，形成一个完整的整体。人类的感知是完整的、闭合的。

IBM 的 logo 是闭合原则应用的经典案例，虽然中间有条形的切割，但是不影响人们识别出这是字母 IBM。

主体与背景原则：当两个元素重叠在一起，顶部偏小或者明显的元素往往会被人们认为是主体，会将底部元素当作背景。

比如对话框的使用，利用前后重叠的空间感，突出对话框的主体地位，从而清晰的向用户传递信息。

2. 遵循用户习惯

在产品调研前期，我们需要对用户习惯有全面的认识，比如当前用户日常常用的软件是什么，基本的工作流程，具有什么业务习惯。这些采集信息将会在具体的页面布局中给我们带来非常大的指导作用。如果说设计之初对用户是未知的或者刻意差异化，那么用户使用和理解平台有可能会带来额外的成本。

遵循用户习惯，简单来说，就是让用户一眼就能知道平台应该怎么用，不需要思考就能理解平台所提供图形和语言。当然，对于一些复杂的流程，还需要建立恰当的帮助系统。

这是一些通用的流程和模版参考，在实际设计过程中，可能会反复的斟酌和考虑，对前面的一些内容再做出调整，这是无法避免的，比如有些设计师会在布局中选择组件，这些都是根据个人情况快速实践的，并没有标准答案。以上是作者自己根据日常的工作经历复盘整理，如果有其他的补充分享，欢迎一起交流。

参考：

https://ant.design/docs/spec/form-page-cn https://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeaw https://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ

前言在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。有的时候流程和业务都不在话下，但是到了具体的页面设计就会捉襟见肘。如何引导用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。

前言

在日常的设计工作中，拿到产品给的原型或者需求清单，分析完用户和任务流程后不知道该如何下手，或者不知道如何系统的开展设计工作，再或者不知道如何做出符合用户和业务目标的设计方案。

有的时候流程和业务都不在话下，但是到了具体的 页面设计 就会捉襟见肘。如何引导用户在页面中迅速的完成任务流程，我们看一下是不是有套路可走。

在一二线城市，相信很多人都去过宜家，有媒体统计过：宜家的迷宫式动线设计创造了 60%的冲动购物。宜家的动线设计将用户与各类商品区进行了有效的串联，在刻意设计的路线上，商家填满了各类家用商品，用户在从入口到出口的路上，使高冲动购物率成为了可能。从动线展示图中我们可以看到，一条“清晰明了”的曲线引导用户前进，同时还会提供一些捷径供用户穿梭，这像极了页面中的友好链接，帮助快速抵达目的地。

在整个宜家商场的设计中我们可以看到，这条清晰明了但实际不存在的线带给了商家巨大的收益，这个设计表达中，离不开实际存在的悬挂路标、小地图、地面标识、醒目的商品名称、价签和特意设计的商品堆积，当然还有一些消费者手册等。

这与我们的页面设计有着异曲同工之妙，将商场的商品陈设和页面中的信息组织放在一起我们可以发现，都在向消费者或用户传递一种建议和方向。所以，在页面设计我更愿意称之为页面框架或者页面信息设计，就是将该页面的内容信息通过一定的框架组织起来，然后呈现出来，实际上就是在与用户沟通交流，使得页面易学易用。

有一个成语是“明修栈道，暗渡陈仓”，而我们要做的是“暗修栈道，明渡陈仓”，所谓的栈道就是设计师所搭建的页面框架。经过 设计师 的合理分析和设计，使用看不见的设计手段和看得见的表现方式，给予用户明确的“提示”，帮助用户迅速的完成任务。

往期干货：

B端干货！4个章节帮你掌握筛选功能设计 面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。

阅读文章 >

如何进行页面框架设计 前面对页面框架设计有了一定的了解，那么怎样才能设计出好的页面，应该运用什么方法，采用什么流程。

在《信息架构-超越 Web 设计》一书中，作者将“如何做”阐述为：设计相应的信息颗粒度和组合方式，为用户创造他们所熟悉的环境。根据日常的工作经历，将“如何做”这个过程分成了以下四个步骤。

1. 了解业务

在着手进行整体页面设计之前，必要的设计工作就是进行切实的业务分析，了解我们要做什么，为了什么做。

在辛向阳的交互设计五要素中强调了， 交互设计 的对象是行为，他们之间的联系可以概括为：用户在某个场景下通过某种媒介产生行为，最后达成了他的目标。

那么如何让用户产生更有利于目标实现的行为，在设计之前先了解一下这些业务要素。

① 用户

简单来说就是使用我们平台的人。在一些 B 端产品中用户会分很多的角色，比如管理角色和普通角色，每个角色的诉求也是不一样的。

管理者：我希望能够看到团队中所有人的工作进度。 普通员工：我希望能快速的完成自己的任务。

这两种角色的诉求都是用户需求，分析阶段需要做好用户分层，在后面的目标拆解中就可以获得更明确的方向。

② 场景

对于用户提出的反馈或者意见，要切实考虑应用场景，辨别用户提供的是需求还是方案。

比如上个月用户提到一个需求，希望在某某页面中，复制粘贴就可以上传图片，某某平台就是这么做的。接到这个反馈，我的第一反应就是你在“教我做设计？”（开玩笑），首先他的这个方案我们目前是不具备的，然后这个设计确实很方便，但是目前团队没有时间做这个。找到特定的用户聊过之后，他表示当前只能点击或者拖拽上传，截图的文件需要本地保存后才能上传，很不方便。我向她提供了我们目前平台要实施的方案：1、可以直接在描述的富文本中编辑保存；2、可以在下个迭代将要实现的备注中直接粘贴上传附件。听了我的解释后，他表示这两个方案都可以，不需要页面的随意上传了。所以在真实的项目中，要找到真实的需求场景，而不是被用户牵着鼻子走。

具体如何去了解我们的用户场景，除了业务或者产品经理的阐述和解释，另外我们在前期进行竞品分析的时候也是不错的时机，因为在相似业务场景中，不同平台之间的表现方式不会出现太大差异，相当于设计思考前置，由方案倒推了需求。不过还是建议以具体业务具体分析为主，毕竟每个公司的工作方式是不同的。

③ 目标

对于设计师而言，目标就是这次设计的目的是什么、解决什么问题、创造什么价值，利用某些设计策略手段，对未来一段时间内所要达成的预期结果。设计的目标是要依附于业务，忠实于用户。一个平台的每次升级侧重点不一样，但是业务和体验是要同时考虑到的。

业务提出了今年我们要在去年的基础上，提升用户满意度 15%那么设计就应该去分析低满意度背后的原因是什么，用户为什么打了低分，这可能会涉及到任务流程、页面布局、组件使用等问题。当我们确定好影响满意度的因素之后，可以对其中一个因素提出设计目标：缩短用户完成某个任务的时间 20%，以此来聚焦用户操作流程的低效问题。

设计目标是在了解业务和用户之后所得到的一个共赢产物，也是将抽象的业务信息转化为具体的设计要素的过程。

④ 媒介

用户产生交互行为的最大媒介就是我们的页面，细化一下颗粒度，就会落到我们每一个页面组件上面。而组件并非是简单的平铺，而是要做的设计目标的指导下，选择合适的组件和表现方式，使用户看到页面时，快速的产生恰当的行为。

⑤ 行为

在界面中中用户主要的操作动作无外乎：点击、悬浮、滑动、拖拽，应考虑怎样的触发形式能使用户最低成本、最顺畅地完成行为。当然行为并不是孤立存在的，它需要多个动作和媒介，以及视觉行动等共同构成。而如何让用户产生恰当的行为，需要功能信息显性化的设计。

2. 组织信息

组织信息是页面设计的重要组成部分，我们看到的页面信息都是整齐的，每个整齐的背后又暗含了特殊的组织关系。对于业务分析或者需求文档所得到的业务信息需要设计师进行下一步的精加工，首先要了解当前所处页面的主要功能是什么，其次是明确功能信息并进行相应的分析，获得可以搬运罗列的功能块。《佐藤可士和的超整理术》对信息组织的策略有着非常专业的建议，作者从中提炼出以下处理方式。

① 明确信息

通过业务了解，明确当前页面将要进行哪些操作或者应该具备哪些功能点。

以上图所展示的简单需求为例。从当前页面中我们可以看到，这是一个任务管理的模块页面。在任务管理中，要支持用户创建三类任务，创建结束后还要支持信息的浏览、查找和编辑。而这些信息的来源就是上面我们分析的业务场景，这只是经过整理之后的。

② 罗列信息

明确了业务信息之后，相对应的我们要将我们页面布局所需要的核心元素剥离出来，比如创建数据，就可以剥离成一个创建按钮。

对于刚才的信息我们可以简单的罗列如下：创建 A、创建 B、创建 C、修改、删除、标题、筛选状态、关键词筛选、数据列表

③ 导入观点，确定关系

确定信息元素之间的关系是为了在页面中更好的划分和取用，方便在后面页面布局中给相关信息找到恰当的位置。

以刚才的需求为例，在罗列的过程中大概也能找到信息之间的关系。可以分为三类：操作、筛选和数据展示。

如果我们对个别的信息再进行赋予观点，还能出现新的关系。如果从业务使用频率进行观点导入，那么任务 A、B、C 的使用频率依次降低，最后可以确定的优先级关系就是创建 A>B>C。在任务页面中，创建类的操作优先级要明显高于编辑类，所以“创建”>“编辑”。操作和筛选作为数据产生和查找的工具，需要放在更显眼的位置以更容易被发现。

以上是对展示页面的简单信息进行的处理，对于一些表单页面我们也可以采用相应的策略。通过信息的属性维度可以大体分类，如果信息量很大，那么信息的层级关系就会展现出来，方便页面布局中采取相对应的设计方式。针对信息的关系，我们可以确定信息的先后顺序、页面位置以及颜色等样式的使用。

当然组织信息的最后产物还是虚拟的，我们输出的信息关系无外乎，比如信息组、信息架构、优先级等。组织信息是继了解业务之后的信息处理和清洗的步骤，也是业务场景以及设计目标的应用，可以为后面页面布局提供更有针对性的建议。另外，我们还可以了解一些常规的信息组织方式。

④ 常见的组织方式

常见的组织方式可以分为精确分类和模糊分类。

精确分类将信息分成定义明确和互斥的区域，采取的是客观态度。如果用户通过已知的明确信息，可以迅速的找到相应的位置，并且这种分类方式好维护。字母顺序、时间顺序、地理位置等都属于精确分类。

比如 App 中的城市选择，就是采取的字母分类，用户可以根据目标城市的首字母，迅速定位到相应的位置。

模糊分类将信息分成不精确定义的种类，采取的是主观态度。受困于人的主观性和分类标准的模糊性，因此很难设计和维护。但是在一些场景中，模糊分类却更重要和有用。主题、任务、受众、隐喻导向等属于模糊分类。上面操作按钮的分类就是采用了任务导向，将按钮分成了创建和编辑两个部分。

京东商城的左侧商品分类采用的就是模糊分类。

混合方案是在 B 端产品中常见的方式，能灵活的处理页面信息，应对不同用户和信息的场景差异。在 Ant design 的典型页面中，左侧菜单采用了模糊分类（主题），而表格信息采用的是精准分类（时间倒序）。

3. 组件选择

组件的选择是信息可视化的第一步，是为信息寻找相应容器载体的过程。

① 导航

导航存在的作用是任何告知用户他在哪里，他能去什么地方以及如何到达那里的方式。常见的导航可分为：

全局导航：属于常驻导航，基本平台的每个页面会存在，常见的组件形式有侧边、顶部、弹出式、下拉等。

页内导航：根据当前业务场景所配置的导航，常见的组件有页头、Tree 树型控件、锚点、回到顶部、走马灯等。

返回导航：常见的组件有面包屑、返回按钮等。

友好导航：不在该模块的信息架构规范内，用户可以通过点击跳到其他页面查看，比如操作日志中的超链接。

其他导航：常见的有步骤条、分页器等。

② 标签

标签通常是向用户显示组织系统和导航系统最明显的方式，例如全站导航系统相匹配的文字标签：主页、搜索等。

标签分文字标签和图形标签：文字标签涉及到页面中所有功能的文案命名，例如标题、导航、按钮、链接、索引词、提示等，这是用户理解信息最直接的方式，所以文字标签的选择要常见并且易于理解，选择行业中的通用用法。比如在协同工具的领域，一些最主要业务单元的命名，无外乎项目、需求、任务、缺陷、迭代等，即使是新出现的平台，也会默认去遵循这个行业命名。因为在业务的发展过程中，这些标签已经成为了协同领域中相互共识的点，如果为了强差异化，反而会增加用户教育的成本，降低平台的使用效率。

图形标签在页面设计中，作为文字标签的补充，会更形象的传达信息。主要应用的地方的是图标。图形的使用也是要易于理解，不要让形式凌驾于功能之上，不能给用户带来思考成本。在 Iconfont 上搜索“返回”，检索的结果都是相似的箭头，即使有设计师会做一些样式调整，但是都离不开箭头这个符号，因为这已经形成了深刻的用户心智。

还有图文类的软件，我们可以看到他们上面展示的文字和标签都是相似的，大家都在做一些微调，但是都在遵循最初 Office 给用户形成的符号认知。所以针对新的平台产品，除了调研用户对标签的使用习惯之外，还可以参考竞品的使用现状，这属于行业的隐形共享资源。

③ 搜索

搜索系统是用户快速寻找信息的工具，搜索系统的使用要根据页面信息的内容量和场景要求进行配置选择。

常见的组件可以分为：

输入类筛选：输入类筛选需要用户输入一定的文本关键词，筛选出对应的数据；

选择类筛选：选择器类筛选可以是单选或者多选，用户点击选择待选项即可；

平铺类筛选：平铺类筛选是将所有的待选项铺出来，方便用户直观选择；

分页筛选：分页 Tabs 类似于平铺类筛选，都是将待选项平铺出来；

高级筛选：高级筛选的判断关系较多，一般会包括筛选条件、筛选关系（且、或）、筛选类型（包含、不包含、等于、不等于等）、筛选值和添加。具体的筛选类型的特点和使用场景，已经在上次的文章中有所阐述，详情可点击查看：

B端干货！4个章节帮你掌握筛选功能设计 面对 B 端庞大的平台系统和业务流程，筛选扮演了基础且非常重要的角色。

阅读文章 >

以上是阐述了对页面结构设计影响较大的三类组件，像按钮、选择器等颗粒度的组件，可以到大厂的设计网站查看详细的使用说明，这里不再描述。

4. 页面布局

页面布局是页面设计的最后一步，是功能信息布局的关键，是为用户搭建易于发现的流程节点。

① 选载体

首先根据当前的业务的场景特点，先选择信息的承载方式。

目前有三种方式：页面、对话框、抽屉

页面：信息承载量最大，适合信息浏览、数量级较大的创建和展示；

对话框：信息承载量小于页面，流程中断性较强，适合轻量级的信息创建、处理和展示；

抽屉：信息承载量大于对话框，小于页面，流程中断性较弱。

在具体的使用过程中：

如果信息量较大，有组合方式比较复杂的信息创建和展示，考虑使用页面； 如果信息与触发页面有较强的关联性，考虑使用抽屉； 如果信息与触发页面有较弱的关联性，需要聚焦当前任务，考虑使用对话框或页面。 ② 分区域

在确定好使用的承载方式之后，要对基本的大块信息区域进行划分。首页要确定的是导航的位置，导航代表了用户当前所处的位置和能去的位置。因此要放在非常显眼且稳定的地方。

以一开始展示的需求页面为例，根据 F 型视觉动线理论顶部和左侧用户关注点较多和稳定性较强的地方。在大厂的典型页面中我们也可以看到相应的实践。顶部和左侧相比，扩展性较弱，为方便后面业务扩展，将导航区域选在了左侧。其次是操作、筛选和数据展示区，根据前面组织信息的结论，操作和筛选要放在比数据展示更容易发现的固定位置，根据 F 模型，放在信息展示区的顶部。这样基本的页面区域就划分好了：导航区、操作筛选区、数据展示区。

按照本文的阐述，选载体和分区域略显啰嗦，在实际的工作中，往往导航等框架组件的选择与分区域同时进行，所以，我们一般可以从以下方面迅速开始：

如果是老平台，只是做部分功能扩展，需要按照原来的页面框架设计进行新的功能设计，保持界面的一致性。 如果是新的页面，可以参考竞品的页面，因为他们的处理方式已经经过市场和用户的检验，具有一定的可靠性。 参考各大厂规范的典型页面，这些页面是他们内部设计师经过多次讨论才上线对外，应用场景上具有一定的广泛性和通用性，并且用户对这类页面可能会更熟悉。 3. 调布局

在划分好区域之后，需要对页面中的组件布局进行调整。比如前面的我们所确定的按钮关系，在页面中，为创建类和编辑类的按钮分别选择了填充和线框按钮，当前按钮数量太多，页面空间受限，可以对按钮进行组织收起，根据使用频率高低进行相应的排序。同时筛选和操作是两类信息且优先级有差异，可以区分更明显一些，同时页面中的右侧有视觉空白，可以将筛选类组件右对齐。

在 B 端产品中常见的表单页面中，根据 Ant design 的复杂度模型，从页面信息的复杂度和关联性维度上，对相应的组合容器进行划分，方便设计师准确匹配，快速呈现出用户更容易理解和查找的内容模块布局。其中步骤分组一般用在创建页面，Tab 分组一般用在展示页面。

在具体的组件布局中，还需要考虑组件的对齐方式、尺寸、位置等，这些都需要根据当前的业务特点、页面空间大小、浏览效率等进行实际判断决策。如果说页面空间有限，但是业务字段又非常多，在很多的后台软件中，我们会发现做左对齐的方式比较常见，因为在一屏内它的信息承载量是最大的，屏效比最高。

4. 建议

① 设计理论的应用

设计理论和原则是前人在实践的基础上总结出来的规律和方法，虽然设计趋势会发生变化，但是信息的传递原理短期内是相对稳定的。通过理论的应用，引导用户关注页面架构的焦点，就可以达到信息传递的目的。

1）视觉动线理论

F 型视觉动线模型是尼尔森于 2006 年提出的，模型中指出，用户常用习惯方式是：扫描。在信息浏览过程中，遵循最省力的路径来浏览内容，直至找到想要的信息，因此前几行左侧内容看得多，而右侧内容和页面靠后部分便看得少，通常情况下便形成大体的 F 型。

Z 型视觉动线模型也是尼尔森对用户的浏览习惯进行研究后得出的结论，一般会用在门户类、文字类网站，Z 布局应用很简单，将重要的信息元素放到 Z 形上面，用户扫描过程中会沿着这条路径获取信息。但是 Z 形也有弱点，用户很容易会受其他显眼的元素吸引，所以在布局的时候，要控制好这些元素。

2）交互设计四策略

删除

将产品中可有可无或者没有使用频率的功能删除，使用户能聚焦在核心流程上，减少信息干扰和产品维护成本。在具体的设计中，还包括不必要的装饰元素，比如分割，空间分割和线分割保留一种方式即可，叠加使用反而耗费产品的简洁感，给用户增加视觉负担。

分类

面对种类和数量众多的功能，为了能让用户更迅速的定位到目的位置，可以将信息分类组织，使页面更清晰。刚才上面的操作关系就是分类的一种，面对一一摆开的按钮，用户难免会有选择延迟，快速定位后可以有效加快选择。还有产品中的一些状态、标签、颜色等，合理的分类组织，设定边界，再次复用可保持产品的一致性。

隐藏

将高频的功能和信息适时适地的展示，其他的则进行合理隐藏，也是为了页面聚焦，减少视觉负担，保持页面简洁。像表格中的操作按钮，一般情况下都会将用户将会使用的两个高频按钮放在外面，其他的放在更多中；另外，按钮的使用还有一定的引导性，比如从平台角度讲，希望用户的数据越来越多，所以不是很希望用户删除或注销，所以这类按钮都会放在架构设计的末端。

转移

一般情况下是将复杂进行转移，将用户的重复或复杂操作，交给后台处理，增加任务处理效率。

3）格式塔心理学

格式塔心理学源于视知觉，通过对视觉元素形式、图形的研究，帮助人们产生某种视觉倾向，从而快速的辨别。

在这里主要说一下这四个原则：

接近性原则：在人们的视觉感受中，会习惯于将彼此接近的元素看成一个整体。元素之间的距离越小，说明彼此的关系越近，当然，这个原则也是反过来用，如果想让人感受到两个元素不是一个整体或类别，那么把他们的距离拉大即可。

购物 APP 的卡片浏览模式，图片下的标签与图片的距离差异，可以让人轻易的区分出，图片和标签的整体关系。我们在划分区域的时候，一般内容区中导航区、数据展示和操作可以通过距离来划分，使页面归类感更强，提高信息获取效率。

相似性原则：人们的视觉判断中，可以轻易的将相似的元素归为一类，面对数量众多的元素，可以根据样式分成若干组合。比如形状、大小、颜色、方向等都是视觉判断的维度。与亲密性有一定的相似，但是亲密性强调的是位置，相似性强调的是内容。

在美团 APP 的首页中，根据图形的样式，我们可以清晰的分辨出首页的金刚区和内容卡片区。

闭合性原则：人们的视觉会主动将不完整的图形补全，形成一个完整的整体。人类的感知是完整的、闭合的。

IBM 的 logo 是闭合原则应用的经典案例，虽然中间有条形的切割，但是不影响人们识别出这是字母 IBM。

主体与背景原则：当两个元素重叠在一起，顶部偏小或者明显的元素往往会被人们认为是主体，会将底部元素当作背景。

比如对话框的使用，利用前后重叠的空间感，突出对话框的主体地位，从而清晰的向用户传递信息。

2. 遵循用户习惯

在产品调研前期，我们需要对用户习惯有全面的认识，比如当前用户日常常用的软件是什么，基本的工作流程，具有什么业务习惯。这些采集信息将会在具体的页面布局中给我们带来非常大的指导作用。如果说设计之初对用户是未知的或者刻意差异化，那么用户使用和理解平台有可能会带来额外的成本。

遵循用户习惯，简单来说，就是让用户一眼就能知道平台应该怎么用，不需要思考就能理解平台所提供图形和语言。当然，对于一些复杂的流程，还需要建立恰当的帮助系统。

这是一些通用的流程和模版参考，在实际设计过程中，可能会反复的斟酌和考虑，对前面的一些内容再做出调整，这是无法避免的，比如有些设计师会在布局中选择组件，这些都是根据个人情况快速实践的，并没有标准答案。以上是作者自己根据日常的工作经历复盘整理，如果有其他的补充分享，欢迎一起交流。

参考：

https://ant.design/docs/spec/form-page-cn https://mp.weixin.qq.com/s/HTvqG637kIHC64MoLEUeaw https://mp.weixin.qq.com/s/hlrYx-zlyutdmnYaQ4l_cQ

前言我们今天讲一下如何整理自己的作品集，好多人呢辛辛苦苦工作一年了，完了之后发现没有什么拿的出手的东西，今天做一点需求，明天做一点需求，做的东西零零散散的，发现没有什么可提取出来的，最后到总结的时候抓头挠腮的。更多作品集设计方法：作品集有很多虚拟项目，为什么还是求职失败？最近不少同学在筹备作品集，而很多缺乏项目经...

前言

我们今天讲一下如何整理自己的作品集，好多人呢辛辛苦苦工作一年了，完了之后发现没有什么拿的出手的东西，今天做一点需求，明天做一点需求，做的东西零零散散的，发现没有什么可提取出来的，最后到总结的时候抓头挠腮的。

更多 作品集 设计方法：

作品集有很多虚拟项目，为什么还是求职失败？ 最近不少同学在筹备作品集，而很多缺乏项目经验的毕业生，不知道怎么选择虚拟项目。

阅读文章 >

一、你对作品集了解多少 1. 作品集初衷

首先要明白做作品集是为了什么，你是为了总结你近 2 年的设计项目，还是为了找工作，我相信大部分人都是为了找工作才做作品集，一个好的作品集能够直观的体现设计师的个人能力，能够为设计师带来实质性的价值，而作品集也是为了帮助企业筛选出合适的人才，所以现在应该清楚了吧，作品集不单单是一堆项目堆砌起来就是一栋房子，而是要堆砌出能住、能看的房子。

2. 作品集而不是秀品集

为什么这么说呢，因为现在好多设计师的作品集说是为了面试，而半路做着做着就跑偏了，首先内容上在梳理项目的时候全部都放进去，也不管重要不重要，还有的是看别人放了一堆理论方法，自己也要放，也不管会不会用没用过，这些你虽然发到平台上大家会觉得你好厉害，但真到面试的时候面试官问你怎么办呢，能回答上一二三吗？

第二方面是视觉，好多的 UI 作品集里页面展示没几张，视觉装饰元素特别丰富，这样就导致你的核心内容浏览起来收到了干扰，还是那个问题，你发到平台大家觉得你的作品很炫酷，但面试官的感受我们还是要考虑一下，毕竟划水看作品集和工作需要看作品集侧重点不一样。

3. 瞄准才有可能打到靶心

这里的意思是可以有针对性的去作品集，因为每个公司要求的不一样，有的公司是社交类产品，有的是金融类，或者有的是 b 端 c 端这种要求，如果你的项目很丰富，类目很多，那在做作品集的时候就可以同一个模板换不同的设计项目，然后点对点的投递，这样你的面试几率大一些。

需要注意的是作品集里一定要写自己的个人介绍，而不是全是项目图片，一般在招聘平台投递作品集的时候对方都是些 HR，而不是专业的设计人员，他们筛选的流程是按照你的学历、经历这些点去筛，如果你的作品集里没放个人信息，hr 接到一个未知的作品集很容易 pass 掉。

二、作品集制作流程 其实非常简单，4 个步骤教你整理作品。

1. 收集

大家平常在工作中都会写日报周报和季报，或者一些 OKR，像这些其实都是我们可以利用的一个点，我们就可以把这些东西一点一点的去抽取出来，日报抽取出来组成周报，周报组成月报以此类推，从小到大提进行项目提取，当然这个前提是大家在工作中要有个复盘的习惯，否则在总结的时候发现还要临阵磨枪的去做作品集。

2. 归类

针对你抽取出来的这些项目，去进行一个归类，一般会分为 3 个维度，即产品基建、业务赋能、体验优化

产品基建：0-1 的项目，所有数据没有参照

业务赋能：对于一些功能上的优化，通过设计的手段帮助业务达成目标，例如通过优化页面背景，增加了用户停留时长

体验升级：完整度较高的一些项目，例如整个产品 1.0-2.0，或者核心页面优化升级

3. 筛选

我们对项目进行归类之后，就需要进行筛选，因为并不是所有的项目都适合放进作品集里，我们要把重要的筛选出来，那么什么是重要的，我们通过 4 个象限去评估，即重要度、完整度、产品价值、用户价值；

筛选完成后还需要我们进行加工一下设计，因为工作中的设计稿很大一部分都是带有产品或者其他人的思考在里面，这时候我们放作品集里可能展现不出我们的价值，所以建议还是稍微优化下后在进行包装。

4. 风格

作品集风格要提前确定，这个和我们做页面是一样的，如果后期在改是很麻烦的事情，例如风格定义沉稳专业亦或者是卡通可爱，当然建议还是跟你的核心项目风格保持一直，这样能够从头到尾贯穿下来，让面试官看着更加流畅

我们平常会做一些项目的时候，会进行一个小复盘，做一个项目复盘一个项目，但是每一个项目复盘的风格是不一样的，有些人呢，做作品集就会省事，他就把不同的项目的复盘去拼装起来，这样的话，你在整理成作品集的时候，你会发现每一个项目跳脱太大了，我看上面一个项目的时候，风格是这样的，我看下一个项目的时候，风格忽然说又变了，这样你看你整个作品集的时候是来回是比较跳的，所以说我们这一块一定要在做的时候要统一风格，好了，按照这四步自己的作品集基本有一个雏形了

三、制作过程注意事项 1. 内容排序

作品集中的项目排序也很重要，不同的项目顺序达到的结果不一样，我们可以从以下 2 个维度去拆。

① 招聘方要求

像开始说的，不同招聘方要求不同，我们投的时候避免海投而是针对性的去投，例如某公司要求具有社交项目经验的设计师，那刚好作品集里有社交项目，这时候就可以把该项目的排序放在第一位，这样不管是 hr 还是面试官看到你的作品集时都会多看几眼，毕竟有相关行业设计经验。

② 项目价值

我们如果不按照点对点的投递方式的话，就可以筛选自己的项目内容，按照价值的维度去排序，建议优先级是

项目价值：因为越重要越能说出价值，在面试时才能更流畅的阐述清楚，另一方面也能体现设计能力；

项目完整度：项目内容完整度较高，例如改版优化，0-1 构建等等这种能体现你的综合能力

2. 分类

我们在制作作品集时千万不要一股脑全部都放进去，一定要分清楚你要找什么工作，例如你要找 UI 或者交互岗，尽量别放一些运营设计相关的内容，或者是少放，放一些能体现你的设计技法的运营图，全放进作品集会让面试官觉得你做的东西不够精。

其次我们在分类的时候一定要把维度梳理清楚，例如 APP 设计、网站设计、自驱设计等等，让人觉得你是一个有规划的人，面试官看的时候也会轻松很多，直接就可以跳到他需要的设计去看，如果分不清面试官可能就会懒得去找，直接关掉，毕竟人家时间是宝贵的。

3. 包装

避免重复：现在很多的设计作品集不管是交互还是 UI，新手们都放了一堆样机，放样机没问题但是我们也要去筛选出合适的样机，选择样机的时候要选择那些重复度低、机型高的样机，我见过很多设计师的样机都是被人用过无数次了；

与时俱进：样机一定不要使用老旧的，现在手机都出到 14 了，样机还在用苹果 8 这种情况，这样的样机做出来的作品集质量也高不起来；

样机数量：我们在使用的时候一定要控制数量，我之前接到过作品集，一个项目里全是样机，甚至在设计说明部分也使用各种样机，样机是为了让页面更美观，而设计说明是阐述设计价值。

最新的样机打包：

新鲜出炉！iPhone 14官方展示样机素材打包下载 iPhone 14 刚刚发布，苹果官方就发布了展示样机素材，涵盖了iPhone 14、iPhone 14 Plus、iPhone 14 Pro、iPhone 14 Pro Max 四款新机型和新的配色，样机包括PSD和PNG两种格式，我们已经打包好了，想用的抓紧下载哟。

阅读文章 >

4. 尺寸

我们作品集尺寸选择也是尤为重要，切记不要像网站一样做成连体的展示尺寸，面试官看的时候基本都是放大后用键盘控制页数去看，如果我们单页高度很高就会严重影响观看体验，这里推荐尺寸 960*540、1920*1080、3840*2160

5. 导出

导出作品集建议两种方式一种 PDF 一种 PPT，PDF 是最常见的投递形式，不管在任何系统上都可以无障碍打开，而 PPT 是为了作品集中动效做准备，有的 设计师作品集 中可能放了 GIF，但是 PDF 不支持动画播放，所以有需求的设计师可以导出 2 份，当然也可以附上个人网站的链（一般内推渠道无法使用）。

欢迎关注作者微信公众号：「防脱发药水」

大家好，这里是和你们聊设计的花生~最近 ChatGPT 真的太火了，每天都会在网上刷到关于它的各种讨论，身边的同事也已经在用它处理一些文字工作，不知道大家有没有用起来呢？最近我在网上看很多大神分享的 ChatGPT 使用教程，发现自己之前对 ChatGPT 的认识太肤浅了，试过后更是感觉打开了新世界的大门，今天就...

大家好，这里是和你们聊设计的花生~

最近 ChatGPT 真的太火了，每天都会在网上刷到关于它的各种讨论，身边的同事也已经在用它处理一些文字工作，不知道大家有没有用起来呢？最近我在网上看很多大神分享的 ChatGPT 使用教程，发现自己之前对 ChatGPT 的认识太肤浅了，试过后更是感觉打开了新世界的大门，今天就和大家分享其中 6 种我觉得对 设计师 非常有帮助的 ChatGPT 使用思路。

关于 ChatGPT 的详细介绍：

地表最强AI聊天机器人ChatGPT诞生！会给设计师带来哪些影响？ 大家好，这里是和你们聊设计的花生~ 前几天刚和大家聊过 AI 绘画工具 Midjourney 的 V4 模型，感叹它图像生成质量之高。

阅读文章 >

一、个人助理 想必不少小伙伴都已经试过这种用法了，用 ChatGPT 来处理写邮件、写微博或者小红书的文案这类文字工作非常方便，还可以用来写工作周报和年度总结的大纲。最近还出现了一款专门生成工作周报的程序，无需注册直接使用，给一句话就能生成一份内容详细格式工整的周报，简直是打工人必备利器。

周报生成器： https://weeklyreport.avemaria.fun/zh（暂时下线）

其实我们还可以让 ChatGPT 按预算推荐电脑设备，或者写一份条理清晰、内容详实简历。它还能陪你玩一些简单的游戏，甚至扮演你喜欢的动漫/电影角色和你对话互动，以后不愁摸鱼时间会无聊了。

二、学习导师 在学习设计知识以及设计软件的过程中，我们往往会有关于某个概念的疑问，或者在使用软件的过程中遇到障碍，这个时候就可以将问题描述给 ChatGPT，让它直接给出解决方案或思路。

比如一些理论性的知识，以 ChatGPT 可以写论文的水平来说，回答关于艺术史、设计史、大师作品或生平的各种问题肯定不在话下。我们还可以通过对话的方式和它讨论在设计中遇到的疑惑，能得到出非常专业的解答。这里推荐大家看一下艺术博主@尤勇画画 和 ChatGPT 有关色彩的讨论，内容非常有深度，从这方面看来 ChatGPT 足够作为设计师或插画师的学习导师。

微博原文： https://weibo.com/1658239147/Msmk05vAC

在用 PS、AI、AE、C4D、Blender 等设计软件时遇到的问题，也可以让 ChatGPT 给你提供解决思路。我问了它关于 Blender 中玻璃材质渲染效果很暗的原因和解决方法，它提供的“ 调整环境贴图”的思路帮助我很快速的解决了这个问题。

我还让试过 ChatGPT 提供海报设计思路。当我指定海报风格为国际主义时，它给出的使用简约色彩、无衬线字体、抽象几何形状及保持版面干净整洁等建议都是非常准确的，还提醒设计者注意设计的包容性。进一步追问如何才能找到简约的配色时，它也提供了使用配色网站、借鉴自然配色、关注经典配色和保持配色的一致性等建议，都非常实用。

三、辅助 AI 绘画 现在不少艺术家都在用 AI 绘画工具帮助自己快速将脑中的创意和想法转化为概念图像，而在 ChatGPT 发布之后这个过程变得更加简单流畅。艺术家可以直接告诉 ChatGPT 自己想要什么样的画面内容，让 ChatGPT 生成英文描述并润色成更容易被 AI 绘画工具识别的提示词（Prompt），然后复制到 Midjourney、Stable Diffusion 或 Dalle 2 等 AI 绘画工具中，就能快速得到不错的生成效果图。

这在一定程度上节省了艺术家自己学习输出提示词的时间，让创意参考的生成速度更快。还有一个好处就是如果艺术家一时间想不到好的点，可以简单描述想要的场景或感觉，让 ChatGPT 给出人物形象、元素、配色、构图、光影等具体内容建议，在此基础上一步步修改完善自己的提示词。问得越多，ChatGPT 能给出内容就越详细丰富，这比传统的自己找参考图效率要高很多。

游戏制作人@soulframe 利用 ChatGPT + Midjourney 生成的游戏角色概念图，来源： https://m.weibo.cn/status

了解有关 AI 绘画工具的内容：

手残党也能成为艺术家！4个热门AI绘画平台的创作经验总结 AI画画，无疑是当下最火热的话题之一。

阅读文章 >

四、用于 UI/UX 设计 一名国外的 UI 设计师 Thalion 在他的文章中分享了利用 ChatGPT 进行 UI 设计的 25 个例子，其中包括获取线框布局的建议、对应用进行可用性测试、寻找高质量的系统套件或 UI 工具包、验证用户旅程地图、编写设计系统文档、获取设计研究数据等，非常全面的展示了 ChatGPT 能如何帮助 UI 设计师提升工作效率。感兴趣的小伙伴可以戳下面的链接阅读原文：

原文链接： 如何使用 chatGPT 进行 UI / UX 设计：25 个示例

ChatGPT 撰写设计系统文档

五、写 Blender 脚本 我们都知道 ChatGPT 可以写代码，因此它也可以帮助不会编程的设计师写 Blender 脚本，从而完成批量建模、添加材质、立体打光等操作。下图截取自国外设计师 Kaiwan Shaban 在 YouTube 上分享的一个视频，视频中他展示自己是如何利用 ChatGPT 写的脚本在 Blender 中迅速创建了 300 个随机立方体。

内容来源： How I made this Artwork using ChatGPT | Blender Tutorial - YouTube

YouTube 上有非常多相关教程，大家可以用关键词“ Blender+ChatGPT ”进行搜索。 下面推荐 B 站上的 2 个搬运教程，方便大家先做了解：

使用ChatGPT创建blender脚本： https://www.bilibili.com/video/BV1fs4y1Y7XM 在Blender中使用ChatGPT的5种方法： https://www.bilibili.com/video/BV1DG4y1F7TQ 六、学习外语 之前为大家介绍过 ChatGPT 有不错翻译功能， 如果你想在外网上发表英语内容但担心用语不对，可以直接用中文告诉 ChatGPT 你想表达的内容，让它帮你翻译润色。而除了及时翻译，B 站上还有 Up 主分享如何利用 ChatGPT 完成高效率的自定义英语学习。

首先是 UP 主@刘放斋 分享的利用 ChatGPT 高效学习外语词汇和写作，包括英语/法语/德语/西语/日语。因为单词放在语境下会更易于理解和记忆，所以我们以 3-10 个单词为一组，命令 ChatGPT 根据它们生成 100 - 200 词左右的小短文/小故事，方便我们可以一次性记住多个单词。且这样生成的内容是准确、富有逻辑且符合母语者使用习惯的，比在单词软件上一页页背例句更有趣。

教程直达： https://www.bilibili.com/video/BV18d4y1p7M4

ChatGPT 根据给定内容生成的短文

另一位 Up 主 @法笑宝 则提供了一种用 ChatGPT 练习英语口语的方法。具体操作方法先为 Chrome 浏览器中安装同一款名为 voice control for ChatGPT 的插件，然后借助输入法的语音输入，告诉它需要进行一对一对话的模拟雅思考试，就能开始和 ChatGPT 进行口语对话了。大家可以进视频感受一下整个对话过程，非常丝滑完美，想提升口语水平的小伙伴可以试试。

教程直达： https://www.bilibili.com/video/BV1iy4y1Q7Fh

以上就是今天为设计师们推荐的 6 种 ChatGPT 使用思路，希望对大家的学习工作有帮助。需要注意的是 ChatGPT 目前并没有联网，了解的事情也仅限于 2021 年之前，所以在信息时效性方面有缺陷。而且在问 ChatGPT 比较专业的问题时，得到答案后最好自己再溯源验证一下真伪，因为在之前使用过程中 ChatGPT 存在“编造答案”的情况。

不过有一个好消息是基于 OpenAI 的新版 Bing 搜索引擎已经发布了，有部分用户已经体验过了。新版 Bing 用的是 GPT-3.5 模型，比 ChatGPT 的 3.0 更加先进强大。用户依旧可以用对话的方式了解信息，联网的 Bing 可以反馈互联网上最新的资讯信息，并在提供答案的同时给出信息来源，这样就更方便用户自行了解更多信息及验证信息的真伪。

新版Bing的使用界面 ，图片来源： https://m.thepaper.cn/newsDetail_forward_21895565

想要使用 ChatGPT 或者体验新版 Bing，可以戳下面的链接了解。如果你也有关于 ChatGPT 的好用法，欢迎在评论区和大家分享。喜欢本期推荐的话请大家多多点赞收藏进行支持，我会更有动力为大家推荐设计干货知识 ~

ChatGPT 的注册方式： https://www.uisdc.com/group/497328.html 新版 Bing 内测申请链接： https://www.microsoft.com/zh-cn/edge 参考资料：

https://m.thepaper.cn/newsDetail_forward_21895565 https://www.ednchina.com/news/a10731.html 推荐阅读：

ChatGPT发展势不可挡！盘点4个值得关注的AI语言文本工具 大家好，这里是和你们聊设计的花生~ 这两天有关人工智能聊天机器人 ChatGPT 的新闻频频冲上微博热搜，并引起广大网友的热切关注和讨论。

阅读文章 >

AI绘画如何应用到实战？来看腾讯高手的案例！ 前言： 当我们谈论画作，会醉心于印象派光影斑斓的色彩，会惊叹于国风文人画如诗如歌的构图，会震撼于画师笔下一个又一个充满想象力和创造力的世界；而当我们提及 AI，脑海中浮现的是前沿深奥的大数据云计算，是冰冷严谨的逻辑思维能力。

阅读文章 >

经常做安卓端设计的朋友应该经常被一个问题困扰，那就是思源黑体的行高特别高，而且文字整体偏下。这会导致在 UI 设计软件中使用居中操作后，视觉上总是偏下的。但是这一问题 Adobe 官方一直未曾解决，甚至不认为这是问题。

经常做安卓端设计的朋友应该经常被一个问题困扰，那就是思源黑体的行高特别高，而且文字整体偏下。这会导致在 UI 设计软件中使用居中操作后，视觉上总是偏下的。

但是这一问题 Adobe 官方一直未曾解决，甚至不认为这是问题。

思源黑体 和更多黑体字下载：

视觉设计师来收！免费商用字体推荐：黑体篇（13款已打包） “黑体”结构清晰、简洁有力的字形风格能使版面显得庄重醒目并富有现代感。

阅读文章 >

作为一名从业多年的非著名视觉 设计师 ，这种事情是不能忍的。如下图所示，虽然按钮文本在布局中是居中的，但是因为行高的存在，以及思源黑体文本本身偏下的问题，此时文本整体是偏下的。

当前因为硬件平台以及软件适配等原因。不同公司对行高的定义是不同的，有 1.4 倍、1.5 倍，以及一些更复杂的计算方式。而思源黑体因为整体偏下以及原本默认行高偏高，自定义行高后在 figma 和 MasterGo 等设计软件中，字体显示更加离谱，完全失去了平衡。

那究竟有什么好的解决方案呢？

关于这个问题我跟国内多家设计软件提了建议，但是目前还没有人着手优化。于是便自己寻找各种解决方案，终于功夫不负有心人。让我发现了一款基于思源黑体优化的字体——梦源黑体。

此字体为免费开源可商用： https://github.com/Pal3love/dream-han-cjk

为啥叫梦源黑体呢？是因为此字体是一位叫做梦回琼华的软件开发工程师在思源黑体可变版的基础上修改的。

梦源黑体将可变版思源字体的大量中间字重实例化为传统单字重字体，合并了重叠的曲线轮廓，在保证最大兼容性的前提下，提供更加细腻、丰富的字重选择。此外，本项目修复了思源系列广泛存在的 Adobe 行高过大问题。本系列字体的其他功能（如字形、竖排、kerning、多语言、异体字、曲线精度等）与思源系列保持完全一致，未做任何修改。（引自作者原文： https://zhuanlan.zhihu.com/p/480219182 ）

通过下图，我们可以发现在相同字号和行高的前提下，思源黑体、梦源黑体和苹方三款字体的文字布局，苹方始终可以保持居中位置，梦源黑体在一般常用字号大小时表现优异，能够保持居中。在字体过大的时候会出现一点偏下，在使用 64 号字时，上下间距约相差 3px，完全可以满足日常使用了。而思源黑体就显得惨不忍睹了，基本 10 号字以上就会出现明显偏下；

既然梦源黑体能够解决思源黑体存在的问题，那么直接替换是不是就可以了呢？理论上是可行的，但是还会存在一些问题，因为梦源黑体的原作者是基于可变版思源黑体来优化的，其字重有 27 个之多。而思源黑体标准版则只有 7 种，从细到粗分别是 ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy；

所以要想使用梦源黑体，就需要和标准版的思源黑体字重一一对应，通过对比筛选出其对应关系为：ExtraLight=W1、Light=W6、Normal=W12、Regular=W13、Medium=W17、Bold=W22、Heavy=W27；

所以如果你只是想解决字体行高和不居中的问题使用上述字体字重即可，在 UI 设计软件中也可以自定义行高，文本会使用保持上下居中；

而笔者作为强迫症，又对梦源黑体进行了如下修改，首先将字体名称和字重从梦源黑体改为了对应的思源黑体及字重。

同时针对针对 Android 端中文使用思源黑体，英文使用 Robto 字体，排版时需要来回切换两种字体的问题，将思源黑体中 95 个英文字符替换为了 Roboto 字体。使用修改后的字体你能够得到的效果如下：

因为此款字体是基于思源黑体可变版优化的，所以和思源黑体标准版字形和字重有细微差异，请知悉，同时本人已联系原作者，希望不久后基于标准版思源黑体优化的版本能够和大家见面。

相信此款字体能够解决广大设计师在工作中的一些困扰，最后向梦源黑体的作者致敬（有条件的朋友可以去 github 给作者点一个免费的小心心）。有需要的小伙伴可以附件下载梦源黑体原版以及经过本人改造过的思源黑体文件。（仅做交流使用，不作任何商业用途）

欢迎关注作者微信公众号：「动效研究社」