小红书产品分析附高保真Axure原型

种草基地产品分析报告----小红书

小红书--“标记你的生活”------社区和购物商城结合

核心功能 ：用标记，及文字说明分享生活小贴士和心得，笔记创建，笔记搜索，个人主页管理，笔记内标签的商品购买。

满足需求: 大体来自三个方面：

一是发布“笔记”的用户，分享记录生活的方方面面，创建笔记的页面简洁美观，思维导向非常流畅，符合年轻人的审美，在创建笔记时，添加后跟着添加标签的步骤，这是小红书的神来之笔，对产品的标签化，对笔记检索垫定了基础。而后文字编辑的表情能增添趣味性，给干巴巴的文字刷了一层油增加可读性。

添加---添加标签（名称，地点，口语化描述，自定义）给与了用户编写笔记最大的自由度，----- 文字描述-------发布上传--------笔记查看，及和阅读小红书交流，点赞查看。 

二是阅读“笔记”的用户，小红书的关键字搜索做的非常人性化，输入关键词，在笔记创建时采用“标记”，使得笔记里的主题更加明确，让搜索“笔记”很少文不对题，因为他在创建的时候就做好的切割，搜索起来立必定更加准确。小红书非常好的涵纳了对现代女性的需求，“我想买这样东西/我想做这件事”（对该物品已有购买欲）--------“到底好不好呢，看看别人说”（搜索相关笔记）----------“好像还不错，再问问版主”（讨论）-----------“买吧/不买”（引导站内消费）对产品使用的体验，购买欲强，而不再是一窝蜂跟着买，这时参考体验感非常重要，举个例子，就淘宝这个渠道，我分析一下原始购买者的路径，1，对购物后使用体验分享，半数不会分享，而一般使用分享蓄水池就三类，1，订单评论，（多半被水军占领，或寥寥几句，不够详尽）2，微博分享（平台杂，关键词沉底）3，朋友圈（局限性）

三是在阅读完笔记后，部分用户产生了购买欲望，下滑笔记对应显示的就是标签产品。对阅读完笔记主的笔记后，用户不盲目，更加清晰明了。

（1）用户自主互动率高，分享内容广泛，

逐渐转向做社区，实现UGC模式，积攒有长期保证输出的忠实用户。目前各类女性电商平台也都在向“社区+内容+电商”的模式转变，内容质量的提升，用户的数量也在逐渐的增大，  

（2）社区做的更加结构化和个性化

从版本迭代中可以看出小红书在每一个版本都在不断的增加标签，去完善标签这项功能，是想通过标签去结构化社区里的内容，通过记录用户的使用行为，去更加准确的去推荐笔记和商品，记录用户的行为，比如给哪个笔记进行点赞，或者收藏了哪些笔记，还有停留时间，可以为每一个用户的不同行为贴上个性化的“标签”，这样更能精准的投其所好，为用户去推荐笔记和商品。

（3）完善供应链，增加购物品类

（4）引导分享

小红书还是需要找到适合自己的渠道，和海外品牌直接合作也许是很好的办法，并且在如今政策的改革和竞品不断出现的情况下，更应该找到适合自己的渠道，提高用户的忠实度和用户体验。

（5）商业模式的衍生服务

我在上面也有提过，希望小红书从小而美转化成为大而全，新增一些额外的衍生服务，可以考虑一条龙服务发展或者与海外品牌的合作，比如一些退税之类的功能，但是这些也是需要待商榷的功能，还是需要从多方面去考虑。

小红书的社区可以横向发展，从垂直社区向综合性社区发展，扩充服务的用户人群再寻找增长空间，慢慢从小而美做到大而全，并且它独有的模式会得到更多用户喜爱小红书以后的发展很显然不仅仅在跨境电商，只要女性有购买欲，那么社区就会存在，加上奖励机制，高内容的输出，小红书会在成熟期发展的越来越好。

总结：

随着社区在互联网的发展趋势大好，小红书凭借UGC做到了一个成熟的产品，内容属性似乎是可以从水平社区里切场景的一大原因，（内容非常丰富），也就是用户自身的调性，让用户在分享自己具体的生活方式的时候，想起的是小红书。小红书是属于更深层的垂直分类，在垂直社区社区的基础上延伸，就是小红书的电商模式，目前存在天花板，（从销售量可以看出）。

而且小红书的内容属性较强，电商比较弱势，其商业变现则是有自营的商城，虽然现在变现率还是很低，但是还是可以形成低销售额的商业变现，不过最近小红书有了阿里的投资，电商的力度也在不断增大，小红书能否走好完善电商功能这步，拭目以待。

拟小红书交互设计：

原页面分析：

1）阅读完相关产品，购买导向性不强

2）购物页面，下滑推荐内容太杂，客户购买欲望瞬时被推荐商品吸引，本身种草购买就是有“一时头脑发热的”，给予太多思考选择空间，反而会选择再看看，再看看别的，一次购买就断链了。改善功能：推荐信息应精简，下滑商品推荐页面，分两类，同品牌推荐，（意在笼络对这个牌子有意向限制的消费者）不同品牌推荐（对同款，同色系，同质地的推荐）

3）

发送个人日志

阅读他人日志

主页设置：

如果按照单单按照个人关注的博主发表文章来进行首页推送，由于发帖率，如果每天登陆首页查询内容，较空洞。所以按照系统推荐的布局安排主页

上篇文章使用文本框的文字改变实现进度条的加载效果，那文本框的文字改变事件还能做些什么呢？

这次我们用它来实现：手机号动态输入时，判断手机号的正确性。

1、首先拖入文本框和矩形两个元件，命名为phonenum和tip。在属性中给文本框添加提示语和限制输入长度为11，tip矩形设置圆角，添加文字，再设置隐藏

2、tip矩形添加事件，显示时等待1s然后隐藏

3、[重要]  思路分两部分，我们知道手机号第一个数是1，第二个数是3、5、、7、8、9。

（1）当输入第一个数时就得判断是不是1。如图Case1 意思是：如果文本框文字是数字，且文本长度是1，且文本不是1，则显示tip。

（2）当输入第二个以后的数时就得判断第一第二位是不是13、15、17、18、19。如图Case2 意思是：如果文本框文字是数字，且文本长度大于等于2，且头两个数字不是13、15、17、18或19，则显示tip。

到这就完成了

总结：

1、文本框每输入一个文字（文字改变），则执行一次判断，做到实时监测

2、函数length是获取文本的长度

3、函数 substr（star,length） 表示 从某个位置开始向右截取一定长度的字符串

福利

演示地址： >  密码：gsww

当时看了本书，网站蓝图，然后瞎倒动起来。如下

一般注册过程包括以下步骤：

1用户按照提示填写表单。

2用户在填写表单的时候提示是正确否输入了内容，如果没有，提示用户。

3用户提交表单，所有项是否都正确，如果出错，提示哪项有错误。

4用户成功提交表单或者取消表单。

在填写表单过程中，常见验证方法有如下几种：

1用户是否在注册的用户名或ID中使用了非法字符。

2用户是否输入了内容。

3两次输入的密码是否一致。

4是否是合格的Email地址。

5长度是否在6-12个字符之间。

下面我们用Axure70来完成通用注册的设计，以下包括最基本的输入框变化和提示文字变化。

一表单的布局

拖拽7个文本标签，然后给它们命名为如图所示。

全部选中，点击右对齐使得他们都对其，再点击垂直分布，使他们的上下间距相同。

拖拽5个文本框，分别对应如下项目，然后全选，选择左对齐。

选中每行的文本和文本框选择上下居中，使每行的都对其。

为性别添加相应输入部件，用两个单选按钮，对齐。姓名为男和女。

选中它们，右键，选择指定单选按钮组，然后在d出的框中输入组名性别，这样就实现了单选。

为所在地添加一个下拉列表部件。然后编辑列表项，为列表条添加选项。

再添加一个按钮部件，命名为: 立即注册

二制作输入框变化框边

当我们填写某个文本框输入框时，输入框会被高光显示，然后右侧提示用户输入什么。如果输入的不符合要求，右侧会提示。

选中5个文本输入框，右键，选择隐藏边框。（最后会说明为什么隐藏）

拖拽一个动态面板，命名为邮箱。再添加一个状态，分别命名为输入和未输入。

再输入状态下添加两个矩形，边框颜色和填充颜色如图。第二个矩形是提示文字。

矩形大小比文本框多出2个像素大小，为了切换状态时完全覆盖最初的文本框。

把最先放上去的那个文本输入框置于顶层。

切换到未输入状态，把输入状态下第一个矩形复制到这里，再把边框颜色改为默认的灰色。

修改面板顺序，把未输入状态放在前面。

面板顺序

点击预览，界面如下图所示。

三让边框动起来

为我的邮箱输入框添加如下状态，使得鼠标移动到那里未输入状态，不在那里为未输入状态。

1

生成后看到如下界面：

四添加其他输入框和提示

这部需要把邮箱那部分制作好的动态面板复制到其他输入项中。

复制到其他选项，注意调整坐标。

修改其他动态面板名字。

需改其他动态面板输入状态下的提示文字。

1

把动态面板都至于底层，输入框置于顶层。

分别添加状态，与邮箱添加状态时一样。

五完成效果

在此我们将最开始的文本输入框隐藏，代替它的的动态面板的未输入状态，边框为黑色，在鼠标移动后就变为输入状态，显示为蓝色和提示文字。这样就完成了注册设计中的边框效果和提示文字。还有验证输入，验证密码，处理验证码等以后再做总结。

还有下篇来着，但是实在太费时间了。

原型毕竟只是实现想法的过程，大家也不要太追求强交互，高保真。

一位有PC端原型设计经验的产品人员,设计移动端产品原型时,遇到的第一个问题可能就是页面拖动的效果了我们在设计PC端产品时,利用鼠标滚轮进行整个页面的展示,然后到了移动端,利用手指进行拖动,滑动展示整个页面两种交互方式截然区别

axure制作移动端产品原型时,会遇到很多难题,建议产品同事尝试一些诸如mockplus等更适合移动端的原型设计工具当然,axure是完全能够实现移动端交互的,只是我们需要利用动态模板、坐标定位等等方式灵活的实现目标

接下来进入主题,跟小伙伴们分享一下如何利用axure实现移动端页面拖动展示效果

打开axure前,小伙伴们不妨先设想一下任务的实现方法：

1、移动端显示的页面是固定尺寸的,里面的整体页面可能会超出固定尺寸范围,所以我们需要建立一个动态模板,使其成为固定尺寸的页面,而把超长的整体页面放入其中

2、整体页面必须能够被拖拽,所以整体页面又是一个动态面板

3、在我们使用移动端产品,进入页面后,向下拖拽,一般页面会被下拉,而且上方会出现放开刷新的提示；同理,我们手指上滑,页面被拖至底部,再不停上滑,页面会被上拉,手指放开后,页面下滑至原位所以我们axure中对整体页面的动态模板需要设置离开顶部或者离开底部时,自动返回原位的交互

这三个实现方法,是我们实现拖动交互的主要思路接着我们就具体看一下如何在axure中实现目标

1、准备工作：打开axure,新建文档,添加一张iphone的背景素材,顶部添加的wifi和电量的信息,以及顶部导航栏（这些素材百度都能够找到,ios8 UIkit）,准备工作完毕

2、添加一个动态面板,这个面板相当于我们的屏幕,所以名字能够称为“固定页面”

3、动态面板内再添加一个动态面板,这第二个面板相当于我们要展示的内容,需要拖动才能展示整个内容,长度自然也比“固定页面”要长,能够称之为“长内容”

4、长内容的面板内添加正文内容,这里我添加了一张

5、接下来先实现长面板的拖动功能,在固定页面内对长内容面板添加onDrag交互,交互的内容是move,而且move with y,也就是长面只能沿着Y轴拖动

6、拖动功能已经实现,我们能够先预先浏览一下已经完成的效果（点击axure *** 作栏的preview按钮）,尝试着上下拖动,结果符合预期,只是拖动后,不可以复位,那么接下去就要实现复位的功能

7、为了实现复位,我们需要在固定页面的顶部和底部添加两个判断用的矩形顶部的矩形我们暂且称之为“上离开判断区域”,顾名思义,当长内容面板向下拖动,离开“上离开判断区域”,长内容需要move到原始的"0,0"坐标,这个交互我们称之为“下拉复位”判断区域能够设置为透明,与长内容同宽,高度为象征性的2px

8、选择长内容面板,在onDrag动作中添加新的交互“下拉复位”,增加触发条件：当area of widget 长内容 is not over area of widget 上离开判断区域那么首先wAIt 400ms,接着move 长内容,编辑结果 move to X：0 Y：0

注意：编辑完下拉复位后,这里有一个很重要的改动,在交互栏中,右击把“下拉复位”的else if条件修改为if必须这样做,不然下拉复位的动作没有办法实现至于这样做的原因,就留给小伙伴们思考吧

9、上拉复位的动作完成后,我们还要实现下拉复位首先我们添加一个判断框,边框与填充均为透明,尺寸为长内容的宽度与象征性的2px,定位于固定页的底部

10、在实现下拉复位的时候,我们给长内容的复原位定为X：0和Y：0,这个很容易理解,长面板向上复位时肯定移动到（0,0）的位置但现在实现上拉复位,我们需要计算长面板的高度,这是由于长面板拖到底部后,固定页面显示的是长面板的下部分内容这里可能有些费解,看我的截图也许能帮助理解

11、经过上一步的 *** 作,我们得知当整个长内容显示到最底部时,整个长内容的定位为（0,-295）,接下去就和实现下拉复位一样了,在交互栏onDrag动作中添加交互“上拉复位”,添加触发条件 当area of widget 长内容 is not over area of widget 下离开判断区域那么首先wAIt 400ms,接着move 长内容,编辑结果 move to X：0 Y：-295

编辑完上拉复位后,在交互栏中,右击把“上拉复位”的else if条件修改为if

12、全部条件编辑完毕,查看一下交互栏onDrag动作中的全部交互

13、大功告成,赶紧运行一下观察效果

总结：

利用axure实现移动端最基本的上拉与下拉动作是如此复杂,所以我还是建议利用其它原型工具制作移动端原型然而即便如此,axure还是有其优势,实现静态的页面要比其它原型工具都要便利

​

Default 是一款掌上原型笔记，如果你对移动产品有兴趣，最好使用 Default 来画你的原型App。

Default 每个项目都是app，一个真正 APP 体验，所有的交互都是原汁原味的。

Default 可以做App、H5、小程序的可交互原型App。

特点

1 7个常用app母版

2 每个页面不止一屏幕的空间，可无限向下添加元件

3 丰富的元件，简单拖拉调整元件位置和大小

4 自定义文字、颜色、背景、交互等

5 原汁原味的交互能力，如果说Axure是最好的PRD工具，那Default就是你最好的交互原型工具

交互

1 页面滑动 在超过一屏幕时，页面可以滑动

2 页面跳转 点击交互，新页面可配置两种常见的动画显示方式

3 d框 点击交互，d框可配置两种常见的风格

4 输入 文字输入

20

1 新增新页面的动画显示方式，Push-页面从右至左动画显示，Present-页面从下至上动画显示

2新的事件 *** 作体验，绑定事件、替换事件、创建事件

3新的首页体验

4新的原型 *** 作体验，原型为app文件，可预览、编辑、删除、重命名项目

5新增当前原型的所有子页面的查看，可直接预览、编辑、删除

未来

1 用户可以自己创建元件库

2 提供一些常用图标

3 更多的元件

4 更多的原生交互

实现变量在页面中的传递，这是一个经常我们会用到的功能，常用的场景是，用户通过用户名和密码进行登录，页面跳转到首页，首页中出现用户名等信息，基本实现效果如下

现在我们进行分析

用户要 *** 作什么 ：

输入用户名和密码，点击登录

跳转到首页

给用户什么反馈 ：

用户点击完登录之后，跳转到首页中

登录的用户名信息显示在跳转的页面中

实现分析 ：该案例主要是要实现用户登录信息在页面之间的传递，借助全局变量和局部变量可以实现

具体步骤 ：

我们以在首页中显示用户名和密码为案例，进行讨论

1、做元件准备

建立两个页面，命名为登录页面和首页；

在登录页面中拖入一个矩形，添加两个文本标签分别命名为“用户名”、“密码”；再添加两个文本框，将文本框分别命名为“username”、“password”，注意将password文本框的文本类型设定为“密码”；接下来添加一个提交按钮，命名为登录

最后在首页中，拖入一个矩形

2、添加全局变量，分别是username和 password； *** 作方法：项目——全局变量——添加全局变量——确定

3、为全局变量赋值，在这里我们会用到局部变量，由于用户唯一进行点击的是“登录”按钮，所以我们需要给登录按钮“鼠标单击时”添加交互

   首先分别为每个全局变量添加一个局部变量，将局部变量的元件文字值为登录页面输入的值，即借助局部变量，现将登录输入的数据传递到局部变量，再由局部变量传给全局变量

   点击添加动作下面的“设置变量值”—选择“username”——点击“fx”——插入局部变量——设置元件文字为“username”——确定，同理去设定全局变量password。

两个变量完成之后，点击“打开链接”——选择链接到首页

4、为首页页面添加交互，选择“页面载入时”——“设置文本”——“矩形”——“fx”——在全局变量中输入“用户名：，密码：”并插入对应的变量，如下图图九

就能实现变量值在页面中的传递

思考和总结：

要实现变量值在页面中的传递，主要是借助全局变量和局部变量，先设定全局变量，然后插入局部变量，将要传递的数据存入到局部变量，再由局部变量传给全局变量，实现传递。

笔者通过产品概况、产品结构、业务流程图、全局说明、功能性需求、非功能性需求分析等模块，系统输出这一份关于“FITLIFE”小程序用户端的产品需求文档。

Hi~最近在对自己参与过的项目进行总结，希望可以和大家分享学习交流。输出内容是检视自己的方式，所以我就来吸取经验了。

通过研读各位优秀作者的精品，我学习到了不少知识。此次，以实际工作中遇到的情况作为案例，我将从0至1的产品中抽取重点模块进行分享。

为了阅读体验，我将尽量简化常规化的环节，本次采用AXURE梳理PRD——利用AXURE动态面板和内联框架，制作文档导航，提高浏览人员的阅读效率。

一、概述

1 产品介绍

2 文档修订记录

将重点模块添加对应的跳转链接，方便浏览人员迅速定位内容。

版本号规则：小数点后为当前版本的小更新，小数点前为大版本更新。

修订属性：新增、修改、删除

二、产品结构

1 信息结构图

2 功能结构图

由于完整结构图展开占很大的篇幅并且看不清楚，为了阅读体验，对结构图部分收缩。完整版结构图可在AXURE中查看。

三、业务流程图

建议将流程图统一整理至表格中，做成链接跳转形式，实现快速查阅。为了顺畅的需求阅读体验，将各自的流程图放在之后的需求描述部分中展示。

四、全局说明

1 名词术语说明

2 权限d窗

3 时间距离规范

31 时间规范

32 距离规范

4 异常情况

41 网络异常

手机网络连接异常，小程序d窗提示如下：

42 用户状态说明

五、功能性需求说明

良好的需求阅读体验需要保证阅读过程是顺畅的。

在这部分，首先列出需求清单，总览这次需求涉及的模块及简要信息。紧接着，按照需求模块-流程图-原型页面流转-原型需求拆解的叙述逻辑去完成各个模块的需求说明。

1 需求池&需求清单

11 需求管理池

需求类型：新增需求、需求调整、功能优化、BUG修复、UI优化

系统：涉及到的系统及模块

需求说明：简述需求

优先级判断：重要紧急、重要但不紧急、紧急但不重要、既不紧急也不重要（ps：我们要经常关注重要但不紧急的任务进度，避免重要紧急任务扎堆出现。）

12 需求清单

对需求管理池评估筛选后，将需求模块、对应功能、需求优先级、完成情况统一整理到表格中。同样的，这里将模块名称做成链接格式，快速查阅对应的需求模块。

优先级规范：p1、p2数字越小代表优先级越高。

2 新用户&首页模块

21 新用户登录流程图

22 新用户登录原型（大图）

23 首页

3 预约团课模块

31 团课预约流程图

32 团课预约页面流转

32 课程列表页

33 课程详情页

34 预约课程页

4 预约私教模块

41 私教预约流程图

42 私教预约页面流转

43 私教列表页

44 私教详情页

45 私教预约页

5 购卡模块

51 购卡流程图

52 购卡页面流程

53 购买储值卡页面

6 我的模块（个人中心）

61 个人页面

62 修改资料

63 我的卡包

64 我的课程包

65 我的优惠券

66 富文本页面

六、非功能性需求

非功能性需求，是比较容易忽视的部分，往往和性能、安全挂钩，影响着产品的稳定性与安全性。

以下仅仅是例子，具体方案需要根据业务情况和产品特性与相关人员深入沟通。

1 性能需求

响应时间：系统对请求做出响应的时间。例如系统处理一个>

Axure是产品经理必会工具，而平时练习的任务可以选择模仿优秀的交互页面，本篇指南介绍模拟qq登录效果的步骤（本指南适合已了解Axure基本 *** 作的小伙伴）。

总结出交互流程：

双击图标——d出登录页

点击状态按钮——出现状态菜单

输入账户密码——登录判断是否正确

保存相关素材，如腾讯图标、登录窗口、状态提示栏等等

双击后d出登陆页

在动作设置界面为动态面板d001登录界面选择淡入淡出效果

单击后d出菜单

在动作设置界面为动态面板d002状态菜单选择d出效果

判断密码正误

在动态面板d001登录界面上设置登录失败和登录成功的提示

以上就是关于小红书产品分析附高保真Axure原型全部的内容，包括:小红书产品分析附高保真Axure原型、Axure系列：使用文本框判断手机号正确性、Axure做注册模块的一些小 *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！