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

姜珍珍　高思

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

[1]百度詞條.

[2]知乎問答.