据说这是一个用户体验设计师必须掌握的

 

引言:计算出你手机上的内容布局是一件很棘手的事情。桌面设备会给你所有用它工作的空间。但在移动设备上,你只有有限的屏幕空间。用户在滚动屏幕浏览更多内容之前,只可以浏览内容的一部分。

你最终想知道什么是最有效率的视图,你应该用列表视图还是网格视图?你的决定可能会影响到用户怎样快速并且容易找到他们正在寻找的东西。347024615

列表视图和网格视图

列表视图在一个单行列表中显示你的内容。它的文本重并且没有图片。最多你可以在文字旁边显示一个小图标或缩略图。用户靠阅读文字来做出他们的选择。

网格视图在双行或更多行列表中显示你带有图片的内容。这张图片占有很大的空间,并且文字被缩短到防止文字环绕图片。用户靠图片做出他们的选择。

164162381

列表视图                        网格视图

列表视图预防过多滚动

许多设计师用网格视图,因为它更吸引眼球。但问题是网格视图强迫用户滚动频繁。

网格视图包括了使得页面更长的图片。它将会给用户带来更多滚动去浏览所有可用的操作。这对于他们的指头来说,这有太多的滚动。

列表视图通过让页面变得更短来防止过多的滚动。除去图片,每一屏幕被允许放上更多的选项,也允许你在同一页面用折叠页增加页面的子选项。用户发现他们通过浏览标签正在寻找东西。

598302019

用户不得不滚动更多来看到全部选项

列表视图放置草率的选择

网格视图不仅强制用户滑动更多,而且使他们做出草率的决定。人们会受到图像如此的刺激,以至于他们会选择第一个出现在他们眼前的选项。

这往往会导致他们在某个区域,而这个区域没有用户正在寻找的东西,然后用户不得不返回继续滑动。在如此多的刺激的图片下,很容易让用户受到分心和误导。

列表视图可以防止用户正在做草率的选择。文字提供了足够清晰的信息来帮助他们找到他们想要的内容。他们在阅读完所有的选项后能够做出最正确的选择。

164164006

明显的文字帮助用户做出有根据的选择

网格视图对查看细节最有用

除了审美情趣,网格视图还会在用户检查细节时帮助他们。比如,如果一个用户在购买一件T恤,他们会在脑海中有很多具体的款型。只有当用户缩小内容类别后,网格视图才是最有效的。

一个展示衣服的网格视图,带来的混乱多于帮助,因为只有少部分的图片是跟T恤相关的。用户不得不滚动去过滤掉大量他们浏览时不相干的图片。

但是一旦用户在浏览他们想买的t shirt商品时,图像则则会更影响选择。用户可以浏览T恤和更容易的发现现货的细节。

75587731

具体形象的细节更容易被突显

最后的思考

大部分用户在行走中并且在移动网站上没有更多的时间。他们需要能够尽快的找到内容。在这个过程中,你的选择是个关键。

在桌面上有很多灵活的布局,但是在移动端上,你的选择很重要。让用户操作的少看得多的视图就是赢家。

译者观点

在什么时候用列表,什么时候用网格,其实也要看产品在不同阶段的不同场景的不同诉求,例如在产品初期,一款购物网站自然想向用户展示更多的产品细节,大的图片会刺激更多的用户点击进去。这种做法是低效的,但确实存在促成交易的可能。而列表更适合于工具型的应用,它更站在用户的角度上,达成一个高效的结果。

-----

原文:http://uxmovement.com/mobile/list-vs-grid-view-when-to-use-which-on-mobile/

作者:Anthony

译者:SmallMaaa

转载自:优秀网页设计微信号

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/11076/

(0)
iouedioued
上一篇 2015-11-22
下一篇 2015-11-22

相关推荐

  • 交互体验设计师竟选择不能抛的捧花 | 真实婚礼

    新娘:@Seiya大鲍鱼婚礼场地:北京阿根廷庄园婚礼人数:120总花费:24w策划布置:6.5w策划:@华尔兹婚礼服务婚礼vendor:5.1w摄影:@ShengVision胜男摄像:@PerfectFilm视频记录化妆造型:@魏臻WeMakeup主持:@李伟MIC甜品:@乡田小墅服饰:3w出门纱:Willowby主纱:Catherine Deane新郎礼服:@殷小小爱喵咪新娘婚鞋:@RogerVivier_罗杰维维亚@Charlott...

    2018-01-30
  • iOS与安卓的交互特点

    1、物理硬件(detail返回到list) 电源、屏幕、返回、搜索 2、操作动作:(编辑删除、长按删除) android:长按-双击 ios:基本手势(滑动) 3、导航栏(detail返回到list、个人中心drawer) 跳转按钮、展示数据(…

    交互设计 2018-03-13
  • 双十一之购物车体验

    今年的双十一,你剁手了吗?不管你剁不剁,反正我是剁了。剁手的同时,不妨来看看,电商购物车的哪些设计让你剁了还想剁。本文主要讲四个电商网站的购物车,分别是淘宝、京东、唯品会和聚美优品。

    2017-06-01
  • 高手经验!Facebook的360全景VR应用设计总结

    侯雯佩:FB设计团队设计的一款Gear VR (三星VR 设备)平台的全景应用过程总结,其中包含一些很有价值的VR实战经验与设计原则。

    2017-08-23
  • Axure实例:即刻 app 产品需求文档

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放不了了之冰淇 - 分手快乐作者:T.zh来源:简书以下我的Axure原型截图:目录:1.概述1.1产品介绍1.2需求整理2.版本信息2.1修订历史2.2版本规划3.产品逻辑3.1产品信息图3.2产品结构图3.3部分业务流程图4.产品设计4.1全局说明4.2部分功能需求说明4.3部分交互设计1. 概述1.1 产品介绍1.1.1 文档属性1.1.2 产品综述1.2 需求整理1.2.1...

    2018-03-08
  • 微信的扫码和摇一摇,给老美好好上了一堂创新课 【UXRen译#150】

    作者: YUNNUO CHENG & RALUCA BUDIU @NNGroup |  翻译:张维钢、朱玲 ,校审:Junliang   摘要:与美国相比,在中国扫描二维码和摇一摇成为了有效沟通线上线下的交流方式,并且应用广泛。   图为中国“绝味鸭脖…

    交互专题 2017-08-07
  • "用户体验“真是个万恶的东西。

    前些天跟一个在央企大鳄担任要职的朋友聊天,说起某互联网新闻媒介公司被责令整改的事情,(其实我都不确定每天操劳四化建设工作的他知道不知道这件事)我本人并没有什么观点,只是看周围的人都在吐槽说国家管的太碎了,于是就想听听他怎么说。没想到君付之一笑,言道”活该,就应该封了它,它那么大的用户群体,它那么强的社会传播性,它不负责传播正能量谁负责?难道让警察叔叔们一张张发传单传播吗?你做产品做好了挣钱了就应该想想怎么对社会发展负责,不然国家和这个世...

    2018-05-05
  • 如何应对「为什么用这个颜色/字体/按钮」的问题?

    作为一名设计师,被质疑简直是家常便饭。相信你们在日常工作中,一定被人问过:“对于这个点,你为什么这样做而不是那样?为什么选这个颜色而不是那个?”之类的问题。其实,这也是面试中的必问问题。乍看起来,确实有点难回答。但每一个问题,其实都有他的思考路线图。今天笔者就来谈谈,如何通过交互的四个维度来入手,巧妙地破解这个问题。你为什么要设计一个白色的登录按钮?为什么选这个字体?

    2017-05-15
  • 美国|四大艺术院校交互设计解析,不要等毕业后才发现读了个假的专业

    今天的主题是交互设计,有同学希望了解美国开设此类专业的院校,并获取各个院校的教学内容侧重方面的信息。于是,康石石选择了美国四所具有代表性的院校为同学们进行介绍:艺术中心设计学院(ACCD)卡内基梅隆大学(CMU)纽约视觉艺术学院(SVA)普瑞特设计学院(Pratt)一、艺术中心设计学院(Art Center College of Design)交互设计:本科ACCD交互设计专业只开设本科阶段课程,学习时长8个学期。尖端的课程设置,旨在培...

    2018-05-07
  • 你的产品有没有为老年人考虑?

    原文:smashingmagazine 木为艾欧网-交互学堂翻译 如果你在科技行业工作,很容易忘记,年长的人存在。大多数技术工人真的很年轻,所以很容易看到为什么大多数技术是为年轻人设计的。 考虑到这一点:到2030年,在美国19%…

    2015-02-08