2019年度Web Design视觉交互探索

2019年过去了，这一年没有怎么写分享类博客，一方面是由于懒（平时跳舞和锻炼也占据了安静坐在电脑面前的时间，考驾照，摄影做视频等等基本也无缘于电脑🤒），一方面是因为这一年在对自己未来的Web发展方向做综合性铺垫（技术、思维、开源项目、学习资源探索等🔍）。总之，未来会有很多有意思的博文会陆续更新起来，2019年就暂时把我当做废人处理吧 ：）

从事Web设计开发很多年，这段期间，接触了各种风格的设计和前端交互，遇到不少坎坷和迷茫，也有很多网页设计时或者UI设计师转行，放弃等等。而我，一直坚持在网页视觉交互设计，对于数据类的交互（譬如vue，react等框架的运用和深入研究），比较少，适当的会用一用react做一些插件。在“视觉”这个方向上，也有很多的积累和探索，遇到太多的难处，不过都一一走过来了，2019年，更多的是一个方向上的探索和个人对于web长远发展的一次冒险，虽然今年几乎很少上站酷、UI中国、behance、dribbble等社区，但是每个月抽一定时间封闭式的研究和训练，还是带来了不少的益处。特别是对于未来网页设计方向的职业规划，乃至设计web技术的其它兴趣爱好或者职业，都提供了良好的指示作用。

这篇文章，我将从不同的维度，去分析我在Web视觉交互领域的一些探索，同时也算是一个年终汇总，看看自己又经历了些什么？又得到了些什么？

注：整篇文章，基本上是围绕自己的web发展方向来展开的思考，主要针对视觉领域，因此肯定会有其它方面的思考不全面，甚至是相冲突，这是不可避免的，本文仅代表自己的观点，作为一个参考和总结。

下面的内容，都将围绕 【思考 → 意义 → 乐趣 → 潜能】这条主线展开。

一、Web Design个人发展方向的 “思考”

这个图是我根据个人理解绘制的，主要从三个维度，来确定自己的网页未来发展方向。每个人对于每种细分的职业，在实践过程中，面对不同的市场变化，都会存在不同的改变，甚至是迷茫阶段，因此，需要一个系统的分析，来确定自己在web上的发展方向，一般来说，以3年-5年为一个阶段，5年-10年为一个阶段，10年-15年为一个阶段，目前，自己处于第二个阶段，是否能跨进第三个阶段，是否会选择其它的发展方向，这个就需要坐下来静静思考。

这个图有三个圆圈，他们都会交错产生其它的互联网与现实，职业与心理，学习与工作等不同维度的东西。

1.技术：

技术这个模块，是一个非常重要的模块，它可能直接影响到未来的学习方向，资金投入，时间计划，工作职业规划，因此技术上的细分，是每个人跨入某行业，甚至是工作过程中不断沉淀，改变要直接面对的一个问题。这里我大概列出了几个类别：

a) 视觉交互方向：

CSS3, HTML5, GSAP, UI, UX, PHOTOSHOP，Javascript，3D引擎，VR，SVG，绘画技能等，选择性学习使用Vue, React, Angular, Next.js, Nuxt.js等框架辅助Web端的数据交互功能。

b) 数据交互方向：

Vue, React, Angular, Next.js, Nuxt.js，商城，小程序，Hybrid App，后台系统，软件，大数据，服务器工具等，选择性熟悉CSS3，Javascript等辅助提升视觉交互效果。

c) 其它方向：

框架级开发，引擎开发，工具类等

2.线下运用

顾名思义，我在实际生活中，比如实体店面，一些传媒介质，宣传促销手段等，运用到Web的一些常见运用。网页不仅仅只能再电脑和手机上使用，其实它也隐藏于我们的现实生活中，也会在线下发挥其商业价值。也许，你未来想自己开一家咖啡店，或者摆个摊子，自己做一个小游戏，通过二维码的形式让路人参与进来，实现自己的推广需求等等，都是可能的。我也稍微例举了一些运用情况：

• O2O的HTML5小应用活动促销
• 实体店面网页下单、推广入口
• 触控屏、电子设备基于Web技术的模块
• 实体店Brand品牌衍生
• 二维码跳转到移动端Web展示渠道
• 运用Web技术的VR硬件支持等

在我们的日常生活中，有很多地方也会运用到web技术来作为一个营销和展示渠道，来完成人和机器的交互和通信。我们和可以把它理解为人机交互的一种运用方式。

3.兴趣扩展

兴趣是坚持的一个重要条件，然而，兴趣不代表就一定能坚持，更多的时候，是需要鼓励和强迫的。在网页设计领域，我相信很多人都是因为兴趣，看见某个网页非常有意思，才诞生学习它，乃至工作的想法。但是实际工作，往往不尽人意，市场，改稿，返工，创意，技术，薪资等等瓶颈。因此，兴趣维度，也是一个重要的思考点。

• 个人品牌（IP）构建
• 博客撰写（知识的分享、沉淀和积累，生活琐事的记录等）
• 设计一套网页的成就感
• 获得类似Awwwards奖项的荣誉感
• 扩展综合技能，培养可能衍生的兴趣爱（视频拍摄制作、插画、UI、前端、后端等）
• 使用CMS让自己的前端“活起来”的学习动力

综上，我因为对视觉交互有极大的兴趣，依然专注到视觉交互领域，因此我在技术层面会更多注重视觉交互上的一些学习和提升。当然在设计一个网站的过程中，也会涉及到素材的制作，比如视频拍摄和后期，图片的合成，绘画元素，简单的插画元等。反之，如果你专注软件开发等领域，对于数据的处理要求就比视觉要大许多，学习方向和学习方式都会不一样。不论是数据还是视觉，“web性能、代码规范、工具的使用” 等都是需要不断研究积累的重要方面。 有明确的方向，才会有更深入的学习和研究。我不跟风，但我也不会两耳不闻窗外事，尽自己最多的时间安排，去学习永远也学不完的知识，足矣。

二、让Web充分发挥其商业价值的 “意义”

说句俗话：没有利益的学习过程，是没有驱动力的。（适用于部分设计开发者，因为大家都得吃饭生存，把自己喜欢的事情做成职业，很难也很容易，把自己不喜欢的事情做成职业，很难也很容易）

知识永远也学不完，不论是UI还是前后端开发，互联网知识体系一直在不断刷新，我们在学习的过程中，怎样才能坚持下去？网页设计的竞争越来越大，市面上太多的APP，小程序，那么，是不是Web就没有市场了？如果看不清这个问题，也许，剩下的就是转行，或者简简单单混下去。 做了太多的网站项目，有外包，有产品，有插件，有CMS，有所谓的H5，它们都用各自的价值给客户创造利益，同时，也保障了设计师和开发者的生存可能。在这个过程中，我对Web的商业价值（ 针对视觉交互的方向 ），有自己的一些见解和看法。 下图展示了一个Web从设计到上线最笼统的过程示意图，要让一个web发挥其威力，乃至商业价值，必然要求有这一系列的过程，让其呈现到人们眼中，使用到人们手中。

UI通常是网页的一个敲门砖，随着互联网的快速进化，人们对UI的要求也越来越高，人的审美在逐渐提高，人的选择在逐渐增多。越来越多的人，掌握了良好的UI技能，PS，AE动画，绘画插画等等，这是一个职业刚需，然而，对于Web来说，能否高度还原一份UI设计，是直接关系到这个网页未来的生存的长远价值的。UI是非常重要的一环，它是最外层的，也是人优先接触的一环，其次就是前端。 前端让人在操作网页时，有良好的引导和体验，让其完成一系列操作，达到网站的目的。比如表单的填写，错误提示，弹出窗口，引导方式，交互动画等等，都是为了让人和网页中的内容互动起来，这时候，前端对于让一个网页上线和运营，就起到了关键作用。 就目前来说，市面上有越来越多的拖拽建站，智能建站，快速建站模板等等工具，帮助人们快速完成一个基础网站的搭建。这是互联网发展的必然趋势，也是网页设计时必须面对的和AI的一个巨大挑战，你可能失业，也可能崛起。

就我而言，我依然专注在视觉交互领域，那么，必然对于一些JS脚本引擎的学习和使用，对于一些类似Webpack的自动化工具的使用，有刚性的学习需求，这就意味着学习难度，学习时间增长，学习成本增加，对硬件，电脑的要求也在逐渐增加。 为什么我要执着于对前端技术的学习和研究？ 我其实是设计出身，杂乱无章啥都做，由一个个人博客，改版数十次，造就了现在“需要不断熟悉一套Web呈现需要的过程和技术”。我可以不去学习代码，可以不去学习视频拍摄，可以不去学习服务器等知识，但是：

• 熟悉UI设计的人越来越普遍，竞争只会越来越大，市场基本处于一个两极分化状态（“思维层次，职业报酬，自我营销，个人品牌”的差异）
• 市面上越来越多的酷炫UI, 很难找到合适的前端开发完成其视觉交互效果，或者开发成本比较高，大多数成品网站都大打折扣
• 越来越多的前端开发转移到了数据、工具、应用、游戏等领域的开发，常用的视觉类技能（比如CSS3，SVG等运用较少），不能满足大多数Web设计的需求
• 网站前后端定制成本高，预算不足的情况就需要牺牲大部分UI来让其落地
• 越来越多的网站，非常注重细节上的交互创意，这久需要前端有比较良好的动画相关的基本功，学会运用各种引擎工具。因为单纯凭UI上做原创和创意，是非常难的，更多时候可以从交互上做创意
• 前端技术的成熟和不断发展，需要考虑到项目的扩展性和维护性，与UI界面的融合性，需要掌握一些必须的模块化知识，自动化知识以满足项目需要

鉴于上面的一些原因，我自己经常遇到不能满足web界面开发的需求的情况，因此也在不断学习和提升视觉方面的综合能力，能够高质量并快速还原大部分“想法”！我总结下面一些方法，对于一些对于视觉交互有高要求的网站，如何让他更好的落地，去实现其未来的商业价值。（当然，不仅仅是商业价值，一个web的落地，还包含了更多潜在的价值和品牌传播能力。）

• a) 夯实自身UI基本功，比如Photoshop各种工具的灵活搭配运用，能够创造合适的素材，这样能够提高前端开发时素材的利用效率
• b) 培养与身边符合自己开发需求的前端和后端人员的团队协作能力，增强项目的可落地性
• c) 在有一定条件的基础上，UI要适当学习前端的一些知识（比如网格系统，可以借鉴bootstrap的网格系统；动画过渡常识；3D的一些技术需求）；反之，前端也需要学习UI的一些知识（比如图片、素材的处理；软件工具的搭配使用；配色知识），技能互补才能最大限度避免任务交接时的冲突
• d) 建立一个自己的个人博客，作为知识沉淀，项目汇总的入口，同时也可以方便建立个人品牌，利于人与人之间的学习分享交流
• e) 开阔眼界，多看看不同行业的一些东西，可以找到灵感，培养出一些良好的习惯（可能是你根本没想过的，预料之外的好习惯），利于找到符合自己的设计和开发切入点
• f) 在有一定条件的基础上，可以自己学习和掌握一些必要的前后端开发技能
• g) 不要放弃对自己的一张图片或者一个视频强落地的可能性，作为Web来说，无法落地( 或者长期找不到，或者工作中的条件不允许，或者没有预算找到一个开发者去完成它) 的一张图或者一个演示效果视频，是很可惜的，也无法呈现Web所谓的营销能力和商业价值。

说的这些有点理论，但是也是自己遇到的问题的归纳总结，可以作为一个简单的思考。

三、适时改变自己的 “乐趣”

做互联网的，不与时俱进，害怕改变，就会被淘汰，这是很残酷的事实。我这里说的改变，并不是逼着一个人去做排斥的事情，做一些和自己未来不相符的事情，有些事情做了确实是浪费时间，不如花点心思增加自己的造血能力，增强基本功，这样不论面对什么项目，面对什么客户都能够有应对的策略。找到自己的发展方向，适时改变战略和学习方法，也是我自己不断学习和探索的一种生活方式。从身边的一些可以落实的点点滴滴去改变，以适应Web市场（国内市场和全球市场，在视觉交互层面上有着较大的差异和深度，因此如果你只局限于国内的视觉层面的网页设计，那么也许你可以按照自己的思路走其它适合自己的网页设计道路，我依然还是针对视觉交互层面做一些思考） 换一个角度，我们设计一个网页，从风格上、色彩上、字体大小运用上、按钮或者图片的交互方式上、鼠标滚动时的页面元素侦听动态上等等，都会因为时间变化而不断发生改变。然而我坚信，有时候，Web的风格也是一个轮回。打个比方，有一种设计趋势的变化是【拟物→质感酷炫→扁平化→高亮阴影→插画插图】，然而某些网站，正在走一些反方向的变化【插画插图→高亮阴影→扁平化→质感酷炫→拟物】，这种变化之上，对于前端开发，是一些细微的交互和技术的变革。Web的有趣，就在于它可以从各个角度去反馈人的内心，去呈现设计者的思想，也会反映出开发者的技术深度。

所以我依然很喜欢视觉交互方向的Web Design，这个兴趣乃至职业方向虽然不会改变，但是我也不得不寻求一些其它的改变：

• 代码尽量规范：不论是一些基础的HTML，CSS前端代码还是文件结构，文件夹和文件命名，都尽量做到规范，满足W3C的一些基本标准，满足SEO的标准
• 养成编写文档的好习惯：真的非常重要，不论是做了一个插件还是一个工具，还是一个轮子，或者一套系统，没有清晰地使用文档和开发文档，过一两个月，你会忘记最重要的一些部分；对于国外用户，文档是项目的必须交付品（大多客户喜欢HTML文档，方便交互和使用）
• 大胆开源和分享：现在大多优秀的设计和前端开发资源，都是经开源或者专人分享出来传播交流，形成良好的一个生态圈，所以不要害怕自己的想法，不要害怕用现成的工具，遵守协议，利用流行的工具和平台展示出来，才能够从很多方面发现自己的不足，发现属于你的市场。
• 增加造血能力：相隔一段时间后，如果长期不使用一些技术，基本功都可能变弱，这就需要重新巩固基础，利用这些基础，做一些自己想做的小项目或者小插件，让自己的脑子活动起来。

往往这几个小小的方面，就涉及了太多的改变，改变生活方式，改变工作方式，改变学习方式，改变时间管理方式，改变做某些事的态度，改变对某些人的态度。往往改变是需要强迫力的，并不是你喜欢，或者你愿意，就会自然而然去做，很多时候还是需要提醒自己，去完成它！ 有时候，学会，是在自己的强制之下一点一滴学会的。如果某些改变不适合自己，可以尽早的放弃它，寻找更好的方式方法。

往后继续思考：未来，也许我只是为了给我自己做一个记录生活的博客，给自己的小店做一个营销的入口，仅此而已。坚持，有时候，真的不需要太多负责的市场分析、战略定位。因为我自身就是一个产品，自身就是一个品牌，只有不断打磨它，才能把自己的Web做到更好，满足更广阔的市场空间和客户群体。

上面这个图，表现了我自身各个因素的一种演变关系。做Web是一件非常有趣的事情，改变自己，也是一件有趣的事情，它总是会让你发现一些惊喜。

四、趋势与工具可以不断挖掘 “潜能”

我们经常可以在各个国内国外网站看到很多人分享的设计趋势，开发趋势，设计工具，开发工具，效率软件。这些东西永远看不完，甚至近年都是大同小异，其实说来说去都不外乎几个字：

多观察，多学习，多试验。

多观察：

不论你是否有梯子，你都要想方设法多看英文原版文章，因为大部分翻译引进的文章，会有几个月乃至几年的时间滞留，这段时间，也许是你发现自己新的兴趣新的技能或者新的赚钱方式的时间。 不要吝啬于只看一些烂大街的网红站点，一些不知名的，有趣的都可以看看，从中发现Web的乐趣，发现其实一个网址，也能给人带来很多神经上的触动。 不要忽略google广告，很多时候，谷歌广告比你自己更懂你，你可以从广告中发现很多意想不到的惊喜。
对于一些前端框架或者语言，对于一些逐渐运用广泛的设计，也需要多观察：观察它们用于哪类项目？针对哪些细分市场？适合使用哪些技术来实现？观察，绝不是单纯打开网页，欣赏一番那么简单。 另外，观察，也体现了搜索引擎的搜索能力，关键词的把握，精确找到自己想要的内容和问答，也是一个要长期训练的技能。

再深入一点，学会利用大数据，比如下图是来自Q-Success的截至2019年全球最流行的内容管理系统数据，有开源软件，有云建站平台，它们用于配合前端完成网站的内容管理技术支持的数据，选择一款自己喜欢的，乃至全球认可的开源系统学习一些后端，甚至深入后端做插件定制和功能定制，也是需要提高自己的观察能力来进行选择的。

多学习：

有了上一步的观察，你可能会使用Chrome的Inspect工具，去看看网页里面用了哪些技术，用了哪些CSS代码，或者用了哪些框架。你可以多从细节处，发现一些有趣的交互方式。当然，很多网站是经过webpack或其他工具打包的，因此某些代码不一定容易理解，此方法并不适用于大部分人。 你也可以根据自己的习惯，去发现一些有趣的网站，他们用了哪些设计方式，有没有可能成为大家眼中的“趋势”？ 学习，那就对了，学习，也是探索。

曾经开发前端项目，不习惯使用webpack或者gulp来搭建脚手架，提高开发效率和维护性；曾经设计一套UI，不习惯使用现成的形状工具，或者开源免费的素材，进行改造和训练。现在， 要学会灵活运用。 当然有一点一定要提醒自己：不要失去基本功，素材创造能力。拥有较强的造血能力，可以在你没有合适的素材和资源的情况下，让你做出自己想做的东西，哪怕那个东西一点也拿不出手。但是，它体现了你的创造力。

多试验：

多做一些小项目，或者一些小工具，你可以不公开，作为自己开发设计的一些工具或者资源；你也可以开源到github，让大家一起帮你找到缺陷，不断升级优化找到自己的强项和弱项，找到自己的前进方向。 多使用一些工具，比如Node.js，比如google开源图标，比如bootstrap及其衍生品等等，研究他们的开发初衷，你可以收货不小的基本功训练方向。 总之，实战之后，你就知道了，什么工具适合提高自己的Web设计或开发效率，什么趋势适合自己学习和模仿，什么灵感适合自己去微创新。

有时候，你确实可能需要安安静静，闭门造车一小段时间，让自己的大脑和思维活跃起来，因为只有这样，你才能随时保持自己的初心，明确自己的发展方向和训练模式。

五、结语

这篇年度汇总，并没有罗列一堆技术性的问题，我本身更多专注于探索与Web的设计和视觉交互相关的有趣的东西，我觉得，方向是非常重要。方向没有绝对的对错，哪怕曾经我走的弯路非常多，才造就了自己的杂乱无章。方向，代表了下一步你将做出各种各样维度的选择，有时候，选择，真的比努力要重要。对自己的Web Design生涯做了一个整体上的思考，我觉得十分有趣。2019年，我也沉淀了一些技术上的东西，训练了自己在职业和兴趣之间的磨合能力。2020年，我会在一定时间，继续更新自己的博客和资源，共同学习共同进步，一起发现，Web，其实真的非常有趣！