Styling tombol desain datar bersih sehingga mereka menunjukkan keterjangkauan, dan terlihat 'dirancang dengan baik'

10

Saya memulai kerangka CSS kecil baru-baru ini. ( http://mincss.com kalau ada yang tertarik) Saya segera mengeluarkan desain awal untuk beberapa tombol. Setelah meminta umpan balik tentang UX StackExchange (dan menerima banyak umpan balik yang baik), saya disarankan untuk datang ke sini untuk saran tambahan tentang peningkatannya.

Seperti inilah bentuknya sekarang, setelah umpan balik UXStackExchange. Saya menghapus batas hitam, menambahkan "bayangan" 3px, dan menghapus bevel 1px:

masukkan deskripsi gambar di sini

Saya akan mencari tampilan desain datar.

Saya memiliki 3 pertanyaan tersisa:

  • Apakah tombol-tombol ini menunjukkan harga yang cukup? (Ini tampaknya menjadi masalah dengan desain datar)
  • Apakah Anda menyarankan menambahkan gradien kecil?
  • Apakah mereka terlihat dirancang dengan baik? (subyektif saya tahu, tapi saya tidak bisa memikirkan cara yang lebih baik untuk menanyakan hal ini)

Saya akan dengan senang hati menyambut (dan mungkin menggunakan) umpan balik pada tombol-tombol ini.

Owen Versteeg
sumber
Jika Anda ingin mempertahankan bayangan, pertimbangkan menjadikannya bayangan alpha sejati. Sesuatu seperti RGBA (0,0,0, .2) jika bukan alpha, pertimbangkan abu-abu yang jauh lebih terang.
DA01

Jawaban:

9

Saya pikir gradien yang sangat halus pasti akan meningkatkan estetika tombol. Karena gaya Windows 8 "Metro" adalah pendukung besar gaya ini, saya akan menggunakannya sebagai contoh:

Aplikasi untuk Windows 8

Sepintas "ubin" terlihat seperti warna datar, tetapi jika Anda perhatikan dengan cermat ada sedikit gradien dari kiri ke kanan. Ini lebih terlihat pada beberapa daripada yang lain, tetapi mereka semua memilikinya. Seperti kata Yisela, Anda ingin gradien ini hampir tidak terlihat, hampir di bawah sadar.

JohnB
sumber
2
Ini sebelumnya: i.imgur.com/LVVVWd8.png dan berikut ini: i.imgur.com/jDb07Y2.png Apa pendapat Anda? (Ini adalah latar belakang: -webkit-gradient (linear, kiri tengah, kanan tengah, dari (rgb (44, 175, 73)), hingga (rgb (53, 206, 86))))
Owen Versteeg
7

Seperti yang Anda sebutkan, ketika mendesain tombol datar Anda perlu mengawasi beberapa hal. Yang pertama adalah, saya akan mengatakan: Apakah itu terlihat seperti tombol?

Ini bukan berarti sesuatu yang hanya bergantung pada tombol, tetapi pada elemen UI lainnya. Jika Anda menggunakan tombol datar, saya sarankan Anda menghindari bentuk / gaya serupa di tempat lain. Anda perlu mempertahankan kosakata visual sehingga orang dapat langsung mengenali elemen-elemen ini sebagai tombol dan bukan sesuatu yang lain.

Bayangan bagus untuk ini, karena memberi kesan volume. Karena itu, mereka lebih mudah dilihat. Plus, kita terbiasa dengan tombol yang memiliki efek itu. Namun saya akan mempertimbangkan menggunakan warna yang mirip dengan warna tombol. Misalnya, alih-alih menggunakan hitam untuk tombol merah, gunakan merah dengan opacity 50%. Pilihan lain untuk membuat tombol lebih jelas adalah menambahkan ikon (putih, padat).

Saya akan sangat berhati-hati dengan gradien . Bukan karena mereka buruk, tetapi karena dalam tren flat super sederhana saat ini, mereka tidak cocok dengan itu. Apalagi jika warna atau corak yang Anda gunakan sangat berbeda. Gradien kecil dapat terlihat sangat bagus, tetapi harus kecil, nyaris tidak terlihat.

Singkatnya, saya suka penampilan mereka. Saya hanya akan mengubah warna bayangan menjadi sesuatu yang lebih terang, dan mungkin membuat teks latar depan lebih terang juga, putih mungkin. Fonnya bagus dan Anda menggunakan bantalan yang bagus, pekerjaan yang sangat bagus! Saya melihat Anda menggunakannya di situs, tetapi di bawahnya Anda memiliki serangkaian pemberitahuan dalam warna-warna pastel yang sebenarnya terlihat sedikit mirip. Saya akan mempertimbangkan kembali gaya mereka, karena mereka dapat sedikit membingungkan, dan saya akan mencoba menggunakan warna yang sama di seluruh situs (semua pastel, atau semua kontras).

Yisela
sumber
Saya mengambil ide Anda tentang bayangan warna: i.imgur.com/525NqBJ.png Saya setuju bahwa gradien apa pun harus kecil; Saya tidak berpikir saya akan menambahkan satu. Apa pendapat Anda tentang sudut bundar pada tombol? Menurut Anda bagaimana saya harus mengubah notifikasi? Terima kasih!
Owen Versteeg
@WenVersteeg Terlihat bagus! Saya suka mereka. Sudut bundar juga umumnya terlihat bagus, Anda mungkin perlu mempertimbangkan untuk menambahkannya ke elemen lain juga (input, mungkin?). Tentang notifikasi, bagaimana dengan perbatasan 1px dengan warna lebih gelap dengan warna yang sama? Sesuatu seperti ini
Yisela
2

Meskipun saya bisa menghormati membuat tombol minimal seperti itu, Anda benar-benar perlu mempertimbangkan jika / bagaimana mereka dapat diterapkan di web pada situs web yang berbeda, karena Anda membuat kerangka kerja. Jika Anda menyediakan tombol, Anda harus memastikan untuk menyediakan segala hal yang mungkin digunakan seseorang seperti tabel, formulir, dll. (Yang saya yakin Anda masih mengerjakannya).

Lihatlah Bootstrap jika Anda belum melakukannya. Bootstrap adalah kerangka kerja CSS yang sangat sederhana dan bersih yang dapat dengan mudah diadaptasi atau diintegrasikan ke situs web lain dan mungkin memberi Anda beberapa ide.

Sekarang sejauh tombol aktual ini pergi saya akan bermain-main dengan perbatasan, karena ini membantu merangkum komponen dan perbatasan cukup umum untuk banyak tombol. Saya memeriksa situs web dan saya menyukai status hover / klik dan saya pikir Anda melakukannya dengan baik.

Jika Anda ingin memperkenalkan gradien, konsisten dan pastikan Anda menggunakannya pada elemen lain juga, kalau tidak Anda akan memiliki kedalaman bersaing yang hanya akan mengganggu.

Hanna
sumber
Saya telah melihat Bootstrap (agak sulit untuk tidak) dan saya telah membuat beberapa situs dengannya sebelumnya. Masalah saya dengan Bootstrap adalah bahwa itu adalah kerangka kerja yang besar - beberapa puluh kilobyte - dan sangat umum akhir-akhir ini. Saya telah membuat formulir (lebih jauh ke bawah pada halaman) serta tabel. Ketika saya bertanya di UX StackExchange, kebanyakan orang mengatakan untuk menutup perbatasan, yang menarik - yang saya lakukan. Saya tidak berpikir saya akan memperkenalkan gradien. Bagaimana Anda menyukai perbatasan ini? i.imgur.com/OlOy5pN.png
Owen Versteeg
0

Kancing-kancingnya terlihat bagus, namun jenis kancing yang menunjukkan harga dan nuansa dalam gaya datar yang umum adalah di mana bagian bayangan ditempatkan adalah strip kecil di bagian bawah elemen utama (tombol) dan sebagian besar warna yang lebih gelap dari warna tombol.

Harish Chouhan
sumber