那些精美的Ui界面设计的工作内容和流程是怎么样的?

Ui界面设计对于设计而言是一项非常重要的工作，Ui界面设计过程中有很多需要注意的地方，通常需要按照流程进行设计和安排,Ui界面设计流程是怎样的？我们一起来看看。

1、Ui界面设计需求分析

使用需求问卷的形式，或者与客户电话/见面充分的沟通，充分了解客户对产品体验ui界面设计的要求。

2、收集资料和素材

在确认了界面首页的渲染之后，就要开始围绕主题收集素材了，俗话说“巧妇难为无米之炊”，想要规划的界面吸引用户，就要尽可能多的收集素材，收集的资料和素材越多，以后设计UI界面效果就越好，工作也越高效。

3、确认UI界面规划和效果设计

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

详细分解UI界面规划流程：

A、结构布局：索引要清晰地展现产品/网站的主体架构。

1)与主题相关的栏目。

2)尽可能列出产品/网站中最有价值的内容

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

B、界面：每个界面都有自己的调性。

1)每个界面应具有相对独立性的风格调性

2)每个板块要相互关联延续风格

C、链接：产品/网站的链接结构是指页面之间相互链接的拓扑结构

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

第一级页面链接指向第一级页面，第一级页面链接指向第二级页面。浏览时，一级进入，一级退出，顺序明确，访问者确切知道自己在哪里，但浏览效率较低。在转到另一列下的子页面之前，一列下的子页面必须回到第一页。

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

每一页都是相互链接的。再这样浏览。方便，随时可以到达自己喜欢的页面。但是因为链接太多，很容易让访问者迷失方向，搞不清自己在哪里，看了多少。

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

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

(5)形象设计。

D、LOGO:logo的设计思路要来源于网站的名称和内容

1)设计字体:

标准字体是指用于徽标、标题和主菜单的独特字体，仅使用图片形式的非默认字体；

2)设计颜色:

“标准色”是指能够反映网站形象和延伸内涵的颜色，应当用于网站的logo、标题、主菜单和主色块，一个产品/网站的标准颜色不超过三种，适合网页标准颜色的颜色有:蓝色、黄色/橙色、黑色/灰色/白色；

3)设计口号:

网站的精神、主题和中心，或者说网站的目标，都是用一句话或者一句话高度概括的。好的内容选择需要好的创意。作为一个网页设计师，最苦恼的是没有好的内容创意。互联网上最有创意的创意来自于虚拟与现实的结合。创意的目的是为了更好的宣传推广网站。如果创意不错，但对网站的发展没有意义，那么网站设计师也应该放弃这种创意。

另外，首页的内容是网站的核心聚合，如果没有什么内容，再漂亮的页面也不会有多少用户停留观看，从根本上说，网站内容仍然影响网站流量，丰富的信息内容仍然是个人网站成功的关键。

E、风格

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

(2)“整体形象”包括CI(logo、颜色、字体、标语)、版面、浏览方式、互动性、文字、色调、内容价值等诸多因素。

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

方式可以概括一个站点的个性:是豪放，还是清新优美；是温柔，还是执着的热情；是活泼多变，还是因循守旧？

F、配色

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

一般来说，产品/网站的背景颜色应该更柔和、更素净、更轻盈，并配以深色文字，让人看起来自然、珍妮弗。为了追求引人注目的视觉效果，可以使用较暗的颜色作为标题。

G、布局
(1)"t"型结构布局:

所谓“T”型结构，是指页面顶部为横向网站logo+广告栏，底部左侧为主菜单，右侧显示内容的布局。因为菜单栏背景深，整体效果类似英文字母“T”，所以我们称之为“T”布局。

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

缺点:规则不灵活。如果不注重细节，很容易让人“看起来没味道”。

(2)"口"型布局:

这是一个象形的说法，即页面上下各有一个广告栏，左边是主菜单，右边是友情链接，中间是主要内容。

优点:充分利用布局，信息量大(我的主页就属于这种布局)。

缺点:页面拥挤，不灵活。还有窗户设计，四面空着，只用中间。

(3)“三”布局:

这种布局多用于国外产品/网站，国内没有。它的特点是页面上有三个水平色块，将整个页面分成四个部分，大部分色块都用广告条填充。

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

POP引用自广告用语，意思是页面布局像一张海报，以一张美丽的图片作为页面的设计中心，常用于时尚网站，

优点:显而易见:漂亮迷人。

缺点:速度慢。

作为布局，值得学习。

(5)最新响应布局:

响应性布局是一个相对较新的东西。对浏览兼容性的技术要求高；与ie9-以下浏览器不兼容。常用于时尚网站，手机，ipad，电脑，多设备支持。

优点:支持多设备。

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

H、风格控制

(1)图片用文字标注；

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

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

I、制造工具

Photoshop+Dreamweaver+Html5+CSS

J、规划设计

(1)先大后小:制作产品/网站时，先设计大结构，再逐步完善小结构设计。

(2)从简单到复杂:先设计简单的内容，再设计复杂的内容，以便出现问题时修改。

(3)制定规范:设计产品/网站时，要注意生成和灵活使用控件，这样可以大大提高设计的效率。

以上从几个不同维度分析和梳理了那些精美的Ui界面设计的工作内容和流程，当然还有UI界面设计的7个设计准则，不同的项目根据其结构和内容的不同，设计流程也不相同，最适合的就是最高效的，而不是最全的，我们希望带给客户最优的企业线下设计服务解决方案。