资讯专栏INFORMATION COLUMN

产品的金钥匙:一致性

ernest.wang / 765人阅读

摘要:为什么第一张图片没有出现可口可乐的产品图片产品介绍等信息,但我们还是可以分辨出可口可乐其实这都是因为可口可乐有一套高一致性的系统。

产品一致性主要指产品的设计理念、品牌形象、逻辑结构、操作交互以及视觉形象等设计“基因”能够在设计中较好的保持一致和统一。通过采用用户熟悉的交互模式、视觉元素,使处于不同平台、不同设备的一个产品可以让用户顺利地解决问题。用户在这个过程中根据以往的经验,以他们理解的方式去采取行动。


一致性对于一个平台化的产品来说,主要有三方面作用:


一、提高品牌的识别度 (用户一眼就认出它)

我们先来做一个小测试:


下图是一家著名公司海报的一部分,根据这张图大家可以猜到这是哪家公司吗?




没有错,它就是我们每个人都喝过的可口可乐。



为什么第一张图片没有出现可口可乐的logo、产品图片、产品介绍等信息,但我们还是可以分辨出可口可乐?其实这都是因为可口可乐有一套高一致性的VI系统。一致性的VI可以让用户一眼就分辨出是什么产品,这对产品生命力的延续有着重要的促进作用。


因此在我们的console控制台设计中,也尽可能使用统一的颜色、样式、图形,让用户用着用着就能在不经意间一眼认出我们的产品。





二、降低用户的学习成本 (用户很容易就会使用)

         

对于用户来说,他们更喜欢快速、简单、不太费力的完成预期目标,喜好熟悉的环境、操作,能不动脑就不动脑。



上图展示的是网易云音乐的“新歌榜”和歌单页面,虽然是2个不同的功能页面,但页面在布局结构(如标题,背景插图,歌曲列表)和交互操作(播放歌曲,搜索,分享)等方面都是一致统一的。用户在操作这两个不同页面时可以保持相同的逻辑和体验,大大减少重新学习的成本。


下图是我们控制台三个产品的页面截图,点击红圈中的按钮都是展开其余操作的选择菜单,但是三个操作的命名都不相同:



且不论这三种方案本身是否合理,但在同一个产品中相同的功能场景不应该混用这三种形式,这会增加用户的学习成本与反应时间,不利于达到良好的用户体验效果。


在我们的console控制台设计中,相同的业务场景尽可能使用一致的体验,例如大多产品都会有的付费购买页面:



我们可以看到在这两个页面中,前者配置项较多,而后者仅一个选择项。有人可能会好奇为什么不把后者做成一个简单的弹窗?其实这是因为我们希望用户在用我们的平台购买产品时,始终是他们熟悉的样子,无论选择项有多少,他们都能有个惯性认知:左侧是我要选的配置内容,右侧是我要付钱的计费模块,用户不用考虑太多,所想即所得,这也就是我们上文提到的体验一致性。



三、提升产品开发效率 (设计开发事半功倍)

另外,产品一致性可以提高产品开发的效率,从公司内部角度,主要分为两部分:


从团队内部协作上来说:输出一致性设计规范,可以让设计团队的成员都遵循统一专业的一致性原则,不仅设计输出效率更高,也让产品的一致性更强。同时降低了设计师以个人喜好和经验的标准输出设计物的情况。


从团队间协作上来说:可以帮助业务和研发团队更加清晰的认识和理解用户体验设计,了解设计师在工作中思考的维度和方向,提升双方间的信任感和合作效率。



因此我们前端与用户体验中心打造了U-Design组件规范平台https://udesign.ucloud.cn,帮助设计师与前端同学在设计开发工作中打造一致性的平台化产品,同时提高了协和配合的工作效率。




 总结

通过以上的分析介绍,我们现在也可以了解到一致性对于产品而言,可以提高品牌识别度、降低用户学习成本、提高产品开发效率。设计服务于用户,一致性不是一个原则,而是一种工作方式、设计模式,它将团队的力量拧成一股绳,力往一处使,劲往一处出,为客户打造更满意的产品。




最后

都说设计来源于生活,用户的认知、使用习惯也会根据时代的发展,知识的进步有所发展。守破离,先遵守再破最后建立新的更好的规范。我们的一致性也在不断优化迭代,也希望各位在今后的工作中与我们多多交流,共同促进我们的产品更加U秀!




下期预告:《嗖!搜你所想》——全局搜索重磅升级!



文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/126494.html

相关文章

  • 什么是交互设计?

    导语▼上篇讲到产品的一致性是产品的金钥匙,通过对一致性的设计可以使产品在品牌标识、用户使用和开发效率等方面得到提升。交互设计对于产品有哪些价值呢?本质是站在多维角度挖掘,分析,梳理,提炼用户更深层的需求和痛点,利用交互理论方法,保证产品的设计完整性,产品用户体验的流畅性,产品商业价值的最大化。What|什么是交互设计?我们的日常生活中处处可见交互行为,从使用淘宝购物到扫场所码向防疫人员展示核...

    ernest.wang 评论0 收藏0
  • Redux之旅-1

    摘要:我们约定,内使用一个字符串类型的字段来表示将要执行的动作。多数情况下,会被定义成字符串常量。要进去工厂加工产品,就得带上相应得钥匙,不同的钥匙对应工厂中上不同的生产线里面的函数,从而有不同的产出改变之后的 时间:2016.4.7-17:24作者:三月懒驴入门配置文章:链接 准备 在你的项目下面加入redux / react-redux npm install redux --s...

    hiyang 评论0 收藏0
  • 从濒临解散到浴火重生,OceanBase 这十年经历了什么?

    摘要:相反,它曾无人看好困难重重,整个团队甚至数度濒临解散。从危在旦夕到浴火重生,这十年经历了什么今天,我们一起了解它背后不为人知的故事。在阳振坤看来,如果一件事情几乎所有的人都认为它很重要需要做,这件事情就已经不是创新了。 showImg(https://segmentfault.com/img/remote/1460000019001650); 阿里妹导读:谈及国产自研数据库,就不得不...

    keithxiaoy 评论0 收藏0
  • AI重新定义Web安全

    摘要:在不便中,一直蕴藏着技术革新的机会这时,机器学习来了机器学习是解决安全问题的金钥匙机器学习其实早已到来。正因为安全问题本质是特定领域内的识别问题,所以从理论上讲,机器学习非常适合应用在安全领域,是解决安全问题的金钥匙。 作者简介: showImg(https://segmentfault.com/img/bVXnOA?w=279&h=306); 丛磊 白山合伙人兼工程副总裁。丛磊先生2...

    617035918 评论0 收藏0
  • Electron 打包Mac安装包代码签名问题解决方案

    摘要:最近一直在做应用的打包,集成版本的自动更新时出现了问题。针对上述上打包无法进行正确代码签名的问题,通过设置环境变量和使用进行代码签名可以解决。 最近一直在做electron应用的打包,集成mac版本的自动更新时出现了问题。具体打包流程请参考:Electron 桌面应用打包(npm run build)简述(windows + mac)Electron应用集成自动更新功能可参考:Elec...

    taoszu 评论0 收藏0

发表评论

0条评论

ernest.wang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<