Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн

Статьи о дизайне   Портфолио дизайнера
Дизайн Форум


Про дизайн и web дизайн




Главная     Форум     Галереи




  Статьи о дизайне





  Как проектировать интерфейс




Технический дизайн интерфейса

Конструкция кнопки (Button Construction)
Конструкция чекбокса (Checkbox Construction)
Конструкция комбика (Combobox Construction)
Редактируемое текстовое поле (Edit Construction)
Плавающий список (Floating List Construction)
Фокус (Focus Construction)
Выпадающее меню (Menu Construction)
Радио баттон (Radio Button Construction)
Конструкция скрола (Scrollbar Construction)
Конструкция закладки (Tabs Construction)
Конструкция окна (Window Panel Construction)

Конструкция кнопки (Button Construction)
Button
The default component button has a height of 22 pixels and a width determined by the length of the button text and its padding. The button face is 18 pixels tall with 2 pixel borders for the bezels. The type is centered on the button face. The button is comprised of scalable vector resources which enable disproportional resizing without distortion. Resizing the button will not alter the text size. The button can also contain an icon image with or without text included (see Button example in the LPS 2.0 Welcome Page).

The button form is constructed of four views. The views are:
1. The "Outer Bezel" creates an indented area around the button
2. The "Inner Bezel" defines the edges of the button
3. The "Simple Face" is the face of the button.
4. The "Text" for the button label -11 pt Verity Roman
(An icon or image can be used with text or alone.)

Views 1-3 are constructed as multiple frame resources which change based on the state of the button.

The outer and inner bezels (and each of their states) are constructed of a "hairline" .swf file with two different colored strokes on each rectangle. These files were built using the Flash authoring tool, and take advantage of a feature of the .swf file format that is not supported in other vector-based programs (such as Adobe Illustrator). Hairline strokes created in Flash will retain their weight regardless of scaling*. This means that using a size other than the default will not distort the look of the button. Although transparent, the disabled state of the button (which is visually smaller) retains the Outer Bezel to insure alignment with the other resources.
The face view contains a .swf resource which is a vector gradient acting as the face of the button. There are 4 separate files for each of the button states, each with its own gradation and opacity. These files are saved as 1 pixel wide by 18 pixel high (default face height) resources and are scaled horizontally to the width of the button.

*An unfortunate effect of this technique is that a "hairline" only retains its width when decreasing scale. Scaling a "hairline" up will scale the thickness of the stroke. In an effort to work around this, the assets for both outer and inner bezels (and their states) are set at the overly large size of 500x500 pixels.


Конструкция чекбокса (Checkbox Construction)
Check Box
The default check box has a height and width of 15 pixels. The check box is a scalable vector resource which enables proportional resizing without distortion. Disproportional scaling will result in an odd check mark.

All resources in check box (including disabled state) have the same exterior dimensions. Resources which appear to be smaller contain invisible rectangles that surround the visible art. This ensures the resource frames automatically register with one another, and will not need to be repositioned in code.
Check box is constructed as single resources for the various states. The placement of associated text has been defined to compliment the default size. Text is left-aligned and set to the right of the button. The disabled state, although visually smaller, has the same dimensions as the enabled versions. A transparent rectangle (indicated by white dashed line) insures alignment when a check box changes state.


Конструкция комбика (Combobox Construction)
Combo Box
The combo box is defined by three pieces:
1. The button, which activates the menu (right side)
2. The text area, containing the default menu item
3. The menu (aka floating list)

The combo box contains an attribute to create either editable or non-editable instances of this component. The button is the same for both versions and consists of a multi-frame resource for the different states. The text area has a different look for editable and non-editable versions.
The floating list is the same for both. The default combo box has a height of 22 pixels and a width determined by the length of the largest content item and its padding. The type is left aligned.


Редактируемое текстовое поле (Edit Construction)
Editable Text Field
The default edit text field has a height of 22 pixels and a width of 106 pixels. The field is comprised of scalable vector resources which enable disproportional resizing without distortion. Resizing the edit text field will not alter the text.
Edit Text is constructed of four views:
1. The "Outer Bezel" creates an indented area around the field
2. The "Inner Bezel" defines the recess of the field
3. The "Face" is the background and center of the field
4. The "Text" view which is contained in an input text field

Each of the first three views contains multiple resource frames which change based on the state of the button.
The outer and inner bezels (and each of their states) are constructed of a "hairline" .swf file with two different colored strokes on each rectangle. These files were built using the Flash authoring tool, and take advantage of a feature of the .swf file format that is not supported in other vector-based programs (such as Illustrator). "Hairlines" created in Flash will retain their weight regardless of scaling*. This means that using a size other than the default will not distort the look. The face is an LZX view with a background color (bgcolor). The opacity and bgcolor change between enabled and disabled states.

*An unfortunate effect of this technique is that a hairline stroke only retains its width when decreasing scale. Scaling a hairline up will scale the thickness of the stroke. In an effort to work around this, the assets for both outer and inner bezels (and their states) are set at the overly large size of 500x500 pixels.


Плавающий список (Floating List Construction)
Floating List
The floating list is used in conjunction with other components. Both combobox and menu use this component.
The floating list is defined by six pieces:
1. The end caps (constructed of 3 pieces each)
2. The menu area
3. List highlight
4. List selection
5. Text (icon can be used in place of text)
6. The menu shadow

The menu, highlight and selection areas are shapes defined in LZX code and have no external resources. The border and background colors are attributes which are defined in the floating list class and styles; both can be easily customized. The highlight and selection are created by telling the list item background color to change depending on interaction. The end caps are rarely used together on one floating list and are each comprised of three swfs: left, middle and right.
The end caps are designed to scale horizontally. Scaling the end caps vertically is not advised. Text is 11pt Verity Roman

The highlight and selected rectangles have a default height of 19 pixels and a width determined by the width of the menu. The type is inset and left aligned within the menu.
The menu shadow is a 5 piece view*. The shadow middle resources stretch in both the direction of their orientation, and are constrained to the width and height of the floating list. Shadows were constructed in Macromedia Flash using "Soften edges" and a gradation of 100% black to 0% black.

The top right shadow resource has 3 frames that switch between states depending on the context and position of the menu

The frames are:
"pop_shadow_flush_top_rt.swf" no top cap (combo box, menu)
"pop_shadow_corner_top_rt.swf no top cap (submenus)
"pop_shadow_oval_top_rt.swf" for use with the top cap

*More info on multi-piece views:


Фокус (Focus Construction)
Focus
Focus is the visual component of keyboard navigation. Keyboard navigation allows the components to be used without a mouse. The tab key activates focus and moves between components in an application, the arrow keys enable selection within a component and the enter key or spacebar activates the selection. Focus appears as four brackets which adjust their dimension to surround the selected component. The brackets animate between objects as the tab key is pressed and disappears after a few seconds. Focus is enabled by default and has automatic awareness of included components and their position within an application.
Focus is defined by eight pieces:
1-4. The corner brackets
5-8. Shadows of the corner brackets

The bracket edges are two pixels thick (light and dark rows), enabling contrast against most background colors. Small drop shadows give the illusion that the brackets are floating slightly above the selected component. Focus has only one state, and can be disabled.


Выпадающее меню (Menu Construction)
Menu
Both menu and menubar combine the components "Button" and "Floating List" to form a menuing system. The menu buttons and menu bar use the "button" component. The menu list itself is a "floating list", which is itself an extension of "list". Modifying these components will cause the same changes to be inherited by the menu. These components have been integrated and coded to have the behavior of a menubar or menu.

Menu is an constructed of four components :
1. Menu button - an extension of button
2. Menu bar - an inactive bar utilizing the resources for button
3. Menu list - an extension of floating list
4. Text - contained in an input text field


Радио баттон (Radio Button Construction)
Radio Button
The default radio button has a height and width of 14 pixels. The button is a scalable vector resource which can be proportionally resized without distortion. Disproportional scaling will result in an oval button.
Radio buttons are constructed as single resources for each of the various states. The placement of text associated with a radio button has been defined to compliment the default size. Text is positioned to the right of the button. The disabled state, although visually smaller, has the same dimensions as the enabled versions. A transparent circle (indicated by white dashed line) ensures alignment when a button changes state.


Конструкция скрола (Scrollbar Construction)
Scroll Bar
The scroll bar has separate classes and resources for each axis. For the purpose of simplicity, only the vertical version (aka Scroll Y) is covered in this document.
The scroll bar is defined by six pieces:
1. Scroll background
2. Up button
3. Scroll track
4. Scroll thumb (3 pieces)
5. Gripper
6. Down button

The scroll background is a colored LZX view that contains all of the resources. The view is offset to create a one pixel border around the scrollbar.
The scroll track is actually two views sandwiched between the up scroll button, the thumb and the down scroll button. The scroll track resizes as the thumb is moved to create the illusion of the thumb moving over it. The scroll track is a clickable resource which moves the thumb and scrolls the page. The scroll track has a down and disabled state, but no mouse-over.

The scroll thumb is a set of three scalable vector resources. The scrollbar changes its height based on the amount of content clipped within the scrolling content area.
The gripper is a very long (440 pixels) .PNG resource that overlays the thumb and is centered with a fixed amount padding. It is clipped and constrained to the height of the thumb (minus the padding). As a .SWF resource this file contains many points, and since it is not designed to scale, it is more efficient saved as a bitmap .PNG (approx. 60x smaller).


Конструкция закладки (Tabs Construction)
Tabs
The default tabs have a height of 26 pixels and the width is determined by the length of the tab text and its padding. Although the resources appear to be different sizes, the selected and deselected resources are actually the same height. The deselected pieces have a transparent layer that makes up the difference. The type is centered on the tab face and changes its position programatically. The tab is comprised of scalable vector resources which enable proportional resizing without distortion. resizing the button will not alter the text size or position.

The tab is constructed of five views:
1. The left side of the tab
2. The middle stretchable section of the tab
3. The right side of the tab
4. The "border" of the content area.
5. The content area background

Each of the first three views contains multiple resource frames which change based on the state of the tab.
The left and right tab resources (and each of their states) are constructed of vector .swf files and are designed to be used at their current size. The middle piece is a vector .swf file constructed to scale horizontally as the tab width increases.
The border and content area are both colorized LZX views. The default border is set at 1 pixel and retains that dimension as the content area grows. The content area has an 8 pixel inset on all sides, so that content is automatically inset.


Конструкция окна (Window Panel Construction)
Window Panel
Window panel is a fixed-size window. It is also the basis for "window" (which is resizable), "modal dialog", and "alert". The base art for "window panel" is constructed of 9 pieces. 4 corners, 4 resizable middle edges and the middle. There are also controls included: the gripper (and title) and close button (with 4 states).

The window panel has 3 states: deselected (_dslct), selected (_slct) and dragging (_drag). The background of the deselected state has less contrast and no shadow. The selected state has more contrast and a small perimeter shadow. Dragging the window creates a more pronounced shadow, adding to the illusion that the window has been brought to front and is above other UI objects. Drag state only applies to resources on the right and bottom sides, the top and left use the same resources as the selected state.






Не останавливайся, смотри дальше!

Технический дизайн интерфейса. Примеры и Макеты








Электронные книги о дизайнеЧМ 2018Гламурные картинкиГраффити галереяЯпония фотографииО путешествиях и странах, дешевые авиабилеты и отелиДизайн форум



    Rambler's Top100     Яндекс.Метрика  


Web дизайн и создание сайтов


Карта сайта       Наверх