首页

如何在全球性组织中实现服务设计规模化?

鹤鹤

本文介绍了一个案例研究,是作者在一家拥有 60 多年历史的产品导向型公司中实施服务设计的旅程,本文将着重介绍如何在大型国际数字支付技术组织 IDPTO(化名)中建立服务设计创新中心。这份经验希望传递到每一个正在用服务设计影响公司内外部的朋友们。

一、首要步骤:理解语境

在拥有 25 年的设计实践经验后,我收到了一份具有挑战性的邀请,成为一家全球性公司的执行董事,并通过设计领导其转型。选择巴西是因为它负责拉丁美洲 75% 的支付交易。该公司已经针对该市场实施了加速增长计划,因为他们认为这是正确的创新计划的测试市场。在六个月的时间里,我从自己的服务设计咨询公司转行到 IDTPO。

在那段时间里,我有机会参观了该公司位于美国的公司总部。这种面对面的互动对我来说至关重要:

  1. 全球领导层对创新的承诺;
  2. 他们是否愿意在这个过程中感到不适。

2016 年 3 月,在圣保罗,我开始了为期三个月的组织问题诊断,以及另外三个月的定义问题阶段。然后,我正式开始确定公司的痛点、局限性和全球领导层的战略目标。我参与了公司接下来一年、三年和五年周期的整个战略定义。

自过渡过程开始以来,我一直致力于竞争对手研究并绘制生态系统地图。我还收集了有关公司直接面向消费者市场和几项趋势研究的可靠材料。在第二个月,我向领导层提交了一份战略计划,其中包括我们将如何工作的大纲,该计划基于三个层面的行动:战略、战术和行动。

  • 战略层面|业务转型:目标是将 IDPTO 重新定位为创新型组织,同时保持其在巴西支付服务市场的领先地位。
  • 战术层面|以客户为中心:在产品团队(公司的核心)内创建一个创新功能区——这种文化转型的驱动力。这将焦点从产品或技术转移到消费者身上。
  • 操作层面|建设能力:在组织中的每个人的参与下,以协作和开放的模式建立以设计为导向的创新中心的运作。这是实现整个组织的参与和改造公司本身的唯一途径。

组织诊断的结论是,该公司已经在对设计原则的基本理解和应用的基础上致力于以技术为中心的创新。

根据设计阶梯 1,我确定该公司处于“界面设计”阶段。如下所示,除了更改其图形表示之外,我还修改了该工具并添加了另一个“设计作为文化”步骤。这是对上述模式的重要升级,更符合当前的创新战略。

这一步(第4阶梯)很重要,因为这是在组织中实施设计策略时的最终部分,即通过设计优化组织使其成为组织文化的步骤。

如何在全球性组织中实现服务设计规模化?

在我看来,“设计作为文化”分为三个层次

  1. 活动:设计在整个组织中普遍存在的行为和实践
  2. 环境:组织中设计空间的可用性
  3. 价值观:组织定义的核心理念和设计原则,告知并推动组织文化

我提出的战略计划包括两个三年一次的周期性循环策略和相关的年度目标。第一个周期侧重于通过开发独特的创新流程来整合组织内的设计。

第二个周期侧重于发展组织的能力,以从“设计作为过程”过渡到“设计作为战略”。在最初执行的六年后,我们将能够衡量组织中以设计为主导的变革的进展和收益。

评估指标后,我们将能够继续下一步(即“设计作为文化”)。

第一个周期从为组织的创新中心定义五项创新原则开始。这些原则已经与组织的领导团队共同制定。

  • 第一原则:开放式创新|创新来自许多地方,公司需要准备好展望和建设理想的未来。一个重要的里程碑是为巴西社区推出应用程序编程接口 (API) 开放平台——这一举措为开发人员、初创企业、金融科技公司和更广泛的商业社区创造了一个新的沟通渠道。
  • 第二原则:协作心态|在综合、包容和多样化的空间内进行协作。我们在公司创建了一个车间空间,并成立了一个多元化委员会,以促进必要的、紧迫的——但也是持久的——心态转变。
  • 第三原则:消费者体验|深入了解消费者的背景和行为,启动向 B2B2C 组织的转型,同时与我们的 B2B 客户合作,为最终消费者提供解决方案。
  • 第四原则:边做边学|基于原型设计和实验的心态,培养持续学习的过程。
  • 第五原则:数字敏捷|通过“快速失败,更快成功”的思维,从瀑布模型转向实施敏捷方法。

这不仅改变了交付方法,还引发了大胆的组织转型,因为它改变了组织过去工作的范式。

如何在全球性组织中实现服务设计规模化?

二、首个创新周期:实施

甚至在创新中心正式启动之前,我们就尝试了两种开发形式来解决问题。第一个是用经典五天设计冲刺模型帮助一家重要地区性银行。第二个是为电子商务平台开发聊天机器人。最后一个解决方案经历了一个更长的七周时间,使我们能够测试初创公司的融入,以帮助我们采用开放式创新方法。

在这个周期的第一年,三点很重要:

  1. 贯彻开放创新原则(上文提过)
  2. 启动创新中心的教育部门,负责培训整个组织的设计思维并维护课程的周期性安排
  3. 启动创业和金融科技加速计划。这包括尝试服务设计思维和实践,这对公司来说是全新的。

这就是为什么我选择服务设计作为创新过程的基础,同时参考了 Richard Buchanan 教授的工作。如图 3所示,过去 20 年是从基于人工制品的物质性的实践到为解决复杂问题而开发的“非物质解决方案”的设计思维转变的时刻。

如何在全球性组织中实现服务设计规模化?

我们的经济现在建立在象征价值的交换之上。经验决定了每个人在这种交换中投入的价值。在过去的二十年里,我们看到了一系列新公司的出现,例如 Uber 或 Airbnb,它们诞生于数字环境中,专注于我们所说的体验经济 。

因此,服务设计和交互设计等主题近年来受到关注,因为它们是这种新经济发展的基础。仅六个月后,我们就协助五家金融科技公司将 IDPTO 技术应用于他们的流程。之后,其中三家金融科技公司能够开发出现成的市场解决方案。在第 1 年末,我们向整个组织展示了流程(图 4)。

该活动在公司的美国总部举行并引起了很多关注,因为在一年内我们有项目要展示、成功指标和接下来两年的路线图。

如何在全球性组织中实现服务设计规模化?

创新过程不一定是线性的。该过程以简报会(与不同利益相关者的协作研讨会)开始,以最终确定和实施的解决方案结束。

到第 3 年末,我们超越了指标,赢得了奖项,并开始为公司的第二个创新周期做好准备——在战略层面采用设计。创新中心战略的一部分是将其工作方法扩展到整个拉丁美洲地区。2018年,我们对区域团队进行了培训,并准备了文件,包括经验、教材、方法和工具。其他一些地区也采用了部分方式,例如美国和亚洲的加速计划以及欧洲和亚洲的服务设计。尽管如此,还是存在挑战:创新中心位于组织的产品领域内。

在第一个周期的最后一年,由于全球项目和奖项,我在内部和外部获得了很多知名度之后,我与全球首席产品官讨论了:

  1. 关系产品-服务;
  2. 产品如何充当服务的化身;
  3. 系统思考如何成为组织战略讨论的一部分。

次年,他决定将该领域的名称从“产品”改为“解决方案”。

三、第二个创新周期:整合2019年开局充满挑战:

  • 实施新三年战略规划
  • 维护和协调整个拉丁地区的实施
  • 为公司开发和交付全球项目

在业务加速数字化的背景下,成功的战略规划为城市交通、公共交通、即时支付、新支付技术和新信息交易技术等领域的项目设定了总体目标。

我们有几个项目要管理,我们需要使用对公司文化产生重大影响的项目管理方法。实施了新的高管培训课程。加大投资力度,竣工项目稳步增长。

设计现在是公司战略的一部分。设计已成为开发新服务和新技术的战略决策的主要因素。

以下是我领导下的两个创新周期后的一些数字:

  • 到 2021 年 12 月交付了 18 个项目。
  • 10 个项目仍在开发中或等待发布窗口。
  • 加速70 家初创企业和金融科技公司,为公司带来了 38 项新业务,并帮助培育了超过 1.5 亿美元的投资。
  • 创新中心产生的新解决方案负责产生约 100 亿美元的支付量,预计未来五年将达到 400 亿美元。
  • 我们获得了来自市场、专业咨询机构和公众消费者的无数奖项。
  • 公司重新赢得了与市场相关且对股东重要的创新公司的声誉。

写在后面

这篇文章无疑是给了我们在自己的组织中运用服务设计的一针强心剂,让我们有更多的自信去运用服务设计和影响组织,我们要相信服务设计方法论带来的作用,相信其本身有强大的能力。

记得之前做项目的时候,小伙伴有说过一句:之所以可以反复成功,其实是方法论本身的能力,而我们更多的是在运用罢了。希望大家以此共勉。

作者:陈昱志Yeutz

来源:人人都是产品经理

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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


B端用户体验的三个层面

鹤鹤

一、前言

很多情况下,用户选择一个产品的理由是有没有某个功能,但弃用的理由却常是产品好不好用。能否打造优质的B端用户体验,成了影响B端产品用户续约的一个关键因素。

二、业务体验层 

(1)流程越短越好。 我们在上班、逛街的时候,倾向选择一条最短的路线,希望用最少的时间到达目的地。用户操作系统时也希望这样。

(2)整合功能场景。 某个功能由谁、在什么场景下操作,以及可能会遇到什么问题、需要什么关联功能来解决,如果功能点相互独立, 关联很少,会让用户用起来很不顺手,有种断层的感觉。

(3)有效指导异常。Saas 有一个特点是功能模块间会尽可能相互独立,基础数据的设置和业务上面的使用往往是在不同的功能模块内。这会导致B端用户在遇到空数据的情况下, 可能不知道该怎么操作。这时,需要要提示用户按具体步骤操作来顺利完成任务。 

三、交互体验层

交互体验,对上承接了业务,对下承接了视觉。好的交互体验能让业务流程简捷,更关注用户习惯。 B端产品的交互和C端产品差异较大,C端常用的移动客户端屏幕小,可显示的内容较少,需要不停地跳转完成操作,但B端产品大多用电脑来操作,一页可显示的内容较多。所以做B端产品交互一般需要注意下面几点:

(1)少跳转。曾有用户反馈,说某个功能操作流程太长了,操作起来很麻烦。通过走查发现流程其实是没有问题的,不能再缩减流程了。通过可用性测试发现是因为跳转页面导致,用户在操作时去了另一个界面,然后再返回来,让用户在操作时感觉流程更长。于是就把页面跳转优化成了弹窗,弹窗里面操作完点击关闭即可, 改后用户觉得流程缩短了,操作效率更高了。

B 端产品能用弹窗的时候,不要跳转,哪怕弹窗里面加弹窗,只要不跳出这个页面,用户都会觉得没有阻断他的操作。虽然,从交互的角度讲,弹窗里再加弹窗不符合规范,但在实用性面前是可以商榷的。

(2)少弹窗。 相比弹窗,在某些场景下,有更好的处理方式。比如,直接放页面上。 弹窗是点击按钮触发的,自动完成操作后关闭,或者用户手动关闭。虽然比跳转好,但比不上在页面上直接呈现高效。

页面上直接呈现是理想状态。但是往往因为内容太多,很多时候不得不隐藏起来。直接呈现对于页面的布局和设计都有极高的要求,原则是高频且重点的内容外露。

(3)交互形式统一。 整个系统里面的交互规则要保持一致,大到弹窗的出现形式是居中弹出还是右侧滑出,小到多选控件是不是一致。 在整个系统里面相同的业务都用同一个控件。虽然可能由于一些业务的特殊性, 需要对控件做个性化处理,但不要影响整体的一致性。 

三、视觉体验层 

(1)信息清晰。 信息清晰不仅指信息结构的层次,还包括页面的内容,最好让用户一眼就能看到上面写了什么,有什么功能。有些设计师不喜欢加黑、大、粗的字, 觉得不够高级,而是根据自己的美感把字体设计为一些个性化字体,且字号不大。

很多时候B端用户的操作时间比C端用户长,他们需要长时间盯着页面,所以页面信息清晰就能减少他们的疲劳。

(2)信息紧凑。 当页面上想要呈现的内容较多时,设计师一定要压缩空间,使布局合理紧凑。

(3)少用图标。 有时候,设计师会使用图标来代替文字表达,并花大精力设计很好看的图标。图标的应用在C端产品中非常常见,一是为了节省空间,二是为了美观。但在B端产品中,大多数情况下,图标越少越好,有时文字的简写比图标来得直观易懂。图标过多用户需要使用很多遍才能记住每个按钮的含义。

四、总结

B端产品设计需要非常重视用户体验。这直接影响到用户的工作效率,转而影响到软件的续约率。 为打造好的用户体验,我们通常从业务层面、交互层面、视觉层面来着手提升用户体验。 很多时候,有些好的交互方案会受到技术框架的限制,导致方案无法实施。

但是为了产品获得更好的用户体验,首要考虑的依然是用户的使用流畅度、易用性,而不是实现的复杂程度、系统现有框架的限制、现有规范的标准。 系统上的难点应当留给内部去解决,把最大的便利性留给用户。这样我们才能获得更好的产品口碑、更高的续约率、更大的市场。


作者:忻芸
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

从流程角度提升用户体验

鹤鹤

一、前言

在B端产品设计中,理解并设计好流程,对产品的体验非常重要。通常涉及到有三个方面的流程:业务流程审批流程操作流程

二、业务流程 

在企业的日常经营中,为了对业务过程进行更好的管理,企业会梳理出一系列流程、规范以及作业标准。流程化能够帮助企业各岗位的员工更好地分工合作,使企业效率更高。对于 B端产品,设计师首先要读懂业务流程,然后才能设计好产品。 业务流程,是指为达到特定的业务目标而由不同的人分工合作完成的一系列活动。活动之间不仅有严格的先后顺序限定,而且活动的内容、方式、责任等也都必须有明确的安排和界定,以使不同活动在不同岗位角色之间进行流转交接。

下图是某企业的采购流程,涉及了五个部门、多个岗位角色、多个业务活动。

业务流程大多是企业根据业务特征、自身经营特点以及资源配置情况而制定的,在业务上具有一定的通用性,但在具体应用上又充满了企业的个性。业务流程和单据是经典搭档,可以说“流程 + 单据=业务”, 每个环节的工作形成一张单据,记录着时间、地点、参与人、业务状况。当这个环站的工作完成后,进入到下一个环节的工作时,单据也会随之流转到下一个系统中对应的功能节点,并形成一张新的单据,记录新的信息。

下图是某企业采购流程中从采购到结算部分涉及的单据:

除读懂业务流程外,我们还需要应用“场景驱动的设计”方法,整理出每个环节中涉及的用户、场景,以及作业的特征,并大胆地通过设计来改造流程,最后通过设计减少人员工作量,减少流程中的多余环带, 提升企业效率。这样才能设计出对客户有价值、用户体验好的产品。企业的收货流程,要经过到货签收、质检、 收货入库等过程,每个环节都会有诸多问题。下面是梳理了某企业收货流程的简易体验地图:

经过对场景和可行性分析后,设计了一套新的业务流程。流程简化为货车司机直接将货物送入指定仓库的电子围栏,并全自动质检、入库,大幅降低了人工成本并提升了工作效率。这一步通常是产品经理去完成,作为用户体验设计师在调研的过程中发现有好的流程优化方法,或者看到好的竞品值得参考,可以和产品经理沟通一起推动产品业务流程用户体验的提升。

三、审批流程 

在企业中,出于对重点业务的管理需求,除了会制定固定的业务流程方便大家协作,还会对业务关键节点做审批。简单的审批只需要在流程进行到关键节点时,将重要结果发给相应业务管理者审批。但是,由于一些企业组织机构复杂,管理严格,为了保证业务的合规与安全,需要多个角色、多个环节的审批,这个流程即是审批流程。


(1)首先员工提交需要审批的材料(系统中是提交单据)。

(2)各环节审批者会根据流程分别对材料进行审批。 

(3)审批通过后会自动进行到下一步。 

(4)审批不通过,就此流程结束。

(5)退回则打回到流程起点,待改进后重新走流程。

(6)审批都通过后,审批流程结束。 

在实际应用中,可能会有非常复杂的流程与功能。比如除常规的审批通过、不通过、退回功能外,还会有改派、加签、抄送等。

(1)改派:当前审批人将审批材料转给其他人。

(2)加签:增加审批的步骤,在一些企业中还会有前加签、后加签。

(3)抄送:将材料同时抄送给某人或某角色。

以上只是列举一些常用的动作,在一些大型企业或者国企,流程和功能更复杂。当面对复杂而多变的审批需求时,需要将审批流程设计得更加灵活、自由,具有自定义功能。另外,需要将审批流程设计得更加模块化,可以在任何一个业务环节中加入审批过程。

在审批流程的设计中, 根据企业制定的审批规则,自动判断是否符合标准,自动审批。尤其对一些每天都在发生、经常重复而不重要的事情,可以完全省去人工审批的过程,采用自动审批,自动触发业务流程,以此来提高审批效率。

四、操作流程 

前面两个流程主要基于企业业务制定,在企业没有信息化前就已经存在了,在改造优化上还有一些阻力和困难。作为用户体验设计师,可以通过对操作流程的优化来改进用户体验。

以上文中的收货案例为例子:

(1)系统中收到若干个质检任务。

(2)逐一打印质检单。 

(3)带着质检单来到仓库,寻找需要质检的货品。

(4)找到货品,逐箱打开进行检查,业务操作不熟练的还需要询问老员工。 

(5) 将质检结果随时记在打印出的质检单上。

(6) 逐一检查完毕,回到办公室,将信息录入系统。

这个过程繁琐,而且在操作的过程中,容易出错。因此根据实际工作中的业务场景,对操作流程进行了优化如下:

整个操作流程省去了“打印单据”“重复记录单据”“询问老员工” 的过程,并简化了“寻找单据”的过程及记录结果的过程。

在对操作流程的设计过程中,也应遵循“场景驱动设计”的方法,并将物理实体、数字实体统一考虑,充分利用各自的特点,尽最简化用户的 操作流程,并降低操作的复杂度。


作者:忻芸
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

7个实用技巧,教你搞定可视化图表

鹤鹤

可视化图表是提升信息传递效率的一种有效方法,特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中,如果没有系统的可视化知识,会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么,在复杂的数据关系中如何设计和选用图表,如何在好看的同时提升信息传达效率,看完这篇文章希望对你的设计过程有所帮助。


// 为什么要数据可视化


数据可视化就是用图表来表示数据信息,它所传达的信息包括你所拿到的数据源和你分析后的结果,再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息,是我们可视化的最终目的。



举个例子,同样一组数据,用表格的形式呈现是很难有所洞察的;如果将各个地区维度的数据聚合以柱图形式呈现,很容易就能看出各个地区间数据的差异,并从中洞察规律


关于如何设计好数据可视化图表,这边总结了三个步骤:选择适合的图表,强化视觉层次,图表响应式适配。


一、选择适合的图表


数据可视化的图表种类繁多,当我们真的开始作图,往往会遇到一个困境:有这么多类型,要如何选择正确的图表呢?首要依据是考虑所要传达的信息意图,即所要制作的图表它的任务是什么,再通过分析数据关系来选择表达方式;第二层意图是图表传达内容,这时候我们就需要根据数据的特征去突出和强化。


1. 分析数据关系

根据数据分析的方式来看,每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构,再结合数据关系作出选择。了解图表的可能知道,一般图表的数据关系有构成、比较、分布,以商业数据为例,常见的还有流转关系。



构成关系

构成关系的图表表达的是部分和整体的关系,用于分析总体和各部分的占比比例,构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小,也可以使用比较关系的图表。

常用图表:饼/环图、堆叠图、面积图等,如涉及到层级结构,还会用矩形树图或旭日图等特殊结构图表。

关键词:“占比、比例、百分比”



比较关系

比较关系是基础分析中常用的一种图表类型。在一定的取值范围内,通过对两个或两个以上的指标分析,可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式,趋势对比用于表示一段时间内数据的变化,分类对比用于比较数据规模。

常用图表:趋势对比常用图表有折线图、散点图等;分类对比常用条形图、柱状图、气泡图等。

关键词:“增减、升降、涨跌、波动”



分布关系

利用空间分区来展示数据之间的分布关系,常用于体现两个或以上数据的相关性。

常用图表:散点图、热力图、雷达图等

关键词:“随着……而变化、A/B之间的相关性、交/并集”等



关联与流转

流转关系是B端数据常用的一种关系,它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等,以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。

常用图表:关系图、桑基图、漏斗图、进度图等

关键词:“流程步骤、留存、转化、关系”



2. 分析数据特征

按数据关系和分析目的选择好图表类型后,第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有:变量特征、维度特征、层级特征、流程特征。


变量特征

分辨一个指标通常有两类特征,按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势,离散数据通常统计各分类下数量的变化。

  • 连续型数据:指在一定区间内可以任意取值的数据叫连续数据,其数值是连续不断的。如身高、体重等带有时间因素变量的数据等,通常用折线图体现变化趋势。
  • 离散型数据:指其数值只能用自然数或整数单位计算的数据。如当天销量、进店人数等表示分类类型的数据,用柱图表现更加体现变量的特征。


维度特征

多维度分析需要将多个变量在同一平面上直观的表示,可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据,可使用不同颜色进行分类

  • 根据分析视角选择图表:对于多维度变量的数据我们需要明确分析的视角,去找准对应的数据映射。如案例中多个班级的科目成绩的这组数据,如需要全局视角查看个班的综合素质,推荐使用雷达图;对比单科成绩的变化分布,则推荐使用堆积图。


层级特征

多层级数据由多个部分构成一个整体,又称树形结构数据。除了用结构树图表表现以外,还可以考虑以下两种图表类型:

  • 矩形树图:突出子层级占比大小。最初是用来显示计算机硬盘驱动器上文件的结构和大小,它以面积的形式突出展现各个子层级节点的占比,可帮助用户看到数据的层次结构以及各层级之间的关系。


例如:上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额,通过色调来区分不同类型,颜色的深浅代表分类下的子集,面积体现销售占比。对比一般结构树图表,它的优势在于可以有效利用空间。

  • 旭日图:突出细分层级关系。由多个圆环图嵌套而成,也称为径向树图,它既能像饼图一样表现局部和整体的占比,又能像矩形树图一样表现层级关系。常用于细分分析方法,将事物从大到小进行拆解。每个级别的数据通过1个圆环表示,离原点越近代表圆环级别越高。 旭日图在显示一个环如何被划分为多个层级时最有效,而矩形树图适合比较相对大小。


流程特征

流转关系是表达数据转化流程的重要类型,不仅包含统计意义上的数据总和,同时还表达了信息流转的路径;其中桑基图和漏斗图都可以表达路径中流量的变化,不同的是桑基图重点强调流量的强度和走向,漏斗图更加注重突出转化率和效果,根据不同的表达目的选用。



二、强化视觉层次


选择合适的图表后,在信息传达上也需要正确的表达,展示形式美观的同时能够清晰的体现数据特点。


1. 强化数据特性

使用图表正确的表达信息,需要设计师在强化数据特性的同时避免偏差

  • 趋势易感知:折线图数值如过于平均导致趋势平缓,有时候无法体现偏差;在强调数据趋势的场景下,推荐用动态取值范围让波动保持在一定范围内,放大波动占比更突出趋势。


  • 展示更准确:柱状图依靠柱体面积体现最终数值,使用动态范围截断将会导致数据解读不完整;始终将 y 轴从 0 开始,才能更准确的反映柱图中的值。


2. 色彩视觉传达

除了在设计构图上优化以外,颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知,错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板,精确传达信息同时后续的项目在选用时也可以达到用色的统一。



我们在之前的文章里有介绍过图表的取色模型,通过调整颜色HSL值的区间,可以得到以下三种意图色板:

  • 定性型-分类色板:用于区分不同的类型,又称为无序色板。适合区分没有内在顺序的类别
  • 定量分歧型-发散色板:通过两边互补色来体现,具有明亮的中间值,然后以不同的色调在刻度的两端变暗。通常用于可视化负值和正值
  • 定量顺序型-顺序色板:从亮到暗或相反的渐变。适合可视化从低到高的数字。

那么我们要怎么样去使用这些色板呢?下面几个案例将带你了解其中的差异。


定性型:使用色调来进行分类

数据内在没有顺序差别时,建议使用色调值(H)进行区分;如定义国家、行业等类型。如果希望图表看起来更加专业,以下有几项分类色板的小建议:

  • 选取尽量少的色调:取色时无需使用整个色环,使用邻近色或互补色的取色方式显得更加专业。


  • 色板适度明暗交替:一些视障人士无法区分色相,主要靠颜色的明暗差异来识别,通过饱和度和暗度的调整,创造明暗交替的色板。


定量型:使用深浅色板强调内在顺序

如果在同一个分类下包含子类别,或者数据本身具有排名属性,那么建议使用连续色板来突出他们内在的顺序,使图表更加易读。

  • 顺序色板-选择合适的插值:根据数据的分布情况选择不同的的插值断点,突出数据的差异。如以下案例中,根据统计学概念设定不同的取值区间,左侧示例使用的是平均线性差值,反映的是数据的集中趋势;右侧示例使用的是中位数插值,能更好的体现数据分布的形态。


  • 发散色板-关注对比色的识别性:尽量避免红绿配色,如需使用绿色,偏黄或偏蓝的绿色更易分辨,对视障人士也更加友好。


三、图表中的响应式设计


B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报,在基础设计完成后还需要考虑到图表展示的环境,根据不同端去适配显示效果,以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。


1. 布局框架适配

在网页端显示时,有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态,将非必要的的元素转化或隐藏,保留重要的图形元素去适应当前空间;元素隐藏后使用悬浮交互来保证信息的展示,保持图表的可读性同时也避免产生元素的重叠。



如案例中的图表,在不同尺寸下通过改变和隐藏图表元素,以达到适配当前空间的效果。

2. 图表元素适配

要适配移动端,网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外,还需要考虑手机屏幕的尺寸和图表元素的适配性,去兼容相关的交互操作。

  • 信息浮层:在图表中,信息卡元素是传达信息内容的重要组件,在网页端中悬浮展示,通常会占据很大空间;图表适配移动端后,信息浮层改动到图表上方常驻显示,并跟随手指的滑动变化响应数值,完整展示信息的同时也避免了页面抖动。


  • 坐标轴标签:过长的坐标标签在适配过程中会产生重叠,而省略也会造成信息展示的不完整。我们需要针对不同的坐标轴类型给出响应的规范。如文本类轴标签我们可以采用省略、换行、旋转等方式适配,避免信息的缺失。针对有连续型的数据类坐标轴我们可以使用抽样、转化单位等方式适配,精简空间避免堆叠。


3. 极值适配

因B端平台的特性,我们无法预知客户传入的数据量,可能会遇到因数据量过多,造成图表显示不佳,数据读取困难等问题。这种情况下,提前考虑数据极限场景,通过交互的形式变化的方式让用户获取完整信息,提升理解同时信息展示更灵活。

  • 缩放和平移:在数据范围过多时增加取值范围的缩略轴组件,通过限制展示范围让数据量显示可控。


  • 互动切换视图:如果折线的类别过多且无法省略的,建议分组查看。默认状态仅当前组折线高亮,其他数据以浅色显示,通过切换的方式查看其他组别的信息。


  • 悬浮鼠标高亮:在分类过多不好分辨时,可使用悬浮高亮的交互方式突出相关联的数据组。


还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因,在这篇文章就不做深入讲解了,以后可独立介绍。


// 结语


数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确,才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据,确保用户能够更好的接收信息,才是可视化的关键。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

视频便捷手势 交互设计探索

鹤鹤

一、前言

视频播放器中承载着极其丰富的内容画面和播控功能,尤其是在寸土寸金的移动端视频播放器中,为使内容更沉浸消费,需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下,合理的手势设计不但可为界面“减负”,还可帮助用户更快捷触达功能、提升操控便捷性。


视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知,如「单击 暂停」、「双击点赞」、「长按快进」、「横滑导航」、「纵滑切视频」、「双指捏合缩放视窗」等通用手势。

那么如何在保留用户对于常规通用手势认知的基础上,进一步对视频场景中的手势交互进行扩容升级?这也是我们接下来在手势进阶交互上的重点探索方向。

本次针对百度APP中的视频播放器场景,为提升手势操控效率,我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型,以探索如何在视频场景中构建便捷高效的进阶手势体验设计。

二、什么是「组合手势」

「组合手势」是基于常规手势的组合扩展,其通常由两种或两种以上的常规基础手势所构成,若组合方式及使用场景得当,可助力用户更便捷的触达功能。

以前述的视频场景常规手势为例,其触发机制一般可分为两个阶段:step1交互信号step2执行任务,即用户通过某一基础手势发出交互信号,系统收到信号确认后便可立即执行任务,但整个过程是线性的,手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。

于是我们在现有常规手势两阶段触发机制的基础上,尝试引入「意图识别」环节,并梳理出「组合手势」的设计模型,以探索不同基础手势相互组合后的扩展可行性。

「组合手势」触发一般可分为三个阶段:step1交互信号step2意图识别step3执行任务,前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。

由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口,因此,其差异化创新具有较大设计灵活度,尤其需根据具体的使用场景进行综合考量。

三、「长按组合手势」激活快捷菜单

1.项目背景

百度APP视频场景早期的播控功能较少,如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。

随着后续视频场景的功能建设日渐完善,我们便在基础菜单面板中拓展了一行视频菜单,专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项,菜单面板弹出后还需左滑才可露出后面的功能入口,因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。

2.竞品调研及选型

通过对竞品进行调研,我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型,  分别为:长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。

选型A

「长按触发独立播控面板」:通过长按手势可激活从屏幕底部弹出的独立播控面板,此方案扩展性较强,但对视频沉浸观感体验有一定的打断感;


选型B

「长按触发浮层播控选项」:通过长按手势可触发置于视窗上层的浮层选项入口,一定程度上可延续视频观看的沉浸体验,但浮层扩展性有限;


选型C

「长按触发特定播控功能」:通过长按手势触发特定的某个播控功能(如长按“快进”),一定程度上可满足此功能的重度用户,但对于长按手势的使用效率较低;

3.设计方案

1)长按手势交互扩容

针对目前视频播控菜单存在的问题,经过和业务对上述三种长按交互选型方案进行综合考量,最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置,并探索一套更便捷的触发机制,以此对视频场景中的播控菜单进行设计升级。

但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据,用户对此功能的使用频率高、并已形成较深的操控认知,若直接下线“快进”功能则会对用户使用习惯产生较大影响,尤其是视频场景的重度用户。

那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢?是否有可能将“快进”和“快捷菜单”进行融合?这也是本次项目对于便捷手势体验的重要设计探索点。

基于此,我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义,通过「长按+滑选」的机制触发快捷菜单功能项,以缩短视频常用功能路径。对应到设计模型的三个阶段分别为:

step1:以“长按手势”创建一个新模式,即发出交互信号并唤出浮层菜单;

step2:若用户未松开手指,则系统默认开始识别用户意图,是否有以“拖拽手势”滑选至目标功能项以选择功能;

step3:用户滑选锚定至目标功能后,松手释放即可完成最后的功能执行确认。

「长按+向上滑选」快捷触发对应功能项;

「长按+向下滑选」快捷触发“快进”(一定程度上兼容老用户对于此功能的使用习惯)。

2)容错性兼容
在设定「长按+滑选」组合手势的同时,考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程,我们同时也支持点选的操作模式,即用户长按后若未产生滑选行为便松手,则松手后依然可通过点选的方式触发对应播控功能项。

3)易用性打磨

差异化的创新设计形式在前期总会面临质疑和挑战,本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式,于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试,以预期在上线前可先收集一波体验问题进行快速打磨优化。

我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本,并邀请了10+名不同年龄段的目标用户进行访谈测试。

测试访谈的过程中,被测用户在进行1至2次尝试操作之后,均可掌握如何使用「长按+滑选」的组合手势,这也为我们增添了不少信心。

同时,我们通过观察用户操作行为及用户主动反馈,发现仍有部分易用性细节可进一步打磨优化。

3.1 )扩展触发热区:

考虑到单手握持手机的使用场景,可尽可能扩大定义长按手势的触发热区,屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外,其它大面积区域热区均可支持长按触发快捷菜单,以降低触发难度、提升易用性。

3.2 )支持跟手触发:

长按后浮出的快捷功能项,其浮出位置支持跟随手指的纵向触发位置而浮出,可减少手指在屏幕上的位移距离、操控更便捷。

3.3 )实时提示及响应反馈:

灵活判断当前手势触控状态(如滑入选择 / 松手触发),在界面中即时给出相对应的引导提示或振感反馈,以帮助用户快速适应新的手势触发机制。

方案上线及验证

以AB实验对本次设计方案进行定量测试验证:

「对照组」效果:长按触发“快进”(各播控功能入口仍归置于基础菜单面板之中);

「实验组」效果:长按触发“快捷菜单”选项(支持滑选和点选模式);

小流量实验上线后,经过近半个月的观察,大盘指标稳定、播放完成率等满意度指标稳步提升。

「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升,说明用户对部分高频功能的确有很强的快捷触发诉求。

「实验组」的“快进”虽多了一步触发步长,实验前期“快进”使用率不及「对照组」,但随着用户对于「长按+滑选」手势整体的使用占比持续走高,通过滑选触发“快进”的操作习惯也快速被培养起来,对于用户来说,长按快捷菜单带来的整体收益是大于折损的。

二期扩展方案
随着长按快捷菜单的上线推全,长按手势的渗透率也持续走高,用户逐渐对视频场景更多的播控功能有了长按触发的诉求,于是我们对长按菜单进行了二期的设计升级,在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能,用户通过长按后的可选播控项增多,播控功能整体的使用量得到进一步提升。

四、「组合手势」拓展探索

手势交互是用户在现实世界行为的映射,无论是基础手势还是组合类高级手势,都须符合用户认知习惯、并融入具体的使用场景中进行设计。

以「组合手势」设计模型为指导基础、并结合具体的项目实践,我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。

1.「右滑返回手势」激活“小窗播放”

“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。

基于用户的此种操控意图,我们以“右滑返回手势”发出交互信号而触发浮出小窗入口,随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图,若有短距上滑拖拽行为,松手释放即可快捷激活视频小窗,以提升观看体验的连续性。

2.「双指手势」激活“满屏播放”

“双指拖拽手势”可拖拽并清屏视窗画面,以此手势发出交互信号,若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为,则松手释放即可快捷激活“满屏播放”,以满足更沉浸视频浏览体验。

五、结语

便捷手势的设计出发点是为提升操控效率、缩减功能触发路径,从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发,后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

“老字号”互联网产品的年轻化之路

鹤鹤

一、项目背景

百度文库APP是一个在线文档分享平台,上线已有十余年的时间,是一款名副其实的老字号互联网产品。随着互联网的成熟以及年轻用户的涌入,时代语境和流行文化发生了变化。年轻化设计已经成为互联网产品设计中不可避免的话题。在日常对用户反馈的监测中,我们发现文库APP当时的体验已经不能满足用户多样化的需求。并且在体验走查以及用户访谈中发现,文库APP的视觉风格、交互方式、使用感受都存在老旧、不贴合流行趋势的问题。

二、由内而外,打造年轻化感知

通过对年轻市场进行洞察,我们发现年轻用户对产品的需求是多维度的。不仅对产品的“颜值”有高要求,他们更追求使用时的便捷和流畅度。他们对新鲜事物的接受程度更高,也更愿意去探索产品新的玩法,与产品进行沉浸的情感互动。

所以此次年轻化改版不能只是对“产品的外表”进行升级,要从视觉、体验进行全方位、多维度的年轻化升级。由内而外的打造年轻化感知。



三、“老字号”互联网产品的焕新之路

2.1 视觉升级-更好看















2.2 体验升级-更好用









写在最后

从UI设计诞生初期,设计师在屏幕上模拟现实世界的交互方式,用拟物化的设计风格帮助用户熟悉UI界面操作。到现在用户对移动屏幕越来越熟悉,设计师们可以在产品设计中去尝试更多的可能性。产品与用户共同成长才是年轻化设计的意义。

未来,我们也会保持好奇心和探索欲,不断打磨产品体验,与用户共同成长。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


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


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


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

设计的价值是保障产品用户健康度

鹤鹤

宜家的设计为销售负责。比如设计一个杯子,宜家的设计师需要考虑如何更多的卖出杯子。没错,销售更多的产品是设计师的KPI。在这样的目标导向下,设计师很容易去思考几个问题。

  • 一定成本的杯子,用户为什么要买我的产品?解决做好产品设计的动力。
  • 杯子的使用场景和定位,是刷牙杯、还是咖啡杯,它应该是家用的、还是在高端的商业场所出现?基于成本出发,对设计、原材料和制作工艺的思考。
  • 杯子在售卖时期的陈列、互动形式应该是怎样的?基于如何能售出更多,解决产品的流量获取问题。
  • 杯子在使用过程中的手感、方便性。基于用户感受和体验,解决产品和用户互动的故事性,口碑问题。

众所周知,宜家的产品是场景化的,总能让人感受到设计师们的热情、心血和心机。设计为销售负责,售出更多的产品确实可以作为设计有效性的验证方式之一,但销售量却不能作为设计的量化标准。

这两者之间有很微妙的差异。我们引入一个概念叫做“数据趋势的正向反馈”来解释这个问题。“数据趋势的正向反馈”,它具备允许波动,且不为一个具象的数值服务的特征。类似下图示:

设计为销售负责,我们可以理解为,衡量好设计的其中一个维度标准就是销售“数据趋势的正向反馈”,值得注意,不是销售量的某个单一的KPI值。因为达成某个销售量的KPI值有很多手段,设计策略、产品策略、运营策略和营销策略等等方式都可能完成,如果用销售量去衡量设计,会让设计变得不够纯碎。但是,用“数据趋势的正向反馈”来衡量设计是否有效,用户是否认同却是可行的。而且,“数据趋势的正向反馈”意味销售量是持续增长的,哪怕有波动,哪怕有快慢,长期看能够持续增长代表用户是健康的。设计价值是为产品带来健康用户,或者说是保障产品的健康度。产品健康度一般看几个值。

用户跳出率

用户跳出率指只访问了入口页面就离开的访问量与所产生总访问量的百分比。通常互联网的平均跳出率大致是73%,如果你的产品跳出率超过这个值,说明用户质量不高。

平均访问时长

平均访问时长指用户在一次访问中,平均使用产品的时间。互联网的平均访问时长大致是2分40秒。

平均访问页数

平均访问页数=浏览量(PV)/访问次数。互联网的平均访问页数大致是2页。

除此之外,产品还会从营收的角度看用户支付金额、ARPU值和转化率等等。营收指标对与设计来说,就是需要参考的趋势数据了。了解了这些原理,怎么做呢?我们用首页改版为例,首先按上述要求定义用户健康度指标。假设首页承载电商内容,根据电商特性在基础指标之上,增加一个用户在首页的停留时长指标,这个指标衡量用户是否能在首页逛起来。

依据这些指标,就可以搭建针对于当前项目的用户健康度指标,在设计过程中通过对指标和指标用户的数据分析和对指标用户的访谈综合得出项目的核心问题及解决思路。通过线上验证设计方案观测数据模型的趋势变化,以获得最优的设计。设计在保障产品用户健康度上,是一个持续迭代的过程。

产品没有最健康,只有更健康。

作者:ZA大人

转载请注明:站酷

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


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


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


2023最新设计趋势预测!酸性设计、NFT持续爆火!

鹤鹤

设计趋势每年都在不断地变化及轮回,多年前的风格技法在结合了当下的设计元素后,又会给我们展现出不同以往的主流时尚。

“趋势不一定每年都会更新,但趋势是我们设计的风向标。”

基于对网络数据的搜集及分析,我们对2023年设计趋势做出了预测。

无论是否顺应趋势,我们都应该了解趋势,拥抱变化,这才是我们设计师的准则。

NO.1 3D立体元素

借助当今的软件和技术,3D创作已经不再被神话,越来越多的设计师开始在自己的作品中运用3D元素。





下图是Droga5为格林威治(Greenwich)创作的一系列视觉设计,这组设计利用3D图形,创造了更醒目的视觉效果,将格林威治宣传为伦敦的新创意社区。



在手机品牌宣传物料中,设计师将3D元素与手机进行了紧密结合,这样的视觉样式在市场中很快便能脱颖而出。



NO.2 酸性设计

提起“酸”,大家下意识会想到酸的味道,而所谓的酸性设计更多表现的是一种设计理念。

酸性设计大多画面元素丰富,各种金属、玻璃、流体渐变、镭射等科技感的元素都会运用其中,这也导致这类作品十分强调艺术的视觉冲击性。



乍一看酸性设计会给人一种混乱失调的感觉,而实际上酸性设计并不止是某一种单一的设计风格,而是一种视觉情绪的表达。当下的暗黑金属风、二次元的可爱风、明显的幻彩渐变风格……往往都含有酸性设计的影子。



NO.3 复古怀旧风

回看设计领域每一年的发展,“复古怀旧”一直是必不可少的关键词。

无论是品牌形象,亦或是包装设计,设计师们频频用现代手法诠释复古之风。



还有传媒集团CNET的品牌重塑,在现代时尚元素的基础上,还融合了复古插画,整体设计从1950-1970年代的美国新闻行业中汲取的灵感。



NO.4 艺术衬线字体

最近,衬线字体在品牌设计中的出镜率极高。

不少网站的设计都是围绕着衬线字体作为构图中唯一或主要的设计元素而存在。





Stradivarius是诞生于1994年的西班牙女装品牌,与ZARA隶属同一公司。

2022年2月初,Stradivarius推出了全新的Logo视觉,衬线字体更容易彰显女性简洁现代的气质外,同时兼具女性力量。



NO.5 NFT艺术

近两年,NFT可以说是对设计、艺术、技术行业产生冲击最大的新事物之一了。



NFT与平面设计联系起来,就是我们所说的数字平面艺术。它的到来对设计师影响有很大变化,横向能力要求有所提高,比如了解虚拟数字化设计,以及对全新审美和新三维技术有更高的要求。

以下这幅《Metafisica》便是非常热门的NFT作品。



NO.6 超萌趣emoji

表情符号在如今是一个超越文本并能得到广泛认知、跨越文化和多领域的视觉语言。



单一的枯燥图标很难满足多元化场景下情感的表达,于是,动态emoji图标来了,它能带来更强的视觉欣赏体验。



NO.7 高饱和度撞色

高饱和度色彩是年轻的色彩,它是先天的乐天派,同时也是情感的直接表达。

可尽管“吸睛”对品牌而言十分重要,但在设计之余要注意色彩平衡,以免混用色彩,很容易引起视觉疲惫。





NO.8 极简化设计

极简主义杜绝一切多余的装饰,形成独特而简单的视觉语言,用最简洁的表现形式勾勒出产品最基本的形态



简洁的图形设计摒弃了多余的图案、文理等装饰样式,为真正重要的信息创造了呼吸的空间。

留白,是最高级的美。



NO.9 氛围手写字体

将富有表现力的手写字体写在设计中,能为作品带来不一样的氛围感。

随手一写,便是一幅“画”!





NO.10 玻璃拟物化

2022年,我们在Dribbble或Behance中会发现很多设计师都开始有意识地采用“玻璃拟物化”美学的设计。相信在2023年,我们会看见更丰富的表达~

毛玻璃效果广泛应用于UI设计之中,在摹客DT中也能快速完成。



使用玻璃拟物化设计的界面,由于毛玻璃的通透性,会呈现出一种虚实结合的美感。



除此以外,我们还可以看到的,这一趋势已经明显转移到了玻璃和水晶质感上,而且以令人难以置信的用立体拟真度将图形设计提升到了一个全新的高度。所以,2023我们也将看到更多与全息和3D趋势相辅相成的透明质感和逼真的玻璃背景等元素的设计。



结语

2023年的设计趋势给我们展示了设计的无尽可能,设计师们可以创作出更多超乎寻常的非凡设计,为用户营造出独树一帜的全新体验。

身为设计师,我们要持续积累优质的设计素材,要知道设计趋势因人而异,我们能做的就是选择合适的风格应用在设计中,才能发挥它不可估量的价值!

作者:摹客设计云

转载请注明:站酷

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


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


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


“老字号”互联网产品的年轻化之路

鹤鹤

一、项目背景

百度文库APP是一个在线文档分享平台,上线已有十余年的时间,是一款名副其实的老字号互联网产品。随着互联网的成熟以及年轻用户的涌入,时代语境和流行文化发生了变化。年轻化设计已经成为互联网产品设计中不可避免的话题。在日常对用户反馈的监测中,我们发现文库APP当时的体验已经不能满足用户多样化的需求。并且在体验走查以及用户访谈中发现,文库APP的视觉风格、交互方式、使用感受都存在老旧、不贴合流行趋势的问题。

二、由内而外,打造年轻化感知

通过对年轻市场进行洞察,我们发现年轻用户对产品的需求是多维度的。不仅对产品的“颜值”有高要求,他们更追求使用时的便捷和流畅度。他们对新鲜事物的接受程度更高,也更愿意去探索产品新的玩法,与产品进行沉浸的情感互动。

所以此次年轻化改版不能只是对“产品的外表”进行升级,要从视觉、体验进行全方位、多维度的年轻化升级。由内而外的打造年轻化感知。



三、“老字号”互联网产品的焕新之路

2.1 视觉升级-更好看















2.2 体验升级-更好用









写在最后

从UI设计诞生初期,设计师在屏幕上模拟现实世界的交互方式,用拟物化的设计风格帮助用户熟悉UI界面操作。到现在用户对移动屏幕越来越熟悉,设计师们可以在产品设计中去尝试更多的可能性。产品与用户共同成长才是年轻化设计的意义。

未来,我们也会保持好奇心和探索欲,不断打磨产品体验,与用户共同成长。

作者:百度MEUX

转载请注明:站酷

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


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


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

如何有效提升产研效率和质量

鹤鹤

前言

互联网瞬息万变,在产品不断更迭的过程中,我们经常说要保证产品设计的一致性和质量,提升产研链路的效率。但现实情况是:产研团队长期面对的是产品越来越复杂,体量越来越大,一个个复杂的产品下包含N个业务线,N个业务团队,甚至还有外部合作的业务,每个迭代都要面对数以百计的功能上线,经常容易出现各种相同但不一致的功能,上线质量参差不齐,执行者也容易陷入日复一日的需求海洋而没有更多精力去挖掘更有价值的事情。


所以如何解决团队效率和产品质量问题?我们的解法是抽象体系化的解决方案:设计模式化和代码化,设计从原子到全局进行统一和优化,并形成系统化的设计指导,由开发进行模式代码化,提供灵活可配置的规则。以此,设计有更系统化的设计原则,整体的统一性和体验有保障,设计和开发周期也可以缩减,甚至大部分日常需求可直接由产品对接开发直接上线。



目录

  • 一、什么是系统化解决方案,什么样的团队适合做
  • 二、如何输出、推进设计解决方案
  • 三、解决方案的管理和发展

(一)什么是系统化解决方案,什么样的团队适合做

1.1 什么是系统化解决方案?

大多数日常需求大多是从单点出发,当点变多变复杂了,就容易出现上述说到的现状问题。所以解决方案需要基于业务全盘进行设计抽象:从元素——组件——区块——页面——功能流程沉淀设计规则并代码化,来灵活提供拼装N个不同页面的机制,帮助团队更系统化的进行产品设计。从组成内容不难看出,解决方案是需要建立在基础组件基础上,与基础组件、复杂组件、行为模式共同组成设计系统的【功能模式】部分。





1.2 什么样的团队适合做

解决方案是一套相对稳定的设计机制,所以在产品初期或团队建立初期,产品可能经常会调整的情况下,并不适合做。初期可以借助成熟的设计系统来减少投入成本。而到成长期可以根据业务的发展梳理基础元素、组件,选择性的建立部分稳定且利用率高的解决方案,并持续发展,保证解决方案可以起到指导和提效的作用。随着产品或团队逐渐成熟,解决方案也应该随着一起成长,相互影响相互作用。


(二)如何输出、推进设计解决方案

2.1 由大到小的进行信息拆解

1)对产品页面(尤其是重点功能)进行盘点,划分页面类型:比如列表、表单、详情、dashboard;

2)对页面中的内容进行区块归类

3)对区块中的信息进行拆解



这三个过程下来,对于问题、规则、规律都会有一定的概念。以一个后台系统为例

1、页面大类主要是:列表、表单、详情。

2、其中列表的内容大致区块分为:页面标题区、列表操作、列表筛选、列表内容,到这个阶段已经可以发现,相同区块位置就存在不稳定,在后台系统中可能影响面不会非常大,但对于内容复杂繁多的工具或C端界面就会容易出现找不到的情况。

3、不同区块的内容拆解,同样也会发现一些细节问题,比如筛选的样式、规则不一致,列表操作的方式、位置、样式、交互不一致等等



2.2、抽象、重组:从布局——区块——组件——设计规则

从第一步全盘的信息拆解和归纳, 已经发现问题, 这一阶段主要2点:第一是如何通过设计规则来避免同样的问题产生,第二是如何通过简单的规则重组减少多人合作记忆复杂度。思路类似于设计一个界面,首先得有一个布局划分,不同的区块要放些内容,再到区块里的细节内容规则,从而抽象出由布局到区块的设计规则和可复用的组件。

以前面说的列表为例

1) 区块主要是4类,明显的问题是区块位置不稳定,所以在布局结构上,需要定义1-2个稳定的可配置的布局框架来适应不同的内容



2)不同区块梳理组成内容,内容细则



3)标记出可组件化的内容及规则



4)提炼整个过程中通用的设计规则,作为全局的指导。如:国际化、排版规则、超限规则、适配规则、文案规则等等。

通过布局——区块——组件——设计规则,可以灵活的进行页面拼搭



2.3 落地代码库 

区分通用层和业务层,通用层落地到通用模板市场,利用脚手架生产新页面。业务层面的落地则是基于通用库封装具备业务属性(如:业务主题、业务数据、业务拓展方案)的业务库来生产新页面。

目前群核设计团队建立了一套平台通用的解决方案,适用于所有中后台产品。业务属性比较强的产品也基于通用解决方案封装业务层面的解决方案,同样的思路也应用在不同体系的工具场景中。整体实践下来,产研效率提升近50%,甚至完全解放了一条业务线的设计资源。产品体验的一致性、上线质量也有明显的提升



三、解决方案的管理和发展

解决方案作为设计系统的一部分,与设计系统一同管理,业务设计师使用系统来输出,反馈问题或需求给系统,有系统设计师判断可行性,周期性的管理,及时更新并在内部互通,促进互相成长和发展。

解决方案与设计系统的发展有一点不同的是解决方案有更多业务化的内容,业务团队根据业务迭代维护解决方案。当业务的方案达到通用级别,则列入到通用库。



这些方法和思路也并不限制行业或产品类型,仅是在我们当前服务的产品体系下总结的方法。当然解决方案并不能解决所有问题,只是希望在提供更系统化的设计方法和模式的同时能减少重复工作提升效率,让产研团队有更多的精力和时间投入更有价值的事情。

作者:酷家乐UED

转载请注明:站酷

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


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


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



日历

链接

个人资料

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

存档