フードデザインダイジェスト2015年6月

5年間、インターフェイス、新しいツール、パターンのコレクション、興味深い事例、歴史的な話題に関する最近の記事の定期的なレビューを公開しています。 テーマ別の数百のサブスクリプションのテープから、公開する価値のある出版物の約5％が選択されています。 以前の資料： 2010年4月-2015年5月

パターンとベストプラクティス

こだわりの製品を構築するストーリーの力を理解する

Dan Martellの新しいユーザーに会うというトピックに関する、最も有用な記事の1つ。 彼は、ウェルカム画面は、サービスがどのようにユーザーをアクティブにするかに関連して考慮されるべきであると書いています。これは、彼が製品に利益をもたらす唯一の方法であり、もはや不要な機能の迷惑な概要ではありません ダンは、Facebookなどの有名な企業のこのようなシナリオの例を示します。ユーザーが登録後10日以内に7人の友人を追加した場合、おそらくサイトを放棄しないことがわかりました。







メーリングリスト

• セマンティックメッセージ自体に焦点を合わせたメーリングリストパターンの別のコレクション 。
• Lee Munroeからのメールレターのデザインとレイアウトに関する優れたチートシート （メールクライアントの機能と制限を含む）。
• iPhone用のメールクライアントおよびGmailのWebバージョンで、レターがどのように表示されるかを確認できる小さなスクリプト 。

Baymardレポートからの抜粋

• クリスチャンホルストは、選択されたフィルタオプションをメインフォームと別々のブロックで複製する価値があると言いました 。 ほとんどのオンラインストアは1つのことを行います。
• 評価による適切な分類についてのクリスチャンホルスト 。 多くのオンラインショップは、評価するユーザーの数を考慮せずに、最高の評価で2階の製品を正式に発表しました。

Web UIデザインテクニック：インタラクションデザインとアニメーション

インタラクションデザイン、インタラクティブストーリー、アニメーションに関する新しいUXPinの本。



ユーザーがアクションバーに配置されたフォームボタンを見逃す理由

Anthony Tは、画面の下部に固定されているモバイルの送信ボタンを配置することをお勧めします。 モバイルガイドラインでは別のことを言っていますが、それに従うとフォームでの作業の流れが乱れ、それらを見つけるのはそれほど簡単ではありません。 確かに、Androidの古いブラウザーでは画面の下部に貼り付けることに問題があり、通常の場所にキャンセルボタンが残る場合があります。



アニメーション解析

• Val Headは、いくつかの人目を引くサイトでレスポンシブアニメーションを解析します 。

ホームページの例外

Johanna Batesが、自分のプロジェクトで試みたホームページを作成するための興味深いアプローチについて書いています。 CMSでは、クライアントが単一の形式で編集できるモジュールのセットとして登録されます。 これにより、最新の状態に保つことができます。



リンクを使用する

• リンクで訪れたアイコンとイラストをマークする方法 。

アニメーションのタイミングのガイドライン

PercolateのDominic Nguyenは、フロントエンドアニメーションの最適な時間を正当化しようとしています。 これは150〜350ミリ秒です。これは、人が知覚しないこの数値よりも小さく、これよりも大きいため、注意を切り替えます。 ロシア語への翻訳 。

プラットフォームのガイドラインとそれらのデザインテンプレート

Apple iOS 9

プラットフォーム自体のインターフェースはそれほど変わっていませんが、作業の安定性は最終的に改善されるようです-iOS 7の革命から始まって、ますます悪化しました。







最も興味深いものの1つは、Windows 8に似たiPadのマルチタスクモードの外観で、 SamsungのTouchWizシェルにも実装されていますが、ビデオを見るためのピクチャインピクチャモードが追加されています。 確かに、大型タブレットは最近7つの「バージョンとファブレット」により売り上げが落ちており、iPadはどれだけ試してみても消費デバイスをはるかに超えていませんでしたが、マルチウィンドウはもう少し便利になります。 アプリケーション切り替えモードも変更されており、サードパーティのキーボードが接続されると、通常のデスクトップOSのアプローチが表示されます。 Windows 10は、デバイスの全ラインに共通のソリューションを示しましたが、Appleはどうやってこれを実現するのでしょうか。



他のインターフェースパターンの中でも-新しいプレーヤーの大画面の多くの問題を解決する試み：WinPhoneのようにスワイプを使用してメインセクションを切り替えることで、多数のコントロールを下に移動します。 丸い色のカテゴリアイコンの積極的な使用。 検索では、古い時代の丸みを帯びた入力フィールドが再び表示されました。 現在のコンテキストのより多くのニュアンスを考慮に入れます 。 選択モードが正常になり、混乱を招くコンテキストメニューの代わりに通常のツールバーが表示され、 2本の指でキーボードをタッチパッドに変えることができます 。 また、この時計で以前に紹介されたHelveticaを独自のSan Franciscoフォントに置き換えました。 さようなら、ヘルベチカへの広範な愛の時代？



一般に、更新は主にアプリケーションに関係しているため、そこにあるすべての興味深いものをキャッチする必要があります。 ニュース （キオスク交換）で特にクールでした。



コード設計者に優しいSwiftプログラミング言語は、2番目のバージョンとオープンソースコードを受け取りました 。 トピックの続き：

• Zuckerberg Callに5セントをかける 。
• アートボードをサポートする新しいPhotoshopのテンプレート 。
• 2015 Apple Design Awards受賞者
• 新しいCarPlayは、単なるエンターテインメントシステムよりもさらにクロールしようとしています。自動車メーカーに、空調などの基本的な自動車制御機能を統合することを提供します。 しかし、フォードは最近、サードパーティのOSメーカーが支配しているコンピューターと電話のメーカーの運命を繰り返したくないとはっきり言った。

材料設計

• Googleは、最高のデザインのAndroidアプリのランキングを発表しました 。 受賞者の中には、Telegramメッセンジャーがいます。
• GoogleデザインチームはMediumでブログを立ち上げました 。
• Sebastien Gabrielの新しいガイドラインのための強力なChrome再設計ケースの最初の部分 。
• Android Mの主要なインターフェイス要素とそのプロパティの概要 。
• Taylor Lingは、メインのフローティングボタン内のアイコンを光学的に位置合わせすることが重要であると書いています 。

Apple Watchの新機能

• Todoistチームは、実際のデバイスの登場後にアプリをどのように再設計したかについて説明します 。
• Artem Dashinskyによる時計アプリケーションのビジュアルデザインのヒント 。

モックアップに行く

さまざまな人種の手を示すデバイステンプレートの大規模な選択。 彼らは支払われますが、視聴者により良く入ることができます。

ユーザーの理解

試してみてください：色の記憶は驚くほど曖昧です

ジョンズ・ホプキンス大学のジョナサン・フロムバウムによる色知覚の興味深い研究。 彼は、人々が正確な色や多少なりとも正しい色を覚えているのではなく、それに最も近い原色を覚えていることを示しました。 トピックの続き：

• 知覚の別の研究、今回は芸術作品 。 なぜ大衆が青とより古典的な例を好むのか-抽象芸術には、知覚に対するより大きな認知的負荷が必要です。

インターフェース設計のジョブストーリー

人とユーザーのストーリーが昨日である理由と、ジョブストーリーを使用する理由に関するAlan Klementの記事の翻訳。 製品チームの効率的な作業を可能にするもう1つの良い方法です。



現在のコンテキストを使用する

• Paul Montoy-Wilsonは、現在のユーザーコンテキストを積極的に使用するインターフェイスに対して「予測コンピューティング」という用語を提案しています 。

アクセシビリティ

• Ire Aderinokunのアクセシビリティチェックリスト 。

中毒のデザイン

• 一部はインターフェイスについて、一部は一般的に認識されています。 スロットマシンの歴史と原理に関する The Vergeの記事。多くの点で、「Design for Addiction」という本を参照しています。

インターフェイス画面の設計と設計

Adobe CC 2015

Adobe CC 2015がリリースされましたが、これは史上最大のAdobeアップデートの1つです。 同社のすべての製品に触れました。 いくつかのモバイルアプリケーションと2つの新しいサービス、Adobe CreativeSyncとAdobe Stockが追加されました。







製品デザイナーにとって、新しいPhotoshopは最も興味深いものです。 サンノゼの人々は、長年にわたり、写真編集ツールではなく、アシスタントデザイナーを作成していることを知りました。 さらに、「突然」多くのスケッチデザイナーを吸収しました。 その結果、この製品は多くの新機能を受け取り、古い機能の奇妙な動作を変更しました。

• アートボード：1つのドキュメントで異なるサイズの複数の画面を作成できるアートボードで、作業、エクスポート、表示のレイアウトを大幅に促進します。
• 複数のレイヤースタイル：互いに重なり合う複数の同一のレイヤースタイルを作成できるようになりました。
• Web用に保存に代わる新しいエクスポートダイアログ。
• ライブラリ：ツールバーなど、一度作成します。 他の場所で使用してからソースを変更すると、どこでも変更されます。 スマートオブジェクトの開発。
• デバイスでデザインを表示するためのコンパニオンアプリ（既にiOS、途中Android）。
• Photoshop Design Space ：デザイナー向けのPhotoshop用のまったく新しいインターフェイス。
• パフォーマンスと相互作用の両方の点で多くの小さな調整：半透明の内部ストロークを課す1つの機会は価値があります！ :-)
• Adobe Stockは、会社のすべての製品に埋め込まれた株式ベクトル写真です。
• Adobe CreativeSync-すべての設計リソースを共有する新しいアプローチ。 すべてのデバイスとプログラムのファイル、フォント、写真、リソース、オプション、メタデータ、Adobe Stockの要素を自動的に同期します。

短いビデオ「 UI / UXデザイナーの新機能 」。 公式ページの他の製品のその他の変更および新しいチップ。







Photoshopで高度なアニメーションを作成する

Stephen PetranyによるPhotoshopのアニメーションに関する小さな段階的なガイド。 機能は限られていますが、ほとんどの場合手頃な価格のツールです。



最新のデザインツール：アダプティブレイアウト

DropboxチームメンバーのJosh Puckettが、最新のデザインツールの課題について語ります。 ワークスペースのレベルで適応性に合わせて調整されたものはほとんどなく、適切なソリューションのビジョンを提供します。 すぐに新しい楽器の発表を待っているようです！ ロシア語への翻訳と、プロトタイプでの実際のデータの使用の継続。



対話設計ツールの状態

ほぼ同時期に、パスクアーレ・デシルバは現代の設計ツールの状態について非常に賢明で深い分析を行いました。 前半では、複雑なインタラクションとアニメーションのプロトタイピングについて説明し、興味深い分類を提供します。 2つ目は、ゲームデザイナーのツールに注目します。 どうやら、ここで私たちは新製品の発表を待っています:)



InVisionの新機能

• InVisionは、モバイルアプリケーション向けの要素/画面の包括的なセットをリリースしました。スケッチ、Photoshop、高密度画面のサポート、簡単なカスタマイズです。
• InVisionの5番目のバージョンが準備中です。 ブログで、企業は主要な改善点について説明し始めました。
• また、新しいPhotoshopのアートボードモードもサポートします。このモードからプロトタイプを自動的に組み立てることを検討してください 。
• これで、InVisionからすぐにDribbbleに公開できます 。

スケッチの新機能

• 実際のJSONデータをレイアウトにすばやく挿入する方法についてマークジェンキンス 。

Pixateの新機能

• チームアカウントは、コラボレーションを促進するように見えます 。
• シンプルなスクロール画面とpull-to-refreshの作成に関する別の簡単なチュートリアル 。

コンゴウインコのcar色-ライブデザイン環境

より多くの機能を備えた新世代のMacaw製品。 最初のバージョンを購入した人には割引が適用されます。



マーベルの新機能

• Apple Watchテンプレート 。
• プロトタイプはどのページにも埋め込むことができます 。

iOSおよびAndroid用のAxShareアプリの紹介

Axureは、AndroidおよびiPhoneでプロトタイプを表示するためのAxShareアプリをリリースしました。 それらはオフラインで利用可能になります。



Proto.ioの新機能

• Dropboxとの統合が登場しました 。

スカラ

仕事中のデザイナーには同じ名前のツールでしたが、当初はモバイルでデザインをプレビューするためにSkalaブランドでリリースされた製品が2番目のバージョンを受け取りました。



Tumult Hype 3 Proの新機能

• Hypeの新しいバージョンのインターフェースがどのように作成されたかについて 。

ユーザーの調査とテスト、分析

コンジョイント分析を理解する

ジェフ・サウロは、製品とインターフェースの概要分析とその種類についてのメモ。



欠落データを処理する7つの方法

ジェフサウロは、ユーザー調査から収集されたデータにギャップがある場合の推奨事項を示します。 不完全なデータは、いくつかの方法で削除または復元できます。

ブラウザーでの視覚的なプログラミングとデザイン

Yuri Vetrov-プラットフォーム思考

UX People 2015カンファレンスでのプラットフォーム思考に関するプレゼンテーション：ドキュメントの作成を停止して生活を開始する方法。 これはすべて、事務処理に多くの時間を費やします。製品ではなく、サイドドキュメントの研磨に力がかかります。 製品に関する作業を、特定のリリースではなく、プラットフォームの作成および開発として認識する必要があります。



私は2013年と2014年の 終わりにそれについて少し話しました。 しかし、特定のケースに重点が置かれ、このプレゼンテーションでは、そのようなプラットフォームを作成するための段階的な指示がありました。 スライドの数では、これは「悪夢」レベルですが、タスクは本当に困難です。



プレゼンテーションの最後に、この写真が集まったすべての人々への感謝の長いリストが1つにまとめられ、実践され始めました。 最初のアイデアはシンプルで、プラットフォームの最初のプロトタイプは2012年半ばに登場しました。 しかし、より多くのサービスがそれに移されるにつれて、ビジョンは調整され拡大されました。 膨大な数の製品とそれぞれの質問があるため、まだ進行中です。 したがって、シリーズは続きます:)



ビデオパフォーマンス 。 確かに、すべてが非常に速いペースでそこにあるわけではありません。









ライブガイドラインとコンポーネントシステム

• 2GISには興味深いMakeupレイアウトコントロールツールがあることがわかりました 。 レイアウトにコードをオーバーレイして、矛盾を見つけることができます。 また、非標準コンテンツがブロックに出力されたときにブロックに何が起こるかを確認できます。 デモサイト 。
• ガイドラインEnvato Market 。
• パターンインベントリに関するBrad Frostの記事のロシア語への翻訳 。

たんぱく質

タンパク質は、インターフェースのコンポーネント、ベクトル内の表現、およびコードに同期します。 チームはモスクワのFrontendConfとサンクトペテルブルクのWeb Standards Daysでプロジェクトを発表しました。 Proteinは、SketchまたはAdobe Illustratorで使用するために、任意のインターフェイスコンポーネントをベクトルに変換できます。 つまり、Sketchからの変更は、インターフェイスコンポーネントのDropboxのようなコードの形でライブラリに戻ります。



著者は、これは根本的に異なるアプローチであり、約束されているように、デザイナーと開発者の間の相互作用の問題を解決すると述べています。 設計者は、ライブコンポーネントを使用してレイアウトを作成し、バックグラウンドでコード表現を同期できるようになりました。 設計に取り組むだけです;）これで、デザイナーと開発者が作業するコンポーネントのライブラリが1つできました。 同時に！



Proteinは、開発を頭に入れ、主に開発者によるコンポーネントの作成を促進し、次にインターフェースレイアウトでのデザイナーによる使用を促進します。 Facebookプロジェクトページとプレゼンテーション 。







CSSシェイプ

• ポリゴンによって描かれた絶滅危ed種の動物に関するサイトが、マスククロッピングを使用して作成された方法の非常にクールな例 。

Webタイポグラフィ

• Webフォント補間機能に関するAndrew Johnson 。
• SASS CSSプリプロセッサを使用した適応フォントグリッドのチートシート 。
• レスポンシブフォントとWeb補間の強力なLetterrorスタジオ実験 。 Just van Rossumが2014年のSilver Dialカンファレンスで自分のデスクトップツールであるRobofontについて話したとき、彼はそれをWeb上でどのように表示するか明確な絵を持っていませんでした。 そして、6か月後、彼自身の鋳造所が実例を示しました。

色を扱う

• Vibrant.js JSライブラリを使用すると、画像内の最も鮮明な色を認識できます 。
• 2009年からAwwwardsの最高のサイトのカラーパレットを分析した興味深い実験 。
• 円錐グラデーションを作成するためのCSSのセット 。
• このスクリプトを使用すると、画像の原色からのグラデーションで画像をロードしながらスタブを作成できます 。

新しいスクリプト

• Chris Coyierは、ブラウザーでテキストの強調表示を操作する方法を示します 。
• 純粋なCSSの雨滴 。
• 送信ボタンの元気なアニメーション 。
• 詳細情報のためのカード展開スクリプトのコレクション 。
• ページスクロールエフェクトスクリプトのコレクション 。
• ページを音声で編集できる実験 。
• 物理モデルに近いアニメーションを作成するためのDynamics.jsライブラリ 。

デザイナー向けのJavaScript

• JavaScriptの基本に関する簡単な学習サイト 。

SVGを使用する

• Greensock JSフレームワークでのSVGアニメーションについて 。
• Web上でのSVGの準備とその後の使用に関する実用的なガイド 。
• SVGのグラフィックフィルターのデモ 。
• SVGでアニメーションを操作する現在の状態と方法の概要 。

指標とROI

モバイルユーザーの80％を失うことは正常であり、最高のアプリの方が優れている理由

Andrew Chenは、Androidアプリユーザーの平均収益率を示しています。 毎日の視聴者は、最初の3日間で77％、1か月で90％、3か月で95％減少します。 同時に、最初の3〜7日間に多かれ少なかれ通常の起動にそれらをフックすることができた人々は、ユーザーを長期間保持することに成功します。 これを行うには、迷惑な通知をスパムするのではなく、初心者をアクティブにしてみてください。



明るく燃やします

コンテンツプロジェクトチームの同僚が、編集メトリック、フィード形式、編集ツール、ジャーナリストの会計に関する経験について語るブログを立ち上げました。 また、研究、ケーススタディ、ディスカッション、ディスカッションを公開するFacebookグループもあります。 最も興味深い出版物のいくつか：

• 素材のリソースまたはページへのトラフィック量は、編集作業の効率性について何も言及していません 。 実際、読者がコンテンツに熱心でなければ、トラフィックは無意味です。 優れたジャーナリズムは、トラフィックの量とヘッダーのCTRでは測定できません。 しかし、他の何かが可能です。
• オンラインジャーナリズムの主な課題 ：「あなたのための時間」の欠如。 「アテンションスパン」を短縮しました。

再購入マトリックスを使用した顧客ロイヤルティの測定

ジェフサウロは、顧客の再販データを使用してユーザーのロイヤリティを評価することを提案しています。 確かに、彼らはしばしば遅れて到着し、それらを数えるのはそれほど簡単ではありません。 トピックの続き：

• ブランドロイヤルティを測定する方法の概要 。

フロントエンドのプロジェクト、プロセス、およびチームの管理

リレー

リレーサービスを使用すると、Slackで設計について議論できます。 これは、Photoshop、Sketch、またはブラウザからレイアウトを簡単にエクスポートして、共同で議論するためのプラグインです。 ProductHuntの議論で、彼らはいくつかの類似物を持ってきました。







UX戦略

• Philip Hodgson氏は、UXがビジネスに大きな影響を与えるのを防ぎ、他の分野の「食器洗い機」としてサービスの役割を維持する6つのことについて述べています。 トップマネジメントのレベルでの十分なサポートの欠如や、UXの価値について組織を教育できないことなどの主要なことから始まり、貨物カルトへの情熱、過度の親密さ、学問の臨床事例で終わります。

-

• Michael Davis-Burchat, Daniel Szuc Josephine Wong , .

Zeplin

• Zeplin - , .

• .
• Thomas Lockwood .
• Fred Beecher «UX » .

製品管理と分析

MVP

• Michael Bamberger MVP . - , MVE, .. .

事例

How Google Finally Got Design

, Google. , Mathias Duarte, , Larry Page . .







未承諾の再設計

• NY Times .
• LinkedIn Flávio Argemi .
• VSCO Mac .

ケースの再設計

• Raluca Budiu NN/g UX- .
• Sana Rao Twitter .

トレンド

What Killed The Infographic?

Mark Wilson , . , - . , .



バーチャルリアリティ

• .
• , Cardboard Design Lab Google ustwo. , . 彼らがどれだけ燃やすかを考えると、大企業による購入の主な候補の1つです:)
• Jon Wiley, , , Cardboard .

映画のインターフェース

• Claudio Guglieri FI David Navarro . , - .
• , . .

• , Fast Co Design , T9- .

モノのインターネット

• Claire Rowland IoT .

Net-a-Porter Launches an App That Allows Women to Shop Together Online

Net-a-Porter , .. . - Pinterest, .





Patrick Mankins «Her».

一般的および専門的な開発のため

:



« , ( , ). , ( ), . , - „ - [ ]“, , ( , , ..), 3000 . , .



PS , - , Usethics, . , !»







UX Hero

UX Hero Tal Florentin, Jonathan Sketch. , $39 6 . OK/Cancel.







Motion And Meaning — A podcast about motion design for digital designers

Cennydd Bowles Val Head - . .



I Have No Idea What The Hell I Am Doing

Brad Frost . .



プロダクトデザイナー

• Sam Gerstenzang , Imgur .
• Jesse Weaver , . — .

Sketchnotes

• .

Khoi Vinhの本「How They Got There」からの抜粋

• Evan Sharp Pinterest .

Color Theory in Web UI Design: Practical Principles

UXPin -. , , Mozilla, Squarespace…

業界の人々と企業

5 Steps To Re-create Xerox PARC's Design Magic (From The Guy Who Helped Make It)

, SAP Communications Design Group Alan Kay . , Bret Victor. , Xerox PARC, . , SAP, .







Autodesk Hires Facebook's Director Of Product Design

Autodesk Maria Guidice, Facebook. . . トピックの続き：

• Kate Aronowitz, - Facebook, Wealthfront .

The secrets of the Chief Design Officer

, Jony Ive Design Counsil . The Guardian .



大企業によるデザインスタジオのショッピング

• Fast Co Design Lunar .

InVision

• Meerkat .
• Dribbble .

会議議事録

Upcoming Web Design Events (June-December 2015)

UX - 2015.







UX STRAT 2014

9月7〜9日に米国コロラド州ボルダーで開催されたUXSTRAT 2014会議の3日目のレポート。UX STRAT 2014およびUX STRAT Europe 2015のプレゼンテーションも利用可能になりました。



UI19ビデオ

2014年10月27〜29日に米国ボストンで開催されたUI19会議のビデオが公開されました。確かに、お金のため。



新鮮なリンクも同じFacebookグループで追跡できます。 特にGennady Dragun、Pavel Skripkin、Dmitry Podluzhny、Anton Artemov、Denis Efremov、Alexei Kopylov、Taras Brizitsky、Evgeny Sokolovのリンクを公開しているすべての人に感謝します。 レビューのおかげで、それらのおかげでより多くの資料が表示されます。

ニュースレターを購読する

手紙は月に一度届きます。