Category Archives: Ux

交互设计 用户体验

2018~2020 FOCUS & 迷

改变用户行为的设计模型(Presentation)

前些时间面向内部做的一次培训课程。
也可能是最后一次吧。

定义、设计人造系统的行为设计,是交互设计的范畴。
认识、理解、改变行为设计,是交互设计师的必备能力。

改变用户⾏为的设计?为什么?
『存在』的探索,身份的焦虑。提升交互职业竞争力的基础课程。
范围界定,从交互设计的研究对象,根本产出物为定义、设计人造系统的行为设计。
⽤户与环境/设备产⽣交互,建⽴模型以了解⽤户特征。
认知模型、语言模型、输⼊装置模型、⾏为模型。
以⽤户操作行动或任务的执行过程为主线,建⽴的模型被称为行为模型或任务模型。
以行为到动机的关注点变化存在5种典型的行为模型。
TOTE模型、GOMS模型、KLM/TLM模型、卢⽐孔Rubicon模型、TTM模型。
PDF

Download the PDF file .

IXDC2016-前瞻活动-有效的交互设计创新

ixdc_2016
4月的一个周六下午,参加了这个设计活动
接到命题的时候,我在湾区休假。讲说的内容也是在此期间断断续续写成的。
对待“创新”,心情非常复杂。开始我用了一个更为激进的阐述方式,后来决定改的柔和。
这个课程其实是准备作为今年团队内部的一个课程。
是关于HCI中用户认知结合交互设计项目管理的内容方向。
你会发现,“创新”这个词,特别是设计师、从事设计工作的人,很喜欢挂在嘴边的口头禅。
创新是什么?工作中,我们会有好多理解。
作为面向消费市场的设计师,我对创新的理解是十分务实的。
这个定义我认为是对的——创新是契合、发掘用户需求,创造性解决问题的方法。
那很关键的一点是,创新不是目的,是手段、是方法。
创新是设计师最喜欢提的概念。
这是不同于工程师。工程设计采用计算、类比法,工作的性质主要是改进、完善而非创新;设计通常意义上,非常讲究原创和独创性,需要丰富的想象、创新能力和前瞻性,而不是严谨、繁琐的逻辑。
我们需要通过创新来体现设计价值,但天然的,创新的结果很难测量。
但这里就有引申出一个误区,因为创新很重要,会有出现为了创新的设计的情况。
而面向市场的项目,为了创新而设计,容易产生过度设计(over-design),是做不到有效的、无益的。
过度设计这个概念,是我刚工作时候,便被反复提醒的事情。
有一些过往很有代表性的例子。
Clear有丰富的手势,完成一个todo,删除一个todo,创建一个todo都是使用各种手势完成。
某个浏览器的手势自定义,大量的手势,甚至还原一个tab需要画一个U型。
某个浏览器,你会发现菜单项,是大量没有文字说明的图形标识。
这几个产品是把设计技术进行了过度使用,手势触发行为的过度使用、图形符号的过度使用。
通常造成这样的直接原因,主要有三个。缺乏专业理论支持、缺乏体验商业价值、缺乏落地可实现性(典型的dribbble们)。
如何避免这些误区,做有效的交互设计创新。在我的理解中,最需要有意识的做过程管理。这又会细分为4个方向。

  • 聚焦改变用户行为的设计。
  • 匹配项目商业诉求。
  • 控制实现成本。
  • 测量创新结果。

因为我们的主题是做交互设计创新,所以接下来看下如何做来改变用户行为的设计。
第一点,其实有个小问题——为什么是关心改变用户行为的设计?
背后一个在工作中反复界定的问题,就是交互设计与视觉设计的区别。
有一个基本原则是,一同对设计体验负责,但交互设计解决行为,视觉设计解决感受。
如果是视觉设计,这里就可以换个词,比如情感化设计。
这里我主要会来引申一个TTM模型,这是美国心理学教授普罗察斯卡(prochaska)提出的,它整合了若干个行为干预模型的基本原则和方法,故又称为行为分阶段转变交叉理论模型。
这个模型的核心观点是,人的行为变化不是一次性的事件,而是一个渐进的和连续的过程。

  • 前意向阶段,人们有了改变行为的意向,处于这个阶段人对结果是不可知、死心。混沌状态。
  • 意向阶段,打算改变、意识到改变成本,但没有实际行动,非常矛盾。典型的拖延症喔- -。
  • 准备阶段,付诸了一些行动步骤。制定计划。
  • 行动阶段,做出了行为改变。但这与最后的行为改变终止不一样termination。
  • 复发阶段,因为各方面的问题,回到了之前的某个阶段。
  • 维持阶段,保持行为并形成习惯。完成行为转变。

我们可以通过刚刚手势自定义的案例来理解这个模型。
这个交互设计的创新初衷是,会带来便利,显然相对于做键盘输入,一个手势的步长很短。
那我们看下,最后这类设计没有普遍使用,究竟出了什么问题。以『Restore Tab』为例。
作为个体用户的你可以反思一下是哪些步骤什么阻止了你使用这些手势。

  • 前意向阶段,我看到这个界面之前,并不知道还可以这样Restore Tab。
  • 意向阶段,因为完成Restore Tab只有一步,也愿意尝试。
  • 准备阶段,准备使用,于是会进行准备记下来,U代表Restore Tab。
  • 行动阶段,我会从设置回去,尝试使用。
  • 复发阶段,误操作的成本回到意向阶段,忘了是U回到了准备阶段。
  • 维持阶段,难以进入维持阶段。

那我们稍微延伸,为什么手势的行为改变容易复发阶段。
这里有一个比较广泛的手势可用性定性测试,显示:
基于首要任务的精准复杂任务,人们愿意使用简单、原始的手势。
比近距离基于手指的手势,人们更愿意使用肢体、基于手的手势。(83%)
Finger-based gesture手势设计还有一些特性,类比桌面与手机的手势行为,你会使用手指点击,替代鼠标点击。手指滑动,替代鼠标滚轮。手指拖拽,替代鼠标拖拽。这些行为模型对于你已经建立了很久,本质上也只是一种隐喻。
总而言之,在手机中尝试创建新的手势越来越难。
也可以看到一些成功的手势教育的case。Twitter的下拉刷新。
在我们的产品百度浏览器里,也有类似的创新设计。
需求:大屏幕的点击关闭按钮,精准点击成本高。
解决:选择手势,能够提供更好的便利性。
历程:开始将双指滑动手势,作用于全局的新建、关闭、切换行为。收敛为主功能视图中主要任务的补充关闭行为。始终提供教育(For新用户)。
通过用户行为数据跟踪,与用户访谈,很容易形成用户行为习惯。明确这个目前就是一种有效的创新设计。
创新真的不是一蹴而就,改变用户行为,是渐进与连续的过程。
行为改变在每个阶段,也都有一些特有的方法。
我结合例子来讲3个方法的使用。这个是百度浏览器的K12主题项目。
业务诉求:引导页·提升主题的使用量。
问题:因为内容产量不满足,用户会在没有可用主题的情况下自然跳过。
我们希望改变用户行为,减少内容不满足引起的流失。
这里有一个模型演变对应用户行为改变的过程。
这就是一个引导页,包含已有的主题,以及一个跳过按钮。我们不希望他跳过,用户的跳过的潜台词也是这儿没我需要的主题。
那我们如何改变这个行为,先来分析下这个行为过程。

  • 前意向阶段:可以不跳过,告知可以解决问题。
  • 意向阶段,用户的问题是获取麻烦?使用称为“痛苦减轻”的方法,只要点击那个按钮就可以了!因为完成一件事情只有一步,也愿意尝试。
  • 准备阶段:用户将准备进行点击。用户的问题是点击定位成本高?使用称为“自我决意”的方法,许诺参与互动就会获得想要的主题。
  • 行动阶段:大量的铺垫后,点击一下!
  • 复发阶段:再进来好像也没有变化?使用称为“权变处理”的方法,建立契约,这个也是关联了一个许愿单功能。许愿的主题将被实现!
  • 维持阶段:愿意进来并参与许愿单,改变用户的跳过行为,形成习惯!

最后给留个大家一个小故事,这是我前几天去湾区的飞机上,发生的事情。
Adams是那架飞机的执飞机长,这是他退休前最后一次执飞。在他三万多的飞行历史中,从未折弯过一块金属部件,也未曾使一位乘客受伤,更没有收到过一张飞行罚单。在他四十六年上千万英里的飞行里程中,规避过上千次雷暴,挫败了发动机故障、爆胎、电子设备失效等事故,也因此没有出现在6点的突发报道中。共计运送50万人次的乘客安全达到目的地。他以坚韧和细心保持安全可靠的飞行记录。
其实,蛮荣幸能够经历这样一件事情。也希望自己能够以专业精神,做对人们有益的设计。与大家共勉。
讲说文件如下↓
IXDC2016_北京前瞻_有效的交互设计创新_之改变用户行为的设计_董腾飞_0409_2.pdf

Download the PDF file .


IXDC官方新闻稿《腾讯、百度、滴滴资深设计师为你解读移动产品的交互设计创新》
IXDC官方新闻稿《有效的交互设计创新之改变用户行为的设计—大会前瞻论坛北京站精彩回顾》

[译文]为儿童设计网页(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 …

我的困境

my_plight_2015
2015 at Beijing
首先,很荣幸有同学能看到这样的分享。
坦白讲,我不希望更多人的了解。
是担心你不能从中获得能量,它也没有想象中有趣,也没有看起来光鲜。
我主要是来分享自己在IXDC做的一个WorkShop。
我做这个事情的出发点,并不开心。结束后反思,更不开心。
时常陷入深深的自我怀疑。
直观上,这个WorkShop是包装了一个概念。
之所以去总结这一概念,是发现只用文字,甚至自己也难以清晰。
在工作层面,我非常务实,不喜欢故弄玄虚。
所以从旁观者角度,这样一个Presentation的结果,十分反感。
在过去的一年甚至更多时间。
我接收了大量合理不合理的产品需求。
无休止的争辩,夺去了很多能量,疲于应对。
造成这样事情的原因可能有很多,我不黑我的合作团队。
但我看到的是,每年合作团队的结构变化。
特别是PM团队每年一个意义上的Leader,至此又洗完了一波。
作为一个职能团队的一员,以及个体。
我始终在寻找兴趣点,或者是激励你驱动你的动力。
如果面临这样一个反复的窘境,你的信仰又会是什么?
我尝试寻找新的兴趣点。
尝试优先继续在这家公司里待下去。
我短时间Part-time支持了一个新业务,也确实重拾了动力。
但依然碰到了一样良莠不齐的PM,以及其它团队。
当然,可能他们也是这么看待我的。
最终从过往的业务进程,我并没有找到最原始的成就感。
我同样在怀疑自己的三观是否不正。
但我还是尽可能的让自己更清晰的活下去。
借此机会去重新梳理自己的的工作内容。
也就有了后面这样一个SRBP模型
这不是一个结果,这是一个结果。

IXDC2015-WorkShop-B3-移动产品UX设计思考与实践(SRBP模型)

ixdc_2015
今年参加了IXDC2015WorkShop主讲,7月16日下午的活动,主要内容是讲解一种全局思考IXD工作的方法。

介绍一种结果导向的工作方法,帮助设计师与管理人员由新的视角认知设计,厘清设计工作的重心与执行方法。助于设计职能更有效的与团队协作、实现良性成长。

目前终于暂时告一段落,一件心事落定。
从春节前开始,经过部门内报名、筛选,然后着手具体的内容编纂,重写反复修改,新项目入案例……
现场有些遗憾,希望再次能够从容。
下面是几个主要的PDF格式的PPT文档链接,供需要的同学取阅。
官方新闻稿
WorkShop的主体文档
IXDC2015_B3_移动产品UX设计思考与实践_董腾飞_小气的神_0716.pdf(100P+)

Download the PDF file .


SRBP模型地图V1.0

Download the PDF file .


SRBP模型地图V1.0 & 范例内容

Download the PDF file .

方法概念
SRBP模型是一种通用设计方法论,用以认知设计对象,并辅助建立系统的执行方法。
SRBP是4个名词的首字母缩写,分别代表Solid(有效)、Revolution(革命)、Break(突破)、Professional(专业)。
核心理念

展现设计视角与设计价值,结果导向的设计行为决策思维。
判断因素

1. 重要性(KPI/OKR、BOSS)
2. 耗时(1/2Q为原点)
3. 行为定义(主/被动、外/内向)
4. 工作方法(适合的方法论)

大屏手机时代,如何重塑界面交互


12.30.2014 约稿于百度MUX新官网上线
这是一个大屏手机的时代。
强调这件事情的意义在于,这已经成为事实。
Medium上存在一份个人统计。
在过去7年,新上市的手机屏幕尺寸越来越大。
157-001
以4.5英寸为分界点,我们更清晰的看到这一变化。过去的两年,4.5英寸的比例从10%升至80%。
157-2
在国内的过去3个季度,使用FHD HD分辨率的手机从38%的份额增至50%。
157-3
【图】《百度移动分发报告2014H1》
更大尺寸的屏幕可以承载更多的内容展现,更适合游戏、阅读与播放视频,体验得以提升。
157-004
【图】《百度移动趋势报告2014Q2》
然而屏幕尺寸的上升并没有引起用户操作上的过多不适,有51%的用户已经适应双手操作。
157-5
【图】《How Do Users Really Hold Mobile Devices》by Steven Hoober
即使用户单手操作,在操作大屏幕时的相对盲区(深色区域),需要更多的响应时间,也可以被接受。
157-6
【图】《Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?》By Mikkel Bo
即便如此。3.5英寸~4英寸,依然是平衡单手操作与体验的合理尺寸范围。
157-007
这样就产生一个矛盾:用户拥有更大屏幕的尺寸,但从人机交互的角度,并不完美。
面对这一现状,从APP产品界面设计的角度,需要做出改变。
大屏幕拥有典型的可用性问题:纵向单手操作机身,边角、顶部、左右侧边难以触达,放置在以上盲区的点击入口,将导致体验路径中断。
交互设计角度的最佳实践:
1.设计安全区域,避开操作盲区。
示例,百度搜索结果页,根据视线规律,典型的左上角操作盲区可以用于logo展现。
157-8
2.注意使用场景路径触发的连贯性。
示例,在百度手机助手Android中下载百度浏览器,操作区域集中在安全区域。
157-009
3.更多的使用可拖动的浮动按钮,给用户更自由的操作可能性。
示例,百度浏览器Android中翻页/返回顶部的组合按钮。
157-010
4.更多的使用手势,并提供暗示。
示例,百度浏览器Android的删除窗口操作。
157-011
5.更多的使用语音作为输入方式。
示例:生活手记中使用语音替代键盘输入。
157-012
6. 横屏Pad化的操作设计,以及更多的内容展现。
示例,百度浏览器iPhone的横屏设计,如同网页的Responsive Layout概念。
157-013
在界面交互的层面之外,在不远的时间,硬件存在更多的优化可能性。
1.更窄的边框,更大的显示比例。
157-014
2.柔性材质。
157-015
3.“手机”成为服务的触发者,屏幕投射与隔空操作。
157-016
《The World as a Display》
之所以将讨论的范围扩展到硬件,是希望设计师在针对具体屏幕设计的同时,能够从另外的视角,思考人机交互的变化与可能性,激发创造力。
当前是大屏手机的时代,推动你的手机APP产品跟进吧!
一些有价值的相关基础研究链接

  1. 百度移动分发报告2014H1
  2. 百度移动互联网发展趋势报告2014Q2
  3. The Rise of the Phablet: Designing for Larger Phones
  4. Common Misconceptions About Touch
  5. How to design for thumbs in the era of huge screens
  6. Designing for Large Screen Smartphones
  7. Mobile UI ergonomics: How hard is it really to tap different areas of your phone interface?
  8. Insights on Switching, Centering, and Gestures for Touchscreens
  9. A comprehensive look at smartphone screen size statistics and trends

(译)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设计语言并不相像,但是这不意味着做为一个设计人员不能探索其它的表达法则的途径。

NUI自然用户界面(Natural User Interface)


NUI不是一个新名词。
只是经历近年的一些新产品,有了更贴切的感受。
特别是消费电子终端界面CLI、GUI、NUI的变化。在桌面端,对象通常是显示固定的屏幕,设计师专注于键鼠驱动下的视觉效果。到了移动端,拥有更多传感器与交互方式,便携使得移动设备不限时空,传统专注于固定场景与操作的设计思路不合时宜。
NUI的概念恰好touch到这一变化(并不局限于消费移动设备)。
设计亦不存在创新,只是发现。
社区 http://nuigroup.com/forums
Wikipedia NUI定义 http://en.wikipedia.org/wiki/Natural_User_Interface
自然用户界面自然在哪儿 http://blog.sina.com.cn/s/blog_4caedc7a0102dzpk.html
NUI视频集(proxy)http://vimeo.com/channels/nui
概念
“自然用户界面”(NUI)是下一个的人机交互(MMI/HCI)的模式转变。基于传统的人类本能的交互模式,如触觉、视觉、声音、运动和较高的认知功能,如表达、理解和记忆。自然用户界面的目的,是利用了一种沟通方式,更广泛的权力,利用有广泛技能的人才,通过传统的物理相互作用收益。
笔记
作为一个学科;NUI目标在于探索研究受到自然启发的计算技术,另一层面,尝试根据信息处理与交互模型理解我们周围的世界。通过它们的学习我们复制真实世界的环境,利用新兴科技与传感技术,获得在物理与数字客体间更精确与优化的交互。
从经验来定义自然交互:人们自然地沟通是经由手势、表情、运动,通过观察与操作物理客体来探索世界;主要假设是他们应该被允许与技术的交互,如同与日常真实世界的交互。自然用户界面的特色是一种新的建筑美学,关于如何在物理空间伴随人类感官,迁移计算到真实世界、创建沉浸式体验。
Shneiderman(1983)解释了用户控制的核心思想,包括:
可视的客体与操作
迅速的、可逆的、渐增操作
通过直接、使人感兴趣的可视化操作,替代复杂的命令语言语法
相关的关键字与领域
Open Source
开源
Cognitive Science
认知科学
Human Computer Interaction
人机交互
Computer Vision
计算机视觉
Linguistics
语言学
Multi-Touch
多点触控
Design (…)
设计
Artificial Intelligence
人工智能
Brain Hacks
Human Factors
人机工程
Interaction Design
交互设计
Usability
可用性
Information Visualization
信息可视化
DIY (Do it yourself)
DIT (Do it together)
Psychology
心理学
Philosophy
哲学
Physics
物理学
Natural Computation (http://en.wikipedia.org/wiki/Natural_computation)
自然计算
相关的人体传感技术

Voice recognition
声音识别
Finger identification
手指触摸鉴定
Gaze vector
Facial expression
面部表情
Handheld device movement
手持设备动作
Biometrics (body temp, heart rate, skin impedance, pupil size)
生物测定(体温、心率、皮肤抗阻、瞳孔大小)
相关的产品
Apple iPhone
Microsoft Surface
Microsoft Natal
Microsoft Roundtable
Microsoft Windows 7
Amazon Kindle
Reactable
Pulse Pen
Nintendo Wii

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