1、网页界面布局
手机端网页的界面布局设计中考虑到手机用户更多的是采用垂直滚动的方式浏览。由于手机屏幕的尺寸较小, 字号大小也受到限制, 为了不影响阅读, 手机端网页应控制单个页面的内容量, 突出重点视觉元素, 避免界面杂乱。同时精简文字, 将冗长的信息内容划分为多重页面。网页界面设计中应突出按钮的位置, 按钮的尺寸应当和手指的大小相匹配。
2、视觉隐喻的运用
图像阅读是人类普遍具有的能力, 它能够直接调动读者的感性经验和视觉思维。在图形用户界面中用户通过把这些带有隐喻的图形与其熟悉的事物联系在一起, 从而理解界面中各个控件的功能。
在手机端网页设计中, 图像也不仅仅是传递信息的一种介质, 同时也可以利用视觉隐喻的原理承担着帮助用户在界面视觉元素与网页互动机制之间建立直觉联系, 进而减少用户的学习成本。
3、字体使用
尽管图像在数字阅读时代越来越受到青睐, 但文字依然是人类获取信息的主要介质。随着科技的发展, 今天, 5寸左右的手机屏幕像素数量已与电脑屏幕相当 (如1 080×1 920) , 其像素密度普遍超过300PPI, 几乎接近一般打印效果。这给手机端网页字体的选择带来更大的自由, 更多样的中文字体可以被使用, 极大地丰富了网页视觉风格。
尽管如此, 手机端网页在使用字体时还需要考虑屏幕尺寸的限制, 为了让信息层级清晰, 避免界面杂乱, 应尽量控制网页文字的字体类型和字号的数量。
4、色彩设计
使用不同的色彩可以带给用户不同的感觉。在一些领域中, 颜色具有特殊的意义, 在不同的文化环境中颜色的含义也不尽相同, 所以在网页视觉设计时网页的色彩不但要与主题内容所传达的情感相契合，也要考虑读者的文化背景。
色彩和其他视觉元素一样不仅用于传达内容和情绪, 也承担着网页层次结构的梳理功能。在手机端网页的色彩设计中往往会根据内容和结构设定主色, 标准色和对比色。主色决定了整个系列网页的视觉风格, 一般作为底色使用或者使用在每页的一个固定位置上, 起到定调的作用。标准色指的是整套移动界面的色彩规范, 确定文字、线段、图标等的颜色。对比色通常会用在标题、按钮等地方, 起强调和引导的作用。
5、动画设计
随着网页技术的发展, 在手机端网页实现各种形式的动画效果 (以下简称动效) 变得更加容易, 和影视动画不同, 网页动画效果常常肩负着对网页信息结构和交互的展示、引导、反馈等作用。
网页动效一般在网页中起到以下几种作用。
1) 强调。通过网页动效的添加对网页的重要信息和功能进行暗示和指导。例如重要文字信息的出现动画、按钮的闪烁等。
2) 反馈。通过网页中视觉元素的出现和消失, 以及大小、位置和透明度的变化对用户的交互行为进行反馈, 使用户和网页的交互过程更加流畅。
3) 层级展现。通过网页页面或个别视觉元素的缩放、覆盖、滑出等动效帮助用户理解网页信息架构。常用与网页的转场和菜单的展开。
4) 模拟。一些动效通过对现实世界的模拟迎合用户的认知。用户通过对现实世界的认知来理解网页的功能, 增强了用户对页面的操纵感和带入感。
5) 后台进程的可视化。典型例子是各种加载动画, 不仅让等待的时间变得可预期, 也增加了网页的趣味性。
6、交互设计
交互设计是定义、设计人造系统的行为的设计领域, 它定义了两个或多个互动的个体之间交流的内容和结构, 使之互相配合, 共同达成某种目的。
在网页交互设计中应满足以下几点。
1) 可操作性。用户为激活某对象所需触摸的屏幕区域有充分的空间以便用户准确操作。
2) 易学性。通过对视觉隐喻等原理的运用引导用户的交互行为, 并注重交互界面设计中具有相同功能按钮的统一性, 以降低用户对交互界面的学习成本。
3) 可知性。通过网页动画等方式对用户的交互动作予以反馈, 让用户了解自己的操作是否成功。
4) 必要性。在网页中加入交互环节其实也在增加用户的操作步骤和网页程序的运算量, 应充分考虑其必要性。
二、在设计手机网站的时候，还有一些必须要注意和思考的事情
1、了解你的目标受众
互联网工作的好处之一是你可以使用数据分析去追踪任何数据，合理利用这些数据可以让你的公司业务取得巨大的改善。所以当你准备为移动用户设计网站时，不要只满足于“一体通用”的方案。
分析这些数据，找出你的访问者大多数是使用哪种设备，而你的设计方案应该以此为基础。你可能会惊讶的发现他们中的绝大多数人根本不用iPhone 或安卓手机。
当你得到你想要的信息后你就可以建立一个方便绝大多数受众浏览的网站。当然你仍然要确保你的网站兼容其他设备。
2、内容才是王道
由于移动网站的功能往往比完整网站的功能少得多，设计师就要优先将访问者需要的内容放进去，并确保它们容易被找到。往往访问者要找的内容仅仅是你的联系信息，像手机号码，电子邮箱之类的，所以你需要将它们突出显示，而且要在触摸屏上易于点击。但有时他们也会想要看一些具体的信息，甚至是下订单的按钮——如果这些内容你能设计得容易被查找和操作的话，你的移动用户将会获得很棒的用户体验。
3、多为触屏用户考虑
就像我刚才有稍微提到的，当用户在移动设备上浏览你的网站时，确保上面的每一个地方易于点击是非常重要的——这也就意味着为了让你的用户有一个很好的浏览体验，你要试着加大网页上的按钮和链接，这样才能让手指毫不费力的点到。同时，不要忘了在按钮和链接之间保留足够的留白，这样用户在点击的时候才不会造成误触。
4、遵循简约的设计风格
记住，当设计一个移动网站的时候，你的目标不是要让你的访问者觉得“哇!这个网站好漂亮”，而是要引导他们最快的找到信息而不用担心浪费了太多的时间和流量。这也是为什么你要精心规划你的网站，保留重要的部分并保持简单的设计，丢掉那些花哨的装饰。虽然这样，但也不能走向另一个极端——在网页设计中既要保持简单也要追求优雅，尽量在同类网站有独树一帜的风格而不沦为平庸。
5、选择单列的布局
在为桌面用户设计网站时你可以有很多的布局方案可以选择，但对于移动用户如果想要让设计易于浏览的话，就只有一种选择了。尽管现智能手机也有用了相对比较大的屏幕，当你为了去看完整的信息不得不滚动多个列时仍然是一件繁琐的事情，所以坚持单列布局才是最好的选择。
6、学会整合社交媒体
移动用户最大好处之一是：他们乐于用过社交媒体分享身边的任何事情。这对你来说是个天大的好消息，如果你设计的网站能让用户轻松分享他们感兴趣的内容到社交媒体上，那么他们也将为你带来庞大的流量。所以，一定要在网页上放一个连接到你的社交网站的链接。同时在所有的页面上都要有Facebook，Google+，linkedln，Twitter等社交媒体的按钮。
