首页

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 设计师的总结!






手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

博博

简介说明


1. 理论表述

任意一点移动到目标中心位置所需要的时间,与目标距离正相关,与目标大小负相关。

让设计更有说服力的20条经典原则:菲茨定律

2. 研究背景

1954 年,Paul Morris Fitts 根据信息类比提出一个假设,该假设能够量化「移动到目标选择任务」这个操作的难度「1」。虽然该假设还未涉及到人机交互中的具体参数,却给了后来的交互研究人员极大的启发。

我们现在经常看到的 Shannon 公式(即上面那个公式)是由约克大学教授 Scott Mackenzie 在 1992 年提出的一个菲茨公式的变体「2」,该变体被广泛地应用于需要指针操作的人机交互系统当中。作为交互设计和 UI 设计的理论基础,它更简洁明了地阐述了时间 T 和目标距离 D 以及目标大小 W 之间的函数关系:因为以 2 为底的指数函数是递增函数,所以,T 与 D 正相关(D 越大 T 越大),而与 W 负相关(W 越大 T 越小)。


设计案例


人们做出一个移动指针的操作通常需要两步:

  • 将指针快速移动至目标大致所在的区域;
  • 精细调节指针的位置以达到可点击的区域。

菲茨定律所包含的两点内容:

  • 指针当前位置与目标间的距离 D 越长,所需时间越长;
  • 目标的宽度 W 越大,所需时间越短。

让设计更有说服力的20条经典原则:菲茨定律

综合两者来看,菲茨定律中的 D 在第一步中起更为明显的作用,而 W 则主要影响第二步。所以菲茨定律所带给我们的启示,主要也是从这两方面入手。

1. 需要连续操作的控件尽可能接近

案例1:系统右键菜单,微信弹出菜单

让设计更有说服力的20条经典原则:菲茨定律

最典型的例子就是菜单,无论是 PC/Mac 中的右键菜单还是微信聊天页里面的加号键都遵循着这一原则。作为用户,点击这类按钮之后一定会有后续的任务和操作,所以这些任务都被安排在了距离所点击区域更近的菜单中。

案例2:夸克和 Safari 的 url 输入框位置比较

让设计更有说服力的20条经典原则:菲茨定律

另外一个例子是浏览器的搜索栏输入框,现在已经有一些浏览器(比如简单搜索、夸克)会将输入框以及一些其他更常用操作置于底部,这是因为我们正常握持手机时,大拇指离底部更近,所以需要进行点击操作的话底部的输入框操作起来更方便,也更快。

2. 可点击的按钮尽可能大

这一点在现今的 APP 中做得已经非常到位了。

案例3:哈罗出行

让设计更有说服力的20条经典原则:菲茨定律

作为哈罗单车租用操作的入口,页面中的「开锁」按钮做得足够大,用户可以轻易快速地点击到这个使用频率最大的按钮。登录(也就是开始)按钮也是一样的道理。

3. 边角的利用

还有一个比较特殊的就是对于边角的利用,无论是在 Windows 还是在 MacOS 中,边角总是有一些比较重要的操作,比如 Windows 的「开始菜单」(在左下角),MacOS 的 Dock 栏(在底部)以及顶部状态栏,包括 Mac 特有的触发角。

案例4:MacOS 触发角设置

让设计更有说服力的20条经典原则:菲茨定律

为什么微软和苹果不约而同地选择了在屏幕最边角放置这些权重相当之高的组件或者操作呢?在硬件设备中边角是一个极其特殊的存在,由于指针再怎么移动都不可能超越屏幕边界,只能停留在边界上,所以边界对于用户的操作来说是「无限可触发」的,这有什么意义呢?这意味着对于隐性存在的目标来说,W 趋于无限大。

让设计更有说服力的20条经典原则:菲茨定律

既然 W 趋于无限大,根据公式时间 T 就趋于常量 a。

让设计更有说服力的20条经典原则:菲茨定律

结论就是无论指针距离目标物多远,所需要花费的时间都已经达到了理论的最小值,轻松且高效。而在移动 APP 中同样有边角的应用,比如最近拿了 Google Play 设计大奖的 Drops。

案例5:Drops

让设计更有说服力的20条经典原则:菲茨定律

创新的交互将屏幕底边充分的利用了起来,只要将单词移到底部,就代表用户已经记住这个单词了。注意整个底部都是可以触发的,而不仅仅是脑袋那个圆形区域。本来「移动」这个操作对于「按钮」来说更加繁琐,但是在 Drop 的应用场景下这样的移动反而没有觉得麻烦,滑起来相当带劲。

4. 菲茨定律的逆向应用

菲茨定律给我们的启示通常都是正向的,都是以缩短用户的操作时间为主要目标,但也有一些场景需要反其道而行之。比如如果遇到需要用户谨慎的操作时,可以逆向运用菲茨定律,增加操作的复杂度。

案例6:iPhone 关机和微信删除聊天窗

让设计更有说服力的20条经典原则:菲茨定律

iPhone 的滑动关机延长了用户关机操作的时间,以提醒用户此操作为不可逆,需要谨慎操作。微信也是同理,甚至还缩小了删除按钮的大小,以达到警示的目的。

另一个典型就是弹出窗口的关闭按钮。

案例7:Luckin Coffee 的弹出窗

让设计更有说服力的20条经典原则:菲茨定律

弹出窗口里一般都包含了开发商的推广、广告、运营活动等等,所以开发商会希望用户花尽量多的时间去注意到它们的内容,这时候鸡贼的开发商会把关闭按钮做得又小又远(远离视觉中心),让用户花更多的时间去寻找和点击它们,效果拔群。


注意事项


注意点1:D 不能过分短

过分短的间距不仅无法提升操作效率,反而会造成视觉压力从而降低用户体验。

反面案例1:唯物魔改版

让设计更有说服力的20条经典原则:菲茨定律

按照菲茨定律魔改的唯物登录页面,理应操作得更迅捷方便,然而实际上除了视觉上造成额外的拥挤感、破坏画面负空间构成之外,我尝试着点了一下觉得十分逼仄挤手,所以过度缩减按钮间的间距并不合理。

注意点2:W 不能过分大

大尺寸的点击目标确实能够有效地降低用户操作成本,但是过分大的目标也会很直接地破坏画面的平衡,浪费屏幕空间。并且按钮的可用性与其尺寸并不是呈线性关系,当按钮已经足够大时,再增大就没有什么体验上的提升了,如下图所示。

让设计更有说服力的20条经典原则:菲茨定律

反面案例2:KEEP 魔改版

让设计更有说服力的20条经典原则:菲茨定律

与唯物类似,当按钮大到一定程度之后,会对画面造成恐怖的破坏效果。


总结


  • 尽可能缩短连续操作所相关按钮的间距,尽可能做大需要频繁点击的按钮(但都不要太过分)。
  • 注意屏幕四边和四角在交互中的价值。
  • 逆向运用菲茨定律以延长用户在当前页面的时间,或对用户的下一步操作发出警示。

参考资料

  1. Fitts, Paul M. The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 1954, 47 (6): 381–391.
  2. Scott MacKenzie. Fitts’ Law as a Research and Design Tool in Human-Computer Interaction. Human-Computer Interaction, 1992, Volume (7): 91-139.
  3. IDF INSTRUCTOR (2016). Fitts’s Law: The Importance of Size and Distance in UI Design. 
  4. Mr汤进er. (2017). 产品设计法则:菲茨定律(费茨法则)/ Fitts’ Law.
  5. bozhongtao (2012). 菲茨定律与互联网设计 Fitts’Law.


作者:超人的电话亭

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!












手机及小程序界面设计之二:三分钟搞懂,iPhone 12发布后的设计尺寸调整

博博


前言


距离iPhone 12系列发售已经有段时间。

之所以没第一时间撰文,是因为 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式发售。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

而在此之前,即便是Apple线下店也没有样机。

保险起见,我等接触到 Mini 和 Max 真机后,开始着手撰文。

一周前完成了文字部分,本周终于完成了几十张配图,这才和大家见面。

为了方便新同学更好的了解本文内容,我会简单提及一些关于适配的必要信息。

并附上往期内容的链接,方便延展翻阅。

本文约3200字,分以下六个部分:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

基本参数

在网络上搜索手机界面适配的相关内容。常会看到文中提及以下几个参数:比如屏幕分辨率(物理分辨率)、屏幕尺寸、PPI数值…

三分钟搞懂,iPhone 12发布后的设计尺寸调整

其实,在处理常见手机界面适配时,设计师只要关注以下3个基本参数:渲染像素(Pixel)、逻辑像素(Point)、 倍率(Scale)

三分钟搞懂,iPhone 12发布后的设计尺寸调整

渲染像素(Pixel)可以理解为是手机截屏时所得到的图片尺寸,单位是px;

逻辑像素(Point)可以理解为是程序员在用代码绘制页面时所用的尺寸,也被叫做“1倍图尺寸”。比如Sketch中对应的机型尺寸

三分钟搞懂,iPhone 12发布后的设计尺寸调整

对应的就是手机的逻辑像素尺寸。

倍率(Scale)因为逻辑像素和渲染像素存在着一定的比例关系,这种比例通常被称为倍率,比如切图后缀的@2x、@3x对应的就是倍率的数值。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

值得一提的是,倍率不一定是整数,比如三星GALAXY J2(540×960),倍率是@1.5x;

华为M3 Life 8.0”(1920×1200)的倍率则是@2.25x


两种适配


适配方式主要有两种:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

1. 倍率适配

主要应用在逻辑像素相同,但倍率不同的设备。

比如iPhone 11适配到 iPhone 11 Pro Max

三分钟搞懂,iPhone 12发布后的设计尺寸调整

两个适配的逻辑像素都是 414 x 896pt,但倍率不同,前者是@2x、后者是@3x。

2. 逻辑像素适配

这种适配方式应用在两个倍率相同,但逻辑像素不同的设备,

比如iPhone 11 到iPhone 8:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

两个设备的倍率都是@2x,逻辑像素则分别是:414 x 896pt 和 375 x 667pt。

如果两个设备的倍率和逻辑像素都不相同,比如iPhone 8 到 iPhone 11 Pro Max

三分钟搞懂,iPhone 12发布后的设计尺寸调整

那通常会先进行逻辑像素适配,再进行倍率适配。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

由于倍率适配相对简单,只需要考虑分割线和切图这两个因素。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

因此,设计师通常说的手机适配、尺寸适配常指逻辑像素适配。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

所以搞清楚iPhone有哪几种逻辑像素,就成了iPhone适配和验收的关键。


iPhone 12对设计的影响


在今年10月份发布的iPhone 12系列共有四部机型。

在谈新设备前,我们先简单回顾截止iPhone 11系列时,iPhone的几款主流机型及其对应的参数:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

通过图表可知,在iPhone 12发布前,市面上的iPhone共有6种不同的分辨率需要完成适配。

那么iPhone 12又带来哪些变化呢?

从官方给出的屏幕数据可知,四款设备的物理像素如下:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

由图可知,今年iPhone共新增了3种全新的屏幕尺寸。(其中iPhone 12和iPhone 12 Pro的物理分辨率相同,故合并看待)

但在设计层面,iPhone 12系列四款手机,只为设计师增加了1170×2532、1284×2778 两种新的设计尺寸。

画重点:目前有一些文章,错把iPhone 12 mini的屏幕参数1080×2340当做最终的绘图尺寸,认为12 mini的逻辑像素为360x780pt 。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

事实上iPhone 12 mini采用了iPhone X一样的渲染像素,即1125 x 2436px,对应的逻辑像素是375x812pt。

为了解释这个问题,得从大家比较熟悉的iPhone Plus系列手机说起。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

在前文提到,手机界面适配时,设计师只要关注:渲染像素(Pixel)、逻辑像素(Point) 以及倍率(Scale)这三个基本参数。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

而其中的渲染像素通常会和屏幕的物理像素保持一致,比如常见iPhone 8、iPhone XS、iPhone 11 Pro都是如此。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

这也导致大家很容易把物理像素和渲染像素混为一谈。

但既然说了是“通常会保持一致”,就总会有例外。

比如iPhone Plus系列,官方给出的屏幕参数(物理像素)是1080×1920,但渲染像素却是1242×2208。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

所以设计师在针对Plus系列做图的时候,就得按照1242×2208进行输出。

而新款iPhone 12 mini的情况和Plus系列一样:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

官方给出的物理像素尺寸是1080×2340 ,但拿到设备真机后,通过测量可知12 mini采用的渲染像素是1125×2436,这和iPhone X的渲染像素保持一致。

在明确这一点后,我们再看下iPhone 12系列设备的参数:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

如果我们只看逻辑像素,加上iPhone 12系列,目前iPhone 共有7种尺寸。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

这些尺寸都需要设计师留心,并完成相关机型的验收走查。

不过,到这里还没完。考虑到iPhone存在“标准”和“放大”两种模式的视图。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

还需要将放大模式的尺寸考虑在内。

目前各个设备的放大模式对应的适配三要素分别如下:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

其中320x693pt是全新的尺寸,出现在12 mini、12、12 Pro这三款设备中。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

由此,在把放大模式纳入适配考量范围后,iPhone的逻辑像素共统计出8种尺寸。

如果将其中最小尺寸和最大尺寸比较宽高的话,宽度相差了108pt、高度相差了358pt

三分钟搞懂,iPhone 12发布后的设计尺寸调整

对于那些横滑需要外露一部分的页面,需要重新设计尺寸或调整局部的适配方案。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

这对于一些单屏显示的页面而言,也是件麻烦事。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

iPhone市场占比变化


先思考一个问题,在下面几个尺寸的iPhone中,你觉得哪一种尺寸的iPhone在市面上占比最高?

在 iPhone 12发布之前,在iPhone这几种屏幕尺寸中,你觉得哪一种iPhone的市场占有率最大?

三分钟搞懂,iPhone 12发布后的设计尺寸调整

我相信绝大多数设计师,都会下意识觉得750×1334这个尺寸的机型占比最多。毕竟在过去很多年里,大家都是用这个尺寸在做图。

那实际情况究竟如何呢?

我们先看下阿里友盟今年05月01日的数据:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

PS:数据公司按设备的物理分辨率进行统计,而非渲染像素。所以这里的1920×1080对应的是Plus系列手机。

今年五月,国内iPhone占比最高的机型是Plus系列。而设计师钟爱的750×1334 和 1125×2436分别排在第二和第三。

其中排在第三的1125×2436(对应@2x的设计尺寸是750×1624)和前两者的占比仍有较大的差距。

那是不是随着时间的推移,1125×2436的机型占比会逐渐增大,并逐渐占据第一呢?

如果你也有同样的想法,恐怕又得失望了。

翻看5月份的iPhone增量数据,会发现一个有意思的情况:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

在增量中,828×1792(对应iPhone 11)增速以51.9%遥遥领先第二名的1125×2436。

下面,看下最新的11月统计的iPhone存量数据:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

828×1792已经从占比第四名上升到了第三名,

再看11月份的增量数据:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

828×1792的增速不减反增,从5月份的51.9%增加到了最近的63.8%

如果不考虑最新的iPhone 12系列,828×1792有望接替Plus系列,成为市场占比最大的iPhone尺寸。

在828×1792的设备飞速增长的同时,1125×2436这个尺寸的设备增速却在不断下降。已经从5月份的27.8%降到了现在的10.2%

iPhone 设计尺寸演变


三分钟搞懂,iPhone 12发布后的设计尺寸调整

过去设计师常用的设计师尺寸是750×1334,但随着iPhone进入全面屏时代,如果再把750×1334作为设计的基准尺寸显然已经不合时宜。

而目前常用的750×1624尺寸对应的机型(对应1125×2436在@2x下的尺寸)无论在存量市场中的占比,还是增量市场中的占比都少的可怜。

而新发售的iPhone 12系列中,也只有12 mini采用了1125×2436作为渲染像素的尺寸。而其余三款,采用全新的渲染像素和逻辑像素。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

很难想象1125×2436这个尺寸的设备,还能和过去的750×1334尺寸一样,成为iPhone主流的分辨率尺寸……

设计基准尺寸的选择,除了要看设备的占有率,还要兼顾适配的成本。比如,当有大中小三种尺寸的设备需要设计时,优选中间尺寸作为基准尺寸。

三分钟搞懂,iPhone 12发布后的设计尺寸调整

以中间尺寸为基准,无论是适配到小尺寸、还是适配到大尺寸,界面的调整幅度都是最小的,偏差不会太大。

反之,如果选择小或大作为基准,或许页面适配到中间尺寸时感觉还行,但适配到另一侧相对极端的尺寸时,则容易出问题。


新,设计基准


界面设计师所用的绘图基准尺寸并非一成不变。回看过去:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

设计师用的基准尺寸已经从最初的640×960、变成640×1136、再到750×1334,以及现在的750×1624,已经变化了4次。设计师几乎每隔两年就会随着新iPhone的发布调整一次设计尺寸。如今随着iPhone 12的发布,加上750×1624对应机型在市场中占比的低迷,我们可以重新思考在iPhone众多尺寸中,哪一款更适合作为设计的基准尺寸。

这里先不考虑设计师对尺寸的惯性依赖,只思考适配兼容性和市场占有率这两方面。适配兼容性,按照“大中小”优选中间尺寸这一原则。我们可以很容易的在目前8种iPhone的尺寸(指逻辑像素)中选出位于中间的尺寸:

三分钟搞懂,iPhone 12发布后的设计尺寸调整

分别是 375x812pt 以及390x844pt,前者对应1125x2436px ,后者则对应1170x2532px,如果进一步将其转换成大家熟悉的@2x尺寸,则分别对应:750×1624和780×1688

三分钟搞懂,iPhone 12发布后的设计尺寸调整

在市场占有率层面,随着Apple逐渐停售之前的设备,新款iPhone的分辨率占领市场只是时间问题。而在新设备中,只有iPhone 12 mini这一款设备采用大家熟悉的1125x2436px(375x812pt,对应@2x下尺寸750x1624px)。如果按照此前的经验推算,iPhone 12(1170×2532)接替iPhone 11(828×1792)成为最热卖且占比最高的设备只是时间问题。

截止iPhone 12发布为止,显然 390x844pt (对应@2x下尺寸780x1688px)更适合作为今后的设计基准尺寸。

作者:海边来的设计师

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!












手机及小程序界面设计之三:从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

博博

Dribbble 平台对于互联网 UI 界面设计有着举足轻重的定位,对 Dribbble 设计的研究会让我们看清设计的方向。

为了保证这篇文章的质量,Dribbble 年度的每个作品都超过 550 赞。在此原则下挑选了 828 件作品,作品总的大小为 2.2G。


总结


从挑选出的 828 件作品中,排名前十的作品中 9 件为 B 端设计,另一件作品也是 B 端产品 C 端化的产物。其中:

  • B 端界面设计占比 476/828,57.4%;
  • C 端界面设计占比 180/828,21.7%;
  • 视频动效作品占比 223/828,26.9%;

明眼人都能看出其中的比重关系,B 端设计再次大火,为什么是再次?因为 B 端设计之前火过,只不过没有赶上一个好的时代,在 C 端设计风光的十年里而忽略了其存在。随着 C 端市场饱和与数字化的浪潮下,实体经济、ToB、ToG 的产业再次迎来了它的曙光。视频动效的作品占比也已超过 C 端界面设计,相信今年视频动效作品占比还会再次提升。


Dribbble 年度最佳作品


从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

Dribbble 年度最佳作品来自大家最熟悉的 UI8 团队中的 Tran Mau Tri Tam ✪,作者来自越南西贡,最佳作品截止目前355K浏览量,2933个赞。

为什么看似平平无奇的作品却能获得 Dribbble 年度最佳作品呢?既不是 C 端也不是纯 B 端的作品,更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮,你可以理解它就是一个平面作品,一个字体加几何形体构建的作品,为了丰富画面的层次,让画面更加的活泼采用了多彩加几何色块,让标题阅读有停顿感和呼吸感。faster 底部的横线让它从标题文字中脱颖而出,这种使用线条突出重要信息的设计也是今年Dribbble 设计流行趋势之一。

MetroUI 是 Windows8 的界面设计语言,在 2010 年至 2013 年间曾经风靡一时,那也是移动互联网的发展元年,现在国家推行实体经济、数字化带动 To B、To G 的发展元年,通过几何色块(MetroUI)实现 B 端产品与 C 端设计风格的传承与衔接,你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风,毛玻璃的多彩高斯模糊渐变风,年度作品当之无愧。

最后来看下按钮的设计,正常的按钮要么文字加色块,要么左图标加右文字,它设计成左文本加右图标,更加注重信息的可读性和易读性,也体现 B 端设计重功能和交互体验,视觉点到为止的设计理念。

下面我们来欣赏年度最佳作品里面的流行趋势吧。

1. 易读性(停顿感)

字体三原则:可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章,肯定设计文章的内容可读性更好。易识性是用在字体设计上,不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关,因为我们都需要编排文本。当我们小时候写作文时,不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感,更加适合用户阅读。

通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容,丰富文本内涵。比如情侣间表达爱意时会输入文本,“我爱你”、“我 Love 你”、“我 ai 你”、“我❤️你”,哪个更加会有情感共鸣呢?不言而喻,相信你心中已经有答案了。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

2. 曲线

在标题文字上添加曲线来突出重要文案是 2021 Dribbble 最流行的趋势之一,第一个设计目的就是突显文字,其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中,签字的文本都是手写体的感觉,手写体对比电脑的机械字体会带有一种人文气息,也会让两者之间产生一种对比、矛盾。

除了突显文本外,曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试,通过真实用户眼睛浏览界面显示对应的热点图。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

3. 多彩高斯渐变风

多彩高斯渐变风是从色彩的角度来传达和丰富画面的,多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程,多彩渐变多为冷暖对比来制造画面的冲突,需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。

多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新,给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上,为了更好的传达信息需要去设计与内容相匹配的视觉风格。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势


B 端界面设计


1. 侧边栏 Sidebar

B 端设计的火爆带动了 B 端相关模块设计,更多的人也愿意尝试 B 端相关模块设计,侧边栏作为产品架构中重要的导航系统,好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果,也是受限于 PC 屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。Dribbble 的 B 端产品设计已经不再是假大空概念设计,而是一套实用美观可落地的设计。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

2. 仪表盘设计

仪表盘设计是一个很好的隐喻,想象一下开摩托车或汽车主驾驶前面的屏幕,汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B 端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态,大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据,团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同,自定义的仪表盘也各有差异。重要的是突显数据和业务状态,需要分层级系统性去思考和设计。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

3. 流程设计

复杂的事情简单化,简单的事情标准化,标准的事情流程化,流程的事情自动化。流程设计是每一个企业核心功能和业务,可自定义的管理流程系统搭建也是 B 端产品设计的难点,需要对业务高度抽象,让每一个业务人员可自定义的流程才是好的流程设计。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

4. B 端 C 化

B 端 C 化是 B 端产品设计的视觉表现力慢慢往 C 端产品设计的视觉靠齐,国内 B 端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外,由于业务的发展,B 端产品也开始移动化、智能化,国内主流还是通过小程序、H5 来现实 B 端产品 C 端化。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

5. 轻代码化

轻代码化是一种低代码赋能无代码的方式,弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时,又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统,轻松实现多元业务场景的数字化管理。

轻代码化将功能进行打包,升级成全局可以用的配置,技术人员配置好后,业务人员在应用编辑时直接选择使用模版,绑定对应的变量即可使用。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势


界面设计技巧


1. 人文气息

为什么人加色块的组合方式能流行起来?还是 B 端行业流行带动的。B 端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外,还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起,这种人文气息和价值观已经就不言而喻了。

当然企业也需要进行营销,抓人眼球。几千年来的遗传证明了,人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。

这种风格更适合大公司,国内的一些手机厂商 OPPO、VIVO 等也会通过手机+背景+人物来体现科技与人文的结合,而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

2. 毛玻璃效果

毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的顺应当下 UI 扁平化的设计趋势。苹果 Mac OS Big Sur 系统的图标、界面中运用了大量毛玻璃和半透明元素,界面更扁平。至于 C4D 三维彩色玻璃的视频教程可以在 B 站搜索“透光艺术-C4D 创建彩色玻璃的 4 个技法”,完全能满足 UI 设计师。当然还有一个好消息就是 Mac 用户可以享有 OC 一年免费的使用权,具体安装购买方法上某宝就可以轻松搞定,真香。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

3. 轻拟物

轻拟物这几年一直流行,在 UI 设计中趋于稳定的位置。从写实到扁平再到轻拟物,其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光(环境光)五个部分的处理。写实三维的图标等设计更适用于简洁的画面中,扁平等设计更适用于复杂一点的界面中,比如 B 端产品界面中的功能图标。轻拟物可使用的范围更广,效果更佳。Sketch、Figma 软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

4. 简洁设计

简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则,在 B 端产品界面中更加需要简洁设计,我们最熟悉的 Sketch 软件界面已经是相当的简洁了。回到现实当需求功能不断增加,产品界面的编排如何取舍,如何保证界面的简洁是设计师需要深度思考的问题?如何与上级沟通?该功能是否可做可不做?是否需要埋点用数据说话?如果只是一味竞品有我们就需要有,功能不断累加只会让界面越来越重。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

5. 几何图形

几何图形和几何插画有异曲同工之妙,几何图形多为产品界面和宣传内容的抽象,产品界面的几何图形多为占位符形式,加上色彩和几何色块让其成为一个整体。B 端产品视觉设计 C 端化的进程中,几何图形、几何色彩不失为最好的突破口,相信今年Dribbble B 端产品的视觉设计一定会更上一个台阶。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

几何图形另一个场景化的地方就是品牌,作为一名 UI 设计师一定会经历从图标到几何图形到品牌设计的过程,品牌设计的技巧基本还是以几何图形为主,至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

6. 暗黑设计

暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大,如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳,提高在夜间使用的可读性。

在设计暗黑主题时,不能为了突显视觉上的逼格,而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design 给出了暗黑主题的设计准则,即正文和背景之间的对比度应至少为 15.8:1。按照此标准设计,可读性都还不错。这里介绍一个插件“Stark”(Figma、Sketch、XD、Chrome 插件)用来测试界面的对比度。


从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

7. 模块化(组件化)

为什么叫模块化,而不叫组件化,组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面,但在 B 端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提,是否有从 0 到 1 搭建 B 端产品组件的经历是设计师一生中最宝贵的经验之一,它能提高设计师的系统化思维、逻辑思维和抽象思维能力。

产品模块化设计就是将产品分成几个部分,也就是几个模块,每一部分都是具有独立功能,具有一致的连接接口和一致的输入、输出接口的单元,相同种类的模块在产品族中可以重用和互换,相关模块的排列组合就可以形成最终的产品。通过模块的组合配置,就可以创建不同需求的产品,满足客户的定制需求 。


从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

8. 插画

插画作为设计的一大品类,不同的插画师都有自己擅长的风格,本质是都有自己的个性,但是在产品设计中更多是需要共情、共性来讲故事,表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合,插画不会过时,而是需要结合当下和产品找到最匹配的设计风格。

9. 几何插画

几何插画算是插画简化的一种表现形式,人和物的形态不再写实,而是抽象成几何图形拼凑的感觉,同时保留人物形态的神韵。加上几何色块与人物交互形态的表现,传达出简洁、科技的现代感。难点还是在人物形态的表现上,平时多练习练习速写还是很有必要的。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

10. 线面插画

线面插画最近一两年非常流行,准确的说是非常适合。首先线面插画主要是由线条和块面组合而成,用块面表现人物形态时某些结构会表现不出来,这时候用线条简单勾勒后,结构就会清晰明了。其次当线面插画运用在界面上时,可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时,还能保持界面的干净整洁。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势


动效


1. 微交互

界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计,微交互和动效设计是绕不开的,UI 界面设计通过微交互反馈告知用户当前正在发生的事情,所处的状态。细微的动效更能调动用户情绪,取悦用户。C 端产品微交互和动效已经很成熟了,一部分功劳来自 iOS 系统原生自带的效果。B 端产品的微交互和动效更多还是在学习海外产品,还需要给前端工程师灌输微交互和动效的设计价值,共同打造产品体验细节。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

2. Mg 动画

Mg 动画需要很好的节奏感、韵律,每一个场景动画都需要其中的元素进行连接变化,让转场动画更加自然,MG 人物动画通过点线面的动效变化让画面更加有趣、自然,通过粒子效果让特定场景无限循环会让人更加印象深刻。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势


三维


1. 三维图标

MacOS Big Sur 系统图标的更新带动了三维图标的流行,三维图标的应该场景还是需要有较大留白空间的界面,因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上?设计师应该保持开放多元的视角。设计本身也在不断的演化融合,存在即合理。合适最重要,它们都会有适合自己的场景和设计价值。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

2. 轻三维

为什么轻三维在界面设计中占有一席之位?一个是设计师不断追求差异化的产物。另一个是更好的表现内容,并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素,比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等,这些都是用户日常使用系统软件常见的元素,通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角,结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加,特别是当下流行的毛玻璃效果,玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光,局部的渐变色或环境光更加出彩。


从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

3. P4D(PS+C4D)

P4D 是 PS 加 C4D 的设计表现技法,也是视觉设计的最后一个环节,通过 PS 对 C4D 的渲染图片进行调色,利用 PS 的调色技巧可以很好的解决 C4D 打灯光的瑕疵,还可以利用 PS 强大的合成功能,将渲染图片与图片素材进行合成,来表现画面的视觉度,当然三维软件比较难实现的水、粒子、烟花等效果,也可以通过 PS 的后期合成来实现,这也是 P4D 的强大之处。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

4. 卡通 IP

卡通 IP 设计最近三四年技术的迭代已经慢慢的走上成熟,卡通 IP 也从传统的纯 PS 手绘技法,转到 C4D 建模—角色绑定—MD衣服制作—OC渲染—PS(静态)/AE(动态)调色。

卡通 IP 火的本质更适合做营销,相比于品牌或 Slogan,卡通 IP 具有亲和力和画面感。随着各种手办行业大热,受互联网大厂影响下,卡通 IP 已经是互联网 B 轮以上公司的标配了。如果团队中没有这样能力的人,也可以通过绘制好二维,一套三维可以选择外包完成。

对于 UI 设计师来说学习是有成本的,暂时并不是必备技能,如果喜欢完全可以学习,从设计差异化的角度来看三维视觉确实有一定的竞争力。


从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

5. 三维动画

C4D 三维场景动画通过构建实物和场景模拟生活中的现实场景,会让用户体验真实感,三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感,未来在 AR/VR 领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中 C4D 软件对于域、动力学还是有一定的优势。

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势

从 Dribbble 高赞的 828 个作品中,总结出 2022 设计趋势


总结


上一次写 Dribbble 流行趋势还是两年前了,通过两年的沉淀对趋势流行有了更深的认知。十年的互联网行业风风火火,随着最近的互联网裁员潮大家也慢慢的进入到反思层,客观的看待和理解这个真实的世界,曾经的流行趋势也需要慢慢的沉淀下来。

存在即合理,趋势流行稍纵即逝,注定是不长久的,只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注,因为哪有什么所谓的创新,只不过是旧元素的重新组合,并符合当下这个时代人的审美需求。香奈儿的“时尚易逝,风格永存”大概就是这个意思吧。

6000 多字的设计流行趋势,希望能帮助设计师度过互联网裁员的寒春。最后希望以后每年坚持输出设计流行趋势。为设计行业奉献微薄之力。

作者:水手

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

手机及小程序界面设计之一:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之六:让设计更有说服力的20条经典原则:菲茨定律

手机及小程序界面设计之八:如何适配iPhone X?来看滴滴出行的实战案例复盘!








日历

链接

个人资料

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

存档