Badanie projektu na stronach internetowych aplikacji Mac OS X.

/2018-09-30 16:48:27/
Quintrell
/Programy/

Apple zawsze wymagało od swoich pracowników najwyższego kalibru pracy, nawet od momentu założenia pod koniec lat siedemdziesiątych. Wielu projektantów niedawno przeniosło się do środowiska OS X i większość zakochuje się od pierwszego wejrzenia. Mac OS X Lion oferuje tak wiele funkcji, których po prostu nie można znaleźć gdzie indziej - w szczególności z App Store.

Stąd masz dostęp do mnóstwa aplikacji zarówno darmowych, jak i płatnych. Wszystkie są zbudowane dla OS X Lion i można je pobrać bezpośrednio na Launchpad. W tym studium przypadku przyjrzę się trendom projektowania stron internetowych z aplikacjami dla komputerów Mac. Są one specjalnie ukierunkowane na system OS X i nie obejmują aplikacji na iOS… style są bardzo różne. Wraz z tymi wskazówkami skompilowałem także małą galerię moich ulubionych witryn z aplikacjami dla komputerów Mac, aby podzielić się odrobiną inspiracji.

Poznaj elementy Envato

Powiększ swoje kluczowe punkty

Kiedy ludzie trafiają na dowolną stronę internetową aplikacji, mają nadzieję na szybkie określenie celu aplikacji. Najłatwiej to zrobić, natychmiast przyciągając uwagę odwiedzających i prowadząc ich przez cały układ. Z dotychczasowych doświadczeń wydaje się, że tekst / grafika wielkości jumbo często załatwi sprawę.

Alfred App jest jednym z takich przykładów, który obejmuje cały ekran w przesuwnym układzie. Zarówno logo aplikacji, jak i przycisk pobierania zeskakują ze strony na pierwszy rzut oka, wraz z monstrualną ikoną aplikacji! Użytkownicy zaznajomieni z aplikacją Alfred rozpoznają wyjątkowy kapelusz i szkło powiększające. I to nie tylko obszar górnej strony.

Podczas przewijania w dół zauważysz, że każda sekcja strony jest również podzielona na części. Obszar zrzutu ekranu demonstracyjnego ma małą kolumnę z miniaturami z pięknym wyświetlaczem aplikacji. Wystarczy sprawdzić kilka ujęć demonstracyjnych, aby zrozumieć, co potrafi aplikacja. Gdy znajdziesz więcej stron internetowych z aplikacjami, miej oczy otwarte na rzeczy „duże zdjęcie”, które mają się wyróżniać. Zastanów się także, co powinno zeskoczyć z własnej witryny aplikacji.

Charakterystyka czystego cięcia

Bardziej popularne projekty witryn często zawierają ten sam typ elementów. Może to być bardziej sfinalizowany i szczegółowy projekt ikony, fantazyjny tekst logo i inna zabawna grafika. Ale powinieneś pójść za przykładem Apple i odciąć materiały eksploatacyjne. Czyste i uproszczone interfejsy pozwolą skupić uwagę odwiedzających na kolejnych pobraniach i zakupach.

Jestem wielkim fanem Instagrama, który poświęciłem dużo czasu na iOS. Aplikacja Carousel na komputery Mac to piękna siostrzana usługa na pulpicie. Jeśli zauważysz, że ich układ witryny zawiera mniejszy obszar z logo i więcej miejsca na zrzuty ekranu. Ponadto typografia wydaje się bardziej dopracowana, aby pasowała do eleganckiego, ekskluzywnego motywu.

Należy również zauważyć, że nie ma tutaj żadnej głównej nawigacji. Zastanów się nad powieleniem tego w swojej własnej witrynie aplikacji, ponieważ usuwa to wiele frustracji użytkowników. Pomysł ten podwoi się, gdy użytkownicy urządzeń mobilnych po raz pierwszy znajdą Twoją witrynę na telefonie iPhone lub Androidzie. Jeśli potrafisz zobrazować wiadomość z aplikacji na jednej stronie, to idź do niej !

Dołącz standardowe ikony App Store

Przyciągnięcie uwagi odwiedzającego jest jednym z ważnych wymagań, ale chcesz również zdobyć jego zaufanie. A osoby korzystające z systemu Mac OS ogólnie ufają programistom Apple. Na swojej stronie powinieneś umieścić odznaki i / lub przyciski, aby poinformować ludzi, że zostałeś opublikowany w App Store. Może wydawać się mały, ale może mieć ogromne znaczenie dla nowych potencjalnych klientów.

Wytyczne marketingowe Mac App Store (PDF) zawierają szczegółowe informacje na temat plakietki App Store widocznej w większości popularnych aplikacji Mac. Lubię też strzelać do dribbble, aby sprawdzić, czy ktoś ma fajne zestawy projektowe lub ikony w stosunku do motywu.

Dostarcz demo tam, gdzie to możliwe

Pamiętasz cały sens szybkiego przekazywania wiadomości? Można to najłatwiej osiągnąć poprzez obrazy lub wideo - nie ma w tym żadnej wielkiej niespodzianki. Ale nawet same miniatury lub pokazy slajdów czasami nie wystarczą.

Powinieneś spróbować dołączyć prezentację swojej usługi do pewnego rodzaju infografiki przepływu pracy. Istnieje mnóstwo darmowych plików PSD do pobrania, które pasują do MacBooków, iPhone'ów, iPadów i wszystkiego innego. Oto piękny przykład darmowego szablonu PSD iMaca do pobrania. Teraz możesz robić zrzuty ekranu z aplikacji i tworzyć małe obrazy demonstracyjne.

Działa to naprawdę dobrze w powyższym przykładzie dla NotifyMe . Aplikacja jest otwarta i opracowana na wszystkie 3 platformy iOS / iPad i OSX. Na pierwszy rzut oka możesz założyć, że aplikacja jest systemem powiadomień. Dzięki małej grafice demonstracyjnej i dodatkowym objaśnieniu możesz połączyć rozszerzone funkcje, aby skomponować swoją opinię na temat aplikacji.

Dynamiczne animacje i jQuery

Apple jest również dobrze znane z pięknych animacji przejścia. Ich dbałość o szczegóły zarówno pod względem wzornictwa, jak i funkcji jest niesamowita - obejmuje całe portfolio oprogramowania. A jako projektant stron internetowych publikujący pod Apple, może się okazać, że witryna z aplikacjami może być magiczna.

Reeder na Maca jest piękny, a strona demo również pasuje. Zauważ, że adresy URL stron są niezwykle proste i łatwe do przekazania znajomym lub za pośrednictwem sieci społecznościowych. Dodatkowo nawigacja odbywa się w bocznej kolumnie, a zawartość strony jest zmniejszona do absolutnego minimum.

Chociaż Reeder ma szybkie prędkości stron, jest to tylko jeden przykład wielu stron z aplikacjami. Jeśli lubisz te dynamiczne animacje, zastanów się, czy nie zajrzeć do biblioteki jQuery, a także do zestawu interfejsu użytkownika jQuery. Są to dwie bardzo popularne biblioteki JavaScript z wbudowanymi funkcjami efektów strony… i możesz dużo zbudować! Dla jednego pomysłu możesz skorzystać z tego małego samouczka w stylu Apple, używając jQuery do zbudowania efektu wygaszania ekranu powitalnego.

Galeria inspiracji

Jak wspomniano wcześniej, żadne studium przypadku nie byłoby kompletne bez małej prezentacji projektu. Poniżej znajduje się tylko kilka przykładów moich ulubionych układów stron z aplikacjami OS X. Sprawdź je i daj nam znać, co myślisz! A jeśli przegapiliśmy jakieś niesamowite układy aplikacji, które naprawdę Ci się podobają, daj nam znać w komentarzach.