首页

如何更好的统一颜色规范?这个方法正在成为新趋势!

博博

Hi,我是彩云。咱们平时在做 UI 组件库的时候,会遇到一个问题,定义了很多颜色但在团队合作的时候,却依然还是会根据每个设计师自己的喜好来配色,很难将颜色规范很好的统一起来。这其中有一个很严重的问题就是对于颜色的命名和管理不够清晰,那么今天这篇文章通过一个国外大厂真实的颜色组件升级案例,希望能帮你解决这个难题。

如何更好的统一颜色规范?这个方法正在成为新趋势!

我们花了几个月的时间改进了设计系统 Cobalt 中颜色的处理方式。颜色是 UI 的基本元素:它们构成视觉语言,帮助定义品牌,并被开发和设计师每天用在产品设计中。

但如果我们在使用颜色上没有明确的指导原则,颜色被团队中的设计师按喜好使用时,将会导致产品看起来非常混乱。

如何更好的统一颜色规范?这个方法正在成为新趋势!

我们 APP 中的不一致例子

接下来我会告诉你,我们是如何做好颜色规范以及在整个项目中面临的挑战,正如你将看到的,这个项目并不像看上去那么简单:

  • 如何通过 Getaround 在设计和技术方面管理颜色
  • 概述这个系统的局限性,并说明我们如何改进它
  • 什么是语义颜色
  • 我们是如何实现它的,以及它带来的优势!


我们之前在 Getaround 中如何管理颜色?


1. 在设计方面

如何更好的统一颜色规范?这个方法正在成为新趋势!

和许多设计团队一样,我们使用 Figma 作为我们的主要设计工具。我们的颜色被放在“基础”库中,可以在其中找到我们在产品中使用的所有常见样式,例如字体样式、颜色、图标等。这个库提供了我们每天使用的专用系统库(iOS、Android、Web、电子邮件)。

颜色名称过去是基于它们的外观。例如:紫色颜色是我们的主要颜色,而石墨色是基本文本的常规颜色。

2. 在技术方面

如何更好的统一颜色规范?这个方法正在成为新趋势!

在我们的 APP 中,曾经会用相同的系统来管理颜色。此外,还有一些语义颜色,但仅限于 iOS,开发用的也不多。

我们在旧系统中面临的限制


在使用这个系统时,团队反复面临同样的问题:

  • 如何确保从一位设计师到另一位设计师以相同的方式使用颜色?
  • 如果没有适当的指导原则,我们如何确保开发很好的还原?
  • 如果明天我们必须用全新的配色方案来改造我们的品牌,要怎么快速统一?

让我们试着找出我们是如何陷入这种境地的?

1)没有明确的颜色使用规范

所有设计师都使用相同的色板,但自 2019 年 Getaround 品牌重塑以来,除了引入不一致之外,没有明确关于如何使用它们的规范,所以设计师在选择颜色时迷失了方向。

然后他们将开始建立自己的参考资料,每个设计师都有不同的配色想法。

如何更好的统一颜色规范?这个方法正在成为新趋势!

例如:设计师应该在所有这些灰色阴影中为次级文本选择哪种灰色?颜色命名在这里不是很有帮助

2)旧品牌的设计包袱

以前品牌的一些旧颜色仍在使用(按钮上的蓝色阴影,标题……)。到现在也没有真正的行动计划来迭代它们。

如何更好的统一颜色规范?这个方法正在成为新趋势!

旧驱动器品牌


我们对新系统的设想


在 2021 年初,我们有机会为我们的 iOS 和 Android APP 来制定长期的 UI 规划。

我们问自己“5 年后我们的 APP 会是什么样的?”。我们会回顾,Getaround 品牌是如何成为我们视觉方法中心的。

如何更好的统一颜色规范?这个方法正在成为新趋势!

以上是我们品牌和设计团队在 2020 年完成的全面工作的一小部分

致力于设计系统的 Cobalt 团队借此机会重新考虑了颜色系统。然而,为了使这一目标成为现实,我们面临着一些挑战:

1)制定指导原则

我们如何确保每个设计师都可以依赖易于理解和使用色彩系统?拥有一个简单系统将加快使用速度。

2)颜色能通过可用性标准

我们如何确保从一开始就设计出易于使用的颜色?

3)易于维护并符合未来趋势

我们如何才能使系统易于维护并符合现在和未来的行业标准(例如:暗模式)


我们新的颜色系统:语义颜色


在我们的探索阶段,在 Figma 的共享环境中工作促使我们保存和记录我们所做的设计决策。就像我们应该如何命名我们的强调色:(主要?强调?)

我们还测试了 APP 界面在黑暗模式下的外观,以及如何正确支持这一点。我们应该创建一个单独的调色板还是为每个组件都创建一个深色版本?我们开始与开发讨论这个问题,以了解他们有什么解决方案来处理这些问题。

语义颜色的概念很快就被开发人员提出来,因为他们知道并且很好地使用了这个概念。但对于设计师来说,又要如何准确理解呢?

1)什么是语义颜色?

语义指的是根据颜色的使用方式而不是色调来命名颜色的方法。

如何更好的统一颜色规范?这个方法正在成为新趋势!

例如,你可以将颜色命名为“成功”或“积极”,因为它指的是含义,而不是“绿色”或“翡翠绿”。

甚至可以根据颜色在屏幕上的应用方式来命名颜色,例如背景颜色、按钮背景颜色、文本颜色、图标颜色等……

2)从基于外观的配色方案到基于语义的配色方案

如何更好的统一颜色规范?这个方法正在成为新趋势!

如何更好的统一颜色规范?这个方法正在成为新趋势!

语义颜色并不新鲜,越来越多的产品开始采用这种方式来定义颜色。我们可以从下面一些大厂的颜色规范来学习

google: https://material.io/design/color/the-color-system.html#color-theme-creation

Apple: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color

Shopify: https://polaris.shopify.com/design/colors#navigation

Asana: https://asana.com/brand

显然,这种颜色系统有很多优点。因此,现在让我解释一下我们如何在实践中将这个概念应用到我们的产品中。

3)深入研究语义颜色

我们的新颜色系统由两部分组成:

  • 基础色板
  • 语义颜色

如何更好的统一颜色规范?这个方法正在成为新趋势!

基础调色板

我们与品牌团队密切合作,他们定义了一个全新的品牌,我们在工作时会围绕这个品牌考虑。

该品牌的每种颜色都采用多种色调进行调整,以创造更大的灵活性,一次构建成为基础调色板。它代表可以在产品中显示的所有可能颜色。团队可能不会全部使用它们,但他们会选择在产品中效果最好的那些。

如何更好的统一颜色规范?这个方法正在成为新趋势!

基础调色板

语义颜色,语义颜色建立在用作参考的基础调色板之上。正如我之前解释的,命名不再是指颜色的“外观”(洋红色、棕色、绿色……),而是指UI 元素它们被应用于(文本、图标、按钮、背景……)以及该元素的状态(活动、非活动、成功……)。

请参阅此处的命名法和一些示例:

如何更好的统一颜色规范?这个方法正在成为新趋势!

语义颜色结构和示例

这意味着来自基础调色板的颜色可以用于多种语义颜色:

如何更好的统一颜色规范?这个方法正在成为新趋势!

这就是我们根据这个新原则重新调整颜色命名的方式:

如何更好的统一颜色规范?这个方法正在成为新趋势!

如何更好的统一颜色规范?这个方法正在成为新趋势!

我们通过设计师和开发进行了内部用户测试,以确定命名语义颜色的最佳方式。

我们尝试了很多不同的命名方法,发现过于详细的命名系统对于我们的团队和产品的规模来说维护和使用太复杂了。我们决定做一些简单的维护,同时在命名方面有足够的延展性。

如何更好的统一颜色规范?这个方法正在成为新趋势!

如何更好的统一颜色规范?这个方法正在成为新趋势!


语义颜色的好处


1)语义色彩嵌入设计原则

语义颜色侧重于颜色的用途。它消除了设计师和开发对使用什么颜色的盲目猜测,因为视觉语言直接传达了设计决策。

如何更好的统一颜色规范?这个方法正在成为新趋势!

例如:在这里,颜色命名使设计师更容易做出正确的选择。在我们的原则中, *Accent* state 用于交互元素。

2)解锁黑暗模式

语义颜色可以适应不同的主题。语义颜色的名称始终相同,但它的外观可能会根据所选模式而改变。例如,语义颜色“主背景”可以指浅模式下的“白色”和深色模式下的“黑色 500”。根据用户选择的模式,将自动显示正确的颜色。这对我们的设计系统来说是一个真正的游戏规则改变者,因为它将使它更加面向未来。

如何更好的统一颜色规范?这个方法正在成为新趋势!

明暗模式下的语义颜色 Primary.Background

3)语义颜色高效灵活

如果我们将来要更新颜色,使用语义颜色也会变得更容易。假设我们想要将我们的主色更改为蓝色。我们只需要将基础调色板中的“紫色”更新为“蓝色”。与该颜色相关的所有语义颜色也将神奇地更新。

另一种情况可能是更新特定 UI 元素的颜色,例如按钮,而无需触摸使用紫色颜色的其他元素。在这种情况下,我们只需要更新 ButtonBackground.Primary 颜色,非常简单。

如果没有该系统,更新颜色将需要经过大量 QA 以确保将更改应用到任何地方。

如何更好的统一颜色规范?这个方法正在成为新趋势!

4)颜色组合指南

这个系统似乎很容易使用,但设计师仍然有一些问题:

  • 我什么时候可以使用正常文字颜色?
  • 我什么时候可以使用次级文本颜色?
  • 我什么时候可以使用可交互颜色?

为了帮助设计师选择颜色,我们创建了一个交互式指南,列出了所有可能的颜色组合。

我们在 figma 原型中创建了这个指导原则,每次更改设计系统颜色时都会更新该规范。它突出了允许的语义颜色组合,以最大限度地保持一致性。

如何更好的统一颜色规范?这个方法正在成为新趋势!

Figma 中内置的语义色彩交互指南

如何更好的统一颜色规范?这个方法正在成为新趋势!


结果


采用这种新的颜色系统产生了一些变化:

1)我们从“Foundation”库中提取颜色,并将它们分为深色和浅色模式。这一举措使我们能够使用 Figma 开关功能轻松地将设计文件从 Light 切换到  Dark 模式。这也使库更轻且更易于维护。

如何更好的统一颜色规范?这个方法正在成为新趋势!

2)语义颜色已在我们的 iOS 和 Android 应用程序上成功实现,我们现在正在努力在我们网络平台上使用相同的系统。我们很快就会有一个集中的配色方案来处理所有系统上的颜色。


总结


总结下今天学到的内容:

1)发现并准确描述团队在使用颜色时遇到的问题

2)如何从提出设想,到以新的方式来定义颜色

3)如何通过语义化颜色来使得大家更方便的使用颜色,我们也可以在自己的组件库中多使用语义化的颜色来进行命名管理,这样团队协作才会更加高效。

作者:彩云Sky¹

转载请注明:优设网

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

魏华的微信.png

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

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

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


如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

博博

B 端产品主要是 Web 端产品,空间大、操作多,内容相对复杂。需要通过页面布局或者视觉设计表达出明确的逻辑关系,从设计角度降低用户的学习成本。而用户有固定的认知规律。格式塔原理揭示了人类视觉的认知是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。

格式塔主要包括 7 个基本原则:

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

今天我们就来总结下,格式塔原理在 B 端产品中是如何应用的?

接近性原则


我们先看 2 张截图,分别是不同分辨率下的界面效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

可以明显的感觉到高分辨率下,菜单列间距离较大,菜单的归属关系很清晰。而低分辨率下,菜单间的距离变小,特别是后面两列的菜单会给人混在一起的感觉。这就是格式塔原理中的接近性原则,距离近的关联亲密,距离远的就各自独立分组。

当我们想要传达给用户层级关系时,就需要善于利用接近性原则。例如表格上方的功能按钮,通常我们将高频、核心操作放置在左侧,低频、辅助功能放置在右侧。通过增大元素间的距离,达到功能分区的目的。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

相似性原则


相似性原则是通过颜色、尺寸、图形等方面的共同属性,实现信息的分组或者高可读性。

例如在可视化图表中,不同范围值的指标采用不同的背景色。通过背景色的差异,将同一范围内的数据形成视觉关联,提高用户对信息的识别效率。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

通过图形尺寸的相似性也可以构建内容分区。例如阿里云、腾讯云控制台的首页,都采用了双列设计,左侧主要以高频的业务功能信息为主,右侧是辅助运营信息。两列尺寸宽度有明显差异,用户会将相同宽度的卡片归为一组。这样有助于用户理解两类卡片的内容差异,并有效地突出业务信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

闭合性原则


IBM、苹果的 Logo 设计,无论是“用刀砍过”,还是被“偷咬了一口”,用户仍然可以识别出完整图形。这就是视觉闭合性原则的一种表现方式。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在 UI 设计中,则会通过对齐方式,形成虚拟空间。例如下图中阿里云通过明显的背景色、阴影等手法形成有形的内容空间。而微信公众号则是平铺背景色,内容区借助标题、卡片对齐形成视觉闭合空间,最终将页面划分为左侧导航菜单和内容区两个空间。视觉表现上更轻量化。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

另外闭合性是需要元素之间相互辅助的,单独的元素无法构建出闭合空间。以下图为例,虽然四个小的卡片做了间距分割,但是由于界面整体上是横向分割的。我们会将 4 个卡片看作是整体元素去理解和认知。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

连续性原则


用户更习惯于从左到右的横扫阅读,因此连续性主要体现在横向空间中。

下图中,虽然左侧的标签文字与右侧的内容信息有较为明显的间距,高度尺寸差距也比较大。但是用户不会将内容看作是 4 个独立的个体,而是理解为两组信息。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

在某些场景中,如果信息平均分布,不会产生连续性的视觉感知。

例如下图指标监控中,指标都是采用小卡片,间距、尺寸较为统一。这种情况下用户就很难对信息分组处理。在我看来这些指标只是一个个的视觉散点,没有明确的视觉重点。用户无法感知到内在的逻辑性。用户想要找到某个指标时,需要逐个检索,花费的成本更高。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

简单对称原则


通过上述很多图片,我们可以看出页面元素基本都是横平竖直,中规中矩的元素和分割方式。或许有些单调乏味,但是胜在简单,不会带来额外的视觉噪点。

特别是 B 端产品,基本看不到异形的存在,甚至全圆角矩形都很少见到。即使有异形,也只是作为视觉表现元素存在于内容中,而不会作为空间的划分边界。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

主体与背景原则


主体与背景原则最典型的应用就是蒙版弹窗。通过拉大主体与背景的差异性,凸显弹窗信息。

当我们需要着重表现内容时,同样适用于主体与背景原则。例如登录界面的设计,会通过差异化的背景、阴影等方式,带给用户清晰的视觉层级,适当凸显输入框的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

而 B 端内容区是核心空间,基本都是采用纯白背景,与页面背景形成对比,从而占据信息的主体地位。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

共同命运原则


共同命运原则听起来有点玄学,指的是相同运动特征的元素会被认为是同一组或者是具有相关性的内容。运动的元素在 B 端产品中应用很少,我没有找到合适的案例解释这个原理。

在移动端产品中有些应用案例。比如 iOS 系统中,桌面布局编辑态下抖动的图标,可以与静态不可编辑的内容形成隔离效果,视觉引导性更强。同样今日头条频道编辑时,也采用了抖动效果。

如何在 B 端设计中应用格式塔 7 大原则?来看详细分析!

总结


虽然 B 端产品没有 C 端色彩丰富,表现力上没那么炫酷。但是两者对信息传达的要求是一样的,要求和谐、有序、层次分明,辅助传达内在的业务层信息。灵活地运用格式塔原理将对产品的体验提升会有很大的帮助。

格式塔原理不仅限于视觉表现,产品经理或交互设计师在原型设计时,也要重视格式塔原理,辅助设计方案表达,提高团队间的协作效率。

今天的分享就到这里了。如果有更好的案例,欢迎评论区留言分享给大家~


作者:子牧先生

转载请注明:优设网

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

魏华的微信.png

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

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

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



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

博博

很多人很喜欢国外的极简设计,先不看 Dribbble 上五花缭乱飞机稿,哪怕是博客编辑器 Wix.com 上的模板看着都很令人羡慕。为啥国外的网站都那么极简,国内就学不来呢?

十年前,我以为这是因为国民审美和设计师水平没上来。现在,我发现这件事情没那么简单啊!假想一下,你去下一个国外的极简 UI 模板来,把文字改成中文,评审时能过稿吗?

为什么千万别随便学国外的极简设计?

我估计十有八九过不了,产品经理肯定有一大堆信息、功能和运营入口要塞进去。可这应该怪万恶的资本主义,为了赚钱而不把审美自由当回事吗?


用户期待差异


尼尔森(Jakob Nielsen)和 Yunnuo Cheng 在 2016 年做过一次研究试验,发现不光是中国的公司决策层,就连中国的用户也未必就喜欢非常极简界面。

这次研究中,12 个中国人和在中国生活的外国人(应该是欧美为主)被邀请来,在 8 个网站上完成简单的任务,并且一边使用一边说出他们的想法和意图(Think Aloud)。

P.S. 这 8 个网站中有简洁的也有复杂的,对中国人展示中文,对外国人展示英文,以此形成对比。

很多外国人在使用较为复杂的网站时(被翻译成英文的中文网站),抱怨比较多。他们在中国生活,对这种网站设计已经见怪不怪了。

虽然也有人说好话,称赞信息展示明确直白,但也有人抱怨很难用的。至少大部分外国人对于复杂页面的问题比简洁页面的问题要多得多。

为什么千万别随便学国外的极简设计?

而相比他们,中国人普遍不觉得那些复杂页面有什么特别的,因为那些很“普通”、“正常”,甚至“传统”。

相反,抱怨简洁页面难用的反倒更多,例如:

“单从设计角度来看,图标、图片、布局都很好,符合很多人,至少年轻人都喜好。简单、干净,既没广告,又没有无用信息。但问题是,它也没什么有用信息——我在这些网站里看不到什么有用的东西。所有的功能介绍都只是在玩文字游戏,没有实际含义,没点真实内容。”

P.S. 以上是从英文资料的翻译。

为什么千万别随便学国外的极简设计?


中英文语言差异


中文的信息传递效率就是比英文高,我们也早就习惯了这一点。《联合国宪章》被翻译成六种语言,其中就数中文最薄。

为什么千万别随便学国外的极简设计?

2017 年,Twitter 把原有 140 个单词的限制放宽到了 280,却唯独没有把这改版提供给中文、日文和韩文,理由就是语言密度足够大了。

为什么千万别随便学国外的极简设计?

所以说,中文用户对单页信息量要求更高,这就是很正常的事了。


视觉密度差异


同样的一句话,虽然中文更简短,但是视觉密度更高啊。

为什么千万别随便学国外的极简设计?

会点排版的人都知道,视觉密度的节奏很重要,要全局考虑的。如果有一个地方的视觉密度比较高,那么整个页面的视觉密度都要匹配上才能和谐。否则一下子太疏一下子太密,就会丧失统一感。中文的间隙和比划之间的间隔都比较小,也注定了页面的其它部分为了匹配上这个节奏,不能太疏。

为什么千万别随便学国外的极简设计?

这就是为什么,把一些英文板式直接拿来填充中文会很奇怪。难怪我去一些繁体中文网站时,会感觉比简体中文网站更复杂拥挤。其实咱们大陆地区由于使用简体字,视觉密度已经比繁体字要松很多了。

为什么千万别随便学国外的极简设计?


简洁 ≠ 好用


说到这里,不是要为一些又复杂又不好用的设计进行辩解。只是说,简洁并不代表好用。当我们随口说出“少即是多”这种设计概念时,也不可忽视,凡事都有个度。看到国外那种极简设计时,也稍微自信点,简洁并不是我们唯一追求的方向。

作者:体验进阶

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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

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

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

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

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

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

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

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






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

博博

20 世纪末到 21 世纪开始,宣传品牌与产品的阵地不再局限于印刷品,电视、电台及现场活动,而是出现了网站,网站可以链接更多陌生人,而且没有时空限制。

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

1997 年的谷歌网站

美国最火的设计风格只要有人将资料放到网上,远在日本的一名中学生都可以去学习了解,所以也打破了过去信息差的优势。本回我们要跟大家聊聊网页设计的发展,但在展开内容前,要搞清楚一个问题,就是网页设计属于平面设计吗?

国内早在差不多 20 年前,建站公司就开始独立存在,所以这个问题蛮有争议,尤其是 UI 设计也很成熟之后,大家更愿意认为此学科是独立的。

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

中国建于 1994 年的第一个网页,主要对外沟通

平面设计的定义不管怎么粉饰,简单而言就是:以某种目的,将文字、图像、图形安排在一起。网页设计也是如此,唯一区别是网页具有动态,但这种动态属于若干个静态设定的切换关系,其关键帧也是平面设计。

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

2003 年时候的淘宝网

我在国内蛮早就从事网页设计工作,早年甚至可以自己独立完成网站,除了页面设计,还包括套 ASP 程序(Active Server Pages 动态服务器页面),用 table 布局前端等,当然这些技术如今早已过时。

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

12 年前史太浓独立完成的网站

因此这段历史我就是参与者之一,所以本回不仅是对搜集资料的剪裁分析,还会结合不少自身经历体验跟大家分享。

首先我们来简单回顾下互联网的发展与网页设计的演变。


国际互联网络与超级媒体


互联网发展到如今已经像空气一样存在,断网已经如同缺氧那么严重,而互联网的诞生最初跟两件事情相关。

第一件大家也许比较熟悉,就是在 20 世纪 50 年代末美国国防部高级研究项目总署(the United States Department of Defense,Advanced ResearchProjects Agency,简称 ARPA)成立了。

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

美国国防部高级研究项目总署 logo

其成立的根本原因是冷战背景下,苏联不但先于美国在 1957 年将卫星送上太空,而且世界第一枚多级远程弹道火箭发射也试验成功,因此苏联宣称可以将核弹送往地球任何地区。这对美国而言实在太吓人,所以 ARPA 是一个专门研究国防技术的“事业部”,聚合美国当时最牛的几百位科学家,研究如何将最先进技术应用到美国国防。

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

人类第一个卫星由苏联在 1957 年发射

由于这些科学家当时分散于全国各地,因为如此厉害的科学家肯定本身有重要事务,而不是放着随传随到,因此大伙无法专门聚在一起专门干这事,而是远程协作,所以就需要一个有效的远程沟通工具。

这个工具不能只局限于语言声音,还要做到资源共享,更关键的是要高效安全,信息不可被盗取,当时负责研究此事的人是麻省理工科学家约翰·利克利德(John Licklider)。

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

麻省理工科学家约翰·利克利德 

此处省略一堆过程与专业技术术语,反正如此这般,利克利德因为 ARPA 组织这个沟通交接需求无意中发明出“国际互联网网络”(the World Wide Web)。

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

互联网时代开启

事后证明,国不国防是一回事,这才是他们最伟大的发明。这种技术能做到资源共享与防止盗取的一个重要原因是可以将信息分解成“数据包”,将他们发送到目的地后可以重新组装,也就是“分组路由”的雏形。大家了解到这个程度就可以了,再往深里说意义不大,况且我也说不清楚,

而时间很快去到 1987 年,这是第二件事情,这一年苹果电脑公司向外界报道了一款可在网络上寻找资料的软件,名为“超级文件”(Hypertext)。

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

苹果 1987 年的“超级文件”软件

比如在电脑上打“设计史太浓”就可以将当时整个网络与此相关的文字内容集中起来(当时网络上的内容其实非常有限),等于是谷歌百度的前身了。

后来这个软件进化为“超级媒体”(Hypermedia),除了可以检索文字,还可以找到图形、声音、电影及电视图像。

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

苹果软件“超级媒体”软件

再然后,苹果公司将这种技术跟日本索尼公司发明的 CD-ROM(compact disc read only memory,于 1982 年发明)进行结合,变成“互动光盘”,这种光盘就等于是如今网站的鼻祖版本了。在大致容量 600MGB 的 CD 中,苹果公司的工作人员往里面塞进了文字、图形、动画,而且形成一个复杂的索引架构。

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

CD-ROM 中的互动界面 

这样一来就形成一个灵活且可互动的内容库,大家可以根据需要选取想看的部分,有首页、二级栏目、三级栏目、内容详情页等。在此过程中还发明设计出一些后来常见的网站架构逻辑,比如“平行文本”、“多层”“矩阵”“网络系统”等,这里作很简单的介绍:

平行文本就是可以在看一篇文字时候可一边看到它相关的摘要跟缩写,这等于如今的鼠标经过效果。

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

网页中的“鼠标经过”效果

多层就是看一个内容的时候可以看到其它相关部分,等于如今网站中的“相关推荐”。

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

网页中的“相关推荐”效果

矩阵就是将资料布局到一个网格中方便大家查询,等于现在的产品系统,新闻系统一类。

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

网页中的“产品系统”效果

网络系统就是可以联系外部信息,其实就等于友情链接一类了。

当时间去到 1991 年,美国政府开始投入资金将“互联网”引入公共学校,而经过 6 年,世界上就有 3000 万个网络用户,2000 年左右,美国就有三分之一的家庭实现了联网。有流量就有商机,于是就有人将“互动光盘”这样的呈现方式搬到互联网上变成网站,变成一种宣传展示的渠道,不亦乐乎。

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

90 年代可口可乐的官网

所以最初的“互动光盘”设计其实就等于第一代网页设计。


网页设计的高速发展


1994 年时候,中国有个人因为公务出差去美国见证过互联网的神奇,回国之后辞职,在 1998 年创立了一个如今市值 1.8 万亿的公司—阿里巴巴,这人就是马云。

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

阿里巴巴早期的网页设计样式

20 世纪 90 年代恰好是网站建设数量急剧暴增的时候,充满了商机,大家可以理解为近几年短视频暴增一样,根据回顾统计,在 1997 年时候仅仅一年美国本土就新增了 80 万个新网页。

所以用“网页”一词是因为最初蛮多网站都是静态,网站后台是后来慢慢才发展形成。

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

1997 年时候的麦当劳网站设计

但网页设计最初的暴增还没有直接为平面设计师创造岗位,因为第一代网页设计师其实大部分由程序员转型而来。后来不断发展竞争升级才将程序、前端、网页设计及推广优化这样的岗位分来,以便有更专业的表现。

我在 2010 年时候开始从事网页设计,恰好是一个将网站建设不同岗位独立出来的时代。当时我所在公司中企动力属于国内最大型建站公司,大部分老同事都曾经是程序前端设计甚至推广这样一条龙为客户提供服务。

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

史太浓在 2010 年前后的网页设计

他们本质上就是从一名开发人员入行,所以他们会从实现效果端来规划设计,跟后来网页设计岗独立后完全不同。蛮多网页设计师其实根本不管程序实现问题,也因此产生出更多更好的视觉效果,反推程序开发与前端制作的进步。当时在公司经常见到的就是网页设计跟前端或者开发同事“干架”,争论要点就是很多效果程序根本做不出来。

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

史太浓在 2010 年前后的网页设计

这样的事情其实一直在全世界发生,所以网站制作技术也是以飞一般的速度在发展。比如我刚刚学会 Table 布局不久,css+div 布局就成主流了,再然后 HTML+css+js 也成熟起来,而程序开发端则是 asp 到 asp·net 到 php 到 java 等不同开发语言在不断进化。

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

史太浓在 2010 年前后的网页设计

这样的变化结果就是不断优化网页设计的表现效果。

那时候我们往往在掌握一门自认为很牛的必杀技后不到两年就也许会过时,最典型例子莫过于 Flash 的“死亡”。2010 年前后,懂得用 fash 建站的人非常吃香,因为人才稀缺,收入可以是我们的 2-3 倍,那时候最流行就是用 flash 做所谓的“体验馆”。

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

全 Flash 网站

“体验馆”的大致效果就是能在网站场景中做一些换部件,换颜色,或者点击指引箭头切换画面等操作。印象中当时有一个奢侈品平台站就是纯 flash 网站,开发制作费用高达 300 多万。

但好景不长,因为智能手机的崛起与 4G 通信技术的发展,互联网的主阵地慢慢往移动端迁移,而智能手机中的浏览器是明确不支持 flash 组件的。所以很快 flash 就跌落神坛,而我们这一代网页设计从业者可以说见证了全过程。

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

全 Flash 网站

当时身边就有同事因为精通 flash 被挖去甲方企业开发纯 flash 的眼镜商城,据说后来项目就没发展起来。

说到商城,网页设计还有一个重要的主题变化,就是从企业网站到平台网站到电子商城再到手机网站,App 应用,公众号,小程序这样的不断切换。到了移动端其实网页设计就被“UI 设计”(User Interface 用户界面)这样更专业化的称谓取代。

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

史太浓 2013 年前后的 UI 设计

因为革命性的屏幕触摸技术的诞生,很多网站本身就可以通过触屏控制,所以从定义上来说,UI 设计可以说包含了网页设计。

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

史太浓 2013 年前后的网页设计

随着移动互联网的不断发展其实也拔高了 UI 设计门槛,因为要考虑很多交互体验问题与技术规格标准,有点像当时乌尔姆学院做产品设计那一套,有很多理科属性的知识融入进来。

所以网页设计经过仅仅 30 年的发展,就走向细分领域的拆解,分裂出企业网站设计(偏向品牌与广告)、电商设计(偏向营销)跟移动端设计(偏向交互体验)。

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

史太浓 2018 年前后的电商网站设计

但不管如何,这个过程中平面设计的本质属性仍然没变,只是要解决的问题更多元化,更具体了。

根据历史纪录,美国的设计师杰西卡·哈芳德(JessicaHelfand)是较早以平面设计师身份参与到网页设计中的,比如 90 年代她为美国“发现频道”设计了网站。

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

美国“发现频道”90 年代的网站

哈芳德生于 1960 年,目前还活跃于设计圈,她也许是最有资格感叹互联网设计形式剧烈变化的人之一。

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

杰西卡·哈芳德

本期内容没有谈及太多具体人物及作品,因为在有限篇幅里本期内容已经高度浓缩,更多是在给大家整理一个框架。

关于网页设计发展的经历,也欢迎大家根据自己的体会参与到讨论中,说出你们的故事。

本期故事讲到这里,感谢各位,下期再会!

作者:设计史太浓

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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

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

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

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

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

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

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

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








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

博博

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

移动端网页在今天虽然已经变得越来越重要,但我们在日常使用中依然会遇到一些糟糕的页面。近日,开发者Umer Mansoor就总结了开发移动网页时应该避免的“七宗罪”。

在移动端方寸地,有细节才能抓住用户,可以参阅这《60个以小见大的设计细节!》,保证会学到很多。还有,记得不要犯《ANDROID应用中十大常见UX错误》


一、页面加载缓慢:


众所周知网页加载速度是网站性能的一项重要衡量指标,毕竟很多时候用户并不总是在WiFi状态下浏览网页,所以加载缓慢无疑是移动页面七宗罪之首。移动网页在设计时应该避免集成过多高分辨率的图片以及累赘的脚本文件。

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


二、排版凌乱:


当网页映入眼前,凌乱的文字排版当然也是访客难以忍受的。就像人们在现实生活中倾向于和思路清晰的人交流一样,当用户和网页“交流”时也希望能快速找到自己需要的信息。所以杂乱的排版同样是移动网页应该避免的设计误区之一。比如Eurosmartz的移动版完全不像是为移动设备设计的网页。


三、导航功能不易使用:


随着移动设备性能的提升,很多移动网页设计者倾向于在移动端堆叠更多的内容,这时导航功能就变得必不可少了。可诸多移动页面在设计导航功能时又没有足够重视其可操控性,比如按钮太过紧密、链接间距过小、菜单过于隐蔽等等。各种社交网站的点赞功能尤其容易在滑动网页时误点击。蹩脚的导航无疑严重影响了用户和网页“互动”的过程,以至于有些用户要“抱怨”自己手指太肥。

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


四、桌面端和移动端页面风格差异巨大:


某些时候我们可能会遇到一些桌面端和移动端页面风格差异巨大的站点,比如Toybox。一些对此站点不熟悉的用户在从Toybox的桌面端跳转到移动端时,也许很难意识到这是同一个网站的两个不同版本。虽然Toybox桌面端的动态效果挺好,但这种会给用户造成极大困惑的设计明显难以得到用户的喜爱。


五、弹窗:


网页弹窗在桌面端已经令用户厌烦不已,可不幸的是一些移动端的网页设计者还是把其带到了移动页面上。毫无疑问由于移动设备屏幕尺寸的限制在移动端弹窗明显会有更好的传播效果,但无疑也会遭受到用户更多的厌恶。

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


六、自动重定向:


当用户使用iPad访问某一个网站时将其自动重定向到适配iPad的版本,这听上去的确是一个好想法,可在实际操作中一样会遇到问题。比如当一个网站的移动版由于以上的种种问题让用户感到难以接受而想切换回桌面版时,自动重定向基本上让用户陷入了死循环。此外由于重定向而导致浏览器无法打开网页的现象也时常出现。所以在使用自动重定向功能时应该三思而行。


七、横幅广告:


作为用户当然可以理解网页开发者在页面上设置一些广告,可横幅形式的广告无疑应该被归为“七宗罪”之一。从互联网的发展历程来看,横幅广告的思维好像还停留在1999年,可现在已经是2013年末尾了。

总结看来,Umer Mansoor列举了页面加载缓慢、排版凌乱、导航功能不易使用、桌面端和移动端页面风格差异巨大、弹窗、自动重定向、横幅广告共七种让移动页面体验糟糕的“罪恶”。如果自己设计的页面中包含这其中的某些项,也许是时候考虑做一些改进了。

作者:程远

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

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

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

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

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

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

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

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

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

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

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








图标定制设计之九:不止画图标!5 个金刚区的交互设计思考

博博

金刚区是什么,想必大家都有所了解。

没有的话看这张图就懂了:

不止画图标!5 个金刚区的交互设计思考

图片来源:淘宝首页

我在微信上搜了一下,发现大部分讨论金刚区设计的文章,都是在讲怎么画图标。

但是我自己在使用各大 APP 的过程中,发现很多金刚区并不是那么好用,而且这跟图标好不好看无关。

金刚区设计不好,会对我的使用造成直接影响:

  1. 不够清晰易懂根本不想去看
  2. 首次使用找不到需要的内容
  3. 下次使用记不住图标的样子
  4. 图标设计得怪怪的不好理解

我今天就来总结一下,对于金刚区设计的交互/体验思考:

  • 数量
  • 顺序
  • 颜色
  • 样式


数量


金刚区里有多少项比较合适?

这其实是米勒法则(Miller’s Role)的典型运用了。

如果你还不太了解米勒法则,看看下面这张图里的词语:

不止画图标!5 个金刚区的交互设计思考

现在,半分钟回忆一下,你记住了多少个?

……

大部分人能记住 5~9 个。

米勒的研究发现,普通人的工作记忆(Working Memory)只有 7±2 个信息块。

如果给的信息超出了这个数字,大部分人也只能记住这么多。

所以说,金刚区里的图标数量,最好也维持在这个数,否则就是对用户的记忆能力要求过高了。

通常来,4 个图标很轻松,说 6 个图标是比较理想的,8~9 个就有点吃力了,10 个就超纲了。

例如支付宝这个就过分了,好在这只是工具类产品,复杂一点也没办法:

不止画图标!5 个金刚区的交互设计思考


顺序


人们在看阅读文字时,视线轨迹是之字形:

不止画图标!5 个金刚区的交互设计思考

人们在阅读表格时,视线轨迹是除草机形:

不止画图标!5 个金刚区的交互设计思考

上图来源:这样设计表格,看着真难受!

虽然金刚区的眼动图我没有,但第一步肯定是从左上角开始往右扫。

不止画图标!5 个金刚区的交互设计思考

所以,用户最有可能使用的图标,应该从左到右排在最上面一行,最不常用的可以排在右下角。

例如美团外卖这个设计,看着就挺合理。不但把重要内容放在第一行,而且还做了很大的视觉区分:

不止画图标!5 个金刚区的交互设计思考

不过一些不愁流量的 APP 会选择把黄金位置用做商业宣传,难免损失点易用性。


颜色


1. 仿真图标

如果追求质感,多半会使用物品本身的颜色,例如每日优鲜这个:

不止画图标!5 个金刚区的交互设计思考

这种图标就没什么颜色好讨论了,注意一下整体和谐就好。

2. 数量较少

如果图标数量不多可以使用一个颜色,那么颜色上,同样没什么好讨论的。

例如 QQ 音乐:

不止画图标!5 个金刚区的交互设计思考

3. 数量适中

如果图标数量在 7 个左右或以内,那么可以每种颜色的图标都来一个,这样用户也能记住大概什么颜色代表什么。

例如京东这样:

不止画图标!5 个金刚区的交互设计思考

4. 数量很多

图标数量远超过 7 时,就不可能每种颜色来一个了,否则颜色都不够用了。

如果还是想要划分颜色,可以将类型作为依据,这样用户在寻找图标时会比较有方向。

当然,其实也可以简单点,干脆都一个颜色,例如联通手机营业厅:

不止画图标!5 个金刚区的交互设计思考


样式


1. 底框

一些产品为了统一感,会用圆圈或者圆角矩形,把所有图标都框起来。

这样视觉上是好处理了,但交互上很不推荐,因为会大大降低图标的识别度,乍眼一看都长一样。

这种底框在主流产品里已经很少见了,不过这么做的设计师还是不少:

不止画图标!5 个金刚区的交互设计思考

这种图标数量少,有颜色区分还好,如果数量多又一个颜色,那就很难辨认了。


风格


纵观常见的金刚区图标,通常不外乎四种样式:线条、形状、2D、3D、仿真。

不止画图标!5 个金刚区的交互设计思考

联通手机营业厅

不止画图标!5 个金刚区的交互设计思考

QQ 音乐

不止画图标!5 个金刚区的交互设计思考

京东

不止画图标!5 个金刚区的交互设计思考

美团外卖

不止画图标!5 个金刚区的交互设计思考

每日优鲜

任何样式都能让用户识别和记忆,但是不同的样式给人的感官不同。

真实性越高的视觉样式,就越容易给人高级的感觉;相反真实性越低的视觉样式,越容易给人简单边界的感觉。


总结


我发现做设计时,从不同的角度会带来截然不同的思考。

今天这篇分析,算是一个以交互体验为主,融合了一些视觉角度,希望带给大家一些灵感~

作者:ZoeYZ

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考





图标定制设计之七:为什么别人的图标设计又快又好?来看高手总结的知识点!

博博

在内容为主的用户界面设计上,图标起到了降低理解成本、高效传递信息等举足轻重的作用。随着矢量格式与高分屏的普及,对图标字体的精细度与视觉匹配度也有了更高的要求,这对设计师来说也是一个不小的考验。本篇将介绍目前业界优秀的图标案例,并以日常图标绘制中遇到的问题,解析背后原理给出对应解法。

注:以下部分示例仅为个人处理方法,仅供参考。

本期提纲:

  1. 业界的优秀案例
  2. 矢量规格的效率画法
  3. 图标绘制的注意点
  4. 图标中的平衡


业界的优秀案例


“SF Symbols” 是苹果为 San Francisco 系统字体设计的一套内置图标合集,每个符号图形都能与所有磅重、大小的文本进行自动对齐,达到与字体无缝结合的效果。目前已更新到 3.0 版本,根据应用界面中各种使用、展示场景,默认提供 3,200 个符号各自拥有 9 种磅重,设计师可根据官方提供的合集库直接引用到设计稿中,或使用符号模板来添加自定义图标。

1. 多种磅重

“SF Symbols” 拥有与 “San Francisco” 字体相呼应的 9 种字重,在字母参考线(字母顶线与基线)下支持 Small、Medium 和 Large 3 种显示比例,总计 27 种样式,以达到与各个字形最佳的匹配效果。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图形磅重与比例参考表

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图形比例与字形排列参考

2. 字形参照定位

以字体设计方式处理图形的垂直定位,在设计图标时需要将图形中心部分放置在模板基线以上的位置,系统读取时将根据图形基线计算图形的 baselineOffsetFromBottom(基线与底边的偏移值)进行垂直定位,使图形与文本的基线一致,达到图形和文本水平视觉对齐。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图形参考线

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

相同基线下对齐效果,使图形重心处于小写字母区域

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

常用的块级元素对齐效果,重心稍微偏下

3. 多色应用

通过读取图形内的分层信息,可赋予每个分层不同的渲染模式达到更加丰富的表现形式。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

不同渲染模式下的多色效果

4. 图形本地化适配

除磅重与比例以外,当图形出现需要使用文字表达含义时,针对特定语言与书写顺序 “SF Symbols” 提供了不同的适配图形,包含拉丁语、阿拉伯语、希伯来语、印地语、泰语、中文、日语和韩语等语言类型与 LTR/RTL(从左到右、从右到左)两种布局。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!


矢量规格的效率画法


随着像 Retina 这样的高分屏与 SVG、PDF 等矢量格式在设备上普及,文字和图标在精细度与匹配度上有了更多的追求,一般应用会根据常用的字体磅重去定义默认图标的粗细,因此我们会看到一些图标出现非整数规格的情况,这对新人来说会造成一定的设计门槛。

1. 微信的图标规格

以微信客户端为例,需要在 24*24pt 的网格中默认使用 1.2pt 线条进行绘制,同时在图形自然拐角处需要保持外圆内方的样式。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

2. 为什么会有设计门槛

对新手来说在 Sketch、Figma 或 Photoshop 中使用描边设计非整数规格图标可以是噩梦,即便有经验的设计师在绘制过程中也会因为计算路径余数而影响设计效率,以 Sketch 为例路径属性中虽然支持像素对齐、半像素对齐和不对齐像素三种模式,但如果需要绘制 1.2x 描边时,我们只能使用不对齐像素的模式再计算路径落点位置,因此需要不断计算落点是否处于 0.2、0.8、0.2……

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

Sketch 的对齐模式

3. 建议方法:倍化绘制

所以在处理非整数图标时我们不妨把画板等比放大 5 倍,可以获得一个 120*120pt 的新画板同时描边放大为 6pt,这时候我们只需要使用像素对齐模式直接进行绘制即可,同理其他数值规格我们也可以使用倍化调整,使图形在画板内变成整数,最直接方式是小数点后奇偶数进行判断,奇数放大 10 倍,偶数放大 5 倍。输出资源时如果使用 svg 这类矢量格式可根据业务需要决定是否缩放输出,而位图则根据所需尺寸进行倍数缩放再输出。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

4. 工具使用差异

使用 Sketch 对图形进行倍化后绘制和调整已经友好很多了,但是其实 Sketch 中还有不少绘制效率工具是没有放在默认工具栏里的,这里可以根据需要使用自定义工具栏把这些工具外置。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

Sketch 中的路径工具

Figma 相对而言路径编辑功能比较简单,但依赖社区丰富的插件也能达到对应的效果,这里推荐一些常用的矢量图形处理插件。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

虽然目前 sketch 的图形绘制功能已经很完善了,但依然存在一些限制,如路径断开后无法直接重新连接,特定角度绘制效率低等问题,从而影响设计的精确度和效率。这时我们可以把目光转移到一个老牌的矢量工具上“ Adobe Illustrator ”(后面简称 AI ),AI 中的隔离模式、方向滑移延伸和自定义网格本身非常适合矢量绘图,用来绘制图标也十分便利。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

Sketch 与 AI 的对比,虽不公平但也是事实……

使用 AI 的网格系统,我们可以设定符合业务需要的对齐方式、键盘增量和网络间隔,且 AI 生成的路径是支持在 Sketch 或其他矢量工具中复制粘贴的。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

适配自身规格的网格设置

使用 AI 自带的角度旋转功能时设置图形副本数量,保证了每个图形角度和方向都是准确的。

使用 AI 绘制实例演示


图标绘制的注意点


1. 等比分布

当我们需要绘制等比放大或扩散图形时,会遇到一种情况:等边图形或圆形可以直接使用工具进行等比缩放,但长矩形或者不规则图形等比缩放后会出现部分点、线不等比,这其实是一种理解上的误区,在把不规则图形等比放大时,我们需要的是点、线距离图形中心(非图层中心,而是几何中心)做等距偏移的效果,而工具一般会按图层中心来进行缩放,可能会造成效果上的误差。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

常见图形在不同处理方式上产生的差异

清楚原因与差异后,只需选择对应偏移功能即可达到理想效果,等距偏移一般矢量工具都会自带,只是就使用习惯而言没有常用等比缩放容易理解与上手。以 AI 与 Sketch 为例,都能在路径、对象菜单中找到,且 AI 额外支持偏移后拐角属性设置。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

AI 与 Sketch 下通过路径偏移获得等距缩放效果

2. 骨架与输出路径

日常涉及图标绘制的需求,建议可以先使用描边进行绘制,可以理解为把路径当做图形的骨架,再利用工具的描边样式塑造磅重拐角,这样我们可以有效的保留图形最大的可塑性和调整空间。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

但同时需要注意,图标在输出前需要完全转化为轮廓以及封闭路径,以保证系统渲染模式的一致,并且这是所有平台都要求的。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

SF Symbols 对路径轮廓化的要求


图标中的平衡


1. 面积配比

对应不同的业务,有时会基于用户对事物的认知,直接引用该事物作为基础图形进行图标绘制。因此会出现一些稳定性弱、长宽比例相差较大或形体单薄的图形,而我们会遵循已有的标准图标栅格进行绘制,这样会导致部分特征过于明显的图形在显示面积上出现视觉误差与中心浑浊。情况类似中文字体中出现的中宫、字怀(中宫:汉字重心区域范围、字怀:笔画之间的留白范围)紧凑。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

按标准栅格绘制特征明显的图形

这时可以适当把图形延伸部分进行细微的外扩处理,使图形中心部分视觉上更加舒展。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

对图形延伸部分外扩微调

2. 视觉对齐

通常使用工具的对齐功能实现图形间的相对关系是合理的,但我们在处理多边形时就会遇到 “已经用工具居中了,但看起来却没居中” 这种问题,这种现象一般是由于不同多边形的面积与宽高带来的视觉差造成的。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

奇怪的对齐现象

以三角形播放按钮为例,在背景范围中绘制三角形时,我们可以先添加周长与三角顶点相接的圆形辅助定位,注意这里需要使用多边形工具设置的三角形而非默认的菜单中的三角形,因为默认的三角形是等腰三角形,不能用于这种情况。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

思路与等距放大类似,先确定几何中心而非图层中心

这里推荐使用多边形工具设置三角形,除了因为是等边三角形外,在 Sketch、Figma 中这类图形未扩展的情况下工具是会自动填补图层范围,且直接对齐就是居中状态。

为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

Sketch 多边形工具创建的三角形


总结


本文所提到的情况与处理方式仅以个人角度切入,在日常设计工作中我们所遇到的情况会更加复杂棘手,但这里也希望通过自己的发现给大家带来一些启发与探讨。

图标的绘制并不是也不应该是一个繁重的任务,只要找对方法或了解背后图形原理,大家都能在方寸之间的设计中找到不一样的精彩。

作者:We-Design

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:


图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考






图标定制设计之五:研究Fluent 图标规范后,我总结了这9个知识点!

博博

最近我在学习使用 Figma,会在社区查找一些大厂的设计系统文件学习,看到一篇微软 Fluent 系统图标规范文档,还挺详细的。其中,我发现有些小点自己平时很少注意到,并且感觉对设计师定义图标规范也有一定的帮助,所以结合个人图标经验挑选部分内容来翻译成一篇文章,便于扩展自己的图标思维。(备注:以下的规范是针对尺寸 24px、线条粗细 1.5px 的图标)


概述


在前一个版本,Fluent 系统图标采用了 MDL2 和 Monoline 图标集合,比较大的特征是直角、方方正正的形状。不过随着 Win 11 系统的发布,我们可以看到 Fluent 系统图标也进行了比较大版本的优化,感知最大的地方就是图标变圆润了。

研究微软 Fluent 图标规范后,我总结了这9个知识点!

设计理念有三个准则:熟悉的、友好的、现代的。图标形状遵循了用户熟悉的基本原则,示意上识别清晰,尽量远离隐喻含义。同时,细节处理更友好,采用了圆角和简洁的形状,并有两个主题:线性和填充。


网格和基础形状


规范化的网格,能促进图标的整体性和统一性,设计师绘制图形元素时也更有条理性。从 24px 图标尺寸开始,比较建议使用网格系统,内容安全区域是 20px,周围有 2px 的内边距。(留内边距主要是考虑个别图标居中分布和体量问题,有些图标元素会超出安全区域,比如修饰符类型图形)

基础形状是网格的基础,正方形、圆形、纵向矩形、水平矩形采用定义好的模板尺寸,在相关图标体量上保持一致的视觉比例。

研究微软 Fluent 图标规范后,我总结了这9个知识点!

圆形、矩形、正方形图标体量效果如下。(矩形体量看起来有点偏小,这种问题受限于图标尺寸空间小)

研究微软 Fluent 图标规范后,我总结了这9个知识点!


线条


图标线条应当采用一致的粗细,线条末端采用全圆角。

研究微软 Fluent 图标规范后,我总结了这9个知识点!


对齐网格


像素对齐很重要,特别是低分屏设备,图标可以看起来很清晰。由于线条粗细是 1.5px,需要保证 1px 是对齐像素的,避免内外都出现虚边。

研究微软 Fluent 图标规范后,我总结了这9个知识点!

但在某些特殊场景,为了使图标体量居中分布,就会出现像素不对齐的情况,比如一条竖线。

研究微软 Fluent 图标规范后,我总结了这9个知识点!


圆角


Fluent 图标改动点较大的可以说是圆角了,传递了更柔和、更友好的体验感受。因此,我们认真打磨圆角的细节,定义了三种圆角数值。大圆角使用在线条直角或钝角处;当使用大圆角感觉形状太圆难以辨别时,我们可以使用中圆角;小圆角用于很小的细节或锐角处。(确实挺细的,也影响了整体的风格。如果追求统一大圆角的话,可能太偏圆润风格,更适合娱乐类产品用户吧)

研究微软 Fluent 图标规范后,我总结了这9个知识点!


断口


断口多存在复合图标上,断口间距是 1px。当图形角度堆叠时,圆角中心点需要一致,即外层图形圆角会稍大一点,使线条平滑过渡。(看起来确实挺和谐的)

研究微软 Fluent 图标规范后,我总结了这9个知识点!


修饰符


修改符应当谨慎使用,因为它对于一部分用户来说很难阅读。由于尺寸较小,修饰符元素要尽可能地简洁,常放于图标的右下角。设计师在绘制过程中,修饰符图形可以超出安全区域,使图标视觉感官居中分布。

研究微软 Fluent 图标规范后,我总结了这9个知识点!


关闭状态


如果已经建立的图标需要关闭状态,应当遵循模板:斜杠从左上角到右下角 45 度,撑满图标的安全区域。

研究微软 Fluent 图标规范后,我总结了这9个知识点!


视觉平衡


图标平衡很重要,我们也有测试的两种方法。第一种方法是画一个圆圈,帮助我们更好地感知平衡性。第二种方法是视觉重量测试 ,通过模糊来感知图标的区域面积,从而达到平衡的目的。

研究微软 Fluent 图标规范后,我总结了这9个知识点!


命名


随着更多图标的创建,我们必须非常有意识地命名,并尽可能地具有前瞻性,后续才能更好地协作。我们推荐图标命名使用形状的明喻,比如盾牌代替安全,星号代表收藏。

研究微软 Fluent 图标规范后,我总结了这9个知识点!


总结


以上就是 Microsoft Fluent 图标规范的一些小翻译总结吧,线条粗细、圆角、居中、体量、平衡、命名等方面还挺多细节可以打磨细化的,希望各位设计师能够结合业务来仔细琢磨,提炼出属于自己产品的图标规范。

作者:ALEI

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:

图标定制设计之一:6大章节!图标设计基础知识全方位入门指南

图标定制设计之二:超全总结!金刚区图标设计的 10 大风格

图标定制设计之三:想让图标更精致?先掌握这11个容易忽略的设计细节!

图标定制设计之四:学会SVG图标的高级用法,界面适配效率翻一倍!

图标定制设计之五:研究微软 Fluent 图标规范后,我总结了这9个知识点!

图标定制设计之六:为什么别人的图标设计又快又好?来看腾讯高手总结的知识点!

图标定制设计之七:客户说B端图标太普通没新意,该怎么解决?

图标定制设计之八:从6个方面帮你快速掌握图标设计规范

图标定制设计之九:不止画图标!5 个金刚区的交互设计思考




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端用户研究?我总结了这4个方面!

博博

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

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

有哪些研究方法?


1. 主动找用户


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

如何选择研究方式:

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

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

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

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

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

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


2. 深度用户访谈


前期准备:三个阶段不同

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

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

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

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

选取对象:

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

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

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

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

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

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

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

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

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

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

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

针对性话术:

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

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

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

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

邀约客户注意点:

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

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

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

实施中间:

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

访谈技巧:

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

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

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

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

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

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

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

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

人员配合:

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

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

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

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

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

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

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

访谈后期:

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

数据清洗:

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

归纳复盘:

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

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

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

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

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

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


3. 用户找我们


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

收集问题:

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

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

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

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

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

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

需求分级:

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

需求排序:

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

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

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

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

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


4. 成为用户


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


总结


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

作者:玩设计的鸡腿

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:















日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档