Post by account_disabled on Jan 29, 2024 9:38:42 GMT
设计与用户体验 为您的下一个网站项目提供鼓舞人心的 UI 设计理念 动画片 动画片 CSS 设计 用户界面设计 用户体验 西蒙·科德林顿 2017 年 5 月 23 日 分享 您可以在下一个网站中使用的七个创意 UI 设计理念 Pause Next Unmute Current Time 0:01 / Duration 2:00 Fullscreen 本文由Dave Maxwell和Panayiotis Velisarakos进行了同行评审。感谢所有 SitePoint 的同行评审者使 SitePoint 内容达到最佳状态！ 网络已经远离其传统根源。曾经提供一个基本的纯文本网站就足够了，现在人们实际上希望您的网站不仅传达信息，而且提供现代、清晰和令人兴奋的用户体验。 为此，作为设计师或开发人员，您需要创建一些视觉上有趣的东西。这可以是小到一组很棒的字体配对，也可以是复杂到完整的动画和深度交互。 今天我们将看看一些巧妙地使用微交互、悬停状态动画、CSS 渐变和变换来创造视觉兴趣并引导用户操作的网站。
重点是创造用户喜欢的东西，无论是直接通过交互还是通过用户甚至可能没有注意到的微妙效果，这仍然有助于与网站建立积极的联系。 条纹 Learn to Code with JavaScript Stripe是一个位于美国的信用卡支付处理系统。这是一个以开发人员为中心的解决方案，这在他 WhatsApp 号码数据 们的系统和网站中都有体现。他们的网站色彩丰富、互动性强，而且总体来说使用起来非常棒。让我们看看我们可以挑选哪些元素并在设计中加以利用。 渐变背景和 CSS 变换 条纹网站横幅 Stripe 网站展示了主标题部分，并创造性地使用了布局和设计。标题逐页改变颜色，并用作主要的号召性用语元素。 在最基本的层面上，它是一组容器的集合，这些容器已被定位以创建半马赛克网格。这些片段都有自己的线性渐变，与标题的其他部分混合或形成对比。 使标题在视觉上看起来更加有趣的是它是倾斜的。要获得这种类型的效果，您所需要做的就是skew(xdeg)对顶部元素应用转换。这样做会立即扭曲内部元素。
微妙的倾斜，加上简单而有趣的图像和颜色，是实现这一创造性设计所需的全部。在这里获得低对比度和高对比度部分的良好混合非常重要。如果这些部分是纯色，效果看起来就不会那么好。相反，从一个部分流向另一个部分的渐变使得这看起来在视觉上引人注目。 如果您喜欢这个想法，您可以在标题中合并这样的布局，甚至将其用作号召性用语或功能块的背景。尝试尝试颜色、位置和变换的混合，创造出看起来有趣、让你脱颖而出的东西。 这里有一个CodePen 演示，可以帮助您立即开始。 使用 CSS 渐变制作的 Stripe 自定义标题 在最基本的层面上，这个示例是一个 div 集合，这些 div 已使用渐变着色，然后定位以产生效果。选择正确的颜色、高度和位置组合才能使这种效果引人注目。 Learn to Code with JavaScript 创建交互式、有趣的菜单 Stripe 网站上的导航菜单 菜单与过去的左侧垂直菜单相比已经有了很大的进步。
重点是创造用户喜欢的东西，无论是直接通过交互还是通过用户甚至可能没有注意到的微妙效果，这仍然有助于与网站建立积极的联系。 条纹 Learn to Code with JavaScript Stripe是一个位于美国的信用卡支付处理系统。这是一个以开发人员为中心的解决方案，这在他 WhatsApp 号码数据 们的系统和网站中都有体现。他们的网站色彩丰富、互动性强，而且总体来说使用起来非常棒。让我们看看我们可以挑选哪些元素并在设计中加以利用。 渐变背景和 CSS 变换 条纹网站横幅 Stripe 网站展示了主标题部分，并创造性地使用了布局和设计。标题逐页改变颜色，并用作主要的号召性用语元素。 在最基本的层面上，它是一组容器的集合，这些容器已被定位以创建半马赛克网格。这些片段都有自己的线性渐变，与标题的其他部分混合或形成对比。 使标题在视觉上看起来更加有趣的是它是倾斜的。要获得这种类型的效果，您所需要做的就是skew(xdeg)对顶部元素应用转换。这样做会立即扭曲内部元素。
微妙的倾斜，加上简单而有趣的图像和颜色，是实现这一创造性设计所需的全部。在这里获得低对比度和高对比度部分的良好混合非常重要。如果这些部分是纯色，效果看起来就不会那么好。相反，从一个部分流向另一个部分的渐变使得这看起来在视觉上引人注目。 如果您喜欢这个想法，您可以在标题中合并这样的布局，甚至将其用作号召性用语或功能块的背景。尝试尝试颜色、位置和变换的混合，创造出看起来有趣、让你脱颖而出的东西。 这里有一个CodePen 演示，可以帮助您立即开始。 使用 CSS 渐变制作的 Stripe 自定义标题 在最基本的层面上，这个示例是一个 div 集合，这些 div 已使用渐变着色，然后定位以产生效果。选择正确的颜色、高度和位置组合才能使这种效果引人注目。 Learn to Code with JavaScript 创建交互式、有趣的菜单 Stripe 网站上的导航菜单 菜单与过去的左侧垂直菜单相比已经有了很大的进步。