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

互联网企业的生存就是必须要推出新的创意去引导用户在网站上进行交互,网站推出新的产品,改良用户体验,如何让用户去知道,去使用。

如果说这个网站颜色很单一,形状一样,那么用户必定是扫视一下即离开
能够让用户知道并去使用网站的新产品or关键点or有价值的,必须是
1&">nbsp;让用户看到 (有G点)
2 有让用户去点击的欲望(有内容)

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

一、 醒目的颜色

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

二、形状不一致

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

三、加背景色

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

四、加外框

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

五、不成一条直线

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

六、填充

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

七、让内容动起来

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

八、加阴影

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

九、凹凸(立体感)

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

十、闪烁效果

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

十一、清晰度

平面设计中常采用局部模糊来烘托出重点展示的部分(如上图),在网站的品牌设计或者宣传类设计亦可用这用方法。
上面是常用的表现重点的方法,此外还有一些其他方法:

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

源地址:http://www.ue-ui.com/high……l-design.html

时间: 2024-09-14 21:24:39

视觉设计中如何突出关键内容的相关文章

qtcreator-Qt导出word文档,如何在代码中设置文档内容的样式?

问题描述 Qt导出word文档,如何在代码中设置文档内容的样式? RT.网上查了一下,基本都是用模板+书签的方法来插入内容,但是我现在想直接靠运行程序来生成一个文档,但是这就有一个问题,文档内容的格式就得写在代码之中,而不能像书签那样把格式定好了直接插内容就行.各位大神知道怎么弄吗? 解决方案 一样的,可以对Selection应用段落样式来实现.具体可以在word中录制一个宏,然后根据自动产生的VB代码照着写.

打印网页中定义的部分内容的实现方法

打印|网页 正常情况下的打印是使用 window.print(); 直接整页打印,但如果需要打印网页中定义的部分内容,则可使用如下的方法: 1.在页面的代码头部处加入JavaScript: <script language=javascript>function doPrint() { bdhtml=window.document.body.innerHTML; sprnstr="<!--startprint-->"; eprnstr="<!--

左中右3栏布局中最先显示中栏内容的方法

显示 作者:dodo 2005-5-17 14:39:50作者:dodo [网站重构]译者之一,原文在这里:http://www.donews.net/dodo/archive/2005/05/16/382248.aspx,需要转载的先联系作者. 这个IDEA来自KESO.今天KESO说,对于一个左中右3栏布局的页面,比如home.donews.com,用户最想看到的是中栏的信息,左右2栏其实网站的相关信息的导航入口,所以中栏信息是最重要的,应该在页面显示顺序上优先于左右2栏.或者也可以这么说就

在ASP.NET中动态加载内容(用户控件和模板)

asp.net|动态|加载|控件|模板 在ASP.NET中动态加载内容(用户控件和模板)要点:1. 使用Page.ParseControl2. 使用base.LoadControl第一部分:加载模板 下面是一个模板"<table width=100%><tr><td width=100% colspan=2 runat=server id=ContainerTop></td></tr><tr><td width=30%

别把设计想复杂——视觉设计中图形创意

引: 别把设计想复杂,一听到"设计"大家都觉得是多么深奥的一件事情.我们的生活确实离不开 设计,设计给我们带来了很多的便捷和美的享受.我想设计不是创造,而是发现.设计来源于生活,在点点滴 滴中发现美的,丑的,寻找大自然的规律,应用其中.只要我们掌握了规律,就能信手拈来,完成一个满意的 作品.那么在视觉设计中,有哪些表现手法(规律)呢? 视觉设计中图形创意 图形创意是视觉 设计中重要的一个部分,可以说找到好的图形创意就是成功的一半. 什么是图形创意? 采用一 定的形式来表达创造性的意念,

如何更改其它程序ListView控件中某个Item的内容

一:程序说明 这次我将介绍如何更改其他程序ListView控件中某个Item的内容,关于类似的拙文我已经写了两篇,这是第三篇,本篇和第一篇<如何向其他程序的 ListView 控件发送 LVM_GETITEMTEXT 消息>类似,区别在于: 发送的消息不同:前者是读取pszText的内容--发送LVM_GETITEMTEXT:这次是设置pszText,应该发送LVM_SETITEMTEXT: 字符串缓冲区的作用不同:前者pItem用来接收ITEMTEXT,我们可以通过ReadProcessMe

在Word中整理笔记页中的手写内容的方法

在Word中整理笔记页中的手写内容的方法   图1 OneNote中的手写内容 在OneNote 2007中,打开需要导入到Word中的笔记页,然后,执行菜单栏中的[文件]|[发送至]|[Microsoft Office Word]命令(如图2所示),即可将手写内容转换为标准的文本并发送到Word中,这样就可以对其进行相关排版.打印等操作了,如图3所示. 图2 执行菜单栏中的[文件]|[发送至]|[Microsoft Office Word]命令

Word文档中删除表格保留内容的方法

  Word删除表格保留内容的方法 1.选中表格,单击"边框"图标右边的小三角,如图1所示(Word2007-2013): 文档中删除表格保留内容的方法-word删除表格保留文字"> 2.选择"无框线",表格线已经不存在,只留下文字,如图2所示: Word2003 依次选择"表格" → 表格属性 → 边框和底纹 → 无边框.

Word文档中快速输入特定内容的方法

  Word文档中快速输入特定内容的方法           1.单击"文件"按钮,在打开的面板中选择"选项". 2.此时会打开名为"Word选项"的窗口,在左侧选择"校对"命令,然后在右侧的窗口中找到"自动更正选项"按钮. 3.在"自动更正"选项卡的"替换"文本框中为自己需要重复输入的内容设置一个"快捷键"(例如<1>),然后在&qu