浅谈:产品设计与线框图设计

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

xiankuangtusheji

这次我们来讲一讲产品设计中的线框图。

产品设计,一般包括对产品框架/内容的梳理,业务流程的理解,再到线框图的绘制,原型的设计,最后产出规范的设计稿。在这其中,令我花费最多时间、精力的往往是线框图的设计。因为这是承上启下的一环,既包含着对产品框架、业务流程的验证,也将影响视觉、程序、测试同事的工作。

在开始线框图设计之前,我们来看一看什么ToC产品、ToB产品

ToC产品,例如微信、网易云音乐、新浪微博等。对这类产品来说,产品设计需要提供一个清晰明了的信息架构,让用户能很自然的使用产品。因为ToC产品面对的是海量的用户、不同的用户群体,所有要尽量降低学习成本,达到易用、高效。ToC产品可以通过减法来使架构更加轻量化,从而达到易用、高效的目的。

ToB产品,例如工作关系管理系统、大型功能类系统、业务支持系统等。对这类产品来说,产品设计需要提供一个逻辑严密、功能完备的信息架构,让用户能按照操作流程顺利无误的使用各项功能。这样的繁重架构往往会一定的学习成本,但因ToB产品本身用户群体就比较聚焦,往往使用人员要经过长时间的培训才能上岗。使用场景更是复杂,每个产品都有几十个甚至上百个的使用场景。所以ToB产品无法通过减法使产品轻量化,而是要对用户的业务流程进行深入的了解,从而对产品的功能进行梳理与整合,聚焦核心使用场景。

ToB产品相对于ToC产品,难点在于:要对一个陌生的业务领域进行深入的了解,这本身就已经是一个巨大的挑战。并且相对ToC产品,用户群体已不是我们身边的人,而是一个完全陌生的专业的用户群体,所以用户研究变得更加重要。用户群体的陌生,业务的复杂导致了ToB产品对交互设计师的要求更加高。要求设计师拥有极高的业务理解能力以及对全局的把控能力。即使你不是做B端产品的,相信你看了这篇文章后,也会有感悟。

今天,我就以我自身从事ToB产品设计的经验,来聊一聊线框图。

在绘制线框图时,我们应该有一种纵观全局的理念。只有产品烂熟于心,才能画出优秀的线框图。并且在线框图阶段要时刻反问自己三个问题:

  1. 是否已经将用户的使用路径减少到最短?
  2. 是否符合用户的使用习惯?
  3. 是否已经将信息最精简、最直观的显示出来

一、准备

在开始线框图的设计前,最好对产品框架/内容,业务流程,用户群体拥有足够的了解,并且确定这些内容是经得起推敲的。否则在设计完成后,不免会遇到需要将整个线框图推倒重来的风险。

二、构思

在绘制线框图时,你需要有一个概念,结合用户场景,构建出你产品的“气质”。比如:你要做一款移动端的APP,你的概念是:吸引用户的注意力,让用户花更多时间在你这个APP上,那你可以结合移动端的场景,线框图尽量采取可视化的图形,吸引用户的注意力,采用拖拽、滑动的操作方式,方便用户使用;整体营造出一个“沉浸式”的设计。在构思这一步,应该对产品最终的设计风格,交互方式有一定的想法,记录下来,在后面视觉设计、动效设计时,这可是一笔不可多得的财富。

三、动笔

1.对页面进行布局的规划。

将整个产品的页面进行分类,进而对整个产品的布局进行划分。(部分特殊页面布局可能会相应改变)

2.将页面的内容罗列出来,细究各个内容的表现方式,最终再进行排版。

将每个页面中的内容按类型&重要程度进行分类,在这就要求我们对用户任务流程、业务流程有足够深的理解,才又快又好的完成这部分工作。分类完成后,我们再细究每种类型内容的表现形式(常用的表现形式为:大小、颜色、对比度、图形化)。最后,将我们不断思考、斟酌的页面内容放入我们已经设计好的布局中,再进行排版,这样我们的设计草图就已经完成了。

3.将设计草图转换为设计稿

将原本在纸上的设计草图,转化为电子版的设计稿,更加方便团队内部的评审、修改。

今天就废话到此啦,谢谢各位的观看

 

作者:Rack 授权转载

原文地址:http://www.jianshu.com/p/7805bc8d7593

您的赞赏,是对我创作的最大鼓励。

评论( 1

登录后参与评论
  1. :grin:

    回复
加载中