Metro,移动设备视觉语言的新新人类

“Metro”，移动设备视觉语言的新新人类何谓“Metro”？“Metro”本意是指“地铁”。纵观机场、地铁、公交线路图等，会发现这些导视设计都具有高度概括性，对比度强烈等特点，并被用来指导人们更快的找到自己要去的目的地。“Metro”之源一个移动设备的界面设计语言怎么会跟地铁挂上钩呢？每一次改革创新的背后，都有一个主导思想。微软这次推出的WindowsPhone7（以下简称WP7）背后也存在着一个设计语言，设计思想，这个设计语言正是源于交通导视图的这些特点而产生的灵感！在微软内部这种设计语言被命名为“Metro”。“Metro”之新1．图标WP7整个界面展现出的“图标”完全跟“圆角、渐变、阴影、光泽感”说拜拜，用纯二维以及高度概括性弱化了视觉上的复杂性，让用户没有过多的去关注图标本身，而是增加其辨识性和标识性，达到强化内容和信息的目的。2．界面布局Home页没有像九宫格那样整齐排布，而是用一个一个单一的色块平面化的对界面进行大胆的分割。其他的界面也去掉了那些繁复冗余的设计细节，没有过多绚丽的色彩，没有花哨的光影，强调用文字信息进行排版，更多的是关注内容本身，更关注用户想要什么，用一种锐利直白的视觉语言来表达了真实的内容。3．字体字体是“Metro”展现其设计美感的一个重点，它主要使用的是较细的SegoeUI字体，通过把字体放大、缩小来得到好的效果和设计感。在“Metro”中没有需要操作的复杂的界面来转移用户对内容的注意，取而代之的是用户本身关注的内容，简而言之：内容即界面！这样极大地减少了用户视觉上的干扰、增强了引导性，让原本“拥挤”了的各种内容和信息的界面显得更加地“透气”。在一个充斥着各种渐变和各种效果的时代，WP7能如此大胆地抛开了传统视觉设计语言的束缚，不惜代价地提高视觉上的清晰度和辨识度，把追求简洁发挥到了极致。“Metro”之“优”与“忧”不可否认，“Metro”在视觉设计上的确有着其独到之处，而事实上，其“新”更是理念上的，这种理念上的创新设计在某些方面拥有一定的优势，具体体现为以下几个方面：1．信息的完整体现传统的手机终端已经被Application包裹得越来越紧密，而你的生活和需求却不是一个一个单独的App所涵盖的，而是穿梭在不同类型的信息里。是否有新的信息、电话或者有新的状态更新，可以扫一眼就看到，这种强调类似SNS信息流的设计让用户更好地回归到体验手机的本质功能上。WP7在概念上遵循了这种源于信息和内容的思路，“Metro”的出现也正是为了消除这种概念上的不对称，当这种理念的核心价值表现在实用主义与内容至上的时候，一切视觉上的语言都显得不那么重要了。2．PanoramaPanorama的设计采用了类似画卷一样的横向滚屏的设计，摒弃了传统的滚动条，使得内容界面变得可以滚动，即让用户避开了一层一层的操作窗口又能一口气浏览信息到底。3．内容至上WP7不是在标新立异，而是从用户对信息的需求出发。他把极简主义，内容至上原则带到了移动终端设备的视觉设计上，不能不说是开辟了一种更强调实用的设计方向。“Metro”在理念上够新，视觉上够酷，但它是否真的适应当前的移动终端？我们不得不对其产生一些质疑和担忧：1．对一种字体的过度依赖拉丁字母非常配合Metro的设计理念，将简洁明快发挥到了淋漓尽致。而这就像一把双刃剑，导致“Metro”过度依赖拉丁字母本身所带来的魅力而忽略了例如中文，日文等非拉丁文。这些语言是否还能在“Metro”的设计理念的引导下，在视觉上是延续这种字体的魅力呢？至少到目前为止我们还没有看到有说服力的证明。2．视觉的单调性纯2维的图标有非常高的指示性，但却缺乏一定的丰富性。在“Metro”的视觉语言下，剥夺了图标原有的个性和情感，把其转化成一个个没有生命的指示牌。就像你无法指望那些交通标识能带给你什么惊喜和趣味，而只是冰冷生硬的指示。这对第三发开发者来说不能不说是一个遗憾。3.用户习惯与认可度在iPhone，Android系统横行于市的今天，可能用户早已习惯了那种操作界面的方式，而WP7的各种操作明显有别于市场上其他系统，因此需要一定的过程和培育时间成本来让用户接受。早在几年前，当时西门子推出Xelibri从设计理念上也够新、够酷并轰动一时，但用户接受程度却不尽如人意，最后惨淡收场。因此，微软在视觉和体验上做出如此大的变革，这不仅需要考验用户的耐心，更要考验微软的毅力与决心。“Metro”之展望与启示其实“Metro”这个设计语言在之前的Zune上就有多多少少的体现，垂直的大号文字导航系统，加上扁平化的色块，一目了然。在WP7面世后，“Metro”这个设计语言开始正式被大范围系统化的应用和推广，以此设计哲学和理念汇编成的Metrobook，用其简明的布局和明快的色彩对“Metro”这一设计语言的特色进行了最好的诠释。由XnaCreatorClubOnline演化出来的Apphub也承载了Metro的设计理念。“Metro”作为一种新的设计语言出现在移动终端中，更像是一种现象的延续，记得曾看过一篇CreativeReview的文章“TheNewUgly”。我们不是在这里崇拜丑陋主义，但这种思潮却在近些年不断地影响着整个设计界，包括伦敦2012年奥运会标志，WACOM的新标志，纽约出租车标志都成为对传统审美争议的焦点。不管是在界面还是体验上，都需要有一个差异化的核心价值，当这种体验的核心价值表现在内容至上时，无所谓对与错，进步或后退，所谓的视觉次于内容，并不意味着视觉设计的地位被减弱了，相反更需要设计师去提炼“设计”。Android4.0界面变化：加入WebOS设计元素深圳新闻网【字号：大中小】Google今日将在香港发布代号为IceCreamSandwich的全新Android4.0操作系统，可跨手机、平板及电脑使用，同时三星与Google合作采用此操作系统的第三代GooglePhone，也将同时发布。Android4.0虽然延期发布，但泄密并没有延期。继之前泄露的NexusPrime真机视频，现在NexusPrime运行新系统的截图也在mobilissimo.ro泄露出来。泄密不到八小时，这些图片就应版权方的要求撤下，从侧面印证了图片真实性。美中不足的是这些图片的分辨率经过调整，只有800x450，无法反映新界面的所有细节。那就先粗看下一代Android手机系统界面上的变化：第一张图是锁屏界面，可以看到顶部通知栏右侧不再显示时间，因为主屏已有时钟显示。Android2.3的锁屏界面则会重复显示两个时钟。这只是很小的改变，不过细节也正是Android之前欠缺的地方，同时锁屏界面整体上也比之前更干净。自Android3.0开始，前webOS用户体验设计师MatiasDuarte就在把越来越多的webOS设计元素带给Android。4.0的半圆解锁区与webOS手机如出一辙，不同之处在于新的解锁区提供了快速启动相机的选择，非常方便的设计。Android的设置界面一直很让人抓狂——没有分类、排序没有逻辑。3.0有所改善，但布局不适合手机。我从09年1月起长期使用Android手机，有些设置至今都要找一会儿。使用时间更长的@lordhong对此也有同感。现在我们还看不到设置的全貌，不过单从右图来看，新的设置界面终于有了分类，WiFi、蓝牙等常用功能不但出现在设置首页而且可以直接开关。左图是将时钟Widget拖放至桌面时的预览，除了底部有五个快捷键以外，其它地方和3.0并无不同。右图被人当成2.3系统里长按Home键弹出的近期应用，不过这明显应该是文件夹。我更偏爱iPhone的文件夹表现形式，但4.0也不错，比2.3的丑陋设计优雅太多。底部的返回、Home、多任务同样延续自3.0系统，不知道在游戏等全屏应用下会怎么处理——如果隐藏的话怎么恢复显示?深圳新闻网【字号：大中小】左图很有意思，Android的应用列表自3.0开始分屏显示。4.0延续了分屏设计，但放弃了之前平庸的过渡效果，而是和诺基亚N9一样——滑开一屏图标的同时，下一屏图标浮现出来，就好象被推到前面一样。关于这个效果，建议看之前的视频，比截图更直观。Widget以缩略图形式和应用放在一起等待选择也是3.0开始的设计。我见过不少普通用户桌面一个Widget都没有，只是像iPhone一样堆着一排排图标，因为他们根本不知道有这样的东西。现在的做法应该能鼓励他们布置更高效更个性化的桌面。而且相比Android2.3添加Widget只能靠文字描述，必须丢到桌面才能知道究竟是什么样的可怕体验，新设计无疑方便很多。深圳新闻网【字号：大中小】新的多任务界面延续自3.0系统，采用缩略图与图标的组合，高分屏用在这里会比2.3更有意义。最后是这部NexusPrime的About页面，i9250?我对4.65英寸的怪兽不是很感兴趣，不过4.0系统的细节改进确实非常有吸引力。此外光从这些缩小过的截图也能看出新图标的细节比原先丰富很多(图片点击放大)。Android4.0目前只展露出部分面目，不过至少从现有截图和视频来看，它的界面相比Android2.3称得上飞跃。系统界面这块短板至此差不多已经补上了，这样的色调不可能讨好所有人，但喜欢黑色背景的人应该都会比较满意。接下来我比较期待推送系统能彻底普及、第三方应用也变得更漂亮一些，不然和系统反差实在太大。iphoneWebApp导航设计探讨一叶苦雨|时间:2011-10-19|1,428Views交互设计最近在做iphone端WebApp的项目。由于产品形式新颖，技术环境不成熟，公司给与了较宽松的研发时间。在一个月的交互设计阶段，每个环节都得到多次讨论推敲，我从中感悟颇多。导航系统的设计是一个比较典型的点，拿出来与大家分享讨论一下。导航系统所遭遇的挑战iphoneNativeApp较常见的导航如下图所示：手机屏幕底端：A、B、C、D四个tab组成该NativeApp的全局导航，这是我们经常见到的tab导航栏。手机屏幕顶端：主要有四种形式。第①种形式是在该位置中心显示产品的logo；也可以将logo适当调整位置，将常用操作或快捷入口放在该位置的右侧。第②种形式是在该位置有两或三个tab选项。第③种形式是在该位置中间显示当前任务标题，在左右两侧放置导航控件或功能控件。第④种形式是在该位置放置搜索框。与以上的NativeApp导航方式相比，WebApp导航方式有着巨大的不同，如下图所示：Safari浏览器的工具栏将一直占据着屏幕的底端位置，全局导航只能被动移动到屏幕的顶端位置。这是影响WebApp导航设计的最重要因素。如果产品的功能比较少，且没有特别要突出的功能的时候，可以设计成上图中第①种导航方式。此时存在的问题是如何表现出产品的品牌，毕竟在Safari浏览器登录某网站比运行一个NativeApp给人的品牌认同感弱很多。如果将产品logo表现出来，且产品需要将用户常用功能突出（比如刷新功能或者发布入口），就需要设计成上图中的第②种导航方式。如果在A功能板块下，还需要设置子类别选项，则导航栏中又多一组tab。此时的导航方式就如同上图中的第③种了。当然，在执行某一项任务的时候，全局导航可以暂时“归隐”，只保留一行标题栏和左右两侧的导航控件或功能控件。如上图中第④种导航方式所示。在该产品设计中，为方便用户在各功能板块之间快速省力地切换，设计师希望全局导航栏可以保持长久悬停，不要像一般wap网页似的让导航随网页滚动消失。这样的话，基于浏览器的WebApp导航系统便捷性就和NativeApp相媲美了。然而，浏览器工具栏将全局导航逼到了屏幕的顶端，却又造成了导航头部过于沉重的问题。如下图所示：如果将logo栏中的常用功能（例如刷新或发布入口）和全局导航都设计为悬浮停留的形式，内容区的信息展示空间就比NativeApp减少了