最近、
振り
前提
前提と
プロトタイプの
作成対象
プロトタイプの作成対象は、 エンタープライズ向けの SaaSの 業務システムに なります。 アプリケーションの
情報
アプリケーションはVue2で 作られており、 UIフレームワークと してVuetifyを 利用しています。 どのような
視点でまとめているか?
フロントエンドエンジニアの視点で、 Webデザイナーと フロントエンドエンジニアが お互いに 気に 留めておいた 方が いいことを まとめています。
このような視点を 持つWebデザイナーの 方は 強い人とも 考えています。
すり合わせした 方が 良かった こと
以下、
画面プロトタイプ作成時の インプット資料の すり 合わせ
画面プロトタイプ作成の
組織に
画面名と
画面URLと 画面の 役割を 一覧化した 資料
言葉だけだと、どの 画面の 話を しているのかわからないと いう 問題が 起こりました。 簡易的な
ER図、 CRUD、 DFD
新規機能を作成する ケースで、 データモデルの 認識合わせが 必要な ケースが ありました。
その際に 作成したのは、 ER図ですが、 CRUD、 DFDが 必要に なる ケースも ありそうです。
デザイナーの方も システム開発の 要件定義、 基本設計工程の ドキュメントの 作成経験が あると 望ましい 気が します。
inputタグの インタラクションの 把握と 重要な ポイントの 指示
以下、
input:入力欄(フォーム入力)要素 - HTML: HyperText Markup Language | MDN
Figma、
HTMLの
個人的に
ボタンなのか?リンクなのか?
ボタンであるのか?リンクであるのか?それぞれ挙動が 異なる ため、 実装時に ポリシーを 決めた 方が 良さそうです。
また、どちらでの 実装も されない ケース(クリックできる divが できる …)も あり タグの 指示も した 方が 良い気が します。
リンクとボタンを 「押せる 」だけで デザインしない チェックボックスなのか?トグルスイッチなのか? どちらも
似たような 機能は 実装できるので、 一般的に どのような 使い分けを するのか 把握を して おかないと 認識齟齬の 原因と なります。
トグルスイッチのガイドライン – U-Site
Vuetify(というかMaterial-UI)には、 Toggle Buttonの コンポーネントが あり、 Toggle Buttonを 比較的簡単に 実装できます。
Button toggle component — Vuetify
UIフレームワークの 提供機能で 実現できるか?
UIフレームワークの
デザイナーも
フレームワークで
画面遷移の 挙動と、 画面認識の 共通理解
Vue.jsを
1. MPAのようなaタグに
2. vue-routerの
3. vue-routerの
4. vue-routerの
5. vue-routerをv-if
、v-show
などを
画面遷移の
バリデーションライブラリの 把握
UIフレームワークと
拡大表示時に 画面操作が 行えるか?
これは
拡大表示時の
画面が画面が<wbr>崩れているけど<wbr>使える
は
スコープ付きC SSを 記述できる
これは、
SFC CSS 機能 | Vue.js
Vueの
使いすぎは
参考
- Different History modes | Vue Router
- Scoped CSSに
おける CSS設計手法 - ICS MEDIA - Navigation API に
よる 「JS での 画面遷移」と SPA の 改善 | blog.jxck.io
作成対象の
コメント