今天再来继续一个比较现实的话题 —— 用户体验 是什么？

我们自己做的调查中，能搞明白这个知识点的在职 设计师 就没过半，还没入行的初学者就更是凤毛麟角。明明就是一个接触 UI 设计第一天，就会反复听到的词汇，为什么大多数人就搞不明白，或者一知半解呢？我自己在网上搜了半天的科普文和翻了很多出版物以后，才理解新人面临的问题，这些读物普遍 —— 不讲人话。而且还有一个非常让我反感的特点，就是过度渲染它的专业性和跨学科复杂程度。

虽然严格意义上讲，整个用户体验的知识体系里确实会包含提到的对应学科，但绝对不要被它涵盖的广度震慑，还要考虑它在每个学科中涉及的深度。如果把每个学科的知识点从浅到深划分成十级，那么用户体验涉及到的深度多数只能在 1-2 级这种最初级的水平中。只需要自己找一些入门读物或干货分享足矣，而不用专门投入大量的精力深入钻研。

所以针对目前这种困境，我要用几篇分享来做一个彻底的扫盲。当然，还是用「讲人话」的方式展开。

首先，用户体验设计，英文全称叫 User Experience Design，专业的缩写是 UXD，国内根据首字母缩写的习惯是 UED。

PS：在很长一段时间里，UE 这个称呼在国内互联网行业中的语境是特指交互设计（IXD）的。

用户体验设计 包含两个部分，用户体验 & 设计，我们先分开来解释它们的含义。

1. 用户体验是什么

用户体验，是指用户在使用某产品过程中积累的对该产品的主观感受、情绪。是由《设计心理学》的作者唐纳德·诺曼 Donald Norman 于 20 世纪 90 年代提出的，在移动互联网行业兴起后被广泛接受和关注。

用户体验本身的定义很容易理解，因为我们自己作为用户，在现代数字化生活场景中，每天都在面对不同的电子设备、网站、APP，并产生属于自己的使用体验。但是，研究用户体验的最大难题，就在“主观”性上。每个用户，或者不同的用户群体，他们对世界的认识、偏好是不同的。比如，我爱吃香菜，爱喝芹菜胡萝卜汁（yue~），喜欢姜汁兑美式（yue~），在我嘴里是蜜糖的东西，可能在你们嘴里就是砒霜……

这就导致，我们个人的主观体验，是不能等同于其他用户的体验的。想要了解这些用户的体验，中间就隔着巨大的阻力和障碍。所以，我们就要通过一系列的调查和研究工作，来理解用户的主观特征和真实体验，或预判用户可能产生的体验。这些调查和研究的工作都是围绕用户展开的，所以这个过程就叫用户研究（用研）。

总结起来，用户体验就是和你想法不一致的其他用户，对于特定产品、功能的主观感受。想要获取或预判用户的体验，就只能采取用户研究的方法。

2. 用户体验下的设计

用户体验设计有一个默认的目标，就是实现“更好的用户体验”，所以这里的“设计”指的就是针对更好的体验所进行的有效规划、表达和实现的过程，并不是狭义上的视觉设计、界面设计。比如针对产品的功能进行设计，修改或增加不同的产品功能。或针对产品的信息进行设计，调整产品内的文案措辞、字段权重、文本密度等。更不用说我们已经非常熟悉的交互设计、视觉设计、动效设计、情感化设计了。

所以你看，用户体验中的设计，就是一个涵盖了方方面面设计的总称，也是前面那些复杂的体验知识图例的来源。但大可不必为这些事情感到苦恼，因为我们在真实的项目环境中，优化特殊领域的手段，往往依靠日常生活实践所积累的经验即可，而不是非得引用专业理论，这个我们会在后面做进一步的说明。

所以再进一步总结，用户体验设计，就是以提升用户体验为目标，研究用户，并针对产品的不同层面进行针对性设计的行为。如果缺乏用户研究，不以用户客观感受为依据进行的设计，就不是体验设计。比如只围绕在个人偏好、竞品需求、领导个人要求下的界面设计、交互设计，就不是体验设计。但换句话说，即使只是界面设计师或交互设计师，只要根据用户的反馈或者用户简单沟通的成果为依据进行设计，那么这也是在进行体验设计。

体验设计并没有想象中门槛那么高，是团队每个成员都可以参与并发挥自己的主观能动性来提升产品的用户体验的。而体验设计师，只是在这个基础上帮助团队更好的实现分工和效率最大化的岗位。

掌握了体验设计的基本概念，接着，我们就要认识体验设计的具体工作内容和流程了。

首先，我就不胡乱发明一些奇怪的双钻模型、莫比乌斯环、钟表盘来解释体验设计的流程了，在我看来，体验设计的流程是特别简单的，就四个步骤。

如何用好设计双钻模型？来看 vivo 浏览器的实战案例！ 前言 刚入职时，有本书叫《方寸指尖》对我影响比较大，主要讲述如何做好用户体验设计。

阅读文章 >

1. 找出问题

体验设计是一个非常有针对性的设计行为，要让每一次体验设计都做到有的放矢，就需要在动手前确定解决的问题是什么。比如产品还在构想阶段，有若干的功能需求待定，为了符合精益的 MVP（最小可行性）原则，不可能所有需求都做上。那么体验设计师要解决的问题，就是确定哪些需求是最符合用户体验要求的，是初版必做的。再比如产品近期差评很多，各项数据不断下滑，如果不做出适当调整，那么产品效益就会持续恶化。这时体验设计师要解决的问题，就是找出影响体验的地方，并给出解决方案。

找出的问题本质上是确定你后续工作的目标，和传统 UI 设计不同的是，工作目标除产品经理直接传达给你的以外，更多时候是依靠体验设计师自己挖掘的。也就是你要自己给自己找工作目标，并且这个工作目标还要符合团队的诉求和利益，是要有 “价值” 的。所以，要找出有价值的问题，就需要我们尽可能站在不同的维度进行思考，包括但不限于团队、市场、产品、业务等领域的分析。

2. 用户研究

做用户体验设计就是去满足其他人的主观感受，想要实现这一点，你就必须通过一些调查和研究的方法来消除认知的隔阂。所以，行业创建了大量的用户调查方法和研究工具，来帮助我们更有效的认识用户，挖掘用户的真实想法。比如用户画像、用户访谈、焦点访谈、调查问卷、可用性分析等等。它们都是应用型技能，学习门槛不高，只要在初步掌握概念和流程以后就可以动手实践，并积累相应的经验。

用户研究的主要难点，在于根据前面找出的问题，选择有用的调研类型并制定对应流程。因为每一次有效调研的周期都很长，不可能有足够的时间让你全部开展一遍，所以筛选就是为了保证团队的时间精力被有效利用。

通过用户研究，获得相应的用户反馈和信息以后，体验设计师要通过这些信息做出进一步总结，并形成后续设计或改版的初级方案。比如在可用性测试中，用户普遍在其中一个步骤被卡住，并提出了大量的疑问。那设计师就要根据这些疑问来确定用户认知的局限性，并给出产品应该怎么改才能符合用户认知的构思。

3. 解决问题

前面我们说过，体验设计中的设计是一个泛指，并不是仅仅指视觉设计，所以这个环节我们就要根据前面找出的问题和研究成果，进行对应领域的设计实践。通常，针对业务、流程、交互、信息的设计，都可以用原型线框图的方式展示出来。这样可以高效的输出设计思路来进行内部讨论和验证。

要是涉及到具体样式、创意、动效、色彩的改动，那么就要具体输出视觉设计稿了。如果团队分工比较细致，有体验设计师又有界面设计师（这情况不是太合理），那么体验设计师通常会通过原型和文档，指导 UI 设计师完成视觉界面。

4. 验证成果

完成项目的初步设计以后，仅仅只是将我们自己构思的问题解决方案给输出了出来，但是对用户体验的提升是否真的有效依旧是个未知数。所以，最后我们还需要对输出的方案进行验证，验证主要有两个阶段。

第一个阶段，就是时间充足的情况下，通过制作高保真原型让部分用户试用，收集反馈，看看方案是有待改进还是有效提升了用户体验。

第二个阶段，发生在产品上线用户使用过线上版本以后（AB Test 和灰度测试也是线上版本），再进行更大范围的用研来检查方案是否有效。

验证成果就是对做好的方案反复做检验，在原有的基础上尽量发现问题并做出更好的优化，如果我们用特定的研究方法来对比新老版本的体验，除了检验设计的有效性以外，还可以从侧面反映设计师工作的价值（体验设计的 KPI 或 OKR）。

以上四个步骤，就是体验设计工作中的基本流程。之所以不把流程拆分得更细致，步骤更多，是因为不同项目场景中对体验工作的影响是非常巨大的，根本不可能遵循理想的流程来开展工作。比如下图这种就不适合：

只要每次展开项目的时候，遵循找到问题、用户研究、解决问题、验证问题的大框架，每个步骤下面根据实际情况自行发挥，才是落实体验设计的正确思路。

关于第一部分体验设计的基本认识就介绍到这边，用文字解释流程实在太困难了，并不是体验设计本身复杂，而是体验设计依附的项目场景多种多样，需要设计师保持清晰灵活的观念而不是固守一个复杂的套路。

体验设计无论从内容、形式、方法，都属于人文社科的一部分。它也继承了这个学科最大的毛病 —— 不讲人话。所以新手学习体验设计最大的挑战，就是不能掉进花里胡哨的专业名词、体验理论、项目包装中的陷阱，在不思考本质的情况下过多的深入细节，钻牛角尖，舍本逐末。我的精神导师费曼的一段访谈就是对这种现状的最佳注解：

会上，有位社会学家拿出事先写好了一篇文章，让我们读。我刚开始读这鬼东西，眼珠子就差点冒了出来：整个一个丈二的和尚，摸不着头脑！我琢磨着，我看不懂，大概是因为那书目上的书，我一本也没读。一丝不安的感觉爬上心头：“我这人可能有问题。”受了会儿煎熬，我最后对自己说：“这样不行，我得打住。咱们慢慢地只读一句，直到弄明白它到底是什么意思为止。”于是我随便用手一点，停在一处，开始仔细阅读下一句。我记得不是很清楚了，但八九不离十是这么一句，“社会团体中的个体成员经常通过视觉的、符号的渠道获得信息。”我翻来复去读了几遍，然后把它翻译成了人话。你知道那是什么意思么？“人们阅读。”我开始阅读下一句，很快就把它也给破译了。剩下的就是小菜一碟了：“人们有时阅读，有时听收音机，”诸如此类，不过是被一些唬人的名词术语、复杂的语法修辞包装着，令人开始读时有些费解而已。被我彻底破译后，整个文章原形毕露，不过是金玉其外，败絮其内。

这个系列的下一篇，会讨论体验设计和产品经理的关系，以及体验设计的局限性在哪里。如果反响和转发多的话，就会更进一步的输出更完整的体验设计干货。

我们下篇再贱~

掌握用户体验设计的标准流程，让设计不出错！ 前言 不管是即将进入设计师行业的新同学还是在设计行业摸爬滚打多年的设计行业老人，这份用户体验设计标准流程都适用。

阅读文章 >

欢迎关注作者的微信公众号：「超人的电话亭」

前言 每当我们打开一个网站、使用一个 App 时，我们都在和界面上的文案发生着交互。因此， 产品文案 无疑是用户体验中重要的一环。

在前两期文章中，我们介绍了文案的人物性格语气的价值篇、应用现状，并且针对实际的业务对酷家乐工具文案的人物性格进行了推导。这样一个虚拟的人物形象，又是如何被应用于实践中、从而与界面上的文案建立起关系的？

华为高薪招聘的「UX文案设计」，5个阶段帮你进阶掌握！ 在了解了人物性格语气的重要性以及在大厂中的应用场景之后，大家一定很关心，要如何在自己的业务中从 0 开始创建文案的人物性格语气呢？

阅读文章 >

华为高薪招聘的「UX文案设计」，4个方面帮你掌握基础！ 一、被忽视的 UX 文案 在很多体验设计师的认知中，产品界面上的文案是设计中最细枝末节的事，往往会被忽视。

阅读文章 >

从文案的角度出发，我们初步归纳了五个酷家乐工具中常见的交互场景：引导提示、二次确认、行为召唤、反馈、解释说明。通过将自己代入酷家乐工具文案的人物形象，我们能够去想象在不同场景下这个“人”应该表现出什么样的语气、用什么样的措辞去沟通。为了给予文案撰写者们更加明确的写作指导，我们将这些场景下的语气进一步细化成了具体的写作规范。

各场景下的文案规范 1. 引导提示

在一些功能教学、功能调整或功能上线等场景下，需要对功能、操作进行说明， 帮助用户理解或引导用户去使用。比如新手引导、操作引导等

文案 tips:

1. 对于交互操作类的引导，可通过「鼠标动作+作用对象+结果」的统一句式结构描述，直接指示用户操作，文案需简短，尽量不超过 10 个字，可一眼扫完。

2. 功能解释或价值点的描述需要精准、简练直接，避免使用口语、夸大的用词和过度描述。

2. 二次确认

对用户进行的操作进行二次确认，以避免误操作，或产生不可逆的后果

文案 tips:

1. 用询问的语气直接询问用户是否继续之前的操作，可省略动词前的“确认”、“是否”这类描述。

2. 从用户角度告知对操作结果进行处理的一些解决方案建议。

3. button 文案应尽量指明具体的动作，跟询问语中的动词呼应，少用确认、取消这种模糊广泛的动词。

3. 行为召唤

通过按钮文案激发用户点击

文案 tip: 按钮的文案一般是动词，需尽量简洁，一目了然。

4. 反馈

（一）异常：在发生错误/异常时，帮助用户达成目的，且在必要时告知导致异常的原因

文案 tips:

1. 异常报错时，不是冷冰冰地告诉用户“失败”，也不要出现“未知错误”这种没有关怀的文案，应告诉用户可行的解决方案，或产品为用户做了哪些挽救措施。

2. 不要命令和强迫用户，专注于解决问题，而不是指责。

3. 如果异常/错误是用户自己造成的结果，不用使用“抱歉”、“对不起”等词。

（二）过渡：告知用户上一步行为已发生，但产生结果需要一段时间

文案 tips:

1. 预估时间，超过 4 秒的过渡，在文字提示之外，最好还有进度提示（完成百分比或已完成的内容数量）或时间提示，以减缓用户等待的焦虑。

2. 超过 1 分钟的过渡，除了进度提示外，最好提供剩余时间，例如显示剩下几分钟，用户就知道可以先做些其他事而不是干等。

3. 在同一个过渡中，如果有状态变更，最好能及时通知用户，将一个长时间的过渡分解成几个短时间的过渡。

（三）成功确认：告知用户他们希望的结果已产生

文案 tips:

1. 在成功确认时，根据用户为结果付出的程度和结果产生的意义，判断是否需要突出成功语气，如果需要突出，可以用“xx 成功”，如果不需要，简单使用“已 xx”即可。

2. 不要在成功提示的末尾添加感叹号。

3. 不是所有的成功的行为都需要成功确认的提示，有一些行为的成功可以直观地呈现，就不要加冗余的提示。

5. 解释说明

功能名不能完整地表达含义，或功能名过于专业需要解释，或为方便使用，有对功能额外做说明的必要

文案 tips:

1. 给操作注释时，直接告知用户会出现的结果。

2. 除必要情况（文件格式、工具名词），尽量避免嵌套专业名词进行解释。

3. 统一同类解释说明的形式，包括语序、文件类型、文件大小。

*以上产品文案写作建议适用于酷家乐工具的人物性格语气，其他产品可能根据自己独特的人物性格语气产生完全不同的写作风格。

实践应用并收集反馈 建立起这整套人物性格语气以及写作指导之后，我们将其推广到了设计团队以及其他相关职能部门：

将人物性格与语气进行设计团队内的宣讲，以便收集反馈和达成共识； 根据人物性格与语气，指导设计团队对产品文案进行专家走查； 与组织内的其他职能，如产品、运营、销售等进行沟通，了解人物性格与语气对他们的指导作用和需要优化的地方。 总结 文案虽然不影响产品的交互流程与信息架构，但是作为传递信息的直接媒介，其对于整个用户体验的影响是不可忽视的。

好的人物性格、语气能够帮助我们传递出品牌的理念与调性，对它们加以有效应用，用户就能够在产品的使用过程中逐渐强化对品牌的认知。同时，人物的性格、语气也是文案规范的基础，就像是金字塔的塔尖，指导我们应该在具体场景下写出什么样的文案。而把人物性格、语气归纳成一个人物画像，我们在运用的时候就能够通过把自己代入到这个角色、想像她/他会怎么说话的方式，更加快速、准确地作出与文案有关的判断。

文中数据均已做模糊处理，非真实数据，仅作为演示用途，对数据呈现不负相应责任。

UX文案怎么写？来看看谷歌的方法总结 写作是很容易的，你要做的就是删掉那些错误词句。

阅读文章 >

欢迎关注公众号「酷家乐用户体验设计」

大家好，我是和你们聊设计的花生~ 前几天向大家推荐了 5 款精致优雅的英文字体，作为装饰运用到 海报设计 中，可以营造浪漫优雅的氛围。

海报设计如何更优雅？加上这个元素准没错！（附素材下载） 大家好呀， 我是和你们聊设计的花生~ 之前和大家分享了纤细的手写英文字体在海报中的运用，他们可以丰富画面层次并烘托氛围，让海报不再沉闷呆板。

阅读文章 >

然后有小伙伴在评论去问到有没有比较有偏男性气质的英文字体推荐，当然有啦~今天就继续和大家聊聊具有 力量感 的英文字体在海报设计中的运用，并为大家推荐 7 款可以免费商用的相关英文字体，一起来看看吧~

力量感字体在海报中的运用 说到具有力量感，在英文字体上最直接的表现就是超粗线条。同一个字体家族，线条越粗，字体的厚重感和力量感越强，视觉冲击力也越大。

除了字体家族中的大字重字体，还有很多本身就是为标题（Headline）设计的粗线条的英文字体。这样的字体形式感会更强，适合大字号的展示。在外文海报中经常直接作为主视觉，运用到在与体育运动相关的主题中，突出健壮有力的感觉。

此外，粗线条字体也适合作为一种装饰图形铺在海报中背景，与其他元素形成空间对比，呈现出成强烈的视觉冲击。

↑菲律宾设计师Benedicto Cernal III 的系列字体海报。图片来源： https://benedictocernaliii.com/

这样的设计方法也常用在表现健身运动或者潮流主题的中文海报中，一方面是粗壮的字体气质符合海报主题，另外也可以与主体人物形成遮挡穿插关系，丰富视觉层次。

7 款力量感字体推荐 下面为大家推荐 7 款粗线条的英文字体，都是专门为标题设计的，字形坚实有力，适合大字号展示。字体都是免费商用的，字体资源包下载链接在文末或者开头都有，喜欢的小伙伴可以自行下载~

Theater

Theatre 是一款字宽较窄的无衬线字体，它具有大胆的风格，易于阅读，非常适合吸引注意力。

Berd

Berd 是一种基于简单几何形状的大胆而有力的显示字体（Display font）。该字体具有坚实的外观，是海报标题、标志、包装等设计的完美选择。

Phyco

Phyco 是几何感很强的字体，适用于作为标题、海报、标题、品牌、T 恤衫印刷和其他图形设计。

Thunder

Thunder 是线条极度夸张的无衬线系列字体，有 36 种字形。适合电影海报、标题、专辑插图等任何需要干净的无衬线字体的设计项目。

SuperLine

SuperLine Font 是一款具有现代感的全大写显示字体，提供常规、斜线条和轮廓三种形式，适合品牌项目、具有视觉冲击力的海报的设计，以及作为 Web 或应用程序的专用字体。

Akira Expanded

Akira Expanded 在高度上被压缩，显得更加沉稳，能为设计带来现代而大胆的印象。适合作为网页设计中的标题文本。

Hanca

Hanca 的线条并没有那么粗，非常优雅。它包括 Regular、Bold 和 Outline 三种样式，非常适合标题、杂志封面、标志设计等。

就是今天的推荐，希望对大家的设计有帮助，更多字体推荐文章可以戳下方文章链接。

5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！ 大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？

阅读文章 >

海报版式太单调？用好这个元素提升99%（附素材下载） 大家好，我是你们聊设计的花生~ 今天我们聊聊海报设计中的一个小技巧。

阅读文章 >

如果你有关于设计的其他问题，可以加入优设官方设计交流群（入群二维码见文末BANNER），和优设主编、设计总监及其他热爱设计的小伙伴一起探讨学习~

今天要介绍的「効果音ラボ」（Sound Effect Lab）是一个日本免费 音效素材 网站，提供各种有趣的效果音让使用者在线预览播放、免费下载！从网站分类会看到各种效果类型，像是游戏战斗音效、表演或动画、人声、生活中会出现的声音、交通工具、环境音、操作系统按键声音和动植物大自然声音，虽然是日文网站，操作上并不会太困难，也可搭配浏览器的网页翻译功能使用。

网站中收录的所有音效素材都是由网站管理员录制，有些配音员只有录制人声部分，音效的版权归属仍属于网站，每个音效都有网页播放预览功能，也都有标题和简短说明，需要时只要点选后方的下载按钮就能保存 Mp3 格式。

至于最重要的使用规范，从「効果音ラボ」下载的音效在使用时无需向站方取得授权，不用标示出处来源，音效可提供个人、企业或公共机构免费使用，亦可修改、编辑或是转换为其他格式，但要注意的是禁止将音效使用在成人作品、违反公共秩序或犯罪行为，也不可将音效再次提供给其他人下载，如果是使用在影片制作（例如 YouTube 影片）也没问题。

効果音ラボ（Sound Effect Lab） 网站链接： https://soundeffect-lab.info/

使用教学

打开 Sound Effect Lab 网站，从上方选单点选要浏览的音效素材分类，其实网站对于效果音的分类相当清楚易懂，单从汉字来看也大略可以猜到是什么样的音效类型。

每个音效类别都有各种声音标题和简单介绍，像是表演的各种乐器声音，也有动画或游戏出现的卡通式音效，点选标题左侧「播放」可直接在浏览器试听。

另一个人声的音效分类，会依照不同的角色、年龄设定，录制一些像是 RPG 游戏会说的话，每个类别都有标示声优，听起来很热血很有趣，不过只有日文发音，大家可以去听听看。

生活中会出现的各种环境音，也可以在「効果音ラボ」找到，如果不知道每个标题代表的意思，很简单只要点选播放就好，直接用听的最简单。

当你找到想用的音效时，点选后方的「DL」就能将 素材下载 为 Mp3 格式保存。

值得一试的三个理由：

1. 「効果音ラボ」是一个日本免费 音效网站 ，提供各种效果音素材下载

2. 每个音效都有网页播放预览功能，点选就能下载为 Mp3 格式

3. 不用标示出处来源，音效可提供个人、企业或公共机构免费使用

免费可商用！提供超多风格音乐/音效素材下载的「Sampld」 本文要介绍的「Sampld」是一个免费下载、分享高音质免版权音乐音效平台，开发者考虑到当今社群媒体、短影片流行（像是 TikTok、Instagram 和 YouTube），希望提供让每个人都能轻松搜索并下载优质音乐素材的网站，以便在制作影片时作为背景音乐使用。

阅读文章 >

五月的第二波设计干货合集紧跟着就来了！这次的 干货合集 中，主要推荐了一些相对独特的设计工具，比如封面设计工具、设计文本管理工具、网络梗图生成器，等等。值得注意的是，其中好几个设计工具都借助人工智能来辅助完成设计，这个应该是未来 设计工具 的必然发展趋势吧。下面我们逐个看看：

1、快速封面设计工具 OpenGrph https://opengrph.blockscribers.com/

OpenGrph 是一个超级轻量级的封面制作工具，它特别适合给视频和博客来设计封面，其中包含 21 种优雅的字体搭配方案，88种背景图案，3种主题和2种模式，可以轻松拖拽元素来调整布局。这个工具总体上是非常容易上手的，唯一的问题是它的字体搭配方案都是英文的，有需求的同学自行取用吧。

2、超细致的宇宙主题3D图库 https://spacers.wannathis.one/

这是一套制作非常细致的宇宙主题的 3D 图库，图库当中包含 3 个角色，12种姿势，还包含各种星球、载具等等，可以超级快速搭建出颇为有趣的宇宙相关的场景。当然，这是一套收费的 3D 图库没错，但是它提供免费的 Demo 下载，如果你的团队正好有这样的需求，可以考虑买一套。

3、全链路设计开发文本内容管理工具 https://www.dittowords.com/drafting

Ditto 这个工具非常有意思，它从根本上是用来管理和处理数字产品当中的所有的文本素材的，不过它提供的功能支持几乎完美地贯穿了设计的全链路，从前期的构思，到中间的设计再到后期的开发，功能全都有，而且还能和 Figma 这样的设计工具无缝链接。正在寻找相关工具的设计师或者团队可以关注一下这个工具。

4、动态渐变气泡生成器 https://blobanimation.com/

这是一个非常简单的工具，它内置了大量的选项，来帮你生成一个完全自定义的 SVG 格式的动态渐变色气泡，从变化的速度到前后景的颜色都可以定制。设置好了之后，可以直接导出 SVG 代码，直接应用到网页或者 APP 之类的场合。这个工具是完全免费的。

5、人工智能网络梗图生成器 https://www.supermeme.ai/

这算是人工智能所能涉足的新领域——使用机器学习来生成网络梗图。虽然国内外梗图流行趋势略有不同，但是大体上还是相通的，这是一个提供免费试用的网络梗图生成工具，你可以在生成器中选择不同的主题，然后选择自己的模板或者直接使用内置模板，它就能给你生成一些有趣的梗图供你使用。有兴趣的同学可以先试试看。

6、开源免费的超有爱贴纸插画素材 https://openstickers.craftwork.design/

这个名为 Open Stickers 是一组超级有爱的贴纸插画素材，这些贴纸的风格充满涂鸦的质感，富有亲和力又非常有爱，它们可以用于风格温馨的海报、插画、网页、宣传物料，最重要的是它是完全免费的，而且都是矢量素材，可以在 Figma、Sketch、 AI 当中进行编辑处理。

7、基于人工智能的设计工具 Visily https://www.visily.ai/

按照官方的说法，Visily 这个工具能够像「做PPT一样做设计」，你可以直接通过拖拽和移动快速编辑出 UI 元素，使用大量的预设模板和 AI 辅助来完成整体的设计，而他们预设的受众是「非设计师」，也因此这个设计软件可能代表着未来设计软件的某种可能的发展方向。这款工具的诞生本就源自于它的开发者在自己试图完成 UI 时，发现这一困难险阻重重，于是生出想要给未经专业设计训练的人，创造一个能够辅助他们完成设计的工具。

8、免费插画素材搜集网站（梯子访问） https://freeillustrations.xyz/

除了一些风格独立的专门的插画图库以外，诸如 Free Illustrations 这样的网站则专注于搜集整理网上各种可供下载的免费插画、插画模板和小型插画库，虽然不是「大全套」式的系统图库，但是可以应付很多临时的设计需求，而且类别也非常丰富，值得收藏之后，仔细筛选。

往期干货：

第一波！2022年5月精选实用设计干货合集 五一假期结束了，给大家贡献一波设计干货吧！

阅读文章 >

第三波！2022年4月精选实用设计干货合集 大家好，4月的第3波实用设计干货合集来了！

阅读文章 >

第二波！2022年4月精选实用设计干货合集 大家好，这里是 4月的第2波实用设计干货合集！

阅读文章 >

20 世纪末到 21 世纪开始，宣传品牌与产品的阵地不再局限于印刷品，电视、电台及现场活动，而是出现了网站，网站可以链接更多陌生人，而且没有时空限制。

1997 年的谷歌网站

美国最火的设计风格只要有人将资料放到网上，远在日本的一名中学生都可以去学习了解，所以也打破了过去信息差的优势。本回我们要跟大家聊聊网页设计的发展，但在展开内容前，要搞清楚一个问题，就是网页设计属于平面设计吗？

国内早在差不多 20 年前，建站公司就开始独立存在，所以这个问题蛮有争议，尤其是 UI 设计也很成熟之后，大家更愿意认为此学科是独立的。

中国建于 1994 年的第一个网页，主要对外沟通

平面设计的定义不管怎么粉饰，简单而言就是：以某种目的，将文字、图像、图形安排在一起。网页设计也是如此，唯一区别是网页具有动态，但这种动态属于若干个静态设定的切换关系，其关键帧也是平面设计。

2003 年时候的淘宝网

我在国内蛮早就从事网页设计工作，早年甚至可以自己独立完成网站，除了页面设计，还包括套 ASP 程序（Active Server Pages 动态服务器页面），用 table 布局前端等，当然这些技术如今早已过时。

12 年前史太浓独立完成的网站

因此这段历史我就是参与者之一，所以本回不仅是对搜集资料的剪裁分析，还会结合不少自身经历体验跟大家分享。

首先我们来简单回顾下互联网的发展与网页设计的演变。

国际互联网络与超级媒体 互联网发展到如今已经像空气一样存在，断网已经如同缺氧那么严重，而互联网的诞生最初跟两件事情相关。

第一件大家也许比较熟悉，就是在 20 世纪 50 年代末美国国防部高级研究项目总署（the United States Department of Defense，Advanced ResearchProjects Agency，简称 ARPA）成立了。

美国国防部高级研究项目总署 logo

其成立的根本原因是冷战背景下，苏联不但先于美国在 1957 年将卫星送上太空，而且世界第一枚多级远程弹道火箭发射也试验成功，因此苏联宣称可以将核弹送往地球任何地区。这对美国而言实在太吓人，所以 ARPA 是一个专门研究国防技术的“事业部”，聚合美国当时最牛的几百位科学家，研究如何将最先进技术应用到美国国防。

人类第一个卫星由苏联在 1957 年发射

由于这些科学家当时分散于全国各地，因为如此厉害的科学家肯定本身有重要事务，而不是放着随传随到，因此大伙无法专门聚在一起专门干这事，而是远程协作，所以就需要一个有效的远程沟通工具。

这个工具不能只局限于语言声音，还要做到资源共享，更关键的是要高效安全，信息不可被盗取，当时负责研究此事的人是麻省理工科学家约翰·利克利德(John Licklider)。

麻省理工科学家约翰·利克利德 

此处省略一堆过程与专业技术术语，反正如此这般，利克利德因为 ARPA 组织这个沟通交接需求无意中发明出“国际互联网网络”（the World Wide Web）。

互联网时代开启

事后证明，国不国防是一回事，这才是他们最伟大的发明。这种技术能做到资源共享与防止盗取的一个重要原因是可以将信息分解成“数据包”，将他们发送到目的地后可以重新组装，也就是“分组路由”的雏形。大家了解到这个程度就可以了，再往深里说意义不大，况且我也说不清楚，

而时间很快去到 1987 年，这是第二件事情，这一年苹果电脑公司向外界报道了一款可在网络上寻找资料的软件，名为“超级文件”（Hypertext）。

苹果 1987 年的“超级文件”软件

比如在电脑上打“ 设计史 太浓”就可以将当时整个网络与此相关的文字内容集中起来（当时网络上的内容其实非常有限），等于是谷歌百度的前身了。

后来这个软件进化为“超级媒体”（Hypermedia），除了可以检索文字，还可以找到图形、声音、电影及电视图像。

苹果软件“超级媒体”软件

再然后，苹果公司将这种技术跟日本索尼公司发明的 CD-ROM（compact disc read only memory，于 1982 年发明）进行结合，变成“互动光盘”，这种光盘就等于是如今网站的鼻祖版本了。在大致容量 600MGB 的 CD 中，苹果公司的工作人员往里面塞进了文字、图形、动画，而且形成一个复杂的索引架构。

CD-ROM 中的互动界面 

这样一来就形成一个灵活且可互动的内容库，大家可以根据需要选取想看的部分，有首页、二级栏目、三级栏目、内容详情页等。在此过程中还发明设计出一些后来常见的网站架构逻辑，比如“平行文本”、“多层”“矩阵”“网络系统”等，这里作很简单的介绍：

平行文本就是可以在看一篇文字时候可一边看到它相关的摘要跟缩写，这等于如今的鼠标经过效果。

网页中的“鼠标经过”效果

多层就是看一个内容的时候可以看到其它相关部分，等于如今网站中的“相关推荐”。

网页中的“相关推荐”效果

矩阵就是将资料布局到一个网格中方便大家查询，等于现在的产品系统，新闻系统一类。

网页中的“产品系统”效果

网络系统就是可以联系外部信息，其实就等于友情链接一类了。

当时间去到 1991 年，美国政府开始投入资金将“互联网”引入公共学校，而经过 6 年，世界上就有 3000 万个网络用户，2000 年左右，美国就有三分之一的家庭实现了联网。有流量就有商机，于是就有人将“互动光盘”这样的呈现方式搬到互联网上变成网站，变成一种宣传展示的渠道，不亦乐乎。

90 年代可口可乐的官网

所以最初的“互动光盘”设计其实就等于第一代网页设计。

网页设计的高速发展 1994 年时候，中国有个人因为公务出差去美国见证过互联网的神奇，回国之后辞职，在 1998 年创立了一个如今市值 1.8 万亿的公司—阿里巴巴，这人就是马云。

阿里巴巴早期的网页设计样式

20 世纪 90 年代恰好是网站建设数量急剧暴增的时候，充满了商机，大家可以理解为近几年短视频暴增一样，根据回顾统计，在 1997 年时候仅仅一年美国本土就新增了 80 万个新网页。

所以用“网页”一词是因为最初蛮多网站都是静态，网站后台是后来慢慢才发展形成。

1997 年时候的麦当劳网站设计

但网页设计最初的暴增还没有直接为平面设计师创造岗位，因为第一代网页 设计师 其实大部分由程序员转型而来。后来不断发展竞争升级才将程序、前端、网页设计及推广优化这样的岗位分来，以便有更专业的表现。

我在 2010 年时候开始从事网页设计，恰好是一个将网站建设不同岗位独立出来的时代。当时我所在公司中企动力属于国内最大型建站公司，大部分老同事都曾经是程序前端设计甚至推广这样一条龙为客户提供服务。

史太浓在 2010 年前后的网页设计

他们本质上就是从一名开发人员入行，所以他们会从实现效果端来规划设计，跟后来网页设计岗独立后完全不同。蛮多网页设计师其实根本不管程序实现问题，也因此产生出更多更好的视觉效果，反推程序开发与前端制作的进步。当时在公司经常见到的就是网页设计跟前端或者开发同事“干架”，争论要点就是很多效果程序根本做不出来。

史太浓在 2010 年前后的网页设计

这样的事情其实一直在全世界发生，所以网站制作技术也是以飞一般的速度在发展。比如我刚刚学会 Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起来，而程序开发端则是 asp 到 asp·net 到 php 到 java 等不同开发语言在不断进化。

史太浓在 2010 年前后的网页设计

这样的变化结果就是不断优化网页设计的表现效果。

那时候我们往往在掌握一门自认为很牛的必杀技后不到两年就也许会过时，最典型例子莫过于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因为人才稀缺，收入可以是我们的 2-3 倍，那时候最流行就是用 flash 做所谓的“体验馆”。

全 Flash 网站

“体验馆”的大致效果就是能在网站场景中做一些换部件，换颜色，或者点击指引箭头切换画面等操作。印象中当时有一个奢侈品平台站就是纯 flash 网站，开发制作费用高达 300 多万。

但好景不长，因为智能手机的崛起与 4G 通信技术的发展，互联网的主阵地慢慢往移动端迁移，而智能手机中的浏览器是明确不支持 flash 组件的。所以很快 flash 就跌落神坛，而我们这一代网页设计从业者可以说见证了全过程。

全 Flash 网站

当时身边就有同事因为精通 flash 被挖去甲方企业开发纯 flash 的眼镜商城，据说后来项目就没发展起来。

说到商城，网页设计还有一个重要的主题变化，就是从企业网站到平台网站到电子商城再到手机网站，App 应用，公众号，小程序这样的不断切换。到了移动端其实网页设计就被“UI 设计”（User Interface 用户界面）这样更专业化的称谓取代。

史太浓 2013 年前后的 UI 设计

因为革命性的屏幕触摸技术的诞生，很多网站本身就可以通过触屏控制，所以从定义上来说，UI 设计可以说包含了网页设计。

史太浓 2013 年前后的网页设计

随着移动互联网的不断发展其实也拔高了 UI 设计门槛，因为要考虑很多交互体验问题与技术规格标准，有点像当时乌尔姆学院做产品设计那一套，有很多理科属性的知识融入进来。

所以网页设计经过仅仅 30 年的发展，就走向细分领域的拆解，分裂出企业网站设计（偏向品牌与广告）、电商设计（偏向营销）跟移动端设计（偏向交互体验）。

史太浓 2018 年前后的电商网站设计

但不管如何，这个过程中平面设计的本质属性仍然没变，只是要解决的问题更多元化，更具体了。

根据历史纪录，美国的设计师杰西卡·哈芳德（JessicaHelfand）是较早以平面设计师身份参与到网页设计中的，比如 90 年代她为美国“发现频道”设计了网站。

美国“发现频道”90 年代的网站

哈芳德生于 1960 年，目前还活跃于设计圈，她也许是最有资格感叹互联网设计形式剧烈变化的人之一。

杰西卡·哈芳德

本期内容没有谈及太多具体人物及作品，因为在有限篇幅里本期内容已经高度浓缩，更多是在给大家整理一个框架。

关于网页设计发展的经历，也欢迎大家根据自己的体会参与到讨论中，说出你们的故事。

本期故事讲到这里，感谢各位，下期再会！

如何高效地进行网页设计？重点关注这7个要素 大家好，我是 Clippp。

阅读文章 >

欢迎关注作者的微信公众号「 设计史太浓 」：

今天要介绍的「効果音ラボ」（Sound Effect Lab）是一个日本免费 音效素材 网站，提供各种有趣的效果音让使用者在线预览播放、免费下载！从网站分类会看到各种效果类型，像是游戏战斗音效、表演或动画、人声、生活中会出现的声音、交通工具、环境音、操作系统按键声音和动植物大自然声音，虽然是日文网站，操作上并不会太困难，也可搭配浏览器的网页翻译功能使用。

网站中收录的所有音效素材都是由网站管理员录制，有些配音员只有录制人声部分，音效的版权归属仍属于网站，每个音效都有网页播放预览功能，也都有标题和简短说明，需要时只要点选后方的下载按钮就能保存 Mp3 格式。

至于最重要的使用规范，从「効果音ラボ」下载的音效在使用时无需向站方取得授权，不用标示出处来源，音效可提供个人、企业或公共机构免费使用，亦可修改、编辑或是转换为其他格式，但要注意的是禁止将音效使用在成人作品、违反公共秩序或犯罪行为，也不可将音效再次提供给其他人下载，如果是使用在影片制作（例如 YouTube 影片）也没问题。

効果音ラボ（Sound Effect Lab） 网站链接： https://soundeffect-lab.info/

使用教学

打开 Sound Effect Lab 网站，从上方选单点选要浏览的音效素材分类，其实网站对于效果音的分类相当清楚易懂，单从汉字来看也大略可以猜到是什么样的音效类型。

每个音效类别都有各种声音标题和简单介绍，像是表演的各种乐器声音，也有动画或游戏出现的卡通式音效，点选标题左侧「播放」可直接在浏览器试听。

另一个人声的音效分类，会依照不同的角色、年龄设定，录制一些像是 RPG 游戏会说的话，每个类别都有标示声优，听起来很热血很有趣，不过只有日文发音，大家可以去听听看。

生活中会出现的各种环境音，也可以在「効果音ラボ」找到，如果不知道每个标题代表的意思，很简单只要点选播放就好，直接用听的最简单。

当你找到想用的音效时，点选后方的「DL」就能将 素材下载 为 Mp3 格式保存。

值得一试的三个理由：

1. 「効果音ラボ」是一个日本免费 音效网站 ，提供各种效果音素材下载

2. 每个音效都有网页播放预览功能，点选就能下载为 Mp3 格式

3. 不用标示出处来源，音效可提供个人、企业或公共机构免费使用

免费可商用！提供超多风格音乐/音效素材下载的「Sampld」 本文要介绍的「Sampld」是一个免费下载、分享高音质免版权音乐音效平台，开发者考虑到当今社群媒体、短影片流行（像是 TikTok、Instagram 和 YouTube），希望提供让每个人都能轻松搜索并下载优质音乐素材的网站，以便在制作影片时作为背景音乐使用。

阅读文章 >

五月的第二波设计干货合集紧跟着就来了！这次的 干货合集 中，主要推荐了一些相对独特的设计工具，比如封面设计工具、设计文本管理工具、网络梗图生成器，等等。值得注意的是，其中好几个设计工具都借助人工智能来辅助完成设计，这个应该是未来 设计工具 的必然发展趋势吧。下面我们逐个看看：

1、快速封面设计工具 OpenGrph https://opengrph.blockscribers.com/

OpenGrph 是一个超级轻量级的封面制作工具，它特别适合给视频和博客来设计封面，其中包含 21 种优雅的字体搭配方案，88种背景图案，3种主题和2种模式，可以轻松拖拽元素来调整布局。这个工具总体上是非常容易上手的，唯一的问题是它的字体搭配方案都是英文的，有需求的同学自行取用吧。

2、超细致的宇宙主题3D图库 https://spacers.wannathis.one/

这是一套制作非常细致的宇宙主题的 3D 图库，图库当中包含 3 个角色，12种姿势，还包含各种星球、载具等等，可以超级快速搭建出颇为有趣的宇宙相关的场景。当然，这是一套收费的 3D 图库没错，但是它提供免费的 Demo 下载，如果你的团队正好有这样的需求，可以考虑买一套。

3、全链路设计开发文本内容管理工具 https://www.dittowords.com/drafting

Ditto 这个工具非常有意思，它从根本上是用来管理和处理数字产品当中的所有的文本素材的，不过它提供的功能支持几乎完美地贯穿了设计的全链路，从前期的构思，到中间的设计再到后期的开发，功能全都有，而且还能和 Figma 这样的设计工具无缝链接。正在寻找相关工具的设计师或者团队可以关注一下这个工具。

4、动态渐变气泡生成器 https://blobanimation.com/

这是一个非常简单的工具，它内置了大量的选项，来帮你生成一个完全自定义的 SVG 格式的动态渐变色气泡，从变化的速度到前后景的颜色都可以定制。设置好了之后，可以直接导出 SVG 代码，直接应用到网页或者 APP 之类的场合。这个工具是完全免费的。

5、人工智能网络梗图生成器 https://www.supermeme.ai/

这算是人工智能所能涉足的新领域——使用机器学习来生成网络梗图。虽然国内外梗图流行趋势略有不同，但是大体上还是相通的，这是一个提供免费试用的网络梗图生成工具，你可以在生成器中选择不同的主题，然后选择自己的模板或者直接使用内置模板，它就能给你生成一些有趣的梗图供你使用。有兴趣的同学可以先试试看。

6、开源免费的超有爱贴纸插画素材 https://openstickers.craftwork.design/

这个名为 Open Stickers 是一组超级有爱的贴纸插画素材，这些贴纸的风格充满涂鸦的质感，富有亲和力又非常有爱，它们可以用于风格温馨的海报、插画、网页、宣传物料，最重要的是它是完全免费的，而且都是矢量素材，可以在 Figma、Sketch、 AI 当中进行编辑处理。

7、基于人工智能的设计工具 Visily https://www.visily.ai/

按照官方的说法，Visily 这个工具能够像「做PPT一样做设计」，你可以直接通过拖拽和移动快速编辑出 UI 元素，使用大量的预设模板和 AI 辅助来完成整体的设计，而他们预设的受众是「非设计师」，也因此这个设计软件可能代表着未来设计软件的某种可能的发展方向。这款工具的诞生本就源自于它的开发者在自己试图完成 UI 时，发现这一困难险阻重重，于是生出想要给未经专业设计训练的人，创造一个能够辅助他们完成设计的工具。

8、免费插画素材搜集网站（梯子访问） https://freeillustrations.xyz/

除了一些风格独立的专门的插画图库以外，诸如 Free Illustrations 这样的网站则专注于搜集整理网上各种可供下载的免费插画、插画模板和小型插画库，虽然不是「大全套」式的系统图库，但是可以应付很多临时的设计需求，而且类别也非常丰富，值得收藏之后，仔细筛选。

往期干货：

第一波！2022年5月精选实用设计干货合集 五一假期结束了，给大家贡献一波设计干货吧！

阅读文章 >

第三波！2022年4月精选实用设计干货合集 大家好，4月的第3波实用设计干货合集来了！

阅读文章 >

第二波！2022年4月精选实用设计干货合集 大家好，这里是 4月的第2波实用设计干货合集！

阅读文章 >

20 世纪末到 21 世纪开始，宣传品牌与产品的阵地不再局限于印刷品，电视、电台及现场活动，而是出现了网站，网站可以链接更多陌生人，而且没有时空限制。

1997 年的谷歌网站

美国最火的设计风格只要有人将资料放到网上，远在日本的一名中学生都可以去学习了解，所以也打破了过去信息差的优势。本回我们要跟大家聊聊网页设计的发展，但在展开内容前，要搞清楚一个问题，就是网页设计属于平面设计吗？

国内早在差不多 20 年前，建站公司就开始独立存在，所以这个问题蛮有争议，尤其是 UI 设计也很成熟之后，大家更愿意认为此学科是独立的。

中国建于 1994 年的第一个网页，主要对外沟通

平面设计的定义不管怎么粉饰，简单而言就是：以某种目的，将文字、图像、图形安排在一起。网页设计也是如此，唯一区别是网页具有动态，但这种动态属于若干个静态设定的切换关系，其关键帧也是平面设计。

2003 年时候的淘宝网

我在国内蛮早就从事网页设计工作，早年甚至可以自己独立完成网站，除了页面设计，还包括套 ASP 程序（Active Server Pages 动态服务器页面），用 table 布局前端等，当然这些技术如今早已过时。

12 年前史太浓独立完成的网站

因此这段历史我就是参与者之一，所以本回不仅是对搜集资料的剪裁分析，还会结合不少自身经历体验跟大家分享。

首先我们来简单回顾下互联网的发展与网页设计的演变。

国际互联网络与超级媒体 互联网发展到如今已经像空气一样存在，断网已经如同缺氧那么严重，而互联网的诞生最初跟两件事情相关。

第一件大家也许比较熟悉，就是在 20 世纪 50 年代末美国国防部高级研究项目总署（the United States Department of Defense，Advanced ResearchProjects Agency，简称 ARPA）成立了。

美国国防部高级研究项目总署 logo

其成立的根本原因是冷战背景下，苏联不但先于美国在 1957 年将卫星送上太空，而且世界第一枚多级远程弹道火箭发射也试验成功，因此苏联宣称可以将核弹送往地球任何地区。这对美国而言实在太吓人，所以 ARPA 是一个专门研究国防技术的“事业部”，聚合美国当时最牛的几百位科学家，研究如何将最先进技术应用到美国国防。

人类第一个卫星由苏联在 1957 年发射

由于这些科学家当时分散于全国各地，因为如此厉害的科学家肯定本身有重要事务，而不是放着随传随到，因此大伙无法专门聚在一起专门干这事，而是远程协作，所以就需要一个有效的远程沟通工具。

这个工具不能只局限于语言声音，还要做到资源共享，更关键的是要高效安全，信息不可被盗取，当时负责研究此事的人是麻省理工科学家约翰·利克利德(John Licklider)。

麻省理工科学家约翰·利克利德 

此处省略一堆过程与专业技术术语，反正如此这般，利克利德因为 ARPA 组织这个沟通交接需求无意中发明出“国际互联网网络”（the World Wide Web）。

互联网时代开启

事后证明，国不国防是一回事，这才是他们最伟大的发明。这种技术能做到资源共享与防止盗取的一个重要原因是可以将信息分解成“数据包”，将他们发送到目的地后可以重新组装，也就是“分组路由”的雏形。大家了解到这个程度就可以了，再往深里说意义不大，况且我也说不清楚，

而时间很快去到 1987 年，这是第二件事情，这一年苹果电脑公司向外界报道了一款可在网络上寻找资料的软件，名为“超级文件”（Hypertext）。

苹果 1987 年的“超级文件”软件

比如在电脑上打“ 设计史 太浓”就可以将当时整个网络与此相关的文字内容集中起来（当时网络上的内容其实非常有限），等于是谷歌百度的前身了。

后来这个软件进化为“超级媒体”（Hypermedia），除了可以检索文字，还可以找到图形、声音、电影及电视图像。

苹果软件“超级媒体”软件

再然后，苹果公司将这种技术跟日本索尼公司发明的 CD-ROM（compact disc read only memory，于 1982 年发明）进行结合，变成“互动光盘”，这种光盘就等于是如今网站的鼻祖版本了。在大致容量 600MGB 的 CD 中，苹果公司的工作人员往里面塞进了文字、图形、动画，而且形成一个复杂的索引架构。

CD-ROM 中的互动界面 

这样一来就形成一个灵活且可互动的内容库，大家可以根据需要选取想看的部分，有首页、二级栏目、三级栏目、内容详情页等。在此过程中还发明设计出一些后来常见的网站架构逻辑，比如“平行文本”、“多层”“矩阵”“网络系统”等，这里作很简单的介绍：

平行文本就是可以在看一篇文字时候可一边看到它相关的摘要跟缩写，这等于如今的鼠标经过效果。

网页中的“鼠标经过”效果

多层就是看一个内容的时候可以看到其它相关部分，等于如今网站中的“相关推荐”。

网页中的“相关推荐”效果

矩阵就是将资料布局到一个网格中方便大家查询，等于现在的产品系统，新闻系统一类。

网页中的“产品系统”效果

网络系统就是可以联系外部信息，其实就等于友情链接一类了。

当时间去到 1991 年，美国政府开始投入资金将“互联网”引入公共学校，而经过 6 年，世界上就有 3000 万个网络用户，2000 年左右，美国就有三分之一的家庭实现了联网。有流量就有商机，于是就有人将“互动光盘”这样的呈现方式搬到互联网上变成网站，变成一种宣传展示的渠道，不亦乐乎。

90 年代可口可乐的官网

所以最初的“互动光盘”设计其实就等于第一代网页设计。

网页设计的高速发展 1994 年时候，中国有个人因为公务出差去美国见证过互联网的神奇，回国之后辞职，在 1998 年创立了一个如今市值 1.8 万亿的公司—阿里巴巴，这人就是马云。

阿里巴巴早期的网页设计样式

20 世纪 90 年代恰好是网站建设数量急剧暴增的时候，充满了商机，大家可以理解为近几年短视频暴增一样，根据回顾统计，在 1997 年时候仅仅一年美国本土就新增了 80 万个新网页。

所以用“网页”一词是因为最初蛮多网站都是静态，网站后台是后来慢慢才发展形成。

1997 年时候的麦当劳网站设计

但网页设计最初的暴增还没有直接为平面设计师创造岗位，因为第一代网页 设计师 其实大部分由程序员转型而来。后来不断发展竞争升级才将程序、前端、网页设计及推广优化这样的岗位分来，以便有更专业的表现。

我在 2010 年时候开始从事网页设计，恰好是一个将网站建设不同岗位独立出来的时代。当时我所在公司中企动力属于国内最大型建站公司，大部分老同事都曾经是程序前端设计甚至推广这样一条龙为客户提供服务。

史太浓在 2010 年前后的网页设计

他们本质上就是从一名开发人员入行，所以他们会从实现效果端来规划设计，跟后来网页设计岗独立后完全不同。蛮多网页设计师其实根本不管程序实现问题，也因此产生出更多更好的视觉效果，反推程序开发与前端制作的进步。当时在公司经常见到的就是网页设计跟前端或者开发同事“干架”，争论要点就是很多效果程序根本做不出来。

史太浓在 2010 年前后的网页设计

这样的事情其实一直在全世界发生，所以网站制作技术也是以飞一般的速度在发展。比如我刚刚学会 Table 布局不久，css+div 布局就成主流了，再然后 HTML+css+js 也成熟起来，而程序开发端则是 asp 到 asp·net 到 php 到 java 等不同开发语言在不断进化。

史太浓在 2010 年前后的网页设计

这样的变化结果就是不断优化网页设计的表现效果。

那时候我们往往在掌握一门自认为很牛的必杀技后不到两年就也许会过时，最典型例子莫过于 Flash 的“死亡”。2010 年前后，懂得用 fash 建站的人非常吃香，因为人才稀缺，收入可以是我们的 2-3 倍，那时候最流行就是用 flash 做所谓的“体验馆”。

全 Flash 网站

“体验馆”的大致效果就是能在网站场景中做一些换部件，换颜色，或者点击指引箭头切换画面等操作。印象中当时有一个奢侈品平台站就是纯 flash 网站，开发制作费用高达 300 多万。

但好景不长，因为智能手机的崛起与 4G 通信技术的发展，互联网的主阵地慢慢往移动端迁移，而智能手机中的浏览器是明确不支持 flash 组件的。所以很快 flash 就跌落神坛，而我们这一代网页设计从业者可以说见证了全过程。

全 Flash 网站

当时身边就有同事因为精通 flash 被挖去甲方企业开发纯 flash 的眼镜商城，据说后来项目就没发展起来。

说到商城，网页设计还有一个重要的主题变化，就是从企业网站到平台网站到电子商城再到手机网站，App 应用，公众号，小程序这样的不断切换。到了移动端其实网页设计就被“UI 设计”（User Interface 用户界面）这样更专业化的称谓取代。

史太浓 2013 年前后的 UI 设计

因为革命性的屏幕触摸技术的诞生，很多网站本身就可以通过触屏控制，所以从定义上来说，UI 设计可以说包含了网页设计。

史太浓 2013 年前后的网页设计

随着移动互联网的不断发展其实也拔高了 UI 设计门槛，因为要考虑很多交互体验问题与技术规格标准，有点像当时乌尔姆学院做产品设计那一套，有很多理科属性的知识融入进来。

所以网页设计经过仅仅 30 年的发展，就走向细分领域的拆解，分裂出企业网站设计（偏向品牌与广告）、电商设计（偏向营销）跟移动端设计（偏向交互体验）。

史太浓 2018 年前后的电商网站设计

但不管如何，这个过程中平面设计的本质属性仍然没变，只是要解决的问题更多元化，更具体了。

根据历史纪录，美国的设计师杰西卡·哈芳德（JessicaHelfand）是较早以平面设计师身份参与到网页设计中的，比如 90 年代她为美国“发现频道”设计了网站。

美国“发现频道”90 年代的网站

哈芳德生于 1960 年，目前还活跃于设计圈，她也许是最有资格感叹互联网设计形式剧烈变化的人之一。

杰西卡·哈芳德

本期内容没有谈及太多具体人物及作品，因为在有限篇幅里本期内容已经高度浓缩，更多是在给大家整理一个框架。

关于网页设计发展的经历，也欢迎大家根据自己的体会参与到讨论中，说出你们的故事。

本期故事讲到这里，感谢各位，下期再会！

如何高效地进行网页设计？重点关注这7个要素 大家好，我是 Clippp。

阅读文章 >

欢迎关注作者的微信公众号「 设计史太浓 」：