{"action":"created","comment":{"url":"https://api.github.com/repos/xitu/gold-miner/pulls/comments/83526901","pull_request_review_id":4367590,"id":83526901,"diff_hunk":"@@ -1,293 +1,293 @@\n > * 原文地址：[Everything You Need to Know about UX Sketching](https://www.toptal.com/designers/ux/guide-to-ux-sketching)\n * 原文作者：[NICK VYHOUSKI](https://www.toptal.com/designers/resume/nick-vyhouski)\n * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\n-* 译者：\n+* 译者：Funtrip\n * 校对者：\n \n \n \n \n \n-If you’ve done any sort of serious creative work, you are all too familiar with creative block. It feels like hitting a brick wall: _None of the ideas you’re able to visualize are good enough, or can’t work in real life._\n+如果你曾经做过一些非常需要创造性的工作，那你应该很清楚在创作中遇到阻碍的感觉。这种感觉就像撞上南墙: _你想不到一个足够好的点子，或是你想到的点子根本无法在实际中应用。_\n \n-For designers, the feeling is all too familiar. However, like any complicated problem with no clear solution, a smart process can make all the differences. This is where UX sketching comes in.\n+对于设计师们来说，这种感觉再熟悉不过了。然而，任何复杂的问题都没有那么容易解决，但一个聪明的工作流程就可以让这一切都变得不同。这就是为什么我们需要为用户体验设计绘制草图。\n \n-UX sketching is a crucial, yet often overlooked, aspect of user-experience design. Sketching is a very efficient way of communicating design while allowing designers to try out a multitude of ideas and iterate them before settling on one.\n+绘制草图是一个关键点，但它却常常在用户体验设计中被忽视。草图是一种表达设计的非常有效率的方式，设计师们可以通过草图来尝试许多不同的点子，而避免沉沦于其中的某一个。\n \n-In this post, I intend to cover everything you need to know about UX sketching, including the following points:\n+在这篇文章中，我想要介绍为用户体验设计绘制草图时你所需要知道的一切，包括了下面这几点：\n \n-*   Introduction to UX sketches and wireframes\n-*   UX sketching basics, tools and techniques\n-*   Clarifying sketches with notes, annotations, numbers\n-*   UX sketching tips and tricks\n-*   Mini-methods designed to boost quality and productivity\n-*   All you need to know about Wireflows\n-*   A quick guide to UX flow sketching\n+*   介绍用户体验设计中的草图与线框图\n+*   绘制草图的基本要点、工具以及技巧\n+*   用笔记、注释和数字来阐明你的草图\n+*   为用户体验设计绘制草图时的小提示\n+*   用简单的设计方法来提高质量和效率\n+*   关于线框流程图你所需要知道的一切\n+*   为用户体验流程绘制草图的快速指南\n \n-## UX Sketching is a Two-step Process\n+## 绘制草图是一个需要两步走的过程\n \n-Many options must be considered in design, which results in the choice and the execution of _the best one._ Designers consider their options, and then proceed to work out the details, thus making UX design a two-step process:\n+在设计中你必须考虑许多不同的方案，确保最终选择和确定的结果是_最好的那一个。_ 设计师们在设计时应该先思考他们的不同方案，之后再着手于细节，因此用户体验设计应该是一个两步走的过程：\n \n ![Ux sketching](https://assets.toptal.io/uploads/blog/image/121222/toptal-blog-image-1474991007791-230ca06cc9fe1490e78fb46953ffbcb0.jpg)\n \n-In the initial step, multiple ideas are generated, but since they cannot be fully shaped, it is not uncommon for some of the elements to be incomplete or missing. The main thing is to consider different approaches and to decide which is the most efficient in the context of your task and the various constraints of the project.\n+在最初的设计过程中，你会产生许多不同的想法，但这些想法都很难成形，甚至有一些元素的残缺或丢失也不奇怪。最重要的事是你应该用不同的方法去思考，并判断哪一种在你的任务环境中最有效率，以及你的项目会遇到的各种限制。\n \n-*   **Detailization and Refinement**\n+*   **细节与精炼**\n \n-Step by step, you settle on a few promising variants and proceed to work out the specifics, thus rendering some ideas unsuitable.\n+一步一步来。选定一些看上去不错的想法并且开始着手于优化他们的细节，以此来填补这些点子中不合适的部分。\n \n-## UX Sketches and Wireframes: Introduction and Classification\n+## 用户体验设计中的草图和线框图：介绍与分类\n \n-Your wireframes may differ depending on factors such as the desired level of detail, colors and style, whether you are going to show them to someone, and so on.\n+你绘制的线框图很可能依据你的产品而有所不同，比如所需要的细节程度，颜色或风格的不同，或是你是否需要展示给某人，等等。\n \n ![](https://assets.toptal.io/uploads/blog/image/121204/toptal-blog-image-1474890673236-d74ae4998dab921752d271212847a991.png)\n \n-Good sketches will help you think clearer, find better solutions and save time.\n+好的草图会让你的想法更清晰，找到最佳解决方案，并节省你的时间。\n \n-I singled out the following sketch types:\n+我列出了下面这些不同类型的草图:\n \n-* Sketch: Idea Generation\n+* 草稿：提出构思\n \n-These are initial sketches. Lower level details are simply noted. A limited number of colors is employed.\n+这些是最初的草图版本，用于指出较低程度的细节，色彩的使用范围也有限。\n \n-I draw a lot of basic sketches to consider the problem from different angles and to consider different solutions. While drawing such sketches, I am also striving to generate as many solution variants as possible.\n+我会绘制大量简单的手绘图来以不同的角度思考问题和解决方案。当我绘制了足够多的手绘图，我也尽可能地去让这些解决方案发散开来。\n \n-At this particular step incompleteness frees my mind, which is why it is so important to avoid getting bogged down in minutiae at this stage. My goal is to generate as many ideas as possible and choose the most promising ones.\n+在这个特别的步骤里，低完成度的要求使我放开了思想，因为要避免在这个阶段陷入一些细枝末节是非常重要的。我的目标是尽可能地想出许多的点子，并选择出最合适的哪一个。\n \n-* **Wireframe: Specification, Detailed Phase**\n+* **线框图：规范的细化阶段**\n \n-I usually pick promising sketches and go over the details, after which I choose the best variant and work it out in greater detail.\n+在我选出一个最好的想法并有了大体的细节之后，我通常会挑选出合适的草图来继续细化。\n \n-However, this does _not mean every single detail_. Obvious things may just be noted. Moreover, some aspects will be difficult to describe on paper.\n+但是，这么做_并不意味着要添加上每一个细节_。很显然，有些事只要标记一下就可以了。此外，有些东西也很难在纸上被详细描述。\n \n-At this step, I draw all the _important details_, but I do not yet draw wireframes in [Balsamiq](https://balsamiq.com/). After everything is done on the paper, I start drawing in Sketch.\n+在这一步中，我会画出所有_重要的细节_，但我还并不打算在 [Balsamiq](https://balsamiq.com/) 中绘制线框图。等我在纸上把所有事都做好之后，我再开始使用 Sketch 来绘制线框图。\n \n-> Digital tools provide a lot more creative freedom than paper and you can easily shift attention to minor things. For example, you can focus on \"pixel polishing\" instead of design.\n+> 数字化的工具相比于传统纸张，为创作提供了更广阔的自由空间。并且，你可以很轻易地把注意力放到微小的细节上。比如说，相比于设计，你可以把注意力集中于「像素级的改进」。\n \n-* Visual Design Draft\n+* 视觉设计稿\n \n-This is a rarely used approach, but sometimes it can be helpful. Various visual solutions are considered at an early stage of the project, but it may take a long time to create digital sketches for all of them. That is why I draw design sketches on paper first, to consider different options and choose a visual design direction.\n+这看起来和上一步很接近，但许多时候它依然是很有帮助的。视觉设计稿解决的是帮助你在初期阶段来思考你的项目，但这也许会耗费你相当多的时间来把它们都在电脑上绘制出来。这也是为什么我首先在纸上绘制手绘稿，在思考了不同的方案之后再选择一个合适的视觉设计方向。\n \n-* **Components/Elements Breakdown**\n+* **部件/元素分解**\n \n-I find this technique useful when I have already have a general idea and I am thinking about a particular page functionality, or of the integral parts of interface components. I draw different page elements, going into detail, and then draw different possible positions of the page elements.\n+我发现当我有了一个大体的想法，而我需要考虑某一个特定页面的功能或是界面中的必要组成部分时，这个技巧就是非常有用处的了。我会画出不同的页面元素，去深入它们的细节，然后在不同位置画出这些页面元素。\n \n-Elements, even the most simple ones, must have a state; a button can be pressed and it has a hover text block that may or may not be empty. The more complex it is, the more states it has.\n+即便是最简单的一个元素，也一定会有它特定的状态；一个按钮可以被按下，一个文字框可以是空的也可以被填满。它的组成越复杂，那么它的状态也越多样。\n \n ![](https://assets.toptal.io/uploads/blog/image/121220/toptal-blog-image-1474978796798-825431fd42dbca2c9a78a5046003b9d7.png)\n \n-## Getting Started with the Basics\n+## 从最基础的开始\n \n-*   **Prepare your tools** - Find the most convenient place possible, a large table with plenty of space. Take a lot of paper and prepare some pens and markers.\n-*   **Warm up** - In order to get ready I recommend drawing some lines, circles, basic templates and icons.\n-*   **Define your goals** - Decide what you want to draw. Set your aim and decide what story you have to tell. Determine the desired level of detailing. Decide whether you are ready to draw a lot.\n-*   **Define your target audience** - If you are doing this for yourself, you don’t need to worry about the way your sketch looks. However, if you intend to show your drawings to a client, make sure you allow some extra time to add more details to your sketch.\n-*   **Set a time frame** - Having decided on the amount of time you are ready to allocate for sketching, let’s say 30 minutes, will help you focus on your work.\n+*   **准备好你的工具** - 尽可能找一个最方便你工作的地方，要有一张空间足够大的大桌子。多带上一些纸，再准备一些水笔和记号笔。\n+*   **热身** - 为了让你准备好开始我建议你画一些线条，圆形，基本模板和图标。\n+*   **明确你的目标** - 明确你想要画的是什么。 设定好你的目标并决定你想要讲一个什么样的故事。告诉自己是否已经做好准备大施拳脚。\n+*   **明确你的目标群体** - 如果你的草图是画给自己看，那你不需要介意你怎么去画这些图。但是如果你打算把你画的图给客户看，那你应该确保用一些额外的时间为你的草图添加更多细节。\n+*   **设定一个时间范围** - 决定一个时间段用来分配给绘图，让我们定个 30 分钟吧，这能帮助你专注于工作。\n \n-Now, you are all set and you can get started:\n+现在，你已经做好了准备，可以开始了：\n \n-1.  **Draw the edges** - Draw the frames, a browser or phone window, a part of the interface, and so on.\n+1.  **绘制边界** - 先画好边框，一个浏览器或是手机窗口，或是界面的一部分等等。\n \n-2.  **Add the biggest or basic elements** - Menu, footer, main content.\n+2.  **添加最大的基本元素** - 菜单，页脚，或主要内容。\n \n-3.  **Add details** - Add relevant details, but keep them simple at this stage.\n+3.  **添加细节** - 添加重要的细节，但在这个阶段仍然要让它们保持简洁。\n \n-4.  **Add annotations and notes** - These are required only if you’re planning to share the sketches. However, they can be useful even if you’re doing them for your eyes only.\n+4.  **添加注释和说明** - 只有当你准备分享你的草图时你才需要这么做。当然，即使你只为自己做设计，它们一样会很有用。\n \n-5.  **Sketch alternatives** - Sketch some quick alternatives to your solution.\n+5.  **绘制替代方案** - 为你的方案快速绘制一些替代方案。\n \n-6.  **Pick the best solution** - Choose the best options.\n+6.  **挑选出最好的解决方案** - 选择一个最优项。\n \n-7.  **Add shadow and bevel** - This is particularly important for sharing purposes. Add a shadow to make your sketch visually appealing, which is important if you plan to share it with team members and/or clients.\n+7.  **添加阴影和斜面** - 如果你打算跟人分享你的想法，这是一个非常重要的步骤。增加阴影来使你的草图在视觉上更有吸引力，这对于分享给团队成员或客户们来说是很重要的。\n \n-8.  **Save the sketch** - Take a photo or put it in a folder. I have a few paper trays on my table for sketches.\n+8. **保存好你的草图** - 拍一张照片或者把它们放进文件夹。我桌上有很多文件盒用来保存草图。\n \n-9.  **Share** - I usually use one of the following sharing methods:\n-    *   Scan sketches via [Evernote](https://evernote.com/?var=c) and provide a permalink to other team members or stakeholders.\n-    *   Take a photo and upload to [InVision](https://www.invisionapp.com/).\n-    *   Upload and map images to [Realtimeboard](https://realtimeboard.com/hello/).\n-    *   Or just _email_ a photo.\n-10.  **Review the sketches and add notes** - Take a break and then come back to your sketches a while later. Take a look at them again. Does the sketch still make sense to you? A good sketch must be easy to follow.\n+9.  **分享** - 我通常用下面这些方法来分享:\n+    *   通过 [Evernote](https://evernote.com/?var=c) 来扫描，并且提供一个永久性的链接给团队的其他成员或相关人员。\n+    *   拍一张照片并上传到 [InVision](https://www.invisionapp.com/)。\n+    *   上传并把图片关联到 [Realtimeboard](https://realtimeboard.com/hello/)。\n+    *   或者仅仅是用_电子邮件_发送图片。\n+10.  **回顾草图并添加笔记** - 稍微休息一下然后再回过头来看看你的草图。这些草图对你来说是否仍然是易于理解的？一个好的草图必然是让人易于理解的。\n \n ![](https://assets.toptal.io/uploads/blog/image/121216/toptal-blog-image-1474978448447-40701c83cf93e9be6339d4f0af43109c.png)\n \n-> If you as the designer can’t understand something you have in your sketch, then the solution won’t be successful. Either the sketch doesn’t allow you to visualize your ideas well, or the ideas are too complex.\n+> 如果连作为设计师的你都不能理解你草图中的某些部分，那这个解决方案必定不是一个成功的方案。同理，如果草图没有很好地用视觉表达出你的想法，或者这个想法过于复杂，那么这些都不是一个好的方案。\n \n-## Clarifying Sketches with Additional Elements\n+## 用附加元素阐明你的草图\n \n-Find or draw a proper sketch, and then add the following details to it:\n+找到或者绘制一个合适的草图，然后给它加上下面这些细节：\n \n-1.  **Title** - Sometimes adding a title is a good option. Write a description and date, if necessary, at the top of the sketch. The title will help you understand what you are looking at and whether or not the sketch is relevant. This is especially useful if you have a lot of sketches or you are going to show to others.\n+1.  **标题** - 有时候添加一个标题会是一个好选择。如果有必要的话，在草图顶上写上一个描述和日期。标题会有助于你理解你正在看的东西，以及这个草图是否正是你要找的。如果你有一大堆草图或是你准备把它们展示给别人，这个方法尤其有用。\n \n-2.  **Annotations** - Annotations are names and notes placed close to an element, to explain its content or other attributes. They add details that clarify other elements, and are usually difficult to draw. For example, it could be the name of the block, some interaction details, an explanation of a picture, some ideas for future design variations, and so on. You can [check out one of my examples](https://www.toptal.com/uploads/blog/image/121195/toptal-blog-image-1474538721087-70346acafa1accafd4332e733179d551.JPG) to see what an annotation sketch looks like.\n+2.  **注释** - 注释可以在一个界面元素旁命名或者做标记，你可以用它来解释内容或属性。它们用来解释那些通常很难被画出来的细节。举例说，它可能是段落的名字，一些交互上的细节，一张图片的说明，或是一些未来设计上的变化，等等。你可以[看看我的例子](https://www.toptal.com/uploads/blog/image/121195/toptal-blog-image-1474538721087-70346acafa1accafd4332e733179d551.JPG)来理解一个草图中的注释应该是什么样的。\n \n-3.  **Numbers** - Number the elements of your sketch, or the sketches themselves. You can decide how to order them (e.g., by interaction flow, the order in which you created them, etc.). It may also be useful during discussions (especially remote discussions), as your colleagues and clients can just point out the sketch number in their feedback and you will understand which one their comments refer to.\n+3.  **编号** - 为你的界面元素或是草图编好序号。你可以决定如何来为他们排序（比如，以交互流程排序，以创作顺序排序，等等）。这样做在讨论过程中可能会很有用（尤其是远程的讨论），你的同事和客户们很容易在他们的反馈中指出你草图中的序号，这样你就可以知道他们在评论哪一个草图了。\n \n-4.  **Arrows** - You can use arrows to indicate screen transitions. They can also be used to connect different parts of sketches, to indicate a sequence of actions, and so on. Since the meaning of an arrow can vary, just above the arrow you can add a description or explanation of what the arrow is meant to signify. Here is an [example](https://www.toptal.com/uploads/blog/image/121197/toptal-blog-image-1474540322164-e4037ec1b56c685056935e3deaaaa8d7.png) of a basic sketch showing a transition and several difrerent states.\n+4.  **箭头** - 你可以用箭头来指出屏幕的转换。他们也可以用来连接草图中的不同部分，或是指出交互的顺序，等等。由于一个箭头可以有多种不同的理解，因此你可以在箭头上加上一个描述或者注释来解释这个箭头的含义。这里有一个[例子](https://www.toptal.com/uploads/blog/image/121197/toptal-blog-image-1474540322164-e4037ec1b56c685056935e3deaaaa8d7.png) 展示了一个基本的草图如何展现界面转换和一些不同的状态。\n \n-5.  **Notes** - Just like annotations, notes are used to explain concepts. However, notes differ from annotations in their placement. They are not attached to an element or located near the described element, [similar to this example](https://www.toptal.com/uploads/blog/image/121198/toptal-blog-image-1474540426961-bb0363f81ef0d15fbffd1fa7f1872e98.png). Notes can be placed at the top or bottom of the page. They can even describe elements that are not included in the design, questions that you may have, general explanations, unsketched ideas and so on.\n+5.  **笔记** - 就像注释一样，笔记也用来解释你的意图。然而，笔记使用的场合不同于注释。它们不是用来附在一个界面元素旁，也不位于元素旁，[就像这个例子中一样](https://www.toptal.com/uploads/blog/image/121198/toptal-blog-image-1474540426961-bb0363f81ef0d15fbffd1fa7f1872e98.png)。笔记可以位于页面中的顶部或底部。笔记甚至可以用来描述你的设计中没有出现的元素，你的问题，全局的说明，没有绘制出来的想法等等。\n \n-6.  **Gestures** - Gestures are relevant in the case of touch device design. Drawing a hand gesture may require practice. There are several variants of gestures used to indicate different types of actions, so it is better to decide in advance how you designate a particular action (if it is not obvious, of course) and to practice drawing it.\n+6.  **手势** - 如果你在做可触摸设备的设计，那么就一定会接触到手势。画一个手势可能需要练习。有很多种不同的手势用来解释不同的操作，所以你最好提前决定你要怎么用手势来解释一个特定的操作 （如果它并不那么容易理解）然后去练习绘制它。\n \n-7.  **Feedback** - You may receive suggestions for fixing or improving the sketch after showing it to others, or after you take another look at it yourself. It is often useful to mark such feedback in a different color so as to help differentiate feedback from the original sketch.\n+7.  **反馈** - 当你把草图展示给他人，或者等你自己再多看看它们的之后，你可能需要一些建议来修正或改进你的草图。把你的反馈用不同于草图的颜色标注起来，这可以帮助你从原始的草图中辨别出反馈，这会很管用的。\n \n-You can use different colors for different types of elements. Sometimes I use black for drawings, blue for links, dark green for notes, red for titles and feedback. Try to use different colors in your sketches, but make sure your choice of colors is consistent!\n+你可以用不同的颜色来对应不同种类的元素。有时我用黑色来绘图，蓝色用来表示链接，深绿色用来做笔记，红色用来作为标题和反馈。尝试在你的草图中使用不同的颜色，但要确保你选择的颜色是固定的。\n \n ![](https://assets.toptal.io/uploads/blog/image/121221/toptal-blog-image-1474979173494-5e70fe3f0f0ddbc3749abe0f468ae0bb.png)\n \n-## More Specific Tips and Tricks\n+## 一些其他的建议和技巧\n \n-1.  **Don’t worry about the quality** - Don’t look at the sketches on Dribble; they are about something _completely different._ Bear in mind that the main purpose of sketches is to help you think clearer, find better solutions and save time.\n+1.  **别担心质量** - 别老盯着 Dribbble 上那些华丽的草图；它们和你要做的是_完全不一样_的意图。记住你画这些草图最主要的意图是让你的想法更加清晰，找出最好的解决方案，并节省你的时间。\n \n-2.  **Practice** - For a start, you can try to draw a few apps. Open a web or mobile app and try to copy the screen, describing the elements in the notes. Whenever you have some free time, practice drawing basic building blocks of your designs. In general, practice makes perfect. In a while, it will become part of your designer self.\n+2.  **练习** - 作为一个新手，你可以尝试绘制一些应用。打开一个网站或者手机应用，尝试临摹它们，在笔记中描述界面中的元素。只要当你不空闲的时间，你就可以练习绘制你的设计中的基本元素。通常来说，练习会让你做得更完美。一段时间后，它会变成你的设计生活中的一部分。\n \n-3.  **Buy a folder** - I often don’t work from my office, but rather from a cafe or my home. Paper sketches are very prone to damage, so buy a simple folder to keep them safe and sound.\n+3.  **买一个文件夹** - 很多时候我宁愿在咖啡馆或家里工作，也不愿意在办公室工作。纸质的草图很容易被损毁，所以你可以买一个简单的文件夹让它们安全地保持完好。\n \n-4.  **Bring tools with you wherever you go** - This helps ensure that you can capture your idea on paper at any time, otherwise you may just lose the thought or not be able to remember it in sufficient detail. I always have a notepad, a few A4 sheets, and pens with me.\n+4.  **不管去哪儿都带上你的工具们** - 这可以帮助确保你可以在任何时间在纸上捕捉到你的灵感，除非你刚好没有任何想法，或者你老是记不得这些小事。我总是带着一个笔记本，一些 A4 纸和笔。\n \n-5.  **Share with others** - It’s very important to engage other people and communicate with your team. Involving others and getting their feedback, especially early on, helps save time and resources in the long run. You can also encourage others to draw the way they envision the design.\n+5.  **与他人分享** - 与其他人交流，与你的团队交流是非常重要的。与他人交流并获得他们的反馈，尤其是在早期就这么做，可以帮助你在长期的工作中节省时间和资源。你也可以鼓励其他人画出他们对这个设计的构想。\n \n-6.  **Paper trays** - Think of placing paper trays on your worktable. For example, I have three of them: For incoming tasks, for sketches, and clean sheets of paper.\n+6.  **文件盒** - 考虑一下放一个文件盒在你的工作台上。像我就有三个文件盒：一个用来放接到的任务，一个用来放草图，另一个盒子里有许多没有用过的干净纸张。\n \n-7.  **Experiment and customize** - My recommendations are based on my experience. In time, you’ll find out what suits you best; which methods, which sequence of steps, what exactly fulfills your creative potential. You will get there only if you constantly try something new, which is why it’s important to experiment with different formats, styles, and try new templates.\n+7.  **尝试和习惯** - 我为你推荐的工作流程都基于我自己的经验。在某个适当的时候，你也会发现最适合你的工作流程：用什么样的方法，用什么样的步骤顺序，用什么来正确激发你的创作潜能。要达到这样的底部，你必须不断尝试新的东西，这就是为什么不断实验新的版式，新的风格以及新的模板是非常重要的。\n \n-8.  **Use templates** - Templates will save time and implicitly take into account format restrictions, freeing up more time to focus on what is important.\n+8.  **套用模板** - 套用模板可以节省时间，而且可以让你的版式受到统一，释放更多时间来专注于更重要的部分。\n \n-## Additional Mini-methods to Improve Your Sketches\n+## 为你的草图加分的额外小窍门\n \n-These aren’t necessarily tips and tricks, but they’re a collection of methods, tools, and suggestions that should boost your productivity or improve the quality of your sketches.\n+这些并不是必要的技巧，但它们是一些方法、工具和建议的合集，这些应该可以推进你的生产力和提高你草图的质量。\n \n ![](https://assets.toptal.io/uploads/blog/image/121218/toptal-blog-image-1474978640692-2c88d90d23aeb1b8484677f5fc3d4447.png)\n \n-1.  **Create a Sketch Board** - One of the biggest benefits of using pen and paper instead of a digital sketching tool is that you can actually stick it to a wall. Everyone on your team can see it and participate (although I recommend setting up review sessions).\n-    *   You will see your sketches yourself, and this will stimulate your thinking and let you see the big picture, not isolated pieces, but the whole system. You will see interactions between parts and the way they fit one another.\n-    *   Create the sketch board - attach your whiteboard sketches. If there is no whiteboard in your office, you can use double-sized adhesive tape or post-it note sheets to stick your sketches to the wall. If you don’t want to stick to the wall, you can find a big piece of cardboard paper instead. I strongly recommend using sketch boards, as they’re one of the best design tools.\n-2.  **Use a Whiteboard** - A whiteboard is a great drawing tool. It has a number of advantages: It is collaborative; it is easy to involve other team members in the discussion and in the drawing as well. Even if their ideas do not fit well, you will understand their way of thinking and it will help you to be on the same page.\n-    *   Markers do not let you focus on details, you have to think about the general things. Sketches are open to interpretation.\n-    *   A whiteboard is easy to clean and make corrections on.\n-    *   There is a lot of space and you can easily think through the whole system flow.\n-    *   You can attach sketches, printouts, and reference materials using magnets.\n-3.  **Prototypes** - Make a clickable prototype to evaluate your design. Try to get feedback about some elements. This works particularly well when you are using templates - your sketches are of the same size. Obviously, it will be much easier to draw same size sketches if you are using a template. I will try to make it even easier by providing you with a few templates you can download and use: [Mobile](https://toptal-email-assets.s3.amazonaws.com/71.pdf), [Browser multi-window](https://toptal-email-assets.s3.amazonaws.com/72.pdf), [Browser scroll](https://toptal-email-assets.s3.amazonaws.com/73.pdf), [Personas](https://toptal-email-assets.s3.amazonaws.com/74.pdf).\n+1.  **建立一个草图板** - 使用纸和笔来代替数码工具最大的好处之一就是你可以把他们钉在墙上。你团队里的每一个人都可以看到和分享你的草图（虽然我建议还是要设立一个回顾的环节）。\n+    *   你可以看到你自己的草图，这会刺激你的思考。而且你可以一眼看到整张图片——不是孤立的部分——而是整个结构。你也可以看到不同部分之间的交互是否相匹配。\n+    *   建立一个草图版 - 附到你的白板旁。如果你的办公室里没有白板，你可以用一个双倍的胶带或者即时贴来把你的草图贴到墙上。如果你不想把它们贴到墙上，你可以找一个大一点的硬纸板来代替。我非常推荐建立一个草图版，它是一个最棒的设计工具。\n+2.  **使用白板** - 白板是一个绝佳的绘图工具。它有很多优点：它可以供写作；它在涉及到与团队成员的讨论和绘制中非常有用。即是成员们的想法不那么合适，你也可以弄明白他们的思路并帮助你在同样的位置继续工作。\n+    *   马克笔没有办法让你注意到细节，你不得不思考整体上的东西。草图则更易于理解。\n+    *   白板很容易擦出和修正错误。","path":"TODO/guide-to-ux-sketching.md","position":251,"original_position":254,"commit_id":"f4c9cbc767112e8ce39abb9c5a3daaeb2a5ee821","original_commit_id":"f4c9cbc767112e8ce39abb9c5a3daaeb2a5ee821","user":{"login":"jiaowoyongqi","id":20292501,"avatar_url":"https://avatars.githubusercontent.com/u/20292501?v=3","gravatar_id":"","url":"https://api.github.com/users/jiaowoyongqi","html_url":"https://github.com/jiaowoyongqi","followers_url":"https://api.github.com/users/jiaowoyongqi/followers","following_url":"https://api.github.com/users/jiaowoyongqi/following{/other_user}","gists_url":"https://api.github.com/users/jiaowoyongqi/gists{/gist_id}","starred_url":"https://api.github.com/users/jiaowoyongqi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jiaowoyongqi/subscriptions","organizations_url":"https://api.github.com/users/jiaowoyongqi/orgs","repos_url":"https://api.github.com/users/jiaowoyongqi/repos","events_url":"https://api.github.com/users/jiaowoyongqi/events{/privacy}","received_events_url":"https://api.github.com/users/jiaowoyongqi/received_events","type":"User","site_admin":false},"body":"> 擦出\r\n\r\n↓\r\n\r\n> 擦除","created_at":"2016-10-15T06:37:07Z","updated_at":"2016-10-15T07:01:07Z","html_url":"https://github.com/xitu/gold-miner/pull/799#discussion_r83526901","pull_request_url":"https://api.github.com/repos/xitu/gold-miner/pulls/799","_links":{"self":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/comments/83526901"},"html":{"href":"https://github.com/xitu/gold-miner/pull/799#discussion_r83526901"},"pull_request":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/799"}}},"pull_request":{"url":"https://api.github.com/repos/xitu/gold-miner/pulls/799","id":89127839,"html_url":"https://github.com/xitu/gold-miner/pull/799","diff_url":"https://github.com/xitu/gold-miner/pull/799.diff","patch_url":"https://github.com/xitu/gold-miner/pull/799.patch","issue_url":"https://api.github.com/repos/xitu/gold-miner/issues/799","number":799,"state":"open","locked":false,"title":"为用户体验设计绘制草图，你所需要知道的一切","user":{"login":"funtrip","id":14296263,"avatar_url":"https://avatars.githubusercontent.com/u/14296263?v=3","gravatar_id":"","url":"https://api.github.com/users/funtrip","html_url":"https://github.com/funtrip","followers_url":"https://api.github.com/users/funtrip/followers","following_url":"https://api.github.com/users/funtrip/following{/other_user}","gists_url":"https://api.github.com/users/funtrip/gists{/gist_id}","starred_url":"https://api.github.com/users/funtrip/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/funtrip/subscriptions","organizations_url":"https://api.github.com/users/funtrip/orgs","repos_url":"https://api.github.com/users/funtrip/repos","events_url":"https://api.github.com/users/funtrip/events{/privacy}","received_events_url":"https://api.github.com/users/funtrip/received_events","type":"User","site_admin":false},"body":"建议把标题改为「为用户体验设计绘制草图，你所需要知道的一切」。因为这篇文章主要讲的是如何绘制草图。\r\n\r\n> * 原文地址：[Everything You Need to Know about UX Sketching](https://www.toptal.com/designers/ux/guide-to-ux-sketching)\r\n* 原文作者：[NICK VYHOUSKI](https://www.toptal.com/designers/resume/nick-vyhouski)\r\n* 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)\r\n* 译者：Funtrip","created_at":"2016-10-13T02:42:57Z","updated_at":"2016-10-15T07:01:07Z","closed_at":null,"merged_at":null,"merge_commit_sha":"27ec5f9942e9fdcee9373352ecad7c77973b4acd","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/xitu/gold-miner/pulls/799/commits","review_comments_url":"https://api.github.com/repos/xitu/gold-miner/pulls/799/comments","review_comment_url":"https://api.github.com/repos/xitu/gold-miner/pulls/comments{/number}","comments_url":"https://api.github.com/repos/xitu/gold-miner/issues/799/comments","statuses_url":"https://api.github.com/repos/xitu/gold-miner/statuses/f4c9cbc767112e8ce39abb9c5a3daaeb2a5ee821","head":{"label":"funtrip:translate-me","ref":"translate-me","sha":"f4c9cbc767112e8ce39abb9c5a3daaeb2a5ee821","user":{"login":"funtrip","id":14296263,"avatar_url":"https://avatars.githubusercontent.com/u/14296263?v=3","gravatar_id":"","url":"https://api.github.com/users/funtrip","html_url":"https://github.com/funtrip","followers_url":"https://api.github.com/users/funtrip/followers","following_url":"https://api.github.com/users/funtrip/following{/other_user}","gists_url":"https://api.github.com/users/funtrip/gists{/gist_id}","starred_url":"https://api.github.com/users/funtrip/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/funtrip/subscriptions","organizations_url":"https://api.github.com/users/funtrip/orgs","repos_url":"https://api.github.com/users/funtrip/repos","events_url":"https://api.github.com/users/funtrip/events{/privacy}","received_events_url":"https://api.github.com/users/funtrip/received_events","type":"User","site_admin":false},"repo":{"id":70393321,"name":"gold-miner","full_name":"funtrip/gold-miner","owner":{"login":"funtrip","id":14296263,"avatar_url":"https://avatars.githubusercontent.com/u/14296263?v=3","gravatar_id":"","url":"https://api.github.com/users/funtrip","html_url":"https://github.com/funtrip","followers_url":"https://api.github.com/users/funtrip/followers","following_url":"https://api.github.com/users/funtrip/following{/other_user}","gists_url":"https://api.github.com/users/funtrip/gists{/gist_id}","starred_url":"https://api.github.com/users/funtrip/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/funtrip/subscriptions","organizations_url":"https://api.github.com/users/funtrip/orgs","repos_url":"https://api.github.com/users/funtrip/repos","events_url":"https://api.github.com/users/funtrip/events{/privacy}","received_events_url":"https://api.github.com/users/funtrip/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/funtrip/gold-miner","description":"掘金翻译计划，翻译掘金上优质的英文文章","fork":true,"url":"https://api.github.com/repos/funtrip/gold-miner","forks_url":"https://api.github.com/repos/funtrip/gold-miner/forks","keys_url":"https://api.github.com/repos/funtrip/gold-miner/keys{/key_id}","collaborators_url":"https://api.github.com/repos/funtrip/gold-miner/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/funtrip/gold-miner/teams","hooks_url":"https://api.github.com/repos/funtrip/gold-miner/hooks","issue_events_url":"https://api.github.com/repos/funtrip/gold-miner/issues/events{/number}","events_url":"https://api.github.com/repos/funtrip/gold-miner/events","assignees_url":"https://api.github.com/repos/funtrip/gold-miner/assignees{/user}","branches_url":"https://api.github.com/repos/funtrip/gold-miner/branches{/branch}","tags_url":"https://api.github.com/repos/funtrip/gold-miner/tags","blobs_url":"https://api.github.com/repos/funtrip/gold-miner/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/funtrip/gold-miner/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/funtrip/gold-miner/git/refs{/sha}","trees_url":"https://api.github.com/repos/funtrip/gold-miner/git/trees{/sha}","statuses_url":"https://api.github.com/repos/funtrip/gold-miner/statuses/{sha}","languages_url":"https://api.github.com/repos/funtrip/gold-miner/languages","stargazers_url":"https://api.github.com/repos/funtrip/gold-miner/stargazers","contributors_url":"https://api.github.com/repos/funtrip/gold-miner/contributors","subscribers_url":"https://api.github.com/repos/funtrip/gold-miner/subscribers","subscription_url":"https://api.github.com/repos/funtrip/gold-miner/subscription","commits_url":"https://api.github.com/repos/funtrip/gold-miner/commits{/sha}","git_commits_url":"https://api.github.com/repos/funtrip/gold-miner/git/commits{/sha}","comments_url":"https://api.github.com/repos/funtrip/gold-miner/comments{/number}","issue_comment_url":"https://api.github.com/repos/funtrip/gold-miner/issues/comments{/number}","contents_url":"https://api.github.com/repos/funtrip/gold-miner/contents/{+path}","compare_url":"https://api.github.com/repos/funtrip/gold-miner/compare/{base}...{head}","merges_url":"https://api.github.com/repos/funtrip/gold-miner/merges","archive_url":"https://api.github.com/repos/funtrip/gold-miner/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/funtrip/gold-miner/downloads","issues_url":"https://api.github.com/repos/funtrip/gold-miner/issues{/number}","pulls_url":"https://api.github.com/repos/funtrip/gold-miner/pulls{/number}","milestones_url":"https://api.github.com/repos/funtrip/gold-miner/milestones{/number}","notifications_url":"https://api.github.com/repos/funtrip/gold-miner/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/funtrip/gold-miner/labels{/name}","releases_url":"https://api.github.com/repos/funtrip/gold-miner/releases{/id}","deployments_url":"https://api.github.com/repos/funtrip/gold-miner/deployments","created_at":"2016-10-09T09:39:43Z","updated_at":"2016-10-09T09:30:47Z","pushed_at":"2016-10-13T02:38:38Z","git_url":"git://github.com/funtrip/gold-miner.git","ssh_url":"git@github.com:funtrip/gold-miner.git","clone_url":"https://github.com/funtrip/gold-miner.git","svn_url":"https://github.com/funtrip/gold-miner","homepage":"http://gold.xitu.io","size":15452,"stargazers_count":0,"watchers_count":0,"language":null,"has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"xitu:master","ref":"master","sha":"fa6e1b8546477fb7f93d947a38a764dfb71c96af","user":{"login":"xitu","id":10482599,"avatar_url":"https://avatars.githubusercontent.com/u/10482599?v=3","gravatar_id":"","url":"https://api.github.com/users/xitu","html_url":"https://github.com/xitu","followers_url":"https://api.github.com/users/xitu/followers","following_url":"https://api.github.com/users/xitu/following{/other_user}","gists_url":"https://api.github.com/users/xitu/gists{/gist_id}","starred_url":"https://api.github.com/users/xitu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xitu/subscriptions","organizations_url":"https://api.github.com/users/xitu/orgs","repos_url":"https://api.github.com/users/xitu/repos","events_url":"https://api.github.com/users/xitu/events{/privacy}","received_events_url":"https://api.github.com/users/xitu/received_events","type":"Organization","site_admin":false},"repo":{"id":45512989,"name":"gold-miner","full_name":"xitu/gold-miner","owner":{"login":"xitu","id":10482599,"avatar_url":"https://avatars.githubusercontent.com/u/10482599?v=3","gravatar_id":"","url":"https://api.github.com/users/xitu","html_url":"https://github.com/xitu","followers_url":"https://api.github.com/users/xitu/followers","following_url":"https://api.github.com/users/xitu/following{/other_user}","gists_url":"https://api.github.com/users/xitu/gists{/gist_id}","starred_url":"https://api.github.com/users/xitu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/xitu/subscriptions","organizations_url":"https://api.github.com/users/xitu/orgs","repos_url":"https://api.github.com/users/xitu/repos","events_url":"https://api.github.com/users/xitu/events{/privacy}","received_events_url":"https://api.github.com/users/xitu/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/xitu/gold-miner","description":"掘金翻译计划，翻译掘金上优质的英文文章","fork":false,"url":"https://api.github.com/repos/xitu/gold-miner","forks_url":"https://api.github.com/repos/xitu/gold-miner/forks","keys_url":"https://api.github.com/repos/xitu/gold-miner/keys{/key_id}","collaborators_url":"https://api.github.com/repos/xitu/gold-miner/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/xitu/gold-miner/teams","hooks_url":"https://api.github.com/repos/xitu/gold-miner/hooks","issue_events_url":"https://api.github.com/repos/xitu/gold-miner/issues/events{/number}","events_url":"https://api.github.com/repos/xitu/gold-miner/events","assignees_url":"https://api.github.com/repos/xitu/gold-miner/assignees{/user}","branches_url":"https://api.github.com/repos/xitu/gold-miner/branches{/branch}","tags_url":"https://api.github.com/repos/xitu/gold-miner/tags","blobs_url":"https://api.github.com/repos/xitu/gold-miner/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/xitu/gold-miner/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/xitu/gold-miner/git/refs{/sha}","trees_url":"https://api.github.com/repos/xitu/gold-miner/git/trees{/sha}","statuses_url":"https://api.github.com/repos/xitu/gold-miner/statuses/{sha}","languages_url":"https://api.github.com/repos/xitu/gold-miner/languages","stargazers_url":"https://api.github.com/repos/xitu/gold-miner/stargazers","contributors_url":"https://api.github.com/repos/xitu/gold-miner/contributors","subscribers_url":"https://api.github.com/repos/xitu/gold-miner/subscribers","subscription_url":"https://api.github.com/repos/xitu/gold-miner/subscription","commits_url":"https://api.github.com/repos/xitu/gold-miner/commits{/sha}","git_commits_url":"https://api.github.com/repos/xitu/gold-miner/git/commits{/sha}","comments_url":"https://api.github.com/repos/xitu/gold-miner/comments{/number}","issue_comment_url":"https://api.github.com/repos/xitu/gold-miner/issues/comments{/number}","contents_url":"https://api.github.com/repos/xitu/gold-miner/contents/{+path}","compare_url":"https://api.github.com/repos/xitu/gold-miner/compare/{base}...{head}","merges_url":"https://api.github.com/repos/xitu/gold-miner/merges","archive_url":"https://api.github.com/repos/xitu/gold-miner/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/xitu/gold-miner/downloads","issues_url":"https://api.github.com/repos/xitu/gold-miner/issues{/number}","pulls_url":"https://api.github.com/repos/xitu/gold-miner/pulls{/number}","milestones_url":"https://api.github.com/repos/xitu/gold-miner/milestones{/number}","notifications_url":"https://api.github.com/repos/xitu/gold-miner/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/xitu/gold-miner/labels{/name}","releases_url":"https://api.github.com/repos/xitu/gold-miner/releases{/id}","deployments_url":"https://api.github.com/repos/xitu/gold-miner/deployments","created_at":"2015-11-04T03:29:13Z","updated_at":"2016-10-15T06:59:48Z","pushed_at":"2016-10-14T11:07:45Z","git_url":"git://github.com/xitu/gold-miner.git","ssh_url":"git@github.com:xitu/gold-miner.git","clone_url":"https://github.com/xitu/gold-miner.git","svn_url":"https://github.com/xitu/gold-miner","homepage":"http://gold.xitu.io","size":16384,"stargazers_count":4278,"watchers_count":4278,"language":null,"has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":772,"mirror_url":null,"open_issues_count":16,"forks":772,"open_issues":16,"watchers":4278,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/799"},"html":{"href":"https://github.com/xitu/gold-miner/pull/799"},"issue":{"href":"https://api.github.com/repos/xitu/gold-miner/issues/799"},"comments":{"href":"https://api.github.com/repos/xitu/gold-miner/issues/799/comments"},"review_comments":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/799/comments"},"review_comment":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/xitu/gold-miner/pulls/799/commits"},"statuses":{"href":"https://api.github.com/repos/xitu/gold-miner/statuses/f4c9cbc767112e8ce39abb9c5a3daaeb2a5ee821"}}}}
{"actor":{"display_login":"jiaowoyongqi"}}