|
干货好料：Metro UI中的设计元素 你觉得Metro UI界面非常的简单？它的设计理念就是要突出简洁与视觉焦点的引导。如果你是一名Windows Phone移动应用开发者，或是应用UI的设计者，那么下面提到的Metro UI中设计元素，你都必须应该知道。 开始界面：下面我们来看一下Windows Phone中Metro UI的开始界面。它具备一些用户经常使用的必要信息。人脉、图片、游戏、音乐和视频、办公、电子市场等。这个界面，其内容可以纵向滚动，方便单手拇指操作。同时在狭小的手机屏幕中，可以显示更多内容。 图：Windows Phone中的“开始菜单”
多宝阁设计：多宝格又称“百宝格”或“博古格”，是专为陈设古玩器物的。它是进入清代才兴起，并十分流行的家具品种。多宝格的独特之处在于，它将格内做出横竖不等、高低不齐、错落参差的一个个空间。人们可以根据每格的面积大小和高度，摆放大小不同的陈设品。在视觉效果上，它打破了横竖连贯等极富规律性的格调，因而开辟出新奇的意境来。多宝格兴盛于清代，与当时的扶手椅一起，被公认为是最富有清式风格的家具之一。 图：多宝阁传统家具 图：Metro UI的“多宝阁设计” 活动方格设计：在Metro界面中，应用都以可以翻转的方形图标的形式呈现在主界面中。他们就好似是多宝格中的“收藏品”一样，每一个应用都会给用户爱不释手的感觉。可翻转的图标，同时又印证了多宝格精致的机关设计，给人以一种不断幻化的新奇感。让人忍不住去探索Metro UI中的各种内容。 图：可以翻转的图标 通过刷新活动方格的内容，可以让一片狭小的区域显示更多背后的内容。这种设计，要比单纯的图标式界面能呈现更多丰富的内容。 Metro UI活动方格设计精要： 1. 活动方格式的图标可以反映出更多应用程序的信息。 2. 图片丰富细腻，每一个小方框由173 X 173像素阵列组成，其可以显示精致细腻的图片。 3. 多标题的图片，可以容纳下更多内容，可以给设计师更多的灵感空间，每一个应用都有机会构建自己的独特风格。 Panorama环景界面概念：环景一词源自于“panorama”，又称全景图，它是一种广角图，可以以画作、照片、视频、三维模型的形式存在。全景图这个词最早由爱尔兰画家罗伯特·巴克提出，用以描述他创作的爱丁堡全景画。现代的全景图多指通过相机拍摄并在电脑上加工而成的图片。19世纪中叶，全景图成为最常用的景观和历史事件的表现手法。1881年，荷兰海景画家梅斯达格（Hendrik Willem Mesdag）等人创作了梅斯达格全景画，并将画放在一个直径约40米的环形面内，画长约120米，高14余米。 图：清明上河图画卷 用户手中的这台WP7手机的可视区域是十分有限的。例如诺基亚Lumia 800的屏幕仅为3.7寸，为了能让用户透过窄小的手机屏幕，看到更为宏大的场景，在Metro UI中就采用了这种Panorama设计的概念。它最大的益处是可以在一个二维平面内，集中显示多种类型、多种来源的信息内容。
正如这张清明上河图所呈现出来的景象，宽大的卷轴不可能在手机中整体呈现出来。但是通过Panorama设计的概念，用户可以横向滚动卷轴，一点一点地将整张清明上河图浏览完。并且在花卷横向滚动时，人脑会记住当前屏幕所展示的内容以外的部分，并且人脑会自动将这些顺序与逻辑关系都有机的结合起来。在人的脑海中会自然呈现出原画磅礴的内容。 Panorama设计的准则，让用户可以控制自己的视野，通过用手指在屏幕上滑动来获得自己想要看的内容。同时，这种操控方式也是可以全屏幕进行的，并且可以视作是一种应用程序内的导航模式。 1. 使用任意单一的颜色作为背景色，或者是一张图片作为Panorama环景的背景。 2. 用户不必使用任何额外的触笔或者按键就能完成对Panorama的控制。 3. 在应用UI的设计时，微软对设计师有一个明确的要求：Panorama界面不能过长，要限定在4个屏幕宽度之内。 Pivot枢纽：是指最重要的部分，事物相互联系的中心环节。在构造地质学中，在褶皱的各个横剖面上，同一褶皱面的各最大弯曲点的联线叫做枢纽。Pivot枢纽通过不同的方式显示设置，Pivot枢纽的概念类似古代的“雕花灯笼”在转动的样子。 图：雕花灯笼 在Metro UI中的枢纽控制，提供了一种快速的获取和管理信息的途径，它能够以多种窗格的形式滚动呈现出来。用户能够使用它来过滤较大的数据，通过它来查看多重数据，或者在应用程序之间进行切换查看。 微软官方设计建议： 1. Pivot枢纽控制仅仅能显示一组项目，或者是类似的数据类型。 2. 绝对不要在Pivote枢纽中包含Panorama型的环景控制，或者是在Pivot枢纽中再加入Pivot类型的控制。 3.Pivot枢纽中的页面，不应该被应用于任务流。 4.不要试图使用触笔控制或者是滚动控制来代替Pivot枢纽控制。尤其是在sllder、Toggles、Map控制中。 Pivot VS. Panorama Pivot和Panorama都是可以横向拓展视野，一个是翻转，一个是平移。但是在开发者设计UI时，往往会将他们相互混淆。 Pivot可以支持更长数字的项目，因为它每个翻转层都是类似的数据。而Panorama主要追求的是更炫的用户体验，在Panorama中每一组数据要足够在一屏的宽度内显示出来，这样用户不必来回滚动屏幕翻看内容。 在Pivot中，支持丰富的代码内容，开发者可以调用许多数据内容，并且以不同的方式呈现出来。而在Panorama中，需要与一些系统操作相匹配，因此其代码实现的功能也相对简单一些。 在Pivot中LoadingPivotltem和UnloadingPivotltem事件可以简单的被推迟。另外Pivot还可以让用户更加高效的利用屏幕空间。 对于Panorama来说，其背景图片可以是任意尺寸，在垂直方面，系统都会自动的适应屏幕的大小，确保顶部和底部都完全吻合，而在水平方向，将图片等分成四个屏幕视野，同时确保屏幕滑动流畅。 Pivot（下） VS. Panorama（上） | 
发表于 2012-3-1 17:56:44
发表于 2012-3-8 17:01:16