前端设计

UI、UX、平面设计区别

参考链接

以往，人们提到“设计”一词，首先想到的是“平面设计”。不过，我们已经生活在数字的世界中，无论你是坐地铁、等公交车还是吃饭，你周围都充满了发光的交互式屏幕。“设计”的定义早已有了很大的发展。设计种类包括美术设计、平面设计、网页设计、广告设计等。

而对于设计初学者来说，往往会对不同类型的设计概念感到困惑。本篇文章，将以简单清晰的话语，帮你搞清视觉设计的三种主要形式：平面设计、UI、UX.

平面设计

提起平面设计，想必很多人都会存在着那么一个误区，平面设计只做平面，它仅仅是一个有关2D的设计，通常情况下无非就是设计logo、海报。其实不然，平面设计更多的是用平面的元素解决或表达实际问题这种思维模式，而不是简单的二维空间设计。

平面设计又称视觉传达设计，是一种以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。

在数字媒体上创建的静态图像，也被视为平面设计。

UI（用户界面）

UI指的是用户界面（User Interface），UI设计是指设计师在网页、软件或移动设备等中构建界面的过程，对人机交互、操作逻辑、界面美观的整体设计。通俗易懂的来讲，在我们和机器进行交流互动时，机器听不懂我们的语言，它需要一个翻译的媒介，这个媒介你就可以理解为UI设计！

UI设计与我们使用事物，以及与外观交互的方式有关。UI(用户界面)设计涉及交互元素的设计。因此，UI设计几乎完全存在于数字媒体中，例如计算机、平板电脑、手机。下拉菜单、表单域、可点击元素、动画、按钮样式等交互元素，都是UI 设计师需要设计元素。

因此，我们可以将 UI 设计的含义理解为，建立在平面设计定义的基础上，并对平面设计进行扩展的一种设计类型。

具有某种交互性的图像也是UI，即使交互性的图像结合了静态图像。

UX（用户体验）

用户体验——是用户与产品或服务交互，以实现目标时的全方位体验。

用户体验设计——是应用以用户为中心的设计方法，来理解和满足用户需求的过程。

用户体验设计师——是产品、业务、内容、行为的问题解决者。通常向 UI 团队提供线框、原型、站点地图、流程和其他 UX 工件。

用户体验主要发生在两个不同的阶段：研究和验证。

研究阶段：用户体验设计师用各种工具和方法来更好地了解他们的目标用户。竞争分析、用户访谈、角色创建、线框图、启发式分析和旅程流程都可能涉及。
验证：在验证阶段，用户体验设计师要进行可用性、痛点分析，以确定产品是否产生了预期的结果。如果没有，则会根据用户数据进行改进和修订，以使产品更好、更高效。用户体验设计师还需要尽早发现可用性问题，防止之后进行重复设计。

用户体验设计过程作为一个框架，使设计人员能够定义问题，为该问题构思潜在的解决方案，并验证他们创建的解决方案。

UI 原型设计的软件有那些呢？

国外软件

Figma
- 特点：基于浏览器的设计工具，支持多人实时协作，拥有丰富的组件库和插件，适合跨平台使用。
- 适用场景：团队协作、远程设计、跨平台项目。
Sketch
- 特点：专为Mac设计的矢量绘图工具，提供直观的界面和强大的绘图功能，支持插件扩展。
- 适用场景：Mac用户、UI设计、图标设计。
Adobe XD
- 特点：Adobe推出的UI/UX设计工具，集成了设计、原型制作和共享功能，支持与其他Adobe软件无缝集成。
- 适用场景：需要与Adobe生态系统结合的设计师。
Axure RP
- 特点：功能强大的原型设计工具，支持复杂的交互和动画效果，适合大型项目需求。
- 适用场景：产品经理、交互设计师、复杂交互项目。
Proto.io
- 特点：云端原型设计工具，支持创建高保真原型和交互设计，提供丰富的组件库和模板。
- 适用场景：移动端原型开发、全交互式原型设计。
InVision
- 特点：流行的原型设计和协作平台，支持用户测试功能，可以收集用户反馈和行为数据。
- 适用场景：团队协作、用户测试、高保真原型设计。
Justinmind
- 特点：易于使用的原型设计工具，适合初学者和专业人士，支持导出HTML和PDF文件。
- 适用场景：快速原型设计、演示和分享。
Balsamiq
- 特点：专注于线框图设计的原型工具，提供简洁的界面和丰富的组件库。
- 适用场景：线框图设计、快速原型草图。
UXPin
- 特点：全面的原型设计和用户体验测试平台，支持拖放式界面和用户测试功能。
- 适用场景：用户体验测试、高保真原型设计。
Marvel
- 特点：简单易用的原型设计工具，适合初学者和小型团队使用，支持导出HTML和PDF文件。
- 适用场景：快速原型设计、演示和分享。

国内软件

即时设计
- 特点：国内首个专业级云端UI设计工具，提供全面的UI设计和原型设计功能，支持多人实时协作。
- 适用场景：团队协作、远程设计、云端存储。
墨刀
- 特点：在线原型设计工具，提供拖拽式操作和在线协作功能，支持多种设备预览。
- 适用场景：产品经理、设计团队、快速原型设计。
摹客
- 特点：面向企业的完整设计解决方案，支持团队协作和动态交互原型演示。
- 适用场景：企业设计团队、复杂项目设计。
MasterGo
- 特点：界面和功能类似Figma，支持设计、原型和标注，提供各种格式导出。
- 适用场景：团队协作、设计交付。
Pixso
- 特点：在线设计工具，提供设计、原型和协作功能，支持自定义跳转、弹窗、切换等交互动画设置。
- 适用场景：团队协作、动态交互设计。
创客贴AI
- 特点：AI驱动的设计工具，快速生成设计，支持简单易用的界面和AI技术集成。
- 适用场景：非专业设计师、小型企业。
蓝湖
- 特点：专注于设计与开发协作的平台，支持设计稿的标注、切图和交付，提高团队协作效率。
- 适用场景：设计团队与开发团队的协作。
Zeplin
- 特点：设计与开发交付工具，允许设计师将设计标注分享给开发人员，简化设计到开发的交接流程。
- 适用场景：设计团队与开发团队的协作。
Craft
- 特点：由InVision推出的设计工具，支持快速创建原型和设计系统，提供丰富的组件库和模板。
- 适用场景：快速原型设计、设计系统构建。
Origami Studio
- 特点：由Facebook推出的原型设计工具，支持创建复杂的交互和动画效果，适合高保真原型设计。
- 适用场景：复杂交互设计、高保真原型设计。

设计 icon 有哪些软件呢？

设计图标（Icon）时，国内外均有众多专业软件可供选择，涵盖从入门到进阶、从免费到付费的不同需求。以下是推荐的软件分类及具体工具：

国外软件

Adobe Illustrator
- 特点：矢量图形设计标杆，提供精准绘图工具和丰富的图标资源库，支持多格式导出（SVG、PNG等）。
- 适用场景：专业设计师、品牌图标设计、高精度矢量图标制作。
Sketch
（仅限macOS）
- 特点：界面简洁，专为UI/UX设计打造，内置图标库和插件生态，支持实时协作。
- 适用场景：Mac用户、界面图标设计、团队协作项目。
Figma
- 特点：基于云端，支持多人实时协作，提供矢量编辑工具和图标模板，兼容多平台。
- 适用场景：跨平台协作、团队项目、快速原型设计。
Affinity Designer
- 特点：高性价比的矢量设计工具，功能接近Illustrator，支持实时像素预览和多种导出格式。
- 适用场景：预算有限的专业用户、跨平台设计需求。
Inkscape
- 特点：开源免费，功能全面，支持SVG格式，适合初学者和预算有限的用户。
- 适用场景：免费矢量图标设计、学习矢量图形基础。
CorelDRAW
- 特点：强大的矢量设计软件，提供丰富的图标模板和编辑工具，支持复杂图形设计。
- 适用场景：专业印刷设计、复杂图标设计。

国内软件

即时设计（JS Design）
- 特点：支持多人实时协作，内置海量图标库和模板，兼容Figma文件，提供云端存储和跨平台支持。
- 适用场景：团队协作、快速原型设计、图标资源复用。
Pixso
- 特点：与Figma类似，支持实时协作和矢量设计，提供图标组件库和自动布局功能。
- 适用场景：团队协作、UI/UX设计、图标系统搭建。
摹客（Mockplus）
- 特点：集成设计、原型和协作功能，提供图标库和设计规范管理，支持多格式导出。
- 适用场景：产品设计、团队协作、图标规范管理。
MasterGo
- 特点：支持多人协作和实时同步，提供矢量编辑工具和图标库，兼容Figma和Sketch文件。
- 适用场景：团队协作、跨平台设计、图标资源管理。
蓝湖
- 特点：专注设计协作，提供图标标注和切图功能，支持与Sketch、Figma等工具无缝对接。
- 适用场景：设计交付、团队协作、图标标注。

位图和矢量图

介绍

位图与矢量图的核心区别

位图（Raster Image）和矢量图（Vector Image）是数字图像的两种基本类型，它们的本质差异体现在数据结构、图像特性和应用场景上。以下是详细对比：

1. 数据结构与存储方式

特性	位图	矢量图
数据构成	由像素点阵组成，每个像素记录颜色信息	由数学公式（点、线、曲线）定义图形
存储方式	存储每个像素的颜色值（如RGB、灰度）	存储图形的路径、坐标、颜色等参数
示例	照片、数字绘画、屏幕截图	标志（Logo）、图标、字体、工程图

2. 图像特性对比

（1）分辨率与缩放

位图：
- 依赖分辨率，放大后像素点会变大，导致图像模糊（“马赛克”效应）。
- 示例：将手机照片放大后，边缘会出现锯齿。
矢量图：
- 分辨率无关，可无限放大而不失真。
- 示例：Logo 设计稿可缩放至名片大小或广告牌尺寸，清晰度不变。

（2）文件大小

位图：
- 文件大小与分辨率和颜色深度成正比。
- 示例：一张1080p照片（1920×1080像素，24位色）约5MB。
矢量图：
- 文件大小通常较小，仅存储路径和参数。
- 示例：一个复杂的矢量Logo可能仅几十KB。

（3）颜色与渐变

位图：
- 支持丰富的颜色和细腻的渐变，适合表现真实场景。
- 示例：日落照片中的天空渐变。
矢量图：
- 渐变和颜色过渡通过数学计算实现，可能不如位图自然。
- 示例：矢量图中的渐变可能呈现“色带”现象。

3. 编辑与修改

特性	位图	矢量图
编辑方式	像素级编辑，使用画笔、橡皮擦等工具	路径级编辑，调整节点、曲线、颜色等参数
修改灵活性	修改局部需重新绘制或覆盖像素	可单独修改某个元素（如Logo中的文字）
示例工具	Photoshop、GIMP	Illustrator、CorelDRAW、Inkscape

4. 应用场景

（1）位图的应用

摄影与艺术：照片处理、数字绘画、图像合成。
网页与屏幕显示：网页图片、游戏贴图、UI图标（需考虑分辨率适配）。
示例：电商网站的产品展示图、社交媒体上的照片。

（2）矢量图的应用

品牌与标识：Logo设计、品牌图标、商标注册。
印刷与出版：海报、传单、书籍排版、矢量插画。
工程与技术：CAD图纸、电路图、地图。
示例：苹果公司的Logo、Adobe的矢量图标库。

5. 优缺点总结

特性	位图	矢量图
优点	颜色丰富、渐变自然、适合复杂场景	无损缩放、文件小、编辑灵活
缺点	放大失真、文件大、不适合复杂编辑	渐变不自然、不适合照片级真实感表现

6. 常见误区

误区1
：矢量图可以完全替代位图。
- 纠正：矢量图不适合表现复杂的光影和细节，位图仍是摄影和艺术创作的首选。
误区2
：位图放大后可以通过软件修复。
- 纠正：放大后的像素丢失无法恢复，需重新拍摄或绘制。

7. 实际应用建议

选择位图：
- 需要表现真实场景（如照片）。
- 需要精细的像素级编辑（如修图）。
选择矢量图：
- 需要无损缩放（如Logo设计）。
- 需要编辑灵活性（如修改图标颜色）。
混合使用：
- 在设计中结合两者，如将矢量图标导入位图软件进行合成。

总结

位图是“像素的集合”，适合表现真实世界；矢量图是“数学的艺术”，适合表现抽象概念。
根据需求选择工具，才能发挥数字图像的最大价值。

保存格式和文件扩展名是什么呢？

位图与矢量图的保存格式及文件扩展名

位图和矢量图因其数据结构不同，支持的文件格式也有所区别。以下是常见的保存格式及扩展名：

一、位图（Raster Image）的保存格式

1. 通用格式

格式	扩展名	特点
JPEG	`.jpg` / `.jpeg`	有损压缩，适合照片，文件较小，但多次编辑会损失画质
PNG	`.png`	无损压缩，支持透明背景，适合网页图标、插画
GIF	`.gif`	支持动画和透明背景，颜色数有限（256色），适合简单动画或图标
BMP	`.bmp`	无压缩，文件大，兼容性好，适合Windows系统
TIFF	`.tiff` / `.tif`	无损或有损压缩，支持多层，适合印刷和高质量图像

2. 专业格式

格式	扩展名	特点
PSD	`.psd`	Photoshop专用格式，保存图层、蒙版、通道等，方便后续编辑
RAW	多种扩展名（如`.cr2`、`.nef`）	相机原始数据格式，保留最大细节，需专用软件处理
HEIC	`.heic`	iOS设备专用格式，高效压缩，保留高质量

二、矢量图（Vector Image）的保存格式

1. 通用格式

格式	扩展名	特点
SVG	`.svg`	基于XML的矢量格式，支持网页显示和动画，适合图标、插画
PDF	`.pdf`	支持矢量和位图，广泛用于印刷和电子文档，兼容性好
EPS	`.eps`	矢量图标准格式，支持PostScript语言，适合印刷
AI	`.ai`	Adobe Illustrator专用格式，保存图层、样式、路径等，方便后续编辑

2. 其他格式

格式	扩展名	特点
CDR	`.cdr`	CorelDRAW专用格式，功能类似AI，适合复杂矢量设计
DXF	`.dxf`	CAD行业格式，支持矢量图形和3D模型
WMF/EMF	`.wmf` / `.emf`	Windows元文件格式，支持矢量和位图，适合Windows系统

三、格式选择建议

1. 位图格式选择

照片处理：优先选择JPEG（文件小）或TIFF（无损压缩）。
网页设计：优先选择PNG（透明背景）或WebP（高效压缩）。
动画制作：优先选择GIF（简单动画）或APNG（高质量动画）。

2. 矢量图格式选择

品牌设计：优先选择AI或SVG（可编辑性高）。
印刷输出：优先选择PDF或EPS（兼容性好）。
网页图标：优先选择SVG（可缩放且支持动画）。

四、常见问题解答

位图能否转换为矢量图？
- 可以，但需通过软件（如Illustrator的“图像描摹”功能）将像素转换为路径，效果取决于原图复杂度。
矢量图能否转换为位图？
- 可以，通过导出为JPEG、PNG等格式，但会失去矢量特性（如无限缩放）。
为什么有些矢量图在网页上显示模糊？
- 可能是导出时未正确设置分辨率，或浏览器对SVG的渲染问题。

总结

位图格式：适合表现真实场景，需根据用途选择压缩方式（有损/无损）。
矢量图格式：适合无损缩放和编辑，需根据应用场景选择兼容性强的格式。
混合使用：设计时可将矢量图标嵌入位图背景，或导出位图为矢量图的参考。

通过理解格式差异，设计师可更高效地选择保存方式，确保图像质量与应用需求匹配。

经验总结

配色经验

通过使用 https://uicolors.app 创建经过软件自动优化的配色方案。
通过调整 https://uicolors.app 中色彩的饱和度后再观察，发现色彩的饱和度不宜过高，否则界面效果很生硬。

背景颜色和主体颜色（文字颜色、产品图片主体颜色）的对比度高才一目了然，否则不容易分清楚哪个是主体。

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo1>div {
            width: 300px;
            height: 150px;
            background-color: yellow;
            color: white;
        }

        .demo2>div {
            width: 300px;
            height: 150px;
            background-color: #97393b;
            color: black;
        }
    </style>
</head>

<body>
    <div>背景颜色明亮时</div>
    <div class="demo1">
        <div>这是文字内容</div>
    </div>
    <hr>

    <div>北京颜色暗淡时</div>
    <div class="demo2">
        <div>这是文字内容</div>
    </div>
    <hr>
</body>

</html>

文字颜色需要明亮点。

学习技巧总结

找一套开源的 html、css、javascript UI 组件库，通过逐个还原的方式培养 html、css、javascript 综合运用能力和基于组件的细节美化能力。
- bootstrap 基于 html、css、javascript 组件库 https://getbootstrap.com/
- 使用 Tailwind CSS 重新创建的 Bootstrap 组件，但具有更好的设计和更多功能，注意：因为选择 bootstrap 学习，所以暂时不研究这个库。https://tw-elements.com

前端设计 ​

UI、UX、平面设计区别 ​

平面设计 ​

UI（用户界面） ​

UX（用户体验） ​

UI 原型设计的软件有那些呢？ ​

国外软件 ​

国内软件 ​

设计 icon 有哪些软件呢？ ​

国外软件 ​

国内软件 ​

位图和矢量图 ​

介绍 ​

保存格式和文件扩展名是什么呢？ ​

经验总结 ​

配色经验 ​

学习技巧总结 ​

前端设计

UI、UX、平面设计区别

平面设计

UI（用户界面）

UX（用户体验）

UI 原型设计的软件有那些呢？

国外软件

国内软件

设计 icon 有哪些软件呢？

国外软件

国内软件

位图和矢量图

介绍

保存格式和文件扩展名是什么呢？

经验总结

配色经验

学习技巧总结