上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三维度解析一个产品的交互设计》

其实这个应该较早的提出来,因为已经发布过很多关于用AxureRP设计原型实例的文章,不过大部分都是关于单个功能或者交互效果的演示实例,而没有将其串联起来形成一个整体,比如一个网站或者是一个互联网产品。用AxureRP设计一个实例的步骤和用其设计一个整体产品的步骤还是不一样的,所侧重的点不一样,实例更侧重于功能点或交互效果的表现,整体产品则需要将各个实例串联起来,形成一个功能或效果集合,达到集中展示。因此整体的产品更侧重于信息架构,布局展示,实例合并,整体效果聚合等方面,本文就结合自己的工作经验,简单的介绍一下如何用AxureRP设计完整的产品。

而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。

1、确定信息架构

首先我们要先理解一个概念:

信息架构对于一个整体产品而言是非常重要的,犹如现在盖房子时的地基和框架结构,整个结构决定了将来的房型样子,及房子是否稳固。而WEB产品的信息架构则决定了产品未来的功能导航结构,是一个底层框架的作用,因此非常重要,地基不稳,安能盖高楼?那么如何来确定信息架构呢?

什么是交互框架?(主要是指互联网产品)

一般来讲,我们在做需求分析的时候,都会把几个主要的功能点抓出来,这几个功能点就可以浓缩一下形成产品的初步信息架构。比如要做一个合同管理的功能,要求实现合同信息管理,合同履约管理,合同统计报表等功能,这里列出来的功能点就可以拿来做信息架构。再比如我们要做一个会员管理的功能,注册和登录是必不可少的功能点,那么就可以将其列为会员管理下的两个基本信息架构。其实每个网站产品最终确定下来的一级导航栏里面的各个栏目就是一个网站的信息架构了。

框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法

那么用AxureRP如何来管理信息架构呢?AxureRP提供了一个非常方便操作的站点地图面板(Sitemap)来管理页面结构,结构菜单采用树形菜单,层级分明,结构清晰,还能自动生成框架结构图,非常方便。关于站点地图面板的使用,详情可参见《AxureRP介绍–站点地图面板》里面的介绍。这里简单的以一个企业网站的首页内容为例。

这是官方的定义,翻译成人话就是搭建一个产品能够使其可拓展,规范化,有条理,可快速迭代优化的方法。好像还是不好理解,让我们举一个通俗易懂的例子:假如我现在有个空房子,我要重新改造它,那么我首先要考虑的就是其房间结构(也就是框架),比如我要设计几个卧室,几个客厅,分别占多大面积,在什么位置等等(信息架构);然后还要考虑如何设计门和窗户,怎么能够在不同房间互通(导航方式);接着再思考每个房间里面分别需要怎么布局,分别需要哪些家居和电器,具体在什么位置(页面结构);然后再不停的细分下去,直到考虑全每个细节,那么一个产品完整的框架就基本上搭建出来了~

图片 1

理解了框架的概念后,可能我们还是会有疑问:

2、确定页面布局

为什么要做框架设计?

信息架构确定了之后,就需要对每一个页面进行元素的排版,排版之前,一般都会先对页面进行一个布局设计的考虑。通常我们做WEB产品设计的时候,都会遵循一些已有产品总结出来的布局结构,比如三行三列布局,三行两列布局等,再如左导航右内容的形式,左内容右导航的形式等,这些都是大的布局结构,是整体页面的布局排版。细分到具体页面内容的时候,就需要对每一个内容块的展示位置进行布局,如企业网站首页的一般内容有图片新闻,通知通告,公司新闻,产品介绍,产品展示等等,我们需要对这些内容块进行一定的设计布局,这里的布局结构取决于设计人员对内容编排的把握,不同的布局会产生不同的效果。如电子商务网站,对内容块和广告块的布局排版就非常讲究,因为不一样的布局,所带来的用户点击量和转化率是不一样的。这种情况下,即对某一类产品的布局把握不好的时候,可以参照已有成熟产品的内容布局,因为它们已经有运营数据在支持。

还是上面房子的例子,假如我不考虑房间布局,随心所欲地将我的家具和电器到处摆放,我将卧室放在房子的最里面,我需要依次穿过客厅、厨房、洗手间才能到到达;我将马桶放在卧室,把床放在客厅,把厨具放在洗手间,把衣柜放在阳台,把洗衣机放在厨房……各位可以想象一下你的房子要是要被设计成这样你还想住吗?同理,一个框架结构混乱的产品你的用户也是不会用的。但凡在行业里有些影响力的互联网产品,其产品的框架和结构必定是由产品和设计人员精心思考并设计过的。框架是一个产品的骨骼和经脉,它是一个产品能用与否的基础所在,所以在开始产品设计之前先进行框架结构的梳理是非常非常重要的!

在用AxureRP做布局设计的时候,可以用默认组件库里面的占位符组件来设计(关于占位符组件的使用,参照这里),先将需要设计的区块用占位符布局,然后标上文字标示,以此来表示这里将来需要设计放置的内容。这个步骤基本决定了一个页面的布局。

那么对于交互框架:

图片 2

我们又该如何去思考和设计呢?

3、内容完善

我将其总结为3个步骤:

页面布局布的就是内容块,当决定了某块内容的放置位置之后,就可以一块一块的完善设计内容,使其接近于最终产品的展示样式。这个时候就是要用到各个实例效果的时候了,比如图片新闻,我们可以用幻灯片效果来做,比如产品展示,我们可以用跑马灯效果来做,具体采用什么样的交互效果来实现内容块要求展示的内容,取决于产品设计人员的把握和用户的需求及用户体验,其中用户体验是比较大的一块,就拿幻灯片效果来说,是否需要设计数字导航键,是否需要自动播放,是否需要设计缩略图等等,这些都需要仔细考虑之后再做决定,这个可以在设计产品时候多多讨论沟通,多看看别人的设计效果。譬如电子商务网站首页的Flash图片轮播效果,其实就是幻灯片效果,各个电商网站的设计大同小异,就完全可以借鉴参考。

步骤1:信息架构

对于产品和设计来说,这个词肯定是不陌生的,那么信息架构是个什么东西呢?

这就是某app产品的信息架构图,通过不同级别的分类,将其所有的功能点展示出来的一个功能信息框架图。一般来说这种架构图主要是由产品产出,而有些比较专业的交互前期也会参与其中,下面还是以设计房子为案例来探究一下信息架构到底该怎么做。

首先我们要想清楚房子有几个房间,分别需要哪些家居和设备(收集需求)

收集完需求后,我们需要开始对需求进行整理和分类,这里整理的规则可以参考卡片分类法和卡诺模型

卡片分类法

卡诺模型

整理完成后最后产出信息架构图:

信息架构完成后并没有结束,你还需进一步思考:还有没有其他问题呢?有没有漏掉的功能?功能分类有没有问题?这个框架拓展性如何?结构是否足够扁平?等等……如果不考虑清楚那么就很有可能会出现马桶被摆放在卧室这种情况了。

当信息架构确定好了之后开始思考第二步:

这里用AxureRP来设计的实例介绍,前面讲的比较多了,用到的是AxureRP的核心功能,如组件的组合使用,动态面板的灵活应用等等,需要去发挥设计人员自己的想象力和创造力,现在网络上有的这些效果也都是人想出来的,并不是一开始就有的。

步骤2:导航

导航就像是房子里面的门,是贯穿整个产品的入口,导航做的好的能让用户快速达到目标,导航做的不好会让用户迷失在茫茫的信息海洋中不知所措,目前在app业内主要的导航模式有3种:选项卡式导航、抽屉式导航和跳板式导航。

选项卡导航:iOS上又叫Tab
bar,典型代表像淘宝、微信,这类产品相对体量较大,产品结构和流程逻辑也都较为复杂多变;

抽屉式导航:代表如滴滴、摩拜等,这类产品都有一个很共性的特点就是“单线程”,即用户目标明确,操作流程单一,属于“强流程,弱框架”的类型。

跳板式导航:也叫9宫格式导航,典型代表如美图,这类产品也有着比较鲜明的特点“多线程单流程”,即功能入口较多(一般5个以上),操作流程单一,常用于美图类产品和一些B端类产品。

虽说不同的产品形态决定了其不同的导航模式,然而业内几乎90%的app都是采用选项卡导航,选项卡式导航的确拥有非常显著的优势:结构简洁清晰,操作便捷,拓展性强,稳定性好,确实是很多app首选的导航模式,然而并非一概而论,你所选择的导航一定是跟你的产品类型和框架结构相互关联的,滴滴采用抽屉式导航而非选项卡导航是由其产品本身属性所决定,豆瓣一刻的导航采用抽屉式是因为本身产品框架结构较为简单的原因。所以采用什么导航方式要灵活变通,没有最好的只有最适合的,比如下面3个例子:

片刻使用的是驼式导航,是选项卡导航的一种变形,强化了某一个重要或高频繁操作的功能,多用于博客类,直播类app中;

好奇心日报用了一种很罕见的悬浮导航,至于为什么会这么做,各位可以自己去思考;

Hyperlapse更是大胆,它根本就没有导航,这个产品全身上下就只有一个功能;

结合自己产品类型和框架结构,灵活选择导航,不要拘泥于形式,多尝试多思考,总会发现最合适的那个。

完成导航设计后,来到最后一个步骤:

图片 3

步骤3:页面结构

页面结构即页面布局,是针对单个页面不同控件和元素的布局展示关系,就像房子的房间大小位置都设计好了,那么接下来就考虑每个房间里面该怎么添置家居了,比如卧室里面的床,衣柜,台灯,空调等等这些东西该怎么布置,分别放在什么方位,具体占多大位置,这样摆有什么影响等等,房间里面布局的好坏影响空间的运用,也影响了房间的美观整洁和整个房子的格局风格,同理,页面的布局好坏就决定了用户的使用和阅读体验,决定了整个产品的调性和品位,最终影响了产品的转化。

那么一个优秀的页面布局具备哪些特点呢?

1、主次分明,结构清晰:

结构清晰的页面各个元素和控件处理的非常得当,相反结构混乱的用户的关注没有焦点,看了很长时间都不知道你的页面想表达什么,也不知道该如何操作,下面看两个例子:

12306的首页结构看起来似乎毫无层次感,页面结构就像是随意的信息排列,再看看智行的首页,卡片式结构视觉焦点更清晰,信息的排版和布局也更有层次感。

2、化繁为简,引导清晰:

特别是移动端产品,手机屏幕尺寸有限,如何在最短的时间里吸引用户的眼球,设计师需要做的是做减法,删除干扰用户的不必要的内容,强化核心的操作流程,快速引导用户达成目标。

让我们再看一下上面12306的首页,可以发现它的查询页面包含了出发点、目的地、出发日期、出发时间、席位、车次筛选和添加乘客,也就是说用户需要浏览这些信息后然后再进行一步步的操作选择,等这些全部设置好了之后估计票早都抢完了,而智行就机智了很多,它将出发时间,席位,添加乘客等非重要信息进行了删减,就连车次筛选也只是用了开关设置,所以大大提升了用户的查询效率。操作指引方面,出发时间是一个非常重要的必填操作,智行对于时间选择有比较强的引导,而12306的出发时间根本看不出来是可以点击操作的。

3、操作方便:

这里操作方便更多适用于移动端,特别是现在手机尺寸普遍越来越大,用户单手操作越来越困难,所以我们在设计页面结构布局的时候也是要考虑到人体工程学的,特别是某些特殊场景使用的app,比如地图类应用,用户使用场景多在户外(步行、骑行、公交车),用户单手操作的场景非常之多,如下图所示:

左图是用户单手操作的触摸区域图,从图中可以看出界面的左上区域属于触摸困难区,下方是舒适触摸区,所以在处理页面信息布局的时候就可以考虑将重要展示类信息放在页面的头部和中部,而需要操作类的控件和按钮可以考虑放在下方用户容易操作到的区域。我们再看右图,是高德的首页,我们可以看到高德的头部有个搜索框,是属于重要按钮控件,然而却放在了头部用户难操作的区域,那么高德当然也意识到了这个问题,于是乎他们在页面的底部放了一个“路线”入口,能够让用户在单手操作的情况下同样也能快速完成路线查询。

其实关于页面结构,设计师们要考虑的点很多,也不仅仅单纯地用几个点就能完全涵盖进去的,不同的产品属性会决定其框架和导航,也决定了其页面的展示布局,比如网易新闻和淘宝的信息展示方式就完全不同,一个是浏览,一个是逛,两者间的使用场景和用户心理是完全不一样的。即使是同一属性的产品其页面结构和布局也是千差万别的,比如下面4个例子:

虽然都是互联网金融产品,也都是展示首页,然而可以看到每个产品的首页展示形态完全不同,有的主推产品和收益,有的引导登录购买,有的主推运营活动,有的主打社区互动,究其背后形态各异的原因跟其产品定位与运营策略有重要的关联,设计师们分析产品的时候不仅仅需要从设计本身出发,还要思考更多背后潜在的原因,从而达到真正意义上的“闭环”。

好了说了这么多,最后总结一下,产品交互框架设计需要经历的3个步骤:

1、信息架构:功能需求的筛选与分类,根据不同权重和属性进行级别的划分;

2、导航模式:根据产品属性和产品架构来选择最为合适的导航方式;

3、页面结构:结构主次分明、结构清晰、引导明确以及操作方便是一个优秀的页面结构的必要条件;

框架是死的,人是活的,设计的思维大多都是发散的,合适的方法论确实能够在关键的时候提供思考的方向,但不可固步自封,设计师需要不停地学习、思考、交流、总结、创新,因为这个过程本身才是设计最重要的意义~

(待续……)

经过这样三个步骤的设计,一个中低保真度的产品页面原型就算完成了,逐步的完成所有页面的设计之后,这个产品的原型设计也就告一段落了。如果要设计高保真度的原型,可能还需要UI设计人员的介入,提供一套接近最终产品效果的UI效果,然后切换到原型上去。基本上按照这样三个步骤来做原型设计,不会有什么大的问题,前提是产品的需求已经基本确定,要是连框架都还没有定下来,也就是说第一步都还不能做,那是没有办法开始做原型设计的。

相关文章