2019年過去了，這一年沒有怎么寫分享類博客，一方面是由于懶（平時(shí)跳舞和鍛煉也占據(jù)了安靜坐在電腦面前的時(shí)間，考駕照，攝影做視頻等等基本也無緣于電腦??），一方面是因?yàn)檫@一年在對(duì)自己未來的Web發(fā)展方向做綜合性鋪墊（技術(shù)、思維、開源項(xiàng)目、學(xué)習(xí)資源探索等??）?？傊?，未來會(huì)有很多有意思的博文會(huì)陸續(xù)更新起來，2019年就暫時(shí)把我當(dāng)做廢人處理吧 ：）

從事Web設(shè)計(jì)開發(fā)很多年，這段期間，接觸了各種風(fēng)格的設(shè)計(jì)和前端交互，遇到不少坎坷和迷茫，也有很多網(wǎng)頁(yè)設(shè)計(jì)時(shí)或者UI設(shè)計(jì)師轉(zhuǎn)行，放棄等等。而我，一直堅(jiān)持在網(wǎng)頁(yè)視覺交互設(shè)計(jì)，對(duì)于數(shù)據(jù)類的交互（譬如vue，react等框架的運(yùn)用和深入研究），比較少，適當(dāng)?shù)臅?huì)用一用react做一些插件。在“視覺”這個(gè)方向上，也有很多的積累和探索，遇到太多的難處，不過都一一走過來了，2019年，更多的是一個(gè)方向上的探索和個(gè)人對(duì)于web長(zhǎng)遠(yuǎn)發(fā)展的一次冒險(xiǎn)，雖然今年幾乎很少上站酷、UI中國(guó)、behance、dribbble等社區(qū)，但是每個(gè)月抽一定時(shí)間封閉式的研究和訓(xùn)練，還是帶來了不少的益處。特別是對(duì)于未來網(wǎng)頁(yè)設(shè)計(jì)方向的職業(yè)規(guī)劃，乃至設(shè)計(jì)web技術(shù)的其它興趣愛好或者職業(yè)，都提供了良好的指示作用。

這篇文章，我將從不同的維度，去分析我在Web視覺交互領(lǐng)域的一些探索，同時(shí)也算是一個(gè)年終匯總，看看自己又經(jīng)歷了些什么？又得到了些什么？

注：整篇文章，基本上是圍繞自己的web發(fā)展方向來展開的思考，主要針對(duì)視覺領(lǐng)域，因此肯定會(huì)有其它方面的思考不全面，甚至是相沖突，這是不可避免的，本文僅代表自己的觀點(diǎn)，作為一個(gè)參考和總結(jié)。

下面的內(nèi)容，都將圍繞?【思考 → 意義 → 樂趣 → 潛能】這條主線展開。

一、Web Design個(gè)人發(fā)展方向的 “思考”

這個(gè)圖是我根據(jù)個(gè)人理解繪制的，主要從三個(gè)維度，來確定自己的網(wǎng)頁(yè)未來發(fā)展方向。每個(gè)人對(duì)于每種細(xì)分的職業(yè)，在實(shí)踐過程中，面對(duì)不同的市場(chǎng)變化，都會(huì)存在不同的改變，甚至是迷茫階段，因此，需要一個(gè)系統(tǒng)的分析，來確定自己在web上的發(fā)展方向，一般來說，以3年-5年為一個(gè)階段，5年-10年為一個(gè)階段，10年-15年為一個(gè)階段，目前，自己處于第二個(gè)階段，是否能跨進(jìn)第三個(gè)階段，是否會(huì)選擇其它的發(fā)展方向，這個(gè)就需要坐下來靜靜思考。

這個(gè)圖有三個(gè)圓圈，他們都會(huì)交錯(cuò)產(chǎn)生其它的互聯(lián)網(wǎng)與現(xiàn)實(shí)，職業(yè)與心理，學(xué)習(xí)與工作等不同維度的東西。

1.技術(shù)：

技術(shù)這個(gè)模塊，是一個(gè)非常重要的模塊，它可能直接影響到未來的學(xué)習(xí)方向，資金投入，時(shí)間計(jì)劃，工作職業(yè)規(guī)劃，因此技術(shù)上的細(xì)分，是每個(gè)人跨入某行業(yè)，甚至是工作過程中不斷沉淀，改變要直接面對(duì)的一個(gè)問題。這里我大概列出了幾個(gè)類別：

a) 視覺交互方向：

CSS3, HTML5, GSAP, UI, UX, PHOTOSHOP，Javascript，3D引擎，VR，SVG，繪畫技能等，選擇性學(xué)習(xí)使用Vue, React, Angular, Next.js, Nuxt.js等框架輔助Web端的數(shù)據(jù)交互功能。

b) 數(shù)據(jù)交互方向：

Vue, React, Angular, Next.js, Nuxt.js，商城，小程序，Hybrid App，后臺(tái)系統(tǒng)，軟件，大數(shù)據(jù)，服務(wù)器工具等，選擇性熟悉CSS3，Javascript等輔助提升視覺交互效果。

c) 其它方向：

框架級(jí)開發(fā)，引擎開發(fā)，工具類等

2.線下運(yùn)用

顧名思義，我在實(shí)際生活中，比如實(shí)體店面，一些傳媒介質(zhì)，宣傳促銷手段等，運(yùn)用到Web的一些常見運(yùn)用。網(wǎng)頁(yè)不僅僅只能再電腦和手機(jī)上使用，其實(shí)它也隱藏于我們的現(xiàn)實(shí)生活中，也會(huì)在線下發(fā)揮其商業(yè)價(jià)值。也許，你未來想自己開一家咖啡店，或者擺個(gè)攤子，自己做一個(gè)小游戲，通過二維碼的形式讓路人參與進(jìn)來，實(shí)現(xiàn)自己的推廣需求等等，都是可能的。我也稍微例舉了一些運(yùn)用情況：

-?O2O的HTML5小應(yīng)用活動(dòng)促銷

-?實(shí)體店面網(wǎng)頁(yè)下單、推廣入口

-?觸控屏、電子設(shè)備基于Web技術(shù)的模塊

-?實(shí)體店Brand品牌衍生

-?二維碼跳轉(zhuǎn)到移動(dòng)端Web展示渠道

-?運(yùn)用Web技術(shù)的VR硬件支持等

在我們的日常生活中，有很多地方也會(huì)運(yùn)用到web技術(shù)來作為一個(gè)營(yíng)銷和展示渠道，來完成人和機(jī)器的交互和通信。我們和可以把它理解為人機(jī)交互的一種運(yùn)用方式。

3.興趣擴(kuò)展

興趣是堅(jiān)持的一個(gè)重要條件，然而，興趣不代表就一定能堅(jiān)持，更多的時(shí)候，是需要鼓勵(lì)和強(qiáng)迫的。在網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，我相信很多人都是因?yàn)榕d趣，看見某個(gè)網(wǎng)頁(yè)非常有意思，才誕生學(xué)習(xí)它，乃至工作的想法。但是實(shí)際工作，往往不盡人意，市場(chǎng)，改稿，返工，創(chuàng)意，技術(shù)，薪資等等瓶頸。因此，興趣維度，也是一個(gè)重要的思考點(diǎn)。

- 個(gè)人品牌（IP）構(gòu)建

-?博客撰寫（知識(shí)的分享、沉淀和積累，生活瑣事的記錄等）

-?設(shè)計(jì)一套網(wǎng)頁(yè)的成就感

-?獲得類似Awwwards獎(jiǎng)項(xiàng)的榮譽(yù)感

-?擴(kuò)展綜合技能，培養(yǎng)可能衍生的興趣愛（視頻拍攝制作、插畫、UI、前端、后端等）

-?使用CMS讓自己的前端“活起來”的學(xué)習(xí)動(dòng)力

綜上，我因?yàn)閷?duì)視覺交互有極大的興趣，依然專注到視覺交互領(lǐng)域，因此我在技術(shù)層面會(huì)更多注重視覺交互上的一些學(xué)習(xí)和提升。當(dāng)然在設(shè)計(jì)一個(gè)網(wǎng)站的過程中，也會(huì)涉及到素材的制作，比如視頻拍攝和后期，圖片的合成，繪畫元素，簡(jiǎn)單的插畫元等。反之，如果你專注軟件開發(fā)等領(lǐng)域，對(duì)于數(shù)據(jù)的處理要求就比視覺要大許多，學(xué)習(xí)方向和學(xué)習(xí)方式都會(huì)不一樣。不論是數(shù)據(jù)還是視覺，“web性能、代碼規(guī)范、工具的使用” 等都是需要不斷研究積累的重要方面。有明確的方向，才會(huì)有更深入的學(xué)習(xí)和研究。我不跟風(fēng)，但我也不會(huì)兩耳不聞窗外事，盡自己最多的時(shí)間安排，去學(xué)習(xí)永遠(yuǎn)也學(xué)不完的知識(shí)，足矣。

二、讓W(xué)eb充分發(fā)揮其商業(yè)價(jià)值的 “意義”

說句俗話：沒有利益的學(xué)習(xí)過程，是沒有驅(qū)動(dòng)力的。（適用于部分設(shè)計(jì)開發(fā)者，因?yàn)榇蠹叶嫉贸燥埳?，把自己喜歡的事情做成職業(yè)，很難也很容易，把自己不喜歡的事情做成職業(yè)，很難也很容易）

知識(shí)永遠(yuǎn)也學(xué)不完，不論是UI還是前后端開發(fā)，互聯(lián)網(wǎng)知識(shí)體系一直在不斷刷新，我們?cè)趯W(xué)習(xí)的過程中，怎樣才能堅(jiān)持下去？網(wǎng)頁(yè)設(shè)計(jì)的競(jìng)爭(zhēng)越來越大，市面上太多的APP，小程序，那么，是不是Web就沒有市場(chǎng)了？如果看不清這個(gè)問題，也許，剩下的就是轉(zhuǎn)行，或者簡(jiǎn)簡(jiǎn)單單混下去。

做了太多的網(wǎng)站項(xiàng)目，有外包，有產(chǎn)品，有插件，有CMS，有所謂的H5，它們都用各自的價(jià)值給客戶創(chuàng)造利益，同時(shí)，也保障了設(shè)計(jì)師和開發(fā)者的生存可能。在這個(gè)過程中，我對(duì)Web的商業(yè)價(jià)值（針對(duì)視覺交互的方向），有自己的一些見解和看法。

下圖展示了一個(gè)Web從設(shè)計(jì)到上線最籠統(tǒng)的過程示意圖，要讓一個(gè)web發(fā)揮其威力，乃至商業(yè)價(jià)值，必然要求有這一系列的過程，讓其呈現(xiàn)到人們眼中，使用到人們手中。

UI通常是網(wǎng)頁(yè)的一個(gè)敲門磚，隨著互聯(lián)網(wǎng)的快速進(jìn)化，人們對(duì)UI的要求也越來越高，人的審美在逐漸提高，人的選擇在逐漸增多。越來越多的人，掌握了良好的UI技能，PS，AE動(dòng)畫，繪畫插畫等等，這是一個(gè)職業(yè)剛需，然而，對(duì)于Web來說，能否高度還原一份UI設(shè)計(jì)，是直接關(guān)系到這個(gè)網(wǎng)頁(yè)未來的生存的長(zhǎng)遠(yuǎn)價(jià)值的。UI是非常重要的一環(huán)，它是最外層的，也是人優(yōu)先接觸的一環(huán)，其次就是前端。

前端讓人在操作網(wǎng)頁(yè)時(shí)，有良好的引導(dǎo)和體驗(yàn)，讓其完成一系列操作，達(dá)到網(wǎng)站的目的。比如表單的填寫，錯(cuò)誤提示，彈出窗口，引導(dǎo)方式，交互動(dòng)畫等等，都是為了讓人和網(wǎng)頁(yè)中的內(nèi)容互動(dòng)起來，這時(shí)候，前端對(duì)于讓一個(gè)網(wǎng)頁(yè)上線和運(yùn)營(yíng)，就起到了關(guān)鍵作用。

就目前來說，市面上有越來越多的拖拽建站，智能建站，快速建站模板等等工具，幫助人們快速完成一個(gè)基礎(chǔ)網(wǎng)站的搭建。這是互聯(lián)網(wǎng)發(fā)展的必然趨勢(shì)，也是網(wǎng)頁(yè)設(shè)計(jì)時(shí)必須面對(duì)的和AI的一個(gè)巨大挑戰(zhàn)，你可能失業(yè)，也可能崛起。

就我而言，我依然專注在視覺交互領(lǐng)域，那么，必然對(duì)于一些JS腳本引擎的學(xué)習(xí)和使用，對(duì)于一些類似Webpack的自動(dòng)化工具的使用，有剛性的學(xué)習(xí)需求，這就意味著學(xué)習(xí)難度，學(xué)習(xí)時(shí)間增長(zhǎng)，學(xué)習(xí)成本增加，對(duì)硬件，電腦的要求也在逐漸增加。為什么我要執(zhí)著于對(duì)前端技術(shù)的學(xué)習(xí)和研究？我其實(shí)是設(shè)計(jì)出身，雜亂無章啥都做，由一個(gè)個(gè)人博客，改版數(shù)十次，造就了現(xiàn)在“需要不斷熟悉一套Web呈現(xiàn)需要的過程和技術(shù)”。我可以不去學(xué)習(xí)代碼，可以不去學(xué)習(xí)視頻拍攝，可以不去學(xué)習(xí)服務(wù)器等知識(shí)，但是：

++ 熟悉UI設(shè)計(jì)的人越來越普遍，競(jìng)爭(zhēng)只會(huì)越來越大，市場(chǎng)基本處于一個(gè)兩極分化狀態(tài)（“思維層次，職業(yè)報(bào)酬，自我營(yíng)銷，個(gè)人品牌”的差異）

++?市面上越來越多的酷炫UI, 很難找到合適的前端開發(fā)完成其視覺交互效果，或者開發(fā)成本比較高，大多數(shù)成品網(wǎng)站都大打折扣

++?越來越多的前端開發(fā)轉(zhuǎn)移到了數(shù)據(jù)、工具、應(yīng)用、游戲等領(lǐng)域的開發(fā)，常用的視覺類技能（比如CSS3，SVG等運(yùn)用較少），不能滿足大多數(shù)Web設(shè)計(jì)的需求

++?網(wǎng)站前后端定制成本高，預(yù)算不足的情況就需要犧牲大部分UI來讓其落地

++?越來越多的網(wǎng)站，非常注重細(xì)節(jié)上的交互創(chuàng)意，這久需要前端有比較良好的動(dòng)畫相關(guān)的基本功，學(xué)會(huì)運(yùn)用各種引擎工具。因?yàn)閱渭儜{UI上做原創(chuàng)和創(chuàng)意，是非常難的，更多時(shí)候可以從交互上做創(chuàng)意

++?前端技術(shù)的成熟和不斷發(fā)展，需要考慮到項(xiàng)目的擴(kuò)展性和維護(hù)性，與UI界面的融合性，需要掌握一些必須的模塊化知識(shí)，自動(dòng)化知識(shí)以滿足項(xiàng)目需要

鑒于上面的一些原因，我自己經(jīng)常遇到不能滿足web界面開發(fā)的需求的情況，因此也在不斷學(xué)習(xí)和提升視覺方面的綜合能力，能夠高質(zhì)量并快速還原大部分“想法”！我總結(jié)下面一些方法，對(duì)于一些對(duì)于視覺交互有高要求的網(wǎng)站，如何讓他更好的落地，去實(shí)現(xiàn)其未來的商業(yè)價(jià)值。（當(dāng)然，不僅僅是商業(yè)價(jià)值，一個(gè)web的落地，還包含了更多潛在的價(jià)值和品牌傳播能力。）

a) 夯實(shí)自身UI基本功，比如Photoshop各種工具的靈活搭配運(yùn)用，能夠創(chuàng)造合適的素材，這樣能夠提高前端開發(fā)時(shí)素材的利用效率

b) 培養(yǎng)與身邊符合自己開發(fā)需求的前端和后端人員的團(tuán)隊(duì)協(xié)作能力，增強(qiáng)項(xiàng)目的可落地性

c) 在有一定條件的基礎(chǔ)上，UI要適當(dāng)學(xué)習(xí)前端的一些知識(shí)（比如網(wǎng)格系統(tǒng)，可以借鑒bootstrap的網(wǎng)格系統(tǒng)；動(dòng)畫過渡常識(shí)；3D的一些技術(shù)需求）；反之，前端也需要學(xué)習(xí)UI的一些知識(shí)（比如圖片、素材的處理；軟件工具的搭配使用；配色知識(shí)），技能互補(bǔ)才能最大限度避免任務(wù)交接時(shí)的沖突

d) 建立一個(gè)自己的個(gè)人博客，作為知識(shí)沉淀，項(xiàng)目匯總的入口，同時(shí)也可以方便建立個(gè)人品牌，利于人與人之間的學(xué)習(xí)分享交流

e) 開闊眼界，多看看不同行業(yè)的一些東西，可以找到靈感，培養(yǎng)出一些良好的習(xí)慣（可能是你根本沒想過的，預(yù)料之外的好習(xí)慣），利于找到符合自己的設(shè)計(jì)和開發(fā)切入點(diǎn)

f) 在有一定條件的基礎(chǔ)上，可以自己學(xué)習(xí)和掌握一些必要的前后端開發(fā)技能

g) 不要放棄對(duì)自己的一張圖片或者一個(gè)視頻強(qiáng)落地的可能性，作為Web來說，無法落地(或者長(zhǎng)期找不到，或者工作中的條件不允許，或者沒有預(yù)算找到一個(gè)開發(fā)者去完成它)的一張圖或者一個(gè)演示效果視頻，是很可惜的，也無法呈現(xiàn)Web所謂的營(yíng)銷能力和商業(yè)價(jià)值。

說的這些有點(diǎn)理論，但是也是自己遇到的問題的歸納總結(jié)，可以作為一個(gè)簡(jiǎn)單的思考。

三、適時(shí)改變自己的 “樂趣”

做互聯(lián)網(wǎng)的，不與時(shí)俱進(jìn)，害怕改變，就會(huì)被淘汰，這是很殘酷的事實(shí)。我這里說的改變，并不是逼著一個(gè)人去做排斥的事情，做一些和自己未來不相符的事情，有些事情做了確實(shí)是浪費(fèi)時(shí)間，不如花點(diǎn)心思增加自己的造血能力，增強(qiáng)基本功，這樣不論面對(duì)什么項(xiàng)目，面對(duì)什么客戶都能夠有應(yīng)對(duì)的策略。找到自己的發(fā)展方向，適時(shí)改變戰(zhàn)略和學(xué)習(xí)方法，也是我自己不斷學(xué)習(xí)和探索的一種生活方式。從身邊的一些可以落實(shí)的點(diǎn)點(diǎn)滴滴去改變，以適應(yīng)Web市場(chǎng)（國(guó)內(nèi)市場(chǎng)和全球市場(chǎng)，在視覺交互層面上有著較大的差異和深度，因此如果你只局限于國(guó)內(nèi)的視覺層面的網(wǎng)頁(yè)設(shè)計(jì)，那么也許你可以按照自己的思路走其它適合自己的網(wǎng)頁(yè)設(shè)計(jì)道路，我依然還是針對(duì)視覺交互層面做一些思考）

換一個(gè)角度，我們?cè)O(shè)計(jì)一個(gè)網(wǎng)頁(yè)，從風(fēng)格上、色彩上、字體大小運(yùn)用上、按鈕或者圖片的交互方式上、鼠標(biāo)滾動(dòng)時(shí)的頁(yè)面元素偵聽動(dòng)態(tài)上等等，都會(huì)因?yàn)闀r(shí)間變化而不斷發(fā)生改變。然而我堅(jiān)信，有時(shí)候，Web的風(fēng)格也是一個(gè)輪回。打個(gè)比方，有一種設(shè)計(jì)趨勢(shì)的變化是【擬物→質(zhì)感酷炫→扁平化→高亮陰影→插畫插圖】，然而某些網(wǎng)站，正在走一些反方向的變化【插畫插圖→高亮陰影→扁平化→質(zhì)感酷炫→擬物】，這種變化之上，對(duì)于前端開發(fā)，是一些細(xì)微的交互和技術(shù)的變革。Web的有趣，就在于它可以從各個(gè)角度去反饋人的內(nèi)心，去呈現(xiàn)設(shè)計(jì)者的思想，也會(huì)反映出開發(fā)者的技術(shù)深度。

所以我依然很喜歡視覺交互方向的Web Design，這個(gè)興趣乃至職業(yè)方向雖然不會(huì)改變，但是我也不得不尋求一些其它的改變：

代碼盡量規(guī)范：不論是一些基礎(chǔ)的HTML，CSS前端代碼還是文件結(jié)構(gòu)，文件夾和文件命名，都盡量做到規(guī)范，滿足W3C的一些基本標(biāo)準(zhǔn)，滿足SEO的標(biāo)準(zhǔn)

養(yǎng)成編寫文檔的好習(xí)慣：真的非常重要，不論是做了一個(gè)插件還是一個(gè)工具，還是一個(gè)輪子，或者一套系統(tǒng)，沒有清晰地使用文檔和開發(fā)文檔，過一兩個(gè)月，你會(huì)忘記最重要的一些部分；對(duì)于國(guó)外用戶，文檔是項(xiàng)目的必須交付品（大多客戶喜歡HTML文檔，方便交互和使用）

大膽開源和分享：現(xiàn)在大多優(yōu)秀的設(shè)計(jì)和前端開發(fā)資源，都是經(jīng)開源或者專人分享出來傳播交流，形成良好的一個(gè)生態(tài)圈，所以不要害怕自己的想法，不要害怕用現(xiàn)成的工具，遵守協(xié)議，利用流行的工具和平臺(tái)展示出來，才能夠從很多方面發(fā)現(xiàn)自己的不足，發(fā)現(xiàn)屬于你的市場(chǎng)。

增加造血能力：相隔一段時(shí)間后，如果長(zhǎng)期不使用一些技術(shù)，基本功都可能變?nèi)?，這就需要重新鞏固基礎(chǔ)，利用這些基礎(chǔ)，做一些自己想做的小項(xiàng)目或者小插件，讓自己的腦子活動(dòng)起來。

往往這幾個(gè)小小的方面，就涉及了太多的改變，改變生活方式，改變工作方式，改變學(xué)習(xí)方式，改變時(shí)間管理方式，改變做某些事的態(tài)度，改變對(duì)某些人的態(tài)度。往往改變是需要強(qiáng)迫力的，并不是你喜歡，或者你愿意，就會(huì)自然而然去做，很多時(shí)候還是需要提醒自己，去完成它！

有時(shí)候，學(xué)會(huì)，是在自己的強(qiáng)制之下一點(diǎn)一滴學(xué)會(huì)的。如果某些改變不適合自己，可以盡早的放棄它，尋找更好的方式方法。

往后繼續(xù)思考：未來，也許我只是為了給我自己做一個(gè)記錄生活的博客，給自己的小店做一個(gè)營(yíng)銷的入口，僅此而已。堅(jiān)持，有時(shí)候，真的不需要太多負(fù)責(zé)的市場(chǎng)分析、戰(zhàn)略定位。因?yàn)槲易陨砭褪且粋€(gè)產(chǎn)品，自身就是一個(gè)品牌，只有不斷打磨它，才能把自己的Web做到更好，滿足更廣闊的市場(chǎng)空間和客戶群體。

上面這個(gè)圖，表現(xiàn)了我自身各個(gè)因素的一種演變關(guān)系。做Web是一件非常有趣的事情，改變自己，也是一件有趣的事情，它總是會(huì)讓你發(fā)現(xiàn)一些驚喜。

四、趨勢(shì)與工具可以不斷挖掘 “潛能”

我們經(jīng)?？梢栽诟鱾€(gè)國(guó)內(nèi)國(guó)外網(wǎng)站看到很多人分享的設(shè)計(jì)趨勢(shì)，開發(fā)趨勢(shì)，設(shè)計(jì)工具，開發(fā)工具，效率軟件。這些東西永遠(yuǎn)看不完，甚至近年都是大同小異，其實(shí)說來說去都不外乎幾個(gè)字：

多觀察，多學(xué)習(xí)，多試驗(yàn)。

多觀察：

不論你是否有梯子，你都要想方設(shè)法多看英文原版文章，因?yàn)榇蟛糠址g引進(jìn)的文章，會(huì)有幾個(gè)月乃至幾年的時(shí)間滯留，這段時(shí)間，也許是你發(fā)現(xiàn)自己新的興趣新的技能或者新的賺錢方式的時(shí)間。

不要吝嗇于只看一些爛大街的網(wǎng)紅站點(diǎn)，一些不知名的，有趣的都可以看看，從中發(fā)現(xiàn)Web的樂趣，發(fā)現(xiàn)其實(shí)一個(gè)網(wǎng)址，也能給人帶來很多神經(jīng)上的觸動(dòng)。

不要忽略google廣告，很多時(shí)候，谷歌廣告比你自己更懂你，你可以從廣告中發(fā)現(xiàn)很多意想不到的驚喜。

對(duì)于一些前端框架或者語(yǔ)言，對(duì)于一些逐漸運(yùn)用廣泛的設(shè)計(jì)，也需要多觀察：觀察它們用于哪類項(xiàng)目？針對(duì)哪些細(xì)分市場(chǎng)？適合使用哪些技術(shù)來實(shí)現(xiàn)？觀察，絕不是單純打開網(wǎng)頁(yè)，欣賞一番那么簡(jiǎn)單。

另外，觀察，也體現(xiàn)了搜索引擎的搜索能力，關(guān)鍵詞的把握，精確找到自己想要的內(nèi)容和問答，也是一個(gè)要長(zhǎng)期訓(xùn)練的技能。

再深入一點(diǎn)，學(xué)會(huì)利用大數(shù)據(jù)，比如下圖是來自Q-Success的截至2019年全球最流行的內(nèi)容管理系統(tǒng)數(shù)據(jù)，有開源軟件，有云建站平臺(tái)，它們用于配合前端完成網(wǎng)站的內(nèi)容管理技術(shù)支持的數(shù)據(jù)，選擇一款自己喜歡的，乃至全球認(rèn)可的開源系統(tǒng)學(xué)習(xí)一些后端，甚至深入后端做插件定制和功能定制，也是需要提高自己的觀察能力來進(jìn)行選擇的。

多學(xué)習(xí)：

有了上一步的觀察，你可能會(huì)使用Chrome的Inspect工具，去看看網(wǎng)頁(yè)里面用了哪些技術(shù)，用了哪些CSS代碼，或者用了哪些框架。你可以多從細(xì)節(jié)處，發(fā)現(xiàn)一些有趣的交互方式。當(dāng)然，很多網(wǎng)站是經(jīng)過webpack或其他工具打包的，因此某些代碼不一定容易理解，此方法并不適用于大部分人。

你也可以根據(jù)自己的習(xí)慣，去發(fā)現(xiàn)一些有趣的網(wǎng)站，他們用了哪些設(shè)計(jì)方式，有沒有可能成為大家眼中的“趨勢(shì)”？

學(xué)習(xí)，那就對(duì)了，學(xué)習(xí)，也是探索。

曾經(jīng)開發(fā)前端項(xiàng)目，不習(xí)慣使用webpack或者gulp來搭建腳手架，提高開發(fā)效率和維護(hù)性；曾經(jīng)設(shè)計(jì)一套UI，不習(xí)慣使用現(xiàn)成的形狀工具，或者開源免費(fèi)的素材，進(jìn)行改造和訓(xùn)練。現(xiàn)在， 要學(xué)會(huì)靈活運(yùn)用。

當(dāng)然有一點(diǎn)一定要提醒自己：不要失去基本功，素材創(chuàng)造能力。擁有較強(qiáng)的造血能力，可以在你沒有合適的素材和資源的情況下，讓你做出自己想做的東西，哪怕那個(gè)東西一點(diǎn)也拿不出手。但是，它體現(xiàn)了你的創(chuàng)造力。

多試驗(yàn)：

多做一些小項(xiàng)目，或者一些小工具，你可以不公開，作為自己開發(fā)設(shè)計(jì)的一些工具或者資源；你也可以開源到github，讓大家一起幫你找到缺陷，不斷升級(jí)優(yōu)化找到自己的強(qiáng)項(xiàng)和弱項(xiàng)，找到自己的前進(jìn)方向。

多使用一些工具，比如Node.js，比如google開源圖標(biāo)，比如bootstrap及其衍生品等等，研究他們的開發(fā)初衷，你可以收貨不小的基本功訓(xùn)練方向。

總之，實(shí)戰(zhàn)之后，你就知道了，什么工具適合提高自己的Web設(shè)計(jì)或開發(fā)效率，什么趨勢(shì)適合自己學(xué)習(xí)和模仿，什么靈感適合自己去微創(chuàng)新。

有時(shí)候，你確實(shí)可能需要安安靜靜，閉門造車一小段時(shí)間，讓自己的大腦和思維活躍起來，因?yàn)橹挥羞@樣，你才能隨時(shí)保持自己的初心，明確自己的發(fā)展方向和訓(xùn)練模式。

五、結(jié)語(yǔ)

這篇年度匯總，并沒有羅列一堆技術(shù)性的問題，我本身更多專注于探索與Web的設(shè)計(jì)和視覺交互相關(guān)的有趣的東西，我覺得，方向是非常重要。方向沒有絕對(duì)的對(duì)錯(cuò)，哪怕曾經(jīng)我走的彎路非常多，才造就了自己的雜亂無章。方向，代表了下一步你將做出各種各樣維度的選擇，有時(shí)候，選擇，真的比努力要重要。對(duì)自己的Web Design生涯做了一個(gè)整體上的思考，我覺得十分有趣。2019年，我也沉淀了一些技術(shù)上的東西，訓(xùn)練了自己在職業(yè)和興趣之間的磨合能力。2020年，我會(huì)在一定時(shí)間，繼續(xù)更新自己的博客和資源，共同學(xué)習(xí)共同進(jìn)步，一起發(fā)現(xiàn)，Web，其實(shí)真的非常有趣！

本文同步發(fā)布于沒位道|Chuckie Chang中文博客