首页 web前端 js教程 原子设计之父布拉德·弗罗斯特认为未来是黑暗的

原子设计之父布拉德·弗罗斯特认为未来是黑暗的

Sep 25, 2024 am 06:23 AM

O futuro é tenebroso segundo Brad Frost, Pai do Atomic Design

多年来,创建用户界面涉及重新发明轮子 - 无论是开发简单的按钮还是完整的表单。 2013 年,Brad Frost 向世界介绍了一个改变我们思考系统设计方式的概念:原子设计。尽管许多人认为这是一个“时尚”术语,但事实是,这种方法仍然与构建数字产品的当前和未来挑战极其相关。

在本文中,我想讨论 Frost 在最近的一次演讲中详细介绍的想法如何仍然是开发可扩展且高效的设计系统的基础,以及技术如何发展,包括人工智能 (AI) 的兴起),使得原子设计的概念比以往任何时候都更加必要。

原子设计死了吗?十年影响与演变的反思

“原子设计死了吗?”好吧,这是午饭后唤醒人们的好方法。但我想做的是花一些时间回顾过去的十年。十年前,也就是今年,我创造了这个叫做“原子设计”的东西,它仍然存在。所以,我认为现在是反思的好时机。如果你愿意的话,我们一起去旅行吧。”

通过这个具有挑衅性的介绍,Brad Frost 邀请我们反思网页设计的演变以及他在 2013 年向世界介绍的方法:原子设计。 Frost 最近分享的旅程涵盖了从网络早期到复杂设计系统的开发,并提醒我们原子设计的基础知识如何与当今的挑战保持相关性。但在当今数字界面不断变化的时代,原子设计是否仍然保持其相关性?

网络的演变:简要回顾

Frost 带我们回到了网络的起源,当时第一个网站于 1991 年推出,CSS 很快就在 1994 年问世。“从前,网站,对吧?1991 年,第一个网站,1991 年,CS​​S 1994 年 GeoCities 诞生了,有谁是那个时候的人吗?”他回忆说,在早期,设计是一项简单的任务,只涉及 HTML,也许还有一个动画 GIF。 “你只是编写 HTML,对吗?就是这样。然后粘贴一个动画 GIF 或其他东西。”

随着网络的发展,新的方法开始出现。 Photoshop 开始用于创建视觉布局,然后将其剪切并转换为网页。这个过程导致了 90 年代“杀手级”网站的创建,正如 Frost 所描述的:“在 90 年代中期,我们想到了可以在 Photoshop 中制作小册子的想法,剪切把它拿出来,然后扔到互联网上。”

交互界面和复杂性的兴起

Ajax等技术的发展带来了更具交互性的网络体验,以及2008年iPhone和App Store推出后移动应用程序的出现,给设计带来了新的挑战。正如 Frost 所解释的那样,“Web 2.0 出现了,这个东西叫做 Ajax。突然之间,我们开始拥有更多的交互体验......我们得到了像‘网络应用程序’这样的东西,无论它意味着什么。”

随着设备、操作系统和体验的倍增,设计人员和开发人员开始面临保持跨平台一致性和连贯性的挑战。 “更多的 Photoshop 文件,他们还必须遵循品牌指南,但这从未发生过。”在这里我们看到了风格指南和设计模式的出现,但它们仍然是碎片化且难以管理。

解决方案:原子设计

正是在这种背景下,Frost 引入了原子设计,这是一种创建模块化和可扩展界面的系统方法。 “原子”的概念作为用户界面的基本构建块,组合成分子、有机体、模板和页面,为数字设计中日益混乱的情况提供了解决方案。 “我创建原子设计的目标是为日益复杂的设计系统提供一致性和效率,”Frost 说。

彼は、Atomic Design は UI コンポーネントを整理するための単なる方法論ではなく、デザイナーと開発者がより効果的にコラボレーションできるようにすることを目的とした哲学であると主張します。 「この方法論は、再利用可能なコンポーネントの明確な階層を作成し、製品開発の一貫性と時間の節約を促進することを目的としています。」

自動化と AI の時代におけるアトミック デザイン

Atomic Design の関連性は時間が経っても薄れていません。実際、フロスト氏は、人工知能 (AI) の台頭と設計の自動化の増加により、アトミック デザインがさらに重要になっていると強調しています。同氏は、2025 年までにオンライン コンテンツの 90% が AI によって生成される可能性があり、コンテンツが急激に増加する中で品質と一貫性を確保できる堅牢な設計システムの必要性が高まるという予測を引用しています。

「あらゆる物の90%はゴミだ」とフロストは「チョウザメの法則」を引き合いに出して言う。同氏は、AI によるコンテンツ生成の容易さによって、不適切に設計されたインターフェースの蔓延につながる可能性があると警告し、アトミック デザインを使用して、インターフェースが注意深く構造化された方法で設計されていることを確認することの重要性を強調しています。

デザインの未来: コラボレーションと共有標準

ブラッド フロスト氏は、設計チームと開発チームの間でさらなる協力と標準の共有を求めて考察を締めくくりました。彼は、将来の課題に対処するには、パターンやコンポーネントをさまざまなチームや組織間で効率的に再利用できるグローバル コラボレーションを促進するシステムを作成する必要があると考えています。

「ブラッドは、開発者とデザイナーのコミュニティに対し、コラボレーションを継続し、Web の力を利用して人々を団結させ、有意義な方法で問題を解決するよう強く勧めます。」

したがって、

Atomic Design は死んだわけではありません。それどころか、現在および将来のデジタル デザインの課題に取り組むための重要なツールです。自動化と AI の時代では、高品質で一貫したデジタル エクスペリエンスを確実に作成するために、構造化された協調的なアプローチを持つことがこれまで以上に重要です。

アトミックデザインとは何ですか?

まだ詳しくない方のために説明すると、Atomic Design は、次の 5 つの主要なレベルに基づいてインターフェースを作成するモジュール式のアプローチです。

  1. アトム: インターフェイスの最も基本的な構成要素 (ラベル、入力、ボタンなどの HTML タグ)。
  2. 分子: 単純な機能コンポーネントを形成する原子の組み合わせ。
  3. 生物: ページのヘッダーやセクションなど、より複雑な部分を構成する分子の組み合わせ。
  4. テンプレート: 生物を組織し、レイアウトとコンポーネントの相互関係を定義する構造。
  5. ページ: 最終段階では、テンプレートに実際のコンテンツが埋め込まれ、エンド ユーザー向けにパーソナライズされます。

この方法論は、再利用可能なコンポーネントの明確な階層を作成し、製品開発の一貫性と時間の節約を促進することを目的としています。

Atomic Design が依然として重要なのはなぜですか?

Brad Frost の最新の講演の中で、Atomic Design の背後にある考え方は、再利用可能なコンポーネントを作成するだけでなく、それらのコンポーネントを製品に関連付けるであると述べています。これにより、ログインまたはログアウトしたユーザー、管理者または訪問者、さらには地域や言語の違いなど、さまざまなコンテキストに対して、最終製品の設計の一貫性と柔軟性が向上します。

ブラッドはデジタル インターフェースの現状についても振り返り、世界中のさまざまなチームによって再作成されたコンポーネントの断片化を強調しています。彼は、アコーディオンやセレクトなどの同じ基本機能がさまざまな組織でさまざまな方法で再作成され、多大な非効率性と人材の無駄が生じていることについて言及しています。

この作業の重複は、設計システムが標準を統一することで解決しようとする非効率性の最大のポイントの 1 つです。しかし、フロスト氏が指摘するように、多くの開発チームが世界標準に協力するのではなく、すでに解決された問題に対して独自のソリューションを作成していることが依然として見受けられます。

アトミックデザイン: 今でも関連性のあるメンタルモデル

Frost 氏によると、Atomic Design は、UI コンポーネントを階層的かつ相互接続された方法で整理し、デザイナーと開発者のコ​​ラボレーションを促進するソリューションとして登場しました。彼は自分の方法論を「ユーザー インターフェースを階層的かつ相互に接続された方法で考える」方法であると説明し、どんなインターフェースもラベル、ボタン、入力フィールドなどの小さなコンポーネントに分解できることを強調しています。それをインターフェースの「アトム」と比較します。 「これらは事実上、生の HTML タグに似ています。それ自体ではあまり役に立ちません」と Frost 氏は述べています。

これらの原子は、ロゴ、ナビゲーション、検索バーを含むヘッダーなどの分子や生物に結合します。これらのモジュール式コンポーネントは、実際のページの「スケルトン」であるテンプレート内に配置され、設計チームと開発チームがさまざまなコンテキストでこれらのコンポーネントのパフォーマンスを検証できるようになります。

アトミックデザインの批判

フロストは、彼のコンセプトが過去 10 年間に受けた批判を避けません

。 Atomic Design は厳格すぎる可能性があり、設計チーム内の創造性や革新性を妨げる可能性があると多くの人が主張しています。フロスト氏は、これらの懸念に対し、アトミック デザインの目標は創造性を制限することではなく、明確に定義されたシステム内でイノベーションの自由を可能にする強固な基盤を提供することであると述べています。

アトミックデザインの遺産

フロストは講演の最後に、デジタル デザインの将来についての力強い考察を残しました。彼は、コラボレーション、一貫性、再利用の重要性を忘れずに、新しい働き方を模索し続けることを全員に奨励しています。 「やるべきことを決してやめないでください。デザインについての新しい考え方が見つかり、気分も良くなります。」

要約すると、Atomic Design は、デジタル デザインの課題に対する効果的なソリューションを提供し続ける強力なツールです。コラボレーションと標準の共有を促進することで、より一貫性のある高品質のデジタル エクスペリエンスを構築できます。フロストの遺産とアトミック デザインでの彼の仕事は、間違いなく次世代のデザイナーや開発者にとって不可欠なものとなるでしょう。

Atomic Design の将来とコラボレーションの必要性

ブラッド フロストが私たちに思い出させてくれたのは、アトミック デザインの本質は技術的なコンポーネントを超えているということです。それはコラボレーション方法論です。彼は、設​​計とテクノロジーの課題を解決するには、単独ではなく連携して機能するシステムを作成する必要があると提案しています。これには、さまざまな組織の取り組みに参加し、世界的に適用できる共有標準に貢献することが含まれます。

講演の最後に、ブラッドは開発者とデザイナーのコミュニティに対し、コラボレーションを継続し、ウェブの力を利用して人々を結び付け、有意義な方法で問題を解決することを訴えました。彼は、人間による解決策に焦点を当て、テクノロジーを倫理的に使用することで、すべての人にとってより良いデジタル エクスペリエンスを生み出すことができると信じています。

結論

作成から 10 年が経過した現在でも、Atomic Design は、効率的でスケーラブルな設計システムを作成したい人にとって重要なアプローチであり続けています。 AI がインターフェース開発を支配できる世界において、フロストの手法はインターフェース設計の品質と一貫性を維持する方法を提供します。

現在、明確に定義された標準のコラボレーションと再利用を促進する方法論を採用することがこれまで以上に重要になっています。 Atomic Design はただ生きているだけではなく、将来のデザインの課題に取り組むための重要なガイドです。

Atomic Design は死んでいません。それどころか、デジタル設計における複雑さの増大や品質、アクセシビリティ、効率性への要求に対処するための重要なツールであり続けています。ブラッド・フロスト氏は、デザインは世界規模で反復的な作業となっている一方で、コラボレーションと、再利用可能で手頃な価格のコンポーネントに焦点を当てることが、真に世界に変化をもたらすデザイン システムを作成する鍵であると私たちに思い出させてくれます。

以上是原子设计之父布拉德·弗罗斯特认为未来是黑暗的的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1653
14
CakePHP 教程
1413
52
Laravel 教程
1304
25
PHP教程
1251
29
C# 教程
1224
24
前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

前端开发中如何实现类似 VSCode 的面板拖拽调整功能? 前端开发中如何实现类似 VSCode 的面板拖拽调整功能? Apr 04, 2025 pm 02:06 PM

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...

See all articles