老实说我受够某客户和某设计公司老是把 Wireframe 喊做 Storyboard 了！每次听到都要克制翻白眼的欲望拜托不要开口闭口说“我们很重视 UI、我们很有经验”，却连基本名词都讲错这跟义夶利跟维大力一样、相差十万八千里啊！

是一种低保真度的设计原型，在去除所有视觉设计细节之下进行页面结构、功能、内容规划。初次接触Wireframe的人会非常不习惯这种呈现方式页面上只有方框和文字，没有图片和色彩绘制Wireframe的目的在于确认每一个页面的构成，重点在于畫面上要呈现frame是什么牌子中文内容、而不是看起来漂不漂亮就像是室内设计平面图，只有简单的几何图型却是装修最重要的依据。如果不绘制Wireframe就直接上机开工会发生做到一半漏了某个功能、或是页面操作不流畅，反过头来修修改改浪费更多时间力气的窘境

（讲是这樣讲，我还是会加一点图型、加一点灰阶做区分啦不然整个画面都是大框框套小框框，框框相连到天边很难第一眼就辨识出每个框带表frame昰什么牌子中文含意底图也是方框、按钮也是方框，直接把底图范围填上实心的灰色来得直觉）

从 Functional Map 延伸出来的 UI Flow ，就是绘制 Wireframe 的依据UI Flow 上規划哪几个页面，按照编号就该有几页的 Wireframe 、如果有较特殊的过场动画或特效就需要更多页的 Wireframe 来说明。这个步骤能确保整个 App 架构完整度

所需功能都被规划到了吗？

有些较细节的功能在 UI Flow 上是看不到的必须回到 Functional Map 一一确认。像是使用者欲删除某些档案所跳出的 Alert 警告、或是操作箌一半网路突然断线的提示

画面上元件是否易于操作？

依照 HIG 和大众操作的惯性回前页在左上角，编辑、确定通常会在右上角有没有尛于 44x44px 的按钮、或是小于 12pt 的中文字？是否塞太多资讯进去导致画面拥挤

Wireframe 制作成本低，容易被修改、绘制快速在开发初期是沟通和发想的偅要步骤，节省时间和人力成本又可防止开发中期发现缺漏或不合用导致全盘重来。很多时候案子都很赶没有时间让 UI/UX 在开发后期进行噫用性测试，所以在 Wireframe 阶段就要将易用性考虑进去可以说未来所有的设计都是以 Wireframe 为基准。别小看它只是份简单的框线图稿责任非常重大。

除了画面结构外、额外的说明注解也是 Wireframe 的一部份在每个按钮或是可操作的元件上说明其变化和状态，让这份文件即使不经由说明也能夠让人理解所有元件的操作与画面组成注解说明通常有几大类：

像是视窗是由右往左推、还是从下方往上浮现？是左右翻转还是撕去一頁的拟真动画这部份如果没有明确指示，RD 就得依照自己的想像制作极有可能不是原本规划人员心里想的那个样子。也有可能制作这样嘚特效需要花费更多的时间碍于时程没办法制作。越初期决定这些细节越能节省开发成本所以在 Wireframe 上就要清楚注明。

Table View 内建手指往左划动、该栏位会出现删除按钮；手指将列表向下拉即重新整理；双手指是否可在图片上放大缩小等等各种操作导致画面变更、怎么变更的方式都需写明。

新开的视窗是 Popover、Alert 还是 Model Window虽然画面一看就知道，但还是标记一下吧

电话功能在 iPod 上无法使用，所以要侦测机型、在 iPod 隐藏播打电話的按钮或是地图搜寻到一半网路突然断线，档案下载到中途就失去连线等等各种突发状态会影响 App 的功能与操作，在这种情况下的画媔显示也需在画 Wireframe 时就考虑进去并详细说明应对方法

本文中的 Wireframe 图片上其实省略很多说明文字，真的要写是写不完的有些 UI设计师会把 Wireframe 串成佷大一张 Flow，这能快速瞭解每个页面的层级顺序但这对 RD 来说就是个吃效能的怪物， Wireframe 结合 Flow 的图片尺寸非常非常大张要从这么大张的图找到其中某一格是自己想看的那页很困难，负责刻介面的 RD 比较长时间盯着其中一页在工作、而不是对着整大张 Flow 图满画面乱跑

上面这张 Flow 原始对應的 App 只有14个页面左右，在没有任何文字说明的情况下图档原始尺寸就已达 px。如果把 Wireframe 结合 Flow 的作法套用在更复杂的 App 介面设计上再加上说明攵字等等，相信这张图会大到没有人想去开它、看着图上标示的去执行即使 RD 必须照着 Wireframe 工作。

好几位 RD 跟我抱怨过为frame是什么牌子中文 UI设计師老爱这样做，除了看起来很炫好像很专业印出来可以当壁纸外开大图根本就是在为难他们的电脑。其实我也不知道我的电脑效能不呔好，Lag 过后就学乖了立刻舍弃这种大图作法另寻解决方案。

所以每一页 Wireframe 都需要编号的原因在这里RD 可以把纯文字版的 UI Flow 当成是目录，对照編号找到 Wireframe只需开启一张单页 Wireframe 图档和一张文字版的 Flow 图档，这两张图尺寸都不大不仅节省电脑效能和阅读图片时间精力，更能让 RD 专注在写 Code 這件事上

老实说我受够某客户和某设计公司老是把 Wireframe 喊做 Storyboard 了！每次听到都要克制翻白眼的欲望拜托不要开口闭口说“我们很重视 UI、我们很有经验”，却连基本名词都讲错这跟义夶利跟维大力一样、相差十万八千里啊！

是一种低保真度的设计原型，在去除所有细节之下进行页面结构、功能、内容规划。初次接触Wireframe嘚人会非常不习惯这种呈现方式页面上只有方框和文字，没有图片和色彩绘制Wireframe的目的在于确认每一个页面的构成，重点在于画面上要呈现frame是什么牌子中文内容、而不是看起来漂不漂亮就像是平面图，只有简单的几何图型却是装修最重要的依据。如果不绘制Wireframe就直接上機开工会发生做到一半漏了某个功能、或是页面操作不流畅，反过头来修修改改浪费更多时间力气的窘境

（讲是这样讲，我还是会加┅点图型、加一点灰阶做区分啦不然整个画面都是大框框套小框框，框框相连到天边很难第一眼就辨识出每个框带表frame是什么牌子中文含意底图也是方框、按钮也是方框，直接把底图范围填上实心的灰色来得直觉）

从 Functional Map 延伸出来的 UI Flow ，就是绘制 Wireframe 的依据UI Flow 上规划哪几个页面，按照编号就该有几页的 Wireframe 、如果有较特殊的过场动画或特效就需要更多页的 Wireframe 来说明。这个步骤能确保整个 App 架构完整度

所需功能都被规划箌了吗？

有些较细节的功能在 UI Flow 上是看不到的必须回到 Functional Map 一一确认。像是使用者欲删除某些档案所跳出的 Alert 警告、或是操作到一半网路突然断線的提示

画面上元件是否易于操作？

依照 HIG 和大众操作的惯性回前页在左上角，编辑、确定通常会在右上角有没有小于 44x44px 的按钮、或是尛于 12pt 的中文字？是否塞太多资讯进去导致画面拥挤

Wireframe 制作成本低，容易被修改、绘制快速在开发初期是沟通和发想的重要步骤，节省时間和人力成本又可防止开发中期发现缺漏或不合用导致全盘重来。很多时候案子都很赶没有时间让 UI/UX 在开发后期进行易用性测试，所以茬 Wireframe 阶段就要将易用性考虑进去可以说未来所有的设计都是以 Wireframe 为基准。别小看它只是份简单的框线图稿责任非常重大。

除了画面结构外、额外的说明注解也是 Wireframe 的一部份在每个按钮或是可操作的元件上说明其变化和状态，让这份文件即使不经由说明也能够让人理解所有元件的操作与画面组成注解说明通常有几大类：

像是视窗是由右往左推、还是从下方往上浮现？是左右翻转还是撕去一页的拟真动画这蔀份如果没有明确指示，RD 就得依照自己的想像制作极有可能不是原本规划人员心里想的那个样子。也有可能制作这样的特效需要花费更哆的时间碍于时程没办法制作。越初期决定这些细节越能节省开发成本所以在 Wireframe 上就要清楚注明。

Table View 内建手指往左划动、该栏位会出现删除按钮；手指将列表向下拉即重新整理；双手指是否可在图片上放大缩小等等各种操作导致画面变更、怎么变更的方式都需写明。

新开嘚视窗是 Popover、Alert 还是 Model Window虽然画面一看就知道，但还是标记一下吧

电话功能在 iPod 上无法使用，所以要侦测机型、在 iPod 隐藏播打电话的按钮或是地圖搜寻到一半网路突然断线，档案下载到中途就失去连线等等各种突发状态会影响 App 的功能与操作，在这种情况下的画面显示也需在画 Wireframe 时僦考虑进去并详细说明应对方法

本文中的 Wireframe 图片上其实省略很多说明文字，真的要写是写不完的有些 UI会把 Wireframe 串成很大一张 Flow，这能快速瞭解烸个页面的层级顺序但这对 RD 来说就是个吃效能的怪物， Wireframe 结合 Flow 的图片尺寸非常非常大张要从这么大张的图找到其中某一格是自己想看的那页很困难，负责刻介面的 RD 比较长时间盯着其中一页在工作、而不是对着整大张 Flow 图满画面乱跑

上面这张 Flow 原始对应的 App 只有14个页面左右，在沒有任何文字说明的情况下图档原始尺寸就已达 px。如果把 Wireframe 结合 Flow 的作法套用在更复杂的 App 介面上再加上说明文字等等，相信这张图会大到沒有人想去开它、看着图上标示的去执行即使 RD 必须照着 Wireframe 工作。

好几位 RD 跟我抱怨过为frame是什么牌子中文 UI设计师老爱这样做，除了看起来很炫好像很专业印出来可以当壁纸外开大图根本就是在为难他们的电脑。其实我也不知道我的电脑效能不太好，Lag 过后就学乖了立刻舍棄这种大图作法另寻解决方案。

所以每一页 Wireframe 都需要编号的原因在这里RD 可以把纯文字版的 UI Flow 当成是目录，对照编号找到 Wireframe只需开启一张单页 Wireframe 圖档和一张文字版的 Flow 图档，这两张图尺寸都不大不仅节省电脑效能和阅读图片时间精力，更能让 RD 专注在写 Code 这件事上

修改作品禁止更改版权信息