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,原文地址。

时间: 2024-10-31 07:34:51

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设计语言有一致性接近&q

Windows 8风格应用开发入门 二十三 App Bar概述及使用规范

App Bar概述 Windows 8 Store应用中的App Bar(应用程序工具栏)起到的作用和Windows Phone中AppBar一样.我们可以向用户提供各种操作接口,实现导航或者触发命令等. AppBar一 般默认是隐藏的,也可以设置为始终可见.我们可以通过清扫屏幕上边缘或下边缘时显示AppBar, AppBar被点击之后或失去焦点后隐藏,当然我们也可以通过编程方式控制AppBar显示或隐藏. Windows 8 Store应用中通常包含两种AppBar: 1)底部AppBar 底

Windows 8风格应用开发入门 二十四 App Bar构建

构建应用栏的目的的显示导航.命令和始终隐藏不需要的使用的工具.我们可以把应用栏放在页面 顶部或底部或同时存在顶部和底部. 默认情况在AppBar是隐藏的,当用户单击右键.按下Win+Z .或从屏幕的顶部或底部边缘轻松时可显示或关闭AppBar.当然我们也可以通过编程的方式将AppBar设 置为当用户做选择或与应用交互时显示. 构建AppBar基本步骤 通常我们构建一个应用的 AppBar,只需要三步就可以完成: 开发入门 二十四 App Bar构建-jenkins构建自由风格"> 如何构建

使用Eclipse在Google App Engine上创建mashup,第1部分

进军社会软件是为应用程序增值的好方法.使用社会网络可以更轻松地获得并聚合数据,从而创建富有革新精神的新 Web 应用程序.但是,仍然必须处理创建可伸缩 Web 应用程序的所有常见问题.现在,使用 Google App Engine (GAE) 也可以简化工作.使用 GAE,可以不必考虑管理应用服务器池的所有事务.您不必担心存储大量静态内容和动态数据.相反,您可以将精力集中在创建优秀的 mashup 上.本文是共分三部分的系列文章 "使用 Eclipse 在 Google App Engine 上

actionbar-在Action Bar上添加菜单

问题描述 在Action Bar上添加菜单 我想在Action Bar上面使用菜单添加一个帮助按钮.使用的Android 3.0平台.菜单Menu代码是 <menu xmlns:android=""http://schemas.android.com/apk/res/android""><item android:id=""@+id/help_btn"" android:icon=""@d

windows store app拼图游戏

问题描述 windows store app拼图游戏 我想写一个windows store app拼图游戏,但是我不知道怎么把一张图片切割然后打乱 顺序,比如我的拼图游戏设定是九个格的,我想把它一张完整的图片打乱显示 解决方案 我对这不是很了解,应该是划图区域,编上号,然后随机打乱

C# Windows Phone App 开发,修改【锁定画面】,从【Assets】、【UI】、【网路图片】,并解决失灵问题。

原文:C# Windows Phone App 开发,修改[锁定画面],从[Assets].[UI].[网路图片],并解决失灵问题. 一般我们在开发Windows Phone App,有时会希望透过应用程式来改变锁定画面,但是锁定画面的设定有时会发生非常吊诡的现象,譬如锁定画面只会在第一次设定的时候成功,第二次之後全数失败,而且没有发生任何错误,这究竟是为什麽呢?! ? 本篇文章将引导您修改[锁定画面],从[Assets].[UI].[网路图片],并解决失灵问题. ? 制作修改锁定画面的APP必

使用 Eclipse 在 Google App Engine 上创建 mashup,第 1 部分: 创建应用程序

进军社会软件是为应用程序增值的好方法.使用社会网络可以更轻松地获得并聚合数据,从而创建富有革新精神的新 Web 应用程序.但是,仍然必须处理创建可伸缩 Web 应用程序的所有常见问题.现在,使用 Google App Engine (GAE) 也可以简化工作.使用 GAE,可以不必考虑管理应用服务器池的所有事务.您不必担心存储大量静态内容和动态数据.相反,您可以将精力集中在创建优秀的 mashup 上.本文是共分三部分的系列文章 "使用 Eclipse 在 Google App Engine 上

Windows Phone APP中禁用截图

原文:Windows Phone APP中禁用截图 Windows Phone 8 有系统自带的截图功能,快捷键:电源键+Win键,可以随意截图. Windows Phone 更新GDR2后新增了一个隐藏功能,允许APP禁用截图功能. PhoneApplicationPage.IsScreenCaptureEnabled  这个隐藏的属性需要通过反射来访问和修改状态. public static bool CanSetScreenCaptureEnabled(this PhoneApplicat