UI / UX - ページ 11

デジタルデバイステンプレートは設計者の間で人気があり、長年使用されてきましたが、より多くのデバイスとより多くのリソースを使用して、設計者はあらゆるタイプのアプリケーション用に何十ものツールを作成することができます。この記事は特に焦点を当てます アップルデバイスのモックアップ iPhoneからフルiMacまで. これらのモックアップは次のとおりです。 写実的なレンダリング に加えて 実際の写真はスクリーン交換のためにスマートオブジェクトに依存しています. これは、実際にデバイスの写真を撮らずに新しいUIデザインを紹介するためのおそらく最良の方法です。これらのリソースをチェックして、コメントにあなたの考えを知らせてください。. にジャンプします。 iPhoneのモックアップ iPadのモックアップ アップルウォッチモックアップ Macbookのモックアップ iMacモックアップ iPhoneのモックアップ これらのiPhoneモックアップは、iOSアプリからゲーム、さらにはモバイル対応のWebサイトまで、あらゆるものを展示するために使用できます。画面サイズはAppleの仕様とiPhone 6およびiPhone 6 Plusモデル（およびまもなくiPhone 7）と一致する. リアルiPhone 6 PSDモックアップ によって PSDExplorer. 本物のiPhone 6フォトセットは、その価格で最高のものの1つです。あなたは様々な位置に本物のiPhoneと6ユニークなPSDのセットをダウンロードすることができます。スクリーンはあなた自身のインターフェースを追加するための光沢のある効果と自動計算遠近感を含むことができます。 [ダウンロード] iPhone 6...

ランニングテーマからボタン、バナー、フォームに至るまで、UIキットは、熟練したデザイナーにとって、時間を節約する優れたソリューションとして役立ちます。 黒いキャンバスからデザインを始める時が来ないように 初心者のデザイナーと同じくらい 専門家から1つか2つを学びたい 現場で. それに、あなたができるときに最初から設計を始める理由 しっかりしたUIキットから要素をカスタマイズする? だから、この記事では2015年にリリースされた新鮮な無料のUIキットをあなたと共有するつもりです。もっと。下にスクロールして好きなUIキットを選択し、それを主な情報源からダウンロードしてください。! フラットWeb UI PSD - 再設計ケース ウルトラUIキット - オリウル・ラーマン フラットUIキット - Marcel Akiyama モダンフラット - グラフベリー 登山者用UIキット - Jiri Barta iPhone 6 UI...

インターフェイス設計者は、ユーザーの操作をエミュレートするアニメーションモックアップを使用して、UXデザインに大きな関心を寄せています。これらのUXモックアップ 動きに頼る 定義するアニメーション効果を使って インターフェースがユーザー入力にどのように応答するか. ほとんどのUXデザイナーは、これらのアニメーションを作成するためにソフトウェアを使うことを学びます。最も人気のある2つの選択肢は、Adobe After EffectsとPrinciple（OS Xのみ）です。あなたはできる デザインインターフェースモックアップ Photoshopなどのプログラムで、UIをこれらのプログラムに移動します。 アニメーション用. あなたがUXアニメーションを学ぶことに興味があるならば、景品は途方もない資産になるでしょう。あなたは他人の仕事を研究し、それがすべてどのように機能するかを見るために彼らのデザインで遊ぶことができます. 以下では、PrincipleとAEのユーザーにとって最良の景品を見つけることができます。 UXモーションデザインに入る. 彼らはきっとあなたの理解を助けるでしょう UXアニメーションのしくみ, そしてあなた自身の作り方. 1.削除アクション スワイプ さまざまな目的のためのモバイルアプリで非常に一般的なアクションです。デフォルトのiOSスワイプアクションは、 アイテムを編集/削除するための代替オプションを表示する, Ramil Derogongunによって作成されたこの景品でまさにそれはあなたが得るものです. After Effects用の無料のAEPファイルをダウンロードして、自分で試してみてください。 UIは 非常に基本的なワイヤフレーム方式 ユーザー入力が青い点で表示されます。これらのタイプのユーザーの行動は見せるのに最適です。 アニメーションを通して それは開発者に見る機会を与えるからです...

インターネット接続は高速化していますが、時々、Webページがロードされるのを待つ必要がある瞬間がまだあります。デザイナーはあなたの待ち時間を楽しくそして苦痛のない使用をするために全力を尽くします 様々なクリエイティブなアニメーションローダー. ローダーは、プロセスが進行中であることをあなたに示します。しかし、プロセスが完了する前にあなたが立ち去らないようにするために、素晴らしいローダーへの秘密は、 細部へのこだわりと面白いアニメーション. 自分のウェブサイトやプロジェクトでダウンロードして使用できる素晴らしいローダーを20個作成しています. @ CKH4によるCSSローダー CodePenのConnor（@ CKH4）によるPen css loaderを参照してください。. Rainbow Loader by @jackrugile CodePenでJack Rugile（@jackrugile）のPen Rainbow Loaderを参照してください。. @mr_alienによるリダイレクトローダ CodePenでAlien氏（@mr_alien）のPen Redirecting Loaderを参照してください。. @mattiabericchiaによるローダーCSS CodePenのMattia Bericchia（@mattiabericchia）によるPen Loader CSSを参照してください。. ライトローダー@jackrugile CodePenのJack...

最新のAppleイベントで、Apple Watchは新しく再設計されたそして信じられないほど薄いMacBookと並んで驚くべきデビューをする。しかし、デバイスが大きく明らかになるずっと前から、そこにいるデザイナーはすでにAppleのバージョンのスマートウォッチのためのGUIキットとリソースに取り組んできました。. 私たちはあなたのために脚注をしました、そしてあなたがそこに見つけることができる最高のApple Watch GUIキット、テンプレート、モックアップとリソースのコレクションをこれまでにまとめました。ソースをクリックして、必要なファイルを見つけてダウンロードします。. Hongkiatの詳細： モバイルWebアプリケーション設計のための究極のリソース 景品でキラーWeb UIのレイアウトを設計する - 究極のガイド あなたの次のプロジェクトのための30の新鮮で無料のUIキット あなたのインスピレーションのための20の美しいモバイルユーザーインターフェース Apple Watch GUI PSD - 最高のもの ユーバーウォッチ+景品 - Edwin Delgado アップルウォッチスポーツエド - Pierre Bravoz アップルウォッチ - 無料のPsdフラットモックアップ...

フォントの組み合わせは、あらゆるWebデザインに不可欠なプロセスです。. あなたが良いウェブサイトのデザインを作りたいのなら、あなたは正しいフォント、配色、さらに正しいWordPressテーマを選ぶなどの決定を下すことができる必要があります。フォントを探している人のために、Webタイポグラフィーツールは彼らの頼りになるソースです。しかし、私たちのような普通の人にとっては、この一見不可能なようなことを試みるための別のより簡単な方法があるかもしれません。. もちろん、Web上ですぐに利用できるさまざまなフォントの組み合わせがあります。しかし、それはまた重要です 独自のフォントペアを作成する方法を知っている. あなたが作り出すコンテンツのタイプとあなたのブランドアイデンティティに合うように見出し、副見出しとボディーコピーを適用することへの全体の科学があります. このプロセスであなたを助けるために、ここにあります あなたがあなたの完璧なフォントの組み合わせを見つけるのを助けるだろう最高のフォントペアリングウェブサイトの15. これらのウェブサイトは非常に使いやすく、あなたが数秒で理想的なタイポグラフィの決定を下すのを助けます。あなたがどのものを使ったか、あるいはあなたが提案したいものがあれば教えてください。. 接続タイプ 接続タイプ それ自体を「活版印刷のデートゲーム」と呼びます。書体を組み合わせる方法を学ぶのに役立ちます。完璧なペアを見つけるためにメインタイプを選ぶことから始めましょう。本当の出会い系サイトのように、Type Connectionはあなたが選択した各フォントのための潜在的な「日付」を提案します。. Google Type Google Fontsには650以上の無料の書体があります。このクリエイティブプロジェクトは、Googleフォントライブラリのフォントを使用するためのヒントを提供します。. フォントペア フォントペア デザイナーがGoogleフォントを組み合わせるのを助けます。 sans-serif、serif、および筆記体フォントの間に必要な書体ペアの種類を選択するだけです。また、動作中のフォントペアのコレクションもあります。. 天才タイプ 天才タイプ あなたのウェブサイトやデザインプロジェクトに最適なフォントを見つけるための無料ツールです。あなたはスターターフォントを選択し、それに最適なペアを見つけます。その結果、ウェブサイトはこれら二つのフォントが使用されている例を示しています. オオカミ オオカミ Webの周りから美しいフォントの組み合わせのコレクションです。そこでは、あなたはあなたの理想的なマッチを見つけるために最も人気のあるフォント、その日のサイト、そして様々な推奨フォントを見つけるでしょう。. 美しいウェブタイプ Googleウェブフォントディレクトリは600以上のフォントを占めています。もちろん、それらのほとんどは本当に素敵ではありませんが、よく見てみるに値する高品質の書体もあります。ここであなたはこれらのフォントの動作を見ることができます。サイトを下にスクロールして自分の目で確かめる. 使用中のフォント 使用中のフォント...

顧客またはユーザーに関するデータを収集する最もわかりやすい方法は、オンラインフォームを使用することです。モバイルアプリのログインフォームからニュースレターのサインアップフォーム、フィードバックフォーム、登録フォームなど、オンラインユーザーはいたるところでフォームに出くわします。だから, Web開発者は、シンプルで魅力的なフォームの作成に特別な注意を払います ユーザー向け. あなたの必要性が何であれ、ここにあります 5つの最高のHTMLフォームビルダー それはあらゆる種類のフォームを生成することができます - 簡単かつ無料. 続けて、以下のリストにあるこれらのツールをチェックしてください。. ライブフォーム 鈍いオンラインフォームをLiveFormsで生き生きとさせることができます。 カラフルなテンプレートカスタマイザを備えた使いやすいフォームビルダー. 20以上のフォームフィールドにバリエーションを追加したり、セキュリティチェックと検証を実行したり、条件付きロジックを追加したりできます。 LiveFormでフォームのパフォーマンスを追跡する, おかげで 分析機能. それ 無料であなたのサイトに3つのフォームを作成して配置することができます 1ヶ月あたりの300の記入項目の手当を使って。ただし、ペイメントゲートウェイやサードパーティのアプリのサポートが必要な場合は、 より多くの機能を提供する有料購読 ファイルのアップロードやチームコラボレーションが好き. Cognitoフォーム フォームを設計するためのより直感的なアプローチを探しているなら、Cognito Formsには 超堅牢な機能を備えたユーザーフレンドリーなインターフェース. あなたはフォームを構築し、あなたのウェブサイトにそれらを埋め込むことができ、そして誰からのインプットを取り込むことができます。私が興味を持っているものは、あなたがすることができます StripeまたはPayPal統合を使用して、コレクションの1％の料金で支払いを依頼します。. 次のような強力な機能とともにフォームを作成するためのさまざまなフィールドタイプがあります。 文書のマージ、サイズとタイプの制限付きファイルのアップロード、条件付きロジック と電子メール通知...

フィルター操作 最近人気のあるWebサイトの機能です。 eコマースサイトで日常的に使用されている. それは顧客を助けるという目的にかなう 探している製品を探す に 大規模データセット. を考える 設定できるフィルタ のために 製品検索 商品のカテゴリー、素材、ブランドなど、eBayまたはAmazonで. オンラインストアの変換が必要な場合は、フィルタリングされたナビゲーションを使用することがほぼ必要です。それだけではありません。 現場でのナビゲーションを容易にする, そして 検索をスピードアップ, しかしまたオンライン顧客のため すでに慣れている 大きなeコマースサイトで. 1.最適な場所を選ぶ ほとんどのeコマースサイトでは、フィルタ処理されたナビゲーションは 左側のサイドバーに配置 AmazonやeBayで見ることができるように、コンテンツの横にあります。しかし、それは常に最良の選択ではありません. Baymard Instituteのフィルタリングに関するユーザビリティ調査では、 コンテンツの上に配置された水平ナビゲーション 多くの場合、パフォーマンスが向上します。. 水平ナビゲーションは通常、電子商取引のWebサイトに適しています。 商品フィルターが少ない, このようにユーザーは...