在網(wǎng)頁設計中，如何在效果圖中照顧到前端及優(yōu)化的需求？
時間：2024-02-13 17:35:02 | 來源：網(wǎng)站運營
時間：2024-02-13 17:35:02 來源：網(wǎng)站運營
在網(wǎng)頁設計中，如何在效果圖中照顧到前端及優(yōu)化的需求？： 我認為設計師和前端工程師是在共同詮釋信息，只不過設計師是用視覺語言，前端工程師是用代碼。
一個頁面在前端工程師眼里就是一堆有組織的信息塊（信息對象），就像X射線掃過頁面，內(nèi)在的信息結構對應就是HTML的結構。比如一個評論區(qū)，可以在沒有設計的前提下，用HTML定義出它的結構，因為信息對象的屬性通常是固定的，如作者、發(fā)表時間、評論內(nèi)容、評論表單等。里面的對象還可以再細化，如評論表單還可以拆成更細的對象，如富文本編輯器。這樣將信息對象化之后會發(fā)現(xiàn)有大量重復的對象和固定模式可被重用。
如果設計師在設計頁面的時候也是這種思路，基于對信息的理解，先對象化，再針對對象設計。這樣才能本質(zhì)上實現(xiàn)模塊化設計和開發(fā)。好處是一方面能準確表現(xiàn)產(chǎn)品意圖，另一方面可以使開發(fā)過程更高效、更優(yōu)化。
設計師的理解一定要清晰的體現(xiàn)在設計圖上，才能避免開發(fā)過程中誤解。所以需要在設計圖上進行必要的標注。我總結了一些要素：
視覺規(guī)格要素：
1. 布局規(guī)格
2. 模塊劃分
3. 對象間距關系&位置
4. 字號&字體
5. 顏色&效果（包括漸變、陰影、透明度）
6. 對齊關系（包括極值）
7. 行高（默認160%）
8. 內(nèi)容（是否限長、限寬、限個數(shù)等）
9. 可點擊區(qū)域
10. 圖片（尺寸、比例關系）
11. 首屏線
交互規(guī)格要素：
1. 交互步驟說明（分鏡圖...）
2. 狀態(tài)（聚焦、失焦、有效、無效...）
3. 提示（成功、失敗、錯誤...）
4. 動態(tài)效果說明（動畫間隔、過渡效果...）
5. 數(shù)據(jù)交換方式（同步、異步、本地...）
6. 多和前端工程師交流
這些工程化的東西可能會讓感性的設計師們反感，但做為web設計師，這些東西會幫你產(chǎn)出一個更完整的設計。
在線咨詢