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

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

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

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

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

网页设计案例分析

♎ 建立视觉目标

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

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

♎ 基础色调简单

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

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

♎ 空间适时留白

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

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

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

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

网页设计案例分析

♎ 突出界面层级

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

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

♎ 滚动页面资讯

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

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

♎ Footer再现目录选单

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

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

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

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处:https://www.cwhello.com/41999.html

(0)
上一篇 1天前
下一篇 1天前

相关推荐

  • 港人网购安全意识有待提高

    愈来愈多香港市民用手机到网上商店购物,有调查访问近五百名成年人,平均每三名受访人便会有两个曾经在过去六个月进行网购超过三次,其中两成人更有逾十次的网购记录。由此可见,网店购物在香港的确是十分普及的消费...

    2022年6月10日
    0250
  • 公司网站设计之后如何提高用户访问量?

    现如今,公司网站设计的目的,无非就是为了能够拓展网络业务,更好的文宣和发展公司。但大部分的公司其实对网站还是不具备一定的了解的,只认为网站建成之后就可以带来一定的效益了。那这样的想法也就大错特错了,网...

    2019年10月23日
    0540
  • 三个细节提升网页易用性

    提供便利的方法恢复或退出操作 简单来说就是切实地提升用户体验,站在一些细节角度上去提升。比如总是给用户提供选择返回上一步操作或安全、可识别的区域。又比如是可以采用恢复操作,而不是确认操作。最直观的就好...

    2022年6月16日
    0210
  • 网页设计费用:设计一个网站应该花多少钱才合理

    很多客户经常会向我们咨询,网页设计费用一般需要多少钱?设计一个网站应该花多少钱才合理?为什麽不同南宁网页制作公司的网页设计费用也不同?……事实上,这些问题可能并没有一个标准的答案,毕竟网站设计...

    1天前
    0110
  • 如何让网站可及性有效的提高

    1、 考虑到特殊的用户,如年纪大小,色盲,输入难易程度。具体的做法如可以在HTML5当中使用语义标签,简洁而明显的提示,这样能够帮助特殊用户更加轻易快捷完成页面操作。 2、 尽可能的支持多种输入方式以及一些特别...

    2022年6月15日
    0220
  • 网站的设计和布局怎样做才比较合理?

    网站的设计和布局可能很有吸引力,但如果它不是SEO友好的,它就无法在搜索引擎结果页面中获得更高的排名。 搜索引擎无法像我们和访客那样解释内容; 对于搜索引擎而言,网页看起来可能与您看起来不一样。 因此,在开始考虑网站的设计和布局之前,请牢记以下准则。

    2019年5月2日
    0710
  • 开展网页设计前你需要了解的事

    经常有客户会问我们这样的问题:为什么一样是做网站,你们的网页设计报价比其他网页设计公司高很多? 对于这个问题,我想作为一个从业8年的专业人士角度为你讲解一下,帮你分析一下价格差在了哪里,这些钱需要省吗?...

    2019年7月25日
    0540
  • 界面动效设计的状态:独立、进入与退出

    1、 独立运动 也就是动效作为一个独立的元素,进入和退出界面时,都不会对界面上其他元素有影响,尤其是位置方面的影响。 2、 进入界面 一般来说,动效元素进入界面是以减速的曲线形式进入。又或者是以做大的速度进...

    2022年6月16日
    0170