Yearly Archives: 2014

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

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

 

设计从人类使用工具之始就产生了,随着人类文明的发展,若干年来,工具发生了天翻地覆的变化,但期间人始终为人,操作电脑的现代人与最初使用石斧的原始人在生理特征上几乎没有发生任何变化,双手、五感、大脑… 设计的本质并没有发生变化,以人做为标准依旧可以度量设计。未来的软件 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(注:图片稍有改动)

长投影扁平化设计

长投影设计是扁平化设计后出现的又一新的趋势,这一趋势让用户界面的元素和图标的冲击效果达到极致,设计师也将这一设计应用到了网页和移动用户界面的其他地方。

长投影设计已经被广泛地应用于图标和标志中。阴影存在于画布元素中并通常会在背景边框中延伸出对象。我们现在看到的许多长投影设计概念均来自于一些设计师在探索更加富有创意的方式,为苹果公司的新一代操作系统iOS 7设计图标。

正如我预料的那样!长投影设计似乎是扁平化设计趋势的一场变革。在扁平化设计概念下埋头工作的设计师们想找寻更多立体感,在长投影设计的帮助下,他们已经创建出了一个中间地带。

苹果发布新一代操作系统iOS 7之后,大多数的移动用户界面都转向了扁平化设计。设计界下一个大潮便是长投影了。如你所想,这一大潮将会包含那些完全不顾及比例的长阴影,可不知为何他们看起来却是的那么的惊艳。

下面是我们从dribbble、behance等处找到的各种长投影设计范例。

Long shadow a new trend after the flat design The trend is impacting UI elements and icons the strongest, and designers also start using into other parts of website design and mobile user interface.

Long shadow design has been mostly used in icons and logos. Shadows live within the element canvas and often extend outside an object to the surrounding frame. Many of the long shadow concepts we are seeing come from projects where designers are looking for creative ways to build icons for Apple iOS 7.

As already told you! long shadow design seems to be an evolution of the flat design trend. Designers looking to create more depth but work within the concept of flat design have created a sort of middle ground with long shadows.

After the Apple iOS 7, most of the mobile user interfaces is turned into Flat Design. And next big thing coming in design trend is “Long Shadow As you might be able to imagine, this trend includes objects with disproportionately long shadows, and for some reason it looks absolutely fantastic.

Here’s a big list of long shadow examples in flat design that we picked up from dribbble.com, behance.net and all over the internet.

Illustrated Bowiewolf with Long Shadow

Long Shadow in Flat Design-1

Cassette Tape

Long Shadow in Flat Design-2

Typography with Long Shadow

Long Shadow in Flat Design-3

Matsebneesh Mobile UI

Long Shadow in Flat Design-4

Long Shadow Design

Long Shadow in Flat Design-5

Fox Icon

Long Shadow in Flat Design-6

Flat iPhone 5 Adobe Fireworks Template

Long Shadow in Flat Design-7

Rubee

Long Shadow in Flat Design-8

Social Media Icons

Long Shadow in Flat Design-9

Marlboro icon

Long Shadow in Flat Design-10

Twitter Long Shadow

Long Shadow in Flat Design-11

Dribbble long shadow

Long Shadow in Flat Design-12

Apple Long Shadow iOS icon

Long Shadow in Flat Design-13

Mobile company iOS App icon with long shadows

Long Shadow in Flat Design-14

Long Shadow App Icon

Long Shadow in Flat Design-15

SPARK Long Shadow Icon

Long Shadow in Flat Design-16

Flat Icon Design – Long Shadows

Long Shadow in Flat Design-17

Long shadow Mail Icon

Long Shadow in Flat Design-18

Shoppinpal Icon with Long Shadow

Long Shadow in Flat Design-19

Designmodo logo with long shadow

Long Shadow in Flat Design-20

GDJ logo with long shadow

Long Shadow in Flat Design-21

Date App Icon

Long Shadow in Flat Design-22

YouPix Long Shadow icon

Long Shadow in Flat Design-23

Flat Long Shadow

Long Shadow in Flat Design-24

Flat magnify icon

Long Shadow in Flat Design-25

GIG App Icon

Long Shadow in Flat Design-26

Google Play Long Shadow

Long Shadow in Flat Design-27

iOS 7 App Icon

Long Shadow in Flat Design-28

Sync is the New Save

Long Shadow in Flat Design-29

Crockhaus Icon

Long Shadow in Flat Design-30

Long Shadow Design – Superman Icon

Long Shadow in Flat Design-31

Flatbook

Long Shadow in Flat Design-32

MacBook Pro Longshadow

Long Shadow in Flat Design-33

iOS7 longshadow icon

Long Shadow in Flat Design-34

Flat Design Long Shadow

Long Shadow in Flat Design-35

Inner Outer Shadow

Long Shadow in Flat Design-36

FaceTime

Long Shadow in Flat Design-37

Cloud Icon with Long Shadow

Long Shadow in Flat Design-38

Dribbble Mobile App

Long Shadow in Flat Design-39

Minion iOS7 Icon

Long Shadow in Flat Design-40

Flat Icon Frontend”

Long Shadow in Flat Design-41

We’re Hiring

Long Shadow in Flat Design-42

Palette Longshadow Icon

Long Shadow in Flat Design-43

webdevHH

Long Shadow in Flat Design-44

Flat Profile for Social Fashion Network – iOS app

Long Shadow in Flat Design-45

Long Shadow in typography

Long Shadow in Flat Design-46

Long Shadow Design

Long Shadow in Flat Design-47

Long Shadow Google APN improved

Long Shadow in Flat Design-48

Long shadow love: iOS 7 icons

Long Shadow in Flat Design-49

Long Shadow is the New Flat

Long Shadow in Flat Design-50

Source Link:http://blog.goodfav.com/long-shadow-examples-7925.html

 

优秀的界面是隐形的

真正优秀的用户界面会被无视,而糟糕的设计则迫使用户注意界面,而非内容。用户都是带着目的来访问网站的:买本新书、学习JQuery、与朋友分享一篇文章、发现新音乐、写小说或者仅仅是寻找最近的目的地。他们不会只为把玩界面而来。实际上,用户根本不在意界面设计。多年来,台式机系统树立的典范和交互式工具的缺失,都使人们开始思考用户界面,它如何发挥作用?如何让设计增色或减分?但用户真的需要关心这些吗?
用户已经熟知界面的模式和组成元素,但他们根本不在意。多年来,网页设计师们已经在按钮颜色、投影、边框和渐变上花了成百上千个小时,只为了让界面更易用和美观。但事实上,优秀用户界面的终极形态不是易用,而是隐形。
或许你已了解,移动设备是近年来的重头戏。多点触控设备的问世引出了一个轰动性概念——用户界面就是一系列对内容进行的点击操作和事件,移动设备的崛起令人机界面更加自然。这一现象有诸多原因,但对直接对内容进行操作,和摒弃过时的具象化事物(像台式机里的那些)赋予了这些设备极高的易用性,因为它们的界面几乎消失了。
不过我们仍然需要用台式机和笔记本来工作,我们也需要浏览网站、使用web应用程序。那些神奇有趣的多点触控技术,和它创造出的更加自然的新式用户界面,却未必能派上用场。那么,既然还不能为我们所用,我们要继续创作那些过时且“碍事”的UI元素吗?当然不行,隐形界面应该是每位UI设计师与开发者的目标。

界面,而非障碍

img_0007

界面不该成为用户浏览内容或达成目的的障碍。达成目的之前,用户根本没必要经历那些UI陷阱和胡乱编排的导航。多年来,我们都在使用和发明各种UI障碍。表面上它们似乎能解决某些问题,却给用户增加了更多负担。面包屑就是个极好的例子。通常认为,要让用户了解自己在应用中所处的位置,面包屑是个不错选择。但它更多时候只是平添了不必要的UI元素,影响正常的用户体验。
尽管面包屑并没有直接给用户带来负担,但它占据了屏幕宝贵的空间资源,而这本该用来引导用户达成目的和展示内容。增加面包屑来应对导航问题,不如直接设法解决它。为“修复”某些UI问题,经常会引入新的元素。然而,太多不必要的元素积少成多,最终界面成了一个障碍重重的迷宫。若是一味增加UI元素,界面还如何隐形?

解决界面问题

Metro_UI

这与我们前面所讲的息息相关,但是要打造隐形的界面,意味着要解决更深层次的问题,你得真正解决那些问题所在。我的背有点小毛病,当然,敲一敲和服用镇痛药都能止痛,只是治标不治本。我缺乏运动,经常无精打采,像石头一样僵直。我们对待界面问题也是一样。创作网站和APP时,我们总会发现各种千奇百怪的问题。多数时候我们只是做些表面文章来解决问题,界面下却隐藏着更深层次的问题。此举只是头痛医头,脚痛医脚。
不过这已经成为惯例了,因为我们总得学着与项目经理、网站主、股东、项目进度或仅仅是懒惰抗争。我们总以此为理由进行用户测试和AB测试。“我知道有些不对劲,不过还是通过用户来验证一下这是否真的是个问题。”若想要实现隐形设计,这可不是什么好方法。完全透明的界面意味着解决设计中最深层的问题,它们才不会出来作乱,成为用户的绊脚石。

宽容的设计

music

宽容,往往是隐形用户界面的一个特征。自然的界面并不限制各种探索性的点击。当用户进入死胡同,它不会轻易显示错误信息,而是将用户引向别处。
宽容用户意味着他们犯错时不要惩罚他们。用户错误操作,往往因为他们无法预料结果。我们总将问题归咎于用户,并弹出大大的警告和错误提示来惩罚他们。当用户踏入陷阱时,隐形的界面会避免责罚他们。相比弹出错误提示,优秀的界面设计能预测应用中出错率较高的地方,并提供解决方法,甚至引导跳转。
宽容也意味着网站或APP的规则可以被用户打破。这是下策,不过假设你打破了妈妈的古董花瓶,想要把它粘回去,却因为手指粘在一起被抓住,这肯定是最深刻的教训。用户弥补他们犯下的错误时,他们将更了解你的APP,别出现那些大红错误图标和晦涩难懂的文案。

首要任务,达成目标

Speed_Detector_Bigger

这是个交互设计的绝佳案例,是Cooper正在进行的项目,鉴于它尚未上线,我应该只被允许小小提示一下——以目标为导向的设计。你的界面设计也应该围绕用户的目的展开。不是用户要什么或喜欢什么,去他的,根本不是这么回事。而是挖掘用户的需求,然后指引他们达成目标。这很滑稽,用户对于他们想用什么样的产品总能夸夸其谈,却对自己的目的一无所知。你的职责就是挖掘他们的需求,而非要求。“要求”会导致界面臃肿、障碍重重,令用户厌烦。
找出目标并让用户尽快完成它,他们不在乎其他事情,尽快到达目的地才是对他们最大的回报。不需要为此设计漂亮的界面,避免用过度设计来补偿糟糕的目标引导。

一致性

inside-b

不错,在用户体验的世界中,我们一直在谈论一致性原则。界面设计中,一致性是重点。如果你的界面元素都放在相同的位置,有着相同的颜色和功能,那么你的界面会逐渐消失……像Marty McFly一样。不过,如果只是把所有按钮放在每页的同一个位置,或用某个特殊操作执行相同的功能,并不能解决一致性问题。
在用户体验设计中,我们还经常借鉴APP或网站中那些一致或相似的东西。我之前写过文章,解释了相似的环境如何使得界面更舒服。然而我们要创造真正的隐形界面,不是为了一致而一致,光有这些还不够。隐形界面有着“真正的一致性”,不仅元素、数值、链接和其他数据展现形式统一,场景和含义也是一致的。
例如,你应该注意到了,其他很多APP把登陆按钮或链接放在右上角,所以你会觉得,既然其他APP都这么做,放那里肯定错不了。但在你的APP中,放在那个位置或许就毫无意义。与其继续创造有瑕疵的界面,不如将界面元素放在最合适的位置,然后在整个产品中延续其一致性。

结论:鼓舞用户

最后,优秀的隐形设计还需要鼓舞用户。当界面脱离了用户的操作步骤,直接将他们引向最终目标,用户会集中精神在他们的目标上。
界面应当通过数据和内容的无缝切换,来鼓励用户与它建立良好的关系。用户有时喜欢探索一个界面巧妙的产品,甚至玩得很开心。但更多时候,对他们而言不存在的界面更有鼓舞作用

交互设计中的poka-yoke(容错性)

poka-yoke是日语词汇,意思是“预防犯错”。这个概念最早出现于上世纪60年代的汽车制造领域。该领域的工程师新乡重夫(丰田精益生产专家)创造了这个概念。

新乡当时正在解决一个丰田面临的问题:装配工人在组装转换器时经常忘记加装两个必须的弹簧。

他的方案是重新设计转换器的装配流程,将之变成两个步骤。

在新的流程下,工人需要:

1 准备好两个需要加装的弹簧,放在一个指定位置

2 从指定位置取出弹簧,装配进转换器

虽然装配转换器的流程变长了,但是结果是错误率大大降低,意味着总体结果是产品平均质量提高了。

不难发现,poka-yoke眼下已经被应用于软件界面。

例如在wordpress里,在删除帖子功能里就有容错机制。

从后台删除一个帖子一般需要两步

1 首先将帖子移动到回收站

2 在回收站执行永久删除

如果将整个删除帖子的交互过程拆开,可以看到用户要经过5个预设的动作才能完成删除。

1 鼠标悬停在帖子标题,以展现操作菜单

2 在操作菜单里点击“放入回收站”

3 点击回收站链接,进入回收站界面

4 再次悬停在帖子标题,展现回收站的操作菜单

5 点击“永久删除”

虽然这个删除过程并不是最快速的方案,因为删除内容被先放到暂存的回收站,但显然,增加的容错步骤显著降低用户不慎误删除一个帖子的机会。

另一个poka-yoke的例子是usb插口。

要正确连接usb,我们都知道必须用正确的朝向来插入,以保证数据正常传输。

为了避免错误的插入方向,插口和插槽都做了设计,当方向错误时会挡住。

此外作为另一层容错,在插口正面哟一个usb的logo,视觉上提示这一面应该被看到(向上)。

然后,usb插口并不是完全预防了错误,因为用户仍然可以尝试用反方向插入接口,发现错误后,用户需要自己纠正这个错误,重新以正确方向再次连接。

最理想状态下的poka-yoke,是从交互最开始就完全消除了犯错的机会。

例如,apple的lightning数据线,作为功能和usb一样的产品,却对朝向完全没有限制。

在apple的数据线产品里,可以看到,容错性达到了“完全消除犯错的机会”。

交互容错性最大的好处,无疑是体现了对用户的周全保护,减少了意外情况造成灾难后果的机会--例如不慎删除了辛苦写了几小时的帖子。

poka-yoke可以归结为站在用户体验的角度尽可能提高效率:更小的错误概率能令用户更觉得安心,整体上更快完成目标,从而提升整个系统的交互设计层次。

最后,poka-yoke的发音和我的姓很像。(译者注:作者的姓对欧美人来说,很难发音)