我將從不同的維度，去分析我在Web視覺交互領(lǐng)域的一些探索，同時也算是一個年終匯總，看看自己又經(jīng)歷了些什么？又得到了些什么？
2019年過去了，這一年沒有怎么寫分享類博客，一方面是由于懶（平時跳舞和鍛煉也占據(jù)了安靜坐在電腦面前的時間，考駕照，攝影做視頻等等基本也無緣于電腦），一方面是因?yàn)檫@一年在對自己未來的Web發(fā)展方向做綜合性鋪墊（技術(shù)、思維、開源項(xiàng)目、學(xué)習(xí)資源探索等）。總之，未來會有很多有意思的博文會陸續(xù)更新起來，2019年就暫時把我當(dāng)做廢人處理吧 ：）
從事Web設(shè)計(jì)開發(fā)很多年，這段期間，接觸了各種風(fēng)格的設(shè)計(jì)和前端交互，遇到不少坎坷和迷茫，也有很多網(wǎng)頁設(shè)計(jì)時或者UI設(shè)計(jì)師轉(zhuǎn)行，放棄等等。而我，一直堅(jiān)持在網(wǎng)頁視覺交互設(shè)計(jì)，對于數(shù)據(jù)類的交互（譬如vue，react等框架的運(yùn)用和深入研究），比較少，適當(dāng)?shù)臅靡挥胷eact做一些插件。在“視覺”這個方向上，也有很多的積累和探索，遇到太多的難處，不過都一一走過來了，2019年，更多的是一個方向上的探索和個人對于web長遠(yuǎn)發(fā)展的一次冒險，雖然今年幾乎很少上站酷、UI中國、behance、dribbble等社區(qū)，但是每個月抽一定時間封閉式的研究和訓(xùn)練，還是帶來了不少的益處。特別是對于未來網(wǎng)頁設(shè)計(jì)方向的職業(yè)規(guī)劃，乃至設(shè)計(jì)web技術(shù)的其它興趣愛好或者職業(yè)，都提供了良好的指示作用。
這篇文章，我將從不同的維度，去分析我在Web視覺交互領(lǐng)域的一些探索，同時也算是一個年終匯總，看看自己又經(jīng)歷了些什么？又得到了些什么？
注：整篇文章，基本上是圍繞自己的web發(fā)展方向來展開的思考，主要針對視覺領(lǐng)域，因此肯定會有其它方面的思考不全面，甚至是相沖突，這是不可避免的，本文僅代表自己的觀點(diǎn)，作為一個參考和總結(jié)。
下面的內(nèi)容，都將圍繞 【思考 → 意義 → 樂趣 → 潛能】這條主線展開。
這個圖是我根據(jù)個人理解繪制的，主要從三個維度，來確定自己的網(wǎng)頁未來發(fā)展方向。每個人對于每種細(xì)分的職業(yè)，在實(shí)踐過程中，面對不同的市場變化，都會存在不同的改變，甚至是迷茫階段，因此，需要一個系統(tǒng)的分析，來確定自己在web上的發(fā)展方向，一般來說，以3年-5年為一個階段，5年-10年為一個階段，10年-15年為一個階段，目前，自己處于第二個階段，是否能跨進(jìn)第三個階段，是否會選擇其它的發(fā)展方向，這個就需要坐下來靜靜思考。
這個圖有三個圓圈，他們都會交錯產(chǎn)生其它的互聯(lián)網(wǎng)與現(xiàn)實(shí)，職業(yè)與心理，學(xué)習(xí)與工作等不同維度的東西。
技術(shù)這個模塊，是一個非常重要的模塊，它可能直接影響到未來的學(xué)習(xí)方向，資金投入，時間計(jì)劃，工作職業(yè)規(guī)劃，因此技術(shù)上的細(xì)分，是每個人跨入某行業(yè)，甚至是工作過程中不斷沉淀，改變要直接面對的一個問題。這里我大概列出了幾個類別：
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ǒng)，軟件，大數(shù)據(jù)，服務(wù)器工具等，選擇性熟悉CSS3，Javascript等輔助提升視覺交互效果。
c) 其它方向：
框架級開發(fā)，引擎開發(fā)，工具類等
顧名思義，我在實(shí)際生活中，比如實(shí)體店面，一些傳媒介質(zhì)，宣傳促銷手段等，運(yùn)用到Web的一些常見運(yùn)用。網(wǎng)頁不僅僅只能再電腦和手機(jī)上使用，其實(shí)它也隱藏于我們的現(xiàn)實(shí)生活中，也會在線下發(fā)揮其商業(yè)價值。也許，你未來想自己開一家咖啡店，或者擺個攤子，自己做一個小游戲，通過二維碼的形式讓路人參與進(jìn)來，實(shí)現(xiàn)自己的推廣需求等等，都是可能的。我也稍微例舉了一些運(yùn)用情況：
在我們的日常生活中，有很多地方也會運(yùn)用到web技術(shù)來作為一個營銷和展示渠道，來完成人和機(jī)器的交互和通信。我們和可以把它理解為人機(jī)交互的一種運(yùn)用方式。
興趣是堅(jiān)持的一個重要條件，然而，興趣不代表就一定能堅(jiān)持，更多的時候，是需要鼓勵和強(qiáng)迫的。在網(wǎng)頁設(shè)計(jì)領(lǐng)域，我相信很多人都是因?yàn)榕d趣，看見某個網(wǎng)頁非常有意思，才誕生學(xué)習(xí)它，乃至工作的想法。但是實(shí)際工作，往往不盡人意，市場，改稿，返工，創(chuàng)意，技術(shù)，薪資等等瓶頸。因此，興趣維度，也是一個重要的思考點(diǎn)。
綜上，我因?yàn)閷σ曈X交互有極大的興趣，依然專注到視覺交互領(lǐng)域，因此我在技術(shù)層面會更多注重視覺交互上的一些學(xué)習(xí)和提升。當(dāng)然在設(shè)計(jì)一個網(wǎng)站的過程中，也會涉及到素材的制作，比如視頻拍攝和后期，圖片的合成，繪畫元素，簡單的插畫元等。
反之，如果你專注軟件開發(fā)等領(lǐng)域，對于數(shù)據(jù)的處理要求就比視覺要大許多，學(xué)習(xí)方向和學(xué)習(xí)方式都會不一樣。不論是數(shù)據(jù)還是視覺，“web性能、代碼規(guī)范、工具的使用” 等都是需要不斷研究積累的重要方面。有明確的方向，才會有更深入的學(xué)習(xí)和研究。我不跟風(fēng)，但我也不會兩耳不聞窗外事，盡自己最多的時間安排，去學(xué)習(xí)永遠(yuǎn)也學(xué)不完的知識，足矣。
說句俗話：沒有利益的學(xué)習(xí)過程，是沒有驅(qū)動力的。（適用于部分設(shè)計(jì)開發(fā)者，因?yàn)榇蠹叶嫉贸燥埳?，把自己喜歡的事情做成職業(yè)，很難也很容易，把自己不喜歡的事情做成職業(yè)，很難也很容易）
知識永遠(yuǎn)也學(xué)不完，不論是UI還是前后端開發(fā)，互聯(lián)網(wǎng)知識體系一直在不斷刷新，我們在學(xué)習(xí)的過程中，怎樣才能堅(jiān)持下去？網(wǎng)頁設(shè)計(jì)的競爭越來越大，市面上太多的APP，小程序，那么，是不是Web就沒有市場了？如果看不清這個問題，也許，剩下的就是轉(zhuǎn)行，或者簡簡單單混下去。
做了太多的網(wǎng)站項(xiàng)目，有外包，有產(chǎn)品，有插件，有CMS，有所謂的H5，它們都用各自的價值給客戶創(chuàng)造利益，同時，也保障了設(shè)計(jì)師和開發(fā)者的生存可能。在這個過程中，我對Web的商業(yè)價值（針對視覺交互的方向），有自己的一些見解和看法。
下圖展示了一個Web從設(shè)計(jì)到上線最籠統(tǒng)的過程示意圖，要讓一個web發(fā)揮其威力，乃至商業(yè)價值，必然要求有這一系列的過程，讓其呈現(xiàn)到人們眼中，使用到人們手中。
UI通常是網(wǎng)頁的一個敲門磚，隨著互聯(lián)網(wǎng)的快速進(jìn)化，人們對UI的要求也越來越高，人的審美在逐漸提高，人的選擇在逐漸增多。越來越多的人，掌握了良好的UI技能，PS，AE動畫，繪畫插畫等等，這是一個職業(yè)剛需，然而，對于Web來說，能否高度還原一份UI設(shè)計(jì)，是直接關(guān)系到這個網(wǎng)頁未來的生存的長遠(yuǎn)價值的。UI是非常重要的一環(huán)，它是最外層的，也是人優(yōu)先接觸的一環(huán)，其次就是前端。
前端讓人在操作網(wǎng)頁時，有良好的引導(dǎo)和體驗(yàn)，讓其完成一系列操作，達(dá)到網(wǎng)站的目的。比如表單的填寫，錯誤提示，彈出窗口，引導(dǎo)方式，交互動畫等等，都是為了讓人和網(wǎng)頁中的內(nèi)容互動起來，這時候，前端對于讓一個網(wǎng)頁上線和運(yùn)營，就起到了關(guān)鍵作用。
就目前來說，市面上有越來越多的拖拽建站，智能建站，快速建站模板等等工具，幫助人們快速完成一個基礎(chǔ)網(wǎng)站的搭建。這是互聯(lián)網(wǎng)發(fā)展的必然趨勢，也是網(wǎng)頁設(shè)計(jì)時必須面對的和AI的一個巨大挑戰(zhàn)，你可能失業(yè)，也可能崛起。
就我而言，我依然專注在視覺交互領(lǐng)域，那么，必然對于一些JS腳本引擎的學(xué)習(xí)和使用，對于一些類似Webpack的自動化工具的使用，有剛性的學(xué)習(xí)需求，這就意味著學(xué)習(xí)難度，學(xué)習(xí)時間增長，學(xué)習(xí)成本增加，對硬件，電腦的要求也在逐漸增加。為什么我要執(zhí)著于對前端技術(shù)的學(xué)習(xí)和研究？我其實(shí)是設(shè)計(jì)出身，雜亂無章啥都做，由一個個人博客，改版數(shù)十次，造就了現(xiàn)在“需要不斷熟悉一套Web呈現(xiàn)需要的過程和技術(shù)”。我可以不去學(xué)習(xí)代碼，可以不去學(xué)習(xí)視頻拍攝，可以不去學(xué)習(xí)服務(wù)器等知識，但是：
鑒于上面的一些原因，我自己經(jīng)常遇到不能滿足web界面開發(fā)的需求的情況，因此也在不斷學(xué)習(xí)和提升視覺方面的綜合能力，能夠高質(zhì)量并快速還原大部分“想法”！我總結(jié)下面一些方法，對于一些對于視覺交互有高要求的網(wǎng)站，如何讓他更好的落地，去實(shí)現(xiàn)其未來的商業(yè)價值。（當(dāng)然，不僅僅是商業(yè)價值，一個web的落地，還包含了更多潛在的價值和品牌傳播能力。）
a) 夯實(shí)自身UI基本功，比如Photoshop各種工具的靈活搭配運(yùn)用，能夠創(chuàng)造合適的素材，這樣能夠提高前端開發(fā)時素材的利用效率
b) 培養(yǎng)與身邊符合自己開發(fā)需求的前端和后端人員的團(tuán)隊(duì)協(xié)作能力，增強(qiáng)項(xiàng)目的可落地性
c) 在有一定條件的基礎(chǔ)上，UI要適當(dāng)學(xué)習(xí)前端的一些知識（比如網(wǎng)格系統(tǒng)，可以借鑒bootstrap的網(wǎng)格系統(tǒng)；動畫過渡常識；3D的一些技術(shù)需求）；反之，前端也需要學(xué)習(xí)UI的一些知識（比如圖片、素材的處理；軟件工具的搭配使用；配色知識），技能互補(bǔ)才能最大限度避免任務(wù)交接時的沖突
d) 建立一個自己的個人博客，作為知識沉淀，項(xiàng)目匯總的入口，同時也可以方便建立個人品牌，利于人與人之間的學(xué)習(xí)分享交流
e) 開闊眼界，多看看不同行業(yè)的一些東西，可以找到靈感，培養(yǎng)出一些良好的習(xí)慣（可能是你根本沒想過的，預(yù)料之外的好習(xí)慣），利于找到符合自己的設(shè)計(jì)和開發(fā)切入點(diǎn)
f) 在有一定條件的基礎(chǔ)上，可以自己學(xué)習(xí)和掌握一些必要的前后端開發(fā)技能
g) 不要放棄對自己的一張圖片或者一個視頻強(qiáng)落地的可能性，作為Web來說，無法落地(或者長期找不到，或者工作中的條件不允許，或者沒有預(yù)算找到一個開發(fā)者去完成它)的一張圖或者一個演示效果視頻，是很可惜的，也無法呈現(xiàn)Web所謂的營銷能力和商業(yè)價值。
說的這些有點(diǎn)理論，但是也是自己遇到的問題的歸納總結(jié)，可以作為一個簡單的思考。
做互聯(lián)網(wǎng)的，不與時俱進(jìn)，害怕改變，就會被淘汰，這是很殘酷的事實(shí)。我這里說的改變，并不是逼著一個人去做排斥的事情，做一些和自己未來不相符的事情，有些事情做了確實(shí)是浪費(fèi)時間，不如花點(diǎn)心思增加自己的造血能力，增強(qiáng)基本功，這樣不論面對什么項(xiàng)目，面對什么客戶都能夠有應(yīng)對的策略。找到自己的發(fā)展方向，適時改變戰(zhàn)略和學(xué)習(xí)方法，也是我自己不斷學(xué)習(xí)和探索的一種生活方式。從身邊的一些可以落實(shí)的點(diǎn)點(diǎn)滴滴去改變，以適應(yīng)Web市場（國內(nèi)市場和全球市場，在視覺交互層面上有著較大的差異和深度，因此如果你只局限于國內(nèi)的視覺層面的網(wǎng)頁設(shè)計(jì)，那么也許你可以按照自己的思路走其它適合自己的網(wǎng)頁設(shè)計(jì)道路，我依然還是針對視覺交互層面做一些思考）
換一個角度，我們設(shè)計(jì)一個網(wǎng)頁，從風(fēng)格上、色彩上、字體大小運(yùn)用上、按鈕或者圖片的交互方式上、鼠標(biāo)滾動時的頁面元素偵聽動態(tài)上等等，都會因?yàn)闀r間變化而不斷發(fā)生改變。然而我堅(jiān)信，有時候，Web的風(fēng)格也是一個輪回。打個比方，有一種設(shè)計(jì)趨勢的變化是【擬物→質(zhì)感酷炫→扁平化→高亮陰影→插畫插圖】，然而某些網(wǎng)站，正在走一些反方向的變化【插畫插圖→高亮陰影→扁平化→質(zhì)感酷炫→擬物】，這種變化之上，對于前端開發(fā)，是一些細(xì)微的交互和技術(shù)的變革。Web的有趣，就在于它可以從各個角度去反饋人的內(nèi)心，去呈現(xiàn)設(shè)計(jì)者的思想，也會反映出開發(fā)者的技術(shù)深度。
所以我依然很喜歡視覺交互方向的Web Design，這個興趣乃至職業(yè)方向雖然不會改變，但是我也不得不尋求一些其它的改變：
代碼盡量規(guī)范：不論是一些基礎(chǔ)的HTML，CSS前端代碼還是文件結(jié)構(gòu)，文件夾和文件命名，都盡量做到規(guī)范，滿足W3C的一些基本標(biāo)準(zhǔn)，滿足SEO的標(biāo)準(zhǔn)
養(yǎng)成編寫文檔的好習(xí)慣：真的非常重要，不論是做了一個插件還是一個工具，還是一個輪子，或者一套系統(tǒng)，沒有清晰地使用文檔和開發(fā)文檔，過一兩個月，你會忘記最重要的一些部分；對于國外用戶，文檔是項(xiàng)目的必須交付品（大多客戶喜歡HTML文檔，方便交互和使用）
大膽開源和分享：現(xiàn)在大多優(yōu)秀的設(shè)計(jì)和前端開發(fā)資源，都是經(jīng)開源或者專人分享出來傳播交流，形成良好的一個生態(tài)圈，所以不要害怕自己的想法，不要害怕用現(xiàn)成的工具，遵守協(xié)議，利用流行的工具和平臺展示出來，才能夠從很多方面發(fā)現(xiàn)自己的不足，發(fā)現(xiàn)屬于你的市場。
增加造血能力：相隔一段時間后，如果長期不使用一些技術(shù)，基本功都可能變?nèi)酰@就需要重新鞏固基礎(chǔ)，利用這些基礎(chǔ)，做一些自己想做的小項(xiàng)目或者小插件，讓自己的腦子活動起來。
往往這幾個小小的方面，就涉及了太多的改變，改變生活方式，改變工作方式，改變學(xué)習(xí)方式，改變時間管理方式，改變做某些事的態(tài)度，改變對某些人的態(tài)度。往往改變是需要強(qiáng)迫力的，并不是你喜歡，或者你愿意，就會自然而然去做，很多時候還是需要提醒自己，去完成它！
有時候，學(xué)會，是在自己的強(qiáng)制之下一點(diǎn)一滴學(xué)會的。如果某些改變不適合自己，可以盡早的放棄它，尋找更好的方式方法。
往后繼續(xù)思考：未來，也許我只是為了給我自己做一個記錄生活的博客，給自己的小店做一個營銷的入口，僅此而已。堅(jiān)持，有時候，真的不需要太多負(fù)責(zé)的市場分析、戰(zhàn)略定位。因?yàn)槲易陨砭褪且粋€產(chǎn)品，自身就是一個品牌，只有不斷打磨它，才能把自己的Web做到更好，滿足更廣闊的市場空間和客戶群體。
上面這個圖，表現(xiàn)了我自身各個因素的一種演變關(guān)系。做Web是一件非常有趣的事情，改變自己，也是一件有趣的事情，它總是會讓你發(fā)現(xiàn)一些驚喜。
我們經(jīng)?？梢栽诟鱾€國內(nèi)國外網(wǎng)站看到很多人分享的設(shè)計(jì)趨勢，開發(fā)趨勢，設(shè)計(jì)工具，開發(fā)工具，效率軟件。這些東西永遠(yuǎn)看不完，甚至近年都是大同小異，其實(shí)說來說去都不外乎幾個字：
多觀察，多學(xué)習(xí)，多試驗(yàn)。
不論你是否有梯子，你都要想方設(shè)法多看英文原版文章，因?yàn)榇蟛糠址g引進(jìn)的文章，會有幾個月乃至幾年的時間滯留，這段時間，也許是你發(fā)現(xiàn)自己新的興趣新的技能或者新的賺錢方式的時間。
不要吝嗇于只看一些爛大街的網(wǎng)紅站點(diǎn)，一些不知名的，有趣的都可以看看，從中發(fā)現(xiàn)Web的樂趣，發(fā)現(xiàn)其實(shí)一個網(wǎng)址，也能給人帶來很多神經(jīng)上的觸動。
不要忽略google廣告，很多時候，谷歌廣告比你自己更懂你，你可以從廣告中發(fā)現(xiàn)很多意想不到的驚喜。
對于一些前端框架或者語言，對于一些逐漸運(yùn)用廣泛的設(shè)計(jì)，也需要多觀察：觀察它們用于哪類項(xiàng)目？針對哪些細(xì)分市場？適合使用哪些技術(shù)來實(shí)現(xiàn)？觀察，絕不是單純打開網(wǎng)頁，欣賞一番那么簡單。
另外，觀察，也體現(xiàn)了搜索引擎的搜索能力，關(guān)鍵詞的把握，精確找到自己想要的內(nèi)容和問答，也是一個要長期訓(xùn)練的技能。
再深入一點(diǎn)，學(xué)會利用大數(shù)據(jù)，比如下圖是來自Q-Success的截至2019年全球最流行的內(nèi)容管理系統(tǒng)數(shù)據(jù)，有開源軟件，有云建站平臺，它們用于配合前端完成網(wǎng)站的內(nèi)容管理技術(shù)支持的數(shù)據(jù)，選擇一款自己喜歡的，乃至全球認(rèn)可的開源系統(tǒng)學(xué)習(xí)一些后端，甚至深入后端做插件定制和功能定制，也是需要提高自己的觀察能力來進(jìn)行選擇的。
有了上一步的觀察，你可能會使用Chrome的Inspect工具，去看看網(wǎng)頁里面用了哪些技術(shù)，用了哪些CSS代碼，或者用了哪些框架。你可以多從細(xì)節(jié)處，發(fā)現(xiàn)一些有趣的交互方式。當(dāng)然，很多網(wǎng)站是經(jīng)過webpack或其他工具打包的，因此某些代碼不一定容易理解，此方法并不適用于大部分人。
你也可以根據(jù)自己的習(xí)慣，去發(fā)現(xiàn)一些有趣的網(wǎng)站，他們用了哪些設(shè)計(jì)方式，有沒有可能成為大家眼中的“趨勢”？
學(xué)習(xí)，那就對了，學(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é)會靈活運(yùn)用。
當(dāng)然有一點(diǎn)一定要提醒自己：不要失去基本功，素材創(chuàng)造能力。擁有較強(qiáng)的造血能力，可以在你沒有合適的素材和資源的情況下，讓你做出自己想做的東西，哪怕那個東西一點(diǎn)也拿不出手。但是，它體現(xiàn)了你的創(chuàng)造力。
多做一些小項(xiàng)目，或者一些小工具，你可以不公開，作為自己開發(fā)設(shè)計(jì)的一些工具或者資源；你也可以開源到github，讓大家一起幫你找到缺陷，不斷升級優(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ā)效率，什么趨勢適合自己學(xué)習(xí)和模仿，什么靈感適合自己去微創(chuàng)新。
有時候，你確實(shí)可能需要安安靜靜，閉門造車一小段時間，讓自己的大腦和思維活躍起來，因?yàn)橹挥羞@樣，你才能隨時保持自己的初心，明確自己的發(fā)展方向和訓(xùn)練模式。
這篇年度匯總，并沒有羅列一堆技術(shù)性的問題，我本身更多專注于探索與Web的設(shè)計(jì)和視覺交互相關(guān)的有趣的東西，我覺得，方向是非常重要。方向沒有絕對的對錯，哪怕曾經(jīng)我走的彎路非常多，才造就了自己的雜亂無章。方向，代表了下一步你將做出各種各樣維度的選擇，有時候，選擇，真的比努力要重要。對自己的Web Design生涯做了一個整體上的思考，我覺得十分有趣。2019年，我也沉淀了一些技術(shù)上的東西，訓(xùn)練了自己在職業(yè)和興趣之間的磨合能力。2020年，我會在一定時間，繼續(xù)更新自己的博客和資源，共同學(xué)習(xí)共同進(jìn)步，一起發(fā)現(xiàn)，Web，其實(shí)真的非常有趣！
本文同步發(fā)布于沒位道|Chuckie Chang中文博客
Powered by Froala Editor
勿忘初心
27
作品
160
粉絲
5
關(guān)注
分享能獲取更多贊？
大牛，別默默的看了，快登錄幫我點(diǎn)評一下吧！:)
登錄 立即注冊