Author Archives: echoluo

交互设计的七个定律

关于交互设计的七个定律,开始之前,先说一段写在前面的话:
新手交互设计师,如何迅速成长?简单来说,新手设计师要争取做喜欢的事情。然后从做事中成长,进步会很快。

… much motivations matter. The Zune was crappy because the people at Microsoft don’t really love music or art the way we do. We won because we personally love music. We made the iPod for ourselves, and when you’re doing something for yourself, or your best friend or family, you’re not going to cheese out. If you don’t love something, you’re not going to go the extra mile, work the extra weekend, challenge the status quo as much …

这段话来自乔布斯传,大意是:

… 动机和热情至关重要。Zune设计不好是因为微软没有像苹果这样有热爱音乐和艺术的工作方式。苹果的胜利是因为员工热爱音乐,他们设计iPod是为了他们自己设计。当你是为自己、挚友、家人设计产品的时候,你才会全心全意、不迷失、不退缩。如果你不热爱这件事,你就不会付出额外的精力、时间,更不会去挑战自我、挑战现状 …

对于选择,当然不能盲目和冲动。但是如果思考好了前因后果,理清了风险和局限,就应该有一点点勇气。特别是年轻的时候,做你喜欢做的事情。

对于设计,诚然我们要考虑商业价值、技术局限、公司架构、市场导向、领导意见…… 但是回归本源,还是得看自己最初对设计的期待和梦想。一样,做你喜欢做的事情。

所以,做你喜欢做的事情。:)

交互设计七大定律

“除非有更好的选择,否则就遵从标准”,那在交互设计领域都有哪些法则定律被认作了标准了呢?

作为交互设计之父的阿兰·库珀最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,在交互设计领域有很多经过了时间的验证的法则定律被认作了标准,那么你都知道都有哪些吗?

 1. Fitts’ Law / 菲茨定律(费茨法则)

cf288b82bee7c5c745192cd6cb06baad_b

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。

它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

定律内容:从一个起始位置移动到一个最终目标所需的时间由两个参数来决定,到目标的距离和目标的大小(上图中的 D与 W),用数学公式表达为时间 T = a + b log2(D/W+1)。

它是 1954 年保罗.菲茨首先提出来的,用来预测从任意一点到目标中心位置所需时间的数学模型,在人机交互(HCI)和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

菲茨定律的启示:

1.按钮等可点击对象需要合理的大小尺寸。

2.屏幕的边和角很适合放置像菜单栏和按钮这样的元素,因为边角是巨大的目标,它们无限高或无限宽,你不可能用鼠标超过它们。即不管你移动了多远,鼠标最终会停在屏幕的边缘,并定位到按钮或菜单的上面。

3.出现在用户正在操作的对象旁边的控制菜单(右键菜单)比下拉菜单或工具栏可以被打开得更快,因为不需要移动到屏幕的其他位置。

2. Hick’s Law / 席克定律(希克法则)

定律内容:一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。用数学公式表达为反应时间 T=a+b log2(n)。在人机交互中界面中选项越多,意味着用户做出决定的时间越长。例如比起 2 个菜单,每个菜单有 5 项,用户会更快得从有 10 项的 1 个菜单中做出选择。

席克定律多应用于软件/网站界面的菜单及子菜单的设计中,在移动设备中也比较适用。

3. 神奇数字 7±2 法则

1956 年乔治米勒对短时记忆能力进行了定量研究,他发现人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后人类的头脑就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

4. The Law Of Proximity 接近法则

根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。

5. Tesler’s Law 泰思勒定律(复杂性守恒定律)

该定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计,收件人地址是不能再简化的,而对于发件人却可以通过客户端的集成来转移它的复杂性。

6. 新乡重夫:防错原则

放错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。

如上图所示我们的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无法获取验证码的,只有两者都满足了才可以。

7. Occam’s Razor 奥卡姆剃刀原理(简单有效原理)

这个原理被称为“如无必要,勿增实体”,即如有两个功能相等的设计,那么选择最简单的。在极客公开课?走进 UC 中 UC 浏览器产品经理苏剑南在”UC 浏览器 For Android 产品设计思考“演讲中也有讲到该原理的应用,”如果 UC 手机浏览器要发布第一个版本 UC 1.0,你会选择哪五个功能?‘’

为了遵守神奇的数字 7 法则本篇就只介绍到这里了,如果你还有兴趣自己去找找其他的定律法则,如与费茨定律接近的 Steering Law转向定律、Gutenberg Diagram古登堡图法则以及雷打不动到哪哪适用的帕累托定律(80/20 原则)、三等分原则等。

最后想说的是虽然这些法则定律被很多人认定为标准,很多人也记得 Alan Cooper 说过的那句名言,但从实际出发这些法则定了起到的只是参考或启发作为,作为交互设计人员千万不能照本宣科,因为只有亲自做过后才会深有体会。

何为好的用户体验?

提出这个问题的目的,我希望能找出一种可以把用户体验可以量化的方法。例如好的用户体验可能是点击少,视觉位置漂亮醒目,功能的数量和使用次数的数量是否平衡。

我认为用户体验肯定是可以量化的,例如一种量化的方法就是用最少的点击数操作出最多的功能。

个人对用户体验的目标是,做到“自然”。

举几个例子,

1,我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解锁。自然和人的天性是一致的。大人因为成年后受污染较多,反而不一定立即学会iphone解锁,可能需要看文字解释来理解。所以不识字的小孩可能比老年人更快学会使用iphone。需要用文字来解释的交互不是好交互。

2,Apple在“自然”体验上做了很多尝试。比如,通常PC下的“文件夹”(甚至“文件”)是不太自然的电脑概念,被从iOS里面取消(文件只有和能解释它的应用关联才有意义)。MacOS尝试改变触控板的传统滚动方向,将手指滑动改为和内容一致的方向,并称之为“自然”模式,即,以前的触控板的滑动方向是“不自然”的。这样的改变很需要勇气,但也许Apple觉得长远来看更自然的模式才更有生命力,哪怕暂时会改变用户习惯而让用户不适应。

3,自然往往和人的本性相关的。微信的摇一摇是个以“自然”为目标的设计。“抓握”,“摇晃”,是人在远古时代没有工具时必须具备的本能。手机提供了激发人类这项远古本能的条件。设计“摇一摇”时,目标是和人的“自然”或者说“本能”动作体验做到一致。摇一摇的体验包括:动作 – 摇动;视觉 – 屏幕裂开并合上来响应动作; 听觉:有吸引力(男性是来福枪,女性是铃铛)的声音来响应动作;结果 – 从屏幕中央滑下的一张名片。整个界面没有菜单和按钮。但几乎没有比它更简单的交互体验了。感谢手机,让远古时代人们通过投掷石头来“连接”到其他人,进化到摇动手机来虚拟地“连接”人。

摇一摇上线后,很快就达到每天一亿次以上的摇一摇使用次数。“简单而自然”的体验人人都会用,并且因为“自然”,而“自然而然”地去用它。它也没有高端和低端人群之分。摇一摇给我们的最大启示是,一种通过肢体而非鼠标(甚至触屏)来完成的交互,也许代表了未来移动设备的交互方向(bump在这方面做得更早)。(顺便说下,经常有人说微信摇一摇是学line的,事实上,我们做摇一摇的时候,还不知道有line这个软件。考据一个应用“抄袭”了谁,除了获得心理安慰之外,并不能提升自身的能力)

pony三年前曾经送给很多人一本书,《don’t make me think》,光从字面理解,也是这个意思。自然的体验是不需要用户去思考的。我个人也欣赏原研哉等设计师的设计理念,设计应当挖掘人的本原的体验倾向。

“自然”并不只是在交互等体验上体现,更是一种思维方式。程序员都知道面向对象的方法的核心是更“自然”的对复杂事物的建模方法,“分类”是其核心之一。同样地,产品经理在面对一个复杂问题时,需要有一种符合“自然”原则的建模方法,来通过产品结构模块以及模块之间的联系来映射和解决问题。没有开发训练的人同样可以建立“自然”思维方式,事实上,“分类”是人类模式化和识别外部世界的本能方式,如果有意识地对任何问题都从“分类是否合理”的角度来考察,时间长了,会建立起直觉式的分类感觉,而避免形成“大杂烩”式的结果。而对任何一个界面和交互,同样可以用“don’t make me think”或者“是否自然到人人都能自然而然地使用”来反复思考。

比如,我们会鼓励每个界面尽可能有且只有一个突出的按钮作为用户不用思考就默认去点的操作点。当思考过一千个界面的交互后,对哪些交互是自然的哪些是不自然的就会很容易判断到。即便对于司空见惯的体验点,加以反思也会发现改进余地,比如,对一个列表,需要显示总的条目数吗(比如通讯录有多少人,用户需要这个数字吗)?一个进度条,需要显示百分比吗?数字对用户是自然能接受的反馈吗?

“自然”可能容易导致玄学,因此这里想强调的是,“自然”的思维方式一般是需要长期的非常理性的训练才能获得,而不是突然幻想自己获得了一种使用“自然原则”的能力。记得知乎上有个问题问“乔布斯为什么能凭直觉知道该怎么做”。我认为没有任何人有天生的可重复的直觉来立即成为一个领域的专业人员。比如,对于复杂事物,如何“抽象”为一个简单模型,是需要大量案例锻炼的。但是,如果经过一万小时的有意识的朝某个方向的训练(比如对“自然”的反复思考和实际工作练习),并且是极为理性的思维和实践训练,是可以获得一些直觉的。大量的理性训练有助于形成一种对同类事物的识别模式,这种模式形成直觉。比如大部分中国人其实是没有经受过“简单是美”的训练的,表现在现实中,很多人其实是很难接受一套极简主义的装修风格的居室的。只有当对“极简”有反复体验和思考,才能将“简单是美”变成骨子里的审美观,并体现在设计中。

简单和自然是什么关系?简单为什么就美了?留给你去想。

设计的未来,就是让人生活得更加诗意

「人,是世间万物的尺度」-普罗泰戈拉

 

设计从人类使用工具之始就产生了,随着人类文明的发展,若干年来,工具发生了天翻地覆的变化,但期间人始终为人,操作电脑的现代人与最初使用石斧的原始人在生理特征上几乎没有发生任何变化,双手、五感、大脑… 设计的本质并没有发生变化,以人做为标准依旧可以度量设计。未来的软件 UI、UX 将会如何发展,有哪些趋势呢?

1.私有物品智能化

也就是时下流行的穿戴式设备,个人不太喜欢这个词,感觉狭隘了,看看最近流行的被智能化的私有设备,Google Glass、Galaxy Altius、Nike+ Fuelband、Fitbit、Jawbone UP、Pebble…… 如果尝试画一个圈(如图1)

 

 

中间是人,离用户最近、最核心的圈子就是私有化的一些设备,再外圈一些才是PC、家电等,所以如果有公司能够占据私有物品圈中的核心地位,那也将意味着给它带来惊人的市场和机会,例如:手机,以及iPhone给苹果带来的改变,它算是私有物品目前智能化度最高的物件了。如果将人们最常用的私有物件看做是一个系统,那么在核心圈中,手机将担任智能中心的一个角色,其它设备可能都将与手机进行互联,打造一个私有化的智能圈。 Google推出的Glass明显加速了这个进程,令各大厂商投入私有物品智能化的市场当中。(图2 Google Glass)

2.智能家电的变革

随着通信技术的成熟,移动互联网的成长,以及私有物品智能化的普及,智能家电的发展已变成了一种必然趋势,家电行业也需要在这种时候突破传统家电的框架,为未来家电注入新的活力,需要以全新的眼光也看待传统的东西,将已知变成未知,相信这会为我们带来无数的可能性,看看Nest恒温器的例子,这款产品很优雅地解决外观、功能、节能、以及智能等问题,在用户使用一段时间后,它将了解用户对温度的习惯。就像当年苹果公司发布iPhone时,重新定义了手机,如今Nest所做的也是同样的事情。其实,创新不一定要在前沿行业,只要你有足够的创意,在传统行业一样可以给用户带来惊喜。在这个领域当中还有很多需要进行重新设计及定义。接下来看一下eico为我们带来的 Project HALO,重新诠释了洗衣机的定义,同时还有很多可以值得去开拓、挖掘的地方。相信国内还有很多设计公司接到了来自家电行业的类似设计需求,变革正在悄然发生,难道你还要默默的等着吗?

3.机顶盒的战火

小米盒子的推出确实搅动了数字电视市场,最少让互联网的视频内容提供商,像优酷、爱奇异、搜狐视频等都在观望另一张网上的动静,它们不担心小米盒子,它们只希望小米能够成为一个试水者,期待政策的松动,相信这些公司内部多少都应该有盒子计划,或盘算通过某些渠道能够成为内容提供者。最近也刚试用了小米盒子, 从体验上来讲应该算是国内机顶盒行业里的佼佼者了。像图2,小米手机期望能够在用户的私有圈中占据一个位置,同样在外围的家电圈中也需要占据一个位置,未来家庭物联网生态系统中的智能中心,机顶盒能够很好的扮演这个角色。但现在的机顶盒在交互以及用户体验上并没有发生根本性的变化,还未达到能承载智能中心的能力,相信未来在这一方面进行加强,基于语音、体感或其它交互类型的设计将会是一种趋势,做为设计者如何能够视而不见?(图3小米盒子)

4.平板兴起

可以看看下图,按照现在的趋势,未来2-3年平板电脑的出货量将超过PC,这意味着更多的平板将在未来上市,不同的硬件配置、不同的屏幕尺寸、不同的针对人群、不同的使用场景,设计上也将会产生更多的可能性,同时,因为屏幕的直接原因,移动广告也可能在平板平台爆发。 (图4 平板电脑出货量预测)

5.汽车与互联网的结合

随着经济的发展,能够购买得起汽车的人会越来越多,同时也将成为大家基本的代步工具,经济发达国家,像美国人已经离不开汽车,所以它会成为人们未来生活中重要的一个终端。想像一下,基于汽车的信息化,导航、车况提醒、行车安全、车内娱乐,这也是为什么像Google 这样的公司,开发无人驾驶汽车的初衷吧,以这个作为切入点,控制未来人们在汽车内的状态。

6.微信平台

腾讯目前不需要做一个移动操作系统来承载它的产品,因为微信未来会成长为一个平台,如同 Google 一样,它不需要做一款PC操作系统,只需要以做系统的心态推进 Chrome。移动端的特性确实很适合微信的发展,先将用户所有的碎片时间都抓住,以社交+通知的方式替代传统 Web端的 URL,同时也有可能在 APP 内部应用 Html5 技术,未来围绕它打造游戏平台,使移动变现方式更明晰,随着必会推出移动支付解决方案(会不会以二维码为基础呢?),这些都会是趋势,但如何影响设计呢?随着应用的复杂化,给用户带来的信息压力也会越来越大,微信联系人消息、邮件提醒、公众号消息、朋友圈更新、以及未来的游戏平台、移动支付等等,设想一下,用户打开微信的时候将被排山倒海的各种消息及提醒所淹没,这仅是一个例子,针对可能出现的情况是不是我们应该从现在开始做点什么呢?

7.字体设计的回归

文字,是一种文化的浓缩,具有影响受众的力量,尤其是以象形、指事、会意等六书为主的汉字,其本身就携带着大量的视觉信息。很早之前就有一个观点:限制国内设计水准的重要原因之一就是字体设计。除了对设计者审美要求很高外,中文字体的设计需要耗费大量的时间和精力,但由于国内市场的环境,相应的经济回报相当 有限,所以一般设计师很难完成一套字体的设计,往往本需要有能力的机构进行主导(很佩服知乎上的@厉向晨 @許瀚文 等字体设计师)。个人感受越来越多的人及设计师关注起字体设计,更多的公司及产品在寻求相匹配的字体,像,字节社、锤子OS(最少它说明会去购买 一些字体)、连阿芙精油也弄个字体,这是个好的趋势。(图5)

8.输入方式的创新

上面提及的私有物品也好,智能家电也好,需要面对一座大山–输入方式,如何在进机顶盒上进行有效的搜索操作?利用遥控器?利用手机?还是直接给用户一个键盘 ?是否有更好的方式? 语音:现在中文语音的识别率已经很高了,Google Glass目前也是采用语音识别相应的指令。相对于键盘以及触摸操作,语音能够完全解放了人的双手,具有有明显的交互优势。在移动端主要是因为使用场景的限制,如锤子OS海报所示,大多数用户不愿意在公众场合利用语音进行交互,但我们换个场景,用户是在一个隐私、完全自主的环境,像家里,就可以随心所欲的利用语音的高识别性改进现有交互了,应用在机顶盒、家电等方面。 体感:说到体感让我想起了中国的一句老话「丝不如竹,竹不如肉」,桓温问孟嘉:听伎,丝不如竹,竹不如肉,何也? 孟嘉回答说:渐近自然。在用户体验上,早期的命令行模式就如同中国古弦乐「丝」,后来发展到图形界面,通过鼠标操作所见即所得「竹」,再后来发展的触摸感 应,以人的手指做为直接的控制器「肉」,「渐近自然」这四个字道出了交互设计发展的真髓。XBOX的Kinect ,Leap Motion 等产品,代表了这一个方向上的努力。(图6 Leap Motion) 现有的移动设备也好,将要出现的智能化的私有物品也好,从体验和功能上都受限于输入方式,只要设备不断发展,交互也必会继续发展下去。

9.输出仍以视觉为主

想想我们在上面提到的手机,电视,都需要用户眼睛去「看」,通过看这个行为令用户感知到设计,与其说你在使用智能手机,还不如说是手机屏幕吸引了你的眼 神,Google更狠,期望通过一幅银镜绑架你的眼晴,在你观察世界之时永远隔着一块屏幕,从技术上讲这是一次进步,但在人文层面就留给市场来证明吧。现在各种产品及设备的突起同样是在争夺用户注意力,你有吸引用户注意力的idea吗?

10.简约、朴素的设计风格(flat design)

现在移动端主要针对用户的碎片化时间进行产品设计,但这样设计带来了一个问题–浮躁,用户感觉不稳定。举个例子,如果你是一种重度碎片化的用户(相信知乎 上不少),一定会有常有一种举动,拿起手机,点亮屏幕,其实你也不知道想干什么,看一眼,不获取任何信息,再把屏幕给关上或放入口袋,一再下意识的重复这 个动作过程。简约、朴素的设计风格是潜意识希望规避这种情况而诞生的,让我们回忆一下魅族Flyme 2.0所带来的视觉语言,侘寂!以及锤子OS里拂过屏幕后通知消息全部清除,都是同样在这种潜意识下产生的。保持一种宁静,在这喧闹的环境中有一处能让你 的心感觉平静之所,那将是一个多少吸引人的地方。想想为什么这么多人在旅游时希望能够去一处人迹罕至的地方,除了观赏没有看过的风景外,就是享受这样的一种宁静。这样的设计风格的产生多少带有一些人文情怀。(图7 Google+ Grid by Haraldur Thorleifsson)

11.细致的动态效果

交互是一个动态的过程,虽可具体到某个场景,或对界面元素进行设计,但元素的动作及行为在表现层上也需要进行设计,就需要使用细腻、精致的动态效果来实现了,这些是细节。当视觉风格以简约为主,那真正吸引用户的将会是一些出彩的动态效果,在这方面需要达到的标准同样也是「渐近自然」。

12.设计师的觉醒(人文情怀、匠人精神)

在工业化之前,匠人依靠纯手工生产产品,无法大规模生产,每件产品看起来可能都一样,但会具有微小的差别,一瞬间的创造灵感以及积累的经验造就了每件手工产品的不同。它们每个都具有不一样的生命以及特别的意义,这使其具有了灵性,购买者所追求的不仅是产品本身,还有匠人们为产品所付出的态度与精神,以及蕴藏其中的匠人工艺,这才是手工产品价值所在。设计者以掌握高超的技艺,并制作出骄傲的产品为荣,追求卓越,「嗜之越笃,技巧越工」。虽然,只是在知乎上以文字的方式表达一些理念,但我希望能够成为一名匠人,保持一颗匠心,借用原研哉的一句话「将设计以文字的方式表达出来也是一种设计」。

13.社交综合症(孤独感)

愈社交,愈疏离,朋友被划分为无数个圈子,打上不同的标签,在多个社交产品之间流连。交流简化为评论、@、私信,现实生活中的社交能力不断下降,虽然被无数信息围绕,但内心深处有一种无法察觉的孤独感,注意力越来越无法长时间集中,长文的写作只能放在深夜(凌晨1点后吧),焦点会在多个窗口或多个页面这间切 换,并时常忘记操作的目的性,这可能只是我个人的感受,权当一听。 还有许多趋势值得我们去探索,云、智能交互、大数据、移动支付等等,过 了山,眼界就开阔了,抛弃我们所熟知事物的框架,使其成为一个未知的领域,重新建立认知。 人们总希望自己能够在高处眺望未来,观望着远处的风景,有可能只是个自以为的高处,而我仅期望能够脚踏实地,用不够快的速度向山上攀爬,期待着另一边的景致,低头认清路上的荆棘,预见未来最好的方式就是亲手创造未来。   (部分资料来自网络,禁止转载)

「免费」的定价模式真的好吗?

免费,一直是互联网一路走过来一个比较大的噱头,免费的邮箱、免费的空间、免费的软件,免费的服务,以至于很多时间,我们都觉得,互联网上的东西,都应该免费,而那些收费的反而总觉的比较难接受。另一方面,越来越多的服务倾向于正版免费,而转从其他渠道获得收入,但这真的是「免费」吗?例如网络服务提供商(ISP)往往把盈利转嫁到实际物品或服务提供商身上, 因此真正意义上的「免费」几乎是不存在的( 例如广告),但是实际物品提供商又把广告成本转嫁给消费者,结果是用户的线下消费在无形中为自己及他人的「免费」买单,这样看来,免费是不是一件奇怪的事情?对用户来说,这是好的模式吗?

我对免费与收费服务的区别和界限困惑过很久,然后看到了一句令我茅塞顿开的话:

“如果商家为你提供免费服务,那你就不是他们的客户,而是他们的产品”

 

看明白了这句话,再看那些免费服务,就豁然开朗了:谷歌和百度做搜索服务,使用搜索服务的几亿人就成了一个成功的产品,广告主花钱实际是在购买这个巨大“产品”面前的曝光率;

电视台做各种各样的节目争夺收视率,观众就是产品,用节目吸引人气并划分出观众的年龄、性别、爱好,然后同样将这些分门别类的观众卖给合适的厂家,让厂家在他们面前展示自己的商品;
但是如果你收看付费频道,那你就成了客户,首先不必被广告困扰,其次,电视台对你的态度从“吸引、分类”变成了“服务、满足”;

网游的免费玩家,只需要给他们一些很初级的乐趣就可以,然后通过对乐趣的限制,吸引他们中的一小部分升级为付费玩家(客户)。而大部分始终免费的玩家,实际是被打包成一个巨大的“陪太子读书”的团体,供付费玩家们杀戮、领导、指挥;而且,付费少些的人同样要陪付费更多的大太子们读书;

对大型商场而言,顾客不是直接客户,商铺租户才是,顾客实际是他们提供给各商铺的产品,招揽到适合商铺类型的顾客才是他们的目的。所以,找准商场定位、招揽合适的商家进驻、针对定位进行宣传、甚至免费冷气、班车、座椅、公厕这种小事,都是为了尽可能给商铺提供更多客源。

回到题目中来。免费是好事吗?这个无所谓好坏,免费是种商业模式,关键看免费的目的是什么。
如果希望免费用户升级为真正的付费客户,那就会提供有限的免费服务,同时采取各种方法筛选出愿意付费的用户,并吸引他们升级;
如果免费用户只是纯粹的产品,真正的客户是另一群人,那就会通过免费服务尽可能多地吸引“真正客户们”想要的人,筛选掉无用的;
如果两者兼有,就要分别考虑,如何能达到两者的平衡;如果营销方式有误,可能会赔了夫人又折兵。

所以说,某个免费服务好用还是不好用,大部分情况下取决于商家希望你们这些用户怎么做:
如果觉得不好用,但付费就能变得好用,那就是商家希望你付费;
如果觉得不好用,你选择离开,那就是说你属于商家希望筛掉的那部分用户:不愿花钱,同时也没有作为产品卖给真正客户的价值;
如果又免费又好用,那你和商家其实是各取所需的双赢关系,也正是他们期望的。

(部分论证来自网络,请勿转载)

2014 年移动设备界面设计趋势

如果你是一个APP狂热分子,你会花大量的时间在各种APP的尝鲜中,你会明显感受到一些APP在采用着某种风格鲜明的设计语言,来标榜自己的独特之处,行成自己的设计风格,甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布,APP明显都开始尝试扁平化的设计语言了,除此之外,还有哪些显性化的设计语言崭露头角呢?
在这篇文章里,我想分享一些日益显性的设计语言,让人一眼就记住它的风格,有一些已经随着优秀设计师的摸索,融入到国内移动产品设计里了,而有一些,确实是刚刚在萌芽阶段,需要更进一步的摸索和尝试。

 

一、唯一主色调 | Simple color schemes

为什么我们要定义一个界面多种颜色?仅仅用一个主色调,是不是就能够很好的表达界面层次、重要信息,并且能展现良好的视觉效果?事实上也正是如此,随着iOS7的发布,我们看到越来越多唯一主色调风格的设计,会采用简单的色阶,配套灰阶来展现信息层次,但是绝不采用更多的颜色。

卡塔尔航空公司

卡塔尔公司航空就是这样的设计案例,整个界面采用粉色的主色调,从标题栏到标签页,从操作按钮到提示信息,除了黑白灰之外,全部采用粉色设计,这种简介的的配色风格,反倒起到了很好的信息传达效果,也具有良好的视觉表现力,设计师在内容排版上的技巧实在是加分。

Readability采用红色主色调设计,连提示信息背景色、线性按钮和图标都采用红色主色调,界面和LOGO也完全是一个色系的。而Vivino采用蓝色主色调设计,信息用深蓝、浅蓝加以区隔。Eidetic采用橙色主色调设计,其中的关键操作按钮甚至整个用橙色提亮,信息图标也用深橙色、浅橙色来表达程度。
可以说唯一主色调设计手法,是真的做到了移动端APP的最小化(Minimal)设计,减少冗余信息的干扰,使用户专注于主要信息的获取。

 

二、多彩色 | Hypercolour

而与唯一主色调形成对照关系的,就是Metro引领的多彩色风格,为什么我一定要给我自己的产品定义一种主色调,多彩色就不能是主色调吗?于是出现了不同页面、不同信息组块采用撞色多彩色的方式来设计的风格,甚至同一个界面的局部都可以采用多彩撞色,也产生了不少优秀的设计。

优衣库出品的RECIPE,是一个让人眼前一亮的设计案例,多彩色的设计风格融入到整个APP中,不论是切换标签页,还是在内容组块中滚动,都会变更不同的主题色。色彩切换的时候,还会有淡入淡出的效果,让切换变得自然而然,完全不生硬。RECIPE的番茄钟计时器模块,会一边计时一边播放优美的美食背景音乐,同时切换不同的主体颜色,随着主体颜色的变更,所有的前景文案、图片也会变更为该色系,加上清晰度极高的美食图片,真的是视觉+听觉的双重享受。RECIPE真的是2013年难得一见的优秀设计。

而Peek Calendar、EveryWeather和Harmony这三个APP,是列表多彩色的设计案例,这种列表多彩色,不知道是不是从Clear开始再度流行起立的,用鲜亮的多彩色来区分信息,确实能起到突出的效果,视觉上极其醒目。

可是对于一些内容型的APP,也许并不适用,比如GoogleKeep的多彩卡片,确实是在内容阅读上会起到反效果。百度云记事本第一版设计也是多彩色的,但是后来考虑到文字记事比较多,为提供良好的文字阅读体验,还是把多彩色改成灰白色微质感的设计。

 

三、数据可视化 | Data Visualization

至于对信息的呈现,越来越多的APP开始尝试数据可视化、信息图表化,让界面上不仅仅是列表,还有更多直观的饼图、扇形图、折线型、柱状图等等丰富的表达方式。表面上看起来也不是很难的事情,但是若真想实现,背后的复杂程度也不容小窥。

Nice Weather用曲线图来表达温度的变化,Jawbone UP用柱状图来表达每天的完成情况,PICOOC用折线图来表达每天体重、体脂的变化。移动APP利用数据可视化,可以在更小的屏幕空间内,更立体化的展示内容。

 

四、卡片化 | Cards

卡片也是一种采用较多的设计语言形式,无法考究这种卡片的设计,是从Metro的tiles流行起来的,还是从Pinterest的瀑布流流行起来的。总之我们可以发现,Google的移动端产品设计已经全面卡片化了,甚至Web端也沿用了这种统一的设计语言,据说是Google搜索的体验负责人引领的设计语言统一升级。

luvocracy的卡片流突出信息本身,用大图和标题文字吸引用户,强化了无尽浏览的体验,吸引用户一直滚动下去。Google Now的卡片则更加的定制化、个性化。有的卡片是用来做用户教育的,有的卡片是用来告知天气的,有的卡片是呈现联系人列表的,有点卡片是显示待办事项的。不同的卡片都遵循在一个统一宽度和样式的卡片内,进行发挥和设计。既保证了卡片和卡片之间的独立性,又保证了服务和服务的统一化设计。Shazam则用一种趣味的卡片样式,呈现专辑和歌曲。

 

五、内容为王 | Content First

APP产品的发展,最终的路径势必会跟web产品一样,突出内容,内容为王,当繁华褪尽,纤尘不染,再重新去看APP存在的意义,不外乎是给用户提供更好的服务。与内容相比,所有的设计和包装,都不外乎是一种表现手法,而真正具有价值的APP,一定是内容取胜的。Facebook用190亿美金收购了Whatsapp,这个全是用统控件搭建的APP,并不是因为他的设计多出众,而是因为他的服务足够有价值。

Artsy的图片瀑布流,完全没有用到线和面来区分信息组块,而就是用内容本身做排版,用户可以更加集中注意力于图片内容上。Prismatic利用字体排版,尽可能的内容前置,弱化图标和操作,让用户更集中注意力于内容阅读上。而MR Porter则利用商品图片、名称和价格直接做设计,让用户聚焦于商品本身。

 

六、圆形的运用 | Circle Design

原形是最容易让人觉得舒服的形状,尤其是在充满各种方框的手机屏幕内,增加一些圆润的形状点缀,立刻就会增加活泼的气息,徒增好感。一个有意思的现象是,iPhone的拨号数字键盘,一开始都是矩形设计,迭代到iOS7,均变成了圆形,可以说是对传统电话的致敬,也可以说是增强了界面的柔和感。当然相应的,也要处理圆形的实际点触区域,不要因为设计成圆形点击区域也变小了,导致点击准确率下降了,美观度提升易用性受到了影响。

Beats Music把选择喜欢的标签设计成了圆形,这就比普通的列表、矩形tag的感觉要好很多,更加趣味更具探索性。Movse每天走的步数、消耗的卡路里均用圆形承载,是数据可视化、关键信息显性化的最好案例。Tumblr则把要创建的内容的类型选择,用蒙层+圆形选项按钮来设计,让选择变得专注而明确,又不那么死板。

 

七、大视野背景图 | Bigger Vision image background

用通栏的图片作为背景,也成为今年的一个流行趋势,或者是作为整个APP的背景,或者是作为内容区块的背景,既提升了视觉表现力度,又丰富了APP情感化元素。一些信息或操作,浮动在图片上。这种设计方法,对字体和排版设计要求更高,难度也更多,但极容易渲染出氛围。

 

大视野背景图风格也分为两种,一种像Secret、The Whole Pantry这样的,内容区块中采用大视野背景图,好处是可以利用图片做区块分割,难度是图片拼接后的效果不一定好看,所以可能还需要配合描边、留白等设计手段优化拼接。另外一种就是想Vsco、Flink、Mindie、Soundwave这样的,全屏背景图甚至打通状态栏,前景做内容排版、导航、操作。好处是设计非常具有生命了,所有有朋友把这种风格也叫有计划设计,说的就是回归大自然的设计手法。但风险也是很明显的,就是前景的信息排布设计其实是有很大挑战的,必经花花绿绿的背景太过于干扰注意力,导致前景的文字内容可读性会变弱。所以需要把重要操作用明确的按钮区隔出来,阅读型文字跟背景图要用明显的反色,还是不行的话就把文字浮在半透明蒙层上,解决可读性问题。
最后总结来说,2014年让我觉得印象深刻的7种设计语言,唯一主色调、多彩色、数据可视化、卡片化、内容为王、圆形的运用和大视野背景图。其实设计风格很难有全新的,也是不断轮回的过程,为凸现内容APP都在往轻薄化方向设计,不过保不准哪天,又颠覆回最开始的重质感拟物话设计呢。

详文请参见《elya:2014让人印象深刻的7种Mobile UI设计语言》

用户体验浅析

近年来,人们越来越多地谈及用户体验,甚至将其视为互联网产品赢得市场的最关键因素。但每逢说到用户体验是什么的时候,人们的表述往往抽象不清、或者以偏概全。本回答尝试从一个用户体验设计师的角度对相关问题进行梳理和探讨。

 

用户体验是什么?

用户体验(User Experience,简称UE)是用户在使用产品或服务过程中建立起来的一种纯主观的感受。
用户体验产生于客户与你的品牌、公司、组织所发生的一切互动。这些互动的对象包含了你的产品、官网、帮助中心、广告、微博、邮箱、以及面对面的交谈······甚至只是你产品上的一个小标签。所有的这些都会随着时间的积累而联系起来,形成用户体验。

 

如何评价用户体验的好坏?

业内很多人其实没有搞清楚,当他们在评价用户体验时,评价的实际上是产品的可用性。在没有意识到这一点的前提下,得到的观点往往不够结构化,对实际工作缺乏指导作用。
确切地来说,产品的可用性包含三个方面:有用性、易用性和满意度。

 

有用性

有用性跟产品策划相关,指的是产品所包含的功能是否能够满足用户的需求。用户的需求包括显性需求和隐性需求,显性指的是主需求和关联需求,而隐性需求指的是潜在需求。那么,在提高产品的有用性方面,是不是满足的需求越多就越好呢?显然不是的,需求要满足到什么程度,得结合产品的易用性进行权衡,找到一个你认为合适的点。满足的需求太多将会导致产品变得臃肿,对其性能和用户的认知、操作带来负面的影响。
要对一个产品的有用性进行评估,其实是一件比较困难的事情,它要求你对该产品或与它相似的产品有着足够深入的研究。

 

易用性

提高产品的易用性是交互设计师的工作,易用性又包含易学性和效率性。
易学性指的是用户在接触一个新产品时,最好不用学习也能懂得怎么使用,也就是很多人所说的用起来很“自然”。所以再次强调,如果没有搞清楚我们谈论的用户体验实质上是指产品的可用性,则很容易混淆概念,陷入对其某个构成点的讨论。但是,如果只是这样介绍易学性,显然还不够直观,其真正的内涵是指产品的设计要符合用户的心智模型。要做到这一点,产品的交互设计应该做到符合用户的操作习惯(并非指完全遵循各操作系统的交互范式,因为用户可能对一些非官方的操作范式已经十分熟悉;也不是说绝对不能打破已有的交互范式),或者根据现实的对照物给予用户足够的隐喻。
效率性的内涵则包含易于操控(菲兹定律)、步骤简便(完成任务的点击数)、清晰的导航(时刻知道自己在哪里,不迷路)。

 

满意度

用户最大的满意来源于产品为其提供的价值(有用性和易用性),但除此以外还包含产品在性能、视觉和彩蛋方面的体验。性能指的是产品对用户操作的响应速度、出错的频率以及严重程度;视觉指的是由眼球直接获取的愉悦;彩蛋则是给予用户一些惊喜或者意想不到的小感动。更进一层的话就是多维度的情感化设计,让用户与产品发生情感关联。

 

可用性评估

可用性评估的方法有很多,在这里只简单介绍最常用和高效的两种:启发式评估和用户测试。
启发式评估指的是若干名用户体验设计方面的专家(你自己就是- -)以角色扮演的方式模拟典型用户使用产品的场景,利用自身的专业知识进行分析和判断,从而发现潜在的问题。这种方法成本比较低,而且快捷,但是缺乏精度。
用户测试指的是邀请若干名典型用户在用户体验设计师的观察和交流下完成设定的操作任务(最好能够对屏幕和用户分别进行录像),根据对测试过程中用户的生理暗示(动作、神态)、语言反馈和操作流畅度进行分析,从而发现产品设计的问题。
其它的评估方法还包含问卷调查、用户访谈、和性能测试等等,在此就不一一介绍。
至于用户体验是否可以量化?答案是肯定的,主观的问题也能通过大量的测试进行量化,要深入了解这一块的话,可以学习一下调研方面的知识了。

 

 

扁平化设计原则

设计社区不停讨论关于扁平风格,这种风格很带感。但大多数设计师不能彰显这种风格,或者直接讨厌这种风格。我很实际,创件有用的设计才是好的设计。由于最近流行的扁平风格,而去设计这个风格,但它不适合所有的项目,所以别硬套这种设计风格我们来看一下,这有五个很独特的扁平风格的例子。我们分析一下,再”戏说”一下什么叫扁平化设计风格。

去除特效

Flickr_landing

Shift Landing Page

扁平化设计以其形命名。平的设计就是其独特的二维风格,简单地平。

这一概念点缀— —阴影、棱台、压花 、渐变或其他工具的添加深度工作。每个元素或框中,从图像帧到按钮的导航工具,是脆,缺乏羽化的边缘或阴影 。

不添加额外的元素并看起来更加逼真,不同于skeuomorphic设计项目中使用技巧来使元素更逼近3D 。扁平化的图层在反映在其他项目中,不设计另类的背景图片、前景图像或按钮、文本和导航 。

那么它是如何工作的捏?平面设计有独特的外观和感觉,但没别的了。它需要设计明确的层次结构和元素放置,使用户可以更加容易专注项目,理解交互。虽然越来越多的网站使用扁平化设计风格,或许移动设计和应用中的风格更受欢迎。较小的屏幕占用,少的按钮和选项,让扁平界面的应用使用起来嘎嘎容易 (so easy?)。

简元素

Flickr Redesign

Dailyquotes Screen

Vanillla Wip 2

平面设计使用一些简单的用户界面元素如按钮和图标。设计师只需找些简单的形状,如矩形、 圆形或正方形,保持每个形状孤立。形状边缘可以完美地方角化或者包含一点点曲率。

每个 UI 元素应该只是简单和容易单击或切换。对用户很直观的互动,没有一些为设计而作的过度设计。

除去简单的样式,鼓励大胆的去可点击的按钮上色。但不要混淆简单元素和简单设计,扁平设计的概念也可以像其他设计方案一样复杂。

需要获得帮助开始你的设计吗(译者注:下面是广告)?Designmodo 提供了各式各样的 UI 工具包使用平面样式 —— 从 Square UI FreeFlat UI Free,包含一些简单的 PSD/HTML 用户界面工具包与基本组件,到Square UI 和Flat UI Pro 完整打包 PSD/HTML 用户界面包的网站和应用的设计项目。

专注于版式

Tour Page

ESL - Landing Page Design

扁平化设计

由于元素在平面设计中的简单特性,排版是极其重要的。

字型的定格应和整体方案的设计相符— —高度点缀的字体可能看起来奇怪反对一种超简单的设计。使用加黑字体和简单地和高效的单词来使最终产品具有一致性,可以在可视化方式和文本上作些努力 。

考虑一个简单无衬线(sans serif)类型族有很多变化和权重的主版式的使用平面设计的站点。添加一些别致的触点,一个新奇的字体来作为设计的元素,但小心别使用过火的专业字样 。

字体设计中还应该告诉用户如何使用该设计。标签按钮和其他元素增加引入的易用性和交互性 。

专注于色彩

Input Landing Page

扁平化设计

颜色是平面设计的很大一部分。不同于其他网站设计,扁平设计中颜色调色板往往是强调很多更亮 、更鲜艳。

扁平设计中的颜色 调色板的项目通常包含更多的 色调。虽然大多数颜色调色板最专注于两三种颜色,但扁平设计中调色板通常使用六至八个颜色。

扁平设计中色调趋向充满活力— —想想颜色转盘— —没有淡色或最纯色。初级和次级的颜色是最受欢迎的。另外,一些特定颜色的使用频率较高,在重复的扁平设计中,方位色,复古的颜色— —包括鲜肉色、紫色、绿色和蓝色— — 这些是较受欢迎。

简约的方法

Concept idea of banking app

Secret Stuff

扁平化的设计本质上是简单的,它与整体简约的设计方法相得益彰。 在网站的整体设计中避免太多花哨的东西。简单的颜色与文字就已足够。如果你要添加视觉效果,选择简单的图像。 有些零售网站,比如Svpply(见上),使用效果很棒的扁平化设计,这是将一些条目放在一个简单的背景上做到的。(提醒一下这些图片确实具有一些自然深度,但仍然和谐融入到整个扁平化的设计中)

“接近”扁平化的设计

扁平化设计

Realpixels

一个更多设计师都倾向于赞同的风格,就是“接近”扁平化的设计。 在“接近”扁平化的设计中,使用了扁平化风格的基本主题,但是一些特效被添加到设计方案中。例如按钮,可能包含轻微的梯度或者阴影。设计师通常挑选一种特效并专门用在一种“接近”扁平化的项目中。 这个风格,相对于一些扁平化设计背后的、无特效思想中的刚性,容纳了更多一些的弹性。 设计师们因为附加的深度和纹理而喜欢它。用户们喜欢它是因为,这个风格没有那么生硬,并且有利于引导适当的交互。另一方面,设计师们不喜欢它是因为,它以一种方式结合了两种风格,而这种方式可能缺少了对于一个真正风格的定义。

英文原文:Principles of Flat Design(注:图片稍有改动)