uniapp でミニマリストデザインを実現する方法-uni-app-php.cn

uniapp でミニマリストデザインを実現する方法

WBOY

リリース： 2023-07-04 22:49:08

オリジナル

1423 人が閲覧しました

uniapp でミニマリストデザインを実装する方法

ミニマリストデザインは、シンプル、クリーン、正確な方法で情報を表現し、提供するデザインスタイルです。今日のペースの速い生活の中で、ミニマリストのデザインはますます多くの人に好まれ、追求されています。 uniapp では、いくつかの簡単なテクニックを通じてミニマリストデザインの効果を実現することもできます。

1. 色の選択
色はデザインの非常に重要な部分であり、情報や感情を表現する重要な方法の 1 つです。ミニマルなデザインでは、色の選択はシンプルでありながら落ち着いた雰囲気を持っている必要があります。伝統的なミニマリストのデザインで一般的に使用される色は、黒、白、グレー、および少量の寒色です。

uniapp では、以下に示すように、グローバル設定を使用してインターフェイスの色を統一できます。

<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. タイポグラフィとレイアウト
ミニマリストのデザインは、タイポグラフィとレイアウトに重点を置いています。一貫性。 uniapp では、以下に示すように、フレックスレイアウトとグリッドレイアウトを通じてこれを実現できます:

<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. アイコンと画像の選択
ミニマリストデザインでは、アイコンと画像の選択も簡潔かつ完全である必要があります。静けさの。シンプルな線やシンプルな構成のアイコンや写真をいくつか選択できます。

uniapp では、uni-icons プラグインを使用して、以下に示すように、よく使用されるアイコンをいくつか追加できます:

<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. アニメーション効果
アニメーション効果により、ページの活力ダイナミックかつインタラクティブ。ミニマリストデザインでは、アニメーション効果はシンプルであり、誇張すべきではありません。

uniapp では、以下に示すように、uni-transition プラグインを使用していくつかの簡単なアニメーション効果を実現できます。

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

ログイン後にコピー

上記は、 uniapp でミニマリストなデザインを実現するためのいくつかの簡単なテクニックです。合理的な色の選択、簡潔で統一されたタイポグラフィとレイアウト、シンプルで落ち着いたアイコンと写真、適度なアニメーション効果を通じて、ミニマリストなデザインスタイルのインターフェイスを実現するのに役立ちます。もちろん、デザインのスタイルは人によって異なりますので、ルールに固執することなく、状況に応じて柔軟に使用できます。

以上がuniapp でミニマリストデザインを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。