您的位置:365bet在线投注官网 > 心理学 > UI设计间距标注谁都会还原度为何如此低?

UI设计间距标注谁都会还原度为何如此低?

发布时间:2019-09-17 02:16编辑:心理学浏览(89)

      优秀的设计能够有效地传达产品价值,但也离不开技术的落地支持。随着市场环境变化与行业水平的提升,越来越多设计师开始意识到:设计稿还原的重要性。

      但是在配合过程中,设计与研发思维的偏差也逐渐体现:“这个需求做不了,那个间距调不好”设计稿落地后,往往要经过多轮测试和“小板凳”对接,才能达到预期效果。

      可以说,在每一位UI设计师的成长过程中,设计稿还原,是一个必定经历 且 难以解决的问题。

      如何更好的实现设计还原度,减少重复工作呢?不妨试试换个角度,学习用开发的思维来做设计。

      面对它的时候,设计师应站在开发的角度,用动态视角的思维,对界面中元素位置进行合理的动态布局,输出正确的位置标注,减少开发人员多次返工的窘境。

      我们常说的“位置”是代表元素在界面内X轴与Y轴的坐标,同一元素会因为在不同的机型中呈现出不同的位置,大致会分为两种:1. 绝对位置;2. 相对位置。

      就如初中物理学到的“运动与静止的相对性”,一艘船在海面航行,海岸是参照物,船相对于海岸是相对位置,海上的灯塔是绝对位置。

      比如:支付宝的列表流。列表的间距固定,当删除一个列表时,下面的列表位置自动上移。(如下图)

      在做标注的时候,通过分析元素与元素之间的相关性作出标注,标注元素位于所在楼层的位置。它能同时适用在整个制作设计稿的过程中。

      比如:列表流、多个卡片或多行金刚区,只需标注某一层中元素的位置关系即可。(如下图)

      对于位置的标注,并不是把元素的坐标点、上下左右间距都标注出来。而是根据元素与元素之间的关系,决定是否标注为绝对位置或相对位置,并对其进行明确清晰的标注以便开发人员能更好更快的还原。

      同时,在36氪的界面中还可发现一个小细节:右侧图标并没有贴着安全区域。这是因为在图标尺寸较小的情况下,为了保证其易点击性,会在其四周填入空白像素,使可点击热区面积大于图标的视觉尺寸。(如下图)

      在设计的过程中,我们应该使用常用的页边距,如32px、30px、24px、20px。

      通常情况下,会根据格式塔中的“相近原则”,使块内间距小于块外间距,保证内容块的亲密性以及块与块之间的分隔感。(如下图)

      在开发过程中,开发人员往往需要使用模块开发,这时就需要用到块外间距。在标注块外间距的时候,需要设计师和开发人员保持思维的统一,这样才能保证页面的还原度。

      2.给定间距,从上下向中间方向适配。一般可以基本做到适配各个尺寸,但容易出现布局不协调的现象。

      3.确定各元素中心点位于画板的比例位置,按比例确定位置。这个方法可以完美适配出优美的布局。(如下图)

      具体的做法是固定上下区域,中间间隔区域自适应。单独划分的区域可以直接给定高度数值,或者给定比例。(如下图)

      3和4是比较常用的高度适配方法,尤其是第4种,酷狗和QQ音乐都是采用第4种方法进行适配。(如下图)

      总而言之,为了避免设计师和开发人员在间距上产生问题,一方面在设计的过程中,我们保持统一性,减少出现大量不同间距数值的情况,让开发人员在写页面的时候更顺畅、效率更高。

      另一方面我们需要在标注的时候关注开发人员所需要的内容,理解开发思维,与他们统一思路。

      2.设置常用间距:如最小单位为4px的情况下,常用间距设置为:8、16、24等4的倍数。

      一稿适配时,面对不同尺寸机型,使用4px网格换算之后都是整数倍,这样我们的视觉元素就不会因为适配而变形模糊。而常用间距使用最小单位网格的倍数设置,可以保证视觉元素的精准,使设计变得有理有据,也便于开发人员实现还原,降低沟通成本。

      比如:能使用16的时候,就避免使用18或者20,但是也要依据实际情况进行动态调整。做到尽量“克制”,避免过多的间距让开发人员在还原的过程中产生不必要的麻烦。

      图标是设计中最常用的基础元素,我们会在金刚区、tab栏、个人中心、导航栏等不同位置用到。

      淘宝用的是等间距布局,唯品会用的是屏幕等分。先标注出图标尺寸,再针对不同布局方式来进行间距的标注。这样我们就完成了有底版图标标注,与开发人员对接的时候就能很好的说明清楚,减少不必要的沟通成本。

      这类图标会出现在金刚区、列表流、导航栏、tab栏等位置,比如:得到、马蜂窝等。

      不规则图标我们需要按照图标盒子的区域来进行切图,标注的时候也是以图标盒子区域来进行标注。

      同时,还需要:标出图标盒子是有最小可点击区域。通常来说最小的可点击区域是48px*48px,把它写入规范文档中。这样,方便开发人员查阅,也节省了整个项目流程的时间。

      分割线作为页面中的微小元素,我们很容易在设计中忽视它,因此,做好分割线的标注是非常重要的。下面主要以3个主要场景来分点解释分割线.feed流;3. 内容块之间。1.列表流

      大部分列表流都会用到分割线,比如:支付宝、微信。这种分割线叫等屏分割线,用于分割列表中的每个数据项。我们标注出列表流的高度,再以图标为参考标注出分割线到图标的距离。

      。所以我们不能完全标注到文字本身,而要留出几个像素作为文字自身的行高。

      但这里有一点需要注意的是:在画分割线时会出现遗漏的问题。我们经常会用到sketch来画,但是由于sketch的默认属性,线条的线型是居中(center)的,这会导致我们画的线条在视觉上是对齐像素的,但是在数据上会显示0.5个像素。

      后来,设计师逐渐使用了sketch文字默认的行高导出标注文件,但在验收开发版本还原度的时候,还是发现与设计稿标注的间距不一样。

      由上图可以发现:开发人员在写字体的时候会使用一个类似textview的,我们可以理解成一个文本框,字其实不是顶满这个框的,是有一定留白的。

      这个插件适用于苹方和SF字体,点击fix即可一键修复成xcode原生行高。虽然这类插件看着能一劳永逸,但目前市面上应用较少,bug也比较多,单行文本基本可以还原,多行文本则基本不适用。(插件可在附件下载)

      这时眼尖的朋友可能会发现,Android和iOS开发的文字编辑器默认的行高也不一样啊,难道我们要出2套设计标注文件吗?

      对于这点,比较建议大家可以尝试把ios和安卓都设置成一样的行高,针对特殊页面再单独做标注调整。总而言之,具体使用哪种方法去做文字的标注,要根据自己的项目具体情况具体分析。

      宽度适配普遍使用的是间距适配,即定好左右页边距,中间弹性拉伸。这种方式可以做到较好的适配,也是做快速常用的适配方法。

      阴影作为一个重要的视觉元素,让主元素和其他元素从背景中“弹出”并拥有深度,更好地将信息层级呈现给用户。(当然,我们今天的主要目标并不是教大家如何制作阴影,而是关于弥散阴影如何更好的与开发人员对接,还原给用户更好的体验)

      卡片位置偏移、文案对不齐、错位、弥散投影的颜色过浅或过深等等一系列问题?

      面对这些实现的痛点,以及与开发人员沟通时出现的各种问题,我们又该如何解决呢?

      结合自己实际的工作经验和与开发人员沟通的心得,实现弥散投影的方法,可以通过两个方法实现:

      对接这个时候需要设计师和开发人员都比较细心,因为切图也有一些弊端,因为每个卡片都使用切图的话,会使开发的包变大,可能会出现加载慢,闪退等情况,这些体验也是很糟糕了。

      2.前端会首选用css代码实现弥散阴影效果常规情况下,效果都比较好,但是也会遇到一些遇到异常情况,比如不规则形状,通常用代码也比较复杂,这个时候需要提前与开发人员沟通切图情况,避免后期一些问题。

      设计稿,在输出明确清晰的标注的同时单独标注出易引发歧义的元素,以减少还原度误差;

      使用倍数原则确定常用间距,保证适配时各元素间的准确性,减少开发复杂度;3、图标

      手动修改行高为开发环境下的默认行高;适配多行文字时,确定好文字左右页间距

      常规投影与弥散阴影推荐使用css代码完美实现;特殊情况下还需提前与开发人员沟通权衡各种方式的利弊,选择适合项目产品的实现方式

      优秀的设计离不开开发人员的落地支持。作为设计师,协同开发人员完成设计落地也是工作中重要的一环。做好以上几点,站在开发人员的角度为他们“多想一步”,高质量的设计还原指日可待。最后献上我们团队研究组成员的集体照,不负我们2个月多的辛苦研究(づ ̄3 ̄)づ

    转载请注明来源:UI设计间距标注谁都会还原度为何如此低?