Metro Design of Windows Phone 7

windows-phone-7-series
基于对Windows 7的好感,对于Windows Phone 7满怀期待,以为会继承Windows 7的优点,可万万没想到会在手机上应用极简设计风格。看到第一眼时,我甚至以为那是交互设计师画的原型图,没有UI元素,至今还是对黑底上的白色字体、白色和蓝色的图标不习惯,

  • 为什么不是白底黑字蓝图标呢?
  • 为什么不使用使用衬线字体,不论正文和标题都是要无衬线字体。
  • 手机上信息密度大,间距较小,而黑底白色需要更大的显示间距。

……

也罢,先抛开这些问题,谈谈Windows Phone 7的创新点Metro Design。官方文档的解释为:

Metro Design应用在手机界面中旨在引导用户关注内容,强调界面的协调、功能性和富有吸引力的视觉元素。

理想化的界面设计鼓励交互时提供娱乐性的探索,让用户感觉到新奇和兴奋。

对于以上的解释颇为疑惑,是否能有效地引导有待商榷,极简设计图标功能性强,但视觉吸引力较弱,而用户在使用手机的过程中的新奇感和兴奋也难以持久。

metro

metro222

Metro意为“地铁”,被经常应用在地铁、飞机场和街道等公共场合,图标简洁、可识别性高并富有现代感。文档中以故事版的形式阐述手机是如何应用在人们的生活当中,并提倡关注手机的功能如何高效地为人服务,关注人与人之间交流,作为设计的出发点确实富有新意,但是这些和视觉元素的使用有矛盾吗?

metro22

Metro纯二维化的图标固然很可爱,但是放在触摸屏上用户是否能知道这是个可以点击的按钮呢?

6f2e522c858b55ea8b13993d

Metro让我想起了英美副院长徐冰老师的艺术作品《地书》,收集了上万个图形标识之后将演变为“国际语言”,让语种不同的人却可以通过图标进行沟通。(以上的图片翻译为:闹铃响了,太阳晒到屁股了,响了好久才听到铃声,坐起来开灯之后发现,我靠!七点了!11点的飞机要赶不上了,赶紧起床收拾行李……)

Metro也在试图利用图标的高度概括性让用户更多的注意力放在内容上,这也符合上篇分析的极简设计,但是把视觉的可视性上升为界面设计的较高指标,手机的效率和操作流程度与之相比是否会较低呢?或许Metro的重点不在于实用价值,而在于开创性的艺术价值,无法简单地从交互设计角度去评价。

高雅的极简设计

极简主义(Minimalism),又可称为“Minimal Art”,作为对抽象表现主义的反动而走向极至,以最原初的物自身或形式展示于观者面前为表现方式,意图消弥作者借着作品对观者意识的压迫性,极少化作品作为文本或符号形式出现时的暴力感,开放作品自身在艺术概念上的意像空间,让观者自主参与对作品的建构,最终成为作品在不特定限制下的作者。

还有文献表面极简艺术是抽象表现主义的延续,我倒是不相信这种说法,不符合对于艺术家和艺术的一贯看法,风格不是延伸式的发展,而是革命式的替换,但无凭据也暂考证。而重要的是极简艺术对于视觉、文学和音乐等都产生了影响,由此有了极简设计这一说法。

221

先从符号学的角度理解设计师、作品和用户这三者之间的关系,设计师在设计作品时,将其意识的编译成作品,如在作品中使用表达热情的红色或看似庄重的黑色。而用户看到以图形、颜色和文字等元素呈现的作品时,理解设计师的意图是一个反编译解读的过程。

此过程借用计算机的说法是对文件的压缩和解压,设计师和用户无法直接对话,需以“文件”为媒介,设计师将文件打包压缩,用户在接到“文件”时解压文件之后方可理解设计师的意图,解压的密码是设计师和用户对于元素的声明,如声明红色表示热情,如何声明基于设计师和用户如何在认知上达成共识。

在抽像表现主义时期,艺术家的作品诡谲怪诞,普通大众无法理解像毕加索那样非具象的、立体派及超现实主义的作品。如设计师在也过度地应用设计手法,等于对其“文件”过度加密,而用户没有相似的观念,得不到“文件”的密码时,看到作品时感到迷茫,对其心理也是一种压力。

41

如果每个设计师风格迥异,等于各自设置密码,用户的理解压力可想而知,而极简设计希望通过去掉风格差异来减少用户的压力。

331

当风格的差异去除之后,用户看不出作品和作品之间的区别,获得统一的密码,而将风格降至极简之后,使用用户最容易理解的视觉元素,期望用户甚至不需要密码既能解读作品。

造型

12394602100

Joinin design

造型语言简练化,多用直线和圆角,严谨的线条感但不失巧妙,注重材料的固有质感,没有现代主义设计的那种严肃感。极简不等于简单,作品通常暗藏玄机,细细品味之后方能领悟设计之精妙。如看过MAC的尺寸分析图,定能理解此话,可惜未找到原图。

色彩

flickr

色彩丰富会导致作品的多义性,会导致用户与用户之间的理解有差异。极简设计使用原色,偏向明亮色和无彩色系中的白灰色,满足极简主义追求的简单明了的,将元素精简至原始状态。

hiromatsu-furniture-1

另外从人对于世界的认知过程中来看,最早在儿童时期喜欢需要简单的、新鲜的、强烈刺激的色彩,随着年龄的增长,色彩感觉相应趋向于成熟和柔和些,对于色彩的理解差异也就越来越大。极简设计使用原色试图剔除时间因素对于色彩认知程度的影响。

图形

iconwerk

以理性的几何图形或符号为表现形式,产生一种理性的秩序感,在此同时空间也被压缩至二维化,采用简单平凡的四边形或立方消隐具体形像传达意识的可能性。极简设计使用重复和均等分布的表现手法,减少元素的数量并且不以衬托的手法去突出某一个元素。极简主义是一种理性设计,其布局要求对于数学计算能力有一定要求,如网页设计中有栅格系统,每一个元素的位置都经过严密的计算,杜绝设计的随意性。

文字

1984

当图形简化之后,文字变的更为重要。一方面,文字有成为视觉元素可能性。另一方面,各种形式的文字可用于传达信息,比图形更为快捷和精确,如黑色文字为正文,灰色文字为辅助信息,蓝色文字为链接,红色文字为提醒类文字。

影响

极简设计秉承了极简主义的思想,并以造型、色彩、图形和文字等视觉元素体现出来。极简设计与简约设计虽有形式上的相似性,但两者并不等同,简约设计是为了反对过度装饰而产生的,其范围更广,不可混为一谈。

极简设计不等于简单,是对物体形态的高度概括,这种设计方法的意义在于:

  1. 风格统一,当用户看到作品时,甚至看不出设计痕迹,磨平了设计师在其作品上的烙印。
  2. 元素的使用没有先前那么复杂,内容的重要性也就随之突出,引导用户关注内容的本质意义。
  3. 简于形,遮掩复杂,并富有变化。

极简设计作品品位高雅,摒弃陈俗和浮华,直至本质,却不适用于大众化设计,因为其形式去除了具有视觉冲击力的元素,这与一些商业目的相违背的。

参考文献

  1. 《当代艺术》
  2. 极简主义–百度百科

交互设计的出发点

08年初翻译的文章,文中讨论的交互设计属于工业设计的范畴。尤其值得注意的是:UCD是四种交互设计方法之一,并不是全部。

有几件事,是一个新的交互设计师启动项目时面临的专业问题。项目一般因两个原因而引起:有些事情是不完整的或者根本不存在。“用户在抱怨这个产品!”一个企业经理会马上说:“我们必须做点改变。”(即使并没能解决问题,但是交互设计师就应该发现问题)或许某人在某地考虑到:“也许那样做或许更好。”并且,当钱、时间、人力等这样的资源具备时,该项目就可以开始了。

但是,当一个项目开始时,交互设计师如何开始工作呢?需要使用什么工具和方法来解决问题呢?尽管很多交互设计师坚持以用户为中心(UCD)这一种设计方法,这根本是不正确的。在这个章节,我们将讨论几种处理问题的方法。但首先,我想先谈谈问题本身。

1.问题的问题

有一个关于软件研发人员的老笑话。当工程遇到意想不到的问题,而又有巧妙的解决方法,研发人员常开玩笑说,“噢,那不是漏洞,这是一个特征。”虽然这只是一个笑话,设计师在解决他们自己的项目时,也常这样掩盖问题。事实上,设计师中有个老笑话:“这不是一个问题,它是一个机会。”

在设计介入到一个项目之前,企业常会遇到或者发现一个问题或一个隐性的问题。目前的一个产品销售或工作并不好,或者没能跟上手机那样六个月的更新速度。或者竞争对手推出了更好的产品,就像在20世纪90年代中期,公司纷纷推出最好的互联网浏览器。或者开拓一个新的市场,大量的产品来满足市场的需求。正在这时,IP语音电话( VoIP )已成为现实,网络上电话的应用需要加以设计。这些“问题”成为一个交互设计师成长的基础。

除非这个问题很简单和难以定义(例如,用户无法找到空格底部的小按钮),交互设计师不应该把被问题的表面所欺骗。很多时候,问题看起来很简单,事实上却不是。

这些问题看似简单,用户难于找到空格底部的按钮。简单的解决方法可能是把按钮放在一个更好的位置或者通过颜色、尺寸或形状使它更明显。但是这可能导致更大的问题。也许空格区域太长。也许用户不明白为什么要填这个空格,而并不是他们没有发现按钮,但是他们完成不了这个空格。或者,他们害怕按一下按钮,不知道会发生什么情况。等等,简单的问题会导致更大的问题。

说了那么多,当工作时,交互设计师不一定过分地将问题复杂化,要明白自己的任务。有时,一个按钮的问题,只是一个按钮的问题。不是每一项工程都需要推翻重做。这样的话,交互设计团体会很不耐烦。但这将是这本书的主题,必须三思而后行。如果把按钮做大能解决问题,那就把按钮做大些吧。

但按钮太小,并不是交互设计使常遇到的问题。当然这样的问题也存在的,但设计师通常面临许多更加凌乱的问题。这些问题常被称作“邪恶的问题”,在20世纪60年代设计理论家H. J. Rittel就是这样提及这些问题的。这样的问题还没被充分理解,并且它的界限也变得模糊。他们中许多人都有发言权,他们有很多制约因素,而没有明确的解决方法。这听起来很有趣,对不对?然而,这是设计师需要全力面对的问题,特别是交互设计师。设计事业并不让人省心。

继续阅读交互设计的出发点

信息扁平化

前几天曾将信息扁平化列为五条手机交互设计原则其中之一,未查找到相关内容,个人尝试从概念、缘由和实现方法等方面分析。

概念

较少的信息层级关系,用户通过操作跳转较少的页面即能找到想要的信息。

缘由

1.信息结构以深度为主。从淘宝UED的文章中看出web注重深广度平衡

在整个树形结构中,链接的层数被称为网页链接的深度(depth)。而在树形结构里,最底层页面包含的页面总数被称为网页链接的广度(breadth)。

但此条对于淘宝的网页和手机客户端并不适用,这两者实现的功能是:选择商品种类→找到商品→购买→付款,信息框架中最底层的界面大多扭转到付款界面,并不是正常的树型结构。此概念对于豆瓣到挺适用,网页结构是树型,首页是树根,小组中的话题、电影评论和书评是树枝;而淘宝网页是倒树型结构,热门商品、搜索入口和商品目录是树枝,付款是树根。

由于手机屏幕的限制,淘宝随身购的主界面只有选择商品和搜索商品,较弱的广度入口,信息深度更为明显。

2.每跳转一次界面,都会损失用户流量。随身购的目的在于引导用户查找到想要的商品并且支付,如完成操作要跳转5个界面比跳转7个界面的订单量会更多。

3.界面跳转比网页复杂。手机客户端中没有像面包屑那样显示路径的功能,必须一层层返回。

ds_photosscreens

如在iPhone中查看照片,从照片返回到照片目录需要点击两次导航栏上的返回。

mockup_2

从上图的手机客户端的信息结构示意图中可以看出,从“界面C”跳转到“界面I”的路径为:C→B→A→HOME→H→I。

另外,手机客户端没有像web那样操作方便的导航方式,如目录、树状导航和面包屑等。如iPhone的照片目录与照片显示在两个界面中,在web的照片目录和照片可以显示在同一个界面中。如树状导航显示在手机界面中,会导致页面过长。

ui_navbarmultisegment

↑如在iPhone程序中使用上图的面包屑,会导致如下几个问题:

  • 占据标题的显示空间。
  • 无法显示单个内容的状态。
  • 面包屑越多,显示区域越少,也就难以点击。
  • 难以表示用户所处信息的深度。

以上的问题与web面包屑的作用相违背的,如果担心用户容易在程序中迷失,不用“back”按钮而才采用面包屑路径,这可能就意味着用户进入深层次的信息才能找到他们想要的,这时更应该做的是减少信息的深度。

方法

iPhone tab

增加tab。将并列的信息显示在同一个界面中,减少页面的跳转。

mockup_4

从“界面C”跳转到“界面I”的路径为:C→B→A→H→I。此时A是真正意义上的HOME界面,C的层次由原先的第4级变为第3级。

mockup_7

流程的快捷通道。在界面A中增加达到C的快捷方式,虽然在逻辑上C还是第4级,但是对于用户而言,C是第3级。如购买电影票的流程是:选择电影(A)→选择电影院(B)→选择场次(C),如果在A界面中显示,XX电影院正在热映《诸神之战》,点击之后直接跳转到选择场次(C)。

mockup_8

区分流程的主次。假设数据显示8成以上的用户都选择使用快捷方式,那么B就不是流程中的必要环节,而是次要的流程,那么原先第4级的C界面变为第3级。
mockup_6

提取重要信息。第3级有3个界面BFE,用户要查看这3个界面才能决定哪个界面是需要的,在逻辑上BFE是并列的,如能提取BEF的重要信息,用户在A界面就能决定选择第3级的哪个界面。假设A为选择电影界面,BEF是各个电影的放映场次及电影票价,如在A界面中即能得知BEF电影的最低票价,就能帮助用户省去对比票价的过程。这种做法并不能使得信息扁平化,BEF属于广度的信息,如能从用户的角度区分BEF的重要性,同样能压扁广度,减少点击的次数。如果用户选择了B流程,B流程也是最简单的,跳转2次界面就能完成任务,而E和F跳转4次才能完成同样的任务,那么也能实现信息扁平化的目的。