How to achieve minimalist design in uniapp

How to implement minimalist design in uniapp

Minimalist design is a design style that expresses and delivers information in a simple, clean, and precise way. In today's fast-paced life, minimalist design is liked and pursued by more and more people. In uniapp, we can also achieve the effect of minimalist design through some simple techniques.

1. Color selection
Color is a very important part of design and one of the important ways to express information and emotions. In minimalist design, color choices should be simple yet have a calm feel. Commonly used colors in traditional minimalist design are black, white, gray and a small amount of cool colors.

In uniapp, we can unify the colors of the interface by using global settings, as shown below:

<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. Typography and layout
Minimalist design focuses on typography and layout Simplicity and consistency. In uniapp, we can achieve this through flex layout and grid layout, as shown below:

<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. Icon and picture selection
In minimalist design, the selection of icons and pictures should also be concise And full of calmness. You can choose some icons and pictures with simpler lines and simpler compositions.

In uniapp, we can use the uni-icons plug-in to quickly add some commonly used icons, as shown below:

<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. Animation effects
Animation effects can increase the vitality of the page Dynamic and interactive. In minimalist design, animation effects should be simple and not exaggerated.

In uniapp, we can use the uni-transition plug-in to achieve some simple animation effects, as shown below:

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

The above are some simple techniques to achieve minimalist design in uniapp , through reasonable color selection, concise and unified typography and layout, simple and calm icons and pictures, and moderate animation effects, it can help us achieve a minimalist design style interface. Of course, design styles vary from person to person and can be used flexibly according to specific circumstances without sticking to rules.

The above is the detailed content of How to achieve minimalist design in uniapp. For more information, please follow other related articles on the PHP Chinese website!