關(guān)于UI界面設(shè)計(jì)中的屏幕分辨率的設(shè)計(jì)規(guī)則

好的的UI界面設(shè)計(jì)要關(guān)注設(shè)備屏幕尺寸和分辨率，這是設(shè)計(jì)師創(chuàng)作的畫布，基于 UI 就是我們所看到的一切，了解我們?cè)谑裁丛O(shè)備上使用至關(guān)重要的。 在網(wǎng)絡(luò)的早期，它非常簡單——你設(shè)計(jì)的像素介于 640 x 480 和 800 x 600 像素之間。當(dāng)然，我們可以追溯到更遠(yuǎn)的地方——第一臺(tái) Macintosh 或 Xerox 的第一個(gè)桌面用戶界面。

PPI 或每英寸像素?cái)?shù) 在某個(gè)時(shí)候，每英寸 72 像素成為那些 CRT 顯示器的顯示標(biāo)準(zhǔn)，并且這種情況持續(xù)了很長時(shí)間。現(xiàn)在我們的筆記本電腦和移動(dòng)設(shè)備都具有更高的分辨率和像素密度。

但有什么區(qū)別呢？ 分辨率是顯示器具有的單個(gè)像素的數(shù)量。例如，第一代 iPhone 的基本分辨率為 320 x 480。Apple 決定，這個(gè)分辨率對(duì)于一個(gè)舒適的界面來說應(yīng)該足夠了，所以它為平臺(tái)設(shè)定了 1 倍密度的基準(zhǔn)。

隨著配備視網(wǎng)膜顯示屏的 iPhone 4 的推出，這一切都發(fā)生了變化。前提是像素非常密集，您無法再輕易看到單個(gè)像素。基本（或 1 倍）分辨率與之前的 iPhone 相同，但像素密度是該分辨率的倍數(shù)，從而產(chǎn)生更清晰的文本和圖像。iPhone 4 將像素?cái)?shù)量翻了一番，達(dá)到 640 x 960，但元素的實(shí)際設(shè)計(jì)保持在 320 x 480，并在設(shè)備上進(jìn)行了放大。 好的，但為什么它仍然表現(xiàn)得像 320 x 480？為什么他們不直接使用 640 x 960 作為“可視分辨率”？

在 iPhone 4 的 2 倍像素?cái)?shù)之后，我們開始在手機(jī)、平板電腦和筆記本電腦上看到 3 倍、4 倍和更大的像素密度。 例如，現(xiàn)代 iPhone X 使用 375 x 812 基本分辨率，但其實(shí)際像素?cái)?shù)是 1125 x 2436 的三倍 (3x)。 舉個(gè)例子——如果你在設(shè)計(jì)一個(gè)按鈕，你需要讓它至少有 44p 高。這意味著在 1x 下設(shè)計(jì)時(shí)它將是 44 個(gè)像素（在 1x 下一個(gè)像素與一個(gè)點(diǎn)相同）而在 2x 下它將是 88 個(gè)像素，但在您的設(shè)計(jì)中仍然是 44 個(gè)點(diǎn)。


什么是碎片化尺寸？
遺憾的是，越來越多的屏幕分辨率最終導(dǎo)致了非常分散的顯示環(huán)境。我們?yōu)殡娨暋⒐P記本電腦、平板電腦、手機(jī)、手表和物聯(lián)網(wǎng)設(shè)備設(shè)計(jì)，這需要大量規(guī)劃和特定于設(shè)備的修改才能使設(shè)計(jì)生效。 開始設(shè)計(jì)時(shí)要問的第一個(gè)問題是它將在哪種屏幕上工作以及典型的觀看距離是多少。 與手機(jī)應(yīng)用程序相比，電視應(yīng)用程序應(yīng)該具有更高的對(duì)比度和更重要的 UI 元素，這主要是因?yàn)樗?jīng)常在整個(gè)房間使用，而手機(jī)應(yīng)用程序離臉只有幾英寸遠(yuǎn)。

但碎片化傷害最大的地方是來自一個(gè)設(shè)備類別。最普遍的手機(jī)——手機(jī)——有如此多的潛在分辨率和寬高比，以至于沒有辦法讓一種設(shè)計(jì)適合所有人。Google Play 商店為基于 Android 的移動(dòng)設(shè)備列出了數(shù)十種屏幕分辨率。幾年前，Apple 曾經(jīng)擁有更一致的設(shè)置，但此后放棄了這條道路，轉(zhuǎn)而為幾乎所有設(shè)備采用單獨(dú)的解決方案。

如何最大化解決碎片化？
與這種趨勢(shì)抗?fàn)帲ú⑷伲┑奈ㄒ环椒ㄊ且员M可能小的分辨率進(jìn)行設(shè)計(jì)，至少要等到它在法律上過時(shí)為止。然后切換到下一個(gè)最小的。 簡單來說：不要專門為 iPhone Pro Max 設(shè)計(jì)。為 iPhone Pro 設(shè)計(jì)。

本文是基于Ui界面設(shè)計(jì)中的關(guān)于屏幕分辨率和尺寸的基本知識(shí)和設(shè)計(jì)規(guī)則，這是設(shè)計(jì)師在未來的視覺設(shè)計(jì)工作中的底層邏輯。

由于我們?cè)O(shè)計(jì)的 UI 都在基于矢量的工具中，因此我們無需再擔(dān)心實(shí)際分辨率。1x 的基本分辨率用作在低密度屏幕上工作的模板，在高密度屏幕上更清晰、更精確。

但碎片化傷害最大的地方是來自一個(gè)設(shè)備類別。最普遍的手機(jī)——手機(jī)——有如此多的潛在分辨率和寬高比，以至于沒有辦法讓一種設(shè)計(jì)適合所有人。Google Play 商店為基于 Android 的移動(dòng)設(shè)備列出了數(shù)十種屏幕分辨率。幾年前，Apple 曾經(jīng)擁有更一致的設(shè)置，但此后放棄了這條道路，轉(zhuǎn)而為幾乎所有設(shè)備采用單獨(dú)的解決方案。