このブログは、UI/UX デザイナー、プロダクト マネージャー、プロダクト デザイナー、フロントエンド開発者にとって役立ちます。これらの役割の同僚や友人がいる場合は、ブログを共有してください。 新年の贈り物としても最適です。ただ言ってるだけ?!
デザイン システムの作成 - なぜその本
何か大きな価値のあるものを作るには、それに対する大きな目的が必要です。目的は問題空間に存在します。あなたの目的が利害関係者の問題を解決することである場合、あなたは利害関係者よりも彼らの問題を理解する必要があります。したがって、新しい遠(yuǎn)近法レンズが必要になります。この本を読むと、ユーザーの問題を発見するためのレンズとパターンが得られ、問題を解決するためのフレームワークを頭の中に作成できるようになります。
1.継続的な発見の習(xí)慣 - Teresa Torres 著
プロダクト デザイナー、プロダクト マネージャー、UX デザイナー、さらにはフロントエンド開発者や UI デザイナーに推奨されます。
この本からのいくつかのメモ:
終わりを念頭に置いて始める
オポチュニティ ソリューション ツリー
機(jī)會スペースをフレーム化し、調(diào)整し、優(yōu)先順位を付けます
解決策ではなく機(jī)會を優(yōu)先する
雙方向ドアの決定
量は質(zhì)につながる
アイデアではなく仮定をテストする
影響の測定
2.基礎(chǔ)を築く - Andrew Couldwell 著
デザインシステム 101
この本はデザインシステムの作成についての本當(dāng)の話です。専門用語は使わず、厳しい現(xiàn)実を取り繕うことも、會社の帽子も必要ありません。良いアドバイス、経験、実踐的なヒントだけです。
メモ:
あなたの會社でデザインシステムを販売するには?
デザインシステムの使命、価値観、原則
この本からさらに學(xué)ぶことができます
私はこの本を UI デザイナーやプロダクト デザイナーに強(qiáng)くお勧めします。この本は実踐的なヒントや現(xiàn)実的な期待の設(shè)定にも重點を置いています。
3.システムで考える: 入門書 - Donella Meadows 著
Donella Meadows による システムにおける思考: 入門書 は、複雑なシステムを理解し、操作するための洞察力に富んだガイドです。
本書の主要な概念を簡単にまとめます:
システムとは何ですか?
ストックとフロー
フィードバック ループ、遅延、レバレッジ ポイント
システムの罠と機(jī)會
メンタルモデル
プロダクト マネージャー、チーム リーダー、開発者など、システム全般が好きな人にもお勧めします。
4.明確なデザイン決定:
優(yōu)れたデザイナーは優(yōu)れたストーリーテラーでもあります
読みやすい、
この本は、コミュニケーション、會議、合意の取得、クライアントのニーズの理解、またはそれらの対応方法に重點を置いています。
アドバイスの中には非常に一般的なものもありますが、適切な背景を示しています。
デザイナー、プロダクトデザイナー、フリーランサーに推奨。
Designing Design System - What Books
何のために、誰のためにデザインするのか、その領(lǐng)域を理解していますか、デザインの基礎(chǔ)さえ知っていますか?
1.デザイン システム - Alia Kholmatova 著
メモ:
この本は非常に視覚的に魅力的で、非常に構(gòu)造化されており、例が豊富であることがわかりました
デザイン システムの作成を開始する方法について、パターン、原則、構(gòu)造のすべてを説明する本
この本は非常に短いので、各章の後に參考文獻(xiàn)がたくさんあります。
デザイナー、開発者、プロダクトマネージャーにもお勧めします。私はこの本がとても好きですが、少し偏見があります。
2.デザインスクール - タイプ
ザ?ブックは、タイポグラフィーの基礎(chǔ)とデザインにおけるその応用を詳しく掘り下げた実用的で視覚的に魅力的なガイドです。
この本の重要な要點を簡潔にまとめます:
タイポグラフィの基本
タイプ階層
わかりました、この本の美しさは好きです
レイアウトとグリッドのタイポグラフィ
活版印刷の原則
ただ本を読むだけでも素晴らしいです
デザイナー、プロダクトデザイナーにおすすめです。
3.デザインスクール - レイアウト
はい、最初にこれを読んでから、タイプ 1 を読みました。この本の美學(xué)が好きです
メモ:
レイアウトの基礎(chǔ)
グリッド、グリッド システム、
レイアウト構(gòu)成
用語
本には、各章の最後に知識をテストするセクションもあります。いいですね！
私は開発者としてレイアウトの理解とグリッドが本當(dāng)に苦手でした。この本がそれを助けてくれたので、今ではグリッドが大好きになりました。 CSS グリッドの優(yōu)れたチュートリアル
建築設(shè)計システム - ハウブック
一貫性のある効果的なデザイン システムを作成するのは簡単な作業(yè)ではありません。それには、デザインの原則、組織、コラボレーションについての深い理解が必要です。
1.デザインシステムのフロントエンドアーキテクチャ
開発者、設(shè)計エンジニア、チームリーダー、プロダクトマネージャーに推奨
メモ:
この本は今ではかなり古く、追い風(fēng)以前の時代 (2016 年) に出版されました
言及されている CSS アプローチは優(yōu)れています
実際の例が満載の健全な本
最も優(yōu)れた學(xué)習(xí)は、Red Hat .com での設(shè)計を設(shè)計システムに分解する方法でした
基本は変わらないと言いますが、この本はそれらを復(fù)習(xí)するのに最適です。コード例はかなり古いです。
2.開発者のためのデザイン システム - Michael Mangialardi 著
開発者、設(shè)計エンジニアに推奨。デザイン システムの作成に関する実踐的なチュートリアルのようなものです。
メモ:
スケーラブルな設(shè)計システムをコード化する方法を?qū)Wびましょう
開発者向けの Design System に関するベストハンズオン ガイド。
デザイントークンの命名、作成、開発について詳しく説明します
學(xué)習(xí)スタイル辭書
追い風(fēng)の例
3.建築設(shè)計システム - Sarah Vesselov と Taurie Davis 著
デザイナー、開発者、プロダクトマネージャー、プロダクトデザイナーにお勧めします。サラとトーリーの視點が気に入りました。
メモ:
活版印刷システムの作成
アクセシブルなカラー システム
Gitlab のケーススタディは素晴らしいです
デザイン システムのオープンソース化に関する入門書を提供します
共有デザイン言語
のコンセプトが気に入りました
4.実踐的な Web インクルージョンとアクセシビリティ - Ashley Firth
デザイナー、開発者、QA、PM、製品デザイナーに推奨します。
メモ:
各章は障害とその方法に基づいています
アリアを?qū)Wぶ
キーボードのアクセシビリティ
スクリーン リーダー ソフトウェア、ブラウザー組み込みソフトウェアの紹介
各章の後には多數(shù)の參考資料があり、同じ內(nèi)容について詳しく學(xué)ぶことができます
オーディオタグとビデオタグのスタイリングキュー、知りませんでした
CSS で RTL のスタイルを設(shè)定する方法に関する広範(fàn)なガイド
https://rtlstyling.com/posts/rtl-styling
5.インクルーシブなデザイン パターン - Heydon Pickering 著
開発者、QA、PM、製品デザイナーに推奨します。
メモ:
アクセシビリティのためのコード例が満載
回路図 HTML がわかりやすく説明されています
可読性チェッカーの使用
いくつかのヒントは非常に実用的です
悪い習(xí)慣とその解決方法について説明します
どの章にも避けるべき事項があります
アクセシビリティのテスト
記事全體を読むかスクロールする特典。この本の PDF ファイルが必要な場合は、pratik@coolhead.in まで電子メールをお送りください。それらをあなたと共有します。
コーヒーを買ってください: https://buymeacoffee.com/biomathcode
デザイン システムについてさらに詳しく話し合いたいですか? https://cal.com/biomathcode
以上が昨年読んだデザイン システムに関するトップの本の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお勧めします。 3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭は、論爭を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請願書を提出しました。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します
Jul 06, 2025 am 02:36 AM
.map（）、.filter（）、.reduce（）などのJavaScriptアレイ內(nèi)蔵メソッドは、データ処理を簡素化できます。 1）.map（）は、要素を1つに変換して新しい配列を生成するために使用されます。 2）.filter（）は、條件ごとに要素をフィルタリングするために使用されます。 3）.reduce（）は、データを単一の値として集約するために使用されます。使用すると誤用を避ける必要があり、その結(jié)果、副作用やパフォーマンスの問題が発生します。
JSラウンドアップ：JavaScriptイベントループに深く潛り込む
Jul 08, 2025 am 02:24 AM
JavaScriptのイベントループは、コールスタック、WebAPIS、およびタスクキューを調(diào)整することにより、非同期操作を管理します。 1.コールスタックは同期コードを?qū)g行し、非同期タスクに遭遇すると、処理のためにWebAPIに引き渡されます。 2。WebAPIがバックグラウンドでタスクを完了した後、コールバックを?qū)潖辘工毳濠`（マクロタスクまたはマイクロタスク）に入れます。 3.イベントループは、コールスタックが空であるかどうかをチェックします。空の場合、コールバックはキューから取り出され、実行のためにコールスタックに押し込まれます。 4.マイクロタスク（Promise.thenなど）は、マクロタスク（SettimeOutなど）より優(yōu)先されます。 5.イベントループを理解するには、メインスレッドのブロックを避け、コード実行順序を最適化するのに役立ちます。
