用户 数据 文章 自 KPI、OKR、AB 实验等理念流入互联网后，长期以来业内的行事准则都是“数据导向”，想必日常工作中你也经常被产品规劝“哎呀～这样做数据一定会好的，不要在乎这些体验细节”，或者你也有过试图说服产品“体验好的话数据就会好呀”，但往往有些时候在项目规划和设计阶段自信满满地认为可以带来数据收益的项目，上线后却不理想，这是为什么呢？本期，我们来说一说项目上线后数据复盘和体感差异的原因。我们先厘清几个概念，体验好、口碑好和数据好。在这里我们暂且先定义「体验好」为项目执行者认为的好体验，诸如减少一步操作、更容易获取关键信息等业内理论上认为的体验好；「口碑好」是项目实际上线后用户的正向反馈；「数据好」是项目上线后观测指标达到或超出预期。如果照这么理解的话，我们通常的思路是「体验好」带来「口碑好」，「体验好」和「口碑好」共同带来「数据好」。接下来我们通过几个案例来详细讲讲实际发生的，不符合模型的情况口碑差，数据好写这个议题的时候，首先映入脑海中案例就是 19 年订阅号的一次改版，改版的主要优化点是把原先进入时为账号列表改为进入文章信息流，如下图所示：从产品设计思路上来讲，用户进入是来消费文章的，原方案用户需要先选账号（文章来源），再选择想要阅读的文章，改版后直接把文章呈现在用户面前，属于设计思路中常见的“减少一步”带来的“体验优化”。然而项目上线后却遭到用户的强烈不满，用户意见诸如：“越改越乱”、“我现在都不知道哪些公众号有多少条消息没看”、“逼着我取消了好几个公众号”，当然，其中也不乏一些赞美之词，但不习惯/不喜欢/体验差的声量还是占据了反馈的绝大部分。在这样的骂声中产品还是坚持这样的方案，想必数据应该给了产品相当大的正向反馈。这是一个理论上体验好，实际上口碑差但数据好的案例。我们将用户反馈进行一些归类处理，就能发现这次数据复盘与体感差异不符的原因。负反馈的用户大多是有深度阅读习惯的用户，习惯是先寻找今日想钻研的领域（对应某个账号），然后一次性地认真阅读吸收文章，改版后对这类用户来说，首页的劣质内容抢占了太多视线，导致寻找合意的文章变得困难。假设一下你是一个历史系的学生，你每天会去学校图书馆里的历史区阅读相关书籍，但你也喜欢看杂志和小说，历史书读累了偶尔也会逛逛其他图书区。现在图书馆突然跟你说，反正你来这里都是看书的，我发现你会看历史书、杂志和小说，我把所有的杂志小说都和历史书混在一起给你，省的你在这些区里走来走去的，你会因为图书馆让你少走了几步而感谢它吗？显然不会，这样你每天读书之前就得先把历史书筛选出来，而筛选历史书的成本远比多走几步路的成本大得多。当然，肯定不是所有人去图书馆都是去读专业书的，也不是所有使用该功能的用户都有深度消费习惯，但是用户对功能的依赖程度不同，导致用户愿意为功能发声的意愿也不同，当深度用户的体验折损远远大于非深度用户的体验升级，带来的必然是负反馈强势碾压正反馈。而为什么数据会好呢？深度文章的生产和消费成本远远大于非深度文章（成本可以理解为需要付出的时间&需要掌握的知识储备），原来先找账号后找文章的方式，用户会主动去寻找深度文章来阅读，而现在是非深度文章占据了首页百分七八十的版面，假设你每天花 100 分钟阅读，阅读一篇深度文章需要 25 分钟，阅读一篇非深度文章需要 5 分钟，那么改版前你每天可以阅读 4 篇文章，改版后你每天可以阅读 20 篇文章，数据这不就上去了？再举例假设，全校 1000 个学生，只有 50 个学生每天泡馆，200 个学生经常去，其他学生比较少只看一类书，甚至有的同学不爱看专业书，觉得去图书馆麻烦就不常去。但是图书馆改版后，所有书你随便抓一本就可以开始看，50 个每天泡馆的学生不爱去了，200 个经常去的学生里 100 也不爱去 100 个觉得差不多，但是剩下 750 个学生里有 600 开始抽空去图书馆看一看了，这图书馆的生意不也好起来了。体验好，数据差我在几年前做过一款国外产品，针对的是非发达国家地区的摩的市场，可以简单理解为国外打摩的软件，用户在软件上呼叫摩的后，摩的师傅来接送你，你需要在软件上输入摩的师傅的号码完成旅程并付款。简单流程示意如下图。当时二维码已经在国内盛行起来了，国内用户已经习惯了使用二维码做任何事，包括付款。我们认为使用二维码会比输入一串数字来说更简便，体验更好，所以决定把输入「摩的的编码」这一步优化为「扫描摩的上的二维码」，并向摩的师傅们发放了专属的二维码贴纸。我们自信满满，觉得这样的优化一定能够带来用户体验的升级，拉新促活不在话下。然而结果却背道而驰，改版后平台成单量显著下降了。我们不得已做了一次当地用户调研和访谈。原来，因为当地经济情况和技术水平都较落后，二维码对当地人来说十分陌生，人们很难下决定通过这样陌生又迅速的行为去执行付款操作。用户对二维码表现出的强烈不安全、不信任感直接影响了用户放弃成单付费。相反，输入数字串（俗称 PIN 码）虽然流程相对繁琐，但对于付款这种慎重的行为，恰好留足了时间做思考和决定。与此相似的案例在国内产品上我又碰到了一次，这次是开设房间时需要对房间设置权限，起初我们的版本是作为选择项，用户开房时可以选择所有人可加入或者只有朋友能加入。有一次，我们觉得这样的设计似乎有些繁琐，只需要一个权限开关就可以了，打开开关就是仅朋友能加入，关闭开关就是所有人都可以加入（这层含义较隐晦，需要用户额外去思考和理解），我们又一次自信满满地上线了。结果又一次与预期背道而驰。第一个例子与第二个例子有一个相似之处，是对用户来说，这都是一个“谨慎的操作”，对于“谨慎的操作”，传统理论上那些「体验好」的方法（更快一点，更简单一点）不太受用，这些「体验好」的设计仅仅只是从行动上帮用户减少了一两步，却没办法帮助用户减少执行行动前的思考。举个例子，你本来需要亲自开飞机空投炸弹，优化到你只需要按一个按钮就可以发射炸弹，对你投炸弹这个行为的影响大吗？不大，因为「要不要投炸弹」在行动前的思考远远复杂于「投炸弹」这个行为。反而可能因为我们有时间在飞机上了解清楚“炸弹”，而没办法在按钮上对“炸弹”有理解，而导致面对着按钮犹犹豫豫，最终放弃。对于复杂且谨慎的行为，设计清楚（帮助用户在思考节省时间）远比设计简单（行动简单了但思考不会简单）来得更重要。体验不好，数据好“我在这里放个按钮/入口！”“这里不符合使用场景呀。”“我知道，但这里流量大（os：我需要流量把我的功能戴起来）”“……”“按钮/入口要设计得大一点，再大一点，颜色要鲜艳的，最好是大红色，能来点动效就更棒了”不知道这样的对话大家熟不熟悉，我早期的职业生涯中经常能遇到这样的项目需求。但往往这样又大又红的设计还总能拿到很好的数据供人吹嘘，明明用过的人都觉得这样的设计体验很不好，为什么却在数据的驱使下越来越猖狂呢？以上图的例子做展开，在这样的需求下，我们可能会被迫做出这样的设计：上线后，项目负责人发了一封邮件：需求上线后「算命」功能使用 pv/uv 上涨显著，证明这是一个合理的需求，非常好的设计，我们要朝着这个方向持续优化！但你真的觉得这是一个合理的需求、好的设计吗？这就是典型的把数据当目标，以片面下结论的情况。首先我们必须明确一点，做需求做设计都是为了更好的体验或服务新的产品阶段，数据只是辅助我们判断有没有达成目标的工具，切莫盲目服务数据。其次，在做需求做设计的时候应有全局观。就以上述所举例子展开，需求的目标应该是在用户想算命的场景提供算命服务，如果我们判断消息页是用户想要算命的场景，那么我们上线后观测的数据除了算命功能的 pv/uv，还需要补充退出率，以及顶部新增算命入口后，对聊天页的折损数据（聊天 pv/uv，收发消息数…），把这些考虑进去我们很可能得到不一样的数据结论：看完真实的复盘后，首先应该能判断消息页不是用户想算命的场景，此时如果你的产品策略不是把这个软件转型成算命软件就可以下掉这里的入口了；如果你正要转型算命软件，非常需要消息页来带量，那么你也能看出来在这里加入口对聊天体验的折损有多大，此时你就得思考一下，「带起来的量」值不值得聊天功能「折损的体验」？如果不值得，你也可以开始考虑换种方式带量了；如果值得，那继续做大做强就没什么问题了，祝福这个产品成为算命一霸。总结项目上线后数据复盘与体验有差异是很常见的，包括但不限于上面所述案例表现出来的原因。总之，还是要牢记数据是工具，不是目标，如果发现数据复盘结果与预期有不符，可以尝试：给用户分层，更细致化地分析用户行为；通过用户调研了解用户真正的使用场景和流程，真正帮用户解决难点而不是“伪体验好”；以及，用更全面的视角、结合更多信息来看待项目是否达成目标。“数据说谎”的现象还有很多，将来再继续讨论。产品用户体验很好可是数据不佳，问题出在哪里？编者按：这篇文章来自 Any.do 的设计师，分享了一些关于 UX设计和产品升级开发的故事。阅读文章 > 欢迎关注作者微信公众号：「白话说交互」本篇来源：优设网原文地址：https://www.uisdc.com/ux-date
线条 方法 画出 Hello~大家好！我是优设手绘班的讲师-橙子（全平台ID@啤酒味的橙子酱）对于刚入门绘画的萌新同学，开笔第一步：画线稿，就是一个万年难题。常因为画线稿慢、反复画线稿等问题，没有更多精力去学其他绘画知识，而感到心有余而力不足。今天我来分享一些练线稿的小技巧、临摹的观察方法，以及结合小案例给大家演示线稿的绘制过程。线条的重要性线稿是所有风格的第一步，无论是什么画风，都需要干净又漂亮的线稿。比如目前热门的描边类插画和国潮插画，具有美感的线条能够让画面呈现出非常好的效果。以下所有的案例，都是在线稿的基础上，进行了上色的细化。1. 描边类型插画：2. 个人小周边：3. 国潮插画：4. 表情包的绘制，也保留了基础的线稿：练线条的方法接下来，分享练线条的方法和技巧，帮助大家整理练习的思路。1. 调整画线的习惯很多同学画不好线条，可能是绘画习惯的问题，比如拿笔的方式，发力的方式等。下面整理一些练习中常出错的地方，大家可以对比看看自己有没有这些问题。① 握笔的手太用力画线条的第一步：要学会正确的姿势，这样才能更顺滑的画出好看的线条。握笔太用力会导致线条非常的僵硬，而且画久了手也会非常累。这里大家需要注意放松手腕，用手腕带动画笔运动，也就是以手腕为支撑点，或者也可以以手肘为支撑点，而不是整个手臂发力。② 反复描线条如果在草稿的找形阶段，我们可以反复的描线条帮助我们定位，但是在最后想画出干净完整的线稿，必须改掉反复描线的坏习惯，用下面这个案例，给大家讲一下草稿与完整线稿的差别。详细对比看看：通过上面的案例，我们会发现在草稿阶段的线条会出现重叠的痕迹，因为我们在利用眼睛找形的时候，会留下的一些反复确定线条位置的痕迹。而在线稿阶段，因为要保留线稿的状态，所以我们需要整理线条，所有的线条要干净利落，不可以出现反复描的痕迹。③ 出笔速度太慢画线条的时候如果画线条的速度太慢，一定会导致线条歪歪扭扭，相反如果我们快速出笔，因为一定的缓冲力反而会让线条更加顺畅。2. 基础线条练习方法① 直线的练习方法直线是最常见的一种线条，一般情况我们可以在 PS 当中运用笔刷，结合 Shift 快速的画出直线，但是难免线条会比较的呆板，这里给大家提供一个简单的绘制直线的练习方法：在固定的区域内尝试绘制不同角度的线条，比如横线、竖线、斜线。在做直线练习的时候，注意线条与线条之间的间距，保持力度均匀，锻炼手稳。如果画错不要用橡皮工具，画完一个再另起一个格子重新练习，这样是为了看到自己进步的过程，刚开始练肯定会出现歪歪扭扭的情况，对于初学者来说都是非常正常的，只要多练都可以让手产生肌肉记忆。除了直线，也可以练习曲线：下面给大家提供一个空白的表格方便大家进行练习：② 连线的练习方法除了常规的直接画线条以外，也可以随意的画出一些不规则的点，能增加练线的趣味性。具体方法如下图：相同的点状分布也可以画出不同的线条走势，大家可以根据自己的感觉来练。临摹线稿的方法临摹学习也是初学者常用的练习方法，但是往往因为抓形不准，导致最后画出来的效果和原图差别太大。这时候可以运用以下几个方法结合观察，帮助我们把造型画得更加准确。1. 找参照点找参照点的方式类似画格子，但是不建议大家直接使用过多 PS 的标尺，比如这样：注意：不建议长时间使用这个方法，容易对工具产生依赖性。我们需要学会的是用眼睛观察，在心里画格子。前期练习做不到用眼睛观察，可以少量的拉一些线条帮助观察，参考线可以放在一些有具体区域的位置，比如用来大概确定头部的高度，切记不可用太多哦。2. 运用负空间检查造型什么是负空间呢，这里直接看一张图片就可以理解：以上案例黑色区域为负空间，除了大块的正负，里面的细节也可以分出详细的正负空间。理解什么是负空间之后，就可以利用负空间来检查形准了，一般画出线稿之后，可以检查负空间的面积，或者是线稿产生的角度，以此对比和原图之间的差异。这里我们可以先看线稿部分和临摹原图的造型对比，会发现好像没什么大问题。接下来检查负空间：通过左右两张图的红色区域（负空间）对比，就会发现右侧没有画正确的地方。3. 几何形概括大部分的插画都可以用基础的几何形归纳，基础的几何形分为：圆形、三角形、方形。运用几何形归纳相当于帮助我们简化造型，同时检查线稿存在的问题。根据原图可以分析出画面的几何形，在绘制线稿的时候，注意找一些几何形，帮助我们分析提炼造型。插画线稿绘制过程演示第一个小案例用植物来演示过程。动笔之前可以先分析一下：照片中的花能用什么几何形来概括，也可以画一下负形的轮廓，方便后期画完线稿，检查自己的形准。当然负形也是可以用眼睛对比观察，刚刚开始会有难度，多多练习就可以用眼睛找准位置了。分析完之后，可以开始用铅笔画出大型，注意这个时候多用弧线、长线，帮助我们找形。画好粗略的草稿之后，就可以整理更干净的草稿了，在画最后草稿的时候，可以根据最终想要的风格选择笔刷，这里我依旧用的还是铅笔笔刷，画的时候注意花瓣的穿插关系。第二个案例运用国潮锦鲤演示过程。国潮小案例可以在照片的基础上做一些改动，比如加入一些细节或者夸张，锦鲤的鱼鳍和尾巴可以夸张画得更大，体现出流动感，身体的弯曲角度也可以更加明显，借鉴照片的时候，大家只需要借鉴大概的动作就可以了。草稿阶段依旧使用铅笔笔刷画出大型，注意线条多用长线概括形体。画出大型后就可以新建图层开始整理线稿了，因为国潮的最终效果需要保留线稿，这里使用「硬边圆笔刷」勾出线稿，需要注意线条干净利落，注意线条之间的衔接。画完最终线稿之后，如果想处理材质效果，可以加上金箔的质感，提升完成度。文章到此就结束啦！画线是每个绘画者的基本功，希望大家在空闲时间，能够拿出手中的纸笔，或打开iPad、PS 练一下，争取减少画线精力，去学人体结构、配色方法等绘画系统知识，让自己的画技更上一层楼！如果你觉得自学摸索困难，耗费了太多时间精力，也没能系统掌握画画技能。可以来参加「优设手绘就业衔接班」。我们教你掌握大厂非常欢迎的插画风格，人物、场景、配色、商稿流程都有！ 而且上手快，无需手绘板，零基础也能学，Mac/Win/iPad 都能学！更多手绘班的详情，请添加我同事 V 信 uisdc2 或 uisdc37 个常用手绘技巧！每个都能让效率翻倍！Hello~大家好，我们是优设手绘就业衔接班的讲师橙子和阿森今天我们俩来分享一些画画小技巧，看起来好像挺简单，但是学会就能节约大把时间哦！阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/hand-painted-practice
图层 滤镜 透视 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
在路上
张大湿
表哥
落霞与孤鹜
飞翔的企鹅
