首页

Bs界面设计之八:用2个案例,帮你学会B端关键信息的密度提升设计

博博

在决策类产品中,用户的行为路径一般从信息分析场景到信息决策场景。系统关键信息密度的高低是影响用户决策速率的重要因子。因此我们建议从「信息拆分与重组」、「功能高效聚合」两个层级出发,以提升关键信息在页面模块中的的密度。

B 端有效信息密度提升设计框架的颗粒度由粗到细可总结为三个层级,分别为基础层、功能层与信息层。首先是基础层,B 端产品多场业务景、多用户角色、多任务流程的关键性差异决定了业务侧信息是一切设计的出发点;再者,需依据业务场景定义、角色定义与任务流排布的相关内容链接与聚合产品功能;最后,基于以上信息,使用交互与视觉相结合的设计方法,降低用户与系统的交互成本,引导用户聚焦产品核心能力,提升关键信息在页面中的密度与触达效率。

用2个案例,帮你学会B端关键信息的密度提升设计

「信息拆分重组」:在 B 端系统中,信息拆分与重组是依据业务与产品内容对信息进行重新组合,以求达到低跳转、高密度、有效触达的设计目标。

「功能高效聚合」:在 B 端系统中,功能高效聚合是依据业务场景与业务逻辑对产品功能进行重新整合,旨在单位时间、单位面积内的带来更多商业效益/效率提升。


案例一:入库计划-销售计划确认产品


设计方法:信息层拆分与重组。

项目背景:基于对计划方式的调研及整理,结合业务侧对于销售计划确认模块提供参考信息过少、浏览体验较差等问题,对明细表格及其他部分进行整体体验升级。

用户痛点:销售计划确认明细表格的浏览与分析效率低下,导致线上计划确认难。

设计目标:依据业务逻辑对表格信息进行拆分与重组,减少并优化用户眼动轨迹,提升信息展示密度。

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计


案例二:全流程数据概况产品


设计方法:功能高效聚合

项目背景:对全流程进行数据可视化,分环节数据监控,同时展示时效等更多维度数据,便于业务快速定位异常并跟进处理。

用户痛点:用户在产品方案中无法快速获取到履约率相关数据,在一定程度上影响数据分析与决策的效率。

设计目标:依据业务逻辑排布浏览分析全流程数据任务的起点、过程与终点,缩短优化用户眼动轨迹,提升信息触达时效。

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计


最后


以上就是「关键信息密度提升设计」的全部内容啦~

录入流程设计、任务中断回溯设计已经发布,感兴趣的小伙伴记得阅读收藏哦~后续会为大家带来「场景化设计」等 B 端的设计方法,希望能给正在从事或准备入局 B 端的的小伙伴带来启发,也希望跟大家一起探讨更多的 B 端设计方法。

作者:自转一周的鹿

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:



Bs界面设计之七:如何做好B端产品的信息设计?我总结了3个原则!

博博

最近在 12306 网站购票时,弹窗中展示了大段的文字信息,我只是匆匆扫了两眼就果断关闭了,实在没有耐心逐字读完。特别是节日抢票的场景,用户更不会有心情去看这些提示信息。

如何做好B端产品的信息设计?我总结了3个原则!

所以在做产品设计时,需要注重信息的传递效率。B 端产品通常用在 PC 端,屏幕显示区域大,在做设计时会不自觉的添加较多的信息,反而影响了用户的使用体验。今天我们就来讨论下如何做好信息传递?

我总结了以下 3 个原则:

如何做好B端产品的信息设计?我总结了3个原则!


匹配用户心智模型


心智模型指的是人们心中根深蒂固存在的,影响人们认识世界、解释世界、面对世界以及如何采取行动的许多假设、陈见和印象。是一个决定用户信息获取行为的内在的、可预测的认知模型。简单来讲就是人类基于经验的总结,去认知世界。

《About Face4:交互设计精髓》中提出了 3 种模型,实现模型、表现模型、用户的心智模型。好的产品的设计要尽可能匹配用户的心智模型,越符合用户心智模型的设计,产品越容易理解。

如何做好B端产品的信息设计?我总结了3个原则!

B 端产品页面内容变化较少,更强调一致性。主要由表格、表单、按钮等各种信息元素构成。在长期的使用过程中,用户对某些信息元素已经形成了特定的心智模型。例如用户看到输入框,就知道需要填写内容;看到步骤条引导,就知道多步操作;看到 Radio Button,就知道是单选。

因此方案设计时,设计师的一个重要目标就是让表现模型尽可能的匹配用户心理模型,避免因为组件使用不当,造成用户产生错误认知。

例如考虑到用户的视觉动线,“新建”主要、高频按钮通常放在左上角,方便用户浏览和操作,而辅助功能按钮会放置在右侧,用户也逐渐形成了这样的心智模型。

如果主操作按钮放置在右上角则违背了用户的心智模型,用户使用产品时,需要建立新的心智模型,改变已有的行为习惯。并且这种设计并不能带来其他层面的体验提升,个人认为有些得不偿失。

如何做好B端产品的信息设计?我总结了3个原则!


信息的层次性


B 端产品业务比较复杂,页面内容也会较多,信息的有效组织尤其重要。信息设计不是简单的内容堆砌,需要根据用户场景和需求做出优化处理,构建有效的信息的层级帮助用户去理解业务内容。

信息层级包括 2 个方面:

1. 系统空间分层

在一个系统中存在着空间分层,当页面较为复杂时,需要通过合理的内容分层,有序的展现内在逻辑关系。

B 端核心交互就是“增、删、改、查”,其中“查”就是信息的检索和浏览。所以页面主要是由搜索条件和表格构成的。而“增、改”等操作行为主要是在临时的系统空间中完成,例如弹窗、侧边浮窗、跳转页面等形式。

不同的信息在不同系统层级中相对独立的展示出来,保证了信息的层次感和秩序性。

如何做好B端产品的信息设计?我总结了3个原则!

2. 页面信息结构

复杂业务场景下,单个页面会承载大量的信息内容,需要通过合理有序地呈现给用户。主要有 2 种方式进行信息拆解。

如何做好B端产品的信息设计?我总结了3个原则!

1)高效组织——卡片化设计

在 B 端产品中,为了保证功能的完整性,必须要一个页面中展示给用户。逐条平铺,散点式的信息展示会造成信息密度过高,缺少层次性。而卡片方式可以很好的聚类相似信息,分割差异化信息,有助于降低信息的复杂性,帮助用户快速定位信息、浏览内容。

如何做好B端产品的信息设计?我总结了3个原则!

2)化整为零——步骤化设计

面对复杂的信息内容,用户容易产生畏难情绪。将复杂内容分步拆解,把用户的关注点从页面内容转移到步骤进度上,可以减少用户的心理压力。另外节点信息页也可以帮助用户更好的理解业务流程。

如何做好B端产品的信息设计?我总结了3个原则!

另外步骤化设计还可以将散点内容归集到一个任务流程中,引导用户快速完成工作任务。例如 Win11 系统安装后的设置引导,可以方便用户快速完成系统基本配置,避免用户操作的行为成本。

如何做好B端产品的信息设计?我总结了3个原则!

3. 页面元素设计

不同于 C 端产品,B 端产品更强调效率。正如奥卡姆剃刀原则所说“如无必要,勿增实体”。页面内容需要以简洁为主,避免无关要素形成信息干扰。而设计师更加感性,担心设计过于平淡,会在界面中添加各种视觉元素,反而会增加用户的认知成本。

如何做好B端产品的信息设计?我总结了3个原则!


信息的可理解性


B 端产品通常业务具有一定的专业性,用户门槛较高。在复杂业务场景下,必须让用户能够较为清晰的理解产品及功能,才能保证信息的传达效率。

1. 帮助信息

B 端产品需要尽可能地降低用户学习成本,但是本身业务层面的难度是无法避免的。因此需要为用户提供及时有效的帮助信息。

在阿里云、腾讯云界面中包含了大量的解释说明、Tips 等信息,解决用户在使用过程中的疑问,帮助用户更好的理解业务内容,减少用户的记忆量。

同时帮助信息还需要具有拓展性,当提示信息无法完全解决用户疑问时,还需要能够引导用户,查看完整的帮助文档,减少用户翻查资料的成本。

如何做好B端产品的信息设计?我总结了3个原则!

2. 可视化设计

数据可视化设计在 B 端产品中应用较多,例如概览页面,通过图形化的方式将数据的内在关系更直观的表达出来。

在某些特定的场景下,内容页面也可以通过可视化展示帮助用户理解信息,例如常见的身份证图片上传等,很多用户无法分清楚正面反面,借助图片可视化提示,便于用户更好的理解信息。

如何做好B端产品的信息设计?我总结了3个原则!


写在最后


体验设计行业需要创新,但是 B 端产品设计需要更加谨慎。尊重用户的习惯,完整表达业务逻辑性、保证内容的可理解性,是设计师必须去关注的。

作者:子牧先生

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:





Bs界面设计之六:想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

博博

有了解和学习 B 端的同学必然都听说过 SAAS 这个词,这在 B 端行业是个非常重要的产品形式和分支。

虽然它重要,但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问,Saas 应该怎么设计?适用哪些设计风格?

所以我从最底层的技术层面,来解析 SAAS 到底是什么,在未来你再也不用担心对这个词汇一知半解,无法正常参与业务讨论了。


想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

在 9 层塔中,SaaS 是完全制作好软件让用户直接上手使用的软件,而 PaaS 和 IaaS 就不一样。

1. PaaS

PaaS 全文 Platform as a Service,是平台即服务的简称。这属于完全技术化的服务,是非程序员的一般用户难以参与到的业务类型了。即服务商提供了基础的 7 层服务,只要用户购买了这些使用权,那么就可以直接在这个基础上编写或安装运行的程序进行使用了。

比如全球最大的开源 CMS 博客程序 WordPress,是由 PHP+MySQL 编写的,如果要创建这样的网站,就可以直接购买符合程序对应环境的服务器,再进行安装部署即可。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

2. IaaS

IaaS 全文 Infrastructure as a Service,就是用户只购买一个完全空白的虚拟主机,类似你购买了一台硬盘格式化后完全空白的虚拟电脑。用户可以自己选择安装什么样的系统,编写什么样的中间件,最后再搭建自己的框架。这适合定自定义要求更高的用户,完全根据自己的需要 DIY 项目的服务器功能。

3. Hosting

Hosting 则是比 IaaS 更进一步的服务,从原本的虚拟服务器升级到了完整的服务器。也就是说,在一些特定业务环境下(比如特殊的数据安全要求),用户需要购买完整的服务器硬件使用权,从原本的合租换成整租。

所以,Hosting 就是服务器托管的意思,用户向一些服务商购买了完整的服务器硬件使用权和联网功能,然后远程进行控制和使用。而商家负责硬件层面运维,防止服务器断电、断网、损坏、过热、故障等一系列硬件问题。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

4. Co-location

九层塔中,我们其实还省略了一个更底层的环节 —— 数据中心。

数据中心是一个物理名词,在今天指的是大规模的服务器数据设备安置和运行的空间。比如苹果的云上贵州,就是典型的数据中心。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

Co-location 的服务也叫场地出租,就是数据中心的商家,把数据中心的物理空间使用权租用给用户,用户自己购买服务器或商家的(不是临时租用)放进去,再借助数据中心的网络和其它基础服务实现服务器的正常运转。

这个概念大家简单理解就可以,我就不多做介绍了。所以,九层塔中包揽了不同层级数量的技术,就可以形成不同的服务,每一级服务有各自的优缺点,是由项目的实际情况决定的。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

相信看完前面的介绍大家已经知道,SaaS 等服务是建立在联网的基础之上的,也就是说,除了可以独立运行在你客户端里的本地软件,还包含更多需要联网的软件,或者干脆运行在远程服务器主机上的软件。

这是一个发展的过程……

最早的软件安装是我们到软件店里购买软盘、光盘,回到家里的电脑安装,这些软件往往只在本地运行,是不需要联网的孤岛。随着互联网行业的发展,孤岛渐渐被消除,联网上传和获取数据越来越普及,甚至,软件都不需要再下载和安装,直接用浏览器就可以访问使用。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

这种模式,就催生了软件的开发维护与服务器、网络的硬件运行进行了分工,一般的产品开发团队专注在软件应用层面的开发工作,而把网络、远程服务交给其它商家,并付费购买。这样不仅带来更高的效率,而且降低了各自的成本,实现了多方的共赢。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

所以,我们再来理解云服务这个词就很容易了,云就是网络,云服务就是基于联网实现的各种软硬件服务的总和。除了远程的虚拟机、中间件、数据库外,还有远程计算、渲染、CND 加速、直播分流等等。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

这也是为什么云服务会成为互联网发展的基础,因为它实在太重要了,几乎所有互联网公司都无法脱离云服务带来的支持。这也是为什么各个大厂纷纷投入云服务的赛道中,因为这是互联网的基建和命脉之一,拥有非常广阔的前景与市场。而在马太效应强者越强的现实环境下,头部的厂商拥有更好的机群、技术、人员,可以大幅度降低运作成本,提供更优质但价格更低廉的服务。

虽然云服务在今天不可或缺,价格也越来越有优势。但是,并不是所有企业都一定要选择购买外部的云服务,这就是我们要理解的另一个课题 —— 私有化部署。云服务再怎么便捷,也有一个缺陷,那就是数据是存储在别的商家、企业的服务器中,有一定的数据安全隐患。虽然数据安全是云服务的最基本保障,但很多对数据隐私、安全极度重视的企业,是不愿意承担任何外部风险的。所以他们就会通过自建本地服务器(私有云)的方式,实现从网络、硬件到软件全局私有化的部署。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

也就是说,服务器机房是自己公司的,网络是自己迁进机房的,服务器自己买的,环境、虚拟化、数据库自己搭建的,后端程序也是自己写的,最后电脑手机上运行的客户端,是连接这些服务器的。

哦对了,当然这些硬件日常的维护也要由自己公司的运维负责……

这样的成本高嘛?非常高。但类似国企、银行、证券、国防、政府机关等机构,对数据的安全性是异乎寻常的执着的,他们是有足够的动力划出预算来确保数据的私密与安全,用来运行自己内部的 B 端系统。这也是为什么这些机构从一开始就拒绝使用 Figma 这种公有云端软件,尤其是服务器在国外的。

再问下一个问题,私有化部署,就意味着这个环节中所有步骤全是自己搞定嘛?当然不可能,因为应用这个层面,有时候不是想开发就开发得出来,或者成本实在超出了预算。因为私有化的主要目标是数据安全,但不是应用的工具一定得个性化定制。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

比如在即时设计官网的价格页面,就可以看到 “私有部署” 这个选项。它的实际作用,就是允许客户在自己的服务器上安装它,让内部的员工使用设计软件时是同步到公司指定的服务器而不是官方的公共服务器中,满足客户的数据隐私需求。

注:这例子大家讨论最多适合理解,非恰饭

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

所以,了解完上面的概念,你也就大概能明白什么是云服务,什么是私有化。如果需要在工作中碰到更细节的名词还是概念,可以再进一步做理解。


结尾


关于 SaaS、PaaS、IaaS、云服务、私有化部署的扫盲,就先解释到这里。希望大家看完以后对 B 端行业一些最基本的产品概念能有一定的认识。

作者:酸梅干超人

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:



Bs界面设计之五:想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

博博

有了解和学习 B 端的同学必然都听说过 SAAS 这个词,这在 B 端行业是个非常重要的产品形式和分支。

虽然它重要,但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问,Saas 应该怎么设计?适用哪些设计风格?

……

所以我从最底层的技术层面,来解析 SAAS 到底是什么,在未来你再也不用担心对这个词汇一知半解,无法正常参与业务讨论了。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

讲解什么是 Saas,或者刚刚图例出现的 Paas、laas 是什么,首先要认识一个问题,一个需要联网的软件,是如何落地的,需要哪些前提条件。

通常,我们可以把一个普通的联网产品要正式上线并使用,需要满足 9 个层级的条件,我们简称 “9 层塔”,分别是:

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

下面,我们根据每个大层级来解释一下,它们分别都是什么。

1. 基础设施层

基础设施层是一切网络服务的根基,由现实世界的硬件组成,是所有技术、代码、数据的运行基础。

层 1:网络(Networking)

即基础的互联网电信宽带服务,通过电信运营商在各地搭建联网用的设备,并使用线缆相互连接,满足数据的物理传输可能。

比如你想要在家上网冲浪(非移动上网),最基础的条件是就是购买和开通宽带服务,通过接入光纤的形式,实现从家中连接到互联网世界的可能。

层 2:服务器(Serves)

服务器,本质上也是一台电脑。有了联网的条件,我们就要把网络接入到这台 “电脑” 上,让它来完成各种数据的处理和存储。

但不管它能做什么,要做什么,首先你得先有这台设备,不然后续的工作都无从谈起,所以服务器指的就是用来完成后续工作的电脑设备。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 3:存储(Storage)

存储就是硬盘,你想要运行的任何程序、代码,还是想要收集的数据,都需要容纳的地方,那就是硬盘空间。存储就是关联到服务器的硬盘,是数据存储的物理环境。

之所以硬盘被独立出出来,而没有把 CPU 内存这些拿出来,是因为数据的存储和安全(物理上)是网络服务的重中之重。CPU、内存、电源坏了,替换就可以,硬盘损坏导致数据的丢失是无论如何不可能接受的。

所以,工程师们开发了非常多特殊的技术来保障存储的稳定和安全。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

2. 技术应用层

技术应用层,就是具备了网络、服务器、硬盘以后,让这些基础设施充分发挥作用和能效的相关技术。

层 4:虚拟化(Virtualization)

虚拟化是个比较抽象的概念,它是一种资源利用的技术,让服务器最大化的利用和分配自己的资源。

比如一台服务器,有 8 核心、8G 内存、8G 存储,如果卖个一个客户运行一个程序,那么很可能这个这个程序日常只使用一个核心的算力,1GB 内存,1G 不到的存储,剩下的算力资源不就浪费了嘛?

于是,虚拟技术就可以把这台服务器切割成 8 台 “虚拟机” 卖给 8 个这样的客户。让他们在这台设备上运行 8 个不同的程序,并根据它们各自使用的消耗灵活分配 CPU 和内存资源。

所以,今天如果你想要搭建一个网站,云服务商出售的 “虚拟主机”,就是在实体服务器主机上切割出来的一部分。这样客户省钱了,商家利润率也更高了!

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 5:操作系统(OS)

每台电脑都有自己的操作系统,我们熟知的 Windows、Mac OS 等等。如果硬件没有搭载操作系统,那它们就只是一堆工艺精密的废铁。

对于服务器来说也是,任何服务器想要正常运行,都必须搭载相关的服务器操作系统,有了基本的系统,我们才能创建程序,让服务器去运行我们想要的功能。

前面提到的虚拟机,就允许同一台服务器通过虚拟技术运行多个系统。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

层 6:中间件

中间件也是个比较复杂的技术概念,它是个独立系统软件服务程序,是软件的直接面向对象(而不是服务器),是一种支撑软件。

举个不太严谨的例子,我们常规的逻辑是一个程序对应一台服务器(或虚拟机),但真实情况往往是一个程序会关联好几个服务器和不同的系统,来完成不同的网络服务。正常情况下,你需要对每个服务器和系统进行适配。

而中间件的作用就是帮助你省掉这个麻烦的步骤,让你只需要对接唯一的翻译和话事人,他会帮你向不同的任务对象传达你的要求。

层 7:程序环境(Runtime)

程序环境,就是编译代码用的环境。我们常听说的 C 语言、C++、PHP、Java、.Net 等编程语言,都需要安装一个对应的运行环境。

许多热衷电脑游戏的同学一定很熟悉游戏第一次启动触发的 Java 安装界面,那就证明这个游戏中运用到了 Java 的代码,如果你没有 Java 的运行环境,那么它们就无法生效。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

3. 产品表现层

层 8:应用(Application)

在这个系统下,应用程序指的不是你在自己电脑手机上安装的程序。而是安装在服务器上运行的程序,不管是后端程序还是前端程序。

它们需要使用某些特定的程序语言来编写,并运行在上面所说的对应环境中。我们所说的后端开发,通常就是开发服务器所运行的程序的程序员。

层 9:数据(Data)

这个词放在这里可能有比较大的歧义,数据实际上就是使用这个程序所产生出来的数据,而不是单指数据库(数据库也是环境的一部分)。

比如你打开一个网站注册了账号,上传了头像,那么这些信息就是使用程序所额外产生的数据,它是项目正常运作的必然产品。

4. SaaS 到底是什么

理解上面的 9 个层级的内容是什么,我们就可以看下面这张图表了。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

SaaS 全程 Software-as-a-Service,翻译叫 “软件即服务”,讲人话就是 “卖联网软件” 的。

前面提的 9 个层级,除了最后一层数据是我们普通人可以负责的,其它每个层级都需要对应的开发和工程师来负责对吧,那么我们普通人还是企业就不能使用网络软件服务了嘛?

这肯定是不符合事物发展规律的。

SaaS 的存在,就是让用户不用管什么服务器、代码、中间件这些有的没的高深玩意,直接让你在浏览器或本地客户端上直接使用这款联网软件,并创建对应的数据信息。

换句话讲,只要这个软件是联网的,且软件本身的功能就是服务的核心(划重点:社区电商类软件的服务显然不是软件功能本身),它就是 SaaS。SaaS 既可以免费,也可以是通过批量出售软件功能的使用权来赚取收益。

免费情景:

微软:如果你使用了基于 Web 的电子邮件服务(例如 Outlook、Hotmail 或 Yahoo!Mail),那么你已经使用一种形式的 SaaS。

https://azure.microsoft.com/zh-cn/overview/what-is-saas/

付费情景:

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(上)

在 B 端的语境下,SaaS 通常就是指制作一个面向商业用户的联网软件,然后批量出售这个软件的使用权。它并没有特指这个软件必须是 CRM、ERP、HRM 还是商用 HMI……

所以明白了嘛,SaaS 只是一个商业形式或技术形式的统称,它根本没有具体的设计规范或者学习方法,完全根据业务的实际需求和场景决定。

最后,再问你们一个问题,你们现在负责的项目是 SaaS 嘛?


结尾


这一篇我们完成对 SaaS 的基本介绍,下一篇,我会在这基础进一步展开,讲解 PaaS、laaS 和云服务的相关概念。

希望大家不要再在这种基础概念中犯迷糊了……

我们下篇再贱~

作者:酸梅干超人

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:












Bs界面设计之四:B端设计指南:6800字干货帮你掌握快捷键设计

博博


前言


键盘,在很多人的眼中,就是一个信息录入的硬件设备。但你却不清楚完整的键盘当中,字符按键只占到了整个键盘数量的 60% (完整键盘共 108 键,字符键 65 键)

B端设计指南:6800字干货帮你掌握快捷键设计

你会发现,键盘除了打字之外,还会有其他很多用途。快捷键,就是不可忽视的一部分。(注:完整的快捷键会包含,快捷组合键与快捷按键两部分,文章就不做过多纠结,意在讨论这样的交互形式,这里简单统称为快捷键。)

无论是设计师常见的三件套:Photoshop、Sketch、Figma,还是很多协作类型的产品:Word、PPT。

B端设计指南:6800字干货帮你掌握快捷键设计

快捷键,仿佛早已是许多产品的标配。但是我们在做 B 端设计时,又时常忽略掉快捷键这一特殊的交互形式。今天我们就来聊聊 B 端产品与快捷键之间的关系。

在实际的工作当中,如何设计快捷键?我会产生这些疑惑:

  • 一款 B 端产品,有必要去设计快捷键吗?
  • 快捷键是否会增加用户的使用门槛?
  • 如果想要去做快捷键设计,究竟应该如何设计?

我们就带着问题一起来了解快捷键之间的差异。

老规矩


开始之前,还是先科普一下桌面端与移动端,虽然他们之间存在很多差异,比如,页面布局、交互方式等等… 这些咱们以后再聊。但是今天想贴合主题,聊聊录入设备之间的差异。

在移动端的设备当中,我们多数情况下,采取的是软键盘的形式,也就是手机录入是以虚拟键盘的形式存在。

B端设计指南:6800字干货帮你掌握快捷键设计

这样也就导致虚拟键盘存在一些常见问题

  1. 缺少快捷键:虚拟键盘无法通过组合键,实现快捷操作
  2. 录入门槛高:不能对键盘进行精准定位,无法实现盲打键盘的快捷录入
  3. 功能按键少:在录入标点符号等信息时,需要切换页面进行实现

总结下来就是整体信息录入效率低,准确率低。比如我们最常使用的复制粘贴,到了手机当中,只能够通过点击光标的方式来解决。对于桌面端键盘而言,由于我们录入信息的方式是通过双手与实体键盘进行交互,可以实现更多信息的点击。因此快捷键就会有很大的发展空间,这时候就会很好奇,快捷键究竟是如何诞生的?

我们简单回顾一下计算机发展的早期,发现快捷键设定其实是源自 “硬件设计上的无奈”。早在 1980 年,IBM 所研发的个人电脑 Acorn,在当时遇到了一个棘手的问题,在电脑产生系统故障过后,它都需要通过手动重启,并且需要很长的时间来进行内存测试,验证计算机是否出现问题。但在公司内部进行系统测试时,并不是需要这样的一个机制。因此工程师 Bradley 在当时创造了一个快捷键:Ctrl+Alt+Del 可以在不需要内存测试的情况下将系统进行快速恢复重置。

我们现在回顾,当时作为工程师,他在快捷键的设定上也是进行了很多思考,因为 Ctrl+Alt 键靠得很近,但 Del 则在键盘上的另一边,这样可以避免一些用户在日常使用的过程当中进行误触。

而后续 Windows 电脑遭遇蓝屏死机,而 Ctrl+Alt+Del 这样一组快捷键便留在很多人的心中。

B端设计指南:6800字干货帮你掌握快捷键设计

随着个人电脑的不断发展,你会发现快捷键的设计也越来越复杂,因为我们想要了解如何设计快捷键,必须先知道,常见的按键分类有哪些?


常见快捷键的分类


目前共有 Windows MacOS 两大操作系统,在快捷键的设定上也会有着许多差异化,文章部分会将 Win/Mac 的系统统一进行讲解,大家可以优先看看关于两个系统之间的映射关系:

B端设计指南:6800字干货帮你掌握快捷键设计

想要知道我们快捷键的差异,我们必须了解每一个按键的基本定义:

Ctrl / Command

Windows 系统当中的核心快捷键,可以理解为是各项操作的快速触发。

我们可以使用它去实现各种组合快捷键,比如使用 Ctrl + C(复制) Ctrl + D (创建副本),算是用户使用最高频的快捷键。

同样,在 Mac OS 当中,你会发现 Mac 的 Control 几乎很少使用,因为系统本身就没有给它 “安排太多任务” 取而代之的是饱经风霜的 Command 键。

B端设计指南:6800字干货帮你掌握快捷键设计

Command 作为 Mac 独有的按键,它的地位几乎等同于 Win 当中的 Ctrl,并且两者的快捷键方式都极为类似,因此也就造成两个系统当中的按键差异。

Shift

Shift 也叫上档键,可将其意为连续的按键,因为在连续选择时会用到,它的功能主要有两点:

在中文输入的场景下,可以组合按键进行中英文的切换

在文件选中的场景当中,对文件的内容进行快捷选择的操作

Tab

Tab 也叫制表键,不过现如今已不再是制表的含义,更多可以为切换按键,比如我们经常使用 Command + Tab 来对软件进行切换。其用途主要有两点:

在信息录入时,按下 Tab 键来实现字符的缩进

在表格页面当中,通过 Tab 键实现对单元格的快速切换

Alt / Option

Win 系统当中的 Alt 与 Mac 系统的 Option 基本一致。他们的主要用途有两点

WIN:呼出菜单或点击按钮的组合键

MAC:快速访问系统偏好设置中某个选项的组合键


如何设计快捷键,是否需要快捷键


在我们的设计快捷键之前,需要考虑清楚是否真的需要快捷键。就像我们在网上冲动消费一样,购买的东西总会有当时觉得有用,然后立马吃灰的产品。所以明确需求的目的就显得尤为重要。

因为 B 端产品存在太多产品类型,在每一个产品类型当中,我们也会有不同的使用场景。这里我总结了几个维度去思考。

1. 高频使用

俗话说得到,好钢得用到刀刃上,快捷键的设定,一定是需要用户使用频率高才会有意义。因为快捷键的使用本身就会有使用门槛,如果你做在一些用户本身就不会频繁操作的地方,对于用户而言感知并不强烈。其次你也不想自己花费了精力,到头来设计思路并没有落地。

2. 核心功能

这里的核心功能其实是针对不同的角色。比如一个在线教育的产品,老师需要每天在产品当中去点评同学们的作业,也就意味着老师需要高频的在点评学生作业,这个时候其实作业点评就是老师的核心功能。那你对这个功能上的操作进行优化,大概率就不会存在太多问题。

比如我们以 figma 为例,如果它现在在 Darfts 首页增加了很多快捷操作,如:Command + N 新建画板 、Command+O 打开通知。

但是 Figma 并未对核心功能,编辑区域页面当中添加快捷键,我想这对于很多人而言,就是一个糟糕的设计。

B端设计指南:6800字干货帮你掌握快捷键设计

3. 沉浸场景

B 端产品的使用大致会分为三种状态:暂留、沉浸、配置(这里就不展开讲了)。而最常见的便是专注于用户使用的沉浸场景,也就是说,我们必须要让用户在沉浸场景下使用产品,这些快捷键才会变得更加有意义。

沉浸及专注,专注就需要高效,因此高效使用快捷键就显得合情合理。


归纳整理快捷键的诉求


当我们明确真的需要快捷键的诉求过后,我们可以去思考,究竟应该设计哪些快捷键?哪些操作是属于高频操作?是否会存在操作之间的先后顺序?

首先可以通过实地观察,先去判断用户在某一页面当中,具体使用顺序或者流程,然后通过流程图将数据内容进行整理。这其实是我们设计快捷键的基础依据。

B端设计指南:6800字干货帮你掌握快捷键设计

然后通过对页面当中不同操作进行数据埋点,能够得到用户具体的操作信息。通过这些数据信息,能够保证我们在做的设计都是有理有据,而不是拍脑袋的自己随意 YY 出来的。最后拿到数据进行分析,在数据当中并不能够单纯的去看它的点击量,而是要深入了解这个数据它背后的意义是什么?

这也是我不建议初级的设计师去做数据埋点的原因。因为我见过有太多设计师拿到数据过后直接不分析上手就看,导致出现太多数据背后的问题。


避免冲突


在快捷键的设定,我们应该考虑避免与其他快捷键重复。想要解决这个问题,我们必须先搞清楚,产品究竟采取什么架构方式。通常会分为 BS 架构与 CS 架构。

这里简单解释一下 BS 架构与 CS 架构的区别

BS 架构:(Browser/Server,浏览器/服务器模式)web 应用,可以实现跨平台,但是个性化能力低,响应速度较慢

CS 架构:(Client/Server,客户端/服务器模式)桌面级应用,响应速度快,安全性强,个性化能力强,响应数据较快

可以简单理解为,目前产品是否需要通过浏览器才能够打开。需要浏览器打开,那就是 BS 架构,不然则反之只有我们确定了具体的产品架构之后,你才能够知道你设定的快捷键是否与浏览器本身到快捷键有所冲突。因为浏览器自身的快捷键权限肯定是会高于你页面当中的快捷键,所以在设计上我们需要格外留意。

这里总结了一份浏览器的快捷键汇总,可以通过这个方式避浏览器的踩坑

B端设计指南:6800字干货帮你掌握快捷键设计

但客户端的快捷键设定,相对会更加开放,因为客户端不会受到浏览器的限制,在快捷键的设定的空间则会大很多


快捷键的设定


明确清楚上面的诉求与限制过后,接下来我们可以从三个方面,来对快捷键进行设定:

1. 语义法

在电脑快捷键设定的早期,最常使用的办法便是通过翻译英文单词首字母,进而实现快捷键的设定。比如我们经常使用的 Command+D 进行复制,D 便是 Duplication 的首字母、Command+N 进行新建,N 便是 New 的首字母。这样的设定方式其实源于国外,同样也是我们日常设定最为常见的一种方式。

2. 流程法

流程法就是去思考整个快捷操作的具体流程,比如我们最常使用的 Command + C 与 Command + V 就是一个例子。

因为如果按照常规的设计思路,粘贴在大家的印象当中一定会是 Paste,但是由于复制、粘贴本身就是高频操作,并且两者按键相互关联,再加上 P 也是 Paint 的缩写,Command + P 有打印的含义,因此通过用户使用流程上的思考,最后将粘贴放在字母 V 上面。Viscidity 的缩写,它是一个名词,具有粘聚性、黏性的意思。

3. 竞品法

如果假设目前设计的产品当中已经存在许多竞品,它们就已经有了相对应的解决方案,这个时候可以考虑借鉴直接竞争对手的按键设计,因为你可以通过这样的竞品设计,让你的用户的切换成本更低,也能够让他们快速上手。

举一个例子,比如 Sketch 与 Figma,Figma 的出现本身就是与 Sketch 进行竞争,因此没有必要在快捷键上进行特立独行,反而会增加用户的使用门槛。


在哪使用快捷键


既然上面讲到了如何设计,咱们还是不得不提一提在 B 端产品当中,哪些地方可以使用快捷键?好方便在读文章的同学们直接抄作业,用在自己的系统当中。

1. 详情页编辑

详情页几乎是每一个 B 端产品必备的页面。它能够帮助用户进行详细数据的阅读,其核心诉求会分为两种:

对表格页当中的信息不太清楚,想要通过详情页进行更为仔细的阅读;

对存储的数据有所质疑,想要更改几条数据;

因此,分析完了这两种情况过后,我们可以使用快捷键,去满足用户对详情页编辑的诉求,进而可以实现对某一个页面的快速操作。具体做法我们可以按照上一章节讲的,如何设计快捷键的思路。我也举几个例子

比如现在对纷享销客这样一款 CRM 产品的详情页进行编辑时,除了思考初级 B 端设计师需要处理的视觉部分之外,你还可以使用快捷键,将详情页的编辑,与按键的字母 “E” 进行绑定,这样可以配合鼠标来完成页面的快速操作,提高 “高级用户” 的操作效率。

B端设计指南:6800字干货帮你掌握快捷键设计

这样的优化就算是完了么?

其实这也是市面上绝大多数教程不会涉及的点。因为他们缺乏 B 端的实际工作经验。也就导致只会教大家如何依葫芦画瓢,教学员去实现某一个页面的具体布局,根本不考虑实际的项目当中的各种诉求与逻辑关系。这也可能是我上课只喜欢去画草图的原因,因为 B 端的“形”很简单,有太多的组件可以支撑你进行设计,但是 B 端的“意”则会过于复杂,很难理解。

说了这么多,我们来看看究竟应该如何进行优化?也就是在这个功能新增之下,还会有哪些存在的漏洞?

简单列三点:

  1. 在用户进入到详情页,但并没有编辑权限时,点击了按键 E 应该怎么办?
  2. 在整体的页面当中,就只绑定编辑操作吗?其他操作需要绑定按键吗?如果需要你会怎么设计?
  3. 让用户知道快捷键的存在?是简单的信息外漏?还是会有一整套 “机制” 来去辅佐进行解释。

这样不断完善,设计方案才能更加完整。

大家要记住,虽然得到一个设计结论很简单,但是 B 端系统本身就不是简单去删除列表,去增加更多视觉上的引导。而是你增加了一个功能模块过后,有没有考虑到它在整个产品当中的合理性,是否有具备思考完整的设计思考。不扯那么多了,我们继续~

再举两个真实落地的例子:

1. 在网页端的 B 站视频播放页面(你可以理解为是视频的详情页),用户可以通过点击 W 为投币、D 为弹幕开关、E 为添加收藏夹、F 为全屏播放,实现对视频的快速操作。而投币、弹幕开关、收藏夹、全屏播放都是属于 B 站最为核心的功能操作,因此这样的设计非常的赞。

但 B 站的处理,还是会有小小的瑕疵。会有很多用户对于这样的快捷操作并不知情,可以考虑在入口提示上,进行对应的简单优化。当然这样的产品还会有很多,比如 Youtube、抖音网页版都采取了这样的设计,大家可以自己去查看总结一下不同产品的特点。

2. Salesforce,还没开始对它进行调研的时候,我其实就能够猜到作为世界上如此出名的产品,肯定会有快捷键的设计。但随着调研的深入,发现在早些年间,它并没有进行快捷键的设计,因此受到很多用户的 Diss。随之便有人自行开发一款浏览器插件来实现对应的功能。

B端设计指南:6800字干货帮你掌握快捷键设计

而在后续的产品迭代当中,SF 逐步更进了这一功能,通过快捷按键,可以实现多个功能。逐渐将快捷键的方式放在整个系统当中,得到更多人的认可。目前形成了这样的一个完整快捷键体系。

B端设计指南:6800字干货帮你掌握快捷键设计


表格页新建


在表格页当中,我们最常使用的便是新建操作。同样可以按照详情页的思路,将整个页面当中的新建操作进行键盘按键绑定,实现快捷操作的效果。

比如在飞书管理后台的成员与部门页面当中,我是否可以通过点击 N 实现快速添加成员的操作?通过这样的方式就能够保证,用户的快速按键操作。其实这里还可以将问题再稍稍加深,我们是否还可以考虑一些新的方式?比如全局新建,在整个系统当中提供一个全局新建的入口,让入口更为统一,甚至可以实现全局键盘操作的“梦想”。又或者是通过快捷键呼出全局搜索,进行实现对应的操作?类似于 Notion 这样的产品,这些都是可以去思考的方向。


导航菜单切换


在 B 端产品当中,导航菜单的设计是最痛苦的一件事。因为一个员工,想要完成自己的工作,就必定会在不同的导航菜单之间进行来回切换。在 2022 年的趋势这篇文章里也讲到,越来越多的 B 端产品开始变得臃肿。也就意味着用户需要不断寻找、不停的切换导航菜单,来完成这个角色自身的工作,因此针对臃肿的 B 端产品,我们可以使用快捷键来实现导航菜单的切换。这里给到几个产品的思路,大家可以学习借鉴一下:

比如常见的飞书,因为本身是 CS 架构(客户端),因此可以通过组合键的形式,来实现对导航菜单的快速切换。

飞书通过按住 command + 1、2、3 … 来实现切换。

B端设计指南:6800字干货帮你掌握快捷键设计

钉钉则在这部分就缺少了这样的设计。而薪人薪事的做法则会有所不同,它的入口非常特殊,采取全局导航的形式(这个后面会单独出导航菜单的文章来进行讲解),将整个入口进行绑定,通过双击 command 对导航中心进行呼出,并且后续可以支持更多导航菜单的切换,这也是一个不错的思路,值得大家借鉴。


全局功能


在你的系统当中,一定会存在一些全局影响的功能。它会影响到系统当中的每一个角落。比如 CRM 系统里面的通讯录、消息、邮件。它本身和主营业务差别不大,但是由于业务发展等其他关系,需要单独处理。因此会有很多全局使用的功能,这时候便可考虑将其与快捷键进行绑定。比如明道云,因为在明道云的整体设计当中,消息、通讯录都是游离产品架构之外的一些协作内容。因此名道云将其通过快捷键的方式进行查看,进而实现页面的快速呼出,能够加大用户的使用效率

B端设计指南:6800字干货帮你掌握快捷键设计


总结:


分享了过后,最后再唠一唠我的自己感受。其实快捷键是一个非常立竿见影的设计提升方式,我们除了去想清楚快捷键应该如何设计之外,更多还需要让用户能够发现有这样快捷键。虽然 B 端产品我们可以通过客户培训、新手引导、帮助文档的方式来教会用户,但是快捷键这样的一个功能本身是针对中、高熟练度的用户,也就意味着,你需要不断的去培养用户养成快捷键的习惯,这样才能够保证,快捷键能够真正的被用户所接受。

其实现如今出现了很多无障碍的设计,大多数情况下都是在讨论如何脱离鼠标进行快捷的操作。其实比起无障碍,快捷键应该能够出现在更多 B 端产品当中。

最后做个总结:

我们常见的常见快捷键会分为:Ctrl、Command、Shift、Tab、Alt、Option

如何设计快捷键?

首先要去判断是否需要快捷键,共有三种判断方法、高频使用、核心功能、沉浸场景。其次要去归纳用户的快捷键诉求,想清楚快捷键的使用场景,避免与其他软件冲突。接着去想想究竟怎么设计快捷键?可以使用语义法、流程法、竞品法。最后我们可以在哪使用快捷键,能不能抄一抄作业?可以在详情页编辑操作、表格页新建操作、导航菜单的快速切换、以及全局的功能操作。

作者:CE青年

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:













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

博博


前言


在后台系统、数据类产品、B 端产品中,表格作为最常用的一种数据整理的组件,其重要性不用过多赘述。但如何更好的设计表格呢?想必多数刚接触 B 端的设计师都有过这个困扰。

今天,我给大家整理了一份关于表格的攻略,希望能帮到你。


什么是表格


表格是一种数据可视化的一种形式,可以查看和处理大量数据,它主要承载了数据的收集、整理、组织、展示、对比和归纳。

数据可视化必修课:表格篇

表格的设计原则


数据可视化必修课:表格篇

1. 易读性

表格的层级一定要划分的非常清晰,层级分明。你要让用户更关注的是数据本身,而不是花里胡哨的样式。

2. 可寻性

列表以易于浏览的逻辑排序,提供合适的搜寻组件帮助用户快速查找信息。

3. 高效性

表格要用最短的时间告诉用户想要得到的信息。

4. 灵活性

可以让用户根据自己的习惯及兴趣自定义自己的表格展示,比如排序、筛选、调整表头顺序等功能。


表格的构成


外部区域:标题、操作区、筛选区;

内部区域:表头、表体、表尾。

数据可视化必修课:表格篇

介绍完表格的构成,我们再来把每一个元素拆解出来详细介绍。


表格元素解析


1. 标题

标题是整个表格内容概述的名称,此名称尽量简洁明了,不要太长,能两个字写清楚绝对不用三个字。如果标题名称难以理解的话,可以加二级提示,有两种常用样式:tooltips(常用)、二级提示语。标题的位置一般在左上角。

2. 操作区

对表格内容的增删改等操作的区域。

使用建议:

有且只有一个主操作

特殊情况下可以没有主操作,但不能有两个主操作。

数据可视化必修课:表格篇

样式统一

同一个产品中,操作区样式规范要保持一致。

数据可视化必修课:表格篇

操作的优先级

根据使用的优先级,把常用的操作放到一级展示,不常用的收到二级展示。

不同操作状态区分要明确

不是所有的操作都是可以直接用的,比如有的操作在没有选择内容的时候是 Disable 状态,那这时候就要和其他可操作的有明显的样式区别,否则容易让用户分不清可不可以操作。

数据可视化必修课:表格篇

刷新按钮

有很多同学对这个操作是不是有些疑惑?有人觉得浏览器都有刷新功能啊,干嘛还要多此一举再加个刷新。其实这个刷新功能还是很有必要的,这个刷新只针对于列表内的内容。在有的后台管理界面中,因为数据量很大,如果每次刷新都用浏览器自带刷新的话,他会重新加载整个页面的内容,很不好用。很多情况下,用户只想重新加载一下列表的内容,那这个刷新就很好用啦。

同时刷新后要有即时反馈,告诉你点完操作后目前处于哪个阶段中。

导出功能

此功能可以把列表内容导出为你想要的格式(一般为 word / pdf)。

数据量较大的列表中,导出功能可以很方便的把自己过滤的内容下载到本地进行其他需求的查看。

导出内容的范围是哪些一定要事先想好,一般下载内容的范围包括以下几种:

  • 当前页所有列表内容(常用,而且实现难度很低);
  • 经过二次过滤后,导出所有页上的列表内容;
  • 所有页的列表内容(不常用,而且实现及数据处理难度会非常大,慎重选择)。

导入功能

既然可以导出,就有导入。导入报表对文档会有要求,一般都是固定格式的文档,而且文档与列表中的字段都可以一一对应上,才可以完美导入。导入功能中 word 和 excel 是最常用的格式。需要注意的是,导入文档后最好有二次确认提示,告诉用户上传了哪些内容,同时该内容是否与现有的列表字段有冲突。

自定义内容

自定义分两种:

可以设置某列内容是否展示(需要注意的是:列内容展示数量可以不设置上限,但必须设置下限);可以设置每一列内容的左右排序。

如果表格内容比较多的情况下,这两个功能是很有必要的,如果内容少,则可忽略这两个功能。

那怎么区分内容的多与少呢?我的理解:常用分辨率下,一屏可显示完整内容的话为内容少;反之则内容多。

3.  Tab(标签切换)

可以快速切换不同维度下的表格内容。

使用建议:

  • 不同状态区分要明显;
  • Tab 数量不宜过多,如果不可避免的数量过多的话,一般有两种方案:最多显示出 5 个 Tab,超过 5 个 Tab 放在“更多里面”;交互上支持左右滑动 / 切换 Tab。
  • Tab 只放文本,最多可以放个 icon,尽量避免其他干扰信息;
  • Tab 信息要精简。
4. 筛选区

筛选区是对表格数据的主观再处理,用户根据筛选功能可以得到更精准的信息。

搜索功能:

1)模糊搜索 or 精准搜索

搜索首先要确定哪几个字段可以被搜索到,名称?编号?等等…

模糊搜索使用的频率居多,毕竟有时候用户不一定可以精准的记住想要搜索的准确信息。不过也不是绝对的,两者皆可选择,根据产品选择即可。

2)单字段搜索

输入单字段进行搜索,比较常用的方式之一。

数据可视化必修课:表格篇

3)多字段组合搜索

可以输入多个字段进行组合搜索(取并集),一般交互方式为回车完成书写。此方式比单字段搜索更加精准,数据量过大的时候优势就很明显了。

数据可视化必修课:表格篇

4)切换类别搜索

可以设置几个常用的类别来快速切换搜索的维度,方便用户使用。

数据可视化必修课:表格篇

5)多类别组合搜索

多类别组合搜索适合更加复杂的列表内容,并且类别名称会展示出来,可以比较清晰的看到用户用的哪种类别名进行搜索的。

数据可视化必修课:表格篇

 筛选的样式

输入框、下拉选择、日期选择器、单选、多选。

5. 表头

每一列列表的小标题,是对整列内容的描述。

表头区域比较常用的几个功能:排序、过滤、进一步解释/说明、拖拽排序、拖拽增加 / 缩小列宽。

6. 表体

表体承载了表格的主要内容,它的内容形式有很多:文本、icon、进度条、标签等等。表体样式分为两种:斑马线和线条分割。

使用建议:

  • 内容决定表格的高度,一般设置 2~3 种行高就可以满足大部分场景了;
  • 把全局唯一且最重要的字段放在第一列,比如:名称。同时可以把名称固定在列表左侧,就算列表横向内容过多的时候,也可以第一时间看出区别;
  • 要设置最大宽度和最大高度,避免特殊情况下的内容展示;
  • 对齐方式:普通文本左对齐,数字类右对齐(记住就行,这是规范);
  • 最多支持二级列表,不可再多;
  • 可以把一些常用的操作放出来,放在列表最后一列。
7. 表尾

表尾主要是展示表格的统计信息、分页、跳转页面等。每页显示条数常规情况下默认为 10/页,最多 200/页,再多的话加载速度会变慢,影响使用体验。


列表详情交互展现


1. 弹窗

模态对话框:用户在当前页面弹出一个弹窗,除此弹窗内容外不可操作其他区域内容,产品的主观意识较强。

非模态对话框:也是弹出个弹窗,但是与模态对话框不同的是它不打扰其他用户操作,此弹窗存在的时候,用户同时也可以操作其他区域,产品的主观意识较弱。

2. 抽屉

抽屉现在使用的频率也是蛮高的,它的好处很明显:在当前页面弹出个抽屉,可展示的内容区域比弹窗多了很多,同时如果区域不够用的话,还可以增加 Tab 来展示更多信息。而且不同资源的抽屉切换也比较方便。

缺点就是:并不能完全让用户的聚焦于某个信息的详情,存在一定程度的信息干扰。

3. 跳转页面

直接跳转个新页面作为详情,好处就是可以展示更多的内容信息以及可以让用户更聚焦于当前内容。

缺点就是:新开页面这种操作本身就比较重,如果在当前页面可解决的事情,切记不要让用户新开页面。

4. 嵌套

嵌套就是上面提到的二级列表,它一般用于一级列表的内容补充,并且内容不宜过多。


在最后


在数据可视化中,表格是最常见的一种,它的知识点有很多,本篇文章只是到目前为止我的一些认知,如果有漏掉的知识点欢迎指教,我们都是学生,都要学习。

作者:生活因你而火热

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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



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

博博

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

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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



















大数据可视化界面设计之六:想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

博博

数据可视化的目的,是要对数据进行可视化处理,以能够明确地、有效地传递信息。” ——Vitaly Friedman

如何让人们在海量的数据中,发现数据的规律,或者清晰的发现特异的数据,那数据可视化是一个有效的表达方式。

数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息。如图

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

马克·吐温有一句名言“世界上有三种谎言:谎言,该死的谎言和统计数字。”人们经常曲解数字,谎言并不是源于数字本身,而是错误或不负责任的使用数字的人,向他人展示数字的时候,你有责任展示出真相。——《数据之美》

数据真相的展示离不开数据图表的合理选用,那么如何正确的选用呢?就来聊一聊基础数据图表类型的选用及辨析。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

常用的基础图表类型


第一部分:选用合适的图表类型


在数据可视化设计工作中,折柱饼图表是最常用的,同时也是最容易混淆的。一组数据既可选用折线图,又可选用柱状图的时候,设计师的内心往往会产生“我该选用哪种图表能更好地将数据传达给用户呢”的疑惑中。

基于上述疑问,下面给大家一些设计指引供参考。

1. 柱状图 VS 折线图

折线图主要表示一段时间内数据变化趋势,柱状图用于描述分类数据之间的对比。如果不需要展示数据的变化趋势,建议不要使用折线图,而选择柱状图。

相较于折线图,柱状图更多的关注数据之间的对比而非趋势。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2. 柱状图 VS 条形图

在大多数情况下,折线图和柱形图是可以互相替换的。

1)用户针对横向长短的敏感性高过竖向,涉及到排行时最好使用条形图。

2)标签较长时,使用条形图。例如:城市人口流入量的数据展示,由于城市名称文本比较长,建议使用条形图。

3)当图表画布高度大于宽度时使用条形图,利用高度空间的富余,展现更多的条形。

反之,建议使用柱状图。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3. 柱状图 VS 饼环图

基于人的认知特征,人对面积、角度的敏感性没有对长短的敏感性强。当类别的值接近时,不建议使用饼环图,除非是强调单个数据在总体中的占比,突出数据在群体中的特点。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4. 折线图 VS 面积图

通常情况下,面积图是折线图的一种衍生。在面积图里,数轴和线之间的区域通常用颜色或阴影来增加易读性。面积图数据集之间差异化部分在视觉上得到突显。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

5. 饼图 VS 环图

从本质上来看,饼图与环图属于同一类图表类型。但二者在数据可视化的表现上各有侧重。从图形映射角度来说,弧长比面积、角度更易被识别、更有效。因此,相对饼图,环图让数据更具可读性,同时,可以将强调数据放置在环图中部,引起用户关注。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

6. 堆叠柱状图 VS 饼图

如果在饼图或环图的基础上增加一个多数据的对比,就需要引入堆叠柱状图。相较于饼图,每一个单个堆叠柱状图就是一个饼图的变形,可满足用户的单一数据的部分之间的对比关系。将堆叠柱状图横向排布,就实现了整体数据之间的对比,而饼图是不能进行整体数据的对比。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

7. 堆叠面积图 VS 堆叠柱状图

堆叠面积图强调数量追随一个数据变化而变化的程度,同时强调部分和整体的变化趋势。

堆叠柱状图强调的是整体的对比,也可以直观的看出每个系列的值,尤其是当需要看某一单位的综合以及各系列值的比重时,最适合。

当日期数据点较多时,比如展示近50年某一组数据趋势的变化时,建议使用堆叠面积图,可动态交互,如X轴放大缩小可较为直观的展示数据。当日期跨度较小,如近7天、近3天某一组数据的的变化关系时,建议使用堆叠柱状图。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节


第二部分:应用中需要注意的细节


1. 折线图

1)为了可读性,折线图线的数量建议不要超过5条。当折线数量超过5条时,可在图表默认状态中高亮最重要的部分。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)为了数据的易读性,建议折线视觉效果使用实线

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3)慎用曲线。单折线图中线条是唯一的主题,线条的每一个点都真实的反应数据的起伏,一般建议使用折线。

若线条趋势不需要非常精确呈现,且需要消除个别差一点和整体的趋势,可以用平滑曲线

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4)折线图可以处理大量数据,非常适合给用户一些具有参考价值的数值,建议添加比较数据

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2. 面积图

面积图作为折线图的一种衍生,可用来展示连续性数据,可很好地表示趋势、累积、减少以及变化。堆叠面积图更擅于展示部分和整体之间的关系或趋势,而不是传达特定的值。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3. 柱状图

1)柱子之间的间距不要过大,增加数据易读性。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)使用合理的数据油墨比,降低用户获取数据的认知成本

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

4. 堆叠柱状图

堆叠柱状图的数值必须能相加,相加无意义的数据不建议使用堆叠柱状图。如图,同一区域的人员年龄相加,是没有数据意义的,如果将年龄改为人员数量,就可以横向对比不同区域的人员数量,是具有实际意义的。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

5. 条形图

分类数目是固定的,空数据也要展示。如果省略部分空数据节点,会造成不必要的误解,同时,数据的整体分布状况也不能完全表达出来。同理,柱状图也是一样。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

6. 饼环图

1)若计算百分比,每个切片的数值不能为负,饼图切片的大小与其相应的值成比例,所有切片相加必须为100%。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

2)通过扇形区块的面积,弧度和颜色等视觉标记,展现部分与部分之间以及部分与整体的占比关系。

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节

3)饼环图各切片有序排列

想做好数据可视化?先掌握常见 5 类图表的特点和设计细节


写在最后


虽然,数据可视化通常会让人联想到商业的分析师,但它通常比想象的更具创意并且丰富多彩。从业务仪表板、公共健康可视化到流行文化趋势分析,数据可视化涵盖了广泛多样的应用情景。

随着数据可视化的发展,数据表现形式也越来越丰富、多样,如在Echarts中有近40个大类的图标样式介绍。如桑基图、雷达图、地图等等。一些之前比较少见的图表类型,也越来越常见,如玫瑰图(南丁格尔玫瑰图),通过人民网在疫情期间的应用,也为大众所熟知。

一般来说,相较于基础图表,目前发展的数据可视化图表,应用场景相对来说比较局限,同时制作方式也较为复杂,不同于基础图表,通过Excel就可以实现,复杂图表的制作需要比较专业的工具,或专业人员来实现,如需要专业的数据分析师通过Tableau、Qlikview、FineBI等数据分析工具来实现,有较高的学习与应用成本。

好的可视化设计一定集易读、突出数据价值、易于分析、美观为一体的,最终让数据变得更加简单,方便交流,反之,不仅让数据变得更复杂,而且还会带来错误诱导。因此,如何让数据分析变得轻松、流畅并且易读,从而提高用户的工作效率,降低用户的工作负担,则成为设计师的重要责任。

本文只是介绍了部分基础图表的应用经验,后续有机会将继续完善可视化图表应用经验的沉淀及分享。

作者:弘毅

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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













大数据可视化界面设计之五:超全面的数据可视化设计指南:字体篇

博博


前言


读者朋友们大家好呀!(声明:《字体篇》文章中所有的字体规范都只针对可视化大屏设计,后台可视化以及 B 端可视化的字体规范与其不同)

最近产出了很多东西,但都是以零碎的知识为主,主要是在社群进行分享,因此有需要的小伙伴欢迎加我交流。


整体架构


今天就带大家好好聊一聊可视化大屏设计中的字体、字号、字重、字体优化等一系列注意事项。字体篇主要分为四大模块:字体选择与字重、字号规范与应用、字体优化与交接、常用字体与推荐。

超全面的数据可视化设计指南:字体篇


字体选择与字重


文字是界面中最核心的元素,是产品传达给用户的主要内容,它的承载体即是字体。从字体的最基本属性(字族、字类、字重、字号等)说起,熟悉字体的那些特征,了解字体在界面中的作用。

超全面的数据可视化设计指南:字体篇

1. 衬线体与无衬线体

衬线体

衬线又被称为“字脚”,衬线体就是有边角装饰的字体。我们常用的西文字体 Times New Roman 等;中文比较常见的比如宋体、明体等。

超全面的数据可视化设计指南:字体篇

无衬线体

无衬线体则与衬线体相反,通常是机械和统一粗细的线条,没有边角的装饰。最具代表性的 Arial、Helvetica 的西文字体,中文比较常见的比如黑体,微软雅黑等。

超全面的数据可视化设计指南:字体篇

总结

无衬线字体所具备的技术感和理性气质,更受科技型企业或品牌青睐,腾讯谷歌等互联网企业都是选用的无衬线体;衬线字体的优雅与复古,则常用于艺术性文字,时尚品牌等。

因此在具有浓厚技术的可视化氛围中,体现科技感和数字感,结合我们的观测体验,展示形式等,我们统一选用的字体是无衬线体。

超全面的数据可视化设计指南:字体篇

2. 中文字体

字体选择

在使用数字屏幕阅读时,字体的选择要选用无衬线体(比如黑体,微软雅黑)厚重一点,不可选用衬线体(比如宋体,书法体)比较单薄。

注意事项

标题可以用 Bold,更厚重,更加醒目,且不需要长时间观看;正文由于需要长时间观看,因此采用 Regular 字重,观感以及体验更佳;

超全面的数据可视化设计指南:字体篇

3. 英文字体

字体选择

英文字体类型的使用,英文选择更明显的粗体,因为要展示数据,使得数据展示更加直观,依旧是选用无衬线体,比较推荐:D-DIN 字体。

注意事项

字重用 Regular,更加纤细精致,英文字体分为大小写,一般推荐使用纯大写模式,因为大写可以保证字体本身整齐,并且宽高都是一致的,对于排版以及展示会更加友好。

超全面的数据可视化设计指南:字体篇

4. 数字字体

字体选择

数字字体类型的使用,考虑画面的字体的种类不超过三种,并考虑到字体的统一性,数字的字体与英文字体保持统一,比较推荐:D-DIN 字体。

注意事项

数字字体的字重尽量使用 Bold,因为展示更加明显,数字的展示一般都为数据展示,在界面的展示中,一般数字字体会比同字号下中文小 4-6px,因此展示是保证数据清晰显示,数字的字体大一点数据才能更清晰,更符合数据可视化展示。

超全面的数据可视化设计指南:字体篇

数字字体尽量选用等距字体,比如数字“1”和“0”,有些字体的间距会相应的缩小,我们要选用的就是等距字体,这样在做一些列表数据对齐的时候,数据展示更加友好。

超全面的数据可视化设计指南:字体篇


字号规范与应用


政府类客户对于文字大小粗细的追求可以说是非常的偏激,字体加大加粗几乎成了标配,这种需求下,我们能做的就是在原有规范的基础上尽量去提升字号和字重。

1. 常规 16:9 屏

常规 16:9 指的是 1920*1080 的分辨率

在字体大小的选择上,参考了页面上常规大小,定义了一套关于不同尺寸下的标准字号,正常 1080P 页面,最小字号不小于 16px。

此处字号并不是绝对,因为考虑到目标群体适老化的原因,我们主动提高了字体的大小,一切都是为了提高客户的观测体验,具体字号大小还需要参考设备清晰度,环境灯光,视距,人为原因等因素。

超全面的数据可视化设计指南:字体篇

2. 常规 32:9 屏

常规 32:9 指的是 3840*1080 的分辨率

在字体大小的选择上,其实是两块 1080P 的屏幕进行拼接,因此如果画面内容较多时,定义最小字号不小于 16px。

如果画面内容较少时,具体字号大小还需要参考设备清晰度,环境灯光,视距等因素,对字体进行相应的放大,比例合适即可。

此处字号并不是绝对,因为考虑到目标群体适老化的原因,我们主动提高了字体的大小,一切都是为了提高客户的观测体验。

超全面的数据可视化设计指南:字体篇

3. 特殊尺寸屏

特殊尺寸指的是非主流的分辨率,比如 2880*1920 的分辨率

这块的字号大小比较难定义,因为需要考虑的因素很多,总体来说字号大小如果高度在 1080px 左右,那么就按 16:9 的字号规范来算。

如果高度高于 1080 且很多,则需要等比计算或者放大,具体实践出的准确数值还得需要根据大屏的实际情况来综合考虑,这里只是提供一些基础计算方式。

超全面的数据可视化设计指南:字体篇

4. 字号影响因素

字号的大小受到屏幕大小的影响;字号的大小受到界面内容的影响;字号的大小受到观测距离的影响;字号的大小受到设备性能的影响;字号的大小受到主观人为的影响;

超全面的数据可视化设计指南:字体篇


字体优化与交接


给开发的字体太大怎么办?如何优化?开发采用默认字体去开发怎么办?开发用部署电脑没有这个字体去打发你又该怎么办?

1. 优化字体

给开发的字体太大,占用内存该怎么办?

其实我们可以用一些特殊的方法对原有的字体包进行优化,比如英文字体,我们可以删除非必要的中文字体和数字,符号,只保留一些必要的英文字母。具体方法如下,我们可以用 FontCreator 软件去进行字体的优化与删减,并修改字体细节,重新命名发布。

同时如果有意向的同学,也可以用自己设计的字体去应用到开发,这样的操作不是一举两得吗?

优化字体教程: https://www.bilibili.com/video/av82311138

超全面的数据可视化设计指南:字体篇

2. 开发交接问题解析

开发采用默认字体去开发怎么办?

默认字体开发可能有时候会出现文字换行,或者文字放不下的情况,因为不同字体的字间距以及大小可能是不同的,因此在初期就需要跟开发协调好,跟设计效果图的字体保持同步,这样才能保证设计效果的还原。

超全面的数据可视化设计指南:字体篇

本地部署电脑没有字体该怎么办?

字体的存放一般是有两种,一种是放到单独的服务器然后每次加载去服务器访问字体,另一种是跟代码放到一起。对于字体大小的要求。本地存储不需要考虑字体包的大小,云存储需要考虑字体包大小。

云存储一般字体包大小的话可以限制在 2、3M 左右,5、6M 的字体包就已经非常大了,太大会影响我们字体的读取,画面加载很慢。

超全面的数据可视化设计指南:字体篇

最优解就是在部署本地的电脑上安装你需要的字体,这样的话程序就自动读取,可以识别本地部署的字体;如果不支持本地化部署的,字体是存放在服务器或者是跟代码打包放一起的,可以要求开发在全局代码中多写几个备用的字体。

比如你是 Windows 系统,那么自带的就是微软雅黑,iOS 系统自带的就是苹方平台,会自动根据写出的代码按顺序筛选自带的系统字体。

超全面的数据可视化设计指南:字体篇


常用字体与推荐


一些特别好用的字体,会在设计过程中提升画面视觉,因此给大家推荐并分享了一些可以做可视化大屏的商用中英文字体。附件下载。

1. 可视化常用中文字体

中文字体包含了一些可以做标题的一些造型比较好看的字体,比如优设标题黑,站酷高端黑体,卢帅正锐黑体,胡晓波男神体等等。可做正文字体的比如,苹方简体,思源黑体等等。

超全面的数据可视化设计指南:字体篇

2. 可视化常用英文/数字字体

英文字体和数字字体主要是分享了一些数据展示比较奇特的造型字体,比如:DS-digital、Furore、以及正常数据展示的 D-DIN 字体家族等。

超全面的数据可视化设计指南:字体篇


全篇总结


字体的最基本属性:字族、字类、字重、字号,通过四种基本属性为切入点,精准的去讲述大屏可视化的字体规范和样式。

在可视化大屏设计中,字体更加偏向于无衬线体,无衬线字体所具备的技术感和理性气质,更受科技型企业或品牌青睐;

在可视化大屏中,展示数据的重要性不言而喻,因此要注意中文、英文、数字字体的选择以及注意事项,一切以数据展示更加明显为前提;

在不同屏幕中,可视化大屏的字号大小规范是有区别的,并且需要结合影响字号的五大因素:屏幕大小、界面内容、观测距离、设备性能、主观人为去制定字体规范;

通过 FontCreator 软件去对字体进行优化,掌握字体的删减发布以及交付开发的方法;

了解开发存储字体的两种形式,一种是本地化部署,一种是与代码打包服务器云存储,以及了解两种方式的优缺点;

了解可视化开发关于字体交接时的注意事项,可以通过自己的理解去解决工作中的关于字体的问题;

推荐了常用的可视化大屏的字体:中文字体、英文字体;

如果画面内容较少时,可以适当提高字号,反之亦然,比例合适即可;

可视化大屏设计字体规范不存在绝对字体规范。

作者:生活因你而火热

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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














网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

博博

@喪心病狂十六夜貓 :极简风格能帮助用户简化操作,兼容性好,载入页面快等等优点,不过虽然看起来简单,我们需要考虑的东西可一点都不少。这一次,就让我们一边学习简约风格的原则,一边将它应用到实际网站制作中去吧。

详细从以下开始。


什么是简约风格的网站?


扁平设计、英雄形象和汉堡包菜单等等许多这些现在流行的设计趋势,都是于2000年开始逐渐受到极简风格的影响才诞生的。

「这里的英雄形象指的是:在网站首页上使用的大尺寸图片。在日本,作为视觉的关键,也被称为主视觉。在Bootstrap中也有命名为「Hero unit」的组件而被大家广泛使用着。」

实例教学!如何将极简风格的原则运用到网站设计中?

现在为我们提供了许多服务的google,它的主页也已经有15年以上没有变动过了。

谷歌一直被评为采用简约风格的Web界面的先驱,自20世纪90年代所提供的测试版以来,一直都很重视界面的简洁性。

关于简约风格的讨论还在继续,但也有一些很多设计师都认同的共同点。那么,就让我们一起来详细的看一看简约风格究竟有着哪些特征吧。


只有必要的元素


简约风格的哲学非常简单,即“少即是多(英文:Less is More)”。在网页设计中,只使用真正有必要的要素,就可以实现更多的事情。简约风格的网页设计策略,就是删除用户操作时不必要的内容,以实现接口界面的单纯化。

屏幕上的要素越少,所留下的要素就会变得更强。如果在屏幕上的设计要素只有一个,信息就能很准确的传递给用户。

实例教学!如何将极简风格的原则运用到网站设计中?

极简风格是删除所有让用户无法专注于内容的元素。但与此同时,为了防止删除或者隐藏了对用户来说真正必要的内容,而让用户的操作感到困难,你需要仔细地检查。对内容的周围加以设计,使用户不会感到混乱,让我们留下一些辅助元素(如导航菜单)吧。


留白空间


简约风格的最常见的元素,就是什么设计元素都没有。简约风格最重要的一点就是负空间或留白空间,这些将有助于引导用户的视线。在设计要素的周围留有许多留白空间,就可以很好的将用户的视线集中起来。

实例教学!如何将极简风格的原则运用到网站设计中?

留白空间对简约风格来说是最重要的元素。


视觉特性


在简约风格中,每一个设计的细节都是非常重要的。接下来介绍一些在设计中可以灵活使用的要点。

平整纹理(英:flat textures)

在简约风格的界面中,简单的纹理和图标是经常被使用的图形元素。在界面中,不管是清晰高亮的效果、模糊阴暗的效果还是给UI 元素添加上光泽表现3D的效果都是没有必要的。

实例教学!如何将极简风格的原则运用到网站设计中?

色彩鲜艳的图片

图片是简约设计中最醒目的要素,可以渲染出作品的氛围。然而,我们也需要谨记,必须要使用抓住了简约风格特点的图片。选择了错误的图像(如乱七八糟不能集中的图像),它会抵消采用了简约风格界面的好处。

实例教学!如何将极简风格的原则运用到网站设计中?

△ 简约风格中最抢眼的英雄图像

用最少的颜色

在简约风格中,无需添加设计元素和图形,只使用颜色便能引起视觉上的关注,将视线集中到元素之上。因为使用的颜色数量必须很少,所以必须做出具有创意的视觉性层次感效果。

实例教学!如何将极简风格的原则运用到网站设计中?

△ 用户所能利用的有效情报很少,配色就会变得显眼,对网站也会有着显著的影响。

印刷字体

大胆的印刷体,侧重于将瞬间描述所记载的词汇和内容作为焦点,以达到更有趣味的视觉效果。当你使用引人注目的具有魅力的印刷体时,使用文字来传递情报是非常有效的。

实例教学!如何将极简风格的原则运用到网站设计中?

想传递信息时,请使用具有魅力的印刷字体吧。

对比度

由于使用了比平时较少的设计元素,当你想创建一个具有视觉性层次感的画面时是非常有创意的想法。在下面的案例中,白色的背景与黑色的宝石作为视觉性的要素被使用,实现了经典的简约风格。

实例教学!如何将极简风格的原则运用到网站设计中?

简约设计中,多数情况下只使用一种颜色作为重点,那个颜色可以强调重要元素。


简约Web风格的实践总结


对于简约风格,请不要以为看起来简单,做起来就会很容易。使用的设计元素很少,界面也变得简单,所以有必要给用户提供在同一平面内舒适的体验。

一个屏幕,一个焦点

遵从“一个页面一个概念”的原则,以单一的视觉要素为中心传达一个概念为吸引点,在各个页面都用心设计吧。

实例教学!如何将极简风格的原则运用到网站设计中?

将魅力展现在首屏

充分配合留白空间的重要内容,然后随着滚动不断提高内容的密度吧。

实例教学!如何将极简风格的原则运用到网站设计中?

简单易懂的宣传词

《The ELements of Style》作者Strunk先生与White先生,提倡“省略不必要的单词(英: Omit needless words)”。将完成的内容再编辑,选择传递信息所需的最低限度的单词吧。

实例教学!如何将极简风格的原则运用到网站设计中?

让导航菜单变得简单(但不是隐藏)

简单易懂的导航菜单一直是网页设计中非常重要的要素。然而,这并不意味着将它隐藏起来。

在使用汉堡菜单简化界面之前,让我们先确认为什么要使用它。汉堡菜单会让菜单的各个项目变得很难找到,这是你所必须注意到的。在多数情况下总是显示的导航菜单是有效的。让我们比较一下下面的案例。

实例教学!如何将极简风格的原则运用到网站设计中?

实例教学!如何将极简风格的原则运用到网站设计中?

△ 上面的案例是点击才会显示导航菜单,而下面的则是总是显示导航菜单。

尝试使用动画

由于使用动画效果的机会越来越多,尚未使用动画效果的简约风格的网站人气恐怕会下降。但是,这些新的效果也需要遵守简约风格的原则,谨慎小心的使用。

实例教学!如何将极简风格的原则运用到网站设计中?


为着陆页和投资网站保留简约风格


「这里的着陆页指的是:在互联网营销中,引导页就是当潜在用户点击广告或者利用搜索引擎搜索后显示给用户的网页。一般这个页面会显示和所点击广告或搜索结果链接相关的扩展内容,而且这个页面应该是针对某个关键字(或短语)做过搜索引擎优化的。」

重视内容,所有的网站都可以使用,但不一定都是合适。简约风格的目的非常简单,正如下面的例子,他适合着陆页(英:Landing Page)和投资网站(英:portfolio sites)这类内容相对较少的网站。

实例教学!如何将极简风格的原则运用到网站设计中?

△ 设计师Brian Danaher的投资网站,对大多数设计师来说是一个典型的简约风格的例子。

越是复杂的网站想使用简约风格的效果,就越是困难。内容丰富的网站,由于缺少设计要素恐怕将会给用户带来混乱。在这种情况下,创建具有简约风格的着陆页,可以帮助你的用户浏览到他需要浏览的详细内容。


与简约风格相关的工具


Minimalist Color Palettes
:一些简约风格的配色方案,将帮助你脱离标准的黑白设计创造更多的组合。

Color Contrast Checker:输入前景色和背景色,计算机自动帮助你计算百分比,轻松的就能创建很棒的颜色组合。


最后


简约风格的网站,通过删除不必要的设计元素和与用户目的无关的内容,将网页的接口变得简单。为了使这一类型的网站变得具有非凡的吸引力,精炼的设计与简易的操作相组合是非常重要的。能更简单地诱导用户的网站,会成为非常强有力的交互工具。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

网站设计之一:怒马!超实用的单页网站设计指南(附大量资源)

网站设计之二:旅游网站设计分析!教你10个小技巧

网站设计之三:实例教学!如何将极简风格的原则运用到网站设计中?

网站设计之四:另辟蹊径谈创新!提升网站设计形式的几种方法

网站设计之五:经验分享:移动网站设计应该避免的“七宗罪”

网站设计之六:4000 字快速回顾20多年的网页设计发展史!

网站设计之七:腾讯出品!2021-2022设计趋势报告:动态篇

网站设计之八:为什么千万别随便学国外的极简设计?

网站设计之九:高手出品!2020~2021年UI界面设计趋势

网站设计之十:如何做好网页头部内容设计?来看 58 设计师的总结!






日历

链接

个人资料

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

存档