fbpx

2018年 網上商店設計8個Tips – 網店要美觀,更要安全、擴展靈活、SEO

SEO搜尋引擎優化, 網上商店, 網頁設計

2018年網上商店設計有什麼Tips?

HTTPS 加密連線

SSL for website

以前網站 HTTPS 加密連線一般只應用於網店付款網關或者銀行網上理財。Google 在 2014 年宣布提高使用 HTTPS 網站的 SERP 排名,亦有助於使 HTTPS 加密連線更受普及。根據 Alexa 的統計,至 2016 年 6 月,全球排名前 100 萬網站已經有超過 10% 使用 HTTPS. 另一個重要因素是 Google Security Blog 9 月 8 日宣佈 2017 年 1月起 Chrome 瀏覽器會對要求用戶輸入密碼的 HTTP 無加密連線網站發上不安全警告,這對使用無加密連線的網店會是非常不利。

HTTPS 加密連線肯定會是2018年網店 的標準。

從響應式設計 → Progress Web Application

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

Layered Slider 分層式橫幅

Layered slider由於先天限制 (不利搜索引擊) 和後天問題 (移動瀏覽器不支援),過去幾年已很少人用 Adobe Flash 技術來做Banner Slider。代之是以圖片加上過場效果做成 Flashing 的效果。但在互動效果方面,當然沒有Flash技術靈活。但最新的 iQuery 技術變得非常成熟和能夠解決這個間題。Banner再不是簡單以圖片製作,而是全面分層式整合文字、插圖、視頻等等的動畫和過場效果的分層式Banner。用戶無需懂編程式或利用特殊工具。一般是整合在內容管理系統網上商店後台。

之前要專業設計師幾佰元的一幅banner,現在店主可以利用分層式banner將推廣文字圖片信息交疊在底圖下,而底圖可以是幾塊美金的採購圖片又或者自己以手機拍攝,大大減省成本和時間。

Mega Menu – 靈活豐富的選單

Mega Menu 的好處已經推出好幾年並仍未算是非常普及。隨著更多網店模板支援 Mega Menu 及更多店主了解 Mega Menu 的好處,我們預期 2018 年 Mega Menu 將佔主導地位。Mega Menu 不同於傳統的下拉式選單 (使用文本式 “分類” → “子分類” → “產品” 結構),Mega Menu 提供一個充滿了選項的選單面板,讓用戶滾動一個按鈕就展示在網頁上。Mega Menu 允許店主更靈活的選擇要顯示的內容,組合不同內容連結放入選單面板的內容類別內 (可以是產品類別、打折產品、暢銷產品、特色產品、最新產品、HTML 內容、圖像、視頻等等)。Mega Menu 可以使用佈局,排版,甚至圖標和圖像,為用戶提供一個廣泛的選擇範圍,操作方式更簡單易懂。

Mega Menu 優點之一是取消了傳統頁面下拉式選單導航,取而代之是條理分明的 Mega Menu,為用戶快捷提供更重要的信息,或提請用戶注意一些新的和特殊的信息,例如一個特別促銷活動,可以輕鬆適應不同的業務場景。

寬屏幕網上商店設計

網格 (Grid System) 是一個2維的排版架構用以有效地編排網頁。最流行是 960 Grid System, 兼容性最高以 960 px 為設計闊度,適合解像度1024 x 768 的電腦顯示屛。如果在解像度較高的顯示屛觀看,你會發現左右兩邊的空間較多,只可以顯示背景圖片不能用於其他用途,例如產品顯示。

隨著 16:9 或 16:10 電腦顯示屛的電腦的普及,網上商店設計師更希望善用左右兩邊的空間,Fluid Grid 設計可以自動調節迎合不同的屏幕寬度,更容易設計出善用左右側空間的模板。

 

SEO 優化結構

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

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

更多采用 HTML5 和 CSS3

HTML5 是HTML下一個增訂版本,雖然仍未完全定案,但很多瀏覽器如 Chrome, Firefox 已經逐漸加入 HTML5 添加的新語法特徵,例如 <video> 語法特徵的支援可以完全取代依賴 Flash 技術播放視頻。HTML5 減少瀏覽器對外掛程式的要求,有利於兼容性和穩定性。

運用 HTML5 和 CSS3

CSS 是一種添加樣式如字體,間距等等的語言,好處是令網頁文件結構更靈活和增加可讀性。CSS 被模板開展人員大量應用於網上商店的模板開發。CSS3 是 CSS 下一個增訂版本,雖然仍未完全定案,但很多瀏覽器已經逐漸加入 CSS3 添加的新語法特征。

鎖定選單功能 Sticky Menu

Sticky Menu 的使用

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

Post a comment