百度视觉设计师 周末摄影师 插画师 约拍或合作weixin: Marin-xl

 

BD公司试用期工作总结(2015.07.01-2015.12.31)【02】

接上篇《BD公司试用期工作总结(2015.07.01-2015.12.31)【01】》

回顾前文可知,由于试用期间接口的几个项目设计比较重要和复杂,没法全部放在一篇文章中呈现,所以,本文将单独总结在BD试用期间做的第二个项目:移动搜索界面设计。


产品项目二:BD移动搜索界面设计

这个项目是我从2015.7.22开始接触做的,目前为止做了整一年,从最初的阿拉丁卡片到唯一答案卡片再到现在的哥伦布SIGMA,从简单到复杂,从单薄到丰满,从混乱到规范,逐渐做得越来越成熟。

工作成果当然也是按 阿拉丁 / 唯一答案 / 哥伦布SIGMA 的类别来划分,总共分为三部分。


阿拉丁卡片设计工作内容:

               1)设计阿拉丁模板:前期做的卡片query涉及实时票房、一个陌生女人的来信、医学团队什么时候更新、万达广场、淘宝兼职、大众新速腾、盗墓笔记漫画、宫外孕、汽车口碑、抢票日历、爸爸去哪儿弹幕评论、豆瓣影评、购物比价、知识点考点分析、游戏数据库查询;后期卡片query涉及:度假、景点、景点门票、酒店、"查看更多"样式实验;

               2)制作PSD组件:把图层编组,右键"转为智能对象",保存为PSD文件;然后点击"文件" - "置入嵌入的智能对象",选中制作好的PSD组件,双击图层缩略图,进入可编辑状态,如有修改,原文件也会随之修改。做组件的目的是提高设计效率,相同结构的文件不必再重复设计,可以提取组件直接修改; 


设计经验总结:

               1)设计流程:明确需求(设计阿拉丁query模板) - 准备工作(熟悉已有设计稿,仔细查看搜索规范0718版本) - 解剖PSD源文件(参考明星影视作品卡片新增_李易峰_L2C.psd);

               2)界面对比工具:用Chrome访问以下网址:wt.b**d*.com(公司内网),可以对比竞品目前的设计样式;把开发环境链接输入Chrome地址栏,在显示界面中点击"审查元素",进入代码界面,可以设置平台型号(以iPhone6+为准),进入手机模式查看真实视觉效果,同时可以选中单独元素,查看代码与视觉标注是否一致;

               3)设计技能get:把图层转化为智能对象,成为一个可编辑图层,双击缩略图后点击弹窗中的"确定",在跳转的单独文件中编辑元素后保存,则原文件也被同步修改;

               4)阶段性的设计产出要放在共享盘备份;

               5)设计完稿交付PM之后,要跟踪数据,通过分析数据表现,看设计对产品的正负面作用体现在哪里;

               6)由于总监审核视觉稿用的是iPhone6+,需要真实效果图,所以建画布都是1242*2208px;移动wise搜素规范中的示意图都是以3倍分辨率为基准设定的,1X/2X/3X之间的关系为:iPhone4*2=iPhone6;iPhone6*1.5=iPhone6+;iPhone6+=3*iPhone4;针对移动搜索wise项目所设计的卡片,图片是自适应不同屏幕尺寸,按栅格规范等比放大或缩小,标注视觉稿时,图片只要标注"3N"或者"4N",而无需标注具体像素长宽;

               7)视觉稿标注好要PNG+PSD一起给FE开发,如果有视觉设计规范,最好也一起给FE同学;以上文件都没给到的话,只要有PSD,一般开发也是会自己吸取元素参数的;

               8)视觉设计稿应另存为web png,直接存png的文件会过大,不方便操作;设计元素编组后,可右键转为只能对象,之后在拖动元素时,是整体拖动(而不是一个一个元素去选取后再一起拖动)并且双击可以进入智能对象模式编辑;成为智能对象后,若不希望在修改智能对象01时,02也跟着变化的话,则可在右键复制01时,选择"通过拷贝新建智能对象",则2个智能对象是相互独立的,可分别编辑;



评论