作為一個前端工程師，在著手碼起代碼時，手上一般都拿著產品文檔、交互原型、標注圖和切好的圖片資源。開發者只要按照這些資源的指示把內容逐一整合到自己代碼里就算完成工作。但是俗話說的好，不愿意當產品的設計不是好開發，在「全棧工程師」被捧的越來越高的大潮中，一個合格的前端，應該明白自己在開發時手中的原材料到底意味著什么。這樣寫出的代碼，更能符合需求，提高產品的最終體驗，前端自己也能在這個過程中有更多的思考，修煉自己的各方面能力。

現在，我們應該跳出自己的工位，看看一個產品的所有需求，是經歷了怎樣的過程，來到自己的手上的。下面的流程比較典型，但可能和大家的實際情況有著或多或少的差別，但是在整體思路上是大致相同的。

產品篇

其實，需求最開始起源于用戶，而我們的產品經理捕捉、提煉、整合這些零散的需求，就產生了我們的開發對象——產品。前端們要去實現的各種邏輯和功能點，都一一對應了這些需求，可以說，這些功能是一個產品的靈魂。作為一個開發，可能會獲得產品經理寫的原型、文檔、思維導圖等等，形式上雖然多種多樣，但都是為了讓開發了解這個產品的功能點和基本架構。

產品類文檔可能不像交互文檔、視覺標注那樣貼近開發，甚至不讀都不影響前端的工作。但是這類文檔可以讓開發縱觀整個產品，讓開發掌握每一個功能點的輕重、意義，能幫助開發根據產品本身優化代碼，減少后期維護成本，間接地提高開發效率。

舉個例子，一個認真負責的好開發通過文檔了解到，一個產品可能會在將來考慮添加皮膚功能，那么他在開發過程中，可能會有意識地預留一些文字色值調整的小接口， 方便將來的更新迭代，免去了未來重寫代碼的痛苦。

諸如此例，深入理解產品的靈魂，可以讓開發寫出更靈活，更高效甚至更貼心的好代碼。

交互篇

如果產品是一把各種功能組成的瑞士軍刀，那么合理安排軍刀各個刀片位置，使得每一個刀片的功能可以發揮得當，就是交互設計師的任務了。而交互設計師的工作內容又分成兩個部分：一個是信息架構，一個是交互細節。

一個產品可能有幾十上百種功能，呈現數十種信息，如果都放在手機那 5 英寸上下的屏幕上，就成了一把布滿千奇百怪刀片的「刀球」，用戶根本無從下手，甚至連安靜地切個水果都做不到。因此交互設計師需要把各種功能和信息合理地「藏在」產品的各個層級之中，每個功能和信息都能在恰當的層級得到呈現，但也不能隱藏的太深，讓用戶找不到想要的功能。這就是信息架構的安排，合理的信息架構讓一個產品的功能出現在最合適的場景，讓用戶找到的就是自己想要的。

而交互細節則更像是刀的手感，怎樣得當地優化各種功能和信息在層級上的排布、位置和響應等等，讓用戶得到「人刀合一」感覺，讓功能不僅恰當的出現，還能順手地使用，比如下圖的例子。

諸如此例，我們可以看到交互會直接影響到產品功能能否被用戶正確發揮，功能是靈魂、那交互就是撐起靈魂的骨架。

將大量的功能和信息進行分類布局是和開發一樣消耗腦細胞的工作，交互設計師需要在界面復雜程度、層級深度和一些產品特殊需要等等因素之間做出恰當合理的權衡，才能做出合理的符合需求的交互文檔，即界面簡單易于理解，層級較淺易于用戶查找功能，又有合理的障礙來導向用戶。經過復雜的權衡后，得到的就是交給開發的交互文檔。

對于前端來說，交互文檔指示開發將功能分級、布局，只要嚴格遵守交互文檔的內容，我們就可以保證最終的產品成品有著漂亮而合理的信息結構、交互細節。如果試著更深的鉆研，就能夠掌握更多產品的內涵，去更加了解產品本身。

視覺篇

記得以前一個一起合作過項目的學長和我說：「不用有那么詳細的標注啦，其實標了我也不怎么看」。好在這位學長的設計感覺還不錯，做出來的東西并沒有太大的偏差。不過有這種想法的前端確實不在少數，畢竟現在的手機動輒幾百 ppi 的分辨率，一兩個像素和色值看起來沒什么差距，大致位置看感覺，切圖用你的不就好了嗎？

依然舉個例子，下面兩個界面，功能完整，同樣按照交互文檔開發，只是一邊的嚴格按照標注還原了設計稿，另一邊只是「憑感覺」。

我們可以看到「感覺流」的界面，頭像右側的信息內容完全沒有對齊，右邊界也沒有對齊可言，這樣用戶在從上到下獲取信息時，會看到一個參差不齊的信息頭部，需要不停地在水平方向調整視覺焦點，就因為相差了幾個像素，整個信息流在用戶眼中變得雜亂不堪，難以找到頭緒，給用戶的閱讀帶來了很大的不便。

其實視覺在產品中，相當于交互骨架之外的皮膚，而皮膚的一大功能是裝飾。一個產品的視覺設計決定這個產品是否美觀，能否給用戶帶來愉快視覺感受。一套好看的用戶界面，就像帥哥美女，讓人產生愉悅的感受。然而除此之外，視覺設計有著更深層的重要的功能，就是引導用戶獲取信息。

就像之前說過的產品瑞士軍刀，我們有了精良的刀片，妥當的構造，良好的外形設計，但是拿到手上我們卻不知道藏在其中的功能和信息怎樣觸發、獲取。這時視覺的更深層功能就要發揮作用。

如果把文字和圖形都歸納為視覺區域，這個視覺區域的大小、顏色乃至形狀，都會給人不同的影響力和感受，通過有效的安排這些因素，并加以合理的排列布局，可以有效的引導用戶閱讀多層次信息，了解不同重要程度的功能。交互設計師通過頁面區分層級，視覺設計師就要從視覺感受區分一個頁面的層級。可能看起來非常普通的界面，其實是有一層層的視覺安排，讓用戶行云流水地閱讀多重信息，才在你眼中變成了「普通」的界面。

而詳細的標注，是讓所有這些視覺安排得以生效的關鍵，很多的視覺元素構成的平衡，確實會因為很小的變動而被打破，只有開發認真根據標注完成界面，才能達到預期的視覺效果，達到和效果圖同樣的還原度。

如果更進一步理解呢？那對于界面開發來說，肯定會有很多的意義。例如開發可以在響應式布局、自動布局等等方面有更多的進步。因為想讓自動布局達到最好的效果，開發應該清楚地明白，一個標注圖中哪些數值是絕對不可變的，哪些是可以根據屏幕尺寸變化而變化。

其實，因為設計經常也不理解開發所需要的信息，在標注圖中經常顧及不到自動布局、響應式等因素，如果這個時候開發對界面設計有更深的理解能力，就基本可以判斷哪些地方可以為自動布局所用。

總結

最后，我認為任何人在一個項目過程中都要擁有全局性的思考能力，在創造一個產品的過程中，無論是開發者還是設計師，都要關注到上下游的各個環節，這樣才可以真正意義上提高一個產品的核心競爭力。

作者介紹：綠Lvgreen，前端圈的設計師，不定期在知乎更新學習筆記，歡迎關注：https://www.zhihu.com/people/xianchan/activities

「團隊溝通協作技巧」

• 《設計師如何有效參與團隊協作？來看支付寶設計師的總結！》
• 《騰訊CDC：如何有效進行跨團隊、多角色的溝通？》
• 《提高效率！如何避免團隊協作中的無效溝通？》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com