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

Sketch静态原型设计

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

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

工具栏

它的顶部是工具栏

可以通过菜单栏View -> Customize Toolbar...来自定义工具栏。

在弹出的窗口中,将下方的图标拖拽到上方的工具栏中就可以了。

导航栏

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

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

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

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

时间: 2024-12-05 10:36:47

android应用开发-从设计到实现 3-3 Sketch静态原型设计的相关文章

学习Axure RP原型设计

1 概述 原型设计是应用开发设计的第一要素.好的原型设计不仅可以起到沟通的作用,而且对客户而言应用程序拥有更直观的体现.原型设计通过内容和结构展示以及界面布局编排,实现在开发前期用户与产品进行交互.提高用户对项目的认可度,有利于项目的推进.下面为大家介绍一款原型设计工具--Axure RP. 2 名词解释 Axure RP:Axure RP是一个专业的快速原型设计工具.Axure,代表美国Axure公司:RP则是Rapid Prototyping的缩写,译为快速原型. 3 工具介绍 Axure

记公司的原型设计软件培训课程

这里首先感谢公司,也感谢培训讲师,具体名称和姓名就不指明了,这里会用到培训讲师的讲解资料,在此表示十分感谢! 在给企业客户做系统实施时,整个实施过程存在这么几方人马:客户业务部门及人员.客户IT部门及人员.我方项目经理及实施人员.我方技术主管及开发人员.业务人员懂业务,但是大部分不懂编程技术:而技术开发人员懂程序,大部分却不懂业务.每个方面的人马都有自己的诉求,各方人马如何有效地沟通是很重要的.否则就会出现:技术人员费了好大劲搞定的技术难题或需求功能,最后发现跟业务需求完全不搭边,需要返工重做:

摩客、墨刀、axure,原型设计工具哪个好用?

搜了一下官网说明: Axure RP是一个专业的快速原型设计工具. 摩客是更快.更简单的原型设计. 墨刀强大易用的原型设计与协同工具. 都是原型设计工具. 打个比方,Axure RP是photoshop,摩客与墨刀是美图秀秀.前者面向专业人士,后者面向非专业人士. 摩客与墨刀可业余做非常简单的软件,开发技术也不稳定,稍微复杂一点就会崩. 最后,心态摆正:工具只是辅助,最重要的还是内容. 墨刀: 摩客: axure:

Axure原型设计工具简单介绍和步骤描述

Axure原型设计工具 l  Axure使用者感受关键词: 超大型:高保真度:可拓展控件:自定义库:适配:少交互:收费.   1.Axure介绍: Axure RP是一款专业的快速原型设计工具.Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototyping(快速原型)的缩写. Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家能够快速创建应用软件或We

六大步骤分解产品原型设计过程

本教程将从整体和局部实例两个部分来讲解原型设计的步骤.产品的原型设计一般是基于文档的形式所表达出来的形象设计,想要把产品原型设计做好其实并不容易,想把原型做得比文档好更不容易,这里会结合一些产品原型设计的方法以及技巧来介绍原型设计的步骤,希望可以帮到有需要的朋友. 设计原型也是讲究方法步骤的,一是要提升原型设计的合理性,避免出现头重脚轻的保真程度不一致的情况:二是要减少原型设计所占用的时间,大家各自的工作时间都是很宝贵的,不可能在原型设计上投入过多的时间,因此掌握一些原型设计的方法和技巧相当必要

2014-07-28 使用Axure RP进行手机端BBS的原型设计

今天是在吾索实习的第14天.因本公司的微信公众号需要有一个对外的技术交流平台,所以我们小组打算设计一个手机端的BBS以满足其要求.首先,我们需要做的是进行数据库设计与原型设计,然后提交给经理验收,看看是否合理,是否满足其所要求. 对于原型的设计,我们不需要也不必使用Dreamweaver等设计网站的专门工具进行设计,因为那样不仅增长了原型设计的时间,也加大了原型设计的复杂性.因此,我们需要一种能快速.简便地创建出网站架构图的专门工具:Axure RP.RP的使用是相当的方便的,只需把自己所需的控

UI的必修课——产品原型设计

想要做好ui设计,为什么要学习产品原型设计?下面小编就给大家简单分析一下其中的原因,希望对大家后期的学习有所帮助. 为了能够更好地实现自己的职业价值,设计师需要掌握更多其他方面的技能,其中产品原型设计就是比较典型的,具体有哪些呢? 一.快速入行需要 其实很多设计师一开始并不明白自己到哪一个程度,才算是真正的入门.当前市场上比较流行的产品原型设计工具很多,因此ui设计师需要掌握的技能还有很多,如果你想快速入行ui设计,可以考虑专业学习产品原型设计相关技能. 二.提高设计质量 掌握更多的知识,考虑问

android应用开发-从设计到实现 3-6 静态原型的天气预报

静态原型的天气预报 未来5天的天气预报,可以看成由5个类似的天气模块构成,只要完成一个,其他几个就可以通过复制+修改内容实现改变. 首先来明确一下各个组件的尺寸和参数, 整个区域的大小,我设定成360dp*100dp: 左右边距设置成16dp: 这样一来,每日的天气模块就是(360-16-16)/ 5 = 65.6dp,我将它们设定成65dp宽: 天气的图标的大小设定成30dp的正方形区域(注意,这些图标不算是系统图标,所以它的尺寸不需要参考设计成24dp的系统图标): 日期的文字,参考Body

android应用开发-从设计到实现 2-3 颜色的运用

颜色的运用 Material Design采用的是扁平化的设计,可以看到一大块一大块区域的颜色.这些颜色大多亮丽引人,整个界面上搭配的颜色也不会太多,基本保持在三种颜色以内. "没有错误的颜色的,只有错误的搭配".颜色是没有对错的,我们要用经验和直觉来搭配它们,所以要先来认识认识颜色. 颜色理论 颜色是有语言的,红色代表这热情奔放,蓝色代表的沉着安静,绿色代表着生机活力.搭配一组颜色,就是表达作品要传递的含义. 我们大部分人都知道RGB颜色,它的理论依据是:任何颜色都是通过不同强度的红