大家在使用各种APP和软件等互联网产品时，“等待”过程会频繁的出现在使用过程中。比如：点开某篇文章，需要等待页面将文章内容加载出来；上传图片和文件时，也需要等待一些时间才能上传成功；打开游戏，经常也会要等更新之后才能进入……

在现有技术条件下，等待是人们和这些互联网产品交互过程中不可避免的，尤其是在网络不好的条件下。若等待过程的体验设计得不好，那么大概率会被吐槽——因为等待会打断用户完成任务的流程，影响任务完成的效率；同时使用户处于无聊、焦急且浪费时间的状态中。

那么在现有技术没有质的提升前提下，我们该如何利用设计的手段对等待体验进行优化，以达到“缩短”交互等待“时间”、“减少”用户等待过程中的负面体验呢？接下来，就具体地和大家聊一聊我的一些看法：

1、如何看待交互等待状态

交互等待状态对于人们来说早就已经司空见惯了，但我们不能认为所有的等待都是理所当然的现象，也不能认为所有的等待都是浪费时间。对于没有经过设计、技术落后或者设备性能差造成的频繁的、过长的等待，我们要优化和改进。

研究表明：绝大部分人对等待的忍耐度是有限的。一般来说，2s以内的反馈，用户的心情是愉悦的；8s以外的反馈，用户的心情往往是焦躁甚至是愤怒的。

下图为等待时间与用户体验情绪关系图：

 

此图来源于“叶鲁设计思考”公众号

但是对于某些场景下的等待，等待时间却不是越短越好，此时需要针对用户的心理仔细分析，找到最佳等待时间的临界点，从而获得最佳等待体验。比较好的案例是——百度人工智能设计研究院有关“智能音箱的等待体验研究”案例，研究中提到：智能音响的响应速度不是越快越好，因为过快的响应会给用户带来轻浮感和抢话感；而一个过慢的响应会给用户带来迟缓感和愚钝感。详细的研究过程及等待时间参数结论，感兴趣的同学可以点击原文标题进行阅读。

 

2、影响交互等待体验的因素有哪些

一般来说，影响交互等待体验的因素可以分为客观因素和主观因素：

· 客观因素包括设备性能（如CPU好坏、内存大小等）、网络环境（网络的快慢）、软件性能（代码质量）等；

· 主观因素主要是用户的心理状态感知，例如：无所事事的等待比有事可干的等待感觉要长；心情烦躁时的等待感觉比实际等待时间要长；不确定的等待感觉等待时间更长；没有解释说明的等待感觉时间更长等等。

3、提升交互等待体验的途径有哪些

以下途径是在客观因素没有明显的变化下，通过设计以及心理学的知识对用户心理等待时间进行干预，减轻用户等待的负面情绪，以此来提升交互等待的体验。

（1） 提供明确清晰的状态认知

提供明确清晰的状态认知，主要是要告知用户现在处于什么状态、后续可能出现的等待状态变化以及预期结果。这样用户会有一个明确的状态认知，能够适当缓解等待过程中的焦躁心情，从而提升等待的体验。例如：百度网盘下载文件，会清晰的告知用户当前已完成多少，下载速度是多少，剩余多长时间能下载完成；

 

再如：微信的零钱提现成功界面会给用户一个预估到账时间；metro大都会APP扫码进站后，会告知用户最近一班地铁还需多长时间才能到达。这些方式都消除了用户在等待过程中的“无知感”，有效的缓解了等待过程中的焦急情绪，从而提升了等待过程的体验。

（2）增加用户在等待过程的掌控感

在交互等待过程中，如果用户可以根据自己的需求主动掌控相应的等待过程，从而顺利地完成操作任务的话，等待体验会更好。

例如：有些产品在等待的过程中采用的是模态的交互形式，用户只能一个任务一个任务的去完成，这样显然增加了等待的负面情绪。针对这种情况，建议将使用非模态的交互形式，让用户可以同时操作多个任务或者取消任务，这样会弱化用户等待的心里感知，达到“缩减”等待时间。

 

（3）不同的等待场景选用合适的交互形式

根据用户不同的使用场景，我们可以选择合适的交互等待形式来优化等待体验。例如：以微信、钉钉为代表的即时通讯工具，他们的消息列表中的内容都是采用顶部栏的加载方式，这样做的好处是消息内容的加载不会打扰到用户的操作，弱化了用户对加载等待的状态心理感知；

再如：微信发图片到朋友圈的时候，不管用户当前网络状态好坏，它基本能做到图片上传发送和朋友圈展示图片是同步的，原因就是微信采用了“异步化上传”的方式。我们可以简单地理解为：前端朋友圈的图片展示是前置的“视觉假象”，此时微信后台可能还在努力的上传照片，过几秒后才算真正的上传成功，这种处理方式基本上消除了用户的等待时间，大大的提升了用户的体验。

还有一种能从心理上缩短用户等待时间的小技巧就是“一般采用变速加载而不要采用匀速加载过程”。有研究表明：同样的加载时间，人们从心理上会觉得变速加载（不管是先快后慢，还是先慢后快）所用的时间比匀速加载所用的时间要短。在设计中常用的案例就是：打开H5页面时标题栏下方的进度条跑动速度的快慢了。

（4）给用户适当的补偿与奖励

心理学研究表明：对于价值高的等待，用户能接受的等待时间更长。例如：饿了么点餐之后，平台会预估外卖送达时间；同时，会在界面中提示：若超过多长时间未送达，则会给用户多少钱的红包作为补偿。这样用户稍微多等一些时间（每个用户的容忍度不同，视情况而定），拿个红包，也还是原意等的。

（5）分散用户注意力，转移等待

分散用户注意力的方式一般可以从以下两个方面来做：增加等待过程中的情感化设计（如趣味的图形和动效）和提供对用户有用的建议或攻略。例如：京东APP下拉加载的动效就是一个快递箱飞到快递小哥手中后，快递小哥拿着箱子快速奔跑的动画效果，非常生动形象，这样用户大部分精力都聚焦于这个有趣的动画上，而对页面加载的事情就没有那么关注了。

另外，王者荣耀匹配好玩家等待进入游戏的过程中，腾讯会在界面中给出一些游戏攻略，吸引用户的注意力，达到缩减用户等待感。

 

（6）提供交互等待的可行替代方案

在我们使用QQ邮箱的时候会出现一种情况——那就是当网络较差的时候，登录超过一定时间还没有成功的话，系统会建议用户切换更快速的QQ邮箱基本版，保证用户邮件核心的收发功能的正常使用。这样很讨巧地避免了用户需要长时间等待才能使用邮箱的情况。

 

4、总结

交互等待是人机交互过程中不可避免的，本文主要浅述的是：在客观因素没有明显的变化下，通过设计以及心理学的手段，如提供清晰明确的状态认知、增加等待过程中的掌控感、不同的等待场景选用合适的交互形式、给用户适当的补偿和奖励、分散用户注意力转移等待、提供交互等待的可行替代方案等，对用户心理等待时间进行干预，减轻用户等待的负面情绪，以此来提升交互等待的体验。

作者：潘达，个人公众号：潘达设计小站（若侵，必删）

1、单张切换样式

单张切换样式一般分为全部撑满、屏宽撑满和未撑满3种样式。

其中熊猫金库采用的是全部撑满的样式，淘宝采用的是屏宽撑满的弧形样式，转转采用的是未撑满的样式。总的来说，单张切换样式主要用于首页Banner的展示。

（1）全部撑满类样式

全部撑满类样式在越来越多的App中被弃用，主要原因是此样式对运营图的要求比较高，需要做到风格和颜色尽量一致，才不会影响App整个的风格展示效果。

当然这里以熊猫金库举例是因为它并没有采用相同颜色切换，而是都采用了左侧文字，右侧吉祥物的设计，而且采用的不同颜色饱和度明度也趋向一致，所以这样对APP的视觉呈现效果并没有起到反效果，反而有加分。

 

（2）屏宽撑满样式

然而屏宽撑满样式并不受此局限，是因为顶部采用了品牌主色调压轴，不管Banner风格样式和色彩怎样多变，都不会对视觉呈现有多大影响。

所以全部撑满类样式如果不能确保Banner的一致性，还是要慎用。屏宽撑满的样式适合有主色调压轴的情况下使用，适用于风格多样的购物类平台。

（3）未撑满样式

转转的未撑满的样式较为特殊，我们会在下文特殊背景样式类别里解析。

2、多张切换样式

多张切换样式分为：走马灯式轮播／右侧滑动类样式／堆叠类样式

（1）走马灯式轮播

我们首先来了解下什么是走马灯，上图为中国古代的走马灯。因多在灯各个面上绘制古代武将骑马的图画的连贯动态造型，而灯转动时看起来好像几个人你追我赶一样，故名走马灯。

那么App里常见的轮播Banner样式，可以追溯为走马灯式轮播，只不过由于这里是为功能信息服务的，所以我们这里无需展示图像的动态连贯信息。

那么我们先来看几个实例：

上图的乐刻App首页采用的为大小一致平行轮播、第二个为景深类轮播、第三个为景深类异形轮播、最后一个为一致类弧形轮播。一般拓展应用的话会采用文字等特殊排版来进行一致性统一。

关于文字等特殊排版我们在下文会进行举例，且往下看。

 

大小一致平行类轮播：其中大小一致平行类轮播多用于Ios11或者主色调较为弱化的App风格中。一般图片的高度较窄，因为据不完全统计，越来越多的App运营活动效果并不是太好，所以图片的高度也相对调低了。

景深类轮播：景深类轮播一般在觉得页面想要丰富层次感的时候采用。

 

弧形轮播样式：弧形轮播较为特殊，实际上比较常见的是安卓手机系统屏幕上可自定义的弧形轮播交互形式，这种形式因为是弧形的，容易给用户造成眩晕感，所以需要根据具体场景谨慎使用。

（2）右侧滑动类样式

右侧滑动类样式分为：信息展示类侧滑、侧滑景深类。

【1】信息展示类侧滑

信息展示类侧滑分为常规图文类、图片嵌套卡片式信息的形式和视频展示类。例如：淘宝的海淘笔记页面为图片嵌套卡片式信息的形式，淘宝的生活研究所为视频展示类侧滑，也就是滑动到哪个哪个Banner可以自动播放视频。一般信息展示类侧滑多用于产品的二级页面。

 

【2】侧滑景深类样式

侧滑景深类这里的实例使用在了首页，但此类样式较为特殊，通常还是二级页面使用的较多，因为首页侧面的使用对页面的一致性有一定的破坏。

（3）堆叠类样式

堆叠类样式一般分为：纵向层叠样式、横向层叠样式。

【1】纵向层叠样式

纵向层叠样式一般适用于首页，且与产品背景图相结合的形式出现，例如：上图左一，每个Card显示不同的航班信息。

 

【2】横向层叠样式

横向层叠样式一般适用于页面里的中间位置，区别与其它常见的Banner样式，主要用于图片展示较多的场景内使用，丰富页面形式的多样化。

3、功能类样式

功能类样式一般分点击展开播放类、信息归纳切换类、功能附加类。

（1）点击展开播放类

点击展开播放类通常适用于视频、音频等App，比如：虾米的Ai电台页面，点击较窄的一块色块Banner即展开播放相应的播放类别。

 

（2）信息归纳切换类

信息归纳切换类以上2个淘宝案例都属于这个类别，只是中间那个把信息归纳为不同促销价格分类，右边把信息归纳为不同时间点进行切换，这种类别通常适用于电商商品促销类页面。

 

（3）功能附加类

功能附加类通常在当前Banner需要附加什么功能的时候采用，比如：需要添加收藏、添加购物车等功能，通常也是商品展示类页面使用较多。

4、特殊排版一致类布局

特殊排版一致类布局一般分图文错开类样式、图文关联类、文本一致类。

（1）图文错开类

图文错开类样式一般适用于想要有个性化页面展示的App，相对于其它中规中矩的App有更多的创意类元素可供发挥，例如：上图图一的卖比较个性类别的服装。

（2）图文关联类

图文关联类一般适用于每个Banner都有一致性的文案和标签信息展示的时候使用，例如：电商类的Enjoy。

 

（3）文本一致类

文本一致类多用于采用不同的图片作为背景，且图片上都有蒙层作为遮罩，每个不同的banner上的文字大小，排版都相同。例如：上图的京东股票和最后一张Enjoy的页面，这里的Enjoy的文本都添加了主色调作为文字底衬，更加强调了文字的一致性。

4、特殊背景处理

特殊背景处理一般分为：异形背景形状类样式、图片元素背景切换类样式、图片背景模糊处理类样式、

（1）异形状背景形状类样式

异形状背景形状类样式一般也适用于想要个性化展示，区别与同类App的展示形式，通常采用品牌色为主。

 

（2）图片元素背景切换类样式

图片色彩元素背景切换类样式一般提取了当前展示banner的图片元素做为背景展示，可以丰富当前活动在页面中的氛围，一般电商类App使用较多。

（3） 图片背景模糊处理类样式

通常采用固定的图片背景并进行了高斯模糊的处理方式，再叠加一层蒙层进行展示，一般背景可以随图片切换也可不切换，例如：淘宝的生活研究所采用的是不切换的图片模糊类型。

5、复合拓展类

复合拓展类一般分为：纵向层叠列表样式、沉浸式Banner+功能类样式、Banner视频与图片叠加类样式

（1）纵向层叠列表样式

纵向层叠列表样式是属于比较特殊的展示类别，此处最美有物App的定位为精品高端类原创商品，所以这里采用了卡片式纵向层叠的样式进行展示，用户不光能看到当前产品的信息还能看到其它产品的文字信息，一般用于特殊品质类产品展示。

 

（2）沉浸式Banner+功能类样式

淘宝的聚名品背景采用了较为商务男性化的背景风格展示，给用户传递的感觉较为硬朗、品质，非常符合男性优品的特质。顶层左侧放置了一个男士模特，右侧放置了三个卡片。其中最上面的一排卡片可以侧滑，下面是对应的优惠信息。

这种复合类型常用于电商，需要推荐的商品需要沉浸式展示的情况。

（3）Banner视频与图片叠加类样式

这里淘宝的生活家页面背景采用的是视频展示，顶层采用了多个图片进行展示，并配合了相应的文案。并且引入了期刊杂志的概念，进行专题展示。主要用于期刊类专题页面展示。

6、总结

以上介绍了6种不同Banner的展示类型，分为单张切换样式、多张切换样式、功能类样式、特殊排版一致类布局样式、特殊背景处理类样式、复合拓展类样式。

希望在我们设计banner样式的时候能够选择更为合适的样式，以适用当前的场景

作者：角马X，口袋理财UED设计经理。公众号：海盐社（若侵，必删）

1、为什么要学习它

视觉层次能给产品带来良好的视觉享受，用户能够很清晰的知道内容的关键点和需要注意的地方。作为设计师，我们每天都面对各种需求设计，而且有时候经常因为层次不清晰或者没有美感，经常被同事或者领导Diss~

那么有没有更好的办法且能够长期支持我们这样的工作呢？

除了我们工作经验或者凭感觉来做，那么其实它是有规律可循的，建立视觉层次结构，我们可以先把最基础的做好，然后通过这些基础的要素来构成整个视觉层次结构，这些基础要素影响排版的有如下4大点： 大小、字重、颜色、布局等，这四大点构成任何视觉层级结构的基础，因此我们只要熟悉掌握他们的运行方式规律，那么做设计就没那么难了。

2、为什么它如此重要？

 

图片来自网络

上面两封简历，大家第一眼看，短时间内，谁吸引了你? 谁最引起的你注意? 很明细肯定是图1，为什么？

因为一个公司的HR，每天会面对很多简历，那么他们一般只关注重要信息，如果你的简历上，在几秒钟之内看不到啥重点信息，你的简历很可能会石沉大海，大家可以看下右边的视觉层次明显没有左边强，其实他们内容是几乎一样，只是视觉层次结构发生了变化。

上面只是一个简单的例子，在我们日常设计中，特别是刚做设计不久的小伙伴，很容易犯这样的错误，设计上毫无层次结构，其实好的视觉就像一首动听的曲子，他是有节奏感在里面的，正式因为有了节奏和韵律，歌曲那么才如此好听。

设计呢？

也是同样的道理，我们也需要通过层次来构建节奏感和韵律感，从而达到一种愉悦感受。

3、有哪些方法可以轻松构建层次

其实我们可以通过视觉语言的基本元素来构建视觉层次，大小、字重、颜色、布局，这也是最基础的，包括任何复杂的设计都基本包含这些要素，所以我们可以先掌握他们的运用技巧，然后灵活巧妙的运用到整体设计中去，下面我会将和大家一起探讨下。

（1） 大小

通过大小属性，我们可以对一些重要的操作内容进行放大显示，因为人们首先阅读更大的东西，且这种趋势实际上足以超越自上而下的规则。

 

左边facebook 把发布信息内容，做成卡片按钮，放在用户视角顺序的第一个位置（从左往右的阅读习惯），这个功能对用户来说十分重要，预示着是否可以随时能发布内容，也是facebook比较核心的一个功能，第二张截图 Medium  它把卡片单独做大 放在首页顶部位置，目的也是为了强调重点推荐内容，同时它们之间层次关系就显示出来了。

 

通过放大和加粗英文字母，来凸显层次关系，同事视觉上提升不少可观感。

 

上面三个例子通过放大主体内容或者标题来突出视觉层次关系，突出主要内容。

（2）字重

顾名思义，我们可以使用粗细来创建视觉层次结构，这样信息结构更加清晰。

 

上面两张卡片，下面的比上面的层次更明显。有时候仅仅用颜色深浅来区分层级是不够的，我们需要集合字重来区分主次关系。

 

 

 

上面几个案例中有网页、杂志、包装等等，他们在设计时候都运用到了加粗加大字体形成强烈的视觉层次。

（3） 颜色

当我们谈论颜色时候，就需要考虑的因素很多了，每种色彩对应的认知是不一样的，比如：UI界面设计中，蓝色文字代表可点击，红色代表是出错等向，在排版中黑色和红色比较吸引注意力，轻量色彩就没有那么强吸引力。

 

如上，有没有发现有色彩的地方首先吸引你，且层次也出来了，用户有一个阅读页面的优先级，那么这个页面就是正确的设计。

 

 

 

上面这几张图都运用了色彩、字重、大小来区分视觉层次。

（4） 布局

布局其实就是对留白把控，通过留白来产生视觉层次关系，给予内容充足的呼吸空间，那么我们可以通过网格系统来制定有规则的留白空间，这样层次出来了，然后视觉上整齐度很高。

 

gird system

 

案例

 

留白创造了层次，创造精彩的视觉感官体验，创造不同性格的产品

4、结语

到这里就结束了，构建视觉层次的思路大家应该很清晰了，我们可以通过这四大基础元素的组合使用，达到我们所需要的设计要求。当然我们平时去欣赏优秀作品时候，也可以去仔细观察下，为什么会如此吸引你？它好在哪里？是色彩吸引你? 还是排版层次很舒服等等，通过这样不断去锻炼来提升自己在这方向上的认知。

作者：Tony，微信公众号：洞见设计（若侵，必删）

产品列表采用什么样的布局方案才是有效的呢？

我们不能抛开产品单独分析，而是需要根据你的产品数量、用户需求、产品目的等多方面来确定。不过最重要的在此之前我们还需要知道有哪些布局方案。

下面我总结了六大布局：

 

下面为了方便大家分析对比，我将对这六大布局进行分析，同时从图片细节展示、承载产品数多少、商品信息对比强弱、趣味性和新鲜感这四个决定采用何种布局方案的点进行评分。

1、列表布局

列表布局也就是我们常见的图文列表，一个列表垂直呈现多个连续的行元素。列表布局重在文本内容，由于图片尺寸较小，因此图片细节展示不丰富。最常见的使用场景就是电商、团购类列表，如：淘宝、大众点评等。

 

其优势是，由于列表布局遵循自上而下的阅读模式，因此有利于商品信息的对比，同时一屏可展示产品数较多。但是其趣味性和新鲜感较差，因此浏览时间过长会出现视觉疲劳。

如图：

 

以大众点评为例：其图片直接采用产品图，质量较低而且统一性不强。同时针对团购类的产品，我们需要快速浏览查看每个列表的信息，从而针对优惠信息进行对比，因此采用列表布局较为适合。

以淘票票为例：图片主要起到视觉引导的作用，而用户需要看的就是打折的详细信息，因此采用列表布局有利于商品的对比使用。

综上，如果满分是五颗星，那么列表的图片细节展示较差为2颗星；承载产品数多为5颗星；商品信息对比强为5颗星；趣味性和新鲜感低为2颗星。

 

什么时候使用？

当你的产品图片质量不高，产品数量较多，你的产品需要通过优惠信息、价格参数等来进行对比，另外对界面效果要求较低时，我们可以采用列表布局。

2、大图网格布局

大图网格布局，也就是指一行只展示一张图片，由于其图片占比较大，因此往往一屏只能展示1到2张，图片细节能够清晰展现，用户可直接根据图片进行商品对比。最常见的使用场景就是以图片为主的APP推荐列表，例如：爱彼迎、蚂蚁短租、懒人周末等。

 

相比于列表布局，大图布局页面空间的消耗大，一屏可展示内容少，不利于信息的查找和对比，同时视觉效果较好，因此适合以图片为主的产品，同时多用于商品数量较少或推荐列表中。

如图：

 

以蚂蚁短租和懒人周末为例，虽然他们一个是短租类APP，一个是生活类APP。其共同点是他们的图片都是经过专人编辑，图片质量较高，同时对界面视觉要求较高，采用大图布局可展示更多的细节，帮助用户筛选对比，提升整体的界面效果。

综上，如果满分是五颗星，那么大图网格布局的图片细节展示丰富为5颗星、承载产品数少为2颗星、商品信息对比弱为2颗星、趣味性和新鲜感较高为4颗星。

 

什么时候使用？

当你的产品数量较少，图片有专人维护，同时从产品属性上看，用户需要通过图片来进行对比时，我们就可以采用大图展示，大图展示往往视觉效果好，多用于图片类、租房类、商品推荐等列表中。

3、两列网格布局

两列网格布局也就是将屏幕一分为二，图片和文字进行上下展示，类似一个网格，浏览次序类似一个Z字，因此产品都能均衡的被用户看到。例如：天猫、严选等商品列表。

 

相比于大图展示，一屏可展示更多的商品，有利于信息的对比，相对于列表布局，两列网格布局更适合用户目标不明确或者以图片为主的产品。

如图：

 

以in和严选为例：虽然他们分别为图片社交类和电商类，但其目的都是让用户通过图片选择自己感兴趣的内容。从产品细节展示来说，比列表布局更丰富；从产品信息对比来说，比大图更便捷。因此目前两列网格布局应用较为广泛。

综上，如果满分是五颗星，那么两列网格布局的图片细节展示一般为3颗星；承载产品数较多为4颗星；商品信息对比较强为4颗星；趣味性和新鲜感一般为3颗星。

 

什么时候使用？

如果你的产品是以图片对比为主，同时又不需要大图展示时，即可采用该布局进行设计。两列网格布局往往和列表布局会一起使用。

4、两列瀑布流布局

两列瀑布流布局也就是将屏幕一分为二，和常规布局类似，其中图片的宽固定，高随图片的尺寸变化而变化。相比于两列宫格布局，瀑布流布局采用不规则的Z字布局，让界面更有趣味性，避免视觉疲劳。

 

由于布局的高度由图片决定，因此，图片细节的表达更为有力，但其不足的是图片大小不统一，大的容易被看到，而小的容易被忽略。因此瀑布流布局多用户用户目的性不强，产品数量较多的情况。

如图：

 

在汇总时我发现现在很多APP列表都采用了瀑布流的形式，以小红书和淘宝为例：他们均是以图片展示为主，同时图片多为第三方上传，图片质量不统一，产品数量较多，采用瀑布流提升了界面的趣味性，避免用户视觉疲劳。

另外，瀑布流还有个好处就是，类似上面截图淘宝的列表，可以增加商品分类标签，方便用户在操作疲劳时进行选择性筛选。

综上，如果满分是五颗星，那么两列瀑布流布局的图片细节展示较高为4颗星；承载产品数较多为4颗星；商品信息对比较强为4颗星；趣味性和新鲜感较好为4颗星。

如下图：

 

什么时候使用？

两列瀑布流布局和两列网格布局的使用场景类似，唯一区别就是两列网格布局在数量少时，或者用户目标明确时都可以采用。而瀑布流多用于用户目标不明确，同时产品数量多，可以无限下滑的时候。

5、两列拼图布局

两列拼图布局，头部常以一张大banner的形式出现，下面是由几张图片以各种拼图形式呈现。一般来说，下面展示的信息都是和他相关列表的商品。

比如：严选的推荐、小红书的推荐等。

 

拼图布局往往图片有大有小，小的也很容易被忽略，同时编辑成本高，往往适合平台主动推荐的商品列表。我们可以将重要信息放到大图上，次要信息放到小图上。

 

以小红书为例：该页面可看成是专题页，采用拼图的形式展现，从不同角度进行产品的展示，最后在用列表进行产品信息展示，引导用户购买。

综上，如果满分是五颗星，那么两列拼图布局的图片细节展示丰富为5颗星；承载产品数较少为2颗星；商品信息对比较弱为2颗星；趣味性和新鲜感较好为4颗星。

如下图：

 

什么时候使用？

两列拼图布局，在列表中使用较少，因为不规则的拼图会导致维护成本过高，同时小图片很容易被忽略，因此多用于推荐页面中，图片由编辑经过处理之后在进行上传。

6、三列网格布局

三列网格布局，也就是将屏幕一分为三进行展示，也可以叫宫格布局。

 

相比于两列网格布局一屏可以展示更多的商品，只是商品图片过小，不管是从图片对比性还是文字的对比性来说，三列网格都较弱，同时由于由于内容多，界面排版样式单一，趣味性和新鲜感都较低，如图：

 

以陌陌直播附近和哔哩哔哩番剧为例，这两个栏目用户在使用时目的性都较弱，用户的需求是通过查看图片进行快速筛选和对比。对于图片细节展示要求不高，对于趣味性和新鲜感要求也不高。

综上，如果满分是五颗星，那么三列网格布局的图片细节展示较弱为2颗星；承载产品数非常多为2颗星；商品信息对比较弱为2颗星；趣味性和新鲜感较好为2颗星。

如下图：

 

什么时候使用？

当你的用户再次操作目的性不强，同时产品数量非常多，对图片细节要求不高时，我们可以采用三列网格布局。

三列网格布局主要用于用户无目的操作，产品数量较大时使用，和列表式的区别是列表式以文字为主进行对比。而三列网格布局其图片对比和文字对比都较弱，往往用于用户目标不明确，需要通过展示大量图片供用户选择，同时图片对比性质教弱的产品。

7、总结

（1）列表布局 

当你的产品图片质量较差，产品数量较多，需要进行文字信息进行对比的产品时，我们可以采用列表布局。

（2）大图网格布局

如果你的产品数量较少，你可以采用大图展示。如果你的产品是图片类，图片质量较高，同时产品以图片对比为主时，你可以采用大图布局。

（3）两列网格布局

如果你的产品是以图片对比为主，同时又不需要大图展示时，即可采用该布局进行设计。

（4）两列拼图布局

两列拼图布局，在列表中使用较少，因为不规则的拼图会导致维护成本过高，同时小图片很容易被忽略，因此多用于推荐页面中，图片由编辑经过处理之后在进行上传。

（5）三列网格布局

三列网格布局主要用于用户无目的操作，产品数量较大时使用，和列表式的区别是列表式以文字为主进行对比，而三列网格布局主要以图片进行对比。

 

作者：风筝KK，公众号：海盐社（若侵，必删）

首页相关功能，还是先来看一下整体结构：

 

（图片来源于网络和应用截图，仅作为学习交流使用）

1、导航的形式

说到导航大家应该很熟悉了，导航是在各个功能场景之间切换的工具，是整个产品功能的大框架。它将产品的功能有序地连接起来，让功能出现在合理的位置；如果没有导航的话，用户在使用产品时会不知所措，想使用某个功能也无法快速找到，可见它的意义是十分重大的。

网上关于导航的文章很多，详细介绍了导航形式之间的区别和优缺点，估计多写也是重复，我在这里就简单的说一下吧，想看详细的文章可以自己去网上搜一搜。 导航的类别有：

（1） 底部标签式导航

最常见、最常用、最符合用户习惯的样式，导航中的首选样式。根据拇指热区图显示，拇指的最佳操作区域是只有页面的三分之一，所以标签导航常位于页面底部，一般作为全局导航使用；导航的内容最直观，不会被隐藏，并且被选中的标签会高亮显示，明确告诉用户当前所在位置，用户可以轻松点击标签进行页面切换；

 

（2）顶部tab式导航

这类导航形式也很常见，常和底部标签式导航搭配使用，作为二级辅助导航样式，一般tab数量3个以上，并且可以进行左右滑动切换；

当然也有作为一级导航使用的情况：比如安卓的设计规范中，将顶部tab式导航作为一级导航；再比如QQ音乐，出于产品核心功能需要，音乐播放页面的快捷入口始终置于页面底部，所以主导航就使用了顶部tab式导航；

 

（3）舵式导航

也叫点聚式导航，其实我感觉可以归到底部标签式导航一类，因为在两者搭配使用时，它常作为核心功能入口放在中间位置，形成了对称，故而叫做舵式导航；

设计上会和其他标签有明显区分并重点突出了自己，很容易吸引用户的注意力，也有鼓励用户使用该功能的意味，但是因为过于明显所以会弱化其他功能入口；比如带有社交属性的产品，会希望用户多发布一些UGC内容，常采用这种导航形式；这类导航里常放置用户最多使用的或是产品最重要的功能，拓展的功能数量不宜过多；

 

（4）抽屉式导航

也叫汉堡或侧边栏导航，也是很常见的一种导航样式，多用于阅读类产品，因为可以给用户沉浸式阅读体验，可以将很多低频功能藏到抽屉导航内，节省了屏幕空间，自然可以让页面看起来简洁美观；

还有一些产品因为功能比较复杂，抽屉导航常作为辅助导航进行配合使用，比如QQ既有底部标签式导航又有抽屉式导航；

还有一类就是目的性比较强的产品，比如共享单车或是打车软件，都是采用这类导航，将用户最需要的核心功能放在首页，其他的都隐藏起来，不干扰用户的注意力。

当然这类导航的弊端也有很多，比如隐藏起来的功能用户可能会想不起来去展开；需要用户多操作才能进入其他功能页面等；

 

（5） 宫格式导航

使用这种导航样式最具代表性的就是美图秀秀了，这类导航在视觉上比较整齐直观，方便用户快速查找，同等级功能之间割裂感比较大又或是功能之间没有很大的关联可以采用这种导航形式；

虽然这种导航形式功能的数量上可以很多，但还是建议这种导航方式作为辅助导航使用，一方面用户对这种导航形式相对比较陌生，接受度不一定高，另一方面，由于功能间割裂感较大，可能用户切换其他功能时会比较麻烦；比如微信钱包页面、电商和团购类产品首页banner下的类目入口也是属于宫格式导航，都是作为辅助导航使用；

 

（6）列表式导航

这种导航形式很常见，可能常见到我们平时都没察觉到这类竟然也是导航，在视觉上整齐美观，几乎所有产品都会用到。

列表式导航和宫格式导航类似，只是在表现形式上的不同，列表式导航的表现形式有很多，比如纯文字/icon+文字/文字+图片等；数量上也可以很多，并没有局限性，因为用户是上下滑动查看的方式；常作为二级导航和其他导航搭配进行使用，因为不方便用户切换功能，并且太靠下的列表可能点击率不高；

 

（7） 悬浮式导航

这种导航形式也比较常见，现在的手机屏幕比较大，用这种导航方式也越来越多了，常作为二级辅助导航使用，在阅读类或工具类产品中比较常见；点击导航常伴有动效并出现若干功能，这些功能聚合在悬浮导航内，节省了屏幕空间，但是会对用户的视觉形成干扰。

 

（8）小结

导航形式对产品来说不是单一的存在，尤其在产品功能结构都日益趋于繁杂庞大的今天，导航间进行组合使用已是常态，也是一种大趋势，所以在进行产品设计的时候需要结合自身的需要具体分析，使用适合自身的导航形式，毕竟适合自己的才是最好的。

2、顶部banner广告位

banner广告几乎是所有产品难以避免的存在，它也是产品出于运营需要或进行盈利的方式之一。banner数量一般3-8个不等，可以左右滑动查看，点击可进入相关专题或是详情页面。电商类产品的banner是根据用户喜好生成的，系统推荐给用户可能感兴趣的内容，点击率可想而知。

常见的banner设计比例有2:1和16:9，当然这不是固定的，高度可以根据产品需要来定，比如电商类产品首页空间比较宝贵，banner高度就会相对紧凑，以节省页面空间。我们在设计banner时最好使用屏幕最大的宽度尺寸进行设计，即：安卓(@4x)—宽度1440px (各个公司可能后台上传尺寸不一样，仅做参考)，这样做虽然会多占资源，但是在适配下面的各个屏幕时可以避免可能出现模糊不清的状况。

自从iPhone X问世之后，为了避免刘海对banner的干扰，越来越多的产品取消了之前状态栏和导航栏全透明的效果，将banner放到了导航栏下面；目前电商中京东还保留着原来的样式，这类样式需要注意的点有：

· 留出顶部危险区域：状态栏和导航栏底下为危险区域，危险区域内不要出现文字等重要内容；

· 顶部黑色透明遮罩：因为banner的颜色不可控，为了突出状态栏，开发会在顶部设置自上而下的黑色遮罩，数值为70%—0%；

· 上滑时显示状态栏和导航栏底色：开发会设置一个数值，比如通常是一个状态栏和导航栏的总高度，即128px(@2x)，在页面整体上滑128px时，状态栏和导航栏会由全透明变成不透明显示出底色/渐变色。

 

3、分类模块入口

分类模块入口一般位于首页banner下面，在电商、团购类等产品中是十分常见的形式。很多用户可能不知道搜索什么关键词或是目的性比较强的来寻找某一商品，这种快捷的分类入口就会显得很方便。

 

分类模块一般有1-2页，数量4-20个不等；因为第一页的点击率普遍较高，所以请将最重要的分类放在第一页，要让用户触手可及，而第二页放相对次要的分类；也可以将第一页最后一个分类设置为”更多分类“，这样做可以减少一页，但是里面分类的点击率可能会不高；

icon的设计上普遍是面性图标或者面性图标+圆形/方形底色(渐变色)，因为这样视觉上图标会显得比较饱满；面性图标的设计上不单单只是反白效果，还可以添加一些设计细节对比，会显得更有层次；这里不建议使用线性图标，因为会显得视觉冲击力太弱，不够突出。

4、“资讯/新闻/快报/头条”入口

出于运营需要或进行品牌相关的一些宣传、或是关于产品的一些资讯，这类入口通常会在首页分类模块下方，处于页面的中心位置，虽然位置比较突出，但是占的空间不会很大，所以用户对它的关注度可能不会很高。

· 字体：这里的字体一般不会使用系统的默认字体，通常是经过设计的，会具有品牌字体相关性；比如“京东快报”字体和京东的Logo字体是有品牌关联的。

· 内容：一般采用轮播的方式，3秒左右进行更换一次，有的是一行，有的是两行，点击会进入相关专题页。

 

5、底部标签栏

标签栏在上面的导航模式中已经提到过了，这里就来具体的说一下：

设计方面：

标签栏高度为98px(@2x)，标签栏内的字体作为提示作用，字号为20px；标签的数量一般有3-5个，icon的设计上要保持简约并且能够精准传达释义，也可以进行品牌基因的融入来突出自己的调性和其他产品的差异化；

常用的是线性和面性两种，一般进行结合使用以表明选中状态；iOS 11之后面性icon开始流行，用品牌色进行区分；

另外 icon的设计要保持统一，比如线性icon的粗细、圆角角度大小、开口的大小等都要保持一致，这样用户看起来也会比较赏心悦目。

 

反馈方面：

视觉上当前选中状态要和其他icon有明显区分，比如线性和面性的区分、颜色的区分等，以表明当前所在的页面位置；另外，点击时icon伴有动态效果，可以增加趣味性，也是现在比较常见的反馈方式；

听觉上的反馈是指在点击icon时会伴有点击音效，比如facebook。

隐藏功能：

再次点击icon置顶页面功能。用户熟知的置顶页面功能是点击状态栏或是点击置顶button，可能很多用户没有发现或是很少用到——再次点击当前页面标签栏icon是可以进行页面置顶的，可能很多产品都有这一功能，但是没有对用户进行很好的引导。

反观之，淘宝和MONO在上滑时会在标签栏进行置顶页面的引导，体验较好；另外，淘票票采用的是双击标签栏icon进行置顶页面，应该是为了避免用户的误操作，导致用户正在浏览的内容上移，需要再次滑动很久才能找到，但这样的交互可能很多用户都不会知道；

 

为了获得沉浸式体验，标签栏在用户浏览时可以进行隐藏，比如上滑时收起、下滑时显示出来。

6、加载方式

加载方式不限定于首页，而是贯穿整个产品。加载是用户在进行某个操作，服务器进行处理后并将数据反馈给用户，这一过程中耗费的时间用来做什么用户是不知情的，所以才会需要有加载方式来进行反馈，减少用户的焦虑。网上关于加载的文章很多，我这里就简单说一下吧，大家想详细了解的可以自己去搜索一下。

（1） 下拉刷新加载

这种加载方式在上一篇文章中的第2点“下拉刷新”中已经说了，就不多说了；

（2）进度条加载

多用于web端。这种加载方式不知道具体的加载时间，开始时可以加载的较快，最后时可以加载慢一点，这样用户会比较愿意等待，但是不能在加载时卡住；移动端用这种方式的不多，多数是H5页面，因为这种加载方式会过于吸引用户的注意力，而且在加载速度很快的情况下可能进度条都不会显示出来；

 

（3）全屏加载

指用户在进入新页面时的加载方式，一次性加载完所有内容之前看不见任何内容，自然也无法进行操作，所以最好能采用情感化的加载动效设计，因为趣味的动效反馈可以避免用户的焦虑；但在对于网络不佳的情况下，加载时间过长会让人感到急躁，所以这种加载方式的跳失率比较大；

 

（4）分段加载

这类加载方式也可以说是上拉刷新加载，使用场景一般是用户刷到feed流底部时继续上滑或点击后加载出的数据；

在做交互文档时应该注明一次性加载出多少条数据，这个需要根据产品的自身需求来定，比如：光加载内容的话可以一次性加载50条，而带有图片的内容数据可以一次性加载25条，体验了一下微信朋友圈的动态数据是一次性加载20条(自己数了一下，不一定准确)；

 

（5）分步加载

顾名思义，就是一步一步的加载，优先加载占用资源比较小的内容；分两种情况：

1. 第一种先加载文字再加载图片，图片的突然出现会打扰到用户，这种体验不佳，已经慢慢被舍弃了；

2. 第二种就是先加载出页面的框架再加载出页面的内容，比如先加载图片占位符，占位符可以是灰色或产品主色(+logo或icon) / 彩色(后台设置颜色，随机出现)，接着再加载页面文字，最后再加载占位符位置上的图片；

这种加载方式的好处是可以让用户快速页面整体的大致结构，体验较好；

 

（6） 懒加载

指在用户使用到时才会加载，以免造成流量和资源的浪费，比如用户刷feed流时，上滑被看见时再加载出图片内容，再往底下看不见的位置可能只加载出文字和框架；

（7）预加载

在阅读类产品中使用较多，指对用户下一步的操作进行预判，提前加载下一页的内容，以减少用户进入下级页面时加载所需要的时间；可以和下面要说的智能加载搭配使用，比如在wifi情况下可以使用预加载，4G下则不进行预加载，节省流量，这样的体验会比较佳；

（8） 智能加载

指在不同网络环境的下，加载的内容也不一样。比如在4G网络下，为了给用户节省流量，页面中进行加载文字内容和普清图片，不对视频进行加载或只加载标清视频。

但是考虑一部分用户的流量比较多，所以现在也会给用户提供自己选择的权利，比如弹窗提醒用户是否使用流量加载或切换高清模式；而在wifi条件下，则是可以自动加载高清图片或视频。

 

（9）小结

加载模式多种多样，同一页面可能就会有多种加载方式，目的都是为了节省时间从而提升用户体验，这是前提条件。

另外加载动效的方式可以多使用情感化设计，能够让用户能够忘记当前的等待，加深品牌记忆的同时也是一种大的设计趋势；加载动效的位置最好可以合理使用页面的位置，以减少对用户的干扰；在加载失败的情况下，也要给出反馈结果，并且可以让用户重新加载。

作者：EasonZhang，公众号：Eason张UED（ID：EasonZhangUED）（若侵必删）