UIデザインを説明する文法
UI設計への正式な文法アプローチを知っている人はいますか？私は現在100ページ以上のワイヤーフレームを使用しており、共通点を排除し、再利用可能なコンポーネントを特定しています。
文法のアイデアに興味があります。たとえば、BNFのページは次のようになります。
<page> ::= <nav-bar> + <title> + [<alerts>] + <data-grid>
そしてデータグリッド：
<data-grid> ::= [<filter-bar>] + <table-header> + <table-rows> + [<edit-pane>]
私の動機は、一般的なパターンを見つけ、UI仕様に形式化することです。
更新
短い答えは「いいえ」のようです。文法を使用してUIを記述する正式なアプローチはないようです。ただし、以下の回答とさらなる調査に基づいて、私は独自のソリューションを導入しました。
文法をXMLスキーマとして作成しましたが、構文が単純化されているため、RELAX NGを使用しています。
単純なページスキーマを視覚化する方法を次に示します。
次に、オートコンプリートを備えたXMLエディターを使用して、UIページの説明を支援します。
これは非常に生産的であることが証明されています。
次に、XMLページのUIの説明をHTMLモックアップに変換する簡単なスクリプトと、レンダリング用のCSSを用意します。
最もエキサイティングな部分は、プログラムでヒューリスティック分析を適用できることと、モックページのセット全体にさまざまなUIレイアウトをグローバルにすばやく簡単に適用できることです。これにより、UIの迅速な変更と反復が可能になります。
興味深い質問です。
はい、UIデザインには文法が存在しますが、いいえ、あなたが説明しているレベルほど高いレベルのものは見たことがありません。 jinja2 や Django のようなテンプレートシステムは、UIの記述に適した ドメイン固有の言語 （DSL）の文法を実装します。しかし、これらの文法は高度に専門化されており、抽象的な設計よりも具体的な実装に重点を置いています。
一般化されたプログラミング文法をUIの記述に適合させることには、いくつかの問題があります。例えば：
- レイアウトの順序はUIにとって重要なので、「+」などの演算子は非可換です（たとえば、ヘッダー+フッター≠フッター+ヘッダー）。
- インタラクティブなUIは外部の コントローラロジック に依存することが多いため、レイアウトが外部のアプリケーションロジックに依存している場合、適切な カプセル化 が問題になります。
- UIにはオブジェクトの2Dまたは3Dの順序が含まれているため、多次元レイアウトを説明する適切な演算子のセットを見つけるのは困難です。
それにもかかわらず、UIを記述するために高水準言語を使用することはかなり興味深いかもしれません。上記の理由から、おそらくDSLである必要があり、次のプロパティが必要になると思います。
オブジェクトの向き。多重継承と拡張は、UIの一般的な概念パターンです。たとえば、
PageはHeader、BodyおよびFooterを含む基本クラスです。HomePageやShoppingCartPageのような特定のページを作成できれば、この基本オブジェクトを再定義する必要なく継承および拡張できます。宣言的*。 UIは宣言文法でうまく機能します。
CalendarWidgetを含めて、後で指定できるようにする必要があります。高度に抽象化された。上記のカプセル化の問題にもかかわらず、UIは高レベルの抽象化に特に適しています。したがって、
PageやShopping cartのような概念は非常に抽象的なレベルで記述および操作でき、これは計画または（あなたの場合は）共通因数分解に役立ちます。
高レベルの抽象DSLについて話しているので、独自のDSLを作成することはそれほど難しくありません。もっと具体的で詳細なものが必要な場合は、ジンジャのようなテンプレート言語を検討します。しかし、あなたがしていること（共通の因数分解とアーキテクチャー）については、UIを説明するためのO-O DSL規則を思いつくのは簡単だと思います。私は次のプロジェクトでこれを試してみるかもしれません...ストーリーボードをオブジェクト指向のテンプレートに翻訳する興味深いアプローチです。