苹果为app设计提供了默认的UI元素，但是它们看起来大都比较朴素，也不是那么吸引人。 而在iOS 7中，苹果提供的默认的UIButton更是引发了不少设计师和开发者的争论，因为它们看起来更像是一

“ ”


阅读器

iOSbutton按钮iOS7



苹果为app设计提供了默认的UI元素，但是它们看起来大都比较朴素，也不是那么吸引人。



 



而在iOS 7中，苹果提供的默认的UIButton更是引发了不少设计师和开发者的争论，因为它们看起来更像是一个基本的文本链接，有点像你在webpage上看到的那样。





虽然iOS 7鼓励设计师和开发者使用更加扁平化的UI，但按钮看起来仍然应该是可以与之进行交互的。


 


那么那种方法比较适合在app中使用自定义按钮呢？


 


很多开发者都有自己的办法把自定义按钮应用在app中，不过我发现了一个更为简单和有效的方法--在Photoshop中创建按钮，并以PNG文件导入。


 


如果你从事过网页设计，你会知道用CSS自定义页面UI元素比为每个对象使用单独的PNG文件更有效率。对iOS来说，PNG文件能自动的包含在程序里，而且不会影响性能事实上，在app中使用代码自定义UI元素甚至会影响到应用的性能。


 


在app中使用按钮


创建一个简单的按钮项目，并且一定要设置类型（在Attributes Inspector里）为自定义。然后把按钮和头文件连接起来，做一个IBOutlet UIButton项目。然后在实现文件中应用这些代码：


  

1. [self.button setImage:[UIImage imageNamed:@"buttonImage"] forState:UIControlStateNormal]; 
2. [self.button setImage:[UIImage imageNamed:@"buttonImageHighlighted"] forState:UIControlStateHighlighted];

 


非常简单，只需2行代码就能搞定。


 


小建议


1.对于你包含的每一个图片，也会包含进它两倍尺寸的照片，在名字后面附加@2x。


2.在app中，通过方法“resizableImageWithCapInsets”在多个尺寸按钮中使用相同的图片。


3.类似按钮的文本、阴影以及透明度的属性可在Interface Builder中实现。


4.把按钮图片保存为PSD版本，你永远不知道何时需要修改它们。


5.不知道从哪里开始？看看 Mobile Patterns--这里有大量的设计案例。


 


你也可以免费使用我设计的按钮 


Download the Button Files