• <strike id="2k0e4"></strike>
    <ul id="2k0e4"><tbody id="2k0e4"></tbody></ul>
  • <th id="2k0e4"><menu id="2k0e4"></menu></th>
  • iPhoneX 如何去做前端適配

    隨著iPhoneX的推出,如何做iPhoneX的適配是每個(gè)前端開發(fā)必須考慮的問(wèn)題。當(dāng)年iPhoneX剛上市時(shí),Infocode藍(lán)暢H5開發(fā)團(tuán)隊(duì)正好在給一個(gè)化妝品牌做H5項(xiàng)目,也花了一些時(shí)間熬夜摸索適配問(wèn)題。

    分辨率對(duì)比

    首先我們來(lái)看看iPhone X和其它iPhone的對(duì)比,這樣才好做設(shè)計(jì),來(lái)看看屏幕密度方面,iPhone 6/7/8不存在邏輯分辨率,但Plus機(jī)型和iPhone X 都存在邏輯分辨率。請(qǐng)大家注意!

    iPhoneX適配
    iPhoneX適配

     機(jī)型實(shí)際大小對(duì)比

    別看iPhone X是5.8英寸的屏幕,但是真正的手感卻比Plus小了好多,且只比iPhone 7大了那么一點(diǎn)點(diǎn)的,像靜電這種特別討厭大屏幕的人使用iPhone X也沒(méi)有任何問(wèn)題,媽媽再也不用擔(dān)心在床上看手機(jī)時(shí)啪一下砸臉上啦!

    iPhoneX適配
    iPhoneX適配

    iPhoneX適配

      分辨率產(chǎn)生的設(shè)計(jì)差異

    雖然我們看起來(lái)iPhone X只是長(zhǎng)了不少,但別小瞧長(zhǎng)出來(lái)的那145pt,其實(shí)差別還是很大的。iPhone X的物理分辨率為1125X2436,那么一倍圖是多少呢?375-812pt,那么看起來(lái)屏幕的寬度好像沒(méi)有變化,這樣設(shè)計(jì)師小伙伴們就舒了一口氣了。適配成本和難度都降低了不少。

    Image title

      但是別著急,我們還沒(méi)有算密度,密度才是決定手機(jī)適配困難程度的一個(gè)很大指標(biāo),大家還記得密度計(jì)算的公式嗎?對(duì),就是下面這個(gè),PPI(Pixels Per Inch),就是橫向平方+縱向平方然后開根號(hào)的。

    Image title

      我們看到, 邏輯分辨率下,iPhone X的屏幕密度比Plus 要大,分別為444和401,但是真實(shí)密度,iPhone X比Plus要小,分別是458和489。這個(gè)時(shí)候,我們根據(jù)屏幕密度,就可以知道,其實(shí)他們都是@3x,也就是三倍圖的出圖了。所以,從plus過(guò)渡到iPhone X,適配成本大部分會(huì)交給工程師。

    Image title

      設(shè)計(jì)師要做的-注意安全區(qū)域

    如果說(shuō)屏幕兩側(cè)的安全區(qū)域是任何手機(jī)都需要注意的話(也就是左右兩邊留出適當(dāng)?shù)目瞻祝苊庹`觸,也可以保證視覺效果,具體的留白多少由你的設(shè)計(jì)稿確定,蘋果并沒(méi)有具體規(guī)定是多少)。

    Image title

      那么在iPhone X上,我們還要注意另兩個(gè)重要的安全區(qū)域,就是屏幕上下的兩塊內(nèi)容:上部為“劉海”區(qū)域,只能放一些系統(tǒng)狀態(tài)之類的內(nèi)容,并且劉海區(qū)域需要在設(shè)計(jì)稿中體現(xiàn)出來(lái)。那么屏幕下方,則是很多設(shè)計(jì)師都會(huì)忽略的內(nèi)容,就是一個(gè)虛擬控制條,這跟神奇的條起到了home鍵的作用,因此我們不能讓內(nèi)容和這個(gè)條產(chǎn)生沖突,因此你會(huì)發(fā)現(xiàn)標(biāo)準(zhǔn)的適配過(guò)的應(yīng)用,屏幕下方都留了不少空間。接下來(lái)我們看看世面上的現(xiàn)在已經(jīng)號(hào)稱適配過(guò)的應(yīng)用,哪些做的是對(duì)的,哪些做的有問(wèn)題呢?

    Image title

    很明顯,左邊的淘寶有點(diǎn)夸張,中間的微信適配的不錯(cuò),而最右邊那個(gè),好吧,壓根沒(méi)有適配過(guò)。

    另外我們也可以在這個(gè)截圖中得知,截圖是沒(méi)有劉海出現(xiàn)的哈。

     安全區(qū)域的尺寸?

    在一倍圖設(shè)計(jì)模式下,上方的Status bar的高度為44pt,下方的控制條,請(qǐng)至少留出34pt的高度,注意我說(shuō)的是一倍圖設(shè)計(jì)模式下,單位是pt而非像素。有同學(xué)可能會(huì)問(wèn),那換算成像素怎么換算呢?畢竟iPhone X是三倍圖,那就乘以3就得到實(shí)際像素了。

    Image title

      現(xiàn)在,大部分的適配工作已經(jīng)完成,其實(shí)我們只需要根據(jù)之前的設(shè)計(jì)稿做一些小小的改動(dòng)就好了,是不是很簡(jiǎn)單?

     設(shè)計(jì)師要做的-修改全屏圖片的大小

    由于iPhone X長(zhǎng)出來(lái)一截,因此之前全屏比例的圖片在iPhone X上就會(huì)變形,如下圖所示,因此開發(fā)工程師可能為了適配,將原有的圖片拉大,充滿整個(gè)屏幕,如果不拉大,那么就會(huì)出現(xiàn)下圖第一排最右邊圖的效果,上下白邊非常難看。另一種情況,你的圖片可能會(huì)擠壓變形,那就是第二排圖片的樣子了。

    Image title

      因此,設(shè)計(jì)師要根據(jù)iPhone X的分辨率為啟動(dòng)界面,閃屏圖片,以及一些全屏浮動(dòng)的提示框設(shè)計(jì)一套圖片,好吧,我們的工作量又增大了。

     設(shè)計(jì)師要做的-注意色彩空間

    iPhone X的顯示屏幕使用 P3色彩空間,相比較傳統(tǒng)的sRGB色彩空間,它顯示的色彩會(huì)更加豐富,更加真實(shí),因此設(shè)計(jì)師的老問(wèn)題就來(lái)了“為什么我在Sketch中導(dǎo)出的圖片”放到手機(jī)上顏色不一樣呢?答案就在這里了。不過(guò),靜電覺得這個(gè)問(wèn)題我們是無(wú)解的,畢竟色彩空間是跟隨顯示介質(zhì)走的,比如你的顯示器是一種色彩空間,手機(jī)又是另一種,因此這種隱形的色彩差異,咱們就忽略了吧。

    Image title

      設(shè)計(jì)師要做的-注意視頻的展示方式說(shuō)到這里你一定會(huì)吐槽這個(gè)大劉海,畢竟遮住了一部分的影片內(nèi)容,但你也可以選擇將他們縮小顯示一下,也是個(gè)好主意,劉海部分就不要放什么東西了。以下是蘋果的建議,咱們看看就好。

    Image title

      什么?你說(shuō)王者農(nóng)藥啥樣?來(lái)!看下圖,其實(shí)不適配挺好的。

    Image title

      設(shè)計(jì)師要做的-交互的改變交互的改變?cè)趇Phone X上非常明顯,比如通過(guò)底部控制條上滑返回桌面等等。大家可以看看本文開頭的視頻展示,靜電詳細(xì)的為大家做了介紹。不管你是否擁有新手機(jī),一定要盡快適配它哈,至于人臉識(shí)別之類的黑科技,靜電體驗(yàn)過(guò)覺得它太贊了!識(shí)別速度和指紋識(shí)別是不相上下的,甚至更流暢,像靜電這樣的大汗手,真是福利呀。

    不想看長(zhǎng)文?那直接看總結(jié)!

    1.務(wù)必注意iPhone X的安全區(qū)域,并不是把設(shè)計(jì)稿直接拉長(zhǎng)就可以

    2.注意全屏圖片和視頻的適配

    3.一倍圖下你可以用375-812px來(lái)設(shè)計(jì),這個(gè)兼容iPhone plus,也就是說(shuō),三倍圖要成為主流了?

    4.上Status bar區(qū)域44pt高,下控制條區(qū)域至少34pt高(一倍圖情況下)

    5.注意交互方式的改變所帶來(lái)的影響。

    思考問(wèn)題的小提示:請(qǐng)注意靜電分析問(wèn)題的方式,遇到一件新事物,比如新手機(jī),你可以從它的分辨率,尺寸入手,進(jìn)而推算出其屏幕密度,這樣你可以立馬知道它的一些設(shè)計(jì)規(guī)則是否跟老的機(jī)型有區(qū)別。思考問(wèn)題的方式至關(guān)重要,大家要嘗試從這方面去分析,比如分析靜電的文章,而不是只想要一個(gè)最后的結(jié)果。因?yàn)檫^(guò)程其實(shí)很重要,對(duì)于設(shè)計(jì)師來(lái)說(shuō)更是這樣一個(gè)道理。




    請(qǐng)輸入姓名或昵稱
    如果您有任何疑問(wèn)、需要更多信息或希望與我們建立合作請(qǐng)留言
    =

    本文來(lái)自網(wǎng)絡(luò) 由藍(lán)暢整理,經(jīng)授權(quán)后發(fā)布,本文觀點(diǎn)不代表Infocode藍(lán)暢信息技術(shù)立場(chǎng),轉(zhuǎn)載請(qǐng)聯(lián)系原作者。

    (0)
    Infocode藍(lán)暢Infocode藍(lán)暢
    上一篇 2020年5月31日 下午11:12
    下一篇 2020年6月3日 下午11:02
    主站蜘蛛池模板: 精品日韩亚洲AV无码| 无码人妻久久久一区二区三区| 亚洲中文无码a∨在线观看| 国产精品无码AV不卡| 亚洲国产精品无码久久久| 国产精品xxxx国产喷水亚洲国产精品无码久久一区 | 国产成人无码网站| 日韩精品无码视频一区二区蜜桃 | 国产精品无码av在线播放| 中文字幕无码不卡免费视频| 精品无人区无码乱码大片国产| 日日摸日日碰人妻无码| 国产AV无码专区亚洲AV男同| 国产AV天堂无码一区二区三区 | 亚洲AV无码一区二区三区电影| 熟妇人妻无码中文字幕老熟妇 | 国产AV无码专区亚洲AV漫画| 久久午夜夜伦鲁鲁片免费无码| 久久精品日韩av无码| 无码AV动漫精品一区二区免费 | 精品无码中出一区二区| 亚洲AV无码专区亚洲AV桃| 亚洲精品97久久中文字幕无码| 亚洲AV永久无码精品成人| 免费无码一区二区三区蜜桃| 无码乱人伦一区二区亚洲一| 亚洲精品无码久久毛片波多野吉衣| 人妻av无码专区| 无码精品人妻一区二区三区影院| 日韩免费无码一区二区三区| 无码毛片一区二区三区视频免费播放| 亚洲αⅴ无码乱码在线观看性色| 亚洲欧洲自拍拍偷午夜色无码| 亚洲av中文无码乱人伦在线r▽| 一本无码中文字幕在线观| 未满十八18禁止免费无码网站| 在线观看亚洲AV每日更新无码| 色综合久久无码中文字幕| 50岁人妻丰满熟妇αv无码区| 亚洲AV无码一区二区三区久久精品| 无码国内精品久久人妻麻豆按摩 |