中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2021-05-21    分類: 網(wǎng)站建設(shè)

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

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

    如果覺得在這方面比較難把握,有一個(gè)小竅可以幫助我們,就是給不一樣的圖形加上同樣大小和形狀的色塊,有相同的元素可以很好的減少不同形狀帶來的不統(tǒng)一的感覺,更容易對(duì)齊。
網(wǎng)頁設(shè)計(jì)如何做好對(duì)齊

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

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

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

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

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

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

    后來我找到了一種目前看到的比較好的解決辦法,就是內(nèi)容的居中對(duì)齊,如下圖。
網(wǎng)頁設(shè)計(jì)如何做好對(duì)齊

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

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

    再看看面性圖標(biāo),面形形狀占比不會(huì)像線性那么輕,一般還是可以和文字達(dá)成平衡的。所以直接居中對(duì)齊也不會(huì)有什么問題。
網(wǎng)頁設(shè)計(jì)如何做好對(duì)齊

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

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

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

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

    其實(shí)我們完全可以通過切圖來控制最后的視覺對(duì)齊,只需要把切圖右側(cè)擴(kuò)充一些空白區(qū)域,在保持圖像的居中對(duì)齊就可以解決了。這樣開發(fā)過程中也不用為這張圖做特殊處理,我們可以通過切圖的面積位置來保證視覺上的對(duì)齊。
    總結(jié)
    今天主要談的是一些對(duì)齊上容易出現(xiàn)的問題以及怎么解決的小技巧,對(duì)齊看著簡單其實(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)可以在視覺上保持對(duì)齊等大。
    4.圖文列表的對(duì)齊,文字內(nèi)容部分可以采取居中對(duì)齊的方式。
    5.文字+體表的按鈕,線性圖標(biāo)視覺占比輕一般需要手動(dòng)調(diào)整,直接居中容易出現(xiàn)視覺上不對(duì)齊的情況。

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

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

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

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

廣告

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

微信小程序開發(fā)
桑植县| 虞城县| 柳河县| 呼伦贝尔市| 夏河县| 金乡县| 盐边县| 曲松县| 北宁市| 松滋市| 山东| 青河县| 佛山市| 上思县| 仪征市| 定结县| 内乡县| 莲花县| 茂名市| 旬阳县| 邢台市| 新丰县| 闽侯县| 军事| 晋宁县| 白水县| 老河口市| 河西区| 甘孜| 莫力| 邢台市| 原平市| 成都市| 安岳县| 贵定县| 黄石市| 巴马| 龙门县| 淮滨县| 安阳县| 乌兰察布市|