首页

交互设计之探索GUI和VUI

纯纯

一、GUI和VUI的定义:


1.1GUI


GUI(Graphical UserInterface)图形界面,市面上最常见的交互方式。点触,滑动,作为主要输入方式。图像显示作为主要输出方式。




1.2VUI


VUI(Voice User Interface)语音界面,常见没有屏幕的智能音箱/耳机,靠语言输入和交流,如我们常见的小艾同学,天猫精灵等。





二、GUI和VUI的发展历程:


2.1GUI的发展历程


1973年第一个可视化操作的Alto电脑在施乐帕洛阿尔托研究中心(Xerox PARC)完成。Alto是第一个把计算机所有元素结合到一起的图形界面操作系统。它使用3键鼠标、位运算显示器、图形窗口、以太网络连接。

1981年施乐公司推出了Alto的继承者Star,Alto曾首次使用了窗口设计。

1983年苹果电脑公司推出Apple Lisa个人电脑,是全球第一款搭载图形用户界面(GUI)的个人电脑。

1984年苹果电脑公司推出Macintosh。

1986年首款用于Unix的窗口系统X Window System发布。

1988年IBM发布OS/2 1.10标准版演示管理器(Presentation Manager),这是第一种支持Intel计算机的稳定的图形界面。

1992年微软公司发布Windows 3.1,增加了多媒体支持。

1995年微软的Windows 95发布,其窗口操作系统的外观基本定型。

1996年微软发布Microsoft Bob,此软件具有动画助手和有趣的图片。

1996年IBM发布OS/2 Warp 4,它的交互界面得到显著改善,至今仍有不少ATM机运行这样的系统。

1997年KDE和GNOME两大开源桌面项目启动。

1997年苹果电脑公司发布Mac OS 8,这个系统具有三维外观并提供了SpringLoaded Folder功能。

2000年苹果电脑公司推出Mac OS X系统的默认外观Aqua。

2001年微软发布Windows XP,实现了主题支持。

2003年Mac OS X v10.3提供了一键单击访问任何已打开窗口的功能。

2003年Sun公司的Java桌面系统为GNOME桌面添加了和Mac类似的效果。

2006年微软发布Windows Vista,对此前其视窗操作系统的外观作了较大的修改,实现了Aero功能。



2.2VUI的发展历程


20世纪90年代,诞生了第一个可行的、非特定的(每个人都可以对他说话)的语音识别系统,交互式语音应答(Interactive Voice Response,IVR)系统的出现代表了VUI的第一个重要时期。人通过电话线路进行交互并执行任务,如机票预订、银行转帐、业务查询等。


目前很多像siri、Google这类集成了视觉和语音信息的APP,以及Amazon Echo这类纯语音的设计产品,逐步发展并成为主流。随着语音识别技术、AI技术、互联网技术的发展,我们已经可以在手机设备中用语音处理很多事情,但还有很多事情目前无法通过语音完成,需要我们探索。




三、GUI和VUI的设计要领:


3.1GUI



        交互的多样性:


不同于PC机通过鼠标来点击,在触控设备上通过手指点按,由于手指的精确度相对于鼠标指针差很多,所以子啊移动页面设计当中的交互元素一定得辨识作用,手机并没有悬停操作所以图标如果特征不明显时一定要加文字识别,设计时也应注意图标和菜单元素的尺寸。


拖拽和移动是很相似的交互工作,被拖拽的元素始终跟随着紧贴屏幕的指尖


除了使用单指之外,还可以用两个手指放大,缩小图片,如果设计了一些新的多指交互一定要给用户提示和指导。


3.2VUI


3.3VUI的适用场景


智能家居

在智能家居领域VUI应用越来越广泛,相信在不久的将来我们一定能够享受到更多的VUI所带给我们的便利。


辅助驾驶

车载语音交互系统使得我们可以在开车的同时接听电话、听广播等。


企业应用

未来大型企业中将会多领域应用VUI,用于书写、记录等工作。


医疗教育

智能记录病例、管理病例的出入。


四、VUI的语言设计注意事项


过多的声音干扰,不但会增加用户的心智负担,将会引起用户感到厌烦,尤其是,语音在资讯的负荷量上又比单纯的声音来的更多,考量是否存在存在的必要性就放在格外重要。而言,可以寻找替代的方式,透过震动和灯光甚至状态变化来提示,减少使用者的认知负荷,并确保声音只会在特定的时间点出现,并提供使用者自行设定关闭声音的功能


除了声音本身的设计外,还要考虑整体环境的影响因素,可能周遭受非常的吵杂。换句话说,在KTV的包厢,吵杂的环境,会使用者无法听到消防警铃响,而容易造成危险事件的产生。也因为如此,消防警铃的声音频率设计就应该介于2kM到4kM,因为研究指出人类的耳朵对于这个范围的声音最敏感


从音量的角度来看,耳朵对不同频率的音量有不同的感知程度,有些声音听起来很响亮,有些则是很沉闷因人而异,但比较客观的量化体验指标就是分贝(decibel,dB) ,在尺度上超过70分贝以上,会让人产生忧虑不安,并引发各种症状,因此要尽量避免尺寸大小过大的设计, ,,降低主动的侵入性。基于这些因素总和来说,还要考量到用户和产品间的距离,与产品愈近,对于体积的需求量较大,反之为然


在声音体验设计(Amber Case,2018)一书指出,当警告或提示音出现的频率愈高,就应该设计成愈短,但不足就是,如果把声音设计成短而急促,从而使用者需要集中相反地,事件发生时间间隔长且久,则声音提示更需要明显且激烈的声音来提醒用户,例如手机铃声响时,需要告知用户

文章来源:站酷    作者:张阳光Designer

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

交互设计九大定律

纯纯


先举个例子来理解一下:我要点击手机上的确认按钮所需要的时间,和 手与按钮的距离(D)   按钮的大小(S)有关。  当距离越长,所需要的时间越长。当按钮越大,所需要的时间越短。

undefined


自我理解:我们将日常看到的界面元素进行去色彩和去信息化,把这些控件/元素等都变成灰色色块,其实也就变成了最简单的原型图。这些灰色色块抛开了视觉上的属性,其实有两大最基本的属性,即色块的位置和大小。  菲兹定律告诉我们,要通过控制色块或者说界面元素的    大小和位置(绝对距离和相对距离)   来进行界面布局,进而控制交互时间,达到我们设计或者业务层面的目的。

     

a  合理的自身大小

这里是说合理的大小。一般来讲越大用户越容易到达,但是屏幕的大小是一定的,某一按钮/目标越大就会降低其他按钮/目标的大小。所以大小是相对制衡的,要根据具体情景和需求制定合理的大小(包括肉眼大小和实际热区大小)。但是关于手指点击的最小热区有规定是44x44px,一般的图形的热区大小都要高于这个大小,才能便于点击。其他大小要根据功能需求进行制定。

undefinedundefined


b 控制合理的相对距离

相对距离指的是界面内部各个元素与控件之间的距离。一般通过研究 整个流程 的交互动作,相互关联的操作元素/操作手势 距离会相对比较近,这样能有效减少操作的时间。

undefined

undefined



c 特殊的绝对位置:屏幕边界

屏幕边界是可以确定的(鼠标向某一方向一直移动终会停留在屏幕边界),但是屏幕中央确是较难确定的(四个方向鼠标均能延展出去)。一些重要和主要的操作放在屏幕的边界,可以方便用户快速到达,也是菲茨定律的普遍应用。

undefinedundefined



d  反向设计:增加时间来达成业务目标

业务目标有时候是与用户目的是相违背的,也需要根据具体场景来判断菲茨定律的使用走向。在特殊情境下也会通过距离和自身大小来反向增加使用时间来完成目的。

undefined

undefinedundefined


自我理解:席克定律也在研究交互时间。我们需要通过控制席克定律所总结的两大因素:数目和复杂程度 进而去左右界面布局的形式,从而缩短交互时间,达成良好的体验。


a 精简选择的余地

选择增加也就意味着事情可以发展的方向更加多元化,用户就需要权衡事情该往哪个方向发展,而这就需要时间。不要让你的用户思考太多,所以一般给出的选项在满足需求的情况下要尽可能的少。(这里注意:一般情况下要少但也不能太少,强迫用户也是不可取。)

undefined


undefinedundefined


b  减少事情的复杂程度

事情越复杂,越难处理。尽可能的将复杂的事件通过交互或者版式等手段进行简化,让用户觉得容易把握,而不是大量事物/流程/元素的堆砌。

undefined

undefined

undefined


undefined


undefined


自我理解:米勒定律对人的记忆数目进行了定量的研究,即 5-9 个是人脑接受起来比较合适的,多了就容易混乱。


a 控制选项的数量

同一类型或者同一层级的元素出现,数目一般控制在5-9个。

undefined


b 将多信息进行分段处理,便于理解记忆

面对有大量信息的时候(数字/文字/段落)将其分割到5-9个等大脑容易记住的数量。

undefined

undefined


c 顺应时代的取舍

看到了有一些设计并没有按照米勒定律去执行,因为随着时代的发展,有一些定律并不是万能适用的。定律不可照搬,要根据具体情境去做取舍,以最终效果为导向。

undefined


undefined


自我理解:和四大基本原则的亲密性原则类似,即在界面布局的时候性质相同的事物要相接近,不相同的要远离,这样更符合人们的既定认知。


a 将相近的功能的分为一组

在面临很多复杂功能时,简单的堆砌显得啰嗦,需求又不能随意删减。这时候就可以将相类似的功能放在同一个组别里面进行收纳整理,这与席克定律也相接近。

undefined


b 按照事物性质和关联程度严格把握布局的间距

这里与视觉设计也有很多重叠,即落实到页面的高保真的细节。保证内容想接近的元素间距要小,内容有区分的间距要大。

undefined

undefined

undefined


自我理解:任何事物都有其复杂性,不可避免。某些事物一旦失去其复杂性,其作用本质就可能失去效果。不要抱怨某些流程和工作,他们的复杂性是其发挥作用所必然带来的。所以才需要你来优化和简化。

a 把复杂性降到最低点

事物的复杂性是固定,但是要思考你所面对的是最简程度的复杂性么。首先优化内部系统的整个流程和不必要的步骤能够有效降低系统本身的复杂性。

undefined


b 把复杂性进行转移 组合 隐藏

再把复杂性降低到最低程度之后,事物/流程仍然表现出一定复杂性时。就要考虑造成复杂的元素是什么,是否要将造成复杂的元素进行收纳组合,甚至隐藏。

undefined

undefined


自我理解:在相同前提下我们选择最简单有效的。单纯的炫技是可耻的。


a 给用户清晰的引导

想清楚这张界面的主要目的是什么,顺着这个目标去引导用户,其他元素的视觉层级要让步,来让用户抓住重点。


b 少即是多

少代表流程/步骤/界面元素的减少,多意味着用户量的增加 体验感的增强。

undefined


c 衡量产品功能的取舍

产品在功能迭代改版上,会出现大量不同的声音和方向。但功能不是越多越好,用户的时间是确定的,在某一功能上消耗的时间长,在其他功能上就短了。奥卡姆剃刀就要求我们找到主功能点,其他功能点要做出让步妥协甚至砍掉。



自我理解:关于防错定律和我的上一篇文章入门(一)的放错和容错原则基本近似,只是分类的更细致一些,分解到了操作的前中后阶段来防止错误。上一篇有更多解释。


a  操作前  禁止操作或者预告结果

有一些功能在你操作之前就禁止操作,避免了错误的发生。或者通过告知操作之后会产生的不良后果

undefined


b 操作中 提醒用户

在操作过程中,进行错误提醒,有效避免错误的进行


c 操作后给用户弥补错误的机会

用户在使用app的过程进入错误的路线,需要给用户弥补的机会




自我理解:这一点主要体现在产品设计上,通过对未完成任务的提醒,来去博得用户的注意力,进而达到商业目的。


a 倒计时/读条等交互反馈

倒计时会给人一种紧促感,逼迫用户去注意,无形之中给用户规定了任务,这个任务也就是咋们的业务目标。倒计时 读条等交互方式也应该谨慎恰当使用,因为不是每一个任务场景都需要给用户紧迫感。

undefined


b 定向反馈提醒

这一点也是利用未完成任务的相关信息反馈达到让用户去完成任务的业务目的。

undefined



自我理解:在上一篇一致性原则里面讲到了和竞品保持一致/和迭代版本保持一致,其实是我拓展的。这一定律是明确指出了一致的根本原因。在产品设计的时候,用户的心理就是我希望你的使用方式/操作和主流一致,超出预期的就会有人群不接受,就会有用户流失。


a 能不创新就不创新

创新意味着改变,改变的不仅仅是你的界面还有用户习惯和长久以来的认知模型。破坏习惯重建习惯是有很大风险的。

undefined

undefined


其实能看到很多Dribble页面很有特点,也不是完全没有落地性,但是实际国内产品并没有看到这样的设计,原因就是不符合雅各布定律。


b 好的的产品都是创新的 不同的

这一点好像和上一点有点相悖。但是其实也不违背,有很多分寸的拿捏往往不是理论能完全决定的。微信后来居上绝不是因为照搬qq,如果新的创新带来的优势能够弥补不相同所带来的不足,也是可以尝试的。

undefined


文章来源:站酷    作者:花城丶

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



交互设计:如何做到惊喜?

纯纯

保持好奇,巧妙融合,追求卓越,自然而然

一家之言,未必全面,甚至未必正确。欢迎交流探讨。


01
交互设计的惊喜,是什么?

之前的文章,有简单定义过交互设计的“惊喜”,即为:超出用户预期,并让用户开心。

具体而言有两类,分别是:小惊喜、大惊喜。

1 小惊喜

所谓小惊喜,是指一些颇具趣味性或人文属性的交互设计小细节。


先说趣味性。常见的有两类,第一类是比较好玩的动效,第二类是一些小功能。第二类有时也会包含第一类。

动效这块,大家比较熟悉的,有 iPhone 上删除应用前图标的抖动,仿佛是吓的发抖,也可能是在摇头求饶;还有移动端登录 B 站、输入密码时,动画人物的捂眼捂脸动作。

(B 站登录页面)

小功能这块,也可以分成两类。一类是隐藏的小功能,一类是有趣的小功能


很多隐藏功能,头几次用的时候,多少会有一些惊喜之感。

比如在订阅号消息列表页,某个公众号你已经几个月没看过,对它失去了兴趣和信任。这时,尝试长按这个公众号的头像或名称,会呼出一个包含“删除消息”和“取关”功能的弹窗。

(订阅号消息列表)

还有些隐藏功能,既能让用户觉得惊喜和方便,又能引发用户思考。这种思考,可能会让用户感叹设计之妙,也可能也会给用户一种猜对谜语的欣喜之感。

比如用墨刀的时候,尝试按数字键 1,会呼出“内置组件”这个使用频率非常高的功能,会让人觉得墨刀很聪明。

如果再仔细看一下,会发现,“内置组件”的缩略图标,和其他 4 个诸如“我的组件”、“图标”等功能的缩略图标,并成一列。这 5 个缩略图标的排列顺序(上到下),和它们快捷键("、"键和数字键1、2、3、4)的排列顺序(左到右),是完全一致的。不得不说,这是一个简单又巧妙的设计。


再比如朋友圈里,某个不熟的好友每天都发集赞的小广告,搞的我们不胜其烦。长按其头像,会呼出设置权限(屏蔽等)的功能。

有意思的是,长按好友名字,则不会呼出这个功能。要知道点击头像或名字是都能进入好友主页的;另外刚才那个例子,长按公众号头像或名字,也都能呼出取关的弹窗。

个人的理解,生活中,我们用力长按一个人,通常是表达强烈不满,比如打架时。比起长按名字,长按头像更像是长按真人,所以也更能表达我们的不满。


说完隐藏的小功能,再说下有趣的小功能。比如微信聊天里的扔骰子、石头剪刀布,微信给朋友发生日快乐后漫天飘落的蛋糕,拍照软件里的贴纸,等等。

最后说下带有人文属性的交互设计小细节。常见的有如下类型:帮助弱势、关照情绪、表达情感、保护隐私。


帮助弱势这块,比如 iPhone 的辅助功能,里面有针对视力障碍的放大镜功能、有针对不识字群体的旁白功能。

关照情绪这块,很重要的一点,就是避免引起用户的负面情绪。比如微信的删好友是单方面删除,被删时我们很难察觉到,而且微信也不会通知我们。个人觉得,微信之所以不通知我们,其中一点,就是不给我们添堵。类似的还有,微信消息没有“已读”功能,这就大大减轻了接收者的回复压力。

表达情感这块,比较为人所知的例子,5 月 20 号这天,微信红包的限额,从 200 元升到了 520 元。还有一个例子,在微信聊天里发一个“ohh”,长按并点翻译,结果也是一个惊喜。

保护隐私这块,比如借助 iPhone 的“引导式访问”功能,可以让小朋友只能访问你的某个视频应用来看动画片。再比如别人用你电脑的时候,如果你不想让对方看到你的微信,就可以通过手机微信来锁定或退出电脑版微信。

2 大惊喜

所谓大惊喜,是指那些系统性大创新,并且能够引领潮流、代表未来的交互设计。通常而言,这些大惊喜,最开始给用户的感觉,就是酷。

iPhone 就是典型例子之一 。

2007 年的初代 iPhone,带来了当时的大屏幕:3.5 寸屏幕,以及纯触摸屏,和极为灵敏的触控体验。

2011 年,Siri 同 iPhone 4S 一起问世,为我们带来了语音交互。如今,在 100 元就能买到品牌类智能音响的情况下,依靠语音交互的智能音响也在慢慢走入寻常百姓家。

也许后乔布斯时代的 iPhone 创新不如以前,但不可否认的是,时至今日,iPhone 依然在引领潮流,在给我们大惊喜。比如这几年流行的手机无线充电和以 AirPods 为代表的极简的无线耳机。

以上是比较广为人知的交互设计,还有一些不太为人所知的设计。比如在家里网购一条床单,但是不知道床的尺寸,家里又没有尺子。这时,打开 iPhone 里的测距仪这款 App,就可以量出床的尺寸,会不会觉得有点酷。

(测距仪 App)

微信在引领潮流方面也有一些建树,比如极大的普及了二维码和扫一扫。小程序作为一种体验接近原生 App、同时又不用下载的产品,也正在引领新一轮的潮流。

还有一个比较酷的功能,就是以图搜图。笔者最早用过百度和谷歌的相关功能,主要是在电脑上搜索相似的图片,使用频率极低。

假设一个场景,比如在路上看到一个陌生人的外套很好看,但又不好意思上前问,就可以拿起手机,利用淘宝的拍立淘功能,拍张照就能马上看到相同或相似的商品。

如果淘宝上没有搜到类似商品,还可以用微信的扫一扫识物。和拍立淘相比,区别之处有两点。第一,不用拍,直接能识别,不过通常得等 1-3 秒;第二,识物结果里面,除了商品,可能还会有百科词条和资讯。


02
交互设计:如何做到惊喜?

个人觉得,有 4 个要点:既要有好奇心,又要有卓越心;既要天马行空,又要保持自然。

听起来可能有点乱,且听笔者一一道来。


1 保持好奇心

笔者观察身边读小学的小孩,发现,当大人聊天时,特别是谈正事时,小孩特别喜欢坐在旁边听,而且听的很认真。小孩有时也会说两句,或是问问题,或是发表自己的看法。

看得出来,小孩对成年人的世界,怀有极大的好奇心。实际上,不止于成年人的世界,小孩对周遭世界都有比较强烈的好奇心。

整体而言,成年人对周遭世界的好奇心,远不如小孩。我们互联网从业者也不例外。

好奇心和交互设计,有什么关系?

交互设计,某种程度上,也是一种创作。好的创作,一定来自生活。这就需要我们去观察生活。

观察生活,非常重要的一点,就是好奇心,对周遭人、事、物要有足够的好奇心。

比如上文提到的例子,在 iPhone 上删除应用前,应用图标会抖。这种抖是一种趣味隐喻,既可以理解成吓的发抖,也可以理解成摇头求生。如果对生活没有足够的好奇心,是很难留意到这种生活细节,并把它们作为一种隐喻运用到交互设计中的。

以上是关于好奇心,还有一种特质,也是在小孩身上表现突出,同时也和本文主题有关,那就是:童趣。

还是上文的例子,在 B 站 App 上输入登录密码时,动画人物会捂眼睛。这个设计,可能不会打动所有用户,但至少一部分用户会觉得比较有趣。如果我们内心没有一点童趣,可能也会觉得,这个设计,没啥意思。

玩是人的天性。对于比较好玩的交互设计,大部分人是比较容易产生共鸣的。实际上,据笔者观察,我们大部分从业者是有童趣的。我们比较缺的,是好奇心。

那么,怎样判断自己是否拥有足够的好奇心,其标志是什么?

个人观点,有两个标志。第一,是对与个人利益无关的生活小事的关注,远多于对个人利益本身的关注。第二,观察和思考,远多于评价和自大;追本和溯源,远多于偏见和傲慢。

为什么会提到个人利益?

因为,通常而言,个人利益,尤其是短期利益(比如少花时间设计和修改原型),往往会和用户体验存在一个此消彼长的关系。

如果过于关注个人利益,不仅很难照顾到用户体验,甚至会伤害用户体验。至于给用户带来惊喜,就更无从谈起了。

回到现实当中。在时代洪流面前,好奇心的两个标志,显得很难,该如何实现?

关键在于找到背后的源动力。这个源动力,在笔者看来,有两点,分别是:求知若渴、淡泊宁静。


求知若渴,可以源源不断的驱动我们去观察、去思考万事万物的规律和联系。

淡泊宁静,正如诸葛亮在《诫子书》中所说,“非淡泊无以明志,非宁静无以致远”。人的心力和精力终归是有限的,如果我们沉迷名利、物欲、享乐,就难有兴趣和精力去琢磨万事万物了。

所以,只要找回自己童年的那种求知若渴,同时修身养性到淡泊宁静,这份好奇心,就会回来。

2 巧妙融合

某种程度上,很多带给我们惊喜的交互设计,都是一种巧妙融合。

笔者把这种巧妙融合,初步分成了三类,分别是:简单融合、直接融合、委婉融合


简单融合,最常见的就是隐藏功能。把一个较为简单的操作动作,比如长按、双击、下拉、左滑等,和一个合适的功能,融合在一起。用电脑时我们常说的快捷键,也属于这一类。

通常而言,操作对应什么功能,讲究的是合适,并无固定章法束缚。比如在微信朋友圈,发表文字的功能可以靠长按(相机图标)唤起,设置权限的功能也可以靠长按(好友头像)唤起。所以,简单融合这块,可供我们发挥的空间很大。

另外,简单融合最常见的形式——隐藏功能,既实现了界面的简洁,又带来了一定惊喜。

简单融合,既简单,又实用。建议大家充分开发这一块。

直接融合,是指将生活中的趣味性,直接搬到软件中,搬到交互设计中。比如微信聊天中的扔骰子、石头剪刀布,以及漂流瓶、抽奖等。

这一类融合,有点像商场里的电玩城,虽然我们不会经常去玩,但确实比较好玩。

委婉融合,是指用明喻或隐喻的手法,将生活中微不足道的一些细节,移植到交互设计中。

这种移植,有时是直白的。比如 Mac 上打开应用时,其图标会在 dock 栏里有规律的弹跳,这会让我们联想到皮球的弹跳。

这种移植,有时是隐晦的。比如 iPhone 上删除应用前,其图标会抖。这种抖,是害怕还是求饶,任凭我们想象。

这种移植,有时是无声的。比如在朋友圈,要想呼出隐藏的设置权限功能,只能长按头像,长按名字则不行。这个设计,不乏想象空间。如果不尝试长按名字,则不会发现这个细节。

委婉融合,有时会带一些趣味性。更为重要的是,它能够引发我们的思考和想象,所以是一种很出彩的融合。这种融合,也会赋予交互设计,一种禅的味道。

整体而言,笔者非常推荐委婉融合。

3 追求卓越

如果目标是小惊喜,则保持好奇心、并做到巧妙融合,基本足矣。

如果目标是大惊喜,则需要雄心壮志,需要舍我其谁,需要追求卓越。

日常工作中,可能会有这样的对话。“这个动效/功能,实现不了”。

大惊喜里的几个例子,比如初代 iPhone 的触控体验,iPhone 里的测距仪,微信的扫一扫识物。这种设计,意味着要修一条最好的长城,背后往往有很多技术难题要攻克,有很多脏活累活要做。

如果团队文化就是做出最优秀的交互设计,那么,“实现不了”这句话,估计就听不到了。取而代之的,可能是:“还在研究中”,“下个大版本能上”。

4 自然而然

提到惊喜,还有一款值得研究和学习的产品,那就是锤子手机的 Smartisan OS。

个人观点,在小惊喜方面,Smartisan OS 颇有建树。在大惊喜方面,Smartisan OS 也进行了一些值得学习的探索。

先说小惊喜,比如华丽而细腻的桌面翻页动画,比如四指横划桌面可以切换桌面背景。还有一些贴心的小功能,比如静音可以设置时间,比如方便的长截屏。

(静音可设置时间)

(长截屏)

再说大惊喜。2016 年 10 月发布的一步和大爆炸,是比较大比较系统的功能,在当时也很新。锤子公司也一直有宣传这两个功能。所以相对而言,这两个功能是 Smartisan OS 的大惊喜。

笔者的备用机是锤子手机,身边也有朋友在用锤子手机。以一步为例,这个功能,笔者体验过很多次。但平常很少用,身边朋友的情况也类似。

(一步)

根据使用情况和主观感受,个人觉得,一步这个大惊喜,还存在进步空间,主要有两个方面。

第一,宏观层面。一步作为新生事物,好比一颗新种子。种子破土而出时,是一颗嫩芽,而不是一棵大树。新生的一步功能繁多,犹如一棵破土而出的大树,一方面有违自然规律,另一面因为功能繁多,很多用户无法一下子看懂,看不懂可能就不想用了。

第二,微观层面。一步这棵新大树,结了很多不同的果子,比如拖拽图片到其他应用、切换后台应用、展示最近图片/文件等。这些果子,是用户真正需要的吗?这个是要存疑的。

比如拖拽图片到朋友圈就能发朋友圈这个设计。通常而言,我们发到朋友圈的图片都是精挑细选的,会占用一定量的时间,比如旅游或聚会结束后发的照片。一步解决的是效率问题。发朋友圈的时候,少点几下这种效率问题,优先级是比较靠后的,我们没那么在乎。

还有拖拽图片/文件这个交互动作,大家通常在电脑上用的比较多,在手机上是没有这个习惯的,实际上应用场景也少。在手机上,大家一般只习惯拖拽应用图标。

还有切换后台应用这块,大家第一个想到的,一定是系统自带的,已经用惯了。而且唤起速度比一步快,点击面积也比一步大。

总的来说,微观层面上,比较缺让大家能马上想到一步的功能点。

最后,总结一下。对于领先时代、引领潮流的交互设计,需要做到自然。

具体而言,就是,大惊喜是一种系统性的大功能,好比一棵大树。这棵大树,最好有一个从种子到果子的生长过程,这样最自然,生命力也会最旺盛。

因为,从破土而出的嫩芽阶段,就可以通过用户反馈和数据来检验,这种嫩芽,是不是真的对用户有价值。如果价值不大或没有价值,还可以再调整。如果长成大树结满果子,再去调整,就很难了。


结语

交互设计小细节,如果有一定的趣味性或人文属性,则是小惊喜。

系统性工程的交互设计,如果最初感觉很酷,而且能引领潮流、代表未来,则是大惊喜。

始终保持孩童身上那种非功利的好奇心,用心观察并思考生活中的小事;

将生活小事和交互设计巧妙融合起来;

以上两点,可以帮我们做出小惊喜类的交互设计。

追求卓越,独立思考,做最酷最好的交互设计;

酷是结果也好,是目标也好,都不是最重要的。最重要的是,避免刻意和心切。酝酿大惊喜,犹如培养一个新生的孩子,需要投入极大耐心和精力,需要让孩子自然成长。没有家长会教半岁的孩子唱歌、把 3 岁的孩子送到高中念书。

再加上以上两点,可以帮我们做出大惊喜类的交互设计。

最后,用爱因斯坦的一句话来共勉。

想象力比知识更重要。

文章来源:站酷    作者:SnowDesign
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


交互设计之尼尔森的十大可用性原则

纯纯

系统应该在合适的时间内通过适当的反馈,始终让用户了解正在发生的事情——尼尔森


自我理解:用户无论在界面上做什么,都应该及时告知他发生了什么或者进展到什么程度。可以理解为人与人的沟通,界面需要及时告诉我们做了什么,现在是什么情况。


a.  这种告知应该是及时的。

加载任务在互联网中是最常见的,在加载过程中应当及时传达加载过程,减少用户的心理等待时间。在外部加载总时间无法优化的时候,使用何种方式能有更好的用户体验是设计时需要考虑的。

undefined

undefined

undefined


b.  应当告知用户你在哪里

你的界面需要引导用户来操作,即作为用户应该清楚的明白我在什么位置,我下一步可以去做什么操作。

现在app的很多设计基础包括顶部的导航分栏和底部的tab bar都是为了告诉用户他在哪里。

在做一些概念设计时候,如果单纯是为了更好的视觉效果,就对这些基础分栏进行大刀阔斧的设计,最终导致了好看是好看,可是用户都不知道这页面是干什么的结果,很明显是违背了最基本的交互原则 状态可见原则。

undefined


c.  应当告知用户事情怎么样了

用户在你的界面是要做什么事情,这是你在设计之前应该思考的问题。

如何把用户要做的这件事情更好的呈现给用户,反馈给用户以及有哪些信息需要反馈给用户都是你要从交互的角度思考的,这包括过去发生的信息和即将发生的信息,也包括正向反馈和负向反馈。(这种操作是否成功了?这种操作进展到什么程度了?如果这样操作会有什么后果?点击之后会达到什么页面?这里是否可以点击?)


很多概念性的设计很酷,从交互的角度上来看也是因为界面对信息进行了很好的反馈,比如下面的设计就是对登山的信息进行了很直观的反馈。(来自设计设计师anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept


undefined


undefined


自我理解:不同的人生活在不同的环境里面,不同的界面也有不同的外部环境。尽量保证界面在自己产品定义的风格里面,如果有机会还原真实世界的状态也很好。


a.  根据用户制定产品语言

在制定产品语言时,要了解产品的用户人群,使用相对应的用户群体所熟悉的文字语言 图形语言  板式结构  配色方法。要让我们的用户觉得这个产品很符合自己,而不是让一个老大爷去滑滑梯的感觉。一般来讲即便是同一产品,在国内外的产品语言也是有所不同的。

a. 模拟真实环境

产品在一些展示上模仿现实世界的样子,可以让用户快速接受,并感受到真实易懂。不仅仅局限于静态外观的模仿,还包括模拟真实物品的动态效果 声音等 都能给用户良好的使用体验

很多逼真的动效也是来自真实世界的映照。比如下面的可乐瓶的晃动就和真实世界很接近,让用户有很强的代入感。(作品来自设计师dannniel 原地址:https://dribbble.com/shots/6351526-Select-Drink-Animation

自我理解:为了不让用户进入一个错误的场景或者结果,对于一些特殊操作应该给予撤回重做,让用户能够充分的确定接下来的行为。

a.  返回到原始状态

可以理解为悔棋,即已经发生的行为返回到原始的页面状态,这个条件的设置也应该有一些条件的限制,不能一直无限返回。





自我理解:君子常常言行一致,好的产品也是一样。保持为一个统一的整体,包括产品内部和产品外部,也包括线上和线下。


a.  与竞品保持一致

很多人讲现在的同一类产品的同质化现象严重,其背后也是有一定原因的。相同或相似产品的用户习惯保持一致,即意味着用户需要更少的时间去学习甚至不需要学习。从产品设计上讲,用户使用越方便易用,产品设计的越成功。和相关主流竞品做出比较大差异化设计时候,虽然摆脱了同质化的问题,但是很多常规操作却需要用户重新学习,这样带来的后果很有可能就是用户流失。所以,没有充分的理由,请与竞品保持一致。



b.  请建立一套完整的规范

一套完整的规范包括组件 色彩 间距  版块结构 等。规范可以让你的产品一致性更强,你要让用户能够对你的产品产生一定的规范性印象,当他看到一张页面就能联想到这是什么产品。

undefined


c.  请保持产品迭代的一致性

现在随着互联网市场的不断稳定,很多产品进入了稳定的迭代期。但是在迭代期也应该以保持产品语言 用户使用习惯的一致性为一大重要原则,版本的迭代也应该逐步进行,不要急功近利。尽量保持原有的设计元素一致性,新功能的创新也尽量不要损害原有用户的使用体验。


自我理解:再发生错误之前采取措施来避免。


a. 引导用户,不要让错误出现。

很多app迭代更新之后会有操作指引,目的就是为了让用户学习,减少错误操作。很多引导页也有相类似的功能。


b. 给予提示,尤其是用户在做一些重要操作的时候

一些重要的敏感操作,产品通过二次询问得到用户的确认,




自我理解:能让你的软件产品来记住,就不要让你的用户来记。尽可能的在设计产品的时候,不要让用户去记忆,把用户当傻瓜。

a 记住用户的使用操作记录

这个记录不单单是在某一设备上,一般来讲都是跨设备进行同步。用户在使用的时候不用来回调整,体验感是很强。

 


b  让用户选择信息而不是填写

填写是一件成本极大的事情,很多用户不愿意在这上面花费时间。所以产品在设计的时候要尽量让用户去选,而不是去写。

undefined

c 自动读取

思考产品一些功能的使用场景,有没有自动智能化的需要。即不用问候产品使用者,自动提供解决方案。注意,这里讲的是提供方案,不是解决方案。提供大多数的解决方案,可以节省使用者的交互步骤或者浏览时间等,也是易用性高的表现。

d 提供适量的信息

其实另外一个交互定律法则(以后会讲)其实提到了选择的数量,移动端的选项一般不会超过五个,超过五个用户的头脑就会混乱。所以要考虑信息的摆放位置在哪里,一方面是需求决定的,另一方面也应该控制每一个选项的数量,不要让用户感到焦虑。


自我理解:一般来讲产品的用户群体是多样化,用户的使用熟悉度也是有差别的。要照顾到绝大多数用户群体的使用体验,所谓的高频是每一个用户群体比较常使用。


a.  设置快捷/重复入口

讲产品常用或者主打的功能放在产品容易操作的位置或者重复出现,用户可以高效的完成自己的需求。

一般来讲用户的使用频率越高越要放在操作热区和表面,反之亦然。

b.  用户自定义常用功能

照顾到不同用户对于某些功能的需求不同,对产品的部分功能进行用户自定义化操作,提高用户使用的灵活性。


c.  给用户默认选项

将用户经常使用的选项作为默认,减少用户操作时间,达到灵活高效的目的。像淘宝都会设置默认的收货地址,每次下单不用每次都输入,十分高效。(当然也有翻车的时候)



自我理解:互联网用户阅读产品的一个很重要的特点就是快。即不是来阅读不是来看,而是扫一眼。所以要求页面上的内容能够清晰可见,方便用户快速捕捉到自己喜欢阅读的信息,减少不必要的干扰,简洁高效。

a.  清晰的板块划分

把页面内容的优先级别进行分级,清晰的板块划分将会引导用户操作。还可以将页面的主推内容向用户展示,避免用户分不清重点。


b.  减少视觉噪音

注意页面的主角是谁,在平面设计中也有相同的概念。不要让背景或者装饰哗众取宠,而影响主要信息的传递,视觉设计是来辅助业务表达的。如果核心需求没有传递好,那就会单纯地成为一件艺术品,而不是设计作品。所以在设计过程中,要权衡视觉点,减少不必要的噪音干扰。


c. 严格遵守设计的四大基本原则:亲密  对比  重复   对齐

落实到界面上包括间距 字号 字重 版式节奏 。其实看到看到很多界面做的不精彩不优美,就是基础性的原则就没有完全落实贯彻。这里就不举例,基本所有的设计都要遵守的原则,很重要,很重要,很重要。


undefined


自我理解:要考虑到页面可能发生意外,错误发生后要及时弥补。


a.  提供清晰地说明和解决方案

考虑到可能会达到的错误界面。在发生的错误结果上,使用明确清晰的语言告知错误的原因,并给予解决方案。

自我理解:要考虑到页面可能发生意外,错误发生后要及时弥补。这一部分其实主要进行一些说明,让用户操作方便,相当于使用说明书。

a.  无需文档

进行新页面的设计尽量直观清晰,符合用户习惯,无需引导即可使用。

b.  一次性提示

改版引导或者新功能引导给予一定的提示

c.  常驻性提示

对于产品的操作性功能或者操作必须注意到的问题,产品需要进行一定说明

d.  帮助文档

用来解释一些常见问题。



文章来源:站酷    作者:花城丶

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



详解|用户体验地图,到底该如何使用?

ui设计分享达人

用户体验地图是什么 | WHAT

用户体验地图(Experience Maps)旨在通过描述用户历程和故事,使设计师、产品经理等项目成员更好地了解用户和洞察诉求。所以对于用户体验地图,我们可以将其定义为以下内容:

- 是一种描述用户故事的可视化工具;

- 是一种帮助设计师、产品经理等更好地了解用户的共创工具;

- 从用户视角出发,直观展现产品流程各个触点上用户的痛点、需求和情绪;

- 用户体验地图绘制的形式并不唯一,可以根据项目需求,增减内容。


undefined  

△ 途家 App 用户租房 · 用户体验地图案例



通常在接触到需求之后,设计师就可以开始梳理现有流程、使用用户体验地图了。要注意的是:

- 需要梳理的功能不分大小,都可以使用;

- 做之前,务必要先调研和访谈用户使用产品的情况。

建议时长:

- 重要项目:120~180 分钟- 日常项目:60~120分钟

参与者:

- 必选:设计师、产品- 可选:研发、市场、其他

工具:

- 电脑或白板+便利贴

 

为什么需要用户体验地图 | WHY

需要发现和拆解产品现有问题,梳理用户流程时使用用户体验地图,可以在聚焦阶段,整合用户诉求和业务诉求,共创机会点,找出解决方案,通常在以下场景中使用:

- 新产品设计:需要对需求进行拆解和优先级排序;

- 产品优化:发现产品现有问题,洞察设计发力点。

 

由此可见,在设计过程中使用用户体验地图作为设计工具,有以下益处:

- 更好的以用户视角来看产品的体验;

- 通过共创,项目成员达成共识;

- 确认触点,作为我们的设计方向;

- 通过用户痛点找到机会点;

- 帮助梳理产品流程。


undefined


△ 用户体验地图共创现场

 

用户体验地图操作流程 | HOW

我们通常会将流程分成4 个阶段:定义原则和目的 —— 梳理阶段流程 —— 洞察痛点 —— 寻找机会点。


1. 定义原则和目的

首先要了解我们做用户体验地图的原因和目的,包括用户是谁、解决什么问题、用户的目标、产品的整体目标、限定条件等等,对用户群体、整个项目背景和共创任务目标有清晰、全面的认知。


undefined


2. 梳理阶段流程 

首先是划分阶段,将用户的行为拆分成几个大的阶段,在整理时要注意:

- 在整个产品的范围之内尽量把故事、流程讲完整;- 以广度优先,而非深度,不要过早的沉浸到细节中。

接下来我们要将主要阶段拆分成单个任务,并梳理具体的任务和触点,罗列出过程中的任务和各个触点,要做到事无巨细。


undefined


然后根据任务和触点,整理对应的用户疑问、用户感受/情绪。通过对用户的观察和访谈进行梳理,客观的描述事实,切勿自说自话或是将自己的情绪代入其中,也不要急于猜想与分析。


undefined


3. 洞察痛点

这一步需要我们汇总用户的痛点,并将痛点分级,洞察用户痛点背后的真实诉求。这个过程中可以先让大家在一定时间内写出自己的想法,每一条写在一张卡片上,做到先相互不干扰,之后再统一整理和总结。


undefined


4. 寻找机会点

通过上述总结,思考新的机会点、解决方案、优化整体流程,并对新流程下的功能做优先级排序。可以通过准备一些问题来刺激大家脑爆出更多的内容,比如:用户还有其他选择么?怎么做用户才能更爽?其他用户来到这里该怎么处理?等等。在这个阶段需要:

- 对内容进行对标、讨论,把公认的点保留下来,无用的点剔除出局;- 根据实际情况和项目成本、进度等条件,对新流程下的功能做优先级排序。


undefined


 

如何为过程提效 |TIPS

在实际的工作过程中,因为项目时间都非常紧张,绘制这样一个完整的用户体验地图比较耗费时间,所以推荐大家几个提效的技巧,既可以减少时间浪费,也可以提高共创质量:

1. 事前

充分做好用户调研,提前准备好用户地图模板,可以在开始之前的一到两天发给参会人员,让所有人对产品有一个整体梳理和思考,有助于提高大家的产出质量。

2. 事中

如果是优化的产品,可以将设计稿 demo 或者线上产品截图打印出来,这样可以增强大家的代入感,有利于想法的输出。

3. 事后

整理电子版体验地图,需要跟随产品的演进进行更新,上传到项目共享空间随时查看。

文章来源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



聊聊状态开关按钮如何设计

纯纯

我遇到的这个例子,和“概念模型”有关,在这里分享给大家。


这个酒店房间的开关是这样的:


酒店床头开关



酒店客厅开关



这个开关是触控式的,开关本身有亮/暗两个状态;大家迅速看一眼,我想请问大家,你们认为,亮着的开关(图1的5个灯,图2的右上、左下2个灯)对应的状态应该是打开的还是关闭的?




如果心中有了答案了,继续往下看。




之前在文章从交互维度量化用户体验中我说过一次我个人理解的最小交互模型,大概是下面这段话:


狭义的交互(Interaction)定义交互主体必须是人本身,而客体可以是产品,环境,服务等等,且不论交互客体是什么,只要主体是人,人和客体去进行交互的时候,一定是人带着一定的心理预期施加一个行为,然后客体会根据这个行为给与一个反馈(没有反馈本质也是一个反馈),而人会根据这个反馈是否符合预期去进行心理修正。如下图所示(红先黑后):


那随之而来的另一个问题就产生了,人进行交互行为时的心理预期是从哪儿来的?


人初生的时候都是一张白纸,每天重复的交互行为产生的心理预期会随着不同的教育、家庭进行变化;今年我们家在广州过年,我第一次见到两岁的小侄子,通过这一周对小侄子的观察更能体会出人其实是有某些说不清的潜能在里面的,举个例子,有一天小侄子生病了,要吃两种药,一种是甜的,一种是苦的;吃甜药的时候小侄子很开心,愉快的呀呀的说这药是甜的,而吃苦药的时候小侄子也是皱着说这药好苦,关键的问题是,出生两年来,家人从来没有对他描述过苦味是什么,也没有明确告诉他这两种药有一种是“苦味”的,但是两岁的小孩子就能尝到苦味的药在没有接触过“苦”这个词的时候就讲得出来这是“苦”。


再举个例子,还是我的小侄子,我们贵州人过年一般都会真金白银的打麻将,小侄子目睹了几天我们在麻将桌上用大把的零钱来支付,有一天我们去公园玩,遇到一个熟人给小孩子了一个红包,我们就问他“钱是干什么的呀”? 我小侄子脱口而出:“钱是用来打麻将的呀!”


为什么会发生这样的现象呢?


大概是现在的人买东西都用微信支付宝支付,所以对于小孩子的认知来说,他们由于没有见到过纸币参与交易的行为,而这几天不断被我们麻将桌上的现金冲击视觉,才会突然脱口而出这句话。


可能在我小侄子的认知里,手机才是用来买东西的。


我们互联网圈的设计行业其实能形成理论的东西不多的,大多数时候为了佐证某些东西,我们需要从心理学、社会学、行为学中找到一些理论支撑。我在做产品设计的过程中,最长这么时间一直使用的一种方法是思考用户在这个页面的心理预期。(比如在商品详情页,业务目标肯定是引导用户购买,但是用户心理上之所以点进了这个商品的详情,无非是在有购买意愿的基础上,需要一些信息去辅助决策,这时候如果你仔细思考并模拟一下你自己在购买时候点击详情页的行为,其实会发现其实影响决策的信息大多不是价格(因为价格在上一级的列表页已经标明了),更多的可能是产品描述和用户口碑等等)


在做尤其是app设计的时候,能明确每一个页面的业务目标和用户点进来的预期,其实是一件非常重要的事情,大家可以多留心在这两点上。



好的扯远了,回到状态开关的事情上来,还记得刚刚的那个图么?


酒店床头开关



酒店客厅开关


我相信绝大对数的人第一反应都是,亮着的开关对应的灯应该是亮的,因为这个符合常识,但是如果这个酒店也是这样的话,我就不会举这个例子了,没错,上面开关亮着的灯是关的,没有亮的开关对应的灯是打开状态。


我相信设计这个开关的人是为了让用户在夜晚起夜的时候使用方便,但是他完全可以用更加高明的办法,比如换成夜光材质之类的。这种设计师很愚蠢的,我观察这么多天下来,我们所有亲戚每次开关灯几乎都会误触,因为我们的心智一直一直认为的是亮着的开关亮着的灯。


这里就牵扯出一个问题,我们在app设计中如何去设计状态开关的问题。


首先需要明确,最无歧义的状态开关一定是需要具备两个意符:

其一是表征当前状态

其二是表征用户点击之后的状态。

而现在市面上很多app在这两个意符上是混的,一般都知道用icon的样式来表征当前状态,但是下面的辅助文字则是表征当前状态的和点击之后状态的都有。


这就会让用户很蒙。


比如相机app、短视频app、K歌app中就比较明显会有很多状态按钮,如下图所示是某相机app的截图,这样的设计就是“有歧义的设计”,比如“延时关闭”和“补光灯关闭”这两个文案,会很容易让人困惑这文案指代的是当前状态呢还是点击之后的状态呢?


给大家提供一个我个人的小tips:


设计状态按钮,尽量把当前状态和点击行为拉出两个层级关系来设计。


当前状态可以体现在icon上,但是不能只体现在icon上(比如他这个延时关闭的图标有一个x,但是补光灯关闭又没有x,这就更加歧义了)


比如如果是我去设计它这个按钮,我会这么设计:



这样的话,确实,用户操作复杂度上会多一级(之前直接点icon,现在点icon之后需要再点开关),但是用户完全没有认知成本。


这就是我说的把当前状态和点击行为拉出两个层级关系来设计。其实这个牺牲交互成本减少用户认知成本的方法在交互设计工作中经常被我们使用,当我们遇到一个问题实在是一步很难理清的时候,不妨可以多尝试这种思路。不过这种提高复杂度的减少认知的方法,不适用于业务强指引型页面(比如购买、导航之类)


文章来源:站酷   作者:Seany

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何设计好消费向app产品

纯纯

本文算是一篇产品分享文吧,主要科普一下消费向内容在KillTime方面都是怎么玩的。



Part I - 消费向产品及其发展科普

大家看上面那句英文,我用的是“Spend Oriented”,Spend这个词本身是一个偏中性的词,不光有花钱的意思。“消费”一词其实如果大家去查它的原始定义是指“利用社会产品来满足人们各种需要的过程”今天在这里说到的其实是“用户在上面消费内容”的app产品,这个内容可能是图文,可能是流媒体。也就是说,今天讲的app都和“Kill Time”有关。

那我们不妨先来看下面三页ppt:


1.消费向产品的演变:

我大概把今天要讲的消费向产品分为四类,第一类游戏略过就还剩三类:

a.图文Feed类app产品:

这一类产品其实是经历了从门户到app的演变的,早期互联网时代,所有的图文内容都在门户网站上,这时候的门户网站比如新浪搜狐网易,他们其实是内容为中心,用户围着内容转,用户会自己去挑选甄别自己想消费的内容进行消费。


然后从门户到app的过程中,最开始比如搜狐新闻app他其实是一个从门户到app的纯移植,他的本质没有变化,还是以内容为中心,用户围着内容转,不过后来随着移动互联网的发展,因为移动端的特性是“高频多次”,他就不像门户我只能上班的时候坐在电脑面前看,移动端的特性决定了我无论拉屎还是乘车,随时随地打开都可以看,那这个时候如果还是内容为中心,用户每次进来都需要进行一个很长时间的甄选内容的过程,真正消费内容的时间就相应的会被压缩,这时候就有了整个新闻移动端app产品从“内容为中心”到“用户为中心”的转型。第一次有了用户中心的概念,比如有了账号系统,用户可以收藏点赞(Mark)一些的自己感兴趣的内容,然后通过用户的点赞阅读点击行为进行推送和订阅:

除了新闻门户之外,还有一类图文产品就是兴趣聚合,最开始大家会发现都是一个产品主公一个方向,大家想看什么内容就去相应的地方:比如天涯猫扑就是一个讲故事和段子社区,榕树下主攻青年文学,虎扑是体育相关。大家在自己垂直的领域发展,互相也不怎么干涉。但是这些UGC平台的本质还是生产者,是人,随着每个平台都有自己的大V出现之后,网易推出了博客,这是一个以人为中心的分发结构的产品,除了以人为中心的分发结构外,百度心里想,不是之前的门户都很垂直么,那我是不是可以建一个平台,让各种兴趣在我这里以”吧“的形式聚合?于是就有了一个兴趣内容聚合平台”贴吧“,然后随着发展,大家发现博客这种东西用户消费成本太高了,一个大V一篇文章好几千字,生产内容也费尽,用户看着也费尽,那不如就做一个微型博客更多的让人发声就好了,于是有了微博。

△.既然说到这个了,在这里多扯远一点,其实互联网发展的进程都是这样,绕不开平台和垂直,大家想想五六年前的电商产品是不是一个道理,当年只有淘宝一家是平台,其他的,比如京东主攻家电,一号店是零食,聚美是化妆品,美丽说蘑菇街则是衣服(蘑菇街主打职场美丽说主打校园)


b.泛娱乐类类产品 & c.工具类产品:

泛娱乐类产品我这个框子画的很大,大概最初的原型是为了解决我们“听歌”和”看视频“的需求,然后最开始的几大门户大家都知道优酷土豆、腾讯视频、爱奇艺、搜狐视频、乐视等等。最开始那几年互联网基础建设不行嘛,科技也没发展到位,所以那时候视频清晰度都好低,而且下载率非常高,大家一般消费内容会采用”在家wifi先下好然后再看“这样的办法,但是随着基础设施的加固,大家发现流量好便宜,这时候在15年才开始有网红直播这一块的业务出来(游戏直播是很早就有的哈),我个人会认为催生网红直播产品的归因是科技进步流量不花钱了。随着网红直播类兴起的另一类产品就是短视频类,我个人认为短视频产品的出现本质归因除了流量不花钱了之外,更多的是解决之前门户视频网站内容消费成本过高的问题,众所周知,现在人越来越懒了,一集电视剧40分钟,很难坐得住不分心的看完,所以现在视频app出了倍速播放。这本质的原因是用户消费内容的High点(达到满足的点)越来越高了。

再说听歌这条线的演变,最开始听歌,然后唱吧、全民K歌,国外的Starmaker等等出来做了唱歌app,这时候的app本质是一个工具,但是用户UGC内容的时候沉淀了很多作品在这些工具app里,所以这一类产品就开始做去工具化,变成了一半社交一半工具的产物。另外K歌产品火了之后,才有的FM类产品,因为都是消费音频和音频直播嘛有共性在这里就不展开了。最后就是这类音频产品不满足只做音频,所以就开始做视频了,这就导致你现在打开全民K歌或者唱吧或者国外的好多app,你会发现只要是娱乐产品都有短视频的原因。


2.消费向产品的核心目标:

GNT是一个罗振宇2016年年终演讲时候提出的词,我们假设平均每个人每天8点到家到晚上12点的时间是可支配时间,那中国网民每年新增数量(今年是1000w)已经稳定在和出生数量一样了,所以我们认为网名总数不太会有啥变化,比如之前我用三个小时在优酷腾讯爱奇艺上看电视剧,一个小时听网易云音乐,现在我大概只用一个小时看电视剧其他三个小时都在刷抖音,这时候,大家会发现消费向产品的决战维度就不是自身的垂直领域了,之前我们会认为视频门户哪家片源优质哪家就牛逼,现在不是的,现在的产品除了垂直比较之外更多的竞争是在时间维度的较量,这是为什么抖音这种产品突然一下很火的原因,我稍后会着重说抖音这里就先略过了。

3.为了占用更多的用户时间,设计师可以发力的点:

内容源是否优质(这里的”优质“指的是内容和用户的March值)其实是用户是否消费的最大的一个指标,因为内容源和用户的March值主要反映在下面的前两个问题中:

给用户展示什么内容?

这些内容的优先级是怎样的?

这两个问题一般我们设计师并不能控制,关于什么时间什么环境下给用户展现什么内容,往往跟用户历史行为和算法有关,如果大家看了头条的算法公开课大家会知道头条的推荐算法其实是有三大类(内容维度、用户侧特征、环境特征)几千万个向量特征去控制的,如果不是纯算法推荐也会有运营去干预内容的露出,所以这部分其实设计师可以干预的比较少,我们真正可以干预的东西是后两个问题:

如何让用户迅速找到自己感兴趣的内容进行消费?

——这就涉及到内容源呈现方式的抉择问题。

如何尽可能的降低用户消费内容时的交互成本?

——这就涉及到两个问题,一是从交互上让用户尽可能沉浸消费,二是交叉推广和分流的问题。


Part 2 - 消费向内容的主流呈现形式:Feed Flow

△.谁能告诉我一下Feed Flow(我们工作中所说的”Feed流“中文怎么翻译?Orz...)


1.RSS vs Facebook's New Feed

如果大家是一个早期互联网民,一定听说过RSS的概念:

RSS (Really Simple Syndication简易信息聚合协议)是一种的工具,使得用户可以在客户端借助于支持RSS的聚合工具软件,在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。举个栗子:如下图所示,小张在pc时代,每天会定时打开华尔街日报网,ChinaDaily,王老三的博客看里面的内容,但是每天都打开三个网站让小张觉得很烦,这时候借助RSS工具,他可以把三个(支持RSS协议的)内容源聚合到一个第三方的RSS工具上,这样他就不用每天反复打开三个网站了,除了获取这三个网站的陈旧内容之外,这三个网站每天的更新内容也会被实时呈现在这个RSS中:

一个RSS聚合工具内,每一个单条内容源,就称为Feed(取的是滋养的意思,就是源源不断的满足用户消费需求的含义),那早期的Feed序列大家也看到了是从RSS衍生出来的概念,Feed流的排序也是用户定义的,比如可以按照Timeline排序,或者是按照用户自定义Tag聚合,或者是按照interest标签(收藏,喜欢,点赞都属于泛意义上的interest),那大家就明白了,RSS里的Feed流本质上是一个用户自定的,关于内容收集的工具而已。

到了2006年,我们的爸爸Facebook开始做社交,因为Facebook是人和人的关系聚合,其实当时Facebook就借用了Feed的概念,创造出了以“关注Follow”为核心的新型Feed,在书上(我忘记是哪本书了)把它称为Facebook‘s New Feed,它其实有三个特征:

1、内容源从URL到人的状态(其实本质也是一个一个URL序列)。

2、不仅仅是Timeline的基础排序,更多的指标参与进来决定内容排序

3、订阅内容中夹杂费非订阅内容(参考微博),让用户永远刷不完没有尽头的消费

上图是RSS和Feed的对比。

到了今天,其实几乎市面上所有消费向产品(新闻类、微博、Instagram、Snapchat、短视频、等等),都在Facebook New Feed的基础上进行了改进,所以今天我们把这种New Feed更习惯的叫做Feed,大家可以去PM社区之类的搜Feed能发现一堆文章可以阅读,在这里就不赘述了。


Part 3 - 匹配、分发与消费

知道Feed的概念能方便我们理解接下去的问题,还记得接下去是什么问题吗?

1、如何让用户迅速找到自己感兴趣的内容进行消费?

——这就涉及到内容源呈现方式的抉择问题。

2、如何尽可能的降低用户消费内容时的交互成本?

——这就涉及到两个问题,一是从交互上让用户尽可能沉浸消费,二是交叉推广和分流的问题。


1.先分发,再消费的app模型:

我们不妨先来看主流的Feed分流的两种模式:

一种是微博这样的关注序列插入非关注序列(推荐、广告等),另一种就是关注序列浏览完用户拉不出新Feed的时候有个分流按钮提示,别小瞧这个小提示,往往能带来每天5-7%(我自己的工作经验数据)的新模块引流。


再说用户迅速找到自己感兴趣的内容进行消费的问题,这里就涉及到内容源的呈现方式。我之前唱吧的那篇文章举过这样一个例子:

唱吧7.0到8.6的三次改版牺牲了展示效率(从7到5)HighLight了文字信息,是因为我们发现图片信息不足以让用户做兴趣判断,大家看下图就明白了:

快手的图片本身就是内容的简略呈现形式,大家可以基本通过图片来得知里面的内容大概是什么,如果遇到用户难以判断的,快手在用户上传视频的时候鼓励用户打字说明,比如大家能看到图中的红字,就是说明视频内容的。这样的话,用户通过图片能清晰得到点击之后的内容预期,比较符合用户心智。大家再来看唱吧,大家会发现图一图二图三都是漂亮的小姐姐,这个就没办法告知用户里面的内容究竟是啥样的,那支撑用户点击进去的除了颜值之外,更多的可能是歌名,和这个人的歌手等级,收听量这样的数据才能支撑用户点击。唱吧这么改之后我印象中模块CTR是有明显的提升的,但是具体数据我离职太久忘记了...

所以其实内容源的呈现方式本质上和内容相关,这里的UI应该以“如何让用户迅速找到自己感兴趣的内容”为核心设计目标去设计,具体问题具体分析咯~


再来说常见的消费向内容的交互模式,最常见的就是Push&Back的模式:

所谓Push&Back就是用户一次点击进到详情页消费内容,看完之后再点击返回回到Feed列表,然后继续在列表里寻找下一个想要消费的内容的模式,比如下图:

传统的Push&Back交互成本太高,用户看完之后需要点击返回,然后浏览内容列表选择自己想看的,然后再次点击进入。这种就是很难达到沉浸式消费,用户跳出率和关闭率都比较高。

于是有了另一种模式就是让用户不跳出,直接挨个在当前Feed下的内容:

举个例子就是知乎的“下一个回答”点击按钮和下拉交互,以及微博的视频关灯流:

这种模式使得用户在消费内容的时候交互极其便捷,轻轻滑动或者一次点击就可以消费下一个内容,大大增加了沉浸的消费体验:

关于如何尽可能的降低用户消费内容时的交互成本这个问题,上面这一种办法,其实还有另一种,就是所谓的交叉推广,大家看下面这个图,前两张是头条Feed,后三张是陌陌:

头条点击一个视频后,下面会给你推和这个视频相关的一些视频(可能是内容维度相同都是做饭的,可能是用户侧特征相同都是美女做饭,可能是环境特征相同都是教你明天中秋节怎么做月饼)让你去观看(而且你发现没头条iOS版本和抖音iOS版本都是默认隐藏statusbar的,你看不到当下几点了,为的就是让你一直看下去...)。

陌陌这款产品就更有意思了,比如我点击第二个入口(右1)进去,这时候有个上下滑动切换的交互,app的指示意是:“切换到下一个主播”,那按照常理来说,我松手之后,应该消费的是第三个入口(左2)的内容没错吧?但是你会发现事实并不是这样,它其实跳转到了一个全新的Feed序列,所以交叉推广的概念如下图所示:


2.直接消费的app模型:

上面我们讲的都是先分发再消费的模型,它一定要有一个内容承载的Feed页,然后用户根据自己兴趣去选择性的消费内容。那本着:“降低用户消费内容时的交互成本”这个思路,有没有可能去掉分发这个步骤,不要内容承载页,直接上来就让用户消费呢?这就是大家熟悉的抖音:

Musical.ly(后改名Muse然后被抖音抄然后被抖音收购)这款app创造了一种直接消费内容的产品模型,这种模型有什么特征呢?

1、交互成本最低,打开即消费,一次上下滑动即分流,左右滑动(或一次点击)即分流,极强的沉浸性。

2、依靠算法把很多Feed序列整合成了一个无穷尽的Feed,完全依赖算法和用户行为数据、短视频数据判断展示优先级。

我们不妨来对比一下“先分发再消费”和“直接消费”的两种产品吧:

“先分发再消费”类的产品,由于有一个内容承载页,用户可以选择性的点击消费,比较尊重用户。而抖音这类产品呢,直接把内容强制用户消费,本质上是带有一定胁迫性质的。直接让用户消费内容的比如抖音类产品,不给用户自主选择的机会,胁迫用户消费产品提供的内容,如果内容足够优质的话会有奇效,如果内容差强人意,戳不中用户的High点,则有可能适得其反。


我认为抖音这种直接让用户消费内容的产品模型本身是一把双刃剑。


大家玩了这么多app应该也能发现了,市面上壳子抄抖音的产品现在特别多,大家会发现只有抖音好看,别的都是看一两个就看不下去了想关掉,这里的原因就是因为用户被胁迫消费你提供的内容。

我们假设你是一家内容实在不怎么行的app,如果强行用抖音的模式,你第一个内容是一坨屎,用户吃了一半滑动跳过了,这时候他发现第二个内容还是一坨屎要给他吃,用户意愿会下降得特别厉害,甚至一两个视频过后就直接关掉了。但是如果是先分发的模型,里面都是一堆屎,但是我告诉你了,第一坨屎是草莓味的,第二坨屎是橘子味的,这时候用户自己想消费哪一坨内容是他自己的点击选择,和你无关,你app设计者不用承担胁迫用户消费的风险,自然用户对自己选择的内容的容忍度也会高一些,可能不会看一两个就关掉了,没准儿会看四五个。这样是不是浏览时长就增加了?


给大家讲一个理论性的东西吧,抖音内容的理想时间模型(名字是我自己随便取的):如下图所示

我们假设理想状况下这个用户没别的事不会被中途打断,只要想刷可以一直刷一辈子抖音,然后我们来研究内容质量和用户浏览时长的关系:我们假设,每一个个体用户都有一条平均匹配线Marchline(这个匹配可能是内容维度的比如我喜欢看dota不喜欢看lol,喜欢科普不喜欢鸡汤等等),内容只要比匹配线高,对于我们的心智就是一个正向刺激(Positive)。

我们假设每个视频都是15s,大家会发现你们每天打开抖音的第一条视频总是很优质(其实抖音最初冷启动的时候准备的视频都是1500-3000一条买的优质脚本之类的,花了几千万呢,所以这些优质视频源奠定了第一波龙湖留存),如果第一个视频总是很优质,用户很喜欢,那心智就会上升,是一个正反馈,然后第二个视频如果也很精彩,那就会把用户推向high点,如果这时候第三个视频一下子推了一个特别烂的或者没算准给用户推了一个用户不是很中意的,理论上用户交互成本很低,可能只看了一半划过就行了,但是如果连续两三次都给用户推了很烂的内容,那用户的负向刺激(Negative)越来越多,一半两到三次就退出了。

在这里面有一个我总结的思考就是,用户的Marchline其实是浮动的:

Marchline(new) = Marchline(old) + △Willing

用户每次打开app到关闭app的过程中正负向刺激的向量和。

所以本质上抖音这种点开即消费的短视频设计方法,是对自家内容极度自信之后的产物,记住抖音模型是把双刃剑,如果你不是对自家内容那么自信或者不愿意花钱来砸内容,就尽量不要用抖音这种交互,很容易塞用户一嘴屎得不偿失!




3.一边消费一边分发的app模型:

上文已经讲过了快手(先分发再消费)和抖音(直接消费)两种产品模型。

他们各有利弊,但是在最近半年,热爱创新的产品设计师们在短视频领域让我见到了眼前一亮的第三种模式,就是Instagram的旗下的IGTV(入口在Ins的右上角,也是一个独立的IGTV app),它采用的是一种创新的一边消费一边分发的模式,可以说这个创新是很亮眼了,大家有空可以去下载体验一下:


这款产品默认打开是图1所示,后边的视频是在播放的,这就满足了直接消费,但是下面有一个推荐列表可以滑动选择,满足了分发,然后如果需要沉浸的观看某个视频,手指在图1上下滑就会变成图二,这就变成了一个完全沉浸式的抖音,和抖音的区别是抖音采用上下切换,IGTV采用左右切换,它最绝的地方是把消费属性做到了极致,甚至在搜索或者在发评论的时候,后面的视频也依然在播放。

这就很好的解了交互效率和分发的问题,大胆预测IGTV的交互模式是明年短视频、视频直播、视频社交抄的重点。(其实现在已经看到Azer之类的产品在大量采用这种交互了)

总结一下吧,其实设计的本身在解决问题,只不过随着时间的推进,大家的认知层次会逐渐升高,最初我们认为快手这种分发效率过低,于是抖音出来了之后大家都抄抖音,但是别的app没有抖音这么好的内容,于是取了折中有了我个人认为更合适的IGTV这种交互模型。

其实今天这篇文章想要阐述的一个思想是“目标导向的设计”,我们为了解决一个又一个的问题,在不断解决问题的过程中交互一次一次的微创新,微创新到一定量就会变成一个大的创新。每次看到很多有创新的产品都会感觉到欣喜,作为设计师大家也可以多看一些app产品,大量的试用不同的app产品,然后归类总结一下,相信也会有所收获。


文章来源:站酷   作者:Seany

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


用户体验是玄学吗?

纯纯

Part 01 - 用户体验和用户体验设计


关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。



1.1 什么是用户体验?

用户体验的定义有很多种,我比较倾向的解释是:

“用户体验是人对于使用一个产品、系统、服务时的预期和反应。”

首先明确第一个概念,体验是一个过程,生活中的一切皆是体验,我们赤裸裸的来到这个世界,最后赤裸裸的离开,来人世走一遭就是来体验来了。

从广义上来看,体验的主体是人,客体可以是一切物体和事情,媒介是我们的感官;当我们的感官作用在一切事物上,会产生相应的心理行为,比如预期,比如反馈,比如情绪,着所有的一切一起作用,形成了用户体验过程。


只要留心生活,你会发现用户体验无处不在。

举两个例子:

第一个是北京随处可见的地铁充值机,我经常看到用户站在那里懵逼,最主要的是他违背了用户的操作习惯,插卡机器的的行为总会让人联想到APM机,而几乎所有的APM机器卡都是插一半然后自动吸进去的,而北京地铁卡是需要插到底,然后还需要用力按一下才能成功识别,跟多用户懵逼在这一步,并没有用力按,然后以为是机器坏了没有识别。

第二个例子是我工作的地方旁边商场一楼有一个肯德基,它有两个门可以进入,第一个门是在商场外临街,第二个门是在商场内。

我连续两周的工作日每天早上9点半到10点在这家店吃早餐,发现一件很有趣的现象,由于工作人员的疏忽,商场内的门二经常会忘记打开,因为这个商场的负二楼和地铁站连在一起,所有很多人地铁到站的人群从地铁站口出直接从商场内走向街道:

在这些人群里,如果他们正巧有买早餐的需求,他们往往会从门2进,如果正巧由于工作人员的疏忽,门2没开。按照常人的思维,哪怕门2没开,那不还有一个门1么,用户完全可以多走几步出去从街道门1进入啊,应该不会太影响。如果你能得出这样的结论,又碰巧你正好是互联网的设计或者产品人员,那么你可能有“自我安慰型人格”。

我吃早餐的两周里做了一个统计,10个工作日里,每天在我吃早餐的这半个小时内,试图推开门2却发现打不开的,平均到每天有6位,按照每个人平均买一份早餐套餐15元钱来算,10天内,由于工作人员的失误,这个门至少阻挡了至少900元营业额。


回到刚刚那个“自我安慰”的思维,我发现,10天内被这个门阻挡的实际62位用户里,真正出街道从街道门1再次进入的人,只有十七位。也就是说这个实验中肯德基早餐用户被最短路径阻隔之后,再次选择次路径完成转化的转化率17/62(27%)。

别急,还有更吃惊的数据:在被门2阻隔的62个人中,有17个是自身顺路要往街道右边走路过门1的。但是由于被门2阻隔,他们17个人当中,哪怕自身行走路径要路过门1,选择从门1进去的也只有7位,大概在11/17(64%)(判断顺路依据是他们吃完后从门1出门往右走)。


再看一下肯德基这个例子的数据结论:

被门2阻拦的62个人里,45人流失。

其余17位选择从门1再次进入,这17人里,本身就要顺路经过门一的占11位,说明大概率只有顺路才会进入完成转化。


这个例子说明什么呢?

在替代品遍地都在的今天,不要试图去挑战用户的体验。


当用户看到肯德基的门2,他们产生的预期是马上就可以推开享受一顿早餐,这时候由于门2打不开,使得用户预期受挫。

受挫用户的第一反应并不是想解决办法(表现在例子中就是寻找另一个门进入),而是放弃它。毕竟,没有肯德基我还可以吃麦当劳,还有星巴克,还有面包店,各种各样的选择。


这就是为什么互联网行业把产品用户体验看得这么重要的原因,除了社交产品以外的用户是很难有忠诚度的,你的产品难用,你不能给用户更大的福利,用户一旦发现别的产品做得比你好,用户会马上放弃你,转而用别的替代品。


上面的那个例子主要表达的是用户预期受阻带来的糟糕体验导致用户流失。其实整个用户体验的过程当中,是有很多很的因素相互制约,协同作用的:


户体验本身一个很庞杂繁复的系统;在一个过程内,用户对整个过程中的元素的预期和反应(情感和生物反应)构成了整个用户体验系统。这里面包含了很多很多的旁支,比如人的感知、人的经验系统和使用场景决定了人对于单个体验的预期,而如果超过预期会带来惊喜,促使用户正向评价,也促使用户再次体验。比如人感知和体验中客体呈现的意符决定了人的行为等等…


用户体验最初的时候它只是用于表征易用性方面,而现在,它的概念更多的表现在情感的一个分支,包含设计情感互动和评估情绪 。因为人的情绪是很难拿捏的,面对不同教育背景不同生活经历的用户,我们最初其实很难归纳出到底什么样的设计是具有好的用户体验。


好的用户体验各有各的优点,但是,糟糕的用户体验却很容易被归纳和识别出来。


设计师们不断的在识别和总结糟糕的体验问题,慢慢在优化这些问题的过程中积累经验,其实也慢慢的有了一些关于用户体验的方法论形成,这种方法论作用于各个设计行业,工业设计、服装设计、奢侈品、广告、互联网产品设计各个行业产生的方法论其实不尽相同。




1.2 什么是用户体验设计?


说起设计(Design)这个词,那就厉害了 ,作为设计师的你听说过解释肯定有很多种,而我个人对”设计“的理解是:设计是一种”约束条件下,解决问题的可行的办法“。而对于用户体验设计而言,早期的时候,我们仅能够基于经验主义去完成一些设计,这时候专家的作用会被放大,因为专家提出的不要这样、不要那样,往往会成为指导性方案:


但是随着发展,不断地有人站出来尝试描述和定义用户体验的边界,比如:


随着探索者越来越多,我们最终也是大致能够够了出用户体验设计的定义范围:既然体验是一个过程,那么狭义的,用户体验设计实际上是通过改善和优化用户与产品交互过程,从而提升用户的满意度的过程。


这里有两个要点:


1、用户体验设计的目标是逐步不断提升用户满意度,前面两有个定语:“逐步“、”不断”,对于用户而言,永远没有所谓“最满意”的说法,只有“相较于上一次体验更满意”.所以除非定义一种可量化的终极满意度模型作为指标参照,否则用户体验设计是一个永远都有优化空间的过程。


2、用户体验设计是围绕过程的设计,在互联网行业中,这个过程主要指用户与产品(app、PC端,客户端、VR等)的交互过程中,所以下文重点讨论的是在互联网行业中的用户体验设计。



Part 02 - 用户体验设计是一个岗位吗?


以2018年2月为时间节点的目前来说,用户体验设计不是一个岗位,现阶段来看,它更像是一个协同目标,每个公司的所有设计师(UI/视觉/交互),用研人员,包括开发人员其实工作的目标都是为了逐步提升自己公司产品的用户体验。


虽然用户体验设计目前还不是一个岗位,但是它正在趋向于成为一个岗位。要解释这一点,我们还是要从用户体验的定义说开去,还记得用户体验设计是什么吗?用户体验设计是通过改善和优化用户与产品交互过程,从而提升用户的满意度的过程。


既然要改善和优化用户与产品交互过程,那把这个句子拆分开来,大概需要的知识储备有:

1、从主语的角度看:首先你要了解用户吧?用户是人,要提升人的满意度,对人感到心理满足的机制是不是需要了解?


2、从客体的角度看:客体是产品,在互联网行业表现为手机(app)、pad(app)、PC(软件)和VR设备等等。这些产品是我们着重需要关注的点,比如一个app中视觉信息的呈现,app的信息架构、app的交互设计、app的可用性和易用性等等,都是需要考虑的。


3、既然是用户与产品交互过程,是不是要知道人和产品(手机、app、PC)到底是如何交互的?每一次的点击,滑动对于用户来看心理应该是怎样,产品的每一次反馈都意味着什么?


呐,你现在来看,其实我们互联网行业现在划分的UI/视觉/交互/用研,甚至往广了说包括产品/开发/测试,工作内容都是构成用户体验的要素,它需要的知识面特别特别广,对人的综合素质要求很高,所以目前来看,用户体验还不能是一个岗位,但是很多大公司,比如腾讯阿里,他们期待设计师能够变成有更大洞察和对业务、人性有更多了解的全方位人才,而不是一个只会画图的美工,所以说未来,用户体验设计师可能会变成一个title,但是可以预料的是,用户体验涵盖的这么多方面知识,每个人都是有侧重和专长的:可能有些人就是很喜欢视觉设计和UI设计,那他们在精研这部分的同时,相应的懂一些交互方面的知识,这就算是优秀的偏视觉方向的用户体验设计师;那视觉表现很差的人能不能算优秀设计师呢?当然可以,比如他是心理学或者HCI(人机交互设计)的研究生,对人和用户心理有自己独特的认识,再加上精通定性和定量研究方法,对数据有独特的敏感,那他未来可能是用户研究方向的用户体验设计师。


只不过我们现在因为岗位固化,大多数公司,每个人的工作职责仅限于那一块,你是做视觉/UI的,那就好好画界面,你是做交互的,那就好好研究布局,你是用研,你是DBA,你是什么职位就做什么职位的事情,从来不越界,这样其实是不利于人的发展的,那我们追求上进的设计师们只能自己下来多看书,多去做研究,私下来多花时间修炼自己的内功心法,才能让自己立于不败之地。


用户体验设计发展到今天,目前包含了最大的三个有模糊边界的模块是用户研究、交互设计、视觉设计。现在绝大多数互联网公司也都是按照以上这三个模块去设置岗位的,这样有一个很大的问题其实是不利于设计师的发展。


阿里巴巴1688的设计总监汪方进关于这三个岗位,有这样的一番评述:

比如交互岗位,如果对接的是一位能力较强的PD,他们可能把交互稿定了七八成,交互设计师完善后交付给视觉设计师,而对接的视觉设计师又有一些交互Sense,他也许把交互稿又改了改,那么这个过程下来,交互设计师的内容,还能保留多少呢?我所说的这种情况,可能也是当下我们交互设计师同学所面临的痛。

而视觉设计师又是怎样的现状呢?视觉设计师拿到交互稿后,在交互稿的基础上美化润色一下,自主发挥空间不太大。从我们集团总体情况来看,视觉设计师的(P级)成长是比较慢的,因为我们讲求论述自身设计的价值是什么,但把视觉从整体中剥离出来,视觉设计师设计的某一个页面,具体能带来多少商业价值?视觉设计师很难去论述这点。


关于用研、视觉、交互这三个模块,我也想分开来谈谈,希望能对目前刚入行或者入行不久感到迷茫的小伙伴有所帮助。



Part 03 - 用户研究


上面我们说到,用研、交互、视觉这三个模块构成了一个用户体验设计的能力维度,要搞清楚这三个维度,我们不妨先看看业界最出名的一张用户体验要素图:

我们一般把最下面战略层的部分分解开,其中除了产品和公司战略之外,关于用户需求的定义交给用研(用户研究)人员去完成。


关于用户研究,如果是一个从0到1的产品,产品初期是需要对产品用户进行定位划分和用户画像,就是我的这个产品是为了解决什么样的用户的什么需求的,这些用户的属性是怎样的,他们具有什么样的特质和颜色、他们一般使用产品的情景是如何的?


这里需要注意的是,如果你不是一位有用研经验的人去第一次尝试做用研,需要留心我们很容易落入理想化用户设计的陷阱。再客观的站在用户角度去思考,去设计也会有主观和流于表面的情况出现。我们不能想当然的按照理想情景去思考用户需求,用户需求是复杂的,再加上企业自己的,以及各部门的需求纷繁,所以一般在产品迭代的过程中新的功能很容易陷入想当然的“用户就是需要啊”的思维之中。所以对于成熟的产品来说,需要划分核心主流和普通用户并分别画像。关于用户画像的方法有很多很多,大家可以去随意搜索在这里就不细谈了。


还有如果是一个初次开展用户研究的同学做用户研究的时候,可以掌握几种常见的方法,访谈法,焦点小组,易用性测试,问卷调查这些方法各有利弊,最重要的是找到当前情境下解决问题且行之有效的方案,比如访谈或者焦点小组,精心整理问题并邀请公司的一些员工或者核心用户进行访谈并全程录音,在结束后认真提炼访谈中多次被用户提到的关键词,从关键词中按维度抽象整理出用户的需要,是访谈的核心价值。并且输出文档,赋予思考,再以此作为整个设计改版的核心依托,让里面用户提到的关键词在设计页面中体现,这才是有效的设计。


关于用户研究的常用方法,具体推荐给大家两本大部头的书,大家感兴趣或者不知道自己感不感兴趣,可以去看看《设计调研》和《洞察用户体验方法与实践》 第二版。



Part 04 - 交互设计 


交互设计的输出物是产品原型,也就是你们看到的线框图。那线框图是怎么产生的呢?这个需要从产品经理那边对功能梳理开始。

一般大一点的有交互团队的公司,比如新浪微博啊之类的,他们的产品经理的工作重点会更加focus在功能本身到底是不是用户所需要的,而经过产品提出来的需求文档,一般只有功能需求List和他们的优先级,如果遇到要画图说明的,也就是简略的几一个草图。

这时候,交互设计师会根据产品的提出的功能需求List去进行整理和区分:

这里整理和区分的方法是合并,拆分和归纳。

比如功能A是可以拆分成更细颗粒度的需求A1和A2的,其中A1和A2又碰巧属于不同的已有的两个功能区块,那么就可以把他们拆分到不同的功能线上,如果某些功能发现他们有同样的属性,那是不是考虑把他们整合在一起?


这样整合完了需求,再按照优先/重要的二维表格去划分,最后得到一个需求量表:

然后我们根据这样的版本需求量表优先级和重要性,有的放矢的去设计功能入口和信息架构,就会游刃有余:


而一般复杂产品新增功能的时候,往往要考量很多因素,不能一味的去做功能堆砌,还是需要把不重要的功能隐藏或转移,突出重要的功能,再把一些同属性的功能入口组织在一起并列,这些都是在原型之前需要思考的问题。再往下,那就是根据一个一个的信息去设计产品低保证原型图,那就没啥好说的了,你们看到的原型图几乎都差不多,但是至于你们的交互设计师的原型是不是按照我上面步骤一步一步推演出来的,那就要打个问号了,这可能是区分一般交互设计师和高级一点的交互设计师的一种办法。(如果你见到听到功能就开始画低保真的交互,那…)



如果你以为交互设计师就是画个原型,那你就错了,交互设计师切记不要沦为产品助理……其实在真个UX体系中,交互设计师承担的是最重要也是最核心的一个环节,那就是优化用户路径(即优化流量路径)。


什么叫优化用户路径呢,举个例子,全民k歌是一款唱歌的app,那用户最核心的功能就是在上面唱歌,而关于唱歌,大概有独唱、合唱两种维度。比如现在,我作为普通用户,想要去完成独唱一首歌的行为。这种行为从用户路径上看就是用户从任何页面到唱歌详情页。那么到底有多少条路?既是说,到底有多少个页面可以跳转到唱歌详情页?然后你会发现,其实能跳到唱歌详情页的,除了清唱那种独特的方法以外,其他的都是要通过伴奏详情页跳转,那么问题又来了,到底有多少个页面可以跳转到伴奏详情页呢?

就这样,去穷举所有的用户路径,然后看看这些路径过程中有没有一些冗余操作是可以删减的:


穷举所有用户路径,看看有没有哪一跳是可以被优化的(以唱吧为例



这里面有很大很大的学问,如果展开说的话可能是一个几万字都说不清楚的篇幅。

总之,一个好的app一定是功能和产品形态足够扁平简单。

要让产品形态足够扁平简单,就需要根据app的形态去整理和梳理交互层级,针对流量问题进行具体的分流设计:

比如当我们看到一个200wpv的页面,下属三个平行按钮分别只有40w、12w和3wpv,刨除场景问题之外,从交互出发那是不是我们可以设计一个内页的segment组件去完成三个内页的滑动跳转、降低操作成本呢?

比如淘宝这样:

又或者说,我们是不是可以未一个pv较低却承载功能较大的页面另外设置另多个入口呢?

比如像外卖产品这样:

最后的最后,交互设计的工作产出就是原型了,既然都思考妥当了,画个图就就没啥好说的了...



Part 05 - UI设计



再往后,交互设计师会把原型给到UI设计师,UI设计师的工作范围大家想必很了解,就是把低保真的原型变成高保真的设计稿。


在这里再啰嗦一遍啊:


UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!

UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!

UI设计师的基本技能是精确的信息视觉传达,不是视觉炫酷的界面!


重要的事情说三遍!


我们唱吧UED最近一直在招人。

看UI的简历,然后发现一个很大的问题是,我发现UI设计师的简历真的是千奇百怪五花八门,有那种插画画的很好的,有那种第一眼上来就是一个很立体的3D建模渲染震撼到你的,也有那种大渐变dribbble风给你一种好像很厉害的样子的,但是这些都不重要,如果一个界面上的内容信息没有主次区分,或者展现得没有层级对比,再花哨的东西都没有用。


关于UI需要掌握的比如格式塔啊之类的东西已经有太多人说了,在这里就不赘述,具体也可以看我的文章《形式与内容的关系 -  app的视觉美成因分析》


UI设计其实都不是闹着玩的工作,也绝对不是纯主观感性的工作,判断一个UI界面的好坏可以通过易用性和易读性测试、眯眼测试的方法检验,判断一个产品交互设计的优劣也可以从易用性测试和用户反馈中得出线索,判断哪种交互手段和信息架构更为可行通过ab test的方法得出结论,这一些的一些设计它都是一个有着科学的方法论作为指导的。


希望从此之后大家审视产品的时候不要以UI美丑这种最低级的主观因素去思考(当然UI的一致性和美观度很重要),但是更多的,要想想更深层次功能布局和信息架构,以及产品打的人群上往更加宏观和抽象的高胃度进行思考。


文章来源:站酷   作者:Seany

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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




从交互维度量化用户体验

纯纯

和大家分享一些在产品和交互设计中的一些自己的方法。



Part - I 什么是交互

狭义的交互(Interaction)定义交互主体必须是人本身,而客体可以是产品,环境,服务等等,且不论交互客体是什么,只要主体是人,人和客体去进行交互的时候,一定是人带着心理预期施加一个行为,然后客体会根据这个行为给与一个反馈(没有反馈本质也是一个反馈),而人会根据这个反馈是否符合预期去进行心理修正。如下图所示,这就是我理解的最小交互模型:

当时我举的例子是用翻页器去控制ppt翻页:


如上图所示,拆解这一套交互行为:

当我我点击翻页器的“下一页”按钮,我点击行为附带的心理预期是“PPT翻往下一页”,然后我点击的时候,遥控器塑胶按钮给到我手指一个物理反馈,证明我按下的行为已经完成了,这是“输出端(我的手)的交互与反馈”,这时候遥控器接收到按钮指令,把指令通过红外线传输到USB接收器上,接收器把指令传到PC端然后完成翻页动作,再通过大屏幕传到我的眼(输入端)中,我就可以确认这一次交互反馈是符合预期的。BTW这里有一点想要补充:设备对设备(上图中黑色箭头),也属于广义的交互,只不过现阶段大家研究的交互设计都是狭义的,人为主体的交互。


在我们日用科技产品的早期,有两个东西是无法跳过的,那就是按键手机和PC电脑:


他们几乎是同步在发展的,而这两个产品的交互行为基本上延续到了触屏手机时代,所以为了弄明白触屏手机的交互,这两个产品是值得讲一讲的。


先看按键手机(就是我们小时候用的非智能手机):

在按键手机中,最让用户困惑的其实是按键和屏幕之间存在一个映射关系,而不同厂商缺乏一个统一的规范,各家映射规则不一样。大家是否还记得当年的手机说明书那可以说是相当厚,因为说明书必须要给用户建构一个心理模型;比如上图,点击左上角和右上角那两个“-”按钮,其实一一对应的是屏幕左下角的“Goto”和右下角的“Names”。这个一一对应关系作为今天的用户来看应该是很平常而且很易懂的,但是当年没用过手机的人,需要花很长时间阅读说明书,才能够明白物理按键和屏幕上的映射关系,这就是触屏手机很难用的地方,也是很反人性的地方。因为作为用户来说,心智上,我们当然希望所触即所得。

再来看PC,作为和按键手机差不多一起出现的载体形式,人们操作PC端人是通过媒介(也就是鼠标+键盘)输入的,其实本质上也是我们通过鼠标在桌面上滑动x-y区域对应到电脑桌面上指针的移动来创造屏幕中x-y的映射关系,然后键盘上几十个键配合输入完成操作。


大家发现了么,上述的两种设备其实本身就是在制造一种一一对应的映射关系去完成交互行为,这两种载体从出身开始就还是需要很大交互成本的。

随着科技的发展,触屏感应技术推出了之后,印象中触屏手机就是两三年时间就摧枯拉朽的淘汰了按键手机,本质上是干掉了一一对应的交互映射,所按即所得:

触屏手机出现之后,交互专家们不禁要问一个问题了:

手和触摸屏到底有多少种交互方式?

答案是有很多种:

越是高阶越是隐藏的交互手势越复杂,所谓的“交互成本”也越高,比如锤子三指滑动换屏保那种,就是利用了高阶交互便捷实现边界功能。那这么看起来,iOS也好还是所有的安卓手机都好,从用户端而言,就是组合交互手势,让信息更好的传达而已。那么同理,在App中也是一样,如果我们了解了每一个交互行为的用户心理预期,对设计工作而言就能做到有的放矢:


我们以“单击”和“滑动”这两个最简单的交互行为举例。

所谓单击手机屏幕,用户其实最核心的是有两个预期:

第一是选中一个元素,比如Radio组件。第二是逻辑上的Next,比如点了一件衣服,应该Next到衣服的详情;点了付款,应该出现付款流程,点了返回,应该back到上一路径点等等。


划动交互也是一样的,用户在一块手机屏幕上单指划划划,用户内心的预期其实也不复杂,最核心的预期也就两点:

第一是查看屏幕外的线索(前提是设计师给用户留下线索了或者是这个UI组件长得就是可以划动的样子)第二是查看相邻标签的内容,或者查看同一个标签下的相邻元素,比如iOS的segment controlle组件就是典型例子:


当我们了解了这些之后,我们在实际的设计工作中就可以根据上面这些理论来合理选择UI组件去呈现对应的信息了。




Part - II 从交互维度合理选择UI组件

我们在设计工作中,选择UI组件,本质上就是选择信息的呈现形式。

每一个常见的UI界面和UI组件,都一定也满足上面所说的最小交互模型:



在这里我举一些例子说明。

第一个例子:同样的内容,选择不同的UI组件呈现,给用户呈现的是完全不同的产品结构:

大家看下面这张图:


这两个UI模块摆在大家面前,大家应该能清晰的感受到,左边是一个segment控制下面内容的UI;而右边是一个所有内容列表的集合页,只不过通过tab聚类了而已。

第一件事应该想到的是如果需要采用右边的排列形式就必须要控制tag的字数;然后由于右边的tag占据了推荐贴的位置,导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的,图右的优势在于,由于竖向排列tag可以让一个屏幕显示更多的tag,可以让用户更方便的定位内容,比如外卖产品之所以用右边这种形式是因为力求一屏展示更多的菜,而且外卖产品的左侧tag一般是一家店铺的菜的品类,用户下滑菜品配合点击品类,点完即走,很方便(京东和淘宝电商类平台也是类似的)。

但是比如今日头条,新闻类客户端只能采用左边的这种形式,因为新闻类客户端是需要用户长时间沉浸的,比如用户选中一个“体育”的tag之后一般要沉浸的看好久好久,用户需要沉浸在这个tag下的内容中,那这个时候显然用右边这种设计方式让tag常驻屏幕左侧是不合适的。


再来看第二个例子,就是UI应该会随着内容而进行调整和优化:


这里举一个唱吧的例子,唱吧从7.0到8.6之间做了三次改版,大家可以看到,唱吧团队几乎是损失了屏幕效率来加大了间隔和突出了歌名,这是为什么呢?

这是因为页面承载的关键任务不同,大家对比着7.0时候和8.6时候的UI样式,正好是今天快手和唱吧的对比:

大家会发现,其实这个页面,快手和唱吧承载的内容都是消费转化,都希望用户点击进去消费内容,但是两款产品做了截然不同的UI风格,原因是什么呢?

快手在这个页面,其实承载的关键任务是:“迅速让用户找到感兴趣的点”,它这么设计的本质原因是因为它的截图可以帮助用户判断内容本身,比如第一张图是一个人在打高尔夫,右边是一个工人,然后第二排左边是一个游戏的镜头,右边是一个传递正能量,大家可以很方便的通过图片识别里面的内容,用户更沉浸更聚焦的去选自己喜欢的点击进入消费就可以了。但是唱吧的视频截图其实是不能识别里面内容的,大家可以看到,第一张图是一个妹子,第二场图是一个妹子,第三张图还是一个妹子,那用户点击进去的动力在哪儿了?除了这个照片长相之外,更多的其实是文字决定的,是这个人唱的这首歌的歌曲名是不是我喜欢的,或者是这个演唱者的的歌手等级。

所以基于这种跟深层次的逻辑,唱吧和快手两款产品的这个页面都是为了促进消费转化,但是UI长相上完全不同。


我们看第三个例子:


同样组件下,选择不同的交互方式,也会使得效果完全不同,比如现在有一个UI页面,主要由一个tab(iOS叫segment controlled)组件控制下面的内容,样子张这样:


我先假定一个前提:这个app中的这个组件不支持横划,只支持点击切换。

好了,现在我假设这是一款已经稳定运营了一年的产品,为了说明问题,我假设一个理想数据:

假设每天有20W的uv访问这个页面,其中分流情况是:

10Wuv消费“推荐”下的内容

2Wuv消费“生活”下的内容

1Wuv消费“段子”下的内容

3Wuv消费“美女”下的内容

4Wuv消费“游戏”下的内容


这时候,为了优化交互行为,有一天决定把这个tab组件从不可横向划动改成可以划动的(并且告诉用户这里可以滑动了哟~),然后给你一次机会重新排列这五个tab顺序,你会怎么做呢?最简单的办法当然是把五个tab按照用户消费意愿逐一排列,即:“推荐、游戏、美女、生活、段子”。

这样排列当然没有任何问题,但是还有没有更优解呢?我给出的解决办法是这样的,大家评判一下:

按照用户的消费量,“游戏”是消费量第二的一个tab,毫无疑问我会把它排在第二项,这样可以刺激用户划动行为,然后“美女”是消费量第三的,我会把他放在第四位,这时候我会把“段子”和“生活”这两个消费率最低的tab分AB test做两个版本放在第三和第五位拿去测,以判断之前的“段子”和“生活”是由于自身内容不够优质,还是之前交互成本太低导致的数据较差:



最后我们来看第四个例子:


比如一个app,他的UI张如下图所示的这个样子


现在假设在运营和市场团队不做任何努力的情况下,单从产品交互的角度,能不能优化上面这个版块的点击率?

首先我们来分析一下页面架构:

如果我们认为,不管是点击右上角的“>”,还是点击留个圆形入口都算完成转化的话,我们现在的这个红色的UI组件,入口位置一共有7个。根据长尾理论,如果我们把这个圆形入口从6个扩展到比如九个,是不是一定对转化率有正向影响?答案并不一定:

为什么呢?因为主要是这样的改动会带来一个未知的泳道横划交互,它会产生一定的影响,如下图所示:

用户看到这个泳道之后可能出现三种行为:

a.“用户完全不滑动”——那入口就从7个变成了7.5个,别的没有变量影响。

b.“用户滑动看完了之后,点击某一个或者左上角的“>”进入”——这是我们想要的转化

c.“用户滑动看了这些圆形入口之后松手,就是不点击进去”——这是我们不愿意看到的结果

想到这里,那为什么我们不能让用户直接滑动之后松手就跳转呢?


想到这里,所以优化方案如下图所示,给与用户一个x轴区间,滑动手势操过那个区间则告诉用户你现在松手默认跳转,用户不愿意跳转也可以回划,只要不足这个x区间就给与用户自主选择的机会:


我之前在上家工作的时候,我们把6个圆形入口变成了10个,然后用这个“松手跳转”的交互把单元模块的穿透率从21%提升到了31%,这是一个实战当中的真实例子。


当然了,请大家再思考这样的一个问题:


一个页面的流量就这么大,一个地方涨了11%,那势必别的地方就会相应的损失11%。一般情况下app首页承担着80%以上的分流工作,根据流量漏斗来看的话每一次引流都会导致其他模块的数据下降,所以设计师们应该要根据运营策略和公司大的产品OKR来合理选用合适的交互组件,以达到想要的目的,还是那句话:“小孩儿才分对错,大人只看利弊。”




Part - III 从交互的维度量化用户体验

移动互联网产品设计中,尤其是在中国的app产品,有两大分歧阵营:

“扁平”阵营表示了,我们需要产品足够扁平,最好就是三次交互可以触达所有app界面:

“简洁”阵营也表示了,我们需要页面信息足够简洁,最好一个页面只完成一个核心任务:



双发你来我往,谁也说服不了谁,如下图所示,“简洁”阵营反驳“扁平”阵营说:你们一点都不遵守席客定律,层级扁平是扁平了,但是相应的页面信息变得越来越多,给用户呈现的干扰就越来越多,用户做出决定的时间也越来越多,所以你们“扁平党”都是辣鸡。这时候“扁平”阵营也找到了反驳的论点,他们说你看你页面足够简洁了,但是页面层级就很深啊,交互成本这么高,每一次都伴随流失,可用性这么差,你们还有理了?所以“简洁党”你们才是辣鸡!


中国的互联网产品,很难做到既简洁又扁平,这个问题的根源在于永远有那么多信息需要呈现,永远有那么多功能需要添加,这个是中国的激烈市场竞争导致的,并不是说中国的产品就不如国外的好(我的哥哥之前在Facebook现在Airbnb工作,他经常感叹道国外的互联网产品到中国来真的都得死...)我想要讨论的是,面对中国现在互联网产品市场现状, 如果一款产品非要你站队上面两派阵营,你会选哪一派?我现在的选择是“扁平党”,因为用户面临一款眼花缭乱的app,如果是经常使用,缺功能布局信息架构很少改动的前提下,早晚也会习惯和适应的,但是如果一些核心的东西不能第一时间暴露在用户眼中,很有可能用户就不知道你有这种功能。这个就是为什么我们设计经常会说这个产品经理傻逼吧,怎么什么东西都想展现出来,这一堆东西找个入口集合收起来页面多干净多清爽多好看呀~~我早年间也是和诸位一样的观点,但是现在我越来越觉得,界面清爽了,你的大功能feature因为设计隐藏没有被发现,不是设计开发测试都白做了么,说好的ROI在哪里?


我们大家都是互联网从业者,不管看到这篇文章的你是一位设计、产品、还是开发、测试、运营人员,我们都明白用户体验这个词是由N多维度综合而成的一个过程性评价,它和方方面面都有关系。



那既然是这么专业且牵连甚广的一个名词,我们真的就没有办法去量化评价它了吗?

永远不要忘记,用户体验是个过程,而我们每个人也都是用户本身。在这里我提供一种普通用户维度的比较好用的用户体验评估方法是“穷举分析用户行为路径”。


比如你是一款外卖产品的设计师,那么用户在不同产品模块下定一个外卖的流程路径大概有多少种,都穷举出来。比如你是一款在线演唱类的产品设计师,那么用户在产品中完成一首歌需要的用户路径到底有多少条,穷举所有路径之后一一优化,让路径变得更加扁平,或许是一个最“笨”但是有效的方案,怎么优化呢?用淘宝消息页举个例子:


淘宝消息页上面有“交易物流”、“通知”、“互动”三个tab,这时候我们假设一个用户三个按钮下面都有消息,用户想要看完这三个消息大概需要几次交互?答案是至少6次:“点击第一个进去 - 返回 - 点击第二个进去 - 返回 - 点击第三个进去 - 返回”,这样的交互显得呆板且冗长,淘宝团队巧妙的把三个内页集合成一个页面的三个tab形式,大大缩短的交互成本,这就是所谓的“把用户路径变得更扁平”:


大家在使用很多产品的过程中,多多留心就会发现原来细节里面总有魔鬼。


文章来源:站酷   作者:Seany

分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


为什么交互设计能帮助产品解决问题

纯纯

市面上大量出现同质化产品、设计,就是因为大家都在按照现有的,常用的模版在设计,现在其实比早两年会好很多,很多设计师已经开始从美化工作逐渐深挖到区分甚至自我驱动或者价值探寻的工作。


例如下面的案例,这是一个电瓶车电池租赁的一个产品。



undefined



从美观角度,左侧的界面更加简洁信息也有规律,有美观的banner和看起来让人有点击欲望的大按钮以及“令人觉得很热门”的热门租赁板块。当我不放出右侧的对比图时,大家在第一反应中,有多少人可以重启自己的视角,还是说已经被这个页面所拉入到不可自拔的漩涡中去了呢?


如果让你盯着第一个界面进行改版,我相信还是会有很多小伙伴可能只是会把底下的信息流挪上来,或者新增一些“我们觉得”有用的板块。但其实这整个形态就是错的,即便将错误路径3改成了路径2,你以然还是在错误的路径上,本质没变。所以为什么我们说要做正确的事而不是正确的做事。





交互不仅仅能够让产品好用的,也要让产品走对方向。


另外,UI也是交互的一部分,属于看的懂。好用可以分为看得懂,学的快,用的会,交互体现在人们日常所接触到的大部分媒介,并且与之产生联系。例如一把水壶,水壶的设计形式首先通过视觉让你感知这是一个水壶,如果把水壶的外形做成一个马桶,你觉得它还是一个水壶吗,这叫看的懂。学的快指的是当我看懂了之后我马上就可以对这个产品进行基础操作,例如装水、倒水。而用的会就是这个水壶更多的附加功能,例如烧水、定时、调温等等。



1.交互设计中媒介与人的关系


1.1顺应


交互的媒介是不可缺少的,大家是否去研究过为什么古代人们撰写文字是从上至下,从右往左而现代人的习惯是从左右的?古代受限于工具、媒介,竹简是主流的记录文字信息的媒介, 有人会说竹简可以从做往右写不是非要从上往下啊,但是大家可以看到人们是如何打开进行阅读的,如果是横着阅读但是打开是上下展开就会非常不自然了。


所以在当时人们为了适应非常有限的工具资源,改变了自然的操作方式。但现代社会如果说你的产品不为用户的使用和场景去考虑,那基本也就凉凉了。


从2g到5g时代的发展,除了生活方式发生翻天覆地的变化外,我们所接触到的媒介也发生了变化,从2g时代以文字为主的信息到5g时代视频、游戏、影音等为主的信息化进步,让人们对信息的获取更加方便快捷。除了内容,外对于像移动手机这样的设备用户对其操作方式和习惯也有了更多的变化,从当初的搬砖按键手机到支持ar等新技术的超智能化手机,改变了我们的认知也改变了我们的生活方式。



1.2迁移


平台迁移的交互成本,很多同学可能都玩过moba类游戏-dota,这是一款在电脑端战术竞技类游戏。在dota中我们经常使用的交互形式主要分为键盘和鼠标的控制,键盘用来控制技能的释放和其他快捷物品的使用,都是通过按按键的形式进行释放。通过鼠标右键来控制人物的移动和左键选择技能和物品释放的目标,这是端游中基本的交互行为与操作。





在现在非常火热并且模式和dota相似度很高的王者荣耀手游中,我们看到了,如何从端游到手游的交互迁移。从鼠标控制移动到左手拇指来控制移动,右手拇指来控制技能的释放,在这里大家要注意,在端游中技能的释放是可以非常精准的,并且可以指向性释放在某一个角色中,但手游不行。鼠标拥有移动、视角、释放技能、使用物品多个功能,但是在手游中我们无法做到选中某一个技能再点击到某一个角色上,所以手游中只能进行非指向性的预判技能释放。







同样在端游和手游的吃鸡游戏中,端游键盘控制人物移动,鼠标控制射击与视角,但是在手游中控制射击与视角就需要2个手指来完成非常不方便,也很影响射击的精度,但是如果做成吸附式准星那么也就失去了很多的乐趣。所以很多的厂商为了解决的这个用户痛点开发出了吃鸡专用的辅助设备,专门用来给多余的手指进行射击操作。


另外,大家如果做b端的同学应该也深有感触,平台迁移的成本非常高。想要把集成非常复杂的业务后台切换到移动端是一件很麻烦的事,因为在网页端我们有大量的空间和更自由的控件形式去承载信息,比如联动的左侧标签导航和顶部联动的标签导航,在增删改查的操作中显得清晰高效。但是到移动端上虽然可以到做联动导航,但是页面显示实在有限,很多的信息完全无法在一个界面中呈现,所以要么将页面进行左右滑动,要么拆分进行多步操作。但本身拥有复杂业务功能的后台系统就不适宜迁移到移动端上。


web端的工具和网页通常都会有撤销操作,按CMD(ctrl)+Z大部分都可进行撤销上一步操作,但是在移动端我们无法通过特定、或者统一的手势进行撤销,所以很多时候在表单输入的时候会有一键删除图标,却无法进行撤销。所以我在想是不是可以在用户一键删除信息后,删除按钮变为撤销按钮,有待考量。



2.交互认知的盲区


到底什么是交互设计,这个问题其实是比较复杂的,也是我一直在思考的问题。所以也翻阅了很多文献,尝试做更多的案例来解释。交互设计的概念真的挺多的,光网上能够找到的定义就不下5种,这些对交互设计的定义中,比较频繁出现的是行为、场景、用户等词汇,交互设计到底设计的是用户的行为,还是设计用户正在交互的媒介或者是用户正在使用媒介这件事情,我觉得可能还是没有能够解释清楚交互设计的本质。


中国历史文字的演变,它并不是一个模仿的过程,而是一个从底层对文化、自由、精神、环境、人的深刻理解而发生的一种进化过程。但现在其实很多的交互形式都是来源于一些大流量产品的模仿,更多的是担心用户成本过高而妥协为满足用户预期。



2.1信息不对称


事实上,为什么我们讲不清楚什么是交互设计,其实UI设计也一样,她绝不可能单纯的指代用工具绘制出用户界面,其实是因为信息不对成、词不达意或者叫做你说的比人听不懂。我可以举例的是我们的汉语


例如“你可以意思一下”,单就这句话,我们大概知道最关键的是“意思”二字,包含了特别多的含义,含义需要通过语境、使用场景来区分,说者的“意思”是想告诉听者什么呢?没人知道,是一口气干完一瓶酒,还是喝一口?还是送一点礼还是?应付一下?


当然这句话中的“可以”也很有讲究,加上“可以”说明你也能选择不“意思”,是不是觉得这7个字让我们整一句话都活了起来,说者与听者如果不在一个境中,听着就压根不知道说者的具体表达含义。


同样的,在设计领域,很多设计师喜欢用大气、高级、逼格、有呼吸感描述的自己的感受。 说出来自己都要笑出声,还有什么五彩斑斓的黑等等。就比如呼吸感这样的词,这个词听起来比较抽象,让听者都有点不太好意思追问什么是呼吸感,其实你问了,说者也不知道怎么描述。可能说者觉得现在信息太密集让人无法呼吸,但设计者觉得现在刚好,所以本身就没有一个标准,更多的就是主观的感受,让你不得不接受这个建议的原因是因为两者的身份。


我们用我们能够讲述的语言去描绘我们不懂的事物,再例如设计师和开发还原只会说往左移动10px,而不会说给这个view加上padding left 10px。还有你和开发为什么沟通起来那么累就是因为你俩完全无法站在对方的角度对这件事达成共识,设计师通常喜欢描述从左到右或者从上到下,但是在开发的语音认知理,他需要知道的是空间坐标,并且具体的移动单位。所以为什么我们那么鼓励广大设计师去学习一些开发知识,开发也尽可能的去补充设计背景。


在这里,交互设计师产出的交互说明文档就是能够帮助设计师与开发有一个更好的沟通,所以能力较强的交互设计或者视觉设计都能够把自己想表达的信息表达的很清楚。


再举个例子,不知道大家有没有编辑过问卷或者做过用户访谈,很多时候是不是觉得收集到的信息无效、无用,其实很多的原因是因为我们和用户对于这些问题压根不在一个频道,比如:你的问卷问的是,您喝酒的频率是多少,选项有:从不、偶尔、经常,在用户的眼里偶尔可能是1年喝一次,而我们觉得差不多1个月喝一次算偶尔,再比如访谈的时候问用户这个问题:您觉得您喜欢下面哪个页面的风格?用户:“什么是风格?”


所以交互设计师有一个能力久显得很重要了:让万物都可与之对话的能力,对话需要什么,是语言。




3.交互语言的浅见


我们都知道,语言是我们沟通的根本,语言是由词汇按照一定的语法结构在不同的语境中所组成的复杂系统。不同的种族有不同的语言,不同的专业有不同的语言例如在围棋中有长、立、并、空、顶等等,例如在模型手办中有分线、渗线、勾线、补土等,这也都是在特顶专业领域中的一些术语,但这些并不是语言,只是在某个领域中大家总结出来便于沟通的文字符号。


所以我们再回到上方看一下定义,首先语言是由词汇所组成,词汇是由符号做组成,大家可能都听说过比如乐高啊、原子理论这样的组件搭建方法,但这些都仅仅只是规范,而并不是语言。语言拥有更强的普适性和通用性。


那么我所认为的语言他首先包含了能够组成词汇的符号,这些符号大概就是指:点、线、面、体、色彩由这些点线面体可以组成的词汇有:按钮、文字、图标、图片等。但是光有词汇不行,在汉语中有12种词类:名词、动词、形容词,在由句子组成的词汇中包含了不同的成分:主、谓、宾、定、状、补...这里不过多叙述。


语言很重要的一点它具有语境,语言的运用包含了看听读写4个方面,看和听指的是输入,读和写指的是输出,那么交互设计语言中,也包含输入和输出两种属性,例如输入指的是由不同“词汇”组成的“句子”,比如由标题、箭头、色块组成的一个itme,是一个可被理解、看懂的输入属性的控件。输出指的是该控件可被出发并且进行状态的变化和所进行的任务跳转。



这里的控件虽然有两个属性,但是还需要语境来帮助我们理解,一个是它本身所能够输出的默认状态的,比如点击之后的跳转页面,另外他也可以具备产品赋予的自定义属性,例如底部滑出picker。




还有,在汉语中“去买两个桃子吧”,这里的“两”肯能是虚数也可能是实数,但是在交互设计中,我们如何表示点击1下和两下或者是多次呢,一般单击的属性通常可以有一些特性的符号属性所表示出来,例如加下划线的文字、一个带箭头的item、一个图标、一个带有主色的文案等等,那么双击的话可以用双箭头来表示吗,当然不可以,双击在移动端的手势中具有放大、点赞、返回顶部、定位消息、定位光标等功能。






那我们发现如果把交互设计能够做成类似于语言的系统是非常有意思,并且有用的。这会让更多信息不对称的情况消失,不仅仅是设计师,在产品团队中大家都能够有一套共性的交互语言系统,无疑是一件非常提高效率的事。但是目前的很多交互规范的文档中,大多都是多种元素的拼合,给出常用的、可复用的控件、组件,但是大家依然还是无法从语言角度去创新,这就导致了很难会有新的、有用的交互形式的出现,比如很多搜索控件都是承载在顶部导航栏中,那么在做规范的时候也只能在这个组件上去微调,殊不知搜索这个控件的“语境”并不单单只能在页面顶部,例如高德地图做的就很好。这样一来,这个组件的常规规范形式就能和很多产品区分开来了,当然要视产品形态不同。



4.业务背景与交互形态


4.1不同业务背景下的信息组织


市面上有许多的新零售电商产品,页面中的信息流也是大同小异,但是无论是交互还是产品在做设计师必须要考虑的就是产品定位与当前状态。例如目前我们看到的都是以下的信息流样式,但是我们要知道,30000个sku和3000个sku的展示策略肯定是不同的根据算法的瀑布流在30000个sku中可以随意展示,但是3000个就不行了,很可能在算法的过程中用户会频繁看到重复的商品。所以使用双列布局的方法并不合适。





所以这样的产品首屏策略就显得非常关键。我们可以看到常规的电商产品中,首屏基本上都是呈现这样的策略,从顶部的搜索、分类、banner、分流入口、cta、营销瓷片区这样的布局,从基本上能够满足一个大量sku电商产品的所有需求,但是如果用户定位和产品本身的基础无法支撑起这样的场景又该如何去做首屏策略呢?


从交互角度入手,那么既然我们无法做到大而全,那么我们至少可以做到精准、限时,让用户上瘾的策略,上瘾模型这边不再赘述。所以类似云集在首屏的策略可以概括为整合搜索与banner、分流入口、cta、营销瓷片以及以时间为纬度展示的大图信息流。重点在于可随意控制的营销工具,以及时间轴的商品推荐,让有限的资源呈现更多的形式变化以及让用户有时间概念,每天固定时间来进行活跃。





4.2营销工具化


通过交互手段我们也可以给运营工具更加灵活化打基础。例如我们经常看到的营销瓷片可以划分为非常多样式与可能性,并且在后台工具中灵活控制,同时除了日常的营销目的之外,在大促或者活动需求下更可以将整一个首屏切换为极具氛围的信息呈现。


4.2.1更加灵活的控制方式




4.2.2多样的营销结构



最后总结一下,我认为交互设计也包含了视觉,所以我们在决定用什么样的设计形式之前需要考虑更多,入业务、用户价值等等,从而用更加有价值的交互策略提出问题、解决问题会比单纯的用规范去搭建界面更加有效。






二、为什么UI配色那么难


不管是做UI设计还是画插画,有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够,其实不然。一个可能是大家总结的太少,从来都是凭感觉和运气去配色,但其实都是有讲究的。本文不会给大家重复讲解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,这些大家都可以从某度中直接搜到。我今天要给大家分享的是人们是如何认识色彩,并且在产品设计中使用的。



1.人类对色彩感知的原理


大家都知道,对于不同的颜色,我们对其的感知是不同的,有人觉得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那这是什么原因呢?首先我们要知道我们眼睛内存在两种感光细胞:视锥细胞和视杆细胞,视杆细胞能够感知光线强弱但无法感知颜色,而视锥细胞却相反,视锥细胞内还有3种对不同频率光敏感的细胞。我们经常会用到视锥细胞,而视杆细胞却用的少,更多的是在黑暗的环境中使用的多。


视锥细胞的三种类型分别是低频、中频和高频视锥细胞,分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感,它的范围包含的比较广,特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。





大家在平时生活中都能看到,在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识,因为这些非常醒目。更容易被红视锥细胞感知到,但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁的多。



1.1人对色彩边缘的对比更加敏感


我们来做个实验,如下图,大家觉得在中间的灰色块是纯色还是渐变色,可能很多同学看上去都会觉得是个渐变色,但其实它就是一个纯色,不信的同学可以自己在工具中尝试一下。




但如果你把这个色块拿出来后,不在这个环境中直接进行边缘对比,那就不会出现渐变的情况了。那光说原理,我们也来看一下在产品设计中需要注意的地方,因为在UI界面设计中我们通常需要把一些图片、卡片叠加放置,这样就会造成边缘视觉的对比,本来不明显的两个元素重叠之后变的很明显。所以例如一些标签的背景色和页面整体的背景色。





如果你想要让两个颜色接近的元素具有识别度,那么最好将这两个元素进行重叠摆放而不是分开摆放。另外,如果是卡片样式的设计,背景色一定不要过于灰暗也不要过于浅白,过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比,显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。





还有,为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理,因为文字和背景叠加产生的轮廓只是文字的轮廓,在我们的第一印象中只是一种符号,当它被赋予颜色之后我们才会意识到它需要我们去注意或者可被点击,但依然还是不够明显,所以为了强化可点击这个感觉,我们才用了线框、背景色、箭头等方式。





2.色彩在UI设计中的作用


1.加深品牌印象与品牌感


一般来说,产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中,所以例如闲鱼、马蜂窝等,主色都采用了黄色,黄色具有非常活泼、有趣、好玩的特性,无论是线上还是线下都使用了这个品牌黄色,从每一个线上元素的主色,到线下包装的印刷色。


但一定要注意的是,如果品牌的主色偏灰偏暗的话,可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的,所以在线上的界面用起来会非常不和谐,和整体偏浅色、轻的风格对比起来太强烈,引起不适。





而且线上觉得还OK的颜色,由于印刷的原理,实物也会更加偏低饱和和偏暗。



2.引导用户视觉凹增加易读性


我们在上一篇十万个为什么文章里提到了人们如何阅读信息,提到了一个视觉凹的概念。所以在界面中,什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品,使用了高亮色来引导用户视觉。







当然色彩的运用也会讲整个页面的层级凸显出来,而不单纯的用中性色来区分层级。


3.区分信息交互的状态


同样是上两张图,大家可以清晰的看到,美团中的附近热卖好点、满减标签、价格,其实都只具备信息的呈现,但不具备交互的特征和状态。但淘票票中的“4.7万”和“展开”却不一样,“展开”使用了辅助蓝色,这里的展开就具备这个文案所描述的这个控件具备的交互特性-点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上,当然也会有其他的色彩来表示可点击。


所以不是所有的元素都要赋予颜色,这样会使整个页面非常混乱





另外,UI设计中主色除了引导用户的作用外,也可以表示当前正被激活的信息状态。例如爱奇艺app中播放详情页面,当前板块标签和正在播放剧集的激活状态。





4.营造氛围传递热度


色彩除了上方所述的字段中的不同使用,在图片和整体氛围营造中也起了很大的作用,目前很多2c的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标,或者在首页营销板块的瓷片区域都会用品牌色在活动时段内进行氛围打造





3.在UI设计中色彩运用的坑与技巧


1.色彩的正反两面

在色彩的心理学上,大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面,可以看下方多种色彩的描述。





然而其实很多的产品使用的色彩和我们所认知的会有一些差别,比如咖啡品牌的主色选择,在我们常规人之中,咖啡应该是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色





在瑞幸刚出来的时候,很多人其实不太习惯把这个蓝色和咖啡结合起来,但是为了塑造品牌差异化,瑞幸一直将“蓝色”作为品牌的主基调,“小蓝杯”这一称呼不但让消费者感到亲切,也在众多的咖啡中有了属于自己的记忆点。在这支广告片中,主基调同样是使用蓝色,不但符合了当下消费者的视觉偏好,也在为用户留下记忆点之后,也让用户在看到蓝色时自然而然的想到瑞幸咖啡。





2.颜色的禁忌用法

但凡各位使用了这样的配色,保证各位过不了试用期,相信我。所以大家千万要避开。


1.高饱和度的色彩

会让人产生“幻觉”!让人产生视觉疲劳,例如我将饿了么这个界面的色调调整一下大家看一下,不亮瞎算我输。




2.灰部使用过多的配色

为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色。所以这个也是要避免的




3.没有规律且过多的配色

让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点,所以我们常用的方法是6、3、1的色彩配比。





4.荧光色

荧光色绝对不可以使用在UI界面中,尤其是主色。会让你瞬间失明!





5.太轻柔的颜色

在很多dribbble的飞机稿中,经常能看到这样的配色和练习。无论是在练习中还是实际项目中,这样的界面也完全无法让用户看到想看的信息,没有重点且轻飘飘的感觉。





6.现在很火的新拟物化设计

说真的,这样的风格确实耳目一新,但个人觉得可能不会成为主流。因为它就和第五种一样:信息可识别性很差。就不说色弱的人群,就正常的用户来说大面积的白色+饱和度低的元素结合感觉就是得了“白内障”。另外我们常说的一点就是所有元素都强调就等于什么都没有强调,这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知,原则是轻量化却又需要那么多阴影,这样就有点自相矛盾的感觉。


为了营造这样的“新拟物”的轻量氛围,还不得不在整个界面中简化大部分元素,能不加文字就不能加文字,说的好听叫做使用了奥卡姆剃刀原则,有一句话一直非常影响我做设计:“设计是需要被简化的,但是简化的过程一定不简单”。所以不是单纯的简化所有元素为了达到这个风格的目的。




7.不要将对抗色重叠

例如下方,两种对抗色重叠后会引起视觉闪烁的感觉。是不是觉得我有点帅的晃眼





4.正确的UI配色方法


定义主色


首先我们必须要说,色彩肯定是需要结合产品和用户的定位去指定和提炼的,所以前期会需要去做一些研究例如用户画像,品牌冲刺或者是情绪板等方法。得到几类“真实的虚拟用户”,从而确定一些主色的方案。然后我们在主色的选择中需要避开上面体到的坑,并且对市面上的app进行总结,我们发现大部分的产品色,简单来讲在我们HSB模式中去色都在一个固定的范围,就像这样。

 




在上文中也说到用色比例的631法则,所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎,其实辅助色没有非常明显的1种或者两种,都是多色的辅助色方案,都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略,一个主色搭配多个辅色,如果有其他独立的板块可能需要重新定义专属的配色策略。






定义中性色


其次再定义中性色,比如字体和线条以及背景色。字体是为了让信息有对比,显示层级,那么通常给2-3种层级即可,至少2种,至多3种。在选择3个层次的中性色文字是,给大家一个建议:标题/正文文字颜色HSB的B值不要大于20.备注和次要文字b值不要大于50,默认文字不要大于80,大家可以去尝试一下,且中性色不得使用纯黑。







文章来源:站酷 作者:应骏



分享此文一切功德,皆悉回向给文章原作者及众读者.


免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

日历

链接

个人资料

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

存档