美文网首页移动设计
【更美的设计】优秀APP界面赏析

【更美的设计】优秀APP界面赏析

作者: 青釉Alice | 来源:发表于2017-09-24 21:23 被阅读328次

一。【友好】 情感化设计、更好的引导

选取例子:APP:Sleeptown 睡眠小镇

赏析:

这个APP是一个睡眠APP,设计重点是培养用户的健康睡眠习惯。但是用了一个非常有意思的方式:即按时上床睡觉、按时起床可以奖励一栋随机建筑,而如果没有做到,则会毁坏一栋建筑。利用了人们好奇下一栋建筑会是什么样、以及不希望看见好不容易攒到的建筑被摧毁的心理,帮助用户养成按时起床和睡觉的习惯。

尽管按时睡觉、起床这样的功能其实非常简单,可以把软件往简化了去设计。就像ios自带的就寝应用一样。但是对于拖延症患者,其实并没有什么用。大家缺的不是提醒,而是某种可以帮助他们控制自己的方式。

这样做,利用情感化设计,帮助人们更有乐趣地完成睡觉和起床这件事情。就正如之前风靡一时的forest应用(对,两个APP是同一家公司的!)一样,利用专注时长可以种树、让其成长一样。都是给予人们某种奖励,以鼓励、引导用户坚持下去。

↓下方是app引导页截图。

引导页1 引导页2 引导页3 引导页4

↓下方是进入软件后的新手指导中的几页,这一个功能最有意思,所以截屏下来了。

新手指南页 新手指南页 新手指南页

↓下图是软件使用的界面。

软件界面






二。【友好】有趣的等待

选取例子:APP:网易严选

赏析:

下拉加载小动画,严选并没有多卖萌,而是抛出了印在大家深深的脑海里的那句slogan:“好的生活,没那么贵”。不仅缓解了等待的焦躁,也让用户在一次次下拉刷新中,不知不觉就记住了这句slogan。让品牌形象深入人心,这招厉害!


严选下拉






三。【色彩】

选取案例:APP:Inks

赏析:

这是一款游戏,来自于出过Lumino City的公司。icon如下,可见是将一个玻璃球儿做得晶莹剔透又色彩斑斓。非常美。

Inks icon图标

当然了,游戏APP自然多数是应当多彩的,为什么我挑选它来说呢?因为它的玩点就是在于色彩。

游戏本身非常简单,其实就是我们从小玩到大的桌面弹球游戏,下方是游戏截图:

Inks游戏界面 Inks游戏界面 Inks游戏界面 Inks游戏界面

这个游戏中,玩家要完成的任务,就是将应当溅上颜色的部分溅上彩墨。

录屏如下(中间我不知道怎么操作,手指乱点的部分你们看到的就是没有动静的……所以请稍稍耐心等待一会会,还可以顺便想象一下我当时懵逼的表情(๑•́ ∀ •̀๑))


inks录屏

可以说这完全是玩色彩了。这个游戏就是利用美妙的色彩和音乐来使人沉浸和放松。通过这个游戏也可以看出,确实美好的色彩,对人的心理和情绪是有积极作用的。





四。【简洁】做减法,留白

选取案例:APP:幕布

赏析:

这是一款兼记事加脑图功能的APP。用过最好用的一款。

 不知道你们是否有这样的体会。很多脑图软件,一进去就要你选择脑图的结构图类型:比如树状图、鱼骨图等等,选择以后,还要你选择视觉风格,当然都是挺好看的,但是往往等左挑右选完了以后,灵感已经悄然飞走了……即使还记得,也是又要重新梳理,去找寻思绪。

而这个APP就不会。一上来,非常简洁的空白画面。如下图↓

幕布首页

点击右下角加号,出现界面如下图↓

幕布 点击+号后新建菜单 选择新建文档后,进入文档编写画面

注意下图中的键盘上方一排工具栏↓,非常的简洁,但个个好用,没有冗余的功能分散人的注意力。对于内容级别的调整也是非常的顺手,只需要点第一个(降低级别),第二个(提高级别)即可,可以说通篇思路记录下来的体验非常顺畅,没有阻碍思维或者分散注意力的点。另外注意下图界面的右上角,那个分支图的icon,这是脑图功能,可以将编写的文档按照层次自动转化为脑图来展示,非常省时省力又简单明了。下方会有测试文档转脑图的展示图。

测试文档 随便写的测试文档ψ(`∇´)ψ 随便写的测试文档ψ(`∇´)ψ 横屏竖屏均可,此为横屏后截屏给你们展示的脑图。层次分明。 点击右下角魔棒工具可选样式。

把这个作为简洁类案例的代表来赏析,它当之无愧!一个没有其他元素打扰的APP,利用留白、做减法,专注于自己的核心功能,并将核心功能做到了极致。你,值得拥有。(我已然成了自来水)

四。【比例】黄金比例(以及简洁)

选取例子:APP:Bose Connect

赏析:

很巧,我自己用的bose耳机有一个APP,专门用于连接耳机,以及升级耳机程序。

它以前的icon是一个空心的C字,表示connect。而最近一看,发现变成了一个+号。如下图

Bose Connect icon图标

我初一看时觉得,咦,这么简单?而且为什么不居中?然而脑补了一下如果居中的话是什么效果,想了想就觉得,真傻…

初看这么个光秃秃的+号感觉非常不适应,但是没过多久就觉得,嗯,心理很轻松,然后再过了一阵,就莫名觉得大面积留白和极简符号十分有逼格!

为什么这么神奇?拿了两个黄金螺旋比划比划,如下图:

一横一竖两个黄金螺旋,比较+号的横竖位置

实际上,并不算是严格的黄金比例。比起ios自己的健康图标而言,只能算做粗略的符合黄金比例。

然而我尝试按照黄金螺旋的位置调整了一下+号位置 如下图

重新调整后的 重新调整后的

你们觉得有什么区别吗?似乎也和黄金螺旋对齐之后的没有什么区别。毕竟只有几个像素的差别而已。

这让我想起了,最初的苹果标志,是由Rob Janoff 手绘的,如下图

Rob Janoff 手绘的苹果图标

而现在的苹果公司图标早已经过数学调整,更符合黄金比例,但稍有偏差,却是有意为之。

关于黄金比例,我的研究还有很长的路要走……

但能够肯定的是,越是简单的设计,越注意这种细节。我们在日后的设计中可以多加借鉴。

相关文章

  • 【更美的设计】优秀APP界面赏析

    一。【友好】 情感化设计、更好的引导 选取例子:APP:Sleeptown 睡眠小镇 赏析: 这个APP是一个睡眠...

  • 音乐类型App界面赏析(随笔)

    音乐app界面赏析模块 本次针对主流的音乐app界面登录,首页进行赏析,主要包括以下App:QQ音乐,酷狗音乐,虾...

  • APP界面设计改造案例

    米醋MICU老王通过一个个真实的app设计案例改造全过程来教大家把app界面设计的更精致,更友好。 APP界面设计...

  • 墨刀

    下载墨刀后,对APP的界面设计有了初步的认识,设计一个好的APP不止需要优秀的代码还需要漂亮的界面,Android...

  • 优秀APP 界面的设计原则

    一个产品的UI界面代表着该产品的气质和品位,就像商品的包装,包装的好坏在一定程度上影响着商品的销量。俗话说,人靠衣...

  • APP界面布局小技巧,会更美观 哟

    APP界面布局设计是APP设计中非常重要的一环,合理的运用APP界面布局会让APP的界面显得很清晰美观。那么常见的...

  • 最右APP界面赏析

    在一个订阅号里看到有人推荐,加之很久没好好的看过一款APP了,所以下载下来,把界面过了一遍,针对里面几个小细节,分...

  • iOS13 使用Reveal查看任意AppUI

    Reveal 是一款调试ios程序UI界面的神器,可以查看任意App,在遇到设计比较精美的app但不知怎么实现时,...

  • 我用3×3矩阵,来概括移动App导航

    App导航,是应用的信息结构在用户界面上的展现方式优秀的App导航设计,能够充分运用“组织、隐藏、转移、删除”交互...

  • iOS APP设计尺寸规范大全,APP界面设计新手教程【官方版】

    APP设计尺寸规范大全,APP界面设计新手教程【官方版】 – 25学堂

网友评论

    本文标题:【更美的设计】优秀APP界面赏析

    本文链接:https://www.haomeiwen.com/subject/wmnkextx.html