User Interface Engineering

Überblick

Erst eine gekonnte technische Umsetzung sorgt auch dafür, dass ein herausragendes User Interface Design bei dem Nutzer ankommt. Wir sind darauf spezialisiert professionelle Designs darstellungsgetreu, performant und nachhaltig wartbar zu implementieren. Passend für jede Projektsituation liefern wir beispielsweise Styles, Views oder Custom Controls zu und integrieren uns nahtlos in Ihren Entwicklungsprozess.

Dadurch entlasten wir Ihre Software Engineers und Sie können den Fokus aktiv auf die Geschäftslogik sowie das Backend legen. Unser technologischer Fokus liegt dabei auf Microsoft (.NET, XAML, WPF, Universal Apps, ...) und Qt (QML, QtQuick, QtWidget, QSS, ...). Nichtsdestotrotz kennen wir uns auch mit HTML5 (AngularJS, KnockoutJS, Bootstrap, jQuery, ...) aus.

Jetzt kostenlos beraten lassen!

Disziplinen

Styling

Styling bedeutet, mit Hilfe der jeweiligen Styling-Mechanismen der Technologie, beliebige Standard-Controls in ihrem visuellen Auftreten an das finalisierte User Interface Design anzupassen. Dabei zählt jeder Pixel und jede Kante. Gerade WPF bietet mit Styles, Data Templates und Control Templates unglaubliche Möglichkeiten! Auch bei Qt hat sich mit QtQuick einiges getan, wodurch sich neue Perspektiven für reichhaltige User Interfaces eröffnen.

Custom Control Development

Aus Designsicht können Custom Controls die Usability eines User Interfaces maßgeblich erhöhen und als Differenzierungsmerkmal wirken. Beispielsweise bietet WPF kein Mac-typisches Popover mit Pfeilspitze als Kontextindikator an. Aus technischer Sicht gilt Custom Control Development als die Königsdisziplin des UI Engineerings. Durch die bewusste Implementierung eigener Custom Controls, kann für mehr Konsistenz, Performance und Struktur in der Umsetzung eines User Interfaces gesorgt werden.

// Control Template eines WPF Custom Controls
// zum faken von Schatteneffekten (Performance!)
// Zwei Textblöcke liegen hintereinander
<ControlTemplate TargetType="{x:Type sf:ShadowText}">
    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" CornerRadius="{TemplateBinding CornerRadius}">
        <Grid VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
            <TextBlock x:Name="ShadowText" Text="{TemplateBinding Text}" RenderTransformOrigin="0.5,0.5"
                          Foreground="{TemplateBinding ShadowBrush}" IsHitTestVisible="False" IsEnabled="False"
                          TextWrapping="{TemplateBinding TextWrapping}" TextTrimming="{TemplateBinding TextTrimming}" TextDecorations="{TemplateBinding TextDecorations}">
                <TextBlock.RenderTransform>
                    <TranslateTransform x:Name="PART_Translate" X="{Binding XShadowOffset, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type myControls:ShadowText}}}" Y="{Binding YShadowOffset, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type myControls:ShadowText}}}" />
                </TextBlock.RenderTransform>
            </TextBlock>
            <TextBlock x:Name="NormalText" Text="{TemplateBinding Text}" TextWrapping="{TemplateBinding TextWrapping}" TextTrimming="{TemplateBinding TextTrimming}" TextDecorations="{TemplateBinding TextDecorations}" />
        </Grid>
    </Border>
</ControlTemplate>
// Attribut unter Attribut Formatierung ist die Beste! ;-) (Platzgründe)

Views und Layouting

Neben einer hohen Darstellungstreue einzelner Controls ist auch die konsistente Umsetzung einzelner Ansichten und Masken essentiell für die Realisierung eines ansprechenden Designs. Hier kommt es auf exakte Maße und Abstände an. Wichtige Schlüsselansichten sollten daher als technische Blaupausen codiert werden und dienen dadurch als wiederverwendbare Vorlagen.

Engineering

Ein gutes User Interface überzeugt nicht nur durch ein starkes Design und sinnvolle Bedienkonzepte, sondern glänzt auch unter der Haube mit einer soliden sowie performanten Architektur. Unsere UI Engineers lieben Design Patterns wie beispielsweise MVVM, halten Dependency Injection für grundlegend und schätzen die Testbarkeit relevanter Komponenten.

[TestMethod]
public void SearchForSaarbrueckenTest()
{
    // MSTest unit test for SearchViewModel
    // AAA Pattern

    // Arrange
    FileDataProvider provider = new FileDataProvider();
    GeoService service = new GeoService(provider);
    SearchViewModel viewModel = new SearchViewModel(service);

    // Act
    viewModel.SearchString = "Saarbrücken";
    viewModel.SearchCommand.Execute(null);

    City sb = viewModel.SearchResult.Where(c => c.ZipCode == "66121").FirstOrDefault();

    // Assert
    Assert.IsNotNull(sb);
}

Erzeugnisse

Microsoft .NET / WinRT

  • Externes Styling Projekt / DLL
  • C# und XAML Source-Code
  • Styles und Control Templates
  • Data Templates und Converter
  • Custom Control Libraries
  • Views als UserControls
  • XAML Resource Dictionaries
  • Animationen als Storyboard
  • Behaviors und Attached Properties
  • ViewModels (Run- & Designtime)
  • ...

Qt / QtQuick

  • Externes Styling Plugin
  • C++, QSS und QML Source-Code
  • QML Styles und Templates
  • QSS Stylesheets
  • Custom Controls / Widgets
  • QPainter Routinen
  • Controller
  • Views als QWidget oder QML Component
  • ItemModels und Delegates
  • ...
Jetzt kostenlos beraten lassen!
Haben Sie Fragen zu unseren Services, UX Design oder UI Engineering?
Sprechen Sie uns einfach an! Wir beraten Sie sehr gerne kostenlos und unverbindlich.