淺析移動端UI設(shè)計(jì)和PC端UI設(shè)計(jì)

姜珍珍　高思

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

【關(guān)鍵詞】UI；設(shè)計(jì)

中圖分類號：J529 文獻(xiàn)標(biāo)志碼：A 文章編號：1007-0125（2017）10-0168-01

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

[1]百度詞條.

[2]知乎問答.