Sketch静态原型设计

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

启动Sketch后,我们将看到类似如下的界面,

 sketch_ui_layout_empty

工具栏

它的顶部是工具栏

 sketch_ui_layout_toolbar

可以通过菜单栏View -> Customize Toolbar...来自定义工具栏。
在弹出的窗口中,将下方的图标拖拽到上方的工具栏中就可以了。

 sketch_customize_tool_bar

导航栏

左边是导航栏,用来展示这个项目拥有的pagepage中包含的详细内容。

page是一张张单独页面,

  • 每个页面上可以放多个手机屏幕的画板:展开、折叠、图标等等;
  • 每个page中的画板都进一步的在导航栏的下半区域展示出来:展开、折叠、图标等等;
  • 多个page被归类到了pages的下面:Weather、 Symbols等等;

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

 sketch_page_workspace

工作区域

工作区域显示的是page的详细内容。我们设计的程序界面具体样子,就是通过工作区域展现出来的。

 sketch_ui_layout

属性设置区域

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

 sketch_layout_property_settings

添加设备画板

在新建的 Sketch项目中,双击导航栏page1,把页面的名字改成一个有意义的名字-Weathear

 sketch_page_rename

通过工具栏Insert -> Artboard,调出画板,选择Material Design下的Mobile Portrait

 sketch_add_artboard

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

可以看到Sketch为多种界面提供了默认的尺寸,iphone的,安卓设备的,网页的,MacOS应用的,可以说是应有尽有。这也说明Sketch就是为了这些产品而设计出来的。

 sketch_artboard

除了使用菜单栏调出画板,你也可以使用快捷方式:A。这也是操作Sketch必须记住的快捷方式之一。