网站建设服务热线 服务热线: 0571-88730320
网站建设公司
您的当前位置: 首页 » 建站教程 » 网站模板设计是手机设计的首要考虑

网站模板设计是手机设计的首要考虑

来源:湛江建站公司发布时间:2021-06-15 16:00:00

手机浏览已经成为主流,碎片时间越来越长,能否从手机客户端分享一点蛋糕,基本上决定你的位置。

介绍:“手机设计,谈视觉设计”是《移动设计》系列翻译中的第三篇。主要介绍了在移动终端视觉设计中如何创建一个美观、移动的应用解决方案。

网站模板设计是移动设计的首要考虑,第二部分:交互设计

网站模板设计是移动设计的首要考虑,第二部分:信息体系结构

以下是翻译:

首先,我们将看到移动设备物理局限性的设计,包括优化解决方案的指导方针;接下来,我们将看到通信设计:使用视觉设计元素来支持移动网站和应用程序的内容。

移动和平板设备的物理外观和触摸屏界面为我们提供了一些基本的可用性考虑。桌面用户可以浏览更大的内容区域,或者将鼠标移动到目标对象以查看更多内容,而移动用户则关注较小的屏幕,并且必须以不同的方式进行交互。我们可以将移动布局和移动交互模式牢记在心,从而创造出更直观的移动体验。

在如何更好地显示内容和相互作用方面,移动屏幕有限的可用空间给我们带来了一个有趣的限制。特别是要注意移动布局中的流动性与集中性并存。

版面结构——为设计打下良好的基础,我们需要考虑如何大限度地利用有限的屏幕空间。网格系统帮助设计者实现这一点:等距垂直线结构可以帮助内容布局。网格定义活动空间,这使得设计者更容易确定按钮、标题或图片的有效位置。网格上内容的布局可以引导用户浏览,同时,它可以创造出干净、美观、愉悦的视觉效果。

滚动和滑动的空间——用户需要能够随意浏览内容,而不需要做他们不认识到的事情,并且在尝试滚动时不需要触发元素。这一点尤为重要。换句话说,元素之间的距离必须足够让用户轻松地浏览它们。

移动设备上的触摸屏界面,意味着视觉设计必须强调互动性;换句话说,要保证页面元素的大小和空间的使用方便,并指出操作动作对用户的重要性和相关性。

按钮点击区域-正如我们在第2章:交互设计中讨论的,右键大小确保点击更容易。理想情况下,按钮应在标准屏幕上的44px和57px之间,视网膜屏幕上的88px和114px之间。这样它就可以为平均指尖提供足够的空间,使其易于点击。

直观和易于使用的控制-如果两个相关联的交互元素可以很容易地相互联系,用户可以在它们之间快速切换。当用户考虑交互之间的相关性时,这种方法可以减少他们的疑虑,加快他们对复杂交互的理解。

物理限制只是我们在设计移动设备时面临的挑战的一半。另一半是沟通信息。“移动优先”原则提醒我们,移动用户应该能够从同一级别的移动网站上获得同样的体验。在这一原则的指导下,移动通信的设计影响着所有设计者的设计思想,并要求他们能够访问正在通信的信息。

为了强调沟通,我们需要大限度地利用我们理解和解释的“信息”。人脑对视觉信息的理解要比文字快得多,这意味着利用图形和图像来加强交流是有意义的。良好的视觉元素可以产生附加值,帮助理解内容或交互目的,并从整体上改善用户体验(对于移动和PC端)。

首先,我们认为加强沟通的方法是使用垂直节奏。信息体系结构创建了一个可感知的内容流,但是视觉设计可以用来创建更清晰的内容视觉。内容块之间可感知的大小和空白的使用创建了一个良好的垂直节奏,支持内容级别之间的通信。

除了前面提到的垂直网格系统,基线网格可以用来创造一个良好的垂直节奏,使阅读和理解更容易。特别是,基线网格基于行的规范创建一个体系结构。基线网格提供了明确的水平布局规则,用于定义布局行间距和大小时数,还可以用于定义不同内容组之间的间距。在这些规则的指导下,可以保证段落的拷贝清晰可辨,用户可以清晰区分段落和特征组之间的差异。通过HTML和CSS很难准确地实现基线网格,但在设计过程中可以为网格的尺寸和间距设计提供有用的指导。

颜色是另一个令人难以置信的交流工具,它可以用各种方式支持内容和交互。

传达色调和风格色彩在设计过程中是非常主观的,取决于个人经验和文化。但使用特定的风格和语调有助于传达目标的整体印象。明亮大胆的颜色代表幸福,深色代表优雅或大气,而柔和的色调和更多的灰色可以营造怀旧的复古。学习更多的“色彩理论”可以帮助我们选择最适合设计主题的色彩。

段落到段落的区分—颜色可用于突出显示内容元素,指示元素的连接方式,或支持内容体系结构,如内容的拆分方式。

区分静态元素和交互功能-使用强对比度可以帮助传达不同的设计目的,或连接内容和功能。混合中性和明亮的颜色,或使用颜色轮上的相反颜色,可以确保特定元素高亮显示给用户。在整个设计中创建一致的颜色使用,例如在整个设计中跨静态、活动和非活动元素,也将更清楚地显示内容和功能的差异。

更改通信状态-当用户与元素交互时,颜色可以智能地用于突出信息、通知和错误。例如,许多站点使用绿色表示成功信息,红色用于错误信息,而不是冗长和复杂的信息。该方法在色彩使用原则上,能在快速传达新信息的情况下提高设计的可用性。

最后,通过视觉设计进行交流时,隐喻是一个非常强大的解决方案。隐喻通过唤起一个已知的、熟悉的元素或视觉对象,使用户能够快速地理解内容和功能。在数字设计领域,最极端的使用视觉隐喻的例子是伪物化设计,其中界面元素被设计成看起来像真实的对象。而且,虽然这种做法后来名声不好,但Windows8和IOS 7的设计却离它很远。这些操作系统和其他移动网站和应用程序继续使用简单的隐喻来设计用户界面,例如用于删除的垃圾桶、用于互联网摄像头的真实摄像头、电子邮件信封。

隐喻可以用来支持以不同的方式传递信息或主题

支持基本主题隐喻可以用来扩展单个设计元素,而不是成为设计或功能的关键主题。在Flipboard应用程序中,翻转切换是用户交互的一个组成部分。顺利实现这种交互是这个应用成功的关键。在这个过程中,隐喻的使用可以快速地向用户传达设计理念,并帮助应用程序确立其独特性。

按钮和交互——在设计按钮时使用简单的伪物理设计,可以简单地模拟真实的交互元素,使功能更加清晰和明显。不过,值得注意的是,如果平面设计需要与品牌或风格相匹配,如果色彩和风格设计能清晰地区别于静态元素,这种设计将非常有效。备忘录使用真正的样式按钮。

图标-图标在屏幕空间有限的移动设计中很有用,因为它们可以快速表达复杂的概念。对于图标使用视觉隐喻,特别是已经成为通用标准的图标,如我们提到的删除、网络摄像头和电子邮件图标,意味着它们通常可以在没有标签的情况下被识别。设计简单清晰的图标是一个挑战,因此了解图标如何影响设计的清晰度是很重要的。

如本文所述,对限制和标准的清晰理解对于任何移动设计师都是有意义的。但只有掌握了这些,我们才能超越这些指导原则,打破规则,扩大创造力,创造智慧和独特的体验。这一点,再加上对用户体验的持续考虑,使我们能够在功能和美学之间找到理想的平衡。

为移动设备设计有许多令人兴奋的挑战,但在此之前,仍然有很大的机会。科技的飞速发展和用户环境的不断变化,意味着今天的限制在未来几年将不复存在。创新思维和创造力将帮助我们在面对这些挑战时找到新的解决方案,并让我们在面对设计问题时继续找到新的、优雅的和易于使用的解决方案。

湛江快利建站公司 地址:浙江省杭州市余杭区联胜路10号 电话:0571-88730320 联系人:方经理