很多工作了三四年的UI設(shè)計師，界面設(shè)計的很漂亮忘朝，但是真正開始一個項目時灰署，很多人對于基礎(chǔ)的設(shè)備屏幕知識都不是很熟悉，今天局嘁，就來聊一聊溉箕，如何規(guī)范設(shè)計，讀懂UI設(shè)計基礎(chǔ)知識——屏幕悦昵。
? 99%的UI =屏幕上的像素* ?
1%是用于語音接口肴茄，可能在不久的將來還有神經(jīng)鏈接連接。
UI設(shè)計是關(guān)于顯示的但指」烟担基于UI就是我們所看到的一切這一事實，理解我們在看什么是很有必要的棋凳。
在web的早期拦坠，它非常簡單——你設(shè)計的像素在640 x 480到800 x 600之間。當(dāng)然剩岳，我們可以回溯到更久遠的年代贞滨，比如第一個Macintosh或者施樂的第一個桌面ui，但是我們假設(shè)老的彩色顯像儀是我們的基礎(chǔ)拍棕。那也是我開始做網(wǎng)頁設(shè)計的時候(1998年)
但那是在90年代后期晓铆，事情在那之后開始迅速變化。那個時代的大多數(shù)顯示器都有相似的分辨率范圍莫湘，都非常重尤蒿，不能顯示太多的顏色。此外幅垮，它們的刷新率較低腰池，導(dǎo)致滾動體驗欠佳。那個時代的展示往往限制了網(wǎng)站的視覺效果。
由于我們現(xiàn)在生活在一個有數(shù)百萬像素和數(shù)百萬顏色的科技世界示弓，我們需要理解我們今天設(shè)計的屏幕讳侨。這項技術(shù)自早期互聯(lián)網(wǎng)時代起就突飛猛進。如今奏属，你手里拿著的手機的分辨率在20年前是不存在的跨跨。
一個快速的比較。一個典型的90年代后期CRT顯示屏的分辨率只有當(dāng)前iPhone的1/6囱皿，而iPhone的尺寸要小得多勇婴。
?PPI或像素每英寸 ?
在某種程度上，每英寸72像素成為了CRT顯示器的顯示標準嘱腥，這種情況持續(xù)了很長很長一段時間「剩現(xiàn)在，我們的筆記本電腦和移動設(shè)備都有更高的分辨率和像素密度齿兔。
但是有什么區(qū)別呢?
分辨率是顯示器擁有的單個像素的數(shù)量橱脸。例如，第一代iPhone的基本分辨率是320 x 480分苇。蘋果決定添诉，這個分辨率應(yīng)該足以提供一個舒適的界面，所以它為平臺設(shè)置了一個1倍密度的基線医寿。
隨著帶有視網(wǎng)膜顯示屏的iPhone 4的推出栏赴，這一切都改變了。前提是像素非常密集糟红，你不能輕易看到單獨的一個艾帐∥谝叮基本分辨率(或1x)與上一代iPhone相同盆偿，但像素密度是該分辨率的倍數(shù)，從而產(chǎn)生更清晰的文本和圖像准浴。iPhone 4將像素增加了一倍事扭，達到640×960，但元素的實際設(shè)計保持在320×480乐横，并在設(shè)備上進行了升級求橄。
好吧，但為什么它仍然是320×480呢?為什么他們不簡單地使用640 x 960作為“可視分辨率”?
為舊設(shè)備設(shè)計的項目在新設(shè)備上要小兩倍葡公。這將使它不可能舒適地使用罐农。
在iPhone 4的2倍像素數(shù)之后，我們開始在手機催什、平板電腦和筆記本電腦上看到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進行設(shè)計逝薪，編碼的界面就會自動放大。我松了一口氣!??
但請記住蝴罪，分裂是存在的董济。
碎片是什么?
遺憾的是，越來越多的屏幕分辨率最終導(dǎo)致了一個非常分散的顯示領(lǐng)域要门。我們?yōu)殡娨暵采觥⒐P記本電腦、平板電腦欢搜、手機封豪、手表和物聯(lián)網(wǎng)設(shè)備設(shè)計，這需要進行大量的規(guī)劃和特定設(shè)備的修改炒瘟，以使設(shè)計工作吹埠。
開始設(shè)計時要問的第一個問題是要在什么樣的屏幕上工作，以及典型的觀看距離是多少疮装。
電視應(yīng)用程序應(yīng)該比手機應(yīng)用程序有更高的對比度和更重要的UI元素缘琅，主要是因為它經(jīng)常在房間的另一端使用，而手機應(yīng)用程序距離臉部只有幾英寸廓推。
但是刷袍，碎片化對一個設(shè)備類別的影響最大。最普遍的一種——手機——有如此多的潛在分辨率和縱橫比樊展，以至于沒有辦法讓一種設(shè)計適合所有人呻纹。谷歌播放商店為基于android的移動設(shè)備列出了幾十種屏幕分辨率鸽心。幾年前，蘋果曾經(jīng)有一個更穩(wěn)定的分辨率設(shè)置居暖，但后來放棄了這一做法顽频，幾乎所有設(shè)備都采用了單獨的分辨率設(shè)置。
如何對抗分裂?
與這一趨勢斗爭(并取得勝利)的唯一方法是設(shè)計盡可能小的解決方案太闺，至少要等到它在法律上被淘汰糯景。然后換到下一個最小的。
簡單點說就是:不要專門為iPhone Pro Max設(shè)計省骂。為iPhone Pro設(shè)計蟀淮。
?范圍和達到??
在移動設(shè)備中，考慮平均接觸范圍也是必要的钞澳。一個隨機拼湊起來的界面在單手使用時可能會很復(fù)雜怠惶，并導(dǎo)致挫敗感。
我們假設(shè)典型的電話使用模式是一只手拿著電話轧粟，而同一只手的拇指做大部分屏幕上的工作策治。
Reach還可以幫助確定瀏覽產(chǎn)品的容易程度。流行的漢堡菜單設(shè)計模式對右撇子用戶來說是最不利的兰吟。
在大多數(shù)情況下通惫，底部對齊的選項卡是設(shè)計菜單最簡單的方法，幾乎每個產(chǎn)品都應(yīng)該考慮作為第一選擇混蔼。
總結(jié) ?
這里是所有你需要記住的關(guān)于設(shè)計的所有類型的屏幕:
總是為1x像素的密度設(shè)計
所有的設(shè)計工具都有正確的屏幕大小(不需要記住它們)
使你的主導(dǎo)航容易到達在移動設(shè)備上
-END-
