【UXRen原创】图像2——Material Design专题分享(8)

md-08-00

非凡回来了,今天继续讲Imagry(2)的具体使用原则演示。

  • Best Practices
  • UI integration

回顾上期讲到的意象表述中具体摄影图像和抽象隐喻插画两种的使用,都是以传递信息为目的。这其中涉及到一些使用原则,遵循这些原则会让我们的设计更加令用户愉悦,达到我们设计的目的。这些原则总结起来就是以下几点:

  1. 构建情景
    摄影图片和绘画隐喻插画是可以混合使用的,只要符合情景,不要拘泥于拟物和扁平,自然的令用户愉悦的适当表达情景的就是好的。
  2. 有焦点
    让表象拥有可读的焦点,避免信息混乱,变现不明
  3. 清晰度、愉悦感
    不要使用不清晰的图片、文字等,造成失真,同时不要使用令人不愉快的图片、文字等。
  4. 适当的留白
    适当留白,制造层级和视觉缓冲空间
  5. 文字的运用
    在不影响主图的情况下,使用恰当的文案,不要喧宾夺主。
  6. Hero images
    这里引用原文Heroimages主图通常在一个关键的位置,并在附图的上面。主图是被突出、被服务的对象,共同表现主题和品牌的传达。

 

具体展示

  1. 针对具体的场景,使用摄影图片的效果
    md-08-01
  2. 当具体的摄影图片无法完全呈现我们的信息时,采用插画。
    md-08-02
  3. Stay away from stock使用真实的场景影像
    md-08-03
  4. 不要使用切除部分的局部图像
    md-08-04
  5. 让表现影像拥有焦点
    md-08-05
  6. 切勿采用没有焦点的图片
    md-08-06
  7. 建立情景
    md-08-07
  8. 没有情景的体现
    md-08-08

UI integration

  1. 图片的精度要求
    md-08-09
  2. 失真的图片
    md-08-10
  3. 留白 创造信息的层级,提高阅读性
    md-08-16
  4. 文字保护
    md-08-13
    md-08-14
  5. 保护过度
    md-08-15
    md-08-16
  6. Hero images
    md-08-17
    md-08-18
  7. Gallery 使用的两种方式
    md-08-19
    md-08-20
  8. 头像和品牌的使用
    md-08-21
    md-08-22

 

好了,今天的展示例子略多,希望大家细细品味。

 

 

feifan-logo
作者:邬非凡,现互联网交互设计师,崇尚自然设计并将生活情感与设计相结合,目前死磕Material Design 分享和学习。非凡语录“享受生命的过程”
顶部图片来源:http://www.androidcentral.com

=======================================================================================

不知不觉本网站已经一岁半了, 在这里小编要感谢那么一如既往支持本站的油茶人。

同时也欢迎各位喜欢13太保的同学们把自己收集的好资源一起分享给更多油茶人,如果有意愿在网站发布原创性的文章也欢迎随时和我们联系!我们收到邮件后会认真的查看和回复。

投稿邮箱:contact@13tech.com.cn

=======================================================================================

 

发表评论

您的电子邮箱地址不会被公开。