Following the sun

设备:Sigma DP1S

地点:北京 颐和园

想起Enigma的《Following the sun》些许应景。

Have a look up to the sky
See the billion stars above
Cos (maybe) on one of them
You’ll spend your further life

Windows Phone app的设计过程

原文http://ux.artu.tv/?p=192
译文http://www.mdong.org/?p=2232

译者注:
原文的作者为Windows Phone Design Studio的设计师,虽然话语啰嗦,但是能够感受到许多Windows Phone设计完善过程中的细节。重要的一释疑是业内对Windows Phone开发环境封闭的以讹传讹,至少从app设计角度,Windows Phone的心态是开放的。并致力于提升产品创造的团队效率。思维方式不限于Windows Phone,同样适用于其它平台的产品参与者。

这里有一个我在使用的Windows Phone app的设计过程。其中许多设计过程阶段是传统的,我尝试从Windows Phone app特别的视角来阐释。

这篇文章是关于end-to-end的过程,所以会保持其高视角,并在下面的文章里详细的探索每一个步骤。比如,下周我们会从理念与概念开始,关于讲故事(storytelling)、草图(Sketching)、故事板(storyboard)与低保真原型(low fidelity prototype)。这篇文章会是系列内容的轴线。但是并不确定会不会基于反馈重新定义(refine)某些阶段,以及增加更多的示例。

图表自下向上读……

Windows Phone设计过程与其它的网站、移动app或任何设计没有本质不同。所有的设计师重视设计过程,用他们自有的方式调整、完善设计,并改变适用于每一个项目。没有项目是相同的,因此非常重要的是以指南(guidelines)理解设计过程而不是规则(rules)。保持灵活性(flexible)。

理解“设计”,设计不是按快门(one-shot)这类活动。你不能凭借一次尝试既确定设计,而是像创作雕塑作品,有一个迭代过程。艺术家拿到一组大理石,他们不会从细节开始,如眉毛、指甲或者头发。而是第一步先塑造整体的感觉,主要的体感与大块。接着第二步定义更多的特性区块,如手臂、胸、头与腿。随后有第三步、第四部与第五步。达到刻画小细节的程度需要经过许多步骤。用户体验设计同理。你不能从细节开始,最终会让你自食其果。应用程序流程(Application Flow)需要在视觉设计(Visual Design)前定义。我看到过许多类似事情的发生,他们尝试跳过一些步骤走捷径,而缺乏设计探索(design exploration)最终得到的是随后项目中的暴怒。

应用主题(App Theme)

我们从应用主题开始。这个是第一个可能产生分歧的点。我只是知道应用主题对于创建接下来的阶段非常重要。我注意到当开始app设计过程我们通常有两个选择。1,已经有一个我们想做的、非常清晰的idea;2,我们有一个目标,基于现有的API与Web Service。但两个途径在我看来都是错的。如果你有一个清晰的idea,你知道你决定了自己与团队的解决方案,但还没有通过探索验证。如果你决定创建一个app基于现有的API或者Web Service,你会最变成另外一个Twitter、Yelp!或者Foursquare 客户端或者另一个从Yahoo获取数据的股票软件!金融或者另外一个从CNN获得内的RSS聚合器……从Marketplace上搜索CNN你就知道我正在说什么。即使这些app有好的体验。相信我,他们无法突围或者为用户做出贡献。不要想APIs或者RSS Feeds。想想用户体验。所以替代的思路是”哇哦……CNN的RSS Feed是可用利用的“ ”我们如何为用户在获得最新与关联且重要的新闻的体验做出贡献?”尽快思考这些,越早为自己与团队打开一个新世界的探索。不再是RSS阅读器,现在你有一个更高的目标,史诗般的任务来帮助用户获得更多关联且重要的新闻。因为对象是宽广的,解决方案是不具体的,这才是想要的点。你保持开放,所以你会探索并拥有革新的idea。替代基于APIs的思考,而基于体验思考,如跑步体验、进餐体验、航行体验,询问自己与团队,你如何为你的用户做出贡献提升体验。注意这并不是必要地意味着解决全部的体验……它意味着只是解决X或Y部分的体验,用户趋向难以发现的地方或者你看到一个机会可以帮助用户发挥全部潜能。在随后的开发过程中,你会选择你会选择API或RSS Feed从任何源,但是起点一定不是技术解决方案。最流行的Twitter或Foursquare客户端都是成功的因为它们将体验放在第一位——而不是API。

现在如果你已经有客户端的app服务于特定的产品服务,或你正在移植iPhone或Android app到Windows Phone,请做好准备,针对主题进行重新定义(refine)。在许多的情况下,受制于预算或委托人,你需要直接跳到信息架构(Information architecture)阶段。然而真诚地说,即便由委托人雇佣你移植一个iPhone/Android app到Windows Phone,请依然做好主题、理念与信息架构的重定义准备。事实上这不是一个坏消息,一旦你进入了信息架构与交互设计(Interation Design)阶段,会得到最好的Metro设计语言:Pivots、Panoramas、App Bar、List View、Typography、布局与动画。当从其它平台移植app,你的工作会变成:1,理解这些平台上的当前信息架构,并用Metro翻译它们到正确的屏幕、内容视图与导航。基本的事情是理解当从iPhone与Android迁移时,你不能迁移UI。你迁移的信息架构。通过思考与实践,你会预防错误的转化过程……如当人们尝试从iPhone迁移返回按钮(通常是屏幕左上角的按钮)到Windows Phone……你在Windows Phone上不需要一个屏幕上的返回按钮,因为我们有一个硬件的返回按钮。所以,遵循思考“迁移IA”比“迁移UI”要更合适。

理念与概念(Ideation & Concept)

现在你有一个主题或者任务,到了为其产生idea的时间~理念与概念阶段非常有趣!——就像是在玩游戏。头脑风暴(Brain storming)的游戏,草图游戏讲与讲故事的游戏。在这个部分有三个关键阶段:1,头脑风暴;2,探索;3,合并(Consolidation)。概况来说,在头脑风暴阶段你产生了大量的idea,在探索阶段你详细分析与研究许多idea(但不是全部),在合并阶段你决定哪些idea会继续向前变成app一部分。只有少数的idea会存活。


完全自由的头脑风暴

这个阶段的目标是产生关联任务的大量idea,如“贡献酒店预订的体验”。想象力(Imagination)、妄想(delusion)与古怪(craziness)是在这个点上都是好的技巧。让自己有玩的心态,思路跳出思维框架。有需多具体的头脑风暴练习如Subject+Verbs+Objects与扩展思路的Alternate Worlds、Impossible Scenarios与In Other‘s Shoes。我们会在下一篇文章讨论所提到的技术。这些游戏你可以与团队一起参与,如果你是独立开发者你可以跟朋友一起参与。这个阶段的目标不是强迫你疑虑“你如何build或编写这个或那个”。也不是关于这些东东长什么样。它是关于产生idea的。在接下来的几个阶段,这些idea会落地执行。后面,就像我们知道的,有百万个非常好的idea,但是只有一个或者两个会被恰当执行,并且成功。

探索分析/审查/测试(Exploration Dissect/Inspect/Test Ideas)

在探索阶段你会得到头脑风暴中脱颖而出的idea,并需要了解更多关于这些idea的内容。你可以通过分析、审查与测试来达到目的。这个点idea刚刚出生,它们就是孩子,没有完全的发展或成熟。然而这些idea只是头脑风暴的一部分,也许许多疯狂的idea在头脑风暴过程中已经灭了——但是有一些依然存在。你可以肯定会发现你或团队中其它人会坚信、接受并深深爱上这些idea——他们的孩子。我冒险地说这不是好事情,但同时,你需要爱上已经确定的idea,这样你就可以把其它idea推得远远儿的。有些时候idea需要发展来完全的证明。如果你太快地放弃了一个idea,也许你会失去一个好的机会。幸运的是这个阶段我们有4个非常有用的工具,允许我们探索我们的idea并发现优秀的种子:草图、故事板、简易原型与讲故事。这些工具帮助开发人员与设计人员针对idea进行测试。

拥有草图能力可以帮助你维持更多的抽象概念。故事板可以帮助你像接近皮克斯或梦工厂动画师一样讲故事。你使用手绘与故事板展现idea的用户体验情景,如何通过app来提供帮助与做出贡献。这是一个可视化的方式。原型是一个全新世界可以探索,当前重心在简易原型。这里有几种方式:一个是通过纸张、便条、卡片与胶带建立模拟原型。你可以通过手动粘贴到画布上测试情景(scenarios) 来传达交互。这类简易模型需要一个向导与测试用户。这听起来像是落伍的活动。但是它真的不是……它是非常严肃的。你会惊讶,你能在一张简易原型上用15~60分钟而不需要花一分钱,就可以收到许多反馈。在进一级的设计过程阶段不会使用简易原型,但在这个点,这是最佳选择。另外一个做简易原型的方式是使用Expression Blend(或者是Powerpoint或者其它的交互工具)。这个是Design Studio的Jared Potter第一次向我展示的复合数模技术。简单的说,你在纸上画草图、拍照、载入图像到Expression Blend,在头部的可点击区域增加透明按钮并关联导航栏。Done!他称这个是15分钟简易原型技术,我们会在下一篇文章中讲得更多。

整合产生决策 (Consolidation Make Decisions)
从头脑风暴开始得到许多idea,经历自己与团队的探索……在这里需要整合,非常好的idea会脱颖而出。这是一个决定哪一个idea会进入app的过程。有不同的练习会帮助你的团队缩减列表与基于优先级排序列表。这里的目标是移除尽可能多的不明确信息。这时,idea比起概念阶段进一步进化,并引发更多的用户情景(user scenarios)或者信息情景(information scenarios)。你需要带到下一个阶段的是一个基于优先级的情景列表。

信息架构(Information Architecture)

信息架构阶段的目标是定义信息、任务与彼此之间的关系。用户所拥有的数字体验:信息与信息利用的潜力——使用信息来帮助决策、获得关于某些事情的知识、产生信息。

信息架构是一个完整的学科。信息架构的目标是制定信息规则。

在理念与概念阶段产生的用户情景包括不定型的信息,如名字、日期、价格、图像、温度范围-在信息架构阶段你会带着不定型的信息并传递为结构化的信息。一次尝试是不可能完成的,它需要经历多个过程。

我们有两个非常有用的工具可以帮助我们定义信息框架:应用程序流程表单(Application Flow charts)与低保真原型(Low Fidelity Prototyping)。

所以在信息架构进行第一次尝试,并通过创建Flow charts进行测试。这里有不同成熟度等级,主要是从任务流程到具体屏幕+内容视图+导航表单。记得经典软件工程的Flow charts吗?这就是app flow charts,它只是一个可视化术语,我们专注在用户流程(user flow)、体验(experience)与交互设计(Interaction design)。一旦你拿到一个flow chart,你就可以尝试讲述用户情景(user scenarios)的故事。你会获得反馈与idea,用来重定义信息架构,并返回完善AI文档。这时你可以反复通过创建较高仿真的flow chart进行测试。flow charts渐渐地变得详细,从简单的任务flow到屏幕展示内容视图、导航。我不称之为高端的flow charts线框图(wireframes),确切的说是低保真框架。

另外一个工具是低保真原型(low fidelity prototypes)。在这个点纸质原型依然有用,因为低成本。无论如何,flow charts会渐渐地更高保真。你需要打印这些app flow chart并把类似的放在一起(不再是草稿、而是打印材料)或使用Jared在Expression Blend的原型技术,用拍摄的原型图像替代,把app flow程序呈现在屏幕上。

在最后你会有一个独立的IA文档,包括组织化的信息、可靠的成组flow charts与基于app flow的低保真原型。

我注意到的一件事情是,创建Windows Phone Design Process chart后,它在IA文档接近35%的高度,占有同样高度的是Interaction Design(下一阶段)。这些chart不代表在项目中占有同样的时间,但是我要说它着实正确的思考了IA应有的时间。如果你明确IA,会更加游刃有余。

最近的几个星期,我们有一篇特别的文章会关于Windows Phone apps的信息框架。

交互设计(Interaction Design)

我们已经定义了信息架构,也就是说目标用户可以使用这些信息。现在我们开始针对性制作用户界面。

交互设计是什么:创建一组用户界面与用户体验元素,用来验证良好的信息架构与用户完成信息关联的任务。我们希望在这个阶段达到的效果是传递信息与任务最大化的潜力发生。即使IA可能是刚刚完善,如果交互设计不能完全执行,这时信息中发生的事情就不会完全正确地在app中体现、用户也不能完成他们想要的任务。

依照我的观点,交互设计默认是信息与任务的过滤器(filter)。它定义的不是信息也不是任务,而是一个工具。交互设计(或用户界面)是在用户与信息之间的中间人。用其它的方式描述,用户界面(交互设计的最终形式)应该是从有罪直到证明无罪,我想这个概念关联了许多Metro法则要点:信息是展示的核心,不是用户界面。它是决定一个好(坏)设计定义的重要因素,无关用户界面层是薄、无形或者笨重。我们不谈论视觉设计,只是交互设计:用户基于现在发生的关系如何面对信息与任务交互。

如果我们没有一个Windows Phone Metro设计语言可用,这时我们需要从零开始弄明白交互隐喻。在未来的文章里我会谈论如何推动Metro,并给出一些idea与如何基于Metro革新,这篇文章里会重点定义交互设计与开箱即用(out-of-box)的Windows Phone Metro设计语言。

设计模式(Design Patterns),可靠的帮助翻译信息架构到Metro控件。信息架构与任务会赋予Pivots、Pages与Panoramas以生命。信息层与架构会赋予内容视图(Content Views)以生命。信息与信息、任务与任务、信息与任务的关系会赋予导航栏(Navigation)以生命。IA文档的所有内容会翻译到明确的Windows Phone控件中。最后不会出现歧义。

让我们回顾,基于IA文档,选择Windows Phone已有的设计模式,例如:search、maps、email、playlists或people hub的Contact cards。这时,如你没有找到一个完整的设计模式,或者根本不能满足你的IA需求。那么你可以定制一个接近或者创建全新的设计模式。当定制或创建自有设计模式,你有三个好的工具:1,Windows Phone设计网格;2,不同尺寸标准的Typography来传达结构化信息;3,Metro控件。当然,这三个不是所有你可以可用的武器,但它们是最基本的。相信Windows Phone用户体验指导(UX Guidelines)会cover到你的安排。

我提议通过设计模式来设计Windows Phone app。这不是唯一的设计Windows Phone Metro app的方式。像我们前面提到的,我们会在随后的文章里谈论关于推动Metro的设计模式,但在这篇文章重心在Windows Phone Metro语言设计。如果我们明确,从我的观点,我们可以创建自有的设计模式,可能一点都不像Metro控件库只是隐喻接近(但仍然基于Metro设计法则)。

你可以在Photoshop format(ListView_PSD.psd)找到许多列表视图设计模式,全景板图(Panorama_PSD.psd)以及其它控件。我们会延伸更多的内容。

经过选择设计模式,定制并创建设计模式,你基本上设计了app。听起来很简单!其实不是,事实上只是选择了正确的设计模式,定制了它们的工作区块。我发现Windows Phone设计工作室投入了超过2年加工与展开Windows Phone体验与UI。设计模式是非常灵活与广泛的。经过在Windows Phone Design Day回顾将近200个app,我相信它们当中90%使用已有的设计模式与定制设计模式。当我开始我在设计工作室的工作,我对Metro并不熟悉,我的印象是它很漂亮但所有app都看起来很像。现在我在这里写给你的是关于再利用(re-using)已有的设计模式设计整个app做出改变?是的!我印象里6个月前,在Windows Phone中所有的都是Pivot与Panorama时代。但是我发现经过6个月,许多Windows Phone app比仅使用一个Pivot或Panorama更丰富。所有的事情是相通的。这三种类型的屏幕依次主导了app中无限量布局的可能性。这是app之间区别的地方。定制Panorama面板的可能性、Pivot页面的无限量。Windows Phone app使用的Metro设计语言可以非常丰富与独特。像“如果背景不是黑色就不是Metro”的迷信不是真的。请查看Mike K的这篇文章或者Core77的Windows Phone设计辩论

其中一件重要的事情是以不同的格式生产大量设计模式:Photoshop、Illustrator、Expression Design与XAML。现在,市面上没有大量的设计模式,所以推荐使用手机当前的内置,同时我们这边也在大量工作更多的格式将会投入使用。

返回开始,设计模式的选择、定制与创造阶段会呈现在线框图(Wireframes)。线框图是灰度图。不是色彩的!没有品牌……也没有panorama背景!这些线框图理想情况下是由Expression Design、Visio、Photoshop与Illustrator创建(提醒我们应该提供Visio格式的设计模式)。

我们已经准备转移到下一个交互设计阶段:定义动画风格与UI控件规格。实际上,这些概念会跟随之前选择的设计模式。最后,设计模式在这个语境(context)是交互设计模式,而不只是视觉设计模式。

动画风格会帮助我们基于线框图指明,会有动画出现在从A到B屏幕的转化过程(旋转风格),何时显示列表项目的详细内容(飞出飞入Continuum)。动画是Windows Phone app的重要部分,所以我们设计使用的动画风格的要点规格时会非常挑剔。与此同时,UI控件规格同样需要基于线框图,所以开发人员知道当创建一个app时,键盘类型需要基于输入的用户体验。或者当有通知(notifications),我们需要显示内容A、B、C通知消息内容的规则,通知在哪里会带你进入app。对于Loaders会发生同样的事情……我们需要一个%的loader还是一个等待光标?

在这个阶段的最后,针对完整的app,会有可靠的一组线框图,由开箱即用的定制与自主创建的设计模式驱动。这些线框图会包括动画风格与UI控件规格。准备下一阶段:视觉设计!

视觉设计(Visual Design)

目前为止,你会想:什么,到最后才有视觉设计?!。像我之前提到的,设计过程(任何事物)不是线性的。要是像我一样,我会开启Expression Design(你可能会使用Photoshop或Illustrator)我会把额外的事情丢一边并开始工作,我喜欢这样,用我喜欢的工具并开始app设计。没有草稿、没有线框图,只是漂亮或纯粹的视觉震撼!——许多视觉设计师想的就是这个味儿(就像工程师直接跳到Visual Studio开始敲代码!)

我必须承认比起一个交互设计师我更是一个视觉设计师。我肯定会依靠它看起来如何引导自己,所以我在项目的初期被视觉设计所吸引,但是我必须控制自己并记住有一个设计过程如何我跳过了,我的设计最终会非常漂亮但是不能忠实地表现app如何工作的信息架构与交换设计需求。也就是说,我们知道看起来受欢迎与我们都做过在过程的早期被客户询问发送给他们app的设计。明确开始的视觉设计是徒劳无功(虽然有些客户喜欢说要的就是这个)但是更像是“售卖设计”。

尽管我们喜欢信息架构与交互设计,为用户、商业决策制定者或市场管理者,然而一图胜于千张AI(an image is worth a 1000 pages of IA)。一组漂亮的Windows Phone app会帮助人们购买这个app与产生更多购买,给团队boss的进度报告会看起来漂亮。其实就是这样。所以当IA没有完全确定或交互设计被定义时,视觉设计引导人们在项目早期,最好的想象并最终实现。许多次人们会想这个愿景是最终的产品。但事实不是,这只是试图展示了我们方向在哪里。问题既是团队或客户信奉这个早期的视觉设计做为方向。期望应该被规定,这样在随后项目中就不会失望,因为它后于IA与交互设计,你可以完全的认识到视觉设计。

所以,现在我们有IA与交互设计明确时间来做许多有趣的视觉设计活动,像定义调色板(color palette),设计自定义图标、背景、整合品牌到我们的体验与设计live tiles。

你是否知道有一个有关设计的经典对话关于是否开发人员应该做设计?自始至终,对于这点我认为一个开发人员即使没有正式在设计方面训练可以成功的做到。信息架构是一个系统化与结构、逻辑驱动的学科。我个人认为开发人员有正确的思维模式明确IA。交互设计需要更多的体验,这是交互设计在过程中擅长的地方,但是一个开发人员沿着设计模式,我想他肯定可以做正确。这个阶段的挑战在于当前的设计模式缺乏与恰当的工具来实现方法、挑战,这增加对没有正式设计训练的人们的困难程度。最后,视觉设计阶段,我想你最好雇佣训练有素的图形视觉设计师。虽然有相当数量的设计教程与有版权的图标、图像与其它元素,但它与雇佣一个训练有素的设计师绝不一样。我希望我们可以在后面的文章,提供给开发人员许多实用的技巧,将基于素材的视觉设计元素变得更好。

Redlines and Greenlines

什么是Redlines?什么又是greenlines?!简单的问题。他们是交互体验的蓝图。就像是建筑的蓝图,你可以在上面看到楼梯平面图、侧视图、建筑正面,通过标注尺寸,门有多大、窗户有多大、墙的厚度、水管通道经过的地方、电源出口坐标、楼梯有多高、楼梯采用的材质、涂料颜色等等……在交互设计我们同样有我们的蓝图称作红线。我不确定为什么它们是红色而不是品红……但是我们想是因为红色是经常看到的颜色,容易跳出来,所以UI标识尺寸容易读。屏幕上的redlines显示了一个app不同屏幕,顶部不同成串的测量。这些数字定义了外边距(margin)、内边距(padding)、元素的大小与短暂元素如状态栏。为什么我们需要redlines?我通过Expression Blend就可以解决问题!

很久前在设计过程中我们没有Expression Blend。我知道这会引发一个很长的讨论,所以我在个系列保留了对这个设计工具的细节。我会说不管怎样,对于设计师控制UI到不论谁拿到XAML格式的UI,redlines都是最好的表现技巧。这个人可能叫做整合者,另外一个用XAML或Blend的设计师或开发人员。不论是什么情况,拿到设计与设计app的人不是同一个人。团队仍然可以工作。所以这个人需要一个方式用XAML产生UI与redlines帮助实现。通过redlines就没有歧义,但是如果这个按钮是30×150像素,距离屏幕左边24像素,距离顶部427像素,这时这些尺寸就是位置。不需要讨论。在过去,没有redlines,设计师会设计网站并转换JPG素材(不要使用JPG、只用PNG、没有压缩)给其他人产生HTML与CSS。这个过程会破坏设计,结果会与最初想象不同。Redlines表现了“契约”,一个当事人双方都同意写好的文档!我们会在未来的文章讨论更多的redlines与如何创建。

Greenlines是什么?Windows Phone设计工作室定义为触摸区域。需要按钮会说,10像素的直径,但是它们的点击区域会是20像素(便于用户点击)。Greenlines指明这些点击区域,不论它们匹配的物体大小。Greenlines与Redlines传递不同的信息。

最后(The End)

这个是一个高视角的流程总览,在下面的一周,我们会从细节开始。

下一篇: 理念与概念 ideation&Concept

讨论头脑风暴(brainstorming)方法,草图(sketching)、简易原型(paper prototyping)与讲故事(storytelling)。

(译)Windows Phone中环绕icon的圆圈

原文http://ux.artu.tv/?p=176
译文http://www.mdong.org/?p=2214

在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的小button,同样的,它是一个button——不只是一个icon。你会发现我们不会使用icon作为button。它已经通过加号icon吸引了人去使用——我知道我被建议了。回到开始,正确的接近windows Phone的Metro设计是使用icon button。

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

我们使用icon做为图形,它们提供给用户单项的信息(它们是不可交互的,因此不是button)。例如在电子邮件应用我们使用小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设计语言并不相像,但是这不意味着做为一个设计人员不能探索其它的表达法则的途径。

产品创造过程中经历的三个角色

小神,有一个短平快的职业始端,视觉、产品设计、产品管理都在经历。
角色跟随不同项目调整,也会在一个项目中扮演多个角色。
闲话走着,小神enjoy的每一个角色:

当化身视觉设计师……

基础的VI设定color scheme、logo、字体……
喜欢icon的推理过程,关联icon环境的关系、含义、风格、塑造、轮廓、层次、肌理、灰阶、色彩、光源、投影、反射与折射光线的物体作用、不同状态的效果、动作、开发友好……
最开心的事情是完成第一个icon、继而所有icon的并列、修复每一个pix、设备模拟仿真……
享受蜕变的细节,赋予着图形于灵魂。柔和随心,缓若浑石;落日入理,暗似寒冰……

其中,设计作品不会是艺术作品。艺术作品的创作者,只需自我心境传达,无关形式,无关看客;设计作品更像是把艺术带入普通人生活的艺术再创造,形式为规律所依附,表现为更多人所接受。相信良好的设计作品,过程是理性的,同时,心怀愿景。

当化身交互设计师……

我们定义这个职位在产品过程中,产出信息框架与关联的模型支持。
对于这个职业,受到最深刻的影响来自Stanley。永远冷静、思维缜密、条理表现。
关心需求的设计解过程,遵循标准定义创建不同条件影响下的模型。
最开心的事情是,推演persona的状态、找到事物的共性、标识结构图的元素属性……

其中,熟悉关联标准与增强表现力极为重要。前者验证设计过程的合理,不仅限于平台技术设计标准。后者将文字的信息多元表现。受Stanley的影响,有的项目会用Flash做表现与本地维护协作;当前过程,PPT与Word文档仍然是主流;希望在随后的项目中,尝试更高效的协作流程……

当化身产品经理……

有人说,这个职位在国内变得俗了……
其实每一个职位都会被误读……
忽略title……只是有一个人在产品过程中做这些事情……
关心资源,内部与外部、决定产品可以走得更远……
关心需求,产品大行业的发展、在市场中的定位、用户群体、可匹配或者引导的需求、需求功能化……
关心成本,开发资源投入、产出价值、时间与里程碑……
关心协作,外部、RD、市场、运营……
关心数据……
近来最开心的事情是,更靠谱的估值、搭建新一年的产品市场运营框架……

其中,产品经理直面市场需求,在这个层面有着比其它关联方更宽广的视野,可以从更综合的方向指引产品并给予关联方支持。是不是可以理解为是一个舵手?或许我们听的更多是打杂……

回归职业发展

最早开始接触职业发展这个概念是某场Webcast谈及深度优先与广度优先……
小神更适合做一个什么角色?
不知道……
He just works……

那個下午 離妳最近

设备:Sigma DP1S

地点:北京 圆明园

帝都2011

地点:北京

设备:Sigma DP1S

「milk香港版」交互设计漫谈(2)——社会化分享

为什么分享的图形是“心”?不应该是三点网络还是别的什么??

因为,人在用心分享!用心。

晚上忽然些许感触。一年前的晚上舜日对那个分享定义,略显激动地解释。

不想在这儿考究用户体验抑或是通用习惯,感觉苍白。

只是说,我们有一种态度,让产品设计与生活走得更近。

在这篇文章发布的几天里,milk香港版iPhone迭代了一个版本,再次被推送在官方新品推荐以及热门推荐。

几周前,milk香港版Android首次面世,新品热门推荐。

零推广。

1.2版本的迭代开发,主要功能是社会化分享。

分享的意义

社会化分享,是指在社会化媒体中,基于其分享功能,将信息网络化输入输出,加速组织传播。博客、微博客、WIKI、博客、社交网络、内容社区等,是可以常见到的社会化媒体形式。在国内近两年,社会化分享的传播量又以QQ空间、新浪微博、腾讯微博势头最猛。

社会化媒体最大的特点是赋予了每个人创造并传播内容的能力。

Twitter平等的信息网络,使得每一个独立个体变得真实。

虽然国内的类twitter产品有变质,人与人多了一层等级关系,信息传播也不再充分流畅。但人们依旧乐于低成本的表达自己,传播感兴趣的内容。

最后在这个项目里,我们确定将新浪微博、腾讯微博做为第一批分享通道。

定位与设计探索

milk香港版的前后两个功能版本迭代间隔两个月。

保持良好的迭代节奏、并达成对用户有参与感的互动体验提升,是分享功能的两个产品考量因素。

设计定位

1. 迭代版本的分享功能,需要在视觉交互中引起用户注意。

2. 分享功能的显示与操作方式,沿用已有的设计,减少用户认知成本。

3. 操作流程简化、流畅,层级关系易理解。

功能ux流程探索

简述:入口->(过渡)->分享UI->(过渡)->完成

在当前的UI框架中,我们有三个区域,放置功能入口。分别是:

(点击放大)

头部条,Getit弹出区域,底部条。

头部条

——优点:规范标准设计
——缺点:游离在milk设计之外 不具有一致的美感

Getit弹出区域

——优点:易引起关注
——缺点:增加手势误操作的可能性

底部条

——优点:规范标准设计 易引起关注
——缺点:占用过多空间 增加手势误操作的可能性

权衡的设计,选择Getit弹出区域的非标准设计,统一在已有的信息框架。

这符合用户对第一个版本的认知——弹出区域是被推荐的互动内容。

(点击放大)

如上图,这是一个最终设计的mockups截图罗列。

接下来的分享通道,将提供2个入口,以及允许回退操作的取消按钮。

验证登录,将提供一个webview供用户填写登录。登录失败将停留在这个页面,允许继续尝试,或回退。

登录成功将填写分享信息,详细的分享内容由应用自动填写,包括关联的图像(隐藏)、slogan 、关联的资讯内容,用户可修改。并通过右上角的按钮进行发布。

更多的细节:更换账户的功能集成在该页面,允许用户的快速回退操作。超出140个字符的内容,将红色提示,默认灰色标示。

上传的过程将提供应用状态。并允许因为网络或其它问题的用户回退操作,回退的关闭按钮与提交按钮位置一致,易于理解。

分享成功会提示成功并进入分享前的初始资讯UI,失败将重新回到填写分享信息UI。

通常情况下,用户完成一个分享操作会经历三次操作,分享入口->分享渠道->提交。

视觉设计与交付

将视觉设计与交付合并,是因为沿用了前期版本的设计,不需要探索新的视觉风格,整个过程会十分高效。

保持标识元素的可识别与简约,皮质底纹。

(点击放大)

iPhone资源,基于640×960与320×480分辨率,@2x标识了retina适用的图像。
Android资源,按480×800分辨率导出,以_ad为区分。

(点击放大)

同样针对每个UI的redlines,为开发提供参考。

碎片的设计

默认的API错误alert反馈,只是在debug版本里才会出现。弹框消息提示是个恶心的设计,并且在这个场景里对用户没有帮助。
为什么小按钮没有pressed的状态设计?它们太小巧了,以至于手指按下后,眼睛看不到这个按钮……
应用提交iTunes时的Special设计……更新的应用截图,丰富的颜色与物品。

后记

这是第四篇编号为2的系列文章。。。- -。。。太懒鸟。。太不知道说什么鸟。。。多去看书体验生活咯。。

DiDa…

地点:北京王府井
设备:Mozart

2011留在魔都的影子

地点:上海普陀
设备:EVO4G

收录至《MILK FOTO》创刊号 2012年4月出版

milk_foto_mdongorg

《现在发现你的优势》

呐,上个月leader拿过来了的一本书《现在,发现你的优势》,走马观花的看了些内容,印象不多。

最近是有些许迷茫了,重新拿来,在间隙把内附称之为Strengths Finder(优势识别器)测试做了一遍,稍感收获与慰藉。

您的标志主题

The Gallup Organization 多年的研究表明,效率最高的人往往是那些非常了解自己的优势和行为的人。 这些人最擅长通过制定策略来满足日常生活、职业发展以及家庭的需求,甚至可能达到更高的水平。

回顾您所拥有的知识和技能可以让您对自己的能力有一个基本的认识,但是了解自己的天赋将会切切实实地揭示您始终成功的核心原因。

您的“标志主题”报告中包括 5 项您最出众的天赋主题,它们按照您在 StrengthsFinder 中的测试结果进行排序。 在您所测评的 34 个主题当中,这些主题排在前五位

您的标志主题对于最大限度地发挥那些有助于您成功的天赋来说至关重要。 通过关注您的各个标志主题并加以综合考虑,您可以确定自己的特长、把它们培养成自己的优势,同时在保持连续近乎完美的业绩的过程中享受个人及事业成功的喜悦。

搜 集

你充满好奇。你爱攒东西。你可能搜集信息,譬如词汇、事实、书籍和语录。 你也可能搜集有形的东西,如邮票、标本、古董、老照片等等。无论你搜集什么, 你这样做是因为你感兴趣。你好奇心不泯。世界的激动人心之处就在于其多姿多 彩,变幻无穷。如果你博览群书,你的目的未必是完善你的理论,而是积累更多 的信息。如果你喜欢旅行,那是因为在新的地点你能发现新奇的文物和轶事。这 一切均可供收藏。为什么它们值得收藏呢?你在收藏之时,常常说不清何时或为 何需要它们。但是,未来会怎样?是啊,谁能说准它们什么时候用得着呢?由于 想到各种用途,你什么都不舍不得丢弃。所以你不断搜集、整理和储存坛坛罐罐。 这很有趣。它使你思维常新。而且,也许某一天,也许就在这几天,有些东西会 变得珍贵。

专 注

“ 我走向何方?”你扪心自问。这一问题每天都萦绕脑际。在专注主题的指引 下,你需要一个明确的目的地。没有它,你很快就会对自己的生活和工作一筹莫 展。因此,每年,每月,甚至周,你都做你爱做的事制定目标。你的目标,无 论 长期或短期,都有相同的特点。它们都很具体,都能评测,并且都有进度表。这 些目如同罗盘,帮助你确定重点,并进行必要的修正,以保持航向。你的专注主题十分强大,因为它迫使你进行过滤-本能地判断某个行动是否有助于你达到目 标;无助于此的便被放弃。你的专注最终迫使你提高效率。无庸讳言,这种模式 的另一面是,它使你难以忍受拖延、障碍,甚至迂回,而无论它们多么引人。这 使你成为一名极其可贵的团队成员。当别人开始溜向“有趣的”岔道时,你会及 时把他们带回正路。你的专注主题提醒每个人,如果一件事不能帮助大家通往目 的地,那它就无关紧要。而如果它无关紧要,那就不值得为它浪费时间。你确保 每个人都目不斜视。

审慎

你为人谨慎,处世警觉。你是一个十分关注隐私的人。你深知世事难测。表面上一切井井有条,但深处危机四伏。你并不否认这些危险,相反,你把它们全部暴露在光天化日之下,逐一识别、评判,并最终消除。就此而言,你是一个十分认真的人,你对生活的态度是有所保留的。例如,你喜欢提前计划,以防不测。你谨慎地选择朋友,并避而不谈私事。你避免过度赞扬别人,以免被人误解。如果有人因为你不如别人热情洋溢而对你不满,那就随他的便。在你看来,生活不是一场取悦的竞赛,而更象一片雷场。其他人如果愿意尽可以不顾一切地跑过去,你则不然。你识别各种危险,判断其各自影响,然后小心地落脚,谨慎前行。

自信

在你的心灵最深处,你对自己的优势充满信心。你深知你是个有能力的人-有能力冒风险,有能力接受新的挑战,有能力提出要求,并且更重要的是,有能力履行诺言。然而不仅如此,由于具有自信的主题,你不仅对自己的能力,而且对自己的判断充满信心。当你观察世界的时候,你深知你的视点与众不同。而由于没有人看问题的角度与你完全一样,你知道没有人能为你作决定;也没有人能告诉你如何去思考。他们能够引导,能够建议,但只有你才是自己生活的主宰。只有你才有权作结论,下决心,去行动。这种权威,这种对自身生活方向的终极负责,并不使你畏惧。相反,它对于你顺乎自然。无论碰到什么情况,你似乎总能悟出该做什么。它也许并不适用于所有的人,但它是特定形势下你该做的事情。这一主题给你罩上一层神机妙算的光环。你与许多人不同,从不轻易被别人的论点所左右,无论他们多么巧言令色。这种自信既可能深藏不露,也可能一目了然,这取决于你的其他主题,。但它根深蒂固,牢不可破。一如舰船的龙骨,它能抵御各种压力,使你把稳航向。

理 念

你为理念而痴迷。什么是理念?理念就是概念,就是对大部分事件的最合理的解释。当你透过复杂的表层,发现一个精彩而简明的概念,继而解释事物的本质时,你会喜不自胜。理念是一种关联。你的头脑总在寻找关联;因此,当表面截然不同的现象被某个不起眼的纽带联系在一起时,你会感到新奇。一个理念是对习以为常的挑战的全新见解。你乐于将我们熟知的世界转一个圈,让我们从一个陌生但充满新意的角度看它。你喜爱所有这些理念。因为它们深刻。因为它们新颖。因为它们能正本清源。因为它们引发争论。因为它们怪诞。由于所有这些原因,每当你产生一个新理念时,你都为之一振。别人可能视你为锐意创新、标新立异、富于理性或聪明过人。也许这些你都是。谁能说得准呢?你确信无疑的是理念使你激动不已。而大多数日子里,这就足够了。