网页设计中的规律:色彩与按钮

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

下面是个超简单的网页设计中的规律:色彩与按钮教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - 平面设计 】

随着开放平台日益增多,衍生出来的各类应用服务也就呈不断增长的趋势。这些应用服务的站点设计也可谓是五彩斑斓,灿若繁星。

我们可以来找找这些网站的设计是否有规律可循。

通常一个网站,都会有许多目标需要完成,而像应用服务或程序类网站其最主要的目标就是吸引访客去购买或者注册他们的产品。

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

可以从几个方面来分析

色彩

Amoderneden

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

从它的整体色彩配图元素构建等不难看出,这是一个关于儿童教育有关的网站,推的就是寓教于乐的产品服务。

Paraply

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

他们为用户的当前位置提供降雨预报服务。忧郁的蓝色预示着雨雪的降临,与雨伞保护感强烈的红色相对比显得相得益彰。

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

MailChimp

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

他们专门为客户公司提供强大的电子邮件营销服务。鲜亮的色彩预示这是家充满激情活力的公司。

色彩的应用组合预示了这些信息。

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

布局

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

一般访客的视线会从页面的左上角的开始,扫视网站的顶部(Logo,导航)

接着他们目光向下移动,读下一个区域该产品的模拟截图和简单的文字介绍,通过这块漂亮的展示区域,他们才开始对网站有了初步的印象。

访客看到产品的模拟展示后,他们就可以想象实际应用的情景。如果能够让潜在客户想象使用产品的情形,你就已经开始勾起他们的购买欲望了。

更重要的是,这类图片不仅仅是会吸引访客,他还传递给访客易于使用的信息。

如果你为访客描绘了一副栩栩如生的画面,让用户觉得使用你的产品可以受益很多,那么他们的购买欲望就会膨胀起来。

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

最后,当用户做决定的时候,视线就自然的落在了按钮上,引导他们立即购买或注册产品。

可以举些例子

LemonStand

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

Opera

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

Zendesk

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

百度快搜

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

按钮

操作按钮要做的灰常之醒目可点击极强,这是必须的。

看看下面这些按钮实例:

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

功能点

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

如果可以,在页面下半部分使用一些图标和短标题来把产品的一些功能点罗列出来,简明易懂就行。

网页设计中的规律:色彩与按钮,PS教程,图老师教程网

网站的设计应该为它的目标服务。当然,网站的外观也很重要,它决定了访客的第一印象,但是同样重要的是,不要为了设计而让网站走入歧途,美学上的好看并不能提升网站的表现力。因此,你需要确定设计策略都是由网站的目标和计划驱动的。

来源:http://www.tulaoshi.com/n/20160217/1578001.html

延伸阅读
按钮分组:按钮的分组可以让一个界面变得具有自我描述能力.在复杂的布局中,组织良好的各组按钮用以选择,而且因为很明显,这样可以很快告诉用户有哪些功能可以使用。 几个按钮放在一起,因为它们可能完成类似的功能。我们可以看范例iTunes的主窗口,四个角分别放置了一组按钮,界面中间的歌曲也有很多的行动点。加上滚动条,该界面只有有14个...
正确的背景风格可以为整个网站确定基调。我们搜集了一批使用大幅图像、明亮颜色或出众图案来作为背景的优秀网站,希望从中探寻当下网站的流行设计风格。 什么样的背景最适合你的网站,这并没有一定之规,但确实有一些共同的要素: 互联网背景的内容应该有目的性。 背景应该与你的品牌风格一致。 背景之上的文字内容应该易于阅读(无论是...
先看看效果图 步骤1: 打开Photoshop,快捷键 Ctrl+N 打开新建窗口,按照下图内的参数设置好后,确定。 步骤2: 选定背景层,快捷键 Shift+F5 打开填充对话个,下拉菜单中选择颜色,然后使用颜色#141d28,确定。 步骤3: 接下来,我们使用圆角矩形工具,设置圆角为2px,拉出一个适当大小的矩形。 然后在右侧的图层面板中...
标签: PS PS基础
先看看效果图 让我们开始!创建一个新的文件,本ps教程分辨率为500×300,填补这个白色画布。然后选择圆角矩形工具(半径30像素)绘制一个形状使用#d61d23的颜色。 之后,应用下面的图层样式到这一层: 内阴影 渐变叠加 您的按钮应该看起来像我的: 现在,时间,使反射按钮。使用Ctrl + J键复制当前层,然后创建一个新...
互联网上有许多有创意且经典的网页导航条与按钮,很多设计虽然并不为人所知,不过将这些导航条与按钮集中起来看,会发现很适合我们设计时进行参考。 虽然这些设计并不是合所有网站,但通过这些精美的UI设计我们可以找到制作网站的灵感。 本文中所展示的导航条并不完整,可以点击对应链接查看,相信当你需要设计网页时,这篇会给你很大的启发。 ...

经验教程

893

收藏

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