Day 15 UI wireframe 线稿的制作经验与技巧分享（和实际踩过的雷！）

来找设计师一起 side project，前後端 / UIUX 皆可喔~
配对单连结：
https://docs.google.com/spreadsheets/d/1-6YCUfqaB7dQLQa34pbuCHgYvXU3eYZ0dvDcPszhE4g/edit?usp=sharing

印度气象局官网：https://mausam.imd.gov.in/#.

prototype 大家自己玩玩看，应该会每天更新ㄅ
(好ㄉ今天昨天都没有原谅我呜呜)：https://xd.adobe.com/view/bd7fd57a-8e2f-44b0-bc26-322e98708133-e82c/

HI 大家，今天还是严重睡眠不足，为了活命先贴个以前刚学 XD 时写的 wireframe 心得～

主要分享的主题是：wireframe 线稿的制作和技巧分享，也包含我一开始所踩过的雷，底下均是个人经验分享。

我一开始从网页设计师转职为 UIUX 时，有自修了一些线上课，在这些介面设计学习历程中，我觉得一开始遇到最大的问题和学习点是「绘制线稿 (wireframe)」，而我猜这大概是所有初阶的UIUX 设计师学习过程中阵痛期颇久的技能（但这个技能熟悉之後就驾轻就熟了）。

尤其是将自己不甚完美的 dirty prototype 转为实质软件介面，再转为 mockup 时画面上的巨大落差和不适应感，可能有点类似於将设计稿转为前端画面（笑）。

OK，好不容易结束需求确认和资讯结构的部分，先别急着开始制作 wireframe，首先要注意一些前置作业，因为它会影响到你的 wireframe 和之後的工作流程。以下是我在做头几个 wireframe 所遇到的一些挫折和反省，希望可以帮助到所有刚刚进入 UI 领域的朋友。

第一、不要使用任何颜色在你的线稿中

第一个，不要使用任何颜色在你的线稿中（除了线稿本身的颜色）

我在一开始的线稿中的确有犯这个错误，一开始的线稿总是会急於上色，比如之前在制作四个气象软件的线稿，等不及全做完就先进行配色，事後重工了不少。上色後的成品的确是比较好看，但事实上当色彩缤纷後就是各种灾难的开始。

最主要的原因是，颜色会模糊了各阶层的清晰度。

我阅读到 ux movement 里的一篇文章 How to Communicate Visual Hierarchy on Wireframes （https://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/）

里面有说明当其他元素都是黑白时，很容易感受到线框稿上彩色元素的重量（weight）。

但是将线框稿转换成 mockup 时，你是无法知道该元素是否有一样的清晰度和重量的，这是因为精稿中也会有很多不同的颜色，线稿中的任何有色元素的清晰度就会散失掉，所以当其他页面元素也上色後，他原本的视觉重量就会减轻。所以千万不要使用颜色来弥补你设计的不足，就算没有颜色，线稿还是应该要看得出非常清晰的层次。

ps. 但是相同明度不同色相的颜色，将他们饱和度降低後其实是有点不同的，比如说黄色和蓝色，之後爬完文献後可以

第二、过多或过少的色票

第二个，我想要分享的 wireframe 失误是「过多或过少的色票」，这真的造成很多制作精稿上的麻烦。

一开始在制作线稿的时候，我设计了非常多层的颜色，因为我总觉得每个不同的功能、相异的属性就是要给他们一点「特殊的凸显」，所以我设定了大概有九个不同的黑、深灰、和浅灰色在色票中，这导致我在後期配色的时候非常的困惑，而且还会发生「明明是同样阶层的元素，但被我用了不同色」，原因只是两个色票看起来太相近（且太不必要）。

如果你参考 Adobe 的 UI Kit ，你就会发现他其实也只使用了五种颜色。再者，如果你去看 Adobe 系列超级完美的软件介面设计，如 Photoshop ，你会发现在这极其复杂的介面中，他也大概用了 6 种灰黑色，顶多加上一两个 highlight 用的亮蓝提示色。事实上，我觉得这个就是软件介面设计的精髓和目标！

况且，使用者根本不会那麽在意这些按钮到底阶层如何，他们只想快速的找到他们要找的东西。如果你放太多不同深浅的阶层，其实会导致更多的疑惑。

比如说「设定图表排序」、「图表绘图类型」、「图表输出格式」，这三种的阶层性还真的因各种使用者而异，想要制作透明背景的人会自动聚焦在「图表输出格式」、而想要知道最大降雨值的人只会扫描「设定图表排序」这个选项。

所以差异不太多的话就省掉这点力气吧～

总之，看了一些设计不错的软件後，我觉得最好的 wireframe 颜色数量可能尽量控制在 4-7 个，过多会混乱，过少会无法展示出阶层性 – 一个最深色、一个是最浅色、中间三个是过渡色。

次深色有时会被拿来当作副标题，或是各种提示文字与框线，而次浅通常被拿来当作浅灰底色（灰色在上色的时候可以加一点点色调，比如脸书的背景色，是很漂亮的带蓝调灰色）

第三、谨慎的规划线稿与精稿的颜色共用

当 wireframe 许多元素共用同一颜色时，转成 mockup 的时候就会是一场小小灾难。尤其是当页面的颜色比较多的时候，有做过复杂UI的网页设计应该很清楚 ^^

当初在做我们气象团队的官网时，我没有注意到有一些 border 是共用到对话色块和文字颜色，所以当我要把边界换成红色的时候，所有字体和对话方块的颜色也一起变红了，最後还是比较大规模的手动把它调整回去，真的搞得我满崩溃的哈哈。

说实话，我到现在还蛮常吃这个亏，好像也没有一个比较好的解法，制作 wireframe 时颜色分布考虑总是不够充足。虽然没什麽十全十美的方法可以解决他，但我还是有两个小小的设计细节微调：

1. 事先完善区分「文字、边界跟背景」的颜色
   对，仅仅文字、边界跟背景！
   可能是因为这三者几乎占了页面中 80% 的位置，我发现只要做到这一点，会省掉百分之 80 之後的调整困难，非常值得一试。

2. 第二、相同配色中，再增加一个颜色相近的色票。这个算是我最近正在尝试的方式，比如说 #080808 & #070707，两者都是深黑，我会在笔记本上做个记号去区分色票到底套用到哪一个地方，虽然投入的时间成本会增加，但如果遇到比较大型的软件介面还真的会轻松很多
   （尤其是同时要制作 bright / dark mode ，色票共用率真的满惊人的也很难调整，这时也许就会派上用场）。

第四、找寻一个令你全身舒畅的线稿色系

我原本以为线稿色系无关轻重，但後来发现满重要的（跟工程师的程序写作习惯一样）。

一开始在画线稿的时候，我有下载 Adobe XD 的 UI Kit 来做参考，而 XD 预设是这种偏明亮的淡蓝色，包含所有的线段与底色皆采用一样的色相，但不同色阶和饱和度（讲简单点就是在底下这条线上移动）。

虽然 Adobe XD 是各种不同的浓度的淡蓝色，但我制作了几个线稿之後，还是转移为使用灰黑色系为主。

1. 我做的气象软件介面主色调用到了蛮多蓝色系，很容易与 wireframe 的蓝色做混淆，从 wireframe  转为配色的 mockup 过程就会有一点问题，所以後来就倾向用完全没有饱和度问题的黑色系，也意外发现这样的线稿呈现方式，反而会更贴近完整精稿一点。

2. 使用灰黑色系的最大优点是「看久了比较不会眼睛疲劳」。我觉得Adobe XD Kit 预设的的蓝色其实相当的明亮，我又是一个重度近视加散光，有时候将画面放到200%在雕刻 icon 或是细节时，大面积的蓝色和亮白真的还蛮痛苦的，转成深黑色系的确改善很多，一样是近视眼或重度散光的设计师朋友可以试试看。

（但这方面就因人而异，你也可以试试看芭比粉，也许灵感源源不绝XD）

最後一个重要提醒，大方向先、细节後

最後，一定要先确定线稿後，再进行配色和後续调整等细节，如果是一系列的软件产品，也尽量在所有 wireframe 结束後再统一制作 mockup。

我觉得在做 wireframe 的时候，一定要很清楚的知道你画面中各个元素安排的位置，也就是说，不要跳过 dirty prototype 的阶段，因为这样之後再调整真的...很累。

比起单一颜色的 wireframe，你在调整「上色元素」的视觉阶层时，那就会需要考虑更多因素，这时你心中可能会被各种变因干扰，充满大量的问题：

「这个红色也太饱和，他放在这个地方对吗？还是左边一点？大一点呢？还是给他阴影？」

「这个 icon 蓝底白字能不能够吸引使用者点击？还是要白底蓝字？需要边界吗？icon要小一点吗？」

「测站选择前面加个橘色表头好吗？还是蓝色？这麽粗好看吗？还是...要加方形？」

等等诸如此类的问题，充斥着各种排列组合。
但当 wireframe 已经确认过後再进行配色，这些张牙舞爪的问题就会 downgrade 成为：

「这个红色也太饱和，要不要...调淡一点？」

「这个 icon 蓝底白字能不能够吸引使用者点击？还是要...绿底？」

「测站选择前面加个橘色表头好吗？还是...红色？」

因为人的大脑并没有办法一次处理太多事情，所以我觉得这些经验总结一个蛮大的启示 – 请将所有的颜色放到最後一步再调整，这时一切都变得合理简单，逻辑也顺畅多了。

你可以在纸上实践 dirty prototype ，我真的酷爱a4纸，我觉得比起在画面上移动各种元素，真的是一个很好的制作原型的工具，在纸上涂涂画画反而更有创造力，而且因为纸可以折叠，所以可以轻易模拟点击的状况，这真的会帮你省了很多时间（至少我觉得 UI 软件在做效果还是会花上不少时间）。
我会使用纸质的 prototype 给气象局公务员操作气象查询介面，不仅可以直接看到回馈，也增加了一点儿人情的乐趣 XD

纸质的 prototype 分享

ipad prototype 分享

希望今天的分享对初学 wireframe 的人有点帮助，如果有更多建议也可以留言告诉我喔~~~