Interaction Design// Sketching & Just-Enough-Prototyping
Verknüpfung zwischen realer und digitaler Kommunikation: Interaktiver Service

Interface Design // Die digitalen Medien beeinflussen unsere Lebens- und Arbeitsräume grundlegend. Wir kommunizieren über elektronische Wege dank Mobiltelefon und Internet. Maschinen und Produkte werden über digitale und virtuelle Schnittstellen gesteuert. Medienfassaden und Interactive Bedienoberfl ächen übernehmen in weiten Teilen die Informationsvermittlung. Das stellt neue und hohe Ansprüche an Interface Designer, die neben dem klassischen zwei- und dreidimensionalen Design nun auch Prozessabläufe
zwischen Menschen und Maschinen gestalten und darstellen müssen.

Thema // In diesem Kurs werden anhand des aktuellen Themas „Digital
Private Information Tool“ Digitalisierung des privaten Handlungsraumes interaktiv sinnvoll zu bedienende und benutzbare Benutzeroberfl ächen außerhalb des Computers entwickelt. Produkt- und Interface Design wird hier für interaktive Arbeitsoberfl ächen aus der physischen und digitalen Welt kombiniert. Untersucht werden Verhalten und Eigenschaften physischer und digitaler Interfaces. Interface Konzepte, die plausible Visualisierung von dynamischen Informationen der persönlichen und auch vernetzen gemeinschaftlichen Kommunikation mit anderen Personen durch das Internet werden schrittweise entwickelt.

Ziel // Gesucht werden Szenarien, die eine sinnvolle Erweiterung persönlicher Aufgaben auf interaktiven Arbeitsoberfl ächen außerhalb des persönlichen Computers sind, wie dem interaktiv Table.

Kursinhalte // Konkret erhalten die Teilnehmer des Kurses Einblick in das Fachgebiet, in Interface Design Prozesse und Methodiken der Gestaltung. Wir arbeiten mit Entwürfen und spielerischen interaktiven Experimenten, ausgehend von den Methoden Sketching & Just-Enough-Prototyping, vom Video bis zum einfachen interaktiven Prototypen, über Ideensammlungen zu konzeptionellen Studien. Der Kurs ist in drei wöchentliche Einheiten gegliedert:

// Visualisierung von Informationen im privat geschützten Raum
// Gestalten von Interaktionen zwischen Objekten und Informationen
// Grundlagen zum Aufbau von interaktiven Installationen
// Design eines persönlichen Tools (Widget, Service)
= Videopräsentation der Entwürfe, Dokumentation und Plattform

Vermittelt wird technisches Know How für interactive Space:

// Hardware Installation des „Interactiv Table“
// Software Installation mit „Whiteboard“ von Johnny Lee/ HCI
// Videoprototyping mit iMovie/ Apple iLife 09
// Basic Coding mit Processing von Ben Fry and Casey Reas/ MIT
Das digitale Werkzeug, die Open-Source Entwicklungsumgebung Processing wird in einem Tutorial mit leicht zugänglichen Übungen in den Kurs eingebettet.

Den detaillierten Ablaufplan für den Kurs besprechen wir gemeinsam in den ersten Unterrichtsstunden.

专业：视觉传达
任课教师：Steffi Hußlein 教授

真实与数字交流之间的结合：数字个人信息工具 ─ 交互服务

界面设计
数字媒体对我们的生活空间和工作空间产生着根本性的影响。多亏有了移动电话和因特网，我们能够通过“电子路径”进行交流；通过数字和虚拟的控制台，机器和产品可以被操控；媒体幕墙和可互动的操作面板广泛地进行信息传播。这就对界面设计师提出了新的高要求──他们要在从事传统的二维和三维设计之余，对人机之间的(互动)流程进行设计与表现。

主题
本课程根据主题“ 数字个人信息工具”，要求学生将个人的行为空间数字化，并在电脑以外设计能产生有意义的互动的用户操作面板。这里的互动工作面板是产品设计和界面设计、物质世界和数字世界的结合。本课程要求学生研究物质界面和数字界面的形态和特性。界面方案，即对个人及与他人共同交流联系的动态信息的有信服力的视觉化呈现，将通过因特网逐步发展起来。

目标
寻找如下场景：在个人电脑以外的互动工作面板上有意义地拓宽个人的任务，如同interactiv Table。

内容
本课程的参与者将获得界面设计专业领域设计过程和设计方法论的认知。我们以游戏式的互动实验进行设计工作，出发点是Sketching & Just-Enough-Prototyping方法，从视频到简单的互动装置模型，从收集想法到方案研究。本课程在三周时间里构成如下单元：
─ 个人空间的信息视觉化；
─ 物体与信息之间的交互设计；
─ 互动装置构建基础；
─ 设计一个个人工具(小装置，服务) 。
结果：设计、文档和(网络)平台的视频展示。
对互动空间技能的传授包括：

─ 硬件“Interactiv Table”的安装；
─ 软件“ Whiteboard“ (Johnny Lee/ HCI)的安装；
─ 用iMovie/Apple iLife 09制作视频模型；
─ 用Processing (Ben Fry & Casey Reas / 麻省理工学院)编写基础计算机代码。
开放源代码数字工具Processing在本课程中将通过简单的练习进行辅导。

我们将在第一次课上一起讨论详细的课程安排。

Die chinesisch deutsche Kunstakademie ist ein Gemeinschaftsunternehmen der Universität der Künste Berlin UdK und der chinesischen Kunstakademie CAA. Seit 2003 betreiben beide Institutionen gemeinsam die chinesisch deutsche Kunstakademie CdK mit dem Ziel einen Master Studiengng im bereich der Gestaltung, der Architektur und der Kunst im internationalen Kontext zu etablieren. Im Bereich Bildende Kunst werden die Fachrichtungen Malerei, Bildhauerei und Neue Medien und im Bereich Gestaltung die Fachrichtungen Architektur, Industrial Design und Visuelle Kommunikation angeboten. Das Studium dauert fünf Semester. Bestandteil des Studiums ist ein dreimonatiger Studienaufenthalt in Deutschland.

Die Universität der Künste (UdK) ist verantwortlich für die Entwicklung und Vermittlung von künstlerisch-wissenschaftlichen Lehrstoffen und Lehrmethoden. Damit wird der Nachfrage in China nach einem Kunststudium mit Bezügen zur deutschen Kunst und Kultur entsprochen.

Ohne die intesive Zusammenarbeit mit Mr. Wang als fachspezifischer Übersetzer für Visuelle Kommunikation hätten die Inhalte der Lehre nicht in die andere Sprache sowie in den kulturellen Kontext überführt werden können.

	Gong Long Yu
	Xu Jingzhe
	Cheng Zhe
	Zhang Wei
	Huang Yaoyao
	Liang Guanbo
	Zheng Qing
	Zhu Wen
	Ai Weiwei
	Zhang Liqun
	Zheng He
	Feng Jing
	Ye Qiaomin
	Wang Dandan

1) Was kann mein Gegenstand?
2) Welche Funktionen kann der Gegenstand machen?
3) Welche Interaktionen können ausgeführt werden?
4) Welche Handlungen kann der Benutzer ausführen?
5) Welcher menschliche Sinn wird angesprochen?
////////////////////////////
6) Welche Assoziationen hat der Gegenstand in der Digitalen Welt?
7) Analyse: Wie werden reale Produkte und dessen Handlungsräume in der digitalen Welt in ihrer Bedeutung aufgeschlüsselt?
8*) Finde Metaphern (Übertragungen) für Informationen des realen Produktes!
9) Was können reale Produkte in der digitalen Darstellung simulieren?
10)Wie können Funktionen aus Produkten in die digitale Welt übertragen werden?
11) Wie kann der Benutzer diese Informationen lesen und aufrufen? Wie finden die Interaktionen statt? Wir wollen Metaobjekte identifizieren. Zugänge zu Informationsstrukturen deutlich darstellen. Interaktionen durchführen.
////////////////////////////
12) Wie finden die Interaktionen statt?
13) Wir wollen Metaobjekte identifizieren.
14) Zugänge zu Informationsstrukturen deutlich darstellen. Interaktionen durchführen.
15) Die Ideen und Konzepte darstellen
16) Ein Szenario erstellen / Videoprototyp.
////////////////////////////
Erstellen Sie ein schlüssiges Konzept.
01) Titel der Arbeit
02) Einführung: Abstract und These 03) Brainstorming
04) Idee
05) Kommunikationskonzept: Beschreibung des Szenarios, Darstellung des Szenarios, Zielgruppe, Vorteile
06) Navigationskonzept: Interaktionsformate, Funktion und Handlung, Interpretation, etc.
07) Strukturplan für die Funktionen
08) Interaktionsformate
09) Storyboard für den Videoprototypen
10) Entwürfe und Variationen
11) Technische Umsetzung: Skizzen des Installationsaufbau, Technische Implementierung: WiiFlash Server, Whiteboard, ActionScript3 und Installation
12) Design
13) Interaktive Prototypen
14) Videoprototyp

数字个人空间 // 个人工具设计

Widget, 服务数字模拟和物质性装置
要挖掘新技术的巨大潜能，只有将物件或系统的整体功能通过界面有意义地表现出来并使其可被使用。

1) 我的物件能做什么？
2) 该物件有哪些功能？
3) 该物件能产生哪些交互？
4) 用户会有哪些行为？
5) 附合哪些人类的感官？
////////////////////////////
6) 该物件在数字世界里有哪些联想？
7) 分析：真实的物件与其行为空间在数字世界里如何从意义上被解码？
8*) 寻找真实物件的信息的转喻！
9) 真实物件在数字化的表现中能模拟什么？
10) 物件的功能在数字世界中如何转化？
11) 用户如何阅读和调出信息？
////////////////////////////
12) 交互如何形成？
13) 我们要识别转化物。
14) 清晰表现信息结构的路径，执行交互。
15) 表现想法和方案。
16) 制作一个场景 / 视频草模。

////////////////////////////

构成一个合乎逻辑的方案
01) 作业的标题
02) 引言：摘要和提纲
03) 头脑风暴
04) 想法
05) 交流方案：场景表述，场景表现，目标受众，优点
06) 导向方案：交互形式，功能和行为，诠释，等等
07) 功能的结构计划
08) 交互形式
09) 视频草模的分镜头剧本
10) (初步)设计和变化
11) 技术性实现：草图和构建装置，技术实践与计算机相关：Whiteboard, Processing和装置
12) 设计
13) 交互草模
14) 视频草模

Projektdokumentation als PDF

Abschlusspräsentation

Zhang Wei // Feng Jing
Interaktive Wasserkanne

Projektdokumentation als PDF

Abschlusspräsentation

Zhu Wen // Zheng Qing
Interaktiver Stempel

Projektdokumentation als PDF

Abschlusspräsentation

Ai Weiwei // Ye Qiaomin
Zeit der Erinnerung

Projektdokumentation als PDF

Abschlusspräsentation

Wang Dandan // Gong Long Yu
Interaktiver Radiergummi

Projektdokumentation als PDF

Abschlusspräsentation

Xu Jingzhe // Cheng Zhe
1080 Grad

Projektdokumentation als PDF

Abschlusspräsentation

Huang Yaoyao // Liang Guanbo
Interaktiver Spiegel

Projektdokumentation als PDF

Abschlusspräsentation

Kapitel: Beispiele mit Funktionsbeschreibungen und Erläuterungen
1) Zeichnen in Processing
2) Variablen & Interaktion
3) Bedingungen
4) Schleifen & Dynamik
5) Bewegungen
6) Modularität und Bedingnungen
7) Bildbearbeitung und Video
8*) Arrays

1. Zeichnen in Processing

1a   void setup() und void draw()

In jedem Processing Sketch gibt es feste Bauteile. Im void setup() steht alles was zu Beginn des Programms nur einmal ausgeführt werden muss, wie z.B. die Fenstergröße. Alles was im void draw() steht, wird dagegen 30mal/sekunde ausgeführt. diese beiden Hauptfunktionen werden mit einer geschweiften Klammer geöffnet und ebenso wieder geschlossen. In diesen Bodies stehen Funktionen, d. h. vorgefertigte Befehle, die noch mit Werten gefüttert werden müssen. Dazu gleich mehr… Jede Zeile wird mit einem Strichpunkt abgeschlossen.
void setup(){

      funktion();
      funktion();
      funktion();
        …

}

void draw(){

      funktion();
      funktion();
      funktion();
        …

}

1b   Koordinatensystem

Der Koordinatenursprung beim Start von Processing liegt bei (0, 0), kann aber mit der funktion translate(x, y) verändert werden.

1c   Funktionen

Um Objekte in processing zu zeichnen gibt es sog. Funktionen → funktion(Wert) Je nachdem wie viele Werte notwendig sind, um ein Objekt zu definieren, stehen diese zwischen den beiden Klammern hinter dem Befehl.

     size()                 Breite, Höhe
     point()                x-Koordinate, y-Koordinate
     line()                 1. x-Koordinate, 1. y-Koordinate, 2. x-Koordinate, 2. y-Koordinate
     rect()                 x-Koordinate, y-Koordinate, Breite, Länge
     ellipse()              x-Koordinate, y-Koordinate, horizontaler Durchmesser, vertikaler Durchmesser
     triangle()             x-Koordinate1, y-Koordinate1, x-Koordinate2, y-Koordinate2, x-Koordinate3, y-Koordinate3

Der größte Teil der Funktionen sind in der Reference aufgeführt und erklärt.

1d   Farben

Die Standard-Hintergrundfarbe grau kann mit der Funktion background() verändert werden, die Strichfarbe mit der Funktion stroke() und die Füllfarbe durch fill(). Dabei gibt es mehrere Definitionsmöglichkeiten, der Wertebereich geht aber immer von 0 bis 255:

     background(Wert)                       Grauwert/ 0=schwarz, 255=weiß
     background(Wert, Wert)                 Grauwert, Alphawert für Transparenz
     background(Wert, Wert, Wert)           Rot, Grün, Blau
     background(Wert, Wert, Wert, Wert)     Rot, Grün, Blau, Alphawert

Um die Strichfarbe oder Füllfarbe auszuschalten gibt es die Befehle noStroke() oder noFill(). Da es hier keiner Werte bedarf, bleiben die Klammern leer.

Beispiel1: Punkt, Gerade, Rechteck und Ellipse

Aufgabe1:Zeichne ein Gesicht!

2.Variablen und Interaktion

Variablen sind Platzhalter für Wertebereiche, d.h. der Wert einer Variablen kann sich laufend verändern. Man öffnet sozusagen eine Schublade, die man aber erst später mit Sachen befüllt. Die Variablen werden vor dem void setup() eingeführt und bekommen einen Namen zugewiesen. Für bestimmte Verwendungsarten gibt es verschiedene Variablentypen. Da alles im void draw() 30mal/sek ausgeführt wird, wird der variablen dann genauso oft ein neuer Wert zugewiesen.

2a   Variablentypen

     int i= 12;             nur ganze Zahlen, wie z.B. 2, 300, 397, -20735,...
     float f= 14.7;         Zahlen nach dem Komma, wie z.B. 3.5, 2.985, -0.19654...
     boolean b=false;       true/false; an/aus; 1/0; zwei Möglichkeiten
     char letter= 'a'       Zeichen
     PFont schrift;         Text
     PImage bild;           Bilder

Möchte man die Variablen interaktiv verändern so muss ihnen ein Wert im void draw() zugewiesen werden. Die x-und y-Koordinate kann mit den Befehlen mouseX und mouseY ausgelesen werden. Mit dem Befehl random(Wert, Wert); weißt man einen zufälligen Wert innerhalb eines definierten Wertebereiches zu.

2b   Bilder in Processing

Hat man eine Variable  für ein Bild eingeführt, muss man die Datei noch im Programm laden. Um den Computer zu schonen, empfiehlt sich dieser Schritt im void setup. Der Befehl

     bild=loadImage("cdk.jpg/png/tiff");

Damit das Bild geladen werden kann, muss es noch im SketchFolder liegen (cntrl+k). Unter sketch/ AddFile können Dateien dorthin geladen werden. Hat man die Datei hinzugefügt, gibt es dort einen neuen Ordner data, in dem die Datei dann liegt. Die Funktion

     bild=loadImage("NameBild.jpg/png/tiff");

lädt das Bild in den Cache (Programmspeicher). Eigentlich dargestellt wird das Bild aber dann erst durch

     image(bild, xPosition, yPosition);

Der Ursprung eines Objektes, also auch eines Bildes lässt sich in verschiedenen Modi definieren:

     imageMode(CORNER);   Der Ursprung des Bildes liegt an der linken oberen Ecke des Objektes
     rectMode(CENTER);    Der Ursprung des Rects liegt genau in seiner Mitte

Beispiel2: Collage

2c   Text einfügen

Ähnlich wie beim Einfügen von Bildern funktioniert auch die Textvariable. Damit der Text sichtbar wird, sind vier Schritte notwendig. Am Anfang muss die Variable wieder benannt werden, also:

     PFont schrift;

Um auf eine Schrift zugreifen zu können, muss man erst eine Font-Datei erstellen. Unter Tools/Create Font stehen alle auf dem Rchner liegenden Fonts zur Verfügung. Man wählt eine aus und gibt die Größe an. Im data-Ordner liegt jetzt eine vlw-Datei. Diese wird im void setup() geladen:

     schrift=loadFont("Arial.vlw");

Bevor man den eigentlichen Text editiert, muss die Schrift, die man verwenden möchte, definiert werden. Da man oft mehrere Fonts benutzt, bzw. unterschiedliche Größen ist dieser Schritt notwendig, also:

     textFont(schrift, 24);

Direkt nach dieser Funktion kommt der egentliche Befehl zum Text editieren.

     text("z.B. Mausposition auf der x-Achse :  " + mouseX + "pixel" , xKoordinate, yKoordinate);

Werte, also zum Beispiel die Mausposition können an den eigentlichen Text, der zwischen Anführungszeichen geschrieben wird, mit einem ‘+’ angefügt werden.

2d   void mousePressed()

void mousePressed() ist eine gleichwertige Funktion zu void setup() oder void draw(). Alles was in dieser Funktion steht wird nur ausgeführt, wenn die Maus gedrückt wird. So können sich z.B. die Bilder der Collage bei jedem Click neu anordnen.

     void mousePressed(){

       int xPos= random(0, width);

       int yPos= random(0, height);

     }

2e   map()

Der map-Befehl ermöglicht es, einen Wertebereich einem neuen zuzuordnen. Im Beispiel soll sich der Grashalm , abhängig von der Mausposition auf der x-Achse von -90° bis 90° knicken. Die Werte des Knickwinkels werden von 0 bis width auf -90° bis 90° verteilt.

     winkel=map(mouseX, 0, width, -90, 90);

Dieser Befehl funktioniert natürlich nur dann so, wenn die Variable winkel eine vom Typ float ist. Ansonsten sähe die Schreibweise so aus:

     winkel=int(map(mouseX, 0, width, -90, 90));

Mit rotate(); können Objekte um den derzeitigen Ursprung rotiert werden. Um den Winkel in Grad angeben zu können, sieht der Befehl so aus:

     rotate(radians(winkel)); 

Damit der Grashalm sich also um seine Wurzel dreht, wird das Koordinatensystem mit translate(); dort hinverschoben.

Beispiel3: Grashalm

float laenge=150;
float winkel;

void setup(){
smooth();
size(500, 500);
background(255);
}

void draw(){
//background(255);
fill(255, 20);
rect(0, 0, width, height);
stroke(0, 50);
strokeWeight(.5);

translate(width/2, height-50);
winkel=map(mouseX, 0, width, -90, 90);
rotate(radians(winkel));

line(0, 0, 0, -laenge);
strokeWeight(20);
point(0, -laenge);
strokeWeight(.5);
}

3 Bedingungen / Schleifen

Eine Funktion ein- oder ausschalten – um Funktionen nur zu bestimmten Zuständen ausführen zu können,  muss man Bedingung definieren, z.B. “mache das, wenn ich in einem bestimmten Bereich klicke…”. Hier geht es darum einen Wert mit einem anderen Wert oder einem Ereignis in Beziehung zu setzen.

3a   Relationale Operatoren

Um Bedingungen aufzustellen und abzufragen gibt es verschiedene Zeichen mit unterschiedlicher Bedeutung.

     =       ...Gleichheit, Wertzuweisung, Zahlen und boolean' Variablen
     <       ...kleiner als
     >       ...größer als
     <=      ...kleiner oder genauso groß
     >=      ...genauso groß oder größer
     ==      ...Gleichheit, nur bei der if-Abfrage
     =!      ...Ungleichheit, nur bei der if-Abfrage

Außerdem können Variablen ihren Wert z.B. nur ab einer Bestimmten Mausposition ändern, auch hier muss eine Bedingung gestellt werden. Mehrere Bedingungen lassen sich je nachdem mit && (“und”) oder  || (“oder”) verknüpfen Der Variablentyp für diese Bedingung heißt boolean. Ihr Wert wird in einer if-Schleife abgefragt.

3b   if-Schleife

   if(mouseX <= width/2);
     rectZeichnen=true;
   }else{
     rectZeichnen=false;
   }

   if(rectZeichnen==true){
     rect(mouseX, mouseY, 50, 50);
   }

Einen Toggle schreibt man, indem man bei einem Ereignis eine boolean =! boolean setzt. Genau dann nämlich nimmt die Variable immer den Wert an, den sie gerade nicht hat. Die Frage ist, ob es immer sinnvoll ist, eine Funktion mit dem selben Button ein-und auszuschalten…in diesem Fall aber definitiv! Hier noch ein einfaches Beispiel für parametrische Buttons :

Mit dem Befehl dist(); lassen sich entfernungen zwischen zwei Punkten berechnen. In der Klammer steht also:

    dist         (xKoordinate1, yKoordinate1, xKoordinate2, yKoordinate2);

Da eine Gerade gemessen wird, kann ein runder Button so abgefragt werden.

3c   for-Schleife

Damit Ereignisse öfter passieren, also z.B. mehrere Objekte gezeichnet werden, ohne immer wieder einen Befehl wiederholen zu müssen, kann man die Anzahl der Ausfürungen innerhalb einer for-Schleife vergrößern und begrenzen. Die Syntax dafür sieht so aus:

void draw(){
  background(255);
  ellipseMode(CENTER);
  translate(width/1.85, height/3.8);
  smooth();
  stroke(0, 30);
  for(int i=0; i<360; i=i+10){
    rotate(radians(10));
    translate(20, 0);
    stroke(0.7*i);
    line(0, 0, 100, 0);
  }
}

3d pushMatrix(); / popMatrix();

pushMatrix(); und popMatrix(); ermöglichen es, Objekte unabhängig voneinander verschiedenen Koordinatensystemen zuzuweisen und sie unabhängig voneinander zu rotieren. Im Code kann das von Vorteil sein, sobald man mehrere Objekte an verschiedenen Stellen mit verschiedener Rotation zeichnen möchte. Alles was innerhalb der beiden Befehle steht, passiert in einer eigenen, seperaten Matrix. Dabei können mehrere Matrizen in einem Sketch generiert werden.

1) Zuerst analysieren wir Photoshop und Word. Untersucht werden Verhalten und Eigenschaften physischer und digitaler Interfaces. Parallel hierzu wird der Fokus auf Verhalten und Handlungen des Nutzers gerichtet. Aufgabe: Bitte erstellen Sie Photos mit jeweils zwei Szenarien.

In- and Output physikalischer Gegenstände
1. Was für eine Aktion führt der Benutzer aus?
2. Die digitale interaktive Funktion
3. Die analoge Handlungsausführung der Interaktion
Beim In-Output digitaler Applikationen werden Funktionen aus der realen Welt abstrakt in die digitale zweidimensionale Ebene dargestellt. Mit Hilfe von analogen Prozessen sollen 2 Funktionen dargestellt werden. Der In- Output physikalischer Gegenstände soll nachvollzogen werden.

Möglichkeiten von Handlungen, die in Interaktionen umgesetzt werden:
suchen, wählen, auswählen, anzeigen, mixen, rühren, drehen, kreuzen, aufbewahren, trocknen, kochen, kühlen, abspielen, laufen, heizen, brennen, Signal anzeigen, klingeln, klopfen, etc.

2)
In- and Output physikalischer Gegenstände
Welche Handlungsschritte werden beim Bedienen der Software ausgeführt?
Erstellen Sie eine Serie von Filmsequenzen mit 5-8 Interaktionen (Ein- und Ausgabe), der Prozesskette Ihres Szenarios: Fotografieren Sie die Zustände „Ausgangssituation, an, aus, Ergebnis“ der Interaktion ab. Erstellen Sie eine Prozesskette der Interaktionen der aufeinander folgenden Handlungen des Nutzers. Zustände mit physischen Gegenständen, beispielhaft aus der Küche, dem Wohnzimmer, dem öffentlichen Raum mit den Funktionen, die das Medium der Erinnerungen beinhalten soll. (Beispielhaft: Ein Mixer kann mixen. Er kann Materialien zerkleinern und gleichzeitig vermengen. Feste Masse wird flüssig => Metapher für Daten aus der digitalen Welt: Die Daten werden pixelgenau zerkleinert und beliebig vermengt. Danach werden wir gemeinsam prüfen, ob die Handhabung (Aktion des Nutzers), die physikalische und digitale Interaktion passend zusammen gesetzt werden können.

输入和输出，调控和操作

首先，我们要分析Photoshop, 研究物质和数字界面的关系和特性。同时对用户的举动和行为进行聚焦。
作业：用照片的形式记录两个场景。

(物质性)物件的输入和输出
1. 用户的动作是什么？
2. 数字交互功能。
3. 交互的物质行为方式。

在“输入-输出”数字应用的同时，真实世界的功能在数字二维层面将被抽象地表现出来。通过物质过程的帮助表现两个功能。(物质性)物件的输入和输出应能联系起来。

在交互中实现的行为的可能性：
寻找、选择、挑选、指示、混合、触动、转动、交叉、保存、干燥、烹饪、播放、跑动、加热、燃烧、发出信号、按铃、敲击，等等。

Zhang Wei / Feng Jing // Sperren / Gruppieren // PDF

Zhu Wen / Zhen Quing // PDF

Ai Wei Wei / Ye Qiaomin // … / Messen // PDF

Gong Longyu / Wang Dandan // Freistellen / Struktur // PDF

Cheng Zhe / Xu Jingzhe // Rotieren / Farbton/Sättigung // PDF

Liang Guanbo / Huang Yaoyao // … / … //PDF

Me In My Bag
Prof. Steffi Hußlein

1. Was ist Interface oder Interaction Design?
Bitte digitalisieren/verschriftlichen Sie Ihre Ansicht/ Beschreibung über
Interface oder Interaction Design. Als PDF/ InDesign speichern.

2. Eine Tasche ist ein Behältnis zum Transportieren von persönlichen, immer gegenwärtigen Gegenständen. Die Tasche ist im übergeordneten Sinn ein täglicher Speicherort für persönliche Utensilien oder mitgenommene Gegenstände. Das Spannungsfeld der grafischen Repräsentation von Informationen mit physikalischen Zuständen oder Vorgängen verknüpft. Frage: Ist meine Tasche ein Interface? Welche Dinge, Produkte oder unscheinbare Notizen trage ich in meiner Tasche mit mir?

Fotografieren:
Bitte fotografieren Sie Ihre ausgeschüttete Tasche ab. Kennzeichnen Sie wichtige Gegenstände, Symbole oder mitgeführte Informationen.
Inhalt: Welche Tätigkeite werden mit den Gegenständen ausgeführt? Welche Informationen stecken in den Gegenständen?

Informationsgrafik:
Bitte stellen Sie eine Informationsgrafik
Icons sind erwünscht. Es soll für mich verständlich sein, welche Informationen der Träger beinhaltet.

Dokumentation:
Bitte dokumentieren Sie den Zustand und Inhalt Ihrer oder der Tasche Ihres Nachbarn.
Formblatt: Name, Alter, Nationalität, Inhalt der Tasche, Aufzählung von min. 5 Gegenständen. Welche Informationen oder Funktionen stecken hinter dem Gegenstand? Wofür? Warum? Interpretationen! PDF-Abgabe/ InDesign.

* Interfaces zum Aufbewahren, archivieren, sammeln von Dingen, anzeigen von Daten, abrufen von Daten, Oerbinden von Objekten etc.