实用干货!如何让设计效果高还原度落地？.pdf

实用干货 ！如何让设计效果高还原度落地 ？ 一个产品完整的设计流程中 ，交 与视觉定稿后 ，后续视觉规范的输出、UI控件的整理与 标注、开发的高还原度 ，都会影响产品最终的用户体验。作为视觉设计师 ，在视觉设计的最 后阶段则是繁琐且像素级别的精雕细琢 ，设计讲究的不仅是美感还有严谨态度与逻辑。 最近半年在大司 （华为 ）参与一个重点项目 ，且将会上线到全球各个局点 （本司专称 ，指某个国家 ）中 ，涉及多端多屏协同问题。临时组成的设计作战团队 ， 人员投入少、时间紧迫、任务量大高强 度的状态下摸索前行。为时五个月过去了 ，项目推进良好Pho ne端ios与A ndro id也到测试阶段 ，“大 视频”端 的开发工作也即将开始。五个月的时间 ，与优秀的同事一起协力合作 ，参与Pho ne端“大 视频”端的视觉与多端规范输出。这里分享一下这几个月的累积与沉淀 －－视觉设计师, 如何让设计 效果保持高还原度的开发落地 ？给用户呈现一个设计精致与体验良好的产品 ？ 在一个产品完整的设计流程中 ，交 与视觉定稿后 ，后续视觉规范的输出、UI控件的整理与标注、 开发的高还原度 ，都会影响产品最终的用户体验。作为视觉设计师 ，在视觉设计的最后阶段则是繁 琐且像素级别的精雕细琢 ，开发出来的精美页面需要视觉设计师做到以下几点。 一、视觉与交 之间应衔接无缝 ，即时刷新视觉页面 一般产品设计流程包括不同的阶段 ，不同的阶段其涉及的范畴内容不一样 ，作为设计师面对所有步 骤不能一蹴而就 ，而是按部就班 ，计划行事。 1. 前期准备阶段 ：确定设计需求的目标 ，竞品分析 ，用户研究 ，市场评估等 ； 2. 设计需求分析阶段 ：设计需求的理清 ，业务逻辑的推敲 ，产品的架构的搭建 ； 3. 设计执行阶段 ：交 设计原型的输出 ，视觉设计风格与方案确定 ，开发落实与测试上线 ，这构成 一个不断迭代刷新的流程 ； 在以上阶段中 ，业务需求的变更与澄清 ，交 的迭代 ，视觉的刷新 ，是设计过程中最繁琐的阶段。 设计启动前了解多端的适配情况 （分辨率/屏幕精度 ），综 合考虑优先出什么分辨率 ；接着视觉设计 师需面对庞大的页面工作量 ，且常会遇到与交 原型不一致的问题 ，需及时反馈并拉通讨论。这就 需遵循一个清晰可见的迭 代流程 ，对视觉设计而言 ，需求的变更与澄清 －交 的迭代 －视觉的刷新 －设计的迭代构成的是一个闭环无缝的路线 ，只有这样才能为开发的启动 ，打下扎实的根 基。 当然作为视觉设计师 ，设计过程中主动出A BC…方案而不是只拿出一个唯一的方案 ，只有将想法用 画面来表达 ，才是够合格的设计师 ，特别是视觉设计师 ，好处可以锻炼自己的设计表达力 ，方便评 审定稿 ，避免反复修改被人牵着走。 二、适当时 ，为开发开启更多的话语权 ，避免更多的无用功 视觉规范、视觉标注、视觉控件库的整理与输出目的只有一个 ：那就是指导开发 ，让设计100％还 远落地 ；回到项目中 ，对于设计团队与开发团队通常会体现以下两种情况出现 ： 开发团队对项目有丰富经验 ，设计团队对此项目经验少 －开发话语权大于视觉 设计团队拥有多次项目经验 ，并有一定的设计沉淀累积 －设计话语权大于开发 从视觉设计而言 ，如果是设计团队拥有丰富的经验这是最好的 ，用经验累积设计沉淀与创造性指导 项目 ，话语权大 ，反之亦然。 在这里结合最近参与的项目 ，情况为第一种来进行思考 ；交 视觉设计过程与规范输出中 ，让开发 提供更多正确的方向引导 ，借鉴开发团队以往的宝贵经验 ， 如 ：设计文档的共享与即时性、设计规 范的专业性 ，开发认同的设计规范去指导开发、设计相关问题单的及时跟踪与解决、设计需求变更 流程 （变更流程包括 ：变更 需求提出人 －交 －视觉 －开发 －产品经理 （SE o r PM ）敲定 －执行 变更 －关闭问题单 －变更完成 ）等 ，都能有效指导开发 ，提高产品开发落地的高还原性。 三、用80%场景的视觉设计 ＋视觉控件规范 ＋切图＋标注 ＋宣讲来指导开发 1. 视觉设计的场景 由交 提供具体场景的典型页面 ，视觉稿进行输出 ，多次迭代评审敲定后 ，再由开发提出缺失场景 的视觉设计 ，视觉进行场景补充 ； 2. 视觉UI控件规范的输出 必须是经过多次评审与迭代的最终视觉稿 ；但通常情况下 ，为了赶进度视觉设计与规范是同步进行 ，这导致规范反复修改的问题。 根据项目经验是 ，在视觉迭代中期时 ，先输出基础控件元素规范 ，包括 （颜色 ／文字 ／图标 ／蒙 板 ／投影 ／按钮 ／输入框 ／或个别控件 ）约占控件规范30％ ，与