我覺得這次的設計是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