首先我們要知道組件是什么，它是一個(gè)包含了控件、文字、圖標(biāo)的功能合集。可以是一個(gè)獨(dú)立的信息展示單元，也可以完成一個(gè)復(fù)雜的操作流，是學(xué)習(xí) App 設(shè)計(jì)中最重要的環(huán)節(jié)。

1. 組件的尺寸原則

定義組件的長(zhǎng)和寬，方式有兩種，一種是根據(jù)環(huán)境制定，一種是根據(jù)內(nèi)容調(diào)節(jié)。

第一種，即通過(guò)外部的元素來(lái)確定組件的尺寸。例如我們要設(shè)計(jì)一個(gè)頭部的幻燈片組件，以左右可以滾動(dòng)的形式展現(xiàn)。那么我們首先要根據(jù)想要幻燈片在屏幕中的占比來(lái)制定高度，例如我們覺(jué)得大致要有屏幕 1/3 的比例，那么可以設(shè)定高度為 220pt（664除3），而根據(jù)上下對(duì)齊的原則，左右就由屏幕寬減去左右內(nèi)邊距 16pt 即可。

第二種，是根據(jù)我們里面添加的元素來(lái)確定寬和高。例如在首頁(yè)幻燈片下方，添加左右滾動(dòng)的卡片，那么我們先設(shè)定里面的控件和文字尺寸，然后再通過(guò)制定內(nèi)邊距的形式確定組件的尺寸。

當(dāng)然，也有混合的定義方式，如一開(kāi)始訂好寬，根據(jù)內(nèi)容設(shè)定高，像花瓣瀑布流的卡片，或者定義好高來(lái)調(diào)節(jié)寬。具體使用什么形式，就要因地制宜了。

下面會(huì)通過(guò)幾個(gè)常見(jiàn)的組件案例，來(lái)演示如何定義它們的尺寸的。

2. 動(dòng)態(tài)卡片

動(dòng)態(tài)卡片是很常用的組件，通常以卡片的形式展現(xiàn)。每條動(dòng)態(tài)通常占據(jù)內(nèi)容區(qū)域的整列，即左右減去制定好的內(nèi)邊距 16pt，那么就是 375-32 = 343pt 的寬。而高度，就要根據(jù)里面所包含的元素了，如下圖所示。

3. 設(shè)置列表

設(shè)置列表中，由高度相同的列表項(xiàng)組成，它們的高和寬應(yīng)該是根據(jù)設(shè)計(jì)的風(fēng)格一開(kāi)始就制定好，如比較緊湊的風(fēng)格我們采用 48pt 的高，比較寬松的風(fēng)格就采用 64pt 的高。然后我們?cè)倥帕袃?nèi)部的元素，進(jìn)行水平居中。

4. 班次信息

常見(jiàn)的班次信息，我們?cè)诙x它尺寸時(shí)，也是根據(jù)內(nèi)容來(lái)考慮的。首先確認(rèn)它是一個(gè)撐滿(mǎn)屏幕的組件即 375pt 寬，再填入對(duì)應(yīng)的字段內(nèi)容。

這時(shí)候可以將上下的內(nèi)容拆分成3個(gè)不同的子模塊，班次、時(shí)間、更多操作，班次和更多操作采用固定高度 44pt 的方式，時(shí)間則根據(jù)內(nèi)容設(shè)置邊距的方式，最后得到的高度總和，就是班次信息組件的高度。

5. 瓷片區(qū)

主流的瓷片區(qū)，其實(shí)也由子模塊組合而成，而如淘寶這類(lèi)會(huì)有很多瓷片區(qū)并列的狀態(tài)，我們優(yōu)先要考慮的，是每個(gè)瓷片區(qū)在屏幕中的占比，也就是先定義好瓷片區(qū)的高度，再拆分內(nèi)容的子模塊。

例如劃分為兩行的瓷片區(qū)，總高度為 280pt，上方的模塊高度為 180pt，下方的模塊高度為 100pt，里面的元素，再根據(jù)這個(gè)內(nèi)容區(qū)域進(jìn)行排版。

完成一個(gè)完整的組件，是根據(jù)它的內(nèi)容和周?chē)沫h(huán)境決定，我們只要感覺(jué)前面幾個(gè)部分所說(shuō)的參數(shù)設(shè)置進(jìn)行分解，就可以很輕松的定義出組件的實(shí)際尺寸。而無(wú)論任何組件，它們都沒(méi)有固定的尺寸值，需要大家不斷的練習(xí)掌握制定的思路。之后再設(shè)計(jì)完整的頁(yè)面，或整套應(yīng)用時(shí)，就能大大提升效率和設(shè)計(jì)質(zhì)量。

總結(jié)

有目的和邏輯性的對(duì)參數(shù)進(jìn)行設(shè)置，是 UI 設(shè)計(jì)中最重要的一環(huán)！想要真正掌握它們，就一定要多做練習(xí)進(jìn)行鞏固。相信任何人都可以在這個(gè)過(guò)程中發(fā)現(xiàn) UI 設(shè)計(jì)的樂(lè)趣。

圖片素材作者：Timo Kuilder

以上就是我們匯總的超全面的UI元素尺寸設(shè)置指南，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

最新評(píng)論