1. 首頁 > 生活百科 > >

翻頁類H5-線下門店案例 怎么做h5？( 二 )

小知識怎么做h5


MAKA的網站主頁
制作前要建立Photoshop尺寸文件， 畫布設置寬為 640px、高為1008px， 如圖所示， 這是為了后期方便將設計文件導入到H5工具， 這是目前H5工具普遍采用的頁面尺寸 。 下面開始詳細講解 。
設計的細則講解
（1）圖片設計
圖片是此次設計的關鍵， 因文字內容整體較簡單， 所以文字只起點綴作用， 這就凸顯出圖的重要性 。 從品牌提供的圖片中選擇合適的圖片分別安插在了8個頁面當中， 但很快就出現了一個難題 。
因為在頁面中整版圖最為美觀， 所以計劃用8張整圖配8段文字來設計畫面 。 但在產品展示部分， 品牌方并沒有可以包含所有產品的整圖， 只有單個產品的展示圖片 。
如果直接將不同產品圖拼湊在一個頁面， 就會很不美觀， 但如果將產品圖分散到其他頁面， 又會使得H5的頁數太多 。
Photoshop尺寸建立頁面
為解決問題， 我們使用了一個輪播圖的互動插件， 通過該插件可以做到在一個頁面展示多張圖， 還能保證圖版的整屏效果， 而這個互動插件就是H5工具的一個功能組件 。 為了使頁面更為美觀， 我們還找到了一張宣紙的背景作為背景圖， 這樣會比白底要有更多的細節展現 。 設計過程如圖所示 。
一個頁面展示多張產品圖的設計過程
（2）文字與標題設計
H5大標題采用方正大標宋體， 頁面正文主要采用方正仿宋簡體， 如圖所示 。
H5設計選用的字體
在前面， 我們已明確告訴大家盡量不要使用識別性較差的宋體字， 但此項目例外， 因為H5正文文字量少， 文字排版可以非常稀松 。 在這種情況下， 宋體字的使用不會影響閱讀時的識別 。 為了更好凸顯文化氣息， 文字排版方式是以豎版為主的， 這樣更像是古體字的書寫方式， 能夠凸顯文化氣息， 所以用宋體字就更合適了 。 標題與正文的字體的排版對比效果
標題與正文的字體
大家也應該注意， H5的第2頁正文描述部分還是采用了黑體字， 這是因為文字量太大了， 所以在具體設計時做了取舍 。 不管你用什么字體， 設計目的都是一致的， 就是讓H5清晰地呈現內容 。 正文字體采用黑體和宋體的效果
黑字體正文
（識別度更好）

翻頁類H5-線下門店案例 怎么做h5？

文章插圖
宋體字正文
（識別度不如黑體字）
（3）地圖設計
在設計地圖時， 項目采用了手繪地圖的形式， 但實際大可不必這樣， 因為現在的H5生成器內置了定位地圖， 在點擊這樣的地圖后可以直接調取手機中安裝的地圖 APP， 呈現位置信息 。 但因為書中的H5模擬案例是要長期使用的案例， 所以還是選用了手繪地圖來表現 。 地圖在配色上沿用金色作為主色， 與畫面風格保持一致，
從衛星地圖轉化為更加直觀的手繪地圖
（4）頁面版式
為了讓頁面有更好的視覺效果， 版式設計中運用了3階排版法， 尤其是產品部分的頁面， 在畫面中， 圖片、文字描述和腳標構成3層關系， 這樣頁面的視覺效果就比較美觀了
3階排版法， 加上第三級腳標后， 視覺效果更豐富
在第2屏的品牌介紹部分， 為了讓文字更清晰， 弱化了背景圖， 為文字專門添加了金色底圖來強化文字的識別性， 這樣的做法和第8屏形成了反差， 在第8屏是弱化文字， 凸顯圖片，
第2屏- 文字為主， 圖片為輔
第8屏- 文字為輔， 圖片為主
不管是文字， 還是圖片， 一定要有一個為主、一個為輔， 這是做頁面設計時的一個重要意識， 時刻以主要內容為導向 。
（5）頁面的節奏感
在設計第1屏時， 起初設計了好幾個樣式， 如圖所示， 最后選擇了最簡單、最不起眼的一組（第3組）， 原因就是考慮到整支H5的節奏 。
第1屏的3個備選方案
這樣， 讓第1屏內容簡單到只有一個問句， 能夠讓觀看節奏有一個從低到高的過渡， 讓內容的呈現有一個從簡單到復雜的趨勢 。 關于節奏的概念， 在之前的章節已有具體介紹了， 讀者可查看之前內容 。
（6）H5工具制作
打開MAKA， 在界面中單擊“Ps”按鈕， 會提示上傳PSD文件， 如圖所示， 需要觀看和了解這里的上傳說明 。
MAKA后臺的PSD文件上傳教程
上傳后， 需要為H5各屏元素添加動效 。 清雅風格的H5同樣不適合添加太過炫酷的動效， 所以這里主要添加的動態就是“淡入”和“向上飛入” 。
因為圖片多為場景， 所以圖片不適合添加動效 。 動效的應用主要放在了文字上， 每一屏的文字都可以添加動態效果 。 具體的操作如下：

推薦閱讀