首页

UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

seo达人



大家好,我是彩云。在做UI界面设计时,有时候看着设计出来的界面总觉得不大好,但又不知道问题出在哪,这里其实考验的就是设计观察力。资深设计师之所以强,往往就是强在对设计细节的把握能力,他们总能找到你所看不到的细节问题。大的问题往往一眼就能看出来,但设计品质高低往往就藏在这些设计细节中。观察力的提升也是来自于平时项目中的经验积累,为此,彩云围绕设计细节计划出一个系列文章,今天这篇文章是第一期,感兴趣的同学保持关注,后续会有更多设计细节干货文章连载更新,保证看完就能用到自己的工作中。

 

图片

当你在设计一个高效、美观的UI界面时,有时只需要一些小的调整,就能快速提高设计的品质。有时候仅仅是简单的调整就能设计出让客户、用户和你自己真正满意的界面。

在这篇文章中,我整理了一些小的设计技巧,来帮助你快速改进自己的设计,提高用户体验。

 

1.适当使用文本装饰元素

图片

有些人会拿极简设计出来说事,认为不应该加多余的文字干扰 ,界面上的内容都应该遵循有意义这个原则,这没有问题。但有时候增加文本的目的只是简单的为了“装饰”,这样是可以的。我们不希望所有的设计都变得平平无奇。

纯粹出于装饰原因而加入一些比较特别的元素也完全没问题,它可以不遵循可访问性标准,比如颜色对比度特别浅,看不清都没关系。只要这些元素不影响用户体验就可以。

 

2.UI界面中的不同元素要有区分度

图片

按钮、通知(文字链接)是用户界面中两个独立又重要的元素。如果可以的话,一定要确保用户在浏览你的网站或应用时能够快速且轻松地将它们区分开来。

按钮,在大多数情况下都是最重要的,所以在界面中一定要确保是最突出,并且很容易区分其他元素(例如:文本链接)。

 

3.使用更自然的投影

图片

设计过程中我们通常都会用到投影。投影的恰当使用,可以有效提高视觉品质。在设计界面时,避免使用比较重的投影,降低不透明度,让界面看着更加自然。

 

4.使用让视觉更加清晰的字体

图片

在设计中,字体适当都使用大写也是很不错的。它可以帮助你在设计中实现元素之间的多样性和对比度,提高视觉的整体效果。但要确保选择是合适的字体,行高和字重粗细,确保给用户呈现的内容清晰度。

 

5.面包屑导航设计要便于用户理解

图片

导航的设计无处不在,通常会应用在内容比较多的网站上,但有时很难理解它所表达的意思。如果将字体颜色和粗细稍微调整下, 就可以让用户快速确定自己所在站点中的位置,以及他们可能需要去的其他地方。

例如:如果他们通过搜索跳转到某个站点的某个位置,这就特别有用。像上图中的设计一样,始终让导航链接中的最后一项让它在视觉上与其他有明显区别,这样用户更加容易理解。

 

6.少用过高饱和度的颜色

图片

高饱和度的颜色(明亮的蓝色、红色、绿色等)在网站上是挺有视觉冲击力,并能吸引用户的注意的。但是如果过度使用它们可能会让用户的眼睛感到疲劳,尤其是结合文本内容一起使用的时候。

尽量少地使用高饱和的颜色,你可以尝试把饱和度降低,增加颜色中的灰度来使颜色变淡,这样不仅能避免用户视觉疲劳,还能更加突出重点内容,让用户阅读起来更加方便且不被视觉干扰。

 

7.使用用户熟悉便于识别的图标

图片

在设计中使用图标时,最好使用用户熟悉并便于识别的图标,让用户能快速理解使用它能做什么。使用不能传达正确含义的图标,只会变成视觉噪音,引起用户混淆,成为用户的认知障碍。

 

8.使用亲密性原则来表达元素之间的关系

图片

版式设计四大基本原则:对比,重复,对齐,亲密性,其中亲密性原则是把画面中相关元素进行分类,建立某种视觉上的关联,实现页面整体结构清晰度,加快用户在浏览网站或应用时的认知。

 

9. 使用4pt基线网格+8pt网格来做字体排版

图片

进行文字排版时,将 4pt 基础网格 与 8pt 网格 一起使用可以为设计带来更加和谐的垂直节奏。

你只需要使用 4 的倍数(16、20、24、28 等)的行高值将字体与 4 的基线网格对齐。为什么是 4? 好吧,就我个人而言,我发现在处理某些文本大小时,过去以 8 的倍数进行缩放并不是那么通用。

 

10. 减少标题的行高

图片

冗长的正文需要足够的行高来增加可读性,而标题通常要短得多,所以你可以稍微减少间距。

标题的推荐行高通常是文本大小的1 – 1.3倍,标题文字越大,需要的行高就越少。

 

11. 使用色轮上的邻近色不容易出错

图片

邻近色,是最和谐的配色方案之一,当你在挑选颜色遇到困难时,它能给你很大的帮助。

一组由“主”、“次”、“再次”组成的邻近色可以帮你快速构建一个简单的、不会出错的配色方案。

 

12. 在设计中最大化信噪比

图片

设计中的清晰度和可用性可以通过“最大化信号”和“最小化噪音”来实现,这反过来又产生了高信噪比。

你可以通过确保相关信息(信号)有效地呈现,而不相关的信息(噪声)被完全减少或删除来实现这一点。剪掉绒毛。使事情更加清晰,删减无关信息,强化重要信息,提高信噪比达到提高界面设计品质的目的。

 

彩云注:由于篇幅有限,今天是设计细节系列文章的第一期,下一篇会继续更新更多设计细节,感兴趣的同学保持关注,保证看完就能用到自己的工作中。如觉得有学到,一定要给彩云点个赞,我会更有动力,哈哈~

 

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

图片

 

原文地址:mediue

作者:Marc Andrew

译文地址:彩云译设计(公众号)

译者:彩云Sky

转载请注明:学UI网》UI设计细节连载系列① | 让设计细节更高级的12个实用小技巧

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

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


文章来源:站酷   作者:陈皮Celia 

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

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

出色的图标是如何一步步设计出来的?来学学这些实操方法!

seo达人



图标是设计中不可或缺的一部分,是引导各种操作的视觉提示,可以赋予产品独特的身份。文章通过设计实操来帮助大家发现图标设计的更多可能性。

 

01 谷歌Material Design原则

使用简单的几何形状和大胆的颜色

图片

扁平化的设计趋势启发了Material Design,它也是基于基本的扁平形状,仔细选择最能代表图标所描绘的元素的形状。

 

用细微的阴影增加深度

图片

阴影是为设计赋予深度感的好方法,可以展示光线投射到物体上的效果。另外需要注意的是,模拟的自然光通常来自左上角。

 

使用颜色替换阴影

图片

▲ 每种颜色通过多种色调的变化来模拟视觉深度。在上一版的Gmail图标中,可以看到M的形状使用了不同深浅的红色,而信封下面使用了多种灰色阴影。

 

02 分步进行图标设计实操

了解了基本原则,接下来就到了实操环节,通过下面这些图标的实操演示一步步掌握这种简洁易用的设计风格。

 

闪电图标

图片

▲ 通过在两个形状的相交处创建阴影,实现顶层形状悬浮的效果;使用三种黄色阴影–顶层较浅、底层较深和最深的阴影。

 

聊天图标

图片

▲ 复制顶层聊天气泡,并将副本向右下移动来作为颜色最深的阴影。

 

标记图标

图片

▲ 复制图标,并删除右上角多余的点;复制左侧形状,并移动到右侧形状的顶部;两个形状相交以创建阴影效果。

 

旗帜图标

图片

▲ 将图形导角,提取标志底部的锚点绘制两条相交的线来创建折叠效果。

 

心形图标

图片

▲ 复制心形图标,隔离形状的左半部分;从右上角向下画一条对角线;将生成的形状与心形重叠,然后向右移动以减去阴影形状。

 

山峰图标

图片

▲ 创建两个不同大小的三角形;将较小的图形向右移动,并将得到的重叠部分作为阴影形状;最亮的颜色保持在左侧;最后运用圆角来调整图形。

 

人物图标

图片

▲ 选择并复制左侧人物形状的下半部分;将副本与右边的形状对齐;择三个重叠的形状,使用路径查找器做出阴影形状。

 

浮动图标

图片

▲ 把下方的形状向上移动至中点;复制上面的菱形,并将副本向下移动10-20像素;选择下面的两个形状,使用路径查找器保留阴影形状。

 

信封图标

图片

▲ 使用“直接选择工具(A)”,选择信封形状的第二高的点;使用“钢笔工具”在线段右侧添加一个点;抬起上面的两个点并向左右移动(如图所示),将负空间看着像抽出来的信纸效果。

 

蛋糕图标

图片

▲ 隔离蛋糕底部的形状并复制;缩小宽度并向内移动;将生成的形状移动到原始图标的顶部,并延伸较高的点以与上方的形状重叠。

 

03 最后:尝试改变图标的感觉

跟着过程一步步来设计,你也能做出效果很棒的图标。最后帮大家整理了图标实操详细GIF教程,关注公众号,后台回复: 实操 即可获取!

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》出色的图标是如何一步步设计出来的?来学学这些实操方法!

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

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


文章来源:站酷   作者:陈皮Celia 

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

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


通知消息系统设计指南

ui设计分享达人

前言

消息和通知作为系统和用户之间交流的窗口,在用法上、表达上存在一定的规律,本文解答网页端界面消息系统设计的如下问题:

· 常见的消息通知设计

· 如何进行消息通知设计

· 触发通知的业务场景


常见的消息通知组件和模板

在 Ant design 的设计系统里,消息和反馈组件并为「反馈」栏,涉及消息的组件有如下的内容:

警告提示(Alert )、 全局提示(Message)、对话框(Modal)、通知提醒框(Modal)、气泡确认框(Popcomfirm)、结果(Result)。

结合 TechUI 提供的业务模板,总结了以下常见的消息通知组件和模板:

以上的消息通知设计在设计的时遵循什么样的规律,以下用一张图来说明。 

消息通知设计指南图

根据消息反馈的强弱分为:高注意力、中注意力、低注意力;每个维度再从操作干预度 & 信息展示量作以下分类。

此图试图解答不同的通知设计组件/模板的使用场景,分为高注意力、中注意力和低注意力的场景,以及每个场景下不同组件信息量的大小和操作的干预度大小。 

通知的使用场景和强弱排序

高注意力的使用场景

【警报】需立即关注

【错误】需立即采取措施

【异常】系统等异常情况

【确认】需要用户确认才能进行


在需要高注意力的场景下用户必须对消息错处反映才能继续当前操作,操作干预度强。

使用页面级独占式布局的结果(Result)通知,告知用户操作结论以及引导后续的操作;使用对话框和气泡确认框让用户了解当前的系统情况,询问和引导后续操作;表单校验提示和全局提示告知用户当前的异常场景,帮助用户改正以继续当前操作。


使用示例:


中注意力的使用场景

【警告】无需立即采取措施

【讯息】用户操作的反馈及系统通知


在中注意力的场景下,当消息出现时,用户可以选择性地继续当前操作,也可以处理当前的消息,操作干预度中。

使用通知提示框,可以在页面中的边缘位置弹出消息提示,后台可以设置停留时长(当作为永久停留时并需要用户操作确认,功能等同于对话框);页面的警告提示常用于在页面的全局进行通知的展示,用户可手动关闭。


使用示例:


低注意力的使用场景

【信息性消息】无需立即采取措施

【徽章】自上次互动后的新消息


在低注意力的场景下,消息出现后采用弱提示,对用户的当前操作几乎不产生干扰。

此时,全局提示常用于成功状态下的提示或跳转状态,几秒后自动消失;徽章用于更新消息的状态。


使用示例:


触发通知的业务场景

通知的触发场景存在于用户之间以及系统和用户之间。消息组件的设计选择需要根据具体的业务场景来定,以下是通用的推荐情境。

例如,在以请求审批作为核心功能的应用系统,成功和失败的通知可以采用「中注意力」的通知提示框和警告提示;若请求审批是附属的功能,如,请求某人加入某项目成为访客,则可以采用低注意力的通知方式,降低操作干扰度。又如,钉钉的会议通知,采用了较强操作干预度的对话框请求确认,钉钉的即时消息通知用户可以自定义设置是否在桌面展示消息,当不设置为桌面展示时,采用的是红点徽章的表达方式。 


通知设计原则

提供明确指引

· 在用户解决问题之前,错误消息不应消失

· 避免仅通过将字段变为红色来指示错误,色盲用户难以辨认

· 消息文本内容过多不建议采用悬浮通知中心


简单高效

· 需要明确限制通知的标题和文案的字段数量

· 避免无故打扰用户的通知设计

· 非持久性通知的持续时间不可过短,至少需要让用户阅读完文本内容,适当情况下提供关闭功能

· 通知文案简明易懂,无歧义

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

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



文章来源:站酷    作者:Ant_Design

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

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

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



从5个方面,全方位解析微信的搜索功能设计

ui设计分享达人

动互联网时代,用户信息被孤岛化,用户生产的内容被隔离在自家产品,搜索引擎无法通过搜索抓取,例如微信公众号、小红书等。

在国内除百度搜索外,用户使用量最多的可能就是微信搜索。微信搜索可以同时搜索到来自微信公众号、微博、知乎、腾讯视频、快手、第三方网页、小程序等渠道的内容。

本文主要讲解微信搜索功能规则设计,大纲如下:

  • 全局与局部搜索
  • 搜索前置
  • 本地与联网搜索
  • 即时搜索
  • 搜索排序

全局与局部搜索

搜索范围一般有两种,一种是全局搜索,搜索的内容为整个平台的内容;另一种是局部搜索,即搜索结果仅为规定的范围,其好处可以缩小搜索结果范围。

微信首页、通讯录和搜一搜均采用全局搜索,即搜索内容为整个微信平台和第三方的内容。

从5个方面,全方位解析微信的搜索功能设计

小程序和订阅号搜索,则是局部搜索,即只搜索规定范围内的搜索结果,避免搜索结果含有其他非想要的类型。

从5个方面,全方位解析微信的搜索功能设计

搜索前置

微信是为数不多的将搜索范围前置(搜一搜,搜索结果页也有搜索范围筛选),而其他的 app 大部分是将搜索范围后置。即搜索出现结果,通过 tab 展示不同的搜索结果,例如 b 站。

从5个方面,全方位解析微信的搜索功能设计

为什么微信将搜索范围前置呢?

我在网上找到了比较靠谱的回答,以下是来自纯银社群 Tony 的回答:

微信目前没有能力去做全搜索结果的后置分类。这里的“没有能力”是个中性词,因为和网页这种格式化标准化的内容组织形式不一样,微信内部的内容格式高度不统一,难以统一搜索。

比如现在微信的搜索结果是有分类的,分类是 1. 最常使用;2. 联系人;3. 群聊;4. 公众号;5. 聊天记录;6. 收藏;7. 内容搜索(搜一搜)。其中有可能还插入一个“游戏类别”。同时前置也有分类,分别是“朋友圈”,“文章”,“表情”,“小说”,“音乐”,“表情”。

可以看到这些分类对应的内容可能是通讯录的联系人,可能是群聊名称,也可能是公众号名称等等。这些格式不统一的内容之间,缺乏一种像网页 pagerank,社交媒体 feed 的 edgerank 的排名算法,这在技术上就形成了很大的挑战,微信很可能“没有能力”。因为内容形式不统一,就很难用同一个标准算法衡量每种内容的权重,即使是淘宝的商品,因为统一是商品,所以基于“好评”“购买量”“价格”等特征来做 rank 的技术挑战也比微信要在“联系人”“群聊”“公众号”“朋友圈”“表情”这些纷杂的内容形态之间做 rank 要简单的多。

简单说,如果只搜联系人,微信能做排名;只搜朋友圈,微信也能做排名;但是揉在一起,微信就不知道怎么做排名了:联系人应该排第一栏还是朋友圈内容应该排第一栏,或者说是表情包应该排第一栏?这个结论如何得出?

因为微信没有能力做这些不同格式内容的搜索排名,或者说控制不了把多种不同格式内容糅合在一起进行搜索的用户体验。他只能采取“后置分类倾向于 IM 产品的应用内搜索,如联系人,群聊,公众号”,“前置分类倾向于内容分类搜索,如表情,小说,音乐”。来达到一个虽然不如 google 百度这样流畅自然,但足够可控的,比较稳定的搜索体验。

微信搜索过程中,因为搜索内容都是本地,所以采用即时搜索机制,这一过程中体验很好,用户不需要点击键盘上的搜索按钮,因为当前页即代表结果页。

本地与网络搜索

搜索机制分为两种,一种是本地搜索,一种是网络搜索。

本地搜索,即不需要通过网络数据即可检索出本地信息内容,其特点是速度快,不需要加载。

网络搜索,即通过网络数据检索出非本地存储数据的内容,其特点是可以获得大量的数据。

从5个方面,全方位解析微信的搜索功能设计

联系人、群聊、使用过的小程序、收藏文件标题等均存在本地,不需要联网即可搜索,无需加载。

搜一搜为网络搜索,即搜索的主要为网络全平台信息。

即时搜索

输入搜索词即时出现搜索结果,则为即时搜索。用户不需要点击搜索按钮即可得到搜索结果。

如下图所示:淘宝搜索,搜索关键词,出现搜索词的联想匹配。用户只能点击搜索或点击匹配联想词进入搜索结果页

微信搜索,用户输入关键词,即时出现搜索结果。

从5个方面,全方位解析微信的搜索功能设计

两者差异化是因为:微信搜索结果页可以在当前页面呈现,而淘宝,关键词的搜索页是搜索词的全部的商品,搜索过程页,无法承载搜索结果。

两者搜索结果的内容形态差异,导致出现这两种完全不同的设计。

搜索排序

微信主要为即时通讯工具,所以搜索的主场景围绕着:搜索联系人、群组和聊天记录展开。其中权重最高的是最常使用。其次是联系人、群聊、使用过小程序、公众号以及聊天记录等

其排序顺序如下图所示:

从5个方面,全方位解析微信的搜索功能设计

其中搜一搜为网络搜索,其他为本地搜索。

搜索结果排序,反映出用户对类型的高低频,越排在前面,搜索的频率越高。

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

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



文章来源:优设 作者:Echo的设计笔记

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

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

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



全面剖析视觉专题设计

ui设计分享达人

本文做设计探讨交流分享,不涉及商业,如有不足多多指教。 其中的优秀案例、插图部分来自站酷、花瓣和百度(详情请查看原链接)仅供参考学习。 

 本文从“视觉专题设计简述”也就是视觉专题设计的基础理论、“专题设计思维养成”就是总结一些常用的设计前期思维方向如何找到和“案例参考”三个部分构成。

首先是视觉专题设计简述:  

大家有知道”视觉传达艺术设计“专业吧,这个作为大学艺术设计专业中的一种(Visual Communication Design)是为传播特定事物通过可视形式的主动行为。大部分或者部分依赖视觉,并且以标识、排版、绘画、平面设计、插画、色彩及电子设备等二度空间的影像表现。总之就是针对眼睛可以看到的具备美学影响的设计符号,称之为“视觉传达”。 

视觉设计的领域很广,总的大致分为7种,所以印象中视觉传达专业的同学会的都挺多!!!哈哈哈 

字体设计、标志设计、 插图设计 ,这三种就是字面意思,大家也常接触就不做文字说明。 

而下面这几种,我用括号内的文字做区分说明。

编排设计(文字、图像、图形、广告招贴、书籍等编排设计) 

广告设计(主题、创意、语言文字、形象、衬托等要素组合进行平面艺术创意的一种设计) 

包装设计(综合运用自然科学和美学知识,为在商品流通进行的包装造型、结构、装潢设计) 

展示设计(主体为商品,在既定的时间和空间范围内,对展示空间的创作过程)

当视觉设计前面加两个字,“视觉专题设计”,这个就是将视觉设计加了限制条件,是针对产品某个主题活动,以特定风格传递产品想要表达的信息,为提高产品转化率,达到流量、曝光、口碑收益的运营设计。 

如果说需求方让你只是做一个视觉设计,那么他们的需求就是为了能够准确传达信息,有些童鞋做设计过于自嗨,沉浸自己的设计风格中,没有get到需求方一个简简单单的想法,他们只是想要传达信息,所以给出合适的信息展示就能完成,而设计图片的美感只是锦上添花,你说他们的审美不过关,也能否先反思一下自己的设计图是否能让别人不思考就看懂。如果他们要求是一个专题设计,这是为品牌服务,最后落脚点是品牌,那他们需要的就不仅仅是个美感、信息传递、突出符合产品自身的调性,以及带来流量的设计才是他们想要的目标。

 因此想要做好一个视觉专题,不妨倒推一下整个专题设计的目标: 

  1. 流量增长(当今最具价值证明,数据说话) 

  2. 曝光增加(好的坏的,只要有,就有热度,就有话题,区别同类的“脸盲”) 

  3. 口碑更好(毫无疑问对品牌属于积极正面的影响) 

  4. 带来收益(前三条都是为这条准备,收益才是王)

 所以当我们产出一个设计任务时,可以从以下4个不同层次的设计把控点来,反思调整自己的作品:  

首先,基础层级是传递出准确的信息,也就是这个信息是能被人识别读懂(如果一个视觉专题设计产出除了设计师本人能看懂,其余人不明所以,那么只能说明这个设计够“艺术”不够“过关”); 

其次,高一点的层级就是除了能准确传递正确的信息以外还能包含一定的信息量,说明这个设计传达出不止是一点有效信息; 

再来就是“视觉效果来源于匹配程度”,意思是看完这个设计我能够联想或者关联到一些和他相关的信息事物,证明此设计传达出了准确有效的信息还能让所有信息,规律的结合,成为观看者联想起过往浏览过事物与之匹配的事物; 

最高一层就是视觉与信息的唯一匹配,这也就是我以后看到这个设计就只会想起某个特定品牌, (例:看到少了一块的苹果图片,一定会想到“乔布斯的苹果公司、他的手机等”;看到一定会想到“腾讯公司的QQ企鹅”)


市场固定资源有限,想要瓜分到一口蛋糕, 现在每个企业都需要一定的专题设计来提升自己品牌的影响力,借机造势,作为企业形象与美誉度的提升突破口,结合各种销售玩法达到目标。

 企业发展的不同阶段对专题设计的要求也是不同,起初需要一个视觉符号来代表,让大众记住公司,这也是初期阶段受美学影响,各个公司和企业都想要注册商标;随着时间变迁企业的发展和转型需要,诞生了一批品牌符号,也就是我们常说的IP形象、文创、动漫、虚拟智能人工等等,这些是受营销思维主导催生的视觉设计产业链;最后能扛住时间检验,并且让自己的企业视觉设计做到极致,成为为社会文化审美的标杆,推动风格潮流的风向,就成为了一种特定的文化符号,这是所有企业向往的方向,也是最难成就的顶端。当我们能在制作自己的专题设计时,包含企业所想,那么你一定是个格局大家!

接下来是讲述思维养成的一些方法:拆解需求——了解清楚现在的事实、目前商业需求的背景,收集通常这样的需求在市场上的视觉风格,分析定量现状和定型现状,从而推导出商业假设,得出用户体验目标,反复推敲找出设计发力点。    


定量属性是指以数量形式存在着的属性,并因此可以对其进行测量。测量的结果用一个具体的量(称为单位)和一个数的乘积来表示。以物理量为例,距离、质量、时间等都是定量属性。

定性是指通过非量化的手段来探究事物的本质。其概念与定量相对应。

定性的手段可以包括观测、实验和分析等,以此来考察研究对象是否具有这种或那种属性或特征以及它们之间是否有关系。

定性研究是与定量研究相对的概念,也称质化研究,是社会科学领域的一种基本研究范式,也是科学研究的重要步骤和方法之一。

如果说定量研究解决“是什么”的问题,那么定性研究解决的就是“为什么”的问题。

 专题设计一般分为三类:活动、信息、组合;确定好自己的设计类型,

活动类专题设计——时效性强整体活动时间短、活动类主体利益针对人群、设计调性喜庆,通常大红色,

为了达到想要的商业回馈,争取利益点,主要信息简单明了; 

信息类专题设计——活动周期可循环、活动类主体利益是产品、设计调性多数贴合品牌性质,为了

稳固原有商业形象、让品质再次提升,拉近与用户的距离,多数采用品牌的ip或者文艺的插画来凸显温馨; 

举例为“京东618”和“face u”、“支付宝 花呗”、“飞猪旅行”各有特色 

 

信息组合类的专题设计——活动周期可长可短,也没有特定的时效性,既包含活动类的特点,也包含信息类的特点。它的定量现状和定性现状都可用不同场景区分。从举例就可看出, 

“阿里巴巴云栖大会”、“成都国际设计论坛”、“台北灯光节”、“海信发布会” 主视觉海报——

 思维方式2是分析构思: 

团队的小伙伴一起头脑风暴,发散思维写出与主题相关的,尽可能的多写,然后再根据意向分类,提取出自己关键词汇,结合词汇在脑海产生的视觉元素,整合筛选定好方向

 方向定好后,我们就要选取如何通过创意与表现,来实现专题设计让人记住。 

常见的创意方法,通过流行的表现风格做视觉呈现,如三维立体、手绘插画、赛博朋克等;

通过独特风格、操作难度高、技术含量大的表现手法做视觉呈现,如手工塑造、超写实还原、概念模拟等; 

通过具有情感化设计的图文做视觉呈现,图文具有强有力共性(例如“杜蕾斯文案”、“江小白酒情怀”堪称文案绝绝子······)通过动画实现等等···· 

而表现从浅至深就是,引导——刺激——价值 

Å

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

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



文章来源:优设 作者:YiVi_eleven

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

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

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



史上最全|数据体验好就好吗?—体验度量篇

ui设计分享达人

上一篇文章讲解了产品的数据都有那些,设计师可以通过数据进行设计决策,并且分享了“数据好体验不一定会好的这个观点”。今天这一篇文章咱们聊一聊“怎么用度量产品体验”这个知识点。


流量红利退去进入互联网下半场,所有产品都在比拼产品体验,这些年体验的设计价值越来越多受到公司重视,几乎所有的互联网公司,都会说:“产品(用户)体验设计”,但是大部分产品设计从业者,都弄不明白“产品(用户)体验设计到底是什么?产品上线了我们怎么去衡量设计策略的有效性,以及怎么评估现阶段产品的产品(用户)体验”的状况。这篇文章,我们就把目光锁定到“用户体验”和“衡量标注”两个问题上。


文章结尾我将分享腾讯中国用户体验行业发展报告,最近总有粉丝反应链接过期问题,如果获取不到可以私信我。





我们在项目中经常听到产品经理定的产品目标是“提升用户体验来提升产品数据”,貌似很多项目都能和用户体验沾点关系,首先让我们从了解“体验”概念这个角度,来解析为什么提升用户体验就可以提升产品数据。


一、为什么是产品(用户)体验


1.1 体验设计的概念

产品(用户)体验设计,我们可以把这个词拆开来看看产品、用户、体验这三个词都各自代表的含义:

产品:可以理解为用户在享受服务过程中承载服务的载体,比如手机、电脑、应用程序等。

用户:广泛的含义是使用者,即产品的使用者或享受服务的人群。

体验:这是一个过于宽泛和宏大的词,也是一个比较抽象概念,简单理解为用户对产品的主观感受,这个感受可能是好的,也可能是坏的。

总结一句话体验设计就是用户与产品的发生互动行为后,用户产生的心理感受。如果用户在产品使用场景中完成期望目标,所产生的愉悦的感受体验,称为好的用户体验。



1.2 体验设计的原则

产品(用户)体验设计 User Experience Design(以下简称体验设计)中“用户体验”的概念最早由Don Norman教授(曾任苹果用户体验架构师)在上世纪60年代提出并进行了系统性研究。他表明,用户体验设计,是用户在使用产品的直观感受,并归纳出好的用户体验应以用户为中心,是尊重用户的、是有效的、顺畅的、一致的、符合直觉的。后有人把Don Norman教授这段话归纳为体验设计应遵循“可用性、易用性、满意度”这三个原则,如图:


1.3 体验设计是迭代的原因之一

体验设计在产品迭代中有多重要,看下面这种张图你就会懂了。现在互联网产品的迭代方式是“小步快跑,快速迭代”,产品迭代无外乎两个原因;

1) 产品利益:为了推出迎合市场的新功能,促使用户进行付费行为获取商业利益

2) 用户体验:不断优化产品体验、提升产品质量、不断的实现用户健康增长。

由此可见,体验设计在产品迭代中拥有举足轻重的分量。


1.4 体验设计的3种价值

体验设计的价值体现在用户心理感受与产品业务价值发生关联的场景中,比如愉快的购物体验、高效的退货业务等这些场景都会促使用户信任产品从而提高用户下单率。在这些场景中就会体现体验设计的产品价值和商业价值,产品的页面清晰操作简单很容易触发用户愉悦的心理感受,从而进行下单的互动行为。

另外我还要补充一点其设计价值,因为设计师是站在用户的角度考虑问题、解决问题的职业,而ui设计师的核心价值就是提升产品体验,所以综上所述,体验设计的价值在于设计价值、商业价值和产品价值这三点。


二、衡量体验的三个维度


2.1 衡量体验的所有指标

体验是一个比较抽象的概念,很多场景中所表达的都是用户对产品的主观感受,最开始判断体验的指标也很抽象,后来人们把抽象的指标和埋点的数据相结合,通过数据去衡量比如页面访问次数、用户停留时间、产品加载速度等。

*在工作中常会用到易用性、满意度、nps等维度再结合后台数据埋点这种方式进行用户行为分析来评估用户的体验指标是否达标。


2.2 衡量体验的三个维度

现在为了方便大家进行分类,大家把衡量体验的所有指标都是按照用户感受、用户行为、系统表现这三个纬度进行度量:


2.3 不同形态的产品体验目标各不相同

用户感受、用户行为、系统表现只是一种简单的方法,大家要有这样一个认知,不同细分类型、不同生命周期的产品,对于各个指标的偏重也有所不同。如协同办公类的产品更注重协同性,而数据产品更注重易理解性和一致性。初创期的新产品需要容易上手,对易学性要求较高,而成熟期的产品可能更需要考虑各个角色的需求满足度。


2.4 C端和B端产品的体验目标有啥不同

市场上的产品主要分为两类c端和b端,因为两类产品的用户属性、盈利模式、产品定位不同,所以两类产品的体验目标各不相同,最大的区别在于用户、体验、数据上的不同,接下来让我们聊一聊两款产品的体验目标侧重点各自都是什么。


a c端产品体验的侧重点

c端(Consumer)产品通常指消费者或者个人终端用户使用的客户端,类似产品有微信、知乎、qQ音乐等产品。

因为c端产品的用户忠诚度较低,一言不和就换产品使用,所以为了留住用户各大产品不惜成本追求极致的体验。帮助用户解决需求的同时,与其他竞品相比产品的整体体验相对有趣是现在c端产品的体验目标。


b b端产品体验的侧重点

B端(Business),通常为企业员工或商家使用的系统或平台,类似产品有SaaS软件服务系统——微盟、oA办公自动化系统——飞书、cRM客户管理系统——销帮帮等产品。

而B端产品具有链路冗长、操作复杂等特点。b端的产品体验核心是降低用户上手门槛,提高产品的工作效率,帮助用户高效的完成工作任务是现在B端产品的体验目标。


*在B端产品中经常会提及“易用性”这个专业名词,为什么呢?那是因为B端产品针对的是商家,用户,所以对于这类用户高效是他们的核心需求,那怎么样才是高效呢,那就是后台系统要做得极其简单也就是产品的易用性要高。


三、用户体验的三大评估指标

通过上面讲解大家可以了解到判断用户体验的具体产品数据和抽象概念的指标有很多,这里我着重讲解三个在行业内使用最为常用的三个比较主观的体验指标,即满意度、净推荐值、费力度

为什么只讲解这三个呢,那是因为这三大评估指标分别代表体验设计的设计价值、商业价值以及产品价值。


a 设计价值——满意度(CSAT)

这应该是最经典的衡量指标了,也是更大互联网对于产品来说最为看中的指标。早在于1965年“满意度”这个概念就被提出,在我们在生活中都可以看到关于客户满意度方面的调研功能,比如app storr对产品的体验,送完外卖对店家和送餐人员的服务点评等。

优势:

满意度的扩展性强非常高,可以用于询问用户各种问题,可以看整体的产品体验满意度,也可以看具体的某个功能的满意度。

劣势:

满意度对未来行为的预测是最差的,满意度能够体现出用户对产品短期内的幸福感,但无法体现用户对产品的长期态度。


B 商业价值——净推荐值(NPS)

净推荐值是由贝恩咨询企业客户忠诚度业务的创始人佛瑞德·赖克霍徳(Fred Reichheld)在2003年提出,它把用户分为推荐者、被动者和批评者这三类,通过计量用户的推荐意愿的强烈度而判断用户的忠诚度。

优势:

他常作为未来的客户满意度指标,精准的测量某一项的客户满意度,与满意度相比这个指标更为直观,用于衡量用户长期的幸福感,也用于全链路全流程的满意,判断用户忠诚度,也可以看到项目未来一段时间的发展趋势。

劣势:

虽然获得的指标是最为直观的,但度量的问题往往只有一个所以反应的用户视角会比较狭隘。并且设计的问题也不能证明推荐者会真的推荐,所以得到的结果并不一定是用户在现实生活中的推荐行为相关。


C 产品价值——费力度(CES)

客户费力度这个概念在2010年在《哈佛商业评论》中被提出,可以理解为是升级版,用于询问用户在产品使用过程中高频出现的问题,主要是为了满足用户的满意度但是无法体验用户的忠诚度的用户所设计的。


优势:

帮助产品设计发现和解决复杂流程中的问题,比如B端产品中,可以通过数值的表现,对下一次改版进行想法升级。

劣势:

对于衡量产品质量比较适合,但不是很适合衡量品牌在用户中的价值地位。并且并能用来来挖掘用户真实的评价和需求痛点。


*在这里还有一个知识点向大家普及,就是可用性测试——SUM。






每个设计师都在遇到这样的问题;

设计领导:你怎么证明你做比其他设计同事好

开发同事:你们设计只关心美不美,浪费研发资源 产品经理:我觉得这个功能优化并没有比竞品的好?

公司老板:你们对产品盈利都做那些什么贡献?

我们在做真实项目的时候会发现几乎所有的设计策略都能和用户体验扯上关系,比如我们通过xxx提升了用户体验从而提升用户在xxx场景的用户满意度。这样折腾了一圈,但是发现好像有产品没有什么实质性的效果,设计很难度量也难度凸显设计的价值。


一、为什么要会设计度量


1.1 设计度量的意义

a 体验面前的拦路虎

其实上面这个问题曾经其实也困扰了我很久,但随着做的项目越来越多,我现在从体验设计师的角度尝试回答这个问题:

1)“体验”是用户纯主观的感受,概念比较抽象,从这个情况来看是很难被度量的。

2)促成体验好与不好的因素有很多,很难定直接定位体验问题的根本原因。

3)现在产品迭代频繁,提升了一个场景的体验,往往另一个场景体验问题就会暴露,很难确定产品终极目标。


但是作为体验设计师,我们需要在项目中对体验有以下三点比较清楚的认知:

·体验是直观的用户体验感受和清晰的设计价值体现。

·体验要以体验为中心做有价值性的探索设计破局点。

·体验需要对设计产品迭代有明确的改版目标。


b 度量的意义

我们要完成设计师的使命,在项目中凸显设计的价值,所以我们需要一套科学的、成体系的、可量化用户的体验完整的度量框架,能够聚焦用户体验问题作为驱动、提炼提升产品体验的目标,从体验角度解决体验需求。项目中的度量有其三点意义:

1)可以具像化有刻度的的体现用户主观感受的测量工具。

2)可以通过度量提炼出以用户行为作为产品迭代目标。

3)可以更好的根据自己公司业务场景搭建体验设计体系。现在很多公司都有自己的度量体系,比如阿里,滴滴为体现设计在业务中创造的价值,都有自己的设计质量评估体系。他们通过划分场景、量化设计可以更准确的刨析出那个体验的根本问题。并且评估潜在用户的体验感受,为之后的产品改版找到体验优化方向。


1.2 设计度量的概念

度量的概念在我们的生活中很常见,以下是对度量比较严谨的概念解释:

【度量Measure】是一种测量评定对象的方式,它帮助我们结构化的获取对象的状态与变化,我们运用这些数据进行洞察,转化为有用的信息,帮助决策和优化,这个过程也是分析诊断的过程


二、设计度量的原则

用户体验度量体系是可以通过某种形式测量采集得到的,例如对用户无感知的埋点法、由用户直接反馈的问卷法等等,设计度量作为项目中重要一环,不仅能够验证产品及设计策略的有效性,还可以有效验证了我们服务化升级目标及设计目标拆解的精准性,也为后续优化带来了更多的线索。

所以设计度量的建立应具有有效性、稳定性、针对性、扩展性、可持续性这五个原则。

a 有效性

我们通过某种形式测量产品体验时候,把保证“体验好”转化为可以测量的概念,如用户留存率、流失率、关键操作的完成率等,通过这些直观数据的改变去衡量抽象体验的问题,在这个过程中需要保证数据结果是真是有效的。

b 稳定性

人与人之间的体验差异本身是具有差异性的,用设计度量时候人的感受往往会受到环境、情绪等影响,产生随机误差。我们需要度量的结果尽量减少外界环境的干扰,出于这个目的度量需要具有一定的稳定性才能进行真实结果反馈。

c 针对性

可以反应用户体验问题的指标有很多,数据埋点也有很多。本身数据是有欺骗性的,所以我们在做设计度量时应该划分场景,即不同场景对应不同的数据埋点,有明确的度量目标,才能做到只聚焦某个产品的端上体验问题,那这个度量结果才有针对性。

d 扩展性

我们要保证输出的指标和测量模型,不仅适用于整体,也可以针对某个场景某一个交互环节,某个界面进行度量的测量,度量应该具备扩展性。

e 可持续性

度量的目的不仅是反应当时产品存在的问题,也要预测出未来产品规划方向,度量指标的可持续性指应持续观察、跟踪、和优化指标,使得度量体系可以贯穿在产品整个生命周期中,也利于对产品迭代优化后指标数据的前后对比。



三、体验度量和可用性测试的区别

可用性测试大家一定经常听,在很多测试场景,我们很容易把体验度量和可用性测试的概念相混淆。

可用性测试:通常是在开发完成之前,让用户完成特定的任务,通过观察用户在使用产品时的反馈,从中发现设计中存在的可用性问题的一种测试方法,其目的就是为了付出最小可行产品来做正确的设计,避免消耗太多开发资源做产品。

体验度量:是一种更宏观的视角,强调用户与产品之间的整体交互,以及在交互过程中形成的想法、感受和感知。用户判断产品现在阶段暴露出来的体验类型问题,对未来设计的一种预判。






“满意度—有用”,“净推荐值—有效”,“费力度—易用”这几个观测维度贯穿了互联网1.0到4.0时代,在不同时期,各类模型普遍都会涉及到的维度,根据以上三点也严格的度量的标注和具有较强的普适性、通用性的度量模型,接下我将带领大家一一了解这些度量模型都有那些。


一、度量标准都有那些

方便大家区分可以把度量标准梳理成国际标准和国内标注两个部分,大家了解即可。


1.1 国际的标准

A ISO-9126 软件质量模型

ISO/IEC 9126 (1991) 软件质量模型是是一种评价软件质量的国际标准,包括3个层次,由6个特性和27个子特性组成:

1)质量特性

2)质量子特性

3)度量指标

* 在这里设计师应该注意「适应性」、「易安装性」、「易理解」、「易学」、「易操作」和「一致性」,产品应注意「共存性」「易替换性」和「可移植性的依从性」,其中「易用性」的概念涵盖了用户体验中常规易用性的维度。


b BS ISO/IEC 25010-2011软件产品质量需求和评估(SQuaRE)

该模型是ISO/IEC 9126的升级版,包含8个特性和36个子特性,相对比较全面的了,大家可以从各特性的定义、范围与度量标准评估自己产品。


1.2 国内的标准

A SO-9126 软件质量模型,评价软件质量的国际标准

该模型重新定义了「效益」、「效率」、「满意度」即定义为一个产品可以被特定用户,在特定场景下,达成特定目标的效益,效率和满意度。

- 效益(effectiveness):用户完成任务的精确性和完整性。

- 效率(efficiency):用户完成任务所消耗的资源。

- 满意度(satisfaction):用户对任务流程的可接受程度。


b ISO-9241 关于办公室环境下交互式计算机系统的人类工效学国际

SO9241对Usablity的定义,在今日的设计质量评估仍旧有很强的指导性和应用性,具备很强的可操作性。比较重视「效率」和「效益」这两个维度,在任务完成程度和所消耗的时间/人力资源的场景下,评估出特定任务的可用性,在流程较长的B端产品体验度量中尤为常用标准。


1.3 其他

这里我还查阅到和体验有关的国外资料,称之为标准也可以、称之为模型也没错,他们分别是“蜂巢模型、尼尔森十大可用性原则、USE量表”,有兴趣的同学可以自行查找了解。


二、度量模型都有那些


度量模型也分为国内和国外这两部分讲解,这里介绍常用的8种类型,其中HEART模型是目前比较成熟的体验度量模型,也是各大互联网公司的应用最广泛,普及率是最好的模型之一了。


2.1国外模型

a 谷歌HEART模型

HEART是GOOGLE公司基于商业和技术的产品评估体系提出的模型概念,它包含5个维度,适用于市面上大多数C端类产品。

这五个维度分别是:

1)愉悦度:用户主观的体验即使用产品或者功能时是否会感觉到愉悦感。

2)参与度:用户对产品内容是否感兴趣并愿意主动分享给其他人。

3)接受度:用户看到新产品或新功能可以接受并且愿意尝试新的功能。

4)留存度:在一段时间后,新、旧用户是否愿意回来继续使用产品。

5)任务完成度:在使用过程中,用户能够高效,准确、流畅地完成当前任务。

如果结合上一篇数据认知的文章,就可以通过以下数据去衡量产品的体验度量,如下图:

这个模型虽然是全维度、多参数、多角度、系统性的评估方式也是目前普及率最高的,但是也有其自身缺点。



b 门户电商PULSE模型

PULSE模型以网站为维度来衡量体验的模型,通过商业指标和技术指标,衡量网站的整体表现。同样包含5个维度:

1)页面浏览量:属于产品指标,指页面被用户访问的次数,以及页面的点击转化情况。

2)运行时间:属于技术指标,指衡量网站可以持续稳定地运行时长。

3)系统延迟:属于技术指标,指衡量用户打开页面的速度是否流畅。

4)周用户活跃:属于产品指标,反映网站的实际运营情况,估计产品的用户规模。

5)商业收益:属于商业指标,指产品的营收情况,不同类型的产品类别是不同的,比如电商类更关注GMV等指标,视频业务关注广告,电子书业务关注VIP售卖等。


c 谷歌GSM模型

GSM模型是Google的用户体验团队提出的一种指标体系,即目标(Goal)、信号(Signal)、指标(Metric)这三个纬度做为另外横向的参考纬度,他最有价值的一点是把GSM模型和HEART模型想结合,设计一个更为全面的体验度量模型,具体内容如下图。


2.2 国内模型

a 阿里云UES模型

UES应用场景更加适合B端产品。是阿里云设计中心基于易用性量表去扩展而成的度量模型,它的核心纬度包括易用性、一致性、满意度、任务页效率、性能。其中易用性是B端产品的重要属性,他的背后就是易用性量表的标准,与常规的易用性量表相对来说更为成熟和精细化。


b 阿里妈妈四项五度模型

四项五度模型应用场景更加适合C端产品。它是阿里巴巴1688UED团队在Google的HEART模型的基础上升级的度量模型,从用户的行为角度出发,四项分别是「当下、未来、态度、行为」;五度分别为「吸引度、完成度、满意度、忠诚度和推荐度」。


c 酷家乐四象模型

四象模型是面向工具类产品的体验度量方案,它以「角色」与「心智」「功能」和「性能」这四个维度,分析人与工具之间的微妙关系。


D 58同城B-Metric

B-Metric是一个关注业务特点与用户角色的度量模型,也是一个个比较全面的指标体系,该体系包含基础体验、角色体验、企业价值三大部分,基础体验是提供产品最基础体验的保证;角色体验则是我们在设计产品最为关心的体验纬度;企业价值是产品所带来的盈利情况,也是体验相关的实际价值。


E 支付宝PTECH模型

PTECH模型是阿里巴巴支付宝团队设计的度量模型,它是基于HEART模型升级后基于用户行为分析和应用性能检测的模型,比如:将愉悦度改为满意度,将任务完成度改为任务体验,在参与度下并入接受度、弱化留存率,引入清晰度与性能体验的全新维度。


2.3 三种测量方法

模型种类有很多,这里说明一下测量三种方法,大家简单了解即可。






一、度量体系需要具备两种模式

前面讲到了体验是一个抽象的概念,必须要有数据这种比较具象的概念做支撑,在《u一点料》这本书中,作者把数据比喻成设计的理性之光,我这种观点认为用在度量上也不为过,因为度量的体系是建立在数据之上的。

而这种度量体系的搭建本身就是为了用户着想,以创造用户价值为出发点的体系。所以我认为度量体系的搭建应该具备两种模式,即“数据驱动+体验驱动”这两种模式


二、三环四步打造自己的度量体系

体验度量体系虽然是一种很复杂的体系,但是如果以化繁为简的思路去刨析它的话,我们可以讲这种复杂的体系概括为三个层级来解决问题:聚焦体验的问题——体验目标的指标——后续指标的追踪。

聚焦体验的问题:就是在业务链路中找出最能提升用户体验的关键问题,并把这个问题进行可度量的转化,换一个角度说找出的这个问题也是我们搭建度量体系的目标。

体验目标的指标:当体验目标被我们明确之后,就可以利用市面上现存的度量体系来进行度量纬度的测量,当然也可以理解为这是定义体验标准的过程,既然有标准一定会有定义标准的指标,而筛选体验目标的指标就是在这个环节被筛选出来的。

后续指标的追踪:这一个环节就是首位的环节了,其中包括验收和追踪两个步骤,在度量体系的标注线客观的捕捉其变量的特征,为后续的项目改版方向提供线索支撑。


2.1 第一步

凡事都需要有一个目标,确立体验目标就是体验度量的开始,清晰准确的目标决定度量体系的最终质量。这里有两个方法可以帮助我们梳理出用户的产品的体验目标。以下内容我以金融产品为例子讲解每个步骤我们应该做什么。

a 利用kcon模型划分需求范围

体验和需求分不开的,在卡诺模型(KANO)中,将产品功能的需求 分为五种属性:必备型需求、期望型需求、兴奋型需求、无差异型需求、反向型需求。以金融类产品为例子,我们需要找到必备型需求、期望型需求、兴奋型需求,来确定用户的需求都有那些。


b 通过定性、定量确定体验目标

也可以通过定性、定量的方式把划分后的需求,在梳理成以满意度、易用度、有效性为三个纬度的体验目标,比如

满意度:产品内务对用户的吸引力、产品界面是否美观友好给人舒适感觉、客服是否专业性高可以即使有效地回复用户问题、用户对品牌是否表示认可是否用户对品牌有赞美,用户会产品的是否有信任感觉、用户是否愿意持续使用产品等。

易用性:是指产品功能对用户的难易程度,比如功能入口是否容易识别,用户是否能快速找到自己所需要的内容,产品操作步骤是否简单符合用户习惯、用户在浏览内容适合时是否可以快速阅读和理解、产品对用户不恰当的操作是否有提示和限制,产品对用户的错误操作是否有提示,用户能否快速地知晓产品的使用等。

有效性:用户账户资金是否安全、产品提供的内容服务是否有价值、用户可以顺利完成核心任务、产品基础功能是否健全完备、产品提供的信息内容是否准确完整、用户查询信息和提交信息是否能即使响应、产品运行速度是否稳定。


2.2 第二步

a 筛选最佳度量模型或者工具

前面讲了很多关于度量模型的知识点,如果你在之前的工作中没有接触到度量提醒,那么这里我将讲解一些关于“怎么选择度量模型”的办法。

行业界内的体验度量上的方案,大致可以用“客观度量、主观度量、主观&客观结合度量”这三个纬度进行区分。

客观衡量法:通过数据埋点监测用户行为数据。比如经典的 PULSE 模型,还有大家熟悉的运营指标,活跃用户数、留存率、点击率等等。

主观衡量法:就是收集用户主观的评分。比如满意度、费力度,可用性测试量表(如SUS)等等。

主观+客观衡量法:把用户行为数据和主观的评分结合起来,多数用归一化方式得出一个总分,把分数划分成不同档次作参考。比如Google 经典的 HEART 模型,PTECH 模型,阿里云UES模型、58同城B-Metric等等。


*在这里我还是比较推荐使用 HEART 模型(Google),因为他的五个纬度包含了定性和定量两个数据纬度,也可以从宏观和微观两个角度解析产品。



b 结合数据验证模型

上一篇文章《数据认知篇》简单的介绍几种数据测试的方法,比如A&b TASR测试、灰度测试、可用性测试的方法,这里就可以派上用场。通过测试中的订单量、点击率,活跃度的数据波动我们可以直观的对应出我们产品质量、系统性能等的体验类型的问题。这样我们的体验度量体系的雏形就搭建完成。


2.3 持续监测,不断优化

最终我们集合成这样的表格就可以了。度量体系最重要的就是发现具体的体验问题以及后续的改进方向。

明确体验目标:我们产品目前存在什么体验问题,他的严重程度有多少,是否对产品的盈利造成影响。

改进方向:我们要改进什么场景,要用什么设计策略怎么提升产品的用户体验等。


总结

体验设计是产品的重要一环,除了研发,持续的用户体验活动可以使每个人的努力更有效和更有价值。在设计过程的每个阶段,不同的用户体验方法可以使产品开发工作保持在正确的轨道上,符合用户的真实需求而不是想象中的需求。

产品的体验研究,研究的越早,研究结果对您的产品的影响就越大,而且根据最后的体验定义,有助于做出现阶段或者未来产品的迭代规划,

在所有阶段进行用户研究,正如我们在下面展示的,在任何合理的项目计划的每个阶段都有一些有用的东西可以学习,每个研究步骤都会增加你的产品价值。

一下是我在国外网站搜集到的一篇关于“用户研究的方法论”,文章地址我输入到文章末尾处。






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

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



文章来源:站酷 作者:斜杠7湿兄

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

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

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



UI&UE实用方法论 | 「美即好用效应」就是UI存在的价值吗?

ui设计分享达人

有研究表明,人们会自然地认为外表更漂亮的人拥有更加优秀的品质特质。即我们对一个人的外表印象会影响对他品质的感受和思考,心理学上将这种行为称为「光环效应」


同样有人认为,这样的光环效应作用于人机交互设计领域也一样是奏效的。好看的设计,会让用户认为产品更好用,外观会影响用户对产品可用性的感受,这就是所谓的「美即好用效应」



一、关于该定律的实验


前面我在谈「费茨定律」或是「恐惧留白」的时候,大多数方法论都可以溯源到真实的科学实验或心理学文献记录。


但在查找「美即好用效应」资料的时候,所有内容对初始实验都是一笔带过:


1995年,日立设计中心的研究员 Massaki Kurosu 和 Kaori Kashimura 通过26种不同的 ATM 交互界面对 252 位参与者进行详细的用户体验测试。结果发现,这些因素中很大一部分对真实可用性的影响微乎其微,反而界面美观度对真实可用性的影响出乎预料的大。


表现可用性的决定因素对真实可用性的影响系数大多在 0.000-0.310 之间,而界面美观度这个数据达到了 0.589。



我试着到很多地方去搜索更多关于该实验的记录,却都没有找到相关论文。所以对于这个实验的结果,我只能保持观望态度。(也可能是我检索资料的能力还有待提升...)


首先是我无法确定所有参与者在这个实验中的需求目标是否发生变化,概述中既没有阐明对照组,也没有告知实验对比过程的细节。


其次在「美观度对可用性的影响较大」的实验结论中,科研人员是如何定义「美观度」的标准的?审美是一种主观意识,那么「美观度」应该如何被定义,科研人员究竟是从配色、排版、统一性,还是动态和谐的交互流程定义了实验界面的「美观度」?我们也不得而知。


所以「美即好用效应」在人机交互领域的可用性,究竟是一条科学实验结论,还是属于用户心理研究,抑或只是人传人传出来的自然规律,作为笔者,我本着对我读者负责的前提下,也只能画个问号。


二、「美」在商业产品中的价值层级


在人们追求基本生理需求的时代,「美即好用效应」的作用力必然不会比温饱时代的大。


为什么这么说?从马斯洛需求层次理论模型中就可以看到,对于用户而言,“审美需求”是在保证了一系列缺失性基础需求之后,才会追求的需求层次。



马斯洛需求层次理论映射到用户体验五层理论也是异曲同工,从战略层到表现层,越是重要的层级挂靠的马斯洛需求层次就越基础。拥有巨大商业价值的产品,往往影响其在商业市场中走向的,都是基础需求,而非高层级需求。


这就为什么我前文说道,很多人抽离前提来谈「美」的重要性。用户对「美」的追求是在满足了基础需求的前提之下,如果一个产品的战略、范围层难以落地,空谈「美即好用效应」便是空中楼阁罢了。


表现层在没有可靠的战略前提之下,是毫无商业价值的个人狂欢。


三、UI到底该关注什么


UI是一项纯艺术性创作的职业吗?在我刚接触UI行业的时候,我是这么单纯地认为的,但现在已经不再是了。


我前一阵子看了像素范泡泡老师的直播,其观点我非常赞同,也在社群里和大家进行过了交流。在此我引用两个泡泡老师举到的 iOS UI 的案例,来阐述 UI 探索的「美」,究竟是在探索什么。


  1.iOS为什么激励大部分APP适配暗黑模式?  


大概在去年,网传苹果将强制要求 APP Store 中的应用程序要适配暗黑模式。暗黑模式也掀起了一轮新的视觉设计潮流,暗调的设计语言让产品在视觉上看上去更酷更年轻。


但苹果激励大部分应用程序适配暗黑模式,只是单纯的为了视觉上的好看吗?其实并不是。


是因为后期的苹果硬件设备多采用OLED屏幕技术,比起其他厂商的LCD屏幕技术,有其优点,但也有其缺点。OLED采用低频PWM调光模式,也就是通过低频频闪的方式控制屏幕亮度(一亮一暗、一亮一暗如此反复)。在调低屏幕白光亮度的情况下,频闪很容易造成用户视觉疲劳。这一点极可能成为苹果设备的销售弱点。


于是苹果希望在用户需要调低屏幕亮度的场景中,通过暗黑模式的视觉手法,大量运用黑色,这样OLED屏幕的光源就可以直接关闭,而不需要采用频闪的方式来控制屏幕亮度,从而减轻用户视觉疲劳的现象。



(ps.看不懂的朋友莫急,文末我放了B站up主硬件茶谈的《全网最简洁易懂的OLED与LCD屏幕工作原理与优劣科普》视频,感兴趣的小伙伴可以查看)


苹果主动落地暗黑模式的开发,并且激励在应用市场上架的其他应用也适配暗黑模式,实际上是与其商业目的挂钩的一种行为,只是将解决方案落实到了表现层。


  2.iOS从拟物风格向扁平风格的转换  


iOS7掀起的扁平设计风潮,至今还在影响着UI设计趋势以及用户的审美。但你硬要从个人审美角度去评判曾经的拟物风格与现在的扁平风格究竟哪个更好,只能说仁者见仁。


泡泡老师认为,iOS 拟物风格向扁平风格的转换,也不仅仅是基于视觉「美」的考虑。因为曾经的苹果在全球移动品牌厂商中,拥有更加优质的屏幕硬件,他们的屏幕可以高清显示更多的设计细节,于是仿真的拟物风格在苹果设备上通过其光影、阴影的展示,可以突出苹果的屏幕优势,从而成为其商业卖点。


但后来随着移动设备品牌商的硬件差距不断缩小,高清显示已不再成为苹果独家的亮点,苹果也就不需要再花费更多的设计成本在拟物设计上了。此时的拟物设计成本并不能再持续带来高效的商业回报,从而转向扁平风格,一方面可以提高设计效率、降低设计成本,同时对其周边设计的延展性更高。



从这两个案例中可以看到,UI虽然做的是表现层的工作,但实际上也是在为用户、为商业、为战略而服务。除了视觉的「美」,我们也应该关注产品背后的数据、商业价值,我想这就是UI与纯艺术性创作型设计岗位的区别吧。


四、总结


说了一堆,感觉我好像一个「美即好用效应」的ANTI份子...其实也不全是。我清楚「美即好用」在一些商业案例中的运用,我不否定该定律存在的价值,只是想表达一些看法。


首先我认为不应该在产品还没有扎根市场,拥有产品自身的商业价值之前,过分拘泥于视觉表现层的内容。在腥风血雨的互联网商业市场,迅速小跑迭代,做好用户数据分析,增强产品自身留存实力、激活市场潜在用户,比把目光放在视觉表现上可能更有价值。当产品在一个领域或市场积累了一定忠实度较高的用户之后,「美即好用效应」可能才会发挥其功效。


其次我想对话同行的UI设计师,我一年前在《UI如何提升个人价值?UGD思维了解一下》中已经说到过,UI设计不应只停留在视觉表现层,想提升自我价值,一定要培养超脱表现层的思维能力。


我们不应该一味地信奉「美即好用」。作为UI设计师,我们要通过避免「美但不好用」或「不美但好用」的极端来平衡视觉表现与功能的体验。

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

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



文章来源:站酷  作者:UCD耍家

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

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

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


动态生成的DOM做点击事件无效

前端达人

有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果。

例如:

复制代码
<section> 测试动态生成的DOM点击事件 <br />
    </section>       
        <script src="jquery-1.11.2.min.js"></script>
        <script> $(function () {
                $.ajax({
                    type: "post",
                    url: "Handler1.ashx",
                    data: {},
                    success: function (data) {
                        $("section").append(data); //把获取的标签动态添加到页面中 }
                })
            });
            $("#test").click(function () {
                alert("Smile");
            }) </script>
复制代码

生成页面,点击A标签无效果。

这里只介绍两种解决方法。

①把事件写在生成的字符串当中,感觉很low

里面什么方法名外面就声明一个(需要带参就传参)。

②我一般喜欢在JS里面直接写点击事件,不喜欢在标签里面写事件

 我们直接写这个标签的点击事件是没效果的,我们就换个写法,利用On来完成。

 

 这样也可以完成点击事件。

 

 

另附:a标签的href也是可以执行脚本的,点击事件也会执行脚本,点击事件优先,然后在执行href链接。

 

 下载一般都是把A标签的Href给个一般处理程序的链接(参数就用?传值)。但我这个下载的参数是动态生成的,在后台生成字符串的时候没有参数。需要在前台根据用户选择的来进行传递参数。所以需要我们动态生成Href的链接

 

复制代码
  //下载 $("#uploadInfo").click(function () { var uids = "";
            $(":checkbox[name='A']:checked").each(function (i, item) {
                uids += $(item).attr("data-id") + ",";
            }) if (uids === "") {
                NewAlertBox("warning","请最少选择一项",2000);
            } else { var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids;
                $(this).attr("href", urls);  //执行完了点击事件,把Href赋值,然后自动跳转href链接 }

        });

1

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

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


文章来源:博客园

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

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

JQuery阻止事件冒泡

前端达人

冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

我们在平时的开发过程中,肯定会遇到在一个div(这个div可以是元素)包裹一个div的情况,但是呢,在这两个div上都添加了事件,如果点击里面的div我们希望处理这个div的事件,但是呢,我们不希望外层的div的事件也执行,这时候我们就要用到阻止冒泡。

通俗点来说吧,你在家里看电视,躲在自己的小房间,但是你不希望声音传到隔壁父母的耳朵里,这时候,你可能躲在被窝里,或者墙壁的隔音效果很好,阻隔声音可以理解为阻止冒泡。

复制代码
<style> #content{ width: 140px; border: 1px solid blue; } #msg{ width: 100px; height: 100px; margin: 20px; border: 1px solid red; } </style> 

<body>
<div id="content">
外层div
<div id="msg">
内层div
</div>
</div>


    

</body>

 
复制代码

显示结果

对应的jQuery代码如下:

复制代码
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(){
            alert("我是小div");
        }); // 为外层div元素绑定click事件  $("#content").click(function(){
            alert("我是大div");
        }); // 为body元素绑定click事件  $("body").click(function(){
            alert("我是body");
        });
    }); </script>
复制代码

当点击小div时,会触发大div与body 的点击事件。点击大div时会触发body的点击事件。

如何防止这种冒泡事件发生呢?

修改如下:

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(event){
            alert("我是小div");
            event.stopPropagation(); // 阻止事件冒泡  }); // 为外层div元素绑定click事件  $("#content").click(function(event){
            alert("我是大div");
            event.stopPropagation(); // 阻止事件冒泡  }); // 为body元素绑定click事件  $("body").click(function(event){
            alert("我是body");
            event.stopPropagation(); // 阻止事件冒泡  });
    }); 
复制代码

event.stopPropagation(); // 阻止事件冒泡

 

有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话,就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。

html部分

复制代码
 <body> <form action="test.html"> 用户名:<input type="text" id="username" /> <br/> <input type="submit" value="提交" id="sub"/> </form> </body>
复制代码

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){
            $("#sub").click(function(event){ //获取元素的值,val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空");  $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 )  event.preventDefault();  
                }
            });
        }); </script>
复制代码
//阻止默认行为 ( 表单提交 ) event.preventDefault(); 

还有一种防止默认行为的方法就是return false。效果一样。

代码如下:

复制代码
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){
            $("#sub").click(function(event){ //获取元素的值,val() 方法返回或设置被选元素的值。 var username = $("#username").val(); //判断值是否为空 if(username==""){ //提示信息 //alert("文本框的值不能为空");  $("#msg").html("<p>文本框的值不能为空.</p>"); //阻止默认行为 ( 表单提交 ) //event.preventDefault();   return false; }
            });
        }); </script>
复制代码

 

同理,上面的冒泡事件也可以通过return false来处理。 
复制代码
 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ // 为内层div绑定click事件  $("#msg").click(function(event){
            alert("我是小div"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        }); // 为外层div元素绑定click事件  $("#content").click(function(event){
            alert("我是大div"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        }); // 为body元素绑定click事件  $("body").click(function(event){
            alert("我是body"); //event.stopPropagation();    //  阻止事件冒泡 return false;
        });
    }); 

1

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

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


文章来源:博客园

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

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

dataTable 表格头错位

前端达人

在开发中遇到这个问题,就是第一次加载的时候会错位,出现窄很多的现象,在网上找了一番后,发现http://blog.csdn.net/bugscode/article/details/53432069这篇博客中给出的原因是清晰的,但是解决方法我没怎么看明白,于是按照他所说的原因,即
这种情况是因为Datatables框架中使用到serverSide : true,// 服务器查询数据属性,它会使Table标签中多一个style=”width: xx px;”属性,这就导致了变化大小时标题对不齐现象。

然后在 datatable中加入了 serverSide 设置,

$('#charging_table').dataTable({
    serverSide : false,
    ......}) 
  • 1
  • 2
  • 3

既然是因为 serverSide 的原因,那我把它 设置为 false 结果问题还真解决了!


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

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



文章来源:csdn

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

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

日历

链接

个人资料

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

存档