第3章 區分不同載體的設計
◎陳昕冉
回顧網際網路的發展史，可以發現承載人們上網的工具在不同時間有着不同的變化。從台式電腦到手機，從WAP頁到App端，随着載體的變化，設計的規範也在不斷改變。起初人們用電腦來上網，Web端的設計載體就是PC電腦，設計規範就需要滿足PC電腦的操作規範。後來手機成為我們生活中不可缺少的一部分，它承載着WAP頁面，在手機浏覽器中為我們呈現精彩的内容。WAP頁就需要按照手機端中浏覽器的規範來進行設計。之後App改變了大家的生活方式，人們在移動端擁有了更多操作方式，我們的設計也要伴随着互動手勢的豐富而做出改變。
3.1 iOS和Android之間的差異
随着智能手機的飛速發展，移動端市場的分化開始逐漸清晰。iOS和Android兩大應用系統迅速崛起并瓜分了智能手機市場。然而iOS和Android兩個系統的設計規範也不盡相同，在設計界面時也要進行相應的調整。
作為設計師要看到兩大系統之間表面上的差異，還要了解它們在設計中的本質差別，這樣才能做出符合使用者習慣的設計，滿足使用者的需求。
Android的Material Design設計規範遵循了實體原則，所有互動都是建立在現實生活的基礎上，可以輕松地被使用者接受。使用者的學習成本相對會低，操作性強。例如在手機螢幕中點選界面元素會伴随着水波紋擴散的動畫效果，就像是現實中手指觸碰水面一樣。這種寫實的設計效果在一定程度上可以降低使用者的學習成本，同時使産品看上去更加細膩。
iOS則在動效處理上本着簡潔的原則，認為過于細膩的動畫會分散使用者的注意力，是以iOS的設計更多是聚焦在運用鏡頭和景深的切換來過渡使用者的操作。每當使用者從桌面打開一個App，鏡頭就會逐漸拉近，而背景則是隐入了一片毛玻璃效果之中，這個互動過程是瞬間性的，是以很少有使用者會察覺到。在景深切換的同時還伴随着鏡頭的切換（從桌面到打開App的首頁），可以稱得上是iOS設計風格中的經典案例了。
Android和iOS系統之間存在的差異會影響我們的設計。在設計中我們需要考慮到不同的系統有不同的體驗設計。如果生硬地将iOS系統的體驗設計應用于Android系統中，往往會顯得格格不入，還犧牲了Android使用者的使用體驗。我們從以下幾個方面歸納了兩系統之間的差異，以期許可以抛磚引玉，幫助大家做更好的設計。
3.2 設計風格的差異
1.陰影的定義
一提起Material Design，大家應該都不會陌生。在Material Design的中文指南中，Material一詞被翻譯為“材料”。這個名字剛開始可能會讓人一頭霧水，沒有人知道這種“材料”在真實世界中以哪種狀态存在、由哪種物質組成。它是一種為了适合觸摸屏而被發現和設計出來的一種新材料，被賦予可以承載資訊、交換資訊的功能。設計師們發現現實中的紙張更符合Material Design中對于“材料”的定義。這使Material Design設計風格在最初就遵循了實體世界的原則，在設計中會出現符合現實世界的場景設計，例如界面中的子產品會有陰影，像現實世界中所有物品都有影子一樣。并且紙張的實體屬性也被Material Design轉移到了螢幕中，衍生出在虛拟世界的紙張控件：卡片cards和紙片chips。
在Material Design規範中，軟體系統中各種功能是分層級展現在手機螢幕上的。這種形式在規範中被定義為：階層。即兩個z-坐标（深度）不同的元素會産生部分重疊，進而形成了階層。此時兩個材料的移動是互相獨立的，通過控制界面中元素的Z軸數值（陰影的大小）來反映其海拔高度（層級重要性），Z軸數值越高，元素離界面最底層越遠，投影就會越重。如下圖1為官方設計指南中給出的界面元素層級關系，圖2為Z值的大小樣式，Z值越大，層級越高。圖3為執行個體應用中展現給我們的界面，通過陰影來區分元素之間的距離（Z軸值）。
在iOS的設計規範中有三大特點使其風格差別于其他平台：清晰（Clarity）、遵從（Deference）和深度（Depth）。其中遵從原則可以簡單解釋為遵從内容至上原則，所有的設計都是為了來突出内容。設計師們要減少使用邊框、漸變、陰影的頻率，讓界面盡可能地輕量化、扁平化。正因如此，iOS的設計更适合稱為Flat Design，即扁平化設計。所謂扁平化設計，就是在設計的過程中，去除所有具有三維突出效果風格和屬性的元素。這種風格可以讓設計更具有現代感，同時可以強有力地突出設計中最為重要的部分：内容和資訊。
如果把Flat Design的設計用Material Design中的概念來表達，我們可以了解為iOS中界面更趨向于所有元素的Z軸（深度）數值保持統一。必要時設計師可以利用陰影來對某一進制素進行突出，但這與Material Design設計中的陰影概念并不完全相同，Flat Design中的陰影更适合被了解為一種設計的表現手法，而非風格。例如受到衆多設計師追捧的彌散陰影。
綜上所述，我們了解到Android系統中Material Design設計是遵循實體世界原則的，元素是以材料的形式出現在螢幕中，産生真實世界的投影（三維效果）。不同的元素間會産生重疊，形成層級。
iOS扁平化（Flat Design）設計不包含所有具有三維突出效果和屬性的元素，一切以内容為主導，陰影隻是一種設計表現手法，并不是必要存在的。
2.空間的規則
上述我們說到Material Design是以“?材料?”的形式出現的，而材料本身會有一些不可改變的特征和固定的行為。材料在X軸和Y軸上的長短沒有固定，但是有一緻的厚度。内容會獨立呈現在材料的表面且不超過材料的邊界。由于材料是固體的，是以材料之間是不可以互相穿透的。多個材料同時出現在相同位置時，必須要利用陰影來區分材料的層級（如下圖）。
而在iOS設計中，半透明、毛玻璃風格是它最明顯的設計特點。在同一個界面中出現不同的元素時，隻需要通過疊加一層半透明遮罩或加入毛玻璃風格來傳遞給使用者“層”的概念。這與Material Design中給予材料的屬性大相徑庭。除此之外，在展示内容的區域方面Material Design與iOS的規定也有所不同，在iOS中不會要求内容被限定在“材料”範圍中，相反許多設計師會為了突出内容，刻意讓資訊超出邊界以此來吸引到使用者注意（如下圖）。
Material Design中的材料遵循實體規律，是以材料之間無法穿透。多個材料同時出現時，必須用陰影來區分材料的層級關系。内容與材料相對獨立但内容的範圍不能超過材料的邊界。
iOS中設計元素之間可以互相穿透，設計師可以運用半透明遮罩層或者毛玻璃效果的疊加來區分元素之間的層級關系。内容的範圍沒有限制，必要時還可以為了突出資訊，将元素擺放到超出邊界的位置，以吸引使用者的關注。
3.顔色的選擇
Material Design有一套自己完整的配色方案。配色靈感來源于大膽色調與柔和環境的對比及陰影與高光的對比，其畫闆中囊括的基礎色的飽和度為500。高飽和度的顔色能使設計顯得更有張力，更具有吸引力。Material Design也十分鼓勵設計師大膽運用對比色來強調界面中的資訊和内容。當你還沒有決定自己的品牌色時，可以從Material Design主要色闆中最多挑選三種色調，然後從次要色闆中選擇一個強調色。
iOS在設計規範中并沒有對顔色有一個明确的定義（這裡具體指制定色闆），隻是把系統的配色公布給設計師們參考，并鼓勵大家根據自己的想法指定相應的配色方案（如下圖）。
iOS雖然希望設計師根據自身産品的性質制定色闆，但是它也提醒了設計師要選擇舒适細膩的配色方案，即在選擇一種主色後，確定其他顔色不會與之發生沖突。如iOS系統中自帶月曆的配色以紅色為基準色，每個元件、界面都是紅色的，當然界面中就不會出現紅色的對比色。
同時在iOS設計規範中關于顔色還提及了一點：要關注到色盲使用者，避免僅僅使用紅綠或者橙藍等顔色組合來區分兩個狀态或者值。
Material Design希望通過顔色來強調元件的重要性，尤其是按鈕、開關等關鍵元件。它提倡設計師們大膽運用鮮明的顔色來凸顯視覺張力。為此Material Design還提供了一系列色闆，在你還沒有決定好配色方案的時候，Material Design色闆是個不錯的選擇。
iOS則沒有向大家提供色闆，僅僅是提供了系統界面的配色方案，同時鼓勵設計師選擇符合自身産品風格的配色，為使用者展現細緻溫柔質感的界面。不推薦大量應用對比色來凸顯内容。
3.3 控件的6個差異
在iOS和Android的設計指南中都分别單獨提到了布局結構及元件的介紹和規範。了解這些内容有助于我們在設計過程中做出更好的決策。
1.狀态欄對比
Android的狀态欄（也成為系統欄）高度為24dp，資訊對齊方式為右對齊，欄内包含了通知圖示和系統圖示等内容。預設情況下，狀态欄的顔色都是在背景顔色的基礎上加一層深色的遮罩，但也可以使用界面中其他元素的顔色，或者設計成半透明效果。
iOS的狀态欄設定在螢幕的上邊緣，欄内包含有關裝置目前狀态的資訊，如時間、蜂窩電話、網絡狀态和電池電量等，狀态欄高度為40px。在預設情況下狀态欄的背景為透明色，文本顔色則根據應用程式來調整，通常分為深色和淺色。
2.頂部導航欄對比
在MD設計規範中Android的頂部導航欄被稱為應用欄，是一種特殊的工具欄，主要用來做品牌展示、頁面導航、搜尋以及其他操作。
左側的導航圖示可以控制導航開啟與關閉，當頁面不需要導航的時候也可以省略（如下圖）。右側的按鈕則是一些與應用相關的操作，例如幫助、設定等。Android的頂部導航欄預設高度為56dp，遇到需要擴充内容的情況時，頂部導航欄的高度數值則為預設高度加上内容增量高度的總和。
這裡需要向大家單獨介紹的一點是：安卓的傳回按鈕（全局傳回）和向上按鈕是有差別的。傳回按鈕（全局傳回）一般設定在螢幕底部虛拟導航欄的左側。傳回按鈕（全局傳回）的傳回路徑是按照使用者浏覽的順序來設定的，向上按鈕則是按照頁面的邏輯層次依次傳回。如果之前的螢幕就是邏輯層次的上一層，那麼“傳回”和“向上”的操作結果是一樣的，否則兩個按鈕傳回的頁面将會不同。另外，傳回按鈕（全局傳回）可能回到“主螢幕”或者其他的應用，而“向上”按鈕回到的界面總是在你的應用中，連續點選向上按鈕兩次才可以退出應用。
iOS導航欄的預設高度為88px，且高度不可變。一般來說，導航欄上應該最多不超過以下三個元素：目前視圖的标題、傳回按鈕和一個針對目前的操作控件，如編輯按鈕、完成按鈕等。預設狀态下導航欄背景會處理為輕微半透明效果，當應用需要時，導航欄背景也可以填充為純色、漸變色或者自定義位圖。
在設計樣式方面，Android的導航欄高度為56dp，高度可以根據内容變化，iOS的導航欄高度固定為88px。兩系統在傳回鍵的設計樣式上也有所不同。Android的傳回按鈕更像是一個箭頭，而iOS則是用“<”代表了傳回箭頭。iOS按照使用者浏覽曆史順序來進行傳回操作，Android則是根據應用的邏輯層次來進行操作。
在二級頁面中，頂部導航欄的樣式還會出現以下情況：包含分段控件（Android以标簽形式出現）和搜尋框（與搜尋欄不同，搜尋欄不包含管理目前頁面的控件）的樣式。
導航欄中的分段控件用來展示應用層級相同的界面，不過Android與iOS的設計在視覺方面略有差異。
内容排版方面，Android把頁面标題放置在導航欄左邊，部分Android産品會選擇在向上按鈕右邊放App的logo，強調了品牌的概念，而iOS是将頁面标題設定為居中對齊。iOS會在傳回按鈕旁邊顯示上一級名稱，使使用者再點選傳回時有明确的心理預期。不過由于使用者已經熟悉iOS的操作習慣，市面上現在大部分App已經不顯示上一級标題了。
3.搜尋欄對比
搜尋這個功能在絕大多數App中都會出現，使用者可以通過搜尋快速定位應用中的内容。
MD設計規範給出兩種搜尋樣式：固定顯示搜尋和可展開式搜尋。固定顯示搜尋更加強化了搜尋子產品，鼓勵使用者進行點選操作。而可展開式搜尋在一定程度上弱化了搜尋子產品。兩種模式的搜尋在功能上并無什麼差異。
蘋果在搜尋欄設計上建議包含預設提示詞、清除按鈕和取消按鈕。iOS11規範允許使用者通過在搜尋欄輸入大量字段來進行搜尋。搜尋欄可以單獨顯示，也可以嵌入在導航欄或者内容視圖中顯示。到搜尋欄的位置在導航欄中時，搜尋欄可以選擇被一直固定在視圖頂部，以友善使用者可以随時通路，也可以折疊，當使用者需要時再顯示。
在應用市場中，很多App會将Android和iOS搜尋欄樣式融合，在多數搜尋需求很高的頁面中我們可以見到兩個系統都有搜尋框被嵌入在頂部導航欄中的情況。這樣設計其實是為了便于使用者快速操作。筆者認為這是設計師們在思考過程中融合兩系統規範得到的結果。是以兩個系統在搜尋欄的樣式選擇上并沒有一個明确的區分，大家可以酌情選擇不同樣式的搜尋欄。
4.底部導航欄對比
底部導航欄在iOS的系統中通常被設定為全局導航，使用者可以點選不同的标簽來快速切換子產品。在早些時候，因為Android底部有實體按鍵，為了降低使用者誤操作頻率，多數Android應用會選擇将全局導航放在界面頂部。但是随着螢幕尺寸不斷增加，使用者單手操作觸及到界面頂部的成本越來越高，很多Android産品又将全局導航移到了底部。
在MD規範中底部導航分為等寬（寬度不可變）和可變兩種形式。導航中的文字應簡潔，避免出現折行的情況。底部導航數量最少為三個，最多為五個，當導航數量少于三個時，建議改用标簽導航的形式。
iOS底部導航與上面Android導航在呈現方式上沒有太大的差別，但是在iOS規範中提出了幾點需要注意：
- 當導航欄某個選項不可用時，不要設計為置灰按鈕，隻需在使用者點選不可用選項時，告知使用者目前頁面為空（即空狀态）。
- 導航欄圖示應該在視覺上保持一緻和平衡。
- iPhone上最大導航數為5個，超過5個時，最後一個導航将會以“更多标簽”代替。
- iOS導航欄可以使用肩标來提示資訊數量。
- 底部導航欄和工具欄不可同時出現。
帶你讀《好設計，有方法：我們在搜狐做産品體驗設計》之三：區分不同載體的設計第3章 區分不同載體的設計
5.彈窗（警告框）對比
彈窗用于提示使用者做一些決定，或者給予使用者一些額外的資訊。在MD規範中，一個彈窗包含這三部分：标題、内容和事件。各元件之間的距離如下圖。
彈窗的内容形式并不局限在文本，其他UI元素也可以構成提示框的内容。
在iOS設計規範中，彈窗需要包含标題和按鈕，根據使用者使用場景可以添加描述資訊和輸入框。同時蘋果強調要盡量減少使用彈窗的頻率，這樣才可以有效引起使用者足夠的認識。
6.動效對比
優秀産品的共同特點是：幫助使用者更好地聚焦到重點資訊，了解層級、轉場關系。Android和iOS的動效從最根本的模型上來說是截然不同的，Android的Material Design設計規範遵循現實世界的規律，而iOS則是将更多動效建立在鏡頭的移動和景深的變化中。
MD規範中最經典的動效之一就是水波動效，使用者點選清單後界面會泛起“漣漪”作為一個回報。
MD規範中将互動分為了四類，分别是真實的動作、響應式互動、轉場互動和情感化互動設計。
真實的動作就是在設計動效時，我們需要考慮界面中元素的真實特性，真實世界中的物體擁有品質，是以隻有在施加外力的時候它們才會移動，例如球掉在地上會不斷地彈起落下，最後慢慢停落到地面上。MD規範中認為動效需要符合自然規律，這樣才不會讓使用者感到意外和幹擾。
響應式互動就是針對使用者的操作及時給予回報，由此來提升使用者的使用感。表層響應（水波紋效果）、元素響應（點贊效果）、徑向響應（改變清單順序）都是常見的響應式互動。
轉場動畫即應用元素從A點到B點的轉變過程，轉場動畫可以在多步操作過程中有效地引導使用者，避免版面的變化給使用者造成困擾。在建立轉場動畫的過程中，對于元素的移動需要嚴格考究，需要在確定動畫平滑不脫節的情況下，使資訊有層次的展現。
情感化互動設計更多展現在元素的細節上，通過細小圖示的動畫來吸引使用者，啟發使用者産生共鳴。
由于iOS趨于精簡，蘋果手機沒有實體傳回鍵隻有一個home鍵，使iOS和Android在互動設計方面有較大的不同。最明顯的差異就是層級傳回和編輯選擇這兩種操作了。
由于隻有一個實體home鍵，iOS的界面中本身是包含傳回按鈕的，而實體鍵隻負責退出應用。對比Android來說，因為機身包含實體傳回鍵和虛拟傳回鍵，是以操作邏輯與iOS不同。當界面為應用首頁時，點選實體傳回鍵（既上述所提到的全局傳回按鈕）可以直接退出應用。而虛拟傳回鍵一般是存在于應用中，點選後是傳回上一步操作，并不會直接退出應用。關于Android的實體傳回鍵和虛拟傳回鍵關系可以用下圖表示：
在編輯選擇操作方面，iOS給出了明确的操作入口，一般情況都會将編輯按鈕放置在導航欄的右側，進入編輯模式之後可以多選（點選）或者單選（滑動删除）。但是安卓進入編輯模式是通過手指長按來觸發，同時配合工具欄的選項進行編輯。
在觸發多任務功能方面，兩系統也有所不同。iOS設定輕按home鍵兩次，背景的程式會被挂起，左右滑動可以檢視所有背景程式，上滑可以删除背景程式，點選可以進入其中一個應用。Android的多任務切換方式被賦予在一個虛拟的按鍵中，輕觸兩次多任務按鍵，系統會切換到上一個應用，長按多任務按鍵，會将目前背景所有應用以分屏方式顯示。
在及時回報動效方面，iOS采用了高亮提示，即手指輕觸按鈕時，按鈕會通過明暗變化來回報使用者的操作。但是iOS并沒有具體限定回報動效的視覺呈現，大家可以根據自身産品進行調整。
以上為筆者從設計風格、界面元素和互動設計三方面淺析iOS與Android的平台差異，上述案例多以系統為使用場景來進行對比，熟知iOS和Android設計規範能讓我們在設計時更有根據性，更加得心應手。但使用者的使用場景千變萬化，設計師在設計時也要考慮融入更多情景，做更加人性化的設計。
3.4 WAP和App之間的差異
根據《中國網際網路絡發展狀況統計報告》顯示，截至2017年6月，中國網民規模達到7.51億，占全球網民總數的五分之一。其中手機網民占96.3%，各類手機應用的使用者群體規模不斷擴大，使用場景也越來越豐富。WAP和App都是以移動端作為載體，它們設計上的差異又很細微，很多App的開發不會純粹地用Native來開發，而是融入WAP頁面，這樣會便于更好地更新和分享。這是需要根據産品子產品需求的差異來定制的，雙端的工程師們趨向于用Native來開發，因為體驗更好。WAP是寄生于平台之上，融合在App中，是以會更多地跟随産品的體驗來設計，絕大部分WAP頁面都是依附在浏覽器之中，進而也會受制于浏覽器的體驗設計。那麼WAP和App之間比較明顯的差異都有哪些呢？筆者總結了以下幾點：
3.4.1 螢幕尺寸的差異
WAP頁面的内容展示區域更小，浏覽器自帶的導覽列會占據一定的螢幕空間。這時就需要使用者頻繁的滾動來擷取内容。
在《貼心設計：打造高可用性的移動産品》中提到：“移動裝置的螢幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的，使用者在滾動螢幕的過程中需要臨時記憶的資訊越多，他們的表現就會越差。”因為WAP端的有效螢幕空間确實太小，是以WAP頁面在視覺方面相比App應該更加精簡，在圖檔方面也同樣偏向于縮小圖檔以節省空間，以達到在小空間内盡可能展現更多有用的資訊給使用者的目标。
下圖為淘寶App與WAP端的截圖，我們可以發現WAP端浏覽器自帶的導航欄占據了一定螢幕尺寸，使頁面布局在整體上顯得更加緊湊。WAP端的搜尋欄高度也比App端矮了不少，在内容方面，去掉了“熱搜”和“我的頻道”子產品，省略了下方占用空間較大的雙十一活動入口，隻保留了頂部滾動banner。宮格子產品中采用了文字+産品資訊圖的模式，與App端相比更加簡潔。
3.4.2 有效操作的設計差異
在浏覽WAP頁面時，應用自帶的導航常常不明顯。随着使用者滑動螢幕，導航就會自動消失。如果照搬App的設計，會出現找不到導航的情況，讓使用者迷失方向，産生困惑。針對有效導航不明顯的問題，許多應用會把導航設計為懸浮狀态，跟随頁面滾動，或者直接将導航固定在頂部欄内部。
頁面中應當盡可能避免除導航以外的資訊以float浮層的形式出現，否則容易出現與導航疊加的現象，導緻界面功能混亂。有時App主要互動方式也會以float浮層的形式固定在界面右下角。
另外我們知道，WAP頁面依附于浏覽器中，且對于網絡狀态的要求很高，當手機網絡不佳的時候，在WAP上的各種操作将會變得延遲和卡頓。頻繁的輸入、3D特效在WAP頁面上都不能給使用者帶來很好的體驗。但是App可以在無網絡狀态啟動，通路本地資源，運作的速度也更快，頁面之間可以做到無縫切換，整個流程都非常順滑。
3.4.3 設計像素的差别
我們使用的手機中80%的分辨率都是以2.0為密度的。設計稿也應該以市場占比高的螢幕尺寸為基準來設計。舉幾個常見的尺寸：640×960、640×1136、720×1280，在WAP設計時，640×1136是最為合适的尺寸。因為當WAP設計稿設計為常用的750×1334尺寸時，在640×720的螢幕中會導緻界面過寬而出現橫向滾動條的情況，造成不好的使用體驗。而設計成640×1136尺寸時，頁面就會全部展現給使用者。當我們做App的設計時，就不需要考慮太多關于尺寸的問題，因為App可以根據手機分辨率的大小而改變。是以隻要保證在相同密度的情況下，選擇一個通用的分辨率尺寸就好。現在基本都是選750×1334作為通用分辨率尺寸。
現在很多App端内會嵌入WAP頁面以便更快捷的更新。例如淘寶首頁就是以H5的形式生成的WAP頁面。一個雙十一活動可能需要實作在使用者每天打開手機時呈現不同的頁面效果，這樣一個需求可能需要十幾個甚至上百個頁面。這時利用WAP端來展現這些頁面，疊代會更加便捷、迅速，在App中的WAP頁可以做到随時上線，一天更新十幾次都沒有壓力，這樣就減少了一定時間和成本。
3.5 WAP和PC的差異
上述講了App與WAP的差別，接下來我們就來對比WAP與PC的差別。
1.界面大小差别
衆所周知，PC與WAP最明顯的差別就是螢幕尺寸。WAP依附在移動端浏覽器中，要根據浏覽器最初的設計規範來進行界面設計。手機浏覽器的設計範圍較小，不能承載過多的資訊，隻能盡可能展示重要、核心的資訊，以此給使用者留下深刻的印象。而PC有着大螢幕的優勢，操控範圍大，展示内容更加豐富。我們可以看到下圖中同樣的車型頁面在PC端和WAP端上的對比。PC端有着大屏的優勢，在對比的過程中可以同時進行8輛車、多種資料的展示。在移動端，由于螢幕尺寸的限制，一次隻能進行兩種車輛的對比。為此，設計師将資料分為幾個次元分别通過不同的tab切換展現給使用者。
2.使用場景的差别
當我們需要輸入或者接收較多資訊的時候，通常會選擇PC端來進行操作，因為PC端可以很輕松地完成步驟煩瑣、功能層級深入的操作。而移動端使用場景更加碎片化，加上手機不友善輸入大量的資訊，内容邏輯偏簡單化。是以移動端更加注重使用者體驗和互動，功能相對也更加精簡。
3.使用習慣的差别
移動端使用者習慣了觸屏操作，輕觸、滑動是使用移動端時常用的手勢。在PC端我們依靠點選滑鼠可以進行操作、跳轉。如今PC端也在不斷發展為觸摸屏，今後可能在使用習慣上的差異會逐漸減少。
本章總結了不同載體的設計方法及其差異，通常一個産品會衍生出App、WAP、PC三端，作為一名合格的設計師，了解這些載體的設計方法可以更快地調整産品在各端展現的形式，将産品打磨得更加細膩。但是關于産品的設計沒有一成不變的法則，在設計的時候我們需要針對三端不同的特點，調整設計的側重點。WAP端使用者使用成本低，不需要安裝App即可通路，但是這也導緻無法留住使用者。針對這個問題，我們可以在WAP頁面增加下載下傳App的入口，這樣可以留住一些忠實使用者。
當使用者在移動端浏覽很長的頁面時，我們需要在頁面中為使用者提供一個快速回到頂部的按鈕。在PC端這個功能就相對沒有那麼重要，因為PC頁面可以容納更多的内容，而且在操作上，使用者可以通過滾動滑鼠輕松回到頂部。
越來越多的App中也會嵌入WAP頁面的設計，但H5（WAP頁）在進行複雜功能和互動方面給使用者的體驗不如原生設計好。這時候需要考慮關于WAP頁面的設計能否在技術上實作，需要提前與産品經理、技術人員溝通。
對于移動端Android和iOS系統來說，并沒有好壞之分。一個精心設計的MD風格或iOS風格的應用程式，都可以帶給使用者相當不錯的體驗。筆者認為平台制定設計規範的意義在于提供設計的一緻性，減少使用者的學習成本。設計師們應該抓住兩種平台最為明顯的特性來展現平台特點（如經典互動設計）。在細節部分的設計中，兩種風格的融合也不會導緻使用者使用的不适，隻是千萬不要被平台規範所限制。作為設計師來說，我們需要考慮的是視覺效果和産品的實用性，以及如何給使用者留下深刻的印象來區分其他産品。