外的很多网站都非常简约大气，原来他们是遵循了这样的设计原则啊。这样的原则，不仅仅适用于web设计，也同样适用于App设计。

介绍：

“Less is more”-无论在时尚，室内设计还是网页设计领域，这句话都统治着设计界。这句话反映了古老的极简主义理论，也渐渐成为了简单，优雅的功能性营销设计的最新工具。

可以说，极简主义正在盛行。

极简主义的应用可以有两种不同的方式。一个是美学，一个是功能。在这里，我将讨论功能性极简主义在Web设计中的应用，在此之前，我们看一下它的基本概念和历史。

极简主义：基本概念

极简主义的关键原则是让用户看到必要的功能。这样，用户的注意力不仅集中在艺术的重要部分上，而且还提高了作品的优雅度。

传奇极简主义画家唐纳德·贾德（Donald Judd）说：“形状、体积、颜色、表面就是物品本身。它不应该被隐藏成为完全不同的整体的一部分，形状和材料不应因环境而改变。”

涉及到极简设计时，它可以采用两种方式：设计师可以出于美学或功能的考虑创造简约设计。

以图1中的这种设计为例：

图1：缺乏功能的美学极简主义示例

以上设计来自眼镜设计师Alfred Sung。尽管该设计很极致，看上去很美，但是除非用户浏览菜单栏，否则该设计不会告知用户网站的目的。这种简约的网页设计仅是为了美观，而不是功能。

但是，如果我们看下面的图2，我们将看到功能性极简主义在Web设计中的完美应用，用令人愉悦的视觉呈现重要信息。

图2：功能极简主义的示例，既美观又实用

这是Libraton的网页设计。干净流畅的用户界面，易于导航。这是网站设计中的功能性极简主义的主要示例。设计中没有多余的文字，不必要的动画和额外的效果。借助适当的图像和内容，让用户知道该网站的内容。

所谓的网页设计的功能性极简主义，即令人愉悦的视觉向用户呈现必要的内容。在简约的设计中，没有多余的文字，不必要的动画和额外的效果。内容和设计按原样显示，没有任何额外的装饰，以使用户轻松找到他们想要的内容。

极简主义的历史与演变

极简主义意味着高效的生活，这意味着您可以将更多精力放在核心目的上，这意味着摆脱生活中所有多余的功能，装饰品和其他任何装饰。日本文化将生活中的简约与平衡和谐放在首位，您可以在他们的艺术和建筑中看到这一点。

在谈论极简主义的历史时，您需要对日本文化作简要了解。日本文化最好的反映了极简主义的概念。极简主义的概念在整个历史中都存在过，但是在二战之后，它通过艺术家Frank Stella和Robert Rayman的作品而得到了广泛传播。由于该概念的普及，极简主义也逐渐渗透到其他领域，例如建筑。

很快，极简主义也进入了网页设计领域。在互联网的起源上，存在另一种风格的网页设计风格，我们称之为野蛮风格。布局杂乱，几何图案笨拙且重复，字体也多种样式。总而言之，野蛮派网页设计对掩盖丑陋设计毫无欲望。

但是随着设计的开始改进，极简主义走在了最前列，网站开始变得更加美观。不过，野兽派的设计也再次卷土重来，声称反对同质化的网页设计风格。

极简网页设计及其必要功能

网页设计中的极简主义是设计师最流行的实践。随着极简网页设计变得流行，当设计功能性网站时，极简主义已成为第一法则。这是为什么了解极简主义网页设计的最佳方法，是了解其主要功能。

1. 重点：突出内容

简约的Web设计中，内容是重点，通过删除多余的元素（所谓的多余是指不影响用户进行操作的部分）简化界面。这种方法，内容的优化是最重要的过程。

资料来源：https ://newday.agency/

通过确定内容的优先级，设计人员删除网页上可能让用户分散注意力的所有元素。最后，每个元素都将具有一定的功能。剥离多余的内容时可能会遇到一个问题，那就是会删除重要的内容。因此，请确保您没有从页面中删除重要内容。

（1）负空间的广泛使用

基于日本的ma原理，负空间或留白在简约设计中起着重要作用。负空间或留白是极简网页设计的一个非常普遍的功能，内容（图像或文本）之间的空白更加强调页面的内容。

资料来源：https ://perficientdigitallabs.com/

虽然负空间也称为空白，它并不一定总是白色。作为设计师，您还可以使用空的全色背景在设计中引入负空间。

（2）视觉特征

极简网页设计具有很多独特的视觉特征。这些特征在网站的整体外观中起着重要作用。

（3）平面设计和纹理

极简设计省去过度使用的3D效果，阴影和渐变，而广泛使用平面纹理。去除网站显得浮华的设计元素。在平面设计中，从字体到图标，所有内容都保持在最低限度，这不仅美观而且功能强大。QAccounting是很好的示例。

资料来源：https ://qaccounting.beta.herdl.com/

（4）照片和插图

一张图片相当于一千文字，图像和插图是极简网站的最重要设计元素。通过图片您可以传达更多的情感和思想。不过图片也要遵守极简主义原则。如果它是一个复杂的图像/插图，包含太多的细节，那么它将抵消设计的整个效果。例如：Manho的设计。

资料来源：https ://mahno.com.ua/en

（5）有限的配色

颜色可以使视觉集中在内容上，但是它也可以分散用户的注意力。因此，以简约设计为目标的设计师通常选择有限的配色方案。无论单色方案，还是仅两种颜色的方案，这种有限配色方案是简约设计的关键视觉特征之一。

来源：https：//showcase.withgoogle.com/experiment/pizza-authenticator/

2. 独特的版式

在极简主义的背景下，大胆的排版必定能呈现最好的内容，设计师使用此功能来强调其内容。

资料来源：https ://culture.basicagency.com/

3. 设计对比

高对比度元素是极简设计的不错选择。作为一名设计师，您无需付出太多努力，即可充分利用简单的设计元素，这也是将用户聚焦到页面主要元素的最有效方法。在最近网站大修中，Unified Infotech修改了色彩和对比度方案，使其更具吸引力。

资料来源：https ://www.unifiedinfotech.net/

网页设计极简主义的最佳实践

有时实践“less is more ”的理念可能会具有挑战性。如果您正在努力为网站创建简约设计，不必担心。下面，我将列出一些最佳实践，通过遵循极简主义的最佳实践，您将可以轻松创建极简的网站设计。

1. 单一焦点

简约设计的概念是使用户专注于网页的主要元素，简约是关键。因此，只有一个焦点是极简主义的最佳实践。

资料来源：https ://www.portofmokha.com/

2. 内容层次

我已经讨论过内容进行排序，并确定需要什么和不需要什么，现在是时候确定什么先行，什么后行了。

资料来源：https ://www.gsmlondon.ac.uk/global-oil-map/

内容的层次结构意味着内容的放置。页面顶部的内容最重要，而页面底部的内容最不重要。用户的眼睛总是盯着页面的顶部，所以将页面的主要内容放在顶部附近很重要。

3. 精确且清晰的内容

我将再次讨论页面的内容，在为极简网站编写内容时，您需要去除多余的单词。

资料来源：https ://hopdeco.ca/en

页面的文本内容必须是用最少单词传达所有的信息。

4. 简化导航

简约设计的重要目标之一是帮助用户尽可能简单高效地完成任务。为此，您需要集成一个简单便捷的导航系统，在极简的界面中可能会比较棘手。

资料来源：https ://ark-shelter.com/

您可能会觉得需要隐藏导航以创建简约界面。但是，这可能降低用户对网站的满意度。因此，在简化设计的同时需要保证必要的功能。

5. 功能性动画

尽管动画被视为设计界的一种装饰，有时候也必不可少。在简约界面中加入有针对性的动画，不仅会使网站看起来更漂亮，也会使界面更高效。必要请看下，可以使用动画节省屏幕空间，同时使网站浏览更有趣。

通过GIPHY

6. 极简的登陆页面和组合

但是，如果您的网站是内容丰富的网站（例如新闻网站或博客网站）怎么办？

在那种情况下，完全的简约设计可能会有些困难，使用简约的界面将使用户操作更多，这对于高效的网站可能并不理想。

那么解决方案是什么？

资料来源：https ://mywony.com/?ref=lapaninja

网站Mywony，婚纱设计，在线购物网站，采用使用简约的布局作为着陆页。一个电子商务网站，无论是亚马逊还是其他独家网站，都倾向于展示他们销售的所有产品。但是Mywony采取了极简主义的方式，为游客提供了功能完善的设计，看上去也很讨人喜欢。

你要做什么？那结论是什么？

许多人仍然认为极简主义只是设计的视觉方面。虽然这部分是正确的，但极简主义也必须有其自身的功能。解锁功能性极简主义的所有秘密之后，您可以将其应用到网站设计中，这类型的网站不仅是您和用户之间的交流工具，也是用户希望访问的美观的网站。

原文网址：https://medium.com/usabilitygeek/is-less-really-more-the-truth-of-functional-minimalism-in-web-design-ff35256bda5f

作者：Jessica Bennett

编译作者：熊不知；公众号：产品经理熊不知（ID：xiongbuzhia），人人都是产品经理专栏作家。5年产品经理经验，专注海外社交APP和编辑工具类APP的产品设计。

本文由@熊不知 翻译发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议

大天朝的文化博大精深，

文字在世界上也是独树一帜，

要想把汉字的效果发挥到极致，

还是得往这看！

直接来点实在的。

▼

一、字体意象的选择

诚然，用户在阅读的过程中，思维主要专注于文字内容上。但毫无疑问的，除去内容，载体文字的形、色、间距、强弱，甚至文字周边的图片插画等，纯视觉上的元素，也会以意象的方式存入用户脑海，形成一定程度的“潜意识”。

1、选用哪种字体：

在确定字体的选用前，先得明确其主题。或者说，要理解画面上的文字，想传达怎样的观感、情绪等。举例说明：

• 手写体：

手写体更能体现“人文”、“自然”的主题，往往能给人以亲笔写下的诚意与温度。商用广告里面，像是：家庭题材、手工制作产品、随笔书籍、部分服务业都适合使用手写体。就像这样▼

• 毛笔字体：

“楷书”、“隶书”、“篆书”、“行书”、“草书”等偏向于古朴，有沉淀感的字体适用于偏传统风、民俗题材、历史题材、文化古迹等文字内容。如▼图。

不过这类字，单看装饰性也很强。如▼

• 标准字体：

标准字体如果加以适当宽松的间距，极简化的干净背景，便能极大地提升画面的严谨精致与设计感。如：

苹果官网

性冷淡官网

2、选择合适的颜色/明度/色相/饱和度：

暖色：这类颜色偏于热情，有一种excited的感觉。

红/橘/黄

冷色：偏于安静、冷静、沉稳，所以商务题材非常爱用。

蓝色系列

改变颜色的明度/饱和度，可以更加贴近所述氛围。如：

春天题材：粉绿/粉蓝/粉红

夏天题材：纯白/天蓝/鲜橙

总结起来，在选择上，要多代入场景、氛围来思考，确定主题。成果展现的意象，也千万要切题。

二、视觉导向的斟酌

大家如果看日漫，一定有这样的经历：第一次看日本漫画时，频频蒙逼…

与中文由左至右的阅读习惯不同，日式排版让人超不习惯。这算是文化差异带来的不易阅读的例子。归纳来说：

1、内容和字体的关系

Ⅰ.字号

这里主要讲偏书籍、杂志、手册类的排版规则。

• 标题：大标题>小标题>副标题>引言>正文

• 正文：一般至少为9pt，如果面向的是儿童、老人这类人群，则需酌情放大字体

• 补充说明：如批注，图片说明、原作者等，一般在6.5pt左右。

Ⅱ.边界＆对比

边界即画面上下左右的边距留白，这里用HTML排版里，比较典型的盒子模型为例：

边界的比例，尤其是在书籍印刷上，给人心理的愉悦度影响程度很大。比如窄边距，往往有一种压迫感，两眼一黑。对比分几种：

• 字号大小对比

• 重量粗细对比

• 字体形状对比

• 文字色彩对比

对比主要是将文字动静分化开，比较有主次、冲击力。

2、易于阅读的排版

Ⅰ.行长/行距/分栏

当文章较长时，行长、行距、分栏的设定往往会决定读者的阅读节奏。如果阅读节奏和主题内容较为吻合，往往能得到较好的阅读体验，甚至能增强代入感。

• 行长：即每行长度，太长会给人疲累感，太短会给人频繁换行的阅读上的不快。

• 行距：每行间的留白，通常8pt的正文字号，适合行距在1.3mm~2.72mm之间。

• 分栏：栏数越多往往意味着行长缩减，故应结合行长调整

Ⅱ.文字间距

文字间距是个神奇的东西，往往它决定着文字在阅读时的“韵律感”。西方字体，如W和I，其字体宽度本来就不同。但是东方字体,，每个字占据空间相同，几乎都是一个个正方形方块。

• 字距狭窄：突出密度感、紧凑感。

• 字句宽松：给人舒适怡然感、结合细体文字往往有一种设计感。

关于视觉的引导性。举几个极端的例子大家就懂了，比如：

或者：

三、排版上的美观

1、节奏＆方向性

举个例子：

有没有觉得上图②号火柴人的跑动方向“奔跑”二字的阅读方向不同，导致画面节奏略显奇怪。

2、文字重点＆对比

这个在上面提到过了，需要注意的是：要先思考突出内容，再考虑整体美观性。

3、阴影＆线框

如果你想用的纯色字体和背景色太过相似，背景色很有可能会“糊掉”你的文字。从远处看背景与文字根本分不清主次。这个时候可以用线框或是阴影来强调文字，使之在视觉上与背景分开。如下图的destino。

4、材质

这点和英文字体一样，使用符合主题的字体材质，往往能增强标题的戏剧化效果，增强文字的密度与重量感。

文字作为抽象产物，材质化也能使之减轻其“抽象感”。

5、文字拟态

这个和材质化很像，也是增强文字张力的手法之一。也能使之更好地与画面上其他视觉元素进行互动。

四、基于印刷品材质/比例/尺寸的不同，做出相应调整

1、.书籍/杂志/手册

这类页数较多、文字图片内容明确且丰富的出版物，一般会有雏形板式。包括：

• 版面大小
  

• 版心
  

• 段落
  

• 正文
  

• 标题样式等

如果是书籍装帧的排版，还涉及到：

• 书眉
  

• 订口
  

• 切口
  

• 天头
  

• 地脚
  

• 页码
  

• 正文等

原则上至少要做到内容易读，排版结合读者阅读习惯，具有引导性，突出重点。另外，纸质也是重要的参考因素。

2、海报

海报是个很看重“第一眼印象”的东西。一般来说用户观看海报的时间平均可能只有1.5秒的时间，接收到的几乎是瞬时信息。所以标题一定要最显眼，其次主题、内容、时间等按照视觉逻辑依次按重点优先级排列。

标题文案最好不带解说色彩，与背景图片互相呼应互补才是最好的。不过相比文字，大部分情况下海报最重要的元素是图片，能用图片叙述的内容，就最好不用文字。

当然，如果海报本身的设计足够有冲击力或是吸引力，往往能达到让用户停留更长的时间观看，达到+1s的目的。

3、文字Logo

这个是相当多设计师的槽点之一啊啊！！你们甲方看起来很简单是吧！！简单提几点：

Ⅰ.文字局部拟物：

Ⅱ .局部色彩强化：

最后：

• 高格调好看，但一定一定切合主题 。

• 文字和图片同样重要，请将文字当作图片来处理。

文章来源｜知乎

文章作者｜栾时予

旁友们，看了这么多，

是不是手很痒？

实践出真知，

快去试试吧。

I设计是有做得好的规则存在的，即便你是“半路出家”做UI，也可以从这些前人总结的规则中，做好UI设计。

前言

今天这篇文章是来自西雅图的独立UI/UX设计师Erik D. Kennedy，他在用户体验和视觉设计方面有很丰富的经验。

同时他还运营了一个设计网站，Learn UI Design，他会在上面分享自己学习的心得，也会发布一些视频教程。有兴趣的朋友可以关注一波。

因为是英文佳作，小编能力有限，所以找了英语专业的小伙伴来帮忙，如果有发现什么纰漏，emmm，我们改……

在阅读文章前，你必须要知道，这份设计指南并非适合所有的人。

那谁需要看我们这些设计指南呢？

• 初学设计的入门学生。
• 希望直接可以设计美观页面的开发人员。
• 希望有更好用户体验的用户体验设计师。

那在这份指南中你将会获得什么呢？

首先，我是一名没有UI视觉技能的用户体验设计师。我喜欢设计用户体验，但是在我意识到需要去学习“如何让界面看起来更好”之前，我花费一个项目周期90%的时间去疯狂的学习，拼命搜索谷歌，浏览Pinterest和Dribbble，以便从中复制。

而以下这些规则都是那段时间我所学到的经验：

1. 光来自天空
2. 黑与白第一
3. 加倍你的留白
4. 了解在图像上叠加文本的方法
5. 使文本弹出和不弹出
6. 只使用好的字体
7. 像艺术家一样窃取

那接下来就让我们一一展开来讨论吧。

一、规则1：光来自天空

人类大脑通过阴影解析到我们正在看什么用户界面元素。

这可能是我们理解UI设计最重要但经常被忽略的规则。

我们都知道光来自天空，已经习惯了光的照射方式，以至于从下面来的光会看起来更加怪异。

WoooOOOooo（国外设计师也爱恐怖片啊）

当光线来自天空时，它照亮了物体的顶部并在它们下面投下阴影。物体的顶部较亮，底部较暗。

UI也是如此；就像面部特征中，所有底面上都有小阴影一样，在您可以找到的几乎每个UI元素的下侧都有阴影。

我们的屏幕是平的，但是我们在设计过程中尽量让元素看起来更立体。即使在现在扁平化当道的潮流下，我们也能在很多优秀作品的细节中，看到这条规则存在的意义。

就拿按钮来说，即使使用这个相对“扁平”的按钮，仍然有一些与光有关的细节：

• 未按下的按钮具有深色边框；
• 未按下的按钮顶部比底部略亮；
• 未按下的按钮投射出一个微妙的阴影；
• 按下的按钮底部比顶部更暗，整体也呈现暗色调，因为我们的手遮挡略光线。

iOS 6有点过时了，但它在轻松行为方面做了很好的案例研究

这是iOS系统设置模块的——“请勿打扰”和“通知”。 细节处的光效非常丰富。

• 插入控制面板的上唇投下一个小阴影；
• “ON”滑块轨道是凹形的，底部反射更多光线；
• 滑动滑块，看到它们顶部周围的明亮边框？这代表它是垂直于光源的表面，因此接收大量光线，从而将大量光线反射到您的眼睛中；
• 分隔器凹口被遮挡在远离太阳的角度，反之亦然。

分割线缺口处的特写镜头

在上面提到了“扁平化设计”，那具体如何解释扁平和光效的关系呢？

在ios7开始的设计潮流中，“扁平化设计”在科技界引起轰动。

的确，它确实是平的，没有模拟的凸起或者凹痕，只有纯色的线条和形状。

可是在不久之后，“半扁平化设计”的概念就兴起，它仍然很干净、很简单，但是你会发现，在一些设计元素的细节上，都有阴影的体现。

OS X Yosemite— 带有光影细节的扁平化设计

同时，谷歌推出的“Material Design”设计语言，这种统一的视觉语言，其核心就是寻求模拟物理世界的物品，在它的设计规范中也提到了如何使用不用的阴影来传达不同的深度。

这就是我所看到的和我所理解的，对用户最为友好对一种表现方式。它使用现实世界的微妙细节表现来传达信息。

我想，“Flatty”就是以后UI设计的发展方向，纯扁平化和拟物都已经是过去的事情了。

二、规则2：黑与白第一

1. 在为设计做配色之前，先把画面进行灰度设计

简化了视觉设计中最为复杂的元素，迫使设计师专注于元素间距和页面布局。

就像现在的交互设计都是“移动优先”，这就意味着，先从更难的问题开始解决（小小移动设备屏幕上的交互），然后采用类似解决方案来解决更容易的问题（大屏幕上pc设备的交互）。

类似在视觉设计中的规则：首先设计黑色和白色。也就是我们在没有颜色的帮助下，去使用各种方式来达到产品的美观性和易用性，最后在添加颜色。

Haraldur Thorleifsson的灰度线框看起来和完成的网站一样好

这也是让产品看起来“干净”和“简单”的可靠办法。过多的颜色往往很容易搞砸设计。而“黑与白第一”迫使你首先关注间距、尺寸和布局等内容，这些才是简约设计的主要关注点。

优雅的灰度

而在某些情况下，“黑与白第一”看起来并不有用。我们在设计具有强烈特定态度的作品的时候，如“运动型”、“华丽画面”、“卡通设计”等，这些都是需要非常好的去使用颜色来表达产品。

Julien Renvoye（上）和Cosmin Capitanu（下）的华丽和充满活力的设计

2. 接下来，就是如何去添加颜色

最简单的方案就是只使用一种颜色。

在灰度的页面上只添加一种颜色可简单有效的吸引眼球。

你也可以迈出一步，使用灰度+两种颜色，或灰度+单色调的多种颜色来传达设计思想。

如何过你还不清楚什么是色调？

来自Smashing Magazine的单色金色主题

来自Smashing Magazine的单色蓝色主题

通过修改单个色调的饱和度和亮度，可以生成多种颜色，但它并不会让人眼前一亮。

而使用来自一个或两个基色调的多种颜色，是在保证设计不混乱的情况去，去强调和中和元素最可靠的方法。

Kerem Suer的倒数计时器

三、规则3：加倍你的留白

如果想让你的页面看起来是被设计过的，那就通过大量的页面留白来增加元素之间的喘息空间。

在“规则2-黑与白第一”中，设计师在设计颜色之前就考虑间距和布局，这是一件好事。那么，现在就开始讨论间距和布局吧。

如果你有编写HTML的经验，在熟悉的HTML默认布局的页面上，一切都被堆砌到屏幕的顶部。字体很小，线条之间没有空间，段落之间的空间也不够。

这些从审美的角度来说，实在太糟糕了。

还是那句话，如果想要让页面看起来具有设计感，那就加大页面的喘息空间，哪怕是过大的留白也比毫无留白来的好。

如果你和我之前一样，习惯于使用默认的格式去编辑页面，现在就应该认识到哪些坏习惯了。

我们把留白作为页面的设计元素，所有的内容都以空格开头，知道有其它的元素替换它。

节奏感是设计页面的一个重要原因。

从一个空白页面也就开始意味着从留白开始。从一开始就想到的边距和间距，用你所添加的元素有意识的去一个一个替换空白。

这是Piotr Kwiatkowski的音乐播放器概念

请特别主意左边的菜单

菜单项之间的垂直空间是文本高度的两倍，文本为12px字体，其字高和上下间距相同。

再看看列表标题：

标题“PLAYLISTS”和它下面的下划线之间有15px的空白，这不仅仅是字体本身的字高，也就是说清单之间的留白达到了25px。

顶部导航栏中有更多空间。

“搜索所有音乐”文本是条形高度的20％；图标的比例相似。

右侧边栏显示文本行之间的宽松间距，都是设计师有意识的去做的，并且展现出了很好的效果。就美学而言，这些都足以和最好的音乐UI竞争。

慷慨的留白可以使一些最混乱的界面看起来更简洁。

Forum design concept by Matt Sisto

Wikipedia design concept by Aurélien Salomon

最后重要的事情重复一遍：

• 在你的线之间放置空白；
• 在元素之间放置空白；
• 在元素组之间放置空白；
• 整体分析什么才是最重要的。

小结

好了，以上就是第 1 部分，感谢你们看到了这里。

接下来在第二部分中，我们会讨论最后的 4 条规则：

1. 了解在图像上叠加文本的方法
2. 使文本弹出和不弹出
3. 只使用好的字体
4. 像艺术家一样窃取

如果你觉得这些对你有帮助，可以关注下我们第2部分的分享。

原文作者：Erik D. Kennedy

原文链接：https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

本文由 @设计师日记 翻译发布于人人都是产品经理 ，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议。