iOS7 UI設(shè)計控件元素詳細解讀和設(shè)計規(guī)范

iOS7UI元素設(shè)計控件清單,你們到底知道多少呢?今天25學堂專門匯總了iOS7 UI設(shè)計控件元素的名稱??梢运闶墙oAPP設(shè)計新手們更好的了解iOS7系統(tǒng)架構(gòu)!同時更能設(shè)計出符合iOS7風格的作品。

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

iOS7UI元素設(shè)計布局控件分為以下4大類:

A:欄:狀態(tài)欄目和導航欄的結(jié)合體;

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

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

2、導航欄(Navigation Bar)

3、工具欄(Toolbar)

4、標簽欄(Tab Bar)

5、搜索欄(Search Bar)

6、范圍欄(Scope Bar)

這張圖表示的標簽欄上面常用的標簽圖標:

標簽欄標準圖標(Tab Bar Icons)

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

iOS7官方解讀視圖包括

1、活動菜單(Activity)

2、集合視圖(Collection View)

3、圖片視圖(Image View)

4、地圖視圖(Map View)

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

6、滾動視圖(Scroll View)

7、表格視圖(Table View)

8、文本視圖(Text View)

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

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

1、活動指示器(Activity Indicator)

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

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

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

5、信息按鈕(Info Button)

6、標簽(Label)

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

8、頁面控件(Page Control)

9、選擇器(Picker)

D:臨時視圖:臨時向用戶提供重要的信息,或提供額外的功能和選項。

1、活動指示器(activityindicator)

2、Date Picker(日期時間選擇器)

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

4、細節(jié)展示按鈕(Detail Disclosure Button)

5、信息按鈕 (Info Button)

6、標簽(Label)

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

8、頁面控制器(Page Control)

9、選擇器(Picker)

10、進度視圖 (Progress View)

11、刷新控件(Refresh Control)

12、分段控件(Segmented Control)

13、滑動器(Slider)

14、步進器(Stepper)

15、開關(guān)(Switch)

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

17、文本框(TextField)

ios UI控件

 

iOS7UI元素設(shè)計布局控件布局原則:

1、可點擊對象的區(qū)域:尺寸不要小于44*44px;

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

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

4、蘋果字體規(guī)格說明:

A:導航欄標題:medium 34px;

B:按鈕和表頭:light 34px

C:表格標簽:Regular 28px;

D:Tab頁圖標標簽:Regular 20px

 

全套iOS7 GUI元素下載推薦

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

擴展閱讀:《http://www.alibuybuy.com/posts/83578.html》

 

 

每天更新,
全站高品質(zhì)素材免費下載!