首页 > 网页教程 > 设计分享 > 网页视觉设计如何针对用户有效表达信息

网页视觉设计如何针对用户有效表达信息

时间:2012-02-16    作者:小猛   来源:小猛的交互设计

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

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

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

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

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

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

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

传达信息的表现形式:

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

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

下面我们再看看一组banner:

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

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

2.还原物件真实感

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

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

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

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

相关推荐
腾讯CDC:泛泛而谈界面中的斑马纹设计
简单而又不单调的网页视觉设计技巧
如何杜绝网页设计中视噪对用户的影响
如何让手绘应用于视觉设计中而增强亲和力和感染力
网站页面设计中光的特效设计引导用户视觉焦点
网页PS设计教程:手把手教你制作漂亮的商业模板
网页PS设计教程:手把手教你制作WordPress新闻博客模板
网页设计教程:5个原则助你设计一个成功的购买按钮
案例分析社交型网站首页设计的优秀设计原则
从网站可用性的角度深入分析苹果和微软官网设计的优劣
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节
视觉设计之材质绘制的色彩理论
网站设计之10个儿童网站分析及设计特点总结
网页配色经验分享:叠柔配色技巧及图解分析
工具型网站设计及典型案例分析
深入探讨图片格式与网页设计的那点事儿
分享:网页核心内容对视觉表现的影响
响应式网页设计正成为移动互联网大势所趋
20个超棒的photoshop网页设计教程分享
浅谈界面设计中的结构设计
网站营销活动页面制作过程图文分享
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
深入分析网页栅格系统的规范制作
分享:360安全桌面主题设计过程及思路总结
网页设计教程分享—能影响观众的网站首页设计10个要点
网页Banner设计的风格、排版以及配色经验分享
国外精彩网页界面设计案例赏析
中文网页设计排版之破格的好例子
30个国外立体动感的视差滚动效果网站欣赏
网页设计教程:关于网页设计的那些事儿
网页设计中使用不对称设计创建不平衡中的平衡
最新Web设计8个趋势:视差滚动 响应式设计等
淘宝店铺广告文案排版快速设计经验分享

精彩推荐

热门教程