ui界面设计技巧

大部分ui设计师都是从摸索开始的。虽然开始困难重重，我们依然可以通过从各类书籍和文章中了解到颜色、排版、布局的各种设计知识。下面来了解一下ui界面设计技巧吧。

1，清晰的布局，稍显错落的排版

布局设计的时候，图片、文字、按钮等元素，需要遵循“相关靠近”的规则来分组排布，这样的布局会显得逻辑清晰，易于理解。不过，在保持这样的视觉关系的同时，让排版稍微错落一点，能够让页面优雅而又足够活泼生动，不会显得太简单呆板。

2，单色网站，突出全彩图片

单色网站通常会以一种色彩为主，但是如果在单色网站中再加入几张明显是全彩的图片，会显得非常「扎眼」的，但是这也会让它们非常明显地吸引用户的注意力。这种设计同样是秉承「打破一条规则」的设计策略，当然前提是你的设计目标就是要凸显这写图片内容。

3，全屏大图，兼顾功能线性元素

高清大图撑满全屏，加上展示性比较强的字体作为标题也是经典的搭配，但是在很多时候依然会让人觉得单调。线性元素的加入，不仅不会遮盖住作为视觉主体的图片，而且能够强化形式感，如果运用得当的话，还能作为视觉引导，强化交互，引导用户点击，非常有用。

4，高清大图，超出边界的布局

使用占据整个屏幕的高清大图固然赏心悦目，但是更多的图片在边界露个头，能够更好地吸引用户的好奇心，这比起单纯的左右翻页按钮更能够促进交互。这种不对称的布局，结合形式感极强的标题和数字元素，整体会显得更加优雅。

5，经典布局，错落的交互元素

打破规则，或者说打破常规是经常用到的一种设计思路，但是通常只能打破一种常规，打破太多的规则和习惯会带来混乱。在经典的左右布局之下，加入不那么规则、整齐的交互元素，能够让设计维持经典的外观的同时，显得更加活泼有趣，又不会让人觉得太过跳脱。

6，统一色彩，明确的视觉焦点

凝聚力是这种设计组合的主题。统一的色彩让整个页面显得非常的集中，而聚焦的元素让所有的视觉内容都围绕着它来进行设计，标题、辅助性的说明文本、交互按钮等都在一个统一的设计想法和目标之下得到了统一性的规划和设计。

7，单色配色，打破常规的排版

单色配色也是最近几年比较流行的配色方式，这样的配色简单直观，更重要的是能够突出排版。这种情况下，非常规的排版能够得到增益和凸显。纵向排布的标题，被边缘遮挡的作者名称，用来视觉引导的细线，左下方用来强调的装饰性色块，都很好的强化页面的排版形式感。

8，高雅中性色，明快提亮色

色彩通常是抓人眼球的设计元素。黑白灰这样的中性色，不论是图片和色块常常能创造沉静的氛围，而精选一种明快的提亮色，比如明黄，能够打破这种氛围,增加一个层次，如果用来承载核心的信息，能够让用户更快搞清主次。这样的设计不仅高效，而且优雅。

9，简约风格，沿中线错开布局

这同样是在常见的基础上，稍加调整就能做出来的好设计。在纯白背景下的简约风格之下，沿着中线的左右两侧来排布文本和图片内容，没必要刻意保证左右两侧的准确对齐，只需要保证中线,上整个视觉路径的清晰规整，同样可以做到清晰而不拘一格。

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。

清楚

清晰度是用户界面设计最重要的元素。事实上，用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。

如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里，他们会困惑和沮丧。

简明

清晰的用户界面是很好的，但是，您应该谨慎，不要陷入过度明晰。定义和解释很容易被添加，但是你这样做的同时也增大了规模。

您的界面规模增加。添加过多的解释，您的用户将不得不花费过多的时间去读它们。

不仅要保持清晰，而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项，就不要用两个。

保持简洁可以节省你的用户的宝贵的时间。 同时保持清晰和简明并不容易，需要足够的时间和努力来实现，但其回报是值得的。

熟悉

许多设计师努力使自己的界面，直观。但到底直观的真正意思是什么?直观也就是就是说可以自然地，本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。

熟悉就是， 跟你以前遇到过的东西相似。当你熟悉的东西，你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。

一致

之前有谈过关于上下文的重要性，以及它应如何指导你的设计决定。而我认为，适应任何给定的上下文是很聪明，但是，一个界面仍然应保持一定程度的一致性。

一致的界面，使用户能够开发惯用模式-他们会了解不同的按钮，标签，图示和其他界面元素的外观，并识别他们。

认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作，能够从过去的经验中更快的总结知道如何操作新功能。

易响应

易响应意味着两件事。首先，易响应意味着快速。如果没有软件在后台，界面应该响应很快。

等待加载和缓慢的界面是令人沮丧。看起来加载的很快，反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。

易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户，告知他们现在怎么了。你成功地按下那个按钮吗?你将如何知道?

按钮应显示一个被按了的 状态反馈，或许可以把按钮上的文字改成“正在加载… ”并且禁用按钮。是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。

吸引力

这可能有一点争议，但我相信一个良好的界面应该有吸引力。吸引力在某种意义上，是与界面交互变得是愉快。

是的，你可以让你的用户界面简单，易于使用，有效 率和易反应，它将尽其出色-但如果你可以做额外的一步，使之有吸引力的。那样用户体验会真正令人满意。

当你的软件使用起来是令人愉快的，你的客户或工作人员将不仅是简单地使用它——他们会期待着使用它。

当然有许多不同类型的软件和网站，所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。

这就是说，你应该为了你的用户来包装你的界面的的外观和风格。此外，美感设计应适度使用，并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。