建筑规划之于建造房屋，就像线框图之于设计用户界面一样。线框图是我们将工作固化到代码中之前试验想法、可视化概念和获得有价值反馈的一种方式。
先从画草图开始!
当你坐下来开始设计一个网站或应用程序时，你可能会很想直接打开Photoshop，马上开始处理颜色和阴影。这几乎就是一个错误！
Photoshop优先的方法有两个问题：
1. 你几乎总是在浪费时间
不管你用Photoshop的速度有多快，它都不可避免地比仅仅勾画出一个想法要花费更多的时间。在现实中，你可能在Photoshop中完成一页之前就能勾勒出50个想法。我说的不是像伦勃朗作画那样勾勒——只是粗糙的线条、方框和箭头。
2. “视觉蜜糖”可能会掩盖结构性问题
人们不喜欢在看起来已经完工的屏幕上给出反馈。你投入的时间和精力越多，别人要求你重做的可能性就越小。它还将反馈的范围限制在颜色或对齐等肤浅的选择上。在完成基础性工作并达成一致意见之后，就应该开始进行改进了。
边注：有时线框中的拼写很重要。这取决于你把它给谁看，有些人就是无法忽视拼写错误。
构思与验证
线框图从简单的草图开始，随着时间的推移而发展，当从同行和用户那里得到反馈时，将能获得更高的视觉保真度。
在设计过程中，你可以以两种方式使用线框图。
首先是构思(发现）
这就是我们使用线框图来探索和可视化我们的思维的方式。你可能会有一个在你看来很神奇的想法，但当你向别人解释它的时候，它就开始崩溃，你忘记了是什么让它看起来如此美妙。
当一个想法突然出现在你的脑海里，它往往会成为海市蜃楼。你以为你可以看得很清楚，但直到你试着把它变成焦点，你才会注意到细节的缺失。把想法留在脑海太久的危险在于，你开始过多地关注这个想法给你的美好感觉，而不是把它变成现实的可行性。(这种现象被称为“脑裂”。)
下次当你有一个网站或应用程序的想法时，试着用一个快速的草图(或一系列的草图)来捕捉它。屏幕是什么样子的?文本写了些什么?有导航吗?如果有，是在左边还是右边?一旦你有了最初的想法，开始探索变化和改进。
构思线框图应该:
- 快——试着跟上你的创造力
- 协作——分享你的工作;让其他人参与进来
- 数量众多——纸和墨水很便宜;拥抱“数量”
- 运用手绘或非常非常简单的数字模型
- 可用于反馈
其次，你可以使用线框图进行验证(细化)
在你找到了你的想法的基本结构和方向之后，是时候改进它了。现在，在你开始做出更小、更有针对性的改变时，可以在得到反馈之前花更多的时间来完善每一个修改。
验证线框图应该:
- 是黑色，白色或灰色阴影。现在还不是进行视觉设计的时候。
- 有更高的保真度。开始考虑位置、层次和内容。
- 是计算机生成的。
一个好的线框图的8个特点
现在让我们来看看什么是好的线框图，不管它是用于构思还是验证。
1.它能促进交流
创建线框应该是一项团队运动。每个人都可以勾画出一个粗略的想法，而在视觉上分享一个想法比试图解释它要快得多!把草图公布于众，把它们挂在墙上，讨论它们，用便利贴把它们盖起来，然后根据讨论的结果再画一张。
2.它不使用颜色
线框图不应该使用颜色，它们故意保持“粗糙”。把线框图想象成产品的x光片。所以不应该有衣服、皮肤、帽子或头发!有时作为一个设计师，很难分享那些感觉“未完成”的作品。但是要认识到你所展示的不是最终版本，你更有可能获得建设性的、有意义的反馈。
3.它是简单的，不含有高级视觉形式
现在也不是把你的按钮弄成斜角或者添加花哨字体的时候。保持你的界面简单和标准化。使用默认的系统下拉菜单、搜索框、按钮、文本和导航。
4. 它首先是为手机设计的
我们的设计很少只出现在大的电脑屏幕上。很有可能，你的设计需要在手机屏幕、平板电脑屏幕、老式投影屏幕，当然还有大的电脑屏幕上工作。那么为什么不先为手机设计呢?为小屏幕设计让你专注于本质;这意味着你必须做出艰难的决定，什么是最重要的，因为屏幕的空间是有限的。
一旦你完成了手机屏幕设计，就很容易“逐步增强”你的设计，因为你有更多的空间。相反，如果首先设计大屏幕，要把你的大想法压缩到一个小屏幕上是很棘手的。
5. 它使用实际文本（没有占位符和乱数假文）
为什么用户会访问你的网站?是为你的界面还是为你的内容?虽然有时设计师喜欢认为是为了他们的设计，但事实并非如此。内容是用户想要看到的;它应该有助于你设计线框图。
6. 它有基本的注解
线框图应该为自己说话——它们不应该要求你为它们解释和倡导。一旦你的设计建成并投入使用，你就不可能站在每个用户的家里告诉他们它是如何工作的。
使用简单的注释来指示在静态绘图中可能不明显的任何行为或功能。
7. 它是基于网格的
在网格上进行设计是一个好主意，主要有两个原因。首先，它帮助你保持直线和层次一致。其次，对于开发人员来说，在网格上进行设计更容易。
8. 最后，它可以被批评而没有后果
重要的是，不要把线框图当成一件艺术品，或者你自己的延伸。这就是为什么你不应该在每一个线框图上面投入太多时间的部分原因。对反馈保持开放的态度，保持你的观点。
8个让你行动起来的UI原则
最后，除了用户测试和同行评审，我们评估线框图的另一种方法是参考设计最佳实践和可用性启发。下面绝不是一个完整的列表，但希望它足以让你开始行动起来。
1. 用户的注意力和时间有限
你的用户并不是坐在一个安静的房间里专注于你的网站。他们要么站在火车上，要么坐在电视机前，要么在工作中被打扰。
回看你的线框图，问问自己:
- 用户完成这个任务需要多长时间?
如果他们中途被打扰或分心了，当他们回来的时候，他们还能再继续吗?
注意事项:
- 试着把一项很长的任务分解成可操作的步骤。
- 让用户清楚地知道他们目前处于哪个步骤，还有多少步骤可以实现他们的目标。
- 允许用户保存当前进度。可以用一个书签，一个清单，一个购物车，一个保存按钮，甚至只是自动保存他们的进展。
2. 尽量减少使用者使用短期记忆的需要
人类的短期记忆不是照相式的，而且当你考虑到一个人有限的注意力广度和每天使用的大量应用程序时，他们需要费力记住你的应用程序界面的细微差别也就不足为奇了。
回看你的线框图，问问自己:
- 要成功完成此任务，用户需要知道或记住哪些屏幕上没有的内容?
注意事项:
- 将导航列表保持在七个项目之下。大多数人脑中无法同时处理七件以上的事情。
- 确保用户在需要时能够访问相关信息。
- 允许用户查看前面步骤中输入的信息。
- 确保帮助和说明是内联显示的，而不是隐藏在站点其他部分的不同屏幕上。
- 明确用户是否处于特定模式。例如，他们是否已登录?
3. 识别而不是回忆
与上述原则相联系，用户更善于识别他们想做什么，而不是记住他们能做什么。
回看你的线框图，问问自己:
- 哪些功能、功能或动作不能立即被用户识别?
注意事项:
- 确保你的图标的含义是非常明显的，或者它至少要有一个标签。如果你不确定，测试一下。你会惊讶于人们理解图标的所有不同的和意想不到的方式。
- 向用户显示他们的选项。不要把功能隐藏在下拉菜单、汉堡按钮或设置屏幕后面。不要强迫用户记住你把东西放在哪里了。(一定不要用下拉菜单)
- 当向用户显示可供选择的选项列表时，尝试给他们一个支持文本标签的可视预览。例如，为购物车中的产品添加产品图像，或在名称列表旁边配上相应照片。
- 使用面包屑导航和清晰的标题，让用户清楚地看到他们在站点层次结构中的位置。让用户清楚他们在你的站点上的位置，这样他们就不必记住他们是如何到达那里的。
4. 视觉层次和内容结构
人们常说“在网络上，用户不阅读”。这并不正确。事实是，用户通常带着问题或目标访问站点。他们会很乐意阅读任何能回答他们问题或让他们更接近目标的东西，但不会有时间去读那些不能或不愿读的东西。
当用户进入你的网站时，他们会快速浏览网站，寻找线索，找到他们要找的信息。他们会忽略任何与他们的目标无关或过于复杂的事情。我们可以通过适当的格式和结构化我们的页面来帮助他们。
回看你的线框图，问问自己:
- 为什么用户可能会访问这个页面？
- 他们需要什么问题的答案？
- 他们想要达到什么目标？
注意事项:
- 标题要清晰、突出、切题。
- 在适当的地方使用项目符号、编号列表和表格。
- 适当地格式化电话号码等信息，以便一眼就能识别它们。
5. 使文本易于阅读
现在我们知道用户确实会阅读，那就想办法让他们更容易地阅读。
回看你的线框图，问问自己:
- 如果我不得不读这篇文章和许多类似的文章，我会头痛吗?
注意事项:
- 确保所有设备类型的行长度都是合理的(不太长，也不太短)。
- 使用清晰易读的字体，字体大小为16px或以上。
- 确保文本和背景颜色之间有明显的对比。
- 不要把大段文字居中对齐，也不要“两端对齐”。
6. 不同的屏幕尺寸
你不能控制你的用户拥有什么设备。你无法控制用户选择给你的界面多少屏幕空间。所以不要尝试。
回看你的线框图，问问自己:
- 如果用户的设备比我当前的设计更小，会发生什么?
- 如果用户的设备比我当前的设计更大，会发生什么?
注意事项:
- 响应式或适应性设计。
7. 预防错误
有时会出错——这是不可避免的。有时是网站的错;有时是用户的错误。不管谁是错的，作为一个设计师，你可以做一些事情来减少挫败感。
回看你的线框图，问问自己:
- 如果用户做了一些意想不到的事情，会发生什么?
- 如果系统崩溃或不稳定，会发生什么?
注意事项:
- 当风险较低时，我们学得更好，探索得更多。帮助用户轻松地从错误中恢复。
- 如果系统出了问题，向用户提供清晰、及时的反馈，解释问题。
- 提供足够的信息，以便用户自己诊断并从错误中恢复，而不需要联系客服。
- 如果需要联系客服，请将联系方式放在显眼的位置，并提供帮助用户向客服解释问题的信息。
8. 一致性
当用户遇到不熟悉或意外的情况时，他们会感到不舒服。你的应用程序应该与它本身和其他做类似事情的应用程序保持一致。
回看你的线框图，问问自己:
- 用户在我的界面上可能从未遇到过什么?
- 用户以前是如何完成这个功能的?他们期待什么？
注意事项:
- 不要为了“聪明”或“花哨”而去创造。
原文链接：https://medium.com/beakerandflint/interaction-design-starts-on-paper-a2baa91acc45
翻译：马克笔设计留学
如果对于设计专业留学和作品集有任何疑问，可以随时和我们联系，微信：13718574833，知无不言言无不尽！
