首页

图文组合的布局该如何选择?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里



          





蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

什么是高级感的设计?看这里

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


设计师们,经常听到需求方说:「我想要那种很有高级感的设计」,看到T台上的超模,你可能会忍不住说:「啧啧,这张脸真高级」……

但是,每个人对「高级感」定义不同,它会受到个人审美、教育水平、成长环境、文化价值等因素影响。那么,这个被人们天天挂在嘴边儿的「高级感」到底如何定义,标准又是什么呢?

今天就跟大家分享下,我最近的相关思考。

一、什么是高级感?

关于「高级感」,百度百科上并没有这个词条,在一定程度上可以说明,这个词本身就是很难定义的。

我尝试着换个思维方式,看看什么是低级?低级意味着:多欲求的、简单的、盲目的。那么,反过来看「高级感」,大概可以解读为:克制的、的、特立独行的。

1. 克制的

说到克制,我想到了德国工业设计师 Dieter Rams,他的「设计十戒」中有提到「好的设计是尽可能的无设计」,体现出简洁、克制的重要性。

比如:无印良品,在「性冷淡风」的背后充满了对欲望的克制。

产品设计以更亲近自然的棉、麻、羊毛的材质配上木本、黑、白、灰色。不管是从造型,还是从用色上都极度的克制,但是给人高品质,很舒服的感受。

反而下图,高饱和度和纯度的配色设计,给人有一种反自然的,人工造的颜色的感觉,显得服装比较廉价。

那么,品及时尚圈的设计,又是怎么考虑呢?

可以看出,他们服装从简单利索的剪裁,到高级灰(莫兰迪色)的配色,正是我们所说的「克制」,给人一种奢华且高级的感受。

为什么克制的用色,给你高级的感受呢?因为,这样会削弱色彩对人情绪的影响,反而有治愈的能量,有一种颓废的性感。

下面这幅画,是意大利20世纪著名的版画家,油画家乔治莫兰迪的(莫兰迪色也是根据他的名字而来)。在他的画里,所有的色彩都渗入了灰色和白色调,失去了原本或艳丽或凝重的本色,柔和优雅,而又统一的混合在一起。用现在的话来说就是:克制、留白、极简。

目前很多服装设计、室内设计都在效仿这种配色方式,显得更有品质。

比如,今年热播的《延禧攻略》,一改以往流量电视剧那种高饱和度,艳丽的配色,犹如一股清流,让人眼前一亮,感觉把整部剧都带的高级了很多。

以上可以看出,克制的造型及用色、适当的留白、极简的画风,反而显得更加自信,从而给人传递出高级的视觉感受。

2. 的

人们常说,细节决定成败。其实,让人们感到「高级」的事物,都有一个共性:对细节追求。

比如,前段时间看快乐大本营,里面对《延禧攻略》中演员服饰的刺绣细节进行讲解,当时何炅用「很高级」夸赞。

我就在想,是什么触发了他评价「高级」。

后来发现,是因为剧中人物服装上的刺绣全是纯手工的。针法多样,包括复杂的手推绣、打籽绣、磐金绣、珠绣……而且,团队都是曾经参加过故宫文物翻修的匠人们。

为了无条件的贴近历史,这一件皇上的衣服花费了8个工人半年的时间进行制作。

因此,让何炅潜意识里感到「很高级」的,正是因为仅仅为了一部电视剧,在演员服装上耗费这么大的功夫,这种对细节的追求。

再拿科技产品举例,比如:iPhone,由于「对称设计」可能是人们能感知到的最原始的美,很多情况下手机受限于内部设计,很难在表面做到对称。

但是 iPhone 为了遵循「对称式」设计,投入非常多的人力去解决(上面),而对比三星Galaxy S6 的设计(下面),看起来就略显尴尬。

它们对产品每一个方面都精雕细琢,尽管用户不一定能注意到,这种工匠精神,让人们觉得苹果手机不仅仅是一款产品,更像是一件艺术品,同样给人高级的感觉。

3. 特立独行的

人类本能习惯于盲目追随、容易妥协。因此,独立思考、特立独行且自信的人或事物,常给人很感级的感觉。

比如,在网红脸盛行的今天,随便逛个街,都充满了浓浓的玻尿酸和欧式平行大双眼皮的味道。虽然并不丑,但是总觉得不够高级。比如,柳岩就评价过自己属于「低级脸」。

为什么超模那样高冷的脸蛋会给人一种高级感呢?

因为,她们有特色的五官长相,意味着不向大众主流审美屈服和妥协,而且非常自信。同时,高级感也意味着,在 TA身上看不到欲望、谄媚和讨好。

再比如,日本的服装设计大师——山本耀司。在人们都追求时尚和潮流,偏爱女性婀娜的曲线和靓丽的色泽的时候,他却以反时尚设计而著称。

他大胆发展日本传统服饰文化的精华,具有独立思考,形成一种反时尚风格。这种与西方主流背道而驰的新着装理念,不但在时装界站稳了脚跟,还反过来影响了西方的设计师。

总的来说,高级感是克制的,它极简、低调、且优雅;高级感是的,对细节的完美追求、具有匠心精神;高级感是特立独行且自信的,不盲目追逐潮流、不讨好、不妥协。

二、高级感的接受度?

虽然我们认为「克制的」、「的」、「特立独行的」给人以高级的感受。但是,真的是所有人都能接受吗?

不可否认,有的人就是觉得花里胡哨的东西很高级,比如:在美甲上镶一些比吊灯上还大的钻;穿一双松糕鞋,鞋底恨不得比自己小腿肚还高。

因此,我就在思考两个问题:影响审美的因素;大众对「高级感」的接受度。

1. 影响审美的因素

不管是个人审美、教育水平、成长环境,还是价值观,我觉得决定审美的背后,是「经济」这只无形的手。

不知道你有没有发现一个规律,越落后贫穷的国家,却喜欢艳丽的、繁杂的设计。

而相反,越发达的国家,反而更青睐简约、淡色。

原因是经济落后的国家,人们缺少的是「丰富」,想要的更多色彩,更多花样。

而经济发达的地方,人们已经拥有足够多,因此,内心中追求更多的是:我需要什么?我是谁?什么对我不重要?

人们对过于爆炸多样的商品会感到「焦虑」,「害怕」因为选择的太多,反而想要抽离。

因此,像无印良品这类克制的、做减法的、回归本质的物品,反而受到人们喜爱。

2. 大众对「高级感」的接受度

这里的「大众」就先指我们中国大众吧,他们能接受「高级感」的克制,极简吗?

我们从消费时代进行分析,目前日本处于第四消费时代,它的特征就是上面所说的,不再盲目的追求品带来的满足感,而是追求除了物质以外什么才能让人变得幸福。

而中国呢?

大多数人认为,中国正处于第二、第三、第四消费时代共存期。在偏远的农村,处于第二消费时代,他们的观念是「大的就是好的」,「繁琐是好的」;三四线城市,处于第三消费时代,他们的观念是「个性化、品牌化」追求与众不同,喜欢名牌货;一二线城市,处于第四消费时代,更加崇尚无品牌,休闲倾向,整个社会趋于共享。

但是,我认为,随着中国经济近几年迅猛发展,互联网的快速普及,大家接受信息的程度慢慢趋同,就算非一二线城市,大家的消费观念及审美水平也在随之改变。

比如:抖音里,很多四五线城市的小姐姐们,穿衣及化妆风格都很ins风;同时,越来越多不因为取悦男性,而是突显独立女性的打扮。

越来越多的北欧极简装修风的流行……

总的来说,大众的审美水平和消费观念会受经济的影响,而中国大众的消费观念正在往第四消费时代慢慢转变,对真正「高级感」的事物,接受度越来越高。

三、互联网产品中高级感设计

上面举了很多传统行业案例,其实互联网产品设计中,也在往「高级感」方向走,践行着「极简」和「克制」的理念。

比如:年初的谷歌「ALL-White」风。众所周知,谷歌的设计师是极简主义界面的忠实粉丝。

下面是优化前后对比,移除大面积的色块,采用大面积留白,体现现代、简约的感觉。

移除多彩的图标,采用极简的线性表现方式。

再比如,百度的设计,一年前也在「高级感」的设计理念上进行深挖和落地。

从以下两个维度可以看出:克制的配色;的细节。

1. 克制的配色

拿「简单搜索」举例,它是百度的一款搜索APP,以简洁清爽的视觉体验,简单的操作交互,吸引了大量用户,而且零广告。

在界面的用色上,非常克制,采用以「黑、白、灰」为主,目的是为了让用户聚焦内容本身,而不是为了设计而设计。

包括 icon 的处理,以纯色的线性为主,更加现代、简约。

2. 的细节

大家都知道,黄金分割是最普遍也是最能引起人美感的。我们所熟知的蒙娜丽莎的脸、雅典的帕特农神庙等都应用了该比例设计。

其实,在看似普通的百度搜索首页,同样遵循着这个比例,让有规则的美,严谨的融入其中。

包括栅格系统在设计中运用,这种来源于数学的美学,将有助于用户,更有效和愉悦的阅读及获取内容。

以上可以看出,不管是传统行业还是互联网行业,亦或者是未来的人工智能的设计,都在往「克制」、「」的方向发展,让人人都能享用到优质、高级的设计。

总结

总的来说,「高级感」意味着对设计保持克制的、对细节追求、拥有独立思考的产物,而且,随着经济的发展,人们的审美和接受程度也发生着改变,追求真正高品质的设计。同时,不仅传统行业在践行「高级感」的设计,互联网的产品设计也在朝着这个方向发展。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

具有美感的英文字体,赶快收藏啦!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

一、Avenir Next

Adrian Frutiger 是从过去和未来汲取的灵感而设计的 Avenir®(avenir在法语里意为「未来」)。Frutiger 在他的设计中加入了一种有机的人文主义元素,将 Avenir 从早期字体僵硬的几何风格中解放出来。

2004年,Frutiger 与 Linotype公司字体设计师小林章先生(Akira Kobayashi)一起复刻了 Avenir字体家族,解决了其屏幕显示的问题。它就是 Avenir Next。几何元素与人文元素的结合使得 Avenir Next字体的易读性极高,这使其成为汽车HMI仪表盘和显示器等快速扫视环境下最理想的选择。

二、Burlingame

Burlingame®字体是一种相对较新的字体,它设计坚实,外形开放、清晰,易读性非常高。这款字体体现了人文主义及手工质感,它是根据 Monotype 委托开展的汽车用户界面易读性研究所得到的结果而进行的修改,使 Burlingame 成为任何车辆数字仪表盘的不二选择。

Burlingame 字体为了满足汽车显示器的需求融合了多种特性:平整的切口,锐利的拐角,超椭圆的(super-elliptical)字碗以及宽松的字间距。其简单的形状和深三角形切口还有助于确保小尺寸字体的清晰度和易读性,尤其是在低分辨率屏幕上。

三、Frutiger

AdrianFrutiger 是世界知名的字体设计师。他的同名字体设计独具特色,而且用途广泛。Frutiger®字体最初用于机场导视牌,在远距离及多种角度下阅读都非常清晰。作为一种经典字体,Frutiger 是人文主义无衬线字体的易读性与具有优美几何线条的早期无衬线字体(Grotesque Sans)的结合。

Frutiger 因其现代、温暖的外观被许多公司和政府采用。这种字体的开放性使其非常醒目,其独特的字形避免了与其他字体相互混淆。

四、Tipperary

Tipperary™是一种单线的人文主义无衬线体,具有清晰、开放的字形。其简洁的字符十分易于阅读,也非常适合数字UI 显示。为了制作这款字体,许多经典字体设计被重新诠释、组合。于是就有了一款在现代显示屏技术受限的范围内仍然表现出色的字体,保留了原有设计的比例和形式,使其成为印刷业的字体。

Tipperary 字形的拐角近似几何形状的方形,是快速扫视环境下(如汽车仪表,显示器和界面)的最佳字体之一。

五、Daytona

Daytona™是由 Monotype公司的 Jim Wasco 遵循易读性原则而设计的一款字体。其方正坚实的字符特征遵循的是人文主义的形状和比例。Daytona 的字形偏窄,可以最大限度地利用空间而且还可以提高阅读舒适性。圆润的拐角、开放的字怀以及简单的字符形状使 Daytona 成为 Monotype字体库中最易读的字体之一。

Daytona 字体几乎在所有的屏幕环境(包括汽车用户界面、数字仪表盘以及GPS设备)中都能表现得非常出色。

六、Akko

Akko™及 AkkoRounded 字体通常会用两个不太可能放到一起的词来描述——「工业的」和「精致的」,这其实得益于设计师小林章先生(Akira Kobayashi)对最初严谨的工业概念的弱化。Akko 这个名字来源于著名设计者名字和姓氏的前两个字母。

Akko 设计友好且非常现代化,清晰易读而且又非常时尚。Akko 字形的「裸骨」骨架降低了其他设计风格中出现的视觉拥挤现象。

七、Mayberry

Mayberry 最初是为了模仿 Tiresias™字体家族的技术而设计的,以便用于机顶盒电视设备和用户界面。比起Tiresias,Mayberry 在美学和功能方面都有显著的改进。

Mayberry 包含真正的意大利斜体以及多种字重,可以在低分辨率设备上提供高质量的阅读和最好的可读性,同时它还具有一系列能够吸引专业人士的 OpenType 功能。Mayberry 是一款字宽被轻微压缩了的人文主义无衬线字体,这样可以在较窄的文本栏显示更多的可读文本。开放的字怀与垂直的应力都有助于在低分辨率的情况下保持Mayberry设计的可读性。

八、Trade Gothic

TradeGothic 字体家族是美国平面设计作品的主打产品,自1948年由 Jackson Burke 发布以来一直不断地被使用。这一设计在国际上也很受欢迎,而且曾一度被视为 Helvetica ®家族的竞争对手。

2008年的版本名为 TradeGothic Next,这款字体改进并扩展经典系列,还将它引入到一个流行的新时代。这种不和谐却为 Trade Gothic 设计增添了一点质朴的自然主义色彩,这也是许多设计师回归的原因之一。

TradeGothic Next 是最清晰的早期无衬线字体类型。该设计具有开放的字形及宽松的字间距,让人感觉容易接近,这些都使其在需要扫视的阅读环境下表现良好。

九、Slate

Slate 字体家族将出色的功能及视觉的优雅融合成一种卓越的交流工具。很少有字体具有这种设计的美感和力量。

Slate 是 RodMcDonald 的作品,Rod McDonald 是一位屡获殊荣的字体设计师和刻字艺术家。在四十年的职业生涯中,McDonald 参与了加拿大国家盲人研究所(CNIB)开展的字体易读性和可读性研究项目。在那里,McDonald 了解到哪些设计特征更适合最大限度地提高字符易读性及文本可读性。

Slate 是一款风格化的人文主义字体,提供了一种温暖的视觉体验。即使在具有挑战性的技术环境中,Slate也能为用户提供舒适的阅读环境。

十、Unitext

HendrikWeber 的 Unitext字体设计清晰、简洁,是一款适应性强、识别效率高的无衬线字体,风格介于怪诞与人文主义之间。

Unitext 深入研究了设计机构对于品牌字体的需求,以及设计师Hendrik Weber 本人为公司定制字体的经验。由于了解用于品牌推广的无衬线字体的流行度,还有它们的缺点,Weber 开始着手创作一些可以适应不同环境但又不放弃友好性的字体。可读性也是一个重要的考虑因素。

Unitext 是一种新型混合风格的字体,它具有现代感及前瞻性的外观,可读性高,并且极具未来主义的优雅。

完美的易读性。无与伦比的设计。

Monotype 的字体创意总监 Steve Matteson 将这些字体组织到一起来展示一系列可以轻松阅读,并可以帮助驾驶员在行驶过程中保持注意力的字体样本。通过为仪表板或HMI 选择合适的字体,您将能够确保您的汽车显示屏清晰易读,并且拥有观众喜爱的无与伦比的设计。



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

汽车UI界面怎么做?来看特斯拉和Apple Carplay等高手的案例!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


现在市面上的汽车大部分都是过时的,没有吸引力的用户界面,正因为如此,很多设计师都在思考未来的汽车用户界面将会如何改善我们的驾驶体验。今天这篇译文,一起来学习特斯拉和Apple Carplay 是怎么设计的!

汽车行业似乎每天都有着新的发展。很多证据都表明在接下来的20年里我们将会看到比上个世纪都要剧烈的变革。因此,顶尖的数字设计师们应该把重点放在对这个行业的关注。那么,到底什么才是车辆用户界面的未来?它能从根本上改变我们和汽车之间的关系么?

下面是我收集的一些由全世界不同的设计师设计的美丽和未来的汽车抬头显示器、用户界面交互、第三方app控制器。这些设计想法,有一些是真实存在的,有一些还正在发展中。

特斯拉移动控制中心原型

uisdc-car-201610133

它为什么会让人震惊?

当你想确定你是否已经锁好车,关上灯,或者把你的车钥匙交给刚考完驾照的小屁孩的时候,你是否觉得自己是个偏执狂?

这个移动app可以让你在不离开座位的时候检查这一切,有一个柴油混合动力车?你甚至可以在你吃早餐的时候启动引擎。直观的动画会反馈你这个动作是否已经完成。

车载控制面板用户界面

uisdc-car-201610134

它为什么会让人震惊?

这个用户界面看起来是一个用肌肉记忆和手势驱动的通用控制模型,不同数目的手指可以触发不同事件,你可以通过iPad面板,无线鼠标等控制它。你可以通过动作来控制数值的大小等等。

这个用户界面去掉了所有需要用户记忆的小控件和视觉元素,从而你可以使用相同的手势或者它的变体,来完成多个不同种类的任务。

你可以在这里查看整个案例研究:A New Car UI

特斯拉仪表界面概念版

uisdc-car-201610135

它为什么会让人震惊?

汽车将会变得更加的智能,为我们的公共场所腾出更多的空间,并且汽车的功能也将变得越来越互相关联起来。随着这些发展,数据在我们面前将会变得势不可挡,试想一下不久之前,我们的手机和其它东西一样还是一个单一功能的设备。我们在我们看到什么和如何看上有我们的控制权,它应该变得更加自然和方便使用。人工智能和机器学习将会采取直觉控制。这个由Bureau Oberhaeuser制作的原型让我们提前看到了这一切的到来。

你可以在这里查看整个案例研究:Behance

远程车辆健康测试与控制

uisdc-car-201610139

它为什么会让人震惊?

当汽车所有的零部件都变成电子系统时,你想拿起扳手就能发现问题变得越来越不可能了。这个移动app原型试图用一种你能理解的语言去描述汽车当前的健康状况,让你知道你是否有必要在开启你的海岸线之旅前修一下它。

轮胎压力和气候的用户界面

uisdc-car-201610131

它为什么会让人震惊?

当进行轮胎检查时,这个界面将会告诉你每个轮胎的压力范围并且告诉你它们的极限在哪里。这个用户界面提供了如此重要的反馈,我觉得它应该被纳入常用标准中去。

Hudway增强现实显示器

uisdc-car-201610138

它为什么会让人震惊?

不用说大家都知道司机应该保持视线在路上,但是现在的手机导航都需要司机把注意力来回切换在手机屏幕和路面之间,这个叫Hudway的app把你的第二块屏幕跟挡风玻璃很好的结合了起来。你面前的那块挡风玻璃很有可能就是未来的显示界面。

你可以在这里查看整个案例研究:Augmented Reality Projections Turn Windshield Into A Navigation Screen [Video]

城市导览汽车应用

uisdc-car-201610132

它为什么会让人震惊?

这个用户界面对于勇敢的探险家来说非常完美,如果你想快速的知道你周围有什么,这个用户界面可以让你在有限的路线里来一段自发的旅行。

Apple Carplay

uisdc-car-2016101310

它为什么会让人震惊?

每个人都在关注它的到来,想都不要想,如果你已经有了一堆苹果的产品,你也会在你的汽车上装上它的。Apple Carplay将会是下一代的第二块屏幕。

数字仪表板集群显示器

uisdc-car-201610136

它为什么会让人震惊?

没有什么能和发动引擎点亮仪表,汽车轰鸣犹如巡游乐队组成的和旋一样。身边的一切,声音和延迟的视觉互动,都给与你感官的反馈。仪表会通过动画直观的告诉你,合适讲切入下个转弯,油量是否变低,以及胎压是否过低。

然而,用数字型号在方方面面代替模拟型号也会开始令人担忧,因为无法人工手动介入账款车子,当保险丝熔断,或者电子仪器故障时,汽车很快会失控。

特斯拉 iWatch UI 原型

uisdc-car-201610137

它为什么会让人震惊?

当可穿戴设备成为我们设备的一部分时,它很明显会帮助我们的手持设备分担掉一部分的操作功能。这个原型很好的说明了它是如何将这一切展示到手腕上来的。



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

总结页面打开的交互方式,很全面!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

本篇文章分别从页面打开方式的类型、当前页打开&新开页面、弹出框三方面对页面链接打开方式进行了探讨,给大家提出一些意见以供参考。

页面打开方式作为链接产品路径的基础,在设计的过程中,或多或少都会遇到选择的困扰,尤其是产品功能复杂,层级较多时,如何让用户按照自己的意愿清晰的浏览信息,保持操作连贯性,是值得体验设计仔细思考与分析的。

近期在所负责的设计项目中,团队对链接操作的打开方式产生了分歧,借此机会整理了一些案例与资料,就这个问题进行分析探讨,也给遇到同样问题的同行一些参考意见。

一、页面打开方式的类型

网页中可操作的链接,主要有按钮、icon 以及文字链接,设计中常用的打开方式则主要有以下三种:

1. 当前页打开

点击操作链接后,在当前的浏览器页面中进行内容显示与操作。

2. 新开页面

点击操作链接后,在浏览器中新开一个独立的标签页面,进行内容显示与操作。

3. 弹出框

点击操作链接后,在当前的浏览器页面中,弹出一个小尺寸的对话框,进行内容显示与操作。

二、当前页打开 & 新开页面

首先来说说最具争议的新开页面&当前页打开。在 HTML语言中,target目标有「target=_blank」和「target=_self」两种属性,分别代表「新窗口打开」和「当前窗口打开」,下图是这两个参数的属性描述。

从这两个参数的属性上来看,「当前窗口打开」是系统默认的处理方式。这个打开方式在国外的网站中实现方式比较统一,用户也形成了一致的习惯,但国内的形式则不尽相同,以至于一直颇具争议,不同类型网站之间、同一网站不同场景之间也没有一个明确的规则标准可供大家学习和参照。

针对这个问题的讨论,可以听到两种不同的用户声音,并且都站在各自的角度阐述其道理。

举个例子,我们以同类型网站(淘宝和亚马逊)的打开处理方式进行对比,来看一下用户习惯、功能场景对链接打开方式选择的影响。

首先,我们确定一致的功能场景:用户从首页中根据各种筛选条件,查找到心仪的商品。来看一下两个网站的处理方式:

可以看出基本是两个极端,差异非常明显,再来看个有意思的现象,亚马逊中国的商品搜索方式竟然又和淘宝一致了,难道链接打开方式的差异竟是中外用户习惯的差异?

这确实占了很大一部分原因,那么造成这种差异的原因主要有:

  • 早期的 W3C标准不支持 target=”_blank”(HTML语言中,在新窗口中打开链接)的属性,国外互联网普及也比国内早,于是用户慢慢养成了习惯。
  • 默认当前页面打开让国外用户觉得更有「礼貌」。如果用户想新开页面,可以鼠标中键、按住ctrl点击链接或者右键新窗口打开,此时用户更有选择权,可以自己决定打开方式;如果默认新开页面,则让用户失去了选择权。
  • 早期国内互联网发展较为浮躁,网站想通过新标签页打开方式,提高PV。
  • 国内网络普及晚,部分用户尤其很多老年人不习惯甚至或许不知道,页中有个后退前进按钮、面包屑可用,新开页面便于他们的操作。

那么,淘宝中所有的页面打开方式都是新开吗?不是。像「我的收藏」、「已买到的商品」、「购物车」等功能页面就是当前页打开。

同一个产品内部,如此区别设计的原因我认为有:

  • 用户的目的较为明确,查找对象确定。(用户想要查看的对象是确定的,如购物车中的产品,用户有明确的目标,找到链接打开页面即可,不像搜索查找商品,需要一步步缩小范围甚至比对查看)
  • 链接入口常驻在网站的信息栏,用户可以随时切换,操作方便,且不存在重新输入的成本。

关于这两种打开方式,到底哪种操作更顺畅,确实难分高下,就跟「确定和取消哪个在左,哪个在右」是一种性质的问题,没有好坏之分,关键是要看在哪种场景下使用更合适。

新页面打开适用的场景:

  • 页面内容没有关联性,且从逻辑上没有从属关系,相对独立。如:产品中的外链。
  • 存在多页面「比较」的操作,需要经常切换。如:淘宝商品详情。
  • 需要保留住前一页的操作不丢失。如:知乎上过滤出来的结果列表。
  • 功能分支存在穿插,当路径发生交叉时,最好新开页面。如:产品内部的跳转链接,导致信息关联的层级发生改变。
  • 具有辅助功能的操作。如:使用文档(PDF、图片等)需要来回参照。

当前页打开适用的场景:

  • 流程性的功能页面,前后操作存在关联和影响。如:下单支付、按步骤新增。
  • 同一层级内容间的操作。如:tab栏的切换。
  • 同一路径中的操作,用户当前的操作会对主页的内容产生影响。如:编辑一个配置,用户操作完,会回到当前页查看结果。
  • 用户具有明确目的性的操作,当前页有利于锁定用户注意力。如:淘宝中「我的收藏」。

以上是结合功能场景进行的选择侧重,如果就「用户体验」一定要分出个高下,我个人还是比较支持默认「当前页打开」,从体验角度分析,「当前页打开」略胜一筹的主要原因有以下两个:

  • 尊重用户的决定。当前页打开,将更多选择机会留给用户(鼠标中键、按住ctrl点击链接或者可以右键新窗口打开),一个具有良好用户体验的产品,在用户做操作的时候,总是能让他们按自己的意志做出决定。网站对每个链接强制打开新页面则剥夺了用户的选择权,因为不同的人有不同的浏览习惯和使用需求。
  • 体验一致。保持一致体验的设计才能让用户产生信任感与安全感。当用户在操作界面元素的时候,可以顺畅的知道、理解,并且能预料到将会发生什么,不会被分神,也不会被打断。任何违反这个原则的设计都将会演变成一种「以设计方意志为导向」的设计,而不是「以用户为中心」的设计。

小结

当我们不知道两种方式如何选择时,或许「不强制用户」才是最好的体验。因为我们面临的用户多样,电脑操作熟悉程度多样,因此不同用户对于打开方式的习惯也具有多样性,这个是设计者无法揣测和调查清楚的。

在「两害取其轻」的情况下,在当前窗口打开链接,不失为一个选择,尊重用户自己的决定,让用户对交互界面自主可控。

三、弹出框

弹出框(弹层)又叫模态对话框,是指在用户想要对当前对话框以外的应用程序或内容进行操作时的提示方式。它一般覆盖在整体页面之上,避免了页面跳转。

弹出框通常是为了显示一个单独的内容,在不离开整体页面的情况下有一些互动,提供信息和交互。

如下图知乎中的「写想法」,用户可以快速的在弹出框中记录个人想法,记录发布后,很顺畅的回到之前的路径上继续操作,便捷,操作思路清晰。

△ https://www.zhihu.com/

现在很多产品中的新增、创建,也都会采用弹出框的交互方式,当然前提是在弹出框中编辑的内容不是很多,此时弹出框不仅承载了信息编辑的功能,还可以作为上下文的跳转,帮助用户衔接路径。

如 iconfont 中的新建项目,用户新增后,页面会直接跳转到新的项目空间。

△ http://www.iconfont.cn

弹出框适用的场景:

  • 内容简单,没有复杂的操作,且具有临时性。如:新增一个收货地址,进行简要的输入编辑。
  • 更为详细的辅助说明,是对当前内容的快速扩展。如:缩略图,点击放大查看。

因此,弹出框可以较好的实现上下内容层叠的感知,不打扰用户的主路径,同时作为页面承载元素和用户操作的补充,起到承前启后的作用。

总结

本文结合这三种链接打开方式的页面交互关系,进行适用场景举例,并总结每种方式的优缺点,方便在设计中更好的根据不同的场景选择合适的页面打开方式。

当然,以上总结也是基于我个人的理解与经验,没有统一的用法和标准,在具体设计实践中,仍要靠设计者的直觉和经验来进行综合考量与判断。

作为体验设计师,如何规划用户浏览路径,是个需要严肃对待的命题。没有绝对的好与坏,但一定要结合产品类型、场景、目标用户等进行具体问题具体分析。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

6个小技巧,让你的视觉层次“蹭蹭蹭”提升!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在设计环节中,对于视觉次序的营造是每个设计师所必须精通的,视觉次序也可以理解为视觉层次,它是设计中的必然,无论是海报设计还是页面设计,从整体来看总会有强弱、主次之分,因为有了视觉上的变化,才使得整体更富有层次感。从大体来说:当用户在浏览信息很多的网页时,作为设计师要做到,即使用户只是简单的浏览,也要有能在用户脑海中形成记忆的视觉元素,而这些元素就是视觉中的主,而当用户仔细阅读时才能记忆到的元素才是视觉上的次。从局部来说,要能在视觉上形成先后顺序。这期的内容就是设计中体现视觉次序手法有哪些?这些也是打破版式的常用手法。

一、大小对比

首先,每个人在浏览东西时都会有自己固有的习惯,比如:从上到下、从左到右,这叫常规方式,而作为设计师,不能仅仅局限于常规形式,完全的常规带来的是设计上的枯燥、乏味。要学会利用设计知识打造不同的视觉次序,营造出更强烈的设计感、层次感。

在众多营造视觉次序的手法中,大小对比几乎是每个人都能想到的一种形式,也是很多人认为的最简单的一种,比如:

通过大小对比的形式能直观营造出视觉焦点,这种形式在设计中也是最容易接受的一种。如果左侧放置的也是四块小的产品,给人的感觉就会显得枯燥、乏味,版式太过统一,而正是因为这种放大产品的处理手法,拉开了对比,才使得版式不显呆板。这种形式无论是在文字排版、海报、页面都是很实用的一种,合成设计中的近大远小也同样适用,只是在做对比效果时一定要大胆。

二、配色方式

通过改变不同的配色方式,也能在视觉上营造出视觉层次的变化,比如我们常见的通过有彩色与无彩色进行区分的手法:

在原本无彩色的排列方式中加入有彩色,在视觉上就形成了很强烈的差异化,而正是因为有了强烈的差异,使得存在差异的部分成为了更容易吸引用户的区域,所以就在视觉上形成了先后顺序,同时这种差异的形式也能起到一定打破版式、活跃版式的作用。而在有彩色之间,同样也能通过差异化形成视觉上的主次,比如:

第一行色块能最快引起注意的是第二个,通过色彩饱和度的不同,在视觉上形成了很明显的差异化,进一步改变了原本的做从左往右的习惯性视觉次序。而第二行色块中最快能引起注意的是红色,因为这里用到了改变色系的形式进行视觉上的次序划分。之所以在有彩色中也能很好的体现视觉层次最重要的一点是,他们之间形成的差异足够明显,而不是似有非有。

三、形态的不同

营造不同的视觉次序最重要的就是在正常人习惯的固有次序上寻找变化,那么我们同样可以以形态上的变化作为差异化的形式,比如:

在固有的形态中寻找其中可以引起差异化的元素,从视觉感受而言可以分为两种:第一,改变了原本的习惯性的阅读方式,也使得整体主次发生了变化;第二,原本枯燥、呆板的重复式的结构上因为元素形态的改变,也起到了打破整体版式的作用,使得整体版式变化更多,层次感更强且版式因此也变得更加活跃。形态上的变化还可以这么体现:

虽然都是矩形框,但是线框与色块形成了很明显的差异,同样也可以体现视觉层次,而这种形式在很多页面中也很常见:

这也是版式设计中很重要的一部分,也就是寻找可以打破版式且营造视觉层次的元素,正是因为这些手法,才使得版式更丰富、更富有多变性。

四、空间留白

当要求不能改变很多时,在原有的基础上只需要改变空间位置或者留白方式,也可以营造不同的视觉次序,比如:

在不改变其大小、颜色、形态的前提下,只是改变了空间留白,也能起到改变视觉次序的作用;而在编排或者标题设计中,通过空间留白的方式拉开层次、次序也很常见:

同样是重复的形式,左侧完全没有给人一种有层次、有次序的感觉,在用户眼中,这只不过是一团信息;而右侧通过改变留白的方式充分的体现出视觉上的层级关系,每一个独立存在的标题或者栏目之间都应该用留白的方式体现,这种留白要遵循的原则是:标题与文案的留白要小于栏目与栏目之间且大于说明性文字信息之间,只要这样才能真正意义上的将层次拉开。

五、投影的方式

投影在设计环节中是很常用的一种手法,通过投影可以体现出前后层次,也能改变视觉次序,比如页面设计中的:

这里只是在色块上添加了简单的投影效果,原本的视觉次序就瞬间被打破,而这种投影在海报设计中最常用的是打破前后关系,使得海报更有层次感:

这种大投影的方式,是很多海报以及页面中常用的手法之一,因为有了投影,使得画面整体形成了明显的层次关系,而投影对于用户来说也是很容易接受的,比如:按钮的投影、主体的投影等等,看似很小的改变,往往能给页面带来很明显的效果。这种形式也可以理解为形成遮挡关系,在一些小场景的设计中,一样很实用:

有了遮挡关系,就会形成视觉上的层次,这种看似简单的手法,最终所呈现的效果却是立竿见影的。

六、高斯模糊

拉开视觉次序的另一种手法:模糊,很多人对于 PS 里的模糊工具并不陌生,而通过将视觉元素模糊化处理,一样能起到营造视觉层次的效果,比如我们常见的电影海报中:

通过虚实对比,使得视觉层次变化更强,这也是合成设计中常用的手法之一,而在文字设计中,一样可以通过这样的手法来拉开视觉次序关系,比如:

通过模糊字体中某个笔画,在视觉上形成了一定的空间关系,也使得整体层次感更加丰富,这也是很多设计师喜欢在作品的最后环节加一些飘飞模糊的点状元素丰富整体的原因:

视觉层次的变化对于整体而言是不可缺少的一部分,有时只需要一点点的变化就可以带来意想不到的效果。

七、应用于版式中

这期所说的很多都属于细节上的变化,但是很多人对于细节并不重视,认为不重要,但其实优秀的版式设计基本上都是用不同的细节处理方式堆砌而成的,这期所说的这些形式用于版式设计中也同样很实用,如果你的版式太过呆板,可以通过考虑这些方面在适当的位置进行打破,打破的意思是:在原本很呆板的基础上寻找视觉上的层次变化,使得整体版式活跃起来且富有细节感,比如:

这是从一个页面中选取的一个局部信息,上侧版式给人的感觉毫无变化,如果页面中出现大面积这种形式的版式,会使得整体单调、枯燥,很容易形成视觉疲劳。而下侧区域则是为了避免这些,在形式上改变了许多:第一,颜色上有轻微的变化,这样做的目的是区分开每个栏目。第二,形式上第三个模块做了很明显的层次变化,颜色明显加深了,且投影效果加重,而且按钮区域也用色块的形式代替边框,使得整体层次感更强且有保持在一个很协调的范围内。这里用到的手法,正是这期所说的。

同样我们也可以在网上找一些版式感很强的页面进行分析,去理解这些手法是如何在版式中体现的,比如一些官网的设计,看似很简洁、元素很少,而往往这种页面对于版式的要求更高,因为要用极少的元素体现其版式变化、层次。

总结

视觉层次感是提升整体设计感很重要的一种形式,如何在固有的视觉基础上打破束缚,在形式上形成变化,对于每个设计师而言都是至关重要的;而很多设计手法都存在着共通性,只要学会灵活运用,那么我们的设计作品就不会显得平庸无常。当然这期所说的也并非全部,这些只是很常用的一些形式。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

论打造用户体验和数值系统,你得看看游戏类产品

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


互联网产品有很多种,比如电商类、工具类、资讯类、财经类。但在看过很多产品之后,作者发现论产品体验,最强的是游戏类。当然游戏做为一种特殊的产品,有时候不会被列入以上类型,且游戏的产品经理一般被叫做游戏策划以及数值策划,分别负责不同的内容。

一、为什么说游戏的产品体验很好?

之所以这样说是因为游戏类产品有一个特点即它是没有用的,或者说它的唯一用途就是好玩。这样有一个问题便显而易见了,即对于大多数产品来说用户体验好是锦上添花的事情,而对于游戏类产品而言,这可能是唯一的卖点以及生死线。

举几个例子来说明:

  • 单位或者学校的官网,相信用过这些的人都会发现它们是多么的难用,而且很多年从不更新,但是你没有得选,只好使用它;
  • 微信以及 QQ 也是同理,虽然不是必选,但是以其覆盖率来讲,大多数人依然无法选择不使用它们。因此微信有足够的理由不全力以赴,腾讯完全可以将精力和人力投入到更加赚钱的网游领域。当然,最近新型社交软件(抖音、快手)的崛起似乎是给了腾讯一定的威胁,让它不得不再次严阵以待;
  • 而抖音和快手就得好好做了,必须足够好玩以及新奇,毕竟这并不是刚需,如果没有足够好的用户体验完全可能被删除。毕竟删除了他们对于用户而言几乎没有任何不便,还能节省不少时间;
  • 那么再进一步呢,再进一步就到了游戏类产品。游戏类产品的刚需性更加弱,而且还被全社会妖魔化,最近 steam 入华不利,以及孩子跳楼怪绝地求生又将它推向了风口浪尖。让不少人不得不呼吁「管管孩子,救救游戏」。

通过上面几个例子不难看出,随着刚需的减弱以及依赖性的降低,产品对于用户而言不可替代性就越低。比如单位或者学校的官网哪怕做成非图形界面,恐怕员工和学生都得自学了接着用。而游戏则不然,不仅面临着用户随时可以放弃的情形还得时刻注意政策动向。

因此即使不去使用产品,我们也不难猜出游戏类产品的用户体验必须非常好才行。毕竟只有有依靠的产品才能够做到有恃无恐,而游戏类产品则是时刻在刀尖上舞蹈,用户和政策都不敢得罪,必然得绞尽脑汁才能生存下去。

人都是有惰性的,一旦有恃无恐将没有多少人和公司愿意继续创新,毕竟你没得选。

二、以崩坏3为例谈谈用户体验

1. 从侧面展示其用户满意度

为何选崩坏3呢?原因很简单,因为它的推广模式以及用户体验都是一流的,不仅做游戏,而且 CG,漫画,周边同步推进。选择了3D萌风格后又通过哔哩哔哩这一平台进行了推广,对用户的了解之深入让人佩服。

b站的推广对于崩坏3而言,绝对是最好的选择可能都没有之一。原因很简单,两者用户重叠度太高了,且 b站专门有崩坏3类似的模块MMD 3D。当崩坏3到达b站后,up主们则自发的开始了宣传,例如热门中的第四位就是崩坏3的内容。

如果搜索崩坏3的经典角色 CG女王降临,可以得到如下结果:

仅前面几个视频的播放量可能就有近300w,而且是精准用户的300w次播放,其宣传的成功不难理解。当然这里你可能要问了,不是谈用户体验嘛,说这些和用户体验有什么关系。

其实是有关的,通过下面这张图很容易从侧面反映出用户对其热爱的程度。

这些视频全都是用户自制的,这种热爱是很切实的。试想当初最火的魔兽世界上映,很多人穿着联盟或者部落的衣服去电影院不就是对游戏最大的认同吗。

这里也是一样,你会为一个你不喜欢,用户体验差到崩溃的产品花费几天甚至一个月的时间去做它的周边视频吗,所以其优秀其实是毋庸置疑的。

2. 分析其用户体验

这张图片即该游戏的欢迎界面,接下来让我们细细来分析其用户体验点好在哪里。

上图即为游戏界面展示,仅一个界面就有很多点设计来增强用户体验。

  • 感叹号:代表了可以领取的奖励,大家领取奖励的时候是开心的,所以就给了最醒目的标志;
  • 波纹效果:次一级的提示,表示该功能下有可以做的事情,算是任务发布;
  • 收起功能:点击可以收起,然后截一张图,截图如上上图所示,很完美的效果,用户有炫耀的心理,所以可能会将其发朋友圈或者作为桌面,增强传播。当然这里不玩游戏的人可能不好理解,其实有的角色是非常难获得的,加上皮肤价格会很高,用户有足够的动力去炫耀;
  • 拍照功能:如上上图所示,可以对图像进行拍照,虽然也可以截屏,但确实是很贴心的功能;
  • 和看板娘对话:这样的做法并不少见,即给产品一个人设,增加用户的认同感,比如小冰等,这里的看板娘对话根据角色的不同而不同,甚至有的用户会为了看不同人物的对话而去收集人物,在增强用户体验的同时也增加了用户购买欲,一举两得;
  • 全屏VR:画面并不是静止的,如果手机旋转,图像会移动,给人手机屏幕后的场景是真实场景的感觉,虽然幅度不是很大,但还是有一定的 VR感的。

当然其优秀的用户体验点完全不止这些,作为一个体积3G多的程序有许许多多的界面,但介于游戏和产品的逻辑还是有区别的,就不展开继续讲了。但有一点是值得注意的,即整个游戏的任何界面几乎都是在用心去做,将用户体验做到了。

三、以崩坏3为例谈谈数值系统

数值系统顾名思义就是一个产品的数值设计,比如:得多少积分用户可以升级,在搞活动的时候是否应该赠送 VIP,如果赠送了 VIP 多久比较好,VIP 应该有哪些权限,如果各种等级的 VIP 功能是不同的,那么一个级别应该差多少。

以上仅仅是产品的数值体系,而游戏的数值体系就更复杂了,比如:游戏货币的产出量以及回收机制,维持整个游戏世界的装备价值以及金币价值,防止产生通货膨胀。

产品和游戏有这样的区别很正常,毕竟产品只是提供一种服务,而游戏更像是打造一个世界,要考虑的东西在一定程度上和现实世界有相似之处,比如:交易方式、税收、货币体系、资源体系、玩家社群、不同势力的实力均衡。

现在让我们来简单分析,当然我们只分析在产品中也存在的数值体系,毕竟相信本文的读者都是产品人而不是游戏迷。

1. 崩坏的VIP体系

VIP体系对于企业而言是非常重要的,因为这是企业收入最主要的来源之一。

所以诱导充值是所有企业都必须面临的问题,那么大多数产品有哪些套路呢,一般有以下三个常见方式:

  • 首冲优惠:第一次充值会比较便宜,降低用户付费门槛,而当用户真的使用过 VIP 之后,再回到非VIP 就比较难了,可能将一个本来不想充值的用户转化为 VIP用户,即由奢入俭难;
  • 连续包月:不少用户懒于去取消掉这个功能,对于那些对价格不敏感且摇摆不定的用户而言,让他们通过连续包月进行消费是不错的策略;
  • 活动赠送:完成一定的任务,赠送VIP,理由和首冲优惠很相似,都是降低用户进入门槛。

现在让我们再来看看崩坏3是如何设计其 VIP体系的。

初始奖励非常丰厚:让用户忍不住想要充值,如上图所示,只需要充值非常少的钱,就可以获取以上奖励,而这些奖励非常不错。这点最大的意义在于让用户愿意去尝试充值,只要充值一次,以后就有可能继续消费。

限时购买:促销虽然老套,但却十分有用,这种倒计时总能够刺激用户的消费欲望。

月卡系统:很有意思的系统,充值一次之后可以每天都领取奖励,而效果是直接购买奖励的十倍。但只有每天不断的进行领取才能够达到获得奖励的目的。这种模式其实就是用日活换金币,虽然用户节省了钱但却必须每日登录才能够获取这些金币。

类似的策略拼团也有使用,不过不是用日活换金币而是用用户换金币。

2. 数值系统

数值系统对于游戏而言是生命所在,史玉柱曾说过:我不担心别人抄走我的系统,因为数值体系他们抄不走。

崩坏3的数值系统就不提了,因为太过复杂,而且与产品相关性也不是很大。

对于产品而言,数值系统没有那么意义重大,但也需要很好平衡各方的利益,否则可能让产品迅速衰落。

一个简单的例子即会员该有多少权利,不同等级的会员权利应该如何区分。比如以视频网站为例,假设有两种级别的会员,大会员和小会员。那么用户就有三种,免费用户,小会员以及大会员。假设会员的作用是看高清视频,而视频的级别有五个,等级越高质量越好。

那么该如何设置他们的权限呢,可能的方式有以下几种:

  • 方式一:普通用户等级一,小会员等级二,大会员等级三;
  • 方式二:普通用户等级一,小会员等级三,大会员等级四;
  • 方式三:普通用户等级一,小会员等级四,大会员等级五;
  • 方式四:普通用户等级二,小会员等级三,大会员等级四;
  • 方式五:普通用户等级二,小会员等级四,大会员等级五;
  • 方式六:普通用户等级三,小会员等级四,大会员等级五。

当然一般的 VIP 肯定不止有视频权限,还会附带一些其他权限,比如可以有打赏用的币,可以有更好看的头像框,文字的颜色是可以选的等等。

不难发现,这将是非常复杂的一个体系,哪种体系都对一些用户有利,对另外一些用户不利,如何合适的定制产品的数值系统就是一个很复杂的问题。如果体系偏向免费用户,可能让付费用户付费意愿降低,如果偏向付费用户,可能让免费用户觉得没有存在感,直接离开。

四、游戏给产品的启示

用心做产品是有用的:如今流量获取非常困难,产品的成功很大程度上取决于是否有流量扶持。这对于产品人而言是比较沮丧的现状,毕竟辛辛苦苦做一个产品结果比不上某些巨头产品的一个入口有效。这种情况确实是存在的,但我们也要相信产品的优秀绝对不是没有意义的;

可以用日活换收益:现在的产品VIP系统大多都是充值后获得权限,但完全可以做以下这样一个策略。比如:视频网站的 VIP 是一个月15元,那么我们可以推出一个套餐,一个月只要5元,但是这个套餐有个条件是每天登录后第二天可以享受 VIP服务,如果用户有一天未登录,那么第二天就没有 VIP服务可以享受,这种策略其实就是用10元钱换取了一个用户的每日登录;

精准营销事半功倍:崩坏3在 b站的广告效果非常好,而且直接引起了 up主的关注,他们会再次创作内容对崩坏3进行推广。但如果将这个广告投到58同城呢,可能就没有什么意义了;

数值系统平衡各方:免费用户和付费用户的关系非常复杂,两者既有利益冲突又可能相互转化,因此做好平衡非常重要,不要得罪任何一方。




蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

超好用的用户体验提升模型

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


用户体验一直是我们在产品设计中反复强调的问题,那么我们应该怎样提升用户体验呢?

经过项目中不断的探索与研究,结合几个方法论,我们整合出了一套用户体验提升的方法流程——用户体验提升模型。下面就来详细的介绍一下,希望能给大家帮助和启发。

先问几个问题?

  • 你知道你所负责的产品/设计方案的用户体验好还是不好?
  • 产品/设计方案体验不好时应该怎么做?
  • 这个产品/设计方案的体验具体有哪些问题?
  • 怎么优化出现的体验问题?
  • 哪些模块或页面的问题最迫切需要解决?先优化哪些?后优化哪些?

用户体验提升模型能很好的帮我们解决以上问题。

先介绍一下用户体验提升模型的流程:线上版本调研 – 协作启发式评估 – 问题分析整理 – 优化方案。

这篇文章也会以这个流程一一介绍。

一、线上版本调研

也可以是设计方案,我们采用了 SUS系统可用性量表进行调研,SUS 是评估产品可用性的一个花费少,但十分有效的工具。该量表包含了10条定向问题,每个问题均为5分,按强烈反对(1分)到非常同意(5分)评分。(各位小伙伴可自行网上查询系统可用性量表,有很详细的介绍,在这里不赘述了。)

最佳的方式是在线上直接上一个问卷调研来收集真实用户的反馈,然后对收集到的结果做如下算法:

  • 对于奇数序号的问题,将其得分减1;
  • 对于偶数序号的问题,将其得分被5减去;
  • 将所有问题的减法后得分加在一起,然后乘以2.5;
  • 计算出的结果即为我们产品可用性的得分。

1. 那么如何通过评分看出一个产品的好坏?

上图是一个评分参考,通过数据得出,系统可用性量表最终算出的评分达到70分左右,就可以比市面上一半产品可用性要好,也就是说这个产品的用户体验算是合格了。

但是系统可用性量表的评分结果是抽象的,这个分数只能让我们大概了解产品用户体验的好坏,在具体问题上却是缺失的,那我们知道产品评分较低时我们如何聚焦产品的优化方向呢?

二、协作启发式评估

1. 为什么是协作启发式评估而不是启发式评估?

因为启发式评估主要由几名交互专家以角色扮演的方式来完成设置的任务给出评估结果。优点是成本低、快捷,缺点也显而易见,一是交互专家团队中不一定有或者很少,二是可用性问题意见一致率很低,并不能很明确的指出为什么这是一个体验问题,有很多个人因素的主观见解。

因此我们决定用协作的形式来进行评估,而且不需要交互专家,可以是用户、测试、设计、产品、运营、商务等等,只要愿意参与测试,就可以。协作启发式评估以小组为单位,能够很好的整合出更多的问题,而且更准确。你说他们也不是交互专家,能起到好的结果吗?竟然都整理出方法了,那答案当然是能啊。

为什么能,因为整个评估过程中,我们是有的可用性原则来给予启发的,有了这套可用性原则,一秒变专家。

说到可用性原则,了解用户体验的都知道尼尔森的十大可用性原则,但是从1995年提出到现在,已经过去了二十多年,互联网世界已经发生了巨大的变化。在这样的情况下,尼尔森的十大可用性原则明显有些不那么符合或者说不能给出针对现今产品太全面的启发,所以,我们重新整理了一套可用性原则,这套可用性原则更针对现今互联网产品,基本可以覆盖到所有出现的用户体验问题。

我们称之为21条可用性原则。

有了这21条,可以让任何没有用户体验知识的人参与到协作启发式评估中来了,一秒变专家了。当然,这21条可用性原则我们也会迭代优化,目的是做到更符合现今产品、更全面的可用性原则。

2. 通过什么来确定的这21条可用性原则?

首先,我们都知道用户体验五要素,这已经是做产品设计的基本常识了。我们来看这五个层级对用户体验能产生影响的有哪些?战略层一定不会,如果一个产品立项了、已经上线了,一定是战略层成立了,如果战略层出现了问题那就要重新考虑产品要不要做或者是改变方向了。那么剩下的4个层级呢?范围层、结构层、框架层、表现层,其实都会出现用户体验的问题。那我们看看这几个层级所包含的内容,视觉呈现、界面设计、导航设计、信息设计、交互设计、信息架构、功能规格、内容需求,这样的话就有8个大类,然后我们通过多年的经验和对尼尔森可用性原则的理解,把可用性原则对应到这8个大类中,最后得到了这分类明确的21条可用性原则。

但是分了这8个类有什么用呢?读下去,你就会知道。

3. 具体方法

先说说调研的具体方法。我们以协作启发式评估的方法,组织好调研小组(8人以上,样本越多越好,反正最后还要去重),宣讲完流程方法和操作任务,就可以开始进行评估了。我们一般为了省时间,宣讲完就把表格发下去,让他们自己找时间完成表格,然后再收回来。

这个表格就是用户体验问题记录表。包括问题所在位置、对应的21条可用性原则、严重程度等级、问题描述。

三、问题分析整理

1. 收集了一堆问题之后应该怎么做呢?

通过小组会议讨论,把相同、相近的问题统一成一个,可优化的问题保留下来,不是体验问题的去掉,然后整理到一起,这就是整个产品存在的大大小小、各种各样的问题了。

接下来,我们引入另一个方法,就是用户体验八阵图。

这张用户体验八阵图的8个点是不是有些眼熟?没错,就是21条可用性原则里的8大分类,这就是上文为什么分为8个类的原因。中心向外为问题严重等级,依次为:小问题(1)、次要问题(2)、主要问题(3)、灾难性问题(4),一一应对到「用户体验问题记录表」中的「问题严重等级」。

2. 怎么使用呢?

首先,对记录表里的「问题位置」进行归类,以模块化区分,比如把登录注册流程做为一个模块,用一张八阵图来表示,最终把产品的每个模块都用一张八阵图来承载所对应的体验问题。

然后,把收集到的问题以「点」的形式点到对应模块的八阵图当中。

哪个模块问题最多?问题出现在哪个方向上?是视觉?还是交互?还是内容?哪些问题很严重需要迫切解决?一目了然。

四、优化方案

  • 通过 SUS系统可用性量表知道了产品的整体体验处于什么水平。
  • 通过协作启发式评估知道了产品的用户体验到底有哪些问题。
  • 通过21条可用性原则知道了如何避免出现体验问题。
  • 通过用户体验八阵图知道了哪些模块最迫切需要优化。

知道了这些,我们进行产品优化的时候还会不知道如何下手吗?接下来就要靠你自己了,你一定会做的更好。

当然,这套模型只能对线上产品的用户体验提升起到一定帮助,一个产品真的厉害还要从战略层一步步做起,我们需要去清楚的知道产品的目标是什么,我们能提供什么,我们想要去得到什么。对于产品的迭代,我们可以从使用人群(目标客户),主要功能(产品的服务方向),产品特色(与竞品的差异化),商业价值(盈利模式)上深入研究。



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

总被说设计没新意,如何提升?

用心设计


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里




想必很多前辈都会告诉大家,提高设计水平,最重要的一点就是多看多练多想。这句话,没有任何毛病。

刚入门的同学肯定都会一直这样做。特别是在“多看”方面,很热衷于去收集各种各样不同的站点,譬如自己碰到最多的问题就是:“米田,你有什么好的设计网站推荐给我们?”这样的问题,我每周都会被问到数十次之多。


但是当东西真的变得很多的时候,往往会产生很严重的问题。不知道从哪里开始找起。特别是关于图片方面的问题,这点更为严重。因为图片能清楚描述的可能性很小,譬如一张一年前看过的海报,让你再次清楚描述它是很难的。


所以这里就会引出一个话题,如何让我们辛辛苦苦收集的图片。能更好的使用,这是每个设计师必须要面对的问题。


要了解这个问题,最重要的一点是,知道什么东西是适合的。





图片整理术,合适是什么?



举个简单的例子吧。图中的这位人物叫卢冠廷,填词人。或许很多人对这个名字比较陌生,没关系。你肯定听过他唱的歌。



是以下这首一生所爱。大话西游里的主题曲,相信华人都听过他唱的这首歌曲。

那么经典的一首歌,创作时间需要多久呢?

答案是一个晚上。你的眼睛没看错,真的就是一个晚上创作出来的。这是我在一次线下分享会的时候。问过卢冠廷先生这个问题,他的回答就是这样。

那么他是怎么做到的呢?相信每一个人都特别好奇。

和作曲一样。好的设计创意也不一定需要长时间去思考。很多时候,创意来源于洗澡的时候。相反你花越多时间去思考,却越想不出来。

这就是做灵感创意的魅力所在。



回到一生所爱这首歌曲的创作过程,卢冠廷先生是怎么做到在一晚时间,创作出经典的歌词呢? 

答案就是。答案就是,答案就是,画重点了。

将他听过关于爱情最好的十首音,一首一首反复听。


抽取其中的精华,变成这首歌的主要内容。为什么要选取十首最好的?因为哪怕你创造出来的作品是在这些歌曲里最差的那一首,那也是从最好的结果内得到的最差答案。比单纯自己凭空想象,效果要好很多。

那么对于设计同样如此。我们不是需要填词,但是要做设计,参考是必不可少的内容。

好的参考流程,找到合适的关键字很重要。你就要采用观看,丢弃和应用这三步将看到的东西,消化吸收。




持续建造你的灵感水库




为了让我们持续拥有最好的灵感,这时候,就需要建造灵感水库。


一般建造水库来说。最重要的就是这四点

● 第一、找到坐标(建造地)。

● 第二、投入鱼苗(商品)。

● 第三,保持它的时效性,常常要去维修这个水库(定期上班)。

● 第四、每条鱼苗都标记好(记账)。


当然,这是比较形象的比喻,其实就是要建立属于自己的图库。坐标系所用的工具。投入的鱼苗是图片。时效指的是定期去删减图片。标记为每张图片打上标签。




坐标



最理想的。图库工具应该有这样一个功能,就能找到类似的图片。

这不是很复杂的技术,不过却很有用。有这个功能的工具,能够一下子推荐相似风格的作品给我们参考,这大大提高了工作效率。

因为这个是图片类的。整理工具。

三常用的工具如下图。

● Pinterest

● 花瓣

● Eagle

其中最理想的图库工具是Pinterest。它的相关度,联想功能是最强大。简单来说,你能用最短的时间找到。最多相似的图。

对比花瓣。就明白其中的差异。

同样是一张类似的图。Pinterest找到的图片是比较接近的风格,而花瓣找到的图片风格就比较迥异了。

你或许会说。你这两个工具我都不一定用到,我常常用的只是百度。那直接通过百度搜到的图片,能有类似的效果吗?

但饶可以,所有的搜索引擎都有一个功能叫做“以图搜图”。

以谷歌浏览器为例吧,就在浏览器的红色箭头部分上传你需要寻找的图片,它就会在显示结果里自动推荐相似的图片。

得到的结果类似这样。

一般谷歌浏览器,点击图片右键的时候。都能发现有一种叫做在Google搜索相关图片,这也是能达到相同的效果。

嗯,或许你不一定能访问谷歌搜索,不过以下推荐的这些站点同样能实现相同的效果。

有兴趣可以去看看。




投入



好了,你要储备自己私人图库的工具后,接着就是要将我们看到的图片一张张放进去。找到坐标,修建水库后,你需要定期定量的投入鱼苗,不然这个水库也只是空置的水库,是没有任何作用的。


举个简单的例子,如何保持庭院的整洁?肯定是需要时时打扫。这是日式庭院里面很重要的组成部分。定期的清扫落叶,保持整个庭院是处于相对空灵的状态。




时效


同样我们的水库。也是需要进行这样的一个修缮工作。一般我自己会将其分为性和临时性两种项目大的分类。

● 性:会收藏一些最常用的,而且以后肯定能用到的一些图片素材。

● 临时性:会根据每个项目收集有针对性的素材进行放置,可能项目结束之后就会进行封挡或直接删除处理。


网络端整理:

通过线上工具,比如chrome花瓣插件通过一个“采集到花瓣”的功能,就能将网络上的图片直接转载到相应的工具里。


本地端:

可能有些项目不太想被人知道的话,本地整理很不错的方法。譬如这里用到的工具是Eagle。它的分类功能很强大,可以通过颜色、大小、类型进行筛选。




标记





为什么要修建自己的水库,即整理图库呢?

最终目标跟前面那两课讲的很类似,就是要在未来的时候,能通过模糊搜索找到快速相对应的图片。如果你找不到,那其实整理图库意义不大了。

这就好比一个很庞大的图书馆里面没有任何分类系统的话,你肯定是找不到你需要的东西。




案例:一小时10个设计参考



讲了比较这么多内容,我觉得应该举一个案例,会更容易理解。


这种方法对快速想到多种关键字很有用,因为图片往往需要通过关键字才能找到。这种方法叫做一小时10个设计参考。当然找到十个参考时间可以更短,最快只需要十分钟就可以了。



比如我们要做一款产品。希望薄荷糖去吸引上班族购买,最终设计的成果是一条广告片或者平面海报。

首先如果按我们普通的思考模型。大概是这样的,你会思考出一堆薄荷糖的作用或者营销方案。这种方法不好么?当然不是,只是效率有点低。

现在介绍的办法就是希望通过技巧,能快速想到十个甚至100个不同的创意方向(关键字)。这有什么用呢?就对于最后的在临时项目里面寻找相对应的参考图片,就会有非常大的帮助。

简单来说,先在左边的三角形内写下与主题相关的资讯。可以理解为,跟口香糖这个产品有关系的感受,都可以放在这个三角形里呈现。

随后在右边的三角形内写出目标客户群喜欢的东西。就是年轻的白领,他们最喜欢的是什么东西?可能有以下的这些关键词。

最终我们要做的就是将左侧的三角形的关键字与右侧三角形的关键字进行随机的拼合。

就是这么一个简单的过程,就能形成很多看上去特别酷炫的关键词。


● 清凉的音乐

● 变态的重金属

● 头发竖起来的温柔

● 甜甜的色眯眯

● 透心凉的帅气


我们循着这些酷炫的关键字去寻找相对应的素材参考,就完成了我们最基础的灵感构思阶段,得到以上这些图片内容。





很多朋友都在问一个问题。老觉得自己构思设计的时候感觉没有灵感,不知道怎么提高。很重要的原因是看的东西不够,或者看的东西太过单一。


解决办法很简单,当你每天去看100-200张设计参考图片的时候,再来回答这个问题,相信不用我告诉你答案,你自己也有自己的判断了。


这百张图并不是来源于单一的网站,这就需要你根据自身习惯。筛选过程,与每个人的购物习惯一样,没有一个完全的标准的答案。试试这节课交给大家的创意思考法。做延伸思考时很有帮助。



最后,当看到足够多的时候。就不会太依赖图库,进而能够将不同的元素进行拆解,形成属于自己的原创东西。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计中为什么插画设计越来越流行 ?

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在过去几年当中,插画开始以一种坚挺的姿势,站在设计趋势的最前列。不止是原本身处各个领域的画手和插画师开始越来越受追捧,而且连网页、UI和动效设计师都纷纷学习插画设计。当然,更显著的变化,是插画在网页和UI中的使用越来越多,越来越频繁,甚至越来越多样。


多年来,插画被广泛地运用在杂志、图书、报纸、海报、传单等不同的传统载体之上,新的工具和技术使得它更加轻松地植根于数字化媒体当中。


作为设计中,最具有表现力的元素,一张插画所传递的信息比文字更多更丰富。在UI和网页中,使用插画来辅助传达信息,无疑更加直接到位。而插画的可定制性之强,犹在图片之上。



插画在UI界面中的运用,可以说相当广泛了,它更清晰,更时尚,也可以更加精准,甚至更有表现力,为什么不用呢?就适用范畴而言,我们可以观察到,它可以运用到这些地方:


  • 页面主题图

  • 网页首图和Banner

  • 吉祥物和形象插画

  • 博客文章配图

  • 新用户引导教程

  • 工具提示

  • 奖励页面和成就页面

  • 游戏化设计的页面

  • 通知和系统消息

  • 聊天表情

  • 讲故事的辅助配图

  • 信息图

  • 营销和广告图

  • 图标和装饰性内容

  • 社交媒体页面

  • 支持性内容的页面


插画的适用范围之广,这些总结出来的使用场景,并不是全部。插画本身的属性很有意思,它连接了设计,作为内容呈现,还带着明显的艺术化的属性。今天的文章,我们总结一下在设计中使用插画的10个理由和注意事项。



1. 插画是设计的原创性和艺术性的基础


无论是印刷品、品牌设计还是UI界面,更加风格化的插画能够将不同的风格和创意加入其中,在激烈的竞争中更容易因此脱颖而出。留下用户才有转化。



同样的,在博客、新闻和Banner 中使用插画,也是看准了插画可以根据内容进行深度定制的优势,这种微调能让内容更加统一一致,更加符合产品目标,借助色彩、角色、环境甚至暗藏的隐喻,来吸引特定的用户。


2. 插画是视觉触发器,瞬间传达大量信息


我们常说「一图胜千言」不是没有道理的。人的视觉感知能力很强,看到图片的一瞬间,也许还没有来得及进行逻辑思考,但是大脑已经接收到大量的信息和内容。


  • 心理学研究表明,人类只需要大概1/10秒就可以感知到场景中绝大多数的元素和基本视觉信息。

  • 视觉信息可以更快传递到大脑,而重要的信息,人类也通常会被固化为视觉图像,而非文本化的记忆。

  • 文本需要依托可读性设计,而图片和插画则会被直接识别。

  • 图片和插画更容易打破文化和语言隔阂,传递内容含义。

  • 对于视障用户、阅读障碍用户和儿童,图片插画更容易被理解。

 

3. 插画是标题和文本的重要支撑


虽然图片一瞬间传递的信息很多,但是图片在很多时候是无法提供精准而详细的内容。用户依然需要文本来呈现清晰而可以被阅读和记录的内容,所以文本依然是不可或缺的。在另外一方面,文本和标题已经具备的情况下,经过定制的插画能够辅助用户理解,更清晰的记忆。



在很多特定的领域,举个例子比如说金融,插画能够借助色彩、图形和形象来讲述故事,让用户更清晰的理解复杂的金融功能,甚至强化信任感,而这是文本所不具备的。插画能带来强烈的情感连接。


4. 插画更适宜呈现故事

故事是最令人难忘的内容,剧情的走向和起承转合会给人留下深刻的印象。而插画则以清晰的形象将文字和意象勾连起来,无论是在网页、UI设计还是内容和体验上,都有着足够突出的体现。



营造氛围,渲染情绪,描摹环境,呈现角色,插画让故事更加鲜活、易于理解。在内容制造上,有着难以替代的作用。



5. 插画独有的情感吸引力


人是情感动物,看似理性的皮囊之下,几乎每个决定都是在情感和情绪的驱动下完成的。如果某个设计除了能够帮你达成某个目标,还能让你感到愉悦,会心一笑,那么通常下一步就是将它收藏起来并且分享给朋友。而在诸多设计因素当中,插画在撬动用户情绪这一点上,有着无与伦比的效用——从线条、色彩到面部表情和曲线和动效,都在竭尽全力地为你阐述故事,营造氛围,将你拉到故事和场景当中去。



6. 插画赋予设计以美学价值,更容易被接受


即使所有人都在分析和争论产品的可用性和易用性,大家在对美的追求上,始终保持着一致的态度。一个设计是否具备可取性,是否能够通过甲方、客户和实际用户,是每个设计人都需要面对,都力求做到最好的事情。精心设计的插画在美学和风格上更加扎实,风格化的设计不弱于现成设计素材所提供的价值。



7. 插画能让品牌识别度更高


和文本相比,插画的视觉化属性无疑是更强的。图片插画所提供的定制化内容能够从各个方面来贴合品牌的需求,更加到位地表达品牌所需呈现的信息。这也使得插画不仅仅在品牌宣传的时候,运用在广告、海报等显而易见的地方,而且也成了品牌 APP 中新用户引导和教程中必不可少的元素。



就像 Perfect Recipes 这个应用的新用户引导屏中,就借助插画来呈现。而 Toonie 这个可爱的闹钟应用当中,甚至借助游戏化的设计,集成了大量有趣的表情和贴纸,当然,它们都是使用定制化的插画来呈现的。



8. 数字插画还能强化交互,应用在短视频中


数字化的好处就在这里,通过不同的数字软件,合理的处理之后,不仅能够变成动态的,运用于视频当中,还能够作为微交互,强化产品的整体体验。


一旦涉及到的动效和短视频,整个数字插画就开始具备更多的可能性了,不同的动效能带来截然不同的感觉和体验,更不用说这种玩法正贴合时下的流行趋势。


Whizzly 这个动态图标就是基于插画,给一个创意分享社区所准备的。


9. 插画的独特性来自于其中的隐喻和引人入胜的视觉


和艺术一样,设计中同样需要借助隐喻来传达一些相对更有趣、更深刻、更有意思的信息。插画的独特性也是借此来构成,包含的隐喻使得其中的价值更加复合,值得反复咂摸,而不是一眼就可以完全看穿。



在这个约会应用的网页当中,插画无疑传递出了多重的信息,暗含的隐喻告知了用户产品的功能和属性。而下面这幅插画则是为一篇如何找到原创风格的文章所准备的,图中的金鱼指代的则是难以被抓住的灵感和风格。



10. 插画让用户可以更快理解和操作


无论是图标还是大幅的插画,都能帮助用户理解,更加直观地知道要看哪里,要做什么。面对如今的数字界面,用户的注意力持续的时间越来越短,而插画则让用户更快、更直接地获取信息,并且决策下一步要做什么。如果插画或者图标内容不能被用户一眼看出来,那么用户就只能借助文本标签来了解功能是什么。设计师可以通过测试来测试图标和插画的可用性和识别度。

值得思考的问题

当然,插画的设计是没有门槛的,在设计的时候,要求也是比较高的。在使用和设计插画的时候,需要考虑以下的几个方面:

  • 目标受众(身体能力,年龄,文化背景,教育水平等)

  • 产品的使用环境

  • 产品和内容的在全球范围内和当地的传播水平

  • 所选图形的隐喻以及是否容易被识别

  • 插画是否会让人分心

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档