設計還原度差?三步就可以提升!
設計還原度到底是態度問題還是技術問題?本文介紹幾個實用的提升設計還原度的方法。
如果你參與過實際的項目開發上線,必然會遇到一個合作中的難題——設計的還原度。
完美的設計稿一經開發實現后效果慘不忍睹,怎樣才能減輕還原的痛苦且達到很好的實現效果呢?
第一步,也是最重要的一步,設計師需要針對還原的重要性與開發達成共識。只有大家意識統一,才能共同解決問題。
一般來說還原度的重要性為:用戶產品>B端產品>后臺。對于用戶產品最好是能做到像素級。
然后開始我們具體的操作,從設計、標注、還原3個環節去提升設計的還原度。
一、優化設計文件,避免給自己挖坑
1. 文字
在界面設計中,文字往往會占比較大的比重,也容易影響最終效果。
文字在效果圖中最好按照中英文最好是單獨設置文字,開發還原度會更好。英文使用SF Pro 、中文使用PingFang SC。你也可以使用craft插件設置每個字體樣式或Text Style,這需要把行高調成和開發使用的system字體行高。
2. 對齊
我們經常會在設計中遇到圖文對齊的情況,如下圖,在設計邊緣對齊時,需要考慮到默認的文字行高(默認行高一般是字號的1.2倍)。如果需要強行對齊邊緣,可以文字往上移,因為有些機型的字體無法更改行高。
3. 特殊情況一定不能忽略
在設計中先考慮到一些極端情況,比如內容過長或過短,并在圖中做出示意。
例如微信小程序的表單組件規范:
by 微信小程序規范1.0
二、怎么標注才完美
很多設計師開始用sketch了,可以利用各種插件輕松導出設計規范,但在實際項目中,偷懶往往會造成后期更大的麻煩,合理利用標注工具,節約的時間可以把一些容易出錯的部分詳盡標出。
這里列舉2個非常常見的容易出錯的地方:
1. 關于動態內容的標注
如果內容是后臺上傳的動態數據,界面的內容展現則會出現多種情況,最好再補充一份設計展現邏輯的標注文檔。
舉個例子:
設計一套數據展現的卡片,我們需要提供的設計輸出包括:源文件、效果圖、切圖、Html的標注、設計規則的標注。
如下圖:
在這個圖示中,把卡片的功能區域進行了劃分,且把數據的可展現區域和對齊方式都做了說明,以保證數字變化時也能呈現比較好的視覺效果。(ps:為了更直觀此標注的其他部分做了簡化)
2. 展現邏輯的標注
這里給大家舉個tab的例子,如下圖,tab作為通用的組件,可能會出現2-n個,如果全部標注一遍,費時又不直觀。如果梳理一個展現邏輯,則會簡單易懂。
三、你好我好大家好的驗收方法
1. 規范宣講
視覺發布和規范宣講可以一同舉行,溝通開發需要注意的實現要點。設計過程中忽略的多狀態情況也可以通過宣講查缺補漏。會議中設計師做好紀要,已確保大家對于設計實現的達成一致。
2. 重疊還原法
顧名思義,就是把實現后的界面截圖與效果圖重疊在一起,進行像素級還原。雖然開發不太樂意,但是到底差在哪兒了,特別直觀。
3. 面對面聯調
設計規范做得再完善也難免會有欠缺,面對面調整效率是最高的。俗話說見面3分親,通常不愿意調整像素的開發,磨一磨也就同意了。
如果你有更好的還原方法,歡迎留言交流。
本文由 @Joyking 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Unsplash,基于CC0協議。
- 目前還沒評論,等你發揮!