官方服务微信:dat818 购买与出租对接

UID小伙伴看过来!透过Tubik Studio作品聊UI视觉设计台前幕后

2万

主题

2

回帖

6万

积分

管理员

积分
66425
发表于 17 小时前 | 显示全部楼层 |阅读模式
    UID的小伙伴们 今天

    设计是一个持续发展和变革的领域。很多时候,那些看似熟悉的设计趋势会在瞬间发生转变,然后再次给你带来惊喜。灵活的创意以及开放的想法,常常能够让原本稀松平常的元素转变形态,成为令人惊艳的设计作品。这种能够将普通变为神奇的成就感,或许就是许多设计师即便辛苦也会坚持下去的原因吧。

    今天,我们搜集了 Tubik 内的一些设计师作品。这些作品是在不同业务目标下产生的。从配色到动效,这些 UI 设计作品都非常惊艳。今天,我们通过这些案例,来聊一聊优秀的 UI 视觉设计背后的事情。

    1、凸显特点

    设计工作室的官网设计

    形体和色彩,在设计中哪一个更具表现力呢?这个问题或许没有固定答案。这场关于形体和色彩在设计领域的争论已经持续多年,甚至会一直持续下去。这个设计项目是为一个室内设计工作室设计官方网站,该工作室的主要业务是制作室内设计的可视化渲染图。他们清楚知晓怎样最大限度地借助设计工具以呈现室内设计的效果。在接收到需求之后,我们做出了使用全屏背景并结合他们最为擅长的 3D 建模的决定,以此来展现出高质量的室内设计能力以及建模渲染效果。

    排版布局富有层次感,前后景内容各有其职责,关键内容块易于扫视。每个区块都有醒目的标题,可告知用户内容属性。品牌 LOGO 呈现在页面顶部导航中,页面中相关社交媒体链接也很清晰醒目。在色彩丰富的页面里,关键的 CTA 按钮需借助对比色凸显,以引导用户到特定功能和页面。

    数字建模带来的好处有:能呈现更加沉浸式的场景,以及拥有更加易于处理的数字素材。正因如此,设计师处理起来更方便,也能更轻易地加入更加有效的动画效果。在这个案例中,动效设计师让用户在滚动时看到条纹式的效果,这使页面的层次感变得明显,同时也暗示了该设计工作室在视觉效果上具有强大的处理能力。用户能够借助页面指示器来快速地切换页面。这确保了整个网站在功能方面是便捷的,并且在功能上也是完善的。

    2、强化属性

    订购服务的网站页面设计

    出门旅行时,绝大多数用户都怀有很大的期待。然而,旅行本身并不轻松,要订购酒店,要购买机票和车票,还要租车以及购买门票,并且旅行意味着有非常多的活动。而此次的概念设计,是以预订服务为核心展开的。使用 3D 建模构建视觉,左侧页面被诸多与日常出行相关的视觉元素占据,右侧是预订需填写的表单内容。整个页面的配色更富有活力,能降低用户填写表单时的紧张情绪,其清晰直观的页面布局,让用户无需四处摸索,可直接开始交互。标题的对比度良好,表单的条目对比度也良好。这样的对比度使得用户能够快速扫视阅读,也便于用户填写。

    用户向下滚动,能够了解这项服务的相关优势,能知晓其特殊功能,还能得知相关福利以及更多信息。每个信息都围绕着一个主题进行阐述,视觉化元素设计得十分吸睛,并且在风格调性上与整体保持高度一致。

    3、营造层次

    库布里克的作品网站

   


    今年 7 月 26 日,世界电影界人士都在欢庆著名导演库布里克的 90 周年诞辰。我们这些也是库布里克粉丝的人,为他打造了一个较为雅致的作品网站。这个网站展示了他的荣耀历程,展示了他的生活,还展示了他进行创作的方式。整个网站的设计依靠视觉化的设计促使用户持续浏览。交互不仅在上下左右布局方面富有层次,还在视觉纵深上进行了精心设计。我们选取对比度强烈且经典的红黑白三色作为整个网站的主要配色,因为这非常符合这位产出过众多经典作品的导演的独特定位和属性。点击这里查看这个网站。

    4、渲染氛围

    托儿服务的着陆页设计

    所有父母在寻觅托儿所和托管机构时,都期望孩子能得到最佳服务,找到能给予孩子悉心关怀的保姆。这个着陆页是为 Kiddy 这个托儿服务提供机构设计的。Kiddy 致力于为用户提供服务优良的保姆,在这里雇佣保姆非常容易。

    插画风格独特有趣且足够可爱,对整个页面起到了极大作用。字体性格富有童趣,与插画搭配,使整个页面足够视觉化。在柔和的配色方案下,文本和背景的对比度很高,用户只需扫视就能轻松读取内容。

    整个页面具备一个着陆页应有的所有组件。过去客户的推荐内容在其中,新用户能够与顶级且专业的托管人员直接进行连线沟通,相关的信息都很齐全。尤其重要的是,若用户想直接雇佣保姆,根本不需要翻页,进入该页面后就可以直接进行沟通。

    5、引人注意

    VR虚拟聊天室服务的网站设计

    我们很多时候会有想要脱离现实的冲动,难道还有比 VR 更能带来沉浸式体验的东西吗?这个疯狂的想法促使诞生了 VR 虚拟聊天室的概念,更为疯狂的是它是基于 Web 平台来实现的。配色明亮且带有迷幻特征,引人注目的 3D 图像象征着现代技术。为了能更好地进行演示,用户可以直接在第一屏进行观看,而不用滚动页面。用户可以利用获取的模板进行升级。

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

    6、制造对比

    为手作市场进行网站设计

    如今各种手工制品正受到越来越多的追捧,这些手工制品有的来自设计工作室,有的来自家庭制作。通过这样一个 C2C 平台,大家能够把自己的手工作品提交上来进行销售,买家借此可以获得许多独一无二的商品。在为这个手作市场设计网页时,主要借助栅格系统,以此来确保整个页面布局看似错落,实则非常有规律。布局优雅且配色得当,在阴影的衬托以及动效的辅助之下,看上去层次丰富,同时又不会显得混乱,格外引人注意。

   


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

    7、打破常规

    建站服务公司的网站设计

    一个提供网站建设和开发的企业,其官网不一定就非得看起来简单、中性且无聊。这是很明显的。

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

    用户在向下滚动的过程里,能够在信息图式的内容块中知晓团队所运用的技术,知晓公司的相关信息,知晓服务的客户群,还能看到联系该团队的快速提交表单。内容清晰明了,疏密安排得很有秩序,目的十分明确,用户在这样的网站中始终不会产生迷惑。

    8、沉浸体验

    在线百科知识网站

    这个网站的目的是帮助你知晓宇宙以及太阳系方面的知识,你在此处能够对行星和宇宙空间展开探索。在宇宙那黑暗的背景当中,你能够看见木星表面清晰的地貌所形成的纹路。在极具视觉化的 UI 设计以及动效辅助的交互作用下,用户不再需进行枯燥的阅读,而是在持续的浏览与交互过程中,逐步了解头顶的天空以及黑暗中的渺远宇宙。整个网站的底色与宇宙的黑色是一致的,这带来了较为沉浸的体验。在流畅的动画作用下,用户在浏览时会有仿佛在太空中遨游的体验。

    9、呈现韵律

    音乐APP的着陆页
您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|小黑屋|关于我们

Copyright © 2001-2025, Tencent Cloud.    Powered by Discuz! X3.5    京ICP备20013102号-30

违法和不良信息举报电话:86-13718795856 举报邮箱:hwtx2020@163.com

GMT+8, 2025-4-4 21:02 , Processed in 0.099971 second(s), 18 queries .