前端Ui设计工具

PS 稿、蓝湖、Sketch 和 Figma 前端 UI 设计工具的对比分析

1. PS 稿（Adobe Photoshop）

• 提供精准设计细节：PS 稿能让前端更精准地理解页面布局、元素尺寸、颜色等，通过精确测量和查看信息面板，把握设计元素的空间关系、色彩搭配和视觉层次，有助于在开发中忠实还原设计稿。
• 利于图像资源处理和视觉优化：前端可利用 PS 进行网页切图，提取图标、按钮等素材，还能运用路径绘制、形状工具、滤镜和色彩调整等，对网页视觉元素独立优化，如调整图像色彩平衡、对比度，制作简单自定义图标和装饰元素。
• 助力交互效果原型制作：借助 PS 的图层样式动画、时间轴等功能，前端能快速制作带有动画效果按钮、悬停图像变换等创意交互效果的初步视觉原型，为讨论交互细节提供直观参考。

2. 蓝湖

• 便捷获取标注和切图：前端开发者可直接在蓝湖中获取设计稿的标注信息和切图资源，包括元素的尺寸、颜色、字体等详细信息，减少了手动测量和切图的工作量，提高开发效率。
• 自动生成代码：蓝湖可以根据设计稿自动生成相应的 CSS 代码，虽然生成的代码可能需要进一步调整和优化，但能为前端开发提供基础框架，减少手动编写代码的工作量。
• 便于团队协作沟通：团队成员可以在蓝湖的设计稿上直接发表评论，方便设计师与前端开发者实时沟通和反馈，及时解决设计和开发中的问题，确保设计与开发的一致性。

3. Sketch

• 专注 UI 设计，方便搭建界面：Sketch 专注于 UI 设计，有简洁易用的界面和丰富的 UI 设计组件，如按钮、文本框、图标等，前端能快速利用这些组件搭建界面原型，了解页面的整体布局和交互效果。
• 设计稿转换代码便捷：通过一些插件或工具，Sketch 的设计稿可以方便地转换为 HTML、CSS 和 React 等前端代码，而且能较好地保留设计细节，如颜色、字体、间距等，前端开发者可以在此基础上进行进一步的开发和调整。
• 适合 Mac 用户：Sketch 主要运行在 Mac 系统上，如果前端开发人员使用 Mac 电脑进行开发，Sketch 与系统的兼容性较好，使用起来更加流畅和稳定。

4. Figma

• 实时协作提高效率：Figma 支持多人实时在线协作设计，前端开发者和设计师可以同时在一个设计稿上进行操作，实时看到彼此的修改，方便及时沟通和调整设计方案，大大提高了团队协作效率。
• 跨平台使用方便：Figma 是基于云端的在线设计工具，无需安装，只要有浏览器就可以使用，方便不同设备和操作系统的前端开发人员与设计师共同参与设计，不受平台限制。
• 丰富的社区资源：Figma 拥有庞大的社区，用户可以在社区中分享和获取各种设计资源，如插件、组件、设计模板等，前端开发者可以利用这些资源快速搭建页面，提高开发效率。

总结：
推荐 Figma(Figma 则以实时协作和跨平台使用为主要优势) > 蓝湖(蓝湖侧重于团队协作)

Figma-mac前端开发常用快捷键

1. 搜索 command + /

Tools

1. 添加/显示评论 c
2. 吸取颜色 control + c

View

1. 显示/隐藏界面 command + \

Zoom

1. Space：按住空格键可临时切换到抓手工具，用于平移画布。
2. + / -：放大或缩小画布
3. command + 0 : 放大到 100%
4. shift + 1 : 缩放至适应画面
5. shift + 2 : 放大至所选区域
6. n : 下一帧
7. shift + n : 上一帧
8. fn + 向上/向下 : 上一页/下一页

Copy

1. 复制 command + c
2. 复制为 PNG 图片 shift + command + c