本篇文章4247字，读完约11分钟
前言
首先，要明确的是，这篇文章不是针对每个人的，而是有一个特定的目标受众:
开发人员在开发产品时希望设计出漂亮的用户界面。
想要让他们的产品组合更加出色的用户体验设计师，或者想要让用户界面和用户体验更加漂亮的设计师。
如果你是一名艺术学生或用户界面设计师，你可能会觉得这篇文章很无聊，你的观点都是错误的。没关系。你的批评是正确的。关闭这个网站，忙于其他事情。
那么我们能从这篇文章中学到什么呢？我曾经是一个不理解用户界面的用户体验设计师。我非常喜欢用户体验设计，但后来我发现制作一个漂亮的界面是多么必要:
我以前收集的作品看起来很乱，说明我的作品和思考过程都很差。
我做用户体验咨询的客户更喜欢能展示作品的人，而不是只会画一堆方块和箭头的人。
我能为一些早期创业公司工作吗？让我们待在一边。
我当然有借口:
我没有艺术基础，我主修工程，所以我做丑陋的东西是可以理解的。
最后，我学会了应用程序设计，不断地分析案例，并且肆无忌惮地复制成功的作品。假设我在一个用户界面项目上花了10个小时，其中只有1个小时是有效的，其余的9个小时都在失败中不断学习，拼命寻找值得在谷歌、pinterest或运球上学习的东西。
以下“规则”都是我从失败中总结出来的。因此，我需要提醒新人，我现在很擅长ui，主要是因为我经常分析它，而不是突然意识到它，明白什么是美，什么是平衡。
这篇文章不讨论理论，只讨论应用。我不会谈论黄金分割和色彩理论，只是在实际站中总结的经验和教训。就像柔道起源于日本几个世纪以来的军事精神和哲学一样。在柔道课上，你不仅可以学习格斗，还可以学到很多关于能量、呼吸和和谐的知识。以色列的战斗(krav maga)完全不同。这种格斗技巧是犹太人在纳粹压迫下发明的。根本没有“艺术”。在以色列的战斗课上，你学到的是如何用笔或书攻击别人的眼睛。
这篇文章是以色列在产品设计领域的战斗技巧。
以下是我想谈的规则:
光来自天空空
黑白优先
添加空·怀特·空房间
学会用图片呈现课文(第二部分)
做好强调和淡化工作(下)
仅使用合适的字体(第2部分)
善于向优秀作品学习(下)
让我们一起来看看这些规则。
规则1:光来自天堂空
阴影可以告诉人脑我们在看什么样的用户界面元素。
这可能是学习用户界面设计时最容易被忽视但又极其重要的一点:光来自天空空.光总是来自天空空(上图)，下面的光看起来会很奇怪。
当光线从天空照射下来时，物体的上端会更亮，而下端会被遮挡。上半部分颜色较浅，而下半部分颜色较深。
从下面把一束光照在人们的脸上看起来很有穿透力吗？用户界面设计也是如此。我们的屏幕是平的，但是我们可以使用一些艺术技巧使它看起来像3d，并在每个元素下添加一些阴影。
以这个按钮为例。这是一个相对扁平的按钮，但仍然可以看到光线变化的一些细节:
没有按下的按钮底部边缘较暗，因为那里没有光线。
未按下的按钮上部比下部稍亮。这是对轻微弯曲表面的模仿(见侧视图)。
没有按下的按钮下面有一些细微的阴影，在放大图中可以看得更清楚。
按下的按钮整体较暗，但下部仍比顶部暗。这是因为按钮在屏幕的平面上，光线不容易到达。其他人说，实际上，按下的按钮更暗，因为手挡住了光线。
这样一个简单的按钮有四种不同的灯光变化。事实上，我们可以在任何地方应用这个原则。
Ios 6有点过时了，但它仍然是一个学习光的好例子。此图显示了ios 6中“请勿打扰模式”和“通知”的设置。看看有多少不同的光线变化。
控制面板的顶部边缘有一个小阴影。
“开放”滑动槽的上部也有阴影。
“打开”滑动槽的下部，反射一些光线。
按钮是突出的，并且它的上边缘是明亮的，因为它垂直于光源，它接收大量的光并且把它折射进你的眼睛。
由于光线的角度，分界线处出现了一个阴影。
通常嵌入的元素:
文本输入框
按钮被按下
滑槽
无线电盒(未选择)
复选框
通常是凸的元素
未按下的按钮
滑动按钮
下拉控件
卡片
选定的单选按钮
弹出消息
等等，现在不是平面设计吗？
Ios 7引发了科技界对“平面设计”的追求。也就是说，图标是平的，不再模仿真实的东西，而是凸的或凹的，只有线条的形状和单一的颜色。
我非常喜欢这种简洁明了的风格，但我认为这种趋势不会持续太久。通过细微的变化来模拟3d效果是非常自然的，不会被完全取代。
在不久的将来，我们可能会看到一个半平面的用户界面(这也是我推荐你使用的设计风格)。我称之为“扁平设计”，它仍然非常简洁，但是它也有一些阴影，有敲击、滑动和按压的暗示。
目前，谷歌还在各种产品上推广他们的材料设计，提供统一的视觉设计语言。材料设计的设计指南向我们展示了如何使用阴影来表现不同的层次。
这也是我同意的类型。用现实世界的元素传递信息的关键在于微妙。你不能说它没有模仿现实世界，但它绝对不是2006年的网页风格。它没有纹理，没有梯度，也没有光泽。
我认为“扁平”是未来的方向。压扁？它迟早会过时的。
规则2:黑白优先
在着色之前使用灰度模式设计可以简化很多工作，并使您更加关注空房间和元素布局。
用户体验设计者现在喜欢“移动优先”的概念，这意味着你应该首先考虑如何在手机上显示页面，然后考虑在超清晰视网膜屏幕上的显示效果。
这个限制很好，可以帮助你理清思路。首先，解决一些难题(显示在小屏幕上)。然后解决简单的问题(大屏幕上的可用性)。
我希望你能先用黑白设计，先解决复杂的问题。不借助颜色，让应用程序美观易用。最后，目的地是彩色的。
这种方法可以保持应用程序“干净”和“简洁”。添加过多的颜色很容易破坏简单性。“黑白优先”会促使你关注更重要的问题，比如空的房间、大小和布局。让我们先来看看一些以灰度模式设计的经典页面。
“黑白优先”的原则并不适用于所有情况，例如，体育、卡通和其他独特的设计需要很好地利用各种颜色。然而，只要保持干净整洁，大多数应用程序都没有这些独特的功能。华丽的颜色被认为很难设计，所以应该首先使用黑色和白色。
第二步:如何上色
最简单的上色方法是只添加一种颜色。
在灰色中加入一种颜色可以简单快速地吸引眼球和注意力。
你也可以更进一步，在灰色中添加两种颜色，或者添加多种色调一致的颜色。
色彩法则在实践中-什么是色调？
网页主要使用十六进制rgb表格。然而，rgb不是一个好的颜色设计框架，hsb模式将被更好地使用，其中h(色调)代表色调，s(饱和度)代表饱和度，b(亮度)代表亮度。
Hsb模式比rgb模式更适合我们观察颜色。如果你对此知之甚少，这里有一些关于hsb模式的简单介绍。
通过调整单一色调的饱和度和亮度，您可以生成各种颜色——深色、浅色、背景色、强调色、醒目色等。，但他们不会脱颖而出。
使用一种或两种基本色调的多种颜色是最可靠的方式来强调和淡化某些元素，而不会把设计搞得一团糟。
关于颜色的其他建议
色彩是视觉设计中最复杂的。我从复杂的理论和长期的实践中为你挑选了一些好的建议:
工具箱:
不要使用纯黑色:在现实世界中你很难看到绝对的黑色。调整不同的饱和度可以增加设计的丰富性，更贴近现实世界。
Adobe color cc:查找、调整和创建颜色组合的优秀工具。
运球中的颜色搜索:找到匹配特定颜色的好方法非常实用。如果您已经决定使用哪种颜色，您可以使用颜色搜索来查看世界顶级设计师如何搭配颜色。
规则3:增加空·怀特·空的房间
为了让用户界面看起来更面向设计，请留下一些空·怀特·空的房间。
在第二条规则中，我谈到了黑白优先的原则，并要求设计师在考虑色彩之前先考虑空的房间和布局，所以现在我们将讨论如何安排空的房间和布局。
html的默认布局如下:
所有的东西都堆在屏幕上，字体大小和行距都很小，片段之间也有一些间隔，但不是很大。这个布局真的很难看。如果你想设计一个漂亮的用户界面，你需要留出更多的空白色空客房。
空白空室，html和css
如果你习惯于像我以前一样使用css来调整布局，你最好改掉这个坏习惯，因为默认情况下css不会把空放在一边。尝试将空白色作为默认状态，并在空白色页面上添加各种元素。从未经修饰的html开始，先做内容，然后排版。
下图显示了piotr kwiatkowski设计的音乐播放器。
请注意左边的菜单栏。字体大小为12px，行距是文本的两倍。看列表的名字，在“播放列表”和下划线之间有一个15px的空白线，在播放列表的名字之间有一个25px的空白。
顶部导航栏中还有一个大空，搜索图标和“搜索所有音乐”占据了导航栏高度的20%。
空白的空收到了很好的效果，不同的元素有机地结合在一起，使得这个页面成为音乐播放器最好的用户界面之一。
很多空白色可以使混乱的界面简单而美观，比如这个论坛:
或者维基百科:
很多人认为在这个新的维基百科页面上找不到很多功能，但是你不能否认这是学习页面设计的一个很好的例子。
离开空。
在每个元素之间留下空。
在每组元素之间留下空。
分析什么是可行的。
好了，这是第一部分。感谢阅读！
在第2部分，我将讨论剩下的四条规则:
4.学会在图片上呈现单词
5.强调和淡化它
6.仅使用合适的字体
7.善于向优秀作品学习
三链:吃昆虫、吃厕所和油炸？？3.模纸锻造，模具模具模具模具模具模具模具模具模具模具模具？？. 95镣铐和镣铐？？0.07%锝58.....
当前流行度:0
[娇娇]http://itougu.jrj/view/189514.j.....
当前流行度:0
1.1 .涓涓细流？？邦邦、邦邦、邦邦、交邦和廖廖？？要坚强，要坚强。.....
当前流行度:0
你知道，你知道，你知道，你知道，你知道，你知道，你知道，你知道，你知道，你知道，你知道，你知道，你知道，你知道........
当前流行度:0
缇落入三条锁链？？3镝？？6铥？？0(乌桕脂含有3条链吗？？4镝？？4铥？？0)死，死，死，死又死，4.72？？......
当前流行度:0
那墙，墙，墙和墙呢？？钳子里有丰富的镰刀、叉子、叉子、nan和链条，这些都是銮棒的来源.....
当前流行度:1
你想挑起镝，破坏哮喘吗？？缇，汤，汤，3汤和柊镶嵌？？链条？？4."敌鲁，缇，汤，汤，汤."？？.....
当前流行度:0
咸丰、大树、细垴、十二寸、相互涓涓？？环秀细链，涓涓细流，砸铙钹，甩铙钹，砸铙钹，砸铙钹，砸响，砸得咝咝作响？？葛格·岳格·柊.....
当前流行度:0
