HTML/Xhtml CSS教程 Dreamweaver Frontpage教程 Javascript/Ajax XML/XSLT CMS技巧心得技巧
返回首页
当前位置: 主页 > 网页设计 > 心得技巧 >

Windows Phone app bar上icon周围有圆圈的设计观点

时间:2012-04-17 04:39来源: 作者: 点击:
Windows Phone app bar上icon周围有圆圈的设计观点,Windows Phone中环绕icon的圆圈.

在Stockholm的Windows Phone Design Day期间的Q&A环节,Stockholm本地的交互设计师Petter Sifver提了一个问题,关于Windows Phone app bar上的icon,想知道为什么icon的周围会有圆圈。Petter友好地在其博客上为分享了他围绕设计阐述的观点。

我们看到的是Button,而不是icon。——从字面上。在这些Button内部都有小icon。微软提供的开箱即用(out-of-the-box)的Metro设计语言有一致性接近“button like”(可意会的按钮)控件。不论它是一个Push Button, Toggle Button, Command Button或者媒体播放Buttons或者icon button——button在Windows Phone的Metro语言里有一个边框,来定义边界。所以icon buttons在app bar是朴素地遵循了同样的语言——我理解它们可能造成困惑的原因我注意到当我们谈论icon时,我们会经常表述在圆圈里的内容并称它们是icons。当我们谈论icon我们会表述它们像icon(没有圆圈——即便如此,99%的它们被当icon buttons来使用)。

Saliency概念是正确的,而在我们的Metro button设计语言中有例外设计。

这样做是在保持一致性。称呼他们button或icon从字面看起来很接近,但是有着非常大的区别。我们使用button用来交互,使用icon传达一个单项的信息。例如,在电话应用在call history list界面中紧挨着calls使用带有电话icon的button——它们是button,不是icon。

另外一个使用icon buttons例子是在文字消息应用——当你希望增加一个新的联系人并发送一条文字消息,你得到一个带有加号icon的小按钮,同样的,它是一个按钮——不只是一个icon。你会发现我们不会使用icon作为button。它已经通过加号icon吸引了人去使用——我知道我被建议了。回到开始,正确的接近windows Phone的Metro设计是使用icon button。

现在我们看一下我们如何使用icon。例如在状态栏中,他们是确确实实的通知icon,并且没有使用圆圈(它们不是按钮)。

我们使用icon做为图形,它们提供给用户单项的信息(它们是不可交互的,因此不是按钮)。例如在电子邮件应用我们使用小icon(不是button)与用户交流。当有附件在一封邮件里,这时它们会成为高优先级邮件(标记)。

所有这些,我希望明确,我们在Windows Phone Design Day所谈轮到——Metro在做两件事情:Metro设计法则与Metro设计语言。Metro法则是设计支撑。Metro设计语言建立在法则之上,是在实体UI元素、动画、排版、构图与其它交互方向中的证明途径。

Metro设计语言由三件事情所定义:Windows Phone的native应用(邮箱应用、文字消息应用、people hub、本地搜索等等);第二,Windows Phone UX Guidelines;第三,控件库与其它Windows Phone SDK & Silverlight Toolkit的可用资源(所有的三项彼此之间会保持一致性)。开发人员与设计人员可用使用Metro设计语言。这会成功地为Windows Phone建立精巧美观、引人注目与一致性的体验。

Metro法则是优先的,它凌驾于任何语言,所以设计人员可用自由的探索法则,并且通过非主流的方式被你所证明。我们也乐意看到这些事情发生。Metro原则允许无限的探索与进化。这里我们给一些思路…从Swiss Design Style的课程中读一些文章。这描述了许多Swiss设计背后的理念(Metro的根源在它,也可以称为International Typographic Style)——阅读其中的海报与印刷媒体设计。然而,许多这些海报与设计与Metro设计语言并不相像,但是这不意味着做为一个设计人员不能探索其它的表达法则的途径。

本文编译自@langmuir,原文地址

爱设计教学网(www.2sheji.com)——为您所需,替您所想!
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
推荐内容