当前位置:首页 >> 互联网 >> 2006年12月3日
 "Times New Roman",
 "Times New Roman",
 Times,
 Times,
 serif; align="center">谁 按钮?它在干嘛?---网页按钮 功能与表现
 serif; align="center">谁 按钮?它在干嘛?---网页按钮 功能与表现
[ 关键词:UE UI 原文/来源链接 ]
   
 
 "Times New Roman",
 "Times New Roman",
 Times,
 Times,
 serif; align="center">谁 按钮?它在干嘛?---网页按钮 功能与表现
 serif; align="center">谁 按钮?它在干嘛?---网页按钮 功能与表现推荐者:笑笑生 (积分 12508) | 原作者:
目前在网页中普遍出现 按钮可以分 两类:一种 有提交功能 按钮---真正意义上 按钮;另一类 仅仅表示链接 按钮,
 在这里将其称 "伪按钮”.
 在这里将其称 "伪按钮”. 
真正 按钮
真正 按钮有两个作用:
1.实现提交功能;
2.标明当前操作 目 .
说明:
无疑按钮实现着提交功能. 当用户输入了关键字后会点击"搜索”按钮,
 网页中将出现搜索结果;当用户填写了用户名和密码后,
 网页中将出现搜索结果;当用户填写了用户名和密码后,
 点击"登录”按钮,
 点击"登录”按钮,
 系统将打开自己 邮箱页面.
 系统将打开自己 邮箱页面. 
按钮上 文字说明了整个表单区 内容,
 比如,
 比如,
 有"搜索”按钮 区域显然标明这一区域内 文本输入框和按钮都  搜索功能服务 ,
 有"搜索”按钮 区域显然标明这一区域内 文本输入框和按钮都  搜索功能服务 ,
 不需要在另外添加标题进行说明了,
 不需要在另外添加标题进行说明了,
 这  设计师 提高网页可用性而普遍采用 一种方式―――逐字斟酌按钮文字.
 这  设计师 提高网页可用性而普遍采用 一种方式―――逐字斟酌按钮文字. 
按钮 表现形式可以大致总结 两种:
1.系统标准按钮
2.使用图片自制 按钮
对于真正 按钮应当使用系统标准按钮还 自制 图片按钮?
笔者认 应当使用系统标准按钮. 系统标准按钮 设计起源 模拟真实 按钮,
 无论 真实生活中 按钮还 网页上 系统标准按钮都具有良好 用户反馈.
 无论 真实生活中 按钮还 网页上 系统标准按钮都具有良好 用户反馈. 
标准按钮 优势:
1.易识别. 与各式各样 图片按钮相比,
 在网页中标准按钮更容易被用户识别出 按钮. 网页中 标准按钮与用户电脑 操作系统中 按钮表现上 一致 ,
 在网页中标准按钮更容易被用户识别出 按钮. 网页中 标准按钮与用户电脑 操作系统中 按钮表现上 一致 ,
 这降低了用户识别上 负担.
 这降低了用户识别上 负担. 
2.操作反馈好. 标准按钮具备多种状态,
 "正常状态”"被选中状态”"点击时状态”,
 "正常状态”"被选中状态”"点击时状态”,
 多种状态使标准按钮能够传达更丰富 信息,
 多种状态使标准按钮能够传达更丰富 信息,
 而制作图片按钮 设计师通常没这种耐心 一个按钮制作多种状态,
 而制作图片按钮 设计师通常没这种耐心 一个按钮制作多种状态,
 因 使用图片按钮多数时候 因 图片按钮更好看,
 因 使用图片按钮多数时候 因 图片按钮更好看,
 而设计师并不太在意用用户 使用效率问题. 使用图片制作出好看 页面 本能水平上 设计,
 而设计师并不太在意用用户 使用效率问题. 使用图片制作出好看 页面 本能水平上 设计,
 而使用标准按钮制作易于使用 页面 行 水平上 设计(关于"本能水平上 设计”和"行 水平上 设计”理论请参见Donald A. Norman 《Emotional Design》),
 而使用标准按钮制作易于使用 页面 行 水平上 设计(关于"本能水平上 设计”和"行 水平上 设计”理论请参见Donald A. Norman 《Emotional Design》),
 我认 针对按钮这个问题应该优先考虑行 水平设计 需要,
 我认 针对按钮这个问题应该优先考虑行 水平设计 需要,
 毕竟按钮 网页"行 "部分(web标准将网页分成三部分:结构,
 毕竟按钮 网页"行 "部分(web标准将网页分成三部分:结构,
 表现和行 ) 一个重要元素,
表现和行 ) 一个重要元素,
 何况在我看来系统标准按钮并不难看.
 何况在我看来系统标准按钮并不难看. 
系统标准按钮 存在自己 问题:样式过于呆板,
 尤其 windows2000风格 按钮甚至被一些网页设计师认  无法接受 丑陋,
 尤其 windows2000风格 按钮甚至被一些网页设计师认  无法接受 丑陋,
 相比之下windowsXP式样 按钮更容易被接受,
 相比之下windowsXP式样 按钮更容易被接受,
 无疑多数网页设计师以及公司boss还 更关注本能水平上 设计―――好看 设计.
 无疑多数网页设计师以及公司boss还 更关注本能水平上 设计―――好看 设计. 
css可以对按钮式样进行一些个性化设置,
 可以改变按钮颜色,
 可以改变按钮颜色,
 立体效果,
立体效果,
 文字大小,
文字大小,
 文字颜色. 具体方法可以很容易 在互联网上找到,
文字颜色. 具体方法可以很容易 在互联网上找到,
 这里不多说了. 我认 对于按钮这种程度 变化已经足够了.
 这里不多说了. 我认 对于按钮这种程度 变化已经足够了. 
我 观点:对于真正 按钮应该使用按钮这种表现形式,
 并且应该使用系统标准按钮.
 并且应该使用系统标准按钮. 
伪按钮
在网页中大量存在这样 按钮,
 从表现上看 一个按钮而实际上只提供了一个链接.
 从表现上看 一个按钮而实际上只提供了一个链接. 
起源:初网页上随处可见文字链接,
 设计师 了突出其中 某些特别重要 链接,
 设计师 了突出其中 某些特别重要 链接,
 将其设计成了类似按钮 样子,
 将其设计成了类似按钮 样子,
 使得这些链接更 突出,
 使得这些链接更 突出,
 引导用户点击. 这 从侧面说明了在网页上按钮 很醒目 元素.
 引导用户点击. 这 从侧面说明了在网页上按钮 很醒目 元素. 
现在在网页上使用伪按钮 原因更 多样,
 让我们来看看"民意调查”这个例子:
 让我们来看看"民意调查”这个例子:
在很多网页中"提交”和"查看结果”被设计成相同系统标准按钮,
 然而"提交” 将用户 选择提交给网站 系统,
 然而"提交” 将用户 选择提交给网站 系统,
 存入数据库,
 存入数据库,
 而"查看结果” 打开一个小窗口显示目前 投票结果,
 而"查看结果” 打开一个小窗口显示目前 投票结果,
 显然将"查看结果”设计成文字链接 更合理 ,
 显然将"查看结果”设计成文字链接 更合理 ,
 设计成按钮 原因通常  了样式上 美观:下面一行并排放置两个按钮,
 设计成按钮 原因通常  了样式上 美观:下面一行并排放置两个按钮,
 都有点击 功能,
 都有点击 功能,
 看上去更和谐,
 看上去更和谐,
 但 这却破坏了用户 可操作性.
 但 这却破坏了用户 可操作性. 

 在这里将其称 "伪按钮”.
 在这里将其称 "伪按钮”. 
真正 按钮
真正 按钮有两个作用:
1.实现提交功能;
2.标明当前操作 目 .
说明:
无疑按钮实现着提交功能. 当用户输入了关键字后会点击"搜索”按钮,

 网页中将出现搜索结果;当用户填写了用户名和密码后,
 网页中将出现搜索结果;当用户填写了用户名和密码后,
 点击"登录”按钮,
 点击"登录”按钮,
 系统将打开自己 邮箱页面.
 系统将打开自己 邮箱页面. 
按钮上 文字说明了整个表单区 内容,

 比如,
 比如,
 有"搜索”按钮 区域显然标明这一区域内 文本输入框和按钮都  搜索功能服务 ,
 有"搜索”按钮 区域显然标明这一区域内 文本输入框和按钮都  搜索功能服务 ,
 不需要在另外添加标题进行说明了,
 不需要在另外添加标题进行说明了,
 这  设计师 提高网页可用性而普遍采用 一种方式―――逐字斟酌按钮文字.
 这  设计师 提高网页可用性而普遍采用 一种方式―――逐字斟酌按钮文字. 
按钮 表现形式可以大致总结 两种:
1.系统标准按钮
2.使用图片自制 按钮
对于真正 按钮应当使用系统标准按钮还 自制 图片按钮?
笔者认 应当使用系统标准按钮. 系统标准按钮 设计起源 模拟真实 按钮,

 无论 真实生活中 按钮还 网页上 系统标准按钮都具有良好 用户反馈.
 无论 真实生活中 按钮还 网页上 系统标准按钮都具有良好 用户反馈. 
标准按钮 优势:
1.易识别. 与各式各样 图片按钮相比,

 在网页中标准按钮更容易被用户识别出 按钮. 网页中 标准按钮与用户电脑 操作系统中 按钮表现上 一致 ,
 在网页中标准按钮更容易被用户识别出 按钮. 网页中 标准按钮与用户电脑 操作系统中 按钮表现上 一致 ,
 这降低了用户识别上 负担.
 这降低了用户识别上 负担. 
2.操作反馈好. 标准按钮具备多种状态,

 "正常状态”"被选中状态”"点击时状态”,
 "正常状态”"被选中状态”"点击时状态”,
 多种状态使标准按钮能够传达更丰富 信息,
 多种状态使标准按钮能够传达更丰富 信息,
 而制作图片按钮 设计师通常没这种耐心 一个按钮制作多种状态,
 而制作图片按钮 设计师通常没这种耐心 一个按钮制作多种状态,
 因 使用图片按钮多数时候 因 图片按钮更好看,
 因 使用图片按钮多数时候 因 图片按钮更好看,
 而设计师并不太在意用用户 使用效率问题. 使用图片制作出好看 页面 本能水平上 设计,
 而设计师并不太在意用用户 使用效率问题. 使用图片制作出好看 页面 本能水平上 设计,
 而使用标准按钮制作易于使用 页面 行 水平上 设计(关于"本能水平上 设计”和"行 水平上 设计”理论请参见Donald A. Norman 《Emotional Design》),
 而使用标准按钮制作易于使用 页面 行 水平上 设计(关于"本能水平上 设计”和"行 水平上 设计”理论请参见Donald A. Norman 《Emotional Design》),
 我认 针对按钮这个问题应该优先考虑行 水平设计 需要,
 我认 针对按钮这个问题应该优先考虑行 水平设计 需要,
 毕竟按钮 网页"行 "部分(web标准将网页分成三部分:结构,
 毕竟按钮 网页"行 "部分(web标准将网页分成三部分:结构,
 表现和行 ) 一个重要元素,
表现和行 ) 一个重要元素,
 何况在我看来系统标准按钮并不难看.
 何况在我看来系统标准按钮并不难看. 
系统标准按钮 存在自己 问题:样式过于呆板,

 尤其 windows2000风格 按钮甚至被一些网页设计师认  无法接受 丑陋,
 尤其 windows2000风格 按钮甚至被一些网页设计师认  无法接受 丑陋,
 相比之下windowsXP式样 按钮更容易被接受,
 相比之下windowsXP式样 按钮更容易被接受,
 无疑多数网页设计师以及公司boss还 更关注本能水平上 设计―――好看 设计.
 无疑多数网页设计师以及公司boss还 更关注本能水平上 设计―――好看 设计. 
css可以对按钮式样进行一些个性化设置,

 可以改变按钮颜色,
 可以改变按钮颜色,
 立体效果,
立体效果,
 文字大小,
文字大小,
 文字颜色. 具体方法可以很容易 在互联网上找到,
文字颜色. 具体方法可以很容易 在互联网上找到,
 这里不多说了. 我认 对于按钮这种程度 变化已经足够了.
 这里不多说了. 我认 对于按钮这种程度 变化已经足够了. 
我 观点:对于真正 按钮应该使用按钮这种表现形式,

 并且应该使用系统标准按钮.
 并且应该使用系统标准按钮. 
伪按钮
在网页中大量存在这样 按钮,

 从表现上看 一个按钮而实际上只提供了一个链接.
 从表现上看 一个按钮而实际上只提供了一个链接. 
起源:初网页上随处可见文字链接,

 设计师 了突出其中 某些特别重要 链接,
 设计师 了突出其中 某些特别重要 链接,
 将其设计成了类似按钮 样子,
 将其设计成了类似按钮 样子,
 使得这些链接更 突出,
 使得这些链接更 突出,
 引导用户点击. 这 从侧面说明了在网页上按钮 很醒目 元素.
 引导用户点击. 这 从侧面说明了在网页上按钮 很醒目 元素. 
现在在网页上使用伪按钮 原因更 多样,

 让我们来看看"民意调查”这个例子:
 让我们来看看"民意调查”这个例子:
在很多网页中"提交”和"查看结果”被设计成相同系统标准按钮,

 然而"提交” 将用户 选择提交给网站 系统,
 然而"提交” 将用户 选择提交给网站 系统,
 存入数据库,
 存入数据库,
 而"查看结果” 打开一个小窗口显示目前 投票结果,
 而"查看结果” 打开一个小窗口显示目前 投票结果,
 显然将"查看结果”设计成文字链接 更合理 ,
 显然将"查看结果”设计成文字链接 更合理 ,
 设计成按钮 原因通常  了样式上 美观:下面一行并排放置两个按钮,
 设计成按钮 原因通常  了样式上 美观:下面一行并排放置两个按钮,
 都有点击 功能,
 都有点击 功能,
 看上去更和谐,
 看上去更和谐,
 但 这却破坏了用户 可操作性.
 但 这却破坏了用户 可操作性. 
[ 关键词:UE UI 原文/来源链接 ]

| 
 | 
 | 
| [收藏至站内网摘] [  'del',   'scrollbars=no,   width=475,   height=575,   left=75,   top=20,   status=no,   resizable=yes'));del.focus();">Del.icio.us收藏] [  %22_blank%22,   %22scrollbars=no,   width=600,   height=450,   left=75,   top=20,   status=no,   resizable=yes%22); void 0">百度搜藏] [抓虾 订阅] [鲜果 订阅] | 

 
 
顶一个呀.9100763