全文链接
转载于 ui设计之路
移动应用中图文列表随处可见,看似平淡无奇,背后也有许多可挖掘的细节和原理。这篇文章希望能帮助大家在工作中运用合适的方式呈现列表内容。移动端图文列表视图大体分为两种表现形式:网格视图、列表视图。
网格视图
内容以垂直和水平的方式,展示在两列或更多列的小块中。通常以图片为主,少量附加信息,浏览效率高。
列表视图
一排只放一条内容。遵循自然的阅读模式,浏览效率较低。
细分有六种表现形式:
1.通栏图片,卡片式设计
使用场景:一般用在电商、旅游、视频等相关APP界面设计上。
优点:醒目,大气、辨识度高。
缺点:很占空间,浏览效率较低。
2.文字信息为主图片次要
使用场景:一般用在电商、资讯相关APP。适用于文字信息为主要内容的列表,图片不是很重要的信息。
左图右字
多为电商产品,露出部分内容信息,以帮助用户快速了解,找到感兴趣的内容。
左字右图
以标题为主导,一般显示标题加图片,然后少量细节信息。帮助用户快速浏览。
3.横向浏览
优点:展示内容整体性强;左右切换流畅。
缺点:不适合展示过多页面,不能跳跃查看,视觉易疲劳。
旋转木马:横向浏览图片,当前(中间)的项目较大显示。
4.两列图片
宽度固定,长度不同(淘宝,天猫搜索商品后的,商品瀑布流)
5.三列图片
常用于用户中心。(常见的QQ空间,微信朋友圈,朋友发的动态这种)
优点:浏览效率高。
缺点:较拥挤,传递信息会打折扣。
6.四列图片
较少应用(如手机相册)
六种表现形式实际应用中常会混合使用。
评论