恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI设计习惯与文件整理
0.0°
2018-03-19 原创文章 经验/观点 举报 5028 26 15 2

好像很少看见有人写一些设计文件的整理文章,这里我把我做项目以来总结的方式分享一下。

每个设计师的设计习惯都不同。处理细节的情况也不一样,养成良好的设计习惯可以提高工作效率,和降低沟通成本。


文档管理的好坏直接影响到与你对接人的理解。我们作为一个设计团队的一员,每天都可能会遇到临时接手其他设计师的项目,或者其他人接手自己项目的情况。那么怎么管理自己的设计文件对于交接项目非常重要,你是否在接手另一个设计师的文件的时候一脸迷茫?修改的时候无从下手呢?


UI设计师处于整个项目的中间层。上线有产品、交互和运营,下线有开发、测试。设计稿输出的质量直接会影响到开发和测试的理解成本。



【问题篇】


摆地摊型

喜欢把所有状态页面都一个个摆出来,一个大项目下来,满屏幕都是页面。你想找某一个页面还得需要一个个看,遇到不标记大模块标题的就更痛苦了


偷懒型

方案稿和确认稿混在一起或者某些页面能不做就不做,设计稿的文案没有与产品交互同步更新。过了几天后发现连自己都不知道哪个是最终稿。


极端型

模块不分组,做到哪里是哪里。切片时发现自己要一个个选中~有些图层还被自己锁了。心里默念:“自己挖的坑含泪也得填满”

模块一层叠一层,最后发现一个组里有7-8层~~。想选中组里的某一个小组点到手酸为止。(我习惯双击选中,这个习惯不是特别好。有个快捷键command+目标)



走马观花型

改完一波是一波,一个项目可能迭代了好多个版本了,每个版本都是修改中间的某些模块。久而久之就很难看到一个完整的设计稿。

这个时候领导说给我一份这整个项目的设计稿吧,我要整体看下流程,是否有问题。然后…默默的加班加点的合图片(当然他们其实完全可以看交互稿的,谁让大佬们都喜欢看视觉稿呢?)


丢三落四型

输出设计稿的时候不是漏了某个切片就是没有标记输出时间。中间可能会有多次的提交文件,最后连自己都乱了哪个是最新的文件。(之前也会犯这种错,后来是开发小朋友提的要求,每次输出的时候都会检查切片并标记时间。)


以上问题有些是自己踩过的坑,每次开发童鞋给我提的建议我都认真考虑,可能一开始还是有点小情绪的觉得自己已经很幸苦,时间很紧还得做的这么细。但后来想想还是很不错的建议,毕竟这是用户体验的反馈!最后努力的改正自己的缺点。




【细节处理篇】


1、区分功能画布

如果把所有的大功能模块都放在一张页面里~这得倒出多大的图片呀?Image title


在sketch文件里创建不同的流程画布,这里列举了一下简单的画布模块。你也可以根据自己的习惯创建。

我会单独把飞机稿分离出来,原因是很多时候做完了发现有些飞机稿里在我其他项目里还能用到~还有可能会遇到改了千百稿回到第一稿的尴尬状态。

把所有的涉及到的切片统一放在一个画布里,后面整合的时候就可以直接整体移动,避免了设计稿里东一个西一个切片,甚至还会遗漏掉。



2、建立模块组

模块组类似于UI规范组,如一些通用的弹窗模块、表单模块、图标模块等等。这里单独列举一下表单模块组和图标模块组。

Image title

我的处理方式是,每个组创建一个透明层,比如下图


Image title

开发在标注图上点击这块直接能看到这个模块的高度,不用选中分割线往上移动查看这个高度,方便开发定位。需要注意的点透明模块必须得至于内容底部。

如果打散了设计,你想拖动某一个模块进行修改那得一个个选中~~

Image title

如果组合太多的话~


Image title

3、同页面下的不同状态图

不同的用户人群看到的页面也不一样,或者某个操作后反馈的结果不一样。这个地方交互稿上会把很多种状态的细节都记录下来,UI的设计稿最好也要把过程记录下来。以备下次再次来打开的时候知道所有的流程状态。

我的处理方式是画出一张最全模块的页面,单独把每个模块列出来。


Image title

模块b隐藏,模块a和c的视觉排版。这里需要考虑的点就是如果中间b模块隐藏了,那么模块c上移后是否会出现衔接上的问题呢?如果在衔接上需要调整设计可以单独放一个页面。

Image title

Image title

把状态单独列出来说明有个好处就是不用去看两张页面有啥区别,开发一眼就能知道这里只有一张页面,只是有很多不同的判断状态而已。


如果把所有的状态都一个个列出来,感觉这个没玩没了了~每次都要看第一张页面和第二张页面到底哪里有不一样的地方?

Image title

案例:

Image title


4、经常会遇到产品要求设计师画系统弹窗、toast等一些很占画布的页面

系统弹窗的话理论上是直接让开发写的,有规范的情况下更不需要每个项目都单独画了,但是很多情况下如果UI设计稿不画这些,等过个几个月在回来看你自己的设计稿,是否会发现这里好像少了点什么的样子,整个流程也串不起来的样子。


我的处理方式是弹窗单独列出来,不做单独的页面。(有规范的前提下)

Image title


有人说,这个有点像交互设计师的稿子~但是你是否有想过,开发童鞋在开发的工作中要同时看多少东西么?

Image title

加起来少说也得有3个文件吧~试想如果是你同时要打开3个文档,在打开自己的开发软件~总感觉需要至少3个屏幕才能够呀。逻辑得看产品文档和交互稿,布局得看UI设计稿,文案还得确认哪个是对的。

很多时候发现交互稿的文案和设计稿的文案不一样,产品后期改了文案没有通知到ued组,就存在三套文档里文案都不一样的情况。此时开发童鞋已哭晕在厕所里。


自己的亲身经历

有次接到一个偏运营的产品设计,因为没有交互设计的参与产品直接画的流程图。UI在设计中发现很多问题,好不容易梳理完了流程了。发现运营流程图里的文案跟运营的文案还是2个文件~于是一边看流程图一边看运营文档找文案。当时的心情是崩溃的!一不小心可能就看错文案~项目时间比较紧还不允许自己有更多的时间。


规范的整理自己的设计文档,把交互的状态和流程展现出来,文案跟产品文档保持一致。能够降低开发的理解成本。同时也能让自己了解整个项目的跳转逻辑,都说UI就应该得有一颗交互的心,从每一个细节让自己想的更多更全。


Image title

5、定期整理设计稿,及时归档

项目初期迭代的频率会比较高,针对之前上面提过的区分功能模块化,迭代的时候可能会出现跨模块修改,因此在更改后需要保留一份原稿和一份更改后设计稿,标上日期,方便后期文件的管理。大版本的迭代可参考中间图,小版本迭代可参考右图。

Image title

这样你电脑里永远都有一份最新的的文档,如果遇到修改后需求方因为实现和项目排期问题导致你最新文件修改作废,需要回档原来的设计稿,就不用害怕啦~


遇到过最夸张的一次就是,某个业务线分人群展示不同逻辑页面。当时一共在线的分了abc三条线,因为大部分页面都比较像细节的逻辑展示有区分。修改了一个公共点时三条线需要一起修改,而且要区分不同的展示方式。好在之前把这个项目以三套文件分开管理的,才不至于后面全乱套了。


6、电脑桌面及时整理

自己的电脑桌面应该随时保持整齐有序,看到很多设计师的桌面那一个叫恐怖~满屏幕都是文件,大大小小新的旧的文档还有过期不需要的。可能每天工作比较忙吧,来不急整理文件。


然后每次找个文件只能靠搜索了~这个我自己有的时候也控制不住,记性太差前几天的一个项目一股脑的都忘一边去了,后面找文件的时候只能靠搜索了。


所以文件开始按照项目和时间线整理,桌面上保证最常用的图标、规范文档、本周要做的项目和上周可能遗留的项目。

对于已完成上线的项目都统一归类到项目文件夹里。

Image title

Image title

桌面还是得及时整理,一般情况下每天早上打开电脑先整理一下,一天的工作就可以愉快的开始了。


7、输出文档规范化

首先,你的文档会给很多人看。产品、交互、测试、运营看的最多是完整的视觉稿和流程图,开发童鞋需要另外增加标注和切片。

标注一直都是用的Sketch Measure 插件(比较常用不会卡,其他插件用的不习惯)切片的输出可以直接选中倒出不同尺寸的切片,复杂的切片可以先更开发沟通下。

Image title

Sketch Measure  可以直接倒出标注和切片,但是有些切片会重复。我习惯会自己单独倒出一套切片替换掉。(是不是会有人问为啥是1.5@x  我是用2倍尺寸做的图片)


切图尽量自己切

设计师切图有个好处就是你能随时跟开发沟通实现问题,知道开发制作过程总的布局情况。只有在知道了开发是怎么实现的情况下才能在你今后的设计中明确该怎么设计能提高效率,降低开发成本的前提下同时也能把页面设计好。别做甩手掌柜,做完设计稿直接丢开发那边自生自灭。


文档输出如图

Image title

版本迭代中会经常遇到需要修改某一个小细节的部分,比如调整了某个模块的的几个像素的距离。这么细小的修改别指望开发能一个个的帮你看,或者压根就没发现有这个改动点,毕竟不是所有人都有一双像素眼。

Image title



一般情况下会放2张设计预览图,在改动前的设计稿上用红框圈出来。开发童鞋看到了就知道你这里有细节部分改动,在写道这个模块的时候会细心看标注图。同时也能保证说每个细节都能做到完美。

我经常会遇到一些开发喜欢偷懒,不按照设计稿标注来做直接靠感觉,把细节用颜色标记出来。


最后保存文档

Image title

习惯是需要自己慢慢养成的,可能一开始觉得比较困难某些细节点不一定都能做的很到位,但是习惯后就会发现其实没有那么的难。


最后送上一份自己的桌面背景图~ 








更新:2018-03-19

下载
收藏

26人已收藏

  • 4

    作品

  • 46

    粉丝

  • 24

    关注

  • 移动端UI字体规范总结
  • 花粉节免息特权活动设计总结
  • 唯品金融吉祥物

    猜你喜欢

      2018-03-19 原创文章 经验/观点 举报 5028 26 15 2

      UI设计习惯与文件整理

      0.0°

      你确定要举报UI设计习惯与文件整理

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年01月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      26
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录