2018年 網上商店設計8個Tips - 網店要美觀，更要安全、擴展靈活、SEO - TAN-studio 香港網頁設計 - 香港HK WordPress, OpenCart, Shopify...

[vc_row][vc_column][vc_custom_heading text=”2018年網上商店設計有什麼Tips？” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_custom_heading text=”HTTPS 加密連線” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_column_text]

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

HTTPS 加密連線肯定會是2018年網店 的標準。[/vc_column_text][vc_custom_heading text=”從響應式設計 → Progress Web Application” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_column_text]時至今日，移動設備已經非常流行，大部分的網上商店已經亦採用響應式設計 Responsive Design。網上商店設計往後的問題是再如何提升移動設備的用戶體驗。移動設備由於網絡速度較慢，處理器運算能力較低，所以網頁的載入的速度亦較慢。這就影嚮用戶體驗。(以 Google 為首) 的最新解決方法是 Progress Web Application (PWA) 而亦有網店開發商提供插件支援 PWA，取價亦非常公道。2018 應該會有更多大中小網店嘗試採用這個技術。[/vc_column_text][vc_custom_heading text=”Layered Slider 分層式橫幅” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_column_text]由於先天限制 (不利搜索引擊) 和後天問題 (移動瀏覽器不支援)，過去幾年已很少人用 Adobe Flash 技術來做Banner Slider。代之是以圖片加上過場效果做成 Flashing 的效果。但在互動效果方面，當然沒有Flash技術靈活。但最新的 iQuery 技術變得非常成熟和能夠解決這個間題。Banner再不是簡單以圖片製作，而是全面分層式整合文字、插圖、視頻等等的動畫和過場效果的分層式Banner。用戶無需懂編程式或利用特殊工具。一般是整合在內容管理系統或網上商店後台。

之前要專業設計師幾佰元的一幅banner，現在店主可以利用分層式banner將推廣文字圖片信息交疊在底圖下，而底圖可以是幾塊美金的採購圖片又或者自己以手機拍攝，大大減省成本和時間。[/vc_column_text][vc_custom_heading text=”Mega Menu – 靈活豐富的選單” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_column_text]已經推出好幾年並仍未算是非常普及。隨著更多網店模板支援 Mega Menu 及更多店主了解 Mega Menu 的好處，我們預期 2018 年 Mega Menu 將佔主導地位。Mega Menu 不同於傳統的下拉式選單 (使用文本式 “分類” → “子分類” → “產品” 結構)，Mega Menu 提供一個充滿了選項的選單面板，讓用戶滾動一個按鈕就展示在網頁上。Mega Menu 允許店主更靈活的選擇要顯示的內容，組合不同內容連結放入選單面板的內容類別內 (可以是產品類別、打折產品、暢銷產品、特色產品、最新產品、HTML 內容、圖像、視頻等等)。Mega Menu 可以使用佈局，排版，甚至圖標和圖像，為用戶提供一個廣泛的選擇範圍，操作方式更簡單易懂。

Mega Menu 優點之一是取消了傳統頁面下拉式選單導航，取而代之是條理分明的 Mega Menu，為用戶快捷提供更重要的信息，或提請用戶注意一些新的和特殊的信息，例如一個特別促銷活動，可以輕鬆適應不同的業務場景。[/vc_column_text][vc_custom_heading text=”寬屏幕網上商店設計” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_column_text]網格 (Grid System) 是一個2維的排版架構用以有效地編排網頁。最流行是 960 Grid System, 兼容性最高以 960 px 為設計闊度，適合解像度1024 x 768 的電腦顯示屛。如果在解像度較高的顯示屛觀看，你會發現左右兩邊的空間較多，只可以顯示背景圖片不能用於其他用途，例如產品顯示。

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

 [/vc_column_text][vc_custom_heading text=”SEO 優化結構” font_container=”tag:h3|text_align:left” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_column_text]建立網店似乎越來越容易，但要做好商店卻越來越難。特別是必須要有效利用 SEO 優化做網上推廣。2018 年 SEO 優化仍然會是一個主要題目。SEO 優化結構是網上商店系統一個必須的要求。所謂 SEO 優化結構的網上商店是指平台已經建立一個優良架構，有利搜索引擊為商店進行排名。例如：

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

[/vc_column_text][vc_custom_heading text=”更多采用 HTML5 和 CSS3″ font_container=”tag:h3|text_align:left” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_column_text]HTML5 是HTML下一個增訂版本，雖然仍未完全定案，但很多瀏覽器如 Chrome, Firefox 已經逐漸加入 HTML5 添加的新語法特徵，例如 <video> 語法特徵的支援可以完全取代依賴 Flash 技術播放視頻。HTML5 減少瀏覽器對外掛程式的要求，有利於兼容性和穩定性。

CSS 是一種添加樣式如字體，間距等等的語言，好處是令網頁文件結構更靈活和增加可讀性。CSS 被模板開展人員大量應用於網上商店的模板開發。CSS3 是 CSS 下一個增訂版本，雖然仍未完全定案，但很多瀏覽器已經逐漸加入 CSS3 添加的新語法特征。[/vc_column_text][vc_custom_heading text=”鎖定選單功能 Sticky Menu” google_fonts=”font_family:Abril%20Fatface%3Aregular”][vc_column_text]

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