如何设计出友好的UI界面?UI设计包含五大元素

我们常常把网站的用户体验挂在嘴边，而UI(User Interface)就是提升网站用户体验的秘密武器。一个友好的用户界面，可实现用户与网站之间的友好交互，让操作过程变得更人性化。毫不夸张说句，UI决定了互联网创业的成败。

如何设计出友好的UI界面呢?界面视觉设计包含五个要素：色彩、文字、图标、图片、空间。要想设计出色的UI界面，就必须将这五大要素发挥得淋漓尽致。

一、色彩搭配

UI设计的色彩搭配主要有以下几种：

① 同类色搭配

特点：同类色搭配对比效果统一、清新、含蓄，但也容易产生单调、乏味的感受。

② 邻近色搭配

特点：邻近色搭配对比效果柔和、文静、和谐，但也容易感觉单调、模糊，需调节明度来加强效果。

③ 类似色搭配

特点：类似色搭配对比效果较丰富、活泼，同时又不失统一、和谐的感觉。

④ 中差色搭配

特点：中差色搭配对比效果明快、活泼、饱满、使人兴奋，同时不失调和之感。

⑤ 对比色搭配

特点：对比色搭配对比效果强烈、醒目、刺激、有力，但也容易造成视觉疲劳，一般需要采用多种调和手段来改善对比效果。

⑥ 互补色搭配

特点：互补色搭配表现出一种力量、气势与活力，具有非常强烈的视觉冲击力。

⑦ 多色搭配

特点：多色搭配会让画面显得更加丰富、多彩，充满趣味性，但若控制不好，也容易让画面变花，失去平衡。

二、文字字体选择

UI设计中的字体主要分为衬线体和无衬线体。

① 衬线体

衬线体具有复古传统的曲线美，个性鲜明，张力十足，适合时尚奢侈品牌或复古海报等设计领域中。

② 无衬线体

无衬线体一般比较简约，且具有现代感， 所以比较适合Web、App 等互联网科技领域的设计中。

三、图标

图标是UI设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效地识别，而且还具有一定装饰作用，提高界面设计的美观度。

① 图标类型

对於图标类型，目前还没有很权威的分类，但主要还是可以划分为：功能型图标和展示型图标。

功能型图标：一般来说，在UI界面中，用户可以点击的图标都可以看做是功能性图标，此类图标往往代表某一功能或某一链接的跳转。

展示型图标：与功能性图标相比，展示型图标会更具有设计感，而且具备较高的辨识度。展示型图标主要是应用程序的启动图标，突显产品的属性、气质以及品牌形象等。

② 图标风格

图标的设计风格有很多种，例如：线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标等。

线性图标：此类图标轻巧简练，具有一定的想像空间，不会对界面产生太大的视觉干扰;

面性图标：此类图标比较稳重和紮实，对色彩的传达有清晰明显;

线面结合图标：采用粗描边线和偏移的填充面相结合，灵动而鲜明，突显内容、表现清晰;

扁平图标：此类图标让信息本身作为核心被凸显出来，并且在设计元素上强调抽象、极简、符号化;

轻拟物图标：利用淡淡的渐变和光影达到两者之间的平衡，使图标不那麽「平」，识别性高又不失美感。

四、图片

图片在界面设计中也是非常常见，图片质量和展现方式都会影响用户对产品的感官体验。

① 图片比例

不同比例的图片所传递的主要信息各不相同，这需要结合产品特点和场景选择合适的图片比例。

1比1：比较常见的图片设计比例，构图简单，能突出主体的存在感，常用於产品、头像、特写等展示场景。

4比3：图像紧凑，容易构图，便於开展设计。

16比9：能呈现电影观影般的效果，大多数视频播放软件常用的尺寸，能带给用户开阔视野的体验。

16比10：最接近黄金比，蕴藏着丰富的美学价值，被认为是艺术设计中最理想的比例。

② 图片排版

图片的排版类型有很多种，主要还是根据不同的场景和所需传递的主体信息来选择和展示。

满版型：常搭配文字信息或 icon 修饰，视觉传达直观而强烈，给人大方、舒展的感觉。

通栏型：通栏型图片宽阔大气，可以有效地强调和展示重要的商品、活动等运营内容。

并置型：能给原本复杂喧闹的版面带来秩序、安静、调和与节奏感。

九宫格型：这种构图给人严谨、规范、有序的感觉。

瀑布流型：呈现参差不齐的多栏布局，降低了界面复杂度，节省了空间，使用户专注於浏览。

五、空间

空间是网页设计中不可或缺的部分，它不仅仅是处於视觉审美的需要，还肩负重要的角色，在视觉审美与引导用户之间达成完美平衡。

① 栅格系统

栅格系统(Grid systems)，运用固定的格子设计版面空间布局，风格工整简洁，能让网页的信息呈现更加美观、易读、严谨和一致，同时也更具可用性。

② 留白

留白能吸引并引导用户浏览页面的方式，运用得当还能引导用户注意你想突显的元素。

留白表现形式

轻度留白：在传递出雅致、高端、文艺等气质的同时，又能将信息表现得清晰直接，让页面更加简洁和实用，而且不受品牌属性的影响，几乎任何产品都可以用这种表现形式。

重度留白：传递出的雅致、空灵、高端气质是最强的，但与此同时，其他的属性也近乎为零。所以，重度留白传递的不是产品，而是概念、气质和态度。

一个成功的UI界面设计不仅有很高的转化率，而且还能满足商业目标为用户带来更好的体验。但无论UI设计是往哪个方向，永远都离不开以上五大属性，只有把这些细节都做好，才能更容易获取用户的心。