及思设计 - 2017-11-24

网站建设研究分析之「草图绘制」

漫画家创造故事，建筑师创造功能。漫画家的故事初期架构是靠脚本分镜头绘制，建筑师的初期功能表现是靠图纸绘制。我们不是漫画家，也不是建筑师，或许我们普遍的职业只是坐在电脑旁边，打开photoshop，打开各种工具，运用数码手段着手应用的设计过程，也许你认为这是最佳手段，也是我们的惯用手法。可是这样工作真得是功用兼备吗？是否能做到全面的设计思考，以及完整地对用户体验的探求？在电脑前，我们的思路最为受限，毕竟电脑是最佳的实现工具而不是前期思路拓展的工具。建议每一位设计师，要适当适时的抛开电脑，做为一名旁观者，切换至用户的角度，仔细想一想，我们创造的价值仅仅是凭借电脑来创造出来的吗？

草图架构是应用在电脑上实现前第二步预备工作，要兼有漫画家与建筑师的两种目标：既要讲故事，又要表现功能。讲故事要明白，做功能要实用。这种最基本的用户需求仅需要一点手绘功底的暂时嵌入，把最初的原型架构进行图形概念化。草图并不是你的胡思乱想，应该保留的是电脑操作之前必要的思考方式。大多数的草图都带有含糊性质，含糊的表现有助于更为广阔的创意空间，这样就容易找到更区别于大众应用不同的自由度，找到与设计稿之间若即若离的平衡点。

与PS这种实现工具性质不同，草图绘制是一种思考的工具，是检验前期原型架构框架是否完善可用的方法，也是前期准备工作中的重要一步。

及思设计的草图绘制图（1）

实现起来很简单，拿一张白纸和一支笔，画出线稿。这些线稿可用于你在电脑上设计应用前的半保真模型。你需要把重要界面用最简单的框架线描绘出来。一些通用页面可以留到电脑操作上去。重要页面的功能区域是用户经常用到的，根据你的第一步原型框架，你在脑海应该会有一些图形化的思路，整理并绘制出来，一张一张像放映电影一样，在眼前放映一遍。在一定程度上，在实现某些具体功能之前，原型草图绘制有着更为激励人的作用，这种作用间接促成了从想法到方法再到实现的逐步跳跃。哪怕有一步需要修改，这种修改也只不过是换一张纸重新画的时间，这给上线之后的修改成本做足很好的预防工作。在绘制草图的过程中，我们会逐渐的体会到，在脑海中不仅能产生模糊的风格印象，还会规避只停留在概念上的刻板理论。

及思设计的草图绘制图（2）

没有规矩不成方圆，即使面对自由度较强的手绘草图。应用的草图随意性也要有序进行。草图作为真正实体设计形式出现之前的设计依据与模型，要做到恰当的精确度。草图绘制过程中要遵从下面一些规范：

比例协调，绘制的比例要大概地符合实际操作的界面，不用特别精确，要感觉到什么样的区域适合指尖点击，适合信息获取，适合用户处于什么样的场景去操作。

物尽其用，绘制的元素要合理的摆放到能发挥作用的地方。

形式优先，交互与视觉的形式在应用设计中占很大的比分。草图方式去描述或标注你所能想到的形式，抛开功能实现时考虑到的难度【开发者不要骂我】，勇于尝试新形式，让最原始的草图简单并鲜明的表现出来，会让准备之后的实现工作拥有更为宽广的设计思维方式。比如要加入短小的动作交互动画，同样可以先在草图绘制中画好表现方案，让形式更为生动形象。一些细小的微创新形式就可能让应用在用户眼中大放光彩

及思设计的草图绘制图（3）

逻辑清晰，主要页面的绘制过程要保证其讲“故事”的逻辑通顺明了，能让人看得明白。

多中求胜，不要吝啬纸张，多想就多画，空白是一个汇集灵感的地带，最终的效果肯定会在这些众多的线条中脱颖而出。

以上的规范只是为了方便设计师迅速的进入角色进行创作，真正的草图随性而画，并不是靠一成不变的规定，而是为了更为有效的思考，更为充足的前期预备演示。我在草图绘制之初，遇到了很多的困难。首先面对的还是冲动，恨不得一下把应用通过PhotoShop设计之来进行开发。我的冲动带来唯一结果，就是后期的大量反复地修改。准备好你的耐心，空出这一部份时间大量且专注进行草图工作。其次是如何画出草图，在纸上有一个固定且符合尺寸的框架，可以大体的把控草图的精确度，就好像我们进行一幢复杂建筑的规划，页面的细节也要从容面对。

及思设计的草图绘制图（4）

草图绘制中需要把交互细节表达出来，我们就要进行交互的标记工作。交互标记，是在草图架构上进行交互上的说明线框或指示，标记草图中不能表现的动作，可以让草图原型架构的空间更立体更具有动态效果。

对于不同习惯的设计师，我们可以用不同的方式去进行绘制，只要把草图架构的诉求表现出来即可，草图没有固定的标准让人们去审视，这一步的操作也不会让用户看到。我们只是让草图表现用户看到真实应用前的模糊框架。而进一步的细节优化与规范操作，能让这一步更接近成品的应用在纸上出现的更为清晰，以保证我们的准备工作更为充足。