弹窗其实是一个很泛的概念，几乎所有在页面中有弹出的行为的操作都能称之为弹窗，其实是有点混乱，本文旨在梳理它们之间的关系
1，从程序上看，递归表现为自己调用自己，递推则没有这样的形式。
2，递归是从问题的最终目标出发，逐渐将复杂问题化为简单问题，最终求得问题
是逆向的。递推是从简单问题出发，一步步的向前发展，最终求得问题。是正向的。
3，递归中，问题的n要求是计算之前就知道的，而递推可以在计算中确定，不要求计算前就知道n。
4，一般来说，递推的效率高于递归（当然是递推可以计算的情况下）
最容易理解就是结合一个经典的例子：斐波那契数列
递归求解
int fib(n){
return n < 2 ? 1 : fib(n-1)+f(n-2);
}
递推求解
int fib(int n){
int fn = 1;
int fn_1 = 0;
for(int i=0; i<n; i++) {
int t = fn
fn = fn + fn_1;
fn_1 = t;
}
return fn;
}
递推 Inductive 是从1 往 n推(未知)
递归Recursive是从n(未知)往1推, 再层层返回
HTML基本概况
HTML文档基本格式
样式如下：
注意：文章以下出现的“《》”书名号仅代表大于号“>”和小于号“<”。
主要包括：<!DOCTYPE>文档类型声明、《html》根标记、《head》头部标记、《bady》主题标记。
1.<!DOCTYPE>标记
标记位于文档的最前面，用于向浏览器说明 当前文档使用哪种 HTML 或 XHTML 标准规范。
2.《html》标记
《html》标记位于<!DOCTYPE>标记之后，也称根标记。用于告知浏览器其本身是一个HTML文档。《html》标记标志着HTML文档的开始，《/html》标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。
3.《head》标记
《head》标记用于定义HTML文档的头部信息，也称头部信息。紧跟在《html》标记之后，主要用来封存其他位于文档头部的标记，一个HTML文档只能有一对《head》标记。
4.《body》标记
《body》标记用于定义HTML文档所要显示的内容，也称主体标记。浏览器中所要显示的所有文本、图像、音频、和视频等信息都必须位于《body》标记内。一个HTML文档只能有一对《body》标记。
HTML标记
所谓标记就是放在”<>"标记中表示 某个功能的编码命令，也称为HTML标签或HTML元素。
1.单标记和双标记
双标记：也称体标记，是指由开始和结束两个标记符组成的标记。基本语法格式如下：
<标记名>内容</标记名>
单标记：也称空标记，是指用一个标记符号即可完整的描述某个功能的标记。基本语法格式如下：
<标记名/>
2.注释标记
注意：注释标记中不能嵌套注释标记
标记属性
《h1 align = center》标题文本《h1》其中align为属性名，center位属性值，表示“标题文本”居中对齐，对于标题标记还可以设置文本左对齐、右对齐，对应的属性值是left和right。
在镶嵌结构中，HTML 元素总是遵循“就近原则”。
HTML文档头部相关标记
1.设置页面标题标记
《title》标记用于定义HTML页面的标题，必须位于《head》标记之内。一个HTML文档只能有一对《title》《/title》标记，《title》《/title》之间的内容将显示在浏览器窗口的标题栏中，基本语法格式如下：
《title》网页标题名称《/title》
2.定义页面元信息标记《meta/》
《meta/》标记用于定义页面的元信息，可重复在《head》头部标记中，在HTML中是一个单标记。
基本语法格式：
1.1《meta name=“名称” content="值“/》
(1)设置网页关键字
《meta name=“keywords” content="…"》
content属性的值用于定义关键字的具体内容，多个关键字内容之间可以用“，”分隔。
（2）设置网页描述
《meta name=“description” content=“…"》
content属性的值是用于定义描述的具体内容。需要注意的是网页描述的文字不必过多。
（3）设置网页作者
《meta name=“auther” content=“…”》
content属性的值是用于定义具体的作者信息。
2.1《meta http-equiv=“名称“ content=”值“
（1）设置字符集
《meta http-equiv=“Content-Type” content=“text/html；charset=utf-8“/》
（2）设置页面自动刷新与跳转
《meta http-equiv=“refresh” content=“10；url=http；//www.itcast.cn“/》
HTML文本控制标记
1.标题和段落标记
（1）标题标记
HTML提供了6个等级的标题，即《h1》《h2》《h3》《h4》《h5》《h6》.基本语法格式如下：
《hn align=“对齐方式“》标题文本《/hn》
（2）段落标记
段落的标记就是《/p》基本语法格式如下：
《p align=“对齐方式”》段落文本《/p》
（3）水平线标记《hr/》
含义 属性值
属性名：align，设置水平线的对齐方式 可选择left、right、center三种值，默认为center，居中对齐
属性名：size，设置水平线的粗细 以像素为单位，默认为2像素
属性名：color，设置水平线的颜色 可用颜色名称、十六进制#RGB、right（r,g,b）
属性名：width，设置水平线的宽度 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%
（4）换行标记《br/》
使用Enter键换行的段落在浏览器中实际上并没有换行，只是多出来了一个字符的空格，而使用换行标记的段落却实现了强制换行的效果。
2.文本样式标记
文本样式标记《font》，用来控制网页中的字体、字号和颜色。基本语法格式如下：
《font 属性=“属性值”》文本内容《/font》
属性名 含义
face 设置文字的字体，例如微软雅黑、黑体、宋体等
size 设置文字的大小，可以取1~7之间的整数值
color 设置文字的颜色
注意：XHTML中不赞同使用《font》标记，可使用CSS样式代替《font》来定义文本的字体、大小和颜色。
3.文本格式化标记
标记 显示效果
《i》《/b》 字体以粗体方式显示
《i》《/i》 字体以斜体方式显示
《s》《/s》 字体以加删除线方式显示
《u》《/u》 字体以加下划线方式显示
4.特殊字符标记
XSS攻击是什么
简介
攻击原理
例子
防御方法
简介
XSS(Cross Site Scripting, 跨站脚本攻击)又称是 CSS, 在 Web攻击中比较常见的方式, 通过此攻击可以控制用户终端做一系列的恶意操作, 如 可以盗取, 篡改, 添加用户的数据或诱导到钓鱼网站等
攻击原理
比较常见的方式是利用未做好过滤的参数传入一些脚本语言代码块通常是 JavaScript, PHP, Java, ASP, Flash, ActiveX等等, 直接传入到页面或直接存入数据库通过用户浏览器阅读此数据时可以修改当前页面的一些信息或窃取会话和 Cookie等, 这样完成一次 XSS攻击
例子
http://example.com/list?memo=<script>alert(“Javascript代码块”)</script>
http://example.com/list?memo=<strong οnclick=‘alert(“惊喜不断”)’>诱惑点击语句</strong>
http://example.com/list?memo=<img src=’./logo.jpg’ οnclick=‘location.href=“https://blog.csdn.net/qcl108”;’/>
以上例子只是大概描述了方式, 在实际攻击时代码不会如此简单
防御方法
防止 XSS安全漏洞主要依靠程序员较高的编程能力和安全意识
去掉任何对远程内容的引用 如 样式或 JavaScript等
Cookie内不要存重要信息为了避免 Cookie被盗, 最好 Cookie设置 HttpOnly属性防止 JavaScript脚本读取 Cookie信息
不要信任用户的输入, 必须对每一个参数值做好过滤或转译: (& 转译后 &), (< 转译后 <), (> 转译后 >), (" 转译后 "), (\ 转译后 '), (/ 转译后 /), (;)等
写在前面
过去几年中，我们的积极反应促使我们继续探索和分析主要设计领域的新趋势。尽管大多数趋势都是去年发生的变化，但到2020年，我们仍有一些新趋势值得追求。最重要的趋势是与技术有关的趋势，以及它们的发展趋势，以及它们如何影响设计领域。
总体趋势
2020年的主要趋势动作设计与动画， 对于2020年，我们认为运动设计是主要趋势，因为我们在所有设计领域都遇到动画，从小的交互到徽标和UI，一切都在变化。动画内容正在进入现代世界，在现代世界中，书面内容没有以前那么吸引人。 动作设计正确实施后，可使广告系列的信息更快，更正确地传达给受众。
01. theQoos品牌插图由 闵庆 02 军团赛季 3由 尼克Scarcella 03. 溶剂-使大麻银行公开赛由 BluBlu工作室 04 云服务（动画图标）由 亚历山大Baleev 05. 病毒性肝炎由 昂布尔集体 ， 蒂博ZELLER ， 乔纳森Plesel 06 。 UXC_Design2020_Project研究通过 Donerzozo
目录
1. UI / UX
2.插图
3.动态图形
4.平面设计
5.基于技术的趋势
6.包装
7.版式
8.趋势工具
1. UI / UX
1.1暗模式（Android Q和iOS 13）
暗模式是2020年的新趋势，Android引入了两种类型的暗模式，分别称为“强制暗模式”和“系统暗模式”。微软通过在其电子邮件应用程序中展示其暗模式击败了谷歌，但谷歌迅速推出了自己的针对Android 10的Gmail应用程序的暗版本模式。
有了介绍此更新的大公司，许多设计师将选择在他们的应用程序或站点中使用暗模式，因此希望在来年看到越来越多的暗模式。
1.2粗体颜色
在过去的两年（到2020年）中，强烈的色彩已成为重要的趋势。大胆的色彩丰富，明亮，甚至极富活力。它们可以是主要或次要颜色。
01. EMART UX / UI可再生的通过 加X， 李宝蓝 ， Sabum卞 ， 熙荣， 尤金全度妍 ， 원 지 혜， Bongho彩 02 NSH通过 索菲娅费多托娃 03. 埃尔多拉多赌场-移动Web UI，应用程序ü用 的Loredana PAPP-Dinea ， Mihai Baldean ， Milo主题 04. mmcité+网站由 工作室9 兹林，帕维尔Valek 05. 自动哈克系列＃21-25由 安德烈福 06. Flipd应用程序通过 ESTUDIO PUM
1.3 UI中的插图
多年来，插图一直是设计中最强劲的趋势之一。插图是对概念的直观解释，可以使用户更好地理解产品背后的思想。除了一些精美的插图使这一概念独具匠心外，它们还可以更快地传达信息。
01. 海妖重新设计，以 西尔Theyssens ， 安东尼科拉德 02 浮雕-医疗项目由 马丁Pankiewicz 葛尔若， 米沃什Pożarkowski 03. abuk：图书封面设计有声书商店到 谢尔盖Valiukh， Tubik工作室 04.我llustration系统GOL到 ESTUDIO PUM 05 。 智能家居的应用程序- IOS到 玛丽亚Osadcha 06.斯基林贸易（skilling.com） - Loredana酒店PAPP-Dinea ， 米哈伊Baldean
1.4讲故事
设计中的讲故事是关于帮助用户在平台上的旅程，从而使他的体验尽可能轻松和流畅（在UX设计中）。一个好的故事可以帮助用户更轻松地了解产品。为了讲述一个故事，我们可以使用一个特别创建的角色，将这个角色赋予他个性，我们创建一个故事和一个冲突，最终由我们的产品（UI设计）解决。这是产品设计中讲故事的基础。讲故事在UI和UX中都使用，并且基于相同的原理，但实现方式有所不同。
01. 余吴-旅行计划应用由 朱莉张庭 02. UX / UI | 食品外卖应用由 康斯坦丁Seredkin 03. COOC通过 cuneyt仙
1.5动画图形和微交互
正如我们所说，动态图形是今年的趋势，它在UI设计中也有很强的表现，它为插图增添了力量，使创意更易于吸收并保留在用户的记忆中。
微交互在2018年成为第一流，但这一趋势值得在2020年关注。它们是UI设计中极其重要的趋势，这使基本应用程序/网站与非凡的应用程序/网站有所不同。微交互在使用户了解系统的工作原理并引导其获得更好的体验方面起着至关重要的作用。
如果您是UI设计师，但尚未在工作中使用微交互，建议您这样做，因为到2020年，没有UI的任何UI设计都将是非常基本的。
01. UI / UX | 智能药房应用的 阿纳斯塔西娅中号， 谢尔盖Nikonenko UX 02. 气候与动物：灭绝危机网站UI / UX 由 丹尼尔·谭， 达芙妮龙 03 飞素食者由 帕特里夏赖纳斯 04. UKRPOSHTA。乌克兰国家邮政局的移动应用程序，伊洛娜·金（ Ilona Kim） 05 . Tagir Tikeev 的聋人报警应用程序
1.6用户界面中的视频
到2020年，信息必须非常快地到达用户手中，最好通过视频内容来完成。您选择通过动画或经典电影来解释产品，视频内容对于任何网站或应用程序都是必不可少的。
1.7功能
UI设计中的一个重要部分是功能，即，根据其目的和功能选择每个元素。许多人认为您必须在设计和功能之间进行选择，但是在新技术的帮助下，这两种技术可以很好地融合在一起并相互补充。设计负责引起对站点或应用程序的注意，其功能使体验变得更轻松。它使用户可以更快地找到信息。
01.斯基林贸易（skilling.com） - Loredana酒店帕普用餐 ， 迈克尔Baldean
1.8注意细节
在UI设计中，对细节的更多关注非常重要。从按钮，图标，加载到导航到细微的细节，都可以打造出非凡的设计。随着新技术的出现，我们在UI中必须注意的细节始终在变化。
在明年，我们将看到越来越少的按钮，以及更多基于手势的导航。例如，后退按钮（Android的导航常用）在Android 10中正式消失。
01. FLYR的视觉形象和营销网站的 Ramotion
02. 闹钟应用聋人通过 Tagir Tikeev
1.8渐变
几年来，我们一直在谈论设计中的渐变，这种趋势在2020年将继续保持强劲，因此值得一提。新鲜的色彩是成功渐变的完美选择。它们可以用于按钮，图标，插图，甚至用于排版。
01. Wavecut - IOS应用程序通过 Eleken局 02. 抗忧郁症的应用程序-产品设计（UX / UI）由 安娜Arutiunian
03. 保罗回肠-电影音乐作曲家，制作人，DJ，Perfomer 通过 的Loredana PAPP-Dinea ， 米哈伊Baldean ， 米洛主题 04. ITEXIA通过 下一页局 ， 亚历克斯海鸥 ， Jegor Walowski
2.插图
2.1角色设计
角色设计包括定义一个支持整个概念的角色。最重要的是，通过绘图，设计师向角色灌输了强烈的个性。您在应用程序或网站中遇到的虚拟助手是角色设计的一个很好的例子。
01. 新微小的事情•儿童图画书由 Vuon插图 ， 荣阮 ， 荣范 02 的Adobe X Createfulness由 迈特弗兰基， 马蒂厄Tarwane 03。 3D人物V2由 安东尼奥·佩蒂特Cwirko 04. Malayali由 丹尼·何塞
2.2纹理
插图和纹理很好地结合在一起，可以创造出令人难忘的构图。从粒状纹理到预制的笔触，您可以找到许多想法来为插图添加纹理，也可以手动创建它们。浏览网络时，您可以找到许多可以在插图中使用的纹理，预制笔刷和工具。
01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 饭 太稀
2.3平面插图
在过去的几年中，我们到处都可以看到平面插图。它们仍然处于趋势中，但现在有了一个新的组成部分：对每个元素应用细线。大多数艺术家都选择使用细的黑色笔触，但也可以将其上色，使其阴影比所涉及的对象暗。
01. BILLY KENNY -刚刚为音乐通过 桑戈BANG 02 Babelia - Lecturas对维拉诺由 米格尔·安赫尔Camprubí 03. 拳击猫-第一滴血由 Felms 04. COUSCOUS STUDIO | 解释器VIDEO 由 哈立德abdelazi ž
2.4等轴测图
是的，等轴测图仍然在这里。它们主要可以在UI设计中找到。随着人们对加密货币的兴趣不断增加，这种趋势似乎已经生效，但是在2019年它已经发展了，现在我们在其他业务领域中发现了这一趋势。
01. 庞克市由 温祚_ 02 FastCompany -等距号由 阿图尔Tenczynski 03和05. 抗体亚型由 马里奥·德•梅耶尔 04. 松弛插图由 京张
2.5 3D
随着效率越来越高的软件和工具的出现，3d渲染已逐渐发生变化。3D插图非常受欢迎，因为与2D插图不同，它提供了更逼真的图像。
01. 游戏巴伊亚之家由 Miagui 02 天平 由 卡韦萨Patata工作室 03. 城堡毁灭者由 穆罕默德Chahin 04. Eyoo家庭3D插图由 Baianat 05. 个人插图第1卷由 巴勃罗·马林 06. 一个人旅行通过 乱伊莱恩
2.6超大胆的色彩
大胆的颜色非常适合插图。它们营造出欢乐的氛围，使角色脱颖而出，并在图像背后展现故事。
01. 玛莎·希肖娃（Masha Shishova）摄于莫斯科的 STRTFD咖啡壁画 02. 作家- 利奥·夏目（ Leo Natsume）的移动互联网思想 03. 可口可乐圆罐插图由塔尼亚·雅库诺娃（ Tania Yakunova）
3.动态图形
3.1 3D视频
在2020年，无法想象没有3D设计的运动。设计的这个分支打开了一个世界的大门，在这个世界中，只有想象力是极限。我们可以在广告，电影，游戏，广告活动等中找到3d。
01. 庞克市由 温祚_ ， 视觉设计艺术的影响
3.2视频+动画插图（混合媒体）
拍摄的视频，动画插图以及有时是静止的照片的结合可以产生非凡的效果。2d或3d插图可创建令人难忘的视频，从几行运动到3D真实人物甚至是现实生活中不存在的复杂视觉效果。
01. Coppel /回到学校通过 大量工作室 02 PWR 由安娜·霍查， Edvina元
3.3 2D动画-说明性视频
2D动画专注于创建故事和角色，并在创作过程中使用矢量。当您想要广告系列或产品的说明性视频时，2D可能是理想的选择。在一个总是忙碌而又没有时间阅读的世界中，说明性视频对于任何网站都是必不可少的。
01. Freelive 由 工作室Infografika ， 谢尔盖·萨多斯基 ， 阿纳斯塔西娅Alterka ， Arsentiy Lesnik宾馆 ， 尤里·阿姆斯特朗 ， 阿林好， 乔治VALD ，马克西姆Tleubaev
3.4动画徽标
您已经了解到动画是2020年的“必备”，为了保持竞争力，我们还必须将它们集成到徽标设计中。许多公司已开始对其徽标进行动画处理，以引起人们的注意。这也是徽标设计的主要趋势。
01. 杯茶由 维多利亚伍 02 - 07. 运动野兽✕Logomachine。动画标志的 运动设计学院， 维克托Villamarin的， 波格丹·杜米特留， Logomachine .NET ， 亚历山大·库兹涅佐夫， 扎克李， 丹尼斯Siurin ， 斯坦尼斯拉夫·马尔琴科， 莉扎薇塔Tsareva ， Supremus Levenus ， 安东·福明， 埃米尔Khafizov ， 胆碱哈达
3.5混合动画2D和3D集成
这一趋势不是一个新趋势，但绝对值得一提。混合动画就是使用为此创建的特定软件将2D与3D结合在一起。
4.平面设计
4.1平面设计中的3D
尽管2d垄断了设计的这一分支，但3d可以为最终概念添加额外的内容。3d渲染可以采用插图，动画或字体的形式。
01. 画像由 费尔南多·多明格斯Cózar 02. NASA | 太空时代的 工作室-JQΔ 03. 美国宇航局X BBC | 不自然世界的 工作室，JQΔ
4.2双色
精益求精的概念可以完美描述这一趋势，设计师在其中创造出大胆的元素，并带有优雅的手感和强烈的对比。这种趋势是创建更易于访问的打印的理想选择，因为某些打印技术如果颜色更多，则价格会更高。
01. 冬季公开赛'18由 Kinoto Studio， Romina Rios， Luc Geoffroy 02 Synticate©由 斯捷潘索洛德科夫 03. TIGER在博物馆由 de_form工作室， 诺拉demeczky ， 的Eniko DERI 04. 刻字系列IX由 拉斐尔·塞拉
4.3光学感知艺术
欧普艺术作品是抽象的，有许多知名的黑白作品。通常，它们给观看者留下动感，隐藏的图像，闪烁和振动的图案或肿胀或翘曲的印象。（来源：wikipedia.org）。
这种趋势给人以动静的印象，但是以一种静态的方式。如果要实现在印刷海报中移动图形的想法，这是最合适的方法。
01 02 东京电影节共混物由 梅赛德斯巴桑 ， 的Adobe住 03. 海报-第一卷由 Xtian米勒
4.4平面设计中的插图
插图在设计的所有领域都非常重要，因此我们在图形设计中也可以找到它们。2D插图在现在已经非常流行了几年，并且即使在2020年，也将继续成为设计师的最爱。
01. GOOSE赫尔-海报由 Ewelina鹅 02 CAT酒吧和舞厅/ 2019至 kissmiklos， Eszter萨拉
4.5动画海报
动画无处不在，我们在设计的各个领域都可以找到它们，当然它们也存在于数字海报中。动画可以将2D与3D混合在一起，效果令人着迷。
01 节地铁地铁由 Bzoing， 维吉尼贝达德 02. 失败的Windows由 皮埃尔Kleinhouse， 辖Zivony
4.6复古合成波
复古合成波是一种在80年代出现的趋势，但一旦好莱坞开始发行该十年的电影后便开始重新出现。随着《陌生人事物》系列的成功，这一潮流再次开始流行。
01. 鸡尾酒和梦想通过 Gjorgji Despodov 02. CINEMAX由 杰森巴尔巴 03.奇怪的事情（Netflix.com）
4.7瑞士设计，达达主义，包豪斯
20世纪最重要的图形设计运动始终是最好的设计师的灵感来源。这些样式值得一提，因为它们始终是的，遵循它们所施加的规则几乎不可能在设计中犯错误。总的来说，这些运动强调版式，无衬线字体（Helvetica于1957年在包豪斯舞台上创建），几何形状，简单的线条，体积和颜色。
01. 瑞士海报01（版式方面）由 Mehman Mammedov 02. 黄视VOL.3通过 维奥莱纳齐名
4.8大的不间断彩色空间
大型，不间断的色彩空间将在明年成为非常流行的趋势。它们与大胆的字体搭配使用，可以在图形设计，产品设计以及ui中找到。
01. Synticate©由 斯捷潘索洛德科夫 02 Havaianas人字品牌内容由 约翰Vernizzi 03. Kekkilä-BVB的 Kurppa Hosk
4.9超极简主义
极简主义的设计仅使用必需品，非常有限的调色板和简单的形状来打造令人难忘的身份。放弃多余的元素，使所有设计项目都有目的。要创建超极简主义的设计，您需要使用尽可能多的白色/负空间，简单的配色方案和一些基本的几何形状。
01. Heim杂志，第3页， Sasha Yaguza撰写 02. Andrei Gheorghe- DADA-通过 moodley品牌标识发布
5.基于技术的趋势
技术通过智能设备和崭新的理念正在彻底改变我们的生活。这些新技术使设计师已经开发出进入当前趋势的新功能。人工智能，机器学习，虚拟现实和增强现实正在影响设计师的思维方式和创作方式。
5.1增强现实的移动应用
随着苹果和谷歌推出自己的AR开发平台ARKit和ARCore，很明显，整个世界将面向增强现实技术。
许多大品牌已经在其应用程序中采用了这项技术，而那些尚未采用这种技术的公司必须认真考虑如何使用户在这种新现实中与之交互。
有一些AR交互可用于创建直观的应用程序。第一个是将应用程序固定在手机屏幕上时。另一个是AR UI与用户周围的环境相关联时。最常用的互动方式之一
是当UI与对象相关并通过扫描特定项目触发时。该动作将数字动画连接到特殊的“标记”。
有关更具体的AI规则，请阅读Apple指南，以提供“将真实的虚拟对象与现实世界无缝融合的沉浸式，引人入胜的体验”。
5.2 AI，ML，聊天机器人和虚拟助手
聊天机器人是一种 通过听觉或文本方法 进行 对话的 软件。[1] 此类程序通常旨在令人信服地模拟人类作为对话伴侣的行为，尽管截至2019年，它们仍远远不能通过 图灵测试。[2] 资料来源：维基百科
人们还不习惯与AI对话，因此设计师（和开发人员）的工作很大一部分是使流程简单并建立信任。他们需要帮助人们了解系统可以做什么以及如何使用它。
使用AIML（人工智能标记语言）设计和编写脚本聊天机器人，是出色的UX设计人员的魔力可以发挥作用的地方。
大多数使用聊天机器人的公司都选择说明助手来为AI做鬼脸。以下是一些在其UI设计中使用聊天机器人的品牌：Spotify，星巴克，万事达卡，丝芙兰，Lyft，必胜客。
5.3 VR
大多数人将VR与游戏行业联系在一起是有充分理由的，但是随着所有大型科技公司开发VR套件和应用程序，我们可以肯定地说，我们将发现使用和享受这项技术的新方法。VR已经用于教育，医疗保健，旅游，房地产或建筑。
5.4语音用户界面（VUI）
语音用户界面（VUI）使用语音识别 来理解语音命令和问题，通常是文本到语音以播放答复，从而 使语音与计算机的人机交互成为可能 。语音命令设备（VCD）是受语音用户界面控制的设备。资料来源：维基百科
去年，使用互联网连接的设备的人中有40％每月至少使用一次语音助手，与去年相比，这一数字增加了10％。
6.产品设计
6.1包装中的图案
在过饱和的包装市场中，很难创造出可以脱颖而出的新产品，因此设计师要回到根源并创造出使产品在拥挤的零售货架上脱颖而出的样式。几何，花卉，浪漫或单色图案是任何产品包装的大胆选择。
01. 飞行山羊咖啡由 妮可LaFave 02. VITA SPA皮肤 由 DWYW 03. 巧克力包装设计由 算术 04. 100手绘无缝的图案和形状 的 Arseny Samolevsky
6.2包装插图
插图一直是包装设计中的重要元素。通过他们，我们可以讲述一个故事，使目标受众可以更好地理解该概念背后的历史。平面插图已经存在了数十年，并且很可能会一直处于流行趋势。
01. 布里格斯原件由 熙宰金 02 天鹅绒咖啡杯 由 安东Malishev， 呵呵卡罗拉 03. 废物不包括厨房-品牌打造的 尝试和真正的DESIG ň04 家，甜蜜的寿司儿童 通过 精明的机构， 马里亚纳星火 05. Cerveza塔Maleante通过 Antonay
6.3留白
极简主义是设计的基本原则，而今天它又是新事物。它放弃了设计中不需要的所有内容，并用负空间代替了它。这种趋势将功能带到了最前沿，并专注于简洁的设计，使版式脱颖而出。
01. 香味精油 由Y u型简林， 黄恶嗯-祥 ， 智泰莲 02. 重塑品牌理念，为BodriPincészet由 克里斯托夫Gáthi
6.4单色和两种颜色
首先，在调色板中仅使用1或2个色调似乎有些限制，但它们可以创建非常强烈的视觉识别感。仅使用一种或两种颜色，就可以保持简约的外观，放弃所有多余的东西。结果是精美，高雅的产品令人赏心悦目。
01. Zerbet冰糕由 才林贾尔斯 02. 贝利啤酒 由 埃德大厅 悉尼， 叶卡捷琳娜Leontyeva ， 波阿斯孙
6.5大胆的颜色
大胆的颜色和渐变仍然是非常强烈的趋势，这种趋势将在2020年持续。使用这些颜色，您可以创建令人难忘的产品。
01. 极简主义和享乐主义：Fabula Branding 重新设计了 千年品牌
02 纹身商城 通过 Openmint工作室， 叶卡捷琳娜Teterkino ， 烟， 叶戈尔Kumachov
03. Organic by Larissa Kendrik 和 加布里埃尔· 沙茨曼
04. VIZOU -老花眼镜 的 工作室开头语， 阿克塞尔杜马克
05. 包装的调味开心果由 米拉Katagarova
6.6注意细节（受新艺术风格启发）
注重细节的包装比以往任何时候都更受欢迎。设计师选择这种趋势是因为它赋予了产品真实性。这种趋势使我们以现代方式思考经典。
01. HYWILDE由 查德·迈克尔·工作室 02 AMSTEL KARGO IPA通过 卡帕罗设计船员
03. 大岛咖啡烘焙-咖啡咬伤的 农场设计
6.7包装中的讲故事
到2020年，品牌将不得不重新考虑其产品和包装。品牌必须讲述一个故事，以帮助客户体验产品的本质。这可以通过为包装创建视觉和叙述身份来实现。
01. 喙接通过 骨干品牌推广 02. Colorea用t 骨干品牌
7.版式
7.1粗体印刷
粗体印刷术是设计中的重要趋势，它取代了图像作为主要元素。勇敢的排版可以在网页设计和图形设计中发挥作用。
01. 埃里克·林格（Eirik Lyng），作者： 埃里克· 赫斯特雷（ErikHerrström）； 02. 包豪斯（Bauhaus_100）（x3），作者： BunkerType（JesúsMorentin）
03. UCCA当代艺术中心北京由 布鲁斯·莫设计（BMD） ，耶勒马雷夏尔
7.2小写
越来越多的应用程序使用完全小写的文本，非常易于阅读，并且完美地融入了简约和现代的设计中。在明年，我们绝对必须关注这一趋势。
01. Autea品牌和网页设计由 米哈尔Markiewicz 02 山大食品公司 CI由 臣藤田/ tegusu公司 03. Aquality品牌的 哈坎Fidan的
7.3自定义字体
尽管自定义字体没有什么新意，但我们将看到这种趋势越来越多地出现在设计中，尤其是在徽标和海报中。这种做法在大品牌中更常见，因为生产专用字体可能会非常昂贵，但是设计人员可以对现有字体进行少量调整，结果可能会非常独特。
01. Think8全球研究院通过 勃洛克设计 02 ZINEZŐ//设计周期由 芭芭拉·卡托纳 ， 媒体与设计系埃格尔 03. 式设计'19通过 TRÜF创意 04. Cako字体由 维奥莱纳齐名
7.4动力学排版
就像我们说的那样，动画在设计中无处不在，因此在排版中也很常见。动态字体使用小的和简单的交互作用来移动和移动屏幕上的字体。这种简单的技术可以处理文本并创建最终产品，该产品保留在查看器的内存中。
01和02. Grafika ， Gimmick Studio设计 。03＆04. 增强现实与动作排版，作者： Alex Slobzheninov
7.5堆叠字体
堆叠文本可能是一种现代化的解决方案，可以吸引您注意基本信息。我们可以在网页设计，应用程序设计和图形设计中看到这种趋势。
01. L'嗡通过 Atipus巴塞罗那 02 期刊由 杰玛马奥尼 03. 海报收藏| VOL.8由 罗马发表 04. SMLXL由 梅丽莎Baillache， 垫新郎， 杰森·利特尔
8.趋势工具
8.1 Adobe Spark
Adobe Spark是Adobe Systems 开发的 用于移动和Web的媒体创建应用程序的集成套件 。[1] 它包含三个独立的设计应用程序： Spark Page， Spark Post和 Spark Video。（来源：WIkipedia）
他的免费Adobe Spark Web应用程序可与Spark Page，Spark Post和Spark Video iOS移动应用程序同步 ，从而使用户可以从任何设备创建，编辑和共享其视觉故事。
[3] 这三个设计应用程序允许用户创建和设计可用于企业，教育，社交媒体营销人员等的视觉内容。[4] Spark Gallery突出显示了使用该应用程序的人们所做的不同项目。使用这三个应用程序时，用户可以导入图片或搜索图片。
8.2繁殖
Procreate是 由Savage Interactive针对iOS开发和发布的 用于 数字绘画的 光栅图形编辑器 应用程序。针对iPad的艺术可能性而设计 ，并且适合从初学者到专业人士的艺术家。
它提供130多种逼真的画笔，多层， 混合模式， 蒙版， 过程视频的4K分辨率导出 ， 自动保存以及许多其他经典和原始的 数字艺术 工具。除光栅图形外，该软件的编辑和渲染文本和矢量图形能力有限 。（来源：Wikipedia）Procreate是2018年App Store上最畅销的应用程序。
8.3 Adobe XD
Adobe XD是 由Adobe Inc开发和发布的 用于 Web应用程序 和 移动应用程序的基于矢量的 用户体验设计工具。它适用于 macOS 和 Windows，尽管有适用于iOS 和 Android的版本 可帮助直接在移动设备上预览工作结果。XD支持 网站线框图，并创建简单的交互式点击型原型。（来源：维基百科）
作者授权
总结
每一年每一个时间段都会有新的趋势，学会的辩证的眼光去看待便是最大的智慧。世界一直都在变，趋势也是。保持学习和探索的心不变就是对自己热爱的事情最好的回应，念念不忘，必有回响。共勉！
转自：站酷-木七木七
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链中遍历该方法，当找到该方法后，又会生产方法调用必须的堆栈信息，方法调用结束后，还要释放该堆栈。
————————————————
蓝蓝设计的小编 http://www.lanlanwork.com
