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

md-07-00

第一阶段的Material Design 介绍和动画,已经讲完了,接下来讲Style部分的Imagery。

 

Imagery(1)

  • Contents
  • Principles
  • Best practices

 

Contents

MD中的Imagery指的是表现意象,并不单单指图片,这里翻译是有偏差的,以后我都会用原文的标题表述。

意象的表述并不单单是装饰,它是帮你连接用户内心和突表现产品的独特的手段。有目的地传递你想要表达的含义,让用户感到愉悦。这就是它的使用基本理论支撑。意象的表述是多种多样的,我们常见的主要是摄影、绘画类的抽象表述、文字。

 

Principles

在表述意象的时候,需要遵守的首要原则就是,所表述的意象必须和所要表达的内容相关联,关联性越强,越容易达到我们的目的。

  1. 反应个人的相关性。让我们的图片与信息关联,成为一个整体,使我们一眼就能读懂这个页面的信息。在识别原则中,我们对熟悉的东西往往能很容易识别,比如猜歌、车标识别、麦当劳等品牌识别;在我们搭配图片的时候,考虑好实用场景。
    md-07-01
  2. 信息的表述;我们需要表述信息的时候,往往是一个抽象的概念,这时候需要我们使用一些隐喻去代表我们的含义;比如航空旅途
    md-07-02
  3. 表述得愉悦,阳光向上的感觉;每个人都喜欢看到一张微笑的脸好过一张负面情绪的脸。就是这样,我们黑暗有天生的恐惧;在设计过程中五路你是选择色彩还是选择形状符号,我们都会选择让人舒服的颜色和尽量是平滑、圆润的符号,而不是看起来刺眼、不舒服的色彩和尖锐的形状。这会让人联想到不愉快的事物。就像咖啡厅和面包店,可以去观察一下,一般都是暖色的咖啡色和偏黄色的色系。这个和表现情景有关。
    md-07-03

 

Appreciate context

确保我们的图片衔接好上下文,使用准确的表述。比如我经常看到一些网页或者APP某些功能用户第一次看到完全不知道是做什么的,需要去尝试,这就是表述和关联性不契合造成的。或者是更糟糕的,经常使用还会犯错的设计绝对是最差劲的。

正确示范上下文关联性

md-07-04

 

Beimmersive

使用图片的时候代入情景,能让用户有更好沉浸感,如身临其境,就好像你看到一张大海的图片,会联想到海浪的声音。如果闭上眼睛,安静倾听海边的录音,我们会身临其境,好像真的在海边一样。

md-07-05

 

心得

  1. 不要把意象单纯地理解成图片,它是一种表现表现,不是形式。
  2. 主要表现手法有 摄影 绘画插图,摄影指照片,绘画插图指平时画出来的图形,可以是任何符号包括文字。
  3. 摄影是现实事物的真实表现,在我们需要表述现实内容场景的时候尽量使用摄影照片
  4. 绘画插图是表现概念和隐喻,比如Icon、抽象图形等,如果采用摄影照片会产生模糊认知。
  5. 结合产品和情景去考虑我们要表述的目的,再去思考表现手法。

Imagery 内容有点多,明天接着说它的具体使用和表现手法。

 

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

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

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

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

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

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

 

发表评论

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