首页

8个步骤帮你掌握从用户出发的创意脑暴法

雪涛

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

头脑风暴是创意点子常用的方法,那么从用户出发的脑暴有什么不同?从过去几年用研发现向产品方案转化的脑暴案例中,总结成功与失败经验,提炼出目前最优的流程与执行技巧,一起来提高创意点子产生的成功率吧!

关于新产品创新的成功率,有这样一组数据:3000个原始想法,能变成300个成熟想法,300个成熟想法能产生125个项目,其中大概有9个能进入早期开发,4个能大力开发,最后成功的只有1.7个。(来自彭肯恩博士的研究)

大多数点子的失败,可能的原因有很多,比如疏于对趋势的关注和研究、缺乏理论的突破、缺乏执行力、难以逃脱组织思维惯性等等(来自创新管理课程),其中还有一个常常提到的原因:离用户太远。在最初想点子的时候,由于不知道用户需求、脑补用户需求、片面地针对用户表面部分需求却忽视深层需求来规划,就会导致产品或功能开发完成以后,不知道目标用户、目标场景,也不知道对用户的价值,最终产品也会因用户不去使用,而导致创新失败。

作为用户研究者,洞察和分析用户真实需求是我们的本职和专长,但如何把这些用户研究的发现以更有效的方式转化为「靠谱」的好点子,则需要与团队里各个角色一起不断的努力。从14年起,我们在一次次从用研发现到产品点子的头脑风暴实践中,不断优化流程、评估效果,形成了现在的「从用户出发的创意脑暴」流程,在这里分享给大家。

传统的头脑风暴法(brainstorming)相信大家都熟悉,就是一组人围在一起,随意的将脑中与主题有关的见解提出来,再将大家的见解分类整理。但在实际执行的过程中,头脑风暴的现场却常常交错着讨论、脑补、推理、玩笑等等,然后时间很快过去,却没有产出「靠谱」的点子。从用户出发的创意脑暴,是以典型用户故事为线索,轻松、的产出点子的头脑风暴过程:一方面,线索契合用户真实完整的需求场景,点子变得更容易想也更符合用户需求;另一方面,通过流程上的细节设计,可以更的激发点子产生。

整个过程分为8步。虽然常常的情况是一个人想不出方案,就马上拉人一起脑暴发散,但其实脑暴前的素材和流程准备,以及达成共识对脑暴的最终效果起到了至关重要的作用。

第一步:确定一个不远不近的脑暴主题

产生好点子的前提是问对问题,问对问题需要跳出眼前的思维限制,但又不要太天马行空。要做到这点并不容易,这要求脑暴的组织者在一开始就想清楚团队真正要解决的问题是什么,而不仅仅「产品的某个功能眼下要怎么做」这种具体问题(这样的问题听起来就让人疲惫)。举个例子,当眼前的业务问题是想出一些装扮功能,如果把脑暴的主题定为「装扮还可以做哪些新功能」,思路就会陷入现有的装扮流程里,这时点子的方向已经被具象和限制,有时甚至是无解的;如果定为「如何帮助用户通过装扮来表达自己」(前提是用户真的用装扮在满足这一需求)就会更合适一些,这样就可以去想如何通过装扮表达自己的心情、兴趣、状态、、所属群体身份等等,思路打开的同时又与业务结合;而如果仅仅是「用户如何表达自己」,想出的点子,就会太泛,脱离业务。

第二步:有选择的邀请团队成员

首先,有选择的邀请乐于分享、乐于沟通、思维活跃的人,他们会自然而然的产生想法,互相交流,否则每个人盯着自己的点子说着自己的故事就会丧失一组人在一起的意义;其次,在邀请成员时,不建议只有自己组的组员(虽然这样比较方便),因为参与角色的多样性一方面可以相互激发创意,同时也让点子在收敛阶段能得到更多元的评价(比如工程师对点子可行性的评估就有其专业的判断)。在人数上,虽然6-8人是脑暴的建议人数,但因为我们的脑暴流程会让点子批量产生,人数的增加会直接导致后续点子收敛时效率的降低,所以目前来看建议6人为佳。

第三步:准备简洁又有代表性的用户故事

用户故事的准备是脑暴的一个关键,吸引着我们不断的去改进和探寻。过去,我们也有过一些不太理想的尝试:让参与者分享自己的故事(如毕业生如何找房),这时很容易就根据主观和片面的需求想点子;给出一些用户需求的词让大家联想(如不孤单),这时参与者对着普通又太正确的词已经想过很多遍,很难进入状态;给出一系列相关故事(如多个类似的故事)帮参与者发想,这时呈现的信息对参与者来说已经过于复杂,传达的效率很低;给出的每个故事都带有用户痛点(如粉丝给明星发消息得不到回应),这时参与者往往会依照故事中的情节去推理,绞尽脑汁非常辛苦,却忽略了没有痛点的地方藏着用户的真实需求(如粉丝默默的把想对明星说的话记录在手机备忘里)。

所以,目前的做法是:

  • 对调研中收集到的大量用户原始故事进行分析;
  • 根据分析点之间的相互关系,按照一定的维度把分析点组织起来,比如组织成几类典型的用户画像、使用产品的几类动机、几个场景、几步行为流程等等,组织维度符合 MECE( Mutually Exclusive Collectively Exhaustive,相互独立、完全穷尽)原则即可;
  • 按照组织后的结构(如画像/动机/场景/流程等),把同一个类别下多个反映分析点的真实故事组合改编成一个典型故事。

举例来看,研究粉丝的过程中,我们发现有的粉丝会组团给偶像投票打榜并感叹「团结就是力量」、有的粉丝会在活动现场和他人一起大声应援并觉得暖心、有的粉丝在 QQ群和其他粉丝一起讨论相互诉说并且感觉很棒。这些故事都反映出粉丝对于「群体」、「团结」的诉求,将这几个不同人的真实故事综合起来,就形成了一个特别在意「团结形象」的典型粉丝故事。这个「团结」的典型故事和「秩序」、「强大」等等典型故事一起反映了粉丝「群体形象」方面的诉求。

通过这样的方式得到的典型故事不仅有真实故事的细节,而且严谨地反映用户需求,信息量大,结构完整。脑暴参与者面对这些故事,就很容易理解,并联想出更多符合用户真实需求的点子。整个过程说起来简单,但在实际执行时却考验着研究人员的大局观、逻辑能力、洞察力、组织能力等等,整个研究过程有时可能会需要1-2个月。

第四步:设置严谨又轻松的流程

在脑暴流程上的设置上,主要的尝试点在个人想点子和大家交流点子的方式和顺序安排。如果大家同时一边想一边交流,会出现没空思考或有人不认真想的情况;如果大家先写再轮流说,会出现思考时独立思考,交流时只关心自己的说法而忽视交流发散的情况。所以在尝试了默写式头脑风暴(后文会详细介绍)后,我们就沿用了这个鼓励思考交流、弱化发言的脑暴方式。

另外要注意的一个点是,不用在流程上对想点子的思路有过多的限制,比如告诉参与者「你可以先想什么再想什么」或「你想出的点子不能太抽象或太具体」,这种「急功近利」的做法会让参与者困惑和紧张。相反的,应该要做的是让他们放松,比如放一些音乐、摆一些零食等等,这样更容易产生想法。

第五步:在正式脑暴前,达成共识

在脑暴前,向参与者说明本次脑暴的目的、主题、流程和规则,能够帮助大家统一目标,提率。

头脑风暴的四个基本规则在脑暴过程中要落到实处:

  • 追求数量(可设置一个小荣誉激励大家想点子);
  • 禁止批评(包括负面的表情或语气词都不能有);
  • 提倡独特的想法(可以异想天开、天马行空);
  • 综合并改善设想(可以在别人的基础上写新的点子)。

组织者也可以给出一些用户研究的发现,帮助大家建立概念、了解用户。

第六步:默写式头脑风暴

默写式头脑风暴是在奥斯本头脑风暴的基础上改造而成的一种书面脑暴方法(具体操作方式如下图)。从用户出发的创意脑暴在此基础上,增加了用户的典型故事作为线索。在开始前,每个参与者会拿到3张用户典型故事卡;在第一个5分钟,每人针对3个故事各写至少1个点子,贴在故事卡上,然后传给右邻;第二个5分钟,每人从传来的故事卡和前人的点子上得到启发,再各写至少1个点子,传给右邻;这样直到故事传完,就能得到至少6 x 3 x 6=108个点子。这也是为什么前面提到要控制参与者人数的原因,因为每增加1人,就会多一轮脑暴的时间,点子的数量会相应增加,在下一步分类交流时的工作量和时间也会直接增加。

第七步:点子现场收敛

在已经有了一百多个点子的情况下,现场投票可以快速把「好点子」筛出来。但由于在写点子的时候,把想法准确的表达在一张便签纸上并不是一件容易的事,所以在投票前,还是会有一个简单的交流,让大家了解彼此的点子,同时合并类似的点子。

投票分为感性轮和理性轮:感性轮是让人眼前一亮的点子,每人3票;理性轮是可行或能有效提升业绩的点子,也是每人3票。这样两个维度交叉出来就能得到既让人眼前一亮,又具有可行性的点子。参与者多样的背景也让点子的评估更加全面。

第八步:点子的后续跟进

脑暴结束并不是点子的结束。最初的点子只是一句话或一个示意图,从点子走向方案,还需要不断地打磨交互、视觉、文案、逻辑、场景等等方面的细节;从方案到投入开发乃至上线,则需要综合考虑优先级、人力、技术等更多方面的问题;在上线后,点子的可用性以及对业务的效果,也需要提前规划和进一步验证。

总的来说,从用户出发的创意脑暴,在线索和流程设计上做出了一些尝试,让产生的想法更加符合用户真实需求,以此来提高创新点子的成功率。但创新毕竟不是一件容易的事,在未来,我们也会不断地尝试和打磨这个流程,思考更好的方式,让创新有迹可循。

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

设计萌芽与平面设计之父石汉瑞——香港设计史(上集)

分享达人

你不知道,香港设计有位比教父更厉害的教父。

这10个不好用的微信设计,有哪些深层次的产品逻辑?

雪涛



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

作为在即时通讯领域超越昔日霸主 qq,并成为第一大全民 app。微信在产品设计领域一直被奉为经典享受着无数赞美和模仿追逐。


但是我们用户在使用产品过程中,难免对微信的某些设计产生疑问,有的设计可以说脱离了我们对用户体验的认知。

为什么会这样呢?是否在微信这些「不友好」的设计存在其背后的深层次的逻辑呢?

以下我举例10个点来分析这些「不友好」设计以及它背后的设计产品逻辑(个人思考猜想)。

1. 点赞评论为何要聚合,增加一个操作层级

朋友圈点击操作 icon,出现评论和点赞两个操作按钮。如果要点赞评论还要点击对应的点赞评论按钮,为何不直接将点赞和评论按钮放出来呢?

从用户操作的性来看,现在的朋友圈这种设计方式不够,多增加了一个操作路径。微信这样设计是有什么背后的深意和思考呢?

朋友圈的定位是分享生活,重点是分享而不是互动,如果将点赞和评论的入口直接放出来的话,用户互动频率变高,导致点赞者和评论者的特意的意图性和含金量远远不如将两个操作收起来的高。收起来的点赞评论所收到的赞美和互动会让分享者更真心实意,同时也减少了消息通知的无效打扰。这样整个朋友圈互动分享生态会变得更好。

2. 朋友圈为何不单独为一个tab,而只是tab里面的一个模块

在大众用户使用最多的两个功能,一个就是对话,一个就是朋友圈了。但是朋友圈却作为 tab3 中一个模块,按照用户高低频操作来说,朋友圈完全可以另成为一个单独 tab 了。

微信为什么这么做呢?我觉得如果微信朋友圈作为一个 tab 的话,那么微信真的变为了一个社交工具,而不是一种生活方式了。从格局纬度上说,生活方式的格局定义远高于社交工具。同时朋友圈作为一个模块,可以很好的将一部分流量分发到购物、游戏、扫一扫及小程序等模块中。

3. 购物、钱包、游戏商业盈利强的产品为何都只是tab的一个小模块

在互联网产品中,几乎所有产品的思路都是如何将产品做大,然后实现变现盈利。在中国用户流量最大的 app 上可以有无限的变现玩法,向游戏、购物、支付这些都是强盈利的产品,而微信却只以 tab 中的列表展示给用户,这似乎不符合商业逻辑。

如果将购物、游戏、支付再升一级进行强化,那么微信给用户的标签和定位不再是生活方式,而变成了一个单纯的卖货、游戏、支付平台,这样的话可能会影响微信牢不可破的用户认知和产品地位。

4. 朋友圈为何不支持gif

gif 图通常是好玩有意思的图,里面可以充满各种梗,各种笑点。对于发朋友圈的人来说,发 gif 图是用户一个较大的需求。

在考虑用户分享者的需求时,也同时要考虑朋友圈浏览者的用户,如果做了 gif 图,那么用户在浏览朋友圈的过程中,很容易被 gif 动态所吸引干扰,影响浏览者浏览整个朋友圈的视觉焦点。有的用户为了吸引用户注意会故意发一些哗众取众动态图,吸引微信好友重点关注,这样会导致浏览者体验很差。

所以说用户需求并不是都要做的,需要综合考虑产品所有角色的所有需求和体验。

5. 通讯录作为一个超低频的需求,为何作为第二个tab

在微信寸土寸金的页面上,作为第二个 tab,无疑是代表着特别重要的地位,但是呢?这个 tab 内容都是和联系人相关的。用户进入这个页面操作的频率很小,为什么要将这么重要的位置给予通讯录联系人呢?

历史原因,早期的微信版本就是一个即时通讯的 app,所以联系人显得比较重要,作为 tab2 是很正确的,这样更有即时聊天软件的认知。

随着微信成熟之后,其他各个业务的进入,导致微信平台的臃肿,为了避免微信产品的认知和意识形态的改变,毕竟微信认知还是要保留即时工具这个属性,所以这个 tab2 一直保留。

6. 微信号为什么不能修改

很多用户第一次设置微信号时,随意取了,例如前任的拼音、以前手机号、很长随意的字母等等,现在都有想改的需求。但是微信号只能设置一次,不允许修改。

  • 微信号如果可以随意修改,那么和 qq 昵称一样了,不具有唯一性和识别性,整个后端数据存储会变得特别混乱。
  • 很多用户会在好多地方留下微信号(二维码)以此联系,如果可以修改的话,那么留下的微信号(二维码)可能会作废,这样很影响添加微信的成功率和体验,导致以后双方添加为了保险都不敢用微信添加好友而转用 qq 添加好友了。

7. 我的-相册为何不叫我的朋友圈

朋友圈鼓励发相片,发相片比单纯的发文字的动态质量更高,所以呢,我的-相册为何不叫我的朋友圈,如果改为了我的朋友圈,则更偏向动态发布。

8. 朋友圈为什么不支持分组查看

  • 实现朋友圈分组,首先需要对所有微信好友分组,这就需要改变微信添加好友操作逻辑,而且维护分组成本特别高,使用起来是灾难。
  • 大部分用户查看朋友圈是打发时间的需求。所以朋友发的内容对于他们来说,越多越好。增加分组功能,反而会降低内容的数量,让用户需要很多操作才能看完所有内容。
  • 对于内容过滤的需求,已经提供屏蔽某人功能。
  • 从内容分发上来说,增加按组来查看内容,很容易忽略掉其他分组的朋友产生的高质量内容。
  • 朋友圈分组,会导致很多的好友动态无法被浏览到,影响朋友圈的数据,也影响朋友圈的互动性。

9. 为什么群发仅限200人

很多人有群发需求,希望可以将所有的好友群发消息,但是微信只支持200人群发。

这里也涉及到两种角色:群发者和接收者。

现在群发的使用场景:二维码宣传、点赞请求、过年群发,微商定目标人群发广告消息等等,这些对于接收者而言都是骚扰信息。

如果支持不限量群发,那么接收者的垃圾信息会变多,会被过度干扰。

10. 对话列表为何不能批量删除

  • 如果可以批量删除,则微信对话的整体活跃会降低,批量的话聊天列表都删了,后续和被删者主动对话概率下降。
  • 删除为谨慎操作,删除后聊天记录不在。

总结

微信的设计逻辑大体上都分为两个方面:

最流畅手机UI排行榜:小米第四、华为第二、最大黑马诞生

蓝蓝


安卓手机发展到现在,除了硬件方面受到大家关注之外,很多消费者在选择手机的时候,都会注重这款手机搭载的系统,也就是手机UI。就目前的情况来看,很多厂商的产品都有自己的特定UI,这些UI都是基于安卓系统深度打造的产品。

荔枝微课app体验报告:与AI结合,将有更大发展空间

博博

荔枝微课app体验报告:与AI结合,将有更大发展空间

人人都是产品经理 2018-07-21 13:14:44

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

荔枝微课是目前市面上知识付费领域非常优秀有竞争力的产品,本文对荔枝微课的产品设计进行了分析与思考。

荔枝微课app体验报告:与AI结合,将有更大发展空间

一、产品概述

1. 体验环境

  • 体验版本:4.3.0
  • 体验设备:华为mate10(128G版)
  • 安卓版本:8.0.0
  • 体验时间:2018年7月

2. 产品简介与定位

荔枝微课的应用介绍:

“荔枝微课是连接人与知识的内容分享平台,支持随时随地授课听课。与大咖、草根,一同共赴知识盛宴。”

可以发现,荔枝微课主要着力于打造一个全民学习知识&全民分享知识的大众知识分享平台,其核心内容则是平台沉淀下来的知识内容,其运营的关键是源源不断的能吸引用户购买的知识输出。

核心价值主要有2点:

对于知识学习者来说,荔枝微课可以为用户提供一个内容丰富的,可以随时随地进行学习的知识平台,满足用户能够方便快捷获取知识的需求。

对于知识分享者来说,荔枝微课可以为用户提供一个知识变现并实现自我价值的平台,以及平台为知识分享着提供的推广及流量支持。满足用户通过分享知识而实现个人价值并获得现实收益的需求。

3. 用户需求分析

3.1 用户画像

在进行需求分析之前,我们先来了解一下荔枝微课的用户群体,进行简单的用户画像,以便我们更加准确地进行需求分析。(PS:用户画像主要基于二手数据资料、竞品分析和个人体验产品后的逆向推理得出,由于个人水平以及时间问题,如有偏差望见谅。)

3.1.1 平台角色

经分析可发现,平台中主要存在两大角色:知识分享者(知识分享者又可以细分为机构和个人,在本文中不做区分)和知识学习者(也可以称作知识消费者)。

从产品的运营模式来看,很多用户既是知识消费者,又是知识分享者,用户在平台上学习自己欠缺的知识,分享自己的一技之长,形成了一个良性循环。

在体验中我发现,知识分享者的知识分享流程主要是通过PC端的“讲师管理后台”完成的,因此在针对app的体验中我主要针对知识学习者用户进行分析。

3.1.2 核心用户的基本信息

通过荔枝微课本身以及对比几款竞品的相关数据,我们可以大致推断其核心用户的基本信息:

年龄通过百度指数以及对核心用户的核心行为-学习各种实用技能知识,进行分析,我们可以看到,主要集中在30-39岁(占比60%左右),同时20-29岁, 40-49岁两个阶段也有不少分布(占比约为20%左右)。

荔枝微课app体验报告:与AI结合,将有更大发展空间

性别我们可以看到百度指数中显示,其用户性别比例男:女约为6:4。但是我们知道百度指数对于性别判定算法,有时候会产生误差。在荔枝微课这里就发生了这样的情况。

对于荔枝微课的性别比例,我们通过对产品进行分析,可以发现这个性别比例并不准确。

有一下2点理由:

  • 第一,在荔枝微课的“发现”页中存在很多的课程分类,我们可以看到其中大部分内容是针对女性用户的:比如母婴、形象、美妆个护、时尚、婚姻等等分类。而且作为优先级最高的第一屏的分类项目是推荐、婚姻、家庭关系、恋爱、母婴、育儿,这几个比较偏女性用户的分类。
  • 第二,在产品所有的课程内容中我们可以看到大量的课程都是针对女性用户的,比如瑜伽课、提升女生的气质等等相关课程。

因此我们大致可以进行推理,荔枝微课的用户应当女性偏多,女:男 约为 6:4 到 7:3 之间。

荔枝微课app体验报告:与AI结合,将有更大发展空间

区域可以看到荔枝微课的用户主要集中在一线以及新一线城市。

荔枝微课app体验报告:与AI结合,将有更大发展空间

收入对于用户的收入水平我们可以从2个方面进行推测, 一是我们上文得出荔枝微课的核心用户主要分布在一线及新一线城市;二是,我们可以看到在荔枝微课中绝大部分课程的价格都在100元以下。我们可以进行推测,荔枝微课的核心用户应该处于中等收入水平。

用户性格综合以上所有的分析,大致可以推断出用户的性格有以下几个特征:自我提升欲望强烈、存在一定的焦虑感、对自己某方面现状不是很满意。

二、产品分析

1. 产品结构图

荔枝微课有发现、精选、我的微课、个人中心4个以及导航模块。

  • “发现”是分类别展现课程信息,主要是满足用户分门别类查找自己感兴趣的知识的需求;
  • “精选”则是平台为用户精心挑选的课程列表;
  • “我的课程”是用户学习课程的记录,方便用户方便快捷的进行学习;
  • “个人中心”则是用户进行个人设置以及记录个人信息与操作的模块。

其产品结构图如下:

荔枝微课app体验报告:与AI结合,将有更大发展空间

2. 用户使用流程图

通过分析发现,产品中存在2个核心流程,一是用户购买课程流程(购买直播课程流程和购买非直播流程略有不同);二是用户学习课程流程(学习直播课程流程和学习非直播流程有不同),其流程图如下:

2.1 购买课程流程

购买直播课程流程和购买非直播流程略有不同,购买直播课程流程不需要判断课程是否收费,免费课程仍然进入支付流程,并支付0元。

荔枝微课app体验报告:与AI结合,将有更大发展空间

从分析体验来看,从开始到结束,整个购买课程流程非常清晰且顺畅,中间不存在多余流程,也没有其他任务导致流程中断,用户体验很好。

2.2 学习课程流程

相对购买流程来说,学习课程流程就没有那么清晰顺畅了,我们可以看到直播课程学习流程比较清晰。但是非直播课程学习课程却看起来比较复杂,个人觉得该流程中存在一些多余流程。

荔枝微课app体验报告:与AI结合,将有更大发展空间

(1)首次进入课程存在多余流程

我们从流程图中可以看到首次进入时,产品会让用户选择是从第一条开始听还是直接进入课程。选择从第一条开始听,用户将会进入课程学习页面,并从第一条语音开始播放。而选择直接进入课程,则进入课程学习页面,但课程不会进行播放。

我们可以看到2个不同选择只是有课程是否自动播放的区别,这个区别对用户来说不是必要,但是却多了一个页面,让用户多进行了一步操作。这并不利于用户完成整个课程学习流程。

而且,在体验过程中,我发现在这个选择页面中用户是无法后退的,也无法关闭选择弹框,只能在“从第一题哦啊开始听”和“直接进入课堂”中进行二选一,这可能是为了提升课程播放页面的打开率,但是这样的设置对用户体验不是十分友好。

荔枝微课app体验报告:与AI结合,将有更大发展空间

(2)非首次进入流程存在多余流程

对于非首次进入流程,我们来想象一个用户场景:

在上班的路上,有一个用户对荔枝微课上的一门化妆课程非常感兴趣,她打开课程进行学习,半个小时后她到公司了,她关闭课程开始上班。等到下午下班之后,她想起来自己早上还有一门课程没有学完,想要接着学习,这之后她很希望荔枝微课帮她记住了自己上午学习到哪里了。

我们可以看到,对于用户来说,被打断的课程直接进行续播,才是符合用户预期的。所以个人觉得在用户再次打开自己学习过的课程时,给用户“继续未听完的课”和“直接进入课堂”的选择是比较多余的,用户其实不需要这样的选择。这种不记住自己的学习进度的选择,反而是用户想要避免的。

荔枝微课app体验报告:与AI结合,将有更大发展空间

3. 导航结构分析

荔枝微课有发现、精选、我的微课、个人中心4个一级导航模块。

  • “发现”主要是分类别展现课程信息,主要是满足用户分门别类查找自己甘心去的知识的需求;
  • “精选”则是平台为用户精心挑选的课程列表;
  • “我的课程”则是用户学习课程的记录,方便用户方便快捷的进行学习;
  • “个人中心”则是用户进行个人设置以及记录个人信息与操作的模块。

接下里我们来分析一下荔枝微课的这个导航结构:

首先是“发现”页,发现页汇总了各种课程信息,并通过头部导航分类别进行展示,形成了典型的首页风格。从结构设置上来看并没有什么问题,但是个人在体验中发现其在内容展示上还是存在一定的优化空间。

3.1 三个功能按钮内容不随顶部导航切换

如截图所示,在每个分类导航的轮播图下方,都有“我的课程”、“精选专题”、“免费专区”三个按钮。点击按钮我们可以发现都是相关的课程列表,显然,这是产品为了吸引用户点击而专门设置的。

但是比较令人不解的是,这几个按钮的内容并不随着用户选择分类的切换而切换。无论是用户选择婚姻分类还是理财分类,精选专题为用户展现的列表都有可能是一些中医课程或者是英语学习,不会随着用户选择的不同而量身推荐内容。

另外,这种设置不但没有根据用户的兴趣进行针对性的推荐,而且,会对用户造成一定程度的误导,从用户的角度来说,导航切换了该导航下的内容进行相应的切换是一个顺理成章的逻辑,但这三个模块内容却不进行切换,这并不符合用户的操作认知。

荔枝微课app体验报告:与AI结合,将有更大发展空间

3.2 如果能更智能的进行个性化课程推荐可能会更好

我们从结构图中可以看到,发现页中共有26个分类导航,涵盖各种年龄阶段,不同性别不同层次的用户群体可能感兴趣的所有课程,可以说是课程内容非常丰富了。但是,如果用户对排名比较靠后的某一个类别感兴趣的话,那么他想要找到这个类别就会相对比较困难,而且在进行左滑的时候很容易错过中间某个分类。

同时,在体验的过程中,我用了男女两个性别不同的帐号进行体验,发现所展示的内容完全一致,连导航的排序也一致,这说明产品没有针对细分用户做一些相对个性化的区分。

我们知道,对于非基础知识的获取需求,不同的用户群体的需求可能差异很大,所以如果产品能够应用人工智能或者是大数据等技术对用户进行相对个性化的信息展示,那么在转换率以及用户体验方面都应该都会有所提升。

然后是“精选”页,个人觉得精选页存在2个问题:

第一,是与首页一样没有针对细分用户进行个性化的区分,我用了男女两个性别不同的帐号进行体验,所展示的内容完全一致。当然,精选课程列表可能选取的是一些相对比较热门的课程(热门也是一种吸引力的保障),或者是一些产品出于商业盈利或者其他考虑而特意选出的部分课程,所以倒是不一定非要有用户针对性。

第二,个人觉得其实精选课程并不需要作为一个一级导航页存在,其实精选课程的内容,完全可以由发现页中的“推荐”分类进行承载,只要在推荐类的课程列表中进行一些模块划分便能实现,并不需要显示一个专门的一级导航页。

接下来是“我的微课”页,分为全部课程、最近学习、即将开始三个模块。这里记录了用户购买和学习过的课程记录,满足用户方便快捷进行回溯或继续学习的需求,是一个非常好的页面。

但是,也存在一点点小问题,那就是被添加进来的课程不能进行管理,如果用户无意间点开一个自己不感兴趣的课程,后面想要删除,无法实现。在用户打开过的课程越来越多时,可能会造成不好的用户体验。

“个人中心”页,个人中心页是一个典型的个人中心页面,这里就不进行进一步分析了。

4. 核心页面分析

接下来我们对产品的几个核心页面进行一下分析。

4.1 课程详情页

首先是“课程详情”页,我们先想象一个场景:

一个用户在推荐页看到了一个瑜伽课程感觉挺有兴趣,于是她点开了这个课程,想进一步看看课程更详细的信息,好决定自己是不是要购买这个课程。课程详情页信息影响着用户是否购买的决策,是一个非常重要的页面。

我们来看看课程详情页的构成。

荔枝微课app体验报告:与AI结合,将有更大发展空间
  • 功能:购买专栏按钮、课程试听、分享课程、关注课程分享者帐号。
  • 信息:封面图、专栏标题、价格、课程更新进度、在学人数、课程详情、课程目录、人气榜、课程分享者帐号信息。
  • 需求:用户想进一步获取更详细的课程信息,好决定自己是不是要购买课程。
  • 思考:从信息内容来看,荔枝微课的课程详情页做得非常好,尤其是页面主体“详情”内容总能把课程非常具有吸引力的内容提炼出来,可以说从内容运营方面来说领先于市面上很多产品。

不过从功能的角度来看,荔枝微课还是可以进行小小的优化,首先便是缺少直接的咨询按钮,我们知道用户在进行购买决策时,如果能为用户提供一个咨询客服的入口,会一定程度提高转换率。

当然,因为平台上存在大量的个人讲师,因此,如果增加咨询按钮的话,这大量的客服工作可能需要平台来承担,这样会大量增加平台的成本。所以,目前荔枝微课的课程没有直接的咨询入口,也有可能是出于对成本的考虑。

然后,就是已消费用户的评论也是影响用户购买决策的重要因素,如果能在课程详情页中增加用户的评论,可能会锦上添花,对用户的决策产生正向影响。

而且,这种评价体系也将为优质的课程做更好的背书,再辅以一些相应的算法对课程进行排序,这可以促进讲师们提升自己的课程质量,长久下来将有助于平台整个课程质量的提升。

4.2 课程播放页

视频播放页也是产品非常重要的页面之一。我们可以看到左图是荔枝微课的课程播放页,右图是进入课程学习的上一步,选择是“继续未听完的课”还是“直接进入课堂”,如果用户是第一次进入课程则是,选择“从第一条开始听”还是“直接进入课堂”。

荔枝微课app体验报告:与AI结合,将有更大发展空间荔枝微课app体验报告:与AI结合,将有更大发展空间

在上文中我们已经提到过这个选择页面对于整个学习课程流程的完成有一定的多余,不过从其课程播放界面我们看到课程并不是一个完整的视频或音频而是一个模拟直播现场的分条课程页面时,我们大概能理解为什么会有这样的选择了。

我们知道讲师进行课程直播,然后将这些直播的内容进行沉淀,供用户反复学习,这是荔枝微课的一大核心特色。荔枝微课设置如上的课程学习页面,可能是为了更好的还原直播课程现场,包括直播的气氛、讲师与学生之间的互动交流碰撞出的火花等等。

不过,我们来想象一个场景,当不在那个直播氛围中,用户对于一条一条的去刷整个课程讨论的需求有多高呢?更何况很多讲师在直播的时候可能还不允许用户进行讨论,全程只是讲师在进行讲课。那用户更希望将这个内容一条条拆开还是将讲课内容整合起来听呢?我想答案应该很明显吧。

我们可以看到,其实在产品中还有一个不一样的播放页面,如下图所示,我们可以看到这就是直接将课程进行了整合,而且用户如果想要观看上课模式,可以直接进行切换,个人觉得其实所有的播放页面都可以直接采用这种模式。

这样不但能给用户自主选择的余地,而且我们在课程播放被打断之后,再次进入课程播放页的时候,也不用再选择是“继续未听完的课”还是“直接进入课堂”,而是可以直接断点续播。

当然,荔枝微课这样的页面设置可能背后有由于我个人产品能力不足,或者是我对荔枝微课了解不够深刻所导致的认知误差,如果是这样,还请海涵。

荔枝微课app体验报告:与AI结合,将有更大发展空间

三、总结

由于时间问题,这篇体验报告写得并不是很深入,有的观点也不一定准确,如果有一些不当之处,再次致歉。然后对于文中提到的一些问题,主要是秉持着希望荔枝微课发展越来越好的初衷进行体验的,还希望各位不要觉得这是一篇找茬文才好。

总结来说,荔枝微课是目前市面上知识付费领域非常优秀有竞争力的产品,不过现在产品针对用户进行个性化的定制变得越来越重要,尤其是这种知识付费产品,如何让用户迅速找到自己愿意付费的课程成为了产品的重要竞争点之一。

个人觉得如果荔枝微课能够在抓住在线教育风口的同时,再辅助以一定的人工智能、大数据等新技术进行提升,应该会带来更大的发展空间。

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

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



企业设计的未来是什么?是消费级用户体验

博博

企业设计的未来是什么?是消费级用户体验

人人都是产品经理 2018-07-21 15:13:33

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

企业产品要想取得最大的成功,就应该为用户提供符合消费产品标准的体验。

企业设计的未来是什么?是消费级用户体验

在John Maeda最近的一篇文章“为企业设计与为消费者设计之间的区别”中,他解释了为什么为企业设计与为消费者设计应用程序相比是不同的,也许更具挑战性。

然而,作为一个为企业、小企业和消费者产品设计应用程序的人,我逐渐相信,在过去几年中,为消费者和企业应用程序设计的区别已经迅速缩小。

对于一个企业产品来说,要获得最大的用户接受度和长期的成功,我们应该为最终用户提供一种体验,这种体验必须满足消费品中同样的可用性、性能和品牌标准。

用户已成为决策者

对于传统的企业产品,过去的模式是将产品卖给公司的高管,然后员工使用他们提供的工具。如果应用程序难于使用,员工会尽可能少地使用它,而是使用耗时的、通常是手工的变通方法,以避免在工具上花费时间。

如今,团队和员工经常选择自己的产品,这意味着赢得胜利的是最好的产品和设计,而不是最好的销售和营销。Slack、Sketch、Dropbox、Sunrise、谷歌Drive和Asana都是这一趋势的例子。

企业设计的未来是什么?是消费级用户体验

因为在不同平台之间切换的成本比以前要低得多,所以在工作中选择自己的工具要容易得多。我看到员工们选择为他们工作的日历工具、通信工具、文档存储系统,甚至设计工具,比如:草图。越来越多的大型团队工具决策,是自下而上的。用户正在选择他们喜欢的软件,而不是强加给他们的软件。

这意味着,企业产品的构建需要越来越少地考虑,如何在企业产品设计中应用消费者思维,而越来越多地考虑如何在企业产品设计中应用消费者思维。

不要依赖销售团队来实现用户的增长。

作为一名设计师,你的目标是开发一款非常棒的应用程序,让你的用户想要在屋顶上大声谈论它,并与所有的队友分享。

在这种情况下,接受是随机的,用户最终会对您的产品更忠诚,而不是他们被迫使用的东西。

性能很重要

尽管许多企业应用程序都是基于云计算的(例如:Salesforce、Quickbooks、Marketo、Infor等),但消费者对速度的预期与桌面应用程序的预期并无不同。

如果基于云的应用程序需要花费时间来加载,用户就会离开。Gmail和其他在线应用程序,已经为响应性和性能设置了标准。

创造第一次使用体验,让用户自己成功

正如我与协作设计应用UXPin共同编写的《企业用户体验的未来免费指南》(free guide the Future of Enterprise UX)中所解释的,设计师还应该努力创建一种无需外部培训的应用程序登录体验。

这仍然是我看到企业产品设计公司犹豫不决的地方,人们会说:

“好吧,人们理解这个工具需要一点培训,因为它比消费者应用程序复杂一点。”

为人们在工作中使用的产品不应该成为糟糕设计的借口,如果你遵循常见的UI结构——定位用户,给他们一个具体的用户好处,让他们觉得他们已经获得了宝贵的时间——他们将继续学习使用你的产品,就像他们学习视频游戏、移动应用程序和其他东西一样。

例如:在为Intuit的旗舰产品QuickBooks设计登录体验时,我们询问了关于业务的关键信息,然后根据所提供的信息定制体验,为用户做一些初始的设置工作。这有助于产品感觉它是为最终用户和他们的业务设计的。

我们创建了一个屏幕,显示了同一行业和位置上Quickbooks用户的数量。在传统的登录体验中,不需要这样做,但是这种流程的转换要比步骤更少的登录体验高。屏幕告诉人们:“我们将为您设置产品,从而为您节省时间”,这也强化了他们正在选择行业领导者。

企业设计的未来是什么?是消费级用户体验

第一次使用体验的新工具条不仅适用于尝试使用它的人。它必须足够好,让他们在与团队其他成员和他们的公司一起倡导产品时感到舒适。

让您的产品可由用户和团队定制

企业客户不应该接受这样的概念:他们需要实现专家来为客户定制产品,客户应该能够自己做到这一点。

如果您设计了一个企业应用程序,它可以由使用它的团队定制,那么您就给了他们一种对产品的投资和所有权的感觉。你赋予他们力量,给用户信心。用户把产品做对,从而变得更加忠诚。

此外,作为企业供应商,如果您将时间/资源用于客户的定制实现,您将没有足够的资源用于应用客户反馈和创新。

企业设计的风险和机遇

尽管企业用户体验和消费者用户体验之间的差距正在缩小,但在设计业务应用程序时,仍需要考虑一些持久的差异。

创新的风险更大

使用企业工具,您正在处理非常有价值的数据,因此如果您将数据隐藏在有趣的和不寻常的交互中,可能会让用户感到沮丧。作为一名设计师,您希望遵循已经存在的用户界面标准,将您的创新重点放在产品中比现有产品更好的部分。

作为一个谷歌文档编辑器的用户,我不需要知道如何使用文档编辑器,因为它大量地借用了我使用Microsoft Word所知道的东西。谷歌在执行过程中所强调的是,将创新集中在差异化上:将其与MS Word区别开来的协作工具。

我唯一需要学习的就是——如何邀请别人和我一起编辑?

一旦我有了这个概念,我就可以用成千上万个有趣的方法来使用这个应用程序,并且在我使用扩展我的应用到其他相关产品(比如:演示)的过程中,建立我所学到的东西。(我将第一个承认,在选择使用现有范例的地方,设计师很难做到自律,而且仍然非常专注于在哪里重新设计)

你很少有能力“吃狗食”你的工作

如果你是为Facebook或Pinterest这样的消费者工具设计的,你自己可能就是用户。对于企业或业务应用程序,情况往往不是这样。

这意味着你必须既是一名优秀的研究者,也是一名设计师。

当我在Intuit公司时,知道如何设计一个好的web应用程序,是不够的,我还必须了解会计结构,以及小型企业/会计师的需求。我从来没有开过小公司,所以我必须花更多的时间与使用该产品的人交流,学习和理解他们的目标和动机,比我在其他公司花的时间要多。

我邀请了其他人(比我知道得更多)和我一起设计。值得庆幸的是,在Asana,我们使用我们的应用来完成我们所有的工作,所以我们可以体验我们的用户体验。

结论

我很高兴看到设计师和设计领袖对创建企业工具更感兴趣,我认为这是因为消费者和企业之间的差距正在缩小。

有了消费者应用程序,你就可以设计出一种影响到数十亿用户的工具,并将娱乐带给世界。但随着时间的推移,设计师会感到矛盾。许多消费者应用程序通过广告赚钱,因此用户目标和公司目标并不同步。用户在想:

“我想看这个视频,公司在想,‘我们怎么能让用户在看这个视频之前看更多的广告呢?’”

为企业和其他付费应用程序设计的好处是:终端用户的目标和您的企业的目标是一致的,你的公司只有在用户成功使用该应用时才会受益。通过企业工具,你正在构建产品,帮助组织及其员工实现他们的目标,帮助所有企业更好地完成他们的工作。

原文作者:Amanda Linden

本文由 @ ANG 翻译发布于人人都是产品经理。未经许可,禁止转载

题图来自 Pixabay,基于 CC0 协议

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


真正驱动UI设计的,是用户思维模式

博博

真正驱动UI设计的,是用户思维模式

人人都是产品经理 2018-07-22 09:13:44

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

设计UI时,比布局配色动效更重要的是用户思维模式。

真正驱动UI设计的,是用户思维模式

作为设计师,尤其是需要设计面向大众的 APP 和网页等数字产品的设计师而言,我们必须创造出用户能够自然理解的东西,以人们能够清晰理解、不言自明的 UI界面和用户体验,来作为设计的最终目标。即使是再新鲜的产品,在设计的时候,也需要拿出用户能够感知得到的「熟悉」的模式,确保用户在使用过程中不会感到割裂,不会觉得混乱和迷茫。

在这种语境之下,许多设计师会担心一个很实际的问题:我设计的东西会不会不够新颖,会不会缺少突破?

不过,此时这样来提问兴许并没有问对问题。因为真正驱动 UI设计的,应该是我们常说的套路或者说是规则,更深层的东西,其实是用户的思维模式和心智模型。

举个例子。

你可能需要为大学的老师设计一个管理教学的仪表盘界面,这个仪表盘界面中需要呈现一些基本的功能,比如可以让教师为学生上传课程,课程资料,安排考试,发布考试成绩。他们可以通过整个仪表盘和学生进行互动,可以发布作业也可以收取作业,检查作业。在这个需求设定之下,接下来,我们可能需要从教师的角度来考虑整个仪表盘的 UI 和 UX设计。

在这个案例当中,我们需要思考一些问题。当教师在为学生上课的时候,他们对于课程,对于每个学习单元,甚至于是阶段性的测试的安排,都有着清晰的认知。他们的大脑当中,对于每一本教材,以及需要教授的知识点,在自己的大脑当中都有着明确的记忆,可以列举成列表,能够进行管理,传授给学生。这样一来,一切似乎都非常清晰了,设计师如果做的功课够多的话,能够快速地打磨出一个大学教师们喜欢的、易用的仪表盘界面。

但是,这样一来,设计师会忽略这个事情的另外一个层面,那就是学生。

老师是整个这个课程管理系统的仪表盘的掌控者,而学生同样通过它来学习课程。当学生面对一个课程的时候,他们并不会如同他们的老师一样,对于整个课程有清晰的认知,没有一个完整的概念。他们不具备老师的思维模式,或者说是拥有一种截然不同的心智模型。他们在面对课程的时候,可能更多的是零散的问题:

  • 我们昨天学到了什么?
  • 我错过的那堂课,教授了什么内容?
  • 明天那堂课,我需要准备什么?
  • 今天学的这堂课当中,最重要的知识点是什么?

学生在面对课程的时候,思维模式主要是沿着「课程-时间」这种模式来进行,而老师则不同,他们随时可以授课,主要的思维模式是「课程-内容」这样的架构。

这样一来,再重新思考一下整个产品的设计吧。在用户的思维模式驱动下设计 UI,怎么做都不会出大纰漏,但是如果遵循普通的 UI 模式,脑中想的是用什么控件,放什么地方,那就很难说了。

现在再来看,你会发现 UI 本身并不是驱动者,而是某种意义上的用户思维模式下的副产物。因此,解决方案当中,应该反映出教师和学生两者的思维模式。当你在设计这个 UI 的时候,你可以从竞争对手那里学习,甚至可以从毫不相关的其他产品当中汲取好设计,当然,前提是这种设计需要遵循用户的思维模式。

如果轮子能够发挥作用,为什么要重新发明呢?复制之后微调到适合你需求的样子就行了。

这当然并不是意味着我们会因此受限,或者说在创作过程中失去创意。探索用户的思维模式,本身是让你更加深刻地洞悉设计需求本质的一种方式,它甚至会让你的创造力更强,打破某些常规的边界,帮你更好地解决用户的问题。

此刻,你并不是在设计 UI界面,而是在用文本、图形和思维模式敲开你用户的大脑。

现在应该明白用户思维模式的重要性了吧。为什么要做用户调研,为什么要构建心智模型,为什么要做侧写,原因其实不复杂,真正的理解,还是来源于对用户行为模式的洞悉。为某个人进行设计,就像你给某个密友挑选礼物一样,你清楚他的喜好,明白他要什么,就能用一个小礼物让他的情绪最大化地释放。当你了解一个人的个性,知道他的愿望,那么为他定制产品的时候,针对性会更强,设计自然也会有四两拨千斤的效果。

那么,你要怎样更好的了解用户呢?

就像你和别人交朋友一样,一起去酒吧喝酒,一起吃火锅,在咖啡馆里面看着来往的行人,聊聊自己最近的生活,吐槽一下生活中不爽的事情,探讨一下感兴趣的话题。其实就这么简单,也没有什么很神奇的秘诀。

而真正的「了解」,也就是通过这种方式,开始真正明白甚至「感同身受」地洞彻用户生活的模式,细节和深层的需求。举个例子,要为某个经营餐馆的朋友制作一款软件,那么需要了解餐饮业相关的信息,了解你的朋友在管理和运营餐馆的时候,具体的流程和痛点。他们每个流程叫什么名字?他们是如何订购的食材?具体的步骤是什么?员工是怎么管理的?他们要跟踪哪方面的信息?回答这些问题,明白各个环节之间的关系,想清楚要做什么。你问的越多,获得的答案越多,整个局面就越清晰。

至少,我经常是这么提醒我自己,为人设计数字产品,本质上就是了解他们的生活和工作,了解事情本身和人性本身。

原文作者 : Eugen Eşanu

译者/编辑 : 陈子木

译文地址:https://www.uisdc.com/user-thinking-model

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


快速开发一个自己的微信小程序

seo达人

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

一.写在前面

小程序学习资料

1.为什么要学小程序开发?

对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。

2.开发准备:

(1)有人开玩笑说,会vue小程序根本都不用学:

微信小程序虽然是腾讯自己搞的,但是核心的思想跟vue等框架是一样一样的哦~

(2)善于搜集精美的小组件: “我们不生产代码,我们只是代码的搬运工”,善于找到想要的组件并把他们巧妙优雅的组装成一个大项目,也算是程序员一项基本技能了。

具体怎么找到想要的小程序demo,篇末会给大家推荐小程序的资源,有很多大神的项目哦

撸起袖子开干了

一.注册小程序账号,下载IDE

1.官网注册https://mp.weixin.qq.com/,并下载IDE。

2.官方文档一向都是最好的学习资料。

注意:

(1)注册账号之后会有一个appid,新建项目的时候需要填上,不然很多功能是用不了的,比如不能预览,不能上传代码等等。

(2)如果你注册过微信公众号的话,一定要注意,微信公众号和小程序是两个账号,二者的appid也是不同,小程序开发必须使用小程序的appid哦。

二.小程序框架介绍和运行机制

1.我们建立了“普通快速启动模板”,然后整个项目目录如下:

2.app.js

整个项目的启动文件,如注释写的onlaunch方法有三大功能,浏览器缓存进行存和取数据;用登陆成功的回调;获取用户信息。

globalData是定义整个项目的全局变量或者常量哦。

3.app.json

整个项目的配置文件,比如注册页面,配置tab页,设置整个项目的样式,页面标题等等;

!注意:小程序启动默认的第一个页面,就是app.json的pages中的第一个页面哦。

4.pages

小程序的页面组件,有几个页面就会有几个子文件夹。比如快速启动模板,就有两个页面,index和logs

5.打开index目录

可以看到有三个文件,其实和我们web开发的文件是一一对应的。

index.wxml对应index.html;

index.wxss对应index.css;

index.js就是js文件哦。

一般我们还会给每个页面组件添加一个.json文件,作为该页面组件的配置文件,设置页面标题等功能

6.双击index.js文件

(1)var app = getApp();

引入整个项目的app.js文件,用来取期中的公共变量等信息。

如果要使用util.js工具库中的某个方法,在util.js中module.exports导出,然后在需要的页面中require即可得到哦。

(2)比如,我们要获取豆瓣电影的时候,我们需要调用豆瓣的api;我们先在app.js中的gloabData中定义doubanBase

然后在index.js中使用app.globaData.doubanBase即可取到这个值。

当然这些常量你也可以在页面需要的时候,再用写死的值,但是为了整个项目的维护,还是建议把这种公用参数统一写在配置文件中哦。

(3)接下来在整个page({})中,第一个data,就是本页面组件的内部数据,会渲染到该页面的wxml文件中,类似于vue、react哦~

通过setData修改data数据,驱动页面渲染

(4)一些生命周期函数

比如onload(), onready(), onshow(), onhide()等等,监听页面加载、页面初次渲染、页面显示、页面隐藏等等

更多的可以查官网API哦。其中用的最多的就是onload()方法,和onShareAppMessage()方法(设置页面分享的信息)

7 .wxml模板的使用。

比如本项目电影页面,就是以最小的星级评价组件wxml当做模板,star到movie到movie-list,一级一级的嵌套使用。

star-template.wxml页面写好name属性;然后import引入的时候通过name获得即可

8.常用的wxml标签

view,text,icon,swiper,block,scroll-view等等,这些标签直接查官网文档即可

三.小程序框架、各个页面以及发布上线的注意点

1.整个框架中的一些注意点

(1)整个wxml页面,最底层的标签是哦。

(2) 每个页面顶部导航栏的颜色,title在本页面的json中配置,如果没有配置的话,取app.json中的总配置哦。

(3)json中不能写注释哦,不然会报错的。

(4)路由相关

1)使用wx.SwitchTab跳转tab页的话,在app.json中除了注册pages页面,还需要在tabBar中注册tab页,才能生效哦。

注意:tab最多5个,也就是我们说的头部或者底部最多5个菜单。其他的页面只能通过其他路由方法打开哦。

2)navigateTo是跳到某个非tab页,比如欢迎页,电影详情页,城市选择页;在app.json中注册后,不能在tabBar里注册哦,不然同样也是不能跳转的哦。

3)reLaunch跳转,新开的页面左上角是没有退回按钮的,本项目只用了一次,切换城市的时候哦。

(5)页面之间传递参数

参数写在跳转的url之中,然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

(6)data-开头的自定义属性的使用

比如wxml中我们怎么写

点击的事件对象可以这么取,var postId = event.currentTarget.dataset.postid;

注意: 大写会转换成小写,带_符号会转成驼峰形式

(7)事件对象event,event.target和event.currentTarget的区别:

target指的是当前点击的组件 和currentTarget 指的是事件捕获的组件。

比如,轮播图组件,点击事件应该要绑定到swiper上,这样才能监控任意一张图片是否被点击,

这时target这里指的是image(因为点击的是图片),而currentTarget指的是swiper(因为绑定点击事件在swiper上)

(8)使用免费的网络接口:

本项目中用到了 和风天气api,腾讯地图api,百度地图api,豆瓣电影api,聚合头条新闻api等,具体用法可以看各自官网的接口文档哦,很详细的

注意:免费接口是有访问限制的,所以如果用别人的组件用了这种接口的话,最好还是自己注册一个新的key替换上哦

附上一个免费接口大全:

https://github.com/jokermonn/-Api

!!另外还要注意,要把这些接口的域名配置到小程序的合法域名中,不然也是访问不了的

(8)wxss有一个坑:无法读取本地资源,比如背景图片用本地就会报错哦。

把本地图片弄成网络图片的几种方式: 上传到个人网站;QQ空间相册等等也是可以的哦

2.切换城市页面:

(1)首页使用navigateTo跳转到切换城市页,由于首页并没有关闭,导致切换了城市返回来,天气信息还是旧的。

正确的处理逻辑如下:

1)使用reLaunch跳转到切换城市页面,实质是关闭所有页面打开新的页面哦。

2)切换城市页面,更新公共变量中城市信息为手动切换的城区,再switchTab回到首页,触发首页重新加载。

3)首页获取城市信息的时候加一个判断,全局没有才取定位的,全局有(比如刚才设置了)就用全局的哦。

(2)城市列表的滚动和回到顶部

基于scroll-view组件的scroll-top属性,初始就是0,滚动就会增加的;点击回到顶部给它置为0即可回到顶部

3.天气页

(1)初始化页面,天气显示的逻辑

首先调用小程序的wx.getLocation方法获得当前的经纬度,然后调用腾讯地图获得当前的城市名称和区县名称,并存到公共变量中,

再调用查询天气和空气质量的方法哦。

(2)容错处理

城市的名称长短不一,有点名字特别长,比如巴彦淖尔市这种,需要动态的获取完整的城市名称;

有些偏僻的城市暂时没有天气信息,我们需要对返回的结果进行判断,没有信息的需要给用户一个良好的提示信息。

4.周边-地图服务页面

(1)调用百度地图的各种服务,查询酒店,美食,生活服务三种信息,更多信息可以看百度地图的文档

(2)点击时给被点中的图标加个边框,数据驱动视图,所以使用一个长度为3的数组保存三个图标当前是否被点中的状态

然后wxml再根据数据来动态添加class,增加边框样式

5.豆瓣电影页

(1)电影详情页的预览图片,用小程序本身的previewImage实现。

(2)详情页使用onReachBottom()方法,监控用户上拉触底事件,然后发送请求继续获得数据,实现懒加载的效果

(3)用户体验方面的优化,js中将整数评分比如7分统一改为7.0分,然后wxml模板再判断分数是否为0显示“暂无评分”

(4)搜索之后清空搜索框

因为小程序中不能使用getelementbyId这种方式获得元素,只能用数据来控制了

在data中加一个属性searchText来保存搜索框的内容并和 input的value属性绑定,搜索完成或者点击X时,searchText变量清空即可实现清空输入框的效果哦。

6.新闻页面

(1)聚合头条新闻的免费接口,只返回了新闻的基本信息,新闻的主体内容是没有的哦。

我找了好多新闻类的接口,好像都是没有新闻主体内容的。如果谁知道更好的接口欢迎留言告诉我哈~

(2)当然,也可以自己去爬新闻网站的数据哦

7.更多页面

(1)小程序目前开放外链的功能只是给公司组织的小程序开放了,个人开发还是不能使用外链的哦。

(2)彩蛋页面,获得用户信息

通过 wx.setStorageSync('userInfos', userInfos); 可以获得登陆小程序的用户的个人信息,可以发送给后台存到数据库中,方便对用户进行分析

我这里只是存储到浏览器缓存中哦,最大应该是10M缓存;如果用户把这个小程序从小程序列表中删除掉,就会清空这个缓存。

8.发布注意

(1) 新版本小程序发布的限制为2M,一般都是图片最占空间,所以尽量使用网络图片

具体怎么把本地图片变成网络图片,上面有讲哦。

(2)在开发者工具上预览测试没问题,点击上传;网页版小程序个的人中心的左侧“开发管理”菜单,第三块--开发版本就有了内容。

(3)点击提交,填写小程序相关信息,就可以提交审核了哦。

注意:分类最好填写准确,这样才能更快的通过审核哦。我这个小程序一天半时间过审上线的

至此,我就把两天开发内碰到的坑和注意点都过了一遍,据说还有更多的坑,等之后更深入的开发再继续研究咯。

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

设计基础!不简单的设计

蓝蓝

色彩跳跃、文字流畅、精美的设计,会不会让你有一种爱不释手的感觉呢?即使你对其中的文字内容并没有什么兴趣,有些精致的广告也能吸引住你,这就是平面设计的魅力!它能把一种概念,一种思想通过精美的构图、版式和色彩,传达给看到它的人。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档