曷决仙喁UI界面设计需求分析
采用需求调查表的形式，充分与客户沟通，全面了解客户对UI界面设计方面需求。
确认UI界面效果图
根据与客户达成意见，结合技术人员的设计思路，完成UI界面效果图设计，并最终由客户确认。
搜集材料
确认了界面首页效果图之后，就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让规划的界面够吸引住用户，就要尽量搜集材料，搜集得材料越多，以后设计UI界面就越容易。
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(CascadingStyleSheet)样式表规范网站字体大小；
4.7制作工具
Photoshop+Dreamweaver+Html+CSS
Sublime+Html5+CSS3
4.8规划设计
（1）先大后小：在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。
（2）从简到繁：先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。
（3）运用模板：在制作网页时要多灵活运用模板，这样可以大大提高制作效率。