- Qiao's Newsletter
- Posts
- #003 网页里那些引人入胜的交互细节
#003 网页里那些引人入胜的交互细节
如今网页设计的趋势已经不再是巨大的标题文字、美轮美奂的banner配图、幻灯片式的大动效。大家更多的在拼细节,类似一个小的button hover效果能让人眼前一亮。
Qiao Ya
May 05, 2023
Hi👋🏻，各位设计师朋友们！
欢迎来到 Qiao’s Newsletter 第003期，在这里，您将收到一系列关于平面设计、设计工作室以及独立开发者的设计资源。我相信这些资源会对您的设计生涯产生巨大的帮助。
🫡 我将要做的事情：
为您提供最新的设计趋势、技巧和教程。
分享平面设计师、设计工作室和独立开发者的成功案例。
推荐独家优质设计资源，包括免费和付费字体、图标、模板等。
介绍有趣的设计工具和软件，提高您的工作效率。
为您提供平面设计、品牌设计等行业内的优秀人物访谈。
作为一名设计师，我深知设计师面临的挑战和困惑。所以，我希望通过 Qiao's Newsletter 为您提供一个充满启发和价值的设计资讯平台。每周（暂定），您都会收到一封精心策划的电子邮件，旨在为您带来有用的设计资源和信息。
再次感谢您的订阅！如果您有任何建议、问题或想法，请随时通过电子邮件联系我。您的反馈对我们非常重要，我们希望与您共同成长，为您提供更多有价值的设计内容。
🤩 好的，让我们开始探讨这一期的主题：网页里那些引人入胜的交互细节。
目录
主题内容
设计资源聚合
优秀案例鉴赏
产品推荐
1️⃣ 网页里那些引人入胜的交互细节
前言
上周在Twitter上一个网页设计分享被大家广泛点赞和转发，在作者分享了网页背后的设计故事之后，大家都惊叹于它的细节。
Reflect 官网
Reflect 上线了新版本的官网，由设计师 Oğuz 操刀。这种风格设计统称为Linear风格，起源于 Linear 这个工具的官网页面设计，Linear 是一款项目管理和问题跟踪软件。它专为高效团队设计，致力于提高工作效率和产品开发速度。
Linear风格我个人总结是几点：
背景暗色调，元素（button、logo）紫色调，白色文字
极致的动画细节，极致的设计
所有你能看到的动画，网页元素都是代码敲出来的（哪怕是背景的网格线或者点状元素，或里面出现的软件细节图片）
如果想更加深入了解 Linear 风格，少数派的作者 Micoxx 写了一篇非常详细的研究文章 什么是 Linear 设计风格？，感兴趣可以去阅读一下。
挑几个 作者分享的 Reflect 官网设计细节（非常喜欢）
1.作者在网站首页嵌入了一个俄罗斯方块的游戏，滑动到对应页面，按动键盘方向键即可触发。
2.数据安全介绍板块，这一块的作者说本来是想AE做成视频嵌入网页，但是碰到一个神仙程序员告诉他：我用代码实现它。真是梦中情“猿”……
之前收藏的一些优秀交互网页设计案例
数据分析工具，网页上的功能介绍模块，每个卡片里面的内容都可交互，尤其是表单部分还可以填充修改数字。
canvas 首页交互演示
股票交易管理工具，网站也是 Linear 风格。
首页banner滑动演示
footer部分细节，注意这个button鼠标悬停的时候，
下方的MacBook Pro背部logo有反光交互
开发人员代码端用户数据加密工具，这里的交互非常细致。官网每一处都是细节，值得细细研究学习。
推荐模块（相较于传统的嵌入twitter用户风向模块，此交互非常新颖）
2️⃣ 设计资源聚合
一套特别的网页样机，机车风，免费。
在线去背景抠图工具（#001期的主题中类似的工具），效果非常好，目前还是免费可以试用一下，可以秒杀其他的工具了。
一套质量很高的icon，部分免费。
优秀品牌设计案例聚合网站
Figma使用的100个小技巧，新手学习，老手巩固，总结的非常好👍
一个网页历史查找工具。
你可能听过一句话，互联网是有记忆的。网站也是这样😂。
你可能遇到一个情况，就在前几月看到一个很好的网站设计，它改版了，你也没截图保存，怎么办呢，把网址输入到这个服务里面即可，一个网站每次的更新数据上传，都会留下时间戳，点开时间戳就可以看到当时的网站了。
3️⃣ 优秀案例鉴赏
Shiftnudge 门禁卡设计
颠覆传统意义上的门禁卡（工作证），品牌设计中可以参考。还有其他几款的设计
作为一家在设计上面投入不惜代价的公司，自己的APP每一处细节也完成的很好
此次的升级还包括官网，做法虽然常规（提取文字logo中的某个字母，进行解构，融入概念）但是更新后的形象简洁明快，符合当前互联数据服务的审美。我个人认为是个非常成功的升级。
标志说明
微软New bing chat的整体形象以及宣传片设计，确实，还是那股浓浓的微软风格
4️⃣ 产品推荐
Teenage engineering 是一家工业产品设计公司，目前已经有多款在售产品。
最近他们又发布了一款麦克风设备，外观造型非常好看，整块的铝进行CNC加工，非常 BRAUN 的设计风格。
官网和产品页面也非常简约。
MacOS软件，如果一个web端服务，类似微博，知乎这种没有Mac客户端，你可以借助这个应用，将它们变成一个应用放在你的Dock栏上面，模拟成一个MacOS的客户端。付费。
Reply