视觉设计中如何突出关键内容

标签: 视觉 设计 | 发表时间:2011-03-08 20:12 | 作者:小F daixiang
出处:http://ucdchina.com/rss/posts

互联网企业的生存就是必须要推出新的创意去引导用户在网站上进行交互,网站推出新的产品,改良用户体验,如何让用户去知道,去使用。
如果说这个网站颜色很单一,形状一样,那么用户必定是扫视一下即离开
能够让用户知道并去使用网站的新产品or关键点or有价值的,必须是
1 让用户看到 (有G点)
2 有让用户去点击的欲望(有内容)

本篇内容从视觉 的角度  讲一些 怎么去让用户看到,形成G点。使该要突出的内容“鹤立鸡群”。

一、 醒目的颜色

 

“万里红中一点绿” 这个绿色当然是最容易被发现的。这是突出关键点的常见方法之一。如腾讯网用这样的方法重点推荐微博和电脑管家产品


二、形状不一致

 

不同的形状 也会使内容从千篇一律的字海中脱颖而出,从而吸引用户去关注,常用于引导注册或购买等引导用户去与网站进行交互,凸显网站的某方面优势。如麦包包在导航中用与分类不同形状的按钮来引导用户快速选包、参加促销 和查看新上架的产品。


三、加背景色

 

加背景色也是目前用的较多的方法之一,各大网站都能见到这样的引导。最常见的是鼠标悬停时显示背景,也有固定显示背景的,如电子商务类的大分类加背景色。豆瓣中有很多利用的这一方法。


四、加外框

 

这个方法和加背景属于同一个性质。不过在中国四周加边框有其他含义。所以经常用到的还是底边的下划线。如网易新出来的一个功能,可以显示用户从上次访问到现在的更新资讯,用加下划线表示。


五、不成一条直线

 

 

将要突出显示的内容 高于其他内容 从而达到特别,去引导用户,最常见的还是在导航,或者网站地图中突出某一个服务。如焦点科技tcd团队博客的导航采用了这一方法


六、填充

 

填充看上去和加背景色差不多,不过这个方法要比加背景色更广义一点。加背景色只是把容器加了底色,而填充的概念是把容器给填满了而填充物品不局限于颜色,可以有丰富多彩的样式。如上图 麦包包的 热门分类的设计 。


七、让内容动起来

 

大家都不动,就你在动。那你该多么耀眼啊,同样的互联网产品里,静止的文字中突然有一行文字在来回晃动。那么肯定能吸引眼球。如淘宝滚动的活动商品和上图麦包包的新品推荐。

八、加阴影

 

阴影能使人对物体产生立体感。同样能够使产品凸显出来。如腾讯的今年二会专题 中的微博报道很好的利用了这一方法。


九、凹凸(立体感)

 

凹凸效果也是常见的起到重点突出的作用,最多的是按钮的表现手法,一个视觉很好的按钮足以让人产生点击的欲望。如阿里巴巴右上角用质感很强烈的按钮区引导用户去注册去查看,在鼠标滑过时原来的凸变成了凹。


十、闪烁效果

 


相信你阅读在这里的时候一定很容易的发现上图在跳跃的文字了吧,的确这种方式是很能吸引到用户的注意,但是网页上如果很多这样的效果,会显得很不友好。


十一、清晰度

 

平面设计中常采用局部模糊来烘托出重点展示的部分(如上图),在网站的品牌设计或者宣传类设计亦可用这用方法。


上面是常用的表现重点的方法,此外还有一些其他方法:

  


上面的方法是建立在已经有好的产品,旨在更好的去突出自己的产品。互联网的产品是要建立到好用的基础上去好看的。如果光有好看的外壳,没有实质可点击的内容,用户会有种上当的感觉,“狼来了”的故事是不会有人信第三遍的。

 

源地址:http://www.ue-ui.com/highlight-the-key-elements-visual-design.html

相关 [视觉 设计] 推荐:

“后视觉设计”时代

- - 阿里巴巴(中国站)用户体验设计部博客
一直想透过某种方式,把自己对视觉设计的一些理解和看法梳理一番. 同时目前团队里的视觉设计师,大多有一些共同的苦恼、疑惑和对前景的不明晰. 希望我的这些理解和看法对大家有所启发,能让大家对自己所从事的职业有更深入的思考.  这是我在某设计师群里说的一句话,里面有一个多年从事运营视觉设计的同学,立马跳出来反驳,最后到了只差骂:“你才死了.

苹果iPad视觉设计分析

- 小猪 - 月光博客
  大部分的用户都并非对体验与设计有深入研究,而是从“看着舒服、用着好用”的角度来衡量一款产品,据笔者观察一些网页设计与数码设计,发现两者之间有着异曲同工之妙,他们对用户的研究、设计发展趋势几乎是共通的,例如苹果著名的COVERFLOW,和网站设计首页焦点图展示的效果. 因此,我们常提的CROSSOVER思维可以用上了,互联网与传统数码的视觉设计与交互体验可互为灵感参考.

信息可视化(视觉化) 设计

- 虫虫 - 图研所-infographics-图表设计-信息图表-信息设计-信息视觉化专业网站
信息可视化(视觉化)是用一种人脑容易识别的形式,通过图形化的手段来传达知识、建议或者强制性的命令. 下面这张图为你剖析一下信息可视化. David McCandless的新作,还是用金字塔形讨论数据到信息到知识再到智慧的整个视觉认知体系http://www.informationisbeautiful.net/2010/data-information-knowledge-wisdom/.

情绪板携手视觉设计

- - 网易用户体验设计中心博客
互联网产品的视觉设计存在着很多不确定性,譬如:. 你按照“典雅”去设计的,他却觉得是“清新”. —— 评判的主观性 & 看到图画才明白. 有时不喜欢某些设计作品,却无法立即说出原因—— 潜意识. 开始要求一种风格,很快变卦要求改成另一种风格—— 不了解用户. 如果“以用户为中心的设计”不是一个噱头的话,我们可以试试让“用户”来给视觉设计一个方向.

5°专场视觉设计小析

- - 阿里巴巴(中国站)用户体验设计部博客
这个主题是2012年下半年的一次内部分享,迟迟未形成文章,马上过年了赶紧整理起来,顺便给视觉设计师们拜年了. 我自己内心的一个呼唤,明年脱离“苦逼”二字……. 网站的专场设计,应该算是网页视觉设计师的必修课,应该也算是最基本功. 她所需要的设计理论都是最基本,但同时也是最重要的. 设计理论版本多如牛毛,我这里仅仅整理5个方面来分析网页专场设计的一些方法,本人并非大师或资深,欢迎各式拍砖.

Web设计中的视觉层次

- - 飞鱼的声纳
原文链接: http://www.zcool.com.cn/article/ZNTg3MDg=.html. 领导和客户经常说的一个点就是,xxx,这个设计总感觉少了点什么东西,太”平”了,没有层次呀,你再改改吧~~你脑中可能一片雾水,层次听过也知道,但怎么做呢. 其实视觉层次没有明确的官方定义,但我们可以理解为通过点、线、面、色彩、图形等造型元素来表达平面构成与空间构成的方式,合理的点、线、面、色彩、图形的排布会让平面和空间更加合理,即有视觉层次.

视觉设计中如何突出关键内容

- daixiang - 最新文章 - UCD大社区
互联网企业的生存就是必须要推出新的创意去引导用户在网站上进行交互,网站推出新的产品,改良用户体验,如何让用户去知道,去使用. 如果说这个网站颜色很单一,形状一样,那么用户必定是扫视一下即离开. 能够让用户知道并去使用网站的新产品or关键点or有价值的,必须是. 2 有让用户去点击的欲望(有内容). 本篇内容从视觉 的角度  讲一些 怎么去让用户看到,形成G点.

视觉灵感:30个漂亮的的网站设计

- 小明 - 博客园-首页原创精华区
     在客户签合同之前会从我们的网站了解我们, 所以公司的网站设计对合同的签定与否很重要. 30个漂亮的的网站设计 灵感展示,会让你大饱眼福. 英文原稿:Visual Inspiration: 30 Beautiful Web App Site Designs. 出处:http://www.cnblogs.com/xiaoyao2011/.

20130508早读课:交互设计师,你要懂视觉

- - 互联网er的早读课,专注产品、用研、交互
推荐理由:作者@Danis2010. 交互设计师之所以要懂得视觉语言,主要体现在原型制作的工作部分,因为输出的虽然是低保真原型,但低保真原型的设计过程其实也是一个视觉化过程. 在定好功能,搭好信息架构之后,一般进行单独界面的框架设计. 框架设计是元素在界面上的大致布局,界面分几块区域,哪一块区域放什么内容之类的.

【网易北京】招聘交互/视觉设计师

- - legene的交互设计博客
网易UEDC (用户体验设计中心) 网址: http://uedc.163.com/. 1.主要负责电商(如彩票、保险等)或生活服务类产品的交互设计工作. 2.与策划人员沟通,协助其系统地梳理需求. 3.参与各种类型产品的交互设计规范的制作. 4.参与部门内外的用户体验概念和流程的普及工作. 1.至少1年的互联网产品交互设计工作经验.