一、什么是设计还原 互联网中的设计还原是说开发后实际界面和设计稿效果有偏差,进行设计校对。不同的项目类型还原度也不同:C端产品>B端产品>后台。对于C端产品最好是能做到像素级还原。
二、为什么要做设计还原 视觉还原的高低与否,不仅仅影响上线产品的用户体验,还影响着作为产品设计最后一环的工作质量。
三、怎么做设计还原
1、设计还原的前提 了 解开发依据哪些规则还原设计稿,前期的准备工作是重中之重,设定好每一个细节规则,后期落地 还原时才会将页面的失真率降到最低。
1)视觉规范
设计规范是设计还原一个关键步骤。一个好的规范应该是高效的、简单易懂的。设计规范通常可以把颜色、字体、控件、组件等内容制定成规范,不仅保证视觉的一致性,也方便样式与组件进行复用,方便后期维护和开发。在规范的辅助下,开发在搭建全局共用控件时,规则更加清晰明了,如按钮、行距、字号、色值等等。切忌自由发挥,把界面UI设计当作画布任意挥洒,完全不考虑实现的难度。
设计规范,包括色彩规范(品牌主色、文本色、背景色、线框色等)、字体规范(标准字的大小、字体等)、图标规范(应用图标、功能图标等)、图片规范(尺寸、用途等)、控件规范(按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、分页等)、缺省页等。后面会记录一篇专门关于规范的文章。
2)组件规范
通俗的解释说法就是组件为多个元素组合而成,而控件为单一元素组合而成。
常用的 UI 组件(Component):表格、对话框、提示条、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。
如果UI忽略规范,前端在不知道有可复用组件的情况下,很可能每一次都要手动书写代码。写的代码越多,遗漏掉细节和犯错的可能性越大,导致效率降低。最关键的是,对于今后的迭代,前端又得一个页面一个页面修改。所以拥有一套组件,方便省时且省力。
当团队搭建完成组件化之后,接下来就是成员间的使用,这一过程 有业务需求产生组件模板、 组件模版形成页面、