• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 好习惯学起来!帮新手提高效率的Sketch高频使用技巧

好习惯学起来!帮新手提高效率的Sketch高频使用技巧

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含C7210,sketch,sketch教程,经验分享等相关知识,希望在学习及工作中可以帮助到您

@C7210?:Sketch毕竟没有什么学习曲线,颇易上手,相应的也时常导致新手在一开始就忽略掉一些重要的、高频的使用小技巧,而将一些稍许费力耗时的方式一路沿用下去。这篇内容所针对的便是这样的情况。几乎没有进阶的要点,只针对初学的同学培养正确习惯,还望各位老司机们见谅。下面进入正文。

欢迎关注译者(高级交互设计师、猫奴、吉他手、鼓手、老狗,现就职于腾讯ISUX)的微信公众号:Beforweb

这儿有他的访谈:《优设访谈!腾讯高级交互设计师C7210的十年设计路》

关于对象、图层、画板的使用技巧

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”等等。

?关于 symbols

1. 通过 symbols 实现元素复用

怎样判断是否要使用

您可能想查找下面的文章:

  • 如何规避 Design System 架构设计中的逻辑陷阱?
  • 像做产品一样对Design System进行前期规划
  • 实用经验!移动AR体验设计的特质与挑战
  • 实用全面!教你用Sketch Libraries构建组件库/设计体系
  • Sketch 新出了Libraries功能,以后团队协作更方便了!
  • Facebook设计副总裁:谈谈设计师的职业成功之路
  • 超实用!信息架构基础知识科普手册
  • 好习惯学起来!帮新手提高效率的Sketch高频使用技巧
  • 顶尖高手的经验!Facebook的产品设计师是如何思考的(二)
  • 顶尖高手的经验!Facebook的产品设计师是如何思考的?

相关文章

  • 2017-08-06用frameset实现复杂的页面布局技巧小结
  • 2017-08-22python 文件头的编码声明问题
  • 2018-08-23想设计出吸引视线的标题?来学这些好用的文字组合技巧
  • 2017-08-06制作手机上浏览的网页心得
  • 2018-08-23新人想要入场视频类H5 设计?你需要了解这些
  • 2018-08-23一个针对女性用户的照片编辑软件,要如何设计UI?
  • 2018-08-23实战经验!两个大招帮视觉设计师高效完成工作
  • 2018-08-23信息架构设计大杀器!超全面的卡片分类法使用指南
  • 2018-08-23为什么我们都应该学会组件化设计思维?
  • 2017-08-06在iframe框架中打开页面的方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用58同城的实战案例,带你认识完整的改版流程!
    • 网易资深视觉设计师:如何系统优化APP?
    • 交互设计师如何突破职业瓶颈?网易高手给你3个选择!
    • 关于网页配色中的叠柔配色法的详解
    • 5分钟交互设计指南系列:对话框
    • 原型工具哪家强!我从10个角度对比了素描和Axure的优缺点
    • 「这个控件叫什么」系列之动作菜单/动作面板
    • AR和VR流行之前,设计师如何掌握「环境」对用户体验的影响
    • 整理了12款Javascript 表格控件(DataGrid)
    • 这7种设计误区,会影响网页内容的体验

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有