成都网站推广
 

中联无限-服务热线:028-86637122 工作时间:9:00-18:00 星期一-星期五

 
首页 | 关于我们 | 新闻动态 | 成都网站建设 | 成都网站推广 | 成都微信营销 | 网站制作案例 | 软件开发 | 常见问题 | 域名注册 | 虚拟主机
  网站知识
     推荐工具 / Tools
     网站运营/Operation
  
  客户案例
·巨丰达人减肥训练营
·成都写意经典家具有限公司
·成都卡姆士安防设备有限公司
·新千里装饰集团
·成都吕氏三才中医博爱堂
·泊菲特语言学校
·四川高地易景园林工程公司
·成都烽火建筑装饰设计有限公司
·优尼客酒店
·成都杜嘉机电有限公司
·菲颖1购
·成都安东尼体育文化传播有限公
·四川九章生物化工科技发展有限
·成都环球体育文化传播有限公司
·万友爱淘网上商城
·四川省斯博兰德建筑装饰设计有
·肥犇仔
·成都市猛追湾游泳场
  网站运营
·企业新站推广中存在的六大误区
·网站运营之八大要素
·怎么区别网站运营与网络运营
·怎样区分网站运营和网络运营
·SQL Server 200
·新网站运营后如何迅速增加网站
·减肥网站是怎样提高收入的
·个人网站赢利模式的拓展方向
·商业门户网站运营模式探讨
·成都地方门户网站运营模式
·网站策划人如何盈利
·网站运营模式观察与分析
  最新资讯
·成都网络推广公司介绍的六种推
·分析导致成都网络推广效果差的
·成都网站优化:企业网站关键词
·成都网站优化初期企业应该需要
·浅析成都网站优化中企业如何建
·分析企业在做成都网站优化过程
·短视频营销可以为成都网络推广
·小品牌怎么样才能既省钱又省力
·分析成都网络推广中企业需要注
·如何根据成都网络推广的营销周
·成都网站优化需要遵循哪些规则
·成都SEO网站优化过程中如何
 
   您的位置在:成都网站推广 > 网站知识 > 网站教程 /Tutorial > 正文
   网站教程 /Tutorial

网站配色:简洁富有创造性的深色调网页设计

[ 来源:中联无限科技有限公司   发布日期:2010/3/29 20:18:06 ]
深色调的网站设计是比较流行的,它能营造出简洁、富有创造性的效果。它能满足一些客户对网页设计风格的要求。然而,它并不能适用于每一个客户对网站设计风格的要求,设计师应根据实际情况而定。...

深色调的网站设计是比较流行的,它能营造出简洁、富有创造性的效果。
它能满足一些客户对网页设计风格的要求。然而,它并不能适用于每一个客户对网站设计风格的要求,设计师应根据实际情况而定。
尽管深色调的设计风格能做到引人注目的效果,但很多设计师不知道如果有效的使用它来打动、吸引浏览者。
深色调网页设计经常出现的问题是不易读、没有吸引力、很少打破传统的设计模式。
这片文章,我们将讨论一些如何让你的下一个深色调网页设计更能吸引、打动广大浏览者的方法和技巧,真正做到让你的设计表达你的创意。
最近的调查显示有超过47%的大众用户更喜欢亮色调的网页设计。内容的可读性是主要原因。大多数的用户不喜欢亮文字内容显示在深背景上,这样的对比效果是比较刺眼的,给人不舒服的感觉。
相比之下,有10%的设计师通常选择深色调来设计网页,同时36%的人认为应该根据网页的具体风格要求进行选择。
那么,哪个是正确的答案那?归结起来,每一个人都有自己的意见,事情就是这样。
但是有相当一部分用户认为重色调的设计是可以接受的,有时是设计首选。作为网页设计师,我们不得不考虑如何有效的设计深色调的网页给我们客户与自己。
相信亮色调网页设计的爱好者们希望深色调的网页设计应该更易阅读、有好的用户体验。

多使用留白
或者应该叫“留黑”?合理有效的使用留白对于任何风格的设计来说都是非常重要的。但对于深色调的网页设计来说它则是必须的。
深色调的网页设计给人总体的感觉是“沉重的”,如果整体布局结构凌乱更增强了给人沉重的感觉。下面展示了一些比较受大众喜欢的深色调网页设计,他们合理使用了留白达到很好的设计效果。
Black Estate是互联网里深色调网页设计的一个而已,设计确实很棒并值得我们研究学习。设计自始自终都在合理、有效的使用留白,如何在设计元素周围有效的使用了留白,从而设计出了这样讲究的网页。
logo标志周围留有大量的“留白”,作为浏览者我们首先看到的就是它,其次看到的才是主要内容与右边的瓶子。正如你所看到的,留白是用来突出瓶子上的亮文字内容与内容标题。
photoshopPic01
Tictoc的主要特点就是它在内容、装饰图片周围留用了大量的“留白”,当我们继续往下浏览时,我们看到使用了很少的留白,从而将我们的注意力集中在到下面的具体内容上面。
这里的关键是,留白起到了引导的作用,逐步引导用户浏览这个页面。
网站通过使用大量的留白从而增加了深色调设计的层次,留白仅仅是为了实现深色调的效果而已
photoshopPic02

Mark Dearman网站的框架结构自始自终采用灵活的、均匀的分布式布局进行留白。
留白为每一个相邻的内容板块里面的内容提供了大量呼吸、停顿的空间。当进入到下一板块内容的时候,它们之间的留白是一个很好的休息地点。
留白对于深色调网页设计来说是必须的,它不但有助于解决布局的凌乱、散乱,同时也是网页设计增强整体感很重要的元素。
photoshopPic03

正文内容留白
深色调网站内容的易读性是不喜欢深色调网页用户所担心的问题。设计师必须将更多的精力放在文字本身上。
在整个设计上,通过调整段落与段落之间的距离大小、行距来增加留白是提高重背景网站文字内容可读性的一种方式。
下面展示的例子介绍了元素与元素之间留白、元素本身周围留白在深背景和亮背景上的对比情况。
photoshopPic05

增加字体大小是提高深色调网页内容可读性的另外一种方式,同文章以上介绍的方法一样,大号的字体能增加其本身及周围的留白,字体越大其周围的留白空间就会越大。
比如下面的字母“a”,当字体增大时,其周围的留白就会随着增大。无论是a周围的空间还是其内部的空间,还是与上下内容之间的空隙留白都跟着一起变化。
注意,在淡色调上阅读小文字内容要比深色调上容易的多。当在新的网站上设置字体的时候,一定要事先虚拟一些内容以确保其清楚易读。如果不清楚的话,可以尝试增加一下字体的大小来调整。
photoshopPic06
文字对比
一些人普遍认为大多数的深色调的网站容易导致眼睛疲劳。设计师们或多或少的忽视了对比。如何找到一个平衡点那?
如果你在一个漆黑的屋子里,突然遇到很强的亮光你会感觉不适应的。但是,如果你在一个稍微有点弱光的屋子里再遇到亮光的话应该会好一些儿。这个规则同样使用于网页设计。
找到一个完美的对比,也就是说在深背景于亮字之间找到一个对比平衡点。
下面的例子简单的说明这点,如何平衡字体与背景之间的对比度。注意当让背景颜色变浅时其上面的文字也会一起变浅的。
找到文字与背景的对比平衡点是比较困难的。
为了找到最终的平衡点,我们使用不同的程度的背景颜色做试验。背景不要是纯黑色,文字不是纯白色是试验的最终平衡点。
photoshopPic07
字体的处理
字体在设计里面扮演着非常重要的角色,尤其在深色调布局设计里面更应该深思熟虑的。下面的图片展示了14点大小的serif和sans-serif字体在深背景上的效果。
sans-serif字体明显更清晰、易读一些。但是一部分设计师让然是应用serif字体。
仅仅放大sans-serif字体这一个方法,从而让其周围留有更多的留白,并让其清晰易读。
photoshopPic08
下面是在写此文之前的网站论坛的界面截屏。网站同时使用了serif和sans-serif两种字体,但是使用它们是有技巧的。
大字体比如标题、导航等使用了serif字体来增加其效果。为了比较好的对比、提高可读性,body里面定义了sans-serif字体。
photoshopPic09
使用少的配色方案
为了让深色调的设计看起来更干净、整齐,设计师应尽量选择少的配色方案。
通过一下几个简单的例子,过多的颜色配色方案针确实无意于深色调设计的,因为这样的配色对比太强烈了。
保留一种或二种颜色系
photoshopPic10
部分设计师喜欢用对比强烈、刺激的配色方案,当然这样也是可以的,但要能够恰如其分的使用好。
总体来说,颜色很容易让网页界面花、杂乱,本来深色调的网站颜色就很重了。所以在用色方面更应该慎重一些!


上一篇:SQL 导入导出Excel数据的语句
下一篇:网站配色:创建属于自己的网站配色方案
   相关网站教程 /Tutorial
·SEO之如何更好的布局?2011-08-11
·Ajax2011-05-26
·JSP的定义2011-05-26
·PHP是什么2011-05-26
·CSS教程:CSS背景全攻略2011-03-26
·javascript cookies 存2011-03-25
·网站外部链接的注意事项2011-03-24
·PHP防御木马攻击的技巧2011-03-11
·Apache服务器的配置与管理2011-03-11
·SQL Server数据库查询优化的常用2011-03-09
·SQL Server触发器2011-03-09
·ASP.NET JMAIL 发送邮件方法2011-03-09
首页 | 公司简介 |联系方式 |付款方式 |人才招聘 | 域名空间 | 网页设计案例 | 网站知识 | 解决方案 | 建站指南 | 网站地图
地址:成都市青羊区西大街1号   邮编:610041   E- Mail:619027769@qq.com   代理合作: 028-86637122
网站建设/推广咨询:028-86637122  86618860  传真:028-86637322   
成都中联无限科技有限公司 2004-2014    蜀ICP备05017733号