Swift / X-code The iOS Design Guidelines

踏入程式設計首先就必須要先瞭解的部分,也是傳說中的基本功!!!IOS的設計指南、內容講的就如標題所示,設計的規範以及一些規格內容。

★ 各式I Phone 的螢幕尺寸及解析度:

不同尺寸的I Phone 有著不同的解析度。

★ 點跟像素之間的差異:

像素是,我們可以數字顯示最小的物理元件。像素數越多,可以裝配到特定的屏幕尺寸,更高的PPI(像素/英寸)

根據不同的屏幕像素密度,一個點可以包含多個像素。

★ 比較例外的是 I phone 6+ :

呈現的內容會自動調整到原始大小的約87%(從2208點¯x1242像素,以適應1920×1080像素的顯示分辨率)。

★ APP 的 Icon 尺寸:

這部分就極為重要了,手機app的圖案要擺幾乘幾的圖片以及Spotlight的圖片大小都跟手機尺寸有相關聯。

P.S. 照片請用.png

★ Icon的圓角設計以及對齊格線:

所有app 的圖案不需要寫程式他自動會修成圓角 ,如果圖案背景是白色的也會有一條灰框。

蘋果開發了可用於尺寸和正確對齊的圖標元件及黃金比例的網格系統。

★ 字體與字型大小:

以前系統字體是Helvetica Neue字體。從ios 9 發布 San Francisco有兩種形狀:“SF UI顯示”和“SF UI文本”。

可從這下載https://developer.apple.com/fonts/

另外一個很有幫助的網站,直接看直接看字型長什麼樣,讓你不用一個一個字型試:http://iosfonts.com/

★ 常用的設計元素:

Status Bar

顏色有黑跟白色,還能設定要隱藏狀態列。

Navigation Bar

非常好用的元件之一 左上角多是回上頁Back鈕或是上一頁標題名稱。

右上方可以放Bar Button 可以有個按鈕做其他功能使用。

Toolbar

Search Bar

Tab Bar

也是最常用的元件之一,還能加入紅色的通知功能。最高能有5個分頁,ipad能到7個

Table View

我想有用iphone的應該不陌生。這就是設定頁面的使用格式。

ACTIVITY VIEW

ACTIONS

ALERTS

EDIT MENU

POPOVER

PICKERS

SEGMENT CONTROLS

SLIDERS

STEPPER

SWITCH

太多的元件無法一個一個的看,所以先把網站上有的轉過來做記錄

如果要詳細的可以上官網看仔細。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.