你可能忽略掉的Sketch使用技巧
Sketch毕竟没有什么学习曲线，颇易上手，相应的也时常导致新手在一开始就忽略掉一些重要的、高频的使用小技巧，而将一些稍许费力耗时的方式一路沿用下去。这篇内容所针对的便是这样的情况。几乎没有进阶的要点，只针对初学的同学培养正确习惯，还望各位老司机们见谅。下面进入正文。关于对象、图层、画板的使用技巧1. 通过快捷键调整图形的形状选中图形，按住 Command 键，然后通过上、下、左、右方向键即可按1像素为单位调整图形形状。同时按住 Command + Shift + 方向键，则可以按10像素为单位进行调整。2. 复制元素选中某元素，按 Command + D 即可进行复制；复制出的新元素默认与原有元素的位置相同，且覆盖于原有元素之上。此外，按住 Option 健，同时拖拽目标元素，同样可实现复制；保持复制出的新元素仍处于选中态，并连续使用 Command + D 快捷键，即可按照之前手动拖拽的距离为间隔单位实现多重复制。3. 智能选择按住 Option 键，面向多个元素拉选择框，最终只有完全处于选择框内部的元素会被选中，而其他元素会被忽略。4. 分组与解组选中多个元素，按 Command + G 将其合并为一组。选中某个组，按 Command + Shift + G 则可实现解组。5. 组内单选要选中某分组内的特定元素，无需到图层列表中寻找，按住 Command 键，同时用鼠标直接指向该元素，即可“穿透”分组，直接选中元素。6. 将画板的缩放比还原为100%按 Command + 0，即可快速将画板的缩放比还原为100%。7. 调整缩放比，使所有的画板得以同屏呈现按 Command + 1，即可快速将画板调整为恰当的缩放比，所有的画板得以同时呈现在视图当中。8. 使视图聚焦于选中的元素按 Command + 2，即可将编辑区域的视图焦点快速移至处于选中态的元素或画板。9. 将元素置于图层序列的首位或末位按住 Option 键，Sketch顶部工具栏里的“向前(Forward)”、“向后(Backward)”按钮会自动变为“最前(To Front)”、“最后(To Back)”，即可使选中的元素排列到图层序列的首位或末尾。10. 重命名图层选中某元素，按 Command + R，该元素在图层列表中的条目即进入可编辑状态，此时输入新的图层名称即可。关于元素的编辑与导出1. 测量元素间距选中一个或多个元素，按住 Option 键，同时将鼠标指向要测量间距的目标元素。在移动元素时，也可同时按住 Option 键，即可在移动过程中即时查看元素距离特定元素或画板边缘的距离。2. 通过数字键设置元素的不透明度选中元素，然后按一个或一组数字键即可直接设置其不透明度 (alpha 值)，例如“1”代表10%，“5”代表50%，“9”代表90%，“75”代表75%，等等。3. 单独调整某个位置上的圆角半径你可以为元素的四角独立设置不同的圆角半径。选中该元素，在右侧面板的“半径 (Radius)”当中输入一组四个数字，由分号隔开，分别代表左上角、右上角、右下角、左下角的半径值，例如“10;20;30;40”。4. 订制快捷键你可以为自己常用的 Sketch 功能设置快捷键。进入 macOS 的系统偏好设置 – 键盘 – 快捷键，选择左侧列表中的“应用快捷键”，点击右侧的“+”按钮，在对话窗口的“应用程序”列表中选择 “Sketch”，在“菜单标题”中输入你所需的功能在 Sketch 菜单栏里的准确名称，然后设定自己的快捷键组合即可。5. 在属性检查器中使用数学运算符Sketch 可以在右侧检查器面板的文本框当中执行数字运算。例如你想将当前矩形的宽度翻倍，那么可以在“宽度 (Width)”当中的数字后面输入“*2”，代表“乘以2”。6. 复杂图形对于一些复杂的图形，例如多边形或星型，可以在右侧检查器面板中设置边 (Sides)或顶点 (Points)的数量。7. 旋转复制（万花筒效果）在 Sketch 的工具栏上右键单击，选择“订制工具栏 (Customize Toolbar)”，然后将“旋转复制 (Rotate Copies)”按钮拖入工具栏。选中某元素，点击“旋转复制”按钮，输入需要复制出的元素数量，点击“OK”即可。8. 切片切片工具 (快捷键“S”)可以拖拽出矩形区域，供你导出图形。但导出区域未必要覆盖到元素或画布整体，你可以把切片作为一种灵活的截屏工具进行使用。9. 导出元素、分组或画板选中某个元素、分组或画板，在右侧检查器面板的底部点击“Make Exportable”，在展开的选项单当中选择导出规格、文件名后缀和文件格式，即可开始导出。10. 导出高分辨率素材我们在设计界面时通常会按照字面意义的像素规格来设置画板 (1x规格)，例如使用375×667的画板来设计4.7寸规格的界面。但你需要面向高像素密度的屏幕导出画板或局部素材 – 在“Make Exportable”选项单的“Size”当中输入“2x”或更高值即可。或者你也可以直接在这里输入所需导出的具体规格，例如“750px”等等。关于 symbols1. 通过 symbols 实现元素复用怎样判断是否要使用 symbols？答案在于目标元素的复用性。symbols 就像邮戳，制作了一个之后便可以反复使用。在 Sketch 中，当你修改了主 symbol，所有来自于该 symbol 的实例对象都会被自动更新，这能使设计稿的迭代效率得到极大提升。2. 创建 symbol通过 symbols 将复用率较高的设计模式进行打包。举例来说，我们现在有一个卡片组件，其中包含一个圆形图片、一段文字描述以及一个按钮。完成布局设计，将它们打包成组，然后在工具栏中点击“Create Symbol”按钮即可。3. 通过属性覆写 (overrides) 对symbol进行订制譬如我们将一个卡片模式打包成为symbol，在日常使用时通常需要在不修改主symbol的前提下更改每个实例当中的具体属性值，例如图片、文字等等。属性覆写功能 (overrides) 就是用来解决这个问题的。将symbol插入到画板当中，保持选中态，右侧检查器面板当中会出现“Overrides”选项单。下图所示的范例共包含4项可覆写文本字段，你只需在这里进行修改，便能使该symbol衍生出的每一个实例对象都体现出不同的内容。4. 创建symbol之前，对图层进行重命名为了使可覆写的属性在检查器面板当中呈现出恰当的属性名，例如“姓名”、“职能”等等，而不是在创建symbol时所使用的特定范例内容，你可以在打包创建symbol之前对图层进行重命名，使其与最终希望呈现出的属性名称一一对应。5. 为特定的元素禁用属性覆写symbol当中并非每一个元素都需要支持覆写功能，譬如那些永远不会发生内容变动的属性。如果不想该属性出现在symbol的检查器面板当中，只需在创建symbol之前在图层列表当中将该图层锁定即可（锁型图标）。6. symbols嵌套“设计模式”当中本就包含着多层次的概念，这同样能体现到symbol的实现方式里。譬如我们首先定义了一个全局通用的按钮symbol，然后我们还需要一个全局通用的工具栏symbol，而这个工具栏当中又会用到刚刚定义的按钮，这时我们便可以将按钮symbol插入到工具栏当中，并一同打包创建为新的symbol，实现嵌套。如果按钮symbol得到样式更新，那么工具栏symbol当中的按钮样式便可自动更新。7. symbols的尺寸可变你可以随意调整symbols实例对象的尺寸，而不用受制于symbol本身的规格。不过一旦将来主symbol的尺寸发生变化，所有实例都将统一更新为新的尺寸样式，而忽略掉你之前所做的调整。8. 从symbol中分离要将某实例对象从原本的symbol当中分离 (譬如要基于该symbol的布局设计更为复杂的模式时)，在该对象上右键单击，选择“Detach from Symbol”，这将使实例变为普通的图层组。原文地址：/blog/sketch-tips-maximize-productivity-objects-layers-artboards，作者：Patrick Multani译者：C7210，交互设计师、UX设计热爱者、VR探索者、译者、猫奴、吉他手、鼓手，现就职于腾讯上海译文地址：微信公众号【Be For Web】
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
网友热评的文章你可能忽略掉的Sketch使用技巧
你可能忽略掉的Sketch使用技巧
上帝计划的大梦想
Sketch毕竟没有什么学习曲线，颇易上手，相应的也时常导致新手在一开始就忽略掉一些重要的、高频的使用小技巧，而将一些稍许费力耗时的方式一路沿用下去。这篇内容所针对的便是这样的情况。几乎没有进阶的要点，只针对初学的同学培养正确习惯，还望各位老司机们见谅。下面进入正文。关于对象、图层、画板的使用技巧1. 通过快捷键调整图形的形状选中图形，按住 Command 键，然后通过上、下、左、右方向键即可按1像素为单位调整图形形状。同时按住 Command + Shift + 方向键，则可以按10像素为单位进行调整。2. 复制元素选中某元素，按 Command + D 即可进行复制；复制出的新元素默认与原有元素的位置相同，且覆盖于原有元素之上。此外，按住 Option 健，同时拖拽目标元素，同样可实现复制；保持复制出的新元素仍处于选中态，并连续使用 Command + D 快捷键，即可按照之前手动拖拽的距离为间隔单位实现多重复制。3. 智能选择按住Option 键，面向多个元素拉选择框，最终只有完全处于选择框内部的元素会被选中，而其他元素会被忽略。4. 分组与解组选中多个元素，按 Command + G 将其合并为一组。选中某个组，按 Command + Shift + G 则可实现解组。5. 组内单选要选中某分组内的特定元素，无需到图层列表中寻找，按住 Command 键，同时用鼠标直接指向该元素，即可“穿透”分组，直接选中元素。6. 将画板的缩放比还原为100%按Command + 0，即可快速将画板的缩放比还原为100%。7. 调整缩放比，使所有的画板得以同屏呈现按Command + 1，即可快速将画板调整为恰当的缩放比，所有的画板得以同时呈现在视图当中。8. 使视图聚焦于选中的元素按Command + 2，即可将编辑区域的视图焦点快速移至处于选中态的元素或画板。9. 将元素置于图层序列的首位或末位按住Option 键，Sketch顶部工具栏里的“向前(Forward)”、“向后(Backward)”按钮会自动变为“最前(To Front)”、“最后(To Back)”，即可使选中的元素排列到图层序列的首位或末尾。10. 重命名图层选中某元素，按 Command + R，该元素在图层列表中的条目即进入可编辑状态，此时输入新的图层名称即可。关于元素的编辑与导出1. 测量元素间距选中一个或多个元素，按住 Option 键，同时将鼠标指向要测量间距的目标元素。在移动元素时，也可同时按住 Option 键，即可在移动过程中即时查看元素距离特定元素或画板边缘的距离。2. 通过数字键设置元素的不透明度选中元素，然后按一个或一组数字键即可直接设置其不透明度 (alpha 值)，例如“1”代表10%，“5”代表50%，“9”代表90%，“75”代表75%，等等。3. 单独调整某个位置上的圆角半径你可以为元素的四角独立设置不同的圆角半径。选中该元素，在右侧面板的“半径 (Radius)”当中输入一组四个数字，由分号隔开，分别代表左上角、右上角、右下角、左下角的半径值，例如“10;20;30;40”。4. 订制快捷键你可以为自己常用的 Sketch 功能设置快捷键。进入 macOS 的系统偏好设置 – 键盘 – 快捷键，选择左侧列表中的“应用快捷键”，点击右侧的“+”按钮，在对话窗口的“应用程序”列表中选择 “Sketch”，在“菜单标题”中输入你所需的功能在 Sketch 菜单栏里的准确名称，然后设定自己的快捷键组合即可。5. 在属性检查器中使用数学运算符Sketch 可以在右侧检查器面板的文本框当中执行数字运算。例如你想将当前矩形的宽度翻倍，那么可以在“宽度 (Width)”当中的数字后面输入“*2”，代表“乘以2”。6. 复杂图形对于一些复杂的图形，例如多边形或星型，可以在右侧检查器面板中设置边 (Sides)或顶点 (Points)的数量。7. 旋转复制（万花筒效果）在Sketch 的工具栏上右键单击，选择“订制工具栏 (Customize Toolbar)”，然后将“旋转复制 (Rotate Copies)”按钮拖入工具栏。选中某元素，点击“旋转复制”按钮，输入需要复制出的元素数量，点击“OK”即可。8. 切片切片工具 (快捷键“S”)可以拖拽出矩形区域，供你导出图形。但导出区域未必要覆盖到元素或画布整体，你可以把切片作为一种灵活的截屏工具进行使用。9. 导出元素、分组或画板选中某个元素、分组或画板，在右侧检查器面板的底部点击“Make Exportable”，在展开的选项单当中选择导出规格、文件名后缀和文件格式，即可开始导出。10. 导出高分辨率素材我们在设计界面时通常会按照字面意义的像素规格来设置画板 (1x规格)，例如使用375×667的画板来设计4.7寸规格的界面。但你需要面向高像素密度的屏幕导出画板或局部素材 –在“Make Exportable”选项单的“Size”当中输入“2x”或更高值即可。或者你也可以直接在这里输入所需导出的具体规格，例如“750px”等等。关于symbols1. 通过 symbols 实现元素复用怎样判断是否要使用 symbols？答案在于目标元素的复用性。symbols 就像邮戳，制作了一个之后便可以反复使用。在 Sketch 中，当你修改了主 symbol，所有来自于该 symbol 的实例对象都会被自动更新，这能使设计稿的迭代效率得到极大提升。2. 创建 symbol通过symbols 将复用率较高的设计模式进行打包。举例来说，我们现在有一个卡片组件，其中包含一个圆形图片、一段文字描述以及一个按钮。完成布局设计，将它们打包成组，然后在工具栏中点击“Create Symbol”按钮即可。3. 通过属性覆写 (overrides) 对symbol进行订制譬如我们将一个卡片模式打包成为symbol，在日常使用时通常需要在不修改主symbol的前提下更改每个实例当中的具体属性值，例如图片、文字等等。属性覆写功能 (overrides) 就是用来解决这个问题的。将symbol插入到画板当中，保持选中态，右侧检查器面板当中会出现“Overrides”选项单。下图所示的范例共包含4项可覆写文本字段，你只需在这里进行修改，便能使该symbol衍生出的每一个实例对象都体现出不同的内容。4. 创建symbol之前，对图层进行重命名为了使可覆写的属性在检查器面板当中呈现出恰当的属性名，例如“姓名”、“职能”等等，而不是在创建symbol时所使用的特定范例内容，你可以在打包创建symbol之前对图层进行重命名，使其与最终希望呈现出的属性名称一一对应。5. 为特定的元素禁用属性覆写symbol当中并非每一个元素都需要支持覆写功能，譬如那些永远不会发生内容变动的属性。如果不想该属性出现在symbol的检查器面板当中，只需在创建symbol之前在图层列表当中将该图层锁定即可（锁型图标）。6. symbols嵌套“设计模式”当中本就包含着多层次的概念，这同样能体现到symbol的实现方式里。譬如我们首先定义了一个全局通用的按钮symbol，然后我们还需要一个全局通用的工具栏symbol，而这个工具栏当中又会用到刚刚定义的按钮，这时我们便可以将按钮symbol插入到工具栏当中，并一同打包创建为新的symbol，实现嵌套。如果按钮symbol得到样式更新，那么工具栏symbol当中的按钮样式便可自动更新。7. symbols的尺寸可变你可以随意调整symbols实例对象的尺寸，而不用受制于symbol本身的规格。不过一旦将来主symbol的尺寸发生变化，所有实例都将统一更新为新的尺寸样式，而忽略掉你之前所做的调整。8. 从symbol中分离要将某实例对象从原本的symbol当中分离 (譬如要基于该symbol的布局设计更为复杂的模式时)，在该对象上右键单击，选择“Detach from Symbol”，这将使实例变为普通的图层组。
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
上帝计划的大梦想
百家号 最近更新：
简介: 数字化评价，网络信息！
作者最新文章sketch文本框不能贴合文字，要怎么调？？？ - 知乎6被浏览1435分享邀请回答0添加评论分享收藏感谢收起与世界分享知识、经验和见解「冷知识」Sketch 还能这样操作？！ - 知乎专栏
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"title":"「冷知识」Sketch 还能这样操作？！","author":"yuxuan-zhu","content":"简评：告诉你几个 1.可以提高你的工作效率；2.绝对简单直接；3.没什么人知道；4.（最重要的一点） 可以在同事朋友面前秀操作的关于 Sketch 的几个冷知识。请点击图下的链接看动图。1.拖拽图片自动填充这是我所知道的最快的填充图片的方法。具体操作方法: 选中你要填充的一个 shape，点击 fill，然后把你想要的图片直接拽进去，搞定。2.拖拽修改 Symbol 中的图片想不到原来可以这样吧，这是最快的修改 Symbol 中的图片的方法。具体操作方法： 选中你想要修改的带图片的 Symbol，然后把图片拖拽到 「Choose Image」旁边的小窗口中。3.修改图片大小的同时保持文字排序正常Resize 这个新功能可能大家都被安利过好几次了，对我而言它在这时候显得最有用。具体操作方法： 添加一张图片，添加一行和图片宽度相同的文本框，将它们编为一组，然后将它们都设置为 Resize object。这样你图片下面的文字就会自动地适应图片的大小并且保持自己和图片的距离、各文字之间的距离不变了。4.将元素拖拽到微信或 QQ 或 Slack 中并发送原来可以这样操作！妈妈再也不用担心我截图截得整个桌面都乱七八糟的了！具体操作方法： 直接拖拽一个图层，一个组，甚至一整个画板到微信或 QQ 或 Slack 等其他一些聊天窗口中并发送。（注：gif 中使用的是 Slack，但笔者实测 QQ、微信等均支持这样的操作，这个操作相当于让 Sketch 直接输出一张 png 格式的图片，真是一个非常好的设计！）5.根据路径排列文字这个有点儿老套，以前上学的时候老师用 PS 教过无数回，然而在 Sketch 里面，这个效果要怎么做呢？具体操作方法： 用钢笔或者其他什么工具先画出一条路径，选中文字之后点选菜单栏上的 Type --& Text on Path，然后把文字拽到刚刚准备好的路径上面，BOOM！一天光嗮！这个方法能让你以最快的方式对文字的样式进行修改，从字体到插入 emoji 都能在这里完成，再也不用忍受 Sketch 里面那小得不能再小的面板了！具体操作方法： 双击选中文字，让文字进入高亮状态（具体情况请看 gif，单单选中文字图层是不行的。）在菜单栏里面选择 View --& Show Fonts，一切就在你眼前，当需要挑选字体的时候这个窗口真的比 Sketch 里面的小 dropdown 好太多了。如果你需要对文字进行更加细致的设置，请点击窗口左上角的小齿轮 Icon，各种详细设置肯定能高效地满足你所有的需求。6.批量复制与排列没人喜欢重复的工作，我们设计师只喜欢发明创造好吗？这个功能可以让你一键复制并将所有卡片按照你想要的样子排列，一切都是那么井井有条，尽在你的掌控之中。具体操作方法： 选中你想要批量复制并排列的对象，然后在顶部的工具栏里面找到 Make Grid。好吧我知道你找不到，因为 Sketch 默认不会把这个那么好用的功能随便放出来给你，要不怎么叫冷知识呢？设置好你想要的数量和他们之间的间距，一切不要来的太简单。原文地址：欢迎关注知乎专栏「」，每天为 Makers 导读三篇优质英文文章；个人专栏「」爱技术，爱设计；我的追波：","updated":"T02:14:09.000Z","canComment":false,"commentPermission":"anyone","commentCount":4,"collapsedCount":0,"likeCount":46,"state":"published","isLiked":false,"slug":"","lastestTipjarors":[],"isTitleImageFullScreen":false,"rating":"none","titleImage":"/v2-cb119aa776add0da550915_r.png","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"设计"},{"url":"/topic/","id":"","name":"Sketch"},{"url":"/topic/","id":"","name":"教程"}],"adminClosedComment":false,"titleImageSize":{"width":800,"height":380},"href":"/api/posts/","excerptTitle":"","column":{"slug":"designcoder","name":"DesignCoder"},"tipjarState":"activated","tipjarTagLine":"真的不用打赏了","sourceUrl":"","pageCommentsCount":4,"tipjarorCount":0,"annotationAction":[],"snapshotUrl":"","publishedTime":"T10:14:09+08:00","url":"/p/","lastestLikers":[{"profileUrl":"/people/pao-pao-chi-chi","bio":"ui设计师","hash":"39751c6cacfdbdb1a4989bbed830e2b6","uid":016900,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"pao-pao-chi-chi","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"name":"跑跑驰驰"},{"profileUrl":"/people/hh0592821","bio":"产品设计
旅行社交","hash":"f82e2b5f8ddbc83d62ae37c","uid":88,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"hh0592821","avatar":{"id":"b0103a4ba","template":"/{id}_{size}.jpg"},"name":"黄鸿"},{"profileUrl":"/people/jas-33-75","bio":"来生化作一只猫","hash":"dde44da4e6","uid":794100,"isOrg":false,"description":"listener","isOrgWhiteList":false,"slug":"jas-33-75","avatar":{"id":"v2-b826d1d18f14ff53daa9313cba4a3f5a","template":"/{id}_{size}.jpg"},"name":"Jas"},{"profileUrl":"/people/zhang-rong-30","bio":"","hash":"ea7f81dc1fd9456b0cfe9ba058fcec8e","uid":00,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"zhang-rong-30","avatar":{"id":"ba103fe55","template":"/{id}_{size}.jpg"},"name":"张荣"},{"profileUrl":"/people/zhou-dong-dong-88-96","bio":"UI设计师（半桶水摄影师）","hash":"3ba819a0abdda2f500d7aea","uid":388000,"isOrg":false,"description":"","isOrgWhiteList":false,"slug":"zhou-dong-dong-88-96","avatar":{"id":"b6bf9096c39dab101f50c19f","template":"/{id}_{size}.jpg"},"name":"周冬冬"}],"summary":"简评：告诉你几个 1.可以提高你的工作效率；2.绝对简单直接；3.没什么人知道；4.（最重要的一点） 可以在同事朋友面前秀操作的关于 Sketch 的几个冷知识。请点击图下的链接看动图。1.拖拽图片自动填充这是我所知道的最快的填充图片的方法。具体操作方法:…","reviewingCommentsCount":0,"meta":{"previous":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"/v2-92c76b185e72da0b03ec19_r.png","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"设计"},{"url":"/topic/","id":"","name":"产品设计"},{"url":"/topic/","id":"","name":"交互设计"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"profileUrl":"/people/yuxuan-zhu","bio":"UX/Motion Designer | 知乎专栏「DesignCoder」","hash":"6293dbc6a4cbc839ecafef7a","uid":441300,"isOrg":false,"description":"专栏：/designcoder\n追波：/Zhuyuxuan\n博客：http://zyxscientist.github.io/\n\n本人并没有委托“维权骑士”（）为我的文章进行维权。 ","isOrgWhiteList":false,"slug":"yuxuan-zhu","avatar":{"id":"v2-62d8213c46ffa62c336e3f2f9b7b1f56","template":"/{id}_{size}.jpg"},"name":"PeterZ"},"column":{"slug":"designcoder","name":"DesignCoder"},"content":"很久以前，大家还不怎么专门谈用户体验的时候，关于如何设计出一款好用的产品，大家基本只能靠猜。没有参照，也没有数据，那时候的设计师们凭借着自己的直觉、品味以及知识来设计一切。时过境迁，现在大家都非常重视用户的体验，也有越来越多的人参与了进来，建立了更加具体的知识体系，而更更重要的是，我们学会了用数据来“量度”体验。即便用户不去app store进行评论，我们也能够获得非常详细而且具体的数据。海量的数据在加以分析之后让我们知道用户是否喜欢我们最新的功能、读没读我们的广告、按钮位置改了之后用户找不找得到。自此，设计师们在开始在一些情况下不再需要纯靠猜。不过，尽管有了这牛逼哄哄的数据驱动设计法，用户体验还有太多太多的范畴无法用数字去量度，设计师们还面对太多不确定的东西，很多问题大家也都没有个定数，方案孰优孰劣也无法很好地判断，它不像物理或者化学这类量化科学，是和不是分得很清。更要命的是，看起来非常科学的数据分析法得出的结论却与大家原本预期的东西大相径庭，让人不敢相信，觉得一定是数据收集的时候搞错了点东西。又有些时候，我遵循数据的指导作出改变，但最后获得的回报却不尽如人意，用户体验这东西在一些时候表现得像玄学。那么，用户体验到底是不是一门玄学？如何使用数据切实有效地帮助设计师们透过问题看本质，更客观更科学地设计我们的产品？1.首先要理清“度量”和“体验”之间的关系。聪明的人们学会了使用收集用户的各种数据并尝试用这些数据来理性地量化”体验”。可是，有些人认为用户体验这东西就像照相机的镜头一样，有些人说：“这款镜头好，毒！德味！”可是有些人又说：“怎么有点偏绿蓝啊，是我眼睛不好还是你镜头不好啊？”认为用户体验是无法度量的，是无法量化的。可有些人，甚至有些公司又坚定地践行数据驱动设计，他们坚信用户体验也是可以量化的，从用户的行为表现、各种反馈可以看出用户体验的好与坏，对设计本身的整个过程也有指导意义。其实，我们本身就不应该将度量和体验放在两个对立面来看。诚然，用户体验这个命题实在是太大，设计的范畴非常广阔，很多确实没办法（或者说目前没有办法）依靠数据来度量。尽管如此，数据还是非常之重要的，今时今日，还是想着完全抛弃数据，仍旧依靠个人品味和喜好来进行设计，未免显得太过老套而且落伍。做设计，数据不是万能的，没有数据却是万万不能的，但是利用数据来驱动设计的必要条件是，你能判断出那些数据对于你的目标来说是重要的，哪些数据对于你的目标来说是不重要甚至是有害的。假如你的设计为用户解决了问题，带来了价值，体验很棒，那么那些能够从侧面或是正面反映出你的体验是良好的数据肯定会有所增长。反过来看，假如你在这版的更新修改了以前的陈旧的设计，用上了时下最新潮的样式，可是数据却告诉你我们的用户越来越不爱打开我们的应用了，那相信你也很难说这是一个好的设计，尽管这个设计你po到追波上面被点了一万次赞。数据不会像设计师一样，不会给你指出哪儿哪儿有一个像素的偏差，但是却能从宏观的角度来对你的设计进行更加具有现实意义的评判。更重要的是，数据能够避免让整个设计团队陷入不自知的迷惘与混乱之中，让整个团队知道现在首要的目标是什么，并朝着那个目标进发。譬如说，你们团队有20人，20个人人人都是那么的优秀，人人都有自己的想法，设计师们，你懂的，都觉得自己的想法是最棒的，有时候真的会陷入一种无端的固执之中，如果20个人每个人都是这样，听不进去别人的话，一味依靠自己的主观意识否定别人的设计，那么整个团队就会陷入到上述的不自知的迷惘与混乱之中。有些团队的解决办法是折中处理，每个人的设计都抽取出一些亮点，最后糅合成一个新的东西，不得不说这是一种还算ok的办法，在技术水平良好的团队里面这叫集思广益，在技术水平偏低的团队里面这叫和稀泥，没人能够保证那些亮点本身是一个足够好的设计，更没人能够保证这些设计集中在一起能出来一个什么样的东西。所以面对这些问题，最好的办法还是靠数据分析来度量，设计好了，体验好了，数据上涨，那我们就判定这是一个好的设计。这里的判定或许不能非常准确地说明这就是一个好的设计，但是总好于团队像无头苍蝇一样不知道要飞去哪里。有一个数字摆在那里，大家的目标会变得明确很多，劲头也更能往一处使。所以说，试图度量用户体验是有益的，但是不要期望这样的度量能够精细地指导设计应该怎么走，我们只能从比较宏观的角度要得到问题的反映，怎么去辨识对于度量用户体验是有益的数据，怎么将它们抽取出来然后得出有用的结论，是更重要的事情。体验与度量并不是敌对的，用户体验固然也不是玄学。2.当然了，太过追求量化也会带来害处数据固然必不可少，但是正如水喝多了也会中毒一样，数据多了也不一定能够正确地反映问题，将我们带向不一定正确的方向。因为我们能够获取到的数据是海量的，用户的行为表现、评论反馈、社区反映甚至公司业绩，我们并不能保证每个数据都是有益于我们做出一些决定的。并且，单纯的数据是非常单薄的，设计师们看不到也想不到背后的来由。如果我们选错了要观察的的数据，那么设计可能从一开始就已经错了。举个例子：a)”原本用户每次打开都要要花上5分钟在我们的app上面，这次改版之后变成了3分钟，我是不是做错了什么？”是不是你的错？首先你要问自己，用户的停留时间对于你的产品来说是重要的吗？假如你是社交类，或者是内容类应用，那么当然重要了，用户在这类产品内花的时间越多，越说明你能够为用户提供有价值的东西。但是假如你的产品本身就是一个工具类app，譬如支付宝，你最好还是不要去量度用户的停留时间，支付宝本身是一个支付工具，用户如果能够在更短的时间内完成自己的任务那当然用户的提留时间数据上面的下滑对于你来说就是一件好的事情，用户用更短的时间完成了要完成的任务，这个体验很棒。现在支付宝要做社交，在这个时候，支付宝的设计师们也肯定要开始留意用户停留时间这个数据了，我们也是能频频看到他们在这方面的努力，虽然这个过程是非常痛苦的。3.还有，有些东西确实是无法量度的相信每一个干设计的人都会想过跑到用户脑子里面去看看用户到底想要什么，可惜这个并不能实现，因此我们希望用一些数字来量度我们的设计。然而上文已经说过，用户体验这东西命题比较大，可能有些范畴确实无法度量或者说目前没办法度量。譬如说：对于你的产品或者说是里面某个功能特性，用户喜欢/讨厌到了什么程度。从长远看，你做出的一些变化是不是真的提高了用户解决问题的效率，为用户带来了价值你的产品要简单到了什么程度对于用户来说才算是简单对于同类竞品，用户是怎么评价你和他们之间的区别的什么东西是用户迫切需要你改变/添加/修复的一段时间过后，用户为继续使用你的产品的动机是啥？这一次的改版有没有让我们的品牌展现更进一步？也许你会说上面的东西发个问卷不就可以收集到数据了，并不是完全不能衡量，但即便是所有用户都认真地填写了你的问卷，得回来的数据也并不能很直接地反映问题。某些东西无法量化，数据驱动这个新潮概念有时候会辜负了我们的期望，数据不是万能的。1.复杂性：这里给一点典型的例子，每次你在app里面添加一个全新的功能，那么使用这个功能的人在数据上的体现一定是增加的，没人能够在你这个功能出来之前就使用上了这个功能。数据上呈现的增加总是让设计师们感觉非常良好，使用率直线上升、社区反馈一篇大好、似乎每个人期待着这个功能。但是这些数据是具有一定的欺骗性的，想想Photoshop之于Sketch，PS历史悠久，体量庞大，功能非常强大，但是做UI的同学就是喜欢用Sketch，喜欢Sketch的简单直接于高效。每次PS更新的新功能，大家都非常的期待，反馈也都非常好，那为什么到最后越来越多的设计师还是投向了Sketch了呢？这个例子想要表达的是，我们目前为止并没能够很好的去测量复杂度的上升对于用户认知负担之间的关系。2.品牌的力量：就算现在Android在各方面的性能以及追上甚至赶超了iOS，就算每次苹果发布新产品的时候都会被吐槽一番，但是人们最终的选择可能还是一台搭载iOS系统且售价比同级别Android手机高上一倍的苹果手机，这或许就是品牌的力量。大厂里面的童鞋感受可能比较深，产品的用户数总是非常多，“到底是劳资设计牛逼，还在是我司流量的荫护之下，才显得我辣么牛逼咧？”关于你的一些决定会如何影响品牌，而品牌又将如何影响你，数据都无法给你一个准确的答案。3.未来发展：没有哪项数据能告诉你未来的设计应该要怎么去做。2008年的时候，智能手机方兴未艾，移动互联网势头尚未如此之强大，以前人们逛淘宝都是用的电脑，但是现在很多店铺都能录得百分之八九十甚至是接近百分之一百的移动端浏览记录。08年的时候，移动端的浏览占比是稀少的，所以很多网站并没有专门针对移动端进行优化设计，连自适应的不会有（目前很多网站依然没人），设计师们看到来自移动端的访问量如此之少，就不会去针对移动端进行设计。但是如果摆到现在，移动端迅猛的发展带来的利益大到人们无法想象的当下，几乎每款产品都要针对移动端作大量而且细致的优化。单纯依靠数据我们无法预判未来发展的方向，无法预判明天用户需要些什么，那么关于未来发展的方向，我们是不是就不太好用数据来表达了？这个时候用户体验工作又需要依靠设计师个人的品味、眼界以及知识来行进了。分享一些关于量化用户体验的建议多留意用户的存留率。不要太过在意你的产品或者是某几个功能的用户数（这通常会跟你们推广的力度有比较大的关系。）你的产品真的能够为用户带来价值，体验也足够好，用户才会愿意一遍遍地回来使。也要多留意用户的流失率。用户在正常使用你的产品之前，通常都要经过这几关的考验。首先他们要知道有你这款产品，然后他们要对你的产品产生了足够的兴趣，之后就要开始转化（下载你的app，填写注册信息，收到验证邮件，等等），最后他们还要有足够耐心去了解你的产品能够为他们做些什么，要怎么去使用。最最后，他们还要能够记得自己下过这个app。这些并不怎么讨人喜欢的数据其实非常宝贵，很应该埋点，这里的数据能够告诉你哪个环节出了问题，用户会在哪个环节离开。找到那些对于你的产品来说真正重要的数据并重点关注。的确，以现在的技术我们就能够收集到非常多种类的数据了，这个感觉非常好，让你感觉一切尽在你的掌控与监视之中。但是非常抱歉，最能对于设计产生切实价值的数据通常只有那么特定几支，所以不要浪费时间与精力在那些对于你们来说不重要的数据身上。设定某个目标之前一定要仔细想清楚。这个真的比你们想象中要重要得多，搞清楚为什么要设定这个目标，将会非常直接地影响到你的设计工作的进行。多问两个为什么，会不会出现其实已经做出了改进，然而数据却不升反降的情况？相反地，会不会出现数据上升，但是却不是因为设计有所改进的情况？假如有，那么说明这只数据受别的因素影响可能更大，那么会不会有别的更好的替代品呢？寻找重点数据的“反面数据”为了更好地让数据说真话，我们在关注某个重点数据的同时一定要寻找到它的“反面数据”，譬如说不能在看pv的同时不看流失率，不能在看订单量的同时不看订单取消量。数据及其反面数据的比较更能让你发现不在表层的错误，学会找到数据的反面数据并观察它们同时期不同的表现，千万不要养成只看一支数据的习惯，这样得出的结论太过片面。我的追波：知乎专栏：以上文字以及图片均来自 Julie Zhou的博文 Metrics Versus Experience原文地址转载前请询得译者同意","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T19:34:18+08:00","url":"/p/","title":"用户体验是玄学吗？","summary":"很久以前，大家还不怎么专门谈用户体验的时候，关于如何设计出一款好用的产品，大家基本只能靠猜。没有参照，也没有数据，那时候的设计师们凭借着自己的直觉、品味以及知识来设计一切。时过境迁，现在大家都非常重视用户的体验，也有越来越多的人参与了进来…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":0,"likesCount":0},"next":{"isTitleImageFullScreen":true,"rating":"none","titleImage":"/v2-8aa581d93cefe7c70e01e642d419d1f7_r.png","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"设计"},{"url":"/topic/","id":"","name":"产品设计"},{"url":"/topic/","id":"","name":"程序员"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"profileUrl":"/people/yuxuan-zhu","bio":"UX/Motion Designer | 知乎专栏「DesignCoder」","hash":"6293dbc6a4cbc839ecafef7a","uid":441300,"isOrg":false,"description":"专栏：/designcoder\n追波：/Zhuyuxuan\n博客：http://zyxscientist.github.io/\n\n本人并没有委托“维权骑士”（）为我的文章进行维权。 ","isOrgWhiteList":false,"slug":"yuxuan-zhu","avatar":{"id":"v2-62d8213c46ffa62c336e3f2f9b7b1f56","template":"/{id}_{size}.jpg"},"name":"PeterZ"},"column":{"slug":"designcoder","name":"DesignCoder"},"content":"简评：面对完全不一样的媒介，设计师们会有不一样的目标，也会使用不一样的手法进行设计。 比如说一名 UI 设计师与平面设计师的最大区别，大概就是在于 UI 设计师能够以开发的视角来做设计。UI 这个词或许听起来非常新潮，但是 User Interface 这个词组及其含义其实很早就已经出现了。古时候的设计师使用 GIMP 对用户界面进行设计，后来我们使用 Photoshop 进行这项工作，而现我猜大多数 UI 设计师们都已经用上了 Sketch。UI 设计与其他的一些设计行当最大的一点区别就是，UI 设计师输出的并不是最终的作品，他们通常还要把自己的设计先交付给开发，而且交付这个过程非常重要。你怎么去设计以至到你怎么输出你的设计将会直最终的产品产生重大的影响，所以对于这种媒介（software），设计师会面对的问题将会面对什么样的新问题。开发使用他们的开发工具（iOS 的 Xcode、Android 的 Android Studio 等等）按照你的设计来构建界面的的方法和思路会与你在使用 Sketch 来设计 UI 的思路非常不一样。所以，既然 UI 设计师的主要工作是交付，那么学会以开发的视角和分析方法来进行设计将非常重要。开发眼中的设计稿长什么样人们总是会带着自己既有的知识和以往的经验来分析客观事物，开发眼中的设计稿跟设计师眼中的设计稿差异其实非常大。开发通常以视图（Views）为单位排布各个元素，Sketch 里面的 Symbols 功能和 Group 的概念其实与视图的概念非常相似，都是事先规定好样式与属性，然后再在需要的地方重复使用。当然了，开发在使用他们的工具（Xcode、Android Studio 等）来控制布局，构建我们的UI肯定不会像你在 Sketch 里面来得那么简单直接，但是设计师并不需要实际地去学习如在使用这些工具来对 UI 进行构建（当然如果你感兴趣的话，深度地了解一下这些又远又近的知识对你将有非常大的裨益）。我们可以将视图想象成一个类似于 Sketch 里面的 Symbols 或是 Group 的东西，样式、边框和大小都被规定好了，然后各个不同小视图以合乎道理的层级和顺序构建成我们的理想中的界面。拿 Apple Music 举个小栗子。Apple Music 的专辑页面大致可以分为三个大视图：最上方的专辑详情区域。中间的歌曲列表页。我们熟悉的 Tab Bar。这三个大视图之中又包含了从属于自己的小视图，譬如说专辑的照片就是属于专辑详情区域的视图，每首歌曲的名字也是属于歌曲列表视图内的小视图。上面那个充满了蓝色框框的图显示的是每个视图的边界，Sketch 里面可不会给你显示这些东西，不过我们有 Zeplin 和 Sketch Measure 这样的插件帮助我们标注并输出每个图层的边界大小，这对于实际开发来说非常有帮助。我们再来观察一下 Tab Bar 在 Sketch 里面的图层结构。这样的排列是比较接近在开发环境下搭建 UI 所使用的结构的。有太多的设计师并不会将图层整理得那么整齐，认为整齐与否并不影响视觉效果。这的确不影响视觉效果，但是这有可能会严重影响交付效果。所以下一次画 UI 的时候请尽量合理地安排好图层的结构和从属关系，多去阅读各个平台和系统的设计规范，别使用奇奇怪怪的数字来定义元素的尺寸和它们之间的距离。软件是程序写的，在这些层面上它就是那么方方正正，没有什么创新的空间。同样地，大家所说的保持软件的一致性，除了出于美观好用等各方面的考虑以外，其实也是为了更高效地进行开发。对于一套好的 UI 来说，它上面的几乎所有元素都需要是可以用数字描述的，包括多少像素的圆角，多少像素的描边。以开发的角度来看，只有数字才是描述你的 UI 的最有效的语言，而有规律的数字才是维持一致性的保证。像开发安排视图一样安排好图层的结构，然后使用 Zeplin 或者 Sketch Measure 一键自动标注并且输出，加之及时有效的沟通和认真专业的态度，将大大减少你的程序员和你日后的改改改工作。科技日新月异，你还有很多别的新玩意要去学习，程序员也有很多新的技术要去专研，学会以开发的视角去做设计非常重要。切不要把为了一两个像素的偏移而争吵视作是自己具有工匠精神的体现，华为已经开始裁撤 35 岁以上的员工了，我渐渐觉得这样的鸡毛蒜皮的小事情简直就是浪费时间。@1x关于使用一倍还是二倍做图的争论还是比较多的，国外的设计师喜欢用一倍，国内的设计师比较多用二倍，实际上两种选择都有自己的好处，好多高手也写了不少优秀的教程，在下就不在这里班门弄斧做比较了。我简单说说做一倍图的好处。一倍图计算起来很简单，要输出几倍就乘以几倍，如此你就能在 Sketch 里面使用插件一键输出所有倍数的图了。开发在搭建 UI 的时候还能直接使用你标注在上面的数字，大大较少了出错的可能。还有两点个人总结的小经验，就目前来讲，你能在官网或者是一些权威组织网站上面下载到的有关平台规范的设计源文件以及大部分素材都是用一倍图做的。另外，使用一倍图导出到目前比较主流的可交互原型制作软件（Framer Studio、Flinto、Principle、Form、Origami 等等）内制作可交互原型将会有更加良好的体验。输出色板设计师会在设计之前定好需要用到的各种颜色，开发其实也需要，他们会在一个文档里面将所有要用到的颜色先写下来（这些颜色也由设计师给到），然后再在需要的地方随时调用，概念就跟设计师参照视觉规范做设计一样。所以在设计 UI 的过程中请妥善保管你选定的颜色。如果时间充裕的话最好专门新建一个画板来保存你的颜色并使用 Sketch Measure 与其他 asset 一并输出。这样开发就能够复制上面的十六进制码直接粘贴到他们规定颜色的文档里面去了。为你能想到的所有情况而设计程序不可能总是在理想的状态中工作，故障与错误总是会有的。当出现比如说断网、弱网或者暂时没有内容可以展示时，程序的页面该怎么呈现并传达正确的信息给到用户？所以设计师在设计的时候一定要审慎处理各种不一样的情况。假如一个页面有可能会有不存在内容的状态，那么该怎么对这种状态进行设计？总有你想不到的情况会发生，所以如果不明白的话多去询问一下传说中的知情人士，相信他们也会很乐意帮助你找出一些需要设计的异常情况。另外几件细碎的事情对于语言文字的处理一定不能掉以轻心，因为这有可能会将你的页面毁掉。如果一个视图内文字有可能会很多，那么要做截字处理还是自适应处理？如果某处会有出现大量英文的情况的话呢？不要太过追求完美，锱铢必较地去要求一个两个像素的完美并不值得提倡。就像前文提及的一样，我们最好能在前期就避免这些情况的发生。而且，软件开发过程中会有很多不可控、不可预估的情况发生，有些问题谁也没办法解决。学会接受一点点的瑕疵更有助于项目的推进。为软件添加上一些优雅的转场和漂亮的动效确实能改善用户体验，但设计师不需要要在软件的每一寸土地上都要施展自己的才华，使用系统自带效果不丢人。如今无论是安卓还是
iOS，系统本身所能提供的动态效果已经非常不错了，学会怎么合理地使用它们也是一门考验功力的活儿。好的产品需要大家共同的努力！(? o?_o?)?加油！原文地址：欢迎关注知乎专栏「」，每天为 Makers 导读三篇优质英文文章；个人专栏「」爱技术，爱设计；Dribbble：","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T10:04:27+08:00","url":"/p/","title":"以开发的视角做设计","summary":"简评：面对完全不一样的媒介，设计师们会有不一样的目标，也会使用不一样的手法进行设计。 比如说一名 UI 设计师与平面设计师的最大区别，大概就是在于 UI 设计师能够以开发的视角来做设计。UI 这个词或许听起来非常新潮，但是 User Interface 这个词组及其…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":0,"likesCount":0}},"annotationDetail":null,"commentsCount":4,"likesCount":46,"FULLINFO":true}},"User":{"yuxuan-zhu":{"isFollowed":false,"name":"PeterZ","headline":"专栏：/designcoder\n追波：/Zhuyuxuan\n博客：http://zyxscientist.github.io/\n\n本人并没有委托“维权骑士”（）为我的文章进行维权。 ","avatarUrl":"/v2-62d8213c46ffa62c336e3f2f9b7b1f56_s.jpg","isFollowing":false,"type":"people","slug":"yuxuan-zhu","bio":"UX/Motion Designer | 知乎专栏「DesignCoder」","hash":"6293dbc6a4cbc839ecafef7a","uid":441300,"isOrg":false,"description":"专栏：/designcoder\n追波：/Zhuyuxuan\n博客：http://zyxscientist.github.io/\n\n本人并没有委托“维权骑士”（）为我的文章进行维权。 ","profileUrl":"/people/yuxuan-zhu","avatar":{"id":"v2-62d8213c46ffa62c336e3f2f9b7b1f56","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{},"columns":{"designcoder":{"following":false,"canManage":false,"href":"/api/columns/designcoder","name":"DesignCoder","creator":{"slug":"yuxuan-zhu"},"url":"/designcoder","slug":"designcoder","avatar":{"id":"v2-f27f3b365e3d244e1f76d8","template":"/{id}_{size}.jpg"}}},"columnPosts":{},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"isTitleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{}}