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

规划设计完 Wireflow 产出关键蓝图规格稿之後，基本上已经完成了整个产品的骨架。接着就是要根据 UX Persona 的输入，以此目标族群会喜爱的视觉风格，进一步设计出完整包含视觉感受的图形介面。此阶段所耗费的工时成本往往相当高，故我们都会在前期的几个阶段 (Flow Chart, UI Flow, Wireflow) 尽可能协助 PO / PM 或业主收敛并确认想法之後，才进行 GUI 的设计。如果在此时还处於发散的天马行空阶段，大家都要你先设计一个出来看看感觉再做调整，那麽往往将会面临难以结案、离以验收，并且事倍功半的窘境，这点我们要特别小心。

GUI design 的阶段，主要会产出三项成果：

1. Mockup 视觉设计稿
2. GUI Style Guideline 设计元件样式指南
3. GUI Spec & Assets 图形介面规格与切图资产

前两项通常会於介面视觉提案时一起产出，故今天我们先说明第 1 及 第 2 项，下篇再来说明第 3 项。

Mockup (视觉设计稿)

Mockup 要能够传达出产品最终的画面会长成什麽样，简单来说就是这份文件所绘制的画面都跟真的几乎一样，只差他还无法动起来。

大家在 Behance、Pinterest、Dribbble 上常看到设计师展示的设计作品页面，就是 Mockup。以下是一个 RWD Web Mockup 的例子，注意他已详细地将未来开发完成後，每一个宽度的页面应该要长成的样子都绘制出来，将每个细节都设计好，包含字型、字级、色彩、icon等。

参考来源：Nicepage

GUI Style Guideline (UI 元件样式指南)

当设计出的 Mockup 精稿页面很多的时候，一来设计师有时会不小心迷失在一张张单张的视觉设计稿中，见树不见林，或设计出来的 UI 元件不太一致。二来前端工程师在实作的时候与我们设计时来回反覆调整的逻辑不太一样，他们其实是使用 CSS 等方式，以模组化、语意的方式 Top-Down 撰写程序码，如此便能跨不同页面套用相同的模组化设定，消除不一致的状况，且以工程的角度来看更易於日後的维护与修改。

基於以上二点，我们除了提供 Mockup 设计精稿之外，最好也能整理一份 GUI Style Guideline，一来帮助设计师自己检查各别单张的视觉设计稿中不一致的地方，二来也让前端工程师写 code 的时候更方便能够使用。

GUI Style Guideline 没有一定的做法，不过一般而言，都会整理出一份会用到的颜色、样式、字型字级大小，及相关会重覆使用到的 GUI 元件，一些常见的行为状态 (如 Hover / Disabled) 也会标明出来。

参考来源：christiandorian

Mockup 一般来说都是拿来向业主、 PO (Product Owner)提案用；Style Guideline 则主要是给工程师模组化开发参考使用，但在提案的时候也经常会附加在 Mockup 之後，用於展示并说明整体元件的风格。