UI / UX - ページ 5

URLアドレス、自動生成されたAPIキー、または数行のコード（スニペット）など、Webサイト上のコンテンツの一部はユーザーによってコピーされることを意図しています。しかし、これらのコンテンツをコピーすることは、特にトラックパッドや不器用なマウスを使っているユーザーにとっては難しいかもしれません。それでは、それらをより簡単にしましょう. TheNextWebのようなWebサイトに出くわした場合は、クリックするとショートリンクURLが強調表示されます。これがどのように行われているかチェックしてみましょう. 入門 はじめに、ショートリンクURLをラップするHTMLをレイアウトします。. ショートリンク http://goo.gl/9JEpOz URLをにラップしています。 スパン Ioniconからのアイコンと一緒に要素。それはあなたのウェブサイトのレイアウトに依存するので、これらの要素のスタイルは完全にあなた次第です。しかし、このデモの目的のために、私はこのようにスタイルを整えます。 それはシンプルで、青と正方形です（ここでスタイルコードをつかみます）. JavaScript そしてここがコードの本質、JavaScriptです。ここでの計画は ユーザーがクリックしたURLをハイライトします. ユーザーがクリックする要素を選択する変数でコードを始めます。. var target = document.querySelector（ '。shortlink'）; の querySelector 要素を選択するためのJavaScriptメソッドです。それは基本的にjQueryのコンストラクタのように動作します $（）. ドット表記法を使用して、クラスごとに要素を取得することもできます。 ＃ IDで要素を取得するための表記. 次に、新しいJavaScript関数を作成する必要があります。. 機能選択（elem） 私達は私達の機能をと名付けます 選択（）....

多くのデザイナーが、Adobe PhotoshopからSketchのすばらしい分野へと急速に移行しつつあります。 OS X用のこのデジタル設計プログラムは、 UIデザイン、アイコンデザインのためのより良いツール, そして、1つのプログラムでピクセル+ベクトルをサポートします。これは人気の急上昇をもたらしました スケッチデザイナーが発表した景品. 景品市場に精通している人なら誰でも、UIキットがインターフェース設計作業のための最も人気のあるリソースのいくつかであることを知っています。私はウェブサイトやモバイルアプリのための無料のスケッチUIキットのこの選択をまとめました。どのキットも無料でダウンロードでき、どのバージョンのSketchでも動作します。あなたの目を引くものを手に入れて、あなたがこれらのインタフェースキットを上手に使えるかどうか確かめてください。. Web UIキット Webサイトは依然としてUIデザインの生命線であり、モックアップはコーディング前の要件です。これらのUIキットは、美しさと目的を兼ね備えたデジタルインターフェイスを作成するために必要なリソースを提供します。これらのインターフェイスは、実際のWebサイトのレイアウトにすばやくコーディングすることができます。. ダークUIキット この純粋に濃いグレー/ブルーのUIキットは、特にのために作られました スケッチ3+ そしてのような共通の要素が含まれています ボタン、スライダー、ドロップダウン、スイッチ. 各要素はまた オン/オフ状態 だからあなたはカスタマイズされたインタラクティブな状態でインターフェース要素を構築することができます. ダーク＆ライトUIキット 暗い背景と明るい背景のスタイルで、より幅広いユーザーに適したユニークなキットです。このキットはより焦点を当てています ページウィジェット 単純な要素ではなく、次のようなもっと曖昧な項目があります。 ローディングバーとメディアプレーヤー. サマーUIキット この夏のUIキットはいっぱいです ボタン、フォーム、ドロップダウン, デジタルモックアップを強化するためのその他の非常に一般的なページ要素。さらに、完全に階層化されたSketchドキュメントなので、必要に応じてコンテンツを変更するのに問題はありません。. パールUIキット Pearl...

CloudFlareは最近彼らのシステムの大幅な見直しを発表しました バックボーンからReact.jsへ. これは フロントエンドUIフレームワークの更新 そしてチームは皆のためにそれをオープンソースにすることにしました. の CloudFlare UIフレームワーク, 略称 CF-UI, することができますフロントエンドコードの無料のオープンソースライブラリです。 Reactワークフローに結びつく. チームは彼らの動きについて非常にオープンでした 他の技術を含む Lerna.jsのような 複数のリポジトリにわたるコード管理. この見直しは表面的なコンポーネントより深くなります、それでもこれらの無料コンポーネントはあなたのワークフローに大きな違いを生むことができます. CloudFlareが追加されました カスタムコンポーネント とともにライブラリに 単体テスト コードの品質をチェックします。あなたは見ることができます ライブデモ このページのすべてのコンポーネントについて ドキュメンテーション そして コードスニペット. すべてのコードは Reactで構築された, それはそう...

ユーザーがWebサイトを使い続けて使用することを奨励することに、常に細いコードやきれいなグラフィックが含まれるわけではありません。 Redditのような最も単純なレイアウトの中には、ユーザーがコンテンツに夢中になっていることや、サイトとやり取りすることに興奮していることのあるものがあります. その秘密はユーザーエクスペリエンスにあり、 の考察 どうやって ウェブサイト機能. 相互作用は、あるページから次のページに移動するページ要素とアクションフローから発生します。. この記事では、いくつか見てみましょう UXデザイン技法 に適用することができます ユーザーエクスペリエンスの向上とユーザーエンゲージメントの向上. これらは必ずしもすべてのWebサイトに適用できるわけではないので、これらのテクニックが機能する理由を理解することが重要です。. ユーザーエクスペリエンスのテーマは膨大であり、完全に理解するには忍耐力が必要です。しかし、練習すればするほど理解しやすくなります あなたができる最善のことはそれです あなたが好きなウェブサイトで遊ぼう そして 見つけ出す 何が好き それらについて。あなたの経験から、あなたは一貫したアイデアを推定し、何があなたを（そしておそらく他の人も）ウェブサイトに従事させ続けるのかを理解することができます。. 1.コントラストを使って注意を引く すべてのサイトは、ユーザーとの対話のために作られた一握りの要素で構築されています。ハイパーリンク、ボタン、入力フィールド、サイドバーウィジェット、リストは延々と続く. しかし、すべての要素が同じように作成されるべきではありません. 当然のことながら訪問者の関与にとってより重要なものもあります。 より高いコントラスト ページ上の他の要素から目立つようにする. このアイデアは、高い色のコントラストと、人間が視覚的なデータをパターンで処理する方法から生じています。色、大きさ、形、空白など、周囲から何かが際立っている場合は、 文脈に基づいてより重要に見える. コントラストを使用して、訪問者を特定の仕事に巻き込む特定のページ要素に注意を向けます。あなたの目標がより多くのニュースレターの申し込みを構築することであるならば、あなたの申し込みボックスは明るいアニメーション申し込みボタンまたはユニークなベクトルアイコンを持っているかもしれません. 目標は、訪問者が何らかの望ましい行動を取るように誘導するインターフェースを構築することによって注意を引くことです。. 時間がある場合は、いくつかのA...

フラットデザインは、国際活版印刷スタイルが開発された1950年代という早い時期から出回っています。最近では、マイクロソフトの新製品の発売以来、広く普及しています。 ジオメトリとタイポグラフィに焦点を当てたMetroデザイン 最初に2010年に新しいWindows Phoneで、次に2012年にWindows 8で. フラットなデザインは、 立体感と光沢のある視覚要素の欠如 達成するために 清潔、ミニマリズム, そして 明快さ. それは、以前は主流だったデザインスタイル、実際の3Dオブジェクトを模した光沢のあるボタンやイラストを利用したskeuomorphismに反します。. フラットデザインは、Webサイトの合理化、コンテンツへの注力、より直感的なインタラクションの提供、そしてより迅速で機能的なユーザーエクスペリエンスの提供を主な目的としています。レスポンシブデザインのために、そのシンプルなボックスのような要素、およびグリッドベースのレイアウトを使用するのも簡単です。. フラットデザインのユーザビリティ問題 フラットなデザインは私たちにすばやく雑然としたWebサイトを提供するための多大な助けと素晴らしいツールキットを提供しますが、それは特にそれが使い古されたとき、ある種のユーザビリティ問題を引き起こす可能性があります。. クリッカビリティの視覚的な意味がない 私たちが三次元効果を使うならば、それは当然私たちのデザインに深さの錯覚を与えます。これはユーザーを素早く助けます インタラクティブな要素を見つける, ボタンやアイコンのようにクリックすることも、フォームフィールドのように入力することもできます。フラットデザインに関する主な関心事の1つは、それがユーザーにとって難しいことです。 クリック可能な要素を認識する. フラット時代の前は、Webデザイナーは通常、次のようなビジュアルソリューションを使用してクリック可能性を示していました。 グラデーション、テクスチャ、隆起、またはドロップシャドウ ボタンやその他のクリック可能なオブジェクトを押したように見せる. フラットデザインはこれらの視覚的な意味を欠いており、はるかに小さいツールセットで同じタスクを解決する必要があります。 色、形、近接, そして 文脈要素. なぜこれが問題なのでしょうか。実験してみましょう. 下のスクリーンショットを見てください。このスクリーンショットに基づいて、どの要素がクリック可能かを推測してみてください。あなたが最初に考えるのはそれではありません。私たちは他の多くの似たようなユーザビリティの問題をウェブ上で見つけられる. Z軸がないため発見可能性が低い...

あなたはWebを精査するのにどれくらいの時間を費やしますか 品質設計ギャラリー そして UIデザインのアイデア? これはデザインプロセスの大部分を占めており、ほとんどのデザイナーはインスピレーションに基づいてアイデアを整理し、うまく機能するインターフェイスを作成しています。. Collect UI galleryは、毎日のUIデザインのインスピレーションを得るための無料のオンラインソースです。現在それは6500以上のエントリを持っており、それは常に新しいコンテンツで常に更新されます. サイドバーには、あなたがに使用できるカテゴリがあります。 異なるインターフェースをフィルタリングする. これらは以下のようなインタフェースの種類に関連しています。 検索フィールド、ショッピングカート、およびユーザープロファイル. ただし、マテリアルデザインのようなデザインスタイルを探している場合、またはUXアニメーションのような他の機能を持つインターフェイスを探している場合は、特定のキーワードで検索することもできます。. これは最大のインターフェース設計ギャラリーの1つで、日々大きくなっています。しかしこれ ではない 実世界のインターフェースのインスピレーションの源. すべてのエントリはDribbbleからキュレーションされ、元のデザイナーにリンクバックします。. サイト上で注目されているデザイナーを閲覧して、Collect UIギャラリーですべてのショットを見ることもできます。. この素晴らしいデザインリソースはユニークで一般的なので、すべてのデザイナーに適用できます。作成しているかどうか ニュースレター、Webサイト、モバイルアプリ、またはデスクトッププログラム, このサイトのどこかに感動的なコンテンツがあるはずです. そしてあなたがしたい場合 Collect UIに何か送信する 彼らは提出ページさえ持っています。注意 DribbbleからのURLのみを受け付けます そのため、Collect UI Webサイトにとって高品質で価値のあるコンテンツを見つける必要があります。....

他のデザイナーの仕事を研究することによって学ぶべき多くがあります。これは、プロのプロジェクトと既存のWebサイトの仕様設計の両方に当てはまります。 Facebookのような大規模サイトは、いくつかの優れた要素やその他のそれほど良くない要素を使って、非常に特定のユーザーエクスペリエンスを提供します。この記事では、私はしたいのですが さまざまなFacebookのデザイン変更を検討して、インターフェイスの概念を分析する 現在のユーザーエクスペリエンスを向上させる可能性があります. 私はDribbbleユーザーからいくつかのカスタムFB再設計を引っ張った。 特定の機能強化と更新されたUI要素. それらがどのように見えるのか、どのように機能するのか、そして それらがどのように使い勝手に影響を与えるのか Facebookでライブ実装されている場合. 合理化されたプロフィールページ このプロフィールページのデザイン変更は、ヨーロッパのバルカン地方出身のデザイナー、Haris Jusovicによるものです。. このデザインでは、ページの所有者を強調して、シンプルさを重視しています。 著名なヘッダー写真とプロフィール写真. タイムラインの投稿はでソートすることができます “最近” または “人気のある” あなたの好みに基づいて。これはユーザビリティにとって大きなもので、特に最近要求されているアルゴリズムの変更に対するTwitterの反発を受けています。. またボタンの多くはと大きく表示します 余分なパディングと大きなタイポグラフィ. Facebookはインタラクティブであることを意図しているので、ボタンやハイパーリンクのようなアイテムの可視性を高めることは理にかなっています. 全体的にこの概念は感じます コンパクトで軽い膨張. Facebookがインタラクティブな要素にもっと焦点を当て、フォントサイズを大きくすることもできればうれしいです。. マルチコラムタイムライン Alejandro Osorioの再設計は、垂直方向の列レイアウトへの方向転換です。このレイアウトは、Facebookユーザーがユーザーのプロフィールページにアクセスしたときに表示されるプロフィールタイムラインビューを表します。. そのデザインは目覚しいものですが、一部のユーザーにとっては不快感があります。それに頼る 整理する複数ページの列...

TwitterとFacebookにはたくさんの人がいます アニメーションGIFを共有する 毎日。これらすべてが自動再生されている場合、フィードでは面倒かもしれません。. 両方のネットワークはこの問題を回避します。 クリックしてプレビューする機能 すべてのGIFに対してこれにより、ユーザーは選択することができます どのアニメーションを見たいですか いつアニメーションを開始/停止するかを選択する. とともに jqGifPreviewプラグイン, あなたのウェブサイトにこれと同じ機能をもたらすことができます. この 無料のjQueryプラグイン ページ上のすべてのGIFに対して機能します。素晴らしいリソースですが、セットアップには少し時間がかかります. 一時停止したGIFは本当に アニメーションの1フレーム, ページに表示. 残念ながら、このプラグイン ではない 自動的にGIFから静的写真を取得する あなたのために。しかし、これはPHPまたは他のバックエンド言語を使用して実現できます。そのため、少しコードを追加すると、これを自動化できます。. このプラグインはdata- *属性を使用して GIF画像の場所を保存する. ユーザーが画像をクリックすると、自動的にその画像に読み込まれます。 src 画像の属性であり、画面に表示される. シンプルで効果的、そして間違いなく素晴らしい効果です。必要なのは、このプラグイン用のCSS / JSファイルだけです。...