|
设计不是拍拍脑袋就会出来的。很多设计都要遵循一定的设计流程。一个团队如何有序高效的进行设计。Jerry Cao的这篇文章给大家在具体操作上提供了很好的建议。
一个项目的开始从很多方面来讲往往都是最困难的阶段。因为这是产品开发中唯一一个从无到有的创造阶段。 幸运的是，现在已经有很多方法可以过来缓解所谓的“空白画布”综合征。接下来我们就要来谈谈在项目的早期阶段如何高效的进行头脑风暴和概念设计，以及如何将这些转化为线框设计再转化为原型设计。 头脑风暴—The DesignStudio Exercise 正如Guide to Wireframing这本书里面讲的，对于设计思路来说，头脑风暴就好像是你努力地想在空气中抓住一件东西一样，特别是在你不会用一些科学的方法的时候，这种感觉更强烈。在这样的情况下，就要用一套规范化的方法引导我们的头脑风暴有序地进行。 在uxpin网站上很多设计师都非常推崇“design studioexercise”，。这个“design studio exercise”是一套设计工作流程，可以同时满足多个功能：激发灵感、建立团队、挖掘ui设计素材。更重要的是它让雇主们都参与到设计过程中来而不仅仅是提供意见，这就极大降低了“委员会设计（design by committee）”带来的弊端。 译者注：委员会设计（design by committee）是设计领域的一个概念，它通常被用来形容某种设计因为太多人的参与而出现瑕疵或缺陷。此概念往往暗示着某种设计由于缺乏视觉一致性，最终以没能表达这种设计的初衷而告终。
图片来源：EstablishingDesign Direction 我们遵循的这一整套流程也就花费一个多小时，却可以帮助我们将10—15个粗略的想法变为3—4个值得做线框图的方案。 1. 以一个问题为起点（15分钟）—选择一个问题或者你正面临的一个挑战，选择之前最好是先经过实际调研。向小组成员详细阐述这个难题，不要放过与此相关的细节，包括角色模型、用户场景、商业目标。 2. 以4-5人为单位分组（5分钟）—划分方式可以随意，但是每个小组最好是4—5的成员。 3. 用快速草图解决问题（8-10分钟）。每一轮的时间不要超过10分钟，而且画草图要迅速，思维要敏捷。 4. 在小组内对草图进行讨论修正（15分钟）——将你们画的草图在小组成员之间分享讨论，这样可以可以促进团队的协作，使工作更加有效率。 5. 多做两轮的草图设计并修正（15分钟）——在上面一轮的草图设计后，经过一段时间消化，还需要再做另外一轮的草图设计并展示给小组。经过大约3轮的草图阶段，应该就可以得到一些很好的初步方案了。 6. 小组反馈（15分钟）—所有的小组一起讨论，展示各自的思想观点。这是整个流程里最重要的一个阶段。每个小组将最好的想法展示出来，大家一起参与讨论并研究。
图片来源：EstablishingDesign Direction 设计师Brad Fros曾写过一篇优秀的文章，讲述了“The studio exercise”对他的工作是如何如何的有帮助。在“The studio exercise”体系下工作，每个人都可以提出自己的想法（甚至是没有设计背景的人），这样集思广益，到最后你可能会发现最闪光的灵感竟然出现在最不可能出现的地方。你只需一个强有力的领导者即可，他拥有最终决策权。理想的情况下这个角色是设计师。 要进行头脑风暴你不是只有The design studio exercise这一个选择。斯坦福大学就曾列了一个名单，上面就是适用头脑风暴的一些活动，你可以点开他们的网站了解详细内容USE OUR METHORDS。我们也在“Guide to UXDesign Process & Documentation”上面列了一些有助于激发灵感创意的方法，大家可以去看看。 线框—让你的思想有了轮廓 当你已经有了足够多的设计思想之后，之前的设计小组就要进行重组了，当然这并不是说你可以甩手不管。 在头脑风暴和草图设阶段之后，就是低保真的线框图设计，然后是高保真模型设计，最后才是原型设计。有些设计师会跳过模型设计阶段，直接进入“快速原型设计”，但我们并不建议这种做法。
你绘制出来的最基本的轮廓，也就是线框图，承载的是你设计思想。形式可以参考我们在重新设计Yelp的时候画的低保真线框图。为了让线框图表达清楚，减少误解，应该包含以下3个层面的内容： ·内容—包括图形、文本（博客、文章、产品说明等）、Logo、标题、格式等。 ·排版—页眉、页脚、标记、正文和内容优先级 ·行为—你可以在线框图上做标注来体现二维平面上无法实现的行为，比如错误消息提示，弹窗和一些默认设置。 很多人不愿在线框图设计阶段花费太多的时间，但从长远来看，这个阶段如果能处理好一定会让你获益匪浅。我们知道低保真的线框图可以节省很多时间和开支，而且有非常直观的层次感。而高保真的线框图或者说实体模型，在功能和形式上更完善，更容易说服雇主。无论你倾向于哪一个，我们在下面列出7个小建议，可以帮助你充分发挥线框图的作用： 1. 先画草图—这个当然就不用画得很漂亮了，主要是为了避免一开始就不知所措。我们在做Yelp的重设计的时候，在建线框图之前，就用草图在团队里一起讨论，进行修改指正。 2. 和团队分享你的草图—线框图画出来绝不是给自己看的，有一些设计师甚至认为，线框图的交流功能要大于设计功能。而且线框图修改起来也绝对要比代码原型容易得多。 3. 选择合适的文档编辑器—这个看起来似乎可有可无，其实像一些修改时间，作者，参考等信息是需要被记录下来的，因为以后我们可能会用得着。所以在选择线框工具之前，要记得先看看它是否有自动追踪版本迭代的功能。 4. 不要忽略设计每个页面的初衷—当我们在处理一些细节的时候，很容易忘记每个页面的设计的目的。不管你用的是什么工具，要定期缩小视图看看所有页面是不是很好的切合。这样可以帮助你考虑流程的问题，流程在原型设计阶段是非常重要的。 5.以内容为主—对大多数线框图来说，有了框框（box）和基本图形就够了。我们做线框图的目的是表现视觉层级，而不是视觉完美度。像字体大小，图形和颜色这些小细节基本上只在你设计高保真线框图的时候才要认真对待。 6. 充分利用通用元素—记得使用“将改动运用到所有页面”功能，这样会大大节省时间。另，如果你想标准化你的设计样式可以看看这个网站提供的40多个交互设计图案。 7. 进行非正式的用户测试—可用性研究专家Jakob Nielsen给我们推荐了一种只有5人的测试方法，据说这种方法可以帮助你发现多达95%的潜在设计问题。 走廊测试法（Hallway testing）对测试你的线框图是也非常的有用，在线框图设计阶段可以尽早使用，经常使用，而且走廊测试法不用投入太多的资金。 线框图是连接理念和原型的桥梁。如果想了解一些优秀的线框图案例，点击这里可以看到苹果和推特那些大公司是是如何做线框图的。 当然，如果你对线框图想要有更详细深入的了解，需要练手或找模板，可以来这里看看“Guide to Wireframing” 原型—给你的设计注入生命力 如果说线框图是在测试你网站的结构，那么原型就是更注重用户体验了。UXPin的CEO，Marcin在他的一篇文章里面说到，原型是为了用户和界面之间的交互而存在的。而区分原型和其他前期的阶段的是ui元素，比如按钮、流量、功能等。和其他阶段一样，在设计阶段会比代码阶段更容易发现和处理问题。
同样的我们在研究了上百个原型案例之后，总结了7条比较有用的建议： 1. 重功能轻外观——做原型就是为了测试功能。我们先不要过多的关注网站的外观是否好看，应该把交互摆在首要位置然后才是外观。 2. 不要害怕尝试新东西—在开发阶段，完全可以多尝试一些新的交互设计。不然随着我们项目开发的深入，想尝试也不允了。 3. 不能太执着—很多时候你需要丢掉一些有问题的元素，这个时候可别手软，该放手就放手。设计有时就像雕刻一样，你要不断的去掉没用的部分才能得到精品。 4. 先别急着优化—有些人性子比较急，一开始就用css，javascrip做了一大堆的优化，这样可以得到非常好看的原型。但是没想到后来删删改改，前面做的优化都浪费掉了。所以优化最好放到项目最后再来做。 5. 走些捷径——不是让你偷工减料，而是说，假如你的网站部分功能需要登录后使用，那么你就先假设用户已经登录，在此基础上设计原型，稍后再设计登录界面。把精力用在重要的事情上。 6. 有时间就做好清理—在原型阶段，我们做的材料越来越多，越来越混乱。所以当你攻克完一个大难题之后，别忘了好好休息一下，清理掉那些没用的。用一个文件管理软件对这部分废弃文件做好存档。 7. 知道什么时候该停止—原型阶段应该进行到什么阶段有时候是很难判断的。我们认为，一旦你对视觉设计和功能性都满意的时候，你就可以开始着手建真正的网站了。 上面的这些小建议在设计中对我们的工作产生了很大的帮助。另外，对于数字原型，你在早期阶段也可以从“纸上原型”开始。如果你已经准备开始做项目了，还可以看看我们UXPin的全保真线框和原型，还有Invision，Balsamiq和Moqups,这些都很不错. 实现和超越 这篇文章应该能够帮助你真正理解如何将设计理念转化为原型，但这些只是刚刚开始而已。从无到有很难，从有到更好亦不易。 要修改一座建筑，你可以在纸上用橡皮，也可以在工地用大锤。 ——弗兰克 赖特 乐观地说，如果你可以将我们的建议运用到你的工作中——头脑风暴、线框图和原型阶段。你就有了一个坚实的基础可以支撑起后续的开发工作。那句话怎么说来着: 良好的开始是成功的一半。 感谢“对角线”的审核校正 |
|
|
