首页

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

鹤鹤

本文介绍了一个案例研究，是作者在一家拥有 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咨询、用户体验公司、软件界面设计公司


评论(0) 浏览(1504)

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咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1990)

【Vue】webpack的基本使用

前端达人

文章目录

webpack的学习目标

  1. 理解什么是前端工程化
    • 转变对前端开发的认知
  2. 了解webpack的基本用法
    • 为后面Vue和React课程的学习做技术储备
  3. 不强制要求大家能手动配置 webpack
    • 一定要知道webpack在项目中有什么作用
    • 清除webpack中的核心概念

前端工程化

小白眼中的前端开发 vs 实际的前端开发

  1. 小白眼中的前端开发
    • 会写HTML + CSS +JavaScript就会前端开发
    • 需要美化页面样式，就拽一个bootstrap过来
    • 需要操作DOM或发起Ajax，再拽一个jquery过来
    • 需要快速实现网页布局效果，就拽一个Layui过来
  2. 实际的前端开发
    • 模块化（js的模块化，css的模块化，资源的模块化）
    • 组件化（复用现有的UI结构，样式，行为）
    • 规范化（目录结构的划分，编码规范化，接口规范化，文档规范化，Git分支管理）
    • 自动化（自动化构建，自动部署，自动化测试）

什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中，把前端开发所谓的工具，技术，流程，经验等进行规范化，标准化。
企业中的Vue项目和React项目，都是基于工程画的方式进行开发。

好处：前端开发自成体系，有一套标准的开发方案和流量。

前端工程化的解决方案

  1. 早期的前端工程化解决方案
    • grunt
    • gulp
  2. 目前主流的前端工程化解决方案
    • webpack
    • parcel

webpack的基本使用

什么是webpack

概念： webpack是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。

列表隔行变色项目

步骤

  1. 新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件package.json
  2. 新建src源代码目录
  3. 新建src->index.html首页和src->index.js脚本文件
  4. 初始化首页基本的结构
  5. 运行npm install jquery -s命令，安装jQuery
  6. 通过ES6模块化的方式导入jQuery，实现列表隔行变色的效果
    在这里插入图片描述 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> ul>li{这是第$个li}*9 </body> </html>  
        
    

            
  • 
                1
            
    • 

            
  • 
                2
            
    • 

            
  • 
                3
            
    • 

            
  • 
                4
            
    • 

            
  • 
                5
            
    • 

            
  • 
                6
            
    • 

            
  • 
                7
            
    • 

            
  • 
                8
            
    • 

            
  • 
                9
            
    • 

            
  • 
                10
            
    • 

            
  • 
                11
            
    • 

            
  • 
                12
            
    •

在这里插入图片描述

在这里插入图片描述
import和require导入模块的区别
1、require对应导出的方法是module.exports,
import对应的方法是export default/export

2、require 是CommonJs的语法
import 是 ES6 的语法标准。

3、require是运行运行时加载模块里的所有方法（动态加载），
import 是编译的时候调用（静态加载），不管在哪里引用都会提升到代码顶部。

4、require 是CommonJs的语法，引入的是的是整个模块里面的对象，
import 可以按需引入模块里面的对象

5、require 导出是值的拷贝,
import 导出的是值的引用
6. require是node.js带有的 CommonJS语法里的东西，可以在终端中运行
如果要在浏览器端运行 我们要使用import这个es6语法
js代码 

//导入模块 // const $ = require('jquery') import $ from "jquery"; //定义jquery入口函数 $(function () { $('li:odd').css('background-Color', 'red') $('li:even').css('background-Color', 'pink') })  
        
    

            
  • 
                1
            
    • 

            
  • 
                2
            
    • 

            
  • 
                3
            
    • 

            
  • 
                4
            
    • 

            
  • 
                5
            
    • 

            
  • 
                6
            
    • 

            
  • 
                7
            
    • 

            
  • 
                8
            
    • 

            
  • 
                9
            
    •

将js文件导入index.html之后，发现没有效果，这时我们就需要webpack工具了，将语法进行重新编译，把es6语法转化为es5语法。

在项目中安装并配置webpack 

npm i webpack@5.42.1 webpack-cli -D  
        
    

            
  • 
                1
            
    •

生产依赖
在这里插入图片描述
创建webpack.config.js配置文件并写入
在这里插入图片描述 

//使用node.js的导出语法向外导出一个webpack的配置对象 //导入模块并进行导出内容，这样写会比直接导出内容多一个记录信息的txt文件，当然我们也可以使用es6语法进行导入导出，大家可以私下去了解。 const { Module } = require("webpack"); Module.export = { mode: 'development' } //也可以直接导出内容 // module.export = { //     mode: 'development' // }  
        
    

            
  • 
                1
            
    • 

            
  • 
                2
            
    • 

            
  • 
                3
            
    • 

            
  • 
                4
            
    • 

            
  • 
                5
            
    • 

            
  • 
                6
            
    • 

            
  • 
                7
            
    • 

            
  • 
                8
            
    • 

            
  • 
                9
            
    • 

            
  • 
                10
            
    • 

            
  • 
                11
            
    •

在package.json配置文件中的script中写入声明

在这里插入图片描述

最后执行npm命令进行编译，有一个注意点就是node.js版本需要是17版本以下的不然会出错，当然应该有其他解决办法，但博主不会，只好退回版本
执行 npm run dev 这个命令，可以看到src里的index.js和jquery.js都被压缩了。
在这里插入图片描述
会生成一个编译后的文件夹
在这里插入图片描述
将main.js文件导入index.html.，不用导入index.js。
在这里插入图片描述
打开页面就可以成功显示了
在这里插入图片描述
mode的可选值
mode节点的可选值有两个，分别是：

  1. development
    • 开发环境
    • 不会对打包生成的文件进行代码压缩和性能优化
    • 打包速度快，适合在开发阶段使用。
  2. production
    • 生产环境
    • 会对打包生成的文件进行代码压缩和性能优化
    • 打包速度很慢，仅适合在项目发布阶段使用
      开发的时候使用development，打包速度快，上线的时候使用production，体积小。

webpack.config.js的作用

当我们使用npm run dev这个命令的时候，会执行package里的dev里的内容，在这里插入图片描述
dev里写的webpack，那么它就会执行weboack.config.js这个文件里的内容，根据里面的内容再进行打包。
在这里插入图片描述
webpack中的默认约定

大家可能有个疑问，就是打包的时候为什么会打包index.js这个文件，它是怎么寻找的路径等问题。

在webpack4和5的版本中，有如下的默认约定，找不到就会报错。

  1. 默认的打包入口文件为src -> index.js
  2. 默认的输出文件路径为dist -> main.js
    在这里插入图片描述

注意：可以在webpack.config.js中修改打包的默认约定。

自定义打包的入口和出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口文件夹和出口文件。 

// 使用node.js的导出语法向外导出一个webpack的配置对象 const path = require("path"); module.exports = { mode: 'development', entry: path.join(__dirname, 'src/index.js'), //设置打包输出路径，以及输入文件名称 output: { //指定存放目录 path: path.join(__dirname, 'dist1'), filename: 'new.js' } }  
        
    

            
  • 
                1
            
    • 

            
  • 
                2
            
    • 

            
  • 
                3
            
    • 

            
  • 
                4
            
    • 

            
  • 
                5
            
    • 

            
  • 
                6
            
    • 

            
  • 
                7
            
    • 

            
  • 
                8
            
    • 

            
  • 
                9
            
    • 

            
  • 
                10
            
    • 

            
  • 
                11
            
    • 

            
  • 
                12
            
    • 

            
  • 
                13
            
    •

生成的文件就变了。
在这里插入图片描述

webpack中的插件

当我们修改js文件之后，需要重新打包才能有效，每修改一次都要重新打包一次，这就很麻烦我们可以 通过安装和配置第三方的插件，可以扩展webpack的能力，从而让webpack用起来更方便，常用的webpack插件有如下两个：

  1. webpack-dev-server
    • 类似于node.js阶段用到的nodemon工具。
    • 每当修改了源代码，webpack会自动进行项目的打包和构建。
  2. html-webpack-plugin
    • webpack中的html插件（“类似于一个模板引擎插件”），
    • 可以通过此插件自定制index.html页面的内容。

webpack-dev-server

安装webpack-dev-server 

安装命令
npm install webpack-dev-server@3.11.2 -D  
        
    

            
  • 
                1
            
    • 

            
  • 
                2
            
    •

配置webpack-dev-server

  1. 重新配置package.json中的script里的dev内容
    在这里插入图片描述
  2. 再次运行 npm run dev命令，重新进行项目打包
  3. 在浏览器中访问本地8080端口，查看自动打包效果。

注意：webpack-dev-server会启动一个实时打包的http服务器。
在这里插入图片描述
这样当我们每次修改index.js文件时，保存后就会自动打包，摁两次ctrl+c就可以终止运行。

这种打包实际上时虚拟打包，并不是每次保存打包之后将main.js进行了修改，当我们修改代码保存自动打包之后，我们发现页面UI并没有变化，那是因为main.js实际上没有修改，访问自动打包修改后的页面需要访问本地8080端口在这里插入图片描述
在这个http服务器内才能访问到修改后的内容，我们前面说了修改后的js并没有保存到main.js中，那它保存到哪里去了？它其实被保存到了根目录中，以内存的形式进行了保存。在这里插入图片描述
文件名跟你前面设置的打包文件名一样，虽然看不到这个文件但是可以进行访问，我们需要把页面引入链接从 new.js改成新生成的保存到内存中的new.js，完成这两个步骤就可以真正的实现自动打包并实时演示了。在这里插入图片描述

html-webpack-plugin

当我们开启了自动打包服务功能，访问服务器后，显示的是根目录，需要点击一下文件夹，才能显示页面文件index.html，我们只需要把页面文件copy一份儿到根目录，这样点开网页就能直接显示，这个webpack插件就可以实现相应的功能。

安装 

npm install html-webpack-plugin@5.3.2 -D  
        
    

            
  • 
                1
            
    •

使用代码 

//导入相应模块 const HtmlPluginConfig = require('html-webpack-plugin') //实例化 const HtmlPlugin = new HtmlPluginConfig(); //实例化 const HtmlPlugin = new HtmlPluginConfig({ //被复制文件的路径 template: './src/index.html', //复制到哪 filename: './index.html' });  
        
    

            
  • 
                1
            
    • 

            
  • 
                2
            
    • 

            
  • 
                3
            
    • 

            
  • 
                4
            
    • 

            
  • 
                5
            
    • 

            
  • 
                6
            
    • 

            
  • 
                7
            
    • 

            
  • 
                8
            
    • 

            
  • 
                9
            
    • 

            
  • 
                10
            
    • 

            
  • 
                11
            
    • 

            
  • 
                12
            
    • 

            
  • 
                13
            
    • 

            
  • 
                14
            
    • 

            
  • 
                15
            
    •

最后再向外暴露对象 

 //插件的数组，将来webpack在运行时，会加载并调用这些插件 plugins: [HtmlPlugin] //将实例化对象写入。  
        
    

            
  • 
                1
            
    • 

            
  • 
                2
            
    •

执行 npm run dev命令，进行自动打包，然后进入本地8080端口网页，就可以直接看到页面了。
在这里插入图片描述
当你修改js之后也会实时更新。

注意点以及个人建议和理解
我们可以在scripts里设置两个属性，dev是用来开发实时浏览观看内容的，dev2是用来进行物理打包的（当你完成项目需要打包的时候）。
在这里插入图片描述
这里我需要说一下html-webpack-plugin这个插件，上面我们可以直接看到页面是因为这个插件复制了一份儿index.html到根目录所以可以直接访问。
这个插件里面 有个属性叫filename，就是你将文件复制到什么位置。
在这里插入图片描述
两个注意点

第一个就是它的值，属性值写的相对路径是根据你打包文件的位置为基准的，并不是webpack.config.js的文件位置，./就跟你的new.js文件在同一个文件夹里，…/就在new.js的上级文件夹里，所以当你打包的时候会发现除了new.js之外还有index.html

第二个就是输出方式，如果执行的是dev2，那么就跟new.js进行物理复制，如果执行的是dev那么就跟new.js一样，以内村存储的方式进行保存。

生成的html文件里会自动导入同时打包的js文件
在这里插入图片描述

devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多配置。
其中有一些属性设置可以更方便我们进行开发。 

 devServer: { open: true, //打包完成后默认打开浏览器 port: 8080,//修改端口号 host: '127.0.0.1' //修改主机地址 }  
        
    

            
  • 
                1
            
    • 

            
  • 
                2
            
    • 

            
  • 
                3
            
    • 

            
  • 
                4
            
    • 

            
  • 
                5
            
    •
文章已被收录至官方知识档案







转自 csdn



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


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

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

评论(0) 浏览(2185)

从流程角度提升用户体验

鹤鹤

一、前言

在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咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(2254)

网站都变成灰色了，它是怎么实现的？

前端达人

大家好，我是二哥呀。

想必大家都感受到了，很多网站、APP 在昨天都变灰了。

先来感受一下变灰后的效果。

这是 CSDN 的

这是 B站的

这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？

方案 1，换一套灰色的 UI，那显然成本太大了，用脚指头想一想就知道不太可能。

方案 2，用魔法！

不好意思，还真被你猜中了！在网页端按下 F12，打开开发者模式，用元素选择器定位到 HTML 标签上，在「样式」的面板中往下翻，就可以看到这样一段代码。

我把它复制过来大家看一下。 

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

打开二哥的网站《Java 程序员进阶之路》，定位到 HTML 标签，此时可以看到页面是正常的颜色。

然后把之前的代码添加到 HTML 上，然后就可以看到色系变成灰色了。

那这段代码是什么意思呢？

直接把 filter grayscale 复制到搜索引擎里看一下。

当参数为 0 的时候，颜色是正常的。

然后依次试一下 60%：

100%：

MDN 是怎么解释 grayscale() 函数呢？

The grayscale() CSS function converts the input image to grayscale. Its result is a .

大致的意思就是，grayscale 是一个 CSS 函数，可以把图像转成灰色，参数是个百分比，结果返回一个 filter 函数。

The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

filter 函数可以用来改变图像的显示效果，用于 CSS 的 filter 属性。 除了 grayscale 函数，可选项还有以下这些：

可以看到，目前的主流浏览器版本都支持 grayscale 函数，比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。

没有什么使我停留——除了目的，纵然岸旁有玫瑰、有绿荫、有宁静的港湾，我是不系之舟。

转自 csdn

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


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

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



评论(0) 浏览(1814)

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咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(2021)

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

鹤鹤

一、前言

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


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

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

本次针对百度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咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(1696)

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

鹤鹤

一、项目背景

百度文库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咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(2258)

客户交付设计 —— 开启数字化转型设计篇章

seo达人

数字转型推动社会效率

在阿里云设计中心有着这样一只团队,谱写了这样一些故事…

“ 设计师成为逆行者，第一个定义健康码体验流程，为了百姓疫情防控出谋划策。

国民级应用不难用，新税改让人人都能三步退税，五步报税。

全球卓越家具品牌体验升级，让家居行业供应链建立合作更加便捷。

云上展厅，传统会展线上化，数字化，让厂家产品展示与投资突破空间阻碍。”

有人问…这也是ACD设计中心的工作范畴吗？是的，就是有这样一支团队，完成了上百家客户的产品设计体验护航，为大型企业和政府的线下交付项目提供有关产品体验升级的设计能力，在第一时间响应客户，奔赴现场，通过专业化设计解决方案，为项目提供体验助力，用设计帮助客户创造价值。在过去的十年，阿里累计了从底层基础设施，IoT到协同办公，大数据，AI，到软硬件一体化的云平台。致力于在数字经济时代实现我们的梦想与使命：让天下没有难做的生意。这个梦想的涟漪，成为了今天阿里云设计中心肩负的责任：与合作伙伴一起，助力数字化的能力赋予更多政府和企业。

 

设计打造客户价值

为什么要做这些事呢？数字经济的发展让越来越多的企业意识到数字化转型是长久发展方向下可采用的一种成本更低，方式更灵活的解决方案。政府也在加快推进全国一体化在线政务服务平台建设，实现“让群众少跑腿，让数据多跑路”，一证通办，一网通办，一事联办，推动政府治理现代化，建设人民满意的服务型政府。

我们常会有相似的体感，一些传统行业和对民众服务机构，在数字系统和服务体验质量上与科技互联网公司还有着很大差距。往往承担此类工作的软件服务商，也更多是从架构、数据出发，从而忽视产品体验和使用感官的重要性。

因此，以政企客户为主导的产品设计需求愈加凸显，既要满足客户业务需求，也要满足用户体验需求，设计已成为重要的一环，从底层到表层，渗透在项目交付的方方面面。我们依托于整个阿里云和数字转型的契机，坚信只有把自身的设计经验和能力注入进客户产品中，才能更好助力阿里云政企客户和伙伴，赋能整个交付生态。

 

专业赋能业务探索

ACD客户体验设计团队非常重视能如何将ACD沉淀的设计经验、方法、能力输出到行业中，以阿里云在数字转型中的重要作用为契机，更好的帮助行业企业、政府为公众提供更优质的产品与服务体验。这样体量的项目，设计师能提供哪些具体能力呢？

面向全球200多个国家和地区的数百款云计算产品，我们研发了Xconsole云产品一站式设计及研发解决方案，为产品体验保驾护航；面对企业全面上云，我们搭建了一套完整而灵活的设计系统去组织云上生长的各种企业级服务，即B-Design企业级设计系统；面向成百上千的并行项目，我们基于项目管理作业流程研发了内部设计标准化交付平台和数字生成平台，为项目提供丰富设计物料和经验累积；面对错综复杂多变的多端应用，我们在实践中沉淀下来一套云产品使用体验度量系统，包含UES度量模型，体验管理机制和易用性测试和数字化管理的体验工具集，同时我们也打造了一款深植于云业务体验管理场景的NPS调研工具；面向不同产品生态，我们探索制定了一套一致性测评方法与度量指标，并归纳成了体系方法模型形成论文，以扩展摘要形式被CSCW收录；面对特殊的用户群体，我们进行了无障碍设计方法的研究探索；同时，我们与中国工业设计协会设计标准分会一起对外发布3项设计标准：《云计算管控平台界面设计指南》《云计算软件产品使用体验度量模型及方法》《云计算软件产品易用性度量》，另外3项《数据可视化大屏设计指南》，《云计算管控平台无障碍设计规范与评估方法》，《云计算体验设计标准作业程序》还在筹备中，计划和业界一起合作发布…..

图片

在设计专业道路上，我们持续深耕探索，并结合数百个项目实践经历，通过DPM （design platform for manufacture）设计生产平台，高效产出行业数字设计解决方案，涵盖领域包括、金融、数字政府、新零售等多个领域，我们的方法论和经验体系经过多次验证，确保方案的准确与高质。针对不同的客户和项目阶段，我们可以输出独立完整的产品咨询体系，拉升项目、客户、设计中心共同对体验质量可关注度；遇到综合项目也可通过NPS和体验度量测试，更好的面向客户的目标群体，提供服务。我们面对商业服务提升设计增值，对公众服务提升使用效率与满意感知。

 

项目实践成就客户

1.数据可视化助力疫情防控：你今天有绿码吗？

2020年突如其来的新型冠状病毒让每个人都措手不及，疫情防控，关键是人的防控，任何一个环节的疏漏，任何一个节点的缺失，都可能让已有的战果付之东流甚至化为乌有。一个简单的二维码为不同人群在通行提供动态化数字凭证，小小“健康码”派上大用场，通过科技的手段助力提升疫情防控效果，对打赢这场战“疫”必将发挥至关重要的作用。

图片

湖北“健康码”的推行，是“数字政府”改革建设赋能疫情防控和社会治理的一项创新实践。一方面，“码”上通行更便捷，上班“企业打码”、下班“社区扫码”、出行“健康亮码”，另一方面“码”上监管更精准，依托红码、蓝码、黄码、绿码关注重点人。在设计的过程中，首先需要明确健康码的定义、关注目标人群的操作习惯，确定各种码颜色的优先级以及权重，通过集成电子病历、健康体检、生活方式管理的相关数据，在关联健康指标和健康码颜色的基础上，探索建立个人健康指数排行，通过防疫健康码的精细化设计更好助力疫情防控。

 

2.助力纳税人合理节税，放心交税，高效办理

谈到税收问题，大部分人对税务的相关法律法规了解不多，法律知识的不健全让个人纳税申报“行走”艰难，高收入者对不主动申报者的处罚力度低。同时没有税务管理基础型制度支持，想提高征收效果注定“心有余而力不足”。

图片

基于现状我们对个税申报系统进行了服务体验优化升级，让系统具有非常好的灵活性和可配置性，从界面外观到交互体验对每个细节进行打磨，秉承人性化的设计理念，始终以用户需求为目标而进行设计，让用户办理事务过程更加高效，真正将政府服务于人的理念渗透到各方面。同时极大的方便了远程办理缴税的纳税人，助力国家更好的保证打工人的纳税人权益，对于偷税漏税的个人和公司管控更加严格。

 

3.体验365天“永不落幕云上投洽会”

中国国际投资贸易洽谈会由商务部和主办，有23年历史，是国际展览业协会（UFI）认证的全球规模最大的投资性展览会。受到疫情的影响，同时得益于信息化技术的发展，“云展会”成为可能，更多的人不用去会场，在家可以体验到更便捷、高效、实时的参会与交流。

图片

阿里云携手中国国际贸易组织倾力打造了“云上投恰会”APP，参展方可实现云上展览、项目对接、招商洽谈、论坛研讨和云端签约，目前已经有近60家展商入驻3D云展厅，集成各类投资项目。5G、人工智能、实时渲染3D大屏、VR等新技术手段，提供了身临其境的云上参展体验。其中VR技术的应用给用户制造出了更加沉浸式体验，通过一系列视觉线索及交互反馈来增强虚拟世界与现实世界的关联，从人类认知及行为的基础原理中获得理论指导，充分利用虚拟空间打造最符合人们在现实当中的认知及行为规律的互动模式，让用户完全沉浸在虚拟世界中。

 

4.数据服务体验升级 – 实现实时，灵活，多维用户洞察

2021年1月，红旗品牌以月销突破32500辆的成绩，迈入月销3万辆俱乐部，实现单月销量再次突破；同比增长高达158%，当汽车销售购买成为很多人的需求，观看数据整理报表及销售量就会尤为复杂，所有的业务归根结底都是为了业务数据的提升和对比，数据查询成为了领导关心的话题。

图片

数据看板是公司驱动价值增长的重要工具，通过看板检测核心数据、及时洞察业务问题、沟通各部门的解决方案，在领导与部门查看数据的过程中，可视化的方式混乱常常是最大的问题，通过专业的设计原则和色彩搭配让数据看板变得更加专业，提高应用的效率是阿里云设计解决一汽集团痛点的最佳方式。

 

5.卓越家居品牌升级-让美好的生活不仅有诗和远方

美好的生活需要诗和远方，更需要沙发和床”是红星美凯龙董事长提出的品牌理念，如何让大众增强品牌的认同感，将消费者心中的产品效果无限放大是留给阿里云设计的困难之一。品牌使命也是品牌主张，是一个产品存在的价值与意义，建立起一个独特且立体的形象，不断通过渠道和产品与消费者建立联系，就能够在消费心中留下品牌烙印，建立认同。

图片

在多端设计的过程中，我们不断增强品牌的调性定位、提取品牌视觉的DNA，通过品牌色、插画、纹理等设计视觉元素减少市场上同质化的设计，将界面设计与品牌的提升密切结合，增强品牌友好度、扩大品牌影响力、深入洞察与了解目标用户。

 

6.金融技术协助行业服务转型升级

随着时代的发展,我们会发现保险行业出现了越来越多的保险类型和方式,一旦遇到重病,医疗费就如同流水般一去不回,对于普通家庭来说是一笔不小的开支,那么到底怎么买保险才比较划算、比较实用、每个类型哪种好？怎么筛选适合自己经济又保障的保险业务，也是生活中的必修课。

图片

阿里云助力新华保险为用户提供了丰富并可以筛选的业务，全面、优质的风险保障和理财服务，便捷、温馨的服务体验。7X24小时全年无休的投保咨询及理财顾问预约、理赔报案、保单查询、单证补发、联系信息修改、回访等内容。保险APP的服务升级开发方便行业转型、增加用户粘度、完善了销售功能、同时创新购买模式让保险与互联网真正实现接轨，让保险行业也逐渐繁荣起来。

 

篇章延续新的起始

客户交付设计开启了 to B时代产品设计篇章，接下来我们将会面对更广阔的项目场景，也有更多专业领域需要挖掘沉淀。在后续文章里我们会分享一系列在实战经验中得出的方法和心得，包括：设计服务体系，竞争力打造，产品孵化与定价，商业项目数据运营，业务发展，交付设计能力模型与人才成长路径，设计的商业价值探索，政企项目分析，设计中台建设等等。希望能与你一起在数字化转型设计的路上越走越远。


作者：阿里云

转载请注明：学UI网》客户交付设计 —— 开启数字化转型设计篇章

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


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

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




评论(0) 浏览(2360)

让设计方案更具说服力的10个心理学原理！

seo达人


图片

 

1.格式塔原则 

相似原则

人的眼睛会把具有相似特征的元素当成一个整体，认为这些元素具有相同的作用。

图片

▲ 界面中的绿色图标具有相同的功能，方便用户快速认知和操作。因此在设计具有相同功能或内容的界面元素时，应该保持一致性。

应用位置：导航、链接、按钮、内容页。

 

连续原则

用户倾向于把连续排列的元素视为一个整体。这条原则与对称性和相似性密切相关。通过在序列上创建相似且重复的元素，引导用户的视线方向，使操作更加连贯和清晰。

图片

▲ 只露出一部分的卡片会向用户发出信号，表示滑动可以查看更多的书。

应用位置：菜单和子菜单、列表、产品页、轮播页。

 

封闭原则

当看到不完整的图像时，我们会依据已有的经验把不完全封闭的图像当成一个统一的整体，这是在平面或logo设计中常用到的原则。

图片

▲ 尽管页面右上方的饼图只显示了一部分，我们仍然能够轻松地识别出来。

应用位置：图标、加载、数据可视化。

 

邻近原则

人们会将彼此相邻的元素视为一组。在设计时要注意使用间距将元素组合在一起。使用较大的间距来分隔大的内容组，再使用较小的间距来分隔大内容组中的小内容组。

图片

▲ 页面上的每个卡片中都含有4组信息，很难快速识别具体的内容。通过调整间距，可以将这些信息清楚地分为2组。

应用位置：导航、卡片、横幅、列表页、分页。

 

对称原则

我们喜欢看到对称且平衡的事物。它是所设计领域中最常用和最安全的原则，有助于营造一种稳定感和秩序感。

图片

▲ 对称的布局不仅增强了用户的印象，还强调了中间的视频播放按钮。

应用位置：产品展示页、列表、导航以及任何内容丰富的页面。

 

共同区域原则

通过信息分组和内容组织，实现内容的组合，有助于提升内容的层次结构和可扫描性。

图片

▲ 卡片式UI有助于将信息分组并创建内容的层级深度。

应用位置：卡片、内容、服务、摘要。

 

共同命运原则

向同一方向移动的元素被认为比静止或向另一个方向上移动的元素更相关。这个原则有利于建立不同分组或状态之间的关系。

图片

▲ 页面右侧的3个图形方向相同，有利于展示信息并让用户了解它们的功能。

应用位置：导航/下拉、折叠条目、工具提示、产品滑块、滚动条。

 

2.焦点 

看东西时，我们的视线往往会首先关注最突出的元素。理解这种行为有助于我们在设计中创建一个“锚点”，从而引导用户按照我们设计的场景查看内容。

图片

▲ 通过人物插画将用户的注意力引导到账单和人数等主要信息上。

应用位置：内容、登录页、产品页。

 

3.冯·雷斯托夫效应 

又称隔离效应，相对于普通事件或物体，独特、有特色的事件或物体更容易被人记住。应用此原则的元素通常独立存在，不需要向用户导航额外的信息。

图片

▲ 中间的升级插画部分在整个页面上是独立存在的，并且吸引注意力是号召性用语或转化的关键。

应用位置：价格表、促销页、图标入口。

 

4.本能反应 

根据现实中的用户行为创建视觉上引人入胜的体验。例如看幽默类视频的时候，如果在视频的高潮伴有笑声音效，我们也会更容易跟着笑起来。

图片

如果能让用户感觉良好和舒适，他们也会更喜欢我们的设计。

应用位置：产品图、插图、摄影。

 

5.色彩心理学 

许多研究表明，颜色对我们的潜意识有特殊的影响。性别、宗教和文化对颜色的理解也有所不同。

图片

▲ 关于颜色的运用，这张色彩心理学海报介绍了丰富的方法。同时也要记住最广泛使用的系统颜色：红色代表错误；绿色代表成功；蓝色代表进行中；黄色代表警告。

 

6.形状心理学 

图片

▲ 同颜色一样，人们的潜意识对不同的形状也有不同的反应：

圆形、椭圆形：传达积极的信息，通常与社区或关系有关；

正方形、三角形：传达强烈的信息，通常与强度和稳定性有关；

垂直线：表示强度或力量。

水平线：表示平静、相等或安静。

 

7.双重编码理论 

这个理论解释了人类需要视觉和语言信息来尽快处理信息。为了最大限度地提高设计的有效性，不应该删除必要的说明性文字。

图片

▲ 大多数App的底部导航栏都利用图标与文字相结合的方式让用户快速知道功能。

 

另一个好的设计案例：

图片

 

8.并行设计 

人眼倾向于看到平行因素比其他因素更相关。这一原理经常用来对同一页面中的两组不同内容进行分类。

图片

▲ 使用垂直排列的卡片代表相同的问题，水平排列的卡片代表不同的问题。

 

9.公共区域 

这一原理类似于格式塔原则中的相似原则。公共区域通过使用线、形状或颜色划分的方式创建。

图片

▲ 如果页面需要用户不断滚动来查看内容，可以考虑使用颜色来更清楚地划分这些内容，而不仅仅是使用间距。

 

10.扫描模式 

根据NNGroup、UXPin等设计团体的研究，最常用的两种扫描模式是“F型”和“Z型”：

“F型”应用最为广泛，尤其是对于内容丰富的网站。

“Z型”用于那些文字信息少，最后需要强调用户点击类的网站。

关于扫描模式更详细的内容可以查看我之前的文章：如何构建直观有效的导航结构（上）

了解如何使用这些模式后，我们就可以有效地选择布局和安排元素来实现设计目标。

 

最后 

第一印象是最令人难忘的，好的体验可以在用户与产品之间建立持久的联系。


作者：Hoang Nguyen

译者：Clippp

转载请注明：学UI网》让设计方案更具说服力的10个心理学原理！

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


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

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




评论(0) 浏览(2248)

分类

日历

链接

个人资料

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

存档