很多工作了三四年的UI設(shè)計師，界面設(shè)計的很漂亮，但是真正開始一個項目時，很多人對于基礎(chǔ)的設(shè)備屏幕知識都不是很熟悉，今天，就來聊一聊，如何規(guī)范設(shè)計，讀懂UI設(shè)計基礎(chǔ)知識——屏幕。

? 99%的UI =屏幕上的像素* ?

1%是用于語音接口，可能在不久的將來還有神經(jīng)鏈接連接。

UI設(shè)計是關(guān)于顯示的?；赨I就是我們所看到的一切這一事實，理解我們在看什么是很有必要的。

在web的早期，它非常簡單——你設(shè)計的像素在640 x 480到800 x 600之間。當(dāng)然，我們可以回溯到更久遠(yuǎn)的年代，比如第一個Macintosh或者施樂的第一個桌面ui，但是我們假設(shè)老的彩色顯像儀是我們的基礎(chǔ)。那也是我開始做網(wǎng)頁設(shè)計的時候(1998年)

我有一個:)

但那是在90年代后期，事情在那之后開始迅速變化。那個時代的大多數(shù)顯示器都有相似的分辨率范圍，都非常重，不能顯示太多的顏色。此外，它們的刷新率較低，導(dǎo)致滾動體驗欠佳。那個時代的展示往往限制了網(wǎng)站的視覺效果。

由于我們現(xiàn)在生活在一個有數(shù)百萬像素和數(shù)百萬顏色的科技世界，我們需要理解我們今天設(shè)計的屏幕。這項技術(shù)自早期互聯(lián)網(wǎng)時代起就突飛猛進(jìn)。如今，你手里拿著的手機(jī)的分辨率在20年前是不存在的。

一個快速的比較。一個典型的90年代后期CRT顯示屏的分辨率只有當(dāng)前iPhone的1/6，而iPhone的尺寸要小得多。

?PPI或像素每英寸 ?

在某種程度上，每英寸72像素成為了CRT顯示器的顯示標(biāo)準(zhǔn)，這種情況持續(xù)了很長很長一段時間?，F(xiàn)在，我們的筆記本電腦和移動設(shè)備都有更高的分辨率和像素密度。

但是有什么區(qū)別呢?

分辨率是顯示器擁有的單個像素的數(shù)量。例如，第一代iPhone的基本分辨率是320 x 480。蘋果決定，這個分辨率應(yīng)該足以提供一個舒適的界面，所以它為平臺設(shè)置了一個1倍密度的基線。

來源:Engadget

隨著帶有視網(wǎng)膜顯示屏的iPhone 4的推出，這一切都改變了。前提是像素非常密集，你不能輕易看到單獨的一個?；痉直媛?或1x)與上一代iPhone相同，但像素密度是該分辨率的倍數(shù)，從而產(chǎn)生更清晰的文本和圖像。iPhone 4將像素增加了一倍，達(dá)到640×960，但元素的實際設(shè)計保持在320×480，并在設(shè)備上進(jìn)行了升級。

好吧，但為什么它仍然是320×480呢?為什么他們不簡單地使用640 x 960作為“可視分辨率”?

為舊設(shè)備設(shè)計的項目在新設(shè)備上要小兩倍。這將使它不可能舒適地使用。

在iPhone 4的2倍像素數(shù)之后，我們開始在手機(jī)、平板電腦和筆記本電腦上看到3倍、4倍和更大的像素密度。

例如，現(xiàn)在的iPhone X使用的基本分辨率是375×812，但它實際的像素數(shù)是3倍，為1125×2436。

舉個例子，如果你設(shè)計一個按鈕，你需要使它至少44p高。這意味著在1x的時候它將是44像素(1x一個像素就是一個點)，而在2x的時候它將是88像素，但在你的設(shè)計中仍然是44點。

由于我們設(shè)計的UI都在基于矢量的工具中，所以我們不再需要擔(dān)心實際的分辨率。1x的基本分辨率在低密度屏幕上用作模板，在高密度屏幕上更清晰、更精確。

蘋果iphone目前有5種可能的分辨率。

但你不需要記住這個

大多數(shù)設(shè)計工具為所有流行的屏幕大小提供1x模板。只要按1x進(jìn)行設(shè)計，編碼的界面就會自動放大。我松了一口氣!??

但請記住，分裂是存在的。

碎片是什么?

遺憾的是，越來越多的屏幕分辨率最終導(dǎo)致了一個非常分散的顯示領(lǐng)域。我們?yōu)殡娨?、筆記本電腦、平板電腦、手機(jī)、手表和物聯(lián)網(wǎng)設(shè)備設(shè)計，這需要進(jìn)行大量的規(guī)劃和特定設(shè)備的修改，以使設(shè)計工作。

開始設(shè)計時要問的第一個問題是要在什么樣的屏幕上工作，以及典型的觀看距離是多少。

電視應(yīng)用程序應(yīng)該比手機(jī)應(yīng)用程序有更高的對比度和更重要的UI元素，主要是因為它經(jīng)常在房間的另一端使用，而手機(jī)應(yīng)用程序距離臉部只有幾英寸。

但是，碎片化對一個設(shè)備類別的影響最大。最普遍的一種——手機(jī)——有如此多的潛在分辨率和縱橫比，以至于沒有辦法讓一種設(shè)計適合所有人。谷歌播放商店為基于android的移動設(shè)備列出了幾十種屏幕分辨率。幾年前，蘋果曾經(jīng)有一個更穩(wěn)定的分辨率設(shè)置，但后來放棄了這一做法，幾乎所有設(shè)備都采用了單獨的分辨率設(shè)置。

如何對抗分裂?

與這一趨勢斗爭(并取得勝利)的唯一方法是設(shè)計盡可能小的解決方案，至少要等到它在法律上被淘汰。然后換到下一個最小的。

簡單點說就是:不要專門為iPhone Pro Max設(shè)計。為iPhone Pro設(shè)計。

?范圍和達(dá)到??

在移動設(shè)備中，考慮平均接觸范圍也是必要的。一個隨機(jī)拼湊起來的界面在單手使用時可能會很復(fù)雜，并導(dǎo)致挫敗感。

我們假設(shè)典型的電話使用模式是一只手拿著電話，而同一只手的拇指做大部分屏幕上的工作。

Reach還可以幫助確定瀏覽產(chǎn)品的容易程度。流行的漢堡菜單設(shè)計模式對右撇子用戶來說是最不利的。

在大多數(shù)情況下，底部對齊的選項卡是設(shè)計菜單最簡單的方法，幾乎每個產(chǎn)品都應(yīng)該考慮作為第一選擇。

總結(jié) ?

這里是所有你需要記住的關(guān)于設(shè)計的所有類型的屏幕:

總是為1x像素的密度設(shè)計

所有的設(shè)計工具都有正確的屏幕大小(不需要記住它們)

使你的主導(dǎo)航容易到達(dá)在移動設(shè)備上

-END-