加成项目效果的UI+前端协作方式

用户头像
大连/UI设计师/3年前/488浏览
加成项目效果的UI+前端协作方式
用户头像
顾帆

讨论UI设计效果如何更好的落地实现?在UI设计之外的前端领域能如何加成项目视觉效果?

提要:UI设计与前端开发既是一个项目流程的上下游,也是项目中的作为整体的视觉呈现部分。UI设计效果如何更好的落地实现?在UI设计之外前端领域能如何加成项目视觉效果?接下来是在项目各个阶段的一些相关思考。

项目初期

在项目立项初期,产品评审、设计稿评审期间:

1. 了解前端开发使用的框架。

如果是B端产品,项目时间紧急或对样式创新要求相对不高的时候组件样式尽量基于框架调整,便于前端开发理解、实现。

此外框架中已有的各类交互样式,可以从中选择与项目风格匹配的,作为静态视觉的补充,有效加强用户体验。

2.设计师设计一些前沿效果时在前期与开发及时沟通,给开发同学调研时间。

3.开发同学可能有添彩的方案。有些代码技术性强的效果,UI设计师领域可能接触较少,前端同学在这方面的经验也将对项目整体交互体验的丰富性,趣味性带来提升。

项目中期:交付开发阶段

1. 设计图+设计规范交付。

设计交付开发时仅提供设计稿,开发同学难免进入只见绿叶不见泰山的处境。在交付时搭配一份设计规范,根据项目体量、后期维护、团队配置情况规范或简要或详细。提炼出版区、最小栅格单位、通用投影样式、颜色方案、文字方案等。帮助开发快速了解设计思路,更高效准确的实现设计效果。

2. 切图图层合并好,命名规范,禁忌。

设计过程中页面命名与产品原型、功能列表等前期文档对应。注意切图图层命名遵循常用命名规范,使用“_”作为空格链接符等开发友好事项。上传协作平台前将切图涉及的多图层设计的复杂样式做好合并整理。

3. 特殊效果标注

对设计图中出现的复杂样式在交付前以会议或文字标注形式对开发做出特殊说明,避免开发遗漏重要效果,或反复调整损耗时间。

项目后期:走查验收阶段

1. 定期跟进

在设计稿交付后与开发同学保持沟通,帮助前端开发理解设计稿思路,及时调整误区。有助于代码逻辑简洁高效,也能避免走查时处理大量同质问题。

2. 走查工具

使用设计图与实现效果对比工具,快捷发现页面差异,开发同学也可以方便的进行自查。

传送门:https://compareto.dev/

3. 复盘

开发完成,验收结束不代表项目的结束。和开发同学进行一次复盘会吧,大家可能会发现一些新的思路来优化双方的工作和项目总体效果。像项目迭代一样,迭代工作方式,追求更优。

1
举报
|
9
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】游戏/娱乐icon
UI 登录界面设计模板包
新拟态风格 UI设计组件库
户外旅行飞机情侣假日出行
【新年UI图标】30个图标
APP/小程序商业项目UI模板|99个高保真UI+79个原型
钱包ui模板
拟物风质感写实UI卡片合集源文件
我的钱包-UI界面设计-app
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】珠宝icon
【新年UI图标】影音icon
UI应用平面图标
【新年UI图标】钱包icon
【新年UI图标】秒杀icon
智能家居中心 简约 UI设计组件库
高级感金属拟物 UI设计组件库
Security Camera UI kit
UI界面 组件
3D卡通UI界面图标可爱插画免扣素
UI通用设计素材1
盲盒APP UI设计
高级表盘系列UI源文件
手表表盘UI系列
新能源APP应用UIKit
你可能喜欢
相关收藏夹
大家都在看
登录注册