在所有的移動(dòng)設(shè)備上都能顯示
Can be displayed on all mobile devices
移動(dòng)設(shè)備不光有手機(jī),還有平板不同瀏覽器大屏幕等等,雖然手機(jī)是主要移動(dòng)設(shè)備,但是也不能略過其它移動(dòng)設(shè)備。
Mobile devices not only include mobile phones, but also tablets with different browsers and large screens. Although mobile phones are the main mobile devices, they cannot be ignored by other mobile devices.
在移動(dòng)網(wǎng)站交付之前,需要進(jìn)行測試??梢允褂玫软憫?yīng)式網(wǎng)站測試工具進(jìn)行測試,確保在所有的移動(dòng)設(shè)備上,網(wǎng)站都能正常顯示。
Before delivering mobile websites, testing is required. You can use responsive website testing tools to ensure that the website can display normally on all mobile devices.
手機(jī)網(wǎng)站方便交互
Mobile websites facilitate interaction
手機(jī)網(wǎng)站的屏幕比較小,并且沒有實(shí)體鍵盤,所以,一些在PC上很容易完成的操作,在手機(jī)上可能存在難度。
The screen of mobile websites is relatively small and there is no physical keyboard, so some operations that are easy to complete on a PC may be difficult on a mobile phone.
例如,表單填寫中的日期填寫,在PC上可以直接使用鍵盤輸入,但是在手機(jī)上就要避免這種操作,可以通過滾動(dòng)滑動(dòng)的方式選擇日期??傊?,手機(jī)網(wǎng)站應(yīng)該盡量減少用戶使用鍵盤。
For example, when filling in a form, the date can be entered directly using the keyboard on a PC, but this operation should be avoided on a mobile phone. You can select the date by scrolling and sliding. In short, mobile websites should minimize the use of keyboards by users.
單層的導(dǎo)航深度設(shè)計(jì)
Single layer navigation depth design
不少PC網(wǎng)站大導(dǎo)航設(shè)計(jì)深度都在兩層以上,甚至多大三級。但是手機(jī)網(wǎng)站應(yīng)該避免這樣的設(shè)計(jì)。
Many PC websites have large navigation designs with a depth of at least two layers, or even up to three levels. But mobile websites should avoid such designs.
一是手機(jī)去點(diǎn)擊更多的層級,不太方便和精準(zhǔn)。二是手機(jī)用戶沒有PC網(wǎng)站用戶的耐心,他們不會(huì)去操作三次乃至更多,再找到自己需要的信息。
One is that clicking on more levels on a mobile phone is not very convenient and accurate. Secondly, mobile users do not have the patience of PC website users, they will not operate three or more times to find the information they need.
所以,手機(jī)網(wǎng)站的導(dǎo)航設(shè)計(jì)應(yīng)該采用一鍵直達(dá)的設(shè)計(jì)思路,一個(gè)導(dǎo)航對應(yīng)一個(gè)頁面。
Therefore, the navigation design of mobile websites should adopt a one click direct approach, with one navigation corresponding to one page.
隨時(shí)可以返回主頁
You can return to the homepage at any time
因?yàn)樯厦嬲f了,手機(jī)網(wǎng)站是單層深度設(shè)計(jì),這會(huì)對用戶返回首頁造成一定的困難。
Because as mentioned above, mobile websites are designed with a single layer depth, which can cause certain difficulties for users to return to the homepage.
例如,用戶已經(jīng)處于一個(gè)頁面,如果要返回主頁,需要連續(xù)操作手機(jī)的返回鍵,這顯然不太友好。
For example, if a user is already on a page and wants to return to the homepage, they need to continuously operate the return button on their phone, which is obviously not very friendly.
為此,手機(jī)網(wǎng)站的單頁面,應(yīng)該設(shè)計(jì)有返回主頁的按鈕,或者置頂?shù)陌粹o,一鍵直達(dá)。特別是一些頁面較長,更應(yīng)該有這樣的設(shè)計(jì)。
For this reason, the single page of mobile websites should be designed with a button to return to the homepage or a button at the top, with one click direct access. Especially for some pages that are longer, this design should be more appropriate.
搜索和填表是否容易
Is it easy to search and fill out forms
沒有人喜歡使用一個(gè)虛擬的小鍵盤輸入大量的文字,也是因?yàn)槿绱?,手機(jī)語音可以在手機(jī)上大放其彩。
No one likes to use a virtual small keyboard to input a large amount of text, and that's why mobile voice can shine brightly on the phone.
而一些場景又是必須要使用鍵盤輸入的。例如表單的輸入,此時(shí),設(shè)計(jì)方面就需要進(jìn)行轉(zhuǎn)化,將鍵盤輸入轉(zhuǎn)化為滑動(dòng)操作輸入,如上文提到了日期滑動(dòng)選擇。
And some scenarios require keyboard input. For example, for form input, in this case, the design aspect needs to be transformed from keyboard input to sliding operation input, as mentioned earlier in the date sliding selection.
還有一個(gè)辦法就是進(jìn)行智能過濾和提醒,例如電商手機(jī)網(wǎng)站的搜索輸入,只需要輸入少量的信息,就會(huì)跳出更多的選項(xiàng),用戶只需要選擇即可。
Another method is to perform intelligent filtering and reminders, such as for search input on e-commerce mobile websites. With only a small amount of information input, more options will pop up, and users only need to choose.
圖像的縮放
Scaling of images
手機(jī)網(wǎng)站的圖像設(shè)計(jì)成為縮放模式,這是合適的。因?yàn)槠聊惠^小,一些用戶希望能夠查驗(yàn)圖片的細(xì)節(jié),而進(jìn)行圖像的放大。特別是電商手機(jī)網(wǎng)站設(shè)計(jì),不少電商用戶喜歡去看細(xì)節(jié)。
The image design of mobile websites should be in zoom mode, which is appropriate. Due to the small size of the screen, some users hope to be able to examine the details of the image and enlarge it. Especially in the design of e-commerce mobile website, many e-commerce users like to look at the details.
所以,網(wǎng)站設(shè)計(jì)師需要對圖像的質(zhì)量和圖像大小進(jìn)行把握和平衡。
So, website designers need to grasp and balance the quality and size of images.
所有的內(nèi)容均可在移動(dòng)設(shè)備上播放
All content can be played on mobile devices
某些類型的內(nèi)容,尤其是視頻,可能不能在所有移動(dòng)設(shè)備上播放。例如,F(xiàn)lash不能在很多移動(dòng)設(shè)備上運(yùn)行。這也適用于不支持的視頻格式。如果你的內(nèi)容不能播放,這對于手機(jī)用戶來說是非常令人沮喪的,并且會(huì)破壞體驗(yàn)。所以,對于所有音頻和視頻內(nèi)容,堅(jiān)持使用HTML5標(biāo)簽可能是一個(gè)更好的主意。
Some types of content, especially videos, may not play on all mobile devices. For example, Flash cannot run on many mobile devices. This also applies to unsupported video formats. If your content cannot be played, it is very frustrating for mobile users and can disrupt the experience. So, for all audio and video content, insisting on using HTML5 tags may be a better idea.
復(fù)雜任務(wù)的可轉(zhuǎn)移
Transferability of complex tasks
移動(dòng)網(wǎng)站的好處是隨時(shí)可以訪問,但是一些復(fù)雜任務(wù),用戶希望在PC上完成,或者處于隱私的考慮,不會(huì)在手機(jī)上使用。所以手機(jī)網(wǎng)站需要滿足用戶的這種需求。
The advantage of mobile websites is that they can be accessed at any time, but for some complex tasks that users hope to complete on their PC, or for privacy reasons, they will not use them on their phone. So mobile websites need to meet the needs of users.