020-28170311 piven@foxmail.com 【广州新际网络科技】网站建设 主营:网站建设 网站设计 网站开发 网站制作

【广州网站设计】Metro(扁平化)风格界面设计案例赏析

2015.01.28 新际网络
在过往的网页设计乃至现今正对移动端产品所做的设计,复杂的的拟物化效果对产品而言未必是一个好的选择。
尤其移动端产品,过于复杂的界面设计极易让用户在视觉上产生疲劳,从而导致对产品交互的基本功能产生认知上的障碍。因此“扁平化”的设计美学顺应时移动互联网的高速发展而传播开。

Metro(扁平化设计)的释义
在项目设计中,“Metro(扁平化设计)”是指摒弃那些流行多年的阴影、高光、渐变等高度拟物化的视觉效果,从视觉上创造一种看上去更“平”的界面。


在一次广州网站设计沙龙活动中,听朋友讲最初定义“metro”概念的设计师Allen Grinshtein曾经在一篇文章中说:

“长久以来,网站的界面风格似乎都在遵从着同一种设计美学,大家都在用斜面、渐变、阴影一类的效果突出界面元素的质感。对于设计师来说,制造这类仿真的元素简直成了行业规范甚至是荣誉。不过对于我们,以及为数不多的其他一些设计师来说,这种惯用的方式并非一定正确”


着力排版设计与字体应用

在metro设计中,在摒弃大量装饰性设计元素后,版式作为内容的载体,显得尤为重要,因为用户的视觉热区将更多关注产品内容以何种方式呈现。

字体的应用与排版设计是相铺相成的,中文可以选择“华文细黑”和“微软雅黑”作为常用字体,英文则选择sans serif、segoe ui等。当然如果能与极简主义保持和谐,也可以适当运用创意字体。


让人过目不忘的色彩

IOS7的推出让“扁平化设计”的概念在UI圈子里炸开了锅,在当前,只要稍微留意一下移动端的应用,你肯定会扁平化设计的界面已经越来越多了,微信、微博、网易新闻、facebook、flickr等等。大家都在用扁平化的设计,那如何让自己的产品拥有较高的识别度呢?除了排版,最重要的当然是色彩的运用。相较传统网站设计常用的不多于3种的配色,扁平化设计在色彩运用上要自由的多,可达8种。

在扁平化的网页设计中,仔细斟酌过的多色彩运用可以较大程度上提升产品识别度,也可以让"扁平“也充满活力。





下面我们来欣赏几个扁平化设计运用的较好的网站:

oppo网站设计:



微软官网设计



腾讯企业邮箱官方网站设计





更多网站建设相关知识交流可联系广州新际(www.2000new.com)(专注于广州网站建设,广州网站设计,广州网页设计,网络品牌策略建议)。

 

查看项目案例