首页

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

从流程角度提升用户体验

鹤鹤

一、前言

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

网站都变成灰色了,它是怎么实现的?

前端达人

大家好,我是二哥呀。

想必大家都感受到了,很多网站、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咨询、用户体验公司、软件界面设计公司



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

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

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




让设计方案更具说服力的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咨询、用户体验公司、软件界面设计公司




干货迟到了,但三鱼不会让它缺席2

seo达人

产品体验设计师的核心价值

一款产品,本质是提供服务以解决某个用户问题。因此产品体验设计师对整个业务的核心价值一定是解决用户/业务问题,其次才是带来美的感受。“产品设计师的价值取决于业务需要他贡献出多大的价值”。如果你认同这个观点,你就能理解接下来的两个观点。

 

交互创造价值的机会大于视觉

交互在工作流程上在视觉上游,产品问题的讨论一定是先基于交互,所以在交互领域解决问题的机会远远多于视觉。因此在产品体验设计中,交互创造价值的机会往往大于视觉。所以我的建议是:体验设计师可以做纯交互,但尽可能不要做纯视觉,工作中一定要触及交互部分。

 

B端体验设计创造价值的机会大于C端

价值,应该是所有大厂设计师都被问到过的点。不管你的价值陈述对象是谁,本质上都是陈述给业务方,区别仅仅是由你直接陈述给业务方,还是由你的上级将大家的价值汇总打包陈述给业务方。

所以,业务方愿意买单的价值才算价值。

作为一个C端B端都待过的设计师,我说说二者的特点:

C端产品功能少+简单(面向小白)、产品体验有竞品可参考,因此体验设计难度可控。

B端产品功能复杂+庞大、竞品参考成本高 (赛道小众(无竞品)、专业门槛(跨行业)、收费门槛(企业版定制)),因此产品体验难度更大,业务只能依赖设计师所给出的体验方案。

从前文的观点“产品设计师的价值取决于业务需要他贡献多大的价值”来看,B端体验设计的难度更高,所以B端体验设计创造价值的机会应该更大。

坊间传言:tb的设计团队据说有上百人… dy的设计团队据说有数百人… wx的设计师连按钮是圆角还是方角都要展开讨论,还要做ABtest… 三鱼讲个小故事吧:

在C端的工作就好像在一艘装满水手的大船上

你在船上被分配到了负责擦拭桅杆的工作

你需要思考如何在擦桅杆的工作中展现自己的价值

于是你研究了不同擦拭工具的工作效率

研究不同温度、湿度下的桅杆油漆磨损情况

你越研究越痴迷

这份工作看似简单,但其实

有很多可以深挖的点

有很多值得研究的课题

甚至你的价值看起来还很好衡量

毕竟在大船上

哪怕是一根桅杆都会被天天使用

看来这真是一份有价值的工作

毕竟

体验设计就应该做到严谨且锱铢必较嘛!

可以思考一下,倘若一个领域能创造价值的机会已经很少了,那就意味着这个领域的竞争会变得残酷且事不由人。大家论证价值的成本越来越高,边际收益越来越低,俗称“内卷”…

再来看看B端,B端体验设计师往往可以负责一个完整产品(甚至多个),设计师会负责产品的框架搭建、逻辑梳理、页面设计、品牌、官网、运营等一系列设计。有趣的是,由于B端设计往往都是创新项目,产品经理其实对这个产品该是什么样的也没有清晰的认知,最终的产品形态往往是设计师和产品经理一同讨论出来的,设计对业务的价值不言而喻。

如果还是套用那个故事,在B端工作,你所负责的可能是一艘小船,你的注意力不再是这艘小船的桅杆是否擦得够严谨科学,而是这条小船的航道、动力、扩建规划等,这些将会更有意思。

工作难度决定价值,价值与职业寿命挂钩,职业寿命决定了焦虑感。那三鱼的建议也不言而喻。

 

动态思维是B端交互很重要的能力

一直以来我们把动效归为视觉能力。但事实上,动效背后的动态思维应该是交互尤其是B端交互必备的能力。看看下面这几个案例中设计师所解决的问题。

案例1

下图是AE的界面,当用户不选中任何图层时,点击“形状工具”,可以新建一个矢量图形,但当用户选中某个图层时,再点击“形状工具”,该功能则变成了给用户选中的图层创建蒙版。我相信用过AE的人,都见识过这个鬼畜的交互:即同一个按钮却有两种不同的含义。

Adobe After Effects-“形状工具”

在我所负责的一款数据分析产品中,也遇到了类似的问题 (即用户点击图表icon可以新建一个图表,用户选中某个已有图表时,再点击图表icon则是切换该图表的类型)。

因此在2.0版我们尝试将 “创建图表” 和 “切换图表类型” 两种场景区分开。可以看到下图中,图1和图2都解决了这个的问题。但图1的方式是直接将其拆分成两套功能区,虽然解决了问题,但也让导航的内容变得冗余。而图2的方式则更为巧妙,拆分功能区的同时,利用鼠标的点击和失焦,用动效的方式让用户感知到场景的切换,不影响操作的同时还节约了导航空间。

 

案例2

在一款数据产品中,我们上线了一款新功能,对用户有很大的学习成本,于是我们计划在承接页放一张功能全局流程图,它既可以对新功能有一个系统的介绍,同时也可作为功能入口快速定位想要的模块。但问题来了,由于功能复杂,导致流程图上的信息体量太大,倘若完整展示,则会超出一屏空间,用户就很难看清完整的功能流程。最终我们通过动效手段,兼顾了“模块介绍”和“流程展示”,这种展现形式也被业内好评,还被华为云等多家云服务厂商所借鉴,现在大家在很多B端产品中都能看到我们的影子。

 

案例3

以上两个案例比较复杂,再举两个简单的例子:B端产品限于专业性,表单信息通常很长,所以为了表单信息能尽可能完整展现,我们在下拉框展开的瞬间,往外“借”了一部分空间,以展示更多的信息。

 

案例4

这是一个“逻辑表”,一个数据模型中通常有N个逻辑表,信息密度极大,因此我们要尽可能节约空间,所以我们在不影响用户使用效率的基础上,把搜索框“收”了起来。

有没有发现这几个案例解决的都是交互问题,而且是直接影响用户感知的交互细节问题。我们可以看到,在不具备动态思维的时候,交互在面对“信息过载”这个B端绕不过去的课题时,唯一的解法只有“平铺”一招,但这招在面对复杂问题时明显不够用。而一旦具备动态思维,交互设计师就可以从“时间(出现顺序) + 空间(叠放层级)”两个维度对信息的展示进行重组,解题能力将大幅提升。

不止是前文提到的“信息过载”… 诸如“提升操作效率”、“降低认知成本”、“数据可视化”也全是B端体验中对用户体验影响极大的课题,对于交互的工作,也不仅仅只有产品框架的梳理,还有产品细节的打磨,尤其是一款产品成长到后期,一定会围绕体验细节精细化打磨,只靠“静态平铺”这一招恐怕远远不够解题,而动态思维能拓宽B端交互在细节上的解题思路,对交互而言是很重要的能力。

 

视觉创造价值的机会大于交互

我疯了吗?明明前面才说了“交互的机会大于视觉”。三鱼解释解释:对业务而言,交互的机会往往大于视觉,但对设计师自己而言,“交互”是一种必备的但不易被证明的能力,反之“视觉”是一种锦上添花的但容易出彩的能力。

再说详细一点:在设计师的职场博弈中,“交互能力弱”有可能会成为你的短板,但“交互能力强”却很难被塑造成你的长板,因为它的论证成本极高,尤其是在B端复杂的业务场景下。与之相比,“视觉能力弱”往往不会成为一个设计师的短板,但“视觉能力强”则可能成为一个设计师的长版,因为它的论证成本极低。不要小看论证成本,晋升答辩通常只有15-20分钟,如果不能在极短时间内论证清楚自己的能力(价值),就会很吃亏。所以短时间内把自己的能力(价值)论证清楚极为重要。

根据我的经验,短时间内将“交互”论证到“强”的难度远大于将“视觉”论证到“强”。所以成本最小、收益最大的方式应该是将交互论证到“不弱”+将视觉论证到“强”的能力组合。

但现实是几乎所有大公司的体验团队,视觉设计师往往被交互设计师“压着打”。因为“交互”是必备能力,“视觉”是锦上添花能力,“视觉能力弱”并不算短板,而“交互能力弱”却是明显的短板。在大部分设计师都谈不上具备明显长板的前提下,在职场博弈中,存在明显短板的一方一定会输,也就是说视觉一定会被交互压着打。所以如前文所讲,三鱼建议:“体验设计师的工作一定要触及交互部分”。

所以标题可以完善一下:“在交互已不是短板的前提下,视觉创造价值的机会大于交互”。

 

三鱼的做法

(这一段是题外话)既然讲到这里,大概能理解三鱼的做法了吧?我在站酷所发的作品,都是英文排版+动效展示,目的就是只展现视觉的“强”,因为它是一种观众只需要“看”就能感受到的、论证成本极低的能力,很适合线上场景。倘若有听过三鱼线下分享的同学就会发现,同样的作品我在线下会花很大的篇幅讲出背后的交互思考,因为要想论证清楚交互的“强”,就离不开阐述业务原理,这是需要观众付出“看+听+提问互动”的理解成本才能get到的,因此只有线下场景才比较适合展现出交互的“强”。

嗯,虽然前面说了交互的论证成本很大,但谁规定了“视觉”和“交互”必须要孤立论证。有机会我也分享一下体验设计该如何论证交互的“强”。

 

B端的劣势

我不喜欢很多人鼓吹的“B端是一片蓝海”,仿佛转行B端就进入职业发展的快车道一样。三鱼必须坦言,B端比起C端,同样存在着极大的劣势:开发成本大就不多讲了,B端产品往往服务于一小戳群体的工作,这些用户群体本身数量较小,而且很多还是新兴职业,所以B端产品发展初期的用户体量都很小。那么就带来一个问题,一小戳用户的收益往往短时间摊不掉研发成本,如果没有公司战略上的强投入,那么产品更新迭代将是极慢的,甚至90%的产品会因为收益不足,永远停留在1.0版,也就意味着大部分B端产品可能连体验流程都无法闭环,更别说打磨体验了。这些问题在C端不容易遇到,但在B端却很常见。

这也就导致了开发资源都优先投入到功能研发中,留给体验打磨的开发资源很有限,这会影响设计师的价值论证。我亲眼见过一些设计师负责了很多1.0的B端项目,这些产品在几个核心功能上线后,就停止更新迭代了,产品经理和研发只在意核心功能能让用户用起来,至于体验是否流畅,流程是否闭环,对他们而言并不重要。因此这些设计师忙了一年,却没有一个可以论证自己价值的体验设计故事。这在B端是一个普遍现象,是B端相对于C端的劣势。那些只讲B端的好,不讲B端存在问题的言论是不负责的。

当然,哪怕存在这样的劣势,B端体验设计依托复杂业务所带来的价值优势依然是C端无法比拟的。而B端的劣势其实是可以克服掉的,也就是接下来我要分享的“干货”。

 

干货来了

先说说上次那篇文章中,我认为通常情况下设计师要讲出有价值的好故事主要靠两点:

1. 时+运:B端产品更新迭代慢,你如果有充足的耐心陪伴它成长,且它足够好运地成长起来了,且你也足够好运没有被中途变更业务,那么恭喜你总算等来了一个讲出好故事的机会。但目前互联网早就过了野蛮生长的时期,这种机会已经越来越少了;

2. 权力:依靠你能调动的资源,以体量来堆出一个好的体验故事,比如造轮子。好处是简单粗暴,故事往降本提效上讲业务肯定是买单的,缺点是轮子不能经常造,造多了就不降本了。而且故事的效果受限于业务体量,有多大体量讲多大故事,所以这种故事更多地适合大厂的管理层去讲。但这似乎就把鸡和蛋颠倒了,倘若设计都熬到这个位子上了,又何必来等我的“干货”呢?

所以在过去两者都不具备的前提下,我有一招自己的玩法。先来看一个案例:

https://www.zcool.com.cn/work/ZNTczNjg3MDg=.html

如果你把案例中的视频看完,你大概能感受到这是一个涵盖了产品框架、角色路径、界面设计、品牌设计的还算蛮大而全的方案,虽然限于保密,对外只能看视觉,连Logo我都不敢多解释两句。所以我大致讲讲:一开始,产品经理所提过来的需求仅仅只是几个核心功能的设计需求,大概4-5页原型图,这时大部分设计师可能会按照原型图把交互和视觉完善,然后产出设计稿的标注和切图,交付开发。

但三鱼了解完业务之后,发现这个1.0的需求用户的路径并没有闭环,于是我继续深入理解业务,为产品定义了三种不同的使用角色,并根据每一种角色的诉求推导出场景和体验路径,从而重新梳理了整个产品框架,补全了缺失场景。

然后将产品能力集成并可视化展现出来,最终交付了一套流程闭环、交互创新、视觉感知强烈的体验方案。

这套产出令业务很惊喜,也认可了整套方案并愿意为之投入开发资源。但三鱼实话告诉你,目前大半年过去了,我所提交的方案被开发上线的只有60%,因为目前的用户体量实在支撑不起更多开发人力投入了,所以哪怕那40%的功能是对的,也需要很久以后才能开发上线。

但没有关系,对我而言,我已经得到了一个流程闭环、交互创新、视觉感知强烈、能充分反映设计价值的故事了。

这便是三鱼的思路,概括下来就一句话:把1.0的需求按3.0的质量产出。毕竟当现实条件无法支撑你展示自己的价值,那就自己创造机会去展示。靠这个思路,当别人还在耐心且不确定地等待业务慢慢成长时,三鱼已经在短时间内积累了大量优质故事,这也让我的职场博弈占了优势。

这里有个问题:就是我创造的价值,并不是业务方当下买单的价值,似乎与前面我所说的观点有出入。

这里我要再讲一个观点:设计对业务的价值不一定以设计师对当前业务的价值为转移。通俗来说,所有业务方都希望自己的产品是功能完善、流程闭环、体验舒适的,这个诉求可能会因为当下开发成本的短缺而被抑制,但却是可预见的只要条件成熟业务就一定会产生的诉求。因此设计师主动往前走一步的做法一定是业务方所认可的,哪怕最后没有开发人力落地这些设计,业务方也清楚是现阶段的业务水平所导致的,而不是去否定设计的价值。而对于设计师而言,只要你提供的设计方案是超预期的,总有一天会有优质的业务场景愿意为之买单 (意会) … 总之,“把1.0的需求按3.0的标准交付”是一条经过三鱼验证过的行之有效的手段。

以上输出的都是认知,认知的提升会带来成长的幻觉。但事实上,哪怕你知道了动画对交互的提升巨大,但不具备动画能力也是空谈;哪怕你知道视觉创造价值的机会更大,视觉能力不够成为你的长板也是空谈;哪怕你知道把1.0的需求按3.0来产出收益巨大,你不具备3.0的视野也是空谈… 认知更像是临门一脚的点破,手上功夫才是你的基本盘。

 

手上功夫的成长

最后聊聊成长,三鱼的经历可能会给你一些参照吧。先附上我的培训班作品,这就是三鱼最初的水平,那时我已是工作了两年转行的状态,年龄和经验都很吃亏。

培训班作品-《爱情小管家》

但三鱼运气还算好,赶在互联网的末班车进了大厂。这保证了我的成长环境至少是不错的,也更有机会接触到一些好的产品、优秀的设计师,能学到更多的东西 (说真的,当初能进大厂,也许有能力的加持,但更多的要归功于时代的运气)。

但进了大厂也未必就踏上了快车道,大厂的竞争很激烈,好的项目机会从来都是抢手货。从培训班出来的我,因为没有工作经验,被分配去做广告图优化,三鱼先解释一下这个工作:就是客户在我们的产品中投放广告,有些客户投放的广告点击率并不理想,为了确保客户的推广费花得值 (不然人家不投了),于是我们会对一些不理想的广告图进行设计优化。对设计师来说,这些广告图的质量参差不齐,且没有源文件,优化工作是一件繁琐且低价值的事。这种事,很适合我这个刚转行的菜鸟来干。下图是一些我优化过的广告图,这就是三鱼在大厂一开始的主要工作。

广告图优化

这对当时的我来说已经很满足了,毕竟能创造价值、能挺过试用期三鱼就谢天谢地了。于是我很认真地完成手上的工作,还沉淀了一套广告图优化“方法论”,比如把广告图分为电商、工具、游戏、社交等,每一种类别有特定的优化方式,还附带最后的数据验证… 嗯,这是我第一次接触 “大厂套路”。

看我广告图优化得还不错,于是主管给我新增了一项任务:我们团队每天都要在Facebook上发一条动态,每条动态都会附一张配图,所以每周我需要画5张运营配图。

日常运营支持

日常运营配图所要求的质量并不高,倘若只是按可交差的水准来产出设计,这5张图其实费不了多少功夫,于是三鱼决定利用富余的时间去锤炼自己的专业能力。具体来说:每周一业务方会告知本周需要绘制的5个主题,我会用一天的时间把其中4个主题快速地画完交差,然后留一个自己最感兴趣的主题,去设计平台上学习新的风格,并结合主题去创作。比如下图的产品矩阵纪念日:https://www.zcool.com.cn/work/ZMTQ4MTQyMDg=.html  。就是花了心思去做的。

产品矩阵纪念日

再比如美食节活动:https://www.zcool.com.cn/work/ZMTUwNDk4NzY=.html  。我不仅尝试了新的风格,还给它加入了爱情故事。

还有一些名人名著的纪念日闪屏:https://www.zcool.com.cn/work/ZMTY3MTkzMjg=.html  。

于是我就一直用这种刻意练习的方式,把自己的手上功夫越练越扎实了。而对于业务方来说,本来预期就不高,偶尔还能收到三鱼超预期的设计交付,自然是很欣喜的,于是对我的评价也很高。

随着我的交付质量不断提升,业务方的预期也越来越高。一次在别的设计师的运营事故中,业务方指名要三鱼来设计。于是我站出来救了场,这次事件过后,大家突然意识到我不是一个初入行的菜鸟了。

地球一小时

但三鱼的目标还是想往产品体验方向发展,但产品设计的机会是很稀缺的。但三鱼随即等来了一个机会:我们的核心产品要进行一次体验升级,这种级别的项目只有最资深的设计师才能参与的。所以我们的主管选了三位资深设计师来比稿定方案。

三鱼很积极地表示自己也想参与比稿,不仅表达了自己的职业规划,还保证参与比稿不会耽误手上的工作。由于我之前的工作中已经积累了不错的口碑,主管同意了我的请求。

我很珍惜这样的机会,于是一口气出了两套方案 (都在站酷中)。

但现实很残酷,大家并不认可我作为一个设计新人的实力,我的方案在一开始的内部评审中就被提前“毙掉”了 (其实这很正常,没有人会相信一个新入行的设计师的实力)。不过主管考虑到我认真的态度,虽然让我失去了上台提案资格,但还是把我的两套方案作为“更多风格探索”放在PPT的最后了…

三鱼的两套方案

但戏剧性的一幕又来了,提案的过程很不顺利。可能是因为那时流行扁平风,但过于千篇一律导致几个大领导看腻了,反而认为我这种带质感的方案让人耳目一新。结果我的陪跑方案居然奇迹般地被采纳了…

这可把三鱼牛逼坏了,当晚我把这个结果告诉小白,小白叮嘱我:“这个时候很尴尬,这么重要的项目不可能完全交给你这个新人来负责,你现在最好的做法是一定要低调,明天去了公司别吭声,等你的主管来找你聊,听安排就是了,切记切记,我看你已经飘得不行了”!

于是第二天三鱼全程装蒜,默默地等待着。果然!主管来找我了,希望我能加入到产品改版的项目中来,她会安排一位资深设计师带着我一起做,至于我手上目前的工作,就交接给其他设计师吧。于是三鱼开开心心地服从了安排。

噢对,由于原来业务方对我实在太满意了,这次的业务调整,那些业务方纷纷跑去请求我的主管“让三鱼再为我们画最后一张吧…” 我也被主管戏称为设计团队的“头牌”。

写到这里,三鱼算不算靠努力与运气就走上快车道了?事实上还早… 目前为止我的手上功夫还仅限于PS用得不错罢了,其它能力为0。而能力的欠缺很快就让我遇到了难题。

那就是:动效设计师不干了。

以前的一些大厂会设置专门的动效设计岗,由一位擅长动画软件的同学来帮其他设计师实现动画上的创意演示,但这种“只能替别人实现创意”的工作模式,对动效设计师的职业成长不利,于是越来越多动效设计师转行去做产品体验。

这可苦了那些不会做动效的设计师 (包括三鱼),工具类的产品,对动效的要求比较高,倘若没人替自己实现脑海里的动画创意,工作对接就很吃力了。

所以只好去学。三鱼觉得动效比3D还难学,它难在几乎找不到针对性的动画教程,那时我能从网上找到的动画教程全是教“影视后期”的。可没办法,只能硬着头皮学,不然我的创意就不得不妥协于手上功夫了。于是三鱼一路东拼西凑,艰难地把动效学会了。

下图是我做的第一个动效,一开始我只会简单的位移旋转,动画虽然生硬,但好在PS画的素材质量本身不错。

这是一年以后的水平,那时我已经能3D+动效结合着玩了。

说到3D能力,也是在这期间,我和小白一起报名了第一期的白无常C4D课程培训班 (三鱼喜欢抱团学,可以互相监督,一个人学很容易半途而废),我还把学到的东西应用到了实际工作案例中。

当我把这两张图发给白无常老师看的时候,老师很诧异:“我没有教角色建模呀”?其实图里的熊是PS画的,说明那时我的PS水平已经比较强了。

说到PS绘画,这种风格受李舜影响比较大。在李舜的风格刚出现的时候,我觉得很惊艳,就去学习了她的画法 (她写过一篇教程,感兴趣的朋友可以去她的站酷找找)。下图的IP算比较出名的了,因为这套作品时不时被我发现放在了某些淘宝店里挂羊卖狗…

那段时间是我过得最快乐的时候,我同时负责产品体验和品牌设计,包容的大厂环境也给了我学习和应用新技能的空间,一年的时间我的手上功夫突飞猛进。

再后来去了福厂,那是三鱼最痛苦、但也是成长最大的经历:

我遇到了一个很糟糕的主管,在福场的三年多时间里,三鱼一方面依托平台加速成长,一方面对抗来自主管的PUA,并最终完成了反杀。细节不多讲了,说说最后的结果吧:这三年里,我的绩效全是最优(凭借着无法否定的能力和成果,三鱼逼着主管给自己打了好绩效),反观这位主管,三年里有两年拿了最差绩效,最后被迫转岗…

我在福厂的成长不仅是手上功夫,更多的成长是“认知”,而后者对我的职业突破起了决定性作用。但这段经历很痛苦,如果说在百度的成长是技能上的成长,它是一个逐渐变好的过程,是愉快的,那么在福厂的经历更像是把人打碎以后的重塑,因为认知的成长一定是伴随着否定、怀疑、焦虑的,三鱼在其中艰难地探索出了一条可能是对的的路,以后有机会再慢慢分享吧。

回想起来,三鱼算幸运的,我赶上了互联网的末班车,在狼厂宽容的环境下锻炼了能力,在福场如日中天的阶段实现了个人的成长。但三鱼也是不容易的,我的成长经历并没有大家臆想的那么一帆风顺。大厂的竞争非常惨烈,被打碎以后是一蹶不振还是再重塑?这么多大厂设计师,能出头的有几个?玩明白的又有几个?

 

写在最后

这篇文章真长,如果你能耐心读完… 嗯,算你厉害。我最后再总结一下吧:

前半部分讲了认知,是三鱼基于自身环境所形成的认知,但这些认知希望大家斟酌着看:第一,它是基于三鱼的成长路径和自身条件所得出的,未必适合所有人;第二,行业是不断发展的,认知也不会一成不变,也许一年以后这套认知就失效了。

后半部分讲了成长,当然主要集中在专业上的成长,这也是目前大部分设计师更需要的,也是比较适合在站酷分享给大家的。

认知可以让你们前进的过程中少走弯路,但是技能才是推动你前进的核心动力。三鱼能讲的东西还有很多,后续再慢慢聊。

 

原文地址:站酷

作者:三鱼先生

转载请注明:学UI网》干货迟到了,但三鱼不会让它缺席2

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


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


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



日历

链接

个人资料

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

存档