本期總結了5個一定會遇到的新項目盲區及最新的解法，從APP設計規范到動效再到協同辦公，基本涵蓋了大部分新手設計師會遇到的問題，希望能幫助大家在交付開發前就順利完成設計輸出。

1.關于蘋果賬戶登錄的硬性規定

2020年4月后，我們在設計iOS登錄界面的時候都知道必須加上蘋果官方強行要求的Apple賬戶登錄按鈕，但關于這個按鈕的設計規范其實有比較硬性的規定，沒有注意的話到了開發還原的時候就容易踩坑。

在國內的iOS登錄設計中通常突出的主流登錄方式是“微信”，手機登錄以及其他的第三方登錄都會以更弱一點的視覺方式呈現。

蘋果官方是允許對Apple賬戶登錄按鈕進行一定的自定義的，其中就包含將其弱化為一個圓形的圖標按鈕，只是圖標與圓形按鈕的大小比例是官方固定的比例（這個大家直接下載官方提供的圖標，它是自帶留白的區域的，保持圖標與高寬一致就符合要求了）。

而國外的iOS登錄設計中通常沒有那么多的第三方登錄方式并存，主要的“Facebook”與手機登錄通常會與Apple賬戶登錄按鈕同一級出現在界面中。

這個時候需要特別注意的是，蘋果官方對于這種大按鈕的限制主要在于3個部分：

• 1.按鈕的高度需要等于圖標的寬高（圖標官方有提供下載，已經是自帶留白區域的）
• 2.按鈕的高度需要與中間的文案成一定比例（字體是按鈕高度的43%，比如44的高度配19的字）
• 3.圖標離左側最小間距需要超過按鈕高度的10%

剩下的按鈕樣式，比如顏色和描邊也非常有限，只可以使用白色填充黑色描邊與純黑色底這2種。

2.關于安卓啟動圖標可帶動效了

還記的早幾年做安卓項目的時候上架應用商店的啟動圖標輸出還是和iOS差異不大的，基本就是尺寸換換。這次輸出啟動圖標，被安卓的開發大大告知，安卓可以出這種帶動效效果的啟動圖標了，它的原理和效果，如下圖：

實現這個效果的設計配合輸出也很簡單，只需要整理一下的具體啟動圖標輸出就可以：

• 啟動圖標（前景，不帶背景的）-108dp（324px）

當然以上僅針對純色背景，可以與logo主體輕易分隔的啟動圖標。如果是混為一體的話就需要調整輸出方式為以下：

• 1.啟動圖標（前景，不帶背景的）-108dp（324px）
• 2.啟動圖標（背景）-108dp（324px）

3.關于全屏切圖的壓縮限制

這次新項目又遇到了開發中改稿的問題，大部分都因為全屏的背景圖切圖大小問題。個別全屏視覺的界面，比如閃屏、登錄頁、音視頻語音等等，我們通常設計時不考慮切圖的大小問題就會比較放飛去設計。

但實際情況是一張全屏的花色3倍png切圖基本都在2M左右，就算把壓縮率提到80% （市面上大部分壓縮軟件的壓縮率都很有限，比如大家常用的tinypng、pp鴨等），就算你重復壓縮，也有至少200多KB，遠遠超出開發100k以內的切圖大小限制。

所以不得不要求我們在輸出格式的時候拋棄png格式，啟用JPG。

不過實際設計時候我們可能仍然會遇到不能用JPG，必須用PNG格式的情況（透明度蒙層），那么建議大家可以嘗試以下2個小技巧：

• 1.盡量使用純色背景設計，這樣背景圖可以用代碼來寫，主體切圖大小可以相對控制小一些。
• 2.如果還是需要使用花色背景，建議可以嘗試高斯模糊的花色背景，這樣開發可以直接用1倍圖進行拉伸，也可以有效控制切圖大小。

最后不想屈服于樣式限制的鐵汁，一定記得提前輸出格式大小康康會不會超標嚴重（盡量控制在100k以內），不然無法落地再好看也沒有用咯。

4.關于動效到底導出什么格式不坑爹

目前關于移動端界面里個別小動效的導出比較主流的幾種格式是：Gif、逐幀圖、Lottie（Jason）、Webp、Apng。

Gif、逐幀、包括前幾年流行的Lottie大家應該都比較熟悉了，這里稍微科普2個陌生一點的格式：

Apng：一個PNG格式的位圖動畫格式圖片

Webp：2010年Google推出的全部通吃的圖片格式（可代替Jpg、gif、png）

目前我覺得性價比最高的就是webp，它的優勢主要在于：

• 1.壓縮率極大提升，同分辨率的webp比gif要小很多
• 2.支持位圖、支持支持 Alpha 透明和 24-bit 顏色數、支持3D翻轉（這些GIf和Lottie都有限制），也就是不會出現毛邊啦、變色一類的坑爹情況
• 3.iOS、安卓都支持（比如同樣高性價比的Apng只能用于iOS端）

唯一的2個問題在于：

• 1.webp目前只兼容Chrome和Opera瀏覽器，其它瀏覽器不支持。不過基本我們都應用于移動端應用，所以瀏覽器兼容對這個影響應該還好
• 2.AE、PS等各類動效設計的軟件無法直接導出webp格式，需要通過插件或其他第三方軟件轉換。

我度娘過一些導出webp的方式都不是很好用，問了我司的動效設計師，推薦一個比較簡單靠譜的方式分享給大家：

1.先從AE導出逐幀圖（記得需要循環的動效做好循環）不知道如何到逐幀圖的看這里：渲染→渲染設置→格式→選擇“PNG”序列→導出即可

2.下載isparta

3.直接將AE導出的逐幀圖文件包拖到isparta里導出webp格式（可選）

5.關于切圖標注協作方式誰家強

設計交付的協同平臺現在市面上很多，很多大廠也有自己內部的協同平臺來承載設計交付，俺們豬廠用的叫dbox（非常滴不好用），在強推之下開始申請經費改用Figma了。之前為了更換協同平臺，把交付的協同平臺都做了一番調研，這里給大家直接看表格吧。

看完圖大家就會發現除了Figma大家的使用情況不會差很多，差的主要還是錢。總的來說的建議就是，如果已經從sketch改用Figma的土豪團隊就可以直接分享Figma文件鏈接給開發搞定切圖標注以及文件存檔這2件事兒了。如果還在用sketch和XD的鐵汁，交付型的協同平臺我個人比較推薦Zeplin，雖然有的人會說它服務器在國外很卡，我覺得其實還好吧，同時Zeplin近幾年還解決了win系統適配的問題。

然后最后小吐槽下騰訊的Xshow。一開始我覺得它是最香的，因為高清度、流暢度到美感幾乎都比較完美。一直到我發現了它居然是個完全開放的交付協作平臺，也就是別人知道你的賬戶ID之后就可以搜到你并看到你的所有項目文件，瞬間安全系數降為0。

所以如果想用來做為企業級的協作平臺，需要考慮安全問題。