UI设计的流程

1.用户界面设计需求分析

使用需求问卷的形式与客户充分沟通，充分了解他们对用户界面设计的需求。

2.确认界面效果图

根据与客户达成的意见和技术人员的设计思路，完成用户界面效果图设计，并最终得到客户的确认。

3.收集材料

在确认界面首页的效果图后，我们将开始围绕主题收集资料。俗话说，“巧妇难为无米之炊”为了使计划的界面对用户有吸引力，有必要尽可能多地收集材料。收集的资料越多，将来设计用户界面就越容易。

4.用户界面规划

4.1结构

(1)列

专栏的本质是网站的大纲索引。索引应该清楚地显示网站的主体。制作栏目时，要慎重考虑，合理安排。

1)仅设计与主题相关的栏

2)尽可能在栏目中列出网站中最有价值的内容

3)可以从访问者的角度安排栏目，方便他们浏览和查询。

(2)论坛

板大于柱的概念。每个盘子都有自己的柱子。

1)每个板块应该相对独立

2)每个板块应该相互关联

3)每个部分的内容都应该围绕网站主题

(3)目录结构

1)不要将所有文件存储在根目录下

2)根据列内容创建子目录

3)在每个主目录下建立一个独立的图像目录

4)根据列内容创建子目录。在每个子目录下创建一个独立的图像目录

5)目录的级别不应太深，也不应超过3级。

6)不要使用中文目录

7)不要使用太长的目录

8)尝试使用含义明确的目录。

(4)链接结构

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

1)树形结构(一对一):

第一个页面链接指向第一级页面，第一级页面链接指向第二级页面。浏览时，一级入口和一级出口相对清晰。访问者清楚地知道他们在哪里，但是浏览效率很低。如果一列下的子页面转到另一列下的子页面，它必须返回到主页。

2)星形结构(一对多):

每个页面都有相互链接。此浏览将再次进行。它更方便，你可以随时到达你喜欢的页面。然而，由于链接太多，很容易迷失，不知道你在哪里，你读了多少。

3)混合结构(1和2):

在第一级页面和第一级页面之间使用星形链接结构，在第一级页面和第二级页面之间使用树形链接结构。

(5)形象设计

1)设计网站标志:

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

2)设计网站字体:

标准字体是指用于徽标、标题和主菜单的特殊字体。

仅在图片形式中使用非默认字体；

3)设计网站颜色:

“标准颜色”是指能够反映网站形象并延伸其内涵的颜色。它应该用于网站的标志、标题、主菜单和主色块。

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

4)设计网站口号:

网站的精神、主题和中心，或者网站的目标，都用一句话或一个词高度概括。

4.2设置

好的内容选择需要好的创造力。作为一名网页设计师，最令人烦恼的是没有好的内容创意。互联网上最有创意的想法来自虚拟和现实的结合。创意的目的是为了更好地宣传和推广网站。如果创意是好的，但对网站发展毫无意义，那么网站设计师也应该放弃创意。

此外，主页的内容是网站的基础。如果内容为空，即使页面制作精美，也不会有很多用户。从根本上说，网站内容仍然控制着网站流量，内容仍然是个人网站成功的关键。

4.3风格

(1)“风格”是抽象的，是指网站的整体形象对观众的整体感受；

(2)“整体形象”包括网站的CI(标识、颜色、字体、口号)、布局、浏览风格、互动性、文字、色调、内容价值等诸多因素；

(3)风格是人性化的，通过网站的色彩、技术、文字、布局、互动

这种方法可以概括一个网站的个性:豪放、清新、美丽；是温柔还是热情？它是活泼多变的，还是墨守成规的？

4.4颜色匹配

网页的色彩原则和象征意义:对于大型商业网站，你会发现他们使用白色、蓝色、黄色等。更重要的是，让网页看起来优雅、大方和温暖。更重要的是，这可以大大加快网页打开的速度。

一般来说，网页的背景颜色应该更柔和、更素净、更淡，用深色的文字使人看起来更自然和詹妮弗。为了追求醒目的视觉效果，标题可以使用较暗的颜色。

红色:热情、奔放、快乐、庄严；

黄色:高贵、丰富、灿烂、活泼；

黑色:严肃，夜晚，平静；

白色:纯净、简单、干净；

蓝色:天空，清新，科技，希望；

绿色:植物、生命、活力、自然和健康；

灰色:庄严、平静、大气；

紫色:浪漫、丰富、优雅；

棕色:泥土和厚朴；……

4.5布局

(1)“T”型结构布局:

所谓“T”结构是指页面顶部是一个横条网站标志+广告条，左侧下方是主菜单，右侧显示内容的布局。因为菜单栏有很深的背景，整体效果类似于英文字母“T”，我们称之为“T”布局。

这是网页设计中最广泛使用的布局。

优点:页面结构清晰，主次分明。对于初学者来说，这是最简单的布局方法。

缺点:规则不灵活。如果你不注意细节和颜色，很容易让人“无味”。

(2)“口”布局:

这是一个象形的语句，即在页面的顶部和底部有一个广告栏，左侧是主菜单，右侧是友情连接等。，中间是主要内容。

优点:它充分利用了布局和大量的信息(我的主页的第一页属于这个布局)。

缺点:页面拥挤且不灵活。也有这样的设计，四面是空的，只使用中间的窗户。

(3)“三”布局:

这种布局主要用于国外网站，但不用于国内网站。它的特点是页面上有三个水平色块，将整个页面分成四个部分。大多数颜色块包含广告条。

(4)持久性有机污染物布局:

波普引用了广告术语，这意味着页面布局就像一张宣传海报，页面的设计中心是一幅美丽的图画。

常用于时尚网站，如ELLE.com。

优点:显而易见:有吸引力和吸引力。

缺点:速度慢。

作为一种布局，它值得学习。

(5)最新的响应布局:

响应性布局相对较新。浏览兼容性技术要求高；不兼容的ie9 -以下浏览器

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

优点:多设备支持。

缺点:低版本浏览器兼容性差。

4.6风格控制

(1)图片用文字标注；

(2)图片的颜色尽可能符合网站的整体色调；

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

4.7制造工具

Photoshop+Dreamweaver+Html+CSS

崇高+Html5+CSS3

4.8规划和设计

(1)先大后小:制作网页时，先设计大结构，然后逐步完善小结构。

(2)从简单到复杂:首先设计简单的内容，然后设计复杂的内容，这样问题就可以很容易地得到纠正。

(3)模板的使用:在制作网页时，更灵活地使用模板可以大大提高生产效率。