WE’RE
HERE

We’ll be happy to hear fram you, don’t
hesitate to get in touch

设计你的移动布局的关键因素

浏览次数:100发布时间:2016/04/05文章来源:华仕尊城设计文章分类:高端网站建设
几乎所有的RWD项目我曾在关键的输出是一个风格指南。这些将包括项目的主要风格和所有模块的交互状态。它甚至还包括一个关于响应框架的位。网页...2016/04/05

几乎所有的RWD项目我曾在关键的输出是一个风格指南。这些将包括项目的主要风格和所有模块的交互状态。它甚至还包括一个关于响应框架的位。网页设计

但这里有一个新的野兽进化,这是模式库。安娜德写了一大篇关于开始与模式库的名单除了。这就是你所定义的每个站点中常见的UX模式,揭示注释和代码片段的路上。

现在,我通常会把这些放在一起放烟花,使用符号和样式的通用组件和网页设计模块。但对于一个响应式的设计,你需要说明每个模块如何适应你已经定义的断点。这需要相当长的时间来做烟花。

因为我们是在HTMLCSS的原型设计,它网页设计将不以同样的方式,建立模式库的耻辱吗?

布拉德霜具有重大理论在原子的网页设计”,在他用一些科学术语来定义自己的网页设计方面。原子是构成你设计基础的基本的品牌造型。颜色,字体和图标。然后将这些应用到基本的HTML元素形成的分子。想一想搜索按钮。分子,然后制定创造'生物体'。在这个例子中,我们可以在按钮上添加一个表单输入和标签。

这些都是与其他生物体结合起来形成“模板”,例如一个头(我们在这里失去科学术语,但你得到的点)。然后这些模板帮助表单页面。瞧!你有一个原子网页设计。

我们可以用这个理论来形成模式库的结构。开始的品牌风格。应用这些核心的HTML元素。使用这些元素形成一些共同的模式。等等等等。

你把你的模式库告诉一个你的项目的故事,你如何采取了客户的品牌,网页设计并为他们创造了一个新的在线存在。你应该包括注释和代码片段的方式为开发者访问和客户理解你的设计。

模式库的快速成为响网页设计应网页设计的一个重要输出,因为我们从设计页面到设计一个组件系统的设计。

4。使其普遍使用

设计一个敏感的网站的事情是,你不能预测每个用户的经验,特别是当它涉及到移动体验。

用户可以使用你的网站的各种可能的情况下,有数百种不同的。这是来自于智能手机和平网页设计板电脑的数量,有不同的屏幕大小,分辨率和输入类型。他们甚至可以使用他们的电视机。

你的设计将要完全普及和网页设计适应任何环境,它被放置。

这里有一些小提示和小技巧,我喜欢在设计反应时记住。

4.1拇指规则

因为现在很多的移动设备都是触摸屏,我们需要注网页设计意的是在我们的接口的互动元素的大小。

对于理想的撞击区域应该是有点矛盾的报告。苹果说它44px。微软表示,34px [来源]

我总是用48px为“经验法则”时,我的互动元素设计。然后离开至少6px间距左右各灾区,我通常得到反映基线。

在平面设计和较大的类型尺寸的一天和时代,现在很多网站都保持这些稍微过大的冲击区域为他们的桌面体验。

这些过多的元素也应该用在形式上,以帮助他们保持简单和移动友好。作为一个设计师,我喜欢设计我自己的过大尺寸的领域,以适应网站的造型。

但一个建议,我会做的是使用本地的控制,在可能的移动体验。键盘和下拉菜单进行了优化,您正在使用的设备。浪费你的时间去设计一些已经被整合的东西,这是一种耻辱吗?更何况添加自定义窗体UI开发费用。网页设计

哦,一个关于互动元素的问题。移动体验的悬停状态。拜托.

认为这是一个渐进的增强功能的桌面。一点点的抛光,你可以添加到增强的经验。在我看来,没有什么比在你的触摸屏设备上点击两次来获得某个地方更令人沮丧的了。因为一个奇特的悬停状态。

4.2导航

在设计一个响应式网站时,最大的挑战之一就是如何处理网站的导航。现在有相当多的方式来做到这一点,并根据你所介绍的有多少个断点,有些可能比其他的更复杂。

跳转链接

可能是最简单和最通用的移动导航技术,跳转链接菜单基本上是一个锚链接跳转到用户的菜单中的页面的页面。

这是伟大的因为它不需要JavaScript或其他任何添加的脚本来实现,使其网页设计普遍在所有浏览器和设备。它也作为一个整洁的小回落到一些其他的技术描述如下。

掉下来

另一种常见的移动导航模式是,在下拉菜单中,菜单图标显示下面的导航使用滑动动画。这种技术使用JavaScript的位置菜单下面的按钮,然后藏起来,直到被用户请求。

导航中的一些项目甚至可以使用一个手风琴来隐藏它可能有的任何子元素。这网页设计允许用户通过导航,从而跳过每一个着陆页。

从画布上

关闭画布的方法可能是最流行的技术被用于RWD我们开始让我们的网站更多的应用程序为基础的。通过他们的移动应用程序,脸谱网率先推出了帆布,方法允许设计者位置网站的导航下的视口的边缘滑动,对用户的要求。

一些网站,如特安+松懈和Squarespace,使用这种技术在各种经验导航的唯一方法。这,我相信,是一个大趋势开始钻。

4.3任务导向的移动布局

设计你的移动布局时的另一个关键因素是,在任何一个关键的要求,以更接近页面的顶部。是的,我要说的是,上面的褶皱。

最近在网页设计中没有任何“褶皱”,新设备的爆炸和不同的分辨率使得它更难以预测,将在一个特定的网页上出现,这已经被广泛讨论过了。我们可以,但是,确定一个“安全区”的基础上最小的视口大小。网页设计

因为移动用户一般都在移动和有限的时间和带宽,我们表面的任何重大的“接近我们的屏幕上是很重要的,以支持网页设计内容放在。

这方面的一个重要的例子是移动电子商务的设计,其中许多产品页面包含产品名称,价格,缩略图和CTA购买所有倍以上,随着网站的导航。次要的内容,如产品的功能和规格,然后在下面播放。

一个很好的方式来实现这是通过仔细的内容策略和思想的屏幕上的顶部区域作为一个应用程序。思考用户在初始视图网页设计中的相关链接。

5。牢记业绩网页设计

我们永远无法预测谁是我们的网站的下一个用户,他们将使用什么设备和连接。这就是为什么我们需要设计我们的响应网站的性能在头脑。

没有人喜欢等待,特别是在网络上。如果你的网站在几秒钟内不加载,你就失去了你的用户。网页设计他们已经搬上了。

 

咨询电话:0755/29555722

(+86) 0755 2955 8889

518000

深圳宝安.西乡宝源.F518时尚创意园.17栋2楼

体验手机版您可以免费体验我们的服务(即时回复)

WWW.W-VI.COM
Copyright © W-Design. All Rights Reserved. 华仕尊城 版权所有 粤ICP 12007005-1 手机版 盗版必究 法律声明