Tag Archives: 用户体验 & 交互设计

[译文]为儿童设计网页(Design Web Interfaces For Kids)

译者:MUX翻译小组(雷昊 小气的神)

孩子们会花大量时间上网,但是认知和生理局限会在他们上网的时候给他们带来很多挑战。再加上粗糙设计的内容和暗模式,真是糟糕。作为网页设计师,我们有责任创造出帮助儿童提高能力的事物,让他们变得更聪明,而不是相反方面。

这篇文章将会给你一些观点,关于从心理学角度分析孩子们喜欢什么,以及这些是如何影响他们使用网页的。我们还会讲到一些实用的设计指南,来为儿童设计更好的网页。

范式转移

1989年3月12日,第一个互联网浏览器Mosaic诞生了,实质上这标志着我们所知道的互联网的诞生。这一天之所以如此重要,是因为这种“普通人”互联网的诞生代表着一种范式的终结和另一种范式的开始。没有互联网作为信息和娱乐的主要来源,在这种环境中成长,我们与如今的孩子相比是处在完全不同的另一种范式。

  • 前互联网范式

我们生活在一个没有互联网的模拟计算机范式时代。回到高中时期(1995年至1998年)我清晰的记得我在学校和公共图书馆寻找我能用在学习中的好书。

5641c3309b97c.jpg

回到模拟范式,我们非常依赖书籍作为信息来源。(图片来源:Les Chatfield)

我们在某个动作发生时对时间的控制,构建了我们的心智模型,就像从书桌走到书柜一样。我们可以选择走得快些或走得慢些。归根结底,我们可以控制时间。这也可以解释为什么我们中的很多人会在网站内容加载很慢时如此的不耐烦。我们的大脑记得事情在掌控中的样子,因而不喜欢在网站中那种无法控制的感觉。

  • 互联网范式

对于生来就使用互联网作为主要信息来源的这一代人,他们在认知时间控制概念的时候拥有不同的心智模型。他们知道一个网站会尽可能快的加载,但无法再进一步人为干预它。他们知道一个动作发生时长的不可控。

对此我做了一些课题,观察孩子们使用电脑。如果加载的慢了,大部分孩子会同时做一些别的事情—如果周围有电视他们会看电视,或者在社交场合下和他们旁边的孩子交谈。

前不久,我帮助我七岁的孩子在他的电脑上安装谷歌地球。它下载了很久,我记得由于不能忍受它如此之慢而离开了房间。而他只是打开了电视开始看卡通片,然后当下载完成时叫我回来。

“数字土著(Digital Native)”不存在

我不相信有“数字土著”。当然,孩子的成长伴随着iPad、智能手机和电脑,但那不意味着他们自然而然变成了使用数码产品的专家。事实上恰恰相反。

一个iPad(或者其他平板电脑)是一个封闭局限的环境,孩子们不会制造太多危害(除了买很多蓝精灵果和删除照片),同样这也没有教会他们任何关于技术如何运作、计算机如何运行和如何运用技术创造新事物的本领。

5641c34a091e7.jpg

(图片来源:Brad Flickinger)

用着iPad长大并没有使孩子能够使用和理解计算机,或者互联网。

尽管怀疑“数字土著”,但我认为事实上孩子们生活在一个不同的范式下,对他们与网页的交互方式和对网页的认知方式上有很大的影响。从小在一个触屏的环境中玩耍,会很大程度上影响到他们的心智模型。(我们回到这一点上。)

另外,他们是小孩。他们没有像大人一样充分开发大脑和身体技能。所以,当我们为他们设计的时候我们需要换个角度思考。

Read More …

milk香港版——瓦尔登湖的语

我们被迫生活得这样周到和认真,崇奉自己的生活,而否定变革的可能。……可是从圆心可以画出多少条半径来,而生活方式就有这样的多。一切变革,都是值得思考的奇迹。
——《瓦尔登湖》

不想这样结束,但真的结束了。

————

很荣幸,在这个移动应用市场的早期,全程handle的产品设计。
很荣幸,在没有marketing资源推动的日子,依然收到的三方媒体社区用心点评:

Softonic
MILK香港版电子刊物 http://milk-hk-ios.softonic.cn/iphone
Tech2IPO
HT实验室:做“走出去”的设计之Milk评测 http://tech2ipo.com/44460/

特别想记下milk当家总监kabo长期给予的耐心与支持。对于一款阅读产品,产品设计与品牌内容资源同样重要。
————

There is no time。还是要几个产品碎片留下⋯⋯

无间

很想让使用它的人也知道,我们传达信息间的连贯与流畅。这种意愿的传递,不再只停留在静态。
在内容视图里,标题与内容将通过带有金属气息的线条分割,箭头标示了两者的层级关系。
切换视图的状态,银色箭头跟随标题长度居中的运动场景与开合方向,指引信息间的关联。
不孤独。

冰山

呼吸的节奏

回归平静,在睡前,在感受呼吸的背影间。

一直在你身边

献给这个产品过程、产品开发团队与milk同事。
尤存。

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)。

「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的系列文章。。。- -。。。太懒鸟。。太不知道说什么鸟。。。多去看书体验生活咯。。

移动界面设计点滴(5)——主功能入口设计 tabbar or grid-based

传统的iPhone Android应用主界面功能入口是基于tabbar的设计,区别无非是tabbar的位置是top or bottom。(我们甚至还看到了针对这个位置的讨论,当然两者都有其设计的意义)
而随着产品功能的不断加入,会出现tabbar的空间不能满足需求的情况,你知道iPhone 默认只预留了5个位置(more并不是一个好的设计),在保证主功能可视与可点击的情况下,Android也摆脱不了tabbar设计受限的情况。
是的,我们需要改变这一个传统的设计。或许你在许多应用上已经有所体验——基于grid的设计。

首先,我们再重新回到前面的讨论,tabbar究竟出现了什么问题?综合来看,主要为以下几点

  • 无法满足一次展示全部功能或者更低操作成本下展示的需求。
  • tab切换存在不同tab执行重叠任务的可能,对于用户专注某一flow任务产生障碍。
  • 对操作本身的消极设计,增加误操作的可能性,也成为在单一任务执行时的视觉噪声。

grid-based的设计是如何解决上述的设计?

  • 在一个页面中允许加入大量的icon入口,并通过页面滑动轻松完成对功能的浏览。
  • 结合清晰丰富的功能入口,专注单一功能的流程设计。
  • 页面上更少视觉与可点击元素的加入,更clean的设计。

如何进一步的完善grid-based设计?

  • 我们在windowsPhone找到了答案——live tiles。它承载了更多的信息传达,而不只是icon。
  • 专注单一功能的核心flow,不要妄图在单一任务的操作过程中提供其它功能入口。
  • 随时终止并回到主功能入口的可能。

即便我们在上述的文中将tabbar批判的体无完肤,然而grid-based本身也不是完美主义,面临的挑战在于

  • 页面层次变深,对flow设计提出更高的要求。
  • 如果应用的主要功能不超过5个或者仅是单一功能,你并不需要这样一个扩展性极强的设计。

走完上述的文字,隐约察觉这其实是metro与iPhone/Android的碰撞。我想说,metro是一次设计思维的变革,它使得人们开始归回信息本身,任务被更自然的执行,而不再游离在冗余的页面元素。

在随后的几个月,你也会看到我们参与实现的应用——X。

(译)手持设备的可用性研究

原文 usability for handheld devices versus computers
译文 手持设备的可用性研究

当前有许多用户在不同的特定环境中使用不同的移动设备——包括智能手机、数码相机、MP3播放器、电子书与GPS(全球定位系统)。当用户离开桌面电脑之后,这些用户界面在设备上该如何表现?如何对设备进行设计——包括由硬件驱动的控制、交互模型与功能键布局——这将决定设计与软件应用的可用性。我们如何理解用户在移动中的体验。接下来会回答这些问题,以及更多关于手持移动设备的移动用户体验、交互设计与可用性的问题。

设计中唯一重要的事情是设计本身如何与人相关联。——Victor Papanek

企业逐渐地在电子消费产品中引入更多的高级技术,手持设备每天占用了人们越来越多的时间。用户与手持设备的交互与以桌面电脑为平台的网站有着同样的交互麽?什么类型的挑战是用户日复一日地在使用范围如此之广的手持设备所面对的?什么是可用性专业人员在研究不同平台可用性所考虑的?

单手还是双手?

第一个非常大的问题是,用户需要单手还是双手来操作设备?通常与桌面电脑的网站交互时,在操作一个标准键盘时使用双手,使用鼠标或其它点击设备需要单手。有些时候这个决定是在情景下驱使的。比如,用户在驾驶交通工具操作GPS设备时只有一只空余的手。有些决定是从文化角度驱使的。比如,在日本的智能手机用户习惯于单手操作,因为他们经常在奔驰的列车上用另一只手抓住栏杆。

无论我们打算用单手还是双手使用设备,都会很大程度上影响到我们如何设计它——因此,影响到用户如何理解它的可用性。可用性专业人员需要在计划测试任务与创建测试情景时,将该因素加入考虑。

一个标准的键盘还是不同按键的集合?

当用户与桌面电脑的网站进行交互时,一个标准的QWERTY键盘提供了一个近似的始终如一的交互模型。然而,当与手持设备进行的交互,用户可能需要操作特定的设备或者通过硬控件,如按钮,或直接触摸屏操作控件。手持设备有许多不同的形状,有很多不同类型的控件。比如,Sony阅读器与Amazon Kindle有非常不同的按钮集合。Sony阅读器的特点是有10个数字按钮、一个五维按键集合。Kindle有一个QWERTY键盘、前一页与后一页按钮、一个五维按键集合与一个后退按钮。两个企业设计它们的设备为用户提供更好的阅读体验,它们的设计师在考虑如何使用户与数码阅读设备交互,当然基于不同的想法。五维按键集合可以使它们更容易的上下左右操作。一个QWERTY键盘使得输入更容易。

当与不同类型的手持设备交互时,有时缺乏标准化的体验会增加用户的挫败感。因为缺乏标准化,可用性的专业人员必须为移动设备的可用性做系统化地思考,而不只是专注在一个孤立的按钮。因此问及如用户理解如何使用这个特定的按钮,等类似的问题时,需要有更有意义、更有益的提问——一个特定设备的全部按钮集合如何帮助用户完成任务,用户可以成功地找到操作设备的方式麽?他们在按钮集合中迷路了麽?

什么是设备的应用场景?

用户不会在真空中使用手持设备(宇航员除外^^)。他们在驾驶汽车并使用GPS;或者在列车上与朋友发送短信;或者他们在旅途中使用相机捕捉风景;或者他们在公共汽车上并使用Kindle阅读图书。所有的事情发生在围绕联系用户而创建的设备使用的应用场景——这是设备的用户体验的重要组成部分。用户使用手持设备的情景、环境在评估其设备的可用性时基于非常不同的考虑因素与事件。

例如当用户与数码相机进行的交互,他们经常尝试捕捉好的镜头——可能是一个飞逝的瞬间——有非常短的时间与需要操作相机的注意力。设计师如何优化相机的设计——确保用户可以轻松无误的按下正确的按钮——是相机可用性非常重要的一方面。当用户操作一个GPS时,驾驶通常是一个最高优先级的任务。用户只有有限的注意力可以操作GPS,在驾驶场景中,用户界面的按钮要足够大,以方便使用。这同样是为什么语音命令目前在导航系统用户界面中扮演了一部分的角色。

研究手持设备可用性的方法

上述考虑到的想法是非常清晰地,但在实验室中的可用性测试对于研究手持设备可用性并不理想。当有一个特定的实验室测试环境需要参与者参与,他们会从进入实验室开始即进入一个测试模型。他们开始会思考实验设备,将要在其中发生什么,在测试中什么样的事情他们可能会经历。我听过当进入一个可用性实验室的参与者有像这样的评论“这个是新的…”或者”我在此之前从没做过…”。一旦人们走出实验室,他们会回到原来的自己——开始使用他们自己的手持设备,但与刚刚他们告诉我们他们经常操作的方式完全不同。

虽然参与者在可用性测试中有完全的自由,用户研究者已经创建了一个非常好的测试情景,在实验室的测试还是不能提供丰富的真实生活可以提供的环境。真实生活的文化与环境元素是不存在的。在实验室环境中,不可能重现所有的真实生活的小事件,这些小事件会影响到人们在真实环境中使用手持设备的方式。

理想中,如果一个用户研究者作为一个无形的影子会更好,跟随在参与者的周围而不是强加到他们的现实中。例如,当参与者在驾驶中努力尝试使用一个新的GPS系统,研究者可以坐在他的旁边,观察他的体验中发生的所有问题。有许多的方法可以使得用户研究者、可用性专业人员与参与者走的更近。

对家中或工作的拜访是经常优于在实验室的可用性测试。当研究者与参与者到非常熟悉的地方,参与者在演示典型的日常设备使用会更舒适。参与者与研究者的会话,发生在参与者的日常环境会经常帮助想到使用设备的特定的故事,这经证明是非常有价值的并提供了很好的洞察机会。

短期、纵向研究对于手持设备的可用性研究也非常有益。更长的观察周期是使得参与者能够在一个更松懈的自然的方式体验设备,允许出现更多随机的故障与问题。如果参与者有足够目的明确的保持接触,通过纵向研究在每一天的过程中发生了什么,日记也可以很有成效。然而,回顾日记可能并不是对于所有的参与者都可行。许多人发现在每天晚上保持久坐,并思考一天究竟发生了什么是一件困难的事情。在真实的设备中的日志可能是一个好的替代选择。它会提示参与者去做简单的记录而无须考虑是否需要。

总结

用户从手持设备中,面对着与桌面电脑的网站交互的非常不同的可用性挑战。作为可用性专业人员,我们需要考虑一个设备从单手或双手的使用。同样的我们观察用户与手持设备的交互,这将有益于系统地思考设备的可用性,而不只是局限于独立按钮的使用。

当前情景在手持设备的使用中扮演一个非常重要的角色。家庭或工作拜访、短期、纵向研究、日记比起实验室的传统可用性测试会更合适。

移动界面设计点滴(4)——为了阳光而设计

Lisa是一个sales,一天上午她拿出手机准备定位当前与客户的位置,确定路线。却发现因为过于强烈的光线,看不清列表结果页的地址。
Bill有睡前用手机查看订阅、处理邮件的习惯。却总会因为屏幕刺眼的光线,需要时间逐渐从光晕中适应辨清字体。

类似的场景在日常生活中你或许也有碰到。
部分硬件设备也为其提供了相应的解决方案——屏幕亮度调节,可以手动控制屏幕的亮度,适应不同的环境,以及在更高端的设备上支持的光线感应器。
同时我们也看到应用商所做的努力。更有贴心的是阅读应用的夜晚阅读模式,这为字体与背景提供了弱对比度的配色设计。

但我们在更多的应用软件中发现,对光线环境的设计需求被忽略。
我相信也会有更多的方式与设计,为用户带来良好的针对环境的优化体验。
忘记浮躁的成本效益,专注产品UI设计。

设计原则

  • 布局结构清晰
  • 清晰的布局结构是对一个应用是否可用的基本要求,功能布局层次鲜明,使得新用户通过低成本的学习快速记忆掌握应用的功能布局,能够在短时间内完成既定的任务。

  • 内容清晰
  • 保持图标的简约以及文字的可读尺寸,切忌因为过于追求特效与视觉美感,忽略最基本的可读性。

  • 适合的灰度与色彩对比度
  • 为不同的环境模式提供相应的对比度设计,以减少用户的阅读疲劳,其中仍需保持内容的可读性。

  • 声音事件的反馈
  • 设计不应局限于视觉体验,在enable操作后触发的声音,会让用户确信每一步操作的正确,以及填充某些环境下视觉设计的死角。

  • 适合的环境元素参与
  • 更多具有感情色彩的元素参与,将赋予界面更多的灵性。将weather的元素加入reader不是一件很温馨的事情么?

视觉设计范例

Google Map

清晰的功能引导设计,绿色、红色的Pin可以直观的确认目的地与当前位置,导航列表简洁,可以更可靠的工作在日光之下。

QQ浏览器

提供了白天模式/夜间模式的切换,在夜间周围光线较弱时,一定程度上缓解了视觉疲劳。

商铺点评

为室内/室外环境分别做了配色以及字体设计。在室外的实际应用过程中,更大的字体与对比反差带来了良好的阅读体验。并概念性的加入了天气组件,为出游逛街提供了更多便利。

特例

当然,并不是所有的应用都需要针对性的UI设计,该类设计较适用于内容主导的生活相关应用。在游戏中设计多套色彩模型并不是一个好主意。

谈谈兔子的《关于浏览器的一些观点》

2011/4/21注:此文已被《UCDCHINA火花集2》收录。

早上在蓝色理想的更新推荐里看到了这篇文章。总感觉有些不舒服的地方,随便说说。

  1. 浏览器的出现
  2. 互联网的出现是人类信息交流方式的一次划时代的革命,在这场革命中有两个技术对互联网的发展起到了决定性的作用:一个技术带来的人类信息交换方式的改变,人们普遍的使用电子邮件时信息交流方式;另一个技术则是由伯纳斯-李和安德里森带来的网络使用方式的改变,人们普遍的使用万维网和网络浏览器。
  3.  
  4. 网络浏览器的出现,不仅使超文本文件格式的优点得到了充分的发挥,而且也使对互联网用户的技术要求降到了最低点。不用任何电脑方面的知识,不用经过任何训练,只要用一个小小的鼠标,就可以操作。正是浏览器的使用,才使得每个人都可以享受到上网的乐趣。
  5.  
  6. 浏览器是桌面系统的掘墓者
  7. 从浏览器诞生之日起,就成为了互联网扩张势力的神兵利器。Google以浏览器为自己实力的施展平台,为用户提供着具有丰富想象力的,具有良好用户体验的一系列产品;在线文件处理系统、在线日程安排等日益威胁着以微软为代表的传统的桌面文字处理软件系统。
  8.  
  9. 在传统的桌面软件时代,用户必须在自己的电脑上安装不同的软件来获的不同的需要,虽然很多时候很多软件都很少用,我们必须要安装,必须要给这些软件留出很多的储存空间;而在互联网时代,我们可以把软件储存在一台远方的服务器上,当我们需要的时候,就可以从该服务器上直接调取就可以了,我们不再需要把他安装在本机了。我们都可以把应用软件的端口都整合在浏览器的平台上。

诚然浏览器的诞生,促进了互联网的发展。而互联网的发展,推动力确不仅仅是浏览器。深层原因是人对互联网服务的需求。
浏览器只是一个实现需要的工具,而且又受制于其载体——系统平台。
浏览器真的是桌面系统的掘墓者么?
我认为,浏览器与系统平台是一种寄生关系。
Mosaic起于Unix,由于在Mac与Windows平台的推广而普及。
Netscape风光无限,但为什么会败在IE手下?
与时下Firefox、Opera的功能强大、高效相比,IE甘拜下风。
但是为什么后者的市场占有率仍然高达70%以上,无数的网站前台人员将对其的兼容性测试置于首位?
原因归为一点,微软主导了系统平台从而主导了浏览器市场。

看起来Google的在线服务非常强大,甚至有超过微软桌面平台的势头。
但是,请清醒一下。
你不担心数据安全性么?
你会将重要的公司数据档案交给Google编辑管理么?
你有应急措施,在Google服务器突然出现故障的一天,保证业务的正常运转么?
显然,答案只有一个——在本地存有备份,并能够在本地平台编辑管理。
因此建议将类似Google提供的一些在线服务做为第二选择。重要数据仍应由桌面平台处理,比较重要或者可有可无的服务酌情在存有本地备份的情况下转移到网站的在线服务。

  1. 浏览器时代的用户体验
  2. 因为浏览器的出现,使得使用互联网的技术门槛已经降得很低。不用任何电脑方面的知识,不用经过任何训练,一般的普通老百姓就可以操作。所以使得浏览器时代的用户体验设计变得更加复杂和多样化。不同层次的用户对于浏览器着不同的心理和生理上的感受,所以浏览器的个性化设计就是用户体验的一个重要方向,我们需要为不同的用户设计出面向不同的需求的浏览器。另一个方面是浏览器作为一个各种Wed服务接口的平台,其平台设计的易用性是很重要的一部分,毕竟对于用户来说浏览器只是一个中转站,浏览器本身并不提供信息内容,所以对于浏览器的设计来说,怎样设计好其跳转、怎样设计好众多信息接口的布局和信息构建就是比较重要的内容了。

当前廉价的硬件使得人们更有愿望来利用本地客户端的强大计算能力实现需求,对浏览器的需求将大大降低。
如有一个简单的调查,您是喜欢基于浏览器的游戏,还是喜欢由客户端执行的网络游戏。
事实是后者将占有绝对优势。
带宽的持续增长使得基于Internet网络交互更为丰富,人们对互联互通的需求持续增长,简单的B/S结构已经不能适应。这是一个趋势。
观察一下IE最近几个版本的公布时间,IE5(2000年) IE6 (2001年) IE7(2005年) IE8(推测2009年)。
可以发现,微软正在逐渐放缓对浏览器的研发,而将网络实现的注意力转移到桌面平台之上。
当前的Silverlight技术也只是一个由浏览器到桌面平台的过渡产品。
在平台发展的带动下,浏览器所实现的功能将会由桌面平台瓜分。
浏览器将和RSS合作主要用于静态信息展示,绝大多数动态的计算任务将交给“网络服务+胖客户端”。

一家之言,给大家增加一些饭后的谈资。^^

下面提供一个强大的桌面搜索引擎,基于WPF。
下载点击这里。
WPF_search