第课UI界面设计
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
视频文件的采用使网页变得精彩而富有动感。视频文件的格式也非常多，常 见的有RM、MPEG和AVI等。
10.2 手机UI设计根底知识
现如今的社会移动设备已经成为人们生活娱乐的必需品之一，移动设备的用 户界面及体验越来越受到用户的关注。
10.2.1 手机UI设计的概念
UI的本意是用户界面，是英文User和 Interface的缩写。字面上看是用户与界 面两个组成局部，实际上还包括用户与界面之间的交互关系，如以下图所示。在 人和机器的互动过程〔Human Machine Interaction〕中，有一个层面，即我们所 说的界面〔Interface〕。从心理学意义来分，界面可分为感觉〔视觉、触觉、听 觉等〕和情感两个层次。用户界面设计是屏幕产品的重要组成局部。界面设计是 一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演 着重要的角色。用户界面设计的三大原那么是：置界面于用户的控制之下；减少 用户的记忆负担；保持界面的一致性。
无论是设计者还是移动平台都被推动着向动画式的用户界面设计的方向前进。 尽管手势在日常生活中并非什么新鲜玩意儿，但是要想恰当地、有意义地把他运用到 面向消费者的应用当中，对于设计者来说仍是一项挑战，因为他们平时习惯于墨守常 规，采用静态的框架来设计界面。而如果软件和产品研发采用新式的原型化及多学科 混合方法，创立出动态的、符合视觉和感觉习惯的原型，并就其进展沟通就会更加为 用户所承受。动画式设计赋予应用以更多的动态运动。跟好电影很类似的是，最关键 的局部往往是那些静态帧之间。
10.8 课后习题——科技类网页界面设计
本练习设计的是一款科技类网页界面，运用了分割画面的版式进展设计，将 图片处理成黑白的效果，然后在黑白的根底上添加简单形状的彩色素材图片，这 样给人的视觉效果就会格外突出，如以下图所示。
Thank You
谢谢！
10.1.1 网页设计的根本原那么
网页设计人性化理念主要围绕两点，即便利性〔Usability〕和差异化的独创性 〔Creativity〕，而根本原那么分为以下7点。
用户导向〔User oriented〕原那么。 KISS〔Keep It Simple And Stupid〕原那么。 布局控制。 视觉平衡。 色彩的搭配和文字的可阅读性。 和谐与一致性。 个如性右化图〔，符该合图网合络理文的化展，现塑了造以网上站根个性〕。 本原那么。
要对用户的操作命令做出反响，帮助用户处理问题。系统要设计有恢复 出错现场的能力，在系统内部处理工作要有提示，尽量把主动权让给用户。
多媒体界面的成功并不在于仅向用户提供丰富的媒体，而应在相关理论 指导下，注意处理好各种媒体间的关系，恰中选用。
10.2.3 手机UI设计的3大趋势
“少即是多〞—— 手机UI设计的开展方向。综合看来，手机UI设计有3大趋 势值得注意。
用户界面设计者开场意识到，没有必要再坚持把现实生活中的对象按照原样照搬进 数字空间里面。数字世界跟现实本来就有差异。他可以赋予用户魔力。他不再是用户、 鼠标以及需要跟眼睛协调的手指芭蕾舞。而是用户直接操作屏幕或者对象，他们所接触 到的是一个用户无论走到哪里都可见的四维世界〔时间、空间、人、信息〕。
1.文字 网页设计中的文字包括：标 题、文字信息、文字链接。网页 中可通过字体、大小、颜色等来 设置文本属性，如右图所示。
2.图形〔图像〕 网页设计中的图形包括： 标题、背景、主图、链接按钮。 网页上的图片一般为JPG和GIF 格式，如右图所示。
3.页面版式 网页设计中的版面排版的首要任 务就是根据网页传达内容的需要，将 不同的文字和图片按照一定的次序用 最合理的编排和布局组成一个有机的 整体并展现出来，如右图所示。
案例背景分析 本例要制作的是自行车网页设计，自行车是一项环保、安康的运ห้องสมุดไป่ตู้，所以设计风格主 要以安康和绿色为主上，同时要有创新精神与独特的创意，版面要简洁明快，注重实 用性，内容要精炼，以便于阅读，本例效果如以下图所示。
10.6 宠物摄影网页设计
设计思路指导 第1点：在设计企业网站时一定要具有丰富的内容，因为一个优秀的企业网站不仅要有 引人注目的视觉效果，还必须包含企业的详细信息，企业的产品以及产品的特点、效劳等。 第2点：在设计网页时，一定要保证所有的内容都准确无误，如果一个企业在网站上的 信息都错漏百出，那么他的产品也不会好到哪里去。因此在设计企业网站时，要不断检查与 校对，才能最终定稿。 第3点：网站上的信息要不断更新，这样才能让用户及时、准确地了解到产品的相关信 息。 第4点：网站的内容一定要能够表达出企业的素质，在与用户建立消费关系之前，他们 会通过网站上的内容来揣摩产品的质量和售后效劳，因为专业的内容可让用户对产品和效劳 产生足够的可信度。 第5点：本例的宠物摄影网站要充分展示企业提供的相关效劳，同时表达出摄影技术的 高超。
10.1 网页设计根底知识
在互联网中，网页是提供信息的最主要手段，但凡在互联网上通过浏览器阅 读到页面，都叫网页。我们通常看到的网页，都是以htm或html后缀结尾的文件， 所以网页也俗称HTML文件。
网页也是互联网中的根本组成局部、网上的重要媒体方式，因此，他也是人 们关注的焦点；网页作为网上内容的一种视觉包装艺术，他具备了声音、动画、 映象以及三维空间等诸多因素，形成了21世纪重要的视觉艺术表现形式。
10.4 游戏界面设计
设计思路指导 第1点：要注意界面的设计与其所向玩家提供的功能之间的冲突，切勿将视觉 效果凌驾于功能之上，会影响游戏操作。 第2点：游戏中通常需要显示大量的信息，但是访问频率并不高。如果你知道 玩家并非总是需要这类信息，那么将其进展适当隐藏。 第3点：本例制作的是一款海洋类游戏界面，可以选择海洋为背景，添加相关 植物作为点缀元素。 第4点：画面文字效果要突出，要符合整个游戏界面的感觉。 案例背景分析 本例是为游戏公司设计的游戏界面，该游戏为海洋类游戏，以美丽的海底世界 为界面背景，构建出一幅梦幻唯美的海底世界，其界面简洁便于玩家快速上手，营 造出美观、操作简单并且具有引导功能的人机环境，整个设计符合特定界面空间的 视觉规律，主题突出，如以下图所示。
10.5 自行车网页设计
设计思路指导 第1点：整体架构要模块化、清晰化，易于操作。 第2点：网页浏览速度快、更新快、交互性强，导航要智能化。 第3点：网站的整体风格要有创意。 第4点：网站的层次构造要清晰，链接构造要有条理。 第5点：网站立足于长期开展，要具有开放性、可拓展性，易于维护更新。 第6点：在选择网站图片时，要根据网站的内容进展搭配，这里是自行车网页， 那么关于自行车的图片必不可少。
案例背景分析 本例为宠物摄影店进展的网页设计，既然是宠物摄影，在设计上以宠物图片为 主，这样更能很好的吸引人们浏览，将文字和图片按照一定的次序编排布局， 条理清晰明了，突出整个界面的统一整体性，便于人们浏览，本例效果如以下 图所示。
10.7 课后习题——MP3界面设计
本练习是针对MP3播放器进展的界面设计，既然是音乐播放器，界面就应具备专 辑封面、歌名、进度条、前进后退播放按钮等元素，整个界面以黄色为主色调，带给 人明快的感受，如以下图所示。
第课UI界面设计
第10章 UI界面设计
本课导读
UI界面设计是指对软件的人机交互、操作逻辑和界面美观的整体设计。普通 电脑一般都是用鼠标和键盘进展交互，现在的手机和平板电脑大多都是触控等。 不管哪一种操作方式都需注重用户的操作体验，本课将讲解不同类型的界面设计 方法。
学习要点
网页设计的根本原那么 网页设计的构成要素 手机UI设计的原那么 手机UI设计的3大趋势
10.2.2 手机UI设计原那么
手机UI设计原那么能优化手机用户体验并激发用户的最大兴趣，当你设计思 考时要时刻想着他们，不要偏离目标。
人机界面设计首先要确立用户类型。划分类型可以从不同的角度，视实 际情况而定。确定类型后要针对其特点预测他们对不同界面的反响，这就要从 多方面设计分析。
人机界面设计要尽量减少用户记忆负担，采用有助于记忆的设计方案。
移动设备屏幕的方寸之地迫使设计者返璞归真， 必须把那些花俏的修饰和多余的内容去掉，优先保 证对业务和客户体验影响最大的功能的呈现。同样 这还意味着此类应用要想取得成功的话必须专注于 极少数的功能子集。
简单的界面要求将交互性降到最低。需要优先 考虑功能，专注于期望结果的根本需求。这里的挑 战是，要知道创立出一个可行的、令人满意的产品 你需要多少，有多少可以去掉，如何才能够扩大产 品和效劳。看看这类应用如何进展演进跟扩大是件 有趣的事情，如右图所示。
10.1.2 网页设计界面的构成要素
网页界面的构成要素包含：标题、Logo、导航、Banner、广告，如以下图所 示。
10.1.3 网页的分类
按网页在网站中所处的位置可将网页分为主页和子页两类；按网页的表现形 式可将网页分为静态网页和动态网页。
10.1.4 网页设计的根本元素
一个优秀的网站离不了出色的网站设计，往往，人们会被设计精巧的网页 所吸引。字体的选择，内容的排列，颜色的搭配，无不考验着网页设计人员的头脑， 一个完整的网页需包含以下几点。
元素布局平衡，功能区域划分合理。窗体大小与长宽比例合理，空间充 分利用，防止过大的灰色空白格区域，也不要过于局促，将空间的利用率提 高到最合理的数值，如以下图所示。
10.3 手机UI界面设计
设计思路指导 第1点：由于手机UI界面的尺寸有限，所以图片的尺寸和比例需注意实用性。 第2点：充分利用空间，防止过大的灰色空白格区域，也不要过于局促，将空间的 利用率提高到最合理的数值。 第3点：减少需要用户思考的时机，尽量为客户提供选择。 第4点：交互性设计注重人机交流，要使用户操作方便。 第5点：这里制作的是个人首页界面，所以版面不可太复杂，只需展示必要的信息 即可。 案例背景分析 本例是为智能手机设计的个人首页界面，首先明确整个设计风格以简洁为主，构 造上一目了然，在色彩上运用清爽的比照色系，合理的界面规划也便于使用，整个设 计通过简洁的界面风格给人带来舒适的视觉效果，本例效果如以下图所示。
5.多媒体 多媒体网页元素中，除了文本、图像和Flash动画外，还有声音、视频等其他媒 体，如以下图所示。
声音是多媒体网页中的一个重要组成局部，可以将某些声音添加到网页中。 在添加声音前，需要考虑的因素包括其用途、格式、文件大小、声音品质及浏览 器差异等。不同浏览器对声音文件的处理方法有所不同，彼此之间可能不兼容。
4.色彩 网页设计中的色彩搭配通常不要只运用 单一颜色，会显得太单调；反之，颜色太多会 那么会花哨，一般使用一种或两种主题色，配 以辅助色，一个页面尽量不要超过四种色彩。 背风光设计要考虑与前景文字的搭配。两者要 拉开层次，不能影响阅览者阅读内容。标志要 突出显示，其色彩跟网页的主题色层次要拉开 ，也可以用比照色；导航和小标题是网站的指 路灯，浏览者要在网页间跳转、了解网站的构 造及内容，必须通过他们。这时可以使用稍具 跳跃性的色彩来加以强调，以吸引视线，让人 感觉网站功能清晰明了、层次清楚，不至于迷 失方向。网页设计中的色彩要均衡，如右图所 示。
10.2 手机UI设计根底知识
现如今的社会移动设备已经成为人们生活娱乐的必需品之一，移动设备的用 户界面及体验越来越受到用户的关注。
10.2.1 手机UI设计的概念
UI的本意是用户界面，是英文User和 Interface的缩写。字面上看是用户与界 面两个组成局部，实际上还包括用户与界面之间的交互关系，如以下图所示。在 人和机器的互动过程〔Human Machine Interaction〕中，有一个层面，即我们所 说的界面〔Interface〕。从心理学意义来分，界面可分为感觉〔视觉、触觉、听 觉等〕和情感两个层次。用户界面设计是屏幕产品的重要组成局部。界面设计是 一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演 着重要的角色。用户界面设计的三大原那么是：置界面于用户的控制之下；减少 用户的记忆负担；保持界面的一致性。
无论是设计者还是移动平台都被推动着向动画式的用户界面设计的方向前进。 尽管手势在日常生活中并非什么新鲜玩意儿，但是要想恰当地、有意义地把他运用到 面向消费者的应用当中，对于设计者来说仍是一项挑战，因为他们平时习惯于墨守常 规，采用静态的框架来设计界面。而如果软件和产品研发采用新式的原型化及多学科 混合方法，创立出动态的、符合视觉和感觉习惯的原型，并就其进展沟通就会更加为 用户所承受。动画式设计赋予应用以更多的动态运动。跟好电影很类似的是，最关键 的局部往往是那些静态帧之间。
10.8 课后习题——科技类网页界面设计
本练习设计的是一款科技类网页界面，运用了分割画面的版式进展设计，将 图片处理成黑白的效果，然后在黑白的根底上添加简单形状的彩色素材图片，这 样给人的视觉效果就会格外突出，如以下图所示。
Thank You
谢谢！
10.1.1 网页设计的根本原那么
网页设计人性化理念主要围绕两点，即便利性〔Usability〕和差异化的独创性 〔Creativity〕，而根本原那么分为以下7点。
用户导向〔User oriented〕原那么。 KISS〔Keep It Simple And Stupid〕原那么。 布局控制。 视觉平衡。 色彩的搭配和文字的可阅读性。 和谐与一致性。 个如性右化图〔，符该合图网合络理文的化展，现塑了造以网上站根个性〕。 本原那么。
要对用户的操作命令做出反响，帮助用户处理问题。系统要设计有恢复 出错现场的能力，在系统内部处理工作要有提示，尽量把主动权让给用户。
多媒体界面的成功并不在于仅向用户提供丰富的媒体，而应在相关理论 指导下，注意处理好各种媒体间的关系，恰中选用。
10.2.3 手机UI设计的3大趋势
“少即是多〞—— 手机UI设计的开展方向。综合看来，手机UI设计有3大趋 势值得注意。
用户界面设计者开场意识到，没有必要再坚持把现实生活中的对象按照原样照搬进 数字空间里面。数字世界跟现实本来就有差异。他可以赋予用户魔力。他不再是用户、 鼠标以及需要跟眼睛协调的手指芭蕾舞。而是用户直接操作屏幕或者对象，他们所接触 到的是一个用户无论走到哪里都可见的四维世界〔时间、空间、人、信息〕。
1.文字 网页设计中的文字包括：标 题、文字信息、文字链接。网页 中可通过字体、大小、颜色等来 设置文本属性，如右图所示。
2.图形〔图像〕 网页设计中的图形包括： 标题、背景、主图、链接按钮。 网页上的图片一般为JPG和GIF 格式，如右图所示。
3.页面版式 网页设计中的版面排版的首要任 务就是根据网页传达内容的需要，将 不同的文字和图片按照一定的次序用 最合理的编排和布局组成一个有机的 整体并展现出来，如右图所示。
案例背景分析 本例要制作的是自行车网页设计，自行车是一项环保、安康的运ห้องสมุดไป่ตู้，所以设计风格主 要以安康和绿色为主上，同时要有创新精神与独特的创意，版面要简洁明快，注重实 用性，内容要精炼，以便于阅读，本例效果如以下图所示。
10.6 宠物摄影网页设计
设计思路指导 第1点：在设计企业网站时一定要具有丰富的内容，因为一个优秀的企业网站不仅要有 引人注目的视觉效果，还必须包含企业的详细信息，企业的产品以及产品的特点、效劳等。 第2点：在设计网页时，一定要保证所有的内容都准确无误，如果一个企业在网站上的 信息都错漏百出，那么他的产品也不会好到哪里去。因此在设计企业网站时，要不断检查与 校对，才能最终定稿。 第3点：网站上的信息要不断更新，这样才能让用户及时、准确地了解到产品的相关信 息。 第4点：网站的内容一定要能够表达出企业的素质，在与用户建立消费关系之前，他们 会通过网站上的内容来揣摩产品的质量和售后效劳，因为专业的内容可让用户对产品和效劳 产生足够的可信度。 第5点：本例的宠物摄影网站要充分展示企业提供的相关效劳，同时表达出摄影技术的 高超。
10.1 网页设计根底知识
在互联网中，网页是提供信息的最主要手段，但凡在互联网上通过浏览器阅 读到页面，都叫网页。我们通常看到的网页，都是以htm或html后缀结尾的文件， 所以网页也俗称HTML文件。
网页也是互联网中的根本组成局部、网上的重要媒体方式，因此，他也是人 们关注的焦点；网页作为网上内容的一种视觉包装艺术，他具备了声音、动画、 映象以及三维空间等诸多因素，形成了21世纪重要的视觉艺术表现形式。
10.4 游戏界面设计
设计思路指导 第1点：要注意界面的设计与其所向玩家提供的功能之间的冲突，切勿将视觉 效果凌驾于功能之上，会影响游戏操作。 第2点：游戏中通常需要显示大量的信息，但是访问频率并不高。如果你知道 玩家并非总是需要这类信息，那么将其进展适当隐藏。 第3点：本例制作的是一款海洋类游戏界面，可以选择海洋为背景，添加相关 植物作为点缀元素。 第4点：画面文字效果要突出，要符合整个游戏界面的感觉。 案例背景分析 本例是为游戏公司设计的游戏界面，该游戏为海洋类游戏，以美丽的海底世界 为界面背景，构建出一幅梦幻唯美的海底世界，其界面简洁便于玩家快速上手，营 造出美观、操作简单并且具有引导功能的人机环境，整个设计符合特定界面空间的 视觉规律，主题突出，如以下图所示。
10.5 自行车网页设计
设计思路指导 第1点：整体架构要模块化、清晰化，易于操作。 第2点：网页浏览速度快、更新快、交互性强，导航要智能化。 第3点：网站的整体风格要有创意。 第4点：网站的层次构造要清晰，链接构造要有条理。 第5点：网站立足于长期开展，要具有开放性、可拓展性，易于维护更新。 第6点：在选择网站图片时，要根据网站的内容进展搭配，这里是自行车网页， 那么关于自行车的图片必不可少。
案例背景分析 本例为宠物摄影店进展的网页设计，既然是宠物摄影，在设计上以宠物图片为 主，这样更能很好的吸引人们浏览，将文字和图片按照一定的次序编排布局， 条理清晰明了，突出整个界面的统一整体性，便于人们浏览，本例效果如以下 图所示。
10.7 课后习题——MP3界面设计
本练习是针对MP3播放器进展的界面设计，既然是音乐播放器，界面就应具备专 辑封面、歌名、进度条、前进后退播放按钮等元素，整个界面以黄色为主色调，带给 人明快的感受，如以下图所示。
第课UI界面设计
第10章 UI界面设计
本课导读
UI界面设计是指对软件的人机交互、操作逻辑和界面美观的整体设计。普通 电脑一般都是用鼠标和键盘进展交互，现在的手机和平板电脑大多都是触控等。 不管哪一种操作方式都需注重用户的操作体验，本课将讲解不同类型的界面设计 方法。
学习要点
网页设计的根本原那么 网页设计的构成要素 手机UI设计的原那么 手机UI设计的3大趋势
10.2.2 手机UI设计原那么
手机UI设计原那么能优化手机用户体验并激发用户的最大兴趣，当你设计思 考时要时刻想着他们，不要偏离目标。
人机界面设计首先要确立用户类型。划分类型可以从不同的角度，视实 际情况而定。确定类型后要针对其特点预测他们对不同界面的反响，这就要从 多方面设计分析。
人机界面设计要尽量减少用户记忆负担，采用有助于记忆的设计方案。
移动设备屏幕的方寸之地迫使设计者返璞归真， 必须把那些花俏的修饰和多余的内容去掉，优先保 证对业务和客户体验影响最大的功能的呈现。同样 这还意味着此类应用要想取得成功的话必须专注于 极少数的功能子集。
简单的界面要求将交互性降到最低。需要优先 考虑功能，专注于期望结果的根本需求。这里的挑 战是，要知道创立出一个可行的、令人满意的产品 你需要多少，有多少可以去掉，如何才能够扩大产 品和效劳。看看这类应用如何进展演进跟扩大是件 有趣的事情，如右图所示。
10.1.2 网页设计界面的构成要素
网页界面的构成要素包含：标题、Logo、导航、Banner、广告，如以下图所 示。
10.1.3 网页的分类
按网页在网站中所处的位置可将网页分为主页和子页两类；按网页的表现形 式可将网页分为静态网页和动态网页。
10.1.4 网页设计的根本元素
一个优秀的网站离不了出色的网站设计，往往，人们会被设计精巧的网页 所吸引。字体的选择，内容的排列，颜色的搭配，无不考验着网页设计人员的头脑， 一个完整的网页需包含以下几点。
元素布局平衡，功能区域划分合理。窗体大小与长宽比例合理，空间充 分利用，防止过大的灰色空白格区域，也不要过于局促，将空间的利用率提 高到最合理的数值，如以下图所示。
10.3 手机UI界面设计
设计思路指导 第1点：由于手机UI界面的尺寸有限，所以图片的尺寸和比例需注意实用性。 第2点：充分利用空间，防止过大的灰色空白格区域，也不要过于局促，将空间的 利用率提高到最合理的数值。 第3点：减少需要用户思考的时机，尽量为客户提供选择。 第4点：交互性设计注重人机交流，要使用户操作方便。 第5点：这里制作的是个人首页界面，所以版面不可太复杂，只需展示必要的信息 即可。 案例背景分析 本例是为智能手机设计的个人首页界面，首先明确整个设计风格以简洁为主，构 造上一目了然，在色彩上运用清爽的比照色系，合理的界面规划也便于使用，整个设 计通过简洁的界面风格给人带来舒适的视觉效果，本例效果如以下图所示。
5.多媒体 多媒体网页元素中，除了文本、图像和Flash动画外，还有声音、视频等其他媒 体，如以下图所示。
声音是多媒体网页中的一个重要组成局部，可以将某些声音添加到网页中。 在添加声音前，需要考虑的因素包括其用途、格式、文件大小、声音品质及浏览 器差异等。不同浏览器对声音文件的处理方法有所不同，彼此之间可能不兼容。
4.色彩 网页设计中的色彩搭配通常不要只运用 单一颜色，会显得太单调；反之，颜色太多会 那么会花哨，一般使用一种或两种主题色，配 以辅助色，一个页面尽量不要超过四种色彩。 背风光设计要考虑与前景文字的搭配。两者要 拉开层次，不能影响阅览者阅读内容。标志要 突出显示，其色彩跟网页的主题色层次要拉开 ，也可以用比照色；导航和小标题是网站的指 路灯，浏览者要在网页间跳转、了解网站的构 造及内容，必须通过他们。这时可以使用稍具 跳跃性的色彩来加以强调，以吸引视线，让人 感觉网站功能清晰明了、层次清楚，不至于迷 失方向。网页设计中的色彩要均衡，如右图所 示。