フォローのコア開発者として、3 ヶ月以上の磨きを経て、ここでいくつかのデザイン理念についてお話しできるかもしれません。
Github Repo not found
The embedded github repo could not be found…
アイコンの変換#
フォローでは、多くのアイコンを使用しており、いくつかのシーンでは、状態の切り替えがアイコンの切り替えを伴います。
アイコンの変換プロセスが唐突に感じられないように、適切な場所で異なる方法を選択して変換を行います：
- 「ホットスポット」では、円形アイコンの状態変換：
- グループの既読では、スケーリング方式で変換を行います。これは異なるタイプのアイコンの 2 つのグループです。
同様のことが多くの場所の CopyButton にも適用されています。例えば：
もう一つ小さな詳細を挙げると、上のコードブロックに見える CopyButton の背景色は、現在のコードブロックによって決まります。上のコードは TypeScript なので、深青色です。
- さらに、透明度に基づいて変換するものもありますが、現在のシーンは少ないです。Feed サイドバーの SortButton でのみ使用されています。
ピークモーダル#
ピークは非常に便利なプレビューインタラクション方式です。原文に移動せずにモーダルを通じて原文をプレビューでき、完了後も簡単に原文にジャンプしたり、戻ることができます。
このインタラクションは AI サマリーが提供する「ホットスポット」モジュールに適用されています。
それ以外では、ソーシャルメディアではピークの方式が異なります。ソーシャルメディアの情報量が少ないため、通知形式のプレビューが採用されています。
遷移の原則：どこから来て、どこへ行くのか#
フォローでは、ユーザーに「優雅な」体験を提供したいと考えています。この体験は、私たちの細部へのこだわりから生まれています。
アニメーションの遷移において、「どこから来て、どこへ行くのか」を実現したいと考えています。
例えば、モーダルの表示形式では、微妙にバウンドして現れるので、そこから戻ります。
実際のデモで体験できます：
動きの効果を合理的に利用する前提は、バネ（Spring）アニメーションを使用することです。物理世界の運動法則により近いほど、滑らかで自然な感覚を与えることができます。
フォローでは、多くの例を見ることができます。これらはすべて、Framer Motionの優れたアニメーションライブラリの支えによるものです。
ス superimposed modal#
多くの場合、ページ上に複数のモーダルが表示され、モーダル内で呼び出されたモーダルは現在のモーダルの上に表示されます。このような重なりの関係をどのように処理し、ユーザーに現在どのレベルにいるかを知らせ、同時に下層の内容も認識できるようにするか。
私たちは、下層モーダルの微妙なスケーリングを使用して、階層の変化を示します。
同時に、重なったモーダルの下層の内容は遮られるため、デスクトップアプリケーションのダイアログのように、ドラッグ可能な範囲を適用しました。
同様に、設定画面では、モーダルがウィンドウに変形し、ドラッグできるだけでなく、サイズを調整することもできます。このインタラクションは、設定を変更した後に UI の変化を見るのに役立ちます。
高さの変化による唐突感の軽減#
内容の高さの変化による唐突感を減らすために、フォローでは AutoResize コンポーネントを多く使用し、高さのアニメーションを通じてページの揺れを感じにくくしています。
同様に、タブの切り替えでも：
例えば「ホットスポット」：
さらなる物理効果#
上記で述べたように、弾性アニメーションを使用することで、非常に滑らかに感じることができます。
アニメーションだけでなく、他の場所でも使用されています。例えば、ポイントを切り替えるときのページスクロール。
import=https://cdn.jsdelivr.net/npm/@innei/[email protected]/dist/components/SpringScroll.js
name=MDX.SpringScroll
height=550
動的効果の軽減#
遷移アニメーションは良いですが、大量のアニメーションを使用すると、デバイスのバッテリー持続時間に問題を引き起こすことがあります。また、遷移アニメーションが好きでない人もいます。
動的効果を軽減する中で、大部分のアニメーションの移動は透明度の変換に変わりました。
さて、今日はここまでにしましょう。次回はさらにいくつかの詳細を共有します。
そういえば、多くのデザインの詳細は Shiro から来ているので、皆さんもぜひ注目してください。
📜 A minimalist personal website embodying the purity of paper and freshness of snow.
この記事は Mix Space によって xLog に同期更新されました。原文リンクは https://innei.in/posts/design/design-concepts-in-follow-app