Featured Image

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,其实真的非常有趣!

    本文出自没位道|Chuckie Chang中文博客,转载请保留出处,谢谢!

    注意:本站部分文章用于书籍出版,为了避免非法转载造成的利益和法律问题,Copy转载本文需注明出处("Chuckie Chang"或"没位道")和网址(本文URL,或者作者同步发布的站酷、知乎、UI中国、简书或其它中文第三方平台URL)。


    年度 Web 交互设计 前端开发 UI 

    评论

      评论正在努力加载...
    分享按钮
    image