网页设计案例分析：Pettrust宠物医疗用品网站首页设计分析

网页设计前，很多客户都找来一大堆网站案例，让我们去设计。的确，观察别人网站，了解那些好看又使用的页面是怎样运作设计的，能帮我们找到灵感之余，还能确定好网站定位和方向。但是有时蒐集了大量各式各样的范本素材，有可能会让人眼花缭乱，越看越不知道该怎样设计。

今天，小编将和大家一起说说，确定范文素材後，要如何分析才能为自家网站所用。本文将以「Pettrust宠物医疗用品网站」作为本次的网页设计案例分析，有兴趣的朋友就往下看吧!

网页设计案例分析：Pettrust宠物医疗用品网站首页设计分析

网页设计案例分析

♎ 建立视觉目标

网站首页，就好像店面的大门，传递给消费者「我是谁」的意思。

Pettrust网站设计首页以健康宠物为首图，容易让用户联想到宠物、正向、安心等关键字或感受。品牌医疗对象虽然是「动物」，但是受众目标是「宠物主人」，因此在建立品牌形象时，除了展现出「我是专业的宠物医疗专家」外，还给用户带来如宠物般温暖的信赖感。

♎ 基础色调简单

为避免用户眼花缭乱、模糊医疗专业形象，Pettrust的主色调采用明亮而不刺眼的橘色，以区别於其他医疗类网站。(市面上绝大多数医疗类网站都是选择蓝色、绿色等冷色系，以给人专业与权威的感觉)这主要是因为Pettrust网站是以宠物、照顾为品牌形象，考虑暖色系既可展现出宠物活泼的一面，同时也给用户传递一种温馨的温暖。

辅助色方面，主要以白色和透明度低的浅藕为主，让整个界面呈现出乾净的感觉，同时也避免以缤纷热闹的视觉效果设计网站，容易让用户分神，无法将实现集中於界面的重点上。

♎ 空间适时留白

Pettrust网站设计适时使用留白，让用户的眼睛有喘息的空间，以及足够的时间好好消化资讯。

在最上方的目录区，Pettrust让目录选单一整排清晰展开，中间没有被其他元素打断，使各选项之间有种「属於同一层级」的关系感。第二、三项旁边出现小箭头标志，可让用户直觉知道「这里有其他子目录可供浏览」，当游标滑过去时会特别停顿留意。

在最右的语言选单中，延续目录选单的字体，但中间留白大於每个选项简的留白，可让用户知道此区域并不属於目录群，再加上地图图案，方便用户选择自己熟悉的语言。

网页设计案例分析

♎ 突出界面层级

当用户往下滚动时，可发现界面中的颜色配置、字体和字幅对网站设计的作用，即划分出内容文字的层次，强调CTA按钮，引导用户视线移动等，让人一眼就知道该画面的标题是什麽、页面内容摘要重点是什麽、详细资讯连结按钮在哪等。

此外，当游标滑过按钮时，按钮会变色，也是非常实用的方法，能告知用户点击浏览。

♎ 滚动页面资讯

再滚动往下，页面资讯部分是从各种重要内容中挑出几篇，再搭配精美图片设计，有助於用户快速了解网站的动态。Pettrust页面各资讯的大小都控制得刚刚好，用户无需一直滑来滑去看讯息，影响阅览效率。

此外，不同资讯内容的底色也不同，方便用户不用看内容也知道「这些内容是不一样」。不过这样设计有可能会减低界面的整体性和乾净度，所以需要控制色彩搭配和版块大小等的度。

♎ Footer再现目录选单

滚动至网页底部，我们能惊喜地发现目录选单再次在Footer出现。与顶部目录不同，此处再次安排目录选单，主要是为了供用户滑到底时方便跳去页面。

另外，Footer位置通常还放上商业重要性此稿的连结和子项目，如：人才招募、服务法规等，方便有需要的人去查询。最後，还加上「完整联络资讯」和「社交平台连结」，以及建立「意见信箱」，为用户提供更多与品牌交流的管道。

企业想要设计出符合自家品牌定位，同时又能为用户提供流畅体验，旨在茫茫商海中突围而出，选择参考案例和素材时一定要谨慎。当然，你也可以直接联系我们，我们将根据的你需求，制定合适的网站制作方向，打造美观且实用的专业品牌网站!