首页

设计模式 | 多级撤销 Multilevel Undo:让用户更有安全感

鹤鹤

What 是什么

简介:「多级撤销」允许用户撤销一系列的操作。用户操作的顺序能被系统捕获记录,根据原始执行顺序,一步步返回历史操作。


例子:用 Sketch 画设计稿时,可以多级撤销,允许用户返回上一步或更早的历史操作


undefined


Why 为什么

具备多级撤销的功能可以让用户觉得能够对界面进行安全探索,不必担心造成某些不可取消的修改。例如,如果单击了错误的菜单项,不需要进行复杂的恢复,不需要退回到此前保存的文件版本,或者寻求系统管理员的帮助。


多级撤销也让专家用户更快更容易地探索工作路径。举例而言,一名 Photoshop 用户可能会在一个图片上执行一系列的滤镜操作,研究那些结果看是不是他喜欢的,然后再逐一撤销,回到起点。


When 什么时候使用

需要用户频繁在单一页面上交互的用户界面,相比普通的网站或者移动端 APP,交互操作要复杂得多。例如:文件编辑器、图形建模工具、邮件阅读器、数据库软件、写作工具、编程环境等。该功能能使用户撤销一系列操作而非单一个操作。


使用条件:该软件的单一界面交互比较复杂和频繁


How 如何使用

软件首先需要一个强大的模型,这个模型是关于动作是什么样的——动作的名称、动作所关联的对象,以及如何返回历史动作。


决定哪些动作需要成为可取消的操作。如果动作可以改变一个文件或者数据库——任何将是永久性存在的对象——都应该是可取消的动作。具体而言,在大部分应用里,人们期望能撤销下面这些改变:

  • 文档或表单的文字输入

  • 数据库

  • 图片或画布的修改

  • 布局上的变化位置、大小、顺序或分组在图像应用程序中

  • 文件操作,例如删除或修改

  • 对象的创建、删除和重新组织,例如邮件消息或电子表单的列

  • 任何剪切、复制、粘贴操作


下面这些修改基本上是不可撤销的:

  • 文本或对象选择

  • 窗口或页面之间的导航

  • 鼠标光标和文本光标的定位

  • 滚动条的位置

  • 窗口或面板的位置和尺寸

  • 在一个未提交的对话框或模态对话框上的改动


展现方式

然后,决定以哪种方式把撤销操作展现给用户。大部分桌面应用程序会把“撤销/重复”的菜单项放在“编辑”菜单下。撤销通常也关联到Ctrl+Z 或类似的快捷键。


Example 案例

案例一:Microsoft OneNote 笔记编辑器

用户需求:撤销文字输入

Microsoft Onenote  文档编辑器挡在输入过程中需要修改可以用快捷键 COM + Z 撤销,或者使用编辑菜单下的按钮帮助用户返回上一步。

undefined


案例二:Photoshop 多级撤销

用户需求:回到历史操作记录

Photoshop 同样可以采用快捷键和菜单按钮返回历史操作,由于 PS 的操作修改繁琐且复杂,所以为用户提供了历史记录面板,用户也可以点击历史操作步骤回到想要的历史操作记录。

undefined


案例三:美图秀秀图像处理 App

用户需求: 撤销回到上几步图像处理结果

使用美图秀秀等图片处理 App 对图像进行美化操作时,常常会返回查看对比不同的效果,或者操作错误时返回到前几步,顶部的撤销按钮可以让用户回到任何历史操作步骤。

undefined


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

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

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

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


「设计心理学」Uber利用心理学改善用户体验

鹤鹤

“Uber是一种非常独特的模式,没什么可以参考的产品”

——Travis Kalanick


Uber遍布全球65个国家,超过600个城市,拥有7500万用户,为很多人解决了交通不便的问题。


这个规模和增长速度是前所未有的,Uber提到这其中独特的商业模式和用户体验是驱动。


所以哪些是最重要的用户体验问题,Uber又是怎么通过科学的方式来解决这些问题的呢?


Uber用户最大的痛点-等待

-

想象一下你在凌晨2点的冬天,独自矗立在陌生城市的街头瑟瑟发抖;或者是你要参加一个重要的会议,如果Uber准时到达的话那就正好赶得上。


在这些非常紧急的情况下,人们对时间的感知是扭曲的,等一秒像是一分钟,等一分钟像是一个小时。

不仅如此,人们还会用这种扭曲的等待时间来评价整体用户体验,为什么会这样?这就用到一条心理学原则叫“峰终定律”(peakend rule).


隐藏在“难以忘怀的用户体验”背后的科学

-


Image via UI Patterns.com


峰终定律指的是人们基于最高峰体验和最终体验来评价整体体验,而不是在这段体验中的平均感受,这个定律对好体验和坏体验是通用的。


对品牌来说,顾客会深刻记住这两个点:最坏(或最好)的体验、最后的体验。

Photo by why kei on Unsplash


好体验对“等待时间”的要求是非常苛刻的,这也是用户给出好评的关键点,Uber花了无数时间来解决这个痛点,这就是Uber决定要应用心理学来完善用户体验的原因。


在这份调查中,Uber发现了3个关键原则,可以解决“等待时间”这个痛点:厌恶无聊,操作透明化,目标趋近效应。


1.厌恶无聊

-


“人们讨厌无所事事,他们需要一个原因忙起来”

——researcher Chris Hsee

Photo by Fabrizio Verrecchia on Unsplash


最近对心理学、幸福和用户体验的研究,揭示出一个原则,就是“厌恶无聊”,指的是人们在忙碌时感到更快乐,即使他们是被迫忙碌。


如何应用这一原则?


可以让用户参与读取信息、游戏化和增加视觉效果等方式,让用户保持忙碌的状态。


像下面Uber采用的方式,他们利用一个动画来愉悦用户,同时实时告诉你等待时间。

Uber Blog Australia


2.操作透明化

-


“当用户从我们为他们创造价值的过程中分离时,他们会感觉我们没有全力以赴。

这时候他们较少重视或肯定我们的服务。”

——Ryan Buell,哈佛商学院

Photo by Sitraka Rakotoarivelo on Unsplash


操作透明化是一种能让用户看到公司如何运营操作的直接方式,这样用户就能看到我们在整个过程中付出了多少努力。


根据最新的研究发现,操作透明化会让用户对产品的价值评价更高,让人们感觉更好。


如何应用操作透明化?


及时告知用户,让关键信息可见,还要帮用户理解信息来源。


在下面Uber Pool的例子中,他们提供了到达时间的计算方法这一信息。通过一种简便的方式告诉用户,即使是没有任何技术基础的用户也能看懂。

Engineering at Uber(右图详细解释:我们是如何计算到达时间的)


3.目标趋近效应

-

目标趋近效应表明人们更愿意为即将达成的目标而付出努力,而不是他们已经走了多远。

Photo by Jonathan Chng on Unsplash


越接近目标,用户就越愿意采取行动更快的去完成这个目标。


如何应用目标趋近效应?


想象目标趋近效应是一条真实存在的终点线,用户越接近终点,越能鼓励他们积极行动。


你也会经常看到这个原则应用在很多交互元素上,比如进度条,填写完成度等,用即将完成来鼓励用户完成任务。


Uber通过解释幕后发生了什么来应用这一原则,他们解释过程中的每一步,让用户感觉到为了达到他们的目标正在不断的努力。


最后

-

毫无疑问,Uber很大部分的收益来自利用科学改善用户体验,最先在Uber Pool运行的增加了厌恶无聊、操作透明化、目标趋近效应的实验版本,效果非常好:


“Express POOL团队用A/B测试的方式,发现增加这些解决方案后,取消率降低了11%”

——“Uber如何大规模利用行为科学”


如果你想在产品中应用这些原则,必须要结合非常严格的测试。一个原则的应用,可能要通过上百种实现方式对比实验,才能找到最佳解决方案。

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

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

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

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



用户体验设计-基本概念,与艺术的区别,工作中的职责,职位上的分类

鹤鹤

一、设计和艺术的区别

艺术:

艺术是感性、天马行空、富有创造力的,表达创造者的个人意识

设计:

设计是理性、精密的,为了解决用户的问题

      

(你看得懂吗?你有什么见解?为什么大家见解不一样?这就是艺术的魅力)


二、用户体验及用户体验设计

什么是用户体验?——————使用一个产品时的主观感受

用户体验设计?———————为了提升用户体验而做的设计

 

1.用户体验设计

首先要解决用户的某个实际问题--让问题变得容易解决--最后给用户留下深刻的印象。(视觉只是其中一部分,并不是设计的全部)


Eg:充电插座的苦恼--错开位置

尿液四溅--厕所里放一只苍蝇,用户会去瞄准上厕所(设计美观且有趣味性)

 

2、用户体验设计的特征

(1)严谨、理性、创意

先关注要解决的问题----其次思考有趣的创意帮助用户得到更好的体验。

(2)提供特定问题的解决方案

设计目标是什么,为什么人解决问题,如何解决

 

Eg:钢铁侠u盘死死按住关机键;楼梯是为残疾人设计的吗,我懵了?


(3)不让用户思考

用户感到挫败,会放弃。你的设计不要用户一头雾水。

(我到底怎么走?)


(4)趣味横生

尿液四溅贴提示语效果不好,放一只苍蝇效果很好?

因为:抓住了用户的心理和行为习惯,同时充满趣味,吸引用户

 

Eg:path推出的商店功能,在里面买自己喜欢的贴纸,摇晃手机贴纸也摇晃,感觉很好玩吧~带来好的体验感

 


3.用户体验设计师遇到问题如何思考




三、各种设计师的区分

1.怎么和别人解释用户体验设计师

A:“你用一个网站的时候,有没有出现:某个功能找不到了,点击按钮没有反应,填写的信息不知道哪里错了总是不能提交成功?”

B:我们的工作就是改善这种情况,让你使用网站时有一个好的体验,同时能让用户感到愉悦和不受打扰。

工作中:除了考虑用户还要让公司有利可图


2.交互设计师

通过分析用户心理模型、设计任务流程、运用交互知识把业务逻辑(需求/功能)以用户能理解的方式表达给用户,最终实现产品战略(公司需求和用户需求的平衡点)的过程。

即:从公司战略角度考虑问题,在公司需求的基础上让用户觉得好用、易用

 

交互设计师的产出物:不是原型,你不是画图的工具,重要的是解决问题的能力

工作内容:竞品分析文档、用户反馈整理、流程图、设计草图、原型...

 

3.视觉设计师

原画:设计者很强的手绘能力,作品充满艺术表现力

平面:传达思想,较强的感染力

推广运营设计师:突出重点抓眼球

UI:良好的审美、具备一定的交互知识

                      (原画)                              (平面)                                              (推广运营)

4.用户研究员

通过各种分析和研究,深入了解用户特征,用户行为习惯,为产品运营推广提供必要的方向

工作内容:市场分析、竞品分析、创建人物角色、问卷调查、焦点小组、用户访谈、可用性测试

 


四、用户体验设计师的作用和价值

1、用户价值商业价值

用户通过优秀的设计快速达到目标,企业也会财源滚滚

eg:改变一个按钮的颜色,点击率提高35%;优化操作流程,转化率提高50%...


2、项目价值

跟进各个环节,保证产出物质量

推进统一及标准化,提升设计效率

促使项目流程合理,有规划

 


五、交互设计师的作用和价值

1.工作内容

分析重塑需求;与用研配合,了解用户特征与行为;设计结构、流程、界面、动态效果;跟进视觉、前端、开发;及时整理上线问题,准备下次迭代...


2.品牌价值

维护和突出品牌形象,统一的设计理念

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

文章来源:站酷 作者:一团雯子

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

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

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


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

鹤鹤

本文将从理论到实践,从软件到插件,再到不同应用场景拆解和团队协同的重构,一步步教你如何搭建产品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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


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

鹤鹤

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

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

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










undefined

undefined

undefined

undefined

undefined

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

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

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

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

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

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


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

鹤鹤


 

讲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端产品界面高屏效初探

鹤鹤

背景

在 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搜索框设计的要点

鹤鹤

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


1、搜索框结构分析 

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

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

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


2、搜索框的常见类型 

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

搜索图标

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

基本搜索框

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

文字提示类搜索框

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

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

功能类搜索框

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

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

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


3、搜索框设计状态分析 

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

搜索前-默认状态

位置

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

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

样式

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

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

点击后-获取焦点

搜索框

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

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

键盘

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

搜索页

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

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

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

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

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

搜索中-输入内容

删除/取消

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

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

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

搜索提示

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

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

字数限制

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

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

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

搜索后-展示结果

符合预期

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

智能提示

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

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

无结果提示

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

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

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

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

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

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

鹤鹤

文章整理了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个方面改善用户体验

鹤鹤

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


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


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

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


2.分析服务构建


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

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


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


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

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


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


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

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


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


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

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

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

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

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

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

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

日历

链接

个人资料

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

存档