shuhelohelo’s blog

Xamarin.Forms多めです.

自作アプリのUIを改善する1

これは座標を指定するとそこまでの方角と距離を表示する自作アプリです.

f:id:shuhelohelo:20200112203438p:plain

このUIを少しでも今風にしたいと思います.

ダークモードのことなど考えず,白を貴重に角を若干丸くしたカード風UIを多様していけば自ずとおしゃれになるのではないかと甘く考えています.

dribbble.com

そうそう,こんなふうに若干影をつければいいんでしょ?Neumorphismっていうんでしたっけ?

まずは背景を白に

Neumorphismのイメージを検索してみると,全くのWhite,というわけではないようなので,カラーピッカーで平面部分の色を拾ってみる

f:id:shuhelohelo:20200112204804p:plain

「F2F3F7」ということだったのでこれを使ってみる.

f:id:shuhelohelo:20200112204942p:plain

まあ現時点では背景白にしかみえない.まあいいでしょう.

タイルを影付きFrameに

以下の記事によって影付きFrameを使えるようにしておく.

shuhelohelo.hatenablog.com

何も考えず,影付きの白色パネルにしてみた.

f:id:shuhelohelo:20200112212147p:plain

色々配置がおかしくなったけれど,パネルだけ見ればなんだかいい感じになった.というか,100倍マシになった.

タイル内の配置を整えるなど

した.

f:id:shuhelohelo:20200112223717p:plain

いいじゃないか.ただ,影をつけただけなのに.

コンパス部分だけ丸くして独立させてみたり

f:id:shuhelohelo:20200112230345p:plain

いいぞいいぞ.

目的地までの距離をコンパスの中に入れる

f:id:shuhelohelo:20200113003428p:plain

ハイライトを入れて目盛りを削除

f:id:shuhelohelo:20200113011217p:plain

おわりに

全体の構成はほとんど変わっていないけれど,Frameにしたらそれっぽくなった.

困ったらとりあえず丸めてハイライト入れとこう.

f:id:shuhelohelo:20200113012426p:plain

ソースコード

github.com