火星网校
小白要掌握的UI界面设计中文本列表和图像文字的布局方式
发布时间：2024-04-16 13:21:37 浏览量：238次
在UI界面设计的时候，尤其是手机移动端，经常会出现文本列表的布局和图文混排的布局，非凡教育武老师给大家整理了一下常用的布局方式，方便各位同学在设计的时候参考。
一、文本列表的常见布局方式
比较常用的单行文本列表，通常左侧为主文本标题，右侧放图标
也可以在标题左侧追加图标，形成双图标
这里要注意右侧图标不宜过大
两行或多行文本列表在排版的时候，一定要注意标题、副标题、备注的字体或颜色层次
头像或图标的大小，应当根据实际文字的行数来调整
分段式文本列表在排列的时候，可以是统一左对齐
也可以右侧归右对齐，或是分三段做统一的间隔
二、图像文字混排的常见布局方式
上图下文，无边框，文字多行排列式
注意文字标题与备注的层次，与图片的高度间距和左侧边距
上图下文，无边框，文字左右排列式
注意文字标题与备注的层次，与图片的高度间距和左侧边距
图文同框，无边框，文字多行或左右都可以
注意文字标题与备注的层次，与图片的高度间距和左侧边距
图1实色块压在图上，图2为半透明色块压在图上
图文同框，有边框，注意图片距离边框上方和左右的间距
文字多行或左右都可以
注意文字标题与备注的层次，与图片的高度间距和左侧边距
瀑布流图文框排法，有边框或无边框都可以
展示时，可以考虑左右图框的高度不一致
注意文字标题与备注的层次，与图片的高度间距和左右边距
图左文右无边框排法，注意文字标题和备注的层次，文字距离图片的间距
图左文右有边框排法，满框图或留边距图
注意文字标题和备注的层次，文字距离图片的间距
以上是手机移动端界面中常见的布局方式，足够满足常见APP中图文或文本列表的设计所需，当然举一反三很重要，大家也可以根据实际设计情况改变布局位置，注意要遵守设计规范哦。
武老师会在空闲时间多总结一些设计经验给大家分享！谢谢，记得点赞哦~！
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
最新文章
