改版提升产品—如何搭建产品结构层?

我在上一篇文章中(详情见《UI设计师面临的问题—如何改版提升产品?》)提到,改版提升产品并不是只简单从表现层,即视觉层面改版就可以提升产品的。从产品视觉层面进行改版,只是提升产品体验的一部分。那么既然改版产品,那就想让产品整体表现更好,视觉层面改版只是提升了视觉层面的体验。正如我之前举的例子,视觉设计师好似产品的美妆师,更多的职责是把产品的界面包装的更好看。并未动产品的“骨架”,还记得上一篇文章中的那个例子吗?一个女生身高150cm,体重140斤,无论你再怎么怎么化妆,脸蛋再怎么好看也能改变她内部骨架对她的的限制。

之前也提到产品的用户体验要素包括五个层面:表现层、框架层、结构层、范围层、战略层。既然提升产品,那么必然这五个层面必不可少。那么又由于这五个层的关系是这样的:每个层面都是根据它下面的那个层面来决定的。所以,表现层由框架层决定,框架则建立在结构层的基础上,结构层的设计基于范围层,范围层是根据战略层来制定。这种依赖性,意味着在战略层上的决定将具有某种自下而上的的“连锁效应”。

那作为视觉设计师的我们,一般被应聘到公司,产品所要研发基本功能已经确定,不然我想公司也不会招聘视觉设计师。而产品的基本功已经由这个公司高层即决策者已经确定。那么也就是说产品的「战略成」和「范围层」(产品所包含的最功能)基本已经确定。那么作为视觉设计师的我们要想优化产品,那必然要把精力放在产品的其他层面,即:「结构层」、「框架层」和「表现层」。因为产品的另外两个层面「战略层」、「范围层」已经由公司高层确定。

既然『战略层』和『范围层』我们几乎无法改变,那我们就应该把改版软件的重点放在后面三个层面上。又由于产品的下一层决定上一层,那么我们若是想改版产品那就要从,产品的『结构层』入手。

产品的结构层:结构层是五个层面的第三层,用来设计用户如何到达某个页面,并且在他们做完事情之后去到某个地方。它也适当的将我们关注点从抽象的决策层(战略层)和范围层的问题上,转移到更能影响最后的用户体验的具体因素。那么移动端的信息架构有哪几种方式呢?下面我也总结了下,并分开阐述:

移动端信息架构
移动设备也有自己的一套信息架构模式。但是移动站点或应用的架构并没有一定之规。比如下面这些比较热门常用的模式:分层结构、轴辐式结构、套娃结构、标签视图、便当盒结构及筛选视图结构。那我们一一举例分析他们各个的利弊。

1.分层结构

1.png

分层结构模式是一种比较标准的网站结构,其拥有索引页及一系列子页。对于响应式网站,可能这是唯一可用的模式了,不过你也可以自己构思其他模式来针对移动端量身定制用户体验。

Luke Wroblewski的“移动为先”方法可以帮助我们将注意力先集中到关键的内容上,例如有助于打造优秀用户体验的功能及用户旅程等。

适合于
组织需要遵循台式机网站结构的复杂型网站结构。

要注意的问题
导航。多层面导航结构容易给使用小屏幕的用户带来问题。

2.轴辐式结构轴辐式结构

2.png

轴辐式结构可让用户通过中央索引向外导航。这是iPhone默认采用的模式。用户不能在各个“辐条”之间进行导航切换,只能先回到轴心再出去。这个方式在历史上一直用于工作流程存在限制(通常是表单或购买流程等技术限制)的台式机情况,但其现在也开始逐渐流行到了移动端,因为在移动端用户往往需要专注于单项任务,另外设备的形状因素也造成全局导航使用比较不便。

适合于
每个功能都有自己内部导航和用途的多功能工具。

要注意
需要执行多任务的用户

3.套娃结构

3.png

套娃结构模式能够以相对线性的方式引领用户查看细节内容。当用户身处环境不便时,这种导航方式相对比较快捷简单。其简单的前后推进模式还能让用户清楚明确地知道自己目前在内容结构的什么位置。

适合于
主题单一或彼此相近的应用或网站。也可用作其他模式的子模式,例如标准分层结构或轴辐式结构模式。

要注意
用户无法快速在不同板块直接切换,所以要考虑其适用性,不能成为对内容探索的障碍。

4.标签视图

4.png

这是普通应用用户比较熟悉的模式之一。其实际上就是通过工具栏菜单把一系列板块绑在一起。这种方式可以方便用户在首次打开时快速浏览并理解应用的全部功能。

适合于
主题类似的工具类应用。多任务。

要注意
不要做的太复杂。这一模式最适合于简单的内容结构。

5.便当盒/仪表盘

5.png

便当盒或者叫仪表板模式可以通过使用组件形式展示相关工具或内容的不同部分将详细具体的内容直接呈现到索引屏幕上。这一模式比较复杂,因此更适合于平板电脑。其可以让用户一眼发现关键信息,因此功效强大。但是这种模式同时也严重依赖于设计界面的优劣以及信息呈现是否明确。

适合于
主题类似的多功能工具和基于内容的平板电脑应用。

要注意
平板电脑的屏幕较大,因此能够留出更大的空间发挥这一模式。但设计时尤其要注意理解用户与各部分内容之间进行交互的方式,以便确保应用的简便和乐趣性。

6.筛选视图

6.png

筛选视图模式可以让用户通过选择筛选器选项形成分类视图以便在系列数据中进行导航。筛选以及分类搜索方法的使用是方便用户以自己喜爱的方式探索内容的好办法。

适合于
内容量大的应用或网站,例如文章、图片和视频类网站。可以用做杂志类应用或网站的模板,或者用作其他导航模式的子模式。

要注意
移动端。考虑到复杂性问题,筛选器和分类搜索在比较小的屏幕上显示时可能会有困难。

最后:
开发出适合于手机和平板电脑的信息架构只是打造优秀移动用户体验的第一步。上面列举的这六种,关于「结构层」的布局方式,只是现在最常用的的布局方式,在一个软件里 可能会兼具了好几种架构的布局方式。由于每个产品行业特性和属性的不同,并不能一概而论,给一个具体的架构方式。具体采取那种结构层的布局方式,还需根据你的产品具体应用。万变不离其宗,了解每一种架构的优、劣点,再结合产品的具体内容、行业、等特性,作出适合自己产品结构层布局的产品。

这是我简单梳理的结构层的布局,希望这些能在你完善产品的路上帮到你。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容