快捷搜索:  as

页面布局结构

移动端不合于PC端,最大年夜的差别是屏幕尺寸的限定,相同的内容显示效率要低很多。假如直接按照PC端显示所有内容,页面信息自然纷乱不堪。作为交互设计师必要对信息进行优先级划分,并且合理结构,提升信息的通报效率。下面来谈谈手机界面设计中常用到的一些页面结构。

1. list 结构

优点

list列表纵向长度没有限定,高低滑动可以查看无限内容;

list列表在视觉上划一美不雅,用户吸收度很高;

list列表可以展示内容长和次级翰墨的标题。

毛病

页面跳转后老是从头开始;

一页展示内容过多,用户疲惫度增添;

页面重点内容不凸起。

场景

常用于并列元素的展示,包括目录、分类、内容等。

2. 网格结构

优点

各进口展示清晰,方便快速查找。

毛病

扩展性不如list列表;

标题不易过长。

场景

得当展示较多进口,且各模块相对自力。

3. 仪表结构

优点

展示加倍直不雅。

毛病

信息展示量少,过于单一。

场景

得当体现趋势走向的展示。

4. 卡片结构

优点

每个卡片信息承载量大年夜,转化率高;

每张卡片的操作相互自力,互不滋扰。

毛病

每个卡片页面空间的耗损大年夜,一屏可展示信息少,用户操作负荷高。

场景

得当以图片为主单一内容浏览型的展示。

5. gallery结构

优点

单页面内容整体性强,聚焦度高;

线性的浏览要领有顺畅感、偏向感。

毛病

可显示的数量有限,必要用户探索;

不具有指向性查看页面,必须按顺序查看页面。

场景

得当数量少,聚焦度高,视觉冲击力强的图片展示。

6. 瀑布流结构

优点

瀑布流图片展现具有吸引力;

瀑布流里的加载模式能得到更多的内容,轻易沉浸此中;

瀑布流错落有致的设计奇妙使用视觉层级,同时视线随意率性流动缓解视觉疲惫。

毛病

页面跳转后必要从头开始,加载量不固定,理论上是无限延展;

用户返回查找信息艰苦很大年夜。

场景

适用于实时内容频繁更新的环境。

7. 手风琴结构

优点

两级布局可承载较多信息,同时维持界面简洁;

削减界面跳转,前进操作效率高。

毛病

同时打开多个手风琴菜单,分类标题不易探求,且轻易将页面结构打乱。

场景

适用于两级布局的内容,并且二级布局可以暗藏。

8. 多面板结构

优点

削减界面跳转;

分类一清二楚。

毛病

两栏设计使界面对照拥挤;

分类很多时,左侧滑动区域过窄,且晦气于单手操作。

场景

得当分类多并且内容必要同时展示。

以上这些基础结构要领,在实际的设计中,要斟酌信息优先级和各类结构要领的契合度,采纳最相宜的结构,以前进产品的易用性和交互体验。

迎接转载,记得标明出处哦

扫描下方二维码关注Yinteraction

您可能还会对下面的文章感兴趣: