手机网站设计制作技巧详解

作者：admin 时间：2020-02-28 浏览量：545

1、网页界面布局
手机端网页的界面布局设计中考虑到手机用户更多的是采用垂直滚动的方式浏览。由于手机屏幕的尺寸较小, 字号大小也受到限制, 为了不影响阅读, 手机端网页应控制单个页面的内容量, 突出重点视觉元素, 避免界面杂乱。同时精简文字, 将冗长的信息内容划分为多重页面。网页界面设计中应突出按钮的位置, 按钮的尺寸应当和手指的大小相匹配。
2、视觉隐喻的运用
图像阅读是人类普遍具有的能力, 它能够直接调动读者的感性经验和视觉思维。在图形用户界面中用户通过把这些带有隐喻的图形与其熟悉的事物联系在一起, 从而理解界面中各个控件的功能。
在手机端网页设计中, 图像也不仅仅是传递信息的一种介质, 同时也可以利用视觉隐喻的原理承担着帮助用户在界面视觉元素与网页互动机制之间建立直觉联系, 进而减少用户的学习成本。
3、字体使用
尽管图像在数字阅读时代越来越受到青睐, 但文字依然是人类获取信息的主要介质。随着科技的发展, 今天, 5寸左右的手机屏幕像素数量已与电脑屏幕相当 (如1 080×1 920) , 其像素密度普遍超过300PPI, 几乎接近一般打印效果。这给手机端网页字体的选择带来更大的自由, 更多样的中文字体可以被使用, 极大地丰富了网页视觉风格。
尽管如此, 手机端网页在使用字体时还需要考虑屏幕尺寸的限制, 为了让信息层级清晰, 避免界面杂乱, 应尽量控制网页文字的字体类型和字号的数量。
4、色彩设计
使用不同的色彩可以带给用户不同的感觉。在一些领域中, 颜色具有特殊的意义, 在不同的文化环境中颜色的含义也不尽相同, 所以在网页视觉设计时网页的色彩不但要与主题内容所传达的情感相契合，也要考虑读者的文化背景。
色彩和其他视觉元素一样不仅用于传达内容和情绪, 也承担着网页层次结构的梳理功能。在手机端网页的色彩设计中往往会根据内容和结构设定主色, 标准色和对比色。主色决定了整个系列网页的视觉风格, 一般作为底色使用或者使用在每页的一个固定位置上, 起到定调的作用。标准色指的是整套移动界面的色彩规范, 确定文字、线段、图标等的颜色。对比色通常会用在标题、按钮等地方, 起强调和引导的作用。
5、动画设计
随着网页技术的发展, 在手机端网页实现各种形式的动画效果 (以下简称动效) 变得更加容易, 和影视动画不同, 网页动画效果常常肩负着对网页信息结构和交互的展示、引导、反馈等作用。
1) 强调。通过网页动效的添加对网页的重要信息和功能进行暗示和指导。例如重要文字信息的出现动画、按钮的闪烁等。
2) 反馈。通过网页中视觉元素的出现和消失, 以及大小、位置和透明度的变化对用户的交互行为进行反馈, 使用户和网页的交互过程更加流畅。
3) 层级展现。通过网页页面或个别视觉元素的缩放、覆盖、滑出等动效帮助用户理解网页信息架构。常用与网页的转场和菜单的展开。
4) 模拟。一些动效通过对现实世界的模拟迎合用户的认知。用户通过对现实世界的认知来理解网页的功能, 增强了用户对页面的操纵感和带入感。
5) 后台进程的可视化。典型例子是各种加载动画, 不仅让等待的时间变得可预期, 也增加了网页的趣味性。
6、交互设计
交互设计是定义、设计人造系统的行为的设计领域, 它定义了两个或多个互动的个体之间交流的内容和结构, 使之互相配合, 共同达成某种目的。
1) 可操作性。用户为激活某对象所需触摸的屏幕区域有充分的空间以便用户准确操作。
2) 易学性。通过对视觉隐喻等原理的运用引导用户的交互行为, 并注重交互界面设计中具有相同功能按钮的统一性, 以降低用户对交互界面的学习成本。
3) 可知性。通过网页动画等方式对用户的交互动作予以反馈, 让用户了解自己的操作是否成功。
4) 必要性。在网页中加入交互环节其实也在增加用户的操作步骤和网页程序的运算量, 应充分考虑其必要性。