关键词在关键词布局中需要出现的位置:外链、内链、页面标题、描述、页面导航栏、首页、栏目页、专题页、详情页、图片ALT。以上主要是针对关键词布局展开的需要优化的细节，其实对于SEO排名因素在明面上至少有一百多条，往往我们只是做了其中的几条，而忽略了很多其它SEO因素。每个关键词的出现位置、出现次数合理，关键字的出现才会让用户体验得到提升，才能锁定精准的流量。
文章来源：北京SEO
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
一切都是有一定的规律性。要是你行动太快，只会致使相反的结果。这里分享了SEO优化的原因和解决方案，希望对您有所帮助。
文章来源：北京SEO
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每天努力的用心的去做设计，挺开心的，其中最开心的细节就是“思考自己的设计如何与别人的不一样”，让你的差异化产出得到认可后，这将是一件非常非常幸福的事情。
今天和大家分享一个前一阵子做的小案例，做的一个直播货币，名字叫星币。
思考过程如下：
其实“星币”可发散的空间很小，因为已经非常具象了，无非就是星星、和钱币。
我们可以看下大概的感觉：
但是如果按照上面的感觉做，那最后出来的效果一定很常规，这也就有了我接下来的思考。
我们仔细观察，一般参考中的星星都是非常规矩的，无非就是尖角圆角的区别：
要么就是胖瘦的区别：
所以这次我打算做一个不那么规矩的，有点跳远的感觉、又有点星火的感觉，所以我把星星的一个脚拉长：
然后再把两个胳膊往上抬一抬：
这样就好像是一个跳跃的小人一样，会相对来说活泼一些。
接下来为了让整体更加和谐，我在钱币周边挖了一个小口：
目的就是配合那只伸出来的脚，让整体感觉更加巧妙一点。
其实星币很容易联想到金黄色，如果按照这个设想来做，那就会比较普通，所以我选择让他和直播、社区的配色一致：
这样在颜色方面也就有点自己的调性了。
刚才不是说让这个星星看起来像个跳跃的小人嘛，那一般人都有表情的，所以我们完全可以再加上一个可爱的表情：
让整体更加生动形象。
当然，如果星币在面积小的场景下是看不清表情的，所以需要做成两种，一种是有表情的， 一种是没有表情的。最后，还可以再做个有质感的：
后来发现质感做的有点脏，于是又优化了一下质感，效果如下：
整个构思和执行的过程还是可以的的，也得到了大家的认可，不过很可惜的是，后来名字改了，改成了能量币，哈哈哈哈，通过能量，我又联想到了太阳，太阳能嘛，执行原理都是一样的，大概效果如下：
文章来源：优设网 作者：菜心设计铺
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们今天主要来讲4个主题：
1.颜色使用的误区-红色的警示含义
2.功能即按钮？-两者的区别与设计思路
3.设计中的样式-情理之中，意料之外
4.产品体验案例收集-宁缺毋滥
5.减少步骤就能提高转化？-少即是多，多即是少
所以，这篇文章还挺有意思的，大伙读读看
最近有多个小伙伴来问问题，老师， 我的产品色是红色，那我用红色的按钮会不会给人传达很强烈的警告？还有我们的产品色是冷色，如果不用暖色按钮会不会没有强烈的引导感，我好纠结啊！
大家瞅瞅，他像一个好人还是坏人？
呐，颜色情绪表达不在于本身，而是其使用场景。大家都知道颜色都有其两面性，比如这样，同样是黑色系，但是左边看上去是潮流、硬朗的感觉而右边则有一些忧郁、沉重的感觉。
所以颜色怎么使用要看用在什么场景，特别是主色的使用，如果本身是红色或者暖色的主色，那么可以在以下地方使用：
1.希望引起用户强烈注意的地方（正向/警示）
2.核心转化按钮（几个不同层级）
3.正在激活的板块（标签、分段）
但是暖色为主色的产品核心转化按钮一定不会是冷色调
所以不用在意主色是红色而带来的正负向情绪，因为到了不同场景它的含义自然会变化，如果本身主色为冷色调，那么主色和辅助暖色都可以用在核心转化的按钮上或者用其主色，我见过冷色为主色但是核心转化按钮是辅助色的情况，我总结了一下，大家可以看以下两个产品的截图，如果本身产品的辅助色使用场景和频率很多，那么在核心转化和重要按钮上我们要使用品牌主色，但是如果在工具类型的产品中，辅助色的场景和出现频率很少，那么核心按钮和一些关键引导信息可以用辅助色。
如果让你在原有的界面中设计某个功能，你会如何设计？可能我们第一反应就是先给他设计一个按钮。
按钮很好理解，我们先看看功能在释义上怎么说：事物或方法所发挥的有力作用，
阿哟，这一听，简直太抽象了！这就好比让媒婆描述你的相亲对象长的怎么样：小伙子看起来挺老实的，抽象但又很清晰！大家看下面两个例子：
第一个-刷新，无论是图标还是文字，我们的预期是点击之后就会实现在当前状态/页面的数据重新获取
第二个-支付。支付也是一个功能，相比较刷新而言是一个复杂的系统的功能，但是它无法通过一个按钮来实现功能的全部作用。
很多同学在做信息架构的时候就很懵逼，那我要梳理的是按钮呢还是这样的功能呢？我好乱啊。当然，信息架构肯定不是功能的树状图堆砌那么简单啦，那个顶多叫做功能分类，信息架构需要包含更多的业务逻辑和状态逻辑。
所以在这里就有三个结论：
有简单有复杂，但他们都需要通过外部的、具象的元素来实现其作用。
还有滑动、长按、甚至神经控制等等，如果大家玩过赛博朋克2077这个游戏就知道，义体的控制很多来自于大脑和神经，那么这些功能肯定不需要点击这样的操作行为啦，所以也不存在按钮。
我们在做设计的同时要思考，一个功能可以以什么样的形式存在，要满足高效、简约、符合心智模型等约束条件，比如做一个翻页，没有人会在app界面中设计一个下一页的按钮，抖音切换视频也不会出现一个按钮用来切换到下一个视频，再比如公众号文章收起需要通过滑动到指定位置，而非设置一个按钮。
以后再让你设计一个功能就不要直接做出一个按钮喔
想把设计做的出彩一定要满足两个条件：1.符合常规认知 2.超出常规认知
听起来有点玄乎啊，第一眼看心知肚明，第二眼看我x，这个牛逼啊。
那其实我们在做UI设计的同时也可以多些创意和想法，不要被惯性思维和熟悉的手法所困扰。有时候你想做一些创意设计但总是被“不统一”这样的理由所驳回，麻烦把这篇文章转发给驳回你的人，很多有意思的设计都被淹没在这些“风险”提示里了。
比如网易云音乐这里的tab，大家都知道tab的样式和其交互方式，还有和segment的区别，那么如果既不想用segment样式又不想让用户进行所有滑动怎么办？
没错，他们在这个地方用了竖线隔开了，重新感受一下，是不是可滑动的感觉变弱了呢？
还有卡片设计中如何添加标签可以更顺滑，如何让一个按钮自然的融合到另一个模块里。
排版是否可以用异形设计，例如个人中心
我看到很多同学正在体验各种各样的产品，然后把一些不错的案例摘录下来进行分析，我觉得这是一件很好的事，我在2年前就鼓励大家这么做，因为这个也是作为一个UI设计师的基本功，除了视觉创意的积累以外也要有交互案例的积累。
但是我发现很多同学有点南辕北辙了，我们需要收录的是一些优秀的案例，何谓优秀呢，指的就是令人惊喜的功能，而非本该具有的或者无差别的功能（可以了解一下kano模型，这里不细说）。另外就是需要有分析的能力，不是什么案例都是优秀的，有些可能存在着不好的体验。俞军在其产品方法论中提到：用户价值=新体验-旧体验-切换成本，所以价值大不大取决于新体验是不是足够好。
现在看到的就是可能这个产品把字加粗了，也能写出一大堆分析这个加粗的好处，或者一个卡片设计就能写出非常有亲和力，信息更聚焦这样空洞的词汇，这对于我们积累案例没有任何的帮助。
例如以下的案例，在编辑状态返回系统会提示，从而滑出Actionsheet。如果不做用户体验会很差，但是做了，用户并没有很惊喜，这就是一个必备的功能而已，所以对于一个案例到底是否优秀我们需要尽量客观的看待。
所以很多交互案例并不是不好，而是还没有达到能够被我们收藏的地步，如果没有撩到你的心，那我觉得咱们就矜持一些。
那什么是一个比较好的交互案例呢？好的交互案例一定是更近一步解决问题和深入场景的，比如我们在场景分析过程中对于预判这个概念的理解，例如行动按钮前置、替换、引导等等，例如像电影app在近电影放映前弹出取票码一样，这个功能如果不做，用户体验不会很差，因为依然可以找到这个二维码，只是用户想不到居然还可以这样做，但是一旦研发出来，用户会觉得非常惊喜，这种就是优秀的体验设计。
再比如有些你可能觉得体验好的案例其实还没分析到位，就像高德地图在到达目的地时会给你很多场景的补全和选择，你肯定认为这很人性化啊，但是我在有一次使用“原路返回”功能的时候犹豫了。高德确实在帮助用户解决问题，但是在这里显然细节有待商榷。
很多用过这个功能的同学会发现“原路返回”的文案是有歧义的，功能是好功能，正不正紧就看文案了。来，我们解析一下场景：用户a通过高德地图导航到地点x，路上非常拥堵，好不容易到达目的地后需要返回起始地，这时高德提供了一个“原路返回”的按钮，他要不要点？
为什么说这里有歧义呢？
1.如果用户开始的行驶过程很拥堵，你告诉他原路返回，他的潜意识会觉得原路返回是不是也很拥堵。
2.原路返回到底是不是最佳路线，因为有时候来回路线的最优解并不是同一条马路的左右两侧。
所以，人是好人，正不正紧俺们也不知道。总之，这个文案让我不得不重新导航。
小结一下，优秀与否需要亲自深入的体验，并且结合上下文、用户、业务多角度的考虑，并非自己没见过的就是优秀的设计，咱们宁缺毋滥，提高自己的标准。
很多人一听到转化率就会把它和操作步骤关联起来，只要能减少用户的操作步骤和缩短任务路径就可以提升转化率。这个想法不能说全错，但也不能直接运用减法去当作提高转化的手段。
不用管这人是谁，大家可以理解为能量守恒定律，也就是说在所有内容（功能、信息、元素）不变的情况下，步骤越少，单个步骤所承载的内容也就越多。比如你有100个球，给你5个盒子，平均每个盒子放20个球，但是如果拿走一个盒子，平均每个盒子就要放25个。
表面上盒子少了，但是每个盒子多出了5个球，这就意味着原来简洁的界面包含了更多的信息内容需要用户去理解、操作、判断。那我们可以说减少步骤就是提高转化率吗？显然不行。
比如我们看到马蜂窝和12306在购买车票流程中的表现：
马蜂窝
1.输入起始地目的地
2.选择出发时间
3.查看车次列表并选择
4.查看车次详情
5.选择座位类型、添加乘客信息、选择座位
6.确认订单
7.支付
12306
1.输入起始地目的地
2.选择出发时间
3.查看车次列表并选择
4.查看车次详情、选择座位类型、添加乘客信息、选择座位
5.确认订单
6.支付
大家可以看到马蜂窝比12306多了一个界面，他们把查看车次详情单独用一个界面设计了，而12306则是座位类型、详情、乘客信息、座位选择都放在了一个界面，表面上看好像步骤确实少了，但我们能看到像第三方的购票软件还有其他购票的选项，例如极速订座、车票+酒店等，所以在这个场景中需要展开展示给用户，那么如果把这些都放在12306的确认订单界面就会非常拥挤，而且选中状态也很不直观。所以最好的解决方法就是拆成两步。
再来看个例子，在某个产品的1级界面中，有一个添加训练计划的功能。左边是在1级界面中露出直接添加的按钮，并且添加成功后在1级界面直接展示。右侧则是进入二级界面进行添加。在步骤上来说显然左侧案例的步骤更短，那我们可以说左侧的用户体验、任务效率就更高吗？
对吗？大家可以思考一下。
显然不能直接说正确与否，因为我们缺少评判的标准和案例的背景对吧。首先左侧案例在添加任务流程中确实占优，但是对于需要频繁增删改查的用户而言就很不方便了，而且一直添加就会使首页下方内容推到很底部大大降低了曝光。而右侧的案例则更适合用户进行批量操作。
所以路径的长短并不能直接表示转化率的高低，那么有哪些情况可以缩短路径达到提高任务完成效率的目标呢？
1.减少步骤后不影响用户对界面和内容的理解
2.减少步骤后内容信息依然符合场景，不冲突
3.需要实时检查任务结果
4.有足够的版面可以进行内容合并
5.合并后对任务目标不会造成歧义
比如下面这个案例，一个书籍分类搜索原本的2个步骤是可以合并的，因为在原来的版本中，用户如果想切换更高级别的分类需要退出再选择，而一个界面其实就可以实现3级联动的效果，当然仅限于这个案例，根据业务不同我们需要对这些多层级、多类目的分类做更多的考量。
再来看一个案例，下面是一个预定篮球场地的流程，在这个流程中有几个关键的节点：场地类型、日期和时间，因为篮球场地和老板需求的特殊性，所以我们不横向去比较，我们可以来看看下面这个小程序的流程，预定步骤一共5步
1.时间和场地的选择
2.查看场地详情和说明
3.选择具体时间
4.确认订单详情
5.支付
我们先不讨论里面信息字段是否合理（最后确认订单还要填写性别和名字是什么鬼，打个球还要查家底吗），我们先来看这5个步骤是否可以简化。
一定是可以的，首先，日期和时间是属于同一纬度同一场景的信息，我在几月几号几点预约一个场地，这和看电影就完全不同了，每个电影院排期不同所以不能先把日期和时间都选了，但这里是可以一起选择完成的。那么第三个步骤完全没有必要，直接和第一个界面结合即可。
另外，不要被先入为主的样式给蒙蔽了，场地一定要做成列表吗？除非特殊场地，每一个半场其实都是一样的，可能在光线和设施上有些区别，但是对于经常打球和第一次预约的用户来说其实没有实质的区别，所以这里可以用宫格形式替代。
然后查看详情和说明个人觉得也比较多余，经常预约打球的用户已经非常熟悉场地了，对于新用户来说也只是看一下场地的环境，所以这个页面本身内容就不多，所以可以直接和确认订单详情结合，将确认订单页的内容做减法。这样是不是整个流程减少了两步，大大的提升了任务完成的效率呢？
每个人都有自己的惯性思维和刻板印象，有时候能帮助我们更高效的完成任务，但有时候这些潜意识的反应也会让我们深陷泥潭而不自知。只有当我们深入剖析一个问题时，才能发现其本质，适当让自己保持批判性思维是有帮助的。
文章来源：站酷 作者：应骏
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
最近在社群里有人问，有什么总结和复盘的经验吗？感觉自己表达能力很差啊。今天，彩云就跟大家分享一些我的经验，希望能帮到有类似问题的朋友。
以上类似的问题，相信不少朋友都遇到过：
1）明明自己做的设计不差，但不懂得怎么去跟其他人推进自己的方案
2）明明自己已经很努力，设计能力也不差，但总是被其他能说的同事占了主导
3）项目做完了，不知道怎么复盘和包装，跟面试官介绍项目的时候感觉讲不出亮点
复盘表达能力在职场中的作用不用多说，大家都懂，那如何提升呢？我给你支几招，绝对好用：
1）善于记录，把想法转化成文字
2）做事多想想附加价值
3）多跟别人分享，输出倒逼输入
4）学会模仿，掌握说话的节奏
5）复盘的具体操作
复盘和表达其实是2个能力维度的事，一个是文字总结提炼能力，一个是语言组织表达能力。所以，我在平时会有针对性的去做下面这些练习，分享给大家。
脑子中的想法和口中说的话，往往是比较零碎不系统的，而文字则让你有更多时间思考和梳理。不管是从逻辑性还是简练程度上，文案能力都会更加能锻炼一个人的总结能力。
可能从一开始让你写大段的文章对很多人来说，是很困难的一件事，但你可以从小事开始。比如每天写总结，记录自己的想法，这些想法可以来自于学到的知识、突然的灵感或者对某件事的看法等等。
关于记录，我一般先快速写下当时的想法，几个关键字，句子不通顺都没关系。但一定不能拖延，要不然过了那个时刻，你可能就觉得好像没啥值得记录的或者干脆就忘记了。等写的差不多了，再回头来调整语句，调整逻辑问题，就跟设计做改稿一样，当时记录的是初稿，然后再不断优化就好了。切忌完美主义者，动手记录更加重要。
我自己是从毕业以来一直保持着记录的习惯，而且随着写的量越来越多，写的速度也是越来越快。比如这段文字，就是在班车上20多分钟内写下来的。
高质量的记录内容来自哪里？除了完成需求外，多想想这件事做完之后，还能给自己带来什么其他的价值没有？比如产品让你做一个设计需求，做完它并过稿是最基本的要求，因为这部分是交换工资的价值。那还需要去思考，如何通过这个需求去放大价值。比如，这个需求能不能成为自己作品集中的一个作品？能不能把这个需求总结成一篇文章？能不能把这个需求做出亮点然后成为自己出去分享的案例等等。
如果答案是肯定的，有时间的话，一定要去达成后面的这些增值的部分。如果是有这些目标的话，你可能就会很自然的去记录过程中遇到的问题，思考需求的前因后果，记录最终的数据等等，因为你可能将来某一天要出去跟别人讲的嘛。
通过这样的动作，就能加深对需求本身的理解，也就是所谓的深入。有了这些记录和思考，让你再去写一篇总结也就是水到渠成的事了。
把自己的想法讲出来给别人，其实是一个非常考验人的事。不知道大家有没有这样的感觉，明明这个项目是自己从头到尾跟进的，但让你完整的跟别人讲出来却发现很有难度。
要跟别人讲明白一个道理，就必须自己真正理解透彻才可以。这就会倒逼你，真正梳理好自己的所学。而当你真正跟别人讲过一次之后，关于这个知识点或者项目的细节，你会印象深刻。
我习惯在学到一个新的知识点后，兴奋的找同事朋友们去分享我的收获，一方面是能加深自己对知识的理解，进一步巩固所学，另一方面也想锻炼自己的表达能力。
演讲也是需要练习的，没有谁天生就擅长，讲的多了，应变能力、总结能力都能提上来。
表达能力怎样提升？模仿是一个很好的方法。我自己经常会去看一些大佬的演讲，像俞敏洪的演讲我是非常喜欢的。然后还有TED的演讲，佩服他们能在短短5-10分钟内，把一个内容很好的讲完，并且听众还容易理解。
学习大佬们在什么情况下会停顿，如何与观众进行互动，甚至包括演讲时的姿态，表情，手势都可以模仿和研究。听的时候，带着目的去观察，相信能学到很多平时不注意的细节。
注意说话时的停顿和语速，可以理解为设计中的留白和行距。好的留白间距，能使得读者获得更好的阅读体验，演讲也是如此。但说的容易，做起来难，如果缺少练习，在实际的汇报、述职或公开演讲中由于紧张或者其他状况，很难让你从容应对。
这部分也是需要对应的学习和练习的。
针对实际项目，一般可以从以下6个方面来进行复盘：
1）定位目标
从前面说的记录中，或者可以咨询产品、运营，某个具体的需求目标是什么，从产品维度，运营维度，设计维度等多角度进行目标回顾。
2）应对过程
简单说，就是自己遇到这个需求后是怎么去解决这个问题的。仔细思考自己的应对过程，并分析过程中有没有可以改进的点。
3）评估结果
最终的结果，有没有达到预期？是好的还是不好的，把一些数据和用户评价拉出来，作为结果。
4）分析原因
不论结果如何，都应该分析其成功或者失败的原因，从过程中的每一个环节去思考，这些经验都是最宝贵的。
5）发现规律
从原因中找到规律，这个规律也就是所谓的方法论，这些方法论是否具有普适性，也就是你得到的这套经验能不能复用到其他项目中，或者没有做过此类项目的设计师拿到你的方法论，能不能很好的复用你的经验把项目做到你这样的结果或者是能做的更好。
6）沉淀文档
最终，把这些方法论、设计规范、经验教训等等，以文档的形式记录下来，就完成了一个真正的完整项目沉淀。这些也是设计师做需求时的一种价值放大，很多优秀的资深设计师都擅长做这件事。
在面试或演讲时，也应该按照这样的逻辑顺序去讲你的项目，心里有谱，讲话才靠谱。
复盘和演讲，在职场中都是非常重要的能力，但那些能说会道的人，PPT写的很厉害的人，也并非天生就如此。他们也都是后天在工作中不断的练习得到提升的。
像解决所有困难的事情一样，学会拆解，总结能力也是如此。
文章来源：站酷 作者：彩云Sky
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
概念：数组是一组数据的集合，其中每一个数据称为数组元素，js的数组可以放任意数据类型的元素，数组是一种将一组数据元素存储在单个变量名下的优雅方式。
示例解释：
//普通变量名只能存一个数据 var num = 10 //数组存储一组数据 var arr = [1,2,3,4,5,'a','b','c']
数组的创建方式：
1、通过new关键字创建（不常用）
//注意A要大写 var 数组名 = new Array() var arr = new Array()//创建一个空数组 var arr = new Array(5)//创建一个长度为5的空数组
2、通过数组字面量创建（常用）
//1、使用数组字面量创建空数组 var 数组名 = [] //2、使用数组字面量创建带初始值的数组 var 数组名 = [元素1，元素2，元素3···] 如：var arr = [1,3,5,'a','c','e',7,9]//数组元素可以是任意数据类型的
小结：
1.数组是一组数据的集合，是将一组数据存放在同一变量的优雅方式
2.数组的字面量：[ ]
3.声明数组并赋值称为数组的初始化
4.数组中元素可以是任意类型的数据
5.注意：数组元素为字符或字符串要加引号,不加的话解释器会认为是变量从而报错
索引(下标)：用来存放数组元素的序号(数组下标从0开始)
我们可以通过索引来访问、设置、修改相应的元素，注意：数组的长度可以不指定，它可以随元素的增加自动扩容,当访问未赋值的元素时，返回undefined。获取方式： 数组名[索引号]
下面通过例子来演示一下：
//定义数组 var arr = [1,3,5,'a','b','c']---->//注意字符串要加引号，不然解释器会认为是变量而报错 console.log(arr)---------------->Array(6)//输出数组长度 console.log(arr[0])------------->1 console.log(arr[2])------------->5 console.log(arr[4])------------->b
console.log(arr[6])---------- -->undefined//索引下标6没有元素，所以返回undefined 注意：数组的下标从0开始哟！！！
请看下面代码：
var arr = ["red","blue","green"] console.log(arr[0]) console.log(arr[1]) console.log(arr[2]) //输出结果：red blue green
从上面代码观察发现，取出每一个元素只是数组下标改变而已，如果数组元素多的话，一行一行访问速度很慢，为提高效率，我们可以用循环
//1、使用for循环遍历 var arr = ["red","blue","green"] for(var i = 0;i<arr.length;i++){//length是数组的属性，即为数组长度，没有() console.log(arr[i]) } //输出结果：red blue green
//2、使用for in循环遍历 var arr = ["red","blue","green"] for(var i in arr){ console.log(arr[i]) } //输出结果：red blue green
以上访问数组元素的结果是一样的，使用循环可是很便利的
下面做两个小案例来演示下数组的魔力吧！
案例1
使用数组对一组数求和并求平均值，思路：定义2个变量，一个存总和，一个存平均数，通过遍历数组求和，然后除以数组长度求平均数
案例1实现代码 //使用数组对一组数求和并求平均值 var arr = [1,3,5,7,9,2,4,6,8] //声明一个数组并初始化 var sum = 0; //创建一个变量来存取各数字之和 var avg = 0; //创建一个变量来存取平均数 for(i=0;i<arr.length;i++){ sum += arr[i]; //相当于 sum = sum + arr[i] } console.log("sum:"+sum) //打印sum的值，即所有数的和 avg = sum/arr.length //求平均值并赋值给avg(arr.lengt是数组的个数) console.log("avg:"+avg) //打印avg的值，即所有数的平均数 //输出结果：sum:45 avg:5(这里仅是演示，没有对结果为多位小数进行处理)
案例2
使用数组对一组数求最大值，图例思路：把数组第一个元素赋值给max，依次遍历比较，如果有元素大于max，则把此元素赋值给max，遍历后比完max即为最大值
案例2实现 //使用数组对一组数求最大值 var arr = [1,3,5,7,9,2,4,6,8] //声明一个数组并初始化 var max=arr[0]; //创建一个变量来存取最大值,把arr[0],即1赋值给max for(i=01;i<arr.length;i++){ if(arr[i]>max){ max=arr[i]//判断是否有数组元素大于max，有的话就把大于max的值赋值给max } } console.log("max:"+max) //打印max的值，即数组中最大值 //输出结果：max:9
// 注意！length是属性，不是函数，所以不用加() var arr = [1,2,3,4,5]; console.log(arr.length) //输出结果：5 通常数组的length属性跟数组遍历一起使用，使用循环遍历数组要注意
数组元素最后一位的索引下标是数组长度-1(arr.length-1)
// 创建数组，通过length属性扩容数组 var arr = ['a','b','c','d']; console.log(arr.length)//输出结果为4，数组长度为4 console.log(arr[3]) //输出数组最后一位元素的值为d arr.length=6; //数组长度扩容为6 console.log(arr) //输出结果为6，数组长度为6，第四第五个元素的值为empty console.log(arr[4]) //未赋值，默认为undefined console.log(arr[5]) //未赋值，默认为undefined
输出结果入图
3. 通过索引号实现数组扩容
// 创建数组，通过索引号扩容数组 var arr = ['a','b','c','d']; console.log(arr.length)//输出结果为4，数组长度为4 console.log(arr[3]) //输出数组最后一位元素的值为d arr[4]='A' //给第五个元素进行赋值,因为第5个元素没被占用，所以会在数组后面追加元素 arr[5]='B' //给第六个元素进行赋值 arr[10] = 'C' //给第11个元素进行赋值 console.log(arr) console.log(arr[6])
运行结果如图，可以发现，JS数组可以直接通过索引号进行扩容，而未赋值的元素默认为empty,返回结果是undefined，如果元素不存在，则在数组后面追加元素，若已经存在，则替换数组元素–>arr[3]
注意：不要直接给数组名赋值，否则会覆盖原有数组！
// 演示 var arr=[1,2,3,4,5] console.log(arr)//打印原数组 arr="有点意思！" console.log(arr)
1. shift()删除数组中的第一个元素并且返回被删除的元素，
同时其他元素的索引向前移动一位
var fruits = ['banana', 'orange', 'apple', 'mango'] console.log(fruits) //打印原数组 var x = fruits.shift(); //首元素删除 console.log(fruits) //删除后的数组，数组元素向前索引移动一位 console.log(x) //打印被删除元素的值banana
结果如图：
2. pop()删除数组中的最后一个元素并且返回被删除的元素
var fruits = ['banana', 'orange', 'apple', 'mango'] console.log(fruits) //打印原数组 var x = fruits.pop(); //末尾元素删除 console.log(fruits) //删除后的数组 console.log(x) //打印被删除元素的值mango
结果如图：
3. unshift(参数1,参数2···)向数组的开头添加一个或者更多的元素并且返回新的长度，
同时数组元素的索引向后移动
var fruits = ['orange', 'apple', 'mango'] console.log(fruits) //打印原数组 var x = fruits.unshift('banana'); //添加后返回数组长度 console.log(fruits) //添加后的数组 console.log(x) //打印新数组的总长度
结果如图：
4. push()向数组末尾增添一个或者多个数组元素，并且返回数组的长度
var fruits = ['orange', 'apple', 'mango'] console.log(fruits) //打印原数组 var x = fruits.push('banana'); //添加一个数后返回数组长度 console.log(fruits) //添加一个元素后的数组 console.log(x) //打印添加一个数后新数组的总长度 var x = fruits.push('pineapple','strawberry');//添加多个元素后返回数组长度 console.log(fruits) //添加多个元素后的数组 console.log(x) //添加多个元素后的总长度
结果如图
5. reverse()翻转数组
var fruits = ['orange', 'apple', 'mango'] console.log(fruits); //打印原数组 console.log(fruits.reverse()) //打印翻转后的数组
结果如图：
6. sort()数组排序，对字符串排序，比较的是ASCII码的顺序
1>如["a", "A", "1"], 按ASCII码顺序排列后为["1", "A", "a"]（数字>大写字母>小写字母）
2>如["ab", "ac", "abc"], 排序后为["ab", "abc", "ac"]
3>字符串数字：如["10", "5", "18" , "50"], 排序后为["10", "18", "5", "50"]
比较方法：
（第一位相同比较第二位，b>c，因此ab和abc在ac之前；再比较ab与abc, ab没有第三位，因此排在abc之前)!!!
如需要对字符串形式的数字进行排序，可以采用以下两种方式：
1、统一格式，补足位数，如["10", "5", "18" , "50"]中, 将"5"写为"05"
2、转换为数字，使用特殊方法对数字排序
var arr1 = ["a", "A", "1"] var arr2 = ["ab", "ac", "abc"] var arr3 = ["10", "5", "18", "50"] var arr4 = ["10", "05", "18", "50"] console.log(arr1.sort()); console.log(arr2.sort()); //比较方法：按ASCII码比较排序 console.log(arr3.sort()); console.log("数字排序(5改成'05'):" + arr4.sort());
结果如图：
1、匿名函数当做参数使用数组排序(一维数组)
//语法格式：
arr.sort ( function (a, b) { //arr为需要排序的数组名
return a - b //升序
})
根据比较函数返回值正负来决定排列顺序，为正升序，为负降序
使用如下：
function sortby(a, b) { return a - b //升序 } //降序就改成return b-a var arr = [10, 5, 8, 50]; arr.sort(sortby)//把排序匿名函数当做参数进行调用 console.log(arr);//输出排序后的结果 //匿名函数的函数名任意 结果如图：
2、匿名函数当做参数使用数组排序(二维数组)
//语法格式：
arr.sort (function (a, b) { //arr为需要排序的数组名
return a[1] - b [1] //升序，降序改为b[1]-a[1]
})
使用如下：
function sortby(a, b) { return a[1] - b[1] //升序 } //降序就改成return b-a var arr = [["Alice", "95"], ["Bob", "80"], ["Cart", "100"]] arr.sort(sortby)//把排序匿名函数当做参数进行调用 console.log(arr);//输出排序后的结果 //匿名函数的函数名任意 结果如图：
将数组[2,4,5,6,8,9,12,15,3,7,26,14]中大于10的元素存入新数组
//分析：
1、创建一个数组arr=[2,4,5,6,8,9,12,15,3,7,26,14]
2、创建一个新数组newArr来存放大于10的元素
3、遍历旧数组，找出大于10的元素
4、依次添加到新数组中
// 方法1，通过变量来增加数组长度 var arr = [2,4,5,6,8,9,12,15,3,7,26,14] //创建一个数组 var newArr=[] //创建空的新数组，用于存放大于10的元素 var j =0 ; //定义变量，用于增加新数组的长度 for(var i = 0 ;i<arr.length;i++){ //for循环遍历数组 if(arr[i]>10){ //判断数组元素是否大于10 newArr[j]=arr[i] //如果arr数组元素>10，则存入新数组 j++; //当存入元素，长度+1，即j++ } } console.log(newArr)//打印新数组
// 方法2，巧用length属性 var arr = [2,4,5,6,8,9,12,15,3,7,26,14] //创建一个数组 var newArr=[] //创建空的新数组，用于存放大于10的元素 for(var i = 0 ;i<arr.length;i++){ //for循环遍历数组 if(arr[i]>10){ //判断数组元素是否大于10 newArr[newArr.length]=arr[i]//如果arr数组元素>10，则存入新数组 } //巧用length属性，数组索引从0开始增加 } console.log(newArr)//打印新数组
结果如图：
概念：二维数组就是一维数组的每个元素是一个一维数组
// 创建与访问
var fruits = [["1", "Banana"], ["2", "Orange"]];//创建二维数组 var element = ["3", "Apple"]; fruits[2] = element; //给第三个元素赋值 console.log(fruits); //打印二维数组 console.log(fruits[0]); // ["1", "Banana"]//打印第一个元素(数组) console.log(fruits[0][1]); // "Banana" //打印第一个元素的第2个值
结果如图：
通过for in循环遍历二维数组
var fruits = [["1", "Banana"], ["2", "Orange"], ["3", "Apple"]]; for (var i in fruits) {//控制外层数组元素 for (var j in fruits[i]) {//控制内层数组元素 console.log(fruits[i][j]);//输出数值中每一个元素 } }
结果如图：
小结：二维数组跟一维数组使用差不多，只是稍微麻烦一点，访问二维数组的具体元素值：arr[外层数组索引][内层数组索引]
遍历二维数组使用双重for循环
图例解释：
//代码实现如下 var arr = [5,4，3,2,1]; for (var i = 0; i < arr.length - 1; i++) {//外层循环控制交换趟数，趟数为数组长度-1 for (var j = 0; j < arr.length - 1 - i; j++) {//内层循环控制每一趟需要交换的次数 if (arr[j] > arr[j + 1]) {//判断前面一个数是否大于后面一个数，如果是则交换两数 var temp = arr[j];//临时变量，用于交换两数的临时存取 arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } console.log(arr);//输出排序后的结果
结果如图：
本次笔记主要记录了数组的基本使用，但是数组的妙用远不止这些，需要我们自己去探索。
转自：csdn论坛 作者：想要搞钱
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
jsonp的核心原理是利用script标签没有同源限制的方式，可以发送跨域的get请求（只能发送get请求）。script标签中的src属性将请求参数和当前请求的回调函数名拼接在链接上。最终由服务端接收到请求之后拼接成前端可执行的字符串的形式返回。这个结果字符串最终会在前端的script标签中解析并执行。
利用<script>标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的JSON数据。JSONP请求一定需要对方的服务器做支持才可以。
JSONP和AJAX对比： JSONP和AJAX相同,都是客户端向服务端发送请求,从服务端获取数据的方式。但AJAX属于同源策略,JSONP属于非同源策略(跨域请求)。
JSONP优缺点： JSONP优点是简单兼容性好,可用于解决主流浏览器的跨域数据访问的问题。缺点是仅仅支持get方法具有局限性,不安全，可能会遭受XSS攻击。
jsonp回调函数的名称callbackName拼接到src上
script标签，设置它的src属性
callbackName回调函数，等待script标签请求结束，并调用
/**
* jsonp获取请求数据
* @param {object}options
*/ function jsonp(options) { // console.log(options); // 1. 产生不同的函数名(函数名随机) let callBackName = 'itLike' + Math.random().toString().substr(2)+Math.random().toString().substr(2); // console.log(callBackName); // 2. 产生一个全局函数 window[callBackName] = function (params) { // console.log(params); // console.log(options.success); if(params !== null){ options.success(params); }else{ options.failure(params); } // 2.1 删除当前脚本标签 scriptE.remove(); // 2.2 将创建的全局函数设为null window[callBackName] = null; }; // 3. 取出url地址 let jsonpUrl; if(options.data !== undefined){ jsonpUrl = options.url + '?' + options.data + '&callBack=' + callBackName; }else { jsonpUrl = options.url + '?callBack=' + callBackName; } // console.log(jsonpUrl); // 4. 创建script标签 let scriptE = document.createElement('script'); scriptE.src = jsonpUrl; document.body.appendChild(scriptE); }
服务端(express)
router.get('/api/v1', function(req, res, next) { res.json({ 'name': '前端收割机', 'address': '广东', 'intro': '前端技术交流公众号' }); });
调用jsonp
btn.addEventListener('click', ()=>{ jsonp({ url: 'http://localhost:3000/api/v1', data: 'name=前端收割机&age=20', success: function (data) { console.log(data); }, failure:function(data){ console.log(数据请求失败); } }); });
show)当做参数值,要传递给跨域请求数据的服务器,函数形参为要获取目标数据(服务器返回的data)
<script src=>标签 ,把那个跨域的API数据接口地址,赋值给script的src， 还要在这个地址中向服务器传递该函数名(可以通过问号传参?callback=show)。
show,它准备好的数据是 show('前端收割机')。
HTTP协议返回给客户端,客户端再调用执行之前声明的回调函数(show),对返回的数据进行操作。
/**
* jsonp获取请求数据
* @param {string}url
* @param {object}params
* @param {function}callback
*/ function jsonp({ url, params, callback }) { return new Promise((resolve, reject) => { let script = document.createElement('script'); params = JSON.parse(JSON.stringify(params)); let arrs = []; for (let key in params) { arrs.push(`${key}=${params[key]}`); } arrs.push(`callback=${callback}`); script.src = `${url}?${arrs.join('&')}`; document.body.appendChild(script); window[callback] = function (data) { resolve(data); document.body.removeChild(script); } }) }
服务器（express）
// 后端响应 // 这里用到了 express var express = require('express'); var router = express.Router(); var app = express(); router.get('/say',function(req,res,next) { //要响应回去的数据 let data = { username : 'zs', password : 123456 } let {wd , callback} = req.query; console.log(wd); console.log(callback); // 调用回调函数 , 并响应 res.end(`${callback}(${JSON.stringify(data)})`); }) app.use(router); app.listen(3000);
调用jsonp
// 前端调用 btn.addEventListener('click', ()=>{ jsonp({ url: 'http://localhost:3000/say', params: { wd: '前端收割机' }, callback: 'show' }).then(data => { console.log(data) }); });
基本原理：利用 script 标签的 src 没有跨域限制来完成实现。
优缺点：只能 GET；兼容性好。
简单实现：通过 url, params, callback 来定义 JSONP() 方法的参数。
转自：csdn论坛 作者：imagine_tion
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
网站前言：核心思想 。
1、四处一词
（1）文章标题带关键词
（2）文章关键词标签，描述标签带关键词
（3）文章内容带关键词
（4）其他文章锚文本设置关键词
2、五金定律
（1）你是否重要？
指的是某个url的权重，这个权重可以是首页，也可以是其他页面，一个网站只有权重高，才能有好的排名。
（2）你是什么？
我就是那个关键词，说明你网站关于那个关键词最专业。这里可以借鉴四处一词设置。
（3）你是否是原创
一个好的内容才能更容易排名，百度喜欢新鲜的内容，最差是伪原创。
（4）你是否是最新的
每个页面都有最新模块、随机模块，这样可以保证搜索引擎来抓取每个页面的时候都是不一样的。
（5）你是否是最受欢迎的
指的是网站的PV值比同行高，这个后期可以慢慢培养。
主内容
一、域名的选择
（1）如果是做英文关键词，域名首字母应该是是英文关键字。
例：我想做seo这个词，我的域名是 www.seofeiyu.cn
（2）如果是中文关键词可以随便，最好做成公司品牌的域名，这样有助于以后宣传，让人们记住。
（3）域名可以选择老域名指的是：域名之前做过网站无任何违法乱纪行为，可以继承原网站的权重，不必从新再来。
二、服务器的选择
（1）服务器最好选择云服务器，独立的IP，不要选择空间、主机，这样可以防止别的网站降权影响不到别的网站，和网站被入侵其他网站不影响。
三、首选域，url的标准化
（1）首选域：域名解析，如果有www的和不带www的，我们应该301重定向到一个主域名，这样有利于权重集中，不分散。
（2）url的标准化：网站内所有指向首页的url链接，应该是统一的，不应该有 .index .php 后缀的，这样会让搜索引擎分辨不出哪个是首页，我们应该主动提交，让搜索引擎知道那个是我们的主页。
四、TDK的设置（标题标签，关键词标签，描述标签） 重要
1、标题标签 ：关键词1_关键词2 _关键词3 - 品牌词
最重要的词放在最左边，剩下的依次排序，关键词最好出现3-5次左右，关键词越多权重越分散
2、关键词标签：关键词的选择最好在标题中提取组合，关键词写7个左右最好，关键词不要重复堆彻，容易造成降权。
3、描述标签：对公司的介绍，产品的描述等，字数在80-100个字左右，关键词出现2-3次最好，不要重复
TDK设置好了对整个网站主关键字提升起到非常大的作用，反之会对网站排名造成影响。
五、网站的结构
1、因为人们的习惯是从上往下看，从左往右看，所以网站的结构遵从 F 型结构 。
2、网站首页应该有 最新文章模块、随机文章模块、应该还保留一个文章不收录的模块，因为首页的权重最高，可以增加文章的权重入口。其他页面也应该有这几个文章模块，可以增加文章收录，保证蜘蛛来抓页面的时候都是最新的，这样蜘蛛会很喜欢。
3、关键词的布局：网站首页应该做 2-3个主关键词，栏目页2-3个关键词，文章页1-2个关键词，其他关键词分散到聚合页面。
4、网站页面链接最好是静态链接，如果是动态链接可以做成伪静态，因为静态链接蜘蛛好抓取收录，动态链接虽然也能抓取，但链接参数有可能让蜘蛛进入死循环，不利于抓取收录。
5、网站连接到首页应该采用绝地地址，不要用相对地址，好处是给首页集权，防着网站被镜像。
六、网站导航设置
1、主导航：主导航文字设置，最好加上关键词，这样会增加关键字在页面出现的次数，有利于排名，如：seo资讯 seo培训。
2、位置导航：如：seo首页>栏目页，首页链接加上主关键词，这样相当于锚文本链接到首页，增加首页关键词的排名，其他页面也如这种形式。
3、次导航：也称为页脚导航，在网站页脚写一段话，出现主关键词连接到首页，不要重复，做好了可以增加关键词排名，用不好会给网站造成影响，慎用！
七、锚文本的设置 重要！
1、页面锚文本：可以设置两个，一个指向首页、栏目页或聚合页面，另一个指向文章页面。
2、内部锚文本链轮：可以在5-6页面锚文本做成一个链轮，指向一个关键词页面，在指向首页、栏目页或聚合页面，这样页面之间的权重互相传递，给关键词增加权重。 有的说这样不好，慎用！
八、网站外部链接的设置
1、友情链接的设置：
（1）网站友情链接不要超过10个，多了的话会造成权重流失严重，对面的网站也是多了的话，给自己的权重有限得不偿失，如果对方的网站很有价值的话可以不用考虑。
（2）链接的网站也应该注意考察对方的网站有没有降权，和违法内容，如果不注意会牵连自己网站，造成降权等严重后果，友情链接在精而不在多。
（3）链接的网站应该有自己的网站有相关性。
2、外链的设置：
外链可以写软文带上自己网站的链接，发布到各大平台，增加百度抓取的入口。也可以在微博等社交平台留下自己网站的链接。
注意：外链的发布应该考察对方平台的可靠性，有没有被百度惩罚，和违法内容，在这里给大家提供一个平台 “搜外网” 大家可以去试试。
九、网站其他设置
1、robots.txt的设置：这个文件放在网站的根目录下，搜索引擎来网站爬取的第一个文件，可以告诉搜索引擎蜘蛛，该抓取那个不抓取那个，如果不会，可以不用设置。设置好了再百度平台更新下，测试抓取看有没有问题。
3、网站地图的设置：这个很有必要，可以让搜索引擎蜘蛛快速的抓取网站所有连接，可以在robots文件写上，让蜘蛛主动过来抓取网站连接，设置好了百度平台提交。网站地图的形式有xml、txt格式的。
注意：网站地图最多放5万条链接，多了的话可以设置多个地图。
优先级别：allow (可以抓取) 级别高于Disallow (不可以抓取)
4、熊掌号的绑定：在百度注册个账号，登录百度平台绑定网站，网站绑定熊掌号，这样百度会增加对网站的信任度。
5、404页面的制作：放在网站根目录下，网站死链接自动跳转到404页面，用户手动点击跳转选择，不要自动跳转，听说这样有可能会被百度惩罚。
常见问题总结
1、网站内容不收录怎么办？
（1）网站每个页面设置个专门放不收录文章的模块，增加权重入口。
（2）已收录的文章锚文本链接到没收录的文章，权重传递增加收录几率。
（3）百度平台文章诊断把没收录的文章诊断一下，如果没问题可以增加收录。
（4）未收录的文章在首页展示一段时间，增加权重入口。
2、怎么让百度知道你的网站是干什么的？
（1）标题、关键词。描述标签出现主关键词。
（2）页面多次出现关键词，密度在5% - 8% 左右，关键词布局要自然
网站内部优化细节
一、网站选词
1.定词根 比如：seo
2.根据词根，按照需求扩业务，比如：seo培训 ; 扩需求：比如：seo优化工具
注意：
1、围绕 主词（也就是词根）扩词，这样网站的相关度高，优化起来也比较好优化
2、相同的主词，可以放在同一栏目页面优化，比如：网站推广、网络推广
二、栏目标题写法
1、专注主词+主词修饰词+品牌词后跟主词
例如：seo_seo网站优化-飞羽seo
2、专题页面写法：
标题可以写问题，描述可以写答案，吸引人悬念
标题写法：飞羽seo可以免费优化
描述写法：为了回馈这一年来新老客户的信任和推荐，因此过年国家法定节假日期间，飞羽seo免费为大家优化网站作为感谢！
三、为什么网站可以秒排名
1、标题很内容，主题集中
2、标题关键词在内容页面中的密度
四、什么样的内容页面才算一个优质的页面？
有文字、图片或视频、评论、相关内容展示等，内容种类越多页面越优质。
注意：图片占文字内容的60%最好，左右两边各空20%。
五、什么样的内容算是一个好的内容？
不通顺的内容 < 空的内容 < 伪原创内容 < 原创的内容 < 优质的原创内容
六、新站页面如何快速收录（首页收录的越快网站的优化结构基础越好，百度给出的基础评分也就越高）
1、网页打开速度（影响打开速度的有:服务器的配置、图片大小、加载的js和css）
2、标题、关键词、描述标签的设置,关键词标签选词从标题关键词组合设置
3、网站页面的总数量
总数量包括：首页+栏目页+内容页
4、网站每天跟新文章的数量越多，百度抓取的频率越高，收录的几率越高
注意：收录的文章把文章标题放在百度搜索中，出现在百度首页第一位是有效索引，不是第一位的话，只代表收录了，没建立有效索引，不参与关键词排名，只有有效索引的页面才会参与关键词排名。
5、内容质量 内容质量+数量（内容丰富字多）
七、什么样的文章页面容易建立有效索引？
1、页面内容丰富：不少于500字以上的内容+清晰的图片尺寸（水印不影响图片的浏览）+ 访客的评论内容+内容的相关文章+其他（种类越多越好）
注意：内容文章不要便宜主词，如果文章总数便宜30%，那么主词很难优化上去，因为你的网站偏离主题了。
八、总结：秒排名的7项因素
1、TDK的设置（标题标签、关键词标签、描述标签）
2、网站打开速度（百度规定网站1.5秒全部加载完会给网站一个加分）
3、页面质量（内容排版、内容原创度、图片清晰、内容丰富长度）
4、主题集中 （最好是标题里的关键词在内容页面全部有展示）
对等性（整个网站围绕一个主题词根进行延伸和扩展）
丰富性（网页内的每一个版块范围，内容尽量饱满一点，无空缺）
5、需求维度 （页面内容的多样性）
6、关键词频次（关键词的位置远比关键词的密度重要）
tdk的位置
Html前段页面的位置
H标签 > 加粗、> 超链接 > 纯文本
7、非作弊
关键词堆砌：标签关键词堆砌 内容关键词堆砌
恶意点击：不安全的点击系统，容易造成网站被百度惩罚。
链接作弊：发垃圾外链 买外链
什么是垃圾外链：一个网站大量的新闻页面，百度检测到时同一个IP
恶意广告：弹窗广告、下载信息不正确，页面电话展示太多（一个页面留的联系方式太多，百度会认为这是广告的形式）
注意：交换友情链接加分周期是3个月左右，才可以在重新换一批链接
九、总结：诊断网站的15个小细节
1、标题规范
不堆砌关键词、出现违规词
2、描述规范
描述在60个字以内，标题里的关键词出现4词左右
3、内容质量检测（原创度）
优质的原创内容所在网站的比例，比例越高，排名越容易获得
4、内容排版检测（浏览体验）
字体工整、图文并茂
5、内容丰富度检测
页面内容字数多，并且内容价值高（非常清晰的吧当前内容话题讲述明白）
6、网页广告检测
无任何弹窗广告，不影响用户体验
7、外部链接质量检测（链接质量）
外联的质量，看交换的网站是否导出的链接过多、网站是否降权
8、网页速度检测
网页打开速度在1.5秒以内会有百度加分，移动端也是
9、URL规范检测
尽量无中文，不利于搜索引擎识别
URL层级最好控制在3层左右
静态链接比动态链接好抓取，动态链接可改为伪静态链接
10、页面抓取检测
网页打开正常，并不一定百度蜘蛛也能正常打开，去百度平台看下。
网页打不开的因素：服务器配合低，或者服务器不稳定
11、网站安全检测
通过百度网站安全检测功能去检测即可
12、死链接检测
是否有打不开的页面链接，有的话七百度平台提交下
13、恶意点击检测
突然性的高流量，会引起百度的关注，如果被百度发现作弊，会引起降权
14、网站收录检测（索引）
去统计网站所有页面收录的比例，把没收录的文章去百度提交下，做下锚文本链接，首页展示下，争取收录
15、网站排名分析
统计每段时间的排名变化，并分析原因做了那些操作，不断去完善他
文章来源：飞羽优化
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先我们要知道APP的启动页和闪屏不是一个东西，启动页是用户打开产品第一眼看到的页面，闪屏是启动页之后出现的页面。
启动页是一个APP必不可少的页面，在iOS规范中，上架AppStore必须有启动页，Android系统会有1-2s的白屏，所以两个端都需要启动页。苹果官方给的解释是，为了增加APP启动时的用户体验，确实如此，当打开一个产品时，首页内容都需要一定的时间加载。
启动页的设计角度一般是品牌信息传递，建立用户与产品的认知，一般时常都在2s以内（看网速和手机性能）。启动页的设计一般不做动画效果，因为只要是动画，就会让用户感觉等待时间变长了。
闪屏是启动页后面紧接着出现的页面，当然有很多产品没有闪屏，如微信、淘宝等，因为产品的定位和运营模式不同。闪屏与启动页不同，闪屏是用来运营的，比如投放日常广告、活动运营、节日等等，大多数产品闪屏出现的时间是3s或5s，一般都提供“跳过”按钮。
闪屏的设计为了运营，所以可以适当有动画效果或者视频，目的是能够更加吸引用户，加深印象或是提高点击率。
启动页是写在安装包里面的程序，如果更换就得发版，闪屏的程序设计是从后台配置完成，所以可以满足日常更换。
对用户来讲启动页和闪屏展示的时间越短越好，那时间减少不了，就可以通过设计让用户对时间的感知变少，从而提高体验。看下图，两张图通过平滑过度，给用户的感觉是一张图在变化，这样时间上给用户的感知是变快的。
用户等待感知短
当然对于不同的产品，设计的倾向性是不一样的，比如网易云音乐，启动页是强烈的红色，然后生硬的切换到一个跟启动页没有任何视觉关联的闪屏。这样的设计形式，用户等完一个页面，又等一个页面，那就会给用户在时间上的感知是变长的。
品牌感知传递强
但是，对于一个音乐产品，渲染产品调性传递品牌，要远远大于减少用户等待时间的体验。所以，从这点来看，网易云音乐这样的设计形式，也是非常恰当的，设计应该根据产品的定位，来确定设计的倾向性。
敲黑板，划重点！ 下面的内容才是本文重点！
手机尺寸那么多，闪屏设计尺寸应该如何定义，很多APP的解决方案是使用两张不同比例的闪屏，还有一部分APP是区分系统，iOS适配一张图，Android适配一张图。
下面我以小米商城闪屏的改版为例，分享如何用一张闪屏尺寸适配所有机型，并详细介绍适配的原理。下图是改版前的闪屏，需要上传两张图，一张1080*2070（不带底部logo），另一张是720*1280（带底部logo）。
老版本闪屏需要上传两个尺寸图
两张图，设计人员就需在两个模版上进行排版设计，小米商城闪屏更换频率非常高，这样其实会付出很多时间成本。所以，我们团队尝试使用一张图适配所有机型，这其中的难点就是，找到一个合适的尺寸适配所有手机，并且闪屏内容的呈现在任意手机上都得合适，内容不能被裁剪。
先跟大家普及一下小米公司APP的设计稿尺寸，因为小米手机是Android系统，所以UI设计稿会优先适配安卓的主流手机，即1080*2340，这个尺寸接近iPhone12的比例和尺寸，切图相当于3倍图。
所以，闪屏宽度设定一定是1080px，然后高度分为两部分组成，一个是内容运营区（闪屏内容设计区域），一个是logo位，如下图所示。
蓝色部分为闪屏
logo位部分由开发写到程序中，所以闪屏页面高度要去掉logo位高度。闪屏设计尺寸即是蓝色部分，正常来看应该是主流长屏分辨率手机与现存短屏分辨率手机的平均数即可，但其实并不可取。
因为，短屏分辨率手机毕竟使用人群是少数，设计的宗旨一向都是优先考虑大多数用户。所以，定义闪屏尺寸的原则是让类似小米11、iPhone12等主流比例手机呈现的完美，短屏分辨率手机如iPhone8只要呈现的不出错即可。
以安卓主流分辨率1080*2340为例（这个比例接近iPhone12），如下图，logo位高度设定为270px，把这个图切给开发，让开发等比缩放去适配所有手机即可。
很多安卓手机底部会有一个系统高度，这个位置不可以占用，但开发可以改变颜色，所以这部分颜色可以跟启动页或闪屏颜色调成一致。页面分辨率2340减去270的logo位就是2070，这就是长屏主流手机闪屏大概要呈现的高度，然后需要用这个尺寸去兼顾短屏分辨率手机。
把短屏手机也计算出来，安卓最短的手机比例是16:9（比例等同于iOS的iPhone8），以1080*1920为例，如下图，1920同样是减去logo位的270像素等于1650。
接下来就是最关键的时刻，要用1080*2070和1080*1650两个尺寸设定闪屏的设计模版。先说一下手机的适配原理，如果一个张图片的比例和手机屏幕不一致，开发设定是撑满手机屏幕，这时手机上展示的图片就会出现上下或左右被裁剪的情况。
所以，综合两个不同比例的尺寸，短屏手机裁剪上下，长屏手机裁剪左右，然后把呈现的内容保证在不被裁剪掉的区域。
闪屏模版尺寸设定尝试
最后经过很多次的尝试，最终选用1080*1920作为闪屏的设计尺寸，向上向下适配内容的呈现都非常合适。下图是iOS和安卓手机的适配效果，向下适配16:9的手机（裁剪上下），向上适配20:9的手机（裁剪左右）。
长短屏手机闪屏适配效果
定制闪屏设计模版
模版中页面上方留了较大面积，是为了让标题内容能够呈现在长屏手机更恰当的位置上，长屏手机内容靠上，看上去不会很舒适。底部空间留的较少，因为底部再加上logo位的高度，就会让页面看起来很协调。
最终小米商城的闪屏就是用一个尺寸适配了所有分辨率的手机，思路和适配原理都已经讲清楚，如果自家的产品是优先满足iOS手机，完全可以用上面介绍的方法尝试。
敲黑板！ 下面内容可能会颠覆你对UI设计的认知！
闪屏尺寸说完了，闪屏上面还有一个“跳过”按钮，这个按钮的位置设计非常非常重要，而且大有学问，会牵扯到广告学，按钮合理的设计会让一个产品的收入倍增。
还是以小米商城的闪屏为例，之前的闪屏“跳过”按钮在页面右下角，新版我把“跳过”按钮放到了右上角，为什么？
可以肯定的是，“跳过”按钮，放在右上角，用户体验是不够好的，右下角用户操作起来才会更便捷，改为右上角其实就是为了让用户少点击。用户不去点击“跳过”按钮，那闪屏内容曝光的时间就会更长，这符合小米商城自营平台的定位，自营平台闪屏展示都是自己平台的内容。
有很多产品闪屏的“跳过”按钮，放在右下角，如微博、网易云音乐，优先满足用户体验，是因为广告的性质不同。
“跳过”按钮在右下角的产品
在广告学中有这样几个词：CPS、CPC、CPM、CPT。
了解完常见的几种广告推广方式后，我们再看一下微博和网易云音乐两款产品。他们的广告如果是CPM（曝光量）和CPT（包时间）的推广方式，那“跳过”按钮放到右下角可以提升用户体验，还不会影响推广的收入。
再来看一下脉脉和花瓣两个产品，他们的推广方式大概率是按CPC（点击率）或CPS（转化率）收费的。闪屏的“跳过”按钮放在右上角，内容的设计形式上强调并引导用户去点击广告。
“跳过”按钮在右上角的产品
聊一下脉脉和花瓣的闪屏设计，脉脉把闪屏设计成弹窗的形式，用一种骗的形式，引导用户点击假弹窗的“知道了”或关闭图标。用户的点击行为与心里目标完全不一样，这样的设计虽然能让平台获得更多的广告收入，但也损害了用户对平台的好感。
花瓣闪屏的设计较为友好，实实在在的告诉用户这是广告，你有兴趣就点“去看看”去了解，没兴趣就等一等，或点击“跳过”。花瓣这种设计形式较为适合CPS（转化率）的推广放过，因为点击了解的用户，都是对广告兴趣的精准人群。
最后总结一下文章的内容，启动页和闪屏是两个东西，通过设计可以让用户等待的时间感知更快，从而提高体验。闪屏可以用一张图适配所有大中小手机，闪屏的“跳过”按钮大有学问，合适的设计可以让平台的收入倍增。
设计从来都是用来满足商业目的的，一个小小的按钮设计，都会很大影响到平台的收入，所以UI设计任何时候都需要清楚的了解产品定位以及商业模式，这样才能有效的产出设计。
文章来源：人人都是产品经理 作者：吴星辰
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com