Jak pokonać wyzwanie związane z projektowaniem nieruchomości na dużym ekranie? [Zamknięte]


10

To pytanie jest nieco bardziej subiektywne, ale mam nadzieję uzyskać nową perspektywę. Jestem tak przyzwyczajony do projektowania dla określonego rozmiaru ekranu (zwykle 1024 x 768), że uważam, że ten rozmiar nie stanowi problemu. Zwiększenie rozmiaru do 1280x1024 nie zapewnia wystarczającej ilości nieruchomości na ekranie, aby zrobić znaczącą różnicę, ale daje mi trochę więcej oddechu. Zasadniczo po prostu rozszerzam „rozmiar siatki” i nadal działa ten sam podstawowy projekt dla nieco mniejszego ekranu.

Jednak w ostatnich kilku projektach wszyscy moi klienci korzystali z ekranów 1080p (1920x1080) i chcieli, aby rozwiązania wykorzystywały jak najwięcej tej nieruchomości. 1920 pikseli szerokości zapewnia prawie dwukrotnie większą szerokość niż jestem przyzwyczajony, a szeroki ekran sprawia, że ​​niektóre z moich starych podejść do projektowania nie działają. Problem, na który wpadam, polega na tym, że gdy mam tyle miejsca, mam do czynienia z kilkoma poważnymi problemami.

  • Ile kolumn powinienem użyć? Szeroki format nadaje się do podziału 3 kolumn z podziałem 2: 1: 1 (tzn. Kolumna zawartości jest większa niż pozostałe dwie). Jeśli jednak wybiorę trzy kolumny, co zrobię z tą dodatkową kolumną?
  • Jak efektywnie korzystać z ekranu nieruchomości? Istnieje pokusa, aby umieścić wszystko na ekranie jednocześnie, ale zbyt wiele informacji faktycznie utrudnia korzystanie z aplikacji. Biała przestrzeń jest ważna, aby pomóc zrozumieć złożone informacje, ale zbyt wiele powoduje, że powiązane pojęcia wyglądają zbyt osobno.
  • Zwykle pracuję z aplikacjami internetowymi, które zawierają złożone dane, a wizualizacja i prezentacja jest kluczem do zrozumienia surowych danych. Gdy użytkownik ma również duży ekran (co najmniej 24 cale), niektóre informacje są niewidoczne i należy przesunąć wskaźnik na dużą odległość. Jak upewnić się, że wszystko, co jest potrzebne, pozostaje w wizualnych punktach zapalnych?
  • Proste witryny, takie jak blogi, faktycznie działają lepiej, gdy szerokość jest ograniczona, co powoduje wiele zmarnowanych nieruchomości. Zastanawiam się, czy posiadanie pola tekstowego i podglądu tekstu obok siebie byłoby dużą korzyścią dla administratora tego typu ekranu? (Podział dwóch kolumn 1: 1).

Na twoje odpowiedzi wiem, że prawie wszystko w projektowaniu to „to zależy”. To czego szukam to:

  • Ogólne zasady, których używasz
  • Jak zmieniło się twoje podejście do projektowania

Odkrywam, że muszę się ponownie nauczyć, jak pracować z tym innym formatem. Każdy skok w rozdzielczości, przez który do tej pory pracowałam, wynosił około 25%: 640 do 800 (wzrost o 25%), 800 do 1024 (wzrost o 28%) i 1024 do 1280 (wzrost o 25%). Jednak skok z 1280 do 1920 to dobry 50% wzrost przestrzeni - odpowiednik skoku z 640 prosto do 1024. Nie było powszechnie używanej średniej wielkości, aby pomóc stopniowo uczyć się lekcji.


Czy możesz po prostu powiększyć kontrolki interfejsu użytkownika, aby wypełnić puste miejsca ...?
FrustratedWithFormsDesigner

@Frustrated: Czy nie pokonałoby to celu, chyba że projektowałeś, powiedzmy, ekran dotykowy?
Michael K,

@Michael: cóż, OP nie chce zmieniać liczby widocznych kontrolek, ponieważ utrudniłoby to korzystanie z programu, a także nie lubi mieć pustej przestrzeni. Jeśli nie ma żadnych nowych funkcji do wypełnienia przestrzeni, to przestrzeń musi zostać wypełniona ...?
FrustratedWithFormsDesigner

2
Bardziej chodzi o to, by spróbować poszerzyć mój umysł o nowe elementy sterujące i sposoby interakcji z witryną. Po prostu uczynienie wszystkiego większym rodzajem pokonuje cel. Następnie masz „syndrom dużego błyszczącego czerwonego przycisku” lub tekst, który sprawia wrażenie, jakbyś czytał jeden duży nagłówek. Próbując zrównoważyć obawy związane z projektowaniem, jest to naprawdę złożony problem.
Berin Loritsch

1
@Berin: Jeśli poprosili o rozmiar interfejsu Super-size i jest to JEDYNA poważna zmiana, powiedz im, że masz obawy dotyczące układu i projektu, i zapytaj, czy mają pomysły na to, jak najlepiej wykorzystać przestrzeń. W końcu są użytkownikami i musieli mieć powód do złożenia tego konkretnego żądania. Może powiedzą: „umieść widżet na desce rozdzielczej w pustej przestrzeni” lub coś w tym stylu… wyślij zrzut ekranu z dużą pustą przestrzenią tekst z napisem „Czego tu chcesz?” Upewnij się, że Twoje obawy dotyczące tego projektu są znane.
FrustratedWithFormsDesigner

Odpowiedzi:


1

Tak podchodzę do tego problemu.

Zacznę od podzielenia moich danych na logiczne bloki. Mogę nawet posunąć się do stworzenia innego pliku ascx dla każdego bloku logicznego. Każdy blok wiedziałby, jak lubi być wyświetlany (szerokość min./maks.). Zrobiłbym to b / c Nie lubię przepisywać kodu i jeśli istnieje szansa, że ​​aplikacja będzie musiała zostać rozszerzona, aby obsługiwać wiele rozmiarów rozdzielczości, to pomogłoby to ułatwić kontrolę na zasadzie kontroli.

Następnie utworzę nowy arkusz stylów dla większej rozdzielczości. Powiększ przyciski i nagłówek. Dodaj więcej białej przestrzeni wokół elementów. W ten sposób przełączanie między dwoma typami rozdzielczości jest po prostu zamianą arkuszy stylów.

Teraz przychodzi trudna część, układ. Jak powiedziałeś, układ będzie bardzo różny w przypadku tej ilości nieruchomości. Rozwiązaniem byłoby umożliwienie użytkownikowi umieszczenia elementów tam, gdzie chcą, na przykład na stronie iGoogle. Użytkownik może wybrać 2 lub 3 kolumny według własnego uznania. Ponieważ nie wiem, jakie typy ekranów budujesz, nie wiem, czy to naprawdę by Ci pasowało.

Drugą odpowiedzią byłoby zatrudnienie eksperta od interfejsu użytkownika, który pomógłby zaprojektować te strony. Pracując w przeszłości ze specjalistą od interfejsu użytkownika, mogę powiedzieć, że warto w 100% uzyskać ekspertyzę na takie tematy. Mogą wskazywać problemy i sugerować rozwiązania, zanim klient obejrzy produkt.

Gdybym musiał to zrobić sam, umieściłbym stałe przedmioty po bokach, a środkowy obszar powiększyłby się, aby wypełnić resztę przestrzeni. Wszystkie dane, które mogą rosnąć, wypełnij środkową sekcję.

Nie jestem pewien, czy jest to dla ciebie pomocne, ale mam nadzieję, że dostarczy ci kilku pomysłów.


Jest to prawdopodobnie najbardziej rozsądna odpowiedź, jaką uzyskałem w interfejsie użytkownika i programistach na to pytanie. Jest to o wiele bardziej przydatne niż „powiększanie wszystkiego” - tak powiedzieli mi użytkownicy interfejsu. UWAGA: aspx jest terminem specyficznym dla technologii, ale odpowiednie jest podzielenie interfejsu użytkownika na osobne pliki.
Berin Loritsch


2

Nie jestem ekspertem od interfejsu użytkownika, ale używam ekranu 1920x1080 codziennie z Eclipse. Eclipse ma bardzo łatwy do skonfigurowania interfejs, a oto niektóre z moich obserwacji podczas przełączania między 1280 i 1920:

  • Przy obu rozdzielczościach chcę zobaczyć okno, w którym pracuję w tym samym rozmiarze. Przy mniejszej rozdzielczości mam tendencję do ukrywania dodatkowych paneli, podczas gdy przy wyższej rozdzielczości wystawiam więcej paneli.
  • Wolałbym nieco większe przyciski. Zajmują mniej miejsca proporcjonalnie na większym monitorze i przyspieszają moje działania myszy.
  • Często rozwijam podgląd, aby korzystać z całego ekranu, tj. Kod po lewej, podgląd po prawej. Ostatecznie jest to format dwukolumnowy. Poza tym używam 3-kolumnowy ze stopką:
    1. Po lewej: nawigacja po plikach
    2. Środek: kod (największy, prawdopodobnie 2/3 szerokości ekranu)
    3. Po prawej: nawigacja po kodzie i zadania
    4. Stopka: Status (konsola, serwery itp. Dość krótki, może wysokość ekranu 1 / 5-1 / 6)

Czasami umieszczam również widoki i kontrolery obok siebie w trybie 2-kolumnowym, ale jest to z pewnością specyficzne dla programisty. :)

Będąc na większym ekranie, chcę go użyć, aby zobaczyć jak najwięcej informacji, a jednocześnie łatwo je znaleźć. Więcej przestrzeni wokół komponentów pomaga w rozróżnianiu kolekcji informacji. Ikony na kartach to jeden ze sposobów na zwrócenie uwagi na znaczenie poszczególnych elementów.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.