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