APP INVENTOR 2 - Czyste przednie końcówki (przykład +4): 6 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:29

Zobaczymy, jak możemy sprawić, by Twoja aplikacja na AI2 wyglądała estetycznie:)

Tym razem bez kodu, tylko wskazówki dotyczące płynnej aplikacji, takiej jak przykład 4 na górze!

Kieszonkowe dzieci

Krok 1: Wprowadzenie

Ta instrukcja jest przeznaczona dla wszystkich, którzy uczą się lub używają App Inventor 2, oprogramowania opracowanego przez MIT.

MIT AI2 to darmowa, prosta i niesamowita aplikacja na smartfony, która jest idealna dla każdego DIY Arduino lub urządzenia elektronicznego. Ale jego prostota również sprawia, że jest dość ograniczony, zwłaszcza gdy starasz się, aby Twoja aplikacja wyglądała estetycznie.

Celem tej instrukcji jest przedstawienie kilku wskazówek, jak stworzyć fajny front dla przyszłej aplikacji, który będzie wyglądał prosto i elegancko, jak każdy front.

Zobaczymy podstawy tworzenia aplikacji, która będzie wyglądać tak, jak pokazano w 4 przykładzie.

Zacznijmy !

PS: Jeśli podoba Ci się ten projekt, możesz głosować na mnie w konkursie Classroom Science Contest. Bardzo Ci dziękuję !!

PS2: Popełnię kilka angielskich błędów, wybacz mi:)

Krok 2: Tło

Dalsze prace wykonałem na Figma, darmowym oprogramowaniu wektorowym, takim jak zaawansowana farba, która pozwala na łatwe tworzenie kształtów i kolorów: Jest to bardzo intuicyjne, polecam: www.figma.com !

Nie musisz używać Figmy na swoim froncie, ale lubię zrobić projekt przed stworzeniem samej aplikacji.

Jak widać na obrazku, tło musi być bardzo miękkie, ponieważ zamierzamy umieścić na nim kilka przycisków, obrazów itp…

Polecam 30% przezroczystość używanego koloru i tło z tylko 1 kolorem.

Krok 3: Kolory

Wybrane kolory i ich intensywność są bardzo ważne w aplikacji.

Pierwsza rada, którą daję, to wybrać maksymalnie 3 kolory (+ czarny i biały): nadal staramy się być delikatni:)

Dla 4 przykładów, które zrobiłem, oto wybrane przeze mnie porady (możesz je również zobaczyć na zdjęciu, jako podsumowanie):

Tło: miękkie i jasne tło bez kształtu (30% przezroczystości koloru). Zapamiętaj ten kolor, aby zintegrować swoje przyciski!

Tytuł: Cienki tekst w ciemnoszarym kolorze wygląda dobrze! W przypadku poniższych podtytułów i tekstu pozostań w kolorze czarnym, ale zmień odcień czerni (szary, gdy nie jest to duża informacja) i baw się rozmiarem i atrybutami, które możesz (pogrubienie, kursywa).

Przycisk: Pojedynczy kolor, na ogół kolor tła (przezroczystość 80-100%), a następnie czarny lub biały, aby go zakończyć.

Suwaki: nie używaj do nich 2 kolorów, tylko jeden kolor po lewej stronie, a po prawej stronie w odcieniu czerni.

Otóż to !!

Mniej znaczy więcej !!!! Nie używaj zbyt wielu kolorów, kształtów i rozmiarów, bądź subtelny!

Krok 4: Ustaw odpowiedni parametr ekranu

Na głównym ekranie części App Inventor Designer możesz wybrać główną cechę ekranu.

Na ekranie1 -> Właściwości wykonaj następujące czynności, aby usunąć ramkę dodatków z AI2, która naprawdę nie wygląda dobrze ^_^.

1 - Orientacja ekranu

Wybierz tylko jedną orientację, ponieważ aplikacja nie dostosowuje się zbyt dobrze po jej przekręceniu.

Wybrałem orientację portretową.

2 - Wyłącz „Widoczny tytuł” i 3- Wyłącz „ShowStatusBar”

Wyłączam tytuł i pasek stanu, ponieważ dodaje trochę paska w aplikacji, które nie są zbyt estetyczne (moim zdaniem).

4 - Wymiar

Wymiary wspólnej aplikacji to 505x320 (wysokość x szerokość). Zapamiętaj te wymiary, aby stworzyć swoje tło i zdjęcia (przynajmniej w tych samych proporcjach)! Jeśli korzystasz z Figmy, możesz błyskawicznie stworzyć odpowiedni rozmiar swojej aplikacji.

5 - Dobór

Jeśli wybierzesz Stałe, aplikacja będzie miała rozmiar 505x320. Jeśli wybierzesz Responsywne, aplikacja będzie pasować do Twojego smartfona, ale uważaj, będziesz musiał dostosować swoje zdjęcia.

Krok 5: Jak to zrobić:)

Aby odtworzyć pierwszy przykład, wykonamy 3 kroki (jak na zdjęciach):

1 - Weź wymiary

Fajne na figma jest to, że możesz zobaczyć rozmiar swoich ramek i obiektu, dzięki czemu możesz zobaczyć, jaki rozmiar będą miały twoje obiekty, a puste ! Puste miejsca są bardzo ważne w App Inventor, ponieważ zamierzamy je utworzyć, umieszczając niewidoczną etykietę!

2 - Wypełnij puste, niewidoczne etykiety

Jak widać na drugim zdjęciu, odwzorujemy pożądany przez nas front umieszczając metkę z odpowiednim rozmiarem. Następnie spraw, aby wyglądał na niewidoczny (odłącz przycisk „widoczny”).

Użyj również Układ -> Rozmieszczenie, aby umieścić swoje przedmioty

3 - Spróbuj utworzyć przyciski w oprogramowaniu

Jeśli to możliwe, twórz swoje przyciski na stronie AI2, będą one wysokiej jakości, a mała animacja „na kliknięcie” będzie fajna:). Jeśli nie możesz tworzyć własnych przycisków, możesz utworzyć je w innym oprogramowaniu, a następnie zaimportować jako obraz.

Krok 6: Wynik:)

Po lewej: zrzut ekranu z mojego smartfona na AI2.

Po prawej: szkic wykonany na Figmie.

Naprawdę mam nadzieję, że ten Instructable pomoże ci zbudować wspaniałą aplikację na AI2.

Dziękuję bardzo za oglądanie. Jeśli potrzebujesz dalszych porad, daj mi znać…

Kolejny Instructable na zapleczu AI2 zostanie wkrótce wydany!

Z poważaniem, Thomas, z Technofabryku