トピック画面のUI改善

[taratara10]

https://twitter.com/1amageek/status/1580711406319853568?s=20&t=qT-DJ6hSslzQ59iMPWWlPw

モバイルAppの上半分は基本もうUI捨てる気持ちでデザインするくらいでちょうどいい。 まず指が届かないし。デカいヘッダーでその画面は何者なのかを認識させるために利用した方が効果的

[taratara10]

てしかに！

[taratara10]

paypayとかsuicaもそう

[taratara10]

menuも下にあった方がいいのか？ ヘッダーバーは別？

[taratara10]

https://twitter.com/MengTo/status/1583201753461559296?t=-WCX2iuw816T8oE4jBS22g&s=19

マルチモーダルなFloat Action Buttonがよさそう！

[taratara10]

• [ ] collectionへの動線を作る

[taratara10]

• 洗礼されたミニマルデザインにしたいので、中心の○にfabを持たせたい
• transparentで見た目を変わらないようにしたほうがいいんだろか
• materialに則って押せるならbutton使え

[taratara10]

お～ https://dribbble.com/shots/4892693-Floating-Action-Button

丸いのはmaerialって感じですき https://dribbble.com/shots/16612543-File-manager-mobile-app

これ凄いよな～ ふわふわloop animationしたいかも https://twitter.com/MengTo/status/1583201753461559296

[taratara10]

tutorialで右スワイプを示してるから「→」はいらないのか 「+」とかmenuで良さそう でか、最後のやつめっちゃイカすので、dialogベースでやってみたいな 基底画面がちょっと縮小するとオシャレダイナミズム

• liquid actino button
• https://github.com/yoavlt/LiquidFloatingActionButton
• iOSっぽいのか？androidっぽくはない
• 公式doc
• https://developer.android.com/jetpack/compose/animation?hl=ja

[taratara10]

やってみる

[taratara10]

構成要素

背景の白い円

• 高速でパッと広がる　簡単

action button

• 中心座標からθで移動
  • boundするanimation
  • shape
  • 結合lerpは無理なのでパス
  • アイコンの位置もisolateしてるとイカすけどさすがにパス
  • 意外とシンプルかも

baseView

• ちょっと後ろにいく
  • z-indexのhight動かせばいいんかな
  • padding挿入でも良さそう
  • 動くのがcardくらいしかないのでね～

中心円

• • -> x にするか、、、？
  • rippleみたいな波紋？
  • https://at-sushi.work/blog/50/

[taratara10]

実装してみる

• dialogは難易度高い　位置がずれる
• 背景黒くしたいかも
  • buttonも暗くなるよな～
  • やめよ　なるシンプル
  • ボタンって何個必要？
  • メモ
  • favは外だしでいい
  • collection
  • share
  • いったん3つで
  • subButtonの座標
  • 極座標使おうかと思ったけど、3つならsinでradiusから(x, y)求めればいいな。
  • https://cubic-bezier.com/#.27,1.16,.29,1.06
  • cubingをGUIでいじれるこのサイト凄すぎ

[taratara10]

• uiできたんで、お昼おわったらstateHoistingでonClickながすとこから

• bottomにしたい場合どすれば

  • offset = 下からndp
  • bottomCirleの方を調整して事なきを得た

• あ～やっぱ頻繁にデザイン変えたいからvector外だししとくと便利だな～～～

[taratara10]

天才 完全に理解した