揭秘小程序产品设计流程——产品设计师篇

前言

近年来UI设计行业呈爆炸式发展，众多科班非科班人员纷纷加入这个行列，从UI设计师到交互设计师再到近两年兴起的产品设计师，行业对这个岗位的要求由最开始单纯的User Interface 美化，逐渐向交互，用研各个方向延伸。此举必然会淘汰一些人，但却也指明了设计师未来职业晋升途径，以某个方向为核心且全面发展涉猎广泛的设计师，逐渐成为炽手可热的企业争抢对象。成为产品设计师，将有涉足产品的全链路设计的能力，即参与到整个产品设计的上中下游，因此有足够的话语权为产品体验发声，为创造优秀产品贡献价值。

最早的UI设计师更多专注于产品美学层面的提升，而产品经理较之有更优秀的逻辑思维能力，在信息架构、交互设计等方面可以发挥更多作用，这也与其产品主导者的身份相契合。但发展到现在，产品经理将更多精力向业务方向拓展，产品交互架构层面的工作则分发下来由谁负责？一种公司策略是建立交互设计师岗位（多见于大型互联网公司或重逻辑向的toB类产品企业），一种则是培养UI设计师向产品设计师过度，将交互与视觉合并，修补了以往交互视觉间的断层。而第二种方案，也为中小公司设计师提供另一条专业技能的晋升途径，从事用户界面设计培养出的产品敏感度，融合交互技能以提供更高的视野，实现技能的提升。

我任职于猎豹移动UX设计部门，在最近参与了一个为期一周的小程序项目（设计开发到上线约一周），负责产品设计中的交互与视觉部分。本文一方面属于项目总结，沉淀项目设计过程中的一些思考，另一方面希望提供一种UI设计师参与产品设计上下游的快速有效模型，指导设计师从一种更广阔的视角更深入的参与到产品设计中。

项目特点

此项目总结起来就是在极其有限的时间内产出高质量的工作成果，因此完成此项目重点在于如何提高效率。小程序产品限于其自身特点，一般不会采用仔细打磨孵化的传统做法，而是快速开发迭代，敏捷开发、快速试错。设计师如何适应越来越快的产品开发节奏？如何深入参与产品设计流程（这里的产品设计不是指用户界面设计，而是产品从战略层范围层到交互再到视觉的整个设计过程）,发挥自我价值？以及如何跟随项目不断提升，在这篇文章中希望你会有所收获。

目录

一： 项目特难点分析

二： 需求评审流程

三： 设计执行     

一：项目难点

一.时间有限

 短短一周的开发时间，除去产品产出文档以及为开发人员预留的时间，设计师需要在3天内完成所有设计稿的产出。并且快速审核通过后交由开发，切图标注不允许有失误。在此前提下，设计师必须对项目背景，产品交互有足够的了解，才能以极高的完成度完成界面设计。   

二.多人协作

大多数上线产品都需要有多个设计师来维护，体量较大的产品甚至会细分多个模块由单独的设计师负责。多人协作中的协作方本身没有困难点，多人协作的前提是有统一的设计规范来规整不同设计师的产出，否则会出现设计稿差异过大，重复反工事倍功半的情景。因此此项目在启动之初需要尽早输出一份通用设计规范，此初版规范用于指导设计师视觉产出，同时也可以在完善后提供给开发人员用于设计数值的查阅，如颜色、间距、字号等。

三.控件个性化

微信小程序拥有庞大的控件库，可以支持大部分设计需求，但产品为追求差异化和视觉质量，需要设计师单独设计所有控件的样式，如input、时间检查器等。（真香定律早期患者，打死我从这跳下去也不用默认控件）

二：需求评审流程

需求评审是产品启动的重中之重，所有产品开发需要涉及到的人员都需要参加，为产品出谋划策，从自己所从事方向的专业角度探索需求点以及规避问题点。在14年谷歌对外分享的产品设计课中较早的将这一理念推广开来。

第一次会议

项目启动之初，公司决策者召开第一场需求评审会，此评审会目标为介绍待开发的产品，并商讨可行性及预估成本。

参会人员：决策者、产品经理、开发人员、设计人员

会议内容：

1. 首先，由项目leader阐述项目方向、类比数据，最终目的在于阐述产品可行性，使参会人员达成对产品的一致认可，制造共同目标并建立团队信心。 概括下来即确定产品可行性，达成一致。
   
   

2. 参考竞品——脑暴——提出可行的需求点待定——确定最终需求

   参考竞品：我比较认可一个观点是：参考竞品的目的在于产出不低于行业标准的产品。另一种解释则是，已上线的产品是用户已经耗费学习成本去掌握的，因此如非必要，请保持原样。

   更多情况下，我们需要借鉴不同竞品的多个功能，并最终结合自家产品特色对其进行个性化处理，最终与你的产品的核心功能共同构成此产品的整个生态系统。

   脑暴及可行需求点：参考菱形设计法则，探索多样需求方案，聚焦可行需求方案。脑暴时无需管可行性，只需要提出并记录，最终进行筛选，选取既契合产品定位又具有可行性的需求点。 

以我们的产品为例，最终确定以会议提醒为核心功能，考虑到大部分场景是为企业单位等团队用户服务，用户实名制是一件很重要又很棘手的问题。在脑暴过程中，提出了将名片与个人中心合并，以创建个性名片为触发点引导用户完善信息，并由此探索出未来可发展方向——收集并沉淀产品自身的用户数据，逐渐形成基于此产品的社交圈。后期分享会议可以基于产品内部的社交圈，而不必借用微信的接口。省略了分享至好友或群——用户点击分享card——确定参会中的第一步，参会人员可以通过小程序通知及时获得会议推送。

确定最终需求：需求通过所有参与人员的评审，阻力相对较小，最终由leader拍板，完成最终需求的确认。 

3.评估工作（前期）

人员配比：初步分配人员配比，几名开发人员，几名设计师，分别负责哪部分工作。

时间成本：由于详细产品文档未出，因此关于各方时间成本的预测只能是凭经验，并不具备绝对参考价值。产品进度卡在产品文档这一环节，当务之急是产品与设计合作产出文档乃至交互稿。 

第二次会议

产品经理与UX设计师合作完成交互稿的设计后进行。（关于早期交互原型的产出，双方要明确定位，在业务目标与用户体验目标两者间取得平衡。可以合作脑暴加参考竞品产出原型交互稿也可以由产品产出业务向文档后交由设计师完成交互稿的设计）

参会人员：产品经理、开发人员、设计人员

在第一次会议中我们明确了业务目标和用户体验目标后，由产品与设计合作完成了产品设计计划，接下来最重要的就是执行。因此召开第二次需求评审会，评估各项指标及成本。

内容

评估工作量： 根据开发成本拆分开发目标，敏捷开发，项目一期以实现核心功能，保证基础体验为主。次要功能及高成本功能延后。

设计师根据文档评估——周二至周四给完所有图。开发人员给出对应开发时间。

结论：周末开发完整个产品 ——提测 

三：设计执行

完成方案后，开始执行，整个产品迭代遵循 计划-执行-检验-纠正循环往复的体系。

设计规范的制定

设计规范的的一个核心目的在于指导项目开发人员及设计人员以更高质量和更高效率完成产品设计。在此基础上可以进行查漏补缺，规范设计产出以及开发者的实现效果。

不同于我们平时收藏的各大厂输出的精致庞大的设计规范，此类规范是在产品中后期完成产品规格的统一后逐渐形成的，需要多人维护，庞大（内容量大，各类设计元素，从logo到品牌推广，合作方案等等）细致（有归纳详尽的控件及原子级设计元素）。更适合产品由1到100的过程，而不适合产品自0到1的研发期场景。

而我所面对的场景是完成本项目设计需要多人协作，这一特点要求我必须在产品设计的伊始完成通用设计规范的构建。此规范目的为统一不同设计师的设计产出，其作用为指导设计师设计产出，由于时间因素等原因，此规范尽量简单易用，无法做到全面，但要求高度概括。 在进行UI设计的起始主动制定规范，表面上限制了设计师自身的发挥空间，但保证了设计的严谨性，而且规范不是一成不变，灵活运用并能够随时更新。

以构建早期通用设计规范为目标，我总结出以下几项用于指导设计师，统一视觉产出。包括颜色、间距栅格、文字字号、模块化设计。

颜色

主色、辅色、异常色 、背景色、分割线色、字体色（主、二级、三级、不可用） 

间距与栅格

侧边距、选项卡距，栅格系统。

间距通用设计原则，尽量使用4的倍数，如8、16、24、32。适合大部分移动端屏幕尺寸。设定好间距梯级层次，以应对不同场景下的间隔划分。

移动端栅格以12列最为常用，以iphone6的750*1334尺寸为例（微信小程序设计的标准尺寸），左右空余24px，12列列宽44，栏间距16。此栅格能满足大部分设计场景。 

文字字号

各级标题、通用字号、副文案字号、最小字号  字号梯级设定如： 24/ 28/ 30/ 36/ 48。在实际场景中，针对不是特别庞大的产品，无需采用如25，27等奇数字号，以4的倍数构建梯级效果最佳。除去字号大小对比，也可以通过改变字体颜色和粗细来达到对比或者区分的效果。 

模块化设计（后面会详细讲）

即原子设计法或者设计系统？（概括为一种较规范的设计方法）主要规范的方向有两个。

一：规范设计控件，统一设计元素类别。目的在于通过设计元素的复用提高设计效率，以及统一设计内容的视觉效果，便于构建规范。早期有意识的设计与构建规范并行，优于设计完成后总结归纳规范。

二：遵循开发者思维进行设计，模拟开发人员的box实现原则进行控件的设计。目的在于提高切图效率及开发效率更能提高设计还原度，便于后期维护。

后续界面设计  

一：首页风格确定

由于产品原型与交互稿制作期间，设计师都有参与，因此对界面布局等结构层和框架层的内容都已达成一致。因此可根据最终原型直接开展设计。（如果直接拿到的是产品已经产出的原型，设计师一定要从设计角度及用户角度重新审视交互稿。最低要保证不低于竞品的体验，走查并避免一些需要学习成本的交互，如非必要，请参考上线产品而不是重新设计交互原则。）

小微会议是一款偏工具型的会议办公类产品，主打基于微信圈的会议提醒的功能。用户可以方便的创建会议并通过微信分享的方式发送至群和个人用户，提高下发会议通知的效率，且会议发起方能清晰的了解到参会情况。

小而简的功能决定了其设计风格应当更加倾向简洁清晰。用色则采取常用的蓝色系，属于工具类产品高频用色。定义好配色，间距等规范后，完成首页设计并输出规范交由合作设计师。首页效果及规范如下如所示。 

二：表单设计

表单设计是产品的重中之重，而input项的体验是产品核心体验的重中之重。微信官方提供有完备的控件可以直接使用，但为追求视觉效果及产品差异化，最终决定重新设计表单组件。设计表单过程中通过参考各种线上的表单设计，以及查阅大量表单设计规范原则。最终以只问所需、反馈、防错与纠错、合理排序为基本原则开展设计。表单设计体验可以参考此文章：https://www.uisdc.com/the-most-comprehensive-form-design-manual。

只问所需

设计要做减法，深思熟虑结合用户体验和业务最终简化表单输入项。反思哪些选项卡是必要的，而哪些是次要乃至不需要的。砍掉一部分，再砍掉一部分。如何判断信息的重要性？如果此信息不予显示会对用户造成困扰或中断用户进行中的任务，那此信息项是必要信息。

如下图中的表单首页，实际可输入的信息为会议主题和会议地点。但我们并未提供必填项标签，因为从业务向考虑，我们希望用户填写完整的会议主题和会议地点，这样的会议信息盒子丰满且体验最佳。而当用户仅填充了会议主题一项后，会议地点填充默认字段：待定。

因此，此表单必填项只有一个就是会议主题，经过深思熟虑，七个input项及选项卡被简化至唯一一项作为必填项。 

反馈：

参考配图，输入状态应与默认状态作区分，强化反馈以提示用户所处位置，这是最基础的设计原则，这里无须赘述。 

防错与纠错

防错与纠错是交互设计中必须要考虑的因素。防错即防止错误的发生，需要设计师通过预测用户行为，在产品中加入限制，划定边界从而防止用户误操作导致较差的体验。在《交互设计第一原则》中提到一个概念——用户自治，即用户有权利自治，即自由的执行操作，以自己喜好的方式完成任务，但在给予自由的同时也要有规则作为限制，包含规则的自由才是真的自由。一定的规则限制只会带来更好的体验而不会干扰到用户。如下图中，未输入任何内容的情况下保存按钮置灰显示，从而防止用户出错。而当用户在使用过程中已经出现错误时，应当给予恰当的引导以纠正其错误，且纠错包括两步，告知问题所在，提供解决方案。 

合理排序

排序是布局的关键因素，不同产品遵循不同原则进行排序。概括来说仍然是亘古不变的两个方向，即业务向和体验向。左上至右下重要性呈递减趋势，展示必要信息与功能而隐藏次要信息。以及遵循基础的格式塔原理，通过不同间距区分模块。 

三：组件化设计

当下设计软件众多，用户界面设计首推sketch，没有mac机的同学也可以使用adobeXD来提高设计效率。接下来想分享的是sketch的组件功能，能大幅提高设计效率，减少后期维护成本，易于形成产品自身高度统一的规范。此功能极度契合原子设计法和设计系统等设计方法论。（超级传送门：https://www.uisdc.com/design-systems-reading-notes）实际操作如下图。 

当然组件并不是简单的将成组的元素再次打包一遍。组件化的关键在于更标准的规范以及更低的修改和维护成本。设计组件需要有宏观的设计意识，既考虑当下的布局也要考虑设计的延展性，同时要了解基本的开发实现逻辑，比较常用的如下图的box设计原则。基于此设计的组件不仅仅存放于设计素材库，更能通过开发实现纳入代码组件库。说夸张些一劳永逸，既方便自己又方便了开发人员。

除去组件，更小的设计元素也能规范化，如字体和颜色。

当产品中有多个模块可复用时，整理完毕的组件可以大幅提你的设计效率，同时也保持着设计规范，便于切图与标注。开发场景和设计场景保持一致，直接对组件进行拼接即可。使用组件工作的场景如下。

下面是第一版本小程序整理的组件库部分截图。它如何提升工作效率，大可一试，一试便知。

四：发现问题及应对

在设计进行期间难免会出现未曾考虑到的状况，或走查遗漏的部分。有关次要的功能或体验可以记录并传达至产品经理，留作后期产品迭代时补充。早期版本未完成的任务条目是最适合的迭代版本启动项。

当这个问题涉及到产品核心功能的核心体验，或者涉及到业务目标的核心指标，那我们必须在当下立即解决。一般由产品与设计师沟通，并将结果公布于团队成员，都无异议后更新文档或邮件。但产品与设计人员的沟通，一般不会是一帆风顺的。双方各司其职，一为体验发声，一为业务争执。两种立场本身都没有错，需要的是冷静的沟通，权衡利弊，最终达成商业与体验的平衡。通过合理解释 条分缕析讲清楚问题，促使产品同意修改一些细节交互（与产品沟通要以达成一致为目的，最终大家都以产品目标为驱动，不存在矛盾甚至仇恨，你说服我或者我说服你，最终使产品既能为企业获得利润又能为用户带来价值，以一方说服一方或达成一个共同方案为目标，如果双方始终无法达成一致，那意味着这个问题很严重，需要更多人的参与进行决策。

为产品体验去撕逼是一件在正常不过的事情，争取更优体验，产品以业务目标为导向，而设计要为产品本身的体验负责，只有争取才能不断提升体验，达成商业与体验的平衡才是真正的优秀产品。正如《About face》中：如果我们设计的数字产品能够让人们方便的达成目标，他们会感到满意，提高效率，心情愉快。如此一来人们会高兴的购买使用产品，还会推荐别人购买，假使我们能以低成本实现上述目标，就能取得商业上的成功。