<del id="6wc2k"><div id="6wc2k"></div></del>
<label id="6wc2k"><big id="6wc2k"><del id="6wc2k"></del></big></label>
    <label id="6wc2k"></label><del id="6wc2k"><div id="6wc2k"></div></del><del id="6wc2k"></del><delect id="6wc2k"></delect>
    <label id="6wc2k"></label>
        <label id="6wc2k"><div id="6wc2k"></div></label>
        <label id="6wc2k"><div id="6wc2k"><label id="6wc2k"></label></div></label>
                  <delect id="6wc2k"></delect>

                    如何為IPHONE X設計

                    發布時間:2018-08-08 17:10:38訪問人數:作者:素馬設計

                    為iPhone X設計將會帶來一些新的挑戰,但同時也會帶來一些新的設計機會。在本文中將分享一些建議,幫助您設計在iPhone X上看起來和感覺都很棒的應用程序和游戲。


                    顯示細節


                    iPhone X擁有全新的高分辨率,圓潤,邊緣超級視網膜顯示屏的分辨率1125×2436像素。雖然它給設計師提供了更多的展示內容的空間,并允許他們創造一種真正身臨其境的體驗,但在為這個設備設計時,有以下幾點需要考慮:


                    1、3倍圖像尺度因子


                    iPhone X具有3倍的圖像比例因子(@ 1x,@ 2x和@ 3倍)。當需要光柵圖像時,請確保在應用程序圖像分辨率目錄中包含2x和3倍圖像分辨率。此外,建議將SVGs用于字形和其他需要高分辨率縮放的平面圖形,因為它們是與分辨率無關的。


                    2、新的顯示尺寸:更多的屏幕空間,更多的內容


                    iPhone的X顯示尺寸為375pt寬度* 812 pt高。在3倍顯示中,這等于1,125 px @3倍寬度* 2,436 px @3倍高。在縱向方向上,iPhone X上顯示的寬度與iPhone 6、iPhone 7和iPhone 8的4.7英寸屏幕的寬度相匹配,因此所顯示的信息量與這些設備的窄尺寸沒有任何區別。但是顯示器有不同的高度:812pt的高度高出145pt,高達4.77t的4.7“。 這個額外的iPhone X高度為內容提供了20%的空間。


                    3、在創建背景圖像時考慮寬高比


                    在設計背景圖像時要記住,iPhone X的縱橫比也不同于4.7“顯示”。為iPhone 816:9的縱橫比創建的背景圖形需要調整以滿足iPhone X的技術要求。為了避免負面的結果,最好是構圖使關鍵的視覺信息保持可見,而不考慮顯示的長寬比。


                    4、不要將元素放在顯示的邊緣角落


                    圓角給設計師帶來了另一個挑戰:每一個位置太靠近視口邊緣的元素都可能被傳感器外殼夾住或覆蓋。關鍵是要嵌入控件和其他元素以避免這種情況。


                    5、使用安全區域布局來顯示內容

                    安全區域布局有助于避免在定位內容和控件時忽略系統UI元素。在iPhone 8上,安全區和視屏一樣大,沒有顯示任何條。在iPhone X上,安全區域布局是從屏幕邊緣的頂部和底部嵌入的,即使屏幕上看不到任何條。這有助于防止接口元素被剪切或覆蓋。


                    不過,安全區域有兩個例外:應用程序的背景和垂直滾動視圖。垂直可滾動視圖(如表和集合)應該一直延伸到顯示的底部,并延伸到邊緣,而不是局限于安全區。



                    6、不要擔心本機組件


                    如果你的應用程序使用本地的iOS組件(比如導航條、表格、集合視圖、標簽條等等),而你擔心它們將如何被應用到iPhone X上,別擔心!它們將被自動嵌入和定位。


                    HOME指標


                    iPhone X改變了iPhone的互動基礎之一,home鍵現在是遺產。在iPhone X用戶想要訪問應用程序切換器或主屏幕之前,點擊了iPhone的Home鍵就可以做到這一點。對于iPhone X來說,當用戶沿著屏幕的底部邊緣向上滑動時,也可以進行同樣的操作。刷卡是新的點擊。


                    為了將home鍵替換為一個手勢并使其直觀,蘋果在屏幕底部邊緣的一個指示器的格式中提供了關于交互的信息;位于屏幕底部的一行。這個指示器顯示在iPhone X應用程序的界面上。在設計應用程序時,你需要考慮到這一點。


                    注意底部的白線,這是新的家庭指標。它會通知你,你可以向上滑動屏幕回到你的主屏幕或進行多任務處理。


                    7、避免在HOME指示符附近放置交互元素

                    最好避免在靠近指示器的地方放置交互元素,比如按鈕,否則會有與Home指示器重疊的風險。只需在home指示符附近留下一些空白,將不可滾動的元素放置在安全區域內。


                    8、請勿特別注意HOME指示

                    home指示燈不是裝飾性的。不要掩蓋它,也不要引起特別的注意。


                    9、使用自動隱藏全屏體驗

                    當呈現視頻等全屏視覺內容時,可以使用自動隱藏來隱藏主指示器。


                    切口區域


                    notch這個區域可能是iPhone X設計中最有爭議的部分。有些人認為它具有視覺吸引力;其他人認為這是丑陋的。但作為設計師,我們可以利用凹槽區可用的屏幕空間。


                    10、不要掩蓋陷阱

                    一些設計師試圖讓iPhone X上的體驗看起來像iPhone 8上的體驗;他們把黑條放在頂部,讓它看起來像一個老式的應用程序。最好避免這種情況——這只會讓你的應用程序與iPhone x上的其他應用程序感覺不一致。


                    11、不要隱藏狀態欄


                    如果你現在將狀態欄隱藏在你的應用中,最好重新考慮這個決定。因為狀態欄區域比較高(以前是20pt高,現在是44pt),所以你有更多的屬性來顯示你的內容。添加對用戶有用的內容。



                    贊+1
                    分享:

                    版權:【注明為本站原創的文章,轉載請注明出處與原文地址!本站部分轉載文章能找到原作者的我們都會注明,若文章涉及版權請發至郵箱:office@cnjunnet.cn,我們以便及時處理,可支付稿費。向本站投稿或需要本站向貴司網站定期免費投稿請加QQ:957505575】 更多信息請關注微信公眾號:cnjunnet   十二君微信:webjunnet

                    本文標簽:設計師、iPhone X設計
                    上一篇
                    下一篇
                    域名
                    SEO按天計費
                    域名注冊
                    網站建設
                    欄目熱文
                    相關文章

                    助君網絡 Copyright ? 2012-2019. 未經許可,不可拷貝或鏡像 滬ICP備17004436號

                  1. QQ
                  2. 電話
                  3. 首頁
                  4. 留言
                  5. 返回頂部
                  6. 二级做人爱视频一