首页 > 用户投稿

设计网站banner需要注意哪些地方 如何设计细节，让自己更具吸引力？

实习编辑 • 2023-11-21 05:03:51 • 用户投稿 • 阅读 3

如何设计细节，让自己更具吸引力？

今天，这篇文章将告诉你关于ui界面的细节。我也希望通过今天的文章，我们可以检查工作集中的接口问题，找到一些可以快速实现的优化方向。

初级和高级设计师的区别有时候不在于整体布局，而在于文章中提到的小细节。在腾讯，一个界面中的细节往往会细化到像素级别，一个大1px或者一个小px可能会产生几个草稿。调音后确实会有不一样的感觉，一定要注意。如果你想学习或者提高ui设计，可以来3a接受教育。

这篇文章对新手特别有用，但我还是建议所有设计师都要牢记这些设计基础，不管经验如何。本文更倾向于一些基本的设计原则，但这些原则在实践中往往被遗忘。希望以下原则能在你的设计中起到高级调优的作用。

设计网站banner需要注意哪些地方 如何设计细节，让自己更具吸引力？

排版设计首先要声明一个项目中不能使用两种以上的字体及其多种样式。这句话很重要。希望大家无论如何都遵循这个原则。让让我们谈一些更具体的细节。

1.文本间距

唐当你使用全部由大写字母组成的单词时，不要忘记设置字母间距。这可以防止字符之间的粘连，并使文本更具可读性。

2.文本厚度

使用精细和非常精细的字体时要特别注意。中细体的汉字都可以，但要看具体字体有多细。如果你的产品最终会被用户在屏幕上看到，那么最好不要使用薄的机身和极薄的字体，因为它们非常难以阅读，甚至会在一些屏幕上造成半像素的模糊。

3.标题和正文字体大小

让让我们来谈谈网页布局。有六个级别的头衔(h1-h6)。首先，你要保证你的项目不超过四个标题层次，并控制好它们的逻辑和一致性。网站或登陆页面的最大标题(可能出现在主页面的第一个区块)可以是任意的:目前的趋势是鼓励表情排版。但是，请确保标题的其余部分不要太大，因为太大的文本和太小的文本一样难以阅读。

现在让我们让我们来谈谈这篇课文。浏览器的默认设置(基于chrome浏览器)将以16px的大小显示每个文本。这个尺寸读起来很舒服，但我倾向于使用不低于17px的主文本和14px的附加文本。保持12px为最小尺寸，而较小的尺寸由于视力问题或显示不佳而变得几乎不可读。记住，为了避免近似的大小，不要不要在同一款中使用16px和17px，这会给产品的外观带来混乱和视觉上的不协调，并可能让人误以为是个错误。

向高处走

很少可能直接使用默认行高。通常在这种情况下，它必须略大于默认值，以提高可读性。对于大型文本块尤其如此:博客、文章、网站或移动应用程序的信息块。同样的方法也适用于标题:确保字母不不要上下触摸对方。

5.内容水平

粗体应该用来突出文本的重要部分，包括标题、链接和按钮，有时是文本中被强调的部分。但是如果所有的文字内容都是粗体的，那么看哪里，哪些部分更重要就变得不清楚了。内容需要有一定水平。

6.文本对比

在设计中要特别注意文字的颜色。它应该有足够的对比度，以便文本可以在任何类型的显示器上阅读。这对于经常使用浅灰色的输入字段中的占位符尤其重要。

间距和边距

负空格("空气和空气元素之间)对于一个好的设计是必不可少的。消隐有助于理清元素之间的关系，提高节奏感和平衡感。

1.移除多余的盒子和线路。

分离多个模块最简单的方法是使用box或1px线。但这不是最好的方法。看过一些设计作品。盒子里有盒子，每个盒子都有1px边框。在这种情况下，你需要停下来想一想:这真的合适吗，有必要吗？今日s的界面经常是卡满了:电商平台的商品卡，动物护理应用的卡，外卖app的披萨店的卡。

有时使用1px边框是合理的，但也有其他方法来区分这些元素，如阴影或空格。最重要的是，卡片之间的外边距应大于卡片中填充元素的内边距。通过删除任何元素上不必要的框架，可以为内容节省空间。毕竟，内容是任何产品最重要的部分，所以不要不要无缘无故地移走为它保留的空间。

2.元素层次结构

边距有助于直观地确定一个元素是否属于另一个元素。让让我们考虑一下新闻网站上一篇文章的布局。假设它由一张图片、一个标题、3-4行预览文本和发布日期组成。标题应与内容分组，日期的边距应略大于标题与正文之间的边距。最后，图片要和题文单位的日期一样，甚至更远。唐你不明白吗？让让我们看看下面的图片。

3.少即是多

总有一些客户或经理要求所有信息都必须塞进一个块或一个接口中。所以标题，，还有整个菜单，优惠信息都在堡垒里。还有，唐别忘了一个大标志。我我不太擅长谈判，而且我可以我想不出如何让他们轻易改变主意。

但至少你可以说，用户一次收到的信息越少，他就越容易采取行动(比如打)。逐步的信息接收可以确保更容易和更愉快的用户体验。唐t让用户在识别你的界面布局时遇到困难，一堆元素堆在一起很难产生美观和愉悦。体验。

4.边缘不均匀

如果你正在制作海报、横幅或我们最喜欢的卡片，请注意页边空白。如果按照经典的从左上角到右下角布局内容，如果顶部的页边距比左侧的页边距略大，看起来会更舒服美观。

颜色和图片匹配

图片、图标和背景决定了产品的基调。图片应该准确地显示公司，应用程序或网站提供什么。

1.一些标志的想法

我不不要经常制作商标。ui界面需要注意哪些细节？在我的职业生涯中，我制作了大约20个logos。我的心是，好的logo很难做。但是，作为设计师，只要遵循基本的规则和原则，就一定能做出像样的logo。例如，仔细选择颜色。

有一次，我看到一家名为"贵宾捕捉和使用紫色标志。紫色和"vip"canidon'我真的不会让人联想到钓鱼。一般来说，任何行业都可以用任何颜色，除非有明显的脱节，比如上面提到的例子。如果你认为很难把图片(符号)放入标志，那么不要不要这样做。尽量做成纯字体logo。少即是多。

项目

物体的投影永远不应该是黑色的。投影的颜色总是需要和环境的颜色结合在一起的(就想象有一道太阳光从界面射进来，会反射周围的环境颜色，所以会有周围物体的颜色)。一个物体通常有几个投影:一个是小而亮的，在它的正下方(如果是站着或躺着)，第二个是模糊透明的投影。避免项目中肮脏和不自然的投影。

3.图标和图片

凡是能矢量化的都要矢量化。所有的图标、箭头和logo都要以svg格式(ios开发的pdf格式)交给开发者。png图标边缘模糊，看起来很糟糕，尤其是在视网膜显示器上。此外，使用矢量图占用的内存更少。

4.关于图标

如果你正在为一个网站或应用程序开发一组图标，请确保所有图标都属于a"家庭"。这意味着相同的描边宽度和相同的边框半径。检查以确保每个图标适合相同大小的正方形，并且具有相同的视觉重量。如果某些图标有圆形，请确保圆形具有相同的直径。图标应该有一致的风格。

其他的

避免奇怪的布局

让让我们回到我们在空间和边距部分学到的新闻预览的例子。如果我们将元素(图片、标题、文字和日期)按照非常规的顺序排列，可能会让人感到困惑。尽量坚持通用的界面布局。一般不不一定意味着无聊，你可以在项目的其他部分展示你的创造力。没有足够的理由，避免在屏幕/页面/卡片上实验性地定位元素。否则，用户可能会感到困惑，并离开你的网站或应用程序。记住，设计师和艺术家是不同的职业。在设计中，我们为人们创造产品，这意味着你个人的创作冲动只能应用在不会干扰用户体验的地方。

2.界面尺寸

在你开始设计一个移动应用程序之前，一定要问开发者关于屏幕尺寸的问题。通常ios的屏幕尺寸是320px，android的屏幕尺寸是360px。尽管对移动应用程序或多或少有明确的期望，但网站设计可能具有挑战性，因为它将在各种设备上显示。下面这种情况在我自己的前端开发经验中很常见:提供的布局是为一个巨大的显示器做的。块与块之间有400-600像素的边距，巨大的字体和奇怪的网格。

幸运的是，我也是一名设计师，我可以通过自己调整边距和大小来解决这个问题，这样它在任何屏幕上都可以很好看。然而，前端开发人员通常不会t没有设计背景，会完全按照提供给他们的设计方法来实现。因此，在正常的笔记本电脑屏幕上，元素会过大。需要注意的是，一般笔记本电脑屏幕的垂直宽度限制在700px左右，所以尽量在这个显示范围内放一个模块。

3.内容填充

重复的样本文字在设计上会显得廉价和不专业，应该避免。只会让人觉得你懒得做点像样的事。另外，现在不用自己创建，有一堆sketch和figma插件可以自动填充内容。尽量不要重复内容，哪怕只是为了演示。放不同长度的图片、标题、预览文字，效果会更好看。

ps设计banner常用的尺寸是多少？一般画布建立多大？

banner尺寸为4m*1.2m，ps新画布尺寸为4m*1.2m，分辨率为72像素。你需要的照片分辨率只有72，直接把照片拉到横幅里就可以用了。请在将照片拉入横幅前注意照片。

标题文本设计元素界面

原文标题：设计网站banner需要注意哪些地方 如何设计细节，让自己更具吸引力？，如若转载，请注明出处：https://www.taihaichina.com/taihai2/754.html
免责声明：此资讯系转载自合作媒体或互联网其它网站，「泰海号」登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述，文章内容仅供参考。

设计网站banner需要注意哪些地方 如何设计细节 让自己更具吸引力？ 设计网站banner需要注意哪些地方 如何设计细节 让自己更具吸引力？介绍
赞 ( )
打赏 微信扫一扫微信扫一扫
上一篇：怎么设置excel的数据范围 excel表格怎么随机生成范围数？ 下一篇：ai怎么做图片叠底印花 印花布料设计用什么软件？

相关推荐