Material Design 设计语言(七)列表

  列表(List)


一、列表(Lists)

列表是以垂直排列的方式显示多行文本或图像的单一元素。


原则


1、合乎逻辑


列表应按逻辑方式排序,以便于内容易读,例如按字母顺序、数字、按时间顺序或按用户首选项。


2、可操作


列表以一种方式呈现内容,使得识别集合中的特定项目并对其进行操作变得容易。


3、一致性


列表应以一致的格式显示图标、文本和操作。    


类型


1、单行列表      


单行列表项最多包含一行文本。

                   

2、双行列表      


在双行列表中,每行最多包含两行文本。

                    

3、三行列表      


三行列表项最多包含三行文本。

        

列表控件

列表控件用来显示列表项的信息和操作。

1、复选框

复选框可以是主要操作或辅助操作。

               

2、展开和折叠

通过垂直展开和折叠列表内容,来显示和隐藏现有列表项的详细信息。

               

3、开关和排序

       


二、图像列表(Image Lists)

图像列表在有组织的网格中显示图像集合。

 

图像列表表示重复模式中的项目集合。它们有助于提高对所持内容的视觉理解。


原则


1、视觉


图像列表允许用户根据图像扫描内容。


2、可比较


图像列表允许用户轻松比较其中的项目。


3、集合


图像列表与周围的内容和布局进行了响应性集成。


类型

             

1、标准图像列表(Standard image list)

标准图像列表最适合同等重要的项目。它们具有统一的容器尺寸、比例。

 

标准图像列表可以带或不带文本标签显示。

              

2、插缝图像列表(Quilted image list)


插缝图像列表强调集合中的某些项目。他们使用不同的容器大小和比率来创建图像层次结构。

 

 

插缝图像列表不应在图像容器下方显示文本,因为它会破坏布局。

3、编织图像列表(Woven image list)

编织图像列表使用交替的容器比率来创建有节奏布局。编织图像列表最适合浏览对等内容。

             

4、砌体图像列表(Masonry image list)


砌体图像列表使用动态大小的容器高度来反映每个图像的纵横比。此图像列表最适合用于浏览未裁剪的对等内容。(即常听到的瀑布流形式)

      

– 推 荐 阅 读 

Material Design 设计语言(六)菜单

Material Design 设计语言(五)卡片和纸片

Material Design 设计语言(四)按钮

Material Design 设计语言(三)提示


本文来自:宛苏    作者:宛苏

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码