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

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

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

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

　　iPhone 12 不同的屏幕尺寸展示

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

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

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

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

　　Sketch and Figma — Apple Devices

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

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

　　iPhone 3gs vs iPhone 4 分辨率

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

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

　　二、歡迎來到2020

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

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

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

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

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

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

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

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

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

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

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

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

　　1. 我們應(yīng)該簡單的放大設(shè)計稿來適配這些手機嗎?

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

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

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

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

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

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

　　2. 折疊線

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

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

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

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

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

　　案例如上

　　五、總結(jié)

　　我錯過了那個基于同一視覺只有兩種分辨率的時代，那個不論是設(shè)計還是測量都比較簡單的年代。

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