UI設(shè)計(jì)的一些規(guī)范

時(shí)間：2023-09-11 07:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-11 07:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

UI設(shè)計(jì)的一些規(guī)范：UI設(shè)計(jì)界面都是為了呈現(xiàn)信息，強(qiáng)化功能而存在

我連規(guī)范都弄不好……




開(kāi)始找iOS的設(shè)計(jì)組件

琢磨什么規(guī)范是怎樣的

狀態(tài)欄的話系統(tǒng)默認(rèn)的就不說(shuō)了




這里介紹了導(dǎo)航欄，標(biāo)簽欄，設(shè)置列表和普通列表的規(guī)范

導(dǎo)航欄

• 一般導(dǎo)航欄

狀態(tài)欄高40px

導(dǎo)航欄高88px

標(biāo)簽欄98px這個(gè)是常識(shí)……




Page title和back文字大小是34px

Page title居中




圖標(biāo)的大小

以返回為例，寬25，高42

以加號(hào)為例，寬高都是35px




我把返回旋轉(zhuǎn)45度，寬高為29.698，約等于30px

所以這個(gè)圖標(biāo)的繪制大小對(duì)我來(lái)說(shuō)還不太確定

但有書(shū)上說(shuō)導(dǎo)航的圖標(biāo)繪制是44*44大







切圖為了所有圖標(biāo)切圖統(tǒng)一尺寸切54*54




來(lái)看一下圖標(biāo)的定位







我量到的圖標(biāo)邊緣距離屏幕邊緣為20px

導(dǎo)航欄內(nèi)容高度居中在88px高度上

• 網(wǎng)址型導(dǎo)航

導(dǎo)航欄如上圖時(shí)，灰色欄高度58PX，

文字http://apple.com大小為36pt

以“刷新”的圖標(biāo)為例

高度30px，寬度25.949px

以“更多”圖標(biāo)為例

寬度是30px，高度23px

這兩個(gè)圖標(biāo)寬高的最大值是30px，

所以他們繪制范圍大小在30px的正方形內(nèi)

切圖可以切54*54










灰色欄與屏幕邊緣的距離為18PX

圖標(biāo)與灰色欄的邊緣距離為20px

• 導(dǎo)航欄為搜索框時(shí)

導(dǎo)航欄是搜索欄時(shí)，搜索欄高度是56px

字體Search為28pt大小

搜索欄與屏幕邊緣為16px







搜索圖標(biāo)寬為25.771，高為25.646

這個(gè)是不規(guī)則圖形，量了一下圖標(biāo)與搜索框上下的距離都是15px







可以推測(cè)出這個(gè)圖形是26px范圍里繪制的













搜索另一種形態(tài)




字體Search和上圖一樣為28pt，顏色8e8e93，背景搜索顏色為f2f2f8

Cancel字體大小為34pt

字體光標(biāo)寬度4，高度37

Cancel距離搜索框30px，距離屏幕邊緣36px







搜索欄與屏幕邊緣為13px，這個(gè)數(shù)有點(diǎn)不對(duì)勁啊，一般都是雙數(shù)倍的

光標(biāo)與搜索框邊緣相距20px

標(biāo)簽欄

標(biāo)簽欄高度通常為98px

這個(gè)為100px……特殊情況……

當(dāng)然也不是死規(guī)定，可以靈活運(yùn)用的

上圖文字大小為20px

顏色828282

書(shū)上說(shuō)22px也可以，很多種規(guī)范啦，開(kāi)始不用死守規(guī)定，但確定了就要一直沿用







圖標(biāo)大小繪制范圍

以圓為例子是50*50px

不規(guī)則圖形如星星，寬54px高52px

正方形繪制大小為48*48







這里不同圖形繪制的物理大小不一樣是為了視覺(jué)上的大小一致

同樣的寬高，圓形和正方形比較，正方形看起來(lái)比較大一點(diǎn)，

不規(guī)則的圖形和圓比較，圓看起來(lái)比較大

為了糾正視覺(jué)上的不一致，會(huì)使用不同物理大小來(lái)平衡

這里我簡(jiǎn)單介紹了一下

還有不懂的可以看這篇文章

“沒(méi)掌握?qǐng)D標(biāo)的繪制規(guī)范之前，別說(shuō)自己會(huì)畫(huà)圖標(biāo)了”

http://www.uisdc.com/icon-design-rules




圖標(biāo)的切圖統(tǒng)一為54*54

所以不要超過(guò)54px的正方形繪制區(qū)域




也有例外

上圖最右邊的圖標(biāo)寬度為62







這種情況比較特殊

特殊情況特殊對(duì)待……哈哈







圖標(biāo)分布：




iOS標(biāo)簽欄里不是按750寬平均分配的

那怎么確定位置呢？

我又測(cè)了圖標(biāo)與圖標(biāo)的距離







一個(gè)圖標(biāo)切圖為54px

有5個(gè)標(biāo)簽的話

那么圖標(biāo)與圖標(biāo)的距離大致為98px

這樣就搞清楚圖標(biāo)之間怎樣定位的了

先從中間圖標(biāo)開(kāi)始定位

相隔98px一個(gè)圖標(biāo)，文字居中對(duì)齊







按圖標(biāo)切圖大小54px來(lái)固定大小

來(lái)討論圖標(biāo)上下的距離，從上到下

圖標(biāo)與導(dǎo)航欄頂部距離12px

圖標(biāo)與文字距離14px

文字與導(dǎo)航欄底部距離6px













上圖圖標(biāo)的線段粗細(xì)為2pt

顏色是929292

另一個(gè)組件

像這樣的標(biāo)簽欄，高度是52px，寬度為734px那么左右距離屏幕邊緣為8px

內(nèi)容平均分布，字體大小為28pt

設(shè)置列表

在設(shè)置頁(yè)面

彩色部分icon大小為58*58，圓角為10pt

字體大小為34pt

圖標(biāo)距離屏幕邊緣為30px

箭頭距離屏幕邊緣為32px

圖標(biāo)與字體的距離為35px




分割線高度為1pt，寬632長(zhǎng)

632這個(gè)數(shù)字引起我的注意

算了一下是750-30-58-30=632




字體定位：




字體在設(shè)置欄中是偏上的




一欄高度加上分割線為90pt

列表

列表頁(yè)




發(fā)現(xiàn)文字間距都是35pt

箭頭高度與文字相同

分割線750-30=720




文字顏色最深是000000，到右邊文字顏色是828282

箭頭顏色和分割線顏色相同d2d4d8










文字顏色總結(jié)一下：

最深為黑色000000，次級(jí)828282，文字在灰色背景上做提示時(shí)8e8e93










我在這里量出大概的范圍，為了以后作圖時(shí)

心里有數(shù)，并不一定要按這個(gè)標(biāo)準(zhǔn)

想起以前作圖的時(shí)候完全沒(méi)有規(guī)范，都是按感覺(jué)來(lái)

所以才找不到工作啊，摔