zoukankan      html  css  js  c++  java
  • android应用开发-从设计到实现 3-3 Sketch静态原型设计

    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的安卓设备屏幕尺寸。所以我们在这种尺寸上做设计。能够非常easy的顾及到其它像素密度的设备。

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

     sketch_artboard

    除了使用菜单条调出画板。你也能够使用快捷方式:A。这也是操作Sketch必须记住的快捷方式之中的一个。


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

    假设您认为本文对你有帮助。请推荐给很多其它的朋友;或者加入我们的QQ群348702074和很多其它的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。

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


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

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

    最后再次感谢各位读者对安豆的支持。谢谢:)

  • 相关阅读:
    xudyh的gcd模板
    [转]vi command summary
    Uva11538 排列组合水题
    html中的块与布局
    使用bootstrap-table插件
    2015 10月16日 工作计划与执行
    2015 10月15日 工作计划与执行
    2015 10月14日 工作计划与执行
    2015 10月13日 工作计划与执行
    2015 10月12日 工作计划与执行
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/7392027.html
Copyright © 2011-2022 走看看