Githawk: Gambar rangka / profil desain

Saya bukan seorang desainer grafis tapi mungkin ini bisa memicu diskusi di sini. Saya mencoba menunjukkan kemungkinan perkembangan konsep yang lambat.

Saya juga akan menunjukkan. Saya tidak terlalu suka bahwa bookmark adalah ikon tengah di bilah tab. Untuk beberapa alasan saya merasa itu harus menjadi profil atau kotak masuk. Tapi aku tidak terlalu fokus pada itu

@Huddie !

Menyertakan gambar berikut di sini untuk referensi cepat terhadap beberapa desain GitHub saat ini. Akan sangat keren untuk menemukan beberapa sumber inspirasi baru di luar GitHub.

@BrianLitwin saya sangat setuju. Saya pikir profil Github sangat bagus untuk web tetapi tidak dapat direplikasi dengan baik di seluler. Kita harus mencari inspirasi di luar tetapi mencoba untuk mempertahankan antarmuka yang akrab. Saya mencoba untuk menjaga halaman cukup sederhana untuk memulai. Saya tahu itu bisa dibangun lebih baik nanti.

Seperti petunjuk! Saya pikir kita harus mulai dengan hierarki informasi kita sebelum melangkah terlalu dalam. Ada begitu banyak hal yang bisa ada di profil!

• Avatar
• Nama belakang
• Nama tampilan
• Bio, lokasi, tautan
• Organisasi
• repo yang disematkan
• Repo
• Pengikut mengikuti
• bintang
• Aktivitas

Kemudian ada tindakan yang harus dilakukan:

• Ikuti, berhenti ikuti
• Membagikan
• Blokir, laporkan

brainstorming

Sedikit bertukar pikiran, kita dapat membagi ini ke dalam ember yang diberi peringkat berdasarkan prioritas:

1. WHO?
   Sebuah. Identitas diri
   
   
   
   1. Avatar
   
   
   2. Nama pengguna, nama tampilan
   
   
   3. bio
   
   
   4. Lokasi, majikan, tautan
   
   
   5. bintang
      
      B. Identitas jaringan
   
   
   6. pengikut
   
   
   7. Mengikuti
   
   
   8. Repositori
   
   
2. Apa yang mereka lakukan?
   Sebuah. Organisasi
3. Apa yang telah mereka lakukan?
   Sebuah. Repo yang Disematkan
   B. Aktivitas

Inspirasi

Menarik beberapa gambar dari Dribbble yang membuat saya tertarik:

Ini file sketsa starter yang saya buat dalam penerbangan pulang kemarin. Kita harus tetap menggunakan gaya latar belakang putih yang sekarang kita gunakan di Issues.

Hal-hal yang luar biasa! Saya sangat 😍😍😍 untuk foto profil tengah itu, bingkai melingkar.. rapi, elegan, tenang. EG dalam desain Huddie di #2127 atau di Antony Marshal di atas.

Mengerjakan file sketsa @rnystrom . Menggabungkan beberapa pemikiran asli saya. @BrianLitwin Saya tidak akan memposting ulang desain lama saya karena saya cukup senang dengan yang ini menggantikannya.

Akhir pekan ini saya mulai menyusun dokumen Sketch template untuk membuat wireframing lebih mudah. Memiliki warna, teks, dan ikon dalam komponen yang dapat dibagikan: app.zip

Ini tidak sepenuhnya lengkap, tetapi menandai karena mungkin membantu dengan beberapa bahasa desain.

cc @cieslakdawid

@Huddie beberapa pemikiran langsung:

• Saya bukan penggemar desain profil tengah b/c itu tidak akan berskala dengan baik untuk iPad tanpa spasi putih yang tidak digunakan secara besar-besaran. Saya semua tentang ruang bernapas, tapi saya pikir itu akan berlebihan ketika ditingkatkan.
• Desain tombol tidak konsisten dengan aplikasi lainnya:
  
  
  
  • Beberapa tombol tebal/kontras: mengapa "Mengikuti" dan "terkini" memiliki bobot yang sama?
  
  
  • "Mengikuti" harus "Berhenti Mengikuti" (sama seperti GitHub.com)
  
  
  • Saya akui aplikasinya juga tidak memiliki desain tombol yang benar-benar konsisten. Seharusnya template lain yang kami tambahkan di file Sketch dan buat semuanya konsisten! Kembali ke diskusi gradien (mungkin kita menggunakan tombol gradien penuh seperti semua GitHub...)
  
  
• Apakah kita memerlukan judul formulir untuk semuanya? misalnya "bio" mungkin tidak perlu
• Saya ingin menghilangkan pegangan pengguna dalam tampilan dan menjadikannya judul item nav

Kita harus meringkas apa yang harus dilakukan profil 1.0 di GitHawk.

Apa tindakan paling umum yang dilakukan seseorang saat melihat profil GitHub seseorang? Bagi saya, saya memeriksa di mana mereka bekerja, menemukan situs web/info kontak mereka, atau melihat seberapa "terkenal" mereka (pengikut, proyek besar yang mereka miliki)

Setelah kami melakukan ini, kami hanya dapat fokus pada fitur yang hanya memenuhi tindakan tersebut dan mengabaikan yang lain untuk nanti. Jika tidak, kita akan menambahkan banyak fitur rumit yang bukan merupakan prioritas (misalnya aktivitas kontribusi).

@rnystrom

• desain iPad
  Saya pikir di iPhone tampilan tengahnya bagus. Saya mengerti maksud Anda bahwa iPad bisa tampak sangat terbuka. Saya belum pernah mencoba GitHawk di iPad tetapi apakah tata letaknya selalu sama? Saya menyarankan agar di iPad nama dan pegangan (atau apa pun yang kami gantikan) menjadi ditumpuk secara horizontal daripada ditumpuk secara vertikal

• Konsistensi tombol
  Saya benar-benar mencoba memberikan sketsa kasar, saya yakin ada banyak ATM yang tidak konsisten tetapi saya akan memperbaikinya jika kita mengikuti jalan ini.

• Judul formulir
  Bagian di atas tombol "Mengikuti" tidak memiliki judul. Saya tidak berpikir itu tampak hebat jika beberapa bagian di bawah ini memiliki dan beberapa tidak, berusaha untuk tetap konsisten. Saya bisa memindahkan bio di atas garis tetapi saya merasa lebih cocok di bawah.

• Menghapus pegangan dalam tampilan
  Tentu saya bisa memindahkannya dari pandangan. Saya dapat menggantinya dengan lokasi/email

• Tindakan paling umum
  Saya setuju mungkin ada beberapa yang umum. Saya pikir disematkan repo + org. menunjukkan karya terkenal mereka. Aktivitas ini memungkinkan Anda untuk melihat apa yang sedang mereka lakukan saat ini. Saya pikir untuk mengikuti/berhenti mengikuti sangat penting bersama dengan nama + pegangan dan bio dan saya pikir tautan cepat ke repo/mengikuti dan pengikut lebih tepat daripada menampilkannya di tampilan utama.

• Situs web dan Kontak
  Saya merasa ini dapat ditemukan di Pengontrol Tindakan atau sesuatu. Saya mencoba untuk menjaga tampilan utama diisi dengan hal-hal yang dimiliki setiap pengguna GitHub. (Organisasi dan Bio adalah pengecualian). Kami selalu bisa menambahkannya.

Kami dapat menghapus aktivitas kontribusi tetapi itu terjadi di halaman profil untuk github mobile dan github web. Saya pribadi menyukainya tetapi saya dapat melihat bahwa itu tidak perlu V1.

Beri tau aku isi pikiranmu.

Saya lebih suka menjaga tata letak tetap konsisten dan responsif daripada membuat tata letak khusus perangkat. Terlalu sulit untuk dikelola dan diuji. Semua perangkat Atm ditata sama, kecuali tampilan split runtuh dan ekspansi.

_{Dikirim dengan GitHawk}

Oke jadi ubah nama dan (segera ditambahkan) lokasi + email ke horizontal?

Diperbarui.

Saya hampir melewatkan hal-hal hebat di sini <3

@rnystrom Apakah Anda punya rencana untuk mengerjakan sketsa gambar rangka sebelum akhir pekan?
Saya meremehkan minggu saya dan saya sedikit keluar dari jadwal dengan starter pack , tetapi Jumat ini saya kembali hidup(xCode + Sketch ;) ) dan ingin menyelesaikan dalam 2/3 hari. Untuk menghindari duplikasi, saya hanya akan memposting status pekerjaan sebelum memulai pada hari Jumat.

Saya pikir satu pertimbangan adalah bahwa jika kita akan memiliki tab di jalan untuk Repos dan Repos Berbintang, seperti dalam desain Sherlouk, UI "Repos/Pengikut/Mengikuti" saat ini akan memerlukan desain ulang yang signifikan seperti sekarang:

Tidak berusaha terlalu banyak melihat ke depan, tetapi semakin menonjol UI di versi 1.0 kami, semakin sulit untuk memisahkannya nanti.

Juga ingin dicatat, kecuali tab Repos dan Repos Berbintang dimaksudkan agar terlihat berbeda dari Repos Pencarian ViewController yang saat ini kita gunakan, kita dapat menggunakan kembali SearchRepoResult + SearchRepoResultSectionController, yang membuat tab tersebut sangat mudah dibuat. Lihat pengontrol tampilan ini , yang dapat digunakan untuk Repos dan Berbintang.

Saya tidak melihat alasan yang bagus untuk menghabiskan waktu membangun tautan ke tampilan web GitHub ketika kita sudah memiliki begitu banyak arsitektur untuk menampilkannya secara asli.

Saya pikir tombol Repo/Pengikut/Mengikuti akan membawa Anda ke tampilan baru daripada menjadikannya sebagai tab. Dan tampilan baru pasti asli.

Hanya mengatakan bahwa ini semua terlihat indah dan jauh lebih baik daripada gambar amplop saya 😂

@Sherlouk Anda memulainya. Harus mulai di suatu tempat. Terima kasih

_{Dikirim dengan GitHawk}

@cieslakdawid gak kok, lumayan banting dua minggu kedepan trus keluar kota.

_{Dikirim dengan GitHawk}

Adakah pemikiran untuk menyelesaikan desain ini sehingga @BrianLitwin dapat mengubah cabang profilnya? @rnystrom Ada saran untuk perbaikan pada render desain terakhir di atas?

@Huddie biarkan aku membuat prototipe Sketsa dari desain asli @Sherlouk dari #317 sehingga kami dapat memasukkannya ke dalam diskusi. Saya akan melakukannya dalam beberapa hari ke depan.

Tentu terdengar bagus. 👌🏻.

_{Dikirim dengan GitHawk}

Masih bukan Sketch pro jadi yang terbaik yang bisa saya lakukan adalah tangkapan layar untuk saat ini:

@BrianLitwin terlihat baik bagi saya

_{Dikirim dengan GitHawk}

@BrianLitwin Saya benar-benar menggalinya!!

Mungkin ikuti/berhenti mengikuti adalah item navbar atau muncul di pengontrol tindakan?

_{Dikirim dengan GitHawk}

Amplop yang tampak menarik 😂 Tampak hebat!

Pikir saya telah merencanakan untuk memiliki ... menu di navbar yang melakukan hal-hal seperti ikuti/berhenti mengikuti dan bagikan

Ini semua sangat keren. Terima kasih telah menandai tiket ini @brianlitwin

Tidak terburu-buru sama sekali, tetapi tujuannya adalah juga memiliki aktivitas pulsa untuk kedua pengguna (termasuk mungkin umpan yang ditujukan hanya untuk posting dan komentar) dan repositori

Apakah ada yang sedang mengerjakan ini saat ini?

Mungkin mencoba dan mendapatkan MVP tulang telanjang - pikirkan setelah fondasi diletakkan, kita dapat mulai membangun di atasnya dengan lebih banyak tab dan informasi!

@Sherlouk Saya telah mengambil soft pass di #2125 dan #213 - Saya pikir hal-hal klien/graphql dari prs itu valid. Jika saya memposting bagian itu (beberapa ratus baris), dapatkah Anda memeriksa pr dan membangun di atasnya?

Saya akan melihat cabang UserProfile dan melihat seperti apa tampilannya saat ini. Saya pikir desain di atas bagus, hanya mencoba untuk mendapatkan versi minimal terlebih dahulu sehingga kami dapat mengulangi sebagai kebalikan dari MR besar dengan semua yang ada di dalamnya!

@Sherlouk oke saya bersihkan cabang UserProfile, saya rasa itu tidak mutakhir. Saya akan melakukannya hari ini

@Sherlouk Update: Cabang itu tidak memalukan seperti yang saya ingat. Saya akan mempertimbangkan untuk menghapus semua yang ada di folder "Profil Pengguna" selain folder "Model Profil" - model mengikuti pola di Klien Repositori/Repositori dengan cukup dekat. Tapi saya akan membuang view/view controllers/header bagian. Sebagai permulaan, saya pikir kita harus menggunakan SwiftList ViewControllers.

Satu-satunya perasaan kuat yang saya miliki di bagian depan ViewController adalah sangat mudah/langsung untuk menyertakan dua tab: Repositori Berbintang, dan Repositori Pengguna, karena kami telah memiliki pengontrol bagian dan sel yang hebat dari saluran SearchRepositories. Ambil saja dan jatuhkan mereka.

Hai Teman-teman , saya seorang desainer dan ingin membantu.

@Sherlouk dan @BrianLitwin adalah Desain yang diposting 2 Oktober Apa yang sedang Anda kerjakan?
Dapatkah saya memberikan dukungan desain untuk membantu Anda?

Saat ini saya pikir saya dapat mengerjakan desain kasar untuk;

• tab repo
• tab bintang
• Bagikan / Ikuti Laci?
• Repo Pined yang Diperluas

Beri tahu saya bagaimana saya bisa membantu!

@kocheck jangan merasa terkekang oleh salah satu desain di utas ini; tidak ada konsensus yang saya tahu. Jika Anda memiliki ide lain, jangan ragu untuk membagikannya.

Diterima! Saya ingin mencoba dan mencobanya akhir pekan ini, terima kasih!

Nantikan desainnya! Terdengar keren

_{Dikirim dengan GitHawk}

Hei, Teman-teman Menemukan waktu untuk melompat ke file desain pagi ini. Bagaimana perasaanmu tentang arah ini? Ada komentar atau umpan balik?

## Ikhtisar Desain 1
Yang paling dekat dengan desain yang terakhir diposting.

Pembaruan

• ViewController Tab dipindahkan ke bawah untuk memberikan sedikit lebih banyak hierarki.
• Termasuk versi dengan (aprox) jumlah karakter maksimal untuk bio.
• Memindahkan tindakan Ikuti dan Bagikan ke dalam Lembar Tindakan yang dipicu melalui ikon Menu di Navbar

| Bio Singkat | Bio Panjang | iPhone SE |
| :---: | :---: | :---: |
| | | |

Ikhtisar Desain 2

Desain ini melangkah keluar sedikit lebih jauh. Jika Anda ingin saya terus maju dan berlebihan, beri tahu saya

Pembaruan

• ViewController Tab dipindahkan ke bawah untuk memberikan sedikit lebih banyak hierarki.
• Termasuk (kira-kira) jumlah karakter maksimal untuk bio.
  
  
  
  • Memindahkan bio untuk berada di dalam tampilan tabel.
  
  
• Melakukan umpan cepat di Statistik Profil
  
  
  
  • Repo
  
  
  • pengikut
  
  
  • Mengikuti
  
  
• Menambahkan tombol Follow/unFollow
• Memindahkan tindakan Ikuti dan Bagikan ke dalam Lembar Tindakan yang dipicu melalui ikon menu di sebelah tombol ikuti

| Berhenti mengikuti | Ikuti | iPhone SE |
| :---: | :---: | :---: |
| | | |

Masih Merancang / Langkah Selanjutnya

• Saya ingin menjelajahi versi di mana Repos yang disematkan terkandung di dalam sebuah kotak. Seperti di komentar ini yang dibuat @Huddie . Saya lebih suka itu.
• aktivitas pulsa untuk pengguna *
• aktivitas pulsa untuk repositori *
• Negara bagian yang diperluas. untuk item dalam tampilan tabel
• Repo (tab)
• Bintang (tab)
• Lembar Tindakan

tidak diketahui

• Saya membuat asumsi bahwa Githawk mendukung iPhone SE dengan alat tata letak otomatis, dari percakapan di atas berbicara tentang dukungan iPad.

• Saya juga membuat beberapa asumsi Desain di sana-sini, beri tahu saya jika Anda melihat sesuatu yang secara drastis menghebohkan.

• * untuk aktivitas pulsa, saya punya pertanyaan bodoh. Apakah Githawk akan menampilkan item-item ini seperti Github atau apakah ini lebih khusus?

Jangan ragu untuk terus menjelajahi @kocheck tapi saya sangat ❤️ Desain 2.

Secara khusus saya senang Anda dapat menempatkan repo/pengikut/pengikut di tempat yang menonjol. Ryan menyebutkan bahwa informasi tersebut adalah prioritas tinggi ketika dia memindai profil.

Saya suka tab di bawah bagian Header. Apa yang orang lain pikirkan?

Sangat setuju pindah ke tabbar terlihat jauh lebih baik +1

Untuk desain kedua:

• Ikuti/Berhenti Ikuti Saya merasa adalah tindakan 1 mungkin 2 kali. Tampaknya mengambil sebagian besar tampilan atas dan mungkin tidak akan pernah berubah bagi kebanyakan orang setelah mengklik.
• Repos tampaknya muncul dua kali (tab dan di bagian atas)
• Menurut saya pribadi, bio dilampirkan pada nama, lokasi dll dan tidak boleh di bagian bawah ketika yang lain ada di bagian atas.

Saya suka keduanya untuk sebagian besar. Saya pikir desain 1 bio pendek adalah tempat yang baik untuk memulai dan desain 2 dapat menjadi versi kedua kami yang lebih sempurna

_{Dikirim dengan GitHawk}

@kocheck yo itu terlihat SANGAT BAIK! Senang memindahkan bilah ke bawah, sangat bersih!

@Huddie @BrianLitwin bermain sebagai advokat setan dengan saya sendiri, mungkin hitungan berikut/dll _tidak boleh_ begitu menonjol (seperti opsi 1) karena GitHub adalah tentang melakukan pekerjaan dan lebih sedikit tentang siapa-siapa. Tapi saya pikir ini adalah metrik yang berguna seperti "modal sosial" ketika bertemu orang baru.

Saya juga sangat menyukai ide untuk memindahkan Follow ke lembar tindakan. Hapus aspek sosial dan tetap fokus pada "siapa orang ini dan pekerjaan apa yang mereka lakukan" vs jejaring sosial.

Saya tahu saya agak sibuk sendiri di sini, tetapi begitu saya melihat desain 1 dan membandingkannya dengan 2, saya merasa bahwa 2 terlalu banyak Twitter/Instagram dan kurang _work_.

Pikiran?

Saya juga condong ke aspek profesional 1 vs penekanan sosial 2 sebagai @rnystrom.

Saya lebih untuk opsi 1 . Ini menunjukkan lebih banyak informasi "penting" mengenai siapa orang ini dan apa yang sedang dilakukan, daripada jejaring sosial (yang kedua terlihat seperti Insta).
Selain itu, saya sarankan untuk meninggalkan bio dan membuat lebih banyak ruang untuk info pager.
Juga, saya akan mengganti tempat antara nama/nama pengguna dan lokasi/perusahaan/situs web. Bagi saya lebih intuitif untuk melihat nama/username di sisi kanan foto profil. (seperti versi yang disarankan @BrianLitwin di atas) 😊

_{Dikirim dengan GitHawk}

Terima kasih atas umpan balik yang bagus! Saya akan mengerjakan beberapa perusahaan yang mencerminkan umpan balik di atas.

@jdisho Saya telah mengganti Nama/nama pengguna dengan Lokasi/perusahaan/situs web dll untuk membantu dengan nama yang lebih panjang. Saya bisa melakukan riset dan menukar bidang. Lihat apakah saya bisa membuat casing tepi terlihat bagus di tempat itu

_{Dikirim dengan GitHawk}

Pembaruan cepat

Masih Memindahkan barang-barang, Saya pikir saya akan membagikan kasus tepi terburuk yang saya hadapi. Pengguna dengan nama maksimal 39 Karakter, dan salinan biodata maksimal pada iPhone SE. 😆.

@kocheck sangat keren sehingga Anda memutar semua kasus tepi ini!

_{Dikirim dengan GitHawk}

Bisakah seluruh layar menggulir sehingga tab menjadi tajuk tetap saat Anda menggulir cukup jauh? Itu berarti seluruh bio akan terlihat di semua tab dan seluruh layar dapat diisi dengan repo jika diperlukan.

@ j-f1 Itulah yang saya pikirkan. 👍

Saya mungkin menukar Nama/Nama Pengguna dengan Lokasi, perusahaan, dan info kontak lagi. Manfaatkan ketinggian layar.

Bepergian untuk liburan, dan Punya ide saat di dalam mobil kemarin. Mengejeknya sangat cepat pagi ini. Bagaimana perasaan Anda tentang memindahkan profil ke kanan?

• Info dapat mengalir ke bawah, saat pengguna menambahkan atau menghapus lebih banyak.
• Di iPad, apakah akan menyebabkan masalah untuk memperbesar gambar profil? Bantu mengisi ruang kosong di sebelah kanan.

@kocheck Saya pikir itu terlihat _fantastis_. Cintai ikon di sebelah kanan. Membuat seluruh antarmuka sangat terbaca.

_{Dikirim dengan GitHawk}

Ini luar biasa! Meninjau kembali pertanyaan kocheck minggu lalu, saya pikir dia bertanya tentang aktivitas pulsa berbagi bagaimana github melakukannya atau tampil lebih kustom, tidak yakin apakah itu pernah dijawab ke arah mana tim condong dan penasaran sendiri ...

Kocheck, apakah Anda membayangkan aktivitas disematkan di bawah, atau sebagai tab keempat, atau bahkan sebagai opsi luapan? Tidak seperti pengikut yang kalian sadari pada akhirnya bukanlah tampilan yang sangat penting, setidaknya bagi saya, aktivitas adalah tampilan yang paling penting di sebuah profil.

@ijm8710 Saya masih perlu melihat-lihat dokumen GitHub tetapi jika kami dapat menampilkan data itu, saya ingin meletakkannya di bagian atas Tab Ikhtisar. 👍

Jika kami merasa baik tentang ini sebagai solusi, apa cara terbaik untuk mengirim, atau mengirimkannya kepada Anda? Proyek Zeplin, atau haruskah saya melakukan permintaan Tarik ke repo desain dengan file sketsa yang diperbarui?

_{Dikirim dengan GitHawk}

Licin !!! @cookcheck

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

@kocheck PR untuk mendesain repo adalah

_{Dikirim dengan GitHawk}

Tidak ada gambar di utas ini yang aktif. Adakah yang memilikinya dan dapat mengunggahnya sebagai lampiran GitHub?

Desain digabungkan ke dalam file sketsa master yang saya yakini @TigPT

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

@TigPT Beri tahu saya jika Anda membutuhkan/menginginkan jenis file yang berbeda dan saya dapat mengekspornya untuk Anda.

Desain digabungkan ke dalam file sketsa master yang saya yakini @TigPT

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

Dan gambar sekarang sedang dimuat, sepertinya itu adalah masalah jaringan di pihak saya dan saya salah berasumsi bahwa mereka sedang offline.

Terima kasih telah menunjukkan repo Desain.

desain baru datang? Bersemangat!