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

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

大道至简 爱上Metro  

2011-11-09 15:57:10|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
来源:http://www.cnblogs.com/frankfang/archive/2011/08/28/2156280.html

一直以来我都在寻找一种简洁而又华丽的Web界面风格,却一直未能如愿。

如今网页设计中大行其道的设计元素有华丽的Icon柔和的光线和自然的阴影恰当的配色,当然还有时下风靡男女老少的Apple风,确实绚丽无比,这种风格可以说是对上面说到的几种元素的完美组合!但是要知道,一种艺术或风格,永远都是有人喜欢有人厌的——我还是觉得这些都不够简洁,直到我听说了Metro,一种以“sleek, quick, modern”(平滑、快捷、现代)为宗旨的设计风格,尤其适用于以文字为主的界面。


3

图一 这是Zune播放器的界面截图,使用了Metro界面风格

3

图二 Metro Twit的界面截图

首先,我想知道Metro里面常见的元素(Element)和模式(Pattern)有哪些。

朴素+点缀色

Metro中真的很少用到金属光泽、阴影、外发光,更多的是朴素的背景颜色(黑、白等)、简洁的二维图标加上清晰的文字,还有就是七彩的点缀色!

the ie 6 count down

image


不规则的方块布局

可以在地铁站里找到原型

0QQT000-0

Zune

18


Microsoftmag

www.microsoftmag.eu


地铁标识一样的Icon

现实世界中的日本地铁标识

httpwww.tokyometro.jpcnsubwaymap

中国某地的地铁标识

bced7acd0fdc154a4445483669a269ed

IE9中的Icon

ie9

Zune中的Icon

7

Metro Twit中的Icon

11

放大醒目的文字

一般来说,英文字体使用Segoe UI字体,如下图,这是一种横竖粗细一样的无衬线字体。中文可以用微软雅黑。

Segoe UI

msyhmsyhbl


深圳地铁(同时也可以看到不规则方块布局的影子)

1425036100-5

Zune

19

App Hub

create.msdn.com_en-US


简洁的布局

Zune

20

image

状态转换时的细节

Zune:进入全屏模式时的提示

6

Zune:模式对话框,周围白色遮罩

11


zune.net

social.zune.net_videos

Zune:文本框获取焦点

12

Zune:选中状态与悬浮状态

2122

无缝导航

比如在Zune中,当你的鼠标放在屏幕靠左位置时,导航会向左移动:

image

当你的鼠标慢慢向右时,窗口中的右边的内容也会慢慢出现:

image

真实的Metro体验,你要自己去感受!

我真的爱上了Metro,所以我打算给自己的Blog做一个Metro风格的WordPress主题,遗憾的是我还不会做WordPress主题,如果你会的话,我很乐意你教教我:)

  评论这张
 
阅读(267)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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