设计之间：记一次功能模块重设计

2015.01.26

从去年七月开始，在这个项目团队工作，数了数也半年多了。从最开始的四人小团队，到现在的十多号人。小团队的版本迭代比较快，一个功能还没上线下一个需求就已经给出，有时候甚至同时要兼顾几个平台、几个功能模块的设计，总是在匆忙中完成工作内容，没有时间停下来好好总结。这次的刷真题模块的 Redesign，在一个相对不那么急迫的情况下进行；功能还在工程师开发过程中未上线，但我的工作也已经拉了很远。趁着还没忘记，写下这篇文章，当做是对此次改版工作的总结与梳理。

现状分析

目前应聘宝 1.6.0 版本的「刷真题」以九个类别为入口，以套题的方式来「刷」题。也就是说，题目作为单独的个体都被捆绑在一套真题试卷中，然而随着内容的丰富，这一设计存在几个问题：

某一类别岗位的试卷积累多后，用户无法从套题列表分辨相似笔面试试卷，难以区分哪些题目是对自己有意义的。
忽略了题目作为主角的重要性。好题目坏题目都混杂在不同的套题中，不利于优质真题的曝光。

其实早在去年十月份的时候就进行过一次真题模块的改版。最初的设计是以公司为分类，罗列每个公司的笔面试题；后来通过一次改版把公司作为套题的附属信息展示，以套题为主，算是对曝光题目走出的第一步。但随着内容的积累，套题的增加使得其也不再具有良好的区别性，于是此次改版主要针对这个问题，进一步作出改变。

改版目的和解决思路

为了解决现有的真题模块中，题目作为模块主角曝光率低下的问题，把题目抽出来作为真题模块的直接入口，打造互联网求职版类「知乎」。
带动、鼓励用户对真题进行讨论辨析，而非给出「标准答案」，以点赞和积分制度激励。
引入导师光环效应，与「约导师」模块打通，让导师们带动用户去针对真题探讨。

需求和交互思考

最初产品同学给了一份他思考的交互图，大家讨论之后还是有一些不太能确定下来的地方。真题的形态，和知乎有一些相似点，于是我们参考了一些知乎的题目内容的交互操作，如点赞机制和分享回答等，也希望打造一个相对高质量的题目讨论社区。

在团队里大家合作的氛围还是比较轻松的，作为设计师也并没有受到太大的约束和限制，每个人都有平等的话语权。拿到交互图后，自己也慢慢梳理思路，去拷问每一个交互和操作是否合乎逻辑和习惯，揣测用户会怎么做等等。想的时候也随手画了一些草稿，灵感或疑问，我习惯都用本子和笔记录下来，是对自己思考的线索追踪。

界面设计

设计工具的选择

这次的改版也算是第一次从 PS 到 Sketch 的设计工具迁移。Sketch 问世后得到很多 UI 设计师的青睐，大家都极力推崇这个由小团队开发出来的便捷轻巧的设计工具。相较于 PS 事无巨细的功能堆叠和庞大的文件体积，Sketch 专注互联网时代的界面设计，去除冗余，对于 UI 设计来说更纯粹好用。更重要的，Sketch 不仅仅是一个工具那么简单，可以看出来它正在构建属于自己的生态圈，各种论坛资源，以及和 iOS 平台开发的无缝对接。后面有空也会专门写一篇关于 Sketch 的使用心得。

这次重设计也是在 1.6 版本之后，首次尝试 Material Design 的设计元素。另外，第一次将 UI 与简单交互说明结合起来，使用 Sketch notebook 插件来进行简要标注说明。在高保真 UI 设计图上标出简单交互，在交付工程师实现的时候，工程师就不需要「基本靠猜」或者去反复查看产品的交互线稿说明图，对整个功能的流程和走向会有一个比较清晰的认识。

设计初稿

第一稿，融入了一些个人的思考。借鉴了知乎日报的做法：考虑将对一道题目的讨论分为两个部分，一部分是深度的探讨，即优质解答，为主要展示对象；另一部分作为短评考虑弱化，以时间顺序，最新在前列出所有讨论。这样做的目的是为了激励用户去写深度的思考而非形成一个三言两语闲聊的社区氛围。讨论区如果有导师参与讨论，会优先展示，「名人效应」去吸引普通用户参与讨论；同时也是为了与约导师模块无缝对接。

经过讨论后，这一版初稿存在一些构思上的问题：

产品同学提出：由于产品本身处于初期启动，用户参与讨论的积极性本来就不高，最新解答默认收起、设置了「优质」解答讨论才会被首屏展示的门槛，可能会让用户更不愿意参与进来，因此需要再斟酌。
对导师的讨论 feed 的思考不够成熟，留头衔去掉发布时间的展示形式不可取，会给用户造成困惑：误以为导师的回答才是正确答案，从而不明白真题板块的意义，即在讨论中得真知，与该板块重设计的初衷相违背。
用户回复或添加一条讨论时，需要在一个新的页面中编辑文字，但无法看到题干原文或被回复对象写的内容，体验比较差，这是自己没有考虑周全的地方。

设计二稿

针对存在问题，进行了第二稿的设计。主要改动是：讨论区依然分为两部分，但都默认展开全部显示；撰写答案页增加回复对象的原文；完善了撰写答案页的分享功能；评论区 feed 交互形式的调整；增加了题目的来源信息。

设计三稿

或许产品的设计就是在不断的迭代中用最简办法来获取问题最优解。从技术实现的复杂程度、产品等综合因素的考量，最后我们决定暂且将讨论区不进行分割，使用点赞数排序，消除门槛，以技术实现难度相对较低、又不弱化讨论区功能性的方式来引导用户参与讨论。对于 feed 的展示也进行了最终的统一，导师的「独特性」采用了另一种更为温和的方式，即小徽章加首次引导说明的形式。另外，确定了真题板块讨论区的定位，文案部分都有了相应的调整，如「撰写答案」改为「添加一条讨论」等等细节修改。

虽说是此次改版的最后确定稿，却还是在命名时采用了第三稿的设计稿版本号而非最终稿；这也是给自己的一个心理暗示吧：永远不给自己的设计稿打上 final 的标记。因为我始终相信，在悠长的时间线上，任何设计都有变得更好的可能性。

设计稿切图标注

Sketch 的自带切片工具比 PS 的个人感觉更好用，而且能够自动生成不同分辨率尺寸的几套图标，切图工作比以前高效很多。在模块设计稿里新建一个画板，直接把 icon 拖到画板上调整后作为最终的输出切图，一目了然，也方便日后的组织与修改。

《设计之下》中有这么一段话：

不要把与你合作的工程师都想成和你一样有审美眼光的人…那设计师怎么来保证最终实现的和你的效果图基本一致呢？主要有两点，一是切图标注的时候尽量做到仔细，二是后期跟进的时候做到尽心尽力。

这话很现实。标注设计稿是个细活儿，琐碎而繁多；然而，标注的详细程度也直接影响到工程师是否能最大还原设计稿。因此，为了自己的设计能够尽可能完美地传达给用户，认真标注加后期跟进一定要做到位。（这次改版设计也是我标注最认真的一次啦）

反思和总结

在小团队里，不可能做到像《设计之下》中概念设计、交互设计、视觉设计那么明确的细分，每个人都是产品的使用者和设计者，但仍会在整个产品设计的流程中去有意识地评估和推敲每一处细节，是否与目的或初衷相符。
细心的人应该能观察到三版设计稿中的无评论占位小沙发都是不一样的；每一次的 update 都是对自己的设计的重新审视。
第一稿是用来修改的，别抗拒，没有人能一次性就做到完美。