首页

从交互维度量化用户体验

纯纯

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



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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

延迟增强——视频信息流广告的提转秘诀

ui设计分享达人

伴随短视频平台的崛起,移动互联网的主流内容消费形态向短视频视听语言转变,视频信息流广告的时代已经来临。如何通过设计提升转化,是视频信息流广告所面临的挑战。


为了提升广告转化效果,我们结合实际项目,通过大量的实验与思考,梳理并总结了一套适用于视频信息流广告的转化组件呈现原则,我们将其命名为“延迟增强”。涵盖了沉浸式竖视频流、图文混合信息流、横视频列表流等各类常见信息流场景。


///

延迟增强是什么?


视频信息流广告有三要素:内容、框架、转化组件。其中广告内容来源于广告主投放的物料,基础框架需对齐宿主保持一致性,所以仅有承载转化信息和行为的转化组件,是可设计部分。 


“延迟增强”就是针对“转化组件”的一种伴随视频内容分阶段/渐进式的呈现方式。它由消费者决策时的理想心理动线,结合广告行为推导得出,并经过实验验证了其对于转化提升的有效性。


“延迟增强”包括两个阶段:1.广告展现初始阶段,延迟展现广告意图,通过内容吸引潜在用户;2.广告内容逐步呈现阶段,转化组件渐进式增强,辅以增益信息,不断强化,引导转化行为。


它指导了转化组件从“呈现”到“增强”的全流程,从时机(出现&增强时机)/引导(动效&互动引导)/前置(信息&转化前置)三个部分,帮助提升广告转化效果



///

时机-延迟增强如何呈现?


转化组件的呈现时机包含“何时展现”与“何时增强”两个部分,前者帮助增加广告接收率,后者提升广告转化率。


01/ 出现时机:

延迟展现广告意图,可以提升广告卖点的展现机率


互联网的快速发展使得受众被动卷入爆炸式增长的资讯信息体中,广告借助这一媒介迅速发展,但也因为部分商业广告的过度宣传与其降低用户信息获取便捷性的本质,不可避免的使受众产生了心理上的逆反与抵触情绪,从源头拒绝了广告信息。

 

所以对广告来说,在广告展现初始,延迟展现广告意图,融入内容,可以缓解受众的抵触情绪,提升广告卖点的展现机率



02/ 增强时机:

通过用户行为和视频特征动态决定增强时机,可以有效提升转化


对广告来说,搭配广告内容进行增强,通过内容积累购买欲/信任感,然后通过阶段性的增强来提示操作,对比一成不变能起到更好的转化效果。


我们首先尝试了程序化的增强时机,在不增加技术成本的前提下,根据历史经验,面向不同的广告均采用固定时段的阶段性增强


但不同的广告物料内容不同,不同的用户偏好也不同,固定的增强时机并不能很好的满足所有广告需求。所以在技术能力可以承载的时候,我们采用了动态时机策略,通过用户行为和视频特征动态决定增强时机,在程序化增强时机之后,再次实现了转化提升


undefined


///

引导-延迟增强如何引导转化行为?


转化组件如何引导转化,则可分为基础的视觉引导与进阶的互动引导,前者帮助抢夺视觉注意力,后者则能够在互动体验中植入部分帮助决策的“小心思”。

 

01/ 视觉引导:

适当增加视觉吸引点,可以有效引导点击

 

延迟增强需要通过阶段性的增强来提示操作,而如何增强能有效吸引注意则需要琢磨,已有实验表明转化按钮增加扫光动效与智能取色,能有效吸引注意,引导点击,对转化提升有良好效果



02/ 互动引导:

让用户主动选择,可以增加广告曝光,辅助转化决策

 

互联网产品设计对于用户交互体验的追求越发极致,如影视行业走向可交互网剧,本质上是从用户接收转变为用户主动参与,用户本身对于获得优质体验的意识逐渐觉醒。商业化产品也需要紧跟“体验”与“互动”,将广告变为互动体验或具备使用价值的信息,让用户从被动浏览到主动参与,掌握对广告的选择权

 

以互动投票为例,我们通过用户与用户之间的观点表达,以投票选择的形式诱发群体性选择,引起好奇心与同侪压力

 

若用户选择符合群体选择,则带来群体性背书,增强信任感;若用户选择不符合群体选择,基于从众心理,用户极有可能对群体选择产生好奇,从而浏览两种选项的内容,有效的增加了品牌曝光。


undefined


///

前置-延迟增强如何帮助转化达成?

 

转化组件的前置主要包含信息前置与转化前置,前者辅助转化决策,后者帮助便捷操作,更好更快的完成转化。


01/ 信息前置:

增加增益信息或前置落地页信息,可以辅助转化决策


购买/转化一定是需要足够的信息积累信任感才能达成的,在前卡适当的增加卖点信息能够更好的帮助用户决策。针对下载类广告可增加评分与星级,二电类广告可以增加价格信息,甚至可以前置优惠劵、图片banner等信息,均能实现转化的正向提升


undefined


02/ 转化前置:

缩短转化路径,可以帮助转化行为更便捷的达成


在信任感积累与阶段性的增强都达成的时候,在当前转化对比跳转落地页再进行转化,链路更短,用户流失概率更小。比起实验尝试,更像是延迟增强的基础能力配置。


首先,我们针对表单/咨询/电话/安卓下载都进行了转化前置,具有用户明确意向的按钮点击会直接在当前进行反馈



除了直接将操作前置外,针对不同细分场景的需求,还可以通过交互形态的优化在感官上缩短路径

 

这里以百度的视频MAX广告为例,我们针对重落地页的商家,将MAX首屏(视频页)与H5落地页的关系变拼接结构为双层结构,通过浮层面板承载落地页,延时自动弹出,强引导下方内容,激发用户上滑浏览兴趣,解决了落地页隐藏较深,转化链路过长的问题,同时增加了落地页曝光从而提升转化。



///
结语


在视频信息流领域中,延迟增强仍然可以继续深挖,作为“基础建设”承载未来更多细分场景下的互动化、个性化的“精神需求”。

 

同时延迟增强设计方法也可以横向复用于广告前卡、落地页、IM工具等各种需要在合适时机抓取用户注意的场景中,去追求点击或者转化的提升。甚至在未来可以尝试其在长视频或图文场景中的应用。

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


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

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

探讨交互设计

周周

本文主要探讨交互设计

交互设计之探索GUI和VUI

周周

本文主要探讨GUI和VUI的交互设计 。

你好,我是《用户体验四维度》

ui设计分享达人

你好,我是《用户体验四维度》,一本关于用户体验的新书,今天正式上市了。


具体内容方面,我选择了聚焦于“人”——主要探讨了人与界面、人与内容、人与人和人与品牌的交互体验——大部分话题既有宏观上的纲领,也有微观上的实现细节。这四类交互体验,下文的提及会使用简称,所以先看下简称及对应的全称。

 

HI X:Human Interface Experience,人与界面的交互体验;

HC X:Human Content Experience,人与内容的交互体验;

HH X:Human Human Experience,人与人的交互体验;

HB X:Human Brand Experience,人与品牌的交互体验。



下面把时间交给作者李潇,由他来做一些分享。

 

你好,我是作者李潇。我主要分享两点,第一点是这本书的来龙去脉,第二点是这本书的主要特点。

 

 

01 《用户体验四维度》的缘起

 

2019 年 7 月 15 日,我在个人公众号上发表了第一篇设计类文章《浅谈 Keep 的 UI 设计》,转到朋友圈后有很多人点赞,也有朋友说写得不错,转到站酷后也有很多设计师留言称赞。算是一个还行的开头,这给了我信心。

 

之所以会写公众号,是因为当时我成立了一个个人的设计工作室,希望借公众号的文章引来一些客流。之所以第一篇文章会写 Keep,一方面是因为 Keep 比较知名,另一方面是因为我比较喜欢 Keep,也是 Keep 比较忠实的用户。

 

当时的计划就是挑一些个人比较喜欢的、具有一定知名度的产品来写,每款产品至少写两篇文章,一篇写 UI 设计,一篇写交互设计,或许还可以就产品功能再写一篇。因为我分别从事过产品经理和 UI 设计的工作,同时也兼任过交互设计的工作,有这些方面的经验。

 

按照计划,第二篇文章很自然地就是关于 Keep 的交互设计,不过名字是《浅谈 Keep 的用户体验》。因为所写内容已经超出了“交互设计”的范畴,而“用户体验”恰好是一个更合适的主题。这篇文章的反响依然还行。另外,有趣的是,根据使用感受,我发现 Keep 这个拥有课程和社区的运动品牌,它的用户体验可以用四个维度来描述,它们分别是:人与界面、人与内容(课程)、人与人(社区)、人与品牌。没错,这就是本书最原始的雏形了。

 

再加上也有读者朋友反馈说“用户体验的四维度”挺不错,有启发。于是第三篇文章就“拐弯”了——没写 Keep 的产品功能,也没写其他产品,而是把“用户体验的四维度”单独写成了一篇文章:《浅谈用户体验的 4 个维度》。

 

某种程度上,第三篇文章的反响好过前两篇,因为当时有 3 个业内比较知名的公众号(分别是 MicroUX、应谋鬼计、UXPA,在此向他们致以谢意)转载了这篇文章,且有一名立志成为产品经理的大学生根据这篇文章的观点写了一篇分析 QQ 和微信用户体验的文章:《从微信与 QQ 的交互比较中谈用户体验》。另外,当时在跟一些朋友聊起我写公众号的近况时,有两位设计师朋友都提了句“可以写书/出书”。

 

不知说者是否有意,但是听者有心,朋友的话更加坚定了我内心逐渐萌发的写书的想法。第三篇文章之后,我就开始认真考虑写书这件事了:首先,“用户体验的四维度”这个概念比较新,或许可以作为书的框架;其次,个人对用户体验非常感兴趣,也就是对这个潜在的书的框架非常感兴趣;第三,发在网上的文章,包括“用户体验的四维度”这个概念,反响都还行;第四,公众号我是全职在写,为了质量写得很慢(平均两周一篇 4000 多字的文章),时间成本已然很高,还不如再增加点时间成本来写书。

 

所以,是不是真的可以把“用户体验的四维度”写成一本书?

 

试试才知道。于是,在参考很多书的大纲以后,2019 年 8 月下旬,我就为“用户体验的四维度”列好了一个初步的大纲。

 

之后发在网上的所有文章,也就是从第四篇开始,就是按照这个大纲来写的。也就是说,我是先把书稿写成了网文,这种网文的更新一直持续到第 2 章 HI X(人与界面的交互体验)的尾声,随后断更。因为那时已和出版社签好合同了,按照约定,书里的内容不再发到网上。对于那些曾在网上追过我文章的读者朋友,在此我要说声抱歉,请见谅。

 

顺便说下书稿和网文的主要区别。历经编辑的指导与建议、作者的反复修改、审校流程的打磨,与网文相比:

一,书稿的逻辑与结构更加严谨、合理,内容和语言也比网文精简;

二,书稿更加体系化,相互之间(如 HI X 部分的根需求、功能架构和信息架构)尽可能做到了“环环相扣”,章节之间的起承转合也更加连贯、自然;

三,书稿在内容层面进行了一定程度的修改和优化,个别章节(第 1 章的四维度,第 2 章的根需求、功能架构等)则是进行了极大程度的修改和优化。

四,书稿在产品案例和生活案例方面也进行了一定程度的调优。

 

以上就是这本书的一个简单缘由,接下来分享下它的主要特点。

 

 

02 《用户体验四维度》的特点

 

这本书主要有四个特点,它们分别是:追求深度、追求卓越、展望未来、兼顾大小。当然,我也很期待你去发现这本书的其他特点,包括它的缺点。



1 追求深度
 
无论是宏观上的大纲(用户体验四维度),还是微观上的具体内容(根需求、功能架构、UI 设计、HH X 等),本书都着力于深挖本质。
 
先以根需求为例。在日常工作中,“需求”是一个高频词汇:大到上线一个大功能,小到改一下字体颜色,都被我们称之为“需求”。面对大大小小、林林总总的“需求”,是不是有必要关注下根需求(本质需求)?因为根需求是一切需求的根本。如果根需求有问题,往往意味着用户的根需求没有完全得到满足,那由此衍生出来的一系列大小需求都会有问题;如果根需求有问题,就意味着这个行业的类似产品,依然有机会,直到用户的根需求完全得到满足为止。所以本书就以几乎人人都会用的资讯产品为例,比较深入地探讨了两类用户(生产型用户和消费型用户)的根需求。
 
再以 UI 设计为例。关于 UI 设计,最近几年出现了一些“商业化设计”“增长设计”的概念,也就是说,UI 设计的肩膀上多了“增长”“商业化”这些担子。这不禁使人担心,未来会不会有新的担子,继续加在 UI 设计的肩膀上?另外,术业有专攻,职能亦有分工,这些担子,UI 设计担负得起吗?我认为未必担负得起。就像于动物的生命而言,心肝肺各有分工、各有贡献,总不能让心脏负责呼吸、肝脏负责跳动、肺负责造血。于心肝肺而言,做好分内的事情就是最大的担当与贡献;于 UI 设计、交互设计、信息架构、产品功能等而言,情况亦然。那 UI 设计的分内事是什么?是它的本质,这便是本书关于 UI 设计的探讨视角。
 
2 追求卓越
 
在本书中,有些话题有尝试深挖本质,有些话题没有。不管有没有深挖本质,最终目的都是落脚于“如何做到更好”,也就是追求卓越。
 
以交互设计为例,在规划它的大纲时,我尝试过不同的切入点:大的设计原则(iOS Human Interface Guidelines, 尼尔森十大交互原则等)、小的交互细节(微交互)、设计哲学(3-4 个要点)、设计目的(人人喜爱)。仔细斟酌之后,我发现要想实现“人人喜爱”这个设计目的,“设计哲学”这个方法的可能性是最大的,而且设计哲学本身是足够“海纳百川”足够“独立成章”的,所以最终果断摒弃了其他切入点,而只保留了“设计哲学”这个切入点。具体而言,这个设计哲学就是:周到,品质,惊喜,善意。想象一下,一个为人周到、能力(品质)卓越、时不时会给身边人带来惊喜、同时又很善良的人,自然会受到身边人的喜爱。类似的交互设计,同样会受到用户的喜爱。

3 展望未来
 
内容“扎根生活”是本书的追求之一。但是当探讨到目前面临困境并存在诸多不足的话题时——比如 UGC 产品(HC X 部分)——本书则会更多地展望一下未来。
 
UGC 产品面临什么困境,存在什么不足?
 
以文章类 UGC 产品为例:各行各业的从业者——比如教师和律师——都有自我充电(如看到本行业高品质的深度文章)的需求,这个需求基本上能在公众号里得到满足;但是,不管一篇深度文章的品质有多高,公众号这个包含各类信息的平台,都是像黑洞一样将其“吞噬”和“湮没”,而不是像书店、图书馆一样将其“陈列”和“流传”下去。再以极其热门的短视频类 UGC 产品为例:得益于简单易用等诸多优势,短视频类 UGC 产品在“信息和知识的大众普惠”(尤其是针对老年人)上做出了重要贡献;但是,短视频类 UGC 产品也存在一定不足,比如容易使人上瘾、沉迷,比如上面的信息和知识一定程度上缺乏质量保障。
 
未来更好,或更受欢迎和尊重的 UGC 产品,会是什么样子?
 
个人观点,首先是简单清晰的分类,也即 UGC 产品需要分成知识型 UGC 和信息型 UGC,前者以知识为主,后者会包含前者。实际上这个分类目前是存在的,比如站酷、人人都是产品经理、CSDN 等社区就属于知识型 UGC,公众号、B 站、抖音等平台则属于信息型 UGC。
 
篇幅所限,这里仅说下信息型 UGC。以短视频类的信息型 UGC 产品为例,虽然大热,但也饱受争议,甚至饱受诟病。什么样的信息型 UGC,在广受欢迎的同时还受人尊重,甚至受人喜爱?据个人观察,有两大类。一类是像公众号这样足够多元的“真实世界”,另一类是像 B 站、Instagram 这样在某些方面比较美好的“理想世界”。“真实世界”和“理想世界”,值得所有信息型 UGC 来学习。

关于信息型 UGC,怎么建立更多“真实世界”和“理想世界”?关于知识型 UGC,未来更好的产品会是什么样子?这些问题,本书都尝试进行了探讨,以供参考。

4 兼顾大小
 
用户体验的四个维度,交互设计的设计哲学,知识型 UGC 和信息型 UGC,都是比较宏观的大话题。本书不光有这些大话题,还有与之对应的关乎“怎么实现”的小细节。
 
还以交互设计为例,周到的、高品质的、给人惊喜的、带有善意的交互设计会受人喜爱,那交互设计如何做到周到、品质、惊喜和善意呢?自然而然地,本书就这四个问题进行了比较深入的探讨。以“惊喜”为例,本书先是将交互设计的“惊喜”分为“小惊喜”和“大惊喜”,简单给出了定义和示例,然后又就“如何做到惊喜”分别给出了针对短期(可以立马实现,更适合“小惊喜”)和长期(需要长期积累,更适合“大惊喜”)的建议。
 
于 UI 设计、信息架构、功能架构、HH X 等话题而言,也是同样的或类似的写作手法。


分享完主要特点,接下来请允许我简单介绍下这本书适合哪些读者,供你参考。
 
5 适宜人群
 
得益于以上几个主要特点,再加上本书涉及的话题既有属于基础的根需求、功能架构、信息架构、交互设计、UI 设计,也有更进一步的 HC X(人与内容的交互体验)、HH X(人与人的交互体验)和 HB X(人与品牌的交互体验),个人观点:
 
本书既适合一线从业者(产品经理、交互设计师、UI 设计师等),也适合相关从业者(技术人员、运营人员、市场人员等);
既适合创业者(“根需求”“功能架构”以及“知识型 UGC”“信息型 UGC”等部分或许会使你发现更多新的机会),也适合学生。
 
希望你能在书中找到自己需要的、或自己感兴趣的内容。
 
以上就是我的分享,接下来把时间交给《用户体验四维度》。
 
 
结语
 
好的,谢谢作者李潇的分享,让我意识到我的出生似乎是个意外;也谢谢李潇把我夸得这么好,但我还是要补充一句,他的夸奖仅供参考,一切以自己的切身感受为准。
 
用户即人,谈用户体验,自然离不开对人的关注。人作为高级动物,自然有其强大和理智的一面;人作为动物本身——置身于高速发展的现代社会,置身于“乱花业已迷人眼”的智能化信息社会,置身于既相互温暖也相互竞争甚至还相互“伤害”的同类中——也有其脆弱和感性的一面。正如李宇春在《软肋》里唱的那样: 


是最坚强的人,是最脆弱的人   
是最理智的人,是最敏感的人   
固若金汤的人,语无伦次的人   
不过,血肉之身   


 
同样作为人的互联网从业者,在打造自家产品时,在兼顾商业化的同时,有没有可能以更美好的方式去对待这一个个用户,一个个血肉之身?
 
我想这是一些产品正在面临的问题,也是所有产品都难以回避的问题(用户利益和企业利益难免会发生矛盾)。互联网行业在中国的蓬勃发展,不过二三十年的历史,所以相信这也是一个布满荆棘、充满希望的问题。《用户体验四维度》从根本上探讨的,也正是这个问题。希望我的探讨,能为你带来一点参考或启发。
 
最后,谢谢你的时间。


- -  The End - -


实拍图:

undefined

文章来源:站酷      作者:SonwDesign

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

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

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



设计师眼中的用户体验

ui设计分享达人

用户体验

首先,我们先来了解什么是用户体验

从字面上来说,用户体验就是用户在使用产品过程中对产品的直观感受以及评价

这种感受非常的主观,但又很容易影响别人对产品的判断。这就是为什么某宝商家一直求好评,而某团骑手会为了好评跟用户“大动干戈”的原因了


名词解释

  • UI——User Interface,本意是“⽤户界面”,但现在这个词已经被拟人化了,即把那些做用户界面的设计师们叫做UI

  • UE——User Experience,本意是“⽤户体验”,现在也变成了一个职业名词,是指那些做用户调研的研究员,比如用户画像、产品分析、竞品分析等。有些公司把“交互设计师”也叫做UE,严格来说UE和交互是两个职位,不过现在很多UE除了做用户调研也会画交互原型,所以混在一起也不奇怪了

  • IxD——InteractionDesigner,本意为“交互设计”,也就是交互设计师,现在也常常用UX(User Experience)来表示交互设计,用来跟UI进行区分。简单来说就是帮产品画原型的,实际上这个职位非常的关键,产品希望表达的逻辑,各个界面的跳转与关联关系,以及产品的可用性与易用性,都体现在交互上

  • UED——User Experience Design,本意为“⽤户体验设计”,现在常常表示用户体验设计团队,基本上大一点的互联网公司都有自己的UED团队,甚至大的部门都有自己的UED团队


UED工作领域

UED团队要做的事情可多了,通常来来说主要坐下面的事情: 

  • 用户研究

  • 产品分析

  • 交互设计

  • 产品设计

  • 视觉设计

  • 品牌设计

  • 插画设计

简而言之,UED是以用户需求为目标而进行的设计的团队,通过团队的经验与设计能力给出设计方案,是帮助公司进行产品策划的主力之一


用户体验五要素

说到用户体验,就不得不提用户体验五要素了

现在我们所谈论的用户体验的概念,其实最早出自一本叫《用户体验要素》的一本书

《用户体验要素》--作者Jesse James Garrett,是美国用户体验咨询公司Adaptive Path的创始人之一


这本书出的其实比较早,英文版在2001年就出了,国内常见的是2010年出版的中文版第2版,书里的概念在互联网设计界广为流传,非常值得阅读


当设计师在设计或重构产品,却不知从何开始时,这时我们可以参考用户体验五要素


用户体验五要素是一种产品分析与设计的方法论,他向教科书一样指导我们从0到1设计一款产品。同时它涵盖了一个产品从想法到落地的整个流程,这正是我们学习它的重要原因

用户体验五要素由战略层、范围层、结构层、交互层、表现层等5个层级构成,由下而上像个金字塔的结构一样,战略层则是底部最坚定的根基,产品的起源也源自该层


1.战略层

这是五要素的最底层,一般是公司负责人与产品总监、市场总监等高层之间的讨论范围层。这一层主要是确定产品目标以及用户需求。比如:

  • 公司要做什么

  • 面向什么样的用户

  • 什么样的解决方案

  • 公司的产品特色是什么

  • 竞争对手有什么

  • 将来的收益怎么样

 

值得一提的是用户画像需要在这一层定义出来。我们可以招募一些用户进行访谈,然后为用户分组,并结合用户的需求确定我们的产品目标

2.范围层

战略决定范围,这一层主要针对战略层的需求进行更细致的分析,定义需求是什么,提出解决方案,同时要定要好需求的优先级

3.结构层

根据前两层思考产品的信息架构,规划任务流程,简单来说这一层主要是产品PRD的输出

4.框架层

页面的具体功能摆放,信息布局,这一层主要是交互设计,输出低保真原型

5.表现层

页面最终给用户呈现的视觉效果,这一层主要是视觉设计,输出高保真视觉稿

模拟案例

作为设计师的你,接到了一个饼干公司的设计需求,公司希望你能帮他完成从产品到包装一系列的设计,你该怎么去做呢?

我们用用户体验五要素来整理设计思路:

-战略层

  • 先了解这家公司的产品需求和用户需求

  • 产品需求:公司是个小型食品加工厂,主营是面包和饼干,有实体店也有网店,今年准备在圣诞节推出一款圣诞饼干

  • 用户需求:用户画像是20-35岁的女性,喜欢看剧,喜欢网购,对可爱的东西没有抵抗力。今年上映的一部电影叫《饼干侠》(虚拟)票房火爆,用户都想买到剧中同款的饼干

  • 公司目标:希望圣诞前后一个月内盈利50w

-范围层

  • 分析需求:公司是做一款圣诞饼干,了解到《饼干侠》的原型是出自美国卡芙食品的一款饼干,并把它确定为竞品并展开分析

  • 设计方案:列出一系列设计清单,包括品牌logo重新设计,食品包装、网店圣诞装饰、广告宣传图等,给这些设计需求确定好优先级

-结构层

  • 信息架构:进一步细化已列出的设计方案,输出文档或者设计规范,比如《品牌手册》《食品包装标准》等

  • 交互流程:进一步的用户画像与分析,收集市场同类型品牌调性,通过试用的方式整理出饼干的分类属性,如口味、分量、包装材质等

-框架层

  • 从这里可以开始整体的、低保真的设计了,可以出一些比较具体的设计方案,目的是快速跟需求方进行评审,为后续的视觉设计作准备

-表现层

  • 经过前面反复的沟通与评审,开始高保真的视觉设计,从产品包装到广告图到物料,这里就是设计师们展示商品颜值,提升其商业价值的时刻到了

  • 最终产品上市



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

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

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


UI组件要点「狙击」:按钮设计的这些坑别再踩啦!

纯纯

按钮设计


为了设计正确的交互,我们需要回顾一下物理按钮的历史和起源。物理按钮是UI组件的前身,当今的数字产品都还在大量使用它们。按钮很棒,即使用户不了解基本的机制或算法,只用手指触摸就可以让电器、汽车或系统运行/关闭。在《Power Button》中,作者Rachel Plotnick描述了当今按钮文化的起源,并解释了按钮是如何成为数字命令方式的。


“你按下按钮,剩下的我们来做。” ——柯达相机的醒目标语吸引了潜在消费者。


即使在今天,这也是吸引用户的地方——通过简单触摸就能让事情发生的即时满足感。尽管有大量新的家用电器和设备都变成了触摸屏,但物理按钮并不会消失,因为它们让人形成的行为习惯,会影响按钮设计的直观性和易用性,是一种永远存在的实物参考。


01 按钮 vs 链接

按钮向用户传递了操作的可执行性,在整个UI里很常见,例如:对话框、表单和工具栏等。按钮和链接之间的区别,请注意:

-链接是导航到另一个地方时应用的,例如:“查看全部”页面、“ Roger Wright”个人简介等;

-按钮是在执行动作时应用的,例如:“提交”、“合并”、“创建”、“上传”等。



02 让用户直观感受按钮状态

为按钮创建正确的交互和样式,是按钮设计过程中重要的组成部分之一。在不改变组件或产生视觉干扰的前提下,每个按钮的状态都必须有明确定义,以使其与周围布局区别开来。



正常—表示该组件已启用交互;

突出提示—用户使用键盘,进入编辑状态;

鼠标悬停—当用户将鼠标置于交互式元素上方时;

点击—按下状态表示用户已轻点按钮;

进度/加载—用户操作行为没有立即执行,表示正在完成操作中;

禁用—表示该组件当前处于非交互状态,但将来可以启用。


03 按钮的颜色、形状和大小

常见的是圆角矩形按钮,这些按钮即使在输入框旁,用户也能快速识别。按钮样式的选择取决于用途、平台和应用准则。以下是一些最受欢迎的样式变化:



04 建立按钮样式等级

样式主要用于区分重要和不重要的动作。创建动作层次结构,该层次结构将指导用户进行多种选择。通常,可以有一个突出的按钮(该样式通常称为“首要”按钮),剩下的按钮则依据重要程度建立不同的样式等级。



05 《Don’t Make Me Think》

这是可用性工程师Steve Krug撰写的书籍标题,其中讲到了一点:对用户而言,界面清晰明了非常重要,不要给用户制造难题。人们周围其实已经被电子产品包围了,多年使用各种设备、软件的经验,一定程度上固化了人们对按钮外观和功能的认知。如果与常见的“标准”存在较大偏差,也会给用户造成困惑。



避免对交互式和非交互式元素使用相同的颜色,否则用户不知道该点击哪里。


06 一致性的重要性

“一致性是最强大的可用性原则之一:当事物始终表现相同时,用户不必担心会发生什么。” —雅各布·尼尔森(Jakob Nielsen)


一致性提升了速度性和准确性,有助于避免错误。创建可预测性,帮助用户控制和实现产品中的目标。当创建主要、次要和第三种样式时,试着找找一致元素,如颜色、形状等。按钮设计不仅要在设计系统内部保持一致,在整体平台也要进行统一。



07 使按钮足够大以实现可靠交互

按下按钮应该是一个简单的操作任务,如果用户无法正常进行,或在过程中错误地按到了相邻元素,不但给用户造成了负面体验又浪费了时间。


对于大多数平台,请考虑被触摸的目标至少为48x48dp。无论屏幕大小,这种尺寸的触摸目标的物理尺寸应为9mm,触摸屏元件的目标尺寸至少是7-10mm。



对于图标按钮来说,请确保触摸目标超出元素的可视范围。这不仅适用于移动设备、平板电脑,同时也适用于网络上的指示设备,比如鼠标。


08 无障碍设计

所有组件都应推行无障碍设计。目标区域的大小是影响可访问性的因素之一,其他的则是字体大小、颜色和对比度,也有很多工具能检查组件的设计性能。



设计师应与开发团队紧密合作,确保按钮与屏幕阅读器协同工作。添加role =“ button”将使一个元素作为按钮控件出现在屏幕阅读器上。


09 手势应用

手势应用,让用户可以通过触摸与应用程序进行交互。使用触摸来完成任务,不仅提供了触觉控制还非常节约时间。某些手势(比如滑动以触发上下文动作、双击或长按来标记喜欢等)每天都被人们广泛使用,但对于普通用户而言,它们仍然不太明显,建议把它们替换给高级用户执行操作。



10 按钮标签信息易于理解

按钮传达的信息与其外观一样重要,错误的信息会让用户感到困惑,甚至是误导用户操作。正确的按钮标签会引导用户完成操作,最好使用动词,并在按钮上标记其实际功能。


就像按钮在问用户——“您要(添加到购物篮中)吗?” 或“您要(确认订单)吗?”,避免使用Yes/No或过于通用的标签,比如Submit。



11 确定/取消,还是取消/确定?

两者都是正确选择,但设计师可能会花几个小时来讨论哪个更合适。

-确定按钮在前,是自然流畅的阅读顺序。Windows把确定按钮放在了前面;

-确定按钮在后,可以帮助改善流程。这种顺序形式,帮助用户再采取行动前,对所有选项评估,有效地帮助人们避免错误。苹果则是把确定按钮放在最后的;

任何一种选择其实都没有错,也不会造成什么可用性灾难。



12 避免使用禁用按钮

每个人都遇到过这种情况:在屏幕上停留了几秒或几分钟,怎么操作都没反应,这才发现原来是禁用按钮使我们无法进行下一步。禁用控件让组件短暂处于非交互状态,但如果使用不当,则非常容易让用户产生负面情绪。



我建议尽量避免禁用按钮,最好始终启用它,如果用户未提供某些必需信息,则只需突出显示空白字段或显示通知可。


文章来源:UX辞典(站酷)

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

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

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



从3个方面,总结 Figma 值得借鉴的交互细节!

周周

近一年来,Figma 可谓是体验设计领域中最热门的工具。刚好最近开始频繁的在 Axure 9.0 和 Figma 中切换使用,深刻的感受到了设计细节带来的体验差异化。今天就通过一些细节亮点,总结下工具软件的体验设计的几个原则。

交互深耕-B端设计师要懂的信息架构

纯纯

网上关于信息架构的知识内容参差不齐,在学习与探究的过程中查阅了很多资料,反复修改多次,尽量用直白的语言结合实例来阐述信息架构。目录如下:





1.1 前言

这篇文章的起源,来源于最近看到的话题“B端设计师会被组件库取代吗?”。从表面上看,在组件库越来越完善的时代,很多页面设计依靠组件库就能够快速搭建。


那么在这种情况下,B端设计师存在的意义和价值到底体现在哪里呢?其实B端设计的重点并不在页面的视觉上,视觉只是作为设计师最终输出成果的一小部分。个人认为B端设计师工作重心体现在做「正确的设计」,比如以下几个方面:

1.这个设计能否完成对应的商业目标和产品目标;

2.我们的信息呈现是否合理以及能否解决当前需求;

3.用户能否在页面上快速找到想要的信息;

而想要弄清楚并解决上述这些问题,在众多的话题阐述之下,我发现其论述本质上都逃离不了「信息架构」这个概念。因此我认为设计师都需要对这个概念有充分的认知,这能够帮助我们做出正确且出色的设计。


1.2信息架构概念

关于信息架构的概念,在百科上面的定义大部分都比较晦涩难懂,比如维基百科和百度百科的解释:

相信大部分人都很难明白其中描述的意思。在这里换种思路,将信息架构拆分为信息与架构去理解。

信息指的是内容的载体,常见的文字、图像等都是信息;架构的含义则形容对应的组织和结构。那么信息架构就是将信息通过一定的形式组织起来,然后呈现出来。其本质就是研究信息的表达与传递。

通俗点讲,信息架构就是让用户可以更容易的理解我们的产品,让用户在使用我们的产品时可以更顺利、更自然。因此信息架构没有一个具体的呈现形式,它更多的是体现在产品设计的各方面。具体主要表现为组织系统、标签系统、导航系统和搜索系统。





为什么需要信息架构?我们都知道B端产品设计的核心是「降本提效」,在设计这一侧的可以将其理解为降低认知成本,提升使用效率。

降低认知成本需要我们更好的表达信息,让用户能看明白我们的产品能够做什么,如何用;提升使用效率需要提升信息的传递效率,让用户能够很容易的找到需要的功能;


而信息架构从本质上来讲也正是研究信息的表达和传递。因此我们需要通过它来帮助我们更好的完成B端产品设计。如果没有信息架构来作底层支撑,那么我们在页面上看到的可能就只有功能的堆叠,让产品陷入难以上手或者不知道怎么用的尴尬境地。

一个强大信息架构是产品质量的保证,是作为设计支撑点的骨架,它会减少可用性问题,提升整体导航行,创造对用户友好的体验。比如举一个工具层面的例子:

PS的工具栏堆叠在界面各个部分,而Figma的工具栏则集中在右侧且只出现当前需要的功能。很明显Figma在信息架构中的信息组织部分做得更为友好,PS则会显得逊色一些。这也是我们在学习PS的时候会显得比较吃力的原因之一。


可以说良好的信息架构是高效用户体验的基础。视觉元素,功能,交互和导航都是在信息架构的基础上构建的。因此想要做出体验好且合理的页面设计,我们就需要参与到信息架构这个过程中来,和产品一起完成对应架构的梳理。而不是只完成从原型到页面这个部分。


如果想要搭建一个好的建筑,我们需要知道其建造的目的,是按照什么样的结构搭建,内部有哪些系统,以及最后呈现的模样。


那么信息架构也同理,我们首先需要知道信息是为了什么目标服务,然后我们通过怎样的结构来组织这些信息,以及过程中会用到的信息元素,最后如何呈现它们。这都是我们在搭建信息架构中需要进行的必要步骤。如果某些环节没有做好或者没有了解透彻,那么在输出信息架构时往往会出现方向或者策略上的问题。接下来我们看看这些步骤是如何具体呈现的。


3.1 信息获取:先理解业务,再谈架构

B端行业对于业务理解的要求是比较高的,只有在理解业务的基础上,将业务需求转化为对应的设计目标,我们才能够输出合理的信息架构方案。

个人认为理解业务的基础,就是能够用一句话讲清楚当前设计的产品。这句话可以描述为:谁在什么地方想要完成什么目标。比如「用户想要不出门就能够吃到东西」,这就是外卖软件提供的产品服务。


虽然看上去这句话很简单,但其中包括了三个要素:用户、场景和目标。因此我们在分析和梳理业务的过程中首先要弄清楚的就是这三个要素。


3.1.1用户:分清购买者与使用者

用户永远是排在第一位的,也是我们首先需要弄清楚的。在B端设计中,本质上可以分为两类角色:客户和用户。比如我们常用的钉钉或企业微信,购买客户是企业,实际用户是员工。

对于企业:「我想要有一款软件可以更好的管理员工」

对于员工:「我想要这款软件能够更好地提高工作效率」

客户决定了我们产品的购买(部分情况下也兼顾使用),而用户则决定了后续产品的复购率。因此在业务理解中,我们需要弄清楚当前产品所处的服务阶段,比如初期为了打开市场肯定更倾向于客户,而中后期为了提高产品的使用体验又会偏向于用户。


因此我们首先需要弄清楚的就是当前产品是为哪些「目标用户」服务,这也就决定了我们在设计信息架构时对应的不同侧重点。


3.1.2场景:需求源于场景

场景是指需求产生的某种条件,这个条件包括但不限于环境、时间、地点、空间等,只有上述条件满足,这个需求才能成立。这里可以把场景理解为产生该问题的原因

比如当用户提出「她需要一件衣服」,那么我们就需要弄清楚用户为什么需要添加衣服,是她感冒了自身觉得冷还是因为外界环境冷。这两种场景涉及到的解决方案是完全不一样的。


在平日的工作中我们可以通过以下两种方式来更好的了解业务场景:

1.通过业务方文档进行业务背景的初步理解。业务文档中一般都会包括需求背景,我们可以通过文档进行初步了解。

2.通过业务沟通进一步加深业务背景的理解。由于很多B端业务离设计师本身的生活比较远。因此对于需求背景中不理解或者比较模糊的部分,我们可以通过与业务方或产品多次沟通来挖掘最底层的背景。

毕竟需求背景是理解业务的重要步骤,我们只有知道需求产生的原因,才能够针对性的给出解决方案。


3.1.3目标:业务目标和设计目标

目标决定了我们的产品最终的方向。我们首先接触到的一般都是业务目标,而我们要做的就是将业务目标转化为我们此次的设计目标。


A.业务目标

业务目标就是此次业务想要解决的实际问题,它通常是一个宏观上的描述。比如打车软件的业务目标简单概括来讲就是让用户能够更快速地打到车,减少等待焦虑。我们一般通过文档或者沟通来了解该目标。


B.设计目标

设计目标是我们基于业务目标而给出的设计策略,是一种更具体的实现方式。比如我们要让用户快速的打到车,那么这个时候我们的设计目标就是通过将用户位置和司机位置进行快速匹配,并通过超时补贴红包的方案来降低用户焦虑。从而实现业务目标。而这一过程涉及到的信息点就有:司机位置、乘客位置、等车时间、补贴金额等元素,并需要思考它们之间的关系和呈现方式。


可以发现从业务目标转化到设计目标这个过程,实际上就是在确定功能和信息点的过程。这样才能让我们更好地设计信息架构。


3.2信息架构核心:信息组织

从前文可以看出我们会在整体设计过程中出现很多的信息元素。如果不经过对应的组织和处理,直接堆叠在一起,那么信息含义会比较乱且难以调用。比如下方:

而右侧图片信息的组织过程可以理解为通过将零散的数据信息进行分类再以某种结构化的形式将它们重新组合排布的过程,直白一点就是先分类,再结构化呈现。我用一张图来表明这个过程:

那么这个过程中「信息组织」和「结构呈现」到底应该怎么做,也就是接下来要讲的组织方式和结构类型。


3.2.1组织方式:模糊分类和精确分类

组织方式可以分为精确分类和模糊分类。精确分类就是我们会利用物体本身物理属性来进行分类,比如位置、字母表、时间、类别、层级等方式进行组织。一些工具类应用例如滴答清单内容信息都是按照时间来进行组织的:

而模糊分类则是按照更为主观的逻辑对信息进行分类, 如主题、任务、用户、隐喻等来进行归类,比如我们常用的APP商城是按照不同的主题类别来进行区分的。

但在很多时候,产品倾向于将两种组织方式结合起来形成复合型组织方式,从而能够使我们的整体组织形式更符合用户的使用习惯。比如蓝湖的信息组织,其中既包含了模糊分类(按使用类型等分类),也包含了精确分类(按上传文件时间等)。

其实在大部分B端产品中,大都按照模糊分类来进行处理,比如按照任务、流程等方式。而精确分类更多用于在页面内的局部信息模块,比如创建时间和文件大小等。


归根结底,我们分类方式的选择需要结合我们前面提到的用户、场景和目标,这样才能让我们的分类更具说服力。


3.2.2组织结构:选择合适的结构类型

当信息按照分类维度组织后,我们接下来就是把整体信息进行结构化,这样才可以将信息整体连接起来并呈现出来。一般分为以下四种组织方式:


A.层级结构(最重要的结构)

这是信息架构中最为常见的结构,也是比较符合用户认知的结构。有时也称为「树状结构」。以子父节点的形式一层一层延展。

层级结构的优势就在于可以承载复杂的多层级内容,通过层级递进的方式将复杂的多层级拆解得更简洁。


但我们需要把控好内容的广度和深度,广度指的是在层级结构中每一层的数目,最好控制在7个以内。如果广度太宽意味着每个页面会给用户展示太多的信息,增加寻找内容的负担。深度为纵向结构,建议一般3层,最多不超过5层。过深的层级会让用户点击很多次,且不容易被用户发现。比如飞书的基本信息架构也是主要以层级结构来进行的。


B.矩阵结构(多维度结构)

矩阵结构是各个节点都相互连接的一种信息架构方式,通俗来讲就是用户既可以通过多个维度去触达同一信息,也可以从单个维度连接多种信息。

这种结构其实就更类似于我们在做相关功能时:比如当你进入电影全屏时想要退出时,既可以通过点击按钮退出,还可以通过键盘的Esc返回到,通过多点触达同一操作。


又比如我们的联系人功能,我们既可以通过输入数字拨打电话,也可以查找联系人进行拨打,还可以查询电话记录进行回拨。

矩阵结构最重要的意义在于给用户提供多种路径,使用户能够在不同路径中寻找各自想要的东西。


C.自然结构(随机性)

自然结构不遵循任何一致的模式,节点都是被逐一连接起来的。

自然结构一般都具有随机性和不确定性。这种更倾向于泛娱乐化的C端应用。比如我们常见视频网站的在推荐流都是应用的自然结构。比如打开B站等视频平台,你很难猜到刚进入看到的是什么。

但一般自然结构不会单独存在,比如B站在自然结构中也绑定了层级结构来进行层级上的划分。


D.线性结构(单一性)

线性结构是非常单一的一个结构,整体是一层一层向下递进。比较强调先后顺序的一种结构。


这种结构通常用于我们常见的软件安装程序等,也可以用于部分功能结构,比如网站的视频发布,一般都是经过上传-编辑-发布这三个步骤来依次进行。

大家可以发现在进行信息架构时,我们在很多情况下可能会运用多种组织结构方式,我们需要根据对应的用户决策场景来考虑让最适合的几种方式相结合。但最终目的都是为了让用户能够更快速的获取信息。


3.2.3注意事项:关注用户心智模型

在信息的组织过程中,我们需要注意用户的心智模型。比如当我们看到红点就知道有新信息通知,看到下拉箭头就知道可以展开。这是互联网产品在无形中给用户建立的底层习惯认知。用户目前对于普遍产品的一些基础布局、功能名称和交互逻辑都形成了一定的习惯,这都属于用户的心智模型的内容。


因此我们在组织信息时尽可能不要去打破用户常见的心智模型,否则必然会导致用户的不习惯。我们常见的「扫一扫」功能,微信、支付宝和QQ会隐藏在「+」号里面。而微博和抖音却分别放置在了「我的」和「搜索」里面。

这样会导致用户难以发现该功能。因为用户接触新的信息时,会以最初接触的局部信息为依据展开并形成初步认知,用户认知中的信息组织逻辑和实际信息的吻合度越高, 他在进一步查看或寻找信息的过程中体验会更顺畅, 反之, 若一开始形成的认知与实际信息的差异过大, 在后期的信息搜寻过程中则容易遇到困难。而这个吻合程度其实就是用户心智模型。


虽然建议在一定程度上遵循用户心智,但并不是说绝对遵循。对于用户不熟知的场景或者某些专业术语,我们需要通过灵活有效的提示(比如标记注释等)来引导用户就可以了。比如我们刚才提出的抖音扫一扫,它的应用场景其实是用于抖音官网后台登录,且在后台登录时已经给出了对应提示,那么这样的设计也是合理的。


3.3信息架构支撑:标签、导航和搜索

当经过上面的信息组织,其实我们已经能够归纳出一个大体的信息架构框架。但在信息组织之外,我们还需要关注以下三点:标签、导航和搜索。这对于信息架构的完整性也有非常重要的意义。


3.3.1 标签系统:让信息识别更通用

标签系统,通俗来讲就是要我们对当前整个系统信息节点的命名,从而让信息的呈现更容易识别。拿个最简单的例子来进行说明:

可以看到左侧和右侧关于卫生间的信息标示,可能左边你能一眼区分,右边可能就需要反应半天才能猜出到底代表什么含义了。


这其实就是关于我们的信息命名是否能够被大多数用户所接受的场景,也就是我们标签作用所起的作用。标签可以分为图片和文字标签,都需要考虑用户对该信息命名的认知程度,也就是前面提到的心智模型。那么如何能够更好的去定义标签名称呢,这里需要注意2个方面:


A.优先选用被行业广泛接受的词或图标

在进行标签定义的时候,尽量选择已经被用户所熟知的词语,比如「工作台」「通讯录」等已经被运用得非常熟练,对于类似功能就直接以该形式命名,比如我们的设计软件中,很多图标和功能名称都是通用的:

这样做能够很大程度减少用户的学习成本。因此在B端设计中我们也需要注意到我们所在的行业,哪些名词已经达成了共识,就无需再造新名词。


B.不确定的词语可以参考竞品或调研来决策

当某类功能或场景的标签难以确定时,我们就可以尝试去找一下竞品是否有类似功能,或者找该行业的领头羊(比如聊天工具的巨头微信),那么在进行标签定义的时候,可以参考它的命名体系。因为它已经替我们教育了一部分用户,会间接降低学习成本。


如果某些标签在上述过程中还是无法确定,那么我们结合自己经验或者与咨询业务相关人员来进行讨论,在必要时候可以在标签旁边添加注释来进一步说明。


3.3.2 导航系统:让用户不迷路

导航系统其实应该是大家比较熟知的一个系统了。就像使用导航系统来规划行程一样,导航系统都会存在于每个网站中。比如我们常见的侧边导航、顶部导航等。

因为网上关于导航系统已经有很多资料的讲解了,在这里阐述下四类导航的含义:

1.全局导航:位于页面最上层的导航,用户几乎在页面的每个地方都可以看见,是最高层级的导航系统;

2.局部导航:位于最高导航的下级子类导航,子类导航并不是必须的导航,根据场景进行取舍;

3.情景式导航:通过点击文字链接进行跳转的导航,比如在个人资料里面植入其它网站的链接地址;

4.辅助导航:这里包括网站地图,网站索引,网站指南等辅助类型的导航。


辅助导航的网站指南包括新手引导和演示教程等。现阶段更巧妙的功能引导,是当用户在进行某些功能的操作时及时进行提示,这样不仅达到了为用户引导的效果,还减少了一连串的新手引导对于用户的打扰。比如figma在进行组件更新后,只有当你调用组件功能时,才会及时进行提醒。


3.3.3 搜索系统:让用户轻松找信息

搜索,是我们平日最常用的查找信息的功能,它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要,但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索时需要考虑下列三点:

1:内容复杂度:当前页面承载的内容复杂度如果较少,对于简单内容页面往往不需要搜索;

2:内容性质:当前页面的性质是偏向于用户浏览还是查找,根据用户行为来决定是否需要搜索;

3.搜索场景:如果搜索场景很简单,考虑是否只用筛选或分类就能够解决问题;反之如果搜索内容很复杂,我们还可以搜索结合筛选来更好的查找信息;


上述3点决定了我们是否需要考虑搜索功能。而关于搜索的其他细节点,比如搜索规则和搜索结果等,在这里不做进一步的阐述。在这篇文章中更重要的是弄清楚我们何时需要搜索功能。


3.4信息架构表达:视觉化你的架构

我们通过上述方法已经知道如何梳理信息架构了,那么我们应该如何呈现它呢。这部分其实也是很多资料中比较模糊的点。

在学习的过程中,发现部分资料认为信息架构就是单纯的指思维导图,但实际上信息架构并不能单纯只用思维导图就能够完全表示。

因为信息架构包含了很多部分的内容。只能说思维导图可以是信息架构的一种表现形式,其可以帮助我们在思考阶段梳理整体产品的信息构成。


这里抛出一个很有意思的观点,那就是「功能结构图」和「信息架构图」到底什么关系,这里用两张图示例:

可以看到,功能结构图更多体现的形式是功能阐述,一般形式为名词+动词,比如头像设置;而信息架构图重点呈现的应该都为信息元素,一般为名词,比如头像图片。

但在大多数时候我们看到的产品架构图,其实更偏向于功能结构图和信息架构图的结合。因为在很多时候阐述信息构成时需要依赖功能进行辅助说明。


因此这篇文章讲述的信息架构更偏向于基于产品的整体架构。其实信息架构对于呈现形式并没有特别的限制,只要能够帮助你清晰表达产品整体结构就行。《信息架构:超越web设计》第4版中其实也并没有对表现形式这一块进行严苛的定义,其用「显示信息元素间的关系——站点地图」的说法概括了信息架构的呈现形式,其表达如下:

可以看到其表达形式包括思维导图和流程图等形式:思维导图的优势是能够总览全局信息,查看信息的深度和广度,而流程图的优势则更能够表达整体的逻辑关系。


因此信息架构的呈现需要根据你的产品场景选择合适的视觉框架表达。不必让形式限制了我们的发挥,而是应该形式追随于我们的架构表达。其只是一个信息梳理结构的说明结果(类似于中间态),我们需要借助它来更好的阐述思路与沟通想法。


3.5信息架构之后:让信息具像化

在输出信息架构之后,其实这里想聊一聊页面的呈现。因为当梳理好大的框架后,剩余的页面细节其实都需要通过原型图来进行体现。这个过程是从框架到页面的阶段,其实对于设计师来说也是很重要的部分。在这里根据自己的理解列出了以下几方面的注意点:

A.页面能够让用户看懂

这其实就是涉及到我们的信息组织和标签系统。如果当我们的某个页面不能让用户第一时间获取到该页面表达的信息,反思一下是在哪个方面做得不好。是标签系统含义模糊呢,还是信息的组织分类方式不对。从页面呈现倒推信息架构。

综合来说就是设计时的排列要考虑用户的心智模型(比如网页的常规排版和通用名词定义等),对于某些难以理解的地方给予用户帮助和解释。虽然B端产品想要完全避免学习成本是不可能的,但我们可以尽量减少其学习成本。


B.考虑用户的视觉动线

当我们在进行信息排列时,这时需要思考的就是用户的视觉动线,也就是我们常说的视觉浏览「F模型」和「Z模型」。对于不同的信息流来说,采用不同的动线模型能够让用户更好地查找信息。

F模型和Z模型的使用区分其实就是在使用场景上,对于内容页面来说F模型会更为合适(比如文章或者搜索结果),适合文本类的内容。但对于非文本的页面,则更适合用Z模型,Z型模式的设计跟踪了人眼扫描页面时的路线——从左到右,从上到下,能够更好引导用户的视线。


C.掌控好适度的信息层级

B端由于在视觉的发挥空间不多,那么相对来说保持良好的信息层级能够让整体的体验变得更为良好。

不管是原型图还是视觉,整体的视觉层级要体现得更为清晰。按理说最好的视觉层级控制在三级左右。如果发现视觉层级过多,需要考虑是不是因为信息架构设计时纵向层级过深,通过调整架构的形式来更好的呈现信息。以及对同页面的信息进行重要程度分级。


当我们做完或者听别人阐述对应的信息架构时,该如何评判呢,到底怎样的信息架构才算优秀呢。个人认为可以从3方面去进行判断:

业务层:

1.设计目标合理:能平衡商业目标和用户的目标,保证客户和用户都有较为良好的体验;

2.核心任务目标:能够让用户顺利完成产品的核心任务,需要通过用户测试来进行验证

结构层:

1.平衡广度和深度:在进行功能使用时不会隐藏的太深而找不到,是否有冗余步骤

2.保证拓展性:当前信息架构在面对未来新增或者删减信息时能够稳定拓展

体验层:

1.保证易读性:用户不经过介绍,通过页面信息呈现能够看懂该产品是用来做什么的

2.保证易查找性:用户在需要某个功能时能否快捷的找到,是否有多种查找方法(比如搜索或筛选)


合理的信息架构需要具备以上条件,我们需要在做设计呈现时也尽量保证以上条件。但在很多情况下其实并不能完全满足,这个时候我们需要根据业务目标的重要性来选择某些点进行满足。


梳理一下整体文章的架构,其实是按照「是什么-为什么-怎么做」的形式来进行拆分的:

这篇文章想要表达的观点,不是让设计师独立去梳理整体信息架构,而是让设计师拥有信息架构意识,了解其是如何进行并产生的。这样你在看到整体架构时,有足够的理论支撑去判断它的好坏,并通过自己的理论认知去理解和改进不好的地方。


当我们对信息架构有足够的认知时,我们在设计页面时才能有合理的思考方向,做出「正确的设计」,避免成为无情的作图机器。信息架构作为产品交互视觉最底层的支撑,只有骨架搭好,对于用户的使用体验才能够有本质上的提升。


注:文章中不可避免会存在不足之处,如果对文章中内容有更好建议,欢迎随时交流。


  参考资料:

《web信息架构》第四版

《信息焦虑》

《用户体验要素》

《信息架构设计》

「从设计前/设计中阶段,了解信息架构知识点」

「互联网产品如何搭建信息架构」

文章来源:进击的M(站酷)
作者:进击的M

转载请注明:交互深耕-B端设计师要懂的信息架构

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

日历

链接

个人资料

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

存档