UI 设计中的 UI 是英文 User Interface 的缩写，直译过来就是「用户界面」，UI 设计连在一起就是「用户界面设计」。

用户界面设计，指的是在用户体验和交互的指导下对计算机、电器、机器、移动通讯设备、软件或应用以及网站进行的设计，使得用户在完成自己的任务时与设计的界面之间的交流尽可能地简单和高效。

初次接触 UI 设计，可能会对这个术语感到陌生，但其实它就潜藏在你每天会用到的各种 App 中，你在 App 中点击的按钮、阅读的文本、图像、滑块、表单输入的内容、以及可与之发生交互的所有元素，都属于 UI 设计的范畴，你在 App 中看到的这一切，是由背后的 UI 设计师来完成的。

在实际工作中，UI设计师的一些主要职责包括：

• 从产品经理那里收集需求
• 创建草稿布局和流程流以突出显示网站的功能
• 设计页面上显示的图标、菜单和其他交互式元素
• 对导航和搜索控件进行编码
• 为产品设计师和团队开发 Demo 网站，以进行测试并提供反馈
• 向引用业务需求的利益相关者提交草稿
• 排查滞后时间和链接断开等问题
• 学习用户风格指南以创建适当的设计元素

为了完成上面的各项职责，UI 设计师需要具备一些特定的技能，例如：

• 分析能力：UI设计师会分析需求以确定可能性。它们确定站点或应用程序上的每个对象如何运行，如何相互交互以及用户操作的唯一组合如何影响整个站点。
• 交互设计原则：在接受教育的同时，UI 设计师经常学习交互式设计原则，这些原则解释了人们通常如何与网站和内容进行交互。作为 UI 设计师，你可以应用这些方法来设计一个吸引其用户并了解其特定交互的网站。
• UI 软件技能：前面两个属于 UI 设计技能中的「软知识」，要把头脑中的想法落地，还需要学习掌握 UI 设计相关的软件硬技能。

UI设计技能，使用 MindMaster 绘制

UI 设计软件

目前可用来完成 UI 设计的软件比较多，大概可以分为 3 类：

• 纯 UI 设计软件：Sketch、Adobe XD
• 综合型 UI 设计软件：Figma、Pixso
• 辅助 UI 设计软件：Zeplin、Principle、Ps、Ae、C4D 等

纯 UI 设计软件，可用来完成大部分 UI 设计工作，在平时的设计练习或个人项目的场景没有任何问题，但如果是涉及多人协作的项目，需要历经多次沟通，对最终交付的稿件有更高的要求——需要带有交互动效或标注信息等，纯 UI 设计软件就会显得捉襟见肘，这时综合型 UI 设计软件就是更为合适的选择。

前面列出的 UI 设计软件比较多，但不要被吓到哈！软件虽多，但不需要掌握全部，软件底层的逻辑是相通的，用好其中一款，之后需要用到其他的，也可以很快上手，这里着重介绍综合型 UI 设计软件中的 Pixso。

Pixso，是一款基于云端的协同设计工具，免下载安装客户端、可直接在线使用，支持多人编辑同一份设计文件，不仅可用来进行 UI 设计，还可以完成原型设计、交互设计、设计标注等工作。

Pixso

01 Pixso 上手门槛低

如果你之前没有用过 UI 设计软件，也不用担心软件的上手难度，Pixso 的界面非常简洁，没有 Adobe 软件密密麻麻的按钮。

image.png

为了帮助新手更快地上手 Pixso，Pixso 团队提供了细致的新手指引，点击右下角的「帮助」按钮，在「学习和探索」面板可以看到 Pixso 上手教程、教程文档和用户指南，图文 + 视频多种形式的新手指引，可以满足你的不同需求。

image.png

02 多尺寸画板预设

前面说到 UI 设计主要是对软件、应用或网站中与用户发生接触的页面进行设计，页面大小必须根据用户所使用的终端或屏幕尺寸进行适配，但目前屏幕尺寸呈现碎片化的趋势，每次用到再去查询尺寸，显然效率太低。

image.png

考虑到这一点，在创建画板时，Pixso 提供了多种尺寸的画板预设，包含各种型号的 iPhone 和 Android 手机、平板、电脑、网页、幻灯片、智能手表、印刷品等，让你创建项目时不再纠结于选择哪个画板尺寸。

image.png

03 内置多款免费可商用字体

Pixso 内置了多个免费可商用的中文字体，例如 Google 的「思源黑体」，站酷网的「站酷快乐体」，江西拙楷体等，无需手动安装即可使用，应用到商业设计项目中无侵权风险。

image.png

如果 Pixso 内置的云端字体库不能满足你的需求，你还可以安装「字体助手」控件，从本地导入电脑上安装的字体，给你的设计字体提供更多样化的选择。

image.png

04 团队组件库，便捷共享团队资源

传统的 UI 设计软件大多都是基于本地的客户端，没有云端同步功能，团队内部共同的设计文件或素材，往往要通过 U 盘或网盘传输。

而如果是使用 Pixso，可以点击 Pixso 工作台左侧的「创建团队」，在 Pixso 中创建一个「团队共享空间」，将团队常用的文件或素材上传到共享空间，加入空间的成员就能看到共享的文件。

image.png

对于设计过程中经常会用到的组件，可以使用「团队组件库共享」功能，将这些高频使用的组件，发布为团队组件库。

之后团队成员在不同页面或项目中，就可以调用来自团队组件库的组件，既可以让页面的视觉设计保持统一，还能在组件库的样式发生更新后，保证调用的组件实例也会自动更新。

image.png

05 自带标注切图，无需借助外部工具

Pixso 自带标注切图功能，可以在设计稿中直接查看标注信息，无需将文件导出到本地，再上传到 Zeplin 等第三方工具获取标注信息。

打开右侧栏的「代码」面板，选中任意元素，就能看到相应的属性和 CSS 代码，另外按住 Alt/Option 键，也可以快速获取元素距离容器的相对位置。

image.png

前端工程师如果想要复制相应的代码，将鼠标移动到 CSS 代码上方，顶部就会弹出隐藏的「复制」按钮。

image.png

导出切图方面，点击右侧面板的「设计」选项卡，在面板底部可以看到「导出」的选项，支持导出不同的倍数。

如果同时选中多个元素，再点击右侧的「导出已选项」按钮，就可以批量导出多张切图。

image.png

此外，基于 Pixso 云端实时更新的特点，后续设计文件发生修改，对应的标注信息也会随之自动更新，整个过程是静默完成的，完全无需手动操作。

06 安装 PWA 应用，每次使用快速打开

Pixso 是一款基于云端的设计工具，直接打开 Pixso 官网就能使用。

如果你觉得每次使用要打开浏览器有些麻烦的话，也可以选择下载 Pixso 的客户端，打开客户端就能启动 Pixso，目前客户端支持 Windows 和 macOS 系统。

image.png

此外，由于 Pixso 是基于 Web 技术开发的网页应用，属于 PWA 应用（渐进式 Web 应用），点击浏览器地址栏的「安装 Pixso」，可以安装 PWA 版本的 Pixso。

image.png

安装了 PWA 版本的 Pixso 后，打开的 Pixso 页面会从浏览器单独分离出来，如下图所示。为了方便之后快速打开 PWA 版本的 Pixso，我们可以右击任务栏的 Pixso 图标，选择「固定到任务栏」。

image.png

这样即便我们关闭了当前的窗口，Pixso 图标还是会显示在底部的任务栏，下次使用点击 Pixso 图标就能快速启动。

image.png

07 Pixso 个人版永久免费

Pixso 承诺对所有个人用户免费开放，现在前往官网注册账号，可以享受到 Pixso 的所有功能：无限文件数量、无协作者人数限制、无限云存储空间等等，快去尝试一下吧！

以上，希望有帮助。

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

效率工具指南：致力成为国内优质的工具测评媒体。