こんにちは、Habr。 私はスタジオで一流のデザイナーとして働いています。 私は最初のアプリケーションのストーリーを共有しています。これは、設計および設計しただけでなく、リリース前のすべてのステップを自分で行ったものです。

注意:この記事は、大きなアニメーション画像で示されています。
明確なプログラミング経験のないデザイナーの場合、Xcodeの最初の起動は、3Dエディターの最初の起動を思い出させます。 どのようにアプローチするのか、どこから始めるのかは明確ではありません。 このサイトブックの
デザインとコードは私を大いに助けてくれました。 それはデザイナーのためにデザイナーによって書かれています。 著者はたくさんのSketch + Xcodeを使用し、プロトタイピングに焦点を当てています。 Xcodeビューをめぐる混乱は、1つまたは2つの章の後に続きます。 同時に、Sketchがこんなに優れている理由がわからない場合は、すぐにわかります。
有名なグラフィックスをいくつかの解像度で一度にレイアウトから直接エクスポートすることに加えて、Sketchには別の非常に便利な機能があります。 テキスト追跡までの座標系と測定単位は、Xcodeと同じです。
なぜデザイナーはまったくプログラミングに対処する必要があるのですか? 利点は非常に重要です。
- 開発者と真に共有された言語
- 無限の可能性を秘めたプロトタイピングとモーションキャプチャ
- 小さなプロジェクトは、スケッチからアプリストアだけで開発できます。
この記事は、そのようなプロジェクトの1つにすぎません:飲料水追跡システムです。
別の水トラッカー
App Storeには、水追跡システムがたくさんあります。 機能は非常に異なります。 おそらく、多くの人が液体の種類を検討することを好むでしょうが、バーに座っている誰かがビールのすべてのコップをカウンターに追い込むことはほとんど想像できませんが。 しかし、私は完全に異なるシナリオについて考えていました。最も怠zyなシナリオです。 紅茶を1杯飲むたびに、アプリケーションの3つの画面を表示したい人はほとんどいないでしょう。 しかし、これはそのような人々が自分の健康を気にしないという意味ではありません。 ヘルスケアは、いつまでも幸せに暮らしたいすべての人をケアします。 私のアプリケーションは、少し健康になり、新しい習慣を身に付けたいと思っている人々のために作られています-毎日の水を飲むことです。
もちろん、
インターフェースは悪であり、いつかスマート医療機器は体内の物質のバランスを考慮しますが、iOSアプリケーションのフレームワーク内にとどまる場合、最も遅延するシナリオは以下を想定します:
- 何回かタップして何かを飲むことはできません。
- 理想的には、このためにアプリケーションを実行する必要はまったくありません。
- アプリは、飲み物を飲むように定期的に通知する必要があります。
- 必要に応じて、通知の毎日のレート、期間、間隔、およびカウンターの自動リセットが設定されます。
すべてが非常に簡単です。 ワンタップで水を追加するには、いくつかの一般的なボリュームを取り、それらをメイン画面上の別々のボタンにする必要があります。 おそらく、そのようなアプリケーションのインターフェース設計を深く分解しても意味がありません。

一瞬を逃さない限り、
それはひどく退屈です。 私は水を飲んだ-記録した、水を飲んだ-記録した、水を飲んだ-記録した。 私の怠targetなターゲットユーザーは、最初の日にそれにうんざりします。 だからあなたはそれを退屈する必要はありませんが、何も複雑にしないでください。 それは水についてです。 解決策は、水を活性化することです。
生きている水

事前に準備されたアニメーションのすべてのオプションは、ここでは適していません。 迷惑ではなく、生きた水が必要です。 アプリケーションで少し遊ぶことができるように、水はデバイスの動きに反応するはずです。 そのため、少しの物理学が必要です。 最初に頭に浮かぶのは粒子です。 互いに相互作用する多くの粒子。 しかし、欠点はすぐに明らかになります。そのような水がまともに見えるためには、多くの資源を食べる必要があります。 これはゲームでは非常に合理的であり、数字を加算するアプリケーションでは許可されません。
この記事で興味深い実装が見つかりました。 私にとっては、スプリングの概念のみが関連しています。水面の2次元カットをシミュレートするには、垂直スプリングのセットとして解釈できます。

私の場合、デバイスの加速度計と水を追加するためのボタンのタパスが外力の源として機能します。 加速度計の垂直軸は力そのものです。 水平軸に応じて、スプリング全体に分布します。 次に、スプリングの配列上にUIBezierPathを描画しました。 面白い効果が得られます。 現実にはほど遠いですが、問題を完全に解決します。


アプリケーションを実行しないでください
iOS 8はTodayウィジェットを搭載しました。 Appleは、最新のデータと簡単なアクションを表示することを絶対に論理的に推奨しています。 これは私の場合です。 同じ5つのボタンと2行の情報。 そして、タスク「毎回アプリケーションを実行しない」が完了します。

ただし、コントローラーを配置する場所は、Todayパネルよりもはるかに優れています。 ちなみにアップルは時計を発表しました。 [アプリケーションを起動しない]タスクは、[電話を取得しない]に進化しました。
電話を取得しないでください
WatchKitの現在のUIデザイン機能は、テトリスに似ています。 ほとんどすべてが制限されています。 しかし、デバイスはありませんが、結果を適切にテストする方法はありません。 そのため、最も標準に固執するのが賢明です。 さらに、5つのボタンと2つの行が必要です。

App Storeでは、WatchKit Extensionからのアプリケーションのダウンロードはまだ許可されていませんが、WaterCheckはリリースの準備ができており、Apple Watchの販売開始とともにバージョンがリリースされることを期待しています。
アイコン
HealthKitの栄養的に分解された栄養情報の中には、水に関するものがないことを知って多くの人が驚きました。 これには十分な理由があるかもしれませんが、私はこれを利用することを好みました。

これで、アプリはApple Healthの一部のようになります。 アイコンの作成者は、私の同僚であるVadim Matveevです。
サポート
壮大な失敗:一度、アプリケーションの価格を実験して、米国から数千のインストールを受け取りました。 次に、1つの理由で、かなりの数の否定的なレビューを得ました。ユニットのローカライズを忘れていました。 米国では、ご存知のように、ほぼ全員がオンスを使用しています。多くのユーザーは、標準ボリュームを十分に修正していません。 しかし、できるだけシンプルにすることが重要です。 解決策はジェスチャーです。 任意のボタンを引き上げることで、付加価値を調整できます。

もちろん、この方法は偶発的または不正確なアクションの可能性を高めるため、元に戻す必要があります。 Appleのガイドラインでは、キャンセルの標準的なジェスチャーはデバイスを振ることです。 だから私はやった。
非標準の料理の所有者のために、入力ボタンの設定でアプリ内を作成しました。 最近の更新では、アプリケーションは履歴を収集してグラフで表示することを学習しました。 画面を回転させると、グラフが表示されます。

次の記事では、アプリケーションマーケティング、アプリケーションを促進するための成功した動きと失敗した動きについて書いています。