这9个视觉惊艳的网页，是这样设计出来的

图片来源图虫：已授站长之家使用

译者 : 优设网陈子木 

作者 : Tubik Studio 

阅读本文需 9 分钟

设计是一个不断发展和变革的领域，很多时候，看似熟悉的设计趋势会在下一刻摇身一变，便可再次惊艳到你。灵活的创意和开放的想法，常常能够使稀松平常的元素摇身一变，化身为惊艳的设计作品。这种点铁成金的成就感，大概也是许多设计师即使辛苦也会坚持下去的原因所在吧？

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

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

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

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

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

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

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

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

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

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

4、渲染氛围：托儿服务的着陆页设计

所有的父母在寻找托儿所和托管机构的时候，都希望他们的孩子获得最好的服务，能够找到能够给予孩子无微不至关怀的保姆。这个着陆页的设计是为名为 Kiddy 这个托儿服务提供机构所设计的着陆页。Kiddy 致力于为用户提供服务良好的保姆，在这里雇佣保姆绝对称得上是小菜一碟。

为了让整个页面足够可爱，风格独特有趣的插画发挥了极大的作用，搭配性格富有童趣的字体，让整个页面足够视觉化。与此同时，柔和的配色方案之下，文本和背景之间的对比度非常高，用户只需要扫视就可以轻松读取内容。

整个页面包含了一个着陆页应有的所有组件：有过去客户的推荐内容，新用户可以和顶级、专业的托管人员直接连线沟通，相关的信息一应俱全。最重要的是，用户如果想直接雇佣保姆，甚至不需要翻页，进入页面就可以直接沟通。