网页设计简约_简约网页设计的主要功能

网页设计简约

重点 (Top highlight)

Minimalism is synonymous with simplicity. Not quite. As the name suggests, minimalism is definitely not about opulent design. But the assumption that minimalism is design-less and plain is also wrong. Minimalism is simple yet highly complex. Of course, there are countless definitions of minimalism. Here is one of the most apt ones:

极简主义是简单的代名词。 不完全的。 顾名思义,简约绝对不是华丽的设计。 但是,极简主义是无设计的,朴素的假设也是错误的。 极简主义既简单又高度复杂。 当然,有无数的极简主义定义。 这是最合适的一种:

Minimalism. A school of abstract painting and sculpture that emphasizes extreme simplification of form, as by the use of basic shapes and monochromatic palettes of primary colors, objectivity, and anonymity of style. Also called ABC art, minimal art, reductivism, rejective art. — Sitepoint

极简主义。 一所抽象绘画和雕塑学校,强调极端简化形式,例如使用基本形状和原色的单色调色板,客观性和风格的匿名性。 也称为ABC艺术极简艺术还原 主义排斥艺术 。 - Sitepoint

极简主义如何演变? (How did minimalism evolve?)

Art and architecture before the 1920s was characterized by the playful patterns and lavish ornamentation of Art Nouveau or Art Deco. In the Arts and Crafts movement, gilding and expensive materials made for good design. This was followed by the Bauhaus era, a counter-movement originating in Germany that aimed to produce simple design with affordable means and resources. Their motto “form follows function” was influenced by the simple designs of the Dutch movement “De Stijl”. The style was often not understood by the broader public and was described as sparse or bare.

1920年代以前的艺术和建筑以新艺术运动风格或装饰艺术风格的俏皮图案和豪华装饰为特征。 在Craft.io美术运动中,烫金和昂贵的材料制成了不错的设计。 紧随其后的是包豪斯(Bauhaus)时代,这一反动运动起源于德国,旨在通过负担得起的手段和资源生产出简单的设计。 他们的座右铭“形式遵循功能”受到荷兰“ De Stijl”运动的简单设计的影响。 这种风格通常不为广大公众所理解,被描述为稀疏或裸露。

Image for post
Photo by Ross Sokolovski on Unsplash
Ross Sokolovski在Unsplash上拍摄的照片

A few decades later, artists rediscovered this direction and Minimalism was established. Minimalist artists asked themselves the question: How much can you strip off an object — painting, sculpture, building, furniture — without losing its essential purpose and identity?

几十年后,艺术家重新发现了这个方向,并建立了极简主义。 极简主义的艺术家们问自己一个问题:在不失去其本质目的和特征的情况下,您可以剥离多少物体(绘画,雕塑,建筑物,家具)?

“Strip everything down to its essential quality and achieve simplicity”

“将所有内容降低到其基本质量并实现简单性”

Minimalism influenced all arts and technologies in the late 20th century. A hero of Minimalism was the German architect Ludwig Mies van der Rohe (1886–1969). He is considered a key figure of minimalism and one of the fathers of modern architecture with its clear forms. His primary principles were the reduction of architectural structures to a minimum and the use of a lot of open space. The basic principle of his work was “less is more”.

极简主义在20世纪后期影响了所有艺术和技术。 极简主义的英雄是德国建筑师路德维希·密斯·凡·德·罗(Ludwig Mies van der Rohe,1886–1969年)。 他被认为是极简主义的关键人物,并且是其清晰形式的现代建筑之父之一。 他的主要原则是将建筑结构减至最少,并使用大量开放空间。 他工作的基本原则是“少即是多”。

Barcelona Pavilion, Barcelona, Spain
Photo by Jean-Philippe Delberghe on Unsplash
Jean-Philippe Delberghe在Unsplash上拍摄的照片

Barcelona Pavilion, Barcelona, Spain. An incredible and timeless masterpiece of modern architecture from 1929. An inspiring building with extreme attention to detail and simplicity.

巴塞罗那馆,西班牙巴塞罗那。 这是1929年以来令人难以置信且永恒的现代建筑杰作。这栋令人振奋的建筑特别注重细节和简约。

From architecture to product design: Steve Jobs is often referred to as a design pioneer, yet he himself did not want to use the word design. His principles were also initially concerned with one thing: functionality.

从架构到产品设计:史蒂夫·乔布斯通常被称为设计先驱,但他本人并不想使用“设计”一词。 他的原则最初也与一件事有关:功能。

“Design is a really loaded word. I don’t know what it means. So we don’t talk a lot about design around here, we just talk about how things work. Most people think it’s about how they look, but it’s about how they work” — Steve Jobs

“设计是一个真正的词。 我不知道这是什么意思 因此,我们在这里没有太多关于设计的讨论,我们只是在谈论事物的工作方式。 大多数人认为这与他们的外表有关,但与工作方式有关” –史蒂夫·乔布斯(Steve Jobs)

Apple reduces its devices to the essentials. Obsolete buttons are not to be found here.
Photo by Brad Pouncey on Unsplash
图片由Brad Pouncey在Unsplash上拍摄

Example from product design: Apple reduces its devices to the essentials. Obsolete buttons are not to be found here.

产品设计示例:Apple将设备精简了。 在这里找不到过时的按钮。

A recommendation for web designers: Planning with Mies van der Rohe and Steve Jobs in mind

网页设计师的建议:考虑Mies van der Rohe和Steve Jobs的规划

One could say that the principle of user experience is based on Jobs’ principles. Applied to web design this means pushing the limits in trying to find the absolute minimum of the content we need in order to convey a clear and concise message. This means leaving out everything that could possibly distract from the actual message.

可以说用户体验的原则是基于乔布斯的原则的。 应用到网页设计中,这意味着在试图找到我们需要的绝对最小内容以传达清晰,简洁的信息时要加倍努力。 这意味着将可能干扰实际消息的所有内容都排除在外。

Minimalism in web design results from the subtle use of fine lines, geometric shapes and short, concise texts with well-selected typography. Hidden content, accessible by clicking on abstract symbols, as well as subtle nuances and barely noticeable graphics further strengthen the minimalist character.

网页设计中的极简风格源自对细线,几何形状和简短简洁的文本的精心使用,以及精心选择的字体。 隐藏的内容(可通过单击抽象符号访问)以及细微的细微差别和几乎看不到的图形进一步增强了极简风格。

简约网页设计的主要功能 (Key features of minimalist web design)

1.原则1:不要害怕空白! (负空格) (1. Principle #1 Do not fear empty space! (Negative space))

When everything inessential is stripped away, empty space is left around a graphic object. It is this very space that makes minimalist design what it is.

除去所有无关紧要的内容后,图形对象周围会留有空白空间。 正是这个空间使简约设计成为了现实。

When a website has an adequate amount of white space, you will get a calming, relaxing feeling. It brings peace to the room, in other words.

网站上留有足够的空白时,您会感到平静,放松。 换句话说,它为房间带来了宁静。

In minimalist design, the main purpose of the negative space is to draw the viewer’s attention to a specific point and guide him or her through the site. Some people consider the negative space just as important for the design as the content; the images, the graphic elements and the text. Nevertheless, this same freedom forces us as web designers to be more precise with the objects we choose.

在极简主义设计中,负面空间的主要目的是将观众的注意力吸引到特定点上,并引导他或她浏览网站。 有些人认为负面空间对于设计和内容同样重要。 图像,图形元素和文本。 然而,这种自由迫使我们作为网页设计师对所选择的对象更加精确。

Image for post
Photo by Pineapple Supply Co. on Unsplash
Pineapple Supply Co.在Unsplash上的照片

2.原则#2排版就像精美的艺术品 (2. Principle #2 Typography is like fine art)

Minimalism thrives on well-selected typography. Since text is one of the few elements used to dominate negative space, it becomes much more valuable as a graphic element. In minimalist web design, in general, less text should be used. In addition, it is more likely to work with few fonts but with different font styles.

极简主义在精心挑选的版式上蓬勃发展。 由于文本是用于控制负空间的少数元素之一,因此它作为图形元素变得更加有价值。 通常,在简约的Web设计中,应使用较少的文本。 另外,它更可能使用少量字体但使用不同的字体样式。

Typography is a separate area, which will be improved by a lot of experience. However, typography is indispensable for websites.

印刷术是一个单独的领域,它将通过大量的经验得到改进。 但是,排版对于网站来说是必不可少的。

“Typography is the craft of arranging type with the goal to make language visible. We arrange type multiple times throughout the day; whether we are writing essays, summarizing meeting minutes or creating slides for a presentation. Unfortunately, we usually end up thinking more about what we write than how we write it. And, most importantly, how others will read it.“ — Typogui.de

排版是一种旨在使语言可见的排版方法。 我们整天安排多次打字; 无论是写论文,总结会议记录还是为演示文稿创建幻灯片。 不幸的是,我们通常最终会思考的不是写方式,而是写的内容。 而且,最重要的是,其他人将如何阅读它。” — Typogui.de

The typeface Helvetica, the most used typeface of the 20th century, for example, is a relic from 1960, the beginning of minimalism.

Helvetica字体是20世纪最常用的字体,它是极简主义开始于1960年的遗物。

Image for post
HYDE)海德 )

3.原则3:明智地选择图像 (3. Principle #3 Choose images wisely)

To the inexperienced eye, a page can already be considered professional by selecting good images. However, images should be used rather sparsely for minimalist web design. If images are used, then each one should be carefully selected. As for the style of the images themselves, many believe that flat images or images without three-dimensional shading and lighting are a standard for minimalist design. This may be true but is not always the case.

对于没有经验的人来说,选择好的图像已经可以认为页面是专业的。 但是,对于极简的网页设计,应该很少使用图像。 如果使用图像,则应仔细选择每个图像。 至于图像本身的样式,许多人认为平面图像或没有三维阴影和照明的图像是简约设计的标准。 这可能是正确的,但并非总是如此。

4.原则4:正确选择颜色 (4. Principle #4 Choose colours correctly)

A common assumption is that minimalist design only works through black and white or in grayscale. But this is not the case. Although monochrome design is often used, this is not a requirement for minimalist design. Similarly, a page is not automatically minimalist just because the images appear in black and white. Traditionally, minimalist designs are based on a moderate colour spectrum, typically consisting of two or three colours. Another tactic is the use of monochrome shades of grey and another colour tone that is only used specifically for highlights and as a link or hint colour. This can also be a signalling colour.

一个普遍的假设是,极简设计仅适用于黑白或灰度。 但这种情况并非如此。 尽管经常使用单色设计,但这不是简约设计的要求。 同样,页面不会因为图像以黑白显示而自动达到最低要求。 传统上,简约设计是基于适度的色谱,通常由两种或三种颜色组成。 另一种策略是使用单色的灰色阴影和另一种色调,该色调仅用于突出显示并用作链接或提示色。 这也可以是信号色。

Another elegant solution is colour palettes in pastel shades. These have relatively high luminosity and low saturation.

另一个优雅的解决方案是柔和色调的调色板。 这些具有相对较高的发光度和较低的饱和度。

Web designers should define their colour palette at the beginning of the creative process and save it as a colour palette in the CMS software, such as WordPress. This way no deviations are risked and the entire website follows a uniform colour scheme.

Web设计人员应在创作过程开始时定义调色板,并将其另存为CMS软件(如WordPress)中的调色板。 这样就不会有偏差的风险,并且整个网站都遵循统一的配色方案。

5.原则#5通过结构保持一致性 (5. Principle #5 Consistency through Structure)

Minimalist websites are often highly artistic and generally, there are no boundaries to creativity. However, it is important to ensure that the website does not neglect its main task: information. The users should find their way around easily and follow a logical structure without concentrating too much. The user experience should not be hindered by the design. Maintaining a simple and very clear visual hierarchy is another essential feature of minimalist design. Here, both the high amount of negative space and the few elements within it can be an advantage. It has been proven that users navigate mainly in F-shape (from left to right, top to bottom), as demonstrated by the Nielsen Norman Group. This occurs even in mobile use, where users “scan” vertically even faster than in desktop view.

极简主义的网站通常具有很高的艺术性,一般来说,创造力是没有界限的。 但是,重要的是要确保网站不忽略其主要任务:信息。 用户应轻松找到自己的出路,并遵循逻辑结构,而不必太专心。 设计不应该妨碍用户体验。 保持简单和非常清晰的视觉层次是极简设计的另一个基本功能。 在这里,大量的负空间和其中的少量元素都是一个优势。 如尼尔森·诺曼集团(Nielsen Norman Group )所展示的,事实证明,用户主要以F形导航(从左到右,从上到下)。 甚至在移动使用中也会发生这种情况,在移动应用中,用户进行垂直“扫描”的速度甚至比在桌面视图中更快。

In general, many websites work with a grid for laying out the page design. This can also be deliberately broken or exceeded to create intentional asymmetry. A good introduction to the use of grids can be found on Material.io.

通常,许多网站都使用网格来布局页面设计。 这也可以故意破坏或超出以产生故意的不对称性。 在Material.io上可以找到关于网格使用的很好的介绍。

A grid can be used to structure a website
Photo by Pankaj Patel on Unsplash
Pankaj Patel在Unsplash上拍摄的照片

Minimalist design is surprisingly complex. But when used well, it provides the perfect combination of aesthetics, usability and site speed thanks to the sparse use of images. This leads to intuitive and unrestricted user experience.

极简主义的设计非常复杂。 但是,如果使用得当,由于图像的稀疏使用,它提供了美学,可用性和站点速度的完美结合。 这导致直观和不受限制的用户体验。

However, before starting the design phase, the following questions should be clarified: What is the aim of the planned website? Should it sell anything? If so, what? Should it inform? If so, what about? What kind of conversion should be achieved? Only once these insights have been found the creative process should begin, with constant reference to the findings.

但是,在开始设计阶段之前,应先阐明以下问题:计划网站的目标是什么? 它应该卖什么吗? 如果是这样,该怎么办? 它应该通知吗? 如果是这样,那又如何呢? 应该实现哪种转换? 一旦发现了这些见解,就应不断参考发现,开始创作过程。

Today’s web designers often have to be artists and designers, but at the same time, they have to become technology specialists. But we should always remember the principles of the design pioneers:

当今的网页设计师通常必须是艺术家和设计师,但与此同时,他们必须成为技术专家。 但是我们应该永远记住设计先驱的原则:

“Less is more” — Ludwig Mies van der Rohe (1947)

“少即是多” —路德维希·密斯·凡·德·罗(Ludwig Mies van der Rohe,1947年)

“Form follows function” — Louis H. Sullivan (1896)

“形式遵循功能”-路易斯·沙利文(Louis H. Sullivan)(1896)

In conclusion, minimalist design can be highly aesthetic; however, if the user experience fails, users will quickly exit the pretty page.

总之,极简设计可以具有很高的美感。 但是,如果用户体验失败,则用户将快速退出漂亮页面。

Needless to say, there are also voices against minimalism in web design and a group of “hamburger deniers”. More about the advantages and disadvantages of minimalism and the obstacles in web design in my next article.

不用说,在网页设计中还有反对简约主义的声音,还有一群“ 汉堡包丹尼尔 ”。 在我的下一篇文章中,将详细介绍极简主义的优缺点和Web设计中的障碍。

翻译自: https://uxdesign.cc/minimalist-web-design-5-principles-for-minimalism-in-web-design-4a7d4be5d93f

网页设计简约

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276105.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Expo 2010 Japan Pavilion

^_^转载于:https://www.cnblogs.com/mmmhhhlll/archive/2010/04/16/1713680.html

深度对比学习Vue和React两大框架

作为国内应用最广的两个框架,Vue 和 React 是前端必须掌握的内容,也是面试的重点。但大多数读者都只擅长其中一个框架,当面试涉及到另一个框架的内容时,就答不好了。比如虚拟dom,两个框架中都有应用,面试官…

java rwd_面向任务的设计-不仅限于Mobile First和RWD

java rwdWe already know that majority of solutions should start with a design for smartphones, we know that all websites should be responsive. Now, it’s time to think about holistic solutions with specific tasks adapted to all kind of devices.我们已经知道…

HOJ 1015 Nearly prime numbers

代码 //Nearly prime number is an integer positive number for which it is possible //to find such primes P1 and P2 that given number is equal to P1*P2.#include <stdio.h>#include <stdlib.h>#include <math.h>//decide n whither is a nearly pri…

「前端工程化」该怎么理解?

大家好&#xff0c;我是若川。今天分享一篇「前端工程化」的好文。非广告&#xff0c;请放心阅读。可点击下方卡片关注我&#xff0c;或者查看系列文章。今天发文比较晚&#xff0c;以往都是定时早上7:30发文&#xff0c;也不知道是不是有点早。一.什么是前端工程&#xff1f;一…

figma下载_Figma和ProtoPie中的原型制作,比较

figma下载第1部分 (Part 1) Prototyping has never had such a high profile with a whole host of tools that now give you varying ability to realize your designs beyond their static UI and into a working usable thing. It’s fair to say that prototyping within t…

「前端组件化」该怎么理解?

大家好&#xff0c;我是若川。今天分享一篇关于「前端组件化」的好文。欢迎点击下方卡片关注我。以下是正文~这里我们一起来学习前端组件化的知识&#xff0c;而组件化在前端架构里面是最重要的一个部分。讲到前端架构&#xff0c;其实前端架构中最热门的就有两个话题&#xff…

大屏设计的视觉统一_视觉设计中的统一

大屏设计的视觉统一视觉设计的统一性是什么&#xff1f; (What is unity in visual design?) The concept of unity in visual design means a group of elements working together to create a greater whole. It means, as the clich goes: A whole that is greater than th…

跟着官方文档能学懂React Hooks就怪了

大家好&#xff0c;我是若川。今天分享一篇关于「React Hooks」的好文。欢迎点击下方卡片关注我。以下是正文~回想下你入门Hooks的过程&#xff0c;是不是经历过&#xff1a;类比ClassComponent的生命周期&#xff0c;学习Hooks的执行时机慢慢熟练以后&#xff0c;发现Hooks的执…

origin图上显示数据标签_Origin(Pro):寒假都结束了,这个图还是不会画?【数据绘图】...

寒假前给大家分享了一个图&#xff0c;大家要的教程来了。【数据绘图】好图分享&#xff1a;寒假&#xff1f;不存在的&#xff01;​mp.weixin.qq.com绘图思路&#xff1a;左侧起止时间&#xff1a;散点图&#xff0c;交换XY坐标轴&#xff1b;中间的连线为Drop Lines&#xf…

可以激发设计灵感的音乐_建立灵感库以激发您的创造力

可以激发设计灵感的音乐I often find a lot of inspiration from work I see while scrolling social media. Saving art or images that inspire you allows you to build a library of resources to draw from whenever you’re working on a project.在滚动社交媒体时&#…

若川知乎问答:做前端感觉很吃力怎么办?

前些日&#xff0c;我发了一篇推文《做前端感到越来越吃力了&#xff01;怎么办&#xff1f;》&#xff0c;虽然是推广&#xff0c;但阅读量却很高&#xff0c;推广标题我们大概率不能改&#xff0c;感觉骗了大家&#xff0c;掉粉挺多人。写稿的人可能就是看到了知乎这个问答。…

d3 制作条形图_停止制作常见的坏条形图的5个简单技巧

d3 制作条形图Bar charts were probably the first type of chart you were ever introduced to in first grade. Their simplicity makes them a standard in visualizing data, but it is its accessibility that leads visualizers to often be careless with bar charts.乙…

SVN之使用原则

以下是我起草的部门SVN规范里原则的一部分。文件提交时要求必须提交注释&#xff0c;注明相关修改信息&#xff0c;例如bug号、任务描述等。具体内容可采用约定或者设置的形式。你所提交的改变将体现给其他开发者&#xff0c;要明白提交的后果&#xff0c;提交之前要慎重。代码…

图解 React-router 源码

大家好&#xff0c;我是若川。欢迎加我微信 ruochuan12今天分享一篇react-router源码文章&#xff0c;深入理解路由的本质。微信预计阅读只需8分钟。点击下方卡片关注我&#xff0c;或者查看源码系列文章。阅读源码小 tips&#xff1a;从整体到细节&#xff0c;刚开始不要太拘泥…

android 辅助功能_辅助功能简介

android 辅助功能Accessibility may be more than a moral imperative to ensure products are inclusive of more people who already experience barriers in daily life — it has a very practical outcome, benefiting everyone including the person with the disability…

推荐几个前端大佬,真的厉害!

新的一年&#xff0c;推荐几个还在坚持输出的高质量前端公众号&#xff0c;你想要的&#xff1a;React/Vue/Node/工程化/面试经验等&#xff0c; 这里都有。不多说&#xff0c;直接看介绍。???? 程序员成长指北考拉&#xff0c;一个有趣且乐于分享的妹子&#xff0c;专注 N…

RawCode-本身就是实验性的8位类型

What if a type is created solely from the bit-representation of characters?如果仅根据字符的位表示形式创建类型怎么办&#xff1f; This question was the basis of creating this experimental type. The type no longer uses familiar characters. ‘A’ looks like …

2d访问冲突_Light | 基于环形分隔微镜阵列的高速随机访问轴向聚焦系统

撰稿 | OSANJU 刘 扬01导读近日&#xff0c;来自美国加州大学伯克利分校的Rikky Muller教授团队&#xff0c;在国际顶尖学术期刊《Light: Science & Applications》发表了题为“A micromirror array with annular partitioning for high-speed random-access axial focus…

编译出现ARM与THUMB冲突

问题&#xff1a; fatal error LNK1112: module machine type THUMB conflicts with target machine type ARM 解决方法&#xff1a; 在project-setting-linker-command line下&#xff0c;添加/machine:THUMB&#xff0c;如下&#xff1a; 转载于:https://www.cnblogs.com/xfd…