深圳APP開(kāi)發(fā)服務(wù)商就UI制作抄摘本文，希望能對(duì)您的項(xiàng)目設(shè)計(jì)前期工作有所 為幫助。iPhone X進(jìn)行APP前端設(shè)計(jì)的時(shí)候，和以往截然不同的屏幕和交互方式，會(huì)使得APP前端設(shè)計(jì)師面臨一些全新的挑戰(zhàn)。當(dāng)然，全新的設(shè)計(jì)，在很多時(shí)候還會(huì)給設(shè)計(jì)師一些新的機(jī)遇。
在今天的文章當(dāng)中，我將會(huì)分享一些為iPhone X做設(shè)計(jì)的技巧和建議，這些建議能夠讓 iPhone X 上的APP前端設(shè)計(jì)更棒。別忘了，接下來(lái)的9月將會(huì)迎來(lái)新的iPhone，設(shè)計(jì)師將會(huì)和擁有Home 鍵的iPhone 越來(lái)越遠(yuǎn)，帶有劉海的全面屏，將是今后設(shè)計(jì)師設(shè)計(jì)時(shí)候的主戰(zhàn)場(chǎng)。
A、屏幕顯示
iPhone X 擁有一塊超高分辨率、邊角圓潤(rùn)的 Super Retina 顯示屏，分辨率為 1125x2436px，雖然它為設(shè)計(jì)人員留下了更多的顯示空間，并且能夠?yàn)橛脩籼峁└由砼R其境的用戶體驗(yàn)，但是在設(shè)計(jì)UI的時(shí)候，設(shè)計(jì)師依然需要考慮下面的問(wèn)題：
1、3x 圖片尺寸
iPhone X 上所采用的圖片是 3x 的比例，當(dāng)你在使用圖片和其他的視覺(jué)化素材的時(shí)候，請(qǐng)確保包含了2x 和 3x 分辨率的素材。此外，對(duì)于高分辨率的字符和平面素材，有矢量的 SVG 素材是最好的，這樣就規(guī)避了分辨率上可能出現(xiàn)的問(wèn)題。
2、新的顯示尺寸意味著更多的空間和內(nèi)容
iPhone X 的屏幕顯示尺寸，寬度為 375pt，高度為 812pt，由于是3x 的顯示，換算為px 為 1125 x 2436 px，在縱向上，iPhone X 的顯示屏的寬度和以往的iPhone 6 、iPhone 7 和 iPhone 8 的4.7 英寸屏幕顯示的寬度是一致的，因此，在橫向上顯示的信息量應(yīng)該和以往其他的機(jī)型是沒(méi)有差異的。差異主要出現(xiàn)在高度上，812pt 的高度比以往非全面屏要高出 145pt，這使得 iPhone X 多出了差不多 20% 的額外空間。
3、注意控制背景圖片的高寬比
和以往的 iPhone 的屏幕尺寸比例不同，iPhone X 的的高寬比已經(jīng)不再是 16:9 的比例，而是接近于 19.5:9，在選取背景圖片的素材的時(shí)候，要注意不要讓圖片中的視覺(jué)主體和關(guān)鍵信息被屏幕切掉了，注意關(guān)鍵信息在這個(gè)屏幕比例下能夠得體地顯示（比如不要讓上下有過(guò)多的留白）。
4、不要在屏幕邊緣放置控件和元素
伴隨著全面屏的另外一個(gè)問(wèn)題，就是用戶在交互的過(guò)程中，會(huì)誤觸到屏幕邊緣的元素，如果用戶有帶手機(jī)殼的習(xí)慣，元素也可能因?yàn)樘^(guò)于靠近邊緣的保護(hù)殼，而無(wú)法被用戶有效、快速地觸發(fā)。總之，盡量讓元素控件出現(xiàn)在屏幕易于交互的主要區(qū)域。
5、使用安全區(qū)域來(lái)顯示內(nèi)容
在安全區(qū)域內(nèi)來(lái)構(gòu)建布局，可以確保內(nèi)容的可交互性，也避免了系統(tǒng)組件和UI元素的重疊的狀況。在iPhone 8這樣有Home鍵的手機(jī)的界面中，較寬的邊框和Home鍵的存在，讓標(biāo)準(zhǔn)的矩形屏幕整個(gè)都是安全的交互區(qū)域。但是iPhone X不一樣，底部有虛擬的Home Bar，頂部屏幕上的“劉?！背休d了攝像頭，整體是異型，如果設(shè)計(jì)的時(shí)候這個(gè)區(qū)域和底部放置控件的話，會(huì)被蓋住。兩者之間的區(qū)域是安全的。
而內(nèi)容呈現(xiàn)的時(shí)候，有兩種情況是例外的，一種是較長(zhǎng)的垂直滾動(dòng)的內(nèi)容，通過(guò)滑動(dòng)瀏覽可以完全展示，另外一種是背景圖片，因?yàn)椴簧婕暗浇换?，因此不?huì)被影響。
6、不要操心原生UI組件
如果你所設(shè)計(jì)的APP 全部都是官方設(shè)計(jì)素材中的原生UI組件（比如導(dǎo)航欄、表格、標(biāo)簽欄什么的），那么你不用擔(dān)心它們和你的界面不匹配，它們一定會(huì)恰到好處地運(yùn)用到界面當(dāng)中。
B、Home Bar 指示器
從 iPhone X 開(kāi)始，iOS 系統(tǒng)的基礎(chǔ)交互隨著硬件的改變，而發(fā)生了巨大的改變，Home 鍵成為了歷史，而交互方式也開(kāi)始更加依靠手勢(shì)交互的驅(qū)動(dòng)。比如之前的單擊Home鍵回到主頁(yè)面的交互方式就被手勢(shì)操作給替代了，用戶只需要從屏幕底部向上滑動(dòng)就能回到主頁(yè)。
滑動(dòng)是新的點(diǎn)擊。
雖然觸發(fā)的方式主要是屏幕底部邊緣觸發(fā)，但是視覺(jué)上加上了Home Bar 指示器，會(huì)讓人時(shí)刻意識(shí)到這個(gè)交互的存在，而在進(jìn)行UI和APP設(shè)計(jì)的時(shí)候，需要考慮到這個(gè)控件。
7、避免在Home Bar 指示器周?chē)胖媒换ピ?/span>
之前也提到過(guò)類(lèi)似的問(wèn)題，避免在指示器周?chē)胖媒换ソM件，避免出現(xiàn)交互組件和Home Bar 之間的重疊，導(dǎo)致交互上的沖突。即使是靠近，也最好保持適當(dāng)?shù)木嚯x，避免誤觸。
8、不要過(guò)于在意 Home Bar 指示器
Home Bar 是一個(gè)使用頻率比較高的常用組件，不要過(guò)度裝飾，也不要在設(shè)計(jì)上過(guò)于強(qiáng)調(diào)，不要隱藏它，盡量不要讓用戶特別在意它。
9、借助自動(dòng)隱藏的功能，創(chuàng)造全屏體驗(yàn)
在展現(xiàn)視頻或者其他強(qiáng)調(diào)視覺(jué)性的內(nèi)容之時(shí)，可以借助自動(dòng)隱藏Home Bar 指示器的功能，來(lái)創(chuàng)造更加沉浸式的體驗(yàn)。
C、劉海區(qū)域
蘋(píng)果官方是將屏幕頂部放置攝像頭的位置稱為 Notch Area，不過(guò)大家通常會(huì)稱之為屏幕“劉海”，這個(gè)表述非常形象。有些人認(rèn)為它很有吸引力，有的則覺(jué)得它很難看。但是作為設(shè)計(jì)師，我們可以合理地借助這個(gè)區(qū)域來(lái)進(jìn)行設(shè)計(jì)。
10 、不要掩蓋劉海區(qū)域
有些設(shè)計(jì)師會(huì)力圖借助設(shè)計(jì)，讓這個(gè)區(qū)域看起來(lái)沒(méi)有那么顯眼，讓iPhone X 看起來(lái)沒(méi)有劉海，比如在背景的頂部增加一個(gè)條狀的黑色背景，讓頂部一條看起來(lái)是全黑的。這種強(qiáng)迫癥式的審美并不一定貼合每個(gè)人的喜好，盡量避免這種情況，因?yàn)榱硗庖环矫嫠鼤?huì)讓你的iPhone X上的體驗(yàn)像是被降級(jí)到 iPhone 8上面，并且和其他的APP 體驗(yàn)不一致。而你所設(shè)計(jì)的APP 和游戲應(yīng)當(dāng)完整地填滿整個(gè)屏幕。
11、不要隱藏狀態(tài)欄
APP 中的狀態(tài)欄為用戶提供了許多基礎(chǔ)的信息，這些對(duì)于用戶而言是至關(guān)重要的。雖然狀態(tài)欄和以往版本的iOS系統(tǒng)相比更高了（之前是20pt高，現(xiàn)在是44pt），隱藏了之后確實(shí)能夠顯示更多的內(nèi)容，但是和整個(gè)界面的尺寸相比，提升并不明顯。除非是在特定的需求之下（營(yíng)造非常深入的沉浸式體驗(yàn)），盡量不要隱藏狀態(tài)欄。
One more thing
援引自iFanr 的消息：今年新 iPhone 將不會(huì)被命名為“iPhone 9”，而是出現(xiàn)一款名字直接為“iPhone”的產(chǎn)品。具體來(lái)說(shuō)，新的三款 iPhone 中最大的一款將被命名為 iPhone XS Plus，5.8 英寸的機(jī)型就是 iPhone XS，它們都是原版 iPhone X 的 S 系列。而 6.1 英寸的 iPhone 將是一款更便宜的機(jī)型，將命名為 iPhone，作為本系列的入門(mén)級(jí)產(chǎn)品。每年9月初的發(fā)布會(huì)到現(xiàn)在也就30來(lái)天，新的iPhone 距離我們已經(jīng)很近了。以iPhone X 為代表的新iPhone 將會(huì)將手勢(shì)為主的新交互徹底貫徹下去，開(kāi)啟下一個(gè)交互的時(shí)代。這無(wú)論是對(duì)于設(shè)計(jì)師還是用戶，都是非常重要的轉(zhuǎn)變，做好準(zhǔn)備吧。深圳APP開(kāi)發(fā)服務(wù)商博納網(wǎng)絡(luò)編輯整理。
