用户体验地图与服务蓝图常常会一起出现。因为，用户体验地图更聚焦于用户在前台端到端的体验，而服务蓝图更聚焦于由表面到核心后台业务及如何交付和幕后的操作，并且能与用户体验强关联起来。
服务蓝图是以公司角度展示的可视化界面工具。在每个阶段为用户提供的服务，且在服务过程中会涉及到的不同人员和不同的条件。并且在公司内，所有的人员都可以客观的理解并使用（所需各方的服务和支持）。
服务蓝图直观上同时从 4 个主要方面展示：
用户行为
用户在所有阶段中的体验节点。这里需要注意的是：一定要清晰的罗列出，用户在什么触点下做的什么行为。这样才能更好的进行技术（方案）评估及更好的服务用户。
前台
前台是围绕着与用户产生交互行为关系所展开的具体内容，内容可包含员工、数字设备、技术方案，也就是用户能看见的服务和能接触到的服务。
后台
后台是给前台提供技术方案支持的存在。
支持
支持过程包含内部人员和外部人员履行的服务步骤和互动行为。
优化产品/业务主要从 4 个关键点出发：
1. 找出服务流程的崩溃点或断点
对于线下智能服务，我们应该遵守一个基本原则：在一个完整的流程中，不应该出现「用户不知道要做什么和需要未知等待的事情」。
怎么找到崩溃点和断点？
主要从「田野调查」和「深度访谈」获得。可根据实际的项目展开定性研究。
2. 新服务、新体验该怎么执行
在更新体验流程的时候，一定要基于全新的角度出发。把自己想象成：我是一名刁钻的用户，你需要喂我吃饭的境界，最好还要帮我把饭粒粒分离。
还是以无人零售商店举例：前期准备节点
如（新服务）：在购物流程说明的物料中，把关键字圈出并划重点，在前期推广的时候安排店员进行随时讲解。
如（新体验）：把之前的定制便宜的物料，换成高逼格的、贴纸换成超大号的。
该怎么执行：根据蓝图规划设计“高峰值”的体验点，对购物流程说明的物料进行资源倾斜。
3. 衡量服务过程的每一步是否达标
衡量的标准：数据角度出发/用户购物速度/体验流程的衔接度等等
如（漏斗数据）：开业前期宣传来了 100 人，100 人阅读了购物流程，留下了多少人，在留下人中，多少人是在 10 秒内完成阅读进店体验（X 人….X 秒/分钟…）
4. 定义服务的“高峰值”
在不同的阶段设计用户的心理峰值曲线。
峰值和终值，是由 2002 诺贝尔奖得主、心理学家丹尼尔·卡尼曼提出的。他发现大家对体验的记忆由两个核心因素决定: 第一个是体验最高峰的时候，无论是正向的最高峰还是负向的最高峰，一定是能记得住的。第二个是结束时的感觉。这就是峰终定律（Peak-End Rule）
举个栗子：宜家购物
宜家会在每个阶段给与用户不同的情感体验（我特别喜欢那个冰淇淋，如果你也是的话文章末尾点个赞呗）。
那么如何在蓝图上体现增值的点？主要从以下 4 个方面：
1. 时间：服务质量再高也会随着时间的消耗而消耗。
服务蓝图中的一步可能需要 5 秒，也可能需要 5 分钟，所以在顶部增加的时间能帮助大家更好的理解这个服务。
2. 衡量标准：服务的成功或价值需要一些体验因素来衡量。
这些因素是用户在心里判断服务是成功还是失败的关键时刻。比如，等待时间。
3. 情绪表达：对某些服务来说，理解用户的情绪状态是非常必要的。
比如，用户注册时，突然手机断网了也需要纳入考量因素。
注释说明：在内部讨论时，将说明的重点用 icon 的形式标记出来
#完整的服务蓝图
企业的资源是有限的，你不可能在所有点都达到用户的预期或者给用户全程的超高体验 。所以，需要做的是，在服务蓝图上配置资源来制造用户体验，使用户拥有一个美好的峰值和令人回味的终值，并且全程不突破用户的底线。
服务蓝图的结构要素，实际上定义了服务传递系统的整体规划，包括服务的设置、服务能力的规划。服务蓝图不是一个人的事情，在服务环节中的每个人都必须把“用户满意”作为自己的服务标准。服务蓝图提供了一个全局观点。服务蓝图也可以平衡业务需求和用户需求。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：优设 作者：七月Xavier
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
但是，究竟如何才能结合网页/产品特色和用户的真实需求， 将页面视觉内容层级化， 从而提供更加优质的用户体验，实现与用户的互动， 最终促成产品购买呢？下面小编就结合最新且具有极佳视觉层次感的网页设计实例分析和介绍视觉内容组织技巧，以及在原型化这些网页设计的过程中（结合小编最爱的一款又快又简单的原型工具Mockplus）需要注意的原型设计技巧：
1.利用界面元素尺寸大小建立层级结构
界面元素（例如文字，图片或形状等）尺寸越大，越突出，越容易吸引用户的注意。所以，在具体的网页界面设计中，设计师可以通过有梯度的尺寸变化，创建页面信息的层级关系。当然内容重要性上，也应该是与尺寸大小成正比的（即越大越重要）。
如图，利用文字的尺寸大小，体现网页信息的层级。
注意：尺寸大小也要控制在用户能够接受的范围内
太大，能够展示的内容有限。太小，易读性差，也会比较繁杂。
原型设计技巧：
在利用Mockplus (一款具有丰富组件库和图标库的原型工具)创建网页原型时，绝大部分的组件都是可以简单通过宽高属性或拖拉边框两种方式调整其尺寸，轻松创建直观的层次结构。
如图，Mockplus允许用户简单通过宽高属性或拖拉边框的方式调整组件尺寸大小。
2.利用界面元素明暗，阴影以及透明度的不同，体现简单层级
如白底黑字般，同类元素，同一色彩，不同的明暗，阴影以及透明度，也可体现简单的层级关系。当然，在没有过多颜色的参与下，不同文字，图片等多种的页面元素结合透明度，阴影以及明暗，也可使整款设计极具简约风和层次感。（点击链接更多的简约风网页设计技巧）
如图，文字明暗，结合尺寸变化，让页面层级更加清晰简约：
原型设计技巧：
而在这一方面，小编发现Mockplus提供了专门透明度属性，可以根据层级设计需求，修改属性数值进行设置。
如若，需要添加元素阴影，也可轻松通过组件的重叠实现。
如图，“图片”与“形状”组件的组合，实现阴影的添加。
3.利用色彩，划分页面层级
色彩，作为设计师最常使用的视觉层次工具，也为他们创建极富层级感的网页设计发挥着举足轻重的作用。而具体的设计技巧，大家可以参考以下几点：
首先，色彩明亮的页面元素更容易从相对柔和的元素中脱颖而出。如图：
如图，明亮的红色和黄色更易从相对较柔和的粉色背景中脱颖而出。
而且，某些色彩，尤其是某些主题配色方案的选择，对于确定网页的整体基调，吸引用户注意，作用也非常明显。例如，蓝色，一般代表平静祥和，适合一些日常事物管理类软件选择。而红色，则代表热情喜气，适合一些节日相关购物促销类软件选择。
如图，利用红色突出网页促销信息。
其次，色彩饱和度的梯度变化，也可体现直观而丰富的层次结构。
同一色彩，饱和度的梯度变化，也可帮助展现网站元素的层次结构。如图：
最后，色彩模块，对于体现界面元素的逻辑关系，作用也是显而易见
存在同一逻辑关系的各个页面元素就近放置在同一色彩模块，可以让页面组织结构更加清晰，易于用户快速查看相关内容。
如图，利用色彩模块，更直观地划分功能区。
原型设计技巧：
而这一方面，Mockplus提供了非常强大的色彩选择器，设计师们可以简单点击实现色彩的选择和添加。其色彩收藏功能，也为以后复用和保持整款设计配色的一致性提供了可能。
当然，结合“形状”组件，为页面添加丰富的功能色块，以及添加“鼠标悬停时”或“点击时”的简单色彩交互状态，也不是难事。
如图，添加色块划分界面功能结构。
4.利用页面布局，展现网页层级结构
页面布局也是设计师们常用的视觉工具之一。一方面，同一网站，内部各个页面可以根据软件或产品展示内容需求，采用多样的布局模式，增加页面的多变性和可读性。另一方面，也可直接在不同页面采用重复的页面布局，方便帮助用户形成一定的阅读习惯，快速有效的查询需要的信息。
而具体单个页面的布局模式，大家可以尝试以下的方式实现：
*利用网格划分不同页面模块
网格是公认的划分页面功能模块的工具之一。而它在组织界面视觉内容方面，作用也不可小视。加之，结合各个网格的色彩变化，也能使整个页面更加炫酷直观。如下图：
*利用位置不同体现逻辑关系
同一逻辑关系（比如同类，从属，因果等）或相近/相关的元素放在同一或并列的网页位置或模块内，更易于用户浏览所需页面信息。
当然，每个逻辑关系内，结合大小标题和列表进行展示，层级关系会更加深入清晰。
*利用点线
网页设计中，设计师不仅可以直接使用点线标出需要强调的内容，还可以利用点线划分页面板块和布局。
如图，通过位置的不同体现内容之间的逻辑关系。同时，利用线条划分页面结构和布局。
*利用对齐方式的不同
文字，图片以及相关元素的对齐方式，也是体验不同层级结构的重要工具。
总之，页面布局也可帮助设计师们创建更具美感和层次感的网页设计。
原型设计技巧：
在使用Mockplus时，设计师可简单使用“快速格子+自动填充”的功能组合，实现界面网格的轻松添加。而且，在具体的设计过程中，对齐方式，标尺以及参考线等工具的使用，也可使网页布局设计更加简便快捷。
如图，利用Mockplus的快速格子和自动填充功能制作网页网格，划分界面功能结构。
5.利用留白和间距，突出界面视觉内容
留白的巧妙运用，能够非常有效地突出页面信息。而页面内部元素之间，保持适当的间距，让彼此之间的相互联系而不“拥挤杂乱”，也是吸引用户注意的不错策略。如图：
6.利用对比，凸显网页层级结构关系
以上所提及的各种视觉组织工具，例如尺寸，色彩，明暗，间距等等，同类或不同类之间的鲜明对比，也可以让页面视觉上更加美观而丰富，同时体现元素之间的结构层次关系。
如图，利用色彩的强烈对比，突出页面层级。
此外，页面元素的相互叠加，清晰度，以及细节展示程度的对比，也能有效地凸显网页内容的重要性层级。
如图，靠前的图片和文字应该更加重要，清晰，细节也应更丰富，从而方便用户识别读取，避免层次混乱。
7.采用不同的界面风格，打造独特的网页视觉层级
当然，并不是说设计师就必须通过以上的设计工具展示网页重要性层级结构。实际上，结合设计师特有创意，独特纹理（texture），图形或图像元素等，打造出具有设计师独特风格的视觉层级，也会是不错的尝试。如下图：
总之，不管是否使用以上的设计工具，结合设计师创意，打造独具一格的视觉层级风格，都是不错的设计理念。
原型设计技巧：
而在这一点上，Mockplus提供了很多优质功能，帮助设计师随心设计，并简单快捷的原型化，测试和迭代这些天马行空的创意。
比如，其团队协作和团队管理功能，方便设计师更加高效地完成设计。其8种演示和分享方式，例如导出图片，HTML以及演示包等等，为设计师根据切实需要，选择适当的方式测试和分享相关设计提供了便利。
此外，其组件样式库，也为保存和分享需要的组件样式并随时复用提供了可能。
8.分析用户需求和网页浏览模式，优化页面内容和位置
在进行网页界面层级结构化的过程中，并不是毫无章法，盲目的随意添加或突出某个部分，而是需要分析用户行为，根据用户需求等级进行相应结构层次的划分。否则，再怎么赋有层次感，用户也会因为找不到需要的东西，莞尔离开。
此外，除了根据用需求决定哪些内容需要放在最紧要，最突出的位置，以吸引用户。同时还需要根据用户浏览网页时的阅读模式，分析重要内容的页面位置。
根据美国著名网站设计工程师Nielsen Norman Group研究表示，用户总是在网页浏览中惯用“F”或“Z”型阅读模式，即用户常常是从左到右，开头结尾详细阅读，而中间部分则根据网页或文章大小标题结构，选择性阅读的模式。如下图：
那么，网页设计中，设计师就需要注意页面首尾内容的趣味性和实用性，以及中间主体部分注意大小标题简洁明了，建立清晰的框架层次结构。
总之，无论是用户行为画像，还是用户浏览模式分析，最终都是希望能够根据用户需求，更加合理的安排和分布页面内容，直观清晰，易识别。
9.其他设计工具
而其它视觉设计工具，例如界面文本方面，文本字体，排版，对齐方式等等，也可突出页面的层级关系。
原型设计技巧：
如若设计师希望通过网页文本的尺寸，字体，颜色，排版以及对齐方式等实现框架结构的构建时，Mockplus的“单行文字”和“多行文字”组件就可以轻松帮助实现。而且，适当的结合一定的交互设计，也可使整款设计更具吸引力。
结语：
当然，层次结构化不仅能让网页更加直观清晰，赏心悦目。而且，具有一定局限性的Android 或iOS app，例如页面尺寸的限制，设备屏幕的限制，响应与否的限制等等，更需要清晰的层次结构，让页面摆脱混乱繁杂，吸引更多用户点击使用。而这方面，也同样适用以上所有设计技巧。
总之， 无论如何， 及时地将各种设计想法，通过一款实用且强大的原型工具（比如以上介绍到的Mockplus）, 转化成直观可视的原型，更进一步的测试和迭代，才是创建真正美观实用，深受用户喜爱的web/app的必经之道。
总之，希望以上介绍的相关层次结构设计技巧和原型设计技巧能对你有所启发。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每当我看到一个漂亮，优雅并且简洁美观的界面，就会忍不住保存下来。现在，我已经收集了100多个美不胜收的UI 界面。在一次次观摩，欣赏和学习后，我发现这些界面有很多共同点。可究竟是什么让我对它们一见钟情呢？现在我找到了答案，是色彩。
本文中，结合自身经历，我总结了一些UI 设计配色技巧。虽然它们不能像魔术一样让你摇身一变成为最优秀的UI设计师，但是我保证，这些为你量身打造的UI 设计配色技巧，定会让你受益匪浅。
1. 色彩的魔力
色彩是会说话的，甚至可以像语言一样强大。回想以下，每当你初见一个网站或产品，给你留下第一印象的是什么呢？是视觉外观，而视觉外观很大程度上是取决于色彩运用。
那么，在UI设计中，色彩究竟可以做些什么？
1）反映品牌的内涵和品质
颜色可以为品牌设定基调。 CCICOLOR的一项研究表明，用户在评估一款在线商品时，只需花费短短90秒，而判断的依据高达62％至90％将取决于配色方案。
2）实现更佳的用户体验
色彩的有效运用能提升整体美感，提供更优的阅读体验，创造清晰和谐的风格。
3）影响购买决策
根据Kissmetrics的说法，产品的视觉外观是影响消费者购买决策的首要因素。此外，QuickSprout的研究也表明，90％的产品评估都与颜色有关。Neil Patel曾写到，“颜色在你购买特定产品的原因中占据85％的分量”。正因如此，颜色已成为当今重要的营销手段之一。
2. 色彩的基本概念
色彩被长久的文化生活赋予了很多约定俗成的含义和寓意。每种色彩都形成了自己独特的语言和象征。解读色彩的语言，请看下表：
3. UI 设计配色技巧
1） 色彩使用也讲究“天时地利人和”
存在即合理，没有哪一个色彩本身就是丑陋和不具备美感的，只能说，如果我们错误的使用了色彩，那么它的美一旦被破坏，就只剩下丑陋和别扭了。
想象一下，如果麦当劳大叔使用比较沉闷的灰色和黑色而不是明快的黄色和红色，你还对他们的炸鸡充满饥肠辘辘的感觉吗？女人喜欢穿着黑色礼服搭配鲜艳口红参加派对，为什么？因为这样会让她们看起来性感迷人。
不同的颜色传达不同的含义和感觉。如何明智地进行选取和搭配呢？这里请注意5点：选取合适的颜色，运用于合适的设计场景，注意时间变化，关注目标用户，明确想要达到的目的。
这里请认真查看上图，明确颜色的意义。但如果你非要冒险追求独一无二的设计，那么祝您好运。
2）留心蓝色
为什么专门谈蓝色？蓝色不是海洋天空的专属色，蓝色也是UI 设计的青睐色。
看看你常用的一些比较有名的APP或者网站，比如Facebook，Safari以及办公软件等等。有什么发现呢？是的，它们的界面都是蓝色，各种层次的蓝色。
有研究表明，蓝色是唯一一种让女性和男性都钟爱的颜色。蓝色几乎无处不在，大自然中，各网站的UI界面，服饰衣物等，蓝色随处可见。包括我此刻写入文章的Microsoft Word，界面也是蓝色的。
蓝色无疑是一种安全的颜色，它能最大程度上获得用户的信任并被广泛接受，蓝色可以说是UI配色中的典型例子。如果你的UI界面没有更好的选择，请用蓝色。
3）背景色和元素之间的色彩变化技巧
看看以下的界面：
（来源）
这里暂且不谈这又是关于蓝色的UI界面，让我们专注于它的色彩变化。主题颜色是蓝色，其他元素是较暗的蓝色和更明亮的蓝色。整体看上去，各层次的颜色平衡和谐且又脉络清晰。
怎么做到自然而又极具美感的色彩变化？
只是一个简单的黄金法则：通过降低亮度和增加饱和度可以使色彩变得更深；通过增加亮度和降低饱和度来使色彩变得更浅。
4）色彩组合的黄金比例——（6：3：1）规则
在设计时，色彩组合必不可免。组合颜色很容易，但组合后如何避免色彩混乱和累赘？如何既能够不显得单调又展示设计感？
记住二个原则：
第一个：6：3：1规则
60％+ 30％+ 10％的比例是为了平衡颜色。这个公式能创造出一种平衡的感觉，并能提供更佳的用户体验，可以让用户的实现从一个点舒缓的移动到另一个点。
第二个：最多3个原色
这个规则与黄金（6：3：1）规则相匹配。这是避免混乱并保持平衡的最佳办法。
5）颜色组合和互补
提供和谐的配色方案时，需要注意些什么？在这个过程中需要考虑以下方面：
第一， 色调
您可以在色环上生成单个“色度”的许多变体。通过添加白色，黑色和灰色来生成不同的色调。
实现平衡色调，最简单的方案是单色（单色）方案。
第二， 对比
颜色的不同对比可以唤起不同的情感反应。色轮上相对的两种颜色可以提供最高的对比度，比如黑色和白色。强烈的对比度可以让人集中精力，并且产生紧张的心情; 柔和的对比度则适用于轻松、休闲的UI设计。
注意：对比的使用不要过火，这样容易使用户产生困扰。
6）黑白色搭配不过时
黑色是所有中性色中最强的，而白色是最常用的背景颜色。黑色是一个很好的选择，有种高端和永恒的感觉，而白色可以带给用户自由，宽敞和透气的感觉。如上所述，黑色和白色也是最大的对比色，如果合理的使用黑色配合白色，会营造出一种优雅的氛围。黑白色的搭配主要用于网站UI界面。
7）从自然和艺术中获得灵感
自然与艺术是灵感的主要源泉。抬头看看天空，你会发现蓝色发挥到淋淋尽致的经典模样。从大自然中获得的配色灵感可以使您的设计更加切合用户的审美，非常自然，不带刻意的痕迹。而艺术是对自然的直接反映，是非常宝贵的资源，值得好好利用。
8）颜色心理学 – 避免性别误区
或许天生如此，女人不喜欢灰色，橙色和棕色。她们钟爱蓝色，紫色和绿色。而男人不喜欢紫色，橙色和棕色。男人喜欢蓝色，绿色和黑色。只要记住，当你的产品目标用户群是男性时，选择能传达男性气概的色彩。如果你把运动类App的界面使用了女性色彩，结果可想而知。
还有一个误区，人们以为粉色是女性的喜爱，但结果也许会让你大跌眼镜。
4. 工具和模板
这里我总结了一些有助于UI配色的工具和模板，希望对您有所帮助：
1）Coolors.co
Coolors.co是挑选颜色的好工具。只需锁定所选颜色并按空格即可生成调色板，还提供了锁定部分色卡再次生成颜色的功能。包括HEX、HSB、RGB、CMYK等四种色彩模式。
2）Mockplus
Mockplus是一款非常方便的UI / UX设计工具，其启动页面加入了配色精美的示例项目和模板，可直接导入桌面客户端。其编辑器中，可对组件进行多样的色彩设置和编辑，内部也包含完整的颜色选择器，支持导入图片和GIF，如果您是要在原型设计过程中产出精美的UI 界面，Mockplus能满足您的需求。
3）Paletton
Paletton有点类似于Kuler，但又不仅限于5个色调。当您已经拥有原色并想要使用其他色调时，Paletton将会是您很好的选择，它可以创建协同色彩组合工作，是强大的UI调色板。
4）Check my Color
Check my Color是一款可以用于检查所有DOM元素的前景和背景颜色组合的工具，也是一款能够检查不同网页自己的颜色亮度和对比度差异的工具。
5）Chinaz
该网站提供了丰富的配色资源，包括在线调色板，网页常用色彩，web安全色以及网页颜色选择器，会使您UI 配色的一个很好的帮助。建议对色彩运用比较初级的设计师可以做一个参考。
注意：可用性是关键
创建华丽的UI界面永远不是最终的目标。提供卓越的用户体验，为用户的生活增添快乐和幸福才是我们设计的目的。因此，在UI 设计配色上，每位UI设计师应该记住，界面应该是符合高度实用和并且清晰明了的。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
本文从零开始，逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解，通过这个项目，可以系统的了解react技术栈的主要知识，避免搭建一次后面就忘记的情况。
代码库：https://github.com/teapot-py/react-demo
首先关于主要的npm包版本列一下：
思考一下webpack到底做了什么事情？其实简单来说，就是从入口文件开始，不断寻找依赖，同时为了解析各种不同的文件加载相应的loader，最后生成我们希望的类型的目标文件。
这个过程就像是在一个迷宫里寻宝，我们从入口进入，同时我们也会不断的接收到下一处宝藏的提示信息，我们对信息进行解码，而解码的时候可能需要一些工具，比如说钥匙，而loader就像是这样的钥匙，然后得到我们可以识别的内容。
回到我们的项目，首先进行项目的初始化，分别执行如下命令
mkdir react-demo // 新建项目文件夹
cd react-demo // cd到项目目录下
npm init // npm初始化
引入webpack
npm i webpack --save
touch webpack.config.js
对webpack进行简单配置，更新webpack.config.js
const path = require('path');
module.exports = {
entry: './app.js', // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 定义输出目录
filename: 'my-first-webpack.bundle.js' // 定义输出文件名称
}
};
更新package.json文件，在scripts中添加webpack执行命令
"scripts": {
"dev": "./node_modules/.bin/webpack --config webpack.config.js"
}
如果有报错请按提示安装webpack-cli
npm i webpack-cli
执行webpack
npm run dev
如果在项目文件夹下生成了dist文件，说明我们的配置是没有问题的。
安装react相关包
npm install react react-dom --save
更新app.js入口文件
import React from 'react
import ReactDom from 'react-dom';
import App from './src/views/App';
ReactDom.render(<App />, document.getElementById('root'));
创建目录 src/views/App，在App目录下，新建index.js文件作为App组件，index.js文件内容如下：
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (<div>App Container</div>);
}
}
export default App;
在根目录下创建模板文件index.html
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
</head>
<body>
<div id="root"></div>
</body>
</html>
到了这一步其实关于react的引入就OK了，不过目前还有很多问题没有解决
Babel是一个工具链，主要用于在旧的浏览器或环境中将ECMAScript2015+的代码转换为向后兼容版本的JavaScript代码。
安装babel-loader，@babel/core，@babel/preset-env，@babel/preset-react
npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D
更新webpack.config.js
module: {
rules: [
{
test: /\.js$/, // 匹配.js文件
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
根目录下创建并配置.babelrc文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
配置HtmlWebPackPlugin
这个插件最主要的作用是将js代码通过
npm i html-webpack-plugin -D
webpack新增HtmlWebPackPlugin配置
至此，我们看一下webpack.config.js文件的完整结构
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './index.html',
filename: path.resolve(__dirname, 'dist/index.html')
})
]
};
执行 npm run start，生成 dist文件夹
当前目录结构如下
可以看到在dist文件加下生成了index.html文件，我们在浏览器中打开文件即可看到App组件内容。
webpack-dev-server可以极大的提高我们的开发效率，通过监听文件变化，自动更新页面
安装 webpack-dev-server 作为 dev 依赖项
npm i webpack-dev-server -D
更新package.json的启动脚本
“dev": "webpack-dev-server --config webpack.config.js --open"
webpack.config.js新增devServer配置
devServer: {
hot: true, // 热替换
contentBase: path.join(__dirname, 'dist'), // server文件的根目录
compress: true, // 开启gzip
port: 8080, // 端口
},
plugins: [
new webpack.HotModuleReplacementPlugin(), // HMR允许在运行时更新各种模块，而无需进行完全刷新
new HtmlWebPackPlugin({
template: './index.html',
filename: path.resolve(__dirname, 'dist/index.html')
})
]
redux是用于前端数据管理的包，避免因项目过大前端数据无法管理的问题，同时通过单项数据流管理前端的数据状态。
创建多个目录
下面我们来通过redux实现一个计数器的功能
安装依赖
npm i redux react-redux -D
在actions文件夹下创建index.js文件
export const increment = () => {
return {
type: 'INCREMENT',
};
};
在reducers文件夹下创建index.js文件
const initialState = {
number: 0
};
const incrementReducer = (state = initialState, action) => {
switch(action.type) {
case 'INCREMENT': {
state.number += 1
return { ...state }
break
};
default: return state;
}
};
export default incrementReducer;
更新store.js
import { createStore } from 'redux';
import incrementReducer from './reducers/index';
const store = createStore(incrementReducer);
export default store;
更新入口文件app.js
import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';
ReactDom.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
更新App组件
import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';
class App extends React.Component {
constructor(props) {
super(props);
}
onClick() {
this.props.dispatch(increment())
}
render() {
return (
<div>
<div>current number： {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>
</div>
);
}
}
export default connect(
state => ({
number: state.number
})
)(App);
点击旁边的数字会不断地+1
redux-saga通过监听action来执行有副作用的task，以保持action的简洁性。引入了sagas的机制和generator的特性，让redux-saga非常方便地处理复杂异步问题。
redux-saga的原理其实说起来也很简单，通过劫持异步action，在redux-saga中进行异步操作，异步结束后将结果传给另外的action。
下面就接着我们计数器的例子，来实现一个异步的+1操作。
安装依赖包
npm i redux-saga -D
新建src/sagas/index.js文件
import { delay } from 'redux-saga'
import { put, takeEvery } from 'redux-saga/effects'
export function* incrementAsync() {
yield delay(2000)
yield put({ type: 'INCREMENT' })
}
export function* watchIncrementAsync() {
yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}
解释下所做的事情，将watchIncrementAsync理解为一个saga，在这个saga中监听了名为INCREMENT_ASYNC的action，当INCREMENT_ASYNC被dispatch时，会调用incrementAsync方法，在该方法中做了异步操作，然后将结果传给名为INCREMENT的action进而更新store。
更新store.js
在store中加入redux-saga中间件
import { createStore, applyMiddleware } from 'redux';
import incrementReducer from './reducers/index';
import createSagaMiddleware from 'redux-saga'
import { watchIncrementAsync } from './sagas/index'
const sagaMiddleware = createSagaMiddleware()
const store = createStore(incrementReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchIncrementAsync)
export default store;
更新App组件
在页面中新增异步提交按钮，观察异步结果
import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';
class App extends React.Component {
constructor(props) {
super(props);
}
onClick() {
this.props.dispatch(increment())
}
onClick2() {
this.props.dispatch({ type: 'INCREMENT_ASYNC' })
}
render() {
return (
<div>
<div>current number： {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>
<div>current number： {this.props.number} <button onClick={()=>this.onClick2()}>点击2秒后+1</button></div>
</div>
);
}
}
export default connect(
state => ({
number: state.number
})
)(App);
观察结果我们会发现如下报错：
这是因为在redux-saga中用到了Generator函数，以我们目前的babel配置来说并不支持解析generator，需要安装@babel/plugin-transform-runtime
npm install --save-dev @babel/plugin-transform-runtime
这里关于babel-polyfill、和transfor-runtime做进一步解释
Babel默认只转换新的JavaScript语法，而不转换新的API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用 babel-polyfill，为当前环境提供一个垫片。
Babel转译后的代码要实现源代码同样的功能需要借助一些帮助函数，而这些帮助函数可能会重复出现在一些模块里，导致编译后的代码体积变大。
Babel 为了解决这个问题，提供了单独的包babel-runtime供编译模块复用工具函数。
在没有使用babel-runtime之前，库和工具包一般不会直接引入 polyfill。否则像Promise这样的全局对象会污染全局命名空间，这就要求库的使用者自己提供 polyfill。这些 polyfill一般在库和工具的使用说明中会提到，比如很多库都会有要求提供 es5的polyfill。
在使用babel-runtime后，库和工具只要在 package.json中增加依赖babel-runtime，交给babel-runtime去引入 polyfill 就行了；
详细解释可以参考
Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。
这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。
但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。
这个时候，可以采用Babel Preset。
可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
点击按钮会在2秒后执行+1操作。
在web应用开发中，路由系统是不可或缺的一部分。在浏览器当前的URL发生变化时，路由系统会做出一些响应，用来保证用户界面与URL的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。而react-route则是与react相匹配的前端路由。
引入react-router-dom
npm install --save react-router-dom -D
更新app.js入口文件增加路由匹配规则
import App from './src/views/App';
import ReactDom from 'react-dom';
import React from 'react';
import store from './src/store';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const About = () => <h2>页面一</h2>;
const Users = () => <h2>页面二</h2>;
ReactDom.render(
<Provider store={store}>
<Router>
<Switch>
<Route path="/" exact component={App} />
<Route path="/about/" component={About} />
<Route path="/users/" component={Users} />
</Switch>
</Router>
</Provider>
, document.getElementById('root'));
更新App组件，展示路由效果
import React from 'react';
import { connect } from 'react-redux';
import { increment } from '../../actions/index';
import { Link } from "react-router-dom";
class App extends React.Component {
constructor(props) {
super(props);
}
onClick() {
this.props.dispatch(increment())
}
onClick2() {
this.props.dispatch({ type: 'INCREMENT_ASYNC' })
}
render() {
return (
<div>
<div>react-router 测试</div>
<nav>
<ul>
<li>
<Link to="/about/">页面一</Link>
</li>
<li>
<Link to="/users/">页面二</Link>
</li>
</ul>
</nav>
<br/>
<div>redux & redux-saga测试</div>
<div>current number： {this.props.number} <button onClick={()=>this.onClick()}>点击+1</button></div>
<div>current number： {this.props.number} <button onClick={()=>this.onClick2()}>点击2秒后+1</button></div>
</div>
);
}
}
export default connect(
state => ({
number: state.number
})
)(App);
点击列表可以跳转相关路由
至此，我们已经一步步的，完成了一个简单但是功能齐全的react项目的搭建，下面回顾一下我们做的工作
麻雀虽小，五脏俱全，希望通过最简单的代码快速的理解react工具链。其实这个小项目中还是很多不完善的地方，比如说样式的解析、Eslint检查、生产环境配置，虽然这几项是一个完整项目不可缺少的部分，但是就demo项目来说，对我们理解react工具链可能会有些干扰，所以就不在项目中加了。
后面会新建一个分支，把这些完整的功能都加上，同时也会对当前的目录结构进行优化。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：csdn 作者：郑清
原文链接：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在与客户的沟通中，聆听了许多建议，学习到了很多知识，也收到过赞美与批评，在经过千锤百炼过后 总结了一点点经验
首先：
框架选择
网站css框架选择（简洁，节约成本，快速开发）
对于一些简单静态网站，展示类网站项目，达到快速开发建站，而又节约成本人力的情况下 选择一些用于css库的框架最为合适，
1.Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
预处理工具 虽然可以直接使用 Bootstrap 提供的 CSS 样式表，但是不要忘记，Bootstrap 的源码是采用最流行的 CSS 预处理工具
一个框架、多种设备。 你的网站和应用能在 Bootstrap 的帮助下通过同一份源码快速、有效地适配手机、平板和 PC 设备，这一切都是 CSS 媒体 查询（Media Query）的功劳。
功能完备 Bootstrap 提供了全面、美观的文档，你能在这里找到关于普通 HTML 元素、HTML 和 CSS 组件以及 jQuery 插件方面的所有详细文档。
Bootstrap 是最受欢迎的 CSS 框架，被认为是拥有最好的响应性的CSS框架。专为前端开发而设计，有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。
2.layui
开源模块化前端 UI 框架
开源模块化前端 UI 框架
由职业前端倾情打造，面向全层次的前后端开发者，易上手开箱即用的 Web UI 组件库
Layui 是一款采用自身模块规范编写的情怀型前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。
3.Semantic-UI
Semantic 是一个开发框架，可以使用人性化的 HTML 帮助创建漂亮的响应式布局。Semantic UI 旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读，更容易理解。
4.Pure
Pure 非常轻量级，经过压缩后不过 3.8KB。这是一个特别为移动端考虑的框架，为了压缩大小，每一行代码都经过仔细考量。当然如果你不使用框架给出的全部模块，体量还可以更小。
5.Skeleton
Skeleton 如其名字，非常小巧，设计简约，麻雀虽小五脏俱全。网格系统，文本，表单，按钮，列表，表格，媒体查询等功能面面俱到。非常适合快速创建简约网站的需求。
快速搭建
为客户节省时间成本， 并满足客户快速建站的需求，开发过程中 使用到css模块化,html也应简洁实用。
在我们最初学习写页面的时候，大家都学过怎么去写 css，也就以下几种情况：
我们在不断摸索中，逐渐形成了以编写内嵌样式和外部样式为主要的编写习惯。
读到这里大家肯定有所疑问，为什么不建议使用行内样式？
使用行内样式的缺点
然后我们继续剖析一下，为什么不建议使用导入样式？
经测试，在 css 中使用 @import 会有以下两种情况：
1、在 IE6-8 下，@import 声明指向的样式表并不会与页面其他资源并发加载，而是等页面所有资源加载完成后才开始下载。
2、如果在 link 标签中去 @import 其他 css，页面会等到所有资源加载完成后，才开始解析 link 标签中 @import 的 css。
使用导入样式的缺点 - 导入样式，只能放在 style 标签的第一行，放其他行则会无效。 - @import 声明的样式表不能充分利用浏览器并发请求资源的行为，其加载行为往往会延后触发或被其他资源加载挂起。 - 由于 @import 样式表的延后加载，可能会导致页面样式闪烁。
随着时间的不断发展，我们逐渐发现，编写源生的 css 其实并不友好，例如：源生的 css 不支持变量，不支持嵌套，不支持父选择器等等，这些种种问题，催生出了像 sass/less 这样的预处理器。
预处理器主要是强化了 css 的语法，弥补了上文说了这些问题，但本质上，打包出来的结果和源生的 css 都是一样的，只是对开发者友好，写起来更顺滑。
随着前端工程化的不断发展，越来越多的工具被前端大佬们开发出来，愿景是把所有的重复性的工作都交给机器去做，在 css 领域就产生了 postcss。
postcss 可以称作为 css 界的 babel，它的实现原理是通过 ast 去分析我们的 css 代码，然后将分析的结果进行处理，从而衍生出了许多种处理 css 的使用场景。
常用的 postcss 使用场景有：
随着 react、vue 等基于模块化的框架的普及使用，我们编写源生 css 的机会也越来越少。我们常常将页面拆分成许多个小组件，然后像搭积木一样将多个小组件组成最终呈现的页面。
但是我们知道，css 是根据类名去匹配元素的，如果有两个组件使用了一个相同的类名，后者就会把前者的样式给覆盖掉，看来解决样式命名的冲突是个大问题。
为了解决这个问题，产生出了 CSS 模块化的概念。
你如果遇到如上问题，那么就很有必要使用 css 模块化。
BEM 的意思就是块（block）、元素（element）、修饰符（modifier）。是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 css 类对其他开发者来说更加透明而且更有意义。
BEM 的命名规范如下：
/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */ .block { } /* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */ .block__element { } /* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */ .block--modifier { }通过 bem 的命名方式，可以让我们的 css 代码层次结构清晰，通过严格的命名也可以解决命名冲突的问题，但也不能完全避免，毕竟只是一个命名约束，不按规范写照样能运行。
CSS Modules 指的是我们像 import js 一样去引入我们的 css 代码，代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的 css 样式。
并且 CSS Modules 在打包的时候会自动将类名转换成 hash 值，完全杜绝 css 类名冲突的问题。
使用方式如下：
1、定义 css 文件。
.className { color: green; } /* 编写全局样式 */ :global(.className) { color: red; } /* 样式复用 */ .otherClassName { composes: className; color: yellow; } .otherClassName { composes: className from "./style.css"; }2、在 js 模块中导入 css 文件。
import styles from "./style.css"; element.innerHTML = '<div class="' + styles.className + '">'; 3、配置 css-loader 打包。
CSS Modules 不能直接使用，而是需要进行打包，一般通过配置 css-loader 中的 modules 属性即可完成 css modules 的配置。
// webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use:{ loader: 'css-loader', options: { modules: { // 自定义 hash 名称 localIdentName: '[path][name]__[local]--[hash:base64:5]', } } } ] } }; 4、最终打包出来的 css 类名就是由一长串 hash 值生成。
._2DHwuiHWMnKTOYG45T0x34 { color: red; } ._10B-buq6_BEOTOl9urIjf8 { background-color: blue; }CSS in JS，意思就是使用 js 语言写 css，完全不需要些单独的 css 文件，所有的 css 代码全部放在组件内部，以实现 css 的模块化。
CSS in JS 其实是一种编写思想，目前已经有超过 40 多种方案的实现，最出名的是 styled-components。
使用方式如下：
import React from "react"; import styled from "styled-components"; // 创建一个带样式的 h1 标签 const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // 创建一个带样式的 section 标签 const Wrapper = styled.section` padding: 4em; background: papayawhip; `; // 通过属性动态定义样式 const Button = styled.button` background: ${props => (props.primary ? "palevioletred" : "white")}; color: ${props => (props.primary ? "white" : "palevioletred")}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; // 样式复用 const TomatoButton = styled(Button)` color: tomato; border-color: tomato; `; <Wrapper> <Title>Hello World, this is my first styled component!</Title> <Button primary>Primary</Button> </Wrapper>; 可以看到，我们直接在 js 中编写 css，案例中在定义源生 html 时就创建好了样式，在使用的时候就可以渲染出带样式的组件了。
除此之外，还有其他比较出名的库：
最后放一张总结好的图。
下一篇我们讲一下主流js框架 与js开发
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
部分借鉴自：知乎 作者：孟思行
原文链接：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
这篇文章很好，提供了一种“以用户为中心”把自己和项目组成员随时假定为一个用户的身份，去思考，提出一系列问题，把这些问题编号，去一一解决，注重用户体验，以此为基本框架，严格遵守，一旦设立不增加临时的多余的功能，不把没有用户故事的界面元素放在界面上，保证了精简的内容围绕确立的框架中，井井有条。这篇文章值得看十遍。
随着大数据的兴起，数据价值的不断挖掘，图表作为数据呈现与分析的有效手段，正扮演着越来越重要的角色。我们在进行B端平台设计时也在思考：如何让图表清晰的传达信息，同时带来美观的视觉感受。
为了达到清晰传达和视觉美观的目标，我们结合实际项目，进行大量探索及思考，梳理总结了一套适用于B端后台类产品的图表设计思路及方法，涵盖了曲线图、柱状图、饼图、雷达图、漏斗图等各类常用图表类型。
图表视觉层级
图表能够承载大量数据信息，同时视觉元素较多，如果只是凭借设计师的审美喜好进行视觉设计，没有整体信息读取考量，可能会导致重要信息未能凸显，降低用户读取效率。
为清晰传达信息，进一步提升读取效率，我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度，将图表元素分为三类，分别为“底层元素”、“中层元素”和“顶层元素”，并依据不同视觉强度分别设计三类元素。底层元素最弱，顶层元素最强。通过这种方法，梳理图表元素的前后关系，能够清晰把握元素视觉层次，保证信息传递效率。
| 底层元素设计
在各类图表中，我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰，最大程度突出主图形，底层元素全部使用浅灰色进行设计。我们发现，当元素与背景颜色的明度对比在1.2:1时，人眼较难看到元素；当对比度在2.0:1时，视觉强度过强，易吸引用户注意力。通过元素视觉强度的调研及视觉尝试，最终确定元素与背景对比度在1.6:1左右，视觉强度偏弱但人眼能够看清的程度。以保证元素视觉不突兀，只在需要查看时可以被发现。
| 中层元素设计
中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素，是图表中表达数据的关键元素。与底层元素相比，中层元素采用更低明度与更高饱和度的数据色来表现，使元素从页面中凸显出来，保证可读性。同时在样式上适当加入渐变、描边等样式，丰富视觉层次，带来美观的视觉感受。
| 顶层元素设计
我们把顶层元素定义为图表高亮信息，内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出，使用深灰色、强调色等强对比度样式，并辅以动画、投影等手法保证明显的视觉强调效果，保证顶层信息最有效的传达给用户。
| 最终效果
通过层级梳理，并绑定元素重要程度和视觉强度的方法，设计后图表主次信息均按重要程度进行对应视觉强度的展示，让用户能够在第一时间接收到最重要的信息，提升信息读取效率。
图表排版设计
图表排版是指各元素在图表中的尺寸及布局等，对于B端后台类产品来说，不同排版对用户使用体验造成较大影响。如何建立一套合理的规范保证用户的使用体验？我们经过大量讨论推敲，梳理出一套针对B端后台类产品的排版规则，力求保证用户图表的使用体验。
| 图表尺寸
图表尺寸指图表整体长宽高。在项目中我们发现不同尺寸的图表对数据展现效果影响巨大，例如巨量数据的图表挤在名片大小的区域例显示，这使得信息读取的效率大打折扣。为此我们收集并提取出“全貌概览”、“多角度环视”、“详情分析”三类典型场景，并制定了“迷你图”、“中号图表”、“大号图表”三类尺寸，针对不同尺寸优化图表的信息展示密度，以达到高效读取信息的目的。
“迷你图”尺寸最小，舍弃了Y轴等不必要信息，利用小面积展示最关键的图表信息，并控制数据密度，保证信息高效读取。
“中号图表”尺寸受限，限制坐标轴刻度数量和数据的密度，例如曲线图数据点不高于每4像素1个数据点，Y轴坐标刻度不超过5个，以确保信息密度不过载，这类图表尺寸通常用在针对某大类内容进行多方面检视时。
“大号图表”尺寸最大，不限制数据信息密度，给予最全最详细的展示，这类尺寸通常用在数据详情页等详细分析场景中。
最后考虑到多图表混合排列时，饼图、地图等大面积填色图表，相较折线图等描边型图表，视觉感受更加膨胀。我们缩小了填色类图表的实际高度，保证多种图表混合排列时，视觉感受的均衡。
| 坐标轴
坐标轴在图表中出现的频率较高，那么坐标轴常见的设计问题有哪些呢？
第一是横纵坐标轴的刻度出现过密情况。
如果坐标轴所承载的是连续数据（连续数据指可量化的，连续不断的，在区间内可任意取值的数据，如时间、金额、人数等），设计师可自行增减刻度数量以保证视觉舒适度。如果承载是离散数据（离散数据指不可量化的，无关联的，不可在区间内任意取值的数据，如分类、软件版本、省份等），可采取增加坐标轴缩放功能以解决.
第二个常见问题是刻度的说明文字过长。
如果是X轴（横轴）文字过长，除了在可控范围内减少刻度，还可采取文字倾斜45°~90°的办法(如文字全部为中文，可用竖排代替倾斜90°)，缓解信息过密看不清的情况。
如果是Y轴（纵轴）文字过长，需联合研发一起调整数据的单位，比如把“元”调整为“百万元”。
如果不能调整，那就要根据所使用的图表库有针对性调整。例如常用的Echarts图表、D3图表等开源图表库，需要提前预估刻度文字长度并预留出来，否则刻度文字可能会被页面裁掉而不能完全显示。如你是用的是AntV等可自适应的图表库，则不必提前处理，图表库会自动按刻度长度进行整体调整。
| 图例
图例作为图表中不可或缺的部分，在各类图表库中位置不尽相同，由于不同图表样式差异很大，图例的位置需整体考虑并适当布局摆放，但在同一产品或页面内，过于随意的摆放图例，会导致页面统一性较差，同时增加用户的浏览成本。我们团队所负责的B端商业产品矩阵，作为面向用户的产品集合，产品间联系非常紧密。过于灵活随意的图例摆放不利于用户对于图表的浏览。为解决此问题，我们基于业务特点，针对B端商业产品矩阵制定了图例布局指导原则。
我们以提升屏幕信息密度为目标，分析不同场景的页面排布，制定了顶部和右侧两种较为宽松的指导原则，供设计师在没有明确的更优方案时选用。
当图表是左右两端对齐的类型，例如折线图、柱状图时，建议将图例放置在图表顶部。这样能结合标题等其他元素进行统一排布，减少占用空间。当图表本身左右都有空余空间时，例如饼图，建议将图例放置于图表的右侧。也能够节省页面的空间。
数据色板设计
色板作为常见的数据表达手段，能够利用不同颜色明确体现分类信息、数值高度、状态信息等。但目前市面上鲜有专业用途图表的配色工具。我们经过大量探索尝试，梳理总结出图表色彩的两个关键维度：辨识度与统一性。既需要颜色间突出强烈可清晰辨别，又需要颜色整体能形成统一风格，以达到清晰传递和美观的目标。如何平衡辨识度与统一性，是我们遇到的难题。
| 辨识度
辨识度在图表中有两方面：颜色与页面底色的辨识度，各颜色之间的辨识度。对于第一种，我们采用控制颜色的明亮程度来确保色彩辨识度，尤其对于黄色、青色等本身较亮的颜色，降低颜色的明度，确保在浅色背景下颜色可辨识。
对于第二种也就是各颜色之间的辨识度，通过实验发现单纯的颜色色相变化，例如红色与橙色的区分，人眼不容易分辨。所以采用了色相变化+明度变化的方法，既深红色与亮橙色，深蓝色与亮紫色等，这样用户能在第一眼就明确分辨，保证颜色间的辨识度。最终把颜色映射到色彩空间的三维坐标中，运用欧几里得距离公式测算颜色间的距离长短，来衡量各颜色间色差数值。颜色间距离越远代表色差越大，利用数据辅助衡量辨识效果。
| 统一性
色彩统一性的作用在于确保图表整体风格一致，色彩搭配舒适，从而带来美观、统一的视觉感受。为达目的，我们首先提炼商业产品设计风格为明亮、强对比，其次把设计风格转化为色彩数值。经过实验，把颜色明度限制在50%-70%，把饱和度限制在75%-85%，并在区间内不断波动。这样既保证了色彩视觉感受的统一，各颜色间又能够有清晰的辨识度。
| 颜色量化与工具
量化颜色，将色彩转化为数值，利用数值来验证设计师的「感觉」，能够保证方案合理性，保证设计质量。但通过尝试，我们常用的色彩模式均不能科学合理的量化颜色。通过查阅大量资料，我们最终决定以小众的HCL色彩模式来衡量色彩。其中H表示色相、C表示饱和度、L表示明度。HCL区别于传统的RGB或HSB模式，它能够将人眼对颜色的感知精确的量化为数值，例如黄色相比蓝色明度更高，都能如实的反馈到数值上。也由于此特性，HCL模式在诞生距今不到20年间，已被一些先锋设计师用于数据可视化的呈现中。
但是HCL作为小众色彩模式，目前设计软件鲜有支持，造成了HCL色彩不直观、不方便调色等的问题。为解决此问题，我们已初步完成智能配色程序，只需输入品牌色，就能自动生成图表色版，并在风格上与品牌色匹配，达到整体色彩的统一。我们也将一套调配好的色板及HCL实用小工具附在文末，帮助大家直观的查看和使用HCL模式颜色。
结语
数据价值就像不为人知的宝藏，隐藏在一条条枯燥晦涩的数据背后。而图表则是开启宝藏的钥匙，是发掘数据价值的强有力武器。通过对图表的不断探索优化，我们希望能够最大化数据的价值。通过图表，让数据最直观的展现；通过图表，让其背后的规律浮出水面被人探知；通过图表，让B端不再有难懂的数据。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：百度MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
我们常说，现在是体验至上的时代，用户对产品的使用不再是单纯的需求满足，更要获得满意的体验。服务设计的发展为我们改善用户的体验提供了新的思路，从本质出发，任何产品都是在提供某种服务，服务的质量从根本上决定了用户的体验。
什么是服务设计
服务设计一直在我们的生活中，我们无时无刻不在体验着各式各样的服务。荷兰一家专业的服务设计机构31 Volts是这样描述服务设计的：“如果有两家紧挨着的咖啡店，出售同样价格的咖啡时，服务设计是让你走进其中一家而不是另一家的原因。”这个描述很生动，同时也说明了服务设计的作用。
其实服务设计的定义还有很多，行业内不同的专家和学者都有自己的理解和解读，不管定义如何，重要的是服务设计的思维方式，可以帮助我们从全局改善服务体验。
服务设计的原则及案例说明
2010年在《This is Service Design Thinking》一书中，作者首次提出了5个服务设计基本原则，这些原则之后也被广泛使用，但随着服务设计的不断发展，其中的一些原则也需要重新去审视和思考，因此在2017年作者将其更新修订为6项。
a.以人为中心(Human-centered)
以人为中心的设计理念在产品设计、交互设计等领域已经得到了广泛的应用，服务设计当然也没有例外，以人为中心就是要站在用户的角度上看待和思考问题，考虑所有被服务影响的人。
在日本，农产品市场存在这样一个问题，农产品批发商无法及时从种植者处了解农产品的相关状况、收获量等信息，因此他们也就无法与要购买农产品的人进行谈判，这样造成的结果可能是粮食的浪费。日本的一家软件公司NJC（Nippon Jimuki Co. Ltd.）发现了这一问题，他们希望利用自身能力（软件方面的优势）去解决这一问题，因此将目标设定为：创建一个可以提供有用数据而又不给农民或农产品批发商带来负担的系统。
最终的产出的结果是Fudoloop这个应用程序，通过Fudoloop，批发商可以提前一天从农民那里收到信息，进而协调买家的各种要求。Fudoloop的使用者分为两种，一种是需要更新农产品信息的农民，一种是从Fudoloop上获取农产品信息的批发商，Fudoloop分别为两种用户进行了设计。
图片来源：Fudoloop
在设计Fudoloop时存在这样一个问题，农产品市场中的相关从业人员普遍年龄较大、受教育程度低、软件使用经验很少，面对这样的用户，显然通常的软件设计并不符合他们的需求，因此Fudoloop的界面设计非常简单且信息突出，从事农产品相关工作的人员可以轻松的使用Fudoloop完成农产品信息的更新，而不会因为学习产生很大的压力。Fudoloop还在大型农业贸易展览会邀请了一些行业内的人员和用户参与到了产品的体验中，并收集了他们反馈的建议，以改善产品。
图片来源：IDEO
NJC在设计Fudoloop时充分坚持了以人为中心的原则，考虑到服务涉及的不同用户，并根据用户本身的特点和需求进行设计。NJC的CMO佐藤贤一是这样评价Fudoloop的：“当简单、以人为本的思想汇聚在一起时，创新就会发生”。
b.协作(Collaborative)
这条原则说的是，不同背景和职能的利益相关者应该参与到服务设计流程中，收集多方诉求，发现不同看待问题的角度，才会更好的解决问题。
在美国旧金山，有一所学校和Revolution Foods这家餐饮公司合作，为学校内的人员提供丰富的、营养的午餐，但是实际来餐厅就餐的人数与预期相差很大，数据显示，有72%可以承担起午餐费用的人并没有来到食堂吃午餐。经过调查发现其中的原因，很多学生等校内人员并不愿意排长队或者匆忙的吃完午餐，因此他们选择了去校外享受午餐的时间。
为了改善这种情况，这所学校请来了全球顶尖的设计咨询公司IDEO，他们与1300多名学生、父母、营养人员、董事会专员、校长、老师和社区团体等利益相关者一起工作，重新去设计了学校的午餐，并且制定了针对三种年龄的就餐体验的建议，完成了饮食、就餐空间、新技术使用等多方面的优化和设计。
图片来源：IDEO
最终，学校完美的改善了午餐服务的体验，这其中包含了所有利益相关者的想法和工作，因此设计成果也被人们所接受，越来越多的校内人员会选择学校的午餐，之后，这种设计模式也被旧金山的许多学校采纳和推出。
所以，服务中涉及到的利益相关者有很多，多收集他们的想法与建议，甚至让他们参与到服务设计中去，问题会得到更好的解决。
c.迭代(Iterative)
迭代是一个不断接受反馈不断优化的过程，如此重复执行，让产品变得越来越好。服务设计也需要迭代，不要避免犯错误，而是从错误中学习和改变，同时也要不断的收集各方的反馈信息，这些信息是服务进行迭代的核心所在。随着互联网的发展，迭代的思维早已渗透到每一个互联网产品，此处就不再过多解释。
d.有序(Sequential)
服务设计应该是一系列相互关联的活动，并且是按照顺序进行的，精准的把控服务每一个环节的节奏，用户才能获得更愉悦的体验。
以外卖为例，用户的使用过程包含订外卖时的商家选择到下单过程，下单后配送外卖，用户收到外卖和用餐后这几个过程，而服务的提供者主要包括商家、平台和外卖小哥，为了保证用户能够获得流畅的服务体验，需要各个服务提供者在服务展开的不同环节推出优质的服务，如下图。
在订外卖时，平台会为用户推出“超值优惠”“限时秒杀”等优惠活动，商家推荐、订单历史等商家选择渠道，以及不同的筛选条件，以上的目的都在于帮助用户快速找到自己期望的、合适的商家。在用户选定商家后，进入到选择商品并下单的过程，一方面，商家会推出优惠的活动、推荐菜品等，另一方面，平台也会给出自己的优惠。
下单后，用户面临的是一个配送过程中的等待时间，为了缓解用户在等待过程中的焦虑情绪，平台会及时更新和推送外卖小哥的状态，如到达商家、取餐中、与用户的距离等，同时会给出用户预期的送达时间，若超过预期时间用户还可进行催单，商家可以联系用户表达歉意，整个过程用户对配送状态是可视的。
用户收到外卖时首先会与外卖小哥接触，包括与外卖小哥提前确定取餐的时间地点，取外卖时的短暂对话等，这些都会影响用户对服务的印象，因此外卖小哥需要保证服务态度的礼貌和友好。收到外卖后，食品包装首先给到了用户对商家的第一印象，然后是餐品是否符合用户预期，让用户满意。
在用户就餐后，首先平台要提供给用户评价的功能，用户可以分享自己就餐的感受，商家也可以通过平台为用户提供更多的优惠，引导用户能够再次回到商家订餐。
从外卖的案例中我们可以看到，服务是一个过程，是需要有序展开的，每一个环节的体验都会影响到用户对服务的印象，在恰当的环节提供恰当的优质服务，才能确保用户的整体体验。
e.真实(Real)
服务本质上是无形的，应该用“物理元素”来可视化，这样可以用户的服务记忆，增强用户对他们所接受服务的感知。
同样以上述外卖为例，商家为用户提供餐食，这部分是借助美团这个平台和外卖小哥来完成的，用户和商家的接触仅仅是送达的餐食，因此无法通过像到店体验一样，让用户感知到商家提供的更多服务。
为了让服务变得更加“有形化”，商家就需要花费更多的心思，如图，商家为了增强用户对服务的感知，一般会在在包装上花费很多功夫，精致的包装让商家的形象更好且更加值得信任，一些有趣的包装还可能让用户的心情变得愉悦。另外，商家也可以通过一张便利贴的温馨问候或者赠送小礼品等方式让用户更真实的感受到服务，通过这样的手段，即使用户并没有真的接触到商家，体验也会变得很好，商家的形象也会提升很多。
图片来源：古田路9号
f.整体(Holistic)
整体就是要着眼于整个用户旅程，考虑用户与服务的每个触点（触点的概念后文会进行介绍），并兼顾多方利益相关者的需求。也就是所谓的全方位服务体验，考虑服务环境的方方面面，没有任何遗漏。这个原则实施起来并不是那么简单，从整体角度思考问题会使问题变得复杂。不过在服务设计中，是有一些方法和工具是可以帮助我们完成整体思考的，比如服务蓝图。
服务设计的常用方法-服务蓝图
a.服务蓝图简介
服务蓝图是一张图表，通过列出在每个阶段发生的、不同角色执行的所有活动，显示了服务的整个过程。如图所示是一个服务蓝图的简单示例，垂直方向上展示服务中的利益相关者，水平方向上为用户的历程，也就是用户经历的不同阶段。在服务蓝图中有两条线，一条是可见线（line of visibility），可见线上方为用户可与之交互的服务，也可以称之为“前台”，可见线下方代表的是后台进程，用户无法看到但需要给用户提供支持，后台进程还可以存在内部交互线，用来表示内部人员的联系。用户与前台服务之间存在另外一条交互线（line of interaction），用来表示用户与服务之间的接触。
图片来源：Service Design Tools
明确了服务蓝图的大致框架之后，还需要注意服务蓝图中一个非常重要的概念——触点。触点就是在服务的各阶段，用户和产品、服务、后台产生的接触，每个触点也是服务可以进行展开和优化的方向。
b.Uber服务蓝图绘制
为了明确服务蓝图的绘制和分析过程，下面将结合下图所示的Uber服务蓝图进行说明。
图片来源：Medium
(1) 明确用户历程
用户使用Uber打车服务主要可以简单分为以下三个阶段：注册（下载APP - 新用户注册），乘车阶段（下单 - 等待车辆到达 - 乘车 - 到达目的地）、乘车后（付款 - 评价）。
(2) 明确利益相关者
用户与之产生互动的前台服务人员为司机，而设计师、开发人员、项目经理等负责后台的服务支持，以保证Uber按照预期的目标运作。
(3) 明确前后台活动
一方面，需要明确和用户接触的前台活动有哪些，Uber打车服务中和用户产生接触的主要为司机及车辆，因此需要确保司机是合格的、车辆内部的环境是干净舒适的，同时司机在与用户接触的过程中需要提供礼貌的问候和交流，满足用户在乘车过程中的要求，完成乘车费用的收取，提醒用户离开前带好随身物品，以及评价乘客等。
另一方面，用户对后台的流程可能并不了解，但需要明确哪些后台活动和支持会对用户产生影响。比如在用户下单时能够自动获取用户定位，告知用户预期的时间和价格，以及发送给用户司机的状态等。
在明确前后台活动时，我们可以以用户历程为线，分步骤进行分析，确保每个环节中涉及到的前后台活动没有被遗漏。
(4)明确关键触点
在服务蓝图中我们可以标注用户与服务的主要接触点，针对触点进行设计是提升服务体验的一个重要和有效的手段。
在Uber打车服务中还有一些需要注意的触点，一是等待时间，这包括用户发起乘车请求后、付款时以及评价司机时，等待时间是造成用户体验较差的一个原因，因此需要注意标注出这些触点，并想办法优化，在服务设计中需要注意相关环节的应尽量简单，减少用户的等待。另外需要注意的是会对体验影响较大的触点，如司机态度不友好、乘客下车时忘记带随身物品等，可能造成失败的服务体验的触点应该精心地去设计，避免这样的情况发生。
通过以上过程我们完成了Uber服务蓝图的绘制，从中可以获取到Uber打车服务的整体概貌及其相互关系。
///
结语
服务设计的思维能够帮助我们从全局的角度去审视和思考，发现更多改善服务的可能性，从而为用户提供更好的体验。因此对于产品和设计等相关人员来说，不能仅仅把目光放在产品本身，而是要从服务的角度去正确看待产品和用户的关系，以用户为中心，找到用户与产品的每一个接触点来进行服务设计，这样才能保证用户在整个流程中都能得到好的体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：站酷 作者：百度MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
即时通讯界面设计 表达其物流行业的专业性和商务性，标识整体精致细腻，令人印象深刻，在界面设计时以厚重，大气的配色方案和视觉风格提升整个品牌的含义。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
现在是互联网逐渐发展，已经出现了很多可以供自己写博客的网站，大家可以在上面 发表自己的文章，供自己记录或者是供他人阅读。但是，可不可以自己搭建一个只属于自己的个人博客网站呢？这篇文章就带你从0开始搭建一个自己的个人博客网站，并部署到属于自己服务器。这里有一点要说的是，没有服务器的同学使用自己机器的linux系统也是一样的操作。我们选用一个很好用的博客框架Hexo进行搭建我们的个人博客。
Hexo是一个快速，简介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可生成一个静态网页展示我们发布的文章，同时也提供了大量精美的博客主题供我们使用。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BUkzFJqh-1622032930743)(pictures/image-20210524011732509.png)]](https://img-blog.csdnimg.cn/20210526204228907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
我们使用Centos7系统作为演示，使用其他linux系统也是可以的，只需要更换为对应Linux版本的软件安装命令即可。
1.安装Git
直接使用yum安装即可，在命令行输入 yum -y install git
完成之后输入git version 查看是否安装成功，如果显示git版本信息即为成功，如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gVJMnq6W-1622032930745)(pictures/image-20210526142911469.png)]](https://img-blog.csdnimg.cn/2021052620425035.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
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 #让环境变量生效
2.3：测试是否安装成功：
在命令行输入node -v 和 npm -v，若是显示出了版本号，即为安装成功：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47pt856h-1622032930748)(pictures/image-20210526143600103.png)]](https://img-blog.csdnimg.cn/20210526204418535.png)
3.安装并使用Hexo
Hexo的安装较为简单，使用如下命令安装
npm install -g hexo-cli #这里有一点要注意的就是，npm的源是在国外的，访问可能会很慢，这里可以换成我们国内的源进行安装加快速度。操作如下： npm config set registry https://registry.npm.taobao.org
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TEjeb2E6-1622032930750)(pictures/image-20210526143826327.png)]](https://img-blog.csdnimg.cn/20210526204930856.png)
3.1：初始化Hexo
上面的安装完成之后执行下面的命令进行对Hexo进行一个初始化
#这个文件名字可以自己指定，之后会在当前目录下生成对应文件夹 hexo init <文件名字> cd 文件名字 npm install
可以看到安装好之后的一个目录结构：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raE9WJQX-1622032930751)(pictures/image-20210526144057199.png)]](https://img-blog.csdnimg.cn/20210526204949450.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
目录文件说明：
_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)]](https://img-blog.csdnimg.cn/20210526205007939.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
3.2生成静态文件，并开启Hexo服务：
进入到了hexo的安装目录之后，使用hexo generate来生成静态文件，也可以使用hexo g，之后使用hexo server（可以写成hexo s）命令启动服务，操作如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YuvIWOuI-1622032930753)(pictures/image-20210526144957135.png)]](https://img-blog.csdnimg.cn/20210526205023957.png)
可以看到4000端口的服务已经开启，之后在你的浏览器输入http://<你的linux机器的ip地址或者服务器公网地址>:4000,如下可以看到最开始的一个界面：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w9ELcFFg-1622032930753)(pictures/image-20210526145217729.png)]](https://img-blog.csdnimg.cn/20210526205035279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
4.初步使用Hexo：
使用前，我们对我们的站点进行一个配置，也就是我们创建的hexo目录的_config.yml文件，可以修改的部分介绍如下：
# Site
title: QIMING.INFO #博客网站的标题
subtitle: #博客网站的副标题
description: #你的网站描述
keywords: #网站的关键词
author: #作者的名字
language: #博客网站使用的语言
timezone: #网站时区
我自己的修改如下供大家参考，这里的修改没有太大的限制：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0cTYgQ1-1622032930754)(pictures/image-20210526145734893.png)]](https://img-blog.csdnimg.cn/20210526210405679.png)
4.1：开始使用Hexo发布自己的第一篇博客！
执行下面的目录创建一篇新文章：
hexo new post <文章标题>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]
这里我创建了一篇标题为First_Blog的博客，创建之后hexo目录下面的source/_post文件夹下会产生一个First_Blog.md的文件
4.2:编辑文章
进入到上面说的那个目录下可以看到我们创建的博客文件：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuPREJLQ-1622032930756)(pictures/image-20210526150208204.png)]](https://img-blog.csdnimg.cn/20210526210424359.png)
直接使用vim或者vi就可以对我们的博客文章进行编辑了，打开此First_Blog.md后可以看到—分隔的区域，这部分主要对文章进行标注变量，如下：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GOYKjBSu-1622032930756)(pictures/image-20210526150326264.png)]](https://img-blog.csdnimg.cn/20210526210437302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
title：标题
tage：标签
categories：分类
date：时间
这些标注大家在-----区域可以进行使用
4.3：发布文章
输入如下命令，生成静态网页，静态网页会存放在public文件下
hexo g
hexo s
之后就可以去浏览器访问了！可以看到我们发布的文章已经成功在浏览器显示，到这里个人博客网站就已经成功搭建了。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ZpSg9fl-1622032930757)(pictures/image-20210526150824449.png)]](https://img-blog.csdnimg.cn/20210526210506192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
5.主题的选择：
主题网站：https://hexo.io/themes/ hexo提供了大量精美的主题供我们选择，选择喜欢的主题，在hexo目录下的themes文件夹下使用git clone下载主题，之后再配置文件_config.yml把theme后面修改成下载的主题的名字，之后运行hexo clean ，hexo g即可看到生效的主题。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eN5cZDmN-1622032930757)(pictures/image-20210526161641366.png)]](https://img-blog.csdnimg.cn/20210526210519406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
如果是有服务器的小伙伴，也可以将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
下载编译安装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 #编译安装
启动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
之后我们需要配置服务器公网ip，编辑配置文件。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TOR7RVwA-1622032930758)(pictures/image-20210526174027780.png)]](https://img-blog.csdnimg.cn/20210526210531881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU3NDc5MA==,size_16,color_FFFFFF,t_70)
之后再重启nginx服务，开启hexo服务，这个时候使用公网的ip就可以访问到我们的hexo服务了！
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
文章来源：csdn 作者：YO哥教你大数据
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com