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