移動端UI設計與PC端有什麼異同點?很多PC端設計師在剛接手移動端UI設計時，會不自覺將PC端的部分設計理念「移植」到移動端上，出現水土不服的情況。開門見山地說，PC端與移動端最大的區別就是屏幕大小的不同，這也決定不同設備在界面信息展現有着不同的理念。

移動端UI設計與PC端有什麼相同點?

UI設計基礎知識

無論是智慧型手機、平板電腦，亦或是PC端的MacOS系統、Windows系統，確保整體設計趨於一致，不僅可以降低用戶的認知成本，同時也可以降低設計師的設計成本，甚至是程序員的開發成本。

從整體布局上看，PC端界面相當於由移動端多個界面拼接二來;從整體功能上看，兩者並沒有太大的卻別，只是視圖層面和空間層面存在差異。

但從局部上看，PC端和移動端UI設計有着很多差異性，因此在進行UI設計時，我們需要尊重這些差異性，才能保證用戶無障礙使用各類終端設備。

移動端UI設計與PC端有什麼不同點?

不同點① 信息架構的差異

UI設計基礎知識

◆ 移動端UI信息架構的特點：

1. 界面布局簡單且多為縱向維度。

2. 容納信息有限，只能展現最核心的信息，其他輔助信息須採用摺疊、刪除等方式隱藏。

3. 對於具有一定流程的功能(如更新選項、重新命名等)，往往需要跳轉到新界面才能完成操作。

4. 大部分模塊分類、功能流程需要藉助新界面承載，導致移動端界面的結構特點為「界面多且層級深」。

◆ PC端UI信息架構的特點：

A. 界面布局複雜且一般是二維的，不僅有縱向維度，還有橫向維度，但大部分以橫向維度為主。

B. 容納信息相對多很多，界面能平鋪很多信息，但要注意信息層級展示規則。

C. 大部分操作可在當前頁面直接完成，無需跳轉到新界面。

D. 根據上述三個信息結構的特點，決定PC端UI整體界面結構特點為「界面少而層級淺」。

不同點② 樣式結構的差異

UI設計基礎知識

◆ 移動端UI樣式結構的特點：

1. 移動端使用手指交互，靈活性稍差且容易誤操作，因此移動端元素排布相對鬆散，且不會出現大量元素密集排布的情況。

2. 為確保元素交互的精確度，每個可交互元素的尺寸需超過7mm。

3. 移動端屏幕較小，用戶視線可直接覆蓋整個屏幕，因此界面元素對齊方式相對多樣，傾向性也不大。

◆ PC端UI樣式結構的特點：

A. PC端採用滑鼠交互，滑鼠指針尺寸較小，靈活性強，因此元素排布可緊湊寫，也可承載大量密集元素。

B. 滑鼠指針的交互誤操作性較低，因此可交互元素的尺寸可以做得比較小。

C. PC端窗口尺寸較大，用戶難以看清整個窗口的全貌，因此元素對齊方式多以「左對齊」和「上對齊」為主。此外，用戶實現一般是從左上進入界面的，對齊方式會更傾向於「上對齊」。

不同點③ 交互方式的差異

UI設計基礎知識

◆ 移動端UI交互方式的特點：

1. 交互方式相對簡單，主要以點擊為主，其他手勢為輔助。

2. 採用軟鍵盤形式，基於場景應用出現，沒有快捷鍵邏輯，輸入成本相對較多。

3. 少見跨窗口邏輯，所有操作針對當前窗口進行。

◆ PC端UI交互方式的特點：

A. 交互方式多且複雜，滑鼠指針的各種狀態也可實現豐富的交互模式。

B. 採用硬鍵盤形式，輸入成本相對較低，有豐富的快捷鍵邏輯，且需要設計師定義快捷鍵。部分相對成熟的PC端產品更支持「全鍵盤交互」，可脫離滑鼠實現所有交互。

C. 支持多窗口邏輯，可同時存在多個窗口及各個應用間進行交互，因此進行UI設計時，需定義某些交互邏輯，如窗口任務並行、窗口間交互及應用間交互等。

不同點④ 控件/模式的差異

UI設計基礎知識

另外，PC端的控件/模式也與移動端有着諸多差異，下面列舉部分典型的例子：

◆ 彈窗： 由於兩者的用戶操作習慣各不相同，導致它們的彈窗樣式和按鈕位置也有所差異。

譬如： 移動端的「確定性」按鈕通常位於彈窗右側;PC端則視系統而定，MacOS的「確定性」按鈕一般位於右側，Windows則位於左側。

◆ 浮層： 移動端屏幕尺寸有限，一般很少使用浮層控件;但浮層控件則經常在PC端UI設計中出現。

* 相對彈窗而言，浮層打擾性小，操作效率高，能承載更豐富信息，因此很多設計師都很喜歡使用浮層。

◆ 麵包屑導航： 移動端UI設計較少使用麵包屑導航，一來移動端屏幕較小，麵包屑導航會佔據界面部分空間，甚至分散用戶的視線;二來，大多設備或瀏覽器都有返回鍵，沒有必要多此一舉。

但PC端網站頁面數較多，使用麵包屑導航能告訴用戶目前所在位置及返迴路徑，同時也有利於搜索引擎蜘蛛的抓取，有利於網站SEO優化。

除此之外，標籤欄、單選、開關、下拉、tooltip、更多菜單等控件在PC端和移動端UI設計中都有所不同。另外，還有很多交互模式也在它們當中存在不少差異，不過這些差異只需跟隨系統即可，沒有什麼特別需要注意的。

PC端和移動端原本是相對割裂的平台，因此無論在語言設計，還是用戶習慣都存在較大的差異。但近年跨平台整體設計逐漸趨於一致，一方面是因為跨平台語言逐步完善，加快跨平台技術的發展;另一方面移動端發展逐步增強，功能上與PC端越來越一致。