設計還原度差?三步就可以提升!

0 評論 4194 瀏覽 13 收藏 6 分鐘

設計還原度到底是態度問題還是技術問題?本文介紹幾個實用的提升設計還原度的方法。

如果你參與過實際的項目開發上線,必然會遇到一個合作中的難題——設計的還原度。

完美的設計稿一經開發實現后效果慘不忍睹,怎樣才能減輕還原的痛苦且達到很好的實現效果呢?

第一步,也是最重要的一步,設計師需要針對還原的重要性與開發達成共識。只有大家意識統一,才能共同解決問題。

一般來說還原度的重要性為:用戶產品>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協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!