二維碼
        企資網(wǎng)

        掃一掃關(guān)注

        當前位置: 首頁 » 企資快報 » 品牌 » 正文

        手機詳情頁如何賣爆貨?先掌握經(jīng)典的版式四原則

        放大字體  縮小字體 發(fā)布日期:2022-06-29 14:12:45    作者:百里樂    瀏覽次數(shù):90
        導(dǎo)讀

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

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

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

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

        一、對齊

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

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

        1.左對齊

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

        2. 居中對齊

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

        3. 左右對齊

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

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

        其實標題有時也能左右對齊,通過對齊將文字圖形化、塊面化,這樣能增強畫面得形式感,如下圖所示。

        4. 右對齊

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

        5. 頂對齊

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

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

        最后提下“可能嗎?對齊”和“視覺對齊”,一般我們都用軟件得對齊工具進行對齊,而軟件得衡量方式是以元素邊界為基準,這是“可能嗎?對齊”,例如下面這段文字用得就是軟件工具得“可能嗎?對齊”。

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

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

        二、親密性

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

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

        1. 字間距

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

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

        2. 行間距

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

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

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

        3. 段間距

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

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

        4. 模塊間距

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

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

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

        三、對比

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

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

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

        1. 大小對比

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

        2. 粗細對比

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

        3. 字體對比

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

        4. 色彩對比

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

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

        大小對比+粗細對比+字體對比+色彩對比 大小對比+粗細對比+色彩對比 大小對比+粗細對比

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

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

        四、重復(fù)

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

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

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

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

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

        例如下方案例,雖然都用重復(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)用(上下冊)》

        :盧維賢

        特別uisdc/phone-detail-page-layout-principle

        感謝由等盧維賢 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止感謝。

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

         
        (文/百里樂)
        免責聲明
        本文僅代表作發(fā)布者:百里樂個人觀點,本站未對其內(nèi)容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔相應(yīng)責任。涉及到版權(quán)或其他問題,請及時聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號

        粵ICP備16078936號

        微信

        關(guān)注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯(lián)系
        客服

        聯(lián)系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號: weishitui

        客服001 客服002 客服003

        工作時間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        主站蜘蛛池模板: 无码人妻一区二区三区在线水卜樱| 亚洲国产精品自在线一区二区| 亚洲韩国精品无码一区二区三区| 精品一区二区三区免费毛片爱 | 国产美女口爆吞精一区二区| 无码人妻一区二区三区免费n鬼沢| 亚洲熟女综合一区二区三区| 成人乱码一区二区三区av| 亚洲AV无码一区二区三区DV| 一区二区三区四区在线播放 | 亚洲一区在线视频观看| 一区二区三区四区电影视频在线观看| 呦系列视频一区二区三区| 一区二区三区人妻无码| 一区二区三区四区无限乱码| 在线观看视频一区二区| 中文精品一区二区三区四区| 日韩一区二区久久久久久| 精品一区二区三区高清免费观看| 日韩一区二区三区电影在线观看 | 国产精品小黄鸭一区二区三区| 成人无号精品一区二区三区| 日韩最新视频一区二区三| 亚洲视频一区在线播放| 少妇无码一区二区三区免费| 国产伦精品一区二区三区| 日韩AV无码一区二区三区不卡毛片 | 精品国产一区二区三区香蕉| 久久久久人妻精品一区蜜桃| 亚洲AV无码一区东京热| 久久精品中文字幕一区| 成人乱码一区二区三区av| 国产在线一区二区在线视频| 美女啪啪一区二区三区| 精品无码人妻一区二区免费蜜桃 | 最新中文字幕一区二区乱码| 日韩精品一区二区三区老鸭窝 | 日韩精品无码久久一区二区三| 国产剧情一区二区| 波霸影院一区二区| 国模无码人体一区二区|