24小時查詢服務熱線
香港網頁集團
  • 公司概覽 
    • 概覽 
    • 客戶群組 
    • 職位空缺 
  • 網頁設計 
    • 網頁設計 
    • 人才外判計劃 
  • 網絡行銷 
    • SEO搜尋引擎優化 
    • SEM搜尋引擎行銷 
    • 社交網絡推廣策略及推廣 
    • EDM 電郵宣傳策略及設計 
  • 政府資助 
    • BUD專項基金(BUD Fund) 
    • EMF中小企業市場推廣基金 
    • TVP科技券計劃 
  • 作品展示 
  • 最新資訊 
    • 網頁設計 
    • 網上推廣 
    • APP開發 
  • 聯絡我們 
  • sitemap 
Home » 手機網頁設計與策劃的10大原則
  • 近期文章

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
  • 網上推廣

    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 【網絡推廣核心邏輯】三大實戰策略突破Meta廣告的「創意疲勞」瓶頸
    • 提速網站FCP分數:全面攻略助你搶佔香港SEO先機
    • 精準流量變現的關鍵:香港企業如何利用SEO提升會員轉化率?
    • SEO公司緊急警報:網站流量突然暴增?小心黑帽SEO植入
  • 網頁設計

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
    • 網頁設計中最基礎的配色技巧 讓網頁在色彩海洋中脱穎而出
  • APP開發

    • APP設計技巧:如何利用重疊設計來增加APP的魅力
    • UX設計技巧:如何做好APP的BAR設計?提升整體APP的用戶體驗
    • APP設計策略:如何將信息對比應用APP設計中,以提高用戶體驗?
    • UI設計指南:底部彈出框需要重視哪些設計原則
    • Headspace APP設計案例分析:APP設計實踐中需運用哪些UX設計定律

手機網頁設計與策劃的10大原則

分類: APP開發, 最新資訊 Tags: #APP設計, APP開發, 交互設計 日期: 2016-07-27

隨著移動端網民數量的日益增多,各企業主已經把目標轉移到了移動端,手機網頁設計也成為企業發展盈利的又一主攻方向,那手機網頁設計應該從哪些方面下手呢?又需要遵循什麼規則呢?下面我就跟大家一一介紹:

1、一目了然

一目了然的意思就是可以讓用戶在短時間內,可以把內容看的清楚,那這就需要確保內容與屏幕大小的一致,有整齊的排版和舒服的字型大小,增強用戶的體驗。

大部分的行動裝置,畫面都不如桌上電腦那麼大,尤其是閱讀文字時更需要加以放大。即使智能手機具有網站放大縮小功能,但是觀看起來較為麻煩。因此設計行動網站時,建議是能夠以滑動螢幕的方式閱讀網站,因為滑動網站比起放大網站觀看來得簡單多了。

2、簡化導航

為避免用戶橫向滾動頁面,這個就需要有明確的目錄結構,提供醒目的“後退”和“首頁”按鈕,對於導航的目錄結構,穀歌列出了四種常見的手機網站的導航形式,分別是:橫條式、大按鈕式、列表式和選項式。

手機網站與跟一般的網站不同的,在於當閱讀文章到最後時,要回到最前頭是麻煩的,因此,網站制作公司,除了減少卷動畫面的機會外,也要加強導覽的功能,讓網站變得更容易於行動裝置上閱讀。

導覽設計的重點有:只在首頁的部份加入搜尋的功能,建立導覽功能鍵,其中以「回到首頁」、「回到上一頁」這兩個最為重要,最後,「回到上一頁」的按鍵除了首頁以外,其餘的頁面都需要放置。

3、流暢體驗

允許用戶保存搜索、書簽、購買等信息的功能。這就盡可能在所有平臺中提供相同信息和功能,即無論是PC端、平板端還是手機端都保持網站信息的一致性。

4、減少文字輸入部分

手機大多沒有實體的鍵盤,或僅只有12鍵的電話輸入功能,因此輸入文字上會比起使用鍵盤麻煩得多。因此,減少使用者輸入文字的機會,例如:個人的帳號、密碼、搜尋內文、使用編輯器等等,都是行動網站要盡力避免的。

建議設計的重點:允許行動上網使用者儲存輸入的帳號密碼資訊,輸入的區塊盡量加以放大,允許行動上網使用者,輸入簡易的密碼,例如PIN數字密碼。

5、拇指操作

通過較大的按鈕,以降低操作難度。為防止用戶因為按鈕較小而誤點其它選項或內容而造成的不便,可以在有限的手機屏幕上再適當給按鈕做些留白,按鈕之間的間距要加寬,以此擴大點擊範圍。

6、簡單快捷

所謂簡單快捷,就是要在手機有限的屏幕上以最簡單最實用最快捷的形式展示給用戶最需要的東西,讓用戶方便。做法是優先提供用戶最需要的內容和功能,盡可能的去掉在手機網站中可以去掉的內容、功能、板塊、按鈕等,只留下最精華的部分,起到精簡的作用。

一般的手機、平板電腦等行動裝置,不易容納下適合於個人電腦的龐大網站資訊,因此手機移動網站的首要重點,就是減少內容,不論是圖片、文字或是影音。

請記住一個重點:只要將最重要的資訊放入行動版網站,就是最主要的准則,重要性較低的、讀取需要時間的內容,則可以透過超連結,連回到正常的官方網站。行動網站必須十分的重視內容簡化這一點,一個塞滿內容的行動網站無法獲得網路客戶的青睞。

另外,建議你可以使用顏色和陰影,以便來凸顯按鈕。這一點不僅僅是針對搜索引擎的優化設計,更是手機站針對用戶體驗的人性化設計。

7、 觸控螢幕與非觸控螢幕設計

雖然現在是觸碰型的智能手機當道,但是仍有為數不少的傳統手機,沒有觸碰的界面,使用的是傳統的控制方向鍵做為導覽的工具。

例如:減少畫面中超連結的數量,可以讓選擇連結的時候出現一些減少一些按鈕的動作,或是加大文字以減少誤擊的問題。 此外更重要的是滑鼠的原理跟觸碰介面的原理有很大的差異,因此行動版的網站應該避免只有電腦滑鼠才能做到的功能。

舉例來說:「下拉選單」的這一項功能,因為行動裝置沒有「滑鼠座標」的設計,所以無法觸發滑鼠移動過去才會顯示出來的選單。

8、廣泛適應

網站能在不同的移動設備上運行,移除flash,可以使用HTML5來實現互動內容和動畫。很多站長可能不太懂HTML5相關技術以及自適應網頁技術,沒關系,你可以看下《如何利用“自適應網頁設計”實現不同的設備上呈現同樣的網頁》、《全方位解析響應式網頁的設計與應用》和《響應式網頁布局的實現方法原理》的相關介紹,相信可以解決你現在的問題。

手機的規格眾多,有的解析度為320*240,較新的則為800*480,而次世代的手機更有720P的解析度,因此行動網站如何滿足眾多的需求?一般來 說有兩種作法,一種是建立不同解析度的行動網站,由用戶於手機行動入口網站自行選擇;另一種做法則是透過手機的語法,例如CSS語法中的 Viewpoint就能夠根據手機的解析度加以決定瀏覽畫面的寬度。

9、重新定向,持續改進

自動判斷移動設備,重新定向相應適合的網站內容,根據不同的移動設備和屏幕尺寸,來顯示相應的網站內容,讓用戶可以切換電腦版與移動版網站,以便他可以選擇下次訪問的版本。

使用分析工具,了解用戶如何使用網站,收集用戶意見並反複測試,追蹤表現。移動網站不是移動應用,所以通過這些,可以得到持續的改進和調整。

10、立足本地,輕松轉化

與用戶位置相結合的個人化信息,例如地圖、路線、電話、本地信息等,在所有提供內容當中,本地化信息是最對用戶有幫助的。

簡化注冊登錄流程,也就減少了用戶的輸入麻煩,但是提供有助於轉化/注冊的信息也不能忽視。只是在簡單流程的前提下,提供有助於提升轉化率的信息給用戶。

手機上網有著許多傳統電腦所沒有擁有的優勢,其中最大的優勢就是不受時間和地點的限制,因此手機網站應該要特別發揚這些特色,讓移動網站具有一般網站不具有的更多優勢。

Share This Post!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
訂閱電子報 公司最新資訊 Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
    • 網頁設計
    • 平面設計
    • 網上推廣
    • 程式開發
    Inspirr網頁設計香港
    公司資訊
    概覽
    職位空缺
    服務範圍
    網站設計流程
    SEO網站優化
    手機程式開發
    平面設計
    作品案例
    網頁設計案例
    手機程式案例
    多媒體設計案例
    平面商業設計案例
    聯繫我們
    • inspirr Facebook
    • inspirr vimeo
    • inspirr blog
    • 雅虎認證官網
    • 新浪微博認證

    Inspirr網頁設計公司專業設計網站

    網頁設計、網上商店、編寫程序、網上顧問、網上廣告、網上行銷等。我們擁有優秀專業的團隊,獨特的網頁設計功能,Web Design等技術,秉持網上商店品質、創新、服務的經營理念,集合設計、科技及網上推廣的元素。

    inspirr地址

    香港上環德輔道中248號東協商業大廈6樓601室

    Inspirr聯繫電話

    (852) 3749 9734

    Inspirr郵箱

    Copyright @ 2023 Inspirr Creation. All rights reserved.

    友情鏈接: 香港網頁設計 公司網站管理