设计师必须要学会的自查技巧

原创文章 分类: 经验/观点 版权:
702 15 10 0
2018-12-06
5.2
编辑推荐

设计师在设计稿的过程中,很容易陷入到某一个点中,对其他的细节选择性忽视了。这个时候就需要在交稿前,对设计稿进行自查,把一些低级的错误扼杀在摇篮中。

自查表按照我自己的经验,大致分为两个大类,一个是设计稿本身,二是与其他页面的统一性。在这里有个建议,当设计稿做完的时候,先去上个厕所或者出去走一下,回来再来看,放松一下眼睛和思维。


一、设计稿本身


设计稿本身指的是就当前页面来说,所存在的问题,包括没对齐、图标风格和大小不统一、间距过大过小、文字对比不明显、图片没有铺满等等。


1.对齐


页面上的元素必须得有它对齐的方式,左对齐、右对齐、居中对齐都可以,但一定要有明显的能被人一眼看出来的对齐方式,不然就会觉得页面上的元素是随意放置的。

自查的时候首先要注意那些明显的没对齐的地方。(PS:为了方便大家看清楚差别,所以示意图稍微夸张了点,实际大多是一两像素没对齐)

Image title



2.图标


风格

检查一下图标的风格是不是一样,比如面性的就都是面性的,线性的都是线性的。


大小

大小主要指的是图标的大小在页面中的比例,在视觉层面上是否合适,有些时候图标本身风格、样式都没什么问题,但就是跟页面其他元素相比太大或者太小了。还需要注意一点,物理大小一样不代表视觉大小也一样,优先满足视觉大小一致。


我自己之前就遇到过,当时特别认真的画了一组图标,信心满满觉得比之前画的好很多,小溜Epik 看过之后第一反应就说太大了,不合适,过了一会我自己从那个画图标的兴奋感中出来之后,自己再看也觉得太大了,跟整体不搭。所以这也是为什么文章一开头,就建议大家做完稿之后,出去晃悠一会再回过头来看。


在这里举个例子吧,介于当时的图不合适发出,特此凭凑了一张图,不过意思是一样的。

Image title



左边的图标单个看没什么问题,但和文字放一起,图标就显得整体大了很多,看起来及其不协调。而右边就看起来般配一点。


3.间距


间距的作用是用来区分层级,间距的大与小或多或少会影响到这一点。正如《写给大家看的设计书》中所说的亲密性一样,区分层级的本质也就是区分亲密性,页面上间距最小的,亲密性最强,属于同一层级;页面上间距最大的,亲密性最弱,不属于同一层级。

Image title


自查的时候需要着重看一下,信息层级是否区分开了,比如两个模块之间的间距一定是要大于模块内部的。

Image title


4.对比


区分层级除了通过间距还可以通过对比,对比的方式、种类有很多种,这里就不一一展开说了,这里只讲文字间的颜色对比。以讨论区为例,讨论区一般包含用户头像、昵称、时间、评论内容以及一些辅助的功能,点赞收藏、评论、回复那些。


下图中网易新闻和喜马拉雅两者相比起来,就信息层级来说,网易新闻区分的更开一点,层级更明确。

Image title


而去对比它们页面所使用的颜色,就可以发现,网易新闻的颜色对比度更大,对比度大,信息自然而然就更明显了。

Image title

而我们在交付前的设计自查时,就需要着重检查一下页面的信息是否区分开了,对比度是否合理。这一点算比较深层次的自查了,新手可能很难发现问题,这时候可以去寻求他人的帮忙,比如同事、朋友等。


5.图片


在 Sketch 里,大家都是画一个矩形,然后和图片一起做成蒙版,但有时候会出现图片没有铺满整个矩形。

Image title


有时候图片比较小,比如头像的时候,手机预览的时候不容易被看到,所以在自查的时候最好把设计稿放大放大看细节。


二、页面统一性


页面统一性指的是 APP 整体的统一性,输出的设计稿是否和之前统一,同时输出的几个页面是否统一等等,这个时候就需要跳出单个页面,来看整体了。最容易出错的问题分别是:两个页面同一位置的元素位置出现偏移、分割线颜色不一样、按钮的圆角度不统一等。


1.位置偏移


这个真的很多人都会栽在这个坑里,原因我猜是做设计图的时候,都是电脑连着手机实时预览,预览软件在翻页的时候,是直接出现新的页面,不是那种上一页下一页翻页的形式。所以当元素位置发生偏移的时候,纯靠手机预览很难发现。

Image title


至于解决方案也很简单,只需要自查的时候,把所有图按照顺序导出,全部选中进行预览,这个时候页面元素动了的话,在翻页过程中极其明显,发现有出错的地方,重新修改再导出,直至没有问题为止。


2.分割线


分割线也是一个极易容易出错的地方,特别是最开始做的时候没有定义分割线的颜色,随便用一个,后续觉得不好,又改了,改的又不彻底,有些地方没改到。加上分割线颜色普遍偏浅,不仔细看很难发现。

Image title


这个自查的时候,通过翻页预览,发现后也能修改,不过还有一个更好的办法,从源头改变。前期把分割线都做成 Symbols,统一用,后期自查的时候,只需要检查分割线是否用的是Symbols ,是的话颜色肯定是一样的。


3.按钮圆角度


检查不同页面的按钮圆角度是否一致,不一致的地方要统一,定好规范之后,后续所有的页面都需要延续。

Image title


小贴士:

当有人告诉你,你的页面有细节问题的时候,千万不要解释,这个时候乖乖认错就好,你越解释别人越会觉得心里不舒服,不解释可能没什么,一解释就有可能减分了。


三、总结


在设计稿输出交付前,设计师需要对自己的设计稿先自查一遍,避免出现低级错误。不然这些错误持续出现,每次都等别人发现,会影响你在团队中的形象。

自查主要分两个方面,一个是设计稿本身,需要注意页面元素对齐、图标风格大小和页面整体搭配、间距要能体现亲密性、文字对比要明显;二是页面整体的统一性,需要注意的是避免出现同一元素不同页面位置发生偏移、分割线颜色统一、按钮的圆角度统一等。



橙子的橙子

1586粉丝/33关注

为什么你的 APP 不耐看(下集)关于提示框的那些事儿

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN