基于web的网站设计（Web界面的5种基本设计方法）
平时的工作中，经常会遇到一些不舒服，但又说不上理由的网页设计问题。本文作者从设计理论出发，有理有据的阐述这些问题，并通过实例进行分析讲解，希望能够提供多一些设计思路。相信大家看完后能从作者的观点中学到不少的干货。
对可视网络内容的深入了解：通过大量的UI示例和演示，检查用于使网页设计美观且用户友好的不同类型的图形。
李奥登说过“内容不是王者，而是王国，”。我完全同意：没有的内容设计只会是一个外表华丽的包装。不应该对更重要的东西，设计或内容进行斗争，因为如果没有其他东西，没有一个可以完全运作。今天，我们邀请您一起聊聊用户每天都会遇到的网页可视化设计的五种基本类型，并探讨每种类型的优势。
什么是网络内容？
Web内容基本上是填满网站的所有内容，也是用户体验的一部分。这就是人们在网站上阅读，聆听，观看，观看和操纵的内容。基于此，Web内容的核心类型是：
文字
图片
视频
动画
音频
今天，我们来讨论一下这些图片。
图像不仅仅是美的一个因素：在用户体验设计中，图片在增强可用性方面起着重要作用。大多数网络用户都是视觉驱动的，他们比文字更快地感知图片。因此，图像通常是首先看到和扫描的布局元素。更重要的是，它们具有信息性和情感吸引力，它们不仅传递信息，还传递特殊的美学。此外，网页上使用的图像对网站SEO排名产生积极影响。
根据网站设计背后的目标，创意和营销团队可以选择不同类型的图像。以下是网页上最常见的内容。
商标
一个标志是一个品牌，它的符号表示的一个关键要素。因此，它是大多数网站的明显视觉元素，可以呈现公司，品牌，服务，社区和组织。如今，个人博客和投资组合网站通常都会提供原创徽标。
在网页设计方面，请考虑以下有关UI中徽标使用的提示：
在标题中放置一个徽标- 它是网页高度浏览的区域之一
不要打破经过良好检查的习惯：当用户点击标题中的徽标时，它会将它们带到浏览的起点。如果它是单页网站，它可能是主页或直到页面的开头
想一想悬停时的徽标动画：动作会增加生命，并且会提示元素是可以交互的。
这是一个加密货币服务的登陆页面，带有交互式徽标，可以增添一些乐趣，让体验更加生动。
相片
照片可能被称为网页设计图像的经典。它们用于各种目标，例如：
主题照片
演示照片
项目的照片（例如，在电子商务网站上）
博客文章的标题照片
英雄横幅照片等
照片的最大优点是能够将用户在网页上看到的内容与物理事物和现场人员的真实世界联系起来。几十年来，照片已经成为人类现实的一部分，远在互联网问世之前，所以这种视觉效果对我们来说是原生的，接近和清晰的。更重要的是，随着所有这些设备让我们任何人在一秒钟内捕捉到的东西，摄影真的是许多人日常生活的一部分。因此，在网站上使用它，它建立了强大的联系。
舞蹈学院登陆页面
博物馆着陆页
更重要的是，摄影也是一种艺术。通过它们，您可以在Web用户界面中设置真实性和美学的平衡。您可以保持必要的风格吸引目标受众并创建必要的情感背景。这是选择照片以支持博客和媒体网站中的文章的原因之一。
新闻媒体网站
毫无疑问，照片是电子商务网站上视觉呈现商品的主要工具，其中“你得到你所看到的”这一原则是成功的重要组成部分。
家庭工艺网站
设计师在哪里拍照？有几种方法：
为特定项目拍摄和处理的原始照片：这是最昂贵的选择，但照片将具有更高级别的独家性;
付费照片：您可以从提供各种照片的照片库中购买所需照片。这可能比自定义照片拍摄便宜，但您可能会花费大量时间搜索与您的任务相对应的照片;
免费照片：您可以免费分享来自社区或团队的照片。这是最便宜的选择，但你必须准备其他人也可以这样做，所以你必须好好考虑如何在这些条件下使你的设计原创。
因此，很容易看出您选择的方式取决于具体项目，预算和目标。
无论如何，即使你是一个没有视觉预算的公司或个人，或者如果你正在为你的投资组合创建一个设计概念，免费照片网站现在提供了大量高质量的内容。其中，以下资源通常用于良好的照片内容：
Unsplash：这是一个来自世界各地的摄影师社区，免费分享他们的照片。照片以彻底的策展为特色，因此您不会在那里找到垃圾
Pexels：关于各种主题的大量免费照片
Moose Photos：专业制作的照片，它们协同工作，并且对于广泛的内容策略非常灵活
Pixabay：大量的免费图像，不仅是照片，还有插图和矢量图形。
Gourmet网站是 一家销售草药，油和香料的电子商务商店，用于展示商品的照片内容。
在网页设计中使用照片，请考虑以下提示：
下载高分辨率照片
为网络优化它们，以便太大的图像不会使页面过载 – 加载速度是积极的用户体验的关键因素
给图像足够的空气呼吸 – 保持负空间的平衡
记住响应性并测试图像在不同屏幕和设备上的外观
不要将照片用作装饰 – 让他们与用户交谈，传递信息并支持所有其他布局。
其中一个流行的设计趋势，最近几年的使用照片作为背景图像。这种方法使屏幕在视觉上和情感上都很吸引人。此外，它支持所有布局元素的完整性的感觉。另一方面，它需要对所有元素的对比度和易读性给予高度关注，这些元素在单色背景的情况下可能难以实现。
大城市指南登陆页面
插图
今年另一个重要的网页设计趋势是使用自定义插图满足各种网站需求。自定义图形以各种风格制作，有效支持页面或屏幕上信息的快速感知。它们还为视觉创意奠定了坚实的基础。它为我们经常阅读的博客和网站增添了美学和美感，并拓宽了艺术家的创作视野。
这是一个会议的登陆页面，插图画家和数字艺术家分享他们的经验。自定义英雄插图和它的动画使网页设计吸引人和原创。
你可能经常看到的插图
英雄形象
主题图片
与用户沟通的角色
博客文章图片
奖励和其他 游戏化 图形
通知和系统消息
贴纸（这些特别适用于Messenger应用程序）
评书
信息图表
营销的东西和广告横幅
内容类别的可视标记。
我们来看看一些例子。
这是一个设计师的投资组合网站的概念，专门为名人，娱乐，音乐和电影制作项目。 深色背景与自定义英雄插图相结合，看起来更生动，并与音乐会舞台的氛围相关联。
这是数字代理商的登陆页面，可以为最高的业务挑战和目标做好准备。标语和明亮的英雄插图显示的篮球运动员之间的强大联系很快传递了这个信息。
这是为佛罗伦萨设计的插图集，佛罗伦萨是一个在线市场，自雇护士可以在英国找到高薪班次。原始角色迅速吸引用户的注意力，显示故事，设置氛围，发送消息并以与平台的语气和语音相对应相得益彰。
这是该公司的登陆页面，为营销和促销提供完整的服务周期。自定义数字插图可以通过快速视觉提示讲述所提供服务的性质，通过鲜艳的调色板设置心情并支持页面所有部分的完整性。
吉祥物
一个吉祥物是一个字符，一个拟人化的形象，成为一个品牌，公司，服务，甚至公众人物的符号表示。
在Web用户界面中，吉祥物可以作为通信和交互的有效元素。改变其外观（例如，情绪，装备，活动等），您可以快速向用户传达明确的信息。吉祥物可以直接与语音泡沫通信，提供各种面部表情的视觉提示，用不同的图形变化反映用户的情绪，在教程中给出有用的指示并祝贺成就。所有提到的内容使得与系统的交互更像人类，从而增强了一般用户体验。
可爱和友好的吉祥物用作销售儿童书籍的电子商务网站的英雄形象。
最初创建的角色用作婴儿用品的吉祥物
3D渲染
今年增加其存在的另一种类型的网络视觉效果是3D渲染。这些是通过将3D线框模型转换为2D图像而创建的计算机图形。许多图像都具有照片级真实效果，这是网页设计的最大优势。如果您需要的照片内容无法获得或非常昂贵，3D渲染可能会很好。
请记住，这种图形需要特定的技能以及艺术眼光和品味。此外，它非常昂贵且耗时。然而，做得好的3D图形极具吸引力且令人信服，因此它们可以对网页设计外观和转换率产生巨大影响。
这是一家公司的网站，利用太阳能设计和建造可持续发展的住宅，以获得所需的能源。房屋的3D渲染模型允许用户查看所提供服务的逼真图像，甚至操纵它以在白天和夜晚模式中查看视图。
这是设计工作室的网站，专门从事室内外设计可视化。为页面呈现的高质量3D图形占据了所有背景区域：这样，图像立即设置主题并呈现公司服务。
这个预订服务网站使用3D图形作为一个大的主题图像，它占据了页面的左侧部分并立即引起用户的注意。艺术品不仅设定了主题，而且使界面美观。
为什么图像应该成为您的Web内容的一部分
这是一堆令人信服的事实：
Web档案Wayback Machine共享的研究表明，人们感知图像的速度比文本快60,000倍
心理学家声称人们需要大约1/10秒来获得视觉场景或元素的一般感知（文本项目的速度确实不可能）
重要的信息片段通常由大脑固定为视觉图像，即使它们是通过文本感知获得的
图像不易与背景和周围元素相结合，而文本高度依赖于可读性方面
图像倾向于在长期记忆中更好地保留，这意味着处理界面的用户不需要处理和记住比实际需要更多的数据，因此交互变得更快
界面中的视觉效果可以使其在来自不同国家/地区的人使用应用或网站时更加通用
图片突出了具有文本识别自然问题的用户的感知极限，例如阅读障碍或非阅读学龄前儿童。
相关文章：
相关推荐：