雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

移動(dòng)端ui設(shè)計(jì)規(guī)范大全,讓你的設(shè)計(jì)細(xì)節(jié)更完美

Time: 2020-02-28

俗話說沒有規(guī)矩不成方圓,這句話用在UI設(shè)計(jì)上也是一樣的,所以做UI設(shè)計(jì)的時(shí)候除了要有創(chuàng)意之外,還要注意規(guī)范,下面我們跟隨小編一起來了解一下移動(dòng)端ui設(shè)計(jì)規(guī)范的相關(guān)資料吧。

移動(dòng)端ui設(shè)計(jì)規(guī)范

一、界面設(shè)計(jì)尺寸及欄高度

目前主流的 iOS 設(shè)備無論是欄高度還是應(yīng)用圖標(biāo),設(shè)計(jì)師提供給開發(fā)人員的切片大小,前者始終是后者的1.5倍,并分別以@3x和@2x在文件名結(jié)尾命名,程序再根據(jù)不同分辨率自動(dòng)加載@3x或者@2x的切片。

二、邊距和間距

app頁面設(shè)計(jì)中,頁面中元素的邊距和間距的設(shè)計(jì)規(guī)范是非常重要的,一個(gè)頁面是否美觀、簡(jiǎn)潔、是否通透和邊距間距的設(shè)計(jì)規(guī)范緊密相連,所以說我們有必要對(duì)它們進(jìn)行了解。

1. 全局邊距

全局邊距是指頁面內(nèi)容到屏幕邊緣的距離,整個(gè)應(yīng)用的界面都應(yīng)該以此來進(jìn)行規(guī)范,以達(dá)到頁面整體視覺效果的統(tǒng)一。全局邊距的設(shè)置可以更好的引導(dǎo)用戶豎向向下閱讀。在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距,讓邊距成為界面的一種設(shè)計(jì)語言,常用的全局邊距有32px、30px、24px、20px等等,當(dāng)然除了這些還有更大或者更小的邊距,但上面說到的這些是最常用的,而且有一個(gè)特點(diǎn)就是數(shù)值全是偶數(shù)。

通常左右邊距最小為20px,這樣的距離可以展示更多的內(nèi)容,不建議比20還小,否則就會(huì)使界面內(nèi)容過于擁擠,給用戶的瀏覽帶來視覺負(fù)擔(dān)。30px是非常舒服的距離,是絕大多數(shù)應(yīng)用的首選邊距。還有一種是不留邊距,通常被應(yīng)用在卡片式布局中圖片通欄顯示。這種圖片通欄顯示的設(shè)置方式,更容易讓用戶將注意力集中到每個(gè)圖文的內(nèi)容本身,其視覺流在向下瀏覽時(shí)因?yàn)闆]有留白的引導(dǎo)被圖片直接割裂,造成在圖片上停留更長(zhǎng)時(shí)間。


移動(dòng)端ui設(shè)計(jì)規(guī)范_374853849.png

 (圖片來自網(wǎng)絡(luò))

2. 卡片間距

app頁面設(shè)計(jì)中卡片式布局是非常常見的布局方式,至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來界定,通常最小不低于16px,過小的間距會(huì)造成用戶的緊張情緒,使用最多的間距是20px、24px、30px、40px,當(dāng)然間距也不宜過大,過大的間距會(huì)使界面變得松散,間距的顏色設(shè)置可以與分割線一致,也可以更淺一些。

3. 內(nèi)容間距

除了各種欄(狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄)和控件 icon 就是內(nèi)容了,內(nèi)容的布局形式多種多樣,這里不去探討內(nèi)容具體應(yīng)該如何去布局,我們來說一說內(nèi)容的間距設(shè)置問題。格式塔鄰近性原則認(rèn)為:?jiǎn)蝹€(gè)元素之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起,互相靠近的元素看起來屬于一組,而那些距離較遠(yuǎn)的則自動(dòng)劃分組外,距離近的關(guān)系緊密。在 UI設(shè)計(jì)中內(nèi)容布局時(shí),一定要重視鄰近性原則的運(yùn)用,如果應(yīng)用名稱與上下圖標(biāo)距離相同,就分不出它是屬于上面還是下面,從而讓用戶產(chǎn)生錯(cuò)亂的感覺。

三、界面圖片設(shè)計(jì)比例

UI設(shè)計(jì)中,對(duì)于圖片的尺寸和比例沒有嚴(yán)格的規(guī)范,設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺設(shè)置一個(gè)看起來不錯(cuò)的尺寸,但事實(shí)上我們是有章可循的。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸,可以獲得最優(yōu)的方案,常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618(黃金比例)等。

這些比例不無根據(jù),它們都和圖片尺寸有關(guān)。16:9 是根據(jù)人體工程學(xué)的研究,發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個(gè)長(zhǎng)寬比例為16:9的長(zhǎng)方形,4:3 是勾三股四弦五,在攝影中非常常見。

 

移動(dòng)端ui設(shè)計(jì)規(guī)范_3748531527.png 

(圖片來自網(wǎng)絡(luò))

四、建立統(tǒng)一風(fēng)格的圖標(biāo)

在應(yīng)用界面設(shè)計(jì)中,功能圖標(biāo)不是單獨(dú)的個(gè)體,通常是由許多不同的圖標(biāo)構(gòu)成整個(gè)系列,它們貫穿于整個(gè)產(chǎn)品應(yīng)用的所有頁面并向用戶傳遞信息。

五、切圖規(guī)范

當(dāng)界面設(shè)計(jì)定稿之后,設(shè)計(jì)師需要對(duì)圖標(biāo)進(jìn)行切片提供給開發(fā)工程師,通常我們只需要對(duì) icon 進(jìn)行切圖即可,文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的,例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可,開發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。

六、設(shè)計(jì)稿標(biāo)注

當(dāng)界面設(shè)計(jì)定稿之后,設(shè)計(jì)師需要對(duì)界面進(jìn)行標(biāo)注給開發(fā)工程師在還原界面時(shí)進(jìn)行參考。借助一些專業(yè)的標(biāo)注工具有利于我們提高工作效率,常用的標(biāo)注工具有 Mark Man 或 PX Cook。

在一份設(shè)計(jì)稿中需要標(biāo)注的內(nèi)容是文字的字號(hào)大小、粗細(xì)、顏色、不透明度;界面的背景顏色、不透明度;各個(gè)圖標(biāo)、列表、文字之間的間距。

相信有了小編為你整理的這一份超級(jí)詳細(xì)的移動(dòng)端ui設(shè)計(jì)規(guī)范大全之后,一定可以幫助你在做移動(dòng)端的UI設(shè)計(jì)界面時(shí)更規(guī)范話的處理細(xì)節(jié)哦!


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開