网站界面的功能介绍及UI设计发布者：本站     时间：2020-05-05 13:05:05

当今社会是信息社会，互联网技术的飞速发展，给人们的生活方式带来了巨大的改变。 网络已成为人们获取信息的主要途径，网络信息传播的载体是网站，网站类型多种多样，展示，但是他们都有一个共同的特点，就是通过网站内部模块、图文信息、服务方式等将信息传达给人们，如此多种类型的网站，究竟什么样的网站才更适合人们获取准确、清晰的信息，这就关乎到网站界面的 UI 设计。

1 网站界面UI设计的定义

（1）网站：网站是一种展现现代科技网络技术的新式工具 ,它可以由多个网页集成在一起构成一个站点，在站点上可以放置一些有用的或是需要让用户浏览的信息。

（2）网站界面：网站界面是网站呈现给人们的非常直观的一种版面，界面的内部设有许多信息模块，模块包含有图片、文字、音像等等内容，人们就是通过这些信息模块来获取信息，从而将信息应用到人们的各种生活活动当中。

（3）UI 设计：UI 是用户界面 User Interface 的英文缩写 ,UI 设 计 是指在设计上实现软件界面与人的交互操作，并且将其效果实现的更加合理、更加人性化，从而满足人们在体验操作界面上的心理需求。

2 网站界面的功能介绍

当我们打开一个网站（一个网站包含着许多个网页）的时候，就会看到有图片、文字、音频、动画等许多模块组成的版面，称之为网站中网页的界面。 不同的模块包含着不同的信息内容或服务，这是一种传递信息的方式。当然，一个网站又不止一个网页集合而成，每个网页上又有许多链接可以进入不同的网站或是本网站的一个子网页，不同的链接又可以进入不同的功能界面，感受不同的操作体验。

一个完整的网站包含着网站整体结构的布局、网站展示的背景色调、网站的 LOGO、导航条、广告、图文信息、图文链接、子网页、后台管理、公司或企业注册信息、网站版权等内容。

2.1 网站的结构布局与视觉感受

网站的结构布局与视觉感受对一个网站是否被关注起着至关重要的作用。 例如一个网站的首页如果结构布局凌乱不堪，视觉感官令人厌烦，那么将会造成浏览者对其关注的吸引力下降，甚至根本就不会接着浏览该网站所展示的信息，这不仅将会使公司或企业损失一位客户，并且还会造成极大的负面影响，给公司或企业的形象带来损害。因此，结构布局的合理性，视觉感官的舒适性必将是一个网站成功与否的关键， 这就关乎到网站界面 UI 设计的技术性与结构布局的逻辑合理性。

2.2 网站的 logo

网站的 logo 是网站的标志， 网站 logo 的设计也要符合一定的要求，比如易识别性、与公司的关联性、美观性等条件。 它好比人的面貌气质，透漏着一个网站的整体信息与形象，因此 logo 的设计同样重要；界面导航条好比生活中城市街道的指路标， 导航条内容的清晰度、准确性、操作简单易用性同样关乎着一个网站的整体质量，是每一个网站都不可缺少的重要结构之一。

2.3 广告

每个网站的页面都会呈现企业或公司的宣传广告或是公司理念，特别是商业性质的网站会有关于产品或服务的广告，这些广告给人以一种直观、易懂的画面，从整体上网站页面的动感，从而吸引浏览者对网站的关注；网站内部的图文信息也起着非常重要的作用。

3 网站界面UI设计

包括各类设计元素：颜色、布局、菜单、图标以及各种鼠标动作等。它是技术与艺术的结合。 由前期设计师把网站界面设计后，再由后台程序员通过代码、数据库等技术辅助实现的效果。

3.1 网站界面 UI 设计应具备的条件

3.1.1 前后结合设计师：熟悉设计软件，有一定的艺术设计和切图能力程序员：熟悉 CSS\JAVA 等程序语言，能够准确的将设计师的设计稿 100%还原为 HTML 文件。

3.1.2 色彩运用色彩在网页布局与设计方面所表现出的重要性也不可忽视，它能够使网页更具活力，更能体现出网页精彩的一面，能使人感到愉悦舒适，并能烘托出网页主要信息的整体与协调性。色彩布局合理，整个网页表现的才更加完整。 关于色彩对网页的重要性有许多方面，不同的颜色有不同的含义，也象征着不同的意义，对于不同的网站又要有不同的色调，色调搭配合理，布局设计感强，才能将整个网站表达的更为成功。

3.1.3 软件应用网站界面 UI 设计所需软件如下表 1 所示。

3.2 网站界面 UI 设计的流程

3.2.1 确定网站主题和目标用户需要浏览大量的网站和素材来做这项工作。确定网站的类型和准确的定位，比如属于什么行业的网站，规模有多大，类似的网站有哪些，都有什么特点，而我们要设计的网站又有什么和它类似和不同的地方。做一份详尽的市场调查， 明确该网站的目标用户群的各项特点，年龄、收入、使用习惯和心理需求等。

3.2.2 网站初期规划制定待目标明确，客户确定，资料详细，用户调查统计完毕，就开始进行网站的设计，设计也要定制不同的方案，以便日后调整择优，选出最佳方案。

3.2.3 进行用户反馈与设计定稿设计完成后，需要进行用户反馈，根据用户反馈的信息来决定设计的成功与否，如若不成功则进行重新的规划设计，如若成功就要着手设计效果的实现，并将网站测试上传。

3.3 网站界面 UI 设计的原则

3.3.1 简洁性简洁给人们的感觉就是整体界面简洁清爽， 操作起来干脆利落，这样就会使人们在操作过程中得到更好地体验。

3.3.2 数据传达直观化界面的设计就是为了方便人们迅速获取有价值的信息，只有将界面设计制作的更加简单易懂、清晰易查，才更够使浏览者或是用户在最短的时间内获取想要知道的信息，减轻用户在记忆上的遗忘性。

3.3.3 安全性界面的设计不能让用户感觉到自己不敢操作或是带有个人利益的损失等不安全因素。

3.3.4 人性化人性化就是指更够给用户带来高效率的操作，使用户在体验上更加满意，更加符合用户想要操作的要求。

3.3.5 美观与协调性这就要求设计的界面美观性要与网页主题内容协调一致，和谐统一。

4 用户体验

用户体验是指“产品如何与外界发生联系并发挥作用的”,也就是人们如何“接触”和“使用”它。 网站的用户体验比任何其它产品都重要。 因为它是一个“自助式”的产品。 没有事先阅读的说明书，没有任何操作培训或讨论会，也没有客户服务代表来帮助用户了解这个网站。

4.1 用户体验的原则

创建吸引人的、高效的用户体验的方法被称为以用户为中心的设计。其思想在于：在开发产品的每一个步骤中，都要把用户列入考虑范围。

4.2 用户体验的要素

4.2.2 表现层表现层是最直观的。 打开一个 APP,你看到的所有形状、文字、色彩都属于这一层面。 表现层决定了用户的第一印象，同时可以通过形状大小、字体大小、颜色深浅等因素来影响用户感知，已达到设计目的。

4.2.3 框架层在表现层之下，框架层体现了页面的结构和布局，例如 banner 的位置、按钮的位置。好的设计就是当用户需要的时候他恰巧就在那里。

页面布局要符合用户习惯，比如将重要信息放在最佳视域（当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上，左下，而右下最差。 因此，左上部和上中部被称为“最佳视域”）。举一个经典例子：一个新的小区刚刚建成，小区外面有一大片草坪，设计师没有急着修路，而是等待。 过了一阵子，草坪被踩出了一条条路，设计师根据这些路为基础进行修路。这个例子也充分体现了“以用户为中心”的思想。

4.2.4 结构层结构层相对于框架层较为抽象，我们可以将他理解为“联接”. 框架层是针对于单页面的结构设计， 而结构层则是将单页面连接在一起，从而形成了系统。 拿 APP 举例，框架层决定了你点击页面 icon 或按钮后页面跳转到了哪一页。 通过删除、组织、隐藏和转移，将复杂的结构变的简单化，也是提高用户体验的重要手段。

4.2.5 范围层范围层可以理解为产品的功能及特性。 比如微信可以聊天、查看朋友圈、发红包等。范围层一般是由需求决定，需求则是从用户中分析提炼而来。 试想一个毫无用处的产品，有人会去下载吗？ 所以，如何分析提取用户需求，将需求转化为功能，也变得至关重要。

4.2.6 战略层成功的用户体验，其基础是一个被明确表达的“战略”. 知道企业与用户双方对产品的期许和目标，有助于确立用户体验各方面战略的制定。例如微信的定位是熟人社交，而陌陌则是陌生人社交，两个不同的定位解决了用户不同的需求。

在一个实际的产品开发中， 战略层及范围层主要由产品经理负责，而结构层和框架层则由交互设计师来完成，表现层由视觉设计师完成。特别注意的是，五个层次并不是相互独立的，每个层次都会向上或向下辐射，相互影响和完善，工作亦是如此。比如在交互设计阶段前期，交互设计师需要协助产品经理完善场景剧本，从场景中提取功能，确定优先级。

5 总结

经过近些年的发展，很多公司已经开始明确 UI 设计的重要性，UI设计也从只重技术不重设计转变为二者兼顾。 一个网站，在能够准确表达它要传达的意思的同时，需要给使用者良好的视觉感受和用户体验。因此，只有将技术和设计、良好的互动体验效果结合起来才能达到更好的效果，实现更合理的人机交互。一款舒适美观的界面，能给使用者带来舒适的视觉感受与用户体验，是科学技术与艺术设计相结合的产物。 一个网站设计是否成功，不外乎是最终用户的使用感受，而 UI设计就是为了实现这些易用、直观、和谐、美观的目的而服务的，目的就是设计出更加合理的人机交互界面，从而 UI 设计的价值。 因此，UI设计不仅是一种创意，更是一种科学性的艺术。