本文主要总结了产品设计中结构层的设计方法和思路,输出的产品是产品结构图。
在讲方法之前,我们首先要了解产品结构层在产品设计中处于什么位置。这里引用《用户体验要素》中非常经典的产品框架体系。
战略层:清晰的产品战略需要明确回答两个问题:
用户能从产品中得到什么?我们能从产品中得到什么?对应用户需求和产品目标。 (为什么我们要开发这个产品?)
范围层:根据产品侧重功能还是内容进行差异化分析。对于功能性产品,要考虑核心功能的确定以及功能的优先顺序。很多工具类app都是老板直接聘用的;对于信息型产品,要考虑核心内容的确定和内容的优先顺序,比如数据分析网站、数据即信息。
结构层:构建结构层涉及交互设计和信息架构两个方面。交互设计是关于用户在界面上的操作、完成任务和获取信息的。其实就是分析用户、信息、用户和信息之间的路径;信息框架侧重于向用户有效地表达信息。
框架层:进一步细化结构,确定非常详细的界面外观、导航和信息设计。结构层相当于构建了一个骨架,框架层需要丰富这个骨架。
表现层:视觉设计,输出高保真原型。
可以看出,产品结构层处于中间,处于从抽象到具体的过渡阶段。同样,产品结构层的设计也是产品设计中最考验抽象能力和具体能力的阶段。在抽象层面,需要对需求、功能、数据进行分类和组织;具体来说,要体现用户的需求。
本文对结构层进行了详细的讲解,介绍了产品设计的方法(场景分类、功能结构图、信息结构图、产品结构图),希望大家能够学会具体思维和抽象思维。
讲很多概念会让大家有听不懂的感觉,总感觉有点落后。在这里,我们将以读书产品为例,系统地阐述产品设计的思路和方法。
前置条件:范围层确定了阅读书籍的各种功能,比如选择书籍、添加书架管理自己的书籍、分组书籍、发布书籍、阅读、添加书签、浏览内容等等等等,有很多功能。我们面对困惑,如何实现有序分类呢?利用场景分类方法,我们可以联系现实中的场景,根据场景进行粗略的分类。
开始讲故事
小明最近迷上了养生,想买一本养生方面的书来学习,于是他找到了附近的一家书店。这家书店生意很好。店里有各种宣传海报,包括本月畅销书海报(畅销书推荐)、著名作家推荐海报(作者推荐)、新书海报(新书推荐)等。都在书店门口,读者可以很方便地购买。哇,还有最近很火的《长安十二辰》和《破冰行动》。铁杆粉丝小明立即各拿了一本。
高兴之余,小明差点忘了自己要买一本健康书,就开始往里面翻看。聪明的小明发现书店里的书架上有类别名称(类别),于是小明就问服务员养生保健的书架在哪里(搜索)。得知在二楼后,小明去挑选,但小明还是找不到,于是又询问了一旁的服务员(历史搜索),终于找到了健康书架。
我发现养生方面的书实在是太多了,我就拿出几本书仔细地看了起来。小明做事很有条理。他先看了书的封面和作者,然后看了简介和目录,然后选了几章来了解。最后看了豆瓣上这本书的评论(看书评),最终选择了大名鼎鼎的《黄帝内经》。
小明拿着两本书,来到了收银台。收银员告诉小明,购买会员卡可以享受买多少买多少的折扣。天哪,买100送100就等于赚100了!小明立即掏出钱包,购买了一张100元的会员卡来付账。收银员在书店的系统中记录了小明的个人信息和购书信息。
小明回到家,兴奋极了,开始往书架上添了两本小说。他把《破冰行动》和《长安十二辰》放在书架一楼(已添加到书架上)。这层楼全是小说(成组),然后躺在沙发上开始看《黄帝内经》。太漂亮了,我一定要和我的朋友小花分享,于是小明拿起手机给小花拍了一张照片。小明妈妈约小明去吃饭,小明在书上加了书签。
未完待续(读者可以尝试自己想象的阅读场景)。
功能结构图
根据场景,您可以直观地了解通用功能模块。并画出如下功能结构图。
这么容易就有吗?功能结构突然变得清晰起来。
功能结构图的定义及作用
定义:以功能模块为类别,介绍模块下各功能组成的图表。
影响:
梳理需求,鸟瞰整个产品页面的功能结构形成直观的认识。思考并明确产品的功能模块和功能组件。信息结构图
但它只是一个骨架,需要有血有肉才能成为产品。
什么叫有血有肉?
细心的朋友会发现,信息架构是在用户体验元素的结构层。是的,有血有肉就是信息!您一定听说过信息结构图。这里我介绍一下信息结构图。
信息结构图定义及作用
定义:指从产品的实际页面中抽象出产品数据并组合分类的图表。
影响:
对复杂内容的信息成分进行梳理,避免信息丢失和混乱;供开发工程师建立数据库参考。
怎么画呢?
画完功能结构图后,需要思考一个问题。这些场景涉及哪些对象?了解编程的朋友应该都知道基于对象的编程思想。一切都是对象。这里我们可以提出四个对象::书,我,书架,评论。请记住,一切都是对象,评论也是如此!
产品结构图
好的!现在已经有了骨架,有血肉了,但连产品的雏形都称不上。需要将产品功能结构图和信息结构图结合起来,呈现产品的原型。于是,产品结构图就诞生了!
产品结构图是综合展示产品信息和功能逻辑的图。简单地说,产品结构图是产品原型的简化表达。
这里我们需要仔细分析一下功能结构图。我们可以将大体功能大致设置为首页、搜索、图书详情页、个人中心、书架、阅读页六个功能页面,然后根据子功能的权重进行优先级排序。然后填写每个对象的信息,慢慢的产品结构图就出现了!
读书的所有产品结构图我们这里就不画了。我们为首页和图书详情页画一个简单的产品结构图,如下:
概括
最后用下面的公式作为本章的总结。把复杂的事情简单化,才是正道!
功能结构图(骨架)+信息结构图(血肉)=产品结构图(简化版产品原型)