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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文章標(biāo)題：網(wǎng)頁(yè)設(shè)計(jì)如何做好對(duì)齊
分享URL：http://www.bm7419.com/news41/114491.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、服務(wù)器托管、用戶(hù)體驗(yàn)、網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、品牌網(wǎng)站制作

廣告

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