<output id="jbxdv"></output>

      1. 頁面樣式:(三)網格和輔助線

        • 2022-04-01 16:03:52
        • 閱讀次數:
        • 作者:盈嵐科技小編
        • 來源:http://www.freenetsites.com

        3.網格和輔助線

        網格系統介紹

        通過現實中與部分學員的接觸和讀者的反饋,昆明網站建設筆者發現很多朋友對網格系統(Grid System)和輔助線并沒有清晰的認識,尤其是網格系統(此處特指前端設計中所使用的Grid System,如http://960.gs和響應式網頁設計中使用的http://unsemantic.com 等,在Axure中輔助線扮演網格系統的角色)。在國內互聯網中很多人稱其為【柵格】,此處我們不討論稱呼問題。事實上,無論你習慣怎樣稱呼它,Grid System在設計過程中都起著至關重要的作用。下面,在開始介紹Axure RP8中的網格和輔助線之前,筆者覺得有必要對其專有術語進行適當講解,以便廣大讀者能夠更近一步熟悉它。

        首先要介紹一下關于網格系統的術語,用來描述網格系統中各種組件的詞匯看上去很簡單,但它們卻是非常不具體的。例如“列”(Column)的概念,看上去足夠簡單,但是在一個基于8列網格的頁面中,你可能會創建一個只需要2列的文本內容,這種情況下,Column所呈現的意義是不精確的。甚至一些基于網格設計的工藝類書籍也并不總是贊同這些術語,比如regions,在網格系統中指垂直分割的區域;fields,在網格系統中指水平分割的區域。正如你所見,這兩個英文單詞都可以譯為【區域】,這些術語看上去特別容易讓人(包括外國人)感覺混亂或重復,其實它們代表著不同的意思,下面來看一下網格系統中需要用到的幾個術語詞匯。

        單元(Unit):網格系統中的每一個垂直區塊,也就是垂直分割頁面最小的單元(小單元)。如圖225所示,960像素寬度,12個單元。

        1.jpg

        (圖225)

        列(Columns): 一組列是一個大的單元,在工作區域中組合在一起來幫助我們組織規劃不同的呈現方式。比如大多數文本列都需要至少2個大的單元,以960像素寬,12個小單元為例,可以將其分為2列,每列6個小單元;或者3列,每列4個小單元,等等。如圖226所示,12個小單元分為8列,每列2個小單元。

        2.jpg

        (圖226)

        垂直分割區域(Regions):垂直分割區域與列類似,將頁面垂直分為幾個部分。比如一個12單元、4列的網格系統,可以垂直分割為3個區域,左側的區域占2列,剩余2個區域各占一列,如圖227所示。

        1.jpg

        (圖227)

        水平分割區域(Fields):將頁面水平分割為不同區域(水平分割區域是用高度來計量的,幫助我們以Y坐標為基準來組織規劃內容的呈現方式),見圖228。水平分割區域可以使用多種方式來計算,不過,使用黃金比例進行分割是最高效的方法。關于黃金分割和斐波那契數列在互聯網產品設計中的應用,讀者們可通過網絡搜索,有很多資料可供參考,如老版本的Twitter網頁,見圖229。新版的Twitter LOGO的設計案例,見圖230。參考資料:http://designshack. net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/

        1.jpg

        (圖228)

        2.jpg

        (圖229)

        1.jpg

        (圖230)

        間距(Gutters): 指每個小單元和列之間的空白區域。當小單元合并成列時,也會將間距一起合并到列中,但并不包括最左側和最右側的空白區域(也就是左邊距和右邊距,padding-left&padding-right)。

        外邊距和內邊距(Margin&amp; Padding): 外邊距是指單元和列以外的空間;內邊距是指單元和列最左、最右、最上、最下的空間,如圖227最左側和最右側的空白區域。如果想進一步了解Margin&amp; Padding 可搜索【盒子模型】,或者使用Chrome、Safari等瀏覽器,右鍵單擊網頁中的任意元素,在彈出的關聯菜單中選擇【審查元素】,然后通過【盒子模型】分析元素的內邊距、外邊距,見圖231。

        1.jpg

        (圖231)

        元素(Elements):指頁面中的某個組件,比如一個按鈕、一張圖像、一段文本等。

        模塊(Modules):指由一組元素組成的內容或功能,比如會員注冊模塊,就是由標簽、文本輸入框、按鈕等元素組成。

        至此,網格系統中的術語詞匯就介紹完畢了,昆明網站制作建議各位讀者空閑之余能夠學習一些HTML+CSS+JavaScript的基礎知識,這樣能幫助你深刻理解網頁是由什么構成的,它們的工作原理是怎樣的。事實上,即便是對完全不懂編碼的讀者來說不會花費很多時間和精力,因為學習這些基礎知識并不等于擁有使用HTML、CSS和JavaScript去編寫產品或原型的能力,那需要長時間刻苦的學習和工作中的實戰經驗積累。進一步說,學習前端知識可以幫助你理解你所看到的網頁背后是什么,有了這些知識作為基礎,你可以更加順暢地與真正的開發人員溝通。

        Axure中的網格和輔助線

        在Axure中輔助線對保持布局與部件對齊有非常大的幫助。你可以為單獨的頁面創建輔助線(局部輔助線),也可以給所有頁面創建全局輔助線。

        添加局部輔助線:添加輔助線到當前頁面,用鼠標單擊設計區域上方和左側的標尺,然后拖動鼠標把從水平或垂直輔助線拖拽到設計區域。

        添加全局輔助線:給所有頁面添加輔助線,按住Ctrl/Command,然后鼠標單擊標尺并拖拽輔助線到設計區域,這樣所有頁面都被添加了輔助線,見圖232。

        1.jpg

        (圖232)

        使用預置設置創建輔助線:可以通過Axure 內置的預設添加輔助線,點擊菜單欄【布局>網格和輔助線>創建輔助線】,或者右鍵單擊設計區域,選擇【網格和輔助線>創建輔助線】。這里有多種預置可供選擇;或者自定義你的布局,還可以選擇添加全局輔助線或當前頁面輔助線,見圖233。

        網格設置:右鍵單擊設計區域,在彈出的關聯菜單中選擇【網格和輔助線>網格設置】。

        ● 顯示網格:切換網格的顯示狀態。

        ● 對齊網格:切換部件與網格對齊。

        ● 間距:定義網格的交叉點之間的距離。

        ● 樣式:改變網格交叉線的風格樣式。

        ● 線:將網格樣式設置為線。

        ● 交叉點:將網格樣式設置為點。

        ● 顏色:改變網格的顏色,見圖234。

        1.jpg

        (圖233)

        2.jpg

        (圖234)

        輔助線設置(Guide Settings)

        ● 顯示全局輔助線:切換項目中全局輔助線的可見性。

        ● 顯示頁面輔助線:切換項目中頁面輔助線的可見性。

        ● 顯示自適應視圖輔助線:切換顯示自適應視圖輔助線可見性。

        ● 顯示打印輔助線:切換顯示打印輔助線可見性。

        ● 對齊輔助線:切換部件對齊到輔助線狀態。

        ● 鎖定輔助線:切換設計區域中輔助線的鎖定狀態。

        ● 全局輔助線顏色:改變全局輔助線顏色。

        ●頁面輔助線顏色:改變頁面輔助線顏色。

        ● 自適應提示顏色:自適應輔助線顏色。

        ● 打印提示顏色:打印輔助線顏色。

        對象對齊設置

        ● 對齊對象:切換部件是否與其他部件邊緣對齊。

        ● 對齊邊緣:切換部件之間對齊的像素大小。

        ● 垂直:設置部件垂直對齊的像素。

        ● 水平:設置部件水平對齊的像素。

        ● 對齊輔助線顏色:設置當部件對齊時輔助線的顏色,見圖236。

        1.jpg

        (圖235)

        2.jpg

        (圖236)


        當前文章標題:頁面樣式:(三)網格和輔助線

        當前URL:http://www.freenetsites.com/news/wzzz/3401.html

        上一篇:頁面樣式:(二)頁面樣式編輯器

        下一篇:Axure——交互基礎

        網站建設、抖音推廣、頭條推廣、微信朋友圈推廣、快手推廣專線:15368242187(微信同號)
        国产成人亚洲综合无码
        <output id="jbxdv"></output>