排版的目的是幫助用戶整理信息，提升閱讀效率，所以我們需要給文字分組、劃分層級關(guān)系。
文字最重要的屬性是可讀性，且不管排版形式如何，首先要讓用戶看清、看懂，然后才要談排版形式、美觀、協(xié)調(diào)、設(shè)計感等等。
現(xiàn)在的電商詳情頁，用戶使用場景幾乎都來自于手機端，文字小了會看不清，文字大了又會過于粗暴、缺少精致感，所以主副標(biāo)題文字的大小應(yīng)該在什么范圍，才能兼顧可讀性和設(shè)計美感呢？
我以6.5英寸屏幕的P50 pro手機為例，經(jīng)過多次對比實驗得出一個可以參考的字號范圍：主標(biāo)題：50-80px、副標(biāo)題：26-36px。
當(dāng)文字大小控制在上述范圍內(nèi)，更利于詳情頁的文字信息表達，當(dāng)然這組數(shù)據(jù)并非絕對，有一定的局限性，所以僅供大家參考。
同時為了嚴(yán)謹(jǐn)，我又結(jié)合眾多案例進行驗證，得出的結(jié)論也是基本都符合。
字號規(guī)范之后，接下來再來說說排版結(jié)構(gòu)。
詳情頁的文字排版結(jié)構(gòu)相對來說并不復(fù)雜，常見的對齊方式就三種，即居中對齊、左對齊、右對齊。
這也是最基礎(chǔ)的文字對齊方式，但在實際工作中，我們一般還會用到線條、英文、圖案等裝飾元素，對整體排版豐富美化，平衡、增加其節(jié)奏感和設(shè)計感。
比如像下面這樣：
你會發(fā)現(xiàn)不管怎么美化豐富，其基礎(chǔ)排版結(jié)構(gòu)、對齊方式還是沒有變化。所以我們能在這三種基礎(chǔ)的排版結(jié)構(gòu)上，變化出很多種不同的視覺呈現(xiàn)形式。
那么接下來具體說說如何做好排版。
設(shè)計中的每個元素在視覺上都具有一定的“分量感”，所以當(dāng)需要文字排版時，我們可以根據(jù)畫面重心來選擇排版形式，這也是工作中很常用的文字排版思路。
1、居中對齊排版
正如上面所說的那樣，居中對齊的排版重心更穩(wěn)，自然也更適合用在相對平穩(wěn)的構(gòu)圖，比如：
如上圖所示，不管產(chǎn)品如何擺放，只要畫面重心始終相對平穩(wěn)，居中對齊的排版就很好用，也是最不容易犯錯的，看幾組案例：
做個案例，下面這張圖本身構(gòu)圖就相對穩(wěn)定，又沒有其他元素干擾文字排版。
那么只需要加上文案，做好對齊，一張詳情頁海報就做好了。
說完居中對齊排版，再來說說左右對齊排版，居左和居右本質(zhì)上沒太大區(qū)別，無非就是我們習(xí)慣的閱讀方式是從左往右，出于用戶習(xí)慣的原則，左對齊相對而言用到的會多一些。
2、居左、居右對齊排版
一般情況下，當(dāng)畫面重心不平穩(wěn)時，我們會考慮通過文字排版、裝飾元素等來平衡，所以這時候就會用到居左、居右對齊排版。
如上圖所示，當(dāng)畫面重心偏向一側(cè)時，根據(jù)情況選擇居左或居右對齊排版就變得順理成章，比如下面幾個案例：
在設(shè)計工作中，僅依據(jù)重心排版雖然很常用也好用，但如果都按照重心原則排版，那么形式上難免過于單一，而且也有些許局限性。
比如你也能看到一些案例，即便文字排版前的畫面重心相對穩(wěn)定時，并沒有按照上述所說的重心原則，一定要用居中排版的形式。
那么我們還可以依據(jù)什么來做好詳情頁的文字排版呢？
因為電商詳情頁的使用場景更偏向手機端，而且現(xiàn)在都是按照手機一屏的尺寸為單位劃分模塊，所以圖文的形式大多數(shù)情況下都是上下結(jié)構(gòu)。
因此受其結(jié)構(gòu)的特質(zhì)影響，詳情頁排版相對而言并不復(fù)雜，不像首頁、海報、平面類設(shè)計那樣，需要太多的板式結(jié)構(gòu)，所以很少會出現(xiàn)故意營造畫面重心不穩(wěn)，用作突出強調(diào)的。
這也是我在翻閱大量優(yōu)秀的詳情頁案例中驗證后得到的結(jié)論。
在詳情頁文字排版的過程中，畫面重心并不是影響排版結(jié)構(gòu)的唯一因素，還會受畫面結(jié)構(gòu)、每一屏尺寸、文字可閱讀性、整體布局等等的影響。
比如用下面這張圖，雖然圖中兩個產(chǎn)品的長短不同，但兩個產(chǎn)品所占的直覺比重是差不多的，所以整體的視覺重心是相對平穩(wěn)的。
可如果將這張場景圖做詳情頁首圖，即便是重心相對平穩(wěn)，文案也不再合適用居中排版的形式做，因為受到了圖片本身結(jié)構(gòu)的影響。
下面我簡單的排了一下：
最終是這樣的：
所以就出現(xiàn)了相對平穩(wěn)原則。
理解起來很簡單，就是利用英文、線條、圖標(biāo)、數(shù)字等裝飾元素或必要排版元素平衡畫面，營造視覺上的相對平穩(wěn)即可。
原則上來說，相對平穩(wěn)原則適用于絕大部分詳情頁的文字排版工作。
這就能解釋為什么重心明明很平穩(wěn)，有很多詳情頁案例中的文案不用居中對齊也能做的很出彩的原因：“他們做到了視覺上的相對平穩(wěn)。”
如下圖所示：
視覺相對平穩(wěn)是允許存在偏差的，并不是像對稱式構(gòu)圖那樣要求那么絕對，設(shè)計有很強的主觀性，也不像數(shù)學(xué)那么嚴(yán)謹(jǐn)，看起來差不多就行。
當(dāng)然，你也能看到一些豎向排版，或不規(guī)則的排版，但核心思想是共通的，就是視覺上的相對平穩(wěn)。
設(shè)計的魅力在于不確定性，沒有一成不變的解決方案，詳情頁排版同樣如此，不管是依據(jù)重心原則還是相對平穩(wěn)原則做排版，都只是為大家提供設(shè)計理論依據(jù)。
比如下面這個案例：如下圖將產(chǎn)品簡單的擺放好。
初步的詳情頁海報構(gòu)圖就出來了，很多人的第一直覺就是居中排版，因為畢竟這么構(gòu)圖整體重心是穩(wěn)的，比如像下面這樣：
一個簡單的海報雛形就有了，可能你會感覺有點太平了、還有點空，那么我們可以加點光影元素豐富一下畫面，再稍微調(diào)下整體的顏色，如下圖：
這個海報的確很簡單，但感覺還不錯，如果按照相對平穩(wěn)原則，換個排版形式是不是也可以：
不同的排版結(jié)構(gòu)給人的感受也不一樣，兩者沒有對錯，至于你會選擇用哪一種，這就取決于你對整體規(guī)劃和自己的主觀感受了。
設(shè)計理論固然重要，但設(shè)計師的主觀感受也很重要，所以我們除了要學(xué)好理論知識外，還要提升自己的審美。
補充：本文以詳情頁首圖排版為切入點，詳情頁中其他模塊同理。
好了，就寫這么多吧，下次再見！
作者：老張
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》深度剖析：如何做好詳情頁文字排版？
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司