UXチームのMailChimp：パターンとSVGアニメーション[本の第5部]

[ TL; DR ]



[本の最初の部分 ]

[本の第2部 ]

[本の第3部 ]

[本の第4部 ]

[本の第6部 ]

[本の第7部 ]

[本の第8部 ]

パターンライブラリを理解する

フェデリコ・ホルガド



スティーブン・キーランとジェームス・ティンバーレイクによって書かれた「 Refabricating Architecture 」という本は、デザインに対する私の理解に大きな影響を与えました。 この本の著者は、建築を自動車、航空宇宙、造船産業と比較し、他の製造および設計産業の急速な変化とは対照的に、過去80年間にわたる建設プロセスのほぼ完全な不変性を（基本的な観点から）議論しています。



彼らは、伝統的な意味で、建設プロセスは、建設現場へのすべての必要なコンポーネントの配送とその後の組み立てで構成されると書いています。 建築家はサイト調査を実施し、必要な測定を行い、適切な図面を準備します。 さらに-ビルダーのチームは彼の仕事の結果を解釈し、さまざまな技術を使用してサイトを準備し、財団と協力し始めます。 建物の構造が整うとすぐに、彼らはコミュニケーションを行い、仕上げ作業に移ります。



キーランとティンバーレイクは、このプロセスを他の活動分野の対応物と比較しています。 たとえば、自動車産業では複数のプロセスが同時に組み合わされ、生産の最適化、コストの削減、生産される機器の品質の向上が可能になります。 自動車部品は1つのプラントのフレームワーク内で生産されるのではなく、サードパーティの請負業者に注文されます。 モジュラーアプローチは、造船および航空宇宙産業の両方で実証されています。



2013年にアプリケーションの再設計に取り組み始めたとき、プロセスとモジュールの同様の分類を適用することにしました。 その結果、交換可能な部品または「原子」で構成されるシステム、つまり最小のコンポーネントを取得する必要がありました。 大きなコンポーネントは、このような「原子」で構成され、アプリケーションのコアを構成する必要があります。 同時に、ページとアプリケーションサブシステムの構造と設計には一貫性が必要でした。



当社のパターンライブラリには、「原子」に基づく既製のコンポーネントを備えた基本要素があり、開発者は既存のシステムと一貫性のあるインターフェイスを作成できます。 次に、このライブラリの実用的なアプリケーションについて説明します。



練習する



再設計に携わった後、アプリケーションの最も人気のあるセクションであるコントロールパネルから始めました。 古いバージョンでは、単純なグリッドにデータを表示していましたが、スケッチとプロトタイプを使用した後、変更を加えることにしました。 私たちは2つのモードを導入しようとしました：美しいカードとより有益なグリッドを使って。 ユーザーのキャンペーンのほとんどが非常に似ているため、「視覚的」アプローチは機能しませんでした。 同時に、クライアントが属性によってキャンペーンを並べ替えることが非常に重要であることもわかっていましたが、これも「表形式」アプローチを除外していました。







このように、ラックシステムに到達し、アプリケーションのさまざまなセクションとの接続を確立することができました。 その結果、3つのセクションですぐに役立ちました。 並べ替えの代わりに、フィルター（適切な場合）を使用して、最終的にコントロールパネルの完成した基盤を得ました。 ラックシステムの開発に数か月を費やしましたが、多くの利点がありました。 アプリケーションの他のいくつかの部分を一度に再設計するのに時間を費やす必要はありませんでした。 以下は、キャンペーンおよびエクスポートセクションのモバイルバージョンです。これらの類似点は簡単に確認できます。 モバイルバージョンを考慮に入れて、わずか45分でzanalをエクスポートするためのコントロールパネル用のラックシステムの適応。







以前は設計の観点から十分な注意が払われていなかったアプリケーションのいくつかのセクションにラックシステムを適用しましたが、これらのセクションを設計コンセプト全体に統合し、非常に控えめな画面スペースでも作業を確保できるパターンでした。 このアプローチのもう1つの利点は、チームの人的資源を分散し、ラックシステムとページ構造全体、ナビゲーションなどの両方で並行作業を整理できたことです。 チームの一部は基地で働き、別の部分は設計に携わり、誰もが何が起こっているのかを知っていました。



他にやったこと



このアプローチを使用することで、ラックシステムだけでなく、アプリケーションの実質的にすべての部分（フォーム、ボタン、テーブル、エディター要素など）のモジュール性を確保することができました。 作業の最初の段階では、新しいアイデアごとに別々のUI要素を準備するのにすでに慣れていたとき、そのような概念で考えることは非常に困難でした。 したがって、比較的混oticとしたCSS、異種のデザイン、および要素のソフトウェア実装の違いに遭遇しました。



費やした時間という形での投資は報われ、他の業界からの経験を借りることで多くのことを学びました：モジュール式アプローチ、開発プロセスの組織など。 その過程で、私たちのチームは絶えずアイデアを交換しています。フロントエンドの開発者は常にエンジニアと連絡を取り合っています。 デザイナーは、垂直および水平のリズムの原理を理解するのを助けてくれたため、ページレイアウトを簡素化できました。 これで、バックエンドの開発者は、再利用できるユニバーサルシステムを準備できます。 もちろん、これは開発時間の短縮に役立ち、標準インターフェースの状態を理解するのに役立ちます。



私たちが達成できた正確さと一貫性の全体的なレベルは、私たちを喜ばせるだけでなく、お客様が問題をより効果的に解決することも可能にします。 現在、標準化されたシステムを使用して、さらなる開発を保証しています。 他の生産分野を研究することで得た知識に基づいて、私たちは正しい軌道に乗っているようです。

SVG、座って、5！

カレブ・アンドリュース、アルバロ・サンチェス



長い間、お客様がアプリケーションを使用するプロセスを慎重に研究してきました。 私たちの製品をより良くするためだけでなく、それを使って作業する過程で生じる顧客の感情や考えを一般的に理解するためにも。 このような経験に基づいて、ニュースレターの送信は締め切りが厳しく、起こりうるエラーを排除する必要があるため、かなり刺激的なプロセスであることを理解しています。 購読者に手紙を送る前に人々がしていないこと：彼らは唇を噛み、手のひらをこすり、時にはその後ほとんど汗をかきます。 私たち自身がこのすべてを通り抜けて、独自のUXニュースレターに取り組んでいます。



このプロセスの感情的なコンテキストを理解し、何が起こっているのかを理解してもらうことで顧客をサポートしたいと考えました。 私たちは、フレディ（MailChimpのマスコット）がこれを手伝ってくれると判断しました。アイデアによれば、このディスパッチは発送をうまく処理したすべての人に「5つ」を与えます。 以前は、静的な手のひらを表示し、 SVGアニメーションの助けを借りてこの瞬間を少し活気づけることに決めました。



SVGアニメーションは新しいテクノロジーではありませんが、最近多くの人がSVGアニメーションを使用できるようになりました。 ストーリーを構成するために、SVGを使用するための準備と、Freddyの手のひらの例を使用した実装という2つの部分に分けました。



カレブ：より良いSVG



ファイルを準備することから始めましょう。 最初に、レイヤーの階層を理解する必要があります。



これは、IllustratorでSVGイラストを操作する際の重要な要素です。 アニメーションフレームをグループに分割し、各イラストに不要なものがなく、最も必要なものだけになるようにしました。 グループに含まれる要素が意図されている理由を理解し、テキストエディターでそれらのパスを正しく記述するために、グループの名前の選択に注意することが重要です（スクリプトを記述するプロセスで行う必要があります）。



余分なアンカーポイントを削除する



各レイヤーに含まれるポイント、コンター、およびそれらのグループが少ないほど、SVGコードが「簡単に」実行されます。 また、佐藤博之からIllustrator用のスクリプトセットをインストールする場合、[ファイル]> [スクリプト]> [アンカーポイントの削除]タブを開くだけで、不要なアンカーポイントを削除できます。



マスクは良いが、適度にのみ







上の図では、フレディの「ギブファイブ」ジェスチャーが、マスクを使用せずに1つのSVGファイルに結合された3つの要素グループから作成されました。 これらのグループはアニメーションフレームであり、非表示にしたり、逆に必要になったときに表示したりできます。 その後、SVGアニメーションをより制御された「クリーン」にするためのマスクを作成することにしました。



Illustratorで編集をオフにする



次に、Illustratorから図面をSVGファイルとしてエクスポートする必要があります。 この点を見逃すのは簡単です。SVG形式でファイルを保存するときは、[オプション]タブの[Illustratorで編集機能を維持する]オプションを無効にすることを忘れないでください。 これにより、結果のファイルをはるかに簡単にすることができます-ブラウザにこれらの機能は必要ありません。 このような手順は、最終バージョンのイラストでのみ行う必要があります。ご想像のとおり、その後、ファイルをIllustratorで開いて再度編集するのはそれほど簡単ではありません。



輪郭に対する形状



テキストエディタでSVGファイルを開き、生成されたコードを評価できます。 この例では、SVGファイルに2つの要素（長方形とアウトライン）が含まれています。 理論的には、これらは2つの同一の長方形ですが、それらを生成するコードは根本的に異なります。 輪郭を操作するのが珍しい場合は、コマンド「オブジェクト」>「解析」を使用して輪郭を簡単に変換できます。



おわりに







それほど複雑ではありませんか？ 少し思慮深い準備と、注意を引き、ブラウザの速度を落とさないSVGアニメーションの作成は、非常に簡単であることがわかりました。



アルバロ：ジェスチャーを隠すもの「5



CalebがSVGアニメーションをどのように準備したかを説明しました。次に、さらに進んで、次に何をしたかを説明します。 説明を簡略化しましたが、最後に、最終的なアニメーションのすべてのコンポーネントを表示したい場合に備えて、ソースコードへのリンクを示しました。



準備する



Freddyのアニメーションでプロジェクトを始めたばかりのとき、彼らはAfter Effectsで作成したプロトタイプを私に与えてからGIFにエクスポートしました。 カレブは、フレディの足、毛皮など、Illustratorのプロトタイプからオブジェクトを再作成するのに役立ちました。 各要素を適切なレイヤーに配置した後、それらをSVGファイルとしてエクスポートしました。 その結果、フレディの足の画像ごとに1つずつ、3つのSVGファイルを取得しました。 次に、作成した画像をアニメーション化する方法を考えました。



JavaScriptライブラリーに少し悩んでいたので、Snap.svgで作業することにしました 。 スナップは、マスクの作成、トリミングと整列、パターンの作成、グラデーション、要素のグループ化などの機能をサポートしています。 また、シンプルで直感的なアニメーションAPIも提供します。



アニメーション機能の実装-「mina」（「anim」[逆に「animation」という単語から）です）はAnimationFrameリクエストを使用するため、Paul Irishが説明したように、アニメーションはブラウザで失敗することなく再生されます。



（ところで、アニメーション要素にAnimationFrameクエリをサポートしないライブラリを使用する場合は、「 レイアウトスラッシング 」などの現象の可能性を考慮してください。JavaScriptが要素をDOMに繰り返し追加および削除し、ブラウザの速度が低下する場合に発生します） 。



モーションアニメーション



私は、フレディの足の3つの別々の画像から「5つを与える」ジェスチャーのアニメーションを作成しました。それぞれの画像は、異なる（足）位置を反映しています。 最終画像を異なる位置を受け入れる単一のオブジェクトのように見せるために、ある位置から別の位置への「スムーズな」トランジションを作成する必要がありました。 これを行うために、ステップバイステップのアニメーション手法を適用し、3つのメイン画像を追加の「遷移」に接続しました。 （なぜ単一の画像をアニメーション化しないのですか？フレディの羊毛の足のすべてのポイントを考慮し、各位置での足の「ねじれ」を数え、調整することは、厳しいプロジェクト時間の文脈では複雑すぎることが判明しました）。



3つのイメージすべてをダウンロードするために、Snap.load関数を使用しました。 最初に、各画像に対して個別にこの関数を呼び出しました。 その結果、最終的な画像はFirefoxでかなりうまくアニメーション化されましたが、Google Chromeのアニメーションには問題がありました。 最終的に、Snap.load関数を呼び出した回数に関係なく、Firefoxはすべての遷移と初期設定値を「認識」したことに気付きました。 ただし、Chromeでは、Snap.loadを呼び出すたびに独自の表示領域と座標系を持つ新しいSVGフラグメントが作成されるため、移行情報と設定値は保存されませんでした。 すべてのソースマテリアル（フレディの足の位置の3つのバリエーション）を1つのSVGに保存することでこの問題を解決したため、3つではなく1回だけ関数を呼び出す必要がありました。



次のステップは、アニメーションの最終バージョンで要素が表示される順序を決定することでした。







これを実現するには、Snap.svg関数を使用して要素をグループ化する必要がありました。 たとえば、このようなグループ化の場合：

// Order of grouping is important!!! // s = SVG canvas created by Snap var group = s.group( circleBG, hand1, hand2, hand3 );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グループ化は、スタック上の要素の順序も決定します。circleBG要素は下部にあり、hand3は上部にあります。



次に、指定されたグループにマスクを作成して適用しました。これにより、要素は、マスクで定義された輪郭（この場合は円の内側）の「内側」でアニメーション化されました。



次のようなマスクを作成しました。

 // Create a circle at x:200 and y:200 // and 200px radius circleMask = s.circle( 200, 200, 200 ); // Fill with white circleMask.attr({ fill: "#FFFFFF" });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グループの要素にマスクを適用するために、マスク属性を追加しました（グループ）：

 group.attr( {mask: circleMask} );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マスクを作成して適用したらすぐに、各要素の位置を設定し、最終的な画像に必要な要素を表示しました。 「Give Me Five」ジェスチャでは、アニメーション化した3つの要素を次々と異なる間隔でアップロードしました。



変換ラインを使用して、足の位置をそれぞれの位置に設定します 。

 // Initialize position. arm1.transform( "s0.6r-30t-100, 280" );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各文字はコマンドです。「s」はスケーリング[「scale」]、「r」は回転[「rotate」]、「t」は翻訳です。



この表記を使用して、要素arm1を40％小さくし、-30度回転し、マスクの境界の外側に配置して、見えないようにしました。



同様のコマンドを使用して要素arm2およびarm3を初期化しましたが、それらを非表示にして、インジケータ「不透明度」の値を0に設定しました。

 // Set opacity to 0 arm2.attr( {opacity: 0} );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素の連合



これらの操作を完了すると、画像をアニメーション化し、それらの間のトランジションを作成し始めました。 ここから楽しみが始まります。



Snap.svgにはAnimate機能があります。 彼女は次の属性を受け取ります。

 Element.animate( attrs, duration, [easing], [callback] );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「5」ジェスチャの最初のアニメーションの例を次に示します。

  arm1.animate( {transform:'t-50,60'}, 400, mina.backout, function(){ // callback code here } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

関数の最初のパラメーターとして変換属性と新しい値を使用して、X軸に沿って位置-100pxから-50px、Y軸に沿って280pxから60pxの要素arm1の動きをプログラムしました。



2番目の属性（400）は、アニメーションの合計時間（ミリ秒）です。



3番目の属性（mina.blackout）は、mina.linear、mina.easein、mina.easeoutなどに類似したタイミング関数です。 mina.blackout関数は、「スイング」効果を作成し、動きをより自然にします。



4番目の属性は、アニメーションが終了するとすぐに実行されるコールバック関数です。 これにより、あるアニメーションを別のアニメーションにバインドし、一貫したアニメーションシリーズの作成を制御できるため、これは非常に重要です。



たとえば、要素arm1とarm2を切り替えるとき、初期変換のコールバック関数を使用してarm1を非表示にします。 プロセスが終了するとすぐに、arm1要素が表示されなくなり（表示：なし）、arm2要素のアニメーション化プロセスが開始されます。



これはすべて非常に迅速に発生します。最初の要素の「減衰」は30ミリ秒続き、2番目の要素の出現は10ミリ秒です。



指定されたコールバック関数を記述するコードは次のとおりです。

 arm1.animate( {transform: 't-50,60'}, 400, mina.backout, function(){ //400ms arm1.animate( {opacity: 0}, 30, mina.linear, function(){ // hide arm1 arm1.attr( {display: "none"} ); // Chain/Start // animation for arm2 _highFive.animate02(); // fadein 10ms }); }, 100);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「5」ジェスチャのアニメーション用に作成されたコードのより詳細なレビューについては、 元のバージョンを個別に学習できます。



[ 本の第6部の翻訳 ]