UI / UX - ページ 8

自動非表示ヘッダ かなり以前からWebデザインで着実に人気がありました。多くのブログやオンラインマガジンはスティッキヘッダを使用して ユーザーを惹きつける そして ナビゲーションに直接アクセスできるようにする. 媒体は持っています この機能を再定義 基本的な概念は ナビゲーションを隠します しながら 下にスクロール しかし それを示しています しながら 上にスクロール. このコンセプトは 大流行のトレンド そして今、あなたは簡単にできます それを複製する 使う Headroom.js. Headroom.jsは 無料のバニラJavaScriptライブラリ 依存関係や過度のAPI機能はありません。あなたはそれをあなたのHTMLに追加し、ページヘッダをターゲットにしてそれを実行させるだけです。. 単純にヘッドルーム アニメーション化する特定のCSSクラスを追加および削除します。 のために ヘッダーを表示/隠す JavaScriptを使用して動きを検出する. あなたはこの機能を自分で作ることができますが、なぜ迷惑なのですか？ヘッドルームはテスト済みです...

Webデザイナーは絶えず推進しています よりアクセシビリティ. これの意味は 聴覚障害および視覚障害に対するWeb上のサポートの強化, コントラストの高いWebサイトを読む際の問題を含む可能性があります. の カラーセーフ Webアプリは、必要なものにぴったり合った色を見つけるのに最適です。それは無料のWebアプリです テキストのコントラスト比の品質を評価します, 背景色、フォントサイズ、およびフォントファミリに基づく. これは非常にインタラクティブなWebアプリです。 他の配色ジェネレータだけではありません. まず、あなた 背景色を入力してください そして フォントを選ぶ あなたは使っています。これは完全に一致する必要はありませんが、サイズと配置を正しくするようにしてください。あなたのページのものと一致するようにしてください ヘッダではなく本文コンテンツ. クリックしたら “OK”, 新しい画面が表示されます 色の勧告がいっぱい. あなたはテキストの色を見つけるためにあなたの選んだ背景に最もよく合う色の選択を通して閲覧することができます 高い読みやすさの比率. WCAGは 非常に厳しいカラーコントラスト比の要件 合格点（AAまたはAAA）を取得する。この評価はに基づいています 特定の比率, 16進コードと互いに不一致によって計算されます。. たとえば、明るい赤の背景に明るい緑色のフォントを使用すると、WCAGの評価に合格することができません。それがこのツールがとても価値がある理由です....

カスタムグリッド 最初から作成するのが最も難しい機能のいくつかです。あなたは石積みグリッドプラグインをたくさん見つけることができますが、それら それぞれ独自の制限と要件があります. の ムリ文字 必要な人には強力な代替手段です。 タッチ対応のソート可能なレスポンシブグリッド要素. それは上に構築されています アニメーション用のVelocity.js, 一緒に モバイルタッチを処理するためのHammer.jsライブラリ. むり ではない jQueryが必要です, つまり、グリッドインターフェイス用の数少ない一般的なJavaScriptプラグインの1つです。. メインのプロジェクトページには、 すべての機能を備えた美しいグリッドデモ. アニメーション効果、ドラッグ＆ドロップのサポート、およびさまざまなサイズのさまざまなグリッド要素。このデモでは、Muuriグリッドを使用してどれだけ制御できるかを紹介します。. 選んでいいですよ 表示する要素, クラス（フィルタリング）に基づいて、 空のスペースをどのように埋めたいか. 石積みの格子は頻繁に空の点を残します グリッド要素は必ずしも完全には一致しません. これはPinterestなどの大規模Webサイトではかなり一般的です。でも、できます ドラッグ可能なグリッドアイテムを追加する ほとんどすべてのユーザー制御インターフェースへ. について考える ウィジェットレイアウトを使ったソーシャルプロフィール そして彼らはどのように働くのでしょう。または、について考える...

何年もの間オンラインであったインターネットユーザーはしばしば彼らがかつてそうであったようにウェブサイトを見るために時計を引き返すという懐かしさを好む。これは時間を無駄にして Webデザインの成長を研究する 長年にわたって. 私はいつもWayback Machineを閲覧するのが大好きですが、それはそのような苦痛です。インターフェースは少し不格好で、アーカイブされたページの多くは正しく（あるいはまったく）読み込まれません。しかし今、UXタイムラインと呼ばれる新しいプロジェクト あなたは遠い過去を覗くことができます 以前のスクリーンショットの垂直方向のタイムラインを提供し、その過程で変化する. UXタイムラインの美しさは、あなたがに接続されているウェブサイトの明確なスクリーンショットを得ることです。 垂直タイムラインインタフェース あなたができること 変更を確認するためにスクロールする 毎年. いくつかの 最近のサイト Product Huntのように エントリーが少ない. しかし、MailChimpのように15年以上前から存在していた会社に入ると、これはもっとたくさんのスクリーンショットを見ることでもっと面白くなるでしょう。. 今のサイトはに焦点を当てています 最も人気のあるスタートアップやソーシャルネットワーク Vimeo、Dribbble、Spotify、Uberのように（しかし近い将来、もっと多くのサイトがリストに追加されることを期待しています）. 全体的なUXタイムラインは本当に小さい 懐かしさを感じさせるデザイナーのためのサイドプロジェクト. しかし、それは確かに手動でWayback Machineを掘り下げることに勝り、スクリーンショットはすべて高品質の画像サイズになっています. 画像を右クリックして「画像を見る」を選択すると、フルサイズの写真が表示されます。. 新しいスクリーンショットを送信する方法はありませんが、これは素晴らしい機能になると思います。彼女のTwitterアカウント@jacinthe_で、いつでも提案をしたり、作成者Jacinthe Bussonと意見を共有したりできます。.

ブレッドクラムナビゲーションは、設計および開発プロセスで見落とされがちです。. 何人かの人々はそれが不必要であると思うかもしれませんが他の人はそれがその価値のために面倒すぎると感じるかもしれません。問題の事実は、ブレッドクラムナビゲーションはウェブサイトの使いやすさを大いに高めるでしょう. ブレッドクラムは、ユーザーに代替のナビゲーション方法を提供し、ユーザーがWebサイトの階層内のどこに位置しているかを確認できるようにし、Webサイト内の上位レベルにナビゲートするために必要なステップ数を減らします。. ここで概説されているのは、今日使用されているさまざまな種類のブレッドクラムナビゲーション、それらが重要である理由、およびそれらをオンラインで最も適切に実装する方法です。また、参照用にここに含まれ 今日オンラインでブレッドクラムが使用されている方法の30以上の例. ブレッドクラムナビゲーションはWebサイトを作ったり壊したりすることはないと思われますが、Webサイト全体の使いやすさと機能性を高めることによって、ユーザーに追加の利益をもたらすことを忘れないでください。. ブレッドクラムの種類 パス パスベースのブレッドクラムは、Webサイトの現在のページに到達するためにユーザーがたどったステップまたはパスを示します。さらに、現在のページにアクセスするために以前に訪問したページへのリンクが表示されます。 3種類のブレッドクラムナビゲーションのうち、パスベースのブレッドクラムナビゲーションは最も人気がありません。そのため、パスベースのブレッドクラムナビゲーションは、次のような機能を提供します。 “進む” そして “バック” ブラウザのボタンほとんどのWebサイトでは、ロケーションベースおよび属性ベースのブレッドクラムナビゲーションの方が優れた機能を提供します。. ロケーション ロケーションベースのブレッドクラムは、現在のページがWebサイトの階層のどこにあるかをユーザーに示します。この種のブレッドクラムナビゲーションは、2レベルを超える深さまたはコンテンツを持つWebサイトで最もよく見られます。さらにWebサイトに移行すると、ユーザーには、Webサイトとして機能するページまたはカテゴリへのリンクが表示されます。 “親” または現在表示しているページから1つ上のレベル。たとえば、ユーザーが “話す” しかし、ページ “私達がすること” ページはの親です “話す” ページ中 “ホーム” ページはの親です “私達がすること” ページ. クリアレフト株式会社 属性...

のプロセス インターフェースを設計する 常にで始まる アイデア創造. これには、視覚化、他のサイトの調査、ラピッドプロトタイピングが含まれます。この初期のアイデア段階は、非常に重要です。 レイアウトとユーザーエクスペリエンスを理解する あなたは建てるつもりです。では、どのようにして新しいプロジェクトで実際にワイヤフレーミング作業を実行する必要がありますか? 私は伝統的な紙と鉛筆が大好きで、必要に応じて追加の道具が付いています。しかし デジタルワイヤーフレーミング それはまた大きい、そしてそれは現代のデザイナーにとって実行可能な選択肢である。この記事では、あなたがあなた自身のものを作るのを助けるために両方のテクニックのための最良のリソースを共有したいです。 グリッドベースのUIワイヤフレーム. 初期のUI / UXの概念化 の違いを明確にすることから始めましょう。 ワイヤーフレーム そして プロトタイプ. これら2つの単語は同じプロセスに関連しているため、しばしば同じ意味で使用されます。. A ワイヤーフレーム です 単一静的スケッチ WebページまたはアプリのUIのボタンのテキスト、余白、要素のサイズ、さらにはアニメーションまで説明するための吹き出しがあります。しかしワイヤーフレームはちょうど 各ページの下書き. 同様に、 プロトタイプ のようです 異なるページがどのようにリンクするかを示すフローチャート. そのため、プロトタイプは、さまざまなボタンやリンクが他のページにどのようにつながるべきかを示すためにワイヤフレームを接続します。....

モバイルが未来であることを否定することはできません。グーグルがデスクトップよりもモバイルでより多くの検索が行われていることを確認して、彼らがまだ持っていなければすべてのウェブサイトが本当にモバイルになるべきであることは非常に明白です。. ただし、レスポンシブレイアウトによるブラウザ内コンテンツとネイティブアプリによるアプリ内コンテンツの間には興味深い相違点があります。. 両方の分野を探索し、それぞれの選択の根源を掘り下げたいと思います。レスポンシブレイアウトの上で、Webサイトがネイティブアプリを使用するのはいつですか。サイトで両方を実行できますか？これらは今日のすべての新しい創造的なプロジェクトで尋ねられるべき重要な質問です. ネイティブアプリの価値 ほとんどのスマートフォンユーザーは、お気に入りのプログラムをネイティブアプリに依存しています。 Facebook、Twitter、Instagramなどのすべてが独自のネイティブアプリを実行しています. ネイティブアプリケーションはローカルオペレーティングシステム上で実行されるので、それらは非常に多くのものです。 アニメーション、UIデザイン、およびコンテンツ構成に関して、よりスムーズで簡単な操作. ネイティブアプリはUIガイドラインに準拠しており、それらはすべて一貫性があり、自然に仮定的なものです。スライディングメニューとタブバーの使い方をユーザーがよく知っていることが多い. 多くの主要な出版社がiOS StoreとGoogle Play Storeにブログ、Webアプリケーション、ソーシャルネットワークをカバーするアプリを持っています。しかし言うことは公正です 大規模サイト FacebookやTwitterのように 小規模なサイトよりもネイティブアプリから多くの価値を得る. この議論は専門家の意見と主要な出版物が彼らの見解を提供しています。それはデザイナーにとってもクリエイティブエージェンシーにとっても非常に議論されているトピックです。. しかし、ネイティブアプリケーションはエンドユーザーにとって便利であり、評価されています。唯一の変数は あなたのウェブサイトがモバイルアプリとしてよりよく機能するかどうかを決定する, または ユーザーが欲しいなら. 完全にレスポンシブなWebサイト：長所と短所 一般的な文脈では、レスポンシブWebデザインは常に良いことです。 Webデザイナーは、自分のレイアウトをあらゆる画面に完全に反応させ、順応性を持たせることによって何も失うことはありません。. しかし、ネイティブアプリのコンテキストでは、いくつか考慮すべき点があります。はじめに レスポンシブWebサイトはブラウザのレンダリングエンジンに限定されています. スマートフォンでは、これはアニメーションが制限され、Flashがなく、ブラウザのレンダリングエンジンに依存していることを意味します。. ネイティブアプリはスマートフォンやタブレットのコア機能を使用できます. アニメーションライブラリはネイティブではるかに強力です ブラウザにレンダリングされたCSSまたはJSよりも....

Webがどのように見えるかについて考えたことはありますか ユーザーのニーズを予測できれば? 最近のWebデザインに関する議論では、ユーザーエクスペリエンスをパーソナライズし、興味に基づいてさまざまなコンテンツをさまざまな人々に提供するというアイデアが登場しました。. 新しいアプローチはと呼ばれます 予測デザイン, あるいは時々 コンテキストデザイン, そして経験のデザインを次のレベルに引き上げます。特定のニーズが頭に浮かぶ前に顧客が何を必要としているかを予測し、それに応じてコンテンツをカスタマイズします。. 新しい概念についてはじめて耳にしたとき、私は魅了され、それが素晴らしいアイデアであるように思われたので、それについてもっと学ぶことに熱心でした。私はそれについて読んで、そしてますます考えて、私は同様に懸念を理解し始めました、そして私の最初の熱意は懐疑論に変わり始めました. それ以来、私の予測的デザインに関する見解は、楽観主義と悲観主義の間で行き来してきました。この記事では 機会を実演する そして リスク 新しいアプローチはデザインの分野に持ち込むことができるので、あなたはこのまだ物議をかもしている主題についてもあなた自身の立場をとることができます. 読んでいる間、予想されるデザインはまだその赤ん坊のステップを踏みます、そのルールはまだ最終的ではありません、そしてまだ少しまたは大いに将来変更することができます. 予想デザインとは? 予測設計の用語は、FastCoDesignに関する素晴らしい投稿の中でAaron Shapiroによって1年未満前に造られました。記事はデザイナーがする傾向があると主張した あまりにも多くの選択肢をユーザーに与える, どっち 気をそらす, そして ユーザーエクスペリエンスをストレスの多いものにします. 言い換えれば、これは質の悪い決定とそれほど満足していないユーザーにつながります。この問題に対する推奨される解決策は、予測的設計と呼ばれる新しいアプローチです。. 予測的デザインにおいて、デザイナーの仕事は次のような環境を作り出すことです。 段階的なやりとりを極力排除 可能な限り プロセスを単純化する. これはつまり、ユーザーが使用する各アプリでたくさんのオプションを実行する必要がないということです。代わりに、スマートアルゴリズムが、可能であれば、それらのためのすべての決定を最も行います。. この賢い意思決定プロセスは、以下を利用することによって可能になります。...