网页UI设计教学课件(共4单元)项目一

网页UI设计 主 编 钟爱青 谢冠怀 副主编 梁厚发 张源泉 参 编 范小丹 但金燃 刘 专ISBN 978-7-121-33741-3ISBN 978-7-121-33741-3目录CONTENTS项目一 页面草图绘制项目二页面原型设计项目三网页页面设计项目四App产品原型设计LOGO项目一 页面草图绘手绘草图任务一网页布局的基本知识响应式网页布局的设计特点手绘草图的方法内容手绘流程图。任务二绘制流程图POP软件内容项目一 页面草图绘制LOGO项目一 页面草图绘项目情景如图1.1-1所示是X公司旧网站，现要对旧网站进行改版，当用户通过计算机、平板电脑或智能手机访问网站时，要求页面可以在不同分辨率的多个设备上运行，使用户可进行选择的浏览体验。制你的内容到此。LOGO项目一 页面草图绘项目分析UI设计即用户界面设计，包括人机交互、操作逻辑和界面美观的整体设计。常见的UI设计分类包括手机界面设计、网站界面设计、软件用户界面设计和游戏界面设计等。优秀的界面设计包括以下步骤。1构思。在了解客户需求之后，发挥想像力，将你想到的“构思”画出来（用笔和纸或者软件），构思过程不讲究细腻工整，也不必考虑细节，只要几条简单的线条勾画出创意的轮廓即可。尽可能的多构思一些，以便选择一个最适合的进行搭建。2粗略布局。将重要元素和网页结构相结合，看看框架是否合理、是否适合客户需求。3完善布局。根据客户要求将其所需的内容有条理的融入整个框架中，需要通过对图片的处理、空间的合理利用进行布局。4深入优化。针对细节与色彩进行修改和优化，根据客户反馈对现有的界面进行适当的调整，直至客户满意。3完善布局。根据客户要求将其所需的内容有条理的融入整个框架中，需要通过对图片的处理、空间的合理利用进行布局。4深入优化。针对细节与色彩进行修改和优化，根据客户反馈对现有的界面进行适当的调整，直至客户满意。制你的内容到此。网页界面交互设计，只要是在现阶段现有的资源下最适合客户需求的就是“最好”的。LOGO项目一 页面草图绘创意还原沟通规范前期：多方沟通确认。原型是沟通的依据。熟悉设计环境规范。熟悉设计环境规范。复制你的内容到此。中期：制定明确的项目设计规范。前期的视觉设计稿经沟通确认后，应做一份详细的视觉规范和页面标注（视觉和技术之间的书面沟通）。详尽有效的视觉规范可以减少沟通成本，也可以细致地标出视觉状态供技术参考。你的内容到此。后期：还原跟进、反复验收。内容到此。视觉设计师让前端工程师视觉设计师让前端工程师100%100%实现设计效果的关键点实现设计效果的关键点LOGO项目一 页面草图绘制任务一手 绘 草 图LOGO项目一 页面草图绘网页布局的基本知识 网页是由各种视觉元素组成的，一般有标题、网站logo、页眉、页脚、主体内容、功能区、导航区、广告栏等。网页按照内容一般可以划分为以下几个部分，如右上图所示。（1）顶部，包括了logo、menu和一幅banner图片。（2）内容部分，又可分为侧边栏、主体内容。（3）底部，包括一些版权信息。如果把网页中的不同部分看成一个一个的“矩形块”，把多个“矩形块”按照行和列的方式从上往下，从左往右组织起来，就构成了一个网页。网页布局就是对这些块的排列组合，如右下图所示。3完善布局。根据客户要求将其所需的内容有条理的融入整个框架中，需要通过对图片的处理、空间的合理利用进行布局。4深入优化。针对细节与色彩进行修改和优化，根据客户反馈对现有的界面进行适当的调整，直至客户满意。制你的内容到此。LOGO项目一 页面草图绘网页布局 网页布局其实就是排版，排版就是将有限的视觉元素进行有机的排列组合，让逻辑清晰、阅读顺畅、交互便捷，产生良好的体验。排版早已广泛应用于平面媒体中的报纸、书刊杂志中，同样也适用于网页设计，但因为网页有自己的特性，所以排版也有所不同：交互性（可操作、即时响应、状态变化，要求不但美观更要好用）。呈现媒介（PC、手机、平板电脑、电视、投影等，需要考虑呈现尺寸及色彩）。技术性（HTML和CSS不断升级，对网页排版的支持更加全面和高效）。多媒体（文字、图片、视频）。网页布局不仅是影响页面内部设计的重要因素，还是衡量网页用户体验好坏的重要指标，而且会影响搜索引擎对页面的收录。3完善布局。根据客户要求将其所需的内容有条理的融入整个框架中，需要通过对图片的处理、空间的合理利用进行布局。4深入优化。针对细节与色彩进行修改和优化，根据客户反馈对现有的界面进行适当的调整，直至客户满意。制你的内容到此。LOGO项目一 页面草图绘响应式网页布局的设计特点 响应式网页设计就是指创建的网页能自动识别屏幕宽度，并做出相应的调整。它能够快捷地解决多设备显示适应问题。当然响应式网页设计不仅仅是关于屏幕分辨率自适应及自动缩放图片等问题，它更像一种对于设计的全新思维模式；原则是向下兼容、移动优先：交互和设计应以移动端为主，PC端则作为移动端的一个扩展。4深入优化。针对细节与色彩进行修改和优化，根据客户反馈对现有的界面进行适当的调整，直至客户满意。制你的内容到此。LOGO项目一 页面草图绘手绘草图的方法 钢笔、纸、铅笔、黑色及彩色的画笔（马克笔、记号笔、荧光笔）。便利贴。便携白板。拿一张旧的白板，裁成小块，制作成很多小的便携白板。你可以随身携带，也可以与印象笔记一起使用来记录工作和草图。大尺寸速写本。用至少14英寸长的速写本为客户画图，以便更好地展示你的作品。活动挂图。活动挂图和便携白板差不多，都是可以吸引客户的工具。如果是可粘贴的，就可以贴在墙上方便长时间的设计讨论。深入优化。针对细节与色彩进行修改和优化，根据客户反馈对现有的界面进行适当的调整，直至客户满意。制你的内容到此。LOGO项目一 页面草图绘制任务二We provide this as the best fit area for you to put some details for this stuff.et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.手 绘 流 程 图We provide this as the best fit area for you to put some details for this stuff.et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.LOGO项目一 页面草图绘绘制流程图手绘流程图是为了方便设计者说明网站的结构及流程。在任务1中已经学习了如何手绘网站某个网页的草图，而一个复杂的网站是由许多个网页组成的。当你完成了多个草图的绘制，就需要使用站点地图及流程图来厘清逻辑思路。深入优化。针对细节与色彩进行修改和优化，根据客户反馈对现有的界面进行适当的调整，直至客户满意。制你的内容到此。LOGO项目一 页面草图绘POP软件POP是Prototyping on Paper纸上原型的简称。POP交互设计软件是一款辅助交互展示应用软件，它实现了纸本流程动起来的可能，只要用手机拍下你的手绘草稿，在POP里设计好链接区域，马上就能变成可互动的原型，让你的点子不再是纸上谈兵，讨论起来更加实际与方便。深入优化。针对细节与色彩进行修改和优化，根据客户反馈对现有的界面进行适当的调整，直至客户满意。制你的内容到此。下载安装POP软件LOGO项目一 页面草图绘在POP软件中模拟购买某个商品【详细步骤】（1）打开POP软件，新建Project并命名（此处以sweet为例）。（2）选择手机型号（屏幕大小），并完成创建Project。（3）导入草图。POP软件自带四种导入方式，这里以从相册导入为例，请你根据需要自行选择导入方式。（4）选择“Import from Album”，弹出相册，选择“甜品”文件夹中的图片，该软件限制一次最多导入10张图片，依次选择你所需的图片进行导入。（5）选择sweet项目，显示sweet中的所有草图。（6）选择第一张草图，单击其中的草图按钮，出现“Delete（删除链接）”及“Link to（链接到）”选项，选择“Link to”后，选择要链接的草图页面。（7）页面选择完毕后，按钮链接由红色变成绿色，重复步骤（6）直至按草图页面结构及流程图完成所有的页面链接。（8）页面链接完成后单击任意一张草图都会出现的界面，可以进行播放、命名及描述草图、弹出设置菜单等操作。的界面进行适当的调整，直至客户满意。制你的内容到此。感谢您的聆听网页UI设计