- 浏览: 122068 次
- 性别:
- 来自: 上海
文章分类
最新评论
微软称要通过Windows 8再造操作系统,嗯,今天的主角是 Windows 8
Windows 8 你一定接触过,无论是看过,还是安装过,无论你喜欢,还是不屑,都阻挡不了她的缓缓袭来。今天,我们来介绍一下windows8的精髓。
关键词“兼容PC与平板”“引入Metro UI”
Windows 8增加了对平板电脑的支持,同时引入Windows Phone中的Metro UI,在使用中我们发现,很多的交互是为了平板而设计。
设计灵感来源
三个重要影响
(1)现代设计 — 包豪斯(减少元素,以显现本质)
(2)国际主义平面设计风格 — 瑞士平面设计风格 (清晰,真实,美观)
(3)动态设计 — 电影艺术(动画“活”起来,激发用户情感)
生活中,人们行色匆匆,我们更需要提供快速,简洁,直接,明确的设计。
Windows 8的设计灵感来源于生活中的各类导航,地铁站,机场等。人们即使在急于奔波的时候,也能一眼在这些导航中获得他们要的信息。
Metro UI风格运用
Metro UI 是Windows 8 的设计主线,在对外发布的“开发者预览版”中,Metro UI已经运用到了“锁屏界面” “开始菜单”“IE”“RSS”“选择文件”等界面中。预计之后从Windows Store 中下载的应用均会使用Metro UI风格。
Metro Start
1992年Win95系统中第一次出现了start菜单,它的基本目的是取代程序管理器,用于启动计算机任务。之后经历了一系列的改进,但仍然存在各种缺陷。
Metro Start是屏幕是对Windows的start菜单、任务栏、通知和小工具改进的成果。这一次做出了如下尝试:
(1)最常使用区域扩大
(2)Metro Start支持自定义
(3)操作空间变大
Metro Start设计小结
Start已经不仅仅是一个菜单了,它占据了整个屏幕,取代了以前的桌面+开始菜单,承载了更多的功能。所有的程序都在这里,用户在这里直接启动程序。
同时它还有以下特点:
(1)动态信息:每个图块上的信息都是动态的,经过精心排版而被清晰呈现。显示的信息可以自定义,比如某个城市的天气预报或者某本杂志的内容。这样你可以在不启动应用的情况下获取一些关键信息。
(2)自定义:图块的位置可以随意拖动,可以将最常用的应用放在首屏。
(3)为触摸设计:每个图块的面积足够大,手指可以轻易的选中。每个图块是作为一个整体被点击,不会划分额外的点击区域。
(4)全局视图:在触摸板上,你可以将Start菜单像地图一样缩小放大,这有助于你快速选择应用。
(5)单击开启程序。
(6)图块有大小两种尺寸,可以自定义。选择哪种尺寸取决于应用是否有信息需要显示。小图块是不显示信息的。
搜索结果展现优化
Windows 7开始菜单中的搜索,用户最常搜索的文件类型是:程序,文档,控制面板,运行命令。
Windows 8 根据这些类型,提供了三种搜索结果常用文件类型分类:应用程序,设置和文件。
将搜索区域放在屏幕最右边,内容和结果放在最左边。符合用户从左至右,从上至下的阅读习惯。 设置和搜索界面不在妨碍用户浏览类容。 并且在触摸设备上更易于用户右手操作。
搜索设计小结
(1)将搜索结果按用户使用方式分类。
(2)按照符合人体工程学的方式设计界面(从左至右, 从上至下)
(3)沉寖式的搜索体验, 不用更换页面或弹出窗口, 一键更换搜素引擎和方式
(4)图标大小和距离分布按照Fitt’s Law优化
如何去设计一个metro风格的程序
Metro一个很重要的特点是沉浸式体验。每个应用的不再放在一个窗口里,没有了边框,而是铺满整个屏幕。
以下四张图展现了一个RSS阅读器逐渐从传统windows风格过渡到Metro风格的过程。
结合这个变化过程我们可以总结出一些metro风格的要点:
(1)以内容为主,方便阅读。在视觉中心呈现的都是内容,没有额外的干扰元素。
(2)去掉修饰,界面元素平板化,像素化。这种数字化的设计可以节省很大的存储空间。
(3)注重排版和布局。Metro对于应用排版有统一的标准。这一点在阅读类应用中尤其明显。
(4)内容平铺在全局视图里,通过滑动或者缩放,你能看到其他的内容。取消了tab这样的切换控件。
(5)操作被隐藏,在需要的时候从边缘呼出,微软称之为‘边缘交互’。手指从屏幕底部边缘滑入时会产生相应的交互动作:底部是操作菜单,右侧是一组固定的操作,左侧是应用切换。
Skydrive 云存储
在不同的设备上登陆同一账号,win8的云服务会自动更新用户的照片,邮件,日历,通讯录。Skydrive 通过浏览器或者metro风格的程序来获取最新的照片,文档等数据。
用户可以选择禁用所有同步,也可以按设置类型禁用同步。可以同步的数据有三类:
(1)windows设置;
(2)应用程序设置和数据;
(3)应用程序和网站的登录凭据。
Win8中的云服务保持了信息在线同步,使得用户在不同设备上的使用体验能够无缝连接。
协同工作:分享、搜索、选择器
在win8中,两个应用可以协同工作去完成一个任务。微软开发人员定义了三种最基础的、最常用的协同工作方式:分享、搜索、选择器。你可以随时从右侧呼出的操作栏上找到“分享”和“搜索”图标,非常容易调用。这使得信息分享变得更容易。通过右侧常用操作栏上的“分享”按钮,用户可以轻松的将当前应用的信息分享到其他程序中。
比如当你使用一个涂鸦应用完成一幅大作后,就可以通过“分享”按钮通过微博、邮件、flickr等渠道发送给其他人看到。
同样的,搜索时出了搜索本地内容之外,也可以直接搜索应用中的内容。在微博中发一张图片时。也可以直接从flickr相册中选取。
基础功能改进
任务管理器
Windows7任务管理器中的现状是:
(1)用户最常使用的功能是:“应用程序”和“进程”tab。用户最常的操作是“结束应用”和“结束进程”
这两个tab的使用频率大致相同,这表明在“应用程序”页面中,有一些重要的细节缺失,导致用户要到“进程”tab中去查找。
(2)用户主要想查看应用程序中,没有显示的后台或系统进程,并查看哪些进程占用了较多的CPU资源。
Windows8任务管理器针对如上现状进行了优化:
(1)为结束进程的操作优化,
去掉tab,进程间间距增大,将更多高级功能隐藏到“更多”中,视觉焦点更容易集中到“结束进程”上。
(2)突出信息可视化,用颜色等变化突出重要信息。
资源管理器设计小结
(1)简洁,简洁再简洁
(2)为用户最常用操作优化
(3)使用视觉设计突出重要信息
(4)按照用户习惯将信息分类
(5)为了让用户浏览更轻松优化
(6)在基础界面极简的同时增前高级功能
(7)被一个设计改动都建立在用户数据基础上
结语
Windows 8的设计,如所见的围绕着内容为主,去修饰平面化,沉浸,动态,边缘交互的风格来设计。
虽然在开发者预览版中,仅仅的对锁屏桌面,开始菜单,IE10,RSS,任务管理器,资源管理器等进行了大刀阔斧的改变。我们有理由相信,这些都仅仅是一个过渡,伴随着windows store的开放,Metro 设计风格的应用会排山倒海的袭来。我们也应该去思考如何结合新系统,新趋势做出我们自己的产品。
发表评论
-
什么是完美
2013-05-06 10:58 634什么是完美? 准确满足需求或适应情况需要;这意味着,无论怎 ... -
设计沟通的七条经验
2013-04-07 14:27 729经常有新入职的同学, ... -
字体设计是网页设计的根本
2012-08-07 09:37 652你已寻找这个问题多 ... -
[iA 旧文] 网页设计工作的 95% 在于字体排印
2012-08-07 09:36 656网上 95% 的信息是文字。从逻辑上讲,网页设计师自然应 ... -
A/B测试得出的一些有意思的数据和小tips
2012-07-30 16:16 0原文:The Ultimate Guide To A ... -
伟大的交互界面都来自…… (转)
2012-07-30 15:27 659原文链接:http://apple4.us ... -
付款流程的11个最基本的guidelines
2012-07-30 15:19 697又是好文一篇,虽然说 ... -
Web可用性设计的247条指导方针
2012-07-30 15:13 871原文链接:http://www.userfocus.co ... -
卓越的Web软件具有下列品质
2012-07-24 11:35 594卓越的Web软件具有下列品质: ---- 确定产 ... -
Alibaba国际站首页改版小结
2012-07-18 12:40 551阿里巴巴国际站(Alibaba.com)是全球最大、最有影响力 ... -
逻辑路径与网格系统
2012-07-17 16:00 0栅格系统: 创建逻辑路径 除了要精确的遵从网格 ... -
用户体验的五层–概念篇
2012-07-16 15:06 741在找实习的过程中,算是有缘吧,交互设计走进了我的视野,不 ... -
美国广告设计实用教程--作品评价指南
2012-05-10 13:09 732最近在看High哥买的《美国广告设计实用教程》, 里面有 ... -
7个开发人员和设计师适用的WEB应用资源
2012-05-08 22:45 506对于开发人员和设计师来说,很多项目和设计都需要有前期的规 ... -
27个网页设计中色彩的使用
2012-05-08 22:38 651互联网上现在有着数不清的网站,公司的、个人的、政府的、公 ... -
30网页设计美丽纹理的启示
2012-05-08 22:37 559每个网站都会给人一种感觉。那种感觉可能是一见倾心,也可能 ... -
世界500强网站
2012-05-03 10:48 1286世界500强网站大多设计精美、大气简洁,视觉很不错,与大家一起 ... -
Android4.0手机界面与交互设计原则
2012-04-23 15:26 668译者按:在iOS HIG已经 ... -
2012年手机程序设计趋势
2012-04-23 15:23 7762011年涌现出诸多优秀设计,随着操作系统的更新和硬 ... -
30个专业配色网站, 让你配色从此更专业
2012-04-10 22:05 2181当你不知道怎么配色时, 也许下面的这些免费的工具可以给你些灵感 ...
相关推荐
VB.NET制作Windows8 MetroUI Form 风格界面!供大家参考!
Windows8 Modern(Metro)界面程序管理工具。集离线部署、卸载、清理和破解于一身,并可对metro界面程序设置代理访问Internet,功能超强!
一些Metro风格的图片 Windows UI风格的图片 希望对做WP7,WP8,Win8等的同学有点帮助
win8 UI metro colore
Metro UI windows8风格的扁平化后台管理div+css源码
这是一款仿windows 8 Metro风格的布局和面板打开动画UI设计效果。该UI设计以扁平风格为主,将面板的缩略图以网格的方式布局。在用户点击某个缩略图后,该缩略图对应的面板会旋转放大到全屏,效果非常的炫酷。
VIUI 构建在Vue.js 2.X之上的Metro UI 风格的工具包
This resource demonstrates a Metro UI inspired jQuery UI theme built with the jQUIT Builder.
css3网页模板MetroUI风格 css3实现的Metro UI效果
windows 8.1 Modern UI图标|Metro风格|imageres.dll 文件替换修改 for windows 7 x64,(x86未测试,慎用)
Metro_UI风格配色方案
60种metro ui风格图标 要的速度下了!哈哈 编程绝对用的上哦!
Windows Mobile UI 设计 (Smartphone 和 Pocket PC .Net版)
windows8 Metro-UI-CSS-master 完整的WINDWOS8风格界面样式
微软Metro UI风格网页模板。Windows Phone7,Windows8 界面
图片 里面有WINDOWS8配色,以及色值表。
Windows Phone 7 UI设计及人机交互指南,微软官方发布,中文版。因为Windows Phone 7采用全新的metro设计风格,所以做Windows Phone 7开发必须要了解这些基本规则。
界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用...具体包括软件启动封面设计,软 件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化。
Metro UI CSS 是高仿windows8 风格的一套不错样式框架。以上资源建议配合Metro UI CSS 学习笔记一起使用。
让人印象深刻的7种移动端UI设计风格让人印象深刻的7种移动端UI设计风格