几个案例解析：如何一步步做出合理的策划方案

人人都是产品经理 2018-08-19 15:01:59

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

做产品方案的时候，我们经常会走进死胡同或者跑错路，最后不论是开发还是市场，对结果都不满意，产品自然就成了背锅侠！但是往往我们出方案的时候，多想一些问题，或许结果就不一样，跟新人交流的时候，发现一些能力需要可以单独训练，有意识的去理解一些东西，长期积累就会有自己的一套解决问题的思路。

1. 辨别真伪的能力

辨别真伪也就是老生常谈的真伪需求的能力，在产品经理的行业里，经常会进行需求的评审，需求的界定，看这个需求是否是真的有效

举个例子

行业：外卖行业

案例：打包费审核的功能

功能出发点：解决商家乱设打包费的需求

解读：如果从这个角度来讲，打包费审核完全没必要，原因有

• 未必所有的商家都乱设打包费，只是个别现象
• 及时设置了打包费审核，后台审核了，也没办法解决，除非后台做强制性的更改或下架商品的功能
• 打包费是商家自主行为，如果商家恶意设置打包费，是给自己添堵
• 如果真想解决此问题，在商家上传商品的时候设置打包费的选项，一个餐品打包费最多是多少
• 或许极个别的商家的打包费真的会比较高，可以在商家管理后台做好打包费配置即可，从源头控制

很显然，要在后台做一个打包费审核的功能，还需要让人专门处理此业务，对系统来说，是降低效率又不见得有效果的，所以，界定为伪需求。那么既然存在这样的问题，可替代方案如下：

1. 商家添加商品时打包费又两个选择【收打包费】【不收打包费】，打包费为行业标准，1元/份餐品；
2. 对于大型的打包盒，比如说探鱼这些商家，打包费可以开放设置（大型连锁或者知名品牌可以认定为不需要通过打包盒来赚取利润）。

辨别真伪的能力不仅仅体现在能辨别出来，更多的是能够用更灵活的方式来解决来自运营、消费者产生的问题，且不增加过多的额外工作。

2. 找到合适定位的能力

合适定位的能力，这个说的有点虚，用通俗的话来讲，就是找个抄的对象。在国内想要做一个App有大量的抄袭模仿对象，各大知名厂商已经做了很多的研究，剩下的就是模仿和创新。能不能找到合适的模块去进行创新，这个就比较重要。

案例1：外卖行业，推荐商家

功能出发点：外卖行业的推荐商家，很多事按照细分的行业来做的，比如说美团跟饿了么的【必吃菜品】【品质联盟】这些，但是对消费者来说，这真的是我想要的选择么？

解读：从消费者的心理出发，我去找吃的，可能出于几点

• 找新鲜：看看这附近有什么新鲜的店铺开业或者新的口味，外卖一个月都是那几家，早就腻了
• 找实惠：外卖分量不够，10块钱管饱的那种最好
• 速度快：能告诉我最快的是哪家么？

其次还有可能

• 这两天身体不舒服，想吃点口味淡的
• 我是湖南湖北人，我想吃点重口味的
• ……

因此，从这类具有标示性的标签入手，会更有效果。此类功能类似于一点点的餐牌设计以及lofter的标签设计，将商家分配不同的标签跟消费者的消费场景对应上，交叉进行推荐，比如说一个商家有很多种口味，那对应的消费者人群也会多，消费者通过对应标签可以快速找到对应的商品，对消费者和商家都是互利的，我们经常会遇到一个外卖店铺有几十种餐品，找半天还是不知道吃啥。

（配个截图，此功能已实现，后续看数据情况，再做追踪）

顺便说一下，之前饿了么有个版本放大对餐品的显示，做餐品的推荐，后来又改回来，具体是什么因素，不确定，但那也是一种尝试。

案例2：荔枝FM飞机稿

出发点：那是很早以前的一个版本，因为不好用，所以就干脆做一个交互飞机稿，当时做的时候有以下几个因素：

• 体验不好，最古老的版本体验非常不爽（详情可以戳这里：http://www.woshipm.com/ucd/209199.html）
• 当时在做交互设计，就尝试用新的交互设计思路去设计

解读：

当时荔枝FM算是国内比较早做电台的，同期出了喜马拉雅听，刚开始也没有荔枝FM那样火，但从交互上，主要由两个点：

1. 模拟电台操作：荔枝FM当时还是走拟物化设计（新进入互联网的可能觉得是历史），那从FM收音机的角度来说，都有一个旋钮，或者是老式的随身听，因此在主页的界面设计以及播放界面设计都有参考古老随身听的样式，既然复古，我们就彻底点
2. 数据整理：在当时做荔枝FM的飞机稿时，主要做的是数据层的整理，把繁杂的内容数据变得有序可循，让用户和博客可以更快找到合适自己的内容

对于合适的定位可以理解为：每个事物或许有自己固有的长相，但或许我们找到合适的逻辑后，只要抓住根本，那最后怎么玩，还是大家说了算，打破陈规，才更好玩。为什么音乐软件就一定要有那么大的播放界面；为什么订餐软件就一定要宣传店铺，不能是商品？

3. 解决问题的能力

这个就老生常谈了，解决问题的能力体现在对系统的掌握程度和开发自由度两个层面，产品经理实质是提供解决方案的，任何需求到手后，我们需要分析如何快速解决该问题。

案例1：招聘面试流程

出发点：销售类岗位进行招聘时，都是一大批一大批的面试，一个人可能同时面试很多岗位，一个公司会面试很多个求职者，因此提率，对求职者和公司都是最大的需求

解决方案：排队叫号，跟银行排队一样，针对这个场景，我们梳理了核心的问题

• 面试人员取号
• 面试人员查看各岗位当前排队情况及投递请求
• 企业招聘人员查看简历并选择是否面试，对面试的人进行初步评论
• 叫号及数据导出

针对以上四个问题，设计出如下流程（省略取号的环节，主要核心的流程是企业的发送通知循环以及面试后的符合不符合操作循环）

从流程图可以发现，核心逻辑并不复杂，解决了通知求职者来面试的需求以及对求职者进行评价需求即可；除此之外还可以做一些其他的功能，如求职者可以看到当前排队情况，根据实际情况进行简历投递，避免出现大量等待情况，可预知自己还要多久可以面试，在这时间内是否可以投递其他公司，进行多项选择；对于企业解决各种纸质简历分辨不清，电子档简历，电子记录每一个求职者和操作，可以清楚知道今天面试记录，电子档案，更清楚，提高双方的效率。

4. 了解数据的能力

对于数据，很多人应该不会陌生，如何从杂乱的数据找到规律，怎么处理数据之间的关系？

1. 一级页面到二级页面的流失率和转化率
2. 每个页面转化功能的设计及数据统计
3. 数据解读

最近在做小程序相关的项目，把腾讯的数据统计贴上来:

访问趋势类：

• time 时间
• session_cnt 打开次数
• visit_pv 访问次数
• visit_uv 访问人数
• visit_uv_new 新用户数
• stay_time_uv 人均停留时长 (浮点型，单位：秒)
• stay_time_session 次均停留时长 (浮点型，单位：秒)
• visit_depth 平均访问深度 (浮点型)

访问分布：

• access_source_session_cnt 访问来源分布
• access_staytime_info 访问时长分布
• access_depth_info 访问深度的分布

访问留存

• visit_uv_new 新增用户留存
• visit_uv 活跃用户留存

访问页面：

• page_path 页面路径
• page_visit_pv 访问次数
• page_visit_uv 访问人数
• page_staytime_pv 次均停留时长
• entrypage_pv 进入页次数
• exitpage_pv 退出页次数
• page_share_pv 转发次数
• page_share_uv 转发人数

总结

产品经理从拿到需求开始就需要对需求进行分解，判断到底什么样的方案可以解决此问题，并结合当前系统的一些功能点，给出最佳的方案；在交互设计的时候是参考竞品还是微创新，就看实际业务需求；最后就是核心业务梳理，一个功能的核心业务是什么，还有哪些可以搭配让功能更完善的，考虑进去，做产品是一个分解、组合、删减、再组合的过程！

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

面向中小企业SaaS的权限管理系统

人人都是产品经理 2018-08-19 15:02:17

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

本文基于面向某个垂直行业的SaaS系统的设计经验，抽象出一套适合中小企业的权限管理体系，目标是最大限度保留系统弹性的同时，把系统复杂度和开发成本尽可能降低。enjoy~

面向企业级的SaaS（软件及服务）系统，由于企业用户的规模和内部管理模式千差万别，设计一套具备足够弹性、符合绝大部分目标企业用户需求的权限管理系统，是一个很大的挑战。

我们可以看到，市面上面向多个行业的综合性SaaS系统，例如销售易、纷享销客等，由于它们的目标客户跨越了多个行业、多种规模，这些企业具备各种各样的内部管理风格和模式，在权限系统的管理上，往往做得非常复杂，不仅具备部门、角色、职位、数据等各个维度的权限管理，各个功能模块还有自己独立的权限管理，虽然具备最大的弹性，却给企业的系统管理带来较大的负担。

提炼的三个核心原则：

• 企业-管理员-普通账号三级权限
• 功能和数据权限分离
• 部门和角色分离

围绕上述三个基本原则，我们力图在满足中小企业需求的前提下保持足够的弹性，并严格控制复杂度和开发成本。详细描述如下。

1. 权限从上到下分为三个层级：企业账号（老板账号）、管理员账号、普通账号

对于中小企业来说，公司的实际控制人，往往是公司的创始人或自然人大股东，因此企业账号的使用者以及对应绑定的手机号码，都是公司的实际控制人，他应该掌握最核心、权限最大的企业账号，所以也可以称为“老板账号”。

但是在实际场景中，公司的实际控制人并不会直接管理公司的业务支撑系统，因此，需要在系统首次部署时，创建好企业账号，并由企业账号授权给某一个或多个系统管理员，由系统管理员去完成日常的角色创建、员工导入等工作。系统管理员，对应的一般就是HR或行政部门的管理人员。当然，企业账号的权限高于管理员账号，如果是小微型企业，也可以由企业账号直接替代管理员账号的功能。

除了企业账号和管理员账号之外，其他各级员工所持有的账号，都属于普通账号。普通账号的部门、角色、数据等权限的设置，一律由系统管理员配置。

三个权限层级示意图如下：

在实际系统中的核心业务步骤如下：

（1）企业购买系统时，创建一个企业账号，这个企业账号绑定的手机号码为公司实际控制人的手机号码。该手机号码必要时可以解绑（例如公司实际控制人变更），由于该功能触发频率很低，因此不需要在前端功能中实现，只需要在购买协议中写明，“购买企业可以通过书面方式提出企业账号手机号码绑定变更需求”即可。

（2）在部署和培训阶段，可指导企业账号持有人创建一个或多个管理员账号，该账号一般授权给行政总监或人力资源总监，后续配置即由管理员账号进行。

（3）管理员账号持有人需要接受系统培训，掌握部门创建、角色创建、功能和数据权限分配等基本操作。管理员所有操作都必须记录在案，供企业账号持有人监督，且管理员操作触发异常行为规则（如大量分配高等级权限等）时，系统会通过短信方式通知到企业账号持有人，确保企业账号对管理员的全方位掌控。

（4）企业账号可随时将管理员账号禁用或设定为离职，但管理员账号不可对企业账号进行任何配置或操作。

（5）企业账号默认拥有所有权限。

2. 功能权限和数据权限分离

功能权限，定义为可见、可以操作的功能范围。例如某一部分菜单，或者某个页面里的各种操作。

数据权限，定义为若干个数据类型里的具体可见范围，例如“客户”就是一个数据类型，它的权限举例如“无权限”、“我的客户”、“我所在部门的客户”、“我所在部门及下级部门的客户”。

通过功能权限和数据权限的分离，我们可以做到以下场景：需要开拓和维护客户的角色集合，都可以拥有“客户”这个菜单的权限，但不同的角色进入“客户”菜单的列表时，看到的客户范围各不相同，极端情况是看不到任何客户。且不同角色在同一个客户页面上，能进行的操作也不同，例如有的角色可以新建客户，有的却不行，这就要由功能权限来控制。

可见，通过功能权限和数据权限的分离和配合，我们在具体的权限分配上有了非常大的弹性，且在技术层面的后台系统的设计上，也非常合理、清晰。

而在具体设计上，需要保证以下4点：

1. 正确区分功能和数据，入口性和操作性的都应该归类为功能
2. 正确对数据进行分类，避免存在分类后的某些数据存在交集
3. 数据分类到多细的颗粒度，需要由行业特性决定
4. 数据权限区分为查看、编辑和删除

示例图如下，由于涉及具体产品，对某些文字进行了打码：

3、部门和角色分离

部门的定义，自然就是公司行政组织架构下的部门。

在本设计方案中，角色等同于职位，而在许多大型的SaaS系统中，为了更大的灵活性，往往会把角色和职位分开，但根据我们的判断，对于中小企业，设定角色一个就够了，职位当然还存在，但仅仅是一个不涉及权限管理的文本title了。

以一个销售公司来说，角色可以包括：“渠道专员”、“渠道总监”、“销售专员”、“销售经理”、“总经理”等等。

所谓的部门和角色分开，就是不同的部门可以有相同的角色，例如如果有渠道一部、渠道二部，则这两个渠道部的员工的角色都可以设定为“渠道专员”，这两个部门的管理者都可以设定为“渠道经理”。再配合功能和数据权限，则进一步配置“渠道专员”具有“渠道”菜单的功能权限，其能够查看的渠道数据权限范围则仅为“我的”，而“渠道经理”同样具有“渠道”菜单的功能权限，但其能够查看的渠道数据权限的范围则扩大为“部门”。

具体设计上：

1. 最大部门即为公司
2. 管理员账号和普通账号均可禁用或设置为离职
3. 不同部门可以配置相同角色
4. 相同角色的功能权限和数据权限是一样的

4. 权限系统和其他功能设计的关系

总结完权限系统三个核心的基本原则后，我们还需要指出一点：权限系统的设计方案，在整个系统中绝不是孤立的，它能否实现设计目标，并和整个系统完美配合，还需要做到以下几点：

首先，菜单和功能的设计，必须是最小颗粒度，否则就和数据权限产生冲突。例如：我们只需要一个“客户”菜单即可，不同角色在“客户”菜单里能干什么事情，由功能权限和数据权限配合进行控制，但切不可出现“我的客户”+“全部客户”两个菜单，这明显和数据权限有根本冲突，且也是一种不优美、不合理、扩展性差的设计。

其次，数据的分类，必须符合业务需求，且划分合理。有些数据都是公开的可以不归入数据权限进行管理，所有角色默认都有即可；有些数据需要进一步细分，例如同样以“客户”举例，在某些公司的业务规则中，就需要将客户的基本信息和联系信息分开控制，管理层可以看客户基本信息，但只有客户负责人才可以看联系信息，这种情况就需要将客户的数据权限分为“客户基本信息”和“客户联系信息”两个。

最后，权限变更的记录和所有账号的行为轨迹记录一样重要。权限系统本质是进行权力的限制，没有监管的权力必定是会失控的。在出现问题的时候，必须同时配合权限变更的记录、角色变更的记录和账号的行为轨迹记录进行追责和存证，确保维护企业的合法权益。

总结

在合理设计的前提下，权限系统也并非越复杂越好。只有符合目标客户需求并具备最大弹性的权限系统，才是最好的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

「网易蜗牛阅读」和「微信读书」的写书评功能分析

人人都是产品经理 2018-08-19 16:05:00

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、目的

三、用户 – 场景 – 需求分析

小结（这个模块是做什么的？为什么？）：

从写书评方说：

1. 为领读人/书评家/作家提供了一个新的发布自身书评/作品的平台，且通过签约等合作形式为他们提高了收入，同时为他们开拓了新的增加粉丝，扩大影响力，强化IP的新方式；
2. 为作家/书本运营方/媒体机构提供了相对于其他电子书app来说更为专业的推广渠道；
3. 为阅读者（尤其是有写观后感习惯的）提供了更专业、完整、体系化的内容记录与发布方式，以及获取认同，寻求社交，与书友互动交流的新机会。

从看书评方来说：

• 阅读者可以在阅读前去通过书评快速全面了解一本书（零碎时间的泛读），为要不要深入精读提供参考；可以在阅读前通过观察别人对此书的解读，带着自己的问题与思考再去有目的性阅读；可以在阅读时，体系化的记录自己的想法；可以在阅读后寻找他人解读中的不同点或共同点，加深自身思考，以及完善自身的想法。
• 找书者可以通过次主打的导读特色功能，通过专业人士分享的书单或由读过的人分享的想法，找到更值得信赖的内容向导。

从运营方来说：

1. 以书评特色作为产品特色推广，吸引有写观后感习惯的电子书阅读群体，为对写书评有爱好或者以写书评为业的群体提供新的平台，满足拉新需求。
2. 通过书评领读，为用户挑选书籍提供大量专业参考满足留存需求。
3. 以领读人带起书评风潮，以PGC促进UGC，以及通过普通用户对领读人的申请，满足激活需求。
4. 在书评中插入书籍入口，方便用户阅读购买，满足转化需求。

四、业务流程、业务逻辑梳理

功能流程：

1. 入口一：领读 -> 右上角写书评按钮 -> 写书评；
2. 入口二：我的 -> 我的书评 -> 右上角写书评按钮 -> 写书评；
3. 入口三：选择书籍 -> 阅读书籍 -> 右上角写书评按钮 -> 写书评；
4. 入口四：选择书籍 -> 书评栏 -> “写书评，获时长奖励‘输入框 -> 写书评。

四个入口分别代表四种场景：

• 入口一为领读人直接发表文章提供便利；
• 入口二是方便内容发布者对于自己的书评进行编辑管理；
• 入口三提供阅读中随时记录想法，书评素材的方式；
• 入口四的奖励文案鼓励大家加入写书评，加入阅读，且为阅读者提供参考。

业务逻辑：

小结：

通过业务逻辑的分析可以看到，「网易蜗牛平台」，“书评功能”，书评发布方以及书评阅读方四方形成一个完整的循环，首先平台通过优秀领读人的引进，为阅读方提供内容，并与之互动；再通过激励引导，由PGC带动UGC，让阅读方成为发布方，让用户生产内容，并提供申请领读人的渠道；然后发布的内容再次与其他阅读方互动，形成一个完整的循环生态系统。

五、功能点对比

小结：

相同点：通过阅读中，书本详情页进入；输入文字，输入标题，添加笔记/标注，插入书籍；字体，副标题，符号，私密发布，分享功能。（基本功能）

不同点：

• 「网易蜗牛读书」：标题的必要性、添加图片、多本书籍插入；多样化的字体排版选项、PC编辑、保存到草稿箱、奖励、撤销功能。（专业化需求较强）
• 「微信读书」：添加表情；引用、星级评分。（较为注重简单，直接，有趣）

六．总结

抄不抄？

不抄，如果发现UGC内容越来越多，以及专业化需求提高，可以考虑借鉴「网易蜗牛读书」中写书评的多样化编辑功能去完善写想法功能。

原因：

（1）产品定位

主打特色可以看出产品定位，以及发展方向的不同。两者同时对于领读这一模块下了很大的功夫，但玩法不同，「网易蜗牛读书」通过专业领读人（内容分享 & 引流导购）发布的专业书评，去引导用户阅读，降低用户的防备心，所以写作门槛较高。

而「微信读书」则无此需求，以好友作为切入点，通过好友在看的书，进行熟人引读，把用户防备心降到，能让用户无成本接受，但同样容易导致内容参差不齐。

（2）社交属性

「网易蜗牛读书」以PGC为主，专业领读带动社群发展，看书评人与书法发布方本身可能是粉丝关系，也可能无任何关系。而「微信读书」以UGC位置，好友之间的想法碰撞占到大多数。

（3）用户驱动方式

「网易蜗牛读书」以其特色时长阅读，以及兴趣导向，领读人粉丝引进为主。而「微信读书」则有很大部分基于好友之间的竞争关系，通过虚荣心驱动。

所以对于「微信读书」来说，暂时不需要花较大成本引入专业的PGC内容，性价比不高，与产品定位契合度不高。

本文由 @大明 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

适合做后台的UI汇总，懂程序不懂UI的你还在烦恼怎么美化后台界面

年轻时的码云 2018-06-15 18:39:08

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

算是比较全的合集，送给大家，资源获取在文末（有惊喜哦），这次福利很大，赶快关注哦（资源限时开放....）！

1，layui/ layuiAdmin

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

大家有机会多支持闲心。。。。

不过后台UI是要授权的哦

---

2，dwz富客户端框架 - jUI

DWZ富客户端框架(jQuery RIA framework)，是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。

比较成熟，应用比较广泛，官网有整合的应用可以借鉴

• DWZ框架 + ThinkPHP 实现小组工作日志系统
• dwz4j企业级Java Web快速开发框架(Hibernate+Spring+Struts2) + jUI整合应用
• dwz4j企业级Java Web快速开发框架(Mybatis + SpringMVC) + jUI整合应用
• ThinkPHP + jUI整合应用
• Zend Framework + jUI整合应用
• YII + jUI整合应用

---

3，B-JUI 前端管理框架

B-JUI客户端框架(Best jQuery UI)，是基于Bootstrap样式及jQuery库实现的Ajax RIA开源框架。

B-JUI客户端框架扩展方便、简单易用，很多情况下只要熟悉HTML语法，使用HTML属性就可以轻松用Ajax开发项目。对于javascript不太熟悉的程序员是非常方便的，他们只需要关注后端业务逻辑的实现就行了，前端页面上只需要简单的写点HTML代码。

本框架基于Bootstrap前端样式及jQuery库开发，提供丰富的各类组件及UI，封装有多种组件，及相关的Ajax请求调用，并且都以jQuery标准插件的方式组合在一起，所以非常方便进行二次开发或再扩展。

兼容性：

• IE8.0+, Chrome[最佳], Firefox, Safari。（IE8 未详细测试，估计问题不大，但一些CSS3的效果就不要想了，如圆角、动画什么的）
• 本框架不适用于需要兼容IE6、7的开发者或使用者。
• PS. 未考虑兼容IE6和IE7，一是因为Bootstrap3.2不支持，二是因为目前主流系统已是WIN7(IE8+)，三是带WebKit内核的浏览器大量出现，如360浏览器、搜狗浏览器、百度浏览器等。

---

H+ 后台主题UI框架

H+是一个完全响应式，基于Bootstrap3.3.6版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了的jQuery版本(v2.1.4)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。

提醒：是收费的

---

H-ui.admin

H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版 采用源生html语言，完全免费，简单灵活，兼容性好 让您快速搭建中小型网站后台，拿来即用。

---

jQuery MiniUI_快速Web开发

jQuery MiniUI - 专业WebUI控件库。

它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。

jQuery MiniUI致力降低企业应用的开发成本，丰富的UI控件、高度的稳定性、强大的扩展能力和平滑的版本升级能力，可满足大部分业务场景需求。

缺点：收费的！

---

请输入描述

EasyUI

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

• 大家百度去官网下载即可

---

TOP-JUI 

b-jui的作者基于easyui开的的，比easy调用简单，很不错的UI，可惜收费，不过不算太贵

TopJUI基于版EasyUI构建，在使用TopJUI的过程中，除了可以使用TopJUI提供的组件功能外，你还可以根据实际情况调用EasyUI的原生组件功能，满足各种复杂的业务功能需求开发

---

Amaze UI 后台管理模板

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

组件丰富，模块化Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

不过这个模板现成的东西比较少，复杂功能还需要自己去完善

---

---

LigerUI

• 使用简单，轻量级
• 控件实用性强，功能覆盖面大，可以解决大部分企业信息应用的设计场景
• 快速开发，使用LigerUI可以比传统开发减少极大的代码量
• 易扩展，包括默认参数、表单/表格编辑器、多语言支持等等
• 支持Java、.NET、PHP等web服务端
• 支持 IE6+、Chrome、FireFox等浏览器
• 开源，源码框架层次简单易懂。

---

win10-UI

Win10-UI是一款win10风格的后台UI框架。它使用了丰富的win10桌面元素，包括桌面图标、窗口化子页面管理、开始菜单、动态小磁贴等组件，兼容主流现代浏览器及移动端的屏幕尺寸，适合快速开发后台管理系统的前端界面。

风格不一样，还是挺不错的

---

国外还有很多 bootstrap 后台UI

Ace Admin，Metronic等等

---

今天小编就分享到这里

评论回复相关需求，小编会第一时间私信您

或者私信回复“后台UI”，自动获取资料，都是小编的血汗哦，本资源只开放一段时间，赶快获取哦（是私信不是评论哦，评论无法自动回复）

如果你是初级程序员可以研究别人的代码提高技术，如果你喜欢搞网盟或者外包，可以让你快速建站，还等什么赶快关注吧，我们会持续输出相关资源

---

资源来自互联网 仅供学习研究之用，不得用于商业，请在24小时内删除！

版权归原作者及其公司所有，如果你喜欢，请购买正版。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

实例分析拆解：如何设计登录注册？

人人都是产品经理 2018-08-09 18:42:15

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

最近对我们的APP的账户体系进行了改版，研究了各类产品的设计。账户体系虽然几乎是通用标配功能，但是各APP的都有差别，都是针对当前的产品形态、发展阶段和用户量级做出了符合自己的设计。账户体系的关键点在登录注册流程上。登录注册流程看似简单，实际考量设计功力。网上关于登录注册的综述有很多了，但是从零到一整合分析的很少，以下，将以实际的产品为例，精细分析如何设计账户体系。

一、立项背景

我们的产品第一版账户体系由于历史原因，做的比较生硬。

初期主攻社交，希望可以沉淀用户信息，手机账号会是第一优先选择，当时的方案是手机号注册+账号密码登录/第三登录+立刻绑定手机账号。

如你日常体验那样，第三方登录+立刻绑定手机的方式，直接抵消了第三方登录的便利，比直接手机号注册更麻烦。而且，设计上，手机号注册需要设置两次密码，密码需要一致；设置之后，还得进入登录界面，再次填写账号密码，正确匹配才可以进入APP。

总的来说，用户进入APP的路径相当长，步骤多，用户体验低分。

近况是，产品方向探索，将重点落在商城上。完成交易的流程本身就多步骤，再叠加原来的登录注册，路径过深，对拉新损耗大，急需改进。

二、需求分析

从业务发展趋势来看，微信会是重要的用户来源，后续会布局更多的微信运营活动，和商城小程序，设计引流到APP，需重点突出微信登录。

而商城交易需要保证安全性，同时兼容老用户，手机注册密码登录必不可少。考虑到用户文化水平，和互联网产品使用习惯，需要在常规的基础上做简化。

第三方登录需要在关键点绑定，商城推广员提现时变更银行卡，需加以验证身份。

新用户刚进来，可以先浏览熟悉产品内容，在需要身份信息时，再进行引导登录。

三、功能点梳理

登录注册流程：微信/QQ第三方登录、验证码登录/注册、密码登录、找回密码。

账户体系配套：关键点引导绑定手机、关键点强制绑定手机、验证码验证账号、账号相互绑定。

细节功能点见下方的账户体系功能点梳理图。

四、流程图（登录注册）

未登录用户，到达需要获取用户身份信息的界面（为了平衡效率和体验，一般是除一级界面以外的），则触发注册登录流程。用户完成注册登录之后，才可使用和操作绝大部分的功能。

本流程图需要配合页面交互原型理解。

五、关键页面交互设计

登录注册体系将包含五个部分，主界面、验证码登录/注册、密码登录、忘记密码和新用户注册，在实际流程操作中会根据用户的选择，和系统的判断进行切换。账户体系的配套将会略过，以下是登录注册的页面交互设计、设计考量和功能点介绍。

1.主界面

• 布局：主界面集合三种登录方式，将微信登录作为主方式。
• 前提：成功登录的前提条件是必须先勾选同意用户协议，否则报错。
• 授权：第三方的登录，点击微信orQQ，授权成功后，即可登录进入APP，自动获取用户的昵称性别头像信息填充社交页。

2.验证码登录/注册

（1）设计解析

• 手机账号登录，考虑简单又快速进行，突出验证码快速登录/注册，辅以密码注册。
• 密码注册的弊端是很容易忘记密码，忘记之后，找回密码流程也繁琐。
• 验证码登录，虽然对频繁换手机的用户是个噩耗，短信也有达到率的问题，但考虑到效率跟成本，特别在拉新环节，还是作为主方式。

其实基于验证码到达率和安全性，我考虑过换移动认证，就是手机号码一键登录，无需密码跟验证码。可惜实际接洽的时候行不通，而放弃了，文本会介绍下这个事情。

（2）设计点

• 验证码登录：登录注册界面为验证码登录，附以密码登录。
• 按钮：登录注册的按钮合二为一。也就是说，用户不需要选择是登录还是注册，将判断交给了后台。只要用户的手机号码还在，直接凭验证码进入即可。比起选择密码登录之后忘记密码，或者是干脆就不记得自己是否注册过，在错误的界面输入信息之后来回切换，二合一的方式更加友好，也是本次设计的一个亮点。
• 手机号码：采用更加清晰的的3-3-4数值格式，输入框末尾配清除按钮，错误输入后可一键清除。手机号码输入框也有记忆功能，可获取前一次登录的手机账号，可以获取同一次登录注册已填过的账号信息。
• 验证码：手机号码位数输入正确类型和位数之后，才激活验证码功能。否则点击会报错。之后，验证码的激活以变色表现，这是个视觉指示。输入完成第一行，人眼会自然而言的落在第二行的开头，如无例外，用户需要寻找一番，才会觉知过来，去点击获取验证码。
• 加载指示：数据传输到服务端，判断对错，再返回结果。这个流程费些时间，用加载小菊花，表示后台正在处理，舒缓下等待的焦急。

3.密码登录

（1）设计解析

密码登录考虑到向后兼容，老用户的账号以密码登录；也是适应本期的新用户注册。

同时标配忘记密码，也可切换新用户注册，或验证码登录，这些元素的布置考虑，是基于流程的。

密码的输入，其实正如设置密码，应该做格式限制。但是因为第一版没限制，不清楚用户设置了什么，所以此处不能轻易填坑。

数据输入都该考虑下限制的，为什么？在给产品经理讲技术这书里，要是你看到黑科技SQL注入攻击也会很印象深刻的……

（2）流程

跟验证码的简单路径不一样，密码登录因重在流程上逻辑自洽，更需配流程图查看才好理解。

正常流程是：输入手机号->输入密码->点击登录->登录成功。

异常流程是：

• 输入手机号->输入密码->点击登录->提醒“未注册”->点击新用户注册or返回上一级验证码登录/注册。
• 输入手机号->输入密码->点击登录->提醒“未注册”->账号或密码不对->重新输入or忘记密码or验证码登录。

4.忘记密码

（1）设计解析

步骤：忘记密码此处分两步，一步验证，一步设置。设置完之后，直接登录进入APP，无需再重复密码登录的步骤。（记不住密码更痛苦的事情是，忘记密码刚找回来，在下一步重新登录的时候又忘记了）。

异常流程：忘记密码此处还有个异常流程，是该账号不存在。有童鞋会说，正是密码输错才会到来这界面，这么还会有账号不存在的情况？对，情理上其实不大可能发生，但是程序逻辑上有这个可能，但是又无法通过前面的步骤过滤掉，是要补充下的。

此处判断账号不存在的提醒，是点击获取验证码之后，亮点之一。这里是考虑辛辛苦苦获取验证码，填写完毕之后才来告诉用户账号不存在，有些不厚道的……

（2）设计点：

验证账号：常规的做法，先验证码验证手机号，再下一步设置密码。

有些APP会将验证账号跟设置密码放在同一个页面，其实拆开会更清晰。而且，验证手机号码步骤复用率是很高的，比如，可以复用到推广员更改绑定银行卡时，作为账号验证。

设置密码：密码设置要限定格式，之后仅需输入一次就可以直接登录进入了。

重复两次数据，再次校验肯定更稳妥，但是登录成本提高了，以我们用户的耐心，我们的产品就没必要承担这个教育成本了。如果说担心手误输错了的，可以用验证码登录的，再不济可以用找回密码的。但是大多数用户其实只考虑本次能快点进入就好。

5.新用户注册

（1）设计解析

新用户注册界面近乎跟忘记密码是一样的流程，区别在点击获取验证码，此处的异常流程是该账号已存在。此处设置优化的流程，判断是已有账号之后，会直接跳转到验证码登录/注册界面处，直接获取已填写的手机号码，验证就行，对新用户尽量友好。

经过前面的界面筛选，此处的账号不存在的发生概率很少，但是作为关键流程而言，完整性是必要的。

（2）移动认证

文内留个悬念要谈谈移动认证，移动认证是什么？最直接的体验是，无需输入任何数据，直接点击授权就登录。是不是很黑科技？！ 但是为什么最终放弃了呢，请听细讲。

理想情况：

移动认证是运营商移动提供的，基于手机sim卡和移动网络直接认证登录的技术，米家、爱回收跟同花顺应用在了自家APP里。当时上手体验，惊艳，简直零感登录；况且移动官网也有免费的sdk，更是窃喜。以移动认证为主登录的原型设计完毕，就立刻接洽移动认证sdk的接入。

现实情况：

但是呢，很快就被开发文档打脸了，简言之，就是层层筛选之下，能一键登录的用户远没有想象的多。

移动认证的原理是基于移动网络通信的。首先基于sim卡识别本机号码，在移动网络开启的前提下传输信息以授权通过，此时可顺利登陆；但是如果没开移动网络，就没辙了；如果WiFi跟移动网络同开，以WiFi为主，那将强制占道先验证再释放WiFi。如果移动网络通信不成，那就通过短信收发来完成数据传输。

所以，这么流氓的做法苹果肯定是不乐意的；电信不参与；oppo的ROM不支持此流程……层层筛选下来，加上关闭移动网络的，能顺利使用的其实不多；而且，除非付费，否则移动认证的logo说明只能用官方的，简直是给移动打广告….这些阻力远高于收益，所以，果断放弃了，采取了本文讲述的方案。

果然，合适的才是最好的。

本文由 @阅天 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Pexels ，基于 CC0 协议

10个基于web的JavaScript最优秀的库和框架

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在所有可用于创建web应用程序的语言中，JavaScript可能是最健壮的库和框架选择。事实上，有太多的东西，很难弄清楚该用哪一个，尤其是当你刚刚开始的时候。

JavaScript库和框架之间的关键区别在于，库由应用程序可以调用的函数组成，用于执行任务，而框架定义了开发人员如何设计应用程序。换句话说，框架调用应用程序代码，而不是反过来。当然，开发人员仍然需要库来使用JavaScript完成web上的基本任务。

JavaScript Libraries

1. D3.js

许多现代网站都是数据驱动的。例如，新闻站点必须不断刷新它们的内容，因此不可能每隔几秒钟重新配置设置以支持这些更改。数据驱动文档，或D3。库的独特之处在于它把数据放在首位。下面的截屏显示了在D3中可以找到的许多数据演示中的一些。

单击visual index中的一个条目，您将看到一个详细页面，在这个页面中您可以看到数据表示的完整视图(如下所示)，以及用于创建表示的底层代码和数据：

该站点提供了完整的示例，旨在帮助您理解库的功能。

这个库的主要优点是它对内容的处理非常灵活。但另一方面是D3.js并没有带来太多的活力。例如，如果您是在一个电子商务网站工作，而不仅仅是提供信息，那么这个库可能不是最好的选择。除了极端的灵活性，D3.js的 relatively streamlined presentation帮助提高了速度。如果单单从图表的功能来看，D3.js还是有点太庞大了。啊还不如去使用Chart.js短小精干的专门提供图表功能的库。

2. jQuery

大名鼎鼎的jQuery已经赢得了长期统治网页的地位。许多网站仍然使用jQuery进行基本的文档对象模型(DOM)操作，原因有三个：

jQuery非常容易学习。它提供的示例比大多数库都多，所以您很有可能会找到一个示例来演示如何完成特定的任务。

jQuery非常快。因为它专注于出色地执行特定的任务，所以jQuery使快速执行这些任务成为可能。

jQuery拥有庞大的安装基础。它还拥有大量的社区支持和项目贡献者。

我们可以预期这个库肯定会长期存在。额外的开发时间也意味着文档是非常完善的。如下所示，文档将主题分解为容易理解的部分，然后您可以根据需要深入研究其他细节：

当然，没有什么是完美的。例如，有时jQuery在多个浏览器上的工作方式并不完全相同。JQuery首先关注这些问题，您可以在站点上找到有关浏览器支持的信息。

最后，与其他库不同，jQuery并不是一个完整的解决方案。您需要另一个产品，如jQuery UI(参见下一个条目)来构建一个完整的应用程序。重要的是要认识到，在使用jQuery时，您的站点将更加模块化，并且依赖于更多的库(虽然这并不一定是坏事)。

3. jQuery UI

jQuery UI只是jQuery的众多插件之一，但它是您最常看到的，这也是我们在这里包含它的原因。在合并jQuery之后，使用jQuery UI向应用程序添加基本的图形元素。jQuery UI库提供了各种有趣的小部件，如手风琴、滑块、工具提示和数据表，这些小部件使您可以配置应用程序以提供有用的服务。

您可以深入到特定的小部件或其他控件来查看它们是如何工作的。页面通常包含顶部的控件，然后是使用说明和示例代码。与jQuery一样，您可以从一个简单的示例开始，但可以根据需要深入了解添加的内容。

这个库Library 与众不同有几个原因。最重要的是，JQuery UI几乎适用于任何浏览器，因此用户不太可能抱怨应用程序没有按预期工作。jQuery UI还提供了大量的附加组件。例如，虽然jQuery UI缺乏时间选择器，但您可以从trentrichardson.com/examples/timepicker等地方获得执行该任务的附加程序。

jQuery库组的一个问题是它们变得非常大。有时候，一个库的特性太丰富了。JQuery库的大小会使它们在较小的设备上加载速度变慢。可以使用替代的第三方库，如Granim.js和Multiple.js的出现提供了jQuery特性的子集，有时还提供了一组有重点的附加功能特性，加载时间大大加快。

4. Parsley

表单验证是一项重要的任务。因为现在的数据经常被机器分析，所以干净的数据比以往任何时候都更重要。事后清理数据是费时的，而且从没有像让用户首先提供正确的信息那样准确。

与任何其他JavaScript库相比，Parsley提供了更多的表单验证技术。你可以选择你需要的验证级别，但它们可能会变得非常复杂：

甚至如下所示的简单验证也包含许多不同的验证类型，以及执行任务所需的代码。完成最常见的验证是多么容易。(除非尝试验证复杂的数据，否则不需要进行繁重的编码。)

5. QUnit

许多库提供的测试功能有很多不足之处。即使您使用脚本，手动测试复杂的应用程序也会很麻烦，而且需要花费大量的时间——如果它能找到所有的错误的话。

QUnit是用于JavaScript的几个单元测试库之一。虽然有些人可能会认为它有点过时，但它是相对全面的，并且具有强大的社区支持和短的学习曲线。QUnit站点提供了丰富的入门信息，包括关于单元测试的完整教程。

6. React

通常被认为是一个库，而React有时被称为框架。在模型-视图-控制器(MVC)方法的上下文中，React提供了视图部分。它不假设您正在使用的基础技术堆栈来建模或控制数据。所有的React兴趣的就是在屏幕上显示数据。考虑到这一点，它不依赖于浏览器文档对象模型(DOM)，而是使用一个快速显示信息的轻虚拟DOM。React最棒的一点是它是声明性的，这意味着你要告诉框架你想做什么，而不是怎么做。

您为使用MVC的速度和能力付出的代价是增加了一定程度的复杂性。即使是一个小的组件也需要相当多的代码(如React网站上的例子所演示的)。当你和真正的大型项目一起工作时，你获得的是灵活性和速度。

JavaScript Frameworks（框架）

1. Angular

Angular framewor框架使作为MVC的控制器部分扩展HTML成为可能。控制器是DOM组件背后的行为。有了 Angular，就有可能以一种既自然又直接的方式创造新的行为。这些扩展最终看起来像是HTML的附加部分，而不是固定的东西。 Angular 网站明确了使用该产品的两个基本原因：“速度和性能”和“难以置信的工具”。

然而，编码可能会变得复杂，这个框架可能更适合大企业而不是小创业公司。即使是 Angular 站点上的简单示例也依赖于快速创建复杂性的多个文件。值得注意的是， Angular framewor的版本也依赖于TypeScript，而不是纯JavaScript，这增加了学习曲线，但提供了可扩展性。

幸运的是，该软件附带了大量教程，如本文所示，这将使有经验的开发人员更容易快速地开始工作。

2. Ember.js

一个自称为“有抱负的web开发人员的框架”的框架确实有些严肃。像微软、Netflix和LinkedIn这样的知名公司都在使用Ember.js。因为它使用模型-视图-视图-模型(MVVM)模式，并将最佳实践作为框架的一部分进行合并。最重要的是，它的伸缩性非常好。有趣的是,Ember.js不仅可用于web开发，您也可以使用它来构建移动应用程序和桌面应用程序——它被用于构建Apple Music。

与许多其他框架不同，您可以使用完整的基于ember的工具套件来创建高度兼容的开发环境。Ember CLI(命令行接口)提供了对大量工具的访问，您可以使用脚本自动化。例如，,Ember.js数据通过对象关系映射(ORM)提供面向web的数据访问。与此同时，Ember Inspector是Firefox和Chrome浏览器的一个插件，它可以使调试更加容易。

尽管有它这么给力，Ember.js的快速入门教程只需要5分钟就可以完成。当然，标准教程需要的时间要长得多，但是能产生更多受人尊敬的结果，如下所示：

这个框架的文档包含您需要的所有主题，包括对象模型、模板、组件、控制器和模型的讨论。还有一个博客和Ember.js社区可以提供额外的帮助。

3. Node.js

Node.js是一个异步的、事件驱动的JavaScript运行时，具有一些独特的特性。首先，如果它没有工作可做，它只是“去睡觉”。这听起来并不是什么大问题，但是如果你在公共云上托管你的网站，“让它休眠”可以帮你省下一大笔钱——可能是很多钱。此外,由于Node.js不需要锁来完成它的工作，它不像其他框架那样倾向于死锁。这个产品更像jQuery而不是jQueryUI，因为您不使用它来创建用户界面。相反，您可以创建响应事件的代码——客户端生成事件，服务器响应这些事件。用户界面是显示任何结果的独立元素。

因为Node.js是如此简单和快速，社区支持是首屈一指的，你可以在最不可能的地方找到它。有900万个实例运行在超过5万个包上。换句话说,Node.jsjs构成了您使用的许多包的基础。

Node.js,开发人员可以构建:

后端应用程序

博客

客户管理系统

实时服务，如聊天应用和游戏

REST api

社交网络应用程序

实用程序和工具

4. Vue.js

Vue是一个多功能的开源JavaScript框架，它是“渐进的”，这意味着与“单一框架”不同，Vue是从底层设计的，以渐进的方式采用。在库和全功能框架之间扩展，Vue使用“基于组件的开发模型”，可以将Vue组件混合和匹配到项目中。

关键的Vue特性包括组件、模板、转换和双向数据绑定，但是它最显著的特性可能是它的“反应性”系统。基本上，reactivity指的是在Vue中自动更新一个JavaScript对象，并且不引人注意地更新Vue模板。

Vue是为任何具有HTML、CSS和JavaScript工作知识的人而构建的。

其他的选择

别忘了还有更多的JavaScript库、社区、集合和框架，通常都有特定的焦点区域。

例如，CodePen是一个免费的在线社区，用于测试和展示HTML、CSS和JavaScript的混合。可以把它看作是前端设计师和开发人员的社会环境、在线开发社区和具有统一界面的编辑器。每个代码页条目都被称为钢笔，您可以将它们作为集合的一部分来查看。有些收藏品很奇特，如anime.js(动画) ，而其他的，比如有趣的js，会有一些你在其他地方看不到的有趣的小部件。它也直接与反应一起工作。

类似地，Jest是一个“零配置”的JavaScript测试解决方案，旨在使用React进行开箱即用的测试。

BIDEO.JS提供了一种显示全屏背景视频的方法，例如，如果您正在为旅行社构建一个站点，这将非常有用。

底线

现在应该很清楚了，问题不是找到一个JavaScript库或框架来帮助您做一些有趣的事情——而是找到一个库来帮助您完成您需要完成的任务。

此外，您还需要确保您所依赖的库将在明天仍然存在。没有人想要重新工作他们的应用程序，因为它使用的JavaScript库不再可用。尽管现在大多数现代JavaScript库和框架都非常可靠，但您仍然需要确保它们与用户所依赖的所有设备和浏览器兼容。

玩转Axure：如何制作验证码倒计时？

人人都是产品经理 2018-08-10 15:41:33

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

注册模块是每个产品必不可少的一部分，也是大部分产品经理着手设计一个产品时遇到的基础部分，在这里通过这个教程分享如何使用Axure中的动态面板实现获取验证码倒计时功能。

在开始前我们需要把梳理下思路，简单的把任务流程理出来，帮助我们理解制作过程中的原理。

先来看看效果：

下图中左边为使用倒计时功能时的任务流程，右边为流程对应的四大部分，每部分有具体的小步骤，接下来会根据每个小步骤进行具体的描述。

1

从元件库中拖入一个主要按钮放入画布空白处，命名为“获取按钮”（可以随意命名）

然后再拖入一个动态面板放入画布中，命名为“循环面板”，并且双击该动态面板，添加一个状态2“State2”，这里就可以看成‘初始’和‘结束’的“容器”。

接下来创建一个全局变量对该“容器”进行记录。

为“获取按钮”这个元件添加一个交互样式，该按钮「禁用」时，填充颜色为灰色。

2

为“获取按钮”元件添加用例，当「鼠标单击时」，设置动作为「设置面板状态」在动态面板“循环面板”上，选择状态「Next」，勾选「向后循环」，「循环间隔」为‘1000’毫秒，取消勾选「首个状态延时延时1000毫秒切换」。

添加第二个动作「禁用」，选择“当前元件”。

3

为动态面板“循环面板”的「状态改变时」添加第一个用例，并给该用例添加条件，条件设置为「变量值」，「TimeValue」“>”「1」。

继续添加全局变量中的「设置变量值」，勾选「TimeValue」，更改值为[[TimeValue-1]]。

添加第三个动作「设置文本」，勾选“获取按钮”，更改值为[[TimeValue]]秒后可重新获取。

4

为「改变状态时」添加第二个用例，设置当不满足第一个用例所设定条件时执行的动作。此处有4个动作，分别是：

第1个动作是「设置文本」为“获取按钮”的文字值是“重新发送验证码”。

第2个动作是设置全局变量中的「设置变量值」，勾选「TimeValue」，更改值为“60”。

第3个动作「启用」，勾选“获取按钮”。

第4个动作为「设置面板状态」与动态面板，勾选“循环面板”，选择「停止循环」。

以上就是所有的制作步骤，最终的效果就像文章开头中所示的样子，在这个过程中，我们其实已掌握了两个重要的知识点：一个是动态面板的循环实现方式，第二个是通过全局变量来设定时间值。

这两个点在其它地方也会经常用到，掌握后能够更加灵活运用在其它地方。

希望大家能够尝试多练习几次，几次尝试后就会理解其中的关键点，也希望大家能够养成一种习惯，在进行练习前对任务流程进行梳理，这样对理解逻辑更有帮助。

本文由 @ 杰森 原创发布于人人都是产品经理。未经许可，禁止转载

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

社交电商只有拼团和砍价？口袋咖啡给你答案

人人都是产品经理 2018-08-10 17:41:58

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

这两年来，咖啡业不甘寂寞，和互联网碰撞出的火花越来越多。瑞幸咖啡异军突起，连咖啡微信关系链玩得风生水起，星巴克也牵手阿里巴巴准备收复失地。今天我们就来关注一下连咖啡最近做的一波营销活动“口袋咖啡馆”。

“口袋咖啡馆”是连咖啡小程序内新上线的一个功能，据公开报道的数据：

上线首日PV超过420万，累计开出咖啡馆超过52万个，相当于一天有52万人开了线上咖啡馆。

体验“口袋咖啡馆”之后，我总结成功之处有以下几点：

1. 情怀切入和个性化展示，实现破冰

相信很多爱喝咖啡的人都曾经有个不成熟的梦想叫做“我要开一个咖啡店”，文艺的音乐，明媚的阳光，飘香的咖啡，过此余生。但是因为资金压力，生存压力，咖啡店对大部分人只能说这是一个梦想，或是情怀。

而在线上开一个咖啡店，不用店租，不用进货囤货，甚至不会做咖啡业不要紧，把开店的行为压缩为装饰店铺和朋友圈卖咖啡，实现情怀是不是变得毫无压力和简单了？

先不管“口袋咖啡”背后利用社交渠道卖咖啡，让店主成为分销商的本质，首先“口袋咖啡”抓住了大部分用户的情感需求，简化用户行为，获得了第一波流量。

“口袋咖啡”可以让用户自主地去装修自己的线上店铺，让用户尽可能地发挥自己的想象，各种奇思妙想发酵，用户装修好了，很可能迫不及待地先分享店面给好友。好友一看，有意思，我也玩，这样就把第一波流量给动起来了，带入新的流量。

这两个设计是抓住了用户的情怀圆梦需要和展示个性化自我的需要，从而获得最初的流量并开始传播。

2. 低价单品，获取流量

光靠情怀和个性化展示，应该是无法保证更大的流量获取。

口袋咖啡店铺里的咖啡都是有折扣的，与官方价格相差10多元，甚至还做了一款9元的美式咖啡。分享的文案上也突出了下单9元起的字样，通过价格对比，突出低价来吸引更多的流量，而且新用户购买，首单立减9元。

这就将“低价爆款”+“新用户下单减”结合起来，对于大部分用户来说，工作日时候不会对咖啡太过挑剔，价格有优惠，我买谁的不是买呢？

而且还是微信好友“开的”咖啡馆，情感+好奇心的加持，吸引了又一波流量。

3. 游戏化的任务激励，环环相扣

“口袋咖啡”设计了一套游戏任务进阶提现，通过这样的模式保持用户的粘性，让用户投入更多的时间和社交关系。这套体系由成长咖啡和网红指数为目标，设计了一系列的任务让用户完成以提高这两个目标。

成长咖啡相当于货币，可以积攒兑换咖啡，获得的方法是每卖出一杯咖啡获得0.1杯，攒满1整备成长咖啡就可去免费兑换。这里对于用户来说，目标是获得免费兑换咖啡，而规则就是卖咖啡，为了达到目标，用户就会去分享，去安利，可能带来更多的流量；

而网红指数相当于积分，积分的价值在于解锁特权，包括更多的商品、装饰等。以及获得更高的排名。而这些特权则是可间接有助于提高用户销量的，有助于用户完成“免费兑换咖啡”，获得网红指数的方法则是一系列的任务。

目前的任务较少，不知道后续是否会放出更多玩法。

回过头来，你会发现“口袋咖啡”这一系列打法都是相关联的，都指向了同一个目标获得免费咖啡（背后其实是卖出更多咖啡），彼此是有承接关系，形成了有效的循环。

4. 社交互动带动裂变和变现

连咖啡一直都在尝试做“基于人际关系链”的产品，他们认为这是获取流量最的工具。在“口袋咖啡”里则明显地提现这一点。

4.1 土豪榜和点赞榜，记录好友和你的互动

口袋咖啡有两个榜单，分别是土豪榜和点赞榜，前者记录谁买过了你的咖啡，点赞榜则记录了谁给你点过赞。交易和点赞，一个是实际的消费，一个是情感的激励，会给用户产生更大的正向刺激。

4.2 让用户产生更多的互动行为

如果用户在一个产品之上产生的互动行为越多，则用户和产品的粘性越紧密，用户主动推荐这个产品的可能性也越大。

如何让用户产生更多的互动行为？如何撬动更多的社交链条呢？

口袋咖啡准备了3个手段，分别是明星馆、附近的馆、我去过的馆。

明星馆，邀请了一些流量明星入驻，有佘诗曼、秦岚、李诞等，而且佘诗曼、秦岚还是目前热播的《延禧攻略》的主演，抓住眼下的新闻热点，结合明星自带粉丝的流量，粉丝通过点赞和购买咖啡行为的与明星发生互动。

开一下脑洞，这是不是可以成为另一种形式的明星榜单，各家粉丝通过点赞，买咖啡为自己的爱豆打榜，互相攀比，搞不好可能会成为一个固定的大流量入口。

粉丝组织+明星效应+群体攀比效应=大流量？

这个需要拭目以待。

附近的咖啡馆，和微信本身附近的人异曲同工。利用用户的好奇心驱动，看看附近都有谁在开咖啡馆，会不会又好玩的小哥哥小姐姐，点个赞，买个咖啡，也是不错的。

店主一看有人给我光顾我了，看一眼就在附近，来而不往非礼也，也过去点个赞。一来一往，用户就在线上咖啡馆之间互相流动起来。如果后面官方围绕这一块继续做网站，比如：解锁特权可以给附近的人推送自己的咖啡，完成某个任务看店主的微信等等，有可能会产生新的兴奋点。

当然社交电商里，电商还是初心和本质，社交到底要到什么样的程度，才能有利于电商而不是起副作用，这个度需要团队把控。

我去过的，则是将我访问过的咖啡馆沉淀下来，便于后续的访问，也可以看成团队为后续的社交互动埋下的伏笔。

连咖啡的一系列动作，个人觉得最终目的是希望把咖啡变成货币，不再是人来买咖啡，而是咖啡主动触达到人。不仅仅依靠传统的商品-货币的交易模式，而是希望代入更多的情感因素、社交元素，通过人与人的关系链去获得更多的流量，并且带动更大的交易额。

而近期包括送礼，运动步数换购小程序的崛起，越来越的商家开始关注用社交关系来获客，此前对社交电商的关注更多局限于微商这样的朋友圈叫卖、拼团、砍价、求复活满天飞，容易让用户产生反感和厌倦。

那么如何让用户不反感甚至是主动地贡献自己的社交关系，则是下一步互联网公司们重要的课题。

#专栏作家#

肥寒，微信公众号：chanpingdog，人人都是产品经理专栏作家。九年产品经理。做过数字阅读，电商，社区，目前致力于在线教育。

本文由 @肥寒 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 unsplash，基于 CC0 协议

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

15个消费心理学理论，为你拨开营销的迷雾

人人都是产品经理 2018-08-09 16:42:43

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

如何推广产品，提升销量的“套路”，我们能在互联网上翻到很多，而这其中的底层逻辑，始终是依据消费者行为和心理来做调整。本文总结了15个消费心理学的理论，希望对你有帮助~

同志们，好久不见！一个好的产品，加上强大的市场策略，等于“BOOM”！

如何推广产品，提升销量的“套路”，我们能在互联网上翻到很多，而这其中的底层逻辑，始终是依据消费者行为和心理来做调整。在消费者做出购物决策的时候，一定会存在“认知偏见”，太客观的事情不会很多。

• “认知偏见”，是一个系统性的偏离轨迹，它相对于判断中的标准、合理性。这种偏离可能来自其他人、特定场景。人们从他们自己的洞察中，创造出自己的“主观事实”。
• “认知偏见”，消费者在做决策的时候很容易受到它的影响。例如，以下15个消费心理学理论，就是重要的影响因子。

1.模糊效应（Ambiguity effect）：人们倾向于避免选择未知的选项，似乎每个人都喜欢确定的选项。比如，一个用户不明白你的产品，或者某个特定的功能，他将不会选择它。

2.沉锚效应（Anchoring effect）：人们在对某物/人做判断的时候，容易受第一印象，或第一次获得的信息支配，就像沉入海底的锚一样，把人们的思想固定在某处。比如，某消费者第一次看到某产品的价格，那么这个第一印象的价格，将对该消费者产生巨大的影响。

假如，第一次的价格显示为90元，第二次再见是45元，那么这个45元的价格对该消费者来说，是特别便宜的，他很有可能购买，相反，如果价格一直是45元，那么该消费者并不会感到便宜实惠。

前段时间，我看到一家青年公寓的海报上写着“······房间天天特价！”这是“沉锚效应”的错误应用，这时候的“天天特价”实际上在消费者心里变成了“并不是很特价”，因为对比起来，天天都是一样的价格，似乎今天也没有特别优惠。

可怜的是，这张海报估计已展示数月。

3.注意力偏见（Attentional bias）：我们的看法，受我们重复的认识所影响。所以我们常常有这个结论，一个消费者越频繁地看见你的广告、消息，他越有可能从你这里产生购买。比如，我们使用“访客找回”技术在互联网上投广告；让CTA按钮贯穿整个引导页面；在线上线下特定区域内，轰炸广告。

4.可利用性法则（Availability heuristic）：在很多时候，人们只是简单地根据事情已有的信息，包括回忆、简单的计算、简单的总结来确定事情发生的可能性。

比如，由于1929年股市大崩盘的痛苦记忆，许多投资者在灾后一直不敢入市，担心再次蒙受巨损，从而高估股价下跌的概率，等到股价上窜的时候，觉得“这股价虚高，还会跌的”，接着，股价仍然上窜并到高位，投资者们心乱了。

比如，路边上的“江南皮革厂倒了，老板跟小姨子跑了········”，3折甩卖皮具，想买真皮具的消费者并不会围观上去，因为他们很容易简单地推测出来，这是假的。而上去围铺的人多是大妈，只是想买一个便宜包，并不真觉得“皮包如此便宜”。

5.可利用性叠加（Availability cascade）：在一个群体中，如果大部分人主动或者被动相信一个信念、事情，那么这个信念、事情就会变得越来越合理。一句话说就是，只要长时间重复一件事，这件事就会变成事实。

当我们的网站、品牌、产品反复地被讨论，我们就成功一半了，即便有存在消极的声音，也是无害的。三个人，有两个人赞美，一个人贬损，那么结果等于赞美；三个人，有两个人贬损，一个人赞美，结果等于贬损。

6.逆火效应（Backfire effect）：当一个错误的信息被更正后，如果正确的信息与原本的看法相违背，它反而会加深人们对原本错误信息的信任，最终导致，把自己的看法认为成理所当然。当大脑接受一个信息后，便会本能的捍卫它不被其他与之相斥的信息侵犯。

7.基础概率谬论（Base rate fallacy）：人们要么总是忽略事物的基础信息，要么总是忽略事物的特别信息。推广产品，一定不要仅仅展示一堆无聊的信息（型号、数据、功能等），还要展示你的产品在特定的情况下是如何特别工作的，运用案例说明也好，运用用户评论也好。

8.偏见盲点（Bias blind spot）：人们总是认为自己比别人会更少地受到偏见的影响，或者有能力识别认知偏见。面对自己的愚蠢，人们总是不易察觉。

9.啦啦队效应（Cheerleader effect）：“群体”“大量”总是对人们更有吸引力，展示产品的时候，尽量多堆数量，堆积如山的产品给消费者的感觉是很好的，且更容易激起购买欲。

10.支持选择偏误（Choice-supportive bias）：人们倾向于对自己已作出的决定持积极的态度，哪怕这个决定并不是多优秀。

如果你的消费者作出了一个选择，鼓励他，然后他们将会长时间地认为他们做了一个优秀的选择。在消费者购买产品以后，总是发短信/邮件表示祝贺购买。

11.聚类错觉（Clustering illusion）：人们倾向于将随机事件中不可避免的小样本归结为某种有意义的规律。

比如，棋牌中的连续胜利，我们归结为“这是运气”，连续输归结为“这是手背”，实际上，连续一段时间的输/赢，在长时间赌博中是必然存在的，没有运气与手背之言。

如果你想说服你的用户，请将你的信息、数据放在大数据、大背景、大趋势之下，这样，用户会很容易相信你的陈词。我们会认为人工智能产品是未来的主流产品，而不会认为低科技含量的产品是未来的主流产品。

12.诱饵效应（decoy effect）：它是在消费品的选择中被发现的，现在已经被证明是相当普遍的现象。消费者在作出决策时，很少不做对比而直接购买，这时候，商家为了消费者更好更快地做出购买决策，往往会为目标产品提供一个“诱饵”，以促使消费者购买。

比如1，在《经济学人》杂志的销售广告上：

电子版订阅的价格是59元/期；

印刷版订阅的价格是125元/期。

是的，这都是很正常的价格，接下来的操作，运用了“诱饵效应”，电子版订阅+印刷版订阅，你猜多少钱？

依然125元/期。

比如2，前段时间我去逛ME&CITY，大家知道，一般同一时间在同一家服装店，很难同时卖给一个顾客两件商品，尤其是对于男顾客，所以ME&CITY店做了一个活动：

“购买任意一件衣服，再加一元，可获得纯棉袜子一双！”

这是“诱饵效应”的运用，衣服是目标销售产品，“1元钱购袜子”是诱饵。类似的操作还有，卖场里的帽子和毛衣是摆放在一起的，标签上标出的价格分别是：帽子49元，毛衣299元。但是，值得思索的是最后一行字：帽子+毛衣=299元。

13.曝光效应（The exposure theory ）：它是一种心理现象，指我们会偏好自己熟悉的事物，我们把这种只要经常出现就能增加喜欢程度的现象叫做曝光效应。

扎荣茨（Zajonc）曾经做过一个有趣的实验。他让一群人观看某校的毕业纪念册，并且肯定受试者不认识毕业纪念册里出现的任何一个人。

看完毕业纪念册之后再请他们看一些人的相片，有些照片出现了二十几次，有的出现十几次，而有的则只出现了一两次。之后，请看照片的人评价他们对照片的喜爱程度。

结果发现，在毕业纪念册里出现次数愈高的人，被喜欢的程度也就愈高；他们更喜欢那些看过二十几次的熟悉照片，而不是只看过几次的新鲜照片。

也就是说，看的次数增加了喜欢的程度。ps. 对方实在太丑的情况除外。

14.框架效应（Framing effects）：指同一个问题通过两种不同的表达，会导致不同的决策判断。

一项相关研究，面向同一群人提出问题：现在，美国正准备对付一种罕见的亚洲疾病，但因为资源有限，所以只能救治一部分人，现有两种拯救方案可供选择。

（1）200人将被救治。

（2）600个人中，只有1/3的人能被救治。

问，你愿意选择方案1还是方案2？结果大部分人倾向选择方案1，因为方案1给人的感觉是“拯救机会”；方案2给人的感觉是“舍弃”。“舍弃”意味着死亡的风险，面对风险，人们是厌恶的。

因此，在日常文案中，我们即使不能给予用户“获得感”，也不要展示出“风险感”给用户。

15.The Adrenaline effect：（ps. 抱歉呀，这个理论我不知道怎么翻译成中文）大概意思指，用户对某产品有意图，但并不一定会想购买，只有当用户的肾上腺素被激发时，短时间内，迫使用户做出购买决策。

在销售中创造出紧迫性，是非常有必要的，创造紧迫性就等于在限定时间内激起用户的肾上腺素。

该理论建议，在营销过后的销售环节，要创造出紧迫性，促使用户下单，比如，限时折扣、限时抢购、定时开团、倒计时拼单等。

最后，说了这个么多个理论，是不是感觉有点凌乱了，Guys！

通常情况下，消费者在作购买决策的时候，都需要经过3大层面的思考。是的，这是最后一段提纲挈领的话了。

• 技术层面：这个产品是否能满足我特定的需求？
• 经济层面：这个产品能满足我的特定需求，但是，我有足够的钱来购买吗？
• 实惠层面：这个产品能满足我的特定需求，我也有足够的钱来购买，但是，它在我的选择决策中，是实惠的吗？

#专栏作家#

朱小磊，微信公众号“非主流朱（ID：feizhuliupig）”，人人都是产品经理专栏作家，营销顾问，曾17岁独立策划了一个游戏平台，月盈利近20万。擅长以青年消费者为目标群体的市场营销分析策划。目前已服务过多个企业，涉及教育产品、营养品、快消品等。

本文原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

UI设计闪屏/启动页/引导页制作技巧

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

需要做一个“开屏页”

“哪个开屏页”

“带跳过的哪个”

“带跳过的。是一页的那个还是可以滑动的？”

“滑动的”

上面的对话不知道有没有很熟悉。

我们都知道APP在启动时会有一些页面先行展示，例如这样

通常来说我们会简单的把它们统称为“开屏页”或者“启动页”

但实际上,这种统称就像是把下面这些都小可爱都叫做“熊”一样不严谨。“熊”宝

宝们表示很委屈。

其实这些“开屏页”的交互方式其实并不是完全一样的,因此也承载着完全不同的功能,有着不同的名字:闪屏 Splash Screen、启动页 Launch Screen、引导页Onboarding Screen。接下来我们就来走进它们的“内心世界”,了解一下它们的真正用法。

01 闪屏 Splash Screen

定义：闪屏是每次启动过程中展示给用户的一个过渡页面，用于减缓用户在打开应用时等待的焦虑心情。

交互方式：闪屏通常是一张背景图片，无法进行交互，无法点击也无法跳转

劣势：无法跳转，只能进行展示作用，无法很好的承载营销需求

优势：展示时间不可控

使用建议：

避免包含太多文字字符（阅读速度慢的话可能还没看完就关闭了）

不用过去吸引用户的注意（干扰用户的本来目的）

不要做广告（干扰，且不能点击）

02 启动页Launch Screen

定义：启动页形式闪屏但拥有交互功能，常用于展示营销活动广告图片并引导用户点击

使用示例：常用与展示营销活动广告图片并引导用户点击

交互方式：

1、点击页面或按钮进入活动承载页

2、点击跳过，跳过启动页，进入首页，或N秒后自动消失

注：由于加载时间不确定，启动图通常会缓存并存在下次启动时使用

03 引导页Onboarding Screen

定义：用户安装或更新后首次启动时展示数个页面，常用于介绍应用的核心概念，功能玩法，使用场景，核心变更

使用示例：

交互方式：

1、左右滑动可以切换

2、最后一页页面可点击进入

注：首次打开才出现，之后就不在出现，清除用户数据，再次打开应用可以看到

使用建议：

1.轻易不要使用引导页,以免阻碍用户快速的使用体验

2.为了降低用户反感程度,引导页数通常越少越好(<5)

3.尽量提供“跳过”按钮

4.每页的文案不要超过9个字,如果有更多内容可以用小号文字进行辅助说明

(根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。)

劣势：

增加了用户进入产品的时间，用户翻页过多，可能会失去耐心，降低好感度

04常规的启动流程

通常来说：开屏三兄弟顺序如下：

流程仅是建议的常规流程,通常来说闪屏是基本都有的,而启动页和引导页,如果产品需要,三个流程都走一遍也不是不可以,不过还是要尽量考虑到用户的忍耐度,不要让用户在漫长的“走流程”中失去了最初的兴趣。

小结

Appe曾经在《iOS人机交互手册》里建议:尽量不要展示闪屏或其它启动流程,避免干扰用户注意力然而,在马桶盖、地板砖甚至是美女身上都能打广告的今天,启动页/闪屏/引导页这三兄弟自带的“广告位”光环,让产品、运营们对其欲罢不能,几乎已经成为APP的启动标配,一起组成了现在常见的启动流程。它们共同承担起展示品牌性格,广告营销入口,功能介绍与引导的大任。

这让我想到最近看的一个段子,放出来给大家看看,仅做娱乐。

不过,正所谓存在即合理,既然市面上的启动流程都是“全套服务”,说明这么做定是符合特定阶段的市场需求的,所以作为产品设计师的我们在调侃过之后,还是要做好我们的本职工作:用专业知识解决实际问题。看过这篇文章后,相信

你又重新认识了开屏三兄弟,并且能更好地利用他们各自的特性好好服侍各位产品、品牌、运营大佬了~

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务