那些年,UI设计师还在手工标注和切图时走的弯路
在我从事UI设计师这几年的工作中逐渐发现,最让人糟心的不是应付各种奇葩的需求,完成设计稿,而是交付。每次交付的设计稿和最后开发出来的产品总是让我心塞无比,很少最终产品和我的设计稿是完全一致的。
UI设计师对接产品经理是个问题,UI设计师对接前端工程师是个问题。
UI设计师处于整个产品开发链条中最为重要也是最为尴尬的一环,产品界面设计完全出自设计师,但是却不是由设计师来最终实现。
根据我的经验,其实大部分问题都出在了沟通上,开发工程师没有完全理解设计稿,他们完全依赖我们的标注和切图来进行开发,设计师的切图和标注,是否规范和精确,直接影响视觉效果的还原度。往往设计做的越精致创意,交付过程就越煎熬。
然而,最后界面长的不好看,老板不会怪程序猿,是会怪你的。
标注难
“这里的间距是多少啊,没有标我怎么写?”
“这里的字体需不需要加粗?”
“这个字需要多大的字号?”
“这个是Android的尺寸?iOS的呢?我要自己算啊?”
“这里的icon为什么不没有高度和宽度呢”
...........
我想大多数的设计师和我一样,时常因为漏标元素被开发追问这些问题。开发能不能完美的的还原设计稿,很大一部分取决于我们设计师的标注,但是哪些该标,哪些不用标,我们设计师往往不好把握,尤其是新手设计师。我们往往就尽量标得详细一些,手动标注占领了我们日常大部分的时间,还不能有效的完成交付,经常加班,有时还会有开发人员来问或者直接不问就自己做主随便做的情况。手动标注加大了沟通和时间的成本,让人精疲力尽。
切图难
难点1:作为UI设计师,在日常工作中一个非常重要的设计输出物,就是切图。只要是无法用代码不好实现和表达出来的,就需要切图。规范的切图,会直接影响到开发工程师对设计效果的展示。光一个苹果应用中的图标就需要3种不同的大小,安卓的要求更是五花八门,最后还得打包交给开发,太多无用和低效的琐事浪费了大量的时间。
难点2:切图的命名格式在不同的公司都不尽相同,需要UI设计师和对接的开发工程师进行沟通,或者是团队内部进行沟通规范,才能达到良好的切图命名规范,大大降低了工作效率。
设计协作更难
设计师和程序员作为专业性很强的工作者,他们之间需要沟通和协作的工作内容太多,但往往两者不能很好的互相理解对方的工作,设计师不懂代码,程序员不懂设计,这给产品交付带来了巨大的困难,但是设计又是一个与其他部门有着很多沟通需求的工作,在协作上设计一直有着很多痛点。虽然现在市面上有许多协作应用,但始终缺少一款能让设计师得心应手,解决他们实际痛点的协作设计工具。
摹客iDoc是由Mockplus团队开发的协作设计工具,是一款更快更简单的智能标注和切图工具,完美地解决了标注难,切图难,设计协作难的问题。
特色功能:
- 智能标注,让设计师解放双手,再也不需要手动做;可以完整而清晰地将PS、Sketch设计图中每个元素的尺寸、位置、颜色、间距、字号等样式信息自动同步到摹客iDoc,开发师可以随时查看。
- 还支持百分比标注;不仅可以选择单个图层,还可以连续选择多个图层,并智能标注需要的度量。设计师再也不用手动标注了,开发人员需要什么信息自己就能查看,开发人员也省心了。
- 全貌面板展示流程,设计稿可以随意拖动,还可以自由设置逻辑线,让设计图管理更轻松,更清晰。
- 支持图钉批注,还支持圆形、矩形、直线、箭头等多样批注
- 可以弹出放大镜,查看微小距离的标注
其他亮点功能:
- 设计规范自动采样生成,还可分类管理、同步应用、一键导出设计风格指南
- 自动获取切图,可下载多个或全部切图
- 一键查看页面中的重复元素
- 样式代码自动导出
- 支持多种附件文档支持,支持任何类型文件的上传共享,并支持多种产品文档的直接在线预览,包括Axure、Justinmind、Mockplus的原型演示、office文档预览、图片文件预览、pdf和文本文件预览。
摹客iDoc让团队协作更高效,产品交付更轻松
摹客iDoc的诞生不是偶然,是必然。中国的设计师们需要这样的一款产品来解放他们的繁杂的日常,让他们更加专注于设计,而非拘泥于如何完美的呈现交付稿。从产品、设计到开发只需要一个文档,告别混乱的文档和各种说明,让团队协作更加高效。如果你也是一名设计师,那么不凡试试这款产品吧。
那些年,UI设计师还在手工标注和切图时走的弯路的更多相关文章
- 2018年设计师都在用的PS切图插件--摹客iDoc
终于找到你,我梦寐以求的PS切图插件.曾几何时,设计师在完成设计稿之后高效的输出标注切图一直是设计师的噩梦.为什么这么说呢?开发要的那么多尺寸,我到底该怎么切图?iPhone的版本已经不少了,更别提安 ...
- Android设计图(标注、切图)
1.Android: 1)Android的单位是dp 2)分为ldpi/mdpi/hdpi/xhdpi/xxhdpi. 3)分辨率对应DPI ldpi QVGA (240×320) mdpi HV ...
- 还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...
- 让UI设计师崩溃的瞬间,你经历过哪些?
隔行如隔山,这句话人人耳熟能详,但其实隔行并不可怕,大家各谋其事,各尽其职,倒也互不打扰,真正可怕的是,是内行还要受外行指点江山,而最难的部分,便是那沟通.流畅的沟通,和声细语,是有如时雨之化者:无效 ...
- 原来这就是 UI 设计师的门槛
本文主要分享 UI 设计师入行的一些个人经验指南,希望可以带给新入行业的设计师一点帮助! 写在前面 随着互联网的不断发展,特别是移动互联网的不断成熟,视觉设计师也进行了迭代与细分.衍生出的 UI 设计 ...
- 2019,UI设计师必备神器
2019年将会是你全新起航的一年,相信你已经制定了很多规划,正在开启第一步的推动. 作为对UI设计师更大程度的支持,今天特意为你分享一款释放你双手的设计神器.让你可以把时间和精力投入到设计本身,这 ...
- 如何减少UI设计师产品与前端工程师的沟通成本
在日常工作中,UI设计师/产品与前端工程师难免会有一些冲突,这是我的一些小建议. 1.如何减少时间成本 先制作UI组件,再拼接页面 如果UI给前端的是一堆页面,前端需要花一些时间去整理提取UI组件.另 ...
- Android UI 切图命名规范、标注规范及单位描述(转载)
本文转自:https://blog.csdn.net/klxh2009/article/details/74938009 很多UI设计师做APP切图都会有两套,一套是Android的,一套是IOS的. ...
- 程序员是天生的软件UI设计师
一个软件项目,谁才是软件开发的主体,是软件UI设计师?还是程序员? 这还用问吗?当然是程序员拉.引用以下alienbat知友的一段评论:对于软件开发而言,码农的工作是必需的.设计师的工作是可选的. 举 ...
随机推荐
- redis 配置参数
redis配置参数说明: 属性 说明 daemonize 如果值是“yes”,则启动服务的时候是后台守护进程形式,如果值是“no”,则相反 pidfile 指定存储Redis进程号的文件路径 port ...
- day21 xml模块 ATM+购物车
1. xml模块 <father name="jack"> # 属性的值必须加双引号 <son> 标签的关闭顺序,与开启顺序相反, 最先开启的最后关闭,最后 ...
- python学习day4 数据类型 if语句
1.变量的内存管理 cpython解释器垃圾回收机制 什么是垃圾,当一个值身上没有绑定变量名时,(该值的引用计数=0时)就是一个垃圾 age=18 #18的引用计数=1 x=age #18的引用计数 ...
- 581. Shortest Unsorted Continuous Subarray
Given an integer array, you need to find one continuous subarray that if you only sort this subarr ...
- rancher2 HA部署注意事项
参考: https://rancher.com/docs/rancher/v2.x/en/installation/ha-server-install/ https://www.cnblogs.com ...
- poj1019(打表预处理+数学)
题目链接:http://poj.org/problem?id=1019 题意:对于序列1121231234...,求第i个数字(i<=2147483647). 思路:记第一组为1,第二组为12, ...
- Appium+python自动化4-等待函数
4.1 等待函数癈使用 4.1.1 为什么要使用等待函数 我们在做自动化的时候很多时候都不是很顺利,不是因为app的问题,我们的脚本也没问题,但是很多时候都会报错,比如一个页面本来就有id为1的这个元 ...
- js文字展示各种滚动效果
js文字展示各种滚动效果:http://www.dowebok.com/demo/188/
- swift - iOS10之后的加速器
import UIKit //1.加速器框架 import CoreMotion class ViewController: UIViewController { //1.创建运动管理者 必须设置为 ...
- JsRender 学习总结
jsRender 三个最重要的概念:模板.容器和数据. 最重要的是:view(视图) 是我们定义的模板,上下文是视图所用的对象. 一.基础. {{:}} 和 {{>}}(或{{html:}})两 ...