如何看懂UI效果图 - 蓝蓝设计_UI设计公司

如何看懂UI效果图

2018-5-28 Johnson 1949

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

溪石iOS是原创文章,非授权请勿转载,但是欢迎你评论转发呦,WOW!

“要把图标做到让我想用舌头去舔一下”

——乔布斯

用Markman标注后,开发时就能达到100%还原度吗?

客户(老板/领导)拿到软件的第一个意见,几乎都是关于UI的。有时得到的评价也挺简洁明了的,一个字“矬”。

于是惶惶不安的开发小弟经常想到的第一个解决方案:去问设计大神(美眉)要一幅详细的标注图。结果他得到这么一幅标注图:

如何看懂UI效果图

这样一个页面中,标注了间距、大小、颜色和字号,每个尺寸都是像素级,这么多信息扑面而来,开发小弟开始有些抓狂,但他立志要摆脱“矮矬穷”的诅咒,硬着头皮修改了每个组件(Label、ImageView...)的坐标像素值,发布后,领导拎着个6plus过来,依然是一个字:“矬”,开发小弟叫苦不迭:标注尺寸给的是iphone6 750px的,奈何领导最近刚换了6plus,水平像素变为1242px,原来标注的尺寸都无法使用了。

开发小弟该怎么办呢?再问设计大神要个6plus的标注图吗?考虑过开发Android的哥们的感受么?

用设计师的眼光看效果图

不妨问自己这么个问题:

客户(领导)关心过像素吗?他们能说出字间距多少像素吗?

显然,没人知道你的软件界面使用了多少像素,更何况现在Android或iOS《人机交互指南》里用的单位都是,具体屏幕上多少像素,由设备按实际屏幕尺寸运行时获得,所以几乎不可能按标注像素还原!

虽然像素不可用,但我们还是能做到让界面无限接近效果图,最终达到让用户想舔一舔的目标。

看懂效果图第一招:找对齐

如何看懂UI效果图

观察橙色虚线框,它不在原本的效果图中,我们可以用任何绘图工具,在效果图上绘制出,可以发现,总是能找到这样一个矩形框,使得界面上的元素都在这个框中,并且左右上下的元素都能紧贴它。

  • 如顶部的返回按钮Comments,属于顶部对齐

  • 左侧的用户头像之间及返回按钮,属于左对齐

不一而足,可以自己找找看哦。

另外,要注意,对齐是递归的。

这里的意思是,每个子元素,也是按要求各自对齐的:

如何看懂UI效果图


看懂效果图第二招:求比例

如何看懂UI效果图

图中标注了两个元素的像素(宽*高),正如前面所说,我们关心的,并不是它们的实际值,而是66 / 82 = 0.8 这个比例,这个比例不会变!也就是说,如果返回按钮(上面带箭头)的大小变成90px,下面头像的尺寸就应该是 90 x 0.8 = 72px。为什么这个比例如此重要?因为无论屏幕尺寸如何变化,导致返回按钮放大或缩小,头像永远不会比它大!加上前面的“对齐”原则,它们的相对位置、大小在不同屏幕上,“看起来”是不变的。

看懂效果图第三招:为重复做好准备

如何看懂UI效果图

这个看似简单的页面中,包含了5种重复:

  1. 电影名称,竖版排布,中英文的字体比例。

  2. 电影图片,重复使用了水粉画风格,并多次使用空白背景。

  3. 电影台词,虽然背景不尽相同,但均使用了一抹油漆的效果,引号时有出现,暗示某些句子来源于台词。

  4. 台词区域的纯色背景。

  5. 红色评分。

这些重复部分从具体图片、颜色来说,又不完全一致,体现出一种多样性的统一,因此不能把重复简单地理解为同一元素的简单重复

另外还有一些隐性的重复,比如电影图片选择,都使用了有代表性,但非官方宣传的场景、人物,体现出一种独特的品味;台词的选择也是如此,这里的重复是一种选择标准

开发人员理解了这些重复后,要在技术上做好准备,简单的如电影标题的颜色,要支持任意颜色,竖版的中英文混合是个小小的挑战;

而对于台词的那一抹背景(包括引号!),要准备好支持各种图片,并根据文字的长度放缩(想一想,背景如何支持文字的换行?);

最复杂的,可能还是这个红色的分数,因为是动态的,并要呈现小时候考试试卷上手写打分的效果(包括倾斜和红色下划线),需要0~9个数字的图片,根据实际分数,组合图片,注意,个位数字的尺寸比十位数字要小,旋转后与红色下划线拼接(当然也可拼接后在统一旋转,方案不同,对图片资源的要求也不同);如果要求更高,还需准备手写体的矢量字库等方案。

不知道大家注意到没有,以上的技术方案都是在理解了设计需求的前提下,才能有意识的提出和执行开发,而在工作场景中,开发人员拿到的可能只是这么一张效果图,这时需要我们开发人员主动的去挖掘设计师的意图。

看懂效果图第四招:注意留白

如何看懂UI效果图

留白是设计的一部分,是设计过的内容与不良设计的区别所在,

事实上留白是对元素的分组,表明了信息之间的关系。

如图中标示的a、b、c三处,其空白的比例必须按效果图保留,即b < a < c,这样,用户在这个界面上就不会困惑,一眼就能看出用户的昵称和对应的留言内容,不同的用户之间,由于c的存在,形成了明显的区分。如果开发时不注意区分,做成了a = b = c,不单整个设计被破坏,这个界面的功能性和清晰度也会大打折扣。

总结:

本文从对齐、比例、重复、留白四个设计师的视角,介绍了理解UI效果图的多个要点和实战经验,现在回头看看以前做的界面,可以指出“矬”在哪吗?欢迎留言、私信分享你的感想和经验,关注溪石iOS,第一时间获得开发的奇技淫巧。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


Powered by emlog 京ICP备12006971号-1 sitemap