web-dev-qa-db-ja.com

HTMLベースのモバイルアプリケーションのユーザーインターフェイス設計

現在、HTMLを使用してコーディングされているレスポンシブモバイルアプリのユーザーインターフェースの設計に取り組んでいます。これは私と私のエンジニアリングヘッドにとって初めてのモバイルアプリ開発プロジェクトであり、さまざまな理由により、ネイティブAndroidまたはネイティブiOSアプリをコーディングするのではなく、htmlでコーディングすることを選択しました。

私の質問は：HTMLベースのモバイルアプリのUIデザインに関するガイドラインはありますか？私はGoogleのマテリアルデザインガイドラインを詳細に検討し、これらを私の設計と仕様で可能な限り使用していますが、これは多くの理由で使用できませんでした。その一部を以下に説明します。

  1. マテリアルデザインでは測定単位として「dp」を使用しますが、これはhtmlでは使用されていません

  2. マテリアルデザインで提案されている多くの使用パターンは、htmlライブラリでは簡単に利用できません。たとえば、フローティングアクションボタンプラグインはhtmlですぐに使用できないため、各スプリントの最後にスペックシートと最終製品との間の忠実度が失われます。

デザインの観点からのHTMLベースのアプリのリソースに関する提案は、非常に役立ちます。私はGoogle検索を2、3回試しましたが、具体的なものは思いつきません。

mobile-applicationhuman-interface-guidelinehtml5
3
Manjari Sheel

実際の回答を書くつもりはなかったのですが、私のコメントが長すぎたので、代わりに回答にします。

UIデザインのガイドライン

一般に、ネイティブアプリにできるものはすべてモバイルアプリにもなります。 「一般的な」部分は、主に以下によって制限されます。

  1. 開発者のスキル
  2. そのWebアプリは少し遅いので、素晴らしい移行を行うことは完全に可能ですが、ローエンドのモバイルデバイスの速度が大幅に低下します。言い換えれば、移行をやりすぎないようにしてください。

したがって、次に、従うべきスタイルを決定する必要があります。あなたがモバイルWebアプリケーションを開発しているとき、私は主な目標の1つが自然なクロスプラットフォーム体験であることを想定しています。その場合、覚えておくべき最善のことは、一部のユーザーにとっては奇妙に感じるかもしれませんが、大多数にとって「正しい」と感じるものです。私の個人的な意見では、マテリアルデザインの仕様は、大多数のユーザーが期待するものであり（Androidがスマートフォン市場で優位にあることを前提とする）、iOSでかなり大丈夫だと感じています（奇妙な点は、Windows Phoneで、これは少し取得される可能性があります）疎外された）。

材料設計

マテリアルデザインを採用することにした場合、さまざまなウェブベースのマテリアルデザイン仕様の実装があります。私が推奨するのは、Google独自の Polymer paper elements collection （Googleが独自に作成したものです） 角度マテリアル ）。左の列にある「デモ」リンクでさまざまなコンポーネントの外観を確認し、デザインのスクリーンショットを使用してください。これは、デザインが非常に高価なテキストアンチエイリアシング（ネイティブアプリとWebアプリの両方が、Photoshopで得られる種類のアンチエイリアシングを現実的に行うことができない）と、開発者の頭痛の種を実装します。

DP vs PX

ただし、場合によっては、すぐに利用できる実装がないコンポーネントを見つけることがあります。実際、仕様を直接フォローし、開発者に任せて手動で実装する必要があります。 DPとPXの質問に答えるには：

CSSを作成するときは、dpまたはspが指定されている場所では常にpxを使用します。 Dpは、Android向けの開発でのみ使用する必要があります。

出典： google.com/design

1
David Mulder

CordovaやIonicなどのツールを使用している場合でも、Googleのマテリアルデザインを使用できます。

ドキュメントに従って、CSSで開発する場合はdpをpxに置き換える必要があります。

Dpは、密度160の画面上の1物理ピクセルに相当します。dpを計算するには：

dp =（ピクセル単位の幅* 160）/画面密度

CSSを作成するときは、dpまたはspが指定されている場所では常にpxを使用してください。 Dpは、Android向けの開発でのみ使用する必要があります。

http://www.google.com/design/spec/layout/units-measurements.html#units-measurements-density-independent-pixels-dp-

実際には、Ionicの専用のマテリアルフレームワークがあります： http://ionicmaterial.com/

Html/css/javascriptを使用してモバイル用に作成されたアプリケーションは、「ハイブリッド」アプリケーションと呼ばれます。検索中にその用語を使用すると、より役立つ回答が見つかる場合があります。ここにいくつかの役立つリンクを含む記事があります： https://www.smashingmagazine.com/2014/10/providing-a-native-experience-with-web-technologies/

1
PhillipKregg