Comment obtenir un design minimaliste dans Uniapp

Comment mettre en œuvre un design minimaliste dans uniapp

Le design minimaliste est un style de conception qui exprime et fournit des informations de manière simple, propre et précise. Dans la vie trépidante d’aujourd’hui, le design minimaliste est apprécié et recherché par de plus en plus de personnes. Dans uniapp, nous pouvons également obtenir l’effet d’un design minimaliste grâce à quelques techniques simples.

1. Sélection des couleurs
La couleur est une partie très importante du design et l'un des moyens importants d'exprimer des informations et des émotions. Dans un design minimaliste, les choix de couleurs doivent être simples tout en dégageant une sensation de calme. Les couleurs couramment utilisées dans le design minimaliste traditionnel sont le noir, le blanc, le gris et une petite quantité de couleurs froides.

Dans uniapp, nous pouvons unifier les couleurs de l'interface en utilisant les paramètres globaux, comme indiqué ci-dessous :

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

2. Typographie et mise en page
Le design minimaliste se concentre sur la simplicité et la cohérence de la typographie et de la mise en page. Dans uniapp, nous pouvons y parvenir grâce à une disposition flexible et une disposition en grille, comme indiqué ci-dessous :

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

3. Sélection d'icônes et d'images
Dans un design minimaliste, la sélection d'icônes et d'images doit également être simple et calme. Vous pouvez choisir des icônes et des images avec des lignes et des compositions plus simples.

Dans uniapp, nous pouvons utiliser le plug-in uni-icons pour ajouter rapidement des icônes couramment utilisées, comme indiqué ci-dessous :

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

4. Effets d'animation
Les effets d'animation peuvent augmenter la vivacité et l'interactivité de la page. Dans un design minimaliste, les effets d’animation doivent être simples et non exagérés.

Dans uniapp, nous pouvons utiliser le plug-in uni-transition pour obtenir des effets d'animation simples, comme indiqué ci-dessous :

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

Ci-dessus sont quelques techniques simples pour obtenir un design minimaliste dans uniapp, grâce à une sélection de couleurs raisonnable et une simplicité de composition unifiée. et la mise en page, des icônes et des images simples et calmes et des effets d'animation modérés peuvent nous aider à obtenir une interface de style design minimaliste. Bien entendu, les styles de conception varient d’une personne à l’autre et peuvent être utilisés de manière flexible en fonction de circonstances spécifiques sans respecter de règles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!