優れたUX/UIデザインのチートシート10選

公開: 2019-12-10

保存する UX/UI チート シート

プロであっても、誰もが時々ちょっとした助けを必要とします。 細かいところまで覚えるのは大変です。 ときどき、一時的に忘れていた基本を検索することになります。 なんと時間の無駄でしょう。 そこで、1 日を通して役立つ、最高の UX 戦略を立てるのに役立つ、人気のあるデザインのチート シートを検索して収集しました。

これらの戦略が役立つ場合は、Web サイトの UX デザインを改善する際にこれらのヒントも確認することを忘れないでください。

1. iOS 7 デザイン チート シート

iOS 7 のリリースにより、インターフェイスに多くの変更が加えられたため、デザイナーは iOS の新しいフラット デザインに合わせてビジュアル言語を調整する必要があります。 グリッド システム、寸法、タイポグラフィ、および図像はすべて Apple によって更新されています。 Ivo Mynttinen は、iOS 7 について知っておく必要のあるすべての情報をカバーする開発者とデザイナー向けのチート シート (更新) を作成してくれました。

    • すべてのデバイスの解像度
    • すべてのデバイスの情報を表示
    • アプリのアイコンの寸法 (丸みを帯びた角のデザインの変更に関する情報と、Apple が iOS7 用のテンプレートをまだリリースしていないため、テンプレートを入手する場所を含む)
    • ユーザーインターフェースの変更点の詳細
    • アプリの設計時に役立つその他のリソースのリスト

これにより、細部まで探しに行く必要がなくなるため、時間と労力を節約できます。 これを使用すると、独自のリストをコンパイルする必要がなくなります。 その上、これはトピックに関する最も広範なシートの 1 つであり、素晴らしく構成されています。

解像度とディスプレイの仕様

2. Android デザイン チート シート

もちろん、同様の Androidデザイン チート シートも含まれています。 これは、Double Encore, Inc. のモバイル デザイナーである Meghan Dever によってデザインされた豪華なインフォグラフィックです。この情報は Android のデザイン ガイドに記載されていますが、こちらのクイック チート シートで見つけて読む方がはるかに簡単です。

これは社内で使用するために作成されましたが、時間を節約するのに非常に役立つと考え、コミュニティ全体と共有したいと考えました。 これには以下が含まれます：

    • Android テキスト フィールド、シーク バー、スピナー、ピッカー、スイッチ、およびそれらのユース ケース
    • オプティカル バウンド レイアウト機能が追加された 9 パッチ アセット
    • Android デバイスのサイズと関連する要素のサイズ
    • UI 要素の適切なパディング
    • アクション バー、コンテキスト、およびランチャー アイコンの仕様
    • Dp から px への変換

Android デザイン チート シート

3. カラーインフォグラフィックの心理学

わかりました、色の心理学をカバーする十分なチャートがありますが、これは他のものよりもはるかに広範囲であるため、私のお気に入りです. 基本 (赤、黄、青、紫、緑) をカバーするだけでなく、50 の異なる色の説明を提供します。 また、ポジティブな感情やアイデアだけでなく、さまざまな色が関連付けられるネガティブな感情やアイデアもカバーします。

心理学の色

4. HTML5チートシート

2016 年 9 月 9 日更新: このシートはもう利用できません。

これは、HTML5 を学習している場合や、たまたま脳のおならが発生してタグを忘れた場合に最適なリファレンス シートです。 これは広範なリストであり、タグ以外にもかなりの有用な情報を提供します。 タグをどこで使用できるか、どのブラウザーが何をサポートしているか (デバイス上であっても) について、さらに詳しく説明します。 以下が付属しています：

    • HTML5 用に出てきた新しいタグ
    • HTML5 で引き続き使用できる HTML4 の既存のタグ
    • HTML5 で廃止された古いタグ
    • 属性とその新旧についても
    • ブラウザの準備状況チャート

HTML5チートシート

5. Ninja UXチートシート

UX プロセスの調査段階については、Hilary Little が CodeFest 基調講演のために作成したこのクールなチート シートをご覧ください。 これらは、ユーザーをテストする際に留意すべきいくつかのベスト プラクティスです。

これは、プロ向けの基本を思い出すためのもう 1 つの優れたリマインダーであり、新しい人や適切なアドバイスやヒントが必要な人に最適です。 こちらの基調講演から彼女のプレゼンテーションをチェックすることもできます。 これはチート シートを非常によく補完し、最初の UX デザイナーや起業家に大きな方向性を与えます。

Ninja UXインフォグラフィック

6. チート シート Web フォーム デザイン

Smashing Magazine はこの美しさを私たちにもたらしてくれたので、それを使って共有することができます。 これは、優れたフォームを設計するための説明チート シートです。 このベビーベッド シートのデザイナーは、フォームの設計とテストに精通しています。

彼らは、最も一般的な問題を見つけて、それらをどのように修正するかを説明し、すべてをこの素晴らしいデザイナーチートシートにまとめることにしました. 彼らは、みんなのフォームをより良くする何かを作りたかったのです。 Omnigraffle テンプレート、Photoshop (PSD) および PDF のサンプルが含まれており、ダウンロードできます。 優れたアドバイス、すべきこととすべきでないこと、および使用できるいくつかのレイアウトの例が付属しています。

フォームデザイン

7.jQueryチートシート

これは、何か思い出せないときに参照として使用できる jQuery 要素の素晴らしい編成リストです。 これは、Web デザイナーであり開発者でもある Oscar Otero によって作成され、これらがいかに便利であるかを知っています。 以下が付属しています：

  • セレクター
  • 属性/CSS
  • 操作
  • トラバース
  • イベント
  • 効果
  • アヤックス
  • 芯

Jクエリ

この特定の設計チート シートには、優れた検索機能も付いています。 探している jQuery のバージョンを選択し、特定のオプションを検索できます。 これは、すばやく簡単に参照できる優れたツールです。

8. UX用語

UX デザイナーは、組織内のさまざまな人々とやり取りしますが、誰もが専門用語を知っているわけではありません。 常に自分自身を説明する必要がなかったら、素晴らしいと思いませんか? これは、あなたが話していることを同僚が理解できるように、同僚に配布するためのものです。 これは Bride Trozelli によって提供されたもので、次のものが含まれます。

  • UXの実践
  • UX の役割
  • UX活動
  • ユーザーインターフェース用語
  • UX 成果物

UX/UI ガイドライン

9. JQuery アイコンのチート シート

これは、jQuery で作成できるアイコンの驚くべき簡単なリストです。 すでにご存知の方も多いかもしれませんが、是非！

私たち全員がそれらのすべてを暗記できるわけではありません。 これは、頭のてっぺんから情報を思い出すのに苦労している私たちにとって便利です. 初心者にも最適です。

これは、Foundeo Inc. の Pete Freitag によって提供されました。個人的には、これはすべてのデザイナーのチート シートの中で私のお気に入りです。

JQueryUI アイコンのチートシート

10. WordPressチートシート

Startbloggingonline.com の読者である Mike Wallagher は、彼が開発した WordPress チート シートを共有しています。 彼は両方のバージョンを提供しているため、これらは初心者と上級ユーザーの両方に最適です. それらをチェックしてください！ 技術的な支援が必要な場合は、WP Buffs から WordPress のヘルプを入手してください!

ワードプレスチートシート
ソース: http://startbloggingonline.com/advanced-wordpress-cheat-sheet/

共有したいクールなデザインのチート シートはありますか? 以下のコメントでお知らせください。