总结:APP走心设计的小思考

13 评论 36376 浏览 258 收藏 8 分钟

本文主要是总结作者平时观察到的走心设计,来便于以后能有机会应用到实际产品中。

现在应用商店上线的APP越来越趋于一致化,扁平的设计风格让很多APP在去掉Logo后会变得难以区分。今年开始,很多APP都在悄悄改着版,改版后的设计也会有种“心动”的感觉。

今天就总结一下我平时观察到的走心的设计,也便于之后能有机会应用到实际产品中。

一、场景化设计

根据分析用户使用的场景,用视觉的方式模拟类似的效果,这样可以提升用户使用的愉悦感,也可以降低用户的学习成本。常见的有:优惠券、银行卡的卡包、购物清单、卡片集等。

左边的效果就是模仿实际生活中优惠券样式,撕去的动作增加用户使用的趣味性。撕的那么爽,一点也没觉得买买买会“肉疼”。同样,右边的出票样式就像购买就出票,仿佛马上就可以乘车一样。

左边的样式是一些票据的叠加,可以包含二维码或者条形码;右边除了有卡片样式以外,下方添加了盘子的样式,向下拖动的交互有明显的指向性,就像将美食放入盘中一样。

网易考拉黑卡

网易考拉的黑卡设计从之前的大篇幅显示,改为了现在隐藏弹出的动效,这种交互样式就像将卡放入钱包一样。

二、微交互

用细微的交互效果提升应用的趣味性,也是现在很多应用的亮点。

微交互反馈系统状态

输入即展示的交互

反馈操作状态和光标锁定

三、渐变+简单的曲线

去年渐变开始走入大家视野,起初大多使用的是同色系渐变,现在渐变的应用越来越大胆(多为相邻色系渐变)。随着渐变的增多,设计师已经不满足纯渐变的效果,在渐变中添加简单的曲线来丰富层次感,也是一种很不错的体现。

渐变与简单曲线的融合

四、干净的空间感

不是画布大才能有空间感,就像不是字大就一定突出一样,合理的利用间距、对比、颜色及阴影都可以设计出具有空间感的效果。

  • 大投影拉开空间感,利用投影轻重和远近创造多层次空间,用色块或图片制作精致干净的投影;
  • 用间距替换线条,进行简化设计;
  • 用规律性的排版,把握阅读节奏感。

排整齐了就很好看啦

五、AR应用

随着网络越来越好,为了让用户能有更真实的体验,开始出现了3D展示、视频展示和VR展示的样式。(温馨提示:下图不是手机坏了,是真!的!打!码!了)

3D展示/视频展示

VR展示

六、数据可视化设计

做一个小实验,如果你健身完打开应用看到的是这样的界面,请问坚持健身的概率有多大?

反例!反例!反例!

但是如果是下面这种界面,概率又是多大呢?

(图片来自网络)

数据可视化可以有效的减少用户思考时间,还可以精致页面哦。常见的可视化有健身应用、地图、金融应用等。

信息那么多也不会乱

(图片来自网络)

七、适当破坏

适当破坏已有的视觉样式,达到突出和视觉指引的效果。常见的有在链接出添加元素、多个元素连接、元素融合等。

(图片来自网络)

整理了这么多,不难看出,这些走心的设计都是为了增加用户使用的趣味性,从而产生记忆点。所以,如果有更有趣味性的设计,都可以尝试看看效果。

 

作者:王旋子同学

链接:https://www.jianshu.com/p/c11b3ce7bbf0

本文由 @ 王旋子同学 授权发布于人人都是产品经理,未经作者许可,禁止转载

题图来自 Pexels,基于 CC0 协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 诶,交互光靠嘴不行,技术能力不够,产品都不爱设计交互,设计了也做不出来更闹心

    来自辽宁 回复
  2. 很受用,不过需要前端思维

    来自福建 回复
  3. 不错不错,收获很大

    来自上海 回复
  4. 前端出身的产品总监讨好老板指南,顺便增加下前端工作量

    来自北京 回复
  5. 有考虑过交互性能嘛,复杂的交互动效不会对手机性能造成负担嘛?

    来自浙江 回复
    1. 自己家的程序猿:这当然会影响手机性能啊,计算量很大的!别人家的程序猿:开玩笑,3D游戏那么复杂的视觉效果都能跑的杠杠滴,这点动效毫无压力好不好!

      来自广东 回复
  6. 好文,收藏了~

    来自北京 回复
  7. 亲,到底如何设计出富含美感的交互设计?有一个通识的逻辑公式吗?

    来自广东 回复
  8. 赞一个……

    来自山东 回复
  9. 不错的文章,但是我认为最难的不是对比而是创造。

    来自广东 回复
    1. 赞。

      来自北京 回复
  10. 这个好

    回复
  11. 不错不错,收藏了

    来自北京 回复