UI设计师的一波小总结
UI 小tips
之前做的项目曾经遇到的一些小问题或者走过的坑，在这里记录记录总结，可以给其他设计朋友参考。主要是关于APP design中的切图，标注和统一性问题的小总结。
1，标注方法
最近在菜心设计铺中看到一篇文章，说标注可以根据功能、模块等做不同颜色，如下图1，我看了文章之后觉得非常的清楚明白，不过和公司的技术大大沟通发现他们觉得原始的标注方法(图2)和图1标注对他们来说差不多。
图1
图2
这里要提到另一种神器Sketch Measure,它的自动标注深得技术们的喜爱，也希望可以尽量使用这种方法。这个就要局限于公司是否使用Mac做设计了，如果可以的话sketch是首选，可以使用它的插件标注再加手动应该会更好些。
2,标注对适配的影响
不建议：将一些控件给出固定的尺寸大小，如弹窗，button，图片，视频等。
eg:图3将这个弹窗的宽度和高度都标注出来，开发就会将这个弹窗写死，设计稿按照750*1334设计，其他尺寸适配。在iPhone 5s和6(及以上)的屏幕上就会有很大的差。因为iPhone5s是640px宽，6(及以上)是750宽，弹窗在6中比较舒服的大小在5s中就会在宽度上显得非常拥挤。
建议：给出两边的间距，让整个弹窗自适应。注意下，这里是弹窗，如果是button的话，可以给出两边的间距，高度写死。
图3
3，.9类图形标注
如图4：标注内容区从哪里开始的时候，是指黄色的线和红色线之间的距离，不是蓝色线和红色线之间的距离，因为切图是切一张背景。
图4
第二个问题是其他小伙伴遇到的，图5想要实现的效果是：50*50大小的头像从距左边2px开始，文字内容到最右边30px结束
图5
既然头像是50*50上下空2，那绿色圆角矩形就应该是54px高，加上小三角要大于54px. 如果圆角矩形小于54，或者头像大于50，那么绿色背景就会在高度上被拉伸，结果两边就不会是圆的了。
这个问题当时找了很久，因为圆角矩形当时高52被纵向拉伸，敬业的Android大大一直苦恼为啥那么丑，多亏了我们的Android提醒。虽然图5不是我负责的但是注意了一下。
这里还要注意下.9切的时候内容区域应该是从最左边开始到右边30px的地方。
4，UI设计的统一性（第4点的内容有引用凯文说的文章中的内容，如有不妥我马上改正）
刚刚看了凯文的关于保存按钮的位置与设置中的必要性，正好想到在另一项目中我遇到的问题：保存位置的不统一。设计前期没有注意统一性，在后期修改成本增大。
整理了下凯文文章的知识点，总结下3种保存位置的优缺点
（1）保存放在右上角，这种方式的好处是：
一是，“保存”按钮不会被键盘或其它弹出控件遮挡，始终可见，因此不必收起键盘再保存；
二是，顶部通常有导航栏，保存按钮与导航栏结合，节省了屏幕空间。
这种方式的缺陷是：
屏幕顶部是不便于点击的区域，屏幕尺寸越大操作越不便。
（2）为了解决表单内容比较多，一屏显示不下导致“保存”按钮藏在几屏之后的问题，解决方案之一就是将它固定在屏幕底部。
“保存”按钮固定在屏幕底部有几点好处：
一是，符合人们对表单的认知习惯，同时又兼顾屏幕高度有限和表单过长之间的矛盾；
二是，处于方便操作的区域，容易点击。
当然除了好处，也存在一些缺陷：
一是，“保存”按钮固定在底部，必须占用一定的屏幕空间，降低主要信息的展现数量；
二是，如果填写表单需要弹出键盘或其它控件，固定在底部的保存按钮会被遮挡，操作不便。
可见将“保存”按钮固定在屏幕底部适合于对屏幕空间要求不高且不需要在屏幕上弹出键盘的情况
（3）“保存”按钮紧接在内容之后的优劣，其实前面已经提到了，这里简单总结一下。
优点：符合认知习惯；
缺点：
一是，表单内容超过屏幕高度时会被遮挡；
二是，需要弹出键盘时会被遮挡，操作不便。
由此推论，当表单内容比较少（占用空间不到一屏）且弹出键盘不会遮挡“保存”按钮或不需要弹出键盘时，“保存”按钮应该紧跟在内容之后。
5，第二篇文章中的问题，在项目的初期我也请教过我的产品Leader和一个产品朋友，为什么滑动开关的页面是没有保存，而选择开关的页面有保存。
leader给的一种解释是，左右滑动开关，类似于物理中的开关，有马上生效的隐含寓意。
朋友给的解释是，设置里面选项是并列关系，点击后单个选项生效。大家可以看下微信性别设置里， 是选择开关，但是选择完后页面会自动保存并退出。
除了以上这些判断依据，还有一点非常重要，即需要保持整个产品UI的一致性。如果其它界面中保存按钮都是固定在屏幕底部，那么在保证不会明显影响操作体验的情况下，也可以打破以上原则。因为有时候整体的一致性比局部的优化更重要。当然如何把握其中的分寸，这就要靠你的经验了。
当当当~小总结就到这里啦~以上就是我对之前一些项目的总结和其他一些遇到的问题，可能有的地方不对，请指出。
我要非常感谢Fezz前辈给的建议：多看教程，尝试自己写教程。谢谢诸葛，木木君，小萍不厌其烦的教我sketch。还有盒饭君群里的其他小伙伴们的帮助。谢谢我的leader对我的指导。谢谢技术大大每次都热心的讲解。
参考文章：凯文说，菜心设计铺
