交互总结篇(一):框架与布局

上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三个维度,解析产品的交互设计》。而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。框架是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法。


上篇文章里面简单介绍了一下关于交互设计分析的三维度,即框架、流程和状态;这里就不做特殊介绍了,详细内容请见《三个维度,解析产品的交互设计》。而本文作为交互设计总结篇的第一篇——框架布局篇,主要是系统地整理一下交互框架设计所需要考虑到的方方面面。

交互总结篇(一):框架与布局

首先我们要先理解一个概念:什么是交互框架?(主要是指互联网产品)

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

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

理解了框架的概念后,可能我们还是会有疑问:为什么要做框架设计?

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

那么对于交互框架:我们又该如何去思考和设计呢?

我将其总结为3个步骤:

步骤1:信息架构

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

交互总结篇(一):框架与布局

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

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

交互总结篇(一):框架与布局

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

交互总结篇(一):框架与布局

交互总结篇(一):框架与布局

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

交互总结篇(一):框架与布局

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

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

步骤2:导航

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

交互总结篇(一):框架与布局

  • 选项卡导航:iOS上又叫Tab bar,典型代表像淘宝、微信,这类产品相对体量较大,产品结构和流程逻辑也都较为复杂多变;
  • 抽屉式导航:代表如滴滴、摩拜等,这类产品都有一个很共性的特点就是“单线程”,即用户目标明确,操作流程单一,属于“强流程,弱框架”的类型;
  • 跳板式导航:也叫9宫格式导航,典型代表如美图,这类产品也有着比较鲜明的特点“多线程单流程”,即功能入口较多(一般5个以上),操作流程单一,常用于美图类产品和一些B端类产品。

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

交互总结篇(一):框架与布局

  • 片刻使用的是驼式导航,是选项卡导航的一种变形,强化了某一个重要或高频繁操作的功能,多用于博客类,直播类app中;
  • 好奇心日报用了一种很罕见的悬浮导航,至于为什么会这么做,各位可以自己去思考;
  • Hyperlapse更是大胆,它根本就没有导航,这个产品全身上下就只有一个功能。

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

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

步骤3:页面结构

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

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

1、主次分明,结构清晰

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

交互总结篇(一):框架与布局

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

2、化繁为简,引导清晰

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

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

3、操作方便

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

交互总结篇(一):框架与布局

左图是用户单手操作的触摸区域图,从图中可以看出界面的左上区域属于触摸困难区,下方是舒适触摸区,所以在处理页面信息布局的时候就可以考虑将重要展示类信息放在页面的头部和中部,而需要操作类的控件和按钮可以考虑放在下方用户容易操作到的区域。

我们再看右图,是高德的首页,我们可以看到高德的头部有个搜索框,是属于重要按钮控件,然而却放在了头部用户难操作的区域,那么高德当然也意识到了这个问题,于是乎他们在页面的底部放了一个“路线”入口,能够让用户在单手操作的情况下同样也能快速完成路线查询。

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

交互总结篇(一):框架与布局

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

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

  1. 信息架构:功能需求的筛选与分类,根据不同权重和属性进行级别的划分;
  2. 导航模式:根据产品属性和产品架构来选择最为合适的导航方式;
  3. 页面结构:结构主次分明、结构清晰、引导明确以及操作方便是一个优秀的页面结构的必要条件。

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

(待续……)

 

本文由 @小米渣和大冬瓜 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21310/

(0)
CatherineCatherine
上一篇 2017-04-28 02:24
下一篇 2017-04-28 04:52

相关推荐

  • 设计师的文化消费分类:钱花哪里去了?

    媒介与内容从来都不是同质平等的,按照题材来分类书籍与电影,就是以「文化消费品」的眼光来看待不一样的文字。然而不同类别比特本就具有不一样的价值,对于设计师,我觉得文化消费应该分为四类,它们可能占据着我们生活的1/3的时间,需要我们认识并好好分配:

    2017-05-28
  • 设计中的色彩心理学(上):九种色彩所代表的心理感应

    之前写过一些关于色彩的文章,一直说的是关于色彩理论的一些色彩基础,其中有读者提到过想听听关于色彩心理学的一些东西,因此就在这里聊聊自己的一些感想和设计实践中的一些心得体会,并不系统,只谈感想。

    2017-05-10
  • 从微信「朋友圈三天可见」,分析背后隐含的设计原因

    @_呆呆_Da :这次为大家解析微信的一个功能,从表面到深层的思想,我都会做一个详细的说明。

    2017-08-07
  • 【每天一小讲】便捷的用户体验才是命题简化之根本!(语音版)

    如何进行命题简化?来自盯盯学院00:0001:24命题简化是让产品或者服务的水平超出竞争对手一大截。根本是要让顾客用的特别方便,特别爽。命题简化瞄准的是优质市场,一般来说这个市场比较小。当然也有特例,比如苹果手机,既存在于高收益的优质市场,同时也创造出了一个全新的大规模市场。一个优秀的命题简化者根本不需要花多少钱做宣传,用户会主动向周围的人推荐,实现爆炸式增长。如何进行命题简化?产品设计几乎是命题简化的全部。目标就是让产品具有使用上的愉...

    2018-04-09
  • 【腾讯讲堂】交互原型设计公开课推荐

    腾讯讲堂交互原型设计公开课推荐哦,因为小编看到这个课比较适合新手们,关键是免费,哈哈哈~~好魔性的笑声。 废话不多说,点击去学习吧:UI交互原型设计公开课。 课程内容如下:  

    2016-01-20
  • 交互设计基本原则(第二部分:默认和可见性)【UXRen译#157】

    作者:Bruce Tognazzini  |  翻译:邱金,校审:Chen Jing   一、默认Defaults 1.1 原则:输入框的默认值应该很容易“吹走” 当用户激活一个输入框,当前条目应该自动被选择,以便按退格/删除键或开始键入来清空条目…

    交互专题 2017-08-07
  • Sketch 49 新增交互原型能力

    看到更新弹窗蛮讶异的,完全没有见到相关消息或Beta版本,官方博客与Medium也毫无动静,太过突然,总之就是这样:“Prototyping: You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview,Sketch Cloud,a...

    2018-03-02
  • 产品原型和交互设计的区别

     产品经理根据需求来规划产品原型,但是产品原型往往比较粗糙,可能只包含了核心功能描述或者模块划分。我们之前问过很多朋友产品经理的原型和交互设计师的原型相比有何异同,得到的结果简单来说,前者更加笼统且…

    2015-02-03
  • 音乐社交的本质——从云音乐引发的产品思考

    社交虽常见,但音乐真的适合社交吗?音乐社交存在哪些特殊性?如何利用音乐来社交?可能你常常使用云音乐,却不曾想过这些问题。现在来看看作者对这些问题的思考吧。

    2017-05-22
  • 作品集讲座 | 交互设计与工业设计的关系?

    专注艺术留学作品集辅导前几期克瑞斯带同学们分析了景观设计、建筑设计和室内设计三大专业。今天为大家分享艺术作品集比较热门的交互设计和工业设计专业,对于交互设计,许多同学们都不太了解,甚至因为同样涉及到产品,因此容易和工业设计混为一谈 ,今天克瑞斯就来跟大家详细讲一讲交互设计与工业设计的区别,希望同学们在选择专业上更加清晰明了。如今的工业设计变得非常的宽泛,它本身就是一个非常需要人们来思考的概念思维,并且它的设计思维都是从产品的整体外形线条...

    2018-03-31