作為 Follow 的核心開發者，經過了三個多月的打磨，或者可以在這裡講講其中的一些設計理念。
🧡 Next generation information browser.
圖標轉換#
在 Follow 中，我們使用了大量圖標，在一些場景下，狀態的切換會伴隨著圖標的切換。
為了讓圖標轉換的過程不顯得突兀，我們在合適的地方選用不同的方式進行轉換：
- 在「熱點」中，圓形圖標的狀態轉換：
- 在分組已讀中，採用縮放的方式進行轉換，這是兩組不同類型的圖標。
同樣的也應用在很多地方的 CopyButton 中，比如：
隨便再提一個小細節，你上面看到的在代碼塊中的 CopyButton 的背景色是由當前代碼塊的決定的。上圖的代碼為 TypeScript 因此它是深青色的。
- 除此之外還有根據透明度進行轉換的，目前場景不多。只用在 Feed 邊欄 SortButton 中。
Peek Modal#
Peek 是一種很好用的預覽的互動方式。你可以不用轉到原文就能透過 Modal 預覽到原文，完成之後也可以很方便的跳轉到原文或者選擇回退。
這個互動應用在 AI Summary 提供的「熱點」模塊中。
除此之外的，在社交媒體中，Peek 的方式有所不同，由於社交媒體的信息量較少，則採用了通知式預覽。
過渡原則：從何而來，到何而去#
在 Follow 中，我們希望給用戶帶來一種「優雅」的體驗，這種體驗來源於我們對細節的把控。
在動畫的過渡上，我們希望做到「從何而來，到何而去」。
例如 Modal 的展現形式中，既然是從微微彈跳中出現，就從那裡回去。
你可以在實際的 Demo 中體驗：
合理運用動效的前提是使用彈性（Spring）動畫，只有越符合物理世界的運動規律，才能給人以流暢自然的感覺。
在 Follow 中，你能看到非常多的例子。這些都是得益於 Framer Motion 優秀的動畫庫在背後的支撐。
層疊式模態框#
很多時候，頁面上會出現多個模態框，在模態框中喚出的模態框，會在當前模態框之上。如何處理這種層疊關係，並且又讓用戶知道當前處於哪一個層級，同時下層的內容也能被感知。
我們使用了底層模態框的微微縮放，來表示層級的變化。
同時，層疊的模態框下層內容會被遮擋，所以我們還應用了可拖動的範圍，類似於桌面型應用的對話框。
類似的，在設置界面，模態框可以變形為窗口，不僅可以拖動，還可以調整大小。此互動更加利於在修改設置之後看到 UI 的變化。
減弱高度變化帶來的突兀感#
為了減少內容高度變化帶來的突兀感，在 Follow 中大量使用了 AutoResize 組件，通過對高度的動畫，來減少頁面抖動的感知。
類似的，在 Tab 的切換中：
又比如「熱點」：
更多的物理效果#
上面提到了，運用彈性動畫，可以讓人感覺到很流暢。
不只在動畫中，在其他地方也有運用。例如在切換瞄點時的頁面滾動。
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