互聯網產品跨屏設計的差異化論文

通訊技術的發展帶來了無線通訊技術的迅速崛起,3G甚至4G通訊網絡的出現使智能手機和平板電腦等移動設備己經成爲人們上網的首選硬件。智能手機和平板電腦之所以吸引用戶,其核心優勢在於方便攜帶,可隨時隨地享受移動Web及各類移動應用產品的服務,充分滿足了人們利用碎片化時間的需求。智能手機和平板電腦與傳統的桌面設備有着巨大的差異,使得傳統互聯網用戶所習慣的信息讀取方式和交互方式發生了巨大的改變,這些改變的產生首先來源於用戶的使用場景和情境的不同,這也使得互聯網產品設計從單一的桌面設計時代進入了跨屏設計時代。對於互聯網產品的設計開發團隊而言,跨屏設計帶來了更多的挑戰。要想使跨屏設計的產品能夠保證在任何尺寸的屏幕中的可訪問性及可用性,實現良好的用戶體驗,設計者必須首先了解不同屏幕之間的差異性,才能根據這些差異設計出符合用戶需求的產品。

互聯網產品跨屏設計的差異化論文

一、使用場景的差異化

根據百度發佈的報告顯示,移動互聯網用戶和桌面互聯網用戶在上網時間上有較大的區別。早上7點至10點、晚上9點至12點使用移動互聯網的用戶要明顯高於桌面互聯網,移動互聯網用戶使用高峯期出現在晚上10點,而桌面互聯網用戶使用高峯期出現在晚上8點。用戶使用桌面端設備使用互聯網產品通常是在室內固定場所,環境相對安靜和穩定,使用的目的多數是工作或學習。而移動端產品的使用場景則呈現明顯的移動化和多樣化,比如乘坐地鐵、公交車時,走路時,等餐時,健身時,睡前等各種場景,這都屬於用戶日常工作、學習之餘的碎片時間;另外一個常見的但是往往被忽視的場景,就是用戶身處穩定的環境中,但因爲沒有條件或懶於打開臺式機或筆記本,所以使用移動設備代替執行。

桌面設備是工作化的,大多用於完成工作學習上的任務。智能手機是個人化的,大多用於執行微型任務,主要目的是獲取網上提供的信息,實現娛樂和社交分享等。平板電腦是共享的,他們被認爲是一個備用的.筆記本電腦,主要用於內容消費。所以,設計者要清楚設備最適宜的使用場景,以針對這些場景中的用戶習慣進行相應的設計。

二、交互方式的差異化

桌面設備的操作方式通常是使用鼠標、鍵盤進行交互的控制,也可通過其他外接設備如手繪板等實現對軟件系統及屏幕對象的操控。這種通過鼠標、鍵盤的操作,精準度高,鼠標指針可以到達屏幕的任何一個部分,基本不會擋住造作對象;懸停時可以顯示隱藏的對象,並幫助確認目標;同一時間只支持單一輸入點;可通過鼠標形態的變化暗示操作進程。移動設備的交互方式要豐富許多,最常用的是手指通過點擊、滑動、收縮和旋轉等手勢對觸摸屏上的對象進行直接的操作,還可以通過語音的方式實現交互,或是利用移動設備本身的其他硬件功能,如重力感應器、溫度感應器、加速度感應器、光線感應器、壓力傳感器等實現交互。移動設備的交互控制相比較桌面設備來說,支持手勢操作,支持多點輸入,但精準度會差一些,容易產生誤操作;設備在單手操作的情況下,屏幕上的某些區域很難觸摸得到,手指或手可能會擋住操作對象;另外移動設備的交互沒有懸停狀態。

用戶在使用桌面設備時,由於鼠標箭頭能夠點擊的區域可以很小且相對精確,因此在操作方面的約束較少,可以完成精確性很高的交互任務。用戶在使用手機時,多數情境下是豎屏狀態下的操作,使用單手握住機器底部,使用同一隻手或另一隻手的拇指進行操作;而用戶使用平板電腦時,多以橫屏狀態下的操作居多,瀏覽或觀看時一般是雙手握住機器中部或稍偏下一點的位置,有交互行爲時則會變爲一隻手握住設備中部,另一隻手操作。

三、屏幕容量的差異化

屏幕容量主要是指屏幕尺寸。桌面設備的屏幕尺寸通常大於13英寸,移動端設備常見的屏幕尺寸爲2. 8~10. 1英寸,尺寸的不同帶來了差異。PC端產品的信息容量大,信息佈局相對靈活,可以採用多欄的佈局,導航的方式也更加豐富。而移動端產品,尤其手機端產品信息容量小,在設計時除了需要提供清晰的導航、操作邏輯和引導來幫助用戶瞭解當前在哪兒,以及接下來該幹什麼,還應該考慮到控件之間的相互干擾。

移動端設備內置的感應器可以根據設備的定向方式來決定屏幕的顯示模式,如優酷手機客戶端軟件在豎屏模式中,視頻窗口較小,但相關輔助信息比較豐富;而在橫屏模式下,視頻展開爲全屏,並向用戶提供了更加全面的播放控制功能。

另外,與移動應用啓動後獨佔整個屏幕不一樣,多數桌面客戶端產品啓動後會以窗口的形式顯示在屏幕上。當窗口的尺寸調整時,需要考慮到窗口尺寸的變化對產品的影響,應根據實際情況決定是否對窗口內的信息內容做自適應處理,或限定窗口的最小尺寸。

四、信息組織的差異化

對於傳統的桌面端產品,用戶使用時的專注度比較高,同時屏幕容量大,交互操作容易,因此PC端產品的信息組織比較靈活,可以針對產品本身的規模呈現寬而深或窄而深等的層級關係樣式。而移動端互聯網產品受到移動設備屏幕容量的限制,在信息的展示方式上會針對功能和用戶需求進行細化和簡化。同時,用戶需要通過更多的頁面之間的跳轉來實現信息的獲取,而跳轉的速度又受限於設備本身的性能。因此,移動端產品的信息組織與設計更加重視提高單頁信息傳輸能力,儘量減少跨頁信息傳遞,通過壓縮或拉寬信息組織結構來避免因反覆切換頁面而造成的用戶流失。因此,在信息的層級組織上,通常會呈現出寬而淺或窄而淺的層級樣式。

五、導航系統的差異化

(一)導航內容的差異化

導航系統關注的是如何瀏覽信息。導航的作用是告知用戶當前位置,怎麼返回原來的地方,用戶還可以去哪裏,下一步打算去哪裏,怎麼去,附近還有什麼地方等,目的就是讓用戶很清晰明確地瀏覽信息。

在產品從桌面端向移動化設計的過程中,要對原導航進行一定的刪減、隱藏、組織,以更好地適合移動端屏幕特性,特別要把握目標用戶的本質需求,結合產品的使用場景、用戶的使用習慣以及軟硬件特性等進行導航的再設計。比如,亞馬遜移動版導航的設計進行了重新的組織規劃,並很好地應用了Mille:法則,將PC版的分類導航項目“電子和計算機”分解爲“電子類”與“計算機和辦公”兩個類,每個類裏的內容不超過7項,這是一個逐步精簡和重新規劃的過程。

桌面端產品的設計考慮的是如何將操作展示給用戶,而移動端產品的設計更多考慮的是如何將操作巧妙地隱藏起來。這種隱藏實際上是對核心功能的一種突出,即在導航內容等級相同或者相近的情況下,顯示相對重要的內容,而把其他內容隱藏到“更多”中,用戶可以點擊“更多”後,在當前頁展開或者是跳轉到新頁面,這是常見的處理方式。

(二)導航樣式的差異化

根據外在形式的不同,桌面端互聯網產品導航又可分爲頂部橫向導航、側邊欄導航、Tab標籤導航、麪包屑導航、頁內錨點導航等多種形式。由於移動終端特性,移動互聯網產品可以採用的導航主要有縱向導航、分類鏈接導航、Tab標籤導航等。

頂部橫向導航在桌面端產品上一般會貫穿產品的所有頁面,而移動端產品上的全局導航並不一定每個頁面都有。而且因爲移動端屏幕尺寸的原因和手機交互行爲的影響,以縱向導航爲主。另外,移動端產品上的全局導航經常會把導航上內容分類做成ICON,以符合用戶手指交互的需求,以增強交互體驗。

麪包屑導航是桌面端互聯網產品必備的導航之一。它可以讓用戶明確瞭解自己所處的位置,引導用戶通行以及瞭解當前頁在整個產品系統中的位置,提高用戶體驗,並能很好地幫助用戶快速學習和了解產品內容和組織方式。因此,麪包屑導航在移動Web中的使用頻率也比較多,但由於移動端屏幕橫向寬度較小,所以通常會保留關鍵的路徑,例如首頁、欄目等,從而使麪包屑導航在一行之內完整顯示。

移動設備特有的交互屬性也會產生完全不同於桌面端產品的導航樣式,如抽屜式導航,這種導航方式在移動應用產品中的使用相當廣泛。抽屜式導航模式一般採用將導航主體隱藏在移動應用側邊的方式,通過按鈕來呼出導航,在使用完成之後再使用相同的按鈕隱藏起來。根據不完全的考證,這種導航方式始於Facebook,不久Gmail, Path等應用都採用了這種導航模式,目前國內也有很多產品使用了抽屜式導航,如網易新聞、Weico新浪的微博客戶端等產品。

六、總結

由於交互媒介由原來的鼠標、鍵盤變成了用戶的手指,使得桌面端和移動端互聯網產品的差異化是比較明顯的。設計師在進行移動設備軟件系統的設計時勢必會遇到很多不同於傳統桌面設備的問題。比如,當用戶在進行操作時,界面的一部分必然會被手指遮擋住,所以要儘量保證控制元件的佈局不會干擾到實際內容。還有很多同樣的問題,基本可以歸納爲“舒適度”與“可視性”這兩點。正是緣於此,很多的手機端應用會將主要控制元件或導航放在屏幕底部,而這與傳統Web設計的習慣正好相反。另外,移動設備的硬件特點使其擁有更多傳統計算機所不具備的功能,譬如GPS、內置麥克風及攝像頭、觸控、陀螺儀、重力感應器、羅盤等,基於這些功能打造的不同類型的客戶端應用,它們所對應的使用場景也各有不同。在多數情況下,無論移動應用還是移動端Web,它們都應該與桌面版的網站及產品具有相似的內容與功能,展現相同的品牌DNA。當然,不同終端的產品基於設備自身的特點自然會產生差異化,如交互方式等方面會有很大的不同,但在內容呈現方面則儘可能保持一致。同時,基於移動終端的硬件特點,移動應用在功能設計方面會更加豐富。如著名的電子商務網站亞馬遜的移動客戶端還具有條碼掃描功能,正是充分利用移動設備特有功能的典型案例。因此,當互聯網產品從桌面端移植到移動端的時候,除了應具備相似的內容與功能,展現相同的品牌DNA,還要考慮他們之間的差異化,根據使用場景、操作方式、導航系統、信息架構和屏幕容量等的不同,制定相應的原則和設計方法,爲互聯網產品成功的移植做好準備。