亚洲人成影院午夜网站_无码人妻精一区二区三区_人人妻人人爽人人澡人人_美女内射无套日韩免费播放

在实际工作(zuo)中，交(jiao)接工作(zuo)对于(yu)设计师而言也是(shi)(shi)很重(zhong)要(yao)的(de)(de)一环(huan)，更好的(de)(de)衔接可以明确设计需求、保证最终设计实现(xian)。本文(wen)总结一下完整的(de)(de)交(jiao)接流程(cheng)，当然(ran)，如果遇到前端大佬可以省略其中很多步骤，只要(yao)记(ji)住沟(gou)通永远是(shi)(shi)交(jiao)接工作(zuo)的(de)(de)第(di)一要(yao)素。

作为设计方接口人(ren)，我近(jin)期(qi)参与了某产品新版本的(de)交(jiao)互设计及开发(fa)跟进工作。

网页设计常(chang)规的交接流程是这样(yang)的：

但这(zhei)只适(shi)用(yong)于(yu)一般(ban)的(de)(de)常规网页(ye)，如今(jin)越(yue)来越(yue)多的(de)(de)网页(ye)需要同时(shi)适(shi)配(pei)多端设备，如果只按这(zhei)样的(de)(de)流(liu)程，一旦进行适(shi)配(pei)就容易(yi)出现(xian)各(ge)种错乱与问题。

因此，交接工作还需要更(geng)完整一些：

栅格示意图

栅(zha)格示意图(tu)可以(yi)是(shi)简单的(de)页面结构框架(jia)图(tu)也可以(yi)是(shi)在(zai)设(she)计图(tu)的(de)基础上进行栅(zha)格说明。

栅格示意图的(de)意义在于(yu)可以让开(kai)发了解总栅格数和具体某一(yi)块内(nei)容所(suo)占(zhan)据的(de)栅格数。这两(liang)个(ge)栅格数决定着整(zheng)个(ge)页面的(de)内(nei)容架构，也决定着在不同屏幕响应之后的(de)变化。

从前(qian)端(duan)实现来(lai)说，在(zai)(zai)不同(tong)(tong)的(de)分辨率下，页(ye)面的(de)宽(kuan)度(du)也不同(tong)(tong)，假设同(tong)(tong)样分为 12 栅(zha)格，每栅(zha)格宽(kuan)度(du)自(zi)然(ran)也就(jiu)不同(tong)(tong)，因(yin)此前(qian)端(duan)更在(zai)(zai)意的(de)是其实是栅(zha)格数。

如(ru)果有(you)几(ji)份(fen)不同尺寸的(de)设计图，最(zui)好也提供各自的(de)栅(zha)格示(shi)意图以供对比。

不同尺寸的设计稿

一般的网页，建议交接两个版本就足够：大屏显示器和移动端。

功能性复杂的网页，比如后台等，最好选择 3 个版本及以上：大屏显示器，中等显示器，小屏显示器。具体的参考分辨率分界点，在上一篇文章中有讨论过，这里再贴一遍。

如(ru)果自(zi)己还是无法(fa)判断，那么不妨征求一下前端的(de)意(yi)见。

切图标注

使用常规的标注切(qie)图方法就可以。借助(zhu)一些插件就可以很(hen)轻(qing)松(song)做到(dao)。

但是(shi)有一(yi)点，通(tong)常设计(ji)师标注会使用 px 单位(wei)，需要完全依赖(lai)前(qian)端(duan)自己去换算成 %、vw、vh、em 等各类前(qian)端(duan)单位(wei)。尤其是(shi)在(zai)换算百分比的时候更是(shi)一(yi)件(jian)令(ling)人头疼的事。

这个(ge)问题在蓝湖(hu)上被完美解决。不仅标(biao)(biao)注切(qie)图很轻松，开发还可以在按(an)住「Ctrl」的(de)情况下直接(jie)鼠标(biao)(biao)点击(ji)查看百分比，十分方便(bian)。

特殊效果的沟通

在页面设计(ji)中有(you)时候会加入一(yi)些(xie)交互动(dong)(dong)效设计(ji)。特别是(shi)一(yi)些(xie)需(xu)要(yao)开发(fa)使用代码(ma)实现(xian)的动(dong)(dong)效。

我更倾(qing)向(xiang)于在设计作(zuo)品构思前期就(jiu)与前端(duan)沟通一(yi)些我的(de)想(xiang)法(fa)。毕竟(jing)有时候(hou)想(xiang)法(fa)很美好，现实很残(can)酷。被开(kai)发打(da)回(hui)来也(ye)是一(yi)件很头疼(teng)的(de)事。

网页中常用的一(yi)些特殊(shu)展(zhan)示效果，比如：

鼠标的交互反馈

视(shi)觉(jue)差效果

滚(gun)动翻(fan)页效果

滚(gun)动(dong)延时(shi)触(chu)发动(dong)效

还(hai)有一些炫酷的(de)动效背景

另外有时候(hou)会(hui)(hui)有一些在(zai)特殊屏幕上的(de)应用特别的(de)响应方案，除了这些，还会(hui)(hui)有其他需要提(ti)前(qian)(qian)沟通的(de)内容，越复杂的(de)动效最(zui)好越早和(he)前(qian)(qian)端打好招呼(hu)，避(bi)免(mian)设计完成后却(que)被反(fan)馈无法实(shi)现(xian)。

界面设(she)计走(zou)查(cha)

这一(yi)步(bu)会(hui)自(zi)己进行走查(cha)的设(she)计师(shi)不多(duo)，一(yi)般都交给了(le)公(gong)司(si)的测试(shi)(shi)工程(cheng)师(shi)。但其实测试(shi)(shi)工程(cheng)师(shi)关(guan)注的更多(duo)还(hai)是功能(neng)和逻辑，至(zhi)于(yu)界面(mian)的一(yi)些(xie)细节并不一(yi)定(ding)在意(yi)。设(she)计师(shi)自(zi)己进行走查(cha)，是保证完美还(hai)原(yuan)很关(guan)键的一(yi)步(bu)。

方(fang)法一：使用测(ce)试机，在(zai)多种(zhong)设(she)备(bei)上进(jin)行测(ce)试

一般互联网都会有测(ce)试机，如(ru)果(guo)没(mei)有，动用你的「人脉」，和周边的同事朋友借一借吧(ba)。或者用方法二。

方(fang)法二：使用浏(liu)览器的(de)开发者(zhe)模式

向前(qian)端(duan)开发(fa)要来开发(fa)好的(de)前(qian)端(duan)页面，在打开的(de)文(wen)件夹里找到一个名为「index.html」的(de)文(wen)件，就能在浏览(lan)器中打开了。

接下来打(da)开「开发者模式」。图例(li)是在Chrome浏(liu)览器中。

会(hui)打开这样一(yi)(yi)个界(jie)面(mian)，在(zai)网页的(de)上(shang)方可以(yi)选择(ze)一(yi)(yi)些(xie)常规(gui)的(de)不同界(jie)面(mian)，也可以(yi)自己(ji)设(she)置大小。在(zai)一(yi)(yi)定程度上(shang)可以(yi)替代真实的(de)测(ce)试(shi)机(ji)。

懂一些(xie)前(qian)端知识(shi)还可以在右侧的代码中进行一些(xie)微调试。

界面(mian)细节走查

这一部分内容(rong)是在测试的时候进行的。

1. 重要内容(rong)可视

主要测试页面中的(de)重(zhong)要内容，在做响应的(de)时候，尤其是小屏设备上，内容不会(hui)被(bei)溢出(chu)可(ke)视界面边缘外。

2. UI 细节实现效果

可以与(yu)设(she)计图对比(bi)，记录下相关问题(ti)差异提(ti)交(jiao)给(ji)(ji)开发，保证(zheng)细节不会被遗失，设(she)计效果的完美(mei)实现。我一般会整理成文档再交(jiao)给(ji)(ji)开发。

懂一些前端代码会更方便，可以直接在开发(fa)者模(mo)式(shi)下进(jin)行(xing)调试(shi)，然(ran)后告知开发(fa)。

3. 页面加载速度

这是为了确(que)保(bao)加载(zai)等待期不会过长。

如果过(guo)长，可(ke)(ke)与开发探讨原(yuan)因(yin)并尝试解决(jue)，因(yin)为导致的原(yuan)因(yin)可(ke)(ke)能(neng)很多。如果是(shi)图(tu)片、动图(tu)、视(shi)频等(deng)体量(liang)过(guo)大，导致加载缓慢，可(ke)(ke)进行一下压缩再使用。

流程不是按(an)部(bu)就班，还是那(nei)句话：沟通(tong)永(yong)远(yuan)是交接工(gong)作的(de)第(di)一要素。

原文(wen)转载：//www.uisdc.com/6-step-web-design-handover