雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁(yè) 案例 服務(wù) 關(guān)于 face+

科普PC端UI設(shè)計(jì)與移動(dòng)端UI設(shè)計(jì)之異同

Time: 2019-10-10

隨著信息時(shí)代的飛速進(jìn)步,手機(jī)和電腦已然成為了我們生活中不可或缺的一部分,而UI設(shè)計(jì)也就成為了軟件設(shè)計(jì)中關(guān)注的一個(gè)焦點(diǎn)。而因?yàn)檩d體有所不同,移動(dòng)端的UI設(shè)計(jì)和PC端的UI設(shè)計(jì)自然也有許多區(qū)別。

以網(wǎng)易云音樂(lè)為例,同一個(gè)軟件的首頁(yè),在移動(dòng)端和PC上的差別顯而易見(jiàn)。

1.1.jpg

移動(dòng)端


2.1.jpg

PC端


可以看到,即使是相同的內(nèi)容,由于設(shè)備不同,盡管沿用了相同的風(fēng)格,UI設(shè)計(jì)的效果也完全不一樣。最顯著的區(qū)別就是前者需要點(diǎn)擊和右拉才能操作的功能界面,在后者的左側(cè)直接布局,推送內(nèi)容的設(shè)置與分布也有差別,這就是移動(dòng)端UI設(shè)計(jì)和PCUI設(shè)計(jì)的差別所在。

那么,具體還有那些呢?

首先,二者屏幕尺寸的差異導(dǎo)致了分辨率、比例和倍率以及其他點(diǎn)有著很大的差別。所以在進(jìn)行UI設(shè)計(jì)時(shí),就必須針對(duì)不同大小的界面來(lái)安排不同的布局。比如說(shuō)在移動(dòng)端上對(duì)內(nèi)容進(jìn)行分隔,我們一般采用上下分隔的形式,尤其是放置廣告時(shí),移動(dòng)端往往將其作為上下內(nèi)容的一個(gè)隔斷,而PC端往往是在內(nèi)容主體的兩側(cè)分布。

其次,二者的UI設(shè)計(jì)需要考慮不同的支持系統(tǒng),從而針對(duì)不同的特點(diǎn)進(jìn)行設(shè)計(jì)。一般來(lái)說(shuō),移動(dòng)端以iOS系統(tǒng)和安卓系統(tǒng)為主,而系統(tǒng)版本更新的速度相對(duì)更快一些,而相對(duì)PC端大多使用WindowsMac而言也較為復(fù)雜,故而移動(dòng)端的UI設(shè)計(jì)需要考慮諸如不同品牌系統(tǒng)之間的兼容性等更多的問(wèn)題。

最后,由于移動(dòng)端和PC端具有不同的操作習(xí)慣,所以在進(jìn)行UI設(shè)計(jì)時(shí),需要在保證美觀的同時(shí),讓用戶能夠擁有簡(jiǎn)單便捷而自由的操作體驗(yàn)。在PC端,我們往往通過(guò)鼠標(biāo)進(jìn)行操作,而移動(dòng)端上則會(huì)用手指來(lái)點(diǎn)觸,能夠同時(shí)碰觸到多個(gè)點(diǎn)。所以在進(jìn)行UI設(shè)計(jì)時(shí),就需要針對(duì)不同的操作方式來(lái)設(shè)計(jì)。舉個(gè)例子,在查看PC端的淘寶圖片時(shí),鼠標(biāo)停留的地方會(huì)被放大,而移動(dòng)端的淘寶顯然沒(méi)有這一功能。而且,由于鼠標(biāo)操作和手指點(diǎn)觸的精確度不同,在UI設(shè)計(jì)時(shí)也要將圖標(biāo)和按鈕的大小作為一個(gè)重要的點(diǎn)進(jìn)行考量,并設(shè)計(jì)不同的交互效果,讓用戶在使用時(shí)能夠更加舒心。

總之,在進(jìn)行UI設(shè)計(jì)時(shí),移動(dòng)端和PC端之間的差別是不可忽視的點(diǎn),想要做好軟件設(shè)計(jì),就應(yīng)當(dāng)對(duì)不同使用端的特點(diǎn)有充分的了解。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號(hào)22號(hào)樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號(hào)A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號(hào)
028-62790929
service@faceui.com

辦公地址地圖
首頁(yè) | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見(jiàn)

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號(hào)-5

上海辦公地點(diǎn)地圖
北京辦公地點(diǎn)地圖
深圳辦公地點(diǎn)地圖
在微信中搜索faceui
或保存二維碼在微信中打開(kāi)