UI 设计

通过游戏练习钢笔工具: https://bezier.method.ac/
  • https://www.flaticon.com/
像Dribbble这样的设计网站上有一些看似精美的网站设计, 在实际使用中, 很难将它们作为实际网站开发的参考.
其根本原因在于大部分设计师对"响应式设计", "原子设计", "可访问性", 以及"设计系统"不甚了解.
这些设计作品的典型特征是, 它们的美感并非来自于扎实的功底:
  • 依赖精致的图片增强整体美感, 以至于图片的占用面积总是太大.
  • 基于固定尺寸的设计太多, 一经缩放就会崩坏.
    与其说它是网页设计, 不如说是明信片或者海报之类的平面设计.
  • 浮动在背景上的文字是基于背景设计的, 一旦更换背景图片就会连文字对比度都保证不了.
  • 稿件经常使用装饰性的页面外框来作弊,
    这些页面外框狡猾地增强了页面的美观性, 而实际的网页根本不可能这样显示.
  • 字体过度强调装饰性, 导致大段文本的可读性很低.
当然, Dribbble上也有一些真正的设计高手,
但这些高手的作品并不能在这种深度依赖于视觉吸引力的网站投票机制中胜出.
即使对于有经验的网页设计师, 从众多的设计方案中甄别出有用的设计和无用的设计也需要花费不少时间,
所以更好的做法是停止使用这类网站, 专注于那些已经被做成网站的设计方案.
注意, 下方的数字范围是魔数, 可根据实际的用户界面进行增减.
  • 2~5: Radio, 用户只需要点击一次就可以完成选择.
  • 6~10: Dropdown
  • >10: 列表可滚动的Dropdown, 必要时还可以加上搜索功能
是: Dropdown, 由于选项是可推理的, 所以用户不需要阅读每一个选项.
典型例子是"大/中/小", 百分比选择等.
否: Radio
是: Radio
否: Dropdown
是: Radio
否: Dropdown
是: Radio
否: Dropdown或Radio
Checkbox带有状态语义.
Switch同时带有动作语义和状态语义.
是: Switch, 在切换后立即生效.
否: Checkbox, 通常需要再点一个确认按钮.
是: Checkbox.
否: Switch或Checkbox.
是: Checkbox, Checkbox有一个半确定状态, 可用于子节点只有部分选中的情况.
否: Switch或Checkbox.
UI设计是与软件的功能特性有关的.
UI应该在软件的功能特性制订完毕后才开始设计.
设计师被迫盲人摸象时, 他们实际上是在设计一个"试图包罗万象"的空壳.
面对这样的空壳, 我们甚至无法决定导航条应该放在顶部, 还是做成侧边栏,
最后可能会可悲地发现其实并不需要导航条.
有时您会情不自禁地认为一项功能应该被包含在软件里, 于是提前做好了相关的设计.
结果最终您来不及开发那项功能, 您给自己制造了痛苦, 因为您用设计做出了与功能有关的额外承诺.
永远只为当前版本的功能进行设计.
字体, 图标, 阴影, 颜色...这些细节完全可以放在最后再考虑, 这些东西在设计初期完全不重要.
在设计初期, 设计师只是画框图, 决定各种元素如何布局而已, 太早考虑不该考虑的东西, 只是浪费时间.
在软件实施之前, UI设计不需要到达每一个角落.
想象那些抽象的事物并不能帮助我们做出好的设计, 好的设计应该是脚踏实地的,
配合软件的实现细节做出设计, 而不是让软件迁就先前已经作出的设计.
我们应该先做简单的设计, 然后配合软件实施让设计变得富有细节.
设计应该保持一致性.
字体, 颜色, 边距, 行高, 阴影...这些次要的设计元素有数百万种选择和搭配, 您会因决策而陷入疯狂.
有限的选择实际上帮助您更好地作出设计决策, 因此需要建立和维护您的设计系统.
这套设计系统会被您反复使用, 从而避免把时间用在做次要设计的决定上.
选定一组配色后, 您就不会再关心具体的颜色值, 而只是考虑应该如何运用这组配色里的各种颜色.
可以从各种配色网站获得标准, 专业的配色方案.
让像素大小变得有限的好方法是按比例决定大小.
只需要决定最小的像素大小(例如12px), 接下来只需按特定比例放大此值, 即可运用于设计.
UI是否有设计感并不取决于其具体的样式和造型, 而取决于设计能否显示出元素的等级.
在UI设计中, 并不是所有视觉元素都有相同的地位.
当UI上的所有元素都在争夺用户的注意力时, UI是嘈杂且混乱的.
好的设计会强调元素的等级性, 让用户注意到哪些元素是重要的元素, 哪些元素是次要的元素, 哪些元素无关紧要.
强调等级, 并不意味着就得改变布局, 有时可能只需要给不同等级的元素设置与其地位相符的背景颜色就够了.
用字体大小控制元素等级会导致主要内容太大, 次要内容又太小.
应该用字重和颜色控制文字元素的等级.
粗: 重要.
细: 次要.
深色: 重要.
浅色: 次要.
浅色文字用在浅色背景上表示次要很好, 但在深色背景上不行, 这是因为在深色背景上会增强对比度.
最好的做法是在深色背景上选择一个比该深色背景浅一点的颜色(通过hsl属性, 调整饱和度和亮度找到合适的颜色).
有时让一个元素突出最好的办法不是让该元素变得引人注目, 而是让其他元素变得不引人注目.
用标签(label)展示数据的缺点在于很容易让内容的等级变得相同.
坏的设计(使用标签):
Name: Average Joe
Job Title: CEO
Email: joe@example.com
好的设计(不使用标签, 通过设计强调等级):
Average Joe
CEO
joe@example.com
有时标签可以与值合并, 然后我们通过设计强调值的部分, 效果要好得多.
例子:
库存: 12
有 12 件在售
卧室: 3
有 3 间卧室
如果标签一定要保留下来(无法通过其他方式传达值的含义), 则需要强调值, 弱化标签.
这是因为标签实际上是为值服务的, 值才是重要的部分.
此外, 尽可能去掉标签的冒号.
只有在列出一大堆数据, 信息密集的情况下(例如产品的技术参数页面), 才应该强调标签.
这是因为用户的目的就是在这一大堆数据里找到它需要的那个标签, 因此强调标签很有意义.
实心面积越大的元素, 其强调效果越强.
当我们使用字体时需要注意字重.
当我们使用图标时需要注意图标与周围内容的强调关系,
如果图标的实心面积很大, 则考虑将图标的颜色变浅(通过降低hsl颜色的亮度).
我们也可以反过来, 通过增加元素的实心面积(比如边框粗细)来强调它.
这里的语义指的是通过样式表达的语义.
例如我们用红色按钮表示有破坏性的动作, 绿色按钮表示完成动作.
当语义影响到层次结构的时候, 层次结构将优先于语义.
拿按钮举例, 凸显按钮的主次关系要比凸显按钮的语义更重要, 因此按钮应该是这样的:
  1. 1.
    主要按钮有深色背景
  2. 2.
    次要按钮有浅色背景
  3. 3.
    不重要的按钮没有背景色
    在这种情况下, 给按钮增加绿色和红色反而会破坏这种层次表达.
举例来说, h1的字体就应该很大吗? 不尽然, h1只表示这是第一级的标题而已,
在一些情况下, 我们甚至会把h1直接隐藏掉(比如仅仅为页面的可访问性而使用此标签).
空白增加了元素"呼吸"的空间, 舒缓了内容与内容之间的紧张气氛.
当然, 太多的空白也不行, 有多少空白取决于美感, 先添加空白, 再适度减少空白直到您满意为止.
有时候, 从单个元素的角度来看, 空白似乎太多, 但当我们将这个元素放到整个界面里时, 却会发现它刚刚好.
当我们纯粹为了展示数据, 或是界面本身是一个拥挤的仪表盘(dashboard)时, 空白较少的紧凑页面可能会更好.
元素的空白应该有一致性, 因此我们需要将空白纳入我们的设计系统.
我们为不同的空白大小设定标准值, 把这些标准值套用到界面的每一个元素里.
通常来说, 这类设计系统的值不会是线性增长的, 以下是一个以16px为基准的标准值:
  • 4px (25%)
  • 8px (50%)
  • 12px (75%)
  • 16px (100%)
  • 24px (150%)
  • 32px (200%)
  • 48px (300%)
  • 64px (400%)
  • 96px (600%)
  • 128px (800%)
  • 192px (1200%)
  • 256px (1600%)
  • 384px (2400%)
  • 512px (3200%)
  • 640px (4000%)
  • 768px (4800%)
仅仅因为您有空间, 不代表您就应该使用它, 因此不要为了填满整个屏幕而将宽度设为100%.
例如, 从400px的宽度开始设计, 然后再将设计扩张到大屏幕设备上, 比反过来做要容易得多.
有时大屏幕上的单列内容会看起来很不自然, 合适的做法是将其中的一类元素提取到单独的一列里.
这种设计的最大问题在于在不同的屏幕上, 不同的窗口大小上, 其内容会按比例缩放.
这使得一些元素被不必要地放大, 一些本来能够完整显示的内容现在必须向下滚动页面才能显示, 这是十分荒谬的.
用em等相对单位本身不是错误, 但是在小屏幕上我们往往看到相对单位引发的问题.
例如标题是正文的2.5倍字号, 在大屏幕上一点问题也没有, 非常好.
但是在小屏幕上, 由于画面宽度不足, 标题可能会因此分成好几行显示, 导致观感特别糟糕.
因此, 在使用相对单位时, 要留心小屏幕的观看效果, 适当为其设置例外的尺寸.
拿按钮举例, 按钮的填充尺寸如果是相对按钮的字体大小设置的.
那么当这个按钮在任何大小时, 填充尺寸的比例都会是一致的.
这的确符合我们的预期, 但这是最好的设计吗? 答案是否定的.
在按钮变小时, 我们应该把填充的尺寸也缩小, 这样我们就能突出按钮上的文字部分, 让空间得到更好的利用.
边距应该表达出元素之间的关联性, 如果一个元素和其他元素的边距都是一样的,
那么用户将不知道这个元素和哪个元素有关.
如果边距与行高一致, 那么边距就会变得模棱两可, 我们无法分清这是下一行, 还是与其割裂的下一部分.
  • 黑体: 用于与宋体形成对比.
  • 宋体: 用于与黑体形成对比.
  • 楷体/仿宋: 用于替代英文的斜体.
  • 衬线体: 相当于中文宋体.
  • 非衬线体: 相当于中文黑体.
  • 等宽非衬线体: 用于代码.
  • 斜体: 专用于斜体的字体(italic type), 与一般字体通过算法得出的伪斜体(oblique type)相区别.
在没有系统的情况下使用字体是一个坏主意, 很多设计团队因此用尽了10px到24px里的每一个像素大小.
这带来两个缺陷:
  • 界面上的字体缺乏一致性
  • 独立地调整和选择字体大小很浪费时间
字号的设计系统通常不是线性增长的, 人们可能会对16px的默认字号使用模块化比例进行缩放:
  • 4:5 major third
  • 2:3 perfect fifth
  • 1:1.618 golden ratio
    但这种做法不好, 因为:
  • 模块化比例缩放出的字号带有小数位, 而屏幕无法显示小数位, 在不同浏览器里可能会有不同的舍入方式.
    如果坚持使用模块化比例, 则应该手动舍去小数位, 以确保字号是整数.
  • 模块化比例缩放出来的尺寸不够多, 举例来说, 用3:4缩放出来的是12px, 16px, 21px, 28px,
    而事实上我们需要比这更多的字号.
以下是一个适合大多数项目的字号系统:
  • 12px
  • 14px
  • 16px
  • 18px
  • 20px
  • 24px
  • 30px
  • 36px
  • 48px
  • 60px
  • 72px
em单位是相对于"当前字号"的相对单位, 应该使用rem或px作为单位.
系统默认的字体可能不是最好的选择, 但系统默认的字体是用户最熟悉的字体.
少于5个字重的字体在我们表示层次结果时可能会变得难以操作.
英文字体根据间距和小写字母的高度(在字体术语里被称为x-height)可分为两种类型, 重要的是不要搞错其用处:
  • 小写字母较矮, 间距较窄的字体(适用于标题)
  • 小写字母较高, 间距较宽的字体(适用于正文)
当文本是英文时, 请坚持使用45~75个字符的英文字符作为行宽.
决定行高很难, 行高太小会导致阅读时串行, 搞不清自己该读哪一行.
窄内容的行高通常是字号的1.5倍.
宽内容的行高可以是字号的2倍(宽内容因为更宽, 在小行高的情况下更容易串行).
外观较小的字体应该适度增加行高(例如1.75倍).
外观较大的字体可以适度减小行高(例如1倍).
当一行文本里包含多种字体时, 应该使用基线(baseline)作垂直对齐, 而不是居中(center).
这是为了让文本能够真正对齐, 而不是仅在轮廓上对齐.
align-items: baseline;
当我们在正文中突出超链接时, 链接通常有颜色或下划线.
但在其他场合就不必这么做了, 拿Youtube举例, 已经基本上看不到那种"超链接"样式的链接了.
比较长的英文文本通常使用左对齐.
为了模仿印刷品的文本, 也可能会使用两端对齐, 与左对齐的区别在于两端对齐的文本右侧不会有空白.
英文文本的两端对齐相比中文文本要更罕见, 因为很容易造成过大的单词间距,
为了解决这个问题通常会用连字符给单词做硬中断.
大多数情况下居中对齐都不会很美观, 但偶尔也会有例外.
比如文本比较窄, 只用两行就可以容纳得下, 而且文本的左右侧还有其他同类型的文本,
出于美观考虑, 则居中会比左对齐更好.
如果数字在一个表格里, 则数字应该右对齐, 方便上下行的数字对比(这些数字还应该填充小数位使得小数点位置一致).
如果(英文)文本出现了比较长的单词, 则这个单词很可能会被挤进下一行.
而在使用两端对齐时会因此出现尴尬的空白.
为了避免破坏每行空白间距的一致性, 应该在两侧对齐时使用连字符.
hyphens: auto;
目前hyphens属性的浏览器支持非常差, 因此不应该在Web上对英文文本实施两端对齐.
尽管常常被人忘记, 但文本的字母间距是可设置的.
通常来说, 字母间距是由字体设计师决定的, 但在一些情况下我们应该修改字母间距.
letter-spacing: -0.05em;
letter-spacing: 0;
letter-spacing: 0.05em;
出于让标题更紧凑的目的, 可以适当减少字母间距.
全大写字母的文本可能可读性不佳, 这通常是因为字母间距太小了, 所以可以适当增加字母间距.
提倡使用HSL替代RGB和16进制颜色, 这是因为HSL的三个属性能够以人眼直观的方式调整颜色的色相, 饱和度, 亮度.
HSB是一种在设计软件中常见的颜色表示方式, HSB与HSL有多处不同:
  • 0%亮度(brightness)的HSB总是为黑色.
  • 只有当饱和度为0%时, HSB的100%亮度(brightness)才是白色(HSL的100%亮度总是白色).
  • 当饱和度为100%时, HSB的亮度(brightness)在100%的时候只相当于HSL的亮度(lightness)的50%.
主色用来明确整个产品的颜色基调.
主色甚至可以产生品牌效应, 例如:
  • Twitter, 蓝色.
  • Youtube, 红色
通常需要5~10种基于主色调制出的渐变色.
第二种颜色.
作为主要颜色的补充出现, 经常会与主要颜色冲突, 应该谨慎使用.
第三种颜色, 比较罕见.
文本, 背景, 面板, 表单控件...等元素使用的颜色.
通常我们需要各种明暗度的中性色, 约5~10种.
最常见的中性色板是从白色到黑色之间生成的:
  • 白色
  • 白色与灰色之间的过渡色
  • 灰色
  • 灰色与黑色之间的过渡色
  • 黑色
因为纯黑色不够自然, 所以经常会用深灰色来替代黑色.
强调色用于与主色区别开来, 突出某些内容, 是带有某种功能性的颜色.
通常会使用很多种不同的强调色, 用来表示警告(黄色), 破坏性操作(红色), 积极信号(绿色).
每种强调色里都可能衍生出5~10种渐变色.
常见命名:
  • link 链接颜色, 通常是浅蓝色
  • success 通常是绿色
  • warning 通常是黄色
  • error/danger 通常是红色
  • info 通常是蓝色
60是原始颜色, 数值越小颜色越浅.
  • 10
  • 20
  • 30
  • 40
  • 50
  • 60
  • 70
  • 80
  • 90
  • 100
使用者:
  • IBM Design.
500是原始颜色, 数值越小颜色越浅.
  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
使用者:
  • Tailwind
  • Material Design
以100为基准表示原始颜色进行偏移.
比原始颜色浅的渐变色, 数值应该小于100.
比原始颜色深的渐变色, 数值应该大于100.
偏移"步长"是不固定的, 这比较适用于正在构建中的颜色系统.
  • {color}-base
  • {color}-lighten-{number}
  • {color}-darken-{number}
颜色系统的问题在于能够预定义的颜色是十分有限的, 并且很难对颜色系统这种牵一发而动全身的系统进行调整,
这导致了以下问题:
  • 颜色系统不满足实际需要, 需要扩充颜色的场合, 加入新的颜色会变得非常难.
    人们会被迫转入"仅追加"的方案, 最终导致颜色系统膨胀到无法管理.
    在这种情况下, 使用语义命名(primary, secondary)的颜色系统比使用颜色命名(red, green, blue)的颜色系统更脆弱.
由数学方法自动创建的渐变色很差, 大多数颜色系统的渐变色仍然是人工挑选和调整的.
现成的渐变色方案: https://www.gradientmagic.com/
  1. 1.
    挑选一种底色, 这没有很严格的标准.
    通常底色是一种可以用于按钮背景的良好颜色.
  2. 2.
    找出这个颜色最深的和最浅的渐变色.
    假设有一个文字提醒框, 需要这最深的渐变色作为标题的颜色, 最浅的渐变色作为背景色, 底色作为一般文本的颜色.
  3. 3.
    接着求出底色与最深渐变色的中间值和底色与最浅渐变色的中间值.
    重复2次, 您会获得9种颜色.
  1. 1.
    挑选出最深的灰色和最浅的灰色.
  2. 2.
    接着求出最深渐变色与最浅渐变色的中间值.
    重复3次, 您会获得9种颜色.
基于您的眼睛选择最好的颜色, 而不是基于教条化的科学和公式.
HSL的亮度会影响饱和度的视觉效果.
当我们提升亮度(>50%)或降低亮度(<50%)时, 颜色会快会失去饱和度, 因此需要适当提升饱和度.
如果饱和度已经提升到100%, 还是不够饱和该怎么办?
通过感知亮度的计算公式, 我们可以得出一张色相图:
sqrt(0.299*r^2 + 0.587*g^2 + 0.114*b^2) / 255
我们会发现黄色对人类的视觉来说天然拥有更高的感知亮度, 而蓝色天然拥有更低的感知亮度.
如何利用感知亮度调整颜色以控制饱和度?
当我们要让颜色变浅时, 对照感知亮度的色相图, 将色相朝最近的浅色旋转.
当我们要让颜色变深时, 对照感知亮度的色相图, 将色相朝最近的深色旋转.
通常色相旋转不应超过20~30度, 否则颜色会改变.
按照定义, 灰色的饱和度为0%.
但我们可以通过色温让灰色向更暖的颜色或更冷的颜色转变.
黄色更暖, 蓝色更冷.
因此当我们给灰色增加更多黄色, 就会变成更暖的中性色.
因此当我们给灰色增加更多蓝色, 就会变成更冷的中性色.
对于HSL颜色来说, 除了L, 都要改变.
为了确保设计的可访问性, Web Content Accessibility Guidelines(WCAG)建议:
  • 18px以下的文本对比度至少为4.5:1
  • 较大的文本对比度至少为3:1
  • 要达到更强的可访问性, 对比度需达到7:1以上
对比度的计算公式如下(https://www.w3.org/TR/WCAG20/#contrast-ratiodef):
(L1+0.05) / (L2+0.05)
L1 为较浅颜色的相对亮度
L2 为较深颜色的相对亮度
相对亮度的定义(https://www.w3.org/TR/WCAG20/#relativeluminancedef)
出于方便, 应使用计算器进行对比度的计算: http://www.msfw.com/Services/ContrastRatioCalculator
由于我们需要用更深的颜色表示强调, 因此当我们的文本是白色, 而背景色是彩色时,
若我们遵守WCAG的建议, 则背景色几乎一定会是深色, 而我们可能并不想要这么强调这块元素.
为了解决这个问题, 我们会把背景色改成浅色, 把文本改成深色(通常是与彩色背景色有关的某种深色),
这会比反过来容易得多.
彩色背景上使用彩色文本很困难, 通常也比较丑陋.
如果一定要达成最低的对比度, 则需要我们像处理感知亮度时那样将文本颜色向更亮的颜色旋转色相.
色盲无法分清一些颜色, 因此如果一些信息只通过颜色表示, 那么色盲用户将无法分辨.
对于无法通过增加图示, 描述文字来解决的情况,
我们应通过使用相同颜色的不同对比度来表示信息, 这对于色盲用户来说更容易分辨.
是什么让一个元素看起来是凸出于背景的?
是什么让一个元素看起来是凹陷于背景的?
答案是光线.
在设计时, 我们假定光线是从屏幕外的上方斜射入屏幕,
因此凸出的部分的上边缘会变亮, 下边缘会变暗;
凹陷的部分的上边缘会变暗, 下边缘会变亮.
用box-shadow来产生凸起效果:
/* 手动在内上边缘设置浅色阴影而不是覆盖半透明的白色, 因为白色会吞噬饱和度 */
box-shadow: inset 0 1px 0 hsl(224, 84%, 74%),
/* 在下边缘增加半透明的黑色阴影 */
            0 1px 3px hsla(0, 0%, 0%, .2);
用box-shadow来产生凹陷效果:
/* 在下边缘增加半透明的白色阴影 */
box-shadow: 0 -2px 0 hsla(0, 0%, 100%, .15);
/* 在上边缘增加半透明的黑色阴影 */
box-shadow: inset 0 2px 2px hsla(0, 0%, 0%, .1);
阴影的模糊半径越大, 元素离用户的距离就越近, 离背景就越远(像是漂浮着).
阴影的模糊半径越小, 元素离用户的距离就越远, 离背景就越近.
距离用户近的元素, 能吸引到更多的注意力.
因此对于模态对话框, 弹出的菜单, 正在拖放的元素等浮动着的元素, 应该设置较大的阴影模糊半径.
请注意由于光线是从上方斜射入屏幕的, 因此阴影的方向应该是整体向下.
建立一套阴影的设计系统也能节约设计时间, 通常只需要5种阴影.
首先定义最小和最大的阴影, 然后填充其中的过渡部分.
box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
box-shadow: 0 4px 6px hsla(0, 0%, 0%, .2);
box-shadow: 0 5px 15px hsla(0, 0%, 0%, .2);
box-shadow: 0 10px 24 hsla(0, 0%, 0%, .2);
box-shadow: 0 15px 35px hsla(0, 0%, 0%, .2);
一些网站会使用两重阴影来表现更好的阴影效果, 例如:
box-shadow: 0 4px 6px hsla(0, 0%, 0%, .7),
            0 5px 15px hsla(0, 0%, 0%, .1);
我们可以想象一个花盆, 光线从斜上方射入, 此外我们还要考虑环境光的存在.
较大阴影半径, 距离物体较远, 且较淡的阴影是在模拟花盆垂直和水平方向的投影.
较小阴影半径, 距离物体较近, 且较深的阴影是在模拟花盆垂直方向的投影.
阴影投射到的表面离物体越远, 就越大, 越淡(甚至看不到).
因此, 两重阴影总是更接近自然的阴影效果.
box-shadow: 0 1px 3px hsla(0, 0%, 0%, .12),
            0 1px 2px hsla(0, 0%, 0%, .24);
box-shadow: 0 3px 6px hsla(0, 0%, 0%, .15),
            0 2px 4px hsla(0, 0%, 0%, .12);
box-shadow: 0 10px 20px hsla(0, 0%, 0%, .15),
            0 3px 6px hsla(0, 0%, 0%, .10);
box-shadow: 0 15px 25px hsla(0, 0%, 0%, .15),
            0 5px 10px hsla(0, 0%, 0%, .5);
/* 因为距离表面太远已经无需使用两重阴影 */
box-shadow: 0 20px 40px hsla(0, 0%, 0%, .2);
扁平化设计通常没有阴影, 但仍然会用颜色表示深度.
比背景色浅的颜色看起来会更近, 比背景色深的颜色看起来会更远.
在扁平化设计里, 可以在元素下边缘使用阴影半径为0的阴影, 以辅助展示出深度.
重叠的意思是两个元素叠在一起, 但又有各自不重叠的部分,
这种差异表现出两者不同的深度, 轻易地展现出远近的不同.
如果设计涉及到插入照片, 则一定要使用精美的优质的照片.
设计需要整体性, 插入占位用的图片或随意拍摄出的照片都不行, 这永远行不通.
大多数问题出在图片, 而不是出在文字上.
因为无论你怎样修改文字的颜色, 都不可能在一张色彩丰富的图片上达到较高的对比度.
对于白色的文字, 一般的做法是在图片上覆盖一层黑色的半透明层, 把图片的亮度降低.
对于黑色的文字, 一般的做法是在图片上覆盖一层白色的半透明层, 把图片的亮度提高.
另一种做法是降低图片本身的对比度, 这意味着图片的明暗部分将变得不那么明显.
另一种做法是将图像向界面的主色靠拢(看起来像是降低了饱和度和对比度之后, 盖上了一层颜色).
这也可以用CSS的滤镜实现.
使用半径较大且没有偏移的文字阴影可以一定程度上提升文字的对比度.
矢量图的确可以无损放大, 但放大后的矢量图会明显缺乏其应有的细节, 导致观感变差.
对于图标而言, 可以选择不放大矢量图,
在图标下方添加一层比图标大的圆形有色背景, 以填充起图标的尺寸.
选择与图标颜色相近的背景色, 会让视觉效果更好.
和矢量图相反, 缩小屏幕截图会导致一定区域内的细节过多(主要是文字).
要么以较小的尺寸重新拍摄屏幕截图, 要么只展示原截图中的重要部分.
如果确实需要原样缩放出小的屏幕截图, 还有一种选择是把原图中的文字部分全部简化成颜色填充.
缩小图标到更小的尺寸, 例如128px至16px, 几乎一定会导致图标模糊.
正确的做法是在更小的尺寸重绘图标.
为了防止用户头像看起来不一致, 应该给用户头像加上边框.
有两种边框:
  • border边框, 使用半透明的颜色.
  • box-shadow边框, 使用inset, 0偏移, 1px半径的半透明颜色.
为了避免不必要的分心, 动画只应该在以下场合出现:
  • 安排新元素出现, 短时动画
  • 用户交互时, 超短时动画, 动画不应让人感到交互的响应速度变慢
  • 载入画面, 循环的长时动画, 以避免让用户感到无聊和降低跳出率
  • 引导用户, 常见于移动应用的界面切换, 以便用户知道当前视图与先前视图的关系
  • 加强反馈, 常见于支付页面, 点击按钮后以动画的形式提示用户交易完成.
  • linear(线性): 匀速, 适用于颜色和透明度变化, 不适合运动动画.
  • ease: CSS的默认值, 迅速开始, 迅速加速, 再逐渐减速, 比较通用.
  • ease-in: 缓慢开始, 逐渐加速, 适用于移出屏幕的运动动画.
  • ease-out: 迅速开始, 缓慢减速, 适用于移入屏幕的运动动画.
  • ease-in-out: 缓慢开始, 逐渐加速, 逐渐减速, 适用于在屏幕上开始和结束的动画.
弹簧物理动画模拟了弹簧的运动方式, 动画看起来更加自然.
参考: https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics/
衬线体(中文的宋体): 雅致.
圆角无衬线体(中文的圆体): 活泼.
无衬线体(中文的黑体): 中性.
蓝色: 安全且熟悉的颜色, 没有人会抱怨.
金色: 昂贵, 老练, 有品味.
粉色: 乐趣, 不严肃.
直角: 严肃, 正式.
较小的圆角(接近于直角): 中性.
大圆角: 有趣.
不太个人化的语气: 更正式, 专业.
稍显随意的语气: 更友好.
设计系统不是从头开始构建的, 而是从经过检验的UI实践里整理出来的.
设计系统不为单一项目服务, 而是为一组相关的项目服务.
组件驱动开发和设计系统都无法绕过一个事实, 即设计需求是首先出现的,
设计需求催生出设计稿, 最后才产生组件和设计系统.
开发人员并不能凭空捏造出一种组件, 即使是简单如按钮也不行.
设计系统是对设计元素一致性的约定, 它承诺了UI属性的一致性.
设计系统很可能被实现为一种数值依赖, 以寻求只需修改一处即可修改所有样式的维护性.
但设计系统不是软件系统, 这种修改可能会意外地破坏高层组件的显示效果.
只有"视觉回归测试(visual regression tests, 也称为视觉测试)"能够发现这种破坏, 缩小问题范围.
一个组件会同时具备多种状态, 导致人工审查组件外观的效率非常低下, 必须依赖于自动化测试.
快照测试仅仅是测试组件输出的代码, 而不是测试浏览器的渲染结果.
打破快照测试可能非常容易, 最终让人厌烦.
端到端测试用于验证一系列的行为是否符合预期, 是最脆弱的测试.
组件应该使用更简单的测试, 以避免不必要的维护和编码成本.
拟物化设计的现代版本, 以类似浮雕的凸起和凹陷效果形成可交互的控件.
在大多数情况下是一种挺丑陋的风格, 非常考验设计师对颜色的选择.
以透明背景加上较粗的实线边框形成的按钮风格, 盛极一时.
幽灵按钮的问题在于, 实践中它往往会与大尺寸的背景图片配合使用,
这降低了按钮本身的可用性, 因为文字的对比度得不到保障.
幽灵按钮最适合与非幽灵按钮并排使用, 以形成主次对比来突出具有实心背景的按钮.
Skeleton是正在加载的内容的占位符, 和一般占位符及载入动画的不同在于Skeleton会在一定程度上模仿内容的轮廓.
Skeleton通常是带有渐变动画的.
空白占位符是最通用的占位符, 唯一需要知道的是图片的尺寸.
从图片中提取出主色, 然后将其作为图片的占位符.
一种提取主色的简单方法是将图片的尺寸缩小至1x1, 该方法适用于各种支持缩放的图片CDN.
该方法的缺点是仍然需要通过1个请求来获取1x1的图片, 更好的方式是将颜色或1x1图片以DataURI内嵌在HTML里.
这种占位符与主色占位符的区别在于, 它不将图片缩放至1x1, 而是缩放至稍大一点的尺寸, 例如3x3.
当浏览器将这种微型图片放大时, 可能会给图片加上适当的模糊滤镜.
在网页设计领域反复流行的一种页面设计方式, 最著名的例子是Apple公司的各种产品页面.
具体表现为页面向下滚动时, 不再让页面照常垂直滚动, 而是以其他行为作为替代.
由于这一设计暂时改变了滚动功能本来的用途, 因此被称为滚动劫持.
滚动劫持因其对页面可用性的严重负面影响而遭到抵制.
大部分滚动劫持效果都与视差效果有关.
滚动劫持有很多种形式:
  • 把页面垂直方向的滚动替换成水平方向的滚动.
  • 用来模拟播放基于图片帧的动画.
  • 用于全屏幻灯片效果.
  • 其他各种充满个性的定制化页面效果.
中文与英文之间的空白实际上根本不是一个值得讨论的问题:
它既没有一个令人信服的解决方案, 对文字视觉效果的改善也相当有限.
  • 符合输入习惯.
  • 可移植性强.
  • 中英文字体本身就足以起到差异化中英文文本的作用.
  • 中英文文本本身就存在足够大的字形差异, 足以起到差异化中英文文本的作用.
  • 如果中英文之间需要添加间隙, 为什么不在中文字符之间也添加同样大小的空隙?
  • 不符合输入习惯, 人们在输入完英文/字符之前实际上很难意识到需要添加空白.
    一些输入法能自动在一些情况下加上空白, 但实际体验并不好.
  • 实际上存在很多种空白字符, 半角空白并不是最适合用作间距的, 只是最适合输入而已.
  • 可移植性差, 不同的软件有不同的文本渲染方式, 手动添加的空白可能会破坏渲染效果.
  • 空白的实际效果会到受字体和渲染引擎的影响,
    如果渲染引擎决定在空白使用等宽字体或将字符以等宽形式渲染, 则空白产生的文本间距会明显过宽, 影响美观.
  • 存在例外:
    • 单英文字符: B超 和 U盘 优于 B 超 和 U 盘.
    • 特定的词汇: 腾讯QQ for Android 优于 腾讯 QQ for Android
    • 特定的节奏: 我觉得OK 优于 我觉得 OK
让程序自动添加空白字符/添加文本间距是一种方案, 但考虑到存在一些难以通过程序处理的例外情况,
这种做法可能反而带来困扰.