Your address will show here +12 34 56 78
建站知识

QQ截图20180225094558.jpg

「猜你喜欢」当然还有很多词汇可以形容,比如:为您推荐、为您精选……经常在移动端购物的剁手一族们肯定都不会陌生。它似乎无孔不入般的存在于我们浏览的各种页面中,作为长尾内容向用户进行补充推荐。我们在浏览时可能并不会细想其背后的逻辑是什么?这样设计的原因是什么?但仔细观察就会发现,虽然它们都有共同的名字「猜你喜欢」,但在不同的运用场景下,其设计与推荐逻辑存在很大的差异化。

本文将从设计师的角度出发,全面而细致的介绍「猜你喜欢」内容设计的思考与总结。首先,先来介绍一下什么是长尾。

一. 什么是长尾

长尾(The Long Tail)这一概念是由Chris Anderson在 2004 年十月的「长尾」 一文中最早提出,用来描述诸如亚马逊和Netflix之类网站的商业和经济模式。

长尾理论是网络时代兴起的一种新理论,当商品的销售成本急剧降低时,几乎任何以前看似需求极低的产品,只要有卖,都会有人买。这些需求和销量不高的产品所占据的共同市场份额,可以和主流产品的市场份额相比,甚至更大。

二. 设计「猜你喜欢」的原因

简单了解长尾的含义后,可以清晰的知道移动电商在页面中要加入长尾设计(猜你喜欢)的原因:利用互联网移动端页面无限长的框架进行更多货品的曝光,来留住剩余未跳转流量进行商品售卖,来实现价值最大化。

三. 「猜你喜欢」常见的内容形式

「猜你喜欢」的推荐逻辑多以用户历史浏览记录或已购买记录进行推荐,而单品推荐更加贴近触达用户。因此,单品是经常运用到的展示形式,后续讲到的关于如何设计猜你喜欢也是以单品为例。同时,随着推荐逻辑的逐渐完善,为了丰富产品内容以及满足用户多维度需求,逐渐增加了关键词、促销活动、品牌、资讯等内容形式,通常以穿插的形式展示在单品列表中。

四. 如何设计「猜你喜欢」

「猜你喜欢」涉及的后台技术为BI推荐(实现模型),即将现有的用户数据进行有效整合,快速准确地提供决策依据,帮助产品做出明智的内容呈现,这里将不再多做介绍延展。主要从界面设计(表现模型)及用户分析(心理模型)这两方面出发进行分析。

在移动端购物APP界面中,运用猜你喜欢的场景大致有如下页面:首页、搜索结果页、商品详情页、购物车页、个人中心页、购买成功页、订单详情页、物流详情页、大促页面等场景。接下来,将分场景介绍在不同页面下如何设计「猜你喜欢」。

1. 首页

首页是最重要的运用场景,如京东、淘宝、严选等的首页都是以猜你喜欢作为长尾展示。用户在浏览首页时,多以无目的闲逛为主,当用户未在重点活动或栏目入口处点击跳走,此时进入长尾内容「猜你喜欢」,如何留住用户的脚步是其重点。因此首页「猜你喜欢」的推荐逻辑多以用户历史浏览记录来向用户推荐,以此来激发用户的潜在遗忘需求。

随着首页猜你喜欢运用场景的完善,后续可以单品推荐为主,增加关键词、品牌、促销活动、内容资讯、店铺等内容的穿插,既能丰富内容推荐维度,又能满足不同维度偏好的用户在闲逛时激发其潜在需求。


0

SEO/网站优化

QQ截图20180225092830.jpg

编者按:搜索体系由哪些元素组成?有哪些常见的功能模块?如何建立和优化搜索体系?这篇超全面的总结让你系统认识搜索体系。

看完本文你会学到

  • 搜索体系的组成。

  • 搜索功能常见的模块。

  • 优化的意义及思考。

写在前面的话

一般来说,搜索功能按顺序分三个阶段:点击搜索——跳转搜索页——搜索结果页。

接下来,我们按照流程顺序一个个来说吧。

搜索前

我们在使用搜索功能前,首先要找到他的入口在哪,所以设计一个明确,高效的入口是「登月第一步」。常见的移动端搜索入口会放在顶部或底部,有些资讯、博客、工具类app也会出现悬浮按钮式的搜索入口。

搜索中

点击跳转到搜索页后,就可以进行输入了。搜索系统现分为「文本」、「图片(扫码)」、「音频(识曲)」三种载体分别应对不用场景下的搜索需求。页面中会出现哪些模块呢?

1. 热词搜索

简称热搜,玩过微博的小伙伴们应该对此非常了解,许许多多的流量「爆款」就产生在这里,这小小的方寸之间几乎是大天朝舆论的风向标。

2. 关键词联想

当我们输入某个词或词组时,搜索系统往往会联想出词串组,帮助用户节省输入成本。当然,有时候出现的可能是相关内容的热搜或是广告投放。

3. 搜索历史

这个非常好理解,就是用户曾经搜索过的内容。通常来说 10 条的展示量基本可以满足用户的使用需求,京东最多可以展示 20 条的搜索历史。不过也有少的,微博只有区区两条的展示量,估计是不想与下面热搜入口的主要视觉区域对冲,稀释流量吧。

4. 运营区

这个模块的名称比较难定义,暂时叫运营区吧。此类模块经常出现在社交,泛娱乐类型的app中,搜索入口流量大,用户操作密集,建立运营模块/个性化定制模块既能生产流量,又能导流。

0

SEO/网站优化

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

产品设计中最重要的规则,可能是产品的周期管理。

每个人都应该遵守一定的重要规则,特别是那些从事产品设计的人。而许多设计师却日复一日地在设计中违反规则,而这是绝对不利于他们的设计的。在本文中,我将解释什么是设计中的重要规则,以及它对产品和服务中意味着什么。我还将在组织管理、协作和总体性能方面提出这一现象存在的可能含义。在这篇文章中我所要讨论的心理现象被称为米勒法则。我不是要告诉你什么是米勒法则,而是要引导你如何参加测试,以获得更具有沉浸性的学习效果。

测试: 步骤1

在开始之前,请先阅读测试规则。然后准备笔和纸,试着在脑海中回忆你刚刚读过的单词并将它们写下来。

以下列表中共 20 个单词,阅读并试着理解,尽量记住它们。不要试图将这些单词提前记录下来,花一分钟阅读,鼠标一直向下滚动,直到看到“STOP”字样,就开始第 2 个步骤。试着把单词记在“你的脑子里”,而不是将它们写在纸上。

好了,可以停下来了!

测试:步骤2

现在,用纸和笔写下你能记住的单词。仔细回想,但不要向上滚动页面去查看这些单词。如果你向上滚动,测试就会失效。给自己半分钟左右的时间,一旦确认已经将所有记住的单词写下来了,请向上滚动并检查你记住了多少单词。

与绝大多数人一样,你一般会记得5- 9 个单词。数以百计的实验已经证明了这种记忆限制的普遍性。当我第一次发现这种规律时,我就明白它对产品设计有巨大的影响,因为这种记忆限制会影响到我们的阅读效率和工作。这种在短时间内保持 7 位信息的能力被称为“米勒法则”。

米勒法则·魔法数字7

1956 年,有一篇论文成为了心理学中被引用最多的论文之一。它就是 1956 年由美国著名的认知心理学家乔治·••A•米勒发表的《神奇数字7 ± 2:对我们处理信息能力的局限》。论文的关键在于,在工作记忆(即短期记忆的一个组成部分)中,一个普通人能拥有的感知“组块”的数量是7±2。这经常被称为米勒定律。以下是来自维基百科的文章摘要:

米勒在他的文章中讨论了一维判断极限与短时记忆极限之间的巧合。在一维的绝对判断任务中,一个人被呈现一些在一个维度上变化的刺激(例如, 10 个不同的音调在音调上变化,并对每个刺激作出相应的反应。在 5 到 6 种不同的刺激下,人们表现几乎是完美的,但是随着不同刺激的数量的增加,它会下降。该任务可以被描述为信息传输:输入由n个可能的刺激组成,输出由一个外响应组成。输入信息中包含的信息可以由需要作出的二进制决策的数量决定,而对于响应也是一样的。因此,人们在一维绝对判断上的最大表现可以被描述为一个信息通道容量,大约有 2 到 3 个信息,这对应于区分 4 个和 8 个选择的能力。

此外,当用户需要完成一项需要认知努力的任务时,人脑大概可以记住 7 个信息。这是因为人的大脑在试图记忆时,同时也在头脑中处理各种刺激并不断地执行着不同的任务。米勒定律背后的一个关键概念是“组块”,这就意味着将不同的信息组合成一个完整的格式。例如,pencil实际上是一个就是“组块”,被组织成了一个格式塔。如果这些字母被重新排列了,那么它将是 6 个单独的信息块。分块是信息组织的关键原则,也是我们的用户体验和组织规则的基础。

如何在产品设计中应用米勒法则

信息组织最好不超过 9 个类别的元素,建议是 5 个组块。

你在“界面”中添加的信息越多,你就越难以利用手头的信息来“工作”。这对于初学者尤其重要,因为他们还没有将这些信息变为长期记忆中,或者使其成为行为习惯。这个规则甚至不断地被像Facebook,Google和Wordpress这样的巨头公司所打破。甚至在没开始接触汽车界面设计, 5 比特的规则也将极简主义作为一种严谨的设计理念。需要说明的是,由于工作记忆的局限性,随着产品功能越来越丰富,使用起来也越来越难,因为用户在操作产品时需要管理和记忆更多的信息。这也在提醒我们,良好的信息设计如此重要!

除此之外,米勒法则还强调了在设计过程中预见性和适当规划的重要性。当你在不断为产品添加更多功能时,产品界面必须能够适应这些新功能,而又不会破坏原有的视觉基础。毕竟重建产品需要花费大量的时间和资源。

另一种与米勒法则有关的感知现象被称为“首因效应”和“近因效应”。这些术语分别用来描述我们如何记忆在一段体验开始和结束时感觉到的事物,而不是在此过程中的事物。例如,一个单词列表,你会更可能地记住单词开头的单词和结尾。这种现象也被称为序列位置效应。

维基百科释义:

序列位置效应是指一个人在回忆一系列事物时,排在开头和最后的物品更容易被记住,而中间的物品则是被记得最差的。序列位置效应这个词是赫尔曼·艾宾浩斯通过他自己进行的研究中创造出来的。他从研究中发现:记忆的准确性随研究列表中的一个项目的位置变化而变化。当人们被要求回忆一份按顺序排列的物品清单时,人们倾向于从清单末尾开始回忆,回忆那些最近最容易记起的物品(近因效应)。在较早的物品列表中,前几个物品被记起的频率比中间的更高(首因效应)。

这一发现给商业和设计上带来了巨大的影响。如果人们在一个产品体验的开始和结束时记住的内容最多,那么我们如何利用这个规律带给用户积极的影响,并在减轻产品的负面影响呢?什么时候才是真正开始和结束?我们应该在列表的开始和结束时放置更重要的元素,这样的设计是否提高用户的留存率或增加点击率?这些都是用户体验设计师和产品经理在开发产品时应该考虑的问题了。

米勒定律也适用于生活的方方面面,包括如何设计一个复杂的产品等。通过减少每个设计组件中元素的数量(不超过 9 个),并将它们组合起来。确保你的设计能使用户准确地记住产品中的内容和位置,以便他们可以访问其功能。当项目列表变得太长时,它们很难在用户脑海中留下印象,这就要求用户进行更额外的阅读或繁琐的搜索。

随着产品发展的最新趋势,许多企业不得不追求精益求精的用户体验,因此遵守米勒定律显得尤其重要。用户在购买东西前一般都会先试用,如果他们在使用的第一天或一周内没有体验到产品价值,那他们就不会买。由于新用户没有足够的时间去了解产品的所有信息,所以信息设计需要在开发前进行深思熟虑地计划。

米勒法则的其他信息

我们生活在一个信息量呈指数增长的世界里。不适当地组织或完全删除某些信息,最终会降低我们完成任务的能力。这就是为什么省略不能带来高质量投资回报的物品,产品和服务亦是如此。这与帕累托原则一致 ,即80%的结果来自于20%的投资。你是否每天都要处理太多的事情来提高工作效率?你的团队是否使用了太多的工具进行协作? 你的团队成员是否太多? 你是否给你的新员工带来了认知负荷,让他们感到困惑?

米勒法律告诉我们,人类可以处理的信息量是有限的,信息过载会导致用户分心,从而对性能产生负面影响。 企业应该寻找以一种更易于用户消化的方式来组织信息。这可能是通过消除产生认知负荷的工具或应用程序,减少团队成员的数量,甚至根据他们的工作记忆的能力来分配部门。

心理学家 Mihaly Csikszentmihalyi 提出的“心流”概念尤其如此。“心流”是Mihaly创造的一个词,用来描述一种“专注”或“投入”的状态。人们在这个状态下会产生愉悦和满足感,这是人类处于一个最佳状态的表现。在这个状态下,我们的表现是最好的,真正地沉浸于自己所做的事情中。但是我们往往发现,一些企业却在无意间通过增加工作场所的干扰来员工。你认为提供给员工更多的工具是在提高工作效率吗?米勒定律告诉我们事实并非如此,对于完成任务,少即是多!

提高设计人员工作效率的可行性见解

关闭桌面上的Slack通知,清除那些你从不使用的软件,停止查阅那些无关紧要的收件箱。现在开始,只专注于一个设计工具并掌握它,这才是提高工作效率的正确方法!

原文作者:Jeff Davidson

原文地址:https://blog.prototypr.io/the-most-important-rule-in-ux-design-that-everyone-breaks-1c1cb188931

0

建站经验

QQ截图20180225092149.jpg

在设计系统中字体的重要性不用再多说,这篇文章主要和大家聊聊设计系统中「完美」的字体系统是如何搭建与维护的。本字体系统的定义大量参考了 Ant Design 的定义过程与设计成果,在此由衷表示感谢。

Ant Design 链接:Ant Design – An UI Design Language

先来简单看看设计说明:

基本上是使用 Ant Design 的字号、字阶和字重,然后重新选择了字体颜色。

众所周知,在 Sketch 中如果想要做到字体样式的复用,那么必须采用字体共享样式。而为了保持字体系统的可用性,维护组件与设计的可用性,必须确保字体样式能够覆盖所有的使用场景,这样才能够使得每次使用的字体都与共享样式关联上。

将所有字体可能使用的四个参数(字号、字重、对齐方式、颜色)进行排列组合,将获得 7 * 3 * 3 * ( 2 * 4 +2 * 3 + 2 ) = 1008 种样式。

如下图所示:

那 1008 种样式如何有效组织,如何合理地管理?接下来将会为你揭晓答案。

样式命名

如果上千个字体样式不进行组织规范,在落地使用时会是一个灾难。因此需要对字体样式的命名进行合理规范,保证现有 1008 个样式能够被轻松使用,并使其具有良好的修改能力与扩展能力。

经过一番探索后,我从字阶、字重、对齐方式、字体颜色、字体类型五个参数组织字体样式的命名。命名的次序如下:

字阶、字重与对齐方式是任何字体系统中通用的参数,从可用性角度考虑,将字阶作为第一位参数,字重作为第二位参数,对齐方式作为第三位参数。

因为不同的字体系统将会具有不同的颜色,从可扩展性角度考虑,将颜色作为最后一位。

字体类型实际上是通过不同颜色来区分正文、标题或者提示,因此将其作为颜色的子级,作为可选项。

同时为了保证字阶、颜色、字体类型的次序与我们预期设定的顺序保持一致,分别为每个参数添加前置序号。

样式使用

虽然通过 5 个层级的规划有效保证了字体系统的组织,但是 5 个层级的深度将会使得样式的选择非常不便。

针对这个问题,目前有两个方面的解决方案。在选择样式方面,利用 Sketch Runner 的 Apply 功能可以快速选择样式。

快捷键 ⌘ + ‘ 打开 Sketch Runner, apply 部分可以直接对选中图层赋予样式。

输入每个层级的首字母(大小写均可),将快速筛选出对应的样式。按下回车即可应用样式。

温馨提示:在 Sketch Runner 中将 Always open with 的选项改为 Last ,每次开启 Runner 将会维持上一次使用的标签。这样便于多次的样式修改。

另一方面,在 Sketch 中任意一个层级的样式都是可以直接选择,Sketch 将默认采用后续层级中的第一个样式。因此通过重命名把默认最常用的「左对齐」、「黑色」与「Primary 类型」的样式置于顶端。后续使用时可直接点击第一层级的字体样式。

样式修改

一个设计系统的难能可贵之处在于它的扩展性、修改能力。如果整个系统没有办法很好的响应使用者的需求,根据使用者的需求进行自定义,那么随着时间的流逝和需求的增多,这个设计系统就会逐渐失去使用价值。

因此在一个字体系统中,如何高效的修改字体样式,将会是一个非常重要的部分。这里的使用指南,它将赋能设计师更高效更轻松地支撑更多的业务场景。

字体与颜色

在本字体系统中颜色与字体是最容易修改的部分。需要修改所有的基准字体,只需要全选「字体接口」画板中的所有内容,修改字体点击同步样式即可,字重会保持不变。

颜色修改也是类似,全选对应颜色的字体单元,修改颜色,点击样式的同步按钮即可。

注:字体单元指代一组包含完整字阶与对齐样式的字体布局,为下图蓝色矩形框所示。

字体类型

理论上文字类型的修改和颜色的修改应该一致,但是文字类型是不透明度的不同,如果直接修改 HEX 或 RGB,往往会把不透明度覆盖掉。一种做法是「查找/替换颜色」。( sketch 48 的特性)利用该功能可以轻松替换颜色,且不影响不透明度。但是这个功能会全局替换,可能会影响不需要替换的颜色,所以并不推荐。目前仍然采用一组一组手动替换的方式。

字阶、字重

通过「图层筛选」功能筛选字阶或字重。选中后修改对应的字阶或者字重,点击同步。要修改几处,就重复该操作几次。或者使用 Automate 插件的 Replace Font 功能。

0

不好意思,上一篇“撒币”送福利的公众号文章造成很多人的朋友圈被刷屏,由于我们之前也没想到效果会这么火爆,在这里先给各位道个歉。

除了刷屏,文章“这封信里面,藏了 300 万数字货币”还造成了以下这些效果

1,文章发布 24 小时,累计阅读量达10W+。

2,当天,PMCAFF邀请码申请量大增,淘宝卖家涨价。

3,PMCAFF社区内大量沉默用户变得活跃,群里掀起了一股追忆往事的热烈讨论。

4,大量PMCAFF早期用户重新激活账号,多位 5000 以内ID的潜水党浮出水面,其中甚至有我们的 3 号老会员…

5,活动效果引发Nework区块链项目在Telegram、微信群等渠道强烈讨论,有比该项目更早发布的项目方来向我们咨询传播手段。

6,外包大师当天咨询量翻倍,有多个线索表示自己由这篇公众号文章而来。

7,PMCAFF猎头组当天收到多份产品经理职位简历。

很多朋友注意到了这篇文章形成的支点效应,纷纷通过各种渠道来向我们咨询方法论。

现在,我们就以还原内容事件本身的方式,为大家做一个统一的解答。

事情的起因,是在一顿集合了产品汪,程序猿与设计狮的聚餐上…

由于上菜太慢,大家在闲聊的过程中逐渐被隔壁桌进行商业互吹的食客吸引,晒公司年终福利的话题引起了产品汪的思考。年底了,我们是不是也要给社区用户来点儿实惠的年终福利?

随即,饭局上的大家简单碰出了一个可执行的Roadmap,并根据它估算出,大家一起努把力,好像能赶在明天早上实现落地。得出这个牛逼的结论,直接给哥几个打了鸡血。

结果,也就带出了这篇传播预算为0,整个相关活动从策划到执行仅用了 12 个小时的文章。

上面这段故事帮我们总结出了以下几点要素

项目由产品经理作为主策发起,能在饭局上说服其他岗位的兄弟姐妹放弃休息熬夜加班拼项目,说明好的产品经理一定要具备对团队的驱动能力。这当然需要长期积累,不然我们这场活动在策划之初就不可能得到如此快的响应与执行。

事后来看,虽然发起者是产品经理身份,但这无疑是一场成功的策划。早期,产品经理一定要研究并参与过一线增长,这也是产品运营不分家的来源。

要尊重想法的临时迸发,真正好的爆款策划很多都不是看着Timeline硬憋出来的,对灵光一现的把握,与实际推进能力,很大程度决定了你能不能做成爆款效果。

团队中的每个人都想做事、有担当,杜绝大公司病很重要。

下面,我们根据执行层逻辑,来具体看一下活动执行过程中所涉及的方法与困难。

一:活动管理

大家都说,办法总比困难多,可临到要做事了,你才能真正体会到万事开头难的那种感觉。

让产品经理做活动,多少有点赶鸭子上架的感觉,不信我先把困难摆出来:

1、晚上 7 点吃饭的时间,提出要做这个活动,而早上 8 点要上线,可谓时间紧,任务重。怎么协调技术确认方案和所有要实现的逻辑以及一些特殊情况的逻辑处理,我心中一无所知。

2、关于产品运营,各种方法都在说要梳理产品逻辑,而活动逻辑我以前并没有做过,需重新梳理。另外,设计稿什么时候出来,还是个未知数。如何评审每一个环节的开发,交代清楚需求,这也是一个问题。

3、以上难题如何在短时间内解决,实现快速开发,测试上线,面临巨大挑战。

以前大公司,大家搞活动,都是为了策划而策划,比如先提出预期,然后开始想实施办法,没有任何创意。基本都是靠广告硬砸,最后一场活动下来可能还是巨亏,转化率非常低。

而在PMCAFF,阿德一直在努力消除大公司病。这也才有了我们这场自下而上发起,自带流量和创意的,声势浩大的活动。

我是产品,这个活动我认为就应该用产品的方式的执行,即先发现问题,然后解决问题。发现问题是一个很苦逼的过程,要时刻把问题记在心里,吃饭睡觉,都在想各种创意和解决策略,当创意来了,还要用all in的手法全力实现出来。

那么具体问题有哪些呢?

1、产品将按照什么方式把所有的逻辑都考虑充分?

2、技术要根据运营预估用户量级来搭建技术框架?

3、测试该如何模拟真实环境进行压测,如何优化性能?

4、上线前的准备工作,以及筹备意外事件的临时处理方案等。比如短信通道挂了一定要有备用短信通道等等。

二:产品开发

产品整体思路只考虑两个问题,一个是如何让PMCAFF用户有参与感,另外一个是如何让更多用户参与进来。

基于此,产品分别采用了为社区用户生成专属数据展示页面及福利分享机会放送的方式,并且没有限制非会员用户领福利。之所以这样设计,对于PMCAFF社区用户来说,社区数据能够清晰的帮助用户匹配自身价值。

整个活动H5 利用Hooked模型,以分享的形式让用户参与“触发”“行动”“奖励”“投入”的整条行为路径。

用户通过分享的链接进入后可以选择自己是会员还是非会员。根据以往活动效果,最终确定单个社区用户最多可以给五位非会员用户获取福利的资格。

考虑到时间紧迫,我们决定优先基于微信进行适配及项目实施,同时技术方面确认前后端只通过接口交互,前端负责展示和交互逻辑,后端负责数据和后端业务,接口定义先行,分头开始开发,开发完成后,统一联调,最大程度进行统筹节约时间。

为了保证活动不会出现刷单和产生脏数据的问题,对用户提交进行了次数限制及地址验证。在后端接口实现上,活动的相关数据单独处理,与原系统数据和业务隔离。同时将获取NKC展示页面的链接的ID参数优化至每个页面,用户在任何页面分享链接进入都可以访问到会员选择页面。

针对关键数据进行了埋点和统计,保障活动效果数据可监测的达成,通过接入诸葛IO、谷歌统计等可以了解基本的页面访问PV、UV信息。

借助阿里云的数据可视化工具,在不侵入业务代码的情况下,通过拖拽调试的方式快速制作完成活动核心数据(总的实时指标、分小时、分用户维度的汇聚指标)的实时仪表盘,实时监控活动运行状态。

0