手機端的詳情頁設(shè)計成功與否，直接作用于了商品的成交量。本文從對齊、親密性、對比和重復(fù)四大版面設(shè)計的原則切入，細(xì)致入微地分析了不同情況下如何將版面設(shè)計的四大原則運用于手機端的詳情頁。推薦感興趣的童鞋們閱讀學(xué)習(xí)～

關(guān)于手機端的詳情設(shè)計，版式可以說是設(shè)計師必須要掌握的核心能力，因為詳情頁是講產(chǎn)品的詳細(xì)內(nèi)容，只有合理的圖文排版才能讓用戶更好的讀內(nèi)容。而說到版式，就必須先提 4 條基本原則，這些原則一直都是版式教程的必講知識點，有大量文章和書籍都做過詳細(xì)介紹，不過根據(jù)設(shè)計類型的不同會有出入，這里我就結(jié)合手機端的瀏覽體驗，來講講 4 原則的運用，版式設(shè)計的 4 條原則分別是：對齊、親密性、對比和重復(fù)。

這是由美國設(shè)計師 Robin Wulliams（羅賓·威廉姆斯）在《寫給大家看的設(shè)計書》中首次提出，準(zhǔn)確講這 4 條原則更側(cè)重排版設(shè)計，可以說幾乎所有排版中，都要用到該原則，它是排版“心法”，更是需要遵循的基礎(chǔ)準(zhǔn)則，并且 4 條原則都不是孤立存在，通常會結(jié)合使用，很少有作品只用其中某條原則。

一、對齊

對齊很好理解，就是將內(nèi)容用某種對齊規(guī)則進行排列，使它們產(chǎn)生視覺聯(lián)系，這樣畫面會顯得規(guī)整和嚴(yán)謹(jǐn)。如圖所示，盡管只是簡單的文字對齊，但畫面卻有明顯差異：沒對齊的左圖文字非?；靵y，讓人不適；而對齊的右圖文字井然有序，便于閱讀。

根據(jù)對齊規(guī)則不同，常見對齊方式有以下 5 種。

1.左對齊

左對齊是以左線為基準(zhǔn)的對齊，這是最常用的對齊方式，當(dāng)我們?yōu)g覽橫向排版的信息時，左對齊更符合視線從左往右的閱讀習(xí)慣，因此廣泛用于標(biāo)題和內(nèi)文的排版當(dāng)中。

2. 居中對齊

居中對齊是以中線為基準(zhǔn)的對齊，也是一種對稱均衡的布局方式，對于手機端，常用于標(biāo)題排版，當(dāng)然有些文字不多的內(nèi)文偶爾也會用到，因為手機版面的寬度偏窄，當(dāng)標(biāo)題居中對齊后，既不影響閱讀，也能讓視覺平衡、舒適。

3. 左右對齊

左右對齊是讓兩端以左右線為基準(zhǔn)同時對齊，這種對齊最為工整，常用于文字較多的內(nèi)文排版，如下圖，左右對齊能將大段文字變成方形，整齊有序，利于閱讀。另外如果內(nèi)文配有圖片，最好也和文字兩端對齊。

對于內(nèi)文的左右對齊，還需注意“避頭尾”，避頭尾是說文中的標(biāo)點符號盡量不出現(xiàn)在行首或行尾，因為首尾的標(biāo)點會讓文字出現(xiàn)空缺，影響整齊程度。

其實標(biāo)題有時也能左右對齊，通過對齊將文字圖形化、塊面化，這樣能增強畫面的形式感，如下圖所示。

4. 右對齊

右對齊是以右線為基準(zhǔn)的對齊，這種對齊和我們視線的移動路徑剛好相反，使得閱讀沒那么方便，因此不管標(biāo)題還是內(nèi)文，用的都相對較少。如下圖，當(dāng)畫面的留白靠右或有特殊的版式需求時，才會用到右對齊。

5. 頂對齊

頂對齊是以頂端為基準(zhǔn)的對齊，這是豎向排版才有的對齊方式，而豎向排版常用于中國風(fēng)中，雖然閱讀不便，但能體現(xiàn)古典和文藝，可以說頂對齊是國風(fēng)排版的專屬對齊。

總結(jié)一下，對于手機端，標(biāo)題常用左對齊或居中對齊；而內(nèi)文若文字偏少用左對齊、偏多則用左右對齊；豎向排版優(yōu)先頂對齊。但這是一般情況，實際還需根據(jù)版面做靈活調(diào)整。

最后提下“絕對對齊”和“視覺對齊”，一般我們都用軟件的對齊工具進行對齊，而軟件的衡量方式是以元素邊界為基準(zhǔn)，這是“絕對對齊”，例如下面這段文字用的就是軟件工具的“絕對對齊”。

從物理角度看，上面三行文字已完全對齊，但從視覺角度看卻沒有，我們會覺得第二行文字“原產(chǎn)地鮮果”偏右了一點點，這是因為字體大小、字形結(jié)構(gòu)的差異讓我們產(chǎn)生“視錯覺”，此時要從人眼感知出發(fā)，對文字進行適當(dāng)修正，把“原產(chǎn)地鮮果”往左偏移一點，這樣看起來才是對齊的，如下圖所示，這就是“視覺對齊”。

顯而易見，設(shè)計講的都是“視覺對齊”，不管文字還是圖形，當(dāng)用軟件工具進行“絕對對齊”后，若視覺不齊，那一定要調(diào)整至“視覺對齊”。當(dāng)然具體偏移多少并無固定數(shù)值，需要大家多多練習(xí)，提升設(shè)計感，將眼睛練成最好的測量工具。

二、親密性

親密性是指文字間的關(guān)聯(lián)性，簡單說，就是內(nèi)容的間距越小則關(guān)系越近；而間距越大則關(guān)系越疏，這和“格式塔原理”中的“接近性”相一致，一般我們會將相互靠近的內(nèi)容當(dāng)成一個組合，而把彼此遠(yuǎn)離的內(nèi)容當(dāng)成獨立模塊。如下圖所示，左圖內(nèi)容的行間距一致，信息沒層級，顯得非常冗長，無法快速辨別關(guān)聯(lián)性，不便于閱讀；而右圖則通過調(diào)整行間距，對信息進行層級的劃分，分出了標(biāo)題、內(nèi)文和模塊，這樣讀起來一目了然。

可見親密性是要我們通過調(diào)整間距來對內(nèi)容進行歸類分組，這樣信息才會層級分明、邏輯清晰，因此親密性又叫“分組”。在實際運用中，常用間距有 4 種，從小到大依次是：字間距、行間距、段間距和模塊間距，從文字到模塊，它們的間距會越來越大，關(guān)聯(lián)性也越來越弱，如下圖所示。

1. 字間距

字間距是指字與字間的距離，在內(nèi)容排版中，字與字的關(guān)聯(lián)性最強，間距也最小，不過隨著字體減小，字距需逐步增大，即是說字距要根據(jù)字體大小及時做出微調(diào)，不要只用默認(rèn)的 0。

一般來說，標(biāo)題字體較大，間距要更緊湊，但要避免壓縮過多而影響閱讀，常規(guī)字距在-50— -20；而內(nèi)文字體較小，間距則要適當(dāng)寬松，但也不要過于寬松而影響內(nèi)容的連貫性，常規(guī)數(shù)值在20—50，但數(shù)值只是參考，不要硬套，核心保證視覺和諧。

2. 行間距

行間距是指一行文字的最底部到下行文字最底部的距離，但為了方便調(diào)整，平時只需觀察行與行間的空白高度即可（以下簡稱“行間空白”）。

在關(guān)聯(lián)性上，行僅次于字，實際排版時，行間空白需大于字間距才能保證內(nèi)容的易讀性，否則會讓閱讀順序產(chǎn)生混亂，如下圖所示。

和字距一樣，行間空白也需隨著字體減小而增大，常規(guī)來說，標(biāo)題的行間空白最好小于半個字高；而內(nèi)文的行間空白建議為半個字高到 1 個字高，這樣的疏密程度看著舒適透氣、閱讀流暢。

3. 段間距

段間距即指段落與段落之間的距離，當(dāng)內(nèi)文需要分段時，就要注意調(diào)節(jié)段距，一般段距需遠(yuǎn)大于段落的行間空白才行。同樣若字體減小，段距還要更大，常規(guī)是 2 到 3 個字高，如下圖所示，這樣內(nèi)容層次才易區(qū)分，排版也更透氣。

不過手機端由于版面受限，用戶又是掃讀信息，因此詳情頁的文字都不會太多，所以段間距總體使用較少。

4. 模塊間距

模塊間距是指不同模塊間的距離，其中模塊是泛指，在版面中任何一個相對獨立的組合都算一個模塊，這里組合可小可大，具體需按實際排布做靈活劃分。但不管大組合還是小組合，都相對獨立，所以模塊的關(guān)聯(lián)性最弱，間距最大。

如下圖，在日常排版中，常見模塊間距有主標(biāo)題和副標(biāo)題的間距、標(biāo)題和內(nèi)文的間距、文字和圖片的間距等等，其中間距數(shù)值并無具體建議，因為隨著版式變化，差異往往較大，最好根據(jù)需求和感受靈活而定，但總體來說，間距要大于字距、行距和段距；另外隨著版面縮小，模塊間距還要適當(dāng)增大。

總之在手機端的排版設(shè)計中，運用親密性就是對內(nèi)容進行梳理和分層，實現(xiàn)視覺邏輯化，而調(diào)節(jié)字/行/段/模塊間距則是核心手段。注意這 4 種間距還有一個共同特性，就是隨字體減小，間距需逐漸增大，這是因為字體越小越顯擁擠，這時通過加大間距可增加透氣性。

三、對比

關(guān)于對比，本書已多次提到，從元素對比、色彩對比再到明暗對比等等，可見設(shè)計中對比是無處不在，而本小節(jié)說的則是“版式對比”，其本質(zhì)是讓內(nèi)容之間差異化，形成視覺反差。如果說“親密性”是讓信息的層次更清晰，那“對比”就是讓信息的主次更分明，例如下圖中，文字都已左對齊，也通過間距劃分了層次（親密性），但整體依然邏輯不清、沒有重點。

當(dāng)我們通過調(diào)整字體大小和粗細(xì)分出主標(biāo)題、副標(biāo)題和內(nèi)文后，這時文字馬上有了主次，視覺也更具變化和沖擊，一個小小改動就有如此效果，可見對比原則的重要性。

另外日常運用時，對比程度最好強烈些，盡可能讓差異化明顯，這樣才能突出內(nèi)容重點，有效傳遞關(guān)鍵信息，也讓版式更有變化，不至于平淡乏味。那版式對比的方式有哪些？其實很多，可以說只要能改變的地方就能對比，這里就提常見的 4 種：大小對比、粗細(xì)對比、字體對比和色彩對比，這些對比主要側(cè)重文字排版。接下來我會通過一段文字的逐步調(diào)整，讓大家了解 4 種對比的使用，下面先看看還未調(diào)整的版面示意，圖中文字目前只是居中對齊并簡單分成了 2 組，能看到信息沒有重點，畫面也不協(xié)調(diào)。

1. 大小對比

通過改變字體大小形成差異化，注意前面提到“讓差異盡量明顯”，現(xiàn)在用字體大小來說，就是“大字要更大，小字要更小”，因為反差太小的對比會讓主次模棱兩可。但在手機端，若畫面寬度是 750px（手機端的常規(guī)寬度），那最小字體也盡量不小于 20pt，不然會識別困難，違背易讀性?，F(xiàn)在我們來調(diào)整案例的文字大小，如下圖，字體最大的是主標(biāo)題，其次是副標(biāo)題，最后才是內(nèi)文小字，要保證主標(biāo)和內(nèi)文的大小有著數(shù)倍差距，這樣主次才清晰。

2. 粗細(xì)對比

粗細(xì)是說字體的筆畫粗細(xì)，即字重。有些字體會有多種字重，就是為了方便我們根據(jù)不同內(nèi)容選擇合適字重。一般標(biāo)題要粗，而內(nèi)文要細(xì)，但不絕對，只是一個常規(guī)用法，可見字體大小和粗細(xì)常常會同時使用。如下圖，當(dāng)文字有了粗細(xì)變化后，信息層級會進一步加強，視覺也更均衡。

3. 字體對比

就是用 2 種以上的字體來形成字形反差，這是形狀對比的一種，不同字體的穿插能豐富畫面層次、提升設(shè)計感，但核心要能根據(jù)風(fēng)格及編排選擇類型和氣質(zhì)都匹配的字體。還要注意詳情頁中，字體數(shù)量最好不超過 3 種，若種類太多會讓頁面過于花哨，反而影響美感和閱讀。再回到之前案例，由于畫面體現(xiàn)的是科技感和運動風(fēng)，因此將主標(biāo)題改為“黑體+動感”的“站酷高端黑”，這樣主標(biāo)題更突出、也更有沖擊力。

4. 色彩對比

色彩對比最直觀，也易出效果，但前提是要選擇合適的配色方案。簡單說色彩分無彩色和有彩色 2 大類，其中無彩色（黑色、白色、灰色）在文字的排版中非常常見，因為無彩色白搭，能讓信息呈現(xiàn)清爽明了，因此本文的大部分文字都以無彩色為主；當(dāng)然有彩色在排版中也必不可少，但很多時候不宜使用過多，主要作為點綴和無彩色進行搭配。下方案例中，由于背景是深色，所以標(biāo)題采用高純度的天藍色，這樣會和主視覺形成呼應(yīng)，而內(nèi)文則用淺灰色，內(nèi)容清晰但不搶標(biāo)題。

總之文字用了以上 4 種對比后，版面更加均衡，信息更有層次，主次也更分明。另外 4 種對比很少單獨存在，都是組合使用，如下圖，多種對比讓文字更有表現(xiàn)力，但切忌使用過度，需根據(jù)要求做出適當(dāng)組合。

大小對比+粗細(xì)對比+字體對比+色彩對比 大小對比+粗細(xì)對比+色彩對比 大小對比+粗細(xì)對比

截自第一衛(wèi)天貓旗艦店詳情頁

截自美的生活電器天貓旗艦店電壓力鍋詳情頁

四、重復(fù)

重復(fù)是讓某些規(guī)則或元素在排版時反復(fù)使用，核心為了版式更加統(tǒng)一、整體、有序。例如下圖中，共有兩個版塊，單看任何一個，文字排版都無太大問題，但兩個銜接一起時，就會發(fā)現(xiàn)標(biāo)題、內(nèi)文的大小并不一致，對齊方式也有兩種，這樣排版就不統(tǒng)一，缺少整體性和必要關(guān)聯(lián)性。

當(dāng)我們用“重復(fù)”作簡單調(diào)整：統(tǒng)一上下版塊的文字大小和對齊方式后，馬上就協(xié)調(diào)很多，圖文排版也有章可循，整體工整、有條理。

可見對詳情頁這種長圖而言，由于是多版塊組合而成，因此“重復(fù)原則”就顯得尤為重要：事先設(shè)定一個排版規(guī)則，比如內(nèi)容的對齊方式、間距疏密、字體選擇、大小粗細(xì)、色彩搭配等等，然后讓每個版塊都在這個大規(guī)則下進行編排，這樣就能避免雜亂無章，使版面井然有序。

當(dāng)然“排版重復(fù)”除了用于版塊間，有時也用在每個版塊中，比如常見的形狀重復(fù)，如下圖所示，若打算用圓角矩形（左圖），那所有形狀最好都統(tǒng)一成圓角，包括標(biāo)題中的色塊圖形；若是直角矩形（右圖），那就統(tǒng)一成直角。這樣版面才更整體，也更協(xié)調(diào)。

其實“重復(fù)”和“對比”剛好是設(shè)計的 2 個對立面：“重復(fù)”追求統(tǒng)一，而“對比”則追求變化，看似矛盾，實則相輔相成?？梢哉f版式設(shè)計就是一個將統(tǒng)一與變化相互結(jié)合的過程。詳情頁也一樣，用“重復(fù)”讓版式變的規(guī)整有序，再用“對比”來打破過多重復(fù)產(chǎn)生的單調(diào)感，適當(dāng)制造差異化。

例如下方案例，雖然都用重復(fù)進行了統(tǒng)一編排，但也用對比使其產(chǎn)生了微妙變化，像左一、左二中圖文位置的變化，左三中對齊方式的變化都是為了讓重復(fù)排版沒那么單調(diào)乏味。

截自百雀羚天貓旗艦店護膚套裝詳情頁｜花西子天貓旗艦店蜜粉詳情頁｜第一衛(wèi)天貓旗艦店充電線詳情頁

五、總結(jié)

至此版式設(shè)計 4 原則（對齊、親密性、對比、重復(fù)）就全部講完了，正是這些原則讓版式變的條理清晰、視覺均衡、便于閱讀。若再回看每條原則所展示的案例，會發(fā)現(xiàn)所有案例其實都是幾條原則的綜合使用，它們無法獨立存在，排版時要同時考慮、綜合使用，總之忽視任何一條原則都可能讓版式出現(xiàn)明顯問題。

本文節(jié)選自作者書籍《移動端賣貨式設(shè)計：適配手機屏的電商設(shè)計法則與實戰(zhàn)應(yīng)用（上下冊）》

作者：盧維賢

來源：https://www.uisdc.com/phone-detail-page-layout-principle

本文由@盧維賢 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議

現(xiàn)在不少人在給自己淘寶寶貝起標(biāo)題的時候很頭疼，感覺自己都詞窮了，想不出好的辦法去描寫了，那么有的時候還會出現(xiàn)標(biāo)題重復(fù)詞，那么這個是好的現(xiàn)象嗎?我們要如何去設(shè)置好寶貝標(biāo)題呢?請看分析!

首先，對于可以重復(fù)嗎這個問題?答案是不可以，因為淘寶標(biāo)題就如小編所說是一個寸土寸金的地方，每一個詞都可以為大家?guī)聿煌牧髁?，如果有空位，大家可以進行更多的關(guān)鍵詞設(shè)置來引流，而不是將一些流量好的詞進行重復(fù)使用。而且一般情況下，關(guān)鍵詞重復(fù)也沒用的，并不能因為它好，重復(fù)使用就可以為大家?guī)砀嗟牧髁俊?/span>

淘寶長尾關(guān)鍵詞可以重復(fù)嗎

其次，大家需要了解下長尾詞和精準(zhǔn)關(guān)鍵詞有什么區(qū)別?淘寶長尾關(guān)鍵詞分為兩種，一種是類似于“女裝秋裝2011新款”這樣的，第二種是類似于“女裝雪紡泡泡袖款T恤”這種精準(zhǔn)關(guān)鍵詞的類型，我們這邊選用的是第二種，這種詞搜索量必然不會很多，但是買家的搜索意向卻非常的明確，轉(zhuǎn)化率也會更高!中心關(guān)鍵詞就是在每個長尾關(guān)鍵詞中必須存在的詞語，必備關(guān)鍵詞是指在每個長尾關(guān)鍵詞中至少存在一個的詞語，而有沖突的關(guān)鍵詞，即為必備關(guān)鍵詞中的一種，但是因為詞義相同，由于直通車投放的推廣方式，所以需要區(qū)別來提取的詞語!

很多人都想要給自己的淘寶寶貝們?nèi)∫粋€好的名字，那么今天我就來給各位詳細(xì)的介紹一下淘寶寶貝標(biāo)題的命名技巧，這樣就可以更好的提高標(biāo)題的吸引力和流量。

1.無重復(fù)原則。一個標(biāo)題中不能出現(xiàn)不能含有重復(fù)的關(guān)鍵詞，這樣重復(fù)的關(guān)鍵詞是沒有權(quán)重，還浪費30個字的寶貴位置，可讀性也不強。

2.緊密排序原則。有些組合詞，不同的排法，權(quán)重也不一樣。因此有些詞，它們之間需要緊密排列在一起。比如說襯衫女和襯衫 女。按照買家的搜索習(xí)慣，這個詞被搜索到的概率就不一樣。

3.杠桿原理。它是根據(jù)淘寶搜索引擎的搜索原理，也叫前后原理，竟然是杠桿重點在兩端。也就是說標(biāo)題最前跟最后面的詞，權(quán)重會最高。因此一般來說最關(guān)鍵的詞要放在最關(guān)鍵的位置。否則淘寶系統(tǒng)就會識別錯誤。誤認(rèn)中心詞。

4.關(guān)鍵詞原則。寶貝標(biāo)題本應(yīng)該對應(yīng)寶貝的屬性，這樣不僅可以增加寶貝權(quán)重，而且還能提高轉(zhuǎn)化率。若是夸大其詞，不符合實情，極有可能被系統(tǒng)識別為售假標(biāo)題。

5.空格原則。淘寶搜索引擎是有空格加權(quán)原則的，因此淘寶搜索引擎會給空格前面的詞加權(quán)重，所以主推詞后一定要加空格。

6.偏正組合原則。修辭詞在標(biāo)題前面，名詞放后面。

最后在和大家分享下淘寶標(biāo)題組合誤區(qū)是哪些?

1、不要因為某個詞的展現(xiàn)量和轉(zhuǎn)化率比較高，也就是這個詞是一個優(yōu)質(zhì)關(guān)鍵詞時，就在一個寶貝的標(biāo)題設(shè)置上進行重復(fù)使用，這樣會形成關(guān)鍵詞堆砌，反而不利于寶貝權(quán)重的提升。

2、不能因為同行其他店鋪的寶貝標(biāo)題權(quán)重高就直接抄襲他們的標(biāo)題來使用，例如：其他同行的寶貝標(biāo)題中正好包含了大家找出來的一些優(yōu)質(zhì)關(guān)鍵詞等。

3、最后就是在近期內(nèi)多么優(yōu)質(zhì)的關(guān)鍵詞，過一段時間可能就會變得不適用了，所以在標(biāo)題打造出來之后，一般情況下，一個周期到兩個周期就需要修改了，進行新的優(yōu)化了。

原來這個寶貝標(biāo)題有重復(fù)詞是不好的，因為會引發(fā)這個誤區(qū)，導(dǎo)致自己的產(chǎn)品會搜不到，自然就沒有多少去看了，就不會有成交量了，所以各位朋友還是好好的去設(shè)置好自己的標(biāo)題吧!

最后還有下方《電商干貨》免費贈送，關(guān)注后私我“學(xué)習(xí)”免費領(lǐng)取