UI设计规范整理

题目很大,是唬人的。了解UI设计，肯定是看IOSUI设计宝典 <<iOS HumanInterface Guidelines>>。因为我最近刚好在看这本书，整理一些小的知识点。

 

因大部分东西还是从别人那里整理的，还是作为转载吧。

 

很多程序员还要肩负设计UI的工作，所以了解一下这些知识还是会有帮助的。

  

1 像素(pixels)和点(points)

像素是屏幕上最小的计算单位。宏观上看是一个点，围观上是一个小方块。点是屏幕上的测量单位，是我们编程时使用的单位。 1 Point可以代表多个像素， 比如：

Iphone4, 点分辨率是320*480,像素分辨率是640*960. 这里一个点代表两个像素。iPhone5的像素分辨率是 640px*1136px

 

 

设计UI时，大部分情况是以点来考虑。这一点要记住。

 

2 所有可点击的部件需大于88px*88px。

 

 

3 尽量用storyboard布局.

 

有一些人代码至上，认为全部UI都用代码写才是牛人， 我个人认为storyboard要利用好，与代码结合。

 

开始布局的时候，秉承从上而下的流程，先设计基本模型，整体布局, 比如按钮在哪个位置，文本框在哪个位置，而不是按钮应该用什么样的背景图片。（可以参考之前一篇博文《IOS学习之导航那些事》里的demo程序的设计思路）

 

考虑到实用性， 按钮和滑块等元素的大小，通常都和手指差不多大小，如果屏幕上有一个需要触摸的元素，视觉大小比较小，应该设计它的触摸区域大一些。

 

 

4尽量使用可平铺图案设计界面

 

5 所有字体使用偶数字号进行设计

 

6图片命名

根据Retina屏幕的切图文件名后加@2x，普通屏幕尺寸不用加, 欢迎页、背景等需要对iPhone5另外切图的文件名后加-568h@2x, 按照如下的格式:

切图性质_功能相关描述_图片描述（可无）_状态说明（可无）@2x.png, 比如:

bg_booksnum_pressed@2x.png

bg_main-568h@2x.png

关于@2x再说详细一些，每个需要输出的图片资源你都需要创建两张图片。其中一个是正常一倍分辨率的资源，另一个是两倍分辨率的资源。在实际运行时，如果发现当前的设备是Retina屏，会自动寻找图片xxx@2x.png, 如果是普通屏幕，就会找没有@2x的图片, 这个可以自动适配. 

7 浮雕、渐变和阴影效果有时会让界面元素变得沉重，进而喧宾夺主。相反，要突出内容并让界面扮演一个辅助性的角色

8 一定有一种主题色，突出设计的重点。