Sketch基础软件知识

1.1 软件介绍与安装

1.概述:

Sketch 是一款适用于所有设计师的矢量绘图应用。基于矢量的绘图方式也是目前进行网页、图标以及界面设计的最好方式。除了矢量编辑的功能之外,Sketch 还增加了一些基本的位图处理能力,例如模糊和色彩调整。官方尽量将 Sketch 设计的功能强大且易于被理解使用,有经验的设计师花上几个小时便能将自己的设计技巧在 Sketch 中自如运用。对于绝大多数的数字产品设计 Sketch 都能替代 Adobe Photoshop、Illustrator 和 Fireworks 等传统工具。

2.Sketch的优势:

Sketch 有着出色的界面且为图标和界面设计而生。它拥有统一、单窗口的操作界面,所有你需要的工具都触手可及。支持对单个文档进行多重填充,同时拥有最棒的文本渲染及文本样式。并且画布将是无限大小的,你可以轻松导出多种分辨率的素材。

3.Sketch的劣势:

Sketch 不是一个位图编辑应用。也就是说如果你想修正一张照片或者用笔刷来画画,那么这不是你要找的应用。

4. Sketch的安装:

1. 百度搜索Sketch官网,首屏下方按钮"Try for Free",随后会下载一个zip包,下载下来后会自动解压并删除压缩包,你可以得到一个钻石图标,并且官网会告诉你可以在新机器上免费试用30天。

请注意,在"下载"文件夹里,可以看到这个钻石图标,它的文件类型是"应用程序",而一般下载的dmg文件是"磁盘映像",磁盘映像是需要运行虚拟磁盘服务的,而"应用程序"你可以直接使用。

2. 为了以后方便管理程序,也让sketch正式在你的电脑里安家,我们要把它从"下载"文件夹里面拖到"应用程序"文件夹里。

1.2 基本操作与设置

1.Sketch的界面介绍

1.画布:

Sketch 的画布区域是无限大的,可以向任意方向无限延伸,你将拥有绝对的自由来规划自己的创作区域。

如果你想在画布区域中设置一个固定的画框,你只需添加一个或多个新的画板。例如,设计移动应用界面时,很多设计师会为应用的每一个屏都创建一个画板,然后排列开来以便查看。

你可以用矢量(分辨率无关)模式来查看画布,也可以打开像素模式来查看每一个像素导出成 JPG 或 PNG 等位图文件后的样子。可在像素缩放章节查看到更多内容。

值得注意的是,有些像模糊或者投影类的效果,会强制将画布的一部分以像素模式显示,因为模糊类的效果本身就是一个基于像素的效果。

2. 属性检查器:

界面右侧的属性检查器可以让你对正在编辑的图层或正在使用的工具进行属性调整。当你选中一个图层时,你会发现属性检查器被划分为几个区域。

通用属性

通用图层样式属性在属性检查器的顶端区域:图层位置、大小、不透明度、叠加模式(取决于图层类型)以及一些特殊选项,例如调整矩形圆角半径或多边形的边数。

你可以在属性检查器文本框中执行数学运算,进行加、减、乘、除操作,以加快设计工作流程。一些情况下还可输入百分比来调整形状,如下图所示。例如,选中一个图层,然后执行(+、-、*、/)和(%)操作。在半径调节框中,可以直接输入百分号。当然,你也可以分别指定每个圆角的值,使用"/"分隔即可(比如 40/0/40/0)。

3. 图层列表:

图层列表列出了当前页面的所有图层(包括和),并且每个图层都会有一个小小的预览。你可以在这里:查看图层是否被锁定、不可见、使用了蒙版或被标记为可导出;重新排列图层,或为图层执行布尔运算,例如减去顶层形状;对图层进行编组或重命名来保证它们是有序的。

1.多页面操作

Sketch 支持多页面操作,你可在图层列表面板上方的下拉箭头进行添加 / 删除或切换到其它页面(也可使用 Page Up / Page Down 键来切换)。图层列表面板始终只显示当前页面图层。

2.画板

在图层列表里,有白色背景一栏的便是画板,你可以把画板视为设计中的顶层对象,所以一个画板不能被嵌入另一个画板。

3.蒙版

在图层列表里,那些使用了蒙版的图层名前会有一个小点,它的蒙版则是底下紧接着不带小点的图层。

4.布尔运算

每个图形都可以包含多个子路径,它们会以组的形式呈现在图层列表中,附带一个下拉箭头显示具体的子路径。每一层子路径都可以单独设置布尔运算,决定和它的下一图层以什么方式组合。图层列表能清晰的展现子路径的组合方式,同时方便你随时调整更改。

5.元件和共享式样

元件是一种特殊的组,通过它你可以在画板和页面之间复用元素。元件会以紫色同步按钮图标显示在图层列表中(普通编组则是蓝色的文件夹)。

共享式样可以使多个对象(图形及文本)的样式保持一致,如果一个图形或者一段文本使用了共享式样,它们名称前的预览图标将变成紫色调。

4. 工具栏:

Sketch 的工具栏涵盖了你创作过程所需的所有工具。在默认状态下,第一组工具是用来添加新图层:图形、图片、元件等。

编组(Group)和解组(Ungroup)能有效的保证文档的条理性。(Symbol)让你快速复用内容。接下来的几个章节中,你将看到:编辑现有图层:旋转(Rotate)、变形(Transform),通过布尔运算来组合图层,以及在图层列表中上移或下移图层,添加网格和布局,Sketch Mirror 和本地共享。

工具栏最后一个导出(Export)按钮同时也是一个切片工具,你可以在这将你的作品导出为一个或多个位图或矢量图形。

不同于其它绘图应用,Sketch 把常用工具放在顶端的工具栏,而不是放到一侧垂直排列,但如果需要,你可以通过鼠标右键工具栏,进入"定制工具栏..."(Customize toolbar...)将没有显示在工具栏中的图标放置在上面,以添加工具。

2.sketch的快捷键

1.3墨刀和axure的区别与联系

原型软件有axure、墨刀、摩客(Mockplus)、xiaopiu、Sketch等,此中axure作为老牌的原型软件,功能最齐备,交互最多样,根基任何想要的结果都可以实现,尤其在建造PC端原型图上有优势。

墨刀对于APP的原型设计真的是体验很是好,怎么说呢?就像有一个无形的人在帮忙你,和你一路打造你的原型APP。其控件的拖沓、巨细的调整,城市天然的去匹配响应的母版巨细。无需去担忧有多移动一点或多选择一点。而且墨刀的系统控件都是基于APP,以及系统平台IOS和安卓,是以在里面可以起首选择响应的设备结构,削减了不少工作环节。

墨刀的劣势就是响应相对不自由,起首这也于墨刀的产物心猿意马有关,移动端原型设计在交互结果上、控件组合上,操作面板的选择上都不如AXURE 矫捷,而且结果切换因为是采用连线的体例,有时会让利用者脑子错乱的感受。而且原型的交互结果系统自带的还比力少,但根基知足日常所有原型的利用。别的需要充费才可以或许利用更壮大的共享建立功能。

总的来说墨刀和Axure就像美图秀秀和photoshop。前者都是简化了根本的操作,很像封装好了一个函数,你直接挪用就可以了。年夜部门小伙伴外出拍了照片必定是美图秀秀,选选结果,感受不错之后当即分享。可是真的设计到良多的图层组合,可控地调整页面元素,仍是会用到photoshop这就涉及到分歧的需求,你用这个软件是想达到什么目标。是更想研究逻辑布局仍是更像揭示原型结果。

1.4sketch和axure的区别与联系

Sketch大部分功能和操作思路,和Axure是一样的,比如:按住空格键, 显示抓手工具,这时候一边按住空格键,一边可以用鼠标拖动界面大图。

下面我通过边用Sketch画几个示例图片,然后通过示例来讲解Sketch的特点。

1.Sketch的特点

1.这是一个Sketch布尔运算功能画icon的示例。通过这里示例,可以发现Sketch包括有4种不同的布尔运算,你可以根据需要来具体选择:

合并形状 (Union)、减去顶层形状 (Subtract)、与形状区域相交 (Intersect)、排除重叠形状 (Difference)。

这些功能跟CDR和Ai以及PS软件的使用效果是一样的。

之前喜欢用布尔运算画icon的同学们,你们遇到Sketch,就有福了。因为Sketch也可以通过布尔运算来画icon。 现在新版的Axure8.0,也开始有了布尔运算的功能。不过,还是Sketch的布尔运算位置更明显,用起来更顺手。

2.这是一个用Sketch画的搜索框的示例:这个功能和Axure的一样的。不过,仔细看上面这张图,可以发现,Sketch可以绘制两头渐隐的直线,可以给文本框添加内阴影和外投影。

3. 这个示例展示了sketch快速切图的功能。sketch可以快速导出切图, 包括各种倍数的切图,一键导出,并且自动命名,比如:2倍图,导出之后,自动命名尾巴,@2x;3倍图,导出之后,自动命名尾巴,@3x

4. 这是一个Mac电脑缩放屏幕的示例。轻轻滑动Mac电脑的触摸键盘,即可缩放Sketch的界面。双指向外滑动,Sketch界面开始放大。双指向内收拢,Sketch界面开始缩小。这个功能,在Axure上是不能单靠Mac的触摸屏来实现的。

2. Axure的特点

1. 这是Axure的切图功能的示例。我们可以把电脑桌面上的图片,拖入Axure中,利用Axure的裁切图片功能,进行裁切,从而截取图片中的一部分。

2. Axure的流程图控件很强大,在绘制原型图之前,可以先绘制流程图,再用流程图去沟通。等流程图定稿大致确认之后,再开始绘制页面的线框图。这时候,工作过程中,我们就可以避免因为业务流程没有理顺,导致的原型图频繁修改的沟通情况。

3. Axure的优点是可以设计出全套页面,点击跳转的高仿真页面操作流程图。因为Axure的最小单位是page,很适合整理页面之间的整体架构,通过页面之间的跳转流程,来反映出线下业务的真实流程。

其次:Axure用户群更广。Axure有windows和Mac两种版本。而Sketch目前只用Mac版本。这样一来,Sketch的用户群就丢失了windows用户。

总结

通过本篇文章你可以了解到:

1.sketch软件的用途

2.Sketch软件基本操作与设置

3.Sketch与其他同类软件的区别

知识就是力量,学习改变命运;感谢您的关注,点击我的头像,进入头条主页,查看全部内容;我将持续为您分享艺术设计干货。

软件观念革命:交互设计精髓_UI设计师、交互设计师、产品经理必备软件技能之Sketch...相关推荐

  1. 产品经理必备软件——Axure使用详解(2)

    五. 站点地图区域 站点地图呈树状的,以主页为根节点,可以方便我们对网站整体模块和不同栏目.功能划分有一个很清晰的了解,同时也方便我们对网站整体页面进行管理(添加.删除.重命名.调整层级.调整顺序)

  2. 软件观念革命:交互设计精髓_万字干货,交互设计精髓105条设计原则(附中英PDF资料)...

    <About Face: 交互设计精髓>称得上是交互设计的圣经,用"工作必备,常看常新"来形容也不为过.书中的每句话对平时的实践都有着指导意义.更难能可贵的是,这本圣经 ...

  3. 交互设计精髓_设计空间的精髓

    交互设计精髓 重点 (Top highlight) 什么是空间? (What is Space?) Space is the dimension of height, depth and width ...

  4. 推荐好书:About Face4, 交互设计精髓,英文原版,文字版,彩色

    About Face4, 交互设计精髓,英文原版,文字版,彩色:https://www.lanzous.com/i4t943e 直隶总督李鸿章因忙于议和,未及复奏.其时,李鸿章之侄李经羲新 任云南巡抚 ...

  5. 7款产品经理必备的交互软件

    作为UI/UX设计师,我相信你或多或少接触过很多交互设计软件. 为您整理总结了几款流行的交互软件.如果您在上述交互设计软件中确实存在选择困难,希望通过阅读本文帮助您快速做出正确的选择. 即时设计 即时 ...

  6. 【交互设计】如何描述你的产品

    转载自:老二牛车教育 » [交互设计]如何描述你的产品 有没有给你娃或亲戚朋友家的娃取过名字,翻了新华字典,又翻英汉大字典? 有没有在绞尽脑汁想页面中的某个按钮到底是叫"取消"还是 ...

  7. 产品经理常用工具 互联网产品经理常用软件及工作平台

    互联网产品经理必备的工具 http://www.yixieshi.com/it/11509.html 产品经理工具列表 http://www.masterchat.cn/topic/pm-tools/ ...

  8. 互联网产品经理常用软件及工作平台

    http://uedc.163.com/2657.html 上期书友会分享了工具,大家发信给我说希望能够写篇博文来分享,PPT还不够他们使.好吧,我再啰嗦一次.我不想和大家具体去讨论一个工具如何如何 ...

  9. 用户体验设计(UED)小知识---产品经理深入浅出课程

    本文主要针对刘文智老师"产品经理深入浅出课程"课时15.16总结,主要介绍用户体验设计(UED)相关知识. 1.UED(User Experience Design)是针对用户心灵 ...

最新文章

  1. PythonGUI开发:59行代码开发小型商店添加系统
  2. webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题
  3. 推荐3个快速开发平台 前后端都有 项目经验又有着落了
  4. Hyperledger Fabric 1.0 实战开发系列 第二课 Fabric环境搭建
  5. c++ 图的连通分量是什么_学习数据结构第五章:图(图的遍历操作)
  6. ansible puppet saltstack三款自动化运维工具的对比
  7. 解决ueditor jquery javascript 取值问题
  8. C++(4)--初识变量、数据类型
  9. Python核心教程(第二版)读书笔记(三)
  10. 搜索,贪心,DP,三者的区别和联系
  11. [react-native]react-native填坑笔记
  12. 【Unity3D插件】MiniMap插件分享《小地图插件》
  13. JavaScript核心之Document对象概述(document的属性,方法,事件)
  14. 在线验证18位身份证
  15. 2020-11-10大众点评字体反爬抓取信息
  16. 计算机电缆的最小弯曲半径,电缆最小弯曲半径-知道电缆长度直径弯曲半径,怎么计算出电缆盘大小-电工基础 - 电工屋...
  17. 【裸金属服务器学习笔记】
  18. 奇怪的是珊瑚虫版反而可以
  19. 只需要MTK工程的bin文件、手机和下载线便可以修改各种手机软件
  20. EditText光标始终保持在文字末尾

热门文章

  1. larval中sessions的使用
  2. mfc对话框ok没效果_利用PS制作逼真双重曝光效果案例演示,合成紫色城市建筑风格海报图片...
  3. botzone Tetris2
  4. oracle中毒,oracle数据库中毒恢复 oracle数据库解密恢复 服务器中勒索病毒解密恢复.Hermes666...
  5. HR面试程序员,一般第一个问题会问什么
  6. CSDN绑定GitHub详细步骤,完成后可以得勋章哦,亲们国庆假期愉快!
  7. 使用Mailgun WordPress插件增加订户
  8. IGRP原理及配置案例
  9. Web前端——JavaScript 的基础总结
  10. 动态RAM(64K*1)INTEL2164简介(抄自原理图)