返回

从零开始学 UI

#设计知识
#知识库
55%
进度
0/14
知识点
0
笔记
概述
移动端UI设计的基本认识
移动端UI设计的基本认识
UI 界面设计所需的技能解析
UI 设计的软件介绍
移动端的基础规范认识
移动端的规范认识
屏幕和分辨率的规范
设计的单位和格式
UI 中的字体与显示
UI 文字的属性设置
基本色彩模式的认识
UI 设计中的原子理论
iOS 的基本规范认识
iOS 的控件和组件认识
标准规范下的APP 设计演示
苹果音乐主页的设计
资料库页面的设计
专辑页面的设计
播放页面的设计
界面的合并和输出
移动端的基本控件和组件设计
UI 中的尺寸定义逻辑
按钮的设计逻辑
输入框的设计逻辑
列表行的设计逻辑
图标的尺寸定义
分页器控件的设计
轮播广告组件设计
快速入口的设计
瓷片区的设计
动态卡片的设计
商品卡片的设计
模态弹窗的设计
移动端页面设计的解析
登录页面的设计
综合型主页设计
动态列表页面设计
商品列表页面设计
电商详情页面设计
影音详情页设计
用户设置页面设计
表单页面设计
UI 中的视觉风格
夜间模式的设计
UI 中的投影应用
首页知识库设计知识从零开始学 UI

列表行的设计逻辑

UX百科编辑部 编辑于 2023-12-1926人正在学
40

列表行 row 是应用在单行列表中的行元素,要理解它就要先认识列表。

列表是由多个同类元素按相同规则排列出来的组件,表现形式多种多样,可以是横向多列,也是纵向单列、纵向多列。

纵向单列的列表,就是由若干列表行组成,前面提过 iOS 组件库中就提供了大量的列表行样式,基础的列表行中内容只有一行,而复杂的则有多行。

在真实项目中,单列列表往往会使用自定义的设计以符合项目的设计风格,虽然看起来和官方的很像,但细节上有不少差异。

要完成这类对象的设计,主要问题也在高度的定义上,同样以预设和适应为主。

预设高度应用在行内容是相对一致的场景,比如只用一个设置标题,或者标题+副标题,那么高度可以用 44 作为最小值递增,最大值在 100 左右,具体根据设计的风格决定是偏紧凑还是偏宽松。

适应高度则应用在行内内容不统一,且变化会比较频繁的场景,比如一些内容相对复杂,包含很多文案解释的列表,或者除了标题外包含各类其它字段。那么高度就是根据内容+内间距得出。

适应型列表行中,要关注最小列表的高度,即内容最少的情况下的高度,建议将高度控制在不小于 44 的水平。

列表行并不仅仅应用在设置中,包括聊天、消息、历史等列表,都是使用相同的方法设计出来的,只是放置的内容字段不同。

这类对象都建议使用适应高度模式来设计,同时每个列表行之间的间距为零,留白是通过内间距来实现的,而不是根据内容设置间距。

课后作业

最后是巩固的练习,以列表行的形式将对应内容设计出来:

以下是对比原图:

点赞
收藏
学会
13764026
下一篇: 图标的尺寸定义
图标是什么无需多做介绍,这里主要讨论的,是制定图标尺寸和布局的逻辑而不是如何设计图标图形。 不管是你自己设计的图标还是引用外部的素材,在置入画布中都要设置它的具体尺寸,需要建立一定的标准,才能确保界面中图标的显示能获得满意的效果。 首先我们要知道图标尺寸指的是图标 “容器” 的尺寸而不是图形尺寸,正...
笔记 (2)
只看自己
logo
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞