iOS部分控件介紹及設計規(guī)范

iOS及Android圖標按鈕設計規(guī)范

UI設計師需要了解的開發(fā)中常用的UI控件(ios篇)

iOS交互設計基礎之控件(二)


1.視圖(UIView)

進入模態(tài)視圖后不能與母視圖交互跺嗽,需要進行操作才能結(jié)束該模式御铃,比如動作表單结洼、警告框、浮層都屬于模態(tài)視圖怔锌。(感謝知乎伊夫圣羅蘭的回答的啟發(fā)!)。

動作表單(UIActionSheet)

iOS ActionSheet
浮出層(Popover或Popup)

警告框(UIAlertView)

警告框(Alert)


iOS警告框指導原則


提示器(HUD)

HUD不屬于模態(tài)視圖


圖片視圖(UIImageView)

可設置圖片的顯示方式椎眯,如居中神帅、居右再姑,是否縮放

頁面試圖

頁面視圖

表格試圖(UITableView)

表格視圖(可通過控件對所有某行操作)


表格視圖常見樣式
分組/不分組表格視圖

滾動視圖(UIScrollView)

一個能夠滾動的視圖控件,可以?來展?大量的內(nèi)容,并且可以通過滾動查看所有的內(nèi)容;隨著手指的變動進行調(diào)節(jié)相應的點找御,知道何時停止?jié)L動元镀,而且必須知道內(nèi)容視圖的范圍

文本視圖(UITextView)

文本視圖(長文本可滾動,可喚起鍵盤)

補充一下通用布局:

遵循移動端8pc原則


2.按鈕(UIButton)

充分考慮四種狀態(tài)

食指點擊目標尺寸是44 x 44像素霎桅,拇指是72 x72像素栖疑;

所有可操作元素最小點擊區(qū)域為88*88px,物理尺寸7*7mm滔驶。

iPhone icon尺寸


3.加載控件和進度條(UIProgressView)

加載模式:

不同模式適應不同場景

考慮的點:①要保證內(nèi)容完整性遇革?還是保證快速閱讀、了解信息揭糕?還是想讓用戶無盡探索萝快?②重要信息不能全部放在頭圖上,重要操作不能放圖片按鈕插佛,萬一load不出來就炸了杠巡;③網(wǎng)絡因素,切換小圖雇寇、無圖模式氢拥,視頻動畫占位符模式(智能加載)。

加載控件形式:

導航條-標題旁小菊花
下拉-導航條下小菊花

進度條形式:

彈出框形式的進度條
線形/環(huán)形/帶數(shù)字的進度條

注意:①可用非模態(tài)的加載方式锨侯,不打斷用戶嫩海,可在等待時進行其他操作,減少等待感囚痴;②使用情趣化的加載動畫叁怪;③漫長的等待要使用精確進度條告知;④盡量提前加載深滚。

導航欄下的非模態(tài)進度條


4.導航控制器(UINavigationController)

UINavigationBar提供一種對導航層級內(nèi)容的控制奕谭。它是一個欄涣觉,最典型的用法就是放在屏幕頂端,包含著各級視圖的導航按鈕血柳。它最首要的屬性是左按鈕(返回按鈕)官册、中心標題,還有可選的右按鈕难捌。你可以單獨用導航欄膝宁,或者和導航控制器一起使用。

完整的導航控制器由 Navigation bar根吁,Navigation View员淫,Navigation toolbar 等組成。

通用導航條布局

適當根據(jù)功能改變導航的設計:

網(wǎng)易新聞(雖頁面改變的導航條)
QQ個人信息頁(覆蓋導航條及狀態(tài)欄)
上下滑動隱藏或顯示導航欄


5.分段控件(SegmentControl)

iOS 分段控件


一個分段控件最多包含五個分段
知乎

6.選擇器(UIPickerView)

多用于日期击敌,省份介返,時間的選擇。

日期和時間


7.文本區(qū)(UITextField)

顯示文本段,顯示所給的文本沃斤∮辰裕可以設置輸入文本一些屬性,改變大小和位置等轰枝。

注意:喚醒合適的鍵盤;適當使用占位符幫助理解组去;適當在最右加入清除按鈕鞍陨。

8.短文本/標簽(UILabel)

可以設置字體,字號从隆,顏色等诚撵。


9.滑塊(UISlideer)

允許用戶在一個限定范圍內(nèi)調(diào)整某個數(shù)值或進程,常用在控制音量键闺、亮度等寿烟。

UISlideer


10.開關(UISwitch)

iOS7 UISwitch

開關按鈕僅在表格視圖中可用


11.頁面切換控件

頁面控件

注意:①iOS僅支持連續(xù)視圖間逐一切換;②不超過10個點辛燥。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末筛武,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子挎塌,更是在濱河造成了極大的恐慌徘六,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,948評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件榴都,死亡現(xiàn)場離奇詭異待锈,居然都是意外死亡,警方通過查閱死者的電腦和手機嘴高,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評論 3 385
  • 文/潘曉璐 我一進店門竿音,熙熙樓的掌柜王于貴愁眉苦臉地迎上來和屎,“玉大人,你說我怎么就攤上這事春瞬〔裥牛” “怎么了?”我有些...
    開封第一講書人閱讀 157,490評論 0 348
  • 文/不壞的土叔 我叫張陵快鱼,是天一觀的道長颠印。 經(jīng)常有香客問我,道長抹竹,這世上最難降的妖魔是什么线罕? 我笑而不...
    開封第一講書人閱讀 56,521評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮窃判,結(jié)果婚禮上钞楼,老公的妹妹穿的比我還像新娘。我一直安慰自己袄琳,他們只是感情好询件,可當我...
    茶點故事閱讀 65,627評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著唆樊,像睡著了一般宛琅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上逗旁,一...
    開封第一講書人閱讀 49,842評論 1 290
  • 那天嘿辟,我揣著相機與錄音,去河邊找鬼片效。 笑死红伦,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的淀衣。 我是一名探鬼主播昙读,決...
    沈念sama閱讀 38,997評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼膨桥!你這毒婦竟也來了蛮浑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,741評論 0 268
  • 序言:老撾萬榮一對情侶失蹤只嚣,失蹤者是張志新(化名)和其女友劉穎陵吸,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體介牙,經(jīng)...
    沈念sama閱讀 44,203評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡壮虫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,534評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片囚似。...
    茶點故事閱讀 38,673評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡剩拢,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出饶唤,到底是詐尸還是另有隱情徐伐,我是刑警寧澤,帶...
    沈念sama閱讀 34,339評論 4 330
  • 正文 年R本政府宣布募狂,位于F島的核電站办素,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏祸穷。R本人自食惡果不足惜性穿,卻給世界環(huán)境...
    茶點故事閱讀 39,955評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望雷滚。 院中可真熱鬧需曾,春花似錦、人聲如沸祈远。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,770評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽车份。三九已至谋减,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扫沼,已是汗流浹背逃顶。 一陣腳步聲響...
    開封第一講書人閱讀 32,000評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留充甚,地道東北人。 一個月前我還...
    沈念sama閱讀 46,394評論 2 360
  • 正文 我出身青樓霸褒,卻偏偏與公主長得像伴找,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子废菱,可洞房花燭夜當晚...
    茶點故事閱讀 43,562評論 2 349

推薦閱讀更多精彩內(nèi)容