【做好基本的以下几件事才能搞移动端网页设计】

创新互联为展示文章，做好基本的以下几件事才能搞移动端网页设计。

如果你曾仔细观察过近些年来那些优秀移动端产品的交互设计，会发现它们都拥有一个共性：它们在基本的功能和设计上的执行都相当的好。它们从最基本的人类行为模式中汲取营养，然后通过优秀的设计和执行，为用户悄无声息地扫除了所有的障碍，这个时候，用户会感受到其中惊艳的视觉效果和突出的互动体验，其中尤为突出的就是浏览体验。今天的文章，就让我们一同来梳理一下，有哪些关键而核心的移动端设计项目，总结一下今天移动端设计的“核心考点”。

有效的排版设计

应用中的内容可以建立用户和APP之间的精确关系，并且帮助用户达成诉求。在这个交互过程中，排版起到了很大的作用。文字大小和布局影响了最终的屏幕阅读体验：小的文字、小的行距、留白不够都会耗费较长的阅读时间，因此用户会忽略掉大部分信息。在高亮的小屏手机中尤其明显。因此，屏幕越小，排版意义就越重大。移动端的文字排版的核心技巧在于，平衡易读性和空间利用率。当你在为移动端界面设计文本排版的时候，需要选择合理的字体尺寸和间距，这两个因素是最关键的影响因素。字体尺寸需要足够大，确保绝大多数的用户能够识别，而足够的间距则保证小界面上内容的呼吸感，不会让人觉得局促。当然，这些是底线，字体和间距并非越大越好，适中而舒适才是最终目的。

iOS 平台上Medium 的客户端的字体和间距的设计就是很好的参考范例。

小贴士：为了确保移动端设备的可读性，英文文本控制在每行30~40个字符，中文文本控制在20个字左右。如果是在桌面端，英文字符通常控制在60~75个字符之间，会让人阅读起来比较舒适。

简单的配色方案

简单的配色方案能够提高用户体验，那么相应的，过多的色彩则会带给用户负面的影响。针对于初学者，有一些预先定义的标准颜色方案能够让你轻松创建新的颜色方案。

1、单配色方案

单配色方案由特定色彩的不同的色调，阴影或颜色深浅所构成。他们的原理是通过修改特定颜色的饱和度和亮度，可以生成多种协调的颜色，这种颜色方案比较简洁和优雅，不会给眼睛产生太大负担。

蓝色的单配色方案(素材来源: Smashing Magazine)

素材来源: Dribbble

2、近似色彩配色方案

近似色彩配色方案的思路是从色轮上取三个相邻的颜色来做为配色。全手势操作的应用 Clear 使用了近似色彩配色方案，它使用不同颜色来区分任务的优先级或者高亮关键的任务。顶端的任务使用最鲜艳的颜色，而底部的任务则使用明亮精致的颜色。

渐变的黄色和橙色也是近似色彩配色方案的一个例子。

素材来源: tuts+

iOS 平台的 Clear 应用

模糊效果

模糊效果出现在极简UI设计中是一件非常符合逻辑的事情，它能够增加 UI 的层次感。如果你的 UI 拥有多个层级，使用模糊效果能够让用户清晰地了解到 UI 的前后层级的关系。这也给了设计师一个好的机会来设计多样化的菜单和层级效果。

雅虎天气显示了一张当前位置的风景图片，如果需要查看天气的详细信息，你只需要向上滑动便会马上显示出来。与在原先的页面上叠加一层相比，这种方式在增加了详细信息的易于获取的情况下还保存了上一张图片作为模糊背景后，帮助用户在操作之后有更为直观的反馈。而且交互方式极为自然，你可以很方便的就返回到上一层。

iOS 上的雅虎天气

一个应用中只使用一种字体

在一个应用中使用多种字体会看起来很散乱和马虎。减少屏幕上字体的类型数量可以增强排版的效果。当你在设计应用的时候你可以通过更改字体的字重、样式、尺寸和大小来优化布局效果，而不是更换字体。

素材来源: Apple

通常来说，一个应用中只使用一种字体。当你在为APP选择字体的时候，选择平台的默认字体可能是最安全稳妥的选择：苹果使用 San Francisco Family 字体来提供全平台一致的阅读体验(在iOS 9 中简称为 SF-UI)。Roboto和 Noto 分别是 Android 和 Chrome 的默认字体。减少屏幕上使用的字体类型能够获得较好的排版效果。

素材来源: Dribbble

数据的视觉焦点

1、你应该使用大号字体和醒目的颜色来让特定的数据成为视觉的焦点。使用中性的颜色(黑白灰)来展示普通的内容，而一些具备操作功能的部分则使用强对比的颜色来吸引用户注意，从而给给予用户正确的指导和操作。

明亮的色调+中性的色调是最容易搭配的方案，同时也是视觉上最引人注意的方案之一。

素材来源: Smashing Magazine

2、被放大的字体和显眼的色彩能够很好的吸引用户的注意力，而不需要多余的文字提示。与此同时还提供了简洁易用的信息收集体验。在屏幕特定的区域使用放大的字体和弹出的颜色能有效吸引用户注意力。

素材来源: Dribbble

使用留白代替线条来区分元素

设计师通常使用线条和分割线来给屏幕划分区域和功能类别，但是增加太多这些元素会 UI 界面过于臃肿。更少的线条和分割线能够让我们的页面看起来更加的干净，现代化和功能突出。我们可以使用间距，留白和色块来区分不同的元素。谷歌日历就是一个很好的例子，它使用投影将两个内容不同的区块清晰地拉开层次，而不是用线段来简单地分割。间隔不仅提供了清晰的视觉也增加了日历应用的易用性。图标：线条和填充我们使用图标用来表达某种功能或者内容，图标作为一种视觉语言，它应该是简约易于识别和理解的。iOS7后许多极简设计的 UI 都使用线条或者填充的图标。来看看同一个图标别使用线条和填充的效果。

时钟图标 素材来源: icons8

我们来看看底部菜单栏的图标。该图标在应用中通常是作为导航的存在，所以指示当前用户所在区域是很重要的，我们通常使用高亮图标来表示当前用户所选中的区域。这个时候，灰色的线性图标表示为未选中的状态。这样一来我们的底部菜单栏就很直观了。

苹果商店的底部导航 素材来源: viget

基于内容的卡片式导航模式

不管你想在你的应用或者网页中呈现什么样的内容，你总是希望你的用户能够仅可能方便、完整地体验到它们。基于内容的导航模式的思路在于，尽量让内容的概述和详情两种状态能够无缝地切换，而卡片式设计和这种设计模式最为搭配，因为卡片式设计能够统一而自由地组织内容，并且很容易消化大量不同类型的内容：

·卡片将用户划分成更有意义的区块，让屏幕的利用率更高。就像不同的文本段落组成文章一样，卡片式设计将不同类型的内容用卡片承载着，构成连贯的信息流。

·卡片是为移动端触摸交互而生的。用户无需学习就能够直观而自然的点击、滑动、翻转卡片交互，这是基于现实世界的物理规则的设计。

小贴士：想要让界面真正意义上地“隐形”，那么就专注于内容吧。

层次与深度

桌面端和移动端之间最明显的差异大概就是屏幕尺寸的大小了。由于移动端设备屏幕尺寸上的局限，越来越多的移动端APP设计开始试图在界面层次和深度上做文章，让界面拥有“厚度”，在原有的平面上增加一个“Z轴”。

图层让界面拥有了深度，让体验更加真实

分层式的界面设计甚至成为了Google的Material Design的核心设计原则，它参考了现实世界中人们同不同的物体进行交互的方式，将这些物理法则融入到界面交互当中。表层和投射在背景中的阴影则在界面层次中起到了重要的作用，它将不同控件和元素分隔为不同的层。

分层界面中最常见的元素和特征：

·浮动的操作按钮。通常常用的、推荐的操作被集成在这些浮动按钮中，通常你需要点击界面顶端浮动的一个圆形按钮来展开全部的浮动操作按钮。

·放大和展开。在分层式界面当中最常见的一个例子，就是当你点击列表中一个条目的时候，就会展开呈现其中的细节，随后你还能返回收缩让你看到完整的列表视图。

·置顶导航。保留必要的菜单，当用户操作的时候，常驻屏幕顶端，便于操作。

典型的弹窗。就像桌面端的弹出式提示框那样，叠加在现有界面上的提示框，让用户登录、提示信息，甚至是展现广告。

小贴士：简化你的流程，每一屏最好只用来做一件事情。

熟悉的手势

基于手势的移动端交互，改变了我们同智能设备沟通和操作的方式，屏幕不再只是单纯的触摸点击的目标，更为复杂的滑动和多点触控让手势操作带来了更多的可能性，从缩放、返回到删除，我们可以进行的操作越来越多，一些约定俗成的手势操作规则也逐步成型。

越来越多的APP开始依赖手势操作，而屏幕上的按钮也越来越少，为有价值的内容腾出了更多的空间。这样一来，APP本身也越来越专注于内容的呈现。

小贴士：当我们谈及标准化的手势操作的时候，其实也是在强调手势的“直觉性”和通用性。当你想要在手势操作上玩创意的时候，最好三思而后行。手势操作本身带有一定的隐藏性，所以，如果没有一定的视觉引导，用户可能会感到迷惑，不知道要如何同APP进行交互。

功能性的动效

这里所说的功能性的动效指的是那些嵌入到用户交互流程、使用过程中的微妙的动效设计。它们充当界面和交互之间的协调人和连接器：

提供视觉反馈：

当用户看到这些作为触发反馈的动画效果的时候，就明白他们的操作完成了。

平滑过渡，让用户注意到改变：

图标的变化在不同的阶段可以起到不同的效果。

小贴士：微妙的动效能够巧妙的连接不同的界面和状态，提升用户体验。但是千万不要滥用动效，专注体验，而不是为了使用动效而添加动效。

做好基本的以下几件事才能搞移动端网页设计结语

不得不说，随着技术的发展和经验的积累，现如今的移动端设计充满了套路。能够脱颖而出的优秀设计虽然各有特色，但是在基本的移动端网页设计上，都一样的优秀。就像我们今天总结的，干净的界面、简明的配色方案、赏心悦目的动效和布局，这些基本功做好了，然后才是探索属于自己的特色。

网站栏目：【做好基本的以下几件事才能搞移动端网页设计】
URL标题：https://www.cdcxhl.com/news/172314.html

成都网站建设公司_创新互联，为您提供动态网站、响应式网站、网站营销、品牌网站设计、网站策划、小程序开发

广告

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