无忧技术网 - RSS订阅 
无忧技术网

网页设计技巧-对比、链接、按钮、空白、颜色


作者:[佚名] - 发布:2010-8-22 9:16:28 - 来源:css博客

网页设计有许多技巧可以改进页面的美观,通过链接、按钮甚至段落的间距等,一些微小的变化都可以引起十分奇妙的化学反应。不信你看看下面的例子:

利用对比来控制焦点
我们也可以通过页面元素间的对比来控制用户关注的焦点。下面的例子关于文章标题与日期、作者等信息之间利用对比突出重点的例子。
headline1
上图中所有文本都是黑色,让我们试着来调整一下日期和作者文字的颜色看看
headline2
文章标题的对比度最高(颜色最重),所以感觉凸显出来。同时,通过对比度的不同,将作者与日期也体现了区别。相比于字体、字号的设置,对比度(颜色深浅)更能凸显出不同。下面让我们改变一下对比度高低的顺序:
headline3
可以看到不同的对比度设置会有明显的效果,上图这种效果可能会用在一些显示大量信息的场合,如blog、论坛或SNS网站。凸显某些信息可以让用户快速的浏览、找到自己所需的内容。大头:我能想到的比如搜索结果页,将搜索条件突出显示可能会好些。

改善链接体验
网页中的文字链接通常标有下划线,表示文字是可以点击的,但可点击区域不会超过字符的宽、高范围。设计类似这种带有超链接的可点击区域的时候,都可以通过一些小技巧来提高可用性,比如:增加间隔,有些情况下甚至可以把链接转换为块元素。如下图,用高亮来区别可点击区域。

padded_links_diagram
显然,可点击的区域越大,用户点击就容易。在没有指定宽度的时候,将链接转换为块元素,可以使文字链接的可点击区域扩大到为整个容器的宽度,这样的设计尤其适用于侧边栏的链接。这个技巧可以通过如下CSS实现。

a {
display: block;
padding: 6px;
}

注意:由于转换为块元素只对链接的宽度起作用,所以需要设置间隔(padding)来保证块在纵向的间距。

按钮也需要排版!
设计的每一个细节失误都有可能把完美的产品变成平庸,比如按钮、Tab这样简单的界面元素,由于用户每天都会点击无数次,也需要适当的进行排版。请看下面一些例子:
badly_typeset_buttons
乍看起来上图没有什么问题,仔细观察可以发现,按钮和select的文字都偏上,原因就是将小写字母作为了排版的基准,小写字母居中时,整个文字的位置就会显得偏上。如下图:
button_typeset_1
就像上图中,如果按钮上的文字包含大写字母或一些较高的小写字母,如”t,d,f,h,k,l”的时候,文字就会显得偏上。所以,通常应该把大写字母作为定位的基准,或者在小写字母较多时,稍微将文字的位置向上移动。
button_typeset_2
上面的文字排版使按钮看起来更舒服,注重像这样的小细节对界面设计大有帮助。
大头:虽然中文没有大小写字母的问题,但也有很多页面设计时不注重按钮的文字排版,导致错位。

利用颜色来引起注意
当然,颜色的不同也可以有效地吸引用户对重要及可操作元素的注意力。举例来说,在前段时间美国总统候选人提名期间,很多候选人的页面上都有红色的“捐助”按钮,在页面整体是蓝色或其他冷色调的时候,鲜明的红色能够很有效的吸引访客的注意力。
像红、黄、橙等暖色调,天生就有较强的吸引眼球的能力,而且这种能力在对比蓝、绿等冷色调时就更为突出。有趣的是,这种差别会让人产生空间上的想象,比如蓝色背景上的橙色按钮会给人凸起的感觉,相反情况下会给人凹陷的感觉,详见下图:
colors


大头:由于国内应用深色背景的网站较少,下面挑选一些大家熟悉的例子来展示一下颜色的应用。同时通过颜色区别来吸引用户注意也不必拘泥于冷、暖色调的对比。
 douban
 

上图中:豆瓣首页的"马上注册"按钮,以及登录区域都用粉色重点表示,由于豆瓣采用白色背景,所以淡淡的粉色也能起到突出的作用。

xiami

对于上线不久的虾米,凸显导航、”了解更多”以及”软件下载”都有明确目的。

需要注意的是,尽量避免利用颜色凸显过多的元素,这样反而会让用户无所适从。

空白-不仅仅用来分隔
内容元素之间的空白也是设计中需要注意的问题之一,比如像按钮、导航条、文章内容、标题等等元素之间的空白都有必要关注。有效地利用空白,我们可以明确的表现出页面元素之间的关系。
举例来说,标题与内容相近可以表示之间的所属关系,但文字内容与其他元素有一定距离会方便阅读。请看下面的例子:
bad_whitespace
上面的图例看起来没什么问题,但仔细看可以发现,每个标题上下的空白是相等的,这样就没有明显的区分每部分内容。我们可以通过调整段落间的距离或段落中的行距来解决这个问题:
good_whitespace
上图是否变得更清楚些?好的设计师通常会眯着眼或从远处来看看自己的作品,这样会有效的发现内容显示是否清楚的问题。

责任编辑:liqwei
打印本页】【关闭本页】【返回列表
·上一篇:一些对CSS3开发人员非常有用的工具
·下一篇:在 JavaScript 中如何为 Label 设置 for 属性?
 文章评分
  • current rating
-5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5
 相关文章
·[推广优化]网站友情链接的基本技巧 (2010-11-23)
·[PS/FW/Flash]Flash动画瘦身技巧十招 (2010-09-04)
·[JS/CSS/HTML]CSS网页布局开发小技巧汇总 (2010-08-22)
·[JS/CSS/HTML]免费网页模板资源站分享 (2010-08-21)
 相关评论
 站点最新文章 更多>> 
·[经典影音]萨利机长
·[经典影音]天空之眼
·[管理知识]康奈尔笔记法,提高100%学习效率
·[管理知识]刘强东:我管75000人靠这4张表格
·[管理知识]跟壳牌学HSE管理
·[运营策划]编辑工作内容整理
·[至理名言]奋斗与决定
·[瀚海拾遗]盲人打灯笼之各家论道
·[搞笑段子]中国男足
·[搞笑段子]大爷被采访
 站点浏览最多 更多>> 
·[协议规范]http断点续传原理:http头 Range、…
·[JS/CSS/HTML]HTML 空格的表示符号 nbsp / en…
·[NoSQL]Mongo数据库简介
·[协议规范]什么是SPF记录?如何设置、检测SP…
·[协议规范]图解 HTTPS 通信过程
·[PHP]精选国外免费PHP空间推荐
·[程序综合]常用IP地址查询接口
·[程序综合]什么是 DNS Prefetch ?
·[程序综合]获取客户端IP地址的三个HTTP请求…
·[Linux]/usr 目录的由来