带您玩转 Material Design

640.webp

Material Design 旨在让各种平台和设备(包括 Android)上的应用实现无与伦比的现代视觉效果,在用户逐渐熟悉这种视觉效果后,便会产生依赖。如果您开发的应用符合这种设计理念,则不但能引起用户的共鸣,还能改进应用的易用性,提高用户的互动度与忠诚度。
在尝试为应用融入 Material Design 设计原则之前,请谨记下面这些 Material Design 的特点:
 1. 表面和阴影
  • 应用界面设计既非扁平化,亦非拟物化,而是有“触感”的。界面就像是由几张在不同水平面上的“纸”组成。
  • 巧妙地利用阴影来表示不同的表面,但不要对图标等前台元素(图标是“印”在“纸 ”上的)使用阴影。
  • 表面应采用单色调背景。
 2. 宛如平面设计的美学感受
  • 印在“纸”上的“油墨”应当遵循优秀平面设计的原则(层次结构、空间、字体排版等)。
  • 使用圆形漂浮操作按钮 FAB (Floating Action Button) 凸显屏幕上的重要操作。
  • 使用标准 Android 操作栏,并通过颜色和字体排版(而非应用图标或帐户名称)来凸显您的品牌。
  • 如果应用使用抽屉式导航栏,则操作栏左上方的图标应为“汉堡”(三条杠)图标。
  • 如果有标签,则它们应当在视觉上与操作栏融为一体,且中间不应有分隔符。
  • 结合使用基本色和强调色来吸引用户关注某些特定元素(如 FAB)。强调色应为亮色,并与基本色形成鲜明的对比。
  • 应用中的图标应遵循系统图标指南,而标准图标则应从 Material 图标集中选取。
  • 除头像外,图片应紧贴表面边缘不留间隙,甚至延展到操作栏或状态栏之下。
  • 依照版式原则中指定的 3 条重要原则来排列文字和其他元素。
 3. 有意义且令人愉悦的动画效果

 

  • 动画效果应有助于传达界面上发生的事件,或为小范围的转场增添趣味。同时,注意不要随便滥用动画效果。
  • 动画和转场效果应快速完成,一般不超过 300 毫秒。
  • 使用涟漪效果传达触摸反馈,使用核心转场效果从内容预览界面(如照片预览)切换到内容详情界面。
  • 使用过渡动画来表现图标状态或文字状态之间的转换,比如:“+”号旋转成“ x”号。
  • 对于滑动转场,倾向于在简单的线性移动过程中快速加速和缓慢减速。
 4. 自适应设计

 

  • 综合运用所有设计元素,针对不同的设备(手机、平板电脑、桌面设备、电视、手表或汽车)打造一致的用户体验。
  • 使用自适应设计,确保界面在任何尺寸、任何方向的屏幕上均可呈现出良好的效果。

看了上面有关 Material Design 的特点之后,您应该被其视觉效果所折服了吧!如果您还没有尝试过为应用添加 Material Design ,那就赶紧试试吧。相信这种新的设计概念会让您的应用焕发活力,从而吸引更多用户的注意。最后,感谢您的阅读!

阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=388,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?