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

 

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

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

相关推荐

  • 如何才能读懂甲方给出的设计需求?

    转到交互岗已经有一阵子了。原来在做产品的几个月里没少和技术、设计进行沟通,每当自己把意思想法传达下去的时候,反馈回来的结果基本都要进行进一 步的修改,这种返工和修改在产品快速迭代的过程中很浪费时间。当时自己没有觉得表达有问题,已经把需求的目的结果都表达清楚了。可能是自己没写过代码、没 做过设计所以在一些专业的术语的表达上,方案实现方式的选择上存在偏差,导致技术、设计没有完全按照自己设想的预期做出结果。

    2017-05-24
  • [自译]强大的省略号-为什么三个小点表达如此丰富

    原文链接:The Mighty Ellipsis - How 3 little dots can say so much 原文作者:John Saito 每当我告诉人们省略号(...)是最让人惊奇的字符时,大多数人都像看疯子一样看我。在你给我打上这个标签之前,让我试着…

    2016-10-09
  • 经典必备知识!什么是交互设计的三大法则?

    @十萬個為什麽 :本文提到的三大铁律在交互设计中的地位接近圣经。细细品读,你会发现现代最流行的用户界面,都采用了这本里程碑式的著作中的概念与技巧,其中也包括微软和苹果的设备 >>>科幻作家艾萨克·…

    2017-08-01
  • 猎豹资深交互设计师分享:如何利用数据来支撑设计?

    作者:可风 我最早的时候认为设计就是如何去做出各种新奇的图形、质感和界面,追逐潮流和创意。可是后来发现设计最难的是平衡各方面的因素,在条条框框的限制中找到方案还要推进下去,并被人看到价值。前者很容易满…

    2015-11-15
  • 交叉学科-交互设计春季周末班课程计划

    开课时间:本周末4.14日开课,可预约免费试听。请单独联系教务老师。联系方式:教务老师微信二维码上课地址:北京海淀区北四  环保福寺桥南  恒兴大厦10层E室

    2018-04-11
  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • UI 设计师如何让设计稿100%还原(上)

    大部分新手设计师可能都会遇到一个问题,设计效果很赞,为何还原效果那么差?是开发不行?然后就吐槽开发傻X,可很少有人想过是否是自自身的原因,在开发过程中就不断和开发撕逼。今天我介绍一些关键点,通过这套系统的方法来解决你的视觉还原度,希望这篇文章能帮助到你。

    2017-04-28
  • 交互设计前期分析(一)

    在以前还是交互设计师新手时,总会遇到这种情况,给出了一份方案,被产品经理驳回:“虽然能用,但是不够好,要不要参考其他竞品再想想。”接着再东看看西看看,接着给出第二版方案,仍然被说缺了点什么,于是一版接一版地改,最后勉强定了一个差不多的方案。为什么会导致这样的情况呢?今天我们来说第一个存在的原因。如果做交互设计,没有理解产品的业务需求,那么做出来的设计就算是美观、漂亮,也不能成为好的设计,因为没有实现业务诉求。而且,对业务诉求的分析,会影...

    2018-04-17
  • 购物商城微信公众号交互设计

    设计背景 由于微信公众号轻应用的设计需要在微信的结构框架中进行,信息架构和导航布局需要基于微信的开发接口和架构来做,项目开始时微信针对公众号的导航框架刚好有做出调整,在进入公众号里面的页面后可以逐级返…

    2015-11-06
  • 日照这家单位招人啦!提成、五险一金、带薪培训、年终奖、节日福利···

    关于我们与其说我们是一个团队,我倒觉得我们更像一个温暖的大家庭。工作上我们团结协作、互相体恤,生活上我们互相帮助、彼此鼓励,家人遇到困扰,我们会拧成一股绳共度难关,家人有喜事有收获,我们会由衷的祝贺!我们每一个人都在用真心去经营我们的置业网大家庭,所以我们无比珍惜和感恩,也希望你和我们一样将它视如珍宝……公司简介日照置业网传媒有限公司主要经营各类广告的发布代理及各项活动策划,各类网站制作管理维护与设计,目前经营包含日照置业网等6家网站,...

    2018-04-08