今天从交互角度给大家讲讲弹框的设计,包括系统提示弹框,操作引导弹框,信息反馈弹框和广告弹框,每一种都总结了4个相关的设计准则,案例丰富,深入浅出,建议阅读。 本来传统意义上的弹框一般有三种: 系统自动弹出的提醒 帮助用户快速的做出选择 对用户的操作给予反馈 但是现在还多了一种,而且很多产品都在用这种弹框方式,因为它很赚钱 — 广告。所以广告类的弹框已经被我列入弹框设计的第四个类别,今天就跟大家具体来说说这四块内容。这篇文章注定篇幅比较长,但绝对是值得你收藏的文章。 在说之前,先来给这几个类别定个清晰的术语: 系统自动弹出的提醒 — 系统提示 帮助用户快速做选择 — 操作引导 对用户的操作给予反馈 — 信息反馈 广告 — 广告弹框 系统提示 其实系统提示这一种弹框,就可以写很长的篇幅,但是为了不把大家越带越深,免得逻辑理不清,所以我说几个相对重要的。 有一种是大家见得最多的,就是评分类弹框。这种自动弹出的提醒,每次都会让我有想卸载App的冲动(就是那种无法克制的冲动,不知道你们懂不懂那种感觉)。
这类弹框,需要遵守的四个设计准则: 1. 不要在用户第一次登录就立马出来。别人都没用你产品,你就要别人评价,是想怎么样? 2. 注意弹框的频率。别一会就弹一会就弹的,弹出鱼尾纹怎么办。 3. 专门定个入口。有些用户确实人品不错,他会在使用之后去给产品评价,所以留个这样的入口,层级可以深一点,让用户自己去操作,会更好。如:
微信直接在页面里留个评价入口。虽然层级深,但是总比一直弹框提醒和干脆取消这种弹框提醒的方式要好得多。要记住,用户想要评价自然会去做,如果不想,你做得多了反而会有负面效果。 4. 老生常谈的四个字:注意美化。想要让自己产品在同行业中脱颖而出,在功能做的较好的前提下,要展示出与众不同的特色。如:
小红书在这方面做得还是很不错的。当然还有很多其他的,我就是正好看到他们家的,大家可以借鉴下。多思考思考,有时候细节真的是可以决定成败的。 再来说说另一类系统提示弹框。就是产品更新之后,进入页面会让用户查看更新详情,也可以点击“知道了”选择不看(也有人会把它设计为引导页,不过这里不对引导页做说明,后期会专门另写一篇文章详说)。如:
同样可以用上面说到的四个点中的几个来设计这类提醒: 1. 注意弹框频率(这类提醒一般只有更新产品之后第一次打开会弹出) 2. 专门定个入口(一般来说在评价的相同层级留个路口,展示新功能详情会更好) 3. 美化(这个就不多说了)。 举了两个例子,用了四个准则来说明这类弹框的设计方法,我把它们称作为系统提示类的弹框设计四大准则。当然还有系统会提醒用户是否接收推送消息等等,这些弹框都是系统提示类弹框,这里就不多说了。只要遵守这四个准则,设计思路都是一样的。 操作引导 什么是操作引导?上个图:
看到这个是不是很疑惑?有人可能会认为这类引导顶多算是弹出层,算不上是框,但只是名词的差异而已。所以这里我把它也归为弹框,其实概念还是一样的,它也是操作引导的一个弹框提醒。 再来看看操作引导的第二种弹框:
有印象么?这类弹框经常会出现在一些用户没有把握的页面,避免用户操作失误。不过目前很多人都觉得这类弹框有利有弊,有的地方出现的不合时宜,打断了用户的使用状态。所以在设计这类弹框时要非常谨慎,得通过多次讨论、研究确认是否有必要出现。 这类弹框,也有四个设计准则: 1. 注意出现的频率。如果是自动弹出做引导,那必须注意频率,它们一般在下载之后第一次打开应用才会出现。 (责任编辑:admin) |