Day 18. UX/UI 设计流程之五：GUI Design (下)

上篇说明了 GUI 设计里包含的二个项目：Mockup，以及 Style Guideline。这篇我们接着说明最後一项。

GUI Spec & Assets (图形介面规格与切图资产)

Mockup 一般来说都是拿来向业主、 PO (Product Owner)提案用；Style Guideline 则是给工程师模组化开发参考使用。不过当实际深入到开发的细节中时，单单只靠 Mockup 及 Guideline 其实还是不够的，工程师们还会需要明确每一个像素尺寸距离、颜色色码、各字级的文字样式对、甚至是行高、阴影等设定，让他们能够以 CSS / JS 等网页技术，完美还原我们的设计，需要的依靠的文件就是 GUI Spec。

另外，有些无法以程序直接绘制出来的东西，比如说一些图形、标准字logo、影像等，则会需要设计师将这些图「切」出来给工程师，我们称他为 GUI 资产 (GUI Assets)，也就是大家常听到的「切图」。

在多年前 UX / UI 设计领域还没有这麽多工具的时候，切图 跟 GUI Spec 是需要由设计师手动一个个将图切出来，以及一一手动量测标示，相当费时：

现在有许多工具，例如 Zeplin，甚至 Figma、Adobe XD 这些设计工具本身就可以很方便的切图及制作 GUI spec：

值得注意的是，工程师在实作开发上其实是有一些限制的，很多我们设计师用原型工具做的出来的效果，就以为很容易就可以实作，其实不然。所以很需要好好的尊重彼此的专业。我也会建议设计师们有空的时候，可以学一些基本的技术，目的不是精要能够转职工程师，而是理解一些实作原理与限制，之後在做设计交付的时候能够多体贴工程师一点，尽量别设计出实作上太过困难甚至不可行的 GUI 设计。当然，平时工作之余也可多跟工程师们互相交流，增进彼此的理解。

好的，透过这二篇理解了整个 GUI 设计的观念後，从下篇开始，我们便会开始使用 Figam 软件，着手设计 GUI.