這篇文章我們來講講在設(shè)計手機詳情頁時，會經(jīng)常用到的一些排版小細節(jié)。由于手機版面受限，用戶瀏覽時間也短，所以圖文排版不宜太過復(fù)雜，要以清晰呈現(xiàn)為主，簡潔明了是當下主流。而排版越是簡潔，對細節(jié)的要求就越高，產(chǎn)生的影響也會越直觀。
細節(jié)其實包含的范圍很廣，而本文要說的則是“細節(jié)元素”，就是通過添加一些點綴元素來增加版式的細節(jié)，而常用元素分 2 類，共 6 種，如下圖所示，第一類是幾何圖形：點、線、面；第二類則是具象圖形：圖標、英文、數(shù)字，其實具象圖形就是幾何圖形的具象化體現(xiàn)，一個詳情往往會同時用到多種元素，正是這些元素的結(jié)合使用才讓畫面更精致。
廣義上講，點線面是平面構(gòu)成形態(tài)中最基本的元素，可以說平面中的所有視覺最終都可歸為三者的不同組合，而點線面的確定也是相對而言。比如機場的飛機，相對機場來說占比較大，所以可當成面；而天空中的飛機，相對廣闊藍天來說，占比幾乎忽略不計，因此只能當成點。像我們在排版前畫的一些版式結(jié)構(gòu)圖，就是點線面的排列組合，這樣就形成了各種結(jié)構(gòu)，而排版正是圖文在結(jié)構(gòu)之上的有序填充。
但本文說的卻是狹義上的點線面，所謂狹義，是指設(shè)計中用圖形直觀代表的點、線、面。下面就來說說作為細節(jié)元素的 3 種圖形到底該怎樣用于版式中。
1. 點
點是幾何圖形最基本的組成部分，也是構(gòu)成形態(tài)中的最小單位。從視覺定義出發(fā)，所有圖形縮小到一定程度都可以是“點”，因此點有很多形狀，而不只局限于圓形，下方列舉的是詳情頁常用的“點”，除了最為直觀的圓形，還有三角和菱形，并且它們能有面或線的變化，而這些變化給人的視覺感受也會不同。
在手機詳情中，既然確定是“點”，那展現(xiàn)面積通常不大，往往作為一個個圖形小元素穿插其中，主要起到點綴作用。當圖、文排好后，若版面還是單調(diào)，這時就可以適當加些“點”元素，有了元素點綴，畫面將更顯精致，當然除了“點綴”外，根據(jù)使用的場景不同還會有些特定作用，如下圖所示。
這是“點”經(jīng)常使用的一個場景，當內(nèi)文小標題很多時，就可在每個小標題前面加上“點”，這樣點綴之余也讓文字更有條理，利于閱讀。圖中用了菱形和直線的組合，這樣不但點綴了畫面，還起到分割標題的作用。
版面是用“三角”點綴，而三角比較特殊，具有方向性和指向性，所以還能起到視線引導的作用，因此使用時要特別注意三角指向，不要出現(xiàn)錯誤指引。圖中用的是“圓圈”，圓圈本身的裝飾性更強，能讓畫面整體更有調(diào)性。
2. 線
如果說點是靜止的，那線就是點移動的軌跡，而設(shè)計用的“線”可以是開放的線條，也可以是閉合的線框。
在詳情設(shè)計中，比起點和面，“線”的使用頻率最高，因為實際使用時，線的可變屬性最多，所以適用場景也最多。它具有曲直、虛實、粗細、長短和方向等變化，由于平時常用的還是直線和實線，因此調(diào)整重點在粗細、長短和方向，正是 3 個屬性的不同變化和組合，才會產(chǎn)生各種不同的心理感受。
根據(jù)線的形態(tài)及位置不同，在版面中常起到以下 4 種作用：點綴、分隔、引導和強調(diào)。
點綴
和“點”一樣，在版面中適當添加“線”元素也能起到點綴作用，如下圖所示，若畫面不加線條，那就只有圖、文排版，雖然也可以，但總會覺得畫面有些單薄和常規(guī)，而有了線條加入，既能點綴版面又能提升美感，這就是常說的細節(jié)差別。
分隔
當“線”處于內(nèi)容之間，就能起到分隔作用。之前的文章講過排版的“親密性”，提到內(nèi)容要通過間距調(diào)整來進行分層，但層級不太分明或需要強化分層時，這時在間距中就可穿插“線”的使用，有了分隔線，用戶讀起來會更加輕松，如下圖所示，三個案例都是常見的“分隔”用法。
由于我們視線習慣從左往右，所以橫向排列的信息并不容易分開，這時加上豎線就能清晰的將3個小標題隔開。
并不是所有線條都要和分隔內(nèi)容一樣長，像圖中線條雖然很短，但依然起到分隔標題和內(nèi)文的作用，不過對于較短的線條，最好能適當加粗些，通過粗線條來增加存在感。
用橫線分隔了參數(shù)信息，注意虛、實線的運用，它們使文字的分隔邏輯更加清晰。
引導
由于“線”有方向變化，因此還有引導性。它可通過方向來引導我們的視線移動軌跡，并將看似無章的元素都關(guān)聯(lián)起來，這樣瀏覽時會感覺條理清晰、規(guī)整有序，如下圖所示。
由于手機的瀏覽順序是從上到下，所以視線的縱向引導會讓內(nèi)容有層層遞進的關(guān)系，剛好圖中是3天挑戰(zhàn)，這時用豎線引導就恰到好處，并且線條也剛好將圖文進行了左右分割，這時邏輯更加清晰，另外若想增強線條的指向性，加上箭頭會是不錯的選擇。
圖中是線條的橫向引導，通過引導明確了每段文字分別對應(yīng)的圖片，這樣原本各自獨立的內(nèi)容就立刻產(chǎn)生了關(guān)聯(lián)，同時橫線也巧妙的分割了標題和內(nèi)文，讓人一目了然。
強調(diào)
詳情頁中，常常會用“線框”來對內(nèi)容進行強調(diào)，由于線框的封閉性，框內(nèi)信息很容易引起用戶的注意，這樣通過“圈住”關(guān)鍵信息就能明確視覺重點，另外線條越粗，線框和框內(nèi)信息就會越突出，同時線框也會增強版面的形式感并串起相關(guān)元素。
由于畫面元素并不多，這時可通過加粗來提升線框的存在感，讓它在強調(diào)標題的同時也能成為畫面的核心元素之一，這樣就能增強整體的形式感，同時也將版面的各個元素都串聯(lián)起來，形成整體。
這個用法比較特別，不是用一個線框進行整體強調(diào)，而是將標題的每個字都和線框結(jié)合進行單獨強調(diào)，這樣除了突出標題之外還能增加版面的裝飾感，但要注意標題字數(shù)不易過多，否則太多“線框”排列就會顯得單調(diào)和繁瑣。
通過線框使用，讓原本并不突出的內(nèi)文得到了一定強調(diào)，但畢竟是內(nèi)文，不能搶過標題，因此線框總體偏細。
3. 面
面是線移動的軌跡。在詳情頁中，比起點和線，“面”對畫面有著更加明顯的影響，因為大部分時候，“點”、“線”只是排版細節(jié)的一種修飾，而“面”則會改變整個布局，因此對于“面”的使用，要更為慎重才行。另外“面”的形狀有很多，總體有規(guī)則圖形和不規(guī)則圖形 2 大類，但真正常用的還是以下 3 種規(guī)則圖形。
雖然圖形只有 3 種，但實際用時會根據(jù)畫面風格進行形態(tài)調(diào)整，比如調(diào)整方形的邊角類型或傾斜度等等，如下圖所示，不同的調(diào)整會讓圖形表現(xiàn)出不同氣質(zhì) 。
和“點”恰恰相反，若要形成“面”，那展現(xiàn)面積通常不會太小，這時圖形的形狀、大小、位置都會直接影響到版式結(jié)構(gòu)，總體來說，“面”在版面中會起到以下 3 種作用：版面分割、層次感和圖形化。
版面分割
在詳情頁中，當“面”大到一定程度，便會對版面進行分割，通過圖形分割能增強頁面的形式感。但要注意圖形本身還需承載內(nèi)容，所以形狀盡量規(guī)整；切割也要保證內(nèi)容的完整性，不要出現(xiàn)信息割裂、邏輯混亂，例如下圖中，每個圖形的內(nèi)部都是一塊完整內(nèi)容。
這種版內(nèi)分割的方式更為常見，它并未像左圖那樣將版面分成幾段，而是通過留出左右邊距來確保版面的完整統(tǒng)一，同時還能營造版塊一前一后的層級關(guān)系。
將方形垂直傾斜，這樣的分割能打破原本中規(guī)中矩的版式結(jié)構(gòu)，提升版面活躍度，體現(xiàn)運動感，呼應(yīng)產(chǎn)品調(diào)性，另外為確保易讀性，內(nèi)容還是采用橫向排版，并未隨之傾斜。
層次感
如果圖文排版有些常規(guī)，這時可適當添加一些“面”，讓排版更加生動，注意圖形要和其他元素有些疊壓，這樣就能形成一前一后的空間關(guān)系，豐富版面的層次感。另外圖形還能制造視覺焦點，突出關(guān)鍵信息，所以形式不能大于內(nèi)容，圖形本身的形狀和配色不能影響信息的清晰呈現(xiàn)。
和左圖思路一樣，只是換成方形來制造圖文的前后關(guān)系，相比之下圓形更生動，而方形更有序。另外用色上，方形選擇了和玫紅對比強烈的天藍，使得版面的視覺焦點非常突出。
畫面用圓形讓文字和產(chǎn)品產(chǎn)生了前后關(guān)系，同時也讓用戶視線聚焦文字，注意圖形在用色選擇上不能和疊壓元素過于接近，最好能產(chǎn)生明顯差異，否則層次感將大大削弱。
圖形化
將圖形和文字結(jié)合成“面”，這和“層次感”一樣，都有突出信息的作用，只是這種方式更側(cè)重將核心文字圖形化，圖形化的文字可作為視覺元素，提升版面的形式感，并對版面起到裝飾作用。
圖中文字較多，層級也偏多，這時用方形將一些標題圖形化后，文字的形式結(jié)構(gòu)得到強化，邏輯也變得清晰。
將“人、貨、場”和圓形組成了“面”，這樣強調(diào)信息的同時也對文字進行了圖形化，當畫面較“空”且沒有其它元素填充時，這些圖形化的文字就能讓畫面生動起來。
以上都是規(guī)則圖形的使用，這類圖形有序簡潔，操控性強；其實還有另一類不規(guī)則圖形，但平時使用很少，因為不規(guī)則圖形給人隨意感，有太多的不確定性，用的不好反而會讓排版變的雜亂。當然若使用得當，就會讓版式更有新意和變化。如下圖所示，自由曲線構(gòu)成的“面”讓人感到輕松、活潑，更有個性。
截自良品鋪子天貓旗艦店腰果詳情頁
從以上眾多案例能看到，很多版式都是多種元素的結(jié)合使用，因為點、線、面的作用各不相同，組合使用能讓版式更有設(shè)計感，因此在手機詳情的長頁面中，點線面常常會反復(fù)出現(xiàn)。
另外關(guān)于點線面的確定，都是與版面進行大小對比后得出。例如同一版面中，面積小的圓形和圓圈都是“點”，但面積變大后，圓形就成了“面”，而圓圈就成了“線框”，下面展示一組之前的案例，能看到，同樣是圓形，由于面積不同，左圖的“點”和右圖的“面”對版面產(chǎn)生的影響也是天壤之別，當然平時也不必太過在意本身定義，靈活運用才是核心。
除了幾何圖形，還有一類具象圖形也常作“細節(jié)元素”出現(xiàn)在詳情頁中，顧名思義，它們不像“點線面”那么抽象，具象圖形本身就能傳達一定內(nèi)容，這樣用什么圖形就變的非常關(guān)鍵，總體原則是要和版塊主題相吻合，如果形不達意，就會影響閱讀甚至阻礙信息的準確傳遞。具象圖形有很多，但都需根據(jù)內(nèi)容來“定制”，其中最常用也相對好用的是以下 3 種：圖標、英文和數(shù)字。
1. 圖標
詳情頁中，圖標一般不單獨出現(xiàn)，而是和文字搭配使用，這樣就可避免信息呈現(xiàn)過于枯燥，從而讓內(nèi)容變的生動、有趣。其中難點還是圖形設(shè)計，因為若想圖形既能表達文字內(nèi)容還要精簡美觀，這都需要我們對圖標造型有很強的把控力才行。不過好在網(wǎng)上有大量圖標素材可供選擇，建議優(yōu)先尋找合適圖標進行調(diào)整，若表現(xiàn)內(nèi)容比較冷門，確實沒有合適素材，再動手設(shè)計，當然我們要把每次尋找和調(diào)整素材都當成一個學習提升的過程，如果這塊能力薄弱平時就要多觀察、勤練習。
日常使用的圖標可分線圖標和面圖標 2 大類，如下圖所示，線圖標是以線條勾勒為主，因為是線，所以粗細很重要，不同粗細給人的感受各有不同，線條越細越顯精細、秀美，而線條越粗則越顯粗壯、力量，核心要和頁面的整體風格相匹配，但不管哪種，一組圖標的粗細必須保持一致。
而面圖標就以塊面為主，顯得更為厚實，并且展現(xiàn)面積也比線圖標大，因此更加突出。
不管線圖標還是面圖標，都可添加規(guī)則圖形做襯底。如下圖所示，襯底圖形可 “線”可“面”，加襯底后能讓圖標排列更規(guī)整。
日常使用中，圖標很少單個出現(xiàn)，往往都是 3 個以上成組排列，這就需要圖標之間保持風格統(tǒng)一。像線圖標的粗細統(tǒng)一、圖形繁簡統(tǒng)一、圖形特征統(tǒng)一、襯底線面統(tǒng)一等等都屬于風格統(tǒng)一的范疇。如下圖所示，左圖中間圖標的襯底是“面”，而右側(cè)也是“面圖標”，這些都和其它不一致，從而破壞了統(tǒng)一性，使得視覺混亂；而右圖從圖標到襯底，都保持著高度統(tǒng)一，這樣整體才會協(xié)調(diào)舒適。
使用圖標，其實就是給文字搭配一些圖形化元素，通過圖文結(jié)合的方式，讓內(nèi)容更加生動、鮮明，同時提升版塊的設(shè)計感。如下圖所示，有了圖標加入，更顯清晰和精致，特別是左三圖中，圖標的“線襯底”設(shè)計成了加熱線路，和熱水杯呼應(yīng)，新穎有趣，這就是細節(jié)中的“加分項”。
2. 英文
英文是很多設(shè)計領(lǐng)域都偏愛的設(shè)計元素之一，因為英文不是我們母語，用戶會更多的關(guān)注“圖形”而非“內(nèi)容”；再加上英文字形簡單、結(jié)構(gòu)工整，總體易把控也易出效果，所以各個地方都有英文使用。
下面看組對比圖，左圖 T 恤印有中文的“全球狂歡節(jié)”，我們會優(yōu)先關(guān)注中文“內(nèi)容”，而忽略字形本身，這樣印有中文字樣的 T 恤就會感到奇怪；而當 T 恤換成右圖的英文后，我們則直接忽略內(nèi)容，統(tǒng)一按“圖形”處理，所以印有英文的 T 恤看著會更協(xié)調(diào)一些。
當然不是說中文不好，而是中文的“內(nèi)容”和英文的“圖形”，本身就不在一個比較維度，就像外國人看中文也會覺得“圖形”好看。但隨著 “國潮”興起，現(xiàn)在國內(nèi)的中文設(shè)計也越來越多，這是一個好現(xiàn)象，相比英文，中文字形復(fù)雜，表意精準，富有內(nèi)涵，若表現(xiàn)到位同樣可以很“高級”。
雖然用戶一般只關(guān)注英文“圖形”，但依然要注意本身意思和主題的關(guān)聯(lián)性，否則會讓人覺得細節(jié)不嚴謹。根據(jù)詳情頁所用英文的大小不同，主要有以下 2 種作用：裝飾和點綴。
裝飾
當畫面元素過少、版面太空時，這時就可以將英文放大作為背景元素，如下圖所示，放大后的英文更顯圖形化，能讓畫面細節(jié)豐富，裝飾性更強；同時英文能和主體元素形成前后的空間關(guān)系，提升畫面層次感，但要注意英文只是裝飾，不能搶過主體，否則主次會顛倒。
點綴
當英文放大時主要體現(xiàn)圖形的“裝飾性”；而當英文縮小后，整體外形就會類似“線條”，能起到點綴版面、豐富細節(jié)的作用。如下圖所示，有了小段英文的點綴，畫面更顯精細；其實除了點綴，英文還能讓布局更均衡，當然加的位置很重要，一般選擇版面較空的留白區(qū)域，例如右圖中的右上方小英文，若沒有它，畫面就會左重右輕，左右不平衡。
除了英文，當畫面主打國風、草本、質(zhì)樸、傳統(tǒng)等概念時，偶爾也會用到圖形相似的“漢語拼音”，如下圖所示，拼音的常用形式相對單一，主要作為“點綴元素”添加在漢字上方。
截自李子柒天貓旗艦店糯玉米詳情頁
3. 數(shù)字
這里的數(shù)字特指阿拉伯數(shù)字，和英文一樣，由于形狀簡單、幾何感強、美學特征明顯，同樣是很多領(lǐng)域的常用元素。但 2 者又略有不同，雖然都當圖形元素使用，但數(shù)字比英文更加具象。當我們看英文時，對于不熟悉的語言，默認都當成單純圖形，一般只關(guān)注字形本身的美感；但看到我們更加了解的數(shù)字時，除了圖形美感外，還會本能的想到數(shù)字所代表的內(nèi)容，比如出現(xiàn) “8”，用戶肯定會思考為什么頁面要放 8？8 和產(chǎn)品的聯(lián)系是什么？這時如果 8 和頁面沒什么關(guān)聯(lián)，就會非常奇怪，讓人覺得為了形式而形式，所以使用數(shù)字時更要注意數(shù)字和產(chǎn)品的關(guān)聯(lián)性，如果沒有，寧愿不用？傊⑽母亍把b飾”，而數(shù)字更側(cè)重“內(nèi)容”。在詳情頁中，根據(jù)語境不同，數(shù)字常起到強調(diào)或引導的作用。
強調(diào)
前面講“線”時也提到了強調(diào)作用，但“線”主要強調(diào)核心內(nèi)容，而這里則通過直接放大來強調(diào)數(shù)字本身。一般有 2 種用法，第 1 種將數(shù)字放大作為設(shè)計元素和主體結(jié)合，如下圖所示，放大后的數(shù)字和產(chǎn)品形成了前后層次感，活躍版面，同時也強化 0 添加（左一）、8 秒加滿（左二）的概念，所以對于數(shù)字選擇，不光看圖形，更要看內(nèi)容。
截自 smeal 天貓旗艦店代餐奶昔詳情頁
第 2 種用法是將文中的數(shù)字進行放大，如下圖所示，當數(shù)字放大后，不但能強調(diào)內(nèi)容本身，還能通過大小對比來增強排版的視覺變化。
截自第一衛(wèi)天貓旗艦店充電線詳情頁
引導
“線”是通過方向來引導用戶的視線移動，而“數(shù)字”則通過本身的連續(xù)性進行引導，比如頁面出現(xiàn)數(shù)字 123，用戶視線自然而然就會從 1 到 3 進行移動，并將標有 123 的內(nèi)容當成一個整體。根據(jù)這些特性，數(shù)字常出現(xiàn)在步驟說明、多種成分等需要有序閱讀的主題中，其中要注意數(shù)字的連貫性，不要跳號，這樣銜接才流暢、自然，如下圖所示。
圖標、英文和數(shù)字都是詳情頁中非常常見的具象圖形，它們既能讓內(nèi)容生動、版面活躍，又能突出關(guān)鍵信息、提升信息的傳遞效率。注意圖形要和主題吻合但不能喧賓奪主，蓋過主體或文字，不然就會走入“形式大于內(nèi)容”的設(shè)計誤區(qū)。
不管幾何圖形還是具象圖形，縱觀本文的所有案例，能看到這 2 類“細節(jié)元素”會反復(fù)出現(xiàn)，而且常常組合使用。但我們不能為加而加，要讓每處細節(jié)都發(fā)揮到點上，明確所有元素都是為內(nèi)容和版式服務(wù)。最后說明下，以上提到的細節(jié)“作用”雖是單獨講解，但很多時候一個圖形卻有多種作用，比如有的線框在“強調(diào)”信息的同時也會起到“分隔”作用，核心還是根據(jù)需求找出圖形的最優(yōu)選擇。
承擔因您的行為而導致的法律責任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。