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

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

 

 

 
 

遠傳子公司-博弘雲端科技稱霸台灣,化身「助飛員」幫企業飛上雲端,打造現代化 IT 架構

21 世紀的企業踏上數位浪潮,紛紛展開「上雲計畫」推動 IT 雲端化轉型工程。台灣第一家 AWS MSP 代管服務合作夥伴,即為遠傳子公司-博弘雲端科技(以下稱博弘)擔起「助飛員」重任。為各產業客戶提供雲端搬遷、資安防禦、數據資料庫、視覺化圖表、開發工具等一站式雲端解決方案。
評論
photo credit:遠傳
評論

博弘年營收成長率達 70%,於 2019 年加入遠傳,將雲端服務結合「大人物」(大數據、人工智慧、物聯網),為遠傳大人物挹注雲端能量,亦為博弘掀開事業格局新頁。2020 年博弘被美國 CIO 雜誌、國際調研機構 ChannelE2E ,評選為全球前 25 大雲端託管服務商。在專業技術與產業經驗上不斷精進的博弘,儼然已成為企業數位轉型不可缺少的雲端夥伴。

聯姻遠傳厚植兩大武力:擴大商業謀略、強化數據技術

博弘總經理何冠生( Shasta )笑談十年的創業「試錯」之旅,數位、遊戲、零售事業試過一輪,當 AWS 前來叩門談合作,創業經驗化成對客戶痛點的深度同理心,因而將服務不斷延伸,從雲端架構規劃、部署、監控到 7×24 代管,博弘集團不但取得各雲平台原廠的信任與合作,更與客戶養出共存共榮的夥伴關係。

博弘成為遠傳子公司之後,一方面獲得充沛資源,同時拓展企業價值鏈,進化為全新企業體。何冠生指出:「我們汲取了遠傳深耕產業 ICT 的整合經驗與集團財務紀律管理,又保留雲端公司的敏捷及彈性,以『雲端為體,大人物為用』,拉高我們經營格局與服務完整度。」另一方面,企業數位轉型專家遠傳聯手博弘,可以豐沛雲端基礎建設等資源搭載各種大數據、人工智慧、物聯網的技術,協助各領域的垂直場域,快速展開智慧創新應用。

Photo Credit: 遠傳
博弘加入成為遠傳子公司之後,團隊不失既有的彈性與速度優勢,同時在經營格局擴大眼界,借助遠傳接觸更多元產業客戶。

除了拔尖商業戰略,博弘也沒有忽略技術本質的耕耘,今年更成立數據應用處,看準疫情迫使越來越多企業佈局現代化、雲端化 IT 之外,也開始講究數據驅動決策,才能在斷鏈、封城、停工等危機中速戰速決。何冠生表示,「我們此時擴大服務廣度,一部分也是洞察到『大人物』的市場機會。」

理解客戶思維鍛造上雲飛船,挖掘創新技術攻克每場戰役

何冠生解釋:「博弘先天具有致力解决客戶挑戰的 DNA ,提供面面俱到的服務;不斷挖掘新技術,加上團隊重視當責、不追求個人主義,也是我們在市場持續領先的關鍵!」不僅組織扁平、溝通透明,團隊總是面向同一目標進攻。就像同仁們經常一起登頂百岳、衝破馬拉松終線,練就遇到棘手挑戰,也無所畏懼的膽識。

經典成功戰役,就是協助台灣家樂福搬遷電商架構,助其提升 70% 連網速度。何冠生表示,家樂福電商網站原設置於香港機房,但許多服務仍需連回法國,博弘集團協助搬遷至 GCP 台灣機房,進行架構的調整與優化,結合在地機房優勢,大幅提升消費者線上購物的使用體驗,更導入創新代管服務,提升維運管理效率與服務品質,創造三贏局面。

另受 COVID-19 影響,線上學習成為必要轉型的選項之一,博弘與遠傳更聯手協助公部門,改善傳統伺服器因學生上網爆量造成的不堪負荷。短短不到 2 個月時間,快速將大量數位教材從地端拋上雲端、客製化雲端架構,並因應人流離尖峰,自動調整機台負載效能,遠傳與博弘充分發揮綜效以雲端技術量能,幫助莘莘學子在三級警戒期,安全安心落實停校不停學。

Photo Credit:博弘
博弘重視團隊合作精神,成員在工作之餘會一起攀爬百岳,從運動過程不僅鞏固向心力,更培養無懼客戶提出艱難任務的勇氣。

在地練兵樹立大人物典範,放眼海外目標亞太第一大

為了持續擴大博弘雲端託管服務的競爭優勢,何冠生說,我們將祭出差異化的殺手鐧。首先博弘把雲端託管技術加以商品化,未來一兩年將以 SaaS (軟體即服務)模式,推出自主開發的訂閱商品,同時結合遠傳大人物的相關技術與平台,形成深度、廣度兼具的完整解決方案,再加上遠傳顧問團隊在數位轉型的豐富實踐經驗與科技力,可進一步瞄準更多產業客戶。 

博弘除了拓展在地市場,也沒有忽略海外商機,何冠生提到,「這三年我們經營香港、東南亞據點大有斬獲,海外營收大幅成長,特別是在金融保險產業、政府公部門及大型企業,都是我們的客戶群。」這個好成績讓博弘繼續勇敢造夢,下一階段策略聚焦「立足台灣、放眼全球」,何冠生相信與遠傳攜手可以累積更多企業部署「大人物」的成功故事,絕對有助於把數位轉型典範輸出國際。

Photo Credit: 遠傳
遠傳洞察各業態需求,聚焦大數據(Big Data)、人工智慧(AI)、物聯網(IoT)三項技術,發展「遠傳大人物」,2019 年聯手博弘雲端科技,持續提供創新的數位服務解決企業面臨的問題,致力成為企業數位轉型的最佳夥伴。

本文由「遠傳」提供,經關鍵評論網媒體集團廣編企劃編審。