来源：摹客（公众号）

作者：Grace

随着人们对医疗健康认识水平的提高，相关的医疗服务和医疗网站设计也在不断规范化。从网站设计的角度来讲，医疗网站对于医疗内部来说就是连通整个医院的信息高速公路；而对于患者来说，优秀的规范化设计能更好的引导他们准确快速的获取医疗信息。

如何设计出优秀的医疗网站呢？不妨看看一些优秀的案例。

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设计都是非常友好的。

总结：

不仅仅是针对医疗类的网站设计，所有类型的网站设计都应该变得规范且有创意。对于设计师来说，更应该学习的是如何避免网页设计落入俗套。网页设计中的色彩搭配也并不只适用于医疗网站，其他类型的网站也应该尤其注意在色彩搭配方面出彩，为自己的设计加分。