Menjelajahi unsur Ubuntu Phone UI

Dalam artikel ini saya akan fokus pada unsur Ubuntu Phone UI tertentu, berdasarkan gaya panduan resmi yang diberikan oleh Canonical. Waktunya untuk mulai!

Tipografi & Teks

Ubuntu Phone menggunakan font mereka sendiri, tidak mengejutkan disebut 'Ubuntu'. Ini salah satu font terbuka paling populer yang tersedia dan kemungkinan besar Anda akan tersandung pada sebuah proyek baru atau startup yang menggunakan font dari waktu ke waktu. Anda dapat mendownload font disini.

Untuk tetap sejalan dengan panduan gaya saat menggunakan font Ubuntu, Anda harus mengikuti aturan-aturan ini:

  • 'Light weight' adalah berat utama untuk header dan teks tubuh.
  • Gunakan 'Medium' untuk menekankan satu atau dua kata atau untuk menyorot tindakan, seperti peringatan di kotak peringatan.
  • Ini dianjurkan untuk tidak menggunakan huruf miring di UI, sesuai dengan Canonical, terlihat 'lemah' dan mempengaruhi pembacaan.
  • Anda dianjurkan untuk menggunakan berat badan 'Medium' bukan 'Bold'.

Ada spesifikasi meliputi input teks yang dapat Anda baca secara rinci dalam panduan gaya Ubuntu, tapi saya akan merangkum elemen utama.

  • Ada beberapa negara input teks yang merupakan prinsip UX umum dan hampir identik dengan Android.
  • Fields teks memungkinkan pengguna untuk memasukkan satu baris teks dengan atau tanpa validasi data. Mereka dapat spesifik untuk password atau nilai numerik atau non-diedit dengan area teks dinonaktifkan. Membaca Dokumentasi API untuk bidang teks untuk rincian lebih lanjut.
  • Area teks (Multi-line) secara otomatis memecah ke baris baru untuk teks overflow, menciptakan lebih banyak ruang bagi pengguna untuk menulis. Baca lebih lanjut dalam Surat API Dokumentasi.

Berikut referensi rapi di ukuran yang berbeda digunakan untuk ukuran teks default 'media'.

ukuran-media-phone-ubuntu

Itu pada tipografi, Anda tidak akan memiliki masalah untuk pedoman Ubuntu, sebagai UX tidak menciptakan kembali.

Warna

Ada warna-warna tertentu yang digunakan untuk fungsi-fungsi inti dalam Ubuntu, Anda bisa ambil mereka dari tabel ini.

tabel-warna-ubuntu-phone

Anda akan tersandung pada warna 'Aubergine' di buku gaya. Ini digunakan untuk menyorot kata benda, seperti tempat atau nama kontak. Hal ini membuat teks berdiri keluar dari latar belakang abu-abu terang.

Sangat penting untuk menggunakan warna terang dan netral untuk latar belakang, sehingga konten itu sendiri mendapat semua perhatian, tidak latar belakang. Bacakan Color Palette panduan untuk rincian lebih lanjut.

Ikonografi

Ubuntu memiliki pendekatan yang unik untuk ikon yang terutama menarik bagi mereka yang bukan penggemar dari filosofi desain datar populer selama beberapa tahun terakhir.

Unsur kunci di sini adalah Shape Ubuntu yang merupakan persegi dengan sudut membulat dan ikon secara otomatis terpotong sesuai dengan itu. Setelah kliping, bayangan batin diterapkan untuk membuat ikon muncul debossed di UI. Bidang segi empat yang berguna harus buram, tapi dua strip tinggi 16-pixel di bagian atas dan bawah kanvas dapat transparan.

Ikon di Ubuntu juga terdiri dari 'Paper Texture' (bitmap milik lapisan khusus yang disebut 'Texture') dan gradien latar belakang vertikal yang dua warna rona yang sama. Cerah dari keduanya adalah di tepi atas di mana tekstur kertas halus overlay di atasnya.

'Folds' adalah fitur mendefinisikan dari Suru tema ikon. Aplikasi memiliki salah satu dari tiga lipatan terlihat pada latar belakang. Lipatan standar vertikal, horizontal atau 45 derajat berorientasi dan menjalankan melalui pusat ikon. Tempat dan arah mereka dapat bervariasi untuk mengikuti dan menyoroti baris dalam pictogram atau bentuk datar. Mereka juga dapat digunakan sebagai bagian dari cerita.

Sesuatu yang lain yang luar biasa dalam ikonografi Ubuntu adalah bahwa ikon didasarkan pada pola yang sama seperti font. Font adalah pusat dari identitas visual Ubuntu, pola yang dapat diterapkan untuk simbol untuk menentukan kontur mereka.

Ada rincian kecil namun penting lainnya mengenai ikon, sehingga ke panduan gaya sekali lagi jika Anda ingin menyelam lebih dalam.

Responsiveness

Dalam sebuah langkah yang unik, Ubuntu telah diadaptasi kerangka yang mempertahankan pengalaman berseragam dengan unit pengukuran yang ditetapkan oleh grid. Unit jaringan mendefinisikan ritme visual di Ubuntu dan harus digunakan untuk semua pengukuran termasuk ukuran elemen, jarak dan margin dll Semua pengukuran harus menggunakan kelipatan 1 GU (Grid Unit), untuk kebanyakan laptop 8px , retina laptop 16px dan untuk ponsel dan tablet, 18px. Tata letak jaringan bekerja dengan membagi real estate layar menjadi unit jaringan.

Catatan : Dp (kerapatan piksel independen) juga tersedia jika Anda membutuhkan unit lebih kecil dari GU.1DP biasanya diterjemahkan menjadi 1 pixel pada kebanyakan perangkat.

Setelah Anda memahami bagaimana menggunakan Unit Grid, Anda dapat membuat diri Anda terbiasa dengan filosofi desain tentang tanggap, ditentukan dalam panduan gaya.

Ubuntufied?

Dengan OS Firefox untuk ponsel yang ditinggalkan oleh Mozilla, antusiasme dan kepercayaan diri untuk rencana Canonical tidak persis tinggi. Tapi bagi saya, ide yang terkunci ke dalam duopoli Google-Apple menakutkan, sehingga selalu menyegarkan untuk melihat pesaing baru dengan keberanian untuk mencoba sesuatu yang baru.

Leave a Reply

Your email address will not be published. Required fields are marked *