恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
(3)初识Sketch用户界面
0.0°
2016-12-06 原创文章 教程 举报 4896 6 7 3

本文是《零基础跟我学 用Sketch设计App UI》系列教程的第三篇。

Image title

        要使用Sketch,首先要安装有Sketch。由于目前Sketch只在Mac上提供,因此您需要一台苹果电脑,软件对于硬件没有太高的要求,只要不是老掉牙的设备,都可以顺利运行,操作系统要求10.10+。早期,Sketch在自家官网和Mac App Store都有提供购买途径,但是由于Apple的审核机制导致版本严重落后于自家官网,影响Bug修复,于是毅然决定放弃MAS,专心在官网进行销售。


        现在,Bohemiancoding已经为Sketch开设了专门的域名 (https://sketchapp.com),提供了30天全功能免费试用。您可以先下载,进行试用,下载后直接打开即可,为了方便,也可以拖到应用程序文件夹,这样以后可以从Launchpad启动。试用后,您一定会愿意付费的。


        Sketch的收费策略之前是大版本号升级的时候重新收费一次,例如从Sketch2升级到Sketch3要重新付费,后来,改变了另一种收费策略,即按年收费,但是过期后仍然后可以无限制的使用,只是不能在线更新而已,当你觉得自己的版本太落后了,可以再次续费。你可以理解为之前是购买,现在是年费租用。这样也挺好的。由此,版本号也使用了新的命名方式,所以从39.0开始。本文写作时,版本为41。


        Sketch的价格为$99/年,并提供教育优惠,可以5折购买,只需要提供学生证。还是很划算的。这个软件很值得大家购买,毕竟我前面也说了,它帮助我提升了40%的工作效率。


        启动Sketch,会看到启动页,以往版本的启动页对我来说觉得没什么用,但是从v41版开始,使用了重新设计的应用图标、启动页、工具栏图标,可以显示最近的工作、从模版新建,从便利角度来说我愿意使用它,从视觉角度来看,我也更愿意让它在启动时显示了。


Image title

Image title

        这里我们举例选择Android Icon Design,你能看到如下界面,如果你看到过开发者使用的Xcode,你会发现它们的布局非常类似,其实还有Mac的iwork套件也是这样的风格,可以说是Mac平台的标准布局。Image title

        顶部是工具栏,左侧是图层和画布面板,右侧是属性和输出,中间是画布。


        下面逐一介绍界面的各个部分。


        顶部标题栏是遵循了Mac OS的风格,点击后可修改文件名和存储路径,左侧是系统风格的窗口控制按钮。

接下来是工具栏,这里是你会用频繁用到的工具的集合,你需要知道的是,这里并不是固定不动的,而是在您第一次使用时就应该把这一栏定义成自己适用的内容。


工具栏


        Sketch提供了一套默认的工具栏组合供您使用,但是这里建议首先还是自己配置一下工具栏,本文以我自己的习惯来配置,您不必按照我的方案来配置,目的是为了教您如何配置及了解工具的功能。


        要自定义工具栏,您在工具栏区域内点击右键,选择“Customize Toolbar…”(定制工具栏),接着你就看到了全部可供使用的工具,将你想用的工具拖入顶部的工具栏即可,不想要的功能,从工具栏拖回下面的集合就可以了。即便你的英语很差,配合文字上方的图标,也可以很好的理解工具的作用了。这里就不一一介绍了,你可以逐个尝试,用一下就会了。

Image title

(工具说明犹豫UI中国的编辑器限制,没办法插入表格,具体介绍请到文章末尾扫描二维码添加公众号查看历史文章中本文的内容)


图层面板


        配置好工具栏之后,我们来认识一下图层面板。严格的来说,这里并不是单纯的图层面板,它还包括了艺术板、页面。三者之间的关系是 图层

Image title

        该面板从上到下依次是“页面”、“艺术板”,您先选择一个“页面”,随后下方会显示该页面下的艺术板们,艺术板下随后可展开图层组和图层。单一图形也可以是一个图层、文字也可以是一个图层。双击“页面”“艺术板”“图层”“图层组”即可重命名。


        可对单一图层进行隐藏、锁定,面板最底部提供了快速查找的功能,以及隐藏所有图层,所有切片。同时提供丰富的右键功能,等同在画布上相应元素点右键的功能。


        “页面”右上角的“+”可以新建一个页面,在页面列表中点击右键可以复制或删除页面,若删除页面,也会删除页面中包含的所有艺术板。您会频繁的需要多选一些元素,除了在画布中点选,您也可以在图层面板中点选。这和操作Finder是一样的,按住command可无序多选,安装shift可点选头尾两个元素即可选中它们之间的元素。


属性面板

        右侧的属性面板,是非常重要的部分,基本上你在建立好画布、绘制完图形、添加好文字之后,就需要它来进行样式、尺寸的设置了。它决定了你的作品最后的样子。属性面板属于条件面板,根据所选的图层类型,它大致分为三种类型的展示:艺术板、图层、文字。


艺术板属性

         提供艺术板在页面中的坐标设定,艺术板的尺寸设定(单位px,1倍图),下方的按钮用途是让艺术板紧贴其内部元素的边缘,减少留白。随后下面是设置背景色,可选择是否启用,是否在导出时包含背景色在图片中。

Image title

图形属性

         提供元素在艺术板中的坐标设定,元素的尺寸设定(单位px,1倍图),旋转角度设定,镜像翻转,预设的共享样式选择,透明度,图层混合模式,填充,描边,投影,内阴影,模糊。

        具体用法我会在稍后的详解中配合工具来讲述。

Image title


文字属性

        可以看到除了中间部分不同,上下都和刚才说到的图形属性面板相同。同时共享样式也变成了文字样式,随后时选择字体、重量、颜色、字号、对齐方式、文本控件宽度、字间距、行高、段落间距。目前就是觉得还缺少一个段落首行缩进的设置。

Image title


元素对齐和输出

        您可以看到我们的属性面板的最上面和最下面还有2个小面板,它提供了您选中元素的对齐功能和输出功能。当您只选择一个元素时,点击对齐,它以艺术板为参照物;当你选择两个元素时,点击对齐,两者会互相作为参照物。当你选择两个及以上元素时,左侧两个等分按钮就可以使用了。

Image title


        最下方的输出则根据您选择的元素,点击右侧的“+”,可逐一增加输出选项,包含倍率和格式。添加一项输出标准后,你可以看到加号到左侧多了一个小刀图标,点击小刀之前,您可以单一输出您选择的元素,即便它遮盖一部分其他图形或者被其他图形遮盖,都不受影响。若您点击小刀,那么您就会输出在图形范围内的其他元素也会被包含在可视范围内。您可以理解为开启小刀之后,就无视图层的层叠概念了。这个在以后的工具详解会讲到。

Image title


画布


        作为一款绘图软件,它最重要的地方就是画布了,画布就是它的舞台,也是设计师的舞台。

        在画布中,您需要先根据您的需要,从工具栏中选择需要的工具在画布中的艺术板中进行绘制图形或输入文字。画布中可以看到当前选择的“页面”的所有艺术板。

Image title

到了这里,基本上您就对Sketch有了一个初步的认识了。下一期就要开始让你动手跟我这我一起去了解每个工具的用法了。


关注本账号,第一时间收到最新教程和技巧。


Image title


欢迎添加我的个人微信 daodaozhang 来给我红包打赏。


更新:2016-12-06

收藏

6人已收藏

xue_sketch

UI设计师、交互设计师、风光摄影师

  • 15

    作品

  • 154

    粉丝

  • 1

    关注

  • 挑毛病的评测|Ant Design 4 For Sketch
  • iOS微信7.0改版是怎么想的?
  • [UIkit]Ant Design for Web 改良版
  • [基础]Sketch的获取和安装

    猜你喜欢

      2016-12-06 原创文章 教程 举报 4896 6 7 3

      (3)初识Sketch用户界面

      0.0°

      你确定要举报(3)初识Sketch用户界面

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年12月06日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      6
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录