Chartistic是一款通过交互快速编辑数据可视化图表的app。本文通过对“Chartistic”app进行产品体验与分析后产出的PRD文档。该文档由几个板块组成：全局说明、产品说明、页面详细功能说明等。
一、文档综述
1.1文档输出环境
1.2产品简介
1.3产品总结
二、全局说明
2.1键盘说明
2.2按钮说明
2.3默认设置
2.4限制设定
2.5页面交互
三、产品说明
3.1产品操作流程
3.2产品功能导图
3.3页面流程
四、页面详细功能说明
4.1欢迎页
4.2首页
4.3图表编辑页
4.3.1柱状图/折线图/面积图/饼图图表编辑页
4.3.2智能剪贴画编辑页
4.4X轴Y轴编辑页（柱状图/折线图/面积图/饼图）
4.5设置编辑页
4.5.1柱状图/折线图/面积图设置编辑页
4.5.2饼图设置编辑页
4.5.3智能剪贴画设置编辑页
4.6图表完成页
五、总结
Chartistic，一款备受好评的小众数据可视化app。
在这个到处都充斥着数据，以数据为导向的年代，日常办公中随时随地都有可能需要对或多或少的数据进行可视化处理来帮助分析与演示。
虽然有很多的功能强大的工具可以创建图表，但是却没有多少工具可以使创建更简单、更具有交互性。
Chartistic无需登录，打开即用，在移动端以交互的方式编辑数据，一分钟内创建漂亮的柱状图、折线图、区域图和饼状图。将图表以图像的形式导出，并将其嵌入到演示文稿、电子邮件、文档、电子表格中!
交互便捷，操作简单的它已在43个国家/地区投入使用。在新加坡、泰国、菲律宾和越南，名列App Store的年度十佳应用榜单。上线起至今共入选 App Store 精品推荐 9 次，下载量累计24万次 。
目标用户：需要对少量数据迅速进行可视化处理的办公人群
产品定义：快速、简单的移动端数据可视化工具应用，导出图表作为PPT等演示工具的补充。
产品特征：
在不同页面需要输入编辑时，对应的弹出键盘的类型，数字键盘只能输入正数
图表编辑页面：
X轴Y轴编辑页面：
设置编辑页面：
新建图表时
图一
图二
图三
图四
页面名称：首页
入口：欢迎页后自动跳入
页面说明：
序号1：点击出现其他链接弹层，首页页面置于底部并虚化（如图三）
序号2：点击出现新建图表类型弹层，首页页面置于底部并虚化（如图二）
序号3：
序号4，5：点击关闭弹屏，首页页面置于顶部并解除虚化
序号6：点击快捷处理按钮消失，回到首页，在首页图表列表第一个位置添加复制的图表
序号7：点击弹屏关闭，快捷按钮消失，回到首页，该图表删除，列表中该图表后面的图表前移填充空缺位置
4.3.1 柱状图/折线图/面积图/饼图图表编辑页
图5
图6
图7
图8
图9
页面名称：柱状图/折线图/面积图/饼图图表编辑页
入口：
页面说明：
主页面：左滑展开展开设置编辑页面，下滑展开X轴Y轴编辑页面
序号1：点击返回首页
序号2：点击进入图表完成页面
序号3：点击图表类型切换为折线图，数值背景等设置不变，折线颜色为柱状图同一风格的单个颜色（如图6）
序号4：点击图表类型切换为面积图，数值背景等设置不变，折线与面积颜色为柱状图同一风格的单个颜色，折线的颜色比面积颜色深一个色号（如图7）
序号5：点击图表类型切换为饼图，数值背景等设置不变，配色也不变（如图8）
序号6：单击–切换图表颜色风格
序号7，17，18：按住上滑/下滑–修改圆点高度，上方或者下方的对应数值一起修改，左侧提示目前高度对应的数值，修改值在设定的Y轴最大值与最小值之间
序号8，9，10，12：输入值之前按钮为灰色，输入后字体颜色由背景设置决定；点击展开X轴Y轴编辑页面
序号11：
序号13：点击后小圈即序号7变成删除符号如图9，单击删除符号删除该组数据，当删除至只剩一组数据时删除符号变回小圈，不可再删除
序号14：点击隐藏上面的下拉按钮、添加按钮、删除按钮、设置按钮，隐藏后图表变为左向，单击后以上按钮出现
序号15：点击展开设置编辑页面
序号16：输入值之前按钮为灰色，输入后字体颜色由背景设置决定；点击输入标题
序号19：点击饼图需要修改占比的目标扇形后出现两个半圆形按钮，按住按钮滑动分隔线调整目标扇形角度，按钮相邻一边的扇形同时被增大/减小角度，饼图中间提示目前目标扇形角度对应的占比
4.3.2 智能剪贴画编辑页
页面名称：智能剪贴画编辑页
入口：
页面说明：
主页面：左滑展开展开设置编辑页面
序号1：按住上下滑动更改有色部分的高度，左侧占比数值一起更改，更改范围为0%-100%
页面名称：X轴Y轴编辑页面
入口：
页面说明：
饼图没有编辑X轴名称按钮与编辑Y轴名称按钮
序号1：点击保留编辑结果，收起X轴Y轴编辑页面，回到图表编辑页
序号2：点击屏幕下半部分或者从下半部分上滑，收起X轴Y轴编辑页面，回到图表编辑页
序号3：
序号4：
序号5：点击编辑文本框与数值框之间出现小删除按钮即序号4，点击删除对应的该组数据
异常提示：
页面名称：设置编辑页面
入口：
4.5.1 柱状图/折线图/面积图设置编辑页
标题设置功能
页面说明：
序号1：屏幕左侧页面点击或者右滑返回图表编辑页
值设置功能
页面说明：
序号2：最大值最高可设置为10000，最大值设置的值需要大于最小值，仅可编辑为整数
序号3：最小值最小可设置为0，最小值设置的值需要小于最大值，仅可编辑为整数
异常提示：
网格设置功能
页面说明：
序号4：可见性为关闭状态时，行数与每一间隔的值无法选择与编辑
序号5：初始默认值为10，可编辑范围为【0~15】，仅可编辑为整数
序号6：对齐条开启状态见图，在图表编辑页面滑动所编辑的数据对应到Y轴上的数值（图中的0、100、200、300等数值）时停顿一下，左侧提示所对应的数值；滑动编辑的数值（如323、546等）不在Y轴上时，不显示左侧的数值提示
序号7：简单图表仅保留图表主体形状，如上图
序号8：初始默认值为100，仅可编辑为整数，每一间隔的值需要在 【0.07*（最大值-最小值）~ （最大值-最小值）】这个范围内，考虑到（最大值-最小值）/输入的间隔值 得到的行数有可能不是整数的问题，实际显示的行数为（最大值-最小值）/输入的间隔值四舍五入取整后的行数
异常提示：
边框设置功能
图例设置功能
背景设置功能
页面说明：
序号10：主题文字注释
序号11：四种主题单选，设计出图标作为按钮外观，下方会出现对应文字注释，所选择的背景按钮外层加一圈黑色示意
图表样式设置功能
页面说明：
序号9：柱状图/折线图/面积图样式说明如图
4.5.2 饼图设置编辑页
标题设置功能
页面说明：
序号1：屏幕左侧页面点击或者右滑返回图表编辑页
表格设置功能
页面说明：
竖向表仅可选择左对齐或者右对齐，横向表可选择左对齐/右对齐/居中。
值设置功能
背景设置功能（同4.5.1柱状图/折线图/面积图）
图表样式设置功能
页面说明：
饼图样式说明如图
4.5.3 智能剪贴画设置编辑页
图像搜索功能
页面说明：
序号1：仅可输入英文名称搜索，无编辑内容时文本框内容为Search，字体浅灰色，输入内容后字体变为黑色
异常提示：
当移动端无网络时，搜索框下方“在线搜索图像”更改为“连接中断”，搜索框点击无反应
标题设置功能
值设置功能
背景设置功能（同4.5.1柱状图/折线图/面积图）
图表样式设置功能
页面说明：
智能剪贴画样式说明如图
页面名称：图表完成页
入口：
页面说明：
序号1：点击返回首页
序号2：点击进入图表编辑页面
序号3：点击导出保存到本地或者分享
以上便是我本次倒推撰写的Chartistic的产品需求文档，格式参考倒推“潮汐”APP的产品需求文档。
这款App是一款很实用的手机应用，交互很有特色，因为过于追求操作的简便，导致功能局限比较大，对于App的未来优化方向，笔者认为可以在以下几个方向尝试：
这是本人第一次撰写的产品需求文档，一定有诸多不足，希望各位前辈不吝赐教，感激不尽！希望可以成为一名产品经理，创造出对用户有价值的产品，不求做改变世界的产品，只求改变自己，改变眼前。
文章来源：人人都是产品经理
大部分交互设计师接到需求后，就开始分析下竞品、然后结合自己产品和自己的想法，就着手交互原型制作了，在这样一个设计流程中，交互设计师很难有体系化的思考。
有没有一套体系化的设计思路，让交互设计师做出的方案又专业、又全面、又经得起挑战和用户检验的设计方案呢？
本文是我梳理的一套体系化设计流程与思路，希望可以帮到大家。体系化设计思路大纲如下：
作为一个交互设计师。在我们接到需求之后，首先需要弄清楚的是产生需求的业务背景是什么。其次是基于业务背景了解产品的目标是什么。最后弄清楚产品的用户人群有哪些，用户目标是哪些。
交互设计师通过从产品经理或者其他需求发起方那里了解需求生产的业务背景，了解为什么要做这个需求。在了解清楚之后，追溯需求最原始本质。
在我们实际工作的大部分情况下，大部分产品经理不会在需求文档中将业务背景写清晰，这时候我们交互设计师就可以将业务背景在交互文档中输出，并清晰的展示出来。
1. 业务背景是什么？
业务背景通常是我们为什么要做这个功能。通过做这个功能，对业务有什么帮助。通过业务背景，我们可以推演出业务诉求，并得到对应的产品目标。
2. 产品目标是什么？
产品目标是产品能得到什么样的结果，对产品来说可以获得什么样的好处。所以在交互文档的设计中要重点体现出产品目标。通过明确产品目标，可以清晰的指导我们做交互方案。
3. 用户人群是哪些？
用户人群主要是通过我们对现有产品的用户画像得到，并推算出使用这个需求的用户人群是哪一类人，通过明确的用户人群，这样我们在做设计过程中，可以很清晰知道这个需求为谁而做。
4. 用户目标是什么？
用户希望通过使用这个功能达到什么样的好处或目的。
5. 设计目标是什么？
通过业务背景、用户人群、用户目标和产品目标拆解出对应的设计目标。
以登录注册为例。业务背景是目前产品的登录和注册的效果不理想。对应的用户人群分为两类，分别为新用户的注册流程和老用户的登录流程。用户目标是方便快速的完成登录注册流程，越简单越快越好。产品目标是提升登录注册的完成率。
设计目标是拆解，如何能提高登录注册的完成率。那么设计师可以拿到登录注册的完成流程，看看登录注册过程中，哪些步骤转化率低，那么对转化率低的地方进行设计优化。
目标拆解就是对页面进行数据提升具体优化方案，例如文案问题、视觉布局问题、交互路径问题等。
对于设计师来说设计方法有很多种。例如常见的有：目标导向、数据分析、用户调研、设计走查、场景化设计、用户体验地图、竞品分析等。
在做设计方案过程中，一般不会将上述的方法全部用到，更多的是使用其中的一种或者几种混合使用。
根据具体的需求选择适合的方法。例如在做登录注册这个优化流程方案过程中，可以通过数据分析找到转化率低和设计走查思考如何提升数据，就可以完成设计目标。
1. 不同场景梳理
我们需要以场景的思维做场景分析，通过场景分析就可以清晰地描述这些场景，从而确定用户的需求，并在这基础上用交互方案满足需求。
举个栗子，产品提出一个需求：应用添加「商品列表按照价格从低到高排序」的功能，这还是老思维，是在「定义我们的应用」；
而如果从场景的角度来思考，用户搜索某种商品，在列表页会列出一长串商品，而用户此时只想快速找到符合他的要求的那一个；而有些用户在挑选的时候，会需要买价格便宜的，此时排序功能就是用户的需求。
这样从场景来理解，会更清楚地理解需求发生的环境，便于做出好设计。
比如，顺着排序的场景，可以进一步想：有这样需求的用户在我们的应用里多吗？如果多，那么意味着用户经常需要进行排序的操作，所以在设计的时候，可以把排序的入口放的明显一点，好操作一点，方便用户轻松地进行排序。
对于使用滴滴快车的用户，整个流程包含三个阶段，分别为上车前，坐车中和下车后。每个阶段都存在多种用户使用场景。
2. 不同角色用户
有时候需要考虑不同角色的用户，例如后台系统，需要同时考虑普通用户、管理员角色和超级管理员。
三个不同角色的使用权限也是完全不同的。权限：普通用户 < 管理员角色 <超级管理员。三种角色的主操作流程也是不一样的，在设计过程中需要差异化设计。
3. 设计不同流程
明确设计目标、设计方法确定、弄清楚不同场景。接下来就是设计不同的流程。
一般先设计功能入口流程，接下来就是主流程和支线流程。最后才设计异常流程。
4. 方案细化和走查
在涉及到异常场景，且可以全局性复用的情况，则只需要全局性组件说明即可，不用每个流程都展示其异常场景组件或者页面。
全局组件指的是整个产品通用的组件，例如全局断网，操作成功、操作失败、加载、空数据界面，404 等
全局断网：一般是在首页使用 tips 提示。用户在其他界面点击操作时，也会出现 toast 反馈提示用户。也有一些 app 在用户进入后出现对话框提示用户网络异常。相对于对话框，使用 tips 对用户的干扰度更小。
操作成功：一般操作成功都是根据具体的使用场景出现对应的提示。
操作失败：异常情况导致操作失败，这时需要统一的提示，通常使用 toast，也有一些使用对话框强提示用户。
加载：涉及到全局加载和局部加载，全局加载在设计中要统一说明，例如上一个界面点击进入下一个界面，使用的全局加载就需要说明。如果是一些小场景的加载，那么需要特殊说明。例如上拉加载，下拉加载，局部小区域加载等。
空数据类型一共有三类：
通过核心指标判断设计方案是否符合预期，以此验证设计方案是否成功，并为后续产品的迭代优化做依据。
1. 关注设计的核心指标
设计过程中，要关注设计的核心指标，针对于核心指标，进行针对性的设计。
如果改版的最重要（核心）的指标是任务流程完成率，先查看用户操作流失率，然后分析找出流失原因，给出对应的优化方案。等到优化方案的产品版本上线后，对比完成率数据变化。
如果改版的最重要（核心）指标是人均观看次数，则要思考可通过哪些设计策略可提升产品的人均播放次数。
举个例子，新浪微博，以前版本用户看完视频后，视频会有重播按钮和推荐视频，用户只有进行下一步点击才能播放下一个视频。
改版后看完视频会自动切换到下一个视频。这样的设计策略虽然绑架了用户的行为，用户从一个主动接收者，变成了一个被动接收者，但是这种策略能有效的提升人均播放次数。
2. 核心指标带来的价值/收益
当验证了核心指标往好的方向发展，这时候，就需要总结核心指标带来的价值和收益，这样的话设计价值才可以直接被量化。
举个例子：一个 banner 的点击率达到 3% 的时候，每天 GMV 约 200 万，当重新设计了这个 banner，同时其他条件保持不变，点击率提升到了 6%，这时候通过数据查看每天的 GMV 是多少，如果达到了 400 万，那么这增加的 200 万的 GMV 则是通过设计优化所带来的。
设计师在交付稿件后，容易松懈，以为项目告一段落，就疏于后续的跟进工作。其实后续的跟进也很重要。产品测试版上线后，交互设计师应该跟进后续的走查和设计问题的反馈。
通过数据分析，确定上线的方案有哪些问题需要优化，建立需求池方便后续跟进优化，不断完善产品设计。
文章来源：优设
网页设计基础之HTML（一）
1.Web的基本概念
web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
主要包含结构，表现和行三个方面
2.HTML简介
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
<标记名>内容</标记名> 双标记，也称标记体
<标记名/> 单标记，也称空标记
<!--注释内容--> 注释标记
<标记名 属性1="属性值1" 属性2="属性值2">内容<//标记名>
<title>网页标题名</title> 设置页面标题标记
<meta/> 定义页面原信息
<link> 引用外部文件标记
1
2
3
4
5
6
7
8
9
10
11
12
13
14
注意元素的就近原则
补充：link的属性 请参考此网址
3.HTML入门
①HTML的概念：HTML 是用来描述网页的一种语言。
②HTML的文本控制标记
1.标题标记：
标题（Heading）是通过<h1> - <h6>标签进行定义的。
对齐方式：
left：设置标题文字左对齐
center：设置标题文字居中
ringt: 设置标题文字右对齐
使用方法 <h2 align="left">二级标题 左对齐</h2>
2.段落标记
段落是通过 <p>标签定义的；其他同标题标记一致。
3.水平线标记<hr/>
相关属性
使用方法<hr color="red" align="left" size="5" width"600"/>
4.换行标记<br/>
1.1文本样式标记
font的属性
1.2文本格式化标记
详情请点我
1.3特殊字符标记
详情请点我，并查看HTML字符实体部分
4.附上本节课的脑图
注：本文参考自菜鸟教程
好的用户体验是不会让用户注意到并毫无察觉的一种体验。表面上看似非常简单，但实际上设计师已经做出了非常多的设计思考。用户越少的去思考界面，用户就越能专注他们要完成的目标。在浏览页面时，用户的注意力不应该停留在界面和设计上，他们更应该关注的是如何达成他们的目的。所以作为设计师的首要工作就是通过事先清除障碍，为用户提供直达目标的途径。
“通常，飞速行驶的货车不可能轻松地停下来。因为运用更多的动能去改变运动状态是非常困难的。与其强迫人们从他们的主任务上转移注意力，不如直接带他们去他们想去的地方。”
——Luke Wroblewski，谷歌产品总监
换个思路来看。复杂和混乱的界面会迫使用户去寻找解决问题的方法，而通常情况下，这些方法并不是一目了然的。用户会因为过多的选项、界面、导航等感到困惑，用户可能会在思考过程中感到不知所措。即便是很短暂的停顿，也足以让用户离开。
这种过度的思考就被称为认知过载，在这篇文章里，我们将为你解释如何避免认知过载。首先，我们需要明白我们大脑中存在过载风险的原因。
认知超负荷的科学根源
认知过载是指工作记忆中脑力处理的信息总量过多。当你的工作记忆接收到的信息超出其可以轻松处理的信息时，就会发生认知过载，从而产生挫败感。
但这究竟意味着什么？工作记忆到底是什么？针对这些我们又应该怎样进行设计呢？那就让我们先来了解一下认知负荷理论的起源吧。
JOHN SWELLER和认知负荷理论
虽然对认知的研究可以追溯到几个世纪，但直到20世纪80年代，澳大利亚教育心理学家约翰·瑞勒才将这项研究应用于教学设计当中。Sweller试图为每一种类型的学习者找出最适合他们的学习方法，让他们可以记住他们学到的所有知识。换句话说，怎样的课程设计才是最佳的呢？
Sweller在1988年出版了“ 认知负荷理论，学习难度和教学设计 ”，这使他的研究工作达到新的高峰，于1994年重新修改并重新发表。他的研究中运用了数据组织结构中的图表数据库，讲述了有效和无效的教学方法，而他对于工作记忆负荷极限的研究结果才是设计师们找到的最有用内容。
Sweller的研究在许多方面扩展了George Miller的信息加工理论。George Miller是一位认知心理学家和语言学家，他在20世纪50年代测试出短期记忆的极限。Miller的研究在于数字化设计，尤其是分块技术方面，这将在后面讨论。另外，Miller还创作了论文“ The Magical Number Seven, Plus orMinus Two“，这个理论促使许多设计师将菜单项的数量限制在5和9之间。
虽然这些理论最初是针对教育领域的，但它们同样适用于用户体验（UX）设计。
工作记忆
如果你每次打开冰箱，都必须回答一个像谜语一样的问题，“什么东西小的时候四只脚走路，长大了以后两只脚，而老了以后有三只脚？”这是一个老段子。但是，根据认知负荷理论，使用这种让人无奈的用户体验设计会让用户产生挫败感。
要理解认知负荷理论，你必须要了解什么是工作记忆，大脑在短时间内用于完成任务的过程便是工作记忆。工作记忆必须借助外部刺激和短期记忆，并在需要时从长期记忆中抽取。通俗一点说，工作记忆相当于计算机内存，而长期记忆则相当于硬盘驱动器。
工作记忆和短期记忆通常可以互换使用，但它们略有不同。工作记忆是处理信息的过程，而短期记忆更像是一个信息的便签本，它虽然重要，但却没有长期记忆重要。
让我们看看这篇文章是如何解释这些差异的。在你阅读的时候，你可能会遇到一个用蓝色字体书写的陌生概念。你的工作记忆需要知道蓝色文本是什么意思，才能够理解文章更深层的含义。你的长期记忆知道蓝色文本表示链接，因此你的工作记忆知道点击该链可以获得更多信息。与此同时，你的短期记忆会记住你在文章中的位置，这样当你从外部页面返回时你不会迷失，但到了第二天早上，该位置就会被遗忘掉。
设计中的应用
Steve Krug（史蒂夫·克鲁格）是一位很有影响力的作家，他在网页设计中极力推崇认知负荷理论。他的书《Don’t make me think》被许多设计师认为是有巨大影响力的著作。
书中记录了许多宝贵的经验，下面就列举一些的：
1、每一个页面都要清晰明了。
2、用户倾向于“满意” - 也就是说，采取一个最简单的解决方案来解决他们的问题，而不是最好的解决方案。此外，作为习惯的生物，用户将一遍又一遍地使用相同的方法解决问题，而不会刻意寻找一个更好的选择。
3、当新用户可以熟练使用该系统来实现他们的目标时，系统的可用性就足够了。
4、用户使用网络的绝大部分是想要节省时间。因此，用户的行为通常会像鲨鱼一样“保持移动，否则就会死亡”。
5、后退按钮是Web浏览器最常用的功能。
6、屏幕上显示的主页按钮即使从来不被用户使用，但也能让用户感到放心。
总之，用户在浏览网站过程中哪怕是一瞬间的思考，也会对他们的工作记忆造成负担。例如 “这个可以点击吗？“首页按钮在哪儿？”和“我怎么保存？”等等问题，都会不同程度破坏用户体验。
认知超负荷最常见的原因
许多设计元素都有可能对用户的大脑造成超负荷，外界环境中会有更多的因素它们超出了设计师的控制范围。例如：一个用户浏览网站的同时会担心第二天的工作报告，或者被窗户外装修的噪音所打扰，此时，无论你的网站设计多么简单，这些都会耗尽他们的工作记忆。
我们要知道每个用户的工作记忆能力都不同。随性的用户比那些对每一件小事都无比关注的用户更能专注于你的网站。不经常上网的用户往往比经验丰富的网络用户思考的更多。
虽然我们无法量化所有的认知过载，但我们可以尽量的去避免他的产生，下面，我们对网页设计中最常见的类型以及避免它们的最佳方法进行了分类说明。
1.不必要的操作
用户的每一步操作都会增加他们的认知负担。过多不必要的操作会打断用户的思路或者会让用户抓狂。因为用户的工作记忆都集中在完成特定的目标上，所以多余的操作将迫使用户投入更多的精力，这样就需要更多的工作记忆才能完成任务，所以，那些不必要的操作步骤很考验用户的耐心。
速度和节奏是让认知负荷最小化的基本因素。用户希望以轻快，目的性很强的步骤来完成任务，所以应该提前消除一切延迟。
用户希望在他们提交邮箱地址之前就知道他们将要进入什么网站，但Touch of Modern却要求用户在使用之前必须进行注册！这个强制而又多余的行为将会吓跑很多的潜在用户。
解决方案
下面这个方法，可以帮助我们找到不必要的操作有哪些：列出用户要完成任务必须要去做的步骤。例如发送电子邮件：
1、点击电子邮件图标。
2、点击“发送到”输入框。
3、输入电子邮件地址。
4、点击“主题”输入框。
5、等等....
现在，重新审视列表并且找出可删减的操作步骤，想到什么了吗？你可以通过将光标一开始就自动定位在“发送到”字段就可以删除步骤2.这将减少用户的操作，虽然很微小，但你消除的每一步对于用户来说都是友好的。
我们来看看谷歌的主页。光标一开始就在搜索输入框当中，因此用户所要做的就是开始输入文字。这些微小的交互提升了整体的用户体验，所以不要忽视它们。
2.过度刺激
杂乱无章的页面会分散用户的注意力，使用户无法专注他们想要完成的目标。就像有好几个人同时与你交谈时你会很难集中注意力，当页面上太多的图片、动画、图标、广告、文本类型和鲜艳的颜色夺取你的注意时，就会很难集中注意力。
记住，每个人的工作记忆在完成目标的过程中，会因为外界的刺激对每一步工作重新排序。每一次分心，尤其是视觉上的强烈刺激，都需要消耗用户的一部分注意力。
LINGsCARS就是个极端的例子，你可以看到有强烈对比的颜色和绚丽的动效冲击着人们的感官。在屏幕上，即便在两个不同位置同时进行的动效依然会对用户造成过度刺激。
解决方法
首先，减少一切不必要的元素。仅保留必要的内容通常是最佳的选择，减少加载时间并简化体验。用户更喜欢视觉简单的网站，而不是视觉上复杂的网站。
你还可以进行内容区分以达到平衡的效果。太多相同的内容（比如文字或图像）会让用户感到厌烦。所以，视觉内容要进行合理的组合，图像、视频、信息图表等，能够使页面和谐，并便于用户理解。
影视网站IMDb本可以在很大程度上轻松地只依靠图片进行排版，但它反而运用同量的文字内容来平衡网站页面。
在抽取出一个页面上必须要展示的元素之后，你应该采用一种让用户立即能够理解的方式组织这些元素。对称或者不对称的信息布局显示都可以很快的被用户所理解，也就是说，用一种方式，尽可能的减少大脑的工作。这样不仅对称和不对称都能让眼睛感觉很舒适，而这样的结构也能让界面交互更容易。
下面来看一下Groupon是如何布置页面的吧。左中是文本类的垂直菜单，右中是一个有特色的冻酸奶交易文本描述，插在文本中间的照片和色块的使用，分分钟创造出一个让人喜爱的沙漏结构。
下面来看看Groupon是如何将它的垂直菜单（中间偏左）和描述冻酸奶的文字（中间偏右）进行布局的吧。大图居中被文字包围着，这样就打造了一个舒适自然的沙漏形状。
对称不仅仅是在屏幕的两侧应用相同的布局，它是视觉重心和视觉方向的平衡。通过这种方式，非对称页面也能看起来很有组织性，如下图的OTHR所示。
将你的页面内容精减到只包含简单的和非竞争性的元素，这只是完成了预防过度刺激工作的一半。。不要忘记要以简单的布局呈现这些元素。
3、太多选项（希克定律）
这有点自相矛盾：用户需要更多的选择，但是往往太多的选择会使他们的大脑超负荷。
席克定律（选择困难症）为我们揭示出了一种现象：用户拥有的选择越多，他们做出决定的时间就越长。
作为设计师要去理解库克定律，可以把每个选项看作是明亮的闪光灯，如下所示，太多的闪光灯会过度刺激用户。
甚至像Rakuten这样的知名网站也会犯类似的错误，因为他们没有真正的理解这个设计原则。给用户需要的而不是给他们认为他们需要的。
解决方案
假如你已经解决了不必要的和多余的选项，你可以将他们分别放入不同的组进行分类，你可以在百货商店的网站上看到很多例子，这些网站拥有广泛的产品选择。
它不一定是太多的选择, 只是一次有太多的选择。如果你可以用隐藏菜单，抽屉和拉出其中的一种方式隐藏一些选项，那么你将获得两全其美的效果，这些超级菜单虽然为用户提供了许多选项，但一定程度上不会给用户带来很大的负担。
但是，隐藏式的导航栏不利于发现，因此电子商务和新闻等行业的设计人员应该注意。你可以通过放置其他类似产品的链接使缺点最小化（比方说亚马逊的“相关购买”）从而最大限度地减少隐藏菜单的缺点。或者你可以归纳导航菜单的类别，将它们精简为单行导航（如Apple和CNN那样）。
你还需要注意应该如何组织整个网站的导航。许多与库克定律有关的问题可以通过管理信息架构（IA）来处理，我们将在下面的“难以查找的页面和功能”部分中讨论。
4.太多内容
就像过度刺激和选项过多的问题一样，提供过多的内容会将用户的工作记忆拉向不同的方向。
显然，你希望展现的只是重要的内容，但对于一些网站来说，一切都是重要的，如果你的网站也有非常多的内容，为了避免让用户产生困惑，应该对内容信息进行和里的组织规划。
Arngren的问题并不是它展示了很多的产品，而是它同时展示了太多的产品。在组织结构上的调整将会给网站带来更好的体验。
解决方案
如上所述，George Miller的解决策略是“分块”，将需要展示的大量内容以可管理的方式组合起来，以便于记忆，电话号码分为国家代码，区号，一组三位数和两组四位数字便于记忆，而一连串的11个数字会很难被记住。
你想在商店主页上放大量产品的图片吗？比起将它们全部罗列出来，不如通过他们的类型将他们分组罗列。Etsy通过根据不同的店铺将产品进行分组展示。
还有文本组块，文本组块包括简短的自然段，合理利用标题和副标题以及足够的留白。
对于需要大量数据的长表单字段，可以尝试采用多步骤表单。长表单可能会令人生畏，有时会导致用户流失。你可以将表单的信息分在不同的页面里，减少信息过量给用户带来的影响。记得一定要有一个进度标记来让用户知道还剩下多少页。（可以总结为复杂的页面简单化）
购买机票总是涉及填写大量的信息，其中没有一项是多余的。Virgin Atlantic通过将其分解在多个单页面上填写来改善其繁琐的体验：选择航班，填写乘客信息，输入付款详细信息等。将所有这些信息放在一个长页面上会对用户造成负担，也有可能会放弃购买。
5.模棱两可的界面
认知超负荷的罪魁祸首先就是用户界面混乱。永远不要让用户花费大量的时间来弄清楚他们如何才能完成想要的目标，以及花费时间来弄清楚图标的含义是什么。
并非所有用户都是经验丰富的，从而可以理解SpeedCrunch这种含义模糊的图标。即使他们能够识别代表Windows系统和Mac OS X系统的符号，那么位于右下角的那两个图标也会让用户迷茫。
解决方案
使用用户已经熟知的视觉提示。用户通常会用他所熟悉的符号来进行操作，即便是在以前从未使用过的网站上也是这样。如果你觉得没有新意，可以融合品牌特征巧妙的结合成为用户所熟悉的形式。Home Depot虽然运用了较为普遍的图标，但同时也赋予了他们品牌独有的橙色。
标准标签（如“联系人”和“提交”）的按钮比非传统标签（如“地址”或“开始”）更容易识别。通常已知的标签可以提高用户的浏览体验，而不常见的标签会让用户暂停以了解按钮的功能。不要为了个性化而丧失了识别性。
另外，你如果真的需要一个从未见过的图标该怎么办呢？如果这样，可以运用现实生活中的场景展示来让图标进行自我解释，这种做法是连接现实和虚拟的桥梁。例如：早期的互联网先驱选择了一个信封来代表电子邮件，因为信封是邮件系统的明显标志。
此外，要避免含义模糊的图标，特别是可能还会被误认为是其他含义的图标，就像下列Issuu的图标，有些是被人熟知的，但有一些却不是。如果用户必须通过点击这个图标来发现它的功能，这就会中断他们的操作进程。
任何一个表意不清的图标都应该附带说明，告诉用户怎样操作。新的并且不常见的用户界面，就需要更多的分步教程。例如，Slack就给出了一个完整的视频引导来说明界面的操作流程。
6.难以查找的页面和功能
即使用户已经拥有他们所需要的一切，但他们可能还是不知道如何去寻找它。这样就会让用户费尽脑力去寻找他们所需要的。作为用户体验中不可或缺的元素，导航应该放在明显的地方，给用户信心去任意浏览网站而不会迷失。
如果你觉得汉堡包图标不好，那可以在看看Mojo Yogurt，它会要求你将鼠标悬停在左上角的徽标上以显示导航菜单。
虽然围绕着Logo有个小的动效，但对于整个屏幕的颜色和动效来说，它并不够明显。
解决方案
根据用户的偏好理顺你的信息架构。你的目标用户群可能并不认可你的做法。因此，要想他们学习如何组织网站，卡片分类试验会告诉你你的用户将会如何对页面和话题进行分类。
如果你还希望通过组合页面和菜单项来消除多余的页面。设计工作室Waaark通过将其工作室的简介，团队成员简介和联系信息这三个页面合并到一个页面来简化他们的导航。
如果某些功能或特征比其他功能或特征更重要，可以运用视觉手段来吸引他们的注意，增加大小，添加动画以及使用对比色以此来吸引用户的眼球。
PayPal期望有更多的老用户而不是新用户，并通过设置登录按钮与吸引注意力的白色块背景来迎合前者。
7.内部不一致
假设网站的主页使用标准的蓝色和带下划线的文本来表示链接，但另一个页面仅使用蓝色而没有下划线。当用户浏览其他页面时就会停下来去想，“它没有下划线，这还是个链接么？”他们甚至可能不会再去关心链接，而会被其他页面的不统一分散注意力从而影响整体的用户体验。
要记住，最好的用户体验是不会被用户所察觉的，而像上面这样通常都会被注意到。
总结
1、认知过载是影响工作记忆的因素。当过多的信息阻碍决策和整体经验时，就会发生认知过载。
2、使用不同的内容类型和结构化页面组合，可以避免视觉混乱。
3、隐藏式菜单可以帮助用户一次管理可用选项的数量，但降低了可发现性。
4、“分块”和“步骤”等的方式可以防止认知过载。
5、UI元素和图标应该基于用户现有的认知上，这样他们就不需要过多的思考，新的独特的功能要加上解释说明。
6、围绕用户的实际思考方式构建你的信息架构。卡片分类等可用性测试可以为你的目标群体揭示最直观的导航方案。
7、视觉和功能的不一致，以及打字错误和语法错误，都会分散用户的注意力。
8、尽可能减少冗余。另外，请留意如何最大限度地减少用户操作步骤量和他们必须花费的精力。
文章来源：UI中国
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
一 - 字面量方式和new方式
☛每次创建数组或对象的时候，都能用以下两种方法创建：咦？有什么区别呢？还有哪些可以有这两种方法呢？我到底用哪一种呢？
var arr = [];//字面量方法创建数组
var arr = new Array();//实例化构造函数方法创建数组
var obj = {};//字面量方法创建对象
var obj = new Object();//实例化构造函数方法创建对象
二 - 哪些对象可以new？
☛只要存在构造函数的都可以new出来。
var num = new Number();
var boo = new Boolean();
var str = new String();
var arr = new Array();
var obj = new Object();
var fn = new Function();
var reg = new RegExp();
var date = new Date();
基本上来说 js中对象，除了null ,undefined，其他的都是可以用new出来的。
三 - 字面量是什么？
字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量。
JavaScript支持字面量，允许使用一种简洁而可读的记法来创建对象、数组
字面量分为：字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，另外还有函数字面量(function literal)等等。
var num = 1;
var boo = true;
var str = "a";
var arr = [];
var obj = {};
var fn = function(){};
var reg = /\s/g;
四 - 两种的区别
字面量语法简单，直接，优雅
也没有必要去使用new去调用构造方法，减少代码，减少代码运算量。
那new这个操作符到底做了什么？
var arr = new Array();
/
new:
1:var obj = {};
2:obj.proto = Array.prototype;
3:Array.call(obj);
/
五 - 使用哪一种？
字面量比new
比如：{}是字面量，可以立即求值
而new Object()本质上是方法（只不过这个方法是内置的）调用， 既然是方法调用，就涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的堆栈信息，方法调用结束后，还要释放该堆栈。
————————————————
如果非要代码实现的话，github上一个不错的js库（X2JS）：https://github.com/abdolence/x2js
自己写了demo测试了一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script src="js/xml2json.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var xmlText =
'<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="220" y="90" width="120" height="80" as="geometry"/></mxCell><mxCell id="3" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;" vertex="1" parent="1"><mxGeometry x="410" y="110" width="80" height="80" as="geometry"/></mxCell></root></mxGraphModel>';
console.log("原始数据xml:"+xmlText);
var x2js = new X2JS();
var jsonObj = x2js.xml_str2json( xmlText );
console.log(jsonObj);
var xmlAsStr = x2js.json2xml_str( jsonObj );
console.log(xmlAsStr);
</script>
</html>
效果如下：
基本能还原，只是""变成了''，这个应该问题不大的。
关于「撤销」有很多设计细节可以讲，所以我花了两周时间，将其浓缩成 3000 字，帮助各位产品设计师更好理解撤销的设计细节。
撤销的目的是帮助用户取消当前的操作行为。
撤销可以对用户使用产品起到一种安全保障作用，让用户在界面中自由地探索而无需担心操作所可能导致的严重后果。
或者用户删除了一个视频，撤销可以帮助用户恢复他所删除的内容；以及用户进行了一步操作，觉得不太好，就通过撤销来回退到上一步操作。
与之对应的叫「重做」，就是当用户撤销了当前的操作，但是想了想，还是行进到刚才已经操作的步骤好了。既给了用户安全感，还给了用户反悔的余地。
类似于下象棋的时候，你觉得这一步走得不好，所以悔棋了，虽然对家没说什么，但是你心里又觉得过意不去，毕竟落子无悔真君子，所以你又把棋子放回去了（真是不怎么恰当的比喻呢）。
这样做的目的是提升用户使用产品的信心，增强对产品的控制感；鼓励用户放心地探索，快速建立起自己熟悉的操作路径。
所以关于撤销，我们可以从下面几点来聊聊：
它的意思是，依次撤销之前的操作。
在尼尔森可用性原则里，就有一条类似的原则存在，即 User control and freedom（允许用户自由操控）。
很多人把这条原则解读为「撤销原则」，本质上是没什么问题的，因为撤销确实需要让用户自由操控。但是早期的撤销，并不「自由」，而仅仅只是让用户在一定范围内「可操控」。
比如早期在一些产品里，执行多步操作，但往往只能撤销一次，要想继续撤销是不被允许的，所以它的操控自由度就很低。那时候如果把这条原则解读为「撤销原则」，显然是不合理的。
于是，后来逐渐延伸出多次撤销的功能。
我记得最早使用 PS 的时候，在 PS 里面就有关于撤销次数的范围设定，但是我忘了具体范围的上限与下限是多少了。
使用的方式是，比如我设置参数为 10，那么之后我的撤销也只能操作 10 次，要想继续撤销，就会告知无法继续了。
现在的很多工具产品应该是没有这些限制了，比如 Sketch，Word 都是可以无限次撤销直至最初始状态或刚打开文件的状态。
相对早期撤销的使用逻辑，后来可多次撤销的操作在自由度上，确实是好了那么一些。
它就是在「单次撤销」的基础上，给了用户「多次撤销」的机会，并让用户回到自己满意的位置。
但是这里的撤销，它还不够自由，因为它是「依次撤销」—— 每一步撤销用户都得经历。
当撤销随着用户场景的变化而进化之后，才真正具备了比较自由的操控方式。
让撤销具备「选择属性」，必须与另一个元素做一个结合，那就是「历史记录」。
继续拿 PS 举例。
大家看到上面这张图，当你在 PS 的画板里完成了一系列操作之后，发现后面有一些东西做得不是很好，想回去重做，但是依次撤销又觉得不好把控，于是就通过操作历史，来选择具体回退到哪一步。
相比于依次序撤销，选择性撤销的自由度更高，也更符合其对尼尔森可用性第三条原则的解读。
或者再通俗一点的例子，浏览器。
假设这时候你打开了 5 个网页，关掉了其中 3 个，但是突然想起第 1 个关掉的网页还有值得收藏的内容，于是依次撤销 3 次，才打开第 1 个关掉的页面。
而现在有网页历史记录，就可以直接帮你打开之前关闭掉的所有网页中的其中一个。
解决了用户每一步都要经历的问题。
当「撤销」与「历史记录」结合之后，「选择性撤销」的出现还能解决掉「依次序撤销」的一个关键问题：撤销重做之后，无法复原。
通俗点讲，就是当用户撤销到之前的操作，进行了新的操作行为，那么原来旧的那条线路就被废弃了。看图：
当用户操作到第 5 步，然后撤销至第 3 步，再执行一次新的操作，那么步骤 4 与步骤 5 就会被废弃。
大家知道很多设计师都会做版本记录，因为 PS 的历史记录虽然在撤销操作上方便了很多，但无法复原之前的操作逻辑依旧不能满足一些设计师的诉求。
毕竟不废弃的话，撤销操作的逻辑就会很复杂；且通常「选择性撤销」伴随解释，说明用户清楚知道自己当前行为会造成何种后果。但它并不能解决用户操作过程中实际存在的这类问题。
而「选择性撤销」的「版本记录」可以解决这个问题，来看下面这个例子。
结合历史/版本记录，比如用 Notion 或石墨写了一篇文章，它们都会有版本记录，过程中会根据时间维度与内容变更维度来判断是否进行保存，那么当用户想回滚到之前的那段内容，只要对这些版本进行点击查看，然后选择具体撤回到哪一步即可。
比如我今天（2019.11.05）早上花了半小时最后对文章做了一次整理，添加了图片，它就会记录其中的操作变化，且可进行选择。这里无论如何撤至哪一步，其它内容都会有留存，不会消失。
也许这已经不是通常意义上的撤销，但它确实是撤销的升级版。
这样看起来是不是自由操控度要高很多呢？
到这里，我只是讲了「撤销」的特性，下面来聊下它在界面设计中是如何应用的。
我们现在在很多产品里都能看到撤销，在网页里与移动 App 中，它的使用形式虽然多样，但本质上并没什么区别。
大多就是单次撤销，因为用不到多次撤销，多次撤销更多是在工具里被使用。
比如油管的撤销使用：
当用户对一个视频进行「不感兴趣」的操作时，视频内容会变成右边这样，可撤销。这个内容会一直存在直到用户刷新页面时才会消失。
类似的还有淘宝网页端的购物车，当删除添加的任一商品后，其也会在附近位置出现可撤销的操作。
在网页产品中，撤销的运用大多是这样的。
我们再来看移动端产品对于撤销的应用。
在 iOS 中比较常见的是微信的摇一摇手机撤销正在键入的内容：
这类撤销较为被动，经常是在无意间触发，所以不是我们主要要聊的。
而有一类产品，撤销会以 Snackbars 的形式出现，如图：
当这类邮箱产品，删除了某封邮件后，在底部就会出现这样的提示，告知用户可撤销上一步行为。
更多的还是工具类产品，比如修图类产品 Snapseed：
它有单次撤销，也可以重做，还能多次撤销，多次撤销就是点击「查看修改内容」之后，右图出现的样子，它会把所有步骤都呈现出来，给予用户选择具体撤销至哪一步。
其实更多的也就是这样了，但是，为什么呢？为什么在非工具类产品里撤销很少见呢？难道用户从来不会误操作或操作之后反悔？
下面一节来解答。
先放结论：当某个功能具备撤销属性时，切勿再使用二次确认对话框，反之同样成立。
撤销与二次确认，是两种东西，虽然有时候解决的是同一个问题，但是它们的属性是完全不同的。
举个例子：
上面这张图，左边是在执行操作前弹出的确认框，右边是执行操作后弹出的提示框。
二者的区别很明显，二次确认的删除提示框更具警示效果，后者作为提示，较为弱化，且通常是在用户操作完成后弹出。对于用户来说，在非工具类产品中，前者更好的抑制了用户的冲动行为或误操作行为。后者作为提示类控件，不具备警示效果。
所以它们不应该同时出现，且它们虽然是解决同一个问题，但是是完全不同的情况。
于是，在大多数产品中我们很少看到撤销的使用，因为大部分需严谨的操作都会有二次确认，并不严重的操作也就不需要任何提示。即使是上述提到的邮箱删除，没有二次确认也是因为它有撤销作为提示且还有回收站允许用户检查确认。
所以，除非是场景与之密切相关的，比如社交产品内容发送后的撤回功能。
微信早期的撤回，只是撤销，它并不具备「重做」属性，现在撤回，内容会重新出现在输入框让用户重新编辑。
它们之间的差异是：它并不会产生严重后果，但确实会产生小问题。比如误操作发出信息，或发出后发现话术并不严谨。
所以这一段内容只是想告诉各位：二次确认操作与撤销操作是两种不同的东西，虽然看起来是解决同一个问题，但它们的差异也是非常明显的。必须谨记。
另外还有个提示：心细的同学会注意到文章里或其他产品里出现的「撤销」通常也会写成「撤消」。在别的领域里这是两种不同的内容，但在产品设计领域里，目前并没有对这两者做明确的区分，所以暂时不用过于纠结。
这篇文章讲了很多内容，我在这里梳理下：
所以当你设计的产品要用到撤销时，也要注意这些细节问题。
这就是本篇文章的所有内容了。其实这篇文章里包含的内容有很多，而且有很多争议点我都没放出来，直接一笔带过给出正确结论了。写这种大部头文章太累，要思考的点很多，需要帮助读者从多视角排雷，很可能导致初学者在读文章过程中出现阅读吃力的问题。所以之后还是会挑一个点来写吧。
文章来源：优设
功能描述：右击表格中对应的行，进行删除或者刷新的操作。
先往DataGridView上拖一个ContextMenuStrip控件
在下面分别输入删除与刷新
双击删除，输入代码：
private void 删除ToolStripMenuItem_Click_1(object sender, EventArgs e)
{
try
{
DialogResult dr = MessageBox.Show("确定删除吗？", "提示", MessageBoxButtons.OKCancel);
if (dr == DialogResult.OK)
{
//获取选中行的数据
Facade.FoodMenuCateFaçade façade = new Facade.FoodMenuCateFaçade();
Entity.T_FoodMenuCate t_Food = new Entity.T_FoodMenuCate();
t_Food.CateName = dataFood.CurrentRow.Cells[1].Value.ToString();
int list1 = façade.DeleteFoodMenu(t_Food);
frmTips f = frmTips.GetInstance("删除完成");
f.Show();
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
}
双击刷新，输入代码：
private void 刷新ToolStripMenuItem_Click(object sender, EventArgs e)
{//通过走七层查询出数据库中新的内容：
Facade.FoodMenuCateFaçade façade = new Facade.FoodMenuCateFaçade();
Entity.T_FoodMenuCate t_Food = new Entity.T_FoodMenuCate();
List<Entity.T_FoodMenuCate> list = façade.SelectFoodMenu(t_Food);
//把值赋给表格
dataFood.DataSource = list;
}
本文对几种常见的异常状态进行设计总结，其中介绍了不同异常状态的表现形式以及我们应展现的设计状态与规范。
异常状态多在特殊场景下出现，比如服务器异常、网络异常等，因为异常状态出现的概率是较低的，所以异常状态也常常会被忽略，等到实际碰到的时候才会意识到原来还有这种状态……
作为交互设计师，在完成主流程设计后，也应该考虑到异常场景。
从全局性出发，我们可以预先考虑到产品将会碰到的异常状态，针对不同的异常状态制定相应的设计规范，在后续的设计需求中直接复用即可。
下面对几种常见的异常状态进行设计总结。
网络异常的原因主要有以下两种原因：
（1）网络连接权限
针对某App的网络连接权限可以通过手机进行设置，可设置为关闭应用使用数据，或者只允许应用在WLAN下使用，或者允许应用在WLAN与蜂窝网络下均可使用。
所以以下均属于网络异常的情况：
（2）网络连接状况
在断网（打开飞行模式）、弱网（手机信号差）的情况下， 也无法正常获取数据。
当网络异常时，用户点击进入新页面或在当前页进行操作时，App会通过异常状态缺省页或交互反馈来告知用户当前异常状态和解决方案。主要分为两种情况：
（1）当用户操作进入App新的页面时，常以缺省页的形式提醒用户当前网络异常。当应用检测到有可用网络时，缺省页将自动刷新页面内容。
比如网易云音乐在无网络连接下，进入新页面时，缺省页以简单的文案告知无网络的基础原因，通过查看详情来告知用户解决方案以及引导如何解决问题。
美团、腾讯视频等，引导用户检查网络权限设置和稍后再尝试刷新页面，稍后再试是因为弱网环境是暂时的，比如在地铁上高铁上或者某处手机信号接收较差的地方。
（2）当用户点击操作当前页面时，比如上拉加载页面、下拉刷新页面，点赞、关注等操作时，常以toast或对话框的形式提示用户。
比如网易云音乐，网络异常情况下下拉刷新或上拉加载页面均进行对话框提示，并引导用户检查网络权限设置。
美团外卖，无网络连接环境下，在我的订单页面进行评价操作，会进行toast提示。
前面说完网络异常的设计规范，接下来就不得不提到流量警告的场景。
对于需要消耗大量流量的应用：
（1）在流量环境下进行需要消耗大流量的操作，比如播放/下载音视频等，页面会进行流量警告。比如网易云音乐在流量环境下打开MV。
（2）在WI-FI环境下切换到流量环境时通常应用会主动暂停进程并进行流量警告，并在页面上告知用户原因，让用户选择是否继续进程。
比如网易云音乐、爱奇艺、芒果TV、BiliBili等音视频娱乐App，在以上2种场景下，在视频画布上进行告知让用自己选择是否继续播放，同时也提供按钮入口让用户办理业务可免流量进行播放。其中，芒果TV和BiliBili的继续播放按钮还贴心地告知了用户将要消耗的流量值。
对以上两种场景的处理方式进行归纳，均为流量警告方式。
总结完网络异常和流量警告的设计规范，我们知道其中影响因素包含：网络连接权限、网络连接状况以及网络环境的变化，下面做一个小总结，以便快速查询。
在总结之前强调一下，网络权限设置是针对某App，连接Wi-Fi和流量是针对手机（所有应用）。以iOS为例，设置截图如下：
针对以上情况，表现状态为“网络异常”，则参照网络异常的设计规范；表现状态为“流量警告”，则参照流量警告的设计规范。
服务器出错的情况是较少出现的，若出现服务器异常，其异常的时间也较为短暂。
一般不提示具体原因，处理方式为进入新页面的话则以缺省页（文案或是文案+插画）的形式进行提示+重试按钮，例如，进入小米金融贷页面时服务器出现异常，缺省页提示错误原因同时提供重试按钮。
点击操作的话则以toast或对话框的形式进行提示并重试，比如下图的段友app，服务器出错，刷新页面后进行toast提示；前段时间超级火的zao应用，朋友圈火爆传播，一度造成服务器访问过载，制作视频的时候应用给出了对话框提示。
在数据加载过程中，导致异常的原因可能是：
1、网络异常导致加载失败
2、服务器请求数据失败导致加载失败
1、如果是因为网络异常导致加载失败，处理方式参照网络异常的设计规范。
2、如果是服务器请求数据失败，处理方式参照服务器异常的设计规范。
空状态就是指页面当前无内容，主要在以下场景下会出现空状态的情况：
当前页面为空一般会提示用户当前页面为空状态，同时也可能会做适当的引导。
针对空状态的场景，主要采取以下几种设计原则：
（1）用户无权限
一般在B端产品中会碰到这种场景，通常来说，若用户无权限访问某功能模块的话，处理方式一般是将该功能模块对用户进行隐藏。
若有其他原因不能隐藏对应功能模块，处理方式为缺省页面（文案或是文案+插画），但文案要足够明确，告知无权限的用户该如何处理才能访问，一般是联系管理员添加权限。
（2）搜索无结果
搜索无结果的处理方式一般有两种处理方式，一种是缺省页面（文案或是文案+插画），另一种是在第一种的基础上加上相关推荐。具体用哪一种根据设计目标来决定。
比如网易云音乐搜索音乐无结果直接用文案告知。豆瓣搜索书影单无结果以插画+文案的形式展示结果。美团搜索不到相应的内容，应用直接推荐其他商家刺激用户购买。
另外也有应用会添加一些引导操作收集用户数据来优化搜索，比如微信读书找不到相关的数据，在页面的底部提供一个入口让用户填写书籍名称和作者，基于用户的反馈数据，微信读书在后续书城书目的收录工作中，就可以优先收录用户搜索率较高的书籍了，在优化搜索的同时也提供了用户反馈诉求的入口。
（3）初始内容为空
需要用户进行操作产生内容的页面，初始状态一般为空，和搜索无结果的处理方式类似，有2种处理方式，一种是缺省页面（文案或是文案+插画），另一种是在第一种的基础上加上快捷入口或推荐内容，其目的都是在于引导用户进行操作从而产生数据。具体用哪一种还是根据设计目标来决定。
直接用缺省页面告知方式上，例如网易云音乐，个人未发布相关动态，该动态页面直接用简短的文案告知用户暂无相关动态。
提供快捷入口上，比如微信读书，用户未加入书籍到书架时，进入书架页面，会有一句话文案引起用户共鸣，另外附上找书按钮方便用户快捷进入书城进行找书。
如果通过用户浏览记录和搜索行为等能够分析出用户的兴趣爱好，进行精准推送，那在空状态页面进行推荐引导也不乏是一种很好的尝试。比如网易云音乐、腾讯视频和美团均有采取该方式。
网易云音乐里头我从未购买或领取过数字专辑，该页面也是无数据的，网易云音乐在页面底部进行了数据专辑的推荐，具体的推荐算法不太清楚，我觉得可以是销售量较大的专辑，或者根据我个人的搜索和浏览记录进行相关推荐，最后通过埋点数据分析通过推荐引导购买是否提高了专辑购买率。
（4）内容被删除
页面内容被删除区分场景说明。
第一种是需要用户操作产生内容的页面，用户也可以通过删除将页面内容清空。
对于该场景，当页面内容被用户清空后，页面内容为空，处理方式和初始状态为空类似，以缺省页（文案或是文案+插画）的形式告知或在此基础上加上快捷入口或用户推荐。
比如清空网易云音乐中我的下载列表所有单曲、清空腾讯视频我的缓存视频，清空微信读书的书架，清空后的状态和初始状态是一致的。
另一种场景是的页面入口依然存在，但二级页面内容已经被删除了，二级空页面的设计处理方式是以缺省页（文案或是文案+插画）的形式告知，文案信息告知用户内容已被删除。
例如某微信订阅号的文章发布记录中的某篇文章已经被删除，点击进入二级页面后的提示如下：
功能已上线，后期进行产品升级或迭代功能正在开发中，功能入口没有进行关闭还是允许用户访问，通常会在用户进入该页面之后进行对话对话框提示，告知原因。
以上对几种常见异常状态的设计规范进行了总结，相对正常状态，异常状态较为少见，容易忽略，大家可以参照以上规范进行异常状态设计和优化调整。后面碰到其他异常状态，我会继续补充。
文章来源：人人都是产品经理
首先，跨域是什么？
只要协议、域名、端口有任何一个不同，都被当作是不同的域。为什么三者任何一个不同就会产生跨域呢，想想也很容易知道，要是很随便引用什么外部文件，不同标签下的页面引用类似的彼此的文件，浏览器很容易懵逼的，保障不了安全问题，但在安全限制的同时也给注入iframe或是ajax请求上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页面对象
但有两点至少要清楚：
如果是协议和端口造成的跨域问题“前台”是无能为力的；
在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
(“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。）
1.通过HTML5的postMessage方法跨域
页面M通过postMessage方法发送消息如下：
window.onload = function() {
var iframe_dom = document.getElementById('iframId');
var targetOrigin = "http://www.baidu.com";
iframe_dom.contentWindow.postMessage('hello world!', targetOrigin);
};
备注：
postMessage的使用方法：
originwindow.postMessage(message, targetOrigin);
originwindow:是说的目标窗口，即要给某个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口
message: 是要发送的消息，类型为 String、Object (但IE8、9 不支持)
targetOrigin: 是限定消息接收范围，不限制请使用 '*
页面N通过message事件监听并接受消息如下:
let onmessage = function (event) {
var data = event.data;//由发送窗口传过来的消息内容
var origin = event.origin;//由发送窗口传过来的消息来源地址
var source = event.source;//源Window对象
if(origin=="http://www.baidu.com"){
console.log(data);//hello world!
}
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
//for ie
window.attachEvent('onmessage', onmessage);
}
或者为了防止接入方的命名冲突，也可以约定事件名，以此加以区分
例如
window.addEventListener("message", function(event) {
if (
event &&
typeof event.data == "object" &&
event.data.event == "FUNCTION_NAME"
){
document.getElementById("val").innerHTML = event.data.value;
} });
2.通过JSONP
上面那种方式的通信是双向的，页面与iframe或是页面与页面之间的
JSONP主要是封装好的请求方式添加callback,这个callback是由前后端约定好的
它的优劣势：
JSONP的优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题；无法判断它是否请求成功，只能通过timeout
3.CORS跨域
实现CORS通信的关键是服务器端，只要服务端那边实现了CORS接口，就可以跨源通信
CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉
服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，便可以允许Ajax进行跨域的访问
CORS和JSONP对比
JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS）。
CORS与JSONP相比，显然更为先进、方便和可靠。
4.设置代理
目前市场上用vue技术不在少数，下面介绍一种配置代理方式
在vue.config.js该文件里面配置如下：
devServer: {
port: 8001,
open: true,
disableHostCheck: true,
proxy: {
'/api': {
target: 'https:/xxx.com',
secure: true, // false为http访问，true为https访问
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
后面请求是需要带上‘/api’请求即可
蓝蓝设计的小编 http://www.lanlanwork.com