给您灵感的扁平化UI设计小说征集,精选二零一二
分类:yzc579亚洲城

最近扁平化设计这么流行,你是不是也想设计一个看看?嗯,那么设计之前我建议你看多一点有关Flat UI的设计作品,这样更多容易给自己带来创作灵感,正好今天我们整理了50个漂亮的扁平化设计UI,如果你做APP应用,这些UI设计作品很适合你学习。

自从Windows8的Metro风格出来后,扁平式的设计风开始成为网页设计和UI设计的年度流行设计趋势,但现在我们不称它为Metro风格了,国外设计师都说是Flat Design(即扁平化设计),或者你很讨厌Metro风格,但你不定讨厌Flat Design,它的设计很有特色,那么什么是扁平化设计呢?国外设计师Carrie Cousins在网站上介绍了扁平化的五个特点,下面看看扁平化设计(Flat Design)的五个特点:

回顾2013年,我们发现很多很优秀的UI设计作品,也期待2014年有更多创新的设计诞生!本期设计达人网从Dribbble上总结了2013漂亮细致的UI设计作品,有APP设计、界面设计、网页设计等等,这些设计很多看上去都令人兴奋,细致到位,而且又创新,很适合设计师们学习和参考。

如果你想制作扁平化网页作品,建议你看看《50个漂亮的扁平化网页设计欣赏》一文,这里是国外最新最精品的扁平化网页设计作品收集,非常值得你学习和参考,那么我们一般参考什么呢?和极简主义一样,首先是排版,扁平化设计是很简约的,所以排版很重视,其次是配色的运用,这前我们提及过一篇《扁平化设计的流行配色方案》可参学习下。最后就是看看人家的UI设计、细节等等。

1.拒绝特效

由于设计作品太多,图片已经被压缩,所以大家可以查看这些设计作品的原图,有PNG大图以及GIF动画,很多效果很棒哦!

下面大家一起欣赏给你灵感的扁平化UI设计作品,希望你喜欢,Enjoy!

yzc579亚洲城 1

Weather App Sunny Day S

Filetypes by Murat Mutlu

yzc579亚洲城 2

yzc579亚洲城 3越来越多类似iOS 7的扁平化、半透明、拟实景动态界面。查看原图

yzc579亚洲城 4

yzc579亚洲城 5

Shwoppa – shopping reinvented

Im on flat a diet by Robert van Klinken

扁平化这个词来自于这种设计所使用的样式和形状,它完全属于二次元世界,一个简单的形状加没有景深的平面,不叫扁平化都浪费这个词了。

yzc579亚洲城 6漂亮的半透明Tag、catelog选择查看原图

yzc579亚洲城 7

这个概念最核心的地方就是放弃一切装饰效果,诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落,没有任何羽化、渐变或者阴影。

Music Website

Shtags [GIF] by Vine

这一设计趋势极力避免任何拟物化设计的元素,这导致这一设计风格在其它平台有时候显得突兀,前景图片、按钮、文本和导航栏与背景图片格格不入,各成一派。

yzc579亚洲城 8以后的网站导航设计不一定是横向的了,更多表现为侧边栏。扩展阅读《2014网站导航设计趋势 使用垂直的导航菜单设计》查看原图

yzc579亚洲城 9

那么,扁平化的效果如何呢?

App menu

Line Icons Part by Daniel Fass

因为这种设计有着鲜明的视觉效果,它所使用的元素之间有清晰的层次和布局,这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格,尤其在手机上,因为屏幕的限制,使得这一风格在用户体验上更有优势,更少的按钮和选项使得界面干净整齐,使用起来格外简单。

yzc579亚洲城 10APP也追求简约设计,并重视本色方案查看原图

yzc579亚洲城 11

2.界面元素

UI Kit Metro

Weather Widget by Mike Moloney

yzc579亚洲城 12

yzc579亚洲城 13Windows 8的时尚Metro UI风格,界面简洁,配色清新有活力,很漂亮。查看原图

yzc579亚洲城 14

yzc579亚洲城 15

Green point

Icons by Jee

yzc579亚洲城 16

yzc579亚洲城 17使用统一圆形风格设计,字体、图案以及交互设计动画都是以圆为主,请点击看GIF动画,很不错哦!查看原图

yzc579亚洲城 18

yzc579亚洲城 19

Geo Tagging

Uboodu Process Icons by Rami James

扁平化设计通常采用许多简单的用户界面元素,诸如按钮或者图标之类。设计师们通常坚持使用简单的外形(矩形或者圆形),并且尽量突出外形,这些元素一律为直角(极少的一些为圆角)。

yzc579亚洲城 20

yzc579亚洲城 21

这些用户界面元素方便用户点击,这能极大的减少用户学习新交互方式的成本,因为用户凭经验就能大概知道每个按钮的作用。

一个和地图位置应用界面设计,背景蓝色与白色的配合使得界面看起来很清晰,也很漂亮

Messages by Coleman Tharp

此外,扁平化除了简单的形状之外,还包括大胆的配色。但是需要注意的是,扁平化设计不是说简单的搞些形状和颜色搭配起来就行,它和其他设计风格一样,是由许多的概念与方法组成的,想要学习具体设计方法的朋友可以看看 Designmodo,这里有许多现成的设计实例可以让大家分享:《40 扁平化的APP应用UI和网页设计素材》、《给你灵感的扁平化UI设计作品收集》、《50个漂亮的扁平化网页设计欣赏》、《设计非常细致的扁平化Icon图标-附PSD》。

查看原图

yzc579亚洲城 22

3.优化排版

Slide Concept

yzc579亚洲城 23

yzc579亚洲城 24

yzc579亚洲城 25

带把拟实化滑动交互动画,2013上半年这个很流行被模仿,实际APP上还没看到。

yzc579亚洲城 26

查看原图

由于扁平化设计的使用特别简单的元素,排版就成了很重要的一环,排版好坏直接影响视觉效果,甚至可能间接影响用户体验。

Student Guide

字体是排版中很重要的一部分,和其他元素相辅相成。想想看,一款花体字在扁平化的界面里得有多突兀。上图是一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大分之众多,其中有些字体会在特殊的情景下会有意想不到的效果。但注意,过犹不及,不要使用那些极为生僻的字体,因为保不齐它就把你带进坑里了。

yzc579亚洲城 27设计网页不要总是蓝色啦,这个网站搭配的橙色也是不错的,建议多尝试用不同的配色看看哦。

如何使用字体也是一门学问,要学会让不同的字体表达不同的概念,通过字体告诉用户这某一设计/功能的含义,努力使字体成为你简化设计的有力武器。

查看原图

COVERT INBOX

yzc579亚洲城 28

yzc579亚洲城,请看GIF动画,工具菜单栏固定,内容滑动展示出来,在内容加载的时候,滑出loading动画图标。

查看原图

Digital Menu

yzc579亚洲城 29半透明一直都是很弦很漂亮的界面。查看原图

Augmented Tourist

yzc579亚洲城 30半透明UI设计 高斯模糊的背景,NICE!查看原图

Profile

yzc579亚洲城 31个人简介网页,不用1寸相啦,用实景照片吧。

查看原图

21 Degress

yzc579亚洲城 32简简单单的方块排列,可是排版设计却感觉很美丽、优雅,不是么?查看原图

Pay / Charge

yzc579亚洲城 33

这个APP的交互设计动画真的很棒啊,喜欢!查看原图

Close landing page

yzc579亚洲城 34简约的着陆页,这是close.com的网站首页设计,布局不很错,学习了。查看原图

UI Kit

yzc579亚洲城 35这是一套扁平化的UI KIT素材,有免费版和高级版。查看原图

Music

yzc579亚洲城 36音乐播放组件设计

查看原图

Scavenger Hunt

yzc579亚洲城 37这是2013年流行绿色么,请关注2014年流行设计色:兰花紫

查看原图

Travelling WIP

yzc579亚洲城 38界面排版布局很好,细节表面不错。查看原图

UI Kit Music

yzc579亚洲城 39这是一个适合用于音乐的UI KIT,也是使用透明风格,看起来很美丽。扩展阅读《2013秋季哪些配色不错的UI KIT素材》查看原图

PassPic

yzc579亚洲城 40一个图片展示应用概念设计,交互设计动画很优秀,建议点击进去看GIF动画。查看原图

Profile Sreen

yzc579亚洲城 41无处不在的圆角元素,排版出来的布局可爱漂亮。查看原图

iPhone 6 Infity

yzc579亚洲城 42iPhone 6概念ui设计作品,估计很多Dribbber都看过或模仿过这个作品了。查看原图

Dining time

yzc579亚洲城 43根据不同时间显示不同的食物。GIF动画做得不错。查看原图

Cloud Storage

yzc579亚洲城 44有点像扁平化设计,但看起来却带有3D的感觉。查看原图

Radio Experiments 2

yzc579亚洲城 45半透明出来的效果果然好看。查看原图

Chat App

yzc579亚洲城 46

查看原图

Recipe widget

yzc579亚洲城 47查看原图

Blog/Magazine UI Kit 2

yzc579亚洲城 48查看原图

Trns Widget

yzc579亚洲城 49蓝色也可以这么开卷有益

查看原图

Highlights

yzc579亚洲城 50使用斜切效果UI.查看原图

Weather Dashboard Global Outlook 5

yzc579亚洲城 51一个天气界面面板。查看原图

Bureau Oberhaeuser Homepage Redesign

yzc579亚洲城 52这样的布局网页和APP都很流行,之前设计达人网分享过这类插件可以实现,《有用的jQuery布局插件推荐》。查看原图

Pricing Table

yzc579亚洲城 53扁平化设计的价格表格,很好看吧?查看原图

Menu Concept iOS

yzc579亚洲城 54最后这个使用多边形元素设计,也许会是未来的一个设计趋势。查看原图

总结

这些UI作品真的都很棒,可以看出未来设计对交互十分的重视,你的APP有无有无人,交互很重要哇。还有半透明界面、圆形元素、多边形也慢慢的出现。设计并不容易,必须努力再努力!

好了,无论你是新手还是首席设计师,都可以从中学习一些布局、配色、排版设计、交互动画技巧和灵感等等,对你的设计会有很大帮助!感谢阅读,求分享求关注!

本文由www.yzc579.com发布于yzc579亚洲城,转载请注明出处:给您灵感的扁平化UI设计小说征集,精选二零一二

上一篇:9个深度科学普及精华一定的布署基准分享,博朗 下一篇:没有了
猜你喜欢
热门排行
精彩图文