【产品设计】APP常见的6种图片浏览模式

news2024/12/27 11:56:39

六种是指比较常见的图片浏览模式,是在这四种的基础上加上手势来实现另一种读图方式,这里不绝对说就这么几种,那么就谈谈个人对每种图片浏览模式说说自己在实际使用和工作中的一些理解,以及这些模式在实际设计中,哪一种比较适合你的产品。

横向铺满一列图片模式

一列图片的时候图片比较大,对图片内容的获取是比较好的。目前我们听的最多的就是卡片式设计,比如微博、QQ空间就是卡片式。不过他们是一张或者多张图,用这种方式设计,既能清晰分割内容与内容,又能承载更多的关联内容,并且可以把与用户互动的功能加上去。目前道长见过加功能多的是lofter。

设计时需要考虑这三个问题:

保证每一条内容在一屏内

有一个应用,他们的卡片式设计只有一张图片,但是这个图片高度不固定,有用户上传的照片很高的时候,在iPhone第四代手机上,有一部分图片是被截取掉的,读图的时候要上下翻,体验不是那么好,所以请保证一条内容在一屏之内;

充分考虑产品使用情景

这个地方需要考虑用户使用情景,比如如果用户使用时间集中在早上坐车和下班的时候,那道长建议换一个方式,因为图片太大,下载慢、耗流量会让用户使用的时候有一定的疑虑,做产品和做设计最重要的一条是用户想要得到什么,那我们就合理的给他们就好,而不是我们认为这样最好就硬塞给用户;

考虑内容更新速度

很明显,一列图片阅读速度会比较慢的,用户翻几屏后会失去耐心,因为人性都是懒惰的,所以如果你的产品内容更新比较快,那我建议再考虑考虑,这样的话很多内容的流量就会很低,用户消费不了,好多好内容就这样错过了。

两列图片

这里需要注意下,两列图片的对齐方式有两种,一种就是高度统一,一种是瀑布流,高度不统一,之前很多电商类的APP都是采用两列高度统一的模式,因为很整齐,并且也能有效的传递商品信息,一屏承载的内容也多,相对一列的来说,加载速度也会比较快,这种模式是相对比较合理的。

在这里插入图片描述
设计时需要考虑这两个问题:

高度统一的前置条件

高度统一的前提是图片是标准的尺寸,这样会比较好,不存在说需要对齐而去剪裁和压缩图片,所以电商比较常用,电商上传的图片都是处理设计好的,所以使用比较好,但这种模式有些呆板,就是所谓的不大气。

高度不统一的瀑布流模式

为什么高度不统一,因为图片不是标准尺寸并且不能压缩剪裁图片,比如艺术品,你必须使用,因为你不能去剪裁压缩作品,那样会损失掉艺术作品的全貌,花瓣就是这样的,还有艺术类的一些应用。

但瀑布流有个不好的地方就是,读图效率低,你可以想象这么个场景,在同一屏幕内,左边一张图片特长,超出了一屏,而右边列有三张短图片,你就可以想象这个场景了,处理办法一般是程序会去计算屏幕高度来截图,但还是相对效率低。

图片+文字模式

图片+文字的模式比较常见,它跟两列图片的模式有点类似,只是排列方式变了,谈不上好坏,不过承载信息量比较多。
在这里插入图片描述
设计时需要考虑这两个问题:

  1. 图片传递信息有限,图片表现力会打折,如果这个能够接受,那就没问题;
  2. 图片大小和内容有关,但图片宽度别超过设备屏幕宽度的二分之一;

三列图片

这种模式图片很小了,它其实是跟手机相册差不多,好处是能够在一屏内放比较多的图片,现在的情况是,出现这种情况都是在用户个人页面,并且支持三列图片跟卡片式、图片+文字模式的切换。
在这里插入图片描述
设计时需要考虑这两个问题:

  1. 界面内容相对拥挤并且能够显示的尺寸更小了,所以不能够承载文字内容在下面,对用户来讲,只是个缩略图而已,关联内容传递更少;
  2. 每多少张图片为一组,这样不会压抑,道长测试过某个APP,当我喜欢了400+商品时,三列图片全是挤在一堆的,看起来很压抑的,道长的建议是,在设计的时候,考虑3的倍数来显示,比如显示9张后,更下一组9张图片之间有分隔,这样看起来清晰并且不压抑。

四列图片

这样的方式除了手机相册,其他的APP采用这个模式是很少见的,它跟三列图片类似,不过在iPhone手机相册里面,是按照时间线来分开图片的,app设计我还是不太建议采用。
在这里插入图片描述

横向多列图片

目前除了artsy这个app,还有艺术狗app也采用这个模式来显示,无可厚非,因为线下看艺术展都是这样横着来的,产品是想去尽量模拟线下体验。除了这样的特殊使用情景外,其他的就是nice,他们是采用横向多列,不过只显示一排,每张图片的尺寸都统一,配合手势左右滑动来查看其余信息。
在这里插入图片描述
设计时需要考虑这三个问题:

  1. 横向显示的图片有限,如果太多,那么后面的图片就会没有用户流量,所以artsy在首页是这样的,并且限制显示的图片不超过10张,点进详情页面后就使用瀑布流方式。
  2. 图片太多会带来另一个技术上的问题,不能做分布加载,如果超过四五十张,整个内容加载会比较慢;
  3. 需要注意一点是,在用户认知里面,横向滑动更多是导航,纵向滑动更多是内容,所以在设计的时候设计师需要多考虑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/75814.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

智能聊天机器人––ChatGPT初体验

最近几天,由OpenAI公司发布的ChatGPT聊天机器人火了,小杨也怀着对新鲜事物的好奇,亲自体验了一下这个火爆全网,让人沉迷其中无法自拔的ChatGPT聊天机器人,经过体验,我只想用一个字来表达我的感受&#xff0…

【LeetCode每日一题】——142.环形链表 II

文章目录一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【题目提示】八【题目进阶】九【时间频度】十【代码实现】十一【提交结果】一【题目类别】 链表 二【题目难度】 中等 三【题目编号】 142.环形链表 II 四【题目描述】 …

Java百度地图全套教程(地图找房、轻骑小程序、金运物流等)

课程简介: 本课程基于百度地图技术,将企业项目中地图相关常见应用场景的落地实战,包括有地图找房、轻骑小程序、金运物流等。同时还讲了基于Netty实现高性能的web服务,来处理高并发的问题。 学完本课程能够收获:百度…

支持本地挂载的网盘文件列表工具AList

什么是 Alist? AList 是一个支持多存储的文件列表程序,使用 Gin 框架和 Solidjs 库。可以将常见的 18 种网盘整合在一起,并支持 WebDAV 客户端访问。 之前老苏写过一篇 Alist, 但此 Alist 非彼 Alist,之前的 A 应该是 …

React基础知识(React基本使用、JSX语法、React模块化与组件化)(一)

系列文章目录 文章目录系列文章目录一、React简介1.1 React的特点1.2 React高效的原因二、React基本使用2.1 引入react相关js库2.2 创建虚拟DOM的两种方法2.3 虚拟DOM和真实DOM三、JSX基本使用3.1 jsx使用四、React模块化与组件化4.1 函数式组件4.2 类式组件一、React简介 1.英…

Kafka消费者组消费进度监控

针对Kafka消费者,重要的就是监控消费进度或者是消费的滞后程度,有个专业名词 消费者 Lag 或 Consumer Lag。 滞后程度(Consumer Lag)是指消费者当前落后生产者的程度。比如Kafka 生产者向某主题成功生产了 100 万条消息&#xff0…

一个.NetCore前后端分离、模块化、插件式的通用框架

今天给大家推荐一个基于.NET 6实现的快速开发平台。采用模块化插件式开发,前后端分离,开箱即用。 项目简介 这是一个开箱即用的快速开发平台,前后端分离架构,支持插件式开发,支持工作流、可视化表单功能。系统基础功…

Qt 快速读写Excel指南

Qt Windows 下快速读写Excel指南 很多人搜如何读写excel都会看到用QAxObject来进行操作,很多人试了之后都会发现一个问题,就是慢,非常缓慢!因此很多人得出结论是QAxObject读写excel方法不可取,效率低。 后来我曾试过用…

网络攻击损失不容小觑

据研究数据显示,2022年数据泄露给企业造成的平均损失为435万美元;如果是勒索软件攻击,损失将增加到454万美元。当然这只是估计,在某些国家或地区平均损失更高,比如在美国,损失接近1000万美元。 此外&#x…

如何制作并使用动静态库

制作并使用动静态库🏞️1. 动静态库概念🌁2. 如何制作动静态库📖2.1 制作静态库📖2.2 制作动态库🌠3. 如何使用动静态库📖3.1 使用静态库📖3.2 使用动态库🍁4. 动态库的加载原理&…

Mybatis-plus实战项目演示+自定义元数据对象处理器+ws

目录 一,mybatis-plus实战一 1.导入依赖 2.application.yml配置 3.实体类 4.mapper 5.service层 6.启动类上配置 二,mybatis-plus实战二 1.导入依赖 2.application.yml配置 3.实体类 2.mapper 3.service 4.分页配置 5.放一个在controller层…

jeecg-boot中实现跳过登录验证访问其他vue页面

大家好,我是雄雄,欢迎关注微信公众号,雄雄的小课堂。 前言 大家都知道,我们正常的项目,都做了访问限制,也就是,只有当用户登录本平台后,才能让用户访问别的页面,否则默认…

【Vue】Vue中mixins的使用方法及实际项目应用详解

文章目录(1)mixin基础(2)mixin特点1.选项合并2.方法和参数在各组件中不共享(3)mixin与vuex的区别(4)mixin与公共组件的区别(5)项目实践(6&#xf…

Session | 基于Session改造oa项目的登录功能

目录 一:总结域对象 二:基于Session改造oa项目的登录功能 三:oa项目的安全退出系统 一:总结域对象 (1)request(对应的类名:HttpServletRequest) 请求域(请…

【机器学习】机器学习30个笔试题

机器学习试题 在回归模型中,下列哪一项在权衡欠拟合(under-fitting)和过拟合(over-fitting)中影响最大?(A) A. 多项式阶数 B. 更新权重 w 时,使用的是矩阵求逆还是梯度下…

几款超好用的内网穿透神器,总有一款适合你!

本文以渗透的视角,总结几种个人常用的内网穿透,内网代理工具,介绍其简单原理和使用方法。 0x01 nps-npc 1.1 简介 nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。目前支持tcp、udp流量转发,可支持任何tcp、udp上层协…

前端js长整型精度丢失处理

一、现象 在分页查询时,服务端会将返回的对象进行json序列化,转换为json格式的数据,而用户的ID是一个Long类型的数据,而且是一个长度为 19 位的长整型数据, 该数据返回给前端是没有问题的。 问题实际上, …

适用于Unity的 Google Cardboard XR Plugin快速入门

本指南向您展示如何使用 Google Cardboard XR Plugin for Unity 创建您自己的虚拟现实 (VR) 体验。 您可以使用 Cardboard SDK 将移动设备变成 VR 平台。移动设备可以显示具有立体渲染的 3D 场景,跟踪头部运动并对其做出反应,并通过检测用户何时按下查看…

MySQL篇【5】——约束

目录表的约束空属性默认值列描述zerofill主键自增长唯一键外键如何理解外键约束在数据库的实际操作中难免会有一些操作不规范的地方,比方说在一张学生成绩表中,成绩的最高值为100,那么如果在这张表中如果出现了超过100分的成绩那显然是不合理…

单片机定时器

定时器 STM32有11个定时器,2个高级定时器、4个通用定时器,2个基本定时器,1个系统嘀嗒定时器(systick),2个看门狗定时器。 定时器计算: Tout((per)psc)/Tclk t(f/pre)per…