26 10 月 2020

2020 網頁設計者的靈感泉源,七個網頁設計師最常造訪的創意網站

在競爭激烈的網路世界中,華麗的網頁設計功能以及流暢的網頁設計使用體驗已不能滿足使用者的需求,網頁設計的視覺體驗對於使用者的影響比例已日益增加,在使用網頁時,不僅要滿足原先的搜尋需求,同時也必須符合感官上的饗宴;除此之外,一個視覺設計之於網頁,就好比一個人的穿著之於他人的第一印象,不同的穿著以及搭配,能帶給旁人不同的感受,網頁的視覺設計亦然,因此,在網頁設計的整體配色、Logo 搭配、素材使用上,都必須得體,才能讓使用者對於品牌有正面的回應。而在本文中,將提供數個執行網頁設計時,網頁設計者可以參考的網站,幫助在網頁設計的過程中,更能設計出讓使用者願意駐足久留的網站。

網頁設計參考

One Page Love

網頁設計在最近的網路世界中,逐漸興起一股一頁式網站風潮,在過往,大部分的一頁式網頁設計多用於短期的活動上,而如今越來越多的電商業主,也傾向於選擇一頁式網頁設計,然而一頁式網頁設計最大的困難在於,需要在僅限的頁面中,將所有的訊息清楚傳遞,且有鮮明的記憶點,正因為如此,一頁式網頁設計在整體的設計構思上,會需要更多的巧思。在 One Page Love 中,提供了許多一頁式網頁設計版型的免費下載,幫助網頁設計者在執行一頁式網頁設計時,可以有更明確的方向並啟發更多的靈感。

awwwards

awwwards 是一個知名的專業網頁設計評分平台,在 awwwards 有來自世界各地的專業網頁設計師們,對所有投稿的網頁設計作品進行評分,也因此,經由 awwwards 評分的網站,在參考價值上具有一定的可信度。而 awwwards 除了有過往的評分作品外,也有來自使用者對於實用網頁設計的教學與工具分享,對於網頁設計者來說,可說是一個極富參考價值與實用性的網頁設計資料庫來源。

Web Design Clip

網頁設計Web Design Clip 是日本一個集結了許多網頁設計作品的網站,裡面集結了非常多的種類,從行動版網頁設計到 Landing Page 網頁設計作品都有收錄,更特別的是 Web Design Clip 上可以依據所選的不同主色調、副色調、layout 去進行不同的搜尋,點擊網站縮圖即可進到網站進行瀏覽,Web Design Clip 在色調、排版上提供了網頁設計者非常多可運用的資源。

CSS  Drive

CSS Drive 收錄了許多極具質感的網頁設計作品,並對每個網站進行分析,以及進一步製作出相對應的調色板以及配色分析,同時顯示不同亮度的色板,讓網頁設計者可以清楚的了解配色的模式,並啟發網頁設計者在配色上的靈感。

網頁設計色彩搭配

Color Hunt

網頁設計

Color Hunt 集結了各式各樣的色彩創意組合,每個組合都包含 4 個顏色,網頁設計者可以依據喜好的色調去進行瀏覽,選擇出適合搭配的色彩模式。

NIPPON COLORS

NIPPON COLORS 是一個日本的配色網站,裡頭網羅了各種充滿日本風味的顏色,除了提供色號外,NIPPON COLORS 也為每個顏色冠上了還有濃濃日本味的傳統名稱,如「薄紅」、「長春」、「唐茶」等等,非常適合想要呈現東方色彩的網頁設計師做參考。

Design Seeds

網頁設計不同於網路上其他的配色網站,Design Seeds 會根據不同的照片素材,從中抓取所有的環境配色。利用現實生活中的實際照片,找出其中的和諧色調,激發網頁設計者再決定配色時的靈感,讓網頁設計可以更具有一體成型的感覺。

 

要架設出一個網站並不困難,但要架設出一個使用者願意停留瀏覽,並有後續轉換動作的網站,就必須仰賴需多網頁設計的「眉角」,如果時常苦於網頁設計找不到靈感,時常在網頁設計的過程中碰壁,除了參考上述的網頁設計範例網站之外,也可以求助於專業的網頁設計團隊,例如戰國策網頁設計,擁有近萬家網頁設計經驗的戰國策網頁設計,更能快速的了解業主的需求以及困難,提出相對應的解套方案,為網頁設計提供最專業的服務與建議。

Share this
26 10 月 2020

比起視覺上的體驗,執行網頁設計時,更不可忽略的五大重點

身為網頁設計者或是想要執行網頁設計的業主,在執行網頁設計初期,一定都會有一個想法:我要做出一個美觀、吸引人目光的網站。的確,視覺體驗在網頁設計上佔了很大的一部分,但在這之外,網站是否提供一個使用者體驗友善的瀏覽方式、是否符合搜尋引擎優化 SEO 的標準,這些都是在網頁設計中不可忽略的部分,如何讓這每一環節相輔相成達到網頁設計效益最大化,還需仰賴網頁設計者在執行網頁設計時,從中取得一個平衡。

網頁設計重點一:瀏覽動線建立在視覺體驗上

網頁設計在執行網頁設計時,明確的瀏覽動線是幫助使用者在瀏覽網頁時可以更快速找到內容的方式,但太平鋪直敘的瀏覽動線,在視覺體驗上卻也缺乏了一些新鮮感,因此在執行網頁設計的瀏覽動線時,可以運用文字與影音的搭配,增加內容的豐富度,同時也可以為原本枯燥乏為的內容,增加更多吸引人的地方提高使用者的瀏覽體驗品質並降低網頁的跳出率。詳細的網頁設計瀏覽動線設計可以參閱:2020 網頁設計大哉問,從排版開始抓住使用者的目光,增加網站停留時間

網頁設計重點二:分享 icon 的輔助

網頁設計當使用者在網路上看到有趣的內容或是吸引人的商品時,第一時間一定是會想分享給身邊的親朋好友,這時就需要仰賴分享標誌的幫助了,有了明確的分享按鈕,像是臉書、IG、部落格或是網誌複製的按鈕,使用者可以更快速的把網頁分享給別人,這對於網頁設計在搜尋引擎優化 SEO 上是一個很大的幫助,因為當網頁設計提高了使用者願意自主分享網頁的頻率時,就能有更高的機會讓搜尋引擎判定該網站的內容是實用且符合使用者需求的。

網頁設計重點三:響應式網頁設計 RWD

在這個多元裝置的時代,電腦已經不再是上網的唯一媒介,手機、平板、筆電、桌電等等,都能夠用來瀏覽網站,然而,這些顯示屏幕大小不一的裝置,所適合的網頁設計排版方式以及瀏覽動線也相差甚遠,這時就需要藉由響應式網頁設計 RWD 的幫助,讓使用不同瀏覽裝置的使用者,都能夠獲得最佳的使用者體驗,除此之外,響又是網頁設計 RWD 的使用,對於搜尋引擎優化 SEO 也有很大的幫助,更多響應式網頁設計 RWD 以及 搜尋引擎優化 SEO 可以參閱:輕鬆兩招,讓你的網頁設計更勝其他網站,成功攻佔搜尋引擎頁面排行榜

網頁設計重點四:圖片替代文字優化

圖片搜尋已成了目前網路上逐漸被大家所重視的趨勢,當使用者在搜尋引擎上進行圖片時,有輸入相關替代文字的圖片將會有較高的機率顯示,當使用者瀏覽到對吸引自己或是感到興趣的圖片時,就會進行點擊,進而進入到網站中,因此在此一環節的網頁設計,不論是在素材上的呈現亦或者是在圖片替代文字上的優化,兩者都是缺一不可的。

網頁設計重點五:標題的使用

網頁設計善用標題標記 Title Tag 的使用,不僅能強化搜尋引擎優化 SEO 的優勢,當使用者在進行瀏覽時,也看以根據不同的標題,尋找到合適的內容以及快速了解到個區塊的重點;除此之外,在使用標題標記時,內容的主要關鍵字一定要出現在標題上,這可以幫搜尋引擎判斷網頁內容;而對於文字內容較多的網頁設計來說,建議在段落的前一百個字中,就要先清楚地闡述下面內容的重點以及摘要,才能讓使用者有更多的機會進行進一步的閱讀以及瀏覽。

 

說了五大網頁設計除了在視覺體驗上也必需要注意的重點,雖然看似簡單,但實際在執行網頁設計上,卻發現需要注意的細節百百種,這時適時地尋求專業的網頁設計公司的協助,不僅可以幫助獲得更多網頁設計面的相關建議,也可能幫助尋找更多網頁設計的靈感。戰國策網頁設計,在這競爭激烈的網頁設計市場中,卻能屹立 20 年,同時累積了近萬家的網頁設計經驗,在過往客戶的忠誠度以及信任度上也有卓越的表現。戰國策網頁設計,24 小時不間斷的線上客服專線,隨時隨地的提供最即時的網頁設計資訊,幫助解決各種網頁設計上遇見的疑難雜症。

Share this
26 10 月 2020

2020 網頁設計大哉問,從排版開始抓住使用者的目光,增加網站停留時間

大家都知道網站是在現今的網路世界中不可缺少的工具之一,也都了解網站架設的重要性,但在開始開始執行網站設計時,卻也難免遭遇不知道該如何開始的困境,然而放眼望去,網路上玲琅滿目的網站,總有一些蛛絲馬跡是可以運用在初始的網頁設計上的,本篇將整理出三種網頁設計者最常使用的網頁設計模板,幫助網頁設計者可以在初期進行網頁設計規劃時,可以有一個更明確的方向,創造一個兼具實用以及視覺體驗的網站,達到業主創建網站的目標。

網頁設計公司網頁設計事前準備

在著手開始網頁設計之前,你需要先了解你的使用者,統計數據指出,有將近 80% 的網路使用者在瀏覽網頁內容時,傾向於使用快速掃瞄的方式閱讀,利用最短的時間找出符合他們需求的內容,甚至是對他們有絕對吸引力的資訊,當得到這些資料後,才會促使他們願意進一步停留在網站上;此外根據調查,多數使用者在瀏覽網站時,只會瀏覽網站前半部的資訊,之後內容的瀏覽量則以倍數快速下降,也因此在網頁設計時,網頁內容的排版呈現,以及瀏覽動線,就成了網頁設計者在進行網頁設計時,第一個需要先考量到的重點。

網頁設計版型一:Z 型排版

圖片來源:每日頭條

Z 型排版是一種在網頁設計中常見的排版方式,所謂的 Z 型排版,是指使用 Z 型的閱讀模式,瀏覽動線從從左到右,從上到下,形成一個 Z 字型的瀏覽方式。Z 型排版的優勢在於,他的呈現方式簡單,幾乎可以適用於所有的網頁設計,而在使用 Z 型排版時,網頁設計者必須根據內容的重要程度去做排列,沿著 Z 字型的閱讀動線依序放上重要的內容,因此在使用 Z 型排版時,首先要定義的是各項資訊的輕重關係。

網頁設計版型二:古騰堡排列

古騰堡排列可以說是最簡單的網頁設計排版樣式,在過去,網頁瀏覽者的習慣與閱讀報章雜誌相同,習慣一行一行的進行閱讀,由上到下由左到右,也因此我們可以觀察到在報章雜誌上的標題、網站的 Logo 等重要的訊息,普遍都是放置在頁面最上方或是上方偏左的位置。一般來說,古騰堡排列會建議使用於多文字的網頁設計上。

網頁設計版型三:F 型排版

網頁設計

圖片來源:10種網站設計布局模式整理

F 型排版是目前最被廣泛使用的網頁設計佈局判定的依據,來自於追蹤使網野瀏覽者的閱讀動線,依據不同的顏色區隔出瀏覽者感興趣的內容分佈。由於現今網站的普及以及爆炸的資訊量,瀏覽者會快速進行掃描,搜尋感興趣的內容,而在這樣的觀察下,發現當瀏覽者在進行快速閱讀時,很少會認真閱讀段落內的內容,也因此凸顯出了標題使用的重要性以及在各段落的前兩行,就明確表達出段落重點的必要性,通常在部落格、搜尋結果頁面多數會傾向於使用 F 型排版。

 

但無論是上述哪種排版方式,網頁設計者在一開始,都必須先瞭解網頁瀏覽者在進行網站瀏覽時,他們會希望率先獲得哪些資訊,同時網頁設計者也必須知道,哪些資訊是應該在最一開始就呈現給瀏覽者的,在這些層級排列下,套入相對應的版型內,才可以同時增加瀏覽者的閱讀意願,又能正確傳遞出網頁設計在最初所設定希望傳達的訊息目標。此外,研究也指出,由於網頁瀏覽者對於圖像化的資訊能夠擁有較佳的記憶能力,因此在執行網頁設計排版時,適時地使用圖像或是影片的素材到網頁設計的排版動線中,都有助於提高網頁瀏覽者的瀏覽時間以及瀏覽意願。

除此之外,尋求專業的網頁設計團隊協助,也是一個可以幫助網頁設計者在最初執行網頁設計時可以參考的一個方向,舉例來說,戰國策網頁設計擁有將近 20 年的網頁設計經驗,並執行過近萬家的網頁設計,在這樣豐富的經歷下,戰國策網頁設計更能為網頁設計者提供精準的建議,以及後續網頁設計的相關規劃,幫助網頁設計者在網頁設計的過程上,事半功倍。

Share this
28 9 月 2020

Smart Coupon 更強大的折價系統提升轉換率大功臣|WordPress實用外掛特輯

Woocommerce Smart Coupon,是一般Coupon的進階版,可以處理免費版無法做到的功能

免費版的折價券功能可以做到

  • 限定單筆折價金額
  • 最低、最高消費金額的使用限制,例如最低消費$100可以使用、最高消費金額不超過$10000可使用
  • 折價券疊加使用設定
  • 哪些商品可以使用、哪些分類的商品可以使用

Smart Coupon進階功能

  • 前台可以直接顯示可使用的折價券代碼
  • 同樣的折價券一次生成多張,並擁有不同的折扣碼,以此追蹤不同折扣碼的行銷成果
  • 專屬新用戶的折價券
  • 任何知道代碼的人都可以使用折價券
  • 限定折價券的適用國家,只有某個國家可使用!
  • 當使用這個代碼後,自動將某個商品加入購物車,並享有折扣(可用在贈品或商品組合優惠設定)

下載與安裝

首先,到WooCommerve smart coupon 購買並下載

smart coupon 官方網站購買後會得到下載檔案的許可,把檔案下載下來,接著到WP後台選擇外掛安裝,選取剛剛下載的檔案上傳即可。

smart coupon 檔案上傳

之後選擇後台左方選單的行銷,找到折價券的選項點擊後,就能開始使用Smart Coupon的強大功能

在選項一般的區域,有三個進階功能分別是

  1. 前台可以直接顯示可使用的折價券代碼
  2. 同樣的折價券一次生成多張,並擁有不同的折扣碼,以此追蹤不同折扣碼的行銷成果
  3. 專屬新用戶的折價券

在使用限制的區域,有兩個進階功能分別是

  1. 任何知道代碼的人都可以使用折價券
  2. 限定折價券的適用國家,只有某個國家可使用,透過帳單或寄件地址並選出禁用的地區就能達到功效

 

Actions的區域有一個進階功能

  • 當使用這個代碼後,自動將某個商品加入購物車,並享有折扣(可用在贈品或商品組合優惠設定)

 

最後的最後,作者本人認為基礎版的折價券其實就很夠用,要不要升級主要是看電商需求,功能變得比較完整也比較強大,以每年不到3000的費用來說,算是非常的超值,推薦給各位電商老闆們!

延伸閱讀:3個小技巧就能提升轉單率!Checkout Field Editor 結帳頁優化利器

 

 

 

 

 

 

 

Share this
24 9 月 2020

從頭開始為網站打好基礎,讓網頁設計成為你在網路上最重要的利器

在這個網路發達的時代,網頁已成為企業主、品牌或是經營個人形象的工作者接觸使用者最重要的渠道,根據數據指出全球每人每天平均上網時間將近約 7 小時,在這樣可觀的市場下,網頁設計便成了至關重要的關鍵,但究竟該自己進行網頁設計抑或是請專業的網頁設計公司,也成了一個令人頭大的問題。

網頁設計第一步:網域申請與購買虛擬主機

網頁設計其實架設網站就好比建造一棟屬於自己的房子,首先你需要的是一塊地和一個地址,而地址就好比是網頁的網址;建地則是虛擬主機。

網域申請

網域就是常聽到的 Domain Name,如同地址一樣,是一個網際網路中的門牌號碼,舉例來說,在台灣最常見的網域大概就屬 .com 和 .com.tw 以及在教育機構會使用的 edu。決定好了網域之後接下來需要申請前面的網址,就像是地址中的路名和巷弄,一般在設定網址時,會建議使用簡單或是和品牌相關的字串,讓使用這可以更方便記憶,像是 https://www.google.com/ 或是 https://www.nike.com/。

購買虛擬主機

有了網域之後,接著就是需要購買虛擬主機,虛擬主機根據不同的特性、作業系統、所在位址等等,而有不同種的分類,詳請可參考:虛擬主機是什麼?該如何挑選?但由於在選擇虛擬主機和設定網域時,總會遇到一些設定上的問題,因此在執行這些前置作業時,建議可以尋求像是戰國策集團這樣的網頁設計服務公司,提供網域申請與虛擬主機租用、購買的相關服務,不僅可以解決許多技術上的問題,也可以免去許多後續不必要的麻煩。

網頁設計第二步:網站設計

網頁設計在完成網頁設計的前置作業後,最重要的當然就是要對網站進行規劃,包括網站類型、網站的視覺設計、網站的內容、網站的瀏覽動線等等,這些都會影響網要設計最終的成效。

網站類型

不同類型的網站當然會有不同的需求,舉例來說,電商型網站,需要的是明確的價格、商品介紹、流暢的購物體驗;但如果是品牌型的網站,那就會需要更凸顯品牌特色,不論是在色彩或是風格上的呈現,都需和品牌相關聯;在資訊型的網站更需要的是正確的內容資訊,以及讓使用者易搜尋或是易閱讀的內容。

網站的視覺設計

網站的視覺設計可以從很多方面切入,像是色彩的使用、排版方式、網站的一致性、影音素材的輔助,這些都會影響到使用者在瀏覽網站時的視覺體驗。有時候過多的素材或是過於華麗、炫目的特效和色彩,反而會讓使用者一次接收到過多的訊息而失去耐心並跳出網站。

網站的內容

網站的內容與網站的視覺設計或是網站類型習習相關,不同的網站類型,必要的內容一定不相同,電商網站需要的內容包含像是產品資訊價格,或是配送政策以及金流系統等等;品牌形象網站則需要像是品牌理念、服務內容等等的。此外在內容的呈現,使用標題、分段、圖表的運用,這些都很重要,在撰寫內容時,也需要運用 SEO 搜尋引擎優化的相關方式去撰寫,才可以提高網站在搜尋引擎上被搜尋到的機會。

網頁設計第三步:不斷優化與調整

網頁設計當網頁設計完成後,後續會需要不斷的優化與調整,畢竟每個時期的使用者所需求的內容皆不相同,每個階段的潮流也不一樣,如何提供一個與時俱進的網站,才是網頁設計最重要的部分。

網頁設計公司推薦

網頁設計並不是一個可以快速完成的工作,需要耗費許多的時間、技術與人力,也因此對於許多人手不足或是根本沒有多餘時間管理網站的業主來說,網頁設計成為了一大難題,這時候就需要仰賴專業的網頁設計團隊進行協助,針對網頁設計公司的挑選與推薦,可以參閱,2020年最推薦:TOP10台北網頁設計公司2020年最佳的台中網頁設計公司推薦,也可以參考戰國策網頁設計,不僅已經有將近 20 年的服務經驗,還提供客戶 24 小時的即時客服服務,更提供了多元的網頁設計方案,讓業者在網頁設計的過程中,可以有更多的選擇以及方向。

網路世界的激烈不難想像,也因為這樣許多網站在這樣的洪流下紛紛棄械投降,一開始的投入的心血與努力也都化為灰燼,但如果有像戰國策網頁設計這樣專業的網頁設計團隊從旁協助,相信網頁設計並不是一件難事,反而可以幫助企業在網路的世界中,脫穎而出。

Share this
24 9 月 2020

台北網頁設計公司推薦,不僅是網頁設計公司更是網站競爭市場的最佳夥伴

在競爭激烈的網路市場中,如果網頁設計無法直接快速的抓住使用者的眼睛或是提供正確的內容,那就會造成使用者立即跳出網站,讓你的網站永遠石沉搜尋引擎的排名的汪洋大海。因此,如何創造出一個令人印象深刻兼具美觀與實用性的網站,便需仰賴專業的網頁設計團隊來操盤。

台北網頁設計公司推薦

網頁設計提到台北網頁設計公司,就不得不推薦戰國策網頁設計,光是 24 小時客服專線和即時的線上聊天系統,就讓人覺得獲得了保障,畢竟網路的世界是 24 小時的,隨時都有可能出狀況,有了這樣即時不間斷的服務,就能更快速的應變網頁設計上發生的任何問題。

戰國策網頁設計 20 年的經驗下,不僅累積了將近上萬個網頁設計經驗,更是許多大廠牌的合作對象,像是養樂多、寵愛之名、信義房屋、郭元益還有 illy,戰國策網頁設計合作的對象不僅橫跨各種產業,也遍佈中小企業和大型集團,此外,執行過的網頁設計類型也很多元,在這樣豐富的經驗下,也累積了許多客戶的好評。

此外,戰國策網頁設計除了提供網頁設計方面的相關服務,從最初期的網站架設所需要的網域申請、虛擬主機租用與購買、SSL 憑證申,到中期的金流設定、系統開發、SEO 優化、社群代操,以及後期的備份、售後服務等等,都有提供非常全面的服務,有了這樣一條龍的規劃,不僅可以免去同時需要和多家廠商溝通的困擾,也可以在多元的選擇中選出最符合需求的方案,不僅節省了時間與麻煩,也省去了不必要的資金投入。

網頁設計要點

當然,身為付錢的業主,對網頁設計也不能一問三不知,一定要有一定基礎的了解,才可以幫助在與網頁設計團隊溝通時可以更順利。

網頁設計要點一:了解自己的需求

在執行網頁設計前,首先你需要知道自己想要的是什麼,你是想要打造一個可以建立企業形象的品牌官網,又或者是你想要多一個可以讓消費者購買的渠道,也可能你是想要搭配某一次的行銷規劃,去製作一個活動網頁,擁有明確的需求都可以幫助網頁設計團隊在後續的執行上更順利。

網頁設計要點二:提供自己想要的風格

在和網頁設計團隊溝通前,可以先上網尋找一些自己喜歡的設計風格,像是想要以什麼樣的色彩呈現,或是想要什麼手繪風、可愛風、現代風等等的,同時,也可以在瀏覽其他網站時,去進一步的思考,有哪些功能是可以優話使用者體驗的,而哪些功能又是不必要又干擾使用者的,在這裡都可以進一步的截圖或是提供給往右設計團隊做參考。

網頁設計要點三:了解你的使用者

在執行網頁設計時,你必須了解你的網站使用者的喜好以及習慣的瀏覽模式並提供相對應的內容,針對不同類型的網站使用者,所需要的網頁設計模式和內容也大大不同,舉例來說,品牌形象網站瀏覽者希望獲得的資訊不外乎就是品牌的經營理念、企業沿革、服務內容等資訊;購物網站的消費者則會希望看到清楚的標價、商品資訊、退換貨流程、配送方式以及流暢的金流系統。

網頁設計要點四:不斷調整與優化網站

在資訊爆炸的時代裡,網路的世界時時都在變動,使用者對於網站的品質也越來越要求,從網站加載速度、內容更新速度、是否符合使用者體驗,這些都是在網頁設計後期非常重要的一環,網站架設好後,並不是被動地等使用者進入瀏覽,而是需要透過後期不斷的改進與優化,提高網站在搜尋引擎上的排名,讓使用者願意主動進入網站瀏覽。

網頁設計前期的製作並不是最困難的,最困難的是後期的維護、更新與調整,而許多業主花了大筆的金費建立好網站後,卻因為後期沒有多餘的時間與人力去維護,而讓網站荒廢,因此適時的仰賴專業的網頁設計團隊,不僅可以讓每一分錢的花的物超所值,也可以減少業主在時間與人力上的成本,戰國策網頁設計提供全年無休服務及終身保固服務,隨時提供業主最即時的網頁設計諮詢與售後服務。

Share this
24 9 月 2020

掌握網頁設計三大重點,幫助你在競爭激烈的網路世界中,展露頭角

網頁設計究竟為何如此重要?網路無遠弗屆,不受到地理、時間限制,這樣的特性,讓網路成為了最容易接觸到消費者的管道,因此,現在從大中小型企業到轉型中的傳統產業,甚至是個人品牌,都在往架設網站的道路邁進,而在這個競爭激烈的市場中,便凸顯了網頁設計的重要性。優質的網頁設計,不僅可以提升品牌的形象,讓使用者留下深刻印象;當好的網頁設計讓消費者擁有了好的使用體驗後,也更能增加使用者轉單甚至是自主推廣品牌的機率。

網頁設計重點一:使用者體驗

網頁設計當進入一個網站,沒有使用者希望看到的是不停加載中的畫面;也沒有人希望看到一個雜亂無章的畫面,因為這些都嚴重影響著使用者在瀏覽網頁時的使用者體驗,有了良好的使用者體驗,就可以增加使用者願意在網站上停留的時間,甚至是增加日後回訪的機率,而影響網頁使用者體驗的因素有以下幾種:

1. 網頁加載速度

會影響網頁加載速度的因素,有像是圖片檔案的大小、主機系統、網頁快取等等,因此在執行網頁設計時,建議在上傳圖片時,可以先進行圖片壓縮;選擇距離位置適當的虛擬主機,也可以善加利用 Google 的小工具 PageSpeed Insights,保持網頁加載速度的品質。針對虛擬主機的影響網頁速度的相關資訊,可以參閱:用國外機房的主機因速慢會影響貴公司網站在Google的SEO排名

2. 網頁瀏覽動線

沒有規則可循的網頁瀏覽動線,容易讓使用者迷失在網頁中,而導致失去耐心或是找不到想要的資料而跳出網站,也因次清楚明瞭的網頁瀏覽動線便顯得重要。清楚的主選單位置、簡單明瞭的網站架構,都有助於提升網頁瀏覽動線的明確性。此外,在排版,建議乾淨俐落,不宜跳來跳去,以免使用者在瀏覽時,眼花撩亂,找不到合適的瀏覽方式。

3. 清楚明確的選單、CTA 以及搜尋欄

清楚明確的選單以及 CTA 可以讓使用者更快速找到自己所需要的內容,當找不到所需內容時,搜尋欄也能成為使用者強力的輔助。此外,針對重點內容,或者是使用者最常在網站上搜尋的資料,也可以利用字體大小、粗體或者是較鮮豔的顏色,讓使用者可以很快速地抓到重點,甚至是因為被吸引,而進行內容點擊。

4. RWD 響應式網頁設計

RWD 響應式網頁設計,是一種可以根據使用者使用的瀏覽裝置大小,而給予不同的呈現模式、排版的網頁設計方式,為的是因應現代人,擁有多元的瀏覽裝置,小至手機、平板,大至筆電、桌電,不同的大小如果都使用一樣的呈現方式,那勢必會造成跑版甚至是呈現不完全的狀況,而降低了使用者體驗品質,也因此 RWD 響應式網頁設計的產生,便成了一個絕佳的解決方案。

網頁設計重點二:視覺設計

網頁設計在還不認識一個品牌之前,使用者進到網站後,最直接認識網站的方式,就是眼睛,因此視覺設計也在網頁設計中佔了很大的一環,影響視覺設計的因素包含以下幾種

1. 色彩

網站的色彩,是個很能讓使用者烙印深刻印象的關鍵,舉例來說,想到紅色和黃色,大部分的人都會直接回答出麥當勞,也因次在執行網頁設計時,色彩可以選用與品牌 logo 相近的顏色,凸顯記憶點;鮮豔的色彩使用,也可以更輕易地抓住使用者的眼睛,但要避免混雜過多的顏色,以免讓使用者感到頭暈目眩。

2. 影音

適當的影音呈現,可以減少網站上過多不必要的文字,此外也可以更清楚明瞭的表達用意,舉例來說,當你想要說明一項產品的使用方式,直接用影片或是圖片搭配一點文字的方式可以讓使用者更容易理解。在數據的呈現上,也可以利用圖表,更直觀且清楚,也省去了使用者一個數據一個數據慢慢閱讀的時間。

3. 排版

目前最常見的網頁設計排版方式有圖文交差的 Z 型排版、圖問交替的橫向排版或是圖文分兩側呈現的左有排版,這幾種方式可以根據不同的網頁設計需求去做選用。在執行網頁設計排版時,應該避免過度華麗的方式,或是複雜的方式,否則就會變相成為一個沒有邏輯可言的網頁設計。

網頁設計重點三:內容

網頁設計在內容方面,不同種類的網頁設計需要必備的內容皆不相同,舉例來說,品牌官網,必要的有像是公司簡介、品牌理念、公司歷史等等;但如果是電商網站,必要的內容,像是產品認證、退換貨政策、訂購流程、售後服務等等則更顯得重要。但不論是何種內容,在撰寫時,都應該要清楚的傳達給消費者明確的服務內容和正確的資訊,避免誤導或是不實的內容。而在內容方面,也可以針對 SEO 優化的面向去斟酌,增加網站在搜尋引擎上的競爭力,詳情可參閱:搜尋引擎優化怎麼做?五個小技巧讓你現學現賣! 

說了那麼多網頁設計重點,到頭來最重要的,還是時間,許多業主在網頁設計方面時常覺得有心無力,不僅僅是因為網路變化速度太快跟不上腳步,也因為沒有多餘的時間去經營管理,這時就要仰賴專業的網頁設計公司團隊,像是戰國策網頁設計,服務過許多知名企業,從信義房屋、郭元益食品到寵愛之名等等,橫跨各種產業,在這樣多元的經驗下,也為戰國策網頁設計累積了許多優良的網頁設計作品以及口碑,有了這樣專業的團隊幫助,必定能讓網頁設計更順利,在網路的競爭市場中,展現出亮眼的成績。

Share this
14 9 月 2020

Facebook for WooCommerce 3大優點讓粉絲團與網站神同步|WordPress實用外掛教學

終於架好一個新的網站了,為了讓網站與FB的連動更加緊密,FaceBook特別出了 針對WP網站的超實用外掛,這次就來介紹這個外掛好用在哪!

Facebook for WooCommerce, 三大優點

  1. 不用手動更新粉絲團商店頁,網站上架後粉絲團即會自動上傳
  2. 廣告轉換自動更新、提交到FaceBook廣告管理員、廣告受眾洞察報告
  3. 串接Messanger在網站上,客戶隨傳隨收客服一把罩

安裝&啟用教學

第一步:下載&啟用外掛

 

 

第二步:執行啟用流程

點選WP後台左方選單,找到WooCommerce,選單中會有Facebook的選項,點擊後即可開始啟用流程

啟用 Facebook for WooCommerce

若無登入FaceBook,在這個步驟後會先跳出登入的頁面,請先登入具有粉絲專頁管理權的帳號,再進行之後的流程。

確認資訊沒問題,則點選continue到下一步驟,經過2個程序後就完成了,完成畫面如下

Facebook for WooCommerce, 三大優點設定教學

如何讓粉絲團商品頁與網站自動同步?

一樣在左方列表找到WooCommerce,選擇Facebook後,上排會出現三個不同的設定區域,選擇第二個Product sync

設定 Facebook for WooCommerce

如果要調整單一商品怎麼辦呢? 沒關係,這個外掛也有支援單一商品調整的功能,請看下圖教學,選擇需要單一調整的商品,將頁面往下拉會找到下圖的選項,點擊後即可單獨設定,可調整的項目有

1.是否要同步? 2.商品的短說明  3.產品圖要與網站上相同還是客製?  4.在粉絲團上顯示的價格

如何讓Messenger顯示在網站上?

在WooCommerce的Facebook設定頁面中,選擇第三個選項Messenger並開啟

開啟這個功能後,可以打開網站確認,此時網站頁面的左下方或右下方應會出現Messenger的圖示

廣告轉換自動更新提交到FaceBook廣告管理員

基本上外掛下載啟用並串聯好帳號後,pixel就會自動串連,要確認捕抓器有正常運作,並且更快速的管理FB pixel,可以到Chrome的擴充功能下載 FaceBook Pixel Helper

下載完後,記得點選Chrome右上方的齒輪,將Facebook Pixel Helper釘選在選單上,更能方便使用。再來就是確定是否有正常啟用了,請看下圖PageView顯示綠色即為正常運作。

 

 

什麼是Facebook Pixel

它是FB用來追蹤廣告的一種類似Java Script 的追蹤代碼,如果你的網站有投放廣告的需求,需要到FaceBook企業管理平台創建再置入WP網站中,一定要執行這個步驟才能確保數據品質,有利於轉換優化。

相關連結:Facebook pixel 官方串連教學

相關連結:官方介紹頁

這個外掛適合有在操作FB轉換廣告的網站使用,透過外掛的串接可讓轉換數據正確顯示在廣告報表中,而串連Messenger的功能能夠即時且方便的處理客服問題,提升客戶的滿意度!

若您有任何電商網站架設的問題或意願,歡迎諮詢我們的客服中心 

 

 

Share this
24 8 月 2020

輕鬆兩招,讓你的網頁設計更勝其他網站,成功攻佔搜尋引擎頁面排行榜

人人都在上網的現代,網站已成為業主最基本的武器,也因此網頁設計的重要性逐漸被大家所重視,一般提到網頁設計,最關鍵的兩大因素,想必一定是視覺設計以及使用者體驗設計,而在這兩者之下,還蘊藏著許多可以幫助提升網頁設計表現的小撇步,有了這些相關功能的輔助,才能讓網頁設計的效益達到最大化,為業主帶來更多商機。

網頁設計推薦搭配建議一 – SEO

網頁設計能夠提高網頁設計整體成效必要搭配的第一個關鍵,絕對非 SEO 莫屬,SEO,Search Engine Optimization 中文譯作搜尋引擎最佳化,顧名思義就是讓網站可以在搜尋引擎結果頁面上有比較好的排名,也因此利用 SEO 的概念來執行網頁設計,是不可或缺的要素之一。

網頁設計推薦搭配 SEO 的四大理由

1. 獲取良好的自然排名

執行 SEO 的最大優勢就在於,可以幫助提高 Google 對網站判定的分數,進而提高在搜尋引擎上的自然排名。

2. 爭取更多的曝光機會

有了良好的自然排名,想當然而就可以為網站爭取到更多的曝光機會,使用這也可以更加快速的找到網站的相關資訊,進而進入網站進行瀏覽。

3. 省下廣告預算

當自然排名提升,業主就可以減少花費額外的預算在關鍵字廣告上,而這時候省下的那筆預算,就可以去執行更多網頁設計的其他層面。

4. 提高轉換率

當良好的網頁設計配上好的搜尋引擎排名,使用者自然有更高的機會進入網站並執行近一步的動作,擁有這兩樣優勢,便可以增加使用者瀏覽並執行轉單的機會,提高業主轉換率。

網頁設計推薦搭配建議二 – RWD 響應式網頁設計

網頁設計現代人上網,有許多不同種裝置的選擇,桌電、筆電、平板、手機等等,每一種裝置的畫面大小各不相同,如果在每一種裝置上都套用上同一種網頁設計,想必會有尺寸不吻合或是跑版的狀況發生,也因此 RWD 響應式網頁設計就格外重要。RWD 響應式網頁設計簡單來說,就是根據使用者不同的瀏覽裝置,去提供適當的網頁設計內容。

網頁設計推薦搭配 RWD 的三大理由

1. 降低網頁跳出率,提高網頁實用性

當使用者點入網站,如果跑版或是不適用當前使用的瀏覽裝置,那多數使用者便會直接離開網站,進而提高了網頁的跳出率,這對於搜尋引擎評分上非常不利,這同時也大幅降低了網站的實用性,以及對使用者在瀏覽上的便利性。

2. 單一連結適用所有裝置

在 RWD 響應式網頁設計的輔助下,雖然在不同裝置上會顯示不同的網頁排版方式,但卻可以保有同樣的網址,這樣當使用者要將連結分享給其他用戶時,便不會受到不同裝置而有所侷限。此外,如果適用每個瀏覽裝置的網頁設計版本都各自擁有一個新的網址,那再這樣高度重複內容但網址不同的狀況下,對於搜尋引擎評分也容易被判定為惡意網站連結。

3. 提高 SEO 成效

其實從上述兩點中就可以看出,RWD 響應式網頁設計對於搜尋引擎在評斷網站優劣時,佔了很大的一部分,也因此會連帶影響到 SEO 的成效。除此之外,根據 Google 提出的搜尋引擎評分標準,RWD 響應式網頁設計的使用,也可以大大提升 SEO 優化的成績,近一步增價網頁在搜尋引擎頁面上曝光的機率。

網頁設計公司推薦

針對網頁設計推薦搭配的建議,不論是 SEO 或是 RWD 響應式網頁設計,都需要透過專業網頁設計公司協助,才可以架設出最高品質的網站,這時選擇網頁設計公司,便成了一大學問,戰國策網頁設計,單一集團,就包辦了許多多元的服務,從網頁設計、SEO 優化到 RWD 響應式網頁設計,都有相對應的團隊可以協助,省去了業主需要根據不同需求分別尋求不同公司的麻煩。除此之外,戰國策網頁設計擁有近萬的網頁設計,以及一站式服務及豐富的主機管理維運經驗,不論是在專業度或是經驗豐富度上,在業界都可以說是排名一二的。

 

網頁設計說難不難,但說簡單也不簡單,要架設出一個網站並不複雜,但更重要的是,要如何架設出一個使用者願意前往瀏覽,甚至是在上面執行各種動作、或是進一步加入書籤頁到推薦給其他使用者的網站,開始執行網頁設計只是一個架設網站的開端,如何在後續的過程中,逐一把各個關鍵因素都融入其中,提升網站的整體表現及分數,才是最終讓網站在眾多競爭者中脫穎而出的重要關鍵。

Share this
24 8 月 2020

網頁設計該如何開始?清楚五步驟網頁設計教學,讓網頁設計事半功倍

作為現今最普遍以及廣泛的傳播媒介,每時每刻每地都有人在使用網路,也因此,不論是新興的企業又或者是傳統的產業,都開始對網頁設計有了新的需求,為的就是可以多一個接觸使用者的管道。但在執行網頁設計時,許多業主往往過分著重於網頁設計公司的推薦,卻忘了探討自身對網頁設計的需求,而全權交給網頁設計公司處理,最終造成網頁設計作品不符預期的窘境。

網頁設計教學第一步:釐清需求

網頁設計只有自己才能最了解自己的需求以及喜好,網頁設計公司或許可以提供許多專業的建議,但每個業主所適合的建議也可能大不相同,別人的蜜糖也可能是你的毒藥,因此在與網頁設計公司溝通前,一定要明確的表達自己的需求、喜歡的風格、希望達到的目的,才可以在網站建置好之後,提升獲利達到轉換。

網頁設計教學第二步:網頁設計範例提供

網頁類型百百種,有像是提升品牌形象的企業網站、用來銷售商品的電商形網站、用來宣傳活動的活動網站等等,到底哪一個才是適合你的,除了和業主的需求有關,也可以從過往的網頁設計作品中去做參考,每一種不同類型的網站也會有許多不同的設計方式以及風格,多瀏覽相關的網頁設計作品,從中找到適合的網頁設計範例提供給往右設計團隊,將可以免去雙方在溝通過程中,許多不必要的誤會,讓彼此更快速的達到共識。

網頁設計教學第三步:網頁設計方式

有了網頁設計範例提供一個明確的方向以及設網頁計方風格後,下一步應該決定使用何種方式來執行網頁設計,是希望使用網頁設計公司提供的客製化方案、套版方案、或是自己放上資料的自助方案,三個方案各有自己的優缺點,舉例來說,客製化方案的價格相對來說高出許多,但卻能有更多的變化,做出與其他網站的差異性;套版方案價格較低廉,製作速度快,但可能會遇到和別的網站重複性過高的狀況;而自助手動 DIY,價格上很吸引人,但在許多的功能上卻不如其他兩者來的專業,在遇到問題時,求助的管道也比較少甚至更耗費時間,因此通常建議有一定網頁設計基礎的人做使用。

網頁設計教學第四步:確認網頁設計報價

網頁設計根據所選的網頁設計方式,往往會有不同的報價金額,落差往往可以到數千甚至是數萬,但在客製化方案中,雖然報價高,能獲得的服務以及內容也相對較完善,因此業主還是要自行評估自身的狀況以及公司內部網頁設計人員的能力。

 

自助方案套版方案客製化方案
數千到數萬元/年數千到數萬元/年數萬到數十萬元/年
在自助方案中,網頁設計者需要自行上傳相關的資訊及內容,或是增添頁面,網頁設計服務公司通常只會提供空白未經過設計的版面給網頁設計者,方案內容中大多不包含 RWD 響應式網頁設計,也不含 SEO 優化或是進階功能,此外業主也需要另聘網站管理人員來進行後續的維護。套版方案與自助方案有些類似,方案內容中大多不包含 RWD 響應式網頁設計,也不含 SEO 優化或是進階功能,但他擁有專業的網頁設計者提供大客選圖的服務,在後續的維護上也會有專人處理。客製化方案的網頁的辨識度比起前兩者高出許多,也更能滿足企業設計網站的需求,方案內容中方案內容中可以包含 RWD 響應式網頁設計,以及 SEO 優化也可以視業主需求增加許多的進階功能,在後續的維護上也會有專業的網頁設計者代為處理。

 

除了網頁設計方式的不同會影響網頁設計的報價之外,網頁設計公司所額外內含的服務內容也會有所影響,舉例來說戰國策集團網頁設計,除了單純提供網頁設計服務之外,同時也有許多多元的方案可供業主做選擇,內容可能包含像是 SSL 安全憑證的搭載、虛擬主機服務的供應等等。

網頁設計教學第五步:網頁設計公司選擇

網頁設計的最後一步,當然就是選擇一個值得信賴的網頁設計團隊來進行後續的網頁設計,但網頁設計公司上百家,改怎麼挑選?可以參閱以下兩篇:2020年最推薦:TOP10台北網頁設計公司2020年最佳的台中網頁設計公司推薦,而其中最推薦的應該就非戰國策集團網頁設計莫屬了,除了擁有許多知名大型企業如:信義房屋、郭元益、illy、寵愛之名、養樂多等等的合作經驗,在服務品質以及過往客戶的評價上也都有非常好的成績。

 

網頁設計的最終目的不外乎就是導入流量、獲取利潤,擁有一個網站並不足夠,更重要的是一個可以達到預期效果的網站,而要完成一個這樣的網頁設計,所需要的並不單單是靠一個網頁設計團隊,而是讓每一個不同的環節都可以相輔相成,幫助彼此達到網頁設計的利益最大化。

Share this
Click Me