视觉设计如何表达信息


  在日常工作中,我们经常会遇到一些设计的很”漂亮”的图片不被用户认可,点击率很低,这时候我们会暗地里抱怨,可却没明白问题究竟出在哪?

  网页设计与平面设计究竟有啥区别,我们主观的为页面添加元素的时候是否有章可循,博主以前曾是一名视觉设计菜鸟(现在也是),以自己的切身体会谈谈在Web页面设计中的一些体会。

  下面我们先看一个专题的banner:


  第一眼看上去,画面感好像还行,但细看后会发现整个画面没有一个视觉中心,这张图片究竟想表达什么也没有说清楚,看看上面的元素:女人,模特架,灯光,展厅,衣服。好像表达了很多,其实除了设计师本人知道这是衣服与配件专题的banner,其他人都一头雾水。

  那我们再看看同样主题的banner:


  画面中心的”fashion apparel”告诉我们是卖时尚衣物的,图片元素还告诉我们,这里卖衣服配饰,鞋,内衣,泳帽等等。这个banner不仅表达了衣服与配件的主题,还直接告诉了我们种类的齐全。

  通过这个例子我们会渐渐明白视觉设计的目的:视觉设计的本质是为了更好的传达信息。

  传达信息的表现形式:

  那么究竟怎样才能通过设计把需求信息出色的表达出来,这里面学问很多,我就谈一谈自己的理解:

  1.产品风格 在做设计之前,我们先要搞清楚服务的对象是谁,每个人群的认知度不同,设计风格也要根据人群的认知度而调整,说简单点就是要先根据目标人群确定设计风格。

  下面我们再看看一组banner:


  两者的区别在于字体发生了变化,但传达出的产品气质却大相径庭。”领动”是一个商务产品,但这个 banner的字体显然不能表达商务人士干净利索的做事风格,对产品的信任感自然就会降低,信任感缺失,表达的文案也就没有了任何意义。

  所以,设计的风格要去迎合访问者的喜好。打个比方,粉色肯定不能用在军事网站,红色也不能作为医疗网站的主色调 。 产品的视觉气质就是一种信息的表达。

  2.还原物件真实感

  什么叫物件真实感?我们先看下面的图片


  上图是iBooks的界面。美观的内容形式,富有真实感,利用熟悉的木质书架UI使用户感到在体验上的自然。

  产品的界面是访客熟悉了解产品的主要途径,当产品的界面接近真实世界时,用户的学习成本越低,产品的易用性就会提高。再看一组太阳能主题banner:


  对比两个banner,抛开一些细节的推敲,第二张图片传达的信息明显比第一张要通俗易懂,设计师不能够主观的代表用户的审美认知能力,还原物件的真实情感,呈现最真实的产品图片,是一种很直接的信息表达方法。

  3.统一规范

  设计没有一个硬性的评价标准,正是因为这样设计才会显得精彩纷呈。但产品用户界面的设计不能等同于海报招贴的设计,在追求差异化和表现力的同时,我们要以传达信息为主要目标,以提高产品的易用性为前提。

  我个人觉得一个出色的设计并不是让人眼前一亮的感觉,而是让用户有种进自家房间的熟悉感和归属感,面对信息量大的互联网页面,视觉设计师的职责就是让用户以最快捷的方式找到需要的信息。

  互联网发展至今,大多数用户有自己的定向思维的使用习惯,如何才能将用户界面的设计符合用户的喜好,就需要去符合主流的视觉规范或者制定一个视觉规范。下面看几个视觉规范的例子:

  ①元素的统一


  ②布局的统一


  上图是www.Made-in-China.com的登录注册口,,这块区域的可点击区域太多,为了保证页面的简洁的视觉效果,Button并没有保持统一,但是登陆口,注册、找回密码,指南都在同一区域内,这是一种行业规范的统一,大都数用户都会意识到注册入口在登陆口的附近,所以注册口没有做成 Button而只是做了一个简单链接。

  总结:上面的内容都是我到焦点设计部这个新环境的体会与感想,这些可能是大家熟悉到忽略的知识点,我希望这些内容能够帮助以后像我一样的新同事,少点迷茫,树立一个正确的设计价值观。

  作者:小猛

  文章来源:小猛的交互设计

时间: 2024-07-30 10:18:05

视觉设计如何表达信息的相关文章

Web2.0网页设计趋势:为表达信息而设计

自从web2.0之后,网页设计开始走向实用设计的阶段,越来越多的设计师注意到"为表达信息而设计". 着迷于前段时间黑白灰老师给大家介绍的"infographic"这里为感兴趣的同学推荐一些有用资源."infographic"由最初的概念变成一个新的专有名词,越来越多的专家研究并推崇这种令复杂信息更容易理解的设计手段.一部分可视化设计聚焦在传达精确的数据及统计信息,另一部分则聚焦在传达抽象的概念上. 很可惜"infographic&quo

网站视觉设计中的信息传达

当代的网页视觉设计由最初的信息堆砌到后来的图形化.抽象化,更到今天的信息视觉化,经历了3个迥然不同而又相互递进的过程.目前,除了一些艺术或个人网站,其他绝大部分的网站都以信息的准确传递为视觉设计的主要目的. 信息以文字.图片.色块为主要的载体,经过编排在浏览器里对用户展示,这要求网站构成的绝大部份必须是能清晰阅读的文字和准确无误的图片. 同其他种类的视觉设计一样,信息为主的网站视觉设计需要遵循一些基本的美术规则,运用一些简单有效的美术手段来达成.下面我们来谈一下这些具体的方法论. 高傲的空间 -

视觉设计是为了表达信息

在日常工作中,我们经常会遇到一些设计的很"漂亮"的图片不被用户认可,点击率很低,这时候我们会暗地里抱怨,可却没明白问题究竟出在哪? 网页设计与平面设计究竟有啥区别,我们主观的为页面添加元素的时候是否有章可循,博主以前曾是一名视觉设计菜鸟,以自己的切身体会谈谈在Web页面设计中的一些体会. 下面我们先看一个专题的banner: 第一眼看上去,画面感好像还行,但细看后会发现整个画面没有一个视觉中心,这张图片究竟想表达什么也没有说清楚,看看上面的元素:女人,模特架,灯光,展厅,衣服.好像表达

视觉设计是为了更好的表达信息

在日常工作中,我们经常会遇到一些设计的很"漂亮"的图片不被用户认可,点击率很低,这时候我们会暗地里抱怨,可却没明白问题究竟出在哪? 网页设计与平面设计究竟有啥区别,我们主观的为页面添加元素的时候是否有章可循,博主以前曾是一名视觉设计菜鸟(现在也是),以自己的切身体会谈谈在Web页面设计中的一些体会. 下面我们先看一个专题的banner: 第一眼看上去,画面感好像还行,但细看后会发现整个画面没有一个视觉中心,这张图片究竟想表达什么也没有说清楚,看看上面的元素:女人,模特架,灯光,展厅,衣

视觉设计的目的:传达信息的表现形式

文章描述:视觉设计如何表达信息. 在日常工作中,我们经常会遇到一些设计的很"漂亮"的图片不被用户认可,点击率很低,这时候我们会暗地里抱怨,可却没明白问题究竟出在哪? 网页设计与平面设计究竟有啥区别,我们主观的为页面添加元素的时候是否有章可循,博主以前曾是一名视觉设计菜鸟(现在也是),以自己的切身体会谈谈在Web页面设计中的一些体会. 下面我们先看一个专题的banner: 第一眼看上去,画面感好像还行,但细看后会发现整个画面没有一个视觉中心,这张图片究竟想表达什么也没有说清楚,看看上面的

分享一些可视信息设计资源

自从web2.0之后,网页设计开始走向实用设计的阶段,越来越多的设计师注意到"为表达信息而设计". 着迷于前段时间黑白灰老师给大家介绍的"infographic"这里为感兴趣的同学推荐一些有用资源."infographic"由最初的概念变成一个新的专有名词,越来越多的专家研究并推崇这种令复杂信息更容易理解的设计手段.一部分可视化设计聚焦在传达精确的数据及统计信息,另一部分则聚焦在传达抽象的概念上. 很可惜"infographic&quo

揭秘信息可视化图表的设计方法

  今年最火的信息图教程来了!本文是百度同学总结的,包括信息图的6大类型和信息图设计流程两个方面,每方面都有细致展开,包同学们看得懂,学得来 >>> 信息可视化包括了信息图形.知识.科学.数据等的可视化表现形式,以及视觉可视化设计方面的进步与发展.地图.表格.图形,甚至包括文本在内,都是信息的表现形式,无论它是动态的或是静态的,都可以让我们从中了解到我们想知道的内容,发现各式各样的关系,达到最终解决问题的目的.信息可视化的意义就是在于运用形象化方式把不易被理解的抽象信息直观地表现和传达出

可视化图表10个错误的表达方式,你犯了几个?

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   数据可视化是一个沟通复杂信息的强大武器.通过可视化信息,我们的大脑能够更好地抓取和保存有效信息,增加信息的印象.但如果数据可视化做的较弱,反而会带来负面效果.错误的表达会损害数据的传播,完全曲解他们 所以优秀的数据可视化依赖优异的设计,并非仅仅选择正确的图表模板那么简单.全在于以一种更加有助于理解和引导的方式去表达信息,尽可能减轻用户获 取信息的成本.当然并非所

信息架构中的常见模型

<信息架构中的常见模型>是整个"web交互设计方法"中的一部分: 本期的内容目的是分享和总结信息架构中一部分基本的交互模型.信息架构需要考虑内容和功能的建构,首先需要考虑怎样组织内容和功能的关系,也就是切分内容,如何把一些动作和对象跟主题顺畅的结合起来:第二步就是考虑怎样引导用户通过界面达成他们的目标,也就是用"物理结构"把内容用页面\窗口\面板等元素将信息表达出来,交互模型正是针对第二个步骤来说的,这些模式帮助我们在表达信息的时候能够有一些常用的思路和