六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

新項目設(shè)計時一定會遇到的5個盲區(qū)

2021-3-22    資深UI設(shè)計者

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


關(guān)于蘋果賬戶登錄的硬性規(guī)定

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

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

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

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

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

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

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

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

實現(xiàn)這個效果的設(shè)計配合輸出也很簡單,只需要整理一下的具體啟動圖標(biāo)輸出就可以:

1. 啟動圖標(biāo)(前景,不帶背景的)-108dp(324px)

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

  • 啟動圖標(biāo)(前景,不帶背景的)-108dp(324px)
  • 啟動圖標(biāo)(背景)-108dp(324px)

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

這次新項目又遇到了開發(fā)中改稿的問題,大部分都因為全屏的背景圖切圖大小問題。

個別全屏視覺的界面,比如閃屏、登錄頁、音視頻語音等等,我們通常設(shè)計時不考慮切圖的大小問題就會比較放飛去設(shè)計。

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

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

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

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

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

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

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

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

  • Apng:一個 PNG 格式的位圖動畫格式圖片
  • Webp:2010 年 Google 推出的全部通吃的圖片格式(可代替 Jpg、gif、png)

目前我覺得性價比最高的就是 webp,它的優(yōu)勢主要在于:

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

唯一的 2 個問題在于:

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

我度娘過一些導(dǎo)出 webp 的方式都不是很好用,問了我司的動效設(shè)計師,推薦一個比較簡單靠譜的方式分享給大家:

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

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

2.下載 isparta

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

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

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

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

新項目設(shè)計時一定會遇到的5個盲區(qū),提前替你總結(jié)好了!

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

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

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

文章來源:優(yōu)設(shè)   作者:Nana的設(shè)計錦囊

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


分享本文至:

日歷

鏈接

個人資料

存檔