堅持為客戶提供有價值的服務(wù)和內(nèi)容

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

商企云 | 2021-06-28 | 分享至:
海淀網(wǎng)站建設(shè)--如何為IPHONE X設(shè)計 為iPhone X設(shè)計將會帶來一些新的挑戰(zhàn),但同時也會帶來一些新的設(shè)計機會。在本文中將分享一些建議,幫助您設(shè)計在iPhone X上看起來和感覺都很棒的應(yīng)用程序和游戲。
顯示細(xì)節(jié)
iPhone X擁有全新的高分辨率,圓潤,邊緣超級視網(wǎng)膜顯示屏的分辨率1125×2436像素。雖然它給設(shè)計師提供了更多的展示內(nèi)容的空間,并允許他們創(chuàng)造一種真正身臨其境的體驗,但在為這個設(shè)備設(shè)計時,有以下幾點需要考慮:
?????????????????????????????????????????????????????????????????????????????????????? 海淀網(wǎng)站建設(shè) 1、3倍圖像尺度因子
iPhone X具有3倍的圖像比例因子(@ 1x,@ 2x和@ 3倍)。當(dāng)需要光柵圖像時,請確保在應(yīng)用程序圖像分辨率目錄中包含2x和3倍圖像分辨率。此外,建議將SVGs用于字形和其他需要高分辨率縮放的平面圖形,因為它們是與分辨率無關(guān)的。
2、新的顯示尺寸:更多的屏幕空間,更多的內(nèi)容
iPhone的X顯示尺寸為375pt寬度* 812 pt高。在3倍顯示中,這等于1,125 px @3倍寬度* 2,436 px @3倍高。在縱向方向上,iPhone X上顯示的寬度與iPhone 6、iPhone 7和iPhone 8的4.7英寸屏幕的寬度相匹配,因此所顯示的信息量與這些設(shè)備的窄尺寸沒有任何區(qū)別。但是顯示器有不同的高度:812pt的高度高出145pt,高達4.77t的4.7“。 這個額外的iPhone X高度為內(nèi)容提供了20%的空間。
3、在創(chuàng)建背景圖像時考慮寬高比
在設(shè)計背景圖像時要記住,iPhone X的縱橫比也不同于4.7“顯示”。為iPhone 816:9的縱橫比創(chuàng)建的背景圖形需要調(diào)整以滿足iPhone X的技術(shù)要求。為了避免負(fù)面的結(jié)果,最好是構(gòu)圖使關(guān)鍵的視覺信息保持可見,而不考慮顯示的長寬比。
4、不要將元素放在顯示的邊緣角落
圓角給設(shè)計師帶來了另一個挑戰(zhàn):每一個位置太靠近視口邊緣的元素都可能被傳感器外殼夾住或覆蓋。關(guān)鍵是要嵌入控件和其他元素以避免這種情況。
5、使用安全區(qū)域布局來顯示內(nèi)容
安全區(qū)域布局有助于避免在定位內(nèi)容和控件時忽略系統(tǒng)UI元素。在iPhone 8上,安全區(qū)和視屏一樣大,沒有顯示任何條。在iPhone X上,安全區(qū)域布局是從屏幕邊緣的頂部和底部嵌入的,即使屏幕上看不到任何條。這有助于防止接口元素被剪切或覆蓋。
不過,安全區(qū)域有兩個例外:應(yīng)用程序的背景和垂直滾動視圖。垂直可滾動視圖(如表和集合)應(yīng)該一直延伸到顯示的底部,并延伸到邊緣,而不是局限于安全區(qū)。
6、不要擔(dān)心本機組件
如果你的應(yīng)用程序使用本地的iOS組件(比如導(dǎo)航條、表格、集合視圖、標(biāo)簽條等等),而你擔(dān)心它們將如何被應(yīng)用到iPhone X上,別擔(dān)心!它們將被自動嵌入和定位。
HOME指標(biāo)
iPhone X改變了iPhone的互動基礎(chǔ)之一,home鍵現(xiàn)在是遺產(chǎn)。在iPhone X用戶想要訪問應(yīng)用程序切換器或主屏幕之前,點擊了iPhone的Home鍵就可以做到這一點。對于iPhone X來說,當(dāng)用戶沿著屏幕的底部邊緣向上滑動時,也可以進行同樣的操作。刷卡是新的點擊。
為了將home鍵替換為一個手勢并使其直觀,蘋果在屏幕底部邊緣的一個指示器的格式中提供了關(guān)于交互的信息;位于屏幕底部的一行。這個指示器顯示在iPhone X應(yīng)用程序的界面上。在設(shè)計應(yīng)用程序時,你需要考慮到這一點。
注意底部的白線,這是新的家庭指標(biāo)。它會通知你,你可以向上滑動屏幕回到你的主屏幕或進行多任務(wù)處理。
7、避免在HOME指示符附近放置交互元素
最好避免在靠近指示器的地方放置交互元素,比如按鈕,否則會有與Home指示器重疊的風(fēng)險。只需在home指示符附近留下一些空白,將不可滾動的元素放置在安全區(qū)域內(nèi)。
8、請勿特別注意HOME指示
home指示燈不是裝飾性的。不要掩蓋它,也不要引起特別的注意。
9、使用自動隱藏全屏體驗
當(dāng)呈現(xiàn)視頻等全屏視覺內(nèi)容時,可以使用自動隱藏來隱藏主指示器。
切口區(qū)域
notch這個區(qū)域可能是iPhone X設(shè)計中最有爭議的部分。有些人認(rèn)為它具有視覺吸引力;其他人認(rèn)為這是丑陋的。但作為設(shè)計師,我們可以利用凹槽區(qū)可用的屏幕空間。
10、不要掩蓋陷阱
一些設(shè)計師試圖讓iPhone X上的體驗看起來像iPhone 8上的體驗;他們把黑條放在頂部,讓它看起來像一個老式的應(yīng)用程序。最好避免這種情況——這只會讓你的應(yīng)用程序與iPhone x上的其他應(yīng)用程序感覺不一致。
11、不要隱藏狀態(tài)欄
如果你現(xiàn)在將狀態(tài)欄隱藏在你的應(yīng)用中,最好重新考慮這個決定。因為狀態(tài)欄區(qū)域比較高(以前是20pt高,現(xiàn)在是44pt),所以你有更多的屬性來顯示你的內(nèi)容。添加對用戶有用的內(nèi)容。 本文章來自于:海淀網(wǎng)站建設(shè)
?
掃二維碼與項目經(jīng)理溝通

7*24小時為您服務(wù)

解答:網(wǎng)站優(yōu)化,網(wǎng)站建設(shè),APP開發(fā),小程序開發(fā),H5開發(fā),品牌推廣,新聞推廣,輿情監(jiān)測等

  非常感謝您有耐心的讀完這篇文章:"海淀網(wǎng)站建設(shè)--如何為IPHONE X設(shè)計",更多內(nèi)容請繼續(xù)瀏覽,我們將為您提供更多參考使用或?qū)W習(xí)交流的信息。我們還可為您提供:網(wǎng)站建設(shè)與開發(fā)、網(wǎng)站優(yōu)化、品牌推廣、APP開發(fā)、小程序開發(fā)、新聞推廣等服務(wù),我們以“降低營銷成本,提高營銷效果”的服務(wù)理念,自創(chuàng)立至今,已成功服務(wù)過不同行業(yè)的1000多家企業(yè),獲得國家高新技術(shù)企業(yè)認(rèn)證,且擁有14項國家軟件著作權(quán),將力爭成為國內(nèi)企業(yè)心目中值得信賴的互聯(lián)網(wǎng)產(chǎn)品及服務(wù)提供商。如您需要合作,請掃碼咨詢,我們將誠摯為您服務(wù)。
我要咨詢
姓名 :
電話 :
文章分類