042021-6

这个关于文字的知识点你肯定不知道！

本周马克笔设计留学的安老师想跟大家分享一个你八成不了解关于文字颜色的知识点。

根据世界卫生组织的统计报告，全球范围内，大约有22亿人拥有视力受损（visually impaired）的问题。这其中包含了从轻度的视力问题，到重度的眼部疾病，甚至完全失明的人群。那么在这个高度电子化的时代，大量信息来源于网络，而获取这些信息需要使用屏幕进行阅读，所以紧随而来的问题就出现了，如何让视觉受损人群舒适的阅读这些信息呢？

这里就要提到WCAG，全称是Web Content Accessibility Guidlines（网页内容无障碍指南），它们是一组是网页内容更容易访问的建议，主要针对残疾人，WCAG 2.1于2018年6月成为W3C推荐标准。这个指南中给出了相关建议，可使网站内容更容易访问。遵循这些原则，web内容更易为广大残疾人士所接受，这些包括盲人和低视患者、聋人和重听人、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。而我要和大家分享就是其中关于视障碍人群的在文字用色方面的小知识。

通过在文本和背景之间提供足够的对比度，让弱视人群在不使用增强对比度的辅助技术的前提下可以较省力的阅读该文本。对于没有色盲的人，通过阅读性能评估，色相和保护度对可读性的影响很小或者没有影响。

文字颜色和背景颜色的标准分为一下几种，从上到下为不合格到最高标准：

不合格（Fail）- 文字颜色和背景颜色没有形成足够的反差
AA Large – 对于18号或以上字号的文字内容，这个级别的反差度是最低要求。反差度不低于3:1
AA – 低于18号的文字的最优级别。反差度不低于4.5:1
AAA – 对比增强，对比度不小于7:1

这里要注意的是，装饰性文字内容和品牌logo不需要考虑最小对比度问题。

那么如何知道你的文字颜色和背景颜色的对比度到底符不符合标准呢，这里推荐一个比较简单易用且直观的工具，来自Adobe Color里的“Accessibility Tools”中的对比度检查工具（Contrast Checker）。

（https://color.adobe.com/create/color-accessibility）

通过使用这个工具，你就可以轻松知道你选择的文字颜色和背景颜色是否达到了无障碍要求。比如上图中的白色文字和橙色底图。

在双AA的标准下，白色字体和橙色背景的对比为3.68:1，低于了AA的4.5:1的标准，所以我们可以看到，17号或以下字体就没有通过。

而在最严苛的AAA标准下，3.68:1的对比度远远低于最低标准7:1，所以无论是大字号还是小字号甚至是图形，都无法通过。

经常被大家吐槽的各地警方的通告蓝经过我的测试，都是可以通过AA标准的，甚至有一些还可以通过AAA标准。

再比如，很多同学喜欢使用的橙黄色背景配白色文字的情况，反而连AA标准都完全通过不了，对比度只有可怜的1.71:1。显然这种情况，甚至会给视觉正常的人也造成一定的阅读困扰，长时间阅读可能会造成视觉疲劳。

不过，在实际的操作中，大家还是要根据具体的情况而定，也不一定非要符合这个标准。比如刚提到的这种橙黄色搭配白色字体的情况，如果没有大面积使用，只是偶尔出现的话，我认为也是没有什么太大问题的。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：马克笔设计留学

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1214)

042021-6

设计万花筒｜做UI，文案也需要设计？不信你来瞧瞧

lanlanwork

在吸引用户使用产品时，存在许多分散注意力的错误，精准的提示性文案设计可以作为改善用户体验和吸引用户的工具。作为设计师，我们大部分都将注意力集中在视觉和交互上，但如何才能继续创建更有用，更吸引人且更易于使用的产品呢？这就不能不提及到常常被我们忽视的一些提示性文案，那么通过日常和工作中遇到的一些页面和大家一起聊聊那些被忽视的提示性文案设计。

1

01.前言

作为设计师，我们大部分都将注意力集中在视觉和交互上，但如何才能继续创建更有用，更吸引人且更易于使用的产品呢？这就不能不提及到常常被我们忽视的一些提示性文案，那么通过日常和工作中遇到的一些页面和大家一起聊聊那些被忽视的提示性文案设计。

“永远不要削弱语言的力量，言动于心, 心动于身”——公开演讲者Hamza Yusuf

在吸引用户使用产品时，存在许多分散注意力的错误，精准的提示性文案设计可以作为改善用户体验和吸引用户的工具。著名UX公司-尼尔森诺曼集团（Nielsen Norman Group）经过大量调研后得出用户在使用产品的过程中存在以下现象：

1、浏览页面文案是较高文化素养用户的典型行为。

2、在平均600至800字的页面上，用户只能阅读大约20％的文案。

3、简洁的文案，目标清晰的语言和可阅读的提示性文案能将产品可用性提高124％。

02. 什么是提示性文案？

它是以微观的形式，存在于弹窗、按钮、搜索等链接位置，信息性或指导性的文本，在使用产品时以提示的形式告知和帮助用户提升使用体验。

当用户采取特定操作（例如搜索产品）时，“提示性文案复制”可作为指南。它还可以建立用户对产品的信任和同理心，并与整体品牌形成更牢固的联系。

那么合理有效的提示性文案设计是：

· 清晰，简洁且易于理解

例如在一些登录注册页面我们尽量让提示性文案设计的清晰明了，易于理解。让用户可以毫不费力的理解这些文案的作用，提升用户使用体验。

· 融合产品品牌调性及语气

在设计提示文案时，最好能够从产品品牌调性和用户特性出发。

· 视觉上与整体设计浑然一体

提示性文案作为产品的一部分，在风格上应该与整体的设计保持一致，不需要过于特立独行，与整体设计浑然一体最为合适。

· 满足用户需求，回答问题或建立同理心

提示性文案设计是为了更好的帮助用户理解页面的操作逻辑，若设计改变了用户的心理与习惯，可能会增加用户的学习成本或者被用户抛弃。我们在进行设计的时候，如果要设计一些创新的操作规则，那么需要做更多的调研和测试，确保这个规则符合用户的心理。

a

03.提示性文案是如何提高用户参与度的？

有效的提示文案可以试图理解预测用户的期望，让用户感觉好像是正在与该页面进行对话，参与其中从而吸引用户并增加转化的作用。

· 要与用户产生同理心

提示性文案增添情感, 可以与用户建立更好的关系, 并有助于建立更牢固的联系。当遇到设计流程页面时也可以利用提示文案让产品的使用步骤更透明清晰，以达到同理心。

· 要做到清晰与控制

清晰明了有控制的使用提示性文案也会减少焦虑并更好地传达信息给用户。

· 透明传达信息，建立信任

由于有些产品可能引起人们对安全性和隐私的关注, 因此建立信任的提示性文案将对产品带来积极影响。

· 促使人们采取行动

好的提示性文案可以帮助用户完成任务, 提高参与度并鼓励用户走得更远, 做更多的事情。例如在很多电商APP“购物车”中会常常出现这种用来鼓励用户继续探索其他类似产品的提示性文案。

因此推动提高用户参与度，同理心、透明感以及清晰感和控制感, 都是好的提示性文案设计的宗旨，但是, 并非所有的都是好的。

04.糟糕的提示性文案的影响

在设计过程中应始终努力设计出有效的提示性文案，但是, 一定是有比没有要好吗？个人认为也是不必要的，糟糕的提示性文案甚至会破坏产品中最好的用户体验。例如以下几种情况：

· 含糊不清

· 过于啰嗦

· 无意义，产生误导

· 无同理心

…

因此糟糕的提示文案设计会误导用户在产品中采取不必要的操作, 从而使他们感到生气和困惑，甚至可能会破坏品牌对用户的忠诚度，产生本末倒置的结果，也给用户带来不佳体验。

05.结语

提示性文案设计对产品体验产生很大影响，好的提示性文案设计优点是可观的：增加用户参与度，品牌忠诚度，信任度和丝滑的产品体验。如果运用的巧妙得当，好的提示性文案可以帮助产品在竞争日益激烈的市场中脱颖而出。以上是我对于一些提示性文案设计的一点儿心得体会，欢迎与大家共同探讨。

文章中部分图片来源于网络

原文地址： 58UXD

作者：环铁艺术家

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计  、包装设计、图标定制、用户体验、交互设计、网站建设  、平面设计服务

评论(0) 浏览(1300)

032021-6

揭密可视化专家配色秘笈，你在乎的颜色远远不够

分享达人

AntV 色板是基于 Ant Design 色彩体系，并结合数据可视化特性而设计。在可视化设计中，色板的运用原则上优先保障准确性，考虑在操作指引、交互反馈上起到强化或凸显的作用。其次需兼顾色障碍群体，帮助有色盲色弱的人群也能在数据可视化中获取洞见。本文为你揭秘可视化色板的搭配种类、以及如何使用。

颜色映射原理

在数据可视化领域中，数据与颜色的映射是非常重要的一个环节。颜色有三个视觉通道，分别是色调（H）、饱和度（S）、明度（B），不同的视觉通道可以与不同的数据类型建议关联。

色调（H）：通常使用颜色中的不同色调来描述不同的分类数据，如水果品类中苹果映射为红色、香蕉映射为黄色、梨映射为绿色，将品类与色调（H）建立了关联。

饱和度（S）/明度（B）：颜色通过明暗和饱和度的共同变化来描述有序或数值型的连续数据，比如身高由低到高或由 160cm 到 180 cm 的颜色映射为由浅到深，将连续变化与颜色的明暗饱和变化建立关联。

6 大色板类型

AntV 色板以蚂蚁极客蓝为起始主色，根据不同数据类型、使用场景扩展出 6 种可视化色板类型，可完美兼容 Ant Design UI 资产。以下所有色板均通过无障碍测试校验，可放心使用。

分类色板

分类色板用于描述分类数据，如苹果、香蕉、梨，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。

用法示例

如图水果价格走势对比，使用红色代表苹果价格、蓝色代表蓝莓价格、黄色代表香蕉价格。

顺序色板

顺序色板，一般使用同一或邻近色相，通过明度和饱和度的渐变，常用来表示同一事物中的数值大小或梯度变化，如排行榜等级变化、一个国家或地区新增人口数对比、风险等级变化等。

单色顺序色板

单一色相渐变称之为单色顺序色板，人眼可识别的色彩数量 5～7 个，为保证信息的最佳识别度，尽可能的克制使用颜色数量。

邻近色顺序色板

为拉开颜色差异，可用两个或以上个色相，通过明度或饱和度渐变，颜色连续而丰富，可产生更多色彩分级，表达更多的连续数值，常用于热力图中的热度变化，通过邻近色相的差异将聚集部分突显出来

用法示例

2017 年西安居民人均消费支出，通过连续的颜色变化，可以快速感知出居住方面消费占比最大，其次食品烟酒，第三是交替通信

发散色板

对比色渐变色板，一般是两种互补色（也可以是对比色）去展现数据从一个负向值到 0 点再到正向值的连续变化区间，显示相对立的两个值的大小关系，常用于气温的冷热、海拔高低、股票涨跌等

用法示例

全国等温线图，使用发散色板表示正负值的气温变化，暖色系的橙红色容易让人联系到太阳或炽热的感受，用于高温变化，颜色越红温度越高，反之，冷色系的蓝容易让人联想到冰和寒冷的感受，用于低温变化，颜色越深温度越低

叠加色板

叠加色板，为了色尽其用的原则，将两组顺序色板通过图层叠加模式产生一组新的色板，一个颜色代表两种变量数据，常用于观察一个事物两个维度变化的相关性，如胖瘦和高矮两个维度的人数分布中，瘦且高的人群分布

用法示例

双变量映射地图，相对于单变量映射的地图，该地图形式更加新颖，十分适合用来展示两个紧密联系的变量信息。如下图所示，图中展现了美国国民人口居住密度和家庭生产总值的分布关系，纵向由浅到深的紫色映射了人口密度，横向由浅到深的蓝色映射了家庭收入水平，相交的颜色可以总体反映出人口和家庭的分布情况。可以从地图中清晰地看到，人口多且收入高的大多分布在沿海地区，人口数少且收入低的则主要分布在中部地区。

强调色板

对比突出重点或特定数据，将重点关注的数据标以高饱和度的强调色，其他普通数据标以低饱和、低明度的基本色，常用于对比重点关注事物与其他分类事物的差别，如将自家产品与竞品的对比使用

用法示例

如图某工厂历年能源消耗占比趋势对比，分别用五种不同的颜色代表五种能源，其中「天然气」为重点关注的能源类型，使用饱和度高的蓝代表「天然气」，其他能源类型着以低饱和度的分类颜色，以便关注的「天然气」能够快速被观察到，同时其他类型可作为对比参考而不会因颜色过多而产生干扰。

语义色板

色彩在地图可视化中的使用，不仅是数据信息传递的可视化通道，同时也是更深一层的文化故事的载体，用于表达意义或情感。重视用色习惯，遵循相关标准，色彩也不是都能寓意的，相当一部分图表色彩选择和感情因素无关，而是按照某种习惯来设定色彩，即所谓约定俗成，有的甚至形成来规范。如气象预警配色，红绿灯配色，股市的红涨绿跌等。

用法示例

某水产公司 2019 年的月盈利变化，使用红色表示盈利，绿色表示亏损。

8 条使用建议

我们发现，在提供官方色板的前提下，仍有用户并不是十分擅长在实际场景中应用色板，以下几条设计指引供使用时参考。

避免使用过多颜色

在实际应用中，经常会出现大量颜色使用的误区，建议高亮重要的数据（不超过 7 个），其他数据默认置灰，通过图例交互进行查看。

保持唯一映射通道

同样的数据，映射通道应当保持唯一性。例如当使用柱子高度来映射数据大小时，就不需要再使用颜色通道去映射数据。

解释你的颜色

当图表中出现不同颜色时，需要向读者解释颜色所代表的含义。

上下文保持颜色一致性

结合当前页面环境，建立视觉连续性，对于统一度量，使用同样的颜色方案，而且在整个页面（通常是仪表盘）使用时，注意保持整体颜色方案的一致性。

不同数据对应不同色板

不同的数据类型建议使用对应的色板，比如分类数据就不建议使用连续色板。

不用彩虹色环表达连续数据

不以色环顺序来表达连续的有序型或数值型数据，因为色环顺序并非人眼自然记忆，且彩虹色变化并非均衡变化，如下图中灰阶的转化，很容易看出彩虹色并不是一个连续逐渐加深的色板，因此彩虹色环并不适合展示连续数据，容易引起误解。

顺序色板选择需均衡

下图右侧“不建议”图中，第 2 、第 3 个颜色很相近，难以区分，第 3 、第 4 个颜色跳跃很大，对于均衡的连续数据表达中，容易引起数据感知的误差，均衡选色可在 PhotoShop 的拾色器中使用 Lab 模式下固定色相不变，调节 L 值进行等距取色。

为视障群体设计

AntV 色板在做无障碍验证时，得出以下几点取色建议：

分类色板选取需明暗交替

虽然正常人眼中右侧分类色板通过色相可以区分差异，但在视障人士、甚至全色盲，则主要靠颜色的明暗差异来识别不同的数据类型，因此分类色板需要注意适度的明暗交替

离散色板尽量选取蓝黄对比

一般场景中，我们常也会使用黄绿配色，黄绿对比中，黄是暖色系，绿是冷色系，同样能给到对比感受，且打破常规的蓝红对比色，给到新颖的色彩感受，但如果你的用户中视障人士占比较多，则尽量避免绿黄配色，如图为两种色板在正常人眼和红绿色盲眼中的对比效果，黄绿配色在红绿色盲眼中就失去了色彩对比，难以区分。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：Ant_Design

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1697)

032021-6

用户体验设计定义&详细案例

分享达人

一、什么是用户体验？

用户体验（User Experience，简称UE/UX）这个词是在上世纪90年代中期，由用户体验设计师唐纳德·诺曼（Donald Norman）所提出和推广。

定义：用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

二、可用性原则

可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品用户体验的核心，不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。

01 易学性

指的是用户学习如何与产品进行交互，以实现目标所花费的时间和精力，即用户能否在初次使用产品时完成简单的任务或实现用户目标。

02 效率

用户在使用产品一段时间后，能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例，用户能否快速的下载想要的东西，在同一系列中，可以快速下载更多的相关内容。

03 可记忆性

我们常说互联网是有记忆的，好的产品体验是帮助用户去记忆。用户在体验中，要对一些有意识、无意识的行为进行记忆是一个比较大的负担，如果在一些环节通过系统能帮用户记录，会降低用户的负担。比如在搜索、历史记录、浏览记录等。

04 容错性

用户在使用产品时，发生错误后，能否快速帮助用户识别和纠正错误，帮助用户从错误中恢复的能力。如常见的注册登录，当用户属于邮箱格式不对的时候，给出提示，并且告知错在哪里。如果提示语只是："请输入正确的邮箱" 用户可能会疑惑，错在哪里。

05 满意度

满意度指的是用户与设计互动产生的愉悦程度，可以是用户使用产品时流畅的交互和优秀的视觉设计，也可以是用户在产品中得到的满足感。比如sir语音交互，王者荣耀等级（满足感）

06 实用性

产品能否提供用户在完成任务时所需要用到的基本功能，例如P图类软件，用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。

07 个性化

在满足实用性的基础上针对用户提供不同场景下的功能定制，如美图秀秀，在提供图片美化的同时，针对用户不同的使用场景还提供视频剪辑、视频美容等功能。

08 可预测性

用户能够预测到下一步操作或者整个流程的交互，将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。

三、可见性原则

可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。

01 物理功能可见性

物理功能可见性是基于对象的物理外观。在视觉上，这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件，最常使用的就是播放/暂停，上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中，这就是功能可见性。

02 状态可见性

当信息或者列表过多时区分状态的展示，将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来，会极大地破坏易用性，因为人们将不得不进入一个个邮件详情页当中进行确认，才能获取到原本由徽标提供的状态信息，这样的互动非常低效且乏味。

03 步骤可见性

当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤，后面还有多少步骤，完整清晰的流程展示。如果将这些信息隐藏起来，用户会困惑当前进行到哪一步，接下来还有多少步骤。

四、可供性原则

强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素（如滚动条、命令按钮和图标等）的设计必须能够为用户提供足够清楚的建议，让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么，以及如何与它们进行交互行为（点击、长按、滑动等）

五、反馈

给用户及时、恰当的反馈，是体验设计中非常重要的一项原则；对每个用户的操作都应该有恰当的系统反馈（包含视觉、听觉、触觉）。

01 告知性

明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。

02 动作连接性

当用户产生某个动作时，给予相对应的连接反馈。如大概用户点击某个按钮时，按钮默认的外观与点击后的外观发生变化，结合现实世界的开关去思考（按下开灯）动作与反馈是连接的，即时的。

六、希克定律

希克定律，是1951年由威廉·埃德蒙·希克首先提出的，认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。

如京东筛选，在搜索结果页会将筛选条件收起，因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单，并且做好归类，用户能够更迅速的作出决定。

七、费茨定律

费茨定律，是1954 年由保罗.菲茨首次提出，在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。

T：代表完成移动所需的平均时间

A：代表光标开始/停止时间

B：代表光标移动速度

D：代表从起点到目标中心的距离

W：代表目标的尺寸

简单来说就是指：随着目标的距离增加，移动到目标的时间更长，并且随着目标的尺寸减小，选择目标的时间也会增加。

所以在界面设计当中会遵循越重要的功能，占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。

屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中，所以我们在进行产品设计的过程中，会将常用/重要的操作放置在屏幕边缘处，便于用户操作。

八、神奇数字 7 ± 2

神奇数字7±2法则是1956年由乔治·米勒所提出的，根据乔治·米勒的研究，人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。

由于人类的大脑处理信息的能力有限，大脑会将复杂信息划分成块和小的单元。如：京东和每日优鲜的分类处理。

人类短期的记忆一般一次只能记住5-9个，所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。

九、复杂守恒定律

复杂守恒定律是1984年由拉里·泰斯勒所提出的，也称作泰斯勒定律。认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。

在产品设计中，会尽量的简化界面。当功能过多时进行一个整合的处理，跳转或者滑动操作。如查看更多或者常见的汉堡导航。

十、新乡重夫：防错原则

新乡重夫认为遗忘有两种：一种是疏漏，另一种是忘却。他建议采用一些措施来预防产品的缺陷。

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；比如常见的信息输入状态，未输入置灰不可点，输入变为可点击状态。

微信拍一拍：微信在出了拍一拍功能之后，很多时候点击头像的时候会不小心拍到别人，现在的拍一拍是可以撤销的，在客户端鼠标悬浮上就可以进行撤回，移动端长按出现撤回弹窗，两分钟内有效。

微信朋友圈动态：点击返回图标会出现的弹窗，避免误操作。利用防错原则，可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。

十一、奥卡姆剃刀原理

奥卡姆剃刀定律：它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉（William of Occam，约1285年至1349年）提出。这个原理称为“如无必要，勿增实体 ”，即“ 简单有效原理 ”

01、只放置必要的元素

不必要的元素会降低设计的效率，不管是实体、视觉或者认知上，多余的设计元素，有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息，可以用「更多信息」来实现。如夸克浏览器，首页只放置重要功能搜索和几个整合内容的图标入口。

02、减少点击次数

让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件，在播放音乐之后进入其他的tab，在上面都会悬浮播放/暂停的区域。都能够随时操作。

03、“老人”规则

就是产品的易用性，如果年纪大点的人，也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验，简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内，并且抖音会根据用户的停留时长等推送用户感兴趣的内容。

04、减少“段落”个数

页面的使用率，当你想要在一屏新增很多内容时，页面的布局就会变得拥挤和区域变小，容易过于干扰用户做出选择，重要功能不够突出等。夸克浏览器首页强化了搜索功能和几个整合内容的图标入口；uc浏览器首页内容过多，当用户想要使用搜索功能时很容易被其他内容干扰。

05、给予更少的选项

前面说到的希克定律说到，当选择的数量越多，用户做决定的时间就更长。做过多的决定也是一种压力，在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示，马蜂窝根据产品属性放置了6个重要的功能入口，便于用户更快的去选择所想要的功能。

十二、设计和艺术的区别是什么？

最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是：艺术抛出问题，而设计解决问题。

我们设想一个场景，当你在艺术展厅站在一副名画面前，你所思考的是什么？是惊叹画家的画技还是整个画面给你的感觉是一种故事，你会不会思考艺术家在作画时的心情，处境，为什么要这么去画？想表达怎么样的情感？

然后我们再设想一个场景，同样在艺术展厅，你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是相机对吧？因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：左言右设

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1403)

032021-6

用户体验设计定义&详细案例

分享达人

一、什么是用户体验？

用户体验（User Experience，简称UE/UX）这个词是在上世纪90年代中期，由用户体验设计师唐纳德·诺曼（Donald Norman）所提出和推广。

定义：用户在使用产品过程中建立起来的一种纯主观感受。即用户在使用一个产品或系统之前、使用期间和使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。

二、可用性原则

可用性指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品用户体验的核心，不好的可用性会导致用户放弃使用产品。

可用性由易学性、效率、可记忆性、容错性、满意度、实用性、个性化、可预测性组成。

01 易学性

指的是用户学习如何与产品进行交互，以实现目标所花费的时间和精力，即用户能否在初次使用产品时完成简单的任务或实现用户目标。

02 效率

用户在使用产品一段时间后，能否在合理的时间完成想要达成的目标任务。这里以腾讯视频为例，用户能否快速的下载想要的东西，在同一系列中，可以快速下载更多的相关内容。

03 可记忆性

我们常说互联网是有记忆的，好的产品体验是帮助用户去记忆。用户在体验中，要对一些有意识、无意识的行为进行记忆是一个比较大的负担，如果在一些环节通过系统能帮用户记录，会降低用户的负担。比如在搜索、历史记录、浏览记录等。

04 容错性

用户在使用产品时，发生错误后，能否快速帮助用户识别和纠正错误，帮助用户从错误中恢复的能力。如常见的注册登录，当用户属于邮箱格式不对的时候，给出提示，并且告知错在哪里。如果提示语只是："请输入正确的邮箱" 用户可能会疑惑，错在哪里。

05 满意度

满意度指的是用户与设计互动产生的愉悦程度，可以是用户使用产品时流畅的交互和优秀的视觉设计，也可以是用户在产品中得到的满足感。比如sir语音交互，王者荣耀等级（满足感）

06 实用性

产品能否提供用户在完成任务时所需要用到的基本功能，例如P图类软件，用户需要对图片进行裁剪、添加滤镜、抠图、美颜、补妆、添加文字、去除水印、添加文字等操作。

07 个性化

在满足实用性的基础上针对用户提供不同场景下的功能定制，如美图秀秀，在提供图片美化的同时，针对用户不同的使用场景还提供视频剪辑、视频美容等功能。

08 可预测性

用户能够预测到下一步操作或者整个流程的交互，将会发生什么。举例淘宝的购买流程。点击购买按钮> 选择商品属性> 付款> 输入密码> 购买成功; 用户在点击购买按钮开始就能够预测到下一步或者整个流程的步骤会发生什么。

三、可见性原则

可见性是用户根据界面中可见元素确定产品可以做什么的设计原则。

01 物理功能可见性

物理功能可见性是基于对象的物理外观。在视觉上，这种类型的功能可见性使用户能够立即清楚地看到在设计界面中能干什么。例如当我们使用音乐类软件，最常使用的就是播放/暂停，上一曲/下一曲。我们就会寻找去这些图标。其次是分享、收藏、下载、评论等功能需要用到的功能展示在页面中，这就是功能可见性。

02 状态可见性

当信息或者列表过多时区分状态的展示，将重要的状态信息呈现在尽可能高的信息层级当中。如iOS信息和QQ邮箱中区分未读信息的微标。如果将这些徽标隐藏起来，会极大地破坏易用性，因为人们将不得不进入一个个邮件详情页当中进行确认，才能获取到原本由徽标提供的状态信息，这样的互动非常低效且乏味。

03 步骤可见性

当用户在执行某项任务的时候应该清晰明了的告知用户目前在什么步骤，后面还有多少步骤，完整清晰的流程展示。如果将这些信息隐藏起来，用户会困惑当前进行到哪一步，接下来还有多少步骤。

四、可供性原则

强调需要明确的视觉线索向用户展示产品可以做什么。例如用户界面中的交互元素（如滚动条、命令按钮和图标等）的设计必须能够为用户提供足够清楚的建议，让用户可以清晰地辨别出这些元素所代表的意思是什么、它们的功能是什么，以及如何与它们进行交互行为（点击、长按、滑动等）

五、反馈

给用户及时、恰当的反馈，是体验设计中非常重要的一项原则；对每个用户的操作都应该有恰当的系统反馈（包含视觉、听觉、触觉）。

01 告知性

明确告知用户当前操作发生了什么。如点击下载和下载过程给出相对应的反馈及进度条。

02 动作连接性

当用户产生某个动作时，给予相对应的连接反馈。如大概用户点击某个按钮时，按钮默认的外观与点击后的外观发生变化，结合现实世界的开关去思考（按下开灯）动作与反馈是连接的，即时的。

六、希克定律

希克定律，是1951年由威廉·埃德蒙·希克首先提出的，认为人们从数组中选择目标的时间取决于可用选项的数量。也就是当一个人所面临的选择越多，做出选择所花的时间就越多，当面临选择的数量增加，做出决定的时间也会跟着增加。

如京东筛选，在搜索结果页会将筛选条件收起，因为里面的筛选条件内容过多。用户会在当前页面选择的时间增加.将一些项目分组放入二级下单，并且做好归类，用户能够更迅速的作出决定。

七、费茨定律

费茨定律，是1954 年由保罗.菲茨首次提出，在人机交互中指的是通过图形用户界面使用鼠标或其他类型的指针从一个起始位置移动到一个最终目的所需的时间。

T：代表完成移动所需的平均时间

A：代表光标开始/停止时间

B：代表光标移动速度

D：代表从起点到目标中心的距离

W：代表目标的尺寸

简单来说就是指：随着目标的距离增加，移动到目标的时间更长，并且随着目标的尺寸减小，选择目标的时间也会增加。

所以在界面设计当中会遵循越重要的功能，占据面基会越大。重要图标的点击热区也会增大。便于用户快速点击。

屏幕外边缘和四个角部比屏幕中的其他位置都更容易被定为和选中，所以我们在进行产品设计的过程中，会将常用/重要的操作放置在屏幕边缘处，便于用户操作。

八、神奇数字 7 ± 2

神奇数字7±2法则是1956年由乔治·米勒所提出的，根据乔治·米勒的研究，人类短期的记忆一般一次只能记住5-9个。也就是为什么大多数APP底部导航为5个的原因。

由于人类的大脑处理信息的能力有限，大脑会将复杂信息划分成块和小的单元。如：京东和每日优鲜的分类处理。

人类短期的记忆一般一次只能记住5-9个，所以人们总是倾向于把一串数字拆分为多个较短的部分进行记忆。如银行卡号和手机号码等。

九、复杂守恒定律

复杂守恒定律是1984年由拉里·泰斯勒所提出的，也称作泰斯勒定律。认为每一个产品设计的过程中，都有其固有的复杂性，存在着一个临界点，超过了这个点产品设计的过程就不能再简化了，你只能将固有的复杂性从一个地方转移到另外一个地方。

在产品设计中，会尽量的简化界面。当功能过多时进行一个整合的处理，跳转或者滑动操作。如查看更多或者常见的汉堡导航。

十、新乡重夫：防错原则

新乡重夫认为遗忘有两种：一种是疏漏，另一种是忘却。他建议采用一些措施来预防产品的缺陷。

防错原则认为大部分的意外都是由设计的疏忽，而不是人为操作疏忽。因此，在设计中要有必要的防错机制；比如常见的信息输入状态，未输入置灰不可点，输入变为可点击状态。

微信拍一拍：微信在出了拍一拍功能之后，很多时候点击头像的时候会不小心拍到别人，现在的拍一拍是可以撤销的，在客户端鼠标悬浮上就可以进行撤回，移动端长按出现撤回弹窗，两分钟内有效。

微信朋友圈动态：点击返回图标会出现的弹窗，避免误操作。利用防错原则，可以避免用户重新编辑。微信当中有很多友好的体验细节。可以多多去感受。

十一、奥卡姆剃刀原理

奥卡姆剃刀定律：它是由14世纪英格兰的逻辑学家、圣方济各会修士奥卡姆的威廉（William of Occam，约1285年至1349年）提出。这个原理称为“如无必要，勿增实体 ”，即“ 简单有效原理 ”

01、只放置必要的元素

不必要的元素会降低设计的效率，不管是实体、视觉或者认知上，多余的设计元素，有可能造成失败或者其它问题。这并不意味着不能提供给用户很多的信息，可以用「更多信息」来实现。如夸克浏览器，首页只放置重要功能搜索和几个整合内容的图标入口。

02、减少点击次数

让用户通过较少的点击就能找到他们想要的东西或使用功能。如音乐类软件，在播放音乐之后进入其他的tab，在上面都会悬浮播放/暂停的区域。都能够随时操作。

03、“老人”规则

就是产品的易用性，如果年纪大点的人，也能够轻松使用所设计的产品那么是成功的。如抖音沉浸式的体验，简单的滑动就能够观看想看的内容。目前抖音的用户老年人也逐渐包含在内，并且抖音会根据用户的停留时长等推送用户感兴趣的内容。

04、减少“段落”个数

页面的使用率，当你想要在一屏新增很多内容时，页面的布局就会变得拥挤和区域变小，容易过于干扰用户做出选择，重要功能不够突出等。夸克浏览器首页强化了搜索功能和几个整合内容的图标入口；uc浏览器首页内容过多，当用户想要使用搜索功能时很容易被其他内容干扰。

05、给予更少的选项

前面说到的希克定律说到，当选择的数量越多，用户做决定的时间就更长。做过多的决定也是一种压力，在展示内容的时候要努力减少用户的思维负担。如携程和马蜂窝金刚区的内容展示，马蜂窝根据产品属性放置了6个重要的功能入口，便于用户更快的去选择所想要的功能。

十二、设计和艺术的区别是什么？

最后我们来探讨一下设计和艺术的区别是什么。我看到一句话觉得挺好的。设计和艺术的重要区别是：艺术抛出问题，而设计解决问题。

我们设想一个场景，当你在艺术展厅站在一副名画面前，你所思考的是什么？是惊叹画家的画技还是整个画面给你的感觉是一种故事，你会不会思考艺术家在作画时的心情，处境，为什么要这么去画？想表达怎么样的情感？

然后我们再设想一个场景，同样在艺术展厅，你身上带有手机和相机。你会选择用相机拍照还是用手机。答案是相机对吧？因为相机的拍照效果在任何环境下都会比手机好。这就是设计。是能够真真切切的解决用户问题的。能够去感知到的。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷作者：左言右设

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1060)

032021-6

Node.js+Vue+mysql项目实战入门之环境搭建，项目创建-附github地址

前端达人

Node进行后端开发，Vue进行前端页面的开发，实现了前后端的分离。在开发中使用Express框架可以快速地开发web应用程序。

1.安装node.js

下载对应版本的，网址：https://nodejs.org/en/download/；

进行傻瓜式安装：最后点击install即可；

安装完成后出现完成界面，cmd去命令列界面测试，如图：出现版本号说明安装成功。

如果安装的路径不是默认路径，那么需要执行下面步骤，这样在之后进行一些包的安装时会保存到自定义位置而不是默认盘符。

首先在安装路径下新建两个文件夹【node_global】及【node_cache】，如下：

然后cmd执行命令




    

        

            

            

        

        

            
                npm config set prefix "E:\Program Files\node_js\node_global"
            

        

    

    

        

            

            

        

        

            
                npm config set cache "E:\Program Files\node_js\node_cache"

接着配置环境变量，系统变量里新建：

用户变量里的改为E:\Program Files\node_js\node_global；

最后可以测试一下是否安装到了新的路径里：可以看到成功了

npm install express -g ，其中 -g 表示全局，不加会安装在当前路径C:/users/dell下

2.安装Visual Studio Code

下载：https://code.visualstudio.com/docs/?dv=win；

傻瓜式安装：

3.Visual Studio Code中搭建并运行NodeJS环境

首先安装express `npm install express -g和`express应用生成器 `npm install express-generator -g；`

`然后打开终端，如图`

使用express创建一个项目：express mytest

结果报错：express : 无法加载文件 E:\Program Files\node_js\node_global\express.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/
go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
+ express mytest
+ ~~~~~~~
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess

那就解决错误先：解决方法如图

这样就创建成功了。

这里应该是先新建一个文件夹来存放项目，然后进入指定位置。默认的话就放到c盘了。

测试

在终端执行如下代码

然后浏览器输入http://localhost:3000/

4.创建Vue项目

首先安装webpack、vue脚手架到全局：命令行执行 :npm install webpack -g，npm install vue vue-cli -g

接下来在终端里，进入项目存放文件夹cd 路径，vue init webpack 项目名，创建项目完成，如图；

接下来安装项目依赖，如图；

进入项目，运行项目；

浏览器输入http://localhost:8080进行访问，如下图。

github地址附上：https://vuejs-templates.github.io/webpack

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：csdn 作者：狼丶宇先生

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1756)

032021-6

从零开始部署到上线：手把手教你搭建属于自己的个人博客网站！

前端达人

现在是互联网逐渐发展，已经出现了很多可以供自己写博客的网站，大家可以在上面发表自己的文章，供自己记录或者是供他人阅读。但是，可不可以自己搭建一个只属于自己的个人博客网站呢？这篇文章就带你从0开始搭建一个自己的个人博客网站，并部署到属于自己服务器。这里有一点要说的是，没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。

博客框架Hexo介绍：

Hexo是一个快速，简介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成一个静态网页展示我们发布的文章，同时也提供了大量精美的博客主题供我们使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUkzFJqh-1622032930743)(pictures/image-20210524011732509.png)]

Hexo博客框架的优点

速度极快：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
插件和可扩展性：这个也是hexo很强大的一个地方，强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

Hexo博客框架搭建：

我们使用Centos7系统作为演示，使用其他linux系统也是可以的，只需要更换为对应Linux版本的软件安装命令即可。

1.安装Git

直接使用yum安装即可，在命令行输入 yum -y install git

完成之后输入git version 查看是否安装成功，如果显示git版本信息即为成功，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVJMnq6W-1622032930745)(pictures/image-20210526142911469.png)]

2.安装Node.js

Node.js是一种运行在服务端的JavaScript，是一个基于Chrome JavaScript运行时建立的一个平台。

Hexo基于Node.js，所以安装Node.js是必须的一个操作，安装步骤如下：

2.1：下载安装包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    
        1

2.2：解压缩软件包并配置环境变量：

#解压 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移动到/usl/lcoal目录下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #创建软链接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加环境变量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #让环境变量生效  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

2.3：测试是否安装成功：

在命令行输入node -v 和 npm -v，若是显示出了版本号，即为安装成功：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47pt856h-1622032930748)(pictures/image-20210526143600103.png)]

3.安装并使用Hexo

Hexo的安装较为简单，使用如下命令安装

npm install -g hexo-cli #这里有一点要注意的就是，npm的源是在国外的，访问可能会很慢，这里可以换成我们国内的源进行安装加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    
        1
    

    
        2
    

    
        3

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEjeb2E6-1622032930750)(pictures/image-20210526143826327.png)]

3.1：初始化Hexo

上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化

#这个文件名字可以自己指定，之后会在当前目录下生成对应文件夹 hexo init <文件名字> cd 文件名字 npm install  


    
        1
    

    
        2
    

    
        3
    

    
        4

可以看到安装好之后的一个目录结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raE9WJQX-1622032930751)(pictures/image-20210526144057199.png)]

目录文件说明：

_config.yml：网站的配置信息，您可以在此配置大部分的参数。

package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

scaffolds：模版文件夹。当您新建文章时Hexo 会根据 scaffold 来建立文件Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes：主题文件夹。Hexo 会根据主题来生成静态页面。

查看hexo的版本以及对应的数据：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1B3aWxn9-1622032930752)(pictures/image-20210526144143747.png)]

3.2生成静态文件，并开启Hexo服务：

进入到了hexo的安装目录之后，使用hexo generate来生成静态文件，也可以使用hexo g，之后使用hexo server（可以写成hexo s）命令启动服务，操作如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YuvIWOuI-1622032930753)(pictures/image-20210526144957135.png)]

可以看到4000端口的服务已经开启，之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9ELcFFg-1622032930753)(pictures/image-20210526145217729.png)]

4.初步使用Hexo：

使用前，我们对我们的站点进行一个配置，也就是我们创建的hexo目录的_config.yml文件，可以修改的部分介绍如下：

# Site
title: QIMING.INFO #博客网站的标题
subtitle:          #博客网站的副标题
description:       #你的网站描述
keywords:          #网站的关键词  
author:            #作者的名字
language:          #博客网站使用的语言
timezone:          #网站时区  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8

我自己的修改如下供大家参考，这里的修改没有太大的限制：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0cTYgQ1-1622032930754)(pictures/image-20210526145734893.png)]

4.1：开始使用Hexo发布自己的第一篇博客！

执行下面的目录创建一篇新文章：

hexo new post <文章标题>  


    
        1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

这里我创建了一篇标题为First_Blog的博客，创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件

4.2:编辑文章

进入到上面说的那个目录下可以看到我们创建的博客文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuPREJLQ-1622032930756)(pictures/image-20210526150208204.png)]

直接使用vim或者vi就可以对我们的博客文章进行编辑了，打开此First_Blog.md后可以看到—分隔的区域，这部分主要对文章进行标注变量，如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GOYKjBSu-1622032930756)(pictures/image-20210526150326264.png)]

title：标题

tage：标签

categories：分类

date：时间

这些标注大家在-----区域可以进行使用

4.3：发布文章

输入如下命令，生成静态网页，静态网页会存放在public文件下

之后就可以去浏览器访问了！可以看到我们发布的文章已经成功在浏览器显示，到这里个人博客网站就已经成功搭建了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZpSg9fl-1622032930757)(pictures/image-20210526150824449.png)]

5.主题的选择：

主题网站：https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择，选择喜欢的主题，在hexo目录下的themes文件夹下使用git clone下载主题，之后再配置文件_config.yml把theme后面修改成下载的主题的名字，之后运行hexo clean ，hexo g即可看到生效的主题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eN5cZDmN-1622032930757)(pictures/image-20210526161641366.png)]

将Hexo部署上线到服务器：

如果是有服务器的小伙伴，也可以将Hexo部署到服务器供全网访问，服务器的购买这里就不多说，阿里云跟腾讯云上面对于学生也有较为优惠的价格。部署到服务器的话，就需要将上面的全部操作，在你的服务器系统上面执行，之后我们使用Nginx（反向代理服务器）进行部署。

Nginx安装：

Nginx是一款高性能的 HTTP 和反向代理服务器，这里我们采用编译安装的方式,按照下面的指引依次执行命令

#安装gcc编译环境： yum install -y gcc-c++ #安装zlib-devel库： yum install -y zlib-devel #安装OpenSSL密码库： yum install -y openssl openssl-devel #安装pcre正则表达式库：编译nginx，需要需要指定pcre的路径，这里我们选择安装稳定版本的。 下载地址：https://ftp.pcre.org/pub/pcre/ #选择对应的版本下载下来之后上传到我们的服务器，也可以使用wget直接下载 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14

下载编译安装nginx：

nginx下载官网：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #编译指定安装路径需要进入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  这是支持https的一个模块，就是可以使用https：//这样去访问。 make && make install #编译安装  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

启动nginx服务：

#启动： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式启动  -c #测试： /usr/local/nginx/sbin/nginx -t #这个用于测试nginx的语法是否有问题 显示is successful即为成功。 #关闭： /usr/local/nginx/sbin/nginx -s stop #继续输入以下命令使Nginx开机自动启动： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

之后我们需要配置服务器公网ip，编辑配置文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TOR7RVwA-1622032930758)(pictures/image-20210526174027780.png)]

之后再重启nginx服务，开启hexo服务，这个时候使用公网的ip就可以访问到我们的hexo服务了！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

部分借鉴自：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1157)

032021-6

都2021年了，再不学ES6你就out了 —— 一文搞懂ES6

前端达人

JS干货分享 —— 一文搞懂ES6

导语：ES6是什么？用来做什么？

导语：ES6是什么？用来做什么？

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版
虽然15年就有正式版本了，但是国内普遍商用是在2018年之后去了，甚至到现在有很多前端仍然搞不懂ES6（都2021年了，兄dei~）
ES6 的出现主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念
目前存在少数低版本浏览器的 JavaScript 是 ES5 版本，大多数的浏览器已经支持 ES6
ES6提供了大量的语法糖，让你写代码的时候简直不要太爽！
你必须要知道的是：现在各企业都普遍使用，不会ES6意味着你很难找到工作，上班了你连别人的代码都看不懂

1. let 与 const

1.1 let 与 var

let：ES6新增，用于声明变量，有块级作用域
var：ES5中用于声明变量的关键字，存在各种问题（例如：红杏出墙~）
如果你的代码里还存在 var，那你的良心就大大的坏了！

var存在的问题：

 // 1.声明提升 // 此处会正常打印，但这是错误的（属于先上车后买票了！） console.log(name); var name = "大帅比"; // 2. 变量覆盖 var demo = "小明"; var demo = "小红"; // 此处会打印小红，这也是错误的（属于套牌车，违法的啊，兄弟） // 同一个项目中，发生变量覆盖可能会导致数据丢失以及各种不可预知的bug，原则上来说：变量不能重名 console.log(demo) // 3. 没有块级作用域 function fn2(){ for(var i = 0; i < 5; i++){ // do something } // 此处会正常打印出 i 的值，这是错误的 // i是定义在循环体之内的，只能在循环体内打印，当前现象叫做红杏出墙！！！ console.log(i); } fn2(); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22

let不会存在上述问题：

 // 1. 不会存在声明提前 // 此处会报错（这里必须报错，原则上来说不能先上车后买票） console.log(name); let name = "大帅比"; // 2. 不会有变量覆盖 let demo = "小明"; let demo = "小红"; // 此处会报错（不能使用套牌车！）告诉你已经定义了此变量。避免了项目中存在变量覆盖的问题 console.log(demo) // 3. 有块级作用域 function fn2(){ for(let i = 0; i < 5; i++){ // do something } // 此处会报错，无法打印，防止红杏出墙！！！ // i是定义在循环体之内的，循环体外当然无法打印  console.log(i); } fn2(); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21

const

const 声明一个只读的常量，一旦声明，常量的值就不能改变
一般用于全局变量
通常变量名全部大写（请按照规则来，不要乱搞，容易出事情）

const PI = "3.1415926"; 


    
        1

2. 解构赋值

解构赋值是对赋值运算符的扩展
针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
代码简洁且易读，语义更加清晰明了，方便了复杂对象中数据字段获取（简而言之：用起来很爽！）

在这里插入图片描述

2.1 用在数组上

let [a, b, c] = [1, 2, 3]; // a = 1，b = 2，c = 3 相当于重新定义了变量a,b,c，取值也更加方便 // , = 占位符 let arr = ["小明", "小花", "小鱼", "小猪"]; let [,,one] = arr; // 这里会取到小鱼 // 解构整个数组 let strArr = [...arr]; // 得到整个数组 console.log(strArr); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

2.2 用在对象上

let obj = { className : "卡西诺", age: 18 } let {className} = obj; // 得到卡西诺 let {age} = obj; // 得到18 // 剩余运算符 let {a, b, ...demo} = {a: 1, b: 2, c: 3, d: 4}; // a = 1 // b = 2 // demo = {c: 3, d: 4} 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

3. 模板字符串

模板字符串相当于加强版的字符串，用反引号 ``
除了作为普通字符串，还可以用来定义多行字符串，可以在字符串中加入变量和表达式

3.1 普通字符串

// 普通字符串 let string = "hello"+"小兄弟"; // hello小兄弟 // 如果想要换行 let string = "hello'\n'小兄弟" // hello // 小兄弟 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

3.2 模板字符串

let str1 = "穿堂而过的"; let str2 = "风"; // 模板字符串 let newStr = `我是${str1}${str2}`; // 我是穿堂而过的风 console.log(newStr) // 字符串中调用方法 function fn3(){ return "帅的不行！"; } let string2= `我真是${fn3 ()}`; console.log(string2); // 我真是帅的不行！ 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13

4. ES6 函数（升级后更爽）

4.1 箭头函数

箭头函数是一种更加简洁的函数书写方式
箭头函数本身没有作用域（无this）
箭头函数的this指向上一层，上下文决定其this
基本语法：参数 => 函数体

a. 基本用法

let fn = v => v;
//等价于
let fn = function(num){
 return num;
}
fn(100);  // 输出100 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

b. 带参数的写法

let fn2 = (num1,num2) => {
 let result = num1 + num2;
 return result;
}
fn2(3,2);  // 输出5 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

c. 箭头函数中的this指向问题

箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。在函数定义的时候就已经决定了

function fn3(){
  setTimeout(()=>{
    // 定义时，this 绑定的是 fn3 中的 this 对象
    console.log(this.a);
  },0)
}
var a = 10;
// fn3 的 this 对象为 {a: 10}，因为它指向全局: window.a
fn3.call({a: 18});  // 改变this指向，此时 a = 18 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9

d. 箭头函数适用的场景

当我们代码里存在这样的代码：let self = this;
需要新建变量去保存this的时候
案例如下：

let Person1 = {
    'age': 18,
    'sayHello': function () {
      setTimeout(()=>{
        console.log(this.age);
      });
    }
};
var age = 20;
Person1.sayHello();  // 18 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10

4.2 函数参数的扩展

1. 默认参数

// num为默认参数，如果不传，则默认为10 function fn(type, num=10){ console.log(type, num); } fn(1); // 打印 1，10 fn(1,2); // 打印 1，2 （此值会覆盖默认参数10） 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

需要注意的是：只有在未传递参数，或者参数为 undefined 时，才会使用默认参数，null 值被认为是有效的值传递。

2. 不定参数

// 此处的values是不定的，且无论你传多少个 function f(...values){ console.log(values.length); } f(1,2); // 2 f(1,2,3,4); // 4 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

在这里插入图片描述

5. Class类

class (类)作为对象的模板被引入，可以通过 class 关键字定义类
class 的本质是 function，同样可以看成一个块
可以看作一个语法糖，让对象原型的写法更加清晰
更加标准的面向对象编程语法

5.1 类的定义

// 匿名类 let Demo = class { constructor(a) { this.a = a; } } // 命名类 let Demo = class Demo { constructor(a) { this.a = a; } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12

5.2 类的声明

class Demo { constructor(a) { this.a = a; } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5

请注意，类不能重复声明
类定义不会被提升，必须在访问前对类进行定义，否则就会报错。
类中方法不需要 function 关键字。
方法间不能加分号

5.3 类的主体

公共属性（依然可以定义在原型上）

class Demo{} Demo.prototype.a = 2; 


    
        1
    

    
        2

实例属性

class Demo { a = 2; constructor () { console.log(this.a); } } 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

方法：constructor

class Demo{ constructor(){ console.log('我是构造器'); } } new Demo(); // 我是构造器 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6

如果不写constructor，也会默认添加

5.4 实例化对象

class Demo { constructor(a, b) { this.a = a; this.b = b; console.log('Demo'); } sum() { return this.a + this.b; } } let demo1 = new Demo(2, 1); let demo2 = new Demo(3, 1); // 两者原型链是相等的 console.log(demo1._proto_ == demo2._proto_); // true demo1._proto_.sub = function() { return this.a - this.b; } console.log(demo1.sub()); // 1 console.log(demo2.sub()); // 2 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20

6. Map()

6.1 Maps 和 Objects 的区别

一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算

6.2 Map中的key

// 1. key是字符串 let myMap = new Map(); let keyString = "string"; myMap.set(keyString, "和键'string'关联的值"); // keyString === 'string' myMap.get(keyString); // "和键'string'关联的值" myMap.get("string"); // "和键'string'关联的值" // 2.key是对象 let myMap = new Map(); let keyObj = {}, myMap.set(keyObj, "和键 keyObj 关联的值"); myMap.get(keyObj); // "和键 keyObj 关联的值" myMap.get({}); // undefined, 因为 keyObj !== {} // 3. key也可以是函数或者NaN  


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19

6.3 Map 的迭代

// 1.使用 forEach let myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); // 0 = zero , 1 = one myMap.forEach(function(value, key) { console.log(key + " = " + value); }, myMap) // 2. 也可以使用 for...of 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11

6.4 Map 与 Array的转换

letkvArray = [["key1", "value1"], ["key2", "value2"]]; // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象 let myMap = new Map(kvArray); // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组 let outArray = Array.from(myMap); 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7

6.5 关于map的重点面试题

请谈一下 Map和ForEach 的区别（问到map，必定问到此题）

详细解析：

forEach()方法不会返回执行结果，而是undefined
map()方法会得到一个新的数组并返回
同样的一组数组，map()的执行速度优于 forEach()（map() 底层做了深度优化）

性质决定了两者应用场景的不同

forEach() 适合于你并不打算改变数据的时候，而只是想用数据做一些事情（比如存入数据库）

let arr = ['a', 'b', 'c', 'd']; arr.forEach((val) => { console.log(val); // 依次打印出 a,b,c,d }); 


    
        1
    

    
        2
    

    
        3
    

    
        4

map() 适用于你要改变数据值的时候，它更快，而且返回一个新的数组

let arr = [1, 2, 3, 4, 5]; let arr2 = arr.map(num => num * 2).filter(num => num > 5); // arr2 = [6, 8, 10]

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。


    
        


    
    
        

    
    
        部分借鉴自：csdn  
    
    
        分享此文一切功德，皆悉回向给文章原作者及众读者.
    

    
        免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
    

    
        蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

评论(0) 浏览(1230)

032021-6

app界面赏析+图标分享 ——— 北京蓝蓝设计移动端UI设计资源分享（二十六）

前端达人

App界面设计对于设计师而言一直是盛久不衰的话题，尤其是如今越来越多的流量转移到了移动平台，使得更多的UI设计师涌入移动端领域，甚至出现了市场饱和的言论，对于从事移动端的UI设计师来讲，充满压力的同时又面临无限机遇，唯有不断的学习才能滋生出源源不断的设计灵感，站稳脚跟。

摹客想在这方面给各位设计师朋友做点什么，除了提供简单好用的设计工具，我们也整理了非常多的优秀设计案例，希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题，我们以月为单位，整理了国内外设计师的优秀APP界面设计案例，我们是搬运工，更是好设计的传达者，希望你会喜欢。

接下来为大家分享精美的app UI设计案例：

--手机appUI设计--

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

更多精彩文章：

评论(0) 浏览(1643)

032021-6

网站推广方式有哪些

lanlanwork

网站推广方式有：1、搜索引擎推广；2、电子邮件推广； 3、资源合作推广；4、信息发布推广；5、病毒性营销，即利用用户之间的主动传播，让信息像病毒那样扩散，从而达到推广的目的；6、快捷网址推广；7、网络广告推广；8、综合网站推广。

本文操作环境：Windows7系统，Dell G3电脑。

网站推广的八种基本方式

1、搜索引擎推广

搜索引擎推广是指利用搜索引擎、分类目录等具有在线检索信息功能的网络工具进行网站推广的方法。由于搜索引擎的基本形式可以分为网络蜘蛛型搜索引擎（简称搜索引擎）和基于人工分类目录的搜索引擎（简称分类目录），因此搜索引擎推广的形式也相应地有基于搜索引擎的方法和基于分类目录的方法，前者包括搜索引擎优化、关键词广告、竞价排名、固定排名、基于内容定位的广告等多种形式，而后者则主要是在分类目录合适的类别中进行网站登录。随着搜索引擎形式的进一步发展变化，也出现了其他一些形式的搜索引擎，不过大都是以这两种形式为基础。

搜索引擎推广的方法又可以分为多种不同的形式，常见的有：登录免费分类目录、登录付费分类目录、搜索引擎优化、关键词广告、关键词竞价排名、网页内容定位广告等。

从目前的发展趋势来看，搜索引擎在网络营销中的地位依然重要，并且受到越来越多企业的认可，搜索引擎营销的方式也在不断发展演变，因此应根据环境的变化选择搜索引擎营销的合适方式。

2、电子邮件推广

以电子邮件为主要的网站推广手段，常用的方法包括电子刊物、会员通讯、专业服务商的电子邮件广告等。

基于用户许可的Email营销与滥发邮件（Spam）不同，许可营销比传统的推广方式或未经许可的Email营销具有明显的优势，比如可以减少广告对用户的滋扰、增加潜在客户定位的准确度、增强与客户的关系、提高品牌忠诚度等。根据许可Email营销所应用的用户电子邮件地址资源的所有形式，可以分为内部列表Email营销和外部列表Email营销，或简称内部列表和外部列表。内部列表也就是通常所说的邮件列表，是利用网站的注册用户资料开展Email营销的方式，常见的形式如新闻邮件、会员通讯、电子刊物等。外部列表Email营销则是利用专业服务商的用户电子邮件地址来开展Email营销，也就是电子邮件广告的形式向服务商的用户发送信息。许可Email营销是网络营销方法体系中相对独立的一种，既可以与其他网络营销方法相结合，也可以独立应用。

3、资源合作推广

通过网站交换链接、交换广告、内容合作、用户资源合作等方式，在具有类似目标网站之间实现互相推广的目的，其中最常用的资源合作方式为网站链接策略，利用合作伙伴之间网站访问量资源合作互为推广。

每个企业网站均可以拥有自己的资源，这种资源可以表现为一定的访问量、注册用户信息、有价值的内容和功能、网络广告空间等，利用网站的资源与合作伙伴开展合作，实现资源共享，共同扩大收益的目的。在这些资源合作形式中，交换链接是最简单的一种合作方式，调查表明也是新网站推广的有效方式之一。交换链接或称互惠链接，是具有一定互补优势的网站之间的简单合作形式，即分别在自己的网站上放置对方网站的LOGO或网站名称并设置对方网站的超级链接，使得用户可以从合作网站中发现自己的网站，达到互相推广的目。交换链接的作用主要表现在几个方面：获得访问量、增加用户浏览时的印象、在搜索引擎排名中增加优势、通过合作网站的推荐增加访问者的可信度等。交换链接还有比是否可以取得直接效果更深一层的意义，一般来说，每个网站都倾向于链接价值高的其他网站，因此获得其他网站的链接也就意味着获得了于合作伙伴和一个领域内同类网站的认可。

4、信息发布推广

将有关的网站推广信息发布在其他潜在用户可能访问的网站上，利用用户在这些网站获取信息的机会实现网站推广的目的，适用于这些信息发布的网站包括在线黄页、分类广告、论坛、博客网站、供求信息平台、行业网站等。信息发布是免费网站推广的常用方法之一，尤其在互联网发展早期，网上信息量相对较少时，往往通过信息发布的方式即可取得满意的效果，不过随着网上信息量爆炸式的增长，这种依靠免费信息发布的方式所能发挥的作用日益降低，同时由于更多更加有效的网站推广方法的出现，信息发布在网站推广的常用方法中的重要程度也有明显的下降，因此依靠大量发送免费信息的方式已经没有太大价值，不过一些针对性、专业性的信息仍然可以引起人们极大的关注，尤其当这些信息发布在相关性比较高。

5、病毒性营销

病毒性营销方法并非传播病毒，而是利用用户之间的主动传播，让信息像病毒那样扩散，从而达到推广的目的，病毒性营销方法实质上是在为用户提供有价值的免费服务的同时，附加上一定的推广信息，常用的工具包括免费电子书、免费软件、免费FLASH作品、免费贺卡、免费邮箱、免费即时聊天工具等可以为用户获取信息、使用网络服务、娱乐等带来方便的工具和内容。如果应用得当，这种病毒性营销手段往往可以以极低的代价取得非常显著的效果。关于病毒性营销的详细介绍及案例分子请参考本文作者的《网络营销基础与实践》第2版(http://www.wm23.com)一书相关内容，网上营销新观察《120种网站推广实用方法》系列连载文章中也会有适当介绍。

6、快捷网址推广

即合理利用网络实名、通用网址以及其他类似的关键词网站快捷访问方式来实现网站推广的方法。快捷网址使用自然语言和网站URL建立其对应关系，这对于习惯于使用中文的用户来说，提供了极大的方便，用户只需输入比英文网址要更加容易记忆的快捷网址就可以访问网站，用自己的母语或者其他简单的词汇为网站“更换”一个更好记忆、更容易体现品牌形象的网址，例如选择企业名称或者商标、主要产品名称等作为中文网址，这样可以大大弥补英文网址不便于宣传的缺陷，因为在网址推广方面有一定的价值。随着企业注册快捷网址数量的增加，这些快捷网址用户数据可也相当于一个搜索引擎，这样，当用户利用某个关键词检索时，即使与某网站注册的中文网址并不一致，同样存在被用户发现的机会。

7、网络广告推广

网络广告是常用的网络营销策略之一，在网络品牌、产品促销、网站推广等方面均有明显作用。网络广告的常见形式包括：BANNER广告、关键词广告、分类广告、赞助式广告、Email广告等。BANNER广告所依托的媒体是网页、关键词广告属于搜索引擎营销的一种形式，Email广告则是许可Email营销的一种，可见网络广告本身并不能独立存在，需要与各种网络工具相结合才能实现信息传递的功能，因此也可以认为，网络广告存在于各种网络营销工具中，只是具体的表现形式不同。将网络广告用户网站推广，具有可选择网络媒体范围广、形式多样、适用性强、投放及时等优点，适合于网站发布初期及运营期的任何阶段。

8、综合网站推广

除了前面介绍的常用网站推广方法之外，还有许多专用性、临时性的网站推广方法，如有奖竞猜、在线优惠卷、有奖调查、针对在线购物网站推广的比较购物和购物搜索引擎等，有些甚至采用建立一个辅助网站进行推广。有些网站推广方法可能别出心裁，有些网站则可能采用有一定强迫性的方式来达到推广的目的，例如修改用户浏览器默认首页设置、自动加入收藏夹，甚至在用户电脑上安装病毒程序等，真正值得推广的是合理的、文明的网站推广方法，应拒绝和反对带有强制性、破坏性的网站推广手段。

文章来源：中文网

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计  、包装设计、图标定制、用户体验、交互设计、网站建设  、平面设计服务

评论(0) 浏览(1305)