夫唯域名网何为网页设计
引言：网页设计（web design，亦称Web UI design，WUI design，WUI），是指根据企业希望传达给浏览者的信息（涵盖产品、服务、理念、文化等），进行网站功能规划，随后进行的页面设计优化工作。作为企业对外宣传资料的一部分，精致的网页设计，对提升企业的网络品牌形象极为关键。
网页美术设计（又称网站美术、美工设计）在某种程度可称作“视觉艺术”，网页的美术创作需充分吸引访问者的注意力，使访问者感受到视觉上的愉悦。因此，在网页创作过程中，必须将网站的整体设计与网页设计的关联原理紧密融合。在某种意义上，网站美术设计是网站成功的关键因素。
网页美术设计与网站整体形象保持一致，遵循艺术规范和网站标准，特别关注网页色彩（主色调和辅助色调）、图片的运用及版面布局，保持网页的整体协调性。
网页设计关键点
1、网页是客户浏览网站获取信息的主要途径。因此，页面加载速度快、浏览方便快捷、无错误链接是设计网页的最基本要求。
2、网站是企业的门面。因此，网页美术设计通常要与企业整体形象保持一致，遵循CI规范。需注意网页色彩、图片的运用及版面布局，保持网页的整体协调性。
3、在采用新技术时，要考虑主要目标访问群体的地域分布、年龄层次、网络速度、阅读习惯等因素。
4、网页设计需体现企业文化和经营管理。
5、制定网页更新计划，如每半年至一年进行较大规模的更新等。
6、主页是客户登录企业网站，首先看到的页面，也是获取信息的起点，因此，主页的设计除具备上述特点外，还要求具备清晰的导航系统和独特的创意设计。
相关阅读》》自适应网页设计与响应式网页设计
在当前网站开发中，主要有两种方法，即自适应和响应式，这两种方法都采用断点的概念，该概念是通过媒体查询创建的限制，在这些断点上，网站的布局会被强制更改。
自适应与响应式方法之间的区别可以归结为，网站在断点间变化，自适应配置是一系列宽度固定的布局，而响应式使用的尺寸则较为灵活，因此即使在断点之间，网站仍具有一定的流动性。
鉴于不同设备屏幕尺寸的巨大差异，试图让一系列宽度固定的页面适应所有配置都是一种不明智的做法，更好的做法是采用流动设计，它包括使用长度值的百分比以使页面元素的尺寸适应窗口的大小，这种做法也是构建响应的关键。
大多数用户所使用的台式机或笔记本电脑的显示器宽度大于或等于1024，那么制作一个宽度固定为960的页面是可以接受的，但这种情况已成为历史，如果现在还按照上述方式设计，那将意味着使用移动设备的用户看到的是一个按比例缩小的屏幕，他们只有通过放大、缩小和左右滚动才能完全浏览页面。这种结果虽然可以接受，但也并不理想。
使用百分比而非固定值意味着页面元素可以随着窗口的尺寸进行伸缩，从而使内容流进屏幕边界内，这就是为什么这种方法被称为滚动设计，将这种方法与内容或设备的媒体查询相结合，就构成了响应式设计的核心，这为用户提供定制化的优质体验，无需考虑用户设备的情况。
响应式网页设计排版注意事项
1.精心挑选字体将为你的排版赢得灵活性和高效性
自从客户端字体（Font Face）被引入网页设计中后，网页设计师们便拥有了将不同字体用于自己设计中的自由。在此之前，他们只能使用特定的、与网页安全兼容的字体。
但面对这些可以自由使用的字体，设计师们还需要知道如何正确地使用它们。响应式网页设计已经成为多数网站的标准设计模式，不过由于要考虑不同尺寸的设备屏幕，它对网页排版也提出了一些限制。因此，网页设计师在一个响应式网页系统中使用多种字体时，必须十分谨慎。在同一个网站中不要使用太多种字体，最好不要超过三种。同时也不要使用过于流行的字体，这并不能让你的网页看起来比其他网页更有优势。
2.突出显示标题
网页排版的一个特点是标题在版式中占据突出位置。独特的标题能吸引用户在你的网站停留更久。为了实现这一点，你可以利用字形（glyphs）和连字（ligatures）技巧创造外观更独特的标题。
连字指的是看起来似乎是连接在一起的字母。例如，单词“fish”中的f和i在某种字体里可能联成一体（fi）。通过浏览器的字体设置功能或借助“文本渲染——优化清晰度”（Text Rendering- Optimise Legibility）特性，你可以轻松地实现连字效果。火狐浏览器已经设置了默认的连字符。在某些字体中使用特定的连字组合效果能为你的网页版式增加美感和风格。在网页排版软件的Text, Type或Open Type目录中，一般都可以开启或关闭连字效果。当合适的字母相邻出现时，这些软件会自动为它们设置连字效果。
3.合理搭配不同大小和颜色的字体
正如上面的图片所传达的信息一样，我们在网页设计中必须选择能在桌面端和移动设备屏幕上都清晰显示的字体。一款字体在印刷品中与在数码设备中显示的效果是不同的。因此我们必须理解font family属性，风格和效果。根据W3C对于CSS字体的规定，Serif, Sans-Serif, Monospace, Fantasy和Cursive等字体都具有font family属性。
其次，应根据网站的主题或分类来选择字体。这样才能确保你的网页能引起目标受众的共鸣，达到想要的效果。衬线字体同样能用于提升文本的阅读效果，强化要传达的信息。这里的问题是，衬线字体的特性决定了它只能在高解析度的屏幕上正常显示，在低解析度的屏幕上可能会导致糟糕的结果。因此建议你在短标题中使用艺术字体，在正文中采用更简洁的字体。
第二，需依据网站的主题或类别挑选字体。如此一来，你的网页方能触动目标观众，达到预期的效果。粗体字同样适用于增强文本的阅读体验，凸显所需传达的信息。然而，问题在于粗体字的特点决定了它仅在高清屏幕上能正常显示，在低清屏幕上可能产生不良效果。因此，建议你在短标题中运用艺术字体，在正文中选用更简洁的字体。
4.在响应式布局中，调整行距至关重要
必须对网页中的行距（line spacing）进行调整，因为字体的行距与布局的响应性紧密相连。响应式设计亦涵盖在不同尺寸屏幕上字体发生的自适应变化。因此，调整字体的行距是必要的。
理想的行距为每行文本中字符数量在45-47之间，包括空格和标点。最长不超过85个字符。这是基于对人们的阅读习惯和眼动规律的研究得出的结论。据此，有专家建议网页内容采用左对齐的排版方式，因为人的视线在阅读时一般会按照从左至右的方式在水平方向上移动。
5.当用户与屏幕的距离不同时，运用不同大小的字体能提升可读性。在响应式布局设计中，必须考虑这一点。
字体的大小需确保在设备上可见、可读。而要做到这一点，可能与前面所说的保持“理想行距”产生冲突。因为“理想行距”意味着要调整字体尺寸，而这两种调整都可能导致文本难以阅读。关键是要保证浏览者能舒适地阅读网页内容。响应式设计的关键在于，根据用户与设备屏幕距离的不同，应用于设备屏幕的字体大小也应不同。对于字体大小与阅读距离的关系，已有计算方法。
6.响应式布局要求浏览器支持不同大小的字体
如果你设计的网页中需要使用某些自定义字体，你必须确保浏览器支持加载和显示这些字体。即便字体本身清晰，没有错误，但浏览器兼容性问题可能会使你前功尽弃。你还必须检查你保存的字体文件格式与你想应用于网页中的字体是否兼容。不兼容的字体无法正常加载，最终会影响网页的显示。
案例分析：从上面的示例中我们可以发现，我们需要使用标准字体或“字体库”。第一步是通过“字体测试”来确定一款字体是否适用于网页中。浏览器对于每个系列的字体都有“首选选项”、“备选选项”、“第三选项”……的区分。如果浏览器在这个系列中找不到任何合适的字体，它会自动选择默认的无衬线字体、粗体字体或等宽字体。
举例来说，许多浏览器都自带 Century Gothic 字体。你可以创建一个字体库，将 Century Gothic 字体视为你的首选选项，之后是 Arial、Helvetica，最后是一款无衬线字体。注意，在 CSS 中，标题中含有多个单词的字体需要加上引号。例如：font-family:“Century Gothic”, Arial, Helvetica, Sans-Serif。
这样一来，浏览器会首先采用 Century Gothic 字体。由于许多浏览器都自带这款字体，大多数用户在浏览网页时看到的也会是 Century Gothic 字体。对于没有配置 Century Gothic 的浏览器，浏览器会按照 Arial、Helvetica、事先设置的无衬线字体的顺序寻找替代。
7.与字体的物理属性相关的因素会影响字体在设计中的灵活性
响应式布局可能会受制于影响字形的因素。这些因素包括字重、字宽、笔画对比、字体高度、光学尺寸等等。这些因素的微小变化都会影响站点的观感。当然，现在已经有了不少的工具可以让设计师部分地修正这些限制。
Superpolator 和 FlowType.js 就是此类工具中有代表性的两款。当屏幕尺寸减小时，不同比例的网页间的差异就会更为明显。因此就需要在网页尺寸与缩放比例间找到平衡点。例如，用于标题的字体比用于正文的字体大/小多少倍，这就涉及比例问题。这也就是我们为何需要响应式布局的理由。我们需要在断点中能自行缩小的字体，因为设计师们无法为网页内的所有字体元素一一调整基线风格。
web3.0时代下，网页设计将会有怎样的发展趋势
1.用于UI设计的Sketch app
Sketch正在迅速取代 Photoshop，用于从低保真线框到高保真模型和设计图标的所有的 UI 设计任务。
Sketch app 是一个专为 web 和移动设计人员制作的 Mac 应用程序。它的功能、灵活性和速度满足了你对于一个轻量级、易于使用的软件包的想象。有了这个 app，你就可以专注于创作最佳的设计了。
它提供了一个流畅的工作环境，为任何界面提供精细化的矢量元素，而且还有你想从 Photoshop 得到的许多功能，如文本效果和图层样式。
如果 Sketch 能够继续提供最佳的 UI 设计体验，那么它在 2016 年及以后必然还会继续保持辉煌。
2.基于浏览器的IDE
桌面 IDE 已经存在了几十年，从 Notepad++ 到 Xcode 和 Visual Studio。IDE 通过提供建议和语法高亮等功能使得我们可以更容易地编写代码。在 IDE 中写代码非常简单，而且很易于阅读。
但传统的 IDE 是作为桌面应用程序发布的。从过去的几年里，基于浏览器的云 IDE 发生了戏剧性的变化。除了 web 浏览器，我们不再需要任何软件，因为浏览器允许设备操作来自于任何有互联网接入的计算机的代码。
云 IDE 的功能更像是 web 应用程序，你可以将代码保存到你的帐户进行共享或个人存储。CodePen 是目前最流行的 IDE，支持 HTML/CSS/JS，具备像 Jade/Haml 和 LESS/SCSS 一样自定义的预处理。
CodePen 主攻 web 前端。它可以显示你最近的创作，并从其他网络资源上得到反馈。你可以为烦人的 bug 建立一个测试案例。你还可以从 CodePen 上为你的项目找到设计模式和灵感。
CodePen专注于网页前端技术。它能够展示你的最新作品，并从网络资源中获取反馈。你可以为烦人的bug创建测试案例。此外，你还可以在CodePen上找到设计模式和灵感。
-
卡片式布局（卡片布局）
网站的卡片布局几年前通过Pinterest而流行起来，自此成为内容丰富的网页趋势。免费的插件，如jQuery Masonry，可以用来模仿这种布局风格，其动画卡片能够适应不同的高度和宽度。
卡片布局非常适合用在信息众多但希望便于浏览的页面。Google Now就采用卡片布局来宣传其app。
可以将卡片式布局视为众多动态的网格，每个网格只展示最简明的重要内容，这些内容条目组合在一起就形成了基本的列表。在线杂志就是完美的例子，如UGSMAG和The Next Web，就使用了卡片布局来展示其最新帖子和内容。
-
定制的演示视频
各种组织都倾向于定制演示视频。使用动画，例如Crazy Egg，来制作这些视频。即便如此，不同的视频依赖于真实的镜头，例如Instagram Direct。
演示视频的目的是解释产品或服务的工作原理。访问者可能在浏览了一系列功能后，仍然不知道如何操作这个产品。而可视化的视频则可以在短短几分钟内一一说明功能，并涵盖所有重要内容。最重要的是，人们更喜欢观看视频而不是阅读文章。他们可以很容易地从视频中理解你的意图。
如果你想尝试制作一个定制的演示视频，那么可以阅读Udemy课程。这是一个专注于登录页面设计视频讲解的深入学习课程。Udemy课程不仅说明了如何使用动画视频软件，还会告诉你如何使用视频来吸引和隐藏访问者。
- 实时产品预览
登录页面设计因网络速度的提高和浏览器功能的扩展而发生了令人难以置信的改变。我注意到一个重要趋势，即主页或自定义登录页面增加了实时产品预览。
以Slack的产品页面为例。一个视频演示和矢量图形覆盖了其界面。这些产品预览使潜在用户第一眼就能了解产品的工作原理。
不只是消息，所有的文件、图像、PDF文件、文档和电子表格都可以放入Slack，并与你想分享的任何人共享。你可以添加注释、标注星号供以后参考，这一切都可以搜索。
- 自动化任务执行器
前端开发的世界随着针对网站创新而出现的新最佳实践发生了巨大的变化。任务执行器/构建系统，如Gulp和Grunt，替代了以前需要大量手动完成的任务，越来越被广泛使用。
自动化是快速周转和高质量代码的关键。众所周知，机器不会出错，因此自动化程度越高，产生的问题越少。
这些工具基本上运行的是JS代码，可以自动化实现部分工作流程——无论是自定义的JS代码还是其他人编写的脚本。
- 设计协作工具
即时消息和群聊已经存在十多年。人们喜欢这个功能，并且可以继续使用这个功能。然而，这些资源在传统上依赖于纯文本附加文件的一些功能。
但是，我们在讨论的是未来，未来一个新出现的趋势是在聊天应用程序中共享实时设计文档。Notable就是其中一个例子，创新和注释可以被分层在文档的顶部。通过快速迭代，它提供了更好的界面。从草图到完全编码的网页，Notable让团队在设计过程的每一步得到更快的反馈。
Slack是当下最流行的聊天应用程序，支持许多类似的功能。
- 响应式前端框架
前端框架，如Bootstrap，已经存在了相当长的时间，并将继续展现其价值。响应式设计，受其成为框架方式的制约，可以成为前端代码，而不仅仅是后端（Django、Laravel等）。
进入2016年，我认为我们会看到更多关于响应式前端框架以及它们在web项目中的价值的内容。在接下来的一年里，可能会发布许多前端框架的app，功能比现在更强大。许多设备都在期待Foundation 6和Bootstrap 4公共V1版本的发布。
- 更加关注UX设计
UX设计是通过改进可用性、可访问性以及用户和产品之间互动的愉悦感来提升用户满意度的过程。
用户体验设计领域将随着更多设计师和开发者的关注而继续快速增长。UI设计是UX设计的一部分，但不是最终目标。UI是手段而不是目的，最终目的是提供一个梦幻般的用户体验。
目前，针对这些目的的资源有UX Stack Exchange和free UX ebooks。如果你还没有涉猎用户体验，那么现在是学习和了解UX原则如何应用到所有数字界面窗口的最佳时机。
- 支持触摸的网站功能
智能手机浏览器支持所有站点的触摸功能，以保持reverse similarity。我们也可以看到更多的插件和自定义元素添加到站点，关注触摸事件的特定对象。
我们希望网站可以实现触摸功能。而且这种网站也会因为其独特的功能而提升访问量。如Photoswipe和Dragend.js等内置的插件可以处理触摸屏上的滑动和点击手势。Web开发人员不仅要会构建响应式网站，还得能构建具备触摸功能的网站。
这些插件提供了触摸功能，但网站还需要具备其他的手势功能。如果你多搜索一下，你会发现一些真正令人印象深刻的、针对Web的、内置的、纯粹依靠触摸事件的功能。
这些就是3.0时代的Web设计趋势，它们的到来和发展将使得构建网站变得更容易和更简单。
