手机网站的导航的原型及方法！

手机网站的导航系统通常是最重要和复杂的用户界面组件。 近年来,小屏幕,响应网站技术和不断变化对硬件和软件更增加了这种设计的复杂性。

一个快速 查询的“移动导航” 成千上万的意见返回导航模式,包括“汉堡包”菜单,前端插件,框架和大量的其他工具。 尽管如此改变景观的工具和设计趋势,成功道路上的导航系统发送用户的确切内容他们需要在正确的时间。

在本文中,我们将探讨设计过程的开始,以及技术特定移动意念,和一个独特的理念来构建一个原型导航系统主题(是的,主旨)。

建立一个基金会

一个设计师可能无法知道一个导航可以或应该是什么样子不先了解谁会用它,为什么。 基金会的研究利用当定义一个网站的信息结构将帮助您做出更好的决策和利益相关者之间更快地获得共识。

导航是一个网站的重要组成部分,设计不佳的时候,整个网站遭受。 制作的过程一个运转良好的导航系统,在许多形成因素,屏幕大小和类型的用户可能会看起来非常不同的从一个项目到下一个。 这是一个平衡,包括利益相关者的意见,业务目标、技术限制、内容策略和用户行为。 研究可以指导我们完成这一过程 通过帮助通知我们的优先级(包括用户和业务),我们的主要任务和目标,以及如何衡量成功。

从哪里开始

最明显的地方开始当思考制定有效的导航屏幕大小是网站的内容。 如果网站是足够大或有很多遗留的内容,这可能意味着 进行审计 。 如果一个网站结构少,那么一般内容组织和观众的库存可能足够了。 审计、库存或否则,忽视内容直到你到设计是有风险的, 莎拉Wachter-Boettcher提醒我们 :

“你确定最终的问题,就像一个导航系统,只有当你真正为两个级别的工作内容有四个水平,以应对,让所有的更深层次的信息只能很难管理(发现)文本链接——或者,更糟糕的是,除了通过搜索,使它完全无法访问。”

了解一个网站的内容并不一定意味着知道每个句子,将每一页上。 一些内容可能不会存在,当你设计的导航。 没关系。 考虑更高层次的问题,如:

• 内容组织存在吗?

• 他们的分类是什么样子的?

• 他们提供观众(s)做什么?

• 这些团体之间有何关系?

• 什么是他们的优先级(从业务和用户的角度)?

这些将直接形成用户如何寻找你的网站。 在小屏幕上,需要更高的优先级,以确保房地产是最有效地使用。 了解的内容是一个谜——人们如何认识和使用内容是另一个。

跟人交谈

从交谈中获得用户的集体知识和利益相关者将通知不仅仅在小屏幕上导航。 它将支付股息,在设计过程中发展。

与用户和股东不必是一个正式的面试过程。 坦诚的谈话可能会产生更多的诚实和有用的结果。 专注于你所需要的每一个采访中,试图让这个话题和压力,他们有太多的问题。

前进行了一次采访,列出你想要的东西了。 例如,让你的主题谈论的事情你需要为了设计更好的导航,你可以关注以下几点:

• 不同类型的人将访问这个网站吗?

• 他们期望不同的东西吗?

• 他们来这里的目的是什么?

• 业务的重点是什么?

• 这与用户之间的冲突吗?

• 使用的设备如何影响期望?

• 当前导航的优点和缺点是什么?

• 什么是进入网站的登陆页面或手段?

• 通过这些渠道用户进入网站吗?

• 在用户退出网站哪点呢?

• 其他网站完成类似任务是什么?

• 是如何成功或不成功的?

主要研究与用户和利益相关者提供个人观点和可以给你内容的优先级。 如果你有访问网站的分析,他们可以添加深度访谈中发现的,反之亦然。 看看流行的登录页面,用户导航流,反弹率和降低页面的讲述一个故事正在与导航的,什么是不——特别是在移动设备上。

会变得混乱

草图通常是第一步 在合成的见解研究实现设计。 更重要的是,草图提供了一种简便的格式尽快证明自己的想法,同行,利益相关者,有时甚至用户。 就其本质而言,素描缺乏细节,从而使他们的观众的对话如何可能出现的细节。

画不同的解决方案可能会引发一场对话,强调每种方法的优点和缺点,而进一步定义要解决的问题。 草图的目标之一是让尽可能多的想法在纸上。 这个过程开始,您可以创建一个框架,用于收集许多不同的方法来解决这个问题,然后进一步定义的细节。 在这样一个框架,您将褶皱近照一张纸一半两次,给你四个季度(大小几乎完全为移动),然后你会在每个象限素描一个独特的导航方法。 页面时,你将开始四种不同的方法来实现网站的导航。

在这一点上,你可能没有足够的细节来确定每个设计的优点和缺点,和更多的定义可能是必需的。 进一步探索每一个想法,把四张纸,把整个表来画不同的州和每种方法的细节(例如,打开,关闭,选择)。

素描时,想想各种导航元素如何一起工作作为一个更大的系统的一部分,帮助用户寻找的网站。 的网站内容结构,包括许多不同的页面的水平,可能需要多个way-finding组件。 尤其是在小屏幕上,传播一些导航的责任在这些组件是有效的。 例如,这些元素可能包括多层次的组合主要导航、上下文区域级导航和互动的面包屑。 在这种情况下,用户可能不需要看到每个导航组件在同一时间在每一页上。

这个工作由各级草图页面在网站的架构是一个 开始决策和设定预期的好方法 与同事和利益相关者。 考虑什么类型的每个页面上应该显示导航元素水平,这些元素如何互相影响。

显示在正确的时间正确的数量的导航需要很多的思考和规划。 作为思想讨论和共识周围形成一个示意图,它可能需要开发这些想法变成一个工件,更接近实际的设计。 虽然草图文档高级思维,阐明组件(如运动设计、交互设计和内容可以详细至关重要,将决定你如何实际执行导航系统。

获得真正的

一个可以创建一个健壮的用户体验原型今天在很多方面。 您可以使用一个基于web的应用程序像InVision或构建页面的HTML和CSS,或者创建一个纸上原型,等等。 这些方法都有不同的优点和缺点,每个适合一个特定的团队的设计过程不同程度的成功。

最成功的工件沟通的细节在正确的时间在一个项目。 最有效的设计师更少关注所使用的工具,更需要在某个时间点上进行交流。 去年在谈话 ,设计师克里斯Cashdollar敦促设计师创建的工件”找到的高金额同意用最少的时间,”称之为“最小工件有效。”

创建有效的工件可能意味着跳跃到代码对一些人来说,或使用另一种媒体进一步定义和测试设计的细节。 下一步很大程度上取决于团队的规模和技术负责,这个工件的目标受众,项目的时间表。 进一步描述设计的目的可能不需要学习一种新工具或技能。 一些最基本的方法已经是团队的工具包的一部分,可以创造性地适应这一目的。

使用你所知道的

我并不热衷于使用“非设计工具的想法像主题创建一个动画原型。 出售我的团队,我们的项目有一个非常紧密的周转时间,数量有限的人,需要一定程度的动画的忠诚。 虽然主题不是专门为工具设计接口, 作为 别人 有 指出 出 我可以作证后尝试了自己,它工作得非常好。

我们看了其他受欢迎的工具,包括 InVision , 筹划者 和苹果的石英作曲家。 然而,时间约束的结合、成本、忠诚和灵活性使这个项目适合主题。 我们发现预先投入的时间学习这个工具非常少,因为主题学习曲线低,几乎所有的团队成员可以快速了解如何使用它。 此外,我的团队没有成本使用这个软件,因为主题是免费在Mac OS X 10.8(小牛)和更高。

主题限制其文档帆布面积相对较小,所以它不适合设计大型或长页面。 它的价值在于描述特定的UI组件的交互和运动设计。 这个尺寸约束并适合模拟移动导航模式,它甚至可以用于定义一些审美元素。

你需要了解一些基本的软件以开始使用UI设计的主旨:

• 使用基本形状、文本和颜色;

• 导入其他类型的媒体(矢量图形,png,jpg,等等);

• 分层的形状;

• 使用“魔法”过渡到幻灯片之间的动画;

• 动画组件在一个幻灯片。

当开始移动的设计主题,设置文档大小的一个现实的视窗。 这将有助于隐藏诸如off-canvas导航,页面的部分以外的当前视图(即要求滚动看到部分)和任何UI的无形状态,需要显示为工件的一部分。 生成这个视窗,开始一个新的空白主题演讲。 在第一张幻灯片中,创建四个矩形的两边各有一个幻灯片,留下一个空的空间在中间。

这些矩形不会随时编辑后,所以锁定将确保他们不会意外地选择或移动。

接下来,我们就可以开始修整默认状态的主要导航,使用形状、文本和其他资产来表示这个UI。 决定在草图后,我们的研究发现,网站的信息架构,我们可以在主题创建此导航的开端。 导航一直嘲笑后,选择所有的元素,然后点击“发送”选项,将导航栏的画布背后的黑色矩形。

下一步是想想这个导航的其他州会在一起形成一个系统。 在上面的示例中,当有人龙头的“更多”项目? 我们可以模拟由复制原始幻灯片和创建这个新国家。 在本例中,我们将主要导航到左边,揭露“更多”项目。 移动导航栏后面我们最初创建的矩形框架窗口。 我们也可以创建一个新的面板显示附加的导航元素。

现在我们有两个幻灯片演示,每个代表一个不同的导航状态。 精确描述如何从第一个默认状态到打开状态,我们可以使用一个主题转变被称为“魔动。 “魔将自动生成动画需要向不同位置形状在一个幻灯片在接下来的幻灯片(类似于Flash渐变)。 注意到我们的第二个幻灯片有新元素(我们创建的附加的导航面板),魔法不知道如何对待他们,所以它在默认情况下会褪色。 因为我们希望这个面板下滑,我们需要复制并粘贴到第一张幻灯片,把它放在原来的位置超出了视窗(背后的黑色矩形)。

我们现在可以让魔术将做它的魔力通过选择第一张幻灯片和检查员去“动画”选项卡中,单击“添加一个效果。 “一旦创建了过渡,我们可以使用“预览”功能和调整时间代表多快或慢这个面板应该下滑。

成功! 现在这个菜单幻灯片打开动画。 让我们添加反向动画,使其滑动关闭。 要做到这一点,我们只是重复第一张幻灯片,幻灯片3号订单。 然后,我们添加相同的魔法将过渡到第二个幻灯片,这将创建的动画菜单滑动回到默认位置。 最后,它将看起来是这样的:

从这里开始,我们可以使用类似的技术来构建其他州的导航——即扩大州“产品”和“职业生涯。 “在产品部分,让我们想象多页面级别:一个用于一个类别的产品和一个子类。 我们可以继续使用魔法过渡到显示用户如何与这些项目。 首先,我们可以显示父类:

神奇的一件事是它不仅适用于移动定位元素,而且对颜色变化,透明度和旋转。 例如,在上面的截图中,我将“产品”文本的颜色从蓝色到白色。 这种转变的魔法移动处理相同的方式处理的定位导航栏。 在扩大的菜单,我们可以看到加号旋转成一个“X”,允许用户关闭分组。 把整个过渡,我们现在有这个:

结束

复杂的导航是最成功的内容时,IA、用户研究和讨论利益相关者驱动设计。 而导航系统可能不会看起来一样在所有设备,提供路径相同的内容是至关重要的。 思考小屏幕在设计过程的早期,然后草图和创造设计工件在不同形式允许更多的讨论和更好的决策。文章整理来自网络，转载请注明网站建设公司-创新互联，翻译不好，请见谅！

当前文章：手机网站的导航的原型及方法！
URL链接：https://www.cdcxhl.com/news22/80422.html

成都网站建设公司_创新互联，为您提供关键词优化、服务器托管、微信小程序、网站改版、品牌网站设计、响应式网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联