#交互设计二三事——框架图产出的背后（以拉勾网为例

新版

旧版

本文将要以拉勾网的新旧两版公司首页的产品设计来尝试探讨页面设计框架图产出背后的一些考量因素，以及这些因素如何直观的影响到页面的功能和布局。本文并没有任何意图希望批评或是赞许该产品经理，同时也因为本人对于其内部运作模式（特别是收入来源和业务拓展目标等）并没有深入了解，所以也仅仅提出某些可能需要思考的角度和某些细节的可能性而非一套完整的解决方案。

（吐槽，很多面试题都很喜欢考这种假如让你重新设计XXX，这种题目注定只能给出个大体正确的方案。因为好的方案都是紧密结合具体业务，需要了解背后的相关陷阱和模式的，要是如此容易推断出这些东西，该去炒股而非做设计师。

#预期

要讨论这个两个设计之前，我必须指出，我并不知道拉勾网本身对于新版本的期许所在。或许只是为部分企业提供更好的可能性，或许这只是ab测试当中的其中一个版本（测试下新的企业信息页面中用户和企业的关系如何改变？），或许产品经理、设计和研发啊的投入都有限，只是把这个版本作为实验性的版本甚至是一个过渡版本3个月就扔掉。当然，对于设计师和产品经理，可能也有一点更高的追求——对于服务企业和求职者，带来更顺畅体验的满足感。

#差异的背后——对用户需求的预设

似乎两张图的上所蕴含的元素基本相同，但是左图更强调可以申请的职位，而右边的图更加强调公司的状况（发展历程、工作环境图，地理位置）甚至是新功能——评论。从这些基本功能的变化，我们就可以看出（或者这种差异变化应该展现了）两个版面对于用户需求的不同把握。

我更愿意把拉勾这种模式理解为一种特殊的电商平台，只不过承载的内容是职位而不是普通的商品。版面的以及重点功能的变化可能意味着用户进入页面的方式以及后续的行为变化甚至是bounce rate方面的变化？而且这种版面的变化也会让我脑补拉勾网对于定位的变化（希望通过社会化求职、强化招聘者的反馈？希望更倾向于那些有漂亮profile和数据的公司？现在这个年代公司所在的具体位置很影响求职者的选择？现在找工作都希望分享到社交网站了？）

同时这种变化背后也应该体现产品对用户引导的变化，过往keyword还有招聘职位很重要，现在变成了公司的各种硬件更重要。似乎意味着求职者变得更加挑剔（低端的求职者是没有太多资本挑剔公司条件的，供需关系决定的），招工难更明显，而且前置的页面和流量图表示了用户来到这个页面之前就已经大概知道这个公司的职位以及大体招聘要求了？

如果要更加深入思考，那么我可能会从中推测商家付费模式和原因的改变，甚至是平台的玩法（某种均衡和临界值？）的变化。（抱歉我是用淘宝和天猫这种模式来脑补平台、求职者，企业的关系的）或许现在需要提高的是求职者和企业之间更好的匹配，更希望不仅仅是做大盘子？希望更偏向那些有着优秀硬件条件的企业？（因为很多企业的发展历程工资待遇办公环境都不怎么样，恰恰他们最需要依赖招聘网站。）同时，如果是作为竞品研究，我甚至希望八卦下融资方面的状况和出资方方面的一些动向。（ 因为毕竟还没上市也不是大公司，如果大公司可能则有部门利益竞争这类八卦）因为在这个神奇的国度，因为投资方而非产品本身对产品进行设计以求赶紧提高估值赶紧变现等等折腾出一些奇怪的设计是常见的事情。

既然拉勾网上都是各种各异的内容，那么就存在者生产者和消费者。在这里有好几重的生产者，hr或是企业的其他人员负责填写上传的内容，以及普通求职者提供的反馈。消费者一部分是求职者（他们阅读企业信息和评论）也有企业（他们多了一个侧面了解求职者对于hr和招聘流程的反馈）。

既然有评论和内容生产，相信某些本来就口碑不好或者有特殊取向（或是招聘上某些环节处理不当）的公司会很讨厌这样的环节。同时内容的生产和运营也是个坑，除了国情带来的审查，内容积淀和运营都极为需要时间和耐心和靠谱的人（这都代表钱！）我有时候觉得在拉勾这种地方的评论处理和设计太考技巧了，因为就如淘宝低端女装的评论一样，很容易因为受众本身的属性而给个差评（模特拍照好漂亮穿上身就糟糕了vs这公司拒绝了我！）

在新旧两个版本当中，我都没有看见拉勾网的一些针对这个页面的运营行为。比如提供多种不同的模板，以及设计上容许不同板块的自由组合和删减。我也没有看见针对不同求职者需求的优化，比如提供职位搜索等功能，求职者也似乎无法查看更多详细情况？求职者似乎需求比较单一？（因为版面很长所以他们要一一读下去，快速跳转不太容易）

#对于流程的把握

在这个版面，我们能很清晰的发现这里有两种流程——企业填写的流程，求职者阅读的流程。对于前者，需要把握的是，如何方便的满足企业各种奇怪的需求以及尽可能方便hr填写内容（填写些比较容易获得的信息，尽可能辅助hr的填写，以便更好产出有意义的内容）。对于后者，可能就要考量求职者分化的信息需求（从信息的不同分类方式，数据和企业的tag是不是应该归类在一起，到页面版式（不同主次关系带来的页面空间分布关系）），以及去拉勾网求职的受众的特点。对于交互设计师而言，前者更强调考验的是对于信息的展示内容理解（企业本身能否产出平台需要的信息）和表单填写处理的理解（交互设计师的基本功了），后者更多考验对于满足求职者需求的权衡（有没有一个主要流程，主要流程占据多少的有效流量，）以及对于信息展示的形式理解（是否要使用更多面板，增加点击减少页面长度？）

在这里，我也要同样强调关于求职者阅读和理解信息的流程控制，比如使用图片（从顶端的icon到公司产品的截图，到企业办公环境展示）这种非常吸引住注意力的方式，可能会让求职者更加忽略右边的tag和公司创始人等等信息之间。同时我也发现新版的信息展示似乎改变了原有的逻辑，产品信息被特别强调了而且和公司发展状况没有逻辑关联关系。我个人的常识总觉得新版对于信息的分类稍微凌乱，很多应该整合到一起的信息都放置在不同的位置而且重要程度不同。这些信息的分类方式可能会影响求职者的认知方式和理解过程（脑洞，我真的想起了那种偏向于买脸的产品，比如租房or买衣服，采用这种展示方式可能会引导用户让他们更加感性？）

至于具体采取的是扁平化程度如何的设计风格，以及每个模块的具体大小，这些直观的体验本文并不希望过度细致讨论。（比如用色块还是卡片还是用线段区分模块，用怎么样的tag样式）甚至版面大小和长度，是否像电商都是幌子，关键的核心是展现形式能够良好的为产品形态所服务。

#纠结点（随机脑洞

本处列举一些作为交互设计师的烦恼，由此提供更多关于这个产品设计上的考量以及设计得好多么不易的说明(因为好些朋友和同事并不太理解好的设计背后的工作量）

评论模块好难处理诶，天生的硬伤让我怎么样展现形式都不方便。

似乎这样的页面对于那些比较依赖招聘网站的公司不太有利诶

（关于逆向筛选和柠檬市场的脑洞泛滥ing

或许要给HR也提供反馈招聘者评论的渠道，天哪评论区域会变成要预留很多空间的功能？

点击求职者的头像要不要进入他的主页（突然想起了qq空间

要不要考虑压缩下阅读区域以及顺便考虑移动端上的状况呢。

这类关于填写过程有不少内容呢，而且信息空缺问题可能需要细致考量下。

似乎每个功能都有多种拓展可能呢，比如办公环境扩展成相册，比如提供多种模板等等

地图功能有没有必要提供更多信息呢——距离您所在位置5km、地铁站出来走100米？

视觉重点怎么样控制比较好呢，以后会不会有针对特殊企业、特殊招聘季节的专门版式？

好像头顶那个方块很大而且企业不容易上传个好看的合适icon呢

#可能的改善路径——泛泛而谈（注意 本处不会重复上一篇讨论过的经验

上面提及很多和拉勾网商业运营相关的内容，首先就是这些内容必须要有适合渠道尽早清晰的传递给每一个人。或许好的流程（开会方式，风格，邮件抄送体系，文档的准备能减少信息的损耗）

寻找正确的竟品，参照竞品很有必要也难以避免。但是如果自身眼光不够，可能只能沦为全面抄袭。

设计者最好尝试好几个不同版本的草稿（从纸面上的版本超过10个都正常，所以绝对绝对不要一开始就折腾高保真！），最后比较像样的版本可能也要拿出两三个。（在我厂，脑洞稿以及满足不同考虑的稿可能有很多（那些产出8个就哭的人到我们这类会直接杀人吧），根据产品经理需求陈述明确程度，设计leader本身的追求，研发和运营的独特审美而定。。。

及时记录最后几个版本的思考过程和取舍关系，这些对于最终讨论决策的时候拿出来作为设计的依据很重要。因为我发现很多人（产品，研发，运营）容易提出某些随便说说的方案，必要的整理好自己事先的尝试和研究成果有助于让他们不要走回头路。