UI设计公司|这8个设计原则让你的网页“飙”起来!
每个网页设计师都应该知道的8个信息架构原则
信息架构 (IA) 是功能设计元素及其之间层次结构的可视化表示。它:
关注最终用户的目标;
展示网站的基本结构;
针对认知努力的使用。
就像我们在学校里教的论文结构一样,UI / UX中的信息架构描述了设计的基本内容以及每个内容的重要性程度。下面我们将讨论它的主要原理,并与您分享一些构建它的技巧。
信息架构的 8 个原则
让我们从网站信息架构的主要原则开始。
对象原则
该原则规定,应将内容视为具有其生命周期的不断发展的实体。不同的内容将具有不同的属性和行为,这在设计工程中必须考虑在内。
可视化网站地图是根据此原则进行规划的有用工具
选择原则
此原则意味着您应该为用户提供有意义的选择。但是,您必须确保选择将集中在特定的事情上:太多的选择可能会让用户迷失方向。信息也应该呈现为层次结构、类别和子类别,而不仅仅是一个长列表。
披露原则
为用户提供所需的信息非常重要。但是,值得确保这确实是他们需要的,而不是您想给他们的。该原则还说,您应该立即向用户提供他需要了解的信息:他可以在网站的其他页面上找到的信息。信息应该从一页到另一页逐步提供,而不是试图一次转储所有内容。
示例原理
使用该原理极大地改善了用户体验。例如,当您转到亚马逊上的某个类别的产品时,该网站会显示属于该类别的产品示例。这有助于用户更快地导航,尤其是在他们不完全理解类别名称的含义时。
使用 FLOWMAPP 流程图工具创建的用户流
前置入口原理
一半的访问者不会通过主页访问您的网站。这意味着任何页面都应该包含最少的文本信息,以便用户了解他们在哪里。此外,这再次确认了第 3 段,无需尝试将所有信息都放在主页上。
注意:FLOWMAPP 的可视化站点地图工具中的新功能,可直接在网站页面上记录规格
多重分类原则
这个原则说不同的用户以不同的方式使用您的网站,他们可能有不同的方法来查找相同的信息。例如,有些人会使用搜索,而另一些人则更喜欢在网站上闲逛。内容需要适应用户行为的不同场景。
有目的的导航原则
菜单的位置并不重要,重要的是菜单上的内容。尝试让您的菜单和导航栏显示用户现在的位置以及他们可以从当前页面访问的位置。
使用FLOWMAPP的流程图工具结合网站架构规划和用户路径
生长原则
在绝大多数网站上,内容是一个流动的、不断变化的实体。您今天网站上的内容量可能只是明天内容的一小部分。组织您的内容以使其在未来增长。不仅仅是在扩展一些文本块方面:可以添加各种内容。
如何构建信息架构?
按照后续步骤为您的项目构建出色的信息架构。
步骤 1:设置分类
您可以按最方便的格式对信息进行分类:按字母顺序、时间顺序或地理顺序。但是,您的优先任务是以最终用户最容易理解的方式形成信息对象组。
步骤2:确认与最终用户通信的语气和方式
在此步骤中,您需要决定所谓的“语气”,您将在项目的所有屏幕上绝对遵守该语气。否则,您可能会造成认知失调和离开网站的愿望。
步骤 3:定义关系
如果您创建 IA,以下技巧可以派上用场:闭上眼睛,将手指指向项目的任何部分,然后提出问题。如果用户发现自己在这个地方,他们会理解它与他人的关系吗?如果他们把目光从屏幕上移开几分钟,他们会记得他们是如何来到这里的吗?通常,有几种常见的关系格式:
分层格式。在这种情况下,对象从中心向内从属。在实践中,它可以表示为心理地图、树视图和逻辑视图;
方案格式。这种格式要求用户逐步遵循特定的路径;
矩阵格式。矩阵结构允许用户不依赖于设计师的意愿,将他们置于分层或场景限制中,而是选择他们最喜欢的任何路径;
数据库格式。在这种情况下,每个信息对象都有自己的一组元数据,以便可以根据最终用户的需要构建内容。
步骤 4:为 IA 提供可扩展性
保持平衡:你不应该让一个分支有两个级别的嵌套,而另一个分支有五个。考虑在整个网站和各个部分内进行可能的扩展。你应该粗略地想象几年后这个项目会发生什么。
步骤 5:构建原型
现在,您可以转到原型:采用关键场景并根据您的IA制定多个屏幕。之后,您需要测试菜单中的导航,并检查一开始确定的目标是否实际实现。
为信息架构构建选择哪些工具?
现在,我们为您提供三个强大的工具,可帮助您为您的网站构建信息架构。
流程图
流程图是一个易于使用的工具,可帮助您改善用户体验并规划用户旅程。在这里,您可以选择图标、形状和连接线,使用网格并添加图像,以及将项目导出到 Figma。此外,您可以与队友和客户分享它们。
网站地图
这是一个灵活的地图工具,用于构建交互式站点地图。它将在拖放编辑器的帮助下显着加快站点地图的开发过程。在这里,您可以轻松规划您的网站和页面结构,计划页面内容,以及检查客户和团队的反馈。
结论
信息架构不是一个枯燥不变的结构,它是关于与用户的交互。IA是设计文档的一部分,也是未来项目的骨架。在IA设计阶段,您可以定义优先级,关系,场景,导航原则,决策点,甚至产品的情感背景。
我们希望现在有了我们文章中的建议,您将能够毫不费力地为您的项目构建一个出色的信息架构。
留言