設計的思考

來自專欄 木子是前端在配圖還在旋轉的過程中，讓我們站在前端角度聊聊對於動態網頁設計的一點思考。

思考來源於生活和工作中遇到的問題和現象，最近一直在做一個大表單的頁面改版，在比照設計稿改動頁面的過程中，有些問題值得深思。

剛拿到設計稿的時候，看著設計的很簡約很舒服的頁面特別心喜，不知道作為前端的你會不會有這樣興奮的感覺，一心想把這個頁面規劃好，但是隨著著手操作實施，許多問題都出現了。

設計稿是靜態的，如何讓它動起來是需要產品和設計就前端開發遇到的問題和實現度上考慮，進行思考和定奪的。第一版的設計稿是考慮不到那麼多的細節問題的，可能展示的只是這個產品流程中觀察到的一部分內容。比如我的表單中有較為複雜的圖片上傳模塊，地址選擇模塊，富文本編輯器模塊，添加視頻，圖片，關聯頁面模塊等等會涉及到很多彈層和多狀態的組件。設計師給到的可能只是在前端頁面上展示的最初內容。這個是需要前端工程師在不斷實現需求的過程中，要反覆和產品和設計師溝通的地方。

上面講到了設計初稿沒有考慮到的問題，下面來說說這些都考慮到了之後，還會出現的問題。比如這個設計你是否設計的是合理的？舉一個我最近遇到的例子：上傳文件的組件。

設計稿給出了如下內容：

• 上傳的按鈕

• 上傳限制提示文字

• 上傳後圖片展示
• 繼續上傳按鈕

作為前端寫代碼的時候，我會考慮的問題是：

• 頁面里多處涉及到上傳文件功能
• 上傳文件圖片組件是否可以提取，復用
• 對於復用組件，它的輸入，輸出，可變的東西 & 不變的東西
• 為了實現設計稿是會多寫很多冗餘的代碼，還是很方便簡潔的就可以實現

對於現有的設計稿，我在實現的過程中，可能希望設計稿添加的內容是：

• 上傳圖片後展示圖片是橫向排列，縱向排列 （是否會影響整體頁面的布局）
• 多張圖片上傳後，上傳圖片後是否添加刪除功能，刪除按鈕如何設計展示
• 為上傳按鈕和上傳後繼續上傳的按鈕，是否可以盡量滿足設計的一致性（便於代碼的可復用性）
• 只上傳一張圖片，還是支持多張圖片上傳，不同情況如何考慮，展示
• 上傳失敗後的錯誤提示如何展示，對應文案是什麼，如不能上傳超過2M的文件，只允許上傳 .png .jpeg .pdf 格式的文件

我暫時遇到和想到的問題是這麼多，我覺得每一個細節的部分，是否值得拿出來和大家討論和完善，是取決於多方面的。比如實現和設計的人是誰，是否想完善討論這些事無巨細的內容？大家是否重視或有時間思考這些問題？這個需求滿足使用的用戶是誰，如果有或者沒有這些細節點的結果是什麼？等等都是需要我們關注的點。。。

上面這些是我思考的內容，想在這裡記錄和大家聊聊，我覺得有的問題適合思考，有的問題適合思考後實現改善，有的問題不適合拿來討論。你的生活中可能遇見過很多值得思考的問題，不一定非要解決它，但這個問題值得你想一想。

註：配圖是 zeplin 網站的首頁 loading 圖，不知道為什麼進這個網站總是要靠運氣？

推薦閱讀：