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