激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1:010-59833514 ?咨詢電話:400-810-1418 服務(wù)與監(jiān)督電話:400-810-1418轉(zhuǎn)接2

小白要掌握的UI界面設(shè)計(jì)中文本列表和圖像文字的布局方式

發(fā)布時(shí)間:2024-04-16 13:21:37 瀏覽量:349次

在UI界面設(shè)計(jì)的時(shí)候,尤其是手機(jī)移動(dòng)端,經(jīng)常會(huì)出現(xiàn)文本列表的布局和圖文混排的布局,非凡教育武老師給大家整理了一下常用的布局方式,方便各位同學(xué)在設(shè)計(jì)的時(shí)候參考。

一、文本列表的常見布局方式

比較常用的單行文本列表,通常左側(cè)為主文本標(biāo)題,右側(cè)放圖標(biāo)

也可以在標(biāo)題左側(cè)追加圖標(biāo),形成雙圖標(biāo)

這里要注意右側(cè)圖標(biāo)不宜過大

兩行或多行文本列表在排版的時(shí)候,一定要注意標(biāo)題、副標(biāo)題、備注的字體或顏色層次

頭像或圖標(biāo)的大小,應(yīng)當(dāng)根據(jù)實(shí)際文字的行數(shù)來調(diào)整

分段式文本列表在排列的時(shí)候,可以是統(tǒng)一左對(duì)齊

也可以右側(cè)歸右對(duì)齊,或是分三段做統(tǒng)一的間隔

二、圖像文字混排的常見布局方式


上圖下文,無邊框,文字多行排列式

注意文字標(biāo)題與備注的層次,與圖片的高度間距和左側(cè)邊距

上圖下文,無邊框,文字左右排列式

注意文字標(biāo)題與備注的層次,與圖片的高度間距和左側(cè)邊距

圖文同框,無邊框,文字多行或左右都可以

注意文字標(biāo)題與備注的層次,與圖片的高度間距和左側(cè)邊距

圖1實(shí)色塊壓在圖上,圖2為半透明色塊壓在圖上

圖文同框,有邊框,注意圖片距離邊框上方和左右的間距

文字多行或左右都可以

注意文字標(biāo)題與備注的層次,與圖片的高度間距和左側(cè)邊距

瀑布流圖文框排法,有邊框或無邊框都可以

展示時(shí),可以考慮左右圖框的高度不一致

注意文字標(biāo)題與備注的層次,與圖片的高度間距和左右邊距

圖左文右無邊框排法,注意文字標(biāo)題和備注的層次,文字距離圖片的間距

圖左文右有邊框排法,滿框圖或留邊距圖

注意文字標(biāo)題和備注的層次,文字距離圖片的間距

?以上是手機(jī)移動(dòng)端界面中常見的布局方式,足夠滿足常見APP中圖文或文本列表的設(shè)計(jì)所需,當(dāng)然舉一反三很重要,大家也可以根據(jù)實(shí)際設(shè)計(jì)情況改變布局位置,注意要遵守設(shè)計(jì)規(guī)范哦。

武老師會(huì)在空閑時(shí)間多總結(jié)一些設(shè)計(jì)經(jīng)驗(yàn)給大家分享!謝謝,記得點(diǎn)贊哦~!

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

x

同學(xué)您好!

您已成功報(bào)名0元試學(xué)活動(dòng),老師會(huì)在第一時(shí)間與您取得聯(lián)系,請(qǐng)保持電話暢通!
確定