android应用开发-从设计到实现 3-2 前期准备
2017-03-20 15:45
591 查看
前期准备
设计师首先在头脑中、草稿中勾勒出静态效果图,之后就需要收集制作时需要的各种素材、确定界面的配色方案。
收集素材
界面中需要使用各种天气图标:晴天、雨天、大雾、下雪、下雨、多云等等;还有天气信息中的风力、风向等等。我们可以使用
Sketch工具进行完全的从无到有的自由创作,也可以适用现有的素材,减少设计的工作量。
这里并不打算讲如何
画出一个完美的图形,我想作为一名设计师,这点基本的艺术功底应该还是有的。因此我决定去之前介绍过的
资源池-iconfont网站寻找合适的图标。
输入各种图标的关键字,就能看到各种图标,例如
多云,
点击希望的图标,准备下载,
可以选择图标的颜色、尺寸和下载的图标格式。这里我们选择
SVG下载,也就是下载矢量图标(矢量图我们将在后一小节相信介绍)。至于颜色和尺寸就都无所谓了,因为后面我们使用的时候都会做出调整的。
以此方法,我们接着下载完成所有设计中需要使用到的图标,它们包括:风力、风向、湿度、空气质量、运动、紫外线、晴天、雨天、多云、多云间晴、雾、雪。
如果你的时间很宝贵不想把精力放到挨个下载上,那么我这里为你提供了打包好的所有可用素材,快去下载吧。
矢量图
矢量图是设计当中经常使用到的图片类型。当设计师放大图片的时候,
矢量图会跟着放大,但是图形的线条并不会变的模糊出现锯齿的形状。所以这是设计师的最爱。因此在前面下载矢量图标的时候,我说不用在意图标的尺寸,就是这个道理。
矢量图通常用在手动制图当中,占用的磁盘空间很小,它其实就是一个对笔划进行描述的文本文件,用文本编辑器打开的话,可以看到他的文本内容,例如,
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1484009234652" class="icon" style="" viewBox="0 0 1204 1024" version="1.1" p-id="2794" width="18.8125" height="16"> <defs> <style type="text/css"/> </defs> <path d="M882.526316 286.796992q-17.323308 17.323308-42.345865 17.323308t-42.345865-17.323308q-18.285714-18.285714-18.285714-42.827068t18.285714-42.827068l42.345865-42.345865q17.323308-17.323308 42.345865-17.323308t42.345865 17.323308q18.285714 17.323308 18.285714 42.345865t-18.285714 43.308271zM250.225564 611.12782q-3.849624-16.360902-6.255639-33.684211t-2.406015-35.609023q0-61.593985 23.578947-116.451128t64.481203-95.278195 95.278195-64"/> </svg>
这就是矢量图的描述语言。在安卓应用的设计当中,我们也有机会与矢量图进一步的打交道。
安卓应用的图形资源是支持开发者直接使用矢量图形的,安卓5.0开始的tint功能就经常需要和矢量图配合着使用。
配色方案
天气预报的整体配色,我决定从Google提供的
Material Design调色板中进行选择。
天气预报讲的是天空的故事,提到天空,第一感觉就是蓝色,因此我决定将配色方案定调成
Indigo 500,金色代表太阳,作为与之配合的
Accent Color。
打开配色方案的工具网站material palette,选择对应的颜色,
我们就得到了下面对应的颜色值,
颜色项目 | 颜色名称 | 颜色RGB值 |
---|---|---|
Primary Color | Indigo 500 | 3F51B5 |
Primary Dark Color | Indigo 700 | 303F9F |
Accent Color | Amber 500 | FFC107 |
Light Primary Color和
Divider Color我们这里暂时用不到。
图中的
Primary Text和
Secondary Text就是我们前面提到的文字颜色。亮色背景下,这里看到的颜色分别是
#212121和
#757575。准确的讲,它们应该是:
使用的场景 | 透明度 | 颜色 |
---|---|---|
Primary text | 87% | 000000 |
Secondary text | 54% | 000000 |
#212121和
#757575了。
图标的颜色应该是:
颜色透明度 | 颜色 |
---|---|
54% | 000000 |
如果您觉得本文对你有帮助,请推荐给更多的朋友;或者加入我们的QQ群348702074和更多的小伙伴一起讨论;也希望大家能给我出出主意,让这些文档能讲的更好,能最大化的帮助到希望学习开发的伙伴们。
除了CSDN发布的文章,本系列最新的文章将会首先发布到我的专属博客book.anddle.com。大家可以去那里先睹为快。
同时也欢迎您光顾我们在淘宝的网店安豆的杂货铺。店中的积木可以搭配成智能LED灯,相关的配套文档也可以在这里看到。
这些相关硬件都由我们为您把关购买,为大家节省选择的精力与时间。同时也感谢大家对我们这些码农的支持。
最后再次感谢各位读者对
安豆的支持,谢谢:)
相关文章推荐
- android应用开发-从设计到实现 2-3 颜色的运用
- android应用开发-从设计到实现 2-7 声音与触觉的利用
- android应用开发-从设计到实现 4-2 开发环境搭建
- android应用开发-从设计到实现 3-5 静态原型的Appbar
- android应用开发-从设计到实现 4-5资源的导入
- android应用开发-从设计到实现 2-3 颜色的运用(一)
- android应用开发-从设计到实现 1-2 功能的确定
- android应用开发-从设计到实现 4-3应用的创建与部署
- android应用开发-从设计到实现 3-10 资源的创建
- android应用开发-从设计到实现 3-3 Sketch静态原型设计
- Android百度地图应用开发的前期准备
- 【Android 应用开发】AndroidUI设计之 布局管理器 - 详细解析布局实现
- android应用开发-从设计到实现 2-9 界面模式
- android应用开发-从设计到实现 3-5 静态原型的Appbar
- android应用开发-从设计到实现 2-1 设计原理
- android应用开发-从设计到实现 2-6 动画效果
- android应用开发-从设计到实现 2-8 组件与常用模式
- android应用开发-从设计到实现 2-4 文字的使用
- android应用开发-从设计到实现 4-1 开发产品
- android应用开发-从设计到实现 4-4版本管理