如何設計好網站呢?好的網站設計、優質的網站架設,能為帶公司帶來更多的業績,除了網站要漂亮外,還有什麼需要注意的呢?

專業 建立品牌信任度

首先要有個專業的形象網站,從Logo、圖片、顏色都要精選過,每一項都代表了公司,所以圖片素材很重要。有專業的形象才能得到顧客的信賴。

使用者體驗 讓顧客找到他想到達的頁面

當顧客進入網站後,要開始引導他該點選哪裡,點選哪裡才能讓他得到讓他知道的資訊。導覽列也非常重要,如果顧客想要快速找到他自己想得到的資訊。了解更多網站UIUX優化

網站速度 載入速度不能太慢

網站速度不能太慢,如果5秒都沒轉出來的話,顧客就會沒耐心的關掉走人,竟量提身網頁速度,這需要請網管好好的測試網站的速度。

要如何檢查自己網站是否太慢呢?Google有提供一個免費檢查你的網站是否太慢工具,PageSpeed Insights,非常簡易,只需要放上網址,就能查看到網站速度囉。 了解更多網站速度優化

PageSpeed Insights(來源:PageSpeed Insights)

RWD響應式網站 讓顧客可以有很棒的瀏覽體驗

現在必備的RWD響應式網站,如果沒有這項,就直接大大扣分,響應式網站是讓顧客不管用什麼瀏覽器,都能好好查看網站,不會因為網站是給電腦版到了手機大跑版,讓顧客使用起來很不便。

RWD響應式網站很重要,如果正準備架設網站,一定要確認有沒有提供響應式網站的功能,沒有就換下一家廠商。了解更多響應式網站請參考 【RWD響應式網頁設計是什麼】 手機世代必具備的網站技術 | 附範例

響應式網頁設計

網站首頁秘訣大公開

老實說,我們常常在瀏覽頁面時,只會查看幾秒鐘後,沒找到我們想看的就回上一頁。事實上,我們大多數的人都希望在幾秒鐘內找到我們想看的東西。如今大家的要求越來越高,耐性越來越低。
當訪客到達你的首頁時,他們將做出一個簡單的選擇-留下or離開!該怎麼將首頁排版,可關係到企業的命運。簡單來說你的首頁排版分成兩部分:

  1. Above the Fold - 網頁最上方的位置,訪客不滑動瀏覽器,而呈現出來的畫面。人們會依據這區域的內容決定要不要往下滑看。
  2. Below the Fold - 當訪客滑動瀏覽器後的內容。

100%的訪客會看到Above the fold的內容!從統計上來說,當你往下滑動頁面,將繼續查看內容的人數急速下降。
根據尼爾森(Nielsen)調查曾做過一個研究,指出訪客會花約80%的時間停留在Above the fold區域,Below the Fold僅剩下20%。Above the fold是一塊非常重要的區域,一定明確在這區塊提供公司價值與服務,吸引訪客繼續瀏覽網站。所以Above the Fold與Below the Fold的內容安排非常重要!


Above the fold區域內容

這區域要顯示所有主要內容的地方,你要訪客知道的重要訊息。

首要目標就是說服訪客停留更長的時間,內容必須清晰、簡潔且具體!
  1. 商標 LOGO網站首頁秘訣大公開

    商標要表達公司的含義,它能暗示訪客企業的精神,是否是專業、創新等。

  2. 導覽列 (選單)

    這是向訪客展示重要的訊息,是指引訪客可以到哪裡找特定的資訊。
    導覽列須知:

    • 只包含必要的頁面,不要放太多選項混淆訪客。
    • 相關連結可以組織在一起,把最重要的連結從左到右排列。
    • 標題要簡短。
    • 導覽列需放在醒目的位置,方便訪客查看。
  3. 首圖(Hero Image)

    網頁首圖是訪客到達網站的第一印象,這塊須提供高畫素的產品照、大標題、副標與行動呼籲按鈕。

    網站首頁秘訣大公開
    • 大標題:在一段句子中,你比須回答所有訪客的問題:「貴公司是在做什麼?」,應此需要簡短、清晰並且完美表達,讓訪客一看就覺得「這就是我在找的」。
    • 副標:可以使用副標來更詳細說明服務/產品。 以簡單明瞭的方式回答:「你為我解決了什麼問題?」
    • 行動呼籲按鈕:號招性用語題,指引訪客可以採取下一步,可以是「立即撥打」或「立即購買」等。
      不要期待每位訪客都知下一步該怎麼走-通常他們都不知道! 如果你希望訪客可以明確知道下一步在哪裡,別害羞,直接告訴他們。
    • 高畫素的圖片或影片:人們自然都會被美的圖片或影片的視覺所吸引,因此是在這塊營造氣氛、情感連結或展示你的目最好的地方。
      記得要使用與你的網站相關的圖片與影片,如果 圖片與影片沒有任何目的或提升整體品牌資訊,請不要使用它們。
      最好保持網站整潔,不要使用無用的內容!

網站架設七大頁面內容優化清單

網站設計為什麼重要呢?人們只會花0.05秒就對你的網站作出評價,可能會應此就走了,所以網站架設內容很重要。網頁設計還會影響公司的轉換率、信譽、信任等,沒有網站是完美的,都是一點一滴進行優化。

  1. 頁面文字內容精簡
    不要在頁面上呈現大量的文字。

    這裡指頁面(例如:首頁、到達頁、產品頁等。),竟量在頁面內容精簡。文章另當別論,文章需要深入講解。在頁面上需要告訴你的訪客關於貴公司、品牌、產品等,需要以故事的方式簡短的述說,最好能在幾個字就能呈現出來。

  2. 展示,不需要太多的言語
    視覺(圖片)不僅可以幫助你的文字加分外,還可以讓訪客在短時間內了解你的目的。

    例如,你向訪客推薦一個刮鬍刀非常的帥氣,木雕刻而成,非常精美,可以當作禮物使用。你不必在首頁上寫下詳細的信息,只需要在產品照上寫上「直送家門口」之類的文字,只需要五個字就能表達你的訊息。
    當然,你也可以導去另一個頁面,讓訪客了解更多,但不建議漏漏長的解說。

  3. 使用簡短的句子
    簡短的句子更容易閱讀。

    請不要用大量文字轟炸訪客,他們會不知道從哪裡開始閱讀,更難以消化內容。如果真的需要較長的句子,請在後面加上簡短的句子,可以幫助訪客快速理解。

  4. 簡約的段落
    可以寫很長的段落,但在「首頁」盡量保持幾句話,寫一個段落時善用分段符號。

    新的資訊時,可以開始新的一個段落,讓客戶可以判斷是否該閱讀這段落。竟量減少頁面上不必要的文字,可以降低混亂資訊。
    在這情況下,有一個非常好用的工具:列表,與其添加很多攏長的文字段落,不如使用「列表」,列出帶有子彈符號的要點。
    網站架設七大頁面內容優化清單列表 研究發現,與其他格式相比,大部分的人會看帶有子彈符號的列表,那是因為它們幫助訪客可以快速掃瞄,並可以凸顯重要的要點。

  5. 行動呼籲(CTA)要清楚明瞭
    行動呼籲成為訪客下一步採取的行動。

    讓行動呼籲(CTA)的文字能獨立一個段落,比埋在一堆文字裡更有影響力。行動呼籲(CTA)應該要大、必須脫穎而出,讓行動呼籲成為訪客下一步採取的行動。但是,大多數的網站沒有讓訪客在三秒內發現行動呼籲按鈕,有可能讓訪客到達不是你設定的頁面。無效的行動呼籲按鈕等於無轉化率。
    幾乎很少在公司簡介頁面(介紹公司、品牌的頁面)上看到行動呼籲,你不能期望訪客會用導覽列回到首頁在點擊行動呼籲按鈕進行轉換。
    網站架設七大頁面內容優化清單列表 Litmus這網站的版面設計,可以看到使用簡潔有句子,讓行動呼籲按鈕「sign up free」非常凸顯。

  6. 行動呼籲(CTA)設計都要一致性
    如果你的訊息/資訊是一樣時,你每一頁的行動呼籲按鈕都需要一致。

    考慮到訪客瀏覽網站時不會跟著你設定的流程或到達轉換頁,而是會先逛一下網站。例如,如果你有電商網站,你不應該每頁的行動呼籲按鈕的文字都不一樣,不然會像這樣:

    • 首頁: 立即結帳
    • 目錄頁:今日下單
    • 商品頁:點擊購買

    如果讓訪客每到達不同頁,看到這三種不一樣行動呼籲按鈕,完全沒有強調購買的感覺,不如保持一致文字,加深訪客的印象。
    網站架設七大頁面內容優化清單列表 例如上方的圖,不管是男錶、女錶、眼鏡、手鍊等,都只會看到「SHOP NOW」。
    網站設計原則,除了行動呼籲按鈕要一致以外,其他設計、顏色、文字、圖片能盡量一致,一致性可以提昇品牌形象與加深品牌印象。

  7. 簡化導覽列(選單)
    網站應該讓訪客可以快速找到他們想找的。

    為訪客著想,為什麼要來這網站?來這網站是要購買東西?尋找資訊還是這網站有提供什麼?不管什麼理由,如果訪客找不到,就會立馬走人。
    有太多競爭對手了,訪客沒理由待在一個不友善的導覽列(選單),他們只會去尋找下一個網站。例如:大部分的網站的導覽列都會在最上方,如果你把導覽列放置其他地方,訪客會混淆。
    導覽列越少選擇越好!不然會讓訪客有選擇障礙,很難找到他們需要的。給得越多選擇,做出決定的時間越長,導致他們會想離開。

    某個當地的雜貨店進行一個有趣實驗,第一天為消費者提供24種果醬,第二天準備6種果醬:
    第一天大量展示果醬吸引60%的購物者,但只有3%的人購買。
    第二天展示6種果醬,吸引40%的購物者,卻有30%的人購買。
    透過限制選擇,轉換率提高了10倍,可以用相同的概念應用在網站的導覽列上,刪除不必要的選項。

網站架設小撇步 獨家報導

優質網站除上述幾項:專業、RWD、下載速度,以下是一些小撇步與大家分享

  1. 點擊三下,讓網站訪客即能找到所想要的資訊
  2. 網站命名,請將網站名稱拿去Google上搜尋,馬上就知道會不會撞衫(公司名稱亦是)。
  3. 一進到網站一定要乾淨,好讓顧客可以一目了然的知道自己要點哪裡、要看哪裡、網站主推什麼等。太凌亂的網站很容易讓顧客彌留,然後不知道該從何下手,有可能就直接走了。
  4. 網站不是在寫文章,不用寫得超級無敵長,長到不知道在寫什麼,可以簡單明瞭的跟顧客說明公司產品、主推什麼、顧客可以得到什麼。最主要顧客進來只願意花幾秒鐘看,大小標與圖片,如果沒看到想要的就會走掉,所以文案很重要。
  5. 所有對外的連結,記的語法要加上target="_blank"。這代表網站訪客點擊連結時會新開視窗,不然你的網站訪客就會跑別人家網站
  6. 網站內容非連結的部份,勿用藍色。現在大家很習慣看見藍色就是可以"點擊的連結",當網站使用者點擊之後卻沒有動作,使用者體驗會不好啦。
  7. 網站內千萬不要有壞掉的連結。可以使用工具檢查brokenlinkcheck
  8. 網站不破圖是一個網站基本要有的品質,同時勿用解析度過低的圖片,會讓網站非常的醜陋。
  9. 響應式網頁設計
  10. 網站不管是文字、圖片顏色,顏色的對比很重要。
  11. 確保官網能夠在以下幾種瀏覽器執行:Chrome、Safari(二大瀏覽器陣營)
  12. 確保官網能夠在以下螢幕解析度精美呈現:手機為360x640、375x667、414x736、電腦版為1920x1080、1536x864、1400x900、1366x768 (資料統計:熱搜情報網)
  13. 確保官網的js能夠在IPhone上執行,因為IPhone是一個比較封閉的系統(穩定、速度快、錯誤少),所以有些js的行為會跟Android系統不同。
  14. 善用行動呼籲設計(CTA)、網站轉換率直直衝

相關文章

為什麼需要架設官網呢?|官網經營、管理與行銷又該如何|網站架設教學

為什麼需要架設官網呢?|官網經營、管理與行銷又該如何|網站架設教學

每日Google發生上億次的搜尋,為什麼不架設一個官網,讓這群人搜尋進來並開始推廣、行銷您的生意or服務呢?
【網站架設流程 】6步驟、最後一步沒做就GG|網站設計流程教學

【網站架設流程 】6步驟、最後一步沒做就GG|網站設計流程教學

網站架設流程,不外就是6步驟. 1)買網址 2)租主機空間 3)7大素材準備 4)WP網頁設計 5) GA安裝 6) (最重要一步) 忘了就GG吧
【Google Blogger】超好用,12大優點還可賺錢|教學篇

【Google Blogger】超好用,12大優點還可賺錢|教學篇

Google Blogger好處在一切免費!Google Blogg網站架設無主機費、無網址費,雖是免費但系統穩定,且無需擔心網站因流量過大當機~
【網站架設費用1~100萬的差異】含網站架設Wordpress費用

【網站架設費用1~100萬的差異】含網站架設Wordpress費用

網站架設費用從1萬到100萬+(Wordpress費用4.5萬~6萬、含版型費1千5,主機費5千、網址費1千)最大的差異在於製作軟體、功能頁數多寡
【RWD響應式網站模板】推薦下載|網頁版型設計現省10萬

【RWD響應式網站模板】推薦下載|網頁版型設計現省10萬

響應式網站模板推薦下載網站Themeforest,2000元不到,精緻美觀RWD響應式網站模板就能帶回家,也有免費的一頁式網頁模版可以下載..
套版網站與客製化網站的差異 |網站架設教學

套版網站與客製化網站的差異 |網站架設教學

網站架設費用會有很大的落差除了在網站架設軟體, 另一個原因就是在於套版網站or客製化網站,這二者的特色賣點其實是不同的。 客製化網站與套版網站的差

貴設計團隊

貴設計團隊都曾任職於大型上市櫃或跨國公司(IBM、卡內基),最後一份工作任職菲國當軟體主管,直至前幾年才回國。站長網站開發10餘年,曾拿下三屆國家級比賽特獎,拿下獎金百萬。 豐富的網站架設經驗。貴設計是位於台北的網頁設計公司,對於Wordpress網頁設計電商網站架設客製化網站都有多年的經驗,定能協助您開發形像官網。 參考關於貴設計

留言

名稱:
Email: