IHM Mobile UI comment faire

Bonsoir à  tous,


 


je travaille actuellement sur l'aspect graphique de mon appli.


En surfant, je trouve des interfaces comme celle en PJ qui me plaisent bien, je trouve cela simple, sexy et efficace.


 


Evidement, on ne peut pas faire ça sans écrire de code, savez-vous donc comment (à  partir de la capture de droite) :


1/ Passer en noir la partie haute de l'écran (ça ne devrait pas être trop difficile et je n'ai pas encore cherché j'avoue)


2/ Créer des "bulles" : rectangle aux angles arrondis et ombrés comme ceux au centre de l'écran ?


3/ Faire un effet ombré (ombragé ?? bref, une ombre projetée je veux dire) sur les haut et bas de l'écran ?


 


Merci beaucoup pour votre aide.


 


Julien


Réponses

  • Bon... ok, j'ai cherché 2mn pour le premier point et j'ai trouvé :



    navigationController?.navigationBar.barTintColor = UIColor.green
  • Pour le point 2 : utiliser cornerRadius 


    cornerRadius

    The radius to use when drawing rounded corners for the layer's background. Animatable.

     

    Pour le point 3 : un exemple 


  • Merci pour ton aide rapide helio.


  • CéroceCéroce Membre, Modérateur
    novembre 2017 modifié #5


     


    3/ Faire un effet ombré (ombragé ?? bref, une ombre projetée je veux dire) sur les haut et bas de l'écran ?




    CALayer.shadowOpacity, .shadowRadius, .shadowOffset, .shadowColor.


     


    Dans ton exemple, ça me paraà®t carrément exagéré. Est-ce une copie d'écran d'une vraie application? J'en doute.


  • LeChatNoirLeChatNoir Membre, Modérateur

    Oui, c'est assez simple.


    Sinon, tu as ça : https://github.com/aclissold/CardView


     


    Et/ou ces 2 framework qui sont assez sympas car ils "simulent" tout ce qui est material design :


    https://github.com/CosmicMind/Material


     


    et https://github.com/material-components/material-components-ios


     


    Pas testé perso mais je vais sans doute m'y mettre dans les mois qui viennent...


  • Merci pour vos réponses.


    Pas sur que cela soit une vraie app, mais en tout cas c'est joli.


  • CéroceCéroce Membre, Modérateur
    décembre 2017 modifié #8

    Ouais, mais c'est juste un exercice de graphiste, pas de designer: aucune contrainte n'est prise en compte.


     


    Ci-joint, mes annotations.




  • Ouais, mais c'est juste un exercice de graphiste, pas de designer: aucune contrainte n'est prise en compte.


     


    Ci-joint, mes annotations.


    attachicon.gifpost-6242-0-53060500-1511805815.png




     


    Oui en effet, je comprends mieux ce que tu veux dire.


     


    Ce genre de truc aussi ça le fait bien mais ça ne semble pas réaliste pour un franc :


    https://www.behance.net/gallery/53917017/100-Best-Mobile-App-Interaction

  • CéroceCéroce Membre, Modérateur

    Oui, il y a une bonne moitié d'exemples qui perdraient complètement l'utilisateur.


     


    Et en pratique, les animations peuvent rapidement devenir pénible. Il faut les utiliser avec parcimonie pour donner des indications à  l'utilisateur quant aux enchainements logiques et avec quels éléments il peut interagir.


     


    Les indications données par Google pour le Material Design, me semblent pertinentes aussi sur iOS:


    https://material.io/guidelines/motion/

  • LeChatNoirLeChatNoir Membre, Modérateur

    +1


    Je trouve que Google innove bcp plus ces derniers temps sur le design et accompagne ses développeurs.


     


    Le design d'iOS11, je le comprends pas bien... Ces gros titre noirs en gras... Je sais pas... Ou alors j'ai loupé un truc ?

  • LarmeLarme Membre
    décembre 2017 modifié #12


    Oui en effet, je comprends mieux ce que tu veux dire.


     


    Ce genre de truc aussi ça le fait bien mais ça ne semble pas réaliste pour un franc :


    https://www.behance.net/gallery/53917017/100-Best-Mobile-App-Interaction




     


    Il y a des animations très sympas. Mais c'est d'un point de vu utilisateur rapide et/ou " graphiste ".


    Parce que dans la pratique, pas mal de ces animations/designs ne sont pas pratiques du tout. ça fait beau sur un folio.


     


    Sinon le gros problème des animations, ce sont les animations.


    Je veux dire que d'une part tous les graphistes/designers ne savent pas forcément en faire (c'est un autre pan/branche de leur métier), et ce qui comme d'habitude peut-être " rapidement " fait sur leur logiciel d'animation ne l'est pas forcément pour nous.


    Il y a d'abord la partie où on comprend l'animation, et vu que les conversations entre designers et développeurs ne sont pas toujours évidentes pour des trucs statiques, de manière animée, j'ai déjà  peur.


    Mais la second grosse partie, c'est de faire l'animation par code. La gestion des vues, etc n'est pas forcément en adéquation immédiate avec les outils qu'on a. Si on prend le cas d'un UITableView, c'est une UITableView, des UITableViewCells, et c'est géré par datasource/delegate, etc. C'est pas aussi évident de dire à  une vue d'aller d'une cellule à  une autre avec animation. Surtout que le développeur pense en général au cas limite (ce qui n'est pas forcément le cas des autres).


    Et enfin, la dernière partie, principale raison pour laquelle on n'en fait pas énormément : le temps. L'investissement pour créer une animation comparée à  l'impact du " wahou ", à  la deadline, au prix du développeur à  l'heure, etc. Pour des applications pérennes où on a des développeurs toute l'année, où l'application est dans une phase " finalisée " (tout est fonctionnelle, on rajoute du vernis via des animations), ok, mais c'est n'est pas le cas de tout le monde.




  • Il y a des animations très sympas. Mais c'est d'un point de vu utilisateur rapide et/ou " graphiste ".


    Parce que dans la pratique, pas mal de ces animations/designs ne sont pas pratiques du tout. ça fait beau sur un folio.


     


    Sinon le gros problème des animations, ce sont les animations.


    Je veux dire que d'une part tous les graphistes/designers ne savent pas forcément en faire (c'est un autre pan/branche de leur métier), et ce qui comme d'habitude peut-être " rapidement " fait sur leur logiciel d'animation ne l'est pas forcément pour nous.


    Il y a d'abord la partie où on comprend l'animation, et vu que les conversations entre designers et développeurs ne sont pas toujours évidentes pour des trucs statiques, de manière animée, j'ai déjà  peur.


    Mais la second grosse partie, c'est de faire l'animation par code. La gestion des vues, etc n'est pas forcément en adéquation immédiate avec les outils qu'on a. Si on prend le cas d'un UITableView, c'est une UITableView, des UITableViewCells, et c'est géré par datasource/delegate, etc. C'est pas aussi évident de dire à  une vue d'aller d'une cellule à  une autre avec animation. Surtout que le développeur pense en général au cas limite (ce qui n'est pas forcément le cas des autres).


    Et enfin, la dernière partie, principale raison pour laquelle on n'en fait pas énormément : le temps. L'investissement pour créer une animation comparée à  l'impact du " wahou ", à  la deadline, au prix du développeur à  l'heure, etc. Pour des applications pérennes où on a des développeurs toute l'année, où l'application est dans une phase " finalisée " (tout est fonctionnelle, on rajoute du vernis via des animations), ok, mais c'est n'est pas le cas de tout le monde.




     


    En effet, je me rend bien compte que c'est un autre métier et que cela prend un temps fou à  coder.


    Enfin, le coût de la modification est énorme et nécessite de tout coder. 


    Toutefois quelques animations légères améliorent considérablement l'expérience de l'utilisateur.

Connectez-vous ou Inscrivez-vous pour répondre.