如何让您的网页页面设计脱引而出

2016-02-17 00:24 23 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的如何让您的网页页面设计脱引而出,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - 平面设计 】

随着互联网的发展,Web页面在我们的生活中已经是无处不在,如何利用视觉艺术为你的Web产品增彩,也成了产品设计者逐步完善的一门课程。

一个完整的Web页面是需要点线面的合理结合,每一个页面都是一个神奇的空间,同时他的深度,广度和作者赋予的元素美感决定了这个页面的可观赏性。

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

要想让自己设计的页面有鲜明的艺术特色,从众多的页面里脱颖而出,下面着重从以下四点去介绍。

一、巧妙利用文字

网页设计中,文字在整体界面中起到了主体的作用,是传达信息的主要元素,字体的的大小、颜色、字体样式甚至间距都会直接影响页面的视觉传达效果。

如下图例:

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

整体页面趋于简洁,但用文字跟图形做了巧妙的结合,使整个页面显的简而不空,同时整体文字大小对比也使页面变的更具层次感。

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

合理的将字体打散进行灵活艺术加工处理使其图形化,既呈现了信息,又使整体看起来更加贴切设计主题,更具美感和艺术性。

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

页面信息量虽大,但由于在间距和大小对比上做了合理的处理,使整个页面看起来满而不乱,很容易一眼就能找到信息点。

二、使用几何图形

网页一般都是由不同尺寸的栏目快和表格等组成,基本都是非常方正的表现方式,适当的运用一些几何图形加入其中,比如三角形,菱形或者圆形,会使整个画面更加的生动活泼和起到打破常规的作用。

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

如下图例:

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

提取了LOGO色,利用不同的几何图形组成固定的背景图案,使整体页面更加的形象化。

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

LOGO采用几何图形的表现方式,导航则巧妙的使用了轮盘的表现形式,使原本信息量不大且方正的页面看起来活泼和饱满。

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

利用几何外形直接作为栏目快,在hover的状态下直接呈现内容,使简单的画面丰富起来。

三、合理的留白

古人曾曰:虚实相生,无画出皆成妙境。说的就是场景中一实一虚留白的妙处。巧妙的留白可以让画面的视觉效果更加的通透,流畅和干净。避免元素的堆积造成的画面拥挤,辨识度低。当然留白并不是说页面中的白色区域,而是没有其他元素干扰的视觉区域。

如下图例:

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

以人物为中心,大面积四周留白,突出中心内容区域,虽信息量不大,但简单明了,直观的表达的网站的内容主旨。

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

原本信息量很大的电子产品页面,通过精简内容和留白设计,内容不多,但突出主要功能点,使产品看起来更加的简洁和品质感十足。

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

图形化为中心的个人网站,由于信息不多,大胆的采用了大面积留白设计,巧妙之处在于在留白的基础上以图形作为网站的主要特色和主旨,通透活泼而不失严谨。

四、加入点缀色

点缀顾名思义,就是用小而精湛的手法在原有事物上加以衬托或装饰,使其更加的美好和迷人。同样,合理的利用点缀色也能在页面设计中起到画龙点睛的作用。

如下图例:

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

整体暗色调的设计,加入紫色的点缀,遍布各类主要元素,突出了信息,还使得原本沉闷的页面神秘和活泼起来。

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

朴实素净的页面,利用黄蓝的背景和元素点缀,丰富了页面内容,增加页面活力。

如何让您的网页页面设计脱引而出,PS教程,图老师教程网

大面积采用点缀色作为栏目背景色,使本来方方正正的页面变的有亮点,同时也突出衬托了栏目内容。

以上就是本次要讲的四个点,当然让页面活起来的方式肯定不止四种,像插画元素,动效等都可以为页面增彩,这就需要大家在日后的学习中多多总结和积累了。

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

延伸阅读
标签: Web开发
有的网页看起来并不大但打开会很卡,有的网页虽然很长但使用流畅,占用用户电脑的内存与CPU就影响这些。 浏览器问题,有各自的浏览器处理内存问题会影响到,但几乎没办法控制得了,Windows上的: · IE系列,刷新回收的量不大,但最小化会释放内存。 · Firefox2据说也会在最小化回收,可我从没见过最垃圾,用多少是多少,...
相信我,这不是标题党。本文提到的大多数细节设计,都很难在平常的网站里寻到踪迹,不过恰恰如此,这篇文章的可读性非常高,如果哪一天你看到这么体贴的404网站,找到那个设计师嫁了吧。 网秦UEC:没人会想到网站访客会在错误页面上停留,但实际上这种情况确实存在。特别是在404错误页面上,访客会经常逗留。所以,你可以将404错误页面设计的...
标签: PS PS教程
xhtml+css网站重构web标准等等之类的文章太多了,我就不重复了,发个最简单的制作xhtml+css页面的方法,方法虽然很简单,但真不一定有几个人知道.... 起码google搜索没搜索到。 开始吧: 1、打开photoshop cs2 ,打开设计出的网站首页。用切片工具切好。   2、点 文件-》存储为web所用格式 快捷键为ctrl+alt+shift+s ,点右上倒...
页面特性:产品页面简洁易用,专题页面绚丽视效印象深刻。 在页面设计当中,产品页面(如facebook 微博 twitter 微吧等)的设计。注重功能,交互,设计要考虑用户长时间的浏览体验。视觉上侧重间距,布局,按钮和logo,及icon样式。注重规范和视觉识别性。样式通常简洁易用,绚丽元素少,视觉上并不强调冲击力。 专题页面时效性有限(大多专题是...
说个事儿,之前打开某设计工作室的网站,木想到界面惨不忍睹,缓过神来又注意到页脚设计都没有链接,惊呆后留意了一下,发现很多专业设计师有时也会草草对付页脚设计,所以今天特意把这篇文章分享出来,集合了全部页脚设计的15个设计技巧,来学习吧。 你网站最重要的部分之一就是页脚。是的,我是认真的。这里也许并不适合伟大的设计或者令人...

经验教程

846

收藏

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