Aisea Management UI Design

Portfolio

New Management UI Design -Aisea-

adobe XDを使用し、新機能のプロトタイプとデザインの作成、利用目的のイメージためプロモーションビデオも作成

機能追加の内容

自社保有の船の管理ができたAiseaのweb管理画面をバージョンアップさせ、船の行先、到着予定時刻、オイルの消費量など詳細データの可視化を実現

さらに船内に人感センサーを配置し、操船者の体調管理を行い、遠隔でのサポートを可能にするコンセプトである

プロトタイプ

最近ではAdobe XDを使用してワイヤー作成し、そのままXDで作り込みをするケースが多くなってきました

新しい機能を利用する人は操船者ではなく、管理者側であるという点、自船の様々な情報がリアルタイムで閲覧できる点、動体センサーによって船内の様子がわかる点で、参考にするのはモビリティー関連のアプリやwebのUIであった。

また最近ではドローン操縦用のアプリも出ており参考にすることがあるが、テキスト表示サイズ、操作ボタンが小さすぎて、ある種独特の発展をしてきてはいるように思われる。定正的な印象はスタイリッシュではあると思うが。

船関連企業に従事する方がターゲットである以上、見にくい、小さいはNGで前衛的な操作方法も犬猿されるだろう。

デザイン案の作成

黒と青の2パターンではあるが、本来このくらいの大きさで見せるべき、というものを作成する。

1隻づつ船舶情報を打ち込むと自動的に船の大きさをsvgなどで反映され、情報打ち込みの苦労を解消させられるなどしたらユーザー満足度はあがるだろうが、webブラウザの負荷を考慮し現段階では実装しないことにした。

と、同時に船舶詳細画面はブラウザ全面に表示させるのではなく、右ペインに集約することになった。vue.jsでの開発実装済みのコンポーネントを使う方が時間短縮になるからである。こういうことはよくあること、何事にもバランスが必要だ。

 

consult us

困っていることを相談してみませんか?

なるべく早く返信します。

Time is Money

Sorry!! can not right click.