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 將自動隱藏,直到使用者觸碰畫面才會再度出現。

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

 

 

 
 

Cookie 消失?試試看全新 AI 影像內容辨識:讓用戶看的內容決定看到的廣告

Google Chrome 即將淘汰幫助廣告主的工具—— Cookie ,它的離去將再一次地影響數位廣告產業。
評論
Photo Credit:<a href="https://www.shutterstock.com/zh/image-photo/ai-artificial-intelligence-big-data-internet-1075853384" target="_blank">shutterstock</a>
評論

透過GA分析進站者發現, Safari的新客數越來越多,難道這表示 iOS 的用戶數也跟著增加了嗎?注意了,這有可能是 Apple 封鎖第三方 Cookie 帶來的影響。隨著 Google 即將淘汰 Chrome 上的 Cookie ,這個幫助廣告主記住用戶受眾的小工具,將要再一次地影響數位廣告產業。

Photo Credit:驚點股份有限公司( FreakOut Taiwan )

後 Cookie 時代的廣告受眾如何鎖定?

各大廣告平台在過去幾年不斷地透過 Cookie 以及其它方式,悄悄收集使用者的用戶數據,隨著這幾年用戶的隱私權意識抬頭, Apple 與 Google 對於藉由 Cookie 辨識用戶資料的廣告投遞方式,持有不同的態度,這也將是所有廣告主的極大挑戰。當 Cookie 不復存在,要如何辨識使用者資料?

Cookie 消失了,或許會有新的數據辨識工具來取代,但是任何試圖跟蹤受眾的方式,都難以符合大眾對於保護隱私權的期望。另一方面,也極有可能無法再通過日趨嚴格的媒體監管限制。無論如何,數位廣告不能像過去一樣,無條件地使用類似 Cookie 的追蹤方式,來達到與現在同樣的廣告效果。

後 Cookie 時代內容辨識類型的廣告鎖定方式,將成為未來具指標性的投放策略。廣告與瀏覽平台或內文主題的高相關性,不僅能顯著提高受眾的互動度,更重要的是,完全不需要收集任何個人數據。

FreakOut Taiwan 不斷嘗試更友善的廣告投遞形式, 自 2016 年進入台灣市場的原生廣告,到 2020 年末引進「 Mirrors 」 AI 影像視覺內容辨識系統,都是以網路使用者的角度出發。「 Mirrors 」不需要使用傳統的受眾興趣設定,即可針對「目標受眾在觀看的影像內容」、「品牌自身競爭對手或相關指定系列產品出現的影片」來投遞 YouTube 上的影音廣告。

Photo Credit:驚點股份有限公司( FreakOut Taiwan )

AI 人工智慧影像技術突破,推動新一代內容辨識功能

傳統的內容比對廣告皆為自然語言處理 NLP 中心,基於「純文字」的比對來顯示相關廣告,如大家很熟悉的 Google AdSense 。但是,結合新興的 AI 演算和複雜的圖像辨識,已然能夠達到「影片」的內容偵測,透過增加多個比對層和基於自然語言處理 NLP 的基準定位,可深度學習並提供更精細的辨識洞察力。

舉例來說,若想要將汽車廣告投放給對汽車有興趣的人,我們要先從可能對汽車感興趣的受眾中開始推估,並且根據過去的經驗加入不同的興趣條件,最後針對素材更進一步地測試。透過 Mirrors ,我們可以讓廣告出現在有滿足特定條件的影片內,例如:在消費者觀看的影片中,出現汽車評測報告、自家品牌或競爭對手的 LOGO 、代言人等指定條件,再依照不同廣告主設定的預算判斷是否露出廣告。

藉由這樣的影像比對方式,可以更有效地根據消費者行為觸發廣告投遞條件,而不再是現行的用戶受眾數據。人的興趣是多樣且多變的,當對汽車有興趣的用戶在完成汽車的選購後,短期內將不會再瀏覽相關資訊,轉而瀏覽其他更具時效性的內容。透過消費者當下正在觀看的影片內容,取代消費者身上被貼上的數位標籤,將更貼近消費者本身的使用行為。

Photo Credit:驚點股份有限公司( FreakOut Taiwan )

Mirrors AI 影像辨識:用消費者看的內容決定廣告

2021 年台灣數位報告指出,台灣人在各網路內容服務中,最愛「網路影片」的比例高達 97.9%,遠超過 Vlog、串流音樂、網路廣播、Podcast 。

影音廣告早已是品牌經營的趨勢:根據 DMA 2019 年台灣數位廣告量統計報告指出,台灣各類型廣告中,影音廣告以 37.2% 的成長比例大幅領先奪冠。其中 YouTube 持續蟬聯台灣最常被造訪網站第 2 名(僅次於 Google ) ,在台灣各大影音平台中的觸及率及影響力不容小覷。

2021 年 FreakOut Taiwan 已與客戶合作,進行搭載新系統的 YouTube 串流內廣告投遞,在針對品牌及產品客製化的多層鎖定策略建議下,房地產廣告的 CTR 表現高於平均,並發現「人臉」群組辨識表現為佳,其中多為財經、名嘴等名人。而美妝品牌廣告 VTR 表現優異,則以品牌「 Logo 」、「人臉」群組有最出色的表現。

本文章內容由「驚點股份有限公司( FreakOut Taiwan )」提供,經關鍵評論網媒體集團廣編企劃編審。