项目四pc端UI设计

HSUCLEARLogin账号密码UI设计HSUCLEARLogin账号密码项目四pc端UI设计目标TARGET教学目标

通过本项目的学习让学生掌握PC端UI设计的方法。目标TARGET知识目标认识网页UI。熟悉网页中各个模块的设计规范。了解常规网站的布局。掌握网页基本模块的设计方法。了解网页UI设计的设计原则。目标TARGET技能目标学会WEB界面常规模块设计。能够按照WEBUI设计流程进行UI设计。目标TARGET素质目标培养学生工匠精神和创新意识。建立学生技能强己，技能爱国理念。培养学生勤于思考，善于探索的意识。

PC端UI设计，作为连接用户与PC端应用程序、网页的桥梁，其质量直接关乎用户体验的优劣。无论是企业官网展示企业形象与产品服务，办公软件助力高效工作流程，还是在线娱乐平台带来沉浸式体验，都离不开精心雕琢的PC端UI设计。它不仅要实现功能的高效传达，还需兼顾美观性与易用性，以适应不同用户群体和使用场景的需求。通过本项目的学习，读者将全面了解PC端UI设计的基础知识，掌握网页结构分析、布局设计、模块构建的技巧，熟悉PC端UI设计的完整流程。项目引入HSUCLEARLogin账号密码PART01相关知识相关知识1PC端UI设计常识2WEBUI布局设计3WEB界面常规模块4PC端UI设计流程

网页UI设计定义与目标

网页UI设计是以互联网为载体，基于互联网技术和数字交互技术，依照客户需求与消费者需求，设计以商业宣传为目的的网页，同时遵循设计美感，实现商业目的与功能的统一。其目的是为用户提供布局合理、视觉效果突出、功能强大、使用便捷的界面。PC端UI设计常识

网页结构基本组成

网页的基本结构通常包含引导栏、header、导航、Banner、内容区域、版权信息等模块。引导栏位于界面顶部，放置客服电话、帮助中心、注册和登录等信息；header主要放置企业logo等内容；导航栏用于引导用户在网站中快速找到所需信息；Banner用于展示重要信息或广告；内容区域是展示网页主要内容的部分；版权信息位于页面底部，说明网站的版权归属等信息。PC端UI设计常识

网页分类与特点

网页根据内容可分为首页、详情页和列表页。首页是网站的门面，给予用户第一印象，展示企业的产品和服务，设计需贴近企业文化，有鲜明特色；详情页是二级页面，与首页色彩风格一致，页面中同一元素与其他页面保持一致，主要展示具体的产品或服务信息，让用户深入了解；列表页用于展示产品和相关信息，展示比首页更多的产品信息，还可以对产品信息进行初步筛选，设计时要注意合理安排文字，突出产品内容信息。PC端UI设计常识

流式布局特点与应用

流式布局又称瀑布流式布局，视觉表现为参差不齐的多栏布局。

原理：页面容器内的多个高度不固定的div之间按照一定的间隔参差不齐的无序浮动，鼠标滚动时不断在容器内的尾部加载数据，且自动加载到空缺位置，不断循环。

优点：是有效降低了界面复杂度，节省了空间，在触屏设备上交互方式有更好的用户体验，通过向上滑动进行页面滚动和数据加载，对操作的精准程度要求远远低于点击按钮或者链接；更高的参与度，使用户能更好地专注于浏览而不是操作。

缺点：是无限滚动只适用于特定类型产品中的某一类型，如某类微博信息，购物网站的某类商品，而不适用于一般的门户网站，使用需斟酌；需要打造额外的js库来保证页面数据的加载和排列，而这在一定意义上增加了在网页的性能和设备兼容等方面的问题。WEBUI布局设计

固定式布局

固定式布局其宽度高度固定，页面被一个固定网页包裹，容器不能移动，页面的宽高不随页面的变化而变化，这种布局大家比较熟悉，这种方式一度成为页面布局的主流方式，这样布局设计简单，更容易定义，但是由于屏幕尺寸的不同，特别是移动端各个设备的不同，这种布局在灵活性方式的可用度不高。

优点:效率高，开发周期短，成本低。

缺点:一旦要修改布局结构，基本只能重新制作。WEBUI布局设计

响应式布局

使用媒体查询给不同尺寸和介质的设备切换不同的样式。2010年，EthanMarcolle提出了“自适应网页设计”(ResponsiveWebDesign)这个名词，指可以自动识别屏幕宽度，并做出相应调整的网页设计WEBUI布局设计

“国”字型布局特点“国”字型布局是网页上使用最多的一种结构类型，是综合性网站页面中常用的版式。通常上方为引导栏、header、导航栏，中间为内容区，最底端为版权信息。将内容区分为左、中、右三大块，通常左右两侧为导航、友情链接，中间为内容区域。此类型的版面优点是页面充实、内容丰富和信息量大，缺点是页面拥挤、不够灵活。WEBUI布局设计

“T”型布局优势“T”型布局与“国”字型布局很相近，页面上方一致，仅仅只是在形式上略有区别。网页上边和左右相结合的布局，通常右边为主要内容，所占比例比较大。在实际运用中还可以改变“T”型布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图像或导航栏。此类型的版面优点是页面结构清晰、主次分明、易于使用，缺点是规矩呆板。

WEBUI布局设计

标题正文型布局适用场景

标题正文型布局即上方为网页标题或类似的一些内容，中间为正文部分，下方为版权信息。一般是文章、登录页等采用居多，里面包含着大量的文字信息。此布局方式适用于内容以文字为主的页面，能够突出正文内容，让用户更专注于阅读。WEBUI布局设计

左右分割型布局

左右分割型布局结构，就是把整个版面分割为左右两个部分，分别在左或右配置文案。通常会在其中一侧放置一列文字链接,在文字链接上方会有标题或logo。

WEBUI布局设计

上下分割型布局与左右分制的布局结构类似，区别仅仅在于上下框架页面的导航和logo在上方，正文内容在下。

WEBUI布局设计

封面型布局

此类型布局基本出现在一些网站的首页，大部分直接使用极具设计感的图像或动画作为网页背景，然后添加一个“进入”按钮即可。此类型布局方式十分开放自由，可以给用户带来赏心悦目的感受

WEBUI布局设计

体现品牌类登录页

这种类型的登陆页面多是由logo与登录框两个元素组成，页面质感比较强，操作性比较强，用户在这样的登录页能快速完成填写与登陆，同时还能对产品的品牌一目了然。整个页面呈现一种比较理性的设计，没有任何的视觉干扰。WEB界面常规模块

有趣味性的登录页设计

用户的第一视觉中心往往在广告图片上，其次才会看到登录框，但这些广告图又很好地传达了产品的相关信息，如品牌（是什么产品）、性质（这个产品是用来做什么的），或者传达一种节日的氛围（春节、国庆等），加深了用户对此产品的认识，同时这些广告图趣味性比较强，虽然是广告，但并不会让用户感到反感。WEB界面常规模块

情景类登录页风格这种全背景的登录页，用大背景图来烘托出比较随性的情境，在登陆框的设计上，感觉比较轻松、不拘束。比较适合用在个人空间、博客等产品中。WEB界面常规模块

1．和登录页在一起的注册页优点:方便非用户注册。缺点:会让用户感觉混乱。WEB界面常规模块

2．完整的注册页优点:数据一次性收集完整。缺点:用户不一定有耐心填完，影响用户注册的决心。WEB界面常规模块

3.分步式注册页优点:数据一次性收集完整，提高用户注册的决心。缺点:可能受到网速等外部因素影响较大。WEB界面常规模块

产品展示页

对于电商来说，产品详情页的界面是至关重要的。当用户进入产品详情页的时候，如果无法找到自己想要的内容，或者说没有吸引用户的内容，那用户可能马上就会关闭页面。由此可以得出结论，产品详情页的好坏，直接决定了用户的购买情况。

网站logo

网站logo是网站特色和内涵的集中体现,有利于传递网站的定位和经营理念。网站logo是网站UI设计的一个重要组成部分，在网页中起到不可替代的作用，主要包括传递信息、树立企业形象和利于网站竞争。网站logo根据形式进行分类，一般分为特定图形、特定文字和字图结合三种类型WEB界面常规模块

标签形式导航

在一些图片比较大、文字信息提供量少、网页视觉风格比较简单的网页中，标签形式的导航比较常用WEB界面常规模块

按钮形式导航按钮形式的导航是最传统的也是最容易让用户理解为单击的导航形式，按钮可以制作为规则或不规则的外形，以引导用户更好使用WEB界面常规模块

弹出菜单式导航

由于网页的空间是有限的，为了能够节省页面的空间，而又不影响网站导航更好地发挥其作用，因此网页出现了弹出菜单式导航。当将鼠标放在文字导航上时，菜单随机就会弹出，不仅增添了网站的交互效果、节省了页面空间，而且使整个网站更具活力WEB界面常规模块

无框图标形式导航

无框图标形式导航是指将图标去掉边框，使用多种不规则的图案或线条。在网站UI设计中使用此形式导航不仅给人以活泼感,而且能够增强网页的趣味性,丰富网站的页面效果WEB界面常规模块

多导航系统形式

多导航系统多用于内容较多的购物类网站中，导航内部可以采用多种形式进行表现，以丰富网页效果，每个导航的作用都是不同的，不存在从属关系WEB界面常规模块

1.了解需求

沟通策划

在进行网页设计时，设计师应该明确知道客户想要展示什么，以及来这里的人都想得到什么？所以设计师接到策划设计任务后，首先需要进行用户调研，需要考虑客户的行业、风格调性，访问对象的技术背景、受教育程度、阅读能力、兴趣爱好、消费习惯、上网方式等。同时，还需要对同行业此类网站进行调查研究，总结其特点及最新动态，最后确定网页的内容，包括网站的名称、表现的主要内容、用户的意图等。2.素材整理制作

在完成以上前期沟通、分析后，设计师需要对设计过程中需要用到的相关资料及素材进行收集与整理，包括logo、广告图片、装饰性图片、宣传视频、动画、文字资料等。然后对页面的模块、网页栏目及组织结构、导航等进行分解。在完成素材整理、结构规划之后，设计师需要对具体的细节进行设计、填充。在制作中按照先整体(颜色版式)、后局部(每个版块)、再细节的步骤进行填充。3.测试发布

测试发布包括完整性测试和可用性测试两部分。PC端UI设计流程HSUCLEARLogin账号密码PART02任务实操任务实操1百度极速云盘logo设计

2百度极速云盘顶部导航设计3百度极速云盘主界面设计

大家熟知的百度网盘为了得到更多客户的信任和使用，公司决定进行升级，将百度网盘更名为百度极速云盘，本任务要求设计百度极速云盘的logo。任务1-1白色轻质感开关制作

任务描述

本任务要求为百度极速云盘主界面设计一款header和网站导航合并的顶部导航栏，效果如图所示。任务1-2质感滑动条制作

任务描述

本任务要求设计PC端百度极速云盘的主界面。主界面的最终设计效果如图所示。任务1-3播放进度条的制作

任务描述HSUCLEARLogin账号密码PART03拓展迁移在当前时代，信息技术的突破使得空间距离已不再成为限制，真正实现了地球村的理想，但是农村的信息普及率还是很低。农民们都不怎么会用手机，顶多就是打打电话发发短信，平时不太会上网更不会想到通过网络手段去卖出自己的劳作成果——农产品，这无疑大大浪费了农民的劳动成果和国家资源，也大大打击了人们生产劳作的积极性。本任务要求完成线上销售平台的前端设计，该平台主要功能是农民们出售他们的农产品，家庭主妇线上购买农产品。从而农民不用亲自去菜市场或推着三轮车去大街上去卖菜，同时买菜的家庭主妇不用花费时间去实体店里采购这样既省钱又省力。设计的主要功能模块