首页

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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

openlayers6【十九】vue HeatmapLayer热力图层实现热力图效果详解

前端达人

1. 写在前面

本问下面有矢量图层设置的区域,和热力图层设置的热力图的效果,区域绘制效怎么设置详细内容可以访问 openlayers6【十七】vue VectorLayer矢量图层画地图省市区,多省市区(粤港澳大湾区)效果详解,主要讲解的是热力图层效果实现。区域绘制只是为了效果更好看。好了,继续往下看

在 openlayers 中,图层是使用 layer 对象表示的,主要有 WebGLPoints Layer热度图(HeatMap Layer)图片图层(Image Layer)切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型,它们都是继承 Layer 类的。

前面两篇文章 我们讲了矢量图层 VectorLayer的常用的场景,这篇我们写一篇 HeatMapLayer 的使用。可以看下图所示的热力图实现效果。 放大缩小地图热力图效果。
在这里插入图片描述

2. Heatmap 类实现热力图

2.1 Heatmap 参数

var heatmapLayer = new ol.layer.Heatmap({ source: source,//热力图资源 opacity:1,//透明度,默认1 visible:true,//是否显示,默认trur zIndex:1,//图层渲染的Z索引,默认按图层加载顺序叠加 gradient:['#00f','#0ff','#0f0','#ff0','#f00'],//热图的颜色渐变 blur: 15,//模糊大小(像素为单位) radius: 8,//半径大小默认为8(像素为单位) extent:[100,30,104,40],//渲染范围,可选值,默认渲染全部 }); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2.2 实现热力图

2.2.1 addHeatMap()方法详解:

  1. 准备热力图需要的初始化数据,colors 热图的颜色渐变,hatmapData 表示值数量越多显示到页面的热力图颜色越深。codeList 准备的数据的城市对应的经纬度坐标。
  2. 创建热力图图层 HeatmapLayer
  3. 把热力图图层添加到 map 中
  4. 调用添加热力图要素的方法 AppendFeatures()

2.2.2 addHeatMap()方法代码:

/**
 * 添加热力图
 */ addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "绵阳市" }, { name: "广安市" }, { name: "雅安市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "宜宾市" }, { name: "甘孜藏族自治州市" } ]; let codeList = { 成都市: { center: { lng: 104.061902, lat: 30.609503 } }, 广安市: { center: { lng: 106.619126, lat: 30.474142 } }, 绵阳市: { center: { lng: 104.673612, lat: 31.492565 } }, 雅安市: { center: { lng: 103.031653, lat: 30.018895 } }, 自贡市: { center: { lng: 104.797794, lat: 29.368322 } }, 宜宾市: { center: { lng: 104.610964, lat: 28.781347 } }, 甘孜藏族自治州市: { center: { lng: 101.592433, lat: 30.426712 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); }, 
  • 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

2.2.3 AppendFeatures()方法详解:

  1. 遍历hatmapData和points数据根据名称一致的 循环创建要素 new Featurenew Point信息
  2. 把要素添加到热力图层的数据源中

2.2.4 AppendFeatures()方法代码:

/**
 * 增加要素到热力图
 */ AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

3. 完整代码

<template> <div id="app"> <div id="Map" ref="map"></div> </div> </template> <script> import "ol/ol.css"; import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; import { Tile as TileLayer, Heatmap as HeatmapLayer } from "ol/layer"; import Proj from "ol/proj/Projection"; import XYZ from "ol/source/XYZ"; import { Map, View, Feature, ol } from "ol"; import { Style, Stroke, Fill } from "ol/style"; import { Polygon, Point } from "ol/geom"; import { defaults as defaultControls } from "ol/control"; import { fromLonLat } from "ol/proj"; // 四川的边界数据文件 import areaGeo from "@/geoJson/sichuan.json"; export default { data() { return { map: null }; }, methods: { /**
         * 初始化地图
         */ initMap() { this.map = new Map({ target: "Map", controls: defaultControls({ zoom: true }).extend([]), layers: [ new TileLayer({ source: new XYZ({ url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" }) }) ], view: new View({ center: fromLonLat([104.065735, 30.659462]), zoom: 6.5, maxZoom: 19, minZoom: 5 }) }); }, /**
         * 设置区域
         */ addArea(geo = []) { if (geo.length == 0) { return false; } let features = []; geo.forEach(g => { let lineData = g.features[0]; let routeFeature = ""; if (lineData.geometry.type == "MultiPolygon") { routeFeature = new Feature({ geometry: new MultiPolygon( lineData.geometry.coordinates ).transform("EPSG:4326", "EPSG:3857") }); } else if (lineData.geometry.type == "Polygon") { routeFeature = new Feature({ geometry: new Polygon( lineData.geometry.coordinates ).transform("EPSG:4326", "EPSG:3857") }); } routeFeature.setStyle( new Style({ fill: new Fill({ color: "#4e98f444" }), stroke: new Stroke({ width: 3, color: [71, 137, 227, 1] }) }) ); features.push(routeFeature); }); // 设置图层 let routeLayer = new VectorLayer({ source: new VectorSource({ features: features }) }); // 添加图层 this.map.addLayer(routeLayer); }, /**
         * 添加热力图
         */ addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "绵阳市" }, { name: "广安市" }, { name: "雅安市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "宜宾市" }, { name: "甘孜藏族自治州市" } ]; let codeList = { 成都市: { center: { lng: 104.061902, lat: 30.609503 } }, 广安市: { center: { lng: 106.619126, lat: 30.474142 } }, 绵阳市: { center: { lng: 104.673612, lat: 31.492565 } }, 雅安市: { center: { lng: 103.031653, lat: 30.018895 } }, 自贡市: { center: { lng: 104.797794, lat: 29.368322 } }, 宜宾市: { center: { lng: 104.610964, lat: 28.781347 } }, 甘孜藏族自治州市: { center: { lng: 101.592433, lat: 30.426712 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); }, /**
         * 增加要素至热力图
         */ AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } } }, mounted() { this.initMap(); //初始化地图 this.addArea(areaGeo); //添加四川省的边界描边和填充 this.addHeatMap(); //添加热力图数据 } }; </script> <style lang="scss" scoped> // 此处非核心内容,已删除 </style> 
  • 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
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177

4. 添加删除map图层的方法

//添加热力图层 this.map.addLayer(this.layer) //删除热力图层 this.map.removeLayer(this.layer) 
  • 1
  • 2
  • 3
  • 4

5. 热力图自身的get,set方法

//获取-设置,模糊大小 heatmapLayer.getBlur() heatmapLayer.setBlur(15) //获取-设置,渲染范围 heatmapLayer.getExtent() heatmapLayer.setExtent([100,30,104,40]) //获取-设置,热力图渐变色 heatmapLayer.getGradient() heatmapLayer.setGradient(['#00f','#0ff','#0f0','#ff0','#f00']) //获取-设置,最大级别 heatmapLayer.getMaxZoom() heatmapLayer.setMaxZoom(18) //获取-设置,最小级别 heatmapLayer.getMinZoom() heatmapLayer.setMinZoom(2) //获取-设置,透明度 heatmapLayer.getOpacity() heatmapLayer.setOpacity(0.5) //获取-设置,半径 heatmapLayer.getRadius() heatmapLayer.setRadius(5) //获取-设置,热力源 heatmapLayer.getSource() heatmapLayer.setSource(source) //获取-设置,是否可见 heatmapLayer.getVisible() heatmapLayer.setVisible(true) //获取-设置,图层的Z-index heatmapLayer.getZIndex() heatmapLayer.setZIndex(2) //绑定事件-取消事件 type事件类型,listener函数体 heatmapLayer.on(type,listener) heatmapLayer.un(type,listener)



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

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


部分借鉴自:csdn  

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

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


如何建立产品设计中的“安全感”

seo达人



根据马斯洛需求层次理论,安全需求位于第二层,属于低层次需求,反映了人们对稳定、安全、受到保护、有秩序、免除恐惧和焦虑的需求。所以在产品设计中需要保护用户的隐私信息,让用户时刻掌握系统状态,从而减少用户焦虑,提升产品体验。今天我们就聊一聊如何在产品设计中建立用户“安全感”。

 

文章主要分为3部分:

  1. 用户为什么会产生不安全感
  2. 安全感的设计方法
  3. “不安全感”的应用

 

01 用户为什么会产生“不安全感”

马斯洛指出:心理的安全感(psychological security)指的是“一种从恐惧和焦虑中脱离出来的信心、安全和自由的感觉,特别是满足一个人现在(和将来)各种需要的感觉”。也就是说,缺乏安全感是因为用户陷入恐惧和焦虑中。

 

1、不安全的层级

我个人将缺乏安全感分为了3个层次:

图片

1)精神层面——焦虑无助

现实生活中,当我们遇到紧急问题又无法解决时,通常会感觉到焦虑无助。使用信息产品时,如果缺乏有效的指引和出口,我们同样会感到焦虑。例如公司内部通讯产品,密码必须要在内网OA系统中才能重置。如果重装App又忘记了登录密码,而上班进出园区和考勤又必须使用该产品,造成了死循环,用户必然要“出离愤怒”了。

2)信息层面——个人空间

微信已经成为了社交必备产品,很多人都会在朋友圈中秀出生活的日常信息。但有些“好友”关系是临时性的,并非生活中的真实好友,用户并不希望将个人信息曝光展示给他们,所以微信增加了好友关系分级功能,增加用户的安全感。

同样浏览记录、购买记录、搜索记录等都属于用户的个人行为数据,需要赋予用户删除权限,防止隐私信息泄漏。

图片

3)物理层面——生命财产

手机号码、身份证、银行卡等都是非常重要的个人信息,这些信息泄露之后可能会给我们带来财产损失,因此产品在获取这些信息时需要征得用户同意,同时也要为用户保护好隐私信息。

图片

 

2、不安全感的原因

1)信息未知

恐惧和焦虑更多的是因为对信息的“未知”,尤其是涉及金钱、健康的场景下,当用户对信息不理解或者不熟悉时,就很难产生信任感,更不会有安全感。

例如用户对于长串数字的量级识别效率会降低,当进行大额转账时,为了防止出错,我们会反复确认数字。于是很多支付工具增加了汉字来展示金额量级,帮助用户快速识别输入的量级,从而增加用户的安全感、提高操作效率。

图片

虽然电商平台带来了购物的便捷,但是用户无法亲身感受商品质量,担心购买后发生扯皮和退货难等问题。于是就有了运费险和7天无理由退货等保障措施,消除用户担忧,从而提高用户的购买意愿。

2)认知偏见

正如我们对美女总是抱有莫名的好感,我们对于不美观或者丑陋的事物也存在认知偏见。如果产品视觉效果粗制滥造,用户更容易产生不信任感。

 

02  安全感的设计方法

用户交互过程大致可以分为“认知-行动-反馈”3个阶段,在不同的阶段都需要带给用户“安全感”。

图片

 

认知阶段

1、消除未知

1)更熟悉的信息

人们在熟悉的环境中会更有安全感,本质上是因为对信息的了解和掌控。所以对于用户不熟悉或不易理解的功能,需要进行一定的包装,便于用户理解。

例如支付宝股票中将大盘的涨跌,通过天气晴雨表的形式来展现,让普通用户轻松理解大盘的状态。淘宝搜索列表中,专门将用户“曾经买过的店”展示出来,可以唤起用户的购物记忆,增强用户对商品的信心。

图片

2)更真实的信息

高德地图利用AR技术直接将导航与实景相结合,用户看到的不再是系统处理过的地图,而是真实环境的直观体验,从而更好的提升用户使用过程中的安全感。

图片

3)更充分的信息

让用户获得更多的信息可以增强用户的掌控感,从而建立用户安全感。

高德地图导航在可选择的条件下,默认提供3条可选路线。有些路线明明又远又耗时间,为什么还要呈现给用户呢?一方面更多的信息方便用户选择,带来掌控感。更重要的是如果只显示一条路线,用户可能会产生疑问和不信任感,不确定系统给出的路线是不是最好的选择。

图片

 

2、增加未来的预期

除了让用户熟悉当下信息,还需要通过足够的信息让用户建立对未来的信心。

1)信用背书

拼多多为了增加“百亿补贴”的可信度,减少用户对商品“假货”、“非正品”的担忧。专门引入了中国人保保险为活动承保。1号会员店作为京东的子产品,则借用更有品牌影响力的“京东”为其代言。

图片

2)达人带货

网红直播带货已经成为了重要的营销方式,一方面网红产生的超高流量,同时用户对他们更加信任,认为他们的推荐更有保障。

另外熟人关系也会带来更强的信任感,所以拼多多建立了拼小圈,淘宝建立了淘友圈,通过好友关系相互影响,带给用户更强的购买信心。

3)承诺保障

正如上文所说,七天无理由退货、假一赔四逐步成为了电商的标配。而为了减少用户对付费会员能否“省回会费”的担忧,电商平台增加了“不回本退差价”的玩法。除此之外,双11等大促活动电商平台还会着重强调“价保”、“全年最低价”等信息,消除用户的后顾之忧。

图片

 

3、视觉带来的情感

1)产品IP形象

IP形象实际上是产品拟物化的表现,可以增加亲和力,拉近用户和产品之间的距离。例如天猫猫头设计已经成为了一种符号和载体,在双11期间既传递了商品品牌,又让平台更加深入人心。

图片

2)视觉效果

视觉表现力已经成为了产品改版迭代重点发力方向,希望通过高品质的界面效果和视觉品牌形象,增强用户对产品的信心。旧版的建行App简直就是灾难,我第一次打开的时候真的想立马删掉,但是迫于转账需要只好硬着头皮使用。好在新的版本总算是进步了。

图片

 

行为中

1、掌控感

在高德地图中提供了丰富的信息,例如经常拥堵的时间点,拥堵状态,拥堵距离和市场等,甚至包括了未来不同时间点的行车时长等等,帮助用户合理的安排出行计划。

图片

 

2、行为过程中的信息反馈

开车时最怕遇到堵车,一旦堵车用户就会想“有没有更好的路线呢”。高德地图除了提醒拥堵信息之外,还附加了“虽然前方拥堵,但您依然在最优路线上”话术,让用户安心驾驶,不需要二次确认路线。

此外防错、容错等基础设计原则都可以帮助用户建立很好的安全感。

 

行为后

1、信息可跟踪

用户在使用支付宝转账后,会展示转账的节点信息,用户可以随时跟踪转账的进程,特别是大额转账时间较长时,可以更好地减少用户等待的焦虑。

图片

 

2、稳定性

如果用户在使用产品时经常遇到bug,用户很容易对产品产生怀疑。而对于付费会员类产品,同样需要保持权益的稳定性,反复的权益变更也会造成用户的不信任。

 

03 “不安全感”的应用

安全感是用户需要的,但是有时候“不安全感”是商家需要的,因为可以产生一定的激励作用。

 

1、不确定性

很多活动都是打着“数量有限,先到先得”的玩法,不明确告知数量,不展示进度,增加了购买的不确定性,对有需求的用户可以产生一定的压力,让其尽快下单。或者采用预约玩法,通过预约人数的曝光给用户带来一定的压力。

图片

 

2、损失玩法

很多游戏化产品都加入了互偷玩法,为避免能量损失,用户不得不定时收取能量或者设置保护罩。

往年的618、双十一、双十二期间,天猫养猫游戏都会推出团队PK玩法,将“不安全感”发挥到了极致。为了保住胜利果实,用户每天在对战结束前都不敢丝毫松懈。

所幸今年天猫官方已经宣布618期间,养猫不再设定PK玩法了,大家可以“佛系养猫”了。

图片

 

以上就是我总结的体验设计中“安全感”的设计方法。

 

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

作者:子牧先生


转载请注明:学UI网》如何建立产品设计中的“安全感”


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

                                                            微信图片_20210513163802.png

 

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

 

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



设计系统指南——搭建你的专属色彩系统

seo达人


想要搭建一套完整的设计系统,颜色是你需要最优先考虑的,我浏览了大量设计系统相关外文也下载了各类搭建完毕的设计系统文件,颜色永远是排名第一的考虑项。至于原因,就要提到颜色(后面会统称为色卡系统)在设计系统中所担任的角色及其意义。

另外,我基于figma搭建了个人博客,以期以更灵活的方式展示和分享内容,后续文章、设计系统资源都会在上面进行发布,大家可以收藏一波。

博客链接 点击此处

 

原文地址:UI中国

作者:南山可

 

转载请注明:学UI网》设计系统指南——搭建你的专属色彩系统


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

                                                            微信图片_20210513163802.png

 

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

 

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


全局性设计思维 | 让设计创造更大价值

ui设计分享达人

导读


你的设计是否能被理解?为什么设计的价值总是不被人认可?


设计不仅仅只是带来美感,好的设计能够为产品、公司甚至整个社会创造巨大的价值。而在创造好的设计这个过程中,最重要、也是最容易被人忽视的,便是设计思维。


何为全局性设计思维?它能够为设计师带来哪些价值?本文将从设计的本质出发,结合设计的发展趋势,带你了解全局性设计思维的真正力量。




目录


写在前面

一个习惯性的序

一、我们为什么需要设计思维?

二、下一个时代在哪里?

三、互联网“下半场”,从大势中看变化

四、设计思维的转变,差异与融合

五、探寻全新的思维方式

六、全局性设计思维概述

七、如何运用全局性设计思维?

八、以全局性设计思维,构建设计体系

九、文章预告

-



写在前面


这篇文章的主要内容,来自我在19年底的一个沙龙分享。整个分享以设计思维的角度入手,讲述了全局性设计思维的来源和重要性,以及我是如何在不同产品线上去运用这种设计思维的。


何为全局性设计思维?为什么要讲这种思维方式?


这是我一直在探索并实践的一种设计思维。从最开始的理论雏形,到各种项目的实践,不断进行修正和完善,最终形成了一套卓有成效的思维方式。通过这种思维方式,我逐步帮助产品解决了许多长期性的问题,并最终构建了各种不同类型的设计体系。最终,随着品牌矩阵与产品体系的落地,形成了一个完整的网易智慧企业设计体系。

网易智慧企业设计体系


因为篇幅原因,本篇文章将重点从理论层面阐释全局性设计思维的导论、价值及使用方式。而具体的实战案例,我之后将会以另外几篇单独文章的形式进行展现,并详细讲解在设计过程中的一些细节与过程。希望能够帮助大家更深入地去理解如何根据不同的场景正确地去使用这种思维方式。


未来可能会包含以下几篇文章:


全局性设计思维 | 如何打造强大的品牌体系

FishDesign组件库 | 从零到一构建企业级UI组件库

全局性设计思维 | 如何构建事业部级大型设计体系


当然,目前的设计体系仅仅只是一个开始,未来还有很长的路要走。


希望本文能够给为你带来小小的启发,让设计思维帮助你更好地发挥设计的价值。如果你对某一方面特别感兴趣,可以直接跳到这一章进行阅读,无需浪费过多时间。如果你有任何疑问,也欢迎随时与我交流。




一个习惯性的序

-


“喵呜~”   我又出现了,那个爱写序的装逼作者。


这次把序放在了第二段,这样子看上去就不那么不务正业了哈哈。当然,写序更多的是为了记录生活,希望每一篇文章不仅仅只是传递知识,更是一篇有温度的文章。


经历了风风雨雨的2019,又度过了魔幻版的春节,我终于又开始正式地写文章了。但这次不同,我拥有了两只可爱的小伙伴——汽水和芬达。汽水8月18出生,芬达8月20出生,现在都已经是肥肥壮壮的两大只了。。


汽水总是在我码字的时候,睡在我的键盘上,或者以各种姿势吸引我的注意力。。  为啥拖了这么久才写写完文章,除了懒以外,汽水大概也要背点锅,哈哈。


整个2019年中,经历了很多事情,人生观也随之发生了些许变化。


从并肩作战的同事的不断离去,到逐渐需要考虑团队的发展。从单打独斗闯天下,到思考如何让整个团队更加优秀、如何建立完善的设计体系等等。


角色、心态、责任,以及如何坦然地面对自己。


活在当下,用心生活。这是我一直当作座右铭的语录,也是我希望给自己的承诺。总是试图去尝试这种状态,但却异常艰难。像我这样的人,看上去总是“积极向上”,总是“规划未来”,总是希望事事完美,强迫着每个细节的完善。但不知不觉中,人生好像开始进入了“自动驾驶”的模式,活在了过去的思索中,活在了未来的规划中,唯独对于当下异常麻木。


这并不是我想要的生活,我开始尝试做出改变。


偶然间,通过一些书籍,我开始尝试正念禅修。感受每个呼吸中空气的流动、感受身体的每个部分、感受当下空间发生的每一件事情。虽然只是很浅显的境界,但正念依然对我产生了巨大的影响。我开始重新地审视自己的人生,审视自己的生活状态。

网易蜗牛图书馆:与快乐的小伙伴们


这种感觉,就像再次地呼吸了新鲜空气一样。


我们其实只存在于当下的时空中,过去和未来,并非真实存在的事物。回想一下,我们有多久没有像小时候一样,完完全全、毫无杂念地享受在当下的时光中了?


用心活在当下,平静地接纳一切发生的事物,这种感觉真是太美好了~




一、我们为什么需要设计思维?

-


对于设计师来说,什么能力更为重要?是设计这门“技术”本身,还是思考如何去设计的“思维”能力?


对于不同的设计师来说,一定会有不同的答案。


这两种能力本身并不矛盾,他们相互影响,互相促进——就像“术”与“道”之间的关系。设计能力决定了设计作品的输出质量,而设计思维则决定了你思考问题、解决问题的能力。


然而,在现实的大环境下,“术”的重视程度远高于“道”,造成了很多设计师与日常业务的“分离感”。以至于,多数的设计师,无法将自己的设计能力有效地用于日常业务中;抱怨他人不理解设计,也因此错失了许多机会。


重视设计美感,其实并没有问题。视觉是最直接的表现方式,我们从最初开始喜欢这个行业,并最终成为设计师,大概都是因为如此。包括我个人,也是美感的极致追求者,常常为了几像素的细节,调整无数稿。也常常沉浸于自己的作品无法自拔emmm…


但是,美感之后,设计还需要什么?


路易斯·沙利文曾讲过:“形式追随功能”。而功能存在的意义,则在于解决问题。视觉的形式、美感,很多时候只是包裹在外侧的表层,而解决问题才是设计真正的核心。视觉的表现,一定要遵循解决问题的方式,向用户传递恰当的信息,最终引导用户以此来解决问题。


因此,我更希望更多的设计师,在追求美感的同时,能够重拾设计思维本身,寻找设计最根本的价值。


我们其实可以站得更远一些。学会去理解事物,学会用设计去解决问题。再以此为基础,通过你的设计能力去塑造它、点亮它,让它成为一个真正美好而又有价值的设计。


而设计的价值,将会成为你的价值。




二、下一个时代在哪里?

-


互联网时代中的数字产品设计,需要什么样的设计思维?或者说,当下我们需要什么样的设计思维?


这个问题的答案,好像一直在变。


互联网本身便是一个新的形态,1989年“万维网”发明,1996年中国引入互联网,到今年已经有大约24个年头。我们经历了不同的互联网时期,而“设计”的概念也一直在变化中。


Internet 1.0 PC互联网时代。在这个时代,我们将大量的信息虚拟化,并通过网络进行信息传递。而我们的“设计师”们大多被称为“美工”,我们的“设计思维”,便是将信息变得更好看。


Internet 2.0 移动互联网时代,或者称为消费互联网时代。自从2007年乔布斯发布第一代iPhone之后,叠加4G、wifi等技术,手机成为日益重要的终端,世界逐渐进入了移动互联网时代。伴随着iPhone与其应用的出现,乔布斯让所有人理解了“用户体验”的重要性。我们不再是“美工”,我们变成了“UI设计师”、“交互设计师”。而这个时代,我们的设计思维变成了“用户体验思维”。


那么,下一个时代在哪里?我们的设计思维又将如何转变,才能适应下一个时代?




三、互联网下半场,从大势中看变化

-


1.红利消失、增长触顶,互联网下半场到来


最近几年,我们已经能够明显地感知到——互联网的“寒冬”真的来了。随之而来的,便是互联网的发展方向似乎也正在发生变化。于是大约从2017年开始,互联网圈内逐渐出现一个新的名词——互联网“下半场”。人们普遍认为,中国的互联网将会由消费互联网时代进入下一个时代,即互联网下半场。


我并不完全认同互联网”下半场“的称呼。互联网本身是一个年轻的行业,中国互联网“下半场”,其实更像是互联网发展方向转变的标志。


因此,我们认为的下一个时代的方向,也许将会是Internet 3.0——即产业互联网时代。



互联网会什么必须要进入下一个时代?


对于互联网企业来说,一方面在成本端,随着人口红利消褪,劳动力价格上升,企业的成本将逐渐升高,倒逼管理者使用系统和工具来提高效率;另一方面,在收入端,野蛮增长的时代结束,增量经济转向存量经济,红利经济转向效率经济


在“成本”与“效率”的双重压力下,再加上整个市场经济的下行周期,整体经济出现下滑,而一些依靠融资的互联网公司将难以为继。因此企业不得不寻找方式来提升效率,降低成本——而这正是企业级软件(ToB产品)最擅长的地方。


因此,在互联网寒冬之下,ToB市场便理所应当地开始被重视。


让我们纵观整个中国市场的发展,互联网的兴趣虽然促进了消费领域的蓬勃发展,但产业领域的发展则因此受到了巨大制约。中国率先从消费端、从第三产业开始数字化,然而在第一、二产业的数字化进程似乎并不是很快。一个重要的原因是,人口红利促使了消费互联网的快速发展,而这种红利让人们忽视了产业互联网的重要性。


在寒冬之下,我们终于发现,消费互联网蓬勃的基石,正是底层坚实的产业互联网。产业互联网如果不能得到有效的发展,则整个市场经济将无法更进一步的发展。


因此,产业互联网时代的到来,是中国互联网发展的需要,也将是大势所趋。



2.ToB市场将迎来机遇


产业互联网的发展,需要依托B端领域的发展,并逐步融入并带动整个产业进入互联网时代。那么,B端产品在中国目前处于一个什么阶段呢?


对于整个中国的ToB行业发展现状,大多数的人并没有一个清晰的概念。盘点中美上市的科技公司会发现,美国toC领域与toB领域市值之比是6:4,但在中国这个数字是20:1。


虽然互联网的整体环境不同,但中国ToB行业的发展,显然是落后太多了。于是乎,2018年开始,BAT大举布局,PE、VC加速进场——中国B端产品已经逐渐进入必须发展的时候了。


中国市场已经坐拥全球最发达的发达的消费互联网体系,而产业互联网的发展则却严重滞后。


同时,对比B端中云计算领域的IaaS、PaaS、SaaS三层架构,全球市场中SaaS占据了52.5%的份额,在中国却是IaaS分走了最大的蛋糕,占比达61.2%。中国市场VC的投资总额已经与美国相当,在SaaS领域美国企业获得了全球70.1%的融资,而中国只有11.7%。


因此,在互联网下半场,相对于ToC行业的触顶,ToB行业将会迎来历史级的发展机遇,随之而来的将会是产业互联网时代的逐渐到来。而在整个B端产品的类目中,SaaS产品作为企业级软件中最集成的产品,也将随着这股浪潮迎来爆发式的增长。


什么是SaaS产品?很多同学并没有接触过B端行业,平时用到的也都是C端产品,所以对B端产品的了解比较少。在B端行业最热门的云计算领域中,目前普遍会分为三层架构。SaaS(Software as a Service–软件即服务);PaaS(Platform as a Service–平台即服务) ;IaaS(Infrastructure as a Service–基础架构即服务)。


附:云计算领域,三种不同的架构与对应的服务。


PaaS基于IaaS实现,SaaS的服务层次又在PaaS之上,三者分别面对不同的需求。越往上层,产品的集成度越高,提供的服务也就越丰富,而用户所需要的自行解决的东西就越少。而最顶层的SaaS产品,便是用户可以直接购买并使用的云端产品。


我们为什么要了解这些趋势?


因为一个新的时代,对应一场变革,也将成为一次新的机会。不管是SaaS产品还是其他B端产品,都将在新的时代中逐渐得到重视。而C端产品的发展策略,也将迎来新的变化。对于许多设计师来说,这将会是一个新的机遇。


顺势而为,方能乘势而上。




四、设计思维的转变,差异与融合

-


那么,在逐渐到来的产业互联网时代,设计师需要注意哪些东西?设计思维又将进行如何转变?


产业互联网时代,意味着B端产品将得到重视,并与C端产品逐渐趋于平衡。因此,了解设计思维的变化,我们首先要从B端与C端产品之间,在产品设计与产品策略之间的差异性说起。



1.服务对象的差异性


从服务对象来看,C端产品的服务对象是人,产品的目标是针对人们生活方式进行的变革、升级。而B端产品的服务对象则大多是企业,目标是帮助企业进行商业效率的提升,从而产生价值。


服务对象的差异性,决定了产品在发展策略也将存在着较大的差异性。



2.产品“打法”上的差异性


从宏观的打法上看,消费互联网时代会更求“快”,而产品互联网时代则会更偏“稳”。


C端产品的服务对象是人,而人的需求在个体差异性上相对变化较小,这就决定了C端产品通常都拥有广阔的用户市场


因此,消费互联网时代就像是资本在辽阔平原的角逐,长驱直入。讲究快速占领市场,不断地试错、不断地调整。从团购到直播,从打车到短视频领域的兴起,再到最后的单车大战落幕。消费互联网时代的每一次风口,都伴随着各种“游击战”式的竞争。入场速度、快速调整能力、资本深度,都直接影响了最后的结果,而最终的结果也往往是胜者为王,败者将快速地被市场淘汰。


B端产品的服务对象是企业,而企业间的需求差异性则非常巨大,这就决定了B端产品通常需要较强的纵深能力。相对应的,其用户群里在总量上就比较小、但也相对稳固。


因此,产业互联网就像在崎岖丛林的蹒跚前行,渐次演进,如同一场旷日持久的拉锯战。一方面,产业互联网的链条非常长,需要长期的深耕、积累才能逐渐站稳脚跟。而这也导致了产品的壁垒足够深厚,同类产品在短期内无法快速跟进。另一方面,企业间的差距需求的差异性非常大,因此产业互联网存在非常多的细分市场,不同的产品各自在不同的赛道中深耕。而其最终的结果往往是百花齐放,各自盛开。



3.整体行业的协同发展


虽然整个市场都不断地强调——ToC增长触顶,ToB是一篇蓝海。但这并非是“取而代之”,而是逐渐走向整体的“协调发展”。中国ToB的发展的一个重要根基,其实是“中国拥有世界上最成熟的消费互联网体系”这一巨大的优势。


因此,ToC在很长的时间内,仍然会是互联网的主力,而ToC市场的转型,也将有赖于ToB产品所提供的服务。


而随着中国将“互联网+”政策上升为国家战略,更是明确了以互联网带动传统产业的发展方向。因此,互联网的下半场,即产业互联网时代的最终形态,将是互联网与传统行业的“融合式发展“。


ToB产品将会成为带动互联网下一轮发展的核心驱动力。一方面帮助ToC领域完成转型,进入更健康、更稳健的发展阶段;另一方向,ToB领域赋能传统产业与互联网相融合,并最终完成产业升级。



4.产品形态的融合与趋同


整体产业的融合趋同,意味产品的特性也将互相融合。一个很重要的现象是:C端产品逐渐变得不那么C端了,而B端产品也越来越变得得不像B端了。


比如C端产品的主流赛道中,随着头部产品的赛道日渐趋于稳定,其产品体量也因为业务扩展而不断增加。同时,因为产品体系的逐渐形成,为了服务更多的C端用户,会有越来越多的B类用户进入平台,而为了满足B类商家的需要,产品的B端属性变得越来越强了。


而随着B端产品的不断受到重视,原先不被重视的产品UI、用户体验也逐渐在B端产品中得到加强。B端用户虽然服务于B端,但使用者终究是人。而随着竞争的不断加剧,原来的“重功能、轻体验”思路逐渐式微。我们逐渐发现,许多B端产品长的越来越像C端产品了,甚至在UI和体验层面做的与C端产品不相上下。


因此,随着产品属性的融合趋同,意味设计思维势必会与消费者互联网时代存在差异。而我们的设计思维将不仅仅局限在诞生于消费互联网时代的“用户体验思维”。我们需要更新的、更广阔的设计思维,以满足下一个时代的产品发展需要。


那么,新的思维是什么?它将从何而来?



五、探寻全新的思维方式

-


从整个市场的协同发展,到产品形态的融合趋同。那么,我们的设计思维需要如何进行相应的变化?是同样进行“融合趋同”,还是另辟蹊径,寻求新的视角?



1.关键词提取


首先,不管设计思维如何变化,它一定需要同时满足两种产品设计思维的特性。通过前文的分析,我们可以在产品设计特性的维度,提取各自的关键词进行分析:


产品体验:诞生于消费互联网时代的用户体验思维,在产业互联网时代依然是产品设计中最重要的部分。无论是C端还是B端产品,用户体验必然是产品的核心竞争力,只有足够好用、好看,产品才能获得更多用户,最终获得商业上的成功。


灵活性:在消费互联网时代,在激烈的竞争中,C端产品的灵活性的打法对于产品的突围至关重要。而未来的B端产品竞争将会加剧,这就需要B端产品也逐渐需要较强的灵活性。


成长性:产品的发展必将伴随着不断的变化,特别是具有一定体量之后,产品设计的成长性将至关重要。因此,产品的设计是否能够预见未来发展,满足不断变化的产品形态,伴随着产品不断地成长,也将成为产品是否能够持续获得成功的关键因素。


产品效率:因为产品服务对象的关系,B端产品一直是产品效率的代名词。而在人口红利消失与经济下行的压力下,产品效率将成为所有企业关注的重要因素之一。产品的效率不仅影响着企业的成本,也是产品竞争力的重要体现。


这四个关键词,将会是我们在未来所需要关注的四个重点关键词。越是往左,则“C”属性越强,因为它更多地从用户的角度出发,更关注用户体验。而越是往右,则“B”属性越强,因为它更多地从企业的角度出发,更关注企业的长期发展。



2.跳出单一层面,寻求新视角


在四个关键词中,我们会发现,特性越是靠右,其所需要的整体性就越强。要满足灵活性,就需要用户体验与产品策略相关联。要满足成长性,则要进一步结合底层的开发能力。而产品效率的提升,则需要产品的设计与不同层面都有着紧密的耦合。


在互联网设计发展的过程中,我们从单点只关注视觉表层的“美工时代”,逐渐发展为关注线性的“用户体验思维”。在对于产品用户体验层面,确实有着长足的发展。


但是,单一层面的用户体验思维,在逐渐成熟的互联网时代中,逐渐显示出了一定的局限性。我们的价值局限于单一的体验层面,我们似乎无法对产品形成更大的影响力,也难以为产品带来体验之外的更多价值。


因此,设计思维想要满足新时代的需求,就需要同时满足前文提到的四个关键词。这就要求我们需要跳出单一层面,以全局的维度去思考产品的设计。


因此,全局性将成为未来的关键,我暂且将这种思维方式称为——全局性设计思维。




六、全局性设计思维概述

-


全局性设计思维,即在设计过程中,始终能以更高的维度去审视全局,思考当下的设计。


何以全局,如何跳出单一层面?这种思维方式的前提,是你要首先了解整个产品(亦或是物体、组织等)的运行方式,清楚的知道整个产品需要达到的目标,从而准确、合理地对针对目前的局部做出设计,并最终构成整个完整的形态。


而“全局”的前提,是你拥有更高的眼界。你的眼界越高,你对产品、市场、甚至整个社会的洞察就越全面,你就能够解决越大的问题,你能够实现的价值就越高。眼界是基础,解决更大的问题是目标,而全局性设计思维则是实现这个目标的方式与过程。


全局性设计思维,可以帮助我们跳出产品的单一层面,去思考从产品层、到体验层、再到开发层这一完成的整体。让设计满足体验层的同时,满足产品层面的目标,同时让产品的设计与开发高度耦合,将整个产品串联成一个完成的整体。


好了,讲了这么多,我们具体应该如何去运用全局性设计思维呢?




七、全局性设计思维的运用方式

-


全局性设计思维,的应用方式非常广泛。它并不是一个固定的方程式,而是一个更高层面的指导性设计思维,能够通过不同的形式,来帮助你解决问题。



1.全局观——在生活思考更多可能


在尝试这种思维之初,我们可以通过一些小的实践,去锻炼这种思维能力。


在日常的生活、工作中,其实我们有大量的事物可以练习和运用这种思维方式。比如你在装修一个大房子,需要去选择房子里的家具。当你在购买家具时,常规的思维方式是:这个家具在某个房间时应该是怎样搭配的,所以我要购买什么样形状、颜色的家具,来满足这个房间的需要。


但是,用这么思维方式来购买家具,将为对家具的灵活性与长期价值造成一定影响。从居住环境的长远来看,也许这个家具有可能会因为某些原因,需要放到另一个房间,而它的形状、尺寸、配色却无法满足其他房间的需要。最终,我们只能重新购买,或者接受一个风格、尺寸上并不搭调的房间出现。


因此,当我们在购买家具时,我们是否可以利用全局性设计思维,从整体空间的角度出发(而非单个房间),去思考如何让家具满足更多空间需求。长此以往,我们不仅可以打造一个风格统一的大空间,同时也能增加每个家具的利用率,在无形中也增加了这个家具本身的价值。


之所以举家具这个例子,是因为这个原理与产品设计的原理非常类似。你可以将这个房子看成是整个产品,而家具则是不同的组件。通过不同的家具(组件),构成了我们的不同功能模块(房间/功能区),而所有的功能模块则构成了整个产品(房子)。


房子(产品体量)越大,房间/功能区(功能模块)就越多,家具(组件)的多样性、复杂性就越高,我们就越是需要从全局的角度去思考装修的统一性(风格体系化)和家具的通用性(样式组件化)。只有这样,我们才能更好地去打造一个风格统一、体验一致,同时又具备足够自由调整空间的“大房子”。



2.全链路——从全流程中重新思考设计


当你仔细地去理解许多非常著名的设计作品时。你会发现,几乎所有优秀的、巧妙的设计,往往在设计中都体现了全局性的设计思维。它不仅仅解决着当前的问题,同时也能够解决更大的问题,发挥巨大的价值。


比如著名的坂茂卫生纸的设计,看似普通,只是将卫生纸的轴心从圆形改成了方形,但它却成为了举世闻名的、公认的好的设计。为什么呢?

undefined


我们先了解一下这个设计为什么好。


首先,传统的圆形纸卷拉出来的纸会比你实际需要的更多。而方形纸卷则由于阻力的作用,让你用得更少,从而起到了解决资源的作用。其次,在运输过程中,圆形的纸卷之间会产生很大的空隙,而方形纸卷则能够紧紧靠在一起,提升空间利用率,从而起到降低运输成本的作用。


这简单的设计,居然发挥了如此大的作用。


那么,为什么我们在设计时就没有考虑到这些问题呢?因为我们从最开始,就没有从“纸”的整个全流程来去思考问题。


让我们“站的更远一些”,纸这个商品,并非只是我们见到的在商店售卖的那一刻。它从工厂中制造完成,通过运输送到每个超市中,当我们购买以后,它又会在很长一段时间内,出现在卫生间,陪伴你使用的每一刻。我们可以将整个流程分为3个场景,而每个不同的场景,又将会对纸本身有着不同的影响。


  • 运输场景——卫生纸的运输成本——卫生纸的价格

  • 售卖场景——卫生纸的造型、包装——影响用户购买

  • 使用场景——卫生纸的使用过程——影响用户的使用体验


当我们能够考虑到卫生纸的运输过程时,我们就可以通过设计去降低运输成本;而当我们可以考虑到用户的使用场景时,我们就可以通过设计,去提升阻力,降低使用量,间接地去提升用户的使用体验。而当我们通过全局性设计思维,可以同时解决这三个问题时,我们的设计就是好的设计,就拥有了更高的价值。


发现了吗,为什么你没有想到相同的设计方案?设计能力并不是关键,设计思维才是指引你做出好的设计的前提。当你能按上述的方式,去思考整个流程、不同的场景,我相信大多数的人都能够设计出坂茂的设计方案,甚至比这个方案更好的解决方式。




八、以全局性设计思维,构建设计体系

-


通过前面的两个案例,相信大家已经了解了全局观、全链路两种应用方式。


那么,我们最最最关心的问题——如何在业务中去使用这种思维呢?


在产品设计中,全局性设计思维也有着非常多样化的使用方式和场景,在之后的文章中我也会讲到很多应用方式。但是,在所有的方式中,我认为最为有效的,便是以全局性设计思维,帮助产品去构建一个完整的设计体系。



1.设计体系概述


什么是设计体系?谈及设计体系,大多数设计师会认为,设计体系就是设计规范。“不就是找个名次包装一下规范嘛?”


我们为什么需要设计体系?它与设计规范有何不同呢?


设计规范是设计师最为熟悉的一种规范文档。在产品设计时,优秀的设计师通常都会建立设计规范。然而在实际的项目中,设计规范往往无法难以有效实施。比如在开发眼中,规范并不符合开发规则,过于碎片化。而产品经理通常又不会去了解设计规范,因此在构建产品框架时也常常随意发挥。


很多项目做到最后,设计规范仅存在于纸面的意义,并随着项目的发展逐渐混乱。为什么会这样? 


因为不同职能间的思考方式存在差别,设计规范对于其他职能来说经常难以理解与运用,无法与其他职能形成有效联动。


设计规范仅仅是基于视觉层面的规范,它是一个“平面”。而设计体系则是贯穿于产品的每个层面的、与产品深度结合的完整体系,它是“立体”的“有机生命体”。


设计体系的核心在于“体”,它是贯穿于整个产品的完整体系。设计体系由设计师创造,并深度融合于产品每个部分。它能够让产品更紧密、更统一、更有序,伴随着产品的生长,与产品共同进化,并最终推动产品的发展。


创造并推动这一体系,则要求设计师需要更全面的能力。只有充分地去理解并参与产品的每个部分的设计,才能让设计真正延伸至产品的每个部分。


而创造这一切的前提,便是全局性设计思维。



2.设计体系的构建法则


罗马不是一天建成的,设计体系也是如此。设计体系的建立是一个漫长的过程(与产品体量相关),需要在前期投入更多的精力。但若是你的方法得当,就会在项目中越来越轻松,并以此形成良性循环,而你也会越来越有成就感。


如何正确地去构建设计体系呢?我在这里总结了几个要点:



1)树立观念


首先,树立长期的体系化意识是必要前提。在任何项目中都要时刻保持体系化思维,着眼于整个项目,去寻找体系化的推动时机。当你在潜意识中拥有这种思维之后,你会自然而然的将其植入到设计中。



2)以解决问题为导向


体系化并非凭空建立,而是建立在解决问题的基础之上。设计体系的本质,就是由无数个标准化的解决方案,最终构成的一个完整的体系。因此,我们要以解决问题为导向,以全局性思维去思考问题的本质,最终建立适用于全局设计体系。



3)以小为始,重视质量


脚踏实地,从小处入手,去发现产品中最基础的一些问题。表面上看这些问题,对项目影响不大,但他们数量庞大,加在一起便会严重影响整个产品的效率。因此,我们要首先建立高品质的基础体系,再以此为基础构建更大的体系


不要一开始就设法建立一个巨大的体系,那样只会是一盘散沙,因为它的结构是无序、混乱、不健康的。而这也是大多设计规范缺乏有效性和可实施性的根源。


梅拉妮·米歇尔的《复杂》一书中讲到,任何复杂系统,都是由无数个体通过简单的算法所构成的。在算法领域也是同样的原理,一个优秀而强大的代码,必然是由无数个小型模块,通过简单的算法耦合形成巨大的代码矩阵。基础算法越强大、代码结构越“健康”,可扩展性和灵活性就越强,其能力就越强大。



4)从规范入手,由面到体


从本质上来说,设计体系是由“多个个层面的规范”组合而成的。因此,由设计师推动的体系化建设,往往最初都是从设计规范这一“单层规范”开始。但是,设计体系的建设需要将单层的规范,通过不同的方式,转化为不同层面的规范,最终由面到体,形成体系化。



5)换位思考,寻求跨职能合作


设计体系的建立与维护,通常需要多职能的通力协作。因此,我们需要经常换位思考,在完成设计的工作,帮助其他职能完成目标。只有这样,才能得到更多的信任,并以此为基础推动更多体系化的建设。


比如我在设计一个功能模块的页面时,首先会与不同模块产品经理进行交流,了解不同的业务需求,并从产品层面就开始寻求统一性与通用性。这样的话,当其他模块需要同一个功能时,前端便可以直接复用,同时后端的数据也可以进行互通。而在开发端,我也会详细了解不同端的开发实现原理,务求设计规范与开发规则在理解上的一致性。这一既方便了开发理解规范,同时也从根本上提升了开还原的准确性。


长此以往,整个团队就能够建立良好的沟通和互信关系。有了这种默契,设计体系的推动就容易多了。



6)保持优化,不断成长


设计体系的另一个重要价值在于,它是可以伴随产品不断成长的。所有产品都是在发展中不断变化的,过分僵硬的规则,将会对产品发展起到反作用。


在业务发展中,产品一定会不断地加入新的功能模块,并对原有页面作出相应的调整。因此,设计体系需要时刻与产品策略保持一致,及时与上下游职能沟通,不断地针对产品发展进行优化,以保证设计体系能够符合产品的发展需要。



7)使用正确的推动方式


体系化最终能否成功实施,推动的方式至关重要。


在日常的项目中,大多数的业务方对设计体系了解甚少,也难以体会其中的价值。因此,他们通常会认为这些东西毫无必要,多数情况也不太愿意配合体系的推进。如果强行推进,反而会引起不必要的阻力,招致反感。那么,我们应该如何正确的去推进设计体系建设呢?


1.为他人带来价值:首先,寻找双方共同的利益点是首要任务。也许是可以让其他职能的工作更高效,也许能够促使其达成KPI,再不直接,那也一定能够为整个产品带来价值(不然你也没必要推了。。)。总之,设计体系一定要能够为他人带来价值,这样才能顺利推进。否则人家凭什么要协助你推进,因为你美丽可爱吗?你也可能比较可爱,但总归是不能一直这么来吧。。。


2.在解决问题后提出方案:不要一开始就啪一下抛出一个“宏大的理想”,大部分人会觉得你不切实际。你只需要通过这个体系,帮助业务方先解决一个问题,然后再提出你解决方式的来源——一个严谨的、可验证的、长远价值的体系化解决方案。


3.寻找合适的推动时间:最后,对于设计体系来说,寻找到正确、恰当的推进时机至关重要。比如当你在平时突然想要提出,对现有品牌进行升级时,大多数业务方都会认为你是没事找事。而如果情况是在新的一年中,产品进行了概念的升级,这时候你将概念以及未来的品牌规划融入在你的方案中,再去推进品牌升级,就会容易很多了。




九、文章预告

-


本文旨在引导大家更好地理解和学习这种思维方式,想要用好全局性设计思维,光靠讲是远远不够的。最重要的是能将这种思维带入到产品中,为业务带来更大的价值。


因此,在后续的几篇文章中,我将通过不同类型案例,为大家深入讲解全局性的具体实践案例。



全局性设计思维 | 如何打造强大的品牌体系


为什么要建立品牌体系?品牌体系有哪些价值?设计师应该如何推动品牌体系的建立?


本文将带你了解网易智慧企业品牌体系的建设与推动全过程,聊一聊品牌体系建设的那些事儿~



FishDesign组件库 | 从零到一构建企业级UI组件库


我们为什么要建立组件库?在产品的什么阶段需要组件库?如何抽象业务组件?组件库设计过程中有哪些重要的细节需要注意?


本文带你深入了解,网易Web端组件库——FishDesign组件库从零到一的完整全过程。



全局性设计思维 | 如何构建事业部级大型设计体系


设计体系有什么价值?如何基于不同的业务建立设计体系?设计师如何推动体系化建设?在体系化过程中有哪些需要注意的地方?


我将会在这篇文章中,为大家介绍网易智慧企业设计体系构建全过程


1. 样式组件化+规范体系化,形成产品设计体系,整体重构产品线。


2. 结合品牌体系,推动事业部更多产品加入体系,形成智慧企业Web端产品设计体系


3. 推动更多产品/业务融入体系中,让智慧企业设计体系不断成长,赋能业务发展




写在最后

-


好吧,似乎文章又写得偏长了一些。只能说,想要认真地讲清楚一个道理,确实不是一件容易的事情。


设计思维本身并不复杂,但想要讲清楚它的背景、原理及价值,就需要把它整个掰开来讲。而为了确保设计思维的可实施性,又需要经过大量的实践研究,自己能够走通以后,才能与大家分享。


坦白讲,似乎整个社会都在追求快节奏、碎片化阅读。但若是因此而丧失了自己学习的节奏,那么等于是没有节奏的,你的知识体系也将是东拼西凑,无法形成一套完整的体系。这也是我更新比较慢的原因之一,希望大家读完文章,能够切实地得到一些东西,这就很有意义。


不过更新这么慢,汽水和芬达都有责任。天天在面前卖萌啊吸引你注意力,那你就得陪他们玩吧?玩完以后鸡胸肉你要煮一个吧?吃饭打架了你得调解吧。。你们真的不能怪我。


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

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



文章来源:站酷   作者:Jady_剑杰

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

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


复杂系统如何设计 | 论B端产品的体系化构建

ui设计分享达人



导读


为什么B端产品总是容易“失控”?B端产品设计与C端有何差异?如何在不断复杂的系统中,权衡效率、成本、体验之间的关系? 


本文将带你从B端产品的本质出发,了解产品发展过程中容易出现的问题,并从复杂系统的角度去探讨设计体系的构建方式。



目录


一、「 困局 」容易“失控”的B端产品

A .「 关注重点的差异性 」

B .「 微小差异的不断叠加 」

C .「 产品发展进入恶性循环 」

D .「 进入效率拐点,产品失控 」


二、「 启发 」从复杂科学的角度思考设计

A.「 自然算法 」

B.「 物质的构成原理 」


三、「 探究 」什么是产品设计体系?

A.「 定义 」

B .「 组成部分 」

C .「团队能力要求 」

D .「 构建方向 」


四、「 剖析 」B端产品的生命周期

「 产品生命周期概述 」

A .「 初创期 」解决核心问题,产生价值

B .「 成长期 」能力完善,产品扩张

C .「 成熟期 」效率提升,快速增长

D .「 暮年期 」商业价值降低,发展逐渐停滞


NEXT、「 下期预告 」设计体系的构建法则




前言


随着产业互联网时代的到来,市场对B端产品的重视程度逐渐提升。然而,谈及B端产品,特别是SaaS产品,大多数设计师对此并不是特别感兴趣。一来,SaaS更注重功能层面,似乎本身对设计的要求并不高;二来,SaaS产品的最终实现效果总是不尽人意,就算设计得再好看,实现出来也难以出彩。


确实,若设计师仅仅只是关注视觉层面本身,那么B端产品确实不像C端那么吸引人。但是,若你能以整个产品构建的角度去思考B端产品设计,那么设计师能够在其中发挥的空间是巨大的。


假如把C端产品比作精致的小房子,那B端产品就是一幢巨大的高层建筑。建造小房子,你可以尽情地发挥创意,追逐潮流,大不了推倒重来。而建造大房子,则需要设计师考虑更多的维度,因为这是一个长期而复杂的工程。


建筑的外观不仅需要好看,更需要足够耐看、稳定;为了适应更多人的需求,你不仅要考虑房子的软装,还要考虑户型的合理性、通用性;而为了降低成本,你还需要考虑家具、硬装的标准化、房间的兼容性等等…


“你是否有信心建造一个宏伟的高楼大厦?” 


这是我在B端设计中,反复强调体系化思维的原因之一。想要建造一个大型建筑,没有体系化思维、没有更完善的多职能协作流程,那么这座高楼一定会在建设过程中埋下隐患。而当问题一旦出现,涉及到的沉没成本也将会非常巨大。


当然,对于C端产品来说,体系化也愈发重要了。随着互联网时代的持续发展,一些C端产品的复杂性也堪比B端。我在之前的文章中提到过一个观点:“C端B化,B端C化”。在未来的数字产品设计中,B端产品将会逐渐开始重视产品的外观与体验,因为触达的人群更年轻化、对体验要求更高了。而C端产品也会更注重体系化建设,因为产品体量越来越大,需要寻求效率与成本之间的平衡点。


产品设计体系,本质上是一套更科学的复杂性数字产品的设计方法与工作流程。因此,不管是B端产品还是C端产品,设计体系能够在提升设计品质的同时,让产品更“可控”,提升效能,降低成本。


这套设计方法论,是我在工作中不断实践与完善的一些经验与方法。希望能借此分享一些自己浅薄的经验,也探讨一下数字产品设计未来的形态。




一、「 困局 」容易“失控”的B端产品

-


作为较为复杂的数字产品,B端产品在快速发展的过程中,总是容易出现一些问题。特别是当产品体量到达一定阶段后,问题就会逐渐暴露出来,比如:


1. 产品丑、设计质量低;

2. 组件样式繁多,操作习惯不一致;

3. 新老系统差异大,不同模块体验差异大;

4. 页面结构混乱。


等等…


很多问题大家都能明显地意识到,但往往因为“不影响售卖”、“价值不高”、“新功能优先”等理由被搁置。


随着问题逐渐积累,产品的优化成本也变得越来越高,最终使整个产品已经积重难返。若只是多部分页面/组件进行优化,小修小补,虽然成本低,但成效甚微;若是进行大修大补,那么优化成本将远大于研发新功能的成本。


这种普遍的B端产品现象,被称为“产品失控”,即——团队已经对整个产品的形态失去控制力。


那么,为什么B端产品特别容易出现这种问题呢?



A .「 关注重点的差异性 


首先,产品的本质决定了其关注重点的差异性。


与C端产品不同的是,B端产品往往更看重“能力”(为企业用户解决问题),而产品的销售方式与付费模式,也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户,需要更长的研发过程,产品的体量和复杂性也相对较高。因此,除了产品解决问题的“能力”之外,产品还需要关注研发的效率及成本。


因此,在产品的发展初期,企业通常对效率最为关注,其次是成本,最后才是体验(能用就行)。绝大多数B端企业,只有在产品跑通商业逻辑,并具备一定用户与盈利预期之后,才会对产品的体验逐渐重视起来。



B .「 微小差异的不断叠加 


任何微小的差异,在无数次的叠加之后,都会被快速放大。特别是当团队的人员逐渐增多后,放大速度将会呈指数级上升。


为了配合产品的快速发展,产品往往会采用“堆量”的研发模式。增加研发效率,最简单直接的方法便是投入更多的资源。随着产品不断增加模块、功能、页面,团队人员也在不断地扩充。


但是,人类不是机器,并非简单的1+1=2。团队数量的上升虽然会带来效率的短期提升,但同样也会增加团队的管理成本。不同的产品经理、设计师、研发人员,对于产品的认知是不同的。随着团队人员的不断增加,“个体差异性”将会被不断地叠加与放大。


就像“传话筒”的游戏一样,同一个事物,不同的人理解总是不同的,经过多次的“传话”以后,往往与原本的意思已经大相径庭了。


这种情况表现在产品设计中,则会出现:当相同的组件由不同的人做时,总是会在基本样式、实现原理、交互细节等不同的维度出现差异。比如上图中的导航菜单组件,不同的模块在开发时总是会存在差异,最后差异越来越大,形成了五花八门的导航菜单形式。



C .「 产品发展进入恶性循环 


令人遗憾的是,虽然问题很明显。但是在不断的“成本考量”中,产品团队往往优先关注新功能的开发,而忽略底层问题的优化。


随着产品的快速发展,产品的优化/迭代成本将会逐渐大于研发新功能的成本。要么背负巨大的成本进行整体重构;要么降低标准,继续以这种模式不断叠加新功能。


在这种情况下,大部分B端产品往往会选择后者。于是,产品的发展将会进入一个“恶性循环”


  • 产品快速发展,功能不断叠加;

  • 各模块由不同的产品、不同的开发研发,导致各模块之间差异增加;

  • 产品丑、体验不统一,但老系统优化成本过高。综合衡量,优先进行新功能研发;

  • 所有模块标准不统一,产品迭代效率持续降低,维护成本持续增加。



D .「 进入效率拐点,产品失控 


产品的发展犹如一辆快速奔驰的巨型列车,一旦加速便难以停止。


随着问题的反复出现,以及在一次次的“利益权衡”中选择性的忽略,产品的恶性循环不断重复,而问题也逐渐叠加、沉积下来。


当这个问题已经大到我们无法回避时,我们才发现:产品的单位迭代/优化成本,已经远远大于新功能的研发成本。而新功能带来的增量,已经无法抵消现有模块的迭代成本——产品迎来了效率拐点。


就像一个庞大而复杂的机器,虽然依旧可以运行,但整体效率已经很低了,而与之对应的维修成本则非常巨大。小修小补根本无法解决问题,而大修大补则很有可能会带来更大的亏损。


最终,产品逐渐在“失控”中难以自拔,竞争力逐渐降低,但整个团队对此却无能为力,严重影响了企业的发展。


那么,在产品发展中,我们应该如何避免这种情况呢?换而言之,一个高度复杂的数字产品,我们应该如何设计,才能避免其逐步走向混乱? 




二、「 启发 」从复杂科学的角度思考设计

-


如果我们将B端产品看作是一个复杂系统,那么产品“失控”的本质即——在不断复杂化的形态中,缺乏有效的控制机制,最终导致整个系统失去控制。 


但是,在大自然面前,B端产品这种复杂程度显然不值得一提。


像大自然这样的复杂系统,是如何构成的?所有的物体都由原子所构成,为什么简单的一百多种原子,能够构成如此复杂的世界?生命又是如何在无机物的世界中诞生,并逐步进化成如此复杂的个体的?



A.「 自然算法 


道生一、一生二、二生三、三生万物...无论是老子的《道德经》,还是《深奥的简洁》、《万物皆数》、《复杂》这些现代的书籍中都阐述了这样一个观点:


任何看似复杂而又可控的系统,一定存在着精简的“算法”,通过不断的叠加从而形成复杂系统。


就像爱因斯坦说的:“宇宙最不可理解之处,就是它居然是可以被理解。”


在大自然中,有很多的花纹与图案的形状都存在相同的规律。比如上图中的羊齿草分形图案,这种图案在森林当中到处可见,我们看到很多树的形状跟叶子的形状是一致的,这就是一种分形图案。而这种分形的图案本质上是一个公式,通过不断地自我引用进行迭代,这便是分形。


科赫曲线(Koch curve)就是一种分形。其形态似雪花,又称科赫雪花(Koch snowflake)、科赫星(Koch star)、科赫岛(Koch island)或雪花曲线(Snowflake curve)。


它最早出现在瑞典数学家海里格·冯·科赫的论文中。我们将一根直线分成四段,然后向中间挤压形成等边的倒V形状;接着再将每个倒V的边进行相同的操作,不断地重复之后,我们发现:第一步是倒V型、第二步变成了大卫星,第三部变成了枫叶,第四步… 经过无数步以后,最终成了越来越复杂的“雪花”形态。


科赫曲线便是“自然算法”的一种。海岸线虽然很复杂,但是却有一个重要的特性——自相似性。从不同比例尺的地形图上,我们可以看出海岸线的形状大体相同,其曲折、复杂程度也很相似,换句话说,任意一段海岸线就像是整个海岸线按比例缩小的结果。而海岸线的构成原理就是这种科赫曲线,它是通过天然的演化,不断折叠最终形成了这种形状。


可以发现,他们都是由 基础物质 x 简单算法 x 随机变量,经过无数次叠加后,最终形成了一个复杂而多变的整体。



B.「 物质的构成原理 


宇宙中还有其他各种惊人的“巧合”。爱因斯坦的相对论揭示了宏观世界的规律性,普朗克和海森堡的量子力学揭示了微观物质世界的规律。当我们从微观世界到天文学会发现——原子核的构成方式居然与天体的构成非常相似。粒子围绕原子核的运动方式,就好像行星围绕太阳运动一样。


不管是整个宇宙,还是生命体,将其置于复杂科学的研究框架中,那些基本定律最终也会变得极其简单


在宇宙中所知最为复杂的形态,便是如同我们自身的生物。这些复杂体由已知存在于银河系中最普通的物质所构成。但是,通过氨基酸的形态,这些基本原料竟能自然地将自己组合成一个自组织系统。


混沌中隐藏的算法,使宇宙成为极有秩序的地方。而在秩序中隐藏的随机数,又使得宇宙成为极为丰富的世界。


也正是因为算法的精简,一切物质的创造才能具备复制性、延续性、进化性


那么,我们反过来思考——想要使复杂的系统简单可控,是否就需要一套简洁、有效的“算法”?通过“算法”,将基础的“物质”不断地“有序叠加”,形成一个可控的复杂体系。


因此,对于复杂的SaaS系统设计,我开始引入“设计体系”这一概念,希望能够找到未来SaaS产品设计的发展方向。只有设计体系的建立,才能保证产品可控性,才能在不断复杂系统中,保证效率、成本、体验之间的平衡。




三、「 探究 」什么是产品设计体系?

-


产品设计体系,在国内仍旧是较为陌生的词汇。什么是设计体系?


A.「 定义 


一个成熟的数字产品,需要有一个稳定、且持续迭代的形态。创造这个形态的过程,我们称之为广义上的产品设计(这里指产品的整个策划和设计过程,包含策划、交互、视觉及部分前端开发)。而负责控制和维护这个形态的这套系统,便是产品设计体系。


我们接触到的更多是设计系统(Design System),比如平台级的设计体系,Apple、Google、Microsoft等系统级的设计系统,及其设计开发套件、应用生态。公司级的设计系统,如Airbnb设计系统、IBM的Carbon设计系统、蚂蚁金服的Alipay Design等。


但是,在一个企业内部,想要Design System能够系统性地运转,还需要基于这套标准建立的团队协作机制。只有设计标准与团队协作标准完美融合,才能建立真正的设计体系。



B .「 组成部分 


如果将数字产品比作复杂的“生命体”,产品的发展比作竞争中“自我进化”,那么设计体系便是产品的DNA。它既是产品形态的控制源,又是不断自我迭代的进化源,它的作用是:


  • 控制产品外观——感知性模型(视觉风格/规范)

  • 制造基础构件——功能性模型(基础/复合组件)

  • 模块的构建规则——模式语言(产品框架规范)

  • 产品标准定义、生产方式制定——协作模型(高度协同的工作流程)


它不仅能控制产品的“生产结果”,提升产品质量;还能规范产品的“生产过程”,形成一套完整的多职能协作流程,提升产品的生产、迭代和维护效率。 


从宏观来看,设计体系像是一个“规范的复合体”,它是各职能之间规范的有效整合,产品框架、交互规范、视觉规范、前端规则,同时也是基于整合规范所创造的一套创新的工作模式。



C .「团队能力要求 


设计体系的建立,需要整个产品团队拥有一致的目标,并为之通力协作才能完成。这就需要整个团队拥有较高的平均素质与契合度


同时,体系化的建立和推动,也需要团队中有人牵头去推动。设计师作为“产品-开发”的中间环节,是非常有条件成为推动者的角色的。


当然,这就要求设计师拥有更丰富的横向能力。


一方面,设计师需要将自身的能力边界进行拓展,与上下游的职能保持密切的沟通,并解他们的诉求。只有当设计体系满足各方利益时,体系化才有推动的空间。


另一方面,对于产品侧与开发侧人员,设计团队也可以通过培训来提升他们的能力边界。比如针对产品的交互培训、针对开发人员的基础审美培训等。这样才能提升产品的下限与上限,增强产品的综合竞争力。



D .「 构建方向 


设计体系并非超脱于产品之上,而是根植于产品的成长过程中。


想要推动体系化的建立,必须充分了解产品发展的基本规律。产品处于不同的生命周期,所要解决的问题是不同的。在正确的时间做正确的事情,并对未来的形态进行规划,才能逐步让设计体系根植于产品、融合于产品。


因此,在下一章,我们首先来了解一下B端产品的生命周期。




四、「 剖析 」B端产品的生命周期

-


对于设计师来说,首先要更宏观地了解产品所处的生命阶段,才能知道设计需要解决的问题是什么,并以此有针对性制定不同的设计策略,最终帮助产品构建完善设计体系。


本章更多的是对B端产品的发展阶段做一个剖析,而不同阶段具体的实施策略,会在后面讲解。



「 产品生命周期概述  


类似于人的成长历程,一个新的B端产品从诞生到逐步扩大,通常都会经历几个不同的生命阶段。


B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。


B端产品从立项到下线,产品会处于几个典型的不同状态中,这就是产品的生命周期。通常来看,大多数产品都会经历以下几个生命周期。初创期-成长期-成熟期,直至最终进入暮年期。


而产品的商业价值,也会伴随着产品的发展而变化。在通常情况下,伴随着产品的逐渐成长,其商业价值也会随之增长,并在成熟期进入黄金的商业价值期。而当商业价值出现大幅、持续性的降低时,则基本算是进入了暮年期。


那么,不同的生命周期中,产品将会遇到哪些问题?而为了保证产品的持续发展,产品团队又需要做哪些事情呢?



A .「 初创期 」解决核心问题,产生价值


初创期,即产品已经从构思到研发,并成为了初步的产品。这个时期,产品虽然还不能覆盖完整业务,但已经能够顺利运行


从构思到创意,再到实践落地。B端产品的诞生,通常源于在行业内深耕多年的资深玩家。在不断地实践中,通过创意与实践,找到了一条能够帮助行业解决问题、提升效率的路径。


在这个时期,产品需要解决以下几个问题: 


1)用户是谁?


B端业务的本质,就是“向组织销售服务来获得盈利”。哪些企业最需要你的产品?哪一类用户的问题最需要通过这种方式得到解决的?这些都是需要在早期非常明确的。


站在普罗大众的角度去规划产品固然是好的,但成功的产品都始于一小部分早期用户;B端产品的用户通常来自某一垂直领域,首先让他们喜欢上你的产品,然后慢慢向外拓展至更大的人群当中。


想想看,最初一千名喜欢你产品的种子用户可能是哪些人?


2)产品能够解决什么问题?


我们要为用户解决什么问题?“用户的问题”可能是一个需求、一个困扰或是一个机遇。他们的需求是否真的是痛点?


这个时期,团队需要拜访大量的目标用户,通过交流获取痛点。我们必须验证这个需求的真实性,以及我们的解决方案是否具备一定的可实施性


我们可以通过更具象的UI或流程,初步展示想法,不断优化。最终形成一个可验证的初步产品Demo,并通过Demo进一步与潜在用户进行沟通。


3)这个问题是否普遍?是否具备标准化的可能?


不同企业的需求是有差异的,如何将个性化的需求抽象成共性的解决方案?如何权衡范围与成本之间的关系?我们要将不同企业的需求进行抽象,形成标准化的解决路径。


这个阶段,我们需要为种子用户创建方向聚焦的MVP。MVP必须是名副其实的最小化可行产品,要为种子用户带来端到端的精准体验。如果他们不理解产品功能,不知道如何或为什么使用,或是发现其性能低劣、bug 太多,无法达到“可行”的程度,那么你的假设就难以得到有效验证。


4)是否能够形成完整的商业闭环?


用户是否真的会为这个产品买单?换句话说,产品是否能赚钱并且养活整个团队?


B端产品在初创期,最重要的是快速验证产品与业务的亲密性,能否完成既定的商业战略。产品团队需要通过磨合业务,快速调整业务解决方案和产品架构。


不仅是产品的打磨,整个团队也要形成完整的闭环。工作流程、产品的商业运转机制也要初步跑起来。产品的售前、解决方案、产品研发、实施、客户成功,我们需要真实地完成这一套闭环的操作,并基于此做团队毛利模型的测算。 


解决问题,带来价值,并且能够将价值转化为收益,这才是产品可持续发展的关键。只有跑通完整的商业模式,拥有长期的盈利预期,产品才能顺利进入下一个阶段。



B .「 成长期 」能力完善,产品扩张


成长期,即产品形态初具完善,并具备完整商业闭环之后,处于快速成长的时期。这个时期,产品将进行快速的迭代,覆盖的业务一天比一天完整,能满足的业务需求越来越多,而产品为业务带来的价值越来越大。


与新生期的区别在于,新生期时的迭代方向还未完全明确,迭代更多的是尝试,磨合业务与产品。而在成长期时,产品的迭代方向已经是非常清晰了的


1)更多用户,更多真实需求


产品在真正投入运营之后,所遇到的情况一定与MVP时期有所区别。随着产品的不断售卖,我们将会接触到越来越多的真实用户,以及更多的真实需求。而这些用户与他们的诉求,将会成为产品发展的指引。


2)解决更多问题,业务范围扩张


经过长期的打磨,产品的形态和可用性已经初步成熟了,商业模式也已经初步跑通。随着更多的真实需求,产品将会选择有价值的方向扩张业务范围,从“解决一个问题”逐渐走向“解决一系列问题”


3)功能完善,产品体量快速增加


伴随产品的快速迭代,产品的基础功能会逐渐完善,同时也会基于核心功能去搭建更为丰富的功能矩阵。更多的能力、产品模块、页面,最终逐渐叠加为一个完整的大型产品。


4)组织逐渐完善,人员专业化


随着业务扩张,组织架构逐渐完善。为了提高专业性与效率,团队人员从“多面手”逐渐转化为专业化方向。与之对应的是,团队成员的数量也会在这个时期快速增加。售前、解决方案、产品研发、实施、客户成功,这一套完整的团队模型在各模块中不断地复制。



C .「 成熟期 」效率提升,快速增长


成熟期,即产品的形态已经稳定,并能够创造持续的商业价值。处于成熟期的产品,肯定是已经进行商业化运行的。反之,没有达到预期的商业价值的产品,不能算成熟期。


进入这个阶段时,产品已经实现了产品-市场匹配。但是,我们需要对整个产品、以及团队进行一系列的调和与优化,才能让整个产品的形态与运作方式更加合理,以便将产品推向更广阔的市场


1)产品效率、组织效能提升


经过一系列的快速发展,产品体量通常都会比较大,而团队成员也快速扩张。随着一致性成本、沟通成本增加,势必会造成研发效率、组织效能会下降。因此,如何降低产品的单位研发成本?如何让整个团队的组织效能达到最佳状态?是需要解决的问题。特别是当产品具备一定的客户数量以后,单位研发成本的降低将会极大提升产品整体的利润率


2)产品设计-研发标准化,构建完整链路


通过产品设计-研发标准化、数据架构标准化,打通不同模块的壁垒,提升模块化与灵活性。将单点之间的竞争力相互配合,形成“场域”竞争力


产品的单点也许不能保证都有最佳的竞争力,但如果我们能够提供一系列的、高质量、无缝衔接的配套服务形成闭环,将会形成强大的整体竞争优势。同时,产品设计-研发标准化,能够增加产品售卖的灵活性,通过灵活的组合方式吸引不同的用户,提升销售灵活性与成单率


3)提供高质量的用户体验


产品最终是给人用的,用户体验也会在将来逐渐成为B端产品的核心竞争力。随着竞争的加剧,以及用户群体的逐渐年轻化,用户体验将成为企业在选择产品时的重要考量因素,也是口碑传播的重要途径。


由于在“产品-市场匹配”阶段需要尽快地推出产品,所以在设计开发过程中可能遗留诸多问题,需要进一步打磨优化。产品设计需要与开发具备高度的一致性,视觉交互是否合理,前端代码是否准确合理,操作反馈是否高效等问题,都需要这个阶段来进行调和。


4)教育市场,卖给更多的人


当产品逐渐成熟并具备一定体量之后,单靠销售跑单是远远达不到发展要求。这个阶段,需要市场部人员对市场进行教育,聚焦不同的行业领域,从“点式营销”转变为“面式营销”,并配合销售人员进行产品的售卖。因此,在这个阶段,产品的品牌力、核心能力的传播将至关重要



D .「 暮年期 」商业价值降低,发展逐渐停滞


暮年期,即产品发展停滞甚至倒退,逐渐失去商业价值的产品。


B端产品进入暮年期的原因,主要有两个。一是,伴随着业务的发展,产品已经很难满足业务需求。且翻新产品的投入产出比较低。二是,伴随产品的使用时长,产品将变得臃肿和迟钝,逐渐难以敏捷地满足业务需求。


很多时候,商业环境的快速发展、技术的更新迭代都有可能成为产品进入暮年期的原因。对于暮年期的产品,根据商业战略,产品经理既有可能要延长产品的寿命,也有可能持续保障产品完成顺利换代。当然,更多暮年期的B端产品,由于业务的调整,最终迎来生命的终结。


需要注意的是,很多产品因为在成长期、发展期无法建立有效的产品控制机制,导致产品过早的进入臃肿阶段。也就是前文中所讲的“产品失控”,非常有可能加速产品暮年期的到来。


因此,是否能在前三个阶段建立健康、完善的设计体系,是产品能够获得更长生命力、更多价值的关键。

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

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



文章来源:站酷   作者:Jady_剑杰

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

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




日历

链接

个人资料

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

存档