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灯。相关的配套文档也能够在这里看到。

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

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

  • 相关阅读:
    怎么查看京东店铺的品牌ID
    PPT编辑的时候很卡,放映的时候不卡,咋回事?
    codevs 1702素数判定2
    codevs 2530大质数
    codevs 1488GangGang的烦恼
    codevs 2851 菜菜买气球
    hdu 5653 Bomber Man wants to bomb an Array
    poj 3661 Running
    poj 1651 Multiplication Puzzle
    hdu 2476 String Painter
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/7392027.html
Copyright © 2011-2022 走看看