主頁 / 網店教學 / 網上商店設計 2017 趨勢:網店除了美觀,更要安全、擴展靈活、SEO就緒

網上商店設計 2017 趨勢:網店除了美觀,更要安全、擴展靈活、SEO就緒

網上商店設計2017年有什麼新趨勢?下面我們來探討一下。許多下面我們提到新的網店設計功能出現在今年中,我們預計它們會更普及。

HTTPS 加密連線

以前網站 HTTPS 加密連線一般只應用於網店付款網關或者銀行網上理財。Google 在 2014 年宣布提高使用 HTTPS 網站的 SERP 排名,亦有助於使 HTTPS 加密連線更受普及。根據 Alexa 的統計,至 2016 年 6 月,全球排名前 100 萬網站已經有超過 10% 使用 HTTPS. 另一個重要因素是 Google Security Blog 9 月 8 日宣佈 2017 年 1月起 Chrome 瀏覽器會對要求用戶輸入密碼的 HTTP 無加密連線網站發上不安全警告,這對使用無加密連線的網店會是非常不利。最近有國外非謀利機構 Let’s Encrypt 提供免費 SSL 證書,甚至支援通配符 SSL 證書。一些外國網頁寄存公司例如 ICDSoft , SiteGround 已經為她的網頁託管客戶提供免費 Let’s SSL 證書安裝。HTTPS 加密連線肯定會是2017年網店 的標準。

從響應式設計 → Progress Web Application

時至今日,移動設備已經非常流行,大部分的網上商店已經亦採用響應式設計 Responsive Design。網上商店設計往後的問題是再如何提升移動設備的用戶體驗。移動設備由於網絡速度較慢,處理器運算能力較低,所以網頁的載入的速度亦較慢。這就影嚮用戶體驗。有些陣營過去幾年的解決方法是網店 Apps 但由於種種原因未能普及,而有些陣營 (以 Google 為首) 的最新解決方法是 Progress Web Application (PWA) 而亦有網店開發商提供插件支援 PWA,取價亦非常公道。2017 應該會有更多大中小網店嘗試採用這個技術。
online shop-M


Layered Slider 分層式橫幅

由於先天限制 (不利搜索引擊) 和後天問題 (移動瀏覽器不支援),過去幾年已很少人用 Adobe Flash 技術來做橫幅Slider。代之是以圖片加上過場效果做成 Flashing 的效果。但在互動效果方面,當然沒有Flash技術靈活。但最新的 iQuery 技術變得非常成熟和能夠解決這個間題。橫幅再不是簡單以圖片製作,而是全面分層式整合文字、插圖、視頻等等的動畫和過場效果的分層式橫幅。用戶無需懂編程式或利用特殊工具。一般是整合在內容管理系統或商店後台。 slider-layer
之前要專業設計師幾佰元的一幅橫幅,現在店主可以利用分層式幅橫將推廣文字圖片信息交疊在底圖下,而底圖可以是幾塊美金的採購圖片又或者自己以手機拍攝,大悄減省成本和嚮應時間。


巨選單 Mega Menu – 靈活豐富適合不同的業務場景

已經推出好幾年並仍未算是非常普及。隨著更多網店模板支援 Mega Menu 及更多店主了解 Mega Menu 的好處,我們預期 2017 年 Mega Menu 將佔主導地位。Mega Menu 不同於傳統的下拉式選單 (使用文本式 “分類” → “子分類” → “產品” 結構),Mega Menu 提供一個充滿了選項的選單面板,讓用戶滾動一個按鈕就展示在網頁上。Mega Menu 允許店主更靈活的選擇要顯示的內容,組合不同內容連結放入選單面板的內容類別內 (可以是產品類別、打折產品、暢銷產品、特色產品、最新產品、HTML 內容、圖像、視頻等等)。Mega Menu 可以使用佈局,排版,甚至圖標和圖像,為用戶提供一個廣泛的選擇範圍,操作方式更簡單易懂。
pe-mega-menu
Mega Menu 優點之一是取消了傳統頁面下拉式選單導航,取而代之是條理分明的 Mega Menu,為用戶快捷提供更重要的信息,或提請用戶注意一些新的和特殊的信息,例如一個特別促銷活動,可以輕鬆適應不同的業務場景。


利用網誌博客實現內容行銷

2017 年內容行銷仍然是網上推廣的重點心法。但如果你是售買生產商的商品,商品描述很可能和其他網店大同小異。網上商店最怕是內容千編一律,除非是像淘寶,eBay 的大型網店市集 Marketplace。其中一個解決的方法就是加入網誌博客功能為網站網店宣傳推廣,定其發佈商品最新消息和使用心得,兼且有效的博客對 SEO 排名很有幫助。
online-shop-blog
博客不同於靜態資訊頁,博客的特色是可以將文章歸類方便索引,博客文章可以讓讀者加入評論和回復從而促進互動。有些博客甚至會加入相關商品功能方便直接作內容行銷。


寬屏幕網上商店設計

網格 (Grid System) 是一個2維的排版架構用以有效地編排網頁。最流行是 960 Grid System, 兼容性最高以 960 px 為設計闊度,適合解像度1024 x 768 的電腦顯示屛。如果在解像度較高的顯示屛觀看,你會發現左右兩邊的空間較多,只可以顯示背景圖片不能用於其他用途,例如產品顯示。 960-grid 隨著 16:9 或 16:10 電腦顯示屛的電腦的普及,網上商店設計師更希望善用左右兩邊的空間,Fluid Grid 設計可以自動調節迎合不同的屏幕寬度,更容易設計出善用左右側空間的模板。

網上商店設計


SEO 優化結構

建立網店似乎越來越容易,但要做好商店卻越來越難。特別是必須要有效利用 SEO 優化網上推廣。2017 年 SEO 優化仍然會是一個主要題目。SEO 優化結構是網上商店系統一個必須的要求。所謂 SEO 優化結構的網上商店是指平台已經建立一個優良架構,有利搜索引擊為商店進行排名。例如:

  • 支援SEO Rewrite URL, 讓你可以設定更有義意的URL名稱
  • 輕鬆編輯 Meta tag 等等
  • 對 Slider 的處理應該是將 Sidebar 內容放在主頁內容之後,不管 Sidebar 是放左或放右
  • 導航的選單不是以 SEO 難以理解的 javascript 建構
  • 自動或容易生成 sitemap
  • 沒有使用 Flash 技術
  • 正確處理 HTML 標題標簽 H1, H2, H3… 等等

還是社交媒體

社交媒體網絡的整合已經不是新鮮的事情。利用社交媒體推廣綱上商店需要了解不同的媒體特性。例如:Pinterest是一個圖片分享類的社交網站,用戶可以按主題分類添加和管理自己的圖片收藏,並與好友分享。Pinterest 是繼 Facebook 和 Twitter 後第三個最大的社交媒體網絡,特點是用戶可以很容易將綱上瀏覽時遇到的相片,文本和視頻上載至自己的 Pin Board 與其他人分享。例如在籌辦婚禮派時瀏覽中看到漂亮衣服,只要按一下分享鍵就可以上載婚莎產品相片到 Pin Board 方便以後檢索。 pinterest Pinterest 最近允許企業創建業務頁面,推廣他們的業務網絡。這樣的業務頁面可以作為一個“虛擬商店”。在一個時尚網站案例研究中,發現訪問 Pinterest 的用戶花掉約 $180,相比來自 Facebook 的用戶只花掉約 85 美元多。這些用戶花費更少的時間在產品公司的網站上,而選擇瀏覽公司的 Pinboard。此外品牌的研究已持續顯示 Pinterest 的是比其他形式的社交媒體更有效的促進銷售。在2013年,Pinterest 的引入了一個新的工具,稱為“Rich Pin”,提升客戶瀏覽公司銷售業務頁面時的體驗。業務頁面可 以包括產品的價格,電影或配方成分的評級。我們相信在2014年,越來越多的網上商店會利用 Pinterest 推廣自己的品牌和風格。 giftsmall-watch


更多采用 HTML5 和 CSS3

HTML5 是HTML下一個增訂版本,雖然仍未完全定案,但很多瀏覽器如 Chrome, Firefox 已經逐漸加入 HTML5 添加的新語法特徵,例如 <video> 語法特徵的支援可以完全取代依賴 Flash 技術播放視頻。HTML5 減少瀏覽器對外掛程式的要求,有利於兼容性和穩定性。
html5-css3
CSS 是一種添加樣式如字體,間距等等的語言,好處是令網頁文件結構更靈活和增加可讀性。CSS 被模板開展人員大量應用於網上商店的模板開發。CSS3 是 CSS 下一個增訂版本,雖然仍未完全定案,但很多瀏覽器已經逐漸加入 CSS3 添加的新語法特征。


鎖定選單功能 Sticky Menu

鎖定選單 Sticky Menu 功能指當你上下流動瀏覽網店時,選單會自動鎖定在頁面頂部。如果你有大量產品或者沒有使用垂直分類選單時,鎖定選單功能會令用戶體驗改善。

sticky-menu

了解更多網上商店

[初稿發佈於 2013 年 7月26日]
摘要
網上商店設計 2017 趨勢:網店除了美觀,更要安全、擴展靈活、SEO就緒
文章名稱
網上商店設計 2017 趨勢:網店除了美觀,更要安全、擴展靈活、SEO就緒
描述
網上商店設計2017年有什麼新趨勢?許多下面我們提到新的網店設計功能出現在今年中,我們預計它們會更普及。時至今日,移動設備已經非常流行,大部分的網上商店已經亦採用響應式設計 Responsive Design。網上商店設計往後的問題是再如何提升移動設備的用戶體驗。
作者
發佈者名稱
Well Develop International Limited
發佈者商標
Facebook Comments

關於 WaiTing LI

香港SEO專家。專家地位並非紙上談兵自說自話而來,應該是基於由同業又或者權威的獨立第三方給予的評價。而SEO專家地位大致可以從 Google 給予你所競逐一大籃子競爭性高的關鍵字排名結果推斷出來。其他我關於宣傳推廣的文章亦取得很高排名。這方面搜尋引擎似乎亦給予我專家效應。

也查看

網上商店App -開發前要考慮長遠維護問題和費用,未來可能是 PWA

隨著技術的成熟進步,今天開發 …

發表迴響

支持我們!

如果你喜歡這個網站,請點擊以下按鈕支持我們!