您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 设计理论 >> 浏览设计教程

7个手机版网页设计的原则

手机上网不仅是可见的趋势,更是以锐不可挡的数量在惊人成长,网页设计者应该开始接触手机版网页设计

手机网页设计概念,与一般个人电脑使用的概念有些不同,因此,我们在这裡简单的归纳出一些设计的原则:

 

1. 简化内容

一般的手机、平板电脑等行动装置,不易容纳下适合於个人电脑的庞大网页资讯,因此手机行动网页的首要重点,就是减少内容,不论是图片、文字或是影音。

请记住一个重点:只要将最重要的资讯放入行动版网页,就是最主要的準则,重要性较低的、读取需要时间的内容,则可以透过超连结,连回到正常的官方网站。

行动网站必须十分的重视内容简化这一点,一个塞满内容的行动网站无法获得网路客户的青睞。

 
 

2. 一栏卷动的最佳策略

大部分的行动装置,画面都不如桌上电脑那麼大,尤其是阅读文字时更需要加以放大。即使智慧手机都具有网页放大缩小功能,但是观看起来较為麻烦。

因此设计行动网页时,建议是能够以滑动萤幕的方式阅读网站,因為滑动网页比起放大网页观看来得简单多了。

 

3. 导览功能大不同

手机网页与跟一般的网页不同的,在於当阅读文章到最后时,要回到最前头是麻烦的,因此设计网页的企业,除了减少卷动画面的机会外,也会加强导览的功能,让网页变得更容易於行动装置上阅读。导览设计的重点有:

*只在首页的部份加入搜寻的功能
*建立导览功能键,其中以「回到首页」、「回到上一页」这两个最為重要
*最后,「回到上一页」的按键除了首页以外,其餘的页面都需要放置

 
 

4. 减少文字输入部份

手机大多没有实体的键盘,或仅只有12键的电话输入功能,因此输入文字上会比起使用键盘麻烦得多。因此,减少使用者输入文字的机会,例如:个人的帐号、密码、搜寻内文、使用编辑器...等,都是行动网页要尽力避免的。设计的重点如下:

*允许行动上网使用者储存输入的帐号密码资讯
*输入的区块尽量加以放大
*允许行动上网使用者,输入简易的密码,例如PIN数字密码

 

5. 思考多种版本的手机网页版本

手机的规格眾多,有的解析度為320*240,较新的则為800*480,而次世代的手机更有720P的解析度,因此行动网站如何满足眾多的需求?

一般来说有两种作法,一种是建立不同解析度的行动网站,由用户於手机行动入口网页自行选择,以Facebook的例子来说,mobile.facebook.com是适用於大部分的智慧手机与平板电脑,而0.facebook.com则是用於非智慧手机或是网路连线速度极慢的区域;另一种做法则是透过手机的语法,例如CSS语法中的Viewpoint就能够根据手机的解析度加以决定瀏览画面的宽度。

 

6. 触控萤幕与非触控萤幕设计

虽然今日触碰型的智慧手机当道,但是仍有為数不少的传统手机,没有触碰的介面,使用的是传统的控制方向键做為导览的工具。例如:减少画面中超连结的数量,可以让选择连结的时候出现一些减少一些按钮的动作,或是加大文字以减少误击的问题。

此外更重要的是滑鼠的原理跟触碰介面的原理有很大的差异,因此行动版的网页应该避免只有电脑滑鼠才能做到的功能,举例来说:「下拉选单」的这一项功能,因為行动装置没有「滑鼠座标」的设计,所以无法触发滑鼠移动过去才会显示出来的选单。

 

7. 利用手机的天生优势

手机有著许多传统电脑所没有拥有的优势,其中最大的优势就是「行动力」,因此手机版网页应该要特别发扬这些特色,让行动网页具有一般网页更多的优势。举例来说:

*行动定位:大部分的智慧装置都有GPS或是定位的机制,可以让客户主动找到您的位置

*行动联繫:如果客户使用的是行动电话,可以立即发话;如果是平板电脑,亦可以使用简讯或是e-Mail的方式传递讯息给客户

*邻近地点:如果您的事业有很多据点,请告诉您的客户,在他附近有哪一些地点是便於他能够抵达的

近年已经成為行动条码的QR Code设计,也应该纳入行动网页的设计元素在内。

原文內容 http://www.webcredible.co.uk/user-friendly-resources/web-usability/mobile-guidelines.shtml

[教程作者:图趣]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/Tutorial/di977.html
网页设计之首页频道设计要点总结
网页设计之节奏韵律的快感
图趣网微信
建议反馈