• <rp id="vcwyv"></rp>

      <b id="vcwyv"></b>
      <tt id="vcwyv"></tt>

    1. 準則

      Material Design 使用的基本工具來源于印刷設計,例如通用于所有頁面的基準線和刪格。布局排版能夠按比例橫跨不同尺寸的屏幕,促進UI開發和從根本上幫助你做可擴展的apps。

      布局指南也通過使用相同的視覺元素,結構網格,和通用的行距規則,讓app在不同平臺與屏幕尺寸上擁有一致的外觀和感覺。結構和視覺上的一致創造了一個可識別的跨平臺產品的用戶環境,它給用戶提供高度的熟悉感和舒適性,讓產品更便于使用。

      在深入的研究布局細節之前,再一次細想什么是Material Design:一種基于紙頁質感的設計。了解紙頁的行為和如何制作是很重要的。

      頁面制作

      在Material Design里,每一個像素點都是由應用程序在一個頁面上畫出來的。頁面有一個平滑背景顏色并可以作用于各種目的。一個典型的布局就是由多層頁面組成的。

      系統可能會為很多元件繪制像素,比如狀態或者系統欄,但這些都不屬于頁面。可以這樣想象那些系統元件,他們是被貼在顯示器玻璃背面的,另外存在于一個在app內容下方的層級。

      布置頁面

      兩個頁面有一條共用的,長度相同的邊就會產生縫合線。有縫合線的兩張紙通常會一起移動。

      兩張Z軸位置不同的紙片在重疊會產生層階[step],因此他們通常是彼此獨立移動。

      頁面工具欄

      工具欄是一個主要展示操作的條狀頁片。這些操作通常聚集在工具欄的左邊緣和右邊緣。與導航相關的操作(一個抽屜菜單[ drawer menu ] ,一個向上的箭頭[ up arrow ])呈現在左邊,而適用于當前情境的操作呈現在右邊。

      在工具欄左邊和右邊的操作不會被另一個頁面分離。然而,工具欄的寬度被限制到小于頁片的寬度。



      限制寬度要小于整個頁片的寬度。


      不要
      絕對不允許一個頁面被另一個頁面隔開。

      工具欄經常的在別的頁面上形成一個疊層用來顯示與工具欄操作相關的內容。當頁面工
      具欄的下方滾動時,工具欄卡在頁面的入口點,阻止該頁面完全穿過另一端。

      工具欄也可以與另一個頁面由開始的縫合狀態演變成疊起來之后形成的層階[step]。這種疊加形式上的變形稱為瀑布

      同樣的,這個工具欄也可以保持它本身的縫合線,就像兩個頁面一起移動一樣推離出屏幕。

      最后,另一個頁面在移動時也可以覆蓋這個工具欄。

      工具欄有一個標準的高度,但也可以更高。當更高的時候,操作鍵可以放在工具欄的最頂端或最低端。

      工具欄在被壓住時可以動態改變其高度。當改變尺寸的時候,他們會在最大和最小(標準)的高度之間調整(界定閾值)。

      浮動操作

      浮動操作是一個與工具欄分離的圓形頁片。

      浮動操作代表在當前情境下的獨立提升操作。當與產生這個層階[step]的頁面內容相關聯時,它可以跨越這個層階。

      浮動操作在與產生這個疊合線的兩個頁面內容相關聯時,可以跨越這個縫合線。

      永遠不要僅僅為了給操作提供一個支撐點而引入一條裝飾性的縫合線。

      自適應準則

      當設計跨設備布局的時候,我們為網格行為結合了固定的,粘性的和流暢的策略。

      這里有一些簡單的指導:

      1. 遵循人的習慣。
      2. 更大的屏幕 ≠ 更大的認知能力。
      3. 線條長度應該是適宜的。
      4. 考慮到角距離。
      5. 把家具從墻上取下來:允許空白,不要把局限于固定的工具欄。

      在多重層次等級結構中使用策略,例如屏幕層級和卡片層級。

      桌面模版演示了應用了這些網格規則的幾個自適應界面。

      Desktop Template - 100 MB(.ai)

      維度

      在dps中深度是可被測量的,就像x軸和y軸。然而,在z坐標空間里去考慮元素的優先級是更有效的,而不只是依據絕對的,固定的位置。

      一個概念模型

      在一個高層次級別上,每個app都可以被認為是放置在一個獨特的空間或容器。

      這樣就意味著一個應用軟件里的頁面不能在Z軸空間插入另外一個頁面。

      這也意味著操作和元件是獨立在app中:例如,在一個軟件里讓一個列表滑動消失不會導致那個列表穿過另一個不相關app的空間。

      多容器允許多個app被同時看到,例如,在多種瀏覽器標簽里。

      在一個特定的app里,根據z軸主要和次要的層階[step],很多元素都是相對放置的。例如,一個按鈕的聚焦狀態是次要的層階,而它的按下狀態是一個主要的層階。

      其他元素在app的Z軸里有固定的優先級,意味著不管那些元素相對于Z軸的位置,他們總是位于其他元素上面或者下面。比如,浮動操作按鈕總是在內容和工具欄之上,不管這個app可能會用到多少個頁面。

      系統元件,比如狀態欄和系統對話框,存在于一個單獨的系統空間里,在所有app容器的上方和下方。

      取決于情境, 系統元素有可能不出現在某一個app里(比如在熄燈模式中),但當系統元素存在時,他們在空間上具有相對的優先權。這可確保,比如,一個系統對話框總出現在當前app的上面。

      布局注意事項

      深度不僅僅是裝飾。

      優先考慮元素的z軸空間,不是絕對的位置。

      app中的深度應該表達層級和其重要性,并且幫助用戶關注手頭的任務。

      陰影

      陰影有兩部分組成:頂端表達深度的陰影和底端表達邊界的陰影。

      原文:Principles 翻譯:lightlz 校對:Jingsha

      夫妻性姿势真人示范 - 视频 - 在线观看 - 影视资讯 - 唯爱网