網(wǎng)頁設(shè)計如何做好對齊

對齊在設(shè)計的時候好像很容易做到，不管是Ps還是Sketch都有好用的對齊工具來幫助我們完成，但做到對齊真的是這么簡單嗎？為什么有時候像素明明已經(jīng)對齊了，但看起來感覺就是沒對齊呢？今天就來說說我遇到的一些對齊上的問題和我總結(jié)出來的6個小技巧。
   1.表單標(biāo)題與輸入內(nèi)容的對齊
    剛開始設(shè)計表單的時候我遇到的問題是糾結(jié)標(biāo)題文字、輸入框與內(nèi)容文字三者的對齊關(guān)系。因?yàn)檫@三種元素注定是不能同時保持對齊的，肯定有一個是例外，究竟把哪一個例外會讓頁面看起來比較整齊呢？現(xiàn)在大多數(shù)做法都是采取標(biāo)題和邊框?qū)R的設(shè)計，但其實(shí)還有另一種處理方式也非常值得借鑒，那就是根據(jù)表單不同的背景顏色來決定如何對齊，如下圖：

  2.巧用色塊
    當(dāng)有多個不同形狀圖標(biāo)的時候，很容易讓人覺得沒有對齊和大小不統(tǒng)一，盡管有時候像素已經(jīng)對齊了，這樣的多樣性加大了對齊的難度。經(jīng)常需要我們反復(fù)調(diào)整才能保證圖標(biāo)的視覺的對齊和大小統(tǒng)一。

    如果覺得在這方面比較難把握，有一個小竅可以幫助我們，就是給不一樣的圖形加上同樣大小和形狀的色塊，有相同的元素可以很好的減少不同形狀帶來的不統(tǒng)一的感覺，更容易對齊。

    不過需要注意的一點(diǎn)是，加上色塊也會讓圖標(biāo)占得視覺比重加重，更加突出，使用的時候還是要考慮到使用場景是否需要。如果不想過于突出的情況，也可以借助輔助線來調(diào)整圖標(biāo)大小，保持對齊。
  3.方形縮小一點(diǎn) 
    不知道大家有沒有注意到，同樣大小的圓形和方形，從視覺上看方形會顯得大一些。我在畫圖標(biāo)的時候遇到了這個問題，雖然圓形的直徑與方形的寬相等，但是始終覺得方形要大一些。因?yàn)榉叫蔚倪吘€是一條線，而圓形是一個頂點(diǎn)。

    其實(shí)這一點(diǎn)從英文字母的設(shè)計我們就可以看出來，英文里的“O”的大小要比其他字母高一點(diǎn)點(diǎn)。因?yàn)椤癘”是圓形的，圓形與頂邊的接觸面積是兩個點(diǎn)，而其他其他字母接觸頂邊底邊是線，所以造成了視錯覺，不止是“O”同樣是圓形的“Q、G、C、U、J”圓形邊都會高出邊線，讓接觸點(diǎn)變成線來保證視覺上的對齊。

      所以如果是同時出現(xiàn)方形和圓形的圖標(biāo)可以有意識的把方形縮小一點(diǎn)，來與圓形保持視覺上的統(tǒng)一。

      4.圖文列表的對齊
    大家在設(shè)計圖文列表的時候會不會因?yàn)槲淖謨?nèi)容的多少不好控制而糾結(jié)對齊方式，我就遇到了這樣的問題。由于運(yùn)營的需要，列表的標(biāo)題文字的大字符給的比較多，需要兩行顯示。而標(biāo)題字?jǐn)?shù)的波動也比較大，只有一行幾個字的的情況也經(jīng)常會有，這就導(dǎo)致了一個尷尬的情況，如果讓文字信息頂對齊，逐行往下推的方式，那么當(dāng)只有一行標(biāo)題的時候，就會顯得下面比較空，如下圖。

    還有一種常見的方式是文字分兩部分，分別頂對齊和底對齊，這樣就可以保持列表的上下兩端是整齊的。不過這種方式也有缺陷，當(dāng)只有一行文字的時候頂對齊和底對齊，會導(dǎo)致內(nèi)容比較分散，本應(yīng)該是視覺關(guān)注點(diǎn)的中間的位置卻留白了。

    后來我找到了一種目前看到的比較好的解決辦法，就是內(nèi)容的居中對齊，如下圖。

    這樣當(dāng)內(nèi)容少的時候是上下兩部分的留白間距加大，與頂對齊相比，留白區(qū)域被上下兩個間距分擔(dān)，不會顯得那么空；與上下對齊相比，中間不會變成空白，內(nèi)容不會被分散。

5.文字+圖標(biāo)的按鈕對齊
    按鈕上除了文字有時候也會加上圖標(biāo)來輔助，純文字的情況比較好處理，直接與色塊保持居中對齊就可以了一般不會有什么問題。但是加上圖標(biāo)后，在居中對齊有時候就會出現(xiàn)下面這種情況。
      常規(guī)的居中對齊的從視覺上看起來感覺偏左了。因?yàn)榫€性的圖標(biāo)與文字相比，視覺比重比價輕，所以會覺得左邊比較重沒法達(dá)到平衡。往右邊移動一些，才可以達(dá)到視覺上的對齊。

    再看看面性圖標(biāo)，面形形狀占比不會像線性那么輕，一般還是可以和文字達(dá)成平衡的。所以直接居中對齊也不會有什么問題。

    總之帶圖標(biāo)的按鈕還是需要我們特殊照顧，不能和只有文字的按鈕一樣直接居中對齊就不管了。具體可以根據(jù)實(shí)際情況做出調(diào)整，而且這種按鈕多數(shù)情況下會選擇整體切圖，比較可控。如果是分開切圖的話，需要注意標(biāo)注定位關(guān)系。
   6.用切圖來控制對齊
    一般我們在切圖的時候都會讓圖標(biāo)在切圖中保持居中，如下圖。

    這樣的方式很好的保持了切圖大小的統(tǒng)一，但是有時候也會出現(xiàn)一些問題，比如頁面左上角的返回按鈕、標(biāo)題右側(cè)的“全部”、“更多”的箭頭，會因?yàn)榍袌D四周的空白區(qū)域，而讓圖標(biāo)與其他模塊之間看起來沒有對齊，距頁面的邊距和其他模塊不同，如下圖。

    左邊“更多”的箭頭雖然切圖是對齊的但是視覺上明顯偏左，沒法與別的模塊間保持對齊，右邊的才保持了對齊。所以切圖的時候元素不一定要居中，而是需要考慮到切圖所在的位置，做出調(diào)整，保持視覺上的對齊，而不是切圖面積上的對齊。
對于圖片也是一樣的道理，有些圖片的視覺重心會偏左或偏右，舉個例子像下面這種圖，雖然像素上是絕對對齊的，但因?yàn)檫@張圖的視覺重心在右邊，會讓我們感覺它偏右而沒有居中對齊。

    這種情況雖然可以移動圖片的位置，讓整張圖往左移，但是這樣的話，會給開發(fā)人員帶來一定程度的麻煩，居中對齊適配的時候很好做，但如果你的標(biāo)注不管是改成絕對定位，或是定一個比較奇怪的百分比，都不是最優(yōu)方案。

    其實(shí)我們完全可以通過切圖來控制最后的視覺對齊，只需要把切圖右側(cè)擴(kuò)充一些空白區(qū)域，在保持圖像的居中對齊就可以解決了。這樣開發(fā)過程中也不用為這張圖做特殊處理，我們可以通過切圖的面積位置來保證視覺上的對齊。
    總結(jié)
    今天主要談的是一些對齊上容易出現(xiàn)的問題以及怎么解決的小技巧，對齊看著簡單其實(shí)也有不少需要注意的地方：
    1.表單標(biāo)題與輸入內(nèi)容的對齊，如果是強(qiáng)背景可以讓標(biāo)題與邊框保持對齊；弱背景擇可以讓標(biāo)題與內(nèi)容文字保持對齊。
    2.添加相同形狀和大小的色塊，可以幫助不同形狀的圖標(biāo)保持對齊統(tǒng)一。
    3.相同直徑和寬度的圓形和方形，方形縮小一點(diǎn)可以在視覺上保持對齊等大。
    4.圖文列表的對齊，文字內(nèi)容部分可以采取居中對齊的方式。
    5.文字+體表的按鈕，線性圖標(biāo)視覺占比輕一般需要手動調(diào)整，直接居中容易出現(xiàn)視覺上不對齊的情況。

      6.切圖的時候圖標(biāo)不一定要居中，而應(yīng)該考慮到所在的位置；圖片的話應(yīng)該根據(jù)視覺重心調(diào)整用切圖面積來保持視覺上的居中對齊。

（鄭重聲明：本文版權(quán)歸焱小玖所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請聯(lián)系我們修改。）

文章標(biāo)題：網(wǎng)頁設(shè)計如何做好對齊
URL網(wǎng)址：http://www.bm7419.com/news/114491.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、網(wǎng)站營銷、網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、網(wǎng)站改版、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)