欢迎来到天天文库
浏览记录
ID:55026179
大小:982.00 KB
页数:22页
时间:2020-04-26
《不仅要漂亮:看图像如何引导用户体验!.doc》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、不仅要漂亮:看图像如何引导用户体验! 俗话说得好,“一图胜千言”。图片不仅要漂亮,还要够意思! 不仅要漂亮:看图像如何引导用户体验! 俗话说得好,“一图胜千言”。图片不仅要漂亮,还要够意思! 不仅要漂亮:看图像如何引导用户体验! 俗话说得好,“一图胜千言”。图片不仅要漂亮,还要够意思! 俗话说得好,“一图胜千言”,人类是高度视觉化的动物,能瞬间处理视觉传达的信息,研究表明我们的大脑能感知和捕获的90%的信息都是视觉信息。图片可以迅速吸引用户的注意力,并让用户迅速从众多商品中认出你的商品。此外,图像还可以跨越语言障碍,但是单纯的文字却做
2、不到。 图像不应该仅仅用于装饰,他们有能力创造或打破用户的体验。在这篇文章中,我们将介绍一些有用的原则和最佳实践,帮助您将图像融入到您的设计中。 只使用相关的图像 每张图像都有它的故事。就像写作一样,在开始之前你要知道自己想表达什么才是极好的。引人入胜的图像有激发用户吸引力的独特功能,但不是所有的图像都能达到这种体验,那些不合时宜的图像仅仅起到了占位的作用,而更糟糕的是它们会混淆视听,在设计中最危险的就是使用了传达错误信息的图像。 不能表达主题的图片往往让用户困惑 用户对图像的反应速度要远比文字快得多,所以务必确保你的内容和图像是高度匹
3、配的。只选择和使用与你的产品目标强相关的图像,并确保上下文是有关联的。 减少图像中的视觉干扰 “越多越好”的原则不适用于图像。你的网站或者app不是用来展示图像的,反之,图像可以用来表现产品。在设计中只使用能抓住用户注意力的图片,不求最多,只求最好。 使用高质量不失真的图像 确保你要使用的图像在跨平台显示时的尺寸是合适的。确保图像不会失真,所以一定要对不同分辨率的设备进行反复测试。展示图片或图形其原有的比例,不要将其比例放大超过100%。没有人想看到自己的图像或艺术品看上去是变形的,要么太小,要么太大。 左图:失真的图像;右图:正确的分
4、辨率 在进行响应式网页和手机应用设计的时候,常常会在为选择什么图像能最好的适配不同的用户设备上产生争议。很显然,能适配所有屏幕和设备的的图像是稀缺货,然而,对不同像素的图像的需求却太多,一次性剪裁所有尺寸图像的工作量是巨大的,特别是如果你有大量的图像,整个人几乎是崩溃的。 那么,怎么才能自动适配所有尺寸的图像呢?还好我们都是这个时代的幸运儿,一些在线工具可以帮助你处理不同尺寸的图像。Cloudinary就是一个能够帮助你生成响应式图片的在线工具。此工具使用先进的算法,将上传的图像生成最匹配的图像断点,以方便为每个上传的图像生成最佳匹配断点,在图像
5、基础上进行分析从而找出匹配的断点,而不是创建所有可能的图像分辨率。(关于图像断点的概念请自行度娘或谷哥,嫌弃脸) Cloudinary就是一个批量剪裁、调整图像尺寸的在线工具 图像聚焦要适度 能够吸引用户注意力的美观的图片当然有其价值,但它的代价是有可能牺牲用户对其他元素的关注和使用。 如果在图像上用力过猛,往往会产生视觉过度,这样会严重影响用户对内容的注意。以SoundCloud’s(如下图app)为例,用户将所有注意力都集中在了界面的图像上,几乎忽略了下面的两个按钮。 Soundcloud的主界面上的背景图的吸引力已经超过了下面
6、的按钮 虽然图像聚焦的设计在多数设计中是合适的(以苹果官网主页面为例),应用程序和网站在设计时,应该遵循一个平衡的法则-向用户展示的图像要能表达产品理念,但不能喧宾夺主,掩盖其主要功能。 使用多种介质 插画和照片可以同时被运用在同一个产品里。 照片是用来展示一个实体或者描述一个故事很好的元素。例如,我们不需要展示各种各样的花,只需要展示一朵玫瑰花。 对于特定实体,使用照片展示插画在表达概念和隐喻的时候尤为有效,这是照片望尘莫及的。 当总的特性不需要表达的时候,用插画来传达一个近似的内容以帮助理解是极好的。 只有一个焦点 图像是
7、信息传达的视觉交流工具,焦点明确的图像只需一瞥就能领会其意思,反之则不然。 当图像的视觉焦点变得模糊不清时,它的价值也就消失了: Don’t:视觉焦点较弱的图像能表达的意义也相对较弱 不要试图让你的用户从你的图像中寻找含义,要确保将清晰地概念通过显著的方式传达给对方。 Do:焦点明确的图像只需一瞥就能领会其意义 尽量减少图像上干扰表达图像意义的元素。 展示真实的人像 人像是吸引用户注意力的一个有效的方法,当我们看到其他人的面孔时,我们会感觉自己跟他们是相关联的,而不是单纯的在使用一个产品。然而许多公司的网站为了“建立信任”,雇佣
8、模特,拍摄并使用过度虚假的照片,这往往适得其反。 Don’t:不真实的图像,给用户用户一种肤浅的、虚假
此文档下载收益归作者所有