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