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

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:

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.

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:

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.

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).

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.

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.