ホームページ » UI / UX - ページ 2

    UI / UX - ページ 2

    Webのタイポグラフィライティングを理解する
    Webデザインでは、ユーザーエクスペリエンスのあらゆる分野を検討する際に、タイポグラフィのテーマが重要です。すべてのWebサイトにはテキストが必要であり、非常に魅力的なレイアウトを構築するために従うことができるガイドラインがあります。グリッドライン、レタリング、フォントの高さ、テキストの間隔、カラースキーム、およびその他の同様のプロパティをすべて考慮に入れる必要があります。. この記事では、Webタイポグラフィの分野について詳しく説明します。私たちは調べます 信頼できるWebページテキストのデザインの背後にある一般的なアイデア. 途中で私はいくつか紹介します 便利なCSS3プロパティ デザイナーはしばしば忘れます. 私は、Webの理論とイデオロギーにもっと焦点を当てるようにしました。これは一般的にデジタルテキストにもっと焦点を当てます、そしてあなたは、Webデザイナーがどのスタイルをどの目的に適用するかを選ぶことができます。コンテキストは常に重要であり、取り組むプロジェクトごとにこれを適切に決定する必要があります。このガイドでは、世界中の活版印刷のイノベーターによる最新のWebトレンドが詰まった参照パケットを検討してください。. 段落を測定する あなたはこの種の測定のためにヤードスティックを破裂させる必要はありません。実際には、タイポグラフィに関する尺度は、ページ上の任意の段落の幅(水平方向)を表します。これは常に議論されるトピックではありませんが、コンテンツの読みやすさに影響します。一般的な経験則として、1行の長さは75〜85文字程度に制限します(必ずしもスペースを含む必要はありません)。. 今、これはいくつかのより広いレイアウトのための少しストレッチのように見えるかもしれません。特にあなたのデザインが流動的で、ユーザーがブラウザウィンドウのサイズを変更するときにそれに適応することを意図しているならば。いつでもCSSを設定できます 最大幅 メインコンテンツdivのプロパティ。ピクセルではなくスケーラブルな単位(パーセント、ems)で余白とフォントサイズをコーディングすることで、あらゆるレイアウト内でこのような柔軟性を実現できます。. 注意すべき最大の測定単位はありません。どのようにして内容を書き、単語を文に書くかは、各行の幅よりもはるかに重要です。しかし、短い文章と比べて長い文章は読みにくくなります。. 一流の説明 設計にあたっては、段落の尺度とともに、次のことについても考慮する必要があります。 一流. その言葉は発音されている “導かれた”, 鉛筆で使用される鉛のような。この名前は、テキストの行間に鉛の細片が配置されていた昔の機械的組版の名前に由来します。. 先導は依然としてWebデザインにおいて非常に重要な概念であり、段落の尺度と密接に関係しています。段落の幅が広くなるにつれて、先導の量を同じだけ増やすか、または テキスト行間のスペース. この余分なスペースは読書をあなたの目でずっとずっと簡単にします. あなたが非常にきつく巻かれたテキストを通してすくうことになっていたならば、あなたはそれが一行に集中するのが難しいのを見つけるかもしれません。このような場合は、CSSでリードの量を増やしてみてください。 行の高さ 財産。あなたはいつも単語の間よりもテキストの行の間にもっと多くのスペースが欲しいです。さもなければあなたのテキストブロックは新聞印刷物として現われるかもしれませんし、読み飛ばすことは非常にユーザーフレンドリーではないでしょう. 堅実なテクニックは、当初必要とされていたよりも多くのスペースを適用し、必要ならばそれを減らすことです。すべてのテキストが同じように作成されるわけではないので、太字、アンカーリンク、下線などの内部書式の異なる段落が必ず必要になります。. ナチュラルフォントサイズを使用する 平均よりも小さいフォントサイズを使用することを選択しているWebサイトはまだいくつかあります。 11px-12pxはもっともっと “スタンダードプロ”...
    Typography 10について役立つツールとリソース
    Typographyの理解に関する私の前回の記事では、Typographyのデザインと、それを操作してWebサイトのレイアウトを改善し、ユーザーエクスペリエンスを向上させる方法について説明しました。この記事では、私はリストしている タイポグラフィのための私のお気に入りのツールの10 ウェブ上で. これらは、HTMLグリッドとコンテンツ領域の構築、CSSスタイルの作成、フォント名の生成、その他多数の素晴らしいものを手助けすることができます。下記のリンクをチェックして、ポストディスカッションエリアであなたの考えをお知らせください。. おすすめ読書: タイポグラフィを理解する:Webのために書く フォントマトリックス このオンラインガイドは24ways design blogによって投稿されました。それはあなたが様々なソフトウェアベンダーからデフォルトで見つけるすべての標準的なウェブフォントのマトリックス表を特徴とします。人気のあるタイトルには、Windows、Mac OS X、Microsoft Office、およびAdobe Creative Suiteプログラムがあります。. カラーコントラストチェック 色のコントラストは、標準の白黒モデル以外で作業するときによく発生します。あなたがマッチを見つけたとき、それはデザインの完成度のように感じます。それでもカラーコンボの選択が悪いと非常に悪く見え、デザイン全体に悪影響を及ぼします。この小さなWebツールを使用すると、任意のスタイルレイアウトで互いに一致する色のセットを選択できます。. HTMLイプサム テキストを出力するだけでは不十分なLorem Ipsumツールが必要ですか。このオンラインHTMLジェネレータは、最も一般的なページ要素用のコードブロックを作成します。例としては、番号なしリスト、定義リスト、Webフォーム、テーブル、その他多数の解決策があります。. タイプチャート TypechartはCSS開発者として私のお気に入りのツールのひとつです。私は頻繁に私のシステム上の特定のフォントをWebプロジェクトに合わせることを探していますが、私はコレクション全体をめくる時間がありません。この素晴らしいツールを使用すると、フォントファミリの一般的な選択肢を調べたり、適切なCSSコードをダウンロードしたりすることができます。! PX-to-EM.com デフォルトのブラウザのテキストサイズをリセットしない限り、emsとピクセルのマッチングに問題が生じる可能性があります。このブラウザ内アプリは、pxからemへの変換テーブルとユーザーインターフェイスの両方を提供します。それは確かに非常にシンプルなツールですが、それは本当にシンプルな機能を備えた便利なガイドを提供します - そしてあなたは無料の値札を打つことはできません. CSSタイプセット CSS Type Setは、初心者向けのツールなのであまり使い過ぎないことをお勧めします。選択した特定のフォントプロパティに基づいてCSSコードを生成できます。最初は非常に便利ですが、時間が経つにつれてそれは寄りかかるために松葉杖になります。そして、あなたは自分自身でCSSプロパティを習得するように動機付けられることはできません。しかし、もしあなたがプロジェクトの時間を節約する必要があるなら、このツールは見落とされることができません。....
    UIの動き - あなたのための素晴らしいインターフェースアニメーション
    静的UIモックアップを超えて、より新しい モーションベースのデザイン資産. あなたはウェブのあちこちにたくさんの景品を見つけることができ、それらは活気に満ちたUI / UX要素を研究するために素晴らしいです. そして、あなたが巨大を探しているなら モーションベースのインターフェイスのキュレーションギャラリー チェックアウトする必要があります UIの動き. サイトは何百もの アニメーションインターフェースモックアップ ウェブ上から。また、独自の週刊ニュースレターを運営しています。 トップ5のUIアニメーション 先週のために。これらのアニメーションはウェブ中から来ていて、それらはしばしば熟練したデザイナーによって提出されています. 現代のデザイン時代においては、伝統的なUIデザイナーにとってはますます一般的になっています。 UXスキルを採用する. これは、インターフェース要素で使用されるアニメーションを研究するのに十分な理由です. UIの動きでは、あなたは並べ替えることができます 何百ものタグ このようなもの: ボタン チャット メニュー ポートフォリオ 支払い あなたはソートすることができるでしょう ページタイプ, 要素タイプ, または 身体活動....
    このGitHubページには、一般的なUI機能のための非JSの代替案がリストされています。
    何回を望んでいますか 簡単なCSSのみのスライドショーまたはモーダルウィンドウを作成する? これらのいくつかは 最も一般的なUI要素 Web上で、そして今日ではJavaScriptなしでそれらを構築することができます. 確かに、解決策を探してGoogleにヒットすることは可能です。しかし、そうではありません 精選リストから選ぶ 素晴らしいリソースの? それがこのGitHubページが登場するところです。タイトル 「JavaScriptは必要ありません」, そしてそれはのための実行可能な解決策の膨大なリストを提供します。 共通インターフェース要素. 注意すべき1つのことは、これらのコードは すべてを解決するわけではありません. リストのすべてがすべてのブラウザをサポートしているわけではなく、これらの解決策の多くは、モバイルブラウザの適切な低下や問題を完全に処理することができません。だからあなたはする必要があります それぞれ個別に獣医師 ケースバイケースで. しかしあなたが死にかけているのなら 純粋なCSSソリューション それなら、このGitHubはあなたにカバーしてもらいます. リストの特徴は 20の異なるUI要素 次のような多くの優れた解決策があります。 ハンバーガーメニュー ツールチップ タブ 画像ギャラリー ドロップダウンメニュー そしてそんなに多く. 各プロジェクト...
    この500バイトのJavascriptはユーザのカーソル移動を予測することができる
    あなたはJavaScriptでいくつかの本当にクールなことをすることができますそしてオープンソースコードは仕事をさらに簡単にします. 予感 私が見た中で最もクールなライブラリの一つであり、それはで構築されています わずか500バイトのJavaScript. このプラグインを使用すると、ユーザーのマウスが移動している場所を検出し、ユーザーがどの要素に向かっているのかを予測できます。. これは複雑なアイデアのように思えるかもしれませんが、実装はかなり簡単です。これは言うまでもありません トン 開発者にとって、次のような本当に素晴らしい効果を生み出す機会があります。 ホバー前のアニメーション または 動的レイアウト効果. で始まる 要素をターゲティングする ページ上 外観を定義する ユーザーがその要素に向かって移動しているとき. すべての計算はPremonishライブラリを使ってバックエンドで行われるので、この背後にある数学や論理について心配する必要はありません。. 代わりに、あなたは方法を探しています 予測を処理する ユーザーの行動の信頼順位に基づいています。これはすべてJavaScriptに渡されるので、あなたはあなた自身の関数を書くことができます。 ユーザーの行動を処理する. これが スニペットの例 Premonishデモから premonish.onIntent((el、confidence)=> // elは期待されるDOM要素です。//信頼度は、この予測にどれだけ自信があるかについての0〜1のスコアです。); の onIntent() methodはPremonishに焼き付けられ、ライブラリが気付くたびに呼び出されます...
    このGoogleツールを使ってあなたのウェブサイトの携帯性をテストする
    2016年はいつ歴史を作ったのか モバイルインターネットの使用卓越したデスクトップ 史上初めて。それは豊富に明らかであるべきです レスポンシブWebデザインは無視できない. ただし、レスポンシブレイアウトを作成したからといって、ユーザーエクスペリエンスが優れているとは限りません。あなたは常に考慮する必要があります さまざまなデバイスでの使いやすさ そして 合計ページ読み込み時間. Googleが最近公開しました 真新しい用具 と呼ばれる 携帯サイトテストスピードツール. このWebアプリでは、次のことができます。 ウェブサイトを分析する そして 得点する サイトの平均ロード時間とレスポンシブデザインのトータル特性に基づく. あなただけ ドメインに入る そして 実行させて. テストはできます 数分かかる だから辛抱してみてください. それが終わったら、あなたは見るでしょう 3つのスコアが0から100までの評価: モバイルの親しみやすさ 携帯スピード デスクトップスピード モバイルとデスクトップの速度がどのように計算されるのか正確にはわかりませんが、...
    あなたが無料でダウンロードできる10のワイヤーフレームキット
    デザイナーとして、あなたは自分のプロジェクトに取り組む間に、紙の上で自分のアイデアをデザインすることから、 プロトタイプを最終的に洗練するためのワイヤフレームの作成. あなたがたくさんのプロジェクトを持っているなら、それぞれのために最初からすべてを作るのに時間がかかるでしょう。. この記事では、次のことが可能な10のワイヤーフレームキットをまとめました。 ワイヤフレーミングプロセスを支援します. これらのキットを使用することで、あなたはより速くそしてより効果的に作業することができます、そしてこれから、あなたはあなたのプロジェクトをキックスタートすることもできます UXデザインのワークフローをスピードアップ. 材料設計ワイヤーフレームキット この 材料設計ワイヤーフレームキット 非常に大規模なコンパイルになったので、作成者はそれをすべての人が利用できるようにするためにDropboxでホストする必要があります。これまでのところ、あります 41スクリーン 連絡先画面、Eコマース、テキストコンテンツ、ページ設定などを含む。ここでスケッチファイルをダウンロードしてください. ムーンワイヤーフレームキット ここにあります 50スクリーン これは、次のアプリ設計プロジェクトで使用する準備が整いました。このキットには、スプラッシュスクリーン、ログインおよびサインアップ要素、メニュー、設定、フィードギャラリー、アイテムの詳細などが含まれています。ジョージ・フリゴによるこの素晴らしいキット。で利用可能なファイル スケッチ zipファイルはこちらからダウンロードできます。. モバイルワイヤフレームキット の モバイルワイヤフレームキット 以下からなる、モバイルアプリ設計で最も一般的に使用されるUI要素を含みます。 20スクリーン そして 50のモバイルUI要素. のような画面 “サインアップ”,”アカウントを作成する”, “ウォークスルー”, “自己紹介ページ”,...
    jQueryプラグインによるスムーズな全ページスクロールviewScroller.js
    JavaScriptのスクロール効果 何十もの素晴らしいライブラリから選ぶために何年も前から出回っています。しかし、この分野の新たな候補は viewScroller.js. この非常に小さくて強力なライブラリは構築することができます 単一ページレイアウト それ ブロックとしてスクロール スクロールホイール(またはタッチパッド)を1回スワイプします。これにより、スクロールによってページの個々のセクションをスクロールしながらユーザーが移動する、制御されたレイアウトが作成されます。 ピクセルタイト精度. 当然、これは完全に無料のライブラリです。 GitHubで入手可能 そして取付け易い Bowerまたはnpmで. ただし、viewScroller.jsは ではない 独立したJavaScriptライブラリ. jQueryと2つの特定のプラグインに依存しています。 jQueryのマウスホイール そして jQueryイージング. これらは どちらも必須 スクロール効果を適切に機能させるため. これはviewScrollerの価値を妨げる可能性があります。機能するためには少数のJSライブラリーが必要になるためです。とにかくすでにjQueryを使用しているのであれば、それは非常に簡単です。 viewScroller.jsは最も簡単なメソッドを提供します。 単一ページのスクロールWebアプリ 多くのコードなしで実行. それは、しかし, 非常に詳細なクラスとIDを使う スクロール効果を作成します。あなたはできる...