2019-07-10

竖屏设计怎么玩？！ 

现在无线上网人数早就超过PC用户，然而我经常会在电商网站上看到一些并不太符合手机浏览习惯的设计，比如说信息密度过大，想表达的内容过多等问题。

对于这个问题，我还能说什么呢？

于是就有了今天这篇教程。

首先我们来看看，PC用户与手机用户在使用行为上会有哪些变化。

一、阅读方式变了

以前PC时代，我们看网页都是扫描着看，一个大页面，眼睛扫到哪里就看哪里。

手机呢，基本上就是跳跃着看，手指一边拖一边看。

这意味着视线停留时间更短。

二、使用场景变了

我们使用PC的场景，要么在办公室，要么在家里，环境相对封闭，时间更长，注意力相对集中。

使用手机就完全不一样了，时间和场景完全是碎片化的。你可能在等车、吃饭、上厕所。。。任何一个场景下，拿出手机看一眼，或者刷上一个小时。完全是不可预计的。

（户外使用手机要注意安全，社会上有很多坏人！）

好了，回到设计上！

那这两点改变给设计师带来什么挑战呢？

首先是页面内容需要精减再精减，因为用户可能只会扫一眼你的内容。

其次是内容节奏要把握好，用户不停的往下滑页面，就是希望可以看不到一样的东西，因此你需要在视觉上给用户不停的刺激，让用户停下来，仔细了解你的内容。

说这么多，还是来看看设计上到底怎么做吧！

这个很好理解，手机屏幕是竖的，纵向构图可以充分利用手机的屏幕面积，使得我们的设计主体足够大。我们来看看具体有哪些做法。

1、大敢裁切，重新构图

下面这张老虎，素材是横向构图，如果直接展示则会显得重点不够突出。我们可以大胆的裁切，将画面主体放大，使得老虎成为画面的绝对主角。

老虎显然更有气势了!

2、上下排版

我们看手机都是往下滑，横向空间是固定的，纵向空间却是可以无限延伸的，因此在有文案的情况下，尽量将文案与图片做上下排版，而不是左右排版。

文案更突出，图片的表现力也更强了。

3、去掉左右留白，保留上下留白

由于手机是瘦长形的，因此横向空间有限。为了让画面主体更加饱满，我们需要让主体尽量撑满左右两边。

这种展示虽然图片信息比较完整，但是整体画面显得不够饱满。

正确的做法是让画面主体尽量占满左右的屏幕空间，上下的位置可以用来留白。如图所示：

去掉左右留白后，商品图显得更饱满，更吸引人了。

如果你是做电商设计的，那可能你需要在素材的拍摄阶段就考虑到手机纵向构图的特性，这样后期在设计的时候就留有更多处理余地。

好了，纵向构图，是不是也没有你想象中的简单呢？

下面我们看第二招。

 前面我们说过，手机用户在浏览页面时，停留时间更短。这就要求我们的页面设计应该更精简，更聚焦。每一页不应该有太大的信息量。

具体来说就是需要“大图大字”，

来看看案例：

看到这里，有些同学可能要有疑问了：

如果我的页面上文案就是多，而且不能删减那要怎么办？

怎么办？打不过运营，那当然只能享受咯。

如果页面上有段落文字，而且比较重要，不能删减，那就大大方方的展示，给用户以良好的阅读体验。

总之记住，内容太多反而会让用户视而不见。

这招主要是讲手机端的内容要精减和聚焦，下一招其实还是讲的这个。

在手机上，由于屏幕面积小，因此我们在给页面信息划最小单元的时候，以一屏为最小信息单元，是最适合手机阅读的。

不仅是内容上要一屏一单元，在排版方式上也尽量做到一屏一种排版，这样用户在阅读时视线不需要过度跳跃。

我们还是来看例子：

我们把它改成一屏一个主题单元，无论是信息传达效率，还是视觉美观度上，都有了大大的提升。

当然，我这里说的一屏一主题单元，并不是指每一屏都需要一张大图来占领，而是说每一屏尽量是同一个信息模块。

再来看一个例子：

一屏一单元，可以使得用户在阅读和理解内容方面，压力大大减小，因此也比较容易看得进去。

总之呢，手机端的设计的根本性原则就是：

给用户的眼球减负，把视觉做轻，把内容做轻。

体会到要领没有？

没有拉上去再看一遍！

好了，再来回顾一下今天讲到关于竖屏设计的三大招：

1、纵向构图

2、大图大字

3、一屏一单元

今天的内容就到这！！

看完就想走？

做作业！不做作业的学习等于没学！

-----------------------

好了，学到干货的同学请大方地点击一下喜欢作者！！

这样下一期干货来得更快！