android应用开发-从设计到实现 3-3 Sketch静态原型设计

Sketch静态原型设计

对于静态原型的设计，我们使用

Sketch

。

启动

Sketch

后，我们将看到类似如下的界面，

工具栏

它的顶部是

工具栏

，



可以通过菜单栏

View -> Customize Toolbar...

来自定义工具栏。

在弹出的窗口中，将下方的图标拖拽到上方的

工具栏

中就可以了。

导航栏

左边是

导航栏

，用来展示这个项目拥有的

page

和

page

中包含的详细内容。

page

是一张张单独页面，

每个页面上可以放多个手机屏幕的画板：展开、折叠、图标等等；

每个

page

中的画板都进一步的在导航栏的下半区域展示出来：展开、折叠、图标等等；

多个

page

被归类到了

pages

的下面：Weather、 Symbols等等；

我们设计的程序界面，就是某个

page

，

工作区域

工作区域

显示的是

page

的详细内容。我们设计的程序界面具体样子，就是通过

工作区域

展现出来的。

属性设置区域

属性设置区域

用来设定某个选定图形的属性，例如它的大小、透明度、文字内容、字体颜色等等。

添加设备画板

在新建的

Sketch

项目中，双击

导航栏

的

page1

，把页面的名字改成一个有意义的名字-

Weathear

，



通过

工具栏

的

Insert -> Artboard

，调出画板，选择

Material Design

下的

Mobile Portrait

，



通过右侧的

属性设置区域

，可以看到这个画板的大小为360px*640px，正好是一个mdpi的安卓设备屏幕尺寸。所以我们在这样的尺寸上做设计，能够很容易的顾及到其他像素密度的设备。

可以看到

Sketch

为多种界面提供了默认的尺寸，iphone的，安卓设备的，网页的，MacOS应用的，可以说是应有尽有。这也说明

Sketch

就是为了这些产品而设计出来的。



除了使用菜单栏调出画板，你也可以使用快捷方式：

A

。这也是操作

Sketch

必须记住的快捷方式之一。

本文是《从设计到实现-手把手教你做android应用开发》系列文档中的一篇。感谢您的阅读和反馈，对本文有任何的意见和建议请留言，我都会尽量一一回复。

如果您觉得本文对你有帮助，请推荐给更多的朋友；或者加入我们的QQ群348702074和更多的小伙伴一起讨论；也希望大家能给我出出主意，让这些文档能讲的更好，能最大化的帮助到希望学习开发的伙伴们。

除了CSDN发布的文章，本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。

同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯，相关的配套文档也可以在这里看到。

这些相关硬件都由我们为您把关购买，为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。

最后再次感谢各位读者对

安豆

的支持，谢谢:)