iOS7UI元素設(shè)計(jì)控件清單，你們到底知道多少呢？今天25學(xué)堂專(zhuān)門(mén)匯總了iOS7 UI設(shè)計(jì)控件元素的名稱(chēng)。可以算是給APP設(shè)計(jì)新手們更好的了解iOS7系統(tǒng)架構(gòu)！同時(shí)更能設(shè)計(jì)出符合iOS7風(fēng)格的作品。

也就是說(shuō)iOS7系統(tǒng)自帶的一些UI控件效果。在我們?cè)O(shè)計(jì)和開(kāi)發(fā)APP的時(shí)候，需要遵循這些iOS7 UI控件的原則。同時(shí)如果項(xiàng)目比較趕或是節(jié)省工作量，都是可以共用這些UI控件的。

iOS7UI元素設(shè)計(jì)布局控件分為以下4大類(lèi)：

A：欄：狀態(tài)欄目和導(dǎo)航欄的結(jié)合體；

iOS7官網(wǎng)對(duì)欄的具體解讀包括：

1、狀態(tài)欄(Status Bar)

2、導(dǎo)航欄(Navigation Bar)

3、工具欄(Toolbar)

4、標(biāo)簽欄（Tab Bar）

5、搜索欄(Search Bar)

6、范圍欄(Scope Bar)

這張圖表示的標(biāo)簽欄上面常用的標(biāo)簽圖標(biāo)：

B：內(nèi)容視圖：應(yīng)用顯示的內(nèi)容信息，包括相關(guān)的交互行為，例如滾屏、插入、刪除等操作進(jìn)行排序；

iOS7官方解讀視圖包括

1、活動(dòng)菜單(Activity)

2、集合視圖(Collection View)

3、圖片視圖(Image View)

4、地圖視圖(Map View)

5、頁(yè)面視圖控制器(Page View Controller)

6、滾動(dòng)視圖(Scroll View)

7、表格視圖(Table View)

8、文本視圖(Text View)

9、網(wǎng)絡(luò)視圖(Web View)

C：控制元素：產(chǎn)品行為或顯示的信息；

1、活動(dòng)指示器(Activity Indicator)

2、添加聯(lián)系人按鈕(Contact Add Button)

3、日期時(shí)間選擇器(Date Picker)

4、詳情展開(kāi)按鈕(Detail Disclosure Button)

5、信息按鈕(Info Button)

6、標(biāo)簽(Label)

7、網(wǎng)絡(luò)活動(dòng)指示器(Network Activity Indicator)

8、頁(yè)面控件(Page Control)

9、選擇器(Picker)

D：臨時(shí)視圖：臨時(shí)向用戶(hù)提供重要的信息，或提供額外的功能和選項(xiàng)。

1、活動(dòng)指示器（activityindicator）

2、Date Picker（日期時(shí)間選擇器）

3、聯(lián)系人添加按鈕（Contact Add Button）

4、細(xì)節(jié)展示按鈕（Detail Disclosure Button）

5、信息按鈕 （Info Button）

6、標(biāo)簽（Label）

7、網(wǎng)絡(luò)活動(dòng)指示器（Network Activity Indicator）

8、頁(yè)面控制器（Page Control）

9、選擇器（Picker）

10、進(jìn)度視圖 （Progress View）

11、刷新控件（Refresh Control）

12、分段控件（Segmented Control）

13、滑動(dòng)器（Slider）

14、步進(jìn)器（Stepper）

15、開(kāi)關(guān)（Switch）

16、系統(tǒng)按鈕（System Button）

17、文本框(TextField)

iOS7UI元素設(shè)計(jì)布局控件布局原則：

1、可點(diǎn)擊對(duì)象的區(qū)域：尺寸不要小于44*44px;

2、將重要的內(nèi)容和功能放在權(quán)重高的位置，將重要的元素放在前半屏比較好，對(duì)于閱讀習(xí)慣從 左到右的用戶(hù)來(lái)說(shuō)，更貼近屏幕左側(cè)位置容易引起關(guān)注的；

3、利用視覺(jué)表現(xiàn)形式的權(quán)重和平衡，尺寸較大的元素具有更高的權(quán)重，對(duì)于尺寸較小的元素來(lái) 說(shuō)，更能吸引目光，看上去更加重要等。

4、蘋(píng)果字體規(guī)格說(shuō)明：

A：導(dǎo)航欄標(biāo)題：medium 34px；

B：按鈕和表頭：light 34px

C：表格標(biāo)簽：Regular 28px；

D：Tab頁(yè)圖標(biāo)標(biāo)簽：Regular 20px

全套iOS7 GUI元素下載推薦

iOS7設(shè)計(jì)尺寸最新分享和iOS7設(shè)計(jì)規(guī)范小炒報(bào)

擴(kuò)展閱讀：《http://www.alibuybuy.com/posts/83578.html》