<progress id="vtrbb"><i id="vtrbb"></i></progress>
<track id="vtrbb"></track><sub id="vtrbb"><p id="vtrbb"><span id="vtrbb"></span></p></sub>

      <output id="vtrbb"></output>
        <b id="vtrbb"><b id="vtrbb"><progress id="vtrbb"></progress></b></b>

          <track id="vtrbb"></track>

          首頁 - 互聯網課堂 - 網頁設計

          網頁設計中的留白原理

          發布時間:2018-05-21 18:41:03訪問人數:作者:Chuckie Chang
          本文標簽:

          設計中存在很多關于留白的只是,零零散散在網上也看過很多,總感覺比較零散,自己根據自己的感覺,重新把留白的原理和一些技巧系統的歸納整理了以下,也對自己的一個提升。分享給大家。本文章由沒位道博主Chuckie Chang分享整理, 歡迎大家交流。
          外文:Whitespace

          感知概念:歸結于網頁設計中的負空間,它將網頁設計中的圖形、文字、行列、圖片和其它元素合理的布局到整個頁面空間里,使其顯得優雅和諧并不破壞原有的空間結構,屬于一種空間關系。

          網頁中留白的運用方式 :How to Use Whitespace

          1.保持導航和內容的清晰流暢。
          留白不代表一定要用白色,而是預留出一些范圍來組織頁面空間中的元素,組織頁面中的細節: 導航、頁眉頁腳、圖像、文字、列表、LOGO、圖片等  

          如圖所示:拿google首頁和google產品做一個對比,同一個空間下的logo、導航、文字的清晰元素布局

          網頁設計留白1.jpg

          網頁設計留白2.jpg

          2. 增強文字和圖片的可讀性。

          研究用戶,設計師即使是創建一些簡單簡潔的設計,其過程也是非常復雜的。  

          如圖所示:這是國內外最知名的專注寫作的社區,標題與摘要,側邊欄與正文區的區隔

          網頁設計留白3.jpg

          網頁設計留白4.jpg

          3. 建立平衡和諧的布局。

          網格布局是貫穿整個網頁設計的,網格設計在美國視覺設計中是一門深入的學科,保持各種網格的輕重,平衡設計模塊。  

          如圖所示:彈窗與正文的網格平衡,網格系統的黃金比例的平衡

          網頁設計留白5.jpg

          網頁設計留白6.jpg

          網頁設計留白7.jpg

          4. 減少視覺疲勞。

          充分利用色彩、光、影來適配人的視覺系統,減少疲勞,調配感官色。  

          如圖所示:使用設計師網站和谷歌音樂做一個對比,寬屏下的視覺效果和作品hover時的文字按鈕間距大小差異, 谷歌音樂內容和純色底色,頭部底部的距離差異。

          網頁設計留白8.jpg

          網頁設計留白9.jpg

          5. 能夠給元素的藝術表現提供可持續的空間。

          倘若你孤單一人,站在一個2平米的石板上和站在一個10平米的石板上,在10平米的范圍內你的周圍可以放置音響,你可以跳舞(哈哈,抱歉,我就是熱于跳舞的才打這個比方),在2平米的石板上你可以拿個麥克風喊麥,可以玩倒立。留白也可以說能夠預留儲存空間,便于擴展和利用。  

          如圖所示:人的活動空間,文字的表達空間

          網頁設計留白10.jpg

          網頁設計留白12.jpg

          尾聲:

          總之,我們分析留白的時候,需要引入原生的一些原理,會比較容易理解。比如美術中的透視,色彩關系,空間關系,比如網格設計理論,比如網頁設計中的中英文字體規范,分辨率,安全寬度,首屏高度規范。通過這些原生的原理,我們能更好的把握設計布局和設計細節。OK!希望對大家有幫助。

        1. 項目經理.png

          掃描添加

          項目經理微信

          享受專業顧問服務

        2. 十二君QQ群.png

          掃描二維碼加QQ群

          與十二君一起征戰天下

        3. 贊+1
          分享:

          版權:【注明為本站原創的文章,轉載請注明出處與原文地址!本站部分轉載文章能找到原作者的我們都會注明,若文章涉及版權請發至郵箱:[email protected],我們以便及時處理,可支付稿費。向本站投稿或需要本站向貴司網站定期免費投稿請加QQ:957505575】 更多信息請關注微信公眾號:cnjunnet   十二君微信:webjunnet

          上一篇
          下一篇
          大神 大神
          桔子seo

          原本新聞詳情廣告.jpg

          欄目熱文
          相關文章

          助君網絡 Copyright ? 2012-2020. 未經許可,不可拷貝或鏡像 滬ICP備17004436號  法律顧問:張素素

        4. QQ
        5. 電話
        6. 首頁
        7. 留言
        8. 返回頂部
        9. 恭喜您~
          留言提交成功o(∩_∩)o
          我們將快馬加鞭與您取得聯系。
          A片免费一级无码
          <progress id="vtrbb"><i id="vtrbb"></i></progress>
          <track id="vtrbb"></track><sub id="vtrbb"><p id="vtrbb"><span id="vtrbb"></span></p></sub>

              <output id="vtrbb"></output>
                <b id="vtrbb"><b id="vtrbb"><progress id="vtrbb"></progress></b></b>

                  <track id="vtrbb"></track>