Neumorphism: Apa Itu dan Contoh CSS

Dalam beberapa tahun kebelakangan ini, Reka bentuk UI telah menyaksikan kemunculan pelbagai trend, salah satunya ialah Neumorphism. Aliran reka bentuk ini menggabungkan gaya lembut, inset dengan estetika moden, mencipta ilusi kedalaman dan lapisan. Dalam siaran ini, kami akan meneroka prinsip Neumorphism, faedah dan kelemahannya serta memberikan contoh praktikal dengan coretan kod CSS untuk membantu anda melaksanakan reka bentuk bergaya ini dalam projek anda sendiri.

Apakah Neumorphism?

Neumorphism, singkatan kepada "new skeuomorphism", ialah pendekatan reka bentuk yang menggunakan bayang-bayang lembut dan sorotan untuk mencipta penampilan tiga dimensi. Tidak seperti reka bentuk skeuomorphic tradisional, yang meniru objek dunia sebenar, Neumorphism menyasarkan rasa moden yang lebih halus. Ia sangat bergantung pada cahaya dan bayang-bayang untuk mencipta deria kedalaman, selalunya menggunakan palet warna monokromatik.

Ciri-ciri Utama Neumorfisme

1. Bayang-bayang Lembut: Unsur-unsur neumorfik biasanya mempunyai bayang-bayang dalam dan luar yang menghasilkan rupa yang lembut dan terangkat.
2. Skim Warna Monokromatik: Menggunakan rona yang serupa untuk latar belakang dan elemen menghasilkan rupa yang lancar.
3. Estetik Minimalis: Neumorfisme selalunya merangkumi minimalisme, memfokuskan pada kesederhanaan dan kebolehgunaan.
4. Maklum Balas Interaktif: Tuding dan keadaan aktif selalunya melibatkan penukaran bayang-bayang atau warna untuk memberikan maklum balas kepada pengguna.

Kelebihan Neumorphism

• Rayuan Estetik: Neumorfisme boleh mencipta antara muka menarik secara visual yang menarik minat pengguna.
• Persepsi Kedalaman: Penggunaan bayang-bayang memberikan rasa lapisan, meningkatkan keseluruhan pengalaman pengguna.
• Menggalakkan Interaksi: Isyarat visual boleh membuatkan pengguna lebih cenderung untuk berinteraksi dengan elemen UI.

Cabaran Neumorfisme

• Isu Kebolehaksesan: Reka bentuk kontras dan halus yang rendah mungkin tidak mudah dilihat oleh semua pengguna, terutamanya mereka yang mengalami masalah penglihatan.
• Terlalu banyak: Penggunaan Neumorphism yang berlebihan boleh menyebabkan kekacauan visual dan boleh menjadikan antara muka lebih sukar untuk dinavigasi.
• Prestasi: Kesan bayang-bayang berat boleh menjejaskan prestasi, terutamanya dalam peranti mudah alih.

Contoh CSS Neumorphism

Mari kita menyelami beberapa contoh CSS praktikal untuk membantu anda membuat komponen UI Neumorphic.

Butang Neumorphic

<button class="neumorphic-button">Click Me</button>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.neumorphic-button {
    padding: 15px 30px;
    border-radius: 12px;
    border: none;
    background: #e0e0e0; /* Same as body color */
    box-shadow: 8px 8px 15px #a3b1c6,
                -8px -8px 15px #ffffff; /* Soft shadows */
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.neumorphic-button:hover {
    box-shadow: 4px 4px 10px #a3b1c6,
                -4px -4px 10px #ffffff; /* Change shadows on hover */
}

Kad Neumorphic

<div class="neumorphic-card">
    <h2>Neumorphic Card</h2>
    <p>This is an example of a neumorphic card.</p>
</div>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-card {
    padding: 20px;
    border-radius: 15px;
    background: #e0e0e0;
    box-shadow: 10px 10px 20px #a3b1c6,
                -10px -10px 20px #ffffff; /* Neumorphic shadows */
    width: 300px;
    text-align: center;
    transition: all 0.3s ease;
}

.neumorphic-card:hover {
    box-shadow: 5px 5px 15px #a3b1c6,
                -5px -5px 15px #ffffff; /* Lighter shadows on hover */
}

Medan Input Neumorfik

<input type="text" class="neumorphic-input" placeholder="Type something...">

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-input {
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: #e0e0e0;
    box-shadow: inset 6px 6px 10px #a3b1c6,
                inset -6px -6px 10px #ffffff; /* Inner shadows for depth */
    width: 300px;
    transition: all 0.3s ease;
}

.neumorphic-input:focus {
    box-shadow: inset 4px 4px 8px #a3b1c6,
                inset -4px -4px 8px #ffffff; /* Adjust shadows on focus */
}

Suis Togol Neumorphic

<div class="neumorphic-toggle">
    <input type="checkbox" id="toggle" />
    <label for="toggle">Toggle</label>
</div>

body {
    background-color: #e0e0e0; /* Light background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.neumorphic-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.neumorphic-toggle input {
    display: none; /* Hide the checkbox */
}

.neumorphic-toggle label {
    padding: 10px;
    border-radius: 20px;
    background: #e0e0e0;
    box-shadow: 6px 6px 12px #a3b1c6,
                -6px -6px 12px #ffffff;
    position: relative;
    transition: all 0.3s ease;
}

.neumorphic-toggle input:checked + label {
    box-shadow: inset 6px 6px 12px #a3b1c6,
                inset -6px -6px 12px #ffffff;
    background: #d1d1d1;
}

Apl untuk Mencipta Laman Web yang Merangkul Neumorfisme dalam Reka Bentuk

Alat reka bentuk yang membolehkan anda mencipta reka bentuk neumorfik dan mengeksportnya sebagai CSS:

Lawati Neumorphism.io

Kesimpulan

Neumorphism ialah trend reka bentuk yang menawan yang menawarkan perspektif segar pada reka bentuk UI, menekankan kedalaman dan interaktiviti. Walaupun ia mempunyai kelebihannya, termasuk daya tarikan estetik dan penglibatan pengguna, pereka bentuk juga mesti berhati-hati dengan cabaran kebolehaksesan dan kebolehgunaannya. Dengan melaksanakan contoh CSS yang disediakan, anda boleh mula mencipta antara muka Neumorphic yang bukan sahaja moden dan menarik secara visual tetapi juga berfungsi dan mesra pengguna.

Seperti mana-mana arah aliran reka bentuk, sentiasa pertimbangkan khalayak sasaran dan pastikan antara muka anda kekal boleh diakses oleh semua pengguna. Selamat merancang!

Atas ialah kandungan terperinci Neumorphism: Apa Itu dan Contoh CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!