网页设计过程

　　网页设计过程网页设计作为一门专业在过去的10年里发展了很多。有效的工作流程和实践已经出现，并被证明是事实上的行业标准。然而，对于网页设计的早期痕迹仍有一些实践，应该避免。此类无效且过时的做法是ldquo；三种模式rdquo；这是** 好的办法。过去，需要网站设计服务的公司要求设计师提供三种（通常是）PS图象处理软件模型（或高保真组合的其他形式）选项。这些通常是基于一组初始的简单请求或与客户协商的一对夫妇。这种方法的** 终产物是基于个人偏好和主观选择的设计。这种满足用户需求和实现企业目标的方式就像在黑暗中射击。应该避免这种工作方式（来自网页设计师的请求）。更好的设计网站方法是在用户设计中迭代处理杰西杰姆斯加勒特元素。它由五个阶段组成，每个阶段都基于在前面步骤中所做工作的决定。

　　策略、范围、结构、框架和风格：满足网站设计的五个阶段。包括在这里，我们有一个非常集中的版本的工作涉及到所有阶段：牛；战略恩达什；定义关键业务目标的产品和平衡用户需求的目标受众（基于市场调查、焦点小组、用户角色等）。高水平简介、设计团队要求、项目目标等；公司经营范围；记录所需的功能和内容。它还包括决定在当前项目中构建什么和不构建什么。交付：项目详细规范；结构设计；信息架构和交互设计。在这个阶段，网站的页面结构是由卡片排序和用户的旅行地图决定的。对于应用程序，创建流程图和状态图。可交付成果：网站地图，低保真原型或线框牛；《信息设计与导航》UI设计。使用本地结构，可以就内容的开发、使用什么UI元素以及它们如何工作做出目的决策。此时应实现所有导航元素，并将内容添加到适当的位置。可交付成果：网站全功能原型或应用程序；花柱花柱；将视觉处理和品牌风格指南应用于工作产品。功能齐全、布局合理网站，很容易将企业或产品品牌纳入其视觉加工目标选择。这是一个反复的过程，每一步都要经过几个周期，直到得到批准。在流程的每一步，发现的缺陷也可能得到改进，或者在交付前反映出现有的改变方式。在每一步测试可用性的能力的主要优点是避免时间和预算的想法，这后来被证明是根本错误的或不受欢迎的大承诺。

　　网页设计师熟悉好的工具、原型和线框图，比如uxpin、balsamiq或Axure，这些都是现代实践和流程应该熟悉的。有人喜欢在PS图象处理软件上创建烟花或InDesign，有人实现直接访问，有人喜欢自助或基本普及CSS框架。后者的优点是，这些早期的原型后来演变成实际的生产模板。这消除了死胡同交付和减少生产时间。

　　** 后，本文所描述的方法，以及类似的方法，导致更好的理解，研究和数据驱动的选择，在整个设计过程中使用较少的主观决策。通过这种方式，您可以通过询问设计师关于项目中不同元素的布局、推理、位置和工作风格的信息来轻松识别他们的做法。他们应该能够给你快速简洁的答案，支持事实和研究结果。

　　为了应对当今的网页设计过程，互联网流量的很大一部分来自移动设备的不同功能，任何新的网站设备都能在尽可能多的设备上运行是至关重要的。适用于无数屏幕和设备的网站设计和开发过程通常称为ldquo；响应性网页设计；或ldquo；适应性设计（换句话说，它是指响应设计的具体方法。今日网站是否有回应的问题已不相关；回答清楚ldquo；是ldquo；即使谷歌不适用于移动设备后面的网站。真正的问题是如何在不超出预算或失去移动用户体验视角的情况下，实施成功有效的多设备策略。

　　任何有经验的网页设计师都应该能够做出网站技术突破的回应。为了帮助您找到** 适合您的项目，我们准备了几个问题和指导方针。此外，设计和响应网站开发中的重要因素也必须得到解决。

　　跨设备内容策略响应式设计不仅使所有内容适合任何大小的屏幕；设计者必须考虑环境中的每个设备，这些设备可以随其功能而改变。

　　由于移动革命，网页设计师不得不考虑许多不同的软件和硬件平台。有时，** 好跳过移动设备上的复制内容，使用替代复制或不同的图像资源，因为网站需要在不同屏幕之间进行导航更改。其他时候，应在移动设备上启用内容或特定功能，如ldquo；点击“呼叫”；用于提供用户基于位置的交互或特定设备的使用的按钮ldquo；和；应用下载；按钮。问：我们会准备不同内容或资产的不同设备吗 有时候，是的。在这种情况下，这样的改变是必要的：牛；** 常见的图像必须出现在不同的小肖像屏幕上；宽幅宽高比图像桌面网站的横幅很棒，但在竖直的智能手机屏幕上很难使用。

　　公牛；在一个大的演示视频可以是巨大的计算机屏幕上，它可以被移动设备上的图像和文本取代，如果你希望从交通设备连接移动互联网非常缓慢。

　　公牛；复制一些片段可能会被忽略（或重写），因为小屏幕设备用户可能无法读取它。公牛；某些手机的动作控制可能会改变，以更好地适应设备；例如，ldquo；发送消息；计算机可由ldquo组成；电话号码；手机正在取代手机。

　　公牛；在小屏幕上，复杂的图表、图表和长表仍然保留链接到单独的页面，而不是让它们在网页上流动内容。另一个想法是以不同的方式呈现相同的数据，或者仅仅显示** 重要的部分。公牛；导航应该考虑，甚至是针对不同屏幕尺寸单独设计。这不一定是可视化，但通常存在不同的结构，例如链接的平面列表，而不是下拉菜单/下拉菜单，或者通过在特定设备上更复杂的菜单上显示较少的深度。

　　在不同的屏幕布局优化和电脑和大胶片水平放置中，放网站内容的水平空间很大，小屏幕让您可以少放元素的空间。这就是为什么网站通常在智能手机上设计一个单列布局。这是如何响应设计网站：页面布局更改的一个主要问题。Q： 如何确保内容布局在不同设备中看起来很好 你取得了什么技术 部分ldquo；断点；它应该基于流行设备尺寸的定义、类型和上下文。这些预定义的屏幕宽度（较少屏幕高度），页面布局的更改，例如，从三列、两列和一列更改。当前，** 流行的宽度断点：

　　公牛；1920年：电视屏幕和大型桌面显示牛；1280至1920年：绝大多数笔记本电脑，许多现代台式电脑显示器和大型（通常为10现状）；当公牛被抱在景观模式下；800至1280：景观模式的小型平板电脑，用于较大或更小的显示器；480至800：纵向模式片（保持垂直）和水平模式的智能手机公牛；前480名：在纵向模式下，智能手机根据屏幕大小ldquo使用不同的样式；媒体使用CSS代码，例如，仅在屏幕宽度大于480像素但小于800的设备上，将段落的字体大小更改为14像素，则适用以下规则：CSS media（** 小宽度：480px）和（** 大宽度：799px）{font size:14px；}

　　另一个重要的考虑是在移动设备上以相同的顺序显示HTML代码。一般来说，编写干净、结构好、语义正确的HTML代码，用于响应网站的顺利进行还有很长的路要走。

　　不同设备的用户界面交互，因为不同设备不仅在屏幕大小上，而且在输入方法中也存在，因此确保每个UI元素工作都应在每个设备类型的上下文中进行。这意味着下拉菜单应该接受电脑屏幕，但在智能手机和平板电脑中，用户更希望导航更像移动应用程序中的屏幕。Q： 如何确保UI作品，感觉自然，以及您在不同设备上做什么 夫妇的名称不适合特定设备的交互模式。不同的设备有不同的功能，用户希望在其设备中使用类似的应用程序网站。

　　桌面和移动用户界面** 重要的区别在于，桌面通常由鼠标或触摸板和快捷易用的键盘控制，而移动设备则依靠触摸屏无指针和屏幕键盘，使用起来往往很麻烦。另一个需要考虑的问题是，该设备没有指针和悬停状态，而悬停状态通常用于触发网页上的某些操作。指针和触摸屏两种输入法更容易（自然）或更难，同时执行不同的操作也更慢。例如，屏幕上的移动项可能更容易触摸屏（因此，将避免使用台式计算机），同时单击小控件和鼠标指针更容易（因此UI控件应更大触摸屏）。

　　资产优化基于屏幕大小，即使相同的资产可以用于不同的设备，也不意味着相同的图像大小或视频质量将优化。为了减少加载时间，特别是在移动互联网连接中，web设计者应该知道他们拥有的不同设备的资源。例如，1920像素宽的背景图像400KB很好台式电脑，在智能手机上是冗余的（质量方面），下载速度慢（文件大小方面）。因此，如果用户的屏幕足够小的话，** 好使用较小的图像版本。您不希望用户在只看到一个版本时下载该版本。问：不管屏幕大小，你提供相同的资产有关系吗 在这方面，图像和背景有什么区别吗

　　这一点很重要，至少对于较大的图像文件来说，要有移动不同版本的设备和桌面屏幕。可以向移动用户提供相同图像的较小副本，以减少加载时间。图像的大小，但不要显著降低移动设备的屏幕密度（如果可能），因为它们通常比台式电脑显示器高得多。这一决定应根据具体情况而定，因为有些图像可能不会产生太大的视觉冲击，而另一些图像对于保留尺寸缩小的细节很重要。

　　在技术层面上，CSS中定义的背景图像与内容（包括HTML图像文件中的图像）有很大的区别。背景可以在不同的CSS媒体查询中轻松设置，因此每个版本仅在用户显示查询时提供；其他未从Web服务器下载。HTML中的图像仍然没有内置的工作和支持服务，具体取决于用户的屏幕大小。不同的技术，例如使用polyfill脚本来模拟即将到来的行为；图片gt；元素，或其他脚本，有自己的习惯，或使用CSS背景图像显示。但是，通常应该避免使用CSS方法，因为CSS背景图像没有任何要修饰的语义。此外，它可以描述缺乏性标题和ALT属性：标签

　　谢泼德设计文章推荐：

　　重新思考你的品牌，创造疯狂的客户，重新审视你的数字公关策略，一片混乱网站伤害网站的流量