윈도우 앱개발을 향하여

Copyright

이 모든 내용은 Pluralsight에 Jason Roberts가 올린 'An Introduction to Design'라는 강의의 두번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/design-introduction/table-of-contents).

Content

1. Typography

2. Color

3. The Fundamental Gestalt Principles

4. Layout and Organization Principles

Outline

Brief History

Fonts, typefaces, and families

Basic anatomy and nomenclature of type

Categories of typefaces

Legibility and readability

Better typography

What is Typography?

The style and appearance of printed matter

The art or procedure of arranging type or processing data and printing from it   - Oxford Dictionary

eg. Arranging Type

Typeface(서채) choice : 상황에 맞는 서채의 선택

Size of the type : 가독성과 미적인 요소, 전반적인 디자인에 영향

Leading : how much space between lines of text

Tracking : the space between letters

Measure : the length of the lines of text

Hierarchy : visual Hierarchy helps to create a sense of order and helps separate sections of text

Context : 책 페이지의 텍스트 배열은 길가의 텍스트 배열과 다르다.

Aesthetics : arrangement에 따른 전반적인 미학도 고려되어야 한다.

A Brief History of Typography

1000-2000 BCE : 그리스에서 발견된 도기조각에 찍힌 문자들 (최초의 폰트)

c. 1450 CE : Johannes Gutenberg의 유럽 최초의 활자기 => the Gutenberg Bible 

c. 1870 CE : Hansen Writing Ball (1865, the Reverend Erasmus Mundus Hansen in Denmark) : 최초의 상업용 타자기

today : with personal computers access to thousands of fonts and high quality printers

everyone with basic device considered amateur typographers

Typeface or Font?

Typeface : something that's created by a type designer. Times New Roman, Sego UI, Heretica are a typeface.

The way it looks(Design thing, referring to how the letter look, the curves and the lines)

Font : the implementation or delivery mechanism of the typeface

Typeface Families

A typeface can exist on its own or it might exist as part of a family

All of the individual typefaces within the family are stylistically related to one another (Style)

eg. Segoe UI Family consists of a number of typefaces(Segoe UI, Segoe UI - Light, Semilight, Semibold -)

There's plenty more alternative styles of typeface that may often form part of a family such as additional variations on weight/boldness/italic/letter width/condensed styles with narrower letters/combination

Basic Anatomy of Type

Baseline : an imaginary line on top of which the characters sit.

x-height : the distance from the baseline to the top of the lowercase letters

The x-height is typically the height of the lowercase letter x

Kerning : the space between two letters. fix the spaces between certain pairs of letters

Fonts can come with kerning information imbedded in them

Ascender : the vertical stems of letters that raise in an upward direction

The ascend arises above the x-height of the typeface

Descender : the downward vertical stem that sits below the baseline

Leading : the distance between lines of text. It's measured from baseline to baseline (line spacing)

Tracking : the space between all the letters in a block of text. The adjustment of space between all the letters.

Serifs : small extra shapes that exist at the ends of some line strokes in a letter

The shape of Serifs can be roughly categorized into three groups

Hariline, Slab(square), Wedge

If the Serif features a curved transition from the main stroke line into the Serif, it's known as a bracketed Serif

Typefaces with no Serifs are called Sans Serif typefaces

Categories of Typeface

Humanist : also known as Venetian. sloping crossbar on the letter e, short bracketed Serifs (15th century)

Old Style : wedge shaped Serifs, horizontal cross bar of the letter e (late 15 century)

Transitional : more horizontal ascender Serifs and an increased difference between the thin and thick line strokes, vertical letter o

(18th century)

Modern : high contrast between thick and thin line strokes, unbracketed hairline Serifs and upright letters with no slanting

Moderns are also known as Dedon typefaces (late 18th century)

Slab Serifs : also known as Egyptian typefaces. Little variation in line stroke width and heavy traditionally unbracketed Slab Serifs

The Slab Serif family consists of a number of sub classifications such as the fat faces and the Clarendon (19th century)

San Serif : little or no variation in light stroke thickness and no Serifs (19th century)

One of the most famous Sans Serifs is Helvetica

The Difference between Legibility and Readability

Legibility

Micro-level

Individual letter recognition

Differentiation between letters

Inherent in fonts

Readability

Macro-level

Words, pharases, paragraphs

Overall ease of comprehension

Reading comfort

Combination of font & layout

Readability in context (생략)

Better Typography : Measure

Measure is the length of a line of text

Number for the perfect measure is 65 characters per line including spaces, aim 40 ~ (65) ~ 80

Better Typography : Leading

Leading is the spacing between lines of text (also line height)

특별히 정해진 규칙은 없으나, One rule of thumb is to set the leading to 120% of the text size

Better Typography : Scale

역활에 맞는 크기를 주어주는 것이 좋다.

피보나치 수열(1,2,3,4,8,13,21,34...)이나 제곱수열(1,2,4,8,16,32....) 등을 사용할 수 있으나 중요한 점은, 문자의 크기가 결정된 뒤에는 일관되게 사용되어야 한다는 것이다.

Better Typography : Vertical Rhythm

18 points in size, 21 leading == 18/21

글의 leading인 21을 기준으로 Main Heading의 leading과 아래여백을 정한다... 

Sub Heading의 위아래 여백을 10, 11로 잡아주었다. (10 + 11 = 21)

여기서 알 수 있는 Vertical Rhythm의 가장 중요한 점은 21에 맞춰 2번째 문장이 다시 base line에 돌아왔다는 것이다.

Better Typography : Kerning

the spacing of individual pairs of letters

보통 소프트웨어나 font에서 제공되는 kerning을 그대로 이용하지만, 간혹 Manual kerning을 해야할 때도 있다. 주로 title과 같은 large letters를 다룰때이다. 어색해보이는 간격을 줄이거나 늘림으로써 미적인 아름다움을 확보할 수 있다.

Summary (생략)

출처

이 모든 내용은 Pluralsight에 Jason Roberts가 올린 'An Introduction to Design'라는 강의의 두번째 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/design-introduction/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.

First Draft

그런데 뭔가 밋밋하고 답답해보인다.

배경이 문제인가?

배경이 문제가 아니라 Orange색상 때문에 답답해보이는걸까?

Copyright

이 모든 내용은 Pluralsight에 Thomas Claudius Huber가 올린 'XAML Layout in Depth'라는 강의의 마지막 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-layout-in-depth/table-of-contents).

Content

1. Layout Basics 1

2. Layout Basics 2

3. Layout properties of Element

4. Panels

5. Transformations and Projections

6. Advanced Topics

Outline

The Grid : Overlay and shared size groups

Layout the content of a Control

Change the Panel of an ItemsControl

ScrollViewer and Viewbox

Animated move of elements in a Panel

The Grid as Overlay-container

If you don't specify RowDefinitions and ColumnDefinirions the Grid is one single cell.

Elements in one cell are drawn over each other in the order that defined in XAML(the last element is on top)

So the Grid is the perfect panel to overlay items.

eg. Loading-overlay

<Grid>

<!-- Content -->

<some panel> ...content... </some panel>

<!-- Loading overlay -->

<Gird                                        //custom control로 만들어 따로 빼두는게 이용에 편리하다.

Background="#AAFFFFFF"        //FFFFFF == white, alpha channel of AA == a bit transparent

d:IsHidden="True"                  //Hidden this element to do not overlay elements on the designer

Visibility="{x:Bind ....IsLoading}" //Data binding 로딩이 끝나면 사라질 수 있도록

>

<ProgressRing .../>

</Grid>

</Gird>

The Grid : Shared Size Groups (WPF only)

Share the same size between different ColumnDefinitions or RowDefinitions, Even across multiple Grid-instances

Set the SharedSizeGroup property on RowDefinitions or ColumnDefinitnons, its of type string(without space, not start with number).

Then Set the attached property Grid.IsSharedSizeScope on a parent to true.

eg. <StackPanel Grid.IsSharedSizeScope="True">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition SharedSizeGroup="myGroup">

<ColumnDefinition/>

</Grid.ColumnDefinitions>

</Grid>

<Grid>

<Grid.ColumnDefinitions>    //Size of this column is sync with the above column with SharedSizeGroup

<ColumnDefinition SharedSizeGroup="myGroup">

<ColumnDefinition/>

</Grid.ColumnDefinitions>

</Grid>

</Grid>

# Star-sized columns or rows with a SharedSizeGroup are treated as Auto at runtime.

Layout the Content of a Control

Let's assume that the content of a Control is a FrameworkElement which contains Horizontal/VerticalAlignment and Margin

The Control class is a subclass of FrameworkElement and it defines Horizontal/VerticalContentAlignment and Padding to layout its content

When you set Horizontal/VerticalContentAlignment property, the Control internally sets the Horizontal/VerticalAlignment on its Content, and there is a Padding property that sets the Margin property on the Content. All those properties are wired together in the Control template of a Control.

eg.  //To Strecth Contents of ListView

<ListView HorizontalAlignment="Stretch"

HorizontalContentAlignment="Stretch"    //Have effect in WPF

Background="YellowGreen" ItemsSource="{x:Bind peaple}">

        <ListView.ItemContainerStyle>

            <Style TargetType="ListViewItem">

                <Setter Property="HorizontalContentAlignment"  Value="Stretch" />   //Have effect in UWP

            </Style>

        </ListView.ItemContainerStyle>

        <ListView.ItemTemplate>

            <DataTemplate x:DataType="model:Person">

                <Border HorizontalAlignment="Stretch" Background="Orange" CornerRadius="5" Margin="1"> //No effect

                    <StackPanel Margin="5">

                        <TextBlock Text="{x:Bind Name}"/>

                        <TextBlock Text="{x:Bind Age}"/>

                    </StackPanel>

                </Border>

            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>

Change the Panel of an ItemsControl

An ItemsControl can contain many objects. Typical ItemsControls are the ListView and ComboBox

To change the panel there is two options

1. Set the ItemsPanel property of ItemsControl

Assign an ItemsPanelTemplate to this property and specify the panel in the ItemsPanelTemplate

2. Assign a new ControlTemplate to the Template property of ItemsControl

Inside of that Template, create a Panel and Set the IsItemsHost property(defined in the Panel class) to true

(This property is readonly in WinRT)

Normally change the Panel of an ItemsControl, choose option 1.

When you are defining the new ControlTemplate to create a new look for your ItemsControl, choose option 2

When There's Not Enough Space

When there is not enough space for panel, panels are just clipping their elements.

1. Put your panel into a ScrollViewer, it supports Horizontal/Vertical scroll bars

2. Or put your panel into a Viewbox, it will just shrink or scale your panel

The ScrollViewer

To display a vertical and horizontal scrollbar

ScrollViewer class inherits from ContentControl, so it has a Content property of type Object (like button)

Control the scrollbar visibility with the properties VerticalScrollBarVisibiity(default Visible) and HorizontalScrollBarVisibility(default Disabled), both properties take a value of the ScrollBarVisibility enumeration(Disabled, Auto, Hidden, Visible)

# Some ItemControls, like the ListView, have an internal ScrollViewer, it is defined in the ControlTemplate of the ListView

Use attached properties to modify the internal ScrollViewer

eg. <ListView ScrollViewer.VerticalScrollBarVisibility="Auto" />

The Viewbox

To stretch an element to the available space

The Viewbox class inherits via Decorator from FrameworkElement in WPF. In WinRT, Viewbox inherits FrameworkElement directly

The Decorator class defines a child property that takes a single UIElement. In the WinRT, the child property is directly defined on the Viewbox itself. ViewBox has a child property anyway, so in XAML you can just place any UIElement inside of Viewbox. Then the Viewbox will automatically stretch the element based on the available space.

To control the stretching, the Viewbox has a Stretch property that takes a value of the Stretch enumeration

None : no stretching (DesiredSize)

Fill : aspect ratio changes to fill the available space

Uniform(default) : aspect ratio never changed, there is leftover space

UniformToFill : aspect ratio never changed, and fill the leftover space 

and StretchDirection property of type enum StretchDirection

UpOnly : only grow (DesiredSize가 최소크기이고 그 이하로 공간이 부족해지면 clip된다)

DownOnly : only shrink (DesiredSize가 최대크기)

Both(default) : can be shrink and grow

Animated Move of Elements in a Panel

In some scenarios an animated move makes the user experience much better

Instead of using a TranslateTransform, you can also use the FluidMoveBehavior that animates a change in the position of an element (high-level class), it's like an animated TranslateTransform, but it's much simpler to use

To use it open up Blend and attach the FluidMoveBehavior to a Panel (asset -> behavior -> drap&drop -> property setting)

In Blend, There's also a FluidMoveSetTagBehavior that allows you to define a starting point for the move

그러나 FluidMoveBehavior가 UWP project에 기본적으로 들어있지는 않았다, Nuget을 통해 받아 사용하는 듯 하나, 아직 Behavior와 관련한 내용을 모르겠다. Pluralsight에서 관련 강의를 찾았다(link).

Summary (생략)

출처

이 모든 내용은 Pluralsight에 Thomas Claudius Huber가 올린 'XAML Layout in Depth'라는 강의의 마지막 챕터를 듣고 정리한 것입니다(https://app.pluralsight.com/library/courses/xaml-layout-in-depth/table-of-contents). 제가 정리한 것보다 더 많은 내용과 Demo를 포함하고 있으며 최종 Summary는 생략하겠습니다. Microsoft 지원을 통해 한달간 무료로 Pluralsight의 강의를 들으실 수도 있습니다.