web-dev-qa-db-ja.com

アプリの設計プロセス-プロトタイプ段階:Photoshopはすべての画面を設計しますか?

私はアプリのデザインを始めたばかりで、自分の道を学んでいます。今はかなり複雑なプロジェクトをやっているので、これは大まかなプロセスでした:

  1. クライアントの要件の理解と調査。
  2. 各画面の最も重要な機能を備えた詳細なナビゲーションマップ。
  3. クライアントと開発者の反復と承認
  4. タブレットで約7つのphotoshop画面デザインと、アプリ全体に適用できる最も一般的なスタイルの2つの仕様画面を作成しました。画面の総数は約25です。

だから私はこのフェーズで疑問に思います:

  1. タブレットとモバイルの各画面を設計する必要はありますか?
  2. 開発者は一般的なスタイルの仕様を持っているので、それをどのように見えるかを彼らに知らせるためだけに画面を紙に描くことは有効ですか?
  3. 一部の画面を省略し、開発者と一緒に座って外観を調整し、あちこちにパディングを増やし、タブレットやモバイルで表示またはナビゲートするためのより良い方法を考え出すのは通常の習慣ですか?

このフォーラムは通常、業界のベストプラクティスを模索していますが、特に時間の制約があるため、デザイナーや開発者が創造的で再考しなければならないことが多い場合、ベストプラクティスは必ずしもすべての企業に適しているわけではないことに注意してください。さまざまなプロジェクトのプロセス。

6
Taly Emmanuela
  1. いいえ、必ずしも必要ではありません。システム定義の画面は必須ではなく、わずかな変更を加えてクローンページ/要素を複製する必要はありません。 hi-fiプロトタイプの代替は、lo-fiワイヤーフレーム、ユーザージャーニーマップ、PRDです。

  2. はい。紙のスケッチ/プロトタイプは、十分に詳細であり、すべての重要な部分をキャプチャ/ハイライトしている場合、正当なプロトタイプです。

  3. これは一般的な方法です。

注意:上司と開発者がこの種の仕様に問題がないことを確認し(電子メールフォームで承認を得ることをお勧めします)、すべて適切に文書化します。

8
Zoe K

他の答えに追加するには、実際にはavoid機能が終了するまでモックが完成したように見えるようにする必要があります。

Joel Spolskyを引用するには:

プログラマーではないユーザーに、100%美しいユーザーインターフェースを備えた画面を表示すると、プログラムはほぼ完了したと見なされます。 (ソース)

これに加えて、プログラマーではない(つまりプログラマー自身) /でない人々(つまりプログラマー自身)も、この誤りの犠牲になります。

3
hoosierEE

1つのプラクティスがすべての企業に適するとは限らないというのは、あなたの言う通りです。さらに、開発者によっても異なる場合があります。

あなたが行くことができる最も簡単な方法は、単にdevsに尋ねる彼らが好む作業方法です。誰かが自分の画面を見ているのが嫌いな人もいれば、たくさんの質問がありあなたの周りにいるほうがいい人もいます。それは人から人へと変化するので、彼らに尋ねることは良いステップです。彼らはきっとあなたがすべての詳細を磨くことが重要であることを理解するでしょう、そしてあなたは一緒に働くか、または他の何らかの手段によって、絶え間ないフィードバックを歓迎するでしょう。

一般的に、フロントエンドチームがコメントを理解していれば、モックアップで十分です。 「すべてのボタンを同じ幅にする」。特に不愉快なロゴの配置が突然変更され、25の画面を手動で編集する必要がある場合は、すべての画面を描画する必要はありません。ピクセルパーフェクトな画像なしでモックアップを視覚化するには、開発者はかなり高いレベルの想像力を持っている必要があります。しかし、必要な詳細をすべて尋ねることで、すべての不確実性を取り除く必要があります。

2
fri

クライアントは確かにそれらすべての順列を見る必要はありません。クライアントは機能性や美学を含む全体像を見る必要があります。開発者は、すべての順列を処理する方法を理解する必要があります。順列をどのように伝えるかはあなた次第です(メモ、図、画像スニペット、フローチャートなど)。

とはいえ、Photoshopはおそらくこの仕事にとって最悪のツールです。これは、モーフィングされ、複数ページのレイアウトを処理するように調整されたアプリですが、ブロックの周りを走って正面玄関にたどり着きます。 Sketch 3とFireworks CS6はページベースです。つまり、1つのファイルで25の画面をより速くクランクアウトできます。どちらもベクターネイティブであり、要素の描画を高速化します。残念ながら、Photoshopはレイヤーのスタッキングとピクセルの操作に基づいています。 Fireworks/Sketchに比べて遅くて不格好です。残念ながらAdobeは今年Fireworksのサポートを終了しましたが、CS6を手に入れることができればがっかりすることはありません。

0
RomanP