工程师的设计意识

作为一个开发，总是无法避免需要自己做页面，那么该如何设计一个页面，页面设计有哪些可以遵循的基本要求呢？

首先是规则，页面的规则就像一套游戏皮肤一样，有相似的特征，那页面的特征也必不可少，比如 字号、字重、颜色、间距、圆角、阴影等，通过抽象出一组有规律的值，来凸显页面的特征。在确定规则的前提下，再使用一些技巧，做出让人舒服的界面。

最重要的设计原则：
把功能做好，设计交付的第一步，就是交付功能，功能优先始终贯穿在设计&开发流程中

MVP先行：
把关键路径上的主流程设计完成，迅速迭代

当提到网站设计，普通设计师脑海里，可能会浮现一个网站的轮廓，会想到站点的 logo、导航栏、栅格布局之类的；
一个具备设计意识的工程师，应该想到那个 Google 搜索框。

层级：
一个产品要好用，就要让用户很容易地，抓到产品重点。在重点里，用户能自在地进入沉浸式阅读、和使用的状态；当用户想探索其他内容时，ta 能轻松地识别网站的次要板块还有哪些，焦点能迅速转移，并迅速沉浸；辅助提示信息，精确而又不会打扰各主要模块的呈现。

一致性：
一致性指的是：用户在站点的各个角落，观察到颜色、间距、阴影、位置、字体和字重的运用，都在一套有限的框架里，一套能迅速建立亲切感的框架内。什么意思呢？

当页面中，主要的交互、视觉元素都采用同一主题色（图中为蓝色）来表示时，用户可以迅速知道「页面中有哪些元素是可交互的、我需要的提示信息在哪」

比如这张图，表单中 label 和输入框之间、以及输入项之间有序且固定的间距，可以帮助用户迅速识别当前填写的表单项是什么内容、以及稳定地将视线移动到下一个表单项上。

• 完整阐述报错信息，而不只是提示 成功或失败
• 在系统中各个地方对于同一概念的表述要一致，避免造成理解上的误区
• 能在这个页面解决的问题，就不要去其它页面解决，因为任何页面刷新和跳转都会引起变化盲视，导致用户心流被打断
• 字号、行高、字句、字重的搭配在无形中区分了内容的主次，决定了内容的节奏与秩序之美，14px可以作为一个基准字号实用

• 排版要尽量松散，不要紧密堆积在一起，板块之间要有固定的间距，不要杂乱无章，可以定义大中小三种固定的间距
• 避免大量的动画效果，这会造成页面和功能被拖慢节奏，造成系统有迟滞感。通常我们利用动画，可以来巧妙地传达给用户「刚刚发生了什么」，这是一种合理使用动画的方式
• 保持对其：任何东西都不能在页面上随意安放，每个元素都应当与页面上的另一个元素有某种视觉联系，这样能建立一种清晰、精巧而且清爽的外观，在设计中，统一性是一个重要的概念
• 归类分组：彼此相关的项应当靠近，归组在一起。如果多个项相互之间存在很近的相关性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于组织信息，减少混乱，为读者提供清晰的结构
• 增强对比：增强对比的基本思想是，要避免页面上的元素太过相似。如果元素的字体、颜色、大小、线宽、形状、空间等不相同，那就干脆让它们截然不同。要让页面引人注目，对比通常是最重要的一个因素，正是它能使读者首先看这个页面
• 一致性：重复出现一些统一的元素，增强页面的规则感

• 避免使用多种颜色和色块，不要用颜色来代表太多的含义，简单清晰是最好的，用色块来标明主次即可
• 功能色不要太花，尽量简洁标明重点功能即可，中性色实用黑灰类色值
• 在颜色选择方面，可以使用一组互补色作为主色调，使用一组三基色作为基础色值
• 冷色调适合作为背景、暖色调适合加强强调

• 在所有文案中我们要尽量保持语言的简练。在用户已知上下文的情况下，不要重复用户已知事实
• 无谐音错别字，文风精炼，少用感叹词
• 英文与非标点的中文之间需要一个空格
• 数字与非标点的中文之间需要一个空格
• 尽可能使用中文数词，特别是当前后都是中文时，例如我有五个苹果，而不是我有5个苹果
• 数字与单位之间需要有空格
• 注意特殊名词的大小写，如Android、Google
• 避免中英文混淆，尽量使用英文词源，避免译法的差异
• 只有中文或中英文混排中，一律使用中文/全角标点
• 中英文混排中如果出现整句英文，则在这句英文中使用英文/半角标点
• 中文标点与其他字符间一律不加空格
• 中文文案中使用中文引号「」和『』，其中「」为外层引号。Mac 上如「搜狗输入法」等都可以方便地输入中文引号
• 纯文本段落要用空行隔开
• 段落开头不要出现空白字符
• 引用的内容要用特殊标注标明
• 图片加载缓慢，尽量不要在图片上添加文字内容
• 文本中指代特定个体时要使用「您」
• 字体字号一致，用加粗来标示重要性

• 布局
  • 内容居中放置
  • 内容宽度在600-800px之间
  • 实用栅格设计系统
• 间距
  • 可以基于某个数字的倍数来设计间距体系
  • 多留白，先从大大的留空开始寻找适合的间距
  • 间距适合用来表达关联关系，比如段落和段落标题，页面上的每一处空白都应该是有意义的
• 文字
  • 定义一套字体大小，从中选择，不要看着写
  • 通过字重和颜色来标识重点层级
  • 少即是多，很多时候一些文字是可以省略的，比如手机号、邮箱等，大家一看到有@就知道是邮箱，不需要很刻意的说这是邮箱
  • 段落宽度，我们阅读一行，所需要的时间应该是稳定的、习惯的。因此一行承载的字数也应当是在一个最佳区间之内
  • 文本字体按照下边缘对齐
  • 适度调整字符间距，让文字看起来不那么紧凑
  • 行高和字号大小大致成反比，目标是用户在视线换行时有稳定的下移体验
• 色彩
  • 灰色无处不在，是最常用的万能色
  • 定义自己的主题色，不要太复杂
  • 用功能色和语义色来表达信息提示
  • 多用对比度和透明度来调整层级关系，太重的色值要用给重要功能
• 深度
  • 制造深度的关键技巧，使用阴影，阴影可以表达出层级的视觉感受
  • 使用亮度也可以做出层级的感受，越亮的元素用户感觉离得越近
  • 巧用背景色可以起到对比分层的效果，使用蒙层来降低背景的影响
• 其他
  • 少用边框，用背景来区分表格
  • 空状态设计，如果没有数据，就不要展示一堆搜索框了
  • 在tab上增加强调线