10月13日,蘋果公司舉行了一年一度的iPhone發布會,并推出了四款新iPhone。大部分的討論都是關于新設計和功能的,所以讓我們先把這些說出來:
我認為回到iPhone 5/iPad Pro風格是一個很好的選擇,我個人很喜歡這種設計和專業功能,并且本次發布會推出的iPhoneMini同樣相當引人注目。磁性充電技術未來有望在的蘋果筆記本電腦(基于ARM的)實現。
這個金屬和玻璃外殼里面有一個應該關注的問題
如果您是從事移動應用程序(或響應式網站)的設計師,您肯定感同身受,目前Apple移動設備的尺寸已經很多了。?這是Artboard預設在Sketch和Figma中的外觀。
但這些新款iphone讓市場前景變得更加復雜。還記得史蒂夫·喬布斯(Steve Jobs)介紹帶視網膜顯示屏的iPhone 4嗎?
他特別提到,這款手機的基本分辨率與其他所有iphone都是一樣的,都是320x480。只是像素密度高了2倍。
那是UI設計的一個偉大而簡單的時期。你設計了320 x 480點的所有東西,并輸出并適配了2x的設備(640 x 960)。
這是非?!疤O果”的,一條清晰、容易遵循的道路,完全是為了消除不必要的復雜性。
Welcome to 2020
iphone分辨率,這里面甚至沒有包括第一部iPhone SE (320x568)
這些360x780和390x844的分辨率是從哪里來的?它們僅僅是這些手機三分之一的主要分辨率。并且增加很多復雜性,所以如何處理?
根據Steve Troughton-Smith的這條推文,我們得到了新的390寬度。
iPhone 12 Mini的分辨率降低了375 x 812,與iPhone X相同。這種方法的問題在于,它不再是3倍的比例,而是2.88倍。當然,在較小的屏幕上并不會帶來太大的傷害,因為大多數有關如何顯示對象的實際計算都是通過代碼完成的。
Ukiyo—一款為創意人士量身打造的應用程序
那么我們如何設計呢?
上面你可以看到的一個應用程序的設計示例。它不是理想的,因為特別是頂部和底部的間距需要調整手機之間的外觀才能正確顯示。在某些手機上,主按鈕需要滾動,因此我們必須調整這些設備的整張卡片和字體大小,才能完成適配。
為每個特定的分辨率進行必要的調整
當然,Swift UI和其他編碼方面的進步讓它變得更簡單了,但在設計階段,我們仍然想看看它在更大的設備上會是什么樣子。我們也經常在這些設備上使用Sketch Mirror來預覽它,所以這讓我們做了比我們想做的更多的工作。
在此之前,我們的設計對象是375 X 812的iPhone X 的viewport,以及更大的414x896。它覆蓋了大多數獨立的手機,再次基礎上,開發者調整布局以適應其他少數設備上的更多內容(或者只是變大)。
那390和428的寬度呢?
我們是否應該簡單地為這些手機做更大的設計?
答案是,看情況而定。在content consumption(內容消費)的情況下,UI可以保持相對相同的大小,而內容本身可以被放大,或者質量更高(以像素為單位)。
但是,僅僅是放大可能會失去我們在特定大小中設置的字體的良好平衡。內容可能開始看起來太大,太小,太寬。
此外,一些放大或縮小會導致非常細的線條出現鋸齒,所以如果你使用非常細/輕的字體,那么你可能會失去一些易讀性。
在ios7操作系統之后,蘋果公司通過引入更粗、更粗的字體和替代“輕”字體來解決了這個問題。但是一些設計師(甚至更多的產品負責人)喜歡這些輕字體,因為出于某種原因,他們理解它們是“輕”字體是好的設計。
如果我們試圖在這些手機上使用相同的“滾動高度”,那么我們最終會有一些未使用的空間,這不是最佳的。當然,情況可能并不完全是這樣的,因為有些手機有不同的高寬比,這只是個一般原則。
Fold
Fold是一個相當常見的概念,用一條無形的線將我們在一個屏幕上看到的東西(沒有滾動)和設計的其他部分隔開。其理念是,所有最重要的元素都應該在“above the fold”,以便于訪問。
有人說“人們不滾動”,這在現代聽起來有點傻(考慮到我們平均每天滾動300米的事實)。
但它可能會影響一些電商項目,在這些項目中,它是精心設計的,以適應盡可能多的相關信息和一個屏幕上的“立即購買”按鈕。當然,我們可以創建一個覆蓋按鈕,但這并不能解決會刪除特定手機上的信息的問題。
所以我想,對于電商項目來說,通過把同樣的設計做大來測試體驗可能會更容易,因為那樣會讓我們對人們在所有設備上看到的東西有更一致的看法。
一個44P高(在1x的時候也是44像素高)的按鈕在2x的時候僅僅是88像素高,在320x480的viewport渲染的同樣也是44P。
總結
我們都很懷念在同一viewport上只有兩種分辨率的時候。這使得用戶體驗在設計時更加容易,同時也便于測量。
隨著當前的碎片化,iOS正慢慢變得和Android一樣,有很多分辨率,高寬比和設備,這大大增加了設計的復雜性。