经验分享:如何让公司的平面设计师交出可以用的Web 图

2014/05/30 14337

经验分享:如何让公司的平面设计师交出可以用的Web 图

@Akane_Lee :在演讲的 QA 时间,有几位 F2E(前端工程师) 跑来问我这个问题,看来这是许多人心中的痛啊…甚至连图都不让设计师切了、直接自己来,却还是状况连连…如何让公司的平面设计师交出可以用的 web 图呢?

台湾设计师经验分享:
《找工作必备!教你一眼识穿招聘公司有木有坑》
《台湾设计师吐槽:我们的UI到底怎么了?》
《毕业季福利!过来人教你应如何准备个人作品集》

问了这几位 F2E 他们用什么软件切图,答案是 Illustrator ,听到的当下就觉得不妙。我非常不支持拿 Illustrator 做任何给屏幕用的档案,切图不便、对 PX 的支持度也很差,Illustrator 是印刷用软件。当公司只给你平面设计师、没有 UI 的时候,所有 Mockup 都出自平面设计手中,F2E 要如何自力救济?

网页版面结构

通常平面设计会交出不能实做的档案、绝大部份都是因为「他不懂」。但要等到他自己学会 Html、Css 的时候,八成也准备换工作了。等平面设计学会怎么做网页,不如自己先花个半小时教他网页的版面构成方式,通常平面搞懂原理后出怪图的机会就会降低。

找几个之前做过的案子、实际用列表机印出来成纸本,或是网络上找几个比较有规律性的网站都可以当教学模板,准备几支不同颜色的笔、就可以抓平面设计进来听课了。

举个例子:rainstep.co(网页我做的)

非常常见的版面构成,NavBar、大图 Banner、内文、联络人、Footer。

经验分享:如何让公司的平面设计师交出可以用的Web 图

第一版拿给平面设计师当范例的网站越简单越好,太难的他们听不懂,不要开口就是Div、Class、Tag、Header 之类。他们会把注意力放在「搞懂术语」上,F2E 真正想传达「我会这样切图」、「我会这样构成版面」就不太容易被听进去。请把专业用语放一边,设想「今天我要对我妈说明我的工作是怎么完成的」,你就不会用太多只有行内人才懂的用字,尽量浅显口语化。

(千万不要讲英文,会被设计师翻白眼。你的任务是教会他们看懂网页构成、不是让他们把你当成会点技术了不起的技术。)

拿出刚刚要你准备多种颜色的笔,开始画框框。

这 4 点是一定要分不同颜色讲清楚的部份,尤其是「Div」。

  • Div
  • 文字、标题、内文
  • 图片、背景底图、Banner
  • 对齐、float

经验分享:如何让公司的平面设计师交出可以用的Web 图

上图可以看到我约略拉的框图会长什么样,基本平面设计师看到这样子的图、你再仔细说明一遍大概都会懂。有鉴于我被老公的词不达意整过太多次,举几个「这样说应该都听得懂」的说话方式:

NavBar:「这块黑底我会拉成像这的一个框框,黑底置顶,左右两边也会自动延伸到底,可以在这个黑底框里放图片和文字。」

Banner:「如果你要把一张照片大图当成底图、底图上要压一张 Logo 图和一行标语,那要跟我说怎么对齐,比如置中。」

内文:「通常图片和文字对齐方式是跟着方框跑,可以在方框外或内加上留白间距,在方框里的图文可以设定靠左、靠中、或靠右对齐,也就只能设定这三种对齐方式。」

(Padding、Margin 这两种初学者容易混淆、不懂网页技术的平面设计师有些人也不会想知道这 2 个属性有什么差别,犯不着花大把力气说明,跟他们说方框里外都可以设定留白就好。)
(如果有遇到真心想学的设计师,这次教学结束后再找时间慢慢教,不要操之过急,平面设计师没有技术的思维方式,要留点时间培养转换心情。)

Grid

实在没时间或不方便教的话、网络上有很多跟Grid有关的教学,搜集几个「中文」教学请他们阅读并照做。平面设计师一定知道怎么拉参考线,不管是 AI 或是 PS,强烈要求他照 Grid 公式设计网页。

参考:《PS 参考线插件GUIDEGUIDE下载及使用说明》

经验分享:如何让公司的平面设计师交出可以用的Web 图

如果你家平面设计师教了还是听不懂、或根本不想学,那一定要事先声明他们出的图如果没有照 Grid 去做、就退件,起码图文影音是对齐的,不会东突一块西凹一块…

原文地址:blog.akanelee.me
作者:@Akane_Lee

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量69万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/make-designer-submit-right-web-mockup

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里