首页

《2021年第一季度民用航空业移动端趋势分析报告》

雪涛



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


文章来源:站酷    作者:简立方SimpleUX 

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

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

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


「感知性模式设计」是什么?

雪涛

总的来说,所谓的感知性模式就是物体或者物件的一种外在的呈现而给人的感觉或者感受。例如同样的一个电脑桌上都有电脑、鼠标、或者其他的物件摆设,但根据不同人的使用给人的感觉是完全不同的,或是凌乱、或是整洁、或是简约,而更直观的差异可能来源于这些物件的样式、材料、颜色、纹理的不同而传递出来的视觉感知,

如果沿用到互联网方面的设计,那么感知性模式的例子可能包括:文字信息、版式、配色、布局、插图、图标、形状纹理、间距、交互或者动画等等,这些都作为具体方式来表达感知性设计。

说到这里,你可能会认为感知性设计是一个纯粹的外在视觉表现,但想要完全的得到一些成效,更多需要把这个事情融入到品牌的核心中,随着产品的发展而发展,进而在众多的同类此产品中脱颖而出。

感知性模式较强的产品例子

案例一:微信

微信作为一个超过十亿用户的产品,随着版本的不断迭代,功能也越来越强大,因此从产品体验上来说也可能会给人一种臃肿的感受。但微信整体的感知性模式的设计是非常清晰的,从桌面 APP 的 logo,再到内页呈现的图标、颜色、按钮样式、交互反馈等等的设计都是统一性很好的设计。

腾讯高手都在学的「感知性模式设计」是什么?

案例二:Instagram

Instagram 作为全球热度最高的图片分享社区,自始自终都有着非常明显的感知性,整体 APP 的简洁性设计让用户更加专注于内容本身,似有似无的品牌蓝色似乎已经牢牢融入了用户的大脑中,这种感知性无需被刻意放大,但就在潜移默化中用户就能感受到。

腾讯高手都在学的「感知性模式设计」是什么?

案例三:抖音

作为目前国内最热的短视频平台,抖音的感知性模式已经深入的印在用户的脑里,我认为抖音主要在以下三个方面让用户记住了 TA:1.品牌属性,抖音的品牌属性就是用最简单的方式让用户记住了 ta,通过 APP图标、闪屏、发起按钮的图形及品牌色的串联;2.内容属性,具有自己平台气质的内容特性,抖音在最早期主打的“潮酷”类的视频让它跟快手做了明确的区分;3.体验属性,大胆的全屏滑动视频交互很好的结合了手机的体验方式。

腾讯高手都在学的「感知性模式设计」是什么?

感知性模式的作用

1. 有助于品牌形象传递

在同一个领域中的产品,在功能上大多会具有一定的趋同性,而由于这几年的扁平化风格盛行,更把产品之间的类同性推向极致。因此更需要通过感知性模式的设计来进行区分,这种区分不仅仅只是视觉上的差异,更多是来自于产品者对于自己产品方向的把控。

书中提到 Spotify 的例子,Spotify 给人感觉是温暖的、私人的,虽然月活跃量已经超过一亿,但给用户的感受仍然是独特的,除了功能之外,主要在于整体的图形样式、颜色搭配(黑绿的品牌色比例把控)、交互中微妙而平静的感觉,以及排版上传递出来的感受。

从上面这个案例来说,基础体验是用户值得参与的一个重要环节,但感知性模式的设计更多是来源于产品者想要给用户传递什么样的品牌性格或品牌核心,Spotify 的静谧性及沉浸式体验,这是 Spotify 设计师想要传递出来的品牌核心

2. 感知性模式通过界面传递品牌

感性性模式的品牌传递主要是通过界面或者运营调性来让用户得到感知,并且让人记住。在界面上想要让用户记住我们的产品,更多的是需要思考三个关键点:设计的独特性;设计的辨识性;设计的区分度。

设计的独特性

设计的独特性往往是通过我们界面的排版、图标、图像、交互体验方式、交互措辞等等一系列的内容来奠定。这些内容我们常常可以在国外的软件中看到很多不错的案例。

还是以 Instagram 作为案例来说,ins 风的极简设计是一种贯彻始终的独特性存在,除了设计界面本身的研究之外,还在内容上下足了功夫。以照片浏览来说,始终坚持大图的体验方式,保证一屏内的沉浸度,而非为了效率,这与 Instagram 一直具有较高的照片质量密不可分。

腾讯高手都在学的「感知性模式设计」是什么?

设计的辨识性

辨识性的可打磨方式有很多种,以图标作为一个基础的案例来说,我们在设计图标的时候是否有结合整体产品的性格去思考并且设计,并且深入打磨。简单的区分,我们可以从风格(例如:简洁的、有趣的、硬朗的、柔软的等等),更深入的内容就是需要思考如何传递品牌感,以及将图形与品牌理念、产品性格进行结合,通过设计贯彻品牌辨识性。

以 YouTube 这个 APP 的图标作为案例,设计师在设计时更多是希望表达整体 APP 设计的简洁性,弱化图形对于内容的影响,因此在整体坚持了三个核心关键点:简约、细线、普识。

腾讯高手都在学的「感知性模式设计」是什么?

设计的区分度

在目前趋同性的主潮流之下,如何把握好产品设计的区分度变得尤为关键,也就是说,当用户在看我们产品的时候会不会乍一眼认为是另一个产品。区分度的把握往往来源于品牌对于颜色的选择,我们在定义色调之前需要对主流竞品做一个分析,从中找出属于我们的区分度,并且尽量避免重合性。

以现在流行的电商 APP 为案例,很大电商平台的设计大多类似,在品牌色的选择上则尤为重要,因此需要尽量避免具有耦合性。

腾讯高手都在学的「感知性模式设计」是什么?

让设计系统更加连贯

我们在产品设计中想要把所有的模块或者组件做得一模一样几乎是不可能的,但我们可以利用感知性模式的设计进行内容模块的渗透,让用户对于整体的感受感知是一致的。

以 material design 的设计系统为案例,他所确定的是一个规则,而并不是任何的模块或者任何的图标都是一样的、无差别的,如果都完全长得一样会让设计变得单调、无差异性,通过设计准则来限定整体的图形风格,应用在不同的位置让用户从视觉角度感知到风格的一致性,这样也可以让整体的体验更连贯。

Material design 的设计准则

富有表现力

为了突出 Material Theming 必须提供的功能,每个 Material 研究都表达了一个不同的品牌。

各种各样的

为确保 material 主题化和组件满足尽可能多的产品需求,material 研究代表了不同类型的产品。

基于现实

为了尽可能地复制真实产品,每项研究都会识别用户、显示功能用户流并应用现实世界的限制。

腾讯高手都在学的「感知性模式设计」是什么?

感知性模式的探索与思考

我们在日常设计功能性模块更多的是考虑到用户对于产品的体验感受,而感知性模块则是我们想要用户在这里获得什么品牌感知,通过品牌结合视觉设计系统给用户带来产品独特的性格及个性化氛围。

对于探索感知性设计的方法也有很多,目前比较流行的技巧主要有:情绪板、样式叠片、元素拼贴。无论是哪种方式,都没有唯一的答案,更多是利用这些方法在不断的尝试中探索到属于自我品牌的感知。

情绪板

情绪板是一种较为轻量的风格探索方法,在这个过程中往往不需要花费过多的精力,我们需要做的就是把统一或者接近类型的图片进行重新整合,得出我们想要表达的视觉感受即可。

情绪版属于比较前期的视觉品牌调性探索,在整体的颜色、排版上也都可以利用情绪板来获得初步的答案,如果想要再往深一步,可能则需要样式叠片的方式。

腾讯高手都在学的「感知性模式设计」是什么?

样式叠片

给予情绪板获得的大致品牌方向之后,便可以利用样式叠片的方式来进行更精细化的探究,我们可以用一种或多种不同的样式叠片来表达,但是希望在截取这些内容的时候要记得保持控件、组件、颜色、字体等等内容的一致性,避免差别性较大,形成不了统一的视觉系统。

腾讯高手都在学的「感知性模式设计」是什么?

元素拼贴

从书中讲到的大体概念是:将界面元素等内容拼贴在一起,从而达到设计稿初稿的雏形感受。这个方法可以比较敏捷的对需求方进行试探,但相比上面 2 种方法需要花费更多的时间及精力,同时这个方法出来的内容也比较偏向高保真。

腾讯高手都在学的「感知性模式设计」是什么?

从表面上来看,这三种方法似乎都可以帮助我们更好的进行设计,没有太大的差异化,不过从本质上来看,这三个方法影响的是我们设计初期输出的保真程度,从情绪版到样式叠片再到元素拼贴似乎是一个越来越保真的方式,我们可以选择其中一种,或者 2 种结合来进行表现。

平衡品牌性与一致性

过多的个性化设计,会削弱整体的品牌感,同样,如果设计的内容需要全部都一模一样的规范,也会扼杀设计的品牌感的创造性。因此,在感知性设计的概念下,一致性设计不是一味的复用,不求变通,而是通过整体统一的理念,允许个性化设计的存在,这样既满足部分模块的独特视觉表现又并不影响品牌传递。

举个例子

例如外面在设计一个完整的 APP 时,我们已经规范好了大体的基础视觉规范,在不影响这个规范的前提下,我们针对部分模块,例如福利类、游戏类,这种比较偏运营的设计界面,我们可以考虑有更丰富的颜色、图形等视觉表现,但前提在于是否符合基础规范的设定,如果符合那我们完全可以对这些类型进行个性化设计。

如果没有打破常规的设计方式,固化的追求一致性的设计,那么它就会变得普通、僵化,感知性设计的存在就是让我们在允许的范围内追求更不一样的设计,鼓励设计师积极探索更多的可能性,好的设计体系既能体现品牌的一致性也能表达出创造性。

由于感知性模式的相关设计,容易被当作只是样式或者主题化皮肤设计,很多人会认为这方面的设计比优化交互流程更容易些。在这种状况下,临时的业务经常会去挑战产品的品牌性和规范性,综合这 2 方面的原因,我们需要随时调整我们对于感知性模式的策略。

好数据不代表感知性设计的好坏

数据的好坏往往来自各种原因,优化设计后得到好的数据,但并不能说我们的感知性设计是好的,首先刺激数据的手段有很多,例如加重内容的表现、利用颜色对比突出想要突出的模块,这些方式都是与感知性设计背道而驰的。

基于上面这个问题,我们在日常设计中有几个基本原则是需要我们去遵守的,尽量避免为了满足短时间的产品需求而影响整体的设计感知性。

1. 不挑战基础规范原则

基础规范作为整体设计的基本标准,整体的制定肯定经过多种尝试之后的结果,如果轻易推翻的话,其中产生的设计成本是巨大的,往往需要重新输出、多方对齐、最终输出、再落地形成开放组件,在我日常的工作中也常遇到。往往是因为一个极小的模块而产生了巨大的设计成本。

2. 不改变用户的普识习惯

这里说的不是不去优化或迭代体验设计,而是我们应该尽量避免因为一个很小的内容而调整全局的体验方式。

举个例子:早前很多 APP 在设计表单选择器时都喜欢进行 UI 定制,从这个问题分析,用户在使用这种表单选择器的时候是用的系统多一点还是我们的 APP 多一点,如果是系统的多一点,我们何不直接调用系统?因为组件的 UI 改造,往往会带来一定的开发成本,但其造成的感知却并不够大,反而会让用户觉得很奇怪,为啥这些选择权在不同 APP 的不一致。

3. 一致性最大化

任何的设计都应该以一致性作为最大的前提,这样才能更加完整体现感知性模式,在各个模块、颜色、图形等等内容都具有完整的呈现,无时无刻影响着用户,让用户对于整体具有潜移默化的感知。

最后

感知性模式不是一个原则,而是一种工作方式、设计模式,除了个人的坚持之外,还需要有团队的意识才能让我们的设计更加具有品牌性,自上而下的调性、方向的确定,在团队中形成共识,这样设计语言才能形成。

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



文章来源:优设    作者:ID设计站

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

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

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


底部导航栏设计技巧

雪涛

很多受欢迎的产品中都有我们值得学习和借鉴的设计思考点,通过分析海外主流产品,带大家掌握底部导航栏(Tab Bar)的基本知识,找到解决问题的方法并开拓创意思维。

在开始之前,请大家先思考下面两个问题~

问题 1:你的产品真的需要 Tab Bar 吗?

好像并不是。虽然淘宝、微信、微博、美团等大多数主流的产品都在使用 Tab Bar,但这并不意味着所有产品都需要它。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

很多APP没有Tab Bar,比如日历、计算器、滴滴、Uber等。对于是否要在APP中使用Tab Bar,应该分不同的情况灵活考虑。

问题 2:为什么产品要有 Tab Bar?

答案是为了易于使用,意味着通过 Tab Bar 这种简单的设计可以轻松帮助用户导航到页面。

明白了上面的问题后,接下来就要考虑如何来设计 Tab Bar,能更好的满足用户的需求和体验。

1. 显示最重要的信息

导航栏应该只包含最有用的信息,不能添加过多无用的标签使导航栏混乱。许多 App 在导航栏上添加搜索功能,因为这有助于用户更快地导航和检索内容。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

在Spotify底部导航中,主页选项用于播放或收听所有内容,搜索选项用于搜索下一首歌曲和播客,音乐库选项用于播放列表中喜欢和保存的歌曲,单独的会员选项方便用户轻松点击并快速完成购买操作。

2. 扩展导航的功能

主流 App 更喜欢在底部导航栏中使用 4-5 个标签,这样能保持导航栏的整洁,还避免了标签过多导致用户难以精确点击选项的情况。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest的导航栏上只有四个选项,这有助于用户轻松点击。消息选项会实时更新消息数量,对用户来说这样的提示很直观。另外搜索功能包含在导航栏中,方便轻松地在主页和搜索结果之间来回切换。

3. 容纳多种标签形式

多数 App 底部导航栏会使用「图标+文字」的标签形式,这样能清楚地告知用户点击标签之后的结果。

有时候我们也会看到有些产品的导航栏只有图标没有文字,但这种形式并不会影响我们的操作,因为当导航栏的标签使用了用户特别熟悉的形状和内涵,完全可以省略文字。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

宜家App的导航栏使用了大众都很熟悉的图标,所以即使不加文字,我们也能清楚地知道这3个图标分别代表了主页、分类、我的。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

相对于宜家,Youtube的导航栏就显得有点复杂,因为Youtube的图标含义用户可能并不是很熟悉,加上文字说明很有必要。

4. 文字标签应该简短

文字标签应该简短而清晰,准确的文字说明能对用户使用正确导航起到关键作用。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

TikTok导航所有的文字标签都简短,并且中间的添加图标还隐藏掉了文字,以此来引吸引用户的注意力。

5. 避免隐藏导航栏

Tab Bar 通常包含了最重要的导航信息,应该始终向用户展示,避免在用户滚动页面的情况下被隐藏掉。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest导航栏的设计是个例。当滚动页面时,底部的导航栏会隐藏,这么设计的原因可能是为了防止导航栏遮挡图像,保证用户看到更多的图像内容。

6. 传达位置

Tab Bar 帮助用户轻松导航,但如果用户不知道自己的位置,将会影响他们浏览和使用产品的体验。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

多邻国App通过改变导航图标的样式来让用户清晰的知道自己所有的板块。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Headspace在底部导航栏加上了线条装饰,每次切换选项,线条都会跟着一起切换,确保告知用户确切的位置。

7. 从反馈中学习并不断改进

反馈是关键,如果想改善产品的导航栏设计,就要考虑并测试用户最喜欢哪个导航选项,不使用哪个导航,需要四个还是五个选项等等。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

Pinterest通过收集用户的使用反馈情况来不断改进导航栏的设计,帮助用户更方便地使用产品,这些不断打磨的改进真是产品成功的关键。

8. 在导航栏中显示更新

Tab Bar 不仅仅起到导航的作用,很多时候还能通过状态变化告知用户更多的信息。

从主流海外产品中,提炼了 8 个底部导航栏设计技巧

在Twitter主页导航中,当有新内容推送时,主页就会出现更新的状态,提示用户查看新内容。这样的设计在Youtube、Pinterest等很多主流产品中都有使用。



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



文章来源:优设    作者:Clip设计夹

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

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

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



「自然交互·预判」如何根据用户行为做预判设计?

雪涛

什么是「预判设计」?

预判设计(Anticipatory Design)是一种能够引导用户、缩短用户行为路径的有效设计手段。使用预判设计方法设计的交互界面,在交互和视觉上的表现总是比用户更远一步。而且这些交互表现是在用户没有作出行动触发的情况下进行的。

预判设计的本质上是一种基于数据收集所做的用户习惯研究和智能推送的设计模式。UX 设计师 Joelvan Bodegraven 曾说过:“Anticipatory Design 是围绕机器学习、预测和用户预期的综合性设计模式。”

好的预判设计可以做到以下几点:

  • 在用户初次体验某种功能时起到引导作用,避免用户产生疑问和不知所措

  • 提前判断出用户的下一步行为,利用合理手段和方法,缩短行为路径

  • 让用户感受到惊喜和关怀,对产品上瘾,产生好感和依赖感

预判设计的主体是用户行为,从用户的视角出发,建立在整个产品的交互里路程和功能框架上,对用户的行为深刻洞察后进行细节的改进。



如何预判用户的行为?

我们可以从三个维度探索用户行为预判的方法:

一.「人」的维度:

从「人」的维度来看,就是预判用户的需求和行为,方法有以下几种:

1. 预测用户所需

对用户即将做出的动作做出反馈,且适当突出反馈效果,帮助用户更轻易的看到想要的结果。

Apple 的 magic keyboard 在 iPad 上的鼠标效果,当鼠标圆点靠近功能热区时,系统预判用户需要点击按键,于是会产生自动吸附的 hover 效果。


Mac 上的鼠标效果也做的很用心,当用户在一段时间内不断的摇晃鼠标时,系统判断用户可能是需要找到鼠标,因此会放大鼠标箭头的大小,提示用户鼠标的位置。    

                                           

2. 缩短行为路径

通过预测用户下一步的行为,对用户进行直接引导,缩短用户的行为路径,减少操作步骤。

得到 App 预判用户的截图行为的下一步是分享,因此在截图后,可以点击「分享」直接分享到其他平台。


微信会在用户截图之后打开微信对话窗口点击「+」时,显示用户刚刚保存的、可能要发送的图片。


微信朋友圈会在用户再次打开时提示用户直接「跳到还没看的位置」,帮助用户快速定位之前离开的位置。


3. 分析历史数据

通过对用户的历史行为数据进行分析,对产品的功能和内容进行优化,符合用户的个性化需求,创造优质体验。


淘宝等电商平台会跟据用户之前浏览过的商品进行推荐,大众点评也会根据用户的饮食喜好进行美食推荐。


Google 翻译里,用户在第二次点击发音按钮时,读音播放的速度会明显比第一次缓慢,因为系统预判用户可能在第一次播放时没有听清,所以才需要播放第二次。



二.「时间」的维度:

从「时间」的维度来看,是指在特定时间对用户的行为进行预判和推荐,方法有以下几种:

1. 对有固定完结日期的功能/信息的提醒

对快要过期/马上到来/必须被使用的功能、信息做及时的提醒,避免用户忘记/逾期/迟到等。

外卖平台会在中饭晚饭前后给出红包/优惠推送、生鲜电商平台会在优惠劵快要过期时给出提醒,行程类产品会在飞机/火车快出发时给出行程通知。

2. 在特定的时间做功能的临时优化

在特殊的时间给用户适当的提醒(包括隐私提醒、天气提醒等),借助节日、活动等时机部分开放功能的限制,让用户觉得自己时刻被关注、被惦记,拉近与用户之间的关系。

美团外卖针对用户所在区域,提前推送天气变化,提醒用户提前下单,以免天气影响用餐时间。


七夕节到来,微信将原本最高 200 元的红包金额调整到了 520 元,是一个惊喜又有人文关怀的产品细节。



三.「空间」的维度:

从「空间」的维度来看,是指在特定空间或者当地点切换时,对用户的行为进行预判,与用户产生合情合理的交互:

大众点评会在用户切换城市时给用户恰当的提示。

使用支付宝刷地铁站出站的概念页面设计,清晰的展示了出站口的地点信息。



预判用户行为的设计原则:

预判设计(Anticipatory Design)的主体是用户行为,从用户的视角出发,建立在整个产品的交互里路程和功能框架上,对用户的行为深刻洞察后进行细节的改进。其设计原则有:

1. 化繁为简,缩短路径

从用户使用的流程出发,减少用户不必要的成本消耗,优化和缩短交互的路径。

2. 结合场景,分析原因

思考用户行为背后的逻辑和原因,做产品功能上的优化和调整。

3. 行之有度,点到即可

做体验设计改进时不能急功近利或显得过于生硬,要注意力度和用户心智的平衡关系。

4. 个性推荐,千人千面

预判设计应该使用户在界面的操作过程中感觉到自然,所以大部分预判设计是根据用户喜好量身定制的个性化设计。


最后,记住:用户在实际使用中不应该真正“看到”预判设计,但应该能够感觉到它的存在,并为之感到愉悦。

文章来源:站酷 作者:Ant_Design 

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

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

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

B端产品如何做好数据可视化?

雪涛

我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。

  • 背景
  • 什么是数据可视化
  • 数据可视化的应用价值
  • 如何做好数据可视化设计
  • 数据可视化发展趋势
  • 结语

背景

“得益于计算机技术和海量数据库的发展,个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣, 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts

“大数据的影响,就像四个世纪前人类发明的显微镜一样……而大数据,将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson

从数据,到海量数据,再到大数据,对人类的做事和思维方式都有很大的影响。在《大数据时代:生活、工作与思维的大变革》一书中,作者归纳了大数据的三个特点:

  • 更多:不是随机样本,而是所有的数据;
  • 更杂:不是精确性,而是混杂性;
  • 更好:不是因果关系,而是相关关系。 [1]

当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解,通过图表将杂乱的数据进行科学有序的呈现,使用户找到数据的变化规律以及潜在价值,帮助用户作出决策。就数据可视化的应用来看,应用范围极其广泛,如政府应用、商业决策、公共服务等等。

什么是数据可视化

顾名思义,数据可视化就是将数据转换成图或表等形式,以一种更直观的方式呈现数据。通过可视化的方式,我们可以将大量复杂的数据通过图形化的手段进行有效地表达,帮助用户发现规律和特征,发掘数据背后的价值。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 1 @Marco Zemolin Siresia Bagnoli

数据可视化的应用价值

1. 易于理解,有利于发现信息特征

使用可视化的方式来表达复杂的数据,可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式,我们可以以清晰和连贯的方式解释大量的数据,从而让我们理解数据,得出结论。

案例:流媒体平台节目数量的变化

以下图为例,当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时,以表格方式呈现效果如下图:

B端产品如何做好数据可视化?收下这篇7000+的干货!

未经可视化设计的表格数据图

如果通过可视化设计处理后效果如下图:

B端产品如何做好数据可视化?收下这篇7000+的干货!

经可视化设计后的数据图

在这个案例中,我们可以看到,通过文字信息表达的方式,所有的数据在文字信息的表达中都只是零散的个体,我们很难在短时间内对列举数据有一个大致的了解,更不用说发现特征得到结论了;而在可视化表达中则不同,所有的元数据通过图表形成一个整体,数字信息被转化为视觉信息,通过可视化图表,通过观察点的位置和颜色即可感知到数据的差异,原本需要通过计算数字大小完成的对比,变成了肉眼可见的点的颜色与间距对比,我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。

2. 将数据转化为更具吸引力的故事

据研究发现:人脑处理图片信息的速度显著快于处理文字信息,例如一篇 300 字的小故事,看一遍需要数十秒,而转化成图片后则只需要一眼即可记在脑海里。

这表明,在信息的类型中,人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事,帮助用户快速接收、处理信息,激发用户联想并产生情感共鸣。

案例一:新冠病毒如何通过空气传播

随着新冠疫情在全球各个地区的蔓延,如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 2 @Mariano & Javier

案例二:在叙利亚,谁和谁战斗?

许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候,这些团体之间有的结盟,有的敌对,这让人难以理解。但是,Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩,将这些数据简化为一种简单的、易于理解和可互动的形式,让人们可以轻松了解这些团体之间的关系和故事

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 3 @Joshua Keating and Chris Kirk

3. 帮助人们作出决策,加快决策过程

现实生活中大部分的人是视觉学习者,他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此,相比起阅读和理解文本,大部分人更容易通过图表或其他可视化形式来理解数据,合理的数据可视化设计可以提高他们作出决策的速度。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 4 @Bea Vaquero

如何做好 B 端数据可视化设计

1. 明确客户需求

设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通,确定他们的业务诉求,也可以理解为确定客户的初衷与目的,从企业客户对数据可视化的需求看来,通常会有两种类型:

  • 侧重于汇报展示,主要用途是为了对外宣传、对内展示等,对于这类需求,设计时可强化视觉效果的呈现,对数据进行场景化设计,尝试让数据以一种新的载体,有趣的互动等形式结合展现。
  • 侧重于数据分析和协助决策,对于这类需求,一定要清晰了解需求方的业务内容和重点指标,重点关注数据的维度、种类、数量等信息,视效设计上应该优先满足业务诉求。

明确客户诉求,通过设计手段帮助客户达成目标,这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要,我们才能快速推导产品结构、关键数据、视效风格等信息。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 5 @Daria

2. 确定关键指标与优先级

关键指标是对一组或者一系列数据的统称。一般情况下,一个指标在屏幕上独占一块区域,所以通过关键指标定义,我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。

那么关键指标的选取依据是什么呢?我个人认为主要还是依据客户诉求,数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是,哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望,选择出一系列关键指标。

对于这些选取出来的关键指标,我们需要对其进行优先级的排列,一般来说,主要指标能够呈现业务的主要逻辑,一般放在显眼位置,用重点元素标识;次要指标围绕主要信息进一步阐述;辅助指标是对主要信息的补充,一般放在非核心区域,或者二级结构中。

通过合理优化关键指标并进行优先级排列,能够保证数据可视化的核心设计的重点,避免数据空洞散乱。

3. 合理使用数据图表

在选择图表展示相关数据指标时我们要思考各个指标的主要呈现,更进一步的讲,是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发,选择合适的可视化方式来呈现数据。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 6 翻译自@Stephen Few

4. 合理进行页面布局

数据可视化页面布局的设计是相对灵活的,为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置,横向布局最为常见(人眼的水平运动比垂直运动快,会先注意水平方向的事物),核心数据场景划分在中心位置,占较大面积;其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

B端产品如何做好数据可视化?收下这篇7000+的干货!

@布局设计案例

5. 制定设计方向

在定义设计风格的阶段,从项目背景出发,综合行业类型、产品定位、品牌传播等因素,提取关键信息,构建设计框架。

数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主,是因为相比于浅色基调,深色背景设计能够有效缓解视觉疲劳,其次深色设计能够更好地营造对比差异以及数据层级,再者深色设计更容易呈现丰富的动态效果,营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性,例如党政机关类项目会慎重考虑用色,应当确保设计严肃,庄重。

数据可视化的设计除了对数据进行合理设计,还需要注重场景感的塑造,例如,我们通过场景化设计可以让某大数据平台成为大型“图书馆”,查看数据的过程就跟图书馆看书一致,场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据,当然合理的构建动态数据效果能够让数据具备“生命力”。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 7 @Gan Gryc

6. 设计对比

除了尺寸和位置,我们还可以通过配色来突出数据。

无论是通过颜色或形状对比设计,容易产生强烈的视觉冲击力。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 8 @Bureau Oberhaeuser

利用明度的对比,我们可以用深色烘托鲜明的色彩,或者用鲜明的色彩衬托某一块暗沉的色彩,亮色靠附近的暗色衬托显得更加鲜明,其色彩特征表现得更加充分;

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 9 @Zoey Shen

正确的对数据进行配色,让数据传递出的信息更清楚、更明白,例如国内 A 股,红色代表涨,绿色代表跌(美股绿涨红跌)如果给国内的股票、金融等相关客户做数据可视化设计时,需要避免不同地区文化所产生的差异。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 10 @Dima Groshev

7. 选择 2D or 3D?

随着数字孪生概念的火热,越来越多的企业热衷于打造自己的 3D 数据可视化产品,那么 3D 可视化就一定比 2D 强吗?

数据可视化设计本身就是为了高效传达数据信息而服务的,相比平面呈现,3D 最大的优势在于多了空间维度,适合那些需要跟空间结合的数据呈现,例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗,显然不是绝对的;需要根据实际业务需求出发。

通常我们所说的数据 3D 可视化,就是把大量复杂抽象的数据信息,通过 3D 模型以视觉方式呈现出来,帮助人们理解和分析数据。相比于数据 2d 可视化,数据 3d 可视化具有以下的优势:

  • 展示空间相关的数据,因为空间数据具有三个维度,如果想要将其以视觉方式直观呈现出来,就必须要借助 3d 模型。例如显示一栋大楼不同楼层的人员分布情况,此时只有 3D 数据可视化能够帮助我们达到目标;
  • 视觉冲击力更强,相比于 3D 可视化从视觉上表现力更强;
  • 场景/对象仿真,在一些需要高度仿真的项目,例如与军事、地理勘测相关的项目中,数据 3D 可视化就不可或缺了,无论宏观态势还是细微结构的精密运行,数据 3d 可视化都可以将相关信息清晰呈现给使用者,将真实的环境、对象搬到屏幕上,降低使用者的认知成本。

在一个实际的数据可视化产品项目中,有必要应用 3D 数据可视化的情形;

  • 需要展示多维空间数据
  • 需要通过对场景/对象进行仿真,减少使用者的认知成本和学习成本
  • 需要依靠 3D 效果来提升视觉冲击力

相比 2D,3D 的设计与开发成本相对较高;其次 3D 场景会容易产生视角遮挡以及操作成本等问题,那么从实际项目出发合理选择才是最重要的。

B端产品如何做好数据可视化?收下这篇7000+的干货!

亚信数字楼宇@PRD MO UED

8. 设计还原

设计稿完成了并不代表设计师在这个项目中的工作就结束了,在后续的开发工作中,设计师还要与开发人员合作,减少上线产品与设计稿的差异。

这个阶段的工作也并非听上去那么容易,尤其是 3D 可视化设计,我们会使用相关 3D 工具制作设计效果,但 3D 设计工具与最终开发引擎存在着色、渲染等差异;在这个时候我们需要灵活运用开发引擎特性,提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识,帮助设计效果实现同时也提升对接效率。

B端产品如何做好数据可视化?收下这篇7000+的干货!

亚信数字楼宇@PRD MO UED

9. 调优与测试

测试客户终端上线是否正常,有无适配所造成的兼容性问题;排查有无视效及体验问题,同时也要考虑极端场景下所产生的问题及应对方案。

对于大型 3D 可视化场景会存在性能卡顿,加载缓慢等问题,在保证视效基础上尽可能压缩相关美术资源,减少不必要的效果计算和内存占用量,根据实时效果需要不断优化性能提升产品体验度。

数据可视化发展趋势

趋势一:数据可视化 ╳ AI人工智能

随着企业发展数据量日益庞大,通过人脑分析复杂数据变得越来越困难,我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据,为企业节省了宝贵的时间和资源,目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。

B端产品如何做好数据可视化?收下这篇7000+的干货!

IBM 数据可视化专家 Mauro Martino 创建的仪表板,允许用户可视化新闻中出现的主题

趋势二:数据可视化 ╳ XR

AR 和 VR 技术的应用可以增强数据在空间上的感知,从而帮助人们更好地使用数据。通过结合 VR、AR 技术,用户能够更好,更快地理解、分析数据。最近进行的许多研究表明,VR 和 AR 具有较强的感官体验,可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析,并更快速地找到解决方案。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 11 LM9000@5puj47980xk

趋势三:数据可视化 ╳ 实时数据

在数字时代,事物变化很快,企业需要对数据告诉他们的信息做出快速反应——正因为如此,实时可视化数据比以往任何时候都更重要。

在 COVID-19 大流行期间,企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。

实时数据可视化可以采取一些简单的形式,如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。

B端产品如何做好数据可视化?收下这篇7000+的干货!

图 13 @Esri & The Science of Where Podcast

趋势四:数据可视化 ╳ 全面体验设计

用户体验为核心的数据可视化设计是一种重要趋势,将用户放在第一位,然后是数据。无论处在哪个行业,设计师都应该遵循类似的思考过程,从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题,以及他们面临哪些可能的困难?他们需要什么信息和功能来解决这些问题?我们如何以最佳方式为他们打造数据可视化?

最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并,帮助用户进一步钻研数据并发现模式、趋势和相关性。

结语

数据可视化是一门同时结合了科学和艺术的复杂学科,其核心意义在于清晰的叙述和艺术化的呈现,这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ,只有最终达到帮助用户理解数据和做出决策的目标,才能发挥它巨大的价值和无限的潜力。

文章来源:优设 作者:AsiaInfo Design

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

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

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


设计师如何做好项目管理?

雪涛

本来这样的形式已经司空见惯,足以应付。但写这个文章的契机,是因为去年接了一个令人头秃的项目,这是一个平台项目,在这个平台上有 30 多个APP,核心干系人包括运营/APP产品经理/平台开团队/PO/APP的开发团队 ,位置不同,利益点也不一样,并且这里每个团队核心干系人都不是一个人,而是 2-3 个人,对接人有层层回汇报关系。抛开项目本身业务是专业领域的内容学习成本高不说,就干系人管理这一项就颇为棘手。


在这个项目中我遇到了哪些问题:

  1. 干系人繁多,有三股神秘力量

  2. 业务复杂,专业性极强,访谈过程全是专业术语

  3. PO 不是核心决策人

  4. 项目中后期,出现新的干系人

  5. 团队成员能力需要培养

  6. 时间紧张。客户预算有限,就我们自己预估的时间直接砍半


综上,这个项目着实做掉了不少头发,这样的项目要怎么做呢?希望大家在遇到这样的项目的时候也少走一些弯路。聊到这里,就要聊一下项目管理是什么了,我们从头来梳理以下,查漏补缺。也是对自己的一次复盘


项目管理是什么?

·项目管理是有效资源整合,高效实现目标的一整套管理理念

·在复杂多变的环境中,如何做好一件事情

按照时间轴罗列,项目管理分为:启动 规划 执行 监控 收尾

那我套用到设计的项目管理,大致会分为以下几个阶段:




      项目开始,在正式进入客户场地以前,就是项目启动阶段,该阶段需要了解:


项目启动

项目:

  • 项目的整体背景

  • 挑战

  • 目标

  • 项目范围

  • 时间周期

  • 客户关注方向


干系人:

  • 客户组织框架

  • 核心关系人数量,汇报关系

  • 是否有第三方人员对接

  • 是否有合作的同类型角色


现状:

  • 该项目是否存在上下游系统,是否有依赖

  • 现有系统状态(是否有现存系统,没有是如何完成工作过的)


里程碑规划:

  • 基于以上所了解到的信息,对项目全局时间计划有整体性安排,明确项目被划分为哪些阶段

  • 阶段性产出和汇报时间节点梳理

    (需要拉入客户进来讨论的时间节点需要提前规划,需要邀请用户研究的时间段需要提前规划)

  • 规划里程碑时,一定要考虑部分风险和可变化因素 ,比如需求变更,干系人多,沟通成本增多,汇报层级链路长 ,需要等待领导决策,或者部分业务内容可能涉及第三方的一些依赖,合理增加里程碑的总体规划时间 ,后期可以优化和调整规划内容,在一定规划时间内,部分阶段可以适当延长,其他的相应缩短,给项目一些buffer,减少项目延期的风险。


成员安排:

  • 对安排上来的小伙伴需要有一定的了解,了解人员的能力方向。安排能匹配或是跳一跳能摸得着的难度系数任务

  • 如果上项目的小伙伴经验比较少,需要建立团队培养机制

  • 保证项目成员安排的连续性,最好不要出现中间停一段时间,后面在续上,或者每天只安排0.2天

  • 在安排时间计划上,需要注意哪些工作是无法通过加人来完成的


资源规划:

资源包括:人/物/场地

人:外部专家支持/其他部门支持(除内部项目人员外)

物:workshop要用到的所有工具,包括白纸,笔,便利贴,蓝胶,马克笔,故事卡等等

场地:日常办公场地/会议场地



风险识别:

  • 根据现有状况,预测部分可能风险

  • 将想到的可能风险一一列举出来,并给出相关应对措施,这个如果无法独立完成,可以和甲方一起协商完成。

      当风险点都已经列举完成,为了避免风险,大家需要提前达成一致的东西,提起和大家同步信息,如定义项目上的规则,保证会议不延期,要提前一周安排会议时间,保证信息同步,每天or每周制定同步会议。当需求变更,或者需求膨胀的情况下,可以参考的优先级排序,根据某项原则,完成优先级排序,将非必须的需求先划分出去,保证需求在一定合理的范围内。

枚举风险有两个好处:

  1. 预判一些可能的风险,提前做好准备工作

  2. 拉着客户与团队一起定义规则,不要随意破坏



可以用这样的表格管理风险,也可以直接在后面加上这个对应项的相关责任人,有什么问题,我们可以方便 跟踪


举例子:

风险点:比如会议干系人核心无法到场,造成会议延期,那么遇到这种情况怎么办呢?

应对措施:提前和核心干系人确定时间,双方协商会议时间,提前一周规划时间安排,合理调整时间


风险点:疫情期间,出差隔离时间不可控

应对措施:Plan A 出差前提前了解当地相关政策,提前到达办公地区。Plan B:部署远程工作环境,建立信息共享机制,建立定期会议时间,同步信息,如果不能按时到达现场,可以启用的Plan B


粗颗粒度任务拆分:

还是基于里程碑规划的图示举例,在途中表示出来每一个阶段的阶段性活动是什么,产出物是什么,对齐产出物的颗粒度以及内容


项目规划

愿景对齐:

  • 让所有的核心干系人参与该活动,避免大家后面信息没有对齐,目标没有对齐,产出结果无法达成一致。

    高能预警:此处有深坑:注意避坑。

    我参与的这个项目,如开头所说有三股神秘的力量(在开始阶段PO 都没有介绍是三股力量,而是2边,他们的关系有点复杂),但是由于地域影响,和各个力量之间存难以琢磨的关系,他们并没有同时出现在愿景对齐工作坊中,来参加工作坊的只有一波人。愿景工作坊顺利完成,项目目标,干系人关系,在这里才得以澄清。

    虽然后面抄送了全员,并单独去找了另外一边的老大沟通目标,才发现他的目标和其他人的都不一样,甚至应该不属于这个项目范畴。

此事件复盘:

  1. 核心决策人必须参加

  2. 如果核心决策人没有发表意见,请主动请他来表达观点

  3. 如果实在无法到场,和他1Vs1的邮件会议纪要也要抄送全员。

  4. 如果发现多方意见无法统一,请不要继续项目,把他们拉在一起,对齐愿景再出发


      以下附上愿景对齐的工具——电梯演讲

在项目开始阶段,我们都会进行愿景工作坊,拉上所有的核心干系人一起,通过贴便利贴的方式,将大家的理解收集起来,并对所有的便利贴进行分类,最终收敛出最为核心的电梯演讲

电梯演讲海报的相关原则:

  1. 精炼,简介——这个愿景海报将伴随整个项目,越简单越容易被人回忆起来

  2. 对于用户需求这一项,大家一定会写很多很多,但是在项目初期,大家写出来的需求很多是作为客户方,理解用户想要的东西,是不是真实需求,还需要进一步被细化,所以这里对整体需求做较大颗粒度的归纳即可,不要深入细节

  3. 电梯演讲可以出几张?部分小伙伴可能会问我的目标用户差异很大,出两张,三张可以吗,可以!可以将上半部分分开,比如目标用户 For 哪几类人群,他们的需求差异也可以规组,但是下半部分,产品名称,产品形态,帮助企业获得的价值,以及竞品和卖点,可以是一致的,都可以在一张海报上所呈现


干系人识别:

  • 我们大致梳理了公司的管理层级。现在要把他们匹配到相当的关注层级之中

  • 识别哪些干系人是重点关注的,那些是一般关注即可


     高能预警:此处有深坑:注意避坑。一般来说项目的干系人优先级都比较稳定,不会发生改变,但是在去年的那个项目里面完全不同了,在项目的第一阶段干系人A非常的重视,干系人B基本没有太多的意见,但是到了项目的第二个阶段,画风发生了反转,干系人A参与的越来越少,相反干系人B有更多的见解和想法。对于不同的干系人,他们想要的成功是不一样的。需要明确不同阶段核心干系人的差异,汇报给不同人有不同侧重点。

所以在干系人梳理这块,还需要注意的点是:

  1. 如果workshop 这种形式的大会很难让干系人透露心声,可以通过通过 1vs1 的沟通了解他们的真实需求,问他们的KPI是什么,是非常直接询问他们最关系问题的方式。这对于复杂干系人的项目尤为重要。

  2. 也可以在workshop上新增期望对齐的环节,在下一个part会讲到。


以下附上愿景对齐的工具——干系人/团体地图


      下面两种干系人/团队地图的差异不大,可以根据需要任选其一即可,图一更多可以梳理出干系人,或者团体之间的关系,除了判定干系人的权重,还可以在途中不中干系人之间汇报的关系,以及他们之间使用的不同系统的关系


     下图也是对干系人的权重和优先级的排序,与上图不同的地方在于它更清楚的展示了我们如何去区分这些干系人的维度,维度可以根据项目需求哦进行变化。



期望对齐:

  • 从各个维度对齐干系人对项目的期待

  • 帮助干系人对各个维度有一些认知

      这个有两种做法,如果是干系人相对简单的项目,可以在电梯演讲的海报哪里,加上一类表示这个项目期望达到的目标,可以是定型的,如果团队中有很好的数据监控埋点,这个指标也可以是定量的。如果干系人繁多,大家对想要达成的期望不是非常明确的时候,可以加上这个环节,这样也能方便我们了解我们在项目过程中应该如何侧重,因为现场的时间非常有限,我们不对所有的期望一一判断是否合理。会在会后对一些超出范围的期望和项目负责人达成一致。事先,可以列举以下几个维度,帮助大家思考:功能,项目本身,技术,体验和成效,维度可以随项目目标的不同自由变更,如果大家还有新的维度,也可以在现场添加


以下附上对齐期望的工具——期望看板



权重识别:

       这个是千万不要省略的一个对齐项目,后面有诸多事宜,我们需要跟俊权重的识别来判断。比如在需求膨胀的时候,我们用什么方式判断那个需求的优先级更高,应该把哪些需求摘出去。或者在做一些决策的时候,用来判断,那些事我们应该优先处理,而另一些我们可能需要有一些妥协。后面在说到项目执行过程各种突入起来的变故的时候,这个参考项是必不可少的。在文章后面会更为详细的列举。

  • 辅助决策

  • 判断优先级



以下附上权重识别的工具——权衡滑块



详细日程排期:

  • 细化工作安排

  • 提前约定相关干系人时间

  • 提前预约用户验证时间

  • 注意那些是客户需要参与的时间点,无比准确



以下附上详细日程排模版,这个相对来说没有特定的方式,可以做到 Excel 表格中管理。也可以放到 日历 中管理,当然如果你们有设计排期的服务软件,都可以使用,我这里只呈其示意样式


下一步我们就是正式开始进入项目拉

项目执行

任务优化调整:

      进一步的细化工作安排,如果发现团队的小伙伴是新手,无法上手,就需要对任务进行拆分,拆分到什么颗粒度呢,拆分到团队的小伙伴可以上手的颗粒度,当然拉,千万不要全部包办代替的把它做完。在项目允许的范围内,让风险发生!这是团队人才梯队建立的关键时刻,说到这里,如何培养团队设计能力,又是一篇长篇大论了,我们回归正题。如过小伙伴就有很多经验,那就更可以安心的把整快大的蛋糕分给他,把他划分为责任人,下面的工作内容如何拆解,应该分几步来做,请放手。只用在关键节点和把控质量就好。

  • 明确产出目标

  • 明确产出内容

  • 明确产出目的 

  • 明确产出物依赖


拆分责任人:

      这块和上诉的任务优化调整是联系在一起的,当我们合理拆分任务后,当然要他这个任务匹配到相关的责任人,如任务优化调整所诉,可以是比较大的一大块任务,比如信息架构这一个大块,用户调研这个大块,制定相关人作为Owner ,至于他如何来拆解自任务,还需要请到那些人进行协作,由Owner 来全权负责,Owner 是需要对结果负责的人 。如果是新人,拆分成一个大块是无法下手的,并不知道我每一步应改怎么做,那就把大蛋糕切细,切到他可以尝试下咽的颗粒度即可。

      在项目活动中,对于2个设计师以上的团队,我们就可以利用设计看板。长期做敏捷交付的小伙伴对这个工具一定不会陌生。


  • 对于有经验的人,按照大块拆分

  • 对于新人,在按大块拆分以后,需要对分支任务或是阶段任务在进行下一步拆解


以下附上日常设计工作管理工具——设计看板

还是那句话,有设计进度跟踪的工具的小伙伴请绕道哦,这个是非常简单的且直白的一种设计管理模型,这样就可以每日跟踪大家的手上的工作进度了,也可以跟中哪些任务已经完成拉。上面的标题栏“待设计”“设计中”“已完成”也可以根据项目的不同阶段,放置不同的标题,当我们设计完成后,就可以领取新的设计任务拉。



每天这样移动卡片会不会乱呢,怎么和大家同步信息呢?那我们就要说到设计工作中一个关键活动了?

站会/业务对齐会


组内同步:

每日站会对项目来说是比不可少的,一般会定在每日早上,项目全体小伙伴都要参加,上班的第一件事就是开站会拉,多么有仪式感的一天,站会通常会占用10-15mins,站会可以用来:

  • 同步信息包括,昨天,今天的工作内容

  • 提出风险,有困难就喊出来,找大家一起需求帮助

    这样大家就非常明确每个人都在做什么,我的工作有什么依赖,我应该找谁解决获取上下文,另外就是及时暴露风险。及时寻求帮助


另一项活动是我特别喜欢在团队中使用的:业务对齐会

当项目比较大,每个设计师或者业务分析师分为了多个条线跟踪业设计和业务。那业务对齐会也是比不可少的,当然业务对齐会不仅仅可以对齐业务输入,当需要开发判定方案是否可行,或者需要其他的角色一起讨论问题时,我们都会放到放到每日或者隔天的或者隔周的业务对齐会上一起讨论,会议频次根据项目实际情况自行安排,邀请成员通常是设计师和业务分析师一起,又是也会邀请其他角色,视会议需要讨论问题而定

  • 方便参与不同业务条线的同学对业务全景保持一致

  • 不对角色的思维方式存在差异,可以转换视角看待问题

  • 可以相互评审设计稿,业务分析流程等活动,查漏补缺


  它的优势是:

  1. 保证出方案时间的完整。不会随意打断大家输入和思考的时间,固定时间同步信息

  2. 高效同步信息。不会一次同步太多信息,信息量太大,趋于饱和,会少量多次,最长不要超过1h,如果超过就要增加会议频次来减少时长。



干系人沟通:

终于写到干系人沟通了,这真正是一个大坑

干系人沟通有几个关键点:

  • 建立信任 — 一切良好沟通的基础

  • 频繁沟通 — 减少风险

  • 及时提出自己的见解 — 体现你的价值


建立信任—特别是在项目开始的时候,这一点是致命的,如果开始时能建立良好的信任关系,那么在后期很多小问题的决策上,还有客户对你方案的认可上都会容易的多。


如何在项目开始的时候建立信任呢?

  • 对客户现有产品业务能快速的理解——C端的可绕过(相对比较简单,容易理解)。这里特指B端产品,部分B端产品的业务有时专业性极强,特别是之前我们做的这个项目,做用户访谈时,每一句话都能用多个专业术语,你还没有弄清楚这是怎么回事,就要跟上下一个话题了。对于我们这种非本专业的设计师来说,要想做好设计,提升用户体验,开始就要建立对产品业务的了解。


      -自主学习,通过各种渠道找学习课件,提前对该领域专业术语作出梳理;对相关的背景知识有所了解,对领域现状有所认知,包括现存的竞品也可以找来看看,借鉴学习。


      -找领域专家寻求帮助,对于是在无法获取经验的领域,也找不到相关的一些信息渠道,可以涉及到一些行业机密,可以酌情寻找第三方领域专家,和领域专家进行访谈,从他们哪里可以拿到很多一手资料。当我们对项目有一些假设时,也可以找领域专家验证假设的可行性


     -向访谈对象学习,可以判断访谈对象的性格特质,如果很明显的流露出善于表达,喜欢和你倾诉更多的信息,那么可以把握好机会,适当的询问一些领域问题


     -向客户学习,PO也许不负责具体的业务条线,也可能多年不再碰具体的业务操作,但是他们对于理论的掌握还是有一定的借鉴作用的。

       

       当然了,现在收集到了这么多信息,还需要整理和消化,并且验证信息的可靠心是否是正确。

       多渠道信息交叉验证

       信息之间能否相互关联,相互串联,形成闭环


  • 专业技能维度——专业能力维度是设计师的立足之本了,毋庸多说,但这里需要强调几点


    -设计逻辑清晰,设计结果很重要,但设计思路同样重要,很多设计师在展示自己的方案的时候,只呈现做了什么,结果如何,很好,很精良,但是一定要有逻辑连贯的思考过程,才能体现你的思维逻辑,我们的方案不是凭空捏造的,不是一拍脑袋想出来的,我们的设计是经经过了哪些步骤,这个步骤的作用是什么,设计结论是如何推倒的,这样的设计包含了哪些设计原理 ,好处是什么。牺牲了什么,如何权衡它的牺牲的。

       

    设计从战略层倒表现层,越是取近于表现层,其评判标准就越主观,众口难调,特别是面向非设计领域的专业人员来说,这个评判标准在我们手上,我们要给出来我们这样做的理由是什么,好处是什么,才能得到客户的信任。


频繁沟通 不要闷头设计哦,在项目的每个阶段都要定义定期展示案例的时间点,除了这些时间点外,还可以约

这里从问题的角度来会切入吧

  • 需求变更,反复无常

  • 半路杀出程咬金 — 干系人变更

  • 增加项目范围

  • 老大不满意

  • 干系人意见冲突

  • 干系人不认之前做的决策



》需求变更,反复无常

一般情况下,按照正常的项目流程来走,我们我们通过痛点发散出来的机会点一步步的收敛出需要继续设计的方案后 ,用户侧的需求优先级是已经被考虑进去的,所以突然变更的需求大多可能是来自也无方,或者超级VVVIP 用户

判断是什么类型的需求?

合理需求:可以对需求进行规划,判断项目需求的优先级,如果合理且紧急,可以和相关干系人对齐,给予初步方案计划,对部分现有需求做出置换(如果干系人经常变更需求,可以对设计方案作出估点,按照人/天置换需求),如果合理不紧急,拿出我们的权衡滑块, 明确需要 foucs 在当前项目优先级下,不要过于发散,可以定制相关产品演进路线通过迭代演进方式逐步实施


不合理需求:可以委婉拒绝,如果实在无法拒绝,可以花费一些小effort,告知他为什么不合理



半路杀出程咬金—干系人变更

  1. 可以在识别核心干系人的时候,询问清楚在项目进行过程中是否有核心干系人的变更,提前识别

  2. 有时干系人的变更是突然的,无法提前识别,不要慌,继续往下做。一般干系人变更可能会带来以下问题:

  • 要推翻之前的方向——相当于要从新立项,如果方向都被否定了,就不要继续往下做,及时止损,重新规划项目方向。

  • 要新增项目范围——新增的范围非常大,大到可以重新规划一个新的项目,就在规划新的项目;如果新的范围可控,还是根据本项目的权衡滑块来判断,哪些是优先级高的范围,先做,不高的置换出来。


》老大不满意

   1.减少老大不满意的风险,就是多建立沟通,最好可以亲自向上层级汇报。

   2.保证方案的逻辑性,所有的设计思路都是有据可依。

   3.保证方案给用户给企业带来的价值。对于比较成熟的项目,最好价值是可以被量化,可衡量的,如果无法用数据横向衡量,可以用定性的方式来判断价值,比如在用户验证的时候,检测新的方案是否能满足客户的需求,用户对新的方案是如何评价的,在无数“证据”下,老大也不会无缘无故的不满意


干系人意见冲突

  1. 不要做干系人之间的传话筒

  2. 拉着意见不一致的干系人一起讨论问题



》干系人不认之前做的决策

这件事情在某些客户干系人身上还挺常见的,对于超级难管的干系人,每次大会都要发邮件,不是不敏捷,是为了介绍缺少文字证据,而出现更多的坑

  1. 重要结论,会议纪要+邮件跟踪

注意:一定要结论先行,大部分的人没有耐心看完所有的内容,但是加粗字体的会议结论是能简明扼要的概括,本次会议通过了什么决策。有什么遗留事件,具体的责任人是谁,需要完成的截止事件都要标明


以下附上邮件纪要的格式介绍


项目监控

这个过程和项目执行的过程应该是穿插进行的,时间是非常有限的,不要面面俱到的跟踪,抓大放小,只在关节节点验收,比如前面项目执行中提到的如何拆分任务,同理,在验收的过程中,也可在组内的对齐会上验收设计输出内容是否符合标准,是否有易用性问题,如果这是非常细小的圆角,交互的方式,布局的方式,可以交给团队成员自己把控,如果一个设计师从用户体验要素的5层出发,每一层都面面俱到,无微不至,在这样的大项目里面是很难管理的,把更多的空间留给设计师自己。


把有效的时间集中放在有较大提升价值的事情上:

  • 保障产品价值交付

  • 用户体验是否有所提升

  • 现有的资源下,如何平衡,实现价值


拆分对内验收节点:

把大的任务蛋糕拆分给每一个小伙伴后,他具体怎么吃,可以让他自行安排,告知完成的时间阶段,在特定时间端内验收质量问题。


定期复盘:

通常我们通过 Retro 的方式进行复盘,时间周期视项目的时长来定,较短的项目可以安排为每两周一次的 Retro,Retro 的步骤。1.宣誓(可以跳过)/2安全性检查/3分别梳理 好的部分,不好的部分,和建议。好的部分鼓励团队继续保持,不好的部分通过投票,选取前 Top 问题进行 讨论整改建议。在下一次的 Retro 的时候进行复盘,看看这些问题是否都有改进。


当然还有很多做复盘的方式,方法本身不是最重要的,复盘的核心就是为了改进上一阶段做的不好的地方,并且在下一阶段有所改进措施。让项目运行变得越来越好。


进度跟踪:


通常会用项目周报的方式,想客户展示项目的进度,现在进行到项目的什么阶段,有哪些产出物,项目是否存在风险,项目计划及人员投入比例



项目收尾

整体&归档:整理交付物,包括设计资产,使用说明和相关目录,方便其他人员可以持续迭代

设计归档包含的重要组成部分包括且不限于:

  1. 设计源文件

  2. 用户研究报告

  3. 用户验证录屏材料

  4. 用户访谈大纲

  5. 遗留问题跟踪

  6. Showcase材料

  7. 知识传递录屏

  8. ...

  

 如果文件夹过于分散,则需要写一张目录,目录上附上文件夹的链接,方便呢其他的小伙伴能快速的找到


知识传递:注意保留录屏文档,当项目人员变更,可以及时传递上下文

  1. 在做知识传递之前,要和大家确认现有的产出,保障产出物不会在作修改,保障所有人都达成一致后,在开始后做知识传递。

  2. 做知识传递的时候,一定要记得录制屏幕,以防有的小伙伴没有参加,或是之后还要分享给其他的小伙伴使用,这样就可以避免一边一边的重复人工讲解啦,还有预留给大家提问题的时间,看看大家还有没有不清楚的地方,尽量在会上一一解答。



PS:还想再分享一个,当项目中所要处理的事情过多时,如何排列优先级的问题

一般情况下,先看一下这些事情的依赖关系/事件难度,当紧急成度都很高的情况下

有依赖的关系的一般需要提前去收集信息,跟催进度,但花费是假相对较多,可能还有相互依赖,外力因素不可控

或者需要提前与人沟通事件,判断沟通时间是否合适,但花费是假相对较少,但需要提前预约,外力因素不可控

事件越难的越需要留更多的时间处理,内在因素不可控,事件简单的则可以安心放在后面进行,内在因素可控


可以按照风险等级排序方案:信息收集类> 约人沟通类>困难事件类>简单事件类


文章来源:站酷 作者:青沐CHIMO 

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

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

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


车载中控的前世今生

雪涛

随着造车新势力,车联网的赛道发展越来越快。到2021年为止全国汽车保有量超过100万辆的城市共有72个,与去年同期相比增加5个。,国家要求未来汽车要实现50%的智能车联,现在头部的蔚来、小鹏、理想,还有国产品牌的吉利、比亚迪、长城、东风。我们国内造车甚至可以超越合资车。我对未来车联网还是很看好的。今天就跟大家聊聊现有的车载屏幕演变过程,以及现在市面上车载屏幕,和车载系统的特点。


首先先普及下HMI的概念

HMI:- Human Machine Interface : 人机界面,现在多指车载交互系统体验设计。

既然说到人机界面,我们先来设计的载体是如何演变的。




一、车载中控仪表盘演变过程


1886 年,由卡尔·本茨发明的第一辆汽车。当时根本就没有所谓的仪表盘概念,所以载体还得从1908年T型车(Ford Model T)说起,到2012年划时代的特斯拉Model S,汽车仪表盘目前经历四代。



1、第一代:以按键为主


机械式仪表盘: 第一个时代仪表盘为机械芯仪表,一般包含了车速里程表、转速表、机油压力表、水温表、燃油表、充电表等,之后汽车仪表还需要装稳压器来稳定仪表电源的电压,抑制波动幅度,保证汽车仪表的准确性。初代的汽车仪表盘主要以传统的热式和动磁式,显示的信息极为有限,更多的是车辆物理信息“通信员”的角色。


在机械时期中控台哪有什么屏幕可言,那时候的中控台就是收音机和空调的调节器,而且都是实体按键的,只能满足驾驶的基本需求,没有屏幕,都是照搬飞机中控布局,以实体按键为主,功能简陋单一。堆砌功能按钮仪表,没有交互可言。






2、第二代:电气式仪表盘+小中控屏


第二个时代的电气式仪表盘终于诞生,从真空荧光显示屏(VFD),发展到采用液晶显示屏(LED)及小尺寸薄膜晶体管显示器(TFT),显示屏显示的信息越来越清晰、快捷。目前电气式仪表在市场的保有量最大,且一般采用机械仪表结合数字仪表的方式,例如车速、转速信息采用指针,指示灯信息采用LED等点亮,其它信息则采用TFT屏。



虽然相较于第一代机械机芯仪表增加了不少功能,汽车信息反馈也更全面更及时,但是其发展速度却明显与汽车行业不相匹配,对于更深层次的驾驶需求,电气式仪表仍无法满足。




3、第三代:全数字化仪表


汽车仪表盘领域在不断追求更新,于是划时代的全数字液晶仪表盘孕育而生,也是就我们常说的虚拟仪表盘。全数字汽车仪表盘使用了一整块液晶屏取代了传统的指针和刻度表,所有信息都通过这块屏幕显示出来。


单从外观上来看就能给人以一种比较高大上的感觉,这类仪表盘上往往没有指针等部件,所有信息都通过屏幕传递出来。功能更强大、信息显示更具逻辑性,驾驶者接受信息更快,提升行车安全。也可以根据个人喜好调整相应参数,比如比亚迪的仪表盘就可以改变背景颜色。在高级点的,像宝马的全数字仪表就可以切换N多种模式。


2007年iPhone问世后,大屏、轻薄机身、高清显示屏、可安装应用等功能引领了整个行业的革命。电动汽车行业飞速发展,智能AI和人际互联等人车交互概念也跟着兴起,对于中控台的需求和功能复杂度也跟着越发精细起来,结果就是屏幕越来越大。


2013年上市的特斯拉Model S,座舱里最惊艳的就是那块17寸的大屏。超高的分辨率和流畅的操作,和漂亮的UI设计,最初让很多美国民众疯狂。就像苹果手机颠覆了传统手机业,特斯拉也颠覆了传统汽车行业。


2014年换代的奔驰S级将两块12.3寸屏幕连在一起,合成了一块23寸大屏,比特斯拉的大屏还多出6英寸。




拜腾M-Byte,48寸巨屏,横向贯穿仪表台,再一次颠覆汽车的内饰设计。



比亚迪系列汽车的旋转大屏,玩出新花样,可以旋转控制,就像手机横屏和竖屏的场景。


纵观下来,其实不难看出,虽然汽车的中控屏幕也是往着越来越大的方向发展,但因为空间以及功能需求的不同,相比起手机来说,中控屏幕的变化更具备多样性。




4、第四代:HUD显示屏


从上世纪80年代,抬头显示技术在汽车领域已经开始被使用,直到现在才开始逐渐展露头脚。

HUD抬头显示器(Head Up Display),又叫平视显示系统。它可以把重要的信息,映射在风窗玻璃上的全息半镜上,使驾驶员不必低头,就能看清重要的信息。


战斗机是率先应用HUD抬头显示器的。飞行员在空战中,需要交替观察舱外目标和舱内仪表,易产生瞬间视觉中断,因此会导致反应迟缓、操作失误,并有可能贻误战机,采用HUD抬头显示可克服这一缺点。


第一架使用HUD抬头显示的飞机是美国海军的A-5舰载机。民用航空最早使用HUD抬头显示是法国达索飞机公司的mercure飞机。



在复杂多变的道路上开车,驾驶员双眼离开车辆前方,是个非常危险的事情,尤其是在高速公路上更是明显。于是很多车型,就给车辆配备了一个不需要挪开视线,就能知道车辆基本信息的配置,这就是HUD抬头显示。



HUD作为一款新技术,优势显而易见。当驾驶员需要查看仪表盘或中控台上的信息,视线至少需要转移0.3秒,而HUD投影的信息就在驾驶员平视的正前方,驾驶员可以将更多的注意力放在路面上。将驾驶体验及驾驶员对于路况信息的认知能力进行革新式升级。





二、六大车载系统的特点


现在各家系统百家争鸣,各家车载系统设计有哪些不同?



1. 阿里 斑马智行


简介:


1、阿里车载小程序是一种无需下载安装即可使用的“应用”,旨在为用户打造“随时可用”、“用完即走”的使用体验。


2、AliOS作为互联网汽车操作系统,原生地支持阿里小程序,引入阿里生态服务的同时也面向开发者开放,围绕车场景为用户提供从出行到生活的各类智慧服务。


特点:


1、设计特点:


独立的大卡片式的内容界面模块方便车主在行车过程中单手操作,其配色鲜艳,风格扁平,符合使用场景和国人的使用习惯。


2、功能特点:自带场景智能感知的基因。


得到车主授权后,车载小程序可以围绕行车场景,实现上车前、行车中、下车后自然串联的智能化场景服务。


用户可以在车上通过触控、语音、手势等多模态交互方式,咨询附近的推荐餐厅,小程序会基于用户的喜好作出推荐,还可以预约排号;到达餐厅附近,系统会自动唤醒小程序,为用户找到停车场;下车后,车载小程序会无缝连接到手机小程序端,用户可以在手机上查看餐厅的预约信息等。


△ 斑马智行2.0系统设计


斑马智行,采用智能手机界面和应用商城下载 APP 的使用方式,实现车载和手机的双重控制。


强大的云端特性在语音识别和线上互联方面提供了良好的使用体验,车主可以连接手机蓝牙后,读取其手机通讯录,实现利用车载系统拨打和接听电话的功能。支持 USB 接口,通过 U 盘实现播放音频、视频文件等。在娱乐生活方面,内置虾米音乐,蜻蜓FM,喜马拉雅等,支持在线搜索,在线播放以及在线广播等服务。


同时,斑马智行依靠阿里强大的技术和资源支持,打通停车场,加油站,高速公路支付等,使用户驾车时产生的费用均能通过支付宝支付。




2. 百度 Car Life和Apollo


简介:


1、打造智能车载服务生态,满足用户出行、娱乐、生活等多元化需求,构建人-车-家一体化互联闭环成为时代趋势。


2、智能小程序,是百度提供的一种技术解决方案。开发者基于此开发出来的服务,在各类宿主环境(手机 App、车载系统、IOT 设备等)中,可做到用户无感知安装,即点即用。


特点:


1、设计特点


车载端主界面分别采用蓝、绿、红、灰四个色块对应四个功能模块,「发现」集成音乐、娱乐、听书、电台等特色音视频服务,采用红色在界面中最为突出,其设计风格整体扁平,面性 icon 利于识别与点击。


2、功能特点


智能小程序包括“车后服务”、“资讯”、“休闲游戏”、“视频”、“购物”、“亲子”、“旅游”、“工具”等8个类别,一共80多款。车企可以根据车型定位和自身需求自行定义和组合可供使用的车载小程序。


百度的车载小程序大部分场景下还是只能依靠用户用语音唤醒,但在生态的开放性上,百度车载小程序则做得更为彻底,可以在百度App、百度地图、百度贴吧、百度网盘百度系App上运行。





3. 腾讯 Ai in Car




简介:


1、“腾讯小场景”是专为出行场景打造的车载轻应用生态,部署在云端,不需要下载,即用即走,并支持语音交互。


2、分为3类,出行服务小型车、生活服务小程序和视听服务小程序。


特点:


1、设计特点:


运用的FutureLink3.0系统,FutureLink3.0 基于安卓平台开发,在 12 英寸的中控屏幕上并没有将大量的图标堆砌在首页,反而以地图为背景,将六大功能模块以大板块的形式布局在地图下方,整个界面设计简洁。


2、功能特点:


最大特色:基于位置和场景会被自动唤醒。比如用户经过加油站、停车场、旅游景点的时候,有些购买和支付的服务就会主动弹在车机上,用户再通过语音完成操作。


手机小程序是“人找服务”,那么腾讯车载小程序则进化成“服务找人”。


△ 腾讯在车载场景下的生态布局


Ai in Car,顾名思义,基于 AI 的连接能力和生态,融合腾讯内容生态的优质资源,包括资讯、视频、IP、文学等板块,为车主提供更丰富的内容消费。风行搭载的 FutureLink3.0 车联网系统,就是和腾讯深度合作而诞生的优质案例。



△ FutureLink3.0系统界面


只在设置页中,才会出现二级子菜单列表,而且提供的设置项目也不多,界面层级简单,不累赘,也给司机带来轻松愉悦的操作体验。同时,基于行车安全考虑,在类似天气、股票等查询功能上,比较依赖语音控制。在娱乐生活方面,打通手机和车机账号,用户无需切换账号就可以与车载导航、电台、QQ音乐、微信等功能无缝衔接,支持车主组建聊天组,在行车途中与好友进行实时沟通。


从整体来看 FutureLink3.0 的设计,它更像是一个把需求页面展现在车主面前的「轻应用」,没有传统概念上的主界面、多层交互菜单以及相应的「系统特质」的设计,它更希望把海量资源建立在云端,终端只给车主呈现其所需要的服务即可。




4. 谷歌 Android auto


简介:


Android Auto 系统的工作原理是将手机连接到兼容的汽车,让驾驶员可以使用汽车屏幕和语音操作与手机的应用程序进行交互。它提供了一种导航、收听媒体和消息等的简单方法。


特点:


1、设计特点:


在 UI 框架设计方面,主屏幕以卡片的形式显示通知、活动、导航和消息,右下角有启动语音命令的麦克风图标和底部的活动栏,这些特性属于全局 UI。在它下方,应用程序内容区域显示应用程序启动器或当前使用的主应用程序的内容。



△ Android auto手持设备与车载设计系统


Android auto 将 Android 平台扩展到汽车上,它有两种使用方法:在手机上或在兼容的车载屏幕上。


它有一个简单的界面,标准化的用户交互模型和强大的声音动作,其目的是帮助司机尽量减少分心。需要注意的是,为汽车设计交互式应用程序与手持式设备的设计有根本上的不同,其应用程序的交互界面应该简化,以确保司机的眼睛和手集中在开车上,减少司机分心。


△ Android auto车载系统UI框架


卡片上提供如消息字符串、图标、图形和操作等内容,会根据用户最近的使用情况和优先级来确定卡片的大小。主屏幕会限制卡片的数量,以保持列表的简短和相关。因此,当新的、更相关的内容出现时,应用程序的通知可能会从屏幕上消失。同时,抽屉式的交互方式,提供了简单的操作和导航。每个抽屉项目必须提供一个单一的触摸目标,避免在抽屉里放长的列表,或者在相同内容的视图之间切换。这里官方给出的最佳 UI 做法是简化内容,关注上下文,显示新鲜的、有用的和大多数不滚动的项目,使用单行,对决策至关重要的较长字符串使用两行。




5. 苹果 CarPlay



简介:


CarPlay 车载系统旨在令用户通过汽车制造商之原生车载系统来使用、操控iOS设备并发挥其功能。该产品的首个版本计划于2014年发布,最早出现在一些制造商的汽车展览上。


特点:


1、设计特点:


基于手机映射,所以界面除了横向布局外,icon都和手机端统一。以简洁的布局提供有用的、重点突出的信息,便于从驾驶员座椅上进行扫描。不要用不必要的细节和不必要的装饰来弄乱屏幕。


在整个应用程序中保持整体一致的外观。一般来说,具有相似功能的元素应该看起来相似。


2、功能特点:


作为车内辅助、操作、娱乐的中心,Carplay 可以直接连接到汽车中控的触摸屏上,提供基于 iOS 的相关的服务和应用。Carplay 的整体设计围绕着车内驾驶这一使用场景,而它的设计原则也围绕着这一场景来规划:

  • 成熟。基于最熟悉的 iOS 应用,来设计界面元素,并提供熟悉、直观的体验。

  • 简短。采用尽可能简短的交互,不过度引人瞩目

  • 相关。屏幕显示信息高度相关,提供尽可能少选项,不需要复杂决策

  • 语音。基于Siri,以语音交互为核心,司机无需视线离开前方,手也不用离开方向盘即可完成交互。


全新的电子车钥匙,加上 Apple CarPlay 车载流畅的使用体验,让 iPhone 能在旅途上发挥更多作用。地图、电话、信息、音乐、日历、一言、一触、一旋随你驾驭。






6、华为车机应用



简介:


HMS for Car是华为终端云服务打造的智慧车载云服务解决方案,基于HMS(Huawei Mobile Services),通过AI场景引擎结合华为生态资源,为用户提供精准丰富的出行场景内容和服务,助力汽车从交通工具向具有交互和服务的能力的智能终端进化。


华为快应用是一种基于行业标准开发的新型免安装应用,其标准由主流手机厂商组成的快应用联盟联合制定。开发者开发一次即可将应用分发到所有支持行业标准的手机运行。


HMS Core提供端、云开放能力,帮助开发者实现应用高效开发、快速增长、商业变现,使能开发者创新,为全球用户提供精品内容、服务及体验。

1、全球化分发。已上线超过170+国家和地区。

2、全终端接入。全面支持从小屏幕到大屏幕各种智能终端。

3、全场景支持。快应用直达链接和卡片嵌入全终端场景。


特点:


1、设计特点:


在交互界面上,Carplay和Carlife由于使用的投屏方式,主界面依然是一个个的APP图标,需要点击启动进入后才能使用。笔者认为采用这样移动端过于笨重的交互方式并不适用于车载场景;HUAWEI HiCar的设计理念是"安全便捷、自然舒适、智能贴心", 对车载端的人机交互要素重新布局规划设计,采用桌面卡片的设计方式,以满足复杂驾驶状态下的使用需求。



桌面卡片是应用内容和功能特性的重要载体,用户通过对卡片的快捷操作直达应用的核心功能,提升交互的便捷性。应用可通过接入 HUAWEI HiCar 桌面卡片的方式呈现最核心的功能和服务,并根据自身的需求特性,自行组合卡片元素以满足不同场景下的用户诉求。

  • 背板:背板样式可以为色彩填充或设置背景图。

    背景色支持黑、白、彩色三套。

    应用需提供三套背板以适配卡片主题切换。

  • 品宣区:品宣样式为图标+文字,应用可根据在此区域显示品牌图标和名称。

  • 内容区:展示与应用场景相关的信息,其内容可以是图片、文本或图文样式。

  • 操作区:操作区为文字或图片按键,最多 3 个控件或 1 个控件组。



2、功能特点:


华为智慧助手,可结合用户使用场景,以卡片形式推送提醒、服务和行程,实现智慧化服务找人。例如,送孩子上学时,车机端华为智慧助手将自动推送"有声续播"卡片,用户点击卡片,即可一键续播孩子在华为手机上没听完的有声儿童内容;用户在开车下班回家路上,进入离家500米范围内时,车机系统可自动启动"回家模式",提前打开家中的窗帘、空调等设备,方便用户享受惬意生活。



My Car功能面向车企开放华为手机等智能硬件系统级入口能力,能够实现远程控车、查车、汽车服务/告警关键信息等反向推送能力。远程控车功能,可以满足用户高频控车诉求,例如,远程开关空调、寻车、查看门窗状态等。另外,当车辆胎压不足、门窗未关闭时,用户也能通过手机、车机及时收到提醒。





三、系统的开源地址


1、阿里Alios开放平台

https://miniapp.alios.cn/index#/document


2、百度车载生态开放平台

https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html


3、腾讯-车载小场景(私我领取PDF)


4、谷歌驾驶

https://developers.google.com/cars/design/design-foundations


5、苹果apple car play

iOS - CarPlay 车载


6、华为车机三方应用交互设计规范

https://developer.huawei.com/consumer/cn/doc/50902#h2-1587181522014



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



文章来源:站酷 作者:郝小七

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

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

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



数据可视化设计指南:设备篇

雪涛

整个合辑一共有 10 篇文章,分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章,具体展开来讲一讲可视化大屏设计的知识点。(我命名为可视化设计十要素)

同时也会包含    同学们问我的问题以及我搜集的问题,将会以问答的形式去给大家讲一讲,如有不对的地方,还请大家指出,我们一起探讨进步!

文章较长,请仔细阅读,基本涵盖:设备信息,分辨率尺寸,大屏适配,投屏事项,掌握本文可应对日常可视化设计设备方面的知识。

超全面的数据可视化设计指南(一):设备篇

设备分类

1. LED 屏幕

政府大屏主要以点间距去区分屏幕的精细度,点间距越小,造价约昂贵;面积越大越整体,造价越高。离屏幕越近颗粒感越强,设计效果也就越不清晰,LED 显示屏表面不平整是导致 LED 显示屏图像失真的主要原因。LED 显示屏表面粗糙度的好坏主要取决于生产工艺。

屏幕介绍:按照不同点间距进行分类,P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20(间距越小,图像越清晰,价格也越高,一般政府 led 屏基本都在 P1.25-P6 之间)。

最佳视距=像素间距/(0.3~0.8),这是一个近似范围。如 LED 显示屏 P16mm,最佳视距为 20~54 米。

超全面的数据可视化设计指南(一):设备篇

2. 液晶拼接屏

拼接屏相比于点间距比较小的 LED 屏,价格方面会更便宜一点,拼接屏设计时最主要就是拼缝的处理,注意拼缝,设计时非必要情况下,都要跳过拼缝,尤其是“圆”这个造型。

拼接屏:46 寸,55 寸 物理分辨率:1920*N 1080*N(n 代表屏幕数量),1.7mm、3.5mm、0.88mm、0.44mm、无缝隙;企业常用(1.7mm 和 3.5mm)

大屏拼接缝隙:设计时应尽量不要跨屏去设计,会使画面交叉,不重叠,尤其是圆形。

超全面的数据可视化设计指南(一):设备篇

3. 大屏拼接处理器

大屏拼接处理器主要功能是将一个完整的图像信号划分成 N 块后分配给 N 个视频显示单元,完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要,输出信号数量等于显示单元数量。

超全面的数据可视化设计指南(一):设备篇

4. 视频矩阵处理器

矩阵是将多路输入信号切换输出到多个显示设备,一般来说输入信号数量要大于输出信号数量。(我们想在 9 块显示器上同时监控 100 个摄像头传来的信号,就用矩阵来实现即可)

视频矩阵是指通过阵列切换的方法将 m 路视频信号任意输出至 n 路监控设备上的电子装置,一般情况下矩阵的输入大于输出即 m>n。有一些视频矩阵也带有音频切换功能,能将视频和音频信号进行同步切换,这种矩阵也叫做视音频矩阵。

模拟视频矩阵的输入设备:监控摄像机、高速球、画面处理器等很多个设备,显示终端一般为监视器,电视墙,拼接屏等(通常视频矩阵输入很多,一般几十路到几千路视频,输出比较少一般 2-128 个显示器;例如 64 进 8 出,128 进 16 出,512 进 32 出,1024 进 48 出等)。

超全面的数据可视化设计指南(一):设备篇

总结:矩阵只能负责信号的切换,不能处理,不能做效果。大屏拼接处理器功能十分强大,具备矩阵功能的同时,还可以实现任意开窗、漫游、叠加、场景保存与轮换。

5. 液晶拼接屏的优势 – 拼接处理器预设场景

4*2 大屏展示端,我们通过控制端,借由拼接处理器可以对大屏进行随意开窗,漫游,叠加,画中画等效果。在控制端拖动布局,大屏会随之改变布局,非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。

如果你们企业还在因为屏幕适配以及尺寸问题而纠结,或者想展示:开窗,漫游,叠加,画中画等效果,毫无疑问你们应该选择拼接处理器,这比传统投屏方式更合适,更没有比例不对的困扰。

超全面的数据可视化设计指南(一):设备篇

预设场景一:

把控制端的分屏进行编号,接下来移动控制端对应的编号区块,就可以对大屏进行重新布局,图中展示的正是我们的预设正常场景。场景为居中布局,左右两侧为图表展示。

超全面的数据可视化设计指南(一):设备篇

预设场景二:任意窗口布局

对控制端进行随机布局,将主视觉模块移动到左侧四块屏幕,图表都集中在右侧,由此我们就由预设场景的居中布局变成了左右布局,左侧为主视觉。

超全面的数据可视化设计指南(一):设备篇

预设场景三:任意窗口漫游

可以随意的关闭大屏某个模块的漫游,通过控制端进行屏幕的显示以及不显示。

超全面的数据可视化设计指南(一):设备篇

预设场景四:任意窗口平移

画面的任何一个模块都是可以进行平移操作的,我们将模块一和模块五可以平移拖拽到任何一个位置。

超全面的数据可视化设计指南(一):设备篇

预设场景五:任意窗口叠加

画面的任何一个模块都是可以进行叠加到屏幕任何一处,还可以控制模块置顶和置底,非常灵活。

超全面的数据可视化设计指南(一):设备篇

6. WEB 端大屏

基于 web 网页端的展示方式,通过在 web 开发,有需要时会投屏到大屏上去展示。设备比例一定不能差距过大,比如 16:9 的投屏到 32:9 的大屏就不是合适,解决方案可以是外接一块 1920 的显示器即可。

此处要注意 web 端演示时,记得全屏显示,浏览器边框滑动条等可以不考虑,前端会做相应的浏览器细节考虑,设计按正常分辨率即可。

超全面的数据可视化设计指南(一):设备篇

7. 触摸屏

触摸屏(Touch Panel)又称为“触控屏”、“触控面板”、“触控台“,是一种可接收触头等输入讯号的感应式液晶显示装置。

当接触了屏幕上的图形按钮时,屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏,原理等同于 iPad 控制,只是载体不同。

设计规范以及按键反馈等交互体验与 iPad 类似。

超全面的数据可视化设计指南(一):设备篇

8. 滑轨屏

滑轨互动屏系统——又称为滑轨电视、滑轨播放等,通过特殊设计的机械滑轨控制装置,结合高清液晶拼接幕墙,实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息,包括图片、文字、视频等,是一种全新的互动展示形式,可与触摸同时使用。

超全面的数据可视化设计指南(一):设备篇

9. 虚拟沙盘

虚拟沙盘/数字沙盘就是用计算机通过投影仪或者 LED 大屏显示屏动态/静态三维显示:智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型,这是一种高科技的模型操作员通过程序,可以随意调整沙盘的尺寸、规划区域、区域布置,快速展示多种全新的创意。

具有三维显示效果,并可以从不同角度观察创意模型,筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果,实体沙盘为底,虚拟沙盘做效果叠加。

分辨率:物理实际分辨率

超全面的数据可视化设计指南(一):设备篇

设备适配

Q:原本设计尺寸是 1920*1080,使用场景是 PC 端,同时在大屏中展示,尺寸为 3840*1080,该如何适配?

A:首先我们需要了解适配最主要的痛点就是:灵活,复用性高,可延展。

超全面的数据可视化设计指南(一):设备篇

围绕这几个点我们可以通过模块化开发去做,将每个模块单独开发。我们设计师做这种需求之前,就需要提前去构思,在设计各模块时,尽量使用可扩展和可自适应的图形,这样面对适配的时候我们可以通过移动,缩放这些模块,来完成适配。尽量避免二次设计以及开发,提升时间成本。

图形放大适配:

超全面的数据可视化设计指南(一):设备篇

图形位移适配:

超全面的数据可视化设计指南(一):设备篇

Q:如果是 16:9 适配非 32:9 是否也是这么去适配的?如果是特殊的形状或比例该怎么适配?

A:我们适配一定要记住灵活,减少工作量这些原则,如果不遵循这些原则,那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏,如何用开发一套的时间去适配两个甚至是多个终端,这是我们需要注意的。当然考虑到一些实际情况,会有一定程度上的修改,但是一定是要从节省工作量去出发的。

尺寸计算

场景一:拼接屏分辨率计算,已知某项目设备分辨率为宽高 4*2 拼接屏,设计稿我们该如何去定义分辨率?分辨率又是多大?

从命题我们可以看到 4*2 的拼接屏,我们可以通过一块屏幕为 1920*1080 去计算,那么通过计算分辨率应该是 1920*4 &1080*2,也就是 7680*2160,这样就计算出我们的分辨率了。

超全面的数据可视化设计指南(一):设备篇

场景二:LED 屏分辨率计算,已知某项目 LED 屏幕物理尺寸为宽 15 米,高 4 米,设备分辨率未知(可以支持 4K 或者 2K 输出),那么如何去制定分辨率?

工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目,那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。

可能一:屏幕支持 4K 输出,既然支持 4K 输出,保证画面输出的清晰我们可以将设备的高度设定为 2160

此场景下公式为:15/4=X/2160 X=8100 那么可以大概得出宽度大概为 8100 像素(只是我们通过计算大概得出来的)

可能二:屏幕支持 2K 输出

此场景下公式为:15/4=X/1080 X=4050

超全面的数据可视化设计指南(一):设备篇

重点来了,不要以为这样就结束了,我一直强调的可视化设计师为什么一定要在现场,为的就是方便各种测试。刚才我们只是通过计算得出的大概数值,此时我们可以在纸上画一个正方形,并投到设备上,如图。

  • 结果一:如果正方形比例不变,设计尺寸无限接近于大屏实际比例;
  • 结果二:如果正方形比例被拉伸,设计尺寸小于大屏实际尺寸;
  • 结果三:如果正方形比例被压缩,设计尺寸大于大屏实际尺寸。

超全面的数据可视化设计指南(一):设备篇

此处图片上主要是为了测试计算出来的分辨率究竟是拉伸还是被压缩了,通过这样的方式去测试设备大概的分辨率的大小比例,在我们产出效果图之后,也可以投射设计图的方式看看屏幕是否是完美适配,这种方法可以在未开发之前,尽可能确定屏幕对设计图的影响,从而避免对开发造成大规模修改。

注意:这样做也只是在不知道设备分辨率的情况下,去大概计算设备分辨率,仅供参考!

投屏事项

1. 电脑直接投屏

使用场景:会议室,展厅等

等比例投屏,投屏电脑投到 2*2 大屏(4K)

投屏电脑支持输出 4K 分辨率,投屏电脑分辨率以 3840*2160 作为设计,投到 4K 拼接屏上,大屏会完美展示,并且画面非常清晰。

超全面的数据可视化设计指南(一):设备篇

投屏电脑支持输出 2K 分辨率,投屏电脑分辨率以 1920*1080 作为设计,投到 4K 拼接屏上,只会以 1920*1080 进行输出,因为输出像素只能支持 2K,也只是 1920*1080 的放大。

超全面的数据可视化设计指南(一):设备篇

此处需要了解两个概念:输出像素和显示像素,输出像素指的是投屏电脑的最大支持分辨率,显示像素就是我们大屏的支持的最大分辨率。

我们实际项目中最好以显示像素的尺寸进行设计(就是以大屏尺寸为主),但是也要看输出设备的像素大小。

2. 硬件投屏本地运行

使用场景:科技展厅,以及一些带主机的设备。

此种情况,一般我们的大屏会自带主机,大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示,那么我们直接就可以通过显示器的尺寸去做设计,这样就是大屏的设计尺寸。

一般这种靠硬件的投射,都是在拼接处理器的处理下,将多个屏幕拼合成一个大的显示器,再通过拼控系统(硬件投屏)进行输出。

超全面的数据可视化设计指南(一):设备篇

一般我们可以将我们大屏的(UE4 或者 U3D 开发)应用程序打包,打包成一个后缀为.exe 的应用程序,在大屏电脑上直接点击,程序就可以在大屏上完美的跑起来,也不需要去进行电脑投射大屏。

超全面的数据可视化设计指南(一):设备篇

3. 控制端操控大屏

如果通过控制端去控制大屏,那么投射设备就可以通过多种方式去展示了,可以是手机、平板、触摸屏、手势控制、体感控制等等。

这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了(比如 750*1334,2048*1536),设计尺寸就是我们大屏本身的分辨率就可以了。

超全面的数据可视化设计指南(一):设备篇

4. 多主机多信号投屏

此种情况主要使用场景:屏幕宽度非常高,并且内容可以分很多模块展示,模块彼此之间不受影响独立展示,这种情况下我们就可以通过此种方式去投屏。通过多个主机分别去投射大屏的同等大小区域,比如图中的场景模块被我分成了四等份,我们就可以通过四台主机去分别投射四个模块,形成一个完整的大屏。

此种大屏设计尺寸我们以输出设备的尺寸为主要参考,四台主机那么整体宽度就是 1920*4=7680,高度就是 1080(如果设备支持 4k 输出,那么提升相应的设备尺寸*2 就可以了)。

超全面的数据可视化设计指南(一):设备篇

5. 不同比例投屏及解决方案

Q:如果遇到一个设备是 16:9,投屏到一个 20:3 比例的大屏幕, 那我设计尺寸以 16:9,还是 20:3?

A:我们要记住,如果面对的是正常比例投屏到非等比的大屏,我们需要遵守的规范一定是:一切以大屏展示为主。所以我们设计尺寸一定是按照 20:3 来设计的,大屏展示正常才是我们的唯一标准,投屏电脑可能会出现的问题,我们只能妥协(投屏电脑可能只能展示很小的一部分,但也是没有办法的)

那么我们遇到这种是否就没有办法了呢?在这阿勇给大家提供了三种解决办法,在实际工作中,我也遇到过这种问题,所以在这给大家分享一下。

方案一:外接显示器(外接多个显示器,一般主机可以另外外接四个显示器,这样就可以解决投屏电脑显示不全的问题了)

超全面的数据可视化设计指南(一):设备篇

方案二:采用拼控系统,而不是用纯粹的设备投屏(拼控系统完美解决了尺寸不一致的难点)

超全面的数据可视化设计指南(一):设备篇

方案三:设计两稿,16:9,20:3 我们都去做设计(做两套系统,相当于做的适配)

超全面的数据可视化设计指南(一):设备篇

Q:请教大家一个问题,电脑的分辨率是 3840*2160,单个大屏的分辨率是 1920*1080,拼 9*6 的大屏,设计尺寸该设置多少啊?这样设计尺寸会不会太大了,如何优化这个设计稿尺寸?

A:前面的文章我们已经介绍过拼接屏的尺寸的问题,这个问题的解答:1920*9/1080*6,这个就是设计分辨率,通过计算得出,最终设计稿尺寸为 17280*6480。可以看出设计分辨率确实太大了,设计的时候如何去优化设计尺寸呢?

超全面的数据可视化设计指南(一):设备篇

通过命题我们可以看出电脑分辨率是支持 4K 的,就是说输出分辨率和显示分辨率我们都是可以上 4K 的,而 4K 的分辨率一般会做 3840*2160,再结合设计稿尺寸 17280*6480,可以将整个效果图尺寸缩小三倍,也就 5760*2160。设计可以按照这个分辨率去出图,最终交付给开发的就是切三倍图,并提示开发是缩小三倍做的。

超全面的数据可视化设计指南(一):设备篇

总结:不管在面对什么尺寸的设计,都要记住,万变不离其宗,一切以大屏完美展示为准则,所有的一切都是要在大屏上观看,为了完美展示,投屏电脑,设备控制等页面可以适当的让步。

全篇知识点

通过以上的知识点总结,不知道大家对于数据可视化大屏设计是否有了新的认识,数据可视化对于设备的尺寸,设备的信息,以及投屏注意事项,都要有更多的了解才可以。下图就是总结本篇文章的知识点。

超全面的数据可视化设计指南(一):设备篇

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



文章来源:优设 作者:

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

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

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





酸性设计风格的由来、风格特点和应用科普

雪涛

酸性设计的由来

酸性风格来源于迷幻艺术Psychedelia,在英文中称为Acid Graphics。其中(Acid)一词原指一种致幻剂LSD。这也能侧面说明为什么酸性风格常以反复出现的几何图形或高饱和度颜色呈现。

酸性设计至少有十几年的历史,但最早是由平面设计师David Rudnick来定义的,他不仅是平面设计师同时也是音乐杂志《Volume》的创始人。

正是因为他的创作在地下和主流市场中的大量露面,使这种设计风潮自然地流行起来,吸引了更多年轻设计师。

超级潮!酸性设计风格的由来、风格特点和应用科普

超级潮!酸性设计风格的由来、风格特点和应用科普

David Rudnick的作品

在2018年,Rudmer van Hulzen策划了一场展示音乐俱乐部海报设计的展览,Rudmer van Hulzen是荷兰创意机构G2K的艺术总监,在这场展览里,展示了一系列来自Studio Cryo、Studio Feixen、Anna Kulachek、Bráulio Amado和Jonathan Castro等设计师和工作室的作品,也是通过这次展览让更多人了解了酸性设计。

超级潮!酸性设计风格的由来、风格特点和应用科普

而Rudmer van Hulzen也重新定义了酸性设计,他定义其为 “挑战传统对美感和欲望的定义,是酸性平面的核心。尽管许多人可能会认为这些作品很丑陋,但是如果仔细研究它们的制作方式、创作目标和用户群体,你会发现它们是特意如此,并且拥有自己的美学。另外,你不需要化学刺激就能看到它们的美。”

日本的设计师GUCCIMAZE 则被定义为推动酸性设计风格趋势发展的幕后主手之一。他擅长从不同语言获取灵感,将字体、视觉元素和形状重新融合,幻化成充满神秘感的设计作品。音乐人Nicki Minaj、杂志《Tunica》等都曾邀请他操刀专辑或杂志的视觉。

超级潮!酸性设计风格的由来、风格特点和应用科普

GUCCIMAZE在设计中运用了大量的尖锐的字体,并且搭配重金属等疯狂字体。

超级潮!酸性设计风格的由来、风格特点和应用科普

酸性设计的风格特点

虽然说酸性设计没有一个标准的模版,但是其表达形式通常是固定的。这种特征也决定了它多运用于时尚、音乐、潮流以及艺术圈。而且随着C4D的流行,越来越多的设计师在酸性设计中加入3D元素。
酸性设计的表达形式通常概括为三种

1. 高饱和材质

通常为镭射纹理,金属玻璃材质,3D物体材质等,

通过特效感的颜色突出画面的科技迷幻感.

超级潮!酸性设计风格的由来、风格特点和应用科普

2. 装饰性文字

尖锐的字体,通常搭配重金属美学疯狂字体,流动金属字体

超级潮!酸性设计风格的由来、风格特点和应用科普

3. 实验性的排版

通常为复杂的构图,丰富的内容制造出独特的艺术氛围,排版形式多为科幻未来主义、反乌托邦场景.

超级潮!酸性设计风格的由来、风格特点和应用科普

最近超火的 liquid bubble 也是酸性设计的一种

超级潮!酸性设计风格的由来、风格特点和应用科普

酸性风格的设计应用

1. 平面设计

通常为时尚、音乐、潮流以及艺术圈的设计海报

超级潮!酸性设计风格的由来、风格特点和应用科普

2. UI设计

UI设计中的酸性设计并不多,UI设计中加入酸性设计的元素会让人眼前一亮,各种混搭的金属材质让界面焕然一新,同时也让界面设计充满各种可能性。

超级潮!酸性设计风格的由来、风格特点和应用科普

总结

有人说酸性风格是新的新丑风,有人把它定义为科幻未来主义,有人则认为它是Y2K风格的替代品,无论是哪一种,作为当代设计师的我们,更多的是以一种面向未来的想法,让已经有了几十年的酸味美学可以带有“自由恋爱”的内涵。无论是霓虹色彩、液态金属字还是欧普风格,都仅仅是酸性设计元素元素中的冰山一角,一种流行现象、美学观念的远远不止如此。


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



文章来源:优设 作者:石小秋

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

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

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



设计师如何消除认知偏差?

雪涛

本文从什么是认知偏差、认知偏差与UX设计的关系两方面,总结了13个实用的方法,帮你学会用设计消除偏差。

设计师如何消除认知偏差?我总结了这13个方法!

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

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



文章来源:优设 作者:vv酱•-• 

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

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档