首页

亚马逊成功背后的体验设计逻辑:成功的设计并不需要美观

周周

亚马逊作为一个知名的电商平台,它的成功背后却有一个很难让人理解的设计逻辑:成功的设计不一定是美观的。为什么会这么说呢?本文将从四个维度展开分析,希望对你有帮助

B端产品中,Web端表单如何设计

周周

编辑导语:B端产品往往由于业务体量庞大,导致信息复杂,同时对业务的性的要求很高;服务于B端的业务,不能够出信息错误,填错一个信息,就会引发巨大的问题。本文结合笔者自己的工作经验,总结了大型B端业务中表单的设计方法,供小伙伴参考。

一、表单的定义

表单是信息添加、录入的通用形式;其作为获取用户输入的重要交互方式,也承担着将问题和答案进行配对的角色。

二、表单的设计原则

设计原则是任何一种解决方案的指路灯,它们体现解决方案应包含的基本目标。

针对互联网表单设计,我倡导的原则如下:

  1. 尽量减少痛苦;
  2. 说明填写完成路径;
  3. 考虑情境;
  4. 确保一直沟通。

三、表单的结构

我们先看看表单的结构,表单主要由5部分组成:

  1. 标题:这个元素帮助用户引导完成表单填写的整个过程,尤其在你对信息进行分组方便用户填写时,特别有用。
  2. 标签:告诉用户相对应的输入字段的含义。
  3. 输入域:包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  4. 提示信息:包含帮助信息、占位符和反馈信息提示。
  5. 操作按钮:包括提交按钮、保存按钮、复位按钮和一般按钮;用于将表单数据传送到服务器上。

四、表单的表现形式

1. 标签

标签根据标签与输入域的位置关系,分为:左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

每种标签样式都有自身的优点与局现性,根据不同的场景选择适合的标签样式,能提高用户阅读效率,同时还能降低信息填写时的错误率。

1)顶部对齐:根据Matteo Penzo 发布的关于标签放置的文章表明:采用顶部对齐的标签样式,浏览表单所需的时间最短;如果希望用户能快速扫描填写表单,顶部对齐的标签是一个不错的选择。

顶部对齐的结构,使得能放下更长的标签;但对于纵向空间是一个挑战,当填写信息过多时,表单就会很长。

  • 优点:有最快的浏览和处理速度,同时标签长度弹性大。
  • 缺点:非常占纵向空间。

2)左对齐:左对齐标签,文字开头按阅读视线对齐,符合人们的阅读习惯,是有利于阅读的。

浏览表单所需时间最长,但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等,可以故意减缓用户的填写速度,来确保填写的准确性)。

左对齐的结构需要更多的横向空间,因此在移动端的呈现上可以是个问题。

此外,在屏幕空间有限的情况下,也会一定程度上限制了标签和输入框的长度。

  • 优点:文字开头按阅读视线对齐,方便阅读,节约纵向空间。
  • 缺点:填写速度慢,标签长度和输入框弹性小。

3)右对齐:右对齐使得标签和输入之间的距离固定,有明确的视觉关联。

对于简短的表格,右对齐的标签可以有很快的完成时间;但由于标签长短不同,左边缘参差不齐,整体扫读表单的时候不容易了解全部信息。

与左对齐类似,在屏幕空间有限的情况下,也会一定程度上限制了标签和输入框的长度。

  • 优点:时间较短,节约纵向空间。
  • 缺点:整体可读性低,标签长度和输入框弹性小。

4)内联标签:内联标签由于它对空间的占比很小,往往运用于移动端的界面设计中;但如果在交互上处理不好,会有很大的缺陷。

内联标签是用作提示性文字,来告诉用户应该填写什么内容,但用户在填写的适合,它就会消失;因此用户无法仔细检查他们是否写下了所要求的内容,这增加了错误的可能性。

另外一个问题是:用户可能会把占位符文本误认为预填数据,因此忽略它(正如尼尔森诺曼集团的眼动追踪研究所证实的)。

  • 优点:空间占比小。
  • 缺点:在增加错误的可能性。

5)图标标签:图标标签是内联标签的一种演化形式,在一定程度上缓解用户的困惑和自我怀疑的心理。

但就图标而言,用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式,用户就要思考和猜测它的含义。

此外,输入项一多,还得记忆那个图标所对应的意思。

  • 优点:空间占比小;在一定程度上缓解用户的困惑和自我怀疑。
  • 缺点:可能造成用户的认知负担,增加用户记忆成本。

6)浮动标签:用户在输入时,内部标题(提示信息)进行浮动位移,即节省了空间,提示性信息依旧在。

但相比其他几种标签样式来说,需要一定的开发成本。

  • 优点:空间占比小,无需用户对标签进行记忆
  • 缺点:需要一定的开发成本

关于标签样式的选择

2. 输入域

输入域是表单的核心主体,包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件(按类型分)。

选择适合的控件样式,能在一定程度上提高表单填写的效率。

在输入域中,存在多种控件样式,那么在设计产品的过程中,我们该如何选择,如何取舍呢?

以下是我在日常工作中的一些摸索,也包括借鉴前辈的一些经验。供大家参考。

1)文本框

文本框包含了单行文本框和多行文本框。

针对单行文本框的设计建议:

a. 选择适合的大小,它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

如下图即一典型案例,一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话,容易误导用户对所需输入金额的判断,造成极大不安全感。

b. 采用字段掩码,自动匹配特定数字的输入格式。

例如:电话、身份证、银行卡等;按照7加减二法则,根据用户的记忆结构来最大化提升阅读体验。

c. 弹出键盘应与需要输入的文本类型相匹配(移动端)。

d. 涉及到金额输入时,当用户输入的金额超过千时,出现最高分位提示,每多输入一位,最高分位随之增加。

e. 文字输入最好有自动补全、自动建议功能,减少不必要的文字输入,减少出错。

例如:填写地址栏通常是表单中最成问题的部分,像地址自动填充(基于用户的定位和输入提供准确的建议)的工具使用户能以更少打字量完成输入。

f. 有限制输入时,给予用户明确的提示,增加用户感知,减少出错率。

知识扩展:什么是7加减二法则?

早在19世纪中叶,爱尔兰哲学家汉米尔顿观察到,有一个神奇的7±2效应;意思就是人们的短时记忆的信息量是7个,可能会上下浮动2个。

针对多行文本框的设计建议:

使用可拉伸的文本框比固定框更好,从使用体验讲,可变化的文本框使页面整体效果更统一。

固定文的文本框当输入文本超过其设置的宽度,会出现内滚动条,当页面上出现两个滚动条时(大页面的滚动条),在使用操作上会带来一定的混乱。

2)选择框

包括下拉列表、选框、开关、日期选择器等。

对于选择框有如下几个建议:

a. 避免设置默认值:除非您认为大部分用户将选择该值,尤其是必填字段。

为什么?

因为你可能会增加错误,用户会快速扫描表单,所以他们可能会跳过一些已经有默认值的字段。

但是这个规则不适用于智能的默认值,也就是根据用户的信息设置的默认值;因为智能的默认值可以使表单更快,更准确地完成。

例如:根据定位数据预先选择用户所在的国家/地区。

不过,请谨慎使用。

b. 当选项很多时,提供检索功能。

c. 提示信息要明确,要让用户明确自己选择的是什么。

3)单选框与复选框

a. 按一定的逻辑进行选项排序,例如根据发生的可能性、难易程度、风险大小来排序。

b. 选项应该易于理解,容易区分。

c. 尽可能提供默认选项。

4)关于控件的选择

a. 选择框优于输入框。

任何高密度的操作,都会引起用户的不适;因此,在输入项的选择时,用选择来代替键盘输入。

  • 一方面:简化用户的操作,点击次数远小于输入,减少用户的操作密度;
  • 另一方面:减轻用户的认知、记忆负担。

相较于输入框,选择操作步骤少,相对来说效率较高;同时,用户用思考输入值,也不用承担输入错误要重新输入的风险。

用户可以通过选择项,清晰明确的知道有哪些值可以选择,对于一些无关紧要,或者用户较难理解的输入项,可以预制默认值,可以照顾到各阶段的用户。

b. 单选框与下拉选择框。

单选框较为适合选项较少(少于五个),同时选择项之间较为类似,需要强调或对比时,可以优先考虑单选框。

另外,当选项能见度和快速响应优先时,也建议优先考虑单选框。

因为相较于下拉选择,用户可以通过展示出来的选项,直接选中目标选项,提升输入效率。

下拉选择框较为适合选项较多(超过五个),有默认选项或者选择项之间有较大差异,同时下拉选择,最好不要引起随后输入项数量以及页面的变化;否则下拉选择的收起以及页面的变化,易引起用户不适。

若选项过多,超过二十个,最好引入模糊匹配以及一定排序规则(首字母排序、数字排序等),方面用户提前预知选项的大致位置,或通过模糊检索找到相应的选项。

5)关于必填项

大多数情况下,所有字段都是必填项,只有几个字段是可选的,一般用“*”标记必填字段。

但星号并不适合所有类型的用户,记得之前客户问星号是什么意思?

它是页面中的标签还是描述中的标签;同时,并且红色会从用户方面引起负面关联,因为红色表示错误。

为了避免这种误解,可采用文本框内暗提示。

它也是一个比较清晰标志必填项的方式,并且还很节省空间,也能在一定程度上起到视觉降噪的作用。

3. 提示信息

提示信息可以分为引导性提示(帮助文字、输入框提示、错误提示信息)和反馈性提示两种。

这里主要想讲讲错误提示的设计:

1)关于错误提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息,会给用户的记忆造成较高的认知符合,会强制用户回忆每个错误输入框中的错误消息。

错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。

它可以帮助当场识别错误而不是靠回忆错误,缩短反应时间,提高表单填写效率。

因此,错误信息提示与错误的字段邻近放置可以获得最佳性能。

下面来看一个简单的例子,如下图:

当我们在录入客户信息时,假设填写错误手机号码,按照上面的论述,错误提示可以最直观的显示在这4个位置。

哪一个位置是最佳位置呢?

答案是:右边。理由如下:

a. 错误信息提示右边,符合人们从左到右的阅读习惯;用户视觉路径自然流畅,很大程度上减少了用户的精力和视觉工作。

放在左边则恰恰相反,同时左边与用户期望相违背,因为左侧放置更高优先级的元素,是我们的直觉。

但事实上用户需要专注于纠正他们的输入,因此输入框应该是更重要的元素。

b. 对于上边的错误信息提示,有着更高的认知负荷。

当标签顶部对齐时,错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音,用户注意力被分散,很难专注于其中一个,并且可能混淆它们。

c. 放置下边的错误信息提示,虽然不符合从左到右的阅读习惯,但它确与自然的从上倒下的阅读流程相对应。

手机屏幕缺少水平空间,把错误信息提示放置在下方是个不错的选择。

虽然它可能会增加用户阅读文本时的认知负荷(与类比上边的错误信息提示),但可以通过将它们隔开足够的间隔来防止这种情况。

综上所述,如果是web端请选择放置在右边,如果是移动端则放置在下边。

当然,如果开发时间有限,都选择放置下边也可以,方便适配。

2)帮助信息

有时候需要帮助性信息,来辅助用户完成表单填写。

当文本简短的时候,可以直接放在改输入框的附近。

当文案过长的时候,就需要做气泡框——获取鼠标焦点,则展开信息,失去焦点则消失(在气泡展开时,切忌勿挡住input输入框)。

也有些产品是将帮助信息放在页面顶部,如果是针对全局帮助性信息,则可以采用这种方式。

如果只是针对某个元素提醒,则应将两者放在一起,让用户知道当前处于什么地方,在针对什么进行引导、辅助。

五、复杂业务表单布局结构探索

在复杂业务表单设计中采用单列布局,大家有没有遇到过类似的问题,例如:

  • 客户1:“单列右侧空白区域过大,留白多,表单太长啦。”
  • 客户2:“单列纵向占比大,表单太长,我看不到全部内容。”
  • 客户3:“怎么不采用多列,多列我能看的内容多啊”等等…

针对这些问题,我们团队从自身的业务出发,对复杂业务表单布局进行了相应的探索。

1. 多列与单列的探索

首先,我们根据下图的规则对复杂业务的表单布局进行多方案的实验:

方案一:采用4列布局,标签顶对齐。

那为什么标签不采用右对齐呢?

四列布局,页面已经很拥挤,加上标签长度长短不一且最大长度也无法确定(用户自定义),所以放置采用了标签顶对齐。

总体上来看,缩减的长图并不理想。

方案二:三列布局,标签右对齐的方式。

由于三列布局,页面空间较大,尝试着把标签右对齐,总体上达到了缩减表单长度的目的。

但字段若出现换行,则页面信息模块是混乱的。

根据CXL研究所的发现:单列表单比多列表单完成得更快一些。在这项研究中,参与测试的人完成单列表单的平均速度比多列表单快15.4秒;多列布局虽然缩减了表单长度,空间利用率也提高了,但整体的填写效率降低了,这与表单设计原则相违背。

同时从开发效率来看,单列成本较低(多列需要做响应式);从业务承载上看,单列扩展性更强,适合复杂多样的业务场景(多列适合交单一的场景)。

综上,最后还是采用单列布局。

2. 单列布局在复杂业务中运用

面临的问题该如何解决?

我们团队重新审视了客户的这些反馈:空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。

我们尝试把这些问题翻译成:我无法预知表单的填写内容,我想要是把空白的地方也利用上我是不是就看全了整个表单。

如果是这样,用户的本质述求就是想要掌控感。

对现有的单列布局做了以下几个处理:

  • a. 采用卡片式布局,区分内容;
  • b. 增加引导式的定位锚点;
  • c. 在锚处加入微动效反馈,给予用户确定感。

感谢阅读!本文给表单设计提供了一个基本的指南,在具体项目中,你可能需要根据产品特性和用户需求进行调整。


文章来源:人人都是产品经理           作者:@Nick 


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

谷歌的 10 个“Material Design”设计要点(下)

周周

编辑导读:如今,谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此,它们的数字产品设计会对整个行业产生巨大的影响,成为人们竞相模仿的榜样。在该公司的UI&UX(用户界面&用户体验)设计指南中,设计师们提到了10条原则,不管是iOS还是安卓系统都同样适用。在这篇文章中,作者从这10条指南出发,加上自己的经验和相关案例,在设计方面为大家提供一些建议,希望对大家设计产品有帮助。

6. 利用声音和触感唤起用户的情感

这里的声音特指“Hero sounds”,用于衬托一些喜庆的、重要的高光时刻,它们常被用来激起用户的情感,或烘托一种喜悦的气氛,从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds:庆祝用户进行了某项操作;欢迎用户使用新的应用程序或体验;确认用户成功使用某款产品。——《谷歌声音设计指南》

声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到,Hero sounds出现的次数不应该频繁,否则无法突出其重要性。通过在同样的环节提供同样的声音,久而久之用户会将这种提示音与成就感挂钩,从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音,或者每次待办事项标记为完成后就会出现庆祝的提示音。

不管我们是否注意到这一点,我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音,还是MacBook的废纸篓在清空时发出的揉纸的声音,都在某种程度上影响着我们的情绪,也帮助我们更加了解用户界面上发生的一切。

触觉可以和声音配合使用,也可以单独使用。举个例子,在手机黑屏的时候,触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时,触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》

除了声音之外,触觉设计(如震动)也是一种刺激感觉的好方法,可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后,我们将会对产品的某些功能有更加深入的了解。

举个例子,如果某个用户通过APP进行付款,但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动,对用户进行错误反馈。当用户熟悉了这种震动模式之后,下一次再感受到这种震动,就会立刻知道付款出现了问题。

产品设计师很容易忽略声音和触觉这两个板块,而过度专注于画面。但这两个板块却也扮演着非常重要的效果,可以为用户体验锦上添花。

7. 通过动图表达独特的风格、塑造个性化品牌体验

图片来自Material

动图可以增加用户的好感,在互动中为用户增加个性化体验,也可以表现品牌独特的风格。——《谷歌手势设计指南》

动图是我自己设计的产品Confetti中一个非常重要的因素,这是一款运动追踪APP,是为那些追踪自己生活习惯的用户设计的。在设计这款产品时,我希望可以为用户创造出一种满足感,鼓励他们培养好习惯。在这款APP中,我大量使用切换功能,通过不同的手势,界面或进程可以平滑过渡,使用起来非常便捷。当一个好习惯完成时,还会出现彩屑动画飞舞的,加强用户的满意度。

简言之,动图可以应用于不同的场景,通过过渡和变化的吸引用户。

动图可以强化两种元素之间的联系,实现快速切换,迅速解决特定的任务。动图可以让用户专注于眼下最重要的事,不被其他因素所干扰。——《谷歌手势设计指南》

在2020年,你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基(Taras Skytski)在《用户体验设计中动画使用的终极指南》中指出的那样:“众多研究发现,界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别,而超过1秒的动画则会造成一种延迟感,让用户感到不舒服。”

通过动图及产生的动画效果(如切换)可以改善用户体验,同时保证可以迅速找到需要的版面,而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间,又不能改善体验,那么这种环节就没有必要存在。

8. 通过图像进行交流,并区分和突出产品特性

图片来自Bribble|制图Elena Petkovska

我们或多或少都有这样的体验:打开一个界面,里面充斥着太多文字和太少的图像。在用户体验设计中,展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品,而是希望通过图像对一款产品进行直观的视觉理解。

你所选择的图像应该能够清晰地展示产品特点,不管是用户自己上传的图片,专业摄影师的图片,还是插画风格的图片,它们都应该能直观展示产品外观,反应产品的特点。——《谷歌图像设计指南》

APP里的插图和所有的视觉元素一样重要,好的图片可以让用户界面更加生动,使用户体验更加完善。恰当的图片还能展示品牌风格,成为无声的“故事讲述者”。

我们应当有目的地使用图像,作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息,如产品外形、风格,APP的用途,状态等。媒体界有这么一句话:一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。

9. 关注产品的像素密度

图片来自Material

用户界面设计中应该关注产品的像素密度,让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》

像素密度(PPI)是用来衡量每物理英寸的像素数。另一个常用的单位是DP(Density-independent pixels,有时候简称为DIP)。像素密度=屏幕宽度或高度(以像素为单位)/屏幕宽度或高度(以英寸为单位)。

在设计界面时,我们不应该只关注像素,还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放,以适应不同屏幕的尺寸。

举个例子,我们现在有一个按钮素材资源,大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示;在一个320ppi的屏幕上它就会扩大成400 x 100 px,相当于原始素材的两倍大。

通过以上例子我们可以了解,在像素密度不同的屏幕上,素材呈现的状态是不一样的。在实际应用中,素材可以会被放大三倍甚至四倍,如果素材不够清晰,就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎,尝试在不同设备上打开并检查。

素材密度如何适应屏幕尺寸?举个例子,iPhone XS Max的屏幕是414 x 896 pt,注意这里的尺寸是物理尺寸pt,而非像素。如果以像素为单位计算,那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时,我会首先考虑用414 x 896 pt的素材,然后在输出素材时将其乘以3。

10. 考虑设计在线/离线状态

图片来自Material

离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用,你最好能向用户明确显示连线状态。——《谷歌离线设计指南》

离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用,但是在能联网的时候,最好还是主动提示用户,推荐他们连接网络。

如果有可能的话,要提前告知用户下载相关信息,以便脱机访问。最常见的例子就是Spotify等音乐应用程序,它允许用户下载歌曲,以便在没有网络的时候也能继续听歌。

假如你的产品不像Spotify或者Netflix那样需要下载具体内容,你可以发挥创意来设计在线、离线两种模式。

谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子(在谷歌浏览器连网的过程中,离线画面会出现一只霸王龙,按空格键或者向上的箭头就能控制霸王龙——译者注)。这个小游戏填补了用户等待连线的时间,将消极体验转变成了积极体验。

11. 总结

我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外,我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导,在这一领域进行更深入地探索。


文章来源:人人都是产品经理           作者:Danny Sapio           译者:Michiko


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

用户行为分析和以用户为中心的设计

ui设计分享达人

用户行为分析,认识用户满足用户最直接要求为设计中心


用户行为分析

用户行为是指用户在使用产品时的行为,针对网站而言,就是用户在进入网站后所有的操作。网站用户行为分析,就是在获得网站王文量基本数据的情况下,对有关数据进行统计、分析,从中发现用户访问网站的规律,并将这些规律与产品目标及策略相结合,从中发现目前网站存在的问题,为进一步改善网站,满足用户需求,提升用户体验提供依据。


常见的用户分析内容包含以下几个方面内容:

(1)用户在网站的停留时间、跳出率、回访率、新用户、回访次数、回访相隔天数;

(2)注册用户和非注册用户,分析二者之间的浏览习惯;

(3)用户所使用的搜索引擎、关键词、关联关键词和站内关键词;

(4)用户选择什么样的入口形式(广告或者网站入口链接)更有效;

(5)用户访问网站流程,用来分析页面结构和网页覆盖数据;

(6)用户在页面上的网页热点图分部数据和网页覆盖图数据;

(7)用户在不同时间段的访问量情况等;

(8)用户对于网站的设计及字体配色的喜好程度等。


通过研究发现,80%的用户仅仅使用了软件20%的功能,而那些没用的功能不仅浪费开发时间,也使软件更加难以使用。一个成功的软件应该是简练精干的,可以单独职能化的化解决的单个问题,要以满足用户最直接要求为 i设计中心。


一、了解用户需要什么

很多网站往往为了满足不同用户的需求而增加功能,增加的功能必然需要再界面中用视觉呈现出来,这就会使网页内容越来越多,很多的功能掺杂在一起,如果不经过过滤,必然会违背原来阅读的初衷,所以每一个功能的增加都要慎重。


用户对于互联网功能需求也和对软件的功能要求一样。既喜欢简单的,也喜欢复杂的。而且用户的体验需求也会随时随地的发生变化。这里的复杂不是指很难用、流程超级复杂、容易出错的用户体验,而是指丰富的功能。


首先如何让用户体验更简单呢?当然将复杂的功能去除是最好的,如果实在无法去除某个复杂的功能,那就应该将其隐藏。因为大多数情况下,不常用的功能要比经常使用的功能占据更多的空间。


真正好的用户体验其实是给用户所需的任何功能,为用户设计一款“复杂”的产品,并将这款产品从表现上简化,让基础功能操作简化,给扩展功能保留使用入口即可。这个设计思路最具代表性的例子就是Microsoft Office和Adobe

系列产品。

              


用户的需求并不是一层不变的,短期内用户会因为某种强烈的需求要一个产品。随着市场和行业的不断发展,用户对于一个产品的评价也会随之发生变化。例如肯德基刚进入中国市场,被人们认为是一种的象征,小朋友以吃一次肯德基为荣。随着经济条件的发展,人们对于肯德基的体验就完全不一样了,热量过高,不利于健康。这是一个很典型的对一个产品评价的变迁的过程。


用户的期望值会因为因素而发生变化,有的来自外部的环境,有的来自产品自身,有的来自用户成长。这些影响期望值的因素都会相辅相成的影响。有的时候不是我们的体验或者产品变了,而是用户发生了变化,所以用户体验的设计,除了要考虑产品本身以外,还要考虑用户所需要的。


二、遵循用户的习惯

用户通常会根据个人喜好做事,这就是习惯。习惯没有好坏之分,关键要看根本的是什么。从用户体验的角度来说,任何产品都可以分两种:遵循现有用户习惯的产品和颠覆用户习惯的产品。


在设计网站时可以在技术上创新,在业务模式上改变,也要在以下几点上遵循用户的习惯。


1、用户的生活背景及文化背景

生活和文化背景是必须要遵循的习惯。想去颠覆或是磨灭一个群体甚至是民族的习惯,基本上会付出惨重的代价。例如使用红色表现喜庆,白色表现悲伤,是中华民族几千年的一种传统习惯。如果想去改变这个习惯,使用其他颜色肯定起不到好效果。比如:可口可乐官网就是用红色做的主色调,而红色也与“可口可乐”品牌主色调相统一,点缀少量黄色,非常符合中国的传统文化,也更容易使中国人接受。


2、用户的生理状况与需求状况

在设计网站页面时,还要考虑到网站用户群体的基础属性,例如年龄层、身体承受力等。可以将页面中的文字和图片做放大处理,使老年人可以清楚的看到内容。比如一些老年网站,会采用大号字体,强对比色便于阅读,而且在设计的时候也不会使用过多的色彩,虽然整体视觉可能显得简陋不够丰富,但是充分的考虑了老年人人群的特点。


2、以“自我为中心”的心理

人在评定事情好坏的时候,通常喜欢以自我为中心,所以用户体验设计时,必须满足用户这种需求。使每个用户可以体会到以“自我为中心”的优越感,这样用户就会成为最忠实的客户。例如很多人沉迷于网游就是因为在现实生活中会受到各种各样的限制,而无法实现真正的以自我为中心,而在网游的世界里却可以完全实现。


二、颠覆用户的习惯


在设计网站时,设计师通常会根据网站内容把网站划分为不同的区块,然后在分别进行美化。设计师在思维定势中 自我感觉良好,一旦突破了思维定势就会有新的收获。作为用户体验的设计师来说,有下面两个方面可以颠覆。


1、改变一些有独特性的页面设计

 在设计网站时,有很多页面都具有独特性,例如注册页、登录页和搜索页。这些页面用户只会访问一次或者几次,而且这些网页本身也是在网站发展的同时逐步完善的。所以,在用户体验的设计中,这些习惯就可以颠覆的。设计师可以根据个人的喜好对这些页面进行设计、优化和修改,而不会影响用户的习惯。


2、发展中的知识和技术

在网站设计中需要结合当前的潮流趋势和的技术来表现网站,这样才能给用户带来全新的体验。页面中流畅恶化便捷的交互应用,可以给用户带来良好的体验。

尊重用户秀感可以快速让用户接受网站,同时也会由于尊重了用户的习惯而减少产品对用户的刺激,会使得用户很难成为网站的忠实用户。另一方面,如果不尊重用户习惯,用户可能很难马上接受。所以在用户体验设计时,要根据网站具体情况自我权衡。

最好的办法就是在网站核心用户体验不变的基础上,增加新功能、设计风格逐步变化、进行网站整体融合。

转自:站酷-忻芸



花了很多时间做设计分析,但对画稿子没什么帮助?

ui设计分享达人

如何产出一个对实际落地更有指导性的设计分析?本文结合实际项目中常常会遇到的一些问题,总结了前期设计分析的一些实践经验。

设计分析是作为交互设计师必备的一项基础能力,一套有效的分析思路可以帮助我们找准设计发力点,更效率的推导出合理的设计方案,它是一种思维能力,也是一种方法工具,但是在我们的实际项目中,常常会遇到这样几种场景:

  • 新手设计师或者第一次做活动的设计师,设计分析不知道要如何入手

  • 花了很多时间做分析,但感觉对实际画稿子并没有什么帮助

  • 分析过程中发散了很多很好的点,但最后大多都落不了地

这些情况常常会导致设计分析流于形式,套用了很多方法、花了很多时间、输出了很长的文档,内容看上去似乎很丰富,但落地的方案却平平无奇,甚至也会自我怀疑设计分析真的有用吗?

总结下来,会出现这些场景的原因有两点:首先是设计分析太泛,没有聚焦到核心问题;其次是时间分配不合理,没有抓到发力重点。那么结合我们目前的项目来看,怎样做一个更有用的设计分析呢?

活动中常见的项目类型

根据活动产品化设计思路,可以把我们的日常项目分为两类:迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目,例如大促主会场、我的专属会场、榜单会场、攻略等等,通常是一些已经比较固化的经典业务,或基础的功能类业务;探索型项目则是一些全新的业务方向,例如下沉会场、直播会场等等,刚处于进入期或成长初期。

undefined

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理,没有抓到发力重点,尤其是对于很多新手设计师来说,往往大部分的精力花在重复之前已经做过的内容,比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等,但是对于已经比较稳定的迭代型项目来说,这部分背景内容相对来说已经比较固化(除非有明显的变化),这就可能会导致重复分析出来的结论跟之前的差别并不大,也很难带来实际业务提升。

undefined

既然迭代型项目过往已有过经验和策略的沉淀,也经历过多轮的数据迭代,核心思路应该是先定义要解决什么问题、然后才是如何解决,这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题,没有问题的项目也可以不用再花时间做分析,效率做即可,例如像全部会场,本身的业务模式就比较简单,过往的效果也相对比较稳定,如果不考虑进行突破性的创新,通常是可以效率复用的,这种时候则不需要再去做分析,毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢?有三个常用的思路:看数据、看用户反馈、看运营策略。

第一,从数据分析中找到关键问题,例如根据618的项目数据复盘,我们发现预售会场、品牌会场的页面跳失率较高,那么双11核心可以围绕“如何降低跌失率?”“如何提升流量利益效率?”去进行分析,从而推导出更有针对性的设计策略。

undefined

第二,根据用户反馈来找到关建问题,例如过往的主会场,用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容,那么可以围绕“如何更好的进行需求匹配?”“如何提升屏效?”来思考和分析,解决实际存在的问题,才更有可能提升体验和数据。

undefined

第三,结合运营策略,很多业务虽然已经相对稳定,但随着每次大促战略的变化,运营策略上也会有一些新的需求,那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场,在原会场定位不变的情况下,在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求,那么服务内容如何匹配“专属”会场的用户心智,则是这个会场可以重点解决的问题。

undefined

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后,就可以按照常用的设计方法进行方案的推导,在发散解决方案的过程中,如何判断方案的合理有效,确保最后的可落地性,是让我们设计分析有价值的关键,因此总结了两个常用的技巧。

首先要理解业务逻辑,减少无用的策略发散,很多时候我们的方案很难推动落地的原因,是没有考虑到业务的诉求,越能够深入的了解业务,才能更好的解决业务侧的顾虑,保证方案的可落地性。

其次是要跳出来从整体来看优先级,我们在进入自己的思维逻辑中时,会比较容易陷入细节,有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视,并不是因为我们的方案不够好,而是没有关注到整体优先级,因此要学会看全局,通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据,相当于需要从零开始去探索如何做,对于设计分析的能力要求会更高,那么常常容易陷入两种极端相反的误区,要不就是容易被方法论套路,设计分析过泛但得不出实际有价值的结论,要不就是完全没有头绪,属于想一步做一步的类型,分析的内容之间缺乏逻辑。

undefined

因此,探索型项目的核心思路是要先有分析框架、再做纵向深挖,就像画交互稿的过程一样,需要先定义交互框架,纵再进行交互细节的打磨,才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步,一是先想清楚要分析哪些内容,包括哪些环节是必要的,哪些是重点的,时间要怎么分配。例如当我们第一次做宠物品类活动时,需要对这个品类有深入的理解,因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容,而如果我们做的是一次大促的综合会场,其主要用户群体如果跟常规站内主流群体并无差异时,则不需要再花费大量的时间单独去分析用户画像,因此,需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

undefined

第二步是梳理清楚内容之间的逻辑关系,常见的逻辑结构有两种,一是递进式的推导(A→B→C),分析维度之间是先后关联的,通过严谨的逻辑步步推导而来,例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案;另一种逻辑结构是进行综合归纳(A+B→C),即通过几个不同的维度综合推导,例如经典的五导家分析方法,结合用户目标以及业务目标综合推导出设计目标。

undefined

在很多设计分析中,我们也会参考一些方法论,其实方法论提供的就是分析框架,在理解了这一步之后,相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

undefined

纵向深挖如何得到有价值的策略

有了分析框架后,接下来就可以进入每个模块的具体分析了,如果要得到有价值的策略,同样有两个小技巧。

首先,策略要足够具体、有差异化,尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营,这个大的方向没有错,但如果只到这一步是很难指导具体内容落地的,所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们,才能够更准确的判断是否会存什么问题。

其次,策略最好能够关联验证指标,可以参考UGD数据增长思路,在推导策略时要能预判它能带来哪些数据指标的提升,以保证设计分析的结论是有理有据的。

用户体验升级指南—规避用户“无意识错误”的防错法则

ui设计分享达人

用户在使用软件时不可避免的会进行误操作;
应如何通过设计,使得犯错变得困难,从而提升产品易用性。


大纲要点:

1.行为预判     

2.多重保险 

3.限制行为      

4.唯一性原则

5.默认项复用      

6.特征明显

7.感官反馈



1.行为预判,走在用户前面

通过固定场景,判断用户接下来的操作,或对某些操作做是否执行的处理。

①.输入银行卡号,软件在你输入完成时自动识别发卡行,避免手动选择错银行导致转款失败。 


②支付宝转账,在聊天窗口输入纯数字,系统会自动弹出“给对方转账xx元”的悬浮条提示,点击悬浮条即可进行转账操作。对用户误把转账发送成信息的行为进行预判,提升产品易用性。 



2.多重保险 ,二次确认执行。

生活中很容易产生对文件进行误删或提交的误操作,多重保险是对不可逆的操作进行双重确认后再实施执行。

如ios信息删除页面,删除信息需进行以下三个操作:

①左滑调出删除按钮(把“隐性”特征转化为“显性”特征)

②点击删除,“确认删除”弹窗弹出

③确认删除,多重”确认“降低误操作 



3.限制行为,使错误无法发生。


在固定字符的表单中。对其输入的内容自动格式化,

如支付宝注册页面,只提供数字键盘且只能输入11位数,从而限制用户行为。

直接从源头杜绝误触其他字符或多输入的误操作。

当你开始输入时,系统会自动将手机号隔成XXX XXXX XXXX的格式,方便用户以最快的速度核对已输入的手机号,毕竟相对于一长串的数字,被分成小块的数字组合更容易被记住和看懂。



4.唯一性原则,一个页面干一件事

按照顺序分步进行,避免用户在一个页面完成多个任务。

如接收验证码时,保持页面的功能性是唯一的,手机号注册页只能填写手机号,验证码页面只能填写验证码。利用页面的唯一性减少误操作率。



5.默认项复用,优先预知用户所想

同一件事做两次出错的几率肯定比做一次要大得多,对用户已录入过的信息储存,以便如需再次录入时的直接填充。

如寄快递购物时的填写地址,定机酒时输入人物信息,直接复用历史信息,省时又不会出错。 



6.特征明显,对比突出可适当夸大

视觉效果上,夸大功能性特征,能够有效地使用户准确获知该区域可实现的功能,向用户呈现清晰的行为结果。


①如删除弹窗,按钮中文字的描述应决定用户接下来的行为。

“确认删除”是用户行为,”确定“则是对该弹窗内容的时间判断,用户是不会对弹窗内容进行细看的,所以在按钮文字上就应明确用户,准确地告知按按钮所对应的行为。

②如Iphone的关机界面,app 内各个入口删除等可操作按钮



7.感官反馈,视觉外的强化辅助

解锁界面不同状态下的震感反馈,提示警告类的声音反馈,警示错误的发生。







 转自:站酷-假装不是设计师




谷歌的 10 个“Material Design”设计要点(上)

周周

编辑导读:如今,谷歌可以说是科技领域规模最大、最具有影响力的公司之一。正因为如此,它们的数字产品设计会对整个行业产生巨大的影响,成为人们竞相模仿的榜样。在该公司的UI&UX(用户界面&用户体验)设计指南中,设计师们提到了10条原则,不管是iOS还是安卓系统都同样适用。在这篇文章中,作者从这10条指南出发,加上自己的经验和相关案例,在设计方面为大家提供一些建议,希望对大家设计产品有帮助。

1. 通过图标和动画传达意思

图片来自Material

在没有其他方法的情况下,图标可以成为理想的指示工具。——《谷歌材料设计指南》

在《Design of Everyday Things》一书中,有“以人为本的设计之父”之称的唐·诺曼(Don Norman)阐述了他对图标的理解:图标就是代表动作、同时可以指示该动作以何种方式完成的元素。在数字产品中,我们很少会出现“左滑-删除”这样的文字指示,而是通过左滑的动作引出一个红色的小垃圾桶来阐明“左滑就会删除”这样的设定。

在用户和产品交互之前,插入动画效果。——《谷歌材料设计指南》

如果我们希望一款数字产品有着极简主义外观,那么我们可以借助动画来达到这一点。在上图的例子中,最开始画面中甚至不会出现垃圾桶的图标。在我们手指滑动后,也就是人机交互的动作产生之后,才会出现这一垃圾桶,同时也会强化“滑动表示删除”这样的信息。动画效果有效简化洁面、改善用户体验的功能。

2. 有动画效果的图标

图片来自Medium|制图Eddy Gann

动画可以展示图标所代表的执行动作,从而增加流畅感和愉悦感。在两个视觉效果之间插入带有动画效果的图标,可以反映这两个视觉效果之间的关联。——《谷歌材料设计指南》

在两个动作之间增加一个过渡的动画,这个效果我们应该很熟悉。最简单的例子就是“播放/暂停”按钮。在点播放后,该图标变成了暂停按钮;点下暂停按钮,该图标又变成了播放按钮。这个变化的图标展示了播放和暂停两个动作之间的关系。

这只是一个简单的案例。现在想象一段更加复杂的经验:比如将某个产品添加到购物车中,购物车图标会出现装进货物的动画效果;或者想象某一功能无法使用时图标的弹出效果。

带动画效果的图标本身并不复杂,我们可以在Adobe XD中完成:通过给图标添加预设效果,或者加入淡入、淡出的效果即可。

动画效果可以根据需要设计出简单或复杂的运动轨迹。图标虽然小,却是影响用户体验非常重要的一环,我们可以通过设计复杂的运动轨迹来强调它的重要性。——《谷歌材料设计指南》

请记住,如果界面上所有的元素和图标都在动,那么用户可能会不知所措。过度使用这一方法反而会削弱你想强调的重点。给图标添加动画应该适可而止。

3. 调色板的生成和使用

调色板生成工具|图片来自Medium

调色板生成工具(Material’s Palette Generator)可以调出任何你需要的颜色,色相,亮度,色度等都可以通过一系列算法调节出来,通过算法调出的色彩实用又美观。——《谷歌材料设计指南》

如果我们无法使用谷歌的调色板生成工具,手动调色就会变成一件非常麻烦的事。调色板生成工具最大的好处就在于它自动给你调出了同一种颜色的不同形态(如蓝色从暗到明、从深到浅的形态),你就不需要再对照标准调色板一点点矫正了。不过即使没有这样的自动生成工具,你也应该仔细检查并矫正自己的调色工具。

4. 颜色

  • 在考虑如何使用颜色或颜色相关的问题时,指南中还提供了给界面选色相关的技巧和工具。——《谷歌材料设计指南》
  • 选择令人难以忘记的色彩,以增强产品的品牌风格。——《谷歌色彩设计指南》

颜色对于数字产品的重要性,就像是盐和胡椒粉对吐司的重要性一样——添加太多了,就盖过了吐司自身的风味;太少了,味道就会变得寡淡。在选择配色以求增加品牌视觉效果时,一定要仔细考虑清楚给哪里添加什么颜色。

通过有节制地在APP里添加颜色,你还可以突出相应的内容,如文本、图片、按钮等。你可能已经注意到了,Instagram和Twitter上面布满了色彩鲜艳的图片和图标,与之相对应,它的用户界面非常简洁,不会喧宾夺主。

色彩也可以是一种交互元素,要考虑它们在什么地方交互,希望达到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩设计指南》

当一个元素的色彩与周围环境形成对比时,用户会更理解它的重要性。我们可以给重要的元素增加“色彩权重”,这个概念是说增加色彩的饱和度,使用更加大胆、更吸引人的色彩,制造视觉冲击。

另外,我们可以将重要的信息加粗显示,让它在第一时间进入用户的眼睛。简单来说,如果一种信息比另一种信息更重要,那么前者就要在色彩和篇幅上胜过后者,好让用户直观地进行区分。

5. 文字类型生成工具

文字类型生成工具|图片来自Medium

Google Fonts是谷歌研发的一款文字类型生成工具,可以使用它来调节字体、大小等。您可以根据需要调整和优化产品的文字设计。——《谷歌材料设计指南》

字体设计是一门艺术,它不仅关乎选择某一种具体的字体,更设计如何使用、粗细调节、比例调节等,目的是增加界面的可读性,从而增强产品的实用性。谷歌研发的这款文字类型生成工具为设计师提供了多样的选择和排版支持。通过这一款文字类型生成工具,可以节省时间,迅速生成段落、标题、正文、按钮等。


文章来源:人人都是产品经理           作者:Danny Sapio.    译者:Michiko


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

拼多多抢走了我妈,从淘宝手里

周周

编辑导读:对于老一辈人来说,他们没有赶上互联网兴起的时候,等到想要主动“触网”时,才发现很多操作根本搞不清楚。尽管产品设计师已经极可能考虑到了老人群体的用户体验,但在实际操作中,老人家还是一头雾水。这时,操作越是简单的产品,越能够赢得他们的喜爱。本文作者从自身经验出发,对这类现象进行分析,与你分享。

上周某天吃完晚饭,我妈递过她的华为手机怯怯地问我:你有空吗?我想叫你帮我跟那个商家说换一个快递,我们家这边的百世快递的站撤了,叫他们不要用这个快递。

我脑海中闪过一个念头:嗯?最近我没有帮她付款啊。但随即也是接过她的手机打开了淘宝。我妈立刻阻止我:不是淘宝,是拼多多。随即自己打开了她微信里的拼多多小程序,演示给我她找不到商家客服。我跟她说,这个功能要用APP才行,于是帮她下载了拼多多APP并很快解决了问题。

弄完之后,我们又展开了这样的对话:

我妈:哎呀,这个拼多多真是太好了,物美价廉,超方便!你怎么不早教我用!

我:我自己都不怎么用拼多多啊!

我妈:这个是我的舞友上周教我的!我打开一看,哇,好多有用的东西,又便宜!第一天我就买了几百块的!

我:但是拼多多很多假货啊!

我妈:我又不像你们追求什么名牌!有什么假货可言?一条裙子30块!

我:……

我妈:而且!以前我在淘宝总要你帮我付款,现在我用拼多多自己用微信就可以支付了。

我:我早就叫你开个支付宝账号,你自己又不开!

我妈:那么麻烦,我不会,你又不教我!而且又要绑定银行卡,万一哪天我的钱被人家骗走,那些什么黑客……

我:哪有黑客黑你,你又不是马云……

我妈:还有,拼多多退货很方便!以前我在淘宝的时候,退货要你帮我搞,还要在家等快递上门,很不自由,现在我自己去菜鸟驿站退就得了。

我:好吧。

我妈:以后我就用拼多多,我那些舞友都在用!

我:你开心就好。

我回头想了想,这是一个以用户定位和产品特征为优势抢夺用户的典型场景。

首先看看以我妈为原型的粗略用户画像:

  • 年龄特征:60岁左右
  • 工作与生活特征:退休在家,时间较多
  • 消费能力:退休金4000元左右
  • 家庭情况:已有孙辈
  • 人际关系:以广场舞舞友、同学、工友、插友为主的人际关系圈,集聚在微信上
  • 消费态度:不追求牌子,追求低价
  • 网购习惯:淘宝的老用户,但没有支付宝账号;网购品类主要为衣物及家居用品
  • 触媒习惯:微信(微信群、朋友圈)、今日头条

为什么我说拼多多是从用户定位和产品特征这两个维度抢夺走了我妈这样的淘宝用户的呢?

首先,我用的是“抢夺”这个词。

我并没有用挤占、分流这样的词。因为,在跟我妈的交谈里,我已经感受到她心里估计“从此淘宝一生黑”了。也确实,一个月以来我妈没有再叫我在淘宝付款过。所以,我想我妈大概率未来不会再用淘宝了,也就是说,淘宝直接流失掉了我妈这个用户。

其次,来看看用户定位。

根据上面我列出的以我妈为原型的用户,多吗?我简单查了一下。

根据国家统计局官网上发布的《中华人民共和国2019年国民经济和社会发展统计公报》,60周岁以上的人口约有2.5亿人,60-65周岁的人口约有83250000人,分别占人口总数的18.1%和6%;根据中国互联网信息中心官网发布的《第46次<中国互联网络发展状况统计报告>》,截止2020年6月,我国手机网民用户规模达9.4亿。

那么,根据这个比例可以推算,这样的用户大约在5千万—1亿的规模。

这么大的一个用户群体,实际上是淘宝自己放弃掉的。自从前几年淘宝打假货的行动和品牌化(力推天猫)的战略执行以来,实际上大量的县城以下、60岁以上的用户都被淘宝放弃掉了。

以我妈为原型的这批用户,他们大多数没有支付宝账号,但在微信上有钱,但除了平时发发红包,菜市场便利店买点东西,基本上还是没有用出去。于是,这批用户沉淀在微信钱包里的海量的钱,很难直接转化到淘宝上。

另外一个关键的地方在于,他们对淘宝是有怨言的,但在拼多多出来之前,没有替代物。某种程度上来说,对用户而言,忠诚度是很虚无的。真正对品牌有感情而产生“忠诚”的用户极少极少,品牌还是得需要不断优化产品,满足用户的需求。

品牌也好,产品也好,本质上是为用户提供价值,而不是要跟用户“谈恋爱”。

这是很多品牌的一个误区。没有在自身的产品上下功夫,去了解用户瞬息万变的需求,而去打“情怀”,讲“文化”。所以,我们可以看到当某些品牌醉心于自己的“情怀和文化”之时,其竞争对手在了解用户需求和优化产品而推出竞品后,瞬间打垮行业老大哥的案例。

最后来讲讲产品特征。

我妈使用淘宝的流程是怎么样的呢?

挑选商品——下订单——点击“找人付款”——发送需支付的订单到我的淘宝账号——退出淘宝——打开微信——告诉我发了一个订单——发红包给我——我看到微信或淘宝信息——点击需支付的订单——支付——退出淘宝——打开微信收红包。

而她使用拼多多呢?

挑选商品——下订单——支付。

当我列出这两个产品使用流程之后,我猜如果你是我妈,你也会用拼多多了。

在我妈跟我的对话里,还突出强调了“退货难”这个点。实际上是淘宝的物流服务不好吗?并不是。我一直觉得淘宝的物流虽然不如京东,但并不差,而且也不断在优化升级。但为什么我妈还是觉得不好呢?这一点不能单纯地从物流本身来看,而得回到淘宝的产品来看。

在淘宝上,推出了一个功能,叫“找人付款”。当时我觉得这个功能很好,解决了我帮我妈买单时,她要跳出淘宝从微信给我发链接的麻烦。但最终却带来了一个重要的弊端:当要退换货时,我这边无法执行,她那边又不知道如何操作。

而当我从PC端登上我妈的淘宝账号之后,PC端的退换货服务非常麻烦和繁琐,让我都研究了差不多一个小时才解决。而最后,我妈那边又无法支付退货费用,我在PC端也支付不了,也不能“找人付款”。总之,整个过程极其麻烦。虽然淘宝也意识到了产品上的缺陷,但目前的情况而言,这样的产品还是对于我妈这样的用户非常不友好。

而拼多多呢?它基于微信这个社交生态圈。加上没有什么太多余的功能,我妈很快就能上手了,自己操作还是比别人代操作方便多了。

谈到这里,我还意识到一个重要的问题。

从产品对人际关系的影响而言,淘宝是负向的,而拼多多是正向的。从某种程度上而言,60岁以上的这代人,是被互联网抛弃了,所以当他们想搭上这波潮流时,不得不面对自己的儿女,需要向他们请教,怎么用怎么学。这一点首先就会让不少子女心烦,不少父母自卑。

再进一步,如果每次父母网购都得“捆绑”上子女时,对人际关系是正向的吗?而在拼多多上购物时,他们不仅可以大大优化自己的产品使用流程,还能跟自己的老朋友们一起拼单,互惠互利,这对人际关系的影响有很大的正向作用。

你有什么被别的产品抢走的故事吗?

一点个人小想法,想到哪写到哪。

如果你有不同的意见和想法,欢迎评论或留言。


文章来源:人人都是产品经理           作者:@源记物语


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

Apple 的设计哲学:网页篇

周周


Apple 致力于让每件产品都赏心悦目,与其说官网是产品展示平台,倒不如说它是苹果产品分支的延续。从 Apple.com 找设计灵感是每一位设计师都做过的事,那它到底有何魅力?文章对Apple的网页设计展开了梳理分析,与大家分享。


一、沉浸与交互式体验

每当有新产品发布时,我们都会被它的 Landing page 所吸引。不管是 AirPods Pro 也好,和前段时间发布的 iPad Pro 也一样。

这背后是 Apple 基于 webGL 技术,创造的一种沉浸与交互式产品体验。

1. 连续性

我们在产品介绍页可以看到,苹果使用了大量的滚动 scroll 来体现连续性。

一方面,滚动作为大多数 Web 用户最自然的操作,学习成本极低。

另一方面,在冗长的页面下,滚动能让产品特性保持更自然的转场衔接。

iPad Pro 的连续性

2. 趣味性

另外,采用了大量的动画式转换(animated transition),即操作时展示的动态效果,以此来增加趣味性。

伴随着丰富的、若隐显现的章节文案,就像电影的旁白一样,娓娓道来。

通过滚动的方式增加交互性,这是明智之举。试想一下,如果只放置已渲染的演示视频,那么用户的操作会受到限制,只能在视频中前进或后退,毫无乐趣可言。

AirPods的趣味性

二、言之有序

1. 秩序感

说到言之有序,我们看 iPad 的页面介绍。四款产品,分别是:iPad Pro、iPad Air、iPad、iPad mini。

拍摄角度的秩序感,可谓妙不可言。

iPad的秩序感

  • iPad Pro 的拍摄角度接近于正侧面。
  • iPad Air 是四分之三侧面。
  • iPad 是正面。
  • iPad mini 是俯视。

如此一来,即显得有序,也不会导致视觉疲劳。

2. 设计语言

其次,官网与 iOS 保持协同的设计语言,给用户呈现了一致的感官体验。

从 iOS 11 开始,苹果就采用了 Large Title 大标题的字体风格。字重也从 Regular + Light 的组合,转向的 Medium + Bold ,以此增强信息传播中的识别力。

HomePod

另外,高斯模糊的标题栏背景、产品的投影等设计语言也保持系统一贯的风格。我们可以很清晰的看到 Web 设计的同步转变。

三、层次

1. 视差

第三是视差带来的层次感。

苹果奉行包豪斯的无装饰和极简的理念。当然,它不是那种附庸的美观及外表的光鲜,而是将复杂难懂的技术以简洁的形式传达给用户。

Mac Pro 视差滚动

在信息层次方面,Apple 的编排设计由浅入深,犹如抽丝剥茧。很好的利用了视差滚动,传达图片与文字之间「层」的概念。这种深度感可以增加用户的理解和乐趣。

2. 视觉张力

不仅如此,样式上富有视觉张力。或扩张、或收缩、或吸引、或排斥之感觉,呈现刺激与震撼。举两个例子:

A13芯片的扩张力

扩张力:整个画面以 A13芯片 为视觉中心点,元素和布局围绕这个视觉中心点向外扩张。采用发散式的视觉引导,视觉张力就出现了,让人感觉巍峨壮观。

Pro级摄像头的排斥力

排斥力:通过元素的大小对比,可以形成一定强度的视觉排斥力。Pro级摄像头 辅以大特写,传达空间意识。视觉上被其构图、美感触动。

四、高级感

再聊聊苹果的高级感是怎么来的?

1. 视觉降噪

我们都知道,高饱和度的色彩,会影响人的情绪波动。相反,低饱和度的配色,对人眼的刺激较弱,会有一种冷静且克制的高级感。

iMac Pro 高级感

回过头来看苹果官网的大部分页面,除了产品界面色彩 和 按钮蓝 之外,其他的文字、背景、控件一律采用黑白灰色系,以此营造高级感。

甚至是 iPhone 11 Pro 新出的暗夜绿,也是高级灰中加了一点点绿而已。

换言之,减少使用颜色的数量,降低色彩的饱和度都能削减色彩对人的情绪,起到提升产品高级感的效果。

iPad 留白

除此之外,恰当的留白可以更加突出产品内容,让重要的信息更准确的传达。并且能营造出广阔的空间感,让画面得到延伸,呈现一种意境美。

所以我们做设计时应当多做减法,避免无意义的视觉元素堆砌,反而能让你的设计更有高级的气质。

这又印证了现代主义建筑大师密斯·凡德罗的那句话:Less Is More

2. 配图

当然,只有留白是不够的。既然是做宣传,那么一份高分辨率、精致的配图就显得尤为重要。

苹果官网大部分的产品都是采用实拍+后期修图,而非渲染图。目的就是为了反映真实产品的质感、以及材质光影效果,这一点能看到苹果对于品质的追求。

Designed by Apple in California

不仅如此,苹果产品圣经《Designed by Apple in California》,以及壁纸同样是由摄影师拍摄完成。有兴趣的同学可以看下面这个幕后制作视频,相当硬核。

3. 苹果式文案

做过英文 Web 的设计师都知道,英文往往比中文更好设计,相同的布局英文出来的效果也更好看。

这不是崇洋媚外,心理学有个词叫做「母语羞涩」。简单来说就是,中文对于我们来说,太常见了会让人产生一种廉价感(实际上是羞涩感)的心理感受。

老外也一样,你可以看到美国企业:苹果、麦当劳、星巴克都是使用图形 Logo,而日本企业不用母语,而是用英文,比如 SONY、TOYOTA、Canon。

你的下一台电脑,何必是电脑。

回到苹果官网,我们看到一部分文案是英文产品名称,这个不会感觉羞涩。

那中文部分怎么办呢?比较有意思的是,Apple 的本土化团队用了完全不对仗但押韵、奇怪的排比、双关、重复等修辞手法。虽然语感很差,但基本上能明白字面意思。

其实这样做的目的就是为了创造一种陌生感、一种独特的语言风格,来凸品牌气质。举几个例子:

  • 重复:比如说 iPad Pro「你的下一台电脑,何必是电脑。」
  • 双关:比如说 AppleWatch 的「它会时时关心你的心。」
  • 排比:比如说 iMac的「从极速,到神速,任你提速。」
  • 押韵:比如说 配件 的「可重复充电,又可圈可点。」
  • 对比:比如说 iPad mini 的「身量小,能量大。」

4. 仪式感

最后一点。生活要有仪式感,苹果官网也有仪式感。

国际妇女节专题

在一些特殊的日子里,例如三八节当天,友商选择打广告促销。而苹果推出了国际妇女节专题,致敬女性的伟大,这一做法颇具人文情怀。

不过话又说回来,感动归感动,还是参与友商的打折活动香。

#相关阅读#

Apple 的设计哲学:交互篇

Apple 的设计哲学:UI 篇

Apple 的设计哲学:声音篇


文章来源:人人都是产品经理           作者:阿洋


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

如何建立招聘平台的用户标签体系?

资深UI设计者

目前基于用户画像的标签体系在各行各业开始得到应用,对于涉及范围广,专业知识深的互联网招聘领域来说,建立标签体系的难点是什么呢?应该如何建立标签体系?怎么验证标签体系的准确性?文章对这三个问题展开了分析探讨,与大家分享。

一、招聘领域建立标签体系的难点

电商行业客观来说属于比较简单的toC领域,知识网络是比较容易理解的通用知识,可通过用户的购买习惯、偏好、商品品类等建立标签体系。医疗行业属于专业性强的领域,建立标签体系必须要懂医疗技术的专家团队才可以,但是易于操作的是,只需要医疗一个领域专家就可以完成专业的标签体系建设。

但对于招聘行业来说,行业、职位涉及范围广,且专业性强,因为各行各业的公司和求职者都会通过招聘平台建立联系,而且有很多高精专的职位和候选人,怎么评估B/C端之间专业技能、工种、行业之间的匹配度,确是一大难点,而且理论上来说需要集齐各个行业、各种职位的专家人员才能建立起招聘行业的标签体系,但这在现实中要怎么操作呢?

那么机器是否可以自动完成招聘领域的标签体系建设呢?用NLP抽取职位JD中的描述并将其聚类,比如抽取Java、spring、Unix、Visio、Excel等工具技能,原型设计、交互设计、需求分析等工作内容技能,用户运营、产品运营、数据运营等工作方向技能,这是互联网从业者最熟悉的开发、产品、运营的工作内容和技能,如果机器可以识别这些类别标签就很完美了。

但现实却是看似的完美与和谐,万一Java是出现在了招聘专员的职位描述中呢?用户写的是“负责招聘Java工程师”,假如Visio出现在Java工程师的描述中呢?假如Excel出现在运营专员的职位描述中呢?这些技能还是不是这个岗位的核心能力?

首先,Java出现在招聘专员出其实是可以用硬规则过滤掉的,比如限制职位和技能的关系,也就是说不是所有技能都满足所有职位,有的技能只适用于某些职位,在其他职位内就是无效信息。

其次,需求分析是不是产品经理的技能标签呢?有的人说肯定是了,这个回答可以说对也可以说不对,对是因为需求分析确实是产品的必备能力和工作内容,不对是因为所有的产品经理都需要需求分析,那这个能力还是该产品经理区别于其他产品经理的能力吗?

最后Excel会出现在运营专员内、也会出现在招聘专员内,也会出现在统计专员内,那么它还是个核心的技能标签吗?

通过以上分析可得到以下归纳性的总结:

  1. 不是所有技能都适用于所有的职位,应该定义每个职位的核心技能标签体系,因为非核心的技能有时候不仅无效还会起到反作用;
  2. 不是所有该职位需要的技能或者做的工作内容都是该职位的技能标签,因为它是该岗位的通用能力没有区别度,技能标签应该是该职位工种的核心技能且是可以区别不同职位或简历的。

所以通过以上分析可知,纯NLP机器识别的方式不能完成招聘领域的标签体系建设,因为机器没办法在一个岗位的众多技能中筛选出哪些是重要的知识技能,哪些是不重要的知识技能。

二、如何建立招聘领域的标签体系

1. 基于静态信息的通用标准化标签

招聘领域的标签大家首先可以想到的就是学历、工作年限、薪资范围等比较通用的职位/简历端匹配维度,当然这些显性通用的标签早已被各招聘平台做成了结构化的筛选项。

其次还有一些比较小众的维度要求,比如有的职位要求海外经历、党员、国企工作经历、籍贯、年龄等,有些平台也把其中的某些维度做成了平台上的结构化标签。

不过这些不是我们研究的重点,我们主要研究的是每个职位专业的知识方向的技能。

2. 基于静态信息的专业知识精细化标签

建立专业知识标签体系的重点就是建立专业的岗位研究专家团队,想要做某个岗位的专业知识标签研究,肯定需要熟悉该岗位的人员,是选择从事该岗位工作的人员呢,还是对这类岗位有所了解的HR人员呢?

因此就这两类人员进行了调研与分析,最终发现从事该岗位的人虽然对所从事的岗位了解比较深入,但对其他相关的岗位未必了解,也不太了解招聘过程中用户的感知与思维;

HR人员虽然在专业深度上对岗位的了解不是很深入,但所了解的岗位范围广,只要从事过某个行业的HR工作,基本都熟悉该行业所有的岗位与关注的重点技能,且HR经常使用招聘平台,有用户感知,对用户行为与逻辑都非常了解,所以HR更适合做岗位专业知识研究,而且该专家团队最好是来自各个不同行业的HR人员。

团队建好了,大概的研究思路也有了,接下来就可以好好研究标签体系具体的生产流程与规则了,对此进行了如下图的总结:

体系建立的目的肯定是运用在算法的推荐与搜索中,初期可以通过离线的漏斗数据转化对比(命中标签与未命中标签的转化对比)来验证该标签体系的离线匹配效果,再者可通过灰度实验,小流量上线实验来验证实际线上的匹配效果。

专业知识标签关注的只是匹配度的准,最终线上使用肯定还要考虑用户是否活跃,B端HR是否着急要人,C端求职者是否在找工作,如何平衡专业知识的准与用户行为的活之间的权重也一大难点,要找到那个准与活平衡的比例区间,在这个区间内线上能实现最大的用户达成,这方面在此不多做分析,需要算法同学多次调整模型才能达成。

3. 基于动态信息的用户行为标签

基于用户行为的用户画像标签体系在电商领域中运用广泛,在招聘领域此类标签体系同样适用,只不过电商领域中的“查看-联系卖家-购买”行为在招聘领域变成了“查看-开聊-达成约面”行为。

电商平台中的协同过滤理论在招聘平台也同样适用,只是变成了基于相似职位的过滤和基于相似候选人的过滤。有的企业以往达成的多数是名校候选人,那么我们就知道该企业偏好有名校教育经历的;有的企业招聘销售岗更倾向于在专业知识体系中的有软件销售经验的候选人,那么我们就知道该企业偏好软件行业的销售候选人。

通过用户画像体系我们可以评估用户的偏好,以期在该用户以后的推荐中使用其偏好,达到更好的效果。

三、招聘领域静动态标签体系的综合运用

静态通用标签是所有职类共用的标签特征,属于大批量标准化的生产与运营,通用标签生产完善了,可以实现粗矿式大步快跑节奏的匹配达成;

而专业知识标签是每类职位专业的标签特征,是小批量精细化的生产与运营,在前面大步快跑达到一定匹配度之后,再结合精细化的小步快跑方式,逐步将每个职类的颗粒度划分为更精细化的颗粒度,达到更高匹配程度;

在前面标准化、精细化两轮分类之后数据已经被分成了一个个小类,但却没有衡量单个用户偏好的特征标签,而动态的用户行为标签就是单个用户个性化的偏好特征标签,用户的偏好有可能是通用的学历、年限特征,也可能是专业知识中某个技术框架、某种产品品类特征。

最终,静态标准化通用标签、专业知识精细化标签、动态行为个性化偏好标签,三者相互作用、相辅相成,提升招聘领域线上效果的匹配准确度。

文章来源:人人都是产品经理    作者:艳杰


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


日历

链接

个人资料

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

存档