Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Litekursinfo Kort GUI-historia Swings komponenter Idag Tidwell Designing Interfaces och Cooper About Face finns som e-böcker på Chalmers bibliotek 1

2 Om kursen Design och konstruktion av grafiska gränssnitt Inte i första hand en kurs om gränssnittsprogrammering En kurs om gränssnittsdesign Hur ska det funka? Metoder för att utveckla gränssnitt Studera användarna Ta fram prototyper Testa och göra om Java Swing som verktyg Det blir en del programmering också För info kolla kurshemsida Upplägg Föreläsningar Obligatoriska övningar Labbar Utförs i par fritt val Projekt Utförs i grupp om 4 inte fritt val Tenta Lab, övningar, projekt och tenta krävs för godkänt Betyg sammanvägning av projekt och tenta Tenta 55% av betyget Lab och övning betygssätts inte 2

3 Läromål Efter genomgången kurs skall studenterna kunna: Skapa och motivera skisser på ett grafiskt gränssnitt baserat på en specifik användning och användargrupp Implementera ett gränssnitt genom tillämpning eller expansion av ett standardbibliotek för grafiska gränssnitt Arbeta iterativt för att skapa lättanvända gränssnitt genom en växelverkan mellan implementation och användartest Genomföra projekt där uppdelning och koordinering av arbetsuppgifter mellan medlemmar behövs Utveckla och specificera projektmål successivt allteftersom ett projekt genomförs Arbetstid Studenter på Chalmers har vanligen 50 timmars arbetsvecka Halvfart, dvs 25 timmar/vecka Maximal undervisning Föreläsning 4 timmar Övning 3 timmar Bokad labtid 5 timmar Eget arbete 13 timmar 2 timmar 35 minuter/dag Summa 25 3

4 Vad är ett GUI Graphical User Interface Typ visuell presentation av "verkligheten", där man interagerar med systemet via knappar/menyer/navigationsverktyg genom att manipulera dessa direkt på skärmen (i motsats till via text ) WIMP Window Icons Menu Pointing device Naturligt? GUI klart dominerande metoden för interaktion med datorer Inlärt begrepp/beteende Några alternativ Tal Gester Fysiska artefakter Skriven konversation Utvecklingen kunde varit annorlunda - film 4

5 GUI-HISTORIA

6 Sladdkopplingar Hålkort Teleprinter Skärm + kommandon Pre-GUI Douglas Engelbart Född 1925, pionjär för GUI Ville stödja människans intellekt Tänkte sig ett system där man direkt interagerade med en grafisk representation Sökte patent för musen

7 The Mother of All Demos 1968 visade Engelbart och hans team sitt system NLS Interaktion med mus Flera fönster Hyperlänkar Videokonferens Kan ses på internet (länk under resurser) 7

8 Xerox PARC Grundat 1970 Xerox rädda för papperslösa kontoret Anställde forskare och lät dem göra vad de ville 1973 Xerox Alto Bitmappad display 606x808 Ca 1974 Programmeringsspråk och omgivning Objektorienterat MVC Minneshantering. Smalltalk 8

9 1981 Alto + Smalltalk Nätverk E-post I princip som idag dollar ( kr) flopp Xerox Star Mer Xerox Star Några principer Se och peka Uniform design över program What You See Is What You Get 9

10 Apple Grundat 1976 av Steve Jobs och Steve Wozniak Besökte PARC och lånade idéer Apple Lisa 1983 Som en Mac dollar kr Flopp Apple Lisa 10

11 The Mac En dator för alla dollar kr 9-tums skärm 512 * k minne Ingen multi-tasking Floppy-drive Reklam Framgång The rest is history Ex Desktop GUI skapades för kontor hur hade det kunnat se ut annars? Skrivbord Mappar Dokumenthantering 11

12 1983 Första GUI för IBM PC Försvann Visi On Windows 1985 Största skillnad menyer på varje fönster Tiled windows från början 12

13 Windows Apple stämde MS för look and feel Andra Det fanns en del andra system under 80-talet NextSTEP 1988, Unix + snyggt GUI. Max OS X:s bas 13

14 Microsofts första riktiga GUI Oerhörda säljsiffror Task bar Visuella element från NextSTEP Windows 95 14

15 90+ Många försvann I princip bara Windows och Mac kvar Windows nära slå ut Mac helt Apple tog över Next 1997 (eller tvärtom) 2001 Mac OS X (NextSTEP 5) Unix-bas Viss återhämtning för Mac Egentligen inte mycket nytt sen 80-talet Webb GUI-mässigt kanske ett steg tillbaka initialt Linux? Ett försök till något annat 15

16 2007- iphone introduktion Stort genomslag för touch-gränssnitt 27 januari 2010 ipad introduktion Stort genomslag för plattor/tablets Element från touch-ui:s återspeglas i desktop OSX Lion 2012 Windows 8 Ett system för allt? PC Plattor Mobile? Windows 8 Metro 16

17 2 VISUELLA TRENDER Skeumorphism A skeuomorph /ˈskjuːəәmɔrf/ [skyoo-uh-mawrf], or skeuomorphism (Greek: skeuos, σκεῦος vessel or tool, morphê, µορφή shape), is a design element of a product that imitates design elements that were functionally necessary in the original product design, but which have become ornamental in the new design. 17

18 Apple Trend Nämns t ex i ios guidelines Silly or nice? Bra? 18

19 Minimalism Windows 8 sätter trenden Platta rutor grejen Exempel 19

20 Exempel Non GUI 20

21 Non GUI Materialkunskap GUI:n byggs upp av komponenter Givna användningsområden Fel förvirrar 21

22 Java Swing Designat för att kunna bygga riktiga GUI:n Innehåller de flesta vanligt förekommande gränssnittskomponenterna Dessa är byggstenar Måste veta vilka som finns och vad de passar till Använda dem så det som förväntas Windows, Linux, Mac har ungefär samma komponenter Plattformsoberoende Kan köras på Windows, Linux, Mac Olika utseende Delvis olika förväntade beteenden Hur funkar det? Plattformar har olika Look & Feel Windows l&f Aqua l&f Eller samma Java Swing på alla plattformar Metal l&f Nimbus l&f Exempel MedView archetype Viewer 22

23 Välja l&f För riktiga program behöver man välja l&f System Java (Metal) System når typiskt inte ända fram Finns diverse tredjepartsalternativ för att komma närmare Troligen bästa för hemanvändare etc Java ser fel ut på alla plattformar Funkar för affärssystem etc Ett dominerande program Byta i NetBeans Application.lookAndFeel = javax.swing.plaf.metal.metallookandfeel UI Guidelines Alla plattformar har User Interface Guidelines Swing också Använda dessa eller plattformsguidelines? Del av GUI-designerns verktygslåda Hjälp med detaljer snarare än interaktionsdesign Behövs för riktiga applikationer Länkar finns på kurshemsidan 23

24 Mera Swing MVC nämns ofta Swing snarare Separable Model View-Controller ihop Model för sig Man kan byta look&feel utan att påverka modellen Man kan byta modell utan att påverka look&feel För enkla komponenter som JButton behöver man inte bry sig om modellen Motsatsen gäller för t ex JTree, JTable En applikation kan ha en MVC-modell ändå Components & Containers De block GUI:s byggs av Går igenom alla snabbt Sen anses man känna till dessa När man ska designa måste man veta vad som finns Inkluderar vissa saker från Swing UI Guidelines Alla Containers är Components Components kontroller Containers behållare för Components En Component måste finnas i en Container för att synas 24

25 Swing-klasser JApplet JButton JCheckBox JCheckBoxMenuItem JColorChooser JComboBox JComponent JDesktopPane JDialog JEditorPane JFileChooser JFormattedTextField JFrame JInternalFrame JLabel JLayeredPane JList JMenu JMenuBar JMenuItem JOptionPane JPanel JPasswordField JPopupMenu JProgressBar JRadioButton JRadioButtonMenuIt em JRootPane JScrollBar JScrollPane JSeparator JSlider JSpinner JSplitPane JTabbedPane JTable JTextArea JTextField JTextPane JTogglebutton JToolBar JToolTip JTree JViewport JWindow Visuellt 25

26 Visuellt 2 Top-Level Containers JFrame JApplet JWindow Jdialog Containers JPanel Används för att gruppera andra components JRootPane 26

27 JFrame Applikationers huvudfönster Menyrad Ofta toolbar Rekommenderad titel Dokumentnamn Programnamn Swing Application Framework FrameView Sekundära fönster Ingen menyrad JDialog Rekommenderad titel Beskrivande namn optional programnamn 27

28 JMenuBar Menyrad- hanteras bra av NetBeans Några guidelines Använd bara ett ord i varje menytitel Använd välkända/standardbegrepp (Arkiv) Inkludera mnemonics Använd inte för sekundära fönster JMenu Hanteras bra av NetBeans Ha inte samma namn på någon flera ggr Undvik mer än en nivå Leta igenom ska gå fort 28

29 JMenuItem Enskilda objekten i en meny Ha inte samma namn på något item som på menyn Undvik flera nivåer Kan ha ikoner. Hjälper användare att komma ihåg vad toolbarbuttons gör Kortkommandon Allt kan göras i NetBeans utan kod JSeparator Huvudsakligen för att gruppera menu-items 29

30 JCheckBoxMenuItem Använd sparsamt Syns bara när menyn är framme Bättre än toggle-menyer Menyer som byter text JRadioButtonMenuItem 1-av-flera-val Använd JSeparator ovanför/nedanför för att visa vilka som hör ihop 30

31 Kallas vanligen kontextmeny Alla vet nog hur det funkar JPopupMenu Aldrig huvudmetoden att utföra en handling! JToolBar För vanligt förekommanden kommandon Förekommer både med och utan labels Det man kan göra ska alltid finnas med i programmets menyer Förse alla knappar med tooltips 31

32 ORGANISERA INNEHÅLL JScrollPane För något som inte får plats Listor, tabeller, textdokument placeras typiskt i scrollpanes Automatiskt i NetBeans Standard visa bara vid behov Rekommenderas Horisontella tveksamma för t ex text 32

33 JPanel Allmän container för att organisera saker Här en röd med ett par blå i Bygga upp GUI hierarktiskt Behövs för allt utom de enklaste GUI I NetBeans blir det väldigt svårt att få önskade placeringar om man inte bygger upp med flera paneler Dela upp i justerbara ytor Horisontellt eller vertikalt Kan nästas Kan styra fördelning weight Kan ha snabb-knappar onetouchexpandable JSplitPane 33

34 JTabbedPane Mycket info på liten yta Relaterat men utan inbördes kopplingar Kan göras i NetBeans Inte fler än att en rad räcker Headline capitalization Tool tips JLayeredPane Flera lager på varandra Se Swing Tutorial Öppnar möjligheter snarare än att vara standardkomponent 34

35 Properties Alla Swing-komponenter har mängder av properties Kan sättas i NetBeans Experimentera Demo JTabbedPane JButton JLayeredPane Bilder i NetBeans (L&F) VISA INFO 35

36 JLabel Visa info för användare Unselectable Bild Text Bild + text HTML Ritar inte sin bakgrund som standard setopaque(true) Property i NetBeans JToolTip Behöver man inte programmera direkt Ofta bra för användaren Stödjer utforskande Vet man trycker man innan de visas acomponent.settooltiptext( En text ); Alla komponenter Property i NetBeans 36

37 JProgressBar Om man blockerar interaktion under en tidsperiod bör man alltid visa en progressbar och erbjuda möjlighet att avbryta BASIC CONTROLS 37

38 Standard action-grej Kan konfigureras på olika sätt Mnemonics Icons Text Borders JButton On/Off Oberoende Grupperade JToggleButton 38

39 JCheckBox & JRadioButton Välkända Enval/flerval JList Ett sätt att välja något Kan ha flera olika selection-varianter JListModel och JListSelectionModel Icke-statiska ger ofta behov av att anpassa modellen Single-selection i labben? Kod för att ordna och sortera finns i lab1backend Hanterar listans model 39

40 JComboBox Redigerbara och icke-redigerbara Tar lite plats Kan användas i toolbars Ha inte för många items! Vanligt T ex JList bättre Eller filtrering Data från modell Mata in en rad text actionperformed vid retur Varianter JFormattedTextField JPasswordTextField Relaterade JSpinner JComboBox JTextField 40

41 Flera rader oformatterad text En rad JTextField Placeras ofta i en JScrollPane JTextArea JSlider & JSpinner Input av data med begränsningar 41

42 KOMPLEXA JTree Strukturerad data Kan anpassas på många sätt Kräver ofta justerad kod/modell Inte för datorovana 42

43 JTable Tabellformad data Anpassningsbar Modell JEditorPane & JTextPane Formatterad text Kräver sin egen genomgång 43

44 Komponent man kan placera varsomhelst Stöd för dialog JColorChoser Open Save Bibliotek eller inte Filtyper JFileChooser 44

45 Lab Lab & projekt görs med Swing Application Framework (SAF) och Netbeans Applikationsramverk Färdigt applikationsskal Delar som är samma för alla program.net Cocoa (Touch) Android Swing Application Framework Netbeans IDE med GUI-editor SAF-app App-klass extends SingleFrameApplication Startar upp, avslutar mm startup() shutdown() View-klass extends FrameView Fyller en JFrame som ramverket hanterar Skapas med GUI-editor initcomponenents() Rör aldrig denna 45

46 Arkitektur lab 1 En form av MVC Model-View-Presenter Controller (Presenter) har referenser till både model och view Samordnar kommunikation åt båda hållen Model och Presenter/Controller finns klara Att göra Läsa historia, länkar på hemsida -> resurser Läsa igenom text om Flow och Excise Känna till samtliga Swing-komponenter Göra klart lab 1 Börja lab 2 om man vill Designförslag ska godkännas Fredag, måndag, onsdag 46