設(shè)計(jì)師如何面對(duì)適配挑戰(zhàn)?

　　隨著這些年社會(huì)的快速發(fā)展，國(guó)內(nèi)的互聯(lián)網(wǎng)公司也不斷的發(fā)展，UI設(shè)計(jì)也慢慢的成為產(chǎn)品中不可缺少的一部分;并且如今產(chǎn)品更新?lián)Q代的速度很快，怎么做到屏幕的適配性也是UI設(shè)計(jì)師需要注意的;本文作者分享了關(guān)于設(shè)計(jì)師如何面對(duì)適配挑戰(zhàn)，我們一起來(lái)了解一下。

　　這篇文章敘述了一個(gè)非常實(shí)際且廣泛的 UI 設(shè)計(jì)難題，在工作中時(shí)常會(huì)發(fā)現(xiàn)程序員交付的產(chǎn)物和設(shè)計(jì)稿相比有些出入，測(cè)試的時(shí)候也時(shí)常會(huì)產(chǎn)生一些適配問(wèn)題;有的時(shí)候同事會(huì)告訴你只需要管好在默認(rèn)屏幕尺寸上的完美展現(xiàn)，有些程序員也會(huì)告訴你無(wú)法做到屏幕全量等比適配。

　　在屏幕尺寸多樣化如此嚴(yán)重的年代里，UI 設(shè)計(jì)師遇到了很多新的挑戰(zhàn);而如何能夠達(dá)成相對(duì)完美的跨屏幕展示是每一個(gè) UI 設(shè)計(jì)師都需要思考的問(wèn)題。

　　iPhone 12 不同的屏幕尺寸展示

　　2020 年 10 月 13 日，蘋(píng)果發(fā)布了年度手機(jī)公告并介紹了四款新手機(jī)。大部分人在討論它們的新設(shè)計(jì)和功能，所以讓我們來(lái)討論點(diǎn)別的：

　　我個(gè)人而言很喜歡它們回歸 iPhone 5 和 iPad Pro 的設(shè)計(jì)風(fēng)格，這是一個(gè)很棒的選擇;我也很喜歡 Pro 的功能，以及可以買(mǎi)到更小的 iPhone，這個(gè)磁吸充電讓我開(kāi)始期待蘋(píng)果筆記本可以使用同樣的方法充電。

　　一、但是在金屬和玻璃的架構(gòu)里有一個(gè)巨大的改變

　　如果你是一個(gè)移動(dòng)端或者響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)師你可能會(huì)知道，蘋(píng)果的移動(dòng)端設(shè)備越來(lái)越多，這就是為什么 Sketch 和 Figma 里的畫(huà)板尺寸預(yù)設(shè)越來(lái)越多的原因。

　　Sketch and Figma — Apple Devices

　　這些新的 iphone 使得布局越來(lái)越復(fù)雜，記得 Steve Jobs 介紹 iphone4 Retina 顯示屏的時(shí)候嗎?

　　他特別提到說(shuō)當(dāng)時(shí)所有的設(shè)備的基礎(chǔ)分辨率是一樣的，都是 320*480，只是在像素密度上提升到了 2 倍。

　　iPhone 3gs vs iPhone 4 分辨率

　　對(duì)于 UI 設(shè)計(jì)來(lái)說(shuō)這真的很棒，你用 320*480 的屏幕布局做一切設(shè)計(jì)，然后導(dǎo)出兩倍圖就行。

　　這就非?！疤O(píng)果”，去除那些不必要的復(fù)雜，一個(gè)清晰簡(jiǎn)單容易 follow 的途徑。

　　二、歡迎來(lái)到2020

　　2020 年 iPhone 不同的設(shè)備尺寸

　　看看這些尺寸，我甚至還沒(méi)有把第一代 iPhone SE 放進(jìn)去;所以說(shuō)，這些 360*780，390*844 的分辨率是哪里來(lái)的?好吧，他們只是主要分辨率屏幕的 1/3 尺寸，但是這會(huì)增加很多很多復(fù)雜的工作量，對(duì)吧?

　　三、所以，我們要如何應(yīng)對(duì)呢?

　　以下面這個(gè) iPhone12 和 12Pro 的項(xiàng)目為例，根據(jù)這條推特文章，我們得到了新寬度 390。

　　但是 iPhone12 Mini 最小的分辨率尺寸是和 iPhone X 一樣的 375*812;這里的問(wèn)題是，他并不正正好好是 iPhone x 屏幕尺寸的 3 倍，而是 2.88 倍;當(dāng)然，在小的屏幕上看來(lái)并不是個(gè)很大的問(wèn)題，大部分如何展示目標(biāo)的實(shí)際運(yùn)算是由代碼實(shí)現(xiàn)的。

　　ukiyo 在不同設(shè)備上的展示區(qū)別

　　四、所以，我們要如何設(shè)計(jì)?

　　從上面這個(gè)例子看來(lái)，我們一般在 Hype4 上做創(chuàng)建;你可以看見(jiàn)這并不理想，特別是上方和下方的間隙需要特殊調(diào)整去提升使用體驗(yàn);在一些手機(jī)上主按鈕要求可以滾動(dòng)，所以我們需要為一些設(shè)備顯示調(diào)整布局上的整個(gè)卡片和字號(hào)以便于使用。(這種問(wèn)題通常是在開(kāi)發(fā)途中需要注意的)

　　沒(méi)有調(diào)整過(guò)設(shè)計(jì)的(左圖) VS 針對(duì)不同的分辨率屏幕進(jìn)行設(shè)計(jì)上的調(diào)整(右圖)

　　當(dāng)然 Swift UI 和代碼技術(shù)的發(fā)展使得這件事變得簡(jiǎn)單了一點(diǎn)，但是在設(shè)計(jì)階段，我們?nèi)匀幌Ｍ麑?shí)際看到設(shè)計(jì)在大屏幕設(shè)備上的展現(xiàn)效果;我們?nèi)匀粫?huì)使用 Sketch Mirror 來(lái)查看設(shè)計(jì)在那些設(shè)備上的表現(xiàn)，這會(huì)使得我們付出更多一些不必要的工作量。

　　ukiyo 屏幕底部沒(méi)調(diào)整的效果(左圖) VS 調(diào)整過(guò)的效果(右圖)

　　我們同時(shí)為 iPhone X 設(shè)計(jì) 375*812 的尺寸和 414*896 的尺寸，這覆蓋了大部分個(gè)人手機(jī)，開(kāi)發(fā)者可以以此設(shè)計(jì)從代碼層面實(shí)現(xiàn)對(duì)其他屏幕的適配。

　　1. 我們應(yīng)該簡(jiǎn)單的放大設(shè)計(jì)稿來(lái)適配這些手機(jī)嗎?

　　答案是，這要看情況——如果是以?xún)?nèi)容為核心的軟件(瀏覽網(wǎng)頁(yè)、觀看視頻、打游戲)，UI 設(shè)計(jì)可以使用固定的尺寸，通過(guò)等比放大來(lái)適配不同的屏幕，放大時(shí)可以采用更高的分辨率。

　　但是，如果只是單純的放大可能會(huì)使得我們專(zhuān)門(mén)為某個(gè)屏幕尺寸所設(shè)計(jì)的字號(hào)失去節(jié)奏感和平衡感，可能會(huì)看上去太大，太小或者太寬。

　　同時(shí)，一些放大或縮小 可能會(huì)導(dǎo)致比較細(xì)的線條上出現(xiàn)鋸齒，這些情況的出現(xiàn)與否完全取決于像素比例;所以如果你在使用細(xì)體字體，你可能會(huì)失去一些可讀性。

　　蘋(píng)果在 iOS7 之后解決了這個(gè)問(wèn)題，推出更粗、更大的字體，并舍棄了大部分的細(xì)體字體;但是，一些設(shè)計(jì)師和產(chǎn)品經(jīng)理更加喜歡細(xì)體，因?yàn)樗麄冋J(rèn)為細(xì)體是更加好的設(shè)計(jì)。

　　以最小屏幕為標(biāo)準(zhǔn)將所有 iPhone 屏幕進(jìn)行高度對(duì)比

　　如果我們?cè)谶@些手機(jī)上嘗試適配同樣的滾動(dòng)高度，我們將留下一些無(wú)用的空間，這并不是一個(gè)最佳的方案;當(dāng)然這里可能有些夸張，就像是有些手機(jī)有不同的長(zhǎng)寬比，這里只展示了一個(gè)普遍的原則。

　　2. 折疊線

　　折疊線是一種比較古老的概念，它意味著一條用來(lái)分割我們視覺(jué)首屏和余下內(nèi)容的不可見(jiàn)的線;概念上而言為了方便被獲取，重要的信息必須在分割線之上。

　　有一種爭(zhēng)論的觀點(diǎn)是“人們不愿意滾動(dòng)屏幕”，在當(dāng)代而言聽(tīng)上去有一些愚蠢(事實(shí)上我們每天平均滾動(dòng)手機(jī)屏幕的長(zhǎng)度是 300 米)。

　　但是，這可能會(huì)影響一些電子商務(wù)項(xiàng)目，例如說(shuō)那些想要把商品有關(guān)信息和立即購(gòu)買(mǎi)按鈕放在同一屏內(nèi)的項(xiàng)目;當(dāng)然，我們可以設(shè)計(jì)一個(gè)全屏浮層式按鈕，但是這不能解決有些特定的手機(jī)會(huì)對(duì)信息進(jìn)行切斷的問(wèn)題。

　　所以我認(rèn)為對(duì)于電子商務(wù)項(xiàng)目而言，最好是直接將同樣大小的設(shè)計(jì)進(jìn)行放大處理，這樣可以給予所有設(shè)備的用戶一個(gè)同樣的使用體驗(yàn)。

　　一個(gè) 44pt 高度(一倍屏幕下 44px 高度)的按鈕在二倍屏上將會(huì)是 88px，看上去和在 320*480 屏幕上的 44pt 按鈕樣式將會(huì)是一樣的。

　　案例如上

　　五、總結(jié)

　　我錯(cuò)過(guò)了那個(gè)基于同一視覺(jué)只有兩種分辨率的時(shí)代，那個(gè)不論是設(shè)計(jì)還是測(cè)量都比較簡(jiǎn)單的年代。

　　在這個(gè)屏幕多樣化比例高的年代，iOS 開(kāi)始走上了和安卓一樣的道路，更多的分辨率、寬高比使得移動(dòng)端設(shè)計(jì)越來(lái)越復(fù)雜化。