撰稿编者按：在产品设计中，前台设计是比较繁杂的部分，前台贯穿着许多数据、机能、业务之类，因此对于整座逻辑的要求也十分隐蔽，但前台产品设计是产品高阶必不可少的基本能力；本文作者撷取了有关前台系统设计的“七套路”，他们一起来介绍呵呵。

前台产品设计是几块让产品副经理难啃的拦路虎，因为它业务繁杂、数据巨大、逻辑周密。

一、介绍前台

在做前台产品设计以后，他们先从银币的四个面介绍呵呵前台系统。从银币反面看前台：能减低运营的阻力，著重数据之间的确权，著重机能组件的同时实现。

从银币另一面看前台：设计艺术风格过分单个，业务逻辑繁杂，缺乏有关联的系统说明。从银币前部看前台：数据处理精确有效率，操作流程简单，系统简单称心。

前台系统就是给用户重新分配两个有这类职权（工具栏级）的配角，对某一数据（数据级）进行校订改查导（机能级）的管理系统。

介绍前台必须熟识后端业务，后端偏重用户（机能操作）查阅重要信息、递交重要信息，而前台著重管理员（数据处理）建立信息、处理重要信息，而服务器（重要信息传达）主要是允诺重要信息、积极响应重要信息。

常用前台系统包括：内容管理系统CMS，企业管理系统ERP、客户关系管理系统CRM、京东管理系统MMS，网络化系统OA等。

两个好的前台系统会有下列两个特征：

系统目标明晰：远距用户独立自主顺利完成各项任务，减低运营阻力。 用户需求明晰：需求一般来至是企业外部的党委、项目组或业务职能部门。 著重运行工作效率：以机能同时实现为目的，著重提高系统全过程的运行工作效率。 著重系统业务：以业务取向为目地，著重整座系统业务流程和有关组件的逻辑明晰。

二、剖析业务

前台产品设计的关键是剖析业务逻辑，业务逻辑是业务层的逻辑，是整座系统层的逻辑；在设计上要考虑如何让业务流更为完备，让工作流形成两个生态圈。

对产品副经理而言，剖析业务逻辑更多是改变自己的设计策略。常用的剖析业务方式有需求分析、场景分析、架构设计、机能规划、UML建模、用户地图、交互自查等。

前台产品一般采用需求驱动设计的方式。需求是业务驱动或技术驱动的核心。需求驱动设计就是根据有关业务职能部门提出的需求，进行前台产品设计。

前台产品一般是给公司外部员工使用的，不同的业务职能部门会有不同的业务需求，不同的业务需求会有不同的业务场景；对于业务逻辑繁杂的前台系统，越是需求多样化场景，越要做需求场景分析，他们能根据需求池写需求用例。

当他们收集到了有关业务职能部门的需求后，首先对需求优先级排序，其次对需求进行拆解与分析，然后形成不同的机能规划，最后把这些需求体现在前台原型中。

此外，产品结构设计也是剖析业务逻辑很重要的一部分，产品结构设计著重基于机能构建产品的整体架构，主要是剖析产品框架和基本机能；一般会设计机能结构图、重要信息结构图、结构图。

三、确定布局

在前台产品设计以后，他们需要确定它的框架结构，确定框架结构能保证页面布局、排版形式的一致性；前台设计的标准布局为栅栏设计，页面尺寸为1440*900。

前台系统的结构主要包括四个部分：导航区域、机能区域、内容区域。

导航区域分为单层级和多层级导航，包括Logo、工具栏栏。 机能区域包括账户中心、消息通知、修改密码、安全退出。 内容区域的包括筛选条件、列表、分页、详情页等。

四、字段设计

字段设计是前台设计中最基础的部分，但却是数据结构中最重要的部分。

字段设计分为四个步骤：汇总字段，处理字段，设计字段。

字段设计要考虑的维度有：所属对象、类型、是否必填、来源、长度。常用的字段类型有：业务型字段、系统型字段、管理型字段、规则型字段。

以P2P网贷系统的标的为例：标的详情会展示标名、期限、利率、借款金额、还款方式等；标的登记会记录登记时间、审核人、审核时间等；标的流标会记录审核内容、日志重要信息、操作重要信息等；标的放款会记录满标时间、放款时间、放款状态等。

五、流程设计

流程设计是剖析业务逻辑的最好方法之一。好的流程设计，不仅让产品机能形成生态圈，也遵循用户的心理模型，此外，用户会感受到前台系统操作的简单高效。

流程设计是决定产品是否可用、易用的重要因素，同时也是区分两个产品副经理逻辑分析能力高低的重要体现。

在产品从想法过渡到模型的阶段，流程设计以动作来推动业务前进。流程设计叙述的是完备的业务流程，能剖析机能组件、业务逻辑与使用路径。常用的流程有：业务流程、机能流程、操作流程、页面流程、数据流程等。

以标的登记审核流程为例：他们以泳道图的形式，设计ERP系统、P2P系统和存管系统的业务流程，风控专员在ERP系统递交标的进件后，风控主管会在P2P系统前台进行初审和复核，之后再推送到存管系统进行终审，在这个过程会形成动态的标的登记审核流程。

六、规则设计

规则设计的目地是确保规则的业务表现和业务目标相匹配，根本作用是流程控制与数据验证。

业务规则叙述了业务过程中重要的对象、关系和活动。业务规则包括机能范围、操作流程、业务规范、约束条件和机能说明等。

对于业务规则来说，为了方便对规则的新增、变更与废弃进行跟踪管理，需做版本控制；以贷超产品MVP设计为例，他们会将业务分为核心业务部分、业务支持部分和非业务部分，然后把业务规则进行明晰、明晰、可量化的场景叙述，并做好阶段反馈。

规则设计最有效率的方式是建立规则引擎。规则引擎能在不同的时间节点触发业务规则，且能帮助他们在系统中有效率的执行和管理规则。

七、原型设计

当他们清楚需求、流程和规则后，会通过Axure把想法转换成能需求落地的原型。

原型设计的目标是把规划的机能、流程展现出来，将需求转化为能给需求方、开发人员和测试人员演示的Demo。方便需求对称与问题沟通，确保用户需求、使用场景的合理性，从而推动产品迭代。

常用的原型设计方式有手绘原型、灰模原型、交互原型。产品副经理一般是画低保真的手绘原型或灰模原型。

手绘原型有助于带动思维。在项目立项阶段的头脑风暴和概念测试，手绘原型在初期验证想法时十分高效，也方便讨论，同时也适合敏捷开发时快速出原型。因此手绘原型是最简单、快速的表现产品轮廓的方式之一。

灰模原型可将产品需求以线框结构的方式展示出来，让需求和想法更为直观得展现。画灰模原型时，所有的元素，除了组件自带的颜色，只用灰黑白。此外，他们要在软件需求中说明所有页面展示、机能状态和业务规则。

无论从0到1做前台，还是系统重构，前台产品设计是产品高阶必备的基本能力；既能逐步锻炼产品副经理的设计逻辑思维，也能快速介绍公司的业务流程。