设计制作交互式样机运动的网站

网站建设 2016 07月20日 发布

当你觉得一个好的网站设计,想到什么?


对我来说,这是发现生活怎样。我喜欢它的设计不只是因为它有一个漂亮的调色板,或在头版醒目的视频,而是因为它的设计充分考虑良好的用户体验建成。


但是你如何定义一个网站,良好的用户体验?


为一体,它必须是既便于浏览和容易搜索。对于企业网站,总的来说,为客户和潜在客户的信息。如果您的客户不理解的信息,或者无法找到他们要找的信息,那么你的网站就会失败。


要设计一个伟大的网站,无论是结构和内容需要共同努力在正确的时间和正确的地点提出有价值的信息。有参与了很多协调工作,很多时候出问题。你能不着急。你必须建立自己的网站,以适应从地上爬起来的内容。


你如何开始设计一个伟大的网站?建立一个线框,然后遍历成一个互动的样机。


为什么线框?


线框是快速沟通的概念和任何设计的多次反复实验的好方法。


线框不全面的和实际的视觉设计编码原型。他们只是低精度的静态设计,让您可以快速测试迭代和得到反馈。最好的线框也是互动的,允许的设计实际上是如何工作的更深入的测试。


每个网站服务的目的。线框可帮助设计人员专注于这一目的,并确保所有的框架,内容和视觉设计对准这一目的。


为什么线框?

例如,制作的Airbnb是一个旅行网站。


其独特的目的是帮助人们通过寻找伟大的地方参观和伟大的住宿地点旅行。这就是他们赚钱。在其网站上一切都为这个目标进行了优化,从他们的头,他们施展上市的方式的风格。


内容是设计的心脏。人们使用的产品和访问网站的内容 - 不是因为他们想要的设计。而当你线框,你让自己自由地去尝试,失败,和改善你的最重要的设计资产的结构。


永恒的UI设计原则


在我们深入线框和样机设计实践,让我们先解构Airbnb的网站是如何工作的。


1.使人们关注到令人惊叹的影像


当你想前往的地方,你可能没有想到您的旅行行程或你的汽车租赁信息。


无论你在想的,很可能的视觉享受。在那里你会住的照片。所有的清凉景点的图片,即可查看。当你想旅行,你会希望看到的照片。


使人们关注到令人惊叹的影像

这正是制作的Airbnb在其网站上一样。每一个元素都高度可视化。


所有的内容,这意味着房子上市和建议,为地方旅游,在文本优先图像。该相框占据了大部分的空间,留下了几个大胆的文字和一键拨出,用户采取行动。


整个首部制作的Airbnb游客体验世界各地不同的文化和环境的视频。这就是人们希望在旅游网站上看到什么。他们不希望只是填写一些纯文本的形式和预定的家。他们希望,当他们计划前往旅游。


有目的的图像总是比单纯的文字更强大。


2.简化您的内容


不幸的是,人们希望旅行,该过程通常是非常复杂的。


你必须侦察你想参观的地方,请确定您的行程的位置上,找到住的地方,计划至少有一些你的时间在那里,购买机票或计划驾驶路线,和这么多。这只是一个大麻烦。


最后一件事有人想加入到他们的旅行经验更为复杂。


简化您的内容

Airbnb的网站从网页削减了其他所有杂念,只留下最相关的部分完好无损。有一个简单的酒吧非常简单的旅行数据输入,主机的按钮,列表,供您浏览的干净,整洁的前瞻性名单。有一个在上市,而不是广告或任何其他不必要的信息两侧的空白。


字体站出来反对他们的背景和单词和句子都比较简单的语言。而非上市的网站的头版在饲料中每个网站无尽的描述,每个内容块是一个简单的图片和一个大胆的名称。


3.强调最重要的功能


首先,你希望你的网站最常用的功能是最方便。


什么人来你的网站?


对于制作的Airbnb,人们主要来自找房出游。这就是为什么动作元素的最大,最引人注目的电话在网站上是在头版中心的预订信息栏。 “搜索”按钮是粉色的,红色的脱颖而出,和一个黑色的透明条穿越行动号召后面的背景,强调行动号召元素。


强调最重要的功能

该网站的其他部分是显着为好。


在头中心的大玩按钮将显示人们旅行和探索世界,鼓舞那些谁前来寻找网站去旅行的视频。该“成为主机”按钮,在页面的右上角和大内容块正确的,显示“你可以赚什么”帮助用户兴趣主办的Airbnb的标题下方。


所有这些行动呼吁元素被强调,以加快用户的旅程他们的目标。


嘲讽最多Airbnb的网站:5清除步骤


构建线框识别这些不同的部分,可以让你看到的一切是如何一起工作。用我们所学,让我们创建的Airbnb一个静态的线框,然后层上的保真度更高样机。


我使用UXPin快速创建我们的设计,而是随意使用任何工具,你最喜欢的。


基本结构


嘲讽最多Airbnb的网站:5清除步骤

我喜欢手工制作的网页上的所有内容,一般准系统的轮廓开始。


被誉为内容线框,这些盒子只是代表了页面的不同元素。我们只专注于信息和视觉层次。


我们能开出块的导航栏,标题和主要内容。这种镂空结构给了我这里的一切将被放置而不实际规定任何形式的视觉设计又是一个好主意。


一旦你创建内容的线框,你可以遍历一个更详细的线框或潜水直接高保真样机。


如果你在一个新的设计工作,要遍历仔细的箱子,和箭头线框,这样就可以测试完整的内容结构。如果你在一个小的重新设计工作,可以进行直接高保真样机,因为你已经拥有了核心的视觉设计元素。


为了简便起见,我们会直接移动到一个高保真音响样机。


标题和标题


标题和标题

在接下来的步骤中,I形式的标题和标题。这两个因素是千差万别重要的,不应该被低估。


在标题中,我寻找的东西大胆和表现力,将立即抓住用户的眼球。 “住在这里”,是从“去那里”或“去那儿”的不同。制作的Airbnb是关于一个经验,这是宾至如归,他们的副本反映。


再看看子标题。 “像你住在这里从本地主机书家中191+个国家和体验的地方。”有了这句话,我都告诉我的用户是制作的Airbnb是随处可用,哪些经验是像。


标题图片是用户看到的第一件事。如果它与标题冲突或过于分心,那么你就已经失去了用户。图片是胜过千言万语,所以你需要正确的标题图片以适应您的网页。


在Airbnb的情况下,他们有一个视频,炫耀的人探讨所有美妙的景点和体验世界各地。这是鼓舞人心的,这就是它的用户。


主呼叫行动


主呼叫行动

号召性动作应该是你希望你的用户做的主要事情和你的用户想要做的主要事情。它必须是决定性的。不要使用模糊语言,如“继续”。创建一种紧迫感。


对于Airbnb的网站上,号召性动作是既简洁又具体。它要求在“位置”的主要信息,“日期”和字段“的嘉宾号”,然后用“搜索”按钮,将结束它,高亮红,粉红色的重视。很快,网站的上下文中非常听上去很像。


元素本身一般适合标题下方,但对Airbnb的网站,它更有意义,离开它的头的底部。它仍然是非常明显的,但它仍然允许用户先通过视频头吸纳价值主张。


主要内容座


主要内容座

接下来,我们创造了一些页面上的内容。这将需要永远做全的网站,所以我们只是创造的头版主要内容的第一个块。它应满足我们的要求。


当创建一个网站,单独报头不占用整个屏幕,内容的第一个块必须吸引用户的眼球。它的报头的几乎一部分。


对于制作的Airbnb,一个多面的平台,它们有两个主要类型的用户:旅客和主机。因此,对于第一个内容块,他们有它完全献身于他们的主人。这就是为什么也有一个“迷你”号召行动块内。


主要内容座

导航栏


导航栏

现在,让我们清理灰色框顶部。


不要让导航栏的规模比较小傻瓜你。导航栏充当用户的指南。如果他们正在寻找的东西,这不是立即出现在页面上,导航是他们的第一站。


需要注意的是导航栏只有4个项目。首先,该酒吧有空间有限。如果你放太多的物品了吧,你运行用户遭遇“决定疲劳”的风险。此外,它会显得拥挤视觉。只放导航栏上最重要的项目,这将有助于用户“导航”。


制作的Airbnb导航

对于Airbnb的网站,他们有四个按钮:


该“成为主持人”按钮,这是有关他们的用户的一半。

该“信息”按钮,可以让用户知道什么重要通知或公告。

“帮助”按钮,这是几乎任何东西,他们可能会寻找。

最后,“账号”按钮,允许用户管理他们的信息。

使其成为互动


使其成为互动

最后,我们将使它互动。与您的产品用户交互的用户体验的核心。你不能测试您的产品,如果它不实际工作。


有很多网站上的互动不同,但对于时间的缘故,我们只添加交互最重要的元素在页面上:在号召性的行动。原型时,必须优先考虑网页上的动作,大多数对业务造成影响。


动画制作的Airbnb

当添加交互性的实体模型,你不需要让每一个微小的细节工作。补充足够的互动和反应,使产品手感真实。在这一点上,你可以测试与有用的反馈最少5个用户的设计。


对于Airbnb的网站,使其成为互动的过程相对简单。只需添加菜单下拉到屏幕上,并让他们弹出,当你点击或移动鼠标从按钮离开消失。我还添加了着色光的搜索按钮,只要将鼠标悬停在。该分钟反应指示该按钮确实是一个按钮用户,并且它绝对可以点击。


这是很简单的做到这一点。我只是添加交互某些元素,如“目标”栏,并点击预览按钮,看看它实际上的样子,你可以在上面看到。


如没特殊注明,文章均为善微网络原创,转载请注明来自https://www.sanways.com/news/183.html