第14节 超全屏构图方法

添加助教微信：zmi1630，备注喜马拉雅，领取电商干货资料。
hello，各位亲爱的同学们，你们好，我是三毛老师。

今天我们讲解第14节课程——超全屏构图的方法，那么我们要结合目前的全面屏的手机优化每屏的尺寸，为什么全面屏，现在手机都是全面屏以前上下的，类似于手机面板已经被取消了，包括我们的摄像头隐藏在我们的屏幕当中，那么手机的屏幕更宽更高更大。构图阅读观看它其实画面更直观，我觉得画面更直观，对我们的构图也有要求，如果巧妙的迎合了这样的一个构图，我们的展现的机会和效果会更好。

我倡导的叫超全屏设计，100%贴合手机端展现！为什么不用竖构图？其实超全屏构图的原理也是竖构图，只是很多人没有对超全屏页面的构图的体验和展现做研究，所以我倡导100%全面贴合手机端的展现，最大化的展现图片的效果，让消费者直观高效阅读。

现在很多的商家还停留在pc时代的构图，为什么叫pc时代？我们看一看整个一个手机里面会有三个到四个页面，为什么会造成三个到四个？我们在pc端我们在设计构图的时候，我们光看到的页面是横构图，但我们在手机端进行阅读的时候，以往我们在电脑上看到横构图，突然就变成浓缩到一起的一屏的画面。也就一块内容，当我们在电脑上看起来这个是一屏对不对？但手机上一缩略以后它就变成了三屏。

我们以往在电脑上横构图，正方形的排版，在手机端阅读它就变成什么？一堆内容一堆文字好几个信息的集合，那么这样子看起来是不直观不突出，没有代入感。那么请问一下，这样子的页面你还看吗？文字空洞没有任何卖点可言，页面的构图也比较杂乱。这样子的页面你们会看吗？这样子的信息传达效率是比较低。

所以我们要激发用户的利益和兴趣才是成交的关键，同时我们还考虑到如何有效地结合到页面，最大化的展现商品的细节。我们看看刚才是讲的是传统的PC横构图，现在还有是竖构图的逻辑和理论，我觉得这个是没有问题，但是大部分对竖构图的尺寸定义还停留在传统的那些手机的理解认知上。传统的手机满足了手机端的展现，但是不能最大化的展现内容。手机在升级和迭代用户的体验，它显然也会升级和迭代。

传统的构图有哪些？

这里有个区块内容，这里有个内容，已经趋向于正方形，看起来我们感觉到是个竖构图，但是它在手机端展现的时候就不直观，玻璃杯，这也是一个正方形，差不多长方形，这些构图他都很杂乱。当我们在手机端页面排版以后，我们看到的页面是非常杂乱，并无统一的构图逻辑。

传统的竖构图有什么影响？

虽然看起来首屏第一张图符合于无线端的构图原理，超全屏，但是它整个在手机上阅读就显得很乱，长的长短的短，每个区块没有做独立地分割，就显得特别的凌乱。

用户看完以后特别烦躁，不能静下心来直观的感受到产品的特点。看看传统的竖构图和超全屏构图的方式的区别，左侧的就是我们现在在利用我们超全屏构图的一个方法。那么右侧显然就是传统的竖构图，当你用右侧的构图，你发现手机上面还有个空白，这个内容可能就是另外一块内容的集合。

现在基本上一千块钱到5000块钱，基本上都是超全屏。

全面屏它势不可挡的已经形成了一个主流，无论是你要不要换手机，这必然会形成一个趋势。与其你现在做传统构图，还不如直接做成什么代表未来主流的超全屏，对比相比超全屏它占的面积更大更直观！以苹果手机为例，我们的超级明尺寸是是790×1480。淘宝店750×1400差不多，当然尺寸会有所变化。不同的手机尺寸大小各有不同，微弱的尺寸各有区别，我们现在整个设计策划构图排版，标题几乎都是以超全屏为主。

为什么留一点白？

当然有的时候我们会考虑到淘宝的整个购物窗口的上下的一些内容要磨合一下，那么很多人说三老师构图，我们家是1480*790，但我的页面一个屏排不了，我们要两个屏三个屏，那怎么排这个没有关系。我们通常是定义成五屏，也就是把前五屏的内容通常用这种A构图法就直接的大图直接展现，快速可以传达上面的信息，引导用户对内容的感知。

到后屏有些卖点比较多，还信息比较杂，我们会对卖点进行优化，整个在手机端展现的时候，他就更直观，更加的符合阅读习惯。小王子声波盒为每段故事重拾光芒，画面和页面的尺寸结合都是符合什么无线端用户人群的，都是符合超全屏构图再看看我们刚才讲A构图法，abc构图法，AB构图法等等。构图的方法其实都可以灵活地根据自己所需要来进行构图，我们看一看是不是一个尺寸里面进行什么内容的调整，有效的配合到什么页面展现。

还有一种方式，跨屏展现

什么叫跨屏，有的同学会说三毛老师，我这个页面一个屏不够怎么用，一屏半一屏半也可以，你可以定1480，你可以做短一点，主画面加跨屏通常情况下，主画面讲标题内容跟我们人物结合跨屏讲一些细节补充。这主要是解决产品细节和功能特点补充说明所作出强调补充的画面。有的人说三毛老师我的尺寸能不能更长一点，我可以750，但是我要更长一点，我1480不够1460也可以，关键是你要考虑到阅读，有的人他把整个信息做的很长，但是尽量在1480的尺寸里面就可以了。

超全屏为什么超全屏？

为什么超全屏，横平做设计，你只利用手机30%的面积，横屏让你流失了宝贵的流量，超全屏的阅读已成为消费者习惯。超全屏的好处更直观，更大的展现画面，更直白的突出信息，更快速地引导用户成交，就这么简单。那么在超全屏运作体验当中，我们通常的标题都在上面，文案在上面，图片在下面，为什么。这时候我们的文字作为主要的标题突出，会影响用户快速识别文案。当文案的内容快速识别以后，同样我们的图片就会被识别。

95%的销售业绩来自无线端

你还在拼命为5%的PC而努力，所以你要提高行业的认知，洞察用户的需求，你必须要懂，不要还停留在我在电脑上做设计，我把它做好看了就可以了。

我们做一下总结好不好？

针对无线端内容阅读困难，过滤不看。页面排版构图杂乱，没有针对全面屏表现。超全屏设计，100%贴合无线端手机的展现。

我们今天的课程就讲到这里，我们接下来预告一下最后三毛老师的最后的课程预告。我们最后的课程是第15节，标注是设计法与图片的关系，精细化针对每一屏面积，对文案图片完美的配合，让用户秒懂。

好，最后一节课程是什么样的内容，我们拭目以待。