Posts tagged 网页设计

• Balance
• Rhythm
• Proportion
• Dominance
• Unity

1. Balance

Balance is an equilibrium that results from looking at images and judging them against our ideas of physical structure (such as mass, gravity or the sides of a page). It is the arrangement of the objects in a given design as it relates to their visual weight within a composition. Balance usually comes in two forms: symmetrical and asymmetrical.

• Symmetrical

Symmetrical balance occurs when the weight of a composition is evenly distributed around a central vertical or horizontal axis. Under normal circumstances it assumes identical forms on both sides of the axis. When symmetry occurs with similar, but not identical, forms it is called approximate symmetry. In addition, it is possible to build a composition equally around a central point resulting in radial symmetry¹. Symmetrical balance is also known as formal balance.

• Asymmetrical

Asymmetrical balance occurs when the weight of a composition is not evenly distributed around a central axis. It involves the arranging of objects of differing size in a composition such that they balance one another with their respective visual weights. Often there is one dominant form that is offset by many smaller forms. In general, asymmetrical compositions tend to have a greater sense of visual tension. Asymmetrical balance is also known as informal balance.

Horizontal
symmetry

Approximate
horizontal symmetry

Radial
symmetry

Asymmetry

2. Rhythm

Rhythm is the repetition or alternation of elements, often with defined intervals between them. Rhythm can create a sense of movement, and can establish pattern and texture. There are many different kinds of rhythm, often defined by the feeling it evokes when looking at it.

• Regular: A regular rhythm occurs when the intervals between the elements, and often the elements themselves, are similar in size or length.
• Flowing: A flowing rhythm gives a sense of movement, and is often more organic in nature.
• Progressive: A progressive rhythm shows a sequence of forms through a progression of steps.

Regular
rhythm

Flowing
rhythm

Progressive
rhythm

3. Proportion

Proportion is the comparison of dimensions or distribution of forms. It is the relationship in scale between one element and another, or between a whole object and one of its parts. Differing proportions within a composition can relate to different kinds of balance or symmetry, and can help establish visual weight and depth. In the below examples, notice how the smaller elements seem to recede into the background while the larger elements come to the front.

4. Dominance

Dominance relates to varying degrees of emphasis in design. It determines the visual weight of a composition, establishes space and perspective, and often resolves where the eye goes first when looking at a design. There are three stages of dominance, each relating to the weight of a particular object within a composition.

• Dominant: The object given the most visual weight, the element of primary emphasis that advances to the foreground in the composition.
• Sub-dominant: The element of secondary emphasis, the elements in the middle ground of the composition.
• Subordinate: The object given the least visual weight, the element of tertiary emphasis that recedes to the background of the composition.

In the below example, the trees act as the dominant element, the house and hills as the secondary element, and the mountains as the tertiary element.

5. Unity

The concept of unity describes the relationship between the individual parts and the whole of a composition. It investigates the aspects of a given design that are necessary to tie the composition together, to give it a sense of wholeness, or to break it apart and give it a sense of variety. Unity in design is a concept that stems from some of the Gestalt theories of visual perception and psychology, specifically those dealing with how the human brain organizes visual information into categories, or groups².

Gestalt theory itself is rather lengthy and complex, dealing in various levels of abstraction and generalization, but some of the basic ideas that come out of this kind of thinking are more universal.

• Closure

Closure is the idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces. Objects can be deconstructed into groups of smaller parts, and when some of these parts are missing the brain tends to add information about an object to achieve closure. In the below examples, we compulsively fill in the missing information to create shape.

• Continuance

Continuance is the idea that once you begin looking in one direction, you will continue to do so until something more significant catches your attention. Perspective, or the use of dominant directional lines, tends to successfully direct the viewers eye in a given direction. In addition, the eye direction of any subjects in the design itself can cause a similar effect. In the below example, the eye immediately goes down the direction of the road ending up in the upper right corner of the frame of reference. There is no other dominant object to catch and redirect the attention.

• Similarity, Proximity and Alignment

Items of similar size, shape and color tend to be grouped together by the brain, and a semantic relationship between the items is formed. In addition, items in close proximity to or aligned with one another tend to be grouped in a similar way. In the below example, notice how much easier it is to group and define the shape of the objects in the upper left than the lower right.

更多的设计原则

Related concepts

There are many additional concepts that are related to the principles of design. These can include specific terms and/or techniques that are in some way based on one or more of the above tenets. In they end, they add to the collection of compositional tools available for use by the designer.

• Contrast or Opposition

Contrast addresses the notion of dynamic tensionÔthe degree of conflict that exists within a given design between the visual elements in the composition.

• Positive and Negative Space

Positive and negative space refers to the juxtaposition of figure and ground in a composition. The objects in the environment represent the positive space, and the environment itself is the negative space.

• Rule of Thirds

The rule of thirds is a compositional tool that makes use of the notion that the most interesting compositions are those in which the primary element is off center. Basically, take any frame of reference and divide it into thirds placing the elements of the composition on the lines in between.

• Visual Center

The visual center of any page is just slightly above and to the right of the actual (mathematical) center. This tends to be the natural placement of visual focus, and is also sometimes referred to as museum height.

• Color and Typography

Many would place color and typography along side the five principals I have outlined above. I personally believe both to be elements of design, so I’ll give them some attention in my next column. In addition, both topics are so robust that I plan on writing an entire article about each of them in the future.

Conclusion

In Web design it is too easy to get engrossed in the many unique constraints of the medium and completely forget some of the underlying concepts that can strengthen any design. To better discuss such concepts, we need to step back from our specific discipline and look to the history of the field. It is here we find the axioms of our profession.

In this article we looked at half of those axioms, the principles of design. The principles of design are the guiding truths of our profession, the basic concepts of balance, rhythm, proportion, dominance and unity. Successful use of these core ideas insures a solid foundation upon which any design can thrive.

In the next column, I will discuss the elements of design—the basic components used as part of any composition including point, line, form (shape), texture, color and typography. Comments or suggestions are welcome and appreciated.

原文地址：http://www.digital-web.com/articles/principles_of_design/

继续Sexy Web Design的整理，这一篇主要是网页设计步骤概览。我采用了中英文对照，并截取了书中有趣的图片。

• Step One: Research

步骤一: 市场调查、用户行为研究等分析。和广告公司中Planning的工作有类似。

调查研究对于任何设计、开发等强调以“用户为中心”、“市场为导向”的工作来说，都是至关重要、起决定性作用的步骤。

• Step Two: Structure

步骤二：内容结构的确立

Scribble of the site structure  (Free time: what the site can become)

推荐要做的事：拿出纸笔在纸面上胡乱涂鸦。这是我们最喜欢干的事，圈圈画画各种结构层级图，很酷！

• Info architecture

(key message,primary call to action…)

To organize information in a useful and logical manner

在做“结构”时，第一点是梳理整个网站的信息，使之有明确的架构：有主梁、有承重墙、有进出的门……用一种逻辑性的、易用性的方式去组织庞大的信息，使之结构化。

信息的架构其实是应该有专人来做，但是现阶段大部分的设计师都或多或少承担了其中的工作。

• Wireframing(blueprint)

第二点就是进入线框图的绘制阶段，还是先进行纸上的草图勾画，用具体的页面来呈现内容架构。草图之后再动用一些画线框图的软件来进行更为清晰的定稿。

• Tone, Atmosphere（goal of the visual style: to evoke a feeling in the end user to tie in with  the site）

第三点就是往黑白的框架上添点颜色和血肉了。采用某种调性的设计去建立网站与用户的情绪性、情感性连结，营造一种气氛，就像咖啡馆和快餐店的气氛一样迥然不同。

• Step Three：Interaction

(scrolling through the text, pushing buttons, submitting search queries, opening menus, navigating through multiple pages …)

步骤三：交互。

滚动文字、按某个键、提交搜索请求、打开某些菜单、多页面的导航显示…….网页上用户的交互行为不胜枚举。

• Navigation（the most important interactive element）

首先值得强调的一项交互就是“信息导航”，可以说导航是一个网站中最重要的交互元素。之后会有文章详细介绍各类导航的方式。

• Form 表单

• Audio & Video 多媒体

• Step Four：Aesthetics （the fun part: crack open the tins of paint and start throwing colors at the canvas）

步骤四：美。有了那么多步骤的铺陈，设计师终于可以挥毫泼墨了。对于具体的设计发挥越不拘一格越有惊喜，我也不做过多点评翻译了。

• Layout & composition 布局

• Artistic Layer （Attention to detail for a visually rewarding XP: the distinction between good and great design)

艺术性：请给设计以灵魂、个性 (To give designs soul, personality, and character)

• Typography 排版

• Images: Photograph, illustrative diagram, box shadow, a rounded corner(visual styling of the page), iconography

图像，包括照片、图表，以及在文本框外增加阴影、头像照片采用圆角而不是直角等格式都是很好的图像化设计得方式，另一种重要的方式是用小图标进行图像语言上的意义提示

• Convention vs. Innovation 传统规范VS.创新创意

• Step Five：Deliverables: split your lovely Photoshop output into individual image files, ready for a developer to build

步骤五：提交一份设计成品，这个成品应该是可以让其他设计人员、开发人员很容易上手使用的、规范的、详细的文档。包括了一份完整的设计稿和设计手册（包括了各种应用规范）

• Design Comps(comprehensive artwork)

• Style Guides (brand, identity, logo design, page templates…)