需要懂的感知设计

产品经理有一项特别直观的能力就是界面设计。界面设计讲究的原则很多，也很复杂。比如用户下载完成某个APP后，APP的默认首页是什么样子？我们在设计的过程中最希望用户在首页能够看到什么？如何引导用户正确的使用产品，又或者用户是否可以根据首页的排版布局很清晰的了解产品主要特征，这些都是属于界面设计需要思考的问题。

首先我们分析下市场上比较优秀的记账产品首页

我们针对以上三种产品的首页（默认页）展示的要素和重点突出引导用户操作的元素进行对比分析。

• 产品一（图左）：

页面主要字段要素：预算剩余金额、日期、收入金额、支出金额、收支明细列表

页面主要突出按钮：“+”、“预算剩余”

用户引导方面：产品把“预算剩余”金额的比例放到最大，希望用户可以随时看到预算剩余金额，不希望用户消费超出预算；产品把“+”置黑，和其他颜色按钮作出明显对比，希望用户可以点击此按钮，来进行记账

结论：此软件希望用户每笔收支都做记录，并且消费不要超过预算剩余金额，此记账软件关键词：记账、节流。

• 产品二（图中）：

页面主要字段：时间、收入、支出、结余、收支明细列表

页面主要突出按钮：“+”

用户引导方面：产品把“+”放倒最大，希望用户可以随时进行记账，另外将收入、支出、结余三个类型的金额放在顶部，则希望用户可以很直观的看到收支结余信息

结论：此软件希望用户每笔收支都做记录，并且展示收支结余信息在最醒目的地方，提醒用户收支结余的各类金额当前数值，此记账软件关键词：记账、收支结余提醒

• 产品三（图右）：

页面主要字段：本月收入、本月支出、预算、记一笔

页面主要突出按钮：“记一笔”、“本月收入”、“本月支出”

用户引导方面：产品把“记一笔”（即记账）用明显的颜色按钮表现出来，说明此软件的以记账为最主要的功能，另外，月收入和月支出也用了较大的字体来进行展示；预算方面做了选填，可设置可不设置，这就方便了用户做独立思考；另，将账单按照天、周、月等为单位，分别在主列表进行展示，用户一目了然。

结论：此软件希望用户每笔收支都做记录，预算金额设置为选填，可以在首页直接查看天、周、月的收支总额情况

上述三个产品来说，各有千秋，各具特色。但是就账目信息完善度来看，第三个产品更为优秀一些，用户在不用思考，不需要条件筛选的情况下，就可以看到当前各个周期的账目总信息，并且在记账方面入口也是比较明显，更倾向于用户使用的心理预期。

那么我们如何才能做到通过产品的界面设计，使得用户对产品的主功能、特色功能一目了然呢？

这就需要我们知道如何对产品进行用户感知设计理论。

• 界面的差异性

产品经理在设计界面的时候，一定要考虑排版的差异性，排版的差异性需要结合控件的形状、大小、颜色等维度来进行考虑（如图4.1）.，用户如何知道产品的主要功能和主要功能入口？通过设计板块的样式并且将样式的尺寸放大，同时给予不同于主色调的色差来让用户感知——“嗯，这个先点击一下看看”

正如“+”这个按钮一样：首先用户看到+号，会想着点击这个按钮也许会增加一条什么样的信息，再结合产品的类别就是记账产品，那么用户会潜意识觉得“+”这个符号是代表记账的意思，产品经理根本不用在“+”旁边的其他位置备注“记账”的字样，用户就知道这个是干什么的，通过这个按钮可以进入一个大概什么样的页面。

这样的设计就属于页面的差异性的体现形式，给予按钮不同于页面其他版块的颜色、形状、尺寸，来进行差异性设计。

• 界面的一致性

界面的一致性，正如产品的性格，每个产品都会有自己的性格，比如微信。

微信的布局都会保持设计的一致性：

微信的界面会保持完整的一致性，如图，每个页面的每条功能框的布局都是：图片+标题+（副标题）的格式来进行展示，这样用户在切换菜单栏的时候不会出现排版混乱的状态

那么，作为产品经理的我们，在进行设计的时候如何进行一致性的设计呢？

通常进行交互设计的时候我们都会使用Axure，这个软件有个功能叫做“模板”，尤其是很多页面可以复用的情况下，很多产品会将重复次数较多的页面或者背景放到模板中，需要的时候拖动出来直接复用即可。

这个和我们说的一致性是一个道理，比如我们设计后台的时候，可以这样：

这就是我们在设计表单的过程中经常需要用到一些字段展示方式，为了页面保持一致性，为了使用者在使用的过程中不会在视觉上产生混乱，我们完全可以在母版中设计一套自己的风格，并且在每个可重复的页面进行使用，这样不但可以保持一致性，是使用者在使用的过程中有更好的体验，而且还可以减少我们设计UE的时间，提高效率。

• 一致性隐藏的差异性设计

我们之前说过，界面设计的过程中需要在重点需要突出的地方通过差异性设计来引导用户；在产品“性格”上又需要保持一致性，那么，一致性和差异性之间的设计有没有交集呢？答案是有的。

如何在一致性内找出隐藏的差异性呢？

如图，这张图上我们看下，统一的布局格式是：标题+分类+图片，在这样统一的布局下突然出现一个标题为“邀友福利升级，20%加息拿到手软”的图，打破了整体统一布局的图，这张图我们就可以理解为一致性内的差异性，而差异性的表现目的，此图是为了植入广告。也就是说，当我们在统一布局设计中出现差异性的展示时候，一定要明确设计的目的，毕竟出现差异性的设计一定要确保用户能接受，并且将产品的目的委婉的表达出来。

需要多加考虑的是用户看到这样的信息进入会不会有不安感，会不会有抵触感，会不会去按照产品的意愿进入查看这个“不一样”的入口？这些是需要在产品设计的过程中仔细考量的。

• 颜色的引导区分

产品设计中，颜色更亮更醒目用于你希望更多人注意的元素中；而相对主色调较为接近的颜色模块，最好不要用于跳转或者点击，这样会破坏你的颜色搭配，这种色彩的模块通常用户补充说明，或者不是非常重要的文案表达：

我们再看图，图中记账列表中的“还没有记过账”、“04月23日-04月29日”这样的字样用灰色字体展示，这样的颜色相对于页面的主色调来说不是很明显，但是有一定的作用。比如当前周是23日~29日，列表主要记录的重点是本周消费和支出的金额数量，重点时间是本周，而不是本周的哪几天，但是用灰色字体写明日期区间会使用户更清晰本周的哪几天有支出和消费行为。这样体验会更好。

所以我们在设计产品时候，需要考虑的是，当字体颜色做了区分，我们是为了让用户更好的找到入口，突出重点，还是予以提高用户认知体验的目的，明确出发点后，认真考虑产品的颜色的重要性！

• 总结

产品的界面设计其实是对于用户视觉的感知设计，通过模块、字段的形状、尺寸、颜色的区分设计，可以增加产品的友好性，提升用户的体验，使得产品更加有“人缘”

知识总结：界面的差异性和一致性、一致性隐藏的差异性设计、颜色的引导区分