海淀網(wǎng)站建設(shè)-如何為IPHONE X設(shè)計(jì)
  • 更新時(shí)間:2024-11-06 00:34:49
  • 網(wǎng)站建設(shè)
  • 發(fā)布時(shí)間:1年前
  • 337

海淀網(wǎng)站建設(shè)--如何為IPHONE X設(shè)計(jì)

為iPhone X 設(shè)計(jì)會(huì)帶來一些新的挑戰(zhàn),但也會(huì)帶來一些新的設(shè)計(jì)機(jī)會(huì)。在本文中,我將分享一些技巧,幫助您設(shè)計(jì)在iPhone X 上看起來和感覺都很棒的應(yīng)用程序和游戲。

顯示詳細(xì)資料

iPhone X 擁有全新的高分辨率、圓形、無邊框超視網(wǎng)膜顯示屏,分辨率為1125 x 2436 像素。雖然它為設(shè)計(jì)人員提供了更多空間來顯示內(nèi)容并允許他們創(chuàng)造真正身臨其境的體驗(yàn),但在為此設(shè)備進(jìn)行設(shè)計(jì)時(shí)需要考慮以下幾點(diǎn):

海淀網(wǎng)站建設(shè)

海淀網(wǎng)站建設(shè)

1、3倍圖像比例因子

iPhone X 具有3 倍圖像比例因子(@1x、@2x 和@3x)。當(dāng)需要光柵圖像時(shí),確保在應(yīng)用程序圖像分辨率目錄中包含2x 和3x 圖像分辨率。此外,建議將SVG 用于需要高分辨率縮放的字形和其他平面圖形,因?yàn)樗鼈兣c分辨率無關(guān)。

2. 新的顯示尺寸:更大的屏幕空間,更多的內(nèi)容

iPhone X 顯示尺寸為375pt 寬* 812pt 高。在3x 顯示中,這等于1,125 px @3x 寬度* 2,436 px @3x 高度。在縱向模式下,iPhone X 的顯示屏寬度與iPhone 6、iPhone 7 和iPhone 8 的4.7 英寸屏幕寬度相匹配,因此顯示的信息量與這些設(shè)備的窄尺寸沒有區(qū)別。但顯示器有不同的高度:812pt 比4.77t 高145pt,高達(dá)4.7"。iPhone X 的額外高度為內(nèi)容提供了20% 的空間。

3.創(chuàng)建背景圖像時(shí)考慮縱橫比

在設(shè)計(jì)背景圖片時(shí)請(qǐng)記住,iPhone X 的縱橫比也不同于4.7“顯示器”。為iPhone 的816:9 寬高比創(chuàng)建的背景圖形需要調(diào)整以滿足iPhone X 的技術(shù)要求。為避免負(fù)面結(jié)果,無論顯示器的縱橫比如何,最好構(gòu)圖使關(guān)鍵視覺信息保持可見。

4.不要將元素放置在顯示器的邊角處

圓角為設(shè)計(jì)人員帶來了另一個(gè)挑戰(zhàn):太靠近視口邊緣的每個(gè)元素都可能被傳感器外殼卡住或覆蓋。重點(diǎn)是嵌入控件和其他元素來避免這種情況。

5.使用安全區(qū)域布局來顯示內(nèi)容

安全區(qū)域布局有助于避免在定位內(nèi)容和控件時(shí)忽略系統(tǒng)UI 元素。在我

Phone 8上,安全區(qū)和視屏一樣大,沒有顯示任何條。在iPhone X上,安全區(qū)域布局是從屏幕邊緣的頂部和底部嵌入的,即使屏幕上看不到任何條。這有助于防止接口元素被剪切或覆蓋。
不過,安全區(qū)域有兩個(gè)例外:應(yīng)用程序的背景和垂直滾動(dòng)視圖。垂直可滾動(dòng)視圖(如表和集合)應(yīng)該一直延伸到顯示的底部,并延伸到邊緣,而不是局限于安全區(qū)。
6、不要擔(dān)心本機(jī)組件
如果你的應(yīng)用程序使用本地的iOS組件(比如導(dǎo)航條、表格、集合視圖、標(biāo)簽條等等),而你擔(dān)心它們將如何被應(yīng)用到iPhone X上,別擔(dān)心!它們將被自動(dòng)嵌入和定位。
HOME指標(biāo)
iPhone X改變了iPhone的互動(dòng)基礎(chǔ)之一,home鍵現(xiàn)在是遺產(chǎn)。在iPhone X用戶想要訪問應(yīng)用程序切換器或主屏幕之前,點(diǎn)擊了iPhone的Home鍵就可以做到這一點(diǎn)。對(duì)于iPhone X來說,當(dāng)用戶沿著屏幕的底部邊緣向上滑動(dòng)時(shí),也可以進(jìn)行同樣的操作。刷卡是新的點(diǎn)擊。
為了將home鍵替換為一個(gè)手勢(shì)并使其直觀,蘋果在屏幕底部邊緣的一個(gè)指示器的格式中提供了關(guān)于交互的信息;位于屏幕底部的一行。這個(gè)指示器顯示在iPhone X應(yīng)用程序的界面上。在設(shè)計(jì)應(yīng)用程序時(shí),你需要考慮到這一點(diǎn)。
注意底部的白線,這是新的家庭指標(biāo)。它會(huì)通知你,你可以向上滑動(dòng)屏幕回到你的主屏幕或進(jìn)行多任務(wù)處理。
7、避免在HOME指示符附近放置交互元素
最好避免在靠近指示器的地方放置交互元素,比如按鈕,否則會(huì)有與Home指示器重疊的風(fēng)險(xiǎn)。只需在home指示符附近留下一些空白,將不可滾動(dòng)的元素放置在安全區(qū)域內(nèi)。
8、請(qǐng)勿特別注意HOME指示
home指示燈不是裝飾性的。不要掩蓋它,也不要引起特別的注意。
9、使用自動(dòng)隱藏全屏體驗(yàn)
當(dāng)呈現(xiàn)視頻等全屏視覺內(nèi)容時(shí),可以使用自動(dòng)隱藏來隱藏主指示器。
切口區(qū)域
notch這個(gè)區(qū)域可能是iPhone X設(shè)計(jì)中最有爭(zhēng)議的部分。有些人認(rèn)為它具有視覺吸引力;其他人認(rèn)為這是丑陋的。但作為設(shè)計(jì)師,我們可以利用凹槽區(qū)可用的屏幕空間。
10、不要掩蓋陷阱
一些設(shè)計(jì)師試圖讓iPhone X上的體驗(yàn)看起來像iPhone 8上的體驗(yàn);他們把黑條放在頂部,讓它看起來像一個(gè)老式的應(yīng)用程序。最好避免這種情況——這只會(huì)讓你的應(yīng)用程序與iPhone x上的其他應(yīng)用程序感覺不一致。
11、不要隱藏狀態(tài)欄
如果你現(xiàn)在將狀態(tài)欄隱藏在你的應(yīng)用中,最好重新考慮這個(gè)決定。因?yàn)闋顟B(tài)欄區(qū)域比較高(以前是20pt高,現(xiàn)在是44pt),所以你有更多的屬性來顯示你的內(nèi)容。添加對(duì)用戶有用的內(nèi)容。
本文章來自于:海淀網(wǎng)站建設(shè)
?

我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對(duì)接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!

本文章出于推來客官網(wǎng),轉(zhuǎn)載請(qǐng)表明原文地址:https://www.tlkjt.com/web/11765.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部