此文分別從控件+布局+模態(tài)情景+手勢交互+動畫+字體等六個方面介紹了一些iOS平臺設(shè)計(jì)的基礎(chǔ)規(guī)范，有志于UI設(shè)計(jì)的童鞋推薦收藏起來，將來要做相關(guān)的設(shè)計(jì)可以直截了當(dāng)戳進(jìn)來學(xué)習(xí)。

一、UI的控件概述：

1、框架UI的元素分為4類：

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

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

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

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

2、框架UI的尺寸：

3、圖標(biāo)icon的尺寸：

二、UI的布局概述：

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

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

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

三、UI的模態(tài)情景概述：

1、模態(tài)：一種用來承載特定內(nèi)容、功能或體驗(yàn)的模式，有其自身的優(yōu)缺點(diǎn)。它可以幫助用戶完 成某些任務(wù)，或在不受干擾的情況下獲取信息，但會暫時性的強(qiáng)迫用戶停止與應(yīng)用其他部分 的互動；

2、保持模態(tài)任務(wù)的簡單、簡短、易聚焦：不要將模態(tài)視圖打造的好像是嵌在應(yīng)用當(dāng)中的迷你應(yīng)用；

3、始終提供一種明顯而安全的退出方式：要確保用戶在退出模態(tài)視圖時，能夠?qū)酉聛硪l(fā)生的 事情有明確的認(rèn)知；

4、使用警告框來傳遞那些必不可少的重要信息，通常還要提供可執(zhí)行的功能選項(xiàng)。

四、UI的手勢交互概述：

A：通過點(diǎn)擊(tap)：按壓或選擇一個對象；

B：通過拖拽：滾屏或移動對象（將從界面的一邊移動到另一邊）；

C：通過滑動(flick)：快速滾屏或移動對象；

D：通過一個手指輕掃(swipe)：可展現(xiàn)更多內(nèi)容，例如：列表的刪除按鈕，從界面頂端展開通知中心；

E：通過雙擊(double tap)：可將內(nèi)容放大置于屏幕中間，主要是放大和縮小的轉(zhuǎn)換；

F：通過雙指漲開(pinch open)或閉合(pinch close)：對內(nèi)容進(jìn)行放大或縮?。?/p>

G：通過長按(touch and hold)：在可編輯或可選擇的文字上顯示放大鏡，用來定位光標(biāo)；

H：通過搖晃(shake)機(jī)身可執(zhí)行撤銷或重做的操作。

五、UI的動畫概述：

1、漂亮而精致的動畫效果遍布于ios各處，它們使應(yīng)用體驗(yàn)更具動態(tài)性，更加吸引人，精細(xì)而恰 當(dāng)?shù)膭赢嬓Ч梢裕?/p>

A：傳達(dá)狀態(tài)

B：增強(qiáng)用戶對于直接操作的感知

C：通過視覺化的 方式向用戶呈現(xiàn)操作結(jié)果

2、盡可能與ios內(nèi)置的應(yīng)用的動畫模式保持一致：人們已經(jīng)習(xí)慣內(nèi)置應(yīng)用當(dāng)中各種精妙的動 畫效果，實(shí)際上，用戶往往會將內(nèi)置應(yīng)用當(dāng)中的動效看作一種體驗(yàn)的標(biāo)準(zhǔn)，例如切換視圖時的 平滑過渡效果，切換橫豎屏?xí)r的流暢反饋，或是能表現(xiàn)出各種物理效果的滾屏動畫等等，這些 都逐漸成為了人們預(yù)期當(dāng)中的一部分。

六、UI的字體概述：

1、字體是ios7設(shè)計(jì)的關(guān)鍵，大多數(shù)操作都是點(diǎn)擊文字或點(diǎn)擊圖標(biāo)，按鈕也會有，但是占的比重很小；

2、蘋果的默認(rèn)字體是Helvetica Nenu，一種纖細(xì)簡單的文字，但那不是你唯一的選擇；

3、Ios7的字號稍微加大了，主要由于它的用途，而且文字之間的層級關(guān)系至關(guān)重要，利用顏色 和不同的粗細(xì)，來保持文字的布局和UI元素的清晰易懂。

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

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

B：按鈕和表頭：light 34px

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

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

作者：@亞茹有李