網際網路產品跨屏設計的差異化論文
網際網路產品跨屏設計的差異化論文
通訊技術的發展帶來了無線通訊技術的迅速崛起，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，還要考慮他們之間的差異化，根據使用場景、操作方式、導航系統、資訊架構和螢幕容量等的不同，制定相應的原則和設計方法，為網際網路產品成功的移植做好準備。