姜珍珍 高思
【摘 要】UI設(shè)計是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。
【關(guān)鍵詞】UI;設(shè)計
中圖分類號:J529 文獻(xiàn)標(biāo)志碼:A 文章編號:1007-0125(2017)10-0168-01
科技飛速發(fā)展,互聯(lián)網(wǎng)成為我們生活必不可少的一部分,UI設(shè)計也就成為了大勢所趨,手機(jī)、電腦等在我們生活中如影隨形,因載體的不同,移動端UI設(shè)計和PC端UI設(shè)計也有著一些異同。
首先,直觀上來看,移動端和PC端的屏幕尺寸就有很大的差別,PC端的相對較大,而移動端的相對較小,所以設(shè)計時所要用的尺寸也就不同,注意事項也會有差別,同時分辨率、比例和倍率也有很大的差別。
屏幕尺寸的差異直接導(dǎo)致了界面空間大小的不同,同一界面,PC端則會呈現(xiàn)出更多的內(nèi)容,網(wǎng)頁空間很大,我們可以移動鼠標(biāo)去想去的地方,手機(jī)界面只有那么大,我們只能通過上下滑動來讀取更多的信息;設(shè)計時,就要考慮這個要素,針對不同大小的界面給予不同的布局,比如:在移動端上我們想設(shè)計一個按鈕,按鈕就要在非常明顯的位置,以免瀏覽者四處尋找,通常情況下這個按鈕設(shè)計在網(wǎng)頁的底部,很多還會用一個區(qū)別于網(wǎng)頁顏色的顏色塊讓按鈕更加明顯?;蛘咴谝苿佣撕蚉C端上各放置一個廣告,PC端一般網(wǎng)頁主要內(nèi)容的兩側(cè)居多,而移動端一般插在上一頁與下一頁中間作為隔斷,或者直接覆蓋整個頁面,n秒后消失。
布局包含在視覺里,視覺設(shè)計上移動端和PC端雖然有很多的不同,尺寸不同、分辨率不同、布局不同……但萬變不離其宗,排版布局一定要合理舒適,顏色搭配漂亮上檔次,風(fēng)格吸引人,讓瀏覽者有好的體驗。
其次,UI設(shè)計是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計,優(yōu)秀的UI設(shè)計不僅要讓軟件變得有個性有品位,還要還要讓操作變得簡單、舒適、自由。
移動端和PC端的系統(tǒng)支持和操作習(xí)慣上存在差異,那么設(shè)計上也就存在區(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ù)不同的操作方式匹配不同的互動效果,讓網(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è)計圖標(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è)計也就有不同的考量,設(shè)計出不同的適用于其本身的交互動作和圖標(biāo)、按鈕等,PC端使用鼠標(biāo),點(diǎn)擊時有“咔嗤、咔嗤”的聲音,移動端點(diǎn)擊時會有“叮、叮”的聲音,同時按鈕顏色會變深,同時還可以有震動,模擬按按鈕的感覺,設(shè)計師設(shè)計此一類交互動作希望使用者的感受深刻且有意思,人給了動作,機(jī)器就會有相應(yīng)的反應(yīng),讓使用者有更好的使用體驗。
PC端和移動端的的UI設(shè)計還涉及前臺技術(shù)要求、平臺設(shè)計規(guī)范等,這些要素的差別也是UI設(shè)計時要考量的,包括移動端還分為移動端手機(jī)應(yīng)用界面設(shè)計和移動端網(wǎng)頁設(shè)計,PC端分為PC端桌面應(yīng)用軟件界面設(shè)計和PC端網(wǎng)頁設(shè)計,在不久的將來,科技和人工智能在生活中占據(jù)越來越重要的地位,并且隨處可見,UI設(shè)計也就越來越重要,設(shè)計規(guī)范和平臺要求等也在不斷發(fā)展,操作方式也會越來越簡單,功能增加,所要考量的東西也就成倍增加,也就越來越考驗設(shè)計師的能力。
參考文獻(xiàn):
[1]百度詞條.
[2]知乎問答.