视觉设计是为了表达信息

2019-04-03    来源:小猛的交互设计

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

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

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

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

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

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

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

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

传达信息的表现形式:

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

1.产品风格

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

下面我们再看看一组banner:

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

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

2.还原物件真实感

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

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

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

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

3.统一规范

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

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

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

①元素的统一

②布局的统一

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

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

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

标签: 视觉设计 网页设计 交互设计 

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇:关于QQ邮箱注册过程的优化建议

下一篇:“泡上”用户的三步法