')}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand,.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:hsla(0,0%,100%,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:hsla(0,0%,100%,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:hsla(0,0%,100%,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:hsla(0,0%,100%,.5);border-color:hsla(0,0%,100%,.1)}.navbar-dark .navbar-toggler-icon{background-image:url('data:image/svg+xml;charset=utf-8, ')}.navbar-dark .navbar-text{color:hsla(0,0%,100%,.5)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;min-height:1px;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem}.card-subtitle,.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-bottom:-.75rem;border-bottom:0}.card-header-pills,.card-header-tabs{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem;border-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom,.card-img-top{flex-shrink:0;width:100%}.card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-deck .card{margin-bottom:15px}@media (min-width:576px){.card-deck{display:flex;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{flex:1 0;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group>.card{margin-bottom:15px}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;column-count:3;-webkit-column-gap:1.25rem;column-gap:1.25rem;orphans:1;widows:1}.card-columns .card{display:inline-block;width:100%}}.breadcrumb{display:flex;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item:before{float:left;padding-right:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover:before{text-decoration:underline;text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.page-link:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:3;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:3;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.badge{transition:none}}a.badge:focus,a.badge:hover{text-decoration:none}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-secondary{color:#fff;background-color:#6c757d}a.badge-secondary:focus,a.badge-secondary:hover{color:#fff;background-color:#545b62}a.badge-secondary.focus,a.badge-secondary:focus{outline:0;box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.badge-danger{color:#fff;background-color:#dc3545}a.badge-danger:focus,a.badge-danger:hover{color:#fff;background-color:#bd2130}a.badge-danger.focus,a.badge-danger:focus{outline:0;box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.App{display:flex;flex-direction:column}.App>.pageContent{flex:1 1;overflow:auto;padding-top:10px}.navbar-nav{flex-direction:row}.navbar-nav>*{padding-left:10px}.container{width:100%;max-width:1170px;padding-left:15px;padding-right:15px}@media only screen and (min-width:768px){.container{display:flex;flex-wrap:wrap;padding-left:30px;padding-right:30px}.container.dir-column{flex-direction:column}}.eu-cookie-notification-dialog{position:fixed;left:20px;bottom:-300px;padding:15px;width:310px;z-index:10000;font-size:12px;border-radius:4px;box-sizing:border-box;color:#555;background-color:#f4f6f8}.eu-cookie-notification-dialog .notification-title{font-size:14px;font-weight:700}.eu-cookie-notification-dialog .notification-content{padding:12px 0;line-height:1.4;display:inline-block}.eu-cookie-notification-dialog .link-text{margin:0 5px;color:#555;text-decoration:underline}.eu-cookie-notification-dialog .link-text:hover{color:#555}.eu-cookie-notification-dialog .notification-footer{display:flex;align-items:center}.eu-cookie-notification-dialog .common-button{cursor:pointer;color:#fff;font-size:12px;font-weight:700;padding:6px 10px;margin-right:10px;border-radius:4px;text-align:center;letter-spacing:normal;background-color:#4b5056}.eu-cookie-notification-dialog .setting-btn{color:#4b5056;background-color:#fff;border:1px solid #4b5056}.eu-cookie-notification-dialog .cancel-link{cursor:pointer}.eu-cookie-setting-dialog{width:100%;position:fixed;top:50%;left:50%;display:none;padding:20px;z-index:10000;max-width:500px;border-radius:5px;box-sizing:border-box;color:#555;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#f4f6f8;-webkit-animation:slide_in_animation .3s ease-in-out;animation:slide_in_animation .3s ease-in-out}.eu-cookie-setting-dialog .setting-title{font-size:14px;font-weight:700}.eu-cookie-setting-dialog .setting-item{display:flex;margin-top:20px;align-items:flex-start}.eu-cookie-setting-dialog .item-content{font-size:12px;margin:0 8px}.eu-cookie-setting-dialog .cookie-checkbox{cursor:pointer}.eu-cookie-setting-dialog .cookie-checkbox.necessary{cursor:not-allowed}.eu-cookie-setting-dialog .item-label{line-height:1;font-weight:700}.eu-cookie-setting-dialog .item-text{margin-top:5px;line-height:1.5}.eu-cookie-setting-dialog .setting-footer{margin-top:20px;text-align:right}.eu-cookie-setting-dialog .save-btn{cursor:pointer;color:#fff;font-size:12px;font-weight:700;padding:8px 10px;border-radius:4px;display:inline-block;letter-spacing:normal;background:#4b5056}.eu-cookie-setting-mask{position:fixed;display:none;top:0;left:0;width:100%;height:100%;z-index:10000;cursor:pointer;background:rgba(0,0,0,.4);-webkit-animation:slide_in_animation .2s ease-in-out;animation:slide_in_animation .2s ease-in-out}@-webkit-keyframes slide_in_animation{0%{opacity:0}to{opacity:1}}@keyframes slide_in_animation{0%{opacity:0}to{opacity:1}}.rtl-layout .eu-cookie-notification-dialog{right:20px;left:auto;text-align:right}.rtl-layout .eu-cookie-notification-dialog .common-button{margin-right:0;margin-left:10px}.rtl-layout .eu-cookie-setting-dialog-wrapper{text-align:right}.rtl-layout .eu-cookie-setting-dialog-wrapper .setting-footer{text-align:left}@media only screen and (max-width:520px){.eu-cookie-notification-dialog{width:100%;left:0}.rtl-layout .eu-cookie-notification-dialog{left:auto;right:0}}
如何打造高品質手機網站設計? - 建立你的網站 - Strikingly
手機網站設計 至關重要。為什麼?因為比起桌面電腦用戶,使用手機訪問網站的人顯然要更多。行動設備正在改變我們日常的訊息傳遞方式,如果你不優化你的企業網站以使其更適配行動設備,那麼你將錯失很多流量 。在這個數位時代,進行數位行銷已然成了企業不可或缺的推廣手段,而其中最常見的一種方式就是打造一個高品質手機網站設計來吸引更多源自行動設備的流量。為了幫助你更好地開展這項工作,本文將為你講解手機網站設計的重要性以及相關的架設技巧。如果你想了解網站配色方案,點擊這裡 學習更多。
文章綱要:
1. 什麼是手機網站設計?
2. 為什麼手機網站設計很重要?
3. 打造高品質手機網站設計的技巧
4. 文章總結
1. 什麼是手機網站設計? 手機網站設計通常指的是響應式網站設計 。當你在架設一個網站時,該網站會自動根據設備螢幕大小縮放網站內容和元素以適應螢幕尺寸。它可以防止圖像大於螢幕寬度,並使手機用戶不必做額外的工作來閱讀你的內容。響應式設計的最終目標是消除對未針對不同設備進行優化的網站進行不必要的大小調整、滾動、縮放或平移等動作。
響應式網站還消除了為智能手機用戶建立單獨的手機網站設計的需要。無需為不同的螢幕尺寸設計多個網站,因為你現在可以僅架設一個響應式網站,然後該網站會自動放大或縮小以適應正在查看的設備。
2. 為什麼手機網站設計很重要?
圖片取自Strikingly 產品
• 經濟可行性 為你的行動設備用戶和非行動設備用戶架設與保留不同的網站可能會很昂貴。但如果你使用響應式設計,則無需為手機網站設計額外付費,這將大大節省你的精力與金錢。
• 適應性 當你擁有響應式設計網站時,你可以快速輕鬆地進行更改。你不必擔心兩個網站進行的更改不同步。當你需要快速更改設計或糾正網站上的錯字時,這種靈活性非常有用——所有相關動作你只需執行一次。
• 增強的用戶體驗 網站所有者必須優先考慮用戶體驗 。你希望人們喜歡你的網站,並且你希望它易於使用,以便他們返回。如果有人在行動設備上訪問你的網站並且加載時間很長,或者你的圖像分辨率低,則可能會使你的公司顯得不專業。
• 搜索引擎優化帶來的收益 許多企業會在架設好網站後執行相關的搜索引擎優化 步驟好提升網站在Google搜索結果頁面上的排名。因為你在搜索結果頁面中的位置越高,客戶就越有可能找到你。而擁有一個手機網站設計可以幫助你有效優化搜索引擎結果排名,因為Google更喜歡收錄和索引那些行動友好的網站。當與其他 SEO 因素結合使用時,響應能力可以顯著提升搜索結果。
• 易於管理 大多數企業,尤其是小型企業,沒有太多時間來更新或刷新其網站的外觀。響應式設計無需聘請設計師來處理你網站的各個方面,而是讓你自己快速輕鬆地進行更改。此外,只有一個網站,你的網站內容與行銷素材也將更容易管理。你永遠不必懷疑自己疏漏更新了某個網站的內容,響應式網站將自動為你同步更改到你的桌面網站與手機網站設計。
3. 打造高品質手機網站設計的技巧 • 使用顯著的大尺寸按鈕
圖片取自Strikingly 產品
手機網站設計上的按鈕 必須足夠大,以便用戶在不放大的情況下可以輕鬆點擊它。還有需要注意的是,你必須為按鈕與按鈕之間留下一些空間,以避免用戶在點擊某個按鈕時誤觸另一個按鈕。
• 使用清晰易讀的大尺寸文本
圖片取自Strikingly 用戶網站
清晰的網站內容的重要性似乎是不言而喻的,它對手機網站設計的整體品質與視覺效果至關重要。所以,請確保你使用清晰易讀的字體設計並選擇適合的字體 尺寸,以便用戶可以輕鬆閱讀你所說的內容。
• 簡單的導航欄
圖片取自Strikingly 用戶網站
桌面網站導航 通常會佔用更多的空間。它們可以佔據螢幕頂部的整個部分,並有許多下拉選項,但由於桌面螢幕尺寸較大,因此不會太影響用戶體驗。但行動設備卻不是這種情況,因為螢幕空間有限,在建立你的手機網站設計時,你應盡可能提供簡約的可伸展網站選單(用戶在不打開該部分時內容會被隱藏起來)。然後,啟用過濾器或搜索功能來允許你的用戶可以更輕易地找到他們感興趣的內容。
• 提供用戶友好和直觀的搜索功能
圖片取自Strikingly 用戶網站
你手機網站設計上的搜索功能對行動設備用戶尤其重要。簡化的選單可以方便行動瀏覽,但會使查找特定項目變得困難。而將搜索功能置於網站設計中顯眼的位置,你可以讓用戶更輕鬆找到他們要查找的內容。
• 聯繫方式
圖片取自Strikingly 用戶網站
訪客可能會在閱覽你的網站之後希望聯繫你了解更多內容,但如果他們無法在你的手機網站設計上找到你的聯繫方式,他們很可能會感到沮喪並最終放棄想要理解更多的意願。良好的客戶服務是保持客戶滿意度和提高銷售表現的最主要元素之一,因此,請考慮你的手機網站設計中加入一個“聯繫我們”頁面 ,或者你也可以為你的網站啟用即時聊天功能 來方便用戶直接聯繫。
• 設計簡單的表單
圖片取自Strikingly 用戶網站
用戶可能更傾向於在電腦上填寫表單內容,因為桌面螢幕更大,用鍵盤打字更容易。因此,如果你希望讓那些使用行動設備訪問你的網站的用戶留下他們的訊息,你在手機網站設計上置入和發佈的表單必須更簡短,並且帶有大文本字段和按鈕。
• 設計引人注目的號召性用語
圖片取自Strikingly 用戶網站
號召性用語 (CTA) 可以有多種形式,比如橫幅,文本或一個按鈕。它的主要作用是推使用戶採取某種形式的行動。例如,你可以邀請用戶加入你的郵件訂閱列表、了解有關優惠的更多訊息或直接購買產品。
這種行銷策略在手機網站設計中至關重要。但是,在螢幕空間有限的情況下,建立引人注目的號召性用語並讓訪客看見它的難度更高。因此,建議你在為手機網站設計 CTA 時,盡量將它這些元素置頂,好讓用戶無需向下滾動即可看到它們。
• 遠離彈出窗口
圖片取自 谷歌
老實說:大多數網站訪客都討厭在瀏覽網站時遇到的彈出窗口。事實上,如果你在Google是哪個搜索“我討厭彈出廣告”這個關鍵字,搜索結果頁會產生近 4800 萬條結果。這足以看出人們對彈出窗口的厭惡性,因此,建議你在打造手機網站設計時,盡可能避免以下情況:
顯示覆蓋主要內容的彈出窗口 顯示用戶在訪問主要內容之前必須關閉的獨立插頁式廣告 使頁面頂部看起來像插頁式廣告,並將原始內容放在其下方 4. 文章總結 想要架設一個高品質手機網站設計,你可以從 Strikingly 開始。即使你毫無程式設計與網站設計經驗,該平台簡單易上手的編輯工具也能幫助你在短時間內獨立建立一個專業的網站 。更重要的是,在 Strikingly 平台上架出的所有網站都是自動響應式手機螢幕的。響應式行動網頁設計會自動縮小網站佈局的大小,以完美適應智能手機和平板設備等較小的螢幕。所以你還在等什麼?現在就前往 Strikingly 開始打造你的高品質手機網站設計吧!如果對內容有疑問,可以透過 support@strikingly.com 與我們聯絡。
Cookie的使用
我們使用cookie來改善瀏覽體驗、保證安全性和資料收集。一旦點擊接受,就表示你接受這些用於廣告和分析的cookie。你可以隨時更改你的cookie設定。 了解更多