题目很大,是唬人的。了解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 一定有一种主题色,突出设计的重点。