android应用开发-从设计到实现 2-5 图标的使用

从设计到实现 同时被 2 个专栏收录
31 篇文章 0 订阅
19 篇文章 12 订阅

图标的使用

图标能给人带来最直观的印象,有的时候再多的解释也抵不过一个图标。

安卓应用的图标分成两类,

  • 应用图标:在主界面上代表着整个应用的那个启动图标,是给用户第一印象的图标。一个应用开发成功后会不会被用户下载,也许就取决于用户看它的第一眼。

     app_icons_example
  • 系统图标:在应用里面使用的各种具有特别意义的图标,引导用户进行更多的操作。

     system_icons

应用图标

应用图标的设计也是对Material Design的一种体现:制作应用图标的过程,就是对一张纸进行裁剪、折叠、上色、增加阴影的过程。

虽然应用图标可以被设计得千奇百怪,但是它还是有很多的套路可以使用的,只要遵守这些套路,你设计出来的图标也不会难看到哪里去。

先来说说应用图标的一定要执行的规则:

  1. Google给出了图标设计的网格图。设计应用图标的时候,要参考这个网格对图案进行布局和排列。

     app_icon_grid_keyline
  2. 安卓系统希望应用的图标框定在48dp尺寸方框以内,并且拥有1dp的边框(包含在48dp的尺寸以内)。为了作图的细致,建议我们将48dp的图标先放大4倍,也就是变成192dp(边框4dp),再进行设计。

     app_icon_grid_scale
  3. 图标可以根据设计线,做成圆角方形、圆形、竖长方形、横长方形。各个形状的区域尺寸分别是:

     2_5_table_app_icon_size
     app_icon_shape

    需要注意的是:虽然图标的形状不同,但是它们都是被限定在了192dp(缩放后)的正方形方框当中;标注出的尺寸都是放大了4倍以后的尺寸。

  4. 图标制作的时候,选择简单明了的几何图行。

     system_icons

之后就是和设计相关的要素了。一个图标由7个要素组成:

  1. 背景:图标的背景,这个背景的大小是由图标的形状决定的,例如圆角方形、圆形等等,并不占用图标的整个区域。

  2. 前景:图标的前景,通常就是表达应用含义的几何图形。

  3. 颜色:颜色的选择与应用界面颜色的选择一样,要选择能体现应用内容的色调。颜色不宜不多,最好不要超过3个。颜色可以只是放在前景当中,也可以只放在背景当中。

  4. tint边沿:tint是一个遮罩,可以把它理解成给图层带上了一顶帽子。这顶帽子可以有自己的颜色和透明度,与它盖住的图层混合,显示出不同的效果。我们会在后面详细讲述tint。tint边沿出现在前景和背景的上边沿。它是有规定的:

     2_5_table_system_icon_tint
  5. 阴影边沿:出现在前景和背景的下边沿。它是有规定的:

     2_5_table_system_icon_edge
  6. 阴影:前景在背景上会留下投影,这个投影也是有规定的:

     2_5_table_system_icon_shadow

    前景相对于背景的高度是1dp。

  7. 光照:图标拥有从左上方45度角照射过来的光源。要注意的是:这个光源仅仅局限在图标的内部。光源的属性如下:

     2_5_table_system_icon_light

最后我们讲讲前面提到的tint与shade的颜色。
tint与shade都是在原来图层的上方添加一个遮罩,让遮罩与图层叠加,产生不同的颜色效果。

  1. 首先确定主色调的类型:冷色?暖色?

  2. 根据下表,选择tint与shade的颜色。

     app_icon_color_cool
     app_icon_color_fresh
     app_icon_color_hot
     app_icon_color_war
     app_icon_color_neutra

例如主颜色是Yellow 500,它属于Warn暖色。因此,

  • 它的tint颜色就是主颜色添加20%的白色。

  • 它的shade颜色就是主颜色,添加20%的Deep Orange 900

 app_icon_color_example

系统图标

下面这些常见的图标都是系统图标。

 system_icons

它们都是使用粗线条的几何图案,非常简约。设计系统图标也是很套路的事情。

先来说说应用图标的一定要执行的规则:

  1. Google为这个类型的图标设计了网格图,

     system_icon_grid_keyline
  2. 安卓系统希望应用的图标框定在24dp尺寸方框以内。

     system_icon_grid_scale
  3. 图案在20*20以内,多余的4dp作为边框空着。

     system_icon_area
  4. 图标可以根据设计线,做成圆角方形、圆形、竖长方形、横长方形。各个形状的区域尺寸分别是:

     2_5_table_system_icon_size
     system_icon_shape

    需要注意的是:虽然图标的形状可能不同,但是它们都是被限定在了24dp的正方形的方框当中。

之后就是和设计相关的要素了:

  1. 图标的外部边缘都是2dp的弧形,而内部边缘都是方形;

     system_corner_key_point
  2. 做图的笔划粗细要一致,而且笔划是方形的。笔划掉粗细是2dp。

     system_icon_stroke

    假如图形很复杂,2dp实在是显得拥挤,那可以适当用细一些的笔划,例如1.5dp。如果还很难画,那就的想想是不是你的图标太复杂,要考虑更简单的图案了。

  3. 图标在界面上布局的时候,要让它拥有额外的边距。加上边距,整个图标的尺寸要达到48dp。也就是说,它上下左右的边距要有24dp。为什么呢?因为系统图标大多是需要让用户点击的,经过测试,人的手指点击时接触屏幕的区域大小差不多就是48dp。

     system_icon_touch_area
  4. 此外,在使用几何图形作为图标的时候,要选择平面的图形,有3D效果的就不需要了,因为Material Design是扁平化的设计。

系统图标的颜色设置也有需要遵循的规则,在亮暗不同的背景下,颜色不同,

  • 在亮背景下,使用黑色:

     2_5_table_system_icon_color_light_theme
     system_icon_color_light_bg
  • 在暗背景下,使用白色:

     2_5_table_system_icon_color_dark_theme
     system_icon_color_dark_bg

工具

知道了制作图标的规则,一切就好办了。如果你是设计高手,可以用工具,从无到有,完全自己画一个图标。如果你时间有限、不善此道,那么可以从网上找到很多设计图标的素材。

Google在官网上放出了很多现成的图标素材,涵盖了很多门类,基本上够我们直接拿过来使用了。

 material_icon_official_website

阿里也提供了一个收集了很多图标的网站iconfont,我们需要某个类型的图标时,可以去上面搜索。这几乎一定能满足我们的需要。

 iconfount_website

制作图标的素材最好是矢量图,这样随便缩放素材的大小,图案的边缘都可以清晰可见。而且向我们要使用的图标素材都是很简单的几何图形,矢量图占用的存储空间会非常的小。

还有一个实用的图标制作工具网站Android Asset Studio。你可以选择制作应用图标或者系统图标,调整好参数以后,就能将图标下载到本地使用。

 android_asset_studio1
 android_asset_studio2

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

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

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

  • 3
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

作者简介   杨丰盛,Android应用开发先驱,对Android有深入研究,实战经验极其丰富。精通Java、C、C++等语言,专注于移动通信软件开发,在机顶盒软件开发和MTK平台软件开发方面有非常深厚的积累。2007年获得中国软件行业协会游戏软件分会(CGIA)认证及国际游戏开发教育联合会国际认证。曾经领导和参与《三国群英传说》、《大航海传奇》、《美少女养成计划》等经典游戏的开发。 编辑本段 图书目录   前言   第一部分 准备篇   第1章 Android开发简介   1.1 Android基本概念   1.1.1 Android简介   1.1.2 Android的系统构架   1.1.3 Android应用程序框架   1.2 OMS介绍   1.2.1 OPhone介绍   1.2.2 Widget介绍   1.3 小结   第2Android开发环境搭建   2.1 Android开发准备工作   2.2 开发包及其工具的安装和配置   2.2.1 安装JDK和配置Java开发环境   2.2.2 Eclipse的安装与汉化   2.2.3 SDK和ADT的安装和配置   2.3 创建第一个Android项目——HeUoAndroid   2.3.1 创建HelloAndroid项目   2.3.2 运行HelloAndroid及模拟器的使用   2.3.3 调试HelloAndroid   2.4 小结   第二部分 基础篇   第3章 Android程序设计基础   3.1 Android程序框架   3.1.1 Android项目目录结构   3.1.2 Android应用解析   3.2 Android的生命周期   3.3 Android程序U设计   3.4 小结   第4章 用户界面开发   4.1 用户界面开发详解   4.1.1 用户界面简介   4.1.2 事件处理   4.2 常用控件应用   4.2.1 文本框(Textiew)   4.2.2 列表(ListView)   4.2.3 提示(T0ast)   4.2.4 编辑框(EditText)   4.2.5 单项选择(RadioGroup、RadioButton   4.2.6 多项选择(CheckBox)   4.2.7 下拉列表(Spinner)   4.2.8 自动提示(AutoComplete.TextⅥew)   4.2.9 日期和时间(DatePicker、TimePicker)   4.2.10 按钮(Button)   4.2.1l 菜单(Menu)   4.2.12 对话框(Dialog)   4.2.13 图片视图(ImageView)   4.2.14 带图标的按钮(ImageButton)   4.2.15 拖动效果(Gallery)   4.2.16 切换图片(hmgeSwilcher)   4.2.17 网格视图(GridView)   4.2.18 卷轴视图(ScrollView)   4.2.19 进度条(ProgressBar)   4.2.20 拖动条(SeekBar)   4.2.21 状态栏提示(Notification、NotificationManager)   4.2.22 对话框中的进度条(ProgressDialog)   4.3 界面布局   4.3.1 垂直线性布局   4.3.2 水平线性布局   4.3.3.相对布局(RelativeLayout)   4.3.4 表单布局(TableLayout)   4.3.5 切换卡(TabWidget)   4,4 小结   第5Android游戏开发   5.1 Android游戏开发框架   5.1.1 View类开发框架   5.1.2 SurfaceView类开发框架   5.2 Graphics类开发   5.5.1 Paint和Color类介绍   5.2.2 Canvas类介绍   5.2.3 几何图形绘制   5.2.4 字符串绘制   5.2.5 图像绘制   5.2.6 图像旋转   5.2.7 图像缩放   5.2.8 图像像素操作   5.2.9 Shader类介绍   5.2.10 双缓冲技术   5.2.11 全屏显示   5.2.12 获得屏幕属性   5.3 动画实现   5.3.1 Tween动画   5.3.2 Frame动画   5.3.3 GIF动画播放   5.4 小结   第6章 Android数据存储   6.1 Android数据存储初探   6.2 数据存储之Shared Preferences   6.3 数据存储之Files   6.4 数据存储之Network   6
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值