首页

需求评审指南

涛涛

令很多产品新人非常头疼的会议就是需求评审,害怕在会上“怼”不过研发,也害怕被“怼”的“体无完肤”。本篇文章里,作者围绕需求评审会议的五个方面为我们全方位解读要如何才能不被“怼”,一起来看看吧。

对于产品新人而言,日常最头疼的会议就是需求评审

在做产品的这几年,笔者开过上百场需求评审会,曾经被研发在会上怼哭过一次,也遇到过研发和产品大吵半小时、最终有一方摔门而出的情况。

但这都是刚开始一段时间的惨案了,那时一想到要一个人面对近10个研发就战战兢兢瑟瑟发抖。而如今,几乎每一次的需求评审都变得相当顺利,时间和结果都能达到预期,甚至都不需要太多额外的准备。

很多产品新人担心自己怼不过研发,但事实上,「怼」这个词就把自己和研发置于了对立面。很多需求评审中的争吵和争论在会后看来是没必要的,大多都源自于信息差和沟通能力的问题。

因此,今天想和大家分享下如何做好需求评审、不再怕被怼。本文将从产品、研发和团队等多个角度来谈,以下为目录,希望大家能提前在心里有一个框架:

  • 需求评审的意义到底在哪?
  • 一次标准需求评审的阶段和流程
  • 如何很好地进行需求评审的会议管理
  • 需求评审会上,前端、后端和测试分别都关注什么?
  • 3个压箱底的需求评审技巧!

一、需求评审的意义到底在哪?

直接用一堆正确的话来告诉大家需求评审的意义,可能并不会有太深刻的体会。所以我们不妨另辟蹊径,一起来试想一下:如果一次迭代没有任何需求评审、研发完全按照产品需求文档进行开发,会有什么样的结果?

看起来貌似节约了大量的沟通时间,也避免了团队内的争论和争吵,但实际开工之后呢?

一方面,在开发过程中,研发发现出现了部分需求遗漏、有些看似一句话的需求实现起来成本反而非常高、有些需求未考虑到数据修复、数据查询量过载的风险等,这时候,经验丰富一些的研发会主动找到产品进行讨论并要求进行需求变更,而另外一些研发新人可能就埋头照做了,到真正上线后才发现实际有一大堆问题,甚至可能造成不可挽回的损失。

另一方面,产品上线之后,销售和售后部门的同事发现需求是满足了,但却一点都没法用,这时候,客户也接二连三的反馈系统怎么越改越难用了,根本没法解决他们的问题!

这样看来,省去了需求评审之后,产品经理的工作虽然「单纯」了很多,但却很难兼顾全局,也无形中将所有的风险和压力担在了自己一个人身上,浪费了团队的智慧和经验。

因此,一场好的需求评审能够帮助我们很好地管理需求方(业务/销售/售后部门)的预期,同时也能通过一次次评审和纠偏,帮助整个产研团队就需求场景和优先级达成一致,及早进行风险评估及查缺补漏,有效提升团队开发效率和产品可用性。

那么,接下来我们就来看看一次完整的需求评审是怎样的?

需求评审的本质分为2个维度:其内容是用于需求评审,其性质则是有组织的连续性会议。因此我们把需求评审拆解为:需求评审+会,即需求评审流程和会议管理2个方面来讲。

二、需求评审流程

不同公司不同业务不同客户的需求评审流程都有所不同,有些只有1次,有些要开3、4次。但是,无论开几次,其本质都是在主要和2类人开会:需求方和研发

B端产品经理的需求方一般是老板、甲方爸爸、业务部门、销售部门和售后部门等,无论你们公司具体业务如何,需求评审的第一步都是要和需求方确定5W1H中的为什么做(why)、什么时候做(when)以及大致做什么(what)。

第二步则是先和研发部门同步前面讨论好的why、when和what,再和大家一起讨论具体做什么(what)、谁来做(who)和怎么做(how)。

那么,下面提供一个较为通用的标准评审模板,分为范围评审、低保真评审和方案评审3次。

1. 范围评审

  • 评审目标:明确需求范围,难点在于明确不做什么
  • 文档准备:内容需要包含需求场景、需求清单、客户调研报告、竞品调研报告等
  • 参会人员:产品、需求方(业务、销售、售后、老板等)
  • 评审产出:达成一致的需求范围清单

(Axure页面列表)

(通过用例图描述需求场景)

2. 低保真评审

  • 评审目标:初步明确大致的样式交互及业务逻辑方案,难点在于做好需求和成本间的衡量
  • 文档准备:低保真稿(包含核心业务逻辑说明及核心页面交互)
  • 参会人员:产品、需求方、研发(前端、后端)、UI/UE
  • 评审产出:就核心业务逻辑及核心页面交互达成一致

3. 方案评审(或称高保真评审)

  • 评审目标:关注粒度更细的方案细节,难点在于逻辑覆盖的全面程度
  • 文档准备:高保真稿(包含全部业务逻辑说明和页面样式交互说明),是可以直接开始研发的终稿
  • 参会人员:产品、研发(前端、测试)、UI/UE
  • 评审产出:理想状态下,就全部业务逻辑和页面交互达成一致

以上就是较为常见的3次需求评审流程。但是需求评审只是一个里程碑,产品经理大部分的时间都花在每两次会议之间的文档准备中,要不是在和需求方掰头,要不就是在和研发掰头。

三、如何很好地进行会议管理?

第二部分就来看看需求评审相关的会议管理内容。

大部分人在做产品经理之前,极少有会议组织的机会和经验,更多都是在被动参会。而一旦入行产品,就需要开始频繁组织各种各样的会议,而需求评审就是其中最不可避免的一类会议。

曾经有同事分享过罗伯特议事规则,也有一类专门做会议组织研究的咨询公司。由此可见,会议组织其实是一门非常高深的学问。

罗伯特议事规则》(Robert’s Rules of Order,RONR)是一本由美国将领亨利·马丁·罗伯特于1876年出版的手册,搜集并改编美国国会的议事程序,使之普及于美国民间组织,也是目前美国最广为使用的议事规范。

作品内容非常详细,包罗万象,有专门讲主持会议的主席的规则,有针对会议秘书的规则,当然大量是有关普通与会者的规则,有针对不同意见的提出和表达的规则,有关辩论的规则,还有非常重要的、不同情况下的表决规则。

但这里不展开来讲(笔者自己也没有掌握那么深),就只和大家分享一些较为基础的会议管理方法,只要能够很好地服务于需求评审和日常工作即可。

从时间角度来看,一场会议可以分为会前、会中和会后3个阶段。那么每个阶段我们都需要做什么呢?

1. 会前准备

  • 准备会议资料:需求评审则需要按照评审内容提前准备好文档,并根据实际情况提醒大家提前阅读并做好问题整理
  • 创建会议:尽量提前2-3天拉会,给参会人留有充足时间调整其他日程和准备本次会议;并在日程中提前告知会议目标、会议资料地址等信息

2. 会中把控

需求评审过程中,最主要的3个点就在于节奏把控、争论处理和情绪管理。

节奏把控:

一般而言,产品是会议主持人,那么自然就担当着会议节奏把控和主持的角色。当角色众多时,其实是比较容易出现讨论内容溢出的问题,大家一聊开就上头了,结果导致会议开了足足几个小时都还没有产生定论。

所以,需求评审中产品要做的第一件事就是把控整个会议的节奏,既要及时把聊得起兴的大家拉回评审中,还要尽量按照参会人的精力去做好节奏的规划,让整场会议高效而轻松。

如果你刚刚入门,还不知道怎样能够很好地把控节奏,那么可以尝试提前根据评审内容进行时间和会议内容规划。

例如,前10分钟同步信息和背景,中间10分钟讲权限业务逻辑模块,然后预留5分钟时间讨论,接下来继续讲权限配置的页面交互,再预留5分钟时间讨论等。全程尽量严格按照自己的议程来,看看实际情况和自己规划是否相符,如果出现不符合,那么问题出在哪里?后续怎么进行改进?

多来几次,你就会有不错的节奏把控能力了,甚至于整个会议实际开完的时间和你预期的时间相差不了几分钟。

争论处理和情绪管理:

需求评审中出现争吵的原因常见于以下几点:

  • 表达或理解不准确,导致出现了信息差
  • 情绪管理不佳,一上头就开始对人不对事
  • 会前就需求沟通不足,导致会上出现较大分歧

既然是团队中很多角色坐一起评审,每个角色的视角和关注点不同,那么自然会出现很多讨论点甚至于争论点。那么,当会上有2个人产生了争论时(通常是产品经理和其他人),怎样处理才比较妥善呢?

首先最重要的一点,做好自己的情绪管理

在一场需求评审过程中,产品经理既是会议主持人,又是参会人。如果你自己都乱了,那么整个会就尬在那里没人收场了。所以,一个成熟的产品经理需要尽量顾全大局、摆正自己的心态,尽量以结果为导向、对事不对人。

其次,换位思考,尝试先根据对方表达的看法去梳理他的思路,然后用自己的理解复述一遍,看对方是否认可你的理解。接下来,再根据你的理解去进行判断并阐述自己的观点,看是否能够得到对方的认可。

最后,如果实在在会上没法沟通,那就告知大家:自己会先记录下待讨论的问题,会后再进行讨论,后续的议程继续。「下来再讨论」真的是一句解决会上冲突的万能金句。

3. 会后同步和跟进

会议结束之后,确实可以长舒一口气,开始准备下一阶段的工作了,但注意:会后还是需要做好会议纪要、会议同步和后续问题的跟进。

笔者的需求评审会议纪要一般分为3部分:待讨论、待完善、已确认。

  • 待讨论:指会上的遗留问题
  • 待完善:指会上确认要改的问题,后续自己要完善在文档中
  • 已确认:指会上讨论得出要做/不做的结论的点

整理好会议纪要后,及时将内容同步好发给参会同事,如果后续还有待讨论的问题,则与相关人员定一个讨论的待办,避免大家忘记。

这里其实想分享一个笔者和UI小姐姐之间蛮有意思的小故事。

低保真评审时,我们还会顺路确认好UI出图的范围。因为大多数都是产品带电脑投屏,所以自己会顺手记录下UI出图的范围并发给UI小姐姐。本意是为了更好地把控会议后续质量,没想到这个顺手的行为得到了UI小姐姐的肯定。

从这个小故事中,笔者发现,如果日常能够在需求评审中的灰色地带稍微多做一些、多为对方思考一些,那么,整个团队互相之间的信任和协作会越来越nice~

四、评审时,前后端/测试都关注什么?

前面和大家分享了完整的需求评审流程,现在就来带大家换个思路,看看前端、后端、测试在一次需求评审中都关注什么?

以下素材来源于笔者和研发同事们的亲身采访

后端:

  • 关注方案可行性的评估,重点在需求逻辑可行性、技术难度、工作量和改动成本上;
  • 关注需求逻辑的覆盖度,帮助产品经理做好逻辑的查漏补缺
  • 关注研发过程中的实现风险

前端:

  • 关注需求场景及业务合理性
  • 关注页面样式交互,为产品经理提出一些更合理的样式交互建议
  • 关注技术方案和成本评估,尤其关注新页面中交互与已有统一标准组件的评估

测试:

  • 关注需求的逻辑性及合理性
  • 关注需求描述的准确程度、是否排除二义性等(认为好的需求文档应该是一把标准的尺子)
  • 关注整个迭代的质量风险及进度,保证交付的稳定性

从上面的回答中能够很明显的看出不同角色看待需求的视角。当我们要将需求讲给不同的人听时,就要提前站在他们的视角和关注点去思考问题,获得更多沟通的前提信息,从而更顺畅地进行沟通。

五、3个压箱底的需求评审技巧!

从被怼到在现场止不住的哭,再到现在可以轻轻松松开玩笑回怼研发,笔者踩了很多坑、也积累了一些经验。所以,最后就和大家分享3个压箱底的需求评审技巧!

1. 先零售沟通,再批发沟通

此处标题来自邱岳《产品训练营》中的内容,指我们在做需求评审的时候,不能把各式各样的问题全部都堆到1-2h的需求评审会上来解决,而是应当先和相关人私下进行讨论(零售沟通),取得共识后再和相关角色统一进行讨论(批发沟通)

因为,一场需求评审中往往会出现来自不同部门的不同岗位和角色,每个人的关注点都有所不同。如果,所有问题都在会上一并讨论,那么不仅容易范围溢出、干扰讨论,也容易耽误他人时间、让听众失去了耐心。

例如,本次迭代中课次和班级的关系到底应该如何设计?班级和课次是1对n还是n对n的关系?这明显是与后端直接相关的问题,那么,在需求评审前,这类问题就需要提前与后端同学沟通确认好,会上只讨论大家公共关注和需要共同确认的问题。

这样一来,整个会议中大部分时间都在做同步,小部分时间在讨论一些公共问题及小问题,整个会议的效率会得到极大的提升。

2. 识别并搞定关键人

项目管理中有一类管理叫做「干系人管理」,指的是我们需要识别项目中的干系人stakeholders,并对他们进行一定的管理。

而我们则可以把需求评审当作一次小型的项目,项目如果要顺利推进,就需要对其中的干系人做好管理。而干系人中,又可以根据话语权及意见影响程度分为关键人和追随者,用一句互联网黑话来形容就是找到关系人中的「抓手」人物

因为,需求评审中不仅角色众多,人员也很复杂,很难兼顾和满足每一个人的想法。因此,在大方向上,我们就需要提前去搞定关键人,因为他们拥有更多的视野和做决策的信息,某种程度上,也是意见领袖。

如果你的想法和大部分人都不一致,那可以先尝试和关键人进行沟通。在取得关键人认可后,再去推进那些想法摇摆不定或者没有太多主观想法的人,整个过程相对就会顺利一些。

3. 适当放权,避免太过独断

不知道大家有没有做过DISC性格测试,笔者身边大多数产品经理都是D型居多,即支配型/控制者Dominance。

D型行为风格的关键词是:积极进取、争强好胜、强势、爱追根究底、直截了当、主动的开拓者、坚持意见、自信和直率。

但是这类人也往往具有以下这些缺点:

不知道你有没有躺枪,D型人格的产品经理在需求评审中一些问题的讨论上难免会有些过于强势。当然,大家都知道天才产品经理乔布斯就是一个极度强势和独断专行的人,但我们大部分人都难以达到那样的高度,如果真的像乔帮主那样处事,可能最后就只能被迫做一个全栈产品了吧。

因此,在需求评审中我们需要对自己的决策做出一些取舍。大方向上一定要坚持自己的想法和意见,而一些优先级低的需求和细节可以适当放权,给予团队一些发挥空间,这也算能够坚持自我想法的一种迂回之策吧。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理  作者:冰冰酱

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


常见科技风格分类

鹤鹤

老板:给我来一套科技风,要炫酷,要眼前一亮的感觉

    你:好嘞~(叮叮当当咚咚当当)

    老板:哎呀,我要的不是这种太花了,不够高端

    你:给您改(叮叮当当咚咚当当)

    老板:哎呀,也不是这种太素了

    你:行,改....(我刀呢)


    没做过科技风格的新人缺乏对常见科技风格的了解,很容易根据甲方模糊的描述及要求,主观性的设计,还会在甲方要改的情况下十分委屈,我做的就是你描述的炫酷科技风啊。科技风格大类本身特征就是炫酷,眼前一亮的感觉,甲方没有了解只能粗略的表述。设计师主动了解市面常见的科技风格细分及其使用场景。就能够问出甲方爸爸更细化的需求,更客观的根据使用场景选择恰当的细分科技风,减少不断重改的成本。


FUI:

    FUI 就是 Fictional User Interfaces (Fictional GUI),就是 Fantasy User Interfaces,就是 Fake User Interfaces,就是 Futuristic User Interfaces,这些用户界面它们是科幻的,是未来派的,是奇幻的,是虚假的.观赏性大于实用性。

    并不是所有风格的FUI都适合应用于现实中,比如——半透明介质且信息复杂的的UI,只适合出现在影视作品里面(和一些视频游戏当中)。它们的表现性强,看起来复杂精密,但对于信息展示功能很弱。其存在的目的是更好的配合场景,不会遮挡演员的脸部。想想看主角对复杂的数据一顿操作猛如虎,让观众眼花缭乱,对主角更加崇拜。


1.商务科技风:

     精致、高端、轻质感;简约干净、形体线条精细;功能感强

     应用:

    车载UI;金融UI;各种科技工具类产品的登录注册或官网Banner;商务海报等

    特征:

    1.商务科技配色较为严肃,低调。背景以深蓝色,深灰色背景居多。

    2.元素的形状并不复杂、外轮廓整体规则,周围的细碎装饰较少。

    3.强调品质感,会模拟一些较为细腻玻璃、金属或哑光的微质感。对于光的使用较为克制,较少大范围的使用辉光,多在边缘使用较细的流光,看起来更加的犀利精致。

(偏商务科技风格例子-图片来源于网络)

2.扁平科技风:

    整体风格偏向机械、直观,其扁平特征是元素扁平纯色块或渐变,弱化图表空间感及体积感。多组扁平的数据可    视化图表,在空间层次的表现上更多是在同一平面上。

    非常适合多数据后台数据展示,强调信息数据的清晰展示,较多使用纯色面元素作为底板,减少了环境的背景外扰因素。且数据分组展示,功能分区明显。

    设计成本及实现成本较低,为目前大多数数据可视化大屏展示所选择。


(偏扁平科技风格例-图片来源于网络)

3.HUD(仪表盘)科技风:

    视觉多使用单色,点线元素。可以与现实背景结合度高。

    应用:

    电影(漫威系列FUI)、游戏、企业产品宣传视频、AR等展示型为主

    特征:

    1.颜色使用上单色居多,尤其多亮色白,亮色蓝,同色相多透明梯度变化。无质感或毛玻璃质感。

    2.简洁而不简单,层次丰富,典型风格HUD。空间层次感丰富,使用半透的结构线3D模型或晶格模型,显得轻        巧而精致,用户能够透过信息层看到场景层,

    3.极简科技风需要设计师把控好细碎元素的体量和数量,对信息不会进行过多的视觉干扰。

    ps:

   极简科技风数据的展示容量大于扁平科技风,看起来很复杂高端但通常实用性差。如果使用过多的数据,则显示    相似类型的图表展示相似的数据集在视觉上可能会缺乏新鲜感,但更易于理解和理解。具有不同的图表在视觉上是令人兴奋的,但用户需要花费更多时间阅读。


(偏极简科技风格例-图片来源于网络)

4.赛博炫酷科技风:

    赛博朋克又称数字朋克、网络朋克。

    应用:游戏、H5、运营banner配图等需要强视觉氛围的运营。代表电影如:攻壳机动队、头号玩家、银翼杀手等

    特征:

    1.张扬奇幻的娱乐感,技能风、故障风、视觉冲击强烈。常见元素:全息投影、义体、立体城市、高达机械元素  等。

    2.人造光是赛博朋克在视觉上最大的特征,背景暗色,常用荧光黄、紫、蓝、粉 、绿灯内外发光,模拟霓虹灯管自发光效果,重点元素高亮辉光。

    3.色彩冷暖撞色对比强烈,如:红蓝对比青紫对比黄橙对比等。

    4.数码屏幕与全息投影是霓虹灯的一种延伸,既能体现未来世界的高科技的感,也能体现出人造和虚拟的概念。部分元素前后叠影色彩错位,有频次的闪动,模拟电子科技的偶发故障。机械化IP形象和字体设计常见金属感和拼接感。

(偏赛博科技风格例-图片来源于网络)

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:唐小葱

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



情感化设计心理学:用户心理定律及优秀案例分析

鹤鹤

将普遍存在的人性用户心理规律运用于设计,增加设计的温度。

近来对用户心理比较感兴趣,去看相关设计资料的时候发现相关内容重复性较高,多方搜集资料结合自己的一些分析总结出一篇补充。

定律是钥匙,在遇到让我们上瘾,持续付出或获得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能为我们的后续的设计吸收。










undefined

undefined

undefined

undefined

undefined

最后想说,设计师的价值不仅仅在视觉,好的设计必是好用好看好懂用户的。跨领域学习补充自己的视野,多思多想,掌握钥匙,开启用户不同的心门。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:唐小葱

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


交互设计中排行榜设计详解

鹤鹤

“今天吃什么啊?”

“不知道啊,看看大众点评,哪家店比较靠前”

“一会去看什么电影?”

“我看豆瓣上,这部片子评分特别高,我们去看这个吧”

当我们每天面对类似“吃什么”“买哪个品牌”“周末去哪玩”等等需要抉择的问题时,会发现当你面对的选择越多时却越不知道该如何做决定,或者当下做了决定后会一直思考做的这个决定是不是最好的,这恰恰是当代绝大部分用户在实际生活中面临的问题-选择困难。面对用户的选择需求各大平台都有自己的方式,帮助用户做决定的同时,引导用户购买目标产品,极大的降低了用户的选择成本,其中排行榜就是平台的常用套路。用户的选择成本是什么?排行榜为什么能够帮助用户降低选择成本?如果排行榜仅仅是用来降低用户的选择成本,为什么所有商家都对排行榜趋之若鹜?下面带你了解为什么人人都爱排行榜,及我们生活无处不在的“显性”“非显性”排行榜。你可能不知道是我们的生活正在被各种排行榜所支配


排行榜的本质是一个没有感情的信息筛选机制,将所有相关的同类事物之间通过比较,从而反映出同类事物的客观实力。排行榜建立的基础在于用户对信息筛选平台权威性的认可,比如我们买衣服会首选淘宝,电子类产品会首选京东,看电影会看豆瓣评分,这些都是对平台某一领域权威性的认可。用户信任平台权威性对信息的筛选,由于锚定效应使得用户降低自己的选择成本,可以准确快速的做出选择。同时由于用户的从众心理或者羊群效应,也会对上榜主体产生强烈的品牌认可,为上榜主体带来更多的利益、强烈的荣誉感、甚至流量以及平台背书标签,比如:B站的百大up主,各个平台排行榜的销量冠军、朝阳地区必吃榜第一名,那么这一切背后的原理是什么?


一个完整的排行榜是由平台、上榜主体、用户三大组成部分,俗话说屁股决定脑袋,不同的定位决定了排行对三大组成部分不同的作用,当然背后的原理也不尽相同。


1.选择类排行榜-降低用户选择成本

在没有各种应用前,当我们决定购买什么东西或去哪家消费时,前期需要花费大量的人力、物力去搜集相关的信息进行整理集合对比集合信息后才能做出决定,也就是说用户需要经过信息的搜集-备选集的建立-择优决策3个过程才能等到最终的结果。在建立备选集后,做出择优决策阶段发生的成本或费用都是用户付出的选择成本(前两个阶段发生的成本是交易费用,而不是选择成本)。在备选集的建立过程中,包含的选择越多,用户选择的难度就越大选择成本就会越高

选择性排行榜在备选集建立完成后,利用沉锚效应在用户心理建立潜意识的目标参照,帮助用户完成择优决策,降低用户的选择成本。(另一方面平台在帮助用户降低选择成本的同时,也影响着用户的最终选择,在接下来的平台侧方面会有详细的分析)。

比如说:当我需要买个耳机时,如果在没有各大应用的前提下,我需要通过找到我身边的耳机发烧友或数码电子方面方面的内行人对耳机进行了解,收集信息建立备选集,但由于京东在电子设备购物方面的权威性,我会优先查看京东的耳机类排行榜,也就是说京东帮助我完成了前期对于信息的搜集及备选集的建立,而用户出于对平台权威性的信任,根据平台给出的维度参照、品牌参照、价格、标签参照等信息,最终快速的完成自己的选择。整个过程就是用户在对锚的寻找,以及用户对信息确定性的寻找过程。

2.信息类排行榜-满足社交需求

在马斯洛需求中,当个人的生理需求和安全需求被满足时,与他人建立情感联系或关系成为人们最强烈的需求,即社交需求。社交又分为:为达到某种目的产生的功利社交或为获得情感连接及体验的共情社交需求。例如:QQ音乐新增的扑通社区、微博的明星超话打榜等功能模块的火热正是满足了拥有共同兴趣爱好的用户对于共情社交的需求。

无论是“功利社交”还是“共情社交”首先需要的是沟通沟通的本质则是信息的流通,但当双方都没有可以沟通的信息时则社交不成立,而类似:微博热搜、今日头条、澎湃新闻等信息类排行榜,则给有社交需求的用户提供了可以展开话题相通的谈资

选择类排行榜中,提到的从众心理(又称羊群效应),是指人类由于对信息压力规范压力,会希望融入到群体中寻求安全感的特性,即便此类信息与自己无关。大部分人由于对未获得及时信息的焦虑感,会热衷于浏览此类排行榜来获取实时信息,融入群体生活。每天早上,在通勤的路上用户利用碎片时间刷微博、浏览知乎或今日头条等应用了解最近发生了什么社会事件,在上班电梯或工作间隙讨论各自掌握的信息,及对事件的见解,甚至在与他人有相同的见解或之后,会对对方产生莫名的亲近感等等,这些都是在满足大众自己的社交需求。

3.分享类排行榜-自我确认需求

过年期间各家app纷纷都推出了自己的用户年度报告总结榜,不知道你有没有参与到其中,并把这些报告的截图分享到自己的朋友圈!在我们的日常生活中也会在朋友圈、B站等看到各种测试自己隐藏能力或性格的小程序,人们对于这类活动的空前热情其实是因为人类除了需要信息的确认外,还需要清楚自身在大数据下的自我确认,通过各种各样自我测试类榜单,判断自身的能力、情绪、价值等等,来达到自我认同,否则就会感到焦虑不安。

加拿大社会学家欧文·戈夫曼在《日常生活中的自我呈现》中提出他对社会生活的理解是“社会是舞台,人人皆演员”。 在社会这个舞台我们需要对外有印象管理的过程,我们想要呈现给观众怎样的形象,需要我们对自身及身边人有所思考和了解。所以在社会生活中我们呈现的是自己思考管理下被他人和社会接受的自己,为了维持自身的平衡防止崩溃,人类会自发“忠诚、纪律、谨慎”的维护自己的外在形象。而互联网平台大数据则折射出“隐形”的自己,让用户更加清楚的认知自己,同时通过分享,满足自我确认以及他人确认的需求。

我目前只总结出这三种类型的排行榜,如果有小伙伴想到其他类型欢迎在评论区提出,大家一起参与讨论。

无论哪种排行榜,用户信任的基础都来自对平台的信任,那么用户为什么信任平台?排行榜对平台意味着什么?背后原理是什么?下面我们来讨论排行中平台的影响及背后的原因。


对于用户来说排行榜是为了满足用户对于数据参数、社交信息、自我个人的确定性,选择成本是品牌经济学的核心,而用户对于排行的信任首先要建立在平台品牌的权威性下的结果。

1.平台权威性—用户侧

从我们记事起,我们对世界的认识来自我们的父母或老师,而这些教导我们什么是对、什么是错的长辈或老师,对当时刚来到这个世界的我们来说就是权威的化身。长大后我们对于权威的认可则更倾向于某一领域的专家,比如:医生、律师、教授等,认为处于权威地位的人在某一领域相对普通用户的判断更可靠,可以帮助普通用户节省研究这一领域问题的工作,做出更轻松的决定虽然不一定是正确的

搜索我们会第一时间想到百度,需要观看影视、书籍会想到豆瓣,想听音乐会打开网易云音乐、QQ音乐等等。各大应用经过长时间的厮杀各自在用户心中建立了某一领域的权威性,形成品牌号召力,推动着用户做出需求决策。另一方面排行榜中也会说明数据来源,比如京东会在排行榜页面有明确的榜单说明,豆瓣根据平台数据更新,汽车之家依靠外部的权威数据等等方式力证自己榜单的公正、透明,减少用户做出决定中的思考、猜测,获得用户的信任,增强平台的权威性。那对于平台来说权威性的建立意味着什么?

2.平台权威性—平台侧

  • 影响用户的决策方向

平台权威性对用户来说意味着说服力和影响力,在减轻用户的决策压力的同时,也影响着用户做出平台所需的决策方向

  • 平台自带话题性

平台本身的权威性也会为平台承载的内容带来讨论的话题度,加大平台承载内容的传播范围。比如,每年苹果发布会都会带来范围极大的热度讨论,而app store内的热门推荐自带话题度和讨论热度

  • 输出口优化

排行榜作为内容输出口,在平台权威性的背书下,产品优化自身的价值,而平台也可以通过排行榜优化自身平台价值。

  • 平台盈利

平台权威性下,可以通过多种方式达到盈利,比如苹果app store应用商店内的付费应用,百度的凤巢系统、微博热搜的第3、4位排名等。

3.平台权威性—广告告知

在平台完成建立权威性后,部分平台开始利用排行榜进行商业变现,比如百度、58的竞价排名等,现在大部分应用会使用明显的方式告知用户,防止平台建立品牌权威性。比如微博热搜第3、4位广告位的“荐”,淘宝、小红书推荐猜你喜欢的“广告”。


上榜主体作为整个排行榜的内容中心,由于排行榜自带的竞争机制、筛选机制,使得上榜用户会很乐于分享出去,比如游戏类应用王者荣耀的胜利者排位、微信运动排行榜。

由于马太效应上榜主体中的头部用户会获得平台更多的曝光量、绝大部分用户的关注度,以及各种潜在资源,比如:流量、资源、人脉、某一领域影响力、平台背书等等,这些都是潜在的社交货币。这种激励机制极大的满足了上榜主体的荣誉感、及平台归宿感,比如bilibili不同粉丝量级会送出相对应的粉丝牌。

而平台方也利用上榜主体挖掘潜在的用户,为平台带来更多的新用户,加强平台权威性,形成平台和上榜主体的良性循环。甚至与出现上榜主体自己的流量超过平台自身流量,带走平台用户的情况。比如去年和热闹的“巫师财经推出b站,签约西瓜视频”,各大平台也时不时会出现抢占流量up主的情况。

排行榜资源的建立

排行榜设计要达到用户攀比的效果,很重要的充分条件就是相同需求好友基数足够大,这样才能构成排行榜设计成功的必要条件。

  • 同系同门资源导流

对于已有成功产品的公司,可以借助平台相互间的导流完成初试资源的搭建,比如:微信初期借助QQ好友流量,带来好友初期的爆发;抖音最初的活跃借助今日头条的流量输入。

  • 自建用户体系

不断推送已关注好友的信息流,当通讯录好友开始使用头条都要发送系统推送。比如全年年低火爆全网的cloubhouse就是利用的熟人社交,你要先有这个人联系方式才能要求好友,关注的人越多才能解锁更多的聊天室。通讯录、地理位置、兴趣偏好等等,不断社区建设推送动态信息流和好友卡片推荐。

  • 伪造

当应用建立初期,没有很多的资源和内容时,需要平台自行填充内容,使得排行榜信息量大,增加用户活跃,才能挖掘用户的需求和个性化。不如一些小编推荐、猜你喜欢等等,或是平台pgc发布推送的内容。


面对不同的用户人群及使用场景排行榜的入口表现形式也会千变万化,根据表现形式大体可分为“显性排行榜”和“隐形排行榜”。

在界面有明显的榜单名称、排序、评判规则、上榜主体、卖点信息等。排序和内容主体是这个排行榜的基本构成,其他则根据不同产品类型及产品需求决定是否展示。

1.页面tab

在首页底部或顶部tab形式出现,多出现在以UGC或文字信息为核心的产品,以内容信息为主,常见以信息热度为主要功能的资讯、新闻类应用。比如:知乎、今日头条、36氪。

知乎热榜内容完全展开;36氪分为话题榜、人气榜,话题榜仅展示前5条,人气榜展示10条,仅在前5条有名次图标,在36氪热榜的中部还会出现收藏榜,综合榜。

而今日头条仅在整个页面的1/3处展示部分“头条热榜”,点击“查看更多”后,展开“头条热榜”及“今日关注”“北京热榜”,整个交互形式类似微博热搜。

2.图标入口

首页功能入口处明显排行榜图标,优先级较高,常见自带推荐属性,能够帮助用户快速选择,减少选择成本,比较依赖榜单的应用。比如:豆瓣、音乐类、腾讯动漫等应用。

其中豆瓣、网易云音乐由于各种类型的排行榜很多,在图标点击开后,在当前页面平铺不同维度榜单类型,用户进行点击跳转;腾讯动漫相对榜单类型较少,在左边侧边栏切换不同的榜单。

3.商品详情页榜单入口

用户查看商品详情时,可能会希望能够横向对比同类商品,才能最终决定购买那件商品。常见于电商类应用,比如:京东、拼多多、得物等。点击后进入不同的榜单页面,获取更多产品信息进行筛选。(淘宝的商品详情页没有排行榜,但在首页却存在隐形排行榜,在隐形排行榜模块会有详细说明)。

4.搜索-筛选(无明确搜索目的)

当用户没有明确搜索目的时,搜索框的下方,平台会推荐没有明确指向性但有热度的产品信息。衡量的标准一般为搜索热度或信息本身的热度。利用榜单效应留住用户,比如:微博热搜、淘宝热卖、抖音热榜等。


没有明显排名及规则,但经过大数据、平台或榜单制作者筛选后呈现在平台用户的面前,位置越靠前,在用户心目中的默认位置越靠前,比如淘宝的“有好货”、编辑精选等。

1.编辑推荐/小编推荐

在平台建立初期没有特别的内容供平台呈现,这时候就需要平台人工有目的的推荐一些内容,不同于“猜你喜欢”建立在用户的行为数据下,编辑推荐更多的平台希望用户看到的内容,一方面作为平台内容的输出口引导用户,另一方面内容是平台自己发布内容,也可以保证内容的高质量。

2.猜你喜欢/相关推荐

平台根据用户之前的浏览量、收藏量、转发、搜索等用户行为数据推荐给用户相关内容。这个时候的应用基本已度过最初的获客期,并且存在大量的平台用户使用数据,“猜你喜欢或相关推荐”模块用来增加用户的浏览时长及购买的可能性,各大应用平台适用性强,一般出现在首页部分。

3.年度总结排行榜

朋友圈每年年底都会晒出的各种各样的生活、音乐、消费的排行榜,这些其实是用户自己确定了解自己,且喜欢他人了解自己的一种方式。用户通过网络数据折射出自我的轮廓,清楚的认识自己。

4.TOP排行榜

不知道大家小时候看没看过《第10放映室》,那是我最早关于排行榜的印象,里面会有各种最佳动作片总结、最佳男配角总结等等,以香港电影偏多,是我早年的电影信息资料库。现在我们也会在小红书、抖音、公众号平台刷到各种各样的top推荐,这其实也是排行榜的一种。TOP类是已经经过人为筛选的排行榜,从众多选择中选择出部分答案,给出理由,而用户只需在已被筛选过的内容中进行决定,节省选择成本,比如豆瓣每年都会举行的豆瓣电影。另外一种TOP榜并不能帮助用户做决定,但可以迎合用户对确定性需求的各种盘点性质的排行榜,比如抖音的TOP榜哥就是盘点各种内容,人物。

5.搜索-筛选(有明确搜索目的)

相比其他排行榜,筛选后的内容已经体现了用户的具体需求,高效明确的给用户提供选项,引导用户快速选择。


排行榜一般由必需的榜单头部、上榜主体,及非必需的榜单规则、更新信息构成;而上榜主体由必需的主体信息排序,以及非必需的推荐理由、排名变化、热度信息构成。

好的榜单能够快速吸引用户快速找到自己的需求点,引导用户点击排行榜进行查看。而榜单头部也由于功能需求的不同分为唯一性榜单头部、可复用性榜单头部

1.唯一性榜单头部

当排行榜在整个应用中有且只有一个时,通常会对榜单头部的背景及榜单名称进行个性化、品牌化设计。比如微博的微博热搜、知乎的盐选榜单、今日头条的头条热榜、大众点评的大众点评榜单等。其中微博、头条、大众点评都在名称上有做品牌漏出,增加平台的品牌权威性。

2.可复用性榜单头部

有些应用平台会存在内容需要多种不同纬度的排行榜展示的情况,为了平台的统一性、降低后期的维护成本,一般会使用可复用的榜单头部,如豆瓣、京东、QQ音乐等。

得物通过替换左右切换商品进行宣传。豆瓣、微博、马蜂窝虽然都是通过替换图片及文案的形式达到适配,但根据场景又有不同。豆瓣、微博因榜单效应根据榜单第一位的变化更换底图及文案;马蜂窝沿用自己品牌的蜂窝形状及“马蜂窝榜单”的标签设计形式,通过更换文案底图达到适用不同主题;京东就相对比较简单,只是更换标题的文案达到多主题适配。


排行榜上榜主体由于不同的场景业务需求,一般有纯文字形式、图文结合形式、横排+列表结构3种表现形式,其中主体信息及排序为排行榜必须信息,而推荐理由、排名变化、热度信息、评分等等非必须信息则根据用户关注信息点选择漏出。

1.纯文字形式

纯文字的排行榜一般是以内容(或标题)加排名的形式出现,常见以信息为主的排行榜,比如微博、知乎、今日头条等以信息为主要关注点的应用,或是搜索列表下方的热度排行榜。信息类排行榜一般以信息热度为衡量标准,因此会在标题及排位外,增加各种突出热度信息的表现形式,如关注热度人数,或是“热”“新”“爆”等等表示热度的标签,如抖音、微博。而淘宝搜索热度则是在标签外增加了上升下降的排名变化

2.图文结合形式

相对于纯文字形式,图文结合的排行榜因为图片信息的增加,使整个榜单主体占居更多的空间也可以展示更多的产品信息,辅助用户进行选择。

  • 图片形式

上榜主体图片尺寸一般会有横版、方版、竖版3种形式。头条、知乎等资讯类应用都采用传统的横版图片形式,延续了用户阅读新闻类资讯的习惯;而豆瓣、腾讯动漫等由于现实中书籍封面、电影海报等用户视觉场景都是竖版构图,因此沿用至线上使用的也是竖版图片形式;而京东、大众点评、马蜂窝则使用方版的图片形式,大概是因为产品的多样性需要考虑多种图片的适配问题。(视频、游戏类由于使用场景大部分采用横版图片形式;但由于游戏封面、宣传海报也会有竖版的形式,比如:游民星空、小黑盒)。

  • 左文右图VS左图右文

每当设计图文结合的部分,首先要考虑到底是采用左图右文还是左文右图的形式呢?可能很多人会说这两种形式没有什么大的区别啊,有什么可纠结的!或者认为由于视频、图片、文字对人类的吸引力是呈递减形式的,因此应该选择左图右文的形式。但实际上这跟我们长久以来的阅读习惯以及应用希望触达的用户类型有很大的关系。

人类对画面的阅读及扫描方式通常为三种布局方式,包括:古腾堡图(Gutenberg),Z型(z-pattern)和F型(f-pattern)。其中产品列表页中最常使用的就是F型布局模式,F型布局是雅各布·尼尔森(Jacob Nielsen)在公司进行眼动追踪研究后首次提出的。与其他模式相同的是,眼睛从上/左,水平移动到上/右,然后回到左边缘再此进行水平扫描。但在F型布局第二次扫频后,向右扫动的次数会越来越少,并且会随着向下移动,眼球会紧贴左边缘。用户也倾向于F型模式浏览浏览整个页面,即自左向右自上而下的阅读模式,越向下信息获取效率会越低

因此今日头条、知乎等需要通过文字传递给用户准确、丰富的新闻资讯类应用普遍以左文右图的形式展现。而电影、游戏、动漫等以画面触达用户需求的应用则都采用的是左图右文的表现形式,比如:腾讯动漫、爱奇艺、得物等等。

3.横排+列表表现形式

说到排行榜我们一般第一个会想到领奖台,很多平台也采用领奖台这种前三名横排+其他排名列表的结构。纯列表形式的排行榜,平台用户的注意力大部分集中在第一名,而领奖台的形式模仿现实生活中的奖励形式和仪式感,将整个排行榜的关注范围从第一名扩展至3名,另一方面排行榜的竞争关系从单一争争夺一名变成前三名的竞争关系,增加了第一名的高度。(目前这种形式我只在微博的明星势力榜及抖音的直播总榜中有看到)


榜单规则是排行榜规则的描述,是平台权威性的体现。榜单规则有些平台本身具有数据库,会有相关的平台数据支持如京东;而汽车之家则依靠“汽车工业协会”外部的数据支持,增加平台的权威性及榜单的可信度;

信息更新一般存在在榜单头部和上榜主体的中间,有些是固定时间更新,也有类似微博热搜是实时更新的模式,而腾讯动漫的更新作为用户的痛点会在延续企鹅形象的侧边栏头部标明榜单更新周期。


排行榜的成功看似是人们对于选择困难、信息获取的解决方案,但归根到底因为人们对于不确定性的惧怕,无论是信息的不确定性或是对自身价值的不确定性。而平台方利用金钱、名誉、奖励的外部激励方式,结合满足感、确定性、社交性的内在激励相互作用使得排行榜成为无论何种平台都非常受欢迎的产品功能。作为平台方因产品使用受众、产品侧重点、宣传方式的不同,排行榜会以多种入口及展现形式出现。作为设计师需要深入了解排行榜等功能背后的产品逻辑,以及用户操作行为背后的思考及心理效应,提出合理的设计,帮助用户了解产品功能,满足用户需求。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:9号自习室
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



如何选择确定B端后台设计风格及细节优化

鹤鹤

如何选择合适的B端设计风格?

1.B端后台分类:

根据服务对象划分:

一类支持有C端前台,支持前台产品管理各种资源。第二类服务企业,提高企业工作效率和营收。


根据后台功能:

1.监控运营:时效性强,旨在实时反馈异常情况,快速判断下达命令,回复信息、多用于数据控制中心。

2.数据分析:数据结果的对比和分析趋势,时效性要求并不高,了解整体和各部分数据水平,助力决策。

3.记录管理类:主要用于人员、设备、资产等增删改查,文本信息容量大,频繁便捷的操作。

4.系统配置:权限配置、设备功能配置,操作为主。


2.后台深浅两大风格分类:

浅色:适合文本信息多密集的表单列表类后台,浅色更符合人眼白底黑字的阅读习惯,浏览速度更快,信息获取效率更高。


深色:图像信息密集的后台适合图片、数据可视化图表等;深色对彩色的图像信息衬托更强。信息获取速度较慢,长时间可能视疲劳。


3.作者常向产品方提供的风格参考

较常见

  1. 经典商务风(导航深、内容浅)——专业、高效、成熟、可信赖(对照深色西装人物形象)

    优点:市面最常见的风格,普世性高,大多数用户可快速接受,层次分明

    缺点:视觉缺乏记忆点

 2.轻量科技感(导航浅、内容浅)——简洁、明快、轻量、年轻(对照白衬衫打领带男性)

      优点:视觉清新明快更年轻化更轻量,对其他文本及图形展示包容性高,就像A4白纸一样容器存在感弱

      缺点:纯白色导航+页面层次略暧昧。

 3.蓝色科技风(导航中、内容中)

      适合:适合科技属性强的产品界面,图像图形展示

      缺点:对其他色彩信息有干扰,持续性长时间观看易视觉疲劳

 4.暗黑科技风(导航深、内容深)

      优点:对色彩表现力强

      缺点:密集文本信息获取速度会下降,持续性长时间观看易视觉疲劳



4.精准选择风格时可以进一步的考虑:

1.整体行业风格

比如美妆和科技行业的整体设计基调就不太相同。


2.产品想要传达的气质:

理性可靠 or  简洁轻松轻量 or 关怀普世 or 酷炫吸睛….这个可以和相关产品经理、销售共同商讨


3.目标用户的群体特点及喜好。

根据目标用户的性别、年龄层、受教育水平,审美水平考量(可能包含多种角色,选取1.2个核心角色为参考)带入目标用户工作场景及爱用物常用物品味,去判断基调。

如主要用户群:40+男性用户,本科以上受教育水平,使用windows电脑进行专业管理操作,审美倾向明确内敛。

如主要用户群:20-40岁,男女比例约6:4;大专;操作水平参差


4.使用场景及高频的操作。

例如:最常使用数据分析管理,需要快速阅览多条数据,对数据进行比对,更适合浅色风格展示表单数据。


5.判断独立的平台是否为独立开发

独立开发的,可以采取更独特设计。若平台很大需要不同外包公司的合作属于整合类平台则更注重设计的包容性。


5.如何让后台设计更具特色:



  1. 重点色的使用



“731配色比例”70%的面板色,30%的导航面板色,10%的强调色。(这里的用色比例可以根据内容具体再去调节只是大概比例)品牌色或重点色:强调行动关键点、重要信息高亮、图形化说明等。强调色用就要用的像蛋糕上的樱桃。起到画龙点睛作用即可。

2.图标的优化

后台高频出现的图标,值得我们花时间去统一设计打磨,调整圆角粗细疏密,符合整体界面气质。从图标库里拖出的图标很多在线条粗细上是不统一的,好的设计在细节处也要动人。

B端工具类图标识别性第一,美观性第二。B端导航图标更多是在基础造型上打磨,不需要加花里胡哨的渐变、投影,导航图标一般在24px-16px大小,太复杂反而看不清。在区分状态的时候可以考虑加点品牌色


3.空状态小插画

空状态插画是B端设计师少有能发挥自己绘画天赋小巧思的地方。

图形化状态语言,辅助用户理解内容。可以将产品机械苍白的文案设计表现的更加具有温度,具有引导性。让乏味的工作出现一些共情小彩蛋,有趣的插图动画可以缓解等待的焦虑。



4.登录注册页

纯色背景卡片式:简单大方更聚焦登录操作

插画背景:场景化展示产品的功能及亮点,让用户更有心理预期

几何图形背景:最后和品牌图形相关,加深用户对产品的品牌印象。

照片背景:相关场景或产品类型,具象图片信息更直观


5.圆角的大小

不同大小的圆角传达产品不同的气质,大圆角亲和、小圆角精致、中等圆角大众中庸。



6.优化信息层级

优化信息层级,区分信息主次可以使阅读更快,操作更快,界面更有节奏感。

这时候你就是那个考前画重点的老师

判断一个页面里最重要的是那些信息或操作,强化它!并弱化辅助信息;

判断一个模块里那些是重要信息,强化它!



6.新人需要避免的雷点:

  1. 追求炫酷的视觉效果舍弃操作效率。比如追波风满屏花里胡哨的卡片及面板,满屏大投影及高饱和色彩。对于B端界面来说信息噪音太多,反而干扰信息获取效率。


2.反常规用户习惯的操作。尊重用户习惯,不要为了个性化去尝试改变,不要妄图改变用户的操作和认知的惯性。惯性思维大于设计思维,曾经遇到过产品因为右手操作所以要把导航放在右边的离谱例子。


3.数量多,动静大的夸张的动效。B端与C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打扰。之前看过一个反面例子后台,在每一步操作后都出现大的场景动效鼓励完成,如果作为一个长期使用的工作者,我会觉得每次完成任务都需要等待动画完成可能只需要2-3s也很浪费我的时间。


4.新人建议多看Antdesign和Element等成熟的组件,创新类组件样式,最好和和开发商量是否能够实现。


5.在确定主要风格及2-5张主要页面后,就应该着手基础规范(色彩字体等,不然后面越做越乱)。


6.一段时间一个审美,同一界面中的元素风格不统一。


7.避免大面积使用高饱和高明度的色彩,及暧昧含糊的临近色彩。长时间使用眼睛会累,产生不耐烦焦躁的负面情绪。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:唐小葱
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


研究了上百套图标,总监却告诉我图标要这样画!

seo达人



01.图标是什么 

图片

要做好图标,首先我们要知道图标是什么?在一般认知里,图标可以定义为一种图形化的符号或标识,用于帮助我们理解某些复杂功能或操作,尤其在数字化领域里,可视化的图形符号,更利于高效的展示信息和引导人机操作交互。也有人称之为icon或eikan。

a

1.图标的发展史

图片

图标的历史可以上溯到人类文明发源伊始,最早的象形文字,岩洞壁画等都可以算作图标的一种,为我们后代研究人类文明产生了珍贵的历史意义。但今天我们研究的图标主要以计算机系统发明为分界线,看看这短短几十年间,图标是如何演化的。

图片

 80年代的初期图标还是黑白单色

图片

 90年代慢慢多了些色彩,形状也更丰富

图片

 到2000年后,随着显示技术的发展,图标也越来越形象

图片

 图为iOS1-8图标变化

从最早的Xerox Sta系统到最新的Mac os10,再到现在人手一台的移动智能机,每个阶段都拥有其独特的图标风格,2010年已经到了智能移动时代,拿最知名的iOS系统每个阶段升级,图标的变化来看,也历经了初期的拟物-扁平-微质感的好几个阶段。

图标作为UI必不可少的部分,能够使界面更加精致,今天也分享给大家一些大公司的设计规范,其中包括很多系统的图标规范和定义,帮助大家更好地参考和学习。

图片

w

02.  图标的分类 

图标因其良好的辨识性和无障碍沟通特性,在各种场景下被广泛应用,同样,因使用场景的不同,图标所代表的意义也不一样。

 

1.应用图标

图片

 iOS14桌面应用图标

a

应用图标指的是我们设备界面上的应用入口,通常具有较强的品牌特性,可能与logo一致或与其核心功能一致, 如instagram 就是一个简化的相机正视图,亚马逊则是一个购物车形象,国内也有不少产品直接使用了能够代表产品的文字,需要注意的是,界面图标必须遵循对应系统下的尺寸规范。

图片

 华为EMUI 10应用图标

d

2.功能图标

与应用图标不同的是,它主要作为界面中的功能入口,一般为简洁易辨识的符号,根据不同产品调性,图标风格也可以多种多样,并且不强制必须为标准形状,异形图标能让界面更为生动,整体风格的发挥也有了更多空间。

图片

d

3.辅助图标

辅助性图标通常存在于有较多长文字时,搭配作为辅助说明,在UI中,可能还具备一定情感化的作用,在提升用户接收信息效率的同时安抚用户情绪;所以整体可能需要具备更多细节,作为画面补充的一部分。

图片

 如:缺省图标

s

4.与logo的区别

虽然这两者特性极为相似,都是图形化的符号,但logo是为整体品牌服务的,具备其独一无二的专利特性,甚至可以是IP形象或文字;两者的关系可以理解为父子。

图片

 图中的图标就很好继承了logo的特征和风格

图片

 但有的也只是普通的界面辅助,风格和样式并不一致

a

03. 图标的绘制 

能够绘制出高质量的图标是每个UI设计师必备的能力,本次我们以功能图标为例,为大家展示具体的几个绘制步骤和要点,希望帮大家在细节上避开影响图 标精致度的一些小细节。

d

第一步:建立图标网格

图片

功能图标因形态结构各异,难免存在尺寸不一的情况,必须考虑其整体视觉的协调一致,最好的办法就是建立图标网格,也可以称为图标盒子,当图标形态分别为长、方、圆时,有一个合理的比例限制。

图片

 将常见图标形态约束在图标盒子内

当然,网格不是绝对的,要学会灵活运用,当与个别图标形态无法完匹配时,也不必拘泥,一切以达到视觉和谐为首要。我通常会在图标网格外围预留一个安全区域,可以规避切图出现不完整的情况。

a

第二步:具象功能

有了网格,第二步则需要我们根据功能,找到与之对应的实物形象;如笔记本是记录,电话是通话,时钟代表时间,日历代表日期等等。

图片

这些功能相对比较容易找到现实中的实物,如果是比较抽象的功能呢?就需要我们发散思维,找与之相近含义的事物。如隐私功能,隐私是没有实物的,但是我们可以通过“隐私”这个词延伸:不公开的、隐藏的、锁起来的、被保护的,继续根据这些词延展:就可能是密码、盾、锁、遮眼等等。

图片

时刻记住一点:用大众都能理解的物体形象去表达。如果用户看到某个图标过于复杂,需要反复思考它代表的含义,也无法预测点击后的结果,那这个图标就失去了提效的作用。

d

第三步:简化结构

有了功能的具体形象,下一步就是思考如何让图标变得更简洁易辨识。

图片

 毕加索《公牛》

图片

毕加索创作《公牛》时,从初稿到最终成品历经了11个版本,最后只用寥寥几条线来勾勒,但我们依然能一眼认出牛的形态。绘制图标也一样,需要我们思考如何省略无用细节,化繁为简,提取他们的主要特征。

f

第四步:善用布尔运算

有了简化的图标形象,我们接下去应该思考如何让图标变得更为规范耐看。

图片

 如桃心图标,就是两个简单圆角矩形组合而成

图片

 桃心图标,也可以做的更圆润

图片

 不同组合下的布尔运算,图标形态特征也会不一样

这一步的诀窍就是尽可能使用基础图形去组合拼贴,这样做出来的图标,尤其在适配不同尺寸大小切图时不易拉伸变形。

f

第五步:处理细节

统一性

图片

 风格:线性、面性统一

图片

 断点细节一致:平角、圆角

图片

 图标气质一致:是圆润还是尖锐硬朗

随着功能界面的不断复杂化,大家早已不满足于同一产品或同个界面中单一的使用面性或线性图标,而是搭配使用便于层级划分,故而这里只考虑在同一层级下图标的统一性。

视觉平衡

图片

如图,三角形置于中间位置时,视觉重量会偏向左边,在这个基础上,我们就需要做出适当调整,以达到视觉重量平衡。

一致的视角

图片

当你想让自己的图标变得更加出彩而采用了区别于正视图的结构,那也一定要确保至少在同等层级下,这些图标视角是一致的。

a

第六步:做出差异化

融入品牌DNA

图片

 韩国购物App 11 street,就很好的融合了品牌logo的箭头符号

功能图标因简洁通俗,比较容易出现市场同质化严重的现象,故而很多App选择在图标中融入品牌基因,不仅做出差异性,还能提升品牌调性。

跟随趋势创新

图片

图片

通过对图标风格质感的创新表达,让人眼前一亮。这种方式更多需要你了解当下的流行趋势和技法,根据产品的风格调性,对图标进行量身打造。

图标微动效

图片

随着5G时代来临,微动效也早就出现在了大众视野,基于图标的微动效表达,能让用户更快注意到某个功能并去点击它,如果你的动效还恰好有趣美观,更能让用户感到愉悦。比较常见的loading和tab切换都让我们有了很充足的发挥空间。

d

第七步:完善图标库

通常一个产品的功能图标会多达几十甚至几百个,如何保证这些图标的统一性需要提前去规划。绘制的最后一步,就是在完成一部分图标后,及时排列比对,确保整体视觉效果的统一;有条件的可以生成图标库,便于后续的团队协作。

图片

 Apple发布的SF Symbols中图标,就划分了9种宽度和3个比例尺寸

有了图标库后,协作设计师做到共用功能时可以直接调用;极大提高自己和团队的效率,并保持整体规范的一致。

a

04.最后 

图标绘制看似简单,要做好却并不容易;UI处处充满细节,想要自己的界面更加精致,就不要忽略每一个可以提升的点。希望今天的这篇文章能够帮到你。

最后给大家分享一些大公司的设计规范,其中包括很多系统的图标规范和定义,帮助大家更好地参考和学习,需要的话可以点个“在看”,添加叮当猫回复“图标”领取,已有叮当猫的无需重复添加。

图片



s

原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》研究了上百套图标,总监却告诉我图标要这样画!

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


作品集这样展示,秒出效果

seo达人

01. 3D素材 

图片

图片

图片

@CANAAN,作品集封面3D素材

 s

02. 样机素材 

图片

图片

图片

@嗡嗡嗡起,高质量的手持设备样机

f

03. 平面素材 

图片

图片

图片

@南风知我意,潮流高级全息海报模板31款

 g

04. 样机素材 

图片

图片

图片

@是莹莹啊,苹果13样机+高端场景样机合集+iPhone13样机

w

05. 3D素材 

图片

图片

图片

@落微,UI素材丨3d丨手势丨psd

w

06. 3D素材 

图片

图片

图片

@阿轩,11个3D图标+png+3个拍摄角度


原文地址:我们的设计日记(公众号)

作者:sky

转载请注明:学UI网》作品集这样展示,秒出效果

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



CRM系统:线索的获取和分配

涛涛

CRM代表了企业对客户的管理理念和运营方法,而对客户生命周期的管理也是大家非常关心的话题。本篇文章里,作者分别从客户画像、线索获取以及线索分配三个方面分析了售前的最重要步骤,一起来看看吧。


CRM代表了企业对客户的管理理念和运营方法,所以谈到CRM大家最关心的话题也就是对客户整个生命周期的管理,而在售前部分最重要的就是:线索的获取和分配。

一、客户画像

说到CRM客户画像是绕不过去的一个名词,客户画像是指公司客户的共性关键特征,如下图所示:

CRM系统:线索的获取和分配

vipkid为例,他的主要客户画像就是:一二线城市且孩子年龄为4—12岁区间的家长。

客户画像使用方法:

1)根据客户画像寻找渠道和方法获取销售线索

比如一家做英语培训的机构就可以联合钢琴培训机构联合做公开课,两家公司的客户画像相近,就可以互通客户达到共赢。

2)根据客户画像快速筛选线索,快速定位高质量线索

比如vipkid的电话销售人员了解到家长虽然有意愿让孩子学习英语,但是孩子年龄为2岁,没有达到客户画像的标准,则可以尽早放弃沟通下一个客户。

二、线索的获取

线索的获取不外乎两个部门:销售和市场。

1. 地推团队

一般TO B的公司的获客主要渠道为地推团队例如:

  • 2C流量+2B广告变现模式 如58同城房产业务、安居客
  • 多边平台+佣金抽成模式 如美团团购外卖业务、大众点评团购业务

这种公司会在每个城市设立分公司,培养大量的地推销售人员,并划分区域给到每个销售人员负责,销售人员就是通过扫街的方式获取及维护自己的客户。

2. 客户转介绍

一般TO C的公司的高质量获客渠道为客户转介绍例如:

  • 2C产供销模式 如VIPKID、火花思维、美术宝等在线教育公司
  • 2C免费+增值模式 如游戏软件王者荣耀、交友软件网易花田

这些公司会动用电销人员成单激励、用户转介绍活动激励等方式来促使客户完成转介绍行为如转发朋友圈、拉新注册、拉新购买等来获得转介绍线索。

3. 广告流量

通过投放广告(实体广告牌广告、电视广告、搜索网站关键词投放、大V软文)吸引用户进入到营销活动页或官网进行注册,从而收集到的线索。

4. 自媒体

通过内容产出如:

客户成功案例、系列录播课程、直播课程、行业解决方案、电子书、行业白皮书,发布到抖音、快手、公众号、头条、知乎、微博等平台上,获得客户认可并吸引客户持续关注。

5. 渠道商资源采买

从渠道商获取购买,但数据准确度往往很低,需要搭建数据清洗团队,清洗数据(确认客户信息正确并补全信息、确认客户需求存在)之后才能算线索并提供给到销售。

6. 商业合作&资源互换

通过企业与企业间的客户资源的互换,实现双方的共赢;建议找目标客户群重叠但又没有竞争的企业,以最小成本甚至0成本的方式合作,互补资源,实现双赢。

7. 市场活动

如行业会议、论坛峰会、交流活动、线下公开课、展会、促销活动等。

三、线索分配

线索分配是和销售模式息息相关的,主要的销售模式有三种:电话销售、地面销售、社群销售。

1. 电话销售

电话销售依赖于CRM系统分配leads,所以电销CRM可以从新leads转化到老客户续费等环节,做到对于销售的标准化精细化管理。

1)新分leads

首次分配:

业务增长时期分配策略模型:

这种分配模型是粗放式分配,优质和低值的leads混合随机分配给不同能力的销售,可能会有一些高质量的leads分配给低能力销售导致转化失败,但是也是因为低转化的销售有能接触到高质量leads的机会带来了工作的动力。

策略模型方案:

  • 转介绍leads分原CC
  • 优质leads按标分配CC
  • 一般质量leads均分CC
  • 支持管理者手动搬动leads

业务增速降缓&收缩时期分配模型:

业务增速降缓&收缩时期首要考虑的是降本提效,所以首要的会思考如果用更少的人干更多的事情、或是同样多的线索如何能转化更多,所以使用的策略会更激进一些,可能会导致转化低的销售长时间无法接触到高质量例子,工作积极性降低,从而流失速度增加。

策略模型方案:

  • 建立leads打分模型:按照司龄、转化分层
  • 建立销售能力打分模型:按照转化对各个渠道分层
  • 尝试将好的leads分配给好的销售
  • 全部改为系统自动分配

二次分配 :

  • 二次分配是一种对于销售的惩罚手段,主要出现在以下两种场景:
  • 超过规定时间线索没转化:掉落公海&二次分配
  • 超过规定时间销售没跟进 :二次分配

2)库存leads

激活线索:

库存leads即无法转化的销售线索经过公司多年的积累数量庞大,如果人工再次致电确认用户需求则很低效成功率也很低,方法一是有效识别,库中成交可能性更高的leads,由人工触达转化。

而这种方式就是通过推送(短信、邮件、公众号等渠道)运营活动激活客户,让客户主动再次咨询,系统ke’yi再次分配销售跟进或公海打标签方便销售主动捞取。

周期扫库:

库存leads即无法转化的销售线索经过公司多年的积累数量庞大,如果人工再次致电确认用户需求则很低效成功率也很低,方法二是通过系统功能提高触达效率降低人工售卖成本,周期性的把公海中的leads全部触达一遍,避免遗漏漏网之鱼。但缺点是需要严格制定外呼策略避免骚扰到客户。

1、预测式外呼:

系统代替人工外呼,呼通线路转接给人工沟通,节省人工外呼等待电话接通的时间浪费。

2、智能AI电话:

全部由机器人外呼及沟通,无人工介入,但往往只沟通确认客户购买意愿是否存在。

2. 地面销售

前面提到了一般TO B的公司的获客主要渠道为地推团队。这种公司会在每个城市设立分公司,培养大量的地推销售人员,并划分区域给到每个销售人员负责,这个销售人员就是通过扫街的方式获取及维护自己的客户。

所以会有个弊端,CRM无法成为销售获取线索的主要来源,所以CRM对于地面销售的管控程度比较低尤其在于新客户转化环节,一般销售都是在确定客户购买后才将客户信息录入到CRM中,所以地面销售CRM系统的销售管控环节主要在于客户的维护任务及续费任务的流程及任务管控中。

而监控方式从电销人员的电话沟通情况改到地面销售人员的地点定位打卡签到的方式。

地面销售的线索二次分配,不会像电话销售的那么灵活,一般是整个片区的商户,以片区为维度的重新分配销售。

3. 社群销售

社群销售是在线教育大班课常用的一种销售手段,也是线下奥数教育学而思培优使用过的一种比较成功的获客手段,社群主要是将一群有相似目的或需求的人聚集到一起,在群中沉浸式的接收你的观点,从而形成思维的共振而达到思想的高度统一对公司想传递的价值观的的认可及信任。

上文说到,社群销售主要是教育机构使用的销售手段,所以往往和体验课的班期有关,上同一期的体验课程的学生或者家长会被拉入同一个群中,这个群会有一个专门的销售负责。

所以社群的线索分配是和销售负责的班期排班直接关联的,除非整个班期重新销售排班一般不会更换销售。所以主要依赖于销售对于社群的维护,一般不进行二次分配。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理  作者:东悦思考笔记

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


如何把握好平面设计中的节奏感?

涛涛

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!

如何把握好平面设计中的节奏感?来看高手的分析!


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设  作者:美工美邦
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


JavaScript——异步操作以及Promise 的使用

前端达人

什么是异步?

异步与同步是相反的

简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

什么时候用异步编程

在前端编程中(甚至后端有时也是这样),我们在处理一些简短、快速的操作时,例如计算 1 + 1 的结果,往往在主线程中就可以完成。主线程作为一个线程,不能够同时接受多方面的请求。所以,当一个事件没有结束时,界面将无法处理其他请求。

现在有一个按钮,如果我们设置它的 onclick 事件为一个死循环,那么当这个按钮按下,整个网页将失去响应。

为了解决类似这种问题,JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了,他自己会善始善终。

例如:


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>回调</title>
  8. </head>
  9. <body>
  10. <button>点击</button>
  11. <p></p>
  12. <script>
  13. var btn = document.querySelector('button');
  14. function fn1(){
  15. btn.onclick = function(){
  16. document.querySelector('p').innerHTML = '我出现了!'
  17. }
  18. }
  19. setTimeout(fn1,1000)
  20. </script>
  21. </body>
  22. </html>

 

 它的第一个参数是个回调函数,第二个参数是毫秒数,这个函数执行之后会产生一个子线程,子线程会等待 1 秒,然后执行回调函数 "fn1",在命令行输出 "我出现了!"。

Promise 的使用

语法格式:


  1. new Promise(function (resolve, reject) {
  2. console.log("Run");
  3. });

resolve和reject是参数 

再看这个例子:


  1. new Promise(function (resolve, reject) {
  2. var a = 0;
  3. var b = 1;
  4. if (b == 0) reject("Divide zero");
  5. else resolve(a / b);
  6. }).then(function (value) {
  7. console.log("a / b = " + value);
  8. }).catch(function (err) {
  9. console.log(err);
  10. }).finally(function () {
  11. console.log("End");
  12. });

这段打印结果为:

.then() .catch() 和 .finally() 三个方法

这三个方法的参数都是一个函数,

.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列,

.catch() 则是设定 Promise 的异常处理序列,

.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行,有任何异常都会直接跳到 catch 序列:


  1. new Promise(function (resolve, reject) {
  2. console.log(1111);
  3. resolve(2222);
  4. }).then(function (value) {
  5. console.log(value);
  6. return 3333;
  7. }).then(function (value) {
  8. console.log(value);
  9. throw "An error";
  10. }).catch(function (err) {
  11. console.log(err);
  12. });

打印结果为:

1111
2222
3333
An error

resolve() 中可以放置一个参数用于向下一个 then 传递一个值,then 中的函数也可以返回一个值传递给 then。但是,如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作,这一点从刚才的计时器的例子中可以看出来。

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

但是请注意以下两点:

  • resolve 和 reject 的作用域只有起始函数,不包括 then 以及其他序列;
  • resolve 和 reject 并不能够使起始函数停止运行,别忘了 return。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

日历

链接

个人资料

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

存档