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

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

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

 

扁平化设计原则

 

之前25学堂分享了很多UI设计方面的设计原则:简易性、一致性、用户习惯、人性化等。

比如:

1、APP设计准则回顾:10条有用的用户界面设计原则

2、移动APP设计师进阶之路【二】:设计原则大全

3、移动APP客户端的UI设计原则及UI界面适配步骤

 

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

 

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

先看APP UI效果图吧!

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

073126-16291

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

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

081211-23333

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

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

 

 

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

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

如下图的电台APP的优化:

075810-26981

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

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

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

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

 

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

 

 

 

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

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

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

080007-5760

 

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

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

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

 

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

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

非常适合UI设计新手来阅读和学习。算是2017年新年给大家一个开门红!预祝大家在新的一年里,学习天天向上,薪水节节高!

 

每天更新,
全站高品质素材免费下载!