iOS設(shè)計(jì)規(guī)范

iOS設(shè)計(jì)三大原則(Principles)

?清晰? ? ?依從? ? ?深度


清晰(Clarity)

在整個(gè)系統(tǒng)中,文字在每一個(gè)尺寸都是清晰易讀的,圖標(biāo)精確而清晰,裝飾精巧而適合,使得用戶更易理解功能割岛。負(fù)空間,顏色羡铲,字體蜂桶,圖形和界面元素巧妙突出重要內(nèi)容并傳達(dá)交互性儡毕。


顏色(Color)

設(shè)計(jì)早期可以通過較灰的顏色來避免色對(duì)于間距和布局的影響也切,一旦設(shè)計(jì)完成,需要痛毆調(diào)整顏色和色調(diào)腰湾,保證色彩在任何情況下都可以辨識(shí)雷恃。同時(shí),我們也需要關(guān)注色盲人群的體驗(yàn)费坊。


排版(Typography)

對(duì)任何信息進(jìn)行排布的時(shí)候倒槐,首先必須要掌握的是對(duì)齊/重復(fù)/親密/對(duì)比,貫穿設(shè)計(jì)的四大原則附井。


排版(Typography)

對(duì)任何信息進(jìn)行排布的時(shí)候讨越,首先必須要掌握的是對(duì)齊/重復(fù)/親密/對(duì)比两残,貫穿設(shè)計(jì)的四大原則。



圖形(Graphics)

圖標(biāo)設(shè)計(jì)與功能相關(guān)把跨,辨識(shí)度高人弓,但是無論多么精彩的圖標(biāo)都不可替代文字。


留白(Empty Area)

適當(dāng)?shù)牧舭鬃胖穑芨幼屧O(shè)計(jì)依從與信息本身崔赌、顏色、板式的設(shè)計(jì)耸别,都是為了讓用戶能更加高效的使用產(chǎn)品健芭,獲得信息和產(chǎn)品功能,不要用過多的字體秀姐,精簡(jiǎn)自己的設(shè)計(jì)元素慈迈。才能更好的給信息讓路。


依從(Deference)

流暢的動(dòng)畫和清晰美觀的界面可以幫助人們了解和與內(nèi)容交互囊扳,而不應(yīng)該(因?yàn)樘^花哨而)干擾到用戶的使用吩翻。內(nèi)容通常充滿整個(gè)屏幕,而半透明和模糊常常暗示有更多內(nèi)容锥咸。


深度(Depth)

使用不同的視覺層級(jí)和真是的運(yùn)動(dòng)效果來傳達(dá)層次的感覺賦予界面活力狭瞎,并促進(jìn)用戶的理解。讓用戶通過觸摸和探索來發(fā)現(xiàn)程序的功能不僅會(huì)使用戶產(chǎn)生喜悅感搏予。在對(duì)內(nèi)容進(jìn)行導(dǎo)航時(shí)熊锭,層級(jí)的轉(zhuǎn)場(chǎng)效果提供一種有深度的感覺。(一般一個(gè)頁面不會(huì)超過3個(gè)層級(jí))


結(jié)構(gòu)(Structure)


1.欄(Bar)


2.內(nèi)容(Content)


3.控件(Control)


4.活動(dòng)視圖(Activity Views)


視圖(Views)


操作列表(Action sheets)

操作列表是一種特殊的彈窗形式雪侥,來反饋特定交互動(dòng)作碗殷,一般包含兩個(gè)或兩個(gè)以上的選項(xiàng)。使用操作列表是為了讓用戶啟動(dòng)任務(wù)速缨,或者確定不可撤銷的交互動(dòng)作锌妻。在小屏設(shè)備上,操作列表內(nèi)容由下向上滑動(dòng)顯示旬牲;而在大屏設(shè)備上仿粹,操作列表內(nèi)容作為彈窗全部顯示。



活動(dòng)視圖(Activity views)

活動(dòng)視圖可以讓用戶執(zhí)行應(yīng)用中的一項(xiàng)自定義服務(wù)或任務(wù)原茅。例如在應(yīng)用里頻繁使用的復(fù)制吭历、收藏、查找擂橘。在它激活后晌区,可以立即執(zhí)行任務(wù),或者逐步完成多步任務(wù)。每個(gè)活動(dòng)都由活動(dòng)視圖管理朗若,采用表單式或展開顯示取決于設(shè)備屏幕大小和方向恼五。


警告窗(Alerts)

彈窗由標(biāo)題、可選消息哭懈、一個(gè)或多個(gè)按鈕唤冈,以及解釋說明文字字段組成。除了這些可配置的元素银伟,彈窗的視覺樣式是不可自定義的你虹。


1.當(dāng)操作涉及潛在的風(fēng)險(xiǎn)時(shí),取消「Cancel」按鍵應(yīng)位于右側(cè)彤避,并高亮提示傅物。

2.當(dāng)需要引導(dǎo)人們進(jìn)行所期望的操作時(shí),取消「Cancel」按鍵應(yīng)位于左側(cè)琉预,相對(duì)應(yīng)的操作按鍵高亮提示

想讓用戶點(diǎn)擊的放在右邊



集合視圖(Collections)

集合視圖是一組有序內(nèi)容董饰,例如一組照片,布局形式可定制并高度可視化圆米。一般來說卒暂,集合視圖是展示圖像內(nèi)容的理想選擇,可以自定義背景和其他裝飾視圖娄帖,從視覺上區(qū)分圖片子集也祠。



圖片視圖(Image Views)

圖片視圖在透明或不透明背景上顯示單個(gè)圖片或圖片序列。在圖片視圖中近速,圖片可以被拉伸诈嘿、縮放或固定到特定位置。默認(rèn)情況下削葱,圖片視圖不互動(dòng)奖亚。


頁面瀏覽控制器(Pages)

頁面瀏覽控制器提供了一種在文檔、書記析砸、記事本或日歷之間的內(nèi)容頁線性導(dǎo)航方式昔字,它使用滾動(dòng),卷動(dòng)管理頁面之間的轉(zhuǎn)換首繁。滾動(dòng)轉(zhuǎn)換沒有特定的外觀作郭,頁面從一個(gè)流暢滾動(dòng)到另一個(gè);卷曲轉(zhuǎn)換會(huì)是頁面卷曲蛮瞄,當(dāng)用戶在屏幕上滑動(dòng)時(shí)所坯,就像轉(zhuǎn)動(dòng)物理世界中的書一樣谆扎。


浮出層(Popover)

浮出層作為一種臨時(shí)視圖挂捅,會(huì)在用戶點(diǎn)擊控件或特定區(qū)域時(shí)觸發(fā),高于其他頁面層級(jí)。一般來說闲先,浮出層應(yīng)該保留在iPad應(yīng)用中使用状土。在iPhone應(yīng)用中,在全屏模式視圖中呈現(xiàn)信息伺糠,而不是在浮層中蒙谓,利用所有可用的屏幕空間。


滾動(dòng)視圖(Scroll views)

滾動(dòng)視圖允許用戶瀏覽大于可見區(qū)域的內(nèi)容训桶,例如文檔中的文本或圖像集合累驮。隨著用戶滑動(dòng)、輕拂舵揭、拖動(dòng)谤专、點(diǎn)按和捏住,滾動(dòng)視圖會(huì)沿著手勢(shì)以一種自然感的方式顯示或縮放內(nèi)容午绳。它本身沒有外觀置侍,但是與其用戶交互時(shí),它會(huì)顯示臨時(shí)滾動(dòng)指示器拦焚。還可以配置為尋呼模式蜡坊,其中滾動(dòng)顯示全新的內(nèi)容,而不是移動(dòng)當(dāng)前頁面赎败。



分屏視圖(Split views)

分屏視圖管理兩個(gè)并排的內(nèi)容窗格顯示秕衙,主窗格中的常駐內(nèi)容和輔窗格中的相關(guān)信息。每個(gè)窗格可以包含各種元素僵刮,包括導(dǎo)航欄灾梦、工具欄、標(biāo)簽欄妓笙、表格若河、集合、圖像寞宫、地圖和自定義視圖萧福。如果應(yīng)用需要,主窗格可以覆蓋輔窗格辈赋,并且在不使用時(shí)可以隱藏屏幕鲫忍。



表單視圖(Tables)

表格視圖以一個(gè)可滾動(dòng)的單列多行的形式來展示一段或一組數(shù)據(jù)。用一個(gè)表格以列表的形式钥屈,簡(jiǎn)潔高效地顯示大量或少量的信息悟民。一般來說,表格最好用來展示文字內(nèi)容篷就,而且經(jīng)常以導(dǎo)航的方式出現(xiàn)在分欄視圖的一側(cè)射亏,另一側(cè)顯示相關(guān)內(nèi)容。



欄(Bars)

作為潔面的組成元素,欄主要可以看作是應(yīng)用的骨架智润,起到梳理信息層級(jí)及舍,引導(dǎo)相關(guān)交互等重要作用。


狀態(tài)欄(Status bar)

1.狀態(tài)欄是透明為(0%)窟绷,始終固定在屏幕上邊緣

2.@1x下尺寸為20pt

3.不要自定義狀態(tài)欄

4.避免滾動(dòng)內(nèi)容直接透過狀態(tài)欄顯示(設(shè)計(jì)抽屜導(dǎo)航時(shí))

5.在用戶全屏觀看媒體時(shí)锯玛,可以考慮隱藏狀態(tài)欄以及所有頁面UI

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市兼蜈,隨后出現(xiàn)的幾起案子攘残,更是在濱河造成了極大的恐慌,老刑警劉巖为狸,帶你破解...
    沈念sama閱讀 221,406評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肯腕,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡钥平,警方通過查閱死者的電腦和手機(jī)实撒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涉瘾,“玉大人知态,你說我怎么就攤上這事×⑴眩” “怎么了负敏?”我有些...
    開封第一講書人閱讀 167,815評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)秘蛇。 經(jīng)常有香客問我其做,道長(zhǎng),這世上最難降的妖魔是什么赁还? 我笑而不...
    開封第一講書人閱讀 59,537評(píng)論 1 296
  • 正文 為了忘掉前任妖泄,我火速辦了婚禮,結(jié)果婚禮上艘策,老公的妹妹穿的比我還像新娘蹈胡。我一直安慰自己,他們只是感情好朋蔫,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,536評(píng)論 6 397
  • 文/花漫 我一把揭開白布罚渐。 她就那樣靜靜地躺著,像睡著了一般驯妄。 火紅的嫁衣襯著肌膚如雪荷并。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,184評(píng)論 1 308
  • 那天青扔,我揣著相機(jī)與錄音源织,去河邊找鬼翩伪。 笑死,一個(gè)胖子當(dāng)著我的面吹牛雀鹃,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播励两,決...
    沈念sama閱讀 40,776評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼黎茎,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了当悔?” 一聲冷哼從身側(cè)響起傅瞻,我...
    開封第一講書人閱讀 39,668評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體馒过,經(jīng)...
    沈念sama閱讀 46,212評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡宴杀,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,299評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了购桑。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,438評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖屏积,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情磅甩,我是刑警寧澤炊林,帶...
    沈念sama閱讀 36,128評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站卷要,受9級(jí)特大地震影響渣聚,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜僧叉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,807評(píng)論 3 333
  • 文/蒙蒙 一奕枝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧瓶堕,春花似錦倍权、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至题画,卻和暖如春默辨,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背苍息。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工缩幸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留壹置,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,827評(píng)論 3 376
  • 正文 我出身青樓表谊,卻偏偏與公主長(zhǎng)得像钞护,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子爆办,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,446評(píng)論 2 359

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