Design och konstruktion av grafiska gränssnitt

Transkript

1 Design och konstruktion av grafiska gränssnitt Olof Torgersson Interaktionsdesign Tillämpad informationsteknologi Chalmers/GU Kort GUI-historia Swings komponenter Idag Lab 1 glöm inte att lämna in i PingPong också Först en liten film 1

2 Funnits länge? 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 2

3 Naturligt? GUI klart dominerande metoden för interaktion med datorer Inlärt begrepp/beteende Funkar för att man följer konventioner Några alternativ Tal Gester Fysiska artefakter Skriven konversation Utvecklingen kunde varit annorlunda - film GUI-HISTORIA 3

4 1984 Sladdkopplingar Hålkort Teleprinter Skärm + kommandon Pre-GUI 4

5 Douglas Engelbart , 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 1967 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) Utdrag 5

6 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 6

7 Ca 1974 Programmeringsspråk och omgivning Objektorienterat MVC Minneshantering. Smalltalk 1981 Alto + Smalltalk Nätverk E-post I princip som idag dollar ( kr) flopp Xerox Star 7

8 Mer Xerox Star Några principer Se och peka Uniform design över program What You See Is What You Get 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 8

9 Apple Lisa 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 The Mac 9

10 Desktop GUI skapades för kontor hur hade det kunnat se ut annars? Skrivbord Mappar Dokumenthantering 1983 Första GUI för IBM PC Försvann Visi On 10

11 Windows 1985 Största skillnad menyer på varje fönster Tiled windows från början Windows Apple stämde MS för look and feel 11

12 Andra Det fanns en del andra system under 80-talet NextSTEP 1988, Unix + snyggt GUI. Mac OS X:s bas 12

13 X Windows Först utvecklat på MIT, mitten av 80-talet (bild ca 1990) Basen i Linux Microsofts första riktiga GUI Oerhörda säljsiffror Task bar Visuella element från NextSTEP Windows 95 13

14 Mac OS X Introducerat 2001 Unix + GUI 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? 14

15 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 2 VISUELLA TRENDER 16

17 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. Apple Trend Nämns t ex i ios guidelines 17

18 Bra? Silly or nice? Minimalism Windows 8 sätter trenden Platta rutor grejen 18

19 Exempel Exempel 19

20 Non GUI Non GUI 20

21 Och vinnaren är Platt design 21

22 Ännu plattare Avskalning 22

23 Materialkunskap GUI:n byggs upp av komponenter Givna användningsområden Fel förvirrar 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å som det förväntas Windows, Linux, Mac har ungefär samma komponenter 23

24 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 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 24

25 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 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å 25

26 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 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 26

27 Visuellt Visuellt 2 27

28 Top-Level Containers JFrame JApplet JWindow JDialog Containers JPanel Används för att gruppera andra components JRootPane JFrame Applikationers huvudfönster Menyrad Ofta toolbar Rekommenderad titel Dokumentnamn Programnamn 28

29 JDialog Sekundära fönster Ingen menyrad Rekommenderad titel Beskrivande namn optional programnamn 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 29

30 JMenu Hanteras bra av NetBeans Ha inte samma namn på någon flera ggr Undvik mer än en nivå Leta igenom ska gå fort 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 30

31 JSeparator Huvudsakligen för att gruppera menu-items JCheckBoxMenuItem Använd sparsamt Syns bara när menyn är framme Bättre än toggle-menyer Menyer som byter text 31

32 JRadioButtonMenuItem 1-av-flera-val Använd JSeparator ovanför/nedanför för att visa vilka som hör ihop Kallas vanligen kontextmeny Alla vet nog hur det funkar JPopupMenu Aldrig huvudmetoden att utföra en handling! 32

33 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 ORGANISERA INNEHÅLL 33

34 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 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 34

35 Dela upp i justerbara ytor Horisontellt eller vertikalt Kan nästas Kan styra fördelning weight Kan ha snabb-knappar onetouchexpandable JSplitPane 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 35

36 JLayeredPane Flera lager på varandra Se Swing Tutorial Öppnar möjligheter snarare än att vara standardkomponent Properties Alla Swing-komponenter har mängder av properties Kan sättas i NetBeans Experimentera Demo JTabbedPane JButton JLayeredPane Bilder i NetBeans (L&F) 36

37 VISA INFO JLabel Visa info för användare Unselectable Bild Text Bild + text HTML Ritar inte sin bakgrund som standard setopaque(true) Property i NetBeans 37

38 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 JProgressBar Om man blockerar interaktion under en tidsperiod bör man alltid visa en progressbar och erbjuda möjlighet att avbryta 38

39 BASIC CONTROLS JButton Standard action-grej Kan konfigureras på olika sätt Mnemonics Icons Text Borders 39

40 On/Off Oberoende Grupperade JToggleButton JCheckBox & JRadioButton Välkända Enval/flerval 40

41 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 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 41

42 Mata in en rad text actionperformed vid retur Varianter JFormattedTextField JPasswordTextField Relaterade JSpinner JComboBox JTextField JTextArea Flera rader oformatterad text En rad JTextField Placeras ofta i en JScrollPane 42

43 JSlider & JSpinner Input av data med begränsningar KOMPLEXA 43

44 JTree Strukturerad data Kan anpassas på många sätt Kräver ofta justerad kod/modell Inte för datorovana Tabellformad data Anpassningsbar Modell JTable 44

45 JEditorPane & JTextPane Formatterad text Kräver sin egen genomgång Komponent man kan placera varsomhelst Stöd för dialog JColorChoser 45

46 Open Save Bibliotek eller inte Filtyper JFileChooser Att göra Läsa historia, länkar på hemsida -> resurser Känna till samtliga Swing-komponenter Göra klart lab 1 Börja lab 2 om man vill 46