四两拨千斤！快速改善UI视觉体验的7个小技巧

也许你是个新手设计师，也许你是个有着富开经验的开者，但是有需求让自己设计的网页和UI看来更像么一回，至少看来不是一个外行的手笔。

那么今天的文章应该能够帮到。UI的设过程中，很多技巧并不需很深厚的设知识，但它们能让的UI网页界面看起明显的提升。改设这件事，验技巧往往能让人少走弯。

闲话少叙，下面体。

1. 按钮色彩凸显重要性

在给用户提供多个选择的候，可以通过色彩所传递的情绪是积极还是消极的，来简快速地进行计。

实际上，红色和绿色按钮的色彩含义，已经横跨物理界和数字计领域，每在多实体产品上也能类似的计，包括交通上的红绿灯，警告标识，以及实体按钮。

绿色表示通行，红色表示禁止。如果户需要购一个漏斗，你希望感兴趣的户赶紧点击，而是取消。

另，如你网站或者 APP 涉及到要性不若干交互，除了按钮都要标识出相应文本标签内容以，可以借助色填充与否来进步区分层级结构：

这是个简单示例，有色填充按钮、幽灵按钮（色填充、有边框）以及边框填充按钮来区分。

而在少数情况下，对系统有重要影响的、破坏的或者的按钮，也应该突出显示，但是以使用红来进行强和警告。个时，相对的「非负面」的按钮则被视为重要低的操：

简而言之，际上用户用来区分按钮的核心靠的是感而非复逻辑判断，设计的基规则在上面，但是更重要的是要基情绪和感来进行设计。

2. 用字重和明暗来区分层级

尤其是在构建文内容的视级的时，用到的属很，只使用大小差异来构建就显得单一。

很多时候，可以借色彩、字重、明暗行区分。我们可以让重的文本、字体粗、色彩加鲜明，或者使用深的黑色呈。

综合使用这些属性构建视觉层级。

3. 用留白来隔离元素

两元素互不相关，如果将它们分隔，使用分割线似乎一件理所当然的事？当然可以，但这种方式真的非常过时且笨拙的一种呈方式。需的好、优、贴合当下的一种呈方式。

不是简地使用割线，而是使用留，或者说负空间来间隔就可以了。割线在大程度上是丑陋且难以驾驭的视觉噪音，相对而言留则好了多。

多数情况下，删除隔线条是比较快速的方法，当然更多的候需要你适当地调整一下留的大。

使分割线来分隔容，仅会扫视页面更长的时间，而且增的信息噪音会影响整体的层次结构。

4. 用阴影替代边框

想要凸显一些元素，并一定需要依靠描边。使阴影则可起到同样的效果，单独使则会显得更整洁。描边+阴影则会显得过于杂乱。

使用相不那么具有侵略性小阴影疑让效更加轻松，看起来也不会突兀。

△ 登录表单

5. 用色条提升视觉调性

如觉内容区块过于单调，可以根据你目来强化这区块视觉属性。在内容区边加上色条能够在提升视觉属性时，赋予这区块内容以情绪。

条以是单的，也以是渐变的，取决你想传达什么样的视验。个条还以具备良的功能。当，很大程度是用在相对比素的页面上的，果页面身已经很花哨，就不太用得上。

比使用红和绿来标识不同的状态，也以用条来标识出被触的 Tab 或者控件。

6. 用背景色区分区块

其，同样是为进行区分内容区块和级，个方法同样优雅而快速，几乎以是毫不费力的一种设计技巧。

为了区分两个不区块元素，简单地使用不背景来进区分也可以，本质上，它采用类似卡片设计思路——用不卡片来归类内容。

相对而言，使用有差异但是不么显著的不同块来为背，在证整整洁的同时，到区分的用。

7. 「字」尽其用

谁不喜欢漂亮的字呢？当喜欢，但是字的功用其各不相同。从呈现正文的强读文，到装饰极强的视化字，各种不同的字需要应对不同的功能。

简单看看几种不同类型的字体：

1. 衬线字体：Serif 本身就是衬线的思，这的字体字符的末尾通常是会有的装饰性的衬线。衬线除了装饰性以外，还能化字体的可读性。常见的衬线字体：Georgia，Times New Roman，Cambria。

2. 非衬线字体：就是 Sans-Serif 字体，它相对而言更现代，衬线被掉之后，线条感更强，更干净，更贴合数字时代的一些显示需求。见的非衬线字体：Helvetica，Montserrat，Gotham。

们常会认为，衬线体更加适宜长时阅读，它也更多地运用在印刷品上。然而衬线体衬线和边大多更加锐利，在定程度上会被视作为视觉噪音。在屏幕分辨率尚不到要求时代，衬线体显示问题很大。然，如今屏幕分辨率提高起来后，这个问题几乎不存在了，是在小号和低分辨率和小屏幕上，依然存在这个问题。

3. 手写字：手写字通常被认为是手写风的字，在呈现的时，常常有连写的笔画，更贴近传统的书写字所呈现出来的效果。手写字更加随意和有趣。常见的手写字包括：Alex Brush，Great Vibes，Sofia。

4. 展示性字体：展示性字体一功能导向型的分类，通常指的用作标题展示、用于海报、徽章方的字体，它们表力强，视觉特征突出，直言不讳就了吸引用户的注意力。常见的展示性字体包括：Algerian，Curlz，Gigi，Umbra。

网页设中，绝多数况下都只会使用衬线字体非衬线字体两种，英文网站当中，通常会采用一种衬线字体+一种非衬线字体的搭配方式。注意，如果不同粗细字重的字体，使用同一字体族中字体好。中文当中，源且可以免费商用的「思源黑体」「思源宋体」一设中非常常见的选择。

在进行视觉计的候，坚持使用2种字体，极少会使用3种字体，后者最多会在调视觉的商业或者艺术性项目当中使用，比如 Banner 和海报。

结语

真心期望这的巧能够帮你做出好的计，无论你是计还是其职业。多候，计是灵活的，是基于知的，有方法可供遵循的，尤其当你仔细观察一些现有的好计，会发现有多这的巧。观察共性，仔细知，总结经验，你也可以。