UI设计常识

这两天好友的媳妇开始找UI方向的工作，因为没有完整的参与过一个项目从开始的需求分析到成功上线，多少有点对自己信心不足，我是这两天离职，也是对自己找工作没有信心，打脸了。周末大家在一起吃饭的时候多少交流了一些想法和经验，希望能帮她找到一个好的团队，好的工作。今天做个总结，希望能够帮到更多的人。（持续更新中）

请认真阅读以下两本读物。

• 《iOS 人机界面准则》中文版
• Material design》官方手册
  对完这两本官方的手册，你会对这两个平台设计规范有了大致的了解，但这还是远远不够的。如果时间充裕，你可以随时将它们拿出来看一看，熟能生巧。 网上也有一些简短文章来概括性介绍 相关平台的规范。如
• iOS设计指南
• 学习iOS设计----iOS8的颜色、文字和布局学习

了解平台中常用的尺寸及相对应的规范

Paste_Image.png

网上有很多关于尺寸总结的文章，但很多总结的都不是很全面，推荐一个网站 尺寸规范,在这里你可以你不光可以看到现在2个平台主流手机的尺寸大小，设计规范，Icon设计规范，主流手机的屏幕分辨率。同时这里也集合了Web的相关设计规范及相关的占有率，相信对你一定有所帮助。

切图的相关知识

一个App通常会有很多张切图，iPhone现在会需要@1x，@2x，@3x等图片，Android现在至少需要hdpi，xhdpi，xxhdpi等三种图片尺寸，如此庞大的图片怎么命名和存档才能让开发人员快速找到他需要使用图片呢？
在一个App中切图主要可以分为：背景（bg），按钮（btn），图片（img或pic），图标（icon）等。通常情况下，命名都是按照切图的性质来命名。如：bg_xxx.png、btn_xxx.png,在iOS中，如果的是Retina 屏，通常会在命名的后面加上@2x.png和@3x.png。这里需要注意的的是在通常情况下，我们的命名都希望通用在iOS和Android两个平台，但是因为历史原因Android对图片之间的连接线（-）不支持，所以推荐大家都采用(_)。

• 背景（bg_xxx.png）
  通常情况下，背景是作为App某一个页面的大的底图或者导航栏（navbar）的背景
• 按钮（btn_xxx.png）
  在一个App中按钮一般都存在两种状态一般（normal）和点击（highlight），如果你对于App的的细节追求卓越，那你需要设计四种状态一般（normal）,点击（highlight）,选中（selected），不可点击(disabled)但在命名的时候对于这些状态我们只需要简写就可以了

一般：btn_xxx_n.png，点击：btn_xxx_h.png，选中：btn_xxx_s.png，不可点击：btn_xxx_d.png

• 图片：pic-xxx.png 或是 img-xxx.png
• 照片：pho-xxx.png
• 导航栏：navbar_xxx_n.png
• 标签栏：tabbar_xxx_n.png
• 图标：icon_xxx.png

一般按钮及icon在App切图中都会存在多种状态，所以这里的_n 就是用来标注当前切图所代表的状态。在做切图的时候，通常我们都会建立一个GUI文件，在这个GUI文件中，我们把App中所有涉及到切图的文件都汇总到一起，这样会很方便我们的管理和切图。

切图工具推荐

• Cut And Slice Me

在iPhone6级6Plas还没有出来的时候用这个插件可以搞定iOS级Android两个平台的产品，现在稍稍有个问题，不支持@3x图片输出。不过作者已经在官网上写了声明，不久就会支持啦。使用帮助帖子

• Cutterman

国内的开发者做的，效果也很好，作者也开发了其他的一些可以提高设计效率的小插件。大家在使用之前最好线看一下“使用帮助”。

标注软件相关

• 马克鳗

方便，快捷的标注软件，很多的小的细节都做的很用心。2种版本，付费版和免费版，付费版支持二次修改，免费版只能不支持。60人民币一年，值得拥有.

• PXCOOK

1.长度标注针对移动端设计，支持px与dp直接的单位转换2.注释的文字字体样式可以自定义3.自带实时放大镜，省却了反复放大的操作。4.长度标注的数字可以自己手动改，设计时可以小小的偷个懒~5.标注的各种颜色可以自定义，灵活性不错。他家的另一款工具也很不错，推荐一下：Colorcube

• specKing

标示文件只要按一个按钮，选中的图层会自己跑完。完全自动，不用自己拉线对个半天。设定好线的颜色、文字颜色，其他就都交给计算机处理了(19$)

• Assistor

基于PS的一个的插件，也是非常好用，容易上手，但是要每个月9.9$，好丧心病狂。