作品集详情页不会改？试试框架布局重构法！

一、全文速览图

最近正课上到项目改版了，那今天就根据学员提交的界面作业做改版，分享一下电商详情页的有效设计思路，下面是设计的原图：

二、当前页面问题分析

商品详情页是非常常见的界面类型，而这个页面的视觉要求并不高，主要的设计要点集中在框架和布局的构思上，所以我们首先从这个部分来做分析。

这个页面的结构从上到下可以先总结成顶部标题栏、商品大图、商品介绍、优惠操作、购买设置、搭配推荐、评价、回答、图文详情、底部操作栏。

其中，顶部标题栏包含了页内跳转标签，这个功能是没有太大存在必要的，一方面上下滚动的空间不大，另一方面它一直处于一个非常难点的位置，用户根本不会通过它来进行页内滚动。

下方的优惠和购买设置栏，展示得比较繁琐，这些设置应该留在订单或购买筛选面板里完成，而不是直接露出还要占据较大的篇幅。

再到下方的搭配推荐模块，虽然能理解很多产品可能想要增加下单的连带性，但在商品信息详情都还没了解的情况下，用户是不会轻易做出这种决策的。而看完下方的图文介绍后做出决定，也不会没事再划到上方来看搭配的商品。

除了模块顺序上的问题，再围绕详情页总体的设计思路做一些讨论。首先就是国内详情页因为字段信息太多，越来越追求紧凑的设计模式。除了商品的图片外，其它能让用户理解商品和促进他们形成购买决策的信息都会尽量堆积在前两屏中。

如果界面要放进作品集里，那么还会额外添加一条限制，那就是页面高度越大展示起来就越困难。比如上面展示的案例，只展示到图文详情的开头就已经占据很大的篇幅了，再展示完图文和下方其它模块就得不偿失，属于毫无必要。

所以设计商品详情页，我们从一开始就要围绕更紧凑、节省布局空间的方式去设计，重心主要放在前两屏的信息内容中。

三、详情页的设计优化

接着，我们就围绕这个页面开始具体的优化。

首先从结构层面入手，移除顶部标题栏里的跳转文字标签，合并优惠到商品介绍模块里，将搭配推荐置入文本详情模块下方去。

然后我们再逐一完成内容的框架布局设计，首先是顶部栏移除背景色，将图片移动到顶部。为了缩小图片的高度且不影响图片比例，我们可以借鉴淘宝新的详情页图片展示思路。

然后就是下方的优惠信息和商品介绍模块，我们将优惠模块做了合并，包括促销和优惠券会共同影响最终的购买价格，所以所有优惠项应该聚合在一个列表中，可以通过点击展开优惠的明细内容。

然后简化下方的商品类型选择和配送信息，同时合并评价和提问，精简模块的数量。

再往下则是商品图文和搭配推荐模块，已知图文可能会非常长，所以我们可以使用默认折叠隐藏的方式缩小占用空间。

到此新的页面框架和布局基本就完成了，我们要确保模块的顺序和排列都具有清晰的逻辑可以追溯。如果是面向作品集的设计，那么难以解释的部分宁愿删掉也不要硬放进去。
接着，我们就要进入到下一个问题，那就是视觉应该怎么做？

虽然前面说过视觉不是这个界面的主要关注点，只按最基本的标准完成图片、色彩的填充，也可以输出一个及格线以上的结果。

下面是前后的对比：

但这就完事了吗？并不够，因为这种设计会触及UI行业中的一个灵魂拷问，那就是 “你这么做和淘宝有什么区别？”。

想要投递作品集的过程中规避这样的问题，我们就要花一定的精力去优化这个页面视觉，尽可能去删除其中存在的 “淘宝味”。

这就留到下一篇再做了。

四、结尾

最近也比较多的更新课程作业的优化思路，顺便作为材料的积累，大家对页面的理解有其它的想法也可以提出来~

我们下篇再见~

欢迎关注作者的微信公众号：「超人的电话亭」