---
# System prepended metadata

title: UI設計
tags: [UI]

---

# UI設計 
##### 2020/07/20
###### tags: `UI`

---
## 概要
- 運指設定画面
- キーバインド設定画面
![](https://i.imgur.com/VqUz36p.png)


## 運指設定画面
### 画面要素
![](https://i.imgur.com/lDgIByZ.png)
- 上部：説明
- 説明下：ゲーム選択
- 中央：キーボード、指
- 中央２：マウス
- 下部：次へボタン

### 機能
- 指をタップして選択後、対象のキーをタップすることで色が変わる
- マウスも同様
- 元に戻すもあればよい

## キーバインド設定画面
![](https://i.imgur.com/3sXZHrN.png)
- 上部：説明
- 説明下：ゲーム選択
- 中央：キーバインド表
- 下部：戻るボタン
- 下部２：結果ボタン

### 機能
- D&Dで入れ替え
- 入力もできたらよい
    - 既に使用されているキーが入力されたら外す
    - 実際のゲームのキーバインド設定みたいに

## 特記事項
- 結果画面は後々
    - 入力結果を表示して共有するボタンがあるだけの予定
- 画面どっちが先かは要検討

## 参考
- [ゲームプルダウン](https://www.mousesensitivity.net/)
- [キーボードと指](https://happylilac.net/sy-keyboard03.html)