首页

B端系统配置功能设计的思考

雪涛

在大型B端产品中,不可避免的出现各种配置,配置如同一个个控制阀,决定着业务的走向,并实现saas产品的千人千面,以满足不同客户的诉求,适应不同行业的业务场景。但在随着产品的发展,配置项也越来越多,逐渐变的不可设计与维护。给什么做的配置?配置是如何生效的?好的配置具有什么特点?如何确定配置的维度?针对这些问题,笔者就以自身的工作经验,来给大家说一下如何进行复杂B端系统的配置功能设计。

一、给什么在做配置?

在开始配置之前,我们要想清楚,我们到底在为什么在做配置。

软件系统是现实世界的抽象,在《THINK IN UML》一书中,表述了现实运行的机制:人驱动系统、事体现过程、物记录结果、规则控制运行。由于我们不可能利用一套固定的规则满足所有客户的业务场景,故我们需要支持规则可调整,调整规则的功能,就是配置功能。

我们习惯用用例(use case)的方法来抽象现实世界的需求,一个完整的用例定义由参与者、前置条件、场景、后置条件构成,其中:

  • 参与者通过系统输入物与系统交互,可以是输入的一段指令,一笔订单,一个商品信息等;
  • 前置条件:发生这个用例的前提条件,即输入物满足什么条件才可以发生这个用例
  • 后置条件:发生这个用例之后的结果,会产生哪些影响

那么当我们翻译成UML的语言时,配置就是定义前置条件和后置条件的系统功能。

那么当我们判断输入物满足什么条件时,还是分两类:

  • 当输入物存在时,即满足条件。如:当OMS系统发出打印指令时,即调用配置中指定的打印机进行打印;
  • 当输入物的属性和预设规则满足时,即满足条件。如:当ERP推送商品价格数据到OMS中,由于商品价格数据这一个输入物的所属类别分类属性,满足预设规则1,则自动加价5%;

当我们分析会产生哪些影响时,我们可以分三类:

  • 边界类:影响操作界面是否可查看可操作,或者接口是否可用。权限控制RBAC设计模型和接口的订阅配置,就是典型的对边界类造成影响的配置设计;
  • 实体类:影响数据库表,文档或其他具有持久化特征的数据的格式、内容;如OMS系统设计中的审单功能中,会根据配置在订单上加上赠品商品行;
  • 控制类:影响控制程序,工作流,算法体是否起作用;如OMS系统中,订单会根据配置来决定是否直接跳转到某个状态,如退单长时间未审核,则自动同意的配置

在复杂的B端系统中,我们往往发现一个业务无法用一个用例就描述清楚,导致配置设计还是无法进行,如这个业务场景:

ERP将商品资料同步到OMS,OMS加工后,同步至各商城。

由于用例体现了参与者的愿望,用例的执行结果应对参与者来说是可观测和有意义的,那么显然,同步商品资料到各商城,对于业务的起点ERP来说,并不是其愿望,也不可观测,但是不存在没有参与者的用例,用例不应该自动启动。由于参与者可以是非人的,换句话说,参与者可以是用户的一个指令,或者是上游系统的通知,故我们往往将用例根据参与者的不同进行拆分。以笔者参与的OMS产品为例,我们根据长期的实践,习惯根据参与者的不同,划分为三种不同的用例。不同种类的用例,配置一般影响的类别也不一样:

  • 输入用例:比如上游订单系统同步订单至OMS、ERP系统同步商品资料至OMS。配置一般影响边界类;
  • 处理用例:比如订单打印、订单拆单合单、订单履约、商品价格加价处理。配置一般影响控制类;
  • 输出用例:比如OMS输出订单发货清单至ERP、OMS系统同步商品价格至上游平台。配置一般影响实体类;

我们可以整理出下图:

二、配置设计要求

上文我们了解了在给什么在做配置,那么一个好的配置应该满足什么条件呢?

第一:配置逻辑自洽

1、根据输入物属性识配自己的规则时,规则之间不能相互冲突;

我们拿商品价格策略配置举例:

当我们识别商品的价格属性去适配规则时,我们应使用MECE分析法,按照完全穷尽,相互独立的原则,将属性的枚举值整理出来,当无法完全穷尽时,应设置默认规则;

2、配置与配置之间不能互相冲突;

我们仍拿商品价格策略配置举例:通过识别商品的价格、所属平台、所属门店等属性去适配规则时,可能会出现同一个商品同时满足多个配置的情况;

这种情况下,我们需要先判断多个配置是否可以叠加:

可以叠加:当对实体类进行配置设计时,一般策略是可以叠加的。在这种情况下,可以增加配置叠加规则,如设置上限\下限:加价策略都是以输入的原价为基准进行加价,累次加价不能超过原价的8%

不可以叠加:需要增加策略冲突时的应用规则

  • 应用最新的配置:适用最后更新的配置;
  • 指定策略优先级:为配置分配优先级,在配置不可叠加时,选择优先级最高的生效;

第二:配置变更有迹可循:重要的业务配置,需要提供配置变更日志查询,记录配置修改人与修改时间

第三:配置影响的前后数据对应:如果配置影响的是实体类的修改,则应在数据库中记录时,需记录数据原值和配置影响后的数据,不应在同一个字段,用配置影响后的数据直接覆盖原数据。实体类的新增则不需要;

第四:高拓展性:系统的能力建设是持续的,配置的设计可以延续标准的工作流程不断拓展新增;

第五:配置规则可理解:需要提供必要的功能指引,配置规则的入口和操作方式需要符合用户的认知;

第六:不同维度的继承关系清晰:在不同维度设计同一个配置时,需要理清楚是否要继承父辈维度的配置,一般要支持可配置是否要继承继承父辈维度的配置,以免造成修改此维度的配置后, 又因为继承了父辈维度的配置,导致修改配置不生效;

三、确定配置管理的维度

我们发现,存在配置需要对输入物的多个属性进行识别以决定应用哪个规则的情况,那么我们配置的维度如何设计呢?

当我们只有一项配置时,我们当然可以如下设计:

但是如果我们每次新增一个配置,就长出一个新页面,很快就会发现:

用户操作成本高,需要从大量的配置中,找到对应的配置进行操作;

配置设计拓展困难,每次新增配置,就要做一个新的页面;

这时,我们可以查看一下系统的领域模型,找到输入物的共同属性,来组织配置功能的架构:

这时我们发现,虽然输入物繁多,业务场景各不相同,但是他们都有一个共同的父类:渠道店铺。如果此时,渠道店铺作为输入物的一个属性,参与配置规则生效的匹配,则可以将渠道店铺这个属性抽离出来,作为配置管理的维度,如:

这样做的好处是,用户可以在一个页面,完成多个配置,而不用不停的切换页面。

我们也可以看到,渠道店铺可以继承渠道、渠道商家、商家、店铺的配置,我们可以根据真实的业务诉求,以尽量减轻用户配置负担为目标,灵活的选择配置的对象。

当某个用户在配置时,一个属性不同的枚举值对应的规则一样,例如期望所有美团渠道的店铺都适用自动打印配置时,我们到最小的配置维度【渠道店铺】去一个一个配置,无疑还是增加了用户的操作成本。这时我们就可以考虑将其父类作为配置的维度,子类继承父类的配置规则。

四、配置的入口怎么设置

确认配置的入口,我们一般这么做:

STEP1: 根据配置操作人确认在哪个系统上做配置;

STEP2: 根据业务用例上的参与者划分不同的配置模块;

STEP3: 根据配置维度,聚合配置功能;

STEP4: 易用性改造

以下为笔者负责的OMS系统中配置功能的统计(数据已脱敏):

关于易用性改造,我们一般做以下事情:

在业务或数据相关页展示配置入口;

利用接近原则,在业务或数据相关页展示配置入口。利用接近原则是一个心理学名词,指对于彼此接近的事物,人们总会下意识地将他们建立某种关联性,并视为一个整体去看待。这么设计可以减轻用户的认知成本。例如:

将业务流程中配置形成SOP;

如一个商家的系统进行初始化时,需要进行履约相关配置、库存价格策略配置、前台作业系统配置等,如果一个一个去找相关的配置,则学习成本较高,容易出现配置遗漏等情况,那么我们一般将业务流程抽象为一个SOP,在SOP中,展示对应配置的入口。例如:

3、支持查询配置

提供全局性的查询功能,支持查询对应的配置。例如:

五、示例:配置设计的流程

这天,运营给我反馈了一个问题,希望可以新增订单自动打印的功能,以支持OMS系统在多个业务节点下,可自动打印小票,而不用店员再去手动点击,而且要可以控制预约单在预约送达时间前1小时打印,由于门店使用的打印机型号不同,还要支持为不同的打印机配置不同的打印模板。

我识别到此需求后,我按照以下工作流程,进行了配置的梳理:

STEP1: 识别参与者,抽象用例:抽象出用例,才能拆分配置功能。强行在一个配置里,将所有业务规则都体现,是不现实的;

STEP2: 确定要配置的内容,确定配置的维度;

STEP3:根据配置的操作人和配置的维度,确认配置的入口;

最终可以整理出这个表格,接下来我们就可以根据这个表格、进一步梳理业务流程图、整理原型、撰写PRD了。

六、结语

配置设计纷繁复杂,今天我以实际的工作经验,给大家介绍了我对B端配置设计的一些思考,希望可以给大家一些思路,并且引导大家思考功能设计背后的逻辑,权当抛砖引玉吧,毕竟抄竞品简单,但是竞品因何发展成这个样子,其中的逻辑判断,与设计权衡,才是我们应该了解的。

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

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

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

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



据分析体系构成框架

雪涛

数据对于产品的发展起着决定性的指导作用,那么公司在运营的过程中具体需要一个什么样的数据来支撑服务呢?本文作者列举了产品经理需要了解的数据分析体系,一起来看看吧。

本文来自于我的新书《高阶产品经理必修课》摘录。

一、为什么需要数据分析体系

在很多不成熟的公司中,虽然也有使用数据去验证产品的思路,但是他们在实际工作中往往是这样取用数据的:

产品部同事找到数据分析师,问他昨天刚上线的版本用户点击率是多少。

运营部同事找到数据分析师,问他前两天上线的拉新活动是否带来了用户量的增加。

领导找到数据分析师,问他这两天的订单量是否有所增长,上月交易额环比增长是多少。

可见,各个岗位都会有自己的数据需求,所以数据分析师只能逐个地进行数据计算。由于人力资源有限,数据分析师往往无法及时反馈所有的数据需求,这将会导致一些运营活动或产品规划错过最佳的时机。例如,在“双11”前夕想要准备“双11”促销活动,却迟迟拿不到过往的运营活动数据。

正是基于这样或那样的原因,很多企业演化出了一类数据产品——数据仪表盘,如图1所示。

▲图1 数据仪表盘

数据仪表盘就是将各个数据需求方常关注的数据汇总在一张报表中,这样大家可以在这里统一看到整个产品的用户数、交易数等的变化,能在一定程度上满足大家对数据的需求。

但是随之而来的新问题如下:

产品部的同事抱怨:虽然看到昨天新上的版本中用户转化率下跌了,但是根本看不出来原因是什么,说不定是运营部的活动导致的。

运营部的同事抱怨:我虽然看到了拉新数,但我有三个用户拉新渠道,到底哪个拉新渠道的拉新能力最强,带来的用户质量最高呢?

面对这样的进阶需求,就需要一套完整的数据分析体系来做支撑,进而来帮助我们掌握数据变化情况并快速定位变化背后的原因。

二、数据分析体系概念的常见误区

一提到数据分析体系,常见的一个认知误区就是将数据分析体系等同于单一的某一个数据分析产品,如活动运营监控平台、用户画像平台等。

其实这里最大的错误就是将一个体系割裂开来,只看到了承载数据的产品而没有重点关注使用者的使用方法,就好像认为数据分析一定要有一把“利刃”,但是却不去关心舞剑者的功力一样。

最早提出这一认知的是钱学森先生,他在系统工程学中提出了软系统概念:

任意一个体系要想发挥正确价值,必须通过产品与使用者这两部分共同协作,这两者合二为一称为软系统。

所以数据分析体系的正确定义应该是:

数据分析体系通常由数据使用者的分析模型和数据分析平台这两部分构成。

这也告诉我们在数据分析学习与搭建数据分析体系的过程中,掌握使用数据的方法,方能以正确的方法去解读数据。但在部分公司的运营过程中,往往忽视了这一点,导致搭建出的完整数据分析平台无人使用。

确切地说,是大家没有以正确的思维或方式去使用,还是以老式的思维使用新的系统,并没有在思维与认知上进行升级,从而无法发挥其应有的价值。这就好比我们给数据使用者一辆汽车,但他们还是在寻找缰绳以期驾驶汽车。

这时数据产品经理就应该化身企业内部的数据分析咨询师,帮助他们看懂数据背后所反应的价值。所以数据产品经理在一家公司中应该有如图2所示的双重身份。

▲图2 数据产品经理的双重身份

三、数据分析体系构成框架

搞清楚了数据分析体系的定义,接下来就是了解如何才能搭建一个完整的数据分析体系。

笔者曾看到部分数据产品经理候选人的简历中经常会写到自己精通数据分析框架的搭建。而当面试中被问到他们的数据分析体系究竟要怎么落地时,他们给出的回答却是针对DAU(Daily Active User,日活跃用户数量)、留存率等进行管理,但是数据分析体系中的平台建设,就仅仅是对这几个指标的管理吗?那么请问,当遇到了以下场景时,这几个指标要怎么解决我们的问题呢?

场景1:某天某电商出现了GMV(成交总额)下降,此时应该根据哪一个指标解决问题?

场景2:某公司拥有3条产品线,A产品线中又细分为商品运营、活动运营等,3条产品线的若干运营团队都看同一套指标体系吗?

坦白地说,单看孤零零的某个或者某些指标是无法解决问题的,此时就需要依靠数据分析框架来解决问题了。

由前面的数据分析体系可知,数据分析体系落地涉及两个维度。我在《高阶产品经理必修课》书中为大家介绍了两个维度来看看数据分析体系在工作场景中是如何落地的。

维度1:通用数据分析模型

以下是实现通用数据分析模型的方法。

设置目标:确定当下业务中你的目标及完成现状。

问题假说:穷举现状是由哪些问题导致的。

数据证明:通过数据来证明该问题会导致怎样的结果。

数据分析:分析该问题的成因并形成解决方案。

维度2:数据分析平台

在数据分析体系中,数据分析平台的构成包含三大核心要素,分别是北极星指标、数据建模和事件分析。

数据分析平台定义中各要素的具体解析如下所示。

北极星指标:每个阶段针对具体业务领域确立的商业/业务目标

数据建模(又称指标体系):DAU、GMV、留存率、订单量等

事件分析:漏斗模型、海盗模型、杜邦分析等

注意:北极星指标(North Star Metric)又叫作OMTM(One metric that matters),它是第一重要指标,为产品现阶段最为关键的指标。之所以叫北极星指标,是因为就像北极星一样,该指标可以指引全公司所有人员向着同一个方向迈进,是全公司统一的指标。

数据分析体系其实就是通过一系列的方法量化特定的业务,因为我们如果无法量化一个事物,那么本质上就无法衡量它的好坏,也就无法定位业务发展中的症结所在。因此好的数据分析框架就是在告诉我们:当下的整体业务是什么样?为什么会这样?应该怎么办?

回顾前面面试者所说的那几个指标,我们可以发现其根本无法清晰地反映业务上的这三个问题。

当然,这里只介绍了数据分析体系的宏观框架,还未涉及具体的数据分析体系搭建过程,在数据分析实战中还会涉及相应的方法论。

在我们知道了指标体系与其对应的作用后,接下来就要来学习如何为自身企业业务量身打造一套数据指标体系了。

要想搭建一套完整的指标体系,除了对业务有非常熟悉的敏感度之外,拥有一套正确的建设方法论也是必不可少的。

这里我直接给出一个标准的指标体系的建立方法,共分如下4步:

1)确定数据分析目标。

2)纵向指标维度定义(层级设计)。

3)横向指标维度定义(指标填空)。这其中,又分为自上而下探寻(业务域驱动指标定义)和自下而上探寻(功能逆推指标定义)。

4)各维度指标项定义。

文章来源:人人都是产品经理   作者:三爷爷

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

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

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



用户规模测算: 为用户增长设立目标

seo达人



通过问题定义、拆分成计算公式、公式中的每个指标可被量化赋值:

  1. 自上而下法,也被称之为「从供应端出发」,从产能方面,比较适合供给端存在瓶颈,供<求,例如下雨天不好打车,用户需求远远高于司机供给,只能通过司机能提供多少供给去测算单量。
  2. 自下而上法,也被称之为「从需求端出发」,从用户需求方面,比较适合供给端能满足用户需求的情况,供>求。

按照这类方法的特点是:

  1. 偏于宏观方面的估计;
  2. 测算方法相对成熟;
  3. 测算速度比较快,测算精度上有待不足。

测算精度的问题主要是基于每一步计算过程都是数量级的估算,导致颗粒度比较粗,但企业中一般存在相对精确的数据,因此可以使用市场规模测算的方法做出相对精确的测算,本文着重介绍市场规模测算中的自下而上法在企业中的应用。

 

Chapter One .
用户规模测算的使用场景?

对于公司来讲,产品上线之后,通常需要设立用户增长目标,设置过高的目标往往难以达成,过低的目标通常过于容易达成,进行用户规模测算可以为用户增长提供适当的参考范围。

  1. 对于不同的产品阶段都可以使用,比较推荐新产品上线阶段,这时候往往还没有那么快去设立增长目标,这时候业务方对于业务增长的信息较为模糊,通过用户规模测算可以设置一个较为清晰的目标和数量级。
  2. 在制定年度规划阶段,对于未来的增长目标不确定,可以通过此确定量级。

 

Chapter Two .
为什么不直接用数据库里面的数据去预测?

这个问题确实值得被考虑,而且在大数据分析领域中,也有各种模型预测,为什么不用数据分析模型去进行,而使用调研去获得相应的数据,如果数据层面有相应的行为数据可以进行相对准确地预测,则也可以数据模型预测,比如电商、快销品等。

实际上,除了行为数据之外,还有用户态度数据,比如需求情况、购买意愿、购买偏好等,这些很有可能无法通过数据库数据得到,因此可以通过问卷进行推算。

 

Chapter Three .
测算的流程是怎样的呢?

图片

先来划分一下市场:

  • 潜在市场:这个潜在的需求有多大,
  • 可服务市场:有多少需求已经被满足了,满足需求的形式不限。
  • 可获得市场:有多少需求被我们满足了。
  • 独占市场:有多少需求是别人无法满足的,只使用我们去满足的。

图片

如何去获得相应数据呢?

我们通过问卷抽样,来确定每个切分市场所代表的部分,然后按照问卷抽样推算总体的情况。

这个总体可以分成:域内总体和域外总体,总体由用户导流来决定,比如如果是一个新产品的孵化,一般会从域内先去导流,通过域内的流量能做前期的产品价值点验证,再逐步拓展。如果是领域有明显差别,需要从域外导流,那么后续的用户增长目标大概率由域外向域内的流量或者是线索。

 

第一步:通过问卷得到需求和使用数据

根据目标设计问卷问题,在总体用户中进行问卷投放,投放问卷得到相应占比。

图片

 

第二步:获得总体大盘的相应数据

如果是域内导流的产品,则总体数据既是大盘数据(特别地:抽样期间的大盘数据);如果是域外导流的产品,则总体数量可以选择市场占有率计算。市场占有率的计算方式,可以去第三方平台投递问卷,经过计算得到相应的数据。

 

第三步:计算产品数据

根据总体大盘数据和问卷相关比例,计算产品日活(highcase~lowcase)

  • highcase,属于最大需求量
  • basecase,属于某产品满足需求的情况,可以作为基准线,basecase可以
  • lowcase,属于某产品优先满足需求的情况,独占市场的份额

图片

 

第四步:计算细分需求量、使用情况等

除了日活、月活、销量等数据,还可以计算细分数据,比如行业、职业、会员等,可以采取同样的思路进行计算,为细分领域的拓展提供思路。在这里需要注意的是也需要考虑大盘中的量,最终的需求量、使用量是有总体大盘的数量、针对该产品的需求量来决定的。

需求占比=所在总体中的细分领域用户规模比例*细分领域有需求的用户占比。

 

Chapter Four .
案例

我们通过问卷获得了以下的数据:

图片

图片

看到最后,大家会不会好奇?

图片

 

原文链接:酷家乐用户体验设计(公众号)

作者:鱼日

转载请注明:学UI网》用户规模测算: 为用户增长设立目标

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

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

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

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


如何系统化的思考设计改版?

seo达人


1.为什么要改版?

如果你已经开始工作了,那么对于设计改版你应该不陌生。改版目的是为了优化产品体验,增加品牌粘性,提升数据转化。

一般情况下,产品在一年中至少会有一次大改版。其他情况下不会特别大的变动,毕竟每次改版都是会影响数据的变化,领导也不敢随便冒险。

那么到底什么情况下会改版?下面看一张图,就一目了然。

图片

从上图看出,通常在这些条件下,公司业务层、用研侧、设计侧驱动、年久未迭代、产品需求出发,企业基本就会做设计改版。

这里简要说下用研报告,用研团队和设计配合完成一份研究报告。那么这份报告里面就会有用户对产品主观评价,和测试过程中发现的一些体验问题或者产品问题,这些关键结论可作为设计改版的依据。

如果你在的团队有会每年都去改版,那么恭喜你,要好好把握每次机会,改版最能锻炼设计师的时候,也是设计师价值体现,平时小迭代版本真的就像小修小补一样。

 

2.改版中常出现的问题

  • 目标不清晰或者说不知道如何推导

在启动改版过程中,很多设计师不清晰设计目标,要达成什么要的效果。从大家作品集逻辑推导中就能看出,比如,很多设计师的目标关键词常出现的情况是:简洁、清晰、高级等等,我们可以想象下这样的词汇,是不是对任何产品都能用,没有体现出产品要真正解决的问题。

那么对于设计目标来说,我们应该从哪几个维度思考?

图片

在一般情况下,可从以上四个大维度去挖掘设计目标。设计师首先就需要对每个目标充分理解,最好能和老板、产品、领导对齐各方向目标后,开始去拆解可量化的设计目标。

这里补充说明下,如果只是单纯的视觉层面的改版,是很难得到多方协同支持,而且价值意义不是很大。所以,改版一定要挖掘出对产品产生明显影响的问题。

  • 不知所云的用户画像

在包装过程中,如果你只懂皮毛的用户画像,还是尽量不要把用户画像东西放进去,没有多大意义。放进去反让人觉得你是套模板,大家可以看看大厂公众号中改版文章,几乎很少看到用户画像。

那么用户画像一般什么情况下会出现?比如是0~1设计启动,这时候是需要细分人群定位,但是在设计侧角度来说,建议别放,除非你对这块非常懂。

 

3.设计改版流程

虽然网上流传出很多各种经典设计思维模型,比如斯坦福大学设计学院设计流程、尼尔森诺曼集团设计流程等,这些都大同小异。在真正做的过程中,还会有很多问题出现,我们还需从实际情况出发,遇到问题解问题。

图片

上图就是一个大致的改版设计方法,从洞察问题、目标确定、发散收拢、方案探索、结果汇报、推动落地等6个步骤,每个步骤都有很多事情要做,所以设计改版真的是一个很庞大的工程。

除了我们日常工作中这样去推进,在包装作品集思路时,也是可以使用这样的流程去思考,只是可以去掉最后两个步骤。

 

4.写在最后

前面有说到,我们真正在改版过程中可能并没有很顺,会出现很多突发状况,这也是考验设计师是否会灵活变通。最重要的一点是在启动项目的时候,不要单点去看产品的问题,最好能系统的思考和业务方对齐关键目标,找准发力点,循序渐进,这样也是为了减少设计过程中的返工问题,或者考虑不周的情况,不然会有失专业水准。

设计师路还很长,我们都需要在过程中学习成长,通过实战提高思维应变和设计能力,通过设计驱动价值体现。

 

原文地址:功夫UX(公众号)
作者: Tony
转载请注明:学UI网》如何系统化的思考设计改版?

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

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

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

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

用例驱动设计,让你的设计更严谨!

seo达人



图片

复杂的AutoCAD与Inventor工具

 

用例(Use Case)的概念早在1986年就已被提出,它是需求分析的好帮手,可有效的划定范围、锚定用户、区分关系、定义价值,通过不同颗粒度的抽象层次,不断瓦解复杂系统,使设计和管理有序化。本文基于早已发展成熟的用例驱动设计理念,试图从中找到一条适合体验设计师介入的小径,来应对复杂业务的产品设计。(备注:用例、参与者、UML等详细的内容不在阐述范围内,本文仅探索一条可行的方式。)

 

1、什么是用例

定义:参与者与系统交互的一系列活动的集合。

可以发现,一个用例以一组活动集合来表现,集合中包含两个角色,参与者、系统。参与者是“活的”(不一定是人类),TA的诉求驱动了这一系列活动,此诉求即用例的核心,也是价值的体现。一个参与者可以对系统有多个诉求,详见如下案例:

图片

由用例驱动的体验设计过程,着重关注对“行为”的设计。与系统的互动“行为”被协调的、有组织的设计后,为界面表现设计建立坚实基础,避免因逻辑的变更使界面设计反复推倒重来。试图通过在界面设计的过程中寻找线索和灵感,反向的去设计背后逻辑是本末倒置的,个中原由在于我们更易于把控具象的视觉感知,较难把控抽象的行为。

 

2、系统用例和业务用例的关系

在划分用例前,有必要澄清系统用例和业务用例的关系。

业务用例是从客户当前的业务逻辑中抽象出的用例,与数字产品无关,即便没有该产品服务,客户的业务体系也可以流转。新的产品服务实际上是对传统业务体系的替换关系,而系统用例就是从该产品服务中抽象出来的,图示业务侧和产品侧的对接关系:

图片

 

用例驱动设计的案例:

总述:

为清晰阐释我们是如何利用”用例“这个概念作为切入口,最终一步步驱动、解构、细化体验设计的,下面将完整展示一个注册登陆试用产品的案例进行讲解,本案例为虚拟案例,方便设计过程的串连。

图片

 

step1:  整理故事与确定用例

故事中包含了用户的行为及其所处情境,将更易于被理解、共情和传递,故事情节的内在联系,上下游的完整性也直指价值的辐射范畴。在开始设计前,我们能从各个渠道收集到相关、相似的诉求,整合这些信息后以“故事”的方式表达出来,非常重要。

本案例的注册登陆试用故事从”企业“、”用户“两个维度进行描述,能确保在用户诉求达成的情况下,也能达成商业诉求,和谐统一的以产品服务提供出去。

 

1.1 企业故事:

公司统一了Platform账号体系,在保证多设备产品端的一键畅通体验的同时,收集用户行为信息,以提供更精准的售后服务。同时与授权中心合作,通过网上商城定期开展活动,以下放试用天数,获得试用授权。产品经理与销售部门达成持续的合作,通过试用用户的手机号进行电话回访,提高购买转化率。同时软件的设计应能最大限度的提升客户自发购买行为,需要在何时的时机,合适的位置提供购买入口。

获取用例的方式:

  • sys_运营人员→获取用户信息
  • sys_运营人员→开展活动

 

1.2 用户故事

新家装项目开展在即,大量的图纸设计使张经理感到困难。在受到同行推荐的Platform出图软件后,回到办公室,通过Platform官网找到软件信息,并利用现场wifi网络下载安装;迫不及待的启动软件,虽没有购买,但软件提供了试用入口,张经理提交Platform账号后开始试用软件。连续使用了两天,后面每次自动登录提高了试用的体验过程,产品一键自动化生成图纸初步解决了张经理的烦恼。经过和集团沟通后,张经理在界面上找到购买入口,并购买软件正版。他将软件推荐给朋友刘经理,他是Platform造价产品的老用户,且已购买过Platform加密锁,启动软件后,界面自动显示为正式版, 不用登录试用让张经理艳羡不已。

获取用例的方式:

  • sys_采购经理→试用软件

 

step2: 快速描摹流程图

用户和企业的“故事”是一种情节式的、场景式的描述,它易于想象、理解和整合。但为了更清晰的辅助设计,我们需要根据描述,进一步梳理出流程关系,将其具象化。在绘制流程图时,可不用关注角色的职责关系,旨在快速描摹出所涉及到几个业务点的关系,将企业和客户的诉求点包含进去,并在反复确认过程中思考、推敲,大体设计出其中的基本结构。过程中,可能需要补足新的故事描绘,或对既有的故事描述进行修正,以达成一个诉求与技术实现的平衡点。

图片

 

step3: 泳道角色化

理清核心业务流程关系后,将进一步绘制其角色泳道图,每个泳道下对应参与的角色。泳道图仍然是分析过程的一步,它在这里的意义是可清晰的观察到各个模块间的协作互动,是细化过程,各个“对象”的职责不同,他们之间的交互关系存在进一步优化的可能,以保证整体行为的和谐,减低系统冗余。

图片

 

step4: 业务实体的获取

事实上,带有角色的泳道图仅是在很粗的层面描述了业务所参与的对象,是单纯从流程图层面归纳出来的“对象角色”。在面对详细的功能分析时略显不足,可能缺失实际参与的“对象角色”,如不分析出来,将导致用户与系统的交互”行为“的缺失。我们需要进一步挖掘其中涉及的各个参与“角色”,完整的描绘出其交互行为过程,才能对该封闭系统做完整的设计。

从哪里可以获取到全部业务实体呢?当然还是故事。业务实体天然的包含在用户或企业故事中,才得以支撑故事的完整发生,这与故事描述的程度有关,我们第一步就需要填充完整的故事。

备注:什么是业务实体——用于达成业务目标的实体与过程中的记录信息。诸如“点餐”用例中的“打印单”就是一个实体,打印单上的手机号是记录信息。外卖员之所以能将外卖送到你的手上是通过打印单,查看上面的手机号和地址才能找到你。

下面是结合”故事“,进一步获取业务实体的案例,把所涉的可见的业务实体标识出来。

 

4.1 企业故事:

公司统一了Platform账号体系,在保证多设备产品端的一键畅通体验的同时,收集用户行为信息,以提供更精准的售后服务。同时与授权中心合作,通过网上商城定期开展活动,以下放试用天数,获得试用授权。产品经理与销售部门达成持续的合作,通过试用用户的手机号进行电话回访,提高购买转化率。同时软件的设计应能最大限度的提升客户自发购买行为,需要在何时的时机,合适的位置提供购买入口。

图片

 

4.2 用户故事:

新家装项目开展在即,大量的图纸设计使张经理感到困难。在受到同行推荐的Platform出图软件后,回到办公室,通过Platform官网找到软件信息,并利用现场wifi网络下载安装;迫不及待的启动软件,虽没有购买,但软件提供了试用入口,张经理提交Platform账号后开始试用软件。连续使用了两天,后面每次自动登录提高了试用的体验过程,产品一键自动化生成图纸初步解决了张经理的烦恼。经过和集团沟通后,张经理在界面上找到购买入口,并购买软件正版。他将软件推荐给朋友刘经理,他是Platform产品的老用户,且已购买过Platform加密锁,启动软件后,界面自动显示为正式版, 不用登录试用让张经理艳羡不已。

图片

 

step5: 时序图的绘制

接下来,我们将进行最重要的一步:基于已明确的核心业务流程和已拆分出的业务实体,构造出一整套完整的系统行为。将使用到UML语言的重要工具——时序图。时序图能天然的表达多个对象间的复杂行为关系,在产品研发领域应用广泛。(时序图的绘制有一整套完整的语法,本文不讲解该部分内容)时序图的“对象对话”形式,原生的契合了“交互”这一概念,游戏大师Chris Crawford和设计专家Jon Kolko都对此有所定义:

发生在两个或多个活跃主体之间的循环过程,各方在此过程中交替地倾听、思考和发言,形成某种形式的对话(conversation)”

——《Chris Crawford on Interactive Storytelling, 2nd Edition》

“所谓交互设计,是指在人与产品、服务或系统之间创建一系列对话(dialogue)”

——《houghts on Interaction Design, Second Edition》

时序图重点强调了“行为”的发生与互动,使整体目标达成。一系列有边界的行为活动合集,就组成一个完成的、有意义的“用例”。让我们再次回到开头的“用例”上来,并将该用例系统化。

用例:

  • sys_运营人员→获取用户信息
  • sys_客户人员→试用软件
  • sys_客户人员→授权软件

图片

除确保能服务于运营人员、客户外的核心逻辑能达成外,为带来更好的使用体验。我们需要从诸多体验维度考虑各个系统行为。“体验因子”将作为系统行为的一部分目标,使整个交互活动更易于理解和顺畅。可直接借鉴一些通用的体验因子来评估,对于不同形态、业务的产品,体验因子有所偏重,诸如工具类产品对“操作便捷度”、“工具易学性”、“工具帮助引导”有较高要求。

回到注册案例上来,考虑到“易学性”和“帮助引导”两个体验因子,可以对用户“输入手机账号”的行为进行优化设计,提前或实时对手机账号进行校验,避免出错后再提示,徒增挫败感。同时提供“获取验证码”的触发入口,引导用户执行该操作,很大程度上降低系统的理解负担。在行为设计过程中,存在颗粒度问题,复杂系统涉及到大量互动会话行为,可以有粗细的逐步细化。

图片

 

step6: 触点行为的竞品调研

完成系统互动行为的设计后,可以开始正式的界面信息设计。“行为”的表达是极度精炼的,行为本身就是价值取向,并暗合用户的内心想法,由用例行为来驱动界面设计,才能真正做到按需设计。诸如“我感到肚子饿,第一想法是吃饭“、”早上该上班了,第一想法是走路去、打车去或坐地铁“。

在面对”输入手机号码“行为的界面设计时,除了个人创新外,也可调研市面上有哪些优秀的界面承载方式,作为一种”学习输入”,或者激发出新的创新行为。这种由内而外的驱动设计,能使设计过程变得更有序,且避免遗漏。

图片

 

step7: 触点支线、异常、极限情况的排查

最后一步是对支线、异常、极限情况的排查,得益于时序图系统行为的可视化表达,我们可以清晰、有序的排查每一个对话过程中可能出现的异常或错误,诸如“验证码无法到达”、“信息返回错误”等异常,都将被有效地排查出来。同时,还能从行为对话结构中,洞察到新的设计优化机会点,诸如“提交账号信息”环节,必然需要网络的通畅,故断网环境下需要给出明确的反馈。如下示例:信息返回错误、异常流程高发地、页面跳转……

图片

图片

时序图会话的先后顺序也将直接影响到界面的表达,图示中“输入手机账号”与“填写验证码”是有先后时间顺序的,如果同时在界面中展示两个输入信息,无疑造成并列的误解。(可惜市面上几乎大多数注册环节都如此,大家早已习惯)

 

3、找到体验的最大撬动点

总结

所谓用例驱动体验设计,是借用例的概念来定义问题和范围,并使用UML来分析问题,使整个设计过程变得有序、系统、严谨,在应对复杂系统、多链路多角色的业务时较为有效。用例在整个设计过程中是核心的存在,一旦模糊就会出现偏差,引入无关内容,同时也会失去对用户价值的把控。用例的获取很不容易,而精准统一的用例更难,涉及到颗粒度、抽象层次、参与者、受众等等内容,本文未对“用例的获取”做详细阐述,仅专注在用例如何驱动设计过程,有兴趣者可移步学习。

 

撬动点

以用例为中心的体验设计,从业务逻辑出发,转化为系统逻辑,在构建这个过程时就持续考虑体验因素,是把控体验的有效办法,我们站在结构上思考体验,将彻底的优化系统的体验。单纯从界面表现和框架呈现上做体验优化,上限明显,只有扎得更深,才能从结构上找到优化的“最大”杠杆点,带来体验提升,并有可能直接对研发程序设计带来指导。而UML的建模语言是有效的辅助工具,两者的配合使这一切成为可能。

图片

 

原文链接:酷家乐用户体验设计(公众号)

作者:同舟

转载请注明:学UI网》用例驱动设计,让你的设计更严谨!

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

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

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

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


设计如何做出高级感?

seo达人



图片

图片

图片

图片

图片

图片

图片

图片

图片

怎么样?满满的高级感有没有?这类设计为什么会有很高级的感觉呢?有哪些地方可以值得我们去借鉴、学习呢?
 
葱爷总结出了它们

9大特点:

1.使用纯色

渐变色可以做得很时尚很有个性,但要说高级,那还是纯色比较有优势,你看奢侈品牌就很少用渐变色,所以,如果想要高级的效果,版面的背景和色块要多使用纯色。

图片

图片

图片

 

 

2.使用素色

高级的设计不但喜欢用纯色,而且是喜欢用比较素的纯色,即饱和度比较低的颜色,比如米色、卡其色、灰色、白色等等,看起来很素雅。

图片

图片

图片

图片

 

 

3.衬线字体

除了色彩,字体对于设计作品是否高级也非常重要,一般来说,衬线体给人的感觉最高级,无衬线体次之,手写体排最后。当然,英文的效果会更好,所以我们在做设计的时候可以搭配一些罗马体英文,比如Bodoni、Didot、Voyage、Ogg等等都是不错的英文衬线体,文章末尾葱爷会分享几款英文字体的下载链接。

图片

图片

图片

图片

 

 

4.干净的图片

说完文字我们再说说图片,高级的版面,其图片一般比较干净,这个干净不是说一定要有很多留白,而是指颜色和元素不要太花、太杂,比如在下面这些作品中,模特穿的衣服也是比较简单的,这些图片本身看起来就很高级。

图片

图片

图片

图片

 

 

5.使用几何轮廓图片

除了矩形轮廓的图片,我们还可以试试把图片的形状设计成其他简单的几何状,比如圆形、椭圆形、圆角矩形、拱门形、菱形等等,这些形状会显得没那么常规,而且会给版面腾出更多的留白空间。当然,图片的轮廓要根据图片的内容来做选择,不能影响了图片内容的展示。

图片

图片

图片

图片

 

 

6.图片与线的组合

版面中仅仅是图片和文字,你可能会觉得很斋(单调),而如果加图形和色块又怕太突兀,或者抢走主要元素的风头,所以,加线条或者线图形是一种不错的方式,既能起到丰富版面、增强设计感的作用,又不会太抢戏。

图片

图片

 

 

7.圆弧形图片配弧线文字

版式对于设计的气质也会有很大影响,很多服装品牌的设计喜欢用一串文字,绕着圆弧形轮廓的图片排版,这种排版方式可以与版面的边界以及其他水平排列的文字,形成鲜明的对比,视觉效果很不错。

图片

图片

图片

图片

 

 

8.大文字、大留白、小图片
大图片、小文字的版面可能我们看的比较多,感觉比较大气,而大文字、小图片,再加上大面积的留白,又是完全不同的另一种感觉,相比前者会更有设计感、更富有变化,使用得当也会很高级。

图片

图片

图片

图片

 

 

9.克制
高级的设计往往是很克制的,包括对色彩、字体、元素、特效、技巧等方面的克制,例如下面的几件作品,除了必要的元素,几乎没有任何多余的东西,但设计师通过对字体、字号、字间距、行距、对齐、留白的控制,让版面显得并不单调,反倒很高级。

图片

图片

图片

 

 

图片
使用纯色、素色、衬线字体、干净的图片、几何轮廓图片、图片与线组合、圆弧图片配弧线文字、大文字大留白小图片、克制。记住啦,下次想做高级的设计时,不烦试试这几个技巧,然后多找一些服装品牌的网页设计来看看。不过使用技巧的时候切忌生搬硬套,根据具体情况灵活使用才是正解,希望这篇文章对你有所帮助。 
 
 
原文地址:葱爷(公众号)  
作者:葱爷  
转载请注明:学UI网》设计如何做出高级感?

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

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

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

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

五个案例教会你怎么做卡通 LOGO (一)

seo达人


 

图片

图片

 

事情的来源是今早 9 点零三分,我还在梦里吃着澳龙,突然微信的震动把我震醒了。我一拿手机,原来是我的恩师胡晓波给我发来一条消息,让我试着能不能写一篇关于卡通 LOGO 的教程。当然我是一个很乐于分享的好人,所以有了今天的这篇分享。

 

图片

 

准备好了吗?我要进去……哦不,我要开始了!

 

图片
图片 
做好一个卡通 LOGO,有几个关键的点需要注意。如果这几点做不好,那么你做出来的卡通 LOGO 总觉得带着一股乡村气息,总做不出那味儿。下面拿这个案例演示的时候,我会一一提到。

首先先去网上找一些关于青蛙的素材,当然,你可以找照片,也可以找一些青蛙的卡通形象参考。然后在网上我看到了这张图,觉得非常有意思。虎躯一震,决定把这个拿来当动作参考。

 

图片  
重点 1:

在做卡通logo的时候,找照片素材最好是找姿态、动作比较有故事性、有意思、有特点的,这样出来的形象也比较生动。

接着,把这张照片垫底,试着草图一下它,把它的轮廓先用 AI 钢笔工具勾出来,这样就得到了一个初始的外轮廓。

图片

再处理下这个外轮廓,得到这个初始的轮廓后,感觉这个形象完全可行,那么我们现在需要把它的线条变的更顺滑,整体的形象显得更可爱(既然是卡通,可爱一点会更好看)。

 

重点 2:

怎么能让一个形象变得 Q 萌可爱?长时间的研究卡通,我得出这么一个结论:形象偏矮胖、敦厚、圆润,就比较能突出可爱的特征,把你勾勒的初始轮廓适当压扁,让它变矮胖。

经过线条的优化(使其圆滑),外轮廓的压扁处理以后,就得到了最后的这个结果。

图片

整体形象确定以后,再给青蛙画五官,这里,我们再去网上找一些青蛙的卡通形象的处理方式(或者不局限于找青蛙也可以找一些与青蛙形象相近的动物,例如蜥蜴等等)。

图片

 

 

重点 3:

卡通的五官,处理方式其实很简单,尽量用几何图形去作为脸部的五官特征。

在这个案例上,因为主体是青蛙,所以不能单纯用一个小圆点去作为青蛙的眼睛,我们可以看到青蛙眼睛的特征,是有一个较大的眼白与较小点的眼珠。所以这边的处理方式,就是一个白色的大圆+黑色小圆。

图片

单单这个形象还是不太够,虽然这个坐姿已经比较生动了,我们可以根据这个形象展开联想,让它更充满故事性和趣味性,这里观察青蛙的姿势,这个屁股的角度,可以让它坐在跟大自然有关的物体上,加上这个双手护胸的动作,让它叼一根树枝,更能体现悠闲的气质。

图片

 

重点 4:

卡通吉祥物的标志,利用本身的的姿态动作,适当展开联想,加一些小物件可以让它更生动,更有趣。

接下来就是上色跟补充一些细节了。如果配色较差,可以去网上找一些配色的参考。这里我找到一个卡通的配色,刚好也是绿色为主,适合青蛙,且背景也可以参考它做一个叠底。

图片

最后,选个自己觉得较为合适的字体,如果会做字体的话最好是自己做个字儿,再做个排版,就OK 啦~

图片  
 
 

重点 5:

卡通 LOGO 的排版,不要太复杂,因为卡通标志本身的图形具象,排版简单更好看,用字的字体气质要符合图形。

图片
图片

前面的案例,想必大家都已经 get 到了步骤,还我还是要再演示一下这个案例,嘻嘻。

还是一样的,这张照片是我偶然看到的,觉得非常有感觉就保存到手机了。在做这个 LOGO 前突然想到有这么一张图,立马开始操作。

图片

其实大家在日常生活中看到比较有意思的图片,都可以保存下来,说不定哪天它就能变成一个好看的 LOGO 是不是呢?

 

好了不说废话,开始勾轮廓!

图片

这张图的松鼠,看起来还是比较饱满的,所以在后期调整优化曲线的时候会比较轻松,但是这个图的外轮廓,相比第一个案例的青蛙,是比较复杂的,这里需要耐心一些。

这里绘制的外轮廓,线条都不是合并的,但是我们发现,这个 LOGO 是需要做一些高光跟阴影的,所以这里先给大家普及一个基础知识。

图片

三种描边模式,我们选择第三种——使描边外侧对齐,因为我在给图形做剪切阴影或者是高光时,不可能 100% 沿着轮廓去勾勒,这样太累了,所以一般会超出外轮廓一些,再去做剪切,这样能省不少时间。

图片  

重点 6:

卡通 LOGO 的绘制,基本都是用到外轮廓,这样好做高光跟阴影的剪切。

回到主题,我们接着画这个松鼠。

图片

刚刚我们已经把草图大概勾勒出来了,现在把这个草图垫底,让它形成一个合并的状态(注意先观察草图找好锚点的起点,否则很难让整个轮廓连起来),并且过程中、优化线条曲线(这一步还是有点难度的,钢笔工具不太熟的同学需要多练习)。

勾勒完成后的线条是图 1 这样的,不少同学会有疑问,为什么有些地方会呈现双线的状态?别急,把它换成外描边模式你就明白了。

图片

因为外描边模式,当有两条相近的线条时,是有可能重叠的,这样就能形成一些细节线条。

图片

接着,我们继续调整有些不完美的地方,比如重叠到的地方线条粗细不统一等等,调整完后我们看下效果。

图片

 

到了这步以后,其实最难的点已经被你拿捏了,剩下的就是补一些细节。另外,松鼠的尾巴,这边是没有按照图片的线条去处理的,因为现在这个图形是往下走的趋势,如果尾巴还是往下垂,那整个图形的重心就不平衡了。

图片

这边尾巴的处理也可以网上找一些参考,因为上面说的平衡问题,所以我把松鼠尾巴处理成往上走的趋势。

大体造型已经完成,现在剩下的就是填补五官、填充颜色,加高光阴影。

图片 
 

重点 7:

阴影跟高光这部分,其实不需要过于严谨。没有美术功底的同学也不用发愁,在一些有交错,遮挡的部位加阴影,在头顶或者身体外边缘加高光,基本是没有什么大问题的。

 

这样图形就完成了,最后加上排版就完成了。

图片  
 
 
 
图片
图片

第三个案例跟前两个其实很相似,都是我在网上看到比较有意思的照片,下载下来做成卡通标志。废话不多说,上图了。

图片

其实我个人很喜欢做猴,当然大部分原因是因为我爱人叫……猴子,图片emmm好像离题了,收!

因为猴子本身是一种带着调皮、聪明、智慧性质的动物,做猴 LOGO 其实可以让它赋予多种性格。

图片

如上两个案例的方法,先大概绘制一下猴子的外轮廓,看一下图形大概的感觉(这里还是与第一个案例说的,图形整体看起来比较瘦高,可爱气质会偏弱,我们可以尝试压扁)。压扁后我觉得是我想要的一个高度,但是压扁后头部也会变形,那么接下去只要我们把这个压扁后的猴子轮廓复制一个,再使用第一版绘制的头部就 OK 了(这里不做具体演示)。

 

 

重点 8:

卡通类型的 LOGO,一般身体都会比较短,头比较大,圆,这样可爱的气质才会突显。

经过一番调整操作后得到这样一个轮廓,但是现在这猴子是没有尾巴的,所以我们要给它添加一根又粗又长……的尾巴。

图片

这样得到了一个最终的轮廓形态。接下来就是给它画上脸,五官,还有增加一些高光细节了。

这里看你想给猴子定义什么样的表情气质。原照片的这猴子,表情略带无辜,我觉得还蛮不错的。那么我们尝试一下画上表情,注意简化。

图片

委屈、无辜的表情,如果你不知道怎么画才能表现出来,可以对着镜子装个委屈的表情看下,或者度娘一下委屈、无辜的照片。一般委屈无辜,眼睛的形状都是呈现一个眼角往下的状态。

图片

加完五官以后,现在整个猴子的大致形象已经出来了,那现在这个姿势,需要加点什么才能让它变完整。原照片上,是两根分叉的树干,其实照着画也没什么不妥,那我们就给它画上树干,再上个色。

图片

画完树干,上完色后,整个图形是不稳的。原因是分叉的树干其实是个 V 字形,所以我们为了让它稳住,在底部加一个类似阴影的形状去压住它就完全 OK了。

图片

本以为到这,就完成了。端详许久,总觉得还差点啥,感觉这猴儿还不够灵性。这时候我突然想到我前几天买的毛线帽,然后想着,天冷了,给猴儿个帽子吧……

图片

画完后,又看了许久,不禁发出感叹,我 TMD 真是个天才……最后老规矩,加排版,完事儿!

图片  
 
 
 
图片
图片 

前面的都是根据一些照片去做的吉祥物卡通标志,其实创造性不属于特别高,我个人其实更喜欢是这类 MIX 标志,把两种不相关的物体结合起来,但却不违和,反而更显趣味创造性。

这个案例的灵感来源是我在 BE 上看到一个我很喜欢的设计师做的一个标志(下图) ,把老鼠与胡萝卜结合,非常有意思。

图片

做这个 LOGO 之前,我就一直想做个胡萝卜的创意性标志(出于对波哥的爱图片),这类型的卡通 LOGO,有时候就是灵感一瞬间迸发的事儿。但是没灵感的时候,我都会去网上瞎看,有时候看着看着,就能想到做啥了。偶然间看到几张坦克的照片,灵鸡一动,把胡萝卜跟坦克结合,因为刚好坦克的炮管,可以用胡萝卜代替(想到这里,我露出了姨母笑)。

那么胡萝卜跟坦克的造型怎么画呢?首先还是打开你的网页,可以先搜一下胡萝卜的造型,再搜坦克的图片(这里找到的坦克图片,已经是手绘图了,所以我们要把它概括简化一下)。

图片

我先不用管胡萝卜的部分,因为胡萝卜的角度是要根据坦克轮子的角度来做,所以我们先把坦克的部分绘制一下。仔细观察坦克底座的构造,拆解绘制。

图片

到这里大家可能会有点困惑,这样的图片我要怎么下手?不要急,其实不难。上面我们已经把坦克底座的部分拆解,现在只需要绘制一排车轮跟轮子上面的铁盖。这里需要注意的是,因为坦克的特征十分明显,就是一根长长的炮管与底部的一排轮子,所以只要把这两个特征能抓出来,基本不难看出是坦克了。

图片

 

 

重点 9:

当你要把一个实物/动物图片转化成卡通风格时,要仔细观察它原来的线条,使其更几何化,去繁从简。

 

坦克部分处理完就可以搞这个胡萝卜了,这里就不用做太多演示了,胡萝卜这么好画!注意跟坦克合上的角度就 OK 了!

图片

这个角度先画个草图,放上去试试合不合适。

图片

 

可以!

再观察下胡萝卜的细节,因为它要充当炮管,所以我们不加上面的叶子,但是这样会不会看不出是胡萝卜?那我们可以观察下胡萝卜身体部分有什么细节,再加上胡萝卜的橙红色,说看不出我不信!

特征:胡萝卜身上的划痕

图片

别急,现在看不出胡萝卜不要紧,上色以后一切都会好的~

好了,可以合体了!注意各个组件的图层关系。

图片

上色!排版!完事儿!

图片  
 
 
图片图片

这个案例跟上个案例其实非常相似,都是 MIX 系列的卡通 LOGO 这个 LOGO ,这个 LOGO 灵感来源于我偶然在网上看到了这张图片,以猕猴桃代替了鹦鹉的翅膀,配色也完全不违和,是非常优秀的作品了。

图片

萌生了想长做一个类似的 LOGO,当然我们不能再用猕猴桃的元素了。想想,其实很多水果可以做这样的「代替品」。但是这里需要注意的是,什么样的水果切开,还非常具有特征,让人一眼就能辨识出来。最后我选了西瓜,西瓜可以有半圆,也可以有三角形,这样的话,鸟的翅膀形态发挥空间就很大了。切开后的西瓜籽加上红色的瓜瓤十分具有辨识度。

图片

当然我们先要做的是「鸟」这个主体的造型。这边还是先去网上找一下鸟的图片,最终,我选用这张图片来作为这个 LOGO 的主体(因为它本身图片就有可爱的气质,更方便我们后面创作)。

图片

这里我只提取了这只鸟的身体跟嘴的部分,翅膀我们要用西瓜代替的,所以暂时先不去绘制。确定好身体部分以后,我们再尝试先画切开的一半的西瓜。这里也不难,网上搜一下西瓜,很多素材可以参考着画。

图片

画好的西瓜,我们再尝试旋转角度,跟鸟的身体部分合体一下。

图片

看起来真可以啊!

 

现在的造型看起来是不是还不戳!是吧~但是还没完!一般展翅的鸟儿,爪子是什么状态?别慌,继续度娘!

图片

可以看到,展翅后的鸟儿,爪子都是往前伸。我们秉着卡通能简化就简化的原则,把爪子处理成线的形式即可。加以上色,「西瓜鸟」就出来了。

图片

图形这样已经是完成了,现在就剩下排版。当我加上文字以后,发现这个 LOGO 越看越显得空,那咋办?加个背景色块其实就解决了(这里的背景色块,也是根据鸟的身体走势做的椭圆)!

图片  
 
 

重点 10:

当你的卡通 LOGO 做完后发现整体看起来不饱满,尝试加个背景色块,屡试不爽。

图片   
 
 

总结Tips:

  • 在做卡通 LOGO 的时候,找照片素材最好是找姿态,动作比较有故事性,有意思,有特点的,这样出来的形象也比较生动。
  • 怎么能让一个形象变得 Q 萌可爱?形象偏矮胖、敦厚、圆润,就比较能突出可爱的特征,把你勾勒的初始轮廓适当压扁,让它变矮胖。
  • 卡通的五官,处理方式其实很简单,尽量用几何图形去作为脸部的五官特征。
  • 卡通吉祥物的标志,利用本身的的姿态动作,适当展开联想,加一些小物件可以让它更生动,更有趣。
  • 卡通 LOGO 的排版,不要太复杂,因为卡通标志本身的图形具象,排版简单更好看,用字的字体气质要符合图形。
  • 卡通 LOGO 的绘制,基本都是用到外轮廓,这样好做高光跟阴影的剪切。
  • 阴影跟高光这部分,其实不需要过于严谨,在一些有交错,遮挡的部位加阴影,在头顶或者身体外边缘加高光,基本是没有什么大问题的。
  • 卡通类型的 LOGO,一般身体都会比较短,头比较大,圆,这样可爱的气质才会突显。
  • 当你要把一个实物/动物图片转化成卡通风格时,要仔细观察它原来的线条,使其更几何化,去繁从简。
  • 当你的卡通 LOGO 做完后发现整体看起来不饱满,尝试加个背景色块,屡试不爽。

 

初试卡通,或许效果没有很好,但是都是能靠多看,多练,练会的。喜欢它,你就能静下心去做它,练它,兴趣是最好的老师。所以如果你也喜欢卡通类型的 LOGO,让我们干起来吧!

 

原文地址:胡晓波工作室(公众号)

作者:小章鱼

转载请注明:学UI网》五个案例教会你怎么做卡通 LOGO (一)

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

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

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

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


3种状态+5种模式,从UX角度分析加载设计

seo达人


三种加载状态

页面加载进程会受多方面的影响,例如页面里图片、图标的数量,页面中是否有三维场景或模型,是列表式设计还是卡片式设计…

 

逐一加载

对于可以同时进行多个加载任务的产品,更适合应用逐一加载的形式,这样做能减少用户对于等待的感知程度。任务列表逐一加载的过程会给用户带来一种秩序感。

图片

 

完全加载

进入一个网站或App,很多页面都会一下就显示出来所有内容,这种页面完全加载的形式对用户来说更熟悉。

同样,页面完全加载的形式会让用户的操作和浏览过程更流畅。

图片

 

延迟加载

延迟加载是用户主动触发的操作,根据操作系统反馈对应的结果。延迟加载包括三种形式:

  • 无限滚动当检测到用户快要到达列表或页面的末尾的时候,通过无限滚动来作为触发器,引导用户获取更多内容。

  • 加载更多:通过点击“加载更多”按钮来获取更多内容,这个过程由用户主导决定,是否选择点击。

图片

  • 分页加载:分页是在不同页面上进行的延迟加载。这个过程也是由用户主动选择,但和“加载更多”按钮不同的地方在于,分页是页面间的切换,并且用户能清楚地看到具体的页面数量。
图片

 

五种加载模式

加载模式需要依托场景去考虑。比如一个1秒就能加载的页面和一个需要5秒才能加载出来的页面,我们就需要考虑使用不同的加载模式设计,这样才能做到差异化设计

这里我做了一个表格,将页面加载需要的时间以及对应的加载模式进行了整合。

图片

 

0.1秒以内

如果加载时长低于0.1秒,用户不需要等待加载过程,内容就能即时呈现出来,有一种“还没开始就已经结束”的感觉。

0.1秒以内的加载不需要在页面中添加任何加载状态,但要一个场景需要格外注意,如果用户刚完成一系列复杂的操作,点击提交之后,考虑为用户提供撤消机制

图片

用谷歌邮箱发送邮件时,发送成功之后会弹出一个撤销提示,允许用户在5s内撤销刚才发送成功的邮件。

 

0.1-1秒间

大多数产品的页面加载速度都在这个区间,用户几乎不会注意到这种加载延迟。所以我们不需要增加额外的加载动效来填充这段加载时间,不然可能会起到画蛇添足的反面效果。

试想一下,如果在每个页面加载的过程中都加上加载动效,不仅会分散用户的注意力,并且屏幕上总出现不断跳动的内容,会让人感到很焦躁。

 

1-2秒间

如果加载时间超过1秒,用户就会感知到这个加载过程,这个时候我们就可以考虑适当添加加载动画,缓解用户等待的焦急感。

  • 微加载1-2秒的加载时间对用户来说,说长不长说短也不短,优先推荐轻量级的动画加载形式,为用户提供一种进度感。
图片

在下载内容的过程中,使用这种轻量级的环形动画来显示加载进度,简洁清晰,而且还能作为组件来复用,能够极大提升工作效率。

 

  • 骨架屏用于整页加载,这种加载形式在产品中的应用也越来越频繁。骨架屏可以让用户在等待加载的过程中,先了解页面的架构。

图片

在骨架屏基础上,可以“选装”一些好看的效果,增加页面加载时的视觉体验观感:

  • 微光效果在骨架屏基础上添加微光效果,光感的加入能将用户的注意力从等待中转移开,有效地减少等待感知。

图片

  • 脉冲效果:效果和微光效果很像,差异的地方在于脉冲效果用于单个的任务或卡片列表。

图片

 

2-10秒

这个加载时间对于用户来说已经很长了,对于设计师来说,需要对这段加载时间进行合理有效地设计,来提升用户体验。

  • 时间提示在开发中很难以分和秒为单位来精确地估计加载时间。

图片

如果在加载的过程中,想给用户一个期望的时间值,告诉用户整个加载过程需要多长时间,我们可以用“这可能需要几秒钟”这种提示方法,既能展示加载需要的时间,又能给用户一个时间预期。

  • 进度条:最常使用的加载形式,加载过程中使用缓入动画会让整个过程看起来更像在加速。

图片

  • 分步提示如果加载过程过长,可以将整个过程分为几个不同的步骤,帮助用户预估操作完成需要的时间。如果系统正在处理多个项目,分步提示的设计能让用户明确了解已完成的操作。

图片

 

10秒以上

  • 百分比加载使用百分比加载虽然不能告诉用户加载完成需要多长时间,但是能提供一种过程感,让用户自己来估计加载时间。圆形进度条+百分比是最常见的加载形式。需要注意的是,不要在加载到99%的时候让进度条卡住不动,这样会让用户感到焦急。

图片

  • 后台加载如果一项任务需要加载很长时间,我们不能让用户看着进度条干等,其他什么都做不了,这种情况我们可以考虑将任务放到后台去加载。

图片

在Google Drive中上传较大的文件时,系统会立即给出反馈,将任务窗口缩放到屏幕的右下角,我们可以通过这个小窗口检查上传进度和上传情况,而且还不耽误使用页面上的其他功能。

 

最后

把加载细分成这五种模式,可以覆盖很多使用场景,这样的对症下药既能保证用户体验,还能让产品丰富化,起到锦上添花的作用。

在对的时间和对的场景下做对的事,这句话用在什么地方都不为过,设计也是一样。

最后考虑到大家经常使用卡片式UI排版,为大家整理了90+个iOS卡片模板,源文件已经打包好,大家可后台领取。

领取方式:关注公众号,后台回复【小组件】获取源文件。

图片

慢慢来比较快,希望对你有帮助!

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》3种状态+5种模式,从UX角度分析加载设计

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

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

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

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


2022的100种设计法!

seo达人



图片

 

01.字形再设计

通过对0和2字体的解构与再设计,衍生出了各种形式的数字图形组合,凌厉或圆润、抽象或具象,无不表现出了设计师强大的图形想象力,是很好的设计参考。

图片

图片

图片

图片

图片

图片

图片

图片
图片
图片
图片

图片图片

图片

图片

图片

图片
图片
图片
图片
图片
图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

02.插画与文字

热衷于插画设计的设计师们将文字巧妙的融合的图形元素中,这种形式更能传达设计师的想法,使其更为具象化的表现在欣赏者的面前。

图片

图片

图片

图片

图片

图片

图片

图片

图片
图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

03.3D设计

3D软件让设计师们不在拘泥于二维世界当中,更全面的视角和细腻的质感表达,让设计作品焕发出全新的力量!

图片
图片
图片
图片
图片
图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

转载请注明:学UI网》2022的100种设计法!

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

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

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

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


三个小技巧,轻松提高设计转化率

seo达人


前言

影响APP转化率的因素有很多,设计也是其中重要组成部分,那设计师需要如何应对,才能助力用户转化呢?从用户角度来看,助力转化就是扫清理解障碍,提升浏览意愿与顺畅度。

想要以设计语言达成以上目的,快速传达有效信息是十分重要的一环,接下来,我们结合案例,聊聊快速传达重要信息是如何通过节省用户时间来助力转化的。

 

01.为什么要快速传达

研究表明,人类在面对非自身兴趣的事物时,注意力只能高度集中 10 分钟左右,短暂休息后再次集中注意力的时间则为7-10 分钟[1]。

图片

当用户使用服务类APP的时间超过这个阈值后,就会因为迟迟没有达到目的而产生焦躁情绪,随之而来的负面影响要么是跳出到其他APP,亦或者对软件产生厌烦感,而无论哪一种都不是我们想要看到的结果。这也就意味着,我们每次只有20分钟的时间让用户完成从筛选到下单的时间。

因此,在用户有限的时间与精力中,迅速的传达有效信息,不仅可以缩短用户从挑选到下单的流程,站在用户角度来说,因为可以快速的找到自己想要的信息,也可以让用户切实的感觉到这是“好用”的软件。

因此我们需要快速传达的理论依据就此成立:

图片

 

02.如何快速传达

那么如何快速传达有效信息呢?方法有很多,今天我们重点阐述以下三个技巧:

图片

接下来我们结合实际案例看看如何运用以上手段以达到快速传达的目的。

 · 塑造视觉焦点

什么是视觉焦点呢?就是画面中让我们能多停留几秒的视觉元素,可以是一个点,一条线,一个面,通俗来讲,就是页面中最引人注意的地方,视线上交汇集中的地方,这个位置就叫做视觉焦点,而焦点可以通过构图,色彩运用,比例等手段进行塑造。

图片

接下来我们结合十一活动的实际案例说说如何进行焦点塑造,我们需要先构建合理的视觉层次结构,好的层级能使观者快速浏览信息,位于层级顶层的信息也可以在最短的时间内让人注意到。

图片

根据人眼对画面的阅读习惯,位于顶部和正中这两个位置的信息会最先被注意到,我们应优先将重要信息放在此处,符合了阅读习惯之后,通过运用色彩对比,字号大小等差异化手段,可以将信息的层级提高。

图片

 图片

大字号更容易让人一眼看到信息,因此就算是同处高层级的信息,通过内部字号大小的对比,可以进一步细分层级,让视觉焦点更加具体

图片

饱和度与对比色的运用同样重要,我们将彩色的图片去掉颜色之后可以发现,色彩关系对画面层次的影响,通过对灰度,明暗和色相的使用,可以使焦点位信息产生视觉前推感。

视觉焦点在具体案例中的应用展示:

图片

58到家活动

小结:通过构建画面层级之后,运用字号大小和颜色对比等手段做出差异化设计,可以快速将用户注意力吸引至焦点区域,并被引导着跳过次要区域,视线按从上到下,从左到右的顺序,在各个焦点位中跳跃,从而达成我们优先传递重要信息的目的。

· 前置思考过程

我们平时在想要达成某种目的时,需要先获取大量信息,在脑内罗列整理,然后归纳出有用信息后,再进行处理。

图片

用户在使用APP时也是这样,比如想点餐时,要挑餐厅,挑口味,挑菜品,而这一系列的信息整理过程是十分繁琐又消耗耐性的,正因此,我们才经常面临:不知道吃啥啊 这样的难题。

而这个思考过程是可以通过设计语言来简化,甚至提前完成的。通过将页面中的信息分类后,将同类信息放置在不同组块中的相同位置,使用相同的颜色和格式,会帮助用户形成阅读惯性。

图片

 结合十一活动案例来看,每个组件中都会包含有几类基本信息:产品名,利益点,和下单跳转按钮,每个组件中的信息都在固定的区域展示.

图片

同时用高饱和度的红色来强调,在这样的固定排列中,用户想要取得什么样的信息时,可以第一时间去固定的位置寻找,大大提高了信息获取的效率。

前置思考在具体案例中的应用展示:

图片

小结:通过将画面中的信息整理并归类,我们可以缩短用户的信息获取与脑内整理归纳的时间,让用户将有限的时间更多的放在优惠对比与决策中去,这不但有助于提高下单率,易读的版式也更容易让用户产生“好用”的感觉。

· 米勒定律[2]

我们先来看以下两段数字

图片

是不是后一段更容易记忆,这涉及到一个叫“组块”的概念,人脑记忆一组信息的时候,这组信息内的元素数量小于7±2时最容易记忆,具体数量因人而异,老年人的记忆数量会显著降低。

因此一长串数字看起来毫无规律难以记忆,而3个数字一组分成多个组块后,则容易记忆很多,同一组块内的信息越少,越容易让用户记忆深刻。

这个定律对设计画面同样有着重要的影响,一个板块中如果包含了过多的组块,不仅会让用户对这个板块的内容难以记忆,也会因为信息过多且没有主次而大大增加筛选成本,用户将时间过多的花费在筛选上会延长下单之前的流程,也会提高下单之前的跳出率。

图片

结合我们的页面设计来看,每一区域内的组块分布都不超过5个,同时组块内的信息类别也只有图片、产品名、简要介绍与下游链接4部分组成,通过做减法,让重要信息可以迅速被提取,更容易被记忆。无论对于新老用户来说,都可以有效的降低筛选成本,新用户能更容易理解板块功能,老用户则更容易记住自己想找的功能在什么区域。

米勒定律在具体案例中的应用展示:

图片

图片

58到家电商首页展示

 小结:通过简化板块中的信息类别,能有效缩短新老用户寻找服务的时间,同时老用户也更容易记住想要的板块在什么位置,下次再使用的时候,迅速触达。

 

03.写在最后

作为设计师,兼顾商业化与用户体验是我们的必修课,好的设计不仅仅是要“好看”,更需要兼备用户与产品两方面的功能性,将视觉语言与心理学、行为学的结合运用,既可以有效的提升用户体验,提高粘性,又能缩短下单前的必要流程,提高转化率。

 

注释:

[1]出自《教书育人》2016年1期38页,【运用心理学规律提高课堂学习效率】章节 

[2]米勒(Miller,1956)的分析,人脑处理信息有一个魔法数字7(正负2)的限制,也就是说,人的大脑最多同时处理5到9个信息(chunks)。原因是短期记忆储存空间的限制,超过9个信息团,将会使得大脑出现错误的概率大大提高。


原文地址:58UXD (公众号)

作者:环铁艺术家

转载请注明:学UI网》三个小技巧,轻松提高设计转化率

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

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

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档