• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI培訓班入門:UI設計像素知識!這個很關鍵

        • 發布:UI培訓
        • 來源:學習筆記
        • 時間:2016-11-17 10:22

        像素密度是指一個指物理空間(通常是英寸)有多少個像素。第一臺Mac,每英寸有72個像素,這可能聽起來很多,但實際上它要求的圖形清晰度需要這些龐大像素的支持。

        ui像素知識

        自那時以來,屏幕技術有了極大的發展,連現在最基礎的電腦屏幕每英寸的像素(“PPI”)范圍都介于115到160了。但是,當蘋果推出帶有視網膜顯示屏的iPhone手機——一個每英寸增加了一倍像素的超級清晰屏幕。結果就是圖形比我們之前見過的所有圖形都要清晰。


        為了保持用戶界面相同的物理尺寸,像素尺寸進行了加倍,比如一個高度為44像素的按鈕現在變為88像素。為了適應不同的設備,設計師需要在原有“1倍”圖形的尺寸下同時提供新的“2倍”尺寸圖形(如圖標)。但有一個新問題,你不能再說:“嘿,這個按鈕應該是44像素高”,因為在不同設備上它也有可能是88像素高。也有與像素密度無關的單位——“點”或簡稱“PT”。
        【像素知識】

        PT&DP 但是這當然不只適用于蘋果設備,現在所有的操作系統:臺式機、手機——支持高PPI / DPI屏幕。谷歌為了Android系統已經確定了自己的獨立密度單位。他們不把單位叫作“點”,他們稱之為“DIPs”,它代表設備無關像素,縮寫為“DP”。“DIPs”不完全等同于iOS的點,但他們背后的想法是一樣的。它們是測量的普遍單元,可與使用縮放比率(2倍,3倍等)設備的像素進行轉換。

        因為這是依賴于特定的設備。在iOS上,一個點從每英寸132個像素到每英寸163個像素發生變化。在Android上,DIPs始終是每英寸160個像素。

        混亂的管理 在高分辨率移動設備的初期,像素密度還僅僅為1倍或2倍。但是現在的設備有許多的像素密度。 Android就是一個很好的例子:在寫這篇文章的時候不同的設備廠商就提供了六種常見的像素密度。這意味著,一個icon在所有屏幕上尺寸相同但實際上需要六種尺寸的切圖。對于蘋果設備來說,則是兩個或三個不同尺寸的圖形。


        用1倍尺寸進行矢量設計 這有幾個實踐經驗教訓:第一個教訓是,我們一開始應該用矢量圖形來設計,這樣我們的界面,icon和圖形可以擴展到任意大小。


        第二個教訓是,我們應該用1倍的尺寸來進行設計。換句話說,在所有的測量尺寸下,設計單位使用的是點,然后導出時擴展到各種高像素密度而不是設計最終設備的像素尺寸,比如2倍、3倍等。而且這樣也會在導出過程中遇到各種麻煩,比如縮放2倍的圖形到150%產生的3倍圖形會模糊,但縮放1倍圖形到200%和300%卻保留了視覺清晰度。

        IPhone原型的標準尺寸是375×667像素,750×1334像素實際上是顯示器的分辨率。大多數設計工具不辨別像素和點(Flinto是我所知道的唯一的例外),所以它的設計師假裝單位像素實際上是點,這樣就可以靈活地導出兩倍或三倍尺寸的圖。

        失之毫厘并不差之千里 這是很先進的一種做法,但它更值得一提的是:有時設備廠商假裝像素到點的比例是常見的一種,比如3倍,但它實際上是2.61倍,然后圖像被縮放到更為方便的3倍。這就和目前的iPhone Plus一樣。它收縮1242×2208的界面以適應放在1080×1920的屏幕上。


        由于圖像只被縮小了一點點(87%),所以圖像看起仍然可觀—— 一個1像素的直線在3倍屏幕上看起來仍然清晰。可喜的一個消息是,在未來蘋果可能會發布一款真正的3倍iPhone Plus,批量生產也是可行的。現在的iPhone Plus只是模仿他直到它生產出來。

        你設計得清晰又完美的像素在縮放后都將變得模糊。即使你不是像我一樣是狂熱的像素完美主義者,但不可否認的事實是設計元素需要全像素對齊以清晰的出現在我們的眼中。不幸的是像素密度在4X和4X以上范圍時,所造成的非整數縮放模糊會變得更易察覺,所以我預測,隨著時間的推移設備制造商將變本加厲的使用這種方法。我們只能希望,縮放的性能缺陷會阻止他們!


        眼睛的規模感知 讓我們把所有有關像素密度的東西放在一旁并考慮這樣一個問題:一個按鈕跨設備情況下總應該是相同的物理尺寸嗎?當然我們只是用一個按鈕作為一個例子,但我們可以談論圖標、文字或工具欄。這些應該在所有設備上使用統一大小?普遍的共識是它依賴以下:

        它取決于輸入方法的精確度(即觸摸與光標)它取決于屏幕的物理尺寸它取決于你與屏幕之間的距離

        電視屏幕的按鈕實際上有可能是你手機的大小,因為他是根據距離來決定的。


        下面是一個沒有什么戲劇性并且非常現實的例子:在平板電腦上的應用程序圖標必須比在手機上的大。這通過兩種方式來完成:一個是通過使用較低的像素密度,另一個是通過改變按鈕的尺寸。

        1. 較低的像素密度我們使用的較大屏幕往往像素密度較低。一臺電視每英寸可能會低至40像素!對于基本的電視觀看這是允許的。一個iPad的視網膜顯示屏是264ppi,而iPhone的視網膜顯示屏是326ppi。因為iPad的像素都較大(屏幕的密度較小),所以其全部界面變得稍大。

        2. 不同尺寸但并不總是這樣,使用較低的像素密度是不夠的,比如一個特定的設計元素需要更大。舉個例子:iPad上的應用程序圖標,在iPhone上它是60×60像素,但iPad的大屏幕提供了更多的空間,所以有相當大的實際和視覺可能性使用76×76像素的應用程序圖標。

        【像素設計知識】

        完整性檢查?

        幸運的是,界面設計僅僅是一個使用密度獨立單元(如PT或DP)的問題。它比應用程序圖標更復雜,但也有模板來幫助你解決這一問題。下面是關于這些主題的資源列表。

        必要的資源

        1. 谷歌設備規格https://design.google.com/devices/包含各種規格(Android,iOS,Mac,Windows等)設備的名單。可以獲取屏幕尺寸,像素密度,乃至設備屏幕到用戶眼睛的大概距離。ScreenSiz.es(http://screensiz.es/phone)是一個類似的資源。

        2. Bjango應用程序圖標模板https://bjango.com/designresources/這些設計模板(可用于所有主要的設計軟件)是非常全面的。并為Android,iOS,Mac系統,tvOS,watchOS,Windows,Windows Phone和更多的系統提供最新規格的參考。

        3. 設計師DPI指南http://sebastien-gabriel.com/designers-guide-to-dpi/這個由Sebastien Gabriel創建的指南涵蓋了很多Android和iOS設計師的設計細節和實際工作流程。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:網頁loading等待載入動圖--達內ui老師分享
        下一篇:平面設計培訓中講到的常用尺寸
        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>