Windows Phone 及 Metro UI 设计讨论

简介: 微软最新的移动操作平台为Windows Phone提供了全新的内容组织方式和不同的用户体验,在此基础上,Windows 8 也将采用同样的Metro设计原则。与以往的侧重点不同,Windows Phone更注重于用户的社交生活,尤其是针对那些生活中离不开社交网络的用户们。

微软最新的移动操作平台为Windows Phone提供了全新的内容组织方式和不同的用户体验,在此基础上,Windows 8 也将采用同样的Metro设计原则。与以往的侧重点不同,Windows Phone更注重于用户的社交生活,尤其是针对那些生活中离不开社交网络的用户们。

那么,作为设计师要关注些什么呢?

首先,这是一个全新的平台和用户界面,因此,我们有更多的空间为之提供更好的创意。Windows Phone目前正处在一个上升通道内,对设计师来说,也是一个全新的挑战。我们需要更多的探索来学习如何为用户提供更好的体验。

其次,Metro是一个我们不可忽视的新兴设计领域。作为Windows 8的界面基础,Metro在今后会有更多的跨平台特性,不同于当前的手机、平板、电脑界面各自为政,Metro今后会为用户带来更加一致的操作体验。尤其 是在微软与诺基亚的携手之后,拥有Metro界面的设备将拥有不可忽视的市场地位。

界面设计的新定义

Metro界面的出现源于typography in way-finding design(路标指示系统)带给Windows Phone开发团队的灵感。在去除所有无关元素后,内容(标题或文本)成为界面表现的核心,明显区别于其他传统界面:传统界面消失了,内容取而代之。在此基础上,实时内容被直接显示,用户直接与内容互动,减少了交互层级。

Grid Systems
图形设计中的网格系统, by Josef Müller-Brockman

Windows Phone的界面系统来自于先锋图形设计师 Josef Müller-Brockman:构建于基本背景之上的纯文本、纯色块。而图标不再扮演传统界面中那种重要的角色了,只用于针对内容的交互,大多是为对内容的定向和导航提供引导。

Clean design and typography, example from Cocktail Flow and Fuse
典型简约设计&文本表现, 参考来自 Cocktail Flow 和 Fuse.

所有这一切变化带给用户一种怀旧感和制图感,这一切看上去就像一张地图,只需清晰的文字标注,就能明确的告知用户想往哪里去,能往哪里去,以及如何到那里去。其他的视觉元素都是浮云。

一套全新的内容化网格

Metro设计需要更严格的组织规划,参考一下地铁线路图吧。在移动应用的环境下,信息内容提供者需要更强的表达能力,因为在图形元素都被剔除的情 况下,网格所展示的信息就是内容本身,所以,当用户在扫视界面布局的时候,他就已经在阅读内容了。同时,设计师需要选择一些重点的元素来建立阅读路径,错 误的元素选择会让用户迷失方向,不知如何才能找到他们所需要的内容。

Subway Map
米兰地铁线路图 (图片来自: Wikipedia)

内容的结构搭建需要遵循严格的等级规范,并且基于你想推送给用户何种信息。因此,你首先必须确定你的目标用户群。想要开发一个人人适用的应用是不那么现实的。

Flipboard
Flipboard 内容即界面的典型代表.

Metro界面的目标就是期望帮助用户能够更快的确认是否希望能够深入的阅读内容以及如何深入。类似Flipboard这种电子杂志,就是Metro界面的经典范例。

用以组织内容的界面元素

Metro界面提出了几种新概念的内容组织元素(或称控件?),主要包括: “panorama”、”pivot”以及”Live Tiles”。如何选择,取决于应用的目的和你期望用户阅读内容的方式。以下是关于这几种控件的简要介绍:

Panorama

正如其名,全景模式为用户提供了一个全面概览内容的最佳方式。当用户打开应用,所有的内容都展开在一张全景图的不同区域上,通过拖拽,用户可以一览应用的全部内容。Panorama利用文本和图片创造出一条内容衔接的路径,视觉上让用户立刻直观的了解到链接的内容。

Example of Panorama, FeedTso
FeedTso, panorama样例参考.

Pivot

Pivot利用逻辑排列将元素整合,将信息分解放入各类目录和列表,从不同的维度展现相关内容,同时进行相应的操作(类似标签页tabs)。

Example of Pivot as tabs, 4th and Mayor
4th & Mayor, pivot样例参考.

Live Tiles

Live Tiles是一个等级严密的结构,由内容概要开始,逐级深入,级别越深,内容越详细。下面的样例中,Live Tiles用来显示当前的天气状况。如果用户只想了解当前天气的基本状况,那么他们并不需要去打开应用,因为基本信息已经完全显示了。但如果他们希望能了 解今后几天的天气预报或者其他细节,那么再去打开应用也不迟。

Live Tiles的另一个特性就是可以用来显示循环信息,你可以将多条信息显示在同一个方块内,而他们会自动循环显示。.

Example of live tiles and accent color, AccuWeather and AppFlow
AccuWeather 和 AppFlow, Live Tiles样例参考.

Accent Color(强调色彩)

当然,组织结构之外还会有你想要显示的内容,页面之上还有你想强调的内容,WP7 guidelines给出了他们的建议:使用accent color(强调色彩)来强调你想要用户重视的内容。accent color是一个标准全局控件,用户可以在系统设置内自定义,并且所有的应用都会自动适配该色彩。

设计提示

干净简洁的界面,没有常规的图标,意味着用户以不同以往的方式与内容进行交互。因此,开发或设计Windows Phone应用(或所有的Metro界面应用),在享受新界面带来的不同感受的同时,也要考虑到用户对于传统界面的习惯。

Clickable Text(可点击文本)

Windows Phone的交互模型与传统界面的第一个不同点就在于:文本是激活的控件,也就意味着它是可点击的。这一点改变了”tap-safe area“(安全点击区域)的概念,除了图标、按钮以及其他控件元素,文本的字号、尺寸也影响着点击的范围。

Animation(动画)

Animation(动画)也是Windows Phone的一个重要特性。它改变了以往动画只出现在特定环境下的局面。 现在,动画和动态变形已成为基本控件并且深入Metro界面设计思想。它不仅能够在系统提示或反馈时”弹出“,也能提醒用户下一步也许是个不同的体验方式 (例如从全景界面切换到纯文本新闻界面)。

Icons

Windows Phone有一系列关于icon设计的指导,因此建议设计师在设计icon之前仔细阅读。唯一供以放置icon的地方就是application bar,所有针对内容的操作都来源于此。

The application bar of Pictures Lab, with four icons and the More button
The application bar for Pictures Lab, with four icons and the “more” button.

Text Wrapping

Windows Phone的Metro界面另一个特点就是文本换行不同与以往了。在这里,宽度大于屏幕宽度的文本是不会换行的,当然,普通文本例如新闻、邮件等不受此影响。因此,文本标题显示不全成了家常便饭,不过这对引导用户的操作到时候很大的好处。

The Color Theme

Windows Phone提供了不同于其他移动操作系统的色彩主题模式。除了明暗调整,背景色与前景色也都是可以供用户自定义的。

因此在应用开发的色彩选择上你必须要小心了,同时还要考虑用户自定义的情况。当然,你也可以采用图片做背景,但需要两张,以适应亮和暗两种主题效果。

结语

Metro界面为Windows Phone应用开发者和用户带来了全新的令人振奋的特性和体验,完全不同于苹果的iOS和Google的Android。微软第一次将系统与硬件严格捆 绑,虽然留给运营商和制造商自定义系统的空间非常小,但让开发人员有了非常统一的设计标准。这未尝不是一件好事。

本文仅是Metro设计开发的起点,供各位参考。今后会有更多的相关文章和资源提供给大家。

原文作者:Daniela Panfili

Daniela Panfili is a user experience designer, living and working in Brussels. She specializes in RIA and mobile experience design, and lately the WP7 platform. She writes about UX and UI design on her blog: tsoda.eu.

相关资源及参考文献

Via Ui xLabs
出处:wpdang

目录
相关文章
|
4月前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
75 0
|
Web App开发 安全 Linux
Windows 10 大更新:界面更流畅、新 UI、字体商店,还有这些新功能……
Windows 10 大更新:界面更流畅、新 UI、字体商店,还有这些新功能……
128 0
windows 2019 无UI版的常见问题
windows 2019 无UI版的常见问题
|
UED Windows
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
155 0
Windows 11 发布 6 个月以来 UI / UX 设计仍不一致:媒体喊话微软“先做好基础功能”
|
安全 开发者 Windows
Windows 11 受“吐槽”?黑客开发者设计出更漂亮的 Rectify 11 系统来“修复”它
Windows 11 受“吐槽”?黑客开发者设计出更漂亮的 Rectify 11 系统来“修复”它
320 0
Windows 11 受“吐槽”?黑客开发者设计出更漂亮的 Rectify 11 系统来“修复”它
|
编译器 Linux C语言
【C 语言】动态库封装与设计 ( Windows 动态库简介 | Visual Studio 调用动态库 )
【C 语言】动态库封装与设计 ( Windows 动态库简介 | Visual Studio 调用动态库 )
282 0
【C 语言】动态库封装与设计 ( Windows 动态库简介 | Visual Studio 调用动态库 )
|
监控 C++ Windows
Windows网络通信流量和网速监控设计(二)
Windows网络通信流量和网速监控设计(二)
260 0
Windows网络通信流量和网速监控设计(二)
|
监控 安全 Windows
Windows网络通信流量和网速监控设计(一)
Windows网络通信流量和网速监控设计(一)
631 0
|
Android开发 iOS开发 Windows
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
不久前,随着最后一家WP手机厂商惠普宣布取消今后Windows Phone的研发计划,以及微软官方声明对WP8.1系统今后所有升级维护的终止,WP手机,作为曾经和安卓手机、苹果手机并驾齐驱的三大智能手机之一,正式寿终正寝。
1499 0
Windows Phone 寿终正寝了,这些经典机型你还记得吗?
|
XML 开发框架 前端开发
Windows Phone快速入门需掌握哪些能力
在此之前,先普及下Windows Phone的概念和开发工具的介绍。 Windows Phone是微软公司开发的手机操作系统,它将微软旗下的Xbox Live游戏、Xbox Music音乐与独特的视频体验集成至手机中。2012年6月21日,微软正式发布Windows Phone 8,采用和Windows 8相同的Windows NT内核,同时也针对市场的Windows Phone 7.5发布Windows Phone 7.8。
176 0
Windows Phone快速入门需掌握哪些能力