首页

UI设计、交互设计、UI交互设计的联系和区别是什么?

seo达人


三者关系图:

Image title

从上图来看,似乎UI交互设计还真是UI设计和交互设计的结合。不过具体区别如何,还是让我们来看看三者的对比吧!

 

1. UI交互设计vs UI设计vs交互设计对比之概念

Image title

 

UI设计

UI设计或称界面设计(英文UserInterface Design, 缩写为UID),它是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计主要分为实体UI和虚拟UI两种,互联网行业常见的UI设计是虚拟UI,UI即User Interface(用户界面)的简称。

 

交互设计

交互设计(英文Interaction Design, 缩写IXD),它主要指的是两个或多个个体之间交流和互动方式的设计,以达成某种设计产品的目的。交互设计的目标一般从“可用性”和”用户体验“两个层面出发,以帮助解决用户需求。

 

UI交互设计

其实小编从多方查找资料发现,UI交互设计这个术语是非常模糊的。在小编不断对比整理下,终于得出了它的基本概念。从广义上来说,UI设计是可以包含交互设计的,在这样的情况下。简单来说,把交互设计的理念体现在UI界面上,就是UI交互设计。

从设计重心方面来看,UI设计的重心是色彩和视觉,以界面美观设计为主,主要考虑产品看起来怎么样。而交互设计则是以用户为中心进行人机互动部分的设计,主要考虑产品用起来怎么样。而UI交互设计则需要兼顾UI与交互两个方面进行设计,将交互的理念体现在UI界面上。

 

2. UI交互设计vs UI设计vs交互设计对比之工作人群

Image title

UI设计相关人群:

UI设计师,界面设计师,网页设计师。

 

交互设计相关人群:

UX设计师,交互设计师,UE设计师,产品经理,网页设计师,产品经理。

 

UI交互设计相关人群:

UI设计师,界面设计师,交互设计师,网页设计师,UX设计师,产品经理。

从相关的工作人群来看,不同的设计工作类型,涉及的人群也尽不相同。UI设计的相关人群主要是工作中包涵该部分的人,除了专业的UI设计师,界面设计师,网页设计师等也是它的工作人群。而交互设计涉及的人群更广,交互设计师、UX设计师自然不在话下。另外,需要表达设计想法的产品经理运营人员也是其中一员。最后,UI交互设计所涉及的范围比两者稍广,包含了UI设计人群和大部分交互设计人群。

 

3. UI交互设计vs UI设计vs交互设计对比之例子

UI设计案例:

Image title

如上图所示,UI设计主要在于通过对用户界面的色彩,布局,文字排版等方面进行设计,以保证整体界面的美观。

 

UI交互设计案例:

Image title

小编这边选取了一个简单的UI交互作为案例,这个交互的效果是通过点击UI界面中按钮出现不同的图片。这种将交互体现在UI界面上的设计,就是UI交互设计。UI交互设计包含了各式各样的交互效果,如下列刷新、进度条、图片轮播等,小编就不再一一例举了。

 

交互设计案例:

Image title

而这种以人机互动为目的,注重用户体验的设计则称为交互设计。

从以上的案例不难看出,UI设计主要以界面美观为主,以静态的方式呈现居多(也有以动图动画形进行呈现)。交互方式是静态的。UI交互设计是在UI的基础上进行交互设计,以偏动态的形式存在。交互设计则以用户体验为主,以动态的形式存在。

 

4. UI交互设计vs UI设计vs交互设计对比之工具

UI设计工具:

PS(Photoshop):适用于界面设计,图标设计,手绘等。

AI (Illustration):适合创建徽标、图标、草图、排版和其他矢量图。

Sketch:适合图标、界面设计,支持多文件分层,切片等插件。

Image title

交互设计工具

Axure:老牌原型设计工具,适用于制作中高保真交互原型。

Mockplus:适合创建快速交互原型,简单高效,同时支持团队协作。

摹客:适合一键切图,生成智能标注,生成图层代码,交互演示,设计协作。

Image title

 

UI交互设计工具:

PS,AI,Sketch,Mockplus、摹客原型设计工具。

Image title

从使用的工具来看,UI设计主要以图形、图标、界面设计工具为主;交互设计主要以原型设计,交互设计工具为主;而UI交互设计则囊括了前两者使用的所有工具。

看完本文后,小编相信大家对UI交互设计,UI设计,交互设计三者的关系已经有所了解了。简单来说:UI是为了好看,交互设计是为了好用,UI交互设计就是好看又好用。如果想从事UI交互设计相关的工作,小编建议不妨在了解它们的基本定义后,开始学习一些技能知识,着手开始练习设计。这样可以帮助大家在UI交互设计的路上快速成长!

 

原文地址:慕客

作者:慕客产品协作设计

 转载请注明:学UI网》UI设计、交互设计、UI交互设计的联系和区别是什么?

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

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

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

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

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




数据可视化图表设计指南:圆环图

seo达人



3种圆环图样式 

标准圆环图

图片

图表中间空心的部分用来展示数据的总数,用圆环的弧长和颜色表示不同数据的占比,图表旁边有图例用来解释说明。

 

布尔圆环图

图片

布尔圆环图就像是给圆环图做了布尔运算,只表示正负两个值

比如想重点突出完成率,就使用绿色圆环来表示68%的完成率,圆环其他部分为灰色,同理想重点突出反弹率,就使用红色圆环来表示83%的反弹率,圆环其他部分为灰色。

圆环中心部分用来显示相关数值的百分比和标签。此外布尔圆环图不需要额外添加图例。

 

标签圆环图

图片

直接在对应的圆环上加入标签比使用图例更容易理解。在屏幕空间允许的情况下,可以直接在圆环上添加「名称+所占比例+数量」的标签形式。

 

圆环图交互状态分析 

悬停状态

图片

在标准圆环图中,鼠标悬停在圆环图上时,跳出分段名称+百分比+数量值的弹窗。在标签圆环图中,悬停的圆环部分突出显示,其余部分淡出处理。

 

点选状态

图片

图表段可以是交互式的,点击对应的分段时,右侧的图例也会同步高亮显示。

 

焦点状态

图片

焦点状态和上面提到的悬停状态类似,唯一的区别在于,焦点状态选中分段后有一个放大+描边的圆环效果,突出展示数据。

 

空状态

图片

当没有可用的数据时,应该在图表上表明这一点,并给出提示引导用户去点击。

 

错误状态

图片

获取数据时偶尔会出现发生错误的情况。发生这种情况时,向用户提供有用的、可操作的解释,说明发生错误的原因并告诉用户可以采取哪些措施来解决问题。

 

圆环图使用指南 

使用分类颜色

图片

保持圆环图每部分颜色都使用醒目的颜色且具有对比性。在圆环图中不建议使用同色系颜色来显示数据,同色系颜色常用在直方图中。

 

最多使用五个分段

图片

当圆环图包含多个数据分段时,图标会变得难以理解,为保证图标的清晰,尽可能将分段控制在 2-3 段,不要超过5段。如果数据过多,可以考虑使用柱状图、条形图等其他形式的图表。

 

保证数据准确

图片

圆环图的所有分段加起来的数值应该始终为 100%,没有有多段数据占比过小,可以一起汇总到“其他”分段中。

 

按顺序排列数据

图片

圆环图的份分段应从12点位置开始按最大值排序,然后按顺时针方向依次按大小排列每个数值。右侧的图例页应该从上到下保持一致的排序。

 

不要将时间分段

图片

时间是一个顺序变量,不能用作圆环图中的类别。例如每个季度的时间是相同的,但是每个季度访客却不一样,使用圆环图会给用户造成一定的困扰。如果以时间作为基本单位,可以使用直方图、条形图等图表。

 


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

作者:Clippp

转载请注明:学UI网》数据可视化图表设计指南:圆环图

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

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

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

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

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



echarts折线图背景渐变以及常用配置项

前端达人


  1. let myChart = this.$echarts.init(document.getElementById('plant-charts'));
  2. // 绘制图表
  3. myChart.setOption({
  4. tooltip: {
  5. formatter: '{c}' //设置单位
  6. },
  7. //图例样式
  8. legend: {
  9. data: ['宽带情况', '数据量'],
  10. textStyle: {//图例文字的样式
  11. color: '#fff',
  12. fontSize: 12,
  13. padding: [0, 20, 0, 0]
  14. }
  15. },
  16. grid: { //设置图标距离父级div的间距
  17. top: "10",
  18. left: "0",
  19. right: "15",
  20. bottom: "10",
  21. containLabel: true
  22. },
  23. xAxis: {
  24. type: 'category',
  25. boundaryGap: false,
  26. data: ['2015','2016','2017','2018','2019','2020','2021'],
  27. axisLabel: {
  28. interval: '0', //类目轴(category)中用数值表示显示间隔,0为显示所有,1为隔一个显示一个,以此类推
  29. textStyle: { //文字样式
  30. color: '#62799C',
  31. fontSize: '12'
  32. },
  33. },
  34. axisTick: { //y轴刻度线不显示
  35. show: false
  36. },
  37. },
  38. yAxis: {
  39. type: 'value',
  40. //show: false,
  41. axisLabel: {
  42. textStyle: { //文字样式
  43. color: '#62799C',
  44. fontSize: '12'
  45. },
  46. },
  47. // 控制网格线
  48. splitLine: {
  49. // 改变轴线颜色
  50. lineStyle: {
  51. color: '#2a2a2d'
  52. }
  53. },
  54. axisTick: { //y轴刻度线
  55. show: false
  56. },
  57. },
  58. series: [{
  59. data: [5000,6000,7000,4400,3200,4500,6800],
  60. type: 'line',
  61. itemStyle: {
  62. normal: {
  63. color: 'rgba(62,139,222,1)'//线颜色
  64. }
  65. },
  66. areaStyle: {
  67. normal: {
  68. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折线图颜色渐变
  69. offset: 0,
  70. color: 'rgba(62,139,222,0.6)'
  71. }, {
  72. offset: 1,
  73. color: 'rgba(62,139,222,0.01)'
  74. }])
  75. }
  76. },
  77. }]
  78. });

echarts图例(legend)显示设置位置,样式,内容(百分比,水平,竖直显示,icon样式)

前端达人

   

 

//图例
    legend: {undefined
        icon: "circle",
        //icon形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none,
        itemWidth: 10,  // 设置icon宽度
        itemHeight: 10, // 设置icon高度
        itemGap: 40, // 设置间距
        // top: '5%',//竖直位置
        // left: 'center',//水平位置
        x: 50,//水平位置
        y: 200,//竖直位置
        orient: "vertical",//设置显示顺序,默认水平(水平,竖直)
         textStyle: {undefined
            color: "#000"
         },//文本样式
         // 使用回调函数(设置文本显示内容,例如 加百分号)
          formatter: function(name) {undefined
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0, l = data.length; i < l; i++) {undefined
              total += data[i].value;
              if (data[i].name == name) {undefined
                tarValue = data[i].value;
              }
            }
            var p = ((tarValue / total) * 100).toFixed(2);
            return name + " " + " " + p + "%";
          },
    },


用信息架构,来落地产品架构

纯纯

让信息架构,和产品架构,产生“化学反应”

这个信息架构的角度,具体而言,就是只包含一级频道的交互设计。


核心功能、辅助功能、重大功能,作为产品的三大类功能,更多是从发展的角度来划分。


除此之外,大部分 App 都还有一些非常基础的功能,比如“个人资料”、“我的收藏”、“设置”、“搜索”等,此类功能,我们称其为通用功能。


核心功能、辅助功能、重大功能和通用功能,是产品的四大类功能。


总的来说,本文主要以底部 tab 导航的 App 为例,探讨一下,如何在一级频道来落地产品的四大类功能。



01 宏观上讲,怎样更好的摆放四大类功能?


网易云音乐是我个人很喜欢的一款产品,日常用的也比较多。不过,它的新版(6.0 系列)给我的直观感受是,有点复杂了,我甚至在很长时间里找不到“私人 FM”这个以前常用的功能。


给我类似感受的产品,还有 Keep 和知乎。


究竟是什么,让我觉得,这些产品变得有点复杂了?


个人简单总结了一下,最直接的一个原因,是这些 App 都新增了重大功能,并给这个重大功能单独加了一个一级频道。


比如 Keep 的“计划”频道、知乎的“会员”频道、网易云音乐的“视频”和“云村”频道,都分别占用一个一级频道。



企业为什么这么设计?个人的猜测,这些重大功能于企业而言,很重要,要么肩负商业化使命,要么被寄予厚望,所以企业就单独给了一个一级频道。


这是一个相对简单的逻辑。但如果想要更好的去平衡用户体验和商业化之间的关系,那我们就需要考虑更多的因素。


之前在信息架构那篇文章里,个人的建议是,如果想让 App 始终保持简单,那就只保留 4 个 tab,也即只有 4 个一级频道。


如何将产品的四大类功能、以及未来很大概率会不断出现的重大功能,以接近最优的方式,安置在寸土寸金的 4 个一级频道上?


我想,这中间一定有一些原则,值得我们探讨和参考。


1 和重要程度保持一致


通常而言,重要程度越高,分配到的空间就越多。这是一个比较普世的道理。


也就是说,这条原则,主要会影响到,四大类功能,各自占用多少空间比较合适。


我们有 4 个一级频道,每个一级频道代表了 25% 的空间。


再来看四大类功能,按其大概的重要程度,简单的分析一下。


先说核心功能,这个最重要。


核心功能是立足之本和护城河。先换个角度看这个问题,假设有三种可能,即核心功能可以占用一个、两个或三个一级频道。


先用下排除法。三个一级频道难免显得过多,剩余的三种功能挤在一个一级频道里也会显得过分拥挤;一个一级频道的话,倒也可以,但是平分四分之一的空间很难体现出核心功能的重要性。


相比之下,两个一级频道就显得较为合适。


综合考虑到有四大类功能,通常两个一级频道也不会完全给核心功能所用。


所以,核心功能,大概占用一个半一级频道,也即 40% 左右的空间即可。


再说通用功能,这个比较容易。


此类功能通常比较多,重要程度可能不及重大功能,但是又不能没有,所以通常我们也会单独给一个一级频道,就是“我”或者“设置”之类的一级频道,大概占用 25% 的空间即可。


第三,说下重大功能,这个比较重要。


通常而言,重大功能的重要性仅次于核心功能,而且重大功能可以有多个,再考虑到通用功能一般单独占用一个一级频道。


那么,相对而言,重大功能,完全可以单独占用一个一级频道,甚至更多,大概占用 30% 左右的空间即可。


最后,说下辅助功能,这个比较特殊。


首先,很多产品是没有辅助功能的;其次,辅助功能是个小功能;最后,辅助功能的数量一般也不多。


总的来说,辅助功能是没有必要单独给一个一级频道的。再考虑到 4 个一级频道所剩空间已经不多,所以,辅助功能一般和重大功能共用一个一级频道即可,大概占用 5% 左右的空间。



2 和使用频率保持一致


通常而言,用户用的越多的功能,就排的越靠前。


也就是说,这条原则主要决定四大类功能的排序问题。


具体而言,用户用的最多的是核心功能,所以核心功能最靠前。


重大功能和通用功能,有时候很难说哪个使用频率更高,比如微信里的“搜一搜”和“收藏”。但是比较明确的是,很多 App 在诞生之初,并没有重大功能,只有核心功能和通用功能。


所以自然而然,通用功能排在了核心功能后面。


个人有个猜测,一方面,有时候很难说清重大功能和通用功能,哪个使用频率更高;另一方面,通用功能起初是排在最后的。


所以,当重大功能出现时,就延续了旧传统:通用功能依然排在最后。最终结果就是,重大功能和辅助功能排在中间。


值得一提的是,现在市面上开始出现两类现象。


其一是,有一些拥有 5 个一级频道的 App,开始把核心功能放到中间那个频道,比如 Keep 的“运动”频道。


其二是,企业开始人为的控制打开 App 时默认展示哪一个频道,而且默认显示哪一个频道,存在多种情况,例子依然包括 Keep:以前默认显示中间的“运动”频道,现在默认显示“计划”频道。


个人觉得,对企业而言,这两类做法,都是得不偿失的。


因为这样做,会让 “从左起,1、2、3、4”这个排序失去价值。没有这个前提,也就谈不上“和用户的使用频率保持一致。


而且,这种默认不显示左边第一个频道的做法,有时候会让用户产生一种被绑架的感觉(默认显示收费频道),有时会让用户感觉企业在自作聪明(默认没显示收费频道,但也没显示核心频道)。



3 符合用户预期


主要有两个预期,逻辑预期和习惯预期。


3.1 逻辑预期


用户确实很懒,但不代表用户不会思考。


比如前文提到的,网易云音乐的“私人 FM“功能,在我的认知里面,”私人 FM“和”每日推荐“一样,都是个性化推荐,性质极其相似,应该放在一起。


所以,当我在新版里的“每日推荐”旁边找不到“私人 FM”时,心里就觉得很奇怪很不解,心想这么好的功能不会是给删了吧。


后来某一天,当我在第三个一级频道“我的”里面发现“私人 FM“的时候,我又觉很别扭,不好用。


另外一个例子,Keep 的动作训练。 


在新版里面,一开始我是去“发现”频道的“动作库”找的,怎么找都找不到,跟找不到网易云音乐的“私人 FM“是一样的心情。


因为我觉得,“动作训练”和“动作库”,是很接近的一对事物,从逻辑上来讲,用户会觉得这俩事物挨在一起,或者会猜他们是不是挨在一起。


3.2 习惯预期


这里的用户习惯,主要有两类。一类是自家产品培养出来的,一类是市面上的产品培养出来的。


通常情况,一级频道的设计,是要符合用户习惯的。


最忌讳的情况是,自己一手培养的用户习惯,到最后自己再一手去打破,这样很容易引起用户的烦躁、不满和失望等负面情绪。


比如 3.1 段的两个例子,同样也没有符合用户的习惯预期。因为在最开始,网易云音乐的“每日推荐”和“私人 FM“是挨在一切的,Keep 的“动作训练”和“动作库”也是融合在一起的。


4 良好的扩展性


就一级频道而言,重大功能和通用功能是最有可能扩展出更多子功能的。所以,就扩展性而言,需要重点照顾到这两类功能。


通用功能大部分都收纳在“我”这个一级频道,通常也是一个列表的样式,天然自带良好的扩展性。所以,扩展性的难点和重点,最后是落在了重大功能这里。


在一级频道,重大功能的展现形式,通常有两种。


一种是像核心功能一样,直接把重大功能的内容铺陈出来,典型代表是网易云音乐的“云村”。另外一种是把各个重大功能都收纳起来,只展示一个入口,典型代表是微信的“发现”频道。


对企业而言,现实问题是,当重大功能的数量上升到两个、三个甚至更多时,如何展示他们?


市面上的常规做法,也是两种。


一种是像网易云音乐和 Keep 这样的,直接开辟一个新的一级频道,供重大功能使用。还有一种是微信这种,把所有重大功能都收纳起来,有新的重大功能出现时,新增一行列表即可。



个人推荐微信这种做法,因为这种做法的扩展性最好,可以应对无穷尽的重大功能。


至此,我们简单总结一下。个人看法,四大类功能,具体咋摆放,并没有标准答案,但是可以参考以上 4 个原则。




02 微观上讲,有没有补充和例外?


有。借这个话题,聊两个比较特殊的问题。


1 顶部标题栏的两侧,适合放什么功能?


先来分析一下这个位置,顶部标题栏的两侧,位于屏幕的左上角或右上角,是个很显眼的位置。


个人认为,有三类功能比较适合这个位置。


第一类,是和当前页面内容有密切关系的功能。比如“编辑”型功能,可参考微信读书“书架”频道的“编辑”。再比如“新增”型功能,可参考 Twitter 首页信息流的发推图标。此类功能,最适合这个位置,而且一般也没有更合适的位置来摆放他们。


第二类,是比较高频的通用功能或重大功能,比如搜索、消息、设置等。


第三类,是某些高频功能的快捷入口,比如微信的扫一扫和收付款。



除此之外,如果是一个比较低频的功能,不管是通用功能、重大功能还是辅助功能,放在这里,都不合适,因为会对用户形成打扰。


2 一个功能,最多可以出现几次?


大部分功能,在 App 里只会出现一次。但在日常使用各种 App 的时候,我们也会多次看到同一个功能,在不同的地方。


有时候,能看到三次,比如搜索,在微信、知乎和网易云音乐都出现了三次,我们也不会觉得哪里不对劲儿。实际上,搜索虽然出现了三次,但也没有引起我们的特别注意。


还有一些功能,是出现了两次。我们在第二次看到的时候,会有点烦躁,心想怎么又来了;有时候会有点困惑,心想下次我该用哪一个,哪一个最快捷。


这中间有什么原则可以参考吗?


先来看下搜索,在微信、知乎和网易云音乐,都是比较高频的功能。换句话说,用户在不同的一级频道,都有可能需要搜索一下,所以搜索出现三次,在不同的一级频道,是有这个需求存在的。


搜索以外的功能,个人认为,只有一类适合出现多次,通常两次足矣。


那就是,此类功能确实比较高频,同时路径又比较长,使用起来不够方便。这时候,就适合给此类功能一个快捷入口。这个快捷入口,一般是出现在标题栏。



一个功能,如果只是单纯的重复出现两次,两次都没出现在标题栏。那给用户的感觉,就是,App 并不是在给我提供快捷入口,而可能只是通过重复的方式来强推这个功能,就容易产生烦躁和困惑的负面情绪。



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

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

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

浅析用户体验四维度

纯纯

用户体验四维度的概念、价值以及相互之间的关系

用户体验,是用户在使用产品过程中建立起来的一种纯主观感受。

 

解读用户体验,可以有很多视角。本文提供一个以人为本的视角:用户体验四维度。具体如下。

 

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

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

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

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


用户体验四维度

 

 

01 四维度的概念

 

怎样判断一款产品有几个维度?这就要从四维度的概念说起。

 

1. HI X(人与界面的交互体验)

 

HI X 是指用户在浏览、阅读、操作界面过程中产生的主观感受。

 

HI X 既受信息架构、交互设计和UI设计的影响,也受根需求和功能架构的影响。主要依托手机和电脑的互联网产品,天然存在界面。所以,HI X 属于基础属性,所有产品都有。

 

2. HC X(人与内容的交互体验)

 

HC X 是指用户在消费内容时,内容本身带给用户的主观感受。

 

这里的内容,既包括衣服、鞋子等实体商品,也包括文章、图片、视频等虚拟内容。诸如淘宝、网易严选等电商产品,以及公众号、Instagram、抖音等 UGC 产品,都具备 HC X 属性。

 

3. HH X(人与人的交互体验)

 

HH X 是指用户与其他用户、产品工作人员沟通交流时产生的主观感受,或产品的社区氛围、沟通氛围带给用户的主观感受。

 

所以 HH X 有两层含义。第一层发生在用户与用户之间,是指当用户扎堆或沟通交流时,交流氛围、交流内容带给用户的主观感受。第二层发生在用户与产品工作人员之间,是指当产品依靠人力向用户提供咨询、售后、配送等服务时,产品工作人员的服务行为带给用户的主观感受。

 

关于第一层含义,不管是更强调社区属性的产品,比如天涯社区、豆瓣小组、百度贴吧,还是更强调内容属性的产品,比如公众号、微博、小红书的笔记,都具备 HH X 属性。

 

关于第二层含义,常见的 HH X 由客服人员提供。如果是电商产品,提供人员还包括快递员和售后人员等。

 

4. HB X(人与品牌的交互体验)

 

HB X 是指当用户想起、谈论起品牌,或使用品牌的产品、体验品牌的服务时,品牌带给用户的主观感受。

 

只要一款产品做成了品牌,它就有 HB X 属性。

 

HB X 会直接影响到我们是否信任、喜欢一个品牌,以及是否会使用它的产品和服务。所以,我们对 HB X 往往会有一个抓重点的综合评价。就像一个外向活泼的女生,虽然在外向程度方面和一个内向安静的男生不一致,但双方也可能会选择在一起,因为内向、外向并非双方关注的重点。

 

因为 HB X 牵涉到对品牌的综合评价,所以就像工作都有一段试用期、恋爱都有一段了解期一样,HB X 的形成往往也需要较长时间,通常至少要 3~5 年。

 

 

02 四维度的价值

 

每一个维度,各有什么价值?

 

1. HI X(人与界面的交互体验)

 

作为基础属性,HI X 的价值主要体现在以下两方面。

如果是一款只具有 HI X 属性的工具型产品,比如视频会议产品 Zoom,那于这款产品而言,HI X 就是一切,这款产品的成败也几乎完全取决于 HI X。

 

如果是一款同时具有 HC X、HH X 属性的内容型社区型产品,比如 B 站、快手这些视频类产品,那此时的 HI X 就会扮演一个类似交通出行(基础设施)的角色。如果 HI X 比较差,这个“出行”过程就会像出去玩时的塞车一样,让人难受;如果 HI X 很优秀,这个“出行”过程就会像准点的高铁、飞机一样,又快又爽。

 

2. HC X(人与内容的交互体验)

 

HC X 主要从内容层面影响用户满意度。

 

如果 HC X 比较好,用户消费时的决策时间就会被大大缩减,同时用户满意度也会比较高。比如淘宝上就有一些原创设计、质量不错、价格不贵的精品小店,很受欢迎。我们去网易严选、优衣库天猫旗舰店这些质量不错、设计不错、价格适中的店铺买 东西时,也会很快很省心。

 

以上说的是电商产品,对于 UGC 类的内容产品,也是类似的道理。比如站酷上的首页推荐和编辑推荐,相对而言,HC X 比较不错,所以看这些内容的用户也会比较多。

 

3. HH X(人与人的交互体验)

 

HH X 是用户情绪的最大影响因素,在情感方面对用户具有最大吸引力。物以类聚,人以群分。HH X 良好的产品,会像一场谈笑风生、其乐融融的聚会,吸引用户去扎堆。

 

良好的 HH X 往往意味着良好的氛围,它不仅能带给我们诸如轻松、愉快等积极情绪,还能在一定程度上带给我们一种归属感。最终的结果,就是我们喜欢用这款产品。比如 B 站的 HH X 就比较好,具体而言就是弹幕氛围比较欢乐友好,这样的氛围带给用户的感觉是比较好的,用户也喜欢在 B 站就着弹幕看视频。

 

4. HB X(人与品牌的交互体验)

 

HB X 事关品牌能不能以正面形象住进用户心里。

良好的 HB X,往往意味着良好的品牌美誉度和忠诚度。HB X 良好的产品,就像你信任和喜欢的男/女朋友一样,他/她会在你心里占据一定的分量和地位,让你乐意介绍给家人和朋友认识。比如苹果的 Mac,就有很高的品牌美誉度和忠诚度,用户也很乐意把 Mac 推荐给身边的朋友。

 

 

03 四维度的关系

 

四维度之间存在怎样的关系?

 

1. HI X 是另外三个维度的基础

 

HI X 作为基本维度,相当于“水之源,木之本”。如果把用户体验四维度比作一个金字塔的话,塔底的基石一定是 HI X,塔尖则是 HB X。

 

2. HC X 通常是 HH X 的基础

 

HH X 的产生,通常离不开 HC X。也就是说,通常得有一个合适的“内容”或“主题”,才能把人聚拢过来。比如结婚的时候,你可以邀请到很多亲朋好友来参加婚礼,但在平时,你很难邀请到这么多人。我们在 B 站看视频的时候,弹幕通常比较欢乐友好,氛围不错,但如果没有这些视频,也就不会有这些弹幕,以及不错的社区氛围。

 

3. HI X、HC X 和 HH X 共同构成了 HB X 的基础

 

HC X、HH X 和 HI X 一样,都可以成就 HB X。

 

以早期 Keep 为例,刚开始只有课程这个功能,也就是说只有 HI X 和 HC X 这两个属性。其中,HI X 还可以,HC X 比较优秀。在此基础上,慢慢发展出了社区功能(HH X 属性),而且做得不错。再往后,有了“自律给我自由”的品牌精神。在课程、社区、品牌精神等因素的助力下,Keep 有了不错的品牌美誉度和忠诚度。也就是说,HC X、HH X 和品牌精神等因素,一起成就了良好的 HB X。

 

4. HB X 也可以仅有 HI X 这一个基础

 

有些产品并不具有 HC X 和 HH X 这两个属性,而是仅有 HI X 这一个属性。单凭一个良好的 HI X,也可以成就良好的 HB X。

 

比如 Zoom,作为一款开视频会议的工具应用,它最初只有 HI X 这一个属性。但是因为很好用,HI X 很优秀,所以如今的 Zoom 即便没有内容(HC X)和社区(HH X)属性,依然成了一个在全球都很受欢迎的品牌,拥有了不错的 HB X。

 

总的来说,在四维度的金字塔里面,它们的关系如下图所示。


文章来源:站酷    作者:SnowDesign

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

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

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


产品用户体验案例分析

纯纯

目录


1.百度网盘 :会员标识

2.当当:搜索记录隐藏

3.当当:分享动效 ➕ 一键制作朋友圈分享海报

4.抖音:点击复制 ID

5.飞书:效率工作—语言自动转化

6.美团:优惠卷新到提示

7.墨迹天气:一键登录(大部分应用已上线该功能,部分应用仍未上线)

8.起点读书:长按可进行互动

9.腾讯视频:亮度调节的动效设计

10.微博:点赞动效设计

11.知乎:删除搜索记录

12. QQ:可隐藏会话

13. QQ 音乐:搜索入口的听歌识曲

14. QQ 阅读:长按复制的放大设计


一、百度网盘:会员标识别


在开通会员后百度网盘会进行对于应用图标的更换,使得应用图标更加高级,在分享链接时也会加入会员分享的标识。


属于用户激励体系中的一个板块,增强用户的标识和身份。




二、当当搜索记录隐藏


搜索隐藏功能设定。


我们在使用各大应该的搜索功能时总会遇到过这样的场景,当你要某人或者在某种场景下需要进行搜索时,来不及删除自己的搜索记录出现社死的情况。


而当当的搜索隐藏就可以完美的解决这个问题,退一步讲我们可以思考一下为什么别的成熟型应用,没有采用这样的方式。大部分是没有这个功能,其余则是在搜索这一个功能上已经添加了其余用户体验的设计。所以在这一块就没法加入这个设计。




三、当当:分享动效 ➕ 一键制作朋友圈分享海报


在当当应用中点击分享进入页面后不同于传统的分享页面,而是把分享到微信和分享到朋友圈进行了动态设计。并且在分享到朋友圈的右上角加上了海报的标识。我们点击会自动跳转生成海报。


这样的设计可以更加吸引用户的眼球并且自动生成海报可以激发用户在朋友圈转发的次数。



动效展示



四、抖音:点击复制 ID


主页 ID 点击可进行复制  很多应用都有 ID 。但是当我们要进行 ID 搜索的时候,我们便需要一遍一遍的反复查看或者记住这个 ID 然后再进行搜索。


目前部分的应用也上线了类似的功能,让用户点击 ID 区域可进行复制。对于用户体验的提升有着很显著的效果。




五、飞书:效率工作语言自动转化


飞书属于一款协同办公类的应用


在飞书的设置用有语音直接转换文字的说明,飞书本身便是一款协同办公类的产品。此产品效率便是产品关键词之一,所以加入这样的设置可极大的提升用户的体验。




六、美团:优惠卷新到提示


有提示用户新到多少张优惠卷的提示


可以促进用户消费的同时能帮助和提醒用户去使用消费卷不仅提高了商家的销量还使得用户在消费中发现自己的优惠卷及时使用




七、墨迹天气:一键登录(大部分应用已上线该功能,部分应用仍然未上线)


一键登录


应用登陆中目前主流为(1.第三方登录,登陆之后需要再次绑定手机号。2.手机号注册登陆,登陆之后可选择是否绑定第三方。3.一键登录,登陆之后可以选择是否绑定第三方)在设计流程中,设计开发者需要尽可能的减少对流程的复杂化。


一键登录在为看来是最喜欢的一种登陆方式。导致现在如果需要各种注册绑定,除非必要的情况下,我会直接放弃这款应用。





八、起点读书:长按可以进行互动


长按页面可以框选当前的段落,并且出现互动选项。

 

增加用户和用户之间,用户和作者之间的互动。使得用户在读书的同时有着较强的参与感。




九、腾讯视频:亮度调节的动效设计


滑动可调节亮度

 

左边的小动效的设计加上右边的渐变进度条,使用户可以更加明确的知道自己所处于一个什么样的观看环境,并且加入了渐隐渐现的出场和入场。

 

用一个小巧的动效设计帮助用户确定自己的亮度属性,




动效展示




十、微博:点赞动效设计


点击点赞会出现彩色的波浪并且不断扩散的同时有小表情弹出。


增加趣味性和互动性。




动效展示




十一、知乎:删除搜索记录


清空时会在进行确认,再次点击全部删除方可删除。


在下方列表中可逐一删除,上面清空中不是点击后就全部清空。而是再次出现,起强调和确认的作用。


增加用户体验,帮助用户进行二次确认和防止用户误触。作为一款咨讯类应用用户的搜索记录也是比较重要的。




十二、QQ:可隐藏会话


前几天发现的一个神级功能(虽然我已经不用 QQ 进行社交了),当时我外甥和我讲述了这个功能他么00后戏称为养鱼神器。


在好友的设置中可隐藏会话,开启隐藏会话以后。此联系人发来的消息不会显示在联系人列表。需要自己手动去设置隐藏会话列表去寻找。


应用的功能更加多样化满足多种不同的需求。




十三、QQ 音乐:搜索入口的听歌识曲


在搜索入口加入了听歌识曲且进入界面后可进行听歌识曲和哼唱识别的切换


搜索歌曲界面的使用场景为:1.用户得知该歌曲的名称或者歌词进行搜索。2.用户听到了某一首很好听的歌曲想进行搜索。此时在场景二的情况下,正好可以进行听歌识曲。听歌识曲此功能在比较旧的版本属于主页中的一个模块,把听歌识曲放到搜索入口处更加符合用户场景。


对用户场景进行细致的研究,增加了用户体验。




十四、QQ 阅读:长按复制的放大设计


长按复制会有放大镜设计


当用户处于复制文案的场景下时,由于复制需要拖动,在拖动的过程中会按压住自己所处于的复制内容位置。所以在用户进行复制时加入放大镜的设计会使得用户清楚的明白自己复制到哪里,不需要后续用户在进行删减。


极大的加强了此场景下的用户体验


动效展示


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

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

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

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


交互设计之探索GUI和VUI

纯纯

一、GUI和VUI的定义:


1.1GUI


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




1.2VUI


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





二、GUI和VUI的发展历程:


2.1GUI的发展历程


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



2.2VUI的发展历程


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


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




三、GUI和VUI的设计要领:


3.1GUI



        交互的多样性:


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


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


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


3.2VUI


3.3VUI的适用场景


智能家居

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


辅助驾驶

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


企业应用

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


医疗教育

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


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


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


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


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


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

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

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

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

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

关于设计中的组件化思维

纯纯

组件化思维对于一个设计师来说十分重要,它能够帮助你更好的去进行产品的设计,那么组件化思维对于设计者都起到什么作用?

1.符合产品功能逻辑,组件化的设计理念能帮助设计符合产品功能逻辑。

 

2.有助于保持交互一致性,在一个项目里,选择日期应该是统一的交互方式,在整个产品中就应该只有一种存在形式。所以时间选择器就是一个组件,一个可以复用的组件,如果你没有组件化思维,很可能出现好几个不同的时间选择器,一会儿是流轮拨盘,一会儿是日历,一会儿又是下拉列表,这样的设计绝对是不能上线的。当然该统一的地方还有很多,比如:错误提示的形式,讲度条的交互方式,导航栏和按钮的样式。表单,下拉菜单等等。

 

3.减少开发工程师的工作量,开发时使用不同的技术,了解不同技术之间的差异,设计时按照每个开发软件的组件来做设计极大的减少了开发的时间.

 

4.保持视觉风格的统一,在同个项目不同页面按钮等组件的样式上应该保持统一。

 

5.便于多设计师协作组件化设计是大型设计项目的必要条件,多人协作完成项目时,应当保持视觉统一规范,组件化建立就起到了至关重要的作用。

 

6.便于修改设计,设计总是需要修改优化的,只需要根据需求调整需要调整组件即可。

 

针对各种组件的开发软件做了以下介绍,欢迎在评论区进行补充与探讨!

 

echarts
 帮助各行业进数据处理以及分析,一键生成饼图,柱状图,甘特图,折线图等多种图表;简道云的图表分析

 

各种图示效果样式案例可供设计者参考

 

https://echarts.apache.org/examples/zh/index.html#chart-type-line

 


Ant Design

ant通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验,规范设计的设计思维,有丰富的设计资源与组件,对设计样式的表达起到非常好的参考作用

https://ant.design/index-cn

 

Element

Ant Design稍加相似,可供设计者作为辅助参考

 

https://element.eleme.cn/#/zh-CN/guide/design

 

 

另外其它的开发工具:

React是用于构建用户界面的JavaScript库,起源于Facebook的内部项目

 

Hook 可以中文译为“挂钩”或者“钩子”,逆向开发中改变程序运行的一种技术,在逆向开发中是指改变程序运行流程的技术,通过Hook在别人的程序中。需要了解其Hook原理,这样就能够对恶意代码攻击进行有效的防护

 

 

Umi 是一个可插拔的企业级 react 应用框架。 插件化 umi 的整个生命周期都是插件化的,甚至其内部实现就是由大量插件组成

 

 可扩展 Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直

 

Vue 有两大特点:响应式编程、组件化。其优势为:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。它的第三方ui库很多节省开发时间。https://cn.vuejs.org/v2/guide/index.html

 

 

vue是我们的常用框架,大多数客户的选择。ant➕react➕hook➕umi,中后台这个也比较多,最近的项web端的基本上是这两种选型。

其它常设计有wpf/qt/mfc/开发,在c++c#下运行的客户端程序

 

 

其它例如:

Bootstrap Twitter推出的一个用于前端开发的开源工具包。是基于 HTMLCSSJAVASCRIPT ,它简洁灵活,使得 Web 开发更加快捷

https://getbootstrap.com/docs/5.1/examples/


developermaterial汇聚了ios、安卓组件框架及人机交互指南,相关链接:

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

https://developer.android.google.cn/docs/quality-guidelines/core-app-quality

https://material.io/components?platform=android

 

蓝蓝设计——    作者:纯纯

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

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

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

交互设计九大定律

纯纯


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

undefined


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

     

a  合理的自身大小

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

undefinedundefined


b 控制合理的相对距离

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

undefined

undefined



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

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

undefinedundefined



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

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

undefined

undefinedundefined


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


a 精简选择的余地

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

undefined


undefinedundefined


b  减少事情的复杂程度

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

undefined

undefined

undefined


undefined


undefined


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


a 控制选项的数量

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

undefined


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

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

undefined

undefined


c 顺应时代的取舍

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

undefined


undefined


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


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

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

undefined


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

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

undefined

undefined

undefined


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

a 把复杂性降到最低点

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

undefined


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

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

undefined

undefined


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


a 给用户清晰的引导

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


b 少即是多

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

undefined


c 衡量产品功能的取舍

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



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


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

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

undefined


b 操作中 提醒用户

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


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

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




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


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

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

undefined


b 定向反馈提醒

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

undefined



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


a 能不创新就不创新

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

undefined

undefined


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


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

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

undefined


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

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

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

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



日历

链接

个人资料

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

存档