注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

METRO-风格按钮制作分析  

2012-03-21 21:34:14|  分类: LOVE METRO |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
METRO风格是一种简洁的设计,但是绝对不是简单的设计,我在之前的两篇关于METRO风格的日志中也有一些分析有兴趣的朋友可以看一下。《METRO-我们要做的就是什么都不用做》  《METRO-需要做得更多》

以前感觉都是些比较简单的说明。今天就从图片上来分析,一个个的说。

首先METRO按钮如何排放?

刚开始接触METRO的时候,自己想试着做一下那种感觉,我很机械的排列了图片,发现根本就没办法达到那种感觉。可是我自己确实不知道哪有问题。

直到那天我在看VI设计的书上,看到一个图片的排列的时候,我突然明白了。

下边是我们自己在笔记本上画出来的草图,我也不想在PS再做一次了,就拍了下来传上来:

METRO-风格按钮制作分析 - zzpdownload - 猪儿不懒
上边这图乱画的表示色块,“图”它就真的是图。不知道大家发现没有,这里的排放其实是有一定规则的。很简单,就是不要让图和图靠在一起,而且色块比图片多,这样人们的注意力自然就会到图片上去了。


METRO-风格按钮制作分析 - zzpdownload - 猪儿不懒
然后根据上边的排列,我得到这样的排列 ICON+图片的组合方式。这里ICON也是放在色块上的,所以我们这里可以第一排连着两个ICON,然后接一张图片,再接ICON。下边第一个也放图,然后放一个长方形的ICON,再放图。这样我们需要看的都能看到了。大家可以试着想一下,如果我都是放的图片挨在一起那么视觉上就找不到重点了。

上边是我自己画的。我们再看看微软中的METRO风格,再分析一下!

METRO-风格按钮制作分析 - zzpdownload - 猪儿不懒

在METRO风格的WIN8中,还有其他许多的排放方式,我只是给一个思路,大家如果喜欢这种风格可以自己去挖掘里边的东西。以上都是自己的想法,如果有不对的地方也希望高手指点!
 
 

 
  评论这张
 
阅读(1648)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017