Githawk: ワイヤーフレーム/デザインプロファイル

私はグラフィックデザイナーではありませんが、ここで議論を巻き起こすことができるかもしれません。 コンセプトの進行が遅い可能性を示してみました。

私も指摘します。 ブックマークがタブバーの中央のアイコンであるのはあまり好きではありません。 どういうわけか、プロフィールか受信トレイにすべきだと思います。 しかし、私は本当にそれに集中していませんでした

🔥🔥🔥@ Huddie ！

GitHubの現在の設計のいくつかに対するクイックリファレンスとして、以下の画像をここに含めます。 GitHub以外の新鮮なインスピレーションの源を見つけるのはクールでしょう。

@BrianLitwin私は非常に同意します。 GithubプロファイルはWebには最適ですが、モバイルではうまく複製できないと思います。 外でインスピレーションを探す必要がありますが、使い慣れたインターフェイスを維持するようにしてください。 私はページを開始するのをかなり簡単に保つように努めました。 私はそれが後でより良く構築できることを知っています。

道順のように！ 深く掘り下げる前に、情報階層がどうあるべきかから始めるべきだと思います。 プロファイルに存在する可能性のあるものはたくさんあります！

• アバター
• ユーザー名
• 表示名
• 略歴、場所、リンク
• 組織
• 固定されたリポジトリ
• レポ
• フォロワー、フォロー中
• 出演者
• アクティビティ

次に、実行するアクションがあります。

• フォロー、フォロー解除
• 共有
• ブロック、レポート

ブレーンストーミング

少しブレインストーミングすると、これを優先度でランク付けされたバケットにスライスできます。

1. WHO？
   a。 個人の身元
   
   
   
   1. アバター
   
   
   2. ユーザー名、表示名
   
   
   3. バイオ
   
   
   4. 場所、雇用主、リンク
   
   
   5. 出演者
      
      b。 ネットワークID
   
   
   6. フォロワー
   
   
   7. 続く
   
   
   8. リポジトリ
   
   
2. 彼らは何をしますか？
   a。 組織
3. 彼らは何をしていたのですか？
   a。 固定されたリポジトリ
   b。 アクティビティ

インスピレーション

私を惹きつけたDribbbleからいくつかの画像を引き出します：

これが昨日帰りの飛行機で作ったスタータースケッチファイルです。 現在Issuesで使用している白い背景スタイルに固執する必要があります。

すごいもの！ 私はその中央のプロファイルの写真、円形のフレームのためにひどく😍😍😍です..整頓された、エレガントな、穏やかな。 ＃2127のHuddieのデザインまたは上記のAntonyMarshalのEG。

@rnystromスケッチファイルを処理します。 私の最初の考えのいくつかをマージします。 @BrianLitwinこれが代わりになることにかなり満足しているので、古いデザインを再投稿するつもりはありません。

今週末、ワイヤーフレーミングを簡単にするために、テンプレート化されたSketchドキュメントをまとめ始めました。 共有可能なコンポーネントに色、テキスト、アイコンがあります： app.zip

完全ではありませんが、一部の設計言語で役立つ可能性があるため、フラグを立てます。

cc @cieslakdawid

@Huddieいくつかの即時の考え：

• 私は中央に配置されたプロファイルのデザインのファンではありませんが、大量に使用されていない空白がないiPadではうまく拡張できません。 私は部屋を呼吸することがすべてですが、スケールアップすると船外に出ると思います。
• ボタンのデザインは、アプリの他の部分と一貫していません。
  
  
  
  • 複数の太字/対照的なボタン：「フォロー中」と「最近」の重みが同じであるのはなぜですか？
  
  
  • 「フォロー中」は「フォロー解除」にする必要があります（GitHub.comと同じ）
  
  
  • アプリのボタンのデザインも完全に一貫しているわけではないことを認めます。 スケッチファイルに追加してすべてを一貫性のある別のテンプレートにする必要があります。 グラデーションの議論に戻ります（GitHubのすべてのようなフルグラデーションボタンに行くかもしれません...）
  
  
• すべてにフォームタイトルが必要ですか？ 例：「バイオ」はおそらく不要
• ビュー内のユーザーハンドルを削除して、ナビゲーションアイテムのタイトルを作成したい

GitHawkのプロファイルの1.0が何をすべきかを要約する必要があります。

誰かのGitHubプロファイルを表示するときに実行する最も一般的なアクションは何ですか？ 私にとって、私は彼らがどこで働いているかをチェックし、彼らのウェブサイト/連絡先情報を見つけ、または彼らがどれほど「注目に値する」かを確認します（フォロワー、彼らが所有する大きなプロジェクト）

これを行うと、それらのアクションのみを満たす機能のみに焦点を当て、後で他のアクションを無視することができます。 それ以外の場合は、優先事項ではない複雑な機能を多数追加します（貢献活動など）。

@rnystrom

• iPadのデザイン
  iPhoneでは中央の見た目がいいと思います。 iPadがとてもオープンに見えるという意味がわかります。 iPadでGitHawkを試したことがありませんが、レイアウトは常に同じですか？ iPadでは、名前とハンドル（またはそれを置き換えるもの）を垂直に積み重ねるのではなく、水平に積み上げることをお勧めします

• ボタンの一貫性
  私は本当に大まかなスケッチをしようとしていました。矛盾したATMがたくさんあると確信していますが、この道を進んだら修正します。

• フォームのタイトル
  [フォロー中]ボタンの上のセクションにはタイトルがありません。 以下のセクションの中には、一貫性を保とうとして、あるセクションとないセクションがあると、見栄えが良くないと思います。 バイオをラインより上に移動することはできますが、下にフィットするように感じます。

• ビュー内のハンドルを削除する
  確かに私はそれを視界の外に動かすことができます。 場所/メールに置き換えることができます

• 最も一般的なアクション
  私はおそらくいくつかの一般的なものがあることに同意します。 固定されたリポジトリ+組織だと思います。 彼らの注目すべき仕事を見せてください。 このアクティビティでは、現在何をしているのかを確認できます。 名前+ハンドル、略歴とともにフォロー/フォロー解除が不可欠だと思います。メインビューに実際に表示するのではなく、レポジトリ/フォローとフォロワーへのクイックリンクが適切だと思います。

• ウェブサイトと連絡先
  これらはアクションコントローラーか何かで見つかると思います。 私は、すべてのGitHubユーザーが持っているものをメインビューに表示したままにしようとしました。 （組織とバイオは例外です）。 ただし、いつでも追加できます。

コントリビューションアクティビティを削除することもできますが、それはgithubmobileとgithubwebのプロファイルページにあります。 個人的には気に入っていますが、V1は必要ないことがわかります。

あなたの考えを聞かせてください。

デバイス固有のレイアウトを作成するよりも、レイアウトの一貫性と応答性を維持したいと思います。 管理とテストが難しすぎる。 Atmデバイスはすべて同じようにレイアウトされており、分割ビューの折りたたみと拡張は除きます。

_{GitHawkで送信}

さて、名前と（まもなく追加される）場所+電子メールを水平にシフトしますか？

更新しました。

私はここでそのような素晴らしいものをほとんど逃しました<3

@rnystrom週末の前に、ワイヤーフレームのスケッチにもっと取り組む予定はありますか？
私は自分の週を過小評価していて、 starter packでスケジュールから少し外れていますが、今週の金曜日は生き返り（xCode + Sketch;））、2/3日で終了したいと思っています。 重複を避けるために、金曜日に開始する前に作業の状態を投稿します。

Sherloukの設計のように、ReposとStarred Reposのタブを作成する場合、現在の「Repos / Followers / Following」UIでは、現在のように大幅な再設計が必要になると思います。

先を見越しすぎないようにしますが、UIが1.0で目立つほど、後で切り離すのが難しくなります。

また、[リポジトリ]タブと[スター付きリポジトリ]タブが現在使用しているSearch Repos ViewControllerと異なって見える場合を除いて、SearchRepoResult + SearchRepoResultSectionControllerを再利用できます。これにより、これらのタブを非常に簡単に作成できます。 このビューコントローラーを参照してください。これは、リポジトリとスター付きの両方に使用できます。

GitHub Webビューへのリンクを構築するのに時間を費やす大きな理由はありませんが、それらをネイティブに表示するためのアーキテクチャがすでにたくさんあるのです。

Repo / Followers / Followingボタンは、タブとして表示するのではなく、新しいビューに移動する必要があると思います。 そして、新しいビューは確かにネイティブである必要があります。

これはすべて美しく見え、私の封筒の絵よりもはるかに優れていると言っているだけです😂

@Sherloukあなたはそれを始めました。 どこかから始めましょう。 ありがとう

_{GitHawkで送信}

@cieslakdawidは実際にはそうではなく、次の2週間はかなり非難され、その後町を出て行きました。

_{GitHawkで送信}

@BrianLitwinが彼のプロファイルブランチを微調整できるように、このデザインを仕上げることについて何か考えはありますか？ @rnystrom上記の最後のデザインレンダリングを改善するための提案はありますか？

@Huddie lemmeは、@ Sherloukの元のデザインのSketchプロトタイプを＃317から作成して、それを議論に取り入れることができるようにします。 数日中にそれを行います。

確かにいいですね。 👌🏻

_{GitHawkで送信}

まだSketchプロではないので、私ができる最善のことは今のところスクリーンショットです：

@BrianLitwinは私には似合います

_{GitHawkで送信}

@BrianLitwin本当に掘ります!!

たぶん、フォロー/フォロー解除はナビゲーションバーアイテムであるか、アクションコントローラーに表示されますか？

_{GitHawkで送信}

面白そうな封筒😂見栄えがいいです！

フォロー/フォロー解除や共有などを行うナビゲーションバーに...メニューを用意する予定だったと思います

これはすべて本当にクールです。 このチケットにタグを付けてくれてありがとう@brianlitwin

急ぐ必要はありませんが、目標は、ユーザー（おそらく投稿とコメントだけに特化したフィードを含む）とリポジトリの両方にパルスアクティビティを持たせることです。

現在、これに取り組んでいる人はいますか？

必要最低限​​のMVPを実行しようとするかもしれません-基盤が確立されたら、より多くのタブと情報を使用して、その上に構築を開始できると考えてください！

@ Sherlouk ＃2125と＃2113でソフトパスを取得しました-これらのprsのclient / graphqlのものは有効だと思います。 その部分（数百行）を投稿した場合、すべてのPRをチェックして、その上に構築できますか？

UserProfileブランチを見て、現在どのようになっているのかを確認します。 上記のデザインは良いと思います。最初に最小限のバージョンを取得しようとしているだけなので、すべてが入った大規模なMRとは対照的に反復できます。

@Sherlouk OK lemmeはUserProfileブランチをクリーンアップしますが、最新ではないと思います。 今日やります

@Sherlouk Update：そのブランチは私が思い出したほど恥ずかしいものではありません。 「プロファイルモデル」フォルダ以外の「ユーザープロファイル」フォルダ内のすべてを廃棄することを検討します。モデルは、リポジトリ/リポジトリクライアントのパターンに非常に厳密に従います。 しかし、ビュー/ビューコントローラー/セクションヘッダーはすべて破棄します。 手始めに、SwiftListViewControllersを使用する必要があると思います。

ViewControllerの前面で私が感じた唯一の強い感覚は、2つのタブ（スター付きリポジトリとユーザーリポジトリ）を含めるのが非常に簡単で簡単だったということでした。これは、SearchRepositoriesパイプラインからの優れたセクションコントローラーとセルがすでにあるためです。 それらをフェッチしてドロップするだけです。

HeyFolks👋、私はデザイナーで、手伝いたいと思っていました。

@Sherloukと@BrianLitwinは、 10月2日に投稿されたデザインです。
私はあなたが外に出るのを助けるために何かデザインサポートを提供できますか？

今のところ、ラフなデザインに取り組むことができると思います。

• [リポジトリ]タブ
• スタータブ
• 引き出しを共有/フォローしますか？
• 拡張された固定リポジトリ

私がどのように助けることができるか教えてください！

@kocheckは、このスレッドのどのデザインにも制約されているとは感じません。 私が知っているコンセンサスはありません。 他にアイデアがあれば、遠慮なく共有してください。

了解！ 私は今週末のおかげでそれをうまくやってみたかったです！

デザインを楽しみにしています！ かっこいいね

_{GitHawkで送信}

ねえ、フォークス👋今朝デザインファイルに飛び込む時間を見つけました。 この方向性についてどう思いますか？ コメントやフィードバックはありますか？

##デザインの概要1
最後に投稿されたデザインに最も近い。

更新

• ViewControllerタブを下に移動して、もう少し階層を提供します。
• バイオの（約）最大文字数のバージョンが含まれています。
• フォローおよび共有アクションを、ナビゲーションバーのメニューアイコンを介してトリガーされるアクションシートに移動しました

| ショートバイオ| ロングバイオ| iPhone SE |
| ：---：| ：---：| ：---：|
| | | |

デザイン概要2

この設計は、もう少し進んでいます。 続けて船外に出てほしい場合は、私に知らせてください😄

更新

• ViewControllerタブを下に移動して、もう少し階層を提供します。
• 含まれている（約）バイオの最大文字数。
  
  
  
  • バイオをテーブルビュー内に移動しました。
  
  
• ProfileStatsでクイックパスを行いました
  
  
  
  • レポ
  
  
  • フォロワー
  
  
  • 続く
  
  
• フォロー/フォロー解除ボタンを追加
• フォローおよび共有アクションを、フォローボタンの横にあるメニューアイコンを介してトリガーされるアクションシートに移動しました

| フォロー解除| フォロー| iPhone SE |
| ：---：| ：---：| ：---：|
| | | |

まだ設計中/次のステップ

• 固定されたリポジトリがボックス内に含まれているバージョンを調べたいと思います。 @Huddieが作成したこのコメントのように。 私はむしろそれが好きです。
• ユーザーのパルスアクティビティ*
• リポジトリのパルスアクティビティ*
• 拡張された状態。 テーブルビューのアイテムの場合
• リポジトリ（タブ）
• 星（タブ）
• ActionSheet

不明

• 上記の会話から、Githawkが自動レイアウトツールでiPhone SEをサポートしていると仮定しています👆iPadのサポートについて話します。

• 私はまた、あちこちでいくつかの設計上の仮定を立てています。あなたが劇的に恐ろしいものを見つけたら、私に知らせてください。

• パルス活動のための* 、私は愚かな質問があります。 GithawkはこれらのアイテムをGithubと同じように表示しますか、それとももっとカスタムになりますか？

@kocheckを自由に探索し続けてください、しかし私は本当に❤️デザイン2です。

特に、レポ/フォロワー/フォローを目立つ場所に配置できてよかったです。 ライアンは、プロファイルをスキャンするときにこれらの情報が優先度が高いと述べました。

ヘッダーセクションの下のタブが好きです。 他の人はどう思いますか？

タブバーを下に移動すると、はるかに見栄えが良くなることに完全に同意します+1

2番目の設計の場合：

• フォロー/フォロー解除は、1回または2回のアクションだと思います。 上面図の大部分を占めているようで、一度クリックするとほとんどの人にとっておそらく変わらないでしょう。
• リポジトリが2回表示されるようです（タブと上部）
• 個人的には、略歴は名前や場所などに付けられていると思います。他の人が上のセクションにある場合は、下のセクションにあるべきではありません。

私はほとんど両方が好きです。 デザイン1の短い経歴は開始するのに適した場所であり、デザイン2は2番目のバージョンをより具体化できると思います

_{GitHawkで送信}

@kocheckよ、とてもよさそうだ！ バーを下に動かすのが大好きです、とてもきれいです！

@Huddie @BrianLitwinは、私と一緒に悪魔の代弁者を演じています。GitHubは仕事をすることであり、誰が誰であるかについてではないので、おそらく次のようなカウントはそれほど目立つべきではありません（オプション1のように）。 しかし、それは新しい人と出会うときの「ソーシャルキャピタル」のような有用な指標だと思います。

フォローをアクションシートに移動するというアイデアも大好きです。 社会的側面を取り除き、「この人は誰で、彼らはどのような仕事をしているのか」とソーシャルネットワーキングに焦点を合わせ続けます。

私はここで自分自身をかき回していることを知っていますが、デザイン1を見て、それを2と比較すると、2はTwitter / Instagramが多すぎて、_work_が少ないように感じました。

考え？

私はまた、@ rnystromとして、1の専門的な側面と2の社会的強調に傾倒しています。

私は最初のオプションにもっと賛成です😄。 ソーシャルネットワーキングではなく、この人物が誰で何をしているのかに関するより「重要な」情報を示しています（2つ目はInstaのように見えます）。
さらに、略歴を省略し、ポケットベル情報用のスペースを増やすことをお勧めします。
また、名前/ユーザー名と場所/会社/ウェブサイトの間で場所を切り替えていたでしょう。 私にとっては、プロフィール写真の右側にある名前/ユーザー名を見る方が直感的です。 （ @BrianLitwinが上記で提案したバージョンのように）😊

_{GitHawkで送信}

素晴らしいフィードバックをありがとう！ 上記のフィードバックを反映して、いくつかのコンプに取り組みます。

@jdisho長い名前を使用できるように、名前/ユーザー名をLocation / company / websiteなどに切り替えました。 私はいくつかの研究を行い、分野を交換することができます。 その場所でエッジケースを美しく見せることができるかどうかを確認してください😄

_{GitHawkで送信}

クイックアップデート

まだ動き回っていますが、私が遭遇している最悪のエッジケースを共有すると思いました。 最大39文字の名前とiPhoneSEの最大バイオコピーを持つユーザー。 😆

@kocheckはとてもクールなので、これらすべてのエッジケースを回転させています！

_{GitHawkで送信}

画面全体をスクロールして、十分にスクロールしたときにタブが固定ヘッダーになるようにすることはできますか？ つまり、バイオ全体がすべてのタブに表示され、必要に応じて画面全体をリポジトリで埋めることができます。

@ j-f1それが私が考えていることです。 👍

名前/ユーザー名を場所、会社、連絡先情報と再度交換する場合があります。 画面の高さを利用します。

休暇のために旅行していて、昨日車に乗っている間にアイデアがありました。 今朝は本当に早くモックアップしました。 プロファイルを右に移動することについてどう思いますか？

• ユーザーがさらに追加または削除すると、情報が流れ落ちる可能性があります。
• iPadでは、プロフィール画像を大きくする問題が発生しますか？ 右側の空きスペースを埋めるのを手伝ってください。

@kocheckそれは_素晴らしい_に見えると思います。 右側のアイコンが大好きです。 インターフェイス全体が非常に読みやすくなります。

_{GitHawkで送信}

これはすごい！ 先週のkochecksの質問をもう一度見て、彼はgithubがどのようにそれを行うか、またはよりカスタムに見えるかを共有するパルスアクティビティについて質問したと思います。

Kocheck、アクティビティが固定されているか、4番目のタブとして、またはオーバーフローオプションとしても想定されますか？ あなたたちが気付いたフォロワーとは異なり、最終的には重要なビューではありませんでしたが、少なくとも私にとっては、アクティビティはプロファイルの最も重要なビューです。

@ ijm8710まだGitHubのドキュメントを確認する必要がありますが、そのデータを表示できる場合は、[概要]タブの上部にドロップしたいと思います。 👍

解決策としてこれに満足している場合、出荷する、またはそれをya'llに提出するための最良の方法は何でしょうか？ Zeplinプロジェクト、または更新されたスケッチファイルを使用してデザインリポジトリにプルリクエストを実行する必要がありますか？

_{GitHawkで送信}

スリック🤩!!! @cookcheck

@kocheck api.github.com/users/:user/events

@kocheckPRでリポジトリを設計するのは👌

_{GitHawkで送信}

このスレッドの画像はどれもアップしていません。 誰でもそれらを持っていて、GitHub添付ファイルとしてアップロードできますか？

デザインはマスタースケッチファイルにマージされました@TigPTだと思います

https://github.com/GitHawkApp/Design-Resources

@TigPT別のファイルタイプが必要/必要な場合はお知らせください。エクスポートできます。

デザインはマスタースケッチファイルにマージされました@TigPTだと思います

https://github.com/GitHawkApp/Design-Resources

そして、画像が読み込まれています。これは私の側のネットワークの問題のようで、オフラインであると誤って想定していました。

デザインリポジトリをご指摘いただきありがとうございます。

新しいデザインが来る？ 興奮した！