如何創(chuàng)建精致的UI界面(五):響應(yīng)式布局篇
五篇系列目前已經(jīng)到最后一篇啦!今天我們一起看下響應(yīng)式UI,相對(duì)前面4部分,最后這個(gè)部分會(huì)略難一些,不過(guò)看完今天看這篇文章,應(yīng)該沒(méi)想象的那么難了。這篇文章以前有大致寫過(guò),今天這版本我已經(jīng)優(yōu)化補(bǔ)充了。
如今屏幕復(fù)雜,多廠商設(shè)備尺寸不統(tǒng)一,自Phone X問(wèn)世后,國(guó)內(nèi)手機(jī)廠商的各種安卓X也出來(lái)了。
各種尺寸平板等,設(shè)計(jì)適配難度上升,公司層,產(chǎn)品側(cè)要求多端體驗(yàn)一致,作為設(shè)計(jì)師的我們更加有責(zé)任去了解如何去做多端統(tǒng)一體驗(yàn),提高設(shè)計(jì)效率
為什么要學(xué)習(xí)響應(yīng)式布局
首先它能夠使界面元素在任何大小屏幕尺寸能夠靈活適配,保證功能布局和體驗(yàn)的一致性。
毫無(wú)疑問(wèn), 響應(yīng)式布局設(shè)計(jì)對(duì)于現(xiàn)今安卓和IOS端碎片化屏幕是非常重要的,它能使我們?cè)谧钚〉馁Y源的情況下完成設(shè)計(jì)適配,它的工作原理通過(guò)斷點(diǎn)系統(tǒng)來(lái)判斷讀取布局方式。
斷點(diǎn)其實(shí)就是媒體查詢值,比如我們平時(shí)做的 Phone 和 Pad 的適配,又或者其他終端適配,就是通過(guò)設(shè)定斷點(diǎn)來(lái)讓程序讀取對(duì)應(yīng)的布局(斷點(diǎn)設(shè)定可以根據(jù)屏幕分辨率或者屏幕尺寸)
響應(yīng)式布局的運(yùn)用范圍
響應(yīng)式布局不只是在Web端用得比較多,當(dāng)然他也在其他終端也運(yùn)用比較多,如電腦,pad ,手機(jī),以及車機(jī)系統(tǒng)(某些需要考慮全局一致的項(xiàng)目上);
為什么響應(yīng)式布局在今天運(yùn)用依然是很重要的,因?yàn)槟壳笆褂玫南到y(tǒng)被2大廠商分離割據(jù),微軟移動(dòng)領(lǐng)域的占比很少,暫不提,蘋果一家自成一派,安卓系統(tǒng)占比市場(chǎng)很大,包括國(guó)內(nèi)外很多廠商的定制化系統(tǒng)+自己出硬件設(shè)備,尺寸不一,這就導(dǎo)致如今碎片化屏幕。
我們作為軟件服務(wù)提供商,當(dāng)然希望一套設(shè)計(jì)能在多端使用,節(jié)省成本,同時(shí)保持一致的體驗(yàn)。因此響應(yīng)式布局就這樣一直很重要。
常用的布局模式
1. 流線布局
流線布局:指在界面中的內(nèi)容元素控件在屏幕顯示區(qū)域內(nèi)進(jìn)行相對(duì)拉伸,以達(dá)到布局完整的目的,比如上面Pad應(yīng)用橫豎屏切換
2. 等比縮放
等比縮放:定義是指在界面中元素在相對(duì)位置進(jìn)行等比縮放,從而達(dá)到解決橫豎屏顯示相對(duì)較好的UI界面,這種布局不會(huì)對(duì)界面造成布局重構(gòu)影響,開發(fā)成本低,適配簡(jiǎn)單,一般使用于音樂(lè)、視頻、電商、雜志期刊App等領(lǐng)域帶有圖片宮格布局,界面等比放大后這種大圖顯示效果比較有視覺(jué)沖擊力前提是需要足夠高清的資源支撐
youtube的截圖
3. 拓展布局
拓展布局定義:在屏幕可顯示區(qū)域類元素增加或者減少,常用于應(yīng)用商店、音樂(lè)、視頻、電商等帶有宮格布局等場(chǎng)景。
如上面youtube的截圖就是布局最好示例。
4. 分欄布局
分欄布局定義:界面布局結(jié)構(gòu)發(fā)生改變,當(dāng)然這種布局一般比較復(fù)雜,開發(fā)需要重構(gòu) UI 框架,一般在橫屏及超大屏幕上面會(huì)使用這樣的布局,比如超大寸PAD,智能電視,車機(jī)系統(tǒng)。
5. 流動(dòng)布局
流動(dòng)布局定義 : 界面元素可以根據(jù)新的屏幕比例或設(shè)備方向在組件內(nèi)進(jìn)行流動(dòng)型布局,界面元素是可以位置發(fā)生改變的,這種布局開發(fā)成本高,適配有一定難度,但是效果還是不錯(cuò)的。
6. 重復(fù)布局
重復(fù)布局定義:界面元素在橫屏下有限空間內(nèi)進(jìn)行多列重復(fù)布局,一般最多3列,這種布局可以展示更多的資源,開發(fā)成本也有點(diǎn)高,因?yàn)椴季职l(fā)生變化。
蘋果商店布局思路也是如此。
7. 固定布局
固定布局定義:界面元素在橫豎屏下面,固定使用同一種布局,做法是直接通過(guò)豎屏定義規(guī)則來(lái)適配橫屏,開發(fā)成本低,效率高
注意觀察上圖的播放器界面的元素圖標(biāo)位置的布局是否發(fā)生變化。
8. 大屏露出布局
大屏露出布局:左側(cè)由于屏幕小,所以通過(guò)漢堡菜單把導(dǎo)航內(nèi)容隱藏起來(lái),右側(cè)在橫屏上面,顯示內(nèi)容多,可以利用屏幕空間,把導(dǎo)航內(nèi)容展開顯示。
總結(jié)
如果想要適配成本低,那么布局最好不要發(fā)生結(jié)構(gòu)上大改變,比如相對(duì)布局,流線布局等等這種布局一般適配成本低,但是效果其實(shí)在某些UI布局不適用。
那么上面8大布局大家看完后應(yīng)該有所了解,如果要完全掌握理解透徹還需要跟著項(xiàng)目走上幾遍。
一般在一個(gè)終端軟件設(shè)計(jì)時(shí)候,并不是只使用單一的一種布局,而是多種布局混合起來(lái)使用,比如流線布局、分屏、等比縮放混合使用,這樣能達(dá)到布局靈活適配各種設(shè)備,當(dāng)然需要前期定義一套適配方案。
本期只是作為一個(gè)介紹階段,如想了解更多,可以找我交流或者歡迎留言。
#相關(guān)閱讀#
#專欄作家#
Tony,微信公眾號(hào):洞見設(shè)計(jì),人人都是產(chǎn)品經(jīng)理專欄作家。百度設(shè)計(jì)師。很樂(lè)意幫助年輕設(shè)計(jì)師成長(zhǎng),簡(jiǎn)歷指導(dǎo),每周分享最有價(jià)值的設(shè)計(jì)經(jīng)驗(yàn),擅長(zhǎng)產(chǎn)品體驗(yàn)設(shè)計(jì),關(guān)注【洞見設(shè)計(jì)】后臺(tái)回復(fù)“彩蛋”領(lǐng)取設(shè)計(jì)資料。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來(lái)自Unsplash,基于CC0協(xié)議
問(wèn)題來(lái)了……那設(shè)計(jì)師該如何規(guī)定“尺寸”—上下左右的位置