<noframes id="9lrfv">

    <address id="9lrfv"></address>

    <listing id="9lrfv"><listing id="9lrfv"><cite id="9lrfv"></cite></listing></listing>

    <address id="9lrfv"></address>

    <address id="9lrfv"></address>
    <noframes id="9lrfv">

    <noframes id="9lrfv"><span id="9lrfv"><th id="9lrfv"></th></span>

    <address id="9lrfv"></address>
    重要:未經泰瑞廣告的書面授權,我們拒絕一切形式的屬于本公司網站所屬文字和圖片的商業轉載使用,并保留由此引發的不當利益追索權利!

    泰瑞廣告有限公司

    南京市江寧區九竹路臨港同策同心園1幢301.
    1-301,No.402, Jiuzhu Road,Jiangning, Nanjing, China.

    郵編 P.C:210000
    電話 Tel:(86)-025-83323458
    傳真 Fax:(86)-025-83323458
    郵箱 E-mail:Tiradcn@126.com

    3種設計布局:古騰堡圖、Z型和F型,你了解嗎?

    作者:admin    發布日期:2020-6-2 9:14:44

    通常建議使用幾種布局模式,最常見的3種是Gutenberg圖,Z-pattern布局和F-pattern布局。

    通常建議使用幾種布局模式,以利用人們對設計的掃描或閱讀方式。最常見的3種是Gutenberg圖,Z-pattern布局和F-pattern布局。

    每個模式都提供有關在何處放置重要信息的建議,但我認為這些模式經常被誤解,并且在未考慮其真實描述的情況下而使用。我希望了解每種模式的含義和原因,然后提供一些其他方法,使你作為設計師能夠更好地控制用戶的眼睛在設計中的移動方向。


    古騰堡圖

    在古騰堡圖描述了一般模式下眼睛通過在均勻分布的信息游覽時的移動。直到閱讀最后一部分。

    該模式適用于大量文本的內容。想一想小說或報紙上的頁面。該模式并不意味著描述每種可能的設計。



    古騰堡圖將布局分為4個象限:

    主光學區域位于頂部/左側;

    休憩區位于頂部/右側;

    休憩區位于底部/左側;

    終端區位于底部/右側。


    該模式表明,眼睛將以稱為方向軸的一系列水平運動在頁面上上下掃動。每次掃描都從左邊緣開始一點,然后向右邊緣一點。整個運動是為了使眼睛從主要區域移動到末端區域,該路徑稱為閱讀重力

    自然地,這是從左到右的閱讀語言,而從右到左的閱讀語言則相反。

    在古騰堡圖中表明,強弱休閑區屬于這一讀數重力路徑之外,并得到最小的關注,除非以某種方式突出視覺。

    重要元素應沿著讀數重力路徑放置。例如,在頂部/左側放置徽標或標題,在中間放置圖像或一些重要內容,在右下方放置號召性用語或聯系信息。

    據說遵循古騰堡(Gutenberg)的設計可以與自然的閱讀重力相協調。

    這些設計主張可以通過與自然的閱讀節奏相協調來改善閱讀節奏,并提高閱讀理解能力,但沒有任何實證證據可以支持該觀點。


    同樣,古騰堡描述了大的文本塊和很少的排版層次。一旦創建可視層次結構,圖表就不再適用。所以請記住下面描述的其他模式。



    Z型布局

    正如你所理解的那樣,Z圖案的布局遵循字母Z的形狀。讀者將從頂部/左側開始,先水平移動到頂部/右側,然后再對角線移動到底部/右側,然后再完成另一次水平移動到底部/右側。

    Z圖案有時也被稱為反向S圖案,這可能表明一個更多的彎曲路徑,而不是硬傾斜路徑。否則,它們基本上是同一回事。

    與古騰堡圖的主要區別在于Z模式表明觀眾將穿過兩個休閑區域。否則,它們仍將在相同的地方開始和結束,并且仍然穿過中間。

    與古騰堡圖一樣,設計師將把最重要的信息沿圖案的路徑放置。

    Z模式適用于需要一些關鍵元素的簡單設計。任何講故事方面的設計都將遵循Z型路徑。

    鋸齒型

    我們可以通過將其更多地視為一系列Z移動而不是一個大Z移動來稍微擴展此模式。

    常識表明這是更現實的做法,因為讀者將繼續向右移動,然后稍微向下然后向左移動,然后再次開始向右的另一次水平移動。這就是我們自然閱讀大塊文本的方式。

    這一系列的Z運動有時稱為Z字形。如果我們繼續向圖案中添加更多的鋸齒和曲折,隨著Z的對角線部分越來越淺,最終我們將最終產生一系列接近水平的左右移動。


    金三角圖案

    Z圖案還會導致所謂的金三角形圖案出現。如果先進行水平和對角線的第一次運動,然后關閉形狀,則最終得到一個直角三角形,其直角為上/左角。

    頁面頂部的三角形區域將是最常看到的區域,該模式表明您需要在其中放置最重要的信息。

    F模式布局

    雅各布·尼爾森(Jacob Nielsen)在其公司進行的眼動追蹤研究之后首次提出了這種模式。在F模式中經常會迷失的是,這些原始的研究是針對大量文本設計和搜索結果進行的。

    與其他模式一樣,眼睛從上/左開始,然后水平移動到上/右,然后又回到左邊緣,然后再向右進行水平掃描。這第二次掃描不會延伸到第一次掃描。

    在第二次大掃描之后,附加掃動向右移動的次數越來越少,并且在大多數情況下,當向下移動時,眼球會緊貼左邊緣。

    在F模式表明:

    1.重要信息應放置在設計頂部,通常可以在上面閱讀。

    2.較少的信息應沿著設計的左邊緣放置,通常應放置在項目符號點上,此處幾乎不需要水平移動眼睛即可將所有內容帶入。

    3.人們不在網上閱讀。他們更多是在掃描。


    不幸的是,這種模式似乎已應用于網上的所有內容,而不僅僅是文本繁多的內容。如果你在下面查看Nielsen的原始熱圖,您會看到F包含在主要內容中,并且沒有擴展到完整設計。

    在應用F模式思維掃描儀并放置內容時,這些掃描儀很可能會對F感興趣。將重要信息放在頂部,以及旨在將某人拉到頁面下方的信息。

    但是請記住,如果有人掃描您的頁面很有趣,那么他們會閱讀,因此您可以將信息放置在F之外的那些會讀書的人。



    關于3種模式的思考

    我已經提到過幾次了,但重要的是要理解這些模式描述了當設計缺乏層次感時眼睛自然會走到哪里。它們描述了均勻分布和文本內容豐富的自然模式。

    不幸的是,這些模式通常應用于存在現有視覺層次結構的設計中,以及應用于包含多個文本的設計中。模式也比其名稱所暗示的更相似。在所有這三個視圖中,查看器從頂部/左側開始,然后向右移動。在Z和F模式中,它們可能會向右移動一點,但仍會向右移動。


    Z模式和古騰堡均在同一位置結束并在中間移動。F模式未到達末尾的原因可以通過以下方式解釋:

    1.內容不完全吸引讀者。可悲的是,大多數在線內容都是如此。

    2.倒金字塔形的寫作,可能會導致讀者在頁面向下移動時迷失方向。

    3.人們正在掃描以確定是否要閱讀更多內容。


    奇怪的是,任何發現你的內容被吸引的訪問者都想閱讀更多內容并突破到達終端區的F模式。

    最后一點是,隨著這些模式的討論越來越多,它導致更多的設計強調模式。如果您確信你的用戶將遵循這些模式之一,那么您可能會創建增強該模式的設計。這導致了一個雞和蛋的場景。



    聯絡點模式

    我之所以繼續關注大量文本的原因,是因為一旦您開始給設計元素賦予不同的視覺權重并創建層次結構和流程,以上的模式將不再適用,并且您只需要了解一種模式,即一個完全由你控制的。

    它不是一種模式,它是扎實的設計原則,但是由于我們在這里談論模式,所以我給它起一個名字。

    焦點模式:它表示用戶將首先查看頁面上最主要的元素(視覺重量最大的元素或區域)。

    從那里,眼睛會遵循主導元素,其他重點路徑點的設計。順序將取決于這些焦點的相對權重以及指示下一步要看的任何視覺提示。


    在談到焦點、平衡和流動時,我經常會提到康定斯基的作品《八》(見上圖)。

    雖然這是藝術而不是設計,但這是所有三個原則的一個很好的例子。你的眼睛會被拉到左上角,開始從一個點移動到下一個點。

    繪畫中的線條可幫助您將視線引向不同的焦點。我懷疑您的眼睛會跟隨F或Z,還是會通過設計讀取重力。這幅畫應該清楚地表明,創建層次結構和流程會顛覆我們在此討論的任何模式。


    總結


    盡管像古騰堡圖、Z模式和F模式布局這樣的模式表明,眼睛在設計中會有一條自然的路徑,但事實是,它們只指由大文本塊主導的設計,幾乎沒有層次。

    如果這描述了你的設計,那么這3種模式中的任何一種都可能建議將重要信息放在何處。你可能還想考慮這些模式,以便用戶掃描你的設計并放置元素,以便將用戶進一步拉入他們的路徑。

    一旦你開始添加不同視覺重量的元素,眼睛將通過你的設計路徑是你創建的。如果需要,可以選擇加強古騰堡、F或Z模式,但不要受它們的限制。

    在沒有其他視覺提示的情況下,人們會從頂部/左側開始,然后在頁面上向下移動,這是合乎邏輯的。這就是我們被教導閱讀的方式。不過,關鍵短語是“缺乏其他視覺線索”。當這些提示出現時,它們將始終控制眼睛所走的路徑。

    與其嘗試使您的設計進入所描述的模式之中,不如確定你希望用戶通過一系列重點和設計流程看到需要的信息,從而引導你的眼睛通過你的信息層次結構。那才是你唯一需要使用的模式。

    轉載:體驗為王UX 原文鏈接:https://www.zcool.com.cn/article/ZMTEzNzE5Mg==.html
    南京泰瑞廣告轉載收藏。南京泰瑞廣告是以設計提升品牌價值的一家公司,簡單來說,一個企業(或品牌)從創始開始,南京泰瑞廣告可以提供企業(或品牌)的LOGO(VIS)、企業文化、再至企業辦公環境等一條龍式策劃、設計、制作執行;企業(或品牌)經營過程中,南京泰瑞廣告提供企業(或品牌)對外形象整體策劃設計,如企業畫冊、產品包裝、產品畫冊、商業活動策劃推廣、新媒體(微信、網站)等設計制作一站式服務。

    A片真人视频免费观看