关于 iOS 切图那档事:iOS 工程师和设计师们一定要知道

收藏:749

关于 iOS 切图那档事:iOS 工程师和设计师们一定要知道


可能也是个人习惯的关係(各种懒惰),在开发的过程中我都会尽可能的尝试「最大弹性」的作法,换句话说「只要能在程式里面上色,上阴影或者调整尺寸这种,大部分的状况我都会选择在程式里面进行修改」,毕竟保留弹性对于未来介面的优化、调整甚至使用者体验的改善上其实都是相当植得投资的。

接下来我们再来聊聊另外几点:

按钮

关于按钮的部分,有不少的内容其实已经在 icon 那边已经跟各位伙伴聊过啰,在这边要另外跟各位伙伴补充几点:

1. 原则 :在按钮切图这件事情上面,不论是考量到文字内容的调整,或是未来可能有 Localization 的需求,不管是 Android 或者 iOS ,基本上都应该尽可能避免按钮 icon+文字一併输出的情形。

2. 点击範围 :如果对于按钮点击範围有调整上面的需求,以下图为例,其实唯一要输出的就只有一颗 30×30 的 PDF icon,剩余调整点击区间,按钮大小等等的部分都应该由程式进行处理。

关于 iOS 切图那档事:iOS 工程师和设计师们一定要知道

标注上常常会漏掉的细节

这个部分可以讲的内容其实非常,非常,非常的多(笑),美一点背后踩过的都是满满的坑啊(汗),如果设计师在设计时能够注意到这些细节,偶尔站在工程师的立场进行设计,对于工程师来讲你就彷彿是个天使。

当然,如果你能够站出来否决你的 PM 或是老闆,对于工程师而言你就已经成为有如神一般的存在了(握),好啦,有机会再跟大家分享更多这类型的状况。(打个广告,在 Hahow 开设的 iOS 入门,从介面设计到开发的课程中也有介绍不少这类型相关的内容 喔)

除了前面针对 icon 与按钮的部分之外,今天我们就再来聊聊一个弹出式视窗可能会遇到的状况吧!以下图为例,下图是我在 Hahow 课程 中所绘製的画面:

关于 iOS 切图那档事:iOS 工程师和设计师们一定要知道

看到这样的画面,相信各位都可以很快速的把画面拆分成四个元件,包含广告图、标题、叙述以及按钮。在画完这样的介面后,设计师可能会很开心的把 Artboard 输出到 Zeplin 就以为故事到此为止,但…… 一个善解人意的设计师会做的事情,会作出类似下列的说明:

关于 iOS 切图那档事:iOS 工程师和设计师们一定要知道

看到满满的标注内容,简单来说这边的重点就是——不管今天设计的是 Web, iOS 还是 Android,尽可能提前告知工程师「画面中可能会产生变动的元件」,包含元件的数量,元件的高度等等,以及「内容发生变动时,画面应该要如何去处理这样的状况」。

这样的习惯除了有效地帮助工程师规划你的介面以外,也能够帮助你在设计的过程中学着提前考虑画面的状态变化,以及保留介面上面的各种弹性等等。一旦内容有变动,在标注不清楚或者让工程师自由发挥(偷懒)的状况下,很有可能会导致类似下图的情形(有点夸张啦 xD):

关于 iOS 切图那档事:iOS 工程师和设计师们一定要知道

有经验或是重视美感的工程师可能还好,一个在设计程式架构时通常就会考虑这样的状况保留一定的弹性,另外一个会碍于美感的关係毫无怨言地帮你调整,但是… 如果你遇到的是这两种工程师以外的哪一种,恭喜你中奖??,下次好好注意一下吧(笑)。

结语

哇,是不是断的有点突然!!!嗯…… 莫名其妙又写了一堆有的没的不知道对各位有没有帮助的内容,其实还有很多想跟各位分享、想抱怨的内容但是碍于篇幅(惰性)… 就让我保留到下一篇文章里面吧!

其实啊,程式可以做出非常多不同的视觉效果,但是牺牲的就是工程师的时间,你的阴德值以及产品的效能,如果在程式中绘製的过程过于複杂很有可能导致效能上面的下降(画面会卡卡之类的), 找出一个彼此合作的平衡点就是这篇文章的首要任务啊(笑)。