(作者):響應(yīng)式 UI能夠使我們?cè)O(shè)計(jì)的元素在任何大小屏幕尺寸能夠靈活適配,保證布局和體驗(yàn)的一致性。
毫無(wú)疑問(wèn),響應(yīng) UI 設(shè)計(jì)對(duì)于現(xiàn)今碎片化的屏幕是非常重要的,它能使我們?cè)谧钚〉馁Y源的情況下完成設(shè)計(jì)適配,它的工作原理通過(guò)斷點(diǎn)系統(tǒng)來(lái)判斷讀取布局方式,斷點(diǎn)其實(shí)就是媒體查詢(xún)值。
比如我們平時(shí)做的 Phone 和 Pad 的適配就是通過(guò)設(shè)定斷點(diǎn)來(lái)讓程序讀取對(duì)應(yīng)的布局(斷點(diǎn)設(shè)定可以根據(jù)屏幕分辨率或者屏幕尺寸),今天就和大家聊聊一些常用的響應(yīng)式 UI 模式
常用的布局模式
流線(xiàn)布局
等比縮放
拓展布局
分欄布局
流動(dòng)布局
重復(fù)布局
固定布局
流線(xiàn)布局
流線(xiàn)布局 指在界面中的內(nèi)容元素控件在屏幕顯示區(qū)域內(nèi)進(jìn)行相對(duì)拉伸,以達(dá)到布局完整的目的,比如 Pad&Phone 橫豎屏切換。
下面截圖的 3 個(gè)產(chǎn)品都是屬于流線(xiàn)布局,這種布局一般開(kāi)發(fā)比較簡(jiǎn)單,成本低,下面青芒閱讀的布局相對(duì)不錯(cuò),在 PAD 豎屏左右邊距留白是單獨(dú)設(shè)定規(guī)則的,橫屏情況下面左右各空出 2 個(gè)網(wǎng)格(界面分為 12 網(wǎng)格),這樣橫屏內(nèi)容顯示不會(huì)過(guò)長(zhǎng)。
等比縮放
定義是指在界面中元素在相對(duì)位置進(jìn)行等比縮放,從而達(dá)到解決橫豎屏顯示相對(duì)較好的UI界面,這種布局不會(huì)對(duì)界面造成布局重構(gòu)影響,開(kāi)發(fā)成本低,適配簡(jiǎn)單,一般使用于音樂(lè)、視頻、電商、雜志期刊App等領(lǐng)域帶有圖片宮格布局,界面等比放大后這種大圖顯示效果比較有視覺(jué)沖擊力前提是需要足夠高清的資源支撐。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)