嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片

新項目設計時一定會遇到的5個盲區,提前替你總結好了

2021-3-23    高勁


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

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

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

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

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

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

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

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

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

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

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

想了解更多具體內容的鐵汁,戳底下官方傳送門:https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive

關于全屏切圖的壓縮限制

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

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

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

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

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

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

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

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

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

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

唯一的 2 個問題在于:

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

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

1. 先從 AE 導出逐幀圖(記得需要循環的動效做好循環)

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

2.下載 isparta

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

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

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

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

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

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

新項目設計時一定會遇到的5個盲區,提前替你總結好了!

新項目設計時一定會遇到的5個盲區,提前替你總結好了!





文章來源:優設網     作者:Nana的設計錦囊



藍藍設計m.sdgs6788.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



日歷

鏈接

個人資料

藍藍設計的小編 http://m.sdgs6788.com

存檔

嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片
<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 欧美日韩亚洲网| 国产精品伊人日日| 欧美日韩精品综合| 在线播放不卡| 久久国产精品久久国产精品| 亚洲第一网站| 欧美中文字幕在线播放| 国产精品日日摸夜夜添夜夜av| 亚洲看片免费| 亚洲丰满在线| 免费91麻豆精品国产自产在线观看| 国产精品成人一区二区网站软件| 亚洲二区免费| 免费观看成人网| 亚洲欧美日韩精品在线| 欧美高清视频在线播放| 国内揄拍国内精品久久| 亚洲一区制服诱惑| 亚洲自拍另类| 欧美国产一区二区| 亚洲视频免费在线| 欧美在线网址| 欧美日产一区二区三区在线观看| 欧美三级电影大全| 狠狠88综合久久久久综合网| 亚洲一二区在线| 亚洲欧洲在线一区| 午夜精品一区二区三区在线播放| 欧美日韩欧美一区二区| 亚洲精选视频在线| 欧美在线视频免费| 亚洲免费人成在线视频观看| 国产精品美女主播| 欧美亚洲日本国产| 亚洲欧美区自拍先锋| 国产精品久久二区二区| 亚洲一区在线免费观看| 日韩视频不卡中文| 欧美日韩免费一区| 亚洲香蕉网站| 一区二区不卡在线视频 午夜欧美不卡在| 久久久久久9| 亚洲一区二区在线免费观看| 狼人天天伊人久久| 激情综合色综合久久综合| 午夜精品视频在线| 日韩视频在线你懂得| 久久久精品五月天| 亚洲国产岛国毛片在线| 亚洲国产另类久久久精品极度| 久久免费少妇高潮久久精品99| 黄色在线一区| 欧美激情第4页| 欧美日韩1区| 亚洲一区二区三区在线播放| 亚洲香蕉视频| 在线成人中文字幕| 亚洲高清在线| 欧美日韩国产电影| 久久se精品一区精品二区| 久久久国产91| 亚洲裸体俱乐部裸体舞表演av| 日韩亚洲一区在线播放| 国产精品卡一卡二| 免费av成人在线| 久久激情网站| 国产亚洲欧美激情| 猫咪成人在线观看| 欧美午夜影院| 久久午夜电影| 欧美三级电影精品| 另类专区欧美制服同性| 欧美日韩精品免费观看视频完整| 性欧美xxxx大乳国产app| 久久蜜桃香蕉精品一区二区三区| 亚洲另类春色国产| 香蕉久久精品日日躁夜夜躁| 亚洲人成啪啪网站| 亚洲欧美一区二区视频| 亚洲精品一区二区在线观看| 亚洲欧美在线播放| 亚洲国产欧美日韩另类综合| 亚洲午夜激情| 亚洲精品影院| 性色av一区二区三区在线观看| 亚洲欧洲视频在线| 午夜精品免费在线| 99天天综合性| 久久亚洲国产成人| 欧美在线免费看| 欧美日韩亚洲一区三区| 免费看的黄色欧美网站| 欧美大胆人体视频| 中文国产亚洲喷潮| 久久riav二区三区| 亚洲欧美久久久| 欧美日韩精品免费在线观看视频| 免费毛片一区二区三区久久久| 久久影院午夜论| 亚洲欧美国产日韩天堂区| 欧美在线播放| 欧美一区二区三区另类| 欧美日韩亚洲一区二区三区四区| 欧美激情第三页| 在线看一区二区| 久久国产色av| 亚洲风情亚aⅴ在线发布| 午夜精品久久久久久久男人的天堂| 久久久久综合网| 亚洲国产高潮在线观看| 欧美一区二区私人影院日本| 先锋影音久久久| 国产精品热久久久久夜色精品三区| 亚洲精品在线三区| 亚洲美女中文字幕| 久热精品视频在线观看一区| 久久最新视频| 一区二区三区在线免费视频 | 欧美一区成人| 国产精品你懂得| 中文日韩欧美| 亚洲一区视频在线| 国产精品v亚洲精品v日韩精品| 欧美高清日韩| 亚洲精品男同| 欧美少妇一区二区| 亚洲一区二区三区777| 性欧美1819sex性高清| 国产一二三精品| 久久精品视频在线观看| 欧美~级网站不卡| 亚洲精品国产精品国自产观看浪潮| 你懂的国产精品| 亚洲精品一二三| 先锋影音久久| 在线成人免费观看| 欧美精品福利| 亚洲综合好骚| 欧美一区2区视频在线观看| 国产美女精品一区二区三区| 欧美亚洲免费在线| 欧美国产日韩精品| 亚洲天堂av高清| 国产亚洲欧美日韩一区二区| 亚洲一区二区综合| 亚洲国产日韩欧美| 欧美激情视频在线播放| 亚洲深夜av| 麻豆精品一区二区综合av| 99国产精品99久久久久久| 国产精品毛片va一区二区三区| 欧美一区二区三区久久精品| 亚洲国产第一| 校园激情久久| 亚洲人成7777| 国产欧美日韩一区二区三区在线观看| 久久男人资源视频| 一区二区不卡在线视频 午夜欧美不卡在| 99精品热6080yy久久 | 国产精品美女久久久久久久| 久久av一区二区三区亚洲| 亚洲国产精品美女| 久久成人国产| 一区二区日韩伦理片| 国产日产亚洲精品系列| 欧美劲爆第一页| 久久福利毛片| 亚洲在线观看免费| 亚洲激情视频| 久久人人精品| 午夜亚洲激情| 亚洲美女在线视频| 国产精品乱子久久久久| 欧美成人伊人久久综合网| 欧美一区视频| 午夜在线播放视频欧美| 亚洲乱码国产乱码精品精天堂 | 国产一区二区三区精品欧美日韩一区二区三区 | 久久一日本道色综合久久| 一区二区三区日韩在线观看| 在线精品亚洲一区二区| 国产精品综合色区在线观看| 欧美日韩大陆在线| 美女91精品| 久久久91精品国产一区二区三区| 亚洲一区二区三区高清不卡| 亚洲精品男同| 亚洲第一视频网站| 久久天堂成人| 国产欧美日韩在线视频| 国产精品成人一区| 欧美日韩国产限制| 久久精品视频在线看| 欧美亚洲免费电影| 先锋影音久久| 午夜精品视频在线观看一区二区| 在线一区二区视频| 亚洲一区二区三区在线观看视频 | 久久精品男女| 亚洲视频一区在线观看|