移動(dòng)應(yīng)用app隨著用戶(hù)的需求而發(fā)展,也提供了很多新的功能。然而,許多應(yīng)用app都有一些常見(jiàn)界面,本文將重點(diǎn)介紹這些常見(jiàn)的界面。
智能手機(jī)已經(jīng)占領(lǐng)了我們生活中的每一項(xiàng)活動(dòng)。不同的應(yīng)用可以在生活中不同地方幫助我們。而設(shè)計(jì)師的工作是設(shè)計(jì)出滿(mǎn)足用戶(hù)需求的界面,使人用起來(lái)愉快,讓人滿(mǎn)意。為了設(shè)計(jì)出有益的用戶(hù)界面,設(shè)計(jì)人員需要深入了解移動(dòng)應(yīng)用app的特性,了解它們的組成部分和功能。但是,由于移動(dòng)行業(yè)的快速發(fā)展,很難有一套標(biāo)準(zhǔn)的界面適用于任何應(yīng)用。我們的文章將介紹最常見(jiàn)和最受歡迎的應(yīng)用界面類(lèi)型,并展示了它們所需的設(shè)計(jì)功能。
常見(jiàn)界面
啟動(dòng)畫(huà)面
影響用戶(hù)對(duì)app的認(rèn)知和看法最關(guān)鍵的是第一印象,如果用戶(hù)體驗(yàn)和app交互從一開(kāi)始就非常愉快,那么這款app在用戶(hù)中就更受歡迎。所以,在設(shè)計(jì)時(shí),啟動(dòng)畫(huà)面需要跟其它頁(yè)面一樣重要。
啟動(dòng)畫(huà)面是用戶(hù)看到啟動(dòng)app后的第一個(gè)畫(huà)面。它們通常是簡(jiǎn)約的,而且展示出產(chǎn)品的名稱(chēng),logo或產(chǎn)品的標(biāo)語(yǔ)。為了確保啟動(dòng)畫(huà)面在不同設(shè)備上看起來(lái)都很好,設(shè)計(jì)人員通常會(huì)將元素集中在屏幕中間。建議啟動(dòng)畫(huà)面的顯示不超過(guò)4-8秒,否則用戶(hù)可能會(huì)不開(kāi)心。此外,顯示加載進(jìn)度可能會(huì)很好,這樣沒(méi)有耐心的用戶(hù)就可以知道app何時(shí)啟動(dòng)。
Jewellery E-Commerce App
引導(dǎo)頁(yè)
引導(dǎo)頁(yè)(Onboarding tutorial)是一組界面,展示了app可能為用戶(hù)帶來(lái)的功能和特點(diǎn)。對(duì)于首次啟動(dòng)應(yīng)用程序的用戶(hù)來(lái)說(shuō),似乎可以幫助他們?cè)诓皇煜さ墓δ芎涂丶羞M(jìn)行定位,并了解app是否對(duì)他們有用。
應(yīng)用引導(dǎo)頁(yè)的結(jié)構(gòu)和內(nèi)容對(duì)于每個(gè)特定程序都是高度個(gè)性化的。但是,引導(dǎo)頁(yè)的設(shè)計(jì)存在一些共同傾向。首先,許多引導(dǎo)頁(yè)使用自定義插畫(huà),不僅有吸引力而且容易理解,用戶(hù)一看就知道其功能和特點(diǎn)。此外,設(shè)計(jì)師還會(huì)使用吉祥物,這是一個(gè)模仿與用戶(hù)進(jìn)行真實(shí)交流并帶有情感紐帶的角色。另外,文字對(duì)于引導(dǎo)頁(yè)也很重要, 敘述文字應(yīng)該簡(jiǎn)短,有用且易讀。
Underwater World Encyclopedia — section tutorial
主頁(yè)和菜單界面
主屏幕是任何一款app都需要的重要組成部分。在很多app中,主頁(yè)是大多數(shù)用戶(hù)與app交互的主要界面。主屏幕的設(shè)計(jì)取決于產(chǎn)品的類(lèi)型和功能。不過(guò),不同類(lèi)型的app之間也有一些相同的組件。首先,主屏幕通常包括搜索字段或按鈕,以便用戶(hù)可以輕松搜索他們需要的內(nèi)容。此外,由于主屏幕是用戶(hù)使用的起點(diǎn),因此它通常包含提供對(duì)各種內(nèi)容部分的訪問(wèn)的導(dǎo)航元素。
Homey App
為了使用戶(hù)交互更容易,移動(dòng)應(yīng)用包含一個(gè)菜單,可以讓用戶(hù)點(diǎn)擊后直達(dá)到特定的內(nèi)容。在移app中呈現(xiàn)菜單有兩種方式:一是主界面的一部分,二是單獨(dú)的一個(gè)界面。建議將菜單中的選項(xiàng)數(shù)保持在七個(gè)以下,僅顯示重要部分。如果app需要呈現(xiàn)更多菜單,可創(chuàng)建子類(lèi)別。
Slide Menu Concept
登錄和個(gè)人信息界面
今天,許多app為用戶(hù)創(chuàng)建個(gè)人帳戶(hù),因此每個(gè)設(shè)計(jì)師都需要知道如何設(shè)計(jì)登錄和個(gè)人信息界面。登錄界面應(yīng)該簡(jiǎn)潔明了,以便用戶(hù)可以輕松訪問(wèn)app。通常有兩個(gè)輸入框,用戶(hù)可以在其中輸入名稱(chēng)和密碼以及確認(rèn)按鈕。對(duì)于第一次使用該應(yīng)用程序的用戶(hù),需要有注冊(cè)選項(xiàng)。
個(gè)人信息頁(yè)使app內(nèi)的交互更加個(gè)性化。個(gè)人帳戶(hù)是任何社交網(wǎng)絡(luò)應(yīng)用的關(guān)鍵部分,用戶(hù)進(jìn)入網(wǎng)絡(luò)的虛擬社區(qū)并且能夠與其他人共享個(gè)人信息。設(shè)計(jì)師的主要任務(wù)是通過(guò)UX設(shè)計(jì)最大限度地提高便利性。根據(jù)Interaction Design Foundation的說(shuō)法,設(shè)計(jì)者應(yīng)該考慮以下幾點(diǎn):個(gè)人資料頁(yè)應(yīng)該清晰可見(jiàn),必須限制信息量,否則個(gè)人資料頁(yè)可能看起來(lái)太復(fù)雜。更重要的是,確保導(dǎo)航清晰是至關(guān)重要的。這樣,用戶(hù)就不必花費(fèi)太多精力來(lái)打開(kāi)應(yīng)用。最后,個(gè)人資料頁(yè)的設(shè)計(jì)應(yīng)面向使用該應(yīng)用的目標(biāo)群體。如果您希望您的應(yīng)用滿(mǎn)足用戶(hù)需求,則必須進(jìn)行用戶(hù)調(diào)查。
Dating App
統(tǒng)計(jì)界面
各種應(yīng)用程序都包含用戶(hù)活動(dòng)的統(tǒng)計(jì)信息。它提供的數(shù)據(jù)越多,創(chuàng)建統(tǒng)計(jì)界面的設(shè)計(jì)就越困難。設(shè)計(jì)人員需要確??吹降慕缑姹仨毲逦⑶野ㄋ锌捎玫年P(guān)鍵信息。圖形曲線,比例和原始圖標(biāo)可以使統(tǒng)計(jì)界面在移動(dòng)應(yīng)用程序上看起來(lái)流暢和干凈。此外,統(tǒng)計(jì)界面需要不同的排版,以便用戶(hù)可以輕松讀取數(shù)據(jù)。
NGIN App
日歷
活動(dòng)應(yīng)用,待辦事項(xiàng)列表應(yīng)用以及許多其他應(yīng)用都需要為用戶(hù)提供日歷。根據(jù)app的類(lèi)型,日歷可以完成某些功能,例如提醒或計(jì)劃。視覺(jué)風(fēng)格應(yīng)該匹配移動(dòng)app的主題和目的。
Bright Vibe Calendar
電商界面
目錄界面
任何電子商務(wù)項(xiàng)目的主要目標(biāo)是銷(xiāo)售產(chǎn)品。視覺(jué)上的展示對(duì)用戶(hù)的決策有很大影響。而目錄則是公司出售商品的清單。設(shè)計(jì)師的工作是設(shè)計(jì)目錄,吸引用戶(hù)注意并鼓勵(lì)他們購(gòu)買(mǎi)產(chǎn)品。移動(dòng)應(yīng)用程序中的產(chǎn)品列表可以類(lèi)似于許多電子商務(wù)網(wǎng)站,其中項(xiàng)目放置在這些列表中,可以通過(guò)垂直滾動(dòng)條來(lái)查看。一行中的產(chǎn)品數(shù)量根據(jù)屏幕寬度確定。
在滾動(dòng)的目錄中,商品的另一種組成方法是水平滾動(dòng)。為了使導(dǎo)航更直觀,水平行中的最后一項(xiàng)不應(yīng)顯示在完整視圖中,以便讓用戶(hù)看到這是滾動(dòng)的方向。此外,產(chǎn)品的照片或插圖質(zhì)量應(yīng)該很高,以便用戶(hù)可以清楚地看到他們將要購(gòu)買(mǎi)的東西。 目錄界面應(yīng)包括一個(gè)號(hào)召性用語(yǔ)按鈕,用戶(hù)可以通過(guò)該按鈕將商品添加到購(gòu)物車(chē)。這樣,用戶(hù)就可以直接從目錄屏幕上獲取產(chǎn)品信息,而無(wú)需轉(zhuǎn)到此特定位置的頁(yè)面。
Cafe Coupon App
商品信息界面
商品信息界面顯示有關(guān)商品的關(guān)鍵信息,幫助用戶(hù)決定是否需要購(gòu)買(mǎi)此產(chǎn)品。設(shè)計(jì)師專(zhuān)注于屏幕中心的照片,描述數(shù)據(jù)通常放在下面。設(shè)計(jì)人員可以將數(shù)據(jù)劃分為大小,材料或其他的分類(lèi),以便用戶(hù)可以輕松找到所需的信息。
Jewellery E-Commerce App
結(jié)算界面
現(xiàn)在,很多購(gòu)物都是在智能手機(jī)完成的,所有的公司都想讓讓移動(dòng)購(gòu)物流程變得前所未有的方便。結(jié)帳流程是用戶(hù)在購(gòu)買(mǎi)產(chǎn)品之前的最后一步。設(shè)計(jì)師的任務(wù)是讓人們?cè)诓扇∵@一步驟時(shí)感到舒適。 對(duì)于用戶(hù)來(lái)說(shuō),讓用戶(hù)了解他們的個(gè)人信息安全很重要,因此設(shè)計(jì)師必須通過(guò)視覺(jué)元素向用戶(hù)保證他們的信息是安全的。
Cinema App
社交界面
即時(shí)資訊
人們經(jīng)常使用各種社交app進(jìn)行通信,并關(guān)注它們周?chē)男侣労透?。Feed是一個(gè)有新聞和用戶(hù)關(guān)注的信息流。實(shí)踐表明,移動(dòng)用戶(hù)更喜歡通過(guò)Feed快速掃描信息,因此他們需要一個(gè)簡(jiǎn)單明了的設(shè)計(jì),不會(huì)因視覺(jué)上的細(xì)節(jié)而分散注意力。新聞可以通過(guò)滾動(dòng)的方式逐一呈現(xiàn)。 為了使導(dǎo)航更直觀,應(yīng)該顯示下一個(gè)新聞的一部分。
Timeline App
聯(lián)系人
通訊錄已經(jīng)發(fā)展了很長(zhǎng)時(shí)間。 從紙質(zhì)筆記到不同的數(shù)字變體,它在視覺(jué)上一直在變化,但但是目的只有一個(gè):保存關(guān)于朋友和其他親密人物的信息。通訊錄界面向用戶(hù)顯示名稱(chēng)按字母順序排序的聯(lián)系人數(shù)據(jù)列表。每個(gè)聯(lián)系人都可以點(diǎn)擊進(jìn)去,有詳細(xì)的數(shù)據(jù),其中包括電話號(hào)碼,電子郵件,有時(shí)還包括Skype,Messenger等聯(lián)系人。此外,聯(lián)系信息有一張小照片,使搜索過(guò)程更容易。
Contact List Concept
音樂(lè)界面
播放列表
音樂(lè)愛(ài)好者喜歡為每個(gè)場(chǎng)合創(chuàng)建自己的播放列表。每個(gè)音樂(lè)app都有義務(wù)為其用戶(hù)提供此類(lèi)功能。播放列表屏幕在不同的app上看起來(lái)非常類(lèi)似:通常都會(huì)顯示歌曲,歌手或樂(lè)隊(duì)的名稱(chēng),以及音軌的長(zhǎng)度的列表。此外,設(shè)計(jì)師可以添加此曲目所屬的專(zhuān)輯的封面。 如果歌曲沒(méi)有封面,那么仍然應(yīng)該有一個(gè)圖標(biāo),比如音符圖標(biāo)。
Music App
播放器
這個(gè)功能可以使用易于看到的按鈕切換,停止和開(kāi)始播放。播放器通常位于屏幕底部的中央。 屏幕的主要部分通常由圖片連接。此外,有時(shí)候,許多設(shè)計(jì)師將音樂(lè)可視化應(yīng)用作為屏幕的中心部分。Visualizer是一個(gè)展示想象力和創(chuàng)造力的好機(jī)會(huì),這對(duì)設(shè)計(jì)師有很大的啟發(fā)性。
ECHO app
想學(xué)習(xí)更多關(guān)于app界面設(shè)計(jì),可以下載我們的app界面設(shè)計(jì)模板,直接查看源文件,學(xué)習(xí)起來(lái)更方便。
全站高品質(zhì)素材免費(fèi)下載!