2021.09.28 2024.02.28

【簡單】提升網站設計質感,形象,專業感的6個方法比SEO更重要！

web

此文章可能包含廣告（PR）

吉娃娃

我的網站好像缺乏專業感，一看就會知道一個新手做的網站，怎樣可以提升網站質感呢？

Masa

網站的質感非常重要！就算花時間做SEO，沒質感的網站不會被人閲讀裡面的内容，因爲網友會覺得不可靠。結果這會影響SEO排名結果喔。以下説明6個提升網站設計「質感」的方法！

架設網站的目的不是爲了給Google看，也不是爲了SEO,而是讓人好好閲讀，好好瀏覽你網頁内容。爲了達到這個目標網站給人的印象非常重要。具體來説「質感」,「信任感」,「專業感」,「高級感」等。

如果只做SEO，沒有留意網站美感會大大影響網友的反應，可能很快離開你的網站，這導致降低排名結果。因爲你架設網站的目的不是給Google看，而給人看。人會留意「美感」。漂亮，好看的網站自然而然地被吸引繼續瀏覽，話説回來Google也在看這點，透過網友瀏覽行爲判斷一個網站的品質。所以提升網站設計的質感，對人，對SEO都非常重要！若你一直做SEO，優化網站，卻沒有增加PV，可以調整網站美感或許有很大的幫助！

以下教學提升網站設計「質感」,「信任感」,「專業感」,「高級感」的6個方法。
都是簡單！覺得可行1個，2個都可以，請你實踐看看在你的網站當中！

文章目錄

方法1 最重要的因素「圖片」
- 如何取得給人好印象有質感的圖片？
方法2 「顔色」與「顔色的組合」
方法3 善用「空白」
方法4 選擇最適合的「字體」
方法5 模仿有質感的網站
- 有質感設計感的網站參考網站
方法6 使用專業軟體設計
Masa會幫您設計網站
總結
Masablog推薦文章

方法1 最重要的因素「圖片」

打開網站第一眼就會看到的是頁面開頭的圖片，如果使用WordPress這種圖片叫「精選圖片」。無論是精選圖片還是頁面中其他圖片，瞬間給人的影響最大的是「圖片」而不是「文字」。網友看到圖片馬上就會明白這是關於什麽的網站，也會讓網友有感覺這是可靠的網站。這樣讓他繼續瀏覽你的網站。

好好選定頁面中使用的圖片非常重要！圖片是否有質感，是否正確地形容文章内容，直接影響到網站質感。

除了頁面開頭的精選圖片之外，也要文章中適當的放入圖片也很重要。因爲如果頁面只有「文字」構成讀者會覺得無聊很容易讀不下去，離開你的網站。

如何取得給人好印象有質感的圖片？

自己準備，自己拍照網站中所有圖片/照片是不太可能的事，就算可能也需要花很多時間和精神，其實不划算。建議善用免費或付費圖庫，從圖庫網站下載對你的文章内容最適合的高品質圖片，可以讓你的網站快速地煥然一新。只要輸入關鍵字搜尋圖片，下載圖片，不用多少時間。

Masa最推薦的付費圖庫是Adobe Stock，是全世界許多專業設計師愛用的圖庫網站。Adobe Stock可以30天免費試用下載40張圖片。所以善用免費試用先下載40張，換掉你網站中最矚目的地方的圖片，包括首頁，精選圖片，PV多的頁面等。這樣就會最快速讓你的網站有質感！
日本的免費圖庫寫真AC也不錯，請參考以下文章Masa推薦的圖庫比較。

延續閲讀

【2024年】推薦付費圖庫 TOP4價格/品質徹底比較

方法2 「顔色」與「顔色的組合」

如何使用網站中的「顔色」也會大大影響網站的質感及給人的印象。

決定背景與基本文字顔色

一般來説網頁的背景使用白色，讓其他素材看的清楚。如果有明確的目的也可使用黑色等其他顔色。

假設網頁的背景是白色，文字是淡淡的灰色，那就文字看不太清楚，既然網站的目的是讓人瀏覽，閲讀網頁内容，爲了設計感，文字變不清楚就本末倒置了。

所以考慮背景和文字的顔色時，要選擇除了好看也要讓人容易閲讀文章的顔色。

決定主題色

如果公司已有主題色，網站也使用同一個顔色比較適合。若沒有按照網站内容及目的挑選適合的主題色

顔色與給人的印象
紅色：給人有力量，熱情的感覺，時候特賣的告知等
藍色：冷靜，清爽的感覺，給人信任感和誠實感，許多公司的網站使用藍色
綠色：給人自然，放鬆的感覺，讓網站有個自然的氣氛
橘子色：給人溫暖的感覺，適合食品的網站
黃色：給人明亮的感覺，會有强調的效果

限定網站中使用的顔色

一般來説網站使用的顔色以主題色爲主，其他可以用離主題色相差不大的2，3種顔色。一開始規劃網站時決定網站中使用的基本顔色，限定3個左右的顔色，就能夠設計出有質感的網站，若使用太多顔色給人雜亂的印象。

但如果有明確的目的有時候可以使用多一點顔色，例如讓人有快樂的氣氛等的時候。

方法3 善用「空白」

設計網站時空白也會影響美感和設計感。
行距和段落間距，圖片尺寸大大影響瀏覽體驗。

設定合適的行距和段落間距，圖片間距，讓人認出這是不同的方塊，讓整個頁面看的更清楚。

設定的時候把圖片和段落看成「一塊」，然後看看「一塊」「一塊」有沒有平衡的配置。要留意上下左右的空白是否平衡，

方法4 選擇最適合的「字體」

Web網站設計時也要考慮「字體」。選擇的字體大大改變網站的印象。明朝字體還是粗黑體字，這樣要按照網站内容挑選。每個字體有各有各的特色和呈現的效果。

以前網站使用的字體只能使用電腦或手機等裝置内置的字體。不過近年來出現了Web字體。現在Web字體相當普及，不管用什麽裝置都可以顯示一模一樣的字體。

字體影響到閲讀體驗和給人的印象。爲了讓人好好瀏覽你的網站需要挑選適合的字體很重要！

方法5 模仿有質感的網站

若還沒有經驗設計有質感，專業感，高級感等網站。只是自己想象設計這些風格的網站並不容易。所以可以先找看看符合自己形象的網站，再來參考這些網站的顔色，圖片，字體，配置，整體的氣氛。多一點找自己理想的網站，能夠發現自己理想網站的共同點，可以吧那個共同點放在你的網站就可以了。

有質感設計感的網站參考網站

WebDesignClip

延續閲讀

https://www.webdesignclip.com/

WebDesignFile

http://www.webdesignfile.com/
WebDesignFile搜集國外時尚又精緻的網站。
被搜集的網站都采用了大膽的設計，因此可以提供創意的參考網站。

I/O 3000

延續閲讀

https://io3000.com/

MUUUUU.ORG

延續閲讀

https://muuuuu.org/

81-web.com

延續閲讀

https://81-web.com

模仿有質感的網站是提升網站質感的近路

方法6 使用專業軟體設計

網站設計業界標準軟體Dreamweaver是美國Adobe公司提供的軟體群Adobe Creative Cloud當中的一款軟體。使用Dreamweaver可以統一設計手機，平板，電腦版等不同尺寸裝置的網站。是專業網站設計師愛用的軟體之一。使用Adobe Creative Cloud也可以Photophop，Illustrator等其他Adobe的軟體一起管理調色盤、字體系列資訊，讓整個網站更有統一設計的感覺，也可以提升工作效率。關於Adobe Creative Cloud的方案及優惠價格請看看下面的文章：

延續閲讀