当你准备开始进行一个较为复杂的APP原型页面设计时，你会如何下手？本文为我在电商移动端页面设计的过程中，总结的一套设计策略，希望能对你有所帮助。
画原型是产品经理的必备技能，而移动端PM更是少不了要画APP原型页面，这其中的设计是一件看似简单但其实复杂的事情。
也许在设计过程中，你会遇到以下问题：
在设计从没画过的页面时，不确定页面中应该有哪些元素，该如何建立页面结构；担心对页面的设计考虑不全，一旦有了新的业务拓展，原有的设计就得作废，再次大改；页面信息量庞大且复杂，设计压力大，不知道如何设计的自然有序；被吐槽原型画的丑，视觉体验差。这些问题其实都很常见，为了避免反复陷入以上问题而变得工作低效，我们应该试着去思考和总结，并沉淀出一套适合自己的高效设计方法论，帮助我们化繁为简并高效地输出页面设计，做到快速的绘画原型，并设计的自然有序和简洁美观。
在对商城许多页面的设计过程中，我反复思考并提炼了移动端高保真页面较为完整的设计思路，共分为两个阶段五个步骤：
发散：解体→整理
设计前先进行思维的发散，试着去分析页面的基本结构，并形成素材组。
重组：结构搭建→填充→优化
设计时应循序渐进，先进行页面整体结构的搭建，再到模块填充，最后细节优化，逐步深入。
下面我们以商品详情页为例，来看如何进行复杂页面的高保真原型设计。
第一阶段：发散
我们知道，写作的一般步骤是先定写作主题，然后定大纲，在大纲构思的过程中确定了要阐述的观点和支撑观点的素材，最后再进行内容的写作。
页面的设计与写作相同，都需要在具体设计前先进行构思。先思考页面的基本结构，然后在头脑风暴的过程中思考其合理性并收集整理相应的素材。
这个先构思树干然后通过其向四周进行思维发散的过程，我称之为发散，强调思维的发散。
再具体一点，这个构思流程可以具现化为两个步骤：解体和整理。
1.解体
解体，即梳理页面的结构。当你准备开始画从未设计过的页面时，先找到一张相同作用的页面，去分析页面的结构，即页面内的模块和布局。
这是快速设计的第一步，为的是在具体设计前先形成对该页面的整体性认知，帮助你在设计时建立页面的主心骨。如果不先进行页面解体，很容易使得后面的设计过程中页面结构不清晰，模块内外部联系混乱。
那么如何解体呢？
①先找到一张目标页面
以下图的商详页为例，如果跟我一样是自有页面优化，那就用原页面来解体，如果是新页面，就找到相同作用的竞品页，又或者没有原页面也没找到竞品页，那就跳过这一步，按照自己对该页面的理解，进行解体的下一个的步骤。
可以看到，这张商详页由商品的基本信息、活动信息、服务说明、商品参数、商品详情，以及各类按钮等组成，相比天猫和京东的商详页，复杂度并不是很高，但其不合理的商品信息堆积呈现，造成了较差的视觉体验，页面不协调且信息层级混乱。
②拆分模块，按钮分类
如上图，对目标页面分解，可以按照该页面是由哪些内容组成，以此来拆分成各个独立子模块。同时将按钮分为主线和支线按钮，其区别在于是否是主线业务流程上的路径按钮。
需要明白，分解是我们处理复杂事物的自然方式，这种像剥洋葱一样的工作方法，有利于我们认识和理解事物。
2.整理
整理，即收集并分类素材，形成素材组。在页面解体时我们可以罗列出其中的元素，但仅从单页面分析往往是不够的，还需要横向对比竞品页面，研究并根据需要，拆解页面的部分元素进行收集，同时筛选分类，最后形成素材组。
如果不去先了解竞品，很容易思维局限在一个小范围，不了解该页面的普遍做法和主流产品所培养起来的用户习惯，在对后期业务拓展的支撑上也容易思考不足。正所谓知己知彼，才能百战百胜。
也许你会问，这一步的作用是什么？
这一步，就像在看一本书时，先大概翻翻，粗读一下，对书有一个大致的轮廓后，就可以预估阅读难度，在阅读过程中做到有的放矢。同样的，除了了解普遍做法，帮助拓散思维外，设计前的素材收集整理，还能避免我们在设计过程中对元素遗漏的忧虑。
那么如何进行素材的分类呢？
继续以商详页为例，在了解该页面的普遍做法后，简要分析页面元素，并通过提炼和分类，分为最少必要、考虑添加、不考虑添加三个素材组。
最少必要：
在研究页面时我们应先分析该页面的最基本构成是什么，将核心元素提炼出来后进行收集，这些元素便足以构成最小可行页面。比如，商详页的「最少必要」构成为：商品基本信息+商品详细介绍+规格选择+运费说明+营销活动说明+购买按钮。
考虑添加：
这部分元素在添加后可增强用户体验或者辅助实现业务需求，且实现难度在本次迭代周期可接受的范围内。比如，在位于商详页主图下方的价格模块中，我们可以看到除了显示优惠前后的价格外，还有些做法会在该模块中加入优惠倒计时图标、已售件数、优惠折扣计算、包邮包税图标等，这些元素都能帮助你思考本次设计对后期业务的支撑，当然最后是否加入还是要综合考虑自身业务发展的需要。
不考虑添加：
即与业务目标不相符，或不列入本次优化需求范围的元素。比如，我在梳理原有页面问题的过程中，就明确了此次改版的主要方向为优化用户体验，提高信息输出效率，那么在发散收集的时候，便可以明确不会添加哪些模块，无需收集，比如不做问答、不做用户评价、不做进店逛，只需简单记录即可。
需要注意的是，在整理过程中我们要尽可能将想法写出来，不要局限于在脑海里“干”想，而应该边思考边动手，可以在分类时对元素进行编号，加标签等，进行想法记录。
收集有采用价值的素材，以及思考前后关联性，素材收集的越多，越有助于发散和补充。
通过这一步你已经形成了自己的素材组，接下来的重组阶段就是考验你设计能力的时候了。
第二阶段：重组
在发散阶段我们对该页面的基本组成有了初步的理解，并整理好了素材，接下来就进入第二阶段——重组。
顾名思义，重组就是将零件重新组装起来，共分为3个步骤：结构搭建、填充、优化。
依旧以商详页为例，我们来看如何从页面结构的搭建，一步步转化为实际页面。
1.结构搭建
结构搭建，即对页面的模块进行结构性布局。通过分析页面的模块组成，以及模块之间的关系，思考页面的最优布局，使得页面变得易读和具有拓展性。
一个好的页面结构，能使得页面板块连贯自然，并带来舒服的视觉效果。思考如何构建平衡的结构，建立合理的页面信息流，能帮助我们向用户传达清晰有效的信息。
结构搭建一共分为三步：
①元素划分
我们对在「发散」阶段整理的元素按照信息和操作这两种属性，划分为信息相关和功能相关两个大类，区别在于仅供阅读和可操作，再基于这两个大类按照重要程度分别划分为：主要信息、辅助信息、主要功能、辅助功能。
如下图，以商详页为例进行说明，我们对页面内用户会主动浏览的信息，归为主要信息，如商品标题、价格、促销说明等；对除非需要否则用户一般不关心的信息归于辅助信息，如商品参数说明。
主要功能和辅助功能的区别，则在于是否是页面内主线流程的操作功能，比如立即购买是主线流程的功能，而收藏操作则属于支线流程的需求。
②信息与功能的布局
对页面元素划分为四类内容后，我们需要在页面进行基本布局，从大类信息到小类信息进行分级布局，减少排版压力。
如下图，根据页面习惯我将主要功能放到右下角，辅助功能左下角和页面右侧，并将辅助信息放置在中下方，做简短的概要说明。
建议平常多观察移动端页面常用的布局，如列表式布局，宫格布局、图表式布局等，分析其使用场景和优缺点，才能在实战时做到灵活应用，进行布局设计。
③模块布局
结合场景，从用户的角度整理信息，思考用户最关心的内容，再根据上一步的基本布局，确定模块的合理排序展现给用户。
模块布局的重点在于思考要表达的信息流，对信息层级的划分排序，使得板块连贯自然，所以还不用对功能按钮进行仔细划分。
商详页的信息流确立，可以根据用户对商品信息的