你需要尝试的12个最佳内部网设计技巧
我们可能不都是设计师、美工或开发人员:但这不是让内部网设计听凭运气的理由。以下是我们的顶级技巧,为您的内部通信平台注入活力,并让您的员工惊叹。
为什么大多数公司平台都如此……
我们的数字化工作场所正在迅速发展以闪电般的速度推出新工具。无论是提交你的费用,管理你的工资单,还是访问你的内部it支持桌面票……都有一个应用程序。
但是。
作为消费者,我们现在享受着更好的用户体验,专注于定制化、易于使用和吸引人的交互,我们的工作场所工具呢?仍然远远落后。
正在取得进展,有一些赢家在前进,但总体来说,进展缓慢。开发继续向特性和功能方面倾斜,即“是什么”,而不是设计、用户体验或我们交互的界面。雷竞技网站上
在这个我们不断争夺员工注意力的时代,一个表现不佳或外观丑陋的平台将使内部沟通者本已艰难的工作变得更加困难。
那么,当涉及到你的内部网时,你如何确保它是正确的呢?你如何让你的公司内部网在视觉上吸引人,而不需要一个编程、艺术或UI设计的大学学位?
设计:它不仅仅意味着“让东西看起来很好”
当涉及到技术时,如此多的组织未能投资于设计的原因是由于严重低估了它的实际重要性。
在我们的博客,“设计重要吗?””,我们强调了任何数字工具成功所需的三个关键设计元素:
- 功能:如何运作
- 审美:它的样子
- 经验:感觉如何
当一个平台设计得很糟糕,不能满足这三个基本方面时,它就会导致灾难:即采用不佳,缺乏粘性,糟糕的用户体验,生产力损失,效率低下和由此产生的挫败感,并最终导致投资损失。
设计不仅仅是外观和感觉。设计就是如何运作。
表示工作
考虑到对“数字一代”的期望增加现在进入并在我们的工作场所成长,它也会对你的雇主品牌和留存率产生影响。
不可否认,作为一名内部沟通人员或人力资源专业人员,其中一些设计元素将超出我们的影响范围。例如,一个工具或平台如何工作将由开发人员强制执行:我们唯一的权力是选择我们的合作伙伴,并提供反馈,以帮助制定未来的路线图。
但是有很多元素我们可以影响——而且应该影响。
以下是我们最简单的技巧,可以将任何单调、枯燥、文本过多或无聊的内部网变成眼睛的享受。
最好的Intranet设计思想让你的内部通讯系统活起来
# 1。选择你的颜色
你不必是一个拥有完全定义的内部品牌战略的全球性企业来为你的内部网设置一个调色板。创建一个你一直使用的平台会对你的内部通讯平台的外观产生很大的影响。
试着坚持使用两种或三种颜色:一种主色,一种或两种次要的互补色,用于小流行或强调。这些明亮大胆的颜色可以很好地抵消你广阔的空间——并吸引人们进来!
# 2。爱你的空白
永远不要低估……虚无的力量。
留白是设计师的秘密武器:它为你的内容提供了喘息的空间,所以它很突出,用户不会不知所措。它还提供了流程和平衡,引导你的用户到达他们想去的地方,并为重要的东西创建急需的画布或背景。
通常情况下,为了尽可能多地填充信息并最大限度地利用空间,空白是首先要去的地方。相信我们:你想把它留在那里。不要让感官超负荷。
看看床垫公司的前后照片:
3.当心繁忙的背景
在空白的后面,我们解决了背景的问题。
我们并不是说每个人都需要选择全白的画布;但是选择一种单一的纯色来补充你的品牌调色板会让其他可爱的品牌颜色和大胆的图像脱颖而出。
或者,你可以考虑使用全宽度的“区域”,将背景和内容分解为易于理解的块,这将增加用户的整体体验。想想苹果是如何采取这种方法的——我们也可以在索尼Playstation为他们的内部网设计的这个奇妙的设计中看到:
如果你确实选择了“更多的东西”,保持微妙。想想重复的柔软图案或褪色的图像;任何过于分散注意力或“嘈杂”的东西都会把你的用户从重要的东西上拉开。
我们很喜欢英国全国防止虐待儿童协会(NSPCC)的这个例子,他们利用自己的品牌颜色和内网名称,只重复了最小的细节,给人一种村庄绿茵茵的印象:
# 4。向默认或丢失的图像说再见
没有什么比那些“缺失”或默认图像更具有90年代风格或更“业余”的了。
尽管我们尽了最大的努力,但我们经常不能(或没有)控制在我们的内部网上发布的所有通信。正如每个IC专业人士都会发泄的那样,并不是每个人都细致地遵循最佳实践或花时间为他们的帖子、文档、政策或博客添加特色图像。
结果是自动插入占位符映像,这通常是由您的内部网提供商设置的,而且……嗯,不太令人鼓舞。
好消息是,这通常是你可以手动编辑的,使用管理设置。尝试创建自己的默认图标或图像,以填补用户上传内容时留下的空白。
# 5。获得高质量,光滑的股票图像-免费
美丽、引人注目的图像是任何内部网的必备条件:特别是当我们现在比以往任何时候都更欣赏视觉在交流方面的力量。
对许多人来说,挑战在于找到合适的照片。尽管剪贴画和卡通图形在许多(!)年前就从主流中“退出”了,但它们仍然有一种痛苦的趋势,即与偶尔的米姆或90年代的股票图像一起,进入员工生成的通信。遗憾的是,我们内部的信息安全团队就是这样:
好消息是,您不必乞求一大笔预算或从营销Shutterstock订阅中窃取来提升您的内部网的外观和感觉。
有一些非常棒的免版税网站,提供高端和漂亮的照片和图像,包括Unsplash,Pixabay,或Pexels.确保他们不是太俗气,不专业,像素化-并尝试寻找所需的比例/大小。
您可以向员工推荐这些优秀的资源,也可以考虑下载一组通用的备用映像,以便将其添加到您的内部网库中。看看专业的、强大的图像可以给你的内部网带来的不同:
再见,剪纸艺术。
# 6。替换快速链接使用HTML小部件或图标(不要惊慌-不需要编码)
不要让无尽的文本链接占据你的内部网。
打破流程和用户旅程,让事情只是一个小更美观的HTML小部件。
从本质上讲,这意味着使用一个图像或图标并链接它,就像下面我们从皮埃蒙特的例子:
它通常有助于在图像上覆盖文本,向用户显示图像指向的确切内容。如果你不是Photoshop的专业人士,不要惊慌:有大量的免费工具,比如Canva,它可以让你上传一张图片,然后在上面放置一些你选择的文字。
只需添加一个HTML小部件,插入你的图像,然后点击它,“添加链接”指向目的地。再见,文本链接。
# 7。混合一下
如果前面的观点还没有让你明白这一点,我们将把它说清楚:尽可能地混合你的内容。
要上传策略吗?添加一个图像或横幅标题来打破它。写一个事件?在画廊里,在视频里。以文本为中心的区域和以图像为中心的区域的良好平衡有助于为用户分解内容,并保持他们的注意力,吸引他们进入页面。
多亏了互联网的奇迹——以及你更广泛的数字工作场所——还有一大堆免费的HTML小部件和添加物,你可以添加到页面上,以增加多样性或趣味性。
例如;最新的股票,你的销售或PowerBi仪表盘,你的ZenDesk门票,你的Slack频道,行情,倒计时钟,等等。在这里,一个筹款团队有一个简单的小部件来显示团队对雷竞技网站上筹款目标的进展情况:
# 8。决定要关注什么
我们要退一步讲;尽管将其混合并向内网页面引入新元素是分解内容并吸引用户注意力的好方法,但不要以牺牲页面的目的为代价。
用户访问这个页面的原因是什么?你希望他们采取什么行动?哪些信息是最重要的?
例如,在你的主页上,你可能想优先显示“最新新闻”,或者这只是一个入口点,你想用简单的快速链接引导你的用户浏览你的网站。如果这是你的“关于我们”页面,它可能是一张大图,你的使命宣言和价值观,或者是你历史的简要概述。
定义页面的目的,然后使用设计使重要的部分“流行”。给这些“英雄”元素更多空间,让它们全宽或放在顶部。使用标题来表示层次结构——H1代表最重要的,H2代表下一个,以此类推。
记住用户消化内容的行为:臭名昭著的“F”形是最常见的,从左到右,向下,然后再从左到右,正如这些热图所示:
不要让你的页面超载。想想你的内容和信息应该放在哪里;在添加任何东西之前,问一个简单的问题:“这是需要的吗?”
# 9。使图像具有响应性
在当今以移动为先的数字化工作环境中,向员工展示移动设备上很小的图像,或者放大但减半的图像是行不通的。
如果你的CMS还没有内置的魔法,用一个简单的设计来确保你的图像是有响应的。
当添加任何图像到内容页,博客,论坛或其他,只需花10秒钟查看和编辑图像属性.将固定宽度替换为' 100% '(或任何你想要的整体页面宽度),并删除高度。你的图像将根据屏幕的大小自动调整大小。简单!
# 10。用表
需要以更结构化的格式展示信息或图片,但又受制于CMS的局限性?不要害怕。一个基本的表格是保持东西整洁的无价工具——你的用户永远不需要知道你是否只是删除了边界和线条。
让我们以这一页为例。我们希望在3行中显示6张图像,但与文本对齐并不能完成工作。
在每个单元格中插入一个表格和一个图像,同时使边界为“0”,使它变得不可见,将保持一切整洁。对于超级hack,设置每个列的大小相同,以整齐的比例显示所有内容。这样更方便视觉,为用户带来更好的体验。
# 11。让字体保持一致——并且可读性强
与颜色类似,尽量只使用一种或两种不同的字体,以避免混搭。
网络安全的字体是最好的,无衬线字体(如Arial, Helvetica, Roboto)往往看起来比衬线字体(即Georgia, Times New Roman)更干净,更现代。
没有公司字体作为你品牌的一部分?没有问题。谷歌字体是一个很好的免费资源:下载您的字体并分配给您的Intranet主题。
# 12。将易用性放在议程的首位
考虑内容的易读性。
内部网的设计目的是连接人员、信息和工具:不要因为无法访问数字工作场所的中心而将员工排除在外。
例如,不要在白色背景上使用浅灰色字体;注意无障碍需求,如色盲或视力障碍。你的字体应该是可读的,合适的大小(15px或16px是建议的最小)和正常的重量,而不是“薄”或“超薄”。
请向您的内部网提供商查询其可访问性凭证:Interact提供可访问性主题,其中包括高对比度主题,如果用户在使用标准主题时遇到困难,可以切换到这些主题。
