也许你是一个设计小白，也许你是一个开发经验丰富的开发者，但你需要让你设计的网页和UI看起来更像那样。至少看起来不像是外行的笔迹。那么今天的文章应该能帮到你。在UI设计过程中，有很多技术不需要深厚的设计知识，却能让你的UI和Web界面看起来有明显的提升。改进设计，经验和技巧往往能使人少走弯路。事不宜迟，让我们仔细看看。1.按钮的颜色突出重要性。在为用户提供多种选择时，可以通过颜色所传达的情感是积极的还是消极的来进行简单快捷的设计。事实上，红色和绿色按钮的颜色含义已经跨越了物理世界和数字设计领域。我们每天也能在很多实体产品上看到类似的设计，包括交通上的红绿灯、警示牌、实体按钮等。绿色表示通过，红色表示禁止。如果用户需要购买渠道，您希望感兴趣的用户点击，而不是取消。另外，如果你的网站或APP涉及几个不同重要性的交互，除了按钮必须标识对应的文本标签内容外，还可以使用颜色填充进一步区分层次结构：这是一个简单的例子，Buttonswithcolor填充、幽灵按钮（无颜色填充和边框）以及无边框且无填充的按钮。在少数情况下，对系统有重要影响的破坏性或限制性按钮也应该突出显示，但可以用红色来强调和警告。这时候，相对“非负”的按钮就被认为是一个不太重要的操作：简而言之，用户用来区分按钮的核心是感知，而不是复杂的逻辑判断。以上是设计的基本规则，但更重要的是基于情感和感知的设计。2、用字重和明暗来区分层次。尤其是在构建文本内容的视觉层级时，可用的属性非常多，只用大小差异来构建就显得过于简单了。很多时候可以借助颜色、字重、明暗来区分。我们可以使更重要的文本更大、更粗、更生动，或者呈现为更深的黑色。结合使用这些属性来构建视觉层次结构。3、用空格分隔元素两个元素互不相关。如果要将它们分开，使用分割线似乎是理所当然的事情？当然可以，但是这种方式确实是一种过时笨拙的呈现方式。您需要的是一种更好、更优雅、更像样的呈现方式。不要简单地使用分隔线，而是使用空白或负空间来分隔它们。分界线在很大程度上是丑陋且难以控制的视觉噪音，而空白要好得多。大多数情况下，删除分割线是比较快捷的方法，当然更多时候需要适当调整空白的大小。使用分界线分隔内容不仅会延长浏览页面的时间，而且增加的信息噪音会影响整体层次结构。4.使用阴影代替边框。如果你想突出一些元素，你不一定需要依靠笔画。使用阴影获得相同的效果，或单独使用它们以获得更整洁的外观。描边+阴影会显得太乱。使用不那么激进的小阴影肯定会使效果更容易且不那么突兀。△登录表单5.使用色条来增强视觉基调。如果觉得内容块过于单调，可以根据自己的目的加强这个块的视觉属性。在内容区域的一侧添加颜色条，可以在提升视觉属性的同时，赋予这一块内容一种情感。颜色条可以是单一颜色，也可以是渐变色，这取决于你想要传达什么样的视觉体验。这个颜色条也可以有很好的功能。当然这个多用于比较普通的页面。如果页面本身已经很花哨，那么它就不是很有用。例如，红色和绿色用于标识不同的状态，颜色条也可以用于标识触发的Tabs或控件。6.使用背景颜色来区分方块。其实也是用来区分内容块和层次的。这种方法也是优雅快速的，可以说是一种几乎毫不费力的设计手法。为了区分两个不同块的元素，也可以简单地使用不同的背景来区分它们。本质上，它采用了一种类似于卡片设计的思路——用不同的卡片对内容进行分类。相对而言，使用不同但不那么显着的色块作为背景，在保证整体整洁的同时起到了区分的作用。7、善用“文字”漂亮的字体谁不喜欢？当然他们都喜欢，但是字体的作用其实是不一样的。从呈现文字的高可读性文字，到极具装饰性的视觉字体，各种字体需要响应不同的功能。简单看一下几种不同类型的字体：1.Serif字体：Serif本身就是衬线的意思，这类字体通常在字符末尾有装饰性的小衬线。除了装饰作用，衬线还可以增强字体的可读性。常见的衬线字体：Georgia、TimesNewRoman、Cambria。2.Sans-seriffonts：无衬线字体，相对现代一些。去除衬线后，线条更结实、更干净，更适合数字时代的一些显示需求。常见的无衬线字体：Helvetica、Montserrat、Gotham。人们通常认为衬线字体更适合长期阅读，在印刷品中也使用较多。但是衬线字体的衬线和边角大多比较尖锐，在一定程度上可以看作是视觉噪声。在屏幕分辨率还达不到要求的时代，衬线字体的显示是个大问题。当然，现在屏幕分辨率提高了，这个问题几乎不存在了，但是在小字号、低分辨率、小屏幕上还是存在的。3.手写字体：手写字体通常被认为是手写风格的字体。呈现时往往有连续的笔划，更接近传统书写字体呈现的效果。手写字体更加随意有趣。常见的手写字体包括：AlexBrush、GreatVibes、Sofia。4、显示字体：显示字体是一种以功能为导向的分类，通常是指用于显示标题、海报、徽章等的字体，表现力更强，视觉特征更突出。说白了，就是吸引用户的眼球。常见的显示字体包括：Algerian、Curlz、Gigi、Umbra。在网页设计中，大多数情况下只使用衬线字体和无衬线字体。在英文网站中，通常使用衬线字体+无衬线字体。注意，如果有粗细不同的字体，最好使用同一个字体家族的字体。在中文里，开源免费商用的“思源黑体”和“思源松体”是设计中很常见的选择。在做视觉设计的时候，我坚持使用2种字体，很少使用3种字体。后者主要用于强调视觉效果的商业或艺术项目，例如横幅和海报。结语衷心希望这样的小贴士可以帮助你做出好的设计，不管你是设计师还是其他职业。很多时候，设计是灵活的，是基于感知的，是有方法可循的，尤其是当你仔细观察一些现有的好的设计时，你会发现这样的小技巧还有很多。观察共性，细心感知，总结经验，你也可以。
