5個國外醫療網站設計及配色賞析

08-09

5個國外醫療網站設計及配色賞析

來自專欄摹客產品設計專欄7 人贊了文章

隨著人們對醫療健康認識水平的提高，相關的醫療服務和醫療網站設計也在不斷規範化。從網站設計的角度來講，醫療網站對於醫療內部來說就是連通整個醫院的信息高速公路；而對於患者來說，優秀的規範化設計能更好的引導他們準確快速的獲取醫療信息。

如何設計出優秀的醫療網站呢？不妨看看一些優秀的案例。

1. Weightmedics - 減肥類網站設計

地址：https://www.weightmedics.co.uk/index.html

設計特色：卡通風格、扁平化設計、顏色搭配活潑淡雅

不同於一般的減肥網站，沒有密密麻麻的減肥套餐推薦，沒有誇張的瘦身前後對比圖。整體網站設計以卡通方式呈現，淡藍色的背景色搭配白色字體，簡潔淡雅。局部搭配的橙色調使網站活潑而不單調。

2. The Doctors Laser Clinic -醫療美容類網站設計

地址：https://laserdocs.co.uk/

設計特色：迎合女性審美、卡片式設計、優雅紫色調為主

作為醫療美容類網站，大部分以女性顧客為主。所以懂得迎合女性審美，不僅僅是從產品服務，網站設計也必須能在第一眼獲得女性顧客的青睞。網站整體的紫色調優雅大方，不同層次的紫色卡片設計能循序漸進的對顧客進行引導。CTA部分的設計以深紫色做為強調，吸引點擊，從而增加轉化。

3. Beauty is power; a smile is its sword - 牙醫類網站設計

地址：

https://dribbble.com/shots/4090230-Beauty-is-power-a-smile-is-its-sword-Dental-Website-Idea

設計特色：黑色背景突出網站主題、簡潔的黑白搭配，形成色調對比

正如這個網站的設計主題，微笑之美在於一口健康好牙。這個牙醫網站設計的特別之處在於它沒有常見的白大褂和擬人化的牙齒圖案來突出主題，而是採用較為抽象的微笑來展示設計概念。作為牙醫網站，也不失為很好的宣傳廣告。巧妙的顏色搭配使得網站中黑色部分設計並不沉悶，反而十分燦爛。

4. Tychee Training - Medical Training - 醫療類網站設計

地址：https://dribbble.com/shots/4688223-Tychee-Training-Medical-Training

設計特色：活潑的橙色調、插畫風格、扁平化設計

網站背景色採用橙白搭配，使整個頁面看起來新鮮有活力。十分符合現代人追求的健康生活。首頁採用了時下流行的插畫風格，結合扁平化網頁設計，給人溫暖活潑的感覺。

5. Psychologist - 心理健康網站設計

地址：

http://preview.themeforest.net/item/psychologist-personal-singlemulti-page-html-template-with-page-builder-and-admin-pages

設計特色：響應式設計、HTML5、清新淡綠色調

整體網頁設計以淡綠色調為主，導航欄、字體、以及天空的顏色融為一體，是一個清新而又富有生命力的顏色。而網站響應能力和卓越性能是促成轉化的一部分。作為心理健康類網頁設計的模板，也可以給新手提供一個很好的參考。

看了以上的案例分析，不知大家有沒有注意到一個共同點，就是對於醫療網站設計中顏色運用的分析。

那麼，在醫療類網站設計中，有哪些可以遵守的設計原則呢？

網站色調搭配是一個影響網頁的重要因素。不同的顏色會產生不同的效果。

（1）紅色：紅色會使人興奮，並且感到緊張不安。所以醫療類網站不適合使用紅色做為主色調。

搭配：紅色系中的粉紅色比較適合於使用在醫療美容類的網站，營造出迎合女性柔美、純真的氣氛。

（2）黑色：色調比較莊重，且容易讓人聯想到死亡。所以如果對顏色搭配不好把握，建議避免過多使用黑色作為主色調。

搭配：黑色與高亮度的黃色搭配，可以得到清晰整潔的效果。屬於比較適合活潑跳躍、色彩絢麗的配色方案。

（3）藍色：藍色比較適合和平淡雅潔凈的頁面，因此一些醫院網站也會適當採用藍色，活單獨使用，或搭配使用。

搭配：淺藍色具有淡雅、清新、浪漫和高貴的特性，常被用於化妝品、女性、醫療網站的設計中。

（4）綠色：綠色代表的是清爽、理想、希望和生長的意象，較符合服務業、醫療健康業、教育行業、農業類網頁設計的要求。

搭配：綠色可與多種顏色搭配而達到和諧的效果，也是醫院網站中最為廣泛的顏色之一。

（5）紫色：紫色象徵著女性化，代表著高貴和奢華、優雅與魅力，也象徵著神秘與莊重、神聖和浪漫。

搭配：紫色加入少量的白色，就會成為一種十分優美、柔和的色彩。

（6）橙色：橙色具有健康、活力、勇敢和自由等象徵意義，能給人以莊嚴尊貴神秘等感覺。應用在醫院網站設計中可以營造溫暖的氛圍。

搭配：不能大面積使用，只能小塊地與其他色彩搭配起點綴的作用。

（7）白色：白色是網頁設計中通用的顏色，它具有容易突出彩度的特性。

搭配：搭配黑色顯得高貴具有都市氣息，但不適合作為醫療網站主色調。

（8）黃色：在很多設計作品中黃色都被用來表現喜慶的氣氛和華麗的商品。

搭配：黃色屬於一種中性色彩，因此它在網站設計中幾乎可以和任何一種色彩搭配。

在高保真網頁原型中，色彩的運用也同樣是網頁設計的加分項目。顏色搭配得當的原型項目更有助於獲得投資和贏取客戶的機會。那麼，你需要的是選擇一款支持色料庫的原型設計工具，而非單色的線框圖工具。國產原型設計工具Mockplus中可直接通過色號或使用拾色器來設置組件、圖標顏色。對於網頁設計、App設計都是非常友好的。

總結：

不僅僅是針對醫療類的網站設計，所有類型的網站設計都應該變得規範且有創意。對於設計師來說，更應該學習的是如何避免網頁設計落入俗套。網頁設計中的色彩搭配也並不只適用於醫療網站，其他類型的網站也應該尤其注意在色彩搭配方面出彩，為自己的設計加分。

5個國外醫療網站設計及配色賞析

相關閱讀：