UI / UX - ページ 7

すべての現代的なサイトには レスポンシブレイアウト そして 使えるナビゲーション. それは与えられた. しかし、ハンバーガーのメニューはここまでしかない ユーザビリティを根本的に変える さまざまな画面サイズ用。これを処理するためのより良い方法は 徐々にリンクを隠す のようなプラグインで OkayNav. この無料のjQueryプラグイン 非常にシンプルなメニュー機能を追加しました 任意のページにナビゲーション項目を非表示にする, 異なるビューポートに基づきます。このように、スマートフォンユーザーは単一のハンバーガーメニューを持っていますが、タブレットユーザーもいくつかのリンクを見ることができます. デフォルトでは、 素子 そして 長い順不同リスト. これまでのところ、このプラグインはマルチレベルのドロップダウンをサポートしているとは思いませんが、jQueryを少し知っていれば自分でこれを追加することができます。. OkayNavは非常にシンプルです より単純なウェブサイト向け それはナビゲーションリンクのほんの一握りを持っています。これらのリンク オフスクリーンメニューの背後にゆっくりと隠れる あるビューポートにぶつかると より多くのリンクが隠れ続ける ブラウザが小さくなるほど. あなたがする必要があります 番号なしリストをラップする ナビゲーション要素で、それに特定のIDを与えます。そうすれば、...

そのような奇妙な名前では、あなたはあまり期待できないでしょう。 ウェンク, 無料 CSSツールチップライブラリ. それでも 最も小さい図書館の1つ gzipしたときに1KB以下で計測できます. ウェンクの用途 純粋なCSSと データ-* 属性 作成する ライブツールチップ あなたは自分の好みに合わせてスタイルを変えたり位置を変えたりできる。何よりも良いのは、GitHubでソースコードを入手できる完全無料のライブラリです。. これらの軽量のツールチップはあなたのウェブサイトに追加するのがとても簡単です。あなただけが必要です Wenk.css ファイル ページヘッダーに追加しました, GitHubリポジトリからダウンロードできます。. または、あなたも CDNファイルを追加する これはGitHubのCDNでホストされています。そのためのコードは次のとおりです。 あるいは、あなたがnpm / bowerファンなら、このパッケージをインストールすることができます。 ターミナルから. デフォルトのツールチップタグには、多くのカスタムデータがありません。彼らはあなたを聞かせて 位置と幅を選択, しかしあなたはする必要があります CSSを手動で変更する...

Googleのことを否定することはありません 材料設計 ウェブを根本的に変えました。それは提供しています 共通デザイン言語 UIデザイナーがすべてのWebサイトとモバイルアプリに適用できること. この材料設計の傾向は、人気のあるマテリアライズフレームワークを含む多くのライブラリにつながっています。そしての一つ 最もクールな新素材プロジェクト 私が見つけた Mprogress.js. このJavaScriptライブラリは 材料風プログレスバー 純粋なCSSとJavaScriptを使う. 依存関係なし, 無意味ではありません。どんなウェブサイトやウェブアプリケーションにもマッチするようなマテリアルデザインの見た目のシンプルなロード（そしてプリロード）. 設定はとても簡単です。 2つのファイルだけが必要：MprogressのCSSとJSスクリプト. あなたはできる 両方をダウンロード GitHubリポジトリから パッケージマネージャを使う npmやBowerなど。そこから、あなたがする必要があります 新しいMprogressオブジェクトを作成する ローダーを起動するように指示します. これは文字通り行うことができます 1行のコード： var mprogress = new Mprogress（...

とても簡単です ブートストラップでなめらかなウェブサイトを作成する, デザインの知識がなくても。ライブラリはセットアップが簡単で、手付かずのデザインで箱から出してすぐに使用できます。. しかし、同じBootstrapスタイルを持つサイトが多すぎると、 まったく同じページが多すぎる. しかし、できます あなたのサイトを際立たせる のようなフレームワークで ブートプラス. この無料のBootStrapフレームワーク すべてのCSSを作り直す ブートストラップの外観を更新しました。これでデフォルトのレイアウトになります Google+ページのように見える 同様のボタン、テキスト、グリッド、およびライブコンポーネント. 注意 このフレームワークは100％無料です ブートストラップと同じです。だから、お金をかけたくない、そしてオープンソースを好む開発者にとっては、それは素晴らしい選択です。それ FontAwesomeライブラリでも動作します これはBootstrapのアイコンフォントの選択です. BootplusのホームページはBootstrapのホームページとほとんど同じように設定されているので、ドキュメントを読んでも問題ないでしょう。あります はじめにページの便利なガイド これは誰でもこのフレームワークをダウンロードしてインストールするのを助けるはずです. あなたがあなた自身のCSSでこれをカスタマイズしようとしているなら、あなたはあなたがそうするでしょう LESSを知る必要がある または 生のCSSを編集しても構わないと思っている. ブートストラップもLESSを使用しているので、これはすべての一貫性を保ちます。が, Bootstrap 4がSassに切り替えられることが発表されました これはBootplusフレームワークにも影響を与える可能性があります。....

すぐにインターフェース設計者 スケッチと恋に落ちた UI / UXデザインツールとして。箱から出してすぐに 簡単なインターフェースを作り上げる PhotoshopやIllustratorよりもはるかに速い. Sketchに欠けている優れた機能の1つは、 アートボードとフローチャートのリンク. しかし、 ユーザーフロープラグイン あなたはそれをすることができます! UXデザイナーは多くの場合、 モックアップの完全に動作するプロトタイプ アプリやWebサイトのページにさまざまなリンク/ボタンを接続する。ユーザーフローでは、次のことが可能です。 フルスケッチ図を生成する あるページの特定の要素を別のページに接続する. 流れはまたあなたを助けることができます 完全なモックアップを定義する と ダイアグラムテンプレート. この機能は自動的に すべてのアートボードとその動線を組み合わせます 1つの大きなスケッチファイルにまとめます。このようにすることができます フローのアイデアをエクスポートする スケッチから直接. を変えることができます 線の色, サイズ, そして...

それはいつもとても簡単です jQueryを使ってグリッドを作成する, 開発者からのプラグインと無料のチュートリアルを使う. ただし、石積みのグリッドは、構築が困難です。 ページ全体に均等に収まらない. 列の幅は固定サイズですが、 アイテムの高さは大きく異なる可能性があります. 作ります 完璧な石積みグリッド あなたはのようなプラグインが必要です Bricks.js. このプラグインは完全にオープンソースで途方もなく速いです。それは 0.5秒以内にグリッドを描画する, ページに何十もの項目があっても. 彼らがレイアウトを普及させて以来、ほとんどの人はPinterestの石積みのグリッドを認識しています。しかし、それはそれ以来になった 他の多くのWebサイトで使用されています, も. Bricks.jsを使い始めるには、次のものが必要です。 いくつかのコンテンツ そして デフォルトのページレイアウト. プラグインは、npmから、またはGitHubを介して簡単にインストールできます。. 初期設定では、合格です。 3つの特定パラメータ： 容器 - ある DOMコンテナ要素 グリッド用 詰まった...

UXデザイナーは、 ハンバーガーメニュー Webデザインで。彼ら モバイルユーザーのための目的を果たす だけでなく 発見性が低い. それらがあなたのウェブサイトで使う価値があるかどうか私は言うことができません、しかしあなたが簡単な方法を探しているならば。 スライドメニューを設定する そうして スライドバーフレームワーク 便利なリソースです. スライドバーは完全無料でオープンソースで構築されています jQueryライブラリの上に. スライドメニューを開くためにハンバーガーのアイコンをクリックした場所と同じように機能します。 画面をキャンバスから離します 部屋を作る. 私が特に好きな機能の1つは タップして非表示にする設定 ページ上の任意の場所をタップできる場所 すぐにメニューを隠す. これはすべてのスライド式メニュープラグインに組み込まれているわけではありませんが、ユーザーエクスペリエンスを大幅に向上させる機能です。. このプラグインは完全にオープンソース化されており、コードは無料で利用可能です。 GitHubで あなたが周りに突くしたい場合。しかし、リポジトリにはセットアップをより困難にする明確なドキュメント一式が欠けています. ありがたいことに、あなたはメインサイトでこれを見つけることができます フル使用ガイド Slidebarsを起動して速く実行するためのもの. スライド式メニューに対応 画面の四方から, に加えて...

PSDからSketchファイルまで、何トンもの無料のデバイスモックアップをオンラインで見つけることができます。しかし、早くできたら オンザフライでデバイスモックアップを構築 あなたのブラウザで? ええと、rm-laboの皆さん、ありがとうございます。彼らの無料のjQueryプラグイン、DeviceMock.jsはあなたを可能にします 任意のページ要素を囲むようにベクターデバイスをラップする, 簡単なJavaScriptとSVGを使う. だから、これはどのように正確に機能しますか? まあ、まずあなたが必要 jQueryのコピー そして GitHubのDeviceMockプラグインのバージョン. これには、実際のデバイスを作成するためのJSファイル、CSSファイル、およびいくつかのSVGファイルが付属しています。. あなたはできる あらゆる種類の要素をターゲットにする 単純な画像からdiv全体、さらにはiframeなどの埋め込み要素まで、ページ上に表示されます。これはあなたができることを意味します かっこいいミニブラウザを作る あなたのサイトの他のページへのインラインフレーム. このプラグインは 5種類の機器タイプ： ウェブブラウザ スマートフォン タブレット デスクトップ ラップトップ これらのモックアップはすべて使用しています フラットデザインスタイル SVGで構築されているからです。そして、それらはすべてAppleデバイスと非常によく似ています。例えば、スマートフォンはiPhoneのクローンであり、デスクトップモニタはiMacのように目立つように見えます。. これらすべてのベクトルは簡単に追加でき、それらは SVGをサポートしているすべてのブラウザ. できます...