界面设计流程是什么？界面设计具体方法介绍

采用需求调查表的形式，充分与客户沟通，全面了解客户对UI界面设计方面需求。

2、确认UI界面效果图

根据与客户达成意见，结合技术人员的设计思路，完成UI界面效果图设计，并最终由客户确认。

3、搜集材料

确认了界面首页效果图之后，就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让规划的界面够吸引住用户，就要尽量搜集材料，搜集得材料越多，以后设计UI界面就越容易。

4、UI界面规划

4.1结构

（1）栏目

栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。

2）尽可能将网站内最有价值的内容列在栏目上

3）可能从访问者角度来编排栏目以方便访问者的浏览和查询

（2）版块

板块比栏目的概念要大些，每个版块都有自己的栏目。

1）各板块要有相对独立性

2）各板块要有相互关联

3）各板块的内容要围绕站点主题

（3）目录结构

1）不要将所有文件都存放在根目录下

2）按栏目内容建立子目录

3）在每个主目录下都建立独立的Images目录

4）按栏目内容建立子目录在每个子目录下都建立独立的Images目录

5）目录的层次不要太深，不要超过3层

6）不要使用中文目录

7）不要使用过长的目录

8）尽量使用意义明确的目录

（4）链接结构

网站的链接结构是指页面之间相互链接的拓扑结构。

1）树状结构（一对一）：

首页链接指向一级页面，一级页面链接指向二级页面。浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，但浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行。

2）星形结构（一对多）：

每个页面相互之间都建立有链接。这样浏览再进行。比较方便，随时可以到达自己喜欢的页面。但是由于链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。

3）混合型结构（1和2）：

首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。

（5）形象设计

1）设计网站标志(LOGO)：

标志的设计创意应当来自网站的名称和内容；

2）设计网站字体：

标准字体是指用于标志、标题、主菜单的特有字体。

使用非默认字体只能用图片的形式；

3）设计网站色彩：

“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志、标题、主菜单和主色块。

一个网站的标准色彩不超过3种，适合于网页标准色的颜色有:蓝色，黄/橙色，黑/灰/白色三大系列；

4）设计网站宣传语：

网站精神、主题与中心，或是网站的目标，用一句话或一个词来高度概括.

界面设计流程（图片来自网络）

4.2设置

另外，主页内容是网站的根本之所在，如果内容空洞，即使页面制作地再怎样精美，仍然不会有多少用户。从根本上说，网站内容仍然左右着网站流量，内容为王依然是个人网站成功的关键。

4.3风格

（1）“风格”是抽象的，是指站点的整体形象给浏览者的综合感受；

（2）“整体形象”包括站点的CI(标志，色彩，字体，标语)、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素;

（3）风格是有人性的，通过网站的色彩、技术、文字、布局、交互

方式可以概括出一个站点的个性:是粗犷豪放的，还是清新秀丽的;是温文儒雅的，还是执著热情的;是活泼易变的，还是墨守成规的。

4.4色彩搭配

网页颜色原理和象征意义：大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。

一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。

红色：热情、奔放、喜悦、庄严；

黄色：高贵、富有、灿烂、活泼；

黑色：严肃、夜晚、沉着；

白色：纯洁、简单、洁净；

蓝色：天空、清爽、科技、希望；

绿色：植物、生命、生机、自然、健康；

灰色：庄重、沉稳、大气；

紫色：浪漫、富贵、高雅；

棕色：大地、厚朴；……

4.5版面布局

（1）“T”结构布局:

这是网页设计中用的最广返的一种布局方式。

优点：是页面结构清晰，主次分明。是初学者最容易上手的布局方法。

缺点：是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

（2）"口"型布局:

优点：是充分利用版面，信息量大(我的主页首页即属于这种布局)。

缺点：是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计。

（3）“三"型布局:

（4）POP布局:

常用于时尚类站点，比如ELLE.com。

优点：显而易见:漂亮吸引人。

缺点：就是速度慢。

作为版面布局还是值得借鉴的。

（5）最新响应式布局:

响应式布局是比较新的东西。技术上对浏览兼容性要求高；不兼容ie9--以下浏览器

常用于时尚类站点，手机、ipad、电脑多设备支持。

优点：多设备支持。

缺点：低版本浏览器兼容性不好。

4.6样式控制

（1）图片使用文字作注解；

（2）图片色彩尽量符合网站整体色调；

（3）使用CSS(CascadingStyleSheet)样式表规范网站字体大小；

4.7制作工具

Photoshop+Dreamweaver+Html+CSS

Sublime+Html5+CSS3

4.8规划设计

（1）先大后小：在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。

（2）从简到繁：先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。

（3）运用模板：在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

以上是小编为大家整理的界面设计流程资料，相信大家在看完之后也清楚了吧，做好界面设计才可以保证界面更美观，希望本文对你有所帮助。