当前位置:主页 > 视觉

实用干货!视觉设计师如何让设计效果高还原度(2)

发布时间:2017-06-14 12:24    文章点击率:

根据项目经验是,在视觉迭代中期时,先输出基础控件元素规范,包括(颜色/文字/图标/蒙板/投影/按钮/输入框/或个别控件)约占控件规范30%,与开发进行第一次规范评审,确定规范输出的正确性与专业性。

让开发选取所有视觉页面中需要标注的UI控件,因为开发选择的UI控件也为通用样式,开发代码写成UI控件库(可以对应视觉的控件列表)并由其它分模块统一调用;且所有UI控件必须基于最终视觉效果进行控件抽取与迭代输出。最后,layout用文档(pdf)的方式总结,避免单独模块单独页面传递,更能将规则一目了然;规范是一个庞大而繁琐,极需耐心的工作;过程中注重每一个细节的精准与合理性。

zc20160419 (2)

3. 切图与整理

切出所有视觉页面中涉及到的图标与辅助图形;图标大小如:24px/ 32px/48px/72px/128px等,根据图标具体场景中的大小、颜色、状态来切。换句话说,每一个图标都有它对应的具体场景,特定的尺寸、颜色和状态;记得曾与开发gg对规范与切图的时候,他说:页面的图标切图,需要的是一个具体的拿来就用的,我们不会去画一个图标或去特定写一个图标的颜色。

4. 标注

视觉页面的标注基于UI控件规范的基础上进行,抛弃以往每个页面细无巨细的具体尺寸/色值/大小的标注。其实每一个视觉页面皆由不同的UI控件组成,在页面中将对应控件用UI控件规范中的编号来标注,开发gg拿着视觉页面标注去敲写代码时,再在UI控件规范文档中寻找相对应的控件规范细节;这样,视觉设计师避免在视觉页面中做那密密麻麻的尺寸标注,而开发gg拿到标注清爽的视觉页面也不会产生视觉疲劳。

5. 规范宣讲

以上4步完成后项目开发启动前,用视觉规范对开发做统一的宣讲,避免遗漏造成规则传达不一致;这样,还设计原度还是问题么?(后续会有一篇文章专门分享如何做设计规范与标注。)

四、与开发近距离接触,面对面解决问题

最后一个方法是与开发来个亲密接触,即如果有条件允许的话,请与开发坐一起;遇到问题及时面对面澄清、拉通指导、达成共识、修改、敲定、解决。

1. 设计规范做得再完善,开发问题依然存在

试想一下,如果不和开发坐在一起,即使开发面对再完善的设计规范,基于开发本身对设计美感的欠缺,开发过程多多少少都会产生理解偏差。开发过程每遇到一个细节问题,开发gg都得拉着视觉问:这个按钮上的左右箭头是无限循环吗?图标缺少了一个状态,那个状态是什么等;发个信息问拉会或者电话讨论,有时候还解释不清楚,效率低且事倍功半。

2. 视觉设计师直接进组到开发团队中

结合当前项目的做法是视觉设计师直接进驻到开发团队中,与开发团队坐在一起,举个例子此项目视觉在深圳,开发在异省南京或是异国,视觉也出差飞过去长期进驻,遇到问题面对面商议解决;大大提高了开发的进度与也节约了时间,视觉还原度还是问题么?当然,如果设计与开发本来就附近办公,则不需无休止的出差,项目成本节省不少。

设计过程还是和开发gg们来一个“亲密接触”吧,永远不要把开发拒之门外;觉得交互与视觉完成后则就万事大吉。设计讲究的不仅是设计美感还有严谨的态度合理的逻辑,要想一个产品始终保持是那个细节精致,创意精彩,且用户体验好;需要的是交互-视觉-开发三者之间是无缝合作,各个环节的周全考虑。

作者 candice_huang

用户体验设计师

2016年4月19日

「技多不压身的设计师才有高薪资!」

平面设计:《超赞!设计师完全自学指南》

交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》

UI设计:《超实用新手指南!零基础如何自学UI设计?》

前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》

抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》

配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》

DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》

交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

作者:@candice_7777

yestone-uisdc-2

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


快报

江西靖安荣膺“2017华东最美赏花地”称号
江西靖安荣膺“2017华东最
在颁奖现场,华东旅游媒...

品瓷论艺

舞动国学迎“六一”
舞动国学迎“六一”
5月26日,湖南省郴州市嘉...

友情链接/网站合作咨询: