利用视觉艺术为网站增彩 巧妙设计—让页面活起来


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

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

  好的创作依附与好的灵感。灵感是一个很微妙的东西,它是指不用平常的感觉器官而能使精神互相交通,亦称远隔知觉。或指无意识中突然兴起的神妙能力。或指作家因情绪或景物所引起的创作情状。

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

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

  一.巧妙利用文字

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

  如下图例:


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


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


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

  二.使用几何图形

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

  如下图例:


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


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


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

  三.合理的留白

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

  如下图例:


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


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


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

   四.加入点缀色

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

  如下图例:


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


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


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

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

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

时间: 2024-08-23 15:23:42

利用视觉艺术为网站增彩 巧妙设计—让页面活起来的相关文章

巧妙设计—让页面活起来

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

[ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面

原文:[ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面 随着最终用户对用户体验需求的不断提高,实际上我们很多情况下已经在按照桌面应用的标准来设计Web应用,甚至很多Web页面本身就体现为一个单一的页面.对于这种复杂的页面,我们在设计的时候不可以真的将所有涉及的元素通通至于某个单独的View中,将复杂页面相对独立的内容"分而治之"才是设计之道.我们可以借鉴Smart Clent应用的设计方式:将一个Windows Form作为应用的容器(Smart Client Sh

如何利用SEO培养网站

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 现如今搜索引擎优化是越来越难做,各个搜索引擎基本上都有自己的沙盒效应,新的网站很难快速的从搜索引擎上获得可观的流量.除了沙盒效应,各搜索引擎基本上还存一个对域名的信任度问题,越老越正规的站点,搜索引擎对该域名的信任度就越高,整体的排名可能就越好. 因此对于如何培养一个高权重以及搜索引擎给予信任度高的站,是很多SEO都在思考的问题.通过正确的S

利用CSS改善网站可访问性

css|访问  利用CSS改善网站可访问性    作者: BUILDER.COM来源: www.BUILDER.COM类型: 翻译     最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配.     像那时建构的很多网站一样,我的客户的网站使用了Cascading Style She

怎么利用搜索引擎进行网站推广

  电子商务高度发展的今天,世界经济也在加快发展,越来越多的企业都发现网络营销的好处,大量的企业网站出现了.是的,一个推广成功的网站可以为企业扩展业务往来,提高效率,降低成本等等.目前网络推广的主要方式都有:论坛推广.QQ群推广.邮件推广等等.这些推广的本质都是提高流量,增加销售额,那么如何利用搜索引擎进行网站推广呢,让搜索引擎帮助自己的网站一飞冲天呢? 第一选择合适的搜索关键词是很重要的内容,选择一个合适的搜索关键词才能够让潜在的客户通过搜索引擎找到自己的网站,那么如何选择合适的搜索关键词呢?

网站反馈式交互设计

出色的设计源于生活,那么我们就从生活中说起,我们依照用户生活的使用情景来设计一款产品,我们不需要重新培养的用户的使用习惯,用户可以在第 一次使用你的产品来完成自己的目标,并且不需要他人的指导.比如说苹果公司在设计第一代iMac的过程中,乔纳森及其团队前往日本,曾向日本某糖果行业的 人请教,如何在生产糖果颜色的电脑外壳的同时,保持其一贯的半透明度. 在下文中我们将聊聊反馈式交互设计对于网站设计重要性,在这之前我们有必要了解相关的概念: 何为反馈? 来自的维基百科解释:反馈又称回馈,是现代科学技术的

一个优秀的网站首页是如何设计的?

网站首页是用户进入你网站看到的第一面,如果这第一面给用户的印象不好,不够吸引,那样会让用户没有了继续浏览的欲望.一个不够吸引人的网站首页,就算你网站推广做的再好,IP量再高,但是往往就是因为网站首页设计的不够好.不够精致.不够吸引,从而导致了网站转化率不高.网站首页的设计不但在网站建设过程中很重要,在网站优化中也起到了关键作用.那么一个优质的网站首页该怎么样设计呢?一个震撼的网站首页用什么设计呢? 网站首页无论是放在网站设计,还是网站建设和网站优化中都是首要针对的步骤.不管是企业网站.个人网站,

4月3日外电头条:赛门铁克3月安全报告称恶意网站增3倍

[51CTO.com快译]网络罪犯们在三月份显然做了些特别的努力!因为在赛门铁克 刚刚发布的MessageLabs网络安全报告中显示,三月份被阻止的恶意网站数量一下子激增为二月份的三倍.最新发布的MessageLabs Intelligence 2009年三月份及第一季度网络安全报告中披露的具体数据是:三月份赛门铁克平均每天要封锁2797个藏匿着恶意软件和其他如间谍和广告软件等有害程序的新恶意网站,这个数字比二月份增加了197.2%.含有恶意链接的电子邮件比例也增加了,达到了去年6月以来的最高水

网站设计分析:交互设计那些事儿(二)

中介交易 SEO诊断 淘宝客 云主机 技术大厅 <交互设计那些事儿>之一完工后,承蒙各位抬爱,在微博时代被大量转发和分享,也让我收到一些邮件,询问我下篇为何还不出来?请原谅我的惰性,每个周末都给自己找了不少借口一拖再拖,上个周末又在家里养了两天的病--在此提醒朋友们,换季季节,多喝水,多休息,少生病哈. 一. 理论前提 1. 人机交互与人类信息处理机制理论 既然产品设计出来不是给设计师用的,而是给用户用的,他们如何理解.认知.使用产品才是最重要的.因此"定义用户",&quo