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

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

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

相关文章

迭代器模式(Iterator)迭代器模式(Iterator)[Cursor]意图...
高性能IO模型浅析服务器端编程经常需要构造高性能的IO模型,...
策略模式(Strategy)策略模式(Strategy)[Policy]意图:定...
访问者模式(Visitor)访问者模式(Visitor)意图:表示一个...
命令模式(Command)命令模式(Command)[Action/Transactio...
生成器模式(Builder)生成器模式(Builder)意图:将一个对...