淺析移動端UI設計和PC端UI設計

姜珍珍　高思

【摘 要】UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現軟件的定位和特點。

【關鍵詞】UI；設計

中圖分類號：J529 文獻標志碼：A 文章編號：1007-0125（2017）10-0168-01

科技飛速發展，互聯網成為我們生活必不可少的一部分，UI設計也就成為了大勢所趨，手機、電腦等在我們生活中如影隨形，因載體的不同，移動端UI設計和PC端UI設計也有著一些異同。

首先，直觀上來看，移動端和PC端的屏幕尺寸就有很大的差別，PC端的相對較大，而移動端的相對較小，所以設計時所要用的尺寸也就不同，注意事項也會有差別，同時分辨率、比例和倍率也有很大的差別。

屏幕尺寸的差異直接導致了界面空間大小的不同，同一界面，PC端則會呈現出更多的內容，網頁空間很大，我們可以移動鼠標去想去的地方，手機界面只有那么大，我們只能通過上下滑動來讀取更多的信息；設計時，就要考慮這個要素，針對不同大小的界面給予不同的布局，比如：在移動端上我們想設計一個按鈕，按鈕就要在非常明顯的位置，以免瀏覽者四處尋找，通常情況下這個按鈕設計在網頁的底部，很多還會用一個區別于網頁顏色的顏色塊讓按鈕更加明顯。或者在移動端和PC端上各放置一個廣告，PC端一般網頁主要內容的兩側居多，而移動端一般插在上一頁與下一頁中間作為隔斷，或者直接覆蓋整個頁面，n秒后消失。

布局包含在視覺里，視覺設計上移動端和PC端雖然有很多的不同，尺寸不同、分辨率不同、布局不同……但萬變不離其宗，排版布局一定要合理舒適，顏色搭配漂亮上檔次，風格吸引人，讓瀏覽者有好的體驗。

其次，UI設計是指對軟件的人機交互、操作邏輯、界面美觀的整體設計，優秀的UI設計不僅要讓軟件變得有個性有品位，還要還要讓操作變得簡單、舒適、自由。

移動端和PC端的系統支持和操作習慣上存在差異，那么設計上也就存在區別。移動端的系統有iOS系統、Android系統、webOS系統等，每個系統都有自己的操作規范、交互方式和程序接口，而系統版本不斷地在更新，這些系統的東西也都在各自發生著變化；PC端的系統有：Windows、Mac、Ubuntu、openbsd等，國內大部分使用Windows和Mac；相比之下移動端就要比PC端考慮更多的問題，比如兼容性。

另外移動端和PC端有著不同的操作習慣，在PC端上我們習慣用鼠標單擊、雙擊、滑動等，在移動端上，我們都是用手指點擊、上下滑動、長按、左右滑動和單指操作、雙指操作、多指操作等，設計時就要根據不同的操作方式匹配不同的互動效果，讓網頁、軟件界面更生動；比如：PC版的淘寶利用鼠標中鍵向下滑動，鼠標停留的地方的產品會直接放大，便于觀看，而移動端的淘寶則沒有這一功能；PC版的很多圖片素材網站的推薦欄，把鼠標停在這一區域，滑動鼠標中鍵，推薦的內容就會一個個由右邊向左邊滑出然后放大，移動端則沒有這一功能；移動端在瀏覽網頁時，打開一則內容，瀏覽完畢可以右滑返回上一頁，如果想要再次瀏覽可以左滑再次打開，PC端就只能點“X”關掉；移動端瀏覽網頁時，如若文字或者圖片看不清，就可以用兩個指頭由中間向兩邊滑動進行放大，PC端出現類似情況，文字可以調整網頁整體的文字大小，圖片可以點開查看。這些互動效果根據不同情況出現，讓使用更加順暢和舒心。

PC端和移動端采用不同的操作方式，所以精準也就存在區別，PC端的鼠標很小，精準度非常的高，但是移動端使用的是手指，手指比鼠標大得多，精準度也就沒那么高了；所以在設計圖標及按鈕時，PC端的很多只有移動端的1/3或者1/4，這種大小對于鼠標來說是不成問題的，而手指就不行了，移動端的按鈕和圖標都比較大，且顯眼，方便手指操作，不會點到別的圖標上；比如在移動端看小說，“上一頁”和“下一頁”都位于頁面底部，并且各占據頁面底部的一半，而PC端的則非常小；PC端的Word里頂部一寸寬的欄里就有將近二三十的按鈕和圖標，這是移動端無法做到的。

根據PC端和移動端不同的操作方法和精準度，UI設計也就有不同的考量，設計出不同的適用于其本身的交互動作和圖標、按鈕等，PC端使用鼠標，點擊時有“咔嗤、咔嗤”的聲音，移動端點擊時會有“叮、叮”的聲音，同時按鈕顏色會變深，同時還可以有震動，模擬按按鈕的感覺，設計師設計此一類交互動作希望使用者的感受深刻且有意思，人給了動作，機器就會有相應的反應，讓使用者有更好的使用體驗。

PC端和移動端的的UI設計還涉及前臺技術要求、平臺設計規范等，這些要素的差別也是UI設計時要考量的，包括移動端還分為移動端手機應用界面設計和移動端網頁設計，PC端分為PC端桌面應用軟件界面設計和PC端網頁設計，在不久的將來，科技和人工智能在生活中占據越來越重要的地位，并且隨處可見，UI設計也就越來越重要，設計規范和平臺要求等也在不斷發展，操作方式也會越來越簡單，功能增加，所要考量的東西也就成倍增加，也就越來越考驗設計師的能力。

參考文獻：

[1]百度詞條.

[2]知乎問答.