第10课 UI界面设计.ppt

设计思路指导 第1点：整体架构要模块化、清晰化，易于操作。 第2点：网页浏览速度快、更新快、交互性强，导航要智能化。 第3点：网站的整体风格要有创意。 第4点：网站的层次结构要清晰，链接结构要有条理。 第5点：网站立足于长期发展，要具有开放性、可拓展性，易于维护更新。 第6点：在选择网站图片时，要根据网站的内容进行搭配，这里是自行车网页，那么关于自行车的图片必不可少。 10.5 自行车网页设计 案例背景分析本例要制作的是自行车网页设计，自行车是一项环保、健康的运动，所以设计风格主要以健康和绿色为主上，同时要有创新精神与独特的创意，版面要简洁明快，注重实用性，内容要精炼，以便于阅读，本例效果如下图所示。 设计思路指导 第1点：在设计企业网站时一定要具有丰富的内容，因为一个优秀的企业网站不仅要有引人注目的视觉效果，还必须包含企业的详细信息，企业的产品以及产品的特点、服务等。 第2点：在设计网页时，一定要保证所有的内容都准确无误，如果一个企业在网站上的信息都错漏百出，那么他的产品也不会好到哪里去。因此在设计企业网站时，要不断检查与校对，才能最终定稿。 第3点：网站上的信息要不断更新，这样才能让用户及时、准确地了解到产品的相关信息。 第4点：网站的内容一定要能够体现出企业的素质，在与用户建立消费关系之前，他们会通过网站上的内容来揣摩产品的质量和售后服务，因为专业的内容可让用户对产品和服务产生足够的可信度。 第5点：本例的宠物摄影网站要充分展示企业提供的相关服务，同时体现出摄影技术的高超。 10.6 宠物摄影网页设计 案例背景分析本例为宠物摄影店进行的网页设计，既然是宠物摄影，在设计上以宠物图片为主，这样更能很好的吸引人们浏览，将文字和图片按照一定的次序编排布局，条理清晰明了，突出整个界面的统一整体性，便于人们浏览，本例效果如下图所示。 本练习是针对MP3播放器进行的界面设计，既然是音乐播放器，界面就应具备专辑封面、歌名、进度条、前进后退播放按钮等元素，整个界面以黄色为主色调，带给人明快的感受，如下图所示。 10.7 课后习题——MP3界面设计 本练习设计的是一款科技类网页界面，运用了分割画面的版式进行设计，将图片处理成黑白的效果，然后在黑白的基础上添加简单形状的彩色素材图片，这样给人的视觉效果就会格外突出，如下图所示。 10.8 课后习题——科技类网页界面设计 * 第10章 UI界面设计 UI界面设计是指对软件的人机交互、操作逻辑和界面美观的整体设计。普通电脑一般都是用鼠标和键盘进行交互，现在的手机和平板电脑大多都是触控等。不管哪一种操作方式都需注重用户的操作体验，本课将讲解不同类型的界面设计方法。 网页设计的构成要素 网页设计的基本原则 手机UI设计的3大趋势 手机UI设计的原则 在互联网中，网页是提供信息的最主要手段，凡是在互联网上通过浏览器阅读到页面，都叫网页。我们通常看到的网页，都是以htm或html后缀结尾的文件，所以网页也俗称HTML文件。 网页也是互联网中的基本组成部分、网上的重要媒体方式，因此，他也是人们关注的焦点；网页作为网上内容的一种视觉包装艺术，他具备了声音、动画、映象以及三维空间等诸多因素，形成了21世纪重要的视觉艺术表现形式。 10.1 网页设计基础知识 10.1.1 网页设计的基本原则 网页设计人性化理念主要围绕两点，即便利性（Usability）和差别化的独创性（Creativity），而基本原则分为以下7点。 用户导向（User oriented）原则。 KISS（Keep It Simple And Stupid）原则。 布局控制。 视觉平衡。 色彩的搭配和文字的可阅读性。 和谐与一致性。 个性化（符合网络文化，塑造网站个性）。 如右图，该图合理的展现了以上基本原则。 10.1.2 网页设计界面的构成要素 网页界面的构成要素包含：标题、Logo、导航、Banner、广告，如下图所示。 10.1.3 网页的分类 按网页在网站中所处的位置可将网页分为主页和子页两类；按网页的表现形式可将网页分为静态网页和动态网页。 10.1.4 网页设计的基本元素 　一个优秀的网站离不了出色的网站设计，往往，人们会被设计精美的网页所吸引。字体的选择，内容的排列，颜色的搭配，无不考验着网页设计人员的头脑，一个完整的网页需包含以下几点。 1.文字 网页设计中的文字包括：标题、文字信息、文字链接。网页中可通过字体、大小、颜色等来设置文本属性，如右图所示。 2.图形（图像） 网页设计中的图形包括：标题、背景、主图、链接按钮。网页上的图片一般为JPG和GIF格式，如右图所示。 3.页面版式 网页设计中的版面排版的首要任务就是根据网页传达内容的需要，将不同的文字和图片按照一定的次序用最合理的编排和布局组成一