网页按钮设计尺寸_HTML中怎么设置按钮的大小

1、HTML中怎么设置按钮的大小？

html中设置按钮的大小：可直接给input元素添加宽、高，具体代码如下：

下面是未设置input按钮大小和设置了按钮大小的对比效果：

html中的表单input元素是内联块状元素，既可以与其它元素在同一行，又可以设置自身的宽度和高度。

如果按照上述方法设置input按钮大小（宽、高），却仍未达到改变input按钮的效果，可检查html中的代码是否有误或者与其它代码相冲突。

拓展资料：

input中的type 属性规定了input 元素的类型，其中属性值submit，定义提交按钮，提交按钮会把表单数据发送到服务器。

<input type="button" /> 定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

例子：

效果

源代码：

<html>

<head>

<title>input</title>

body{background: #ddd;}

form{margin:0;padding:0;}

form .btn{

width:100px;

height: 40px;

}

</style>

</head>

<body>

<p>Email: <input type="text" name="email" /></p>

</form>

</body>

</html>

2、HTML中怎么设置按钮的大小？

<input type="submit" value="确定" style="height:60px;width:60px;display:inline-block;"/>可以设置成块级内联元素，这样就能设置宽高了。

3、关于网页编程HTML中的按钮大小

css就可以
height
width
就可以设置大小
同样咯
你在button里面直接写style..里面就有那2个属性了~~

4、移动app设计时，按钮做多大尺寸

小按钮比大按钮更难于操控。当设计移动界面时，最好把可点击目标的尺寸做大一点，这样更利于用户点击。但这个“大”究竟需要多“大”，才能方便大多数用户呢？丝路教育小编相信很多移动开发者也非常想知道这个问题的答案，最后都在各平台的UI设计规范中找到了答案。

移动平台设计指导规范告诉了我们什么？

在苹果的《iPhone人机界面设计规范》中指出，最小的点击目标尺寸是44 x 44像素。微软的《Windows手机用户界面设计和交互指南》中建议使用34 x 34像素的尺寸，最小也要26 x 26 像素。诺基亚开发指南中建议，目标尺寸应该不小于1cm x 1cm或者28 x 28 像素。

尽管这些指导规范给我们列举了各平台下可点击目标的尺寸标准，但是彼此的标准并不一致，更无法和人类手指的实际尺寸相一致，他们的建议尺寸比手指的平均尺寸要小，这会影响触摸屏下对于点击目标的精准度。

小的点击目标会导致大问题

可点击目标尺寸太小，对于用户体验来说就非常糟糕，因为如果要更精确的触控。用户需要调整手指的操作方式，从指心操作，变为指尖操作，这样才能操作尺寸较小的目标。使用指心操作通常会整个覆盖操作对象，让用户无法分辨他们所要操作的目标，也无法收到操作过程中的视觉反馈，也就无法知晓，他们的操作是否有效。当用户不得不用指尖进行操作时，又出现了一个新问题，这种操作方式非常的慢，而且很吃力，体验很差。

问题不仅这些，目标的尺寸过小还会导致失误的触摸操作。因为尺寸小，所以容易拥挤在一起，用户容易触碰到附近的目标，导致运行结果非用户所愿。手指太大，目标尺寸太小，一根手指的宽度大概能覆盖两个目标的宽度。如果不按压到错误的位置，就会导致错误的操作。食指容易出错，但是拇指更容易出错。因为拇指更大、更笨拙。有时候用户会倾斜拇指，使用拇指的侧边进行操作，但是目标尺寸过小，依然失误频繁。

在移动用户的日常操作中，拇指的使用非常频繁。有时用户无法腾开两只手操作，只能用一只手握住手机，用拇指和食指操作。在这种场景下，用户的操作精度有限，就需要提高目标尺寸来避免操作错误，这就是所谓的友好的触控体验。

食指操作下的平均像素宽度

MIT触摸实验室的做了一项研究，以手指指尖作为调查，分析其感觉机能。研究发现，成年人的食指宽度一般是1.6——2 cm。转换成像素就是45——57 px，这比那些指导书上建议的宽度都要宽。

45——57 px的目标尺寸非常够用，用户可以将整个手指紧贴在目标上。在操作的过程中，用户也能看到目标的边缘。这样用户与控制对象之间的反馈与信息传达变的非常清晰，用户也能知晓他们的操作是否有效。因为尺寸大，定位更快，拖移也更方便。费茨法则中提到过，目标越小，操作耗时就越长。小目标减慢了用户的操作速度，因为需要用户集中精力去精准定位。手指大小的目标则不一样，这种目标给予用户足够的空间操作，容错率也很高。

拇指操作情况下的像素宽度

也有很多用户用拇指敲击屏幕上的目标。拇指比食指要宽，平均宽度大概在2.5cm，转换成像素是72 px。

72像素的实际使用效果很棒，更容易定位、操作的舒适感更好。同样可以看到操作目标的边缘。这意味着用户不用费力的调整手指，使用指尖去操作了。也不用倾斜拇指，用拇指侧面点击目标。

在《小型触摸设备上单手操作研究：关于拇指操作的目标尺寸》这篇文章中发现，目标尺寸的增加会降低失误操作的次数。更多的空间提供了更高的容错率和更精确的操作，同时因为大型的尺寸，目标的表现力也变强。

另外一篇《移动端触摸设计：关于目标选择的关键》中也表达了同样的看法。

手指大小的目标尺寸很理想，但也有特殊情况

将目标尺寸的大小，设置为跟手指大小相近，其中的好处不再赘述。但并不是适合所有的设计场景。在移动设备上，空间有限。这就意味着，如果每个目标的大小都很大，那么屏幕空间根本不够，就需要不断的翻页，这在体验上很糟糕。你需要测量屏幕尺寸，然后计算比例，搞清楚“在这种尺寸的屏幕上，合适的、最大的目标尺寸是多少？”倘若你按照手指大小进行尺寸调整，整个界面的比例很糟糕；再次按照比例调整后，最大的目标尺寸效果也不假，那么就只能使用指导规范上的建议尺寸了。

对于平板设备来说，情况就没有手机那么复杂，因为平板的空间更多。不用害怕没有空间去放置点击目标，空间足够，你可以非常悠然的通过提高尺寸来提高操作适用性。手机是最麻烦的，点击目标的尺寸非常不好拿捏。但正是因为手机的空间有限，容易操作失误，所以才需要设置真实手指大小的目标尺寸。设计师的挑战就在于，要想办法，让屏幕上大多数的目标，尺寸都跟手指大小一致。但也有好处，这迫使设计师设计时更注重功能性、风格更加极简。

为游戏应用设计拇指大小的点击对象

我们无法推测的问题是，用户使用你的应用时，是用食指操作更多？还是用拇指更多？因此，针对这一点，我们要非常细致的做调研，然后设置合理的目标尺寸。然而，如果你的应用是一款游戏的话，大多数用户会使用拇指。这就是为什么很多游戏应用中，一些控件的尺寸一般有拇指那么大，这样用户就能更稳固的双手持握，更精准的操作。

结论

通过调整目标尺寸的大小，结合实际的应用情况，能够有效的提高移动端的适用性，同时提高用户体验。不管你的应用是游戏还是别的什么。触摸屏上的目标就是用来让用户点击的。如果用户需要去想“我该怎样去点击，才能完成精确的操作”，需要再交互前思考方法，需要调整操作方法，使用多种方法才能完成交互。这说明这款产品的交互设计是糟糕的。在这篇文章里，我抛出了个人的一些观点，在触摸即将成为操作方式的一统时代，如何打造友好的触控体验？这是我们将要面临的问题。期待更多的想法，以及更规范的标准。

感谢阅读！

看完这篇丝路提醒你只要记住2点，食指点击目标尺寸是44 x 44像素，拇指是72 x72像素。所以在画界面的时候，要注意这2个尺寸。

小技巧：在导出ICON的时候，假如你的ICON实际尺寸是32×32，那么你可以导出50x50PNG透明背景的ICON，重点是加了透明区域。这样就更方便点击了。

5、网页设计时按钮里的字体大小怎么设

font size

6、用ps做网页按钮应该做多大尺寸的，保存什么样的格式，新手求指教

要看你做那类型的网页。

7、怎样调整网页上按钮字体大小

换个主题好了，可以解决问题
不换主题也可以
回到你电脑桌面-〉右键单击桌版面空白处-〉属性权-〉弹出选项卡窗口-〉第一个选项卡是“主题”第二个是-〉“桌面”……第四个就是“外观”左键点这个选项卡，就能看见“高级”选项了

：
点击高级以后-〉弹出对话框-〉在“项目”里选择你要改变的元素，-〉在右边“大小”里你点向上的箭头是增大字体，点向下的箭头则相反。ps：你还可以在“大小”右边的“颜色”改该要素的颜色

8、html表单中，如何自定义按钮的大小

在按钮中加style样式。。。
举例说明：
下面我给出一个自定义button按钮，
<input
type="button"
value="提交"
style="height=20px;width=50px;"
/>
以上是一个按内钮的代码，我想楼主应容该能看懂
其中style="height=20px;width=50px;"就是样式定义
他的意思就是，这个自定义的button按钮，长50像素，宽20像素！
这就是按钮的大小了吧？根据你自己的需要改变数值就可以改变大小了！
回答完毕，希望能解决你的问题……

9、在静态网页中如何定义按钮的大小

<input type="button" value="测试" name="test" style="height=20px;width=50px;" />

不过很多网站都是用图片做的超链接，默认的按钮太丑了

10、移动APP设计时，按钮做多大尺寸

按钮是一个普通的设计元素,不过我们基本每天或多或少接触他。除了这个专,由于按钮是一个在网页或属者app上创造流畅的会话流体验的必不可少的元素,所以它值得我们为按钮这样最基本的元素提供最佳的体验做出努力.为按钮做些最佳实践，让按钮看起来像按钮。

想想如何达到设计沟通的可供性吧.用户是怎么理解一个按钮的呢?用形状和颜色是界面上的元素看起来像一个按钮.

Groupon 的登录页面关注于最主要的动作.

另外,丝路觉得手指点击的尺寸也是要在设计时仔细考虑的事情.按钮的大小在帮助用户分辨这些元素的过程中起到了决定性的作用.不同的平台提供了热区的最小尺寸的不同设计规范.MIT Touch Lab的研究结果表明手指接触面积平均为10-14mm之间,指尖平均为8-10mm,所以.最佳的热区尺寸应设定为10mmX10mm

位置和命令

按钮应放置在用户能够直接找到或者他有预期能看到的地方.例如,iOS UI 设计规范给明了按钮的合理位置.

按钮要执行的命令和位置的关系.按钮要执行的命令非常重要,特别是在出现成对的选项时(就像”上一个”和”下一个”).确保设计强调了最主要或者最重要的动作.

导航:首页 > 万维百科 > 网页按钮设计尺寸

网页按钮设计尺寸

与网页按钮设计尺寸相关的知识