最近项目上线后，业务部门需要组织一波推广，找到视觉设计师MM说需要一个三折页宣传单，无奈需求给得太简单，MM跑来哭诉：“起码给个具体示范页面放什么内容啦”。心一软就揽下了这个活，最终折腾出来了一个方案，首次就获得通过，作为交互设计师的我，设计思路是这样的...

注：文中没有最终的视觉实现效果，仅提供设计思路参考。出于保密需要，项目名称用“雷电”代替。

1.需求提炼

作为交互设计师，首先接触是需求，我们先来看看原始的需求是怎么样的。

XX线下部门提了一个需求，希望我们能做三折页的项目宣传，以便他们作为一个服务工具展示给客户。内容包括：介绍下雷电是什么、雷电能解决什么问题、雷电有哪些功能。

难怪视觉设计师MM崩溃了，之前做视觉实现起码有个交互原型图，突然来了一个纯文字需求，巧妇难为无米之炊。不过没关系，作为对业务、项目都了如指掌的交互设计师，区区需求转化不在话下。我们不妨先把需求提炼一下：

（1）“三折页”，意味着设计要参考三折页的尺寸规范。

（2）“雷电是什么？能解决什么问题？有哪些功能？”，在宣传单中应该包括项目的简介、功能、特色等，即把项目的亮点提炼，呈现给客户，参考三折页特点，大约3个左右的亮点即可。

2.需求载体——三折页

上文需求已经提到，最终的需求是在三折页上实现，三折页作为一个需求载体，就需要先对它的一些特性进行了解，如同我们需要了解APP、Web、微信的特性一样。

三折页不同普通的页面展示，它是按照一定的规律折叠起来的，如果对三折页没有什么印象的话，最好的办法是找一个实体的三折页进行查看，例如健身房宣传单、外卖宣传单等。如果找不到，这里有一个更简单的方法，找一张A4纸，均等折成三份即可，如下图所示，就得到了我们的“原型”，甚至可以直接在上面进行设计：

经过观察，我们可以发现三折页的有如下特点：

（1）阅读顺序其实是相对固定的

先看封面，然后打开看内页（被折起来的页面），再卷起来看内折页（内折的页面），最后看封底。记住这一点，用户阅读的阅读顺序是可以被精心设计的，按照你想他阅读的顺序来。

（2）不同页面展示界限有区别

例如内页（被折起来的页面），虽然分成了三等份，但是如果全部打开，可以把三个内页组合起来，作为同一个页面，这样我们的设计思路就可以更开阔一些。

（3）设计尺寸有规范

下一步，我们就需要查找一些资料了解三折页的具体尺寸，这里已经为大家搜集好了：

采用常规的A4尺寸，印刷成品展开尺寸是210mm*285mm，折叠后的成品尺寸是210mm*95mm，设计尺寸用216mm*291mm（四周留3mm出血位），最后一折会小点，避免折叠时拱起。

3.具体设计

（1）设计思路

我们回想一下三折页的一般打开方式：先看封面，然后打开看内页（被折起来的页面），再卷起来看内折页（内折的页面），最后看封底。是的，我们可以让他们按照我们想要呈现内容的顺序来阅读：

客户能通过宣传单快速了解雷电是什么、能解决什么问题、有哪些特色？结合三折页的阅读顺序，给客户呈现的流程是：一句话介绍雷电项目（封面）→雷电项目的优势和解决方案（内页）→雷电功能特色概况（内折页）→联系我们（封底）。

（2）页面设计

搞定大致的设计思路和内容之后，就是具体的页面设计了，我们可以先设计功能页——封面、封底、内折页，内容也比较简单。推荐使用Sketch软件，在页面上画出大致的矩形模拟三折页的效果，填充文字和图片示意图即可。需要注意的是，可以在原型中增加一些注释来体现出自己大体的设计思路，以便视觉设计师理解你的真实意图。

接下来是内容页的设计，内页可以视为一张横向的A4纸页面，在这个“大”页面中可以不局限于封面的那种边界限制，把主要的一些介绍填充进去。雷电项目采用的是讲故事的方式，这种方式在阅读时能有较强的画面感，且采用贴合客户实际的案例阐述，能增强客户的共鸣感。

4.Sketch小技巧

我们在进行原型设计时，要遵守基本的尺寸规范，才能更好地模拟真实的效果，所以在画原型时，根据大致的尺寸来画是有必要的。

推荐使用Sketch的原因是我们可以利用Sketch的自带的功能，就能快速获得三折页的大致尺寸。我们已经从上文得知，三折页展开后的持仓和A4纸相等，则，可以通过下图所示步骤获得设计的尺寸。点击“Artboard”就可以在右侧看到A4纸张的尺寸，换算为三折页的尺寸即可。

@夜雨原创作品，转载需取得授权。

更多交互设计文章，你可以关注我的博客网站：爱交互（iueux.com）