巧妙设计—让页面活起来

标签: 视觉设计 | 发表时间:2013-07-22 11:37 | 作者:hanxuewei
出处:http://mux.baidu.com
随着互联网的发展,Web页面在我们的生活中已经是无处不在,如何利用视觉艺术为你的Web产品增彩,也成了产品设计者逐步完善的一门课程。
一个完整的Web页面是需要点线面的合理结合,每一个页面都是一个神奇的空间,同时他的深度,广度和作者赋予的元素美感决定了这个页面的可观赏性。
好的创作依附与好的灵感。灵感是一个很微妙的东西,它是指不用平常的感觉器官而能使精神互相交通,亦称远隔知觉。或指无意识中突然兴起的神妙能力。或指作家因情绪或景物所引起的创作情状。



如果你在创作的时候没有灵感,不防停下苦思冥想,一张纸一支笔,随手涂鸦,勾勒一些布局。或倾斜的线,或不规则的图形,变换一下角度,或许你会从中找到一些灵感的突破口。亦或者反复不断的去欣赏一些好的作品,在不停的幻灯片式的预览过程中,或许就有瞬间的视觉冲击戳中你的灵感点。

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

一.巧妙利用文字

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

如下图例:

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

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

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

二.使用几何图形

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

如下图例:

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

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

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

三.合理的留白

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

如下图例:

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

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

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

四.加入点缀色

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

如下图例:

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

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

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


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



转载请注明出自”百度MUX”

相关 [设计 页面] 推荐:

不错的单页面single page 设计

- -_- - Design lol 全球设计精华分享
详情查看原文: 35 Nice Single Page Web Designs. 2010年blog设计中最有趣的趋势. 30个blog设计的创意布局. 100个上乘的wordpress模板.

404页面设计的三个细节

- - ITeye博客
做SEO的人都清楚的知道,因为站点的不断升级、系统变更、内容删除等等原因会致使有的页面无法访问,成为死链接. 有的优化新手可能会不注重这一问题,认为不就几个页面不能访问吗,我的站点上有成千上万个页面,不差这几个. 但是这个问题却是我们站内优化中一做SEO的人都清楚的知道,因为站点的不断升级、系统变更、内容删除等等原因会致使有的页面无法访问,成为死链接.

用核心-路径法设计页面

- - 博客 - 伯乐在线
英文原文: Boxesandarrows,翻译: 开腾讯CDC. 文章的原名为Designing Screens Using Cores and Paths. 本文作者受到城市规划中“交通需求线”的启发,提出了 网站设计的“核心-路径法”. 区别于通常采用的从框架到主页以及导航的方式,“核心-路径法”让设计者从核心内容入手,由内而外来设计.

巧妙设计—让页面活起来

- - 百度MUX
随着互联网的发展,Web页面在我们的生活中已经是无处不在,如何利用视觉艺术为你的Web产品增彩,也成了产品设计者逐步完善的一门课程. 一个完整的Web页面是需要点线面的合理结合,每一个页面都是一个神奇的空间,同时他的深度,广度和作者赋予的元素美感决定了这个页面的可观赏性. 灵感是一个很微妙的东西,它是指不用平常的感觉器官而能使精神互相交通,亦称远隔知觉.

简历页面设计 和 简历设计模板资源

- 齐铭 - Design lol 全球设计精华分享
无论是找工作还是接项目, 简明雅致又能体现你独到之处的简历总是必不可少. 在线的简历页面也比邮件附件和纸质简历更为普遍使用. 这里除了提供一些简历页面的优秀设计, 还有许多设计模板资源. 30款惊艳的极简主义web设计. 15个极简主义web设计案例. 在facebook上找到你最爱的设计团队. 25个漂亮的blog评论区设计.

经典网页设计:20例简洁精美的着陆页面设计

- - 博客园_梦想天空
  在互联网营销中,着陆页(Landing Page)有时被称为引导页或者首要捕获用户页,可以简单划分为参考型引导页、交易型引导页和压缩型引导页. 与普通的网页不同,着陆页需要完成特殊的使命,它需要把访问者引导到他们想去的网页,着陆页并不是目标页,而只是引导访问者到目标页的一个中间页面.   着陆页面的设计和优化涉及多个学科,它需要融合各种不同的知识和观点.

《让页面设计快活起来》- 面白法人 KAYAC

- wyt - 比特客栈的文艺复兴
最近通过各种渠道了解到面白法人KAYAC这家崇尚“快乐开发”的日本网页设计公司(翻译成中文是“有趣法人”)——它可能我见过的第一家把现代化网页设计理念与日式恶搞卖萌风格运用在一起的公司了. 光说名字大家可能没有印象,若把某个被无数人引用的博客挂件拎出来,各位会就知道了:那个点击一下就会叫的猫肉爪大家都见过吧.

25个创意的关于我们页面的设计

- emilo - 创意悠悠花园
每个正式一点的网站都应该会有“关于我们”这个页面内容的,那么今天就分享:25个创意的关于我们页面的设计,希望其中有你喜欢的,或者可以给你带来灵感的. Read the rest of 25个创意的关于我们页面的设计 (114 words). © emilo for 创意悠悠花园, 2011. | 本文链接 | One comment.

55个创意的建设中页面设计和WordPress主题

- Kione - 创意悠悠花园
正在建设中这个页面可以在你的网站正式上线前给你带来一定的知名度,那今天就分享:55个创意的建设中页面设计和WordPress主题,希望其中有你喜欢的或者可以给你带来灵感的. Read the rest of 55个创意的建设中页面设计和WordPress主题 (78 words). © emilo for 创意悠悠花园, 2011.

免费下载:Facebook粉丝页面GUI设计包(PSD格式)

- 小明 - 互联网的那点事
很荣幸能有机会为DamnDigital的广大读者分享一款由Hike设计的Facebook粉丝页面(Fan Page) GUI(图形用户界面)设计包(PSD格式)(原载于Smashing Magazin). PSD格式可以加快创建预览的过程,从而避免编辑所有的DOS口令,同时可按用户的需求制订所需的文字、按钮和数据内容.