「评论」功能设计总结

原文链接: https://www.ui.cn/detail/487165.html

前段时间打开简书app,收到一条评论,发现简书的评论界面做了改版。正好以此为契机,针对「评论」功能做了一个简单的分析和总结。下面正文开始~

x
x

排序

要设计评论区,首先我们需要解决的问题就是排序,这么多条评论信息,到底谁在前面谁在后面?从用户的角度来说,他们希望可以更快速便捷的看到自己想看的评论。那么问题来了,用户到底想看到什么样的评论呢?

其实概括来说,用户对于评论的诉求无非是以下三类:时效性、逻辑性和趣味性。

时效性:我要看最新的评论;

逻辑性:我要看懂评论;

趣味性:我要看最好玩/有用的评论;

x

1) 我要看最新的评论

多数用户都希望看到最新的评论,作为设计师也希望最新的评论可以得到足够的曝光。知乎宁愿通过浮层这种强引导的形式伤害用户浏览时的体验,也要通知用户去查看最新的评论。

x

用户如此想要查看实时更新的评论,那么按照时间倒序排列的方式看来是非常适合了,用户自上而下的浏览习惯,最先看到的是新发表的评论。多数产品的评论列表选择的就是倒序排列。这里需要补充一下,按照时间顺序,新发表的评论在页面底部是正序排列,新发表的评论在页面顶部就是倒序排列,下面的这两款产品的评论列表就是典型的倒序排列。

x

按照上面的理论,页面中所有的信息流都应该是倒序排列,那为什么有的产品采用的是正序呢?以直播类产品为例,那些弹幕也是用户的评论,为什么这些评论是正序排列呢?还有微信和QQ的聊天界面中,为什么对话是正序排列的?

x

用户对于信息流的浏览方式永远都是自上而下,这点是毋庸置疑的。当信息流相对固定时,自上而下的动作由用户来完成;但是信息流变化较快时,用户的目光停留在一处,由滚动的信息流完成自上而下的浏览体验。

而且为了方便用户进行操作,我们会将常用的功能放在界面底部的舒适区。用户所有的操作都可以看成是对于信息的反馈,信息在界面顶部更新,而操作区在界面底部,用户的视线需要来回的移动,而正序排列正好可以避免这个问题。设想一下,如果微信中新对话是从顶部先出现,那么你的视线必须先移动到顶部,然后再回到底部的输入框进行对话。

另一个会影响排序的因素就是评论的数量,刨除评论的数量,讨论时效性是没有意义的。以微信和微博举例,微博的评论列表是倒序排列,而微信则是正序排列。

x

微信是熟人社交,评论数相对较少,在一屏内就可以看完全部的评论数,在这种情况下选择倒序没有必要。而微博的评论数是成千上万的,如果正序排列,那么用户要查看最新的评论,需要滑动到最底部下拉刷新,操作成本太大。

2) 我要看懂评论之间的联系

当然还是会有人存在疑问,你只是说明了在评论数较少的情况下,正序和倒序对于获取新评论的操作成本差异不大。但是并没有解释为什么微信用的正序啊。

我们评论的不一定都是朋友圈的动态,也有可能是针对已有的评论进行回复。这种评论之间的互动就导致评论之间不是相互独立的,彼此存在关联性。按照评论发布时间的正序排列,用户自上而下的浏览方向,先评论的先看到,更能体现出评论之间的逻辑关系,可以让用户更好的厘清之间的关系。

x

以知乎为例,知乎的评论数也很多,但是知乎的(二级)评论列表采用的是正序排列。因为知乎中二级评论的更新频率不是很高,而且基于产品定位,用户希望可以看到围绕一个观点大家的讨论记录,所以更加关注的是评论之间的逻辑性。因此即使评论量很大,依旧采用的还是正序排列,按照评论的发表时间依次展示,帮助用户理解。


3) 我要看最好玩/有用的评论

理论上,所有跟评论相关的信息都可以作为排序的依据:评论时间、点赞量、被回复数、甚至用户等级。我们将这些信息配以不同的权重,最后换算出一个类似“热度”的数据,以此作为排序的依据。除了前面提到的评论时间,另一个比较常见的排序指标就是点赞量。

x

我们可以对一条已有的评论进行哪些操作?常见的有:评论、点赞、查看回复(记录)、分享举报等。不同的产品因为其自身定位与目标用户群会对这些功能进行取舍,即使给用户提供这个功能,也可能将其隐藏在二级菜单中。调研了一下自己手机里常用的一些产品,发现每个产品的评论列表都有点赞功能,而且都做了最大程度的露出。为什么评论这么需要点赞功能?

给评论加点赞功能,增加了用户之间的互动,保障了评论的高质性,可以让高质量的回复得到更多的曝光。点赞功能很难做出差异性,因为对于用户来说,它只是一个简单的下压动作。

x

点赞功能的设计需要重点说一下虎扑,不同的日期的都有自己的专属图标。例如,韦德绰号“闪电侠”,他退役当天的点赞图标就是“闪电”;王者荣耀3周年当天的点赞图标是生日蛋糕;而父亲节当天的点赞图标是一个橘子,我去文章底部点个“在看”,你就在此处不要走动。

x

结构

接下来,我们来分析一下评论区的结构,简单来说,评论区的结构可以分为两种:线型树型

x

1) 线型

线型的评论列表,从样式来看,整齐划一,简洁明了。但是存在一个问题,如果评论数很多,那么用户进行互动的成本就会很大。设想一下,你看到第17层有一个评论非常的有意思,你回复了一下。半个小时后,对方回复你了,但是这条回复已经是第58层,然后你再回复…因为中间隔了很多其他人的回复,因此想要完整的查看你俩之间的回复记录是非常困难的。

x

像虎扑这样,评论比主贴还要精彩的社区,让用户看懂互动记录是非常重要的。因此,一些产品选择使用了树型结构。

2) 树型

树型结构顾名思义,一级评论像是树的主干,次级评论是依附于主干的分支。树型结构会聚合展示所有相关的次级评论,用户可以看到清晰的对话记录。

树型结构的设计我们需要考虑的是次级评论的展示问题。因为次级评论是依附于一级评论的,所以一些产品会将次级评论“收起来”放到二级页面进行展示。以微博为例,其评论区只会展示一级评论,所有的二级评论,哪怕获得的点赞量再高,都必须要进入二级页面才可以查看。

x

虎扑是一个评论比主贴内容都要精彩的社区,所以必须要鼓励用户参与评论。为了解决次级评论等不到足够曝光这个问题,虎扑的解决方案是,对次级评论也就是进行露出。这个会导致新的问题,互动记录在一级页面和二级页面都会出现,一定程度造成页面空间的浪费。

x

从上面我们可以得知,树型结构可以更好的展示回复记录。但是要查看回复记录就必须使用树型结构吗?

以微信和QQ为例。同样的两条评论记录,如果我要对第一条评论进行回复,微信和QQ的处理方式是不一样的。QQ虽然采用了线型结构,但是用户依旧可以很方便的查看对话记录。

x

但是这种的处理方式也会带来新的问题,如果回复记录过长,那么就会导致后面的一级评论得不到足够的曝光。

总体来说,当评论数较少,用户互动较少时,建议使用线性结构;当评论数较多,且互动较多时,建议使用树形结构。当然这个结论也不是绝对的,没有最好的设计方案,只有最适合的设计方案。每个设计方案都有各自的优缺点,设计师的核心价值就在于思辨,在于发现最根本的矛盾并且加以解决的能力。

x

总结

以上我对「评论」功能做的一个简单的分析和总结,如果你有什么不同的建议或者看法,欢迎留言讨论。

全球设计机构都在用的设计思维框架

原文链接: https://www.ui.cn/detail/487433.html

在前段时间我所翻译的电子书《用户体验基础》中,提到了一个“设计思维”框架,即由理解、定义、构思、原型、测试,五个阶段组成的可持续迭代的思维模型。由于篇幅有限,并没有做详细描述,本篇文章将对设计思维进行概述,并分享一些全球级设计机构都在使用的设计思维框架。

事实上,主流的设计思维框架就是我所分享的由斯坦福大学设计学院总结的五阶段设计思维模型,万变不离其宗,概括下来都是一个从理解到构思再到验证的迭代思路,例如IDEO的三阶段模型:激励、构思、实施,英国设计委员会的4D模型等等。虽然它们来自不同的设计机构且根据各自团队的特点进行了一定修改,但本质上都是设计思维,是一个持续迭代,使用创造性思维探索最佳方案,解决关键问题的思维模型。 

首先让我们概括一下设计思维背后的基本原理:

1.设计思维始于同理心(共情),这是一种对人类的深层理解,目的是获得洞察力,从而揭示新的、未被探索的看待事物的方式,以及探索助力商业和社会的最优方案。 

2.在定义阶段,需要重新定义眼前的问题或者挑战,从而获得新的视角来审视这些通往最终方案的道路,最终定义并描述最核心的问题。(聚焦核心问题) 

3.在构思阶段,它鼓励我们进行协作、最好是多学科的团队合作,利用许多人的技能、个性和思维方式来解决多方面的问题。(在这一阶段我们根据核心问题发散思维探索尽可能多的方案,并筛选出最终方案) 

4.在构思的早期阶段,我们使用不同的思维方式来探索尽可能多的可能性,推迟判断,创造一个开放的想法空间,允许最大数量的想法和观点浮出水面。(注重方案的数量,不去在意可行性,资源成本等问题) 

5.然后,它采用聚合式的思维方式来隔离并抛弃不适宜的解决方案,将洞察力和更成熟的想法结合起来并加以改进,从而为未来铺平道路。(筛选出最具可行性或拥有最强解决能力的方案) 

6.在原型阶段,我们对选定的方案进行早期探索,快速构建原型,鼓励设计师边做边学,在创建原型及测试阶段持续改进想法,期望在投入最低成本的情况下获得更深入的见解。 

7.测试在整个设计流程中存活下来的原型,以进一步消除任何潜在的问题。

在设计思维的各个阶段,我们都能够重新审视想法,然后重新定义挑战,在此过程中获得新的认知和洞察力。(设计思维的五个阶段是循环迭代的而不是线性流程,比如我们可以在任何阶段进行构思然后测试我们的想法) 

设计思维要求我们从不确定性出发,要求我们推迟决策,我们最初发现的问题并不一定是关键问题,我们最初发现的方案并不一定是最佳方案,推迟判断然后进行更深入的思考,直到一个理想的,可行的解决方案出现。 

请大家回想一下,作为UI设计师,日常接到需求,你第一时间脑海中显现的是什么?我想应该是具体的界面、交互等细节,然而设计并不应该始于此,设计背后的思考,系统化的流程到创新性的挖掘,这才是设计背后真正的价值,因此,请在第一时间忍住思考设计细节的诱惑、推迟判断,一个更优雅的方案在等待你发掘。 

模仿早期传统的设计过程

设计思维最早的时候几乎是对传统设计过程的精确复制,后来加入了更深层次的同理心和更具体的多学科协作形式。摘自赫伯特·西蒙1969年的开创性著作《人工科学》,设计过程:定义、研究、构思、原型、选择、实现和学习这几十年来一直是设计过程的基石。 

到后来,不同设计机构逐渐形成了自己的设计思维体系,通常在3到7个阶段,每个阶段都包括一个或多个设计思维的核心要素即:存在(being)、重构、移情、构思、原型和测试。各个设计团队的思维模型或者说框架都有着不同的命名,不同的阶段数量,但它们都来自传统的设计流程,且都遵循上面提到的7个原则。 

下面我们来看一下当下比较著名的设计机构使用的设计思维框架 

流行设计思维框架

“心、脑、手”
设计思维过程是心、脑、手的融合。这意味着这个过程是建立在视觉、需求、情感和感觉的基础上的,接着是构思和评价的认知过程,然后是执行、实践创作。这是一个整体的过程,需要我们所有人投入自己的专业能力才取得成功。 

深潜思维模型
《Deep-Dive》是IDEO对这一过程的第一个表达,早在90年代末,他们就在ABC晚间热线上直播了这一过程。深潜过程包括以下步骤: 
理解(Understand) 
观察(observe) 
想象(Visualise) 
评估(Evaluate) 
实现(Implement) 

这是IDEO在早期探索的设计思维框架,目前来看不是主流选择,因此这里不做详细叙述。 

斯坦福大学设计学院的5阶段模型

x

斯坦福设计学院(d.school),现在被称为Hasso Plattner设计学院,最开始教授的设计思维过程,包括以下三个步骤: 
理解 
改善 
应用 
从那以后,他们开始制定并分享出他们著名的5个阶段的设计思维过程,并且被广泛使用: 

共情(理解) 
定义 
形成概念(构思) 
原型 
测试 


译者注:五阶段模型是全世界公认的、主流的设计思维流程,最初被探索出来解决世界性难题,如贫困、教育等复杂的问题,设计思维不仅仅应用于互联网产品设计的领域,它更是全人类,各种领域都可以应用来解决特定问题的宝贵财富。它开创了一种新的思考方式,要求我们以人为中心,摆脱传统思维框架,将系统化的逻辑思维能力和创新性思维结合,探索出那些我们第一时间并没有发现的解决方案。 

IDEO的设计思维过程
IDEO使用了一个不同的过程,虽然它只有三个阶段,但是与这里介绍的其他过程涵盖的内容基本相同。这三个阶段是 

激励:激发寻找解决方案的问题或机会 
构思:产生想法的过程 
实现:从项目办公室到市场的路径 
IDEO还发布了一套IDEO方法卡,涵盖了学习、观察、询问和尝试的模式,每种模式都有自己的方法集合,用于整个创新周期。(https://www.doc88.com/p-9952622640131.html可以在这里看到这套工具包) 

重新定义HCD(以人为中心的设计)
IDEO还开发了上下文(可以理解为场景、背景)工具包,重新包装了设计思维过程。其中一个迭代版本关注发展中国家的社会创新环境。在这种情况下,需要对术语进行简化,使其易于记忆,并对所面临的典型挑战进行重构。HCD流程(以人为中心的设计)被重新解释为一个缩写词,意思是听到(Hear)、创建(Create)、交付(Deliver)。


H:倾听
与其他设计思维过程的早期阶段类似,Hear阶段是关于开发对用户的移情理解,以及定义团队试图解决的问题。它的目的是在问题的背景下获得一个坚实的基础,并对其进行充分的重新规划,以便取得进展。在这个阶段,设计思考者需要 

1.确定他们的挑战, 
2.认识到挑战领域的现有知识 
3.确定要与之接触的人,以了解挑战中更深层次的人性方面, 
4.从事一系列人种志研究(用户研究)活动,以发现足够的人类洞察力,并开发观点或故事来指导后续阶段。 


C:创建
类似于斯坦福大学设计思维流程中的构思(Ideate)和原型(Prototype)阶段。此阶段包括探索,实验和持续学习。它包括确定潜在的探索领域,然后与那些最接近问题领域的人合作,共同创造解决方案。这使得设计团队能够在早期的设计阶段保持最高水平的同理心,同时剔除那些没有充分理解背景的设计师可能做出的有问题的假设。 

1.强调从聆听阶段获得的洞察力中探索的机会 
2.从不同的受影响人群中招募参与共同设计任务的参与者 
3.保持敏感的意识,推迟判断 
4.鼓励讲故事和表达 
5.以行动为导向,创造切实可行的解决方案 


D:交付
HCD进程的交付阶段集中在具体方案执行,以及应对在执行方案过程中可能出现的任何问题。在前面阶段中得到的解决方案可能为问题提供了一个明确的路径,而在实现过程中解决任何其他障碍则是成功的关键。 

英国设计委员会:4d
英国设计委员会(Design Council of The UK)探索出4D模型,即“发现、定义、开发、交付”(Discover, Define, Develop, Deliver)。他们利用双菱形流程图来表示发散和收敛的思维和活动的两个周期。(双菱形模型:发现众多问题——聚焦核心问题——发现众多方案——聚焦最佳方案) 

不是主要设计思维流程,这里一笔带过,大家了解下即可。 

青蛙设计(Frog Design)
青蛙设计包括三个阶段:“探索、聚焦、支持。”这表明它关注的不仅仅是有限的项目或产品,而是在交付日期之后与客户的持续关系。

附一套青蛙设计工具包:链接: https://pan.baidu.com/s/1TCnqZdWcHBzRvI1q_6jQsA 提取码: ndpj 
同样一笔带过。 

《为增长而设计》中的4what
珍妮·列德卡(Jeanne Liedtka)和蒂姆·奥格尔维(Tim Ogilvie)合著的《为增长而设计》(Designing for Growth)一书,在同样的设计思维旅程上提出了一个独特的视角,将这个术语重新定义为一个更好奇、更直观的“W”。Jeanne Liedtka是弗吉尼亚大学达顿商学院的工商管理教授,Tim Ogilvie是创新咨询公司Peer Insight的创始人,两人都是设计思维和战略思维方面的专家。他们的4w过程包括: 

What Is: 是什么?探索当前现实 
What If:如果什么?想象的未来 
What Wow:什么让用户惊喜?让用户帮助我们做出一些艰难的选择 
What Works:产品怎样运行?让它在市场上运作,并成为一个企业

x

LUMA设计系统
LUMA研究所是一家教授创新和以人为中心的设计的全球性公司,它有自己的设计思维模式的表达方式:观察、理解和制作。他们将通过使用专有的用户手册和方法卡完成每个模式的一系列步骤展开。在每个阶段设计人员可以选择特定的方法,这三个核心元素可以综合使用在各种设计思维流程中。 

总结
我们可以花几周的时间来探索设计思维过程,了解它们的异同以及多样性或一致性甚至各自的优点。为了理解基础,我们必须剥离表面。乍一看,设计思维过程是神秘的,混乱的,在很多时候是复杂的。然而,这是一门学科,通过直接练习,你会越来越喜欢它。你将以一种实践的方式学习东西,这是任何理论都不能充分涵盖的,在每一次新的经历中自信地成长。您甚至可能想自己开发对这些步骤、模式和阶段的另一种表达,以适应全新的场景,适应你所面对的工作内容,这就是设计思维之美。 

别以为,色彩的知识你全懂了之基础知识篇——色彩系列第 01_

原文链接: https://www.ui.cn/detail/488460.html

这是色彩系列文章的第01_01篇,主要内容是色彩基础知识,如有不妥之处,请批评指正。

目录

一、学习目的及概述

二、基础知识

(一)色彩的基本特征

1、色系

2、色彩三属性

3、色调

4、色彩混合

5、色环及色彩对比

6、色彩模式

(二)色彩的情感表现

1、色彩的心理

(1)色彩的冷暖

(2)色彩的轻重

(3)色彩的空间变化

(4)色彩的软硬

2、色彩的知觉

(1)后像

(2)恒常性

(3)同化与异化现象

三、尾巴

一、学习目的及概述

    人脑对于色彩的记忆度要高于形态,可以回想一下我们熟悉的品牌,想到小米,你首先想到的是橙色,想到支付宝,你会联想到蓝色,而想到微信,你自然想到的是绿色,以上品牌的 logo 形态你可能会思考一会儿才能想得起来,但品牌色你会脱口而出,这就说明了色彩对于占领用户心智的重要性以及我们学好色彩的必要性。

    在正式开始这篇文章之前,我们需要明白我们学习色彩是在学习什么?先从色彩的定义开始,色彩是人眼对不同频率光线(可见光)的不同感受,色彩既是客观存在的,又是主观感知的,地域、文化的不同,会导致不同群体之间产生色彩的认知差异,而我们学习色彩的过程既要掌握人类对色彩认知的共性,也要掌握不同地域文化对不同群体产生的特异性,把复杂的色彩现象还原为基本要素,组合这些不同的基本要素产生目标效果,这里的目标效果分      两部分:

    第一部分:在目标用户的情感与色彩审美(目标用户)之间建立桥梁,让二者无缝衔接。例:我们可能都有切身体会,对于室内装修,父母跟我们之间的审美差异很大,像我的装修风格是以黑白灰为主,但我父母就喜欢色彩更丰富一些,不说审美高低,如果室内设计的目标用户是我父母这辈人,或我们这辈人,选色用色上一定是不一样的,对不同类型的用户要达到不同的目标效果,这才是设计;

    第二部分:色彩的选择与信息优先级的匹配,例:我们知道了暖色是前进色,冷色是后退色之后,我们会将优先级更高的元素设置为暖色,而将次要元素设置为冷色或无彩色系,让用户先看到更重要的部分。

    如果没有扎实的色彩基础知识,想要让色彩在设计上达到目标效果,只靠感觉会很困难,不啰嗦了,开始正文吧。

二、基础知识

    (一)色彩的基本特征

     1、色系

    (1)无彩色系

    顾名思义,无彩色系就是没有彩色,是指黑色、白色或由这两种色彩调和形成的各种深浅不同的灰色组成的色系。(见下图 1-1.1.1)

x

   注:在下文讲述的色彩三属性当中,无彩色系色彩只具有明度这一种色彩属性。(对此下文会有详解)

(2)有彩色系

x

    有彩色系是指除无彩色系以外的色彩,即红、橙、黄、绿、青、蓝、紫等。(见下图 1-1.2.1)有彩色系色彩具有色彩的三个基本特征——色相、明度及纯度。(下文会有详解)

     2、色彩的三属性

    我们用眼睛和科学观测方法能够看到和辨别清楚的色彩多达750余万种,但他们(不包括无彩色系色彩)之间都有共同的三个属性:色相、明度及纯度(饱和度),这三个属性是我们在选色用色中主要的考量方式之一,它们的结合可以让我们随时随地的记忆和再现色彩。

    (1)色相:指色彩的相貌,反映了色彩与色彩之间的差别所在。

x

    从光学角度来说,由于光之间波长的(波长(wavelength)是指波在一个振动周期内传播的距离。)不同,在人眼中产生的色彩也就不同,即使是同一色相,也会产生成百上千种色彩。(见下图 1-2.1.1)

    为了区分不同的色彩,我们为色彩定出了名称,而每个名称对应一个特定的色彩印象,红橙黄绿青蓝紫,每一种都有特定的色彩印象。

x

    色相会有倾向性,如下图所示,这是从蓝色到红色的渐变过程,中间区域色彩的色相倾向性是不明确的,这种不明确是我们在选色用色中需要避免的,不明确的色相倾向,意味着不明确的情绪,这种“暧昧”意味着你的色彩“什么都不是”,进而无法占领用户心智。

x

    (2)明度:指色彩的明暗程度。在无彩色系中最亮的是白色(#ffffff),最暗的是黑色(#000000),在有彩色系之中,也有明度差异,色彩明度从大到小依次是黄色>绿色>青色>橙色>红色>品红色>蓝色。(见下图 1-2.2.1)

    明度的高低变化可以理解为在色彩当中加入黑色(降低明度)/白色(提高明度)。

x

    (3)纯度(饱和度):指色彩的纯净程度。该色相的纯色(纯色是指一种不混有其他色彩的色彩)在该色彩倾向之上所占的比例既是纯度,例:浅红色是属于红色色相的色彩,但与大红色相比,浅红色中红色的成分相对较低,即纯度较低。(见下图 1-2.3.1)

    注解:对纯度的称谓,有艳度、彩度、饱和度等多种叫法,我个人更倾向于纯度这个称谓,因为这个称谓有助于概念的理解,纯度是指色彩够不够纯(纯色所占比例),比较合理,而艳度是指够不够艳?彩度是有彩色的比例够不够多?以上都不够直观,饱和度这个称呼虽然没太大问题,但不如纯度容易理解。

    (4)困惑过我的疑问:明度和纯度一方的变化,会怎么影响另外一方?

       1)明度变化对纯度的影响

      如果我们控制色彩三属性中的色相不变(在 HSB 模式中的色相数值不变),那么纯度越高,明度越低。

      明度越高的色彩,意味着加入了白色,也就意味着纯度下降(白色的加入导致原色彩纯色比例下降);明度越低的色彩,则是加入了黑色,纯度同样会下降(黑色的加入导致原色彩纯色比例下降);这就意味着明度与纯度的关系是无论明度上升或者下降纯度都会下降。

      2)纯度变化对明度的影响

x

     如果我们控制色彩三属性中的色相不变(在 HSB 中的色相数值不变),那么纯度越高,明度越低。(见下图 1-2.4.1)

    纯度越高的色彩,意味着加入了更多纯色,也就意味着明度下降(白色的比例下降);纯度越低的色彩,意味着减少了纯色,也就意味着明度会提高(纯色比例下降,导致白色占比增加。)。

    3、色调

    色调是整体的色彩倾向。在色彩的色相、明度及纯度三属性当中,只要保持 1 至 2 个属性一致,变化其他属性,整体色调就能保持一致,这可以成为我们把控整体风格一致性的重要实现方式。

    通过色相的冷暖变化,我们可以营造暖色调、冷色调及中间色调,从而通过冷暖变化来传递情绪。

x

    同理,固定色相,让明度与纯度变化,可以将色调分为如下 10 种(见下图1-3.0.1),而每种色调对应不同的情感属性,我们可以根据情绪来选择相应的色调,从而在整体上调整色彩,为我们选色提供一个切入角度。

    色彩的选择过程中,有理性也有感性,虽然我们可以确定这 10 种色调,但你很难明确它们的分界线,也就是说很难界定明确的数值,只能提供一个大致的范围,在选色用色时,需要结合我们的审美,进一步去判断。

    在如下的分析中,我是将色彩的情感属性分为正负两个层面进行分析,但没有不好的色调,我们需要做的是让正确的色调出现在正确的地方。

    分析顺序:纯色调→白色调→明色调→浊色调→灰色调→暗色调→黑色调(即 “S” 型曲线)

    (1)纯色调

    纯色调是指画面整体色彩组合纯度较高的情况。

    正面关键词:积极、活力、健康、浓厚等

x

    解释:某种程度上,色彩的纯度与明度的高低就如同人的精气神,纯度与明度越高的色彩精神头越足,能够传递出更多活力。如下图西红柿和香蕉所示,很多植物在成熟时的色彩都接近于纯色,使得纯色与积极、健康等相关联,也因此纯色调常常出现在儿童产品上,去传递积极、健康的情绪。(儿童本身可能并不喜欢纯色,只是父母喜欢。)

x

    如下图所示,以纯度较高的蓝色作为背景,通过高饱和度红色圆形将人们的注意力集中到人物之上,这种红蓝的搭配既是冷暖对比,二者又是对比色,让整个海报显得活力十足。

x

    如下图所示,麦当劳的 banner 以纯度较高的红色渐变为背景,西红柿上的水珠,将蔬菜的新鲜表现得恰到好处,刺激着观者的食欲(反正我看了之后就想吃)。

    负面关键词:粗俗、肤浅、花哨等。

x

    活力太充足也会传递出肤浅的观感,很多时候纯色调展现的粗俗是由于色彩之间关系不和谐,无主次,搭配生硬等多方面原因造成的。如下图所示,这是大家熟悉的花哨典型案例,你们可以分析下,这个配色显得“土”的原因是什么。

    (2)白色调

    白色调不仅仅是指白色,也包括在白色附近的较浅的色彩,白色调是所有色调当中明度最高,纯度最低的色调,像一杯很淡的清茶。

    正面关键词:干净、清新、纯洁

x

    白色调是视觉重量最轻的色调,能够让我联想到婚纱、百合的纯洁、轻盈,如果说品牌,我回联想到无印良品,如下图所示,来感受下白色调的轻盈和纯洁。

    负面关键词:平淡、虚无、距离感

x

    有彩色的减少,会使整体色调偏于平淡,更像一个戒掉情绪的成年人,没有了冲动,这也就让人产生了距离感。如下图所示,从衣着来看,显然左侧模特的纯白婚纱装,暗色背景,严肃表情,与观者之间有很强的距离感,而右侧模特接近于浊色调的红绿色搭配,外加模特本身甜美的微笑,显得亲和力十足。

   (3)淡色调

    淡色调是在明色调的基础上,将明度提高,纯度降低。

    正面关键词:柔软、淡雅、温柔甜美等

x

    温柔淡雅来自纯度的降低,明度的增加,淡色调相对纯色调的饱满、力量感,也自然会产生柔软的印象。如下图所示,淡色调会让画面更柔和,给人一种幸福甜美的感觉。

    负面关键词:消极、个性不足。

    明度提高,纯度降低使得色彩的个性主张进一步淡化,当你用淡色调去展现视觉冲击或者力量感时,它显然是不能胜任的,会显示出个性不足的劣势。

x

    如下图所示,两种色调对比,哪一种更能表现小女孩的无助和孤单,答案是很显然的吧。

    (4)明色调

    明色调相对纯色调,色彩明度较高,纯度较低。

    正面关键词:明快、清新、干净、朴素、阳光等

x

    明度提高意味着色彩更加清爽明快,相比纯色调而言,整体视觉重量轻了,适用于表达纯洁、干净的情绪,如下图所示,整个海报使用明色调将矿泉水的纯净、干净以及晶莹剔透的感觉表现得很到位,背景的雪山也暗示了水源来自大自然,红色部分(品牌色)立刻吸引了观者眼球,让整幅海报有了落脚点。

    负面关键词:浮躁、没有深度、软弱。

    明色调相比纯色调而言,纯度下降意味着色彩饱满、充沛感下降,使得整体会有“飘起来”的感觉,这种饱满感的减少,也使整体力量感缺失。

x

    如下图所示,页面色彩纯度高低变化使画面信息传递效果受到影响,右侧的色彩纯度更高,情绪表现更到位。

    (5)浊色调

    顾名思义,浊色调是看起来相对浑浊的色调,原因在于明度降低,看起来像加入了灰色,低沉而浑浊。

    正面关键词:高级、沉着、稳重、有格调等

x

    明度的降低让色彩显得更加深沉,体现内敛与克制,进而产生高级感,下图是坚果手机的落粟配色(来自日本传统色卡),相对明色调及淡色调,浊色调会显得更加成熟稳重,更有文艺感。

    负面关键词:保守、迟钝。

    因为纯度、明度的降低,会让色彩活力下降,不恰当的选色配色,可能会让整体色调显得“脏”,这点是我们需要注意和避免的。

x

    下图是锤子科技的同款坚果手机的不同配色,左侧是标准版,右侧是文青版,大家可以感受下二者的区别,明显左侧标准版更能彰显活力。

    (6)淡浊色调

    顾名思义,淡浊色调相对浊色调而言,整体更“淡”,明度更高,纯度更低。

    正面关键词:优雅、有格调等

x

    顾名思义,相比浊色调而言,淡浊色调更淡,色彩纯度下降了,但依然保持了浊色调的优雅以及格调,只是情感不如浊色调的充沛。下图是造作的床品4件套藕粉色,跟上文坚果手机的落粟配色相比,依然保持着文艺感,但没有那么深沉。

    负面关键词:活力不足、保守

x

    可能文艺感与活力是相对的,如下图所示,都是造作的床品四件套,活力大小高下立辨。

    (7)暗色调

    暗色调是 9 个色调当中明度最低的色调之一,但即使是最暗的色调,有彩色的加入也让整体有别于黑色调的情绪。

    正面关键词:深沉、稳重

x

    相比浊色调,暗色调的情绪更加低沉,仿佛城府很深的一位中年男性,深沉而稳重,就像下图的胡桃木色家具一般。

    负面关键词:压抑、阴暗

x

    这就是事物两面性很好的展现,当然也不排除某些设计需要营造压抑的氛围,我们“因地制宜”选择色彩就好。如下图所示,暗色调能够传递这种近乎让人窒息的压抑感。

x

    我们熟悉的无印良品的品牌色就属于暗色调,你可以看看色调的变化对品牌调性的影响。(见下图1-3.7.3)

    (8)淡暗色调

    淡暗色调是在暗色调的基础上提高明度,自然深沉感(压抑感)也就被削弱了。

    正面关键词:深沉、素气

x

    单从上文图中( 图 1-3.0.1)红色的变化来看,红色的淡暗色调色彩接近于棕色,相比浊色调而言,由于纯度的下降,使淡暗色调更显素气。如下图所示,画面整体的基调是淡暗色调,但也恰好与模特白皙的皮肤显现强对比,突出了模特本身(主角)。

    负面关键词:阴暗、无趣

    在色彩中,纯度与明度都不低的色调,自然会有活力,但凡一方(纯度与明度)比较低,就走向了“无趣”。

    (9)黑色调

    黑色调是明度最低的色调,当然同白色调一样,黑色调也不仅仅包括黑色,但总体是靠近黑色的色彩,主要突出黑色基调。

    正面关键词:严肃、庄严、高端

    在西方社会的葬礼上,参加葬礼的人都是一袭黑色西装,来表示对死者的尊重及表达沉痛的心情。我们可以观察一些品牌的高端产品通常也只用无彩色系来表达高端感,例:苹果的 MacBook Pro、iMac Pro等。

    负面关键词:黑暗、压抑、消沉

x

    同上文中对白色调的分析,黑色调同样是戒掉情绪的人,只是这个人更加的深沉和严肃,如下图所示,我们可以感受到那种沉重感穿过画面到达我们的内心,黑色调的压抑是在暗色调的基础上又增加了一个量级,更能够传递出那种不能呼吸的压抑感。

    4、三原色及色彩混合

    (1)概念

      原色:原色是不能由其他色彩组成的基本色,同时它们也是构成其他色彩的基础。

x

    原色分为色光和颜料(色彩)三原色,如下图所示。色光的三原色是红(red)绿(green)蓝(blue),也就是这三种色光不能通过其他色光混合的方式得到,颜料三原色是青(cyan)、品红(magenta)、黄(yellow),同理,这三种颜料也是不能由其他颜料混合得到。

     色彩混合:顾名思义,色彩混合就是两种或两种以上色彩混合成另外一种色彩的过程。

    色彩混合的本质是在人眼视网膜上的同一部位同时射入两种或两种以上的色光刺激,感觉出另一种颜色的现象,无论是下文的加色混合还是减色混合,本质上都是色光射入人眼,区别在于一个是直射(加色混合),一个是反射(减色混合),从这个角度来说,色彩混合探讨的就是光(色光)的混合问题。

    加色混合:指两种或两种以上色光之间叠加,色彩明度会增强的情况。

    从色光的角度来说,光(色光)和光(色光)的叠加,会导致亮度增强;从色彩的角度来说,观察上文色彩混合原理图会发现,三原色(色光)两两混合都会产生明度更高的色彩。综合以上两点可能是加色混合之所称作加色混合的原因。

    注解:亮度与明度是有区别的,亮度是指单位面积光通量的大小,而明度是色彩的明暗程度,也就是明度最高是白,而亮度取决于单位面积通过的光的量。

    减色混合:指两种及两种以上颜料等本身不发光的物体(液体)彼此混合,色彩明度会降低的情况。

    观察上文色彩混合原理图会发现,三原色(颜料)两两混合会产生明度更低的色彩,这也是减色混合之所以称作减色混合的原因。

    注解:

    假设颜料混合后表面积没有变化,红蓝绿(RGB)都是纯色,加入比例都是1。

    青色=反射蓝(1),绿(1);吸收红(1)=2。

    品红=反射蓝(1),红(1);吸收绿(1)=2。

    青色+品红=反射蓝(2);吸收红绿(2+2)=2。

    我们可以发现色彩的混合并没有让光通过的单位面积的量增加,但随着色彩变为明度更低的色彩,颜料的混合会越混合明度越低。

    通过以上我们会发现本质上我们研究的都是光的问题,对色光来说,因为是直射的关系,你要呈现某种颜色,用红绿蓝三种去组合就可以,而对颜料而言,因为是反射,你要呈现的色彩是被反射的,也就是你得用红绿蓝的互补色—青品红黄才能组合出你要的色彩。

    5、色环及色彩对比

x
x

    如下图可见光光谱及色环所示。可以发现,色环是将可见光谱首尾相连组成圆环,通过色环我们能够了解各色彩之间的关系。

    如下是几种色彩关系,我们先以结论的形式呈现,再去分析原因。

x

    (1)互补色:指的是在色环上 180° 相对的一对色彩。互补色呈现的色彩感觉是最具刺激性的,最张扬的。

x

    (2)对比色:指在色环上相隔 120° 至 180° 的色彩,相对而言,对比色在保持了色彩刺激感的同时,又有一定平和的加入,能够体现适度的对立感。

x

    (3)邻近色:色环上任意两个连续的色彩都是临近色彩。邻近色营造的是平和的感觉,没有冲突感。

    以上结论可能大家可能都知道,但为什么会呈现这样的效果?我们来说道说道,其实可以用基因来类比,你跟你父母长得像是因为你的基因是你父母各提供一半组成的,如果你们相同的基因越来越少,那么你们可能会长得越不像,如果把色光中的红绿蓝(因为它们是构成其他色光的基础)这三种色彩含量比作基因,越接近的色彩在彼此中对方的成分越多,当在色环处于相对位置的时候( 180° 相对),彼此之中几乎再无对方的“基因”,因此二者差异最大,以红色与青色这对互补色来举例:蓝色+绿色=青色。如果以 1:1 的比例,青色是蓝绿“基因”各占一半,相当于蓝绿色彩的“孩子”,自然青色无论与蓝色还是绿色搭配都会很和谐。而红色与青色可以说完全没有共同基因,因此是互补色。反之,在色环中越接近,彼此中对方“基因”越多,以色彩组合呈现的时候给人的视觉冲击感越小,类似于红与橙,蓝与青。

    6、色彩模式

    (1)概念

    色彩模式:在数码设备(PC、智能手机等)呈现色彩的算法。

   (2)RGB与CMYK色彩模式

    RGB 色彩模式指的是以红绿蓝三种色光来组成其他色彩的模式,色彩混合模式属于加色混合。适用于发光体(PC、智能手机),当然这也是我们面向屏幕设计的 UI 设计师常用的色彩模式。

x

    RGB模型可以看做以红、绿、蓝为 x、y、z 轴的三维立体模型,每个轴分为 0-255 表示256级,每种色彩都可以由(x,y,z)坐标构成,(255,255,255)表示白色,(0,0,0)表示黑色。(见下图1-6.2.1 )

    CMYK色彩模式指的是以青、品红、黄三种颜料组成其他色彩的色彩模式,色彩混合模式属于加色混合,适用于印刷媒介(书籍、海报),是平面设计师常用的色彩模式。

    注解:RGB 是 red(红),green(绿),blue(蓝);CMYK 是 cyan(青色),mangeta(品红),yellow(黄色),black(黑色)。

    以下是两个关于 CMYK 色彩模式你可能会困惑的问题

    (1)为什么CMYK中的“K”是“K”,而不是“B”(black首字母)?

    主要原因在于RGB当中已经有“B”了,为避免混淆就用了末尾的字母“K”,当然使用哪个字母没那么重要,重点在于我们对它的理解。

    (2)既然CMY可以合成“K”(黑色),为什么还要加入“K”(黑色)?

    主要有如下三个原因:

    第一,理论上可行,但由于生产技术的限制,目前CMY可以合成的“K”还不够理想,因此加入了黑色油墨来单独呈现黑色部分;

    第二,黑色在印刷上使用量较大,CMY合成“K”过于浪费油墨;

    第三,考虑到纸张质量,避免多层油墨叠加。

    (3)HSB 色彩模式

    HSB(即HSV)色彩模式是通过色彩的色相、明度、纯度三属性去呈现色彩的模式。     我们具体来看看”H””S””B”分别代表什么。

    1)H(hues)表示色相,在 0~360° 的标准色环上,按照角度值标识,0° 为红色,60° 为黄色,120° 为绿色,180° 为青色,240° 为蓝色,300° 为品红色(见下图1-6.1.2)。从下图(1-6.1.2)我们可以看出三个轴分别代表色相、明度、纯度。

    2)S(saturation)表示纯度,用 0%(灰色)~100%(纯色)的百分比来度量。

x

    3)B(brightness)表示明度,通常是从 0(黑)~100%(白)的百分比来度量的,如下图(1-6.1.2)所示,在色立面中明度从上至下逐渐递减,上边线为100%,下边线为0% 。

x

    HSB 色彩模式是从人类视觉的角度出发,人眼在看色彩时,不会将色彩拆分成 R、G、B 或C、M、Y,而是以色彩三属性来看待色彩,这也就是 HSB 和 RGB 以及 CMYK 模式之间的区别。

    (二)色彩的情感表现

    1、色彩心理

    (1)色彩的冷暖

    根据人类来自生产生活中的心理感受,将色彩分为冷色、暖色及中性色彩。

x

    如下图所示,冷色系是指青色、蓝色等,冷色系色彩给人以大海的冰冷感觉。

x

    如下图所示,暖色系是指红色、黄色、橙色等,暖色系色彩带给我们的是类似太阳与火的温暖感觉。

x

    如下图所示,紫色、绿色及无彩色系属于中性色彩,没有明显的冷暖倾向。

    色彩冷暖的相对性:我们要知道的是,色彩的冷暖是相对的,在暖色系当中,会有偏冷的暖色系(当然是相对偏暖的暖色系来说),如下图(2-1.1.4)所示,你可以比较一下,哪种红色更冷?在冷色系当中,会有偏暖的冷色系色彩(当然是相对偏冷的冷色系来说),如下图(2-1.1.5)所示,你也可以比较一下,哪种蓝色更暖?

x
x
x

    实际上为了提升我们设计的细节,更好的平衡色彩选择,我们不能仅满足于冷暖平衡,而要更进一步,如下图插画(2-1.1.6)所示,虽然红色和蓝色已经是冷暖搭配了,但作者更进一步,用冷红搭配暖蓝,你可以对比一下图2-1.1.7(经过我调整的,主要是为了说明问题,请原作者见谅。)你可以看看哪种视觉效果更好,显然第一张图更柔和,第二张冲突性更强,更加冷峻,这就是色彩冷暖相对性在设计中的应用,这部分我会在随后的色彩系列文章中进一步深入,敬请期待。

x

  (2)色彩的轻重

    色彩的轻重指从视觉上给人们以心理的重量感受。(不是指物理上的重量。)

x

    如下图所示,同等面积下黑与白和黄与蓝(均为纯色),明显明度高的色彩显得轻,明度低的色彩显得重。

    纯度对色彩重量的影响不是线性的(不是纯度越高越重,纯度越低越轻),如果纯度对色彩重量的影响是线性的,那么单从纯度来考虑,纯红色与纯蓝色应该一样重,但实际上视觉重量并不一样,纯蓝色更重(明度上的考虑),我们在考虑色彩重量时主要从明度入手。

x

    色彩重量是版式设计中构建平衡需要考虑的,如下图(2-1.2.2)和图(2-1.2.3)的比较,是不是图(2-1.2.3)舒服了很多,图(2-1.2.2)色彩重量的不平衡在版面上带来的是不稳定的感觉。

x

    通过上图我们也可以知道,在构建色彩重量平衡时,我们需要给“轻”的色彩增加面积,“重”的色彩减小面积,这样才能维持二者视觉重量上的平衡。

在平面设计当中,我们可能会使用下重上轻的方式去构建稳重的页面排版。在室内设计当中,我们可能会选择深色的地板或者瓷砖,避免头重脚轻的情况发生,给人们带来不安定感。(见下图2-1.2.4)

x

    (3)色彩的视错觉

    物理面积相等的两个圆,会因为色彩的不同而导致视觉面积不同,空间距离感也会不同。

    前进色(膨胀色)与后退色(收缩色):暖色系色彩是前进色(膨胀色),冷色系色彩是后退色(收缩色),顾名思义,前进色(膨胀色)相比后退色(收缩色)而言,从视觉上来说更靠近我们(物理距离是一致的),且看起来更大(在原本物理面积一致的情况下)。

    这里我们要结合上文的色彩冷暖相对性来看,相对更暖的色彩就是前进色(膨胀色),相对更冷的色彩是后退色(收缩色)。

    我们再来说道说道,是什么原因给人们这样的视错觉?这里主要与光线的波长相关,如下图所示,我们会发现暖色系的色彩波长更长,冷色系的波长相对较短(当然属于中性色的紫色的波长最短)波长更长的色彩,它的焦距也更长,波长短的色彩焦距也更短,这就意味着不同波长的光不会聚焦在一个视网膜的同一平面上,长波长的暖色影像更显模糊,而波长较短的冷色影像更清晰。(波长关系见下图2-1.3.1)

    1)波长与焦距关系的证明:

    f=1/((n-1)*(1/r1-1/r2))(f代表波长,n代表折射率,r1.r2是球面两侧镜面曲率)

    我们假设其他变量固定,只考虑折射率与焦距的关系,二者呈反比关系,折射率越小,焦距越长。

    λ’=λ/n(λ’表示光在介质中的波长,λ表示光在真空中的波长,n表示介质的折射率。)

    回到以上公式,光在介质中波长与折射率的关系也是呈反比的,即折射率越小,波长越长。

x

    以上两个公式我们可以推导出波长与焦距的关系是成正比的,即波长越长,焦距越大。

    例:我们在看黄色的白炽灯光时,并不会看到一个轮廓很清晰的灯,而总是能看到他周围的模糊,放到色彩上同理,明度高的色彩也会有光渗效应 ,让面积显得更大,这种膨胀感也会让色彩感觉离你更近。

x

    如下图(2-1.3.2)所示,两个面积一样的圆,一个白色一个黑色,你觉得哪个离你更近,哪个更大?以上说明明度也对色彩的视错觉会有影响,但是你可以自己试试,明度对前进(膨胀)与后退(收缩)的影响更多是对无彩色系而言。而波长对有彩色系色彩视错觉的影响(前进(膨胀)与后退(收缩)的)大于明度对其的影响(因黑白灰本身不属于光的范畴,没有波长的概念),可以看看下方例子(2-1.3.3),红色会显得距离更近,更有膨胀感。

x

    理论联系实际,我们来谈谈应用,像我这样的胖子都清楚,要显瘦就得穿深色的,最好再加上竖条纹,通过视错觉让纵向变长,相对横向自然短了。

    在设计中有什么应用呢?最近 iOS 13 出了 Dark Mode,这里会涉及一个问题,在日间模式时,是白纸黑字,在夜间模式是黑纸白字,前者字体“看起来”会比后者小,如果我们将后者的字体稍稍减小,就可以保证前后观感一致。

(这部分我对长波长色彩在视网膜上会更模糊这个结论的得出主要是视觉观感结合查找相关资料,具体证明欠佳,能力有限,你们可以试着证明下这部分。)

    (4)色彩的软硬

x

    看看下图,哪个颜色最柔软呢?中间的是最柔软的,我们可以发现什么规律?明度高或者纯度高的色彩都不是最柔软的,在保持色相不变的基础上,色彩的明度和纯度适中看起来是最柔软的。(见下图(2-1.4.1))

x

    那么我们再回到色彩柔软的具体应用,我们可以看看如下两种不同风格的插画,柔软的色彩会更适用于温暖、女性化的主题,而硬气的色彩更适合于表现刚强、男性化的主题。(见下图(2-1.4.2))

    2、色彩的知觉

    (1)后像

    后像是由视觉生理机制形成的,分为积极后像与消极后像。

    积极后像是指光停止刺激后,仍然留有刺激的后像。大家应该都看过走马灯, 走马灯就是利用积极后像, 在旋转的足够快的时候我们能够将各个片段连接起来,当然电影也是这样的,人类能够将 0.02 秒到 0.3 秒之间的图像连接起来,从而构成连续的动画。

    消极后像是指某种色彩消失后,在大脑中显现该色彩的补色的现象。例如当我们盯着红色看久了,将视线转移至别处,我们大脑中就会出现绿色。神经中枢的六种膝状外侧细胞存在对偶互补现象(红-绿,黄-蓝,黑-白。)。消极后像是视神经的功能平衡性需求,从而维持我们视感觉的平衡。这部分我们在用色的时候会讲到,并不是说补色不能同时出现,而是可能你的用色方法并不正确,预知后事如何,请关注后续文章。

    (2)恒常性

    恒常性是指当我们认识了物体的色彩之后,因为光照变化的关系,即使色彩的明度、纯度及色相等属性发生变化,我们仍然认为他是原来的色彩,当然色彩属性的变化也有一个范围,就是说你不能把红的变成绿的,把蓝的变成黄的,不能完全打破在大自然中的印象。比如你不能再画樱桃的时候把果实画成绿的,而把叶子画成红的,这会让人们看着很困惑。(独特的艺术创作除外。)我个人认为。我们还是要尽量在相近的色相内进行变化。

x

    恒常性是很有趣的,很多时候可能我们都没有注意到,如下图下方例子(2-2.2.1)所示,有一些绘画作品,它的色彩选择并不是使用该植物或者是各种物象本身的色彩,而使用其他色彩,但我们并不会感觉到奇怪。

    (3)同化与异化现象

    1)同化现象

    两种有共同因素的色彩,其共同因素部分会被同化。

x

    如下图所示,绿色与蓝色放在一起,绿色的蓝色部分会被同化,而更凸显黄色部分。

    那么同化现象在实际工作中会有什么应用呢?这就是细节层面的设计了,当蓝色与绿色并置时,会有黄色(暖色)倾向,那么我们如果再要搭配一个色彩(非并置)是否搭配一个暖色中的相对冷色会不会比较好。

    2)异化现象

    色彩的异化现象即视觉在感知两种对比强烈的色彩(例:互补色)时,两种色彩都会向其补色方向发展。

    色彩的原有倾向会显得更加明显,可能在这方面我们都有体会,无论是红配绿,还是紫配黄,它们搭配在一起时,颜色之间就会有鲜明的对抗感。

x

    如下图所示,当无彩色与有彩色搭配时,无彩色就会有偏向有彩色的补色倾向,蓝与灰搭配,则灰色会微微带有橙色的倾向。

    说到异化现象的实际应用时,在我不知道异化现象之前,对我来说有彩色与灰色的搭配是一个难题,因为色彩控制不得当,会让画面显得脏,这种情况下可能让有彩色成为成为配角,灰色成为主角更好。但黑色与白色就不存在这个问题,白色可以说是真正意义上的中性色,当有彩色在白色背景之上时,对有彩色本身的特征不会有任何影响,而在黑色背景上放置有彩色内容,黑色会对有彩色有一个抑制作用,黑白两色与有彩色的搭配不存在“脏”的问题。

三、尾巴

   这篇文章是色彩基础知识的第一篇,后续还会对单独的色彩进行理论联系实际的详解,基础知识可能看起来会相对枯燥,但万丈高楼平地起,很多时候你觉得基础知识掌握的不错,但大多情况下,提高空间还很大,多的不说了,希望这篇文章有帮到你,哪怕是一个小知识点,谢谢你的阅读。

浅色还是深色ui?给你的配色方案几点实用的建议

前言

ios13即将推出深色ui模式,作为设计师的你,是不是早已经蠢蠢欲动,想给你的产品设计一波深色系ui。深色系ui固然酷炫,但是对于配色方案的选择,我们不得不从多方面去考虑。如何得出最佳配色方案呢?今天我们将讨论在ui 工作中的常见选择:ui界面如何选择配色方案,浅色还是深色?

x

一、影响配色方案的因素

在斟酌如何选择一个配色方案上,没有一个十全十美的方案可以满足所有的既定目标。这很大程度上取决于许多因素,我们不仅要考虑用户层面,还要考虑业务目标、市场条件以及当前的设计趋势。下面就让我们回顾下必须考虑的一些基本因素。

#1.可读性和易读性

文本呈现的内容感知直接决定了文本的可读性和易读性。可读性通常用来形容某种书面语言阅读和理解的容易程度,易读性衡量的是用户识别某个文本的速度和直观程度。

在配色的时候,我们一定要考虑这两个因素。尤其是展示详情类,有很多文字信息的界面。因为界面的配色方案在很大程度上影响着用户的阅读效率。举个栗子,不同颜色背景下的物理对象呈现出来的感觉是不一样的,在白色或浅色背景下显示的黑色物体,似乎比在深色背景下显示的白色物体更大。较差的可读性直接带来不好的用户体验:用户可能无法有效浏览数据,即使数据是相关的,用户也会因为可读性差感到难以理解文本,甚至可能错过关键信息。

x

这是否意味着浅色背景的界面更具可读性?并不一定。一位著名的用户体验设计大师Jacob Nielsen提到过:在文本和背景之间使用合适的对比度的颜色。所以提升易读性的最佳界面方案是,在白色背景上显示黑色文本,(即所谓的“正文本”)。或是在黑色背景上显示白色文本,(即所谓的“负文本”)也还不错,但是即使对比度与正文本相同,这种倒置的配色方案可能会略让人感到不适,无形中使用户的阅读速度降低。在界面中,当文本比纯黑更浅一些,而背景并非纯白的时候,易读性会相应的变得更弱一些。 

所以,只要设计师能对文字副本在不同颜色背景上的感知特性有所研究,并且准确地选择字体,任何界面配色方案都可以。

x

不过,在上世纪80年代的一些科学研究表明,对于大量的文本而言,大多数用户觉得浅色背景能让阅读更有效率。为了研究广告背后的运作机制,D. Bauer和C.R.Cavonius《通过对比度反转提高视觉显示单元的可读性》一文中分享了他们探索的结果。他们特别提到一点,当以浅色背景,深色文本呈现时,参与调研的用户阅读准确率要高出26%。

为什么会这样,来自来自英属哥伦比亚大学(University of British Columbia)感官感知与互动研究小组的Jason Harrison 这样解释道:双眼有散光的患者(根据各种数据统计,散光患者约占总人口的50%)觉得,在白色背景上感知黑色的文本要容易的多。因为在感知屏幕内容的时候,如果是白底黑字,双眼虹膜会有更多的部分会选择闭合,晶状体的形变相对较少。在黑底白字的情况下,虹膜会有更多的部分会选择开合,提高对光线的吸收,晶状体的形变会更大,相应的结果是眼睛更容易模糊失焦。所以,如果界面中有大量文本,需要用户长时间阅读,浅色背景和深色文本的组合会使用户阅读体验更友好一些。

x

#2.可访问性

可访问性通常指的是web或移动界面能尽可能多地贴合更多用户的需求和偏好,让普通用户和有障碍的用户都能顺畅地使用。配色方案在很大程度上会影响可访问性。关于如何选择合适的配色方案,设计师需要考虑用户的年龄,特殊的需求,还有一些残障人士的需求,这些因素也可以决定背景和布局元素的配色选择。用户调研将会为ux设计师提供数据,从而让配色方案更符合用户的真实需求。

x

#3.清晰度

清晰度通常指的是用户能够在一个屏幕或界面中辨别核心细节的能力。如果有足够的清晰度,导航条能够简单直观地让用户快速扫描页面布局,并且找到关键的信息区域和交互元素。用户不需要花费很多精力去找他们想要的信息。如果没有正确地测试清晰度,这可能会导致弱的视觉层级,整个界面会变得一团糟。足够的对比度在很大程度上影响着清晰度,而配色方案是建立对比度的基础。想要确保界面是否清晰和足够的对比,可以通过模糊效果来对整个界面进行检验,看看是否重要的内容都能被用户注意到。

x

#4.响应性

界面的响应性,简而言之,用户能够在不同的设备上正常使用页面内的功能。有的在高分辨率设备下的设计看起来还不错,但是一到分辨率低的设备上显示的效果就大打折扣了。所以我们要考虑配色方案在不同设备上的展示效果,因为配色本身会涉及到色彩、形状和内容的感知,所以在实现方案之前应该在不同的设备上进行测试。

x

#5.环境

如果目标用户确定的情况下,我们可以预知网页的移动端界面的使用场景。比如,在自然光下,深色的背景确实可以产生良好的反射效果,特别是在光面的平板电脑和智能手机上,这会使界面更具可读性。相反的是,在光线不好的环境下,暗色的背景会降低界面的可读性。所以我们要重视不同的配色方案,对比度,色调在不同的环境下界面展示的效果。

x

延展阅读:

华为针对手机屏幕在高光的照射下出现逆光反应,从而导致用户看不清楚屏幕显示的内容这一个情况,开发了“阳光下可读性提升”的功能。完成设置后,以后在阳光下使用手机时,屏幕亮度将根据外在环境逐渐提升,同时颜色也会有轻微的变化,相对于开启前,开启该功能后,在阳光底下查看将变得更加清楚。这么做的原理是:借助光线传感器,感应到强光,会提高对比度,让字体更清晰。

国外也有网友做了测试,除了屏幕类型(背光LCD,OLED,雾面,光面等),什么配色方案在阳光直射下提供了最高的可读性?

黑底+白字是最具可读性的。

深绿色底+白字可能是第二大可读性。

二、配色方案注意事项

考虑到上面的一系列因素,下面我将提供一个简短的步骤清单,帮你为网页和移动端设备挑选合理的配色方案。

#1.明确界面设计的目标

如果你已经确定了界面的主要用途和要解决的问题,那么你在选择配色方案的时候会更合理。如果整个ui是文本驱动型的界面,(比如博客,新闻,或者电子阅读器等),浅色背景会让阅读更有效率。因为浅色让整个界面看起来更有呼吸感,能够让用户更专注于内容。另一方面,如果整个ui是视觉驱动型的界面,以图片为主,那么用深色的背景会更好一些,因为深色的背景衬托着明亮的色彩,会让整个图片看起来更突出,同时会让整个界面的布局看起来更时尚。

x

#2.分析你的目标受众

界定并分析你的目标受众是每个设计师在展开设计前必须要做的事情。了解你的潜在受众,并分析他们要想要从你的产品中得到什么,这将为你设计一个有用的,有吸引力的界面打下坚实的基础。中年人和老年人喜欢浅色背景为主的配色方案,因为他们可以从界面中很快地提取有用的信息。年轻人偏向暗色背景,因为看起来更时尚。青少年和孩子们喜欢色彩亮丽的配色方案并且夹杂一些有趣细节的界面。其实配色方案的选取最基本取决于产品的功能性和内容,但是如果产品要以用户为中心设计,在选取配色方案的时候,我们不妨考虑下目标受众的偏好。

x

#3.研究竞品

要记住,你的产品需要面临竞争激烈的红海。配色方案的选取会直接影响你的产品在竞争中是否足够突出,并且会影响用户初次使用的印象。花时间探索已有产品,知己知彼,才能百战不殆。

#4.测试

因为配色方案影响产品的可用性,并且决定界面是否有吸引力。所以每个设计方案都应该在不同分辨率的屏幕,和不同的条件下进行适当的测试。只有测试了才知道配色方案的优点和缺点,从而综合选出最有效的解决方案,给用户留下好的第一印象。

x

三、妥协的解决方案

一个配色方案的敲定到最后实现的时候并不是不可更改,灵活一点,依据具体情况做一些妥协的方案,说不定也还不错呢。我们来看看下边的例子。

#1.深色界面上的白色标签文本

如果你对深色界面情有独钟,想跟一波ios13的风,悄咪咪告诉你一个小技巧,利用浅色标签或者区块承载核心的文本信息,从而确保文本的可读性。在设计的时候,注意颜色的对比,这种处理方式让界面兼具可读性和美观度。

x

#2.给用户选择配色方案的机会

另一种方式是让用户自己选择颜色模式。这种方式对于用户更加友好,用户不仅可以根据不同的可用性问题,而且还可以根据个人的审美偏好去设定一个个性化的颜色方案。这种情况下,设计师和开发人员需要更多的时间来创建更多可选的配色方案。

四、总结

看到这里,相信大家对如何选择配色方案有了比较全面的认知了。有时候追下设计趋势是比较重要,但是我们还是要立足于产品和用户。无论是什么样的配色方案都要注意最终界面的可读性和易读性,合适的颜色对比度是建立可读性和易读性的基础,而对比度的选择要符合无障碍颜色对比度标准,谷歌设计规范推荐在文本内容与背景之间的对比度达到15.8:1的比例。这里推荐大家使用对比度测试工具,来测试对比是否符合标准。

https://uxpro.cc/toolbox/accessibility/color-accessibility/
x

蒸汽波到底是个什么波?设计趋势学习笔记总结

原文链接: https://www.ui.cn/detail/490257.html

大家好/

最近在跟着skys大佬学习写一些设计趋势,设计风格类的周刊或者总结性的小文。目的是提高设计的视野以及训练写作的能力。

/

这次带来的设计风格是在2019年比较流行的蒸汽波风,大家都知道在2017年淘宝造物节已经把蒸汽波风格大量使用并且露出,给我留下了非常深刻的印象。

/

通过大量阅读关于蒸汽波风格的文章,咨询等,也参考了很多优秀设计师的观点来寻找方向。文章以图文的形式从风格介绍到细分类目到应用场景在到最后的优秀设计师推荐。

/

参考的文章以链接的方式写在了文章的末尾处,并且对这些作者表示感谢。

封面的图片是我非常喜欢的来自古巴的以为设计师Magdiel,个站链接也在文章的末尾处。

/

希望可以通过不断的练习和尝试能打开自己的视野,养成良好的学习习惯。

也希望能跟各位优秀的设计师多多交流,如果有任何建议或者意见,请千万在下放留言区告诉我,我一定虚心听取努力改进提高。感谢。

/

文章大约一千三百字左右,图文模式,简简单单,随手分享。

/

谢谢大家

蒸汽波是什么?

x

来源:http://www.magdiellopez.com/

蒸汽波(Vaporwave)是一种新兴的音乐流派和艺术运动。其奇特的表现形式和诡异的视觉效果很容易吸引人们的注意。蒸汽波兴起于2010年初期,在2014-2015年几乎达到全盛时期。最初是一种独特的音乐风格,特点是大量采样80年代和90年代的音乐,通常是一些舒缓的音乐,通过剪贴、拼贴、分层、扭曲等手段,将老音乐处理成一种懒洋洋、模糊不清的感觉。延伸到视觉艺术领域,蒸汽波风格的图片和音乐的感觉类似,采用八九十年代的流行文化产物,比如电视节目、动画、明星,或者是Windows系统、老LOGO等,总之,就是要有年代感,能够代表那个年代的特点。素材处理方面,使用渐变和弯曲制造流光溢彩的迷幻感受,将元素打破再重新拼接,使人置身奇怪的光影效果之中,仿佛穿越回到八九十年代。

/

蒸汽波的设计语言精选有哪些?

x

来源:http://www.magdiellopez.com/jb5v0lbp780v5fff97lc02jt339tba

古典雕塑

古典雕塑 蒸汽波中最常见的一种拼贴图案,将各种石膏像头部或者全身放在画面中的各种位置。或者将石膏像进行切割,切割的部分进行图像填充产生空间感。这种美学是夸张甚至戏弄的嬉皮精神。

x

来源:https://5b0988e595225.cdn.sohucs.com/images

Lo-Fi低保真故障

Lo-Fi低保真故障 低保真的意思是低质量,在音乐或者视频播放中有所残缺,变形,就像我们过去说的卡带。而在设计中的使用却丰富了画面,配合动效闪屏,具有很强的视觉冲击力。

x

来源:https://www.pinterest.com/qinjianwork/boards/

过时科技(复古元素)

过时科技 90年代,人们对PC设备充满好奇和耐心,Windows95/98系统报错的提示,彩色的视窗,灰色的对话框,卡顿的低像素的电子屏幕,反复弹出的窗口,粗糙的2/3D字体,镭射光碟的荧光也成为蒸汽波的一种元素。

x

来源:https://wx.zsxq.com/dweb/#

赛博朋克

赛博朋克 赛博朋克从其英文的字面含义上来可以理解为“使用机器的无政府主义”。特点是强烈的反乌托邦和悲观主义色彩。相关词有:生化人、反乌托邦、虚拟现实、后现代状况。蒸汽朋克和赛博朋克在「朋克」上的相同之处是思想解放、反主流精神。它们的不同点在于一个是乌托邦的,具有美好的幻想希望回到一个美好的历史时代;而另一个是反乌托邦的,具有强烈的悲观主义,恐惧被机器主宰的未来。

x

来源:http://www.magdiellopez.com/iktbxmbfz5jjaudg1szhzouveh5847

迷幻流体渐变

迷幻流体渐变 对比色的红蓝渐变营造出的荧光效果,刻意扭曲混合的颜色,都传递出不真实的感觉。这种颜色来自于光碟的反光,并在此基础上丰富扭曲,打造出金属质感。蒸汽波风格的视觉中,通常用这种形式营造虚幻的心理感受。丰富且不和谐的颜色搭配,就像是上世纪八九十年代黄金时代的纸醉金迷,奢靡美好却又危机四伏。

/

蒸汽波的应用场景有哪些?

x

来源:https://www.applestore.com

在UI设计中

关键词:相机效果、视频、复古

蒸汽波在UI设计中多是一些工具类的APP,图片处理、相机、视频录制等等,无疑是新潮的移动端工具。也带给用户DIY自己照片的良好用户体验。抖音的出现也是带来了一波蒸汽波风潮,大家可以多多下载尝试感受一下。 

x

来源:https://www.pinterest.com/qinjianwork/

在小程序设计中

关键词:调性、新潮

抖音APP的出现,把蒸汽波风的时尚潮流体现的淋漓尽致。嘟嘟卡点相册和BOOMDI两款由花椒团队开发的小程序也把2019年的潮流小程序推向了顶峰,潮流,好看,好玩。

x

作者:https://www.pinterest.com/qinjianwork/

在Banner设计中

关键词:炫酷、年轻、吸引眼球

2017年的淘宝新势力周,首次在主流的平台上大规模使用蒸汽波风格的Banner设计,吸引了大批希望自己更加时尚更加炫酷的年轻人的眼球。淘宝已经不满足于买卖商品,而是让情怀更加深入人心。

x

来源:http://www.magdiellopez.com/

在海报设计中

关键词:虚幻、拼贴、无秩序

非常适合用于海报设计,画面具有强烈的视觉冲击感。很多文学影视作品表现出对科技的反思,出现了大批赛博朋克作品,如《蜘蛛侠:平行宇宙》、《攻壳机动队》、《银翼杀手》等,带有强烈的反乌托邦和悲观主义色彩,反映了人们对于科技水平快速发展,而精神文明却逐渐空虚的现状的担忧和反思。蒸汽波就诞生于这样的反思中。

x

来源:https://meihong.zcool.com.cn/

在C4D设计中

关键词:冲击力、随机、创意

C4D是一个很神奇的软件,你可以通过不同的材质球和渲染参数得到完全不一样的视觉效果,在创作的时候刻意的融入蒸汽波的元素和语言特点的话就很容易得到很有视觉冲击力的作品,大家可以多多尝试。这也是C4D这款软件的魅力所在。

x

来源:https://www.sohu.com/a/288188564_99985468

在滤镜效果设计中

关键词:社交、二次元、Emoji表情贴图

打开像是ins这种社交平台,就能发现不少蒸汽波艺术的迷妹。平时不苟言笑的Bella内心是个梦幻的土酷少女,经常能看到她在ins用蒸汽波滤镜二次创作的照片。蒸汽波艺术和拼贴元素息息相关。

x

来源:https://www.sohu.com/a/288188564_99985468

在店铺设计中

关键词:装置、石膏、绿植

各种各样网红打卡店的出现带来了极高的网红效应产出,而蒸汽波这种店更是适合类型的店铺设计,无论是服装、视频、音像、餐厅等等。

x

来源:https://baijiahao.baidu.com/s?id=1628026509002955391&wfr=spider&for=pc

在摄影设计中

关键词:服装、气氛、道具

首先服装风格在蒸汽波基础上配色要保持统一符合调性,比如镭射服和五彩斑斓的反射光,墨镜、腰包、彩色袜子和潮流凉鞋。场景上,道具元素的取用1-2个是极好的不要过多。光线上,影棚光线配合电影灯+LED灯管拍摄,利用塑料袋制造镜头朦胧效果都是不错的选择。最后在修片的时候控制好色温在3900K左右,相信你会得到你想要的蒸汽波效果的。

/

推荐设计师

x

Magdiellop

来自古巴的设计师Magdiel是一个十分勤奋的人,坚持打卡,并且发布到自己的个站上,链接:www.magdiellopez.com。也可以关注他的ins。不同的风格都有尝试,也一定能给你带来灵感。

x

梅红提爱克斯

来自中国的设计师-梅红提爱克斯,一个非常优秀的小姐姐,常年活跃在站酷和UI中国上面,分享的都是非常精彩的C4D作品,风格跨度大,作品惊艳,同时也在开每周的打卡活动,大家可以关注一下。主页:https://meihong.zcool.com.cn/

/

结语

艺术风格这个螺旋上升发展的奇妙种子在互联网的逐渐普及下愈发茁壮,用户们对各种调性,各种类型的产品的适应能力也是越来越自然,对新事物的兴趣也是越来越浓厚,各种看似陈旧的风格使用得当也是可以做出让人眼前一亮的设计的。

作为设计师也要不断提高自己对各种各样风格的了解和掌握,越是踏实勤恳才越能发光发热。

/

参考文章

《蒸汽波到底是个什么波》

https://www.sohu.com/a/288188564_99985468)

《蒸汽波是什么》

(https://zhidao.baidu.com/question/877834658266467892.html)

《「蒸汽波」,到底是什么波?》

(http://dy.163.com/v2/article/detail/DP4UO9TL0514SOT0.html)

《不懂蒸汽波?那你OUT了》

(https://baijiahao.baidu.com/s?id=1605859904684580519&wfr=spider&for=pc)

《流行了很久的蒸汽波,你真的了解吗?》

(https://www.ui.cn/detail/279537.html)

《悄然在抖音火爆的蒸汽波到底是什么呢?》

(https://baijiahao.baidu.com/s?id=1623990979501335629&wfr=spider&for=pc)

《蒸汽波艺术鉴赏指南》

(https://www.jianshu.com/p/591dd926eb13)

《教你如何拍摄蒸汽波风格的写真》

(https://baijiahao.baidu.com/s?id=1628026509002955391&wfr=spider&for=pc)

《大势已定,今年流行蒸汽波》

(https://www.sohu.com/a/233142177_642686)

《光怪陆离蒸汽波》

(https://www.ui.cn/detail/375199.html)

再次感谢这些优秀的作者们。

/

欢迎大家在评论区里留言讨论,十分期待。

微信公众号:大表哥的设计说

你在这里可以看到我写的各个国家的游记以及刚刚开始的设计分享。

一起提高,感谢。

网易云课堂Material design变身记

原文链接 https://www.ui.cn/detail/491378.html


结合Material design语言对网易云课堂安卓端V6.9.3版本进行视觉层面优化,并基于此对MD语言进行一次深入探索 。Material Design是Google在2014年开发者大会上首次提出的设计语言,这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”;在2018年,Material Design已经升级到第二个版本。当前在国外,Material Design(以下简称“MD”)已经被非常广泛地应用到主流app,如facebook的安卓端等。但是在国内,我们在安卓端很少看到完全MD风格的app,大部分都是在延用ios设计稿做一稿适配;只有少数的app,如网易云音乐、印象笔记的安卓应用以MD风格进行独立设计。

那么到底什么原因使得这几年MD设计语言没有在国内流行起来呢?在网上搜索分析文章,了解到原因有很多;总结来说,主要原因有两点。

第一点,MD设计语言出来的时间点有些晚。MD出来之前,由于安卓系统的开放性,导致安卓手机屏幕尺寸五花八门,同时由于按照安卓设计指南做出来的界面视觉效果比不上ios设计指南,所以开发者基本上以ios设计稿为基准进行一稿适配。 这样使得国内长期UI设计风格是被ios设计所主导。而MD出来之后,在国内,谷歌的影响力还是很有限,同时国内大厂也没有带头对安卓端用MD风格单独设计。总之,MD语言出现较晚是其流行不起来的一个原因。

第二点,对于大部分开发者来说,主要因为投入产出比低,即安卓端单独设计一份设计稿会导致设计资源和研发资源投入过大,却无明显收益。更具体来讲,我们ios和安卓各自都做设计稿,带来设计成本的增加;而开发同学重构已有安卓代码也会花费大量时间。而ios设计稿一稿适配到安卓,也不见得丑,用户不会仅仅安卓端app变得更好看而去使用app,所以还是一稿适配省事。

既然如此,那么MD语言我们是否应该彻底放弃?答案否,尽管我们从商业价值角度,对于在安卓端完全使用MD语言存在顾虑,但是从用户体验角度考量,在安卓端按照MD语言进行设计更加友好。另外,哪怕我们是用ios设计稿进行一稿适配,MD语言依旧有很多值得借鉴的地方,即借鉴到我们日常ios app界面设计中,如里面的文字规范、布局规范、颜色规范、图标规范、交互动效以及部分组件等。为什么可以借鉴呢,因为MD本身就是考虑了跨平台、多终端的一套设计语言。

x

正好最近经常使用网易云课堂,认为还有一些页面在布局和视觉呈现上可以做得更好,所以试着在优化的同时结合应用MD语言进行一次改版。这里重点不做app范围层和结构层优化,主要做框架层和表现层的优化尝试。

文章内容分为三大章节,第一个章节是“界面整体及局部展示”,详细解构本次改版的设计细节。第二个章节是“设计规范”,从文字规范、颜色规范、布局规范、图标规范制定基本规范;第三个章节是“MD语言与ios app设计 ”,讲述MD语言如何应用到ios app 设计稿当中。

在看下面内容之前,请对网易云课堂有初步的了解,以减少您的阅读障碍。如果没用过,最好去下载app简单使用下,至于是ios还是安卓系统的app关系不大;当然体验安卓客户端更好,因为本次改版是针对网易云课堂安卓端6.9.3的改版尝试。 同时在文章底下的附件里,有本次改版的源文件,在源文件里面也放了改版前的页面截图,所以可以把它作为文章补充;如果觉得文章哪里表述不清楚,可查阅对照。 

x

先来预览下改版后的整体效果。

x

这里,做了网易云课堂安卓客户端V6.9.3一级页面的MD改版,即“首页、发现、我的学习、账号”四个页面。

由于本次探讨的是用MD语言来优化安卓客户端V6.9.3,重点是用MD设计语言来改善界面视觉表现,提升页面精细程度;所以不深挖用户体验,即不通过对产品定位、业务需求、用户需求以及竞品层面的分析来对页面进行交互层面和视觉层面同时优化。以下对这“四个页面”分别展示改版细节。

一、首页

先来总览网易云课堂安卓V6.9.3首页页面(改版前),以下截取首页的不同区块。

x

从旧版本首页的页面布局和视觉层面分析,发现存在一些问题,下面列出部分。

x

先看下改版后的整体效果

x

下面对首页各模块进行拆解展示用MD语言改版后的视觉细节,他们分别是:

x

1、应用栏和底部导航栏

1)旧版本问题分析

改版前,如下图所示,应用栏的样式是直接由ios一稿适配的;并且有底部标签栏。

x

2)改版思路和细节展示

按照MD规范对应用栏进行重设计,把原来“底部导航栏”的四个入口全部放到顶部,其中“首页、发现、我的学习”作为标签可以直接切换,“账号”直接放入左侧侧边栏(绿色遮罩区域)。

这里强调一下小图标设计细节。小图标设计大小为24dp*24dp,这里有“侧边栏”和“搜索图标”。用“搜索图标”说明细节,它距离右侧是16dp,但提供给开发的是一个48dp*48dp的切片(绿色边框),相当于在小图标周围填充12dp;为方便标注,可以在小图标下面建一个透明的48dp*48dp正方形,最后开发同学看到的标注是如下图绿色标注所示的4dp,而不是16dp(另外一点补充说明,MD语言也允许“底部导航栏”的存在,但由于安卓机子底部通常有系统自带的三个功能键,容易误操作,所以在安卓端放置“底部导航栏”不是第一选择)

x

2、首焦

1)旧版本问题分析

改版前两边露出局部的轮播图,不够美观,并不需要靠这个提醒首焦是轮播图 。

x

2)改版思路和细节展示

针对以上问题,采取的方案就是两边不展示局部的轮播图。其次,因为页边距由12dp改成16dp,所以banner也同时微调,由原来的336dp*154dp改成328dp*160dp;改版后长宽比约2:1。为什么不刚好2:1呢,328dp的二分之一不是164dp吗?因为高度微调4dp后,banner长度和高就都能被8整除(这也符合MD里面规定,控件尺寸第一选择控制在8dp的倍数;次要选择是4dp的倍数)。

说到比例,那么MD对于比例有什么规范?如何应用?下面从“MD语言比例规范”和“主流app首焦比例研究”分别说明MD比例规范是什么以及如何应用MD语言比例规范。

a、MD语言比例规范 

MD语言建议元素宽高比是16:9,3:2,4:3,1:1,3:4,2:3,这些常见的比例让我们的设计拥有简单的规则,不必费力去记忆,如下图所示;关于MD比例规范,在文章第二个章节设计规范里面的布局规范有详细的说明。

x

b、主流app首焦比例研究

有一个问题,就是这里网易云课堂首焦为什么不按照MD建议的比例?因为首焦宽高比采用哪怕是MD建议的比例最窄的16:9,对于如电商类平台等信息密集型app,占用的高度也太高了。我们需要在首屏展示更多的内容,以便提高除搜索、首焦、“主功能区”之外其他的模块的UV,所以首焦高度都尽可能压缩。对主流app进行截图,发现几乎都不采用一个有规律的比例。当前主流app首焦,比例大多都在2倍到3.5倍之间(如下图)。

x

这里美团的轮播banner可以说极限窄了,宽高比快接近4倍了,文字阅读体验已经不是最佳了;其实这就是一种妥协,即用户体验妥协于业务需要;更具体来讲,就是作为用户体验一部分的“视觉表现”妥协了UV提升这个“实用性”需要。妥协意味着打破设计规则,所以这里没有遵循MD比例规范,用了其他比例,同时美团banner文字也用得比常规小。

这样一来,我们对如何应用MD比例规范就有清晰的策略:先尝试遵循它,无法满足实用性,就去打破它。具体来说,就是对于设置元素的比例,如头像、列表图片、商品详情页等等,我们可以采取策略是优先考虑MD推荐的比例,但是当这些比例不能满足特定页面排版布局时,我们可以用其他比例,比如2:1或者3:1等好记的自定义比例。如果在这些比例还不能满足需求,可以在这个基础上做调整。

有一点需要强调,MD的比例规范在ios app设计中完全适用。

3、主要功能区

首焦下面是主要功能区,当用户进来时是有目的的寻找课程;除了搜索功能可以提供帮助,就是这个主要功能入口了。也就是说主要功能区是为了满足这一类带着目的来寻找课程的用户而设计的功能入口。

1)旧版本问题分析

改版前“系统化学习路径”的分类和应用栏里面的“分类”入口内容有交叉重叠。

x

2)改版思路和细节展示

可以对功能进行合并整理,避免用户困惑。同时把入口做成图形化的图标,更容易形成记忆点,这里的图标用统一的圆角矩形底板,内部反白,通过微渐变、轻投影塑造轻质感的折纸风格(细节见第二章节的图标规范)。

在介绍主功能区细节前,先了解下MD的网格。MD规定,组件尺寸和间距都建议对齐在8dp网格上(如应用栏和悬浮按钮等),而小组件如图标、字体和组件内的元素的尺寸以及间距允许对齐在4dp网格上。

x

接下来展示主功能区细节上如何应用8dp网格和4dp基线网格。这里的主功能,作为整个组件是对齐8dp网格的,它的高度是184dp刚好被8整除(下图所示)。而主功能图标和文字都对齐4dp基线网格,图标大小44dp*44dp(绿色遮罩区域),文字字号是设置12sp,行高16dp。以文字行高为边界线,如图所示“设计创意”文字上下间距分别是有6dp和14dp;为什么间距这么没有规律呢?原理是基线网格对齐。

x

下图展示基线网格下的间距,看到图标和文字底端均对齐4dp基线,“设计创意”上间距就是约8,下间距为16dp,这是以文字的字高而不是行高来计算上下间距。问题来了,既然用基线对齐,为什么要设置行高?因为在多行文本就需要行高。

x

MD并没有对文字的行高有严格数值规定,但规定行高必须是4dp的倍数,这样能保证多行文本文字能全部对齐4dp基线网格上;而安卓开发同学通常习惯一个字号对应一个行高,或采用系统默认行高,或统一对每个字号的行高自定义设置。一个字号设置太多行距,对于开发同学并不友好;通常建议一个字号定义一个行高,特殊情况可以是两个行高,如MD提供的文字样式sketch文件显示16sp应用在标题和正文是行高分别是24dp和28dp;(注:文字字号单位是sp,通常1sp=1dp,另外底部附件含有MD官方文字样式sketch文件)

4、课堂直播

1)旧版本问题分析

如下左图,表头标题过大,20dp的bold字重,在这里并不美观。这里时间轴断掉,可能是bug; “查看更多”放在表尾,比较占用高度。

x

2)改版思路和细节展示

改版过程分为三个步骤,第一步,表头优化,表头采用图标加文字的形式,即方便用户快速定位,也增加美观度;图标采用非常简约的带底板的面型图标。第二步,另外把“查看等多”的入口移到表头,节省空间。第三步,最后用MD规范的文字字号、颜色,以及间距规范对整体进行微调。下面分别介绍表头和表内容的细节。

a、表头的细节

先看下表头的整体细节,表头总高度48dp,标题文字是16dp,次要文字14dp,这里的文字规范直接采用MD文字规范。页边距是16dp,文字和图标的间距大多是8dp,除了绿色标注的间距是4dp。

x

这里的“直播图标”和“小箭头”都是小图标(真实宽高都不超过20dp的图标),按照MD规定的小图标规范,小图标需要用24dp*24dp的“图标盒子”作为图标绘制参考,下图展示这两个图标在图标盒子下的真实尺寸和切图尺寸(图标盒子在第二章节设计规范的图标规范里会详细介绍)。

x

为什么“课堂直播”图标切图尺寸是20dp*24dp,而不是和应用栏一样采用48dp*48dp, 因为它不可点击,不需要考虑点击热区。既然不考虑点击热区,那切图的尺寸满足两点就可以了,一是尽量靠近真实尺寸,以方便左右间距计算,如上右图“小箭头”的切图宽度设为8dp;二是宽高要是4dp的倍数(MD对组件尺寸的规范必须是4dp的倍数)。 “小箭头”这里也不需要考虑点击热区,因为这里局部区域都可以点击(下图绿色遮罩区域)。

x

另外,如果小图标都在sketch做成组件,都应该是24dp和24dp的,为方便切图,可以给组件加上蒙版,比如这里的小箭头图标下面画一个8dp*24dp的正方形,建立蒙版。这和应用栏图标为切图48dp*48dp的处理一样,symbol里每个小图标都是24dp*24dp,但是最终开发同学看到的标注就是如下图两个图标的尺寸和距离。(这里细节表述可能不够清楚,底部附件有源文件对照)

x


关于课堂直播的表头,还有一个细节,就是把表头当做一个组件(下图所示),把它设置成48dp的高度,而里面包含的图标和文字无需对齐4dp基线,只要居中对齐即可。这是MD对无需对齐基线的特殊情景,即一个组件里面只有一行且需要居中对齐的情景。

x

b、表内容的细节

上面分析了表头的细节,下面分析表内容,我们从文字属性、距离、组件尺寸分别拆解展示。

先看下文字属性,这里文字样式也是用MD的语言设置,包括文字字号、字重、行高以及颜色的用法。表内容只有两个层级,一个是标题文字,一个是正文3。下图的日期、时间、“讲师”都是正文3,只不过时间“20:00”因为是纯数字,字体用robot。(这里出现的“正文3”,在第二章节设计规范下的文字规范里面有详细介绍)

x

下方左图展示表内容的水平间距,都是4dp的倍数。尺寸也是按照MD建议小组件最少要4dp的倍数。

x

但是这里“小三角”并没有完全按照规范(见下图绿色线框),因为尝试用宽高4dp*8dp,8dp*16dp,视觉感受上要不太小,要不太大,并不美观,最后采取了宽度是6dp*12dp,同时为了和小圆点(橙色线框)水平对齐,“小三角”与色块上边界距离设置14dp。尽管“小三角”没有遵循MD规范,但是小三角和圆角矩形色块是一体的,它的宽高260*60都是4dp的倍数。这里的“小三角”是因为考虑审美,适当打破了MD关于尺寸规范的规则。

x

在前面主功能区已经展示了基线网格的用法,与其不一样的是课堂直播表内容出现了多行文本和文字组。下图展示文字对齐基线的间距,这里也采用MD的规范让文字底部贴齐4dp基线。

x

用基线网格对齐,文字与元素之间的真实间距可能不是4dp的倍数,下图所示,文字与文字之间的的真实上下间距4dp和10dp。

x

隐藏基线网格,开发同学看到效果图,是文字带有行高属性的标注(见下图),因为开发同学定义上下间距,是以文字行高的边界为基准的。这里还有一个细节,就是这里的讲师头像和讲师介绍构成了一个小组件(绿色遮罩),所以这里只要头像对齐基线网格即可,文字和头像居中对齐,这里同上面表头内元素居中对齐的情景一样。

x

5、微专业

微专业是网易云课堂最具体系的课程,采用录播+直播的模式,这里面的课程大多是网易在职大咖授课。

1)旧版本问题分析

如下左图所示,标题文字过大,20dp的文字,用在这个场景并不美观,且标题内容主次安排不合理;另外表尾的“了解更多微专业”的样式,也和其他首页模块不一致。

x

2)改版思路和细节展示

a、表头

表头的形式和上一个模块“课堂直播”保持统一,这里对细节不再赘述。区别仅在这里的表头多了副标题,同时也增加了分割线,分割线左右间距各8dp。

x

b、表内容

在上一个模块“课堂直播”的表内容,对基线网格的应用进行了详细阐述,这里重点说明间距的设置思路。这里的间距关系是,间距4≥间距3≥间距2≥间距1,间距5≥间距2。为什么设置这样的间距关系?因为我们要用间距体现这些内容亲密关系程度。这利用了格式塔原理的邻近性原则,即我们的眼睛会把互相靠近的元素当做一组。这里表内容的标题文字和正文形成了最小组,所以他们之间的间距1应该设置最小,这个最小组和上方的图片形成复合组,他们的间距就是图中的间距2,它一定不能比间距1小,依次类推。

x

那么理清这个对我们有什么用?当然有用,我们可以设置元素之间最小间距作为基准间距,在这里就是间距1。根据经验,如果元素基准间距是上下间距的话,通常它的值是8dp比较合适,也就是说大概占用两个4dp的基线格子;有了基准间距,就很好办了,间距2要大于等于间距1。而增量梯度最高是一个基线格子,即间距2可以设置约2个或3个基线格子的距离,可能是8dp、9dp、10dp、11dp或12dp。在这个模块里面,间距1=8dp,间距2=11dp,间距3=12dp,间距4=间距5=16dp。全局范围内我高频使用8dp、12dp、16dp的三个间距,利用4dp基线网格,那么我就可以通过数格子计算间距,即只要看2个格子,3个格子,4个格子来控制上下间距。

x

总之,我们设置间距首先要梳理元素之间的亲密关系来确定间距大小关系,然后从设置最小间距开始,依次设置其他元素之间的间距,当然这里要用基线网格辅助对齐。

6、限时秒杀

1)旧版本问题分析

限时秒杀模块,个人认为有几个问题;一是颜色用得过于单一,有点单调;二是价格和剩余席数的间距有些混乱;另外“马上抢”和“倒计时”看起来有点大。

x

2)改版思路和细节展示

时间轴

时间轴单个模块尺寸按照4dp的倍数调整(见下图)。

倒计时

调小尺寸,调整成16dp*16dp,并且颜色改成主色,里面文字改成10sp的极限文字(见下图)。

列表图片

这里的图片比例也是3:2,和旧版一样,只是高度略微调大以便匹配右侧信息高度。具体是根据右侧的信息量进行排版(绿色遮罩显示右侧信息量占用高度),继而确定了图片的高度,再用3:2比例计算出图片宽度。

列表间距

这里的最小是4dp,用于两个价格数字之间。

列表文字

用MD文字规范重新调整了字号、颜色,这里强调一点,列表中的“限量席数”改成了主色绿色,用了12号字体。

小按钮

“即将开抢”按钮改成64dp*24dp,字号12sp。

x

7、个性化推荐

1)旧版本问题分析

如下方左图所示,旧版本的“个性化推荐”大标题下的背景过于抢眼,在整个页面很突兀。另外,表内容中的样式1虽然很有区块分割明显,但是灰色的背景上用灰色字识别度低,且不美观。而表内容的样式2和上个模块“限时秒杀”的表内容形式一样,这样给人感觉比较单调。

x

2)改版思路和细节展示

基于以上列出的问题,那解决方案分别是弱化“个人推荐”大标题模块,背景直接换成灰色背景;样式1去掉灰色背景重新排版;样式2视觉呈现彻底改变。这里着重说明下图片尺寸和标签的细节。

下面的大图片16:9,为什么说接近呢?大图尺寸是328dp*184dp,实际是这么来的,328dp是两边减去全局边距16dp得到的,那高度=328*9/16=184.5,把值微调成184就能被8整除了,尺寸就这么来的。标签“微专业”与小标题之间的间距用了组件之间最小间距4dp,标签高度用了16dp。

x

那小图呢,如下方左图所示,比例也是16:9, 具体的思路是先定宽度,再定高度。那么它的宽度怎么确定呢?根据排版需要决定大致宽度,下面详细说明思路。

“零基础 ipad Q版插画手绘”这一行标题最多字数在15个字左右(即下方右图的红色遮罩区域),因为限定字数太少的话,标题很难让人理解说得是什么。根据文字量,决定屏幕宽度2:1的位置作为构图比例正合适。(这也是对MD比例规范的应用,即下方右图所示的“2a”与整个屏幕宽度“3a”的比例是2:3)。 比例确定了,我们是完全按照比例定位位置吗?不是的,如果完全按照比例,下方右图标注的红色虚线,正好是2:1的位置上,而实际上分割点放在了绿色虚线 。因为MD的组件尺寸要尽量被8dp整除, 所以微调下卡片宽度选择好记又能被8整除的宽度200dp,所以第二张卡片的左边界就偏移到了绿色虚线位置。

既然宽度定了好,那高度=200*9/16=112.5,最后选用112dp作为高度。另外,上一个模块“限时秒杀”的表内容是根据排版内容先定高度,但思路是一样的。

x

二、发现

先来总览网易云课堂安卓V6.9.3“发现”页面(改版前),以下截取“发现”页面的不同区块。

x

从上方“发现”页面的布局和视觉层面分析,发现有以下这些问题存在。

x

先来看下改版后的效果

x

下面对“发现”各个区块进行拆解展示用MD语言改版后视觉细节,他们分别是:

1、应用栏和标签栏

2、样式一(feed流)

3、样式二(feed流)

4、样式三(feed流)

1、应用栏和标签栏

这里仅仅是根据MD语言调整样式,如下图

x

2、样式一

1)旧版本问题分析

改版前,默认头像和“加关注”样式不美观,“更多”图标横向并不符合安卓系统的样式。

x

2)改版思路和细节展示

a、表头

头像做成图标,更美观;“加关注”做成描边小按钮,强化可点击。“更多操作”图标大小8dp*24dp,如下图中首图所示,距离页边16dp;但切图是在其边缘周围填充12dp,即最后切图32dp*48dp,所以开发同学的代码实现是左边距0dp,右边距4dp。

b、表内容

图片改成4dp圆角,尺寸微调,标题文字改成regular,并且文字都按照基线网格对齐。

x

3、样式二

1)旧版本问题分析

表头“更多”图标不匹配安卓的规范,表内容重要文字颜色过于弱了。

x

2)改版思路和细节展示

a、表头

调整“更多”图标样式,改成安卓端常用的竖向,同样式1的表头。

b、表内容

图片改成4dp圆角。直播图标填充改成更深的半透明遮罩,这里设置整个尺寸56dp,是8dp的倍数。填充#000000 38%, 内描边1dp厚度,色值#ffffff;另外里面的图标大小24dp*24dp。

x

4、样式三

1)旧版本问题分析

表头问题同上,所以不做赘述。

x

2)改版思路和细节展示

表头细节同其他模块,这里不再重复。这里对整体字号、行距、距离、图片尺寸都进行微调,对齐了4dp基线网格;图片的宽高是84dp*56dp,比例是3:2,也是MD推荐的常用比例。

x

三、我的学习

先来总览网易云课堂安卓V6.9.3“我的学习”页面(改版前),以下截取“我的学习”页面的不同区块。

x

从上方“我的学习”的页面布局和视觉层面分析,发现有以下这些问题存在。

x

看下改版后的效果

x

应用栏和标签栏细节同“发现”页面,同时前面的“首页”和“发现”大篇幅解析尺寸的设定和4dp基线网格的应用,接下来就不对这些进行详细说明了。下面分别展示其他区块用MD语言改版后视觉效果,他们分别是:

1、可视化视图和“学习时间”

2、最近在学

3、报名记录

1、可视化视图和“学习时间”

1)旧版本问题分析

大面积灰色块背景给人感觉比较压抑;另外“学习时间”卡片的排版美观度不佳。

2)改版思路和细节展示

这里把背景统一改成白色,同时时间轴进行了微调;另外调整“学习状态”卡片,去掉底板,并且调整版式。

x

2、最近在学

1)旧版本问题分析

表头问题同前面首页“限时秒杀”等模块同样的问题,标题文字对比过于极端,所以看起来不美观。

2)改版思路和细节展示

a、表头

同首页的 列表形式一样,配上图标;

b、表内容

图片宽高调整为4dp的倍数,调整比例同首页的“微专业”和“限时秒杀”的表内容图片一样都是3:2;

x

3、报名记录

1)旧版本问题分析

下面左图所示,我们看到存在文字量少的情况,这时候左文右图形式文字和图片之间的留白显得非常不舒服(淡红色的色块)

2)改版思路和细节展示

改成左图右文,减少不规整的留白;另外调整图片尺寸,最终确定和首页的“限时秒杀”表内容图片一样大小,以尽量减少图片尺寸种类。

x

四、账号中心

我们先来看下改版前后视觉效果。

x

从上方改版前的页面观察,发现一些问题,罗列如下

x

这里改版的主要思路是,把较为不常用的账号管理功能做成抽屉式导航;在视觉层面上,利用8dp网格和4dp基线网格重新设置尺寸和距离,并遵循MD的列表规范;另外通过配色、重绘图标优化界面视觉呈现。

下面对改版后的抽屉式导航的账号页面进行整体和局部拆解展示用MD语言改版后的视觉细节,他们分别是: 

1、页面布局

2、应用栏和个人信息

3、常用功能区

4、功能列表。

1、页面布局

1)旧版本问题分析

带投影白底板的底下也是白色,显得多余。列表色块分割频繁,页面不透气;

2)改版思路和细节展示

如下面右图所示, 改成抽屉式导航页面,主页面宽为304dp,右边缘留56dp,页面下方是38%不透明度黑色遮罩层;主功能区和功能列表之间通过大留白间隔;带图标的功能列表采取MD推荐高度56dp,用分割线分类,这带来了透气感;底部“退出功能”列表项,采用了48dp高度。

x

2、应用栏和个人信息

1)旧版本问题分析

改版前,应用栏图标没有按照MD图标规范,如图标尺寸;同时默认头像缺乏细节,“我的主页”外边框多余。

x

2)改版思路和细节展示

把默认头像做成图标。

x


3、常用功能区

1)旧版本问题分析

这里主要是配色单一的问题,另外这里带阴影的白色底板多余了;

2)改版思路和细节展示

去掉带投影的底板,同时图标重新设计,选择的图标颜色要匹配功能入口所传递的心理印象,如“我的卡券”,可选择有促销、热闹色彩感受的暖色色相。这里的图标参考MD的24dp*24dp的图标盒子重新定义了36dp*36dp的图标盒子。如图所示,内部主要绘制区是30dp*30dp,对于四种不同的形状的图标给出长宽参考。周围3dp(下方绿色标注)是为了应付极端情况,只有为了平衡重量才允许在此区域绘制,但不能超出36dp*36dp的区域。

x

4、功能列表

1)旧版本问题分析

灰色分割块过多,显得不透气。

2)改版思路和细节展示

背景统一白色,列表项组用1px实线分割;另外,列表加上图标能让用户快速识别功能,同时更美观;这里图标采用MD图标规范,也就是24dp*24dp,由于图标细节比应用栏图标更多,设置线条粗细为1.5dp。

x
x

上面的第一个章节介绍改版前后页面整体视觉表现和局部细节;接下来展示改版后的规范总结,仅包含基础规范,下面分别展示:

1、文字规范

2、颜色规范

3、布局规范

4、图标规范

一、文字规范

这里总共有三块内容,分别是概览、场景举例、文字基线对齐

1、概览

下面展示的文字规范采用MD规定的字号系统,MD还规定了H1到H3,主要在PC端可能会用到,而移动端用不到,所以这里不展示了。中文字体,使用 Noto Sans CJK SC字体, 英文和数字字体使用Robot字体。另外文字颜色常用#000000 87%、#000000 60%、#000000 38%(暗色背景上的文字相对是#ffffff 87%、#ffffff  60%、#ffffff 38%)。其中所有标题色值均为#000000 87%,所有辅助说明色值均为#000000 38%;正文包含常规三种色值,与标题搭配时常为#000000 60%;独立使用(没有标题)时通常为#000000 87%;特殊情况,需要刻意弱化时则使用#000000 38%;所有字号有34sp、24sp、20sp、16sp、14sp、12sp、10sp;其中16sp、14sp和12sp为常用字号,16sp、14sp可用于标题和正文,12sp可用于正文和辅助说明,根据排版需要选择合适字号。下面表格对文字的使用进行细致的规范。

中文:NotoSansCJKsc   英文/数字:Robot

x

上面说了标题、正文、辅助说明的用法,那怎么才算标题、正文和辅助说明呢?用文字层级去判断。当一个组合只有一个层级时,只有正文,比如首页主功能区图标下文字。当一个组合只有两个层级,会用到标题和正文;当出现三个层级时,除了有标题、正文外,把第三个层级的内容作为辅助说明,如时间等;这里组合指的是一个组件,可能是完整的组件如应用栏, 或“账号”的功能列表等;也可能是大组件内小组件,如首页多个模块的“表内容”等。

2、场景举例说明

因为本次针对网易云课堂的安卓端V6.9.3的改版仅改动一级页面,暂时未用到“H4大标题、按钮文字”,所以这里不做举例了。下面对所有标题、正文、辅助说明、极端文字进行场景举例。

1)H5 大标题

大标题,用于图文排版场景,信息量少的页面或数字凸显(如金额、时间等);目前的四个页面中仅有“数字凸显”的场景使用,使用字号24SP,字重regular,行高32dp,文字颜色#000000 87%(如下图)

x

2)H6 大标题

用于应用栏、对话框标题,结果页、空状态等信息单一页面标题,或需要强对比的其他场景下的标题。使用字号20SP,字重Medium,行高28dp,文字颜色#000000 87%(背景暗色系时用#ffffff 87%);

x

3)标题1

标题,使用字号16sp、字重regular、行高24dp、文字色#000000 87%,用于表头标题、功能列表标题、feed流标题、表内容标题,常与14sp的字体搭配使用。

x

4)标题二

小标题,使用字号14sp、字重Medium、行高20dp、文字色#000000 87%。与12sp的字重regular正文搭配使用,常用于表内容标题,如首页的微专业和限时秒杀模块表内容标题(如下图所示)。

x

5)正文一

使用字号16sp、字重regular、行高28dp。作为正文和H6大标题(20sp)搭配使用时,色值为#000000 60%,如下图的应用栏里非当前状态的文字;而用于无标题的段落文字时,色值为#000000 87%(下方第二张图红色遮罩区域)

x

6)正文二

使用字号14sp、字重regular、行高20dp。作为正文主要和标题1(16sp)形成对比,也允许和标题2(14sp)搭配,色值常为 #000000 60%。

x


7)正文三

使用字号12sp、字重regular、行高16dp、文字色通常为#000000 60%和#000000 87%。搭配标题时,文字色使用#000000 60%;通常与标题二(14sp)形成对比,如下图区域1的正文;也允许与字号更大的标题进行强对比,如下面左下图的区域2的个人头像的“我的主页”。当正文使用的情景无标题时,即单独使用,使用色值#000000 87%,区域3的场景。

x

特殊情况,需要刻意弱化的正文内容,使用色值 #000000 38% ;如下图限时秒杀 “未开始”的时间点,这里用“灰掉”的颜色表示“现在不可抢”;另外“没有更多了”不想吸引用户注意,也是刻意弱化。(下图红色遮罩区域)

x

8)辅助说明

使用字号12sp、行高16dp、文字色为#000000 38%,通常情况使用字重regular,常规用于一个模块里面文字组三个层级及以上,重要性相对弱的一个层级。(下图红色遮罩区域)

x


9)极端文字

极端情况用到,用于小组件,如提醒圆点数字。下图“倒计时”内的文字就是一个应用场景。

x


3、文字基线对齐

中文和英文对齐的基线不一样, 这里以16dp字号的中文和英文对比一下。因为汉字是方块字,所以可以直接用文字底部对齐基线;而英文却不是,它有四个基准线,需要用第三条线对齐。

x

二、颜色规范

颜色的使用场景有文字、背景、分割线、蒙层、按钮、图标,下面分别说明。

1、颜色_文字 

文字色、链接色、标签色

x


2、颜色_背景

x


3、颜色_分割线

x


4、颜色_蒙层

x

5、颜色_按钮

每组按钮三种状态,从上至下为常态/点击态/禁用态。其中作为主色的绿色按钮用于主操作,结果页的确定等。亮橘色的按钮用于局部,表现促销的色彩情绪。而红色的按钮用于传递警示操作的情景。

x

6、颜色-图标

图标颜色分两种情景,灰色系功能图标和有彩色功能图标

1)灰色系功能图标

x

有两种颜色。其一是#000000 60%是图标常用色,用于首页导航栏图标,账号功能列表图标等,见下图红色遮罩标记;另外用颜色 #000000 38%,用于刻意弱化的情景,目前仅用于箭头,见下图绿色遮罩标记。

x


2)彩色系功能图标

彩色图标主要用于面性图标,因为使用微渐变,所有使用两个色值,一个深色、一个浅色,当然深浅变化是轻微的,下面就以深色和浅色来称呼他们。已经设定6个渐变色复用在多个场景中(如下图所示)。

x

使用的场景有三处,分别是首页主要功能区,账号主要功能区,列表表头。

x

当然,如果前面提到的6个配色方案不适用,可以增加其他方案。那“其他方案”怎么配色呢?关于图标微渐变的配色方案的细节,可以分为四个步骤:

第1步,选择“深色”色相;

第2步,选择“深色”色调;

第3步,选择“浅色”色相;

第4步,选择“浅色”色调;

第1步,选择“深色”色相

根据内容匹配正确的色彩印象选择色相,如“职场提升、语言学习”字面上的“提升”和“学习”都可以理解成长,这里可以采用绿色。当然,“职场提升”也可以用蓝色,因为“职场人士”通常给人商务、严谨的印象,所以也合适。

第2步,选择“深色”色调

通常使用明色调,因为明色调既能准确表现色相具有的色彩印象,同时没有纯色过于刺激眼球等负面印象。建议大致区域如下图矩形框内,在sketch拾色器下面左图标记的这个位置选一个靠近距离B的色值(即饱和度更高,明度更低)代表渐变色里面的深色。

x

第3步,选择“浅色”色相

上面两步完成深色的选择,为形成微渐变的效果,色相不宜差太大,建议以“深色”色相处于色相环的位置为基准点,在前后15°内选择,确定色相。可是sketch的拾色器没有HSB模式可以用来精确调整色相,怎么办?可以用其他工具,比如ps,把“深色”HEX从sketch复制到ps当中,然后精确调整好HSB,然后拷贝HEX颜色参数到sketch里面;也可以粗略调整,15°/360°=1/24,也就是说,下图的色相滚轮只要总长度左右移动不超过1/24就好,我们目测微调下。

第4步,选择“浅色”色调

也同样选择明色调,和“深色”不同,“浅色”的色调尽量靠近上图的A点,即选用更亮,饱和度更低的颜色。

三、布局规范

本次改版页面只严格采用MD的所规定的4dp基线网格,并没有严格按照8dp网格控制间距和组件。而MD规定出除图标和文字的尺寸以及距离只要求对准4dp网格外,通常组件的大小和距离都要严格使用8dp。本次改版的四个页面在组件和距离尽量是8dp的倍数,但还是有少数情况使用仅仅是4dp的倍数组件大小和间距(如部分图片的宽度或者高也仅仅是4dp的倍数,首页各模块表内容和表头的距离是4dp。)。为什么要这么设置呢,因为如果完全按照MD的规定,在平台类app的首页等信息密集型的页面留白空间是很大的,这使得一屏展示内容很有限,不利于各个模块UV数据表现,所以综合考虑采用的策略是:只用4dp基线网格,但是在间距和组件尺寸上还是优先使用8dp的倍数,如全局边距定为16dp。

x

1、基线网格

界面中任何元素都要对齐4dp基线网格。

x


当排版内容在一个组件中居中时,可以将排版内容放置在4dp网格之外,如下面的图标和文字仅仅在列表项里面居中对齐。

x

2、比例

在展示首焦的时候,提到了MD语言建议元素宽高比是16:9,3:2,4:3,1:1,3:4,2:3,并且这些常见的比例可以让我们的设计拥有简单的规则(如下图所示);

x

本次改版大量使用其中的16:9,3:2,1:1的比例。这里更深入的说明比例的使用场景。概括来说,有两种场景,其一是以屏幕宽度为参照的构图比例;其二是局部元素的比例;下面引用MD官方的配图说明。

1)场景一:界面整体布局构图比例

x

2)场景二:局部元素的比例

x

四、图标规范

下图是本次改版页面图标的出现场景,那么这些图标如何保持统一呢?我们看到除了首页主功能区和个人中心的图标大小尺寸是大于24dp*24dp,其他都是小于24dp*24dp的。而MD对常用功能图标有一套完整的解决方案。这里图标大小在24dp*24dp以下的图标均使用MD图标盒子的规范,也就是说在sketch里给他们统一建立24dp*24dp的symbol,他们包括应用栏图标、账号功能列表、列表表头、其他小图标,见下图的红色标注。而下面绿色标注的图标并不按照MD推荐的图标盒子绘制图标,大小自定义。

x


所以这里我暂时把图标分为两类,24dp图标和自定义图标,下面详细说明细节。

1、24dp*24dp图标

在介绍如何使用24dp*24dp的MD图标盒子细节前,先来了解下MD的图标盒子是什么样的。所以这里有两部分内容,一个是MD图标盒子介绍,一个是MD图标盒子的应用细节。

1)MD图标盒子

图标大小为24dp×24dp,图标内容仅限于20dp x 20dp的实时区域,周边有2dp的填充, 特殊情景下,为了平衡重量,可以在周边填充区域绘制图标。

x

MD也给了关键参考线(如下图最左边),包括正方形,圆形,矩形,正交和对角线;我先来看下正方形、圆形、矩形1、矩形2四个参考线,下图我们看到四个形状的宽高不一致,为什么要这么设置呢?这是因为宽高都是20dp的正方形看起来比直径20dp的圆形要大,而为了平衡视觉大小,所以给出了四个基本形的参考线。比如我们要绘制竖长的图标,那就可以直接采用宽高16dp*20dp。

x


图标盒子其他参考线,即3条垂直线、3条水平线、对角线、内圆,它们有什么作用呢?上面的基本形参考线帮助我们定义整体大小,其他参考线可以帮助我们进一步定义细节,下面用MD官网文档里面两张图解释。我们看到,下面两张图分别采用正方形和矩形两个基本形参考线。此外,下面左图,用了水平参考线来定义镂空直线的位置;而下面右图用内圆参考线定义了镂空圆的大小和位置;另外也看到,它们都在基本形的基础上增加其他形状(红色线框标注),一个增加半圆,一个增加等腰梯形。同时,这两张图,也体现了MD对于方形的圆角是2dp,镂空也是2dp厚度的规定。

x


2)应用细节

上面我们介绍了MD图标规范,接下来说明有哪些场景应用它来指导图标设计,他们分别是应用栏图标、账号功能列表、列表表头、其他小图标,它们的设计画布尺寸都是24dp*24dp,即在sketch搭建的symbol都是24dp*24dp,下面一一说明。

a、应用栏

下面左图我们看到图标设计尺寸就是24dp*24dp,而图标点击热区采用48dp*48dp,这是MD规定的最小点击区域,即应用栏的图标切图尺寸就是48dp*48dp。下方右图展示目前已在应用栏用到的图标,线条粗2dp,角半径默认为2dp,内角笔直,不用圆角。当然也有不用外部角的时候,对于2dp宽或更小的形状,笔划角不用圆角的,如下面“消息”图标左下角是尖的。

x


b、功能列表

下面左图的功能列表图标设计尺寸也是24dp*24dp,但由于整个列表范围可点击(红色虚线框标注),所以切图尺寸和设计尺寸一样。下方右图展示目前已在应用栏用到的图标,图标圆角的规定同应用栏,但是线条粗细1.5dp,因为功能列表的图标有部分细节稍微复杂,用2dp会影响识别度。为什么是1.5dp呢,而不是1.4dp或1.6dp,因为1.5dp的线条可以让2倍图线条粗为3px,这正好对齐整像素。那3倍图呢,三倍图的机子,大多是视网膜屏幕以上PPi,哪怕没对齐整像素,也并不会那么模糊。当然也可以做得更好,3倍图不用sketch默认导出功能,而是把1倍图图标在sketch放大3倍,把线条粗细4.5dp设置4px,对齐整像素,然后1x导出,当然这个比较费时(网易云音乐安卓端3倍图就是这么做的)。。

x


c、列表表头图标

下面左图的列表表头图标也是设计尺寸就是24dp*24dp,由于这里无需点击操作,所以图标切图尺寸是20dp*24dp(为方便计算间距,图标下方放一个透明20dp*24dp的正方形,一起做成蒙版即可)。下方右图展示目前已在列表表头用到的图标,只定义两种基本形,一个圆形,一个水平长方形。(至于小箭头, 下面会说明)

x

d、小图标

下面左图的“更多操作”图标 ,真实设计尺寸是3dp*14dp,为什么用这个高度呢,主要和文字高度等元素保持高度接近,这样视觉更美观, 这里是和“加关注”放在一起。为了水平距离精确控制,在其下面建一个8dp*24dp长方形。这里有两种切图方式,其中第一种在前面第一章节的“发现”的样式一已经介绍过了,即热区可以设置成周围填充12dp(绿色填充),那切图尺寸32dp*48dp(整个绿色外框范围),开发同学右边距设置就是4dp;另外一个切图方式,就是直接切成8dp*24dp,点击热区为下图黄色虚线框内,这样一来,开发同学设置左边距12dp,右边距16dp。下方右图展示目前已在列表表头用到的图标,一个是列表表头出现的小箭头图标,一个下图feed流表头出现的“更多操作”图标。有一点需要强调,虽然小图标尺寸远小于图标盒子24dp*24dp,基本也用不到图标盒子来对齐,但是为方便管理图标,建议在symbol里面建立的组件大小同样是24dp*24dp。

x

2、自定义图标

上面大篇幅说明了24dp图标盒子和其具体应用方式。接下来说明首页主功能区图标和账号主功能区图标细节。

1)首页主功能区图标

主功能图标是有底板和里面的反白图标组成,底板的渐变色在颜色规范里面已经说明了,这里进一步说明里面反白图标的细节。

x


这里以“语言学习”图标为例来说明。

a、大小:

里面反白图标设置基准大小24dp*24dp,在这个基础宽高微调;

b、镂空:

里面镂空厚度固定2dp;

c、渐变:

从从上到下垂直渐变,从白色到靠近白色淡色调绿形成微渐变,淡绿色的色相用颜色规范图标篇说的“深色”或“浅色”或他们之间的色相。

d、投影:

投影位置参数是(x=0,y=1,模糊=3,扩展=0),颜色色相采用颜色规范图标篇说的“深色”或“浅色”或他们之间的色相。然后在在图中标记的区域的浊色调选择一个色值,透明度38%。(至于投影不用纯灰色,而是带色相的偏暗颜色,是因为这符合现实环境光的感觉,看起来更自然美观)

x

这里汇总目前已有底板渐变色、反白图标渐变色,以及投影色值。

x

2)账号主功能图标

a、大小规范

这里的图标采用正形图标,借鉴MD24dp的图标盒子,做了针对账号主功能的图标盒子,图标设计大小36dp*36dp,绘制区30dp*30dp,外部填充3dp。

x


b、图标细节

这里以“我的订单”为例说明图标设计细节

x

以上规范涵盖了文字规范、颜色规范、布局规范、图标规范,是不是还差组件规范呢?第一个篇章已经展示了各个模块的细节,它们包含了组件规范,所以不做重复说明。接下来我们看下第三个篇章,MD语言与Ios App设计。

x

在文章开头的时候,提到了MD语言对于以Ios设计稿为标准进行一稿适配也是值得借鉴的。除了一些ios系统控件不建议改动,如ios的导航栏、底部标签栏、对话框样式等,还有系统默认手势、交互动效等不去改动。其他大部分地方,都可以从MD语言去借鉴,如以8dp网格为参照的自定义组件尺寸、距离,颜色规范、文字规范、布局规范,至于MD强调的“海拔”概念相关的“投影”效果,在ios环境下视觉差异有点大,不建议使用。在本次应用MD语言进行实践过程中,个人认为其布局规范中的网格规范最值得借鉴IOS 设计稿中。

在第一个篇章,在首页模块“主功能区”提到了网格,在安卓端完全通用,因为安卓端设计稿尺寸360dp*640dp宽高都能被8整除;那网格能应用到ios设计当中吗,毕竟ios的设计稿尺寸是375pt×667pt?虽然不能绘制8pt的网格,但是还是可以用基线网格辅助,我们也可以设置组件和间距尽可能是8pt的倍数,其次是4pt的倍数。既然通栏组件宽度定死了是375pt,但我们组件的高度完全可以设置成8pt倍数,另外小组件宽高都可以设计成采用8pt或4pt的倍数。还有,用基线网格对齐组件和文字完全适用(如下首图)。另外补充一点,基线网格可以用sketch的“视图>画布>布局设置”来绘制(如下第二张图)。

x

这里对比下ios12最新组件,发现间距也以4的倍数为主要间距,但是还有其他间距。与MD语言对比,组件的尺寸和间距规则性并不强,下面看下截图分析。先看下ios系统模态对话框,我们测量边界以行高为基准,咋一看,发现除了两边的边距16pt还有下面操作按钮44pt是4pt的倍数(绿色标注),其他的间距好像并没有什么规律。

x

换个测量方式,如下左图所示,从英文字母基线的位置对齐,就有些规律了,但标题和正文内容字母基线的距离是21pt(下面左图橙色标注),可能是官方文件小失误。下面右图所示,另外一个带有搜索功能的对话框,这里标题和内容正文字母基线的距离是20pt(下面右图橙色标注),但是搜索框上下间距还是有点让人不解。

x

再来看下ios系统自带的分享弹窗,除了橙色标出来的是缺乏规律的组件尺寸和间距数值,其他的模块和组件的尺寸以及所用到的间距都是4的倍数。

x

以上分析了ios的组件尺寸和间距。相对来说,MD语言对于设计细节的精细度更高,哪怕是以ios设计稿来适配安卓,也建议自定义组件宽高用MD语言里面规定以8pt倍数为最佳选择,小组件允许用4pt;同时间距也建议以8pt的倍数为主要选择,小组件之间间距以4的倍数设置,上下间距的处理可以用基线网格辅助。当然,ios一些能直接应用app当中组件尺寸,我们不需要改,如44pt的导航栏,49pt底部标签栏等少数组件。另外,关于中文和英文如何对齐基线网格,在前面的文字规范已做说明。

结语

最后,发表一下个人对于设计理论、设计语言等各种设计规则的小小看法。我的观点是,对于经典的理论(不仅限于UI,指设计相关领域)应该先吸收掌握,在深刻理解规则的基础上再根据具体情景打破规则。所以对于UI设计师,不管MD语言、ios大留白、圆角卡片风格,我们都可以研究,但要结合app具体使用场景应用适当变通。

那么“具体情景”指的到底是什么情景呢?

个人总结,在界面设计中,打破规则的场景可以概括为两种情况;一是,以审美衡量,按照设计规则来做却不美的时候。遵循设计规则让我们设计有迹可循,我们可以用来参照,但美不美不是因为它的比例是黄金比还是白银比,最终要用我们的审美去衡量设计,如果遵循规则不美,这时候可以适当打破规则。比如在第一个章节首页第4个模块“直播课堂”里表内容的“小三角”的尺寸设置就是这种情况。另外首页的轮播点尺寸也是这么考虑,采用5dp大小(细节见附件源文件)。至于审美怎么培养那是一个大课题,其中重要方式就是看大量作品,至于看什么作品、怎么看作品才能有效吸收,由于实力不允许,不在本次讨论范围。二是,以实用性为衡量,按照规则满足不了实用性需求的时候。比如在第一个章节首页的首焦比例设置,不采用MD建议的比例,考虑到业务;再比如对于年纪大的人群开发app,字号会设计的比平时更大,这样体验更好。

文章到结尾了,感谢有耐心看到这里,本次文章说的是对网易云课堂V6.9.3安卓端进行MD语言重设计为切入口,对MD设计语言进行了一次探索,如果阅读过程有疑问,欢迎在评论区提出来一起讨论。另外说明,附件里有本次改版设计的源文件、设计规范、文字样式以及图标盒子,作为文章的补充内容,一些设计细节文章表述不清晰的地方,可以查阅对照。附件里还有Material design 2016的组件和2018版文字样式,文字样式是最新的,但是组件里面的有些细节如文字色值、圆角等细节已经在最新的MD官方设计指南里更新了。最后想说, 我对写文章是既不擅长也不喜欢的,但是这次我是花了300%的努力才出锅的,觉得文章不错,给点个赞呗。

参考:

https://www.material.io/

https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

圆角矩形背后的含义|深度解析

原文链接: https://www.ui.cn/detail/497148.html

图形是产品设计中被讨论的最多的元素之一。视觉设计师使用不同形状的图形来表达事物的多样性;交互设计师选择不同形状的图形解决用户在某场景下的诉求问题。其中争议最大,且被更多互联网设计师使用的图形,是圆角矩形,而当中的讨论点是:同样的图形,圆角处理与直角处理所传递的信息有什么不同?为什么圆角成了趋势?

要讨论这个问题,需先理清圆角矩形被广泛传播,且被人所注意开始。许多人认为图形外框的多样化趋势是由 CSS 技术的革新开始,但正确的时间点,应该是在 iPhone 4 被发布的那一刻。

当中的差异是:前者是通过技术参数来改变形状内容以引起用户注意;后者是通过传播真实产品塑造用户对于图形外观的全新认知。认知的转变,需作用于习惯与行为,而当中的核心手段,就是设计。(参考滴滴类产品改变人的出行方式)

用户对于一款产品的认知,主要依据产品所能解决的实际问题以及外在形式。而设计师需要关注的点会更多,包括产品架构,流程,技术等内容。同时还需要站在用户视角观测产品是否易于使用,我们通常将其称为「用户心理模型」。类比于用户只需了解手表是否正常走动,能否准点报时;设计师则需要理解手表设计框架,结构形式等详细内容。其中最重要的,还是一名设计师对内容的全局认知。

回到图形外观的话题上,同样的道理是,人们对于产品设计中的图形使用已经逐渐理想化,好比图形外观的形式如何已经不重要,重要的是图形所传递的信息本身。这样的认知稍显片面,对于设计师而言,图形以圆角形式呈现的背后逻辑,比表面上它所表达的信息更为重要。理解这一点之后,设计师再使用圆角矩形传递信息,理解上会更显深刻。

所以我后面会围绕下面这几个问题,来说明圆角矩形的意义:

  1. 为什么 iPhone 4 的发布是圆角矩形成为设计趋势的转折点?
  2. 圆角矩形传递的信息有什么不同之处?
  3. 头像与按钮之所以越来越多使用圆角?

圆角矩形为何成为趋势

虽然在 iPhone 4 发布时,大多数的软件图标都还是拟物风,但它们的图形外框大多是以圆角矩形的方式来处理。在 iOS 系统里,这种圆角矩形的载体已经成了其系统统一承载内容的形式。

x

也许有人会问为什么 Apple 选择了这样的呈现方式,而不跟 Android 一样,为了体现内容的丰富性,让图标外框多样化呢?

原因有两个:其一是乔布斯认为所有物件都有圆角,而相比圆形与椭圆,圆角矩形反而是生活中更为常见的现象。

Andy Hertzfeld 在 Round Rects Are Everywhere 中讲了关于圆角矩形诞生的故事。

Apple 的天才程序员 Bill Atkinson 创立了一种能够快速绘制圆形与椭圆的方法,乔布斯认为圆形与椭圆都不错,但是圆角矩形会更好。而 Bill Atkinson 并不这么认为,他觉得圆角矩形更难绘制,且人们也不需要圆角矩形。于是,乔布斯回应道:“到处都是带有圆角的矩形!“ 他指着房间里的各种物件,几乎所有地方都可以看到圆角矩形。他甚至说服 Bill 和他一起绕着街区走一圈,指出他能找到的每个带有圆角的矩形。当他们看到带有圆角的禁止停车的标示时,Bill 终于被乔布斯说服,第二天就拿出了绘制圆角矩形的方案。

之后,他们将其命名为「RoundRects」。在接下来的几个月里,Roundrects 逐渐进入用户界面的各个部分,并很快变得不可或缺。

x

尤其是在 13 年,iOS 7 对圆角的更新。它已经与我们平时认为的圆角矩形不同,这个圆角的优化过程非常复杂,当中涉及的数学算法如果不是专业的研究学者,可能无法理解其差异。

简单说就是:Apple 采用的圆角曲率所生成的图形,是更圆滑,无明显切角的。这样的圆角矩形在过渡上更平滑,且在视觉上的体验也更融洽。

其二是,为了打造沉浸式体验,乔布斯认为应该让 iPhone 的各个元素形式统一化。

与上述圆角图标相似的是 iPhone 机身。

x

iPhone 机身所呈现的圆角在制作工艺上,比软件图标的圆角更为复杂。而其内外一致的表现形式就是为了打造沉浸式体验,形成产品的品牌认知。而 iPhone X 的面世,就是为了将这一概念彻底落实。

x

前面提到,用户与设计师对于一款产品的认知是不同的。用户认识一款产品,首先关注的是外观表现,其次才是被承载的内容。所以当用户对 iPhone 以及其软件图标的展示形式已经形成认知,那么 iPhone X 的全面屏也就是很自然的一种结果。

机身形态与软件形式的自然结合,能够让用户更好的接受产品的外在形式,且其全面屏的设计也能更好地被用户认可。甚至被很多人吐槽的 iPhone X 齐刘海也是依据这样的圆角形式来设计的,目的就是为了营造统一的产品形态。

以至于其他一些产品在机身上的模仿,导致让人误以为类似的工业特性所产生的第一直觉都是「这是一款 iPhone」,仔细一看才知道,噢,原来是…

当一款真实的产品被人所接受,以普遍使用在生活场景中,其中逐渐营造出用户对圆角矩形的惯性认知,以至于它的可接受度也逐渐提高。

这也是我在开篇提到说「iPhone 4 的发布奠定了圆角矩形成为设计流行趋势的基调」的原因。

到这为止还只是背景,下面我们再深入聊聊特性。

圆角矩形所传递的信息特性

上节讲述了圆角矩形兴起的背景,当然这只是一部分,圆角矩形成为流行趋势,不能说完全是因为 Apple。还有一点是,它自身本就具备的优势。

上面提到乔布斯说服比尔,要有圆角矩形,因为生活中到处都是圆角矩形。但是这里有一个问题没有解决,即「为什么生活中到处都是圆角矩形」呢?

玩 3D 工具的人应该知道,在 C4D 等软件里,想要对一件物体创建圆角通常是选择「倒角」,再控制「段数」,之后通过「平滑」选项,将角度变得更为圆滑(当然还有其它方式)。目的是在渲染的时候不至于让物体看起来太尖锐,色泽也更通透。

x

在生活中,物件棱角如果过于锋利,则显得不够安全;工业角度,圆角/倒角可以让物件更好组装。相比棱角过于尖锐以至于让人觉得冰冷,圆角的设计反而让人更能感受到温度。所以对于推崇自然至上的乔布斯,在选择元素时,也就会希望能贴近生活吧。

从视觉,触感,便捷等因素能了解到真实物件的圆角优势,但优势是否适用于图形元素呢?

这里有个相通点,即虚拟图形依附于视觉而存在。人眼在接收图形信息时,对圆角矩形的认知会优于直角矩形。因为人眼结构中辨识力最强的部位,会优先识别图形的视觉中心。而圆角与直角矩形的区别就在于内容速度的识别差异。

x

之所以存在这样的差异,主要是因为图形存在视觉引导的作用。圆角因为其平滑的四边,将用户的视线过渡到图形中心,而直角矩形因为尖锐的特性,导致人眼在图形识别上容易发散。因此,在图形元素的选择上,为了让用户聚焦,圆角则获得了设计师的青睐。

所以之后在其它设计系统与设备上,更多圆角类图形也被投入使用。尤其是在各类 App 与网页设计中,圆角矩形更是被广泛应用于头像、按钮等元素上。

头像与按钮的圆角含义

随着互联网产品的普及,人们对于产品界面的审美意识与体验意识逐渐提高,界面的视觉呈现也成了互联网公司所重视的对象。头像作为产品界面中用于身份信息识别的主要元素,一直是用户以及设计师最为关注的内容之一。

因此,头像外框形状的选择则要尤其谨慎。当中最为常见的主要就是两类:圆形、圆角矩形。所以在进行选择时,设计师除了针对于两类图形依附于界面本身的视觉效果外,还需整体考量图形与界面元素的融合程度进行综合分析。至于直角矩形,目前很少会见到其用于头像的设计上。

x

以圆形的表现形式而言,其周围没有任何节点与棱角,给人以灵动、均衡、平滑、优美的感受,通常会在带有设计感或内容元素较为丰富的产品上出现,如 ins、微博、知乎等。相比圆形而言,棱角尖锐的直角矩形给以人沉着、冷静、拘谨、冰冷的感受,所以很少产品会将其作为展示型头像开放给用户使用。而圆角矩形正好中和了这两者的气质,也成了很多产品选其作为头像的原因。通常这类头像会出现在设计较为简约的界面上,如微信首页的用户头像。

无论是圆形头像,还是圆角矩形头像,其最终目的无非是身份识别以及彰显个性。上节聊过,圆角在识别上会引导用户倾向于图形的视觉中心,而头像作为辨识身份的信息,并不需要仔细审视,只需要快速识别即可。所以只有在点击用户头像时,才会以矩形形式完整呈现。

这里有一个点是,当圆角矩形以头像形式出现在界面中时,通常是以小图的方式呈现。因此,当小图集中于元素复杂的界面中时,圆角矩形牺牲了构图结构,省略了四边内容背景反而成为了优势,信息与细节明显少于直角矩形,以至于在界面上帮助用户更快识别头像内容,判断图形有用信息。

x

所以在头像的形状选择上,圆角矩形的优势会明显高于其他图形。而圆形与圆角矩形的差异就是上述提到的,要根据界面元素的丰富性、设计感等因素进行抉择。

但是这里还有个思考点,就留个各位自己思考了。如果仔细观察各类产品,去寻找圆形头像与圆角矩形头像的区别,那么在头像尺寸上,也可以看到一些秘密。

原本我还想再以按钮为例解读圆角直角的差异,不过仔细回顾内容之后自认为已经非常详细,相信各位自己也能去做好分析,所以就不增长篇幅了。有兴趣的同学,可以自己做一波分析。

x

小结

简单总结一下上面的内容:

  • 第一节讲解了圆角矩形在设计上成为流行趋势的背景;
  • 第二节告诉各位圆角矩形在信息传递上的优势;
  • 第三节以头像为例将前面的知识点落地分析。

最后只是想说,圆角本身只是一个很小的元素,就像其他设计理论、方法一样,我们可以忽视它背后的理论,但作为设计师,对于这些细节的追求应该是持续且专注的。

谢谢阅读:)

微信公众号:呆呆U理

如何快速有效的设计字体LOGO

原文链接: https://www.ui.cn/detail/501946.html


相信很多经验不足的设计童鞋都有这种情况:拿到一个项目需求,不知首先从哪里入手,导致可能就盲目去做图,做一步想一步,没有一套比较保险的方法。导致最后出图被需求方各种挑战,各种回路改图。回想起自己刚初步接触做文案logo设计无措的样子,各种修改方案,磨到最后自己都要怀疑人生!!

同时现在市面上设计同质化越来越严重,设计师需要不断做出个性化的设计来满足市场需求,而运营视觉设计师的主要发力点之一就是字体设计,如何能快捷做出个性的字体是我一直研究的课题,这里我所说的个性是符合项目的特有气质。

下面我来跟大家分享一下前段时间我做的一个文案logo设计项目的过程。希望能帮助到小伙们,同样也希望小伙们多多提建议,互相学习。

流程如下:

1.项目背景

2.初步沟通

3.找参考

4.设计方向

5.打草稿

6.再次沟通

7.矢量图绘制

8.丰富细节

9.颜色的推导

10.延展

下面我主要分以下几点进行:项目背景

首先要了解这是一个怎么样的项目?

拿到一个项目需求,当然不要就盲目下手去做,

首先项目具体内容是:

设计一个两周更新一次的活动栏目logo;

主标题:爆更更更更更;

期数:第X爆;

副标题:XX月XX部作品连更3天

对!这就是需求方提供的信息点,简单粗暴;但是,你单看这几字就能明白这是什么鬼东西了?ON!!!初步沟通

不明白就问呐!和需求方进行初步沟通,明确需求方具体的诉求:要有“炸”的感觉,现代时尚的感觉,并且大气又实用。

除此之外,还与需求方沟通了之前版本的问题,总结如下:

1,文案信息没有统一性;

2,一个栏目的logo没有一致性;

3,同个栏目用多个logo设计风格各异;

4,红色版文字的设计感“炸”的过头,蓝色版整体的设计过于平静,素,没有冲击力即动感。

x

结合现有问题与需求方给的大致方向,总结关键词如下:

x

找参考 

针对发现的几个问题,与需求方对设计方向大概要点的诉求,街头风涂鸦风格的字体能满足“炸”和“现代时尚”这两点设计要求;而爆炸性的物体如炸弹,原子爆炸,子弹飞…等都会给人一种很燃和炸的感觉。根据推导得出要借鉴涂鸦风格,场景有炸弹或者原子爆炸或者子弹飞。然后去各大设计网站寻找这几类图来作为参考。几大设计网站推荐花瓣,站酷,追风等,豆瓣中的电影电视剧海报也是不错的灵感找寻地。

x

设计方向

最后提炼出以下三个创意关键词:

x

打草稿

为避免返槁,拿着参考和草稿再次和需求方沟通确认设计方向,看双方是否呢还有建议或者想法,若果双方都没意见才可进行做下一步的设计。

x

矢量图绘制:

当与需求方确认没有问题后,就可以根据草稿用钢笔工具进行初步的尺量图绘制,先用简单的黑白灰体现logo的明度对比。

x

丰富细节 

字体设计笔画与笔画相接的地方处理成被切开的效果,模拟被炸出裂痕的效果,可以再一次点题;

“爆更”整体采用街头风涂鸦字体设计风格,笔画的始与末,都是处理成方角形式,主要体现现代青春活力追求潮流的感觉。

x

颜色的推导

暖色调:用褐色,橙黄,橘红,浅黄为为主,给人以温暖、热烈的感觉,紧迫、炸裂的感觉;

x

确认设计稿 

与需求方再次沟通设计稿,从配色上,文字细节上都需要核对;通过再次的沟通后,部分认为对四个“更”字散落各地的排法有争议,散的有些过,弱化的也太过;居于这两点,把四“更”排在一起,从大“更”的一脚延伸出去,这样就解决问题了问题。

后面做 banner,开屏活动时这些圆可以根据画面来放大。OK完美出输。

x

延展 

颜色延展:由于每期更新的作品内容调性会有所不同,所以需要针对每次更新的作品调性来进行配色,为了后期更好的延展,所以前期需要多做出几种配色方便后期的调用:

x

OK!到这里基本上可以完美出输了?no!这里还是再次和需求方确认完整稿,确保所有的信息无误了,才可打包发给你的需求方。

x

描边矢量风格:这个延展的风格方向主要适用在矢量图元素据图的画面,画面用色简单,用几个纯色柔和成的画面。效果图如下:

x

材质感强风格:这个延展的风格方向以重材质为主,主要适用主推以格斗,枪战, 热血为主题的漫画集。效果图如下:

x

以下是我近来的一些作品小集,分享给小伙伴们,希望能给新的小伙伴们一点点启发。

x

作者:英子