UI设计师

1、设计基础

1.什么是设计？

有目的地策划。

2.哪些属于设计范畴？

平面设计、软件设计、工业设计、概念设计、产品设计。

3.用户界面（UI）设计是什么？

• 界面设计即针对电子产品界面的设计，是一个复杂的有不同学科参与的工程。
• 是指对软件人机交互，操作逻辑、界面美观的整体设计。

4. 界面设计三大原则

1. 置界面于用户掌控之下。
2. 减少用户的记忆负担。
3. 保持界面的一致性。

5.用户界面设计的组成部分

结构设计、交互设计、视觉设计。

6.结构设计的分类

网页和系统结构设计。

7.什么是交互设计

• 交互设计的目的是使产品让用户能简单使用。
• 用户的动作，页面有响应。

8.用户界面（UI）设计工作流程

需求调研→模块分析→结构设计→交互设计→视觉设计→界面级源代码→维护和测试。

9.用户界面（UI）设计的发展方向

系统架构师、交互设计师、测试工程师、视觉设计师

 

2、UI设计常识

1.UI是哪两个单词的简称

User Interface(用户界面)

2.什么是VI系统

• 全称Visual Identity,即企业视觉识别系统，是企业文化宣传的重要组成部分。企业用于在各种急速膨胀的媒体、多种的传播途径、大量繁杂的信息中凸显个性和身份，用于区别其他企业的视觉方面的识别系统。
• 企业视觉识别系统，是企业文化宣传的重要组成部分。

3.VI设计原则包括？

同一性，差异性，文化性，有效性。

4.VI系统包含哪两部分

• 标志、标准字、标准色、标志和标准字的组合。
• 基础要素系统、应用系统。

5.对于logo的合法的两种更改

1. 将LOGO和文字的组合等比例缩放
2. 将LOGO和文字的组合变成白色（返白）

6.色彩模式有哪两种

RGB模式：适用与显示器、投影仪、扫描仪、数码相机等
CMYK模式：适用于打印机、印刷机等

7.图片格式有哪两种？

位图、矢量图

8.两种图片格式的特点是？

位图：不可无限放大，像素高，UI常用
矢量图：可无损耗无限放大，印刷品常用

9.两种图片格式分别常用的扩展名为？

位图（*.jpg、*.gif、*.png）矢量图（*.ai、*.eps、*.cdr）

10.可用性设计体现在哪三个方面

布局内容、使用人性化、美观

11.常用到的网络资源有

图片、小图标、文字、代码、音乐、动画、其他

12.客户交流时的注意事项

1. 你永远比客户专业
2. 永远要保持礼貌
3. 要让客户知道你做了哪些工作

 

三、UI设计流程

1.前期需求阶段，UI设计所需要考虑的四个问题

1. 需求分析
2. 栏目排版
3. 色彩搭配
4. 风格设计

2.UI设计在需求分析阶段需要注意的问题？

1. 网站制作目标
2. 网站所处行业
3. 网站包含内容
4. 网站使用人群
5. 其他

3.在栏目排版时，首页内容通常包含哪些部分？

1. 主题栏：包括LOGO、banner
2. 更新栏：新闻内容、信息等
3. 指南栏：导航条、搜索栏、网站地图等
4. 交流栏：网站统计、留言板等
5. 广告栏：广告发布等

4.色彩搭配时需要注意的问题

1. 红色系、橙色系、黄色系、绿色系、蓝色系、紫色系、黑白系
2. 网站所处的企业是否有企业色
3. 企业所处的行业

5.中期设计阶段需要做的工作有哪些？

• 设计工具选择
• 设计制作
• 布局方式
• 样式定义
• 交流沟通

6.设计效果图时需注意的问题？

1. 尽量多用可循环较小的背景图，少用整张大图。
2. 尽量多用填充色，少用图片
3. 尽量多用系统字体，少用特殊字体
4. 大面积使用的颜色尽量不超过3个色系

7.前端页面的设计中，html、css和javascript分别的作用是？

1. html的作用是控制页面的内容和结构
2. css的作用是控制页面的样式
3. javascript的作用是控制页面的行为

[/vc_toggle][vc_toggle title=”UI网页设计相关知识” style=”simple” css_animation=”flipInX”]

一.

1.网页设计包含哪三方面

1. 页面规划
2. 页面元素
3. 页面交互

2.页面规划包含哪三方面

1. 尺寸
2. 栏目
3. 布局

3.页面规划的尺寸为设计系统界面设计，取决于？

• 用户的显示设备
• 显示设备

4.自动适应占满所有宽度空间，一般用于？

后台管理

5.栏目设计包含哪两部分

1. 确定栏目内容
2. 确定栏目形式

6.栏目内容分为几部分，分别是什么？简述

三部分：
1. 顶部（头部）网页的脸：含有特征元素，含有能与其他网站相区别的信息
2. 正文—网页的躯干：包含网页需要显示的大部分内容
3. 底部—网页的脚：包含网页的版权、审批、声明等信息及辅助栏目

7.页面顶部一般都包含哪三部分

1. LOGO
2. 导航栏
3. banner

8.确定栏目形式的宗旨为？

• 标题、列表、超链接文本的位置形式安排要很好地表达出栏目的功能和想展示的东西。
• 要很好地表达出栏目的功能和想展示的东西。

 

二.

 

1.浏览网页时，一般遵循（F）-型的视觉路线

2.通常在做页面设计之前，会做页面原型图。

3.简述页面原型图

一个页面的元素和栏目以及栏目的展现方式和摆放位置。

4.色彩基本上可以分为（7）个色系

5.简述7个色系。

1. 红色系：多用于政府、婚庆、餐饮等网站
2. 橙色系：多用于家居、动漫、儿童用品等网站
3. 黄色系：多用于商业、金融等网站
4. 绿色系：多用于医疗、农业、保险等网站
5. 蓝色系：多用于科技、电器、信息等网站
6. 紫色系：多用于美容、女性等网站
7. 黑白色系：多与其他颜色混合使用

6.简述配色忌讳

1. 忌脏：背景与文字内容对比不强烈，灰暗的色彩令人沮丧
2. 忌纯：艳丽的纯色对人的刺激太强烈，缺乏内涵
3. 忌跳：再好看的颜色，也不能脱离整体
4. 忌花：要有一种主色贯穿其中，主色并不时面积最大的颜色，而是最重要，最能揭示和反映主题的颜色
5. 忌素：颜色浅固然很干净，但如果对比过弱，整的苍白无力
6. 蓝色忌纯，绿色忌黄，红色忌艳
7. 配色宗旨：
8. 相邻色
9. 补色

 

三.

 

1.简述网页设计风格

1. 欧美风格：欧美国家管用的设计风格，一类简洁明了、色彩单一、一类构图复杂、色彩浓烈
2. 韩国风格：韩国惯用的界面设计，色彩清爽、多用蓝、绿色、多用大图片、渐变色、人物和卡通矢量图
3. 中国风风格：具有中国古典设计，古色古香，以具有中国特色的花纹或图案来装饰
4. web2.0风格：近几年来国际流行的设计风格
5. 简单设计：大面积留白和更少内容 更大和更多样的标题文字
6. 醒目简洁的LOGO
7. 渐变
8. 集中的布局
9. 更少的分栏
10. 分割头部
11. 简单明了的导航
12. 水晶图标
13. 倒影
14. 标签或价格签
15. 灰色的文字
16. 扁平化风格：核心意义：去除冗余、厚重和繁杂的装饰效果
17. 去掉特效
18. 极简的元素
19. 有意义的图标
20. 更多圆角
21. 中性的颜色
22. 鲜明的对比
23. 简洁的字体
24. 善用灰色

2.LOGO的细节要求？

LOGO：不可随意变色、拉伸、模糊、更改

3.图片选取的细节要求？

图片：不可模糊、变形、质量低下、带背景颜色

 

四.

 

1.交互三要素？

1. 统一
2. 醒目
3. 便利

2.统一指哪些方面？

1. 风格统一
2. 导航统一
3. 操作统一

3.风格指哪些方面

1. 颜色
2. 图标
3. 整个设计的样式
4. 整个设计的版式

4.导航的统一指的是哪些方面的统一？

1. 设计的样式统一
2. 内容的内容统一
3. 摆放的位置统一

5.醒目主要指的哪三方面？

1. 文字
2. 信息
3. 功能

 

五.

 

1.便利性可从几点讨论？

1. 导航
2. 搜索
3. 文字
4. 指示标与面包屑
5. 反馈
6. 控件
7. 扩展和维护
8. 广告

2.搜索文本框中要有

信息的提示

3.放在（ 首页）的内容一定要是最能吸引人的、最有特色的

4.指示标是？其作用？

• 具有指示性的标志，作用是它能告诉用户当前所处的位置。
• 告诉用户当前所处的位置。

5.什么是面包屑？面包屑的作用：

• 具有指示性的路径。

1.  让用户了解当前所处位置，以及当前页面在整个网站中的位置。
2. 体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感
3. 提供返回各个层级的快速入口，方便用户操作。
4. Google已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名称，多使用关键字，都可以实现SEO优化。面包屑路径，对于提高用户体验来说，是很有帮助的。
5. 方便用户，面包屑主要用于为用户提供导航一个网站的次要方法，通过为一个大型多级网站的所有页面提供面包屑路径，用户可以更容易的定位到上一次目录，引导用户通行;
6. 减少返回到上一级页面的点击或操作，不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面;
7. 不用常常占用屏幕空间，因为它们通常是水平排列以及简单的样式，面包屑路径不会占用页面太多的空间。这样的好处是，从内容过载方面来说，他们几乎没有任何负面影响;
8. 降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说，一个用户通过谷歌搜索到一个页面，然后看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样，从而，可以降低网站的总体跳出率。
9. 有利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便。
10.  面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接，提高用户体验。

6.什么是级联菜单？

具有多个层级的菜单，每个级别的菜单有与之相关联的子级菜单。

7.级联菜单的好处？

• 使用方便，查找明确。
• 获取信息

 

六.

 

1.好的网页的标准?

• 浏览者很明确的知道这是什么网站，这个网站上面有什么，能在这个网站上做什么，为什么要在这个网站。

2.合格的网页是什么，具有哪些特点？

1. 美丽舒适的风格
2. 高效的导航
3. 符合大众习惯的布局
4. 简洁的操作
5. 及时的反馈
6. 明确的标注和指示
7. 拥有吸引人的元素
8. 良好的可维护性和扩展性

• 如何判定你的网页是否好 从用户角度反馈是否可以快速回答以下四个问题
  + 这是什么网站
  + 网站上有什么
  + 我能在这个网站上做什么
  + 为什么我应该在这里

3.（高效的导航栏 ）是设计时最为用心的地方，把网页很好的连接起来，用户使用起来会更加方便.

4.举出几个有关网页设计的网站：

1. 站酷
2. 花瓣
3. 千库

 

网易

1. 首页三部分： -顶部：logo、导航栏、banner广告图片 -正文：新闻、科技、财经等内容 -底部：许可证、安全管理等
2. 风格：感觉符合欧美风格。
3. 文字醒目（加黑、加粗、加大），信息，广告等比较醒目。
4. 符合人们浏览网页时的F型视觉路线。
5. 内容的排版整齐有序，用户用时方便，体现了其便利性

 

Icon搜索

http://www.iconpng.com/
1. 页面简洁大方，具有多种文字链接，链接排列顺序工整
2 .页面主要采用多种色系结合，具有鲜艳的质感
3. 页面主要采用欧美风格，构图简单 ，没有繁琐感
4. 高效导航，具有良好的扩展性和可维护性
5. 界面居中，正文即包含网页的主要内容

 

雪梨教育UI分析

1. 内容丰富
2. 导航栏设计合理，清晰明了
3. 滚动栏明显，引人注目
4. 页面颜色搭配合理
5. LOGO明显，整洁
6. 搜索功能强大

 

中国建设银行官网

1. 头部的导航栏采用伸缩菜单，是用户更方便找到自己所要解决的问题
2. 头部的logo很明确，logo后有级联菜单方便用户选择自己所处城市
3. 网站色系为蓝色系
4. 页面风格为韩国风格，色彩清爽
5. 栏目形式简单，交互风格统一

 

中国联通官网

1. 头部logo醒目，导航栏内容明确
2. 网站整体没有凸显主色调
3. 网页栏目形式采用图片超链接文字
4. 正文内容包含了网页更新、广告
5. 底部页脚部分表明了版权和辅助栏目

 

中国移动官网

1. 导航栏logo醒目，采用级联菜单选择用户所在城市，banner部分为广告
2. 网页风格采用扁平化风格，简单明了
3. 没有明确的色系
4. 正文部分内容多为广告，布局采用F型视觉路线
5. 栏目形式为标题、图片超链接