设计中如何突出网站的关键内容

2016-02-17 03:18 1 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的设计中如何突出网站的关键内容,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - 平面设计 】

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

如果说这个网站颜色很单一,形状一样,那么用户必定是扫视一下即离开

能够让用户知道并去使用网站的新产品or关键点or有价值的,必须是

1 让用户看到 (有G点)

2 有让用户去点击的欲望(有内容)

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

一、 醒目的颜色

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

二、形状不一致

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

三、加背景色

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

四、加外框

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

五、不成一条直线

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

六、填充

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

七、让内容动起来

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

八、加阴影

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

九、凹凸(立体感)

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

十、闪烁效果

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

十一、清晰度

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

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

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

设计中如何突出网站的关键内容,PS教程,图老师教程网

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

来源:https://www.tulaoshi.com/n/20160217/1578004.html

延伸阅读
当将易操作的理念融合到网站设计中时,网站设计的问题就变得更加复杂。当大多数人将使用全屏显示器访问计算机时,这些理念往往容易被大众忽视。除了需要考虑人们的身体条件如视力不好外,你也不得不注意到关于浏览器市场的不断变化。 给你的用户群提供一个完美的浏览体验并不是一件容易的事。它需要你非常努力的工作,并且要很专注才行!因为存...
学习banner设计的同学开始可能最难琢磨透的就是中文的排版了,有同学是直接凭直觉给文字排版的,其实排版作为平面设计中的一种具体的手段,本质是对于画面中元素的关系的处理。那在平面设计中,到底什么样的排版能突出中文的美感呢,-eno-one-老师为我们撰写了一篇深入浅出的教程,相信阅读后你会对「排版」有一番新的认知 :) 我们先从500万...
标签: 电脑入门
在Word2010文档中可以突出显示查找到的内容,并为这些内容标识永久性标记。即使关闭查找和替换对话框,或针对Word2010文档进行其他编辑操作,这些标记将持续存在。在Word2010中突出显示查找到的内容的步骤如下所述: 第1步,打开Word2010文档窗口,在开始功能区单击编辑分组的查找下拉三角按钮,并在打开的下拉菜单中选择高级查找命令,如图1...
标签: Web开发
对于大多数个人站长来说,可以确定的是都不是枪手,可以肯定的是都不是写手,可以十分明确的是都是采集高手.但是采集的内容在做网站这行来说,谣传是不容易被搜索引擎收录的,特别是在新站初期,归结下来新手站长前期一定要注意网站内容的原创性,原创估计大多数站长是不太可能的,那实在没有办法个人站长前期只有先充当非专业网站编辑了,...
最终效果图: 具体的创建步骤如下: 一、新建一个文档,640像素宽、480像素高,白色背景。接下来新建一个图层,填充为#e2e2e2,重命名为bg,在图层面板中右键单击bg图层,选择转换为智能物件(Convert to Smart Object)。然后给该图层应用滤镜(Filter)杂色(Noise)添加杂色(Add Noise)命令。各项参数设置如下图所示: 二、新建一个图层...

经验教程

87

收藏

21
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部