匠人匠心系列白鹭产品经理潘东：一个界面的思考与进化

导语：

【潘东，白鹭产品经理，负责DragonBones产品的研发；

从0到1进化减负被他和团队奉为座右铭；

分割线的设计成为无微不至的细节考究；

元素布局精确到像素级是诠释视觉的新执念。】

把注意力集中在那些将会改变一切的细节上，变得卓越其实并不艰难——苹果 乔布斯。

注重细节

产品界面是能最直观的体现出产品细节，以DragonBones5.2版本导出界面为例。

为了保证DragonBones5.2界面上所有元素的布局都精确到像素级，在确定了原型图后，我制作了设计图，并标注了详尽的尺寸和颜色。

这样，界面最终会呈现的样式能得以忠实呈现。详细的标注各种间距，长宽，配色等，也确保了开发人员可以忠实还原产出。（精细设计图是参考最初的导出草稿制作的，所以导出数据和导出纹理的勾选项还在上边。）

更易被忽视的细节在于，在DragonBones 5.2导出界面中的选项分隔线。如果只是用普通的线条，整体的立体感会比较差，分隔的也不够明显。但用醒目的高对比线条（比如纯黑或纯白），又会过度吸引人的注意力。

不太清楚记得有多少个反反复复调整的日子了，历经多次对产品细小界面的设计改变调整测试，最后我们采用深浅配色的两个一像素宽的线条组合。既能营造出凹陷的立体感，还可在清晰分隔区域的前提下，不会分散使用者的注意力，从用户反馈来看，我们的反复研磨都是值得的，契合了他们的需求。

在我们看来，产品整体完美是由许许多多的具体细节构成，只有这些细节的完美才能构成全局的精致。特别关注细节是我和团队最为注重的事，其实在追求细节上的态度，是最为被忽视的存在，但这些最不起眼的细节，在我和团队眼里却成了最好的风景，因为每一个看似简单的设计，设计的过程并不随意。

从0到0.1

早期DragonBones只是一个基于Flash pro的插件，那时间功能简单，加之是春雷同学（Dragonbones的创始人之一）业余时间开发，所以没有什么过于复杂的功能和界面，上面这张图就是当时的导出界面。

不难看到，界面中的元素是简单的堆叠。由于元素较少，我们只要保证其不同元素之间的间距合适并且相同，同时元素之间对齐即可（其实，春雷把精力都放在写代码上了，也没时间关心界面这种事情）。

初次亮相

从4.0开始，我们决定把DragonBones做成一个独立的动画编辑器，不再依赖于Flash pro。

第一版的导出界面和插件时代的导出界面功能上相差无几，唯一不同的是，我们精简了命名部分，在导出时，只需要设置导出的路径就好了。

                                                                                                   

由于功能依然不多，当时在实现的时候依然是让界面元素简单的堆叠。实际使用起来也不会有太大的问题。简单的界面，让用户一看便知软件功能作用，对于用户使用来说没什么太大难度。

功能膨胀与体验失衡

经历几次版本更新迭代，在4.5到5.0版本的时候，我们赋予DragonBones的产品功能越来越多。导出界面也变得越来越复杂，我找了当时两个版本的截图，可以看一下这两个版本的界面有多么的“混乱”。

4.5的导出界面，DragonBones已经支持三种导出类型：

l 骨骼动画

l MovieClip

l 序列帧动画

而图片资源又可以选择纹理集或碎图模式，文件格式有两种类型可以选择，文件格式的版本有两个，同时还附带三个辅助选项。

如上图所示，当初这么实现的原因是考虑到几组选项之间是组合使用的，不存在依赖关系。用户在操作时，他的操作顺序如下图：

伴随越来越多市场反馈，对于4.5的界面布局设计，我们的结论是能用，但还远远不够好。

接下来版本进阶到了5.0，我们支持的导出选项进一步增多了。

从上图可以看出，“动画数据+纹理”，“图片”，“视频”分为三组处理，每一组中的使用导向也是多维度的。这就导致用户在初次看到这个界面时倍感困惑。用户的操作顺序如下图：

其中多个横纵交叉的箭头一定会把用户弄晕，所以保留用户习惯的做法在实践中证明完全不符合新版本的需求，于是“减负”的工作迫在眉睫。

简单好用的产品才是好产品

经历多次的测试和不断涌来的市场反馈，我和我的团队不断开始自省反思，我们分析了所有的用户反馈，梳理出新的产品逻辑。我们开始把复杂的交叉的东西梳理成线状的，因为线状的东西才便于人们理解和使用，才是最简单的。这就和打游戏类似，一关一关的过，每一次只关心当前关卡中的内容，而这些内容很少和前后的关卡有过多的联系。当然，游戏中需要加入支线任务，隐藏关卡才会更有意思。然而，软件不同，我们需要做的是让它尽可能的简单，尽可能的实用。

这一次“减负”行动中，我首先要确认如何将逻辑做到线状。第一步还是分组，这次分组确定了不重合的逻辑进行划分，最终确认三组不同类型。

l 动画数据+纹理

l 图片

l 网页

这么分有什么好处？

总结起来就是一句话，三个分组为三个不同的逻辑维度，用户每次只会使用其中一个。

逻辑分组只是最简单的一步，因为在不同分组中，他们互相交叉的逻辑才是令人头痛的事情。

这里以“动画数据+纹理”分组为例。

以5.0版本内容为参考，我们要把一个二维上的路径变成一个一维路径，最好的方式是按照人们的阅读顺序来做，也就是将关键功能选项变成一列，每行是一个选项点，这样人们的操作不会发生理解偏差，也不会发生漏选的情况。

不同选项的顺序是值得思考的，人们常接触到的排列方式无非就是从大到小，或者是依赖关系。

从大到小是一种排列特征，而依赖关系是一种逻辑关系，它必须是先有A再有B，有了B才能有C，后者依赖于前者。

很不幸的是，在DragonBones中，我碰到了既有依赖，又有排列特征的情况。我们设计了第一版原型图，其中将并列项进行排列，然后其子项按照依赖关系排列，如下图：

可以看出，导出数据和导纹理的勾选项是在数据和纹理设置的上边的。我们在产品的研发中始终没有断开和用户的持续沟通，经由和用户交流，他们普遍认为不是很合逻辑。用户认为应该在最后才会决定导出的内容是否包含数据或纹理。

基于对用户行为逻辑和建议的综合考虑，我调整了产品的路基关系，让前面的子项内容变为依赖项，修改后的原型图变成了下面这个界面。

file:///C:/Users/egret/AppData/Local/Temp/ksohtml/wpsFDF6.tmp.png

修改后的用户操作流程变成了现在这个界面。

DragonBones5.2版本导出界面

在最终的界面中我们可以看到，用户的操作顺序只剩两个维度，每个维度下只有一条线，逻辑清晰简单，而又能组合出复杂多样的导出参数。

从市场反馈来看，不得不说，现在的逻辑清晰多了，用户使用过程中也不会发生漏填，理解困难的状况。

小编结语

用心思考、用心倾听，坚持把产品做好，做到极致，促使潘东和他的团队精益求精和持之以恒改进是源于对产品和用户最质朴的爱，他们不断雕琢自己的产品，也充分享受追求完美的过程。而在现今物质至上的社会里，那些所有平凡岗位上的劳作者依然坚持不懈耕耘的作风，正如一股清流给我们带来一份追求纯粹的美好和朴素工匠情怀。

关于匠人匠心

匠人匠心系列是白鹭官方发起，邀约H5游戏行业优秀开发者，讲述开发经验、成长历程分享优秀案例作品，帮助开发者实现交流与展示机会。欢迎H5开发者参与分享，一经入选，优秀作品将在官方渠道公开推送，还可获得蓝牙音响、高级笔记本、官方公仔、H5游戏开发指南和移动行业报告书等丰厚奖品。所有来稿开发者以word文档形式发送文案至指定邮箱“liuhaiyu@egret.com”，邮件统一格式为姓名+分享主题+联系方式。

666

效果图还是很详细的

666666

那只能说flexlite的强大了呀！可惜现在这个库已经绝迹了呀！

不喜欢为了对齐文字中间插全角空格的设计, 看得斗鸡眼.本来阅读顺序就是从左往右, 这样对齐并不会让界面更好看, 反倒会更难找