淺議現(xiàn)代移動端設(shè)計發(fā)展

張樹方

【摘 要】隨著智能手機(jī)和平板電腦的出現(xiàn)，各種APP如雨后春筍一般冒出，現(xiàn)代移動端設(shè)計的發(fā)展愈來愈快，而設(shè)計風(fēng)格也出現(xiàn)了兩個大的方面。雖然都是極簡主義但是有生命力和互動性的設(shè)計正在滲透進(jìn)我的移動端的設(shè)計當(dāng)中。

【關(guān)鍵詞】移動端設(shè)計；UI；UE

移動端設(shè)計是APP的重要組成部分它要以一種簡單明了的方式向人們表達(dá)出產(chǎn)品的運(yùn)用，在美觀APP的同時還要關(guān)懷人們的體驗，要與潮流相結(jié)合。

一、UI/UE的前生，網(wǎng)頁設(shè)計的構(gòu)建

由于90年代第一個網(wǎng)站的誕生設(shè)計的范圍就開始向網(wǎng)絡(luò)闊展，當(dāng)初的網(wǎng)站的設(shè)計感相對的比較薄弱只是由文字，以及插入的小圖片構(gòu)成。然后出現(xiàn)了表格布局和加入動效圖到現(xiàn)在的Css網(wǎng)頁設(shè)計，到現(xiàn)在的UI和UE的設(shè)計。

二、UI/UE的構(gòu)建

UI/UE的發(fā)展是由智能手機(jī)的出現(xiàn)和一個個手機(jī)APP的誕生而發(fā)展起來的，主要設(shè)計的是圖標(biāo)和界面，關(guān)懷使用人的用戶體驗。

（一）圖標(biāo)

Logo這個詞大家都熟悉。因為手機(jī)APP的誕生，類似淘寶，百度等網(wǎng)絡(luò)公司都有了自己的APP，在手機(jī)界面上用了自己的標(biāo)志制作logo，也就是圖標(biāo)。現(xiàn)在我們以經(jīng)可以在手機(jī)上下載非常多的APP了，也有各式各樣的圖標(biāo)的出現(xiàn)。

（二）界面

和網(wǎng)頁界面一樣，因為手機(jī)和平板電腦的尺寸不同也出現(xiàn)了相應(yīng)的界面的設(shè)計標(biāo)準(zhǔn)，在符合該APP的風(fēng)格的前提下還有一套自己的標(biāo)準(zhǔn)。

（三）用戶體驗

現(xiàn)在移動端的設(shè)計還要關(guān)心用戶的體驗，用戶在使用該APP中是否有不習(xí)慣或者是上手難，也是因為這樣很多同類型的APP都給人一種使用上的熟悉感，即使是有改動也不會有太大的變化。

三、設(shè)計風(fēng)格的變化

和很多設(shè)計師相同UI/UE設(shè)計師們的設(shè)計風(fēng)格也隨這潮流在變化著。由過去的漸變到現(xiàn)在的扁平化和的發(fā)展。

（一）簡潔明快的設(shè)計風(fēng)格

隨著現(xiàn)代極簡主義的發(fā)展移動端的設(shè)計也向著簡潔明快的方向發(fā)展。由IOS的扁平化設(shè)計風(fēng)格和安卓的卡片化設(shè)計風(fēng)格為主的兩個設(shè)計風(fēng)雖然從理念上兩種風(fēng)格并不相同但這兩種風(fēng)格的設(shè)計都是簡潔明快令人一目了然的，它們都是極簡的設(shè)計風(fēng)格，不拖泥帶水的設(shè)計。

（二）扁平化設(shè)計

扁平化設(shè)計是完全屬于二次元的世界的，一個簡單的形狀和一個沒有景深的平面，而這個概念最核心的觀念就是放棄一切裝飾效果。所以我們的手機(jī)APP界面都是一些用線條和色塊組成的。而圖標(biāo)也是簡潔明了的扁平化設(shè)計，而界面的切換也是干凈的簡潔的直接不花哨的。扁平化的設(shè)計簡潔明了的表達(dá)它給人們傳遞的基本信息。

（三）卡片化設(shè)計

卡片化設(shè)計和扁平化設(shè)計都是同樣的簡潔明了，它們想傳達(dá)的含義一般都非常的干脆利落就好像司令給士兵下達(dá)的命令一樣但扁平化的設(shè)計是色塊的話那卡片化設(shè)計和它的名字一樣就是卡片一張張帶有色彩的卡片的疊加，而最能直觀體現(xiàn)這兩種設(shè)計理念設(shè)計不同的方法就是它們的動效了，卡片化設(shè)計的動效和你玩折紙游戲一般，而扁平化設(shè)計的動效相對的要柔和。

（四）設(shè)計的人文關(guān)懷

雖然這兩種設(shè)計都是極簡主義但簡化到最后設(shè)計都是追求人文關(guān)懷的。在簡單明了下追求有生命的設(shè)計，關(guān)懷用戶體驗，所以在最新版本的ios和安卓兩個系統(tǒng)中在保持著極簡的設(shè)計的同時還加入了更多的動效而兩種設(shè)計風(fēng)格也越來越體現(xiàn)出了自己的獨(dú)特性和人文關(guān)懷。而在很多的APP中也加入了H5的應(yīng)用動效圖不在是圖片當(dāng)你點(diǎn)開它的時候它還會給你小的驚喜與你而在手機(jī)中你會發(fā)現(xiàn)很多你在觸摸屏幕是手機(jī)與你的互動感。

參考文獻(xiàn)：

[1]Theresa Neil.移動應(yīng)用UI設(shè)計模式.人民郵電出版社.

[2]周陟.UI進(jìn)化論.清華大學(xué)出版社.

[3]Giles Colborne-.間約至上.人民郵電出版社.