转:Windows Phone 7 设计简介
英文原文:smashingmagazine
导读:Windows Phone 7 引进了一个全新的内容管理和用户界面,命名为Metro的设计语言和理论。微软这次所看准的市场和用户群也与之前的老一代 Windows 不同(终于转变了):从针对商业和技术用户到普通用户,线上,线下的生活紧密链接的新兴用户。
对话设计人员
我们就不强调设计在手机应用上有多重要了。WP7是个非常不同于其他手机平台的操作系统,虽然现在还在起步阶段,业内对它还是很看好的。设计人员应该走在开发之前对它的平台和用户界面进行了解。其二,微软最终将会把 Metro 引入 Windows 8,打造一致性的手机、电脑界面。Windows 7.5,AKA 芒果,在九月发布了,紧接着,Nokia 发行了他们第一部 WP7 操作系统的手机。我们有理由相信,WP7在这个智能手机市场会扮演一个越来越重要的角色。
另辟蹊径的设计
Windows 小组的灵感来自于路牌设计。在这些指路标识设计中,很重要的一点是,他们去除了所有不必要的元素,并且把内容作为设计核心;他们把这一点引入了 WP7 的设计,让内容说话。界面消失了,内容是新的界面。现在的界面不是一个获取内容的途径,而就是内容本身。减少视觉设计强调了用户与内容的直接互动(direct interaction with the content)。
方格系统设计(Grid Systems in Graphic Design, by Josef Müller-Brockman)
WP7的图像设计秉承了印刷字体的风格,吸取了图像设计师 Josef Müller-Brockman 的设计理念:在画布上的纯粹的印刷字体,简洁的颜色和正方格子。图标完全融入背景,甚至包括了内容本身,成为了导航的一部分。
简洁设计和印刷字体, 应用 Cocktail Flow 和 Fuse.
所有这些设计让人们联想到专业制图. 地图式的铺陈方式提供了指向性;文本简单明了,让用户可以轻松导航;除此之外,没有多余的视觉元素。
全新的内容方格
Metro 设计强调刚性的内容组织.联想一下一张地下铁的地图,它的信息架构逻辑性极强。没有多余的图像元素,这个板块的内容只运用了信息本身 (题外话:电路设计图是基于这个逻辑的)当用户在浏览页面的时候,就只有信息和内容和他们之间的逻辑联系。对于设计师来说,这里内容运用的视觉较轻,而如何联系内容、导航整个应用的设计采用浓墨重笔。
米兰地铁 (Image: Wikipedia)
根据内容的重要性,或者基于应用希望如何向用户呈现信息,他们应该被归类在一个层次系统,环环相扣. 正如其他很多手机应用一样,找准对话的用户群是至关重要的。
Flipboard :内容作为承接界面.
正如 Flipboard 的设计理念,Metro 的 UI 设计把重要的内容直接放在板块中。在 Windows Phone 的主页,他们运用了一个 8 大板块的主页导航,覆盖手机通信,联系人,短信,email,xbox 等,用户可以通过需求更新这 8 大板块(这个跟其他手机是一样的)。不同的是,它每个板块都显示了最新内容。譬如:email 图标上会显示最近收到的邮件。这种 UI 的目的是给了用户一个选择:基于信息,选择是否继续浏览。 设计师们应该要充分利用这个特性。
组织内容
微软为此引进了一个 Hub 概念(枢纽),作为内容管理中心.它由三个重要的设计概念来实现: “panorama”(全景) 、“pivot”(枢轴转动)和live tile (实时更新板块)。
Panorama(全景模式)
当用户启动应用,他们登陆到了一个全景模式,应用中所有的信息都放在了一个屏幕上 (通过水平滑动,用户可以预览所有内容)。这个在 WP 设计里面要特别注意,设置,目录等应该尽量放在整个屏幕上,而不是独立窗口。
应用 FeedTso,全景模式
正如上图所示,全景模式给了用户一个直观的内容之间的联系。
Pivot(枢轴转动)
枢轴转动逻辑编排内容,把信息划分归类,显示了同样内容的不同方面
如上图所示,这个导航控制就像选项卡。
Live Tiles (实时更新板块)
正如前文所介绍的,这个实时更新板块是 WP7 另外一大特色。如下图所示,天气板块显示了当前的天气状况。用户不用打开应用就可以查看最新信息。
设计
可点击文本
WP7的文本是可以点击的,没有所谓的点击安全区域。所以在设计上要注意使用合适的视觉导向。
动画
WP7强调页面切换或者内容转换的动画效果,这样可以抓住用户的注意力。
图标
WP7 对于图标设计有严格的规定,我们建议设计师仔细阅读他们提供的设计指导。图标只能出现在application bar (应用底部)。
色系
WP7 在设置页面有个深色、淡色(dark/light)色系选择项。在设计上要考虑到用户会在两种色系间切换,为此,你需要两套方案。除非你的产品色系是品牌标志,我们强烈建议使用两套色系。考虑到 wp7 的应用是要审核的,色系是很多应用被拒的主要原因。
设计工具
除了常规工具:Balsamiq, Adobe Illustrator, Fireworks, Photoshop 等等,还可以使用 Expression Blend.
转:Windows Phone 7 设计简介的更多相关文章
- Windows多线程多任务设计初步(转)
Windows多线程多任务设计初步 [前言:]当前流行的Windows操作系统,它能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程 ...
- C#Windows窗体界面设计_01_绘制三角函数_附强制类型转换
binzhouweichao@163.com 今天开始学习C#windows窗体界面设计. 首先说一下类型转换. 参考http://www.csharpwin.com/csharpspace/6848 ...
- PHP实现微信随机红包算法和微信红包的架构设计简介
微信红包的架构设计简介: 原文:https://www.zybuluo.com/yulin718/note/93148 @来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微 ...
- 【Dubbo 源码解析】01_Dubbo 设计简介
Dubbo 设计简介 Dubbo 采用 Microkernel + Plugin (微内核 + 插件)模式,Microkernel 只负责组装 Plugin,Dubbo 自身的功能也是通过扩展点实现的 ...
- PHP实现微信红包算法和微信红包的架构设计简介
微信红包的架构设计简介: 原文:https://www.zybuluo.com/yulin718/note/93148 @来源于QCon某高可用架构群整理,整理朱玉华. 背景:有某个朋友在朋友圈咨询微 ...
- WINDOWS消息和窗口简介
一.WINDOWS的消息和窗口简介:1.什么是windows在这里我就不介绍了,但是作为一个程序员我们要知道WINDOWS最重要的一个也是我们程序员常用的一个东西就是消息.窗口是以消息的形式输入的,窗 ...
- ENode 2.6 架构与设计简介以及全新案例分享
前言 ENode是一个应用开发框架,为开发人员提供了一整套基于DDD+CQRS+ES+EDA架构风格的解决方案.ENode从发布1.0开始到现在的差不多两年时间,我几乎每周都在更新设计或实现代码.以至 ...
- C#Windows窗体界面设计_01_绘制三角函数_五点作图法
binzhouweichao@163.com Visual Stutio 2010 C#开发环境 五点作图绘制三角函数,以正弦函数为例,选取一个周期[0, 2π]上的五个特殊的点,也就是横坐标0, π ...
- Windows数据库编程接口简介
数据库是计算机中一种专门管理数据资源的系统,目前几乎所有软件都需要与数据库打交道(包括操作系统,比如Windows上的注册表其实也是一种数据库),有些软件更是以数据库为核心因此掌握数据库系统的使用方法 ...
随机推荐
- UVA 11423 - Cache Simulator (树状数组)
UVA 11423 - Cache Simulator (树状数组) option=com_onlinejudge&Itemid=8&category=523&page=sho ...
- 1250 Fibonacci数列
1250 Fibonacci数列 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 定义:f ...
- 通过代码获取log4net的文件路径
http://stackoverflow.com/questions/1343749/get-log4net-log-file-in-c-sharp Solution is quite easy in ...
- Sql2005常用函数大全
--聚合函数use pubsgoselect avg(distinct price) --算平均数from titleswhere type='business'go use pubsgoselect ...
- Python猜年龄
题目:Python实现猜年龄 步骤一:实现最简单的猜年龄 # 事先定义 dark_knight_age = 28 user_age = input('Please guess my age:') us ...
- JSP-Runoob:JSP 自动刷新
ylbtech-JSP-Runoob:JSP 自动刷新 1.返回顶部 1. JSP 自动刷新 想象一下,如果要直播比赛的比分,或股票市场的实时状态,或当前的外汇配给,该怎么实现呢?显然,要实现这种实时 ...
- 7.2 高速缓冲存储器-Cache
高速缓冲存储器:Cache.Cache的功能是提高CPU数据的输入和输出的速率.CPU的速度与主存的速度之间有巨大的差异.主存的存取时间.存取速度要比CPU的速度要慢了很多倍.为了调和它们之间的巨大速 ...
- B. Mashmokh and ACM(dp)
http://codeforces.com/problemset/problem/414/B B. Mashmokh and ACM time limit per test 1 second memo ...
- MySQL数据库笔记总结
MySQL数据库总结 一.数据库简介 1. 数据 所谓数据(Data)是指对客观事物进行描述并可以鉴别的符号,这些符号是可识别的.抽象的.它不仅仅指狭义上的数字,而是有多种表现形式:字母.文字.文本. ...
- debug时红点消失
问题描述:debug时红色断点和黄色小箭头不见,而用行代码高亮的形式时. 解决办法:可以用设置 工具 => 选项 => 文本编辑器 => 指示器边距 勾上选项