1、UI界面设计需求分析
采用需求调查表的形式，充分与客户沟通 ， 全面了解客户对UI界面设计方面需求 。
2、确认UI界面效果图
根据与客户达成意见，结合技术人员的设计思路，完成UI界面效果图设计，并最终由客户确认 。
3、搜集材料
确认了界面首页效果图之后，就要围绕主题开始搜集材料了 。常言道：“巧妇难为无米之炊” 。要想让规划的界面够吸引住用户，就要尽量搜集材料，搜集得材料越多，以后设计UI界面就越容易 。
4、UI界面规划
4.1结构
?。?）栏目
栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来 。在制定栏目的时候，要仔细考虑，合理安排 。
1）只设计与主题相关的栏目
2）尽可能将网站内最有价值的内容列在栏目上
3）可能从访问者角度来编排栏目以方便访问者的浏览和查询
?。?） 版块
板块比栏目的概念要大些，每个版块都 有自己的栏目 。
1）各板块要有相对独立性
2）各板块要有相互关联
3）各板块的内容要围绕站点主题
?。?） 目录结构
1）不要将所有文件都存放在根目录下
2）按栏目内容建立子目录
3）在每个主目录下都建立独立的Images目录
4）按栏目内容建立子目录在每个子目录下都建立独立的Images目录
5）目录的层次不要太深，不要超过3层
6）不要使用中文目录
7）不要使用过长的目录
8）尽量使用意义明确的目录
?。?） 链接结构
网站的链接结构是指页面之间相互链接的拓扑结构 。
1）树状结构（一对一）：
首页链接指向一级页面，一级页面链接指向二级页面 。浏览时，一级级进入，一级级退出，条理比较清晰，访问者明确知道自己在什么位置，但浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须回到首页再进行 。
2）星形结构（一对多）：
每个页面相互之间都建立有链接 。这样浏览再进行 。比较方便 ， 随时可以到达自己喜欢的页面 。但是由于链接太多，容易使浏览者迷路 ， 搞不清自己在什么位置，看了多少内容 。
3）混合型结构（1和2）：
首页和一级页面之间用星状链接结构 ， 一级和二级页面之间用树状链接结构 。
?。?） 形象设计
1）设计网站标志(LOGO)：
标志的设计创意应当来自网站的名称和内容；
2）设计网站字体：
标准字体是指用于标志、标题、主菜单的特有字体 。
使用非默认字体只能用图片的形式；
3）设计网站色彩：
“标准色彩”是指能体现网站形象和延伸内涵的色彩 ， 要用于网站的标志、标题、主菜单和主色块 。
一个网站的标准色彩不超过3种，适合于网页标准色的颜色有:蓝色，黄/橙色 ， 黑/灰/白色三大系列；
4）设计网站宣传语：
网站精神、主题与中心，或是网站的目标，用一句话或一个词来高度概括.
4.2设置
好的内容选择需要有好的创意，作为网页设计制作者 ， 最苦恼的就是没有好的内容创意 。网络上的最多的创意即是来自于虚拟同现实的结合 。创意的目的是为了更好的宣传与推广网站，如果创意很好，却对网站发展毫无意义 ， 那么，网站设计制作者也应当放弃这个创意 。
另外，主页内容是网站的根本之所在，如果内容空洞 ， 即使页面制作地再怎样精美 ， 仍然不会有多少用户 。从根本上说，网站内容仍然左右着网站流量，内容为王依然是个人网站成功的关键 。
4.3风格
?。?）“风格”是抽象的 ， 是指站点的整体形象给浏览者的综合感受；
?。?）“整体形象”包括站点的CI(标志，色彩，字体 ， 标语)、版面布局、浏览方式、交互性、文字、语气、内容价值等等诸多因素;
?。?）风格是有人性的，通过网站的色彩、技术、文字、布局、交互
方式可以概括出一个站点的个性:是粗犷豪放的，还是清新秀丽的;是温文儒雅的，还是执着热情的;是活泼易变的 ， 还是墨守成规的 。
4.4色彩搭配
网页颜色原理和象征意义：大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨 。更重要的是，这样可以大大加快浏览者打开网页的速度 。
一般来说 ， 网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅 。而为了追求醒目的视觉效果，可以为标题使用较深的颜色 。
红色：热情、奔放、喜悦、庄严；
黄色：高贵、富有、灿烂、活泼；
黑色：严肃、夜晚、沉着；
白色：纯洁、简单、洁净；
蓝色：天空、清爽、科技、希望；
绿色：植物、生命、生机、自然、健康；
灰色：庄重、沉稳、大气；
紫色：浪漫、富贵、高雅；
棕色：大地、厚朴；……
4.5版面布局
?。?）“T”结构布局:
所谓“T”结构，就是指页面顶部为横条网站标志 广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母“T”,所以我们称之为“T”形布局 。
这是网页设计中用的最广返的一种布局方式 。
优点：是页面结构清晰，主次分明 。是初学者最容易上手的布局方法 。
缺点：是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味" 。
?。?）"口"型布局:
这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容 。
优点：是充分利用版面，信息量大(我的主页首页即属于这种布局) 。
缺点：是页面拥挤 ， 不够灵活 。也有将四边空出，只用中间的窗口型设计 。
?。?）“三"型布局:
这种布局多用于国外站点，国内用的不多 。特点是页面 上横向三条色块，将页面整体分割为四部分，色块中大多放广告条 。
?。?）POP布局:
POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心 。
常用于时尚类站点 ， 比如ELLE.com 。
优点：显而易见:漂亮吸引人 。
缺点：就是速度慢 。
作为版面布局还是值得借鉴的 。
?。?）最新响应式布局:
响应式布局是比较新的东西 。技术上对浏览兼容性要求高；不兼容ie9--以下浏览器
常用于时尚类站点，手机、ipad、电脑多设备支持 。
优点：多设备支持 。
缺点：低版本浏览器兼容性不好 。
4.6样式控制
?。?）图片使用文字作注解；
?。?）图片色彩尽量符合网站整体色调；
?。?）使用CSS(CascadingStyle Sheet)样式表规范网站字体大?。?
4.7制作工具
Photoshop Dreamweaver Html CSS
Sublime Html5 CSS3
4.8规划设计
?。?）先大后?。涸谥谱魍呈保劝汛蟮慕峁股杓坪? ，然后再逐步完善小的结构设计 。
?。?）从简到繁：先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改 。
【最新UI设计流程是什么】 ?。?）运用模板：在制作网页时要多灵活运用模板，这样可以大大提高制作效率 。
