图标点击区域
图标应该提供充分的留白和操作区域便于用户手指的点击,比较类似iOS的处理方式,图标大小接近手指点击区域7mm-9mm,如果不够的话就增加透明的点击热区。
图标点击状态
未点击图标颜色为#000000,透明度为87%。点击态图标颜色为#000000,透明度为38%。
图标的点击状态
图标的品牌感
下面这个案例中图标和界面内容的直角相互呼应,体现了自身的品牌感。
1 品牌图标 2 锋利角度的图标 3 应用中的直角图标
形状
Material Design过去的版本中对形状规定较为死板,最新的Material Design在形状上可谓是非常自由了。菱形、半圆形、圆角都可以使用,这些充满个性的形状可以帮助我们构建更酷的界面。
可自行定义的形状
独特的形状可以引起用户的关注
形状也可以表示内容被选中
品牌感
我们可以在整个应用程序中使用体现品牌感的视觉语言,以一致的方式将形状、颜色、弧度等特征设计界面的不同元素。这样有助于提升品牌的整体印象。当用户看到某种颜色或者形状时,就会想到我们的产品。
界面中使用了统一的形状增强品牌感
交互
空状态Empty states
空状态应该和品牌一致,可以使用幽默和可爱的情感化设计来和用户产生亲和感,但是不应该体现可操作性。不要使用口号和可点击的暗示。
空状态
警告对话框Alert dialog
警告对话框可以让用户预知下一步会发生什么,并提供选择来取消这个行为。比如删除操作通常都会提示用户是否确定要删除。
警告对话框
闪屏launch screens
闪屏可以使用像苹果平台上APP那样的图形,比如微信的闪屏页或开眼的动态闪屏等。除了闪屏页的图形动态设计之外,我们也可以使用内容的占位符作为启动页,这样用户会预知我们即将载入大概什么样的内容。
闪屏
图像 images
在我们设计的APP中一个图像可能会被裁切成多个尺寸,比如1:1、3:4、16:9等,甚至是圆形或正方形。这时需要保持图像的核心区域在任何尺寸中都显示到。
图像的设计
新手引导Onboarding
Material Design建议产品设计新手引导界面,以此来帮助用户了解该程序是如何操作和有什么样的独特功能。通常新手引导会由插图、功能描述、注释文本、启动图标、焦点组成。这里和iOS的设计比较一致,但是大家要注意功能描述文本和注释文本的大小比例。
新手引导的设计
离线功能Offline states
有些功能会因为无网络而无法完全使用。这时同样需要我们设计一些状态来表示现在是无网络的,让用户感知这个状态。当然,无网络不代表什么也
FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/
飞特游客
委托设计