那些打动人心的APP设计(3)

这是2017年的第10篇文章。

据说总结出100个打动人心的APP设计点,就能召唤神龙,还没看过前两篇文章的,请补上:《那些打动人心的APP设计(1)》《那些打动人心的APP设计(2)》

设计师必须站在系统层面做思考,满足某一类人的需求并提供解决方案,这需要系统化的交互方法论,包括需求分析、信息架构及流程设计等等。但当设计师专注于宏观思考问题时,往往会忽略设计细节。基于这种情况,Smart Design 的交互设计主管 Dan Saffer提出了“微交互”的概念。为此,他专门写了一本书,书名叫做《微交互》。有兴趣的小伙伴可以看看。

好,我们继续梳理那些打动人心的APP设计,希望对你有帮助。


18.微信读书的查询功能

微信读书是我个人很喜欢并常用的一款阅读类APP,简单的产品架构,优秀的文字排版,以及基于笔记和读后感的社交属性,都是打动我的产品点。其中不乏一些打动人心的微交互,如上篇文章中第15条。而今天讲的是微信的查询功能。

阅读的时候会遇到一些不懂的概念或者不认识的外文,贴心的微信读书不仅提供了词典功能,如果要查询的词字典里没有,还可以直接查询百度百科,简直不要太方便。看书的时候再也不用在阅读软件和浏览器之间来回切换了。

微信读书


19.网易出品必属精品

互联网公司,注重产品体验的,一个是腾讯,另一个则是网易,网上流传这么一句话:网易出品必属精品。最近新上线的网易蜗牛读书APP,又偷偷火了一把。不过今天要讲的是另一个网易出品:有道词典。

常规的APP都将搜索栏放在页面顶部,这样会遇到一个问题,不利于单手操作。有道词典在首页右下角放置了一个搜索icon,让用户在进行翻译任务时,单手操作便可完成。

有道词典


20.撩人的小妖精:小红书

小红书成功了,这是个让无数妹纸种草剁手的地方,小红书为了伺候好这帮小公主,可谓处处用心。光一个点赞,就给做出花来了。

每次点赞,提示的文案都不同,而且每句都让人忍不住再点一次,谁让你不要脸的这么夸我,哈哈。

小红书


21.音乐APP中的文艺青年:网易云音乐

网易用个性化的推荐和丰富的社区内容,在音乐市场杀出了一条血路,让其他老牌音乐APP望尘莫及。除了个性化的推荐、社区,优秀的产品交互也是不可或缺的亮点。

网络不好或断网状态,和网络正常,这两种情况打开APP,默认的标签页是不一样的。断网时会直接前往本地的“我的音乐”,网络正常则是“发现音乐”页。没网的时候发现个毛线音乐,只能是听本地音乐了,这个细节给满分。

网易云音乐


22.再次提名的QQ邮箱

该系列文章第一条夸的就是腾讯出品的邮箱,今天继续夸一夸。查看邮件之后,用户有几条路径:回复邮件,转发邮件,返回邮件列表等。QQ邮箱,在阅读邮件页下滑,便可直接回复邮件,提高了上班族处理邮件的效率。

在页面不需要下拉刷新时,尝试用下拉交互唤起其他功能是个不错的方法。

QQ邮箱


23.启动页面真的可以不用是广告

不知道从什么时候开始,打开每个APP,都要等待3到5秒,默默的被强迫看完广告。嗯,不能忍,各大厂商为了商业利益真是想尽办法。从点击APP启动图标到APP开启并完成数据加载,是需要一个时间过程,通常会用开启图片来展示,以降低用户的等待焦虑,微信的开启图片就是很有名的例子。也有显示广告的做法,还有显示完启动图片再展示广告的,具体是哪家APP我就不说了,大家自行去体会。这些都是平衡商业目标和用户目标最终方案,无可厚非,但仅仅从用户体验的角度出发,会有更好的方案。

Dosnap,中文名:多色,定位于手机摄影的分享平台。开启过程比德芙还要丝滑,完全感觉不到有个启动过程,没有启动动画和广告。这是怎么做到的?其实很简单,当APP首页框架固定时,做一个类似主页的图片作为APP的启动图片,就这么取巧,用户便感觉不到开启过程,体验比起五秒的广告简直好到爆炸。

dosnap多色


24.验证码短信也有大文章

一条验证码短信,有什么可设计的?你错了,站在以用户为中心的视角,什么都可以被设计被改善。用户的浏览习惯是, 从左到右或从上到下,然后找到自己想要的内容便停止浏览。下图左侧直接将公司名和验证码放在文本开头,将说明性的文字放在后面,便于用户更快的找到自己想要的信息。此时你再看看右侧的验证码短信,对比下。

QQ&微信


25.流量很贵,省一点是一点

《人机交互与数据传输:关于数据加载的六种形式》提到智能加载的问题。这一条设计点的原理类似,在知乎的设置中有一栏无图模式:在非WiFi条件下不下载图片,如下图。知乎:我就这么默默的帮你省流量,你会爱上我吗?当然,如果你是土豪,请忽略这个功能。

这条功能设计出发点是帮用户节省流量,从而为用户创造价值,在保证用户顺利完成主任务的前提下,多为用户着想,这很人性化。

知乎


26.用手势代替点击

手势和点击是移动设备中最重要的两种交互方式,恰当的使用两者,在保证操作统一性的前提下给用户带来便利。iOS自带相册,在编辑状态下,用手指在界面滑动,划过之处的照片都会被选中,从而实现批量操作。

iPad中三指上滑唤起多任务页面,五指内缩关闭APP,都是手势操作巧用的例子。

iOS自带相册


27.标签icon不止是标签icon

浏览器作为流量入口,被多家厂商重视,为了获取更多的用户和流量,国内浏览器都在首页放置了新闻资讯模块,猎豹浏览器便是其中之一。猎豹浏览器底部是常规的标签栏,我们都知道标签栏是一种常用的导航形式,点击某个标签icon就会回到该标签页,如果用户正处于当前标签页,点击该icon便无反应。猎豹浏览器就将此充分利用起来,用户在当前标签页点击icon时,一是会回到首屏位置,二是会随机更换8条新闻资讯给你,让你在没感兴趣的新闻资讯下,可以快速换一批内容浏览。

充分的利用每个页面元素,让其承载更多内容,给用户带来惊喜。

猎豹浏览器


28.左右滑动切换歌曲

上面夸完了网易云音乐,再来夸夸QQ音乐,对于音乐类APP,播放器是操作频次很高的部分,所以像QQ、虾米、搜狗等产品都将播放器常驻在界面底部,除了点击能进入播放器页面外,还有播放/暂停,歌曲列表,下一首等功能,但是基本都是回不到上一首的,要回到上一首只能点进播放器页面。

QQ音乐在常驻在底部的播放器,用左划来启动下一首歌,右划来播放上一首。又是一个个活生生巧妙利用手势操作的例子。

QQ音乐


29.沉浸感

沉浸感其实是简约的另一种表达,将用户需要的内容尽情展现,不需要或次要的内容删除或隐藏,好让用户沉浸在当前任务中,阅读APP就是个很好的例子。

在听音乐时,QQ音乐提供了另一种沉浸:在播放了几秒的歌曲后,将进度条、各种操作按钮全都隐藏,只显示歌手写真和歌词。写真都很好看,颜控们请准备舔屏。


QQ音乐


30.更好的锁屏方案

在手机同质化越来越严重的今天,锁屏壁纸几乎成了个性化最后的领地。在手机上放一张符合自己调性的壁纸也能成为一种生活的小确幸。作为处女座的朋友摩羯座,当美美的壁纸被时间、日期等字段遮住时,内心有一万匹草泥马在奔腾。有个APP很好的解决了这个痛点,简直是处女座和强迫症患者的福音。

锁屏


今天介绍了13条打动人心的APP设计细节,希望对你有所帮助。


总结:

Dan Saffer认为交互细节能够使得系统更加人性化,这些细节可能是一个动效、一个提示音、一句文案或是一个简单的手势。如果说在系统层面考虑的是用户的目标和任务,那微交互关注的则是用户完成每个简单任务时的行为。目标、任务、行为,每个维度都应该为目标用户着想,进而打动人心。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,127评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • 日总结20170705 修身:早起晨跑,坚持阅读,在原本定量的基础上增加阅读量,期待有更大的收获 建功:努力付出,...
    隔世的风阅读 126评论 0 0
  • “请原谅……” 他们望向窗外。 望着交织着大海般广袤的稻田。黄色的笔直的牛车路在水的原野上交错纵横。地狱般的酷热纪...
    塔吉尼亚的小马bobo阅读 267评论 0 0
  • 节奏感与动感十足的鼓声有节奏的缓缓震动着耳膜,已然不受控制的拿出了尘封已久的陶笛,本想按老方法吹奏一曲《梁祝》过...
    唯美儿阅读 163评论 0 0