互聯(lián)網(wǎng)產(chǎn)品跨屏設(shè)計的差異化論文
通訊技術(shù)的發(fā)展帶來了無線通訊技術(shù)的迅速崛起，3G甚至4G通訊網(wǎng)絡(luò)的出現(xiàn)使智能手機和平板電腦等移動設(shè)備己經(jīng)成為人們上網(wǎng)的首選硬件。智能手機和平板電腦之所以吸引用戶，其核心優(yōu)勢在于方便攜帶，可隨時隨地享受移動Web及各類移動應(yīng)用產(chǎn)品的服務(wù)，充分滿足了人們利用碎片化時間的需求。智能手機和平板電腦與傳統(tǒng)的桌面設(shè)備有著巨大的差異，使得傳統(tǒng)互聯(lián)網(wǎng)用戶所習(xí)慣的信息讀取方式和交互方式發(fā)生了巨大的改變，這些改變的產(chǎn)生首先來源于用戶的使用場景和情境的不同，這也使得互聯(lián)網(wǎng)產(chǎn)品設(shè)計從單一的桌面設(shè)計時代進(jìn)入了跨屏設(shè)計時代。對于互聯(lián)網(wǎng)產(chǎn)品的設(shè)計開發(fā)團隊而言，跨屏設(shè)計帶來了更多的挑戰(zhàn)。要想使跨屏設(shè)計的產(chǎn)品能夠保證在任何尺寸的屏幕中的可訪問性及可用性，實現(xiàn)良好的用戶體驗，設(shè)計者必須首先了解不同屏幕之間的差異性，才能根據(jù)這些差異設(shè)計出符合用戶需求的產(chǎn)品。
一、使用場景的差異化
根據(jù)百度發(fā)布的報告顯示，移動互聯(lián)網(wǎng)用戶和桌面互聯(lián)網(wǎng)用戶在上網(wǎng)時間上有較大的區(qū)別。早上7點至10點、晚上9點至12點使用移動互聯(lián)網(wǎng)的用戶要明顯高于桌面互聯(lián)網(wǎng)，移動互聯(lián)網(wǎng)用戶使用高峰期出現(xiàn)在晚上10點，而桌面互聯(lián)網(wǎng)用戶使用高峰期出現(xiàn)在晚上8點。用戶使用桌面端設(shè)備使用互聯(lián)網(wǎng)產(chǎn)品通常是在室內(nèi)固定場所，環(huán)境相對安靜和穩(wěn)定，使用的目的多數(shù)是工作或?qū)W習(xí)。而移動端產(chǎn)品的使用場景則呈現(xiàn)明顯的移動化和多樣化，比如乘坐地鐵、公交車時，走路時，等餐時，健身時，睡前等各種場景，這都屬于用戶日常工作、學(xué)習(xí)之余的碎片時間;另外一個常見的但是往往被忽視的場景，就是用戶身處穩(wěn)定的環(huán)境中，但因為沒有條件或懶于打開臺式機或筆記本，所以使用移動設(shè)備代替執(zhí)行。
桌面設(shè)備是工作化的，大多用于完成工作學(xué)習(xí)上的任務(wù)。智能手機是個人化的，大多用于執(zhí)行微型任務(wù)，主要目的是獲取網(wǎng)上提供的信息，實現(xiàn)娛樂和社交分享等。平板電腦是共享的，他們被認(rèn)為是一個備用的筆記本電腦，主要用于內(nèi)容消費。所以，設(shè)計者要清楚設(shè)備最適宜的使用場景，以針對這些場景中的用戶習(xí)慣進(jìn)行相應(yīng)的設(shè)計。
二、交互方式的差異化
桌面設(shè)備的操作方式通常是使用鼠標(biāo)、鍵盤進(jìn)行交互的控制，也可通過其他外接設(shè)備如手繪板等實現(xiàn)對軟件系統(tǒng)及屏幕對象的操控。這種通過鼠標(biāo)、鍵盤的操作，精準(zhǔn)度高，鼠標(biāo)指針可以到達(dá)屏幕的任何一個部分，基本不會擋住造作對象;懸停時可以顯示隱藏的對象，并幫助確認(rèn)目標(biāo);同一時間只支持單一輸入點;可通過鼠標(biāo)形態(tài)的變化暗示操作進(jìn)程。移動設(shè)備的交互方式要豐富許多，最常用的是手指通過點擊、滑動、收縮和旋轉(zhuǎn)等手勢對觸摸屏上的對象進(jìn)行直接的操作，還可以通過語音的方式實現(xiàn)交互，或是利用移動設(shè)備本身的其他硬件功能，如重力感應(yīng)器、溫度感應(yīng)器、加速度感應(yīng)器、光線感應(yīng)器、壓力傳感器等實現(xiàn)交互。移動設(shè)備的交互控制相比較桌面設(shè)備來說，支持手勢操作，支持多點輸入，但精準(zhǔn)度會差一些，容易產(chǎn)生誤操作;設(shè)備在單手操作的情況下，屏幕上的某些區(qū)域很難觸摸得到，手指或手可能會擋住操作對象;另外移動設(shè)備的交互沒有懸停狀態(tài)。
用戶在使用桌面設(shè)備時，由于鼠標(biāo)箭頭能夠點擊的區(qū)域可以很小且相對精確，因此在操作方面的約束較少，可以完成精確性很高的交互任務(wù)。用戶在使用手機時，多數(shù)情境下是豎屏狀態(tài)下的操作，使用單手握住機器底部，使用同一只手或另一只手的拇指進(jìn)行操作;而用戶使用平板電腦時，多以橫屏狀態(tài)下的操作居多，瀏覽或觀看時一般是雙手握住機器中部或稍偏下一點的位置，有交互行為時則會變?yōu)橐恢皇治兆≡O(shè)備中部，另一只手操作。
三、屏幕容量的差異化
屏幕容量主要是指屏幕尺寸。桌面設(shè)備的屏幕尺寸通常大于13英寸，移動端設(shè)備常見的屏幕尺寸為2. 8~10. 1英寸，尺寸的不同帶來了差異。PC端產(chǎn)品的信息容量大，信息布局相對靈活，可以采用多欄的布局，導(dǎo)航的方式也更加豐富。而移動端產(chǎn)品，尤其手機端產(chǎn)品信息容量小，在設(shè)計時除了需要提供清晰的導(dǎo)航、操作邏輯和引導(dǎo)來幫助用戶了解當(dāng)前在哪兒，以及接下來該干什么，還應(yīng)該考慮到控件之間的相互干擾。
移動端設(shè)備內(nèi)置的感應(yīng)器可以根據(jù)設(shè)備的定向方式來決定屏幕的顯示模式，如優(yōu)酷手機客戶端軟件在豎屏模式中，視頻窗口較小，但相關(guān)輔助信息比較豐富;而在橫屏模式下，視頻展開為全屏，并向用戶提供了更加全面的播放控制功能。
另外，與移動應(yīng)用啟動后獨占整個屏幕不一樣，多數(shù)桌面客戶端產(chǎn)品啟動后會以窗口的形式顯示在屏幕上。當(dāng)窗口的尺寸調(diào)整時，需要考慮到窗口尺寸的變化對產(chǎn)品的影響，應(yīng)根據(jù)實際情況決定是否對窗口內(nèi)的信息內(nèi)容做自適應(yīng)處理，或限定窗口的'最小尺寸。
四、信息組織的差異化
對于傳統(tǒng)的桌面端產(chǎn)品，用戶使用時的專注度比較高，同時屏幕容量大，交互操作容易，因此PC端產(chǎn)品的信息組織比較靈活，可以針對產(chǎn)品本身的規(guī)模呈現(xiàn)寬而深或窄而深等的層級關(guān)系樣式。而移動端互聯(lián)網(wǎng)產(chǎn)品受到移動設(shè)備屏幕容量的限制，在信息的展示方式上會針對功能和用戶需求進(jìn)行細(xì)化和簡化。同時，用戶需要通過更多的頁面之間的跳轉(zhuǎn)來實現(xiàn)信息的獲取，而跳轉(zhuǎn)的速度又受限于設(shè)備本身的性能。因此，移動端產(chǎn)品的信息組織與設(shè)計更加重視提高單頁信息傳輸能力，盡量減少跨頁信息傳遞，通過壓縮或拉寬信息組織結(jié)構(gòu)來避免因反復(fù)切換頁面而造成的用戶流失。因此，在信息的層級組織上，通常會呈現(xiàn)出寬而淺或窄而淺的層級樣式。
五、導(dǎo)航系統(tǒng)的差異化
(一)導(dǎo)航內(nèi)容的差異化
導(dǎo)航系統(tǒng)關(guān)注的是如何瀏覽信息。導(dǎo)航的作用是告知用戶當(dāng)前位置，怎么返回原來的地方，用戶還可以去哪里，下一步打算去哪里，怎么去，附近還有什么地方等，目的就是讓用戶很清晰明確地瀏覽信息。
在產(chǎn)品從桌面端向移動化設(shè)計的過程中，要對原導(dǎo)航進(jìn)行一定的刪減、隱藏、組織，以更好地適合移動端屏幕特性，特別要把握目標(biāo)用戶的本質(zhì)需求，結(jié)合產(chǎn)品的使用場景、用戶的使用習(xí)慣以及軟硬件特性等進(jìn)行導(dǎo)航的再設(shè)計。比如，亞馬遜移動版導(dǎo)航的設(shè)計進(jìn)行了重新的組織規(guī)劃，并很好地應(yīng)用了Mille:法則，將PC版的分類導(dǎo)航項目“電子和計算機”分解為“電子類”與“計算機和辦公”兩個類，每個類里的內(nèi)容不超過7項，這是一個逐步精簡和重新規(guī)劃的過程。
桌面端產(chǎn)品的設(shè)計考慮的是如何將操作展示給用戶，而移動端產(chǎn)品的設(shè)計更多考慮的是如何將操作巧妙地隱藏起來。這種隱藏實際上是對核心功能的一種突出，即在導(dǎo)航內(nèi)容等級相同或者相近的情況下，顯示相對重要的內(nèi)容，而把其他內(nèi)容隱藏到“更多”中，用戶可以點擊“更多”后，在當(dāng)前頁展開或者是跳轉(zhuǎn)到新頁面，這是常見的處理方式。
(二)導(dǎo)航樣式的差異化
根據(jù)外在形式的不同，桌面端互聯(lián)網(wǎng)產(chǎn)品導(dǎo)航又可分為頂部橫向?qū)Ш健?cè)邊欄導(dǎo)航、Tab標(biāo)簽導(dǎo)航、面包屑導(dǎo)航、頁內(nèi)錨點導(dǎo)航等多種形式。由于移動終端特性，移動互聯(lián)網(wǎng)產(chǎn)品可以采用的導(dǎo)航主要有縱向?qū)Ш健⒎诸愭溄訉?dǎo)航、Tab標(biāo)簽導(dǎo)航等。
頂部橫向?qū)Ш皆谧烂娑水a(chǎn)品上一般會貫穿產(chǎn)品的所有頁面，而移動端產(chǎn)品上的全局導(dǎo)航并不一定每個頁面都有。而且因為移動端屏幕尺寸的原因和手機交互行為的影響，以縱向?qū)Ш綖橹鳌Ａ硗猓苿佣水a(chǎn)品上的全局導(dǎo)航經(jīng)常會把導(dǎo)航上內(nèi)容分類做成ICON，以符合用戶手指交互的需求，以增強交互體驗。
面包屑導(dǎo)航是桌面端互聯(lián)網(wǎng)產(chǎn)品必備的導(dǎo)航之一。它可以讓用戶明確了解自己所處的位置，引導(dǎo)用戶通行以及了解當(dāng)前頁在整個產(chǎn)品系統(tǒng)中的位置，提高用戶體驗，并能很好地幫助用戶快速學(xué)習(xí)和了解產(chǎn)品內(nèi)容和組織方式。因此，面包屑導(dǎo)航在移動Web中的使用頻率也比較多，但由于移動端屏幕橫向?qū)挾容^小，所以通常會保留關(guān)鍵的路徑，例如首頁、欄目等，從而使面包屑導(dǎo)航在一行之內(nèi)完整顯示。
移動設(shè)備特有的交互屬性也會產(chǎn)生完全不同于桌面端產(chǎn)品的導(dǎo)航樣式，如抽屜式導(dǎo)航，這種導(dǎo)航方式在移動應(yīng)用產(chǎn)品中的使用相當(dāng)廣泛。抽屜式導(dǎo)航模式一般采用將導(dǎo)航主體隱藏在移動應(yīng)用側(cè)邊的方式，通過按鈕來呼出導(dǎo)航，在使用完成之后再使用相同的按鈕隱藏起來。根據(jù)不完全的考證，這種導(dǎo)航方式始于Facebook，不久Gmail, Path等應(yīng)用都采用了這種導(dǎo)航模式，目前國內(nèi)也有很多產(chǎn)品使用了抽屜式導(dǎo)航，如網(wǎng)易新聞、Weico新浪的微博客戶端等產(chǎn)品。
六、總結(jié)
由于交互媒介由原來的鼠標(biāo)、鍵盤變成了用戶的手指，使得桌面端和移動端互聯(lián)網(wǎng)產(chǎn)品的差異化是比較明顯的。設(shè)計師在進(jìn)行移動設(shè)備軟件系統(tǒng)的設(shè)計時勢必會遇到很多不同于傳統(tǒng)桌面設(shè)備的問題。比如，當(dāng)用戶在進(jìn)行操作時，界面的一部分必然會被手指遮擋住，所以要盡量保證控制元件的布局不會干擾到實際內(nèi)容。還有很多同樣的問題，基本可以歸納為“舒適度”與“可視性”這兩點。正是緣于此，很多的手機端應(yīng)用會將主要控制元件或?qū)Ш椒旁谄聊坏撞浚@與傳統(tǒng)Web設(shè)計的習(xí)慣正好相反。另外，移動設(shè)備的硬件特點使其擁有更多傳統(tǒng)計算機所不具備的功能，譬如GPS、內(nèi)置麥克風(fēng)及攝像頭、觸控、陀螺儀、重力感應(yīng)器、羅盤等，基于這些功能打造的不同類型的客戶端應(yīng)用，它們所對應(yīng)的使用場景也各有不同。在多數(shù)情況下，無論移動應(yīng)用還是移動端Web，它們都應(yīng)該與桌面版的網(wǎng)站及產(chǎn)品具有相似的內(nèi)容與功能，展現(xiàn)相同的品牌DNA。當(dāng)然，不同終端的產(chǎn)品基于設(shè)備自身的特點自然會產(chǎn)生差異化，如交互方式等方面會有很大的不同，但在內(nèi)容呈現(xiàn)方面則盡可能保持一致。同時，基于移動終端的硬件特點，移動應(yīng)用在功能設(shè)計方面會更加豐富。如著名的電子商務(wù)網(wǎng)站亞馬遜的移動客戶端還具有條碼掃描功能，正是充分利用移動設(shè)備特有功能的典型案例。因此，當(dāng)互聯(lián)網(wǎng)產(chǎn)品從桌面端移植到移動端的時候，除了應(yīng)具備相似的內(nèi)容與功能，展現(xiàn)相同的品牌DNA，還要考慮他們之間的差異化，根據(jù)使用場景、操作方式、導(dǎo)航系統(tǒng)、信息架構(gòu)和屏幕容量等的不同，制定相應(yīng)的原則和設(shè)計方法，為互聯(lián)網(wǎng)產(chǎn)品成功的移植做好準(zhǔn)備。
【互聯(lián)網(wǎng)產(chǎn)品跨屏設(shè)計的差異化論文】相關(guān)文章：
互聯(lián)網(wǎng)產(chǎn)品設(shè)計探討論文11-09
粉絲參與性的互聯(lián)網(wǎng)產(chǎn)品設(shè)計研究論文10-24
互聯(lián)網(wǎng)產(chǎn)品的用戶體驗論文05-01
跨線橋景觀設(shè)計論文11-12
差異化戰(zhàn)略在農(nóng)產(chǎn)品國際營銷中的運用的論文04-11
造型設(shè)計課程差異化創(chuàng)作思維的培養(yǎng)論文11-21
數(shù)碼產(chǎn)品的設(shè)計論文04-08
“互聯(lián)網(wǎng)+”與服飾產(chǎn)品設(shè)計人才培養(yǎng)探討論文11-21
跨流域調(diào)水論文05-24