网页设计中的按钮设计

  在网页设计中,按钮设计是常被忽略却又相当重要的一个角色。在网页设计中,按钮与链接的功能类似,都是经过点击后到达另一页面或实现某种目的,不过二者还是有实际上的区别的。


  按钮代表着“做某件事”,即点击了按钮代表着操作了一个功能,做的这件事是有后果的,不易挽回的。并且绝大多数都是对表单的提交。从技术上讲,这类按钮的作用是向后台提交了数据,“命令”服务器去做了一件事。而链接则是带你去另一个页面,从功能属性上而言,它是看,而非是做。

  按钮和链接的另一区别就是它的眼球效应。因此按钮本身的用色也是有讲究的。在按钮设计中,本身的颜色应该区别于它周边的环境色,因此它要更亮而且有高对比度的颜色。其次,基本原则是要容易找到,特别重要的按钮应该处在画面的中心位置。另外,按钮上面的文字表述需要言简意赅,直接明了,在按钮上使用什么文字传递给用户非常重要,千万不要让观者去思考,越简单、越直接越好。在尺寸上按钮并非越大越好,要严格控制尺寸。按钮要充分通透,不能和网页中的其他元素挤在一起。它需要充足的margin(外边距)才能更加突出,也需要更多的padding(内边距)才能让文字更容易阅读。最后就是注意鼠标滑过的效果,会有力的增强按钮的点击感,给用户带来良好的用户体验,起到画龙点睛的作用。

时间: 2016-04-07

网页设计中的按钮设计的相关文章

手机网站交互设计中的信息设计

在手机上浏览信息,存在着太多的局限,手机屏幕小注定了一页不能显示太多的信息,环境光线的变化注定页面设计不能过于花哨,流量限制注定不能有太多的图片和样式. 如果让你的用户直接在手机上浏览为web所设计的网页,即使是经过一些手机浏览器的优化,体验还是会很糟糕,甚至有时候会让人难以忍受. 如何调整信息展现方式,使内容能在小屏幕的手机上也更友好的展现呢?接下来我将通过一些原理和实例来阐述自己的观点. 首先,老祖宗Ben Shneiderman的交互设计8项黄金法则我们要铭记于心,因为这些法则也是适用于移

UI设计中的包容性设计

近年来,移动互联网行业快速发展,互联网已经成为人们日常经常使用的信息交流和获取渠道.虽然智能手机和平板等移动设备更新换代的速度非常快,可是目前大多数网页和应用在设计之初没有考虑到特殊人群的需要,就算设备再强大,这类人群在访问网页或使用应用时还是会遇到很多困难.于是乎,"包容性设计" 的概念就被引入到了UI设计中. 那么,什么是包容性设计?英国标准协会(2005)将包容性设计定义为"主流产品或服务的设计能为尽可能多的人群所方便使用--无需特别的适应或特殊的设计".当然

信息设计的交流原则和信息设计中的图形设计

文章描述:信息设计中的图形设计原则. 在当今纷繁复杂的世界,设计形式也是百花齐放,什么设计才是最容易被用户接受,并且能很好的给用户带来他们需要的信息,这是值得我们探讨的.  信息设计的定义 信息设计顾名思义就是用于信息交流的设计,如果我们把"信息"这个词语拿出来单独来解释的话,首先"信息"这个词语由来已久,它是人类文明赖以发展的基础,可以说人类所有的知识和故事都是信息,通过信息的传递,人类的文明才得以进步和向前发展.现在人们接收的信息越来越多,所以我们可以根据规律来

让我们谈谈网页设计中的卡式设计

  前言 "我要卡式的",这是上一期客户在和我聊需求的时候说的第一个需求点.毫无疑问,卡式不论是适应PC还是手机都表现优秀.从在线商城到社交媒体网站,卡式设计成为网页设计中的一股强大风潮且风头正劲.其中最重要的原因想必就是它的灵活性. 卡片,可以是任何形状.颜色和形式.但是总的来说,他们都包含了图片.图标和一些基本的文字信息,例如标题.用户名和位置信息. "然而,其风靡起来的核心还在于其简单性.你很少见到复杂的卡片设计,它之所以出现的目的就是为了引导用户去点击它"

HTML网页设计中关于字体设计的详细讲解

设计|网页|网页设计     ●字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面:     字符集的设定.     在查看html文件原代码时,我们经常可以在文件头<head>和</head>之间看到这么一句代码:     <meta http-equiv="Content-Type" content="text/html; charset

谈谈网页设计中的卡式设计

  前言 "我要卡式的",这是上一期客户在和我聊需求的时候说的第一个需求点.毫无疑问,卡式不论是适应PC还是手机都表现优秀.从在线商城到社交媒体网站,卡式设计成为网页设计中的一股强大风潮且风头正劲.其中最重要的原因想必就是它的灵活性. 卡片,可以是任何形状.颜色和形式.但是总的来说,他们都包含了图片.图标和一些基本的文字信息,例如标题.用户名和位置信息. "然而,其风靡起来的核心还在于其简单性.你很少见到复杂的卡片设计,它之所以出现的目的就是为了引导用户去点击它"

HTML网页设计中关于字体设计

 字体(Font)的设置是网页制作新手遇到的第一个难点.如何控制字体大小,如何取消超链接字体的下划线是网友来信问得最多的.好,我们来彻底研究一下字体的各个方面: 字符集的设定. 在查看html文件原代码时,我们经常可以在文件头<head>和</head>之间看到这么一句代码: <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 这段代码的作用是什

原型设计中一个按钮的“哲学”故事

什么是原型设计? 比较全面的解释是这样的: 产品原型可以概括的说是整个产品面市之前的一个框架设计图, 以网站产品举例,整个前期的交互设计流程图完成之后,就是进入到原形开发的设计阶段,简单的来说是将页面的模块.原素.人机交互的形式.甚至一些简单的特效,利用线框描述的方法,将产品脱离概念状态下更加具像跟生动的表达出来. 原型设计是交互设计师与PD.PM.网站开发工程师沟通的最好工具.而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品. 解释完了它的概念我们就要来说一

网页设计中的版式设计之图版率

  在页面设计中,除了文字之外,通常都会加入图片或是插图等视觉直观性的内容.表示这些视觉要素所占面积与整体页面的之间比率的就是图版率. 简单说来,图版率就是页面中图片面积的所占比.这种文字和图片所占的比率,对于页面的整体效果和其内容的易读性会产生巨大的影响. 图版率高低的区别:同样的设计风格下,图版率高的页面会给人以热闹而活跃的感觉,反之图版率低的页面则会传达出沉稳.安静的效果.提高图版率可以活跃版面,优化版面的视觉度.但完全没有文字的版面也会显得空洞,反而会削弱版面的视觉度. 如果页面的整体全