
Kurangi antarmuka hingga saja Sangat Melestarikan elemen penting adalah salah satu tugas paling memuaskan dalam desain.
Pertama, Anda melihat ada duplikasi antara dua elemen. Kemudian Anda mendapatkan abstraksi visual baru untuk menangani kedua kasus tersebut. Terakhir, Anda menggabungkan elemen-elemen ini menjadi versi yang lebih sederhana. Keterampilan ini sangat penting bagi desainer visual.
Ini adalah kepuasan yang sama yang Anda dapatkan saat memfaktorkan ulang kode Anda. aku serius! Jika kita mengubah referensi “kode”, Anda akan mengira Tuan Kerievsky sedang berbicara tentang “antarmuka”:
Melalui perbaikan desain yang berkelanjutan [an interface]kami membuat kolaborasi semakin mudah. Hal ini sangat kontras dengan apa yang biasanya terjadi: sedikit pemfaktoran ulang dan banyak fokus pada penambahan fitur baru dengan mudah. Jika Anda mempraktikkan kebersihan pemfaktoran ulang berkelanjutan, Anda akan lebih mudah melakukan penskalaan dan pemeliharaan [an interface].
——Joshua Krievsky, Pola pemfaktoran ulang.
Desain ulang terbaru GitHub adalah contoh sempurna dari pemfaktoran ulang visual. Antarmuka lama, meskipun sangat berguna, menjadi semakin membingungkan seiring bertambahnya fitur baru selama bertahun-tahun.


Desain baru masih memiliki semua fungsi desain lama (termasuk API eksternal jika Anda mau), namun telah ditata ulang sepenuhnya untuk menekankan fungsionalitas umum.
GitHub melakukan banyak hal dengan benar; mereka sebenarnya bisa melangkah lebih jauh; dan kemudian, seperti biasa dengan desain ulang, mereka melakukan beberapa kesalahan. Saat Anda memfaktorkan ulang desain Anda, ada beberapa hal yang perlu Anda perhatikan…
Lakukan hal yang sama dengan berbagai cara.
Antarmuka GitHub lama memiliki Empat Berbagai cara untuk menampilkan bilangan bulat di samping label:

Ada banyak cara berbeda untuk memvisualisasikan ide yang sama. Semua perlakuan berbeda ini dapat membuat halaman terasa lebih berantakan. Kecuali Anda memiliki alasan bagus untuk membuat elemen visual sedikit berbeda satu sama lain, Anda sebaiknya menjaga semuanya tetap konsisten.
Desain baru GitHub menyederhanakan hal ini tiga Beda caranya, tapi menurut saya bisa diringkas lebih lanjut sebagai berikut dua:

Bintang Dan garpu adalah inti dari cara kita memandang repositori di GitHub, jadi saya tidak ingin terlalu mengacaukannya. Jumlah permintaan penerbitan dan penarikan sangat berguna, sehingga jumlahnya juga dipertahankan. Namun jumlah cabang dan tag tampaknya ditambahkan hanya karena keduanya Bisa Ya. Saya tidak pernah peduli tentang berapa banyak cabang atau tag yang dimiliki suatu repositori.
Dengan memindahkan semua penghitungan ke navigasi sidebar, kami memperoleh beberapa kemenangan bagus:
-
Sekarang kita hanya punya dua Cara menampilkan hitungan.
-
Kita tidak perlu lagi menambahkan gangguan pada halaman melalui penghitungan cabang dan tag. Faktanya, kita bisa melangkah lebih jauh dan bahkan menggabungkannya ke dalam tag navigasi yang sama.
-
kita bisa menjadi lebih menonjol Penyumbang Letakkan di bawah untuk menghitung Kode program. Saya pikir GitHub harus lebih menekankan pada kontributor karena ini kuat. Hal ini tidak hanya akan membuat repositori terasa lebih seperti sebuah komunitas, namun menurut saya hal ini juga akan mendorong permintaan tarik untuk masuk ke dalam daftar.
Ketidakkonsistenan juga tidak terbatas pada penampilan saja. Seringkali saya mendapatkan desain yang berisi konten duplikat yang dapat digabungkan jika saya menghasilkan abstraksi yang lebih baik. Contoh yang bagus adalah nama repositori dan jalur arsip:

Tidak ada alasan mengapa kami tidak dapat menggabungkan dua contoh “analytics.js” ke dalam satu jalur. Lalu, karena kita bekerja dengan media interaktif, kita dapat melakukan hal-hal seperti mengurangi ukuran font untuk jalur arsip yang panjang.

Pada saat yang sama, kita dapat menghilangkan penekanan pada pengalih cabang karena jarang digunakan. Ini juga membawaku…
Fitur yang jarang digunakan menempati real estat utama.
Saat Anda mendesain antarmuka, Anda selalu memanfaatkan fungsionalitas secara ekstensif. Memiliki ciri-ciri sebagai berikut setiap orang Untuk penggunaan sehari-hari, ada pula yang hanya bisa digunakan oleh pengguna tingkat lanjut Tahu tentang. Sebagai seorang desainer, tugas Anda adalah menyeimbangkannya.
Salah satu cara tercepat untuk mengacaukan antarmuka adalah dengan mengalokasikan ruang layar yang menonjol ke operasi yang jarang digunakan.
ini Kloning di Mac Tombol adalah contoh sempurna dari fitur yang kurang dimanfaatkan yang menyita ruang layar yang berharga. Rata-rata pengguna jarang, jika pernah, perlu mengklik tombol ini. Namun karena alasan tertentu, elemen ini dulunya merupakan salah satu elemen pertama di halaman, tepat di bawah deskripsi repositori!
Saya mengatakan “untuk beberapa alasan,” tapi alasannya sebenarnya cukup jelas: GitHub memerlukan tempat untuk meletakkan tombol itu, dan toolbar-nya di sana! Menambahkan tombol tambahan itu mudah. Namun inilah sebabnya antarmuka perlu sering difaktorkan ulang, sama seperti pustaka kode. Perbaikan cepat sangat bagus di saat-saat yang panas, tetapi seiring waktu Anda dapat menumpuk hutang yang menurunkan kualitas produk Anda.
Desain baru GitHub menghilangkan banyak hutang dan menempatkan fokus pada konten repositori. Fitur yang jarang digunakan telah disembunyikan atau dipindahkan lebih jauh ke bawah halaman.
Karena itu, mari kita lihat seluruh masukan URL klon lama:

Mengkloning repositori jarang terjadi, tetapi di antarmuka lama, ini adalah salah satu hal pertama yang dilakukan di halaman. Tidak hanya itu, setiap tombol gaya Bootstrap membutuhkan banyak perhatian.
Menggunakan tombol bergaya Bootstrap untuk setiap tindakan di antarmuka Anda memang mudah, tetapi ini merupakan anti-pola yang sangat besar. Mereka bagus untuk operasi utama yang sering digunakan, tetapi menggunakannya untuk terlalu banyak operasi sekunder dan antarmuka Anda akan mulai terlihat berantakan.
Dalam desain barunya, GitHub secara signifikan meremehkan pentingnya fitur kloning, tapi menurut saya mereka bisa melangkah lebih jauh.
Desain antarmuka memiliki keunggulan besar dibandingkan desain tipografi karena Anda dapat dengan mudah menyembunyikan fitur-fitur canggih hingga Anda membutuhkannya. Dengan cara ini mereka tidak akan menghalangi 90% kasus penggunaan. Kita dapat menerapkan ide ini untuk mengkloning URL dan membuatnya lebih sederhana:

Pada pandangan pertama, sepertinya kita telah kehilangan banyak fungsi, tapi itulah keindahan antarmuka interaktif yang belum kita miliki. Mengklik tombol klon akan membuka jendela popup kecil dengan masukan URL yang familiar:

Bahkan lebih baik lagi, input ini melakukan fokus otomatis! Dibandingkan dengan alur kerja kloning saya saat ini Klik dua kali untuk memilih+cmd-csebenarnya menggunakan popup dengan fokus otomatis Klik + cmd-c.
Perubahan sederhana seperti ini bisa sangat membantu dalam mengurangi kebisingan di halaman Anda. Satu hal lagi yang perlu diperhatikan…
Terlalu banyak gangguan visual.
Bilah bahasa baru adalah salah satu bagian paling kontroversial dari desain baru GitHub. Ada alasan bagus untuk ini.

Menempatkan kolom bahasa berwarna merah terang di antara judul dan konten halaman repositori membuat halaman tersebut jauh lebih sulit untuk diurai. Mata Anda ingin beralih di antara dua informasi penting: identitas repositori di bagian atas, termasuk judul, deskripsi, dan bintang, serta konten repositori: kode dan file readme di bagian bawah.
GitHub harus belajar dari Facebook.
Apa pun pendapat Anda tentang Facebook, keputusan mereka untuk beralih dari satu gambar profil ke kombinasi gambar profil persegi dan foto sampul horizontal adalah hal yang jenius. Gabungan kedua foto tersebut adalah Sangat Berhasil merangkum “identitas” pengguna. Twitter, Medium, dan Google Plus juga meminjam konsep ini karena berhasil.
Saya pikir abstraksi yang sama dapat diterapkan pada repositori.
Logo repositori dapat ditempatkan di atas headernya, bukan bilah bahasa berwarna yang menghalangi jalur ke file kode dan readme:

Hal ini memudahkan mata Anda untuk memindai langsung ke konten repositori daripada terganggu di tengah jalan.
Atau bayangkan membiarkan pemilik repositori memilih gambarnya sendiri:

Mudahnya, ini cocok dengan arah desain yang telah diterapkan GitHub di halaman lain situsnya, yaitu Perusahaan dan Tentang, di mana terdapat gambar pada lapisan di bawah bagian putih halaman. (Jika mereka ingin bersenang-senang, mereka bahkan dapat membuat latar belakang menjadi paralaks!)

Anda dapat melakukan lebih banyak hal setelah melakukan refactoring.
Jika Anda melihat antarmuka lama GitHub dan disarankan untuk menambahkan gambar pilihan pengguna di latar belakang, semua orang akan berkata, “Ya Tuhan, tidak!”, dan itu benar. Bahkan dengan potensi manfaatnya, Jalan Terlalu mengganggu dan tidak sebanding dengan biayanya.
Namun setelah memfaktorkan ulang antarmuka, fitur ini tidak lagi terasa di luar jangkauan. Masih terdapat beberapa masalah, namun masalah ini dapat dengan mudah diselesaikan oleh desainer dan pemrogram yang pandai, yang banyak dimiliki oleh GitHub.
Inilah yang akhirnya saya dapatkan. Saya melakukan banyak optimasi kecil selama prosesnya. Anda dapat melihat keseluruhan timeline file yang saya kerjakan di LayerVault.


Itulah indahnya memfaktorkan ulang antarmuka Anda: dengan menghapus semua informasi dan utang visual, Anda memiliki lebih banyak ruang untuk membayangkan masa depan baru untuk produk Anda. Saya sangat gembira dengan pemfaktoran ulang terbaru GitHub, dan saya tidak sabar untuk melihat apa yang mereka lakukan selanjutnya.
P.S. Jika ada orang di GitHub yang membaca ini, beri tahu saya bahwa Anda sedang mengerjakan pembunuh Google Grup. setiap hari aku berharap pertanyaan Adakan bagian diskusi karena saya sangat ingin berdebat tentang alur dan sintaksis serta segala hal lainnya dengan orang lain Elemen Setiap orang.