如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
window全局作用域->页面关掉才销毁
1)作用域的销毁
2)作用域的不立即销毁
fn()(20);//->在执行fn的时候一切都从新开始了,和上面的步骤是一样的->输出30
3)作用域的不销毁：形成一个私有作用域,里面的内容被外面占用了
2)在函数执行的时候,里面的一个小函数的地址赋值给了我们的外面元素的点击事件,那么当前小函数也相当于被外面占用了,大函数执行形成的私有的作用域也不销毁了
3)在使用setTimeout实现轮询动画的时候,我们如果move需要传递参数值,那么像下面这样的写法会行成很多的不销毁的作用域,非常的耗性能
//window.setTimeout(move,10); ->第二次执行move的时候我们没有给它传值(这样写不行)
//解决办法:
[火狐和IE]
var obj={};
函数执行会形成私有的作用域
一般情况下，函数执行形成一个私有的作用域，当执行完成后就销毁了->节省内存空间
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先执行fn,有一个私有的变量i=10,返回一个堆内存地址 xxxfff111,我们发现这个地址还用到了一次,那么当前的这个fn形成私有作用域（A）就不能立即销毁了,xxxfff111(15)->输出25,A中的i变为11；当xxxfff111执行完了,发现这个地址没用了,浏览器就把A、xxxfff111都释放了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn执行形成一个私有的作用域A,A中有一个私有的变量i=10,A中返回一个地址xxxfff11,被外面的f占用了,那么当前的A就不能销毁了
f(15);//->输出25,让A中的i=11
f(20);//->输出31,让A中的i=12
…
当我们知道f用完的时候,为了优化性能,我们让f=null,这样的话A中的xxxfff111没人占用了,浏览器会把A和xxxfff111都释放了
几种不销毁常用到的形式:
1)函数执行,返回一个引用数据类型的值,并且在函数的外面被别人接收了,那么当前函数形成的私有作用域就不在销毁了–>例如上面的案例
//每一次循环都执行自执行函数形成一个私有的作用域(循环三次就有三个作用域,每一个作用域中都有一个i,第一个存储的是0,第二个存数的是1..)，在每一个私有的作用域中都把里面的函数绑定给了外面元素的点击事件,这样的话每一次形成的作用域都不销毁了(三个不销毁的作用域)
var oLis=document.getElementsByTagName(“li”);
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}
function move(tar){
<js code>
window.setTimeout(function(){
move(tar);
},10);//->这样写实现了,但是每一次执行定时器都会形成一个私有的所用域(匿名函数形成的)A,在A中使用了上级作用域中的tar的值,而且执行了move又形成了一个小的作用域(而在小的作用域中会使用tar的值),这样每一次定时器形成的A都不能销毁了
}
move(100);//->第一次这样执行传递100
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次这样执行传递100
JS中内存空间释放的问题（堆内存、栈内存）
[谷歌浏览器]
我们开辟一个内存，可能或有一些其他的变量等占用了这个内存，谷歌浏览器都会间隔一段时间看这个内存还有没有被占用，如果发现有没有被占用的内存了，就自己帮我们回收了(内存释放)
我们开个内存，当我们引用了它，就在内存中记录一个数,增加一个引用浏览器就把这个数+1，减少一个引用，浏览器就把这个数-1…当减到零的时候浏览器就把这个内存释放了;但是有些情况下(尤其是IE)记着记着就弄乱了，内存就不能释放了–>浏览器的内存泄露
我们养成一个好的习惯，当我们obj这个对象使用完成了，我们手动的obj=null (null空对象指针)，浏览器会自己把刚才的堆内存释放掉
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
头：header
内容：content/container
尾：footer
导航：nav
侧边栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左中右：left center right
登录条：loginbar
标志：logo
版心：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinUS
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
在设计中，卡片上设计是屡见不鲜的，比如：用在UI产品的包装排版、APP/web的列表排版、banner轮播的设计、导航的切换等。在这些上做出很多别出心裁的卡片视觉设计及炫酷的动画效果，都能带给用户很好的体验。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
问题描述：在页面选择关键词时，需要将关键词元素绑定点击事件使同一类型的关键词只有一个固定class，使其随点击更换，目的是为了让这一类型的关键词的值可以由class获取。在原本写死的关键词上绑定的事件是可用的，但是换成动态加载后发现只能适用于写死的情况。很无奈，在网上搜索一番后花了点时间终于解决了，下面奉上。
参考文章：https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1
原本绑定事件如下：
针对的HTML元素如下：
但是发现，原先的事件不能用于动态加载的元素，如上面加载的，加载形式如下：
无奈，只能上网寻求万能的大神了。
基本上提供的解决方案就两个，使用
或者
我先是使用.live尝试了下，发现gg，心灰意冷ing；本着试一试不要钱的心态又用.on试了下，结果令人惊喜啊！可以使用了，哎，这鬼玩意坑死人。
下面上针对我加载的界面元素写的绑定事件：
[javascript] view plain copy
[html] view plain copy
[javascript] view plain copy
$('element').live('click',function(){})$('父元素').on('click', '子元素', function(){})
[javascript] view plain copy
1.什么是懒加载？
当访问一个页面的时候，先把img元素背景图片路径替换成一张替代图片的路径（这样就只需请求一次，占位图），将图片的真实路径存储在img自定义属性中，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
2.为什么要用懒加载？
很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕，提高首屏加载速度，可以减轻服务器压力，节约流量，用户体验好。
3.懒加载实现封装？
lazyLoad由四个函数组成，init(初始化函数)，checkShow（判断图片是否加载），shouldShow（将要展示的图片），showImg（展示图片）。
（1）初始化函数(init) 由于滚动事件太消耗性能，所以用定时器替换,不是滚动就触发,而是滚动后200毫秒后触发。
var timer;
function init(){
$(window).on("scroll",function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
checkShow(); //
},200);
});
}
（2）判断”图片是否加载“（checkshow）函数，如果图片有isload属性，就说明图片已经加载过了，直接return。如果图片没有isload属性，进入将要展示图片shouldshow函数
function checkShow(){
$lazyLoad.each(function(){
$cur = $(this);
if($cur.attr('isLoaded')){
return;
}
if(shouldShow($cur)){
showImg($cur);
}
});
}
（3）将要展示图片shouldshow函数，获取屏幕可视宽度，滚动高度，要展示的元素到文档的高度，如果元素到文档的高度小于屏幕的可视高度加上滚动高度，说明元素已在可视区内，返回true，否则返回false。
function shouldShow ($node){
var scrollH = $(window).scrollTop(),
windowH = $(window).height(),
top = $node.offset().top;
if(top < windowH + scrollH){
return true;
} else {
return false;
}
}
（4）“展示图片”函数，将元素的src属性替换为自定义属性data-src(真正图片的地址)。
function showImg ($node){
$node.find("img").attr("src",$node.data("src"));
$node.attr("isLoaded",true);
}
（5）函数返回一个对象
return {
init : init
}
这样就实现懒加载封装了！
今天上午小米MIUI正式宣布，在5月31日的年度旗舰发布会上同时发布MIUI 10，相信不少的小伙伴已经饥渴难耐了吧。
提起平面设计，也许很容易联想到平面设计师。其实平面设计不仅是职业也是一个重要的设计知识体系，在我工作中发现平面设计知识是UI设计和其他设计领域中必备的能力，然而很多朋友认为「平面设计是属于纸媒行业的事」而忽略这部分知识的重要性，为此我想简明地将平面设计知识体系中最重要的知识点提出供大家汲取。
平面设计（graphic design），也称做视觉传达设计，是指在二维平面内通过多种设计组合来借此传递信息的视觉表现设计。平面版式设计需要使用字体知识（Font）、视觉设计（Visual Design）、版面（Layout）等方面的专业技巧来达成创作计划的目的。平面设计非常重视版式的设计，而版式并非只有纸媒才需要重视。如果想做好移动端设计、网页设计甚至是别的领域的设计，那么一定要加强学习平面版式的基础知识。
在我们开始学习平面版式基础之前，我们先来讲一下简明平面构成原理。平面构成是运用点、线、面和其他技法来构成基本元素的学习方法。它是在我们工作之前必须要学会的视觉语言。以下的内容希望如果您有时间进行练习，边练边摄取知识效果才能更好。
点是组成平面构成的基础要素。点可以是不同大小的；可以是不同疏密的；可以是不同虚实的。可以是整齐的点，也可以是随意排列的点。在一个画面上也可以有大小、疏密、虚实、整齐和随意对比的，对比就会产生韵律感。仅仅依靠点来构建画面时，我们会想方设法地让画面丰富，体会点的变化。
线有哪些呢？垂直线、水平线、斜线、曲线等。垂直和水平都会有稳定的感觉，斜线会更加有冲击力，曲线会感受更加柔和。由不同粗细、不同韵律的线条组合，作品将更加有视觉引导的效果。尝试只用线条构建一个画面，你会体会到不一样的视觉感受。
面的种类有不规则形状和几何形状两种。在《纪念碑谷》游戏中有个词叫做「神圣几何」，我非常的喜欢。几何图形真的是很神奇的存在，几何形是可以用数学表达出来的，也是我们在初中时就开始学习的。比如三角形、圆形、矩形、正方形、椭圆等。这些几何形在视觉上是非常令人感觉舒适的，如果你在创作时没有灵感时，可以从几何形中寻求灵感。不规则形状其实也可以分解成不同的几何形的组合。
平面构成的形式有重复构成形式、近似构成形式、渐变构成形式、发射构成形式、密集构成形式、对比构成形式、肌理构成形式等，如果平时您发现在工作中排版的图形能力比较差，那么建议您了解一下构成形式加以练习。
重复构成形式就是用一个基本的元素在一定的形式下重复排列，排列对方向和疏密会产生一种秩序的美感。谈起重复构成，我想顺便介绍一下重复构成的两种方式：第一种：二方连续。二方连续是图案的一种组织方法。二方连续是由一个单位纹样向上下或左右两个方向反复连续而形成的纹样。第二种：四方连续，是由几个纹样组成一个单位向四周重复地连续和延伸扩展而成的图案形式。
近似构成形式是使用相似的元素进行构成的一种方式。近似构成讲求在统一中带有变化。设计上采用基本形状之间相加相减求得近似的基本形。基本形类似的构成形式就是近似构成形式。总结来说就是看着一样实则要有变化。
渐变构成形式是把基本元素的大小、方向、虚实、色彩等关系进行渐次变化排列的构成形式。渐变可以是通过颜色、方向、虚实的变化也可以是通过外形的变化来完成，不一定是我们通常理解的颜色渐变。
发射构成形式是以一个点或多个点为中心向周围发射扩散等效果，就会具有较强的动感及节奏感。首先我们需要有骨骼线。骨骼线就是我们画面走向的一个看不见的线索。其次我们可以选择使用离心式、向心式、同心式几种发射方法来设计。
特异构成形式是在整体画面都有规律有固定形态的状况中进行小部分的变异以突破单调画面的形式。特异构成的部分可以用颜色、形状、线条等方法来做。很多运营类设计也会应用到特异构成形式。
密集构成就是在画面中使用大量重复密集的元素来给观察者一种压迫感和与留白的对比，密集构成很容易给观察者造成震撼和心理压力。
我们做对比构成的时候，可以使用元素的形状、大小、方向、位置、色彩、肌理等进行对比，以及重心、空间、有与无、虚与实的关系元素的对比。对比会产生强烈的反差和感官刺激。
视觉可理解的物体表面图案的纹理，我们就叫做肌理，以肌理为构成的设计，就是肌理构成。我们在做肌理构成时如果用Photoshop的时候会非常的方便，可以用图案、贴图等方式。
在平面设计的过程中，我们其实是在组织图片、文字、按钮、图标等最小元素的信息架构。这些元素是画面中的最小单位，它们本身就附着着某个信息，比如作品的标题、一个功能、去展览的地址、一个景点的照片等。这些排版中的元素需要我们放在画面中，不可以因为好不好看而删去必要的信息，然后根据他们的重要性进行排列组合。
字体是排版中最重要的元素，也是最直接的信息传达方式。一般来说设计师通常需要了解的字体有中文和西文字体两种：西文字体由来已久，由最早的罗马字体到我们现在苹果手机里的SFUI字体，西文字体经历了许多的设计上的变革。西文字体可以分为：罗马字体或衬线体（roman，serif）、无衬线体（sanserif）、手写体（s cript）、雕刻字系（glayphic）、典籍体字系（Classical）、装饰体字系（decorative）、展示体字系（Display）、当代字体字系（Contemporary）、符号字系（Symbol）等。中文字体由于起先版权不够重视其实并没有西文字体发展得顺利，数量上也远远落后于西文字体甚至是日文字体。好在中国设计正在崛起，在一大批设计师前赴后继的努力中，中文字体的数量正在呈指数级别增加。中文字体分为三种：第一种是黑体（笔画上没有装饰的字体）。黑体也有不同的具体字体如苹方、微软雅黑、思源等；第二种是由书法作品演变来的字体如从宋代活字印刷而来的宋体（对了，日本因为误解原因将宋体叫做明朝体）、楷体、仿宋体、行楷、隶体、魏体、舒体、颜体以及钢笔书写的字体；第三种是美术字体，比如综艺体、美黑体、水柱体、娃娃体等。
这里我引用了前端工程师在CSS样式表（一种用来表述网页样式的代码）中的族类概念。常见的族类有五种：衬线体（serif）、非衬线体（sans-serif）、手写体（cursive）、梦幻字体族（fantasy）、等宽字体族（monospace）。衬线体的特点就是笔画结尾处有装饰的处理，比如我们熟悉的Times New Roman、Georgia、宋体等。非衬线字体粗细比较均匀，比较现代并且在缩小的情况下依旧保持了可读性。非衬线字体如Arial、Helvatica、幼圆、楷体等。手写字体族就是由手写而产生的字体，比如迷你简黄草、Caflisch s cript等。梦幻字体族听上去稍显非主流，但是也是字体中不可忽视的一支力量。常见的梦幻字体族有WingDings、WingDings 2等。等宽字体族将西文的二十六个字母全部变成等宽，这样做的好处就是排版大大地轻松了。常见的等宽字族有Courier、Prestige等。总体来说字体的族类是衬线体和非衬线体两个大类，大家可以简洁地记忆：衬线就是笔画处有装饰的字体族，非衬线就是笔画较为相同粗细的字体族。
一个族类下面是不同的字体，然而一个字体又可能有好几个字族。字体文件中通常会包含几个字族，如果你安装了Helvetica，在Photoshop中你会发现字体选择器下包含了三十多个前缀是Helvetica的字族。原因很简单，字体设计师除了设计从A到Z的大小写字体、从0到9的数字、标点符号后，还为我们设计了同样字体的不同族类来协助我们在不同地使用场景下表达合适的意思。字族一般有：正常（Regular）、窄体（Narrow）、斜体（Italic）、粗体（Bold）、粗体斜体（Bold Ltalic）、黑体（Black）等等。虽然字体的字族有多有少，但是一般都具有正常、斜体、粗体、粗体斜体四种基本字族。应用场景上：粗体通常表示强调、斜体表示引用、正常是正文。很多时候我会发现很多设计师乱用斜体，其实斜体的设计并不是为了好看，而是在书中代表本段文字来自引用另一个著作的含义。
举个使用斜体的例子：「设计的作用在于寻找功能和社会间的接点，在功能足以说明一切的前提下，装饰成分是可以节制的，如何把握节制的度是考验一个设计师是否成熟的标尺。」 -《设计的觉醒》田中一光
一个字族中的任何一个字体也会有不同的笔画粗细变化。这种粗细变化的字体称之为字重（Font Weight），字族后面的字重选项如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一个字族下的不同粗细变化。实际上，国际标准 ISO组织规定了九种字重，但是由于有些字重不常见，我们就记忆以上七种字重即可。中文字体也有相应的字重，如「极细」、「细」、「标准」、「常规」、「中等」、「粗」、「特粗」。在使用场景中，如果我们需要强调一个内容，比如标题时，一般会用粗体；如果在正文的设计中，那么就会用常规或标准等字体。英文也类似，这些字重是为了我们突出文字使用的。注意一点：在PS中我们也可以通过字体面板给文字人工加粗，这种加粗如果变成形状时会提示「该字体使用了加粗样式，不能变换」，所以可见这种人工加粗是有一点缺陷的。
任何字体都具有自身的气质。比如一款圆角萌萌的字体会给人温柔调皮的感觉；而边角锋利的字体会给人一种强硬的感觉；书法字体会让用户觉得充满中国风和个性；瘦长纤细的字体会给人一种未来感等等。每个字体都具有一定的感受，这与色彩心理学中每种颜色带给人不同的感觉一样，字体的外形和笔画也会给人一些心理暗示。
全角指一个字符占用两个标准字符位置。中文字符、全角的英文字符、国标GB2312-80中的图形符号、特殊字符都是全角字符。半角指字符占用一个标准的字符位置。
通常的英文字母、数字键、符号键都是半角字符。半角全角主要是针对标点符号来说的，因为正常情况我们没有打全角英文的需求。
半角英文 english
全角英文 ｅｎｇｌｉｓｈ
半角符号 ,.’」;:{}_+!@#$%^&*()
全角符号，＇＂；：｛｝＿＋！＠＃＄％＾＆＊（）
计算机编程基于英文，也就是半角字符。所以在编程中符号一定都是半角的，如：
name=”郗鉴”
全角符号编程就会无效，如：
name=「郗鉴」
在我们设计作品时也一定要记得中文搭配全角符号，英文搭配半角符号。不要出现如「好的．」或者「ｔｈａｎｋｓ。」这样的错误。全角半角的切换在中文输入法下按SHIFT+空格可相互转换，这个知识点虽然非常基础，但是无疑我们经常看到用错的设计。
我们在一个设计中一定会依靠一些配图或者照片素材来进行排版。有时我们会选择寻找素材或者是自己去拍，无论如何，作品中使用的图片一定要与整体设计色调相符，冷色暖色中性色都要符合整体的色调，一定是邻近色或对比色等色彩关系，不要因为自己的主观放置没有色彩关系的配图或者会抵消画面色彩倾向的配图。另外注意色彩会产生「水彩效果」，即两种颜色放在一起，如果其中一种是灰色或者比较脏的颜色，那么另一个颜色在我们大脑中也会感觉变脏了。类似于这种效果可以在作图中慢慢体会。
在一个设计中，图片与文字的量应该有一定的对比。人天生喜欢看图片而不是阅读，实际上人类有阅读能力的历史只有几千年，而欣赏图片的能力是天然的。如果你的需求上文字需求非常多，尝试与需求方商讨减少文字量。文字量越少，图形化设计越多，那么视觉上这个作品看起来就更轻松。
在平面设计中，因为最终目的是印刷，对我们的图片尺寸没有非常严格的要求。但是如果我们是为了互联网产品的设计的话，可能会涉及一些需要网站编辑直接上传的图片，如果你的尺寸不是一个固定尺寸，那么可能原本网站编辑不需要裁剪图片而可以直接上传的工序，要因为我们的一个尺寸变得很复杂。所以请牢记以下三个尺寸：4:3，16:9，1:1。4:3的原因是相机的画幅一般是4比3，所以我们看到的新闻客户端的图片大多是4:3。16:9的原因是视频宽荧幕画幅就是16:9，所以我们看到视频网站的截图一般都是直接由机器抓取的图片。1:1一般用于封面等图片素材的尺寸是正方形的。
任何一个设计中都需要把各个元素分级分清主次，这样才能更好的抓住重点。你可以想象自己在管理着一部玛丽苏电视剧，这部剧中谁是主角？谁是女二号？谁是群演？主角需要独立的化妆间和助理；女二号可能只有一个助理；群演可能就是整个剧里的一个过客。我们的设计也是如此，哪个信息是主角？哪个信息是女二号？哪些元素又仅仅是群演呢？女主元素首先要站C位（网络流行词，来源center）霸占画面的中心，然后这个元素要尽量突出，可以使用更鲜艳的颜色、更夸张的字重、加边框等方式突出；女二号信息一定不要抢了女主信息的风头，所以要和女主元素有一定的对比，字号上也要小很多，尽量让用户第一眼看到主要元素。而群演的元素一定要淡化，仅仅让人感知有这些元素就可以了，比如文字可以缩小到刚刚能注意到，颜色可以是接近背景色等。那么如何让这些信息按照他们的身份来排版呢？我们就要用到CRAP原则了，CRAP是这四个原则的首字母缩写，分别是对比、重复、对齐、亲密性四个原则。
在同一个视觉区域内的逻辑不同的元素应该有所区别，避免视觉上相似。这样就可以有效地区分谁是主角谁是配角了。为了让主要元素更突出，让次要元素更后退，我们可以尽量使它们的颜色、字体、大小、留白不同。如果两个元素不尽相同，请让它们截然不同。比如如果你想使用12px的正文与14px的标题区分明显，不如用12px与40px进行区分反差更大，更容易区分哪个内容是需要优先浏览的、哪个内容是次要的。对比的方式有以下几种：
色彩对比
在我们排版时首先要产生对比效果的就是背景和文字了。文字是第一阅读元素，背景和文字如果颜色很接近，那么就不容易区分出来引发注意了。一般来说在很多媒介的设计中我们习惯了白纸黑字，即白色背景和黑色文字。我指的不仅是纯黑和纯白，也包括其他类似明度颜色的对比。黑纸白字是另一个选择，深色背景和浅色文字的搭配其实不适合大量阅读，如果你的作品信息不多是没有问题的，但是如果用户阅读很久黑纸白字的界面，就会产生视疲劳（比如再次盯着白色的墙的时候文字还会出现等）不舒服的感受。当然一切取决于用户使用场景，如果我们的设计被应用在夜晚等较暗的环境，黑纸白字更利于阅读。总之，不管你的设计采用橙蓝、黑白、蓝紫配色，一定要记住文字和背景的对比关系。
除了文字之外，图标和其他装饰信息的色彩对比也是非常重要的。辅助信息或者辅助功能的图标尽量淡化以突出主要功能和图标；重要功能如订单等按钮则需要突出和醒目。色彩对比是设计中一个非常常见的手法。
大小对比
大小对比是指文字、图片、图标等元素为了区分重要性采用的区分方法。比如两行文字：郗鉴和相声演员，同属文字但权重不同：第二行的文字用于解释第一行的内容，所以第二行内容应该通过大小和颜色变成次级，让用户阅读时分清主次。与此类似，比如音乐播放界面中的三个按钮一般并排放在一起：上一首歌、播放、下一首歌，哪个应该更大呢？当然是常用的、重要的功能-播放按钮。当然如果图标同属一个级别也应该放在一个尺寸的级别上。
如果相同的内容（如标题等）属于同一个逻辑，可使它们的颜色、字体、大小、留白保持相同。这样可以增加条理性和加强设计的统一性。这个原则看似简单，但是新手很容易犯这个问题，所以再次提醒，一个级别的信息尽量使用一种设计来保持用户的认知，避免用户认为是另一种信息分类。这就是重复原则。在一个属性或逻辑单元里的内容应该尽可能地使用重复的颜色、大小、间距。我们来看，一个注册页面可含有：注册、登录、忘记密码、跳过等内容。如果我们把登录页面分为四个属性，那么可能我们需要四种字体或四个不同的区域。但如果我们把它们分为两类呢？注册和其他。那么同一个分类就可以重复使用一种字体了。看上去就不会很乱了。在重复原则下，用户会因为视觉惯性变成寻找线索的「僵尸」，会根据线索而顺畅地浏览下去。
任何内容在版面上都尽量应该上下左右对齐。随意摆放绝对是错误的。这一点一定要和大家多次强调，比如一个元素上下左右的间距都要是一样的。大家看到网页和app设计之中经常会有间距和留白，留白和对齐都是我们在设计时需要考量的，留白不是随意的。
在逻辑上有关系的两个元素应该尽量放在一起。两个视觉元素在一起就会变成一个视觉单元。比如注册页面中的登录视觉单元是由输入表单和登录按钮组成的。相同的内容，如小标题等，属于同一个逻辑。可使它们的颜色、字体、大小、留白保持相同，这样可以增加条理性和加强设计的统一性。
左到右阅读：从左到右是受现代社会影响后天影响我们的一种习惯。我们看一个比较大面积的设计时也会从左到右依次阅读，这也就是为什么网站的logo都在左上角。从上到下阅读：我们阅读作品时也是从上到下依次阅读，所以重要的内容一定在上面，按优先级来排列。从大到小阅读：我们的视觉也是比较调皮的，如果一个元素很大，我们也会首先去注意大的元素再依次看中等和小的元素。从重到轻：元素的颜色也会影响我们阅读的顺序，从重到轻依次浏览。狩猎式阅读：狩猎式阅读用户在寻找可以完成当前界面或设计中的任务线索，比如在购买页面中会寻找支付按钮等。S曲线阅读：S型曲线阅读比较适合比较大的设计，眼球需要左顾右盼从上到下来浏览信息，在S型的浏览方式下比较能够全面地观察每个页面元素，S型成了目前主流的视觉导向模式。那么在S型曲线中，我们的对其方式有三种：左对齐、右对齐、居中对齐。重点元素可以依次左右摆放，让用户有一个视觉浏览的惯性，左-右-左-右-左-右。
上面我们介绍了一些排版和平面的基本原理。那么实际上我们在应用中要做的就是将这些知识运用在具体的需求里。让多个元素能够完美地展现在一个画面里也是一种能力，我们管这种能力叫做构图能力。那么下面我来简单讲一下构图能力有哪些要点。
我们的任何一个排版里都会出现重心。重心是我们人类的一个心智模型，我们从物理世界里学习了重心的规律，在看平面作品的时候也会莫名地关注重心问题。在设计中我们可以利用这一点创作出倾斜的重心、居中的重心、左对齐的重心等。但是请大家注意，如果我们的排版里一个单元是居中的，那么这个单元内的元素也应该重心居中而不应该重心不稳，否则会感觉大厦即将倾倒。
设计某个元素或者几个元素组成的单元也要注重骨骼，骨骼有外延骨骼和内在骨骼两种。在做完设计以后可以将作品元素的外围连个线，看看是什么形状。有时我们会发现一些骨骼不好的设计确实会给人不舒服的感受。
1692年法国国王路易十四命令成立管理印刷的皇家特别委员会。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小格，这样印刷版面就有 2304个小格组成，在严谨的几何网格中设计字体和版面来试验视觉传达的功能。栅格系统英文是「grid systems」，是一种平面设计的方法。栅格系统运用固定的格子设计版面布局，其风格工整简洁，这种方法现在也被应用在移动设备和网站设计等领域里。科学的栅格会给人一种秩序的美感和现代感。
△ 网格系统在书籍排版的应用 作品:Dale magazine by Rocio Gomez
△ 网格系统在图形中的应用 作品:Pixty App Branding by Ramotion
我们在设计任何作品时，首先考虑的是应用的尺寸。如iPhone8的分辨率为750x1334px、安卓1080P分辨率为1080x1920px等。在我们确立了我们排版的尺寸后，我们就可以根据这个宽度设计可以被整除的栅格了。我们把整体宽度定义为W。然后整个宽度分成多个等分单元A。每个单元A中有元素a和间距i。所以他们之间的关系就是 W =（a×n）+（n-1）i 。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。
比如一个网页宽度是1000px的情况中我们可以使用：20列每列40px和10像素间隔、20列每列30px和20像素间隔、25列每列30px和10像素间隔、25列每列20px和20像素间隔。如果网页宽度是990px我们可以使用：11列每列80px和10像素间隔、18列每列35px和20像素间隔、25列每列45px和10像素间隔、33列每列20px和10像素间隔。如果网页宽度是页宽980px我们可以使用：14列每列60px和10像素间隔、14列每列50px和20像素间隔、28列每列25px和10像素间隔。
用8当然不是因为数字吉利，而是因为 8 是偶数，并且8可以被成倍缩小三次！（就是8可以缩小一倍到4,4可以缩小一倍到2，这对于移动端适配来说太有优势了）考虑到移动设计中的适配特殊性，缩小到其它尺寸可能会出现虚边和半像素，用偶数可以避免这种情况。 为什么是8？因为比如1920×1080、1280×1024、1280×800、1024×768都是8的倍数（尽管部分尺寸不是8的倍数，但也不会显得奇怪）。除此之外，我们在做其它设计时也可以将不同的留白设计成有倍数关系的数字，比如10px、20px、30px等，让设计内部更有逻辑性。
黄金比例是一个定义为 (√5-1)/2的无理数。 运用到的层面相当的广阔，例如：数学、物理、建筑、美术甚至是音乐。 黄金比例的独特性质首先被应用在分割一条线段上。如果有一条线段的总长度为黄金比例的 分母加分子的单位长，若我们把他分割为两半，长的为分母单位长度，短的为分子单位长度，则短线长度与长线长度的比值即为黄金比例。
黄金比例（以下简称「黄金比」）约为： 0.618:1。
△ 使用黄金比例设计出来的苹果logo
斐波那契螺旋线也被叫做「黄金螺旋」，是根据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案，是自然界最完美的经典黄金比例。斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个90度的扇形，连起来的弧线就是斐波那契螺旋线。
斐波那契数列（FibonacciSequence），又称为黄金分割数列。在数学上，斐波那契数列是以递归的方法来定义：
F0=1
F1=1
Fn=Fn-1+Fn-2
△ 符合斐波那契螺旋线设计的Twitter logo
以64px为一个单位，即a=64px。那么大正方形的边长的一半=8a，大圆半径=7a，中圆半径=4.25a，小圆半径=3a。 8a/(8a-3a)=1.6 小圆与大正方形接近黄金比 7a/4.25a≈1.647 中圆与大圆接近黄金比 4.25a/3a≈1.417 中圆与小圆比例接近√2 整个栅格系统中的尺寸都是通过黄金比例互相联系的。
△ 内部符合斐波那契螺旋线和黄金分割的IOS启动图标骨骼
iOS的启动图标非常重要。并且苹果规定所有应用程序的启动图标都必须是圆角正方形作为图标背板。这个背板也给我们了一些参考线，苹果使用黄金分割和斐波那契螺旋线将画面分割为若干部分。如果我们绘制启动图标时可以贴合这些参考线。8a/(8a-3a)=1.6 小圆与大正方形接近黄金比7a/4.25a≈1.647 ，中圆与大圆接近黄金比，4.25a/3a≈1.417 中圆与小圆比例接近√2。
平面与版式的设计知识涵盖了字体的选择、图片的选择、平面构成基础、排版的CRAP原则、栅格化设计、黄金比例等多个知识点。如果我们现在接到一个需求，可以首先将内容放进画面并排列好重要性、然后选择合适气质的字体和图片、使用CRAP的排版原则将信息排成合理的顺序、利用栅格化和黄金比例让画面更加科学、最后如果发现画面比较空可以加入几何形装饰。怎么样，思路清晰了吗？平面与版式知识背后是人类读取信息几千年来形成的习惯以及现代社会约定俗成的阅读方式和心理学等，要想成为一个优秀的设计师，我们还需要进一步地了解设计背后的原理以及表达信息的多种方法。希望本篇文章能够对您的平面与版式设计有所启迪。
可拓展性原则是我自己瞎起的一个名字，高兴的话你说弹性原则也行。主要意思是指界面设计要足够的灵活，具有弹性，以满足将来可能出现的场景。我第一次考虑这个问题是从去年7月份开始，当时接到领导的一个临时需求，要给直投项目增加一个到期查询的功能。因为原来的界面设计比较死板，所以突然加一个新功能导致整个布局都被打乱了，结果做的很不理想。当时我就希望可以找到一个方法来应对领导这种突如其来的需求。
产品设计的可拓展性就是为了应对将来未知的改变。改变来自于功能的改变，因为产品是由一个个功能组成的。功能的改变可以分为两类：数量的改变和状态的改变。当然这里不涉及到具体的功能设计，只是探讨功能入口的展示。
数量的改变指的是功能的增加，删减与合并。多数是指新功能的增加，这就要求我们在界面（布局）设计中要给将来可能添加的新功能预留坑位。在哪里预留坑位？又给哪些功能预留呢？这里我就例举最常见的两种界面布局(导航)样式来说：宫格式布局和列表式布局。
不知道大家有没有注意到一个现象：一级页面中主要用宫格式布局，而二级，三级页面多数用列表式布局。这主要是因为一级页面是产品的门户和脸面，而且又多属于功能的聚合页，特别是首页，这就要求一级页面在展示足够多入口的同时还要兼顾视觉吸引力。而以icon，插画，图像为主要表现形式的宫格式布局在视觉设计上更容易出彩。特别是icon，在相同的空间里，可以展示更多的入口。
但是其缺点就是可拓展性差，不管是2*5还是3*4，你如果想单独新增一个功能，界面就会失衡。当然我们可以给用户提供分页，这就意味着有些功能需要用户滑动才能看到，具有一定的风险。
还有一种方法就是提供全部按钮，用户点击可以查看全部功能。
列表式布局就没有这方面的顾虑，它可以在不打破界面布局的情况下增加新功能入口，但是它的缺点在于可展示的入口太少了。宫格式布局一屏可以展示20多个入口，而列表式布局只能达到其一半的水平。
这也是经常困扰设计师的一个问题，因为数据反馈一个页面超过一屏往下内容的点击量是急剧下滑的，所以一般的一级页面都不会设计的很长。如何在有限的空间里展示足够多的入口呢？
没有什么是可以难倒我们设计师的，最近我看到一些产品在底部栏tab里动起了心思。以苏宁易购为例，当你点击进入「发现」，tab会变成「直播大厅」；点击进入「首页」，tab会变成「猜你喜欢」。所以虽然只有5个坑位但是塞进了7个tab，这是一个很好的思路。
还有在京东首页中，用户下拉会进入520专属活动页面。同样的还有微信，用户下拉直接显示你最近打开的小程序。但是目前来说，大多数用户还认为下拉只能刷新界面，对于「下拉发现新功能」足够的缺乏认知。这样的入口可以吸引多少的流量还有待检验。
对于一级页面我还有一个建议：千万不要随意把功能入口放在顶部栏上。因为对于一些小功能的迭代，入口放在哪里都一样，用户看得到很好，看不到也无所谓。但是如果要上线一些层级比较高的功能，又不想打乱界面的原有布局，最好放到顶部栏上。特别是你的界面中如果还没有搜索、城市定位、分享、筛选、通知等全局功能，一定要把顶部栏的位置空出来。文章开头我说的「到期查询」其实就属于筛选功能。
上面也说了，本文所提到的可拓展性指的是入口的可拓展性。那么入口在状态上的变化可以分为外部状态变化和内部状态变化。
外部状态变化主要说的产品层面的变化，针对的是C端产品。对C端产品来说，定期组织营销活动来拉新肯定是必不可少的。这种情况下我们需要对界面的元素进行处理使其来适应不同的活动氛围。从这个方面来说，我们可以发现为什么宫格式布局更容易受到各大电商平台的青睐。因为它可以根据不同的活动配置一套完全不同的icon，灵活多变。这种状态上的百变来打造营销氛围的能力是列表式布局所不具备的。
列表式布局可以向用户传递更多的信息，更能表现内部状态的变化。以下图为例，用户可以知道自己还有一张优惠券没有使用，知道自己本月还有126元没还。而宫格式布局碍于空间，很难向用户展示过多的信息。
以上方的日历为例，近期做了一个拆红包活动，用以icon为主的宫格布局只能加一个「拆红包」的角标。如果采用了列表式布局，可以直接展示金额，更能起到刺激用户的作用。
写分析总结写到现在读者越来越多，所以愈发担心自己写的不好会误导别人。对于设计来说，无所谓对错，只有合适和不合适。就像上面提到的两种布局方式，在列表式布局中你可以随意添加新功能，但是碍于空间，可添加的功能数目也不会太多；宫格式布局倒是不怕入口放不下，但是会引起界面的失衡。设计师的能力就体现在收集用户数据，分析具体场景，去思考得出最合理布局样式。不要拘泥于解决方案，因为解决方案有很多，我们要学习的是解决方案中所体现的思维方式和过程。
以上就是我针对产品设计中可拓展性原则的一个简单分析总结，欢迎大家留言讨论。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1.把wxParse文件全部放入项目。
2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上
3.在wxss中import wxParse.wxss，并设置样式；比如‘wxParse-image’是富文本图片转化成image组件之后的类名，‘wxParse-p’是p标签转化成view组件后设置的类名
4.js
[html] view plain copy
[css] view plain copy
具体的API可以去GitHub上查看：https://github.com/icindy/wxParse
[javascript] view plain copy
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com