最新UI设计流程是什么

1、UI界面设计需求分析

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

　　2、确认UI界面效果图

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

　　3、搜集材料

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

　　4、UI界面规划

　　4.1结构

　　（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”结构布局:

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

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

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

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

　　（2）"口"型布局:

　　这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。

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

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

　　（3）“三"型布局:

　　这种布局多用于国外站点，国内用的不多。特点是页面 上横向三条色块，将页面整体分割为四部分，色块中大多放广告条。

　　（4）POP布局:

　　POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。

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

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

　　缺点：就是速度慢。

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

　　（5）最新响应式布局:

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

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

　　优点：多设备支持。

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

　　4.6样式控制

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

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

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

　　4.7制作工具

　　Photoshop+Dreamweaver+Html+CSS

　　Sublime+Html5+CSS3

　　4.8规划设计

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

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

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