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)頁設(shè)計(jì)時(shí)或者UI設(shè)計(jì)師轉(zhuǎn)行榨呆，放棄等等罗标。而我，一直堅(jiān)持在網(wǎng)頁視覺交互設(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中國、behance缎谷、dribbble等社區(qū)，但是每個(gè)月抽一定時(shí)間封閉式的研究和訓(xùn)練灶似，還是帶來了不少的益處列林。特別是對(duì)于未來網(wǎng)頁設(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)頁未來發(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)頁不僅僅只能再電腦和手機(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)頁下單该押、推廣入口

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

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

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

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

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

3.興趣擴(kuò)展

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

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

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

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

-?獲得類似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)榇蠹叶嫉贸燥埳胬梗炎约合矚g的事情做成職業(yè)，很難也很容易贰谣，把自己不喜歡的事情做成職業(yè)娜搂，很難也很容易）

知識(shí)永遠(yuǎn)也學(xué)不完，不論是UI還是前后端開發(fā)吱抚，互聯(lián)網(wǎng)知識(shí)體系一直在不斷刷新百宇，我們?cè)趯W(xué)習(xí)的過程中，怎樣才能堅(jiān)持下去秘豹？網(wǎng)頁設(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)頁的一個(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)頁未來的生存的長(zhǎng)遠(yuǎn)價(jià)值的纱控。UI是非常重要的一環(huán)辆毡，它是最外層的，也是人優(yōu)先接觸的一環(huán)甜害，其次就是前端舶掖。

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

就目前來說，市面上有越來越多的拖拽建站棉安，智能建站底扳，快速建站模板等等工具，幫助人們快速完成一個(gè)基礎(chǔ)網(wǎng)站的搭建贡耽。這是互聯(lián)網(wǎng)發(fā)展的必然趨勢(shì)衷模，也是網(wǎng)頁設(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)酬氢妈，自我營銷粹污，個(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è)價(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)（國內(nèi)市場(chǎng)和全球市場(chǎng)蜡豹，在視覺交互層面上有著較大的差異和深度，因此如果你只局限于國內(nèi)的視覺層面的網(wǎng)頁設(shè)計(jì)溉苛，那么也許你可以按照自己的思路走其它適合自己的網(wǎng)頁設(shè)計(jì)道路镜廉，我依然還是針對(duì)視覺交互層面做一些思考）

換一個(gè)角度，我們?cè)O(shè)計(jì)一個(gè)網(wǎng)頁愚战，從風(fēng)格上娇唯、色彩上、字體大小運(yùn)用上寂玲、按鈕或者圖片的交互方式上塔插、鼠標(biāo)滾動(dòng)時(shí)的頁面元素偵聽動(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ì)于國外用戶吼拥，文檔是項(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è)營銷的入口震庭，僅此而已。堅(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è)國內(nèi)國外網(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ì)于一些前端框架或者語言况既，對(duì)于一些逐漸運(yùn)用廣泛的設(shè)計(jì)，也需要多觀察：觀察它們用于哪類項(xiàng)目组民？針對(duì)哪些細(xì)分市場(chǎng)棒仍？適合使用哪些技術(shù)來實(shí)現(xiàn)？觀察臭胜，絕不是單純打開網(wǎng)頁莫其，欣賞一番那么簡(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)頁里面用了哪些技術(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é)語

這篇年度匯總糯笙，并沒有羅列一堆技術(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中文博客