当你准备开始进行一个较为复杂的APP原型页面设计时，你会如何下手？本文为我在电商移动端页面设计的过程中，总结的一套设计策略，希望能对你有所帮助。

画原型是产品经理的必备技能，而移动端PM更是少不了要画APP原型页面，这其中的设计是一件看似简单但其实复杂的事情。

也许在设计过程中，你会遇到以下问题：

在设计从没画过的页面时，不确定页面中应该有哪些元素，该如何建立页面结构；

担心对页面的设计考虑不全，一旦有了新的业务拓展，原有的设计就得作废，再次大改；

页面信息量庞大且复杂，设计压力大，不知道如何设计的自然有序；

被吐槽原型画的丑，视觉体验差。

这些问题其实都很常见，为了避免反复陷入以上问题而变得工作低效，我们应该试着去思考和总结，并沉淀出一套适合自己的高效设计 *** 论，帮助我们化繁为简并高效地输出页面设计，做到快速的绘画原型，并设计的自然有序和简洁美观。

在对商城许多页面的设计过程中，我反复思考并提炼了移动端高保真页面较为完整的设计思路，共分为两个阶段五个步骤：

发散：解体→整理

设计前先进行思维的发散，试着去分析页面的基本结构，并形成素材组。

重组：结构搭建→填充→优化

设计时应循序渐进，先进行页面整体结构的搭建，再到模块填充，最后细节优化，逐步深入。

下面我们以商品详情页为例，来看如何进行复杂页面的高保真原型设计。

之一阶段：发散

我们知道，写作的一般步骤是先定写作主题，然后定大纲，在大纲构思的过程中确定了要阐述的观点和支撑观点的素材，最后再进行内容的写作。

页面的设计与写作相同，都需要在具体设计前先进行构思。先思考页面的基本结构，然后在头脑风暴的过程中思考其合理性并收集整理相应的素材。

这个先构思树干然后通过其向四周进行思维发散的过程，我称之为发散，强调思维的发散。

再具体一点，这个构思流程可以具现化为两个步骤：解体和整理。

1. 解体

解体，即梳理页面的结构。当你准备开始画从未设计过的页面时，先找到一张相同作用的页面，去分析页面的结构，即页面内的模块和布局。

这是快速设计的之一步，为的是在具体设计前先形成对该页面的整体性认知，帮助你在设计时建立页面的主心骨。如果不先进行页面解体，很容易使得后面的设计过程中页面结构不清晰，模块内外部联系混乱。

那么如何解体呢？

①先找到一张目标页面

以下图的商详页为例，如果跟我一样是自有页面优化，那就用原页面来解体，如果是新页面，就找到相同作用的竞品页，又或者没有原页面也没找到竞品页，那就跳过这一步，按照自己对该页面的理解，进行解体的下一个的步骤。

可以看到，这张商详页由商品的基本信息、活动信息、服务说明、商品参数、商品详情，以及各类按钮等组成，相比天猫和京东的商详页，复杂度并不是很高，但其不合理的商品信息堆积呈现，造成了较差的视觉体验，页面不协调且信息层级混乱。

②拆分模块，按钮分类

如上图，对目标页面分解，可以按照该页面是由哪些内容组成，以此来拆分成各个独立子模块。同时将按钮分为主线和支线按钮，其区别在于是否是主线业务流程上的路径按钮。

需要明白，分解是我们处理复杂事物的自然方式，这种像剥洋葱一样的工作 *** ，有利于我们认识和理解事物。

2. 整理

整理，即收集并分类素材，形成素材组。在页面解体时我们可以罗列出其中的元素，但仅从单页面分析往往是不够的，还需要横向对比竞品页面，研究并根据需要，拆解页面的部分元素进行收集，同时筛选分类，最后形成素材组。

如果不去先了解竞品，很容易思维局限在一个小范围，不了解该页面的普遍做法和主流产品所培养起来的用户习惯，在对后期业务拓展的支撑上也容易思考不足。正所谓知己知彼，才能百战百胜。

也许你会问，这一步的作用是什么？