Refactoring_UI

开始

首先看重功能

从一个功能开始，而不是布局。

如：一个机票预订服务，那么界面需要出发城市, 目的地, 出发日期, 归还日期, 搜索按钮

Goolge 就是这样

不要纠结细节在开始的时候

每件事情最终都会重要，但是要选择当下最重要的事情。不纠结于小细节，快速探索一系列不同布局想法。

灰度颜色 刚开始采用灰度设计，防止目标过度分散

不要过度投资

低保真(low-fidelity)的意义在于能够快速推进。尽快构建产品

sketch草图 wireframe线框图是一次性的，探索想法，做出决定后就抛在脑后。

如果某个功能是锦上添花，那么可以稍后设计，先构建一个简单版本

循环工作 不要认为工作时一步到位的。不要一开始就设计很复杂的功能。周期性的工作，不要在抽象的工作中感到不知所措。尽早构建真实的东西，这样你的想象力就不必承担所有的重担。

个性化

字体排版 优雅或经典的外观：设计中加入衬线字体。

| 衬线字体。 | 圆润的无衬线字体。 | 中性无衬线字体 | | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | | | | | |

更playful ，可以使用圆润的无衬线字体。 color bleu：安全且熟悉的 Gold: 昂贵精致 pink: 更加有趣，不严肃

| | | | | --- | --- | --- |

| | | |

圆角边框 小的圆角边框比较中性，本身不传达太多个性较大的边框显示比较playful 没有任何边框比较严肃

language 客气的语言显得专业随意的语言让人更加亲切

不要过多的参考竞争对手的东西，否则看起来像是二流版本。

限制你的选择

不仅是字体，颜色还有其他任何细微的设计都需要消耗精力，比如文字大小，阴影，下边距等等。因为不止一个正确的选择。比如如下这些按钮看着差不多。如何做一个自信的决定。

提前定义系统

定义好颜色，使用一组受限的值

定义好字体大小。

把一切都系统化 拥有的系统越多，工作速度就会越快，对自己决策也就越少犹豫不决。

Hierarchy is Everything

visual hierarchy 视觉层次是界面中元素重要性如何呈现。相互关联。这是让事物感觉设计过的有效工具。使得某物look good的原因根本与表面的造型无关。

当界面中所有元素都在争夺注意力时，会感觉很嘈杂且混乱。

| | | | --- | --- |

| | |

需要有意识淡化次要和第三级的信息。及时布局，颜色方案，字体选择没有改变，结果可能也会变好

大小不是一切

可以使用字体粗细和颜色来达到突出显示的目的同样的使用柔和的颜色作为辅助文本，而不是小号字体，小号字体会减少可读性尽量只用到两三种颜色：主要内容，深色调；次要内容，灰色；更浅的次要内容。通常两种font weight就足够了。：常规字体粗细（400 ior 500）; 强调文本(600 or 700), 避免使用小于400的

不要在彩色背景上使用灰色文字。

界面的主要元素不突出，可以通过弱化其他非活跃项来提高。

比如如果侧边栏和主内容区有竞争就不要给侧边栏设置背景

标签是最后的方式

在向用户展示数据时，很容易陷入简单的标签将标签和值进行结合如果要在页面上展示库存：不要使用 In stock：12,而是 12 left in stock.

如果需要标签，标签是次要信息。可以缩小标签大小，降低对比度，使用更细的font weight

语义标签：不要让使用的元素影响样式选择。

平衡重量和对比 图标，尤其是实心的，通常相当重。通过给图标一个柔和的颜色来降低对比度

当使用柔和颜色，像素1的细边框比较微妙，但是加深颜色会感觉过于苛刻。可以加粗来强调，又不失去柔和的外观。

语义是次要的

语义，比如添加，删除编辑按钮，在设计中很重要，但是不能忽略层次结构主要操作：纯色的高对比度背景色次要操作：轮廓样式或低对比度背景颜色次级操作：设计成链接

破坏性行为 如果破坏性行为（比如删除）不是页面上主要操作，最好将其设置为次要或第三级按钮。

Layout and Spacing

设计中每个元素多一些空间，是简化设计的最简单的方法之一

先给某物过多的空间，然后逐渐减少直到对结果感到满意。

建立间距和尺寸系统

不应该在120 -125像素之间吹毛求疵，相反限制自己只使用预先定义的一组固定值。

线性刻度不适用。spacing和sizing，并不是所有东西都是4像素的倍数这样简单。需要确保比例尺上没有两个数值的间距小于大约25%

定义系统

16px 默认字体大小

不需要填满整个屏幕

给每个元素足够的空间——不要为了让它与其他东西匹配而故意使其变糟。

如果你正在构建一个响应式的网络应用，请尝试从一个宽度为400像素的画布开始，并首先设计移动端布局。

按列思考 如果你设计的东西在较窄的宽度下效果最佳，但在其他宽屏界面中显得不协调，试着将其拆分成多列，而不是仅仅使其变宽将表单的信息写在左侧

Grids被高估了

使用12-column grid是简化布局的好方法。但是所有的布局决策都外包给网格可能弊大于利。例如，考虑一个传统的侧边栏布局。使用一个12栏网格系统，你可以给侧边栏分配三栏（25%）的宽度，主内容区域分配九栏（75%）的宽度，一开始看起来可能没问题，但是调整屏幕大小的时候会变得奇怪

有些情况我们不是基于网格来调整元素的大小，而是给它们设置一个最大宽度，以防它们变得过大，只有当屏幕小于这个最大宽度时才强制它们缩小

相对尺寸不可缩放

比如一篇文章正文 18px 标题45px 2.5em

2.5em在大屏是合适的。但是小屏自动缩放不合适。适用于小屏幕的更佳标题字号可能介于20px至24px之间

在大屏幕上较大的元素需要比本来就相对较小的元素缩小得更快——在小屏幕尺寸下，小元素与大元素之间的差异应该不那么极端

放弃一切都需要成比例扩大的想法

避免使用不明确的spacing空间

每当你依靠间距来连接一组元素时，一定要确保围绕这组元素的空间比其内部的空间要大这需要用户去判断，容易输入错误的数据字段。水平组件也是如此

Designing Text

建立一个 text scale

类似间距和尺寸一样，线性刻度不合适。 避免使用em单位，坚持px或者rem

使用好的字体

最稳妥的选择是中性的无衬线字体。 Helvetica字体依赖系统字体

忽略那些少于5 weights的字体 不总是对的，但通常来说，有较多粗细的字体在制作时更加精心和注重细节

小写字母高度较矮的字体适用于标题。正文的字体比较宽松，并且字母间距较大。避免在主界面文本中使用高度较短的紧凑字体

相信群众的智慧 如果一种字体很受欢迎，那他很可能是一款号字体。

保持line length 适中

为了获得最佳阅读体验，段落宽度舍之道每行45-75个字符之间。宽度在20-35em之间。

base line not center 行高是成比例的

可能行高是1.5是不错的七点用户在阅读文本，不小心读了同一行或者跳过了一行，那么line height可能太矮了。

狭窄内容可以使用较短的行高，如1.5，宽阔内容可能需要使用高达2的行高。

line length不是唯一决定line height的因素。字体大小也有影响。当文本较小时，添加较大的行高是有必要的。如1.75，当文本较大时，1的行高足够了。

并非每一个链接都需要颜色

当所有元素都是链接的界面时，使用更粗的问题或者更深的颜色会比较好。次要元素的链接也不需要颜色。hover也可以。

以可读性为重点进行调整

文本应该根据其书写语言的方向进行对齐，左对齐短文本使用居中对齐效果比较好，但是超过两三行使用左对齐看起来更好。

一个包含数字的表格，将数字右对齐

两端对齐文本连字符使用，否则会产生一些多余的空格

有效使用字母间距 letter spacing

标题的字母间距比较小

提高全大写字母的可读性：全大写字母高度相同，使用默认的字母间距会导致文本阅读比较困难。通常增加字母间距可以提高可读性。

Color

放弃hex 使用HSL

Hex和RGB是常见颜色格式，但不是最实用的，Hex RGB视觉看起来很相似的颜色，代码却完全不同。 HSL通过使用人眼直观感知的属性来表示颜色：色相、饱和度和亮度。 hue, saturation, and lightness. hue以度(degress)为单位，0红色，120 绿色，240蓝色饱和度是颜色的丰富或鲜艳程度。 0%饱和度是灰色，100%是鲜艳强烈的。亮度：接近黑色白色的程度，50%的亮度是给定色相的纯色

HSL vs HSB HSB在设计软件中比HSL常用，但浏览器值了解HSL

我们需要更多的颜色

不能仅用5个16进制颜色构建网站。需要选择更全面的颜色集

可以将色彩调色板分为3个类别：灰色系，文本，背景，面板，表单控件界面都是灰色的

原色（Primary color）：网站的主要颜色 Accent color：辅助色，红色破坏性操作，黄色用于警告信息，绿色突出积极的趋势

总的来说，对于一个复杂的用户界面，可能需要多达10种不同的颜色。每个颜色5-10个不同的阴影。

事先定义色调

选择基础颜色，没有真正科学的方法来做，一个好的经验是选择一个适合作为按钮的颜色
选择edges 边缘（找最深或最前的色调），颜色最深的阴影用于文字，最浅的阴影用于给元素的背景上色
填补空缺，有了基础色和最深色，最浅色，只需要填补他们之间的空白即可最深的色调定位900，基础色调的定为500，最浅的色调定为100. 灰色项目中选择淡白色背景的最浅灰色