⑴ 对按钮的一些认识
按钮的定义
就是网页或应用中用来承载用户操作的元件。用来承载用户某一个具体的命令(操作),用户在按下Button后程序系统执行一系列的行为。
通常在视觉上会着重表现。
按钮是一个普通的必不可少的,几乎我们每天都要接触无数次的设计元件,同时在Web或者App上创造流畅的用户体验必不可少。
按钮 的尺寸
点击Button的是鼠标或手指。
MIT Touch Lab的研究结果表明手指接触面积平均为10-14mm之间,指尖平均为8-10mm,所以最佳的热区尺寸应设定为10mmX10mm。
按钮 的形状
通常是直角矩形或者圆角矩形。直角形的按钮向我们传递一种正式严肃的感觉。圆角能够加强信息的传递,并且能够将人的视线集中在元素的中心位置。其他形状,如圆形,三角形等。
按钮 的颜色
按钮的颜色有千万种,可能考虑到界面的设计风格;考虑到对用户的心理暗示;考虑到要传达给用户的理念会选择合适的颜色。比如大众默认的红色按钮传达有警告、不可以的意思,同时也最能引起注意的颜色;蓝色则传达着可行,畅通之意;灰色则传达着不可用,不可点击之意,如灰置按钮就是这样应用的。
按钮 的样式
1.立体按钮
立体按钮样式相较于扁平按钮设计增加了一维空间,在复杂或宽裕的空间中强调功能,立体按钮比扁平按钮更加显眼。
2.扁平按钮
扁平的按钮不突出,在点击时会有背景颜色,不打扰内容。
3.开关按钮
用同一个Button表示开启和关闭,节省空间。
4.幽灵按钮
透明背景,与页面文字一样颜色,只加上边框,通常基于品牌或设计的考虑。
5.悬浮按钮
悬浮按钮用于驱动动作时使用。当然在其它场景使用并不局限于单一形状,可以是图片文字结合,也可以是icon单独构成,悬浮于页面中。
悬浮按钮也是谷歌设计的重要部分,它是一个圆形的材质按钮,点按之后按钮浮起并表现墨水晕开的效果,利用本身的圆形形状悬浮于界面之上与其他元素进行区分,加上运动动作,包括渐变,展开和转化为单一定点。
按钮 的状态
按钮有可用不可用两种状态,以及在交互上默认状态、鼠标或悬浮时的状态和按下时的状态。
之前有提到灰置按钮,就是不可用的。如下图的应用按钮,现在这种情况是不可用,不能点击的。
只有在你做出相应的改动时,这个按钮才会被唤醒,变成可用可点击的状态。
在Web中按钮的默认状态下;
鼠标悬停时是这样;
按下时是这样的。
在界面设计按钮时都要考虑到这个交互问题,承现三种不同状态。
按钮 的构成形式
按钮可以分为纯文字的、纯icon的,纯图片的以及这三种元素各自相结合的,最常见的就是纯文字形、纯icon形和文字icon结合形,纯文字的太常见,就不用再例图说明了。
按钮 的使用形式
单个 按钮 ,最常见的。
按钮组 ,一般成组出现,共用边框,在视觉上成一个整体长条形状。末尾可能有更多的按钮隐藏,通过下拉箭头表示。
列表型 按钮 ,类似Select,从可选的列表中选择一项或者多项的菜单。
按钮 的摆放位置
按钮应放置在用户能够直接找到或者他有预期能看到的地方。例如,iOS UI 设计规范给明了按钮的合理位置。
按钮要执行的命令和位置的关系非常重要,,特别是在出现成对的选项时(就像”上一个”和”下一个”),确保设计强调了最主要或者最重要的动作。
在下面的例子中我们使用了红色的按钮颜色表现一个潜在的具有破坏性的动作,并且,主要动作不但可以通过颜色和对比度去引起注意,还可以看它是否置于对话段落的右边。
⑵ 如何实现webqq的按钮样式
你是想问用什么软件来实现?
⑶ 怎么给按钮添加CSS样式
给按钮添加css样式的方法:
添加方法:
1、.btn {BORDER-RIGHT: #7b9ebd 1px solid; 右边线
2、PADDING-RIGHT: 2px; 内边距 右
3、BORDER-TOP: #7b9ebd 1px solid; 上边线
4、PADDING-LEFT: 2px; 内边距 左
5、FONT-SIZE: 12px; 文字大小
6、BORDER-LEFT: #7b9ebd 1px solid; 左边线
7、CURSOR: hand; 鼠标移上去时,变成手形。
8、COLOR: black; 颜色黑 (表示文字颜色)
9、PADDING-TOP: 2px; 内边距 上
10、BORDER-BOTTOM: #7b9ebd 1px solid }底边线
(3)web按钮样式扩展阅读
CSS样式部分
大小 {font-size: 12px},x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位:PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体: (font-family)
"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
背景属性: (background)
色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
重复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
字间距 {letter-spacing: normal;} 数值 /*这个属性有用,多实践下*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
⑷ web中如何改变button的形状
2种办法:
1. 使用Map
可以通过HTML的MAP标签,把图片上的任意形状规定为按钮。
2. 对按钮使用样式
<input type="button" value="aaa" alt="" style="background-image:url('aaa.jpg')" />
⑸ HTML中如何改变按钮的颜色
HTML button按钮的边框样式与颜色都是可以修改的,用基本的HTML语法难以设计出美轮美奂的按钮风格,透过CSS却可以很容易的办到,在本篇HTML button按钮边框样式与颜色的修改介绍中,我们将会用到CSSborder属性其中的边框样式(border-style)以及边框颜色(border-color)来制做,当然按钮本身的宽度(width)与高度(height)也必须搭配使用,无论是button还是submit按钮都可以用这样的技巧,但不同的浏览器可能会有一点点小小的差异,这跟浏览器本身有关系,设计按钮的css效果时,通常要多用几个浏览器测试。
范例一、HTML button按钮边框样式与颜色
范例二延续范例一的程式码,增加了background-color 的属性,替按钮增加背景颜色,这里为了让范例比较简洁一点,所以背景颜色都是用粉红色(pink)呈现,你也可以自己修改为其他不同的背景颜色。
⑹ ps图层样式下拉菜单中找不到“web翻转样式、web样式……”
你试下载入样式。把photoshop cs∕required∕预置∕样式”文件夹里却有这几项载入啊
⑺ Web标准控件中有哪3种不同类型的按钮控件
Button, ImageButton, LinkButton.
区别在于呈现的html不同。他们也有一些具体的属性不同。
LinkButton : WebControl, IButtonControl, IPostBackEventHandler
Button : WebControl, IButtonControl, IPostBackEventHandler
ImageButton: Image, IPostBackDataHandler, IPostBackEventHandler, IButtonControl
从继承树上看,Button和LinkButton都直接继承自WebControl。但是ImageButton是经过Image才继承自WebControl的,另外它实现了IPostBackDataHandler接口。
⑻ web前端中fc-button是什么框架里边的按钮
button是按钮的意思,一般出现在<input />标签当中
⑼ 如何设置web窗体中的默认按钮
web窗体中button默认生成的html控件为input type="submit" /,即提交表单按钮,不论button是否编写事件,客户端均会与服务器产生交互,所以会有页面重载的情况。不想设置为提交按钮,只需把button属性UseSubmitBehavior修改为False即可,这样最终生成的html控件会变成input type="button" / 如果不行,设置button的onClientClick属性为"javascript:return;"则按钮不再响应任何事件