您好! 请登录 注册

华为云  ▏联系我们  ▏全国服务热线:0592-3278915

学习移动UI设计的三个UI设计案例赏析

关注:673 发表时间:2018-07-08 17:53:11

我们都知道,UI设计师更多会考虑用户习惯和易用体验方面的设计,而平面设计师专注于更具吸引力的信息传达和视觉效果。

随着移动APP的发展,作为一名合格的APP UI设计师,必须拥有这两种职业的设计思维。善于把文字、表格、图形、图片等进行合理的排列调整,在移动设备上有效传达信息,并达到美观的视觉效果。


今天我们跟大家通过下面三个具体的移动APP设计案例来跟大家学习下相关的UI设计原则是如何应用到实际设计案例当中的。

 

APP UI设计案例一:手Q公众号图文消息优化

先看APP UI效果图吧!

优化UI页面信息的首要任务是判断信息优先级,分清重要信息与次要信息,删除无用信息。化繁为简,降低视觉干扰。

不知道大家有没有发现线上旧的图文消息边距较为肥厚,在大图+1小图的情况下由于代码的模块化拼接,始终无法达到完美的像素间距。

在考虑多种纯文字、单图、多图文模版拼接后,尽量减少间距规则和字号种类,达到拼接模版的统一规则。保证一致性为前提,也提供灵活拼接的多样性。


大图+1的情况下,定义1条小图的上下间距相等等于一个单位,而不是单个模块中小图距离上方的1/2单位,在+n小图的时候使得两个小图之间的间距相加后等于一个单位(见上图)。这个小小的视觉细节在和技术同学耐心联调后是可以完美实现的。

以上这个案例就是我们最常见的一个APP界面的UI 效果优化。希望大家可以学习到一些基础的设计知识。

 

 

APP UI设计案例二:国外电台app概念设计稿重构

大家一定记住:好的UI设计可以让软件变得有个性和品位,同时操作上是简单舒适的。

如下图的电台APP的优化:

这是一个最常见的APP分享界面。

分享功能支持获取歌词并同时拉取专辑封面配图,允许用户上传照片、写下当时的心情或是用语音表达。最初设计时的界面交互框架(左图)默认功能在“写下心情”,“加图片”和“录语音”的功能重要性并列,感受上是个功能强大的分享界面,告诉用户你有三种选择配心情内容的方式。

讨论后优化框架(右上图),默认拉取专辑封面图,支持上传图片入口置于右上角,默认歌词展示在封面图上可点击编辑,整个页面可视化了最终分享出去的样式,所见即所得。

设计优化后,让整个操作有了重点。可以直接在分享预览图上操作,缩短了分享路径,最重要带给用户轻量化的操作感受。

 

这样遵循的移动APP设计的原则,尽量让用户操作的轻量化。让整体UI界面更为优雅。

APP UI设计案例三:国外视频APP的频道关注界面

打破常规的设计思维,借鉴平面设计当中的一些技巧,也可以让我们 的APP界面效果很有逼格和品位。同时给人眼前一亮的感觉! 也会让你骄傲的一项设计技巧。

比如这款APP的关注按钮的设计。

通常我们关注一个账号、小站的通常app的做法是:头像加关注按钮。

而上图案例的  V 的频道界面中,点击头像即关注,按下后头像成为星形遮罩,表示已关注,再点击换一下还原。这样的点击操作反馈超乎预期又在情理之中。

让整个APP界面变成了非常有吸引力的点击。

 以上三个小小的APP UI设计案例赏析,教会大家如何去运用设计原则来设计。同时要想

提升平面设计基础能力,在生活中有意识的观察设计、思考分析、养成视觉洁癖。

非常适合UI设计新手来阅读和学习。

7X24小时服务热线:0592-3278915

福建省厦门市集美区海凤路105号顶斌大厦1706室

 ©2016-2019 厦门米铺网络科技有限公司 版权所有

ICP备案号: 闽ICP备16016818号-1 

闽公网安备 35020602001269号

注册华为云  尊享折扣优惠

热线电话
0592-3278915
上班时间
周一到周六
二维码