Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >那些年,UI设计师还在手工标注和切图时走的弯路

那些年,UI设计师还在手工标注和切图时走的弯路

作者头像
奔跑的小鹿
发布于 2019-01-24 07:41:56
发布于 2019-01-24 07:41:56
8910
举报
文章被收录于专栏:无原型不设计无原型不设计

在我从事UI设计师这几年的工作中逐渐发现,最让人糟心的不是应付各种奇葩的需求,完成设计稿,而是交付。每次交付的设计稿和最后开发出来的产品总是让我心塞无比,很少最终产品和我的设计稿是完全一致的。

UI设计师对接产品经理是个问题,UI设计师对接前端工程师是个问题。

UI设计师处于整个产品开发链条中最为重要也是最为尴尬的一环,产品界面设计完全出自设计师,但是却不是由设计师来最终实现。

根据我的经验,其实大部分问题都出在了沟通上,开发工程师没有完全理解设计稿,他们完全依赖我们的标注和切图来进行开发,设计师的切图和标注,是否规范和精确,直接影响视觉效果的还原度。往往设计做的越精致创意,交付过程就越煎熬。

然而,最后界面长的不好看,老板不会怪程序猿,是会怪你的。

标注难

“这里的间距是多少啊,没有标我怎么写?”

“这里的字体需不需要加粗?”

“这个字需要多大的字号?”

“这个是Android的尺寸?iOS的呢?我要自己算啊?”

“这里的icon为什么不没有高度和宽度呢”

...........

我想大多数的设计师和我一样,时常因为漏标元素被开发追问这些问题。开发能不能完美的的还原设计稿,很大一部分取决于我们设计师的标注,但是哪些该标,哪些不用标,我们设计师往往不好把握,尤其是新手设计师。我们往往就尽量标得详细一些,手动标注占领了我们日常大部分的时间,还不能有效的完成交付,经常加班,有时还会有开发人员来问或者直接不问就自己做主随便做的情况。手动标注加大了沟通和时间的成本,让人精疲力尽。

切图难

难点1:作为UI设计师,在日常工作中一个非常重要的设计输出物,就是切图。只要是无法用代码不好实现和表达出来的,就需要切图。规范的切图,会直接影响到开发工程师对设计效果的展示。光一个苹果应用中的图标就需要3种不同的大小,安卓的要求更是五花八门,最后还得打包交给开发,太多无用和低效的琐事浪费了大量的时间。

难点2:切图的命名格式在不同的公司都不尽相同,需要UI设计师和对接的开发工程师进行沟通,或者是团队内部进行沟通规范,才能达到良好的切图命名规范,大大降低了工作效率。

设计协作更难

设计师和程序员作为专业性很强的工作者,他们之间需要沟通和协作的工作内容太多,但往往两者不能很好的互相理解对方的工作,设计师不懂代码,程序员不懂设计,这给产品交付带来了巨大的困难,但是设计又是一个与其他部门有着很多沟通需求的工作,在协作上设计一直有着很多痛点。虽然现在市面上有许多协作应用,但始终缺少一款能让设计师得心应手,解决他们实际痛点的协作设计工具。

摹客iDoc是由Mockplus团队开发的协作设计工具,是一款更快更简单的智能标注和切图工具,完美地解决了标注难,切图难,设计协作难的问题。

特色功能:

  • 智能标注,让设计师解放双手,再也不需要手动做;可以完整而清晰地将PS、Sketch设计图中每个元素的尺寸、位置、颜色、间距、字号等样式信息自动同步到摹客iDoc,开发师可以随时查看。
  • 还支持百分比标注;不仅可以选择单个图层,还可以连续选择多个图层,并智能标注需要的度量。设计师再也不用手动标注了,开发人员需要什么信息自己就能查看,开发人员也省心了。
  • 全貌面板展示流程,设计稿可以随意拖动,还可以自由设置逻辑线,让设计图管理更轻松,更清晰。
  • 支持图钉批注,还支持圆形、矩形、直线、箭头等多样批注
  • 可以弹出放大镜,查看微小距离的标注

其他亮点功能:

  • 设计规范自动采样生成,还可分类管理、同步应用、一键导出设计风格指南
  • 自动获取切图,可下载多个或全部切图
  • 一键查看页面中的重复元素
  • 样式代码自动导出
  • 支持多种附件文档支持,支持任何类型文件的上传共享,并支持多种产品文档的直接在线预览,包括Axure、Justinmind、Mockplus的原型演示、office文档预览、图片文件预览、pdf和文本文件预览。

摹客iDoc让团队协作更高效,产品交付更轻松

摹客iDoc的诞生不是偶然,是必然。中国的设计师们需要这样的一款产品来解放他们的繁杂的日常,让他们更加专注于设计,而非拘泥于如何完美的呈现交付稿。从产品、设计到开发只需要一个文档,告别混乱的文档和各种说明,让团队协作更加高效。如果你也是一名设计师,那么不凡试试这款产品吧。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018年10月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
设计师都爱用的UI标注软件有哪些?
UI标注软件现在是设计师(UI、PM、前端等)必备的一款软件。设计稿是UI设计师日常工作中的产出物之一,当然,做出了高保真设计稿并不意味着你的工作结束了,因为你还得与下游的开发工程师进行对接。
奔跑的小鹿
2019/01/24
3.4K0
设计师都爱用的UI标注软件有哪些?
Figma 怎么切图?新手入门教程详解
Figma 是一个基于浏览器的协作的UI设计工具,其以轻量、便捷、跨平台使用、协同便捷的特点,迅速吸引了广大UI/UX 设计师们的喜欢。但是设计师经常遇到反复切图、交付开发等问题,所以借此机会分享一篇关于 Figma 切图的必要知识点和交付经验。
奔跑的小鹿
2023/11/06
1.9K0
Figma 怎么切图?新手入门教程详解
专访UI中国认证设计师卤大湿 | 一位UI大师关于UI设计的思考
现如今,设计师可以说是一个自带光环的Title,很多深藏不漏的UI设计师们都在以自己的方式为产品设计做出贡献,卤大湿便是这其中之一。
奔跑的小鹿
2019/01/24
5860
专访UI中国认证设计师卤大湿 | 一位UI大师关于UI设计的思考
UI设计初学者必看,这款设计神器教你快速入门
网络时代,网页和手机App已经深入到人们生活的方方面面。这也使得App界面设计越来越受青年求职者们的青睐,并纷纷投入这个行业。但是,作为UI设计初学者,究竟如何才能快速的入门?当今市场上,是否有那么一款高效实用的设计工具,帮助他们快速入门,提高工作效率的同时,迅速提升专业技能和求职竞争力呢?
奔跑的小鹿
2019/01/24
6910
UI设计初学者必看,这款设计神器教你快速入门
UI设计师必备的五款界面设计工具
在前几篇文章中,我们分享了一些最受欢迎的原型设计工具,今天我们来谈谈界面设计工具。工具的重要性对于设计师来讲不言而喻。任何想法都需要借助工具来实现。想要成为一名出色的UI设计师,你需要多掌握一些技能,才能增强自身竞争力。同时也给那些想转行做UI设计师的朋友一些工具建议,接下来我们就来盘点一下那些UI设计师需要掌握的界面设计工具。
奔跑的小鹿
2018/08/07
3.8K0
UI设计师必备的五款界面设计工具
摹客iDoc 新功能“柔性工作流”,让设计随需而动
普通工作流往往是将很多东西混杂在一起,并施以一种固定的线程去实现某种业务目标。特点是注重体系规范,业务按照固定模式流转。
用户5009027
2019/06/02
5150
【技巧分享】设计师如何向开发人员顺利交付作品?
对于大多数设计师来说,在工作中如何与开发人员进行团队合作一直是最困难的任务之一。接下来,将和大家分享一些实战技巧,助你顺利交付作品。
奔跑的小鹿
2019/03/04
8020
【技巧分享】设计师如何向开发人员顺利交付作品?
2019,UI设计师必备神器
2019年将会是你全新起航的一年,相信你已经制定了很多规划,正在开启第一步的推动。
极乐君
2019/04/19
7640
2019,UI设计师必备神器
摹客iDoc标注:自动标注一键生成,手动标注自由补充
手动标注到自动标注,在设计界是有一个演化的过程的。以前呢,设计师都是老老实实地手动做标注,密密麻麻,细细碎碎......自动标注的出现,可以说是把设计师从不堪重负的状态下解放了出来。
奔跑的小鹿
2019/06/14
1.2K0
摹客iDoc标注:自动标注一键生成,手动标注自由补充
Sketch 和 PS中的设计图如何实现“自动切图”?
切图是很多UI设计师的一项日常工作。平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利于交互,形成良好的视觉感。
奔跑的小鹿
2019/01/24
2K0
Sketch 和 PS中的设计图如何实现“自动切图”?
2020年UI设计师必备工具清单
UI设计师一直是IT行业最热门职位之一,因其薪资待遇较高,学习门槛较低而广受欢迎。在百度指数搜索“UI设计”来看,从2012年开始,UI设计的搜索呈明显上升趋势,尤其是在2016年左右出现“井喷式”增长。
奔跑的小鹿
2020/03/20
1.8K0
2020年UI设计师必备工具清单
2018年产品设计协作领域最强黑马居然是它?
我发了一条朋友圈“感谢池子的秘密法宝,我今天终于吃上了女朋友做的晚饭了”并配上香香的绿豆汤,瞬间获得好几十条评论。
奔跑的小鹿
2019/01/24
4730
2018年产品设计协作领域最强黑马居然是它?
推荐一款我压箱底的效率工具
在代码语言的庞大体系中,有很多不错的小工具,也就是我们常说的“轮子”。 在日常的开发工作中,如果能够巧妙地利用轮子,可以极大地提升我们的开发效率。 因此,今天想和大家推荐一款我压箱底的免费效率工具,希望可以为各位带来帮助: 摹客,免费效率神器,效率提升300%!(文末附企业会员激活码) 1.切图下载自给自足 摹客支持Sketch、PS、Adobe XD、Figma等当下所有主流设计工具的自动切图。 对前端而言,当设计师将设计稿上传至摹客后,我们就可以根据不同需求,自主切换平台(iOS/Android/We
范蠡
2022/08/26
4860
推荐一款我压箱底的效率工具
2019,UI设计师及程序员必备神器
2019年将会是你全新起航的一年,相信你已经制定了很多规划,正在开启第一步的推动。
奔跑的小鹿
2019/01/24
9930
2019,UI设计师及程序员必备神器
设计师一定喜欢这样的标注切图工具
对于设计师来说,标注和切图是工作中非常重要的一部分。最早的标注切图都是由设计师手动进行,不仅浪费时间精力,还极容易遗漏出错。随着设计流程不断被简化,越来越多的标注切图工具应运而生。
奔跑的小鹿
2020/07/22
1K0
设计师一定喜欢这样的标注切图工具
产品,设计和开发,高效协同只差一份文档
世界上只有两种物质:高效率和低效率;世界上只有两种人:高效率的人和低效率的人。——萧伯纳
奔跑的小鹿
2019/01/24
1.1K0
产品,设计和开发,高效协同只差一份文档
据说,攻城狮也可以像设计狮一样切图了?
为了方便新入坑的UI设计狮和前端开发攻城狮能更顺畅的看完这篇文章,首先,先来简单科普一下到底什么是切图(老油条可直接忽略)?
奔跑的小鹿
2019/01/24
5360
据说,攻城狮也可以像设计狮一样切图了?
安卓的切图规范
很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的。IOS我这边暂不作讲解,因为我本人也不是开发IOS。这里整理一下我在Android开发中总结的一些有利于本人开发的一些资源图片命名规则,并将其中有价值传播给大家。 (PS:本人有时拿到UI切图,看到名称确实是不知道这个图是用来干嘛和放在哪里的,还得跑过去问UI。。所以,一个好的命名规则可以让我们开发节省不少的时间。)
奔跑的小鹿
2019/06/24
2.1K0
原来这就是 UI 设计师的门槛
本文主要分享 UI 设计师入行的一些个人经验指南,希望可以带给新入行业的设计师一点帮助!
奔跑的小鹿
2020/02/27
1K0
原来这就是 UI 设计师的门槛
设计师别浪费时间啦,快来试试这款Sketch标注插件吧
随着移动互联网的快速发展,用户的需求也在不断地增大,这对产品经理还有设计师的考验是越来越大。市场环境的变化让我们深信为快不破,但是一个产品的产出需要各个环节的紧密配合,但往往在产品输出过程中,由于分工不明确导致的形形色色的问题,其中的一大痛点就是产品经理,设计师和工程师之间面临着协作难,工作效率低的问题。以前,设计师需要一遍遍的手动切图配合工程师一次次的改图,如今借助着万能的sketch标注插件,提前下班再不是梦!!
奔跑的小鹿
2019/01/24
5760
设计师别浪费时间啦,快来试试这款Sketch标注插件吧
推荐阅读
相关推荐
设计师都爱用的UI标注软件有哪些?
更多 >
领券
一站式MCP教程库,解锁AI应用新玩法
涵盖代码开发、场景应用、自动测试全流程,助你从零构建专属AI助手
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档