首页 >产品设计

APP设计:那些打动人心的设计点

2017-03-17 09:34 编辑: suiling 分类:产品设计 来源:公众号UE修养

作者:邹志楠(微信公众号:UE修养

能用、好用、爱用,这三个层次往往被用来形容互联网产品。能用是基础,说明用户可以通过该产品来解决实际问题;好用是每个互联网从业者都在追求的,让用户在使用产品过程中更省心省力,不会出现焦虑或不耐烦;而能做到第三个阶段爱用的公司和产品屈指可数。

在最近使用APP时,我关注了一些打动人心的APP设计,很小的设计点,但是走心。介绍给你,希望对你有所启发。

1. 把发邮件变成一次纸飞机的飞行

QQ邮箱,每次发送邮件时,会在右上角出现一个纸飞机的图标和进度条。把发邮件给的过程暗喻成一次纸飞机的飞行,增添了不少童趣,加上配套的音效。让我每次用QQ邮箱发送邮件时,都多了那么一点期待。

我们看看常规的设计:把发送邮件的等待过程,换成不停转动的小菊花(加载图标),并配上文案:邮件正在发送中,请稍后。这样一对比,是不是觉得qq邮箱的这个小设计更加打动人心?

27.png

QQ邮箱

2. 点击底部标签栏,就可以回到顶部

用iPhone的人都知道,iPhone有个很贴心的功能,即点击通知栏,就可以将页面的内容回到第一屏,我是这个功能的重度用户。但是这里有个痛点,因为通知栏位置太高,单手操作很困难,操作成本偏高。

毒物,一个导购类的APP,产品以内容为主。当用户在首页向下浏览太多屏之后,它的标签栏第一个图标会变成倒三角,文案变成了回顶部,单击后即可回到第一屏。妈妈再也不用担心我点击通知栏回第一屏了。回到首页常用的做法还有在页面右下角出现一个悬浮icon,单击可回顶部。

26.png

毒物APP

3. 为用户下一步操作的做设计

iPhone有个功能是下滑调用全局搜索功能,因为下载的APP太多,所以我经常使用这个功能来搜索定位APP。如下图,当你唤起搜索时,系统会帮你保存上次搜索的内容,并默认全选中。细想一下这个设计真是太贴心了,因为用户启动搜索,存在两种可能:

  • 继续上次的搜索内容;

  • 输入进行新的搜索。

这个设计很好的兼顾了这两种情况。

同样为用户着想的设计还有,当G-sensor开启时,用户旋转手机屏幕会跟着旋转;滴滴打车时,滴滴会为你智能推荐终点位置。这种设计方式是很重要的一条设计原则,我把它称为“智能化”原则,让设计更智能,真正的为用户着想

25.png

iPhone全局搜索

4. 解救强迫症的滑动去除小红点

APP都在用小红点来刺激用户点击,这让很多强迫症患者很苦恼。QQ提供了一种折中方案,依然用小红点提醒有未读消息,但是允许你轻轻一滑去除小红点,再也不用一条一条去打开未读消息列表来清除小红点了。大笑三声:哈哈哈哈~

24.png

QQ

5. 在不打扰用户的前提下,提示用户

手机验证码登录和第三方一键登录,简化了注册登录流程,减低了用户的操作成本。但是新的问题来了,有些APP我是用微信一键登录的、有些是用微博、QQ、豆瓣、等等。怎么办?

有道云笔记,通过悬浮框提示你上次的登录账号,轻松解决了这个问题。

23.png

有道云笔记

6. 将反馈变得有趣

当页面内容加载完后,再上滑也滑不出什么。一般的APP做法是允许用户将页面上滑,松手后页面恢复。

来看看same是怎么做的。same在页面底部设计了一个尖叫鸡,你上滑的越多,鸡尖叫的越大声。仿佛在说,神经病别往上拉了,没内容了。而且线性的图标设计也与same整体视觉风格保持了一致。

22.png

same

7. 用滑动代替点击

给朋友发信息,发现中间少打了个字,常规做法是用手指选中漏打的区域,再打上缺少的字。但是由于手指与屏幕接触区域过大,而且手指会部分挡住文字,所以经常点了好几次都不能点准。这个时候很多人会删掉重新打一行。

搜狗输入法通过左划和右划来移动光标的位置,亲测成功率百分之百。具体做法是,在搜狗输入法界面上,左右滑动,来调节光标的位置。

21.png

搜狗输入法

8. 随机奖励

2016年被称为知识付费元年,得到APP率先一步抢占了用户心智,产品定位为知识服务。用了半年的得到,专栏内容很专业,实实在在的干货。虽然有很多产品设计的细节有待优化,但是随即奖励这个设计真是值得表扬。这其实是借鉴了游戏的做法,因为游戏产品为了抢夺你的注意力,费尽心思,随即奖励就是其中一招。

因为奖励是随即的,用户不知道什么时候会获得奖励,让人有种莫名其妙得了好处的感觉。会加深对产品的影响,并提高好感。

20.png

得到

打造用户喜欢的产品,让产品从能用、好用到爱用,是每个互联网从业者的使命,为你的APP增添一些打动人心的小设计,不失为一个好办法。当然,前提是该设计能为用户带来价值,千万不要为了设计而设计。

如果你也发现了一些打动人心的小设计,欢迎给我留言。说不定会让更多的人看到你的发现。

9. 可以跳页的页面控制器

作为一名交互设计师,手机里不下个几百个APP,怎么好意思出来见人。但这就遇到一个问题:通过一屛屏的滑动,找到目标APP会很费力,所以我都是通过全局搜索来寻找。今天把玩同事的魅族Flyme系统,发现可以通过点击底部页面控制器来实现屏幕跳页,对于APP重度用户来说简直是福音。只可惜iOS不支持该功能。

19.png

Flyme&IOS

10. 这个设计方案可以解决微信的一个痛点

微信推出的公众号让人人都有机会成为自媒体,阅读朋友圈和公号里的文章也成为了一种用户习惯。当你若有所思的读着文章,突然被微信提示音打断,这个时候你要思考一个哲学问题:我是退出阅读去回消息再回来接着读,还是读完再去回复朋友的消息呢?如果是去回复消息再来接着读,会经历返回到公众号列表——返回到信息列表——点击未读消息——完成回复——回到消息列表——回到公众号列表——找到刚才的公众号——点开刚刚的文章;如果你选择读完再去回复,消息万一很紧急怎么办?如果是女朋友发过来的怎么办?不及时回复,你就准备晚上回去跪键盘吧。

来看看same是怎么做的?当好友来消息时,会在页面右上角提示是谁发来的消息,点击后便来到聊天界面——回复完成——点击返回、回到了刚刚浏览的页面,嗯,怎么样?是不是没毛病。

18.png

same

11. 多指操作清除后台运行软件

小美是个互联网小白,一天抱怨说苹果也没有想象的那么好吗,用几天就变慢了。我拿过手机,双击HOME一看,卧槽,后台运行了不下40个APP,姑娘,这、能不影响运行速度吗。一个个滑动清除不是要滑动四十多下,我可受不了,这个时候只要放上三个手指一起向上滑动(也支持双指),便能一次清除三个后台APP,工作量一下少了不少,开心。

这个时候同事小张拿着某品牌Android机走过,冷冷的笑到,真SB,Android只需要一键清除就搞定了?我和小美默默的点头~

16.png

iOS正在运行界面

12. 自动填充网址

当你复制或剪切了某个网址时,打开猎豹浏览器,猎豹会自动识别并将网址放到网址栏,这个时候只需要点前往就能直接搜索,省掉了点击网址栏、长按粘贴的步骤。

17.png

猎豹浏览器

13. 智能选座

目前主流的购买电影票的APP,有猫眼和淘票票,我用的最多的是猫眼,就因为它的这个智能选座的小设计打动了我。只要直接选择界面下方的人数,系统就会自动选中最好的观影位置。情侣看电影要坐小角落的,这个功能当我没说~/羞。

15.png

猫眼A&淘票票

14. 记录用户操作,给予温馨提示

使用36kr阅读文章时,如果遇到文章没读完而不小心退出了APP,不用担心。36kr会记录你上次阅读的文章及阅读的位置,在下次打开APP时会用dialog的形式提示你。

14.png

36kr

15. 将操作区域放在单手热区内

不知道从什么时候起,大家都把乔老爷所说的3.5英寸是手机的最佳尺寸的话抛到脑后,手机变得一个比一个大,在带来更震撼视觉效果的同时,也带来了单手不容易操作的问题。解决这个问题最常用的做法有两个,将操作区域设计在单手操作的热区内;第二个是通过某个快捷操作将整体屏幕向下移动(iOS轻触HOME键)。第一种做法是APP级内的解决方案,第二种则属于操作系统级的解决方案。

13.png

微信读书&得到

微信读书APP便是个好孩子,而得到则没有顾忌到这一点。

16. 智能定位到目标内容

音乐列表里喜欢的歌越来越多,找到正在播放的那首歌的列表页变得困难,QQ音乐则在界面右下角加入定位的小icon,点击后屏幕会滑动到正在播放的歌曲列表。

网站右下角的返回首屏的小icon,和QQ音乐的做法类似。

12.png

QQ音乐

17. 阅读模式,让排版赏心悦目

喜欢苹果产品,是因为苹果的设计处处在为用户着想,用户体验在他们的产品中得到了较为极致的体现。

作为经常使用浏览器查找、阅读资料的我来说,点击iOS的Safari左上角的icon,便能将当前网页的内容,重新排版以便适合阅读,即进入阅读模式。

QQ截图20170317094607.png

Safari

本文讲了17个小的设计点,这些设计都有一个共同点:设计的出发点是用户,遵循的原则是用户体验设计的原则。智能手机经过了十年的发展,产品设计和开发已经趋于统一,这有两个原因,一是近十年的智能手机的交互都是GUI的交互方式(参考文章:《人机交互的前世今生》),二是用户的使用习惯已经成形,大的交互原则不容易发生更改。

这给设计师的工作带来了挑战,同样也带来了机遇,只有心系目标用户,处处为用户着想,以用户体验设计的原则来设计产品方案,产品就能在同质化的今天脱颖而出。

当然,成功的产品除了优秀的用户体验,也离不开公司的战略布局、产品定位、品牌、运营等等,而这一切的基础是产品真正能为用户带来价值。

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:导航栏的平滑显示和隐藏 - 个人页的自我修养(1)
下一篇:搜索结果的最佳实践分享
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部