臨滄網站按鈕設計大小多少合適

A. 做交互設計時，按鈕大小如何規范

做界面交互設計的時候，有個看似簡單但依然容易引起撕逼的問題——按鈕到底得做多大。無論是面對美術同學設計的各種精美小巧細如針尖的按鈕，或是策劃同學各種「加加加」的需求轟炸，還是老闆「大大大」的呼喊，最終還是需要落地——按鈕這玩意，多大才是大，多小才算小。這個時候，就需要一套設計規范和標准，但也要言之有理，讓人心服口服地遵守。

本文就介紹一個簡單快速的入門，讓大家了解到按鈕大小設計的邏輯，還有到底應該設多少大小的問題。

事先說明：本文介紹的每一節的課題，都是值得交互設計們深入研究的。本文從簡單入手，講究快速實用，摒棄容易混淆新人的長篇大論，但還是建議能查閱網上的相關資料，才能更加深入地了解這方面的知識，希望能幫助到大家。

1、菲茨定律（Fitts』s Law）

關於按鈕到底做多大，有一個很牛逼的公式，稱為菲茨定律：

其中：

MT=完成點擊的時間，理論上來說越小越好

a、b 是變化參數，不知道有什麼用

A = 起點到目標中心的距離，也就是手指移動到按鈕的距離

W = 目標在運動軸線上的寬度，也就是按鈕的大小

作為一個文科生對於任何數學公式都是拒絕的，有興趣的同學可以網路詳細研究。列出這個公式的目的是，讓大家了解到，我們所謂的「按鈕手感」，是由哪幾個參數影響的。

不想研究這個公式的同學，可以直接看對這個公式的解讀（翻譯）：

1）按鈕越大，越容易被點中（這個有點像廢話）。

2）尺寸小的按鈕，只要增大微小一點，對可點擊性就增加很多。

對第二點的理解就是，按鈕做得太小是很可憐的，犧牲任何東西都不能犧牲按鈕大小

3）隨著按鈕的增大，可點性增幅降低

同樣，一味無腦地增大按鈕尺寸，並不能帶來體驗感的同樣幅度的提升，差不多就好。

4）按鈕過大，不會顯著增加精度，但會降低速度

按鈕過大帶來的好處會越來越小，而且會帶來另外新的問題——想像一下：拿著一個碩大無比如同桌子一樣大小的手柄，肯定不如正常尺寸的好。

本節get：菲茨定律是一個很牛逼的定律，想深入研究可以看知乎上的一篇文章（傳送門： https://zhuanlan.hu.com/p/25530956 ）。

2、不要廢話直接給結論吧

菲茨定律是原理，但最終結論是什麼呢，到底要設置多大的按鈕呢，有很多講交互的書籍，有各種答案：

ISO標准：

標准尺寸——19mm*19mm(mm是尺寸單位，毫米）

最小尺寸——9.5mm

最低標准——6.4mm

按鈕和按鈕之間最小間距——3mm

iOS（蘋果）標准：

1倍率設備——44*44dp（dp表示像素，根據蘋果設備屏幕，換算下來約7mm）

安卓標准：

48dp(約為7.4mm)

微軟標准：

115dp（約為9mm）

看了這么多標准，是不是有點懵？

實際上，目前沒有一個統一的標准，沒有人可以解釋為什麼9mm的按鈕會比8mm的按鈕好，熟悉微積分的同學應該知道，一個平滑的曲線是可以無限分割的，沒有那個「好」與「不好」的明顯邊界。

不過，現在界面都要求精細化，按鈕都偏嚮往小了做，所以9mm~15mm就已經算得上是大按鈕了，6mm~9mm是普遍喜歡的區域。但做人要有底線，最好不要再低於6mm了，而且細小的按鈕加上過密的排布和微小的間距，會更加加重「誤觸的災難」。

另外補充一句，特別是游戲，一些重要的入口，是不在這個體系之內的。相信大家對於很多手游內一個碩大的「play」或「開始游戲」按鈕的印象都不會陌生吧。

本節get：

大按鈕9mm~15mm

小按鈕6mm~9mm

請盡量保持在這兩個標准內

3、什麼是PPI

當有人說最合適的按鈕是XX像素時，那麼這個人不是外行就是太懶。在移動設備上，不談設備直接說像素（px）應該是多少多少，都是沒有意義的。

打開網路，查看PPI的解釋——PPI是Pixels Per Inch縮寫，pixels per inch所表示的是每英寸所擁有的像素（pixel）數目。簡單的說，每個手機的PPI都不一樣，所以你的手機的6毫米（mm），和我的手機的6毫米（mm），是不一樣的，也就是對應的像素值（px）也是不一樣的。

所以PPI沒什麼玄乎的，就是把第2節的毫米（mm）轉成像素（px）的媒介，計算方法也很簡單，像素=PPI*毫米值*0.03937就可以了，當然也可以弄個高大上的公式：

實際工作中，建議大家把一些主流的設備上的都列出來，等到要做的時候再算就會很繁瑣，而且事先列出來有助於時刻遵守，做得多了也就不用再一一對著看了，自然而然就會有意識地去遵守，有點像「肌肉記憶」。

另外，大家也會接觸到一個DPI的概念，這兩個概念非常類似，甚至有一些地方都混為一談。網上介紹DPI和PPI區分的文章很多，有興趣的同學可以自行尋找學習，但是有一點個人的建議：如果你是做手機游戲和軟體的界面設計的，可以只關注PPI，而無視DPI，不然大量的信息充斥進來，很容易混淆。

那麼如何知道設備的PPI呢，很簡單直接網路，或者自己也可以算，參考我這個公式：

通過計算發現iPhoneX和官方公布的數值略有差距，可能全面屏採用了一套不同的演算法。

另外再最後啰嗦一句，其實很多項目，都是只有一個「設計解析度」的，也就是GUI設計的時候，只是以一個解析度作設計，其他解析度只是進行適配，不太可能每個解析度都單獨進行一套設計。目前游戲主流的設計解析度是1334*750（iPhone6），或是1920*1080(Plus設備）。

本節get：

根據設備的PPI，把物理大小（mm）轉成像素（px），才有實際操作設計的意義。

4、不同的位置對大小的影響

由於移動設備的小巧，所以其持握方式也會對按鈕大小有要求，一般來說，離設備邊緣的按鈕應該設的更大一些，離設備越中間的按鈕就可以放寬要求。

另外，如果是豎屏模式的游戲或軟體，甚至是可以支持單手操作的，最好在這個基礎上增加1mm左右。具體原因是：

橫屏操作，和屏幕接觸的主要還是大拇指指面，而橫屏下，接觸屏幕的很有可能是拇指指腹，從接觸面積上來說，幾乎少了一半。設置過iPhone指紋解鎖的人應該知道，錄入手指正面的指紋後，系統還需要我們錄入指腹的指紋，這也是考慮到單手手持手機下，手指和指紋屏的接觸情況。

5、其他解決辦法

當然，規范是死的，實際情況還會有很多不得不違反規范的做法，為了讓設計效果和實際體驗折中妥協，我們還可以採取下列方法：

只犧牲一個維度（寬或高），也能達到較好的點按效果：

不怕小按鈕，就怕小按鈕扎堆，如果是並排密集的按鈕，最好能預留出間距，防止誤觸：

上面那個3mm，放置在iPhone 8 Plus上對應的像素就是47，對應其他的設備也可以用上文介紹的方法計算出來。

讓按鈕的觸控區域和按鈕的實際尺寸脫鉤，這個就需要程序做支持了，這是最一勞永逸的做法，可以應對各種不同的情況，但要注意一點：觸控區域代替了按鈕，執行響應的任務，那麼觸控區域本身就應該代替按鈕，執行遵守上文所說的一系列規范了。

B. 「UI設計」如何做好按鈕設計的9個基本原則

按鈕是任何用戶界面當中（無論是桌面還是移動用戶界面）必備的交互元素：甚至可以說，如果頁面中沒有一個按鈕，整個頁面設計將是不完整的。

接下來我們就來聊聊制定按鈕規范時會遇到的一些問題，雖然只有普通按鈕，但還是有很多細節值得我們思考學習。

大綱如下

1、 按鈕的類型

2、 按鈕的狀態

3、 按鈕的主次關系

4、 按鈕的設計尺寸

5、 按鈕的圓角

6、 按鈕的文字

7、 按鈕的樣式一致

8、 按鈕的色彩

9、 按鈕的擺放位置

1、按鈕的類型

按鈕包括很多種，本文主要分享的是我們在設計中經常運用到的一些按鈕類型。比如普通按鈕、圖標按鈕、文字按鈕、下拉按鈕等等

2、按鈕的狀態

按鈕的狀態一般分為三種：正常態、不可點擊狀態、點擊狀態。

正常狀態就不必多講了。按壓狀態：我常用的一種方式是將按鈕的不透明度改為80%- 85%:

不可點擊狀態，也推薦兩種實現方式，一種是降低為30%的透明度，另一種是直接置灰:

3、按鈕的主次關系

頁面的內容信息可以通過文字的大小、顏色形成層級關系。同樣按鈕設計，我們可以在風格上進行區分，讓主要按鈕與次要按鈕形成差異，達到層級結構的視覺提升，更好引導用戶根據設定的軌跡進行操作。

4、  按鈕的設計尺寸

4.1   合適的大小

按鈕需要方便用戶進行點擊操作，如果用戶點擊失敗或者誤點到周邊元素，就會帶給用戶不友好的體驗。若是帶有文本的按鈕，只要文字大小不要小於極限值即 移動設備上 44 * 44 ，通常實現出來的按鈕交互熱區都會滿足點擊需求。

4.2 按鈕的高度

每個平台都會有多種型號的按鈕，我見過最多的可以分為5種：超大按鈕、大按鈕、中按鈕、小按鈕，超小按鈕，這個可以根據自己平台的需要來制定多少種。每一種按鈕都需要有一個特定高度，那麼這個高度如何制定才比較科學呢？這里可以推薦一種方式，就是按鈕的高度是文字的三倍左右，這樣看起來會比較舒服：

4.2 按鈕的寬度

在不同的頁面中按鈕的寬度是隨機的，所以按鈕的具體寬度我們需要具體的功能來設置。

比如在閑魚 APP的登錄頁、購買頁中，按鈕的寬度都不是相同的。

5、  按鈕的圓角

對於按鈕邊框來說，我們通常採用全圓角和小圓角居多，這樣顯得穩重大氣。 一般我採用全圓角的圓角值等於按鈕高度值的一半，而小圓角的圓角值通常控制在 1/4H（高度值的四分之一）以內。

同時要注意的一點是，在同一款產品中要保證所有按鈕的  圓角比例是一致的，而不是圓角一致  。如果不同大小按鈕的圓角都是一致的，那會顯得非常別扭。

6、  按鈕的文字

按鈕文字和邊框的設計要預留一定的留白，不要做「捨不得」的設計，使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負空間獲取經驗，看看文字大小和負空間之間是否存在某種比例關系。找到這個比例關系運用到按鈕設計中，也許會讓你的設計顯得更加成熟穩重。

建議按鈕的文字一般  不要超過6個漢字  。

7、  按鈕的樣式一致

在同一頁面中  按鈕的樣式要形成一致  ，不要給用戶造成理解上的成本。

8、  按鈕的色彩

顏色部分比較簡單，一般會選用規范體系的顏色即可。但像紅色或者橙色多為行動刺激作用，不適合在非品牌色的時候濫用。淺灰色或者低飽和度的色系會帶有不可用、禁用、失效等屬性，需要酌情選擇。

9、  按鈕的擺放位置

按鈕的擺放位置通常要  結合用戶的視覺感受、與用戶操作習慣  進行擺放。

好了，以上就是關於按鈕規范的分享，希望能幫助大家提供一些思路和靈感，歡迎交流！

C. 網頁設計的頁面尺寸標准

對於固定寬度的網站布局，設計師常用的解析度有：760px、780px、920px、950px等，如今大尺寸、寬屏幕的顯示器越來越多，越來越普及，有些設計師也開始採用1000px、1003px這樣的解析度。

頁面最大化、滿屏化的網站看著的確是舒服，但過高的解析度在設計師顯示器上合適，並不代表在瀏覽者的顯示器上也合適。現在用的最多的解析度還是1024*768，在這種解析度下，含滾動條的頁面最大寬度應不超過994px，所以一般頁面寬度定位在990px以內比較適宜。

這一講主要來說說網頁設計的標准尺寸

一、在800*600解析度下，頁面寬度應在778px以內，這樣不會出現橫向滾動條，高度可以依據版面和內容而定。

二、在1024*768解析度下，頁面寬度應在1003px以內，如果僅一屏顯示的'頁面，高度在612px～615px之間，這樣橫向和縱向滾動條都不會出現。

三、在photoshop中做800*600解析度下僅一屏的網頁時，尺寸可以設為740*560左右。

頁面標准按800*600解析度製作，尺寸為778px*434px

頁面長度一般不要超過三屏，寬度不宜出現橫向滾動條為宜

每個標准頁面為A4幅面大小，即8.5*11英寸

全尺寸banner為468px*60px，半尺寸banner為234px*60px，小banner為88px*31px

小圖標的標准尺寸還有120px*90px、120px*60px等

每個非首頁靜態頁面含圖片位元組不超過60K，全尺寸banner不宜超過14k

標准網頁廣告尺寸規格

1、120*120，這種廣告規格適用於產品或新聞照片展示。

2、120*60，這種廣告規格主要用於做LOGO使用。

3、120*90，主要應用於產品演示或大型LOGO。

4、125*125，這種規格適於表現照片效果的圖像廣告。

5、234*60，這種規格適用於框架或左右形式主頁的廣告鏈接。

6、392*72，主要用於有較多圖片展示的廣告條，用於頁眉或頁腳。

7、468*60，應用最為廣泛的廣告條尺寸，用於頁眉或頁腳。

8、88*31，主要用於網頁鏈接，或網站小型LOGO。

BUTTON 120*60(必須用gif) 7K

215*50(必須用gif) 7K

通欄 760*100 25K 靜態圖片或減少運動效果

430*50 15K

超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果

巨幅廣告 336*280 35K

585*120

豎邊廣告 130*300 25K

全屏廣告 800*600 40K 必須為靜態圖片，FLASH格式

圖文混排 各頻道不同 15K

彈出窗口 400*300(盡量用gif) 40K

BANNER 468*60(盡量用gif) 18K

懸停按鈕 80*80(必須用gif) 7K

流媒體 300*200

(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間小於5秒60幀(1秒/12幀)

網頁中的廣告尺寸

1.首頁右上，尺寸120*60

2.首頁頂部通欄，尺寸468*60

3.首頁頂部通欄，尺寸760*60

4.首頁中部通欄，尺寸580*60

5.內頁頂部通欄，尺寸468*60

6.內頁頂部通欄，尺寸760*60

7.內頁左上，尺寸150*60或300*300

8.下載地址頁面，尺寸560*60或468*60

9.內頁底部通欄，尺寸760*60

10.左漂浮，尺寸80*80或100*100

11.右漂浮，尺寸80*80或100*100

以上幾種說法可能有點小的出入，大家可以探討一下。

IAB和EIAA發布新的網路廣告尺寸標准

在這6種格式中，除了去年iab發布的4種「通用廣告包」中的格式：160×600, 300×250, 180×150及728×90，還包括新公布的468×60 和120×600(擎天柱)2種。

D. 網頁設計的尺寸大小是多少，寬度應該是多少

其實也沒有硬性規定，但是為了兼容大多數瀏覽器一般是設置960px，隨著現在瀏覽器解析度的變化，已開始向著1000px,1200px寬度發展，例如淘寶(1000px）京東商城（1200px）。如果需要兼容不同瀏覽器尺寸，現在比較流行的做法是做成響應式的，即根據不同解析度顯示不同的尺寸，工作量也就隨之增加了。貌似國內的大網站也沒有使用。

E. 網頁設計常用尺寸大小

網頁設計常用尺寸大小

網頁的.寬度

 現在比較流行的網頁寬度是950px，網頁兩邊留出少許白邊，簡潔又大方。 1024*768下，網頁寬度保持在1002以內，如果滿框顯示的話,高度是612-615

之間.就不會出現水平滾動條和垂直滾動條。 網頁設計中常用的廣告尺寸

 BUTTON

120*60

215*50

 通欄

760*100

430*50

 超級通欄 760*100或者760*200 巨幅廣告

336*280

585*120

 豎邊廣告 130*300 全屏廣告 800*600 彈出窗口 400*300 BANNER 468*60 懸停按鈕 80*80 流媒體

300*200

國際標準的網頁BANNER大小規格  橫幅廣告(Banner)

文件大小：gif:14K/swf:16K

廣告尺寸：468*60像素

廣告位置：頁面頂部

 按鈕廣告(Button)

文件大小：gif:6K/swf:8K

廣告尺寸：170*60/120*60像素 廣告位置：第一屏 第二屏

備註：觸發式LOGO，彈出圖片尺寸為160*160 文件大小gif:9K/swf:12K

彈出窗口廣告(Pop up)

文件大小：gif:18K/swf:20K

廣告尺寸：360*300像素

廣告位置：第一屏

 通欄廣告(Full collumn)

文件大小：gif:20K/swf:25K

廣告尺寸：770*100像素

廣告位置：第一屏 第二屏

 流媒體(Flash layer)

文件大小：swf:25K

廣告尺寸：200*150像素

廣告位置：第一屏

形式：瀏覽打開頁面，該廣告放映8秒後消失

 畫中畫(PIP)

文件大小：gif:20K/swf:25K

廣告尺寸：360*300像素

廣告位置：新聞最終頁面

 浮動標識(Float box)

文件大小：gif/swf/flash<8k

廣告尺寸：80*80像素

廣告位置：第一屏右側

 全屏收縮廣告 (Full screen)

文件大小：gif:20K

廣告尺寸：750*550像素

廣告位置：第一屏

形式：打開瀏覽頁面前該廣告以全屏形式出現3-5秒，隨後消失  擎天柱(Sky-scraper)

文件大小：gif:15K/swf:17K

廣告尺寸：130*200像素

廣告位置：第一屏 第二屏

 視頻廣告

文件大小：gif/swf/flash<8k

廣告尺寸：300*250像素

廣告位置：第一屏兩側

 文字鏈接(Text link)

規格：不超過10個漢字

廣告位置：第一屏 第二屏

備注:文字鏈接長度以不折行為准

網頁設計LOGO的標准尺寸

120×120 這種廣告規格適用於產品或新聞照片展示。 120×60 這種廣告規格主要用於做LOGO使用。 120×90 主要應用於產品演示或大型LOGO。 88×31

主要用於網頁底部友情鏈接中的LOGO，或網站小型LOGO。 ;

F. 移動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，重點是加了透明區域。這樣就更方便點擊了。

G. 網頁設計中banner設計尺寸是多少

不同的環境下設置的尺寸都不一樣

1、800*600下，網頁寬度保持在778以內，就不會出現水平滾動條，高度則視版面和內容決定。

2、1024*768下，網頁寬度保持在1002以內，就不會出現水平滾動條，高度則視版面和內決定。

3、在ps裡面做網頁可以在800*600狀態下顯示全屏，頁面的下方又不會出現滑動條，尺寸為740*560左右。

4、1024*768 下網頁的尺寸:width=955,height=600

800*600 下網頁的尺寸:width=760,height=420。

5、一般解析度在800*600的情況下，頁面的顯示尺寸為：780*428px，

解析度在640*480的情況下，頁面的顯示尺寸為:620*311px，

解析度在1024*768的情況下，頁面的顯示尺寸為：1007*600px。

(7)臨滄網站按鈕設計大小多少合適擴展閱讀：

banner設計標准尺寸大全

Internet Advertising Bureau
(IAB，國際廣告局)的"標准和管理委員會"聯合Coalition for Advertising Supported Informatiln
and
Entertainment(CASIE，廣告支持信息和娛樂聯合會)聯合推出了一系列網路廣告宣傳物的標准尺寸。

這些尺寸作為建議，提供給廣告生產省和消費者，使大家都能接受。現在網站上的廣告幾乎都遵循IAC/CASIE標准。

1997年第一次標准公布

Num Size(pix) Name

1、468×60 全尺寸banner

2、392×72 全尺寸帶導航條banner

3、234×60 半尺寸banner

4、125×125 方形按鈕

5、120×90 按鈕＃1或小圖標

6、120×60 按鈕＃2或小圖標

7、88×31 小按鈕或banner

8、120×240 垂直banner

2001年第二次標准公布

Num Size(pix) Name

1、120×600 "摩天大樓"形

2、160×600 寬"摩天大樓"形

3、180×150 長方形

4、300×250 中級長方形

6、240×400 豎長方形

7、250×250 "正方形彈出式"廣告

IAB 將不再支持1997年第一次公布標准中的392×72形。

從banner自身的設計大小看

1、全尺寸banner橫幅設計為468*60px，半尺寸banner為234*60px，小banner為88*31px，另外120*90，120*60也是小圖標的標准尺寸。

2、頁面長度原則上不超過3屏，寬度不超過1屏。

3、每個非首頁靜態頁面含圖片位元組不超過60K，全尺寸banner不超過14K。

4、每個標准頁面為A4幅面大小，即8.5*11英寸。

參考資料來源：網路-網頁設計標准

H. 網頁設計合適的頁面尺寸是多少

網頁設計選用的解析度是72像素，使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計，一般採用全屏展示和兩側留白的方式。
全屏展示，是整個網站看起來大氣一些，但是布局要合理安排，不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸，能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域，內容限時區域在好控制在1000px-1200px。

I. 移動APP設計時，按鈕做多大尺寸

按鈕是一個普通的設計元素,不過我們基本每天或多或少接觸他。除了這個,由於按鈕是一個在網頁或者app上創造流暢的會話流體驗的必不可少的元素,所以它值得我們為按鈕這樣最基本的元素提供最佳的體驗做出努力.為按鈕做些最佳實踐，讓按鈕看起來像按鈕。

想想如何達到設計溝通的可供性吧.用戶是怎麼理解一個按鈕的呢?用形狀和顏色是界面上的元素看起來像一個按鈕.

Groupon 的登錄頁面關注於最主要的動作.

另外,絲路覺得手指點擊的尺寸也是要在設計時仔細考慮的事情.按鈕的大小在幫助用戶分辨這些元素的過程中起到了決定性的作用.不同的平台提供了熱區的最小尺寸的不同設計規范.MIT Touch Lab的研究結果表明手指接觸面積平均為10-14mm之間,指尖平均為8-10mm,所以.最佳的熱區尺寸應設定為10mmX10mm

位置和命令

按鈕應放置在用戶能夠直接找到或者他有預期能看到的地方.例如,iOS UI 設計規范給明了按鈕的合理位置.

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

J. 網頁設計，一般最少要設置多少高度

大概的高度為：

Window XP首屏大小580 px
Window 7 首屏大小710 px

具體原因如下：

• 一個網頁的尺寸設置和瀏覽器與系統的尺寸大為相關，我們不可能滿足所以用戶的最佳尺寸，但我們能做的是讓絕大多少用戶感覺是最佳的。

• 系統解析度統計：

對大於30W台客戶端用戶進行測試，得到的測試數據如下（數據來源於網路）：