現在智慧型手機已經成了我們日常生活中的一部分，大部分用戶訪問網站都是透過智慧型手機而非PC，所以手機網頁也變得越來越重要。隨著各種手機網頁設計軟體越來越普及，透過手機架設網站也已經不是什麼難事。但是很多人的手機版網站只是潦草地建一個框架，頁面布局很亂，毫無設計感，這樣的網站根本無法吸引住訪客。所以今天就跟大家講講手機網頁要怎樣製作，接下來就是手機版網頁設計教學了。
本章目錄：
- 導航設計：指明你手機網頁的路向
- Banner：決定訪問手機網頁的感受
- 資訊展示：手機網頁的核心內容
- 整體風格統一：手機網頁設計必備
現在，就跟隨小編的腳步，一起來看看手機版網站究竟是怎樣設計的吧~ 點擊這裡，了解5個架設手機App網站的設計靈感！
- 導航設計：指明你手機網頁的路向
導航欄目不僅是電腦版本網站中特有的內容，在手機版網頁裡同時也起到了非常重要的作用。導航欄在行動設備中能夠讓訪客更輕鬆地定位並確定即將訪問的路向，不會因銀幕較小或連結繁多而出現錯誤操作。
在導航欄的手機網頁設計中，你需要關注這幾點：
- 手機版網站導航欄一定要醒目、清晰，讓訪客能一眼找到需要的資訊。
- 導航關鍵詞也要簡潔明了、指向明確，建議是2~4個字，這樣方便訪客記憶理解。
- 另外如果你網站資訊較多，那麼導航就要有所取捨，不必把所有資訊都放在導航裡，導航只需展示網站重要的部分。
現在Strikingly的導航設計支援在多頁面導航欄並添加版塊連結，如果你開啟了多頁面網站，現在你可以設定頁面中的某個版塊在導航欄中顯示。讓你的客戶迅速到達某個版塊。你可以點擊這裡查看詳情。
- Banner：決定訪問手機網頁的感受
banner是訪客進入網站後看到的第一眼，無論是手機版還是電腦版都是這樣，所以一定要設計得簡約吸睛，讓訪客能立刻明白你是做什麼的。比如下圖中用 Strikingly架站系統製作的網站，它的banner就是比較成功的。
- 圖文結合作為網站banner，言簡意賅說明自己的服務
- 並提供購買管道，促進轉化。
- 頭圖背景設計得非常美觀、有吸引力。
- 引起訪客興趣，有利於增加訂單。
此外，Strikingly最近優化了手機版網頁製作頁面，網站編輯器支援切換至手機畫面進行編輯。此功能可以幫你一邊編輯、一邊查看網站在手機上的展示效果，不用再切換預覽又切換編輯。
- 資訊展示：手機網頁的核心內容
接下來就是更詳盡的資訊展示了。使用Strikingly，在這部分你可以自由設計的相關的手機網頁，不需要你懂得程式或設計知識。那麼，一個好的手機網頁包括哪些核心內容呢？你可以點擊這裡查看更多範例。
- 櫥窗展示
- 商店
- 部落格
- 相冊
- 大尺寸媒體
- 橫向布局
- 縱向布局
- 純文本
- 標題
透過這些功能來向訪客介紹更多內容，能夠讓訪客更加瞭解你。這些功能你都可以在Strikingly免費手機網站架設軟體中找到。想要什麼功能，就添加相應的版塊即可。
手機網站雖然簡單易做，但各項功能也要齊全。網站不僅僅要有資訊展示的作用，也應該給訪客一個溝通的管道。所以別忘了加上聯繫方式、留言表單之類的版塊，這樣也能拉近和客戶之間的距離。Strikingly同時支援手機架站，點擊這裡可以瞭解更多資訊。
- 整體風格統一：手機網頁設計必備
整體風格不統一是很多新手會犯的錯誤。在架站的時候沒有主題，想到什麼添加什麼，不注重個版塊的邏輯和整體的統一性，就會導致網站看起來非常亂，訪客也沒什麼繼續瀏覽網站的心情。所以在設計網站的時候，大家要在色彩搭配、整體風格、字型上保持一致性和協調性，視覺上看起來和諧，這樣也有助於加深訪客對你的品牌記憶。我們在部落格中準備了很多架站知識，你可以點擊這個連結裡查看。這篇文章告訴你關於Logo設計的相關知識
- 字型風格：一般來說，西文字型大小在10 px左右，中文在13 px左右合適。
- 設計版式：Strikingly提供了很多範例，點擊這裡可以參考。
- 內容填充：內容的安排需要和品牌調性一致，不能產生衝突。
- 社群媒體：社群媒體不僅包括臉書、YouTube這些內容，你甚至可以使用Strikingly提供的自訂版塊直接植入你的網站實時聊天框。
- 版塊安排：版塊安排可以在左側根據自己需求添加或刪除。
- 配色設計：如果對配色不滿意，隨時可以在風格選項卡中更改。
以上就是手機網站架設開發的布局要點，現在智慧型手機普及，再加上手機網站架設費用也低，基本免費到幾千塊新台幣就能搞定，所以手機架站越來越受歡迎。如果你不方便用PC架設網站，那麼就可以用手機試一試哦！還想獲取更多有關手機架站的知識嗎？點這裡快速查看
