前端開發、互動、視覺是這樣合作完成的
作為一個前端工程師，在著手碼起程式碼時，手上一般都拿著產品文件、互動原型、標註圖和切好的圖片資源。開發者只要按照這些資源的指示把內容逐一整合到自己程式碼裡就算完成工作。但是俗話說的好，不願意當產品的設計不是好開發，在「全棧工程師」被捧的越來越高的大潮中，一個合格的前端，應該明白自己在開發時手中的原材料到底意味著什麼。這樣寫出的程式碼，更能符合需求，提高產品的最終體驗，前端自己也能在這個過程中有更多的思考，修煉自己的各方面能力。
現在，我們應該跳出自己的工位，看看一個產品的所有需求，是經歷了怎樣的過程，來到自己的手上的。下面的流程比較典型，但可能和大家的實際情況有著或多或少的差別，但是在整體思路上是大致相同的。
產品篇
其實，需求最開始起源於使用者，而我們的產品經理捕捉、提煉、整合這些零散的需求，就產生了我們的開發物件——產品。 前端們要去實現的各種邏輯和功能點，都一一對應了這些需求 ，可以說，這些功能是一個產品的靈魂。作為一個開發，可能會獲得產品經理寫的原型、文件、思維導圖等等，形式上雖然多重多樣，但都是為了讓開發瞭解這個產品的功能點和基本架構。
產品類文件可能不像互動文件、視覺標註那樣貼近開發，甚至不讀都不影響前端的工作。 但是這類文件可以讓開發縱觀整個產品，讓開發掌握每一個功能點的輕重、意義，能幫助開發根據產品本身優化程式碼，減少後期維護成本，間接地提高開發效率 。
舉個栗子，一個認真負責的好開發通過文件瞭解到，一個產品可能會在將來考慮新增面板功能，那麼他在開發過程中，可能會有意識地預留一些文字色值調整的小介面， 方便將來的更新迭代，免去了未來重寫程式碼的痛苦。
諸如此例，深入理解產品的靈魂，可以讓開發寫出更靈活，更高效甚至更貼心的好程式碼。
這裡推薦一下我們的 前端學習圈 ，不管你是小白還是大牛我都歡迎
互動篇
如果產品是一把各種功能組成的瑞士軍刀，那麼合理安排軍刀各個刀片位置，使得每一個刀片的功能可以發揮得當，就是互動設計師的任務了。而互動設計師的工作內容又分成兩個部分： 一個是資訊架構，一個是互動細節 。
一個產品可能有幾十上百種功能，呈現數十種資訊，如果都放在手機那 5 英寸上下的螢幕上，就成了一把佈滿全千奇百怪刀片的「刀球」，使用者根本無從下手，甚至連安靜地切個水果都做不到。 因此互動設計師需要把各種功能和資訊合理地「藏在」產品的各個層級之中，每個功能和資訊都能在恰當的層級得到呈現 ，但也不能隱藏的太深，讓使用者找不到想要的功能。這就是資訊架構的安排，合理的資訊架構讓一個產品的功能出現在最合適的場景，讓使用者找到的就是自己想要的。
而互動細節則更像是刀的手感，怎樣得當地優化各種功能和資訊在層級上的排布、位置和響應等等，讓使用者得到「人刀合一」感覺，讓功能不僅恰當的出現，還能順手地使用，下圖是個栗子。
諸如此例，我們可以看到互動可以直接影響到產品功能能否被使用者正確發揮，功能是靈魂、那互動就是撐起靈魂的骨架。
將大量的功能和資訊進行分類佈局是一個和開發一樣消耗腦細胞的工作，互動設計師需要在介面複雜程度、層級深度和一些產品特殊需要等等因素之間做出恰當合理的權衡，才能做出合理的符合需求的互動文件， 即介面簡單移易於理解，層級較淺易於使用者查詢功能，又有合理的障礙來導向使用者 。經過複雜的權衡後，得到的就是交給開發的互動文件。
對於前端來說， 互動文件指示開發將功能分級、佈局 ，只要嚴格遵守互動文件的內容，我們就可以保證最終的產品成品有著漂亮而合理的資訊結構、互動細節。如果試著更深的鑽研，就能夠掌握更多產品的內涵，去更加了解產品本身。
視覺篇
記得以前一個一起合作過專案的學長和我說：「不用有那麼詳細的標註啦，其實標了我也不怎麼看」。好在這位學長的設計感覺還不錯，做出來的東西並沒有太大的偏差。不過有這種想法的前端確實不在少數，畢竟現在的手機動輒幾百 ppi 的解析度，一兩個畫素和色值看起來沒什麼差距，大致位置看感覺，切圖用你的不就好了嗎？
依然舉個栗子，下面兩個介面，功能完整，同樣按照互動文件開發，只是一邊的嚴格按照標註還原了設計稿、另一邊只是【憑感覺】。
我們可以看到「感覺流」的介面，頭像右側的資訊內容完全沒有對齊，右邊界也沒有對齊可言，這樣使用者在從上到下獲取資訊時，會看到一個參差不齊的資訊頭部，需要不停地在水平方向調整視覺焦點， 就因為差出了幾個畫素，整個資訊流在使用者眼中變得雜亂不堪，難以找到頭緒，給使用者的閱讀帶來了很大的不便。
其實視覺在產品中，相當於互動骨架之外外面的面板，而面板的一大功能是裝飾。一個產品的視覺設計決定這個產品是否美觀，能否給使用者帶來愉快視覺感受。一套好看的使用者介面，就像帥哥美女，讓人產生愉悅的感受。然而除此之外 ，視覺設計有著更深層重要的功能，就是引導使用者獲取資訊。
就像之前說過的產品瑞士軍刀，我們有了精良的刀片，妥當的構造，良好的外形設計，但是拿到手上我們卻不知道藏在其中的功能和資訊怎樣觸發、獲取。這時視覺的更深層功能就要發揮作用。
如果把文字和圖形都歸納為視覺區域，這個視覺區域的大小、顏色乃至形狀，都會都會給人不同的影響力和感受，通過有效的安排這些因素，並加以合理的排列布局，可以有效的引導使用者閱讀多層次資訊，瞭解不同重要程度的功能。互動設計師通過頁面區分層級，視覺設計師就要從視覺感受區分一個頁面的層級。可能看起來非常普通的介面，其實是有一層層的視覺安排，讓使用者行雲流水地閱讀多重資訊，才在你眼中變成了「普通」的介面。
而詳細的標註，是讓所有這些視覺安排得以生效的關鍵， 很多的視覺元素構成的平衡，確實會因為很小的變動而被打破 ，只有開發認真根據標註完成介面，才能達到預期的視覺效果，達到和效果圖同樣的還原度。
如果更進一步理解呢？那對於介面開發來說，肯定會有很多的意義。例如開發可以在響應式佈局、自動佈局等等方面有更多的進步。因為想讓自動佈局達到最好的效果，開發應該清楚地明白，一個標註圖中哪些數值是絕對不可變的，哪些是可以根據螢幕尺寸變化而變化。
其實，因為設計經常也不理解開發所需要的資訊，在標註圖中經常顧及不到自動佈局、響應式等因素，如果這個時候開發對介面設計有更深的理解能力，就基本可以判斷哪些地方可以為自動佈局所用。
總結
最後、我認為任何人在一個專案過程中都要擁有 全域性性的思考能力 ，在創造一個產品的過程中，無論是開發者還是設計師、都要關注到上下游的各個環節、這樣才可以真正意義上提高一個產品的核心競爭力。
這裡推薦一下我的前端學習交流群：784783012 ，裡面都是學習前端的，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。最新技術，與企業需求同步，好友都在裡面學習交流，每天都會有大牛定時講解前端技術!
點選：加入