首页

Bs界面设计之二:如何做好B端用户研究?我总结了这4个方面!

博博

用户研究产品设计中很关键的一项,它在整个流程中发挥着关键的影响。

在设计中确定相关的数据指标以及用户行为使得设计更加符合用户的目标。设计验证阶段可以验证设计是否符合设计目标。从而让整个设计流程具有确定性,为用户与公司带来价值。

有哪些研究方法?


1. 主动找用户


日常主动找用户做研究的方式有:问卷调查,线上数据,深度访谈,可用性测试。

如何选择研究方式:

在日常工作中,要选择什么方式进行用户研究其实是非常纠结的。这里给一组日常工作中我们常用的指标进行判断组合,包括:定量数据,用户行为,定性数据,用户态度。

1. 定量数据:以数量形式存在的属性,并因此可以对其进行测量,以物理量为例,距离、质量、时间等都是定量数据。

2. 定性数据:一组表示事物性质、规定事物类别的文字表述型数据。

3. 用户态度:用户对于产品的态度,喜欢或者是不喜欢。

4. 用户行为:用户的针对一个任务的行为路径。

这里举一个例子:想要根据定量数据推测用户行为—线上获取数据的方式有很多,其中深度用户访谈在日常的调研中用的比较多,所以今天主要讲讲深度用户访谈如何做。


2. 深度用户访谈


前期准备:三个阶段不同

针对产品设计有三个阶段:需求确认,设计实施以及全量上线后的验证效果。

1. 需求确认阶段核心:确认需求是真实存在的而不是意淫的,主要是用于场景评审过程中,产品经理讲述需求的场景和需求的价值。

2. 设计实施阶段核心:为设计师提供用户行为参考,防止因为没有用户行为进行参考而导致的设计师脑补用户行为产生臆想。

3. 全量上线后:主要是验证前期需求和设计过程中的想法给用户带来的正负影响,有时候如果内部出现不同的声音往往会有灰度测试以及 AB 测试等等方式来确认具体哪个方式更合理。全量上线后,主要是看全部设计的结果。

选取对象:

除了要挑选不同对象外,还要挑选合适的测试对象才能测试出想要知道的方面,具体的有以下维度:

用户类型:具体的分 KA/非 KA,KA 是核心大客户的意思,客户具体的分级别是:KA,A,B,C,D。

一般的情况下是邀请 KA 客户进行测试。

角色:具体的要看测试什么功能,比如要测试美业服务场景相关模块,一般处于这一块的角色是销售。

使用年限成熟度:一般分为新/老,举个例子:针对新功能上线时候,一般会选择新用户,测试操作的难度。

是否使用过竞品:往往用过竞品的可以找到两个产品之间的对比,从而找到优化的点。

常用的模块/端:不同的模块与不同的端,针对的是不同的用户。举个例子:在工厂内部,生产工人常用的是 pda 设备。

如何建立邀约:特殊的角色

这里讲到 SaaS 中有一个角色:客户成功。为什么要讲这个角色,因为有两个点:

1. 调研之类的需要获取客户信任,客户成功(客户服务)是最接近客户的。如果通过客户成功邀约的话,成功率最高;

2. 还有一个点是调研过程中有时候口误会引起不必要的误会,这个时候就会反映到客户成功身上,从而影响到客户成功的业绩。

针对性话术:

提高邀约的成功率要通过客户成功同学,这个时候客户成功同学其实有自己的顾虑,主要是怕打扰到自己的客户从而影响到业绩,针对调研话术分三个方面:

1. 价值传递打击痛点:客户成功同学的业绩主要是由客户的续费率以及流失率两方面决定,作为设计/调研先表明不会打扰到客户,而且这次测试的功能/模块有助于提高客户成功同学的续费率以及流失率两个方面,就能大小顾虑。

2. 了解敏感话题:这里还要通过客户成功同学来了解客户的敏感话题,比如:核心数据,收入等等直接不要提。

3. 注意点:一次性不要去太多人(消费除外),容易吓到别人。

邀约客户注意点:

1. 电话说明身份和来意,打消客户的顾虑获取信任

2. 尽可能避开营业高峰期,不影响客户的正常营业

3. 有时候也会被拒绝,但是也别死心,可以约下一次

实施中间:

邀约到位之后,实施主要是两个部分访谈技巧和人员配合。

访谈技巧:

一般的访谈技巧分为 3 种:开放式,半开放式,结构式。

(1)开放式:话题会比较分散,访谈起来会比较随意。举个例子:你觉得这个如何?

(2)结构式:准确询问,有一定的压迫感,更多的是针对用户行为可以询问,但是一旦涉及到开放式问题效果就不会太好。而且客户时间长了也会感觉不会舒服。

(3)半开放式:针对部分用户进行开放式询问,通常选择这个方式,既不让用户感到不舒服,又能达到调研的目的。一般是分成 4 步:

破冰:一般是自我介绍,情况说明,活络气氛,为接下来做准备

信息确认:了解用户的基本信息,产品体验历史和大概经历

逐步深入:开始深入较深度,详细的提问,了解用户使用体验的真实情况和体验细节

回顾与补充:结合前面访谈过程中的对话内容,可能要补充的问题,在这里可以跟用户展开开放式的对话,了解用户对产品的整体态度、建议,对竞品的态度等等。

人员配合:

访谈时候不光有访谈的技巧还有人员之间的配合也是比较关键的,主要是分为 5 类人员:

1. 主采访人员:主要是专业的调研人员负责询问,这里需要一定的专业的知识作为支撑。

2. 补充采访人员:询问的时候可能会漏掉问题,这时候补充人员就可以找时间进行补充询问。

3. 录音:这个跟客户之间要先进行说明以及确认才可以进行,不然会引起客户的反感。

4. 拍照:辅助人员一般会进行拍照留念,返回去跟团队进行分析,这里也要提前说明而不是直接进行拍照,这是对客户的一种尊重

5. 记录人员:这里注意点就是不要只会埋头记录,还要会抬头跟客户有眼神交流

访谈结束后要对客户进行感谢,并赠送一点的礼物。

访谈后期:

访谈结束回到公司的阶段,主要涉及到两个阶段:数据清洗,归纳复盘

数据清洗:

在访谈当中,其实不是所有的内容都对改版是有利用价值的(比如:简单的发泄情绪),需要把重复的问题和无关的问题清理出来,找到所有访谈中有价值的部分,为后面的设计进行有力的支撑。

归纳复盘:

归纳复盘阶段主要是把所有需求进行分类,然后根据类型进行任务区分以及任务排期,主要分成 5 个类型:

1. 新增功能:以前没有的功能,现在新增功能,具体的执行角色是产品经理。

2. 功能优化:单个功能的问题,不流畅等等产品带来的体验问题。具体执行人是研发人员。

3. 流程优化:单挑流程复杂,效率低等界面操作流程优化问题。具体执行人是设计师。

4. 视觉优化:颜色不清晰/图标表达不明/字号看不清等等示意和指引,信息标识问题。具体执行人是设计师。

5. 性能优化:卡/BUG/LOADING 等系统缓慢的问题。具体执行人是研发人员。


3. 用户找我们


我们除了可以去找客户,客户也回来找我们反映问题。这个方式其实是更加直接的。这个方式的三个阶段,分别是收集需求、问题分类、以及问题进行排期。

收集问题:

用户主动找我们有三种方式:用户需求方反馈池,客服记录,群聊记录。

1. 用户需求反馈池:销售/客服/客户成功将收集到的用户需求放入池子中,产品经理可以去池子里面筛选需求。

2. 客服记录:用户直接跟客服进行反馈,客服收集之后直接扔到需求反馈池里面。

3. 群聊记录:这里的群聊有“销售+客户成功+产研群”也有“客户成功+商家群”,定时会有值班的设计师/研发/产品经理进行值班,在内部我们叫做司机。有句风趣的,长期值班的我们会戏称对方“X 司机”。主要是将问题收集起来直接发给相关的人员,将问题及时解决。这里的回复方式比较讲究:回答尽可能给不确定的时间节点,打消用户的顾虑。

问题归类就跟复盘分析一样,重复的就不用再写一遍了。

如何解决用户反馈的问题?

需求分级:

我们内部专门有个区分的表格,其中横轴是重要与不重要,纵轴是成本低和成本高。我们会将所有需求开会讨论进行排布。

需求排序:

具体的需求我们分成 4 类:

1. 重要/成本低:一般是 KA 级别的客户才是重要的,成本计算要具体看,这个优先进入排期。

2. 重要/成本高:次优先级解决

3. 成本低/不重要:需要排期一次性解决

4. 不重要/成本高:有时间再解决,没时间再说,这里一般指的是 F 类客户个性化需求。


4. 成为用户


这个一般是土豪公司的选择,典型的像有赞,把实体店开在公司楼下。然后让产研人员定期去当店小二,在自己的系统当中去找出问题,早上去做店小二,下午就把 BUG 修改完。


总结


用户调研
是产品设计中很关键的一个环节,需要每个环节和每个人认真的去做。

作者:玩设计的鸡腿

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:















Bs界面设计之三:B端设计指南:快速了解B端产品的四种分类

博博

在我们日常的沟通当中,很多时候大家都会将自己的产品,以“B 端产品” 这样宽泛、含糊的方式进行阐述。但是 B 端产品由于服务对象不同、发展方向差异,也就导致产品本身就会有很多不同的分类。

今天就和大家分享 B 端产品的四种分类,以及对于设计师而言,这些分类会给我们设计落地、职业选择造成哪些影响?


垂直业务型产品


垂直业务型产品是针对企业垂直独立的业务需求所设计出来的 B 端产品。这类产品的出现,主要是围绕某一个复杂业务场景,去解决这个场景当中企业经营、管理的实际问题。

B端设计指南:快速了解B端产品的四种分类

比如以 CRM 为例:CRM 的全称客户关系管理系统

因为它是客户关系管理系统,而使用这类产品的主要角色就是销售员工,他们在进行商品售卖(特别是交易周期较长的商品时)需要销售人员通过 CRM 进行管理客户。

B端设计指南:快速了解B端产品的四种分类

而作为企业为什么要使用 CRM 产品?

其实是因为企业本身会有较强的管理需求,我希望能够通过 CRM 去监督每一个销售人员究竟是否认真完成工作,是否合理合规高效的与客户进行跟进沟通,因此可以通过 CRM 满足企业的管理需求。

但“销售”这类角色往往非常特殊,它存在于各行各业,比如楼下提供保险业务的销售人员、楼上在线培训的销售人员、自己公司 B 端产品本身的业务销售人员。

B端设计指南:快速了解B端产品的四种分类

而大多数 CRM 产品考虑的不是针对每一个行业单独去制作一款 CRM,因为销售团队在使用的过程当中,就会存在很多共性,产品便可以通过共性去抽象一个针对多行业的客户关系管理系统。

垂直业务型通常属于 B 端产品当中难度较高的产品类型,因为不同的业务,往往作为设计师需要了解的不是简单的这个页面长什么样,而是这个业务下,员工应该怎么用,怎么用才是更为合理的,而在很多招聘信息当中,就会发现企业更喜欢去招聘有过类似经验的设计师。

当然作为设计师,如果选择进入一家垂直业务性产品的企业,应该更多的去阅读行业相关的书籍,比如想要做好 CRM 产品,你必须了解什么样的销售人员,具备什么能力,才是一名资深的销售。通过了解行业人员的具体使用细则才能更好落地设计。

B端设计指南:快速了解B端产品的四种分类


行业属性型产品


行业属性型产品是针对某个行业定制的一系列,从上至下、从内到外的产品功能。这类产品主要是围绕一个具体的行业去构建整个产品的解决方案,目的是这个行业的商家,在使用了这款产品过后,就能够解决它目前经营过程当中的问题。

比如以在线教育行业为例,小鹅通应该就是在线教育行业的头部产品,去观察它的产品功能模块你会发现它会涵盖课程详情的内容管理、学员知识付费的交易管理、对产品进行营销的 Marketing、成功付费学员的客户关系管理,而这些功能模块在其他产品当中都可以单独拿出来,当做一个大型的 B 端系统的功能。

B端设计指南:快速了解B端产品的四种分类

行业属性型产品更多是以这个行业当中需要用到的产品出发,考虑就不再是单一的老师角色,而是一个课程培训行业所涉及到的所有工具,都希望能够通过行业属性型产品去解决。

在设计上,行业属性型产品不会过于复杂,功能都会相对比较简单,因为对于这些商家而言,不需要过于复杂的系统,只要你能够满足它的日常工作即可。

比如小鹅通,就是属于在线教育行业的产品,它与纷享销客当中的客户管理就会存在明显差异,无论是从功能还是界面的复杂程度来说,都完全不一样。可以看到筛选、视图、表格操作,等多方面的交互、产品规划,都会有明显的差异。

B端设计指南:快速了解B端产品的四种分类


协同办公型产品


协同办公型产品是通过软件实现工作协同、办公自动化,让企业高效运转的产品。

大多数情况下,企业内部的办公管理没有太多个性化诉求,因此会购买成熟的办公协同产品:比如飞书、企微、钉钉、泛微

B端设计指南:快速了解B端产品的四种分类

目前较为常见的协同办公产品包含:在线文档、OA 办公自动化、IM、在线会议、项目管理、研发管理等产品。

协同办公产品,在企业当中通常只会有一款软件。比如在一家企业 使用了企业微信,就等于它会去使用腾讯会议、腾讯文档、tapd 等多款关联性的产品。

在设计层面上,协同办公型产品是最接近 C 端产品的特性,因为他的使用人群很多,并且使用的角色也复杂多样,因此在产品设计上,对于 视觉交互往往有着更高的要求。


运营管理型产品


运营管理主要分为运营与管理两个系统。

运营是针对自己本身就有 一款产品 A(不限于 C 端 B 端) ,为了满足产品 A日常界面的展示与维护,需要专业的运营类后台系统所支撑。比如淘宝、抖音、小红书,这些产品,他们都会有自己的内容审核 、广告投放等多个后台系统。

B端设计指南:快速了解B端产品的四种分类

运营的主要目的就是审核,日常的数据资料维护,比如以 sspai 为例,在少数派的网站当中,有作者进行投稿,因此必然会存在对应的运营人员进行内容审核,同时少数派还会有会员、商品购买,因此能够推断出少数派的运营后台一定会包含类似成员管理、会员管理,订单管理等前台系统已经拥有的功能,来执行网站后续的运营工作。而管理则是针对系统当中的商户、用户、租户的“信息资料”进行管理。

主要会涉及到:

商户的门店信息:

饿了么的商家服务后台,商家可以进入到系统里面去配置门店的具体信息、售卖的菜品、对应的活动等等,而饿了么就是通过这样一个平台能够规范商家在系统当中的行为,能够对他们进行有效的监管。

B端设计指南:快速了解B端产品的四种分类

租户功能的开通:

租户主要针对的是 SaaS 产品,也就是购买 SaaS 产品的客户,而我作为产品提供方,想要对每一个客户进行管理,就会有一个租户平台进行管理。比如在我们一个租户管理系统当中,为了让客户成功对每位租户的信息进行快速操作,在设计上并没有优先去考虑设计原则,而更多是将操作外置,让信息快速传递的同时,能够快速操作。同时使用的客户因为都需要进行上岗培训,这样简单的操作也能让他们更容易理解。

用户信息的分析:

对所有在平台的数据进行分析管理。比如在 B 站当中,就会存在大量的用户,一旦有人发言出现问题,或者言语行为过于暴力,那一定会有系统来管理这样的特殊情况。而用户给到的数据我们还能够对其进行更为细致的分析。


最后


其实一款 B 端产品并不是固定在某一个类型当中,更多是随着市场的不断发展进行变化,因此要去理解的是这个软件背后的业务诉求、推导他们的功能模块,盯着一款产品“发呆”(其实就是去想想,多理解),当然这对于 B 端产品的类型,有什么自己的想法也可以在评论区发表自己的看法~

作者:CE青年

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:














大数据可视化界面设计之一:超全面的数据可视化设计指南:风格篇

博博

各位数据可视化设计师们大家好,鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方,阿勇决定花一些时间去详细剖析一下关于这方面的知识,全部都是多年工作经验所得,绝对有料。

整个合辑一共有 10 篇文章,分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章,详细的讲一讲可视化大屏设计的知识点。


风格篇主要包含:常用风格 > 风格解析 > 风格选择 > 风格应用。

本篇文章将会从风格分类入手,进行风格解析,总结可视化设计的风格,选择风格并应用到场景,教大家如何选择合适的风格应用到商业可视化项目中。

画面中的动效 GIF 图会比较大,请大家耐心等候加载~

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

总结了商业项目中遇到的一些可视化案例以及科幻可视化风格,大体的将其分为三个大类:传统风格、HUD 风格、FUI 风格。


传统酷炫风格


传统狭义上的数据可视化, 更多是纯图形去代表数据,通过图形去展示数据,直观的展示所需要表现的指标。数据可视化也有很多分类, 不过也许你也懒得了解了。

比如,网站后台分析,可以说是可视化分析报表类的,例如百度统计,谷歌统计等等;比如,面对 B 端后台的数据可视化,国内做的最好的无非就是 antdesign,element;我们此处说的是基于 G 端的数据可视化大屏,G 端数据可视化从本质上来说是注重直接解决问题,通过直观的展示数据图表去了解各个指标的详细数值;

也有甚者比较注重视觉效果,要酷炫,心理学家说, 人脑 70%的神经信号来自视觉, 我们的视觉系统最完善, 而不同的感官之间, 多少是可以转化的, 而且是每个人的天性。国内传统可视化对于此处的接受程度确实不一样。B 端和 G 端的用户,对于可视化风格的接受程度确实是不太一样的,B 端对于前沿技术以及可视化表现会有一定的接受能力,但是 G 端更多注重于界面酷炫,功能反而不是很重要了,这多少有点本末倒置的感觉。

超全面的数据可视化设计指南:风格篇

在传统可视化面前,页面的杂糅程度较强,彷佛是由一块块图表堆砌而成,比较注重色彩的运用,多色搭配,色彩一般具有特质。一般大多数可视化可以看到共同的点就是:配色/布局/构图,机械而又重复,彷佛一个流水线生产出来的。当然,现如今新基建乃是主流,人群对可视化大屏的认知和审美也在逐渐提升,设计师在以后的工作中还需要取长补短,多吸收一些好的东西去丰富我们具有中国特色的数据可视化大屏设计。


HUD 风格


平视显示器(Head Up Display),以下简称 HUD,是运用在航空器的飞行辅助仪器。平视的意思是指飞行员不需要低头就能够看到他需要要的重要资讯。平视显示器最早出现在军用飞机上,降低飞行员需要低头查看仪表的频率,避免注意力中断以及丧失对状态意识(Situation Awareness)的掌握。

因为 HUD 的方便性以及能够提高飞行安全,民航机也纷纷跟进安装,汽车也开始安装,在一些游戏用户界面,很多地方都会采用 HUD 的风格,比如射击类,格斗类,动作类游戏等等(赛博朋克,堡垒之夜,绝地求生)。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

在设计的细节当中使用大量的图形元素,并辅以一定的装饰元素,主要以点线为主装饰,排版版式参考价值较强。HUD 相比较于传统和 FUI 来说,更贴合我们的日常设计,对于图形的展示也更加的有意义,所以透析 HUD 风格,对于提升可视化设计水平有很大的帮助。


FUI 风格


相对于当前流行的扁平化设计,FUI 可谓是在 Ul 设计中独树一帜,设计风格十分鲜明,极具未来感和科技感。

FUI 是一个非常有趣的 Ul 设计领域,是我们在日常现实生活之中天法探索的用户界面设计方式。在我们的日常工作中,通常日常设计很难有机会为宇宙飞船、时间旅行设备,或者感知型人工智能和外星人使用的用户界面做设计。FUI 使设计师有机会去突破现有的用户体验和用户界面的限制,探索一个新的领域。通过虚幻界面设计我们可以大胆的设想以及寻找新的解决方案。例如我们可以大胆的设想 AR 技术的应用,地图可以采用全息投影技术、人与智能硬件的环境交互等等。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

虚幻界面设计甚至可以是新的发明,它们可以作为一种概念的验证它们可以启发我们,提出问题,探索什么可行,什么不可行。正如科幻小说可以激励人们登上月球或建造自动驾驶汽车一样,虚幻用户界面可以激励人们为未来创造技术。

FUI 的图形装饰元素可以说是极其丰富,形式感很强。在设计的细节当中使用大量的“异形”的图形元素,并辅以一定的装饰元素,但是一定程度上对于设计中繁琐的需求,需求层次上寻找设计灵感没有太多帮助。常用在科幻电影以及概念游戏等领域,落地较难。


升华:如何培养出自己的可视化设计风格


如何培养和完善自己的可视化设计风格呢?其实这个问题有点狭隘,不同客户不同使用场景我们可能风格都会不太一样,但是唯一我们不会变的是我们对于组件图表的理解,图表图形的展示形式。

  • 传统风格:多种色彩
  • FUI 风格:科技图形
  • HUD 风格:版式排版

超全面的数据可视化设计指南:风格篇

一个合格的可视化设计师,对于任何可以参考的页面,都可以迅速领略到可以应用的部分页面和展示形式,多吸收知识,提升自己,这就是取其精华,去其糟粕的正确解答吧!所以要将现有风格结合,完善设计理念,提升视觉技法,这才是当下比较重要的。

超全面的数据可视化设计指南:风格篇

最近由于工作中的一个项目,对自己充满了怀疑,究竟什么叫科技感?不同的应用场景,科技感是否还依旧有效?同展示条件下不同应用场景,又会有什么样的差异?究竟是什么样子的设计,才能被“甲方爸爸”认定为科技感十足,并且很酷炫呢?从酷炫科技感出发,总结了以下四个方面去解析科技感风格。

  • 科技感的界面有哪些特征?
  • 同展示条件下不同应用场景,又会有什么样的差异?
  • 三维的表现形式,是否真的跟科技感成正比?
  • 面对段落文本需求,列表需求等如何把页面做出科技感?

超全面的数据可视化设计指南:风格篇

1. 科技感的界面有哪些特征?

相信很多可视化设计师听到最多的一句话:要酷炫,要科技感!每每听到这句话我都会变得非常暴躁。究竟是酷炫科技感代表可视化?还是数据可视才是可视化的内核?每每遇到这种令人糟心的问题,我想的是如何通过自己的专业知识去解释,可是我发现根本解释不清楚,也无法令甲方客户信服,甚至和同为乙方的总包也无法达成统一战线。那么我们应该如何去做呢,又应该如何去解释科技感这个抽象的概念呢?

超全面的数据可视化设计指南:风格篇

配色

提到科技感色系一般我们想到的就是蓝色系(科技蓝),但是很多人可能走进了一个误区,科技感的专属色彩并不是只有蓝色,而且一些蓝色确实让我们有审美疲劳的感觉。如图,就是我们比较常见的传统可视化设计,一眼看去满屏都是蓝色,具有中国特色的蓝色科技感。正如所有人都公认的党建题材为红色加黄色,那么科技感真的只有蓝色专属吗?党建题材都是红色专属吗?

超全面的数据可视化设计指南:风格篇

由此可见,红色并不是党建题材的专属色彩,存在即合理,也并没有说党建可视化一定要做成红色的。制约的因素有很多:项目背景,项目需求,设计提案,专业认知等等,可视化大屏归根结底还是做的是服务设计,因此服务好客户,得到客户的认可,就能体现设计的价值。但是在设计稿中可以发现,界面运用到了一些党建色彩的元素,也是通过这种方式去展示,这也是设计师需要注意的一点。

  • 传统科技蓝风格可视化

超全面的数据可视化设计指南:风格篇

  • 其他科技蓝风格可视化

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

  • 橘色科技感风格可视化

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

由此我们可以推断,配色是塑造科技感界面的一个比较重要的因素。色彩的选择需要根据实际所运用到的场景,比如安全行业,蓝绿色会比较好一点;比如公安行业,传统蓝色就比较合适;比如卫星地图,用蓝色就不合适;根据不同的业务范畴以及不同的应用场景去确定配色,这才是我们要做的。

蓝色并不是科技感的专有属性,任何一种颜色都是可以塑造科技感的感觉的。比如适合用绿色的场景做的界面,没有做好看,那只能怪自己学艺不精,跟配色无关。不排斥蓝色,但是讨厌到处都是用蓝色,上来就是用蓝色。

背景

说到背景这是一个影响科技感非常重要的因素,一张超神比比皆是,一张超鬼也是随处可见,究竟什么样的背景才是一个优秀的可视化界面所具备的?不是画面发光,有闪光点,宇宙或者银河那种图;也不是科技点线,带渐变的线条(混合工具做出来的那种)看起来就特别复杂;也不是那种亮度超过画面任何一个元素的图。

超全面的数据可视化设计指南:风格篇

科技感的背景所起到的作用应该是衬托画面,而不是在画面中比较跳,抢视觉,一大坨发光或者复杂的图形,只会起到反作用。

一个好的背景一定是不影响视觉的同时,衬托画面和主视觉,如果整个页面分黑白灰三层,那么背景一定是黑的那一层,这样的画面效果才会好。

图形

图形应该是以上指标中,最令人可以接受对科技感风格诠释的一种,科技感的图形到底有哪些特征,我们又该如何去做呢?

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

通过以上案例我们可以发现,所谓图形表现科技感,最大的特征就是点线面应用的多元化,通过一种或者多种规律将点线面组合起来,线条粗细长短不一,点大小不等。在使用图形进行点缀搭配时,切不可过于花哨,从而抢了主要内容的风头。

不规则图形,点线装饰,色彩,外发光,都是图形诠释科技感的方式。

此处可能会出现一些三维样式的图形,特殊的视角以及不常见的设计都会增加科技感的元素,但是也不是所有的三维都可以比二维更有科技感的。我最近做的就是甲方客户一直觉得:三维元素太少了,科技感不够。我就纳闷了,到底什么才是科技感?难道科技感只能用三维的来表示了?只能说一定条件下,三维是优于二维展示的,但这也不是绝对的。如果你的场景主视觉本身就是二维范畴的,何必要要求组件三维展示。

下图的二维科技感表现上肯定是超过三维地球的,至少我是这么认为的。

超全面的数据可视化设计指南:风格篇

动效

动效应该是最能体现科技感的方式了,通过动态演示组件,通过动效展示界面,远远比静态页面要合理的多。动效主要是通过:位移、旋转、透明度(闪烁)、缩放等方式去制作,形成独特的动画节奏。

最常用的科技动画:粒子动画,线条动画,辉光,剪切路径,偏移字符等等。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

可以发现科技感动效一般都伴随着极快的闪烁动画,动画的节奏也是比较偏快,再通过出现动画,字符偏移,剪切路径等演示组件的形成过程。

2. 同展示条件下不同应用场景,会有怎样的差异?

可能大家没有遇到过这种情况,比如在三维建筑可视化中,科技感本身就依赖于场景的表现,但是不知道大家有没有试过,将三维建筑可视化换成二维 GIS 之后,我们如何去使画面表现的更具科技感呢?

图一,图二,图三分别就是替换不同的场景,那么我们来看看这些场景为什么不适合原本的之前的科技感风格呢,我们一起思考一下~

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

以上三张图可以看出,图一的飞机可视化是画面的原稿,后两张是在同一种设计面板,替换了不用的主视觉场景,由此可以看出不同主视觉场景可能对应不同的风格 UI 组件,没有通用的组件,如果想完美表达一些面板组件,那么需要取设计不同风格的主视觉场景才可以。

大家可能会觉得科技感只针对于一些特殊的场景,或者说是深色场景,比如一些实景地图和卫星地图又该如何去表现科技感的元素呢?那么如果是浅色可视化我们又该如何去做科技感呢?

科技感风格应用于不同的场景,那么表现科技感的方式也是有很大的不同的。

超全面的数据可视化设计指南:风格篇

3. 三维的表现形式,是否真的跟科技感提升成正比?

其实这本身就是一个伪命题,三维表现对画面的冲击力是非常强的,对于画面视觉效果的提升有很大的帮助。不过是否所有的三维就是最合适的呢,这个也确实有待商榷。不过能肯定的是,一定程度上,三维一定会比二维更加具有冲击,更加具有科技感。

首先必须要确定的是,此处三维一定是科技感点线组成或者说是线描类型的三维主体,而不是实景以及仿真的主体,当然并不是绝对的,此处针对大多数场景下。

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

可以通过以上图片看出,科技感一定伴随的是大量的点线装饰,画面主体一定是最突出的地方。而不是有时候遇到的是:GIS 地图就是很普通的样式,可编辑性不是很强,样式也比较老旧,对设计就会造成大量的困扰。在主视觉没有完美表现的时候,就不要强求说把两边去做好看,主视觉不好看,那么图表做的特别华丽也只是让主视觉更掉分。

其实最正确的表现就是二维表现加上三维场景展示,两者相辅相成,对于画面的展示才是最好的。通过下面这组案例可以发现,二维表现加上三维场景才是最优解。

超全面的数据可视化设计指南:风格篇

4. 面对段落文本列表需求时如何把页面做出科技感?

很多同学对于文字需求如何制作科技感有很多的疑问,通过最近的作图,总结出四种关于文字排版科技感的展示,总结起来其实就那么几点:装饰,图形,字体,版式,表现形式…

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

超全面的数据可视化设计指南:风格篇

其实对于数据可视化设计科技感的研究,不仅需要了解表现层,更需要上升到业务层。一些特定的图形或者装饰,对于画面的丰富程度一定是有帮助的。

讲了这么多,不知道对大家理解科技感是否有帮助,如何提升画面科技感,是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中,多多酷炫,多多科技感!!!

超全面的数据可视化设计指南:风格篇

1. 根据场景-了解展示需求

场景是什么?是人物、时间、地点三要素所组成的特定关系。在某某时间(when),某某地点(where),特定类型的用户(who),干了某某事情(what)。

因此我们要确定的是,根据这四个“W”去确定整体业务框架的基础构成,这对于设计风格的初步意向确认有着很积极的意义。

超全面的数据可视化设计指南:风格篇

  • who:王局长
  • when:领导人会议时
  • where:公安局
  • what:新基建建设 数字化转型事项

在领导人会试上,公安局王局长提议通过了关于新基建,数字化转型的各种措施。面对这一场景,有以下几个问题。受众是谁?需要干什么事情?谁去干?数字化转型怎么做?怎么实现?需要用到的技术?展示风格?重功能?还是重展示?

在有了这些的前提下,对于我们设计风格的选择就有了很强的指导意义,比如王局长比较喜欢多色搭配,科技感强的风格,主要为了配合展示汇报,那么就可以通过这一些需求,初步制定风格为效果酷炫的展示类大屏,但是主视觉的展示形式还是要根据其他的具体情况去进一步确认。

2. 根据含义-确立设计方向

在面对一些特有的项目时,一般客户会给出一些参考术语:“3 个一带”,“2 个方针”,“八大成果”“三山,两水,百林,千田”……

面对这种问题,能做的就是理解其包含的真实意义,究竟需要展示哪方面的,了解清楚项目的背景需求,结合客户所说的一些关键字段,剖析以上的内容可以发现,客户通过一些方针和方法,对“山水林田”进行治理,取得了一些阶段性成果。

超全面的数据可视化设计指南:风格篇

因此展示的内容可以确定为智慧治理,或者智慧生态方向的,然后就可以根据项目背景的内容去选择可以应用的具体的一些方案了。

3. 根据需求-明确设计内容

因在到了需求分析的阶段,可以根据客户提供的大量的资料和业务需求,去明确的设计方向,究竟是需要展示哪些内容?可以提供的数据有哪些?展示条件(硬件设施)是否具备?想要的效果有哪些?

超全面的数据可视化设计指南:风格篇

比如客户需要查看到山水林田的各个改进措施的效果,以及改进前后的效果对比。说到这单纯的二维 GIS 和影像已经不太好满足了,那么可以将场景风格定位到三维展示,需要实际 1:1 建模,至于是通过 WEBGL,UE,UNITY 就看各自的团队擅长的方向了。

场景大体风格确定,那么展示面板需求根据场景去搭建就可以了,这样一个完整的风格选择过程就算初步走通了,具体的验证环节,可以在一次次会议中再去进行交流和修改即可。

超全面的数据可视化设计指南:风格篇

二维 GIS(深浅)、卫星影像

  • 优点

展示容易,风格切换皮肤多,可编辑性高,开发难度低,地图资源较多,适合快速搭建可视化大屏模版,开 源内容较多,前端开发直接调用样式即可。

  • 缺点

展示形式较普通,地图风格样式不出彩,设计效果也会打很多折扣,很难与同行拉开差距。

  • 难点

开发过程中可能需要基于高德 API 以及一些平台,对封装地图进行二次开发,没有 GIS 开发经验的前端,会比较困难。

  • 网址

https://lbs.amap.com/product/mapstyle#/ Mapbox,高德 API,百度 API,超图,天地图等等。

以高德 API 为例

超全面的数据可视化设计指南:风格篇

矢量地图、省市区块

  • 优点

展示灵活,可下载 svg 矢量区块,并可下载 json 文件直接交付开发,可下钻到县级,可编辑性高,一般会结合二维 GIS 来展示,有插件可以直接绘制全国地图。

  • 缺点

不够立体,可选样式比较少,画面主视觉容易空洞导致画面效果不强。

  • 难点

开发对于设计图的一些效果还原比较困难,例如发光,渐变等等。只能做一些比较基础属性的修改,对于效果还原可能达不到 80%以上。

  • 网址

http://datav.aliyun.com/tools/atlas/

以 DATAV 地图下载器为例

超全面的数据可视化设计指南:风格篇

矢量地图模型、省市区块

  • 优点

展示效果好,三维场景,有立体效果,材质贴图不同效果会完全不一样,可编辑性较强,相比较二维更推荐这种表现形式。

  • 缺点

三维范畴,不会三维知识的小伙伴会比较难,此处会涉及到三维软件合并挤压,展 UV,漫射贴图,QGIS 制作高度贴图,PS 制作法线贴图等等知识点。

  • 难点

对于不懂三维的小伙伴比较困难,涉及知识点较多,容易一知半解。

  • 教程

https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA (原作者已授权)

3D 地图建模及贴图的制作获取方法

超全面的数据可视化设计指南:风格篇

三维模型、城市建模

  • 优点

展示形式新颖,展示效果非常好,三维表现往往让人耳目一新,对于可视化的展示可以说是所见即所得,深得客户喜爱。

  • 缺点

开发难度高,专业性人才比较少,懂三维的设计也是非常的少,对于三维知识以及引擎开发知识需要比较熟悉才行。

  • 难点

人才稀缺,入门难,做好更难,教程自学难度有点大,例如 cityengine 程序化建模,houdini 程序化建模等等。

  • 教程

https://space.bilibili.com/21247145?from=search&seid=10582171815506234319

cityengine 程序化建模

超全面的数据可视化设计指南:风格篇

知识图谱、数据中台等

  • 优点

主视觉效果强,特殊场景的处理能够很完美的讲清逻辑,对于图形化的理解有很强的意义。

  • 缺点

逻辑复杂,难懂,比较抽象,专业难度高,对业务理解能力需要很强。

  • 难点

逻辑处理比较难,设计效果比较难以想象,设计容易偏离主题,比如数据中台,是一个非常虚幻的东西,很难讲清楚处理逻辑和过程。

  • 网址

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

以知识图谱为例

超全面的数据可视化设计指南:风格篇


知识点总结


可视化风格三大分类以及对于图形的应用(传统、HUD、FUI);

如何培养自己的数据可视化设计风格(色彩+图形+板式);

影响科技感风格的四大影响因素(配色,图形,背景,动效);

设计风格的选择以及确定思路(根据场景、含义、需求);

可视化风格的应用以及拓展(各种主视觉的应用优缺难点)。

超全面的数据可视化设计指南:风格篇

讲了这么多,不知道对大家理解科技感是否有帮助,如何提升画面科技感,是我们做为数据可视化设计必定会面临的一大难题。希望大家在以后的工作或者项目中,多多酷炫,多多科技感!!!不知道大家有没有一种错觉,突然有一段时间,某个时候发现自己突然不会做设计了,啥也想不明白了,莫名的有点浮躁,做什么都不能专心。其实很简单,总的来说就是,你即将突破现有的设计水准,如果能想明白,解决掉问题,你的审美以及设计水平都会有很大的进步。这就是别人口中的,突然就会了,知道怎么做了,其实无非就是积累够了,需要升入下一个等级了~

作者:生活因你而火热

转载请注明:优设网

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

魏华的微信.png

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

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

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设

ui设计,界

计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇












大数据可视化界面设计之二:可能是最详细的大屏数据可视化设计指南!

博博

@UX-BOY :可能是大屏数据可视化设计介绍最详尽的一篇文章,帮你尽量躲开大屏数据可视化路上那些坑。

1.jpg

 

文章目录

 
  1. 基础概念
  2. 大屏数据可视化设计原则
  3. 大屏可视化设计流程
  4. 大屏设计的注意事项
  5. Q&A
  6. 总结

 

基础概念


1. 什么是数据可视化

把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化,数据可视化是为了更形象地表达数据内在的信息和规律,促进数据信息的传播和应用。

在当前新技术支持下,数据可视化除了「可视」,还有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射,是抽象数据的具象表达。

2.jpg

3.gif

△ 数据可视化作品《 launchit 》,作者:Shane Mielke

作者写了本书,地图上显示了世界各地读者的分布情况及对应人数。

4.jpg

△ 数据可视化作品《 world-drawn-by-travelers 》,作者:TripHappy

国家之间相互连通的旅游路线,颜色越相近的国家,表明两个国家的人们互动越频繁。

2. 什么是大屏数据可视化

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。

「大面积、炫酷动效、丰富色彩」,大屏易在观感上给人留下震撼印象,便于营造某些独特氛围、打造仪式感。电商双11时大屏利用此特点打造了热烈、狂欢的节日氛围,原本看不见的数据可视化后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。

5.gif

利用面积大、可展示信息多的特点,通过关键信息大屏共享的方式可方便团队讨论和决策,故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。

数据分析类:

6.jpg

△ 图片来源:必应,图片作者:帆软软件有限公司

 

大屏数据可视化设计原则


大屏数据可视化设计原则:设计服务需求、先总览后细节。

1. 设计服务需求

大屏设计要避免为了展示而展示,排版布局、图表选用等应服务于业务,所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢?业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标,是大屏数据可视化的价值所在。

2. 先总览后细节

大屏因为大,承载数据多,为了避免观者迷失,大屏信息呈现要有焦点、有主次。可以通过对比,先把核心数据抛给用户,待用户理解大屏主要内容与展示逻辑后,再逐级浏览二三级内容。部分细节数据可暂时隐藏,用户需要时可通过鼠标点击等交互方式唤起。

 

大屏可视化设计流程


规范的流程是好结果的保证。找到一个可参考的流程,然后步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。

7.jpg

1. 根据业务场景抽取关键指标

关键指标是一些概括性词语,是对一组或者一系列数据的统称。一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例,这里的关键指标有:企业停车时长、企业违停量、热点违停区域、车辆入栏率等。

确定关键指标后,根据业务需求拟定各个指标展示的优先级(主、次、辅)。

8.jpg

2. 确立指标分析维度

「横看成岭侧成峰」。同一个指标的数据,从不同维度分析就有不同结果。很多小伙伴做完可视化设计,发现可视化图形并没有准确表达自己的意图,也没能向观者传达出应有的信息,可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。

9.jpg

上图向大家展示了数据分析常用的4个维度,我们在选定指标后,就需要跟项目组其他小伙伴讨论:我们的各个指标主要想给大家展示什么,更进一步的讲,是我们想通过可视化表达什么样的规律和信息。而上图,可以引导我们从「联系、分布、比较、构成」四个维度更有逻辑的思考这个问题。

  • 联系:数据之间的相关性。
  • 分布:指标里的数据主要集中在什么范围、表现出怎样的规律。
  • 比较:数据之间存在何种差异、差异主要体现在哪些方面。
  • 构成:指标里的数据都由哪几部分组成、每部分占比如何。

当然,上图例举的示例图表都比较传统,在大屏数据可视化中常还有另一类地理信息(常以2/3D地图、地球呈现)出现。上图虽未包含这类图形,但它提供给我们的确定数据分析维度的思路和方法是相通的,可借鉴。

3. 选定可视化图表类型

当确定好分析维度后,事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。

选定图表注意事项:易理解、可实现。

易理解

可视化设计要考虑大屏最终用户,可视化结果应该是一看就懂,不需要思考和过度理解,因而选定图表时要理性,避免为了视觉上的效果而选择一些对用户不太友好的图形。

10.jpg

可实现

我们需要了解现有数据的信息、规模、特征、联系等,然后评估数据是否能够支撑相应的可视化表现。

我们设计的图形图表,要开发能够实现。实际工作中,一些可视化效果开发用代码写很容易实现,效果也不错,但这些效果设计师用 Ps / Ai / Ae 这些工具模拟时会发现比较困难;同样的,某些效果设计师用设计工具可以轻易实现,但开发要用代码落地却非常困难,所以大屏设计中跟开发常沟通非常重要,我们需要明确哪些地方设计师可以尽情发挥,哪些地方需要谨慎设计。一个项目总有周期与预算限制,不会无限期的修改迭代,所以设计师在这里需要抓住重点,有取舍,不钻牛角尖、不死磕不放。

11.jpg

4. 了解物理大屏,确定设计稿尺寸

多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时,就会有多个设计稿,此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率。

12.jpg

一般情况下设计稿的分辨率就是电脑的分辨率,当有多个信号源时,有时会通过显卡自定义电脑屏幕分辨率,从而使电脑显示分辨率不等于其物理分辨率,此时,对应设计稿的分辨率也就变成了设置后的分辨率。此外,当被投电脑分辨率长宽比与大屏物理长宽比不一致时(单信号源),也会对被投电脑屏幕分辨率做自定义调整,这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。

5. 页面布局、划分

尺寸确立后,接下来要对设计稿进行布局和页面的划分。这里的划分,主要根据我们之前定好的业务指标进行,核心业务指标安排在中间位置、占较大面积;其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近,把图表类型相近的指标放一起,这样能减少观者认知上的负担并提高信息传递的效率。

13.jpg

6. 定义设计风格

很多小伙伴也许没接触过大屏设计工作,但大多数人都应该有 APP 或者 Web 风格定义的经验。我们在定义一款 APP 或者 Web 页面设计风格时常用的方法是什么呢?情绪板。

大屏虽酷炫,但实际上也是运行在浏览器里的 Web 页面,所以大屏设计风格定义方法也同样可以用情绪板来做,这种方法也是目前比较科学高效的风格定义手段。

14.jpg

上图提供了情绪板应用的脑图,具体操作细节不做介绍,不太了解的小伙伴可以自己找找资料。

编者按:一篇好文帮你扫盲,运用情绪板搞定设计→《该怎么运用情绪板,才能让设计作品更有说服力?》

情绪板的一套流程下来,我们定义的风格基本是科学准确的,可以指导我们执行设计。如果是给甲方做大屏,这个流程也可以让我们提出的方案更有说服力。

7. 可视化设计

根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来说大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现,而地理类信息点一般可视化效果酷炫,但是开发相对困难,需要设计师跟开发多沟通。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点,所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求,硬件配置不够的情况下可能出现卡顿甚至崩溃的情况,所以这点也是需要提前沟通评估的。

15.gif

8. 样图沟通确认

这里的沟通分三个层面:设计师对内沟通、设计师对外沟通、设计师与大屏的「沟通」。

16.jpg

样图沟通环节,最初的样图不需要十分精致,我们可以把它理解为一个「低保真」原型,然后通过不断沟通修改,让它逐步完善精致起来,也就是小步快跑,避免那种一下子走到终点,然后又大修大改的情况。

因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点,所以这一步我们需要用尽可能简单的方法 ,把之前几步的成果在页面上快速体现出来,然后根据样图效果尝试确定五方面内容:

  • 之前确立的布局在放入设计内容后是否依然合适;
  • 确立的图表类型带入数据后是否仍然客观准确;
  • 根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感受;
  • 已有的样式、数据内容、动效等在开发实现方面是否存在问题;
  • 大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象。

跟大屏「沟通」是比较重要也是个特殊的环节,这也是我觉得大屏设计跟其它设计不一样的地方,大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境,这里的很多问题只有设计稿投到大屏上才能够被发现,所以这一步在样图沟通确认环节非常重要,有时候需要开发出 demo,反复测试多次。

9. 页面定稿、开发

事实上页面开发阶段并不是到了这一步才进行,这里说的页面开发仅指前端样式的实现,实际上后台数据准备工作在定义好分析指标后就已经开始进行了,而我们当前的工作是把数据接入到前端,然后用设计的样式呈现出来。

17.jpg

切图与标注

由于大屏实际就是一个 web 页面,所以开发阶段的切图与标注是少不了的。

切图:哪些元素需要切图,怎么切?

一般开发用代码写不出的样式或动效,都需要设计师切图作支持:比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。

标注:Web页面用什么插件做标注这个大家都很熟悉,我就不多说了。需要注意的是,如果大屏页面需要在不同比例的终端展示,那么此时的标注与开发可以使用 rem 作为基本单位来实现,这样实现的大屏页面在后期会有更好的扩展性与适应性。

10. 整体细节调优与测试

这部分是指页面开发完成后,将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。

视觉方面的测试(有点像 APP 的 UI走查):关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

性能与数据方面的测试:图形图表动画是否流畅、数据加载、刷新有无异常;页面长时间展示是否存在崩溃、卡死等情况;后台控制系统能否正常切换前端页面显示。

 

大屏设计的注意事项


1. 字体使用

字体优先使用系统默认字体,需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

18.jpg

如果页面是云端部署,需要嵌入字体包时,我们可以使用 FontCreator 这类的软件把那些用不到的字符从字体包中删掉,然后重新打包上传,减小字体包大小,可以优化页面加载体验,避免在替换默认字体的过程中出现页面文字跳动等现象。(一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符,对于大屏这个明确的场景,我们可以删掉其它使用不到的字符,仅保留中文、拼音和数字)

19.jpg

2. 颜色搭配

色彩明度与饱和度差异显著、对比鲜明, 尽量避免使用邻近色配色。

20.jpg

使用深色暗色背景:深色暗色背景可减少拼缝带来的不适感。由于背景面积大,使用暗色背景还能够减少屏幕色差对整体表现的影响;同时暗色背景更能聚焦视觉,也方便突出内容,做出一些流光、粒子等酷炫的效果。

渐变色慎重使用:大屏普遍色域有偏差,显示偏色,因而使用渐变色需要根据大屏反馈确定是否调整,纯色最佳。

3. 页面布局

主次分明、条理清晰、注意留白,合理利用大屏上各个小的显示单元,并尽量避免关键数据被拼缝分割。

21.jpg

 

Q&A


1. 设计稿投到大屏上显示效果不佳怎么办?

大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下,我们应该在设计开始前,就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品,然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差,这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现,如果不可以,那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面,样图沟通环节及时测试也很重要。

2. 大屏设计定稿后,切图切几倍图?

由于是将我们电脑屏幕投射到了大屏,大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率,正常切1倍图就可以了。

3. 1920*1080的设计稿,投到9000*4320的屏幕上,文字图片会虚么?

看情况,视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流一下。

大屏逻辑分辨率(设计稿尺寸)、显卡输出分辨率、视频矩阵切换器( DVI )支持分辨率、大屏实际物理分辨率。

一般后两个是没问题的,大屏跟矩阵切换器是由大屏厂商提供,一般刚好配套大屏。容易出问题的是显卡输出分辨率,我们电脑屏幕分辨率并不是最终显卡传递到 DVI 接口的分辨率,传递到 DVI 接口的分辨率是电脑显卡所能输出的最大分辨率(部分电脑可设置或自定义输出分辨率)。输出分辨率等于 DVI 支持分辨率时显示效果最佳。输出分辨率低于 DVI 支持分辨率,DVI 会将信号放大后传递到大屏,放大的过程中就有图像信息丢失,虽然此过程中有各种算法支持去保证图像尽可能清晰,但算法再好,跟真实图形还是有差距的。此外,多信号源投射效果优于单个信号源投射。对于现场直播数据大屏,一般至少有两个信号源,一个投屏,另一个也投屏但是处于备用状态。

离大屏的距离也影响观感,一般离得近,颗粒感明显,距离稍远,会显的较为清晰。

4. 设计稿完成开发后,发现在大屏上页面有被拉伸或者压缩的情况,怎么补救?

一般来讲,开发只需要对设计图做还原即可。但特殊情况下,比如显示器扩展不正确导致页面被拉伸或压缩,这时就需做处理:我们可以先得到被拉伸/压缩的比例,然后对整体视图做压缩/拉伸处理,再由其拉伸/压缩,这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外,了解被投电脑硬件特点,有的电脑可以通过自定义分辨率解决这部分问题。

5. 除自行开发可视化大屏外,还可以通过哪些第三方服务来快速实现?

阿里云 DataV、腾讯云图、百度 Sugar 等。

6. 数据可视化的图表样式可以在哪些地方找到参考?

图表部分的二个库是我们设计师可以打开浏览查看的,这里面所有的图表样式都是基于代码实现的,可以作为我们设计图表的参考,也可以让开发拿代码去用,或者在这些图表的基础上修改。

工具类的需要有一定的代码基础,里面同样有丰富的图表,所以跟开发的沟通也很重要,因为他们可能会了解多一些更新的前沿的图表形式,是我们设计师不知道的,所以彼此多沟通交流实在太重要了。

22.jpg

 

总结


数据可视化是一门庞大系统的科学,本文所有讨论仅针对大屏数据可视化这一特定领域,管中窥豹,如有遗漏或不足之处欢迎大家讨论交流。

作者:UXBoy

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

 

大数据可视化界面设计之十:数据可视化必修课:表格篇

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

 

大数据可视化界面设计之三:可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

博博

可视化大屏 UI


上文说到可视化设计是一个综合类交叉学科,同样在大屏 UI 设计中也是一个相对复杂的流程,我们需要对大屏的布局、风格、主视觉、信息图表、字体、规范、动效等方面综合考虑,推导设计方案。

设计前:一定要对用户需求充分分析和理解,要知道大屏的展示场景及设计分辨率,大屏的拼接方法都要有一定的了解,最后是跟开发沟通下实现的工具与方法。

设计中:构思布局,可以在纸上简单画一下。根据业务需求定义设计关键词进行设计的提炼与分析,方便自己找参考。颜色上背景深色为主,为了更好地聚焦,数据可以采用亮色,有一定的对比关系,便于业务信息传达。字体上可以采用系统默认字体,数字采用特殊字体包的形式(这块根据实际需求,切记不要照搬)。图表选择恰当的展示形式,同时保证视觉上的统一(分清页面的主次关系,图表的展示切莫设计过度,容易造成抢主体)

设计后:再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确,与技术同步沟通下技术的实现性。最后开发完成后,要拿演示 demo 去现场测试,看下整体展示效果,测试输出是否有问题,有无拉伸问题,拼接缝与内容有无穿插,及时与开发进行页面的校验工作,最终才算是设计完成。

下面针对可视化设计中布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向细节点的拆解。

1. 布局

通过硬件设备信息可以得到可视化的设计尺寸,基于尺寸新建设计画布后,第一件事就需考虑页面的整体布局。可视化大屏设计从信息布局到数据表达,都需要设计师对业务深入了解后才能用数据助力业务决策。

常见的大屏布局:居中结构、左右结构两种常见的布局形式以常规的 16:9 模板为例,下面列举的一些常见的布局形式,供大家参考。

居中结构

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

异形超宽拼接屏幕。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

左右结构

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

布局的原则一定要主次分明,根据业务需求抽取关键性的指标,提取主要信息。可以在纸上大概画一下,然后在软件里具体细化布局。避免次要信息的面积过大,喧宾夺主,影响整体的视觉效果。

2. 风格

提起可视化大屏,大家都会联想到:科技感、FUI、HUD 这些关键词,可以说可视化大屏跟科技、数据这两词是强关联的,风格上也基本是这一类方向。

定义设计风格:一般会基于业务需求场景去定义几个设计关键词,根据关键词去找一些参考图,推导出贴合业务的设计风格。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

我们可以通过调整颜色、装饰细节、主视觉、字体等一些细节点控制区分不同的设计风。下面拿图表举例,我们在做设计的时候,只需调整卡片和标题的装饰,就能够展现出不同的设计风格。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

3. 主视觉

主视觉部分大致分为:地球、地图、智慧城市、行业类业务展示等。目前比较容易出效果的都会采用三维模型的处理方式。

地球:粒子地球、地图贴图、地球模型。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

地图:第三方在线地图(百度、高德、腾讯、谷歌)基于地图开放平台进行个性化配置。或者通过地理位置数据建模:如全国和各个省份的轮廓模型。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

智慧城市:GIS 参数化生成简模和重点楼宇定制化建模。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

行业类:多数为定制化建模。如工业类、医疗类、能源类、园区、学校、港口、工厂、仓储库房、零售、工程、安防、国防军工等。

以下图片源于 DATAV

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

主视觉是可视化设计中的一大难点,不光是设计落地的时候也会有需要注意的点,这里建议大家在做之前一定要充分跟开发沟通,确认好技术选型,方便后期输出跟开发更加高效的对接。

4. 信息图表

图表的设计原则是易理解、可实现,能够准确表达数据意图,给用户传达明确信息。


以下图片源于网络,如侵删

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

上图通过使用场景可分为比较、联系、构成、分布四个维度解释图表的不同属性类别。在做可视化大屏设计的时候可以参照上图,选择对应的数据图表。

比较

两个及以上变量数据,一是基于分类不同的对比,二是基于时间维度的对比。常见的图表:条形图、柱状图、雷达图、玫瑰图、桑基图等

联系

两个及以上数据之间的相关性,随时间变化比较关联。常见的图表:散点图、气泡图、多级饼图、热力图、力导向图等。

构成

指标里的数据都由哪几部分组成、每部分占比如何。常见的图表:饼图、环形图、堆积面积图、堆积柱状图、瀑布图等。

分布

指标里的数据主要集中在什么范围、表现出怎样的规律,想表达两个数据点之间数量的演变过程。常见的图表:阶梯折线图、面积图、直方图等。

基于图表的类型可分为:饼图、线形图、柱状图、混合图、面积图、散点图、极坐标图、关系图、树图、桑基图、漏斗图、热力图、还有其他图表类型等。

饼图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

适合展示分类的占比情况,不适合展示分类过多(超过 9 条数据)或者差别不明显的场景。

线形图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化,它的特点是反映事物随时间或有序类别而变化的趋势。

当水平轴的数据类型为无序的分类或者垂直轴的数据类型为连续时间时,不适合使用折线图。同样,当折线的条数过多时不建议将多条线绘制在一张图上。

柱状图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

柱状图提供了分类数据的可视化展示,基于不同的数据类型有以上几种不同的形式。分类数据是将数据分组成离散的组,例如月份、年龄组、鞋码和动物。这些类别通常是定性的。图表上的条形图可以按任何顺序排列。

混合图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

折线图和堆叠柱状图的组合图表。同时显示两个坐标轴,用于展示两种不同类型的数据。

适用于带有细分分类的累计数据大小以及与之相关的趋势数据,例如在过去十年全国三大产业的具体产值,以及 GDP 增长率。

面积图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

面积图强调数量随时间而变化的程度,也可用于引起人们对总值趋势的注意。适合于比较多个变量随时间间隔变化趋势。

散点图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

散点图是一种使用直角坐标来显示一组数据的两个变量值的图表。数据显示为一个点的集合,每个点都有一个变量的值决定水平轴上的位置,另一个变量的值决定垂直轴上的位置。

通常用于显示和比较数值,不光可以显示趋势,还能显示数据集群的形状,以及在数据云团中各数据点的关系。

极坐标图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

基于直角坐标系的径向变形(相当于把直角坐标卷起来)。适用于显示三个或更多的维度的变量对比或者部分与整体的趋势。

关系图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

可以展示数据的占比情况,还能厘清多级数据之间的关系。 通常用于可视化大量元素之间的复杂关系。

树图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

树图是一种流行的利用包含关系表达层次化数据的可视化方法,是研究多元目标问题的一般工具。 适合展示数据之间的层级关系,适合 6 条以上数据。

桑基图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

一种特定类型的流程图,用于描述一组值到另一组值的流向,图中延伸的分支的宽度对应数据流量的大小。用以展示数据的层级关系。常用于可视化能源或成本转移,也帮助我们确定各部分流量在总体中的大概占比情况。

漏斗图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

一种直观表现业务流程中转化情况的分析工具,总是开始于一个 100%的数量,结束于一个较小的数量。通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节,进而做出决策。 适用于业务流程比较规范、周期长、环节多的流程分析,比如流程流量分析、转化率分析。

热力图

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

将数值大小通过色块有序且紧凑地在坐标系中呈现。 适合呈现多组数据连续的数值分布,适合做数据的预测统计,可以在图片上直接展示热度。例如展示城市在不同时间段打车热度情况。

其他图表

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

词云图适用于对比大量文本或绘制特定形状的词云。水球图适用于多个百分百数据呈现。子弹图用于表达多项同类数据的对比,可以表达一项数据与不同目标的校对结果。 维诺图适用于层级数据比较大小,同时能看到各层级之间的情况。金字塔图适合展示分类的占比情况,不适合展示分类过多或者差别不明显的场景。

5. 字体

文字是可视化展示中最重要的构成要素之一,可视化大屏设计中字体的运用其实原理跟网页 app 的逻辑基本一致。在字体选择上会基于业务需求选择对应的字体,与设计风格相结合。这里要注意的是字体有无衬线、字重、字距等。

大屏设计中,中文字体一般会采用浏览器默认字体(微软雅黑、思源黑体、苹方等)页面中标题会采用特殊字体处理,常用的字体有:优设标题黑、时尚中黑简体、方正正中黑体等。英文数字字体推荐:Din、Ds-Digtal、Bebas、Acens、DS-DIGIB、Roboto 等。


6. 规范

建立规范的主要目的是:保证设计的一致性、提高开发效率和还原度、方便迭代 ,辅助设计和开发更好地完成设计的协作。

可视化设计中规范一般会分为:色彩、文字、图表、标题控件等,跟网页端规范同理,这里就不一一赘述了。

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

7. 动效

数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效能增加观感体验,凸显关键产品内容、强调功能信息关联,帮助用户理解产品、情感化互动。但过分的动效极其容易喧宾夺主,影响用户阅读,反而弱化了数据的展示。

动效的设计原则

可视化大屏不会做?这篇 UI 设计指南总结了7个重要知识点!

动效应优先满足核心内容、故事线。常见的大屏动效 – 展示类,用于突出产品核心功能和特点。界面信息按照一定的规律呈现,引导用户的视觉流向。

好的大屏设计应该是数据展示模块最好动效不宜过多,要有一定的主次关系变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效要结合数据变化,考虑极端情况的展示效果,最终输出一套完整的动效方案。


结语


以上通过布局、风格、主视觉、信息图表、字体、规范、动效等 7 个方向总结的基本知识和事项,能帮助我们快速进入大屏设计及避免一些坑。由于篇幅原因字体、规范、动效没有详细拆解说明,后面会陆续更新相关文章,感谢大家支持。可视化体验远远不止这些。欢迎大家提出更多意见和建议,我们一起前行。

作者:Mr.小六

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇













大数据可视化界面设计之四:可视化大屏设计快速入门指南,看这篇就够了!

博博


前言


随着大数据产业的蓬勃发展,很多企业都开始应用数据可视化。智慧城市、智慧交通、智慧医疗等等越来越多的行业都有了可视化的需求,可视化行业也迎来了迅速发展的成长期。

可视化大屏设计快速入门指南,看这篇就够了!


数据可视化释义


数据可视化就是把一些相对复杂、抽象的、我们看不懂的数据通过“可视化”的方式,运用图形化的手段清晰有效地将数据信息进行解读和传达,帮助我们发现其中的规律和特征,挖掘数据背后的价值。


可视化大屏


可视化大屏
是以大屏为主要展示载体的数据可视化设计。它的应用场景非广泛如 ToC、ToB、ToG 等都会存在。一般应用在会议展厅、园区管理、城市交通调度中心、公安指挥中心、企业生产监控等重要场所。

可视化用户群体相对比较明确,主要是单位领导及一些一线人员。通过交互式实时数据监测,洞悉运营增长,助力智能高效决策。

可视化大屏设计快速入门指南,看这篇就够了!

伴随行业的发展,行业内也对可视化进行了一些行业细分。常见的一些类别:行业可视化(如交通、医疗、金融、军警部队、农业、工厂、化工等)、智能终端系统类(定制化终端产品)、演示 demo(数据演示、展览展示、数据看板 )、可视化分析系统(通过对数据的分析监控辅助决策,如交通预警平台、天气监控平台等)。


市场现状


平台化

由于近几年可视化的需求越来越大,一般的公司都会有一些可视化的需求,各大厂商也逐渐整合可视化资源,实现平台化、低代码化。满足了大多数公司的可视化需求。国内比较知名的可视化厂商:光启元(Ray design)、Data V、优诺科技(森工厂)、袋鼠云(Easy V)、数字冰雹、图扑、等等。他们将一些可视化效果组件化集成在平台,拖拖拽拽就能实现一些不错的效果,满足了一些公司的展示需求。

可视化大屏设计快速入门指南,看这篇就够了!

实现方式

目前可视化框架是大多数都是基于 Web 端的(基于 web 开发或者 web 封装)而非 PC 端。常见的可视化实现方式是二维加三维相结合,比如大屏两侧的可视化图表可以用 Echarts 这种第三方的轻量化图表控件或者 Vue 去实现。

主视觉部分会基于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具去实现。满足三维炫酷的效果需求。使整个可视化大屏效果有了质的提升。这些三维工具的优势是三维粒子效果能很好的支持,且效果非常炫酷。多平台支持,可通过 webgl 封装在浏览器里打开使用。缺点就是维护成本较高,需要相关的专业人员去开发维护,有一定的使用门槛。一般公司如果不是专门做可视化相关业务不会配备相关专业人员。

可视化大屏设计快速入门指南,看这篇就够了!

说下几种工具的优缺点:

Ventuz 国内用的相对较少,相关专业人员也较少。虚幻引擎效果上是比较好的,但是对 WebGL 参数支持的较少。Threejs 虽然支持三维但是没有 Unity 那么强大的编辑器,一些复杂的效果实现不了。相对于前者 Unity 来说成熟一些,也是目前市场上用的比较多的,不过 three 对于前端开发同学更友好一些,容易上手,学习成本相对低一些。


可视化设计师应了解的知识


可视化设计是相对新兴的行业,就目前市场来看也是当今比较火的行业。作为一名设计师,不仅仅是只做完效果图就能行的,他是一个结合硬件设备、UI 设计、三维建模、三维渲染、动态设计、数据可视化、图形技术、GIS 数据、渲染引擎、交互技术等等综合类的交叉学科。

可视化大屏设计快速入门指南,看这篇就够了!

1. 硬件设备

硬件设备信息是做大屏一切的开始,我们首先要了解它的尺寸、比例、屏幕种类(拼接屏、LED 屏)投影方式等等 一系列的信息,方便后续的设计工作。

可视化大屏设计快速入门指南,看这篇就够了!

上图为一些常见的屏幕拼接方式,确认好屏幕的拼接方式就可以计算出整个大屏的物理分辨率。举个例子:上图中最后一个的拼接方式为横向3块屏,竖向2块屏幕。他们每块的屏幕分辨率为宽1920px 高1080px,那么这块2×3的拼接屏幕的尺寸就应该是:宽度 1920乘以3(横向3块屏)高度1080乘以2(竖向2块屏)得出整个屏幕的物理分辨率为:5760×2160。

可视化大屏设计快速入门指南,看这篇就够了!

物理分辨率 VS 输出分辨率

可视化大屏设计快速入门指南,看这篇就够了!

大屏的投射方式大致分为三种:1、电脑屏幕 1 比 1 等比例投屏。2、通过主机直接输出给拼接屏(这种大多都是一些自定义比例屏幕和分辨率超大的情况会应用到)。3、投影仪投射。

一般大屏的物理屏幕分辨率大小都有不同,有的是极大的,几万像素,如果我们按照物理分辨率来去做设计的话会很卡,所以这里设计尺寸建议按照输出分辨率设计。输出分辨率会受到硬件的限制(超大情况下需等比缩放),我们一般会采用输出分辨率作为最终的设计尺寸。针对硬件设备设计时要关注以下几点:屏幕拼接方式、单屏幕像素及拼接后像素、输出像素等这些决定了设计尺寸、内容排布、拼接缝的规避等问题。

2. GIS 数据

通常应用于参数化建模,之前写的 0-1 带你制作智慧城市地图(二)就属于参数化建模的一种,主要是通过一些地理位置高程数据进行模型的生成。属于智慧城市可视化设计的基础设施。

常见的一些格式:Openstreetmap(多用于生成模型)、Shapefile(多用于生成模型)、Geojson(主要用于基于 Web 的映射)、TIFF(多用于贴图处理)。

一些常用的工具:Qgis、Arcgis、Google mapper

3. 三维建模

在可视化设计中,一般我们会结合生成参数化模型加定制化手工模型的方式处理整体效果。这么处理的目的:一是设计上能突出主体,增加画面的层次感。二是在性能上能很好地优化,提高整体性能。

下图为设计侧到开发侧对接流程:

可视化大屏设计快速入门指南,看这篇就够了!

4. 动效设计

常见的一些动效对接格式:GIF、MP4、APNG、Lottie、序列帧。


可视化大屏设计快速入门指南,看这篇就够了!

5. 图形技术

了解图形成像原理,是由一个个的粒子点生成的画面。

可视化大屏设计快速入门指南,看这篇就够了!

下图是由一个 50×100 的粒子组成的平面,每个粒子都会对应他的 xy 轴的坐标位置,我们通过控制的粒子透明度、大小、颜色、位置、旋转等参数呈现不同的视觉效果。

可视化大屏设计快速入门指南,看这篇就够了!

世界地图的是通过一个一个粒子成像形成的画面,其中黑色=0、白色=1。比如粒子大小是 1,它对应的位置是黑色,黑色是 0,1×0 就=0 显示为黑色。

可视化大屏设计快速入门指南,看这篇就够了!

我们常做的粒子世界地图就是通过控制粒子黑白 x 粒子大小叠加出来的。

可视化大屏设计快速入门指南,看这篇就够了!

比如我们做粒子地球的时候是通过一张贴图来去控制黑白度,海洋是黑色所以就不显示粒子,陆地为白色显示为白色粒子,最终呈现了一个粒子地球的效果。

可视化大屏设计快速入门指南,看这篇就够了!

6. 渲染引擎的技术架构

前面实现方式里讲到市面上可视化落地基本都是基于于 Unity3D、虚幻引擎(UE4)、Ventuz、threejs 等工具实现的。

它们的底层是由 BS(Browser-Server)架构和 CS(Client-Server)架构两大架构组成的。

BS 架构与 CS 架构特点

  • BS:(Browser-Server,)浏览器/服务器模式,web 应用可以实现跨平台,客户端零维护,但是个性化能力低,响应速度较慢。
  • WebGL 就属于 BS 架构的一种。优点就是使用便捷、数据实时更新、跨平台。缺点是渲染效果较差,大场景支持差。
  • CS:(Client Server,客户端/服务器模式),桌面级应用响应速度快,安全性强,个性化能力强,响应数据较快。
  • Unreal Engine、Unity3D、Ventuz 属于 CS 框架。优势就是整体渲染视觉效果棒,大场景支持好,缺点是必须安装客户端、电脑性能要求高、不同平台需要不同文件。


最后


本期给主要是给大家普及可视化设计的一些流程以及相关的专业知识,欢迎后台添加小六微信沟通交流。

作者:Mr.小六

转载请注明:优设网

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

魏华的微信.png

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

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

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








更多精彩文章:

大数据可视化界面设计之一:可视化大屏设计快速入门指南

大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇

大数据可视化界面设计之十:数据可视化必修课:表格篇




交互设计七大原则之——费茨定律

博博

通过改变目标的大小和到目标的距离来改变操作时间,帮助设计按钮等的交互.证明了获取目标的时间和目标的大小、距离的相关性。

什么是菲兹定律?

菲兹定律由心理学家Paul Fitt于1954年提出,它是物理世界中人体运动的数学模型。这一定律提出之后,在很多领域都得到了应用,但是在人机交互领域的影响尤为深远,可以说是人机交互领域的第一条定律,它通常被用来解释鼠标(PC端)和手势(移动端)在界面中的移动规律。这项定律尤其适合按钮等可点击、可选择、可交互的元素,目的:易于查找和选择。作为一个数学模型,菲兹定律是有表达式的,表达式如下:

T 是完成动作的时间a代表装置开始结束的时间,b表示该装置的速度,这些常数可从实测数据进行直线近似取得。D是起始位置到目标中心的距离。w是目标区域在运动维上的宽度。


结论: 离目标距离越近,所需的时间越短;目标尺寸越大,完成速度越快,时间就越短。也就是说,预测点击一个目标的时间,取决于目标和当前位置的距离+目标的大小。



如何将菲兹定律应用在交互设计上?

1 、放大可点击元素的尺寸

大且近的目标元素让用户不需要做太精细的调整就可以轻易选中。小而远的按钮则意味着用户要将鼠标/手指移动比较长的一段距离,并且再进行精细的调整才能选中,这样不仅难以点击、且需要花费更多的时间。

这里的大指按钮的实际大小、也就是点击热区的大小,包含按钮留白区域的大小。网页设计里现在常见的设计方式就是大按钮,四周大量留白; 而移动端设计里通常会扩展宽度,使用各种通栏按钮,使用户操作更加容易和快捷,可点击图标也会放大可点击区域。


注意: 并不能无限的放大。大小给可用性带来的加成是有限制的,如果把一个很小的按钮放大,它会变得更易于点击;但是如果按钮尺寸已经足够大,那么再放大尺寸,也并不会提高可用性和用户操作效率。


2、 减少移动的距离

依据菲茨定律所言,距离目标越近,用户点击越快。所以我们通常会缩短当前交互元素和目标元素的距离,来提高用户的使用效率和交互体验。

1>减少绝对距离

因为移动端用户通常为单手操作,也就是大拇指为主要操作工具,在现在大屏手机泛滥的情况下,屏幕很多地方是单手无法触及的,所以现在我们通常会把按钮和常用操作元素放在页面下方的易操作区域。

2>减少相对距离

在两个或多个操作中,通过缩短可交互元素之间的距离来提高用户的使用效率。比如确认删除操作,因为它是重要的负向操作,所以对于双重确认,相比于在当前列表区域确认删除(如下图微信),如果使用弹框,那么用户手势的移动距离相对会更长(如下图淘宝)


p:对于微信来说,删除对话是用户比较常执行的操作,因此便利性应该更高;而淘宝更想阻止用户进行此操作。 也就是说并不是所有操作都需要缩短距离。


3 、相关元素靠近

相关的内容或者交互元素要彼此靠近,可以在视觉上增强他们之间的相关性认知


4 、屏幕的边缘和角落无限大

因为屏幕的边角有一个隐形的“结界”,可以阻止用户鼠标因为大幅移动而超出目标区域范围,因此用户可以直接将鼠标大幅度移动到屏幕的边缘、角落,而不用进一步微调。 所以屏幕的边角适合放置菜单栏、按钮这样的元素,不管箭头移动多远,最终会停在屏幕的边缘并定位到菜单上。 比如chrome浏览器它把TAB栏放在了屏幕最顶部边界,用户使用效率比较高。




其他补充:


1、饼状菜单会比线型菜单更易选择,而且错误率更低,这里面有两个原因:

  • 饼状菜单的每个菜单项和菜单中心的距离都一致

  • 饼状菜单的每个菜单项的楔形目标区域都非常大,一般都会扩展到屏幕的边缘


2、 目标点的位置实际上是边缘的一些像素加上边缘之外的全部面积。所以,这样看来目标点就足够大了。原因是基于fitts定律,它的一个分母的增大了而使得界面的效率提高了




总结:

1、我们想要更容易点击到控件,就应该放在屏幕的边缘或角落里。让常用的控件更大,更容易辨别;

2、使用屏幕的边缘和角落让控件有效扩大,永远不要把控件放在离屏幕边缘或角落一个像素远的地方;

3、边缘之外的地方,也可以算作目标点的面积,这样一来,目标的面积就被无限的放大了,也更方便用户操作。


补充一张雅虎ued绘制的关于Fitts’ Law的Q版小漫画,先初步了解下:


作者:GIGI小王子

转载请注明:站酷

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

魏华的微信.png

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

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

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

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

设计总是凭感觉?那是你不了解这些交互设计原则

博博

设计总是凭感觉?你有这样的困惑么


本文主要聊一下产品中使用的几个交互设计原则,一致性,费茨定律,容错性,希克定律。



一致性


我们在做设计时,经常会讲到要保持一致。一致性的好处从外部来说,可以极大的提升产品的易用性,降低用户的学习成本,同时也有利于品牌形象的传达。从内部来说,将一些相同或类似的功能进行复用,提高团队的协作效率,让资源得到更充分的利用。


那么设计师该如何做到一致性呢?

一致性体现在产品中可以体现在很多方面,比如是视觉风格统一,交互操作统一。视觉上可以是配色、字体、图标、页面布局、插画,以及在不同终端上的统一。交互操作可以是相同相似功能在不同页面的呼出方式,一些地方动画的表现形式。

另外,产品与本身所处的行业内的竞品的一致性,比如音乐播放页面,用户已经习惯了上面是歌曲宣传图,下面是播放切换的控件,各个产品的排版布局都是相似的,这样的统一可以让用户没有陌生感,在接触一个新的音乐类产品时很快的上手。

 

滴答清单的网页端、桌面版、网页插件,将页面的主要功能信息都放在了左边,中间部分是清单列表,最右侧是清单详情,配色都是用了灰色、白色、浅蓝色,图标风格上使用的面型风格,这三个终端的视觉风格是保持了高度的一致,传递给用户的也是很强的品牌理念。

 

 

阿里云盘,App启动页和网页功能介绍,都是使用了C4D插画,来保证两个终端品牌风格的一致性。

 

 


微博App的详情页及他人主页,这两个页面的评论功能都使用了相同的底部弹出框的控件样式,用户可以在不用思考的情况下直接操作,这是利用了相同功能在不同页面复用了相同的交互控件。

 

 

 

费茨定律


简单点来说,有两个关键因素,两个操作目标的距离、操作目标大小。第一个因素意思就是在当前产品中两步操作,手指移动的距离越短,操作就越容易。第二个因素是当前操作目标越大,操作越容易。

 

石墨文档App。在页面右下角有一个悬浮的新建按钮,点击后从底部弹出活动视图,用户可以进行新建文档、表格等操作。这里使用从底部弹出活动视图,而不是在新页面或者页面中间,正是利用了费茨定律,缩短了两步操作之间手指移动的距离,降低操作难度。

 

 

 

滴滴出行、如祺出行

滴滴出行打车页面,App首先会自动定位你当前所在位置为出发位置,目的地一栏显示文案「输入目的地」。设计师将输入框设计的很大,文案字体也很大,在当前页面中非常醒目,极大的方便了用户的操作。这就是应用了费茨定律的第二个因素,当前操作目标越大,操作也就越容易。

反观如祺出行的打车页面,出发地一栏和目的地一栏的尺寸是一样大的,都是使用图标+文字样式,出发地一栏使用深灰色的图标、深灰色的字体,而目的地一栏图标虽然使用了橙色主题色,但是文字的颜色是浅灰色,字号也没有放大,非常不显眼。要知道用户当前的迫切需求是输入目的地,这样设计无疑是增加了用户操作的难度。

 

 

 

 

容错性


平时在操作产品界面时,经常会因为一些原因造成操作错误,而有些错误造成的损失是无法挽回的。那么设计师应该怎么避免用户操作中犯错呢?容错性原则可以很好的解决这个问题。容错性定义是:


“容错性是产品对错误操作的承载性能,即一个产品操作时出现错误的概率和错误出现后得到解决的概率和效率。容错性最初应用于计算机领域,它的存在能保证系统在故障存在的情况下不失效,仍然正常工作。产品容错性设计能使产品与人的交流或人与人借助产品的交流更加流畅。”

拆解一下,影响「操作时出现错误的概率」的因素有,操作前的引导提醒以及操作时的提示。影响「错误出现后得到解决的概率和效率」的因素有,操作后的解决方案

 

微信的修改微信号功能,不同于修改昵称直接进入编辑页面,微信在中间增加了一个页面,页面内容显示当前的微信号及提示文字,目的是提醒用户要慎重,避免有些用户修改了微信号之后后悔。这里是用到了容错性的操作前的引导提醒,降低了出现错误的概率。

 

 

QQ注册页面,用户输入昵称后,系统会检测昵称是否可用,及时给出给出提示。输入密码时会自动出现密码设置的提示,及时提醒密码都有哪些规则,避免用户输入不符合要求的密码。操作中给出这些相应的提示,可以使用户更加流畅的完成注册流程。

 

 

 

印象笔记网页版。将一篇笔记删除后,页面顶部会出现一个提示框,文案是「已将XX文章移至废纸篓」,提示框2、3秒之后自动消失。如果刚好这篇笔记是不小心误删的,这里的提示框给予了用户反悔的机会,帮助用户及时的找回笔记,弥补错误。

 

 

 

 

希克定律


希克定律,又叫是希克一海曼定律(Hick Hymalrs 1aw),是一种心理物理学定律。应用在产品设计当中,就是当页面中需要有不同选项时,要尽可能的少而简单,降低用户的决策成本。

 

美团外卖页面的金刚区,共有三行应用。核心推荐的5个应用是放在第一排,其他10个应用排成两排,核心推荐应用与其他应用在图标风格上使用了区别化设计,用户在进行选择时变成了5选1,而不是15选1。这是设计师在功能设计时针对应用做出了重要程度的区分,以帮助用户更快做出选择。


作者:不吃橙子D

转载请注明:站酷

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

魏华的微信.png

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

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

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

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

在交互设计中,作为设计师应遵循的7大定律-上

博博

在设计中寻找真理,探索每一个设计背后的意义。



除非有更好的选择,否则就遵从标准  —— 阿兰库珀



费茨定律:

距离:起始位置离目标位置越远,我们到达目标位置所花费的时间就越长,反之亦然。

目标大小:目标面积越大,我们定位到目标位置所花费的时间就越短,反之,目标越小,定位时间越长。


·生活中的费茨定律

刹车和油门踏板相距很近,刹车时的物理面积比油门的物理面积大,会最快接触到踏板,减少事故的发生。




·界面中的费茨定律

(1)距离目标位置尽量缩短,相关操作保持亲密性

例如:抖音的视频播放界面,系统会判断用户进行触发时手指与屏幕的接触位置,并将操作按钮显示在离用户手指最近的位置。


                                        


(2)目标尺寸大小要合适

目标点击热区在合适的范围内,越大越容易精准点击,越小越容易误操作。iOS交互指南中规定最小点击热区为44*44。

(3)拇指原则

人们在使用手机时,75%的交互操作都是由拇指驱动的,考虑到费茨定律,如果目标位置超出拇指的移动范围,操作成本增加。



米勒定律:

是交互设计中常用的一个定律,美国心理学家对人的记忆能力进行定量研究,他发现人的短时记忆能力广度为7±2个信息块,超过这个范围就容易出错,在7+2与7-2之间浮动。


·生活中的米勒定律

电话号码,银行卡号,身份证号码进行数字分隔,降低记忆成本,提高信息的易读性,视觉防错。




·界面中的米勒定律

(1)分段记忆,信息分层

文章、文本中的字号、字间距,目的就是便于读者记忆和提高易读性

(2)导航和选项卡不超过9个

网页设计的一级导航不要超过9个,如果导航和选项卡内容过多,可通过聚合按钮来包容其他次要入口。(用户使用导航就是要快速找到自己想要的内容,如不能快速查找,用户可能会就此流失掉)

(3)系列位置效应

首因效应:相对中间位置,我们对最前面的物体记忆清晰。

新近效应:相对中间位置,对序列末尾物体记忆更清晰。




席克定律:

是一种心理物理学定律,用户所面临的选择数量越多,花费时间越长,人机交互界面选项越多,用户决策时间越长。


·生活中的席克定律

遥控器按钮越少,越快做出操作;如交互设计四策略:删除、组合、隐藏、转移。功能层级也需要细分核心功能、辅助功能、边缘功能。而核心功能是进入产品第一个发现的功能,操作频率高,所以它的视觉应是最突出的,可以帮助用户增强感知和节约选择时间。


      


·界面中的席克定律

(1)减少选项并提供默认值

选项越多,用户决策的时间越长,减少用户思考的时间就是减少操作时间和学习成本,让用户不思考就做出正确的选择,对于小模块来说,一般选项不超过9个,9个以上可以用交互约束用户的行为,如展开收缩。


(2)选项分类分层,信息区分主次

在菜单栏的设计过程中,我们会进行同类分组和多级分层的设计,效率会更高。重点信息、推荐信息和普通信息要在时间上做区分,这样才能抢占视觉并在第一时间感知到。

(3)分步完成,分布显示

分解复杂流程,让用户一步步操作,而不是全部堆到用户面前,通过分步完成一个任务流,降低其他信息给用户带来的干扰。例如:用户填写表单时,可展示选项,当填完最后一项选“其他”时,再展开剩余的表单,目的上是为了减轻大量表单,给用户感知上带来的压力,达到场景细分的目的。


接近法则:

接近法则也是格式塔理论中我们最熟悉的,最常用的一种法则。观察者看到彼此临近的物体时,会将它们视为一体。


·生活中的接近法则

小区规划图中,会通过较宽的过道,绿植围栏来划分他们之间的关系,从而增强人们的感知。



·界面中的接近法则

界面中的接近原则是对相似的信息及功能类别进行分组、布局。作用是直接影响到用户与产品的视觉交流,引导用户的浏览及操作行为。

常见的在列表页面,通过色块区分大组与大组,分割线区分小组与小组,目的都是在视觉上通过组与组的区分来划分功能与功能之间的关联性。



以上这四条是我们在平常工作时都会用到的,我们再进行一个界面的设计时应该对照下以上几条定律,在与产品或开发battle时也能有理有据,告诉他我们「为什么这样设计」。写的手有些痛,剩下的4条定律下期我再继续补充,下期见~


作者:瞧见猫

转载请注明:站酷

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

魏华的微信.png

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

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

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

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

八大交互设计原则帮你避免出现基础错误

博博

八大交互设计原则帮你避免出现基础错误


八个交互设计原则帮你避免出现基础错误


一致性:一致性能给用户节约成本、元素风格统一和延续性、产品内部结构的一致性


d02058fd5d48a8012160f70f1ec9.jpg





反馈:操作成功或失败都有明确的反馈、告诉用户此刻的状态是什么会有什么结果


25a158fd5d6da8012160f7f8444b.jpg




方便使用: 减法设计(扁平的框架设计—减少不必要的操作步骤,每个流程清晰没有太多分支)

881358fd5da8a8012160f755522b.jpg




重点功能随手可用 多选择少输入






预防出错/防错原则: 操作给予提示


b8ab58fd5ebfa8012160f77f33f6.jpg




帮助用户认识改正错误:如果出错要帮助用户从错误中恢复过来


085f58fd5ed5a8012160f7506532.jpg




高识别性:(复杂的交互要给与引导和帮助)


903558fd5ef0a8012160f79cf40e.jpg




用户自由控制权:用户可以取消正在执行的操作 每个层级都能找到上一级的方法


465e58fd5f04a8012160f7a13a98.jpg



符合用户的操作习惯


作者:why夏天的风

转载请注明:站酷

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

魏华的微信.png

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

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

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

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

日历

链接

个人资料

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

存档