最近負(fù)責(zé)的新項(xiàng)目快上線(xiàn)了（感覺(jué)我好像一直在做 0-1），給大家總結(jié)了5個(gè)一定會(huì)遇到的新項(xiàng)目盲區(qū)及最新的解法，希望能幫助大家在交付開(kāi)發(fā)前就順利完成設(shè)計(jì)輸出。

關(guān)于蘋(píng)果賬戶(hù)登錄的硬性規(guī)定

2020 年 4 月后，我們?cè)谠O(shè)計(jì) iOS 登錄界面的時(shí)候都知道必須加上蘋(píng)果官方強(qiáng)行要求的 Apple 賬戶(hù)登錄按鈕，但關(guān)于這個(gè)按鈕的設(shè)計(jì)規(guī)范其實(shí)有比較硬性的規(guī)定，沒(méi)有注意的話(huà)到了開(kāi)發(fā)還原的時(shí)候就容易踩坑。

在國(guó)內(nèi)的 iOS 登錄設(shè)計(jì)中通常突出的主流登錄方式是“微信”，手機(jī)登錄以及其他的第三方登錄都會(huì)以更弱一點(diǎn)的視覺(jué)方式呈現(xiàn)。

蘋(píng)果官方是允許對(duì) Apple 賬戶(hù)登錄按鈕進(jìn)行一定的自定義的，其中就包含將其弱化為一個(gè)圓形的圖標(biāo)按鈕，只是圖標(biāo)與圓形按鈕的大小比例是官方固定的比例（這個(gè)大家直接下載官方提供的圖標(biāo)，它是自帶留白的區(qū)域的，保持圖標(biāo)與高寬一致就符合要求了）。

而國(guó)外的 iOS 登錄設(shè)計(jì)中通常沒(méi)有那么多的第三方登錄方式并存，主要的“Facebook”與手機(jī)登錄通常會(huì)與 Apple 賬戶(hù)登錄按鈕同一級(jí)出現(xiàn)在界面中。

這個(gè)時(shí)候需要特別注意的是，蘋(píng)果官方對(duì)于這種大按鈕的限制主要在于 3 個(gè)部分：

• 按鈕的高度需要等于圖標(biāo)的寬高（圖標(biāo)官方有提供下載，已經(jīng)是自帶留白區(qū)域的）
• 按鈕的高度需要與中間的文案成一定比例（字體是按鈕高度的 43%，比如 44 的高度配 19 的字）
• 圖標(biāo)離左側(cè)最小間距需要超過(guò)按鈕高度的 10%

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

想了解更多具體內(nèi)容，可以參考官方貼：https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/

關(guān)于安卓啟動(dòng)圖標(biāo)可帶動(dòng)效了

還記的早幾年做安卓項(xiàng)目的時(shí)候上架應(yīng)用商店的啟動(dòng)圖標(biāo)輸出還是和 iOS 差異不大的，基本就是尺寸換換。這次輸出啟動(dòng)圖標(biāo)，被安卓的開(kāi)發(fā)大大告知，安卓可以出這種帶動(dòng)效效果的啟動(dòng)圖標(biāo)了，它的原理和效果，如下圖：

實(shí)現(xiàn)這個(gè)效果的設(shè)計(jì)配合輸出也很簡(jiǎn)單，只需要整理一下的具體啟動(dòng)圖標(biāo)輸出就可以：

1. 啟動(dòng)圖標(biāo)（前景，不帶背景的）-108dp（324px）

當(dāng)然以上僅針對(duì)純色背景，可以與 logo 主體輕易分隔的啟動(dòng)圖標(biāo)。如果是混為一體的話(huà)就需要調(diào)整輸出方式為以下：

• 啟動(dòng)圖標(biāo)（前景，不帶背景的）-108dp（324px）
• 啟動(dòng)圖標(biāo)（背景）-108dp（324px）

想了解更多具體內(nèi)容的鐵汁，戳底下官方傳送門(mén)：https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

關(guān)于全屏切圖的壓縮限制

這次新項(xiàng)目又遇到了開(kāi)發(fā)中改稿的問(wèn)題，大部分都因?yàn)槿恋谋尘皥D切圖大小問(wèn)題。

個(gè)別全屏視覺(jué)的界面，比如閃屏、登錄頁(yè)、音視頻語(yǔ)音等等，我們通常設(shè)計(jì)時(shí)不考慮切圖的大小問(wèn)題就會(huì)比較放飛去設(shè)計(jì)。

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

所以不得不要求我們?cè)谳敵龈袷降臅r(shí)候拋棄 png 格式，啟用 JPG。

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

• 盡量使用純色背景設(shè)計(jì)，這樣背景圖可以用代碼來(lái)寫(xiě)，主體切圖大小可以想對(duì)控制小一些。
• 如果還是需要使用花色背景，建議可以嘗試高斯模糊的花色背景，這樣開(kāi)發(fā)可以直接用 1 倍圖進(jìn)行拉伸，也可以有效控制切圖大小。

最后不想屈服于樣式限制的鐵汁，一定記得提前輸出格式大小康康會(huì)不會(huì)超標(biāo)嚴(yán)重（盡量控制在 100k 以?xún)?nèi)），不然無(wú)法落地再好看也沒(méi)有用咯。

關(guān)于動(dòng)效到底導(dǎo)出什么格式不坑爹

目前關(guān)于移動(dòng)端界面里個(gè)別小動(dòng)效的導(dǎo)出比較主流的幾種格式是：Gif、逐幀圖、Lottie（Jason）、Webp、Apng。

Gif、逐幀、包括前幾年流行的 Lottie 大家應(yīng)該都比較熟悉了，這里稍微科普 2 個(gè)陌生一點(diǎn)的格式：

• Apng：一個(gè) PNG 格式的位圖動(dòng)畫(huà)格式圖片
• Webp：2010 年 Google 推出的全部通吃的圖片格式（可代替 Jpg、gif、png）

目前我覺(jué)得性?xún)r(jià)比最高的就是 webp，它的優(yōu)勢(shì)主要在于：

• 壓縮率極大提升，同分辨率的 webp 比 gif 要小很多
• 支持位圖、支持支持 Alpha 透明和 24-bit 顏色數(shù)、支持 3D 翻轉(zhuǎn)（這些 GIf 和 Lottie 都有限制），也就是不會(huì)出現(xiàn)毛邊啦、變色一類(lèi)的坑爹情況
• iOS、安卓都支持（比如同樣高性?xún)r(jià)比的 Apng 只能用于 iOS 端）

唯一的 2 個(gè)問(wèn)題在于：

• webp 目前只兼容 Chrome 和 Opera 瀏覽器，其它瀏覽器不支持。不過(guò)基本我們都應(yīng)用于移動(dòng)端應(yīng)用，所以瀏覽器兼容對(duì)這個(gè)影響應(yīng)該還好
• AE、PS 等各類(lèi)動(dòng)效設(shè)計(jì)的軟件無(wú)法直接導(dǎo)出 webp 格式，需要通過(guò)插件或其他第三方軟件轉(zhuǎn)換。

我度娘過(guò)一些導(dǎo)出 webp 的方式都不是很好用，問(wèn)了我司的動(dòng)效設(shè)計(jì)師，推薦一個(gè)比較簡(jiǎn)單靠譜的方式分享給大家：

1. 先從 AE 導(dǎo)出逐幀圖（記得需要循環(huán)的動(dòng)效做好循環(huán)）

不知道如何到逐幀圖的看這里：渲染→渲染設(shè)置→格式→選擇“PNG”序列→導(dǎo)出即可

2.下載 isparta

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

關(guān)于切圖標(biāo)注協(xié)作方式誰(shuí)家強(qiáng)

設(shè)計(jì)交付的協(xié)同平臺(tái)現(xiàn)在市面上很多，很多大廠(chǎng)也有自己內(nèi)部的協(xié)同平臺(tái)來(lái)承載設(shè)計(jì)交付，俺們豬廠(chǎng)用的叫 dbox（非常滴不好用），在強(qiáng)推之下開(kāi)始申請(qǐng)經(jīng)費(fèi)改用 Figma 了。之前為了更換協(xié)同平臺(tái)，把交付的協(xié)同平臺(tái)都做了一番調(diào)研，這里給大家直接看表格吧。

看完圖大家就會(huì)發(fā)現(xiàn)除了 Figma 大家的使用情況不會(huì)差很多，差的主要還是錢(qián)?？偟膩?lái)說(shuō)的建議就是，如果已經(jīng)從sketch改用Figma的土豪團(tuán)隊(duì)就可以直接分享Figma文件鏈接給開(kāi)發(fā)搞定切圖標(biāo)注以及文件存檔這2件事兒了。

如果還在用 sketch 和 XD 的鐵汁，交付型的協(xié)同平臺(tái)我個(gè)人比較推薦 Zeplin，雖然有的人會(huì)說(shuō)它服務(wù)器在國(guó)外很卡，我覺(jué)得其實(shí)還好吧，同時(shí) Zeplin 近幾年還解決了 Win 系統(tǒng)適配的問(wèn)題。

然后最后小吐槽下騰訊的 Xshow。一開(kāi)始我覺(jué)得它是最香的，因?yàn)楦咔宥?、流暢度到美感幾乎都比較完美。一直到我發(fā)現(xiàn)了它居然是個(gè)完全開(kāi)放的交付協(xié)作平臺(tái)，也就是別人知道你的賬戶(hù) ID 之后就可以搜到你并看到你的所有項(xiàng)目文件，瞬間安全系數(shù)降為 0。作為一個(gè)明顯對(duì)標(biāo)企業(yè)級(jí)的協(xié)作平臺(tái)這么瘋狂的植入社交功能，到底是企鵝的社交基因太強(qiáng)大還是怎么肥四？

文章來(lái)源：優(yōu)設(shè)網(wǎng)     作者：Nana的設(shè)計(jì)錦囊

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)