10月13日,蘋果公司舉行了一年一度的iPhone發(fā)布會所灸,并推出了四款新iPhone讨便。大部分的討論都是關于新設計和功能的育谬,所以讓我們先把這些說出來:
我認為回到iPhone 5/iPad Pro風格是一個很好的選擇,我個人很喜歡這種設計和專業(yè)功能频敛,并且本次發(fā)布會推出的iPhoneMini同樣相當引人注目项郊。磁性充電技術未來有望在的蘋果筆記本電腦(基于ARM的)實現(xiàn)。
這個金屬和玻璃外殼里面有一個應該關注的問題
如果您是從事移動應用程序(或響應式網(wǎng)站)的設計師斟赚,您肯定感同身受着降,目前Apple移動設備的尺寸已經(jīng)很多了。?這是Artboard預設在Sketch和Figma中的外觀拗军。
但這些新款iphone讓市場前景變得更加復雜任洞。還記得史蒂夫·喬布斯(Steve Jobs)介紹帶視網(wǎng)膜顯示屏的iPhone 4嗎?
他特別提到,這款手機的基本分辨率與其他所有iphone都是一樣的发侵,都是320x480交掏。只是像素密度高了2倍。
那是UI設計的一個偉大而簡單的時期刃鳄。你設計了320 x 480點的所有東西盅弛,并輸出并適配了2x的設備(640 x 960)。
這是非常“蘋果”的熊尉,一條清晰罐柳、容易遵循的道路掌腰,完全是為了消除不必要的復雜性狰住。
Welcome to 2020
iphone分辨率,這里面甚至沒有包括第一部iPhone SE (320x568)
這些360x780和390x844的分辨率是從哪里來的?它們僅僅是這些手機三分之一的主要分辨率齿梁。并且增加很多復雜性催植,所以如何處理?
根據(jù)Steve Troughton-Smith的這條推文,我們得到了新的390寬度勺择。
iPhone 12 Mini的分辨率降低了375 x 812创南,與iPhone X相同。這種方法的問題在于省核,它不再是3倍的比例稿辙,而是2.88倍。當然气忠,在較小的屏幕上并不會帶來太大的傷害邻储,因為大多數(shù)有關如何顯示對象的實際計算都是通過代碼完成的。
Ukiyo—一款為創(chuàng)意人士量身打造的應用程序
那么我們?nèi)绾卧O計呢?
上面你可以看到的一個應用程序的設計示例旧噪。它不是理想的吨娜,因為特別是頂部和底部的間距需要調(diào)整手機之間的外觀才能正確顯示。在某些手機上淘钟,主按鈕需要滾動宦赠,因此我們必須調(diào)整這些設備的整張卡片和字體大小,才能完成適配米母。
為每個特定的分辨率進行必要的調(diào)整
當然勾扭,Swift UI和其他編碼方面的進步讓它變得更簡單了,但在設計階段铁瞒,我們?nèi)匀幌肟纯此诟蟮脑O備上會是什么樣子妙色。我們也經(jīng)常在這些設備上使用Sketch Mirror來預覽它,所以這讓我們做了比我們想做的更多的工作精拟。
在此之前燎斩,我們的設計對象是375 X 812的iPhone X 的viewport,以及更大的414x896蜂绎。它覆蓋了大多數(shù)獨立的手機栅表,再次基礎上,開發(fā)者調(diào)整布局以適應其他少數(shù)設備上的更多內(nèi)容(或者只是變大)师枣。
那390和428的寬度呢?
我們是否應該簡單地為這些手機做更大的設計?
答案是怪瓶,看情況而定。在content consumption(內(nèi)容消費)的情況下践美,UI可以保持相對相同的大小洗贰,而內(nèi)容本身可以被放大找岖,或者質(zhì)量更高(以像素為單位)。
但是敛滋,僅僅是放大可能會失去我們在特定大小中設置的字體的良好平衡许布。內(nèi)容可能開始看起來太大,太小绎晃,太寬蜜唾。
此外,一些放大或縮小會導致非常細的線條出現(xiàn)鋸齒庶艾,所以如果你使用非常細/輕的字體袁余,那么你可能會失去一些易讀性。
在ios7操作系統(tǒng)之后咱揍,蘋果公司通過引入更粗颖榜、更粗的字體和替代“輕”字體來解決了這個問題。但是一些設計師(甚至更多的產(chǎn)品負責人)喜歡這些輕字體煤裙,因為出于某種原因掩完,他們理解它們是“輕”字體是好的設計。
如果我們試圖在這些手機上使用相同的“滾動高度”积暖,那么我們最終會有一些未使用的空間藤为,這不是最佳的。當然夺刑,情況可能并不完全是這樣的缅疟,因為有些手機有不同的高寬比,這只是個一般原則遍愿。
Fold
Fold是一個相當常見的概念存淫,用一條無形的線將我們在一個屏幕上看到的東西(沒有滾動)和設計的其他部分隔開。其理念是沼填,所有最重要的元素都應該在“above the fold”桅咆,以便于訪問。
有人說“人們不滾動”坞笙,這在現(xiàn)代聽起來有點傻(考慮到我們平均每天滾動300米的事實)岩饼。
但它可能會影響一些電商項目,在這些項目中薛夜,它是精心設計的籍茧,以適應盡可能多的相關信息和一個屏幕上的“立即購買”按鈕。當然梯澜,我們可以創(chuàng)建一個覆蓋按鈕寞冯,但這并不能解決會刪除特定手機上的信息的問題。
所以我想,對于電商項目來說吮龄,通過把同樣的設計做大來測試體驗可能會更容易俭茧,因為那樣會讓我們對人們在所有設備上看到的東西有更一致的看法。
一個44P高(在1x的時候也是44像素高)的按鈕在2x的時候僅僅是88像素高漓帚,在320x480的viewport渲染的同樣也是44P母债。
總結
我們都很懷念在同一viewport上只有兩種分辨率的時候。這使得用戶體驗在設計時更加容易胰默,同時也便于測量场斑。
隨著當前的碎片化漓踢,iOS正慢慢變得和Android一樣牵署,有很多分辨率,高寬比和設備喧半,這大大增加了設計的復雜性奴迅。