2021年如何做好作品集

今天分享的这篇文章非常长，我写了1个星期。内容比较多，慢慢看。2020年马上结束了，今年的环境真的变化太快了，设计师们也习惯了就业环境的残酷。曾几何时UI设计师是一个非常高大上的名词，但现在UI设计师意味着难就业，工作难找。因为UI设计师是依附于产品设计的一个岗位，当经济上行，大多数公司急需人员开展项目，所以会放宽各种要求。尽快完成项目。

所以培训几个月，就上岗拿月薪上万的人大有人在。但是目前经济情况大家都知道了，所以很多公司开源节流，招聘需求尽可能的减少。有招聘岗位那也是万里挑一。所以面试不仅仅是作品，还需要看你的学历，看你的工作背景，你曾经做过的项目。设计师已经成为名副其实的竞争最激烈岗位了。你的学历，你曾经工作过的公司，这些是无法改变的过去式了，唯一还可以去改变的就是作品集了。那么2021年，我们的作品集到底该如何去做了？

作品匹配个人经历

设计师的作品集是个人能力的体现，所以一些想走捷径的人盗用一些其他人的作品，然后填充进自己的作品集，因为觉得作品越多越好。一个有经验的面试官可以通过你的作品内容的水平是否平均，来判断你的作品是否真实。比如我见过很多字体设计非常一般的作品，但是到了专题突然标题设计非常的复杂，这就明显会让人觉得不真实。

作品集的作品内容尽量去匹配你的个人工作经历，比如你的上家工作是医疗行业，但是了你的作品集内容完全看不到。这样别人会怀疑你的工作经历的真实性。有时候我也会收到一些作品，让我看看是不是竹笋同学的作品。我也看到不少次一些作品集里放着京东或者网易的大厂作品，但是简历是完全看不到的。别人会对你进行背调，设计师现在有大量的渠道互通，背景去了解后，如果作假那么就会被拉黑的。

删除小练习

有追求的设计师，都会在工作之外去学习一些技能去提高自己的专业能力。这些能力可能不会马上去应用在工作里。比如一些插画，一些字体设计，或者C4D。但学习肯定是从基础简单开始，然后到技法复杂的作品。一些设计师舍不得小练习，觉得这也是我的作品，我要放到作品集里，但这些零散的基础的小练习，并不能给你的作品明显加分，反而会减分。对于这些练习的作品，如果技法难度不足，就不要放了。如果需要放也要考虑放在哪里，如何去用。比如一张插画，单独放在作品集里，会觉得非常的零散。如果做系列插画，做为APP设计的启动页去展示，就会丰富饱满许多。

应届生的作品

设计竞争非常激烈，很多大三大四的学生就有意识很早的开始学习了，为了寻求一份好的实习工作。首先弄明白为什么一些公司招收实习生，因为你是潜力股。更看中的是你的设计潜力。所以你学校的作品。或者你通过插画字体设计，这些基本功判断你是否具备相应的潜力。但是现在有一个非常不好的现象，就是在作品集大量充斥着各种高深的产品分析和理论讲述。这个现象集中在UI  设计中最普遍。

学生是没有任何真实项目经验的，有也是在项目中担任辅助角色，所以各种用户画像，产品背景分析其实是非常悬浮在空中的，没有真实参与过任何商业设计，或者一天生意也没有做过，却模仿社招工作多年的设计师，去讲述各种理论数据分析。其实在面试官看来是非常可笑的。当然纯交互或者用户体验的应届生。确实应该多做这方面练习。但毕竟这样的岗位稀少。而且不符合大量实习招聘职位的需求。

大厂作品集

现在互联网的共享资源是如此丰富，也有很多乐于分享的设计师分享自己的作品集，我们能找到各种作品集的参考。我们都能看到各种吸睛的标题，例如常见的标题就是大厂的设计师如何做作品集的，每个设计师都有一个大厂梦，我们希望通过模仿大厂设计师的作品集，去入职大厂，这样愿望是美好的，但现实很残酷。全国有几千万设计师，大多数设计师所在的城市决定了，并没有这样的大厂存在。由于大厂的分工非常细致，每个设计师所分担的职责非常垂直，做UI界面的基本上不会去做运营设计相关。而做界面中，又会花大量时间研究项目所在的模块的每个细节点。所以可以每个小细节点去做非常多的理论分析。

大厂作品集里面面最值得看的其实是项目经验的总结，这些偏理论分析的内容，其实对于很多在二三线城市的设计师并没有很直接的参考意义。试想下做为一个二三线的城市的老板，他招设计师的目的是什么，是不是去解决日常公司里美学问题，或者去做界面，或者去做专题，或者有时候公司日常有个易拉宝海报啥的也要你去帮忙做下，可能有的设计师觉得这不就是美工，多廉价。但是确实大多数公司设计师生存状态就是如此。所以对于大多数设计师来说。你的作品集里如果充斥大量纯虚拟UI的界面，不管你理论分析写的多好，可能对于面试官来看，就是千篇一律，直接翻翻就PASS了。

清晰的结构

作品集是你个人能力的体现，也是你过完项目经验的总结。不管是哪种。都需要细细的整理。而不是作品堆砌。常见的作品类型就是APP设计，专题设计，Banner设计，字体设计。我们常见的分类是方法是根据求职岗位进行区分，比如偏UI设计的可以整理2到3个APP设计。如果求职方向是纯视觉设计，那么需要整理专题设计，banner设计和一些字体品牌设计相关内容。如果是在二三线城市。我建议作品集的内容类型还是丰富一些，单一的类型的作品虽然聚焦，但是可能并不适合大多数人。

文件夹作品

五年前，如果你出去面试找工作，带一堆文件夹出去，别人会觉得你这个设计师水平比较差，连总结都不做。所以我们必须做一份漂亮经过整理的作品集。有一次有个学生问我UI面试有没有什么技巧，我说技巧都是辅助，重要还是作品。我建议学生整理好作品集的同时，另外把作品以文件夹形式一个个项目整理好，因为这样别人会通过查看你的作品明细，可以对你的个人水平有更深入的认识。

为什么会这样了？因为圈子里有一些不好的现象。就是有很多抄袭搬运现象。甚至某宝上还有卖作品集的。这些现象尤其以插画和APP作品为甚。十几个拼凑的界面，五六页的展示一个APP的项目。所以很多面试官对面试者水平产生各种怀疑。现在出去面试必然会做测试题。因为面试官有时候也无从判断，只能通过这种最简单粗暴但不友好的方式去看面试者水平。

设计思维的展示

作品集内的内容一定要想办法走差异化路线。不管是UI类型的作品集，还是视觉类型的作品集，都不要千篇一律。比如一张插画的展示，不要只放置一个作品图片，，可以多展示一些设计思维，从头脑风暴的国潮，灵感的来源，价值的呈现多维度的去展示作品。

UI作品集的内容

作品集内放什么作品，这是设计师第一个需要明确的，我的下一份工作是做什么。如果是纯UI界面岗位，作品集呈现以纯Ui界面为主。并不需要加入太多纯视觉设计的内容。当然这样的的做法，面试机会非常少，有一定赌的成分。首先作品集里呈现的UI项目需要和你的工作经历匹配，这些项目的展示是你真实经历过的，如果你想靠纯虚拟的项目在大厂去某得一份纯UI工作，基本上的概率和中彩票差不多。

因为市场上太多存量的大厂设计师也等着去跳槽，他们有着丰富的项目经验和表达话术，这点你是无法比拟的。纯UI界面的作品集，如果有幸进入面试环节，在实际面试时候，对于项目的具体细节，你并不能讲的非常明白透彻，可能就没有机会了。因为大厂设计师每天专注具体的项目具体的模块，可以每个小细节讲的很清楚，再加上出名的项目支撑，面试官也会高看一眼不是嘛？所以纯UI界面的作品集在实际的找工作中，非常吃亏。大厂的面试官看不上，觉得你写的那套理论非常的空洞模板化。中小厂觉得你作品缺乏综合视觉能力，能力太单一。

运营作品集的内容

如果是纯运营视觉的作品集，以运营专题设计为主，这类设计师可能也具备做UI的能力，那么很多运营设计师最纠结的是，我要不要去放界面的内容。那就根据你找工作的方向来定，如果你找纯视觉运营的方向，可以不放界面作品集，因为你的工作内容并没有这个，放上去显得并不专业，或者有点画蛇添足。

也有人纠结我是不是应该找一些各种数据理论来支撑一下，不要让人觉得我是一个纯画图的。我的建议是，如果去大厂，当然要。你需要多在作品集里体现运营的体系思维。比如各种运营组件的整理，各种品牌营销的视觉设定。这些才是大厂设计师具备的素质，如果你只是满足作品集里加入各种漂亮的专题和Banner设计，你会发现你好像在找一个类似美工的工作。因为你的作品集里体现的只是一个执行思维，并没有营销驱动的体系思维。

UI+视觉作品集的内容

这个方向，其实我建议大多数人的方向，因为90%以上的设计师，其实就业都在中小型公司，日常需要解决公司里各种美学问题，不管你是做UI，还是日常的运营视觉，甚至一些线下的平面设计。所以公司需要的是你的作品集呈现你具有综合视觉能力。我的建议是是各种类型作品都要放的，当然这类作品集最大的问题是杂而不精，数量很多，单个作品没有出彩的。所以如果你走这个综合性路线。必须让你的作品集看到出彩点。

下面我们来具体讲讲UI作品集应该怎么做？

作品集的内容

UI设计师的主要工作以界面为主，大型互联网公司的UI设计师专注于界面设计，而中小型公司更加偏综合，界面和视觉设计都要兼顾。到底在作品集里放多少APP？首先不是你放置APP数量越多越好，如果你的公司只专注一个APP，那么你可以就放一个，但是你需要通过大量篇幅去把这个APP的每个细节介绍清楚。不用五到六页蜻蜓点水的介绍。这样对你的作品集筛选没有任何的帮助。

模板化的话术

曾经UI界面设计很纯粹就是考虑如何设计一个舒服的界面，让用户用的舒服，所以用户体验为中心这个词提出的频率非常高，但现在发现好像没人提这个词了，设计并赋予了更多的职能。必须谈商业，必须谈转化率，有人说这是UI设计是商业设计一环，所以必须更多的谈商业，所以你会发现现在周围的UI设计更多的谈设计赋能，用户增长，营销架构，商业战略，宏观视野这些词汇。感觉设计师背负了这么重的使命，快成CEO了。

这些话术是不是很熟悉，你好像在每个作品集里都可以看到。你要是很纯粹的谈一些微观的界面流程优化，感觉你的格局太小了。大厂设计师特别喜欢引导这样的潮流，因为我们并不清楚这里面很具体是怎么样的。比如你会在每个作品集里都看到千篇一律的KANO模型话术。这是一个产品经理应该去考虑的事情，设计师应该有产品思维也非常对的。但是当一个作品集每个人都写一样的KANO模型和用户体验地图话术的时候，这个事情就不正常了。因为并没有仔细深究，只是粘贴复制而已。

所以我们更多的是邯郸学步，明明你是一个刚毕业的学生，也学着务虚的商业格局，这样是非常不严肃的，所以目前大量的UI作品集里充斥着这些模板化的话术，是非常耽误人的。我的建议作品集里少去谈这些非常宏观空洞的话术，作为普通设计师，多去关注一些UI设计交互体验细节。

数据分析

现在APP的界面讲究数据，你的APP下载量是多少，用户多少，月活日活是多少。如果是改版的项目，通过你的改版取得了什么数据的增长。其实这些确实是商业设计关注的点。一些设计师如果如果不关注这些，去描述自己的项目的时候就容易底气不足，如果是虚拟项目，那更是哑口无言。其实这些并不是衡量你UI设计的唯一标准。对于大厂设计师提供的各种数据，也不要迷信。其实UI设计只是整个研发流程的一环，一个改版的数据，可能是多种因素促成的。有很多已知未知的数据，设计师并不能完整的看到。所以了如果你是一个在职设计师，请多种渠道去关注你的设计数据。所以你是一个初学者或者只是参与某个模块的设计，可以坦诚的面对。不要试图编造一些无法验证的数据蒙混过关。

样机使用

UI作品集里我是不建议使用任何样机的。在五六年前如果用还是可以的，可以作为一个视觉展示的亮点，现在作品集里还放这些，基本上作品集会被扔，因为别人觉得这是初学者。当然还有一种情况，就是本身界面细节不足，想通过样机，把界面图缩小，通过这样取巧的办法去蒙混过关。这样在面试官那里也是很难通过的。我更建议UI界面用大图展示，配以平实的排版，文字描述清楚你要讲的点。UI的界面展示，能让面试官看清楚你表达的内容。而不是用眼花缭乱的视觉手段去掩饰界面思考的不足。比如下面的某设计师设计的排版，没有任何花哨排版，就是朴实的展示界面细节。我觉得这样看似没有设计的排版其实是最佳的展现形式。

品牌设计

不同公司对于品牌设计的定义不一样。比如一些大型公司品牌设计是平面设计范畴下的，负责各种线上线下的各种品牌视觉，具体的比如我要做一次活动，我需要输出一整套设计方案，这个方案供各种印刷或者线上界面使用。这是一些大型互联网公司品牌设计需要做的

那么对于很多普通中小型公司的UI设计师，显然没有这么高的品牌要求，不会单独招聘一个品牌设计师，所以这部分工作你可能也要承担起来。同时作品集中UI部分显然也需要去考虑一些品牌视觉的输出。比如绘制一些IP形象在界面中贯穿。

并对这些形象进行视觉延伸，比如界面中的图标，界面中的弹窗，界面中的缺省数据页，都可以运用IP形象进行穿插。在IP形象冗余界面中，做的比较好的是闲鱼APP

运营设计

很多UI设计师有这样一个鄙视链，沉迷于各种产品分析，觉得做运营设计是非常廉价的，这样的想法有历史原因，当然最直接的原因是运营设计的薪资天花板比UI设计要低。在大厂里UI设计专注于界面设计的某个模块，一个APP其实由一组人完成，每个人负责具体的模块，所以研究的非常精细。但同时局限性其实也非常大。对于很多设计师来说。不要完全把自己的专业局限在纯界面上，日常工作也会涉及到非常多的视觉运营设计。比如一张漂亮的启动页，一个充满营销味道的弹窗，这些都应该是设计师不可以丢下的基本功。

插画设计

这几年插画设计非常的流行，很多UI设计师也觉得这是一个必备的技能去学习，那么作品集放一些插画作品会不会给你加分了？首先我们招聘设计师是来解决工作中的各种问题，那么一个做界面设计师需要的实际应用能力。插画也有非常多的风格，常见的儿插风格，厚重的手绘CG风格，漫画涂鸦风格，扁平线性风格等等，并不是所有的风格都可以应用在界面设计中的。如果你只是做为业余爱好来学习。你可以任意选择风格去学习。而作品集里放置一些零散的小插画，除了让面试官知道你会绘画外，并不能有明显的加分，反而这些小练习给人感觉非常零散，不专业的感觉。所以如果你想去学习插画，请在界面中呈现插画与设计结合的应用。比如启动页，banner设计，专题的头图等等。

C4D设计

C4D也是一个热门的方向，这个可以运用在非常多的运营设计中，但是首先明确C4D不是那么容易学好的，入门非常容易，但是想精深需要花太多太多时间精进学习的。我看过非常的设计师作品集里放置了非常初级的灯管字之类的小练习，这些都是学习了几个月的成果，然后发现工作中用不到，然后也没有再去深入去研究了。就半途而废了。那么你会发现作品集里放这些小练习，还不如不放，这样会更加暴露你的专业不足的缺陷。下面是我一个设计师

今天就讲到这里，我们将继续更新下一篇《如何设计运营作品集》, 

我已经写好了，让我再精加工下，当然也可以关注我的

设计公众号《聊设计》liaosheji2010，第一时间观看到我的更新。

转自：站酷

作者：风尾竹

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

转自：站酷

作者：大飞

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

转自：站酷

作者： 设计的纬度 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

   17年开始进行视觉组件库的搭建，也出过一个B/G端设计分析方法的文章总结，里面从大的方面介绍了组件。后来看到很多关于组件库的文章，但是大都是从“分子原则”等很宽泛的方法来讲，很少去细讲实际搭建过程中会遇到的问题，甚至有些方法深究或者实际做下去是有问题。这里会全面的写下sketch搭建组件库（或者说是视觉规范）的逻辑，以及容易混淆思路的点。

    为了让大家容易看完，先简短说下制作组件库的目的，再分三点讲搭建方法。

    一 为什么制作组件库

    Q1：很多人认为table、tabs等通用组件不需要再搭建，很多大厂已经出来规范，可以复用，为什么还要单独制作自己的

    A1：这些通用组件都是由基础的样式粒子：填充色值、描边大小与色值、圆角大小、文字大小与色值等组成，就拿form表单来讲，不同的描边、行高、圆角、文字样式营造的感觉也完全不同。

    Q2：搭建后能发挥什么作用呢

    A2：统一性：避免多人多风格的现象，保证所有产品都呈现一致的设计语言，新成员加入，也可快速接手工作； 性：改一个组件，可以使用该组件的全部设计图更改；在现有组件库的基础上，也可通过修改，生成不同项目的组件库。

    Q3：搭建后如何确保大家都能正确使用？

    A3：需要大家了解自身项目组件库的搭建逻辑，统一讲解远程组件库使用方法，并有专人定期维护更新远程组件库。

    二 组件库具体搭建方法

    分三方面说明：（一）、内容架构；（二）、注意点；（三）、远程协作。

    （一）内容架构

    内容架构要考虑的是两方面：一个是文档的逻辑，二是组件的逻辑。三哪些制成组件，哪些制作成样式。

    文档的逻辑

    如上：点击创建组件按钮后，所有的组件都会出现在“图层/组件”界面，默认的排序方式是软件自定的，不好分类和查看，除非每次创建后再进行挪动。第二个“组件》”这个位置是不能直接切换看到组件的，只能在左侧看到所有的组件名称。再加上制作之前，也需要绘制出内容，所以我们需要在图层处建立界面，绘制我们的内容。样式也是如此，只能在“组件》”看到所有的样式名称。

所以我们整理出：“样式”page——所有需要创建样式的内容在此处整理分类绘制；“components组件”page——所有组件在此处分类绘制，再进行创建；“layout 布局”page——说明系统的布局和响应方案；“examples场景模块”典型场景模块，“更新日志”page——标明每次变动，当然sketch是自动导出“组件”page。另外根据系统特性，比如数据统计类界面多的情况，可以增加“data visualization数据分析”page

    组件的逻辑

    很多组件库向左图一那样，直接把所有组件摆了出来，非常凌乱不便使用。再对比element和antdesign，后者的分类整合地更干净整齐，涵盖的全面，整合后的大类别少，分类相对清晰，可以借鉴，后续有自己系统常用模块需要制作成组件，可以单独增加一个分类模块。当然也可以按着自己的逻辑重新整理。

    哪些制成组件，哪些制作成样式

    先说样式吧：1 文字（也有些会选择直接做成组件，但我一般会制成样式，感觉更轻量化些）；2颜色——背景色、线条色（分割线、描边）、主色调、图标配色、功能色；3 容器（需制作全不同状态的容器，内容卡片、输入框、标签等都会用到）；4投影。指的注意的是，这里的样式基本涵盖了所有的基础样式，后续大部分的基础样式都要尽量在在此处引用。

    哪些制成组件：本质上讲就是两大类，1是icon；2是其它无法用简单样式的常出现内容（也就是上面按“组件逻辑”整理出来的内容”

    何时需要制成复合组件：1需要通过很多基础样式切换才能改变状态时候。而且通过多个样式切换不同状态，麻烦的地方在于覆盖层的优先级比较高，即使切换成了同类其他组件，也还是被覆盖，必须更新

如下：

    我们可以在创建symbol后，在右侧取消内部相应的样式覆盖，然后建立所需的多个状态的平行组件，通过直接切换不同组件来切换状态。

    2如果该组件有上一级组件，并且要用到该组件的不同状态，就要把该组件的不同状态改为组件，不然一层一层改很麻烦。

    （二）、注意点

    制作组件的过程中虽然按着大的架构走，还是很容易混乱或者卡住。以下注意点，可以帮助我们理清关系。这部分其实也是我重点想说明的内容。

    命名

    1无论是组件还是样式的名称，最后一级相平行的，最好是可以相互切换的状态。这样就可以在右侧属性中直接切换。

    2 组件只能切组件，样式只能切样式。—— 也就是说定好一个基本元素是样式，那么与它平行的切换内容也需要是样式。

    3 如何修改已制好的组件或样式名称

    截图1（图层》组件page）和2处，选中进入后，均可找到对应的修改。修改后其他页面已放置好的组件名不被修改，反过来，在图层处其他位置修改，亦不能修改好组件的命名。

    4 sketch里默认的分组是通过命名时的“/”，要修改组件或样式加载时的分组，需在切换到此处，进行拖拽。修改后，组件的名称也会被修改。

    5 要将一个元素的组件命名到一处去，理清楚如上的关系。如果遇到无法用到的基本元素搭建，需要新的元素，可放到该组的element里（如上图）

    样式或组件的修改

    样式变化后，更新按钮变为可点击，点击此处可以更改样式，重设样式可以还原

    组件编辑覆盖层后在右侧更新，如果想修改组件，通过编辑母版

    响应

    要考虑好响应方式，每个组件在此处做好设定

    （三）、远程协作

    远程原因

    如上，只要复制过来的新内容中有组件，就会再下面自己建立出组件，很不方便组件管理，团队人多时，容易使组件发生变化，用远程组件能够做到完全统一。

    远程方案

    1 蓝湖

    无论样式还是组件添加后，还得自己分组重新整理，组件使用方法，在“蓝湖设计规范云”中找到相应的，自己拖过去用，很麻烦。

    2 语雀

    可以通过语雀的sketch插件上传或者下载，加载后便是类似远程组件的使用方法。

    3 sketch clould
|

    单独通过线下传library文件加载使用，比较不容易统一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帐户云能力创建的 Sketch的云端设计库，使用前需要对其进行设置。使用时，打开 Sketch 左上角第一个菜单的 Preference，选择 Libraries 卡片，将本地 iCloud Drive 中的规范文件拖拽进这个区域，然后关闭该窗口。

    综上所述，我们常选sketch cloud或者 语雀的kitchen插件来进行远程使用。另外会线下发送整个文件，方便整体复用一些组件和example里的页面。

    以上是我目前关于视觉组件库制作的一些经验和个人看法，欢迎留言交流～

转自：站酷

作者： younglion0610 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

卡片的造型

1. 圆角

不同的圆角，所带来的气质是不同的。圆角很小，视觉印象是硬朗，高冷，具有攻击性的，多用于严肃、高端、冲突感强烈的设计中；而更大的圆角给人的感觉是有亲和力，柔软，安全的，多用于儿童产品、娱乐性强的设计中。

在设计的时候，根据自己的产品属性选择气质相符的圆角设计很有必要。

△ 常见的卡片弧度形式有4类：直接、小圆角、大圆角、特殊圆角

我一般喜欢用4的倍数来设置圆角，比如圆角大小为4px、8px、12px之类的。要注意的是，圆角越大，可用面积会越小，需要根据实际场景进行平衡，以视觉上舒服为宜。

2. 比例

卡片的比例，我习惯遵循一些美感规律，比如黄金比例（1.618），白银比例（1.414），青铜比例（1.732），正方形之类的比例。当然，实际设计需求中的比例，还是要结合内容的多少具体分析。

我的经验是，当比较接近这些美感比例其中之一时，就直接优化到这个比例。比如做了一个卡片，宽高比是1.5，比较接近于黄金比例，我就干脆让它等于黄金比例。

3. 异型

除了正常的卡片样式，还可以做一些异型的卡片设计。异型卡片具有较强的形式感和视觉冲击力，所以会比较多的用在游戏或者运营相关的界面中，吸引用户的注意力。缺点是批量化设计成本略高且因为过于风格化而不够耐看。

卡片的效果

1. 颜色

卡片的颜色搭配可以使用纯色和渐变色。这些颜色与文字之间的对比要符合界面对比度标准（ https://contrast-grid.eightshapes.com/，这个网站可以直接查到可用性数值，只要不是DNP就是可以用的配色），以免影响内容本身的阅读。如果拿不准的话，可以多用一些白色，比较不容易出错。

纯色卡片设计会让界面显得冷静高级，但对配色的要求相对较高，用不好的话会显得单调，沉闷。如果你坚持要用这种卡片配色的话，建议搭配一些图形纹理，会更容易把控，还能提升画面细节。

△ 纯色卡片设计

渐变色的卡片设计目前较为常见，层次细节更加丰富，画面也显得更活泼一些。

△ 渐变色卡片设计https://dribbble.com/shots/12284120-Wallet-Design-App

有些朋友经常因为配色不好而发愁，其实是需要多去找一些参考来看的，实在担心配色不好，直接去吸优秀的配色方案也是OK的，但要注意搭配合理。

教大家一个方法，去dribbble上搜color或直接打开 → https://dribbble.com/search/color这个链接，就可以看到非常多的优秀配色方案了。

2. 图案

卡片的设计还可以结合辅助图形，以图案的形式与卡片进行结合。这些辅助图形可以来源于品牌符号的延伸，让品牌有更多的露出机会。

也可以是运用一些简单的图形，提升卡片的设计细节，以下是一些还不错的设计案例。这些卡片上的图形都有借鉴参考的价值，自己平时有时间的话，也可以多做一些作为图形的储备。强烈建议收藏，真的可以很有用。

△ 来源：https://dribbble.com/shots/10513966-Gradient-Bank-cards

△ 来源：https://dribbble.com/shots/10498737-Dark-Bank-Application-Design

△ 来源：https://dribbble.com/shots/11313260-Finance-App-Exploration

△ 来源：https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD

这里彩云给大家找了非常多的卡片设计形式，可以从中参考学习配色和纹理造型。

3. 图片、视频

卡片背景也可以用图片和视频的形式进行设计，图片和视频的选择一般会偏暗色，以不影响内容阅读为准。

△ 来源：https://dribbble.com/shots/5717917-Travel-Article-Application

卡片的内容

1. 文字

卡片上的文字不要太长，我的经验是横向不要超过42字（关于这个字数，有资料可以查，感兴趣的可以找找看），纵向不要超过5行。过多的文本不建议使用卡片形式。

其实这张卡片的设计中，我也用到了黄金比例来指导自己的设计，方便快速确定文字比例关系。

2. 间距（网格法）

卡片上的文字间距最好有一定的规律，这里可以按网格法来规划，比如8px网格，10px网格等等。网格的使用其实可以很灵活，比如我这里的卡片其实就用到了8px网格，各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理，这样做目的一方面是为了让界面有秩序，另一方面是提升决策效率。秩序产生美，而效率让你早点下班。

3. 减少线框

卡片中尽量减少线框，多用留白来进行内容划分。

4. 层次清晰

卡片中的内容层级要做好，标题和内容之间的差异要明显。这里的层次主要是通过对比拉开的，做好对比的关键就是对比效果要强烈，决不能模棱两可。

比如下图中左边的案例只是在文字的字号上有一定的对比，但字号间相差不大，效果不明显，就会让人第一时间不知道看哪。而右侧的案例则用了加粗，大字号，大留白等，让画面有了强烈的对比，从而产生更好的信息层级。

5. 内容出界

只在卡片的框框里做设计，有时候未免显得太呆板，破开卡片的边界可以让卡片本身更具形式感。如果被人说你的设计没啥亮点，那内容出界的设计就是一个很好的提升设计亮点的手法。

△ 彩云曾经做的一张banner就是运用了出界的手法

△ 来源：dribbble。界面上的天气图标也用了出界的手法，让画面显得更有亮点

卡片的细节

1. 光感

卡片中的光感细节能提升设计的质感。下面这张图是我最近做的一张会员卡的背景设计，大家对比下，在卡片顶部加了1px高光线和斜面反光的细节前后的质感区别。

这个小细节，我经常会用到，执行简单又容易出效果。

2. 投影

投影的细节，不要过重，但又要能与背景分离开。有2个小技巧：

• 在取色的时候，可以选择背景颜色的色相，然后略微加深一些，不要用纯黑色来做投影，会显脏。
• 投影的距离不要太小，太小的投影会显得不够自然；也不能太大，太大会很浪费界面资源。

3. 3D效果

3D卡片的设计，因为不便于内容编排和阅读，所以带透视的卡片在实际UI中并不太常用。但在作品集包装和运营页面中，则可以带来比较好的视觉冲击力，可以尝试运用。

△ 图片来自：Cradle

小结

以上就是今天彩云关于卡片设计的一些经验总结，卡片设计的应用已经如此广泛，我们有必要利用它来提升自己的界面设计细节。

转自：优设网

作者： 彩云

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

简单明了，让人可以立即评估自己的表现距离目标有多远。

设计产品的时候，如果行为修正非常重要，可以把选择架构原则考虑进去。

文章来源：站酷    作者：CDX创意设计中心

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

标签: 交互设计 交互设计公司 用户研究公司 共情设计

很多朋友面对AE表达式望而生畏，不过再难的东西都会有它最本质的规则，如果你理解了基本的原理和常用的表达式命令，这也许会提高你的工作效率。我通过自己对AE表达式的理解，尝试用最简单的语言解释一些看似复杂的操作，如果此篇文章能给你带来一些启发，不胜荣幸~

首先什么是表达式呢？

表达式就是AE内部基于JS编程语言开发的编辑工具，可以理解为简单的编程，不过没有编程那么复杂。其次表达式只能添加在可以编辑的关建帧的属性上，不可以添加在其他地方；表达式的使用根据实际情况来决定，如果关键帧可以更好的实现你想要的效果，使用关键帧就可以啦，表达式大部分情况下是可以更节约时间，提高工作效率的。

接下来看一下如何添加表达式

表达式工具

A.表达式开关 B.表达式图表 C.表达式关联器 D.表达式语言菜单

由于AE里不同的属性的参数不同，常用的我们可以分为：数值（旋转/不透明度）、数组（位置/缩放）、布尔值（true代表真、false代表假/0代表假、1代表真）这三种形式来进行书写表达式。对于表达式AE也有很多内置的函数命令，直接可以在表达式语言菜单里面进行调用。

接下来一起看看常用的表达式有哪些吧！

1. time表达式

原理:

time表示时间，以秒为单位，time*n =时间（秒数）*n （若应用于旋转属性，则n表示角度）

举例:

若在旋转属性上设置time表达式为time*60，则图层将通过1秒的时间旋转60度，2秒时旋转到120度以此类推（数值为正数时顺时针旋转，为负数时逆时针旋转）

注意事项:

time只能赋予一维属性的数据。(位置属性可进行单独尺寸的分离，从而可单独设置X或Y上的time)

2. 抖动/摆动表达式

wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)

原理:

freq=频率（设置每秒抖动的频率）；amp=振幅（每次抖动的幅度）；octaves=振幅幅度（在每次振幅的基础上还会进行一定的震幅幅度，很少用）；amp_mult=频率倍频（默认数值即可，数值越接近0，细节越少；越接近1，细节越多）；t=持续时间（抖动时间为合成时间，一般无需修改）；一般只写前两个数值即可

举例:

若在一维属性中，为位置属性添加wiggle(10,20)，则表示图层每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，为缩放添加n=wiggle(1,10);[n[0],n[0]]，则表示图层的缩放XY在每秒抖动10次，每次随机波动的幅度为20；若在二维属性中，想单独在单维度进行抖动，需要将属性设置为单独尺寸后添加wiggle(10,20)，表示图层的缩放X轴在每秒抖动10次，每次随机波动的幅度为20。

注意事项:

可直接在现有属性上运行，包括任何关键帧

3. index表达式（索引表达式）

原理:

为每间隔多少数值来产生多少变化

举例:

若为图层1的旋转属性添加表达式index*5 ，则第一个图层会旋转5度，之后按Ctrl+D去复制多个图层时，第2个图层将旋转10度，以此类推；若想第一层图形不产生旋转保持正常形态，复制后的图形以5度递增，表达式可写为(index-1)*5

4. value表达式

原理:

在当前时间输出当前属性值

举例:

若对位置属性添加表达式为value+100，则位置会在关键帧数值的基础上对X轴向右偏移100（正数向右侧，负数像左侧）；若想控制Y轴的位置属性，则可对位置属性进行单独尺寸的分割，从而可单独控制Y轴（正数向下，负数向上）

注意事项:

更多的使用场景是结合其他表达式一起应用

5. random表达式（随机表达式）

原理:

random(x,y)在数值x到y之间随机进行抽取，最小值为x，最大值为y

举例:

若为数字源文本添加表达式random(20)，则数据会随机改变，最大值不会超过20；

若为数字源文本添加表达式random(10,100)，则数据会在10<数值<100之间随机改变； 若为数字源文本添加表达式seedRandom(5, timeless = false)，random(50)，则数据会在50以内随机改变（前面的5是种子数，如一张画面中需要多个相同区间的数值做随机变化，就要为他们添加不同的种子数，防止两者随机变化雷同）,若希望数字随机变化为整数则应添加表达式为Math.round(random(2,50))，表示在2和50之间随机改变无小数

注意事项:

随机表达式不仅局限于数据上的使用，其他属性也可以应用，若数值为整数Math的M要大写

6. loopOut表达式（循环表达式）

原理:

• loopOut(type=”类型”,numkeyframes=0)对一组动作进行循环
• loopOut(type=”pingpong”,numkeyframes=0)是类似像乒乓球一样的来回循环；
• loopOut(type=”cycle”,numkeyframes=0)是周而复始的循环；
• loopOut(type=”continue”)延续属性变化的最后速度，
• loopOut(type=”offset”,numkeyframes=0)是重复指定的时间段进行循环；
• numkeyframes=0是循环的次数，0为无限循环，1是最后两个关键帧无限循环，2是最后三个关键帧无限循环，

以此类推

举例:

如下图gif

7. timeRemap表达式（抽帧）

原理:

timeRemap*n，n以帧为单位

举例:

将图层设置为timeRemap*10，代表每隔10帧就抽掉1帧画面，(根据要抽取的速率决定)

注意事项:

使用timeRemap表达式之前要启用时间重映射，否则无法使用此表达式

8. linear表达式（线性表达式）

原理:

• linear(t, tMin, tMax, value1, value2)表示linear(time, 开始变化的时间, 结束变化的时间, 开始变化时的数值, 结束变化的数值);
• linear(t, value1, value2)表示当time在0到1之间时，从value1变化到value2；
• ease(t, tMin, tMax, value1, value2)的含义与linear一样， 区别是在tMin和tMax点处，进行缓入缓出，使数据更加平滑；
• easeIn(t, tMin, tMax, value1, value2)与linear的含义一样， 区别是在tMin处，进行缓入，使数据更加平滑；
• easeOut(t, tMin, tMax, value1, value2)与linear的含义一样， 区别是在tMax点处，进行缓出，使数据更加平滑

举例:

见下图均以(time,0,3,131,1000)为例，若为数字的源文本属性添加此表达式可以制作出倒计时的效果n=linear(time, 0, 3, 3, 0)表示从0-3秒数字从3到0，希望数字为整体需添加Math.floor(）

注意事项:

倒计时的用法比较常用，整数M要大写

9. Other Math（角度弧度）

原理:

degreesToRadians(degrees) 角度转为弧度（degrees度的变量或表达式）radiansToDegrees(radians)弧度转为角度（radians弧度的变量或表达式）

举例:

常用语数学中的一些计算sin，cos，tan，sec，csc，cot等

10. layer表达式

原理:

layer(index)中index 是数值，按照编号检索图层；layer(name)中name 是一个字符串，按照名称检索图层（若没有图层名称，则根据源名称）；layer(otherLayer, relIndex)中otherLayer 表示图层对象，relIndex 表示数值，检索属于图层对象的数值图层

举例:

• layer(index)—thisComp.layer(1).position；
• layer(name)—thisComp.layer(“形状图层1”)；
• layer(otherLayer, relIndex)—thisComp.layer(thisLayer, 1).active 将返回 true

11. marker表达式

原理:

marker.key(index)中index 是数值；marker.key(name)中name 是一个字符串

举例:

thisComp.marker.key(1).time表示返回第一个合成标记的时间;thisComp.marker.key(“我叫注释名称”).time表示返回具有名称”我叫注释名称”的合成标记的时间

12. comp(合成属性和方法)width与height表达式

原理:

width表示返回合成宽度；height表示返回合成高度

举例:

[thisComp.width/2, thisComp.height/2]表示宽度和高度为合成的一半也就是居中的位置

13. param表达式

原理:

param(name)中name表示字符串；param(index)表示数值

举例:

effect(“高斯模糊”).param(“模糊度”)效果控制点始终位于图层空间中

14. 弹性表达式

原理:

复制粘贴表达式使用就可以，amp表示振幅,freq表示频率,decay表示衰减（根据不同需求做不同的调整）

举例:

n = 0; if (numKeys > 0){

n = nearestKey(time).index;

if (key(n).time > time){n–;}}

if (n == 0){t = 0;}else{

t = time – key(n).time;}

if (n > 0){

v = velocityAtTime(key(n).time – thisComp.frameDuration/10);

amp = .03;

freq = 2.5;

decay = 4.0;

value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);

}else{value;}

上述内容复制粘贴使用即可

注意:motion2脚本也带此功能，方法不唯一

15. 反弹表达式

原理:

k表示反弹最终结果，a表示反弹阻力，b表示反弹变化时间

举例:

k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根据不同情况调节kab的数值即可）

16. 数字递增表达式

原理:

StartNumber表示开始时的数值，EndNumber表示结束时的数值，StartTime表示开始的时间，EndTime表示结束的时间，和前面的linear表达式相对应

举例:

StartNumber=1;

EndNumber=20;

StartTime=0;

EndTime=3;

t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)

17. 挤压与伸展

原理:

spd表示挤压拉伸的速度，maxDev表示挤压拉伸的大小，decay表示衰减

举例:

spd =20;maxDev =10;

decay = 1;

t = time – inPoint;

offset = maxDev*Math.sin(t*spd)/Math.exp(t*decay);

scaleX = scale[0] + offset;scaleY = scale[1] – offset;

[scaleX,scaleY]

18. 运动拖尾

原理:

delay表示要延迟的帧数

举例:

为位置属性添加表达式delay = 0.5;

d = delay*thisComp.frameDuration*(index – 1);

thisComp.layer(1).position.valueAtTime(time – d)；

如想要实现不透明度拖尾需为不透明度属性添加表达式opacityFactor =.80;

Math.pow(opacityFactor,index – 1)*100(调整好一个图层后复制多个)

文章来源：优设    作者：凌旬 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务