1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 设计管理 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

你真的做好「设计交付」了吗?--九分网络

时间:2020-06-30   分类:设计管理    作者:网络   来源:网络整理   点击:155

你真的做好「设计交付」了吗?

www.9fen.net

九分网络

设计交付对于 UI设计师来说是一项必要的工作流程,
【网站建设微信小程序搭建就找九分网络,最低只要800元起!联系:13106499520 QQ:452570709】
设计交付影响着界面的最终实现和各尺寸适配效果。今天就和大家分享一下不同尺寸之间适配的影响。

内容采集来自9fen.net

一、适配不好是开发的责任?

很多刚入门的设计师都对适配有着误解。认为适配是开发小哥需要做的事,开发小哥需要对各尺寸的适配结果负责任,自己的工作就是把界面设计精美易用。这是非常不专业的想法,界面易用、精美固然重要,但界面最终不是存放于个人电脑中自我欣赏,而是以 app 的形式出现于用户的手机中,这时你的设计才会揭开神秘的面纱,展示最真实的样子。所以设计师很有必要配合开发去做还原和适配,进一步的完善产品,这是设计师必须关注和思考的一部分。

本文来自九分网络

我个人是对开发实现的最终效果比较在意的,我的上一篇文章《用这个免费的 Sketch 插件,帮你完美还原安卓界面!》中提到的问题,就是在数次拿到测试机后生无可恋的茫然中发誓要解决的。上篇文章解决了设计交付后的页面还原的问题,今天我就和大家分享一下设计交付对于不同尺寸之间适配的影响(iOS)。

www.9fen.net

二、自动化标注,一劳永逸?

截止到目前来看,自动化标注已经非常的智能和普及,很大一部分设计师都积极地迈进了自动化标注工具的大门,从此,告别加班。我不否认自动化标注所带来的设计交付效率的提升和人工的解放,但在这高效的背后,少了一次自我审核的过程,【手机站搭建找九分网络:13106499520 QQ:452570709】,就更要求设计师在设计界面时对尺寸、间距的把控,缺少了对页面还原把控的这次机会,所有设计元素、尺寸、间距等都交由开发自主掌控。并且在很大程度上降低了设计师对界面还原和适配结果的责任心,忽略了自动化标注对不同尺寸设备适配带来的不确定性。 本文来自九分网络

接下来我会从文字和图标、图片、组件等维度来分析一下,为什么不同尺寸设备之间的适配,无法用自动化标注描述清楚。以及应该如何做正确全面的设计交付。

内容采集来自9fen.net

三、文字和图标

文字作为界面设计中的基础之一,在设计交付中却很少单独提及,因为以 pt 为单位的文字,按照@3x和@2x的设备自动适配相应的大小,随着屏幕增大或缩小,两个设备上文字显示大小几乎一致。(plus 微大一点点)一屏中能看到的内容就相应的增加减少,有效的突出了大屏手机看更多内容的优势。

本文来自九分网络

你真的做好「设计交付」了吗?

九分网络

内容采集来自9fen.net

△ 手机为拍摄,为了界面清晰屏幕部分使用截图,下同。 九分网络

并且适配似乎最合乎开发的规范简单高效,并不会有特殊情况出现。但文字适配不只有这一种方式。 内容采集来自9fen.net

还有一种就是文字大小根据屏幕比例进行放大,在2倍图适配3倍图需要*1.5的基础上,再乘以两个屏幕的比例倍数,得到一个根据屏幕比例缩放后的文字。两设备上文字大小有明显区别,肉眼可见。

copyright 9fen.net

你真的做好「设计交付」了吗?

本文来自九分网络

九分网络

这样的文字适配方式的优势是,文字和界面的比例关系上更接近于设计图,同时也一定程度上避免了界面尺寸改变而文字没变,【手机站搭建找九分网络:13106499520 QQ:452570709】,界面中负空间的增加。这种方式适配的界面往往不只是文字,包括图片和组件等都会相应的等比缩放,来保持完整的一屏的内容呈现。

copyright 9fen.net

所以两种方式各有其优势,结合产品的不同页面内容及特点,采取合适的适配方式,更优质的向用户展示页面信息和产品内容。

本文来自九分网络

四、图片

这里的图片定义为横向铺满屏幕或基于屏幕横向大小才确定尺寸的图片,常见如 banner、背景图等。

九分网络

你真的做好「设计交付」了吗?

copyright 9fen.net

本文来自九分网络

这些图片如果在设计交付时没有对背景图的适配方式进行一些特殊要求强调,那开发默认写出来的在3倍图中就会出现图片压扁的情况,

本文来自九分网络

你真的做好「设计交付」了吗? 内容采集来自9fen.net

copyright 9fen.net

这是因为开发在写这个版块的时候,高度写了固定,宽度随屏幕拉伸,而高度适配X 1.5倍也小于等比拉伸之后的高度。所以图片被压扁。 内容采集来自9fen.net

标签: 页面 APP 适配 安卓适配 移动端尺寸 设计交付 设计还原

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----