激情五月天婷婷,亚洲愉拍一区二区三区,日韩视频一区,a√天堂中文官网8

<ul id="buwfs"><strike id="buwfs"><strong id="buwfs"></strong></strike></ul>
    <output id="buwfs"></output>
  • <dfn id="buwfs"><source id="buwfs"></source></dfn>
      <dfn id="buwfs"><td id="buwfs"></td></dfn>
      <div id="buwfs"><small id="buwfs"></small></div>
      <dfn id="buwfs"><source id="buwfs"></source></dfn>
      1. <dfn id="buwfs"><td id="buwfs"></td></dfn>
        始創(chuàng)于2000年 股票代碼:831685
        咨詢熱線:0371-60135900 注冊有禮 登錄
        • 掛牌上市企業(yè)
        • 60秒人工響應
        • 99.99%連通率
        • 7*24h人工
        • 故障100倍補償
        全部產(chǎn)品
        您的位置: 網(wǎng)站首頁 > 幫助中心>文章內容

        Web設計師應遵循的高效設計原則之三:對齊

        發(fā)布時間:  2012/9/13 14:51:01
         《寫給大家看的設計書》一書把復雜的設計原理凝煉為對比、重復、對齊和親密性四大設計原則。本系列文章將分別詳細闡述四個設計原則中的重點因素及輔助工具。本文為第三篇,講述對齊在網(wǎng)站設計中的重要作用及輔助工具。

          主要針對酒店行業(yè)和聯(lián)邦政府進行Web開發(fā)的Ryan Boudreaux針對四大設計原則寫了一系列文章,本文為第三篇《Effective design principles for web designers: Alignment》的譯文,內容如下:

          對齊是“Web設計者應遵循的高效設計原則”之三。

          對齊

          

         

          無論你是否意識到,對齊都是大部分Web設計中必不可缺少的部分;它作用于幕后,是一個隱藏設計元素。它起初可能只是一個PSD文件,也可能是設計模版中不可缺少的部分,是Web設計的主干。你的網(wǎng)站可能有一套布局(或網(wǎng)格),作為主要的框架,以支持網(wǎng)站的外觀、體驗、導航、工具欄、頁眉、頁腳等。

          作為高效設計原則,“對齊”可以幫助我們對“元素如何在頁面中布局”做出明確的決定。利用戰(zhàn)略層上的布局,可以設計出更強大、更吸引人的作品;利用網(wǎng)格系統(tǒng),可以為每個元素的定位提供標準的指導。沒有對齊策略,我們就會隨意安放元素,與其他相似元素產(chǎn)生很小甚至不會產(chǎn)生聯(lián)系。沒有對齊,網(wǎng)站的外觀及體驗就會變得雜亂無章。

          對齊策略已遠遠超越了對齊、浮動屬性及文本和圖片的對齊方式,它還包含其他的因素,比如用戶的交互、信息架構、網(wǎng)格及Web設計元素的組織。

          關于Web設計中的對齊,你是如何做決策的?

          最主要的考慮因素包括對典型用戶交互方式的分析,如眼動追蹤測試。針對“用戶如何瀏覽網(wǎng)頁”的多項研究已開展,內容包含眼睛是如何瀏覽頁面的,從開頭到結束的掃描路徑是什么,用戶如何決定跳轉到的位置及下次點擊位置等。Charles O’Connell在Usability.gov上發(fā)起的討論(如圖1)介紹了眼動追蹤測試的含義。從這些研究可以看出,它的要點之一是大部分用戶會沿著“F”形狀的“熱點圖”來掃描頁面內容,即從頂部開始(正如頭條往往比圖片更吸引眼球),僅掃描幾個詞后,便沿頁面的左側掃描并尋找更多有吸引力的內容,并在幾秒內做出點擊動作。

          

         

          圖1

          同時還要注意信息架構(IA),包括整體概念模型、設計計劃、架構及組織方式。該過程可以描繪出網(wǎng)站的層級結構、核心導航、標準、規(guī)范、分類標簽、可用性,用頁面線框圖、站點設計圖解、原型圖來代替詳細的設計模式。圖2展示了一個簡單網(wǎng)站的信息架構概念模型,它提供了開發(fā)流的起點,最終對主要元素進行對齊設置,以滿足動態(tài)網(wǎng)站模型。

          

         

          圖2

          利用對齊,如何創(chuàng)建引人注目的網(wǎng)站?

          對齊原則帶來了條理,而條理體現(xiàn)了協(xié)調,所有的元素平衡合理地安排在Web頁面中。以有序的方式組織頁面元素,從而構建成功的產(chǎn)品并健康的發(fā)展。

          圖3所示的簡單布局以左側頂部的Logo開始,頁眉和導航區(qū)域位于右側區(qū)域,并與之水平對齊;Banner圖位于導航的下方。左側欄與Logo位于一列,一直延伸到頁腳的上方。主內容區(qū)與Banner圖和頁眉左對齊。右側欄占據(jù)了剩余空間,與頁眉/導航及Banner圖的右邊緣垂直對齊。頁腳橫跨頁面的整個寬度。

          

         

          圖3

          注意,Logo、左側欄、內容區(qū)、右側欄及頁腳部分的文字均為左對齊,導航及Banner圖區(qū)域為居中對齊。

          這僅僅是一個舉例,來說明如何清晰地布局網(wǎng)格系統(tǒng)中的頁面元素。

          網(wǎng)格系統(tǒng)

          一些網(wǎng)格系統(tǒng)及模版可以指導我們布局Web設計元素。下文列舉了兩個此類系統(tǒng),你可以修改其中各種設置,如列、排版,并以CSS和HTML格式進行保存,從而快速提供原型,或整合入現(xiàn)存的開發(fā)環(huán)境中。

          由Web開發(fā)者Rasmus Schultz提供的Grid Designer 是一個在線工具,它默認提供4列,寬分別為174px,總寬度為800px,其中每列間有20px的間隙,頁面兩側分別有22px的留白。在該案例中,默認的排版樣式為Veranda:段落內文字大小為10px,行高為1;標題采用默認字體,大小為16px,行高為2。如圖4。

          

         

          圖4

          960 Grid由Web設計師Nathan Smith設計,可供下載。它提供了一個系統(tǒng),通過常用維度來分割寬為960px的頁面來流程化Web開發(fā)。它提供了兩種選擇:12列和16列,每一種選擇即可單獨使用也可混合使用。12列網(wǎng)格將寬均衡地分割成12列(每列寬為60px),而16列網(wǎng)格則分割為16列(每列寬40px),每列左右兩側具有10px的間隙,各網(wǎng)格最外側均留出20px的空白。

          

         

          圖5

          響應式對齊

          針對響應式Web設計,W3C已推出了CSS彈性框布局模塊(CSS Flexible Box Layout Module)工作草案,簡稱“Flexbox”。Editors Draf于2012年8月13日進行了更新,它描述了CSS框模塊的規(guī)范,以優(yōu)化用戶界面的設計。在強性布局模塊中,彈性容器中的子元素可被定位于任何位置,可“彈性”變換大小,即可以增大充滿未用空間,也可縮放以避免溢出,可很容易地對子元素進行水平和垂直對齊。這些框的嵌套(如水平中的垂直嵌套、垂直中的水平嵌套)可用來構建兩種維度的布局。圖5是來自Editors Draf的一個插圖。

          

         



        本文出自:億恩科技【mszdt.com】

        服務器租用/服務器托管中國五強!虛擬主機域名注冊頂級提供商!15年品質保障!--億恩科技[ENKJ.COM]

      2. 您可能在找
      3. 億恩北京公司:
      4. 經(jīng)營性ICP/ISP證:京B2-20150015
      5. 億恩鄭州公司:
      6. 經(jīng)營性ICP/ISP/IDC證:豫B1.B2-20060070
      7. 億恩南昌公司:
      8. 經(jīng)營性ICP/ISP證:贛B2-20080012
      9. 服務器/云主機 24小時售后服務電話:0371-60135900
      10. 虛擬主機/智能建站 24小時售后服務電話:0371-60135900
      11. 專注服務器托管17年
        掃掃關注-微信公眾號
        0371-60135900
        Copyright© 1999-2019 ENKJ All Rights Reserved 億恩科技 版權所有  地址:鄭州市高新區(qū)翠竹街1號總部企業(yè)基地億恩大廈  法律顧問:河南亞太人律師事務所郝建鋒、杜慧月律師   京公網(wǎng)安備41019702002023號
          0
         
         
         
         

        0371-60135900
        7*24小時客服服務熱線