UI 設計師必知的 iPhone X 設計細節!

iPhoneX就要上市了,UI設計該注意什麼? 這裡幫你整理一些更細節的資訊,讓你省去向開發者問東問西!
評論
評論

本篇原文刊登於 Medium ,INSIDE 經授權轉載。作者 Taylor ,UI 及數位產品設計師,專精於 iOS、Android 及 Web 等平台,曾經在國內外許多新創公司從事 UX 以及 UI 設計,也在各種組織、公司、學校裡協助管理與培訓,及擔任講師,更多相關資訊可見作者 臉書

光讀 HIG 是不夠的,這裡幫你整理一些更細節的資訊,讓你省去向開發者問東問西的時間。

尺度

  • 畫面大小:375×812 pt
  • 密度:@3x
  • 實際解析度:1125×2436 px

與其他 iOS 裝置的差異

以下都是與 iPhone 6、7、8 (375×667pt) 相比。

Status Bar 高度由 20pt 增長為 44pt。

底部須預留 34pt 給 Home Indicator (下面有詳細說明)。

寬度不變,畫面高度多出 145pt,但由於 Status Bar 以及 Home Indicator,實際多出可自由利用的有效顯示高度應該為:

145 – 24 (Status Bar) – 34 (Home Indicator) = 87pt

相當於兩個 Table Cell 的高度。

鍵盤高度由 216pt 增長為 291pt,設計文字輸入區域時要小心。

 
包含 Home Indicator,Tab Bar 高度由 49pt 增長為 83pt。
包含 Home Indicator,Toolbar 高度由 44pt 增長為 83pt。

一般設計原則

如果你的 UI「頂部」有 Navigation Bar 或其他類似的條狀元件,那麼一般來說,在設計稿將 Navigation Bar 的背景色往上延伸 44pt,「墊在 Status Bar 後方」作為背景色即可(見下圖)。

如果你的 UI「底部」有 Tab Bar、Toolbar 或其他類似的條狀元件,在設計稿將背景色往下延伸 34pt,「墊在 Home Indicator 後方」作為背景色即可。

若是使用系統原生 (Native) 的 Navigation Bar、Tab Bar 或 Toolbar,以上的行為系統 (UIKit) 都將自動替你完成,設計師不需要特別向開發者說明。

邊距

由於 iPhone X 螢幕四邊有圓角,上方有感應器區域 (Sensor Housing⋯⋯或俗稱瀏海),因此 UI 設計師需要留意,內容在展示、或是隨著使用者操作、捲動時,最好要考慮到這些因素,不要讓關鍵的 UI 被圓角剪裁,或是被 Sensor Housing 遮擋。

Safe Area 與 Layout Margins

一般在做 UI 設計時,背景色或較不重要的內容可完整地延伸至螢幕邊緣;主要的內容呈現區域 (例如 Table View) 會往內縮 (indent) 一層,稱為「Safe Area」;而通常文字或是按鈕等更加關鍵的物件,考慮到美觀及操作性,會再內縮一層,稱之為「Layout Margins」。這邊提到的關鍵字皆是 iOS 開發的專有名詞,可用來與開發者溝通。

直向 (Portrait)

直向時的 Safe Area 可延伸至螢幕左右兩側,上部留 44pt 給 Status Bar;Layout Margins 通常左右再內縮 15pt。

橫向 (Landscape)

橫向時的 Safe Area 左右兩側皆內縮 44pt;Layout Margins 通常左右再內縮 15pt。

需要特別注意的是,橫向時一側有 Sensor Housing 擋住,另一側則是乾淨的,但做設計時儘可能左右對稱內縮,可達成體驗的一致性,幫助使用者建立操作的肌肉記憶 (Muscle Memory)。

Home Indicator

Home Indicator 為 iPhone X 螢幕下方的一個操控區域,外觀是一條粗線 (手把),由螢幕底部往上滑動可返回主畫面 (Home Screen),或進入多工管理畫面 (App Switcher)。

外觀

不可客製/自訂外觀 ,系統會自動判斷背景顏色,深色背景時顯示淺色 Bar,淺色背景時則顯示深色 Bar。

Edge Protection

如果你的 UI 帶有由螢幕底部往上滑動 (Swipe) 的手勢,可能會與系統的手勢衝突,這時可告訴開發者該 UI/畫面需要啟用「Edge Protection」。

啟用時,Home Indicator 將會變得較為透明,並下降位置 (但還是在),讓全螢幕體驗更為完整。當使用者第一次由下往上滑動時,此手勢將保留給你的 App 使用,而不會觸發 Home Indicator;當使用者在這時進行第二次滑動,才會觸發。

注意:此選項將造成使用者不便,因此當真的有需要時再考慮啟用。

Auto-Hide

UI 中若是有影片播放等需要降低干擾的狀況,需要完全隱藏 Home Indicator,可啟用「Auto-Hide」選項,啟用後,若是使用者數秒內沒有操作行為,Home Indicator 將自動隱藏,直到使用者觸碰畫面才會再度出現。

注意:此選項將造成使用者困惑,因此當真的有需要時再考慮啟用。

 

 

 
 

NEC 以專業的生物辨識驗證技術,為人類生活打造更準確又安全的身份識別方式

NEC 具有多重比對臉部檢測法、攝動空間法、適應領域混合比對等先進技術,讓辨識更準確又快速,不但多次奪下美國國家標準暨技術研究院(NIST)評鑑第一名,在一對多的人臉辨識速度上也是業界之首。
評論
Photo  Credit:NEC 台灣政府公共解決方案事業群群總經理張裕昌
評論

你有沒有在機場使用過 e-Gate 快速通關系統呢?這種利用生物特徵的辨識技術既方便又安全,早在幾年前就已經是很多政府機關使用的成熟技術,讓我們跟著生物特徵辨識領導廠商 NEC 一起瞭解這種技術的原理吧。

生物辨識面面觀

身份辨識是電腦資安領域中很重要的一環,過去我們常常使用「知識辨識」方式來辨識使用者身份,但是使用輸入密碼的方式可能會被忘記,或是容易被破解的問題。至於「持有物辨識」是某種 USB 加密鑰匙,雖然可以省下記憶密碼的麻煩,但也有機率會不小心遺失。

生物辨識則是利用身體上獨一無二的特徵進行驗證,具備唯一性且不易盜用的先天優勢。其實這也不是很新的技術,早在數千年前人類就開始使用生物辨識,比如我們出門看到隔壁鄰居的臉,就能認出他是老王,這就是生物辨識的概念;但是要教會電腦辨識生物特徵,可就不是這麼簡單的事了。

生物辨識驗證領域全球領導廠商 NEC 從 1970 年代便開始研發指紋辨識、掌紋辨識和人臉辨識等技術。目前除了上述技術之外,NEC 也已開發出虹膜辨識、語音辨識,以及原創的耳道聲波辨識技術,這些獨特且高度準確的生物辨識驗證技術解決方案在全球各地都有實際應用的經驗。

NEC 將這些生物辨識驗證技術以「Bio-IDiom」品牌運用在各式應用中,並且以有效的組合運用這些技術,從而打造出「任何人都能安全無慮地使用數位內容」的世界。

NEC  在生物辨識驗證技術有 50 多年的經驗與龐大的研發團隊,並且具有多項領先技術。/Photo  Credit:NEC

領先業界的人臉辨識技術

以人臉辨識技術為例,它是透過攝影鏡頭補捉人臉的畫面,並透過電腦分析臉部各個特徵點的資訊,來判斷受檢人員是不是與登錄的資料相符。

人臉辨識技術有許多優點,由於人臉是平常人們用來判斷對方身份的方法當中最自然的一種,所以使用者的心理負擔很小,使用過程中也無需動手操作,而且一般攝影機就可辨識,讓建置更快速且低成本。此外它還具備有效防止弊端的特色,例如辨識的時候系統能夠留儲「臉部影像記錄」,讓管理者可以目視確認是否相符。

NEC 具有多重比對臉部檢測法、攝動空間法、適應領域混合比對等先進技術,讓辨識更準確又快速,也能在人臉被遮蔽或影像不清楚的情況下正確辨識,不但多次奪下美國國家標準暨技術研究院(NIST)評鑑第一名,在大規模一對多的人臉辨識準確度上也是業界之首。

生物辨識有使用方便、不易被盜用的優點,近年的應用越來越廣泛。/Photo Credit:NEC
除了人臉辨識之外,NEC 也有多種不同的生物辨識驗證技術可以交互搭配使用。/Photo  Credit:NEC

奧運史上首次使用人臉辨識入場

NEC 為 2020 東京奧運和東京帕拉林匹克運動會(Tokyo 2020)成功提供人臉辨識系統,為奧運的安全、可靠和高效舉辦做出貢獻。NEC 台灣政府公共解決方案事業群群總經理張裕昌在訪談中表示:「NEC 提供的臉部辨識系統,用於驗證運動員、工作人員、志工和其他比賽相關成員的身份,當他們進入奧運和帕運選手村、國際廣播中心(International Broadcasting Center, IBC)以及主新聞中心(Main Press Center, MPC),系統會自動進行臉部辨識。該系統為 NEC 生物辨識驗證技術『Bio-IDiom』的核心技術,採用準確度世界第一的臉部辨識技術。」

NEC 提供的臉部辨識系統,用於驗證 2020 東京奧運和東京帕拉林匹克運動會運動員、工作人員、志工和其他比賽相關成員的身份。/Photo Credit:NEC

One ID 帶來更便利的生活

機場是有高度安全考量的場所,因此無論在航空公司櫃台報到、海關查驗、登機口查驗,甚至在免稅店購物都需要旅客出示護照以確認身份,不但過程相當耗時,同時也增加了經常拿進拿出而遺失護照的風險。

以 NEC 提出的 One ID 解決方案為例,旅客只需要登錄其臉部影像,就能在機場辦理與進行各種手續,例如報到、托運行李、安檢、登機等,而不需要出示護照與登機證,不僅能加速程序的進行,還能達到全程零接觸,降低染疫風險。

全球最大航空公司聯盟星空聯盟(Star Alliance)、NEC 集團及國際航空電訊集團公司(SITA)達成一項新協議,在不久的將來,星空聯盟成員航空公司的飛行常客計劃之客戶,將能在任何參與此協議的機場與航空公司使用生物識別進行身份驗證。/Photo Credit:NEC
NEC 希望透過更多元的生物辨識技術改善人類的生活,透過只要伸出手指就能確實證明兒童身份的指紋辨識技術,就可以不受出生國家或地區左右,建立確實執行給予所有兒童合法出生證明與出生登記的環境,同時也打造兒童在成長過程中必要的、確保享有身為國民應有的公共醫療、教育機會與社會之保障。/Photo Credit:NEC

張裕昌提及,目前 NEC 的技術已經達到相當高的準確度與可靠性,未來的發展重點不再是改善辨識準確度,而是發展更多元的辨識種類,以及透過系統整合的方式,結合多種不同技術,以因應更多差異化的使用需求。

此外張裕昌總經理也特別提到,以 NEC 獨家的嬰兒指紋辨識技術為例,可以克服嬰兒指紋會隨時間變化的問題,有助於協助戶政系統不完善的國家追蹤嬰兒疫苗接種情況,發揮降低夭折比例的功效,為人類社會做出實質貢獻。