前端開發面對設計稿的相關思考
一份設計稿新鮮出爐，你是不是摩拳擦掌，馬上就開工了？
不不不，這裡有坑！產品經理或者互動設計師可能更關注整體互動邏輯，視覺設計師可能更關注頁面的整體美觀度，而你，是要一點點實現出來的人，你更需要思考的是一些細節問題。
動手前來一波提神醒腦的小思考，讓你事半功倍。
從元素角度，檢查缺失的樣式
視覺稿上經常會缺失一些元素，咋一看不會影響整體互動，做的時候才發現有缺漏，就需要反覆溝通這些細節。畢竟設計師也不是隨時有空的，所以儘量在開工之前就把這些互動樣式一次性與設計師確認好。
checkbox/radio
上面這幾點，就是缺失的高頻元素。此外，還需要審視的地方：
- 若不同頁面間相似的元素樣式不同，以哪處為準，儘量保持統一，若需要不同，與設計師溝通好需求
- 切圖是否有遺漏，有時候設計師提供的由sketch匯出的html檔案內圖示沒有合併，無法直接切圖，可以告知設計師切圖或者拿到原始檔自己動手
- ...
第一步是一個快速反應的過程，比如看到checkbox就馬上檢查各種勾選狀態樣式是否齊全，看到結果頁就核對多種狀態是否齊全，這個步驟只需要快速審視頁面上的元素即可。
從元件角度，判斷樣式複用度
拿到一份設計稿時，千萬不要開啟第一頁就急匆匆地開始做，這樣等你開啟第二頁就會發現，啊蒼天啊！那麼多元素是相似的，但是你前面都做死了，重寫一份效率低，要改又很麻煩。
簡單舉個例子，比如某一頁設計稿上頂部有兩個tab，你直接 width: 50%; 。
然鵝，不幸的事情發生了，你開啟下一頁設計稿，發現這一頁的tab是3個。
這只是最簡單的情況，修改起來也很快，但是如果一開始你就考慮到tab的數量可能未知，從元件的角度考慮直接用flex佈局就是極好的，這樣無論是一個兩個還是三個四個你都不需要再改了，樣式的可拓展性就非常強:+1:。
第二步，把前前後後的設計稿都翻閱一遍，心裡大概有個底，哪裡樣式相似可以抽成UI元件，哪裡效果複雜需要重點關注。
從整體角度，作為使用者去體驗
最後就是把自己當成一個挑剔又無聊的使用者，來審視整一份設計稿/互動稿，把整體的流程在腦海中過一遍，檢視是否在互動上有缺失的地方，提前溝通效率翻倍。
比如：
- 有修改密碼的按鈕卻沒有對應點選後的互動和樣式？
- 活動頁上有很多活動綵帶，是否需要新增動畫增強互動效果？
- 某個按鈕優先順序明顯較高，就放到很深的層級，是否需要調整？
- ...
這裡可能會覺得跟第一步檢查是否有缺失的元素有重複，而我的理解是，第一步是一個 根據工作經驗快速反應的過程 ，而最後這一步，是需要認真理解互動的， 把設計稿/互動稿當成一個產品去體驗 ，根據你的重構經驗和作為使用者的體驗，把不合理的地方提出來討論。
最後一步，不要覺得你只需要把頁面實現出來，互動有別的專業同事去思考。每個人考慮的點有所不同，這個大家共同努力的產品也會在討論中更加豐富和完整。
思考以上問題的時候快速把問題記下來，交給產品同事或者設計師及時補充，這樣就可以邊開工邊等著補充的內容，不會出現整體做完了卻有很多細節被遺漏，需要等待的情況。
另外完工後也可以自己再對著前期的問題進行檢視，畢竟出現過遺漏的話說明這是一個需要關注的問題。
其實面對設計稿的思考，無非就是站在重構的角度上，把隱藏的問題提前丟擲，提高溝通效率，減少無謂的等待時間和糾結時間，工作效率自然upupup。
