5个有效改进网页UI设计的技巧
来源:801锅胆 发布时间:2008-12-19 12:04:00
从某种意义上来说,页面设计(web设计)也就是用户界面设计。有许多技巧可以帮助我们制作出漂亮、实用的界面,这里收集的5个小技巧就会对你有所帮助的。这些技巧并不依赖于特定的主题或模板,所以会适用于多数情况下的设计。不罗嗦了,我们开始吧!
1.改善链接体验
网页中的文字链接通常标有下划线,表示文字是可以点击的,但可点击区域不会超过字符的宽、高范围。设计类似这种带有超链接的可点击区域的时候,都可以通过一些小技巧来提高可用性,比如:增加间隔,有些情况下甚至可以把链接转换为块元素。如下图,用高亮来区别可点击区域。
显然,可点击的区域越大,用户点击就容易。在没有指定宽度的时候,将链接转换为块元素,可以使文字链接的可点击区域扩大到为整个容器的宽度,这样的设计尤其适用于侧边栏的链接。这个技巧可以通过如下CSS实现。
a {
display: block;
padding: 6px;
}
注意:由于转换为块元素只对链接的宽度起作用,所以需要设置间隔(padding)来保证块在纵向的间距。
2.按钮也需要排版!
设计的每一个细节失误都有可能把完美的产品变成平庸,比如按钮、Tab这样简单的界面元素,由于用户每天都会点击无数次,也需要适当的进行排版。请看下面一些例子:
乍看起来上图没有什么问题,仔细观察可以发现,按钮和select的文字都偏上,原因就是将小写字母作为了排版的基准,小写字母居中时,整个文字的位置就会显得偏上。如下图:
就像上图中,如果按钮上的文字包含大写字母或一些较高的小写字母,如”t,d,f,h,k,l”的时候,文字就会显得偏上。所以,通常应该把大写字母作为定位的基准,或者在小写字母较多时,稍微将文字的位置向上移动。
上面的文字排版使按钮看起来更舒服,注重像这样的小细节对界面设计大有帮助。
大头:虽然中文没有大小写字母的问题,但也有很多页面设计时不注重按钮的文字排版,导致错位。
3.利用对比来控制焦点
与上面两个技巧类似,我们也可以通过页面元素间的对比来控制用户关注的焦点。下面的例子关于文章标题与日期、作者等信息之间利用对比突出重点的例子。
上图中所有文本都是黑色,让我们试着来调整一下日期和作者文字的颜色看看
文章标题的对比度最高(颜色最重),所以感觉凸显出来。同时,通过对比度的不同,将作者与日期也体现了区别。相比于字体、字号的设置,对比度(颜色深浅)更能凸显出不同。下面让我们改变一下对比度高低的顺序:
可以看到不同的对比度设置会有明显的效果,上图这种效果可能会用在一些显示大量信息的场合,如blog、论坛或SNS网站。凸显某些信息可以让用户快速的浏览、找到自己所需的内容。大头:我能想到的比如搜索结果页,将搜索条件突出显示可能会好些。
猜你喜欢
- 1.指向“开始->程序->Microsoft SQL Server 2005->配置工具->SQL Server 外
- 内容摘要:除了内部性能增强和优化外,IIS6.0版本的 Active Server Pages(ASP)&nb
- 很多时候,用户可能会因为承受不了某一产品中的细节设计而放弃使用该产品,这无疑是让设计人员感很沮丧的事情,因为除去这个细节的问题外,这个产品可
- 代码如下:<form action="insert.asp" method="pos
- 在填写表单的时候为了让用户有更好的体验,有时需要根据用户的输入出现提示共用户选择,我这个就是根据输入的内容,从数据库取出相关内容以供选择,这
- SQL语言是一门简单易学却又功能强大的语言,它能让你快速上手并写出比较复杂的查询语句。但对于大多数开发者来说,使用SQL查询数据库并没有一个
- HTML5之中一个很酷的新特性就是WebSockets,它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服
- 注意:安装时要保证Oracle安装目录不能带有中文字符(如果第一次安装出现“加载数据库错误areasQueries”的错误,一般是因为Ora
- * 前,我在公司做设计,当时就已经做到技术总监,Photoshop是自学的,当时觉得全世界比我Photoshop强的人也不在多数。七年前,
- 1.intersect为取多个查询结果的交集;2.查询两个基本时间段内表记录的SQL语句;select * from shengjibiao
- 代码如下:<% Function Bytes2bStr(vin,cSet) Dim BytesStream,StringReturn
- 个人总结了在开发css框架中的一点经验,献丑了。希望大家的讨论能使我们共同进步。:)1、css框架中国的互联网行业已经发展了10年,浏览器也
- UNIX时间戳转换为日期用函数FROM_UNIXTIME()select FROM_UNIXTIME(1156219870);日期
- 使用图层可以像素为单位精确定位页面元素,并且可以将层放置在页面的任意位置。当把页面元素放入图层之中时,还可以控制哪个显示在前面、哪个显示在后
- 一个不错的js效果,实现了图片预加载,并实时显示图片加载进度。<script> var l=0; var i
- 导航设计是结构层面设计中的主要工作之一,在软件中,导航设计的好坏,直接关系到用户使用是否能够流畅。面对较复杂的导航,我们第一反应是将其简化。
- 这是一个非常简单的解决方案,柱状图中每一条柱都是一个 div,数据的大小呈现在 div 的宽或高上。 查看演示 例子下载实现的原理
- 最近在做学院的选课系统时,在分页上被卡壳了一下,因为需要用到排序,所以不能像以前一样用一个自动递增的字段作为主键,然后仅仅是对这个主键来做统
- 下面就是简单的例子,这里提供2中方法:test.htm &
- 本文描述通过统计分析出医院信息系统需分区的表,对需分区的表选择分区键,即找出包括在你的分区键中的列(表的属性),对大型数据的管理比较有意义,