弹性布局（Flex）
随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
下面是一些弹性布局的基本语法：
两部分：
目录
介绍
目录
介绍
学习vue-router做的一些总结笔记，内容会持续更新！
目录
1、HTML和JS中使用router
2、动态路由
3、嵌套路由
4、编程式导航
5、命名路由、命名视图
6、重定向、别名
7、路由组件传参
8、导航守卫
9、路由元信息
10、过度动效
11、数据获取
12、滚动条位置
今天，你的朋友圈、微博首页是不是被一部韩国电影刷屏了？
韩国电影《寄生虫》在刚刚结束的第92届奥斯卡颁奖礼上斩获最佳影片、最佳导演、最佳国际影片、最佳原创剧本四项大奖。
p.s.文末附有第92届奥斯卡完整获奖名单和两个彩蛋，不要错过。
本以为拿到最佳外语片就结束使命的导演奉俊昊，在接连收获最佳导演和最佳影片大奖时，发表了一段激动人心的演讲，导演奉俊昊获得第92届奥斯卡最佳导演奖视频观看链接：https://v.qq.com/x/page/i3063i874m3.html
不想看视频的盆友们可以品品以下获奖感言：
谢谢，我以为拿了最佳国际影片后，今天就没事了，还准备好好放松一下，太感谢了！
在我年轻学电影的时候，有句话让我印象深刻，」最个人化的表达是最有创造力的「。说这句话的人是我们伟大的马丁·斯科塞斯。
我在学校的时候学过马丁·斯科塞斯的电影，能够被提名已经是巨大的荣誉，我从没想过自己会得奖。
当美国人不熟悉我的电影时，昆汀一直在推荐我的作品，他今天也在这，太感谢了，昆汀，我爱你！还有Todd，和Sam，都是我非常崇敬的导演们。
如果奥斯卡允许，我想买一把德州电锯，把这个奖分成五份，和你们每个人共享。谢谢！我会畅饮到明天早上的，谢谢。
这段获奖感言或许也能激励无数迷弟迷妹们，如果你获得了大奖是可以直接在领奖台上向爱豆表白的！
奉俊昊看着奥斯卡小金人，嘿嘿地笑了起来。
在领取最佳原创剧本奖时，导演奉俊昊提到「剧本创作是一个孤独的过程」，这样的孤独我们可以从一本《寄生虫-分镜书》猜测到一些。
韩版由著名的DVD发行公司plain archive出版，包含剧本+分镜头书
相比直接雇佣员工专职绘制分镜头，导演奉俊昊选择自己绘制分镜头，他会把随时能想到的元素都画在自己的iPad上，再通过云盘同步。
凡事精益求精， 或许也是这部电影能横扫奥斯卡的原因吧。
除了电影好看，《寄生虫》各个版本的电影宣传海报也值得我们细品。
这部电影的所有海报中，最出名的就要数韩国正式海报了。这张海报非常具有现代主义的美学感，但每个人的眼睛都被一条方形长条盖住了。
细心的盆友或许会发现，电影中的穷人眼前的都是黑色长条，而富人眼前的都是白色长条。这或许暗示着贫富差距带来的视角都是不同的。
而电影中的一些关键元素，例如圆锥形帐篷，奇石，只露出一半的腿……也点缀在这张海报上，悬念满满。
很多国家和地区的宣传海报也是根据这张官方海报进行修改的，除了文字不同，其他的地方几乎没有变化。
以文化艺术为名的法国宣传方看不下去了，保留了关键元素「黑色长条」又设计了一个新版本。这个版本上的贫富差距更加赤裸裸：富人都穿了鞋，穷人都光着脚。
由上面这张海报衍生出来的负片版本中写了这么一句话「没有人是非黑即白的」。
泰国版的海报则是直接变成了黑白照片，原本温馨的全家福瞬间变得诡异。
法国宣传方发布了一张表面上其乐融融的全家福：
但是有细心的设计师透露这张海报是对法国喜剧海报的恶搞。
除了上面这些根据官方海报、剧照衍生出来的海报，还有一些插画风格的海报更让人印象深刻。
其中不得不提的就是下面这两张水墨风格的国际版海报，看懂这两张海报你才算是看懂了电影。
第一张海报以电影中的关键道具「石头」为主体，穷人一家站在山顶，富人一家坐在岸边，这样看似一高一低的地位都少不了影片中的关键元素「水蜜桃」。
但这一切都是幻影，水中的倒影才是贫瘠的现实，富人依然凌驾于穷人之上。
第二张海报中，原本平静的水面开始波澜起伏，象征希望的石头上也变得血淋淋。
看到上面这两张海报，或许会有不少人联想起同样是韩国电影的《小姐》的海报，同样相似的画风、细节上用关键元素装饰，一张图就把一部电影说透了。
或许是受「倒影」的启发，设计师 Andrew Bannister 也创作了一张可以翻转过来的海报，这张海报更加赤裸裸地揭露了电影中的贫富差距。
一上一下的行走方向，和红绿色调一样，充满了对比和冲突感。
如果穷人想跨越阶级向上爬，就要像这张海报的背景一样，付出血红的代价。
下面这张由葡萄牙艺术家Vicente Niro和IgorMade创作的海报更直白地把人之间的互相压迫展现了出来：
艺术家Randy Ortiz创作的一张海报揭露了在这部电影展现的世界中，穷人有时候还不如富人养的一条宠物狗：
除了上面这些以人物为主体的海报，还有不少设计师将目光聚集在了电影中贫富两个家庭居住的环境上。
韩国艺术家Jisu Choi详细地绘制了电影中富人一家居住的房子：
这张海报上的建筑风格和构图，启发设计师Curzon release设计了另一张藏满彩蛋的海报：
这张海报上几乎把电影的关键元素都放进去了：披萨盒、石头、自画像、桃子、帐篷……你甚至能找到灯饰中隐藏的摩尔斯电码，和桌子底下的奥斯卡奖杯。
除了这些暗藏彩蛋的建筑海报，还有一些通过建筑表现贫富差距的作品。
加拿大艺术家Marie Bergeron在海报上突出了电影中两个家庭高低阶级的压迫和对立：
当你以为穷人一家已经身处底层时，没想到还有比他们更底层的人，而富人永远都处于顶端。
△ 上图由bearjew 416创作
一部好的电影值得影迷们的赞美，也值得设计师不同角度的演绎。从上面这些不同风格创意的海报中，我们也能知道这部电影为什么能横扫奥斯卡奖了。
除了寄生虫，还有一些设计师为奥斯卡最佳电影奖提名电影创作了一系列的海报，看看你能猜中多少部？
△ 海报由艺术家Olly Gibbs设计
△ 海报来源于SG Posters
最后附上第92届奥斯卡奖完整获奖名单：
你喜欢的那部电影获奖了吗？
文章来源：优设 作者：Canva设计
我承认，为「这个激动人心的新趋势」共同命名（注：Neumorphism 新拟物化，即 New 和 Skeumorphism 的结合词，最初由作者 Michal Malewicz 另一篇文章《Neumorphism in user interface》的一位读者提出）是件很有趣的事。但我没想到它能被炒得这么火热。
很多博客和 twitter 文声称它是「2020 年最值得期待的设计手法」。趁着它还没膨胀，让我先把这个幻想的泡泡戳破吧。
△ 以#neumorphism为主题的设计作品逐渐萌芽，但是大部分「浅色」设计看起来都相差无几
论成为一个流行设计风格，Neumorphism 并不够多样化，尤其对于现实中需要写代码的产品。
当然你可以将它使用在 Dark Mode 深色模式中，同时你可以选择同一种类白色的背景颜色，我们可以依此设计出六种风格，不过他们的区别甚微。
当前新拟物化设计被过度使用到各类元素中，例如卡片和按钮，但他们大多都违背了我在另一篇文章《Neumorphism in user interface》中略述的设计规则。虽然我也认同它将按钮的选中状态呈现得很美观，但是对很多人而言，不同按钮状态间的微妙差别让人难以分辨。
此处的「很多人」并不只是指患有视力障碍的群体，同时也包括使用设备的屏幕质量较差或对比度较低的用户。
按钮可能是使用新拟物化风格典型双侧阴影最糟糕的地方，尤其是在呈现按钮的选中状态时。很多人分辨不出不同状态的差别，其相似程度就像图中右边那样。
下图将新拟物化、拟物化及扁平化风格的按钮进行对比，我们可以明显地看出，新拟物化风格的按钮看起来既不像按钮，也没有达到引导操作的作用。
△ 你会点选哪个呢？
卡片和滑动条可能是这项趋势的最佳使用场景。但是需要注意的是，卡片的结构需要处理恰当。需要确保图片、图标和字体间的层级清晰，间距足够明显。测试卡片设计的最好方式就是将新拟物化风格的背景去掉，优秀的设计在去除背景后视觉上也没问题（尤其是在其他卡片并排在一起的时候）。
△ 要将新拟物化风格的卡片呈现得好，需要确保即使将元素用框架呈现并去掉背景，它们也可被视为同一组
简而言之，可以从界面中移除而不造成影响的卡片设计就是好的设计。这建议听起来很不错吧？尤其是当我们考虑到 Dieter Rams （德国著名工业设计师迪特·拉姆斯，提出「设计十诫」的那位）所提出的移除「不必要」的设计理念。
还记得 Pantone2019 年的年度色吗？让我来为你回顾一下这项在 2019 年 1 月提出的「2019 设计新趋势」。
尽管最初我们可以看到很多应用这种「鲜亮的珊瑚色」的设计案例，但其中的大多数在 2019 年 2 月初时看起来就像要过时了。
在我看来，等到我们把所有可行的新拟物化设计组合都发掘得差不多了，我们就可能会选择第一版了。
并不是说新拟物化设计就此湮没了。
只是说，仅仅是用这种风格，不足以让整个产品成功。确实，最初采用这种风格的几款产品可能会获得成功，但是一段时间后，它将会比 Material 设计更令人厌倦。
将新拟物化设计和其他风格各取特点，加以结合，势必会成为 2020 年及今后的趋势走向。
想要兼顾产品的美观度和功能性就意味着，在两个方面都不要做得太极端。即使是当前流行的柔和彩色阴影也仅仅在按钮或图标上才行得通。想象一下，把它用在整个产品上会有多不适？
下面作者探讨了六种将新拟物化风格和其他风格相结合的设计方向。
1. 深色模式
不管我们接受与否，深色模式一定会是大势所趋。不过它不局限于我们随处可见的采用低饱和度灰蓝色的深色模式。
自从 OLED 屏幕的推出，纯黑色低耗能的特性就很显著了。所以如果采用深色模式的目的在于节约电量，我们应当会开始看到更多极简，注重功能性的界面以黑色作为主色，而非深灰。
采取深色模式的另一个主要原因在于缓解视觉压力。在这种情况下，柔和的深色模式必然美观得多。
△ 许多应用的界面都采用了浅色和深色的双模式设计
2. 插图和3D
我们势必需要更多样的插图设计。作为当前最流行的风格，略不成比例的身体结构和松散的线条已然随处可见。但这很快就会造成审美疲劳。
△ 这些插图看起来都不错，但是过于相似
然而插图其实是突出画面最好的方式之一，前提是我们要尝试多种方案以免同质化。
3D 反而更容易设计出不同的风格。不过它也难做得多，需要下更多工夫。这也就说明，如果将时间投入到制作 3D 渲染上，我们更容易做出高质量、符合品牌调性的作品。
△ 品牌风格图的优秀案例 Pitch.com
3. 动画
过渡和场景搭建会在今年更受重视。它的催化剂之一是很多令人激动人心的 JS 库的推出，它们极大程度上方便了复杂 2D 和 3D 过渡效果的制作。
是的，现在可以更轻松地用代码写出「很酷的东西」了，但建议不要过度使用。
我们要将这种扁平化设计用在平面上，再让其旋转起来，就像在游戏菲斯中（注：FEZ 菲斯，以复古的像素画为风格，结合了 2D 横向卷轴和 3D 效果，详情可自行百度）。
4. 等轴设计
在 2019 年，我在搭建我们的加密货币分析平台期间，花了些时间分析超过 2000 个和加密有关的网站的设计，并逐一对其设计质量、原创性和一致性进行评分。
△ 这个设计真的很漂亮，但同时相似的图片到处都是，真的很无趣
很触动我的一点是在近乎 1/4 的网站中都具有某种等轴测的图片。他们都采用不同却似曾相识的风格，以至于一段时间后我竟然不确定他们是不是出自同一个免费库。
这种风格可以被呈现得很棒，但是如果你仅仅打算将流行设计照搬到自己的设计中，我劝你还是放弃这个念头吧。它已经成了 2019 年最被滥用的设计之一（仅次于彩色阴影之后）。
5. 能充实内心的极简主义设计
这种趋势初露苗头，也许只会停留在一个小群体中。今年我和周围的许多人一样陷入了电子产品戒瘾的怪圈，使用了一些设计更极简化的产品。
左：Mudita Pure，右：Light Phone 2。两个产品我均有购入，目前正在使用 Light Phone2，设计非常清新。
许多产品诸如 Mudita Pure 和 Light Phone 2 传达出简洁、黑白、极端简化的界面。如果我们将使用的 app 看做是一定要满足某种功能的工具，极简的界面设计就有一定意义了。当然不是所有的 app 都可以用这种风格（想象一下纯文字的 Instagram）。
6. 语音界面
我在今年参加的一场论坛上，听到过这样一句话：不要再学习 UI 了。在不久的将来我们大多会使用声音识别与设备对话。
虽然这有些未来主义，并且在某些场景中适用（例如驾驶和运动中）。但是我认为有两个原因导致语音界面至少在目前还不足以居于主导地位。
此处唯一的正确答案是，我也不知道。可能我的判断失误，未来我们会有很多突出的软塑料风格（新拟物化设计的特点之一），或者我们的手机屏幕会采用挤压玻璃以呈现更逼真的设计。
△ 将如上探讨的所有风格进行叠加的尝试
但是很可能发生的事情是，没有单一风格会成为今年的主导。
最优秀的设计一如既往会恰当地结合当下趋势并采用优秀的字体风格。你可以在卡片上采取不同风格的阴影，但如果其中的文字呈现得杂乱而古怪，任何流行风格都不会让设计看起来美观。
可读即美观。在 2020 年记住这句话！
文章来源：优设 作者：彩云译设计
「层次感」这个词在设计中的出现频率是很高的，主要体现在信息层级关系和视觉丰富度这两点，而缺少层次感的设计会给人一种信息杂乱、画面单调的视觉感受，甚至枯燥、乏味，这也恰恰与设计目的相悖。那么当我们的作品出现层次感缺失时，应该从哪些方面着手改善、解决呢？本期内容希望能对大家有所帮助。
营造视觉元素的差异化可以起到很好的改变画面信息层级关系的作用，从而增强设计作品的层次感，这和对比手法很雷同。无论是画面中的视觉元素多还是少，都要做到有主有次、有大有小、有粗有细、元素与元素之间形成对比关系，举个简单的例子：
很明显第一排的形状之间是完全相同的，在视觉上给人的感觉就会很平，缺少变化；而下面两排在视觉上都营造了一个与周围存在差异化的视觉元素，使得整体在视觉上有了阅读的先后顺序，形成了简单的信息层级关系。
当画面中的视觉元素相同或者相似时，信息的层级关系就相对而言不容易体现出来，那么此时就需要我们营造具有差异化的视觉元素打破这一现象，从而增强画面的视觉层次感，无论切入点是什么。再比如我们看到的风景照：
从近到远在视觉上存在着很明显的差异化，比如：近实远虚、近大远小、近处的饱和度高远处饱和度低、近处的明度暗远处的明度亮等等，大自然的风景本身就能很好地诠释视觉层次感，所谓「设计源于生活」正是如此。那么这些应用到设计中又应该如何体现呢？下面再看一个例子：
如果产品这么摆放的话，那么何来层次感而言呢？只能理解为重要的事情重复三遍。做个小小的改变：
画面有了大小关系，故而有了主次关系，此时视觉的层次感已经有所体现：
大小与虚实的双重结合，视觉层次感更加强烈了，加点透视看看：
这里做了点透视效果，结合大小、虚实的变化，是不是有种由近到远的既视感？通过营造视觉元素的差异化，视觉层次感也更加强烈，这种虚实结合的形式在设计中也非常实用，下面我们再看案例：
这种虚实对比的形式也是视觉元素差异化体现形式之一，很直观地提升了整体的视觉层次感，包括在一些文字排版中也很实用。所以当我们的作品整体视觉层次感不够强烈时，不妨试试通过营造视觉元素差异化的形式进行提升和改变，只是既然用了这种表现手法，就要做得足够明显，否则只会适得其反。
我们前面说了，提升视觉层次感可以从两个点切入，即：提升信息层次感以及画面整体丰富度，而装饰性元素的使用刚好可以契合这两点，它既有提升信息层次感的作用，又能起到很好丰富画面的作用。下面我们看个案例：
通过上下两个案例的对比我们发现：
需要注意：装饰性元素也不能过多的使用，因为过量使用很容易在视觉上形成散乱、不够整体的情况，要根据实际情况合理使用。
使用肌理是设计中非常实用的一个设计手法，肌理有着很好的丰富画面、增加细节、提升层次感的作用，比如可以用做一些海报的底纹、文字的材质，甚至是一些形式感很强的肌理可以作为画面的抽象主体。下面举个例子：
案例中将远山风景图片通过透明度调整作为肌理使用，这样做的好处在于：首先肌理相较于整个画面来说不是那么显眼，这样就避免抢了主体；其次因为远山给人的视觉感受就是层次感强烈，而这里当作肌理既起到了一定的填充、丰富的作用，又保留了一些远山的属性，在视觉上层次感更加强烈。
再比如一些文字也会使用肌理，用于增强文案信息的视觉层次感受，比如：
主要字体使用肌理会在让其形象更加鲜明，与正常文案形成对比，也能间接提升文字排版的视觉层次感。
当作品视觉层次感不够强烈时，我们可以转化为思考如何提升画面丰富度以及信息层次感。比如前面说的：对比、装饰元素、肌理都可以与之对应起来，那么为什么说合理的使用色彩在一定程度上也能起到提升视觉丰富度的作用呢？下面举个例子：
这里是通过有彩色与无彩色的案例对比，以视觉感受来看：左侧明显比右侧显得更空一些，因为色彩也是一种信息传达的媒介，也就是说颜色也在传递信息，所以当画面显得空、缺少层次感的时候，通过颜色的调整也能起到一定的增加视觉层次感的作用，举个例子：
这里只是改变了底色，在视觉丰富度上给人的感受差距一目了然，因为纯白底会给人一种空、缺少内容的视觉感受，所以一般情况下我们的处理方式会选择添加一些视觉元素，比如：装饰性元素、材质、线条等等，现在我们又多了一个选项，就是无彩色向有彩色的改变，虽然这种方法有一定的局限性，但也不失为一种可行的解决方式。
其实这种营造前后叠加关系的方式在之前的文章中也提到过，其实就是寻找元素与元素之间的物理叠加关系，会给人一种很强烈的层次变化，对于提升画面层次感能起到立竿见影的作用，比如：
案例中的文字与主体物之间存在着视觉上的前后叠加关系，给用户更强烈的视觉层次感，这种营造前后叠加关系的处理手法在标题设计中也很实用。
透视也可以理解为营造空间关系的手法，当平面的视觉元素赋予其透视关系后，会形成一种类似三维空间的视觉感受，在一定程度上也能起到增强画面视觉层次感的作用。下面举个例子：
很明显，透视的感觉会给人一种空间感、延伸感，视觉层次更加强烈，这种形式在日常的设计中也很实用，比如：
改变透视会在视觉上形成一种纵向的延伸感，空间上层次关系更加强烈，只是这种形式有一定的局限性。
结合今天所说到的这些手法，通过不断演变的形式，我们简单做一组文字排版的案例：
这就是一句普通的话，没有主次、没有修饰、毫无层次感，改变一下：
已经有了信息的层级关系，即大小对比，视觉元素之间形成了差异化的表现，还可以继续深入：
通过改变颜色，对比更加强烈，层次感稍加增强，感觉还不够？下面我们继续再改：
这里通过肌理、虚实结合以及改变字体形态的表现形式，使得整体视觉层次感又提升了一个档次，如果还想继续提升，那么就要想，还缺少点什么？比如装饰性元素试一试？
增加了装饰性元素之后，画面整体的丰富度提升了很多，而且对比的形式更多元化。案例中主要用到了：差异化元素、对比、肌理、装饰性元素这四种表现形式，当然这也许不是最好的表现形式，目的是为了让理论成为实践。
当作品缺少层次感时，上述的一些改变方法可以供大家参考，但是不要仅仅局限于这些，还有一些我们常用的，比如：投影就非常实用，可以给文字、色块、主体物等等做投影，拉开前后关系，这样也会一定程度上增强视觉层次感。再比如：倒影、环境感等等，这些目的都是尽可能去丰富画面、营造信息层次关系。并不是说这些手法一定要完全体现在一个作品上，层次关系过多反而会使得画面整体散乱，一定要根据实际情况选择使用，切记并不是视觉层次数越多就越好，这是一个误区。
重复原则是指：版面中的视觉要素要重复出现，可以重复颜色、字体、图形、形状、材质、空间关系等。使用重复原则既能增加画面的条理性，还可以加强统一性，让版面更富有层次感、逻辑性，可以提高阅读效率和信息的传达。有规律的重复可以产生节奏感和韵律美，增强观者的印象。
仔细观察，生活中随处都有重复之美：
1. 文字样式的重复
同一级别的文字信息需采用相同的文字样式，也就是说，在字体、字号、字重以及特殊效果等方面都要保持一致，方便阅读和信息的传达。
此案例并列关系的文字信息，重复使用了同样的字体、字号、字重。可以很直观地把大量的信息分为四个信息层级：主标题、小标题、正文、辅助说明文字。
2. 配色方案的重复
色彩的重复在版面设计中尤为重要，当一个版面中出现太多颜色，控制不好版面便会出现杂乱花哨等问题，因此使用重复的颜色，控制好色彩的种类、纯度和明度，让版面更和谐统一是最常用的方法。
标题选择和图形颜色统一的深蓝色，并使用橙色进行点缀突出；展览时间是次级要强调的信息，选用和图形颜色统一但是比标题浅一些的青色进行强调；展览地点和内容处于三级信息，使用无彩色的黑色进行弱化。这样三个层级信息重复使用相同的色彩，让版面信息清晰有序，能保证较好的阅读体验，有助于信息更好地传达。
3. 图片使用的重复
有多张图片需要出现在同一版面，需统一图片的大小、色调、比例、裁切方式等，这样可以使版面美观整齐。
整个版面出现的人物非常多，但图片统一采取退底形式，并把颜色调整为黑白，具有很强的整体性。
4. 设计元素的重复
设计元素（如图标、形状、肌理、空间关系等）在版面中起到了强调和装饰的功能，而同类的设计元素重复出现，不仅使版面有了统一的风格，也丰富了视觉效果，使版面更有设计感和整体感。
如上一期对齐原则的案例示范中，就使用了各种设计元素的重复：文字背景框统一的伪立体效果图形，背景图案的黄色几何形状和背景黑色点状肌理。正是这种形状的重复，在很大程度上造成了整体设计的统一性和其独特风格。
1. 统一性、秩序化
重复是构成统一与秩序的关键，让视觉要素在整个作品中重复出现，统一的字体样式、重复的设计元素、相同的图片形状与裁切方式，这样既能增加条理性，还可以加强统一性。让页面更富有层次感、逻辑性，提高阅读效率和信息的传达。
2. 整体性、风格化
重复产生统一，统一形成风格。重复不仅对单个页面很有用，对于多个页面的设计更重要。正是在多个页面中运用重复原则，才赋予了整体设计上的统一感、整体性，才形成了一定的设计风格。
我们会觉得这几个页面属于同一个应用，因为它们都具备一些相同的细节特征，比如一致的几何图形、不断复现的色彩 、相同的字体、有规律的字号字重、统一的构图形式等等，这些重复的元素相互影响并不断加强我们对页面相似处的感知，所以我们一致会觉得这些页面的风格是统一的。
3. 节奏感、律动美
节奏最常见的形式就是有规律的重复，是版面构成要素利用疏密、聚散、连续、渐变等方式有条理有秩序地重复呈现，形成一种律动的美感，还可以增强观者的印象。
有优点就有缺点，重复给人带来统一与秩序感的同时，还会带来呆板、乏味、机械化等负面印象。应当尽量采用多样性实现统一， 在保证版面有秩序的前提下，让设计元素产生形态的差异或距离上的变化来调节视觉感受，不规则的重复会让画面更动感、活泼。
在重复中产生变化，一是可以避免版面的单调与平淡，增加版面的趣味性，激发读者阅读和观看的兴趣；二是为了形成反差，区分主次，突出重点。特异点更易获得视觉聚焦，引起注意。
为了让大家加深对重复原则的理解，提取本期文章的主要内容作为原始资料，运用重复原则进行设计示范。
运用「亲密性原则」进行信息的分组和距离的调整，排版时要遵循「对齐原则」。运用「重复原则」把同一级别的文字设置为相同的文字样式，增加条理性，加强统一性。
继续丰富画面，加入配色和设计元素，相同级别的文字信息使用统一的颜色和点缀元素，让页面更富有层次感、逻辑性，提高阅读效率和信息的传达。
现在画面文字信息已经清晰而有序的排列好，但是缺少主体。把标题内容「重复原则」作为主体元素进行设计，给文字加入从橙色到蓝色的渐变。
复制四组新的文字，使用自由变换工具把文字压扁，每次变形的程度逐渐加强，使其呈现出渐变的节奏感，形成一种模拟翻页效果。
把设计好的文字复制一份，并镜像翻转，主体就设计好了。重复出现标题内容，可以增强视觉冲击力，有较强的形式感，可以让观者加深印象。
把设计好的主体元素和文字信息放置到画面中，使用上下构图，采取黄金分割比例进行布局。
最后给背景加入点状肌理，在信息群组间加入线条，使层次分割更清晰，让细节更丰富，视觉效果更美观。设计完成：
样机效果：
重复是构成统一与秩序的关键，使用重复原则能让版面更富有层次感、逻辑性，可以让信息层级更清晰，能保证较好的阅读体验。有规律的重复可以产生节奏感和韵律美，增强观者的印象，有助于信息更好传达。
重复不仅仅是单一、机械地重复使用某些元素，而是要兼顾版面的形式美感与内在的图文内容，让版面实现内容与形式的和谐统一。
文章来源：优设 作者：艺海拾贝Design「口罩还是呼吸机，您老看着二选一；带病回乡不孝儿郎，传染爹娘丧尽天良」
前段时间河南硬核横幅及喊话霸榜热搜，着实让全民在疫情笼罩的阴霾下得到了一丝放松。这些土味硬核横幅，话糙理不糙，用来劝诫家中长辈，做成表情包亲戚群里分享，应该会有很不错的效果！
别看这些话语简单粗暴，但却极其上头，可不就是 rap 里常说的单押，双押嘛，再来普及一下 rap 里的常用词：
在土味文案的催化下，我除了研究押韵这门学问，偶尔也会来两句：
yo，喜欢唱歌刷剧看恐怖片，喜欢撸猫撸狗拍照片。
诶，我的flow就是这么的秀。
献丑了献丑了，说正经的，就在我研究这个单双押的时候发现了一个写词好帮手——押韵助手，网站简介说明了这是一个不简单的神器。
押韵助手是一个可以在线查询押韵的字、词、诗、歌的网站，支持单押多押；海量词库，保持更新；文案、金句、诗词、Rap歌词创作者的必备神器。
试玩地址：https://yayun.la/
值得一试的三个理由：
或许你会认为这算是一个「智能枪手」，但其实不然，除了能查普通词汇的押韵之外，它还能检测出与你搜索词汇相押韵的唐诗、宋词、元曲、歌词，连英文单词也能搜索出来，写词的时候还能顺带学习一波，赞。
此外，你还可以进行默认查询设置，主要根据你个人的需求进行定制搜索设置，可以进行辅音和词库的选用（不过太苛刻的条件可能会影响搜索结果的可用性）。
押韵助手还有一个 AI 作词功能，是基于其神经网络作词，但是创造出来的句子可读性欠佳，而且还不押韵，仅是娱乐型的功能。在此，我输入了「敷衍」一词，搜索出来的结果……我是没看懂的，大家品品。
总体来说押韵助手用来查询词汇的押韵是非常不错的选择，大家在家也可以进行「rap 创作」、文案创作、诗词创作等。另外，押韵助手还有手机 APP，APP 体量非常小，仅 3.2 M，功能除了没有 AI 作词以外，其余功能和网页相差无几，所以大家择其一进行试玩就可以。
值得一试的三个理由：
文章来源：优设 作
使用 vue-cli 创建 vue 项目：
cd 到指定的目录下 命令行输入：
vue init webpack-simple <项目名称>
根据提示设置Project name
设置Project description
设置Author
设置License
设置Use sass?
cd到刚刚创建的项目名称目录
命令行输入：npm install
等待安装完成后 执行 npm run dev 命令
注：以下部分练习是在https://jsfiddle.net 中进行
创建组件：（创建全局组件）
Html 部分：
<div id="app">
<div>练习</div>
<!-- 这里的 inline-template 取代组件函数中的 template:'' -->
<my-cmp inline-template>
<p>{{ status }}</p>
</my-cmp>
<hr>
<my-cmp inline-template>
<p>第二次使用{{ status }}</p>
</my-cmp>
</div>
Js 部分：
Vue.component('my-cmp',{
data: function () {
return {
status:'Critical'
}
},
methods: {}
});
var vm = new Vue({
el: "#app"
})
如果将data提取成公共的部分，则多次使用同一个组件则这部分数据在内存中使用的是同一块存储 如下演示：
html部分：
<div id="app">
<div>练习</div>
<my-cmp></my-cmp>
<hr>
<my-cmp></my-cmp>
</div>
Js 部分
var data = {status:'Critical'};
Vue.component('my-cmp',{
data: function () {
return data
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
});
var vm = new Vue({
el: "#app"
})
上面的js代码当点击按钮的时候两个组件引用的数据均会发生变化
局部注册组件：
html部分：
<div id="app">
<div>局部注册组件练习</div>
<local-cmp></local-cmp>
<hr>
<local-cmp></local-cmp>
</div>
Js 部分：
var cmp = {
data: function () {
return {
status:'Critical'
}
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
};
var vm = new Vue({
el: "#app",
components:{'local-cmp':cmp}
})
蓝蓝设计的小编 http://www.lanlanwork.com
