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

Author:厦门米铺网络科技有限公司 Click: Time: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设计新手来阅读和学习。

学习移动UI设计的三个UI设计案例赏析
我们都知道,UI设计师更多会考虑用户习惯和易用体验方面的设计,而平面设计师专注于更具吸引力的信息传达和视觉效果。随着移动APP的发展,作为一名合格的APP UI设计师,必须拥有这两种职业的设计思维。善于把文字、表格、图形、图片等进行合理的排列调整,在移动设备上有效传达信息,并达到美观的视觉效果。
Long by picture save/share
文章推荐

咨询电话:0592-3278915

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

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

ICP备案号: 闽ICP备16016818号 

闽公网安备 35020602001269号

Add WeChat friend to learn more about the product
Use Enterprise WeChat
"Scan" to join the group chat
Copy success!
Add WeChat friend to learn more about the product
I see.