网页界面设计入门 第1篇
确定网页布局
确定网页的布局是制作网页设计的第一步。网页布局包括确定网页的整体结构和组织方式，以及各个元素在页面中的位置和排列方式。
以下是一个制作网页设计时的网页布局示例：
头部（Header）：包含网页的标题和导航栏，通常位于页面的顶部。
内容区（Content）：包含网页的主要内容，可以分为多个部分，如文章、图片、视频等。
侧边栏（Sidebar）：位于内容区旁边，用于显示与主要内容相关的其他信息，如相关链接、广告等。
脚部（Footer）：位于页面的底部，包含版权信息、联系方式等。
确定网页布局时，需要考虑用户体验和页面的易读性。合理的布局可以帮助用户快速找到所需信息，提高用户满意度。
确定网页颜色和字体
网页的颜色和字体选择对于制作网页设计至关重要。合适的颜色搭配和字体选择可以增强网页的视觉效果，提升用户体验。
以下是一个制作网页设计时网页颜色和字体选择示例：
颜色选择：选择与网页主题相关的颜色，可以使用色彩搭配工具来确定主色调和辅助色调。注意要保持颜色的统一性和搭配的协调性。
字体选择：选择易读性好的字体，并根据网页的风格和主题进行选择。可以使用谷歌字体等在线字体库来获取适合的字体。
在确定网页的颜色和字体时，需要考虑用户的习惯和喜好，以及网页的整体风格和定位。
确定网页导航
网页导航是制作网页设计中至关重要的一部分，它可以帮助用户快速找到所需信息，并提供网页的整体结构和导航路径。以下是一个示例的网页导航：
主导航：位于网页的头部，包含网页的主要链接和菜单。
侧边导航：位于网页的侧边栏，用于显示与主要内容相关的其他链接和菜单。
底部导航：位于网页的底部，包含网页的版权信息和其他辅助链接。
确定网页元素
网页元素是指网页中的各种组件和交互元素，如按钮、表单、图片等。确定网页元素时，需要考虑以下几个方面：
功能性：网页元素应该具有明确的功能和作用，能够满足用户的需求。
可视性：网页元素应该有明显的视觉效果，能够引起用户的注意。
网页界面设计入门 第2篇
信息流广告是埋在信息流中的一种广告形式。这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样。比如朋友圈、知乎、Facebook 都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验。信息流广告的尺寸与信息流相同。
△ 知乎APP中信息流中的广告
在网站具体的页面设计中，底部会有一个区域我们称之为 footer。一般 footer 的颜色都会比上边内容区域要暗，因为 footer 的信息在逻辑的级别上是次要的。footer 区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让 footer 变得特别明显。
网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑 C盘保存一个叫 的图片，然后在浏览器打开这个网址：C:\ 你看到了什么？对，就是这张图片。这就是网站的原理：网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器。我们通过域名来调取网中不同的页面和文件，如果服务器关机了那么网站也就瘫痪了。每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个 IP地址，这个 IP地址就是服务器所在的门牌号码。找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如文字、边框、表格等实际上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完（比如登录成功这个信息）然后再下发给我们的浏览器。所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次「握手」。当然老「握手」会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费。这个机制就是「cookies」：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。
△ 基于鼠标的手势操作
△ 按钮与文字的不同状态
网页界面设计入门 第3篇
兼容性测试是制作网页设计过程中非常重要的一步，它确保网页在不同的浏览器、操作系统和设备上都能正常显示和运行。以下是进行兼容性测试的一些建议和步骤：
选择测试工具：首先，选择适合你制作网页设计项目的兼容性测试工具。有许多免费和付费的工具可供选择，例如BrowserStack、CrossBrowserTesting和Sauce Labs等。这些工具可以模拟不同的浏览器和设备，并提供详细的测试报告。
测试不同的浏览器：确保你的网页在主流浏览器（如Chrome、Firefox、Safari和Edge）中都能正常显示和运行。检查网页的布局、字体、颜色和交互元素等是否在不同浏览器中一致。
测试不同的操作系统：制作网页设计也需要考虑不同的操作系统，如Windows、Mac和Linux等。测试你的网页在不同操作系统上的兼容性，确保它在各个操作系统上都能正常运行。
测试不同的设备：现在的用户使用各种各样的设备访问网页，包括台式机、笔记本电脑、平板电脑和手机等。测试你的网页在不同设备上的兼容性，确保它在各种设备上都能正确显示和操作。
解决兼容性问题：在进行兼容性测试时，可能会发现一些兼容性问题，如布局错乱、字体显示错误或交互功能无法正常使用等。及时记录并解决这些问题，确保你的网页在各种环境中都能提供良好的用户体验。
响应式设计是指网页能够根据不同设备的屏幕大小和分辨率进行自适应的设计。为了确保网页在不同设备上都能够正常显示和使用，需要进行响应式设计测试。
下面是制作网页设计时一些常见的响应式设计测试方法：
设备测试：使用不同设备（如手机、平板电脑、笔记本电脑等）进行测试，检查网页在不同设备上的布局和功能是否正常。可以通过手动测试或使用模拟器进行测试。
屏幕尺寸测试：测试网页在不同屏幕尺寸下的显示效果。可以使用浏览器的开发者工具来模拟不同屏幕尺寸，或者使用真实的设备进行测试。
浏览器兼容性测试：测试网页在不同浏览器上的显示效果和功能是否正常。常见的浏览器包括Chrome、Firefox、Safari、Edge等。可以使用浏览器的开发者工具来进行测试，或者使用在线的兼容性测试工具。
性能测试：测试网页的加载速度和性能。可以使用工具来测试网页的加载时间，并优化网页的代码和资源以提高性能。
用户体验测试：测试网页的用户体验是否良好。可以邀请用户进行测试，收集他们的反馈和建议，以改进网页的设计和功能。
用户体验测试是评估网页设计的关键步骤之一，它能帮助我们了解用户在使用网页时的感受和反馈。下面是一个制作网页设计时的用户体验测试流程示例：
确定测试目标和指标：在进行用户体验测试之前，首先需要明确测试的目标和指标。例如，我们可能想要测试用户在网页上完成特定任务时的效率和满意度。
招募测试参与者：为了进行用户体验测试，我们需要招募一些符合目标用户群体的参与者。可以通过社交媒体、用户调研等方式来寻找合适的测试参与者。
设计测试任务：根据测试目标，设计一些具体的测试任务，要求参与者在网页上完成这些任务。任务应该能够涵盖网页设计的各个方面，例如导航、搜索功能、购物流程等。
进行测试：将测试任务交给参与者，并观察他们在完成任务过程中的行为和反馈。可以使用录像设备或用户测试软件来记录参与者的操作过程。
收集反馈和数据：除了观察参与者的行为，还可以通过问卷调查、面试等方式收集他们的主观反馈。同时，还可以收集一些客观的数据，例如任务完成时间、错误率等。
分析和总结结果：根据收集到的反馈和数据，进行分析和总结。可以找出用户在使用网页时遇到的问题和不满意之处，并提出改进的建议。
调整网页设计：根据用户体验测试的结果，对网页设计进行相应的调整和优化。可以尝试不同的设计方案，以提升用户的体验和满意度。
网页界面设计入门 第4篇
设计移动端 H5 项目的时候，我们一般以用户量较高的 iPhone6/7/8的尺寸：750x1334px为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。当然 H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的 H5，就是通过 H5 工具生成。目前比较火的 H5 生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将 PSD 上传即可对每个原件进行动效的设置了。但是如果需要复杂的动效和交互，还是需要前端工程师的配合。
△ H5项目的尺寸
△ 微信公众号后台
△ Admin CRM dashboard by Divan Raj
如果我们服务于为企业搭建 CRM、ERP 或者 OA 等系统的第三方公司，那么我们可能会老听到 SaaS 这个词。SaaS 是(Software-as-a-Service)，即软件就是服务。其他公司会来提供 SaaS 服务的公司定制系统，然后服务公司会为客户提供从服务器到设计一体化的服务。这里提到这个词是防止设计师误解它的定义。
△ Robo Advisor - Projection, List and Questionnaire by Michal Parulski
了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分吧。网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。
网页界面设计入门 第5篇
网页布局的重要性
网页设计的界面布局在制作网页设计时是非常重要的，它决定了网页的整体结构和用户体验。一个好的界面布局能够提供清晰的导航和易于浏览的内容，使用户能够轻松地找到他们所需的信息。
在制作网页设计时，有几个设计网页布局关键原则需要考虑：
一致性：保持网页布局的一致性能够让用户更容易理解和使用网站。这包括统一的导航栏、相似的页面结构和一致的字体和颜色选择。
对齐：正确的对齐元素能够帮助用户更好地理解网页的结构和信息层次。使用对齐线将元素对齐到网格或页面边缘，使页面看起来更整齐和专业。
重点突出：通过使用不同的字体、颜色、大小和样式，将重要的内容和功能突出显示。这样可以帮助用户更快速地找到他们所需的信息。
简洁性：避免过多的设计元素和冗余的信息，保持界面简洁和直观。简洁的界面能够提高用户的注意力和理解能力。
响应式设计：考虑到不同设备和屏幕尺寸的用户，使用响应式设计来适应不同的屏幕大小和分辨率。这样能够提供更好的用户体验，并确保网页在各种设备上都能正常显示。
色彩搭配的重要性
色彩搭配是制作网页设计时候非常重要的一环，它能够直接影响用户对网页的感知和体验。一个合理的色彩搭配可以使网页看起来更加美观、舒适，并且能够传达出特定的情感和信息。因此，色彩搭配的重要性不可忽视。
色彩搭配的原则
制作网页设计时，有几个色彩搭配原则需要注意：
色彩的搭配要协调统一：选择一组色彩，确保它们在整个网页中的使用是协调统一的。可以使用色彩搭配工具或者参考色彩搭配方案来帮助选择合适的色彩组合。
色彩的对比要明确：通过对比来突出重点和信息，使网页更加有层次感。可以使用互补色、对比色或者明暗对比等方式来实现色彩的对比。
色彩的适度使用：过多或过少的色彩都会给用户带来不好的体验。适度使用色彩可以使网页看起来更加舒适和专业。
色彩搭配的示例
下面是一个色彩搭配的示例，以展示如何根据色彩搭配原则来设计一个网页：
在制作网页设计时，选择合适的字体是非常重要的，它可以直接影响到用户对网页的阅读体验和整体感觉。以下是一些关于字体选择的基本原则：
可读性：选择易于阅读的字体是首要考虑因素。字体应该具有清晰的字形和适当的字间距，以确保用户能够轻松地阅读网页内容。
一致性：在整个网页中保持一致的字体风格是重要的。选择一种主要字体用于标题和正文，并在整个网页中保持一致的字号和字重。
配对性：选择字体时要考虑不同字体之间的配对性。字体应该相互搭配，形成和谐统一的视觉效果。一般来说，可以选择一种有特点的字体作为标题字体，然后选择一种更简洁的字体作为正文字体。
响应式设计：在选择字体时，要考虑字体在不同屏幕尺寸和设备上的可读性和适应性。选择相对较大的字号和简洁的字体可以确保在各种设备上都能够清晰地显示。
下表是一些常见的字体选择示例，以及它们的特点和适用场景：
图片的选择和优化
在制作网页设计时，选择合适的图片并对其进行优化是非常重要的。首先，我们需要选择与网页主题相关的高质量图片，以提高用户体验和视觉吸引力。其次，为了加快网页加载速度，我们需要对图片进行优化。这可以通过压缩图片大小、选择适当的图片格式（如JPEG、PNG）以及使用图片缓存等技术来实现。通过这些优化措施，我们可以确保网页在加载速度和视觉效果方面都达到最佳状态。
图标的使用和一致性
图标在网页设计中起到了非常重要的作用，它们可以用来传达信息、引导用户操作和提升用户体验。在使用图标时，我们需要注意以下几点。首先，选择符合网页风格和主题的图标，确保它们能够与其他元素相协调。其次，保持图标的一致性，即在整个网页中使用相同的图标风格和设计规范，以确保用户的一致性体验。最后，为了提高可访问性，我们应该为图标添加适当的文本描述，以便于屏幕阅读器等辅助工具的识别和理解。
图片和图标的版权和合法性
在使用图片和图标时，我们需要注意其版权和合法性问题。首先，我们应该确保所使用的图片和图标具有合法的版权，不侵犯他人的知识产权。其次，如果需要使用他人的图片或图标，我们应该获得相应的授权或使用许可。此外，为了避免法律纠纷，我们应该了解和遵守相关的版权法律和规定。通过遵守版权和合法性原则，我们可以保护自己和他人的权益，同时创造出合法和可信赖的网页设计作品。
网页界面设计入门 第6篇
响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。
网页界面设计入门 第7篇
Pixso 的强大功能
交互式原型：Pixso不仅仅是一款图形设计工具，它还支持原型设计。这使得设计师可以在一个界面内创造和预览完整的交互式界面流程，极大地提高了制作网页设计效率。
设计共享与协作：Pixso 提供了 Cloud 功能，这是一个在线平台，允许设计师将项目上传到云端，并与团队或客户共享。他们可以直接在网页上评论、测试原型并下载资源。这项功能大大促进了团队间的协作效率。
易用性和灵活性：对于新手来说，Pixso 的简洁直观的用户界面非常友好。所有工具和菜单都经过精心设计和安排，使用户可以快速理解和使用。更重要的是，Pixso 的强大灵活性也表现在其对插件的支持上。有数千种插件可供选择，以扩展Pixso的功能，并让制作网页设计流程变得更为顺畅。
Pixso的使用场景
从简单的图标设计，到复杂的应用程序和制作网页设计，Pixso都能完美应对。
✅ Pixso 个人用户完全免费
图片资源
在制作网页设计时，使用高质量的图片资源是非常重要的。以下是准备网页设计所需的图片资源的步骤：
选择适合的图片类型：根据网页设计的主题和风格，选择合适的图片类型，例如照片、插图、矢量图等。
寻找高质量的图片库：在互联网上有许多免费和付费的图片库可供选择。一些常用的图片库包括Unsplash、Pexels和Pixabay等。这些图片库提供了大量高质量的免费图片，可以根据关键词进行搜索。
注意版权问题：在使用图片资源时，务必遵守版权法规。确保所使用的图片具有合法的授权或符合创作共用协议（Creative Commons）。
网页界面设计入门 第8篇
了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由 HTML 编译的，我们在服务器上存储的网页代码基本都是 HTML 格式。HTML 全称是 HyperText Markup Language，即超文本标记语言。「超文本」是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用 HTML语言写一段文字会是什么样呢？
△ 模拟代码编译过程
△ 主流形式：HTML + CSS + JS
△ 主流后台编译语言：PHP ASP JSP CGI
我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：第一，HTML5 视频播放；这种方式缺点就是不兼容低端浏览器。第二，Flash Player 播放器播放；这种方式的缺点是Flash安全性很低而且效率慢。第三，动画使用 Gif 格式；这种方式的问题是动画长度不够，并且这个格式仅仅支持透明和不透明两级属性。那么像 Google 首页 Doodle 的动画是怎么实现的呢？这种技术叫做：雪碧图。CSS 雪碧即 CSS Sprite，也有人叫 CSS 精灵，它是一种 CSS 图像合并技术。它本身调用的图片是支持多级透明的 PNG 格式，然后把动画并排排列出来。比如一个卡通人物的动画每帧宽度是100px，那么就把它的动作1 动作2 动作3 动作4 并排放在一张宽度是400px的 PNG 图片里。然后代码在一个100px的宽度框子内背景图调用这张 png，我们就看到了动作1，然后过一秒钟代码会悄悄移动100px我们就看到了动作2。由于速度很快就让我们看到了连续动画。雪碧图也有自身的缺点：如果帧数太多，会消耗很大的内存。所以帧数一定要控制少。如果你的动作设计了12帧，那么我建议你可以试试将2、4、6、8、10删除，保留一半的动作。
△ 雪碧图
视差滚动是一种运动速率不一样的设计效果，用以实现空间感。比如密尔沃基警察局官网就大量运用了视差滚动效果。其实现原理是，代码判定网页滚动，滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验仿佛是我们在物理现实中看到的空间感一样。视差滚动已经不是什么高新技术，如果你的网站比较适合视差滚动，请大胆设计并和前端工程师提需求，相信前端工程师可以满足你的要求。我们需要准备的就是运动速率不同的分层静态 PSD 文件。
△ 运用了视差滚动效果的密尔沃基警察局官网（）
终于，经历过长篇大论网站的原理与组成部分后，我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活，然而因为太灵活也会让我们的设计师无从下手。那么接下来我将介绍网站设计的规范，在您工作的时候可以参考。注意，在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等，这样有助于后期不会有误会。
因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。在最新版 Photoshop 网站 Web 预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。内容安全区域为1200px （或1000px / 1400px）。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸，因为对于适配的方式和后续配合他们更有发言权。
△ 网站的尺寸规范
我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。比如在苹果电脑上看到的文字效果和 Windows 系统电脑上看到的文字效果就有所不同：苹果会对文字进行渲染，而 windows 的文字几乎充满了像素颗粒。按照用户占比来说无疑 Windows 的用户是主流，所以尽管我们可能使用苹果电脑设计网页，但是设计出来的网页效果也应该和 Windows 显示一致。否则我们设计完漂亮的设计稿，程序员无法还原成我们设计的样子。另外，字号的大小也非常重要。网页的显示区域决定了文字不可以过大，在网站设计中我们的文字大小一般来说是12-20像素。为什么不能比12px更小？因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。那么总结一下：文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑、大小为14-20px、渲染方式选择 Windows Lcd 或锐利。另外，英文和数字需使用 Arial字体，渲染方式选择无。
△ 网站字体规范
网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的 png 格式、图片文件很小的 jpg 格式、支持透明/不透明并且支持动画的 gif 格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？
第一种方法，给程序员切图的时候我们可以适当缩小图片文件的大小。比如 Photoshop 中存储为 web 所用格式就会比快速存储文件更小。
第二种方法，可以尝试使用例如 Tinypng、智图等工具再次压缩图片。这些工具会把图片中的多余信息删除并且压缩，而图像质量不受损失。
第三种方法，Google 研发了一种 Webp 格式，它的图片压缩体积大约只有 JPEG 的2/3，能节省大量的服务器宽带资源。比如 Facebook、Ebay 还有我们设计师常用的站酷图片存储都是使用了 Webp 图片格式。
第四种方法，浏览器和服务器握手时需要下载网页所调用的图片资源，那么如果一个网站有一百张图片的话，浏览器和服务器就得握一百次。第一会耗费服务器资源，第二访问速度就会慢一些。所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张 png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。
△ 在线压缩工具Tinypng网站
按钮的风格在过去的十几年发生了很大的变化，由一开始的「斜面与浮雕」风格过渡到后面的「拟物风格」，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。
△ 不同时代下不同的按钮风格