几天前,在开发同学的帮助下,做出了一个还算完整的小程序.小程序很简单,只有分数计算和数据展示两个模块.身为一个ui,在此之前对代码这种东西可谓是一窍不通.在这里,我主要是想从ui的角度,记录和分享一下这次开发后我自身的收获.

有人可能会说,我是一个ui,我不需要知道开发是如何写这个页面的,我只要出好我的设计稿的就好,但其实不是的.从表面上来看,可能开发写页面的方式,对页面的模块化划分和设计人员似乎没有多大的关系.但是如果设计人员知道开发是如何布局静态页面的,那么设计和开发之间的协同会变得更加高效.

图1

如上图(图1)所示,这是一个信息展示页面,对于设计同学来说这可能就是一个很普通的页面,相信大家都会画.但是画出来之后呢?当页面给到前端同学后,你知道要怎么表达才能让你的小伙伴更加快速清晰的知道,在不同尺寸的设备下是应该如何适配的，对你的页面有一个更高的还原度。

---

页面布局

首先,我们来讲一下前端同学是如何对这个页面进行整体排布的,在这里我们首先要清楚,前端同学写页面是根据从上到下的顺序写的.

前端同学写页面不像我们用sketch,ps这样的自由.他们的整个页面是由各种"标签"、"组件"嵌套而成的.在写页面前,我们大致会把页面分成几个模块,如图2所示.

图2

如果把整个页面比作是一个大的box,那么这几个模块就是放在大box里面的小box.红色色块所标注的每一个模块都是一个小box,他们同属于页面这个大box,并且他们之间的位置关系是相互依赖的,设定他们之间的间距关系,就可以决定他们在这个页面中的排布位置.

以此类推,小box里面可以包含更小的box

图3

如图3所示,在红色的这个大box里面,包含了好多个蓝色的box,在每个在蓝色的小box里面,又包含了3个更小的黑色的box.以此类推,每一个独立的文本/图片都是一个box.

整个页面是由众多个大大小小的box嵌套而成的.如果把一个页面比作是一个装满货物的大集装箱,那么里面的模块就是集装箱里面的一箱箱货物,可能是一箱水果,也可能是一箱杯子,而更小的元素则好比那箱杯子里面,每个杯子的小盒子.

假如你需要知道那个杯子具体在这个集装箱的哪个位置,那么你是不是只需要知道你这个箱杯子在集装箱的哪里,是前面还是后面,又或是中间.然后再确定你这个装杯子的盒子,处于你这个箱子的哪个位置呢?

那么,有些人可能会问,作为设计,我知道这个布局方式,在我和前端的协同过程中,有什么帮助呢?下面,我将分享几个,我自身在写页面时,遇到的问题.

---

1.文本最大长度

在画页面时,我们经常给予文本一个随意的字段,有时候会忘记标注这个文本的最大长度是多少.当文本溢出时,该做如何处理.

图4

如图4所示,当我们的设计稿上没有标注最长字段时,可能会导致前端同学在做模块划分时出现以上情况.如果前端同学做了图4下面一种box的划分,那么出现较长字段时,排布则会出现问题.这样在后期测试验收时发现这个问题,则需要花费额外的时间和精力去修改.

所以,我们在画视觉稿时,尽量使用最长文本,或者标注最长文本时,页面的排布会发生怎么样的变化.

---

2.行高

在编辑文本时,经常会遇到行高应当设为多少这个问题,当文本信息只有一行时,我们可能会觉得行高这个属性无关要紧.但是其实不然.行高的大小,决定了当你选中这段文本时,所显示区域的高度.

如图5所示,"88"是72px的字体大小,在此我们将它的行高设置成了100px,所以它的文本区域是88px*100px,下面的"如果标题过长的话就省略显示..."的字体大小为28px,在此我们将它的行高设置成了40px,所以它的文本区域是392px*40px.

前端同学在定位"如果标题过长的话就省略显示..."这段文本时,距上间距定的是这段文本距离上面的那个box的距离,也就是距离"88"的距离.那么问题来了,由于上下两段文本,我们在设置行高时都远远大于字体大小,导致两段文本的选中区域发生了重叠.这样,前端同学在定位时,只能人工去计算这段重叠区域的高度为多少px,并且将"如果标题过长的话就省略显示..."的居上距离设置为负的.

所以一般我们在设置文字行高时,将其设置为与字号大小相同,例如,14px大小的字,行间距同样设为14px高度.

---

以上就是我在本次小程序开发中学到的经验.

最为一个设计人员,我认为我们不仅要不断提升自己本身的设计能力,还要多培养自己和技术开发部门的协作能力,这样才能使我们的工作变得更为高效.