提升网站设计的10个小技巧｜UI/UX设计师的一百个设计思考
时间：2023-09-05 23:12:01 | 来源：网站运营
时间：2023-09-05 23:12:01 来源：网站运营
提升网站设计的10个小技巧｜UI/UX设计师的一百个设计思考：你好，我是小鹿。在知群做产品设计与管理。近两年，我在本站写了不少于 10 万字的专业性回答，解决了不少互联网设计师的困惑。现在，我想把过去的一些关于 UI设计、交互设计乃至整个用户体验设计相关的思考和回答，做更系统的梳理。同时，也会找一些国外写的不错的文章，做一些翻译和拆解。一来我自己也能深度思考和学习，二来也能帮助到更多设计师朋友，给大家带来启发、思考和进步。
这篇是小鹿的专栏——
「UI/UX 设计师的“一百个”系列」的第 19篇——麦子姐姐更新的「产品经理的“一百个”系列」的姊妹篇。在这个系列里有关于设计的方方面面——学习姿势、认知百科、大咖分享、转行思路、设计思考等等，希望能帮助初入设计行业的朋友们快速了解设计圈的各种知识，提升个人的能力，下面
文章是整理的网站文章分享，祝大家学习愉快。
每个人都是从初学者开始他的设计之旅的，你的审美眼光也要像其他事物一样经过训练。看Dribbble的设计可能是非常有帮助的，但有时候你只是欣赏设计，却不明白为什么。
没有灵感、没有优质的设计素材、不知道要设计什么，所有这些原因都可能会拖慢你的速度，让你感到沮丧。所以现在我将和你分享10个极其简单的设计技巧，帮你改善你的设计作品，而且不需要额外学习新的技能哦。
请记住，我提供的不是必修遵守的规则，而是大多数时候都有效的技巧。
1）把你的设计作品去色如果你没有好的想法或优质的设计素材，那么你可以把你的作品去色。你可以通过正确的构图获得野兽派的设计。这么做有助于你理解平衡、留白，以及如何使用文字和几何图形。
让我们来看一个案例：
2）用“平衡方案”测试你的画面我自己发明了一套测试画面的方法：用简单的几何图形代表画面中内容，然后通过比较页面中色块的面积来确定页面是否平衡。当你在自己的作品中使用这个方法时，会得到下图这样的效果。
通常你需要通过视觉进行判断，但这里我们可以做一些简单的计算帮助理解：
左边区域的黑色矩形加起来约为
(236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX 而右边的大长方形数约为
446×446=198916PX他们只是相差了一点点3.9558%。
注意：圆形比长方形小，但由于相当锐利和细致，使它更吸引人的注意。我在设计之前没有计算过。经过多年的练习，这只是成为自动的，因为你的眼睛会感觉到错误的平衡。
3）用背景来呈现设计
我之前带来的例子是在灰色背景上呈现的，但你可以尝试不同的东西。这有助于为你的设计创造一些景深。但要注意，在一个真正的网站中，你不会有那么多额外的空间，所以这只是一个展示技巧!
4）使用推荐的字体大小不要再整天浪费时间去实验字体大小。一般情况下以下字体大小是合适的：段落使用14-18pt左右，副标题使用24-36pt，标题使用96-144pt左右。Figma的默认大小对于排版来说是相当不错的。虽然它们看起来会很小，但这是正常的。
有些字体相对于其他字体会偏大或者偏小，所以你应该以标准字体为基础。比如Roboto：如果字体大小接近14-18pt的Roboto，那就非常适合用于段落。
5）拥抱Z轴如果你有一些具有透明区域的图片，你可以利用它们来创建一些分层。
在网页开发中，CSS代码有一个Z-index的参数，可以用来把图像带到其他项目的后面或前面，给人一种立体的错觉。
让我们看看我的一个简单的设计，其中就利用了这种技巧。
6）开始使用柔和的颜色鲜艳的色彩虽然美好，但往往会导致画面过于刺激。现在非常流行在设计中使用更加柔和的色彩，你可以在下图拾色器中红色标记区域内选取更柔和的颜色。
7）让画面有呼吸感在我看来，多一些留白要比没有留白更好。杂乱无章的设计就通常都很糟。你可以通过以下方式获得呼吸感。
- 保持大量的背景可见。
- 用间距避免文字墙效果。
- 使用不会吸引太多注意力的图片。
- 精炼你的文字。
8）在设计中使用噪点通常当我们想到设计的时候，我们会想到干净、流畅、清晰等概念。但完美就存在于缺陷之中。在你的设计中，当你想给自己的网站一个优雅或艺术的外观，噪点是一个强有力的朋友。此外，应用微妙的噪点让你的构图看起来像电影一样，这对视频和动态网站来说效果非常好。你可以通过使用Photoshop，在白色背景上创建一个2-4K的高斯模糊，然后将其应用在你的画板上，从而获得一些噪点纹理。
9）开始寻找更好的字体我们电脑上预装的字体通常都不是很好的选择。要想找到更好的字体，可以开始上网冲浪或看youtube视频，了解精彩的字体和字库。
但要注意：很多字体都不是免费的，在没有授权的情况下使用它们可能会给你带来麻烦。不过不用担心，大多数的字体都有免费版本!
虽然有大量不同的字体和风格，但一般来说，我把它们分为三大类。
- 古典字体
- 现代字体
- 正文字体
通常情况下，前两种也可以用在正文中，只是字体的设计者希望你把它们当作标题来使用。
古典字体包括Abril Fatface、Playfair Display、Volux、Chalga和许多其他字体。
现代字体包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....
10）利用几何图形这可能是最难利用的技巧，但如果应用得当，画面会非常有冲击力。
利用几何图形有助于强化布局中的概念和秩序，甚至不需要使用额外的图像。找到合适的几何图形是很难的。目前我还是不能很好地掌握它。
但是有一个诀窍是，把你的文案中的字母、数字和标题当作几何图形：把它们做成巨大但微妙的形状，或者用一些特定的字母作为形状（字母A就很好用）。
写在最后
能看到这，说明你是一个愿意学习和思考的同学。最近看到很多同学在问，互联网行业不景气，转行做UI设计师、交互设计师还有前景吗？我从来不觉得 UI 设计师、交互设计师是一个轻松的工作。不是简简单单能画几个 icon，能出一些界面，就算是优秀的设计师。真正重要的，是设计背后的思考，能解决真切的业务问题。哪怕是一个按钮上的文案，也要从业务和用户体验场景去思考和完善，而非一个作图的机器。
真正的水平不错的、实战经验丰富的、保持进步和学习的设计师，一直都是稀缺的。反之，作品集造假、浑水摸鱼很容易在工作中露馅儿，在行业里无法混下去。作为在互联网从业的设计师，应该多充电，多打磨自己，让自己的有更强的竞争力。
我所在的公司——知群，是一家互联网职业教育的公司，创始人马力老师是移动互联网第一批用户体验设计师。曾经做过豌豆荚、最美应用等知名产品。马力老师每周三晚上，会在知群做直播，主要讲互联网的岗位发展，会用不同的案例拆解和讲解：互联网产品思维、设计思维和运营思维。尽可能帮助想入行 UI 设计和提升的同学，建立更完整、更系统的认知和方法，也能知道什么样的作品才能真的打动面试官。
直播和课程是免费学习的，你可以添加知群的老师进行预约：
在线咨询
