需要懂的感知设计

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

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

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

  • 产品一(图左):

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

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

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

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

  • 产品二(图中):

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

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

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

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

  • 产品三(图右):

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

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

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

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

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

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

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

  • 界面的差异性

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

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

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

  • 界面的一致性

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

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

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

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

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

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

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

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

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

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

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

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

  • 颜色的引导区分

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

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

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

  • 总结

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

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

原文发布于微信公众号 - Miguel三先生(Miguel-sxs)

原文发表时间:2018-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

3 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

微信公众号页面大改版 / 「弹球王者」涉嫌违规遭下架 / 微信小程序不支持 iOS 「虚拟支付」

1034
来自专栏企鹅号快讯

2017年,Mozilla为Web做了哪些事情?

2017 对于 Mozilla 来说是非常重要的一年。我们发布了历史上最快的 Firefox,重新构建了 DevTools 开发者工具,见证了四个主流浏览器对 ...

1795
来自专栏MixLab科技+设计实验室

全栈设计+编程的方法论,以“猜对联”小程序为例

趁着快过年,花了 2 天晚上从设计到开发,做了一款小程序 “ 猜对联 ” ,可以用于公众号吸粉,也可以朋友间拜年,也可以作为聚会的真心话大冒险游戏,玩法多样,全...

2819
来自专栏非著名程序员

程序员平时该如何学习来提升自己的技术

自从运营了公众号以来,应该说分享了不少的技术干货和人生感悟,也应该帮助了不少程序员和开发者。最近发现了一个问题,就是经常有开发者私聊我说:我遇到了一个什么什么问...

17410
来自专栏java一日一条

为什么我要用C写游戏

我就是这样一个与众不同的老顽固。最近所有由我单独完成的游戏项目完完全全都是用C写的。肯定没人这样干过,所以我觉得这值得我解释下为什么我要这样做。

331
来自专栏BestSDK

一文揭秘,爬虫那些不为人知的套路

1、真实世界的爬虫比例 大家应该听过一句话吧,大概意思是说,整个互联网上大概有50%以上的流量其实是爬虫。第一次听这句话的时候,我还不是很相信,我觉得这个说法实...

3919
来自专栏Java社区

Java SSM快速开发仿慕课网在线教育平台

1843
来自专栏程序人生

软件架构之Indirection

先说两句题外话。最近蹭蹭蹭地长听众,程序君顿感惶恐。我做『程序人生』的一个原则是:一切文章皆原创,只谈开发,产品,创业,管理等和工程师的程序人生相关的内容。 有...

3428
来自专栏IMWeb前端团队

前端进阶之路小思

? 有人说产品开发过程中web前端没有结论,只有随需求不停的修改,但是项目必须要有阶段性的结论,作为一个前端开发,如何避免为了某一个需求而陷入反复更改的困境呢...

19110
来自专栏企鹅号快讯

大数据可视化——这些必须知道的工具!

人们常说,数据是组织的生命线。然而,解析这些数据并有效地使用仍然是一个挑战。 ? 大数据可视化 假设拥有一个巨大的金矿,但不能使用。那么,作为一个金矿的拥有者有...

1798

扫码关注云+社区