手机网站站设计的基本原则及需要考虑的基础元素
责任编辑：神州华宇 来源：北京网站建设 点击：245 发表时间：2019-03-16
手机站设计与电脑版网站设计有很大不同，手机站设计除了小且可以触摸外，很多设计原则与电脑网页设计是共通的。所以网络公司在进行手机网站建设的时候，一定要站在用户的角度思考，手机网站建设需要遵循以下原则：
1、导览功能大不同
手机网页与跟一般的网页不同的，在於当阅读文章到最后时，要回到最前头是麻烦的，因此设计网页的企业，除了减少卷动画面的机会外，也会加强导览的功能，让网页变得更容易於行动装置上阅读。导览设计的重点有：
*只在首页的部份加入搜寻的功能
*建立导览功能键，其中以「回到首页」、「回到上一页」这两个最为重要
*最后，「回到上一页」的按键除了首页以外，其他的页面都需要放置
2、手机站设重在内容的排版及简化
一般的手机、平板电脑等行动装置，不易容纳下适合於个人电脑的庞大网页资讯，因此手机行动网页的首要重点，就是减少内容，不论是图片、文字或是影音。
请记住一个重点：只要将最重要的资讯放入行动版网页，就是最主要的準则，重要性较低的、读取需要时间的内容，则可以透过超连结，连回到正常的官方网站。
行动网站必须十分的重视内容简化这一点，一个塞满内容的行动网站无法获得网路客户的青睞。
简单地对内容进行删除操作并不会令页面更简洁，而且这些被删除的内容说不定正是用户所需要的，因此对内容的排版设置多花点儿时间是很有必要的。
不要简单地删除你认为“不重要”的内容，应该重新调整这些内容的布局。为了易于用户阅读，要尽量避免使用大量的文字，将这些文本重新调整为小图标或小条目是不错的做法。此外，用引语、线条或其他设计元素隔开大段的文字，使这些板块显得更美观。
北京神州华宇网络科技有限公司认为使用视觉元素来完善文本元素：
标题同时使用文字和图标。
使用图形元素日期代替文字日期。
使用小信息图标来加强解释的部分。
除了字体的大小变化，使用不同的文章/标题颜色。
使用不同的浅背景色来区别不同的内容。
使用高亮来强调重要部分。
使用padding和negative space来突出文本或区分文本。
使用不同的“视图”，将内容分解成较小的部分。
从用户角度来说，他们希望阅读所有的内容，所以我们进行内容呈现，只是用隔断、重组或其他视觉方案来让这些内容更容易访问。
3、利用手机的天生优势
手机有著许多传统电脑所没有拥有的优势，其中最大的优势就是「行动力」，因此手机版网页应该要特别发扬这些特色，让行动网页具有一般网页更多的优势。举例来说：
*行动定位：大部分的智慧装置都有GPS或是定位的机制，可以让客户主动找到您的位置
*行动联系：如果客户使用的是行动电话，可以立即发话；如果是平板电脑，亦可以使用简讯或是e-Mail的方式传递讯息给客户
*邻近地点：如果您的事业有很多据点，请告诉您的客户，在他附近有哪一些地点是便於他能够抵达的
近年已经成为行动条码的QR Code设计，也应该纳入行动网页的设计元素在内。
4、手机站设计要有意义的导航
在移动设备上获取信息实际上是有趣的体验，因此，令用户在使用过程中感到愉快很有必要，简单地删除屏幕上的链接（或taps）并不能达到用户友好体验的目的。导航应该包含用户需要的内容，并提供明确的路径。如果用户知道跳转的具体页面，就会进行点击。
首先，确保导航在用户看来是“可点击”的，比如按钮、列表、箭头等等，这些小图标可以在一定程度上帮助用户明白下一步的操作。在没有鼠标悬停效果和tags的帮助下，要尽可能多地对用户进行引导。
标签是很重要的，用好它可以更好地引导用户。标签应保持简单且有意义，例如有一个链接需要好几个taps，你不用把返回键命名为前一页的标题，只需用“back”代替就行了。此外，避免使用作用不清的按钮或标签，这些都是丢失用户的潜在陷阱。但是简洁并不意味着简单，因此与其把“My Profile”或“Passwords” 隐藏在“设置”里，不如为它们增加额外的一两个导航按钮。
图标是一个简单却强大的沟通途径，不仅仅是因为手机阅读文字比较困难且耗时，还因为使用图标可以达到更好的视觉平衡。在手机网页中恰当地使用图标，可以提高用户的整体体验。另外，与标签相结合的图标对用户来说意味着更明确的导航路径。
5、 一栏卷动的最佳策略
大部分的行动装置，画面都不如桌上电脑那麼大，尤其是阅读文字时更需要加以放大。即使智慧手机都具有网页放大缩小功能，但是观看起来较為麻烦。
因此设计行动网页时，建议是能够以滑动萤幕的方式阅读网站，因為滑动网页比起放大网页观看来得简单多了。
6、手机站设计要有信息反馈
信息反馈是设计中很关键的一个部分，特别是手机网页，用户反馈显得尤为重要。
移动设备不存在鼠标悬停和动画，而且大多数设备都是在被触摸时才有所显示，所以及时提供清晰的操作反馈信息是非常重要的。在现实生活中，当我使用ATM机时，操作反馈信息包含听觉（按键声）、触觉（按钮的金属冰凉感）等方面，
但在移动设备上，我们只有一个选择——视觉反馈。
使用视觉反馈机制来与用户交流：
用色彩来突出已选择的区域。
当用户切换时使用淡入淡出动画。
使用边框颜色和渐变来表示按钮触摸状态。
使用不同的按钮或文本颜色来显示状态的变化。
当选择下拉菜单时，使用正在转向/已经转向箭头。
7、手机站设计要留白
虽然屏幕的尺寸变小了，空白却依然不可少，因为留白是所有优秀设计的关键。在手机网页设计中，由于空间限制，为了让设计更加有效、可用、可读，所有元素（按钮、导航、图标、文本等）需要有序正确地排列。
这并不是要你删减内容以达到留白的目的，也不是指用大字体以便用户阅读。手机网页设计需要比电脑网页设计更多的UI规划，而留白的规划更是起着重要的作用。
留白，以创造更好的用户体验：
用较小的字体，这样文本周围有空白部分，不会像用大字体那样显得臃肿。
在所有的方块元素周围使用大量的padding来构建文本块或图标。
元素和元素之间用大量清晰的白色网格进行区分。
围绕整个视图使用大量的padding把所有元素包围起来，以免元素溢出到无法操作的区域。
8、手机站设计要清晰的品牌
每个公司或应用都有不同风格的品牌元素，塑造品牌的关键是设计元素比如logo、字体和颜色等等要能代表该品牌。对于手机网页设计来说，这一点至关重要。Logo的位置可能与电脑版本有所不同，甚至可能只在Web应用的主视图呈现，所以配色方案很重要。
另一个要注意的点是，手机网页的顶部没有标题栏或地址栏，相应地，也就没有网站标题和图标。所以你的设计应该让用户知道，他们现在所浏览的网站名称，这对塑造品牌也很重要。
9、保证手机网站的打开速度。现在企业间的竞争激烈，同行的手机网站非常多，如果自己网站打开的速度太慢，很多用户没有耐心等待，就会流失掉许多客户。
10、手机网站图片要适配设置。
从手机上浏览网站必然没有那么方便，操作也不如PC端灵活自如，前面也说到了使用网站设计技术可以解决网站适应屏幕的问题，网站图片也不例外，但为了用户能将页面使用图片的地方看得更加清晰，可采用整站缩放的模式，而不是用户点击单张图片的缩放模式，小凡小编认为在这方面做得比较好的手机网站有站长工具，值得借鉴。当然，手机网站能少用图片是最好的。
1、导览功能大不同
手机网页与跟一般的网页不同的，在於当阅读文章到最后时，要回到最前头是麻烦的，因此设计网页的企业，除了减少卷动画面的机会外，也会加强导览的功能，让网页变得更容易於行动装置上阅读。导览设计的重点有：
*只在首页的部份加入搜寻的功能
*建立导览功能键，其中以「回到首页」、「回到上一页」这两个最为重要
*最后，「回到上一页」的按键除了首页以外，其他的页面都需要放置
2、手机站设重在内容的排版及简化
一般的手机、平板电脑等行动装置，不易容纳下适合於个人电脑的庞大网页资讯，因此手机行动网页的首要重点，就是减少内容，不论是图片、文字或是影音。
请记住一个重点：只要将最重要的资讯放入行动版网页，就是最主要的準则，重要性较低的、读取需要时间的内容，则可以透过超连结，连回到正常的官方网站。
行动网站必须十分的重视内容简化这一点，一个塞满内容的行动网站无法获得网路客户的青睞。
简单地对内容进行删除操作并不会令页面更简洁，而且这些被删除的内容说不定正是用户所需要的，因此对内容的排版设置多花点儿时间是很有必要的。
不要简单地删除你认为“不重要”的内容，应该重新调整这些内容的布局。为了易于用户阅读，要尽量避免使用大量的文字，将这些文本重新调整为小图标或小条目是不错的做法。此外，用引语、线条或其他设计元素隔开大段的文字，使这些板块显得更美观。
北京神州华宇网络科技有限公司认为使用视觉元素来完善文本元素：
标题同时使用文字和图标。
使用图形元素日期代替文字日期。
使用小信息图标来加强解释的部分。
除了字体的大小变化，使用不同的文章/标题颜色。
使用不同的浅背景色来区别不同的内容。
使用高亮来强调重要部分。
使用padding和negative space来突出文本或区分文本。
使用不同的“视图”，将内容分解成较小的部分。
从用户角度来说，他们希望阅读所有的内容，所以我们进行内容呈现，只是用隔断、重组或其他视觉方案来让这些内容更容易访问。
3、利用手机的天生优势
手机有著许多传统电脑所没有拥有的优势，其中最大的优势就是「行动力」，因此手机版网页应该要特别发扬这些特色，让行动网页具有一般网页更多的优势。举例来说：
*行动定位：大部分的智慧装置都有GPS或是定位的机制，可以让客户主动找到您的位置
*行动联系：如果客户使用的是行动电话，可以立即发话；如果是平板电脑，亦可以使用简讯或是e-Mail的方式传递讯息给客户
*邻近地点：如果您的事业有很多据点，请告诉您的客户，在他附近有哪一些地点是便於他能够抵达的
近年已经成为行动条码的QR Code设计，也应该纳入行动网页的设计元素在内。
4、手机站设计要有意义的导航
在移动设备上获取信息实际上是有趣的体验，因此，令用户在使用过程中感到愉快很有必要，简单地删除屏幕上的链接（或taps）并不能达到用户友好体验的目的。导航应该包含用户需要的内容，并提供明确的路径。如果用户知道跳转的具体页面，就会进行点击。
首先，确保导航在用户看来是“可点击”的，比如按钮、列表、箭头等等，这些小图标可以在一定程度上帮助用户明白下一步的操作。在没有鼠标悬停效果和tags的帮助下，要尽可能多地对用户进行引导。
标签是很重要的，用好它可以更好地引导用户。标签应保持简单且有意义，例如有一个链接需要好几个taps，你不用把返回键命名为前一页的标题，只需用“back”代替就行了。此外，避免使用作用不清的按钮或标签，这些都是丢失用户的潜在陷阱。但是简洁并不意味着简单，因此与其把“My Profile”或“Passwords” 隐藏在“设置”里，不如为它们增加额外的一两个导航按钮。
图标是一个简单却强大的沟通途径，不仅仅是因为手机阅读文字比较困难且耗时，还因为使用图标可以达到更好的视觉平衡。在手机网页中恰当地使用图标，可以提高用户的整体体验。另外，与标签相结合的图标对用户来说意味着更明确的导航路径。
5、 一栏卷动的最佳策略
大部分的行动装置，画面都不如桌上电脑那麼大，尤其是阅读文字时更需要加以放大。即使智慧手机都具有网页放大缩小功能，但是观看起来较為麻烦。
因此设计行动网页时，建议是能够以滑动萤幕的方式阅读网站，因為滑动网页比起放大网页观看来得简单多了。
6、手机站设计要有信息反馈
信息反馈是设计中很关键的一个部分，特别是手机网页，用户反馈显得尤为重要。
移动设备不存在鼠标悬停和动画，而且大多数设备都是在被触摸时才有所显示，所以及时提供清晰的操作反馈信息是非常重要的。在现实生活中，当我使用ATM机时，操作反馈信息包含听觉（按键声）、触觉（按钮的金属冰凉感）等方面，
但在移动设备上，我们只有一个选择——视觉反馈。
使用视觉反馈机制来与用户交流：
用色彩来突出已选择的区域。
当用户切换时使用淡入淡出动画。
使用边框颜色和渐变来表示按钮触摸状态。
使用不同的按钮或文本颜色来显示状态的变化。
当选择下拉菜单时，使用正在转向/已经转向箭头。
7、手机站设计要留白
虽然屏幕的尺寸变小了，空白却依然不可少，因为留白是所有优秀设计的关键。在手机网页设计中，由于空间限制，为了让设计更加有效、可用、可读，所有元素（按钮、导航、图标、文本等）需要有序正确地排列。
这并不是要你删减内容以达到留白的目的，也不是指用大字体以便用户阅读。手机网页设计需要比电脑网页设计更多的UI规划，而留白的规划更是起着重要的作用。
留白，以创造更好的用户体验：
用较小的字体，这样文本周围有空白部分，不会像用大字体那样显得臃肿。
在所有的方块元素周围使用大量的padding来构建文本块或图标。
元素和元素之间用大量清晰的白色网格进行区分。
围绕整个视图使用大量的padding把所有元素包围起来，以免元素溢出到无法操作的区域。
8、手机站设计要清晰的品牌
每个公司或应用都有不同风格的品牌元素，塑造品牌的关键是设计元素比如logo、字体和颜色等等要能代表该品牌。对于手机网页设计来说，这一点至关重要。Logo的位置可能与电脑版本有所不同，甚至可能只在Web应用的主视图呈现，所以配色方案很重要。
另一个要注意的点是，手机网页的顶部没有标题栏或地址栏，相应地，也就没有网站标题和图标。所以你的设计应该让用户知道，他们现在所浏览的网站名称，这对塑造品牌也很重要。
9、保证手机网站的打开速度。现在企业间的竞争激烈，同行的手机网站非常多，如果自己网站打开的速度太慢，很多用户没有耐心等待，就会流失掉许多客户。
10、手机网站图片要适配设置。
从手机上浏览网站必然没有那么方便，操作也不如PC端灵活自如，前面也说到了使用网站设计技术可以解决网站适应屏幕的问题，网站图片也不例外，但为了用户能将页面使用图片的地方看得更加清晰，可采用整站缩放的模式，而不是用户点击单张图片的缩放模式，小凡小编认为在这方面做得比较好的手机网站有站长工具，值得借鉴。当然，手机网站能少用图片是最好的。
用户在移动客户端都喜欢进行留言，分享功能。特别是看到一篇很棒的帖子都会选择分享到朋友圈或者空间中，让朋友也参与里面。例如现在比较流行的做就是做微信公众号大咖们，往往一篇帖子都会造成几千人的持续浏览、点赞或者分享内容，粉丝喜欢中这种参与行为，因为这种圈子拉动粉丝在持续发酵中，用户慢慢都会舍不得离开。
