《微软官方Windows 8设计指南》归纳整理

花了两天时间，对微软开发中心的《Windows 8 应用商店应用的设计指南》进行相关整理。本文归纳提取了相关要点，并在某些部分加入了自己的理解。 中文原文地址 英文原文地址

--------------------------------------------------------------------

导航

分层系统

 

中心页-部分页-详细信息页

平面系统

 

 

顶部应用栏-切换

导航剖析

 

①页眉和后退按钮：页眉可标记当前页，便于查找；

②中心页：类似首屏，将应用程序不同区域的信息显示在第一个屏幕；

③内容部分；

④语义缩放：当视图为很长的平移列表时，方便快速浏览信息和移动视图；

⑤顶部菜单栏：导航控件；

⑥页眉菜单：导航菜单，方便用户切换到不同页面；

⑦主页链接：用于快速返回根目录；

⑧底部应用栏：各种特殊视图命令；

⑨查看、排序、筛选

⑩边缘

使用标题菜单和部分标签进行导航

 

使用filters, pivots, sorts and views进行导航

 

filters：筛选。例如"人脉"应用里面，切换来自Facebook或者是Twitter的信息源；

pivots：最顶端那个导航条；Windows Phone 和 Windows 8 的特色；

sorts：排序；

views：视图，如"日历"应用的"今天"、"月"、"周"视图；

 

命令模式

 

使用画布

 

对于某些应用来说，可以直接在画布上提供内容的直接操作，而不是添加一个进入到下一层级的命令。

 

使用超级按钮

 

这块没啥好说的，微软定义的几大块功能：搜索、分享、设备、设置。

 

使用应用栏

 

这边的命令多与视图有关。

 

使用上下文菜单

 

比如说复制粘贴文本，复制或打开超链接。

 

命令放置

 

组织命令

 

首先，需要考虑应用需要用到哪些命令，把他们列出来。

 

创建命令集

 

其次，把上面的命令归类。

View commands	Filter commands	Sort commands

   

Selection commands	Map view commands	New Item commands

 

 

创建菜单

 

接着，我们需要考虑上面的分组结果能否简化。比如，筛选有四个按钮，能否把它们整合到一起。

 

将命令添加到应用栏

 

1.如果数量不多，把所有命令都放到App Bar的右边去。

 

2.当数量较多时，可以利用App Bar的两边边缘进行放置。

 

3.对于某些不应该在某种场景下出现的命令按钮，应该在相关环境下隐藏起来。

 

4.当出现新的语义菜单时，新增的命令按钮永远在原按钮的左边。

 

为常用命令提供标准位置

 

选择命令永远在左边

 

 

对于"新建项目"命令，需要考虑两点：不是所有情景之下都需要新建按钮，适时隐藏；与新建对应的按钮有几种，根据不同情景进行选择。

 

            

 

 

触控模式

 

触控原则

 

使用语义缩放实现快速导航

 

提供视觉反馈

 

互动应该可逆

 

不限制手指的个数，提供统一的操作体验

 

 

触控语言

 

长按以查看详细信息或可视化引导性内容

 

滑动以平移

 

轻扫以选定，进行后续操作（For Windows 8）

 

收缩和拉伸以缩放

 

旋转以转动

 

从边缘处轻扫使用系统命令或应用命令（For Windows 8）

 

触摸手势

 

互动区域： 由于人们通常持握平板电脑的边侧和底部边角，因此，边侧是放置所有可互动内容的理想位置。

阅读区域： 屏幕上半部分的内容比下半部分的内容更容易看到，下半部分的内容常常被手遮住或忽略。

四种常见平板握法

	一只手持握，另一只手进行少量到中度的互动	在右边缘和底边缘处实现快速互动。 右下角可能被手腕挡住。 限制有效触控范围可提高触控的准确性。 阅读、浏览、发送电子邮件和简单键入。
	两只手持握，拇指进行少量到中度的互动	在左下角和右下角处实现快速互动。 固定的大拇指可提高触控的准确性。 屏幕中央的项目难以触及。 对屏幕中央进行触控时需要更换姿势。 阅读、浏览、简单键入、游戏。
	设备位于桌面或腿上，两只手进行少量到大量互动	在屏幕底部实现快速互动。 下边角可能被手腕挡住。 缩小有效触控范围可提高触控的准确性。 阅读、浏览、发送电子邮件和复杂键入。
	将设备置于桌面或搁架上，使用互动或不使用互动	在屏幕底部实现快速互动。 在屏幕顶部进行触控操作会遮挡住内容。 在屏幕顶部进行触控操作时可能会使处于连接的设备失去物理平衡。 隔一定距离处进行互动会降低可读性和准确性。 加大目标对象的大小可以提高可读性和准确性。 观看影片、听音乐。

 

有关目标大小的准则：

	7x7 mm：建议的最小值 如果对错误目标的触控可通过一两个手势或在 5 秒内更正，则 7x7 mm 是合适的最小值。目标之间的间距与目标大小同样重要。
	当准确性非常重要时 关闭、删除和其他具有严重后果的操作无法承受意外的点击。 如果对错误目标的触控需要超过 2 个手势、5 秒或主要的上下文更改才能更正，则可以使用 9x9 mm 的目标。
	当屏幕难以容纳下时 如果你发现很难在屏幕中装下想要的内容，也可以使用 5x5 mm 的目标，只要对错误目标的触控可通过一个手势更正。在这种情况下，在目标之间使用 2 mm 的间距非常重要。

 

品牌植入

 

可视元素	描述
颜色	颜色是展现品牌的关键属性。通过告知人们此应用来自你的企业的方式，应用与你的品牌关联的主要颜色。
图形	通过将字符添加到内容的演示中，使用图形来增强你的品牌。但是过多的图形可妨碍你的内容的流畅性，并且看上去仅仅起到装饰效果或者可能会分散注意力。
图像	插图和摄影也可反映你的品牌。重复使用来自你的公司的其他沟通方式或网站中的相同影像和风格。
网格	Windows 应用商店应用网格系统帮助统一你的应用演示的视觉元素。该网格将调整你的品牌化应用的 UI 以使用 Windows 的其余部分。
布局	所有页面的视觉元素的布局安排都应与你的品牌相关。你还应尽力在页面和内容类型间实现一致性。
徽标	使用你的徽标以帮助人们快速识别你的应用和你的品牌。
版式	字样是 Windows 应用商店应用的一个关键部分。正确的选择可以像颜色、徽标或布局一样对你的品牌具有影响力，因此请考虑你要使用的版式。

 

几个例子：

 

 

 

----------------------------- THE END ----------------------------