首页

必读!用户体验设计指南 - KIT组件库一站式体验搭建

ui设计分享达人

本文将从理论到实践,从软件到插件,再到不同应用场景拆解和团队协同的重构,一步步教你如何搭建产品KIT组件库。也给大家带来逆天的Anima插件教程,组件化设计的必备插件,目前国内还比较少有文章讲到。手把手!嘴对嘴!堪称全网最细保姆级教程!




01. 什么是KIT组件库?


一个成熟的设计团队,都会为产品制定设计规范,搭建产品KIT组件库,组件化思维也是设计师的必备思维之一。组件库会让团队协作变得高效且一致,让团队成员专注于深耕体验和细节,实现设计向产品赋能。极大的节省设计和开发成本,优化用户在界面流转间的感知差异体验。


KIT组件库本质上是一个集合的Sketch文件,由原子、分子、组织、模板、页面组成。原子理论支撑可复用、可修改、易于协同和维护。


由Google推出的当时媲美苹果全新设计语言的Material Design,Material Design也是最为经典组件库设计。现如今阿里的Ant Design和Element给我们提供了一套完整可复用的组件库。



02. 原子设计理论


原子设计是将界面设计中最小元素——原子,组合嵌套为分子、组织、模板、页面的系统规范化设计过程。




1.  原子 Atoms

原子Atoms,我们知道是指化学反应不可再分的基本微粒。原子在化学反应中不可分割,但在物理状态中可以分割的。原子由原子核和绕核运动的电子组成,所以原子是构成物质的最小粒子这就不对了。


但在界面设计中我们所说的原子是构成界面的最小颗粒度元素,在设计中无法再被拆分或者拆分下去已无意义的最小单位。比如不同颜色样式、文字样式、输入框、icon图标、分割线等。

2. 分子 Molecules

由原子按照一定的规律和目的组成的部分为分子,在界面设计中比如Button按钮、swittch开关、非模态弹窗Toast等,可以理解为比较简单的小组件。

3. 组织 Organisms

将不同的分子与原子组合就组成了组织。比如头像与信息组成的联系人容器卡片、Table列表、Nav-bar、Tab-bar等等。


4. 模板 Templates

将组织与分子、原子进行特定的组合就形成了模板。这一步已经能展示界面的主要功能和交互了。一般这一步得到的结果就是我们日常工作中的原型图,产品的大致形态也慢慢清晰。所以模板可以理解成未上色的界面。


5. 页面 Pages

最终输出的高保真设计图即为我们说的表现层的页面Pages。将模板填充信息和图片内容,就得到了高保真设计界面。


03. KIT组件库搭建过程详解


以最近做的一个NFT项目为例子,展示具体搭建细节的全过程。




1.  命名规范


命名按照:一级分类 / 二级分类 / 三级分类 。例如:一级标题样式/苹方/常规/灰阶0


其中 “/” 为层级结构分隔符,Sketch会自动识别。组件库的搭建需要按照层级规范命名,从最外层到最内层,就像一个抽屉,每一层都对应放着东西。规范的命名会使后期调用维护、团队协同变得清晰高效。




2. 样式


(1)颜色样式

我们设计一般都需要定义颜色样式,一般有主色调(Main tone)、辅助色(Minor)、渐变色(Gradient)、字体的灰阶度(Gray scale)等。选中你需要创建样式的颜色,点击「外观 - 创建」,在输入框内输入层级规范命名。



(2)文字样式

定义文字样式,文字具有字体、大小、字重、灰阶等属性,选中文字,点击【外观-新建】,在输入框内输入层级规范命名。




(3)样式切换

当我们需要切换一个定义好的文字样式时,比如从“阅读文本样式”更换为“一级标题样式”,只需要选中文字 - 点击「当前文档」下定义的文字样式 - 点击需要更改的文字样式即可。




(4)样式修改 - 解绑与更新

当我们需要对定义好的文字样式进行修改时,比如在设计的过程中突然感觉"阅读文本样式"字体小了点,为了优化阅读体验需要增大字号。


1. 单个修改 - 解绑

将文字调整更改为你需要的大小或字重,此时只对单个文本修改,不对其他文本产生影响,点击解绑,便可与定义好的样式分离。


2. 整体同步 - 更新

将文字调整更改为你需要的大小或字重,样式名称后会出现 "*" 星号,此时代表未保存,且更新按钮激活,点击更新按钮则所有使用该样式的字段都会更改,整体同步更新。




3. 组件

组件是将元素定义为标准化可复用的集合体,对组件进行规范的命名,形成高效设计的KIT组件库。


(1)文本组件

选中我们需要定义的文本字段,注意!根据实际应用场景选择合适的文本对齐方式,否则修改字段信息是会出错。这里文本选择左对齐,点击 「创建控件」- 按照层级规范命名,选择从左往右布局 - 点击 「覆盖层」即可对文本字段内容进行修改。




(2)标签组件


1. 单个标签

当设计完标签后,对标签创建组件。依次选中便签中的文字“LIMIT”、“2000份”,依次将文本选择左对齐,步骤同上。将整个标签打组,点击 「创建控件」- 按照层级规范命名,选择从左往右布局(这里注意!从左往右布局表示标签在更改字段信息后,便签左边固定不动,从左往右自适应) - 在覆盖层修改文本字段信息,库存标签组件自适应。




2. 标签修改           
         

如果我们觉得这个库存标签设计的不满意,或者还需新增倒计时标签、已售标签,那怎样又该怎么做的?


第一步:这时我们新建一个Sketch文件,命名为「 *** KIT 组件库」。选中标签图标复制,将图标粘贴到新建文件内,注意!此时需要给图标添加合适的画板,并按规范命名。

第二步:将Sketch文件保存到桌面,拖动到「首选项-组件库」内。

第三步:选中组件,回车可进入控件(组件)页面,可直接调用定义好的控件,进行修改。





Tips:这里画板的作用是

(1)画板是用来规范固定组件位置和大小的,成套系的KIT Library需要建立画板。

(2)画板组件在创建后,调用时只固定大小和边界。

(2)如果只是做较少的界面,较少的复用的样式,就可以不用做画板。




3. 多个标签

当页面需要不止一个标签时,就需要新增标签,通常为左右或上下布局。若直接增加一个标签修改字段,文本标签不会自适应。 和之前操作一致,将新建的标签新建组件后,可实现标签文本自适应。




4. Sketch素材调用

继续添加商品作者组件、价格组件。点击右边覆盖层可修改文本字段。点击文字右边小icon可调用Sketch自带的数据。




(3)容器组件整合

将前面定义好的所有组件整合到容器中,形成可直接复用的商品信息容器组件。


第一步:调用定义好的阅读文本样式,注意!直接拖过来即可,文本框的长度左右拉到合适的左右间距,这里不需要动文本框的高度,否则会出错。将底部容器(卡片)的收起到合适的高度


第二步:选中整体打组,创建组件。注意! 此时选择从上向下布局。


第三步:选中整体,在右侧覆盖层可对文本进行编辑,输入文本字段,此时容器高度实现自适应。




(4)组件的拆解与重构


页面可一步步拆解为模板、组织、分子到原子。原子和分子可组合嵌套重构为组织、模板和页面。




(5)Anima插件


如果上下同时有卡片的情况该怎么呢? 当然,我们完全可以将它们一起定义组件,但有没有其他更便捷,更灵活的方法呢?这里跟大家介绍Anima插件的使用,会使得大家在搭建组件库时变得更加灵活高效。


Anima插件为一款在线自动响应式的插件,其中的STACK与PADDING功能简直是Sketch设计必备,简直逆天。




1. PADDING功能

新建一个文本,当点击PADDING后,会自动生成一个底板,选中底板可对其进行编辑,更改颜色、原角度等。在PADDING输入框内可输入距离上下左右的边距。此时注意文本的对其方式,左对齐一般适合标签使用较多,而居中对齐适合一般的居中按钮,如立即支付、立即报名等。




2. STACK功能

将三个标签分别打组,再全选整体打一个组,点击STACK,选择左右排版和居中对齐,输入你需要的间距。此时Anima插件最牛的STACK功能就是可以双击选中任一个标签,拖拽可改变排列顺序,松手后还可以自适应。




04. 为什么要搭建组件库?


(1)统一(Unified)


1. 团队不同成员或新来设计师之间协同配合,保证输出的一致性和稳定性。


2. 统一的组件库样式,会减轻用户在页面流转间的疑惑感和理解成本,使用户体验得到了提高。



(2)效率(Efficientcy)


1. 减少相同模块的重复设计。一个产品功能流转、页面交互必定会涉及到大量的重复设计的样式与组件。试想一下,如果每一个都重新设计将是一个巨大的时间成本浪费。


2. 如果从产品的全生命周期来看,搭建好设计中台KIT组件库,并与开发进行沟通,能减少前端开发样式,将时间更多的放在功能交互体验和项目推动上,极大提高了效率。



(3)协同(Together)


1. 建立完善的设计规范和KIT组件库,提高组件库优化迭代效率。组件库团队协同自动更新。


2. KIT组件库一键修改,也可通过组件分离功能(解绑)单独对样式进行修改,工作中需要对设计反复调整打磨,可进行批量一键更改,单个模块的单独修改。




05. 什么时候搭建组件库?


什么时候时候搭建组件库?先定义规范都是扯淡!所谓实践才是检验真理的唯一标准,“在设计开始之前就制定设计规范,是不切实际的做法,你会发现做好的规范在实际操作中是无用且白费精力的”摘自《破茧成蝶 用户体验设计师的成长之路》。所以组件库中的组件必定是经过反复修改后适合产品以及可后期可复用的。


















并不是所有的设计都需要做设计规范或者KIT组件库。组件库的搭建本身就是一个耗费时间人力的事情,如果是一次性项目那根本就没有必要做组件库了。是否需要创建样式或组件取决于该样式或组件在后续的工作中是否会被复用或复用的频次。也会减少前端工程师重复开发CSS样式以及后台数据的封装成本。



06. 团队协同


将组件都定义在新建的Sketch文件中,将文件发给你的团队其他成员。步骤同上。


第一步:新建一个Sketch文件,命名为「 *** KIT组件库」,将组件都创建在新建文件内。

第二步:将Sketch文件发送给团队其他成员,拖动到Sketch「首选项-组件库」内。

第三步:直接调用定义好的组件。


共享组件库个人使用 Sketch Cloud,但组件库有更新Sketch右上角会有提示,及时沟通更新即可。



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

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

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

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


情感化设计心理学:用户心理定律及优秀案例分析

ui设计分享达人

将普遍存在的人性用户心理规律运用于设计,增加设计的温度。

近来对用户心理比较感兴趣,去看相关设计资料的时候发现相关内容重复性较高,多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙,在遇到让我们上瘾,持续付出或获得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能为我们的后续的设计吸收。










undefined

undefined

undefined

undefined

undefined

最后想说,设计师的价值不仅仅在视觉,好的设计必是好用好看好懂用户的。跨领域学习补充自己的视野,多思多想,掌握钥匙,开启用户不同的心门。

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

文章来源:站酷  作者:唐小葱

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

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

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


案例分享 PM/UX 必看 [用户体验]

ui设计分享达人


 

讲User Research | 用户研究 之前,有必要先介绍下“用户体验”。这两者是密切关联的。

 


作为一枚互联网老兵,先说一下历史吧。

 

N年前,UX Designer还不怎么流行。

 

随着乔帮主iphone4的横空出世,惊为天人,彻底改变了整个手机生态。于是在中国市场,各种热钱涌入,到处都是创业公司(start-up),各类APP纷纷孵出(我在上海)。这是整个移动互联网行业野蛮生长的年代。公司那么多了,那么UI,iOS开发,Android 开发等等都是供不应求的。

 

 

当然,那么多创业公司,90%都会在一年内,在天使轮的阶段死掉。能活下来的,都是壮士!现在你看看你手机上装的啥耳熟能详的APP,基本也就是那些了。

 

题外话:我当时的公司楼上是一家知名网游公司。某天我很快乐(KU B)的去上班(Make Money),结果就看到新闻说那家创始人CEO昨天半夜心脏病发,人没了。隔天就看到他家公司门口贴讣告了。(此处默哀!)创业不易,真心能活下来的都是壮士!

 

野蛮生长的年代,对于岗位要求不会那么精细。做UI的,最好你什么都会,十项全能。平面/手绘/App UI/ Web UI/H5/交互/动效/前端最好也懂一些/其他。。。


那时候少有交互岗,因为交互岗通常会被产品岗,或者UI岗兼了。但随着这些年WEB/APP越来越成熟,用户对于体验的要求越来越高。另外,随着各类海归人才带回来的国外先进设计理念。各路大中小厂对于UX交互也就越来越重视。

 

于是,就有了UX Design | 交互设计的专门岗位,有些也叫User Experience Design | 用户体验设计,在互联网行业,两者基本一个意思。

(我们这里不讨论用户体验的五个层次,战略层、结构层、表现层之类的。这些太理论,大概知道就行了,多说我也困。真要硬掰,那交互设计实际算是用户体验中的结构层。但在国外专业文献中,UX Design=User Experience Design。不要硬刚。 :P)

 

人类总是情绪化的,总是对他们世界里的产品做出情绪化的反应

-艾伦·库珀,Cooper公司总裁,Visual Basic之父

 

 

一.什么是 User Experience | 用户体验?


通常来说,“用户体验”就是人们在使用产品时候的感受。用户体验并不仅限于互联网行业,各行各业都有。


用户体验更关注的是人和物的交互(Human-Objects Interaction)之间的联系。


“物”在互联网产品中的应用可以是Web,APP,System等。

 

举个生活中的例子,迪斯尼。

迪斯尼,娱乐行业吧?但它更是一家彻彻底底的体验公司,极其注重体验管理。


迪斯尼乐园为小朋友们,大朋友们筑造了一个梦。迪斯尼的体验管理,就是从造梦这个目的出发的。


对于服务人员、演职人员的要求,干净、礼貌都是最基本的。


迪斯尼对演员的要求是,你不是演米老鼠,你就是米老鼠。用户体验细致到如下:

只要有宾客在,演员就不能把头套摘下。之前有新闻说演员中暑了,也坚持不取下头套。(这里我们不讨论劳工权益之类的问题)因为不能毁灭孩子们的梦。

在同一个视野里,不能有两个同样的米老鼠。因为对于孩子来说,米老鼠只有一个!

全世界演米老鼠的演员,都要苦练签名。因为对于孩子来说,全世界只有一个米老鼠,签名当然是一摸一样的。


这只是演员,还有其他工作人员,还有工作以外的服务。此处不再延申讨论了。


 

二.什么是 User Experience Design | 用户体验设计(即UX Design | 交互设计)?


用户体验设计,顾名思义,就是为产品/服务设计一个良好的体验。用户体验设计同样并不仅限于互联网行业,各行各业都有。

 

举个生活中的例子,麦当劳的打包袋设计。


传统设计是这样的。

汉堡薯条什么的全部装纸袋,没有提手,每次都捏到我手指抽筋。饮料再另外装个塑料袋。

一个捏,一个提。其实是不舒服也不方便的。

 

用户体验好的设计可以是这样的。方便快捷,节约资源,解放手指。

(gif动图,刷新页面重播)

 

我们这里想说的用户体验设计,特指互联网行业。


早期的Web页,几乎就是个静态网页,就提供些信息展示。那时候用的还是asp, php, .net技术,快捷点的话有个模板套套,新闻/产品就能后台维护了。


从大概2010年以后,Web就开始越来越复杂了,APP也开始越来越精细和规范了。这对于交互的要求就越来越高,需要有一个良好的用户体验设计。

 

举个APP的例子。

淘宝最近对“确认收货方式”做了优化(大致在2021.9),不知道你发现了吗?


淘宝购物时,首先,在买东西付款的时候,就需要输入第1次支付密码。


最后,在收货确认时,

Before: 原来,还需要再输入第2次支付密码。

Now: 现在,只需要点击“确认”就行了,不需要再输入一次支付密码了。此次优化,就是简化用户的操作,提升用户体验。

 

如下图为最新优化后的截图:


 

如图,

Before: 原来,在Step 3中,原来还需要再输入第2次密码。

Now:现在,在Setp3中,直接从Setp3——>Setp4.


三.为什么UX Design | 交互设计很重要呢?

 

产品成功与否,涉及到太多方面了。战略决策、产品、内容、用户体验、技术、运营、服务、竞品情况,资金投入、运气等等,缺一不可。而用户体验/交互是其中重要的一环。


专注于用户的交互设计,大大增加了项目成功的机会。因为产品是给人用的,尤其是互联网产品,用户不会因为产品是知名品牌,就坚定不移的支持它,买它,用它。


要是产品不好用,那放弃它,也是迟早的事情了。


毕竟,能让大家都喜爱的,还不管怎么样都爱到死的,也只有RMB人民币了。

 

 

四.什么是 UX Designer | 交互设计师?


 

交互设计师,需要通过调查和分析等用户研究方法来设计产品,或者对产品做优化改进,以保证用户能有一个良好的用户体验。


 

五.UX 和UI的区别?


UI,纯粹的UI,通俗来说,就是负责好看。把产品做好看了,做精致了,让用户看得赏心悦目,心情舒畅。这是美学意义上的工作。

 

UX,通俗来说,就是负责好用。让整个产品流程简单又便利,用户使用产品不会有停顿和疑问,让用户使用产品的感受非常好。最终目的是为了增加用户的粘性,提高产品的流量,促进产品的转化率,为公司带来直接或间接的收益增长。

 

UX是产品中的重要一环。

 

当然,在实际工作中,如果产品——长得好看+体验好。那就是王者~

这也应该是做产品的要求和标准,也应该是设计师对自己的要求和标准。

 

 

举个两者结合的例子,摩拜单车。

(虽然他欠用户押金,虽然他已经没了,成为了美团单车。但是他的故事还是可以讲一讲的)

 

设计方面,

摩拜单车的联合创始人王晓峰(负责具体的研发、运营及市场工作)回忆当年做摩拜单车的时候,首先考虑的是产品和服务要让消费者有面子。


前期他做了很多市场调研(看,用户研究),当年在校园外骑车的只有三种:除了专业骑赛车的,就是蓝领工人和老年人。


想让白领阶层都愿意骑自行车,就必须要让他们觉得有面子。如果让一个白领,骑着五花八门,甚至还叮当带响的自行车上路,那是很没面子的,这种生意一定会失败。


于是,摩拜就设计出一辆金属感十足的橙色自行车,好看又酷炫。

 

用户体验方面,

摩拜单车能够提供给用户的体验一直有着不错的口碑,比如车身结实、开锁方便、损坏率低。但是,在夸赞的后面,用户们往往会补刀:「好是好,就是太重了。」(第一代重量为25公斤,是普通自行车重量的2倍。)


于是,为了改善用户体验(看,基于用户反馈。又是用户研究。),第二代摩拜单车在确保安全和耐用的前提下对每个零件减重,整车仅重 15.5kg。比于第一代单车「减重」了约 10 公斤。


这还仅仅是车身重量,其他各方面,轮胎,锁,链条,车座等等,全部做了优化改进。此处不再延申讨论。

 

 


回到做WEB或者APP的设计上。


中国的互联网行业并不羞于抄袭对手,现在产品同质化这么严重,靠单纯的产品创意早已经无法取胜了。


现在产品更多的核心优势是ABC——人工智能(AI)、大数据(BIG DATA)和云计算(CLOUD)。我们顶尖的算法工程师们(Data Scientist)好不容易对数据做了识别、分析和精准有效的输出。


结果在交互这一环没做好,用户找不到,看不懂,不会用这些产品/内容。你做设计的良心会不会痛?


 

六.用户体验设计就是需要“以用户为中心”(user-centered)而设计


不要拍脑袋决定,不要自己YY。

不然只能设计出一个你自己想要的,或者是你老板想要的产品。

 

举个反面案例:生活中的例子,厕所标识。

 

用户体验—— 正常

这张图,好理解吧,厕所标志。就算右边那个清朝的个性了点,那也是设计得不错,能看懂。


 

用户体验—— 差

这张图,额。鸡?让我想想,哪个是公鸡,哪个是母鸡?只要我努力辨认,我还是有机会成功上厕所的。


 

用户体验—— 极品差

这就是设计师自己YY的结果。


这张图,这都是什么玩意儿?大象?长颈鹿?什么意思?设计师,你给我出来,你信不信我打不死你?


这样的厕所标志,我猜都猜不出来,我只能跑到厕所门口张望,当个女流氓,看看厕所里的坑位是什么样的,我才有指望上厕所。

 

好了,那位设计师现身说法了,他的灵感源于动物习惯,大家弄不清楚的原因是他们不了解动物的具体习性。


长颈鹿在嘘嘘时会张开双腿,这标志着女厕所,而大象则用象鼻喷水,这标志着男厕所。他的灵感在大部分人看来太牵强,因为一般人对于这些动物习惯一无所知,用大象和长颈鹿来分辨厕所之间的区别是不是很无语?


这设计师就光顾自己玩创意了,自己YY。厕所是为了给大家带来方便的,好的设计创意是一回事,但最大的问题也是要方便众人使用的。

 



举个正面案例:APP的例子, AR(增强现实)。


现在AR技术已经相对成熟了,导航,家居,翻译,试妆,试鞋,地球仪都有AR。

 

拿AR试鞋举例子。

Before: N年前,AR试鞋还是把鞋子投到地面上,看个大致效果。(左侧Before截图大概是我3年前截的)

Now: 现在,AR技术做强了,AR试鞋就直接投到脚上,能够看到鞋子上脚的效果。对用户而言,体验更好。对商家而言,转化率会更高。

 

好了,用户体验就讲到这了,是不是很轻松,看看故事就有些体会了?


 

最后,

今年是乔帮主逝世10周年,缅怀下!原来,他已经离开这么久了。

 

I skate to where the puck is going to be, not where it has been. 

- Wayne Douglas Gretzky

这句话简单来说,就是预判形势,提前准备。

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

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

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

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



B端产品界面高屏效初探

ui设计分享达人

背景

在 B 端设计领域中,不管是内部用户、产品、设计师、开发,还是外部产品、设计师等,总能听到关于界面「屏效」方面的诉求或吐槽。


undefined


「屏效」狭义理解是「界面过度留白」;广义理解,「屏效」源自谐音“坪效”,指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。


为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感,于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开,将实践过程中反复验证有效的设计策略沉淀成设计手册,同步将部分功能进行工程化,确保可以开箱即用。


undefined


探索阶段-为谁在何时何地设计

用户声音|不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%;认为提升屏效对体验有提升的终端用户占 50.6%。


undefined


外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里,其中就有 2 点提到关键字「效率」。


undefined


通过了解不同用户和产品类型发现,不同的用户在工作场景的产品使用中有着相似的特征:


undefined



案例收集|发现问题,大胆假设

纵观 B 端产品界面,发现普遍问题和收录在解决屏效问题上实践得比较好的案例,为了逐步突破问题,选择以数据产品中覆盖率极高的表格为设计切入点,通过线上跨产品多端地毯式的体验走查,发现表格三个层次的问题:


undefined


视觉、交互层在无需理解业务场景和用户目标的情况下,都较容易发现,属基础问题,但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设:为提高屏效,可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度,可以通过提高信息密度;交互层为提高操作速度,可以缩短当前手势到目标之间的距离;信息层为提高信息被理解的速度,可以通过重组织等方式。

基于假设,我们进行了进一步的桌面研究,查阅论文等书籍,寻找设计理论的验证和指导。


竞品分析|寻找实践证据,谨慎验证

我们知道视觉上界面留白过多(过疏会增加滚屏成本,过密因易串行而影响阅读效率),以表格「行高」为例,探索各表格在字号、字高和行高的关系,因为不同字体的同字号实际像素高度会有差异,因此选择的是字高(即文字垂直高度的视觉大小)而非字号或字行高,决定留白的两个重要因子是字高和表格行高,以次推演,界面元素和元素间距的留白关系,探究在视觉层怎样的留白率能保证甚至提升屏效。


undefined


以数据产品中的表格为例,通过直接和间接竞对的方式,分别从数据的查阅(视觉)、分析(交互)维度进行功能点和设计细节上的比对,来看看优秀产品是如何解决屏效问题。

直接竞对:内部用户口碑较好的产品 A、B外界竞对:同领域的 Tableau、网易有数、金山、微软表格;间接竞对:谷歌邮箱、AntD 等的紧凑主题的常规列表(一维表格)


undefined


通过竞品分析可以发现,数据分析领域的表格留白率普遍较低(信息密度高),尤其是金山和微软的电子表格,其次是同类面向数据用户的 Tableau、网易有数,而谷歌邮箱等工作台常用的常规列表紧凑版本中,留白率和数据领域的电子表格不相上下。


紧凑版的使用场景也常常是面对数据量巨大的信息呈现,通过切换紧凑主题,提升信息的快速浏览,而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大,而在实际案例实践中,也已经将表格行高优化至 30px,克制的使用留白。


除此外,竞品其他层次的设计也做了比对,总结来看整体设计做法:高密度、少屏数、少留白等。


文字陷阱:中英文字高不等于字号


举个容易犯错的竞品参考是,谷歌在紧凑版主题下字号 12px,列表行高是 28px,但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字体,实际字高只有 10px,而 AntD Table 的语境是中文字偏多,实际字高有 12px,所以留白的差异在于一个是 18px(28-10),一个是 16px(28-12),这也是为什么决定决定留白的两个重要因子是「字高」和表格行高,而非「字号」和表格行高,进一步推演,决定界面留白的是「元素视觉高度」和「元素间距」。


论文查阅|寻找理论证据,谨慎验证

研究表明,低密度认知负荷低,但高密度任务完成率高,用户更喜好

参考资料:论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息,用户需要需要阅读(视觉),思考和理解(认知),需要点击按钮、操作鼠标和打字(行动),在人机工程学中,统称为负荷。即认知(记忆)负荷、视觉负荷、动作负荷,即分别对应用户体验设计的三个层级,信息/视觉/交互。而负荷所花费资源从多到少依次为:认知 > 视觉 > 行动。


认知负荷,举个例子,看了但不一定懂了。你是否有这么一种体验——刷抖音,虽然很多(信息密度小,输出效率低),但可以一直刷下去并且刷很久;而看一门 C4D 教学视频,即使就短短十来分钟(信息密度大,输出效率高),但是却要看上半天。因为刷短视频时,你的输入效率远高于作者的输出效率,而看一门 C4D 教学视频时,你的输入效率远低于作者的输出效率。可是,输出效率是客观的,输入效率是主观的。如果输出效率很高,你可以通过提高自己的输入效率(比如让自己成为 C4D 专家)来跟上作者,从而变强;否则输出效率很低(信息质量低),你的输入效率很高(很专业),信息于你而言都是无效的。


假设负荷总量不变的情况下,那么以上三类场景界面需要对用户负担分配大致如下,官网品宣类需要低认知成本,低视觉负担,视觉要求高,用户才会被吸引过来阅读,甚至酷炫的交互更能增加互动体验而带来的趣味感,比如苹果官网,信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息,而 B 端应用因为是专业使用,首先认知方面随着员工的专业度提高而降低,因此可以通过提高视觉负担,来降低行动负担,进而减少操作用时,当然最佳情况是三个维度能整体降低负担,让总负担降低,就需要更多设计巧思了。


undefined


面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中,设计师常用的 Top 3 做法为:【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。


undefined



实践阶段-如何设计

通过以上的探索,我们可以确定的是,B 端产品面向专业人员的工作界面设计中,提高屏效可从视觉、交互、信息三个层次进行,视觉层-高密度,即提高屏幕信息密度;交互层-低跳转,通过减少页面跳转、手势与常用操作的距离等;信息层-有效性,通过重组织或辅助信息帮助用户理解,甚至提供帮助手册等以提高用户专业能力。


undefined


基于以上的总结,对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,寻找运营机会点。


如下表格经过高屏效策略优化前后对比图,优化前相同维度下不同人群数量的对比需要视线来回跳动比对,而优化后的表格内容,更符合用户看差异场景下分析目的数据查阅,视线锁定相同维度,即可快速比对数值大小。


undefined


下面以视觉、交互、信息三个层次解剖设计过程背后的思考。


视觉层|高密度-克制的留白

眼动理论:研究表明,人眼最小可视视角 0.3 度,水平最大眼动舒适转动区 30度,垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px,水平视野舒适眼动宽 1200px,垂直视野舒适眼动高 2200px。参考资料:论文《基于眼动交互的用户界面设计与研究》


undefined


如图,缩小表格行高的同时,目标信息之间的眼动距离随之缩短,在眼动舒适区内看到更多信息,便于信息的高效获取。


undefined



交互层|低跳转-高频信息前置

理论基础:菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。参考资料:菲兹定律


undefined


表格单元格借助交互状态,增加悬浮出现的信息组件,前置显示目标单元格明细信息,同时通过交互出现的指示器辅助行列信息的获取,高频操作考虑手势位置放置,缩短与操作目标的距离,以提高整体操作效率。


undefined



信息层|有效性-信息重组织

理论基础:交互设计四大策略「组织、删除、隐藏、转移」参考资料:《简约至上》


undefined


用户为了对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,但内容的重组织方式让两数据行需要频繁点击滚动条来查看,根据用户目标,将关联性大的数据放置相邻列(即将要对比的人群放置列头),即可快速查阅,减少眼跳距离。


undefined


结语

设计趋势中常见的大字体大留白界面,但在 B 端场景中,面对紧张的工作节奏,时间和注意力变得尤为可贵,相对而言,基于复杂度守恒定律, B 端信息量大且高频访问的产品中,「用得快」要比「看得美」更重要,「高密度」「低跳转」诠释的即是「空间换时间」,少一次点击,少一次跳转,少一份等待,就多一份时间和效率。

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

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

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



从体验层面出发,分析App搜索框设计的要点

ui设计分享达人

搜索动作在App中依靠搜索框来完成,好用的搜索框很大程度上决定了产品的搜索体验如何。大多数搜索框存在相似性,但真正好的搜索框会在细节上为用户带来差异化的反馈,带来很暖很贴心的感觉。


1、搜索框结构分析 

从体验层面上看,一个良好的用户体验需要具备完整的流程。搜索框的使用流程可以简单划分为:

使用前-找到搜索框入口;使用中-点击输入内容;使用后-展示搜索结果。

其中使用中会涉及到跳转和输入两种不同的状态,在下面的文章里我会展开来分析。


2、搜索框的常见类型 

回想常用App的搜索框,好像它们的样式看起来差别并不是很大,但其实每个搜索框的细节都是经过精心设计的,下面总结了几种常见的搜索框类型。

搜索图标

页面上只提供一个放大镜图标,通常需要用户点击图标后才能跳转到搜索页面,例如小红书就将搜索图标放置在页面右上角。

基本搜索框

基本的搜索框组成包括放大镜图标、文字提示、输入框三部分。微信主页的搜索框采用了这种基本形式,文字提示为搜索,简洁清晰。

文字提示类搜索框

和基本搜索框的唯一不同的地方在于,这类搜索框中的文字提示部分不再是搜索两个字,而是根据产品需求支持预置多组文字提示并在搜索框内循环展示

▲ 在大众点评的顶部搜索框中,文字提示部分循环展示了三组不同的内容,引导用户快速检索到好吃和好玩的。

功能类搜索框

之所以叫做功能类搜索框,是在文字提示类搜索框的基础上根据产品功能的需要额外添加了常用的功能性图标,如扫码图标、拍照图标、语音图标等,赋予搜索框更多的功能属性。

▲ 经常使用豆瓣看书评的同学可能会注意到豆瓣主页的搜索框中有一个扫码图标,点击之后可以快速扫描图书条码或二维码,快速识别书的内容,省去检索的麻烦。

▲ 淘宝搜索框的组成更复杂,除了支持扫码外还有相机图标,方便用户拍照识别商品。 


3、搜索框设计状态分析 

使用搜索框搜索的过程总体可以分为四部分:搜索前、点击搜索框、输入中、搜索后。设计分析过程中我们要先理清整体的搜索流程,再考虑每个状态对应的交互细节及反馈,这样才能保持逻辑清晰。

搜索前-默认状态

位置

大多数搜索框出现在页面顶部,作为一个大的触摸目标更符合用户的认知习惯,更容易被用户发现和使用。

▲ 在苹果自带的地图应用中,搜索框放在页面中部偏下的位置,相比于顶部搜索框,这样的位置分布更方便用户单手操作。

样式

搜索前的状态除了前面讲的几种常见的搜索框样式外,有些产品会直接在搜索框增加“搜索”按钮。

▲ 阿里系产品包括淘宝、支付宝、闲鱼等主页搜索框都额外添加了“搜索”按钮,相比于点击搜索框再点击键盘搜索内容推荐,直接点击按钮简化了搜索流程。

点击后-获取焦点

搜索框

点击搜索框后,框内的放大镜图标会消失,出现闪烁的光标引导用户输入,搜索框右侧会出现“取消”按钮。

▲ 点击大众点评的搜索框后,搜索页会出现三个选项,点击每一个选项,搜索框内的文字提示都会改变,有效帮助用户提升搜索准确度,虽然是很小的点但做的很用心。

键盘

点击搜索框后会弹起键盘,在不输入内容的情况下,点击键盘自带的“搜索”按钮能查询搜索框中推荐的内容。

搜索页

搜索页的内容通常包括历史搜索、搜索发现、热门推荐等版块,记录用户的搜索行为,推荐目标商品或服务,提高转化率。

▲ 豆瓣将最热门的内容都展现在搜索页中,包括实时更新的热门书影音榜单、热门小组、热门话题等,为用户提供有效的引导。

关于历史搜索我们还可以继续深入分析,思考这些记录怎么排序、最多显示几条记录……

▲ 网易云音乐的历史搜索最多可以保留10条,采用横向滑动的手势交互可以节省屏幕空间。根据内容长短一屏一次可以显示2-3条记录,这会导致排在后面的历史记录不容易被用户快速发现。

▲ 淘宝的历史搜索可以容纳更多的数量,当搜索记录超过两行时会有一个小的展开按钮,点击按钮可以查看早期的记录,这样既能节省屏幕空间也能最大化容纳历史记录。

搜索中-输入内容

删除/取消

当开始输入内容时,在搜索框的右侧会出现删除图标,方便用户一键删除输入的内容,这里要注意区分删除和取消的区别。

▲ 在淘宝中点击“删除”图标,页面会返回到上一级也就是搜索页;

▲ 点击“取消”按钮,页面会直接返回到主页也就是搜索前的状态。

搜索提示

在用户输入内容时,产品会根据用户输入的内容提供相对应的搜索推荐,这是搜索框的必备的交互反馈。

通过合理的词条推荐能极大降低用户的思考时间,提高搜索效率,同时省去再次点击搜索按钮的流程,降低用户的操作步骤。

字数限制

目前我所知道的大多数App在搜索时都没有字数限制问题。

回顾一下搜索使用场景会发现用户在搜索框内输入任何内容都是有可能的,尽量不要约束用户的输入内容。无论用户输入多少内容,点击都可以完成基本的搜索操作,这样整个流程才完整。

▲ 在百度中输入过多字符时,会提示查询限制在38个汉字以内,多的字符会被忽略,虽然给出了提示但并未打断用户的操作流程,可以让用户继续完成搜索。

搜索后-展示结果

符合预期

搜索的理想状态是搜索到的结果符合用户的预期,满足用户的搜索需求,并把最吻合的搜索结果排在前面,为用户带来清晰的结果展示。

智能提示

智能提示是对用户输入内容上的一种提示或纠正,如果用户输入的内容有问题或不够标准,在搜索结果中会能给最贴切的搜索结果。

▲ 在淘宝中输入“shouji”或“souji”,淘宝会根据拼音给出“手机”的搜索结果,但仍保留原标签,方便用户再次点击搜索;输入“手ji”时,会直接给出“手机”标签,这种差异化的反馈能更好的为用户服务。

无结果提示

如果没有搜索到用户输入的内容,搜索页会显示一个空状态,提示用户没有搜索结果。关于空状态如何设计可以看我之前写的一篇文章——如何做好「空状态」设计?来看资深设计师的总结!详细分析了空状态的设计方法。

▲ 相比于直接显示搜索无结果的状态,拼多多的搜索结果首先会标明相关商品较少,然后将搜索内容拆分成不同的标签进一步引导用户来发现内容。

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

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

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

掌握这20条用户体验设计原则,助力设计成长!

ui设计分享达人

文章整理了20条用户体验设计原则,希望通过这份简洁易懂的合集能够让你对用户体验领域有一个初步的概览和了解。

1.以用户为中心 

这是最常被提及的用户体验设计基础,当涉及到产品设计决策时,提醒我们要学会使用同理心,而不是仅凭个人的想法或意见。

真正好的用户体验设计是为用户量身打造的,用户的意见、痛点、愿望、偏好和需求对产品来说至关重要,所以在项目初始阶段需要投入大量的时间和精力去了解用户。

用户体验研究重点是了解用户,为接下来的产品设计做准备。以用户为中心的设计理念是设计师迎合用户的需求,区分了设计任何人都可以使用的产品和为目标用户设计的产品。


一款特定的产品需要面对不同的目标群体,前期研究中需要了解目标人群需要什么并在产品中反映出来,这是针对性很强的设计研究。 


2.了解信息架构

可能很多人对信息架构的定义很模糊,这里举个例子来具象说明一下信息架构的含义。

例如在一款产品中,如果把所有内容都堆到一个列表或页面中,可能我们将无法使用这款产品,所以我们看到大多数的App和网站都包含很多的导航和页面结构,按照内容重要程度有序地来组织内容。

信息体系结构的最终目标是帮助用户理解他们在看什么,并帮助他们找到需要寻找的内容。

信息架构在制作线框图或原型之前完成,因为它是产品的基础,有助于设计师考虑什么功能是最重要的,哪些是用户最需要的以及哪些次要内容可以隐藏起来等。

这种结构与产品的导航设计密切相关,有助于将用户引导到正确的位置。导航和信息架构都试图让用户以最少的认知努力来完成操作。


信息架构的设计不当会造成重大故障甚至可能危及整个产品。如果用户在使用产品时找不到任何想要的内容,点击任何元素都没有反应,会给用户带来很糟糕的使用体验。 


3.考虑使用场景

没有场景,任何设计都很难生效。设计师在项目开始时会投入时间去了解用户面临的问题以及围绕这些问题的背景。


这条原则有助于设计师考虑还有哪些因素会影响用户和产品,很多产品设计会为用户提供一些有助于消除使用摩擦的操作提示。 
例如在设计表单时,会尽可能的添加 输入提示,最大程度地减少用户出错的机会。 


4.了解一致性及其重要性

保持一致性是用户体验设计的关键原则。拥有一致设计的产品可以更快地被新用户接受,因为用户不需要再次学习如何操作,他们会回忆起之前的操作习惯并将其作为指导,这也解释了为什么同类型的产品例如电商类App页面设计的很相似。

保持一致意味着在需要时可以重复使用某些UI组件,并在整个产品中保持一致的行为。例如当点击或悬停在按钮上面时,所以按钮的状态应该是一致的。


从逻辑上讲,产品越大,这种一致性会变得越来越有挑战性,这促使许多设计团队创建自己的设计系统。一款产品的学习曲线越长越陡,放弃的用户就会越多,在市场营销中,这通常被称为销售漏斗中的漏洞。 


5.给予用户适当的控制权

这条原则意味着用户希望能控制产品,无论是完成任务还是定制满足他们需求的内容。

在设计过程中一直试图给用户尽可能多的控制权,例如允许用户撤消操作、更改设置、自定义UI外观、创建快捷方式等中。


需要注意的是,当提供太多选项或用户太依赖于自己的选择时,用户可能会不知所措,造成所谓的 选择悖论。所以在设计时要了解用户乐于掌控的余地,不能让用户感到使用压力。 


6.把可用性放在首位

在整体上看,建立高标准的可用性是为用户做的最好的事情,有助于检查用户是否能够轻松地完成任务、产品是否正常运行以及是否完成工作。


可用性的重要之处在于要理解可用性的灵活性和重要性。 


7.了解用户测试

结合可用性的概念,我们还要进行用户测试,这是设计师对工作进行测试的方式,对新的产品来说至关重要。

当设计思想和理念被转化为有形的原型时,设计师要观察真实的用户是如何与之交互的,可以通过许多不同的方式例如简单的A/B测试到全面的审核测试等来实现。


测试通常分几轮进行,团队在向原型添加更多细节之前验证每个步骤。随着测试结果的出现,设计也随之发生了变化。 
如果发生更改,将会进行新一轮的测试,通过这个过程,设计团队可以改进他们的工作,直到达到可用性标准。 


8.少即是多

在创造力和创造独特事物的渴望中,很多设计师很容易无意中弄乱产品界面甚至产品本身。

功能过多的产品可能会失去焦点并削弱吸引力。具有太多元素的页面会变得充满视觉冲击,但也会给用户带来负面体验,在设计时要学会克制并优先考虑真正关键的部分很重要。


另外手机端的屏幕空间非常小,创建一个有效的布局,想出巧妙的方法来隐藏次要元素并创建一个令人愉悦的界面需要付出很大的努力和创造力。 


9.视觉层次

视觉层次是向用户传达产品中元素重要性的方式。良好的层次结构有助于用户视线在界面上移动,并立即了解最重要的内容以及这些内容与其他部分的关系。

视觉层次结构与布局设计紧密相连,帮助用户消化所接触到的信息。


创建层次结构从概念的草图开始,一直持续到完成设计。例如发送按钮通常会用绿色而是不红色,而次要按钮会显示为灰色或与背景混合,并显示“撤消”或“返回”。 


10.了解用户的心智模型

为用户创建心智模型是尝试使用同理心的一种方式,是帮助设计师从用户的角度看待问题的工具。

正确使用意味着用户无需投入精力就可以使用的直观产品,而错误的思维模型会导致一些问题,例如界面混乱、高昂的交互成本。


为了匹配用户的心智模型,可以采用多种不同类型的研究方法,常见的方法包括 卡片分类、决策树、对用户行为的密切观察,或者使用大量的数据来建立关键用户的心理模型。 


11.设计中的讲故事

讲故事的方式更加直观,利用图像、视频、动画和文本等元素让整个页面与用户对话。用户体验设计中的视觉叙事是为了唤起用户的情感,给用户留下持久的印象。


想出一种可视化的方式来传达复杂的内容具有挑战性,但同时也是有益的,可以更好地接近用户并将其作为提高产品可学习性的方法。 


12.不要直接跳到高保真原型上

高保真原型是设计项目的最终目标,但是直接使用原型软件不断添加各种页面细节是错误的操作。


避免直接出高保真的主要原因是因为这样做的成本会更高。在没有任何用户研究和测试的情况下,一款产品无论具有多少的细节都有可能面临不符合用户使用的情况。 


13.可访问性测试很重要

不仅要检查关键用户是否可以流畅地使用产品,还应该检查其他所有用户例如少数群体等是否都能够正常使用产品。


事实上,残疾人和其他用户一样需要数字产品,但很多产品在设计时并没有考虑到这些群体,但这也提供了一个机会,为所有用户提供一个可以依赖的好产品。 


14.熟悉并在用户体验设计中使用

我们知道为用户提供一致的设计有助于克服学习曲线,同时为用户提供熟悉的东西也有助于缩短学习曲线。

例如,大多数用户都会立即识别某些UI组件(汉堡菜单/单选按钮),这意味着他们会本能地知道这些组件代表什么意思或者如何操作。

使用用户已经熟悉的东西并不一定会让产品的独特性消失,有经验的设计师会利用这种熟悉性来来创造一些独特的设计,同时也是直观的,不需要太多努力就可以使用。


设计一个完全不依赖熟悉度的产品可能是具有风险的行为,因为它很容易让那些不熟悉产品的用户超负荷,形成巨大的学习曲线,增加用户负担。 


15.了解交付成果的力量

可交付成果是可以在整个团队中交付的内容,包括用户画像、心智模型、用户旅程以及线框图和原型等,是一种有形和具体的表现。

可交付成果是用户体验设计原则,可以帮助设计团队和其他利益相关者理解和交流概念。

▲ 用户画像可以捕捉理想用户,并提供可以相关联的真实面孔,是一种指导设计的工具。用户旅程图帮助设计师了解用户完成任务需要的具体步骤,有助于确保这些步骤确实可以轻松执行,并且整个过程很流畅。


这些交付成果服务于关键功能,设计师需要在整个项目中都依赖它们,不断转换为用户可以与之交互的真实有形的设计。 


16.专业的原型设计工具

用户体验设计的过程不是线性的,而是一个循环。无论创建什么样的产品,都需要专业的原型工具,将基本框架放在一起,然后添加可能需要的所有细节。


从逻辑上讲,设计团队的具体需求会因团队而异,但一些关键功能例如团队协作、需求管理、交互设计和开发移交等,对于大多数团队来说是必要的。 


17.精心管理产品需求

一切都从收集需求开始,然后慢慢创建关键列表。虽然简单地列出一个列表听起来很容易,但随着项目的进展,要保持列表的条理性确实是一个挑战。


除了创建需求和检查复选框之外,还有一个问题就是调整需求,需要从 设计、技术和业务各个方面来处理各种需求,还要确保这些需求之间没有相互矛盾。  


18.了解移动和网络产品之间的差异

网页端和移动端产品最明显的区别是屏幕尺寸,这意味着所有的视觉层次结构和信息架构都将将从Web到App发生变化。


移动端产品会有更多影响设计决策的因素,例如设备的操作系统、使用产品的环境等。了解移动端产品在 导航设计、用户流程等关键方面的差异是至关重要的用户体验设计原则。 


19.利用UX设计模式

几乎所有的产品都专注于设计模式,它们可靠、易于查找并通过减少设计时间来为项目增加实用性。


▲ 当用户在谷歌搜索中输入的内容有问题时,谷歌会提供一个相关的搜索提示,辅助用户进行精确地搜索,解决用户使用不同方式在搜索栏中传达他们正在寻找的内容的问题。 


20.使用合适的工具才能有效

拥有单一的内容来源可以为团队带来清晰性和高效性,如果线框和原型分散在多个渠道中,这种内容的集合就会变得很难达成。


通过合适高效的工具能够避免产品在到达终点时遇到各种各样的可用性问题,防止产品细节没有表现出来或者被忽略。 


最后

通过这份用户体验设计原则的合集希望能够让你对这个领域有一个大致的了解。

没有人知道用户体验设计在未来会引领我们走向哪里,不过我们可以确定,无论它带给我们什么,肯定都会很有趣

慢慢来比较快,希望对你有所帮助~

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

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

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

5个方面改善用户体验

ui设计分享达人

当你在一个既定的服务领域工作,但想要进行革新时


1.详细研究当前的用户体验


分析当前的服务体验,解读用户旅程中涉及到的行为,接触点,出现的痛点。构建现有的体验旅程图可以捕捉到服务体验的全貌,立即发现需要重新设计的关键问题,促进组织内部的一致性。对于这种复杂的服务,根据分析结果建立服务蓝图也大有好处,可以捕捉到流程中的关键问题还有不同接触点的关系中的重要方面。

建议:
自己进行尝试,能够有效地发现细节,涵盖分析中的所有步骤。


2.分析服务构建


体验和过程只是服务的一部分:在分析现有服务时,我们也要考虑底层系统是如何搭建组件和动态结构的。只有对系统进行全面理解,我们才能发现连接缺失,精力和资源的潜在浪费和重复。创建一个系统地图有助于让团队成员明确这些问题,讨论潜在的改善机会。

建议:
我们需要将系统中的所有行为者联系在一起,全面理解系统过程,减少重复,弥补差距。


3.设定具体的目标,指导设想


在开始构思之前,花些时间来思考系统和体验的分析结果,并通过重新设计确定自己达到的关键目标。目标可以是横向的(比如 “优化整个旅程中的信息流”),也可以是非常具体的(比如 “入职:从填写表格到热情的欢迎会”)。最重要的是,我们首先要详细了解现状,才能设定目标,制定正确的方法,同时意识到急需解决的潜在局限性和障碍。

建议:
我们也可以将期待体验设定为目标旅程,为体验中的每一步设定一个具体目标。


4.创造新点子和解决办法


提出新的想法,解决旅程中所有已知痛点或系统中的差距,以及抓住有趣的机会。这些想法包括既稍微改进一些特定功能,也可以影响整个服务模式的宽泛概念。在这个阶段,不要限制自己的想法数量,更不用考虑可行性:捕捉每一个想法,与其他团队成员分享,并在彼此的思考之上建立一个新想法。

建议:
快速构思是一种头脑风暴的练习,团队中的每个人都写下他们心中的每一个想法,然后再进行小组讨论。


5.确定最有可能实现的概念


收集所有想法,确定下一步的行动计划。如果项目很简单,我们可以简单地将所有的想法整合成一个重新设计方案,逐步发展。在其他情况下,你可能最终得到50多个想法,对当前的服务体验进行创新,但显然我们不能诉诸于每个想法,那么……从哪着手呢?我们可以建立一个评估矩阵,确定标准,分析每个概念(例如,对用户的价值,实施成本,独特性等),并对它们进行相应的评分。这样我们就可以筛选出最有可能实现的想法,创造较大的价值(这些想法可能是最先开发的)。简略的概念可以很好地改善部分服务,但不会产生较大的影响(容易实现的目标);而较复杂的概念从长远来看会对服务体验产生更积极影响,但需要投入大量的时间和精力。

建议:
我们需要考虑的最核心内容是新概念给用户和组织带来的价值,而不是实施的可行性或复杂性-但这可以根据具体环境而改变。

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

文章来源:站酷  作者:马克笔设计留学

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

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

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

你常常忽略的7个具有破坏性的体验鸿沟

资深UI设计者

若想战胜竞争对手,产品无疑需要在设计上做好提前规划,并时刻树立优化意识,尽量满足用户的体验期望。然而研发团队有时总容易陷入误区,本篇文章里,作者就产品研发过程中可能忽略的、对用户体验具有破坏性的因素做了总结,一起来看一下。

毫无疑问,要想获得出色的用户体验 (UX) 需要在数字世界中保持竞争优势。尽管如此,由于某些关键盲点,改善用户体验的努力并不总能取得成功。如果忽略这些盲点,那么无论预算大小和团队的努力如何,失败都会预先留存在项目中。事实上,如果实施不准确,可能会导致所谓的“经验差距”造成的设计上的损失。

你常常忽略的 7 个具有破坏性的体验鸿沟

上图所示的具体案例:某银行投资了近 50 万美元改进其手机银行应用程序,却导致整体客户满意度下降。其根本原因是金融公司未能发现和预防不同级别的内部经验差距。那么,该如何及时识别和避开这些盲点,以保障耗资巨大的大规模数字化项目的成功呢?

一、即使预算庞大,用户体验工作也可能失败 UX efforts can fail even with huge budgets

在过去十年中,大量研究证实,用户体验对公司市场效率存在优先影响。根据甲骨文的一份报告,如果糟糕的用户体验导致多个业务问题,那么积极的用户体验会增加推荐、保留率和收入,因为 86% 的客户愿意为更好的用户体验支付更多费用。

看起来一切都很简单——只要增加预算和成本,就足以提供最好的体验?但在实际操作中,这并不容易。根据贝恩公司的研究,80% 的 CEO 认为他们提供了卓越的体验,而只有 8% 的客户同意这一点。

其主要原因可以用“经验鸿沟”来解释——这是客户期望的体验与他们从数字服务中获得的体验之间的负面差异。如果体验比预期的差很多,就会产生许多令人不快的后果,比如客户忠诚度下降、大量负面评论,甚至客户决定离开品牌。

在大多数情况下,人们往往无法认识到真正的经验鸿沟。

即使公司的领导和员工觉得有些地方不对劲,他们也往往不明白“要改进什么”以及“为什么要改进”。如果没有意识到某件事,就不可能管理它。

二、现实生活中的例子:行动中的经验鸿沟 Real-life example: Experience gap in action

为了解释“经验鸿沟”可能导致麻烦的基本原理,我想分享一个现实生活中的例子。

几年前,一家知名且受人尊敬的中欧银行开始了大规模的数字化转型之旅。当时,该银行的应用程序的评级为 3.5,并且已经过时。所以,为了实现数字化、提升银行形象,并在不断增长的数字市场中获得竞争机会,管理层打算紧急创建并推出一款现代化的银行应用程序。因此,最初的设计和开发周期为 6 个月。

尽管如此,银行还是花了三倍时间(1 年零八个月)自主构建新应用程序。无论从时间来说,还是从投资预算来说,这都可以称得上是一个重要项目。从项目的范围、所做改进和时间表来看,总成本估计在 50 万左右。

然而,结果完全没有达到预期。新应用发布后,它从之前的 3.5 下降到 2.4,并且因为它没有改进,以至一年后,其评分仍在下降,其用户体验也日渐恶化。

银行尽一切努力改善用户体验,整个团队努力工作近两年,怎么会发生这种情况?

这种情况的产生,正是由于“经验鸿沟”的存在。尽管该银行启动数十名顶级专业人士花费了 20 个月和 50 万来改良产品,但它仍未满足用户的期望。

虽然客户不满意的真正原因是无意识的“体验鸿沟”,但公司往往倾向于通过指责外部环境来解释它。例如市场的变化、竞争对手的活动、创新的出现、消费模式的变化。当然,这也是客观事实,但一家适应性强的公司应该考虑将这些因素用于其增长,而不是作为“替罪羊”。

但衡量适应效果的最重要方式是公司服务在多大程度上满足甚至超过了消费者的期望。没有意识到他们服务和客户期望之间存在差距的公司注定无法适应外部环境的变化。

在某些情况下,公司的行为甚至会导致经验鸿沟扩大到临界水平。这通常会导致目标客户对公司产品和服务的需求急剧下降。

如果我们回到这个例子,似乎管理层对重大改进是否可以成功充满信心,并投入了大量资金和精力进行广告宣传。同时,那些宣传此应用程序现代、创新和友好的广告,激发了消费者的高期望,以至于大大超出了其服务的实际质量。

结果,当产品最终发布时,客户惊讶地发现他们的期望落空了,新应用程序比改良前更糟糕。并且相关的负面评论不仅出现在 App Store 和 Google Play 上,也在社交媒体上大量涌现,人们在推特上不断讽刺该银行失败的数字化项目。

三、对鸿沟的不了解是主要威胁 Unawareness of the Gap is the main threat

接下来,让我们探讨一下数字服务和用户期望之间的鸿沟是如何形成的,以及为什么没有人能够阻止它。

事实上,最大的挑战是大家往往很难注意到这些差距。他们的原因并不明显,并且可以同时存在于各个组织架构之上。此外,它们的影响令人难以察觉,以至于最终会导致意想不到的破坏性后果。最终,直到团队面对产品在市场上的失败,才有人明白原因是什么。

弥合鸿沟的主要困难在于级别越高对经验鸿沟的不了解程度越高。实际上,在组织架构的顶部,通常会找到造成鸿沟的根源。级别越低,离用户越近,员工越能觉察到问题和差距,但他们往往没有权力和能力去消除它们,他们受制于文化。

在这种特殊情况下,售后部门每天都会接到数千个关于产品问题的电话,但由于业务流程分散,他们对此也无能为力。

客户的挫败感变得更加强烈。即使是最简单的日常场景,他们面临的问题也难以执行,但他们从银行员工那里得到的反馈是,他们并不是唯一产生困惑的人,而且目前银行正忙于交付新功能,而不是修复当前问题。

使事情变得复杂的是,经验鸿沟背后的内部流程是由过去促进公司生存和增长的相同机制引起的。该公司受制于过去的成功。就像诺基亚一样,这家全球最大的以硬件为中心的手机工厂,在苹果智能手机引领的软件革命中被彻底击败。

由于任何组织都有惰性,这些机制受到内在信念和价值观的影响,对适应市场和弥合经验鸿沟造成了阻碍。

首先,应该在管理层面解决鸿沟。因此,级别越低,离领导层越远,离客户越近,就越能感受和认识到鸿沟的存在。自然,一线员工将拥有从那些期望没有得到满足的客户那里得到最多的数据。

四、7 种体验鸿沟盲点 The 7 types of experience gap blind spots

主要的体验鸿沟可能是由组织中七个层次(文化、反馈、执行、设计、价值、品牌承诺、情感联系)中的一个或几个盲点造成的。

你常常忽略的 7 个具有破坏性的体验鸿沟

1. 文化鸿沟

在文化层面缺乏以顾客为中心的理念员工无法使服务更接近客户期望导致了“文化鸿沟”。在具有“文化鸿沟”的公司中,有助于以客户为中心的流程和活动都是处于低优先级的,相应的,它们也不会得到相关的资源。

2. 反馈鸿沟

缺乏关于客户期望和他们对产品或服务的体验数据会造成“反馈鸿沟”。在这种情况下,公司可能经常收集数据,但没有对其进行分析,也没有采取任何措施来改善这种情况。

3. 设计鸿沟

即使优先考虑以客户为中心的方法并且收集了大量有关客户期望的数据但在设计能力和方法上仍可能存在鸿沟。拥有合适的专业知识,就可以构建高质量的数字产品生态系统,从而根据客户需求提供最佳服务。

4. 执行鸿沟

这种鸿沟与糟糕的设计执行有关。如果不优先以用户为中心的来设计产品,那么创建最终产品和服务的决策和努力将注定是低质量和低效率的。这决定了公司在数字时代创造有竞争力的服务和产品的能力。

5. 价值鸿沟

如果设计生态系统在 价值金字塔的五个层次(功能、可用性、美学、地位、使命)上不符合用户的期望,就会形成价值鸿沟。

6. 过度承诺的鸿沟

正如我在上述银行案例中所表明的那样,如果一家公司只顾着积极推广其服务,承诺一些产品无法提供的东西,它会导致用户对期望的更大失望。因此,由于广告承诺与现实不符,对该服务的负面评价可能会翻倍。

7. 情感鸿沟

如果品牌传播是纯粹的信息传播专注于功能特征那么就无法与用户形成情感联系。由于人类基于情感做出决策,因此基于情感构建服务价值会对客户期望和最终用户体验产生积极影响。

五、弥合经验鸿沟 Bridging the experience gap

每个客户都会不知不觉地根据自己的期望来评估他们所接受的服务。用户体验质量所引发的情感将形成品牌的声誉。

在现代世界,数字渠道已成为品牌的主要“营销”和公关渠道。

一个应用程序,即使有一百年的服务客户历史和其他渠道的优质服务,负面体验也会破坏品牌推广的所有努力。

这仅仅是因为在数字时代,移动渠道占主导地位,对于某些人来说,它正在成为与品牌互动的唯一途径。这就是为什么了解如何弥合数字产品出现的七个体验鸿沟的方法如此重要。

1. 弥合文化鸿沟

在文化方面,转型基于高层心态的改变并将这种影响渗透到整个的公司文化和内部价值观。特别是,可形成“以客户为中心”的体验思维模式。

2. 弥合反馈鸿沟

在银行案例中,开始弥合反馈鸿沟的第一步,是深入了解社交媒体上的负面评论以及致电售后部门的电话。接近这些客户才容易消除反馈鸿沟。事实上,他们比管理层更了解应解决哪些问题,并且往往渴望积极分享自己的情绪并希望得到倾听。如果一家公司足够开放并准备好接受批评,它可以使用这些数据来弥合鸿沟并提高产品迭代的敏捷性。

3. 弥合设计鸿沟

通过整合设计方法和设计思维来制定弥合鸿沟的策略可以使用设计金字塔。该框架从五个层次(流程、团队、行动、结果和价值)确定了能够提高公司整体效率的设计集成。

4. 弥合执行鸿沟

组织必须将经过验证的设计执行方法(例如设计思维、HCD 或 UX 设计方法)与分步系统相结合,以设计符合客户期望并能够弥合执行鸿沟的数字产品。

5. 弥合价值鸿沟

产品的功能级别为客户创造真正的价值和利益并通过提供卓越的可用性进行功能扩展;美学 ——令人惊叹的视觉识别;状态 —— 针对产品特定受众的个性化,最后是建立产品的价值观与使命。

6. 弥补过度承诺的鸿沟

数字时代的客户要求透明关怀诚实和开放的沟通。由于网络效应,几乎不可能销售劣质产品,因为每个人都可以在社交媒体上发布负面反馈,而这些负面反馈将深深地损害客户的信任。因此,做出不仅可以兑现,甚至可以超额兑现的承诺至关重要。

7. 弥合情感鸿沟

对客户的同情和关怀比以往任何时候都更加重要。在品牌与客户之间建立情感联系对于确保长期忠诚度和需求至关重要。这种联系是通过之前涵盖的所有阶段建立的——将客户放在第一位的正确心态;收集反馈并在此基础上进行改进;使用正确的工具和方法来创建产品设计和生态系统;创造真正的价值和利益,最后,通过诚实和超额兑现承诺。

六、成为深受喜爱品牌的途径 The pathway toward becoming a beloved brand

该途径涵盖了可能破坏数字产品创造的 7 个主要体验鸿沟以及可以帮助避免和解决这些鸿沟的 7 个桥梁。如果一个品牌能意识到这些盲点,它可以立即获得比仍处于盲点的竞争对手的显著市场优势。

仅凭意识就可以产生巨大的差异,但将意识与行动相结合会导致长期成功,成为一个需求量很大和深受喜爱的品牌。

本文翻译已获得作者的正式授权(授权截图如下)

你常常忽略的 7 个具有破坏性的体验鸿沟

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

文章来源:人人都是产品经理  作者:TCC翻译情报局

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

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

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


如何从用户角度出发打造产品体验

ui设计分享达人

文章定位:

好的产品能为用户带来高效的解决方案,在迭代升级中实现用户价值。

以下文章主要探讨设计师 如何从用户角度出发打造产品体验,通过设计帮助产品带来高溢价。

 

01、用户思维

用户思维最基本就是 围绕用户 去设计,帮助他们 解决实际问题。

Q:为什么要围绕用户做设计?

A:想将自己产品打造成为好产品,最终留住用户。

Q:什么是好产品?

A:“让产品自然生长,不要去碰用户,不要去打扰他们,让他们自然形成一种互动关系”。不要强塞东西给用户,切切实实的在用户需要的时候能快速给到他们价值,解决某个问题,或满足他们的情感,情绪。

即:帮助用户解决实际问题,并提供解决该问题的优秀设计。

所以设计师产出设计方案前需思考的是:

  1. 解决什么实际问题?

  2. 应该提供怎样的设计?




02、确定用户面临的问题点

解决哪些实际问题是每个案子的核心,在该阶段设计师常容易陷入误区

如:我要做 一个…东西、我要怎么怎么做……下意识的就去研究怎么做,而不是首要思考具体解决什么问题,该误区到后期往往会造成设计偏离。

为了避免该情况,首要需确定问题,并将问题清晰表述出来,表述的越清晰解决起来就越容易。

那我们应该怎么去确定这个问题呢?


– 利用同理性图谱构建用户认知

好的设计需要与用户心智相符合,贴合用户当时情境下的诉求。

为了让优化方案更有依据,在发现问题的时候,需要从用户视角出发,结合当前产品的页面去分析是否符合当前用户的诉求。

——可以采用 同理心图谱 的方式:

从 说了什么、做了什么、想了什么、感觉到什么 四个维度去勾勒用户真实的想法感受。


以下以优化案为例:

在实际优化案中,可结合需改版页面按照四个维度走一遍,可让设计师更了解当前页面帮助用户做什么,后续有哪些优化方向。

如:QQ支付页面整体流程优化设计

① 用户需给好友发红包,在输入完红包金额点击支付时,向上滑出了支付面板,用户看到这个面板时候,其心理活动可能是怎样的呢?

② 用户想要更换支付方式,点击更换后看到下方页面,用户对该页面的的感受会是怎样的呢?

③ 用户输入密码后,以为马上就成功了,却发现卡里没钱了,这时候用户更加迫切的是什么呢?

通过以上这样 【移情】的方式,使我们更能了解用户,在没有用户访谈的情况下对他们的 愿望、需求、诉求点 有个概念,当有了这个 共鸣 在后续就可以将这个共鸣变成一个有着明确优化方向的 问题陈述。


– 自问自答式推理逐渐确定问题

在挖掘用户需求点过程中,可以采用不断询问不断回答的方式,将自己脑子里想的直接写出来,通过这样的方式构建自己思考的逻辑。

如:“在下单页转化率太低 > 在下单页用户无法快速验证信息 > 在下单页重点信息不集中,其余信息太显眼 >…..”

在这个过程其实就是刨根问底的过程,在反复的试错过程中也会离真相更近。

类似下面这张Julie Zhuo的自我审视图:


03、问题陈述(POV)


– 什么是问题陈述

通过陈述句将产品当前状态(问题)和期望状态(目标)的差距描述出来。POV有助于我们强调用户痛点,保证自己将重点始终放在用户身上。


– 问题陈述怎么写

那怎么陈述才能更好的将问题及规划表达好呢?以下有两个方式:

  • 基于用户角度来说:我看QQ群里抢红包很热闹,我也想快速参与进去,但是轮到我发的时候,我因为我不是非常熟悉整个流程,导致我反应慢了,这让群里的人以为我故意这么慢才发,影响大家氛围,这让我有点沮丧。

  • 基于用户研究来说(4W):我们的初中生因为特别活跃,喜欢在群里踊跃发言参与活动,所以一旦群里有好玩的消息总是想第一时间参与进去。我们的解决方案应该 为他们 提供快速能够完成红包发送的链路与方式,不扫他们的兴。

以上两种陈述方式都是针对同一个问题,只是表述方式不同。所以只要你足够专注用户,理解他们需要什么以及为什么需要,就可以快速构建你后续的设计方案。


– 问题陈述注意点

① 用户与他们的需求是问题陈述的核心,避免:我们应该怎么做、产品应该…作为开头。

② 保持陈述的宽泛性,不要过早抛出细致的解决方案、技术限制等内容,避免团队发散受限。

③ 专注一点,不要让用户的需求和目标过于宽泛,导致自己很难找到一个合适解决方案。所以不要视图在一个问题陈述中解决太多用户需求,一次解决一个就很好了。


04、如何打磨设计方案

在经过问题陈述我们对要解决的问题了然于胸,在解决方案上,设计师需要考虑 易用性、易理解性、及着力提升用户任务效率,给用户一个更好的体验。面对不同的项目,可考虑以下几点:


– 结构简洁,重点突出

例1:


该例子非常能体现出 诉求 与 解决方案 的契合。

首先工作人员唯一的目的性就是 筛查 有问题的人,所以在众多人中需 快速判断,这个转化到设计上解决方式:

通过大面积的 色块直观反馈

通过实时的 滚动时间+滚动背景反馈真实性

在结合下方核酸与疫苗辅助判断,整体非常贴合实际诉求,重点突出,有节奏感。


例2:

通过体验核心信息,将内容合理布局,重点突出,操作划分明确,有助于信息获取与确定。


– 管理复杂(满足不同诉求)

人的认知资源有限,天生不善于处理复杂信息,所以在面对复杂信息时设计师需将复杂的内容以一定秩序逻辑管理,分而治之,减少用户的选择,让正确的行为变得自然和明显。


例1:

在58二手车页面的改版中,可以看出在面对不同用户诉求的情况下在 模块化结构 与 坪效 找到了平衡:

顶部按钮直接 分流 不同目的用户;

中间模块展示用户 最关心的维度:价格、品牌、车类型;

下方 透出推荐内容 吸引用户往下逛。


– 注重情感化

情感化不一定都是很精美的插画、动效等表现层面上的,有时候 贴心的记录、舒缓的内容、小游戏…… 也可以起到 情绪调节 的作用,提高用户看到复杂信息的 忍耐度


– 场景化设计(预判你的预判)

多考虑用户使用场景,挖掘一些场景是可以通过我们的设计 帮助用户多走一步,帮他们排除障碍,减少负担。


例1:

打车软件在特定时间点自动浮出目的地,以及截图后立刻打开微信聊天窗,图片自动在对话框中浮出的方式都是通过用户的行为预判了用户下一步的行为,


例2:

用户输入密码后下意识认为操作成功,但却被告知失败,对用户而言是一次打击,若这时直接前置化用户后续可能会的操作,将条路径重新接上,可以让整个过程更加高效。


所以在具体设计方案上,设计师需要不断的去思考打磨设计方案,让自己的设计:

① 显而易见的,让用户体验后觉得「没错,就应该是这样」;

② 有价值的,它为用户解决实际的问题;

③ 与用户的心理模型相符,它不意味着更多的设计。



05、验证体系

验证方式有很多,目前市场上有几大比较成熟的体验度量体系,针对不同的关注点进行 定性+定量 检测。

除去性能表现外,主要都是围绕用户行为数据及使用感受来进行度量

在行为数据上,主要关注:访问频率、留存率、页面访问次数…

在用户感受上,主要关注:满意度、用户评价、推荐度…



– 设计师怎么确定自己设计方案的验证指标

对于设计师而言,不需要做的这么全面,我们只需要针对我们 具体优化页面、场景 找到可以直接验证的指标即可。

例:

在上述的发红包支付页面的优化设计中,由于主要优化的方向是为了让用户更聚焦,提升整体支付体验,所以基于这个目的,我们可以以 整体的支付成功率 来验证大致优化效果;

其次,可以从 每个触点的转化漏斗、和 各页面停留时长 上分析具体页面改版效果。


– 面向真实用户验证设计

除去行为数据上的验证,用户真实反馈同样重要,我们可以采用用户调研的方式了解用户对产品体验的反馈,主要可以从下面三个方面执行:

① 可用性测试:可针对核心优化的功能点设定测评任务,来观察用户的完成情况,如:如果你余额不足,你会怎么做?

② 满意度测试:采用界面可用性问卷调研,可以采用SUS问卷收集反馈

③ 推荐度测试:通过NPS量表来衡量,通过将分值划分为:0~6分为贬损者,7~8分为被动者,分值高于8分为推荐者,带入计算公式(NPS值=推荐者% – 贬损者%)算出推荐度数值,数值越高,说明用户满意度越好,用户的推荐意向越高。


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

文章来源:站酷   作者:小发歌

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

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

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


正态分布模型在体验设计中的分析及应用举例

ui设计分享达人

B端产品往往都具有较长的业务流程和操作步骤,需要用户循规蹈矩、通过较多的步骤找到相应的页面,来触达相应的用户目标。落实到体验设计中,需要设计师充分考虑用户在操作路径中的操作权重(频率&停留时长),进一步以核心步骤为中心向路径两端延伸,完成页面布局。


如何分析和评估用户在操作路径中的权重呢?今天介绍一下,本人从统计学中借用的一个概念——正态分布模型,并将其应用到体验设计的流程中。


1 首先,什么是正态分布模型呢?


正态分布,也称“常态分布”,或高斯分布,是一个在数学、物理及工程等领域都非常重要的概率分布,在统计学的许多方面有着重大的影响力。


如果一个指标受到若干独立因素共同影响,且每个因素不能产生支配性的影响,不管每个因素本身是什么分布,它们叠加后影响的这个指标平均值就是正态分布。


如图:

标准正态分布模型


正态曲线呈钟型,两头低,中间高,左右对称因其曲线呈钟形,因此,人们又经常称之为钟形曲线。


标准的正态分布模型包含了中心极限定理的三要素,影响因素独立,因素影响程度随机但无法支配,各个因素之间是相加的关系。

中心极限定理三要素


当然,在体验设计中正态分布模型就没有那么复杂,而且用户的操作也不是随机分布。那如何在体验设计中如何应用呢?


接下来,介绍一下基于用户体验,提炼的正态分布模型。


如图:

体验设计中标准正态分布模型


总的来说,体验设计中的正态分布模型,是一种用来探讨用户在某一功能的操作过程(或产品的整个生命周期)中,操作频率(权重)所集中的区间与页面布局、信息架构之间关系的方法与思维。


这个模型涉及两个维度:

一是带有指向性的操作路径(步骤/功能模块),可以是一个功能的详细、单一的操作路径,也可以是一个产品从使用到停止使用的生命周期中,用户对整体功能使用流程;


二是频率,操作路径中的步骤或者核心功能被使用的频率,即权重。这个维度可以直观的反应出用户的关注重点和高频操作,便于后续的用户引导及页面布局等。


将用户的操作频率按流程顺序放置到坐标中,即可得到类似于正态曲线的图形,直观的反映出用户在功能步骤(模块)上的关注度。


2 体验设计中正态模型的类型


根据分析功能的颗粒度不同,得到正态分布模型的验证结果也不相同。


由此,体验设计中的正态模型,大体上可分为两类:

第一类是具体的功能(功能型),通过该功能的起始到完成,获得该功能高频操作及核心页面,可有助于功能路径优化及页面布局、功能排布,让用户更方便的获取高频操作。


第二是产品整体功能(产品型),通过用户从使用到停止使用该产品的全部路径,获取用户在使用产品时关注的功能,有利于明确产品定位、优化功能架构,在B端产品上还可以进行角色和权限的管理。


接下来,我们就详细探讨一下两种类型的正态分布模型。


2.1 功能型的正态分布模型

功能型的正态分布模型多用于优化产品功能及路径。这种类型的模型关注更加聚焦,结论也更加直接,甚至可以直接应用到设计方案上。因此在分析功能路径时,要简化相关联的分支路径,避免其对聚焦问题的干扰,使分析结论更加精准。


例如,一个手机TB的购物流程,如果要研究用户购买行为,就需要更多的关注用户对商品的选择、比较等操作,同时简化用户的支付操作路径;如果研究的是购物流程中用户的支付行为,就应该相应的简化用户选择产品的路径。


如图:

举例:淘宝购物流程分析


另外,这种类型分析结果的落地,需要格外关注功能操作路径的入口及其他功能的衔接,保证在更大层级上的操作不会出现断点,保证使用流畅。


2.2、产品型的正态分布模型

产品型的正态分布模型,可以看作众多功能型路径的简化提炼版本,忽略操作细节,着眼于业务在功能模块之间的流转,多用于产品定位升级或架构调整。这种类型的模型是将产品的拓扑图,按照用户从开始使用到停止使用的的操作路径(产品的生命周期),将其映射到坐标轴上,来直观表现出产品的核心功能。


如图:

产品型&功能型


其结果属于定性结论,在设计方案时更多的是参考意义,只有在进行产品定位迭代及架构调整时,才具有指导意义。因此,在不同场景下用合适的模型才能更具有说服力。


正态分布模型的可以应用到B/C/G等多种类型的产品上,根据不同类型的产品,该模型还会有其他功能的扩展。


例如,B/G端产品往往都具有长流程、多角色、多模块的特点,当正态分布模型在B/G端产品上应用时,还可以清晰凸显角色、权限的结构,有利于对用户权限和角色的定义与管理。


3 案例分析


在本人所从事的安防行业中,实时报警的处理是较为高频、且重要的业务功能。本文仅对功能型模型进行案例分析,希望该方法(思维)的表达更加清晰明确,也能够帮到大家。


3.1 业务概述:

实时报警的业务流程大致是这样的:在监控中心或岗亭,保安人员对园区的安防状态进行警戒时,如果有异常状况触发了报警,系统会反馈推送给安保人员,安保人员通过录像抓图等信息判断报警的紧急程度以及处理方式。


3.2 业务定性

该功能是典型的“海岛事件”,具有偶然性和急迫性的特点。所谓海岛事件,是本人对具有偶然性与急迫性特点业务的概括统称,后续可以写文章专门探讨该问题。


3.3  场景推演

安保人员每时每刻都全神贯注监管整个区域的安全状态,是不可能的,更何况这类海岛事件呢?所以,在发生报警时安保人员大概率处在“摸鱼”状态。



当有报警进入时,安保人员第一时间需要确认的是报警的类型以及位置,从而快速判断如何处理。只有当报警信息不明确时,安保人员才会进一步通过录像、抓图、关联的监控来进一步判断报警信息。


实时报警场景推演


3.4  报警业务处理的正态模型分析

在整个场景推演过程中,用户的关注重点是报警详情以及报警信息的确认过程,会有较少的概率查看辅助信息,因此需要保留辅助信息的入口。


如图:


3.5  方案展示

方案采用瀑布流式,高权重的关键信息拥有更高的页面权重,用户可以快速获取信息,以判断处理方式。同时,渐进式展示确认信、辅助信息,如抓图、录像、关联视频等,一方面可以减少对用户决策的干扰,同时能够快速获取这些信息,辅助用户做出判断。


由于方案涉及到公司项目,所以方案不方便直接展示,这里只展示页面信息布局。



我们都知道,在页面纵向布局上,随着视觉流的下移,用户的关注度会逐步降低,因此,在实时报警处理页面布局上,将从上到下信息的重要性逐级降低。


首先是实时报警处理的核心区,分为两个部分基本信息区与视频辅助区,这两部分信息是判断实时报警性质以及处理方式的主要依据。其中,基本信息区是最重要的,用户可以根据报警的基本信息,来确定如何处理报警。对于大部分的报警信息,用户可直接判断报警是否需要处理,或是进一步的确认及验证,尽可能的减少用户的操作;因此,报警的处理入口,紧随基本信息。


而视频辅助区是对部分报警的回放确认,是在查看基本信息后的进一步操作,频率相对较低,因此虽然属于核心区,但是层级却低于基本信息的展示。


辅助验证区放置的报警期间的连续抓图,可以满足用户的放大查看,进行报警辅助确认,随着用户视觉流下移,其重要程度迅速降低,相应的操作的步骤也较为复杂,页面视觉权重也有较大的压缩。


最后,对于极少的报警信息,用户需要通过关联视频的信息进行验证,可通过页面底部的关联视频入口,点击展开关联视频浮层,进行报警信息验证。这是整个实时报警的最后一个层级信息展示。



4 写在最后


正态分布模型不仅仅是一个工具、方法,同时,也是一种设计思维。


在设计之初,充分理解功能的定位,完善功能入口,让用户更容易触达产品的核心功能。然后通过核心功能向业务两侧进行延伸,进而覆盖整个业务,完成产品的框架与流程的构建。


在设计之中,关注高频的核心步骤,让用户的高频操作具有更简便的操作空间,把用户更想知道、更想操作的内容推送到用户面前,让用户在整个操作流程中的操作频率与页面布局的权重分布相匹配,而不是想当然。


只有这样,设计才更具价值,才能培养更忠诚的用户。

文章来源:站酷  作者:体验设计思

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

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

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


日历

链接

个人资料

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

存档