排版

  • serif字体
    • ![[Pasted image 20240526152349.png]]
    • ![[Pasted image 20240526153341.png]]
  • non-serif字体
    • ![[Pasted image 20240526152402.png]]
    • ![[Pasted image 20240526153325.png]]
  • 字体大小
    • 普通文本：16px-32px
    • 长文本：20px或者更大一点
    • 标题：可以超过50px并且加粗（600+）
    • font-weight不要低于400
    • 每行字体要少于75个字母（17个字左右）
    • 常规文本行高在1.5到2.0之间
    • 标题或大字体低于1.5
    • 可以适当减小字体间距
    • 对短标题全部大写（英文）
    • 不要对齐文本
    • 不要居中长标题

色彩

  • 颜色与主题相符
    • 红色：吸引注意力
    • 橙色：快乐，创造力
    • 黄色：高兴
    • 绿色：自然
    • 蓝色：平静，专业
    • 紫色：财富，魔法
    • 粉色：浪漫，亲情，有吸引力
    • 棕色：自然，耐用性
    • 纯黑：优雅，极简主义，悲伤
  • 工具：open color，tailwind color，flat ui color，palleton.com
  • 需要两个颜色：
    • 主要颜色（亮色）
    • 衬托颜色（暗色）
    • 强调色（选用）
  • 对比度
    • 常规文本：4.5：1
    • 大文本：3：1

图像

  • 产品照片
  • 讲故事的照片
  • 插图
    • 2D
    • 3D
  • 图案
  • 只使用和你的主题有关的图片
  • 永远不要使用廉价的，过度生产的图片
  • 工具：unsplash pexels drawkit undraw
  • 在你的图片中使用真正的人，而不是过度生产的图片
  • 可以简单的修剪图片，组合图片
  • 在图片上处理文本
    • 让整个图像变暗（变亮）
    • 仅将部分变暗（渐变）
    • 将文本定位到图像的中性元素的位置
    • 将文本简单的放在框里
  • 实际技术
    • 在高分辨率设备中，原图片的大小要是原来的2—3倍
    • 压缩图像，让文件大小变小（squoosh）
    • 并排使用图像时，确保他们具有同样的尺寸

图标

  • 图标包——在一个项目里只用一个图标包
    • phosphor icons
    • 阿里巴巴矢量图标库
    • ionicons
    • icons
  • 格式为.svg或者icon fonts而不是,jpg和.png
  • 用图标给文本提供视觉体验
  • 构建功能块
  • 和“action”一起
  • 用作要点
  • 用法：
    • 使用和文本一样的颜色
    • 图标风格要和字体适配
    • 如果想要吸引注意，可以在不同的图标使用不同的颜色
    • 图标不应该使用太大和线条太粗的

阴影

  • 严肃的主题阴影少
  • 趣味的主题阴影多
  • 阴影原则
    • 小剂量的使用阴影
    • 让阴影亮一些
    • 小心的运用阴影
    • 使用小阴影在小元素（按钮，链接，’action’,讲故事的图片）
    • 使用中等阴影在更大的区域 ，让购物车脱颖而出
    • 大阴影
      • 导航，弹出的提示
    • 在点击和悬停事件是使用阴影
    • 阴影不一定是黑的

边界半径

  • 一般越小越严肃，越大越趣味
  • 可以先选一个比较圆的字体
  • 按钮，小的边界半径
  • 图像，围绕图标

留白

  • 垂直空白
    • 在每个部分之间流出空白（大概192px-根据实际情况）
    • 在各个元素组之间（小一些）
  • 临近原则
    • 根据元素关系的远近控制空白的大小‘
  • 根据元素的大小决定空白的大小
  • 新手提示
    • 只使用16px的倍数

视觉层次

  • 使用前面的总和来建立视觉层次
    - 定位重要的元素
    - 从上到下
    - 图像会吸引很多注意力
    - 战略性的使用空白
    - 在重要和不重要位置分别使用字体大小，宽度，颜色、

用户体验

  • 确定用户需求
  • 不要使用过于复杂的布局
    • ![[Pasted image 20240530141306.png]]
  • 没必要原创，使用模板
  • 让按钮始终能轻易被看到
  • 蓝色字体和下划线只用于链接
  • 设计表格时，对齐
  • 为每种操作都做好说明
  • 最好把按钮放在他会影响的位置
  • 去掉所有无效的信息
  • 有很长的文本时，使用快引用，图片等方式将它们分开

组件

  • 重要需要突出展示的组件
    • 注册页面
    • 内容中间的宣传
    • 预览牌
    • 定价牌
      • ![[Pasted image 20240530122418.png]]
    • 需要突出展示的一个列
      • ![[Pasted image 20240530122501.png]]

网站框架

  • 严肃主题
    • 衬线字体，较细的字体
    • 金色，黑色，灰色等
    • 使用大，质量高的图像
    • 基本不使用图标
    • 基本无阴影和边界半径
  • 极简主题
    • 排版方正，无衬线字体
    • 一般只有一种颜色
    • 图片很少，通常无图表
    • 基本无阴影和边界半径
  • 平凡主题
    • 无衬线字体
    • 蓝色和黑色很常见
    • 基本无阴影和边界半径
    • 大量方块和行
  • 自信主题
    • 大而粗的字体
    • 大色块，鲜艳背景
    • 基本无边界半径
  • 沉静主题
    • 柔和的衬线字体
    • 蓝色，浅黄色等柔和颜色
    • 一般会有很多人
    • 会有一些边界半径
  • 乐观，现代主题
    • 中等大小的标体
    • 浅色颜色的无衬线字体
    • 使用渐变
    • 很多插图
    • 常用阴影和边界半径
  • FUN主题
    • 色彩丰富
    • 图片丰富
    • 大量的边界半径和阴影
    • 很多大色块