UI设计技能学习文本列表和图像文字的布局方式.docx
- 文档编号:11807771
- 上传时间:2023-06-02
- 格式:DOCX
- 页数:12
- 大小:528.17KB
UI设计技能学习文本列表和图像文字的布局方式.docx
《UI设计技能学习文本列表和图像文字的布局方式.docx》由会员分享,可在线阅读,更多相关《UI设计技能学习文本列表和图像文字的布局方式.docx(12页珍藏版)》请在冰点文库上搜索。
UI设计技能学习文本列表和图像文字的布局方式
UI设计技能学习:
文本列表和图像文字的布局方式
在UI界面设计的时候,尤其是手机移动端,经常会出现文本列表的布局和图文混排的布局,来自非凡学院的武老师给大家整理了一下常用的布局方式,方便各位同学在设计的时候参考。
一、文本列表的常见布局方式
比较常用的单行文本列表,通常左侧为主文本标题,右侧放图标
也可以在标题左侧追加图标,形成双图标
这里要注意右侧图标不宜过大
两行或多行文本列表在排版的时候,一定要注意标题、副标题、备注的字体或颜色层次
头像或图标的大小,应当根据实际文字的行数来调整
分段式文本列表在排列的时候,可以是统一左对齐
也可以右侧归右对齐,或是分三段做统一的间隔
二、图像文字混排的常见布局方式
上图下文,无边框,文字多行排列式
注意文字标题与备注的层次,与图片的高度间距和左侧边距
上图下文,无边框,文字左右排列式
注意文字标题与备注的层次,与图片的高度间距和左侧边距
图文同框,无边框,文字多行或左右都可以
注意文字标题与备注的层次,与图片的高度间距和左侧边距
图1实色块压在图上,图2为半透明色块压在图上
图文同框,有边框,注意图片距离边框上方和左右的间距
文字多行或左右都可以
注意文字标题与备注的层次,与图片的高度间距和左侧边距
瀑布流图文框排法,有边框或无边框都可以
展示时,可以考虑左右图框的高度不一致
注意文字标题与备注的层次,与图片的高度间距和左右边距
图左文右无边框排法,注意文字标题和备注的层次,文字距离图片的间距
图左文右有边框排法,满框图或留边距图
注意文字标题和备注的层次,文字距离图片的间距
以上是手机移动端UI界面设计中常见的布局方式,足够满足常见APP中图文或文本列表的设计所需,当然举一反三很重要,大家也可以根据实际设计情况改变布局位置,注意要遵守设计规范哦。
想深入学习到非凡学院找武老师,武老师也会在空闲时间多总结一些设计经验给大家分享!
谢谢,记得点赞哦~!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- UI 设计 技能 学习 文本 列表 图像 文字 布局 方式