トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

コメント・チャット入力UI

Slack

f:id:bibinbaleo:20210118130619p:plain

入力したら右下のSendマークがアクティブになる

f:id:bibinbaleo:20210118130622p:plain

Slack通話だとこんな感じ

f:id:bibinbaleo:20210118130919p:plain

zoom

Enterを押したら入力される

f:id:bibinbaleo:20210118131034p:plain

f:id:bibinbaleo:20210118132934p:plain

Teams

f:id:bibinbaleo:20210118142413p:plain

GoogleMeet

Sendマークがある

f:id:bibinbaleo:20210118131545p:plain

入力したらSendマークがアクティブになる

f:id:bibinbaleo:20210118131548p:plain

ちなみにチャットを表示するUIはこんな感じ

f:id:bibinbaleo:20210118131542p:plain

Cluster

スマホとPCで違う

f:id:bibinbaleo:20210118130802p:plain

スマホはここを押したらスマホのキーボードが出て、キーボードの改行などを押したら送られる。アプリ側のこのInputFieldには文字は表示されないしボタンも使わないので飾り。

f:id:bibinbaleo:20210118130800p:plain

Hubs

ーーー

UIが新しくなった

f:id:bibinbaleo:20210125154748p:plain

チャットと参加者とオブジェクト一覧は同じウィンドウを切り替えて表示する感じ

f:id:bibinbaleo:20210125154822p:plain

f:id:bibinbaleo:20210125154737p:plain

ーーー

sendマークある。Enterでも押せる

f:id:bibinbaleo:20210118134106p:plain

コメントは出ては消える。

f:id:bibinbaleo:20210118131209p:plain

複数行も対応している

f:id:bibinbaleo:20210118131241p:plain

スマホも同じようなUI

f:id:bibinbaleo:20210118134512p:plain

f:id:bibinbaleo:20210118131223p:plain

スマホは改行を押したらsendになってしまうので複数行は無理そう~

アイコン

sendアイコンはマテリアルデザインにある。紙ヒコーキなの面白いよね~今日気づいた

f:id:bibinbaleo:20210118135527p:plain

https://material.io/resources/icons/?search=send&icon=send&style=twotone

コメントマークはここ

f:id:bibinbaleo:20210118135847p:plain

https://material.io/resources/icons/?search=commen&icon=send&style=baseline

 

ちなみにはてなブログのコメント

f:id:bibinbaleo:20210118142701p:plain

 

bibinbaleo.hatenablog.com