学习ui设计有什么推荐的网站？

时间：2023-12-11 08:36:01 | 来源：网站运营

时间：2023-12-11 08:36:01 来源：网站运营

学习ui设计有什么推荐的网站？：有的鸭，UI 设计需要学习的东西比较多，大致可以分为 2 类：

• UI 设计软件技能
• 设计理论（色彩、版式、设计规范、交互方式等）

UI 设计软件技能

UI 设计软件，可以细分为两类，一类是 UI 设计核心软件(主力吃饭家伙)，例如 Sketch、XD、Figma 和 Pixso，一类是辅助软件，帮我们更好地完成 UI 设计软件无法实现的效果，例如 PS、AE 等。

别看 UI 设计核心软件有那么多款，但其实它们底层的本质是相通的，熟练掌握其中一款，以后要用到别的软件，也可以很快上手。

简单说一下 4 款 UI 设计核心软件的区别：

Sketch：Mac 用户首选的 UI 设计软件，目前在国内份额最多，缺点是你首先要有一台 Mac 电脑
XD：Adobe 公司推出的 UI 设计软件，可以很好地与 Adobe 全家桶软件联动，支持 Windows 和 macOS 系统，缺点是每年的订阅费用比较高
Figma：可以看成是在线版的 Sketch，浏览器打开即可使用，缺点是没有中文版、海外服务器网页打开速度慢
Pixso：由国内团队打造的对标 Figma 的在线设计工具，个人版完全免费，很好地解决了 Figma 存在的语言门槛、加载速度慢的问题

---

下面就以 Pixso 为例，说说 UI 设计软件中经常会用到的一些功能：

1 栅格系统

在进行页面排版时，为了让不同页面的布局保持统一，通常会在画板上构建栅格系统，它的作用类似于设计软件中的「参考线」，可以通过规则的网格阵列或矩形来指导画板中元素的布局以及信息分布。

对于一个空白的画板，可以点击右侧栏的「布局网格」创建栅格系统，默认创建的是网格阵列，点击网格图标，在弹出的面板中，可以将网格阵列更换为列或行。

如果将网格更改为「列」，网格就会变为一个个带有粉色填充的矩形，更改下方的「数量」和「间距」参数，可以调整矩形的数量和矩形间的横向距离。

如果想要构建「方格子」外形的栅格系统，需要给点击右侧的加号，给画板添加另外一个布局网格，如下图，因为前面添加了「列」，这里就添加「行」，稍微调整一下行的「数量」，就可以得到方格子外形的栅格系统。

值得一提的是，「布局网格」仅对画板有效，如果你在文件中使用形状工具创建了一个和画板一样大小的矩形，选中矩形的状态下，在右侧面板是找不到「布局网格」的选项的。

2 组件库

相比平面设计 PS，UI 设计软件最大的不同之处在于，引入了「组件」的概念，组件可以类比为乐高中的积木，所有页面都是由一个个组件「拼装」而成，不同页面可以重复使用同一个组件。

组件在保证复用性、减少元素冗余的同时，也可以实现批量修改样式的操作，大大提高了 UI 设计的效率。

在 Pixso 中，选中任意元素，点击顶部工具栏的「创建组件」(快捷键为 Cmd + Option + K)，可以将普通元素转换为组件。

元素转换为组件后，点击左侧面板的「组件」选项卡，可以在下方看到刚刚创建的组件。

关于组件，这里还有两个概念需要了解一下：

从普通元素转换为组件的对象，称为主组件；从属于主组件的子级组件，称为组件实例，在 Pixso 中有两种创建实例的方法，一种是从左侧组件面板往画板拖拽添加，另一种是按住 Option/Alt 键，从主组件拖拽复制出新的组件。

当我们修改主组件的颜色或大小时，与主组件相关联的组件实例也会相应地发生变化，这样就可以实现批量修改元素样式的目的。

如果想让某个组件实例与主组件脱离关联，可以右击组件实例，选择「从组件分离」，分离之后，当主组件修改样式时，就不会影响到脱离关联的组件。

3 矢量工具

UI 设计通常会用到各式各样的图标，一方面图标可以简化页面包含的元素，保证界面的简洁，与此同时，图标可以起到形象化表达的效果，有时一个图标可以抵得上一大段文本内容。

Pixso 提供了各种常用的矢量形状工具，包含矩形、直线、箭头、圆形、多边形、星形，来帮助 UI 设计师绘制各种 icon 图标。

这里尤其要说一下其中的圆形工具，它不单纯是一个圆形，通过拖拽圆形内部的锚点、圆心，可以把圆形分别转换为扇形和环形，转换过程非常简单，无需用到布尔运算。

除了手绘图标，对于一些比较有普适性的图标，可以使用 Pixso 内置的 ICON 图标插件，直接调用来自 iconfont 或 IconPark 的 icon 图标，减少不必要的重复劳动，把时间放在更重要的事情上。

Pixso 目前对所有个人用户免费开放，内置的所有功能都可以免费使用！

现在前往 Pixso 官网注册账号，可以享受到 Pixso 会员的所有权益：无限文件数量、无协作者人数限制、无限云存储空间等等，快来尝试一下吧～

除了学习软件，对于刚接触 UI 设计的新手，了解一些常用的 UI 设计术语，也非常有必要，避免在浏览 UI 设计干货时一脸茫（meng）然（bi）。

点击查看下方皮仔为你准备的《UI 设计师必知的 38 个专业术语》：

设计理论

设计理论涵盖的内容比较多，包含色彩、版式、设计原则等，这些理论不仅可以应用在 UI 设计，在其他细分的设计领域也是通用的。

1 色彩理论

以色彩理论为例，每种颜色都有不同的含义。要了解这一点，就需要对色彩心理学有所了解。

每种颜色都表达了不同的感觉和情感。这些颜色背后可以传达的事物：

红色：爱、愤怒

橙色：活力、幸福

黄色：幸福、希望

绿色：自然、纯天然

蓝色：冷静、负责、信任

紫色：创造力、忠诚（Pixso 的图标就包含了紫色）

黑色：神秘、优雅

对于初学设计的人来说，一上来要配出好看的颜色，还是非常有难度的，一种比较取巧的方法，就是去观摩各种提供优秀配色方案的网站，从多种方案中学习配色的技巧。

Pigment，一个提供多种不同配色方案的网站，非常适合刚学设计、不懂配色原理的小白。

左侧栏的 Pigmen 和 Lighting 可分别调整配色的饱和度和亮度，来获得不一样的配色方案，Pigmen 数值越大，所有配色方案的颜色看起来越鲜艳，反之则看起来灰蒙蒙的。

点击配色方案会打开新的页面，左右两侧可以对比两种颜色分别作为前景色和背景色的效果，这一点真的很赞！

点击网页右上角的「More Actions」，可以将当前的配色方案导出为 svg 或是 sketch 和 Adobe 系列软件可用的配色文件。

2 设计原则

设计四原则：对比、重复、对齐、亲密

良好的用户界面原则：设计简单、可预测、可见、一致性、容易上手、无障碍、反馈

如果觉得这些设计原则比较难体会，一种比较好的学习方式，就是去查看各种优秀的设计作品，从设计实践中总结出作品中的亮点，再对照这些原则，了解他人是如何在设计中践行这些原则的。

这里介绍一个搜集 UI 设计灵感的网站：

Screenlane，一个提供网页和移动界面设计的灵感网站。网站提供了多个 App 不同界面的多张截图，打开任意一个 App，可以看到 App 在不同状态、交互操作、页面下的所有截图，非常全面地展示了一个产品界面设计的全貌，也能学习到一个产品的设计风格是如何保持统一的。

在网站的左侧边栏，可以页面类型、组件、产品类别、产品名称作为筛选条件，从众多的界面设计作品中，找到符合自己需求的案例。

对于设计理论方面的东西，皮仔也是一个处于刚入门阶段的新手，暂时就分享这么多，感谢你能看到这里～

以上，希望对你有帮助。

码字不易，对你有帮助的话，请别忘了赏个【三连】或是【关注】我哦，关注不迷路！

我是皮仔 @Pixso协同设计 ，那我们下次再见咯。