手機(jī)UI設(shè)計(jì)尺寸有哪些? 超全面的UI元素尺寸設(shè)置指南

發(fā)布時(shí)間：2021-08-06 17:20:54 作者：佚名

手機(jī)UI設(shè)計(jì)尺寸有哪些？作為新手在設(shè)計(jì)手機(jī)ui的頁面的時(shí)候，發(fā)現(xiàn)自己設(shè)計(jì)的尺寸都很奇怪，如果能有元素尺寸介紹就好了，下面就來看看我們匯總的超全面的UI元素尺寸設(shè)置指南

定義按鈕尺寸，我們首先要知道的是，按鈕在界面或整個(gè)應(yīng)用中的權(quán)重，尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對(duì)重要性表現(xiàn)的關(guān)鍵因素，不過不在這里展開。

按鈕高度

當(dāng)我們?cè)O(shè)計(jì)按鈕時(shí)，優(yōu)先要從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權(quán)重，分成高、中、低三類：

高權(quán)重：40-56pt
中權(quán)重：24-40pt
低權(quán)重：12-24pt

高權(quán)重的按鈕，類似登錄頁的注冊(cè)、登錄，購(gòu)物詳情頁的購(gòu)買，流程頁中的下一步，它的最小高度應(yīng)該從 40pt 開始遞增，低于這個(gè)大小，那么這個(gè)按鈕就很難在這個(gè)頁面起到視覺支撐，因?yàn)楦杏X太細(xì)了。

中權(quán)重的按鈕，類似個(gè)人主頁的關(guān)注、點(diǎn)贊、評(píng)論按鈕等。這個(gè)層級(jí)的按鈕依舊有比較高頻的交互次數(shù)，我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊最小的尺寸了。這種按鈕通常是組件的一部分，不像層級(jí)最高的按鈕常常是處于一個(gè)孤立的空間，所以高度如果超出 40pt，就會(huì)對(duì)當(dāng)前模塊產(chǎn)生直觀的破壞。

低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對(duì)于按鈕的交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。

使用上面這種方法，在頁面中根據(jù)權(quán)重定尺寸就可以了。還需要注意的是，不同尺寸的按鈕之間，高度的差距不要小于 4 ，否則差異太小不僅拉不開層次，還容易使視覺感受變差。

按鈕寬度

主流的按鈕都是橫向的長(zhǎng)方形，正方形也有，但是不能變成縱向的矩形。

按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無視內(nèi)容的數(shù)量。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或全屏的，可以特殊處理。

普通按鈕，左右間距距離內(nèi)容過多，就會(huì)讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容來設(shè)置按鈕左右的寬，最大寬度應(yīng)該小于內(nèi)容距離上下的 2 倍。

按鈕圓角

按鈕尺寸還有最后一個(gè)屬性，就是按鈕的圓角設(shè)置了。矩形的邊角有三種類型，即直角矩形、圓角矩形、半圓矩形。

為矩形設(shè)置圓角，是為了讓按鈕看起來有一定的圓潤(rùn)感不會(huì)顯得太尖銳，這種圓角的數(shù)值賦予要適當(dāng)，只要超出了一定的范疇，就會(huì)對(duì)視覺的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯(cuò)誤案例。

所以，我們?cè)谠O(shè)計(jì)圓角的過程中，一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，不大于高度的 1/4。例如，一個(gè)24pt的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt，如上圖的效果。

以上就是按鈕相關(guān)尺寸定義的說明，當(dāng)然，在真實(shí)的設(shè)計(jì)需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。

2. 輸入框

輸入框也是我們比較常用的元素之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號(hào)密碼輸入框，以及首頁上方的搜索欄了。

輸入框的使用高度尺寸，常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來會(huì)非常擁擠，比如我用下面學(xué)生的案例做個(gè)演示。

3. 步進(jìn)器

常見的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28 – 40 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28 以后，就會(huì)發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。