La fin d’année arrive et les bonnes résolutions qui l’accompagnent avec. Oubliez tout ça. Fini les régimes qui ne durent que deux semaines. Ici, vos interfaces vont prendre du poids.

En 2007, c’est la mode du skeuomorphisme, la période d’ultra-réalisme des interfaces. Puis quelques années plus tard, iOS 7 fait sa révolution et impose le flat design.

Force est de constater que nous sommes aujourd’hui probablement plus proches du flat design que du skeuomorphisme. Mais les extrêmes s’attirent et mes interfaces finissent par prendre un peu de poids, dans l’espoir de gagner un peu de fun.

Voici quelques exemples de composants bien garnis.

Le Bouton-Bonbon

Un bouton rondelet avec son bourrelet extérieur et sa forme légèrement enfoncée pouvant épouser votre doigt au toucher.

Non, ce bouton de connexion ne vous demandera pas votre mot de passe.

La magie de cet effet réside dans ces deux éléments :

• Un dégradé légèrement noirci en haut du bouton qui donne cet effet enfoncé.
• Un dégradé blanc vers noir en overlay légèrement flou qui donne un effet de bourrelet et qui ajoute du volume.

Le plus cool, c’est que ça fonctionne bien avec plein de couleurs différentes

struct CandyButtonStyle: ButtonStyle {
    @Environment(\.colorScheme) private var colorScheme
 
    private let cornerRadius: CGFloat = 16
 
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.headline)
            .foregroundStyle(.white)
            .frame(maxWidth: .infinity)
            .padding(.vertical)
            .background {
                LinearGradient(
                    colors: configuration.isPressed ? [
                        .accent.mix(with: .black, by: colorScheme == .light ? 0.3 : 0.5),
                        .accent.mix(with: .white, by: 0.1)
                    ] : [
                        .accent.mix(with: .black, by: 0.14),
                        .accent
                    ],
                    startPoint: .top,
                    endPoint: .bottom
                )
                .clipShape(.rect(cornerRadius: cornerRadius))
                .shadow(
                    color: .black.opacity(0.2),
                    radius: 4,
                    y: 3
                )
            }
            .overlay {
                RoundedRectangle(cornerRadius: cornerRadius - 1)
                    .stroke(LinearGradient(
                        colors: [.white.opacity(0.6), .black.opacity(0.1)],
                        startPoint: .top,
                        endPoint: .bottom
                    ), lineWidth: 1)
                    .padding(1)
                    .blur(radius: 1)
            }
    }
}

La Crunchy-Card

Cette carte au look de papier qui donne un sentiment de rigidité.

• Une légère ombre est suffisante pour donner un peu de relief.
• Ajouter un contour sombre (#ffffff12) donne du volume à la carte.

RoundedRectangle(cornerRadius: 16)
    .fill(.background)
    .overlay {
        RoundedRectangle(cornerRadius: 16)
            .stroke(.black.opacity(0.12))
    }
    .frame(width: 100, height: 100)
    .shadow(
        color: .black.opacity(0.1),
        radius: 10,
        y: 4
    )

La Gummy-Glass

Une variante de la Crunchy-Card avec un arrière plan flou.

Pour les plus nostalgiques : l'arrière plan, c'est cadeau.

• Le dégradé blanc vers noir permet, comme sur le bouton, de donner du relief à la carte.
• Malgré l’effet flou, ajouter une légère ombre apporte un peu de réalisme, sans trop en faire non plus.

RoundedRectangle(cornerRadius: 16)
    .fill(.regularMaterial)
    .overlay {
        RoundedRectangle(cornerRadius: 16)
            .stroke(
                LinearGradient(
                    colors: [
                        .white.opacity(0.5),
                        .black.opacity(0.1)
                    ],
                    startPoint: .top,
                    endPoint: .bottom
                ),
                lineWidth: 2
            )
            .blur(radius: 1)
    }
    .clipShape(.rect(cornerRadius: 16))
    .frame(width: 100, height: 100)
    .shadow(color: .black.opacity(0.2), radius: 20, y: 4)

Quelques astuces

Il existe un tas de termes qui permettent de faire rentrer le design dans des cases, mais il est parfois difficile de savoir ou se situe la limite. N’essayez pas de créer quelque chose juste pour entrer dans cette case.. Le plus important, c’est le style et la cohérence de votre création.

Pour donner un peu de poids à vos interfaces, n’oubliez pas :

• Partez d’un élément plat et essayez de le voir comme une photographie. L’objet doit paraître plus réel, comme si il avait été pris en photo dans votre environnement.
• Dans la vraie vie, rien n’est parfaitement carré ni parfaitement lisse. L’outil de flou peut vous venir en aide si votre élément semble trop irréel.
• Les ombres sont l’outil parfait pour ajouter facilement du volume, mais utilisez-les avec précaution. Une mauvaise cohérence des ombres entre les éléments est vite arrivée et peu rapidement rendre votre design cheap.

Il est maintenant temps pour vous de concevoir votre meilleur Bouncy-Switch.