7个优秀的网站UI视觉设计的作品案例

   本文将透过这些网站案例，来聊一下优秀的网站UI视觉设计台前幕后的事情。

   今天，崔耘豪搜集了几个Tubik Studio 内的设计师作品，它们是不同业务目标下的产物，这些UI设计作品从配色到动效，无疑都是相当惊艳的。今天，我们透过这些网站案例，来聊一下优秀的UI视觉设计台前幕后的事情。

一、凸显特点：设计工作室的官网设计

   形体和色彩，到底哪个在设计中更加富有表现力？这个问题可能没有一个固定答案，这场在战争在设计领域当中已经持续多年，甚至会一直持续下去。这个设计项目是为一个室内设计工作室来设计官方网站，他们的主要业务是制作可视化的室内设计渲染图。他们熟知如何最大限度地借助设计工具来呈现室内设计的效果，在接到需求之后，我们决定使用全屏背景结合他们最擅长的3D建模，来展现高质量的室内设计能力和建模渲染效果。

   富有层次感的排版布局，让前后景的内容各司其职，关键的内容块也可以很轻松地被扫视。每个区块都有着醒目的标题，能够告知用户内容的属性。页面顶部的导航中呈现了品牌的LOGO，页面中相关社交媒体链接也非常清晰醒目。在这个色彩丰富的页面中，关键的CTA按钮是需要借助对比色来凸显，将用户导向特定的功能和页面。

   数字建模所带来的好处是更加沉浸式的场景，和更加易于处理的数字素材，这样一来，设计师也更容易处理，加入更加有效的动画效果。在这个案例当中，动效设计师让用户在滚动的过程中，看到条纹式的效果，使得页面的层次感明显，也暗示了这个设计工作室在视觉效果上的强大处理能力。此外，用户可以借助页面指示器快速切换页面，这一点也确保了整个网站在功能上的便捷和完善性。

二、强化属性：订购服务的网站页面设计

   对于出门旅行，绝大多数的用户都抱有着不小的期待。但是旅行本身并不轻松，需要订购酒店，需要购买机票和车票，租车，购买门票，同时旅行还意味着非常大量的活动。而这次的概念设计，就是围绕着预订服务来展开的。同样使用了3D建模来构建视觉，诸多和日常出行相关的视觉元素占据了左侧的页面，而右侧则是预订需要填写的表单内容。整个页面采用了更加富有活力的配色，降低用户填写表单时候的紧张情绪，清晰直观的页面布局，让用户无需四处摸索，可以直接开始交互。从标题到表单的条目都保有良好的对比度，可以快速扫视阅读，便于用户填写。

   向下滚动，用户可以了解这项服务的相关优势，特殊的功能，相关福利，以及更多的信息。每个信息都紧密围绕着一个主题来予以阐述，视觉化的元素被设计得非常吸睛，同时，和整体在风格调性上也保持着高度的一致。

三、营造层次：库布里克的作品网站

   今年 7 月 26 日，世界电影人都在庆贺著名导演库布里克诞辰90周年，同样身为库布里克粉丝的我们，也为他制作了一个相对优雅的作品网站。网站展现了他的荣耀之路，他的生活，以及他是如何进行创作的。整个网站的设计都是借助视觉化的设计来驱动用户不断浏览，交互不仅在上下左右布局上富有层次，而且在视觉纵深上做文章。作为一个产出过如此之多经典作品的导演，我们选取了对比度强烈、经典的红黑白三色来作为整个网站的主要配色，这一点非常符合他独特的定位和属性。戳这里查看这个网站。

四、引人注意：VR虚拟聊天室服务的网站设计

   我们很多时候会有脱离现实的冲动，还有什么比VR 更具有沉浸式的体验呢？这个疯狂的想法催生出了VR虚拟聊天室的概念，更疯狂的是它还是基于Web平台来实现。明亮而带有迷幻特征的配色，引人瞩目的3D图形象征着现代技术。为了更好地演示，用户可以直接在第一屏观看，而无需滚动页面。主页提供了相关虚拟聊天室的介绍和模板链接，用户甚至可以订阅而定期获取不同的模板，进行升级。

   高饱和度的色彩和3D建模非常贴合目前虚拟现实给用户带来的体验，而极端醒目的色彩所给人的不真实感，相反更加强调了虚拟聊天室超越现实的特征。

五、制造对比：为手作市场进行网站设计

   如今各种设计工作室甚至家庭制作的各种手工制品正在受到越来越多的追捧，通过这样的一个C2C平台，大家可以将自己的手作提交上来销售，买家借此可以获得很多独一无二的商品。在给这个手作市场设计网页的时候，主要借助了栅格系统来确保整个页面布局看起来错落，但实际非常规律。优雅的布局和配色，在阴影和动效的加持之下，看起来层次丰富，又不显得混乱，非常引人瞩目。

   浅色的背景赋予网站以良好的空间感，这使得图片天然具备了抓人视线的特质，相对多样的文本、色彩和样式，让整个网站显得丰富而不单调。页脚采用了黑色的背景图片，主要内容以外的其他信息和链接都被收纳在这里，方便用户获取内容。

六、打破常规：建站服务公司的网站设计

   谁说一个提供网站建设和开发的企业，官网就一定是要看起来简单、中性且无聊的？当然不是！

   这个专注于 Ruby on Rails 开发的公司，就设计的非常视觉化。通过建模制作出来的宝石是 Ruby on Rails 的代表，这和公司常用的开发语言有了清晰的关联，首屏底部标识出了公司相关的社交媒体帐号的链接，即使同样是CTA按钮，主要的按钮采用的是强对比的实底，而次要的则选用的是幽灵按钮。

   向下滚动的过程中，用户会在信息图式的内容块中了解到团队所采用的技术，公司的相关信息，服务的客户群，以及联系该团队的快速提交表单。内容清晰，疏密有致，目的明确，用户在这样的网站中永远不会感到迷惑。

七、沉浸体验：在线百科知识网站

   这个网站致力于帮你了解宇宙和太阳系相关的知识，你在这里能够针对行星和宇宙空间进行探索。在宇宙黑暗的背景之下，你可以看到木星表面清晰的地貌所构成的纹路，极度视觉化的UI设计和动效加持下的交互，让用户不再需要枯燥的阅读，而是在不断的浏览和交互中，逐步了解头顶的天空和黑暗中的渺远宇宙。整个网站的底色和宇宙的黑色保持着一致，带来了相对沉浸的体验，流畅的动画下，用户在浏览的时候会感到仿佛在太空中遨游一般的体验。

结语

   趋势一直在变化，跟随趋势的时候，需要灵活地根据需求，进行更为有效的表达，视觉，色彩，情感，所有的因素都需要考虑到，排版布局，色彩，交互，动效，缺一不可。向着清晰的设计目标前进，服务于用户和客户，兼顾视觉和功能，紧随趋势又不盲从，这样才会创造好的设计。

   如果您有网站建设和网站界面设计的需求，欢迎咨询「崔耘豪」，崔耘豪专业网站定制开发和ui设计14年。提供一站式的网站设计开发解决方案和服务。如果您有需求，欢迎随时咨询崔耘豪：15777576460（同微信）。