iOS設(shè)計(jì)三大原則(Principles)
?清晰? ? ?依從? ? ?深度
清晰(Clarity)
在整個(gè)系統(tǒng)中,文字在每一個(gè)尺寸都是清晰易讀的,圖標(biāo)精確而清晰,裝飾精巧而適合,使得用戶更易理解功能。負(fù)空間,顏色,字體,圖形和界面元素巧妙突出重要內(nèi)容并傳達(dá)交互性。
顏色(Color)
設(shè)計(jì)早期可以通過(guò)較灰的顏色來(lái)避免色對(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í)度高,但是無(wú)論多么精彩的圖標(biāo)都不可替代文字。
留白(Empty Area)
適當(dāng)?shù)牧舭?,能更加讓設(shè)計(jì)依從與信息本身、顏色、板式的設(shè)計(jì),都是為了讓用戶能更加高效的使用產(chǎn)品,獲得信息和產(chǎn)品功能,不要用過(guò)多的字體,精簡(jiǎn)自己的設(shè)計(jì)元素。才能更好的給信息讓路。
依從(Deference)
流暢的動(dòng)畫和清晰美觀的界面可以幫助人們了解和與內(nèi)容交互,而不應(yīng)該(因?yàn)樘^(guò)花哨而)干擾到用戶的使用。內(nèi)容通常充滿整個(gè)屏幕,而半透明和模糊常常暗示有更多內(nèi)容。
深度(Depth)
使用不同的視覺(jué)層級(jí)和真是的運(yùn)動(dòng)效果來(lái)傳達(dá)層次的感覺(jué)賦予界面活力,并促進(jìn)用戶的理解。讓用戶通過(guò)觸摸和探索來(lái)發(fā)現(xiàn)程序的功能不僅會(huì)使用戶產(chǎn)生喜悅感。在對(duì)內(nèi)容進(jìn)行導(dǎo)航時(shí),層級(jí)的轉(zhuǎn)場(chǎng)效果提供一種有深度的感覺(jué)。(一般一個(gè)頁(yè)面不會(huì)超過(guò)3個(gè)層級(jí))
結(jié)構(gòu)(Structure)
1.欄(Bar)
2.內(nèi)容(Content)
3.控件(Control)
4.活動(dòng)視圖(Activity Views)
視圖(Views)
操作列表(Action sheets)
操作列表是一種特殊的彈窗形式,來(lái)反饋特定交互動(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)視圖管理,采用表單式或展開(kāi)顯示取決于設(shè)備屏幕大小和方向。
警告窗(Alerts)
彈窗由標(biāo)題、可選消息、一個(gè)或多個(gè)按鈕,以及解釋說(shuō)明文字字段組成。除了這些可配置的元素,彈窗的視覺(jué)樣式是不可自定義的。
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)容,例如一組照片,布局形式可定制并高度可視化。一般來(lái)說(shuō),集合視圖是展示圖像內(nèi)容的理想選擇,可以自定義背景和其他裝飾視圖,從視覺(jué)上區(qū)分圖片子集。
圖片視圖(Image Views)
圖片視圖在透明或不透明背景上顯示單個(gè)圖片或圖片序列。在圖片視圖中,圖片可以被拉伸、縮放或固定到特定位置。默認(rèn)情況下,圖片視圖不互動(dòng)。
頁(yè)面瀏覽控制器(Pages)
頁(yè)面瀏覽控制器提供了一種在文檔、書記、記事本或日歷之間的內(nèi)容頁(yè)線性導(dǎo)航方式,它使用滾動(dòng),卷動(dòng)管理頁(yè)面之間的轉(zhuǎn)換。滾動(dòng)轉(zhuǎn)換沒(méi)有特定的外觀,頁(yè)面從一個(gè)流暢滾動(dòng)到另一個(gè);卷曲轉(zhuǎn)換會(huì)是頁(yè)面卷曲,當(dāng)用戶在屏幕上滑動(dòng)時(shí),就像轉(zhuǎn)動(dòng)物理世界中的書一樣。
浮出層(Popover)
浮出層作為一種臨時(shí)視圖,會(huì)在用戶點(diǎn)擊控件或特定區(qū)域時(shí)觸發(fā),高于其他頁(yè)面層級(jí)。一般來(lái)說(shuō),浮出層應(yīng)該保留在iPad應(yīng)用中使用。在iPhone應(yīng)用中,在全屏模式視圖中呈現(xiàn)信息,而不是在浮層中,利用所有可用的屏幕空間。
滾動(dòng)視圖(Scroll views)
滾動(dòng)視圖允許用戶瀏覽大于可見(jiàn)區(qū)域的內(nèi)容,例如文檔中的文本或圖像集合。隨著用戶滑動(dòng)、輕拂、拖動(dòng)、點(diǎn)按和捏住,滾動(dòng)視圖會(huì)沿著手勢(shì)以一種自然感的方式顯示或縮放內(nèi)容。它本身沒(méi)有外觀,但是與其用戶交互時(shí),它會(huì)顯示臨時(shí)滾動(dòng)指示器。還可以配置為尋呼模式,其中滾動(dòng)顯示全新的內(nèi)容,而不是移動(dòng)當(dāng)前頁(yè)面。
分屏視圖(Split views)
分屏視圖管理兩個(gè)并排的內(nèi)容窗格顯示,主窗格中的常駐內(nèi)容和輔窗格中的相關(guān)信息。每個(gè)窗格可以包含各種元素,包括導(dǎo)航欄、工具欄、標(biāo)簽欄、表格、集合、圖像、地圖和自定義視圖。如果應(yīng)用需要,主窗格可以覆蓋輔窗格,并且在不使用時(shí)可以隱藏屏幕。
表單視圖(Tables)
表格視圖以一個(gè)可滾動(dòng)的單列多行的形式來(lái)展示一段或一組數(shù)據(jù)。用一個(gè)表格以列表的形式,簡(jiǎn)潔高效地顯示大量或少量的信息。一般來(lái)說(shuō),表格最好用來(lái)展示文字內(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)容直接透過(guò)狀態(tài)欄顯示(設(shè)計(jì)抽屜導(dǎo)航時(shí))
5.在用戶全屏觀看媒體時(shí),可以考慮隱藏狀態(tài)欄以及所有頁(yè)面UI