首页

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

资深UI设计者



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

作为在即时通讯领域超越昔日霸主 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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

设计基础!不简单的设计

蓝蓝设计的小编

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

App的视觉美成因分析

资深UI设计者



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

在做UI设计之初,我就有跟踪一些app版本和更新的习惯。在互联网行业工作久了,我总是会从他们每一个版本的产品形态去揣测这个公司的动态。看到一些功能和交互点,我会设身处地地思考如果我是他们的产品设计师应该如何处理;遇见一些深得我心的功能点,我也总是有一种和他们的产品设计师惺惺相惜的江湖感情。反正久而久之,我边猜测边总结,也是养成了自己的一套“歪门邪道”的方法论。




言归正传,我们来看这一篇文章的内容。


时间来到了2017年,手机空间越来越大,大家的手机中也装了越来越多的app。很多时候,当拿起一个朋友的手机,看他手机里都有哪些应用,这些应用的优先级是如何排布的,我经常会从中得出关于这个人的另一层线索。


比如一个人手机里优先位置上有脉脉、知乎、豆瓣、一个ONE、单读这几个app,那我可以推测这个人一定是具备文艺属性的互联网从业者。


比如一个人手机封面是吴亦凡或者鹿晗,手机里优先位置上有优酷、爱奇艺、腾讯视频、芒果TV、天猫、京东、蘑菇街这样的一堆app,就可以看出这是一位爱综艺、爱追星、爱剁手的小姑娘。

……



 1. 意识是主观形式与客观内容的内在统一



如果说2013~2015年app的 UI设计上充斥了很多同质化产品的话,到了2017年,UI设计师们在dribbble和behance的风格影响下,产品的设计有了更多的发展空间。我们不得不说的是,现在的app比之前越来越好看和越来越好用了。


如下图所示我随意截取了九个我自己觉得UI很棒的产品和大家分享,他们分别是Enjoy、单读、Artand、Airbnb、一个ONE、Gilt、良仓、Zeen、和氧气。

Image title

Image title

Image title


那这里有一个关键的问题就出现了,为什么有些app,普通用户一打开就自然而然地觉得它很美?用户这种“觉得它很美”的意识到底是从哪儿来的?



在此之前,我先来说两组哲学概念。


意识是主观形式与客观内容的内在统一。(马克思主义哲学)

内容决定形式,形式反作用于内容。(黑格尔唯心主义哲学)



为了阐述用户这种“觉得它很美”的意识到底是从哪儿来的,就必须要了解app中“内容”和“形式”之间的关系。那我们不妨来看一下什么叫内容,什么叫形式。



2.内容


如果斗胆给app设计工作中的“内容”下一个定义的话,我大概会说:内容是集成在app中,所有可被感知的图片、文字、声音的合集。这里之所以说是可被感知的,主要是从用户层面上看,忽略了用户不可感知的“代码”层面。



那么我们有必要搞清楚的是,一个app的内容到底是如何产生的?也就是一个app到底是如何产生的?



那这里我不妨展开一下,假设我是一个产品设计师,有一天CEO告诉我最近想做一个电商app。(这里我假设我们公司很有实力,忽略了市场和运营、渠道和资金上的问题,只考虑产品设计方面。)


那这个时候我会问老板:“老板,你做电商类app,是想做平台类的呢还是做垂直的呢?你可想好了啊,你做平台类的想要从淘宝、京东分份额的话,那你必须要有自己的特色。比如国内app‘xx’、‘xx’和‘xx’、他们都有自己的特色。或者说你是想做垂直一些的么?比如‘xx’是专门做化妆品领域的,比如‘xx’是专门做美食的。”然后老板被我一番“驯化”之后得出的结论是我们来做一个美食电商,但是这个美食电商不会对标Enjoy那样的高档人群,而是做成类似于“什么值得吃”这样的大众场景。


好,故事讲完了,现在我化身为这个产品设计师,简短片面地阐述我的思考过程:首先我拿到的目标是做一款“什么值得吃”app,它的目标人群是全中国吃货,且要满足吃货推荐、评价和在线下单支付(前期无法做渠道的话需要跳转淘宝京东链接)等功能。



经过一番思考,我认为这款app的MVP状态应该需要如下图所示的功能。

Image title


这里简单说一下MVP是啥意思。“MVP=Minimum Viable product(最小可行产品)”是《精益创业》的作者埃里克·莱斯提出提出的一个概念,字面意思就是可保证产品正常使用(主逻辑闭环)的最小产品单元。MVP又分为Validating MVP和Invalidating MVP,在这里就不展开了。《精益创业》是一本特别赞的书,推荐大家阅读。


我设计的这个其实是Invalidating MVP,大概需要四个部分。


“推荐”是核心,以帖子形式或者别的什么形式推荐一些东西并附上链接。“专题”方面做一些可供运营和推广的专题,比如“情人节送什么巧克力”、“最适合食辣族的几款辣酱”之类。“商城”里面会放一些自营的物品。“我的”里面会有我的推荐、我的收藏、我的订单之类的一堆东西。



你们发现了吗,其实这个时候,产品设计师就已经在定义产品的信息架构了。


第一,因为这个app叫”什么值得吃”,那我们是不是还需要推荐一些线下值得吃的店呢?如果做了是不是就和Enjoy同质化太严重了?那最好就是先不做。



第二,在推荐这一页里面我大概需要什么功能,因为面向的对象不太像Enjoy那种偏一线城市的人群,那我应该用户群体同类对标到今日头条这种level的感觉。



第三,这个首页我是按照各种食品属性的分类来建立推荐列表呢,还是说我按照人的属性来建立推荐列表呢?如果是按照食物的分类的话,给别人的感觉可能和淘宝很像,比如我在列表里面看到“巧克力”再点进去看巧克力的推荐,和我在“甜品族”这个人群标签里看到某巧克力好吃,这两种行为逻辑给用户的感觉完全不同。大家体会一下,作为“什么值得吃”这款app来说,肯定是后者更适合,所以得出结论是以人的属性建立推荐列表。(我甚至考虑到了以后迭代未来功能版本的可能性,比如到时候每个人可以有多种身份标签,再去做匹配社交之类的。)



好,那我现在关于产品首页大概得出了以下几点感觉。


(1)首页推荐按照人的属性标签去区分推荐列表。

(2)产品风格不宜太洋气(尤其是一定不能像Enjoy那样使用黑白配色),最好是产品对标今日头条和微博的感觉,受众偏向二三四线城市。

(3)每一个推荐应该有收藏、购买链接等部件,在首页上应该有专门为运营活动或者市场换量设置的入口(可能是banner形式)。

(4)为了不使推荐属性具有倾向性,每一个推荐都应该尽量层级平行。(比如“吃辣党”和“甜品族”就应该入口平行。)

(5)一定要保证一个完整且通顺的支付逻辑和用户推荐逻辑,这是最基本的两个功能。中间可能涉及到推荐里面要有商城链接(如果商城没有的要跳转淘宝),自己的商城要支持支付宝、微信等支付方式,要有订单状态和退单等一系列功能,余额功能或退款自动退回功能二选一(看公司需不需要资金池)。

....(此处省略N条)



其实,app“内容”的产生,就是我上述这些奇怪东西的综合(当然其实并没有上述这么简单,这个以后有机会细讲),比如我们从上面的论述当中,可以归纳出这款“什么值得吃”app的首页“推荐”应该具有如下信息。

Image title


我写这么多字其实就是想告诉大家一个app的“内容”是如何产生的,当然我这里说得十分简单,真实情况可能比这个复杂百倍,大家意会就是了。

好了说完了内容,我们来看所谓app中的“形式”又是什么。




3.形式



如果说我们把所有集成在app中可感知的图片、文字、声音的集合称作app的内容的话,那么app的形式就是“承载这些内容,使内容更好被感知的方式”。



人有五感,包括视觉、听觉、嗅觉、味觉和触觉。而人去和一款手机应用进行交互的时候只会从视觉、听觉、触觉(反馈)三个方面去感知,而触觉涉及到交互层面,以后我写到app的交互架构的时候会详细说。 听觉其实也不是本文重点,我举个例子一笔带过就好了。比如大家都用过滴滴,滴滴有一个“内容(功能)”是司机送一个乘客的过程中,当判断距离目的地很近的时候会默认进行一个“下一单的匹配”的功能。我们用滴滴的这个功能来对比手机游戏里面的“匹配下一局”,我们会发现这是几乎相同的“内容”,但是承载形式不一样。手游是视觉展现,你必须点击手机上的“匹配”按钮,而滴滴因为考虑到司机在开车很难解放双手去点击匹配,所以从产品逻辑上设计的是“语音提示+主动匹配+手动接单”的方式,所以我们总能在快下出租车的时候听到司机手机上传出响亮的“开始接单啦”语音提示。



本文的重点是视觉。

可能在大家以往的工作当中并不会关注一款app原型是怎么样设计出来的,大家可能只会关心我拿到原型以后应该如何转化为惊艳的高保真页面。

把一个内容整理、排列成一个app页面,就是大家更关心的“形式”的部分。还是回到上文“什么值得吃”这款虚构的app上,综合上面的观点,我大致能画出原型如下图所示两种。

Image title


当然这个是最粗糙的原型。(如果各位UI设计师在工作中接到了类似于这样的原型那只能说心疼你们一秒。)那么问题来了,大家在生活中一定见到过这两种原型的app。左边这个很常见,比如斗鱼tv这些直播平台,早期闲鱼、网易严选和今日头条等都是用的这种感觉;右边这个就更常见了,不论是点餐平台(美团、百度、饿了吗),还是大型电商(京东、淘宝)你都可以看到它。



那么问题来了,尝试分析一下,上面这两种形式到底有什么优劣呢?


第一件事应该想到的是如果需要采用右边的排列形式就必须要控制标签(tag)的字数,你懂我是什么意思吧?比如今天有个运营跳出来说我们做一个新的标签把名字叫“酸酸甜甜就是我”。产品一定特别崩溃,原因如下图所示。

Image title

   

第二,由于右边的标签占据了推荐贴的位置,导致推荐贴可能没有左边的那种展现形式更加醒目。但是相对的,右边的优势在于,由于竖向排列可以让一个屏幕显示更多的标签,这一点就需要取舍,比如一个产品的初期没准备放这么多切换标签的话,还是建议用左边那种。


更深层次的,外卖产品之所以用右边这种形式是因为力求一屏展示更多的菜,而且外卖产品的左侧标签一般是一家店铺的菜的品类,用户下滑菜品配合点击品类,点完即走,很方便(京东和淘宝电商类平台也是类似的)。但是比如早期的今日头条只能采用左边的这种形式,因为头条是需要用户长时间沉浸的,比如用户选中一个“体育”的标签一般要看好久好久,用户需要沉浸在这个标签下的内容中,那这个时候显然用右边这种设计方式让标签常驻屏幕左侧是不合适的。



基于以上分析,作为内容+电商平台的“什么值得吃”应该选用左边这种设计形式。

好,“什么值得吃”这个虚拟的例子就说到这里,主要是让大家明白内容和形式之间的关系,只有你们明白了这个,才可以正式进入本章的主题——app的视觉美成因分析。




4.app的视觉美成因分析



首先来看结论。一款app让你感觉到长得美,一定是团队在两个方面下功夫了——第一是内容的视觉优化,第二是形式的视觉优化。


我先来给你们看两张图,让你们感受一下什么叫内容的视觉优化。

Image title


你们可以看到左右两张图,左边是Enjoy的精选页,右边是我随手糟蹋的,大家会发现其实信息内容一模一样,但是左边的和右边的视觉设计差距大家一眼就能看出来吧。如果出现右边这样的UI稿,那只能说明这个团队在内容的视觉优化上面不用心!以上就是内容的视觉优化的作用。关于内容当中的图片,其实大家都有直观感受:一款app允许用户自定义的图片越多,这款app视觉就一定越难把控。原因很简单,因为用户自定义的信息里面,文字信息我们是可以通过限制字段和select(选择)去控制的,但是对于图片来说,哪怕控制了用户自定义图片的尺寸,我们也无法控制这些图片的质量。大家去看一下秒拍这款app,它的框架设计做得很棒,包括一些empty status(无内容状态页)的小图标绘制都很棒,但是我们打开app的时候,首页的内容总是参差不齐,差强人意。同理还有闲鱼这款app, UI框架做得很漂亮,但是内容页面总会显得没那么“高大上”。


Enjoy,自如、氧气、想去以及Gilt、美团等这些轻量电商或者租房app都选择花一大笔成本自己聘请一批或全职或兼职的摄影师的原因,就是为了得到符合自己规范的优质内容图片(比如你们去看自如的房源信息照片基本就是那种样子,氧气的内衣样片背景永远是白色)。


我之前做过一款旅行游学类app,在立项之初我们的图库里面就已经有了几万张高质量有版权的摄影师作品,然后在设计的过程中大胆采用流式布局(类似于今天开眼app),大量展示优质图片,才使得在2015年初那个时期我们的UI风格比较具有鲜明的特色。



其实这也是一个产品团队需要深思熟虑的点:


·比如旅行app,一定要有大量优质的图片作为依托才可能美。

·比如淘宝这种体量的大型电商,那除了尽可能控制图片质量以外,更多的应该在优化专题和banner上,并且告诉入驻商家(用户)上传优质的图片更容易获取用户流量从而转化为成订单。

·比如知乎、贴吧之类这样的问答和社区,用户上传的图片五花八门千奇百怪,那我们可以考虑在首页列表展示的时候就压根不要展示图片……



那是不是内容的视觉优化只包含图片的优化呢?其实不是的,除了图片的视觉优化以外,icon的优化、文字的视觉优化这些都是很重要的。


关于icon的优化大家应该已经看过足够多的文章在这里我就不赘述了,比如线性icon里面不能掺入块状icon,负空间icon里面不应突然出现一个奇怪的渐变icon。我有一点心得可以分享,比如大家画了一个2px的线性图标用于@2x,那在plus iPhone 的plus机型,6p 7p 8p都叫plus上面应该要手动调整一下图标变成3px而不是用png自动生成,否则会有虚边(除非你们的工程师使用的是svg的iconfont)。


关于文字的视觉优化,几乎市面上的所有app,只要涉及文字内容的排版,毫无例外都做得很好了。从根源上出发,为什么一个设计师需要去不厌其烦像个工匠一样折磨开发调整字体大小间距粗细什么乱七八糟的东西?其实,字体视觉优化去达到的目的主要有两点:


(1)辅助视觉对焦

(2)减轻视觉压力


第二点没什么好说的了,大家应该都明白,主要说第一点,视觉对焦这个事情是这样的,我们在一个界面中,如果不出现特别突兀的信息,正常人眼一般是从左到右,从上到下的顺序阅读。

Image title


比如上图是一个阅读界面,所有问题都没有特别突兀的地方。我们把界面做一个高斯模糊去分析视觉焦点,会发现整个页面呈现很平和,所以,这个页面的阅读顺序应该是一行一行地阅读文字,也就是从上到下,从左到右。

但是,这只是页面形式很平的情况,举个没那么平的例子。

Image title


上图是知乎的一个页面,我们把它去色并且高斯模糊去分析它的视觉焦点。大家会发现其实视觉焦点是加粗加大的标题字体和上面的小头像构成的。

Image title



这就是使用文字优化去辅助视觉对焦。我不妨再举一例,大家来看下面的2016年5月左右的氧气app截图。

Image title


左边是氧气的原UI,右边是我做的对比图。显然,关于文字优化辅助视觉对焦这一点,氧气的设计师深谙此道。他们没有按照右边那种传统办法设计这个页面,而是把每一个深夜话题的题目都变成了一张图,变成一张图还不算,还在这张图上面用浅绿色“划了重点”。这样虽然加大了设计师的工作量,但是这个页面正是因为这样的处理,能让用户第一眼聚焦到标题上。

Image title


关于内容的视觉优化,我来总结一下吧。


app内容是集成在app中,所有可被感知图片、文字、声音合集。那么内容的视觉优化主旨在于通过图片,文字,图形(icon)等的优化,去使得app更加易读、易用和美观。



说完了内容的视觉优化,我们再看一下形式的视觉优化案例。按说只要内容都已经优化好了,表现内容的形式不是排得特别烂,视觉效果展现出来应该都不错。我们再重复一遍app形式的定义——能更好地承载内容,使内容更好地被感知的方式。


我们该如何去排列不同的内容让它们更好地被感知呢?



这里面最常见的方法就是UI组件化设计,关于UI组件化设计我个人的定义是一款app里面同样形式排列但是不同内容的单元。这样的例子不胜枚举,我们每天都见到的最常见的一个组件化设计是微信里的每一个table view (表格视图)。

Image title


大家打开你们的微信,可以看到其实微信的聊天列表的每一个单元都是由固定的内容组成的。内容包含一张图(头像),两段文字(名字和信息),一段时间组成。

再看以下两个页面。

Image title


先看左面这个页面,虽然第二个品牌故事被遮挡了很多,但是由于我们看到了第一个GUCCI的banner之后,用户心理预期就有了,用户左滑一下屏幕大概率出现的也是这样形式的不同内容。


再看右边这张图,一个app的每一个专题都是以一本杂志的形式呈现的,所以当你看到这个页面的时候,用户心里会有“我左滑右滑都是一本专题书”的预期。



在设计过程中,我们往往会把相同属性的内容设计成同一形式。这样做有什么优点呢?最大的优点是减少用户认知负担,使得内容更好地被感知。

举个大家都懂的格式塔的例子。

Image title


看上图A,大家都知道接下来一个一定是正方形,但看上图B,下一个别说你们不知道是什么,我也不知道。格式塔相似律告诉我们,人们在知觉时,对刺激要素相似的项目,只要不被接近因素干扰,会倾向于把它们联合在一起。



那么我们就很容易解释下图。

Image title


大家看到这里是不是很熟悉?联系上下文,现在应该知道为什么市面上的app都这么设计了吧?还不就是为了让用户更好地接受信息。




5.总结



一切UI设计本质上是为了更好地展现信息。

更好地展现信息是为了更好地指引用户完成交互操作,从而让用户更好地去接收信息并完成一定功能目的。



本章一直在讲述app信息呈现上的视觉优化。其实视觉优化也好,逻辑优化、交互优化也罢,都是为了使得app更加好用、易用、有效。



在我刚开始接触UI设计的时候,也曾经沉迷dribbble,不断模仿那些大师们的惊艳界面。在长达一两年的学习和工作中,我一直认为UI设计师的本职工作就是画一个漂亮的壳子,把信息装进去然后能让app变得更好看而已。


但是后来我完全不这样想,如果现在让我评价一款app的UI,我可能真正最看重的那个维度已经不是“视觉感觉”上的好看,而是“视觉逻辑”上的严谨和“视觉风格”上的一体化,比如分割线,比如icon的样式,比如tableview(表格视图)的设计,比如字体的主次对比等。



当我没有理由的画一条分割线,只为了分割两个也不知道是啥的元素时,当我没有理由地就是想要为卡片化组件加上一个box-shadow(阴影)时,当我没有理由的设计一个奇怪的交互方式还硬说它特别好用时,我都在警醒自己一句话:每一个UI界面的设计都应该被赋予应有的理由。希望以此共勉。


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

 


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档