普通数字转会计金额格式（保留两位小数）
我们可以用数字的toLocaleString()方法将普通数字转为会计金额格式，但是这种方式无法保留两位小数(四舍五入)，如果是整数或者小数长度只有一位的时候无法自动补0
例如：
思路：
利用toLocaleString()以及toFixed()先对数字进行一个转换得到最多保留了2位小数的金额，然后判断数字是为整数还是带有小数，如果带有小数则进行切割，判断小数长度为1时自动补0
// 普通数字转会计金额格式 第一种
function toThousandsFormates(num) {
// 判断传进来的数字是否为非空数字
if (!isNaN(parseFloat(num))) {
var reg = /./g
var newNum = Number(Number(num).toFixed(2)).toLocaleString()
// 判断转换后的数字是否带有小数
if (reg.test(newNum)) {
var numArr = newNum.split('.')
// 判断小数点后数字长度为1，则自动补0
numArr[1] = numArr[1].length === 1 ? numArr[1] + '0' : numArr[1]
return numArr.join('.')
} else {
// 整数直接在后面补上0.00
return newNum + '.00'
}
} else {
return ''
}
}
console.log(toThousandsFormates('0')); // 0.00
console.log(toThousandsFormates('')); // ''
console.log(toThousandsFormates(966)); // 966.00
console.log(toThousandsFormates(966.3)); // 966.30
console.log(toThousandsFormates(9669228.55)); // 9,669,228.55
console.log(toThousandsFormates(96566.56954)); // 96,566.57
经过查阅资料后，发现toLocaleString()它里面自带属性可以检查到最少保留了几位小数，不够自动补0，这样我们上面的代码其实可以更加简单，如下:
// 普通数字转会计金额格式 第二种
function toThousandsFormates2(num) {
// 判断传进来的数字是否为非空数字
if (!isNaN(parseFloat(num))) {
var newNum = Number(Number(num).toFixed(2)).toLocaleString('zh', { minimumFractionDigits: 2 })
return newNum
} else {
return ''
}
}
console.log(toThousandsFormates2('0')); // 0.00
console.log(toThousandsFormates2('')); // ''
console.log(toThousandsFormates2(966)); // 966.00
console.log(toThousandsFormates2(966.3)); // 966.30
console.log(toThousandsFormates2(9669228.55)); // 9,669,228.55
console.log(toThousandsFormates2(96566.56954)); // 96,566.57
// 结果一模一样
会计金额格式转普通数字（利用正则）
// 会计金额格式转为普通数字
function rMoney(num) {
return parseFloat(num.replace(/[^\d\.-]/g, ''))
}
console.log(rMoney('96,566.57')); // 96566.57
console.log(rMoney('966.30')); // 966.3
console.log(rMoney('9,669,228.55')); // 9669228.55
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
交互手势是用户操作的重要部分，交互手势的设计好坏非常影响用户体验，那么，交互手势的设计上对于容错性和逻辑性需要注意什么？
随着用户体验被愈发的重视，更多的 APP 偏向于使用多手势优化用户的操作流程，降低使用阻力。
点击某个确定的按钮的手势操作虽然被普遍使用并被用户熟知，但是增加更快捷的手势操作可以大大增大操作热区，提高操作效率，如下图。
然而，我们可以发现由于不同产品的设计师对于用户体验的理解不同、交互层面的思考不同，导致设计的交互手势也不同。
有时同一种操作在不同的 APP 中交互手势也是不统一的，这无疑增加了用户的学习成本和记忆成本。
举个例子，iOS 端的得到和有书的播放页的打开和关闭方式。
得到有两种方式打开和关闭页面，用户可以通过点击控件或上滑控件打开播放页，通过点击收起按钮或下拉页面关闭播放页。但是有书只有一种方式打开和关闭，用户只能通过点击控件打开播放页，通过点击返回图标关闭播放页。
这让习惯了使用得到的我去使用有书时，感觉非常别扭，每次都尝试用得到的手势去操作但是都失败了，失败后我下一次并没有记住仍然用手势去操作，如此反复令我相当沮丧。
容错性是一个很大的话题，今天我们仅仅在交互手势层面上讨论。
上面的例子中，有书并没有设计滑动手势去打开和关闭播放页，那么我以我的经验去进行的滑动滑操作在有书这个产品中就是错误的和不被产品识别的。但是这种手势又广泛存在于大量的音频播放 APP 中，如喜马拉雅、荔枝 FM 等。
一旦用户从这些 APP 迁移到了有书，本来养成的操作习惯在有书就失效了，用户就会感觉“这个 APP 很难用，用起来很不舒服”，进而可能放弃有书转而投向其他产品怀抱。
与手势设计类似，这也是为什么现在的同种类型的 APP 的信息架构设计越来越同质化，当我们打开淘宝、天猫、京东时我们有时感觉就像是同一个 APP ，本质上也是为了降低用户的迁移、记忆和学习成本。
如下图所示，提高手势的容错性对用户的意义。
很多优秀的产品考虑到了上述问题，设计了多手势来优化用户体验。
举个例子，在 APP Store 的首页点击一个推荐卡片后进入详情页，由于详情页是直接由卡片放大转场的，不同于传统的新页面右侧进入和从底部弹出。
在用户的使用习惯和认知中新页面如果从右侧进入就可以通过右滑返回，从底部弹出的话就可以下拉返回。因此，当用户面对卡片放大进入新页面这种全新交互时可能会疑惑如何返回，对此理解不同的用户可能会尝试右滑，也可能尝试下拉。
APP Store 的设计在此就有很好的容错性，用户可以通过三种方式返回首页，分别是、右滑返回、下拉返回和点击叉号返回，这不但降低了用户的记忆和学习成本，也便于不同习惯的用户使用。
针对不同的场景，手势的使用也会有不同。
一个很好的案例是知乎的评论：知乎的评论的关闭方式有三种，分别是下拉、右滑和点击叉号。
用户观看评论的场景有两种，第一种是只想看一下精选评论然后关闭，第二种是被评论吸引后一直往下看。当用户单手操作不方便点击叉号时，下拉对应的是第一种用户；右滑对应的是第二种用户，不管用户看了多少屏的评论，随时可以通过右滑关闭评论（因为用户翻阅了很多屏评论后需要下拉到第一条评论时，下拉关闭评论手势才会生效，所以第二种用户一般不使用下拉去关闭评论）。
可能你会心生疑惑：“第一种用户也可以使用右滑来关闭评论呀”，确实可以，但是对于人的操作习惯来说，上下滑动会比左右滑动更方便。
还值得讨论的是苹果自 iPhone 6s 开始加入的新交互方式 3D Touch，它允许用户通过更大力度的重按呼出情景菜单快捷地使用高频功能而不用先打开 APP，对于追求效率的用户来说简直不要更方便，但是对于不支持 3D Touch 的机型则无法使用情景菜单。
因此，在生活中我发现这样的现象，很多使用惯了3D Touch 的用户换到无 3D Touch 的苹果机型后很不习惯，总是尝试去重按但是是无效的。
其实在很多安卓手机上也有情景菜单这一功能，它巧妙地将卸载也加到了情景菜单中，因此用户只需要通过长按就可以获得所有需要的功能，而不是像苹果那样长按是卸载而重按是情景菜单。
我猜测苹果为了适配所有机型，提高容错性，从今年的发布会的 iPhone 11 和iPhone 11 pro 开始，取消了 3D Touch，转而使用 Haptic Touch （有震动反馈的长按）代替。当你长按某个图标时，感受到震动后松开，即可呼出二级菜单；如果震动后仍不松开，则进入到卸载 APP 时的抖动状态，使得之后的即使不支持 3D Touch的机型可以使用便捷的情景菜单了。
对于不支持 3D Touch 的老款机型会不会在 iOS 13 更新后也可以使用 Haptic Touch 呢？
如果一致统一的话，容错性将大大提高，我们将拭目以待。
不仅仅是 iOS ，Android 的版本 Android 10经历了 6 个测试版迭代后正式发布，我们发现交互手势是 Android 10 的一个巨大亮点。Android 10 在第三版内测系统开始引入全局手势操作，用户启用后，屏幕底部便不会再出现虚拟按键和导航栏，只会剩下一个指示条，上滑返回主屏、侧滑返回上一层的操作逻辑也均和 iOS 保持一致。
这可能标志着安卓手机一直以来在国内各家厂商的各种创新手势的割裂生态中即将重归统一，并和 iOS 保持一致。
这种妥协将大大提高在用户使用一款新安卓手机时的容错性，同时降低了今后用户在两大系统之间的迁移成本。
再谈谈逻辑性，在交互手势的层面上，如果用户能够通过某个手势进行某个操作后，按照逻辑，用户也可以通过反向的手势或对应的手势进行逆向操作。
比如，在微信首页下拉调出小程序页面，之后可以通过上拉返回首页。点击加号呼出更多操作，再次点击加号收起更多操作。
如果违背了用户的心理模型和逻辑性，用户就会感觉到混乱和不适。
这里举一个反例， Uki 的个人主页可以通过点击或下拉底部的固定底板收起更多信息，但是收起后只能通过点击展开更多个人信息而不能上拉，不符合逻辑与用户的心理模型。
如下图所示，逻辑性对用户的意义。
有的时候，我们会发现为了提高容错性，我们会牺牲一部分逻辑性。
就像上文提到的知乎关闭评论弹出框，逻辑上它是从底部弹出的，但是不但能够下拉关闭还可以右滑关闭。尽管右滑关闭有些违背用户的心理模型，但是确实给用户带来了很多操作上的便捷。
我们需要考虑的因素包括使用频率、危险程度和特殊体验。
1）考虑不同平台的硬件系统和操作系统特性
由于硬件与操作系统差异，iOS 系统支持很多手势，但是安卓系统在手势支持方面就不如 iOS 丰富。
安卓硬件设备的差异比较大，不同安卓手机厂商会在安卓系统的基础上自定义系统的手势操作，因此对于手势的支持也有较大的差异。对于这种情况我们需要熟悉相应平台的规范，做到心中有数。
2）考虑所选的手势的学习成本和记忆成本，用户是否已经被教育
如下图所示，尽管设备支持的手势数量多不胜数，但是日常使用 APP 时，大部分用户习惯使用的手势很少，比如单击、双击、滑动、上拉、下拉、双指扩张和收缩等。除此之外的手势教育成本和学习成本很高。
一般比较通用的功能是没有必要在此处创新的，但是如果一些特殊的操作确实需要加入时，我们就需要考虑下面的问题。
a. 如果没有教育成熟，考虑加入教学或搭配简易的操作方式
对于我们需要加入的手势操作当前用户并未被教育成熟时，我们需要考虑加入手势教学，具体的手势教学类型下一部分会详细讨论。
然而，大部分情况下用户的记忆是短期的，教学内容可能会被快速遗忘，下次用户使用 APP 时仍然不会使用特殊手势。此时我们应该将一些比较难以记忆的手势操作搭配一个简单的手势操作。
比如 QQ 阅读的下拉拟物绳灯切换夜间模式的手势操作设计，其考虑到了有些用户在现实生活中并未见过拟物绳灯，并不知道是要进行下拉才能触发操作。因此，QQ 阅读贴心地搭配了一个简单的点击操作，用户通过点击绳灯也可以切换夜间模式，如下图。
b. 考虑所选手势是否可能导致冲突和误操作，如果导致了，考虑如何避免和折中
最常见的手势冲突情况就是 APP 的手势与操作系统的全局手势冲突。
解决方案有两个，一是避免设计与全局手势一致的手势操作，例如 iOS 的在屏幕边缘右滑返回、全面屏机型的底部上滑退出应用等全局手势操作；二是仍然设计与全局手势冲突的操作，但是将全局手势部分禁用或以其他的方式区分开。
如下图有书播放页的案例，由于进度条滑动控件过于靠左，导致使用 iOS 全局右滑返回手势时有时会产生误操作，即本来想要右滑返回却不小心滑动了进度条。
这种情况下我们可以标注一个右滑手势禁用区域给开发工程师说明情况，将此情况避免掉即可。
误操作指的是，我们设计的手势操作与 APP 内的其他操作或系统全局手势操作接近导致用户触发了非预期的操作。比如 iOS 端的知乎被吐槽的一个右滑返回手势操作，经过研究发现，由于 iOS 端的知乎在浏览回答的页面设计的右滑返回的热区过大，导致用户上滑浏览的时候如果手指的滑动角度变化幅度过大一不小心就触发了右滑返回，再次进入回答后又需要翻页很久才能找到之前离开的地方，很影响体验。
我觉得知乎可以减少热区，将热区调整为 iOS 全局的右滑返回区域即可，如下图所示。
当然，产品设计需要平衡与取舍，如果减少了热区是否会影响其他用户的体验还需要考虑和调研，两者并无绝对的对错
当新手势无法直接让用户感知时，我们需要加入一些手势教学帮助用户快速上手使用。
1）手势教学方式
a. 浮层和动画引导使用静态或动态的手势图片或气泡示例告诉用户使用哪种手势进行操作
相比于静态，动态比静态更为直观和易学。
b. 内容隐喻通过微妙的视觉线索暗示用户此处可以通过某种手势进行操作
由于教学内容难免具有干扰性，对于高级用户来说是不必要的，但是对于初级用户又是必要的，因此以这种内容暗示的方式使教学极为轻量化，在低干扰的情况下使得用户学习了手势操作。
如下图，哔哩哔哩在打开第一篇文章时会平移显示下一篇文章的框架，暗示用户可以通过左右滑动切换文章。
再比如陌陌在打开点点功能时，会在用户进入页面的时候播放一个动画，暗示有很多卡片叠加在了一起，用户可以通过滑动切换卡片。
2）教学的出现时机
a. 操作前当产品中设计了不容易感知的新手势，在用户操作前，通过教学让用户了解和学习新的手势。
b. 错误操作后对于一些与用户的心理模型和习惯不一致的手势，提前预测用户可能输入的错误手势，在用户错误操作后进行提示，规范用户的操作方式。
如下图，由于知乎旧版本是通过左右滑动切换回答的，新版本调整为上下滑动后，需要纠正用户使用习惯。因此，当用户仍然使用左右滑动时，会出现浮层提示用户正确的手势进行教学。
以上是日常思考和总结，有不恰当之处欢迎指出。希望本文在大家进行手势设计的过程中能够帮助做出合理的决策。
文章来源：人人都是产品经理
文章目录
rewrite在if中的用法
rewrite中break和last的用法
1.break和last在location{}外部时
2.break和last在location{}内部时
3.break和last用法总结
return的用法
rewrite的语法规则
rewrite应用实例
1.域名跳转（域名重定向）
2.http跳转https
3.跳转二级目录
4.动静态请求分离
5.防盗链配置
6.伪静态（将静态页面重写为动态）
7.多个if并用
rewrite在if中的用法
格式：if (条件判断) { 具体的rewrite规则 }
if条件判断语句由Nginx内置变量、逻辑判断符号和目标字符串三部分组成。
其中，内置变量是Nginx固定的非自定义的变量，如，$request_method, $request_uri等。
逻辑判断符号，有=, !=, ~, ~, !~, !~
!表示相反的意思，~为匹配符号，它右侧为正则表达式，区分大小写，而~为不区分大小写匹配。
目标字符串可以是正则表达式，通常不用加引号，但表达式中有特殊符号时，比如空格、花括号、分号等，需要用单引号引起来。
1
2
3
4
5
示例1：当http请求方法为post时，返回403状态码
if ($request_method = POST)
{
return 403;
}
1
2
3
4
示例2：通过浏览器标识匹配关键字，禁止IE浏览器访问
if ($http_user_agent ~ MSIE)
{
return 403;
}
1
2
3
4
限制多个浏览器：
if ($http_user_agent ~ "MSIE|firefox|Chrome")
{
return 403;
}
1
2
3
4
示例3：当请求的文件不存在时，进行重定向或return状态码等处理操作
if(!-f $request_filename)
{
rewrite 语句;
}
1
2
3
4
示例4：判断uri中某个参数的内容
if($request_uri ~ 'gid=\d{6,8}/')
{
rewrite 语句;
}
1
2
3
4
rewrite中break和last的用法
两个指令用法相同，但含义不同，需要放到rewrite规则的末尾，用来控制重写后的链接是否继续被nginx配置执行(主要是rewrite、return指令)。
1.break和last在location{}外部时
测试示例：
server{
listen 80;
server_name test.com;
root /data/wwwroot/test.com;
rewrite /1.html /2.html;
rewrite /2.html /3.html;
}
1
2
3
4
5
6
7
8
示例1：在rewrite 指令后面添加break
server{
listen 80;
server_name test.com;
root /data/wwwroot/test.com;
rewrite /1.html /2.html break;
rewrite /2.html /3.html;
}
1
2
3
4
5
6
7
8
示例2：当break后面还有location{}的情况
server{
listen 80;
server_name test.com;
root /data/wwwroot/test.com;
rewrite /1.html /2.html break;
rewrite /2.html /3.html;
location /2.html {
return 403;
}
}
1
2
3
4
5
6
7
8
9
10
11
2.break和last在location{}内部时
测试示例：
server{
listen 80;
server_name test.com;
root /data/wwwroot/test.com;
location / {
rewrite /1.html /2.html;
rewrite /2.html /3.html;
}
location /2.html
{
rewrite /2.html /a.html;
}
location /3.html
{
rewrite /3.html /b.html;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
示例1：在rewrite后面添加break
server{
listen 80;
server_name test.com;
root /data/wwwroot/test.com;
location / {
rewrite /1.html /2.html break;
rewrite /2.html /3.html;
}
location /2.html
{
rewrite /2.html /a.html;
}
location /3.html
{
rewrite /3.html /b.html;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
示例2：在rewrite后面添加last
server{
listen 80;
server_name test.com;
root /data/wwwroot/test.com;
location / {
rewrite /1.html /2.html last;
rewrite /2.html /3.html;
}
location /2.html
{
rewrite /2.html /a.html;
}
location /3.html
{
rewrite /3.html /b.html;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
3.break和last用法总结
1.当rewrite规则在location{}外，break和last作用一样，遇到break或last后，其后续的rewrite/return语句不再执行。但后续有location{}的话，还会近一步执行location{}里面的语句,前提是请求能匹配该location
2.当rewrite规则在location{}里，遇到break后，本location{}与其他location{}的所有rewrite/return规则都不再执行
3.当rewrite规则在location{}里，遇到last后，本location{}里后续rewrite/return规则不执行，但重写后的url再次从头匹配所有location
return的用法
该指令一般用于对请求的客户端直接返回响应状态码。在该作用域内return后面的所有nginx配置都是无效的，可以使用在server、location以及if配置中，除了支持跟状态码，还可以跟字符串或者url链接。
示例1：直接返回状态码
server{
listen 80;
server_name www.test.com;
return 403;
rewrite www.test.net;
}
1
2
3
4
5
6
示例2：当return在if 判断中时
server {
.....
if ($request_uri ~ ".password|.bak")
{
return 404;
rewrite /(.*) /index.html;
}
.....
}
1
2
3
4
5
6
7
8
9
10
示例3：返回字符串
server{
listen 80;
server_name www.test.com;
return 200 "hello";
}
1
2
3
4
5
示例4：返回nginx变量
location /1.html {
return 200 "$host $request_uri";
}
1
2
3
示例5：返回url
server{
listen 80;
server_name www.test.com;
return http://www.test.com/index2.html;
}
1
2
3
4
5
示例6：返回html代码
if ($http_referer ~ 'baidu.com')
{
return 200 "<html><script>window.location.href='//$host$request_uri';</script></html>";
}
1
2
3
4
rewrite的语法规则
格式：rewrite regex replacement [flag]
rewrite 配置可以在server、location以及if配置段内生效
regex 是用于匹配URI的正则表达式，其不会匹配到$host（域名）
replacement 是目标跳转的URI，可以以http://或者https://开头，也可以省略掉$host，直接写$request_uri部分
flag 用来设置rewrite对URI的处理行为，其中有break、last、rediect、permanent，其中break和last在前面已经介绍过，rediect和permanent的区别在于，前者为临时重定向(302)，而后者是永久重定向(301)，对于用户通过浏览器访问，这两者的效果是一致的。
但是，对于搜索引擎爬虫来说就有区别了，使用301更有利于SEO。所以，建议replacemnet是以http://或者https://开头的，flag使用permanent。
示例1：域名跳转
location / {
rewrite /(.*) http://www.test.com/$1 permanent;
}
1
2
3
示例2：域名跳转的第二种写法
location / {
rewrite /. http://www.test.com$request_uri permanent;
}
1
2
3
示例3：文件跳转
server{
listen 80;
server_name www.test.com;
root /data/wwwroot/test.com;
index index.html;
if ($request_uri !~ '^/web/')
{
rewrite /(.) /web/$1 redirect;
}
}
1
2
3
4
5
6
7
8
9
10
错误写法1：
server{
listen 80;
server_name www.test.com;
root /data/wwwroot/test.com;
index index.html;
rewrite /(.*) /web/$1 redirect;
}
1
2
3
4
5
6
7
错误写法2：
server{
listen 80;
server_name www.test.com;
root /data/wwwroot/test.com;
index index.html;
rewrite /(.*) /web/$1 break;
}
1
2
3
4
5
6
7
rewrite应用实例
1.域名跳转（域名重定向）
单个域名的情况：
server{
listen 80;
server_name www.test.com;
rewrite /(.) http://www.test.net/$1 permanent;
}
1
2
3
4
5
多个域名的情况：
server{
listen 80;
server_name www.test.com www.test.net;
if ($host != 'www.test.net')
{
rewrite /(.) http://www.test.net/$1 permanent;
}
}
1
2
3
4
5
6
7
8
2.http跳转https
server{
listen 80;
server_name www.test.com;
rewrite /(.) https://www.test.com/$1 permanent;
}
1
2
3
4
5
3.跳转二级目录
server{
listen 80;
server_name bbs.test.com;
rewrite /(.) http://www.test.com/bbs/$1 last;
}
1
2
3
4
5
4.动静态请求分离
server{
listen 80;
server_name www.test.com;
location ~ ..(jpg|jpeg|gif|css|png|js)$
{
rewrite /(.*) http://img.test.com/$1 permanent;
}
}
1
2
3
4
5
6
7
8
第二种写法：
server{
listen 80;
server_name www.test.com;
if ( $uri ~ 'jpg|jpeg|gif|css|png|js$')
{
rewrite /(.) http://img.test.com/$1 permanent;
}
}
1
2
3
4
5
6
7
8
5.防盗链配置
server{
listen 80;
server_name www.test.com;
location ~ ^.+.(jpg|jpeg|gif|css|png|js|rar|zip|flv)$
{
valid_referers none blocked server_names .test.com
if ($invalid_referer)
{
return 403;
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
http_referer表示从哪儿点击进网站的，比如从百度搜索引擎访问的
valid_referers：白名单
invalid_referer：无效的（未在白名单中定义的）
none：允许referer为空（也就是允许直接访问，未从其他站点跳转的请求）
blocked：允许来源地址不含http/https
6.伪静态（将静态页面重写为动态）
location / {
rewrite ^([^.])/topic-(.+).html$ $1/portal.php?mod=topic&topic=$2 last;
rewrite ^([^.])/forum-(\w+)-([0-9]+).html$ $1/forum.php?mod=forumdisplay&fid=$2&page=$3 last;
rewrite ^([^.])/thread-([0-9]+)-([0-9]+)-([0-9]+).html$ $1/forum.php?mod=viewthread&tid=$2&extra=page%3D$4&page=$3 last;
rewrite ^([^.])/group-([0-9]+)-([0-9]+).html$ $1/forum.php?mod=group&fid=$2&page=$3 last;
rewrite ^([^.])/space-(username|uid)-(.+).html$ $1/home.php?mod=space&$2=$3 last;
rewrite ^([^.])/(fid|tid)-([0-9]+).html$ $1/index.php?action=$2&value=$3 last;
}
1
2
3
4
5
6
7
8
7.多个if并用
location /{
set $a 0;
if ($document_uri !~ '^/abc')
{
set $a "${a}1"; #uri不以/abc开头时，$a的值变为01
}
if ($http_user_agent ~ 'ie6|firefox')
{
set $a "${a}2"; #浏览器标识包含ie6或者Firefox时，$a的值变为012
}
if ($a = "012") #当满足前两个if判断时，重写url
{
rewrite /(.) /abc/$1 redirect;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
本期嘉宾
（按发言顺序）
商业行为的本质就是榨取剩余价值。
文章来源：UI中国
使用docbox定制API文档
什么是docbox
docbox的安装
克隆项目
部署方式
docbox的编写
定制logo及UI
更换代码背景色
插入自己的logo
三列改为双列
其他定制UI
在公司实习了一个月，由于业务需要，我花了大概一周时间对docbox的安装，编写，定制化等进行了详细的研究，下面给大家分享一下我的总结
什么是docbox
Docbox是一个开源的REST API文档系统。它采用结构化的Markdown文件，并生成带有导航，固定链接的两列布局。下面是官方example图片：
docbox的安装
克隆项目
直接去官网https://github.com/tmcw/docbox，然后克隆即可。
部署方式
在使用npm命令前需要下载Node.js，npm会根据package.json配置文件中的依赖配置下载安装
接着，在/content下放入.md文件，并使用 npm run build 命令，生成一个包含所需要的js代码的bundle.js文件，同时创建一个新的index.html文件
重要的就是index.html、bundle.js、/css这三个文件和文件夹
docbox的编写
在/content下放入.md文件（markdown语法俺就不说了哈……）
对/src/custom/content.js中添加需要引入的.md文件位置和以及标题
注意： /src/custom/content.js中放入的是一级标题、二级和三级标题需要在.md文件中编写。
定制logo及UI
修改/src/custom/index.js文件
修改对应标签的属性即可，定制时修改生成的index.html是没有用的，因为index.html里的标签是被动态写死的。
更换代码背景色
<div class='round-left pad0y pad1x fill-green code small endpoint-method'>
1
<div class='endpoint dark fill-blue round '>
1
插入自己的logo
修改/src/components/app.js文件
三列改为双列
docbox默认情况下是显示三列布局，但我们可以在app.js下进行修改使之默认为双列布局。将下图的1改为2即可切换双列模式
其他定制UI
像下图一样，我们可以修改并填写代码得到自己想要的页面样式，比如说我在最上方加了一个固定位置的区域，然后可以在这个区域添加相应的超链接等。
app.js里可以找到图中对应的标签和js代码，docbox支持多种语言切换，我们在需要的地方加入我们想要加入的标签，并在/css文件夹中对相应的css文件添加样式就可以定制我们想要的UI啦！！！
下面给大家列出一些用docbox定制API文档的网站
Mapbox API文档
Mapillary的API文档和Tiles文档
HYCON 8th
Wall
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
写在前面
过去几年中，我们的积极反应促使我们继续探索和分析主要设计领域的新趋势。尽管大多数趋势都是去年发生的变化，但到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支持 网站线框图，并创建简单的交互式点击型原型。（来源：维基百科）
作者授权
总结
每一年每一个时间段都会有新的趋势，学会的辩证的眼光去看待便是最大的智慧。世界一直都在变，趋势也是。保持学习和探索的心不变就是对自己热爱的事情最好的回应，念念不忘，必有回响。共勉！
文章来源：站酷-木七翻译整理
说明：本文基于thymeleaf3.x
在做后台系统时多多少少都会遇到下拉选回显的问题，本次就总结一下如何利用thymeleaf简单快速的进行下拉选的回显。
两种情况：
1、下拉选的数据固定死了的情况下？
利用 th:field="${要选中的option的value值}" 属性，如下
<select id="bookKind" name="bookKind" th:field="${book.bookKind}" class="form-control">
<option value="">请选择书的种类</option>
<option value="1">编程语言</option>
<option value="2">数据库</option>
<option value="3">操作系统</option>
<option value="4">办公软件</option>
<option value="5">图形处理与多媒体</option>
</select>
book是请求域中的实体类，当${book.bookKind}的值和 option 的 value值匹配上后，该option就会被选中。
怎么样是不是很简单？如果是用ajax的话，还要先获取所有的option，循环遍历，判断value值是否相等，设置selected属性值为true，跳出循环，这一系列操作，thymeleaf一个属性值就搞定，所以孰轻孰重您就看着来吧！哈哈！
2、下拉选的数据没固定死时？
两个属性 th:each="bookKind : ${bookKinds}" th:selected="{bookKind} == ${book.bookKind}" 搞定，如下所示
<select id="bookKind" name="bookKind" class="form-control">
<option th:each="bookKind : ${bookKinds}" th:selected="{bookKind} == ${book.bookKind}"
th:value="${bookKind}" th:text="${bookKind}"></option>
</select>
解释一下，先th:each遍历，*{bookKind}代表遍历出来的元素，判断与点击的者一栏的bookKind值是否一样，如果一样th:selected的值就为true，然后th:value 设置option的value 值，th:text 设置option的文本值。
试想一下，如果是用ajax会怎么样？1、先后台获取数据后，循环append(html标签) 2、再获取到当前记录的这列属性值，再获取到 1 中循环设置的option，在比对value值，设置选中，break等。而且第一个ajax还要整成同步的，不然 2 中可能获取不到 1 中的option元素。
最后说明：如果恰巧能解决你的问题，那就动一动您的小手，点个赞或者评论一下，让我看到你们，您的点赞或评论将会持续带给我不懈的动力！！！come on baby！Let's go！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
作为交互设计师，你一定经常苦恼你的界面该怎么达到「简约而不简单」，该通过什么样的形式、功能、才能让用户获取「更好的体验」。
真正的简单并不意味着最少化，朴素的设计仍然具有自身的特征和个性。简单的特征和个性应该是源自你使用的方式，所要表现的产品，以及用户执行的任务。交互式设计 4 策略告诉你如何通过简化设计获得更好的用户体验。
交互式设计的简约 4 策略：删除、组织、隐藏、转移。
上述4策略既适用于简化功能，也适用于简化内容。而且无论项目大小，是整个网站还是一个页面，这4个策略都同样适用。你可以根据要解决的问题从中选择正确的策略。
删除杂乱的特性可以让设计师专注于把有限的重要问题解决好，而且也有助于用户心无旁骛的完成自己的目标。
组织往往是简化设计最快捷的方式。
隐藏部分功能是一种低成本的简约方案，但是，哪些功能该隐藏呢？
把合适的功能转移到合适的设备上。
用一句话来总结交互式 4 策略：
删除不必要的，组织要提供的，隐藏非核心的，转移可转移的。
运用恰当了一定可以使你的设计更出彩。
对于以上内容想了解更详细的读者可以阅读
什么是编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
HTML代码
<p @click="$router.push('/test/emitView')">跳转1</p>
<p @click="$router.push({path: '/test/propsView'})">path: '/test/propsView'</p>
<p @click="test">带参数的跳转</p>
<p @click="test1">提供了path，params会被忽略</p>
<p @click="$router.push({path: /test/propsView/${userId}})">
url变为/test/propsView/123
</p>
<p @click="$router.push({path: '/test/propsView', query: {plan: 'private'}})">
带参数的url变为/test/propsView?plan=private
</p>
Script中代码
test () {
this.$router.push({
name: 'routerView',
params: {userId: this.userId, test: 333},
})
console.log(this.$route)
console.log(this.$route.params)
},
test1 () {
this.$router.push({ // 如果提供了 path，params 会被忽略
path: 'routerView',
params: {userId: this.userId, test: 333},
})
console.log(this.$route)
console.log(this.$route.params)
},
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 如果 history 记录不够用，则无反应
router.go(-100)
router.go(100)
router.back()
在浏览器记录中后退一步
router.forward()
在浏览器记录中前进一步
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com
