3年5000万安装量:我们是怎么设计豌豆荚的

时间:2014-09-14

  为了探索更好的信息架构,尝试了各种各样的方案。基本上是按照排列组合的方式,把各种可能的情况都试了一遍。

  就和之前那张示意图一样,设计的过程就是不断发散尝试,同时也不断抛弃自己的尝试,挑选胜出者,再进行下一轮的发散和抛弃。

  这种不断发散地尝试在什么时候可以停止呢?一直到出现一些自己满意的方案为止。什么叫一些?什么叫做自己满意呢?就是觉得没有什么可以改了。高质量的设计一定是有满墙的迭代草稿做为基础。第一稿就非常完美,有可能性,但非常罕见。

  同时我们也开始了视觉设计的工作。这是不符合一般设计项目的流程的,但我们的时间不允许做完所有的交互设计,再进入视觉设计这一流程。

  七

  前文再续,说到我们一边画线框图,一边就请我们远在纽约的视觉设计师开始开展了视觉设计的工作。一方面是因为这样比较节省时间,另外一方面也和项目参与者的技能比较有关。我和刘亚平(豌豆荚的产品设计师)都不擅长视觉设计,但自认还是有能力将一个比较完善的视觉设计语言应用到已有的产品上的。

  因此,在视觉设计的基本样式出现后,我们整个设计的过程基本上就是直接输出高保真的设计稿的过程。从没有草图到线框图到视觉设计稿的过程后,效率提高了很多,依赖已经确定的视觉风格,也可以保证不出现冲突,还有高度的一致性。

  借助这个风格的工作模式,我们往往在一张图上会同时标注产品逻辑和呈现大量细节的视觉实现指南。通过这种方式,我们可以一步到位地和开发人员讲清楚我们需要的是什么。这是非常重要的,很多复杂的交互中,有一点点不清楚,要返工的成本可能就会非常高。这张图展示的是对通用搜索功能的设计,设计师需要考虑到拼音首字母、标点符号全角还是半角等等的细节。然而,即使做到这个程度,仍然出现了很多因沟通不清而出现返工的情况。

  这是豌豆荚 2.0 左侧导航的部分设计稿,我们遍历了所有的状态,力图在产品定义中将所有情况都考虑到。

  我们的经验是,不要拘泥于教科书上的流程——当然,你需要了解。在这个阶段,也要和所有人讨论,让他们告诉你各种各样的边缘情况。

  八

  整个设计过程我们进行了数百次尝试。实际数字应该要比这个多,因为我们都没有每做一次,就保存一次版本的习惯。

  • 共4页:
  • 上一页
  • 3/4
  • 下一页
  • 上一篇:界面灵活 可扩展 下一篇:10个用于设计网页线框图的优秀工具

    相关文章

    最新文章