2014年,淘宝宣布开始对网页版支付宝转帐收费,但移动端转帐依然免费,这一举措不难看出,随着移动端网民数量的日益增多,各企业主已经把目标转移到了移动端,移动端网站建设也成为企业发展盈利的又一主攻方向,那移动网站建设应该从哪些方面下手呢?又需要遵循什么规则呢?下面我就跟大家一一先容:
In 2014, taobao announced to web page version of the alipay transfer fee, but the mobile end still free transfer, a move that it is not hard to see, is increasing in the number of mobile Internet users, the owners have transfer target in the mobile terminal, mobile terminal website construction has become a profitable enterprise development and the main direction, the construction of the mobile web site should from what respect to begin? What you need to follow the rules? Below I will introduce one by one with you:
1、一目了然
1, be clear at a glance,
一目了然的意思就是可以让用户在短时间内,可以把内容看的清楚,那这就需要确保内容与屏幕大小的一致,有整齐的排版和舒服的字型大小,增强用户的体验。
Be clear at a glance is can let users in a short period of time, you can read the content clearly, it will need to ensure that content is consistent with the size of the screen, have a neat layout and comfortable font size, enhance the user experience.
大部分的行动装置,画面都不如桌上电脑那么大,尤其是阅读文字时更需要加以放大。即使智能手机具有网站放大缩小功能,但是观看起来较为麻烦。因此设计行动网站时,建议是能够以滑动萤幕的方式阅读网站,因为滑动网站比起放大网站观看来得简单多了。
Most of the mobile device, the picture is as big as desktop computers, especially when reading the text more needs to be enlarged. Even smartphones have website zoom function, but more trouble to watch. Action site, so the design proposal is able to read the website in the form of sliding screens, because its much easier to slide than amplification site to watch.
2、简化导航
2, simplified navigation,
为避免用户横向滚动页面,这个就需要有明确的目录结构,提供醒目的“后退”和“首页”按钮,对于导航的目录结构,GOOGLE列出了四种常见的手机网站的导航形式,分别是:横条式、大按钮式、列表式和选项式。
To avoid user horizontal scrolling page, this will need to have the directory structure of a clear, eye-catching \"back\" and \"home page\" button, for the directory structure of a navigation, 谷歌 lists four common form of mobile web site navigation, respectively is: horizontal type, the big push button, list type and option type.
手机网站与跟一般的网站不同的,在于当阅读文章到最后时,要回到最前头是麻烦的,因此,网站制作企业,除了减少卷动画面的机会外,也要加强导览的功能,让网站变得更容易于行动装置上阅读。
Mobile websites with general sites, at the end of is that when reading the article, it is trouble to back to the head, therefore, the website production company, in addition to the opportunity to reduce volume animation, also want to strengthen the functions of a tour, make the website more easily on the mobile device to read.
导览设计的重点有:只在首页的部份加入搜寻的功能,建立导览功能键,其中以「回到首页」、「回到上一页」这两个最为重要,最后,「回到上一页」的按键除了首页以外,其余的页面都需要放置。
Navigation design emphasis: only part of the front page to join search function, set up a tour function keys, with \"back to the home page\", \"return to previous page\" the two most important, in the end, \"return to previous page\" button in addition to the home page, the rest of the page needs to be placed.
3、流畅体验
3, flow experience,
允许用户保存搜索、书签、购买等信息的功能。这就尽可能在所有平台中提供相同信息和功能,即无论是PC端、平板端还是手机端都保持网站信息的一致性。
Allows the user to save search, bookmarks, purchase information such as the function. This is as far as possible, provide the same information and functions in all platforms, namely, whether it be a PC, tablet or mobile client to keep the consistency of website information.
4、减少文字输入部分
Part 4, the decrease of text input
手机大多没有实体的键盘,或仅只有12键的电话输入功能,因此输入文字上会比起使用键盘麻烦得多。因此,减少使用者输入文字的机会,例如:个人的帐号、密码、搜寻内文、使用编辑器等等,都是行动网站要尽力避免的。
Mobile phone mostly no physical keyboard, or just only 12 key phone input function, so the input text will be compared with using the keyboard. Therefore, decreases the chance of user input text, such as: personal account, password, and search for text, use the editor, etc., are the action site will try to avoid.
建议设计的重点:允许行动上网使用者储存输入的帐号密码资讯,输入的区块尽量加以放大,允许行动上网使用者,输入简易的密码,例如PIN数字密码。
Recommended design key: allows action to Internet users to store input account password information, input of the block as far as possible to amplify, allow Internet user action, simple input password, such as PIN number password.
5、拇指操作
5, the thumb operation
通过较大的按钮,以降低操作难度。为防止用户因为按钮较小而误点其它选项或内容而造成的不便,可以在有限的手机屏幕上再适当给按钮做些留白,按钮之间的间距要加宽,以此扩大点击范围。
By large buttons, in order to reduce the operation difficulty. To prevent users because of the small button was delayed other options or content for the inconvenience caused, can in the limited do appropriate to the button on the phones screen space, spacing between button to widen, thus expanding the scope of the click.
6、简单快捷
6, simple and quick
所谓简单快捷,就是要在手机有限的屏幕上以最简单最实用最快捷的形式展示给用户最需要的东西,让用户方便。做法是优先提供用户最需要的内容和功能,尽可能的去掉在手机网站中可以去掉的内容、功能、板块、按钮等,只留下最精华的部分,起到精简的作用。
A simple and quick, is to be on the phone with limited screen in the form of the easiest and most practical the fastest to show users the most need of things, let the user convenience. Practice is to provide users need the content and function of the most preferred, as far as possible to remove can be removed in the mobile web content, function, buttons, plate, etc., leaving only the most essence part, have the effect of lean.
一般的手机、平板电脑等行动装置,不易容纳下适合于个人电脑的庞大网站资讯,因此手机移动网站的首要重点,就是减少内容,不论是图片、文字或是影音。
General mobile phones, tablets and other mobile devices, not easily accommodate large website information suitable for personal computers, so mobile web site top priority, is to reduce the content, whether it is a text, images or video.
请记住一个重点:只要将最重要的资讯放入行动版网站,就是最主要的准则,重要性较低的、读取需要时间的内容,则可以透过超连结,连回到正常的官方网站。行动网站必须十分的重视内容简化这一点,一个塞满内容的行动网站无法获得网路客户的青睐。
Please remember an important point: as long as one of the most important information into action version of the site, is the most important criterion, the content of the low importance, reading takes time, you can through the hyperlink, even back to their normal official website. Operation site must be very the attention of the content to simplify this, action a stuffed with content website dont have access to online customers.
另外,建议你可以使用颜色和阴影,以便来凸显按钮。这一点不仅仅是针对搜索引擎的优化设计,更是手机站针对用户体验的人性化设计。
In addition, suggest you can use color and shadow, so that to highlight button. This is not just for search engine optimization design, but also the humanized design of mobile station on the user experience.
7、 触控萤幕与非触控萤幕设计
7, touch screen and the touch screen design
虽然现在是触碰型的智能手机当道,但是仍有为数不少的传统手机,没有触碰的界面,使用的是传统的控制方向键做为导览的工具。
Although it is a touch type of smart phones, but there are still a lot of traditional cell phones, no touch interface, using the traditional control of the direction key as a navigation tool.
例如:减少画面中国足球协会超级联赛连结的数量,可以让选择连结的时候出现一些减少一些按钮的动作,或是加大文字以减少误击的问题。 此外更重要的是滑鼠的原理跟触碰介面的原理有很大的差异,因此行动版的网站应该避免只有电脑滑鼠才能做到的功能。
For example, a reduction in the number of body Chinese super link, can make choice when connecting to a few to reduce some of the action button, or increase the text in order to reduce accidental hit. Also more important is the principle of the mouse with the touch interface principle there is a big difference, so the action version of the site should avoid can only do the function of the computer mouse.
举例来说:「下拉选单」的这一项功能,因为行动装置没有「滑鼠座标」的设计,所以无法触发滑鼠移动过去才会显示出来的选单。
For example: \"drop-down menu\" this function, because there is no \"mouse coordinates\" mobile device design, so could not trigger the mouse move past menu will be displayed.
8、广泛适应
8, widely adapted to
网站能在不同的移动设备上运行,移除flash,可以使用HTML5来实现互动内容和动画。很多站长可能不太懂HTML5相关技术以及自适应网页技术,没关系,你可以看下《如何利用“自适应网页设计”实现不同的设备上呈现同样的网页》、《全方位解析响应式网页的设计与应用》和《响应式网页布局的实现方法原理》的相关先容,相信可以解决你现在的问题。
Website can run on different mobile device, removing the flash, you can use it to realize the interactive content and animation. Many webmasters dont know much about HTML 5 related technology and adaptive web technologies, it doesnt matter, you can see the how to use the \"adaptive web design\" to achieve the same page on different devices \", \"comprehensive analytic responsive web design and application of and implementation principle of responsive web page layout related introduction, believe that we can solve your problem now.
手机的规格众多,有的解析度为320*240,较新的则为800*480,而次世代的手机更有720P的解析度,因此行动网站如何满足众多的需求?一般来 说有两种作法,一种是建立不同解析度的行动网站,由用户于手机行动入口网站自行选择;另一种做法则是透过手机的语法,例如CSS语法中的 Viewpoint就能够根据手机的解析度加以决定浏览画面的宽度。
Many of the specifications of the phone, some is 320 * 240 resolution, the new 800 * 800, and the next generation of mobile phones more 720 p resolution, therefore action website how to meet the needs of many? Generally to say there are two types of practice, a kind of action is to set up different resolution site, by the user in the mobile phone action portal to choose; Another way is through the grammar of the mobile phone, for example in the CSS syntax Viewpoint can be determined according to the resolution of mobile browsing the width of the picture.
9、重新定向,持续改进
9, redirect, continuous improvement
自动判断移动设备,重新定向相应适合的网站内容,根据不同的移动设备和屏幕尺寸,来显示相应的网站内容,让用户可以切换电脑版与移动版网站,以便他可以选择下次访问的版本。
Mobile devices, automatic judgment, redirect the corresponding suitable content, according to the different mobile devices and the screen size, to display the corresponding content, let users can switch the computer version with mobile web site, so that he can choose to visit next time.
使用分析工具,了解用户如何使用网站,收集用户意见并反复测试,追踪表现。移动网站不是移动应用,所以通过这些,可以得到持续的改进和调整。
Using analysis tools, to understand how users use the site, collect user opinion and repeatedly testing, tracking performance. Mobile web site is not a mobile application, so through these, continuous improvement and adjustment can be obtained.
10、立足本地,轻松转化
10, based on local, easy transformation
与用户位置相结合的个人化信息,例如地图、路线、电话、本地信息等,在所有提供内容当中,本地化信息是最对用户有帮助的。
Combined with a users location of personal information, such as map, route, telephone, local information, etc., of all the content, the localization information is most helpful to users.
简化注册登录流程,也就减少了用户的输入麻烦,但是提供有助于转化/注册的信息也不能忽视。只是在简单流程的前提下,提供有助于提升转化率的信息给用户。
Login to simplify the registration process, but also reduces the users input of trouble, but to provide helps to convert/registered information cannot be ignored. Only on the premise of simple process, provide help to promote the conversion of information to the user.
手机上网有着许多传统电脑所没有拥有的优势,其中最大的优势就是不受时间和地点的限制,因此手机网站应该要特别发扬这些特色,让移动网站具有一般网站不具有的更多优势。
Mobile Internet has a lot of traditional computer did not have the advantage of one of the biggest advantage is not restricted by time and place, so mobile site should be especially carry on these characteristics, make a general website dont have more advantages on mobile web site.
云无限,您身边的网站建设专家,为您提供网站建设、域名服务、网站营销、企业邮箱等一站式服务!
Cloud is infinite, around you website construction experts, to provide you with the website construction, domain name service, web marketing, E-mail and other one-stop service!