先說下背景，來公司之前，我也和大多數後端開發者一樣開發的後端邏輯比較多，一碰到前端頁面，也只能開發簡單的功能，複雜點兒的功能根本不會。但隨着開發時間的增長，越來越感覺一名優秀的開發者不僅僅要懂得服務端邏輯接口層的開發，還應該站在產品的角度，UI的角度去看待他的作品。藉助ant design的相關內容，開發一個又一個穩定而又實用的功能，非常欣慰。抽空聊下我在前端開發上的感觸吧，希望對大家有所幫助。
先來說我在知乎的一篇文章上讀到的兩個概念，人機交互和無意識設計：
人機交互
談到前端開發，先說下人機交互。人機交互是指人和計算機之間通過行爲動作，互相影響互相作用的一個過程。主要涉及：人、計算機或系統、動作行爲，互相的影響結果這四個方面。
交互的過程經過這幾個階段：
由動作發起者確定【目標】。
根據目標制定【計劃】。
【確認】計劃可行性。
可行，就進行實際【執行】觸發按鈕，開關等進行作用於系統。
系統作出反饋，進行改變，動作發起者【感知】這種改變。
通過一定的方法【詮釋】這些改變。
【對比】目標，如果一致，則代表目標達成。
無意識設計
意識
我們想做一件事情時候，仔細去想，會產生很多關於這件事情的觀念、意象、情感。比方說，想喝咖啡的時候，想到星巴卡，想到它的環境、氛圍、以及放鬆的感覺。這種自己能清晰意識到的心裏活動就是意識。(摘自網上)
無意識
潛藏在我們的意識中，不需要去想，比如困了自然睡覺。下意識的行爲，即習慣性，順其自然的反應。
由上面的冰山圖可以看出無意識佔據意識的很大部分，從生下來到成人，我們經過無數次訓練，逐步把一些有意識的行爲變成無意識的行爲。這裏面蘊含着很大的空間。正基於此，日本當代著名的產品設計師深澤直人主張“無意識設計”：順其自然根據人潛藏的需求，客觀的需要去思考設計產品。
以上，理論介紹完了，下面介紹以下具體的產品感受：
上面是我買的兩款檯燈，明顯感覺左邊那個檯燈的開關的位置不太好，實際操作過程中感覺特別彆扭，總有種下意識的要去摸燈泡觸電。而右側的設計，也是普通檯燈的大多數設計，明顯體驗好的多，關燈開燈的體驗也好的多。
前端的UI交互理念和要求是朝着右側發展。
ant design
爲了給用戶更好的體驗， 螞蟻集團體驗技術部經過大量項目實踐和總結，逐步打磨出一個服務於企業級產品的設計體系：Ant Design。我這幾年的開發也都使用的是ant design。從我自身的感受出發：
簡單，相比之前的原生js開發，降低了門檻，整體UI邏輯和數據流思維更適合一個後端開發者的邏輯思維。
快捷，避免了大量的樣式修改，對於一個不善於UI的後端來說，調整樣式，作出特炫的效果是件很麻煩的事。之前同事爲了實現一個複雜的交互而寫的大量js，我看着都費勁，用業界水平衡量了下，極難維護。
樣式統一，這也是我比較推薦的地方，對於一個網站或者一個系統，不需要百花齊放，但是需要整齊劃一。簡單而擴展的樣式滿足大部分後臺系統的需要。
設計的價值觀
自然
確定
意義感
生長性
自然和確定是最先提出的價值觀，我感覺是結合無意識設計的理念提出的。自然保證流暢，確定更多的是降低用戶認知和判斷成本，側重的幫助用戶選擇的一種理念吧。意義感和生長性是後來提出的，前者更多的是存在是爲了承載某個工作使命，而生長性更多的是一個可擴展性的裏面。更詳細的內容，可參考官網的解釋。
設計原則
ant design的一些設計原則，還是需要我們遵循的：如親密性，對齊，重複，直接了當，足不出戶，簡化交互，提供邀請，巧用過渡，即時反應等。
直接概念的詳細介紹，我這裏不做解釋。
只介紹根據上述概念，我做的一些功能:
下面是之前一個對齊的一個案例對比：
下面是我用ant design重構另一個功能的頁面，是不是好看多了。
再如簡化交互和足不出戶的一個功能：
對於簡單屬性的添加修改頁面，我更建議用modal彈框，這樣，不用進入新的頁面即可完成。
而對於屬性特別多的頁面，我推薦單獨起一個頁面去實現這個功能。
設計模式-組件化
引自兩張經典圖來說前端組件的開發，如上兩幅圖，都是表達一個意思，把一個複雜的界面進行分解，分解成不同的區塊，而不同的區塊再去分解，分解成最基本的內容，我們稱之爲Component（組件）。
組件不關心誰調用它，提供給調用者對應的方法和屬性，當調用者傳入不同的數據內容時，內容根據一定的邏輯展示即可。
至此，簡單介紹了人機交互，無意識設計和ant design的一些概念，大家如果有興趣可以對上面的內容自行到網上搜索，後面我將介紹寫前端的一些開發經驗和環境相關的內容。敬請期待～
注：以上部分內容來自網絡，如有異議，請聯繫作者。