最近负责新项目快上线了(感觉我好像在做 0-1),大家结了5个定会遇到新项目盲区及最新解法,希望能帮助大家在交付开发前利完成设计输出。
2020 年 4 月,我们在设计 iOS 登录界面的时道必须加上苹果官方强行要求的 Apple 账户登录按钮,但关个按钮的设计规范其有比硬的规定,没有注意的到开还原的时就容易踩坑。
在国内的 iOS 登录设计中通常突出的主流登录方式是“微信”,手机登录以及其他的三方登录以更弱一点的视方式呈现。
苹果官方是允许对 Apple 账户登录按钮进行一定的自定义的,其中就包含将其弱化为一个圆形的图标按钮,只是图标与圆形按钮的大小比例是官方固定的比例(个大家直接下载官方提供的图标,它是自带留白的区域的,持图标与高宽一致就符合要求)。
而国 iOS 登录设计常没有那么多第三登录并存,主要“Facebook”与手登录常会与 Apple 账户登录按钮级出现在界。
这个时候需要特注意是,苹官于这大按钮限制主要在于 3 个部分:
- 按钮的高度需要等图标的宽高(图标官方有提供下载,已经是自带留白区域的)
- 按钮高度需要与文案成定比例(体是按钮高度 43%,比如 44 高度配 19 )
- 图标离左侧最小间距需要超过按钮的 10%
剩下按钮样,比如颜色和描边也常有限,可以使用白色填充黑色描边与纯黑色底这 2 。
想了解更多具体容,可参考官方贴:https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
还记的早几年做卓项目的时候上架应商店的启图标输还是和 iOS 差异大的,基本就是尺寸换换。这次输启图标,被卓的开发大大告知,卓可这种带效效果的启图标了,它的原和效果,如图:
实现这个效设计配合输出也很简单,需要理下具体启动图标输出可以:
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 的切图大小限制。
用好这个在线图片压缩神器TinyPNG !能帮你的老板省钱
阅读文章
所以不不要求我们在输出格时候抛弃 png 格,启用 JPG。
过实际设计时候我们可仍然会遇到 JPG,必须 PNG 格式的情况(透明蒙层),那么建议大可尝试 2 个小技巧:
- 尽量使用纯色背景设计,这样背景图可以用代码来写,主体切图大小可以想控制小些。
- 如果还是需要使色背景,建议可尝试斯模糊的色背景,这样开发可直接 1 倍图进行拉伸,可有效控制切图大小。
最不想屈服样式的汁,一定得提前输出式大小不超标严重(尽量控在 100k 以内),不无法落地看也没有用咯。
目前关移动端界面里个别小动效的导出比主流的几种式是:Gif、逐帧图、Lottie(Jason)、Webp、Apng。
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”序列→导出即可
2.载 isparta
3. 直接将 AE 导出的逐帧图文件包拖到 isparta 里导出 webp 式(选)
设计交付的协同平台市面很多,很多厂也自己内部的协同平台承载设交付,俺们猪厂用的叫 dbox(非常滴不好用),强推之下始申请费改用 Figma 了。之了换协同平台,把交付的协同平台都了一番调研,这里给家直接看表格吧。
看完图家就会发除了 Figma 家的使用况不会差很多,差的主还钱。总的的建议就,如果已从sketch改用Figma的土豪团队就可以直接分享Figma文件链接给发搞切图标注以及文件存档这2件事儿了。
用 Figma 做产品设计,在线办公6个月是什么体验?
阅读文章
如果还用 sketch XD 的铁汁,交付型的协同平台我人比较推荐 Zeplin,虽然的人会它服务器外很卡,我觉得其实还好吧,同时 Zeplin 近几还解决了 Win 系统配的问题。
最小吐槽下腾的 Xshow。一开始我得它是最香的,因为高清度、流畅度到美感几乎比完美。一直到我现它居是个完开放的付协平台,也就是别人道你的账户 ID 之就以搜到你并看到你的所有项目文件,瞬间安系数降为 0。为一个明显对标企业级的协平台么疯狂的植功能,到底是企鹅的基因太强大还是怎么肥四?
腾讯内部神器XSHOW!超高效的设计协作工具!
阅读章
欢迎关注作者的公众号:「Nana的计锦囊」