首页

设计心理学系列(03)——雅各布定律与心智模型

seo达人



在体验设计层面,设计师需要匹配用户心智和引导用户心智。而产品设计更需要建立品牌心智,提升用户对品牌的忠诚度。因此在产品和运营活动设计时需要充分考虑对品牌心智的影响,避免带来负面效果。今天我们继续设计心理学第3篇——雅各布定律。

本文主要内容包括:
  • 雅克布定律与心智模型
  • 心智模型对设计的影响

 

01雅各布定律与心智模型

雅各布定律指的是如果用户已将大部分时间花费在某个网站上,那么他们会希望你的网站可以与那些他们已熟悉的网站一样拥有相似的使用模式。
这个定律揭示了用户认知事物的过程和特点——用户是“懒”的,会通过已有的经验去认知新的事物。当经验无法匹配时,用户会产生各种不适应,极端情况下用户会放弃使用产品。
比较典型的就是长期使用Windows的用户,最开始使用Mac时会表现出各种不习惯。最根本的原因就是用户在Windows系统中建立的使用心智,无法适用于Mac系统,为此有人在MacBook 中安装了Windows 系统。
图片
Don Norman 将心智模型定义为:“存在于用户头脑中的关于一个产品应该具有的概念和行为的知识,这种知识可能来源于用户以前使用类似产品的经验,或者是用户根据使用该产品要达到的目标而对产品的概念和行为的一种期望。”

因此我认为雅各布定律其实是用户心智模型的外在表现。

 

02心智模型对设计的影响

设计师如何去应用心智模型呢?主要有以下3个方面。

图片

1、匹配用户心智

匹配用户心智模型来改善体验是设计师的首要任务。当设计方案与用户心智模型一致,用户可以轻松地将已有经验从一个产品转移到另一个产品上,无需额外的理解和学习成本。

 

最常见的就是与真实环境相匹配。例如手机系统中开关样式、日历风格,都是与现实生活中相匹配的,用户的认知成本很低。同样在电商平台中,很多弹窗套用类似于微信红包样式,希望可以提高活动对用户吸引力带来更多点击和转化。

图片

之前曾经碰到一个案例。在某一数据监控系统中,数据正增长时采用红色表示,负增长采用绿色表示,理由是与股市的涨跌配色保持一致,但是系统跟股市并没有任何关系。该系统中红色又代表了告警色,绿色代表了健康色,同一系统中采用了两套设计形式,结果造成了用户困扰。

 

因此匹配用户心智需要综合考虑用户场景、应用目的等多种因素。

 

例如常见的地图,在不同的场景中表现方式也是有所差异的。在高德地图中,用户需要查询地点、导航出行等等,所以地图与我们常见的实物地图更加匹配。而在滴滴打车中,地图更多是为了确定用户地理位置、上车地点、周边车辆数量等等,所以地图更多的是作为背景进行了简单化的处理。

图片

 

2、建立新的心智

我们在设计工作中会遇到各种新的场景、新的功能,无法完全匹配用户已有的认知,因此需要借助一定的设计手段建立用户新的心智,主要包括以下3种设计形式。

图片

 

1)产品心智植入

最开始我对slogan之类的品牌心智是无感的,感觉这种口号太虚了,用户不会care,或者很难引起用户共鸣。但是今日头条改变了我的认知,短视频逐渐占领了我的碎片时间,通过短视频让我看到了别人不一样的生活,跟着别人的镜头也让我“看见了更大的世界”。

拼多多月卡为了建立用户的省钱心智,在页面中突出了产品slogan,并且将“4张5元无门槛券”打造成标志性权益,降低用户的决策成本,并且形成权益记忆点,方便营销传播。

图片

 

2)心智引导

当产品设计无法与用户心智相匹配,或者改变了用户已有心智时,需要通过引导方式让用户快速建立新的心智。例如常见新手引导、功能入口提示、功能调整说明等。

图片

 

3)行为培养心智

为了培养用户习惯,签到类产品都会采用“定时玩法”打造用户心智。例如淘系的各种游戏化产品,都采用了每天早上7点定时收获游戏奖励的玩法,通过日复一日的行为刺激固化用户心智模型。

图片

对于会期比较长的年卡付费会员,用户对权益感知比较散碎,同样需要周期性权益激发用户与产品之间的互动,不断的增强用户的省钱感知。因此不少付费产品增加了月度权益。例如京东每月100元优惠券,淘宝88VIP每月兑换优惠券,1号会员店每月领鸡蛋,考拉海购黑卡月度专享购物券权益等。

 

这些月度权益在用户生命周期中形成了一个个记忆点,逐渐增强用户对产品的“省钱”心智,并且可以持续的激活用户,为续费活动做好衔接。

图片

 

3)利用心智

设计师既要为用户服务,又要考虑商业价值实现。所以某些场景下,设计师需要利用已有的心智为产品服务。

例如弹窗可以更好地吸引用户注意力,并且用户对于弹窗主要有两种操作,要么关闭要么点击。基于这样的心智,某些App开机广告就采用弹窗样式吸引用户点击。

图片

 

另外广告作为互联网平台重要的收入来源,需要考虑投放效果,因此广告大都采用软植入的方式,在形式上尽可能的与实际内容保持一致,从而借助已有的心智引导用户浏览和点击。

图片

写在最后
我个人认为心智模型其实包括交互和品牌两个层面。

在体验设计层面,设计师需要匹配用户心智和引导用户心智。而产品设计更需要建立品牌心智,提升用户对品牌的忠诚度。因此在产品和运营活动设计时需要充分考虑对品牌心智的影响,避免带来负面效果。

 

原文地址:子牧UXD(公众号)

作者:子牧先生


 

转载请注明:学UI网》设计心理学系列(03)——雅各布定律与心智模型



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

                                                            微信图片_20210513163802.png

 

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

 

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


设计实验室:车载交互(HMI)的一些设计探索

ui设计分享达人

关于车载交互(HMI)的一些探索,用一些试验和案例来进行探索与验证。

这次我们不聊视觉,也不畅想未来,只说说当下HMI产品设计与交互体验。

本文内容会涉及一些专业的汽车知识名词,因为篇幅有限,如有些知识名词不太明白可以百度一下。



别看错了,不是HDMI!


说到HMI大多数设计师应该是既熟悉又陌生,HMI是Human Machine Interface 的缩写,“人机接口”,也叫人机界面,人机界面(又称用户界面或使用者界面)是系统和用户之间进行交互和信息交换的媒介, 它实现信息的内部形式与人类可以接受形式之间的转换,凡参与人机信息交流的领域都存在着人机界面。


听起来是不是觉得这不就是UI吗?有什么区别吗?emm......的确...似乎...差不多...几乎是没有区别的,只不过是在某些场合和设备上管他叫UI,比如移动端设备,而在另外某些场所和设备上管他就叫HMI,比如汽车车机和数控机床。所以这个概念也不用去特别较真,HMI就权当做是汽车上的UI界面吧。毕竟汽车是高科技与工业结合的完美产物,“HMI”念出这个词时候就感觉是蛮专业的!很般配!


HMI前世与今生?

刚才说HMI最早更应用于工业上,比如常见的各种机床、制造装备。

或者说让时间在向前推进一点!

而这里通常意义的HMI则更加聚焦点,基本特指汽车车机或者车载多媒体设备。

说到这里还是要从车载仪表盘说起,从德国人卡尔·本茨发明世界第一辆汽车,距今已经100多年的时间了,在那些还没有HMI这个名词的年代,那么他是以什么形态出现的?那就不得不提“仪表盘”了。




当然写这篇文章并不是去评测谁家HMI更优秀,而是希望通过一些假设、实验和推断,和大家一起来探讨一下如何更有效的设计HMI。



屏幕越大越好?车内到底需要几块屏幕?

我们先从屏幕开始。

说到屏幕,设计师都是比较敏感的,因为我们最终的设计交互创意都是需要都是在屏幕上显示展示出来的,HMI当然也不例外。现在在车载屏幕上你能看到最大尺寸多大?

拿特斯拉为例,Model S和Model X车型都是17英寸,Model 3为15英尺。

当然他肯定不是最大的,熟悉汽车朋友你应该知道我想说谁了,没错就是他!拥有48寸可多段升降屏幕的BYTON新能源概念车M-Byte!48寸的确很夸张,难道屏幕越来越大就是未来HMI的方向吗?

当然这个问题肯定是否定的,为什么?那就要从车载屏幕的作用来说起。


首先我是作为一个曾经就职于汽车公司的设计师,并且是一名地道的汽车发烧友,凭借对汽车还算熟悉和热爱做出一些产品交互分析,以下如有不妥之处还望海涵。


汽车内屏幕的作用

按照功能场景总体可为三类:主行驶状态信息、附设备状态信息、多媒体&外设


不可缺少还需要与使用者与场景结合,我们先来做一个大概的用户画像


对应这些需求,汽车需要有仪表台(屏)控制和显示的区域有五个。


五个区域分别是:

1、主驾驶仪表屏   

2、中控台控制(屏)  

3、后排娱乐屏   

4、副驾驶信息屏  

5、扶手控制台(屏)


其中前三个是主流配置,后两个比较少见。

关于汽车设备这块我们不做深入展开了,毕竟这篇文章主要讨论的还是设计,直接看结果!


题外音:屏幕安全性的考量

汽车是比较特殊的设备,基于安全性考虑,汽车内屏幕尺寸不易太大与太多。

屏幕总体为玻璃材质,但与车窗风挡玻璃的材质不同,当汽车遭遇碰撞的时候,车内屏幕极易破损并形成尖锐物,极大可能会乘坐人员造成二次伤害,所以车内屏幕不易太多,更不易太大。虽然车载屏幕变大变多已不可逆转,而且随着屏幕技术的提升,柔性OLED的应用也将会在一定范围解决安全问题。但也需要汽车相关设计者多在安全方面进行考虑,任何产品体验应该建立在安全基础之上的,特别是交通工具。


物理实体按钮过时了?

为什么大屏幕操控成为了当前的HMI主流了呢?那不不得不去提一下另外一个我们熟悉的设备--手机!


同样一个有限的区域,如果用物理按键那么这么区域只能是固定的功能,而屏幕就可以无限扩展。特别是在汽车中控屏上集成内容会很多,体现就更加突出。

但是在汽车上的全部使用屏幕真的是最佳选择吗?显然这是有待商榷的。

不可否认屏幕的确有很强的扩展性,但是缺点也是明显的:1.触控反馈缺乏    2.交互效率不高


对于这样的判断,我们可以通过两个实验来进行验证。



将类似于Surface Dial这种智能按钮交互装置引入汽车的屏幕控制中,每个按钮可以根据情景进行自定义,并且吸附到汽车屏幕的任何位置进行交互操作,相信这一定是一种全新的使用体验。当然这一定是需要解决比如吸附力、安全性等一系列问题。


屏幕触控反馈

虽然目前的屏幕还有无法做到完美触控反馈,但已经出现了一些新的硬件技术来试图解决这些问题,比如Tanvas Touch,其定义为 “手指与触摸界面之间的电子压力控制”。简单来说他们的产品就 “皮肤的磁铁” 一样,能够更加精准的感应手指的动作,最后结果就是比 Apple 的 3D Touch 更加具有压感的触摸操作表现。



原理是利用手指尖触摸显示屏时产生的静电引力来模拟触感,通过电磁脉冲把更精确的反馈发送到用户的指尖。



Tanvas 也正在与汽车制造商们合作把这项技术嵌入到汽车或屏幕上,让人们更容易感触受到不同物体的表面。

也许在未来我们真的会遇到他。


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

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



文章来源:站酷   作者:残酷de乐章

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

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


3D与UI结合的设计探索

ui设计分享达人

在2020 年的苹果全球开发者大会(WWDC),苹果发布了新的 macOS 11(又名 Big Sur)。其中在UI视觉方面macOS Big Sur 系统最大的变化就是图标上, Big Sur更新了很多新设计风格的应用图标。

关于 Big Sur 的新图标的讨论很多,很多都在激烈争论。人们对苹果公司没有将完全扁平设计引入 Mac 感到松了一口气,但分歧并未停止。有些人认为这引领一种新的图标表现方式,而有些人则认为这是丑到了天际。



但苹果的设计就是这样,不管你你喜不喜欢,过一段时间他总会流行起来。就像iPhone11刚面世时,背面的摄像头组被无数人吐槽一样,而现在这个设计已经成了高端机的标板。


大家还能想起来UI扁平化设计已经流行了多少年了吗?

从2013年6月11日苹果发布iOS7算起,现在已经将近8年了,这8年时间扁平化像飓风一般席卷了整个UI设计圈,一夜间几乎所有的APP UI都被拍扁了。




其中以Instagram的换标作为扁平盛行时代的里程碑



但扁平化设计的确已经一统江湖太久了,人们似乎已经有点厌倦了。其实设计风格就是这样,并没有绝对的好与不好,只要审美不疲劳,就可以继续流行下去,至于流行多久我们经常会用一个词去形容---耐看度。

扁平化带给我们的是画面的轻盈和设计的高效率,但是缺点也是明显的,场景表现过于单一的问题,设计感体现较为有限,于是很多设计师都在尝试用新的设计风格替代或者进化现在的扁平化设计风格,今天我们就来探讨一下新拟物背景下3D与平面的结合设计,能在UI中擦出什么样的火花。


2014年我的作品-Cache 

https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html


现在这样的风格会被我们称之为重度拟物风格,他不好看了?技术落后了吗?当然不是!只是目前不流行了!

他的特点是强调光影对比与物理质感,色彩都会比较偏“暗”,而且伴随设计的往往是难和慢!刻画一个细节需要很久,在强调设计效率组件化的今天,这种费时又难学的设计方法必然不会成为主流。


当前的UI流行趋势是强调高饱和的色彩搭配(在没有光影细节之下也只有色彩可以玩了),这种风格明显也不符合趋势,被“淘汰”也就难免了。


从设计角度上解析,图标主要是由四方面构成:构图+光影+色彩+纹理

而拟物风格图标在这四方面更加强调构图、光影和纹理,而色彩则是更多去搭配纹理质感,所以你看到多数拟物风格图标在质感上很棒,但是色彩却没有那么丰富。




说到新的拟物风格,这只是一个概念,也有称之为轻拟物,轻偏平,这里并没有通用的称呼和预设的设计方法,一切的UI设计风格都是为产品本身服务,如果新的设计风格能让产品整体体验得到“提升”,哪怕这种提升只是成功获取到了用户的注意力,那这个设计就是有价值的。



所以当下如果你的产品中想要吸引目光就要有点与众不同的东西,要么是独门的功能,要么就是吸晴的设计。
显然扁平的彩色图标现在已经达不到这个效果了,而以前的拟物又显得有点过时,在这种时代背景下,新的风格必然就会被碰撞出来。


于是乎我们就会看到以下的一些大厂“创新”,你不止能看到轻拟物设计,还能看到“实物”设计......

不得不说,各位设计师们还真是拼了...


“哪怕这种提升只是成功获取到了用户的注意力,那这个设计就是有价值的。”没毛病!各位加油!


当然苹果BigSur带给我们的图标设计创新更加有趋势意义,这种3D+平面的设计组合方法更加能给我们一些设计启迪和思考,并且这种3D图标与之前的拟物风格有着明显的视觉区别

我用3D重构了一个计算器icon,以此为例来进行分解,如下:

与2D设计方法设计图标一致,都是先勾画图形(建模),然后填色、加材质和灯光,但不同的是在3D环境下,这一切都比2D环境下简单了,而且视觉效果更佳,整体画面感更佳立体,质感更加饱满,并且根据渲染器的参数调节和材质质感的不同,即使是在同一模型下,也能制造出很多种不同的视觉体验。



图标背板的选择上,由于选择了3D作为主体表现,3D背板过于抢视线,图标为了突出主体而非背景,建议使用2D平面背板与3D前景图标进行结合。

3D设计图标的确有一些天然的优势,特别是在质感和光感的表达准确度上,是绝对超过2D的。
但是2D图标在一些风格的设计也是很难替代的,比如线性图标和渐变风格图标。




3D设计的确可以提升UI整体的视觉氛围,并且现在在一些APP中已经可以看到小范围3D案例了(比如支付宝),但是多是以插画的形式出现,其实与产品UI还是有一定距离的。

未来3D设计一定会是UI中大展身手,但是目前的常见的3D设计软件实在是太庞大了,我与许多3D行业的同行聊天的时候,大家普遍的认知是现在的3D软件(包括C4D)的实际最佳场景依然是动画设计,UI的中的3D属于非常轻量级的,用现在主流的3D设计软件做UI应用案例,有点用巡航导弹打蚊子的感觉,而且这个蚊子还是距离一米以内。这有点像当年的PS来做UI,虽然可以完成但是效率不高,学习曲线也高,于是Sketch和Figma这样的产品顺理成章的取代了PS在UI界的地位。


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

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



文章来源:站酷   作者:残酷de乐章

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

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


D3.js中Force-Directed Graph详解

前端达人

Force-Directed Graph

聊一聊力导向图。力导向图在echarts等快捷的可视化工具中都有非常方便的实现方式。来看看d3.js是如何实现的。
先来一张d3.js官网实现的力导向图的照片:

接下来解释一下d3.js中实现此力导向图的过程。

index.html——源码

<!DOCTYPE html> <meta charset="utf-8"> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // 定义一个svg画布 var svg = d3.select("svg"), // 获取svg画布的宽度 width = +svg.attr("width"), // 获取svg画布的高度 height = +svg.attr("height"); // 定义一个颜色函数 // d3.scaleOrdinal()函数用来定义一个序列,其中的参数d3.schemeCategory20代表序 // 列函数的值域,这里d3.schemeCategory20指的是由RGB十六进制字符串表示的二十种分类 // 颜色的数组。因此,color()函数的值域就是离散的20中颜色值 var color = d3.scaleOrdinal(d3.schemeCategory20); // 创建一个力学模拟器 // d3.forceSimulation()函数用来创建一个空的模拟器 var simulation = d3.forceSimulation() // simulation.force(name,[force])函数的作用是:如果指定了力force,则为指 // 定的名称name分配力并返回该模拟。 如果未指定力,则返回具有指定名称的力,如果 // 没这样的力,则返回undefined。 (默认情况下,新的模拟没有力量。) // d3.forceLink()函数用来创建一个空的link力数组 // d3.forceLink().id()用来指定link力数组中每个节点的id的获取方式 .force("link", d3.forceLink().id(function(d) { return d.id; })) // 创建一个charge数组,forceManyBody()返回一个新的多体力数组 .force("charge", d3.forceManyBody()) // d3.forceCenter()用指定的x坐标和y坐标创建一个新的居中力。 // 如果未指定x和y,则默认为⟨0,0⟩。 .force("center", d3.forceCenter(width / 2, height / 2)); // 读取数据,该例子中的数据是雨果的《悲惨世界》中的人物关系信息。 // 通过力学模拟,人物关系相近的节点会比较接近;反之,节点会比较疏远 d3.json("miserables.json", function(error, graph) { if (error) throw error; // 定义人物节点之间连线的信息 var link = svg.append("g")
      .attr("class", "links") // 用line元素来绘制  .selectAll("line") // 绑定json文件中的links数据 .data(graph.links)
    .enter().append("line") // 人物节点之间连接线的粗细通过连接线的value字段来计算,value越大,连接线  // 越粗 .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); // 定义人物节点信息 var node = svg.append("g")
      .attr("class", "nodes") // 人物节点通过圆来绘制  .selectAll("circle") // 为人物节点绑定nodes数据 .data(graph.nodes)
    .enter().append("circle") // 设置节点半径 .attr("r", 5) // 设置节点的填充色,通过节点的group属性来计算节点的填充颜色 .attr("fill", function(d) { return color(d.group); }) // 以定义的这些人物节点为参数,调用drag()函数 // 绑定拖拽函数的三个钩子,即拖拽开始、拖拽中、拖拽结束 .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended)); //为人物节点绑定文字 node.append("title")
      .text(function(d) { return d.id; }); // 为力模拟器绑定节点数据 // 会为每个节点自动添加可视化时所需的index,vx,xy,x,y五个字段信息 // 并且为simulation内部计时器tick监听绑定动作,来绘制图形 simulation
      .nodes(graph.nodes)
      .on("tick", ticked);// 此处在每次tick时绘制力导向图 // 为力模拟器绑定连接线数据 // 调用结束后,会为每个连接线添加可视化时所需要的index,vx,vy,x,y五个字段信息 simulation.force("link")
      .links(graph.links); // 定义simulation内部计时器tick每次结束时的动作 function ticked() { // 每次tick计时到时,连接线的响应动作 // 设置连接线两端的节点的位置 link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; }); // 每次tick计时到时,节点的响应动作 // 设置节点的圆心坐标 node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
}); // 定义开始拖拽节点时的动作 function dragstarted(d) { // restart()方法重新启动模拟器的内部计时器并返回模拟器。  // 与simulation.alphaTarget或simulation.alpha一起使用时,此方法可用于在交互 // 过程中进行“重新加热”模拟,例如在拖动节点时,在simulation.stop暂停之后恢复模 // 拟。 if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
} // 定义拖拽中的动作 function dragged(d) { d.fx = d3.event.x;
  d.fy = d3.event.y;
} // 定义拖拽结束的动作 function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
} </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145

至此,力导向图解析完毕,这篇中有很多关于力学的专业的功能函数,理解起来有点难度。今天周日,起床后第一件事就是把这篇完结了,欧耶~

这篇文

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

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


部分借鉴自:csdn  

原文链接:

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

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

jquery获取焦点和失去焦点事件代码

前端达人

鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下

input失去焦点和获得焦点
鼠标在搜索框中点击的时候里面的文字就消失了。
我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了
相关js代码:

复制代码代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input失去焦点和获得焦点jquery焦点事件插件 - 懒人建站</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//focusblur
jQuery.focusblur = function(focusid) {
var focusblurid = $(focusid);
var defval = focusblurid.val();
focusblurid.focus(function(){
var thisval = $(this).val();
if(thisval==defval){
$(this).val("");
}
});
focusblurid.blur(function(){
var thisval = $(this).val();
if(thisval==""){
$(this).val(defval);
}
});
};
/*下面是调用方法*/
$.focusblur("#searchkey");
});
</script>
</head>
<body>
<form action="" method="post">
<input name="" type="text" value="输入搜索关键词" id="searchkey"/>
<input name="" type="submit" id="searchbtn" value="搜索"/>
</form>
<p>input失去焦点和获得焦点jquery焦点事件插件,<br/><strong style="color:#F00">鼠标在搜索框中点击的时候里面的文字就消失了</strong>。</p>
</body>
</html>

jquery获取和失去焦点事件
复制代码代码如下:


<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#username').focus(function ()//得到教室时触发的时间
{
$('#username').val('');
})
$('#username').blur(function () 失去焦点时触发的时间
{
if ($('#username').val() == 'marry') {
$('#q').text('用户名已存在!')
}
else { $('#q').text('ok!') }

})



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

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


部分借鉴自:脚本之家

原文链接:

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

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

今天咱就讲一个实用小案例,看看能不能讲的透彻一点!

seo达人


今天我们就讲一个星友的案例,好好讲讲这里面的原理,让大家吸收一波!本文案例强调重点画面主体突出,包括大小和颜色、考虑画面的深度、元素和背景颜色前后关系;仔细把元素的精致度做好。这样就能大大提升画面质感。

下面这个是星友参考的原作:

图片

然后下面这个是他练习的一个作品:

图片

我们来分析下二者差在那里。
我认为有以下4点:
1. 主体物与背景的色系反差
2. 主体物与辅助元素的大小对比
3. 辅助颜色的前后关系
4. 元素的精致度

 

1. 主体物与背景的色系反差

从色系来看,我们看原作:

图片

背景是冷色,周围元素也是冷色,只有最突出的主体物是暖色,这样的好处就是让主体十分突出。
我们做设计都知道,画面里尽量保证只有一个主要物体突出,如果所有元素都很抢,那整体看起来就会有点乱,就像下面这个练习:

图片

背景是暖色,元素的颜色有蓝色、绿色,都属于冷色,而且元素的色相都是和背景差异比较大的色相,这样就会导致整体有点凌乱。

 

2. 主体元素与辅助元素的大小对比

这点很容易理解,我们看原作的主体物是不是要比辅助元素大很多:

图片

而练习的这个主体就不够大,没有拉开对比:

图片

主次不分明,也是画面不精致的原因之一。

 

3.辅助颜色的前后关系

我们在观察画面的时候一定要注意,不要只关注二维平面的关系,还要看三维的前后关系,什么意思呢?
我们看原作的颜色:

图片

他是有很明显的前后关系的,辅助元素有蓝色:

图片

蓝色和背景的蓝比较相近,颜色就会比较靠后。
除此之外,还有灰白色,和卡片的颜色相近:

图片

颜色也会比较靠后,这样就形成了颜色的前后关系。
在使用多色时,一定要想办法融入一些无彩色,黑白灰,这样会让湖面没那么腻。
我们再来看下练习的作品,四个元素的颜色和背景都是剥离开的,没有一个是靠向背景的:

图片

这就会让画面的深度不够,没有前后关系。

 

4. 元素精致度

这个点以前经常说,元素尽量饱满一些会比较精致,我们看原作的元素,我们还是老办法,加个矩形框:

图片

每一个元素都是满的,可以撑的起来,但是练习的元素有一个就稍显单薄:

图片

如果单体不够饱满,当夜也会影响整体的精致度,所以大家一定要多注意。

 

总结

以上就是这个小案例的分析,总结一下就是:
画面主体要突出,不轮是大小还是颜色;
要考虑好画面的深度、也就是元素、颜色的前后关系;
再有就是元素的精致度要做好。
希望今天的小分析可以给大家一点启发,么么扔!

 

原文地址:菜心设计铺(公众号)
作者:菜心设计铺

转载请注明:学UI网》今天咱就讲一个实用小案例,看看能不能讲的透彻一点!

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

                                                            微信图片_20210513163802.png

 

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

 

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


后台界面设计的7条原则(附常用图表组件库下载)

seo达人

B端界面设计越来越受到重视,但设计师单从界面设计总感觉没有太多值得发挥的地方,其实对于B端界面设计来说,视觉在其中的作用真的很有限,需要设计师有更多的深度思考。今天这篇文章就从更加深入的角度去反思B端界面的底层逻辑,一起来学习吧!

文末会分享给大家一组非常实用的常用后台图表组件库,欢迎大家下载!

 

一个看起来很酷的仪表盘可能有很多功能、小工具和好的视觉效果。但实际上,它往往被设计成只是一个好看的玩具,而不是一个有用的工具。类似于一个多臂机器人,它能把数据整理成整齐的一堆,然后用明亮的数据让人眼花缭乱。

摆弄这个机器人可能很有趣,但最终会让用它的人感到失望。

为什么会发生这种情况?创造一种工具而不是一种可以很快被丢弃的玩具的诀窍是什么?

图片

Illustration: Outcrowd

 

1、构思仪表盘界面的大脑

让我们深入研究设计解剖学。仪表盘的“父母”是客户端、设计人员和开发人员,每个组件设计都需要他们的合作产出,所有关键点在一开始要做出说明。

智人是由胚胎发展而来的。首先形成的是脑细胞和神经细胞,然后是身体的其他细胞。这正是任何可行的项目应该遵循的方式。第一个阶段是最重要的。如果你忽视这个阶段,再花哨的设计也不能挽救局面。这正是为仪表盘的长期发展奠定基础。

仪表盘如果会说话的话,它会问“我为什么出生?谁需要我?“。

试问你能回答吗?因此你需要明确:

  • 仪表盘将如何助力公司目标?
  • 什么结构,功能和视觉效果将帮助仪表盘服务好用户?
  • 哪种设计最适合目标受众?

这些问题的答案将构成你的设计理念基础。

图片

Perls

 

仪表盘中没有琐碎的细节。

仪表盘显示的信息应该使用户能够做出决策。设计师的工作是帮助用户解决问题,而不是让他们使用一堆很酷的小工具。任何对目标不起作用的事情都会与目标背道而驰。

从项目的最初阶段到最后阶段,设计师必须关注公司的目标、仪表盘的目标和用户的目标。

否则,仪表盘将永远不会做的更好。

图片

Clover

 

2. 数据及关键指标选择:循环系统

仪表盘数据就像循环的血液。我们必须理解它们来自哪里,当用户需要它们时如何处理,以及应该如何可视化。

设计师需要理解数据的目的。显然,这将帮助他们选择合适的组件,但还有更多的工作要做。例如,用户希望在屏幕上看到大量不同的读数。你不需要移除任何东西来清除一些空间,但你可以做的是突出最重要的元素,并在视觉上“弱化”次要的东西。然而,要做到这一点,你必须知道数据的优先级。

图片

Bidding Car

 

最重要的指标是哪些数据能帮助达成目标。例如:

  • 显示实际成功率;
  • 影响产品的感知方式;
  • 激励创造产品的团队。

参数的选择也需要了解用户。用户应该看到哪个关键指标,他们认为什么样的可视化表现最容易理解?

人们喜欢看到与他们的目标相符的数字。

图片

Panch

 

3. 仪表盘结构:骨架

想象进入一个酒店房间,看到一张床,一张桌子和椅子,一面镜子和一个壁橱。甚至不用打开壁橱,你就能猜到里面有什么。吹风机、拖鞋和毛巾都在你想要的地方——有人确保了这些。一个好的仪表盘就像那个房间。它是干净的,整洁的,可预测的。你马上就能看到所有的要点,凭直觉知道在哪里可以找到其余的内容。

设计师有自己的工具来确保整洁。

 

1) 层次结构

首先,你得整理思绪。在开始设计之前,一定要对所有数据进行排序,将其分类,了解什么是最先发生的,什么是最后发生的,接下来是什么等等。确定用户必须马上看到的关键内容。

视觉层次结构必须反映信息层次结构。

数据层次结构通过小组件的大小和位置表示。如果你的读者从左到右阅读,关键信息必须放在左上角,最不相关的信息将在右下角。

对数据排序的方法将取决于仪表盘的用途。重要的是根据信息的优先级组织信息,并创建逻辑场景。

把信息面板看作是一个故事,而不是一系列数据点。

 

2) 网格

网格对于创建页面的总体布局、排序、平衡和对齐元素非常有用。

图片

 

3) 信息模块

模块系统类似于公寓的分区。卧室是用来睡觉的,餐厅是用来吃饭的——每个区域都有自己的功能。你的舒适度取决于他们所处位置的便利程度。糟糕的布局不能通过装修或家具来修复。相应地,必须提前考虑模块划分。

模块帮助显示内容层次结构,根据数据的重要性、相关性和逻辑连接对数据进行分组。每个模块都应该在给定的流程中服务于特定的目的。

图片

图片

 

4) 连续性和接近性

如果你去厨房需要经过有两扇门的走廊,这是一个糟糕的布局。互连的流程假定逻辑接近。如果一个模块中的流程需要来自另一个模块的信息,那么布局上应该保证数据的连续性。这一点必须提前考虑,这样用户就不必在晦涩的存储空间中寻找他们需要的信息。

图片

Illustration: Outcrowd

 

所有相关信息都应按重要到不重要的顺序进行分组,并就近放置。

 

5) 分离模块

没有人需要一个延伸到卧室的厨房。为了将一个模块与另一个模块分开,你需要负空间。确保从一开始就考虑到这一点:将负空间视为需要视觉平衡的设计元素的组合。

图片

Wingle

 

4. 功能:肌肉

功能和工具的数量由仪表盘的用途及其用户的关键目标决定。

要想自由活动,人类只需要两条腿,狗需要四条腿,蜘蛛需要八条腿。一个功能太多的仪表盘就像一条六条腿的狗一样,这有点令人毛骨悚然。

不要在控制面板上放置过多的工具。用户只需要手边有必要的东西。过多的可用工具会让人们感到困惑,并吓走他们,因为它看起来太复杂了。个性化总是比标准化好。

图片

Band

 

5.小组件:重要的器官

如果屏幕上有超过5到7个小组件,人们就很难理解内容。因此,我们的工作是让相关数据易读,但不过量。用户应该在几秒钟内理解他们所看到的内容。

数据可视化工具包括:

  • 表格
  • 图表
  • 示意图
  • 卡片
  • 指标
  • 地图
  • 图片
  • 分组
  • 筛选器
  • 列表
  • 选择树

图片

Activity

 

小组件的选择取决于仪表盘的用途和用户。想想以下几点:

  • 哪个组件能最好地显示一个特定的KPI?
  • 用户可以立即看到什么?
  • 哪个组件是用户最容易理解的?
  • 什么可以帮助用户更快地找到他们需要的东西?

选择易于理解和阅读的小组件。

这里是一个令人困惑的小组件的例子:

图片

想想主要的“目标”来吸引用户的注意力。例如,如果你的优先级是绩效目标,你应该使用数字;如果你需要比较值,用直线或柱状图会很好;为了激励团队,可以使用带有相关亮点的排行榜。

不正确选择的小组件或默认小组件模板可能会使用户混淆或导致他们误解数据。

最好的解决方案是分析和测试的结果。

图片

最好的小组件设计是极简和易于阅读的。例如,一个3D图表可能看起来令人印象深刻,但它占用了用户太多的注意力,最终证明会分散用户的注意力。这也适用于渐变、过度使用颜色和过多的细节。

 

6. 视觉设计:一般技巧

我们已经创建了仪表盘的思想和身体。唯一要做的就是皮肤——最外层。这可以根据优秀设计的基本原则来实现,但仍有一些新的需要注意的细节。

 

1) 简单

仪表盘应该像你喜欢工作的桌子一样干净:它必须只有必要的文件和工具,没有干扰。

图片

MEMO

 

2) 颜色

仪表盘颜色的选择必须有一个目的:尽可能清晰地显示信息。颜色跨度越大,就越难把数据展示清晰。所以不要让仪表盘的颜色过多。使用同一颜色的深浅是一个好的办法。

图片

首先要选择底色,然后是补色。每种颜色都必须有特定的用途。一种颜色可以用来组合元素,另一种颜色可以用来高亮。颜色还能体现一个元素是积极的还是消极的。

避免使用可能有负面含义的颜色。例如,在这个例子中,红色看起来像是代表坏的和不受欢迎的东西:

图片

如果仪表盘提供了可定制的颜色,确保所有可用的选择看起来都比较舒服。

选择颜色组合的一个好工具是Adobe color CC。

 

3) 突出

语义高亮应该与视觉高亮相对应。为了突出一个元素,你可以使用颜色(对比度,亮度),形状,大小,负空间等。

 

4) 可读性和数字格式化

这是确保视觉清晰度的重要因素:干净的布局,视觉层次,重点突出,对比元素,适当的字体,这些字体也必须具有对比性和易读性。

高精度的数字格式很难理解。最好把所有的数字都四舍五入,然后把较长的数字尾巴去掉。

 

7. 适应性

在实践中,当用户优先考虑桌面版本时,在移动版本之前创建网页版本是合理的。如果你的目标用户主要使用的是手机版本,那么你可以先从移动设备着手构建仪表盘,然后再开发桌面版本。

图片

Snap

 

总结

设计一个好的仪表盘不是一件容易的事情。我们把它比作人类的发展,因为它是一个很好的方式来呈现重要的东西。当你在设计仪表盘时,请不断地问自己:是否一切都已就绪?有多余的肢体吗?身体的各个部位协同工作吗?用户会喜欢这个结果吗?它有用吗?

正如你所看到的,视觉设计实际上是设计师最不应该担心的事情。

最后,彩云再分享一组常用的后台图表界面组件库,相信会对大家的日常设计工作有帮助,

图片

图片

图片

获取方式:关注公众号 ,后台回复关键词  后台组件 ,即可获得!

 

本文翻译已获得作者的正式授权。

 

原文地址:medium

作者:Erik Messaki

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

译者:彩云Sky

转载请注明:学UI网》后台界面设计的7条原则(附常用图表组件库下载


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

                                                            微信图片_20210513163802.png

 

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

 

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

当等待无可避免时,如何优化等待体验?

ui设计分享达人

一、尽量减少用户等待的情况,尽可能缩短等待的时间

如当用户浏览网页的时候,若在用户浏览到已加载内容的倒数第5条再预加载10条内容,可缩短用户浏览接下来内容时的加载等待时间。再如生活中医院的预约挂号系统,用户可以提前一两天挂号,当预约时间到了直接到指定科室看病,避免了长时间的排队挂号。


二、如果是不可避免的等待,该用什么办法去优化等待体验呢?

总的原则是:在用户等待时给予用户反馈,告知状态,且尽量让用户在感知上缩短等待的时间。反馈可根据等待的预估时间不同、场景不同,选取不同形式。

  • 一般情况下理想的响应时间应该控制在 100 毫秒内,一些响应的时长可允许达到1秒,绝不可超过2秒无反馈。

  • 若是等待响应时长为2-9秒时,可设计循环的加载动效(loading),告知用户正在加载中。

  • 若是等待响应时长超过10秒时,可设计带有进度指示的加载动效。此时除了告知用户正在加载中(即告知等待原因和当前状态),还要告知用户预期响应的时间。



可采取分步响应用户的方式,多次反馈,可让用户在感知上缩短等待的时间。

如一些页面内容较多,加载时能分步显示,可按照框架、文本、占位图、图片的顺序加载显示,会在感知上缩短加载时间。又如加载一个新视频,视频前几帧优先显示最小体积的视频资源,等较高清视频内容加载出来时再切换为高清视频资源,可缩短用户等待视频开始播放的时间。



唐纳德诺曼提出过排队等待的6个设计原则,可以很好地帮助我们设计等待体验,6个原则分别是:

(1)提供一个概念模型。

(2)使等待看起来合理。

(3)满足或超越期待。

(4)使人们保持忙碌。

(5)公平。

(6)积极的开始,积极的结尾。


下面我们就说说这6个原则在优化等待体验上的运用:


1. 提供一个概念模型

概念模型是帮助人们把复杂自然现象转变成可用的,可理解的心理模型。概念模型可以帮助用户理解事物,了解事物如何运作以及当前处在哪个阶段、理解当前为什么处在等待状态,以及产生对未来即将发生事情的预估和期待。

如用户通过饿了么下单后,app上会用插画显示商家备货、骑士送货的过程。让用户了解外卖送到手中的整个流程,以及当前处在流程的哪一阶段,距下一阶段预估还有多久。如果是雷雨天,订单页面的插画还会模拟实时天气情况,用户看到插画想到骑士正在雷雨环境下送货取货,也会理解骑士配送辛苦、理解当前配送缓慢,缓解等待时的负面情绪。



2. 使等待看起来合理

使等待看起来合理,即通过概念模型使用户理解为什么要等待,明白等待是有缘由的。

如用滴滴打车时,当我们按下呼叫快车按钮,页面会显示动效光波信号向外扩散,同时会显示当前排队人数。设计师通过设计建立一个简易的概念模型,让用户理解当前的等待的原因,并认为等待是合理的。实际上滴滴派单的算法流程可能与页面显示的流程不同。但用户等待时会理解此时手机正在发出信号请求驾车信息、或此时正有多人在排队、或此时正在等待司机接单。



3. 满足或超越期待

满足或超越期待指用户给等待时间估算时长时,如果用户实际的等待时间比心理预期的等待时间要短,用户会有相对比较好的心理体验。

心理学专家曾做过一个实验,同等时间下,同样长度的进度加载条有三种进度显示方式:进度条速度匀速、速度先快后慢、速度先慢后快。三种相比较发现,当进度条增加速度先慢后快,用户的体验最好。而用户体验最差的是加载速度先快后慢,因为如果开始的时候加载速度比较快,用户一开始就有了较高的心理预期,当速度变慢时便低于用户的心理预期,感知体验就会变差。



4. 使人们保持忙碌

使人们保持忙碌即让用户在等待的时候有事可做。因为当人们非空闲时,对时间的心理感知会比空闲时对时间的心理感知要短。

利用这个原则的设计如:CorelDRAW软件下载安装时,软件安装等待页面除了显示进度条还放映国际优秀设计图片,CorelDRAW用户一般都是设计爱好者或设计从业者,通过让他们浏览优秀设计图片来度过软件安装时间,避免用户纯空闲等待。



5. 公平

当用户正在等待时,如果等待看起来是合理且公平时,不易引起用户的负面情绪。如果等待看起来是不公平的时候,更容易引起用户的负面情绪。如:当你正在排队买票时,同等条件下,你看到后来半小时的人比自己先买到了票。你可能会抱怨,“为什么比我晚来半小时的人都排到了我却还在等”。

针对公平方面的设计如银行的叫号办理业务系统。用户统一到取号机前取号,每当一个窗口的空出来,叫号系统便叫一个最早的号去该窗口办理业务。这比人们直接分散在多个窗口排队会更公平,不会出现早来却因为这个窗口排队慢而导致等待时长比晚来的用户更长的情况。同时把多个小队伍变成一个大队伍,用户感知上也会觉得队伍移动的更快,也有助于降低等待的负面情绪。


6. 积极的开始,积极的结尾

德国心理学家艾宾浩斯曾提出系列位置效应,指记忆材料在系列位置中所处的位置对记忆效果发生的影响,包括首因效应和近因效应。(来源:百度百科)即人们回忆体验时,在最开始和最后的体验比中间的体验更能让人印象深刻。所以当我们在设计等待流程时,要保证等待开始和等待结束时有较好的体验。


如当我们在餐馆排队结账时,一些餐馆结账台旁边会放着一盘薄荷糖,收银员帮用户办理结账时会对用户说可以拿几颗薄荷糖。这个小奖励会让用户走出餐馆后对刚刚结账时排队等待的不好体验的记忆变弱,而对最后的薄荷糖有更深的印象,从而对餐馆也留一个相对好的印象。

关于等待体验的优化设计案例还有好多,但基本的设计原则是相通的。

我们在实际设计时可先整理用户整个体验流程中可能等待的点,看看哪些是可以通过设计或技术缩短实际等待时间的。针对不能缩短实际等待时间的点,我们先预估每个等待的时长,并设计概念模型让用户理解等待的缘由且能预估等待的时间,且采取合适的方式让用户在感知上尽量缩短等待时间。

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

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



文章来源:站酷   作者:酱紫Y

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

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


AI 时代的设计

ui设计分享达人

这是5月参加阿里设计周“智能与计算”分论坛后的感想小结,因为论坛大部分在讲算法和实现方式,所以在这里我就其中的AI与设计相关部分做一些深入分享。undefined

我的思路大概分为三个部分:AI时代的来临;AI如何影响设计;未来的设计何去何从。

undefined

undefined

第一部分:聊聊AI时代来临,设计的世界发生了什么变化?

undefined每个时代的设计都有不同的定义,农业和工业时代的设计更多是指设计师通过手工制作的方式阐释自己对美感和艺术的理解。

undefined到了信息时代,设计除了要考虑美感,还要考虑是否实用和好用。设计的对象开始从真实世界转向数字世界,设计思想开始考虑以用户为中心的设计;设计方向也增加了很多领域,包括都多媒体艺术、游戏设计、网页设计、移动应用设计等。

undefined在人工智能时代下,AR设计、智能硬件逐渐发展,设计的改革更多考虑的是如何将真实世界和数字世界进行融合,如何在自己产品上更好地阐释艺术、美感和实用性。

第二部分,AI如何影响设计,设计因为人工智能而产生了哪些改变呢?

结合论坛的内容,我觉得从以上五个方面产生了较为深远的影响。

人工智能帮助设计师解决在创意过程中面临的一系列问题,将重复劳动变得自动化 ,节省设计师大量的时间,减轻设计师的工作量。

undefined数据驱动自动生成,取代人工建模,减少了设计的时间成本。通过组件标准化,来构建三维几何,然后geometry格式入库,最后由渲染引擎绘制。

undefined再比如,双11期间有1.7 亿个BANNER,都来自阿里的“鹿班”AI设计系统。设计数据—机器学习、训练模型—生成设计结果并评估。如果这些工作量由人工来完成,那么设计师真的就成了“没有感情的作图机器”了。

当今社会,随着产业智能的发展,在这个变革中,挑战不单单来自技术,也来自客户对智能数字体验的极致追求。这给开发人员和设计师都提出了全新的难题,在可视化领域,通过技术和设计两个角色更紧密的捆绑,产生了让人欣喜的化学反应。

从原始数据到图表并不是直接的,它需要经过交互的分析,得到指标结果,最终以可视化图表呈现,而呈现的视觉方式是多样化的。

这就是所谓的两种数据,三层讲述

第一步是原始数据的准确转译,工具需要数据对接能力,即对现状的讲述。

第二步是分析过程,从脚本模式跨入数据驱动,让数据的分析变得可知可信。

第三部是观点数据的表达,也就是创作强化,将结论以可视化的多样形式被表达。

这是根据地图的原始数据得到的多种可视化设计方案,同一份原始数据,却得到了不同的形式表达。

因为仅仅有准确的数据结论是不够的,因为数据需要更好地被讲述和表达,如果仅仅将数据呈现给用户,那么理解难度将会大大提高,而设计是为了让产品变得更加容易使被理解和使用

第二点,体现在建筑的三维可视。

首先,在二维地图选取建模范围,通过智能化的处理,根据数据构建初始的三维地图。

然后通过数据联动,将城市建筑虚拟还原。

整个过程从数月—> 数周—> 数天,时间大大缩短,人力成本减少,释放更多的精力去进行创意工作。

建筑三维化的应用:比如车道级地图。

相比于传统地图,车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。

undefined车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上,还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。

当设计对象从单个产品转变到用户的经历和当前环境时,设计师不能只考虑自己的产品体验,需要从大局出发,思考每个产品之间的联动,考虑不同场景下自己的产品如何服务用户以及如何与其他产品联动。产品设计从单体变成一块需要考虑兼容上下左右外部环境的拼图。

智能化的场景的改变对设计有哪些影响呢,我们来看这张图:设计的场景从有形—>无形、静态—>动态、永恒—>瞬间的转变。体验设计的趋势从GUI到TUI(实体交互),再到Radical Atoms,场景的改变对设计的影响维度不是单一的

undefined

设计场景在AI时代不仅局限于手机,还涉及到实时场景的设计情况。

比如谷歌的实时翻译、语音翻译。输入与输出是同步进行的,这就对设计提出了新的要求。

此外,还有语音智能VUI,彻底打破了以往的交互体验,改变了人和工具之间的互动关系,反向塑造着人类的认知方式和学习行为。下面来看一个小爱5.0案例:

undefined

对话是人与人之间交换信息的普遍方式,语音交互设计涉及系统学、语言学和心理学,因此它比 GUI的交互设计更加复杂。

undefined体验设计经历了PC时代、Mobile时代,现在进入IoT体验时代。设计的解决方案与技术的发展息息相关,设计和技术互相促进带来新的体验革命,设计师一直在探讨和实践在新技术环境下的新体验设计,并基于出行、医疗、社区、政务等行业持续挖掘服务聚合模式与场景体验的创新。

在新零售的场景下,购买和支付流程发生了改变,这就需要设计师重新思考消费者的心理地图。例如无人零售、Amazon Go、支付宝IOT支付等等。下面来看一下Amazon Go的案例:

undefined

如何让用户使用更便捷、体验更顺畅;要向用户提供什么样的服务,如何让用户注意到我们的产品,如何向他们传递企业的服务价值和特点,这是IOT新零售下需要设计深入研究的方面。

在云端实现企业产品的全区域管控,监控的设计视觉和交互又是不一样的,比如论坛上的案例:荷鲁斯之眼、全区域覆盖的云监控等等。

通过对多个实体空间中的数字设计探索,重新塑造人与空间的交互界面,提升人们对于空间的使用体验。下面举个例子:

AT&T discovery district是一个数字化的互动商业社区。

它从重新审视建筑本体开始。通过虚实和光影的变幻,营造出了实体空间体验,空间本体就是对话的那个界面。实体空间和数字内容的结合,构建出人与建筑之间新的交互界面。

广场的数字球体入口,人的位置和数量变动,球体内的灯光也会跟随变动。

undefined

人工智能促使了交叉学科的工种产生:数字体验设计师、创意工程师。这两种职业是做什么呢?面对正在到来的智能时代,体验设计师和创意工程师将共同面对“AI”这一全新的命题,在智慧工地、智慧教育、数字警务室、神经符号AI等应用中,提炼出智能感设计方法、利用图形技术能力自研产品并赋能业务。

数字世界中的设计师:横跨了艺术、文化、科学、商业多个学科;从传播学、心理学、应用科学和统计学进行用研,去解决用户遇到的问题。

它不仅涉及到需求分析和产品设计,还贯穿至产品运维、测试、发布、分析,从设计洞察中做出创新设计。

未来的设计师将融合人工智能和创意编程技术,在世界数智化的大潮中找到新的定位和新的机遇。

undefined

第三部分,在人工智能时代下,未来的设计会走向哪里?新时代的设计师怎样找准自己的定位呢?

人工智能的成熟对部分设计师来说简直是灾难性的打击,之前无论是通过技法还是数据分析才能完成的工作,人工智能一下子就可以完成,后续根本不需要这么多设计师来完成这些工作。那么设计师是否会被人工智能取代?我们先来看一张人类能力地图:

这张图中,海拔高度代表这项任务被计算机执行的难度,不断上涨的海平面代表计算机现在能做的事情。从图中可以看出,目前人工智能水平预警线距离代表艺术的山峰还很远。

人工智能没有人类的跨领域推理、抽象类比能力,也没有人类的主观能力如灵感、感觉和感受;更没有人类特有的灵魂、爱、意识、理想、意图、同理心、价值观、人生观等,这导致人工智能在未来很长一段时间内都无法很好理解人类的心理和行为是什么,在解决推理和情感问题时会不尽人意。

undefined设计除了解决问题外,还涉及对美的理解和创作,美感是对美的体会和感受,它是复杂的,包含了历史、文化、环境、情感等客观因素和主观因素,所以在不同的时代、阶级、民族和环境中,有着不同文化文化修养和个性特征的人对美的定义也不同。

人工智能依赖数据和经验解决问题,它能解决大部分智力可解决的问题,但解决不了需要情感和美感才能解决的问题。而设计的擅长领域,是人工智能不擅长的:跨领域推理、抽象能力、常识、审美、自我意识与情感。那么AI与设计的关系怎样的呢?

设计是为了解决问题。人工智能使机器代替人类实现认知、识别、分析、决策等功能,其本质是为了让机器帮助人类解决问题,也就是说,人工智能在一定程度上也是一种设计,它会创作出与人类思维模式类似的解决方案。所以AI与设计师是一种共生关系。因此设计师不用杞人忧天,担心自己被人工智能取代。

随着AI 技术的成熟,设计必定会发生新一轮的变化,在未来,更多领域和行业需要用到界面设计、人机交互等技能,各行各业的设计师需要掌握以上技能才能更好地服务当前业务。那么未来的设计将走向哪里呢?

undefined新一代的设计师是“与互联网共同成长的一代”,相信在未来几年里有更多的新晋设计师会掌握编程开发能力以及其他能力,综合素质会比目前的设计师更强,所以我们要保持终身学习,懂得如何将自己的能力和经验转换为优势,这样才能在设计道路上不被超越。

undefined那设计师可以从哪些方面来应对智能时代的机遇和挑战呢?

undefined每一代人都有被下一代人取代的风险,但有些很厉害的人就不容易被取代?因为他们在不断创造价值。无论在社会、行业还是在企业里,当具备一定的影响力后,他们能更容易积累人脉和资源,然后反哺自己的价值,就跟滚雪球一样,当雪球越大,他们越不容易被别人取代,设计师需要有这样的意识。

undefined设计师需要懂得更多领域的知识和技术才能拓宽自己的视野,这些领域包括但不局限于传感技术、网络技术、智能仿真技术、虚拟技术、生物技术、纳米技术等。因此科学与艺术是可以并且很有必要相通与交融的,设计师一定要学会跨界思考。人工智能时代下,数字世界和物理世界会逐渐融合,大到城市建设、公共服务、衣食住行和医疗;小到智能家居、穿戴式设备,这些机会将会留给已准备好的挑战者,所以设计师一定要拓宽自己的视野,不要把自己的目光局限在界面设计上。

undefined如果不想被人工智能领先,人类的设计应该是创新的(未成熟、未被发现规律的),包含更多元素的(更多复杂参数如历史、文化、环境、情感等),“设计”这个词语就涵盖了以上元素。人工智能在艺术设计上还远远达不到人类的水平,深耕艺术设计将会为设计师带来更多机会。

undefined在人工智能时代下,当产品基本都能满足永不需求时,能为产品带来活力和差异的除了自身的底层技术基础,更多的是艺术型设计师的理念和风格,以及自身的品牌。就像时尚品牌优衣库和Gucci,单件商品两者的品牌和设计所带来的的利润差距巨大,相信未来的人工智能产品也会面临类似的问题,设计师应该考虑如何为产品赋予更多价值,如何彰显用户的个性。

undefined既然AI是一个强大的工具,那么我们要思考如何运用它来创造更多的价值。AI能够快速便捷地获取大量信息,帮助设计师拓展自己的视野,不断更新自己的世界观,从新的视角看待问题和解决问题。除了快速获取信息外,设计师也应该考虑如何通过AI提高自己的工作效率,例如哪些纯劳动力工作交给AI去做效率会更高;哪些工作可以和AI一起协同完成更能激发创意。

undefined

最后,用一本科普书改编的话来结尾:一想到,还有95%的问题留给开发同学,我就放心了。

最后附上一张本文的脑图:

undefined

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

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



文章来源:站酷   作者:西子zhulijuan

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

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

ECharts中dataZoom组件及散点图的绘制

前端达人

ECharts中dataZoom组件及散点图的绘制

dataZoom 组件是对 数轴(axis) 进行『数据窗口缩放』『数据窗口平移』操作。

可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。



dataZoom 组件可同时存在多个,起到共同控制的作用。控制同一个数轴的组件,会自动联动。下面例子中会详细说明。



dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。



dataZoom 的数据窗口范围的设置,目前支持两种形式:



百分比形式:参见 dataZoom.start 和 dataZoom.end。



绝对数值形式:参见 dataZoom.startValue 和 dataZoom.endValue。



dataZoom 组件现在支持几种子组件:



内置型数据区域缩放组件(dataZoomInside):内置于坐标系中。



滑动条型数据区域缩放组件(dataZoomSlider):有单独的滑动条操作。



框选型数据区域缩放组件(dataZoomSelect):全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。



在代码中加入dataZoom组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>代码加入dataZoom组件</title>

    <!--引入Echarts文件-->

    <script src="js/echarts.min.js"></script>

</head>

<body>

<div id="main" style="width: 800px;height:400px;"></div>

<script type="text/javascript">

    var dom=document.getElementById("main");

    var myChart=echarts.init(dom);

    var app={};

    var option=null;

    //先只在对单独一个横轴,加上 dataZoom 组件,代码示例如下:

    option = {

        tooltip:{},//提示框

        xAxis: {

            type: 'value'

        },

        yAxis: {

            type: 'value'

        },

        dataZoom: [

            {

                type: 'slider', //这个dataZoom组件是slider型dataZoom组件

                xAxisIndex:0,   //dataZoom-slider组件控制第一个XAxis

                start: 10,       //左边在10%位置

                end: 60         //右边在60%位置

            },

            {

                type: 'inside', //这个dataZoom组件是inside型dataZoom组件

                xAxisIndex:0,   //dataZoom-inslide组件控制第一个XAxis

                start: 10,       //左边在10%的位置

                end: 60         //右边在60%的位置

            },{

                type:'slider',

                yAxisIndex:0,   //dataZoom-slider组件控制第一个yAxis

                start:30,

                end:80

            },{

                type:'inside',

                yAxisIndex:0,   //dataZoom-inside组件控制第一个yAxis

                start:30,

                end:80

            }

        ],

        series: [

            {

                name: 'scatter',

                type: 'scatter',

                itemStyle: {

                    normal: {

                        opacity: 0.8

                    }

                },

                symbolSize: function (val) {//控制点的大小,(参数为data中第三列的数据)

                    return val[2] * 40;     //用回调函数控制点的大小(请查看官方文档)

                },

                data: [//data中第三个参数控制点的大小

                    ["14.616","7.241","0.896"],

                    ["3.958","5.701","0.955"],

                    ["2.768","8.971","0.669"],

                    ["9.051","9.710","0.171"],

                    ["14.046","4.182","0.536"],

                    ["12.295","1.429","0.962"],

                    ["4.417","8.167","0.113"],

                    ["0.492","4.771","0.785"],

                    ["7.632","2.605","0.645"],

                    ["14.242","5.042","0.368"]

                ]

            }

        ]

    }

    if (option && typeof option === "object") {

        myChart.setOption(option, true);

    }

</script>

</body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

可以通过滑动滑轮实现图形的缩放



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

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


部分借鉴自:csdn  

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

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

日历

链接

个人资料

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

存档