许多初学者在刚入门蓝本结构设计时，总会花费许多精力在工具的优先选择和雕琢上，却忽略了蓝本结构设计的核心。等真正上起手来，只能舒圣祥，没两个完整且系统的思路。因此，我想聊聊聊我在结构设计产品蓝本时的思索过程，希望对新上路的小伙伴们有所协助。
这是两个关于住宅小区大门口蔬果店的故事……
我家住宅小区楼下有一家蔬果店，叫“五日农庄”，日常供应蔬果、粮油、饮品、饮料及一些基本的生活用品。老板娘夫妇是安徽人，为人直率，性格内向，平时里的营生常常供不应求。然而年青的物业公司们却有些苦恼。
住宅小区的老人们每天早上8点多就在农庄大门口排队抢菜，要到年青的物业公司上班回家后，绝大部分菜谱不是已经销售一空就是被人挑剩了。老板娘为了照顾这些白领，随即拉了两个QQ群，物业公司将他们需要的水果目录寄送朋友圈，老板娘提早装箱好，要到物业公司上班的这时候间接来退款取货。可这又遇到了一些捷伊问题：
有些物业公司常常忘记他们预约了菜谱，未能去取货绝大部分人卖菜时并没明确的目标，而是甚么美味、甚么折扣就买甚么。但从QQ群原订的这时候，没菜谱目录，也不知道产品价格和美味程度，物业公司也不知道该原订些甚么原订的菜谱经常没库存量，老板娘也来不及一一通知大家老板娘每星期要处理的QQ消息太多太杂，总容易遗漏后来，我与老板娘交流，假如有位线上网络平台，他们每星期能在上面更新店门口的货品和库存量，并且将新品或当日折扣重点公之于众，物业公司们能在网络平台上实时查阅菜谱信息，并间接付款购买，老板娘按照订单和取货时间提早装箱，要到物业公司方便的这时候去店门口取货。这样就能做到线上线下相结合，既方便快捷了物业公司，也能协助老板娘操持营生。倘若老板娘委托我来结构设计这款线上蔬果交付网络平台，我将如何进行蓝本结构设计呢？
首先，要考虑优先选择甚么样的网络平台。为了便于物业公司足不出户查阅和预约货品，很显然，移动端应用更符合使用情景。而小流程则更加轻量，无需安装，存取QQ即可使用。只好，我打算结构设计两个小流程版的蔬果在线交付网络平台，名字就叫“五日农庄”。接着，能开始着手小流程蓝本的结构设计了。我的思索过程能用这三步来概括：
关键步骤1：梳理流程
回想一下，你平时里去蔬果店卖菜是怎样一种情景：
情景一：家里没米粮了，你要去购置2-3天的甜品，但具体买些甚么，你也没想好。只好，你进入菜场，走进包装袋跟前，大致浏览一遍包装袋。咦，芹菜还挺美味的，你顺手拿起来看了看，再瞅了一眼产品价格，接着装到他们的纸袋里。就这样，你挑选了好一大袋比较美味的水果，拎着袋子去大门口结帐，老板娘称量，计算产品价格，你付款结算，高兴地离开了。情景二：那时你想吃个红烧鲫鱼，只好你径直走进菜场，让老板娘帮你现杀一条鲫鱼，并询问老板娘葱、姜、分别在哪里，接着抓洗发，结帐，一走了之。情景三：老板娘最近天天搞活动，那时土豆、明天西红柿，折扣力度还挺大，何不趁机多囤一些。只好，你走进菜场，询问老板娘今日的特价货品，老板娘让你看包装袋上的特价标签，只好你挑选了若干他们认为划算的货品，心满意足地结了账。实际上，无论你面临哪种情景，都要经过四个过程：从两个入口进入菜场、经过两个导购的过程、决策是否购买和完成交易。
入口：要能包容以上三种购物情景；
没明确目的，从包装袋中挑选美味的水果；有明确的购买目的，只买特定货品；有模糊的购买目的，以省钱为目标，愿意购买特惠货品；导购：从入口到两个具体的货品详情，都能视为广义的导购过程。只不过，对于这三种购物情景，其导购形式有所差异；
对于没明确目的顾客，老板娘需要提供类目导航，也就是店门口的包装袋；对于有明确购买目的的顾客，需要搜索功能。在店门口，通常通过顾客喊话老板娘回答的方式来完成；对于有模糊购买目的顾客，老板娘能提供各种特惠促销活动，薄利多销。在店门口，通常以特惠专区和特惠价签的形式存在；决策：浏览完商品的美味程度、价钱等详细情况之后，你就会做出购买决策，要么放弃购买，原封不动的放回包装袋，要么将货品放进纸袋；交易：决定购买并选完所有货品之后，将进入交易过程，你需要去结帐找老板娘称量、支付、并完成提货。当然在这个过程中，你也可能因为队伍太长等突发情况临时决定放弃购买。对于已经完成结帐的顾客，老板娘通常不予退货。关键步骤2：拆分核心页面
暂且不考虑常规的注册和登录，从上面的流程中，我们很容易拆分出产品的核心页面。
就这样，我们得到了10个核心页面。需要注意的是，由于篇幅关系，我们只结构设计了面向顾客的一端，商家管理货品和库存量的部分并不在其列。
关键步骤3：梳理每个页面的信息结构
接下来，我们需要梳理每个页面的信息结构，即页面的全部元素及元素之间的逻辑关系。以首页为例，它是这样的：
关键步骤4：绘制蓝本界面
根据首页的信息结构，我们绘制出首页的蓝本图。
使用同样的方法，我们绘制出其余的页面。
很遗憾，关于“蓝本”，我并没找到两个权威的解释。在软件开发过程中，不同的角色对“蓝本”的理解也有所不同，比如：
有些开发人员可能认为蓝本必须以代码形式生成，并且最终将用作产品代码；结构设计师可能会认为蓝本需要在Figma或Sketch等结构设计工具中创建，能是静态蓝本，也能是交互蓝本；业务人员可能会认为蓝本是概念验证（POC），功能完备，能模拟产品的行为或体验，可用于客户演示；在这里，我所指的蓝本是软件开发中的常见形式：
“在软件开发的方案结构设计阶段，将产品需求通过可视化的界面传递给团队及用户的一种形式。简单来说，就是将产品页面的模块、元素、人机交互形式通过线框图的方式生动地表达出来。它能是纸面蓝本，也能是用专业产品结构设计工具中的可交互蓝本。”绘制蓝本的工具许多、方法许多、保真度也有许多，你能综合他们的时间、工具的熟练程度、画图的功底来优先选择。
假如你是一位手绘很厉害的大神，不妨先用草稿纸绘制出界面的基本结构，手绘的速度很快，但精细程度不够，适用于快速展示他们对产品的构想；假如你有比较充裕的时间，且对结构设计软件有一定的基础，建议间接使用软件，这对日后升级保真度大有裨益。当然，如果你尚不具备视觉结构设计师一样的软件结构设计能力，大可使用线框图，只要能表达清楚页面、页面元素、及元素间的逻辑关系即可。过程中，如果你不知道如何图形化地表达一些具体的元素（比如时间优先选择器），能参考ant design上的组件库，它会为您提供多种思路；假如你本人就是一位视觉结构设计师，那么，使用结构设计软件，一次完成低保真或中保真将是绝佳优先选择。关键步骤5：添加交互，完成蓝本结构设计
实际上，如果你有机会与客户面对面讲解结构设计方案，那么到第四步，完成静态蓝本页面就足够了。不过有些这时候，我们的客户并不懂得结构设计知识，他们希望我们的蓝本结构设计能够像两个可工作的软件一样，不仅体现出APP的基本框架，还能体现出其外观和运作方式，以便他们的销售人员能够去向他们的客户展示，用以验证方案的可用性。如此一来，我们就需要完成最后一步，为蓝本界面添加交互。
绝大部分软件都支持为蓝本添加交互的功能。以MasterGo为例，它支持三种模式：
结构设计模式：你能在其中绘制蓝本界面蓝本模式：为蓝本界面中的组件添加交互事件，如点击、拖拽、悬停等。以此来使你的蓝本更加接近真实的软件。标注模式：可以协助开发人员测试元素与元素之间的距离，复制元素的属性值或者间接生成代码。这个功能大多在进入开发阶段后，使用高保真结构设计时才会用到。在这里，我们使用“蓝本模式”为其添加了两个交互流程，如图中蓝色线条所示。
最后，你能在MasterGo中间接预览交互体验，或者copy链接到网页或设备中体验。
写在最后
五日农庄小流程的蓝本结构设计完了。可实际上，老板娘并没委托。我找老板娘了解过，他说绝大部分的顾客还是愿意亲自到店里选购，因为担心老板娘给配好的菜谱质良莠不齐。所以你看，两个产品被结构设计出来，一定要得到市场的验证，才能说明产品的成功与否。验证能有许多道环节，蓝本结构设计是第一道，高保真结构设计能是第二道，最终发布的软件才是第三道。
不过作为日常练习的案例，这种看似不一定成功的点子并不妨碍你精进技术，反而会增强你的洞察力。不妨从现在开始找个点子练起来吧~
文/Thoughtworks 史湘阳
原文链接：
