设计师做了哪些事情让产品界面更高级？

2025-6-18    涛涛 设计管理与成长

image.png

一、构图排版

（一）构图造型艺术术语

  • 定义：构图是作品中艺术形象的结构配置方法，是造型艺术表达作品思想内容并获得艺术感染力的重要手段，在视觉艺术（如绘画、平面设计、摄影）中常用，在 UI 设计中主要作用是构建和谐稳定的布局页面。

（二）构图心理学

  • 黑林错觉：中间两条线实际平行，但看起来是弯的。
  • 冯特错觉：中间两条线平行，视觉上呈弯曲状。
  • 庞佐错觉：中间四边形为矩形，而非顶边比底边宽的四角星形。
  • 厄任斯坦错觉：中间矩形四边看似弯曲。
  • 波根多夫错觉：观看时大脑会习惯性自动补齐断线。
  • 菲克错觉：垂直线段与水平线段等长，但垂直线段看起来更长。
  • 穆勒莱尔错觉：末端加向外斜线的线段比加向内斜线的线段看起来更长，实际等长。
  • 艾兵浩斯错觉：左边中间的圆与右边中间的圆大小相同，但视觉上左边更大。
  • 卡泥沙错觉：大脑会脑补出实际不存在的三角形轮廓。
  • 垂直水平错觉：正方形是构成任何设计系统的基石。
  • 马赫带效应：同色渐变毗邻摆放是常见的扁平化设计手法（如 #E91E63 等色值示例）。
  • 同时同比错觉：同色物体置于不同对比度背景上，会呈现不同视觉效果。

（三）设计构图技巧

  • 稳定性：对称平衡的形态具有自然、安定、均衡、协调、整齐、典雅、庄重的朴素美感，符合视觉习惯。
  • 强点优先：画面中人的眼睛、人脸、明暗交界处等是天生强点，常见于黄金分割线位置。
  • 均势：通过物理学规律支撑画面，保持视觉重心平衡，调整积极元素与消极元素关系，确保区域无偏差，元素无缝衔接。

（四）排版原理

image.png

  • 格式塔原理（1912 年由德国心理学家提出，解释人类视觉工作原理）
    • 简单：眼脑观看时会将形象各部分组合成更易理解的统一体，暗合三角形构图、对称构图、向心式构图、对角线、X 构图等法则，目的是在复杂信息环境中构建易懂整体。
    • 相似：眼睛易关注相似物体（形状、大小、颜色），无论位置是否相邻，都会将其联系起来。
    • 接近：单个视觉元素距离接近时，视觉上会形成较大整体，个性减弱。
    • 闭合：观察熟悉视觉形象时，会把不完整局部作为整体感知，若局部过于陌生或简略，会产生整体闭合联想。
  • 亲密性原则：相关项应靠近归组，成为视觉单位，减少混乱，提供清晰结构。
  • 重复原则：视觉要素（字体、颜色、形状、线条、大小、图片等）在画面中重复出现，增加条理性和统一性，形成节奏感。
  • 停顿：节奏中断让设计更有层次，如 Twitter feed 流中插入列表推荐，可抓住注意力。

二、色彩

（一）色彩常恒性

  • 定义：当照射物体表面的颜色变化时，人们对该物体表面颜色的知觉仍保持不变的知觉特征。

（二）色散试验

  • 1666 年，英国物理学家牛顿用三棱镜证明光是由红、橙、黄、绿、蓝、靛、紫等单色光复合而成。

（三）色彩概念

  • 色光混合：红、绿、蓝为色光三原色，不同量混合可呈现其他颜色，等量混合为白色光，又称加法混合或正混合。
  • 油墨混合：青、品、黄为颜料三原色，无法通过混合形成，不同比例混合呈现多重色彩，等量混合为次黑色，又称减法混合或负混合。

（四）色彩三要素

  • 色相（Hue）：各类色彩的相貌称谓（如大红、普蓝、柠檬黄），是色彩首要特征，由原色、间色和复色构成。
  • 饱和度（Saturation）：色彩的鲜艳程度（纯度），取决于含色成分和消色成分（灰色）比例，含色成分越大饱和度越高。
  • 明度（Brightness）：眼睛对光源和物体表面明暗程度的感觉，由光线强弱决定，取决于物体照明程度和反射系数。

（五）基本色环（Color Wheel）

image.png

  • 光谱顺序：红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝、蓝紫、紫、紫红，十二色相环每色相距 30 度，二十四色相环每色相距 15 度。

（六）配色方法

  • 同一色：色相环中任意色因明度变化呈现的色彩，通过在纯色中加入黑、白、灰形成，主色和辅色在同一色相，页面风格一致。
  • 同类色（类似色）：色相环上原色起 45 度以内的色彩，色相性质相同但色度有深浅之分，含较多共同色彩元素。
  • 相邻色：色相环中相距 90 度或相隔五六个数位的两色，属中对比效果色组，色相近似、冷暖性质一致、色调统一和谐。
  • 对比色：色相环上色相差异大、纯度高的亮色，对比效果强烈，当彩度和明度相同时对比更明显，越接近补色对比越强烈，需精准掌控色彩搭配和面积，主导色带动页面气氛。
  • 补色（互补色、余色）：两种颜色等量混合呈现黑灰色，色环直径两端相对之色，对比过于冲撞，少用于传统网页，多用于活动 banner 吸引眼球。
  • 消色：黑白灰等无彩色系。

（七）色彩搭配

  • 色彩构成原则：一款 App 颜色不超过三个系，主色（75%，决定界面风格）、辅色（20%，丰富界面）、点缀色（5%，引导阅读、装饰画面）。如中国移动设计颜色控制在 1-2 个，辅以黑白灰；常见蓝色系（Facebook、Twitter、支付宝），但非所有应用都适合。
  • 色彩关系
    • 协调感：通过同一色混合、同类色混合、相邻色混合、中消色混合，满足人类生理和心理安全感需求，保障长时间阅读。
    • 对比：通过对比色对比、纯度对比、面积对比、明度对比制造冲突感，引起用户注意。

（八）配色灵感捕获

  • 图片来源：选取有凝聚力的图片，通过 Photoshop 滤镜 - 马赛克或 Sketch 插件 - Alembic 凝聚色块获取配色。
  • 中国风色彩示例：月白蓝、湖水蓝、勿忘草、天青蓝、薄荷蓝、洪蓝、古兰、深海蓝。

image.png

（九）配色网站

  1. COLOURlovers
  2. NIPPONCOLOURS
  3. color
  4. colorfavsr
  5. uigradients
  6. MD 配色
  7. 配色方案设计师
  8. Adobe 配色工具

« 每个公司都需要自己的产品体验报告 我们如何把竞品分析做的更好？ »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档