图层 滤镜 透视 Hello，各位宝贝大家好，我是你们好久不见的小肥肥~我又来给大家讲一下稀奇古怪（但有用）的小技巧了，觉得有用请用力的夸夸我。1. 调整产品透视，让它更自然与环境融合有时候我们需要将一个物体 P 在画面中，让他看起来浑天天成，自成一体，但总是会出现这样的情况。这物体放进画面，透视角度完全对不上。那应该用什么方式来解决呢，机智的小肥肥来教你①首先选中图层，点击菜单栏的「编辑-透视变形」。②然后使用鼠标画出盒子三面的网格，接着点击属性栏的「变形」，然后拖拽操控点，调整到合适的透视角度。③最后再给物体加一点投影，产品就可以比较自然的放在环境中啦，这就是透视变形的妙用。2. 快速制作墙面转折投影上文提到的透视变形，除了修改透视，其实还可以用来做投影当我们在制作产品展示场景时，可能需要给产品添加投影。如果产品后面有墙面，就一定要注意了。很多同学都是这样的投影，这是完全错误的做法。正确的做法如下①先将产品图层复制，鼠标右键「栅格化」，再点击锁定透明像素，然后吸取背景深色，「Alt+Deldet」填充做投影。②将投影放到产品层下方，点击「编辑」-「透视变形」。分桌面与墙面部分拉出两个框。③点击属性栏的「变形」，然后拖拽锚点，做出投影的转折感并回车。④将投影图层模式改为「正片叠底」，并使用「滤镜」-「模糊画廊」-「光圈模糊」为投影添加虚实变化。⑤最后将投影尾部用橡皮擦稍微擦淡一些，我们的投影就完成啦！3. 一键替换天空在户外拍照时，如果天公不作美，可能会拍出不合心意的天空照片。但是没关系，前期不够，后期来凑，在 PS 2021 的版本中，有一个非常简单的功能，可以让你一键更换掉照片中的天空。打开 PS，导入照片。选择图层，点击「菜单栏」里的「编辑」-「天空替换」。在弹出来的选项卡里，可以选择天空的类型，有「蓝天」、「盛景」和「日落」。选择好之后，还可以调整「亮度」、「色温」、「光照」、「颜色」等效果，让天空和前景更贴合，更真实。并且还可以用鼠标在画面中拖动天空的位置哦。4.「禁止套娃」迭代照片上图的这个「套娃」效果是不是很有趣？教你一分钟就搞定它！首先选择一张合适的图片，一般用相机、手机、或者画册图会比较合适，导入 PS 后，按「Ctrl+J」复制一次图层。接着，选中复制好的图层，按「Ctrl+T」，调整大小和旋转方向。然后隐藏掉新图层，回到之前的图层，用「钢笔工具」或者「选框工具」给相机中间区域制作选区。再次回到复制图层，取消隐藏后，点击「图层面板」最下方的「新建蒙版」，为它添加蒙版。最后，按「Ctrl+Shift+Alt+T」重复上一步的变换操作。这样，套娃效果就制作出了。5. 调整文字对齐当我们的文本中有双引号等符号时，就算点文字居中对齐，文字看着也是错乱的。这时，我们可以点击「段落-设置-罗马式溢出标点」。这样文字就可以完全对齐啦。6. 给产品做自然高级的阴影，看起来更真实怎么给产品加上自然高级的阴影呢？你只需要画一个和素材差不多大小的黑色矩形，放置在素材后面（闹钟），然后使用「滤镜」-「移轴模糊」，微调数值，看见出现一点阴影，就可以啦。7. 给人物添加更自然的口红你是怎么给人物图片加口红的呢，是这样直接画笔涂红然后降低透明度吗？达咩！！这里教你更自然的口红做法，首先将口红的图层改为「正片叠底」。但嘴巴的高光没有了，显得整体非常假。我们双击图层进入「混合选项」，然后按住 Alt 将下图层右边的色标向左拉，让下图层的高光泛上来。这样就可以最大程度的保留嘴唇的纹理感，加上自然的口红啦，我们来看一下对比。8. 快速调整段落字间距与行距在编排大段落文本时，Ctrl+A 全选文字，按住 Alt+方向键，既可以快速调整字间距与行间距9. 制作梦幻的丁达尔光效如果让画面氛围感拉爆呢，有一个手法就是添加丁达尔光效，俗称耶稣光。只需要按「Ctrl+Alt+2」调出画面高光选区，然后「Ctrl+J」复制出来。接着「Ctrl+D」取消选区，使用「滤镜-模糊-径向模糊」，调整好模糊类型和参数，以及中心的位置。就可以制作出一点光线的效果。但是这个效果还不够强烈，我们可以按 「Ctrl+Alt+F」 重复上一步滤镜，将滤镜重复几次，就可以得到非常神奇梦幻的丁达尔光效。如果觉得光效不够强烈，可以复制图层并将模式改为「颜色减淡」。文章到此就结束啦！一定要边看边动手操作下，你才能真正掌握。每个软件有太多功能，软件大神也未必全掌握。想学入门设计，最重要的是掌握设计的基础原理，学会提起作品规律参考借鉴，综合运用理论知识构建画面哦。如果你想学 PS AI AE，系统设计入门和设计原理，这里推荐一下我正在讲课的「优设设计师就业衔接班」，带你一次掌握 10 种以上设计类型，比如海报设计、图标合适、矢量插画、电商合成、动效 MG。而且上手快，零基础和一定基础都能学会！按照行业标准训练，帮你掌握职场加薪技能，甚至直接拿着毕业作品面试！复制id添加咨询师微信，立即抢占名额「大胖：uisdc2」「国庆：uisdc3」PS宝藏级小众样机插件，内附超多福利！好久不见，我又回来了，今天给大家带来一个宝藏级的 PS 插件：烤漆质感插件。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/ps-skill
颜色 语义 系统 Hi，我是彩云。咱们平时在做 UI 组件库的时候，会遇到一个问题，定义了很多颜色但在团队合作的时候，却依然还是会根据每个设计师自己的喜好来配色，很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰，那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例，希望能帮你解决这个难题。我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素：它们构成视觉语言，帮助定义品牌，并被开发和设计师每天用在产品设计中。但如果我们在使用颜色上没有明确的指导原则，颜色被团队中的设计师按喜好使用时，将会导致产品看起来非常混乱。我们 APP 中的不一致例子接下来我会告诉你，我们是如何做好颜色规范以及在整个项目中面临的挑战，正如你将看到的，这个项目并不像看上去那么简单：如何通过 Getaround 在设计和技术方面管理颜色概述这个系统的局限性，并说明我们如何改进它什么是语义颜色我们是如何实现它的，以及它带来的优势！我们之前在 Getaround 中如何管理颜色？1. 在设计方面和许多设计团队一样，我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中，可以在其中找到我们在产品中使用的所有常见样式，例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库（iOS、Android、Web、电子邮件）。颜色名称过去是基于它们的外观。例如：紫色颜色是我们的主要颜色，而石墨色是基本文本的常规颜色。2. 在技术方面在我们的 APP 中，曾经会用相同的系统来管理颜色。此外，还有一些语义颜色，但仅限于 iOS，开发用的也不多。我们在旧系统中面临的限制在使用这个系统时，团队反复面临同样的问题：如何确保从一位设计师到另一位设计师以相同的方式使用颜色？如果没有适当的指导原则，我们如何确保开发很好的还原？如果明天我们必须用全新的配色方案来改造我们的品牌，要怎么快速统一？让我们试着找出我们是如何陷入这种境地的？1）没有明确的颜色使用规范所有设计师都使用相同的色板，但自 2019 年 Getaround 品牌重塑以来，除了引入不一致之外，没有明确关于如何使用它们的规范，所以设计师在选择颜色时迷失了方向。然后他们将开始建立自己的参考资料，每个设计师都有不同的配色想法。例如：设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色？颜色命名在这里不是很有帮助2）旧品牌的设计包袱以前品牌的一些旧颜色仍在使用（按钮上的蓝色阴影，标题……）。到现在也没有真正的行动计划来迭代它们。旧驱动器品牌我们对新系统的设想在 2021 年初，我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。我们问自己“5 年后我们的 APP 会是什么样的？”。我们会回顾，Getaround 品牌是如何成为我们视觉方法中心的。以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而，为了使这一目标成为现实，我们面临着一些挑战：1）制定指导原则我们如何确保每个设计师都可以依赖易于理解和使用色彩系统？拥有一个简单系统将加快使用速度。2）颜色能通过可用性标准我们如何确保从一开始就设计出易于使用的颜色？3）易于维护并符合未来趋势我们如何才能使系统易于维护并符合现在和未来的行业标准（例如：暗模式）我们新的颜色系统：语义颜色在我们的探索阶段，在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色：（主要？强调？）我们还测试了 APP 界面在黑暗模式下的外观，以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本？我们开始与开发讨论这个问题，以了解他们有什么解决方案来处理这些问题。语义颜色的概念很快就被开发人员提出来，因为他们知道并且很好地使用了这个概念。但对于设计师来说，又要如何准确理解呢？1）什么是语义颜色？语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。例如，你可以将颜色命名为“成功”或“积极”，因为它指的是含义，而不是“绿色”或“翡翠绿”。甚至可以根据颜色在屏幕上的应用方式来命名颜色，例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……2）从基于外观的配色方案到基于语义的配色方案语义颜色并不新鲜，越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习google： https://material.io/design/color/the-color-system.html#color-theme-creationApple： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/colorShopify： https://polaris.shopify.com/design/colors#navigationAsana： https://asana.com/brand显然，这种颜色系统有很多优点。因此，现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。3）深入研究语义颜色我们的新颜色系统由两部分组成：基础色板语义颜色基础调色板我们与品牌团队密切合作，他们定义了一个全新的品牌，我们在工作时会围绕这个品牌考虑。该品牌的每种颜色都采用多种色调进行调整，以创造更大的灵活性，一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们，但他们会选择在产品中效果最好的那些。基础调色板语义颜色，语义颜色建立在用作参考的基础调色板之上。正如我之前解释的，命名不再是指颜色的“外观”（洋红色、棕色、绿色……），而是指UI 元素它们被应用于（文本、图标、按钮、背景……）以及该元素的状态（活动、非活动、成功……）。请参阅此处的命名法和一些示例：语义颜色结构和示例这意味着来自基础调色板的颜色可以用于多种语义颜色：这就是我们根据这个新原则重新调整颜色命名的方式：我们通过设计师和开发进行了内部用户测试，以确定命名语义颜色的最佳方式。我们尝试了很多不同的命名方法，发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护，同时在命名方面有足够的延展性。语义颜色的好处1）语义色彩嵌入设计原则语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测，因为视觉语言直接传达了设计决策。例如：在这里，颜色命名使设计师更容易做出正确的选择。在我们的原则中， *Accent* state 用于交互元素。2）解锁黑暗模式语义颜色可以适应不同的主题。语义颜色的名称始终相同，但它的外观可能会根据所选模式而改变。例如，语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式，将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者，因为它将使它更加面向未来。明暗模式下的语义颜色 Primary.Background3）语义颜色高效灵活如果我们将来要更新颜色，使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。另一种情况可能是更新特定 UI 元素的颜色，例如按钮，而无需触摸使用紫色颜色的其他元素。在这种情况下，我们只需要更新 ButtonBackground.Primary 颜色，非常简单。如果没有该系统，更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。4）颜色组合指南这个系统似乎很容易使用，但设计师仍然有一些问题：我什么时候可以使用正常文字颜色？我什么时候可以使用次级文本颜色？我什么时候可以使用可交互颜色？为了帮助设计师选择颜色，我们创建了一个交互式指南，列出了所有可能的颜色组合。我们在 figma 原型中创建了这个指导原则，每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合，以最大限度地保持一致性。Figma 中内置的语义色彩交互指南结果采用这种新的颜色系统产生了一些变化：1）我们从“Foundation”库中提取颜色，并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到 Dark 模式。这也使库更轻且更易于维护。2）语义颜色已在我们的 iOS 和 Android 应用程序上成功实现，我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。总结总结下今天学到的内容：1）发现并准确描述团队在使用颜色时遇到的问题2）如何从提出设想，到以新的方式来定义颜色3）如何通过语义化颜色来使得大家更方便的使用颜色，我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理，这样团队协作才会更加高效。超详细！凤凰新闻「暗黑模式适配落地」全方位复盘凤凰新闻 APP 在 2020 年上半年完成了 Dark Mode 适配，本文主要从规范、设计和实现的角度对整个项目的落地过程进行复盘。阅读文章 > 欢迎关注作者的微信公众号：「彩云译设计」本篇来源：优设网原文地址：https://www.uisdc.com/colors-standard
工具 神器 白描 大家好，我是努力为设计师寻找效率工具的花生~今天继续为大家推荐的 5 款能有效提升工作效率的神器，它们分别是：无损压缩！功能超全的 GIF 处理神器「EZGIF.com」写教程必备！快捷键图片生成工具「KeyCaps」打开即用！免费的图片转文字神器「白描网页版」样式可调节！Google 字体推出系列图标「Material Symbols」改颜色换样式！文件夹修改神器「Folder Painter」错过上一期的小伙伴看这里：这 5 款工具，让设计师工作效率提升 200%！（四）大家好我是花生~勤勤恳恳挖掘效率神器的我最近又发现了不少好用的小工具，今天就继续为大家推荐其中不能错过的 5 款，它们分别是： 一键查看！阅读文章 > EZGIF.com「网址直达」 https://ezgif.com/optimize「EZGIF.com」是一款在线的 GIF 编辑工具，功能包括在线制作 GIF，视频转 GIF，GIF 裁剪、删帧、比例压缩、旋转、添加文字、调速、倒放等等。虽然是外文网站，但是可以直接打开使用，无需注册登录。我最常用的是它的 GIF 优化功能，用来压缩 GIF。将 GIF 上传后，拖动横条选择压缩强度，点击优化，片刻后就会有压缩好的图像显示出来，可以很直观地看到压缩后图像的质量和大小，不行的话可以调整选项重新压缩。它提供的压缩选项很多：优化颜色、定向删帧、有损压缩、优化透明度等等。个人经验定向删帧和有损压缩的优化效果最好。KeyCaps「网址直达」 https://kcaps.app/「KeyCaps」是一个专门生成快捷键图片的工具，输入所需的快捷键，1 秒生成对应图片。网站提供快捷键 7 种不同的快捷键样式，可以切换 Mac 符号。支持导出 JPG 和透明底的 PNG。白描网页版「网址直达」 https://web.baimiaoapp.com/「白描网页版」是一款在线的文字识别工具，无需登录注册，免费使用。将文字图片或 PDF 上传后就能快速识别，准确度非常高，还能保留文本格式。提取出的文字可以直接复制，也能导出为 DOCX 和 TET 格式。除了识别图片，「白描网页版」还支持识别表格和数学公式。Material Symbols「网址直达」 https://fonts.google.com/icons （需梯子）Google 字体想必大家都非常熟悉了，上面有很多高质量的免费可商用字体，最近 Google 字体推出了新的图标系列 Material Symbols。Material Symbols 包含 2500 个图标，分为轮廓、圆角、尖角三种大类。图标被整合为字体文件，这意味着我们可以像调节字体一样，调节这些图标的大小、粗细和填充形式。且 Material Symbols 还有 figma 插件，这比其他图标库都灵活很多。Folder PainterFolder Painter 是一款可以改变文件夹颜色和样式的软件。我的桌面上放了很多文件夹，找资料不太方便，用 Folder Painter 将常用的几个文件夹颜色修改后，它们瞬间成为一堆黄色文件夹中“最靓的仔”，定位快了很多。Folder Painter 程序不到 900KB，安装后回到桌面，选中文件夹单击右键，就能修改文件夹的颜色和样式。程序已打包，下载链接文章开头和结尾都有。以上就是为大家推荐的 5 款效率工具，希望对大家的工作有帮助。 如果你有想要解决的问题，但还没有找对应的工具，欢迎在评论区分享出来，说不定下一期就会有相应的推荐了~我是夏花生，我们下期见。 文件名 如何下载使用 文件大小 提取码 下载来源 FolderPainter 安装包2.19MB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/5-practical-software-3
按钮 用户 操作 按钮是设计界面中常用且重要的组件之一，它在页面中占据的位置不大，却承载着重要的交互操作。我们在设计的过程中很容易忽略对按钮设计，它的样式、使用场景、层级与排布等等，都值得我们深入了解、学习，从而合理的利用到我们设计的页面中去。本篇文章主要归纳总结 web 端按钮设计的相关知识点：本篇文章着重讲解 web 端按钮，app 端与 pc 客户端按钮有部分知识点与之相通。后期会持续更新这两个端按钮的相关知识～按钮的定义与作用1. 按钮的起源与定义在物理世界按钮是这样定义的：是一种常用的控制电器元件，常用来接通或断开“控制电路”（其中电流很小），从而达到控制电动机或其他电气设备运行目的的一种开关。在日常生活中，灯的开关、电视遥控器上的按键、汽车上的各种控制键等等都是我们 UI 按钮在物理世界的实体存在。所以在之前很长一段时间，都很流行拟物风格的按钮，即在触摸屏上展示 1:1 复制物理世界按钮样式的 UI 按钮。虽然现在 UI 按钮的设计风格大多都是采用扁平风格或微写实风格，但其体验感及交互均是对物理世界按钮的一种映射。所以 UI 按钮设计，是否直观、易用会直接影响用户完成整个业务流程的感受、意愿及效率。例如：使用电视遥控器调台，电视却没有任何反应——感到苦恼、无法完成调台；点击业务流程中的提交按钮，页面却没有任何反应——感到困惑、无法完成操作、不想继续使用了。在 UI 设计中，按钮的定义如下：是一个明确指示交互行为动作的组件，标记了一个操作命令，响应用户点击行为，点击后可触发一个即时操作获得相应的反馈&结果。2. 按钮的作用接下来我们看一下 UI 按钮的具体作用：作用一：触发某种功能通过操作按钮，触发功能获得相应的反馈&结果，例如：收起、展开按钮——点击收起展开页面信息作用二：引导用户进行下一步操作将按钮放在适当的位置，去引导用户进行下一步操作，避免用户不知道后续如何进行，从而提高任务流程完成率。例如：在分步骤复杂的表单最后放置的“下一步”按钮，用户填写完当前页后，点击“下一步”——进入下一个填写流程中。作用三：聚合信息使用按钮，跳转详情页面，例如：对于一些说明、隐私政策等等，如果需要展示的内容过多，但又不是当前页面的重点，可以设置一个图标按钮或文字链接按钮，通过点击触发，可跳转完整的内容详情页。作用四：培养用户习惯通过相对固定的位置、形式、文案，以及触发反馈，可以培养用户操作认知和习惯。例如：对于一些常见图标按钮，收藏、点赞、分享、说明等，用户看到类似的样式，就会知道是什么含义，点击后会获得怎样的反馈。按钮的分类与使用场景通过以上的一些配图，我们会发现页面中的按钮展现形式多样，有色块的、描边的、文字的、图标的等等。那他们具体是如何分类和使用的呢？接下来就带大家详细地剖析下按钮的分类与使用场景。首先，根据我们页面中控件的使用交互形式，我们可以将按钮分为两大类：命令按钮：常规按钮、图标按钮、文字按钮、幽灵按钮、悬浮按钮——通常会触发页面与页面之间的交互，视觉优先级高选择按钮：开关按钮、单选框、复选框、胶囊选择、标签选择按钮——通常是一种状态即时改变的交互，视觉优先级低接下来我们详细看一下这两大类按钮的具体细分和使用场景1. 命令按钮控件常规按钮常规按钮，有主次按钮之分。主按钮承载重要核心操作、次按钮承载辅助操作。常规按钮的常见状态主要有以下 6 种：正常状态（Normal)——按钮在页面中正常可进行点击操作的状态聚焦状态(Focus）——为方便键盘用户，展示电脑光标所在位置的一种状态。用户可以通过键盘上的Tab键对页面内的元素进行选择操作。类似于表单填写中输入框的聚焦状态(获取焦点状态），我们可以通过键盘选择和聚焦反馈，知道自己选中的填写项是哪个，从而进行填写操作。该状态，很多产品都去掉了，但是在开发代码中是可以设定的。如果设计师合理利用，可以提高产品易用性。举个例子：表单填写过程中，用户通过键盘完成了所有的填写项目。当我们的按钮设计该状态，就可以通过键盘继续操作，先聚焦按钮，然后点击enter键进行取消或提交操作。悬停状态(Hover)——鼠标移入停留在按钮上但未点击的状态点击状态(Pressed)——鼠标点击按钮的时候，按钮给出的效果反馈状态加载状态（Loading）——点击按钮后，因为系统、网络等等原因，操作需要等待一段时间后才会跳转或生效。这个时候就需要加载状态反馈给用户，避免给用户造成困扰(疑惑有没有点击成功？），避免用户因为困扰重复操作，缓解用户的等待焦虑。禁用状态(Disabled)——表示该按钮不可点击的状态，用于页面中未达到触发条件的时候，按钮的样式。以上几种状态，通常通过改变其填充颜色的灰度和亮度来表达不同的状态，具体呈现形式，可以根据自己产品的特性去定义。下面，我们来看下主按钮和次按钮的详细定义和常见状态案例展示。主按钮主按钮为高权重按钮，与页面上的核心操作强相关，所以在页面上需要醒目显示去引导用户操作，通常使用色块填充引导用户视觉聚焦。主按钮可以是色块+文字，也可以是色块+图标+文字；通常为主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）次按钮次按钮也叫标准按钮，为中权重按钮，在页面中使用最多。通常使用边框+文字的形式呈现。次按钮可以是边框+文字，也可以是边框+图标+文字；通常为灰色、主色，也可以根据页面情况赋予不同颜色（详见章节三、不同颜色赋予按钮的情感，与层级关系）。此处以灰色为例，展示其变化规则：图标按钮图标按钮是一种图形，样式不一，为低权重按钮，在页面中根据业务情况展示，丰富页面效果。通常以用户已经形成认知的形式去展现，例如：文字按钮/链接文字按钮、链接为低权重按钮，视觉感弱。当某个按钮在同一个页面上重复出现，为了不干扰用户视线，可以使用文字按钮，例如表格行的操作项。文字按钮、链接也可以与图标组合使用，层级略高于纯文本按钮按钮菜单菜单按钮是一种合集按钮，将页面中一些低频操作或同类型操作整合收起，以达到精简页面的效果。展现形式可以是色块、文字链接、图标等等，点击后展开具体操作供用户选择。其他命令类型按钮幽灵按钮幽灵按钮是网页设计中，以线框简单示意轮廓、文字示意功能的按钮：样式通透简约，可以与页面背景很好的融合常用于官网设计，与图片结合使用与次按钮不同点在于，不受规范约束，可以根据设计场景定制轮廓粗细、字体大小粗细等现在很多网页中，线框形式的幽灵按钮不再作为主要按钮单独使用，而是与色块形式按钮搭配使用。（现在很多网页产品，更注重行为召唤、点击率，使用色块形式的按钮能更好的聚焦用户目光）悬浮按钮悬浮按钮是指悬浮在页面上方的按钮，不会随着页面的滚动变化消失。源自安卓的 Material Design。应用到网页上，通常承载一些咨询、客服、置顶等常用功能或者想让用户使用的功能。设计要点：悬浮按钮是按钮一种展现形式，既可以承载命令类型按钮，例如分享；也可以承载选择类型按钮，例如收藏；可用来承载常用关键操作，例如网站某个作品页面中的：收藏、评论、推荐、分享的悬浮按钮；可作为引导工具，引导用户操作，例如很多官网都会悬浮在线咨询、客服一类的按钮；可以根据不同场景，在页面中选择是否放置悬浮按钮；不要过度使用悬浮按钮，如果一个页面上悬浮按钮太多，且分散在各个地方，会干扰用户视线，使得整个页面乱糟糟的；悬浮按钮只承载正向操作，不应该执行危险破坏性的操作，例如删除。2. 选择按钮控件选择按钮通常被纳入选择控件中讲解，为了让大家更好的了解它与命令按钮的区别，此处我们来简单讲解一下常用的选择按钮：开关按钮开关按钮类似于物理世界中灯的开关，切换「开关」会立即生效，适合用于具有对立意义的选项，无需与命令类按钮搭配使用。当出现以下情况时，我们应该使用开关：无需确认或审核操作，即可生效选择后的结果选项是独立、且对立的功能、行为，仅在“开或关”的选项上做选择时单选框单选框是只能选中其中一项的按钮，它容许用户在一组选项中选择其中一个。选项数量一般为 2-5 个平铺展示，会更快捷提供给用户进行选择描述过多的时候，可采取纵向排列的形式，方便用户进行对比判断复选框复选框是一种可同时选中多项的基础控件，允许用户从多个选项当中选择多个选项的选择控件。选项数量一般为 2-5 个平铺展示，会更快捷提供给用户进行选择具有半选中状态(indeterminate)可以独立出现，常用于「是否同意用户协议」等场景其他状态切换按钮胶囊选择按钮胶囊选择是单选框的一种衍生样式，特点是点击面积更大，同时更强调选项。在 element 中，胶囊选择既可以作为单选按钮、也可以作为多选按钮。但个人认为，胶囊选择的样式更适合当作单选按钮。标签选择按钮标签选择按钮样式多样，可以以按钮的形式单独存在，也可以与单、复选框结合构成结合样式使用。常规按钮的视觉组成上一个章节，我们弄清楚了按钮的分类与使用场景。以上按钮中，使用最多、层级最高的就是常规按钮，接下来我们以常规按钮为例，剖析它的视觉组成、绘制技巧以及各类风格样式。1. 常规按钮的组成元素常规按钮由容器、背景、描边、圆角、图标、文案、投影组成，这些元素不是必须出现的，而是根据具体使用场景去呈现。不同的元素搭配，构成的按钮样式也不同，以传达给用户各类信息。容器：整个按钮的承载体，容纳其他组成元素。容器的形状一般为规则图形，尺寸根据页面要求制定。背景：为按钮的底色，不同颜色的底色可以表达出按钮不同的功能特性，例如红色代表危险操作；同时也是不同按钮状态的展示形式。描边：为按钮最外层的边框线条，常用于次按钮的描边。不同颜色描边可以表达出按钮不同的功能特性，例如主色描边二级按钮、灰色描边三级按钮、红色描边危险按钮；同时也是不同次按钮状态的展示形式。圆角：传达按钮气质的一种元素，可影响界面视觉风格。图标：对按钮文案的一种图形化表达，目的是为了加强按钮层级、吸引用户注意力、丰富美化页面。文案：使用合适的字号表现样式，使用精简的文字表达按钮的含义。投影：一种丰富按钮样式的设计手法，让按钮突出，更具质感、层次感。可提升按钮的视觉呈现。特殊风格才会有，一般没有。根据以上组成元素，接下来我们来详细看一下，如何设计定义这些属性，不同属性对按钮的呈现有何影响。2. 按钮的容器与尺寸制定容器的形状，需要遵循无障碍设计在一套系统中需要保持样式的统一性符合用户认知，使用用户已经形成心智模型的样式设计师如何做无障碍设计？从这五个方面出发！互联网设计师如何着手发起无障碍优化？阅读文章 > 根据不同场景大部分产品可以将按钮分成超大、大、中、小三种。这一点大家根据自己产品的复杂度可以调整新增按钮尺寸。此处做一个通用展示。超大按钮：用于登录等具有重要意义的场景下大按钮：用于全局性操作的界面上中按钮：标准按钮，可用于各类操作场景小按钮：用于局部控件类操作界面，例如下拉面板、选择器弹窗、表格等按钮的高度如何定义？通常以 4 的倍数去制定按钮的宽度如何定义？为了保证同一个组件内，不同字数文案按钮的样式统一，可以固定 4 个字以内的按钮为一个固定宽度（min-width)，超出 4 个字设定 padding 值自适应适配。3. 按钮的背景与描边按钮的背景色与描边色，可以表达出按钮的状态，也可以表达出按钮不同的功能特性。按钮的状态在前文我们已经详细展示过了，接下来我们来看看不同颜色的按钮表达出的功能特性。通常使用的颜色有以下几类：品牌色——主题色，常用于普通信息按钮功能色——成功色、危险色（出错、失败）、警告色（提醒）其他——灰度色，用于层级较低的二级、三级按钮4. 按钮的圆角按钮的圆角，主要分为三大类直角、圆角、全圆角。圆角通常使用的是小圆角，应尽量避免大圆角。直角——圆角为0px，形状尖锐，给人严谨的感觉，常用于性质较为严谨的产品。圆角——通常控制在按钮高度的1/6及以下，以2的倍数设定，例如2px、4px、6px等。通常根据产品的定位去设定。例如钉钉、企业微信的受众比较广泛，主要按钮的圆角值为4px；飞书的受众偏年轻，主要按钮的圆角值为6px。全圆角——全圆角按钮的圆角值固定为高度的50%，按钮形状柔和。web端全圆角的使用相对以上两种比较少，因为需要考虑到鼠标的操作热区与其他控件的组合使用。另外，同一套系统中，不同大小按钮的圆角值，应当根据按钮的尺寸，按统一比例设定，而非使用固定圆角。以达到视觉比例平衡，圆角“看起来”一致。5. 按钮的文案对于按钮中的文案，需要遵循以下原则；使用合适比例的字号精简文案，避免折行使用合理、无歧义的文案6. 按钮的投影按钮的风格除了扁平风，还有渐变、轻拟物等风格。通过颜色渐变、添加投影样式，可以塑造其他风格的按钮。对于按钮的投影需要注意以下几点：基于按钮本身的色值，去设置投影样式，会让投影更干净舒适。浅色按钮应避免使用投影，否则会影响按钮的识别度，页面显脏。根据页面慎重使用投影样式，一般层级较高的主要按钮才使用。（B 端扁平风格按钮使用居多）按钮的层级与排布分析完了表层样式规范，这个章节，我们来看看按钮在界面中的具体使用。1. 按钮的层级对于页面中常用组合搭配的按钮层级如下：01～12 层级由高到低排列（具体是否有这些样式，根据产品情况确定）高权重按钮——色块按钮中权重按钮——描边按钮低权重按钮——文字按钮、图标按钮（此处我们暂不考虑独立场景、层级的按钮）2. 按钮位置web 端页面，除去顶部和侧边导航栏，主要内容页面里的按钮该如何放置排布呢？我们可以将内容页面分为以下三个部分：标题栏(Header)——主要是全局性操作按钮，例如编辑、新建等；主体内容(Body)——有两种操作按钮第一种，是局部操作按钮，例如表格内部的操作项目；第二种，是全局性完成按钮，跟随在内容后的，例如取消、确定、上一步、下一步等；底栏(Footer)——主要是全局性页面完成按钮，需要贴底固定性质的。例如取消、确定、保存等。对于弹窗页面，内容相对比较少，按钮排布方式可以如下：对于内容页和弹窗页底部按钮的对齐方式，根据具体业务场景和视觉协调度选择即可（内容页居中比较多，因为页面太大了；弹窗右对齐比较多）。注意保持，同一类场景下对齐方式一致。3. 按钮顺序：确定了按钮的放置位置，还需要确定按钮放置的顺序。放置顺序分为两步确定：第一步：确定主按钮、次按钮的顺序第二步：确定同级别按钮之间的顺序确定主、次按钮的顺序首先，我们看一下页面中按钮的阅读顺序：左对齐排布按钮——从左往右阅读——符合用户“F”型浏览模式右对齐排布按钮——从右往左阅读——符合“Z”型阅读模式、费茨定律、古腾堡法则用一篇超全面的文章，帮你读懂经典的费茨定律费茨定律由心理学家 Paul Fitts 提出，用来预测从任意一点到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。阅读文章 > 用超多案例，帮你掌握交互设计心理学的古腾堡原则写在前面在平时的设计过程当中，你是否有这样的疑惑？阅读文章 > 然后根据阅读顺序，我们可以初步的定义出以下按钮层级顺序：上图的按钮层级顺序，只是一个基础参考，在实际设计的过程中我们还应当考虑业务场景和用户心智模型。例如，主体内容区的底部跟随按钮，若带有明确方向、具有下一步性质的按钮，应当为主按钮，放在最右边。常见问题讨论：确定和取消该怎么放？这个问题，是在设计的过程中，经常被抛出来讨论的问题，有没有固定确切的答案呢。首先说明，没有。各个平台、软件都有不同的规范。最具代表的就是：win 的用户都习惯确定在左、取消在右；mac 的用户都习惯确定在右、取消在左。个人更倾向确定在右、取消在左的放置规则，原因如下：1. 根据“Z”型阅读模式，确定在右时，用户的视觉流更加流畅；2. 根据费茨定律，确定在右时，用户到达我们想要引导他进行操作的按钮，更快，操作效率高；3. 根据古腾堡法则，确定在右时，刚好处于最终视觉落点区，便于用户快速获得目标操作；4. 根据方向性原则，取消和确定，一定意义上带有“上一步”和“下一步”的意义，正如前文展示的，确定在右会更合理；5. 根据用户心智，如今移动端产品，大部分都是确定在右，一定程度上培养了很多用户的使用习惯，那么转到 web 端，保持和移动端同样的交互，用户使用起来会更顺手。（为什么移动端的产品采用这样的排布方式，个人认为大概是苹果设计规范的影响，而且据统计：全世界右利手的人占比约 90%，左利手的人仅约 10%，确定按钮在右，更利于绝大多数用户的操作）对于确定和取消到底该怎么放，大家可以结合自身产品的情况定位，需要注意的是，要保证同一个产品内规范一致。确定同级别按钮的顺序对于同级别按钮，我们需要遵循以下原则去确定顺序：相关按钮临近原则，将与主按钮相关的次按钮优先放在主按钮旁边。根据业务场景，按照前文的阅读顺序规律，衡量按钮权重再进行位置分配。除了以上案例分析的组合样式，B 端页面中按钮组合多样，以下罗列了一些常见场景供大家参考：按钮设计的原则总结&注意事项最后根据以上内容我们来总结下，按钮在设计应当遵循的原则及注意事项1. 设计原则按钮样式符合用户心智模型按钮类型、层级分明，规则统一按钮状态清晰，操作反馈明确根据业务场景使用合适的按钮2. 设计注意事项一个操作区域至多一个主按钮主次按钮样式统一、与其他控件样式区分处理按钮样式慎用大圆角按钮中的文字，字号适中，文案精简、无歧义合理使用投影样式根据场景合理使用禁用按钮：需要应引导用户操作时，扔掉禁用；明确区分禁用和可用样式；在恰当的时候对禁用按钮给出解释；结合 loading 状态让禁用按钮更生动。参考文章推荐1. 「按钮的学问：确定在左，取消在右？」推荐指数：五颗星推荐理由：使用不同的理论说明佐证确定和取消按钮的排版方式按钮的学问：确定在左，取消在右？开篇layq ：确认框，顾名思义，就是对用户的关键行为进行确认。阅读文章 > 2. 「交互细节！确定按钮到底该放在左边还是右边？」推荐指数：四颗星推荐理由：用实验论证确定按钮的放置位置，结论是：确定按钮放在右边比较好交互细节！确定按钮到底该放在左边还是右边？仔细想想，我们做交互设计，讲了那么多“高大上”的理念，竟然很多小细节都还没有弄清楚——比如，确定和取消按钮哪个该放左边哪个该放右边？阅读文章 > 3. 「大厂高手出品！中台组件设计指南：按钮篇 」推荐指数：五颗星推荐理由：使用完整的规范去写的文章，实打实的案例。大厂高手出品！中台组件设计指南：按钮篇希望接下来每一篇关于中台组件的分享都对大家有所帮助，本文主要分享中台组件按钮的发展史、按钮的类型、按钮的使用规范等内容。阅读文章 > 4. 「按钮规范系列！从四个方面详解「按钮位置」的设计方法」推荐指数：四颗星推荐理由：用古腾堡原则详解按钮位置的摆放规律，为什么这么放置。主要案例是 APP 端的。按钮规范系列！从四个方面详解「按钮位置」的设计方法@Daidai丶呆 ：两年前，我写过一篇文章《高手课堂！阅读文章 > 5. 「5000 字干货！写给新人的按钮设计指南」推荐指数：五颗星推荐理由：主要讲的是 APP 端的，层级清晰、案例完整。5000字干货！写给新人的按钮设计指南前言说起按钮，很多做设计的小伙伴是熟悉的不能再熟悉了，它是我们在设计界面时最常用、最重要的组件之一，也是易被忽略的元素之一，所以在设计之前，做好对按钮组件的认识、了解非常有必要。阅读文章 > 6. 「从 6 个层面，系统分析按钮设计的知识点」推荐指数：五颗星推荐理由：主要讲的是 APP 端的，命令按钮和选择按钮做了区分说明。案例丰富，常见按钮组成拆解和最后的按钮样式小结表都超级棒从6个层面，系统分析按钮设计的知识点虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。阅读文章 > 7. 「推荐！禁用状态二三事 」推荐指数：三颗星推荐理由：讲述了什么时候、什么场景使用禁用状态以及使用禁用状态的注意事项推荐！禁用状态二三事sherry ：禁用，顾名思义，代表不可用的意思。阅读文章 > 结尾整篇文章内容是基于日常学习与工作经验的总结，部分规范内容，大家可以根据自己的产品业务做适配调整，以上仅供参考。部分案例配图源自网络，仅供交流学习，侵删。欢迎点赞、分享，期待你的关注小红点～欢迎留言交流～从6个层面，系统分析按钮设计的知识点虽然直觉认为按钮是一种很简单的控件，但在梳理按钮相关知识点的过程中，发现小小控件其中包含了很多容易被忽略的细节。阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/web-button-design-guide
图标 套色 样式 前言SVG 格式图标在软件界面中有广泛应用，它与生俱来的矢量属性，使其在高分辨率屏幕上的表现非常完美。SVG 是一个基于 XML 标记语言的开放网络标准格式，拥有跨设备多平台的兼容效果。前面我们有分享过一篇关于 WPS 图标的文章《探索 WPS 3000 个图标设计背后的故事》，得到了很多网友的积极反馈。相信界面设计的小伙伴们都很熟悉 SVG 格式了，这次，我有一个棒的想法想分享给大家：利用 SVG 图标套色，来完成不同界面的适配。如何重新设计3000个图标？来看金山团队的实战案例！项目背景近些年，WPS 组件页在完善基础功能的同时，增加了许多新功能。阅读文章 > 什么是 SVG 图标套色？图标套色的简单来说就是利用 SVG 格式的文本属性，使用 XML 格式标准，在 SVG 文档中增加 CSS 样式，通过修改 CSS 样式属性，精准控制 SVG 格式图标颜色，通过修改透明度控制图形显示与否，从而变换图标的风格外观。基本原理：修改 SVG 的样式，生成不同风格的图标用处一：颜色适配这里有几个插件，都用到了“保存”、“打印”这些功能。因为主题色不同，即使是同样外形的图标，还是需要根据主题色的不同输出适配各个插件的图标。采用图标套色的方法，就可以避免这类图标资源的重复输出。相同功能需要两套不同主题色的图标用处二：皮肤适配现在多数软件一般都有皮肤功能，不同用户需求，衍生出风格各异的皮肤，各种颜色，深浅不一，一套图标满足不了所有，为了视觉效果需要对每个皮肤输出特定颜色、风格的图标。图标数量如果很多，投入的成本将随皮肤数量呈几何倍增加，图标套色就可以很好的解决这类问题，只需要通过修改图标颜色和风格即可适配。通过修改映射配置，可以得到不同颜色的图标套色方法我们先看看图标套色之后的效果：修改映射配置，可以得到线、面不同风格的图标简单来说，实现这种效果有下方五个步骤:套色方法五个步骤以下方几个图标来做示例：SVG 示例图标第一步，确定图标线、面风格设计师将图标线、面风格确定下来，并保证两者效果上可以兼容，即轮廓一致。同时兼容线、面两种风格效果第二步，定义图标颜色在确定了图标的风格之后，将图标中用到的 7 种颜色，根据一深一浅再拆分为 14 种（具体几种颜色可根据图标设计需要来定），深色用于填充线性图形，浅色用于填充面性图形。根据线、面风格需要，定义图标的颜色第三步，给颜色定义样式名给 14 种颜色，分别定义好 CSS 样式名（样式名遵循 CSS 规则即可）。给颜色定义样式名第四步，给 SVG 图标添加 CSS 内部样式SVG 格式图标默认是没有 CSS 样式，需要手动将 CSS 内部样式添加到 SVG 文档中，并将 SVG 路径颜色与 CSS 样式名关联起来。给 SVG 添加 CSS 样式第五步，样式属性配置机制添加内部样式之后，需要开发小哥哥在软件中增加对 SVG 图标 CSS 样式属性的映射机制。修改映射机制配置文件中 CSS 样式属性，就可以控制图标风格变化。修改配置代码即可改变图标颜色完成了以上五个步骤，通过修改软件中的映射机制配置文件，就可以改变图标风格。应用案例了解了步骤方法，我们以 WPS 为例来讲解图标套色在实际案例中的应用：案例一：前面有提到我们的四大组件，WPS 由文字、表格、演示、PDF 四组件组成。每个组件都有各自的主题色，文字主题色为蓝色，表格绿色，演示橘黄色，PDF 红色。多数图标都含有主题色，但外形是一样的，因各组件主题色不同而导致了很多图标的重复输出。套色用处之一的颜色适配，可以让图标变色以适应不同的组件色，避免图标的重复。不同主题色图标的变换效果案例二：WPS 有推出多个风格各异的皮肤，因为图标数量的关系，无法每个皮肤都输出一套图标，目前只能使用默认的线性图标。也因时间和维护成本而导致图标风格的单一。套色用处之二的皮肤适配，能使图标改变风格以适应不同的皮肤，既能满足图标风格多样，又能满足时间和维护成本的可控。不同风格图标的变换效果案例三：深色模式的配色与浅色模式大相径庭，图标使用的颜色也截然不同，适配需要输出两套图标资源，因不同深浅色模式而导致的图标资源重复输出。WPS 组件功能区的图标有几千个，输出和维护都很费精力。套色用处之二的皮肤适配，在深浅色模式下也能适用，改变图标颜色以适应不同的深浅色模式，避免图标的重复输出。深浅色模式下图标的变换效果总结通过以上的案例不难发现，SVG 图标套色技术的价值，主要有以下几个方面：1. 时间和维护成本的降低利用图标套色方法，设计师只需要输出一套图标资源，就完成了多组件、多风格、深浅色模式适配。开发小哥哥也可以删掉适配用的冗余代码，提升了图标的管理和软件运行效率；2. 个性化需求的满足后期可以增加自定义扩展，让用户配置图标风格，更好地满足个性化需求；3. 服务器资源的节约更少图标资源，更小压缩包，更少空间和宽带的占用。采用新技术，帮助设计、开发更好地完成多场景适配，降低了整体流程的执行难度，为项目节省了大量时间，避免过多精力投入在重复工作中，为最终完成目标创造了有利条件。同时也解放了生产力，有了更多的时间可以去关注高价值的项目。工作中经常能遇到重复的内容，这都有提升和优化的空间，寻找更高效的方法，让工作变得轻松简单。记得关注我们，下次还有更多好玩、有趣的内容分享给你～实战案例！WPS 2021 年度设计改版完整复盘随着用户使用 WPS Office 的场景逐渐多样化、对产品的体验要求也逐渐提高，我们在视觉层面上围绕着「以用户为中心」开始了一次全新的视觉改版：追求简洁、高效、一致的办公环境，精心打造极致的办公体验。阅读文章 > 欢迎关注作者微信公众号：「CED设计团队」本篇来源：优设网原文地址：https://www.uisdc.com/svg-icon
印尼 用户 产品 2020 年小编及团队成员对 Speedwork Customer App 及 Workshop App 进行了“从 0 到 1”的设计，包括设计理念到视觉语言，界面框架到组件模式，单用户触点到全链路场景。往期回顾：企业出海！设计师如何做好产品本地化设计：竞品分析印尼篇上一章，我们宽泛的了解印尼的宏观环境、电商市场、移动市场、支付、物流、税收、汽车及两轮汽车市场、汽车后市场。阅读文章 > C 端设计内核探索回到最基础的用户体验设计流程，我们需要对 Speedwork 的商业目的、产品目标及用户需求进行深挖，也就是战略层。 站在 C 端用户的角度上，能想到的关键词为：正品保障、专业服务、价格实惠透明、便捷、选择多等等。我们的任务是打通线上线下体验闭环，关注各个用户触点的产品体验，帮助用户更轻松更高效的完成汽车养护，建立平台品牌心智。Speedwork Customer App 的目标用户为两轮、四轮汽车车主。通过对目标用户的问卷调研，针对 C 端用户在购买转化阶段的主要决策因素进行分析，对其中的 21 项因素做了基于 KANO 模型的分析，考察不同因素在购买时候的影响程度。UI 进阶必学系列：需求分析工具 KANO 模型大家知道，长期以来我们一直在坚持分享一些基础的干货内容，那些看书、看分享很难系统搞得明白的知识点，这和我个人对基本功的执念有密不可分的关系。阅读文章 > 最终 Speedwork Customer App 的核心理念聚焦在 4 个关键字：简、好、惠、安。Auto care supplies & services on demand. 品牌触达，情绪共鸣1. 简单易用基于养车业务的线上化，更多的内容和服务需要在 Speedwork 上去体现。不论对于内容的认知，还是平台产品功能的操作体验，我们都希望能以简单的方式直接面向用户，让用户能够轻松掌控一切并能感受到细致入微的服务体验。2. 正品保障、贴心服务、便捷体验“专业养车”是 Speedwork 需要传递的第一印象。我们希望通过一致性、亲切感、场景化的表达让用户感受到专业信赖、贴心服务的 Speedwork。设计师需要在界面上将正品保障、质保服务、专业度进行透出，将心智传达到用户侧。3. 产品的价格有竞争力印尼的人均客单价低：平均网购额为 481000 印尼盾（约合 36 美元），这一数据远低于新加坡（平均 91 美元），印尼在东南亚国家中排名倒数第二。因此有竞争力的价格，一定是初期获客的关键因素。由于人的大脑存在“损失厌恶”等认知的偏差，利用这些认知偏差我们可以给用户适当的紧迫感，例如加一些限时限量的元素，所以如何在用户决策的拐点界面去呈现促销是设计的重点。4. 数据安全与隐私保护、数字支付安全第一章提到由于消费者对于在线交易缺乏信任且信用卡普及率低（印尼不到 5%的人拥有信用卡），所以在线支付的时候消费者更倾向于银行卡支付及货到付款。受疫情影响，印尼的消费者大大减少了对现金的使用，电子钱包成为在线支付的最优选择。作为一个汽车养护电商平台，保护用户数据及支付安全，是获得用户信任做出购买决策因素之一。统一的视觉语言1. 情绪板我们使用情绪板确定视觉的方向，明确契合汽车养护场景，探索建立一个专业、信赖的品牌主色，让用户直观的感受到品牌理念。通过对“简、好、惠、安”4 个关键字进行映射衍生（视觉、心境、物化），检索出具有代表性的图片，进行情绪版的制作。最终我们选用绿色作为产品主色，绿色在印尼本地是非常受欢迎的颜色，绿色是穆斯林的代表色，本土电商 tokopedia 以及生活出行的两大巨头 Grab、Gojiek 的产品色也都选取了绿色。2. 框架搭建从 3d 视角去看界面，可将页面水平切片为背景层、内容层、框架层、临时层。从下往上看，背景层是整个页面的全局背景色，内容层是承载着不同页面功能需求、业务诉求；框架层主要是标题导航栏和底部菜单栏，它们是控制全局页面跳转关系的；临时层主要是事件的展示，比如动作面板、选择器、对话框、提示、通告栏等。3. 建立规范相信大家对设计规范、设计系统都不陌生，我们基于原子设计理论，分别建立中后台产品、移动端的设计规范，将业务与设计解耦，将组件拆分成原子级，再进行拼装，从最小颗粒度（原子）、简单组件（分子）、复杂组件、模版、再到最后的页面搭建。当业务复杂度高的时候，设计师会根据不同业务进行业务组件的设计。但业务组件的基础其实都是在于原子级设计，只是业务组件不具备通用性。4. 注入品牌 DNA我们结合品牌基因，增强识别，并通过网格化规范绘制，使得整体统一有序。细节的体验设计1. 字体的选择设计师要注意产品所使用的字体是否有版权问题，尽量使用开源字体，并且该字体能适配多语言。Speedwork 使用的字体是 Roboto，和 logo 的文字字体一致且能够适配泰语、印尼语、越南语和马来语。Roboto 是随着 Android 4.0 操作系统引入的一种无衬线字体系列，该字体由谷歌的界面及字体设计师 Christian Robertson 设计，并且完全开源使用。2. 多语言适配（印尼语&英语）Speedwork 交付的时候不止是在印尼上线，同时会进入马来市场。因此界面设计时需同时考虑到印尼语和英语的字段长度，避免固宽的控件里文字被截断展示或者换行的情况。另外一个问题，我们设计是以英文交付的，印尼运营人员再根据英文翻译印尼语，这个时候翻译者一定要考虑到展示场景，尽可能的准确及简短。3. 手机号格式在竞品分析的章节，不知大家是否留意到，Planet Ban 的手机号填写规则是最小 10 位数且需开头加 0，例如 08**********；Bukalapak 和 tokopedia 的注册页也在输入框下面增加了提示“例如：081234567890”；但是 Shopee 是自动根据手机号去识别是那个国家的号段，当小编输入手机号后自动识别为（+62）822-****-****。经过分析对比可看出，印尼本地产品不支持其他国家手机号注册，因此无需选择或展示+62（国家代码），Shopee 和 lazada 都是针对东南亚市场多个国家的，所以会展示国家代码。印尼手机号为 08 开头，从 10-13 位都有，其中超过 90%的为 12 位，11 位和 13 位约为 4%，10 位的不足 1%，因此手机位数的判断是“10～13 位数字”，如果去 0 输入，则手机号位数判断应该是“9～12 位数字”。为什么可以去 0，因为 0 后面开始的 3 位才是运营商的号段，比如 822 就是 Telkomesl 的手机号，就跟中国移动，联通号段不同一样。那到底是依照本地产品加 0 的输入格式，还是依据国际化产品国家号+去 0 手机号的格式呢？从用户角度，两种形式都可以，以 Shopee 和 Tokopedia 势均力敌的访问量看，用户都能理解并完成注册。从产品角度，Speedwork 虽然以印尼市场为主，但同时也需要进军马来市场，考虑到数据存储的标准和后续的通用性，最终是选择 Shopee 的形式。4. 日期格式众所周知，中国的日期格式是年月日，美国标准日期格式是月日年，英国的日期格式是日月年，如 1987 年 4 月 20 日，美国是 April 20, 1987，英国是 20 April, 1987。Gmail 的日期格式是 Wed, Jul 31, 2019, 7:50 AM；印尼本土电商 Tokopedia 的订单页上的日期格式是 12 Sep 2021; 14:00 WIB，印尼当地新闻网站上的新闻发布日期格式是 22 December 2021 14:46，印度尼西亚的食品生产日期也是按照“日月年”的顺序排列的。由此可见，印尼普遍是使用“日月年”的日期格式。在 Bukalapakd 的 flash deal 页面，展示整点秒杀时间的展示是 10.00 WIB | 13.00 WIB | 16.00 WIB，因此严谨的时间是应该要加上时区的且整点的格式是“.”不是分号，时分秒的表达与国内一致。在促销场景里展示日期范围时，常用的格式是 21-23 December 或是 30 Aug 2021 – 28 Nov 2021。*注：WIB 是 Waktu 印尼 Barat(西方印尼时区)，印尼跨越 3 个时区，分别是 WIB(GMT+7)、WITA(GMT+8)、WIT（GMT+9）。5. 地址格式印尼的地址格式和西方的写法一样，地址从小到大展示：详细地址（街道、建筑、门牌号等）/区/市/省/国家，邮编。例如 Speedwork 在印尼的某门店地址：Wisma, Jl. Hayam Wuruk Kel No.8, RT.6/RW.2, Kb. Klp.（详细地址）,Kecamatan Gambir 甘比尔区（District 区）,Kota Jakarta Pusat 中雅加达（City 市）,DKI Jakarta 雅加达特区 (Province 省)10120（邮编）,Indonesia（国家）6. 货币单位和价格格式印尼卢比是东南亚国家印度尼西亚的法定货币，印尼卢比与人民币汇率比大致在 2000:1 左右。卢比的英文是 Rupiah，简写为 Rp。比如人民币的符号是¥，编码是 CNY；卢比是 Rp，编码是 IDR；¥100 相当于 Rp224.240，也可以写成 224.240 IDR。如果是去印尼旅游，简单的换算就是除去三个 0，然后除以 2，例如 10.000 印尼盾折合约人民币 5 元。另外中国标准的数字用法是整数部分每三位一组，以“，”分节，小数不分节。四位以内的整数可以不分节。 例如 624,000、92,300,000、19,351,235.235767 1256。印尼的数字用法常见的是都用“.”分隔。7. 姓名格式在做国外项目的时候，填写姓名往往会拆分成 first name 和 last name；印尼人大多数人只有名，没有姓。可是也会遇到的印尼人名不只一个词，也有两个或两个以上部分组成的，有的只是名，有的是连名加姓。因此在做印尼本地产品的姓名录入时，可以不用拆分姓名，就用 full name 字段会更通用更合适。情感化的设计第一章节有提到印尼人口结构年轻化，30 岁以下人口占比超过 50.0%；处于热带雨林气候的印尼，年平均温度 25-27℃，通常气温较热且多海岛的国家，民众通常喜好绚丽的颜色；从印尼本土的产品界面配色不难看出，共性就是色彩饱和度高，喜欢用对比色，并且通过插画来表现情绪、描绘场景，让用户产生共情，且更能帮助树立品牌形象，从产品功能到品牌化情感连接，在用户心智中建立一个完整立体的形象，通过品牌力的建设再反向赋能产品。“情感化设计”是唐纳德·诺曼在《情感化设计》一书中提出的，他从设计的三个层次本能、行为、反思，阐述了情感在设计中所具有的重要地位和作用。诺曼认为：“将情感融入产品设计，将解决设计师们的长期困扰，即产品的实用性和视觉性的主要矛盾。”本能层主要体现的是视觉感受，用户对产品的品牌感知、第一印象等；行为层反应的是用户与产品的交互，也就是我们常说的可用性；反思层是产品触发了用户的主动反思，去探寻使用该产品的目标，是一种深层次的情感共鸣。情感化设计在很多时候可以缓解用户负面情绪，帮助用户快速熟悉产品，拉近与用户的友好度，所以运用好情感化设计可以帮助提升产品体验和留存率。可以通过插画来表现产品主要使用场景，并通过刻画主人物形象（穿着工服的硬朗男性形象），表现专业度和安全感。汽后市场的产品的难点在于用户的需求大多是低频刚需，所以要提供一些产品服务或是功能，能够刺激用户频繁打开应用，提升用户粘性；同时规范线下履约流程，标准化服务。满足用户需求的产品+高性价比的商品+运营策略+优质专业的服务+合理的网点布局，几者缺一不可。我们所说的情感化设计也不局限于应用产品本身，整个闭环上所有的触点都应该覆盖到。数字化运营建立平台品牌心智不止是在线上，还需考虑线下物料投放。由于 Speedwork 的运营是由印尼本地团队负责，如何标准化进行线上线下全渠道运营推广物料的制作是需要通盘考量的。最终，我们决定通过在线上设计平台上传营销物料模版，不仅能够跨部门跨地域协作提高效能，同时也将本地设计资产数字化实现设计赋能，保证任何人输出的物料设计都能符合平台品牌规范。数据分析与用户增长通过数据埋点，我们可以得知产品的活跃状态，比如留存（次日留存率、七日留存率、月留存率）、流失分析、新增变化等；通过漏斗模型分析，可以针对关键流程进行转化率监测，协同产品、运营共同找到用户流失的原因。站在商业角度，我们可以通过数据客观的了解产品的获客、激活、留存、变现能力，洞察问题并及时的去调整产品功能及链路，使得产品更符合用户的心智认知，使之逐步转化、使用、首单、复购，甚至习惯、分享，形成用户黏性。所以我们想要实现用户增长，需要帮助用户在关键决策点推波助澜，进行精细化设计。常见的增长手段有优惠券、促销活动、补贴、分享裂变等，通过实际利益去撬动用户增长培养用户习惯。或是通过产品本身提供的服务和功能去满足用户的诉求，来撬动用户增长。无论是通过何种手段，我们都要进行用户的链路设计，一个链路有几个环节几个步骤，如何缩短链路，让用户丝滑且快速的去体验产品核心功能，展现产品的价值，是用户体验设计需要去持续关注的。想用设计提升转化率？先学会这个超好用的漏斗模型！漏斗模型，是一种数据分析方式，是一个线性流程，更是一种普遍适用的方法论，或者说是一种思维方式。阅读文章 > 本章结尾数字化时代消费者各种消费行为，都会被以非常微小的颗粒度所记录下来，作为用户体验设计师，需要具备社会学理论知识，通过调研去理解行为背后的情景及动机，更好的设计产品与消费者之间的互动。数据让消费者更加立体化，不仅仅可以告诉我们已经发生的事情，同时也可以预测趋势，进而可以告诉我们处于营销前线的平台，或者商家为什么发生的这些以及可能还会发生什么。企业出海！设计师如何做好产品本地化设计：印尼篇可以预见的是，企业出海会是未来两年的趋势之一，特别是东南亚国家，这两年经济增速很快，成为了国内诸多公司的出海首选。阅读文章 > 欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/indonesian-product-c-design
字体 英文 海报 大家好呀， 我是和你们聊设计的花生~之前和大家分享了纤细的手写英文字体在海报中的运用，他们可以丰富画面层次并烘托氛围，让海报不再沉闷呆板。海报版式太单调？用好这个元素提升99%（附素材下载）大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。阅读文章 > 最近在逛设计灵感网站的时候，我又发现了一类很好看的海报。这些海报设计并不复杂：用精致的英文衬线字体作为主视觉，配合图片元素进行简单排版，就营造出优雅浪漫的感觉。仔细观察的话，会发现这类字体虽有衬线体的特征，但是装饰性更强：笔画的粗细对比非常强烈，衬线形状精致，这使字体现代感很强；细如游丝的笔画还会延展连接，或者一些附加的装饰元素，别致优雅。进一步了解之后，我发现这类装饰字体可以统称为 Display Font，即用于展示的字体。Display Font 适合用大字号展示，如书籍、网页、海报等的大标题。由字体铸造厂 Nikolas Type 制作的 Grand Slang，就是一款非常经典的 Display Font。Grand Slang 有 Roman、Itali 和 B-side 三种字形，设计灵感来源于 20 世纪中期美国非常流行的手写字体，经过数字化重塑后，字体线条更加流畅精致，被广泛运用到杂志和产品包装上。这种 Display Font 气质浪漫优雅，非常适合文艺、典雅或者与女性相关的主题。在设计海报时，无论是作为主视觉使用，还是作为装饰，都能让主题更加突出。我为大家找了 5 款相关的英文字体，个人可用，但不可商用，一起来看看吧~VensfolkEmileaLevausBranchVindea5 款字体都打包好了，下载链接开头及文末，需要的小伙伴可以自取~如果需要更多免费可商用的英文字体，大家上优优教程网的 「免费字体」 里看看，里面收录了很多高质量中英文字体，下载也非常方便。我就在上面找到了「TheNightWatch」和「Branic」2 款装饰性很强的 Display Font，喜欢的小伙伴可以戳下面的链接去下载哦~「TheNightWatch」 https://uiiiuiii.com/software/355400.html「Branic」 https://uiiiuiii.com/software/463870.html以上就是今天的分享，希望对大家日常进行海报设计与有帮助。如果你有关字体设计或者海报设计的其他问题，欢迎在评论区提出交流~ 文件名 如何下载使用 文件大小 提取码 下载来源 5款精致优雅的英文装饰字体 资源包553KB8866 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/poster-design-5
干货 合集 工具 五一假期结束了，给大家贡献一波设计干货吧！这次的合集几乎每个工具和素材都非常有特色，两款都很「顶级」的配色工具就不说了，独特的字体网站和多达 5.3G 的免费头像素材源文件，无需安装就能使用的3D场景渲染服务，乃至于免费的样机包装网站和在线去除视频背景的服务，里面总会有一两个你能用得上：1、设计感超强的取色工具https://www.color-selector.com/配色似乎并不复杂，但是少有人能够做到完美协调自然。当然，取色工具也不算少，但是用起来足够舒适、又充满设计感的倒是不多，这个名为 Color Selector 的配色工具恰恰能够满足上面的需求。从根本上来说，这是一个配色数据库，它所提供的配色方案大多来自于流行时尚、室内设计、经典建筑、抽象插画等照片、插画，这些配色方案足够经典，但是又足以应对绝大多数的设计需求。2、独特的免费字体网站http://velvetyne.fr/设计师从来都不会嫌弃免费字体的太多。当然，相对而言，免费的英文字体比起免费的中文字体要多不少，但是足够优秀又足够独特的英文字体，想必大家平时也不会屯太多。这个 2010 年所创建的法国字体网站，就是专门干这个的——它专门搜集了各种开源免费但是足够独特的字体。这个网站所提供的字体，应该能够成为你的字体库当中的独特补充。3、时尚的 UI 样机生成网站https://cleanmock.com/和很多同类工具一样，这个样机生成工具能够将你所设计的 APP 页面或者是网页，快速包装成为比较简约时尚的样式，你只需要快速点击几下就能够生成，足够清爽，足够专业。4、移除视频背景工具 Unscreenhttps://www.unscreen.com/图片背景去除的工具如今已经非常之多了，随着短视频内容的爆炸增长，对于视频背景移除的需求也越来越多，这个名为 unscreen 的服务就显得非常具有存在的必要了。全自动处理，完全免费，还有什么比这个更加吸引人的呢？5、「宇宙最强」取色器ColorSlurphttps://colorslurp.com/虽然这个名为 ColorSlurp 的工具，很大概率是因为没有我国广告法的约束才敢口出狂言号称「宇宙最强」，但是它应该是有足够扎实的功能和特性打底，才能如此宣传。ColorSlurp 内置了高精度的放大镜来帮你读取屏幕上的每一个像素，取色之后，内置的配色方案管理功能、对比度检查等功能确保了色彩的可用性，iOS 平台的客户端还有相机取色、快速导出、iCloud 同步等功能。ColorSlurp 目前只有 Mac 和 iOS 的客户端，感兴趣的同学可以上手体验一下，看看是否当得起「宇宙最强」的称号。6、免费的 UI/UX 学习平台befronthttps://befront.io/学习 UI/UX 的设计平台又多了一个。Befront 会提供真实的设计案例来帮你理解和学习 UI/UX 知识，和以往的很多平台不同的地方在于，它会提供一个基于机器学习的 Figma 插件，来辅助你练习，并且提供及时反馈。值得一提的是，Befront 的课程内容是分免费和收费部分的，可以先看看免费的部分。7、涂鸦风 SVG 素材合集https://svgdoodles.com/很多时候大家看惯了规整的几何图形之后会感到厌倦，充满手绘质感的几何元素相对而言能够让视觉内容更加俏皮、富有生命力。这个 SVG 矢量格式的手绘涂鸦素材合集就能满足这个需求，素材本身可以无损放大，而且也更加便于契合跨平台视觉设计对于精度的要求。8、3D 场景渲染生成工具 Colorful Studio https://www.colorful.app/严格意义上来说，它是用来帮你快速搭建场景，渲染生成照片的工具。无需安装客户端，你可以直接在浏览器当中使用，借助大量的预制的 3D 素材，快速搭建场景，然后利用服务器端的算力来渲染，帮你生成最后的照片，对于电商和社交媒体而言，它提供的素材可以说是相当豪华了。最重要的事情是，它还处于公开测试阶段，完全免费，火速申请一波吧！9、免费立体人物角色素材合集https://powerpeopleplatform.com/准确地说，Power People Platform 提供的免费的人物角色设计素材库是 3D 风格而非真的 3D 素材，其中包含 12 个原创角色，3种不同的肤色，6种发色，5种衣服，23 种服饰配色以及无数可选的背景颜色。这套素材库提供高达 2000×2000 px 的 PSD 源文件，你可以按照自己的需求灵活调整。这些素材超级大，你可以在文章开头和结尾的百度云链接中下载。往期干货：第一波！2022年4月精选实用设计干货合集大家好，4月的第1波实用设计干货合集来了！阅读文章 > 第二波！2022年4月精选实用设计干货合集大家好，这里是 4月的第2波实用设计干货合集！阅读文章 > 第三波！2022年4月精选实用设计干货合集大家好，4月的第3波实用设计干货合集来了！阅读文章 > 文件名 如何下载使用 文件大小 提取码 下载来源 5月干货第一波5.3Ggfxj 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/2022-5-design-resources-vol1
印尼 门店 用户 往期回顾：企业出海！设计师如何做好产品本地化设计：印尼篇可以预见的是，企业出海会是未来两年的趋势之一，特别是东南亚国家，这两年经济增速很快，成为了国内诸多公司的出海首选。阅读文章 > 企业出海！设计师如何做好产品本地化设计：竞品分析印尼篇上一章，我们宽泛的了解印尼的宏观环境、电商市场、移动市场、支付、物流、税收、汽车及两轮汽车市场、汽车后市场。阅读文章 > 企业出海如何做好产品本地化设计：C 端实战复盘2020 年小编及团队成员对 Speedwork Customer App 及 Workshop App 进行了“从 0 到 1”的设计，包括设计理念到视觉语言，界面框架到组件模式，单用户触点到全链路场景。阅读文章 > 汽车养护服务市场是一个复杂的 F2B2b2C 行业供应链，参与者需要把用户、供给和履约都做好，并不断优化三者的服务能力，从而形成一个完整的闭环服务系统。作为提供一站式汽车养护服务平台的 Speedwork 连接了用户与商户，平台需要将数字化能力赋能给商户帮助其管理及运营门店，同时还为商户提供汽配供应链，构建商业模式的闭环，打造汽车服务生态系统。Gtech 佳应科技以技术为驱动，实现价值创造最大化。我们为商家打造了掌上门店管理应用 SpeedBiz，提供线上线下订单的统一管理、商品及库存管理、员工管理、销售报表等功能，同时还能进行一站式的轮胎、汽配件采购。针对平台侧提供了 SpeedShop Enterprice 业务中台，帮助平台运营管理门店、商品、促销、会员及全渠道订单。B 端设计内核探索B 端 C 化也是近几年 B 端产品的设计趋势，之所以有这种趋势是因为无论 2B 还是 2C，最终使用者都是人，我们都在为人的使用做设计，因此从以往的 B 端 IT 直接开发交付，到现在要以 C 端产品的用户体验设计标准来交付，企业开始重视整个业务链路上的所有产品体验设计，能够帮助商家数字化运营赋能且提高工作效率，是 B 端产品的核心。站在公司战略侧，SpeedBiz 的交付不是针对 Speedwork 本身定制化的产品开发，我们更希望能做 L 型能力的产品，在此基础上让产品具备商业化能力，复用性以增加其价值，可以使用到其他业务场景，或者赋能给更多企业，在这里埋个伏笔，后续系列文章中，我们会介绍到通用版的门店管理系统的设计，支持多语言多终端，能够灵活适用到汽后市场不同的业务场景。B 端的用户体验建立在解决客观问题、提高工作效率的基础上，他们相对理性，所有的操作都是在完成某个任务，而不是毫无目的的闲逛或是消磨时间。每个任务都是一个闭环，每一个任务都尽可能降低用户各种操作及学习成本，让用户感觉到“简单”、“稳定”、“高效”。因此 Speedwork Workshop App 的核心设计理念为：简单、稳定、高效。用户定性研究明确了解目标用户，并对其进行定性的研究，确定用户画像，根据真实的业务场景进行体验设计。Speedwork workshop App 目标用户是门店老板及维修技师，少数门店还有收银岗位，门店类型分为摩托及汽车维修门店。我们在描绘 B 端用户画像时应注重职位、门店规模、利润水平、业务需求等。不同的职位决定了不同的使用场景，比如老板/经理作为最高权限的用户，他能使用产品内所有功能，查看全部数据，而维修技师往往只需要关注本职工作，完成上级分配的订单，并可进行日常上下班打卡即可。B 端视觉规范一期上线的印尼版 Speedwork workshop App，延续了 C 端视觉规范设计体系，在商户端同样需要建立平台品牌心智，让商户侧感受到 Speedwork 平台对于产品设计的用心以及专业性。卡片式模块化的布局可以灵活支持功能拓展，界面简洁、布局清晰，注重信息的有效表达和操作的便捷性。典型场景的交互设计主要有 3 种典型使用场景：1. 订单管理针对全渠道的线上订单跟进处理；针对线下的订单进行录入2. 商品管理管理线下销售的商品，主要用于非平台商品的录入3. 查看销售报表查看线上线下客流、交易流水、支付方式占比、毛利分析、产品及类目销售排行等经营数据7000字干货！东南亚本地化产品设计差异：印尼篇印尼是东南亚人口最多的一个国家，人口超过 2.65 亿（还是 2019 年末的数据，现在应该近 3 亿），其中 30 岁以下人口占比超过 50%。阅读文章 > 欢迎关注作者微信公众号：「Gtech UED」本篇来源：优设网原文地址：https://www.uisdc.com/indonesian-product-b-design
信息 用户 地图 地图 App 已经不再满足导航工具，通过信息挖掘和拓展，更希望能够成为人们日常生活中重要的信息平台。刚好回老家期间，高德地图用得比较多。使用过程中发现了一些比较有意思的细节，觉得有必要总结下分享给大家。主要包括以下 3 点内容：1. 信息架构升级，构建清晰的信息边界2. 信息挖掘，更好的服务用户出行3. 智能感知，提高用户行为效率信息架构升级，构建清晰的信息边界高德 10.0 版本升级了平台的信息架构。原有的版本并没有做信息分层，而是以地图画面为核心，将各类信息分散展示，出行功能路径入口共用“路线”功能，影响了用户的操作效率。另外为了减少各个功能对地图的遮挡，功能选项只能尽可能的融合、隐藏、精简，造成了部分入口信息层级较深，拉长了用户的行为链路，同时不利于功能和内容的拓展。在新的版本中，信息架构回归到传统的底部 Tab 导航形式，可以更好的拓展信息承载空间，满足信息平台型产品的设计定位。目前底部导航分为“首页、附近、消息、我的”四个频道，用户可以分类查看内容，信息结构更加清晰。图片来自 AlibabaDesign在首页中，高德地图打造了“内容中心”来承载更多信息。将”地图“与”内容“相互独立，构建出了明确的信息边界。交互设计上，内容中心采用弹性浮层方式，分为了 3 种模式。默认模式下，内容中心展示快捷功能”工具箱“和常用地点，方便用户快捷操作。当“内容中心”下拉收起，可以释放更多的屏幕空间给地图。上滑则进入“更多模式”，为用户提供更丰富的信息。“内容中心”的信息会根据用户实际位置，搜索地点而变化。例如我在北京时，会显示北京的专享服务。而我搜索上海的地点，首页下方则增加了上海的推荐信息。信息挖掘，更好的服务用户出行1. 地图信息颗粒度细化，提高信息承载能力一个地点除了基础的地理信息外，还需要集合各类相关信息，为用户做好出行服务。如何将复杂多样的信息整合，实现“所见即所得”展示给用户呢？高德地图采用了“内容分类”的方式来展示地理位置的二级信息，从而提高地图信息的承载量。当地图定位到景区范围内，会显示厕所、出入口、餐饮、停车场等信息选项，用户点击即可查看相应的内容。而大型商场聚焦放大时，用户可以查看商场楼层的店铺信息，将细节信息融入在地图中，通过多层级的信息划分，展示不同颗粒度的内容。2. 实景信息，提高用户决策准确性当我们进入一个陌生区域，乘坐公交车时，需要准确知道公交车站的位置。而公交车是有方向的，一旦我们进入了错误的方向，可能需要横穿马路或者绕行很远才能抵达正确的公交站点，这会花费用户很大的体力和时间成本。当用户规划出行路线时，地图路线中通过冒泡提示形式，引导用户查看公交站点的实景地图，方便用户更准确的定位。3. 场景化信息挖掘，为用户提供更好的服务体验当用户搜索酒店时，在页面上方会展示“查看附近酒店”的快捷按钮。方便用户快速查看周边的酒店，进行对比选择。如果用户在非营业时段搜索商业场所，会展示不同的信息状态。例如深夜搜索时，显示“已打烊”状态，而在清晨搜索时，显示”未营业“状态，并告知营业时间，避免用户跑冤枉路。当用户查询驾车路线时，如果查询的地点不是特别明确，系统会提供多个地点供用户选择，并增加了各个地点的选择比例，降低不熟悉用户的选择成本。另外选项中不仅有停车场景，还考虑到了接送人临时停车的场景，实现了多场景的覆盖。4. 激活用户群，实现信息共享当用户计划出行时，希望了解目的地的天气、游玩情况。有些信息平台无法给出明确的答案，于是高德地图将发言权交给了有经验的用户，搭建相互交流的群组，实现了信息的共享交换。智能感知，提高用户行为效率1. 用户行为态势感知当用户打开 App、搜索地点或者行程导航时，高德地图会主动感知用户的导航需求，提供相关的信息引导。例如上下班路线、消费券、团购优惠、停车场建议等等引导信息，引导用户的快捷操作。另外用户查询地点时，地图还会扩充展示周边地点的卖点信息，希望能够为用户提供更多的参考信息。2. 行程查询记录的保存用户在查询打车行程，但未打车时，信息会保存在首页信息中，便于用户随时调用出行。以上就是我的一些使用心得，欢迎小伙伴们评论区留言交流~下期再见。10个产品细节剖析，看看大厂是如何做设计的！UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。阅读文章 > 欢迎关注作者微信公众号：「子牧UXD」本篇来源：优设网原文地址：https://www.uisdc.com/amap-design-highlights
文件 效果 序列 大家好，我是小六。今天给大家分享在可视化设计中，最常用的动效落地方案介绍，这一次是一个非常非常干的干货，手把手教你如何配合开发将小动效在页面中展示出来。希望可以带给大家更多帮助！前言最近在做项目中遇到一些问题，有些效果开发实现出来跟实际相差较大、被产品拿着设计稿戏称为买家秀、卖家秀的区别。还会有些情况是因为项目排期问题开发落地有一定成本，希望能快速落地。还有的开发直接说搞不了等等。借这次整理一下动效落地过程中遇到的坑，同事展开聊一下设计师对接前端做动效落地的一些最常用的方法，最后会把文中提到的插件软件整理打包分享给大家。常见的开发对接方式1. GIF2. PNG 序列3. APNG4. Lottie5. SVGA6. MP4GIFGif 是现有市面上应用最广泛的动效格式了，最早起始于 1987 年 由 CompuServe 公司引入。谨此纪念 Steve Wilhite：关于 GiF 和创始人你不知道的 9 件事2022 年 3 月 14 日，GIF 动图的发明者 Steve Wilhite 因新冠并发症去世，享年 74 岁。阅读文章 > 优点：兼容性好几乎所以浏览器都支持、文件能够快速输出。缺点：颜色仅支持 8 位 256 颜色，支持半透明、颜色有限导出文件体积大而且有锯齿，效果差透明导出会有白边。输出：GIF 文件有多种输出方法这里给大家罗列比较常用的，大家按需使用。1. 通过 ae 导出 png 序列或者 mov 视频 拖入 ps 导出2. Adobe Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 gif）3. AEscripts GifGun 是一款可以直接在 AE 里一键创建输出 GIF 动画格式脚本GIF 压缩的方法可以看这篇：如何正确压缩GIF格式文件？来看京东设计师的总结！本文主要介绍了羚珑动图产品侧对压缩GIF格式文件的探索，其中归纳了压缩GIF的各种方法以及相关开源工具，可以为需要压缩GIF文件的设计师提供帮助。阅读文章 > PNG 序列由 PNG 图片组成的序列帧。优点：兼容性非常好、效果还原高、颜色丰富。缺点：文件比较大，动效比较复杂的话输出 png 序列可能好几百张，会影响浏览器性能。输出：可 ae 等动效软件直接输出。APNGAPNG 是一个基于 PNG 的位图动画格式，它的动图后缀依然是.png。优点：颜色丰富，支持 1600 万种颜色，支持渐变透明，无损压缩。缺点：文件过大，兼容性差受浏览器、系统版本等限制。在 web 端对于主流的浏览器 Firefox、Safari、Chrome 都能够兼容。输出：1. 通过 iSparta 软件导出。操作步骤是将 png 序列拽到 iSparta 软件中点击开始即可导出 apng，此软件一共可以导出三种格式，APNG/GIF/WEBP2. AE BX-WebpApngExporter 插件LottieLottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，用 AE 做完动画后，使用 Lottie 提供的 Bodymovin 插件将导出成 JSON 格式，就可以直接运用在 Web 上，无需其他额外操作。一篇文章帮你了解AE动画插件Lottie的前世今生（附避坑案例）大家好，我是彩云。阅读文章 > 优点：文件小、颜色丰富，开发可以控制大小、速度、循环次数等参数。缺点：不支持渐变、粒子、阴影透视等效果，表达式也只支持一部分，部分位图文件输出的效果失真，需手动替换。输出：使用: AE 菜单栏窗口 – 扩展 — Bodymovin — 导出.json文件设置选项里了选择输出一个 HTML 的本地文件，可打开进行预览bodymovie 插件下载地址： https://github.com/bigxixi/bodymovin_cnbodymovin 需要这个安装器才能安装，推荐 zxp 安装器下载地址 https://zxpinstaller.com/SVGASVGA 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式。优点：便捷 SDK 开发集成步骤轻松简单。支持大部分效果、体积小、动画还原效果好缺点：有损压缩，兼容性不太好有的平台不支持，移动端用的居多输出：ae 选择 菜单 > 窗口 > 扩展 > SVGAConverterMP4MP4 是一种常用的视频格式，也通常运用于直接对接开发。优点：兼容性好，文件能够快速输出，文件小。缺点：视频格式项目中过多的话影响性能，效果会有压缩。输出：Adobe Media Encoder（需要跟 ae 版本一致就可以软件联动直接导出 MP4），ae 中菜单-合成-添加到 Adobe Media Encoder 队列，直接可以输出 MP4 文件。最后以上介绍的几种动效落地方案，是目前比较主流的方法， 基本可以满足产品中动效落地，而且能够大大节省开发的时间和产品的稳定性。如何让动效又快又好落地？我分析了这5种格式的优缺点！动效设计，可以提升界面的趣味性和引导性，让用户浏览过程中不会太枯燥，获得更好的体验。阅读文章 > 欢迎关注作者微信公众号：「小六可视化设计」 文件名 如何下载使用 文件大小 提取码 下载来源 动效插件打包347Mnd53 点此复制 登录下载 本篇来源：优设网原文地址：https://www.uisdc.com/motion-program
自己的 价格 画师 本文邀请了优设的优秀老师哔波、林不慌和香奈，为大家分享他们多年的接私单经验。上期回顾：自由职业4年多，我总结了完整的私单合作流程我是从 2018 年年初开始做自由职业的，到现在已有 4 年半的时间，在做独立插画师、设计师的过程中，合作过很多品牌。阅读文章 > @AC炒碗面接私单通常是朋友介绍或者从发作品的平台找寻过来的，和正常工作一样，需要询问清楚意向风格、工作总量、提交时间，这三点是确认自己是否有排期可以接单；然后提供对标作品给需求方，这点是需求方确认是否合作的常规操作，最后才是谈价格，双方确认价格后，收账方式一般是 50%+50%，或者 30%+30%+40%。确认合作后第一步就是收取 50% 亦或是 30%的定金，收到定金后再工作，收定金前对任何询问创意思路、或者要求帮助找参考的要求都要婉转拒绝。早期接单我觉得走合同更有保证，但是实际上如果经常是几千块的小活，按照喜欢收款方式分步收款即可，走合同意义不大，因为走法律途径追款的成本明显超过这个单子本身的价值。50%+50%：一般是设计前收款 50%，设计完成交付源文件前收款 50%，30%+30%+40%：设计前收款 30%，设计中期取一个节点（比如线稿完成）收取 30%，设计完成交付源文件前收款 40%。如何选择可以与需求方商量，一般我觉得几千的小活就分两次收款即可。如果想学类似的扁平插画，可以看我的录播课程，一顿饭钱掌握 https://pro.uisdc.com/detail@Lady不慌在商业合作中，我们往往会遇到各种各样的合作对象，希望留意一些小细节，让自己在合作中更加顺畅更加直观。1. 做好自己的作品展示，确立自己的主要风格和方向。各个作品流平台和社交媒体依然还是一个非常重要的展示机会，保持各个平台的尽量同步更新，在不同的平台类型之间输出不同的类型作品，比如视频和图文两类，平时整理发表作品时不限于图文内容，也可以注意保存视频类型的作品，绘画过程或设计过程或自己关于专业领域的一些心得，发抖音 B 站等尊重各平台的特色，各个平台之间互相引流。不少商业的合作也许都是从这些平台开始跟我们进行联络和了解。2. 高效的沟通。当自己的内容平台吸引了一些合作客户时，我觉得高效率的沟通很重要，首先可以在各个作品平台简介上直接了当的注明自己联系方式和商务合作方式，让人一目了然。然后各个社交流媒体或平台都有自己的消息聊天功能，收到合作邀请或意向时尽量及时留联系方式，转到微信或其他去聊，不要在临时的私信或留言界面聊。3. 对自己价格的理解。在私单价格沟通方面可以先对自己的作品和水平有一个定位，不至于太模糊，商业合作比较多时，可以有一个门槛价，过滤不感兴趣价格低的合作，与人沟通聊价格时尽量主动，快速判断合作项目的性价比。有时候会遇到各式各样的合作对象，当对方对价格没有概念时，可以快速解释清楚行业价格，遇到自己没有价格概念的时候可以问问行业朋友再去聊4. 如何避免被坑首先先看清合同，合作之前咨询清楚对方合同的主要重要条款之类的，之后细看，注意聊清税前税后价格。关于价格，快速判断出性价比是第一位的，预算较少没有达到心理价位时，注意维持合作的性价比，消减作品投入精力。有时合作方找你不直接去和你合作你的主营业务和特长，而只是看你综合能力强与你接触，遇上不熟悉的业务又想合作时，可以多沟通一下，不要急于开始合作，或是不熟悉的风格而需求量大时，可以先主动试稿，确立单张的品质各方面再合作。可以明确单张合作价格，对方有时会以系列数量多而要求降低价格，可以明确单张价格，不因为系列数量多而降低单张价格，避免整体合作性价比降低。了解合作方的不同，有时作为直接与某品牌或项目合作，有时合作方作为某品牌的代理宣传再次外包合作，聊清合作形式以及付款的时间次序。可以适当提出修改次数的规定，避免无限制的修改，在合同中说明，比如确定大的定稿方向后最多两次或三次细节调整修改。有些时候也会遇到无商业合同的合作，遇到新的需要磨合的合作伙伴时，除了内容上的沟通之外呢，记得多聊一些付款流程，可以在合作之前先要求付一些定金，再开始进行创作，结束后，可以要求付完款后再提供输出图和源文件。如果你对于这类梦幻风格插画感兴趣， 想系统性的学习，不妨关注一下我的私房课：这类人气超高的治愈系梦幻插画，有 iPad 就能学！对设计师而言，iPad 不仅意味着娱乐、看剧，更是画画的绝佳帮手，设计创作的新核心： 它携带方便，可以随时随地画画，上下班路上也能练手； Procreate 功能强大，几乎能满足一切画画需求。阅读文章 > 香奈：1. 确认身份对于新手小白第一次接单，需要了解对方公司或者个人的真实性，避免被骗或者被坑，可以网上搜查或者天眼查验收。2. 沟通基本需求① 画的具体内容② 要求的风格（最好甲方给到具体的参考风格）③ 难度④ 预算⑤ 时间期限⑥ 报价3. 签约签约是为了保障自己的合法权益，必要的内容包括：1. 合作内容和附件2. 交付&验收方式（具体交付时间以及验收的方式）3. 费用的结算与支付（包含具体时间避免被拖欠）4. 项目成果归属约定（一般成果交付后成果归甲方所有，甲方可同意乙方拥有成果的署名权，可用于参展、参赛等非商业性活动中标注其自身作品时展示和使用等)5. 保密协议（保密的内容）6. 作品修改补充（超过三次修改可适当增加修改费用）7. 争议解决办法（万一发生争议可双方协商或者通过诉讼等方式解决）4. 报价有两种情况：一是甲方主动报预算 这个时候可以根据自己的实力去定夺，适当报高，不要太离谱就可。二是甲方让作者先报价，尽量往高了报，高了可以谈，但是低了没法往高了谈。报价公式：报价=时薪 X 绘画时长 X 2（或者根据绘画的难度适当增加）报价也会和插画师的知名程度成正比，同一个稿子知名的插画师报价可能会比一般的插画师要高的多。同时也会随着自己的个人画技的不算提升和接稿次数的提升而提升。有的报价可能会包含税点，或者税点对方支付，具体看双方的协商，然后开等额的发票给到对方。5. 预付款预付款，一般是稿费总额的 3~5 成，具体看双方的协商。预付款是为了防止骗稿或者项目因不可控因素导致无法继续，插画师的劳动成果有一定的保障。同时也能根据预付款看出合作方的真实性以及诚意，没有预付的合作都是耍流氓。6. 试稿一般来说试稿都是新手遇到的比较多，试稿时有必要跟对方要求一定比例的试稿费用。一定要沟通确定好，否则试稿不通过浪费自己的时间和精力。可以要求支付单张稿费的 50%或者在自己能承受的范围内协商具体价格。7. 创作流程草图先画大概的草图跟对方确认沟通，画面是否满足对方的要求。线稿草图确定后画线稿再进一步确认线稿，这个时候我们需要跟对方确认这个线稿确定后是不能修改的（这个一般都会提前写到合同里）。上色线稿确认无误后开始上色，上色完成后可以适当接受修改的次数不超过三次，超过三次需要对方支付一定的修改费用，具体看自己的情况和对方协商而定。8. 结尾款截止到结款的过程中，我们发给对方最好是插画的截图或者小图供对方审核，以免遭遇骗稿的风险，只有在对方确认最终画面时候，收到对方的打款再交货。如果想学我的中国风插画，可以看我的录播课程，一顿饭钱掌握 https://pro.uisdc.com/detail本篇来源：优设网原文地址：https://www.uisdc.com/business-process
和平 海报 精英 导语通过与重磅 IP 合作，《和平精英》打造出「与高达并肩」、「正义战士和平守护」的赛季主题。本期为大家呈现光子设计团队如何在不同环节中，打通内外营销和体验设计，协力共创炫酷机甲风视觉设计。Edit｜Hulk，Charlene本期机甲主题为您呈现四个设计环节：1. IP 创意设计2. 品牌视觉设计3. 主题界面设计4. 衍生品设计IP 创意设计和平精英 x 机动战士高达 SEED光子品牌设计团队和创意设计团队，首先启动机甲主题设计的新思路，以 SEED 里最强战斗状态“爆种”，作为联动海报套装的基础设定。代表和平玩家们最强竞技与冒险精神，唤醒高达迷的情怀，凸显特种兵的英勇无畏、积极向上的品质。SEED联动海报新版本系列海报，整体强调《高达 SEED》中的特有元素：运输、驾驶、爆种，结合《和平精英》的角色、场景和新玩法，配合动漫风格的视觉质感，还原高达色彩。特种兵和高达互动，通过画面讲故事，让用户产生共鸣和认同。高达新版本海报“与高达并肩”视频，用一次高达驾照考试，开启特种兵的太空之旅，最大化版本魅力。和平精英 x SEED | 爆种！与高达并肩和平精英 x 孙世前工作室本次主题设计，也联合机甲艺术家孙世前，一起实现中国“和平机甲”计划，让游戏设计与中华文化携手共进。结合冬天上线时间，联动海报以雪山为背景，星辰守护者与站在空投箱上的孙老师、光子鸡互动，整体画面彰显东方意境与苍茫气势。机甲联动海报“披甲，上阵”海报，分别从传统文化的「图腾」符号、李白的《登广武古战场怀古》诗词里，提取了三个图腾及其深刻内涵：虎（勇敢）、龙（守护），鹰（自由）。飞鹰，啸虎和赤龙和平精英x高达 | 披甲，上阵！《和平之翼》玩法海报登场的四大高达 —— 自由、正义、强袭高达、母舰大天使号，与和平小队成员一起同框出镜。和平之翼海报新玩法 机动空投《古战神甲》海报作为《和平精英》的首个“硬核机甲”系列时装，海报设计中使用了“龙”与“长城”的概念。机甲的机库拼接组成了一条全新的“机甲长城龙”。在它前面矗立着的战甲角色，如驻守长城的卫士，一起守护和平世界，传承和平精神。古战神甲海报独立海报时装海报，背景是拼合了凌厉切割的平面色块，加入机甲模型身上常见的金属刻线和贴纸元素，呈现《和平精英》定制版机甲模型盒封绘风格。机甲款时装海报道具海报在机库里布置装备，旁边舱门打开，在阳光和彩虹的祝福下，是出击前的整装待发。道具海报主题界面设计凛冬已至，赛季切换，换上中国机甲，开启 SS16 赛季！赛季切换特种兵快速穿越高达战舰长廊，进入新赛季的紧急备战状态！舱门逐个打开，展示SS15的最高段位、本赛季的起始段位，以及段位奖励。赛季切换赛季主页的设计，是从长廊进入到了战舰中。在界面上可查阅各种信息，遥望远方，在雪景中可以看到玩家熟悉的大天使号、降落伞和空投箱。机舱环境、LOGO 和界面设计，打造未来科技感让玩家身临其境。赛季主页赛季手册游戏内异形海报进入游戏后，在弹出的异形海报上，长城的城楼，成为了展示古战神甲和装备的舞台。通过微仰望视角，展示神甲的高大威猛和挺拔身姿，传达中华战士的正义形象。弧形上仰的腾飞长城龙，与新飞行器一起出场，诠释积极向上的和平精神。主界面海报设计古战神甲进入了战舰的内部，仰望为英勇善战的特种兵精英，所增设的更高规格装备库。兑换界面兑换界面 动态展示衍生品设计机甲主题设计衍生品的规划，是以“中国机甲”的设计理念为切入点，再加入“潮流”的艺术风格，并运用古唐诗里的山水元素，作为点缀。本次套装包括：机甲三级头潮流摆件、HECATE 漫步者电竞联名蓝牙耳机、机甲潮流服饰等。机甲系列衍生品 KV机甲三级头摆件 产品设定机甲三级头摆件 包装GT4和平精英联名款机甲潮流服饰光子内部多团队联合演绎，将高达的进取精神和中国机甲传承的优秀文化，与《和平精英》的战斗艺术细致融合，交叉协作打通思路，致力于让玩家在游戏的内外，享受订制主题的多重视觉体验。将游戏和机甲，融入玩家生活。部分作品文案和效果的展示为临时状态，最终效果以游戏内呈现为准。官方出品！《英雄联盟手游》是如何做好界面概念设计的？在玩游戏的时候，我们都忙着挑选英雄和符文、策划路线和打法，不自觉就沉浸在游戏世界里。阅读文章 > 欢迎关注作者微信公众号：「腾讯设计族」本篇来源：优设网原文地址：https://www.uisdc.com/pubg-mobile-mecha-design
文字 图形 元素 文字图形化，顾名思义就是使文字具备图形的特点，从而使文字变得更加美观、更具视觉冲击力，甚至是可以把文字的意义图像化，使设计更具说服力和打动力，这也是设计师很喜欢的一种设计手法。在海报设计中，通常是把主题或者关键字词设计成图形，然后把其作为画面的主视觉，这种做法既能使画面视觉更丰富，又能突出关键字词。 而关于文字图形化的做法，主要有以下四种:用图片元素组成文字即用与需要设计的关键词相关的图片元素，或者使用与品牌和产品相关的图片元素组合成某个关键字词。在执行的过程中，既要保证文字本身的识别性，也要保证组成元素的识别性。另外，要找到图片元素与文字笔画的共同点，尽量让图片之间的组合自然而巧妙。把文字当作场景比如把文字设计成建筑或者公共设施，让它成为生活场景中的一部分，并与人或其他事物发生互动，这种手法通常会把文字做成三维效果，然后在此基础上去添加相关的图片元素。注意，文字本身才是重点，所以添加的图片元素不要抢了文字的风头，同样也要根据文字笔画的特点来转化成与其造型比较吻合的场景，比如倾斜的笔画可以做成楼梯或者滑滑梯。把文字的笔画或造型设计成图形比如把文字的笔画替换成与其意义相关的图形，或者把文字的外观造型设计成跟其含义相关的视觉图形，比如象形文字就具有这样的特点。在海报设计中我们可以设计得更夸张、更复杂一点。图文结合用与文字相关的图形跟文字组合成一个主体，从而形成一个主视觉图形，比如在文字的笔画轮廓里或者是文字的「字怀」部分填充图形。字体的风格和搭配的图形要在风格上尽量做到统一，比如手写字通常会搭配插画元素，书法字体会搭配中国风元素，立体字会搭配 3D 素材或摄影素材。结语文字图形化虽然不是很新颖的设计手法，创意性也不是特别强，但在商业设计中确实有着不错的效果，当然真要做得好也没有想象的那么容易，对于文字本身的设计、图片素材的创作与选择、文字与图形的组合方式等等都具有比较高的要求。另外，你的设计到底最适合以上四种手法的哪一种，也要有准确的判断。如何让画面更精致？注意这6个版式细节这篇文章我们来讲讲在设计手机详情页时，会经常用到的一些排版小细节。阅读文章 > 欢迎关注作者的微信公众号：「葱爷」本篇来源：优设网原文地址：https://www.uisdc.com/4-graphical-skills
教程 工具 效果 大家好， 我是继续和你们聊设计的花生~立体或者带有空间感的文字能打破了二维平面的单调，带来新鲜的视觉感受，在海报设计中运用极广。而且设计这种字效所需的 Ai 技巧并不复杂，最常用的工具数来数去也就那几个。为了帮助大家更好地掌握此类字效设计技巧，我梳理了优优网上的相关教程，将其中最常用的 7 种工具整理出来了，一起来看看你已经掌握了其中几种吧~变换工具变换工具可以快速做出文字堆叠效果，并可以通过「属性」面板进行参数调整，比手动调节方便灵活很多。「教程直达」10秒做出3D效果堆叠字海报：https://uiiiuiii.com/illustrator/1212122895.html形状生成器形状生成器工具可以快速拼合相邻的形状，用来制作具有立体扭拧效果的字体非常好用。搭配渐变，可以让立体效果更加饱满。「教程直达」AI教程！绘制Yoga风格数字LOGO的：https://uiiiuiii.com/illustrator/121214510.htmlAI+PS教程！教你快速创建Imagin8立体字效：https://uiiiuiii.com/photoshop/121248045.html矩形网格工具/多边形工具/旋转工具这三种小工具都是用来制作「2.5D 视角网格」，网格是制作矛盾空间字体和 2.5D 插画的基础，大家可以根据自己的习惯自行选择合适的方法。「教程直达」AI+PS教程！教你做一张简单易上手的2.5D风格字体海报：https://uiiiuiii.com/photoshop/1212483441.htmlAI教程！教你快速制作矛盾空间字体！（下）：https://uiiiuiii.com/illustrator/1212386124.html封套扭曲封套扭曲是制作透视效果的利器，用文字+透视形状进行封套扭曲可以做出文字透视/扭曲效果，搭配「矩形网格工具」则可以做出透视网格。「教程直达」AI教程！用AI制作空间感文字：https://uiiiuiii.com/illustrator/1212478968.htmlAI+PS教程！手把手教你制作条纹扭曲立体字效：https://uiiiuiii.com/illustrator/1212178805.html混合工具利用混合工具制作的立体字效在海报中非常常见，结合色彩渐变、替换混合轴等功能使用效果会非常惊艳。「教程直达」AI教程！3个简单案例让你更了解混合工具：https://uiiiuiii.com/illustrator/1212112751.htmlAI教程！3分钟学会扭曲层叠字效：https://uiiiuiii.com/illustrator/1212146232.html3D 功能Ai 中的 3D 功能是制作立体字效最多使用到功能，效果也最好。使用不用 3D 中的选项，可得到不同的立体效果。「凸出和斜角」用凸出和斜角功能，可以直接将矢量文字转换为具有厚度的立体纸，组合排版后能形成一个非常棒的主视觉。凸出和斜里的「贴图」功能也非常好用，可以让文字呈现出立体扭曲波动的效果，具体操作步骤可以看下方教程。「教程直达」AI+PS教程！立体字效海报教程：https://uiiiuiii.com/illustrator/121218357.htmlAI+PS教程！超流行的环绕字海报，手把手教你做！：https://uiiiuiii.com/photoshop/1212449713AI教程！教你制作立体文字海报：https://uiiiuiii.com/illustrator/1212214898.htmlAI教程！3种方法搞定旋转字效海报：https://uiiiuiii.com/illustrator/1212300841.html「绕转」绕转功能可以让平面图形变为立体，配合「贴图」功能就能让文字贴附在立体图形的表面，海报中环形的文字效果就是通过这种方式实现的。「教程直达」AI教程！手把手教你制作3D圆环字效！：https://uiiiuiii.com/illustrator/1212341766.htmlAI教程！轻松Get立体环绕字效：https://uiiiuiii.com/illustrator/1212206476.html渲染功能2022 版的 Ai 推出了全新的 3D 渲染功能，在原来「凸出和斜角」里添加了材质、光效等选项，这样我们就可以直接在 AI 里面渲染出真实的 3D 素材了，用来做立体字母效果非常方便。「教程直达」AI教程！3d图标小教程，带你体验 AI 2022 的新功能：https://uiiiuiii.com/illustrator/1212497054.html总结以上就是制作立体空间感字效最常用的 7 类 Ai 工具，新手设计师如果能用好这些工具，那制作酷炫的字效就再也不是难事了。优优教程网上的教程全面细致，非常适合初学设计的小伙伴，赶快动手学习吧~本篇来源：优设网原文地址：https://www.uisdc.com/stereoscopic-word-effect
都是 设计师 自己的 前言“这个做不了、很难做的啊、我没时间啊、改这个有什么意义吗？不是上次刚改过么怎么又让我改？”“我都没见过哪个设计师像你这样，不就几个像素而已？有必要扣这么细吗，能用就行了啊。还改？！我觉得这已经很好看了啊，这么搞很麻烦的啊……”各位设计师是不是已经开始按耐不住摩拳擦掌了，以上场景在跟开发提需求和设计走查的时候经常碰到，或是无奈或是生气，但开发就是有无数种理由拒绝你。毫不客气的说，这个问题一般都会在你职业生涯中的某个阶段碰到，或早或晚，虽迟但到一般不缺席。想必很多设计师都踩过下面这个坑…上线后还原不到位被领导职责“你这设计怎么做的，为什么这里设计成这样?”一对设计稿，一把辛酸泪…你正想极力辩解，不好意思，领导说：“我 只 看 结 果。”就问你气不气？气不气？开发到底为什么拒绝你？收起大刀，咱先分析一波。这个问题不会随着技术的变化而改变，也不像是方法论拥有固定的解题策略，但是在面试中又经常碰到，比如“开发不配合、还原度不高时怎么办”。这足以说明很多公司都会有这个问题，其实说到底还是人的问题，那我们就来看看“当事人”是怎么说的。由于某些原因对接过很多开发，也咨询了几个前端朋友。不管开发口头拒绝的原因有多么千奇百怪，一般情况下，开发反感或者不愿意配合设计还原都可以归纳为以下几个原因：1. 业务紧，任务重也许是项目赶着上线，也许是一堆需求还未交付，当开发手头有更重要的事情要处理时，他没办法分心或者用额外的劳动力去做设计优化的内容。很多时候给定的工时就那些，若是跟绩效挂钩就更别提了。我做需求改 bug 已经要加班了，还要我配合你调来调去的，是你还会有这个心情吗？因此设计师也要关注项目的整个排期，尝试着去宏观把握项目进度，做到理解或评估开发的工时。多站在对方的角度考虑现状。再者就是要判断走查结果的优先级，开发侧的用户体验因素如性能、bug 数等要优先于界面还原。毕竟用户体验并不等于界面的开发实现。当连 bug 都没修完的情况下，还死盯着几个像素去抠显然是不妥的。完全可以先把低优先级的问题记录下来，留着某个版本再一起更新优化。2. 有背职业方向前端的方向一类偏视觉展示的（动效视觉还原组件搭建等），一类偏数据层面的（算法之类）。共性都需要比较强的数据处理和逻辑能力。有些开发会十分明确自己的方向，比如往算法类的会认为专注视觉还原侧是在浪费时间，因此在面对该类需求时内心会产生一定的排斥心理。他们经常不关注体验这种东西。其实像还原这种的都算开发底层的基础能力。就像 UI 有的偏交互有的偏视觉，但一个偏交互的 UI 说不愿意画图标这说不过去吧。说到底本职工作还是设计。3. 水平不够设计圈里都流传着这样一句话“没有实现不了的效果，只有不想做的开发”。不想做更倾向于是态度问题，不会做是能力问题。但所有技术不都是由不会到会么，况且大部分的还原问题借助搜索引擎是可以解决的，只是要权衡学习成本与收益的问题。若是实在基础的问题都不愿意去做，必要的时候可以让设计领导同开发领导反馈。4. 价值观不一致有部分开发会不认可设计，你跟他谈对齐亲密性，他跟你说听不懂要下班；他不想也不愿意去接受或了解设计的作用，沉浸在自己的认知体系里，自然也就不会认同你。这种是很少数了，只能说是公司招人不慎，可以尝试多次沟通，依然无果后，与领导反馈。以上就是常见的开发不愿意配合的原因了，有些情况会由于客观条件确实难以解决，有时候可能睁一只眼闭一只眼就过去了。那么有什么其他的办法呢？设计师该怎么做？开发本身的问题很多时候我们作为设计师没办法介入，作为设计师，更应该从自身出发去解决问题。掐指一算对接过的开发也不在少数，软磨硬泡，用尽毕生所学与其斗智斗勇，在耗尽气力之前终习得了一点心法同大家探讨，文末也一同附上了所有用到的工具和宝典配合使用，希望对大家有帮助。1. 良好的沟通是前提所有的合作都是基于沟通进行下去的，好的沟通方式会直接决定结果。别一听开发不愿意做上来就急眼干架，友谊的小船说翻就翻，都是同事，不出意外以后还要天天见面的。这样只会显得自己更不专业，冷静冷静…首先要保持客观，聚焦问题。作为设计师要明确方案解决的问题是什么，为什么要做这个方案，尽可能地深入剖析问题根源，试着对着一个问题连续问自己 5 个为什么。这样在对接需求时，既能做到证明自己的方案是对的，同时也可以游刃有余的回复对方的疑问。另一方面，在沟通或设计评审时，可以广泛的听取他人的建议，每个人的出发点和认知是不同的，这就意味着看待问题的角度会不一样，多记录并思考别人的视角会更加拓宽自己的思维，这也有利于设计交接。说了这么多，举几个最常见的可直接落地的实际方案：1. 条件允许的话，搬个凳子直接坐在开发旁边磨（前期最好也可以带点小零食慰问品，收了礼总得给个面子改改吧，这招通常都很管用），面对面沟通细节是最高效的。有一些开发压根不懂设计，基本的对齐都看不出来，不是不愿意做，是真的看不出来。不要笑，一大把。这种方式虽然前期比较耗时间，但既可以培养感情，同时比聊天式的沟通更清晰高效。因为面对面的沟通能够感受到你的情绪和状态，有句话怎么说来着“线上聊千遍，不如线下见一面”。2. 尽量跟开发混好点。比如有球局就一起去打打、有机会就一起吃吃饭、平时有聚会就多玩玩唠唠嗑。混熟了调个样式什么的那还不是分分钟的事情。3. 在解释自己的方案时，可以用“我有解释清楚吗”而不是“我这么说你听得懂吧？”多站在听者的角度去阐述。2. 有一定的前端基础常识别担心，我并不会在这里提如何敲代码。想必很多从事设计师的朋友一部分原因是被代码劝退了，二选一选了设计。设计师没有要求一定要会写代码，但做到看懂一些常规的内容其实不会很难，一方面提高我们走查还原的效率，一方面也是自己“专业”的体现，提高开发信任感，同时沟通也能更顺畅。熟悉主流 UI 框架当前市面上最主要的就 3 个：移动端 H5 的 Vant，PC 端的 Element 和 Ant。官网都有组件库的源文件，导入 sketch 就可以直接调用了。这里顺带提一嘴，element 是基于 vue 开发的，而 ant 主流是 react，但也有 vue 版（ https://2x.antdv.com/docs/vue/introduce-cn ）因此动手前一定要提前跟前端确认用哪套框架再进行设计。尤其是 B 端，非大团队是没有足够的人力和资源去搞源生的。大部分公司前期的开发都是基于 ant 或 Element，可直接用官方组件做设计稿，市面上的话 Element 的占有率还是会偏多一些。考虑到开发效率与成本，基本上样式都是基于框架调整的，所以碰到差距非常大的样式最好是提前跟前端确认。走查工具的应用再提工具之前，建议大家学习了解一下“盒模型”的概念，它是前端设计布局还原设计稿的基础，下面要讲的工具也会用到，篇幅有限，关于盒模型的内容就不展开了，有兴趣的可以自行搜索。写给设计师的速成指南：一小时快速了解 CSS 基础这一章，我们开始学习 CSS 样式表有关的知识点，通过 CSS 来控制 HTML 标签和元素的样式的方法和规范。阅读文章 > 不知道大家有没有遇到过以下这种场景：开发上线后发现实际效果跟预期的有点差距，可能想微调字体大小或者间距或者某个颜色，要么屁颠屁颠求开发大爷调整一下，要么就自己再用软件做调整试错，这些方法也不是不行，但是有种更快捷的方式。下面提到的两个工具就可以帮到你。浏览器审查定位，快速试错第一步：键盘 F12 或鼠标右键点击“检查”调出如图所示的代码界面。第二步：点击右上角的小箭头，再移动到左侧页面寻找你想查看的任何元素，比如“UI 设计_百度百科”，鼠标移上去时就可以看到基础的元素属性了。第三步：单击刚刚要选择的元素“UI 设计_百度百科”，在右侧就会自动定位到对应的代码，双击可以自己随便打字，按 enter 立即生效，有时候测试文本极限值的时候用这个方法就不用再打开 sketch 敲文本了。第四步：定位元素，设计试错。重头戏来了，还是选中刚刚的“UI 设计_百度百科”为例，点击代码块右上角的“Computed”，很好，现在映入眼帘的这个大色块就是传说中的盒模型了。简单理解就是前端在实现时，每个元素都用类似于盒子的这种模式一层套一层实现的，没错，你也可以理解为套娃。鼠标移动到对应的某一层，就可以看到每一层对应在界面的哪个位置。比如这里的 padding 就是对应左侧界面的绿色条高度：10px。那快速试错又怎么理解呢？比如我们现在想调整“UI 设计_百度百科”上面的间距，点击下方的“Filter”，输入 padding 就可以看到这个数值了。点击箭头直达修改路径，双击修改直接生效。要改其他的属性同理。这样就避免了请开发大爷帮忙，也省去了用软件去调整试错设计效果了。为了方便大家理解，我录了个小视频，大家可以直接配合食用。以上的方法技巧比较投机，适合实在害怕或者没有时间学习代码的同学，用这个方法可以帮助你省下很多时间。当然这只是很小的一个例子，应用在各种场景后会有很多新发现的，就比如某些在线设计的网址可以用这种方式拿到原始图片，大家可以自己多去尝试。走查神器：CSS PeeperCSS Peeper 是一款 Chrome 浏览器插件。主要用来辅助走查，如果你是得了看到代码就头疼的病，F12 审查也帮不了你，那这款绝对是你的最佳良药了。1. 快速查看元素属性以及间距。字号、行高、色值、字重、元素间距，哪里不懂点哪里，验收原来还可以如此轻松。2. 预览网页所有色值。只要有不按规范的基本无所遁形，全站色值给你扒过来，查颜阅色，我是专业的。3. 一键下载网站图片素材。下载图片什么的那是信手拈来，图标 banner 任意素材，只要你是图，我就下的来。就问你香不香吧。以上两款都可以帮助我们快速的验收，回归主题，这一节主要提到的是了解前端基础常识，其实主要还是为了更好的交接，说到这就顺带提一下设计交付的小技巧：1. 除了交付静态图外，还要带上交互说明。比如基础的字段极限值、图标的 hover、禁用状态、适配方案等等，这些是产品不一定考虑的到的，在设计执行过程中可以另起一个画板一并写下来，避免开发时的频繁沟通。另外涉及微交互/难实现或难描述的样式，都可以拿现成已上线的成品给到开发去做参考，直接调用代码、学习或改动都可以增加他们的效率或者提高他们去做的意愿。毕竟说再多不如见一面，动态效果总比文案描述要容易理解，不是所有开发都能够看一眼静态图就知道怎么实现。2. 设计稿完成后在交付开发时要有一次正式的交接，也可以带上测试，大概阐述一下设计稿的一些还原、交互难点以及注意点，毕竟还未正式介入开发，若有问题可以及时处理。小的问题一般在开发执行时才会碰到，到时再给到设计支持就行了。3. 注意标注平台的设计稿布局和分组。先给大家感受一下普遍的在线平台设计图，包括但不限于蓝湖、慕客、Codesign 等。很多时候画布一多，设计稿全堆一起，就算是设置好对齐，隔开间距，但还是遭不住一多就难以定位的问题。就算是产品自带的分散功能也没办法解决。开发一点进来，我是谁？我在哪？我要点哪里？图一多就乱难免会引起一定的不适感。那么有什么解决办法吗？这个时候可以把设计稿按类别/模块整理清楚，一个模块的设计稿尽量不要超过 10 张，多了就考虑建一个子类别，另外要多建一个画板做好分组。同时平台自带的分组功能也要应用上，设计稿的命名也要准确便于利用搜索去定位。最后就是按版本建立大的文件夹存放设计稿。切忌所有的稿都放在一个画布里，多了不方便找是其次的，卡到想你锤烂屏幕的心才是最难受的。既然一直谈体验，那么看稿的开发就是我们的核心用户了，好的阅览体验说不定能带来更高的代码效率呢。千万不要小看这些细节，都是一些小事情，无外乎命个名以及拖动拖动画板，耐心一点也就几分钟的事。这些都是个人能力与专业的体现。3. 建立走查机制前面讲的都是基于个人角度出发，而建立走查机制有点偏团队侧了。将走查纳入整个产品设计流程的一部分，提测后就可以进入走查阶段了，过程中需要记录并与开发沟通修改还原问题。一来可追溯防背锅（你懂的），二来让还原的问题有沉淀，方便我们去记录和复盘。类似这样的表格模板，因为各个团队大小和工作模式都不一样，所以字段会有所差异，有的也有产、设、测共同维护的表。这个可以按实际情况参考这个模板适当增加删减，另外走查时除了视觉类的，也可以通过交互自查表去做一些验证，查缺补漏。其中特别注意的一点就是走查反馈尽量写的细致一些。比如截图后在图片上带上箭头指向，同时配合文字填写在“问题描述”那一列里，是间距差了还是不对齐等等，有色值给错的就把正确的色值也标注上。最后，就算存在赶时间赶项目的情况，也要有基础的设计底线，有些原则性的内容不能随意更改，比如通用的设计准则、一致性等，设计师需要根据实际情况把握好这个平衡点，对走查内容做筛选沉淀。4. 提升设计在团队的影响力这里的“设计”不仅是指设计师本人，还可以引申到具体的设计输出、设计团队等一切跟设计相关的人和事务。比如做一些设计知识分享、设计团队（或个人）项目的复盘总结，让结果呈现更加的专业化，期间还可以引入用户的声音、用户研究结论、数据分析等。这些都是建立信任、提高影响力的方式，长期执行下来会带来很大价值的。5. 培养开发的用户体验意识开发的设计意识越高，设计落地自然就越顺畅。一方面通过上面提到的技术分享耳濡目染，不断提高开发侧的设计认知。另一方面相关考核可以把开发侧的用户体验因素权重提高。比如，稳定性、性能、系统资源占用与消耗、bug 数、bug 解决率等，同时在招聘时也适当做一些筛选。再者就是常说的界面还原度了，视觉、交互动效与优化等，可以通过验收次数等来做一定的量化。不过要达到这一点比较难，尤其是刚建立的小团队。过程涉及多方协作，还要具体看开发侧的认知和配合情况，需要基于人和现有的工作流去建立起设计共识，因此还是得细水长流，逐个攻破。结尾以上提到的种种是对开发不配合，设计难还原等相关问题的思考，经验有限，不一定能解决所有情况，具体的落地也会因人而异。如果实在接受不了也改变不了现状，在实力允许的情况下大不了就换咯，大团队在流程上肯定要更规范和成熟的。我也遇到过很贴心的开发小哥，他甚至可以与你一起探讨解决方案，视觉还原什么的都是基操，压根不用你担忧。这种的开发只能说是可遇不可求了，碰到了一定抓住好好珍惜~如何进行有效的设计沟通？我总结了这7个技巧Netflix 制作了一部艺术纪录片，名叫《Abstract：The Art of Design 》，这部纪录片探访全球创意艺术名家，分享这些世界顶级设计领域的设计师所持的创意艺术理念、工作方式等。阅读文章 > 欢迎关注作者微信公众号：「Andy聊设计」本篇来源：优设网原文地址：https://www.uisdc.com/developer-communication
图片 头像 人工智能 最近经常一种手绘、动态的美式风格画风，原来是透过「NewProfilePic」做到，只要将个人资料照片上传，就会利用人工智能 AI 技术将大头贴转换为各种效果，非常好玩！NewProfilePic 也有应用程序 iOS、Android 免费下载，不过只要打开网站就能处理照片，如果你觉得自己的个人图片一成不变，想要换个让大家惊艳的新头像，可以试试看这个免费工具。依照 NewProfilePic 说明，当前是个快速变化、一直不断发展的时代，为什么在社交网站总是要使用同一张个人图片呢？试着让它更与众不同（或许还能够抓住其他人的目光），让个人图片有些新鲜感，而且还是透过人工智能制作的，随心所欲改变显示图片，也能给你的朋友带来更多惊喜。NewProfilePic 会自动辨识用户图片的人物范围，也有编辑器可以手动调整，接着使用机器产生数种全新个人图片风格，选择喜欢的图片即可下载，这项服务会在图片右下角自动加入一个 #NewProfilePic 标签，目前暂时无法关闭或隐藏显示。NewProfilePic网站链接：https://newprofilepic.com/使用教学开启 NewProfilePic 网站后点选「选择照片」将个人资料头像上传，依照说明，以使用者目前的心理状态选择自己最喜欢的个人资料照片即可，比较有趣的是不同时间使用可能产生的照片会有些微差异。将个人图片上传后 NewProfilePic 会自动标记出人物范围，并以绿色显示，透过底下编辑器可调整范围，如果 NewProfilePic 无法正确识别可先手动编辑以获得更好的效果。接着 NewProfilePic 就会将个人图片转换为多种风格，从上方产生的风格切换、预览更大张的效果，看起来和原始图片很不一样，无论是在颜色、线条、阴影等细节都有非常强烈的美式漫画画风。另外也有看起来比较像是平面化设计的风格。如果上面四种风格无法满足，点选右下角「还有更多」可产生更多不同的效果（颜色也会不太一样）。迟迟无法决定要用哪一张个人图片吗？NewProfilePic 也提供拼贴图，将它交给你的朋友帮你决定吧！同时也能提升和其他好友的互动。最后，点选下方绿色「下载」按钮就能将 NewProfilePic 产生的个人头像保存使用。值得一试的三个理由：将个人资料照片上传，利用人工智能 AI 技术将大头贴转换为各种效果让个人图片有些新鲜感，而且还是透过人工智能制作的大头贴产生拼贴图让你的朋友帮你决定哪张个人图片最适合你免费可商用！100个高质量头像素材打包下载如果要开发软件、网站或应用程序，可能会需要一些测试图片，除了从免费图库或免费图标相关网站搜索素材，也会有用到用户头像的情境，举例来说，开发者显示多个不同的测试账户会设定不同头像仿真真正操作的样式，或是在进行展示、制作截图时以一些范例头像替代，之前介绍过免费个人头像产生器：[link 阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/newprofilepic
椅子 巴塞罗那 设计师 前言经常有人问软装设计师一个问题，如果想要改动房间中的一件家具，就会使室内整体氛围变化，应该选择改动什么？软装设计师的回答一般是——“椅子”。那么，今天我们一起去了解下历史上有哪些经典的大师椅～瓦西里椅 Wassily Chair设计者：马歇尔·布劳耶(Marcel Breuer）；设计年代：1925 年瓦西里椅 Wassily Chair，1925 年设计出品，是由知名的匈牙利设计师马歇尔·布劳耶(Marcel Breuer）设计的。这是布劳耶设计的第一把钢管椅——瓦西里椅子，也是世界上的第一把钢管椅。瓦西里椅造型轻巧优美，结构简洁，具有很优良的性能。带有浓烈的机器美学色彩，用焊接方式形成主体构架，这使这件设计更像一台机器，尤其是用皮带作为扶手，完全类似于机器上的传送带，而靠背悬固在一根横轴上更增加了一种机器上的运动感。瓦西里椅的灵感来自于一种叫阿德勒的自行车，首创了世界钢管椅子的设计记录，为了纪念抽象艺术大师瓦西里.康定斯基，也就是马歇尔的老师，他将这把椅子命名为“瓦西里”椅。瓦西里椅子曾被称作二十世纪钢管椅子的象征，开创了现代家具的先河。这种新的家具形式很快风靡世界。从法学生到顶尖艺术家：抽象先驱瓦西里·康定斯基瓦西里·康定斯基（Василий Кандинский，格里历1866年12月4日－1944年12月13日），画家和美术理论家。阅读文章 > 昌迪加尔椅 Chandigarh chair设计者：皮埃尔·让那雷被勒·柯布西耶（Pierre Jeanneret）；设计年代：1955 年前后昌迪加尔椅，是近几年出镜率最高的椅子单品。它的名字起源，是来自于一个印度乌托邦式的新城市。1955 年前后，瑞典著名的设计师皮埃尔·让那雷被勒·柯布西耶请去援助建设印度的昌迪加尔城，并要其设计一款为政府大楼里公务员所用的椅子。他设计出 300 万人的城市：顶尖设计师勒 · 柯布西耶现代建筑当中最著名的大师有 4 位，俗称「建筑界 F4」，四位大师之所以能并驾齐驱并非因为什么共同之处，反而是因为各自的贡献独当一面并旗鼓相当，好比香港流行四大天王，能具体说谁最厉害吗？阅读文章 > 所以昌迪加尔椅的真正名字，其实是叫：office chair，议会大厦办公椅。但非常可惜的是，好景不长，随着当地人更加对现代设计的偏爱，昌迪加尔椅被大面积弃用。被废弃在整个城市的各个角落，堆积成山，它经常被当作废料出售，价格仅仅只价值几卢比。到了 1999 年，被判死刑几十年的昌迪加尔椅，命运发生了峰回路转的变化。一位法国商人收购了大量被遗弃的椅子，重新翻新拍卖。所以昌迪加尔椅才回到了人们的视线中。后来，意大利著名家具品牌 Cassina，采用了和当年一样的“柚木+藤”的材质组合，重现了昌迪加尔椅，并将其命名为 051 Capitol Complex Office Chair。如今，昌迪加尔椅深受收藏家、设计师和家具爱好者们的追捧，成为了诸多有格调有品位的家居设计中常见的单品之一。巴塞罗那椅(Barcelona Chair）设计师：密斯.凡.德罗 Ludwig Mies van der Rohe；设计年代：1929 年著名的巴塞罗那椅是 1929 年德国一代大师密斯.凡.德罗 Ludwig Mies van der Rohe 的作品，是现代家具设计的经典之作，被视为二十世纪最经典的椅子没有之一，而且被多个世界级博物馆收藏。他也是最著名的现代主义建筑大师之一，与赖特、勒·柯布西耶、格罗皮乌斯并称四大现代建筑大师，是包豪斯的第三任校长，无数设计师时刻挂在嘴边的“少就是多”是他最为著名的理念。巴塞罗那椅是 Mies 专门为 1929 年巴塞罗那博览会德国馆设计的，当时也把它作为德国送给前来剪彩开幕的西班牙国王和皇后的礼物，具有政治意义。巴塞罗那椅的主要结构是由户型交叉状的不锈钢构架支撑真皮皮垫，结构优美，线条灵动，当时由密斯设计的巴萨罗那椅是采用手工磨制，他的设计在当时引起很大的轰动。这款椅子在很多博物馆都有收藏。蛋椅 Egg Chair设计师：阿纳·雅各布森（Arne Jacobsen）；设计年代：1958 年蛋椅，1958 年由雅格布森设计诞生。从此成了丹麦家居设计的典范及样本。为哥本哈根皇家酒店的大厅以及接待区设计了这个蛋椅，时至今日也还能在特殊的 606 号客房看到他当初的设计。蛋椅之所以叫蛋椅，是因为它与光滑破碎的蛋壳很相似，也是格鲁吉亚翼扶手椅的改良版，有一定的国际风格。蛋椅有很独特的造型，它可以为使用者创造出不被干扰的空间，特别适合躺着休息或者等待，就跟家一样。蛋椅按照人体工程学的设计，人坐上去舒适、优雅而大方。钻石椅 Diamond Chair设计师：哈里.贝尔托亚（Harry Bertoia）；设计年代：1950 年在 1950 年代，雕塑家及设计师哈里·别托亚（Harry Bertoia）为美国制造设计了各种家具。这些设计中最成功的就是钻石椅。钻石椅最早是用金属焊接而成的椅子，因形似钻石而得名。在材料及形式上它更像一件雕塑品，一个艺术品。设计师其实是把它当作现代雕塑品来用的，家具有这么强的雕塑感，并不多见。Betoia 贝尔托亚曾说过一句话“当你看着这些椅子，它们仅仅就是空气，如同雕塑一般与整个空间交错”。因此无论它摆在什么地方，都能非常好的强调空间的概念。大家是不是没有看过瘾？其实大师椅子有上百款，今天就先分享给大家这 5 款大师椅吧。剩下的小编会继续整理分享给你们哦。当然生活中除了人类需要的家具我们还有宠物家具。养宠物的小伙伴们有福利了，下期我们是有关宠物的家居分享哦，期待一下吧～他创作了100把最符合人体工学的椅子一排排茂密的冷杉之下，点缀着冰冻的湖泊和血红色的小木屋；穿着雪地靴的孩子们，在结冰的路面上小心翼翼地行走着；半冻的草地在脚下嘎吱作响。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/masters-chairs
组件 玩法 此类 前言在现如今的社会中，每天都有各式各样的商战。运营设计则是至关重要的一部分。所谓运营设计即是运用完善的设计思维、产品思维和设计技能去完成视觉设计，在保证设计美感的同时，兼顾用户和产品营销的需求，达到流量多、曝光量多、积累口碑等目的。运营活动具有周期较短、业务目标明确、用户群体明确、玩法简单等特点。运营类活动生命周期较短，常在某一段时间(也可能是周期性的)，一般跟随时节热点或者运营节奏来进行。较短的生命周期给设计、开发、数据等带来较大挑战，那么作为运营设计师怎么才能做出一系列快速、高效、高质的运营设计呢？本文主要从运营设计师，需要什么样的思路、技巧？并明确哪些步骤是可以快速搞定的？哪些内容是需要精修打磨？怎么归类？怎么统一？等内容去引导大家做好运营设计。灵活把握设计思路、避免陷入程式化设计师长期处于单向业务线的设计中，往往都会有思维模式固化的特点，每做一个项目，可能需要清楚设计目标、背景、品牌定位、用户人群等等。岂不知一个短短的运营设计，哪有那么多时间去深入了解，我们要做的就是依据项目的重要程度，做思路筛减，灵活运用，了解到哪些是必要的，哪些是非必要的。我们依据项目的重要性，大致分为四类运营活动：S 级大促活动、A 级节日&平台类主题活动、B 级品类&渠道等日常活动、其他助力玩法&推广类活动等。那么接下来我们考虑以什么样的设计思路去应对这四种不同级别的项目活动。1. S 级大促活动S 级大促活动，常见的有双十一、年中大促、春运大促等。此类的活动有爆发量高、活动周期较长、促销力度大、出现次数较少等特点。那么此类活动对于无论是产品运营还是设计师都是重中之重，而且 S 级活动往往涉及到的物料输出非常多，包括各个会场、换肤、顶通等等，所以针对每个环节，我们都要做到深入了解，精细打磨。我们要做的有：1. 理解活动目标，包括活动效果目标、业务转化目标、品牌形象目标、设计影响力目标等；2. 明确目标用户，掌握用户行为特征、思想和情感需求，洞悉目标人群的特征才能实现精准的设计触达；3. 制定设计策略，包括规划设计排期、定义设计风格、设定活动符号、把控节奏点等内容；4. 细化流程，规避风险，视觉风格定好后，依据关键词，先草图绘制，进行创意联想，避免过早陷入细节，待方案确认后，再进行精细化打磨，按照时间节点，各个端口物料输出；5. 关注设计结果，总结复盘，要及时了解用户反馈、可量化数据验证，项目结束后做总结和复盘，把项目过程中遇到的问题及时列出，好的经验和方法延用。A 级节日&平台类主题活动A 级活动，常见的就是节日节点和平台主题类活动，例如春季家装节、回收焕新季等。此类活动一般上线时间为 3-8 天左右，频次相对较高，此类活动可以根据活动属性和项目特点，打造系列化运营设计，既可以保证设计质量又可以节省时间。我们要做的有：1. 规划时间、统筹归类，将一年内的 A 级活动，依据活动特征属性，进行归类整理，进而为做出系列化的运营设计做好准备；2. 确定阶段性设计风格，依据当前设计趋势结合业务熟悉，打造适合业务转化的视觉风格，包括 C4D、插画、酸性、场景合成等；3. 定义设计语言，包括设计版式、构图、色彩和字体符号等，将此类信息进行明确定义，在设计时，就可以直接使用，也不需要每次投入时间去考虑；4. 关注数据，及时总结，A 级类活动相对频次较高，所以实时的总结经验教训，为下一次活动做准备是非常有必要，也只有这样，才能使每次的运营设计越做越好；B 级品类&渠道等日常活动B 级活动，也就是我们所说的日常运营活动。此类活动一般我们打开 app，每日都会看到，常见的有福利日、品类日等主打活动。此类活动有上线周期长、频次短、营销力度小等特点，基本上一个月或一个季度更换一次、有的甚至半年或一年，基本是跟业务及品牌主打相关。此类活动的目的，一方面是为了促活、留存、流量汇聚等，另一方面是为了传达品牌理念，提升业务及品牌形象。我们要做的有：1. 深入了解品牌形象和业务属性，根据品牌规范对运营活动进行设计，B 级活动对用户来说，曝光率会比较久。所以我们在设计的时候，尽量依据品牌关键词，选择规范中的品牌色、字体、符号等内容，加深用户对品牌的印象，从而提高知名度和业务转化；2. 模版规范化、统一处理，针对于 B 级活动，做相应的模版规范，统一视觉样式，是非常有必要的。不但能提高设计效率，同时也能逐渐沉淀出符合产品调性的品牌基因，从而保持产品的一致性；3. 视觉降噪、简洁处理，B 级活动视觉避免花里胡哨，能够让用户在有限的时间内 Get 最有价值的信息，找到所得，从而实现转化就可以；4. 版本优化，迭代更新，总所周知，一个 app 要想保证用户留存和拉新，是必须不断升级和改进，那么 B 级运营活动同样也是如此，会伴随着主 app 的设计调性，不断优化迭代。其他助力玩法&推广类活动除了以上分析三种类别的活动外，我们常见的运营活动还有助力玩法和推广类活动，通常依赖游戏化手段或任务类玩法带来优秀用户体验，有领红包、领劵、抽奖、限时秒杀等形式，从而获得成功拉新转化的一类活动。此类活动有运营感强、行为体验丰富、流程触点多等特点。另外此类活动对产品运营和交互设计的要求比较多，需要对玩法策略和交互逻辑有清晰的设定，那么作为运营设计师我们需要怎么做呢？我们要做的有：1. 参与策略制定、提出创意想法，针对玩法推广类活动，在设计前期，我们一定要参与策略制定，能够将自己的一些设计创意和灵感，融入到活动中；2. 了解玩法逻辑，强化设计价值，当设计玩法确认后，我们一定要配合交互设计师，对玩法中的每个流程逻辑，要有清楚的了解。并对每个流程页面中的内容进行层级分析和强化处理，包括利益点、文案和激励机制等；3. 市面设计分析，融入自身创意，在开始对活动进行设计的时候，我们首先要对此类玩法市面上的设计进行收集整理，吸取别人的优点，同时将自己的创意融入，最终做出更好的玩法设计；4. 案例整理，提高复用，当我们做完一系列的玩法活动时，要学会对其进行整理，做成通用模版，从而提高设计复用性，降低设计成本。综上所述，对四类活动进行了一些设计思路分析，其中的思路方法也不是一成不变的，有些点是互通的，这就在于设计师在设计中要学会灵活把握，找到快速有效适合自己的方法，只要有了清晰明了的设计思路，我们做设计的时候才能达到事半功倍的效果。运营物料规范制定众所周知，运营设计师的需求内容有专题页、详情页、H5、Banner、闪屏海报等等，分别对应不同的设计要求。我们在运营设计的时候，在输出物料上花费的时间是非常的大。所以运营设计物料做统一性的规范标准是非常有必要的。一般来说我们针对运营物料，需要明确规范的有尺寸大小、图文结构、字体字数、配色、元素等内容；用一个项目实例来具体说明一下：为 58 同城本地服务运营活动入口的 banner 图，涉及到 APP 和 PC 端。当我们已知素材和文案内容后（如下图左），我们就可以制定其版式结构，包括尺寸大小、字号间距、主视觉等内容（如下图右），那么我们每次设计的时候，只需要更改文案、主视觉和配色即可。以下两张图是按照 banner 规范做出来的效果：另外再举个例子，就是我们的活动页面设计，常见的页面信息结构：首屏+副屏，首屏：主副标题+氛围图，副屏：模块平铺/叠加，我做设计之前就需要对页面中的内容进行布局的规范化，包括位置尺寸等等，有助于我们更清晰的表现画面内容和层级的划分，如下图所示：组件化降低设计成本对比设计规范来说，组件库更像是一个强大的工具库，是提高工作效率和保证团队协作一致性的基础。组件库作为设计系统的一部分，在运营设计过程中设计师可直接调取，组合构建出新的页面，通过组件库带来的价值主要体现在三个维度：1. 设计一致性当我们使用统一的设计模式和组件库，能够在保持基础体验一致的同时，针对业务特性做差异化设计，给用户带来一致体验和品牌感知。在团队中有新成员加入时，也能够快速上手工作。2. 提高设计效率我们做运营设计的时候，总会使用到相同的元素和组件，通过组件库的调用能够减少重复性设计时间。当组件设计细节有改动时，只需要改动组件库，所有共用组件库的页面即可实时响应。针对新的业务线也能够快速进行页面搭建，实现设计效率的提升。3. 高效协同我们在进行运营设计的时候，可能会涉及到产品、开发及数据等人力侧的支撑，组件库能够随着业务发展不断的优化和完善，在不同的需求和各人力侧之中，能够灵活支撑页面内容进行延展和扩充，从而实现全链路、多场景的高效协同。以下是我们在做 58 到家的家庭服务运营设计中，部分的组件样式，包括服务列表、弹窗等等。在组件库的构建过程中，我们需要整体思考，明确组件化的设计内容，不断去优化和完善组件细节，包括设计原则、应用场景以及拓展性等。同时组件库需要根据产品的发展不断迭代和创新，才能让它的可持续性特性发挥至最大。写在最后设计行业是一个不断发展、推陈出新的行业，新的风格和形式层出不穷。而随着互联网和人工智能的发展，运营设计也在大的时代浪潮下产生着变化。我们需要在新的维度上进行思考，充分调动用户的感官，用更具有创造性的思维完成设计表达，在更丰富的场景下实现多通道的感官设计，创造更新鲜的体验。设计师需要不断学习和成长，为设计行业注入新的活力。以上是个人在运营设计中的一些经验总结，从设计思路、物料规范和组件化三个方面进行了论述，不足之处请多包涵，同时篇幅有限，关于运营设计的内容无法一次详尽，欢迎大家一起讨论。设计师应该懂的运营基础知识由销售演变成运营在我看来，当今互联网行业的经营实际上与传统行业的销售并无区别，我们可以从以下两个行业的业务结构图看出，互联网行业的经营实际上是从传统行业的销售模式转变而来。阅读文章 > 欢迎关注「58UXD」的微信公众号：本篇来源：优设网原文地址：https://www.uisdc.com/operation-design
图片 编辑 就能 Hama 如同上次介绍的「Magic Eraser」，让用户上传图片、将画面中不想要的部分抹除，因为这类服务都是使用人工智能 AI 加上机器学习方式训练出更强大的程序辨识能力，会分析标示人物或物品，移除后将附近的颜色补充进来，就会使去除后的相片画面很自然，而且这项服务完全免费，使用者只要打开网站、无须注册就能使用。3秒无痕修图！在线黑科技修图神器 Magic Eraser大家好，我是和你们聊设计的花生~抠图和修图是每个设计师都必须花时间处理的日常工作，它们虽然难度不高，但需要处理的频次不低，所以很多时候我们都会借助智能工具来处理。阅读文章 > Hama 目前支持上传任何尺寸大小的原始图片，不过下载时会将处理后的图片大小限制为 720px，依照网站说明他们正在准备付费 Pro 版本，未来需要付费才能下载高分辨率的图片成果，但好处是没有限制单一图片编辑次数。如果在去除时无法获得较好的效果，不妨重复进行几次，让机器重新辨识效果会更理想（也取决于用户本身图片的复杂性）。Hama网站链接：https://www.hama.app/en使用教学开启 Hama 网站将图片拖曳到网页的虚线方框就能开始使用，Hama 不会将任何图片储存于服务器。接着会看到简易编辑器，使用者需要做的就是从下方调整橡皮擦的粗细，然后标记出想要清除的范围，顺带一提，这张操作范例使用的图片来自 Pixabay，它是一个收录超过 30 万张相片的免费图库。图库两连发！有三十万可商用图片的Pixabay+图片搜索引擎今天这篇源自之前合集里推荐过的一个图库站，最近实际深入使用后，发现它确实是个极佳的图片素材库，不但提供了大量且可以免费使用的照片、向量图和艺术插图，而且都可以自由下载使用，包含商业用途，无须署名。阅读文章 > 举例来说，我想把相片中的 Gogoro 机车移除，就以橡皮擦标示出特定范围，点选下方「Erase」清除。接着 Hama 就会开始分析计算要清除的人物或物品，同时补上可能的背景颜色或样式，看起来就像是变魔术一样直接让 Gogoro 从照片消失（除了没有描绘到的阴影部分）。如果想比较一下原图和去除后的图片差异，点选右上角「Original」切换原图和处理后的图片。一张图片有无限制的编辑次数，若是觉得看起来没有很完美，可进行多次编辑，为了让编辑的流程更快、更顺畅，建议将右上角「Auto」切换为开启状态，就能在每次标示范围后让 Hama 自动分析处理，不用重复点击 Erase 清除按钮。完成编辑后点选右上角「Download」即可下载、保存编辑后的图片。值得一试的三个理由：1. Hama 让用户上传图片、将画面中不想要的部分抹除2. 支持上传任何尺寸的原始图片，不过下载时图片大小限制为 720px3. 不会将图片储存于服务器，可反复进行多次清除没有次数限制又一个抠图神器！完全免费无需注册超好用！当前图片去背工具都设计得相当简单易用，只要将图片上传，就能以机器自动辨识主体和背景范围，快速将背景移除，转为透明背景或是套用特定颜色，像是之前介绍过的 FocoClipping、Designify、BackgroundCut、AI Background Remover 等等去背服务都有类阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/hama
广告
广告
在路上
张大湿
表哥
落霞与孤鹜
飞翔的企鹅
