Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时(即node.js不是一门语言也不是库和框架，它是一个JavaScript运行时环境)。 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

安装node

直接到官网上下载自己电脑的版本，官网地址：https://nodejs.org/zh-cn/
安装完成之后可以通过在终端上运行

 node -v //查看是否安装成功，成功的话会展示当前安装版本 npm -v //安装node的时会连同一起将npm安装包一起打包安装了，npm是nodejs的包管理器 npm install -g cnpm --registry=https://registry.npm.taobao.org //安装淘宝镜像可提高下载包工具的速度 

Express框架

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。express 是nodejs的一个web框架，使用express,能够更便捷的使用nodejs.

安装

第一步：安装express

npm install express --save -g 

第二步：安装express-generator

npm install express-generator --save -g //express-generator是express应用生成器，相当于express 的骨架 

第三步：打开终端进入你将要建立项目的文件夹中创建你的项目

express expressDemo //你要建立的项目名称 

第四步：安装:npm install
第五步：启动项目:npm start
这样你的第一个express项目就创建成功了

express-路由

Express框架建立在node.js内置的http模块上。http模块生成服务器的原始代码如下。

var http = require("http"); var app = http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.end("Hello world!"); }); app.listen(3000, "localhost"); 

上面代码的关键是http模块的createServer方法，表示生成一个HTTP服务器实例。该方法接受一个回调函数，该回调函数的参数，分别为代表HTTP请求和HTTP回应的request对象和response对象。

Express框架的核心是对http模块的再包装。上面的代码用Express改写如下。

var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello world!'); }); app.listen(3000); 

比较两段代码，可以看到它们非常接近。原来是用http.createServer方法新建一个app实例，现在则是用Express的构造方法，生成一个Epress实例。两者的回调函数都是相同的。Express框架等于在http模块之上，加了一个中间层。

中间件

简单说，中间件（middleware）就是处理HTTP请求的函数。它最大的特点就是，一个中间件处理完，再传递给下一个中间件。App实例在运行过程中，会调用一系列的中间件。

每个中间件可以从App实例，接收三个参数，依次为request对象（代表HTTP请求）、response对象（代表HTTP回应），next回调函数（代表下一个中间件）。每个中间件都可以对HTTP请求（request对象）进行加工，并且决定是否调用next方法，将request对象再传给下一个中间件。
Express 应用程序基本上是一系列中间件函数调用。
中间件函数可以执行以下任务：

• 执行任何代码。
• 对请求和响应对象进行更改。
• 结束请求/响应循环。
• 调用堆栈中的下一个中间件函数。

Express 应用程序可以使用以下类型的中间件：

• 应用层中间件
• 路由器层中间件
• 错误处理中间件
• 内置中间件
• 第三方中间件

应用层中间件
使用 app.use() 和 app.METHOD() 函数将应用层中间件绑定到应用程序对象的实例，其中 METHOD 是中间件函数处理的请求的小写 HTTP 方法（例如 GET、PUT 或 POST）。

app.use('/user/:id', function (req, res, next) { //在 /user/:id 路径中为任何类型的 HTTP 请求执行此函数。 console.log('Request Type:', req.method); next(); }); app.get('/user/:id', function (req, res, next) { res.send('USER'); }); 

路由器层中间件
路由器层中间件的工作方式与应用层中间件基本相同，差异之处在于它绑定到 express.Router() 的实例。

var router = express.Router(); 

错误处理中间件
错误处理中间件函数的定义方式与其他中间件函数基本相同，差别在于错误处理函数有四个自变量而不是三个，专门具有特征符 (err, req, res, next)：

app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); 

有关错误处理中间件的详细信息，请参阅：错误处理。

内置中间件
自 V4.x 起，Express 不再依赖于 Connect。除 express.static 外，先前 Express 随附的所有中间件函数现在以单独模块的形式提供。请查看中间件函数的列表。

第三方中间件
使用第三方中间件向 Express 应用程序添加功能。
安装具有所需功能的 Node.js 模块，然后在应用层或路由器层的应用程序中将其加装入。
列如cookie-parser中间件函数
首先安装cookie-parser。 npm install cookie-parser

var express = require('express'); var app = express(); var cookieParser = require('cookie-parser'); // load the cookie-parsing middleware app.use(cookieParser()); 

MongoDB数据库

MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。
MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

你可以在mongodb官网下载该安装包，地址为：https://www.mongodb.com/download-center#community。
以下以Mac版本为例讲解

1,打开终端修改环境变量

echo $PATH 

你可以查看到你当前的环境变量下面的文件

image.png

2,选择其中一个文件夹进去然后将你的mongodb的安装包路径映射到此文件上

ln -s 你的MongoDB的安装包路径/bin/mongo mongo 

3，你创建一个数据库存储目录 /data/db：

sudo mkdir -p /data/db 

4,启动 mongodb，默认数据库目录即为 /data/db：

sudo mongod 

5,再打开一个终端执行以下命令连接

mongo 

这样你就启动连接上了本地的数据库
你可以下载安装mongosBooster数据库管理你的数据，地址为https://nosqlbooster.com/downloads

mongoose

mongoose是nodeJS提供连接 mongodb的一个库. 此外还有mongoskin, mongodb(mongodb官方出品). 本人,还是比较青睐mongoose的, 因为他遵循的是一种, 模板式方法, 能够对你输入的数据进行自动处理. 有兴趣的同学可以去Mongoose官网看看.
安装mongoose

npm install mongoose --save 

Mongoose里面有几个基本概念.

• Schema: 相当于一个数据库的模板. Model可以通过mongoose.model 集成其基本属性内容. 当然也可以选择不继承.
• Model: 基本文档数据的父类,通过集成Schema定义的基本方法和属性得到相关的内容.
• instance: 这就是实实在在的数据了. 通过 new Model()初始化得到.
  在保证你已经启动连接上了mongoDB时你就可以使用了，列如以下Demo

const mongoose = require('mongoose'); mongoose.connect('mongodb://localhost:27017/test'); const con = mongoose.connection; con.on('error', console.error.bind(console, '连接数据库失败')); con.once('open',()=>{ //定义一个schema let Schema = mongoose.Schema({ category:String, name:String }); Schema.methods.eat = function(){ console.log("I've eatten one "+this.name); } //继承一个schema let Model = mongoose.model("fruit",Schema); //生成一个document let people = new Model({ category:'apple', name:'apple' }); //存放数据 people.save((err,apple)=>{ if(err) return console.log(err); apple.eat(); //查找数据 Model.find({name:'apple'},(err,data)=>{ console.log(data); }) }); //查询所有数据 people.find(function(err,ret){ if(err){ console.log('查询失败') }else{ console.log('查询成功') } }) //按条件查询符合条件的数据 people.find({},function(err,ret){ }) //按条件查询单个数据 people.findOne({},function(err,ret){ }) //删除数据 people.remove({uesername:'zhangsan'},function(err,ret){ }) //根据ID删除数据 peop.findByIdAndRemove({},function(err,ret){ }) //更新数据 people.findByIdAndUpdate('dfsfs',function(err,ret){ }) }) 

到这里, 实际上, mongoose我们已经就学会了. 剩下就是看一看官方文档的API–CRUD相关操作

作者：orange_9706
来源：简书

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

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

很多网站仍然在使用老旧的页面设计，比如国内一些企业官网，万年不变的相类似的模板，外国的则是hero页面，带CTA按钮，三栏式的布局。这些设计不能说是不好的设计，很实用，用户能够预测展示的内容，也容易找到需要的内容。但是正因为可预测，用户没有新鲜感，没有期待，所以我们找了一些不仅打破常规，也依然有良好用户体验的网页设计。

蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机app/安卓ui设计、软件界面设计、网站设计，用户研究、交互设计服务。

接下来是精彩的UI设计赏析

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

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

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计，打造“视”不可挡的网页设计

      超赞的网页设计+精美流程图赏析

       超赞的网站设计赏析

真正出色的金融产品是基于可用性，在成熟的数字生态系统中，能持续满足用户的特定需求。在UXDA每年交付的数十个UX/UI设计中，我特别选出了一些重要的作品来举例，与大家探讨设计对塑造金融产品方面的影响。

1/10 从标准化到量身定制

过去20年来，人们认为在创建数字金融产品时设计发挥的作用微不足道，这种刻板印象根深蒂固。大多数情况下，甚至被认为是出于营销目的的包装，关注点也多在产品功能和特性上。

使用标准化设计模板来加速产品开发是常见的做法，但这也解释了为什么许多金融服务看起来如此相似——平淡、乏味且对用户不友好的。

10年前出现的金融科技，打破了人们对设计的偏见，企业用其来吸引客户，并试着将设计潜力发挥到最大。而现在，进入金融行业的新玩家更专注于独特创新的设计，来凸显品牌身份。

大多数客户厌倦了乏味又复杂的模板设计，量身定制作为一种全新的趋势应运而生，不仅为产品注入了新鲜活力，还令金融公司的市场飙升。

「Private Wealth Systems」的财富管理平台就是一个很好的例子，通过量身定制的设计，为超高净值人士 (UHNWI) 提供他们对精致生活所期望的奢华体验。

该平台的优势在于它旨在解决用户每天遇到的痛点，关心客户财富的同时并尽最大努力协助其管理，而量身定制也增强了品牌与客户之间的情感联系。敢于打破禁忌并投资于大胆现代设计的金融机构知道，随着客户忠诚度和参与度的提高，肯定也会带来回报。

Takeaway

根据品牌VI创建的产品界面，可以使其在日后的竞争中脱颖而出。

2/10 从有限单一功能到多功能超级应用

向移动模式转型时，集中出现了几家金融科技公司，他们的优势在于功能单一，非常简单易懂。对客户来说，这就像一股新鲜空气，因为当时的银行服务功能既复杂多又对用户不友好。

当今的金融产品，正在不断扩大外部服务，打破功能壁垒。「Revolut」就是一个很好的例子，它不断扩展功能，逐渐成为一个超级应用程序。

单一模式的设定确实很简单，但随着用户期望的增长，以同样方式呈现更多功能的需求也在逐步增加。对用户来说，如何用一种既直观又体验佳的方式，展示100多个功能呢？

既要为客户提供解决功能，又不能在使用体验上打折扣，这并不简单。需要UX架构师和经验丰富的UI设计师密切合作，共同面对挑战——创建直观的产品架构与合乎逻辑的、用户友好的界面布局。

来看一个UXDA的多功能银行应用程序例子：我们将区块链、游戏化、机器人咨询、语音处理、生物识别、大数据等数十个功能整合进同一程序内，打造银行即平台的应用理念。

越来越多的功能服务不断涌现，可用性高的产品更容易吸引用户。这就解释了为什么金融机构都在努力创建自己的新银行或超级应用程序，但展示的服务内容也需要与公司的发展方向保持一致。

根据我们的经验，品牌希望在产品中包含大量「现代」功能，他们相信这会使解决方案在竞争中脱颖而出。但也可能会适得其反，建议在UX研究阶段做好取舍，以便确定更符合品牌受众的功能。非常成功的金融产品都是基于品牌受众的特定需求设计的，这些需求为客户提供额外的价值。

Takeaway

从超级应用程序设计中学习实践经验，保持简单性和可用性的同时，再进行产品拓展。

3/10 从表格式界面到游戏化

相信多数人看到银行后台，都会惊讶于它的复杂。员工必须同时使用多个软件程序，按照说明输入代码才能进行工作。操作系统也需要数月时间去学习，甚至用了很多年，还是无法全部记住。

由于涉及到大量的客户信息，这些解决方案全靠数据驱动，非常复杂。许多银行都在努力降低后台成本，却没有意识到对客户体验的影响。这导致了一个悖论：银行在数字化转型中投入大量资金以改善用户体验，而削减银行核心系统的成本又对客户服务造成损害，银行员工的负面体验又会影响服务质量和最终客户满意度。

后台系统的改进可以显著提高服务质量和速度，从而使客户更满意。以用户为中心的设计方法，在当今创建金融产品中也越来越流行，它不仅可以应用于外部银行产品，还可以应用于内部解决方案。

提高内部工作效率的一种方法是使用游戏化设计。这种方法使整个工作流程更加现代化，从而实现了工作流程的转变，如「ITTI Digital」所示。

为了使其以用户为中心，我们将大量繁重的数据翻译成人类语言。员工的学习曲线从几个月缩短至几个小时，人为失误的可能性显著降低，服务速度、员工效率和客户满意度都大幅提升。

此方案在IF的数字金融服务设计大奖中也得到了认可

金融机构将员工视为内部用户，为他们创造尽可能好的体验，相当于也为银行客户提供了最好的服务。认为游戏化和银行业务没有共同之处的想法太过时了，游戏化不仅提高了员工的生产力和积极性，也让结果变得更好。

Takeaway

尝试应用游戏化来激励用户，还能使最无聊的金融产品焕然一新。

4/10 从有限的功能到完整的体验

5年前，移动应用程序还被当做非主流的使用渠道，但今天它却满足了大多数客户的要求。令人惊讶的是，移动程序的功能非常有限，用户体验也相当差，甚至一些银行服务只在分行提供。疫情反应了严峻的现实——金融业还没有做好迎接数字时代的准备。

为改善金融品牌的客户体验，需要对移动应用程序进行全面的设计审核，以确保远程用户可以访问所有服务和功能。一家成熟的金融科技公司应快速找出适合客户的远程体验设计方法，而不是冠冕堂皇的借口。

设计「阿拉伯联合银行 (UAB)」移动应用程序时，我们的主要挑战是简化所有的日常功能操作步骤，使其简单高效。

流程的优化使用户更容易浏览应用程序，探索新的可能，同时也鼓励用户与程序互动，而不是联系银行或直接去分行。新应用仅发布数月，在App Store 和Google Play的下载率都大幅提升。

Takeaway

找到缺失的功能并完善它，建立一个完整的使用流程。

5/10 从传统企业到数字化转型

越来越多的老牌银行企业敢于走出舒适圈，挑战自我，踏上数字化转型之路。在金融科技的启发下，现有企业为用户体验设计注入了生命力，从而创造出令客户惊叹的产品，激励用户长期使用。

他们与内部或是外部的UX/UI设计师合作，整合公司各层级的设计方法和组织文化。这种融入了设计角色的团队，以用户为中心快速转型，成为金融科技独角兽的有力竞争对手。

「VTB银行」是一家被数百万人信赖的银行，升级用户体验后，产品重获新生，也体现了企业对线上银行用户的重视。

「VTB银行」的用户反馈说：新升级的产品更贴合他们的生活方式了；银行员工们也表示，紧跟时代变化的品牌，更能为客户提供最优的服务。

Takeaway

设计至上，跳出传统，才能打造出一流的数字产品。

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

文章来源：站酷   作者：UX辞典

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

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

本周马克笔设计留学的安老师想跟大家分享一个你八成不了解关于文字颜色的知识点。

根据世界卫生组织的统计报告，全球范围内，大约有22亿人拥有视力受损（visually impaired）的问题。这其中包含了从轻度的视力问题，到重度的眼部疾病，甚至完全失明的人群。那么在这个高度电子化的时代，大量信息来源于网络，而获取这些信息需要使用屏幕进行阅读，所以紧随而来的问题就出现了，如何让视觉受损人群舒适的阅读这些信息呢？

这里就要提到WCAG，全称是Web Content Accessibility Guidlines（网页内容无障碍指南），它们是一组是网页内容更容易访问的建议，主要针对残疾人，WCAG 2.1于2018年6月成为W3C推荐标准。 这个指南中给出了相关建议，可使网站内容更容易访问。遵循这些原则，web内容更易为广大残疾人士所接受，这些包括盲人和低视患者、聋人和重听人、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。而我要和大家分享就是其中关于视障碍人群的在文字用色方面的小知识。

通过在文本和背景之间提供足够的对比度，让弱视人群在不使用增强对比度的辅助技术的前提下可以较省力的阅读该文本。对于没有色盲的人，通过阅读性能评估，色相和保护度对可读性的影响很小或者没有影响。

文字颜色和背景颜色的标准分为一下几种，从上到下为不合格到最高标准：

• 不合格（Fail）- 文字颜色和背景颜色没有形成足够的反差

• AA Large – 对于18号或以上字号的文字内容，这个级别的反差度是最低要求。反差度不低于3:1

• AA – 低于18号的文字的最优级别。反差度不低于4.5:1

• AAA – 对比增强，对比度不小于7:1

这里要注意的是，装饰性文字内容和品牌logo不需要考虑最小对比度问题。

那么如何知道你的文字颜色和背景颜色的对比度到底符不符合标准呢，这里推荐一个比较简单易用且直观的工具，来自Adobe Color里的“Accessibility Tools”中的对比度检查工具（Contrast Checker）。

（https://color.adobe.com/create/color-accessibility）

通过使用这个工具，你就可以轻松知道你选择的文字颜色和背景颜色是否达到了无障碍要求。比如上图中的白色文字和橙色底图。

在双AA的标准下，白色字体和橙色背景的对比为3.68:1，低于了AA的4.5:1的标准，所以我们可以看到，17号或以下字体就没有通过。

而在最严苛的AAA标准下，3.68:1的对比度远远低于最低标准7:1，所以无论是大字号还是小字号甚至是图形，都无法通过。

经常被大家吐槽的各地警方的通告蓝经过我的测试，都是可以通过AA标准的，甚至有一些还可以通过AAA标准。

再比如，很多同学喜欢使用的橙黄色背景配白色文字的情况，反而连AA标准都完全通过不了，对比度只有可怜的1.71:1。显然这种情况，甚至会给视觉正常的人也造成一定的阅读困扰，长时间阅读可能会造成视觉疲劳。

不过，在实际的操作中，大家还是要根据具体的情况而定，也不一定非要符合这个标准。比如刚提到的这种橙黄色搭配白色字体的情况，如果没有大面积使用，只是偶尔出现的话，我认为也是没有什么太大问题的。

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

文章来源：站酷   作者：马克笔设计留学

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

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

AntV 色板是基于 Ant Design 色彩体系，并结合数据可视化特性而设计。在可视化设计中，色板的运用原则上优先保障准确性，考虑在操作指引、交互反馈上起到强化或凸显的作用。其次需兼顾色障碍群体，帮助有色盲色弱的人群也能在数据可视化中获取洞见。本文为你揭秘可视化色板的搭配种类、以及如何使用。

颜色映射原理

在数据可视化领域中，数据与颜色的映射是非常重要的一个环节。颜色有三个视觉通道，分别是色调（H）、饱和度（S）、明度（B），不同的视觉通道可以与不同的数据类型建议关联。

色调（H）：通常使用颜色中的不同色调来描述不同的分类数据，如水果品类中苹果映射为红色、香蕉映射为黄色、梨映射为绿色，将品类与色调（H）建立了关联。

饱和度（S）/明度（B）：颜色通过明暗和饱和度的共同变化来描述有序或数值型的连续数据，比如身高由低到高或由 160cm 到 180 cm 的颜色映射为由浅到深，将连续变化与颜色的明暗饱和变化建立关联。

6 大色板类型

AntV 色板以蚂蚁极客蓝为起始主色，根据不同数据类型、使用场景扩展出 6 种可视化色板类型，可完美兼容 Ant Design UI 资产。以下所有色板均通过无障碍测试校验，可放心使用。

分类色板

分类色板用于描述分类数据，如苹果、香蕉、梨，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。

用法示例

如图水果价格走势对比，使用红色代表苹果价格、蓝色代表蓝莓价格、黄色代表香蕉价格。

顺序色板

顺序色板，一般使用同一或邻近色相，通过明度和饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区新增人口数对比、风险等级变化等。

单色顺序色板

单一色相渐变称之为单色顺序色板，人眼可识别的色彩数量 5～7 个，为保证信息的最佳识别度，尽可能的克制使用颜色数量。

邻近色顺序色板

为拉开颜色差异，可用两个或以上个色相，通过明度或饱和度渐变，颜色连续而丰富，可产生更多色彩分级，表达更多的连续数值，常用于热力图中的热度变化，通过邻近色相的差异将聚集部分突显出来

用法示例

2017 年西安居民人均消费支出，通过连续的颜色变化，可以快速感知出居住方面消费占比最大，其次食品烟酒，第三是交替通信

发散色板

对比色渐变色板，一般是两种互补色（也可以是对比色）去展现数据从一个负向值到 0 点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等

用法示例

全国等温线图，使用发散色板表示正负值的气温变化，暖色系的橙红色容易让人联系到太阳或炽热的感受，用于高温变化，颜色越红温度越高，反之，冷色系的蓝容易让人联想到冰和寒冷的感受，用于低温变化，颜色越深温度越低

叠加色板

叠加色板，为了色尽其用的原则，将两组顺序色板通过图层叠加模式产生一组新的色板，一个颜色代表两种变量数据，常用于观察一个事物两个维度变化的相关性，如胖瘦和高矮两个维度的人数分布中，瘦且高的人群分布

用法示例

双变量映射地图，相对于单变量映射的地图，该地图形式更加新颖，十分适合用来展示两个紧密联系的变量信息。如下图所示，图中展现了美国国民人口居住密度和家庭生产总值的分布关系，纵向由浅到深的紫色映射了人口密度，横向由浅到深的蓝色映射了家庭收入水平，相交的颜色可以总体反映出人口和家庭的分布情况。可以从地图中清晰地看到，人口多且收入高的大多分布在沿海地区，人口数少且收入低的则主要分布在中部地区。

强调色板

对比突出重点或特定数据，将重点关注的数据标以高饱和度的强调色，其他普通数据标以低饱和、低明度的基本色，常用于对比重点关注事物与其他分类事物的差别，如将自家产品与竞品的对比使用

用法示例

如图某工厂历年能源消耗占比趋势对比，分别用五种不同的颜色代表五种能源，其中「天然气」为重点关注的能源类型，使用饱和度高的蓝代表「天然气」，其他能源类型着以低饱和度的分类颜色，以便关注的「天然气」能够快速被观察到，同时其他类型可作为对比参考而不会因颜色过多而产生干扰。

语义色板

色彩在地图可视化中的使用，不仅是数据信息传递的可视化通道，同时也是更深一层的文化故事的载体，用于表达意义或情感。重视用色习惯，遵循相关标准，色彩也不是都能寓意的，相当一部分图表色彩选择和感情因素无关，而是按照某种习惯来设定色彩，即所谓约定俗成，有的甚至形成来规范。如气象预警配色，红绿灯配色，股市的红涨绿跌等。

用法示例

某水产公司 2019 年的月盈利变化，使用红色表示盈利，绿色表示亏损。

8 条使用建议

我们发现，在提供官方色板的前提下，仍有用户并不是十分擅长在实际场景中应用色板，以下几条设计指引供使用时参考。

避免使用过多颜色

在实际应用中，经常会出现大量颜色使用的误区，建议高亮重要的数据（不超过 7 个），其他数据默认置灰，通过图例交互进行查看。

保持唯一映射通道

同样的数据，映射通道应当保持唯一性。例如当使用柱子高度来映射数据大小时，就不需要再使用颜色通道去映射数据。

解释你的颜色

当图表中出现不同颜色时，需要向读者解释颜色所代表的含义。

上下文保持颜色一致性

结合当前页面环境，建立视觉连续性，对于统一度量，使用同样的颜色方案，而且在整个页面（通常是仪表盘）使用时，注意保持整体颜色方案的一致性。

不同数据对应不同色板

不同的数据类型建议使用对应的色板，比如分类数据就不建议使用连续色板。

不用彩虹色环表达连续数据

不以色环顺序来表达连续的有序型或数值型数据，因为色环顺序并非人眼自然记忆，且彩虹色变化并非均衡变化，如下图中灰阶的转化，很容易看出彩虹色并不是一个连续逐渐加深的色板，因此彩虹色环并不适合展示连续数据，容易引起误解。

顺序色板选择需均衡

下图右侧“不建议”图中，第 2 、第 3 个颜色很相近，难以区分，第 3 、第 4 个颜色跳跃很大，对于均衡的连续数据表达中，容易引起数据感知的误差，均衡选色可在 PhotoShop 的拾色器中使用 Lab 模式下固定色相不变，调节 L 值进行等距取色。

为视障群体设计

AntV 色板在做无障碍验证时，得出以下几点取色建议 ：

• 分类色板选取需明暗交替

虽然正常人眼中右侧分类色板通过色相可以区分差异，但在视障人士、甚至全色盲，则主要靠颜色的明暗差异来识别不同的数据类型，因此分类色板需要注意适度的明暗交替

• 离散色板尽量选取蓝黄对比

一般场景中，我们常也会使用黄绿配色，黄绿对比中，黄是暖色系，绿是冷色系，同样能给到对比感受，且打破常规的蓝红对比色，给到新颖的色彩感受，但如果你的用户中视障人士占比较多，则尽量避免绿黄配色，如图为两种色板在正常人眼和红绿色盲眼中的对比效果，黄绿配色在红绿色盲眼中就失去了色彩对比，难以区分。

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

文章来源：站酷   作者：Ant_Design

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

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

一、什么是用户体验？

用户体验（User Experience，简称UE/UX）这个词是在上世纪90年代中期，由用户体验设计师 唐纳德·诺曼（Donald Norman）所提出和推广。

定义：用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

二、可用性原则

可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品用户体验的核心，不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。

01 易学性

指的是用户学习如何与产品进行交互，以实现目标所花费的时间和精力，即用户能否在初次使用产品时完成简单的任务或实现用户目标。

02 效率

用户在使用产品一段时间后，能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例，用户能否快速的下载想要的东西，在同一系列中，可以快速下载更多的相关内容。

03 可记忆性

我们常说互联网是有记忆的，好的产品体验是帮助用户去记忆。用户在体验中，要对一些有意识、无意识的行为进行记忆是一个比较大的负担，如果在一些环节通过系统能帮用户记录，会降低用户的负担。比如在搜索、历史记录、浏览记录等。

04 容错性

用户在使用产品时，发生错误后，能否快速帮助用户识别和纠正错误，帮助用户从错误中恢复的能力。如常见的注册登录，当用户属于邮箱格式不对的时候，给出提示，并且告知错在哪里。如果提示语只是："请输入正确的邮箱" 用户可能会疑惑，错在哪里。

05 满意度

满意度指的是用户与设计互动产生的愉悦程度，可以是用户使用产品时流畅的交互和优秀的视觉设计，也可以是用户在产品中得到的满足感。比如sir语音交互，王者荣耀等级（满足感）

06 实用性

产品能否提供用户在完成任务时所需要用到的基本功能，例如P图类软件，用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。

07 个性化

在满足实用性的基础上 针对用户提供不同场景下的功能定制，如美图秀秀，在提供图片美化的同时，针对用户不同的使用场景还提供视频剪辑、视频美容等功能。

08 可预测性

用户能够预测到下一步操作或者整个流程的交互，将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。

三、可见性原则

可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。

01 物理功能可见性

物理功能可见性是基于对象的物理外观。在视觉上，这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件，最常使用的就是播放/暂停，上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中，这就是功能可见性。

02 状态可见性

当信息或者列表过多时区分状态的展示，将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来，会极大地破坏易用性，因为人们将不得不进入一个个邮件详情页当中进行确认，才能获取到原本由徽标提供的状态信息，这样的互动非常低效且乏味。

03 步骤可见性

当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤，后面还有多少步骤，完整清晰的流程展示。如果将这些信息隐藏起来，用户会困惑当前进行到哪一步，接下来还有多少步骤。

四、可供性原则

强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素（如滚动条、命令按钮和图标等）的设计必须能够为用户提供足够清楚的建议，让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么，以及如何与它们进行交互行为（点击、长按、滑动 等）

五、反馈

给用户及时、恰当的反馈，是体验设计中非常重要的一项原则；对每个用户的操作都应该有恰当的系统反馈（包含视觉、听觉、触觉）。

01 告知性

明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。

02 动作连接性

当用户产生某个动作时，给予相对应的连接反馈。如大概用户点击某个按钮时，按钮默认的外观与点击后的外观发生变化，结合现实世界的开关去思考（按下 开灯）动作与反馈是连接的，即时的。

六、希克定律

希克定律，是1951年由威廉·埃德蒙·希克首先提出的，认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。

如京东筛选，在搜索结果页会将筛选条件收起，因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单，并且做好归类，用户能够更迅速的作出决定。

七、费茨定律

费茨定律，是1954 年 由保罗.菲茨首次提出，在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。

T：代表完成移动所需的平均时间

A：代表光标开始/停止时间

B：代表光标移动速度

D：代表从起点到目标中心的距离

W：代表目标的尺寸

简单来说就是指：随着目标的距离增加，移动到目标的时间更长，并且随着目标的尺寸减小，选择目标的时间也会增加。

所以在界面设计当中会遵循越重要的功能，占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。

屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中，所以我们在进行产品设计的过程中，会将常用/重要的操作放置在屏幕边缘处，便于用户操作。

八、神奇数字 7 ± 2

神奇数字7±2法则是1956年由 乔治·米勒 所提出的，根据乔治·米勒的研究，人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。

由于人类的大脑处理信息的能力有限，大脑会将复杂信息划分成 块 和小的单元。如：京东和每日优鲜的分类处理。

人类短期的记忆一般一次只能记住5-9个，所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。

九、复杂守恒定律

复杂守恒定律是1984年由 拉里·泰斯勒 所提出的，也称作泰斯勒定律。认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。

在产品设计中，会尽量的简化界面。当功能过多时进行一个整合的处理，跳转或者滑动操作。如查看更多或者常见的汉堡导航。

十、新乡重夫：防错原则

新乡重夫认为遗忘有两种：一种是疏漏，另一种是忘却。他建议采用一些措施来预防产品的缺陷。

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；比如常见的信息输入状态，未输入置灰不可点，输入变为可点击状态。

微信拍一拍：微信在出了拍一拍功能之后，很多时候点击头像的时候会不小心拍到别人，现在的拍一拍是可以撤销的，在客户端鼠标悬浮上就可以进行撤回，移动端长按出现撤回弹窗，两分钟内有效。

微信朋友圈动态：点击返回图标会出现的弹窗，避免误操作。利用防错原则，可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。

十一、奥卡姆剃刀原理

奥卡姆剃刀 定律 ：它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 （William of Occam，约1285年至1349年）提出。 这个 原理 称为“如无必要，勿增实体 ”，即“ 简单有效原理 ”

01、只放置必要的元素

不必要的元素会降低设计的效率，不管是实体、视觉或者认知上，多余的设计元素，有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息，可以用「更多信息」来实现。如夸克浏览器，首页只放置重要功能 搜索 和几个整合内容的图标入口。

02、减少点击次数

让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件，在播放音乐之后进入其他的tab，在上面都会悬浮播放/暂停的区域。都能够随时操作。

03、“老人”规则

就是产品的易用性，如果年纪大点的人，也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验，简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内，并且抖音会根据用户的停留时长等推送用户感兴趣的内容。

04、减少“段落”个数

页面的使用率，当你想要在一屏新增很多内容时，页面的布局就会变得拥挤和区域变小，容易过于干扰用户做出选择，重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口；uc浏览器首页内容过多，当用户想要使用搜索功能时很容易被其他内容干扰。

05、给予更少的选项

前面说到的希克定律说到，当选择的数量越多，用户做决定的时间就更长。做过多的决定也是一种压力，在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示，马蜂窝根据产品属性放置了6个重要的功能入口，便于用户更快的去选择所想要的功能。

十二、设计和艺术的区别是什么？

最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是：艺术抛出问题，而设计解决问题。

我们设想一个场景，当你在艺术展厅站在一副名画面前，你所思考的是什么？是惊叹画家的画技还是整个画面给你的感觉是一种故事，你会不会思考艺术家在作画时的心情，处境，为什么要这么去画？想表达怎么样的情感？

然后我们再设想一个场景，同样在艺术展厅，你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧？因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。

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

文章来源：站酷   作者：左言右设

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

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

一、什么是用户体验？

用户体验（User Experience，简称UE/UX）这个词是在上世纪90年代中期，由用户体验设计师 唐纳德·诺曼（Donald Norman）所提出和推广。

定义：用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

二、可用性原则

可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品用户体验的核心，不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。

01 易学性

指的是用户学习如何与产品进行交互，以实现目标所花费的时间和精力，即用户能否在初次使用产品时完成简单的任务或实现用户目标。

02 效率

用户在使用产品一段时间后，能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例，用户能否快速的下载想要的东西，在同一系列中，可以快速下载更多的相关内容。

03 可记忆性

我们常说互联网是有记忆的，好的产品体验是帮助用户去记忆。用户在体验中，要对一些有意识、无意识的行为进行记忆是一个比较大的负担，如果在一些环节通过系统能帮用户记录，会降低用户的负担。比如在搜索、历史记录、浏览记录等。

04 容错性

用户在使用产品时，发生错误后，能否快速帮助用户识别和纠正错误，帮助用户从错误中恢复的能力。如常见的注册登录，当用户属于邮箱格式不对的时候，给出提示，并且告知错在哪里。如果提示语只是："请输入正确的邮箱" 用户可能会疑惑，错在哪里。

05 满意度

满意度指的是用户与设计互动产生的愉悦程度，可以是用户使用产品时流畅的交互和优秀的视觉设计，也可以是用户在产品中得到的满足感。比如sir语音交互，王者荣耀等级（满足感）

06 实用性

产品能否提供用户在完成任务时所需要用到的基本功能，例如P图类软件，用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。

07 个性化

在满足实用性的基础上 针对用户提供不同场景下的功能定制，如美图秀秀，在提供图片美化的同时，针对用户不同的使用场景还提供视频剪辑、视频美容等功能。

08 可预测性

用户能够预测到下一步操作或者整个流程的交互，将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。

三、可见性原则

可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。

01 物理功能可见性

物理功能可见性是基于对象的物理外观。在视觉上，这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件，最常使用的就是播放/暂停，上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中，这就是功能可见性。

02 状态可见性

当信息或者列表过多时区分状态的展示，将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来，会极大地破坏易用性，因为人们将不得不进入一个个邮件详情页当中进行确认，才能获取到原本由徽标提供的状态信息，这样的互动非常低效且乏味。

03 步骤可见性

当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤，后面还有多少步骤，完整清晰的流程展示。如果将这些信息隐藏起来，用户会困惑当前进行到哪一步，接下来还有多少步骤。

四、可供性原则

强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素（如滚动条、命令按钮和图标等）的设计必须能够为用户提供足够清楚的建议，让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么，以及如何与它们进行交互行为（点击、长按、滑动 等）

五、反馈

给用户及时、恰当的反馈，是体验设计中非常重要的一项原则；对每个用户的操作都应该有恰当的系统反馈（包含视觉、听觉、触觉）。

01 告知性

明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。

02 动作连接性

当用户产生某个动作时，给予相对应的连接反馈。如大概用户点击某个按钮时，按钮默认的外观与点击后的外观发生变化，结合现实世界的开关去思考（按下 开灯）动作与反馈是连接的，即时的。

六、希克定律

希克定律，是1951年由威廉·埃德蒙·希克首先提出的，认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。

如京东筛选，在搜索结果页会将筛选条件收起，因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单，并且做好归类，用户能够更迅速的作出决定。

七、费茨定律

费茨定律，是1954 年 由保罗.菲茨首次提出，在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。

T：代表完成移动所需的平均时间

A：代表光标开始/停止时间

B：代表光标移动速度

D：代表从起点到目标中心的距离

W：代表目标的尺寸

简单来说就是指：随着目标的距离增加，移动到目标的时间更长，并且随着目标的尺寸减小，选择目标的时间也会增加。

所以在界面设计当中会遵循越重要的功能，占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。

屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中，所以我们在进行产品设计的过程中，会将常用/重要的操作放置在屏幕边缘处，便于用户操作。

八、神奇数字 7 ± 2

神奇数字7±2法则是1956年由 乔治·米勒 所提出的，根据乔治·米勒的研究，人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。

由于人类的大脑处理信息的能力有限，大脑会将复杂信息划分成 块 和小的单元。如：京东和每日优鲜的分类处理。

人类短期的记忆一般一次只能记住5-9个，所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。

九、复杂守恒定律

复杂守恒定律是1984年由 拉里·泰斯勒 所提出的，也称作泰斯勒定律。认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。

在产品设计中，会尽量的简化界面。当功能过多时进行一个整合的处理，跳转或者滑动操作。如查看更多或者常见的汉堡导航。

十、新乡重夫：防错原则

新乡重夫认为遗忘有两种：一种是疏漏，另一种是忘却。他建议采用一些措施来预防产品的缺陷。

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；比如常见的信息输入状态，未输入置灰不可点，输入变为可点击状态。

微信拍一拍：微信在出了拍一拍功能之后，很多时候点击头像的时候会不小心拍到别人，现在的拍一拍是可以撤销的，在客户端鼠标悬浮上就可以进行撤回，移动端长按出现撤回弹窗，两分钟内有效。

微信朋友圈动态：点击返回图标会出现的弹窗，避免误操作。利用防错原则，可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。

十一、奥卡姆剃刀原理

奥卡姆剃刀 定律 ：它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉 （William of Occam，约1285年至1349年）提出。 这个 原理 称为“如无必要，勿增实体 ”，即“ 简单有效原理 ”

01、只放置必要的元素

不必要的元素会降低设计的效率，不管是实体、视觉或者认知上，多余的设计元素，有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息，可以用「更多信息」来实现。如夸克浏览器，首页只放置重要功能 搜索 和几个整合内容的图标入口。

02、减少点击次数

让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件，在播放音乐之后进入其他的tab，在上面都会悬浮播放/暂停的区域。都能够随时操作。

03、“老人”规则

就是产品的易用性，如果年纪大点的人，也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验，简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内，并且抖音会根据用户的停留时长等推送用户感兴趣的内容。

04、减少“段落”个数

页面的使用率，当你想要在一屏新增很多内容时，页面的布局就会变得拥挤和区域变小，容易过于干扰用户做出选择，重要功能不够突出等。夸克浏览器首页强化了搜索功能 和几个整合内容的图标入口；uc浏览器首页内容过多，当用户想要使用搜索功能时很容易被其他内容干扰。

05、给予更少的选项

前面说到的希克定律说到，当选择的数量越多，用户做决定的时间就更长。做过多的决定也是一种压力，在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示，马蜂窝根据产品属性放置了6个重要的功能入口，便于用户更快的去选择所想要的功能。

十二、设计和艺术的区别是什么？

最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是：艺术抛出问题，而设计解决问题。

我们设想一个场景，当你在艺术展厅站在一副名画面前，你所思考的是什么？是惊叹画家的画技还是整个画面给你的感觉是一种故事，你会不会思考艺术家在作画时的心情，处境，为什么要这么去画？想表达怎么样的情感？

然后我们再设想一个场景，同样在艺术展厅，你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是 相机 对吧？因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。

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

文章来源：站酷   作者：左言右设

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

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