iPhone 12來了,設計師們準備好適配了嗎?

2022-01-04 歪設計

10月13號,蘋果舉辦了年度的發布會並發布了四款新iPhone,發布會的重頭戲是介紹新的設計和新的功能特色,這裡簡單總結下:

我覺得這次的設計是iPhone5/iPad Pro機型的回歸,我個人是非常喜歡那套設計的,喜歡它的小巧和功能。無線充電技術可以讓未來的蘋果筆記本電腦(基於ARM)也同樣可以具備快捷充電方式。

適配難度正在發生變化

如果設計師有做過移動端應用或響應式網頁設計的話,可能會知道,有越來越多的蘋果設備尺寸需要適配。下圖是目前sketch和Figma上的畫板預設。

但這些新款的iPhone讓手機尺寸變得更加複雜,還記得賈伯斯介紹帶視網膜屏幕的iPhone4嗎?

他當時特別提到的一點是,iPhone4手機的基礎解析度和其他iPhone手機都是一樣的,都是320x480,只是像素密度高了2倍。

那是一個偉大而又純粹的時期,只需要設計320x480的設計稿,輸出2x的視網膜屏幕尺寸就滿足要求了。

這是非常「蘋果」的——一條清晰,容易遵循的道路,完全是為了消除不必要的複雜性。

來到2020年

看看上圖中一堆複雜的尺寸,我甚至還沒有把第一代的iPhone SE(320x568)放進來(點開可以看大圖)

因為有了這些各異的解析度,增加了非常多的複雜性,對吧?

那應該要如何處理呢?

在iPhone12和12Pro的情況下,根據下面這條twitter,我們得到了新的390寬度。

但iPhone 12 Mini的解析度降到了375x812,和iPhone x一樣。這種裡的問題是,它的實際解析度不再是3x,而是2.88x。當然,對於更小的屏幕,它不會造成太大的問題,因為如何顯示對象的大多數實際計算都是在代碼中完成的。

Ukiyo——我們正在開發的一款為創意人士量身打造的應用程式,可以在目前所有的iphone手機上看到。


所以要如何進行設計?

下面的設計示例,它並不理想,特別是頂部和底部的間距需要單獨適配。在一些手機上,主按鈕需要滾動,所以我們必須調整整個卡片和字體大小,以使得這些設備也能很好的兼容。

為特定的機器解析度進行必要的調整,左邊只放大圖片是不可取的

當然,對於程式設計師來說,直接使用Swift代碼來調試UI會簡單很多,但在設計階段,我們還是想比較直觀的看在不同的設備上會是什麼樣子。可以使用sketch mirror在手機上預覽它,設計側其實能做更多的工作。

到目前為止,我們需要做2個尺寸的設計稿,分別是375x812的iPhone X大小以及更大的414x896。它覆蓋了大多數手機,開發簡單調整布局,就能適配其他少數設備上更多的內容。

但對於現在的新尺寸390和428的寬度呢?

我們應該簡單地把這些手機的設計放大嗎?

答案是視情況而定。在相同的內容量情況下,UI可以保持相同的尺寸,而內容本身可以被放大,質量會更高。

但是僅僅是把每一個設計都放大可能會失去我們在畫面中做好的版式設計,畫面可能會失去平衡。設計元素可能開始變得太大、太小、太寬。

另外,一些上下縮放會導致非常細的線條出現不好的鋸齒效果,因為這都是基於像素近似的,所以如果你使用的是非常細/很淺的字體,可能會丟失一些易讀性。

蘋果在iOS7之後解決了這個問題,它引入了更粗的字體,並去掉了大多數太細的字體。但是有些設計師喜歡這些細字體,因為他們把它們理解為「精緻的」和「好的設計」。

如果我們試圖將同樣的「滾動高度」對應到這些手機上,那麼我們會得到一些未使用的空間,當然這不是最佳適配策略。直接這樣拉通對比有點誇張,因為有些手機有不同的長寬比,這只是為了顯示一個普遍的縱向適配原則。

摺疊線

摺疊線是一個比較經典的概念,一條無形的線將我們通常在一個屏幕上看到的東西(沒有滾動)和其他設計分開。其理念是,所有最重要的元素都應該「放在最上面」以便更容易地被看到。

有一些觀點認為「人們不會滾動」,這在現代聽起來有點傻(數據顯示,我們平均每天在手機上能滾動300米)。

但它可能會影響到一些電商項目,在這些項目中,首屏是需要精心設計的,以便在一個屏幕上顯示儘可能多的相關信息和提高購買率。當然,我們可以創建一個覆蓋按鈕,但這並不能解決中斷特定手機信息的問題。

所以我想對於電商來說,通過將同樣的設計升級到更大的尺寸,實際上可能更容易測試體驗,因為這將使我們對人們在所有設備上看到的東西有一個更一致的看法。

一個44pt高(1@x下等同於44px高)的按鈕在2@x時為88px高,在320x480視口中統一44pt渲染。

總結


我錯過了兩個基於同一個視口的解析度時期。它使體驗設計變得更容易,而且也很好測量。

隨著界面的碎片化,iOS正慢慢地變成Android的樣子——大量的解析度、高寬比和設備增加了複雜性。

原文:https://uxdesign.cc/iphone-12-vs-designers-ca8bac776dad

作者:Michal Malewicz

相關焦點

  • 都2020啦,還不會做iphone12的適配嗎?
    適配難度正在發生變化如果設計師有做過移動端應用或響應式網頁設計的話,可能會知道,有越來越多的蘋果設備尺寸需要適配。Ukiyo——我們正在開發的一款為創意人士量身打造的應用程式,可以在目前所有的iphone手機上看到。所以要如何進行設計?下面的設計示例,它並不理想,特別是頂部和底部的間距需要單獨適配。在一些手機上,主按鈕需要滾動,所以我們必須調整整個卡片和字體大小,以使得這些設備也能很好的兼容。
  • 蘋果12系列如約而至,仿生A14+ios14 支持5G,你準備好了嗎?
    它來了,它來了,庫克帶著「12」朝你走來了!iphone12系列最近,有關於蘋果新機消息越來越多,許多果粉都共同期待著這場發布會,但據很多媒體猜測,該發布會時間可能會定在10月13日。但是消息公開後不久,根據外媒在網絡上公開的信息,告知消費者iphone 12系列將有iphone 12 mini版,將比iphone 12更小,作為一款入門機。在網絡上也有許多科技媒體曝光了iphone 12 系列的參數,這讓很多好奇的消費者吃了一顆定心丸。
  • iPhone 9真的要來了,價格或不到3K,值得入手嗎?
    例如這次:iPhone 9真的要來了,價格或不到3K,值得入手嗎?這款「iphone9」最大的優點無疑是搭載了最新的A13晶片,再加上最新的ios系統,性能上可以說是強得飛起。另外這款「iphone9」還重新使用了home鍵,搭載了指紋識別,配備了雙揚聲器,對於一些小夥伴來說可以說是福音。
  • 新款iPhone SE開售 搜狗輸入法第一時間全面適配
    今天,新款iphone SE正式開售,裝備旗艦級A13處理器、主打高性價比的第二代SE在發布之初便引發熱烈討論。在本次第三方APP的適配競速賽中,擁有4.64億日活用戶的搜狗輸入法率先交上了令人滿意的答卷。
  • 還等iphone 12嗎?這款性價比最高的蘋果手機,它不香嗎
    當然是 iPhone SEiPhone SE 跟 iPhone 8 甚至是 iPhone 11 還有即將發布的 iphone 12相比又有什麼差異?A 13仿生晶片特別的,就是他裡面的核心用了跟 iPhone 11 Pro 一樣,是旗艦級的 A13 仿生晶片,當然跟即將推出的 iphone 12 A14仿生晶片差一些,我認為A13夠用但是,放長遠來看,以 A13 仿生晶片的效能來說,iPhone SE
  • iPhone 12發布!網友狂吐槽:漲價!竟然沒有充電頭、耳機……
    iPhone 12系列全系支持5G,美國版iPhone 12 Pro還支持5G毫米波頻段。5G對國內用戶來說直接就能用,但問題來了!特不靠譜不是不支持5G嗎?建了多少5G基站啦?不是坑國外用戶嗎?而且還取名「海藍色」,設計師確定看過真正的海藍色嗎?可以來天津看看什麼叫真正的海藍色!真的是一個費盡心思調色,一個有點隨便糊弄出來的顏色……
  • YouTuber用蘋果iPhone 12 Pro 試玩《原神》:輕微卡頓
    知名 YouTuber 「講究哥」@TheRelaxingEnd 今日分享了 iPhone 12 和 iPhone 12 Pro 的另類開箱視頻。  該 YouTuber 所購買的機型是一部 256GB 的 iPhone 12 和一部 6GB + 512GB 的 iPhone 12 Pro,目前國行售價分別為 7599 元和 11099 元。  值得一提的是,該 YouTuber 所測試的遊戲均為目前美國市場最熱門的幾款,雖然《原神》在國內風評較差,但在海外關注度頗高。
  • 三分鐘搞懂,iPhone 12發布後的設計尺寸調整
    因此,設計師通常說的手機適配、尺寸適配常指邏輯像素適配。通過圖表可知,在iPhone 12發布前,市面上的iPhone共有6種不同的解析度需要完成適配。那麼iPhone 12又帶來哪些變化呢?(其中iPhone 12和iPhone 12 Pro的物理解析度相同,故合併看待)但在設計層面,iPhone 12系列四款手機,只為設計師增加了1170x2532、1284x2778 兩種新的設計尺寸。
  • 「雲」大俠們,準備好出發了嗎~
    《我的俠客》上線至今,已經更新優化了很多地方,俠客江湖也變得更加豐富多彩~酒館老闆娘每天都會為大俠們精心準備小禮物,只等你上線領取。大俠若是在【俠客行】裡拯救阿月,就能將角色卡、殘章、寵物等豐厚獎品全部收入囊中!
  • 張雲雷帶著《牽掛》來了,丫頭們準備好了嗎?
    今天他的歌手們夢實現了,也將走向更大的舞臺,盼了一年的新EP《牽掛》來了!好在愛他的人是真愛,儘管整首歌「提前上線」但是丫頭們依然給他一個圓滿結局!本人內心想的是:銷量不好你們想盡辦法嘲笑,銷量好又扯到行業悲哀,中國馳名雙標是你家開的吧。
  • 星星們,今晚你們準備好了嗎?
    149個獎項榮膺最受歡迎男歌手累積33次之多內地主流音樂頒獎禮最受歡迎男歌手大滿貫得主張杰的演唱會,向來都是一場視聽享受完美現場live、絢麗舞美、神秘嘉賓助陣張杰的實力,從來無需質疑星星們的到場為這場演唱會增色不少全場也必定是一水兒的藍色應援
  • 又省了購買新IPhone的錢,蘋果6S更換一塊電池 修修補補再戰3年
    iphone6s換電池,選什麼比較好的問題。對於這個問題,很多對於「古董機」iphone 6s的朋友,都有一種情懷,這是蘋果公司最熱賣的一款產品之一,很多朋友都問了,iphone6s不知道能不能堅持到5G時代。
  • 直播所需的設備,你都準備好了嗎?
    -直播帶貨•網紅孵化•社交娛樂•商家拓粉•跨行生態-全民直播時代來襲直播這個看似沒有門檻的行業成了很多人瞄準的創業方向然而,你知道開播之前需要做好哪些準備工作嗎iphone 11 64G以上型號的手機、或者華為P30等手機比較適合用來直播,手機配置最低不要低於iphone X。特別要注意的是,儘量選擇色差小的手機,比如iphone,這樣可以方便主播及時查看物品在屏幕中所呈現出來的色彩有沒有色差。手機支架,是為了保證直播時畫面的穩定。
  • 準備換手機是買iphone11好,還是再等12呢?
    每天都有分享,完全是免費訂閱,請放心關注                                                                                     準備換手機是買iphone11好,還是再等12呢?這個問題的核心是,換手機是買蘋果11好,還是等蘋果12好?
  • iphone 12跌破發行價 雙11是華為打敗蘋果的分水嶺嗎?
    撰文/藍科技曾經通宵排隊買iphone的「盛景」,在中國或再難重現。如果說,將歷年的iphone系列做一個對比來看,剛剛發布的iphone 12無疑是最慘的系列。作為蘋果第一部5G手機,本應在手機市場上引起「軒然大波」,然後這個被眾多業內人士都看好的iphone 12,卻在發布後的短短幾天便跌破了發行價。正所謂屋漏偏逢連夜雨,就在iphone 12破發前後,蘋果也交出了一份「不符合」常理的財報。根據蘋果發布2020財年第四財季(7-9月)業績顯示,蘋果營收為647億美元,營收略高於去年同期。
  • iPhone 8最新爆料來了,新功能讓買了i7的人瞬間崩潰…你腎還好嗎?
    iPhone 8要來了!iPhone 8要來了!(iphone 8 視頻曝光 請戳 )前段時間iPhone8最新外形曝光,這一次,iPhone8真的要來了!在今年9月17日發布新機!據悉,臺積電、堆疊式類板(Substrate-like PCB)以及電池的供應商們都已整裝待發準備好投入6月量產蘋果手機各自零部件工作
  • iphone 11雙卡雙待好用嗎?使用了這些天的iphone感覺怎麼樣
    【iphone 11雙卡雙待好用嗎?使用了這些天的iphone感覺怎麼樣】相對於iphone XR來說,Iphone11這款手機可謂提升相對較多。特別是在它的拍照能力方面,採用的是雙1200萬的鏡頭,整體的手機拍照效果有了質的提升,並且在續航方面也能夠保證iphone XR一貫的優勢,整體的性能也符合A13處理器的特性,綜合能力確實可圈可點。但是,對於這款手機,它依然存在幾個非常突出的問題。我們可以和大家一起聊一聊:1.信號表現確實令我們感覺無奈。
  • 熟悉的蘋果論壇|威鋒網客戶端最新版-已適配iPhone X
    還記得那時候我還在上學、我美化完我的iPhone我會很自戀的問後桌的女生:「你看我手機弄成這樣好不好看?」,然後她卻會回答:「好看!能教我怎麼免流嗎?我流量不夠用!」然後我就一臉黑線的幫她搞免流……放兩張很久很久以前搞的美化,當年用的設備是iPhone 5C。
  • iPhone越獄ios10.0.1-10.2真的要來了?
    3、12月5日推文:Our team has been working hard on the Zìyóu companion app - a hub to download pirated iOS applications
  • iPhone 12 要來了,四種機型該如何選擇,只需看這三個不同點
    iphone 12 要來了,對於現在手裡還是 iPhone 6 或是 iPhone 7 的釘子戶,無疑是最好的出手時機。手裡是 iphone 8 或 iphone X 的用戶,感覺還可以撐兩年,物盡其用,才能發揮它最大的價值。