• <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教程
        • 時間:2017-12-08 14:37

        今天和大家聊下 UI 設計中的一些排版的設計原理,作為UI/UX 設計師,如何更佳有規律的去掌握排版設計能力。這樣能保證你在設計中的界面處理能力到達一個長期穩定的水準,而不是時好時壞,下面進入正題(備注:以下圖片均來源于網絡)。

        UI排版設計4大原則

        視覺焦點

        層次結構

        視覺重量

        視覺方向

        視覺焦點

        視覺焦點就是在界面中占主導地位的視覺元素,第一時間進入你眼睛,在整個設計中你不能強調所有設計元素。

        UI排版中常用的四大排版設計原則

        上圖的界面中作者通過色塊來強調重要的日期選項記事,這樣能吸引你的注意力,關鍵重要元素高亮顯示。

        UI排版中常用的四大排版設計原則

        這個選座購票中中間座位元素都是同一個,但是選中后的效果突出,形成視覺焦點,右邊的異常界面提示按鈕形成焦點。

        UI排版中常用的四大排版設計原則

        這是反面例子,右邊界面所有元素看起來都很重要,沒有一個明確的視覺方向指引,看起來有顏色的都能點擊?

        層次結構

        在幾秒鐘內,用戶就能明確知道要點和頁面元素之間的關系,并且順利完成當前任務。建立視覺層次結構可以通過大小,對比,顏色,肌理,留白,空間,可感知的視覺重要,好的設計它的視覺層次結構分明且符合用戶閱讀習慣。

        UI排版中常用的四大排版設計原則

        界面中的視覺關系我標注出來了,我們可以思考別人作品是通過什么來表達這種層次關系。其實可以直觀看出運用有顏色、大小,明暗對比(列表文字關系)。

        UI排版中常用的四大排版設計原則

        頂部視覺焦點第一也是導航比較重要的一部分,下面介紹設計師和聯系圖標,右邊頁面頂部視覺重量大,里面文字通過明暗關系區分層級。

        UI排版中常用的四大排版設計原則
        UI排版中常用的四大排版設計原則

        視覺重量

        如何去衡量視覺重量,影響視覺重量的因素有大小、對比、顏色、留白、形狀、位置等等,那么在一個界面中如何把握視覺重量的比例,下面看幾個例子:

        UI排版中常用的四大排版設計原則

        大家看完有什么感受嗎?他們大小都是120px。

        第一個例子為何左邊看起來比右邊大

        第二個例子為何黑色視覺重量比較大

        第三個例子為何紅紫色比左邊方塊更吸引眼球

        上面三個場景我們會在界面中,圖標設計中會經常遇到,下圖是調整后的大小左邊方形大小是108px右邊圓形還是120px

        UI排版中常用的四大排版設計原則

        圖左邊為何我會第一時間留意中間logo 而不是大面積的藍紫色,因為留白,周圍沒有任何元素。

        圖右邊按鈕第一時間吸引我,這就是通過顏色來吸引我的視覺焦點,需要關注的重點的地方。

        UI排版中常用的四大排版設計原則

        圖左邊購買按鈕和評分,購買按鈕第一進入眼睛,黑色在白底上視覺重量比較大。

        圖右邊選座購票區域,都是圓形,通過顏色來區分他們之間的層級關系,重要的內容通過顏色強調,次要的通過明暗關系來表達。

        視覺方向

        前面講了視覺重量,它能第一時間把你帶到特定重要的位置,那么接下來視覺方向是引導的一個作用,設計師要做的就是通過視覺引導,讓用戶能快速完成任務和達到預期目標,常用的視覺引導有Fpattern 和 Zpattern,下面來和大家詳細說下。

        UI排版中常用的四大排版設計原則

        左邊圖標和右邊列表形成一個豎向軸的概念,那么就會有線,線連接元素的方向。

        右圖再看下形成Z字結構,就是我們說的Z模式。

        UI排版中常用的四大排版設計原則

        上圖6個功能入口的圖標水平排列,內部系統的建立一個平行軸的關系,所以視覺方向比較清晰。

        總的來說要形成視覺方向就需要有線,這條線是看不見摸不著,他是通過軸來形成。

        如何形成軸的概念,那通過對齊,相同形狀元素。

        總結

        上面一共說了UI排版中常用的四大排版設計原則,綜合使用能給排版設計帶來質的提升,視覺焦點、層次結構、視覺重量,三者相互影響。

        最后視覺方向是前面三者影響的結構,用戶能否順利在你的產品完成任務,達到預期目標,全靠視覺方向指引,那么這些我們通過大小、對比、顏色、留白、形狀、位置等來協調使用他們。

        免責聲明:本文由小編轉載自網絡,旨在分享提供閱讀,出處不可查,如有侵權請聯系我們進行刪除,更多精彩內容請關注UI培訓官網

        預約申請免費試聽課

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

        上一篇:【切圖】UI設計師要懂得切圖技巧
        下一篇:關于Tab設計,你不得不知道的事

        淺談設計中的加載

        平面設計中的印刷知識與印刷尺寸

        教你如何把手機里的自拍照片轉成手繪照

        如何將品牌基因融入到產品設計中?

        • 掃碼領取資料

          回復關鍵字:視頻資料

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

        • 視頻學習QQ群

          添加QQ群:1143617948

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

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

        選擇城市和中心
        貴州省

        廣西省

        海南省

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