作者:TPshop搜豹商城 發(fā)布時(shí)間:2020-04-29 15:08 閱讀:1604
移動(dòng)端APP網(wǎng)頁(yè)設(shè)計(jì),要做好這些事情?下面一起來(lái)看看吧!
圖層讓界面擁有了深度,讓體驗(yàn)更加真實(shí)分層式的界面設(shè)計(jì)甚至成為了Google的Material Design的核心設(shè)計(jì)原則,它參考了現(xiàn)實(shí)世界 中人們同不同的物體進(jìn)行交互的方式,將這些物理法則融入到界面交互當(dāng)中。表層和投射在背景中的陰影則在界面層次中起到了重要的作用,它將不同控件和元素分隔為不同層。
分層界面中最常見(jiàn)的元素和特征:
1、浮動(dòng)的操作按鈕:通常常用的、推薦的操作被集成在這些浮動(dòng)按鈕中,通常你需要點(diǎn)擊界面頂端浮動(dòng)的一個(gè)圓形按鈕來(lái)展開(kāi)全部的浮動(dòng)操作按鈕。
2、放大和展開(kāi):在分層式界面當(dāng)中最常見(jiàn)的一個(gè)例子,就是當(dāng)你點(diǎn)擊列表中一個(gè)條目的時(shí) 候,就會(huì)展開(kāi)呈現(xiàn)其中的細(xì)節(jié),隨后你還能返回收縮讓你看到完整的列表視圖。
3、置頂導(dǎo)航:保留必要的菜單,當(dāng)用戶操作的時(shí)候,常駐屏幕頂端,便于操作。
4、典型的彈窗:就像桌面端的彈出式提示框那樣,疊加在現(xiàn)有界面上的提示框,讓用戶登 錄、提示信息,甚至是展現(xiàn)廣告。
5、熟悉的手勢(shì):基于手勢(shì)的移動(dòng)端交互,改變了我們同智能設(shè)備溝通和操作的方式,屏幕不再只是單純的觸摸點(diǎn)擊的目標(biāo),更為復(fù)雜的滑動(dòng)和多點(diǎn)觸控讓手勢(shì)操作帶來(lái)了更多的可能性,從縮放、返回到刪除,我們可以進(jìn)行的操作越來(lái)越多,一些約定俗成的手勢(shì)操作規(guī)則也逐步成型。
越來(lái)越多的APP開(kāi)始依賴手勢(shì)操作,而屏幕上的按鈕也越來(lái)越少,為有價(jià)值的內(nèi)容騰出了更多的空間。這樣一來(lái),APP本身也越來(lái)越專注于內(nèi)容的呈現(xiàn)。
小貼士:當(dāng)我們談及標(biāo)準(zhǔn)化的手勢(shì)操作的時(shí)候,其實(shí)也是在強(qiáng)調(diào)手勢(shì)的“直覺(jué)性”和通用性。 當(dāng)你想要在手勢(shì)操作上玩創(chuàng)意的時(shí)候,最好三思而后行。手勢(shì)操作本身帶有一定的隱藏性,所以,如果沒(méi)有一定的視覺(jué)引導(dǎo),用戶可能會(huì)感到迷惑,不知道要如何同APP進(jìn)行交互。 功能性的動(dòng)效這里所說(shuō)的功能性的動(dòng)效指的是那些嵌入到用戶交互流程、使用過(guò)程中的微妙的動(dòng)效設(shè)計(jì)。它們充當(dāng)界面和交互之間的協(xié)調(diào)人和連接器:當(dāng)用戶看到這些作為觸發(fā)反饋的動(dòng)畫(huà)效果的時(shí)候,就明白他們的操作完成了。
6、平滑過(guò)渡,讓用戶注意到改變: 圖標(biāo)的變化在不同的階段可以起到不同的效果。
小貼士:微妙的動(dòng)效能夠巧妙的連接不同的界面和狀態(tài),提升用戶體驗(yàn)。但是千萬(wàn)不要濫用動(dòng)效,專注體驗(yàn),而不是為了使用動(dòng)效而添加動(dòng)效。不得不說(shuō),隨著技術(shù)的發(fā)展和經(jīng)驗(yàn)的積累,現(xiàn)如今的移動(dòng)端設(shè)計(jì)充滿了套路。能夠脫穎而 出的優(yōu)秀設(shè)計(jì)雖然各有特色,但是在基本的設(shè)計(jì)上,都一樣的優(yōu)秀。就像我們今天總結(jié)的,干凈的界面、簡(jiǎn)明的配色方案、賞心悅目的動(dòng)效和布局,這些基本功做好了,然后才是探索屬于自己的特色。
點(diǎn)擊【APP下載安裝官方免費(fèi)下載】聯(lián)系客服獲取。
<TPshop(www.hjlh2211.com)是國(guó)內(nèi)知名商城系統(tǒng)及商城網(wǎng)站建設(shè)開(kāi)發(fā)商,為企業(yè)級(jí)商家提供零售商城、B2B2C多用戶商城系統(tǒng)、網(wǎng)上商城開(kāi)發(fā)、三級(jí)分銷系統(tǒng)、小程序商城、APP制作等多端商城及電子商務(wù)行業(yè)解決方案>
文章摘自:網(wǎng)絡(luò)