2018年6月7号网易系列-网易云阅读-原型制作思路

最近下了网易的几款软件，网易蜗牛读书、网易云阅读、网易公开课、网易云课堂、网易云音乐、网易美学、网易严选、网易考拉，就这些软件，分别针对不同的情况做一些讲解。

0截图.png

一、说明

本次制作的目的是快速搭建一个APP的原型，考虑如何模块化搭建，并非以实际功能制作为目的，并适当包含一些标注和思考方面的内容。

我们在日常的工作中会有很多的想法，想法落地需要一定的时间和方法，既然都有了想法，那么尽快落地才是真道理，不要让灵感一闪就过去了，说不定这就是以后价格几百万的一个点子（记得分了百分之一给我）。

原型制作思路要先确保你有一个想法或者说有一个问题被抛了出来。比如我每天都会抛出来一个问题，我在抛问题的同时已准备好答案，但我还是希望“思维的碰撞才会发现有别人想到了你想不到内容”。

5说明.jpg

网易云阅读以下简称云阅读。

二、准备工作

1、 网易云阅读app；

2、 已经拆分好的思维导图，这里在拆分思维导图的时候需要注意定义模块化。模块化是指可组合、分解和更换的单元。我们把一种处理复杂功能需求分解成为更好的可管理模块的方式。它可以通过在不同组合设定不同的功能，把一个需求题分解成多个小的独立、互相作用的功能，来形成自定义组合。

10思维导图说明.jpg

3、 对应几大主要目录的截图；

4、 软件：是用Axure全部重新画，还是用xiaopiu快速实现直接改原型，在或者是用墨刀快速实现做轻应用，在或者是Mockplus快速实现直接出图。那我们先用Axure来画吧，每个软件不同，对技术的体现也不同；

三、内容

1、 对应思维导图，先在Axure把基本的目录标注出来（本次我们只做三级目录）这里我们要先搭建目录，在一定的目录中我会把一些特定要用的模块直接做出来并在旁边写上标注，这样就可以根据需要直接拖拽。

但这里做哪些目录我们要先确认清楚：1引导页；2主目录页书城、书架、分类；3个人中心-侧边栏；4搜索栏；5其它。

1新建目录.jpg

2、 引导页：

引导页是指引说明，可以作为广告显示，也可以做分类跳转。比如云阅读在引导页就做了男生、女生的分类选择，这样在最开始就直接进行判断。原型制作这里需给出提示，一个是触发，一个是对应的跳转（对应做跳转和触发，那么这里产品就需要提出要求做成H5格式的，方便应急更换。不然每次移动端发版比较麻烦）。

2引导页.png

3、 书城：

1、 书城首页

按照云阅读的思路书城为主页。通过前面我们做的思维导图，在书城（包括书架和分类）还包括顶部菜单和弹出框这块。

按照理解常规的布局方式：顶部菜单中包含个人中心、搜索两个模块，这里是分别跳转过去。

下面是书城的不同菜单，每个菜单都可以同不同的排版布局。这里的概念是对应后台如何设定模板。我们这里需要把对应的模板的样式都做出来，并进行说明。

4书城-主页.jpg

2、 模板样式

2.1顶部：个人和搜索栏目。（2.1不做输出了）
2.1.1个人：个人这里整个是一个大的栏目，这里不能说是个人了，应该说是整个侧边栏。
2.1.1.1个人中心：
2.1.1.2钱：
2.1.1.2.1余额
2.1.1.2.2红包
2.1.1.2.3积分商城
2.1.1.3我的消息
2.1.1.4每日签到
2.1.1.5阅读圈
2.1.1.6在线看书免流量
2.1.1.7已购和上传
2.1.1.8笔记
2.1.1.9阅读历史
2.1.1.10文章收藏
2.1.1.11帮助与反馈
2.1.1.12设置
2.1.1.13夜间
2.1.2搜索栏目：搜索栏建立的时候考虑全部展示、只展示图标两种方式，所对应的效果都是跳转到搜索界面。搜索界面主要有四部分组成：
2.1.2.1搜索关键词（搜索关键词为后台控制前台显示）；
2.1.2.2搜索关键词下拉列表（根据输入的关键词匹配对应的书名，按照阅读量量最高的在最前面显示）；
2.1.2.3大家都在搜索（相关推荐，后台推荐显示的内容）；
2.1.2.4搜索历史/删除搜索历史（用户进行搜索后将搜索的结果保存下，用户可手动删除历史记录或选择清空历史记录）。

2.2分类：分类（书籍按照双属性添加到分类中）这里我们就不细说了，按照文字对应显示。关于分类如何设定这块我们可以在后台设定两种分类模式：一个是属于分类下的，这块是主定义，另外一个可以设定推荐下的。例如三体既科幻奇幻类又属于本周强推。

2.3模板内容：

例如一大四小两排显示，大的需要显示封面、标题、作者、分类、简介；小的需要显示封面、标题、作者就可以了。大的这里有简介，至于简介是两行还是三行可以在后面出高保真模型的时候在去定义，这里有一个思路就可以。 11模板.jpg

2.3通用：页面最下面是书城（主页）、书架、分类菜单按钮。

12顶部栏目.jpg
13底部栏目.jpg

4、 书架，通过书架的展示界面我们可以看到的是一行三个模板一样。（相同类目不做输出）

5、 分类，通过分类的展示界面我们可以看到的是一行三个模板一样。（相同类目不做输出）

四、结束
这次原型制作的思路就是，一个app的设计点中有很多关联性都是互通的，那么是否每一个模块都要固定设计还是说可以走通用模块化设计的思路。如果这次不是用网易云阅读这款软件来讲，如果是用滴滴出行，那么用代驾和专车、甚至说公交车这块界面展示有什么区别吗？界面的展示形态都是一样的，但对应不同的属性，有对应的调整，我们在产品一定的时期内，应该保持核心点统一的概念。

14结束.jpg 15结尾.jpg