大小 权重 简单 我们做设计信息刻画一直以来就是一个避不开的话题，基本上在一份完整的设计中，除了陈述性质的信息以外，都需要一定程度的美化方便让人去阅读，同时也更加美观。今天给大家带来一篇关于信息刻画的文章，我会在文章中列出刻画过程中常见的8种类型供大家学习。1. 大小对比肯定首先是大小对比，别看手法简单如果使用得当也能达到非常不错的效果。值得注意的是我们在设计中大小对比一定是针对不同层级的，同层级做大小对比一定不要影响信息关系和识别，打个比方就是我们做标签，往里面加个英文这是可以分个大小对比的，但是如果同样都是主标题且标题内没有需要特别强调的点，突然放大一个字其实不是好的选择。当然不得不提的就是书法体的大小错落更是经典，大家一定要记住，书法体一定要编排不能拿来直接用。2. 长短对比长短对比和大小类似也都是非常常用的，长短变化更适合短一些的信息以及英文，长短控制好画面的节奏感会非常强。但一定要注意，单行不要太长也不要太短。3. 权重对比这里一定要特殊说一下，如果不处理好就会变成权重失衡，所谓合适的权重对比就是不会过于夸张的粗细对比，不会出现极粗和极细的对比。当然大小也算在权重里面，也尽量不要出现极大与极小的对比，除非有特殊情况，文字小到类似成了点元素，这是可以使用的。4. 添加图形添加图形需要保证一点，就是添加上来的造型一定要足够简单，因为小范围使用的图形是越简单越好，如果呈现出小而杂的状态就是乱。再有就是以圆方三角为基础的造型基本能应付大部分的需求，水平在高点的可以利用元素置换，例如圣诞节可以用糖果为造型，促销可以用优惠券为造型等等。5. 徽标形设计徽标形设计也是比较常见的不管是标题啊，还是标签啊都有使用这种手法的，这种是非常非常简单的，只需要按照固定的模式进行参考就可以了。6. 错位处理错位处理是非常简单的处理方式，分为左右错位和上下错位。7. 添加装饰线装饰线一般都是添加在标题上添加后可以让标题层级更加丰满，设计的调性准确性也会增强，方式也有很多。手绘线条增加亲近感，欧式线条塑造高级感，曲线增加灵活度等等。8. 提取数字信息刻画一定要注重提取数字，数字牵扯到价格销售，所以遇到数字我们一定要提取放大，同时针对数字做出刻画。今天讲到的文字处理方式仅仅只是一小部分，后续我也会持续更新更多的内容。平面设计小课堂！10个让主体更加出彩的实用技巧今天看见周练群的小伙伴想找一个关于主体刻画强化的文章，正好咱们视研设还没更新过类似内容，本文给大家简单总结几个实用的方法，让大家学了以后可以马上尝试应用在工作练习里。阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/information-transmission-method
业务 希望大家 流程 hello~好久不见~~这次分享内容是一个比较不错的从业务侧到产品方向以及最后推导出设计方案的完整流程~相信对于很多小伙伴设计思路方面会有一个比较大的帮助，也可以更好了解一个产品设计推导方式，为了方便大家理解我加入比较多的说明和分析，希望大家能有启发和帮助。就像最后说的，设计环节除了输出业务给予的需求，同时能够影响业务结果的商业价值，希望大家的设计都能为整个项目业务赋能（赚大钱）最后祝大家新春快乐啦~（记得一键三连）（PS：该项目设计部分分享已经过相关负责人许可）如何系统化的思考设计改版？我总结了这个流程！最近有小伙伴问我，设计改版时候要怎么启动，该怎么思考？阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/momo-redesign
图标 风格 视觉 前言做好图标设计是一个入门级 UI 设计师的必备技能之一，图标是界面中非常重要的组成部分，在实际的工作中，即便是一些工作多年且有一定经验的设计师，也很难保证自己设计的图标有多么完美。不同位置的图标在界面中所起到的作用不同、风格也不同、其设计思路更是有所区别，例如金刚区、分类、标签栏、服务工具等。用图标准确的表达出实际含义，仅仅学其「形」是不够的，需要对图标有较为全面、系统的认识，了解图标的相关概念、正确的绘制方法及处理好一系列的细节，本篇文章将介绍图标设计的具体方法及要点，帮你规避掉一些常见的问题，让图标设计有理有据。本期大纲图标的定义常见的图标风格性格与气质设计规范与流程常见问题及注意事项图标资源总结图标的定义1. 什么是图标？图标是一种具有高度概括性的图形化标识，在界面中与文案相互支撑、搭配使用，隐晦或直白的表达内容的具体含义、属性特征、形象气质等丰富的视觉信息。从概念上来讲，图标可分为广义、狭义两种，广义指的是现实世界中的图形符号、且有明确指向的含义，而狭义的图标指的设备界面中的符号，这些设备泛指承载互联网产品的载体，如手机、电脑、iPad…等。在 UI 设计中主要具是针对狭义的概念。图标设计是一门学问，在我们的认知中，通常将图标理解为某个概念的抽象图形，通过设计清晰易懂的图形传达出比文字更高效率的信息，同时提升界面的美观程度。想要将图标设计的更加出色，则需要频繁练习、不断试错、持续探究并尝试新的风格，所以很值得我们花费大量的时间去钻研练习。2. 图标的基本特征一个界面是由文字、图标、几何图形、图片（音频、视频）组成，从 UI 设计师的角度，相对来说，其他三种元素大多运用到的是排版技巧，而图标则是需要绘制、创作的元素，在没有图标的情况下，纯文字也可以代替，可为什么贵还要费力费时的设计图标呢？原因主要有两点：首先，图标作为一种图形符号的存在，跟文字的复杂程度相比，在识别效率上有着先天的优势，因文字需根据语种、长短的不同，所占用的界面空间资源就不同，在文字较多的情况下，大大减低了用户浏览速度及信息传达的效率，固图标将文字信息进行了浓缩。好的图标不仅易于识别、效率更高，且让界面更加简洁，所以我们常见的图文结合界面，绝大多数都是图标在上、文字在下，或者图标在左、文字在右，这些设计足以说明图标视觉传达的优先级高于文字。其次，不同风格、样式的图标能让界面看起来更美观，提高用户的视觉舒适度。设想一下，如果界面没有任何图标的点缀，即便用户也能使用，但看多来多少都有些枯燥无味，全部用文字来理解内容还容易引起视觉疲劳。常见的图标风格1. 扁平风格扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义，并通过不同的色彩体现出不同的视觉效果，最常见配色有以下几种：单色：简洁、清晰视觉效果，常见于基础功能图标。例如：B端功能入口，移动端个人中心、二/三级页面的工具栏等，也有很多app的金刚区利用底色块衬托反白的图标。双色：是很常见的功能性图标，至少由两个以上的元素组成，在单色的基础上加以色彩点缀，让本身就不是很突出的元素不再单调，如果融入品牌色，能提升整个界面品牌调性，适用场景跟单色图标相比则范围更广。多色：至少由三种或以上的形状、颜色组合而成，常用于金刚区、产品分类列表、定制化菜单等。渐变：渐变色的图标显得较年轻化，可以是单元素的渐变或多元素的渐变组合，能映射出一种活泼、热烈的氛围。例如：视频、直播等娱乐类型的APP，或车载UI等。不透明度：调整图标中某个元素的不透明度，可在不变换色系的情况下丰富配色细节，还能与底色融合的更加细腻，解决多色渐变视觉跳跃的问题。另外，在 UI 界面中，扁平化风格图标使用最多的当属线性、面性、线面结合这三种类型。线性线性图标主要是通过线条描边勾勒出来的图形，在界面中的尺寸普遍偏小，其线条不能过于复杂，否则将会影响辨识度，看似不多的简单线条搭配不同的色彩，则有很大的调整空间。面性面性图标主要通过剪影的形式来制作抽象的形体，相比线性图标则面积更大、视觉层级更高且更有体积感。通过不同色彩填充、切割手法塑造不同的设计感，以达到多种视觉表现的效果。线面结合线面结合的图标既有线段或轮廓、又有填充的色块，相比纯线/面性单一样式的图标则细节更加丰富，如果把控到位，会有更好的视觉效果及信息传达的效率，也不失趣味性。2. 拟物化风格拟物风格的图标主要通过细节和光影、根据现实世界中的物品塑形打造出图形立体效果，非常考验设计师的造型绘制、技法表现能力。这种风格的图标有着极强的代入感，能让用户快速领会图标所传达出的意图及气质。因为拟物化图标信息元素的高复杂度及突出的视觉效果非常抢眼，在页面中频繁出现会成为干扰其他信息的存在，游戏类应用中使用的非常普遍（不过多赘述）。在其他类型的应用中，大部分出现在营销类型的界面，例如专题页、成就榜、会员中心等。3. 轻质感风格跟拟物化图标相比，轻质感就不会有太多复杂的元素，主要通过各种色彩渐变、发光、投影等图层样式体现出非常柔和的立体感，整体风格偏年轻化，给人轻盈、简洁及精致的感觉。在设计过程中，请使用干净且和谐的配色，主要使用在界面较大区域的位置。4. 磨砂玻璃风格不仅仅是页面背景有毛玻璃风格，图标的毛玻璃风格也很出彩，主要通过背景模糊、叠加、剪切图层来实现（网上很多教程）。轻量渐变搭配毛玻璃的朦胧感，可以体现出图标的质感与神秘感。实战案例！「毛玻璃拟态」图标的临摹思路与原创技巧这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。阅读文章 > 除上述这几种风格的图标之外，还有例如 2.5D、3D、像素风、新拟态…等，但在 UI 设计中并不常用，就不一一举例说明了。性格与气质1. 性格走向（描边/拐角）力量型：粗线条、直角拐点，给人一种力量、狂野的感觉，常用于体育、健身、机械类型的产品；可爱型：粗线条、圆角设计，看起来活泼可爱，给人舒适、饱满的感觉，在儿童、教育类产品中很常见；严谨型：细线条、直角拐点，看起来工整、严谨，中规中矩，适合政府、法律类型的产品；精致型：细线条、圆润的拐角，柔和、干净、纤细且精致的感觉，很适合极简风格的设计，在艺术、金融、珠宝等奢华类产品中比较常见。2. 动态效果如果想要突出金刚区、工具列表中的某个功能入口，将图标设计成动态效果，既能保持整体图标风格的统一、又能单独突出功能的重要性，起到强调的作用，用来吸引用户的注意力，引导用户操作，提升其点击率。切记动效图标不能过多，当什么都突出了等于什么都没有突出。其次，在年轻化、娱乐类型的产品 Tab 栏中的图标切换时，加入动态效果，可起到画龙点睛的作用，还能通过动效表达出不同的情绪，降低切换时的枯燥感，好的 Tab 动效能传达出整个产品的气质。超全面！大厂都在用的 Tab Bar 图标动效设计类型总结Tab bar 作为整个 APP 的第一触点，给用户传递的理念及信息在整个 APP 中具有不可替代的重要性。阅读文章 > 最后，如果有类似运营或短期内的活动，需要吸引用户注意但又不适合固定在界面中的某个位置，这时可以设计一个动态图标悬浮在设备某个位置（注意用户体验及交互原则），既不过多的占用页面资源，还能同时显示在多个界面，一举多得。动效图标：@墨染 ART 授权设计规范与流程遵循图标设计规范有利于设计师之间的合作及接下来的设计，以及产品整体图标风格的统一性，起到约束的作用，即便在更换设计师的情况下，也不至于出现较大的问题。在制定合理的设计规范前需要先了解图标到底有哪些规范，应从哪些方面入手，以便接下来的图标设计顺利进行。1. 网格尺寸比例为了保持图标元素的平衡，尺寸大小需要保持一致，通常我们会建立基础网格尺寸进行图标的绘制，常见的网格尺寸有 16、24、36、48、64、128、512、1024，这些网格尺寸并非固定，也会根据设计中的特殊尺寸而变化。一个图标系统包括网格尺寸和图标元素两部分，设定好网格尺寸后，就需要用 keyline 来约束图标形状的长、宽比例了。最终设计的图标大小并不是跟随网格尺寸，而是根据不同的形状占比受制于图标 keyline，最终形成统一的视觉大小。从上图中可以看出，相同尺寸的图标在真实的视觉中相差很大，这就好比一个 100 像素的圆形、跟 100 像素的方形相比，站在逻辑角度，大小是相同的，但在视觉上，一定是方形显得更大。所以我们常说的图标大小相同，并非真实尺寸，而是视觉感受。2. 图标 keyline为保持图标视觉上的一致性和平衡感，需要先绘制 keyline 用来指导、规范图标设计。keyline 由圆形、正方形、长方形-横、长方形-竖、三角形和对角线组成，网格的大小需保持 4 的倍数，便于不同尺寸的图标都能适配，可使用 24*24px 的网格尺寸为基准，其他尺寸的图标可通过增加倍数以此类推，如 48*48px、72*72px……下图是以 24px 尺寸的网格参考基准示例（出血为 2px）：3. 确定图标风格根据产品属性及目标用户并结合应用场景，找到最符合自身产品性格、气质的图标设计风格，例如健身应用属力量、粗犷类型，圆角、曲线适合女性产品等，在前面的「性格与气质」中有举例说明。4. 图标绘制经过图标风格的确定，图标细节便是接下来绘制过程的核心部分，对线性图标来说，注重的是线条的粗心，而面性图标则注重各小图形之间的距离，所以在绘制时，需要保持线条、间距的统一，方便后期的图标更新迭代。线性描边粗细我们以 iOS@2x 为基准（避免@1x 的 3px 描边变成 1.5px，小数点），可适配最 2px、3px、4px 最常用的描边粗细，4px 视觉较重，用于优先级较高区域的功能性图标，2px 看起来会显得更加精致，在设计中，还需根据产品的行业属性及调性来确定描边的粗细，并统一起来。面性正负形间距面性图标需要确保每个单独的形状之间有足够的间距，以 24px 大小的形状为例，其间距不能小于 1px，以此类推，虽然未规定上限，但间距也不宜太大，否则无法相互组合关联，以实际视觉的舒适度为准。5. 创意提取根据行业类型及风格进行创意设计，如线性统一断点、融入品牌基因、单个元素倾斜、节日氛围烘托、修饰元素等，为图标塑造灵魂或传递更多信息而进行的二次创作。如何强化图标设计的品牌基因？我总结了12个方法！随着互联网产品的不断发展，产品设计越来越成熟多样，而同质化的设计也变得越来越严重。阅读文章 > 常见问题及注意事项1. 识别性图标存在的意义，主要是为了快速传递信息，不能让其成了无用的装饰品。随着互联网的普及、时间的积累，人们对一些线上图标信息的隐喻已根深蒂固，早就形成了惯性思维，所以我们设计的图标必须要符合用户的认知，能让用户快速理解，即便出现个别特殊情况，也要用文字清楚的标注说明，否则一旦让用户产生疑惑，图标就起了负面作用，在很大程度上影响使用体验。符合认知的图标能让用户下意识的理解且接近心理预期，减少学习成本，提升使用效率。2. 简洁美观图标是将现实世界中的事件/事务用抽象的图形表现出来，如果过于追求完美而设计的太复杂，还不如直接上图片来的快，所以不能过于展现真实物品的细节，最终设计出正确而不失真的图标尤为重要，这样既能用于传递信息，又便于用户快速且清晰感知。3. 视觉对齐为确保视觉平衡，异形元素在使用系统自动对齐后，会有一定的偏差，需手动微调进行视觉对齐。为什么你的图标看着不舒服？如何打造视觉平衡：正确的尺寸+视觉对齐+完美的圆角修饰。阅读文章 > 4. 保持一致针对大型项目，要想整个家族的图标更加和谐，保持相同的样式及设计原则着实不易，尤其是在多人完成设计的情况下，事先有一个清晰的设计原则和规范是必不可少的。图标都有着对应的视觉重量，例如描边粗细、填充模式、繁简程度等属性，需要做的就是控制好这些关键因素，让整体看起来视觉重量相同且能相互关联组合到一起，保持所有图标的一致性。5. 最小间隙单个图标的各元素之间要有呼吸感，需要适当的留白，如果描边过大，整个条看起来感觉像糊成一团或臃肿不堪，如果存在类似问题，可通过减小描边值或降低图标的复杂程度来解决。6. 使用 2 的倍数以偶数为单位的设计便于数据的计算（2 的倍数），例如正负形间距、描边值等，在 iOS@2x 设计下，@1x 也不会出现小数点。在移动端设计中，最小的图标为 24px，可被 2、3、4、6、8、12 整除，也是可以被整除最多的数值，因此，可灵活的等比缩放。7. 延展性即便做好了前面的一切，图标设计工作也并未完成，需要做的是持续测试图标的可用性，做好后续的完善与优化，没有最好、只有更好，以确保上线后的效果和后续的迭代。图标资源库阿里巴巴矢量图标库： https://www.iconfont.cn/ ，90%以上常见的矢量图标下载；飞书官方图标库： https://iconpark.oceanengine.com/official ，海量资源可在线修改，调整描边、填充、单/双/多色、端点后下载 SVG 格式图标。虽然上述图标资源基本能满足我们的日常设计所需，但仅仅只能是作为参考而已，一味的图方便、投机取巧只会毁了自己的动手、创新能力。结语图标设计是一个非常庞大的版块，且有很多个分支，例如：金刚区、标签栏、应用图标…等，每个分支都有自己的一套设计法则，我们需要在不断的学习与创新中获得更多经验。一篇文章不足以道出图标设计的精髓，但可以在不断沉淀、相互探讨、持续的学习中一起进步。下篇「图片」文章再见。欢迎关注作者微信公众号：「能量眼球」本篇来源：优设网原文地址：https://www.uisdc.com/basic-guide-to-icon-design
表格 表头 单元格 虽然我们按节奏只剩最后一篇交互部分的，但感觉前面有不少需要优化的地方，所以干脆重新整合，一起优化一遍！往期回顾：超详细！总监出品的B端设计规范指南（一）：布局在 C 端设计中，不管是给车载客户端、手机客户端、电脑客户端设计界面，都有比较具体的规范需要我们学习和遵守。阅读文章 > 超详细！总监出品的B端设计规范指南（二）：字体[link https://www.uisdc.com/b-side-design-specification]第二篇，我们就要回到 UI 整个类目里最麻烦，也是最重要的规范类型——字体。阅读文章 > 超详细！总监出品的B端设计规范指南（三）：配色B 端设计也是 UI 设计的一种，它的输出环境只存在于电子屏幕中，所以统一使用 RGB 色彩显示模式即可。阅读文章 > 超详细！总监出品的B端设计规范指南（四）：控件第四篇我们全面认识一下B端的控件设计。阅读文章 > 超详细！总监出品的B端设计规范指南（五）：控件下面，就回到我们之前停摆的控件讲解，继续认识控件有关设计的内容。阅读文章 > B 端设计指南（六）：数据图表怎么设计？基本的控件单元完成后，下面就要开始介绍 B 端设计的另一座大山，图表的设计了。阅读文章 > 大家好好阅览，再一天就收工各回各家各找各妈~1. 表格是什么，为什么重要表格已经是现代电子计算机系统中重要的组成部分之一，从小学开始，我们就已经在电脑课上学习如何使用 Office Excel 来制作电子表格。那么我们为什么需要使用表格呢？因为我们有记录和查询数据的需求。在任何商业活动中，都会产生大量的数据信息，虽然我们发明了 SQL、Mysql 等数据库语言记录数据，但最原始的数据记录是没有可读性的。所以，为了让数据可以更好的展示，我们就必须借助可视性更强的图形工具，即电子表格。通过 X、Y 轴构建的网格系统，将数据有序、清晰得罗列出来。表格的重要性就体现在企业日常工作中对这些数据进行管理的需求和频次上。例如为电商 APP 开发了一套管理系统，那么电商运营每天的工作，都要绕着其中销售、物流、流水等重要模块的数据打转，也就是围绕着表格展开工作。对于多数管理系统而言，数据查询、管理都是非常重要且高频使用的功能，所以常规项目中会包含大量的表格页面。甚至，有的中小型项目的所有导航一级页面，只有表格，而不存在其它页面形式。所以，表格的优劣对用户工作效率和平台体验可以产生决定性的影响。而优秀的 B 端项目表格又不能只像 Excel 一样可以使用固定的模版，不同项目、页面、模块对表格的可视需求天差地别，需要根据具体情况具体分析。所以，这也是 B 端设计师的价值之一。一个优秀的 B 端设计师势必投入大量精力来提升对表格的认识和表格设计能力。2. 表格的主要构成模块表格虽然细节设计上千差万别，但在表现形式和阅读顺序上却是基本一致的。常规的表格必然包含表头栏、列表、翻页器三个部分，根据需求的不同，可能还会增加搜索栏、多选栏、操作栏等常见模块。搜索栏主要是用来进行简单的数据搜索和筛选的，当搜索项较少的时候，就可以将搜索结合到表格组件内。而搜索项较多时，则会把它们独立成一个筛选模块到表格组件的上方。表头栏每个表头代表一个对象的属性，决定了下方每行对象要显示的数据类型数量。通常，表头的设计会和下方列表设计有一定的区分，表头文字有一定的标题属性，所以会通过背景色、分割线、文字加粗来增强对比。列表列表则是纵向排列数据对象的模块。每个数据对象占一行，行的高度根据内容来制定。横向列表高度和纵向表头宽度重叠的区域称为单元格，每个单元格展示表头对应的数据明细。常规 B 端项目表格都会限制列表一次展示的行数，极少使用无限滚动加载的模式。因为当数据包含成千上万条时会对本地、服务器性能和交互方式带来一系列的负面影响。多选和操作栏如果数据对象支持多选和批量操作，则我们会在第一列中添加选框，并将选中后的可操作选项放进操作栏中。翻页器翻页器是切换列表页面的控件。通常大数据量的列表包含上千页，所以翻页器只会显示开头几页和最后一页，省略中间的，并增加适合快速跳转的功能。除了表头和列表内容外，其它模块内容都根据实际需求应用。任何表格设计的第一步都是制定大框架，即包含的模块和对应分布位置，再展开后续的细节设计。B 端项目支持响应式是今天行业的普遍需求，也就是页面内容随着浏览器视图宽度变更而变更。不同页面类型的响应式逻辑各不相同，而表格是其中逻辑最复杂，也最难理解的一种。表格响应式规则通常在确定好框架以后制定，优于视觉、交互设计，因为它对视觉和交互产生的影响非常大，是前置条件而不是通过设计稿逆推出来的。表格的响应式规则比较细碎，我根据下面的顺序展开解释：表格的总宽响应表格的最小宽度单元格的响应逻辑内容的响应逻辑2. 表格的总宽响应表格的响应主要是宽度上的响应，整个表格的宽度区域随父集元素的放大而放大。比如父级元素左右内边距为 20px，则表格整体宽度保持和父级 20px 的左右间距。2. 表格的最小宽度上方逻辑中表格可以无限延长，但它却不能无限的缩短，因为你不可能做一个只有 10px，20px 宽的表格。过窄的表格不仅支持不了内容的正常显示，也毫无任何使用体验，所以我们要为表格确定一个最小的宽度。即浏览器视图即使比这个宽度更小，表格也不会再缩小了。最小的宽度可以结合前端栅格系统使用的 Breakpoint 规则来制定，如 Ant deisgn 中 SM：576px，或 MD：768px。如果不了解删格的段落规则，也可以 “凭感觉” 定，最小表格宽度通常在 560640px，当然，不管怎么定一定要提前和前端沟通，确定尺寸方案。当表格内容少的时候，最小宽度只是相对较大宽度窄了一点而已。而当表格内容过多，最小宽度无论如何也不够放的情况，那么就会使用横向滚动的交互形式来隐藏超出内容。3. 单元格的响应逻辑单元格响应这是整个表格最复杂的一环，横向内容会超出最小宽度的情况，就是由单元格规则决定的。首先，单元格本身也有最小宽度，原因和前面一样，1px、10px 宽的单元格没有存在的意义。所以可以根据需要，制定多个等级的最小单元格宽度，应用在不同的数据类型中。假设表格中包含了 20 个表头，分别使用了 10 个最小 24px 和 10 个最小 80 px 的，那么单元格的总宽最小就是 240+800 = 1040px。所以当父级整个表格视图小于 1040px 的时候，内容就会不够显示从而触发左右滚动的条件。当上级表格宽度大于单元格最小总和时，那么单元格也就会随之变宽。最简单的响应逻辑，就是为单元格宽设置百分比。比如 5 个单元格分别是父级宽度的 10%、10%、10%、20%、30%、20% ，那么在父级 1000px 的时候它们分别是 100px、100px、100px、200px、300px、200px。只要确保百分比的总和是 100%，不管你单元格是比例均分（5 个单元格等分各 20%宽），还是独立制定（上面案例），单元格宽都是等比缩放的状态。虽然好理解，但这种初级的做法带来的问题也很多，那就是部分单元格没有被 ”放大“ 的需求。比如常出现在第一列的多选框，或者部分标签单元格、固定操作按钮单元格。于是，为了预留给有需要的单元格更多的空间，提升体验，就会对这些单元格实施定宽的方式，剩下的单元格继续使用等比，只是计算的方法要减去定宽元素。比如还是一个占比 20% 的单元格，在包含 2 个 48px 定宽单元格的 1000px 表格中，实际宽为：（1000px 2*48） * 20% = 180px4. 内容的响应逻辑作为单元格的子级，内容也可以独立定义响应的规则。主要包含 3 种情况：无响应隐藏多余换行显示无响应就是显示的内容是固定的，比如多选框、缩略图、单按钮等单元格内容，它们没有大小变动的必要。隐藏多余，则是主要应用在文本内容上，当单元格宽度小于当前文本所需宽度时，就会把多余的文字进行省略，这种做法适合应用在一些原本就不是太重要的信息上。比如原本是 ”上海徐家汇南丹路天主教堂一楼“ 变成 ”上海徐家汇南丹路天…“，之后再通过鼠标悬浮弹出文字气泡框的方式显示所有文本。而换行显示，则是文本或多标签状态下，一行不够显示就换行的做法。除非一开始单行行高预留了多行显示的高度，否则多行内容就会撑高单元格。以上就是表格在响应式模式下相关知识点。随着经验的积累，实战经验丰富的 B 端设计师，就会在前期的规范环节制定出完整的表格响应逻辑，应用到前端框架开发和后续的设计，而不是做到哪定到哪。1. 表格框架的操作表格首先是一个展示信息的组件，而单纯依靠布局和排版技巧，并不能解决所有的信息展示问题。所以，针对网页表格的局限性，我们要添加一些交互的细节来提升使用体验。例如，单页表格数据量较大，有好几屏高，往下滚动后看不见表头，不能很好的识别单元格内容。或者，表头属性数量较多，需要左右滚动，但是每行数据要不然操作栏目看不见，要不然对应 ID 被滑走了等等。所以，表格的框架就可以做悬浮固定的模式，将需要被持续露出的栏目悬浮固定。表格的默认状态表头悬浮效果右侧操作列悬浮左侧 ID 列目悬浮操作栏悬浮效果当然，除了单独栏目的悬浮，也可以使用混合模式，比如表头吸顶的同时固定右侧的操作栏。尽量将固定元素控制在 3 个以内，以免悬浮要素太多影响内容的浏览。还要注意，除了笔记本触摸板和少数鼠标，一般用户是没有页面左右滚动滚轮的，所以当表格出现左右滚动情况以后，就一定要默认展示进度条，方便用户操作。2. 表格表头的操作第二步，就是和表头相关的操作了。我们都知道常规表格页面中，表格上方还会有个筛选区域，专门用来进行筛选相关的条件制定。但是，部分项目需求中，会将筛选的功能整合到表头栏目内，而很多新手甚至不能有效的区分筛选和排序的差异。我们先对这两者做一个明确的定义：筛选 Filter：对要显示的内容设置筛选条件，不符合条件的将会被过滤隐藏排序 Sort：对已有内容的显示顺序进行条件设置，不会有内容被过滤或隐藏这看起来好像很容易理解，但会搞混的地方就在排序的应用上。我们常规以为的排序，就像电脑文件夹列表一样，通过点击表头来决定内容通过哪个属性来进行升序或者降序。在这种 “朴素” 的设定中，筛选是以单个表头属性为标准的，有唯一性。比如在学生数据表格中，可以以 ID、姓名、年级、年龄或成绩单个属性进行列表排序，选中其中一个属性其它属性的排序就被取消了。但是复杂的排序并不是 “唯一属性” 的，而是多个属性的并集，以及具备优先级和排序模式。还用学生数据表格举例：优先根据年龄降序排列，同年龄下根据班级升序排列，同班级再根据成绩降序排列。这里面叠加了三个属性，年龄优先级最好，然后班级次要，成绩最后，我们用图表的展示可以实现出下面这样的形式：再进一步，这是我们条件已经确定才做出来的组件，要是要制定的属性不确定，要制定的属性数量也不确定，顺序不确定，排序模式也不确定……这种情况就肯定要应用排序自定义条件的逻辑了，而表头自定义一加，那逻辑就立马复杂了，它的操作面板可能就长下图这样。排序复杂了，并不代表筛选就不要了。部分项目的筛选除了在表格外的独立筛选区域，还可能应用表头筛选模式。即以单个表头纬度设置筛选条件，比如点击 “年份” 表头，设置起始和结束时间。所以，只包含筛选的情况下，表头的图标就不是排序而是漏斗，点击后就要展开筛选设置面板进行操作。而当多表头筛选和多表头排序需求并存的时候，怎么解决？这里只建议在表头中留存筛选选项，因为筛选可以实现并集关系，即前后任何表头添加筛选项都可以组成完整的筛选条件。但是，这种交互难以完成筛选优先级排序。所以，我们要将排序独立成一个按钮到表头之外的地方，而不是强行让两者并存。尤其是不要设计出有的表头是排序，有的表头是筛选，甚至表头的按钮展开面板里又会有筛选又有排序……表头是针对列的操作，而针对行的操作，就是对单行列表的选择、展开和进入了。前面我们有说过，表格第一列往往放多选框，通过点击选择当前列表行。它本身的交互并没有太多需要注意的，只要针对行的交互如果不止选择应该如何平衡。部分复杂项目喜欢在表格中添加 “套娃” 的需求。即单行数据可以向下展开二级数据，或者更进一步到三级、四级。同时，每个数据行往往还关联详情页面，需要点击展开后查看更细节的信息。所以当多种操作需求混合出现的时候，我们就要具体分析这些需求的优先级了。到底是多选操作频率最高，还是查看下级行，打开详情页。这是为让点击整个数据行这个最便捷的交互可以关联到最高频的操作上。而其它低频操作的交互则只限定在对应的按钮或图标上即可。因为多选需求往往需要我们在一系列数据中选择很多条数据，一个小小的复选框不仅选择起来麻烦，且通过查看右侧的内容筛选数据行，再用右手握鼠标按需点击最左侧的多选框，是非常别扭的体验。还有一个需要注意的细节，就是当多选和展开下级列表共同出现的时候，选框和展开图标的排列。通常一个数据行第一列的内容，应该是整行逻辑层级最高的元素。如果子数据行是被独立出来需要单选，那么展开图标就要放到选择前面。如果选择数据包含了该行和所有子行，那么选择就应该在展开图标前面。当然，如果展开数据和父集就完全不是一种类型，用另一套属性，那么它也就没有被同时选中的需求和可能，不需要为它添加选择框。所以，这种情况下多选框也应该放在第一位。最后，就是解决单元格的交互了。常见的单元格交互可以总结成下面这几类：点击打开页面点击复制内容点击修改内容悬浮提示说明点击打开页面很好理解，比如单元格内的数据是链接、图片、按钮然后实现跳转或弹窗。而复制内容，则有一些需要注意的细节。表格中有一些数据是没有实际阅读意义的，它的存在就是用来做特定的校对或者是复制出去，比如 ID 号、哈希值、订单号等。常规的做法是直接在右侧添加一个复制图标，但对于一些偏复杂的表格来说，所有可复制的单元格都加复制图标是非常影响浏览体验的。所以，我的建议是都是默认隐藏复制图标，只有当鼠标移动到对应单元格的时候会显示。同时，这个图标可以覆盖到数据上层，因为既然鼠标移动过来为了复制，那么数据被遮挡在这阶段自然无关紧要，为整体页面预留空间。这样的操作按钮隐藏浮现方式，也适用于单元格修改的操作。但是，和复制不同，单元格信息编辑通常是编辑文本信息，还有后续的操作步骤。如果点击进行文本编辑，那么建议在该表格打开一个新的输入浮窗，且浮窗内输入框文本和原来文本位置持平实现顺畅的步骤转换。同时建议，为了防止误操作，尽量增加确定、取消按钮，防止误操作覆盖原有数据且无法撤销。最后就是单元格的悬浮提示了。B 端控件中的气泡框就是用来做提示的控件，但它只是手段。为什么需要悬浮提示，提示什么内容是我们需要考虑的。对于及其复杂的表格来说，往往是没办法支持所有数据都完整展示的，我们会在使用省略号对它进行截断。但截断不意味着用户完全不需要在表格查看到完整的信息。所以，就可以通过气泡的做法，将信息呈现给用户。而呈现过程中，尽量确保鼠标可以移动到气泡上复制里面的文字内容（和全部复制不一样），而不是鼠标移走就直接关闭消失。熟练运营这几个交互方式，并统一对应的使用规则，就能确保整个项目的表格单元格操作预期的一致，不需要逐一进行尝试和鉴别。以上就是关于表格设计的全部说明了，作为 B 端设计最重要的模块之一，希望大家可以学以致用。欢迎关注作者的微信公众号：「超人的电话亭」本篇来源：优设网原文地址：https://www.uisdc.com/b-end-form-design-4
手写体 文字 黑体 今天主要给大家带来的是案例实操，为了让大家加深理解我会用一套文案去设计三个画面，让大家看一下变化的过程和思路，好啦闲话不多说下面进入今天的文章吧~这里使用了手写体的英文和黑体的字形。这样做既具备了黑体的高识别的特点，又用手写体的英文中和了调性不至于让文字看起来太过生硬，再加上适当的手写元素融合让信息组的层级也变得非常丰富。造型我们之前已经确定过了要保持曲线的形态，那么看了目前这个设计后我们就明确了内空间的形态，它需要又能承载主标题，又能以曲线的形态存在，最好能同时串联主体和主标题。还记得我们第一稿选择了上下分割构图后，主空间的结构调整为对角结构，这次我们给对角结构调整为上下结构。本次我们还是选用上下分割构图，在主空间内我选用和第一个类似的对角结构，但是左右要翻转一下。本期教程到这里基本就结束了，本次我们学习了如何使用图片，如何强化图片的思路，也知道了很多观察图片特征特点的方法。建议大家可以在私下积极尝试并且和我互动交流。最后谢谢大家的观看，我们下期再见。让设计立马变潮！收好这7个文字排版技巧我猜很多人在工作中都被客户或老板说过，设计不够时尚，其问题可能出在设计风格、色彩、画面元素、排版等方面，所以今天就来分享几个很潮的排版技巧：交叉文字色块即在两个或两个以上的长条色块上排一行文字，然后旋转色块使其交叉，大家对这种排版方式绝对不陌生，效果有点像电影中案发现场阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/copywriting-design
简历 作品集 项目 顺叔原创一万字的良心文章又霸气来袭，熬夜写文章头发都掉不少，只希望能帮助到一些需要的人，关于设计师简历作品集那些事。顺叔想说的话此篇文章内容分为三个大块：第一简历怎么写，第二作品集怎么做；第三关于面试技巧。把这份知识食粮送给那些需要的人。本人在设计行业中工作十多年，不算啥牛人但也算积累了一些经验，愿意把一些经验分享能够帮助到大家。顺叔就是这么热心肠，祝好人一生平安。在找工作前期所需要准备：a.了解各个招聘平台，了解意向公司，基本简历，定制的简历，作品集，投递简历；b.了解都有什么样好的招聘平台；c.了解意向公司的业务、产品、规模、文化、招聘的要求及相关待遇方面，是否是正规公司；d.基本简历就是一些招聘网站在线所填写的基本信息；e.定制的简历就是需要进行优先级的话术，从设计的角度进行简历页面的排版设计；f.作品集也相当于一个比较高级的简历，其中也包含基本信息、获奖、经历，最后放一些作品展示一下实力。一份简历 一块敲门砖简历学问其实很多，并没有那么简单。当登录各大招聘类网站都会在线让填写一些基本信息，比如基本内容、姓名、工作经验/学校、学习经历、个人评价等等。一般当你提交在线简历以后第一个看到你简历的人大多数是公司的招聘专员，经过招聘专员筛选之后会到部门的负责人，一般中小型公司情况是这样的流程，也有 boss 或者部门负责人直接进行筛选。稍微大点的厂子会经过种种考验和筛选，比如简历，面试，复试，笔试，上机….时间上也会比较漫长。所以简历是首要第一关敲门砖。招聘网在线填写基本信息按照步骤如实填写就可以了，通常情况下在线的基本信息，招聘专员筛选完，想更深入的了解你还会要一份电子简历或者作品，那么这个时候就要发挥出自己的能力，设计一个专属于自己的简历及作品集，定制的简历内容就比较丰富了，设计版式和色彩搭配上就可以随意发挥，创意创新的简历。但在自己做简历的时候要注意，记住以下几点。a.如果你是在校学生在写简历的时候，在校经历或者社会实践，实习实践，学生干部等等一些内容要优先展示b.如果你有工作经历了，学校经历并不是那么重要了，要把服务过的项目，在项目中的角色，甚至在项目中的贡献，以及在项目中思考而进行优先。那么自己定制设计一个简历需要注意些什么呢？逐步的给大家进行分享。告诉那些新人们应届毕业生面临着找工作，将是这个阶段最大的挑战，作为学生没有相应的工作经验在找工作的时候会屡屡碰壁，但这样也是一个成长的历练，谁都有过这样的碰壁，在碰壁中成长会更强大。无论是有工作经验，还是无工作经验都需要有一份简历，简历属于个人的说明以及展示，让企业了解你的一个路径，能把你的能力展示在有限大小空间上是有很多讲究，在海量的简历中怎么能有亮点，这个就是需要考虑的问题，只有简历通过才有下一步的面试阶段，所以简历是你的敲门砖。那么在准备简历的时候如何准备，简历中基本内容包括姓名，工作经验/学校，学习经历，个人评价等等。在简历内容中一定要简洁，不要废话太多，简历不是文字越多越好，也不是为了文字凑数，虽然在做简历的时候想的很全面，基本什么都想放上展示自己，没毛病，众多简历中，你的简历简约明了，提取出最优秀的一面展现，这样阅读起来也很流畅，招聘专员在浏览众多的简历中只是快速扫描形势阅读观看。在个人评价中，诚恳认真一点，不要写一些套话，比如什么学习优秀，然后怎么怎么样的，一看就是从哪摘抄的。在写这个的时候可以写一下自己的优点是什么，短板是什么，对于产品的理解，对于交互设计的体会。能总结出一套自己的东西，清晰认识自己才能让人更加了解你。一般还未毕业或者即将毕业的学生，寻找实习机会的时候，公司一般看这个人的几个维度：a.悟性 b.理解能力 c.学习能力 d.设计能力 e.是否有潜力 f.产品逻辑 g.审美能力 h.沟通能力 i.协作能力等等那么还没有到面试的环节对你还不是很了解，只能从简历文字描述中了解，简历就要很诚恳的从这几个维度审视自己的一些能力，认清自己以至于对自己进行一下“包装”还有小伙伴在简历中长篇的写如何对待认真、然后三好学生、又在大学中是优秀干部，实践了些什么，又在哪实习了什么，其实写这些可以展示一下你在学校的风采，没毛病。如果你有过实习经历，一定要优先级写，其后再写学校的一些经历和自己风采，这就是简历在书写中一个小技巧。这样其实跟你阅读一个东西一样，怎么才能先抓住看你简历人的眼球，他们一定是看你有没有与这个职位的相关经验、匹配度、能力模型等等。往往你在学校，什么学生会干部，获得什么优秀干部奖对比之下显得并没有那么的重要了，只是作为一个参考价值而已、有限的区域一定要把有效的最直接的 c 位用好，所以直接一点把你的实习经历优先写。有这么个实例：之前别的部门实习生马上要毕业问我一个问题，顺叔你说简历怎样写，我说：简历简单一些，阅读流畅一些的，看着能有印象的，然后把你在实习阶段的东西多写一些，你在实习阶段的定位、角色、所做些什么工作、负责了哪些工作，在工作中学习到了什么，之后能否驾驭这样的工作。要有条理性的一条一条写一下。这样看到你的简历大致了解你的一个情况，命中率又提升一步。虽然上面的基本信息对于他们来说只是一个参考，更多的是在简历中你有没有学习能力、创造能力、给公司带来价值的能力，简历看似简单，其实还是需要一些技巧，把重要的居上，一般重要的按顺序排列，简历的模块摆放和你设计一个海报是一样的，首先要把人吸引过来，然后再进行了解阅读，从而会联系你，一旦人事联系你那么对你来说是有意向，那么算成功一小步。剩下就是面试准备，以及作品集的准备了。在我招聘设计师的时候发现有的设计师简历中工作履历部分工作经历很“丰富”，工作了三年，能写出工作了五家公司，从设计师角度来说可能多写一些觉得工作经历很多很丰富，但从一个招聘者的角度来说这个对于企业的忠诚度不是那么的高，而且频繁的换工作给人一种不靠谱的感觉。那么有人说了那的确是服务了这些公司啊，但一切都是有技巧的，要从五家公司中进行选择，选择出两到三家写。这个是在简历中的小细节，但也是招聘者看待考量的最大的问题。告诉那些要跳槽的你有工作两年甚至三、四、五年的小伙伴在简历以及作品集的梳理过程中也会出现一些小的问题，我带过很多人，也算是桃花朵朵开，其中有一个干了两年的小伙伴有更好的机会要去深圳大厂，属于内推，但需要一份简历，当他设计完简历之后我给予了很多建议，比如他把在学校获奖，以及学校学生干部等等写在前面，然而工作两年参与的项目放在后面，这个就是出现一个问题，都工作两年了，应该把工作经历侧重点放在上面，最显现的地方，然后学校的侧重点并不那么重要了，可以放在后面，甚至不写也没问题。因为已经脱离学校，工作两年多，更多是展现工作中的状态，只要把基本信息、个人信息、学校信息写上就可以了。简历也是一种心理学，是一个让彼此都陌生的人进行首次了解的一个途径，一般在招聘平台上填写的基本信息以外，还需要一份漂亮的简历，那么这份简历包含了基本信息、作品、以及设计上的包装。形式可以多种多样的进行展示，可以是图片的形式，可以是 pdf 形式，也可以是 html5 形式，ppt 形式，也可以是视频动态的形式，电子杂志，word 形式，等等。但作为设计师来说需要有一份属于自己的简历，这样拿出手至少不跌面。同样从简历的设计就能看出这个设计师的品味如何。对设计细节的一种强迫症，设计师对于简历可以新颖，创新，创意一些，设计师需要这样发散性思维的人，这个也是评判参考之一。简历格式众多形式，最终还是推荐用 pdf 格式最为靠谱一些，可以从设计角度，版式角度，配色角度进行设计。有工作经历的除此基本信息以外，着重要写在工作时候的经历和状态。参与的项目，对于项目的理解，设计思考，在设计中的角色，定位，以至在项目中所沉淀学习的，对于一个项目的总结和看法。有工作经验的小伙伴一般考核的标准是，设计能力，设计阅历，设计经历，是否有项目经历，项目承担的角色和定位，学习能力，提高能力，服从能力，配合能力等等。不敢说所有企业需要标准都这样，但大多数在考量一个应聘者时候基本都会从这几个维度考量，在简历中把这些进行书写完之后那么剩下就是拿作品说话了。简历是一个敲门砖，但这个砖怎么敲上述已经说的很明白了，小技巧，大作用。如有遗漏没有说到的欢迎各位补充。了解招聘定位简历都写完了，那么也需要了解一下都有什么样都招聘定位，以及什么样招聘平台渠道，只有更好了解才能更精准的简历投放有效果。首先招聘定位，一般在企业招聘中有社会招聘，有校招，有项目招聘，也有实习招聘大致分这几类。a. 社会招聘：社会招聘就不用多说了，一般都是参加工作或者参加工作很多年，招聘都是成熟的设计师，来了就能干活的那种。这种要求设计师具有一定的设计能力，以及能把控设计风格，能独立进行设计。如果这些都不具备，企业招你来干什么呢。b. 校招：校招一般大厂会在自己网站挂校招信息或者在每年的一个时间节点到名校进行宣讲会，进行校园招聘，挑选优秀的大学生作为储备。其实校招能进去也是一件幸运的事情。c. 项目招聘：项目招聘一般都是项目制，不属于编制以内。跟项目走，一旦项目结束也有可能会导致解散风险，但也不是那么绝对，也许这个项目结束会有下一个项目，只要能力在不怕没项目。d. 实习招聘：实习招聘一般都是在校大学生或者马上要大四学生，从学生的角度来说可以得到锻炼，从而有实习的经历，为正式上岗作铺垫，另外可以开具实习证明。从公司角度来说，实习生可以协助设计师做一些辅助基础的工作。实习招聘进来也算是幸运的，一个还未毕业的刚进公司能不添乱就不错的了，一般不会有太多时间进行指导或者怎么样。可能都会靠自己悟，但要是遇到一个不错的导师就不同了，那么你就很幸运，好比我！～～～但一般能力，悟性，学习能力都有的，转正其实也不难。了解招聘定位1. 简历投放渠道简历投放渠道其实很多，比如本地的招聘会或者本地人才市场招聘网，大厂官网招聘频道，各种招聘网，企业内推，设计群，猎头，被别人推荐等等。a.本地人才市场：一般会有一些招聘的信息，可以根据匹配的招聘信息进行筛选。b.大厂官网招聘频道：一般设计团队官网都会有招聘信息，甚至有投放邮箱，但这种投放成功概率很小，石沉大海可能性比较大。c.招聘网：现在很多招聘网，大家常规找工作都会到招聘网上，但大家在投简历时一定要多多进行筛选，不要盲目投送简历，广撒网的形式并不是最好的结果。首先要看工作要求，匹配度，公司的背景，公司地址，企业的文化，甚至产品，诚信，业务等都需要进行考量。d.企业内推；一般进大厂，能力够用内推还是比较靠谱的，成功的概率也会高一些，但也需要经过很多轮的考验，只有真金才不怕火炼。坚持住考验，你就是最靓的仔。e.设计群：设计群招聘信息也算是比较快捷的，基本都是同行交流，可能会同行的公司招人，或者同行的同行招人在群里通知，也可以进行了解。f.猎头：一般设计师很牛了，在圈子中也有一定的影响力，设计能力也没得说，就可能会有猎头找上你，高薪工作机会很大。g.被别人推荐：被人推荐的感觉一定很爽，这个必要条件是能力好，口碑不错，有一定的知名度，一个地方如需要你这样优秀的设计师，可能你的朋友或者认识你的人推荐你。这是个多么幸福的事。以上所说的都是简历技巧方面的问题，下面再说一下作品集。作品集其实也算是简历中的一个部分，设计师求职和别的求职有所区别，不只是需要一张简历，还需要一个够逼格，够创新，够用心的作品集，那么作品集中不只是单纯的作品，作品集要写一些对设计的理解和设计的沉淀，要有一定的注释和文字，图文的搭配更好的诠释作品集的作用，所以作品集在制作的时候也是有一些技巧的，那么作品集应该怎么做？作品集怎么做对于还没有实习工作经历的小伙伴来说作品集的确是稍显尴尬，但这个也有办法解决，现在设计平台很多，大赛也不少，可以多参加一些，无论刚开始设计的好与坏，贵在参与。首先要尝试，如果第一步都迈不开，那么后面需要学习的还有很多，慢慢的学习，参加一些赛事，在赛事中进行磨练，总结经验，设计能力也会提高，然后把在参赛过程中好一点的内容都放到作品集，至少证明你是可以的，只要尽最大能力去做设计，对于没有经验的设计师来说。有参赛的作品就算不是那么完美，当看到作品集时候会觉得具有学习和思考能力；第二就是到公司进行实习，在实习的阶段认真的做一些设计，哪怕刚开始会做一些零碎的设计工作，但一定要把这个当作成长的过程，好的开始。可以把实习阶段做好的作品放在作品集中；第三在学校跟着老师做一些设计项目，从而提高一下设计能力，提前体验在项目中的定位，也可以把好的作品放在作品集中；第四如果上述都没有经历那么就要进行自我学习，临摹。临摹一些作品放入作品集，但临摹不要只是临摹，还可以加入一些自己想法。虽然不太建议临摹的作品放上去，但如果要放一定要写明是临摹作品，因为在后期面试过程中考官会考量临摹对于之后工作是否能有效结合，临摹不能代表自己现在设计能力，但如果真的没有作品可以放一些临摹的，但最好是举一反三，临摹一个可以根据临摹再进行自我创作，这样是最好的。UI 所涉及到的都可以放一些作品作为展示。对于有过工作经历的，挑选一些不同类型的设计作品，比如 WEB 端、网页设计、专题设计、手机端、APP H5 设计、品牌的字体设计，logo 设计、iocn 图标设计，或者有一些线下设计的展示以及有手绘的、插画的、c4d 的作品都可以挑选一些代表作放到作品集中，最好挑选一两个满意的，不要放 100 多个都是很一般的作品，这对于你的简历来说是减分的。不用多哪怕一个做好的，也不要放 100 个不好的上去。然后作品集都找出来之后，还有个加分项是什么呢？就是包装你的作品集。大到一个品牌产品，小到个人的简历，如果不进行包装的话，那都是废，所以稍用一些心，把你的作品集进行排版，版式上简约一些，字体不要用太多类型，从字体大小，字体颜色，字体粗细上进行主次变化，色彩上选出主色调，辅色调，使得页面色彩协调，然后模块与模块化的东西要清晰、这个说明什么，那个说明什么一定要清晰。进行设计美化，也可以根据网页的设计风格，杂志设计风格形式进行作品集排版包装设计。图片来自网络个人作品集进行包装，视觉最大化会显得更专业，也会觉得更用心，印象分又加一分，这就算是一个亮点。然后在最后要对一个作品进行解析，在项目中的思考，设计目的，设计的角色定位，以及遇到问题，解决问题等进行说明会是一个加分项，一般设计师不是只做设计，而是需要思考的，是有温度的，有情感的。所以一般企业也会考量在项目中是否有一些自己的思考以及对产品的理解。无论是有过项目经验的实习生，还是有经验的设计师，在准备作品集的时候首先要定位自己的方向，然后根据方向再调整作品集中的摆放。没项目作品不怕，找办法。简历作品集注意事项a.一般让你再发一下简历或者作品集，估计是你的基本简历得到公司认可，想了解你更多的一些东西，或者内推，也会要定制简历和作品集，但在发作品集和简历的时候，一定要注意自己的文件大小。我认识了做设计将近 8 年的设计师也会犯同样的问题，我内推这位朋友让他把简历还有作品集发送给我，发送时发现居然有 2g 文件，当时我给他的建议是不需要把你做的都放到作品集，要从自己设计作品中挑选最好的作为代表，尽量控制文件大小，不然传输速度很慢，如果是一个对于你很期待的人可能会去等待下载，但如果在众多简历中，这个需要大量时间去下载那么对于你来说胜算很低。最好的方法就是控制文件大小，传输也快速一些；b.现在的作品集和简历五花八门，创意无限，用不同的方式展示自己的简历，比如用视频的形式展示，酷炫，动效，视觉效果很不错，还有的在 ppt 和 pdf 中进行展示，甚至在 word 里。也有的放在网页端展示，或者.jpg、. png 图片。无论怎么样展示，最终就是视觉效果最大化。要考量网络，是否能打开，打开速度如何，格式能否打开，观看是否方便，但在 pdf 输出的比较多一些。在众多展现形式下选择一个比较适合自己的。c.有的把作品集还有简历用压缩包进行打包，其实最好的格式是 zip，因为有的招聘者电脑是 mac 的 zip 格式能打开而 rar 却打不开，因为 zip 在 win 和 mac 都能打开所以尽量都用 zip 格式;d.之前还遇到一个问题就是发过来的作品都是分别在一个个文件夹里，翻看了一个文件夹剩下文件夹有时候也没有耐心都去一个个打开，所以觉得这个并不是最好的展示输出方式，最好是根据包装排版然后在一个页面中进行会更直观一些。e.发送简历作品集邮件命名无论是简历还是作品集都需要有规范的进行命名，也有同学会直接未命名 1 未命名 2 然后上传到邮件。简历命名“ 张增顺简历-UI 设计师”，“张增顺作品集-UI 设计师”前面首先是名字然后这个文档内容是什么，后面是要应聘的什么样的职位，招聘者看着也比较清晰，也能从这方面能体现出求职者本身对于这份工作的期待，以及做事比较认真的表现，还有一方面就是更好的让招聘者知道你。f.在邮件内容书写的时候不要写的太多的文字，只要表达清楚就可以了，说太多“好话”有拍马屁嫌疑，所以就正常写比如：xxx 您好我是张增顺，我应聘的是贵公司的 UI 设计职位，简历及作品集详见附件，请查收。祝工作愉快面试官的感受在工作期间除了设计管理以外还有另外一个角色转换就是面试官，在面试期间我会从根据部门战略需要找一名合适的人，同样会从能力，执行力，潜力，沟通，言行举止，简历作品集等几个维度去考量面试者，作为一个设计师简历作品集是一个主要因素，设计师简历作品集是比较直观的对你短时间的认识和了解的。还有作为一个设计师，如连最起码的设计都没有很好的进行包装，那么就会让人产生质疑，之后对待设计工作是否能胜任和认真。有时候看到作品集包装的很漂亮排版很讲究，那么这个印象就是加分项，面试时拿出你的简历和作品集用能力征服面试官。面试技巧当你约面试的时候，那么你可能是在众多简历中筛选出来的一部分人，那么这些人离成功进了一大步，所以能不能进入公司这个环节也尤为重要。“面试”二字中有个面，是要面对面的，那么面试中我们应该注意什么呢？a.你的穿衣打扮一定要考虑，别弄的左青龙右白虎的，邋里邋遢的，这样印象分就减分了，所以去了从打扮上不要输分，不需要名牌，奢饰品的装扮，但至少给人一种干净，舒服，得体就好。对了！补充一下，设计师面试不需要穿西服，这个有点太过于正式了。设计师休闲一点，干净一点就好.b.交谈，在交谈中一定要很诚恳，首先要倾听。然后要仔细回答问题，回答问题要有逻辑性和条理性。不要一会说这个，一会说那个的，还有就是诚恳聊你的工作能力和学习能力。不要吹~ 吹的天花乱坠，最后进入工作的时候掉链子，能画圆也要圆回来，所以实事求是的去说，虽然需要夸自己能力怎样怎样，但一定不要太离谱，这样工作中你会很难受。我之前面试过刚毕业一两年时间设计师，跟我说在之前公司管理几个人怎么怎么样。承认会有刚参加工作就可以走上人生巅峰的人，但这样人毕竟是少数，那么如果遇到这样刚毕业一年说这些就会让人很反感，有点过于吹大。没必要的话尽量不要说，多听少说，说重点。c.说作品，谈案例在这个环节中面试官会看一下作品及作品集，这个时候就要把一些作品表达清晰一些，首先介绍一下这个作品，然后再针对一个项目讲解一下在做项目时的一些想法，比如从这几个维度来说：项目背景，产品的需求，项目目标，以及在项目中的定位，在项目中遇到的问题，如何解决的问题，项目上线之后产品的反馈，为什么要用这样的设计，为什么要用这样的颜色，为什么要这样布局，交互体验，和用户体验是什么样的。通过这几个点进行讲，首先面试官第一印象觉得你对产品的理解很到位，也会觉得你很专业，这也正是 UI 设计要具备的，而且提供的信息也了解你在项目中所承担的角色，能否承担项目，遇到问题是怎么解决问题的。所以这些信息都是在向面试官展示你的能力。d.面试过程中的确面试者可能会提出一些问题，但面试过程中也是彼此了解对方的一个过程，我的理解是找工作就像找对象一样，可能通过一些了解才能确定下来。面试过程也是彼此的了解，面试者也可以从公司的业务，公司发展，公司背景，公司的文化，等进行了解，同样面试者也在进行考察公司是否适合自己。e.怎么谈到你的期望薪水（第一要了解你的能力为公司创造多少价值及你在工作中的角色，然后根据自己所在城市的消费水平、跟身边的人了解价位、或者招聘网站看一下，一般在谈论薪资的时候 HR 都会跟你玩心理战术，有点像做生意。但如果你是刚参加工作的，那么给你心目中的价格就行。如果参加工作几年换工作的，HR 一定会关心你上一家的工资多少，尽量不要去隐瞒忽悠，这样你的诚信会有很大问题，因为最终都会知道你上一家具体多少钱，没必要隐瞒。）面试时常问的一些话在面试的时候常问的一句话就是“你的职业规划是什么样的”。所以这块大家多多准备一些，不要问的时候就不知道如何回答。一般很少会问你一个 APP 的界面尺寸多大，多宽，这些一般的规范很少能在这个环节去问的，而且面试设计师，如果这个最基本的规范都不懂，那么的确需要学明白了再找工作。还会经常问你参与什么样的项目，或者你在项目中的角色什么样。这个主要是看你在项目中承担了什么样的工作以及角色，最终你在公司中能驾驭得了什么样的具体工作。如果有项目可以说一下，你在项目中的作用，做了哪些工作，哪些是你在主导的。在面试技巧项目作品说明有提到。还有就是关于你案例中的一个作品，会问你在设计的阶段中你的思考过程是什么样的，这块就根据你的作品进行有条理性的说明，你是怎样的想法，把这个你做的项目阐述明白即可。不管是在简历阶段，还是在面试阶段其实还有很多方方面面需要注意以及要了解的。今天面试简历部分就讲到这里，说的有点多，希望你看到这篇文章能慢慢消化。设计榨汁机系列文章继续开始，我不卖果汁，只是希望像设计榨汁机一样，把设计干货毫无保留的分享给那些需要的人，如果觉得顺叔写的对你有所帮助，给顺叔一个赞，你的赞是我的动力。如果还有疑问的话，大家扫码加微信在群里解答探讨嗷。看过60位设计师作品集后，我总结了这些加分技巧距离2021年的金三银四黄金求职季不到100天了，所以关于作品集这个化石级的老话题，我还是得絮叨絮叨。阅读文章 > 欢迎关注作者的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/designer-resume
图像 图片 工具 在这个万物皆可 PS 的时代，一张图片的真假似乎越来越难判定。例如网上突然传出来一张截图，你要怎么才知道这是真的证据，还是 PS 出来的谣言？如何快速鉴定一张图片有没有被更改过，本文就来给大家介绍 8 种可以检测图像更改的工具，来看看吧！EXIF/元数据通常来说，图片生成时是会带有 Exif 等图片信息的。例如用手机拍摄的照片。EXIF 代表可交换图像文件，它用于在使用 JPG 压缩的数码照片中存储信息。网站链接：http://exifdata.com/index.phpEXIF 文件中包含的信息包括手机型号、相机信息，如光圈、闪光灯、ISO 编号、曝光、快门速度、镜头、分辨率、白平衡和 GPS 坐标。而用 PS 处理过的图片，也会带有 Photoshop 的软件信息。此类数据可用于各种调查。比如调查相机类型，或者照片的 GPS 坐标来寻找某人的位置。有许多工具可用于查看 EXIF 数据，包括只需右键单击图像并转到详细信息。当我们访问 ExifData.com 时，我们需要从计算机上传图像或提交 URL。来自 exifdata.com 的屏幕截图图片加载到网站后，我们就可以在图片右侧看到详细信息摘要。点击左侧的“详细”按钮提供更多详细信息，例如文件权限、大小、GPS 坐标（如果可用）等。来自 exifdata.com 的详细摘要因此，我们可以通过 Exif 信息，来判别某张图片是否是未经篡改的原图。最简单的方法，自然就是直接看文件头了。例如一张图片是在 PS 中修改过、然后保存的，那么用记事本开启这张图片，就可以在它的文件头中，找到 “Photoshop”的字样，如下图所示：用记事本打开图片文件，有 “Photoshop”字样，说明这是一张用 PS 保存的图片能修改图片的软件不止 PS，如果是用其他软件来修改，我们还可以通过第三方软件来鉴别其 Exif，例如下面的这款 “JPEGsnoop”。JPEGsnoop 是一款免费的 Windows 应用程序，可检查和解码 JPEG、MotionJPEG AVI 和 Photoshop 文件的内部细节。它还可以用于分析图像的来源以测试其真实性。网站链接：https://www.impulseadventure.com/photo/jpeg-snoop.html不仅可以确定数码相机在拍摄照片时使用的各种设置（EXIF 元数据，IPTC），而且还可以提取指示相机在保存照片时使用的 JPEG 图像压缩的质量和性质的信息。每个数码相机都指定了压缩质量级别，其中许多级别大不相同，导致某些相机产生的 JPEG 图像比其他相机好得多。JPEGsnoop 报告了大量信息，包括：量化表矩阵（色度和亮度）、色度子采样、估计 JPEG 质量设置、JPEG 分辨率设置、霍夫曼表、EXIF 元数据、Makernotes、RGB 直方图等。如果我们要鉴定一张图片是否被修改过，可以直接将图片拖移到它的界面当中，JPEGsnoop 就会对图片的 Exif 等信息进行分析。JPEGsnoop 呈现的分析非常多，但我们只需要关注最下面的 “ASSEMSSMENT”一项，例如下图：根据 JPEGsnoop 给出的信息，这张图片是经过处理或者编辑的，也就是说它不是原图。再看这张图，JPEGsnoop 判断它就是原图，没有经过任何 PS，可以确定为真了。鉴别出这是原始图片反图像搜索反向图像搜索可用于验证照片、WhatsApp 图像、屏幕截图和 Internet 来源。记者可以使用反向搜索选项来查找图片的原始来源或了解图片首次在 Internet 上发布的大概日期 。摄影师可以使用“按图像搜索”功能了解其他未经许可使用其照片的网站 。那么，如何执行正确的反向图像搜索？首先，我们需要一张任何类型的照片，我们可以使用一张有问题的奥巴马照片。将照片保存至电脑，点击“上传图片”按钮，然后将该图片上传即可。接下来，单击“显示匹配图像”按钮，它会将您的照片发送到 Google、Bing 或 Yandex 的图像数据库并显示视觉上相似的照片。在这里，我们可以选择 Yandex 来演示。在 Yandex 主页上，您需要选择图像，然后选择相机图标在计算机上找到保存的照片，或者也可以粘贴网址。Yandex 主页截图如何使用相机图标打开图像滚动浏览图像列表后，我们看到了原始图像，它向我们展示了第一张图像是经过数字修改的。因此，有时候我们需要滚动浏览一堆图像才能找到所需的内容。此外，有一些有用的免费工具可以让反向图像搜索更容易。RevEye 是一个 Chrome 插件，可以搜索 Bing、Google、Yandex、TinEye 和百度。使用 RevEye，您只需右键单击图像并直接转到列表中的相应搜索引擎。Forensically网站链接：https://29a.ch/photo-forensics/#forensic-magnifier通过 Exif 鉴别图片是否是原图，的确是行之有效的，但这种方法也有其局限，那就是它只能鉴定图片是否是原图，而不能鉴定图片内容是否保真。例如用 QQ、微信发送的图片，会被压缩过，图片内容没有被修改，但通过 Exif 鉴别，这仍属于处理过的图片，如此一来就显得意义不大了。如果你想要鉴别图片内容是否被修改，那么直接鉴别图片的内容是更靠谱的方法。问题来了，这属于技术活，往往需要人工细细甄别，有没有更加傻瓜智能的方法？还真有，例如 Forensically 这个网站，其中很多功能，都非常方便且实用，可以帮你快速鉴定图片有没有被 P 过。Forensically 是一款基于 Web 的免费图像分析工具，可用于检测克隆、错误级别分析、图像元数据、噪声分析、水平扫描等。错误级别分析或 ELA 用于识别 jpg 图像中不同级别的压缩伪影。jpg 图像保存得越多，压缩得越多，因此在对其进行分析时，图像的编辑部分变得不那么均匀，因此更加明显。许多人通常认为错误级别分析是主观的，但它可以像放大镜一样帮助您识别图像中被隐藏的细节，帮助揭示真相。克隆检测：克隆检测器突出显示图像中的复制区域。这些可以很好地指示图片已被修改。错误级别分析：此工具将原始图像与重新压缩的版本进行比较。这可以使操纵区域以各种方式脱颖而出。例如，它们可以比未经处理的类似区域更暗或更亮。噪声分析：这个工具基本上是一种反向去噪算法。它不是去除噪声，而是去除图像的其余部分。它使用超级简单的可分离中值滤波器来隔离噪声。它可用于识别对图像的操作，如喷枪、变形、扭曲和透视校正克隆。它在高质量图像上效果最好。PCA：此工具对图像执行主成分分析。这提供了一个不同的角度来查看图像数据，这使得发现某些操作和细节更容易。这个工具目前是单线程的，在大图像上运行时速度很慢。首先来说说其中的 “Clone Detection”功能。顾名思义，这可以检测图片是否存在克隆现象。通常来说，修改图片时，例如去除水印、杂物等等，都会用到 PS 中的像素克隆工具，Forensically 的检测原理就在于识别图片中重复的像素，来判断这张图片有没有被像素克隆工具修改过，下图就是 Forensically 默认提供的样张。这些红线连起来的区域，像素是一模一样的，证明经过 PS 克隆工具的涂抹在 Forensically 的鉴别结果中，白斑代表一模一样的像素，红线代表相同像素的平移路径。可以看到，图中有大面积相邻像素都是一模一样的，这就是经过克隆的痕迹，这无疑就是一张 PS 过的图片。在下面这张龟头人的图像中，我们可以很清楚地看到它被编辑了哪个部分。如果我们点击右侧的 Error Level Analysis 按钮并调整滑块，我们可以很快看到海龟头部比身体的其他部分和背景更亮、更不均匀。使用 ELA，所有高对比度和低对比度边缘都应该看起来相似。如果存在巨大差异，我们就可以怀疑图像已被更改。Forensically 中可用的另一个工具是克隆检测工具。使用此工具，可以查看已克隆图像的所有位置。此工具的准确性在很大程度上取决于滑块的位置和原始图像的质量。我们再来看一张正常的照片：没 P 过的图，没有集中分布的相似像素这张照片是没有经过 PS 的，在 Forensically 中尽管也鉴别出了一模一样的像素，但分布面积小且零散，因此可以认为这张图片没有被克隆工具修改过。Forensically 的 Clone Detection 只适用于使用克隆工具修改的照片，对于其他 P 图情况，我们可以使用 Forensically 的其他工具鉴别。例如，For ensically 的 “Error Level Analysis”功能，可以突出显示某些肉眼看上去差不多、但从计算机角度来看非常突兀的像素。例如这张示例图中的飞碟，就很显眼了，这明显就是 P 上去的。经过一定算法处理，发现某一块像素的特征和周围的明显不同，这显然是 P 上去的图像再来看看原始拍摄未经处理的照片，可见计算机认为像素特征是均匀的，没有突兀的像素群。未 P 过的图像，算法处理后的像素特征是相似的当然，Forensically 也是存在局限的，它的原理决定它只能适用于鉴定拍摄的照片（还不能有太多过曝之类造成的 “死像素”），对于截图或者 CG 这样的人造图像不那么适用。但无论如何，如果你想要鉴别某张照片有没有被 P 过，Forensically 仍是非常不错的辅助工具。FotoForensics网站链接：http://fotoforensics.com/FotoForensics 使用先进的算法来解码任何可能的 photoshopped 图片和操作；它使用错误级别分析 (ELA) 来识别图像中处于不同压缩级别的区域。对于 JPEG 图像，整个图像应该处于大致相同的错误级别。如果图像的某个部分处于显着不同的错误级别，则可能表明进行了数字修改。FotoForensics 旨在简化评估过程。它像显微镜一样工作——通过突出人眼可能无法识别的伪影和细节。在拥有正确的工具和培训之间，大多数人可以快速学习如何评估图片。FotoForensics 提供算法、用于自定进度学习的在线教程、测试知识的挑战以及帮助您入门的其他资源。错误等级分析元数据分析最后保存质量颜色调整FotoForensics 使用一种称为“ ELA ”的计算算法“代表错误级别分析，它以百分比显示对原始照片的边缘、纹理和表面所做的更改的修改。由于图片直接来自相机或经过 Photoshop 处理，因此可以轻松找到嵌入在元数据中的其他重要细节。不要试图对您的私人照片进行分析，因为结果图像将保存在服务器的公共 URL 中。在第二张图片中，您可以如何通过 ELA 识别证书的真实性，其中假邮票的亮度和边缘的错误级别会发生变化。Ghiro网站链接：https://www.getghiro.org/Ghiro 是用于数码照片和数码图像分析的开源软件。取证分析完全自动化，可以从不同角度搜索或汇总报告数据。Ghiro 旨在帮助您和您的团队分析大量图像。错误级别分析 (ELA) ：是一种旨在检测图像是否经过编辑的技术。它可以应用于压缩图像，即 JPEG 或 PNG。主要思想是原始形式的图像具有独特的压缩级别。重新保存分析的图像并计算压缩级别的差异，如果检测到差异，则编辑的可能性很高。Ghiro 计算错误级别并检测它们之间的差异。哈希摘要生成：为图像计算最常见的哈希，以创建它的唯一标识符。计算出的哈希值为：CRC32、MD5、SHA1、SHA224、SHA256、SHA384 和 SHA512哈希列表匹配：假设您正在搜索图像并且您只有哈希。您可以提供哈希列表并报告所有匹配的图像。字符串提取：提取分析图像中包含的所有文本字符串，就像在 unix 字符串工具中一样。更有趣的（即 URL）被突出显示。签名引擎：签名提供关于最关键数据的证据，以突出重点和常见的曝光。签名引擎可突出显示 120 多个签名的常见曝光Amped Authenticate网站链接：https://ampedsoftware.com/authenticateAmped Authenticate 是用于揭示图像处理历史的领先取证软件。Amped Authenticate 提供了一套强大的工具来确定图像是未经修改的原始图像、特定设备生成的原始图像还是使用照片编辑软件处理的结果，使其作为证据的可采性受到质疑。Amped Authenticate 被全球数字取证专家和情报机构使用。Authenticate 是图像分析师根据数百篇科学论文和研究确定的最有用、最真实的应用程序身份验证过滤器和技术的集合。这些已被内置到一个易于使用但功能强大的界面中，以帮助调查人员回答围绕当今数字图像的真实性和完整性的许多问题。当前的产品和流程专注于一种或相对较少的科学工具。Authenticate 将多个测试、程序和报告的强大功能整合到一个包中，以提高用户检测篡改图像或确定原创性的能力。检测图像中的篡改区域确定图像和文件的真实性使用批处理工具分析多个图像识别用于拍照的设备基于科学的最强大、最真实的应用程序身份验证过滤器和技术的集合Diff Checker网站链接：https://www.diffchecker.com/Diff Checker 是一个有趣的工具，可以并排或重叠比较两张照片以查看它们之间的差异。此工具可用于捕捉图像的微小变化。在 Diff Checker 的主页上，我们需要上传两张图片进行比较。DiffChecker.com 的屏幕截图查看更改的第一个选项是淡入淡出。淡入淡出将一个图像放在另一个顶部，并可以切换不透明度以查看图像之间的变化。褪色该滑块选项还会将图像放在一起，但可以来回滑动到一边对其他比较。滑块“差异”选项将两个图像放在一起并反转颜色，以便我们可以看到两张照片之间的差异。有时，使用差异功能可以捕捉到通常不会看到的细微编辑。你的眼睛有许多微妙的线索表明图像已被数字化改变。我们可以在不使用任何特殊工具的情况下看到许多更改。下图是 2017 年广为人知的恶作剧图片：如果你仔细观察，会发现一些非常明显的迹象表明该图像已被更改。放大我们可以看到，普京脸上的对比度比其他人要严重得多，阴影也不对。此外，当缩小时，我们还可以看到他的身体轮廓与周围的轮廓明显不同。这是对比度、纹理差异和无与伦比的阴影暴露照片真实性的另一个例子。你可以看到所有的人的阴影与爱因斯坦的阴影方向不一致。此外，爱因斯坦和其他男人之间的对比度和纹理是不同的，他的头发的边缘也没有很好地融合在一起。最后，福韵君给大家推荐一个网站 Start.me，里面集合了一些可以帮助分析数字照片进行验证的有用工具。大家可以试一试，看看哪些工具最适合你的具体情况。网站链接：https://start.me/p/ZGAzN7/verification-toolset看到这些工具集，大家是不是眼花缭乱了，其实，这些工具的功能都大同小异，我们不一定需要花哨的工具来分析数字照片，许多工具都是免费的，易于使用，而且随时可用。数字图像分析是一个技术活，很难通过软件算法自动得出图片是否为真的结果，所以以软件算法作为辅助，再结合人的经验和你的眼睛去进行判断，还是可以大致判断出来的。希望上面的方法和技巧能帮到大家，如果有什么其他更好思路或者方法，也欢迎在留言区分享交流哦！免费免安装！这个在线图片编辑器功能超强大！使用线上工具就能通过浏览器对图片或影片进行简单编辑，现今类似的服务不少，但大多都着重于单一功能，如果有多合一工具就更方便了。阅读文章 > 欢迎关注作者微信公众号：「福韵 网络情报研究」本篇来源：优设网原文地址：https://www.uisdc.com/8-picture-detection-tools
干货 合集 字体 大家开工大吉！这是虎年农历新年后的第一波设计干货合集！这一期的合集，包含新出的「有灵魂」的图库，有免费的背景、字体、UIkit 素材，有设计灵感网站，有免费的 LOGO 下载网站，还有完全免费的3D 风格 banner 在线服务，都是非常非常非常不错的素材！接下来看看吧：1、有灵魂的免费图库 Humanitieshttps://levinunnink.gumroad.com/l/humanities-illustrations厌倦了千篇一律、毫无情绪、没有质感的扁平插画图库了嘛？这回推荐的插画图库，就是一个带有温度和「人文主义」的插画图库，这个图库包含 35 个带有透明背景的可爱的黑白插画，这些插画当中都是可爱又古怪的角色，带有笔触的轮廓和水墨的肌理，几乎可以和任何颜色的背景色完美搭配。这套图库可以免费获得，不过免费使用的时候需要署名，援引出处，付费之后则可以随意使用无需标注，具体可以参看相关协议。2、免费弥散式极光背景图https://www.weareheroes.digital/resources/aurora这是一组完全免费的背景图片素材，弥散式极光背景，总计 100 张，每张都是 We Are Heroes 团队精心制作并挑选的，这些背景素材是完全免费的。3、全新的交互式原型工具Antetypehttps://www.antetype.com/Antetype 是一个专门解决复杂交互的原型工具，轻松实现响应式布局、元素同步，当然最主要的是，它提供了大量丰富多样的交互，帮你构建出足够复杂多变的交互功能，尽可能让原型的体验接近于最终的完成产品的体验，在演示的时候 更具竞争力。4、每日UI设计灵感、挑战和素材https://dailyui.com/这个名为 Daily UI 的网站乍一看是一个设计灵感网站，但是实际上它不止于此，它除了提供一些设计作品之外，还提供设计素材、导航，每日挑战等服务，从事 UI 设计和 UX 设计工作的同学可以关注一下这个网站。5、免费的 LOGO 素材网站https://www.logotouse.com/LOGO to use 这个网站提供超过 1.2 亿个可以免费下载的 LOGO，你可以下载这些 LOGO 的 SVG 文件，根据你的需求来进行参考或者二次设计，构建属于你自己的 LOGO。这个完整的目的是要做成 LOGO 和品牌领域的 Unsplash 。6、最佳英文字体组合参考https://www.featuredtype.com/虽然各种风格的字体非常之多，但是要把自己搭配好看并不是一件随便的事情，这个名为 Featureed type 的网站将那些现成的效果不错的英文字体组合挑选出来，供你作为设计的时候选取字体的参考。7、在线 3D Banner 免费设计工具https://bannery.app/还在设计2D平面的视觉物料吗？现在已经有 3D 的 Banner 设计工具了，不试试嘛？这个名为 Bannery 的服务提供了大量基础的3D 元素和装饰性的视觉元素，你可以使用他们在线的服务直接编辑，快速构图，置入3D元素，调整角度和配色，加入装饰性元素，超快搞定 ！8、控制面板可视化 UI Kit这是一个包含有 500 多个 Bootstrap 5 组件，这些组件可以帮你快速搭建起漂亮而风格摩登的 UI Kit，它的视觉部分可以直接在 Sketch 当中进行编辑，其中提供 3 套基础的仪表盘，6 套组件，40 多个页面，包含深色和浅色模式！这套素材是完全免费可商用的，你可以在文章开头和结尾的百度云链接中下载。9、倾斜几何风展示字体 Hypik这是一套相当有性格的几何风格字体，字体采用了非常典型的平行四边形式的外轮廓，棱角分明充满了速度感和冷峻的气息，这款字体是完全免费可商用的，你可以在文章开头和结尾的百度云链接中下载。往期干货：第一波！2022年1月精选实用设计干货合集大家好，2022 年第一波设计干货合集来了！阅读文章 > 第二波！2022年1月精选实用设计干货合集大家好，2022 年第2波设计干货合集来了！阅读文章 > 第三波！2022年1月精选实用设计干货合集大家好，2022 年第3波设计干货合集来了！阅读文章 > 第四波！2022年1月精选实用设计干货合集大家好，这应该是 2022 年农历新年前的最后一波设计干货合集了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 2月干货第一波7mk9iy 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-2-design-resources-vol1
音频 游戏 声音 NExT 音频设计师希辰，一位“带有媒体属性的技术工作者”，大学毕业后和朋友一起开了个录音棚，踏入声音设计行业。工作之余做了一个专注声音设计的主题网站「soundoer.com」，2018 年开始在个人微博「希辰 Xichen」分享自己拍摄的声音设计系列 Vlog，最近他又在着手整理关于游戏音频设计的系列文档。如果你有志进入游戏音频行业，有这样的疑问：“我需要掌握哪些技能？”、“游戏音频从业者是如何分工的？”、“有哪些具体的工作流程？”。希辰将以自己在音频行业的亲身实践和思考给出回复，共分三篇：「上篇」是非全面的游戏音频设计技能树、「中篇」游戏音频从业者的分工和工作流、「下篇」游戏音频设计的发展方向展望，本文首先分享上篇。希辰真人出镜 | 在声音的领域里“画画”作为一门艺术与技术紧密结合且还在不断快速发展的实用型学科，游戏音频设计综合性地运用声音领域里许多方向的知识、技能和工具来进行声音创作，并通过一个动态的（Dynamic）、交互的（Interactive）、程序性的（Procedural）游戏引擎系统将最终的声音效果呈现出来。仅从这一句简单的描述来看，对游戏音频设计师的从业要求就同时包含了艺术创作方面的制作能力和技术思维的实现能力，这背后还涉及到许多领域的知识技能储备。我想这可能正是令许多想入行的朋友们感到望而生畏的原因，甚至是声音相关行业想转行的同行们似乎也感到无从下手。也正如此，我的分享也只能是“非全面”的，仅从个人学习和工作经历出发，尽可能有条理地梳理出一个可供大家参考的游戏音频设计技能树。声学基础声学本身是一个已有成熟理论体系的物理学科，包含了有关声音的各种细分方向研究。作为建构在此基础之上的实用性学科，游戏音频设计自然也会涉及到相关的声学基础知识。我认为有两块理论知识尤为重要且与实际应用甚是相关：1. 物理声学简单说是对声波的产生、传播、特性等相关的研究，决定了我们如何在虚拟世界中对声音进行解构和还原，以及随着技术的不断发展我们该如何用更高效的模型去实现更逼真的效果；2. 心理声学重点关注的是通过科学方法来研究人类是如何感知声音的，比如音频压缩技术和响度标准等就是心理声学在实际应用中的典型体现。随着心理学和脑科学的不断发展，心理声学在解决人类如何更有效、更细节、更多维地感知声音这一问题上一定会有更深入的研究。掌握扎实的理论知识或许在实际应用上不会有立竿见影的效果，但知其然且知其所以然还是很重要的，这样才能在积累经验的同时不断有想法上的突破，避免自己成为只会熟练操作的工具人。数字音频制作数字音频制作，是指以数字音频工作站（Digital Audio Workstation, DAW）为主要工具，运用各种数字信号处理（Digital Signal Processing, DSP）手段来进行声音制作。通俗点说就是用计算机来进行声音制作。DAW 是指 Pro Tools、Reaper、Cubase、Logic 等之类的宿主软件；DSP 是指用各种插件工具对声音进行处理。这是贯穿整个声音设计相关行业最基本的技能。相较模拟时代而言，现今的音频制作入门门槛是越来越低了，无论是硬件设备、软件工具还是各种学习资源，都是非常容易获取的，这也让更多的人有机会参与到声音创作中去。这就像，现在大多数人并不需要理解光圈快门等成像原理，就能用手机拍出一张好看的照片。但作为专业的从业者，只会使用工具是远远不够的，还要去思考怎样把工具用对用好，比如如何搭建一个信号链正确、结构明晰的工程文件，如何输出符合数据格式和响度标准的声音资源等。不要只在意最终做出来的东西好不好听，而忽视了这些最能体现个人专业度和工作习惯的重要细节。录音技术录音技术是使用话筒（Microphone）和录音机（Recorder）等设备采集声音的过程，是获取原始声音素材的最重要的手段。从录音对象和场合来分析，有同期录音、实地录音、拟音录音、音乐录音和语音录音等具体分类。对游戏音频设计师来说，录音不仅是获取声音素材的手段，其过程本身也是一种重要的学习方式。只有细心体验过真实的声音，才能更加有的放矢地对录制到的声音素材进行再创作，创造出既符合真实体验又满足游戏功能和美感需求的听觉体验。合成器合成器是通过生成简单波形并对其进行各种调制处理来获取声音素材的方式，在音乐制作领域已经是非常成熟的创作工具。而合成器在信号链和调制处理方面的运用对声音设计也是有很大的借鉴意义。如果有朋友觉得直接上手模拟合成器费钱，可以尝试先从软件合成器入手。据说这套设备 6 个 0 以上∑( △|||)︴混音如果说录音技术和合成器关注的是如何获取声音，那么混音关注的就是如何将声音重放出来。无论是音乐混音、电影混音还是游戏混音，它们的最终目标都是一致的，将设计完成的声音在频域、时域和空间上进行合理排布，并通过合适的重放系统播放出来，传达给受众一个完整的听觉体验。与音乐和电影这类线性媒体相比，游戏作为典型的交互式媒体在设计思路和工作流上确实有所不同，但在重放环节其实并无任何区别，还是通过耳机和音箱系统，所以在混音的方法原则和评价标准上都是一致的。声音设计这里对声音设计的定义相对狭义，重点是指从游戏的设计需求出发来制作出语音、音乐和音效这三大类的声音资源。从项目实际运作角度考虑，游戏音频设计师是无法完全独立完成所有制作的——语音资源需要配音演员和导演的参与，音乐资源则需要作曲家和乐手的参与，游戏音频设计师可以根据自身的技能特长有选择地参与其中，但无论如何最重要的是——本着对最终声音表现负责的态度来把控所有声音资源的质量。毕竟游戏音频设计师应该是整个项目中对声音设计最有发言权的人了。不同金属与干冰碰撞的声音火花游戏设计基础业内外经常听到的一种调侃是，有了策划、美术和程序就能开始做游戏了，而音频往往就被忽略了。这其中既有客观原因：对于大多数游戏类型来说，声音不是游戏玩法和表现上的核心，玩家对声音表现的敏感度也远低于视觉上的表现；或许也有主观因素：有些游戏音频设计师可能只忙于完成视觉表现上的需求，而没有从更深层次的游戏设计与开发环节中发挥更大的作用。因此，掌握游戏设计和开发流程等相关知识的意义在于，游戏音频设计师要把自己定位成一名真正的游戏开发者。以开发团队核心成员的身份，去了解其他工种的工作内容和流程以便于更顺畅的沟通与合作，从专业角度提出音频方面的设计想法来提升游戏的整体品质。只有充分展示出自身不可替代的价值，才能获得他人在专业上的认可与重视。游戏引擎游戏引擎作为游戏开发的核心工具，自然也是游戏音频设计师必须要掌握的。除了某些游戏工作室内部的自研引擎之外，目前主流的商用引擎是 Unreal 和 Unity，官方网站和各类社区都有非常丰富的学习资源，自学上手很容易。游戏音频中间件游戏音频中间件是一种用于管理声音数据、实现音频功能的图形化界面软件，它的出现减少了游戏音频设计师对引擎端程序支持的依赖程度且极大地提高了工作效率，因此在现在的游戏开发流程中似乎已经成为了一种标配工具，在各类招聘要求中也成了必备技能之一，重要性自然不言而喻。但我更想从祛魅的角度来说一说我的看法，大家千万不要觉得离了中间件就没法干活了，工具就只是工具而已，主要的作用就是提高开发效率，省去了重复造轮子的成本，而对游戏音频设计师的自我修养来说，更重要的是养成良好的数据管理习惯，理解工具背后的实现逻辑，这样才能举一反三，在之后遇到其他的开发工具和环境之后，依旧能有一套切实可行的游戏音频设计方案，这才算是自己积累下来的核心竞争力。除了某些游戏工作室内部的自研工具之外，目前市面上也已经有不少成熟的商用游戏音频中间件可供选择，个人比较推荐 Audiokinetic Wwise，官方提供了非常丰富的文档资料和学习资源，在学习工具本身的同时还能了解到许多游戏音频设计相关的概念和思路。技术音频从各种猎头资源和招聘启事了解到的信息来看，近两年国内游戏开发团队对技术音频设计师的需求明显增加，因此我觉得有必要单独提出来聊一聊。在我来看，这个岗位出现的主要原因是，随着游戏品质的不断提升，游戏音频在数据和功能方面的工作量和实现要求已经超过了普通程序员的能力范畴，而目前行业内的大多数游戏音频设计师受限于经验背景和技能储备，也没有足够的程序基础去解决某些技术性问题，因此需要一个既有音频设计相关知识又有程序功底的开发人员来参与到各个开发环节中去。简单来说，技术音频设计师的工作职责就是处理一切普通游戏音频设计师无法解决但又和音频相关的技术性问题，比如工作流和性能优化、音频功能和工具开发等，这样的角色定位与技术美术（Technical Artist）在游戏美术开发中的功能是类似的。从游戏开发分工精细化的发展角度来看，技术音频设计师这个岗位确实是有存在的必要，让专精人才在细分工作上发挥作用，对项目的效率和品质提升都是有帮助的，但我认为有时候对游戏音频设计工作内容的过度分工和剥离，可能也会带来一些负面影响。所以我要以游戏音频设计师的身份立场鲜明地表达一下我的观点，不要轻易放弃那些原本就是份内职责的技术性思考和解决问题的能力，否则很有可能成为只会制作声音资源的内包人员。游戏音频设计师从游戏需求和声音表现出发，对音频数据和功能进行整体性的构思，并将实现逻辑完整地传达给程序员进行开发，同时参与到开发全程的整合、调试和优化环节中去，我觉得这正是游戏音频设计区别于传统声音设计的独有乐趣。以上，就是我对游戏音频设计相关技能和知识储备的“非全面”梳理——声学基础、数字音频制作、录音技术、合成器、混音、声音设计、游戏设计基础、游戏引擎、游戏音频中间件、技术音频。最后再次强调，游戏音频设计是艺术与技术紧密结合的学科，在提升实用型技能的同时，也不要忽视了艺术修养方面的积累。虽然我一直抱有成为“全栈式”游戏音频设计师的想法，但不得不承认这是一个非常理想化的目标，上述提到的每项内容都是值得深耕数十年的领域。从实际就业的角度来考量，也并非说要完全具备以上这些能力才能找到一份游戏音频设计的相关工作，行业的发展必定会带来分工的进一步细化和岗位需求的增加。因此更为实际的学习路径是结合自身兴趣和专业特长，以“一专多强”的目标去不断完善自己的技能树，扎实地在游戏音频设计行业走得更稳更远。连声音都是细节！阿里设计师总结的10个声音设计要点声音设计长久以来一直在影视、音乐、游戏领域发展与发挥价值，作为在阿里巴巴的体验设计师，以前并没有太多的机会去以声音作为设计手段。阅读文章 > 欢迎关注作者微信公众号：「NExT Studios」本篇来源：优设网原文地址：https://www.uisdc.com/game-audio-design
用户 操作 会有 在 2022 年的 1 月底，任天堂的《宝可梦传说:阿尔宙斯》正式发布，并有着不错的销量，再一次为整个行业印证了第一“IP”的影响力，本作的一些改造，彻底改变了宝可梦捕捉和战斗的的体验，最具特色的是做成了开放世界的形式，就我个人而言，我认为是一次较为成功的改造，这也更接近我印象中的宝可梦世界。（画质？什么画质？不管出什么我们宝可梦玩家不都边骂边买）由于《阿尔宙斯》故事背景设定在古代，所以在接受程度上，也会减轻对以往玩法固有印象的不适感，游戏中宝可梦也可以更自然的做出差异化。本作增加了宝可梦训练家形象的自定义操作，允许用户创造更多的游戏风格，来增加游戏乐趣和个性化。至于大世界的探索体验，可以剧情获得海陆空的宝可梦坐骑，探索体验感将大大提升。在宝可梦对战的游戏设计中，进入战斗场景不再需要额外加载页面，训练家可以任意走动观看整个战斗过程，当然也会被技能打中，代入感极强。宝可梦对战流程上增加了行动速度的调整，也增大了更多游戏可能性。整个游戏设计的玩法是训练家穿越到远古宝可梦世界，通过 NPC 介绍的背景认知，根据剧情引导产生游戏行为的过程，过程中可以在宝可梦世界自由探索，收服野生宝可梦和完成剧情任务，一步步更新世界观认知，获得更高的能力去推动剧情发展，而最终大目标就是完成宝可梦全图鉴（收服所有宝可梦）。这个就是我对这款游戏的体验总结，这种游戏模式有着较低的适应成本，在不断更新对未知世界的认知后，循序渐进的方式降低了玩家的认知负荷，同时增加了新的趣味性，并且在整个剧情推动中会通过 NPC 反复引导要完成目标的方式，也给用户带来很明确的目标感和使命感，使用户可以更沉浸在游戏世界中，不会感到无聊和疲倦。除了整个游戏体验上有着较强的舒适度，在操作流程上也有许多令人惊喜的设计细节，接下来就通过尼尔森的十大可用性原则，看下本作做了哪些提升用户体验的设计。系统状态可见原则Visibility of system status设计应始终通过合理时间内的适当反馈让用户了解正在发生的事情，他们会了解之前交互的结果并确定下一步要做什么。1. 状态显示本作中会在各个地图中显示当前训练家的所在位置，并且会表示出方向，这对移动有着很大的参考便捷性。在训练家的窗口显示也会随着自身状态进行沉浸式的氛围渲染，比如低血量状态会出现红色边框，在草丛中会压低脚步声，并且未被宝可梦发现时会有暗色边框。2. 行为引导在适当的环境下，提供任务引导可以让用户了解当前任务信息，在显示区域中，标识任务位置指引，可以更具引导性，从而提升任务完成率。这些引导帮助让用户操作更加自如，可以减轻对游戏信息的记忆和识别，降低操作成本，让用户更专注于冒险和娱乐，而不是记忆。3. 操作反馈相较于产品应用，游戏的反馈方式更加多样化，可以通过听觉，视觉，触觉等方式。游戏设计中，用户情绪设计较为关键，在本作中，扔完精灵球后，会在一小段时间内才给出是否收服成功的提示，在这个过程中会有一段紧张情绪的积累，当收服成功时，有一个烟花效果显示，使获得感和成就感更强，而当收服失败时，会有较为低沉的音效提示对应当前心境，但这也是一段情绪积累，因为可以再次选择扔球。宝可梦的技能战斗反馈和一些场景上也会出现手柄震动，极大提升了游戏人物与现实环境的联动，更加有代入感和压迫感。环境贴切原则Match between system and the real world系统应该用用户熟悉的概念，遵循现实世界的惯例，让信息符合自然思考逻辑。在宝可梦中，有很多现实生活的参照，比如有跑步、关门开门声音表现，有春夏秋冬，白天黑夜的时间视觉差异，也有比如烟雾中隐藏位置，跌倒，溺水时挣扎等行为的模拟。撤销重作原则User control and freedom用户经常会执行错误的操作，当人们很容易退出流程或撤销操作时，它会培养一种自由和自信的感觉。退出允许用户保持对系统的控制，避免卡住和感到沮丧。本原则体现在每个用户界面中都有按键提示退出的操作。当遇到宝可梦可以选择逃跑，并且在战斗过程中也可以，在误进入战斗流程的情况下可以选择退出。一致性原则Consistency and standards用户不必怀疑是否不同的语言，不同的情景，或者不同的操作产生的结果实际上是同一件事情。遵循平台的惯例。也就是，同一用语、功能、操作保持一致。一致性原则主要体现在显示和操作的一致性。在宝可梦中同类商品具有外观的一致性，比如精灵球样子。而在不同地图中，相同 NPC 也具有形象一致性，对于扔精灵球和扔物品也具有按键操作的一致性。防错原则Error prevention比出现错误信息提示更好的是更用心的设计防止这类问题发生。在宝可梦中，为了防止出错做了两种处理方式。一种是二次确认，主要的场景是战斗中扔精灵球等行为和地图位置的移动等；另一种是行为终止，当可能会发生更严重后果且不可逆时出现，如物品消耗为防止意外情况则直接置灰或不生效，在一些剧情未开启时，会有 NPC 挡路不让通行。易取原则Recognition rather than recall系统的使用说明应该是可见的或者是容易获取的，最大限度地减少用户的记忆负荷。在功能使用上，一般都是先识别后记忆，极可能的显示描述可以减少用户记忆成本，在宝可梦中，物品都有说明信息，来减少对物品功能的记忆。宝可梦世界中会有不同属性技能的伤害差异，本作中在战斗过程有技能克制的提示图标，可以让用户更好的判断该用什么技能来战斗，通过提示相关信息，帮助大家在战斗中做出最佳选择，增强玩家控制感。灵活高效原则Flexibility and efficiency of use系统可以满足有经验和无经验的用户，并且允许用户进行更加便捷的重复操作。在宝可梦中，也有很多功能可以满足新手用户和熟练度较高的资深用户使用，并且衔接较为流畅，比如用户可以选择自己制作物品，也可以选择直接购买物品；可以选择战斗收服宝可梦，也可以选择直接扔球收服。因为宝可梦坐骑的设定，用户可以随时唤醒宝可梦坐骑，或者在满足条件的特定场景下，显示快捷操作的图标来临时唤醒。简约美观原则Aesthetic and minimalist design信息中不应该包含无关紧要的信息，在信息中每增加一个单位的重要信息，就意味着要减少相应的弱化一些其他信息，这个主要体现在信息优先级的展示。在宝可梦中常规界面和战斗界面的信息显示有着不一样的信息优先级显示，并且可以选择隐藏和显示部分信息，可以做到更大的显示视野。任务列表也做了相应的处理，会隐藏已完成的任务，定位方式来显示未完成的任务。容错原则Help users recognize, diagnose, and recover from errors要避免用户犯错误，无法避免时，要提供解决方案准确地指出问题，并建设性地提出解决方案。在宝可梦中，当前物品不可用时会有不同显示用以区分，购买物品的金额不足等情境下也会有提示；而错误后的解决方案主要体现在，操作失误导致任务失败后可以重来，宝可梦的技能学习可以反复操作等地方。人性化帮助原则Help and documentation系统最好不需要任何额外的解释，但是需要提供文档以帮助用户了解如何完成他们的任务。帮助和文档内容应该易于搜索并专注于用户的任务。当对用户来说属于新的信息时，提示和说明就显得格外重要，在宝可梦中首次向相关用途的 NPC 对话时，会有说明的内容，并且之后可以通过对话反复查看。唤起系统操作界面，有图形化的说明来显示手柄各个按键的说明。作者更多文章：怎样才算一个好的交互设计方案？做好这5个维度就够了！我们在日常使用某个 APP 时，经常会听到别人说某个产品用户体验很好，但是一问具体怎么体验好，要么说不出要么说不全，那到底什么样的设计才算是用户体验好？阅读文章 > 欢迎关注作者微信公众号：「小馒头的交互笔记」本篇来源：优设网原文地址：https://www.uisdc.com/legends_arceus
弹性 场景 弹簧 动效是设计师的一个主要发力点，界面里加入动效，可以增加趣味性和引导性。从业务层面来看，设计师首先要积累这方面的技能经验，到了实际项目中才有发挥的空间，较大程度地给业务赋能。所以，我结合常用的界面动效场景，输出了不少练习作品，对一些细节技巧有点感悟，和大家分享下。大纲如下：弹簧原则有质感的形变动效有节奏感的缓动曲线符合生活场景错位运动打造层次感图形变化，路径重组一些动效练习弹簧原则我们生活中的弹簧，一边固定，另一边用手拉伸后放开，它会经历多次来回弹动后才静止。这种运动过程可以延伸到我们的动效设计中，弹动次数不宜太多，容易造成反馈不及时的问题。我一般设置三次弹动，想了些口诀：上下上、大小大。比如一个元素缩放比例从 0%到 100%，我们可以看下常规运动和弹性运动的对比。果然，模拟的弹簧弹性运动更自然舒适。有质感的形变动效弹性运动离不开生活场景，一个柔软的小球，下落碰到地面会产生挤压，弹起时候会产生拉伸，看起来很 Q 弹。当我看到这个运动时，动效思维瞬间发散开了。比如工具栏的图标，常规想法可能就是元素在中心点从小到大进行弹性运动。不过，我们利用小球形变运动原理，可以做出一些差异化的设计，可以看下对比。个人比较喜欢形变的弹性运动，更耐看。有节奏感的缓动曲线循环的加载运动，使用普通缓动曲线（逐渐加快逐渐变慢）会稍微有点呆板，这时候我们可以使用强调型的缓动曲线（快速加快逐渐变慢），可以看下对比。符合生活场景动效结合生活场景，可以设计出一些有创意性的动画。大拇指点赞，我们习惯先收起大拇指，然后再点赞；有个细节，我们手也是会跟着运动的。结合这个运动过程设计点赞动效，我们再加一点修饰来加强点赞感知，俏皮的效果就出来了。错位运动打造层次感为了丰富动画效果和层次感，我常用的技巧就是元素错位运动，可以是方向的错位，也可以是时间上的错位。比如金山知识库官网的头图动效，就有运用到方向错位原则，元素朝不同方向运动，营造空间纵深感。图形变化，路径重组图形变化动效在界面中也是可以用到的，路径重组就是我运用的一个方法。难点在于元素的连贯性和流畅性，多练就好了，看下效果。一些动效练习动手能力对于设计师来说是很重要的，可以学习技能、创意点、细节处理等，才能更好更快地运用到业务上。近期我输出了一些 UI 动效练习，也尝试了断线图标的设计风格，看看吧。总结以上就是我在动效设计中常运用到的小技巧和相关练习作品，在思维和技能上真的成长了很多。不过，动效方面还有很大的提升空间，继续学习去了！比Lottie还好用！腾讯新晋免费动效设计神器 PAG在终端 APP 中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/6-dynamic-effect-skills
操作 按钮 苹果 hello，没想到这么快年就要过完了，今天来聊一聊苹果规范里两个令人迷惑的东西，action sheet 和 activity view。两个组件都属于常见组件，其中 action sheet 出现得更早。之后出现的 activity view 在布局上违背了 action sheet 的部分设计理念和规则，而苹果规范又对此语焉不详，因此有些同学对如何设计一个底部浮层（或者面板）产生了很多疑问。因此今天我们就从它的发展史出发来讲讲他们的差异，以及应该如何看待“规范”。可以说规范的演变就是不断吃书的过程。Action sheet 的演变历史action sheet 是设计规范中提供的最早的一批标准组件，和其他组件相比，苹果对 action sheet 的定义和迭代的更新其实不算多，它的样式也没有特别大的变化。在 2008 年 iPhone OS 2 时代的规范中，将 action sheet 和警告弹窗（alert）、模态视图（modal view）都归类为视图的不同类型。实际上“视图 view”这个说法一直都非常模糊，我猜测这个说法来源于 MVC 设计模式，是开发兼任设计时代遗留下来的名词。现在苹果将 view 解释为“应用程序用户界面的基本构件”，我个人把 view 按照原子系统理解为“页面模板”。从创立之初，action sheet 有两种用途：收纳针对用户当前任务的多种操作。这样就不用在页面上把这些操作全部展示出来。进行风险操作之前，可以用 action sheet 来做再确认。根据这两个用途，2008 年对 action sheet 的说明和规则总共有以下几点：一定要有底部取消按钮，除了取消按钮之外至少提供 2 个操作按钮点击操作按钮之后，action sheet 将会消失Action sheet 上不写说明文案，因为它是被用户主动点击弹出的页面，用户可以根据当前任务和按钮文案推断出这个浮层的作用。根据以上几点我们可以看出 2008 年前后移动端的业态还是比较简单的。第 2 条规则让 action sheet 是一个只能承载操作按钮的临时不稳定容器，它杜绝了使用 action sheet 来做多级复杂任务的可能性，而且也并没有提到任何和扩展性相关的解决方案。在 2011 年时，苹果对 action sheet 进一步作出了说明：解释了将取消按钮放在页面底部的作用：鼓励用户看完所有选项后再做出选择。强调风险/破坏性操作要用红色按钮。不允许纵向滑动，因为：过长的面板可能会导致用户花费过长的时间来思考每个选项；纵向滑动可能导致误触。自此，action sheet 的几个比较重要的规范就都成型了。尽管在 2014 年取消了“点击操作按钮后 action sheet 会消失”和“action sheet 上不写说明文案”的说明，让它的扩展性稍微强了一些，但是从苹果对其纵向滑动的限制、对「取消」按钮的强调上，可以看出 action sheet 仍然是暂时性的，倾向于不让用户停留太久、完成较为复杂的任务。在 iOS14 之后，苹果提供了新的组件 menu 来收纳操作，因此进一步限制了 action sheet 的使用场景。iOS14 版规范将 action sheet 归纳到 alert 警告弹窗中，“只有破坏性操作可以使用 action sheet，否则都应该使用 menu”。但在后续版本迭代中又更改了说法，现在 action sheet 基本上被用于承载与「用户发起的操作」直接相关的功能，比如删除/离开前的再确认，而不再承载“收纳主页面放不下的次级操作”的功能。Activity view 的演变历史Activity view 是为了“分享”这个功能定制的。目前为止它的使用场景基本限制在分享上，很少见其他场景使用这样的版式，但我个人认为它在未来有扩展场景的潜质。苹果一直有“分享”功能，这个功能最开始使用 action sheet 实现，然后在 iOS6 时期由 action sheet 改版了图标样式（但是很可惜没有说为什么这样改）。iOS6 时代苹果并没有成熟的 App 间分享功能，当时只支持 facebook、twitter、微博等几个有限的 App 分享，因此在页面设计上面也没有考虑扩展性。到了 iOS7 后，苹果进行了两个重要的功能迭代：允许 App store 中海量的第三方 App 接入“分享”功能。这导致分享页面上的操作数量不确定上线了 airdrop 功能，并且可能由于早期对这个功能的推广，iOS7 允许图片在当前页面内被多次分享给不同的人，因此只能支持单次操作的 action sheet 无法再满足诉求了。于是基于这两个重要的功能变化，才产生了我们熟悉的这个横滑版的 Activity view。activity view 的设计究竟想解决什么样的问题我们不得而知，因为它的规范中说的东西也比较语焉不详。只能说从它最终呈现的效果来看，和以往的设计有这些改变：Activity view 首次在 iOS7 的规范中登场时，是一个“控制器”controller，而非一个完整页面，这让它可以添加“取消”按钮成为一个类似 action sheet 的模态，也可以作为页面上的一个元素，搭配页面左上角的“取消”按钮。我个人认为这么设计其实挺冗余，页面允许横滑后，“取消”按钮非要放在页面底部的理由就根本不成立了，因为用户的视线并不一定是从上到下看完的，而有可能是从左到右，根本没往下看。没有必要为了遵守 action sheet 的规范而制作两套功能完全一样的版式。activity view 采用了大图标而非纵向文字列表的样式。从迭代趋势来看，合理猜测是因为接入第三方平台后图片 icon 的识别效率比纯文字更高。Activity view 允许横滑。这也违背了 action sheet“面板不允许纵向滑动”的理由。很明显这样做是因为接入第三方平台 app 数量不确定，只能通过横滑来保证一些系统操作（复制/投屏等）能够在第一屏露出。当然 iOS7 的 activity view 还有些其他的问题，比如有些人提到：这版设计过于强调 airdrop、横滑滚动比纵滑更费劲，而且对长文案的支持比较弱等等网站链接：https://medium.com/@graiz/useless-ui-e6f962e666e4基于这些问题，activity view 再次改版，也就是现在 iOS13 的样式。自此，activity view 完全脱离了早期 action sheet 规范的影响，它允许纵向滑动、不再添加底部取消按钮、并且支持用户在本页面进行多层级的相对较为复杂的操作（比如点击 airdrop 弹出二级弹窗，但不关闭此 activity view）。总而言之，根据现行的苹果规范：action sheet 更加聚焦、迅速，它不支持多层级操作，更多被用于再确认场景。Activity view 暂时被用于分享场景，它更加具有扩展性，且支持多层级操作。「写在最后」上面讲了这么多演变历史相关的东西，其实我们也可以看出来像苹果这样的操作系统迭代是很谨慎也很慢的。从 action sheet 到 activity view，苹果花了近 10 年时间。而我们日常做设计迭代速度和反应时间肯定是要比苹果快的。因此，做设计不要单纯照搬操作系统规范，而要去思考哪些东西比较贴合场景。控件设计更多干货：「这个控件叫什么」系列之Grabber/抓握指示器鉴于国内交互设计名词混乱不统一，很多设计师不知道如何用专业术语称呼一个控件，因此我开了《这个控件叫什么》专题，梳理控件的名称和使用事项，希望能为推动交互设计发展，做出一点微小的贡献。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/activity-view-and-action-sheet
调性 图片 文字 如果说设计师有一项技能是必须要学会的，那么对于图像的处理一定是一个离不开的话题。很多小伙伴私下找我聊天的时候都提到的不知道如何使用图片，不知道如何认识和发挥出这个图片的自身优势。这样的结果很容造成要么是图片和我们自己选择的元素不搭，或者更严重可能会造成自己设计的素材图形和图片部分互相干扰从而整个画面陷入失衡的状态。今天董掌柜准备用一篇文章来跟大家详细的讨论，一张图到手后我们该如何进行分析，以及如何针对图像信息的特点做出适合的操作。当然本文也会谈到关于解析图像问题的思路和应对方式。刚才说完了定位，那么预设是什么呢？预设指的是我们做好定位后针对其参考图片进行的特征分析，分析出来的特征结果是我们在做设计的时候要参考使用的。例如我们刚才提到的纪实陈述风格，通过观察我发现他可能有以下特征，第一他的文字都相对简单简约，字形偏细这意味着此种风格要以图片本身的内容为主，文字只是做说明作用和辅助作用。第二可以采用上下分割的形式让图文分离，避免文字干扰图片。第三，图片本身不适合有过于强烈的冲击力，相对柔和自然的图片会更适合此风格。这个时候难点就来了，面对这种特别相近的风格我们应该如何做出分析处理？首先我们要把设计分成四点，第一是文字维度，显然他的文字处理要比纪实风格复杂的多，但是又没有促销那么复杂，所以第一条就可以确定下来了，文字的复杂程度适中，文字的粗细偏细。第二就是主图的内容，可以看到安静清新的风格更多表现的是整体清新安静的气质，而非图片里的内容，图片只是作为加强调性的一个元素，如果仅仅从预设定位上考虑，说白了图片就是用来加强清新安静的视觉印象的。第三就是最明显的特征，也就是不管是标题还是辅助元素都会出现大量的手绘素材，用来拉近与观者的距离。第四则是画面会留有足够的留白空间不会堆积的特别慢，标题和主体不会形成强烈的对冲，这些就是我个人分析的过程。当获取到这些信息后，我们自己的设计就会轻松很多。如果做复古感的设计我们依旧是从这几个角度考虑，第一文字肯定是要选用相对老一些的字体，例如这里的字体就类似招牌体，如果是换成我们的图片我们可能会选用明朝体搭配古罗马体。第二图片内容不存在过于明显的现代元素即可。第三最明显的特征就是整体的饱和度不会特别的高，尤其是欧式的复古饱和度会更加的低。第四要使用复古对应时代的特殊元素来强化复古的视觉印象。视觉对比度其实就是项目调性的设计大方向，视觉对比度会随着项目展现欲望的增强而同时增强反之亦然。再简单点来说就是你想让人第一眼就注意到你还是想让人沉浸式的观察你的作品。一眼注意的显然更符合大部分的商业目的，他的传播力是相对比较强的，像是常规的促销打折，电商活动等等都采用高视觉对比度的设计。沉浸式观察更适合应用在场景中，比如咖啡店桌子旁的一张海报，又或者是展会中的一个视觉作品。当然并不是说沉浸式的只能用在场景里，可以是针对某一类小众人群的也是可以，因为其设计中出现的元素可能就会让对应的人群停留下来细细观看。所谓形式形态其实决定的就是画面元素的主要造型倾向。倾向分为直，曲，斜三种。直对应的情绪是正式、平稳、安静、和谐这类的项目调性。曲对应的是流畅、自然、自由、灵动、柔软、可爱等项目调性。斜则对应的则是动感、速度、对抗、不稳定感等调性的项目。形式形态在画面中的影响包括一下几个部分，第一是我们刚才提到的造型控制，第二是字形的选择，第三还包括信息的编排形式。造型的控制因素有很多，主体的形态，项目的调性，特殊风格甚至是信息的多少都可以成为造型的主要依据。还要提到的一点就是这几种可能会同时存在，并不是互相排斥的关系。光说可能大家没有这个概念，下面我给大家找一些具体的设计图一看就能理解了。字形方面就更好理解了，根据项目的调性确定字形的选用，字形的特征可以粗略的分为这几种，圆、方、斜、飞白、曲等。我们可以根据主体的形式形态去选择字体。结合上面的知识我们来做一下案例实操，看设计如何从无到有一步步的进行演变，还有对项目调性，文案内容的分析，尤其是针对图片的处理过程大家一定要尽可能的上手尝试一下。这里我刻意选择了非水墨的国风设计风格，水墨的大家肯定都会用了，这里我就做一个不依赖水墨素材的设计了。同样也可以走传统大气的感觉以图为主文字为辅，拉大文字和图片的大小差但是又不提升视觉的对比度，方法就是让标题别那么抢眼，让主体足够清晰，标题适当缩小拉高调性。这里大家可能会看蒙了，怎么比例差越大还越弱对比了。我们可以留心观察一下下面这组图，促销欲望越强的标题和主图大小就越接近给人一种叫卖的感觉因为到处都在放大给人视觉以膨胀感。而调性高级的设计往往标题都不会太大，即使标题面积大，其中的内白也会非常大，总之不会像促销性的设计标题一放在那，就感觉是一大片，这样才能给人告知的感觉，不会让人觉得很紧迫或者挑动你消费的欲望特别强。因为其形态更加类似长方形，我们的空间形态也是长方形，一个是横向的一个是纵向的，所以一定要先进行旋转，才能让主体最大限度的发挥作用，而不是因为其扁长的趋势造成画面的负空间，很多设计师都是第一步就已经在给自己找麻烦了，就是因为没有这种分析。 一图胜千言！如何给作品配图？图形在版面构成中，占有很大的比重，也有这样一说：一幅图片胜于千字。阅读文章 > 欢迎关注作者微信公众号：「视研设」本篇来源：优设网原文地址：https://www.uisdc.com/picture-material-use
图片 相片 图库 本文要推荐的「WordPress Openverse」前身为 CC Search 搜索引擎，主要功能是在在线搜寻免费图库素材，一共可搜寻 50 多个来源、总数超过五亿张图片。所有在 WordPress Openverse 找到的相片都是采用 Creative Commons 授权或是公共领域（Public Domain）授权，使用者可从搜寻结果筛选要显示的 CC 授权类型、商业用途、图片类型、扩展名、形状、尺寸大小和图片来源。如同一般免费图库，每张相片都有信息页面，包括图片标题、作者、授权方式等信息，取用图片时会提供标示作者（Credit the Creator）的文字模板，无论是纯文本或带有 HTML 程序代码的字符串都能直接复制，在网络上使用相片时就能符合标示出处来源的授权规范，不会有侵权疑虑。WordPress Openverse网站链接：https://wordpress.org/openverse/使用教学开启 WordPress Openverse 后输入要搜寻的相片关键词，支持以中文或其他非英文语系搜寻，下方有两个选项，分别为：Use commercially（商业用途）、Modify or adapt（修改或调整），依照情况需求勾选来缩小搜寻范围。搜寻后会显示找到的相关相片结果，上方标签还可切换音频或影片类型（不过在写这篇文章时暂时还未开放），主要的筛选器选项则从左侧功能列进行选择。WordPress Openverse 筛选器非常好用，可选择特定的 CC 授权许可协议筛选搜寻结果、使用方式（商业用途或编辑修改相片）、图片类型、文件格式、长宽比、尺寸大小或是相片来源图库，在勾选任何条件后会实时更新搜寻结果。如果找不到图片可以将筛选条件移除，重复几次应该就会有更精确的结果。点选任一相片后开启详细信息页面，除了有更大张的预览图，右侧也会有相片标题、作者和授权信息，举例来说，这张图片使用 CC-BY-NC-ND 2.0 授权，使用时需要标注作者、非商业用途，如果要使用相片时可直接复制「Credit the Creator」字段的相关字样，包括带有超链接的本文、HTML 或纯文本都能依照使用者需求快速复制使用。那么要如何获取这张图片呢？不是直接另存图片，而是点选右下角「Go to image’s website」回到图片的原始网站。像是这张图片就会回到 Flickr 相簿，点选右下角「下载」选择各种尺寸或原始图片。最重要的还是 Credit the Creator 部分，如果相片使用需要标示来源的 CC 授权释出，就请记得务必要将作者和来源网址加入，避免产生侵权等问题。总而言之，透过 WordPress Openverse 搜寻到的相片（甚至是未来的音频、影片）都会是 CC 授权为主，在使用时只需要参考授权方式，必要时标注作者名称、连回到原始网站，就可以轻松使用这些素材内容，如果不想付费使用商业图库的话 CC 授权图库会是个很好的替代方案。值得一试的三个理由：CC Search 图库搜索引擎加入 WordPress 团队WordPress Openverse 可搜寻 50 多个来源、总数超过五亿张图片依照授权类型、商业用途、扩展名、形状、尺寸大小筛选搜寻结果免费可商用！超过 30 万张图片的图库PhotoStock如果平时要搜索各种好看的图片，又担心可能因为用户许可证不明而日后遇到纠纷，最安全的方法是直接从免费图库找图，若要使用于商业用途可能会修改原有素材，建议搜寻 CC0 授权图库（当然付费购买相片会有更多的素材选择。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/wordpress-openverse
能力 设计师 团队 大家好，我是应骏。看到这个标题，你们是不是想看又不敢看！相信很多设计师都向往去大厂勾心斗角，哦不，去学习技能，所以这两天我联系了咱们往期的老学员们，收集了一波肥肠！全面！的职级序列要求表格。但凡你能想到的大厂我都找了一遍，其中包括某某巴巴、某讯、某某跳动、某团、某滴、某度等等等等，只有更全没有最全。但是！我不可能把他们的文档直接发给你们，这是不可能的！但是！我可以综合一下，换几个话术，那就可以了，做人做事灵活一点，方便你我他。都是设计师，为什么别人年入百万，而你，税后 10 万？因为职级不同。为什么级别相同，别人每月还比你多 3000？因为别人综合能力更强。好了，接下来我们就来盘点一下，从青铜到王者的设计师，都有什么要求和评判标准，视觉和交互我就整合在一起说了，大家自己对照着看，我就不做区分了。另外，每个公司对于设计师评判维度不同，主要从专业能力、通用能力还有影响力这三个方面去描述。同时职级的档位还是有很大区别的，有的只有 5 个级别，有的多到 10 个级别，所以这里我也整体综合整理优化了一下。青铜-设计助理白银-初级设计师黄金-高级设计师铂金-资深设计师钻石-设计专家王者-高级设计专家青铜，设计师助理初级设计师，关键词：打杂、潜力、快速成长。这个级别的设计师最主要的工作内容就是能够在必要的辅导或标准流程的支持下处理基础性的设计任务，看中交付内容的及时性和准确性。大部分由实习设计师担任。1. 专业能力设计定位与分析能力a/ 理解设计目标和需求，有分析意识b/ 明确参与的设计内容与业务c/ 能够根据现有规范和要求及时完成规定的工作d/ 对于产品用户有初步的了解设计执行与输出a/ 具有不错的审美能力熟练掌握设计所需的各种工具和流程b/ 对信息优先级梳理能准确的掌握c/ 保持一致性d/ 对创作的方案能够顺畅客观的表达e/ 了解产品实现过程，并熟练跟进评估与复盘a/ 能够主动跟进了解项目结果b/ 能够做好项目资料沉淀c/ 对于项目有阶段性总结并 优化工作2. 通用能力项目管理与规划a/ 了解产品商业目标与团队目标b/ 能够在指导下完成个人与工作目标规划沟通与协作a/ 良好的沟通能力，能够和上下游积极并主动交流b/ 能清晰表达工作内容和个人观点c/ 学会使用 office、邮件、报表等进行日常工作汇报推进驱动无，能完成工作即可。学习能力a/有学习意愿，通过学习流程、方法完善个人能力b/ 通过指定学习掌握自身岗位工作要求的知识、技能、工具等3. 影响力无，不做要求。这个阶段的设计师主要打磨的是团队配合，个人的执行力与通用能力，也可以说是一个无情的机器，这个机器也会越来越全面。白银，初级设计师初级设计师正式开始需要更进一步体现设计师自己的价值，这个阶段的设计师必须具备扎实的设计专业，能够配合高级设计师完成大型项目。关键词：熟练方法、协助落地、高效产出。1. 专业能力设计定位与分析能力a/ 能够协助分析大型需求b/ 能够协助推导设计目标c/ 开始掌握和应用更多的设计方法d/ 了解跨专业的基础知识设计执行与输出a/ 能够独立完成常规项目b/ 高效执行，输出质量高，通过率高c/ 对设计方案的原理和依据思考充分d/ 信息设计传达准确，层次清晰，视觉有一定的创意表现交互方案符合预期。评估与复盘a/ 对开发设计效果进行高度还原b/ 能够根据上线后数据对设计目标进行效果衡量，对数据表现和用户反馈进行初步的解读和判断。2. 通用能力项目管理与规划a/ 了解产品商业目标具体的价值和背后的依据b/ 对个人项目及流程进行管理优化c/ 能够合理处理多任务沟通与协作a/ 优秀的沟通能力，能够和上下游积极并主动交流互相理解b/能够正确理解其他合作方的目标，并有效配合，协作完成项目任务推进驱动a/ 能够积极接受、准确理解并独立完成工作。b/ 能够及时反馈问题并沟通工作进展，反思问题的解决方法。学习沉淀能力A/能够从工作中总结并提炼共性规律，沉淀总结形成可复制经验的模式3. 影响力a/ 能够通过总结得出有效的设计结论b/ 能够在组内进行分享黄金-高级设计师到了这个阶段的设计师，才真正成为中流砥柱。关键词：独当一面、精通方法、融会贯通。基本上所有的一线大厂在社招的门槛就是从高级设计师开始招，所以在很多公司，可能都没有要求设计师需要有产品思维和对产品、用户分析的能力，但是到大厂，每一位设计师都会要求对自己的设计负责，并能够进行复盘的能力。在小公司混到个总监，可能还不如大厂的高级设计师就是这个原因。1. 专业能力设计定位与分析能力a/ 能够独立且系统的完成需求分析和目标推导b/ 能够基于目标制定合理的设计策略c/ 能够独立完成竞品分析等各种方法用于指导设计工作d/ 能够制定重要、大型项目的设计风格或交互规范e/ 熟练使用各类设计方法，提出可行性设计方案设计执行与输出a/ 设计精准度高，具有差异化表现b/ 设计方案及作品让用户满意度高c/ 有严谨的流程逻辑或合理的创意思考过程，符合设计目标d/ 设计效果与方案可以让目标用户产生情感共鸣e/ 针对不同项目需求输出高品质的方案、策略、规范f/ 能够与开发讨论实现原理评估与复盘a/ 能够对项目目标的达成情况进行正确评估b/ 主动进行复盘，提出项目中问题和改进建议c/ 能够对设计效果深入评估，找到与目标之间的差距和原因，并提出解决方案2. 通用能力项目管理与规划a/ 对所负责的产品线的产品形态和业务模式了解掌握b/ 能判断出产品中的问题和缺陷，制定产品优化计划沟通与协作a/ 具有抗压性、面对项目困难，能能够协调各方共同推进b/能够正确理解其他合作方的目标，并有效配合，协作完成项目任务c/ 积极参与内部或部门之间的工作相关交流和研讨推进驱动a/ 能够参与、承担跨团队和较复杂的项目b/ 能够识别项目关键因素，高效的解决问题和推荐项目c/ 有意识的考虑已有的模式和框架的可扩展性，在当前业务领域的设计或体验上提出创新方法或思路d/ 具备较强的分析归纳能力，能主导产品线的规范整理和标准建设工作学习沉淀能力a/ 学习效率高，对本专业领域知识能够融会贯通、举一反三，充分组合，灵活运用3. 影响力a/ 能够通过总结得出有效的设计结论b/ 能够在组内以及公司内部进行分享和传播，使他人的工作质量得到提升c/ 能够指导本级别以下设计师，传授基本方法和技能铂金-资深设计师这个级别的设计师都是团队内部的核心骨干，不仅可以独立完成大型项目也可以牵头组织团队进行多类型项目的攻坚。以下不再重复描述需要的能力，在高级设计师的基础上再新增进一步的描述。并在影响力中加入管理能力。1. 专业能力设计定位与分析能力a/ 能够根据不同的业务和需求的情况做出针对性的优化b/ 具备深刻的业务思维，能够承担业务线整体的设计优化或改造c/ 精通数据分析技能，充分预见可能的问题，并提前制定计划和措施d/ 掌握前沿的系统化设计方法设计执行与输出a/ 对品牌有深入研究能够在产品中融合并传达品牌，具有深入的品牌意识和思维b/ 思路敏捷，富有创意，能从全新的角度进行设计思考，同时乐于在工作中进行概念创新性尝试，有设计决策或者创新点，如模块级创新、设计流程、动效表现等，并能对用户体验环节尤其是数据层面、品牌层面产生明显影响和提升评估与复盘a/ 能够根据数据表现做精准的解读和判断，有效指导设计迭代和优化，并输出改进方案和计划。b/ 让团队理解指标和数据并通过迭代设计提升体验关键指标2. 通用能力项目管理与规划a/ 全面了解业务，关注行业动态，对行业产品有较多的观察和研究b/ 能为中大型项目制定有效计划，从多方面角度衡量并高效合理的分配资源沟通与协作a/ 抗压力极强，坦然面对困难和变化，擅于应变以保证工作的顺利进行，过程中能积极寻找办法提高效率和成b/ 掌握多种沟通技巧，并进行跨团队沟通c/ 能够组织 15 人以内的会议达成共同目标推进驱动a/ 能够承担跨部门的、难度大的、具有挑战性的项目，并高质量完成B/ 擅于与不同类型的伙伴进行高效合作，能通过沟通、制定规则、采取措施等驱动各方形成较强的向心力学习沉淀能力a/ 具备突出的分析归纳能力，善于定位和发现问题的本质b/ 能够系统型的进行经验总结和沉淀，形成新的流程、方法、工具和规范能利用自己的综合能力打破以往的模式和框架，另辟蹊径针对性的解决业务问题3. 影响力/管理能力a/ 能够积极开发部门及公司级别的专业课程，担任讲师，并高质量完成授课内容b/ 能够通过监督、辅导、反馈能提高下属的胜任能力c/ 帮助团队进行人才选拔和评审d/ 在不确定的项目中，挖掘出新的用户价值来提升专业竞争力e/ 能够结合人员的不同特质和经历采取不同的辅导策略钻石-设计专家这个级别的设计师开始在更高的领域发挥自己的专业影响团队和业务。基本上在一线大厂的年收入可以近百万。同样，以下描述在资深的基础上更进一步。1. 专业能力设计定位与分析能力a/ 某一专业领域的体系搭建者，基于专业/业务的 发展战略和痛点需求，进行系统规划与核心专业 攻坚b/ 能够深刻理解所负责方向的运作机制、业务逻 辑，并且能够跳出职能视角，基于用户、业务和 资源等多约束条件思考最优解c/ 精通各种专业设计方法背后的原理、规律、用户依据d/ 能根据对方法原理和用户依据的理解，建立适用于团队的专业设计方法体系设计执行与输出a/ 能主导某一专业领域的设计发展与协作，把控 质量，权衡收益，建立审核标准与迭代机制b/ 具备体系化的设计理念，在公司内为某一专 业领域的发展带来影响c/ 指导团队设计方向和对设计目标的完成，一击即中。d/ 能根据自己的经验和总结，建立设计输出标准，提升团队的整体设计水平。评估与复盘a/ 创造创新的数据验证方法、验证工具等2. 通用能力项目管理与规划a/ 全面了解业务，关注行业动态，对行业产品有较多的观察和研究b/ 能为中大型项目制定有效计划，从多方面角度衡量并高效合理的分配资源c/能对现有团队工作方式流程和方法进行系统化的梳理，发现关键缺陷或问题，并作出改进优化沟通与协作a/ 抗压力极强，坦然面对困难和变化，擅于应变以保证工作的顺利进行，过程中能积极寻找办法提高效率和成b/ 掌握多种沟通技巧，并进行跨团队沟通c/ 能够组织 30 人以内的会议达成共同目标推进驱动a/ 能够组织跨部门的、难度大的、具有挑战性的项目，并高质量完成b/ 擅于与不同类型的伙伴进行高效合作，能通过沟通、制定规则、采取措施等驱动各方形成较强的向心力c/ 创造性的解决过复杂的系统性问题，跨专业团队推进和实施复杂项目d/ 在多个约束条件相互制约/冲突下理性决策妥善判断，合理安排资源，高效产出。学习沉淀能力a/ 对创新的方法和规律运用自如，能为团队建立可复用的新思路、新方法、新工具、新流程，并取得业绩上的突破.b/ 能够指导团队进行学习和创新.c/ 擅于化繁为简，能够将复杂的思想和观点以别人易于理解的方式表达出来，将自己的总结、经验等进行有效传递.d/ 自己的系统性总结能成为具有业内领先水平的学术性产出，价值获得公司、业内普遍认可.e/ 具备较强的宣讲能力，有感染力，能代表团队在大规模的行业研讨会或分享会上进行分享和传播，并获得良好反响3. 影响力/管理能力a/ 能够识别人才特质并给以合适的发挥平台，最大化人才价值b/在实际工作中懂得有效应用激励方法，团队士气高昂，上进有追求c/ OKR 设置科学有效，并能够将绩效目标贯穿在日常辅导中，及时发现偏差、肯定进步或给予帮助d/ 能够给团队传授全面的知识体系e/能够在局部团队建立人才培养体系和梯队建设王者-高级设计专家这个级别的设计师，去中小企业做个总监不是问题了，在大厂也是总监的预备候选者，不如果不按照技术序列来算的话。希望大家在多年之后都可以具备或成为一个行业的高级设计专家，大部分人在这个阶段也已经达到了个人能力和职业生涯的天花板，毕竟再往上做高层管理不仅仅靠的是这些能力，机遇、社交、大局观都很重要。1. 专业能力设计定位与分析能力a/ 多领域融会贯通的首席专家，对公司内设计体系 及所负责业务的专业发展战略起到重要贡献及影 响，能够完成战略拆解，看重破局能力b/ 能够洞悉专业方向的发展趋势，结合用户理解及 业务核心发展战略拆解助力决策c/ 融汇贯通各种专业设计方法背后的原理、规律、用户依据，并能根据对方法原理和用户依据的理解，建立适用于团队的专业设计方法体系设计执行与输出a/ 能将自己的经验和总结，提炼沉淀为被团队复用的工具或方法，提升团队整体设计输出质量和效率。让团队的整体设计水平引领业界设计水平b/ 规划方向，洞察战略级问题，推动公司提质。c/ 能够正确理解业务战略，规划整体设计方向和策略d/ 能够发现战略级用户体验问题并提出有效的优化方向评估与复盘a/ 能够全面评估战略级产品或业务的设计效果，明确设计在其中的价值并发掘优化机会b/能够全面复盘，从中提炼能够影响团队及专业发展的经验2. 通用能力项目管理与规划a/ 业务方向、产业格局、价值链变化、切入机会等有独立、深刻见解，能够深度参与网站发展战略的制定，并起到重要作用b/ 能够进行部门专业发展体系、管理模式、梯队建设方式等方面的规划，放眼全局，思路清晰，科学有效沟通与协作a/ ·能够完成多方业务之间的组织和驱动b/ 建立多个职能部门的协作模式，提升合作效率c/ 主导跨多个部门的战略级设计类项目，统筹策略、分工、进度等推进驱动a/ 引领业界设计技术前沿对创新的方法和规律运用自如，能为团队建立可复用的新思路、新方法、新工具、新流程，并取得业绩上的突破学习沉淀能力a/ 开发高级课程，能够开创符合业务战略所需的方法论b/ 能够在部门建立产品设计的完整知识体系3. 影响力/管理能力a/能够指导本级以下专家和设计师b/ 能够指导跨专业知识的统筹应用和策略c/ 能够指导战略级项目团队的设计策略D/在部门建立完善人才培养体系e/ 能准确的别识出团队中存在问题的关键因素，能找出实事求是地解决问题的复用性办法。一劳永逸的解决问题。f/在实际工作能开创一种环境，使团队感到放心；有理解别人感情的能力，能激发团队的自驱力，点燃团队的热情。g/ 综合运用各种激励手段使全体员工的积极性、创造性、使团队的综合能力，达到最佳状态。最后，这些职级要求也会一直在变化，甚至无法成为衡量标准。所以只能成为参考，在实际的绩效衡量中大部分大厂都会采用 okr 的形式来做绩效考核。各位小伙伴能清晰的感知到，设计师从低阶到高阶的转变就是从被动工作转变为主动工作，从个人执行到影响团队、企业，一个人的能力不仅仅体现在本身的专业，也需要从通用能力上找到自己的发力点。在新的一年里，祝大家能步步高升～我从非科班到大厂，这5点思维转变最为重要！Hi，我是彩云。阅读文章 > 欢迎关注作者的微信公众号：「应谋鬼计」本篇来源：优设网原文地址：https://www.uisdc.com/rank-evaluation
动画 格式 序列 动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。最近做的金山知了（后面改名为金山知识库）官网，头图元素加入了缓动效果，第一眼挺新颖的。金山协作新年许愿活动，许愿按钮加入了运动的形象，更能吸引用户点击。不过，输出动图和开发对接的过程中，我也遇到过一些问题：导出的动图模糊、资源太大、开发不支持动图格式等等，当时也是想尽办法地解决。这次我总结了几种常用的动图格式，也提及我输出动图过程遇到的问题和解决方法，以及我们设计师该如何选择合适的动图格式。序列帧GIFLottieAPNGSVGA序列帧刚开始接触动效，我最先了解到的 PNG 序列帧，就是输出动图的每一帧图片，然后交付开发，按帧播放图片实现。比如这个加载动画，我的练习作品，导出序列帧资源很大，所以我平时基本不用这种格式。导出方法：AE 输出选择 PNG 序列，如果要导出透明背景，通道选择 RGB+Alpha。GIFGIF 支持安卓、iOS、网页，可以说也是比较常用的格式之一。界面设计中的小元素可以使用这个格式，比如运营按钮动画、点赞图标动画等，资源不会太大。像我之前负责的新年许愿活动，因为是从 0 到 1 的产品，开发还没有支持 Lottie，所以许愿按钮动画输出 GIF 给开发实现，压缩后资源 300KB。虽然动图放大周围有锯齿，但是在手机上是看不到的。导出方法有三种：1. AE 导出 MOV 格式，再用 PS 转换成 GIF。（注意：可能是因为动画时间太长、文件太大，导出经常失败，所以我很少用这种方式)2. AE 安装 Gifgun 插件，直接导出。3. AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 GIF 输出。（注意：如果导出 GIF 图片有问题，需要勾选压缩质量，填写小于 100 的值就可以解决了）如果 GIF 文件太大，可以使用无损压缩软件：PPDuck。LottieLottie 是一个用于 Android、iOS、Web、Windows 的动画库，用于解析使用 bodymovin 导出为 json 文件的 AE 动画。动画通过代码实现，是矢量的。动画库资源会增加安装包的大小，客户端会有推动成本，不过 WPS Office 有在使用，资源大小和稳定性目前来说是可以的。比阿里犸良还强大！Lottie动效设计完全指南之前的文章已经介绍了 Lottie 是什么，以及如何导入设计文件，那么今天就为大家讲解如何根据我们的需要导出 Lottie 文件。阅读文章 > 不支持 AE 效果器直接添加的效果，比如高斯模糊、内发光、投影。支持用图片导入 AE 做出的动效，比如金山知识库官网的头图，就是使用 Lottie 方式实现，资源小，动图也很清晰。支持颜色渐变，但是导出 json 容易出问题。比如之前设计的会员卡片动效，渐变颜色导出后变成了黑白渐变。这时候只需要将所有渐变图层名称按顺序改为 Gradient fill 1、Gradient fill 2、…，就可以解决了。导出方法：AE 安装 bodymovin 插件，直接导出。（注意：要选择保存路径，导出按钮才能点击。点击设置图标，选择 Standard 和 Demo，才能导出 json 文件和 demo 预览效果）APNGAPNG 是基于 PNG 格式的位图动画格式图片，文件后缀依然是.png，可以在浏览器中预览动画。金山协作的表情包使用的也是这种格式动图。和 GIF 对比，它的优势在于动图边缘光滑，不会有锯齿和颗粒感。导出方法：AE 导出 PNG 序列，将所有图片拖进 iSparta，勾选 APNG 输出。SVGASVGA 是由 YY 团队开发出来的一种跨平台的开源动画格式，同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式，常用于直播礼物场景，适合炫酷的礼物动效。因为礼物效果比较复杂，一般是用 png 序列，一张图一帧地制作动画，输出 SVGA 文件。它只会生成一个 svga 后缀文件，代码和位图元素都被集成在了一起，但是 Lottie 会生成两个文件：json 代码文件+img 文件夹。支持 AE 自带基础动画：位移、缩放、不透明度等，但是不支持图层渐变（Lottie 支持渐变）和 AE 自带及外部插件的效果控件特效，所以 UI 动效 Lottie 比较通用，不容易出错。总结讲了那么多动效落地方案，那么在实际工作中我们该如何选择使用呢？资源大小对比质量对比使用场景对比Lottie：基本适合所有 UI 动图，比如图标动效、加载动效、插图动效、运营按钮动效等，优先使用GIF：移动端小元素动图可以使用，比如点赞动效（大尺寸透明背景动图不建议使用，锯齿严重）APNG：表情包、小元素动图（比 GIF 质量好）SVGA：直播礼物炫酷动效序列帧：资源太大，不建议使用以上就是我的业务动效落地经验总结，大家有需要这些导出插件的可以找我。腾讯出品！AE 动效设计必备指南（附超多神器和技巧）动效是用户体验的重要组成部分，也是产品调性的重要体现。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」本篇来源：优设网原文地址：https://www.uisdc.com/motion-design
信箱 邮件 地址 如果要注册网络服务或是订阅通知，大多都会用到 Email 电子邮件地址，不过直接使用真实 Email 其实并不安全，一来是电子邮件地址可能会透露你的真实身份（例如你常用的账号或公司、学校），二来是当 Email 被取得后可能成为寄送垃圾邮件或广告信的目标，更好的方法是使用临时信箱（或称暂时信箱、十分钟信箱）。本文要介绍「TempMail.Plus」是一个随用即丢的免费暂时信箱，提供用户随机产生的 Email 地址在短时间接收邮件，除了随机选择名称，也能自定义 Email 地址、设定 PIN 密码让信箱地址可供长期使用，不过不同于一般 Email 服务，如果一段时间没有使用依然会被删除。TempMail.Plus 提供 10 分钟、60 分钟、2 天、7 天不同的信箱时效，时限后自动删除所有邮件内容，而且还有十种不同的域名后缀可供选择。另一个比较特别的设计是 TempMail.Plus 具有「撰写邮件」功能，可以透过临时信箱地址匿名发送邮件，虽然仅限于在网页上操作，但这项功能在大多数的临时信箱服务不常见到，而且更棒的是有内建中文界面，如果需要暂时信箱、用完即丢的 Email 服务，TempMail.Plus 能满足大部分需求。TempMail.Plus网站链接：https://tempmail.plus/zh/使用教学开启 TempMail.Plus 网站会随机产生一个临时信箱，点选右侧「复制」取得 Email 地址，就能透过这个信箱地址收取邮件，寄送到信箱的邮件会自动进入网页上的收件匣，界面和一般暂时信箱差不多，操作上不会太难，网站右上角可切换语系，也能输入自己想要使用的 Email 名称。TempMail.Plus 提供十种不同的域名后缀，除了 @mailto.plus 还有 fexpost.com、fexbox.org 和 fexbox.ru 等等，如果遇到某些服务在注册时将暂时信箱的 Email 地址封锁，就能选择其他的网址来跳过检测、达到相同效果，或是选择自己偏好的域名。当有邮件寄送到 TempMail.Plus 信箱后就会显示于网站上，包括发件人、邮件标题和时间，点选就能开启并阅读邮件内容，不想继续使用也能点选「销毁收件匣」直接将所有 Email 手动删除。点选「设定」后选择临时信箱的时效，最短 10 分钟，最长可达 7 天（一周），比较特别的是这项服务有设定 PIN 码功能，可以将它想象成是密码，让特定的 Email 地址暂时无法被别人使用，除非有输入正确的 PIN 码才能存取信箱。另一个「私密地址」是类似于邮件别名（Alias）功能，让用户免于将 TempMail.Plus 地址透露给其他人，透过这个私密地址一样能将收到的邮件转寄到当前的暂时信箱，算是对于信箱以外更多一层防护机制，这也是在一般同类型服务比较少见到的功能。当设定收件匣的 PIN 码后，要使用相同的 Email 地址时需要输入正确 PIN 码才能存取信箱。前面介绍有提到 TempMail.Plus 还有「寄送邮件」功能，这在一般临时信箱很少看到，可使用临时信箱 Email 来发送邮件，点选网站右上角的「撰写邮件」开启邮件编辑功能，输入收件者 Email、邮件标题和内文即可发送，还能附加文件，如果需要以匿名方式发送邮件就用得到。值得一试的三个理由：TempMail.Plus 免费临时信箱服务，提供 10 种不同域名后缀选择可自定义 Email 地址、设定 PIN 密码让特定名称不被其他人使用提供撰写邮件功能可匿名寄信不想暴露隐私？试试免费的临时邮箱生成器 Temp Mail！在 Temp Mail 网站首页告诉大家：在网络上使用真实的电子邮件地址（Email Address）并非好主意，因为 Email 很可能会泄露使用者的真实身份，或是被收集、成为垃圾邮件的寄送目标，后来有许多的暂时邮箱服务能解决类似问题，只不过临时邮箱通常不是自己的 Email 邮箱，而阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/tempmail-plus
系统 保罗 品牌 当今很多设计公司类型都是从广告公司分拆出来的，其中包括包装设计、导视设计、活动策划、营销策划等等，本次我们要聊其中一个子类，就是品牌设计公司。品牌设计在过去只属于广告公司其中一项服务而已，一般都是发现品牌水平妨碍了广告发挥才“顺便”做一下，直到后来市场的需求逐渐增强，VI 系统被逐渐完善，这个模块才独立出来。这种增强与完善有着本质原因，就是商业竞争的不断升级。美国公共电视网的 VIS 设计过去有好产品是最重要的，因为市场总的存量不多，能快速做到广而告之大家就会蜂拥而至，后来产品不但越来越多，而且品质功能越来越不相上下，那么品牌的作用就突显出来，因为品牌的建立会带来信任背书及光环效应。广义的品牌设计不能直接跟 VI 设计画上等号，因为还有策划的部分，有战略与营销层面的考虑，而且发展到如今流派与理论繁多，中西方因地制宜，国内也各执一词，甚至相互矛盾，仍然是一个不断发展中的系统。本次跟大家探讨的品牌设计主要指视觉层面的 VI 系统，VI 的英文原文是 VisualIdentity，直接翻译是“视觉规范”的意思。美孚石油的 vi 设计这个系统放置到企业中，也有另一个称呼叫“Corporate Identity”,就是俗称的 CI，由日本国家后来拓展而来，我们后面会有所介绍，但在日常操作中其实用得比较少。VI 系统本身如果要追溯，要从 1907 年德国设计师彼得·贝伦斯（Peter Behrens）承接电器公司 AEG 的项目谈起。彼得·贝伦斯历史渊源“视觉规范”的核心其实是系统性，情况如同一位明星去登台，如果只设计了发型，服装、配饰、道具跟背景都不予考虑的话就是一个翻车现场，一个完美的表演应该是方方面面都有和谐统一的设计与部署，这就是 VI 系统的基本原理。一个产品或者一个组织拥有商标（印记、徽章）是一个难以追溯源头的事情，可以说有了族群跟商业活动之后就有了，但拥有一个系统按历史公认事实就是彼得·贝伦斯（故事详见《设计大师启示录》）为 AEG 设计的企业形象。我做了世界第一套VI：顶尖设计师彼得·贝伦斯大师列传系列：[link https://www.uisdc.com/less-is-more-mies-2][link https://www.uisdc.com/bauhaus-originator-walter-gropius][link https://www.uis阅读文章 > 贝伦斯为 AEG 设计的 VI 系统当时贝伦斯为 AEG 提供了真正的“全案设计”，从企业 logo 到视觉规范，从产品设计到厂房设计，从包装设计到广告设计，这些设计具有严谨性、统一性及识别性。贝伦斯为 AEG 设计的一系列产品如此一来极大提升了 AEG 电器的市场竞争力，因为当时没有任何一家企业有意识这样玩，AEG 公司因为形象的完善得以快速进入消费者记忆，创造难以量化的商业价值。贝伦斯为 AEG 设计的厂房可惜这样的探索很快被一战的爆发所打断，镜头一晃就去到二战之后的欧美。当时以美国为首的欧美国家经济发展迅速，诞生了不少跨国公司，折射到设计界就出现了几个方面的大变化，比如国际主义风格的出现，广告公司的发展与细分，再者就是 VI 系统的再一次发展。聊保罗兰德（Paul rand）的故事时，我们谈过他曾在 1956 年为 IBM 设计企业形象就属于发展中的一个案例。只出一稿，绝不修改：聊聊顶尖设计师保罗兰德的故事上一回我们讲到了国际主义开始在平面设计领域中称霸，这种风格以包豪斯现代主义为 DNA，然后在瑞士地区成型，最后被美国地区发扬光大继而推广到全球。阅读文章 > 保罗兰德为 IBM 设计的视觉系统本次我们继续以案例方式跟大家回顾 VI 发展的历史，在此之前，跟大家说清楚两个概念。其一是 VI 系统的应用不局限于商业组织，比如每一届的奥运有 VI 系统，城市会有 VI 系统，政府也会有 VI 系统等，但最终目的都会落在识别、记忆跟效益上。香港的城市视觉识别系统其二就是这个 “系统与规范”到底包括什么，这方面大家能在百度百科或者学院教材中找到说法，但因为史太浓本身经营品牌设计公司，所以希望从市场经验角度谈一谈。这种经验角度存在一个特点，就是未必人人同意，前面我们就谈过，品牌设计目前还是随着市场变化在发展，所以百家争鸣，比如国内知名的华与华公司就认为 logo 不需要释义，辅助图形是多余之类。VI 系统包含什么一般而言 VI 系统分两大部分，其一是基础部分，这个部分主要是 logo 图形，色彩跟字体的使用规范。远麦刘斌品牌设计案例设计好的 logo 图形不能变是最基本的（动态 logo 除外，这是另一个话题），其次就是最小应用尺寸规范、logo 元素的组合规范，比如图形跟公司名称的组合，图形与 slogan 的组合，这些都是需要设计好并固定下来。以往 logo 标准制图在数码时代其实有点多余了，那种设置是为手工制作标志实物而考虑，但看如今很多公司都保留其实有点可笑。远麦刘斌品牌设计案例颜色规范主要是主色跟辅助色的运用，色彩的主次管理非常关键，所以一般而言都会落实在 VI 手册上，标注具体色彩数值，跟 logo 组合的背景色深浅比例等，不能随意改变。字体规范是指企业往后物料使用的标准字体，如果公司比较豪横会专门开发设计一款字体自己用，比如淘宝，但大部分其实都会购买一款合适字体或者直接使用免费字体。基于以上三个规范，VI 设计师会为企业设计好基本应用物料，比如名片、PPT 模板、工作服、基本办公室导视、信封、杯子一类，这些物件都是各应所需，并非一定要，所以有企业良心的设计公司都会进行具体了解，而不是为了多收费一股脑的为客户设计。远麦刘斌品牌设计案例基础部分大致如此，有时候企业会需要设计辅助图形跟吉祥物（IP），主要目的是丰富形象视觉元素，其中有利有弊，比如增加宣传成本，这方面篇幅有限就不展开了，我们谈第二大的部分，就是应用。远麦刘斌品牌设计案例-吉祥物VI 的应用部分主要是广告营销、展览、包装等模块的设计规范，大家注意“规范”这个词，意思是针对具体物料做一个规范出来，日后相同物料或者类似物料按此规范设计。远麦刘斌品牌设计案例-画册这也是很多客户会误会的地方，比如画册规范，客户误以为是将画册设计完，其实主要是画册版式与品牌视觉元素的结合应用。而且不同行业的差异很大，比如房地产跟餐饮就很不一样，餐饮没有楼书，而房地产没有菜单等，要具体问题具体分析。远麦刘斌品牌设计案例-餐饮行业比较通用的一般有画册、网站、海报、工业包装等，但按我们的实践经验看来，这些部分逐渐变得鸡肋，就是这些规范最后放置到 VI 手册后因为各种因素能严格执行的非常少，或者完全按规范设计出来的效果非常不理想。所以这部分物料一般而言应该直接做应用层面设计，史太浓也一直有个观点，就是 VI 手册其实是给美工去看为主的，比如一些物料制作商，真正掌握了设计系统的人心中有乾坤，手中有度量，都是根据实际市场目的进行发挥。远麦刘斌品牌设计案例-空间应用从历史故事中也能发现，VI 做得特别成功的公司往往都有一位长期合作的设计师或者一间长期合作的公司。IBM 是个例子，长期跟保罗合作，其次还有意大利的奥里维蒂打字机公司（Olivetti Corporation）。平托里为奥里维蒂设计的视觉系统其品牌主创设计师奥瓦尼·平托里（GiovanniPintori）为公司服务了长达 31 年，这个公司出色的 VI 系统设计也写进了历史。“动态”VI接下来我们谈一个比较特别的案例，就是美国哥伦比亚广播公司（the Columbia Broadcasting System）在 1951 年设计的 VI 系统，该公司我们后面简称 CBS。CBS 的 logo 设计操刀 CBS 公司 VI 系统的设计师名为威廉·戈登（William Golden），在公司工作了 20 年之久，后来是因为急病突然去世，年仅 48 岁，当时已经做到 CBS 创意总监。威廉为 CBS 设计的标志是一个完全扁平化的简约眼睛，眼珠子处放置公司名字，前面谈及的图形、颜色、字体相关基础规范都有，但有一点很特别，就是这个 logo 图形的背景可以随意改变。CBS 创意总监威廉·戈登[/caption]比如最初的设计是将眼睛放置于一个圆框中，背景是真实的天空摄影图像，有种超现实主义风格的气质，创意点是基于电视广播的信号传播光波是分布在大自然中的。这样的设计获得 CBS 高层的肯定，在大众传播层面也容易理解，所以受到普遍的欢迎。但是 CBS 当时的总裁佛兰克·斯坦顿（Frank Stanton）提出了一个更高的诉求，就是作为广播电视企业当时的领头羊，CBS 的形象应该是进取与发展的，所以是否有更加创新的表现手法。CBS 总裁佛兰克·斯坦顿于是大家经过一番头脑风暴，戈登提出 logo 背景可以改变这样的方案，除了常用印刷品上的 logo 是固定平面之外，在不同主题场合或者节日可以改变 logo 的背景。于是标志中的眼睛是核心要素，而视觉变化则是不断与持续的，达到统一与变化的效果。CBS 可变化背景的 logo如此一来 CBS 作为企业形象不但让人感觉新颖而且很灵活，关键是这样的手法跟电视广播行业很贴切，电视就是动感的媒体，所以 VI 形象的动态变化设计可谓神来之笔，此案例得以载入史册。我们也从中得出一个好设计的基本公式，就是：优秀设计师+有要求的甲方。如今这样的手法仍然有品牌效仿，比如德国宝马汽车。宝马在 2020 年 3 月正式启用新 logo，将过去金属质感的黑白蓝 logo 改为白蓝镂空的形式，更加简约与扁平，而且经常运用在动态变化的动画背景中，我们在宝马的官网与公众号均可看到示例。宝马新 logo 背景可以是动画官方给出的说法是显得更加纯净与开放，确实也更加呼应新能源电动汽车这样的变革。所以很多如今看来新式的设计其实都可以从历史中找到一些对照。日本人的精耕细作VI 系统的发展高峰集中于 20 世纪 50-60 年代，忽如一夜春风来，千树万树梨花开，各种大小型企业都纷纷着手建立自己的品牌形象。我们多次谈及的保罗·兰德就是其中一位关键人物，设计出一系列非常具有国际影响的企业形象，除了之前谈过的 IBM，还有 1960 年设计的西屋电器及 1965 年设计的美国广播电视公司（ABC）等。保罗设计的西屋电器视觉系统这套从欧美成熟起来的设计体系在 70 年代传到日本，被日本人继续精耕细作，在视觉体系的基础上再延展出所谓的 BI，英文原文为“Behavior Identity“，即”行为规范系统“，类似一个对内组织、管理及培训的规范。然后又再延展出“理念识别规范“，英文原文”Mind identity”,简称 MI，类似企业经营的宗旨与方针这样的系统，越来越复杂，但是已经超出了设计师能力范围，所以有点本末倒置。日本更加复杂的企业识别设计不管如何，任何系统都是由人建立再由人打破，我们时刻要坚持的原则就是应需而变，因为时代变化越来越快，不能局限于教条主义，这样才能真正为甲方切实解决问题，提供价值。今天的故事讲到这里，感谢各位，下期再会！为什么你的设计没有品牌感？收下这份近两万字的品牌设计指南品牌是一个比较抽象的词，那是因为一提到品牌，每个人都会对品牌拥有自己的见解。阅读文章 > 欢迎关注作者的微信公众号「设计史太浓」：本篇来源：优设网原文地址：https://www.uisdc.com/brand-vi-design-history
曲线 动画 互动 从设计的维度，动态设计可以分为交互动效和 Ae 动效，在这两方面个人都有相关落地项目。但是自己感觉学得不够系统，只是能做需求，做得还不够好，所以最近几天我都在学习研究 Material Design 交互动态系统规范。从整体框架和细节入手，我结合日常业务设计思考总结了几点，也输出了一套动效标注模板，希望对大家有帮助。这次总结主要是分享交互动效的相关干货，方便自己沉淀设计经验，大纲如下：动效的作用设计原则持续时间缓动曲线动效风格动效标注动效的作用相信很多设计师在日常业务中都会主动挖掘机会点，来为产品增值赋能。机会点可以是交互动效，但是我们该怎样和产品同学沟通推动才更有说服力呢？如果只是说提升用户体验，说服力是很弱的。因此，我深度学习了 Material Design 动态系统规范，结合界面案例总结了几点作用：1. 使用更愉悦，微体验更好比如标签栏 tab 切换、下拉菜单出现，加入动效，符合现实场景动态，界面更加生动，还能缓解用户对内容的枯燥感。2. 让不同界面的元素更具有关联性，易于理解层级比如收件箱消息列表和消息详情的转换，过渡流畅。3. 提供强提示的反馈和展示当前界面状态比如键盘输出完成，动画显示操作是否成功；列表占位符，加入动画表示正在加载中。4. 教育用户，帮助用户了解如何操作比如滑动打开的手势动画，使操作行为易于理解。动效原则好的交互动效，会给人愉悦的心理感受。设计过程应当遵循以下几点原则：1. 自然在现实世界中，物体的速度会受到自身重量和摩擦力影响，不会突然运动，也不会突然停止，因此要使用缓动曲线，平稳过渡。2. 及时反馈动画持续时间适当，响应迅速，有助于用户了解 UI 变化。不宜太快，人的大脑容易反应不过来，处于很懵的状态。也不宜太慢，用户一直在等待，会产生枯燥不耐烦的心理感受。3. 简单明了动画过渡要简单明了，保持连贯，避免多个元素交叉重叠，显得混乱。4. 一致性遵循尼尔森十大交互原则中的一致性原则。整个产品应当使用统一的动效标准，比如运动速度、缓动曲线统一，使用户体验一致。持续时间在及时反馈原则上，Material Design 规范对于手机端的动画持续时间，提供了三个层级建议：小范围过渡的元素，建议时间是 100ms，比如开关按钮动画。中范围过渡的元素，建议时间是 250ms，比如半屏面板展开。大范围过渡的元素，建议时间是 300ms，比如悬浮按钮转化为全屏面板。这个时间我们只能参考，具体动画时间还是要看界面效果来确定。缓动曲线缓动曲线，调整过渡元素的速度，按物理规律自然地加速或减速，这样动画才会显得自然愉悦。在不同的平台或软件，缓动曲线可能会有不同的命名，MaterialDesign 规范定义了四种：1. 标准曲线标准曲线（也称为 EaseInOut）是最常用的缓动曲线，元素从静止开始快速加速，缓慢减速到结束。这种缓动曲线适合屏幕内的元素在屏幕内的运动，过渡自然，可以用在悬浮按钮转化为面板的动画。2. 强调曲线强调曲线（也称为 EaseInOut）是标准曲线的拓展，元素加速时间减短，减速时间加长，强调过渡的结束。这种动画效果会稍微俏皮一些，对于办公产品要慎用，也避免曲线样式太多设计师无法清晰地区分使用。3. 减速曲线减速曲线（也称为 EaseOut），元素从屏幕外快速进入并逐渐减速，在静止时结束。这种缓动曲线可以用在半屏面板出现的动画。快速进入，可以迅速响应用户的操作行为；当用户大脑收到即时反馈后，为了避免高速移动带来的紧迫感，元素需要缓慢减速到静止。同时，让用户在等待过程中可以提前识别和接收内容信息，动画结束后可以第一时间操作。4. 加速曲线加速曲线（也称为 EaseIn），元素在屏幕内静止，逐渐加速离开屏幕。这种缓动曲线可以用在半屏面板消失的动画。用户操作关闭面板，表示已经不关注面板内容，这时动画就需要快速响应，加速移动屏幕，避免用户出现等待的焦虑感。动效风格设计师了解完动效原则、持续时间、缓动曲线后，当业务需要定制一套动效标准时，我们需要结合产品调性制定动效风格。工具类产品专注内容，可以使用直接、简洁的风格；娱乐类产品，可以使用俏皮、活泼的风格。影响动效风格主要有几点：速度、运动路径、缓动曲线、海拔高度，我们可以看下对比效果。1. 持续时间 300ms 的标准缓动和 650ms 的强调缓动的对比。2. 如果元素沿对角线移动，运动路径可以是直线或弧形，看下对比。3. 默认过渡和弹跳过渡的对比。4. 默认情况下，背景内容在动画过程是静止的。为了动画更生动活泼，可以调整背景内容比例来强调海拔高度。从对比效果来看，持续时间较短、斜向移动的直线路径、默认过渡、默认海拔高度的动画风格直接、简洁，及时反馈，专注内容；持续时间较长、斜向移动的弧形路径、弹跳过渡、变化的海拔高度的动画风格强调动画的过程，俏皮、活泼、生动有趣。如果是办公产品，需要克制下，不要盲目强调动画。动效标注设计师完成交互动效 Demo 后，就要输出一份动效标注交付开发实现。在实际项目中，我有遇到过一些问题：有些设计师反馈文字表格不直观、不易编辑，有些开发同学反馈动画曲线看不懂。为了解决这些协作问题，我结合动效标注的项目经验、参考 Material design 规范动画曲线和咨询开发同学的意见，最终搭建了一个 Sketch 动效标注模板，组件化搭建编辑，比较方便。（有需要的同学可以在文末和开头下载）总结以上就是我对 Material Design 交互动态系统的学习总结。理解交互动效的具体作用，我们才能更有说服力地和产品沟通推动落地。在设计过程中，我们应当遵循自然、及时反馈、简单明了、一致性的原则，结合产品调性打磨出一套自然愉悦的动效标准。还需要注意一点，要恰当使用持续时间和缓动曲线。由于个人还没经历过整套产品交互动效系统的搭建，还有许多不足之处，接下来会继续学习！腾讯出品！2021-2022设计趋势报告：动态篇前言动态设计（Motion Design）有助于创建令人愉悦且直观的用户界面。阅读文章 > 欢迎关注作者微信公众号：「ALEI的设计思考」 文件名 如何下载使用 文件大小 提取码 下载来源 交互动效标注模板3.36M2333 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/material-design-system-conclusion
明度 色彩 色相 可能很多小伙伴都有这样的感觉：对色彩的各项概念已经非常了解，日常积累了很多优秀的色彩搭配素材及作品，也有进行临摹训练，但是自己在面对一个新设计命题时，却依旧无法准确选出最贴合主题的颜色，各种配色试来试去都不是自己想要的感觉。之前向大家介绍过 HSB 色彩模式。HSB 色彩模式按色相、饱和度、明度三个属性来表述颜色并进行量化，以更贴近人类感官直觉的方式来描述色彩。熟悉 HSB 色彩模式，就可以通过个人对色彩的感知与把握选取一个颜色，再通过 HSB 模式的调色板实现快速选色和配色。HSB 色彩模式让我们可以更准确地选取自己想要的颜色，也提供了相应的配色技巧。但是如果我们还不知道自己想要什么样的颜色，或者不确定什么样的颜色最贴合主题呢？今天就为大家介绍一种专业实用的色彩体系——PCCS（日本色彩研究所配色体系），让大家以更便捷直观的方式来理解颜色的分类及连续变化，快速准确找到合适的色彩。学会HSB色彩模式，让配色有理有据！念起作为一名 UI 设计师，不免每天都会和色彩打交道，但有时总会苦恼于色感把握不准，让我们配的色彩，总是“不对味儿”。阅读文章 > 什么是 PCCS（日本色彩研究所配色体系）？PCCS，全称 Practical Color-ordinate System，是日本色彩研究所于 1964 年发布的颜色体系，是目前全世界最常用的色彩体系之一，在平面、服装、建筑、室内等各个设计领域都有广泛运用。“Practical Color Coordinate System”直译过来就是“实用色标体系”，从”实用”2 个字就可以看出 PCCS 侧重于实践运用——色彩要如何理解才更方便，如何搭配才更和谐更好用。PCCS 将色彩空间分成了 24 个色相、17 个明度色阶和 9 个纯度等级来进行体系构建。其最大的特点是将色彩的三个属性，综合成色相与色调两种概念来说明全部的色彩变化。下面逐一为大家介绍 PCCS 中不同概念的含义。1. 24 色相环PCCS 色相环有 24 个色相，是以心理学四基色为基底延展形成一个色相圈。每种色相前标示一个数字。由于色彩间隔注重等感觉差，因此 PCCS 色相环又被称为等差色相环。四种心理原色为“红（2：R）”、“黄（8：Y）”、“绿（12：G）”、“蓝（18：B）”，在圆周上顺时针排列。每种心理补色放在 4 色的对面位置，构成 8 个色相，再对 4 色进行插值，使它们间隔相，构成 12 色，再进一步细分，形成 24 色。2. 17 级明度阶梯PCCS 中明度设置白色为 9.5，黑色为 1.5，它们之间每 0.5 分为一级，共 17 级。3. 10 级纯度阶梯PCCS 中每个色相的代表色（鲜艳的色调）都设置为相同的饱和度（9s），同一色相从饱和色到无彩色的纯度变化被均匀划分，使其以相等的间隔被感知。无彩色为 0s，纯色为 10s，将色彩空间一共分为 10 级。但是 10s 的饱和度是用色卡无法再现的颜色，所以色卡中的纯色是 9s。以上就是 PCCS 系统中的色彩三属性。需要注意的一点是，各色相的纯色都有作为色彩本身各自的明度关系。比如，黄色的色相明度最高，其次是两侧的黄绿色与橙色，依次顺沿，离黄色越远明度越低，直到紫蓝色时明度最暗。这是色彩的自然连锁。在实际观察中，色彩给我们的直观感受与纯粹的颜色是不同的。比如暗的黄色与明亮的紫色在明度上没有差异，这种明度与纯度之间复杂的变化关系往往令我们难以把握色彩的变化。PCCS 则提出了“色调（Tone）”来表示明度与纯度的复合概念。用“色相”和“色调”这两个属性形成二维体系，来表示色彩的性格，便于色彩的各种搭配。4. 12 类色调(Tone)PCCS 将色彩空间分成了 24 个色相、17 个明度阶梯和 9 个纯度阶梯。然后再将整个色彩群的外观色划分为 12 个基本色调倾向。每个色调都有对应的形容词及缩写代称，如纯度最高的色调命名为 Vivid，意思是鲜艳夺目的，缩写为 V。如何用 PCCS 解决“配色没感觉”的问题？通过上面的内容我们了解到 PCCS 有以下特点：1. 用色调代替了明度和纯度的复合概念，相比之前的三维体系，色相和色调形成的二维体系理解记忆更加方便。2. 色调可以用日常语言来形容，将其与色彩性格结合起来，可针对不同主题的设计进行快速搭配，让颜色与适合场景向结合。有了以上的认知，我们之后在积累色彩搭配经验时，就能将优秀配色更清楚的纳入自己可以理解的色彩体系之内。而在遇到某一设计主题时，也可以根据主题延展出的情感氛围，找到对应的色调。这样慢慢积累，找到合适的配色就不再是难题了。以一组 Banner 配色学习为例：通过分析我们可以得出不同主题风格所对应的色调，将其总结归纳，之后遇到相同风格的主题时，就可以更好的把握选色及色彩搭配。以上就是 PCCS 色彩体系帮助我们实现快速准确选色的全部内容，喜欢的小伙伴记得点赞收藏哦~之后练习创作中多多思考运用，配色能力肯定会大幅提升！更多色彩搭配技巧：https://www.uisdc.com/zt/color-matching本篇来源：优设网原文地址：https://www.uisdc.com/practical-color-ordinate-system
张大湿
飞翔的企鹅
落霞与孤鹜
表哥
在路上
