首页

烦人的“小妖精”:浅谈小红点的设计

雪涛

导语

随着各类App的业务功能不断丰富,小红点已经成为互联网从业者们最常使用的运营工具之一,每当有新的运营内容或新功能上线,大家的做法往往是“在那放个红点就行了”。然而简单粗暴的形式以及不加节制的投放,让小红点变成了人人厌烦的“小妖精”。本文从设计的角度出发浅谈小红点的一些设计细节,期望引起大家对小红点的关注,在这里抛砖引玉,也期待感兴趣的小伙伴一起探讨。

烦人的小红点

人类似乎天生对不对称,不和谐的事物有厌烦心理,并且想要去纠正这些“错误”,简而言之就是大家平时所说的“强迫症”。而小红点则完美利用了这一人性的弱点,它就像白嫩脸颊上长出的一颗小痘痘,让人忍住不去要去挤破它。因此,小红点也成为了一把产品运营利器,只要投放在某个业务入口,就几乎没有用户会对它熟视无睹,而当用户忍不住要去轻触消除它时,产品侧为业务导流的目的也就达到了。

那么问题来了,用户喜欢小红点吗?在Google和必应上搜索关键词“App 小红点”,几乎有一半的搜索结果是“教你如何消除小红点”。

暑期干货!2017年8月前端开发者超实用干货大合集

雪涛

在过去的几年当中,网络上所流传的各种设计和开发资源,在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具,但是其中绝大多数由于其应用范畴的局限,或者传播不够广,导致它们大多并广为人知。将这些素材集中到一起,很大程度上是希望它们的目标用户能够明白,需要这些工具的时候,上哪儿找。

这次的前端干货合集内容也很齐全,仔细看看,总能找到几款你所需要的。

MuzzleApp

设计表单的时候,为什么悬浮式标签体验更好?

雪涛

表单设计中,各种设计模式和技巧已经越来越成熟了。在诸多设计技巧当中,悬浮标签这一设计手法,应该是对于用户体验提升最明显的一种。早在2013年8月的时候,我第一次考虑在自己设计的表单中运用悬浮标签,这个想法很简单,在占位符文本中,借助动画加入一个图标显示,确保用户不会在填写过程中迷失。

为什么你做的设计总是不耐看?

雪涛

不知道大家有没有这样的情况发生,自己设计的作品,“乍一看不怎么样,仔细一看,还不如乍一看”!

其实不耐看,或者不敢放大看的原因都是细节做的不到位。

最近在做手机OS的主题图标,对细节的感触很大,今天结合主题图标来和大家聊聊,我们可以从哪些方面注意自己的设计细节,大纲如下:

  • 给造型加点细节
  • 多加点质感的细节
  • 不要让图标看着灰灰的
  • 风格特点的运用

1. 给造型加点细节

造型是所有设计执行的第一步,造型做不好,说别的都没用。

那如何能给造型加点细节呢?

打个比方,我们要画一个圆角矩形:

遇到特殊的设计问题时,有一条原则帮了我

雪涛

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

很多设计中,我们付出20%的精力就可以应付80%的 Normal Case,而剩下20%的 Special Case 却会花费我们80%的精力。换言之,普通情况谁都会处理,而为了应对一些少数派,我们将要付出更多。

Loading 失败时的错误提醒、搜索无少结果时的空白页面、打了车却没车接单……除了这正常流程下的失败反馈以外,最耗时间的是那些特殊流程或所有情况同时在一个页面堆砌出现的情况。

在设计前期,我们就应该尽可能地罗列特殊情况,即便它们出现的概率很低,也应留足设计时间。而应对非常规 Case 时,有一条原则帮了我很多次:

确保多数人体验的前提下,才去解决少数人的问题。

这不是说要为了多数人放弃少数人,还是造例子来说吧。

案例一:重复利用的物流单号

如果你在天猫有过退货经验就会知道,申请退货并得到商家确认后,需要填写退货的物流单号,当商家收货后才会把钱退给你。这里有个奇妙的问题,设计上是否允许多个用户填写同一个退货单号?

先来看看如果允许,会出现什么非常规情况:消费者AB两人各自在同一个商家C处购买了两台 iPhone,并且商量好分别发起七天无理由退货流程,商家C均同意。然后,消费者A先将手机按要求寄出,获取物流单号一个后填写到退货系统;同时,消费者B直接使用消费者A的退货单号填入系统,但不寄送自己的手机。

极端情况体现在,许多商家的店铺与仓储是分开的,当仓库收到A寄来的手机并确认收货后,店铺工作人员收到系统通知两个退货流程都已收货(其实是同一个单号),若不进行额外确认,就会把钱都退回去了。

再来看不允许重复填写同一个物流单号的情况:很简单,AB两个消费者是好人,但希望节省快递费,就商量好把两个手机放在一个包裹里寄回。此时若规则只允许一个单号只能填写一次,这种做法就无法实现。

错误的设计方法是这样的:用户填写退货单号时,新增一个流程询问用户该单号是否只关联了一个订单,订单号是多少;或者在原有基础上新增一个联合退货的功能,让多个用户合伙拼单退货。

正确的设计方法是这样的:消费者端流程全部不变,允许重复填写物流单号,但必须在后台记录一条单号被使用的次数。对于被多次填写的单号,在商家端告知商家须额外注意,一定与仓库确认好包裹内物品再进行退款操作。

错误方法的错误原因很简单,我们不能为了一些极端情况就去修改主流程,也不能为了少数人的需求就影响所有正常用户。

案例二:互相冲突的 Toast 提醒

天猫客户端的商品详情页中,当点击“收藏”按钮会有一个 Toast 告诉用户“收藏成功”,同样当点击“加入购物车”后,也会有 Toast 告诉用户“加入成功”。这样看好像没什么问题,但若用户点完“收藏”后马上点击“加入购物车”,就会出现两个 Toast 相互冲突的情况——视觉上互相重叠,或后一个 Toast 无法出现。再极端一点,如果出现了一个脑残用户,为了测试反复快速点击两个按钮,甚至会导致代码错误。

为了追求设计和代码逻辑的严密,我和开发同学花费了不少时间讨论对于这种极端情况,要如何设置 Toast 的出现和冲突机制。甚至为了应对极端情况,还需要调整 Toast 出现消失的动画过程与逻辑。但最后,我只设置了2个 Toast 在极短时间内前后触发的交互,也就是新的 Toast 慢慢把旧的推上去,并各自做淡入淡出动画——毕竟两次短促的操作是比较可能会发生的。

什么?你问我那个脑残用户怎么办?不好意思,为了满足所有正常用户的诉求,脑残用户的体验就只好先放一放了……

案例三:神出鬼没的 Loading

我们在客户端上做了一个比较酷的动画,对一个模块长按后可以弹出一张卡片,并在卡片中阅读一些详情(有点像 3D Touch)。问题在于,弹出卡片中的信息是触发卡片后才向服务器请求数据并加载的,正常情况下没有问题,但是弱网条件下,数据加载可能会花费不少时间。为此,第一版我们为这个数据请求设计了一个 Loading 的小动画(好吧,你就当是转菊花)。

这样做的结果是,对于网络非常流畅的用户,他们唤起这张卡片时,会看到一个菊花飞快地闪过,然后才看到数据加载——再流畅的网络下,数据也需要加载时间,哪怕是1ms,都会让菊花快速闪烁。

当然,不要 Loading 也明显不合理。弱网条件下,必须避免用户盯着空白的卡片发呆而不知道系统正在干什么。

所以,合理的做法是,为 Loading 动画的出现时间设置一个延迟:在卡片弹出的200ms内(卡片不可能突然闪烁出现在用户面前,必须有一个进场过程),如果数据加载完毕,则不显示 Loading 动画,直接显示数据。如果卡片进场完毕(200ms后)数据还没回来,则开始显示 Loading 动画。

这样,我们保证了正常用户的正常体验,避免他们每一次操作都为弱网这一极端情况买单。同时,也保障了弱网用户的体验。

最后,再总结一下我们的设计原则确保多数人体验的前提下,才去解决少数人的问题。

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


这7个关键点,是每个产品用户体验设计的重中之重

雪涛

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

即使你远离设计领域,对于用户体验这一词也不会陌生。用户和产品之间进行交互过程中,产生的一般态度和情感反馈就是我们常说的用户体验。在用户体验设计中,有几个关键性的因素的是设计师所关注的,比如可用性(usability)、工具性(utility)、合意性(desirability)、吸引度(attractiveness)等。如今,用户体验设计和视觉设计几乎达到了同等重要的程度。虽然仍有一些企业和团队在怀疑用户体验设计是否有必要,但是总体上,大家对于它的认可度还是非常高的。

用户体验设计为何重要?

许多公司为了让产品产品的体验和效率更高,而花费更多的时间和金钱。现代商业竞争背景下,事实已经证明,产品和服务的成功很大程度上是取决于用户对于产品的喜爱程度。UX设计旨在通过让产品更易于使用而提高用户的满意度。

有些人可能还认为用户体验设计的核心是视觉设计,其实它的范畴远不止于此。UX设计是一个复杂的过程,涵盖了用户研究,线框图、原型、视觉稿、动画、开发、测试等许多不同的环节和阶段,其中许多环节甚至是并发和交叉的。真正有效的用户体验需要时间来开发,也需要足够的知识来作为支撑,这种复杂的开发体系使得它或多或少地需要超出预期的额外投资。然而,UX设计对于初创和非初创公司而言,同样有益,它确确实实从不同的方面帮助企业创造成功的产品,无论是参与度、可用性还是转化率。

如果你拥有一个复杂的电商网站系统,那么用户体验一定是影响它实际效用的重要因素。内容组织是否系统,导航是否清晰,都会影响到产品的销售,用户的黏度。太复杂、不便捷的产品会让用户流失,这是肯定的。

有数据表明,近年来95%的移动端APP 在上线一个月内就宣告失败而退出。这很大程度上是因为激烈竞争之下,没有足够优秀的用户体验来留住用户所造成的结果。结合现有的研究和我们自己的经验,我们在今天的文章中总结出了优秀产品的7个关键的用户体验设计要素。

1、有效的可用性设计

现如今,“简单”一词和无聊的设计并无关系,而是成功产品设计的关键性要素。在Don Norman 的《设计心理学》系列教材中指出,良好的设计通常都会具有易于发现和易于理解两个特性。用户期望他们所使用的产品是简单明了的,能够让他们不花费太多精力就可以搞定,也可以从中获得自信。而这些都是用户体验设计的工作范畴以内。

用户体验设计师的目标是为数字产品创造一致的体验,让用户能够安心使用。有效的用户体验设计能够通过网站和APP为用户循序渐进、有效地展示内容。而UX设计人员则可以通过数据分析和案例研究,消除不必要的设计、搞定问题、去除隐患,提升产品的可用性。UX设计师还能通过不同环节的引导服务来帮助用户更加快速的熟悉产品,让用户感到贴心而不会紧张。

2、驱动用户深度参与

参与度是衡量用户有效行为的度量,而它也是产品价值的重要体现之一。每个企业都希望有高素质的用户参与到产品建设当中来,而他们也知道,最终还是要通过创造优秀的用户体验来解决这一问题。

UX设计有一个热门的解决方案是游戏化设计。将游戏化的元素应用到非游戏类的使用场景中来。游戏化设计让网站和APP拥有更多有趣的元素,吸引用户,提升参与度。游戏化设计的具体方法和策略有很多,设置任务、发放奖励都是很常见的手法了。挑起用户的好奇心和激情,他们会坚持不懈地执行任务,在你的网站和APP中花费更多的时间。

3、产品的独特性

很难说市场上到底有多少APP存在,但是绝大多数的应用和网站在起步的时候,就已经失败了。当你要开始投放一个APP到市场的时候,可能已经有好几十个同类的产品已经存在了。所以,企业和开发团队一直在寻求让用户选择他们产品的原因和方法。UX设计师能够通过分析目标受众的需求和实际市场状况,来判断和预测用户对于自己产品的反应。如果你想给别人带来愉悦的体验,满足用户的需求,并且力图让自己的产品拥有足够的特性从竞争中脱颖而出,那么你的产品就具有了同其他产品区分开来的独特性。

4、省钱

UX设计的成本并不低,但是相比于修复可用性的问题,它的花费依然很低。基于用户研究,UX设计师能够准确地挑选出功能组合,并且规划用户的交互过程,排除可能存在的问题。通过对目标受众的研究和测试,分析和改进整个产品的流程与细节,而这些过程对于产品开发和运营的补充,相比于在产品上线过再根据反馈进行调整,要省钱省心得多。

5、用户忠诚度

用户的口味越来越刁钻了。令人不快的体验会让他们很快不耐烦,然后迅速和你的APP说拜拜,然后再也不会回来了。用户的忠诚度要维持起来并不容易,你需要创造足够优秀的产品,要让人喜爱、沉迷,还得足够快速地帮用户排查问题。这种局面下,用户体验设计的价值无疑是不可估量的。如果你的产品能够始终保持令人舒服愉悦的体验,用户习惯了就很难转向别家了。另外,别忘了,快乐的用户更喜欢向朋友推荐你的产品。

6、高转化率

采取设计者预期行为的用户所占总人数的百分比就是我们常说的转化率。最典型的转化率就是购买产品的用户数所占打开电商网站的用户总人数的百分比。用户体验设计师通常会掌握一系列的分析技术,来帮助产品提高转化率。通过深入分析用户行为和用户离开产品的原因,找到痛点,解决问题,从而提高转化率。

7、积极的品牌体验

品牌识别不仅仅取决于视觉形象设计,还和体验息息相关。许多用户在第一次使用产品的时候,会记住品牌给他们的感觉。这种第一次的体验对于用户和品牌本身都至关重要,如果处理不好,可能会失去不少潜在用户。良好的UX设计可以保证品牌拥有积极而良好的用户体验。提供用户喜欢的产品,可以提升品牌的认知度,因为用户不会忘记他们喜欢的东西。

结语

优秀的用户体验设计对于企业无疑是有利的。很多时候,它的价值并非是一眼可以看出来的,但是事实上,优秀的用户体验是成功产品中不可剥离的组成部分。令人信服的UX设计能够节省资金和精力,这比起投资解决低质量的产品要来得有效得多。更重要的是,现代产品一旦初次互动不利,后面想要扭转过来就很难了。

 

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

Facebook设计副总裁:谈谈设计师的职业成功之路

雪涛

Facebook 设计副总裁有个问答栏目,今天的问题是:对于设计师来说,什么才代表着成功?在这篇译文里,她分享了自己的观点。

哟哟哟!学会点线面,排版好方便!

雪涛

每个设计师多少都有一点强迫症,有时候会为一个像素的间距而纠结,有时候又会割舍不下自己做的元素,满屏的信息都想突出,导致画面混乱。设计师培养自己对画面的全局观是很重要的,所以我们的脑子里时刻都需要有一把“尺子”在,这把尺子,就是“点线面”。在使用这把“尺子”的时候,抛开那些装饰和颜色还有材质,将画面抽象成点线面来把控你的设计,也许会有不一样的启发和看到画面不和谐的原因所在。

设计师对版面的全局观,就是“点线面”的处理。“点线面”是所有视觉画面的基本结构,点线面可以把不同的部分或者元素组合成一个整体,进而打造一个视觉舒适平衡的版面。


看似一模一样的搜索框,在设计师眼里有这么多细节!

雪涛

搜索几乎是现在所有网站,APP甚至操作系统的标配,不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道,起到了一个引导用户走向的重要作用。在不同的系统,不同用途的网站上搜索呈现的方式都有所不同。

用搜索的原因

使用搜索时,用户可以自己掌握浏览该网站的路径,从哪一页进入到哪一页,自己控制如何使用这个网站。没有必要根据网站的页面设计来决定浏览页面的先后顺序。这也是为什么很多网站用户一进入就直接使用搜索功能的原因。

另一个原因是,当用户浏览网页到一半不知道接下去该干什么的时候,往往会使用搜索直接去找到自己想找的内容。

实战经验!如何做好网页后台的表单和表格设计?

雪涛

一个完整的后台,由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成,下面跟大家分享后台中的表格和表单的设计细节。

当接到一个全新的网页后台项目时,首先确定设计风格,然后考虑这个后台尺寸是做居中固定式,还是全屏响应式。全屏响应式的网页设计,除非有规定,否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然,不管选择什么尺寸,都得基于做好一个后台而开展工作。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档