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

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

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

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

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

网页设计案例分析

♎ 建立视觉目标

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

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

♎ 基础色调简单

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

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

♎ 空间适时留白

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

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

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

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

网页设计案例分析

♎ 突出界面层级

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

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

♎ 滚动页面资讯

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

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

♎ Footer再现目录选单

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

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

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

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

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月23日 16:31
下一篇 2022年6月23日 16:31

相关推荐

  • 电商中直播网页设计有什麽交互形式?

      电商的直播网页设计的交互形式一般来说,必须围绕主播以及用户设计。也就是属於一对多的场景,因此需要考虑到使用者在该场景下的主要互动需求。 1、资讯谘询:在直播的过程中当用户有疑问时会向主播进行发文…

    2022年6月25日
    0167
  • 我来教你企业建站—网站设计过程中对色彩有哪些要求。

    网站的色彩是树立企业网站形象的关键,因此在网站设计时,必须要高度重视色彩的搭配,为了更好的应用色彩了网站设计,下面为大家讲述网页色彩搭配方面的知识。网站的色彩的搭配既是一项技术性工作,同时也是一项艺…

    2023年6月18日
    00
  • 界面的对比度如何借助深色系背景提高?

    深色系的界面设计配色,几乎是唯一一能和色彩都能够形成鲜明对比的色系组。也就是说,深色系背景与其他颜色只要合理的搭配,就能够带来更好的对比。 提高界面的对比度有什麽作用?最突出的固然是辨识度和清晰的重要…

    2022年6月25日
    0134
  • 教你营销型天津网页设计如何进行策划。

        如今天津网页设计的需求量越来越大,尤其是营销型网站建设,因为互联网时代,每一家企业都想扩大自己的销售渠道。那么,在营销型天津网页设计之前就应该做好网站的策划,同时也要做好营销的搭配。那么,营销型…

    2023年6月17日
    010
  • 进阶技巧!从4个角度教你打磨视觉设计细节。

    随着体验设计的持续发展,行业内各领域的体验设计质量都有了很大的提升,并且各个竞品之间的差距越来越小。而更高的界面细节设计质量不仅是各个大厂产品体验设计的追求,也是我们拉开竞品差距的关键一环。我们平时…

    2023年3月2日 SEO操作
    01
  • 动效元素必须承载这三个“重任”

        提供回馈   动效能够强化用户正在进行的交互效果,帮助用户去了解操作的进行方向。对他们操作呈现出结果,以此让他们明白自己的操作是否成功。   确认效果   动效能够以更视觉化的方…

    2022年6月25日
    0101
  • 界面设计前常有的思维局限

    第一:为了易用性而先进行尺寸确定 界面设计前,需要考虑到布局和元素的尺寸,究竟是由交互来决定还是视觉来决定?但一般情况下,最为理想的当然是由交互来决定。因为视觉层面有变动,优化或者修改都会相对简单很多…

    2022年6月25日
    0135
  • 页面设计化繁为简的绝招

    如今的页面设计,化繁为简的趋势越来越明显。其实这种页面设计的趋势在矽谷已经横扫了其他的热门新趋势。那到底要怎样,才能够真正的实现化繁为简? 1、将标题进行加大、加粗; 2、图标要设计得跟简单、更容易所见…

    2022年6月25日
    0111

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息