iPhone 12 VS 設計師

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一樣牵署,有很多分辨率,高寬比和設備喧半,這大大增加了設計的復雜性奴迅。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市挺据,隨后出現(xiàn)的幾起案子取具,更是在濱河造成了極大的恐慌,老刑警劉巖扁耐,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件暇检,死亡現(xiàn)場離奇詭異,居然都是意外死亡婉称,警方通過查閱死者的電腦和手機块仆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來王暗,“玉大人悔据,你說我怎么就攤上這事∷滓迹” “怎么了科汗?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長绷雏。 經(jīng)常有香客問我头滔,道長,這世上最難降的妖魔是什么涎显? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任坤检,我火速辦了婚禮,結果婚禮上棺禾,老公的妹妹穿的比我還像新娘缀蹄。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布缺前。 她就那樣靜靜地躺著蛀醉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪衅码。 梳的紋絲不亂的頭發(fā)上拯刁,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天,我揣著相機與錄音逝段,去河邊找鬼垛玻。 笑死,一個胖子當著我的面吹牛奶躯,可吹牛的內(nèi)容都是我干的帚桩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼嘹黔,長吁一口氣:“原來是場噩夢啊……” “哼账嚎!你這毒婦竟也來了?” 一聲冷哼從身側響起儡蔓,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤郭蕉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后喂江,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體召锈,經(jīng)...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年获询,在試婚紗的時候發(fā)現(xiàn)自己被綠了涨岁。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡筐付,死狀恐怖卵惦,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情瓦戚,我是刑警寧澤沮尿,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站较解,受9級特大地震影響畜疾,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜印衔,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一啡捶、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧奸焙,春花似錦瞎暑、人聲如沸彤敛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽墨榄。三九已至,卻和暖如春勿她,著一層夾襖步出監(jiān)牢的瞬間袄秩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工逢并, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留之剧,地道東北人。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓砍聊,卻偏偏與公主長得像背稼,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子辩恼,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

推薦閱讀更多精彩內(nèi)容