網頁按鈕設計尺寸_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 設計規范給明了按鈕的合理位置.

按鈕要執行的命令和位置的關系.按鈕要執行的命令非常重要,特別是在出現成對的選項時(就像」上一個」和」下一個」).確保設計強調了最主要或者最重要的動作.

導航:首頁 > 萬維百科 > 網頁按鈕設計尺寸

網頁按鈕設計尺寸

與網頁按鈕設計尺寸相關的知識