版权归作者所有，转载请注明出处
浅谈设计稿与实际上线的区别
在些之前写过对大商创“主页面（首页、列表页、详情页）”、“会员中心”、“顶级页面”的设计心得。现在谈谈设计稿上线后的样子。
对于设计师来说，每一张设计稿都是心血的凝结，每一个间距都是计算后得出。我们会发美轮美奂，整齐工整的现设计稿，在上线后却总有惨不忍睹的情况。这里空白了！这里错位了！这里甚至是乱码！等等等
造成这些原因的因素有很多，比如内因，比如外因。
内因（设计师）：设计师是最初创造产品的人，要从用户体验的角度出发来设计。但是术业的专攻性上讲，设计师往往注重于视觉表现，容易犯一些美丽的错误。
1､设计稿是完美的，图片是单一性的，交互是多样性的。
设计师往往沉倾在自己的完美视觉设计稿中，而忽略了前端开发人员需要做的各种交互：常态与当前状态；多个超出、撑开、换行等溢出状态；等到开发需要的时候再去商量如何处理时，一是浪费时间，二是在设计全部完成之后再添加效果，往往是草草了事告终。
在一些小型的项目上，有经验的设计师们或许还能把控的住。而对于大商创这种全面的电商系统界面设计师来说真是大大的难度。这次遇到最多的交互设计是商品详情页，预估1天就能完成的页面延长至3天完成，好在没有什么问题。但是改动最大、考虑不全的就是购物车页面了，主要问题是：促销（满减）的商品如何展示？促销商品与非促销商品的如何区分？赠品如何表现？店铺这间如何区分？商品选中与非选中如何一目了然？
2､活字用了非系统字体
所谓活字，就是直接以文本状态下展示的字体，而非图片状态下的字体。我们一般会采用系统字体。中文：微软雅黑。英文：Aril。
3､需求不清不明
设计制作前产品的需求就应该是全部确认，所有的功能流程全部确定。不要等完成时才说，这个功能选不要，那个再加一个模块。想来只是估加减法，但当真正去掉之后，所有这些间距处理、上下是否和谐，又需要再捉猫（琢磨）一次。
4、不会切图，甚至对切图一无所知
设计师的稿子是一个像素一个像素排出来的，一个图层一个图层堆出来的。而前端还原稿是切出来的，咋切，一个框一个框。
所谓知己知彼，百战不殆。设计师不需要会切图，至少去了解一下原理。例如，开发在对一个功能模块进行开发时，为了避免资源重复、内容雍肿，往往会采用同一套资源。那么问题就来了，设计能画出多少个不同样的鸡蛋来？
5､规范说明没有、备注/标注不到位
在交互原型中，鼠标点击事件是经常发生的，包括页面之间的跳转，动态面板之间的切换等等，这些都是统一的样式，可在规范文档中加以说明。前端开发需往拿到的设计稿是：PSD稿、交互稿、标注稿。PSD稿中要注意命名、编组。交互稿中要注意页面的跳转顺序。标注稿要标明字体、用色、控件大小、间距等。备注方式很多，可择一最适合的进行备注。
大商创的项目前期标注备注都很完善，后期的内容因为有了规范性的制约减少了这个步骤。
外因（前端开发）：参考网友简要说明
不考虑溢出、不考虑增删元素
不分析设计稿就动手写代码
不考虑可维护性、不考虑扩展性
看出 1px 没那么难（对不齐）
总结
设计稿设计的漂亮只能说明你一个合格的设计师，如何为用户打造一款量身定制的产品是我们作为设计师需要苦心钻研的
大商创2.0全新演示站地址：https://test.dscmall.cn/
