常用的ui设计原则(ui设计方法)

本文主要介绍通用ui设计原则(ui设计)，下面跟着东辰网详细了解一下吧。

本文由Medium编译，作者是UX(用户体)设计师。他通过自己对UI设计的学习过程，总结出七条实用法则，为UI设计新人提供了宝贵的经验。文章分为两部分。前几天分享了开始部分。今天是最终版本。快来学习吧！

开始部分:

实用的UI设计规则::

光从天而降(开始部)先黑后白(开始部)增加留白(开始部)学会把文字呈现在画面上，强调和弱化，像只有合适字体的艺术家一样偷走老师。规则四:学会优雅地呈现图片上的文字并不容易。以下是六种方法。

如果你想成为一名优秀的UI设计师，你必须学会在图片中漂亮地呈现文字。优秀的设计师在这方面做得很好，而水平较低的设计师在这方面往往很差，甚至根本没有。学完这部分，相信你会有很大的提升。

方法0:直接在图片上放文字。

我不愿谈论这种方法，因为它很难应用。但是，直接在图片上放文字，技术上是可行的。这个网站的主页很好，所以它不谈论这件事没有坏处。

将文字直接放在图片上有几点需要注意:

画面要暗，颜色不要有太大的反差。文字必须是白色的，我知道你也可以找到使用其他颜色的例子。但是我认为你最好用白色。在不同的屏幕和不同大小的窗口中调试页面，以确保文本在任何情况下都清晰易辨。

It以上三个方面调整一下就可以了，不要不做任何其他处理。

我自己从来没有在任何专业项目中直接把文字放在图片上。这种方法是可行的，可以做出很酷的效果，但是要小心。

方法一:将整个画面变暗

也许在图片上放置文字最简单的方法就是将整个图片变暗。如果原图不够暗，可以用半透明的黑色覆盖。例如，下面的案例添加了一个不透明度为35%的黑层。

如果直接放原图，背景颜色太亮，和文字对比不够明显，看不清文字。

类似的方法也适用于小图片。

加一层黑是最简单最通用的。当然，你也可以使用其他合适的颜色，比如这个:

方法2:在文本中添加一个框。

这是一种简单有效的方法。在白字下方加一个略透明的黑色方块就可以放到各种图片上了。，而且显示效果非常清晰。

当然也可以放其他颜色，小心就好。

方法三:模糊图片

模糊图片是增加文字可读性的好方法。模糊文字下面的图片，降低模糊部分的亮度。

IOS7用毛玻璃的效果模糊背景，WindowsVista也使用了这种模糊效果。

模糊图片的方法也有局限性。您需要确保在不同屏幕上调整图片的大小后，文本仍在模糊区域。

看下面这个例子。字幕能看清楚吗？我真的不知道。;不知道这个设计是怎么通过审查上线的。

方法4:在底部褪色

所谓底部淡化，就是把图片的下边缘变暗，然后在上面放上白色文字。这是一个非常新颖的方法。我不我不知道是否有人在Medium之前使用过它，但我开始次在Medium上看到它。

乍一看，你可能会认为这是把文字放在图片上。事实上，画面中有一些非常微妙的变化。中间没有黑色覆盖，底部覆盖黑色，不透明度20%左右。

这种变化很难看到，但确实存在，确实提高了文字的易读性。

此外，Medium还为文集图片上的文字添加了一点阴影，进一步提高了文字的可读性。最终的结果是Medium可以在任何图片上放任何文字，阅读体验非常好。

可能有人会问，为什么要把画面底部变暗？为什么可以难道不是画面的其他区域吗？要回答这个问题，请看规则1:光来自天空。当光线从上方照射时，画面顶部较亮，底部较暗，看起来更自然。

此外，还可以结合虚化和底纹淡化，做出底纹虚化的效果，比如下图的效果:

方法五:柔化画面某些区域的光线。

橡皮筋的照片的博客都不太暗，对比强烈。为什么单词的识别度还是那么高，如下两张图所示:

在这里，图片局部区域的光线实际上被柔化了，文字被突出显示。如果我们在浏览器上缩小橡皮筋的博客，我们会看到发生了什么。

这可能是将文字优雅地呈现在画面中最微妙的。我还没有Idon’我在别的地方没见过。我我会保存它。也许我将来的某个时候我会用到它。

规则五:强调和弱化。把文字设计得漂亮得体，通常是把文字放大或缩小，以产生对比效果。

在我看来，UI设计最难的地方在于对文字的修饰，因为设计文字时要考虑的因素太多了:

还有其他方法来调整文本以吸引读者。;注意，但它们并不常用，而且不建议您使用它。

下划线。下划线基本相当于现在的超链接。我认为它你最好不要挑战别人。;这是常识。文本背景颜色。这有时被用作超链接，但并不常见。删除该行。离远点，你这个怪胎。

就我个人的经验来说，当我觉得一段文字设计得不好的时候，通常不是因为大写字母的使用或者颜色太重，而是因为各种元素的搭配。

强调和弱化

您可以将所有文本样式分为两类:

增强可读性的样式:大字体、粗体、大写等。削弱可读性的样式:字体小，与背景对比不明显，留白少等。

我认为文字设计的核心在于:

标题是唯一需要充分强调的要素，其他部分要强调与弱化相结合。

如果网页上的某个元素需要强调，强调和弱化相结合，可以避免整个页面看起来过于压抑，同时让每个元素的呈现效果恰到好处。

下面BluHomes的主页就是这方面的一个典范:上面的文字很大，并且突出显示，但是用的是小写字母。没有强烈的感。

这就是设计中的平衡。

上图是Cont——上升和下降等。

这里推荐一个比较通用的方法:给白色元素上色；或者当背景颜色较暗时，将彩色内容变为白色。

修饰词语是非常困难的，但是每当我觉得这些词可以不再美丽，我的判断是错误的。我需要做的就是不断优化和尝试。

所以放轻松。如果你设计的字不好看，不要别担心。你需要不断提升自己的能力，让自己变得更好。

规则6:只用合适的字体贝巴斯N——作为标题，全部用大写字母，在？Fontfabric)，而且这个网站上有一些B——只有两层厚度，但它够了。它是哥谭市和邻近的新星最好的免费替代品，但不如那两个。你可以在谷歌字体)上找到。

Ral——适合这个头衔，但不适合。在郑文使用。有一个非常详细的版本(上面没有显)可以在谷歌字体)中找到。

Cabin——可以在谷歌字体中找到。

Lato——可以在谷歌字体中找到。

PTSans——可以在谷歌字体)中找到。

Social——社交网络图标的集合Entypo可以在Entypo.com上找到。

以下是一些其他资源:

规则7:像艺术家一样偷窃当我开始次坐下来尝试设计各种应用程序元素，如按钮、图标和弹出窗口时，我觉得我对什么知之甚少好曾经是。但我也很幸运，我没有。;不需要完全设计一个全新的UI，因为有很多优秀的作品可以借鉴。

这里有一些对你的设计非常有用的资源(按重要性降序排)。

1.滴水不漏

这个面向设计师的网站汇集了互联网上最好的UI设计作品，在Dribbble几乎可以找到各种各样的案例。

可以关注我的dribbble收藏(.com/erikdkenned)。以下是推荐给你的其他一些人:

维克多埃里克森:

有着非常明显的个人风格，非常有力量。他的作品优美、简洁、平淡。他做了三年的UI设计师，是这个领域最优秀的人才之一。

焦点实验室

这些人都是Dribbble里的名人，作品非常多样，绝对一流。

科斯明卡皮塔努

他是个多面手，做出来的东西很疯狂，很未来，但不会太花哨。他使用很棒的颜色，但他没有。;不要只关注UX设计。

2.平面用户界面插接板

有一些优秀的手机UI设计，你可以找到很多漂亮的UI设计例子。

3.Pttrns

里面有很多app截图。它的一个很大的优点是，它是按照UX模式分类的，所以你搜索你正在做的这类工作非常方便。

我坚信每个艺术家一开始都应该像鹦鹉学舌一样模仿学习，直到能惟妙惟肖地模仿顶级作品，然后开始寻找自己的风格，引领新潮流。

所以像艺术家一样偷师！

想偷东西好吧，你得有技巧！

总而言之，我写这篇文章是因为我后悔我没有我在学UI设计的时候没有这样的教程。希望这篇文章能帮到你。如果你是UX设计师，画完框架和线框后做一个漂亮的实体模型。如果你是开发者，让你的下一个项目更漂亮。

用户界面设计研究。;不要一蹴而就，需要不断的观察、模仿和与人交流。以上是我到目前为止所学到的，我将保持我的初学者别介意，继续前进。

本文由Medium编译，作者是UX(用户体)设计师。他通过自己对UI设计的学习过程，总结出七条实用法则，为UI设计新人提供了宝贵的经验。文章分为两部分。前几天分享了开始部分。今天是最终版本。快来学习吧！

开始部分:

实用的UI设计规则::

光从天而降(开始部)先黑后白(开始部)增加留白(开始部)学会把文字呈现在画面上，强调和弱化，像只有合适字体的艺术家一样偷走老师。规则四:学会优雅地呈现图片上的文字并不容易。以下是六种方法。

如果你想成为一名优秀的UI设计师，你必须学会在图片中漂亮地呈现文字。优秀的设计师在这方面做得很好，而水平较低的设计师在这方面往往很差，甚至根本没有。学完这部分，相信你会有很大的提升。

方法0:直接在图片上放文字。

我不愿谈论这种方法，因为它很难应用。但是，直接在图片上放文字，技术上是可行的。这个网站的主页很好，所以它不谈论这件事没有坏处。

将文字直接放在图片上有几点需要注意:

画面要暗，颜色不要有太大的反差。文字必须是白色的，我知道你也可以找到使用其他颜色的例子。但是我认为你最好用白色。在不同的屏幕和不同大小的窗口中调试页面，以确保文本在任何情况下都清晰易辨。

It以上三个方面调整一下就可以了，不要不做任何其他处理。

我自己从来没有在任何专业项目中直接把文字放在图片上。这种方法是可行的，可以做出很酷的效果，但是要小心。

方法一:将整个画面变暗

也许在图片上放置文字最简单的方法就是将整个图片变暗。如果原图不够暗，可以用半透明的黑色遮盖，比如底部。在这种情况下，添加了一层不透明度为35%的黑色。

如果直接放原图，背景颜色太亮，和文字对比不够明显，看不清文字。

类似的方法也适用于小图片。

加一层黑是最简单最通用的。当然，你也可以使用其他合适的颜色，比如这个:

方法2:在文本中添加一个框。

这是一种简单有效的方法。在白字下方加一个略透明的黑色方块，可以放到各种图片上，显示效果非常清晰。

当然也可以放其他颜色，小心就好。

方法三:模糊图片

模糊图片是增加文字可读性的好方法。模糊文字下面的图片，降低模糊部分的亮度。

IOS7用毛玻璃的效果模糊背景，WindowsVista也使用了这种模糊效果。

模糊图片的方法也有局限性。您需要确保在不同屏幕上调整图片的大小后，文本仍在模糊区域。

看下面这个例子。字幕能看清楚吗？我真的不知道。;不知道这个设计是怎么通过审查上线的。

方法4:在底部褪色

所谓底部淡化，就是把图片的下边缘变暗，然后在上面放上白色文字。这是一个非常新颖的方法。我不我不知道是否有人在Medium之前使用过它，但我开始次在Medium上看到它。

乍一看，你可能会认为这是把文字放在图片上。事实上，画面中有一些非常微妙的变化。中间没有黑色覆盖，底部覆盖黑色，不透明度20%左右。

这种变化很难看到，但确实存在，确实提高了文字的易读性。

此外，Medium还为文集图片上的文字添加了一点阴影，进一步提高了文字的可读性。最终的结果是Medium可以在任何图片上放任何文字，阅读体验非常好。

可能有人会问，为什么要把画面底部变暗？为什么可以难道不是画面的其他区域吗？要回答这个问题，请看规则1:光来自天空。当光线从上方照射时，画面顶部较亮，底部较暗，看起来更自然。

此外，还可以结合虚化和底纹淡化，做出底纹虚化的效果，比如下图的效果:

方法五:柔化画面某些区域的光线。

橡皮筋的照片的博客都不太暗，对比强烈。为什么单词的识别度还是那么高，如下两张图所示:

在这里，图片局部区域的光线实际上被柔化了，文字被突出显示。如果我们在浏览器上缩小橡皮筋的博客，我们会看到发生了什么。

这这可能是在图片中优雅地呈现文本的最微妙的之一。我还没有Idon’我在别的地方没见过。我我会保存它。也许我我将来会用到它。

规则五:强调和弱化。把文字设计得漂亮得体，通常是把文字放大或缩小，以产生对比效果。

在我看来，UI设计最难的地方在于对文字的修饰，因为设计文字时要考虑的因素太多了:

还有其他方法来调整文本以吸引读者。;注意，但它们不常用，不推荐使用。

下划线。下划线基本相当于现在的超链接。我认为它你最好不要挑战别人。;这是常识。文本背景颜色。这有时被用作超链接，但并不常见。删除该行。离远点，你这个怪胎。

就我个人的经验来说，当我觉得一段文字设计得不好的时候，通常不是因为大写字母的使用或者颜色太重，而是因为各种元素的搭配。

强调和弱化

您可以将所有文本样式分为两类:

增强可读性的样式:大字体、粗体、大写等。削弱可读性的样式:字体小，与背景对比不明显，留白少等。

我认为文字设计的核心在于:

标题是唯一需要充分强调的要素，其他部分要强调与弱化相结合。

如果网页上的某个元素需要强调，强调和弱化相结合，可以避免整个页面看起来过于压抑，同时让每个元素的呈现效果恰到好处。

下面BluHomes的主页就是这方面的一个典范:上面的文字很大，并且突出显示，但是用的是小写字母。没有强烈的感。

这就是设计中的平衡。

上图是Cont——上升和下降等。

这里推荐一个比较通用的方法:给白色元素上色；或者当背景颜色较暗时，将彩色内容变为白色。

修饰词语是非常困难的，但是每当我觉得这些词可以不再美丽，我的判断是错误的。我需要做的就是不断优化和尝试。

所以放轻松。如果你设计的字不好看，不要别担心。你需要不断提升自己的能力，让自己变得更好。

规则6:只用合适的字体贝巴斯N——作为标题，全部用大写字母，在？Fontfabric？你可以在)上找到这个。网站上还有一些B——只有两层厚度，但它够了。它是哥谭市和邻近的新星最好的免费替代品，但不如那两个。你可以在谷歌字体)上找到。

Ral——适合做标题，但不适合做正文。有一个非常详细的版本(上面没有显)可以在谷歌字体)中找到。

Cabin——可以在谷歌字体中找到。

Lato——可以在谷歌字体中找到。

PTSans——可以在谷歌字体)中找到。

Social——社交网络图标的集合Entypo可以在Entypo.com上找到。

以下是一些其他资源:

规则7:像艺术家一样偷窃当我开始次坐下来尝试设计各种应用程序元素，如按钮、图标和弹出窗口时，我觉得我对什么知之甚少好曾经是。但我也很幸运，我没有。;不需要完全设计一个全新的UI，因为有很多优秀的作品可以借鉴。

这里有一些对你的设计非常有用的资源(按重要性降序排)。

1.滴水不漏

这个面向设计师的网站汇集了互联网上最好的UI设计作品，在Dribbble几乎可以找到各种各样的案例。

可以关注我的dribbble收藏(.com/erikdkenned)。以下是推荐给你的其他一些人:

维克多埃里克森:

有着非常明显的个人风格，非常有力量。他的作品优美、简洁、平淡。他做了三年的UI设计师，是这个领域最优秀的人才之一。

焦点实验室

这些人都是Dribbble里的名人，作品非常多样，绝对一流。

科斯明卡皮塔努

他是个多面手，做出来的东西很疯狂，很未来，但不会太花哨。他使用很棒的颜色，但他没有。;不要只关注UX设计。

2.平面用户界面插接板

有一些优秀的手机UI设计，你可以找到很多漂亮的UI。设计示例。

3.Pttrns

里面有很多app截图。它的一个很大的优点是，它是按照UX模式分类的，所以你搜索你正在做的这类工作非常方便。

我坚信每个艺术家一开始都应该像鹦鹉学舌一样模仿学习，直到能惟妙惟肖地模仿顶级作品，然后开始寻找自己的风格，引领新潮流。

所以像艺术家一样偷师！

要想偷得好，就得有技巧！

总而言之，我写这篇文章是因为我后悔我没有我在学UI设计的时候没有这样的教程。希望这篇文章能帮到你。如果你是UX设计师，画完框架和线框后做一个漂亮的实体模型。如果你是开发者，让你的下一个项目更漂亮。

用户界面设计研究。;不要一蹴而就，需要不断的观察、模仿和与人交流。以上是我到目前为止所学到的，我将保持我的初学者别介意，继续前进。

了解更多通用ui设计原则(ui设计方)相关内容请关注东辰网。