移动端常见图片浏览方式

作者: 金哲 | 来源:发表于2015-10-10 21:05 被阅读475次

0. 横向铺满一列图片模式:

1)图片大,图片内容获取方便,多为卡片式设计。

2)保证每条内容在一屏内。

3)考虑使用场景,如果图片太大,下载慢,耗流量都是用户的顾虑。

4)考虑更新速度,阅读速度会较慢,如果产品内容更新较快建议其他方式。

APP栗子:足记,良仓。

1. 两列图片:

1)高度统一,多为电商类APP,信息整齐可以有效的传递商品信息,一屏承载内容也多,加载速度会快。前提是图片标准尺寸。

2)瀑布流,多为更有设计感的APP,例如花瓣。但需要保证读图效率,尽量避免一张图片超过一屏的情况。

APP栗子:半糖,花瓣。

2. 图片+文字模式:

1)可展示更多文字内容,相应的图片表现力会降低。

2)图片宽度保证不超过设备屏幕宽度的一半。

APP栗子:美食天下,in。

3. 三列图片:

1)类似手机相册,一般可与卡片式,图片+文字模式切换。

2)没有空间承载文字。

3)尽量保证图片数量是3的倍数。

APP栗子:用家。

4. 四列图片:除了iphone手机相册按时间线展示图片,其他场景很少。

5. 横向多列图片:

1)横向显示图片数量有限,一般不超过10张。

2)分步加载。

3)在用户认知中,横向滑动更多是导航,纵向更多是内容。

APP栗子:artsy。

相关文章

  • 移动端常见图片浏览方式

    0. 横向铺满一列图片模式: 1)图片大,图片内容获取方便,多为卡片式设计。 2)保证每条内容在一屏内。 3)考虑...

  • 移动web开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览...

  • 无星的前端之旅(十六)——移动端调试技巧

    背景 常见的需求,开发移动端h5,在移动端浏览器或者移动端app上渲染。 前端不知道怎么在移动端调试,移动端不知道...

  • 移动端常见面试题一:移动端兼容解决方案

    文章来源:移动端常见面试题一:移动端兼容解决方案 1、安卓浏览器看背景图片,有些设备会模糊 因为手机分辨率太小,如...

  • 移动 web 开发 —— 流式布局

    1.0 移动端基础 1.1 浏览器现状 PC 端常见浏览器:360 浏览器、谷歌浏览器、火狐浏览器、QQ 浏览器、...

  • 流式布局&flex布局

    流式布局 1. 移动端基础 1.1浏览器现状 1.2手机屏幕的现状 1.3常见移动端屏幕尺寸 1.4移动端调试方法...

  • 移动web三 - 流式布局

    1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览...

  • 移动端流式布局

    1.0 移动端基础 1.1浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览...

  • 【前端】01 - 移动web开发-流式布局

    1. 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览...

  • 移动WEB开发(常见布局)

    移动端基础 1.1浏览器现状PC端常见浏览器360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览...

网友评论

    本文标题:移动端常见图片浏览方式

    本文链接:https://www.haomeiwen.com/subject/mcancttx.html