Bagaimana untuk mencapai reka bentuk minimalis dalam uniapp-uni-app-php.cn

Bagaimana untuk mencapai reka bentuk minimalis dalam uniapp

WBOY

Lepaskan： 2023-07-04 22:49:08

asal

1427 orang telah melayarinya

Cara melaksanakan reka bentuk minimalis dalam uniapp

Reka bentuk minimalis ialah gaya reka bentuk yang menyatakan dan menyampaikan maklumat dengan cara yang mudah, bersih dan tepat. Dalam kehidupan yang serba pantas hari ini, reka bentuk minimalis disukai dan dikejar oleh semakin ramai orang. Dalam uniapp, kita juga boleh mencapai kesan reka bentuk minimalis melalui beberapa teknik mudah.

1. Pemilihan warna
Warna adalah bahagian reka bentuk yang sangat penting dan salah satu cara penting untuk menyatakan maklumat dan emosi. Dalam reka bentuk minimalis, pilihan warna harus ringkas tetapi mempunyai rasa yang tenang. Warna yang biasa digunakan dalam reka bentuk minimalis tradisional ialah hitam, putih, kelabu dan sedikit warna sejuk.

Dalam uniapp, kami boleh menyatukan warna antara muka dengan menggunakan tetapan global, seperti yang ditunjukkan di bawah:

<style>
    /*全局设置*/
    .page {
        background-color: #fff; /*页面背景色*/
        color: #333; /*文字颜色*/
    }
    /*按钮样式*/
    .btn {
        background-color: #000; /*按钮背景色*/
        color: #fff; /*按钮文字颜色*/
        border-radius: 4px; /*圆角边框*/
        width: 100px; /*按钮宽度*/
        height: 40px; /*按钮高度*/
        text-align: center; /*文字居中*/
        line-height: 40px; /*行高与按钮高度一致*/
    }
</style>

Salin selepas log masuk

2. Tipografi dan reka letak
Reka bentuk minimalis memfokuskan pada kesederhanaan dan ketekalan tipografi dan reka letak. Dalam uniapp, kita boleh mencapai ini melalui susun atur flex dan susun atur grid, seperti yang ditunjukkan di bawah:

<template>
    <view class="page">
        <view class="header">
            <text class="title">标题</text>
        </view>
        <view class="content">
            <view class="item">
                <text class="item-title">项目1</text>
                <text class="item-desc">项目1的描述内容</text>
            </view>
            <view class="item">
                <text class="item-title">项目2</text>
                <text class="item-desc">项目2的描述内容</text>
            </view>
        </view>
        <view class="footer">
            <button class="btn">按钮</button>
        </view>
    </view>
</template>

<style>
    .page {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 100vh;
        padding: 20px;
    }
    .header, .footer {
        width: 100%;
        text-align: center;
    }
    .title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .content {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-gap: 20px;
    }
    .item {
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    .item-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .item-desc {
        font-size: 14px;
        color: #666;
    }
</style>

Salin selepas log masuk

3. Pemilihan ikon dan gambar
Dalam reka bentuk minimalis, pemilihan ikon dan gambar juga harus ringkas dan tenang. Anda boleh memilih beberapa ikon dan gambar dengan garisan yang lebih ringkas dan gubahan yang lebih ringkas.

Dalam uniapp, kita boleh menggunakan pemalam ikon uni untuk menambah beberapa ikon yang biasa digunakan dengan cepat, seperti yang ditunjukkan di bawah:

<template>
    <view class="page">
        <uni-icons type="home" size="36" color="#000"></uni-icons>
        <uni-icons type="message" size="36" color="#000"></uni-icons>
        <uni-icons type="setting" size="36" color="#000"></uni-icons>
    </view>
</template>

Salin selepas log masuk

4. Kesan animasi
Kesan animasi boleh meningkatkan kecerahan dan interaktiviti halaman. Dalam reka bentuk minimalis, kesan animasi hendaklah ringkas dan tidak dibesar-besarkan.

Dalam uniapp, kita boleh menggunakan pemalam peralihan uni untuk mencapai beberapa kesan animasi ringkas, seperti yang ditunjukkan di bawah:

<template>
    <view class="page">
        <view class="box" @click="toggle"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isOpen: false
            }
        },
        methods: {
            toggle() {
                this.isOpen = !this.isOpen;
            }
        }
    }
</script>

<style>
    .page {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: #000;
        animation: toggle 0.3s linear;
    }
    @keyframes toggle {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
</style>

Salin selepas log masuk

Di atas adalah beberapa teknik mudah untuk mencapai reka bentuk minimalis dalam uniapp, melalui pemilihan warna yang munasabah, kesederhanaan Penetapan huruf bersatu dan susun atur, ikon dan gambar yang ringkas dan tenang serta kesan animasi sederhana boleh membantu kami mencapai antara muka gaya reka bentuk minimalis. Sudah tentu, gaya reka bentuk berbeza dari orang ke orang dan boleh digunakan secara fleksibel mengikut keadaan tertentu tanpa mematuhi peraturan.

Atas ialah kandungan terperinci Bagaimana untuk mencapai reka bentuk minimalis dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!