界面布局通过什么进行区分信息

卡

利用「卡片」区分，对应「卡片式设计」

线

利用「分割线」区分，分割线分为：贯穿式、内嵌式

间距

利用「间距」区分，对应「无框设计」，即信息不用分割线，仅用间距实现信息排版

布局主要形式

  • 列表式布局
  • 卡片式布局
  • 网格式布局
  • 瀑布流布局
  • 选项卡式布局
  • 多面板布局，比如京东商品分类页
  • 手风琴布局，比如QQ联系人分组
  • 轮播图式布局，比如banner，天气
  • 标签式布局，比如soul
  • 弹窗式布局
  • 抽屉式布局

  • 图表式布局

    移动端典型布局方案

    image.png

    列表布局

    一个列表垂直呈现多个连续的元素，列表布局重在文本内容，由于图片尺寸较小（甚至有些没有图片），因此图片细节展示不丰富

  • 图片细节展示不足

  • 承载数多
  • 方便信息对比筛选
  • 趣味性和新鲜感不足

备注：有时候可考虑横向呈现列表布局

大图布局（大卡片布局）

一行只展示一张图片，图片上面和下面均可以添加文本等其他元素，图片细节展示丰富

  • 图片细节展示丰富
  • 承载数少
  • 不方便信息对比筛选
  • 趣味性和新鲜感足

备注：有时候可考虑横向呈现大图布局

两列网格布局

将屏幕一分为而，图片和文字进行上下展示或融合展示，类似一个网格，信息能够被均衡的被用户查看

  • 图片细节展示一般
  • 承载产品数较多
  • 方便信息对比
  • 趣味性和新鲜感一般

备注：有时候可考虑横向呈现网格布局

两列瀑布流布局

将屏幕一分为二，图片宽固定，高随图片的尺寸变化而变化

  • 图片细节较丰富
  • 承载数一般
  • 方便信息对比

  • 趣味性和新鲜感丰富

    两列拼图布局

    包含有大图布局、两列布局、甚至三列布局

  • 图片细节展示丰富

  • 承载数较多
  • 不方便信息对比
  • 趣味性和新鲜感较丰富

备注：有时候可考虑横向呈现拼图布局

三列网格布局

将屏幕一分为三进行展示

  • 图片细节展示不足
  • 承载数多
  • 信息对比一般
  • 趣味性和新鲜感不足

备注：有时候可考虑横向呈现网格布局

布局模式

静态布局

窗口缩小后内容被遮挡，拖动滚动条显示布局，不管在哪种设备，哪种浏览器上浏览都是一个样。移动设备上则显示太小或不全
image.png

自适应布局

分别为不同的屏幕分辨率设备设计不同的样式布局，相当于多个静态布局组成的一个系列合集，每个静态布局对应一个屏幕分辨率范围，页面通过百分比自动适配设备屏幕分辨率和可视窗口大小，当可视窗口改变时，不会出现横向滚动条、UI、图片、文字自动缩放，元素内容、布局、交互方式基本不变
image.png

响应式布局

根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整
响应式网页设计指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本
响应式界面的基本规则：

  • 可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面
  • 可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数
  • 适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化
  • 能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
  • 能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
  • 能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断
  • 放弃使用像素作为尺寸单位：用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致

image.png