产品设计中的可拓展性原则

可拓展性原则是我自己瞎起的一个名字,高兴的话你说弹性原则也行。主要意思是指 界面设计要足够的灵活,具有弹性,以满足将来可能出现的场景。我第一次考虑这个问题是从去年7月份开始,当时接到领导的一个临时需求,要给直投项目增加一个到期查询的功能。因为原来的界面设计比较死板,所以突然加一个新功能导致整个布局都被打乱了,结果做的很不理想。当时我就希望可以找到一个方法来应对领导这种突如其来的需求。
产品设计的可拓展性就是为了应对将来未知的改变。改变来自于功能的改变,因为产品是由一个个功能组成的。功能的改变可以分为两类: 数量的改变状态的改变。当然这里不涉及到具体的功能设计,只是探讨功能入口的展示。

数量

数量的改变指的是功能的增加删减合并。多数是指新功能的增加,这就要求我们在界面(布局)设计中要给将来可能添加的新功能预留坑位。在哪里预留坑位?又给哪些功能预留呢?这里我就例举最常见的两种界面布局(导航)样式来说:宫格式布局列表式布局

不知道大家有没有注意到一个现象:一级页面中主要用宫格式布局,而二级,三级页面多数用列表式布局。这主要是因为一级页面是产品的门户和脸面,而且又多属于功能的聚合页,特别是首页,这就要求一级页面在展示足够多入口的同时还要兼顾视觉吸引力。而以icon,插画,图像为主要表现形式的宫格式布局在视觉设计上更容易出彩。特别是icon,在相同的空间里,可以展示更多的入口。

但是其缺点就是可拓展性差,不管是2*5还是3*4,你如果想单独新增一个功能,界面就会失衡。当然我们可以给用户提供分页,这就意味着有些功能需要用户滑动才能看到,具有一定的风险。

还有一种方法就是提供全部按钮,用户点击可以查看全部功能。

列表式布局就没有这方面的顾虑,它可以在不打破界面布局的情况下增加新功能入口,但是它的缺点在于可展示的入口太少了。宫格式布局一屏可以展示20多个入口,而列表式布局只能达到其一半的水平。

这也是经常困扰设计师的一个问题,因为数据反馈一个页面超过一屏往下内容的点击量是急剧下滑的,所以一般的一级页面都不会设计的很长。如何在有限的空间里展示足够多的入口呢

没有什么是可以难倒我们设计师的,最近我看到一些产品在底部栏tab里动起了心思。以苏宁易购为例,当你点击进入“发现”,tab会变成“直播大厅”;点击进入“首页”,tab会变成“猜你喜欢”。所以虽然只有5个坑位但是塞进了7个tab,这是一个很好的思路。

还有在京东首页中,用户下拉会进入520专属活动页面。同样的还有微信,用户下拉直接显示你最近打开的小程序。但是目前来说,大多数用户还认为下拉只能刷新界面,对于“下拉发现新功能”足够的缺乏认知。这样的入口可以吸引多少的流量还有待检验。

对于一级页面我还有一个建议:千万不要随意把功能入口放在顶部栏上。因为对于一些小功能的迭代,入口放在哪里都一样,用户看得到很好,看不到也无所谓。但是如果要上线一些层级比较高的功能,又不想打乱界面的原有布局,最好放到顶部栏上。特别是你的界面中如果还没有搜索、城市定位、分享、筛选、通知等全局功能,一定要把顶部栏的位置空出来。文章开头我说的“到期查询”其实就属于筛选功能。

状态

上面也说了,本文所提到的可拓展性指的是入口的可拓展性。那么入口在状态上的变化可以分为外部状态变化内部状态变化

外部状态变化主要说的产品层面的变化,针对的是C端产品。对C端产品来说,定期组织营销活动来拉新肯定是必不可少的。这种情况下我们需要对界面的元素进行处理使其来适应不同的活动氛围。从这个方面来说,我们可以发现为什么宫格式布局更容易受到各大电商平台的青睐。因为它可以根据不同的活动配置一套完全不同的icon,灵活多变。这种状态上的百变来打造营销氛围的能力是列表式布局所不具备的。

列表式布局可以向用户传递更多的信息,更能表现内部状态的变化。以下图为例,用户可以知道自己还有一张优惠券没有使用,知道自己本月还有126元没还。而宫格式布局碍于空间,很难向用户展示过多的信息。

以上方的日历为例,近期做了一个拆红包活动,用以icon为主的宫格布局只能加一个“拆红包”的角标。如果采用了列表式布局,可以直接展示金额,更能起到刺激用户的作用。

写分析总结写到现在读者越来越多,所以愈发担心自己写的不好会误导别人。对于设计来说,无所谓对错,只有合适和不合适。就像上面提到的两种布局方式,在列表式布局中你可以随意添加新功能,但是碍于空间,可添加的功能数目也不会太多;宫格式布局倒是不怕入口放不下,但是会引起界面的失衡。设计师的能力就体现在收集用户数据,分析具体场景,去思考得出最合理布局样式。不要拘泥于解决方案,因为解决方案有很多,我们要学习的是解决方案中所体现的思维方式和过程。

总结

以上就是我针对产品设计中可拓展性原则的一个简单分析总结,欢迎大家留言讨论。

王M争(公众号)

作者:王M争

(0)

相关推荐

  • 重复与突变在产品设计中的应用

    设计中的重复是什么? 在平面设计中,重复构成是常用的一种构成方法,通过重复可以使画面达到和谐.统一的视觉效果,并能加强给人的印象,也可以达到一种有规律的节奏感和形式美感. 排版的四大原则:对比.对齐. ...

  • 动效在日常产品设计中的实际应用

    本文分享作者C端产品设计中总结的动效使用,归纳出比较实用的6点技巧.利用小技巧有效吸引用户注意力,增加点击率,降低运营成本:用最简单的视觉表现方式说明其中的关系,增加产品易用性等. 几年前随着国内移动 ...

  • 分享行业门户网站产品设计应遵循的三个原则

    产品是行业门户网站生存之本,设计行业门户网站皆抛开网站流量等硬指标;既然身为行业门户网站,它一定会有特定的受众群体以及这些受众群体的用户特征和行为习惯,目前国内虽没有门户网站针对自己网站用户受众进行的 ...

  • 产品设计中的游戏化设计策略

    游戏行业是有巨大商业价值的,腾讯在2018年第一季度的财报就公布日赚2.66亿元,年收入破1000亿.一款好的游戏可以让用户持续数小时,数天,甚至数周一遍又一遍地玩同样的游戏.我并不经常玩游戏,但是, ...

  • 如何在产品设计中利用心智模型

    不管是创造新产品还是优化现有产品,产品设计师都应该利用用户对熟悉的产品和界面有一定的理解这一点来进行创作.这样做的好处是产品会有更流畅的交互,更高的使用率和更好的产品可用性.用户应该在在你设计之前就知 ...

  • 产品设计中「引导页」的相关思考

    早些年入行做交互的时候,会对任何类型的页面都做一些分析与总结,旨在提升自己的思考能力吧.所以当然也写过关于引导页的文章,但是比较浅,今天我想更深入的谈谈这个话题. 1. 引导页的类型 引导页定义比较广 ...

  • 产品设计中的破窗理论

    [优秀外文翻译 第40弹] 几年前,我第一次通过Spotify的同事介绍了"破窗理论".这个理论最先说的是,维护城市环境可以防止诸如故意破坏或在公共场合饮酒等小型犯罪,营造良好的秩 ...

  • 网页设计中要遵循哪些原则

    网页设计中要遵循哪些原则呢?怎样才能设计出一个合格的网页.我们知道,设计的个性化表现得非常明显,每个设计师都有着自己的设计理念,而企业也有着自己的需求,因而这两者经常会出现冲突.因此,网页设计中要遵循 ...

  • 设计中如何打造最合适的组件?

    小编:网页.app.平面哪个设计不是由一个个小部件组成?一起跟随来自Tencent CDC的 @erztan去看看他们设计过程中如何通过拆解.改善.分析罗列.重组.判断来获得一个全新的组件的. 在看组 ...