移動(dòng)應(yīng)用程序隨著用戶的需求而發(fā)展，提供了新的功能，但是，許多應(yīng)用程序都有常見的界面樣式，它們是本文的重點(diǎn)。

智能手機(jī)幾乎侵入了我們生活中的每一項(xiàng)活動(dòng)。不同的應(yīng)用程序可以幫助我們，讓生活更輕松，設(shè)計(jì)師的工作是創(chuàng)建滿足用戶需求的用戶界面，使體驗(yàn)愉快和令人滿意。為了構(gòu)建有效的UI，設(shè)計(jì)人員需要深入了解移動(dòng)應(yīng)用程序的特性，了解它們的組成部分和功能。如今，很難為任何應(yīng)用程序區(qū)分一套標(biāo)準(zhǔn)的必要屏幕UI，因?yàn)橐苿?dòng)行業(yè)正在快速發(fā)展，應(yīng)用也是如此。我們的文章介紹了最常見和最受歡迎的移動(dòng)屏幕類型，并展示了它們所需的設(shè)計(jì)功能。

常見頁(yè)面

啟動(dòng)畫面

第一印象是影響用戶對(duì)移動(dòng)應(yīng)用程序的意見的關(guān)鍵點(diǎn)之一。當(dāng)用戶體驗(yàn)從與應(yīng)用程序的交互一開始就很愉快時(shí)，它就會(huì)更有可能在用戶中更受歡迎。這就是為什么啟動(dòng)畫面需要像其他任何移動(dòng)應(yīng)用程序屏幕一樣受到關(guān)注。

啟動(dòng)畫面是用戶看到啟動(dòng)移動(dòng)應(yīng)用程序的第一個(gè)圖像。它們通常是簡(jiǎn)約的，并且提供產(chǎn)品的名稱，徽標(biāo)或標(biāo)語(yǔ)。為了確保閃屏在不同設(shè)備上看起來很好，設(shè)計(jì)師通常會(huì)將元素集中在屏幕中間。建議飛濺屏幕顯示不超過4-8秒，否則用戶可能會(huì)生氣。此外，顯示加載進(jìn)度可能會(huì)很好，這樣不耐煩的用戶就可以知道應(yīng)用程序何時(shí)啟動(dòng)。

珠寶電子商務(wù)應(yīng)用程序

入職教程界面

新手引導(dǎo)是一組屏幕，展示了應(yīng)用程序可能為用戶帶來的移動(dòng)應(yīng)用程序，導(dǎo)航系統(tǒng)，功能和優(yōu)勢(shì)。對(duì)于首次啟動(dòng)應(yīng)用程序的用戶來說，他們似乎可以幫助他們?cè)诓皇煜さ墓δ芎涂丶羞M(jìn)行定位，并了解應(yīng)用程序是否對(duì)他們有用。

應(yīng)用教程的結(jié)構(gòu)和內(nèi)容對(duì)于每個(gè)特定項(xiàng)目都是高度個(gè)性化的。但是，入職設(shè)計(jì)存在一些共同傾向。首先，許多教程使用自定義插圖，以有吸引力且易于解碼的方式呈現(xiàn)特定功能或優(yōu)點(diǎn)。此外，設(shè)計(jì)師經(jīng)常使用吉祥物，這是一個(gè)模仿與用戶進(jìn)行真實(shí)交流并設(shè)置情感紐帶的角色。強(qiáng)大的副本對(duì)于入職也很重要。它應(yīng)該簡(jiǎn)短，有用且易讀。

海底世界百科全書 - 部分教程

主頁(yè)和菜單屏幕

主屏幕是任何應(yīng)用程序的重要組成部分。在移動(dòng)應(yīng)用程序的上下文中，它是用戶與應(yīng)用程序的大多數(shù)選項(xiàng)進(jìn)行交互的主屏幕。主屏幕的設(shè)計(jì)取決于產(chǎn)品的類型，其目的仍然是一些不同類型的共同關(guān)鍵元素。首先，主屏幕通常包括搜索字段或按鈕，以便用戶可以輕松搜索他們需要的內(nèi)容。此外，由于主屏幕是用戶旅程的起點(diǎn)，因此它通常包含提供對(duì)各種內(nèi)容部分的訪問的導(dǎo)航元素。

家庭應(yīng)用程序

為了使用戶交互更容易，移動(dòng)應(yīng)用程序包含一個(gè)菜單，其中包含用戶可以在一次單擊中移動(dòng)到的可能方向列表。在移動(dòng)應(yīng)用程序中呈現(xiàn)菜單有兩種變體：它可以是主屏幕的一部分或單獨(dú)的屏幕。建議將菜單中的選項(xiàng)數(shù)保持在7以下，僅顯示重要部分。如果應(yīng)用程序需要更多，則創(chuàng)建子類別可能是個(gè)好主意。

幻燈片菜單概念

登錄和配置文件屏幕

今天，許多應(yīng)用程序?yàn)橛脩魟?chuàng)建個(gè)人帳戶，因此每個(gè)設(shè)計(jì)師都需要知道如何使用登錄和配置文件屏幕。登錄屏幕應(yīng)該簡(jiǎn)潔明了，以便用戶可以輕松訪問應(yīng)用程序。通常有兩個(gè)字段，用戶可以在其中輸入其名稱和密碼以及確認(rèn)按鈕。對(duì)于第一次使用該應(yīng)用程序的用戶，始終必須有注冊(cè)選項(xiàng)。

配置文件使移動(dòng)應(yīng)用程序內(nèi)的交互更加個(gè)性化，并允許有效地操作數(shù)據(jù)。此外，個(gè)人帳戶是任何社交網(wǎng)絡(luò)應(yīng)用程序的關(guān)鍵部分，其涉及用戶進(jìn)入網(wǎng)絡(luò)的虛擬社區(qū)并且能夠與其他人共享個(gè)人信息。設(shè)計(jì)師的主要任務(wù)是通過智能UX最大限度地提高便利性。根據(jù)交互設(shè)計(jì)基金會(huì)，第一點(diǎn)設(shè)計(jì)者應(yīng)該考慮的是，配置文件頁(yè)面應(yīng)該清晰使用。必須限制信息量，否則配置文件屏幕可能看起來太復(fù)雜。更重要的是，確保導(dǎo)航系統(tǒng)直觀是至關(guān)重要的。這樣，用戶就不必花費(fèi)太多精力來解開應(yīng)用程序。最后，配置文件屏幕設(shè)計(jì)應(yīng)面向應(yīng)用程序的目標(biāo)受眾。如果您希望您的應(yīng)用滿足用戶需求，則必須進(jìn)行用戶調(diào)查。

約會(huì)應(yīng)用

統(tǒng)計(jì)屏幕

各種應(yīng)用程序包含用戶活動(dòng)的統(tǒng)計(jì)信息。它提供的數(shù)據(jù)越多，創(chuàng)建統(tǒng)計(jì)屏幕的移動(dòng)設(shè)計(jì)就越困難。設(shè)計(jì)人員需要確保能夠看到屏幕必須清晰可用的所有關(guān)鍵信息。圖形曲線，比例和原始圖標(biāo)可以使統(tǒng)計(jì)屏幕在移動(dòng)應(yīng)用程序上看起來流暢和干凈。此外，統(tǒng)計(jì)屏幕需要不同的排版，以便用戶可以輕松讀取數(shù)據(jù)。

NGIN App

日歷

活動(dòng)應(yīng)用，待辦事項(xiàng)列表應(yīng)用以及許多其他應(yīng)用為用戶提供個(gè)人日歷。根據(jù)應(yīng)用程序的類型，日歷可以完成某些功能，例如提醒或計(jì)劃。視覺風(fēng)格應(yīng)該適合移動(dòng)應(yīng)用程序的心情和目標(biāo)。

Vibe日歷

電子商務(wù)屏幕

目錄屏幕

任何電子商務(wù)項(xiàng)目的主要目標(biāo)是銷售產(chǎn)品。視覺呈現(xiàn)對(duì)用戶的決策有很大影響。目錄是公司出售的商品清單。設(shè)計(jì)師的工作是創(chuàng)建目錄，吸引用戶注意并鼓勵(lì)他們購(gòu)買產(chǎn)品。移動(dòng)應(yīng)用程序中的產(chǎn)品列表可以類似于許多電子商務(wù)網(wǎng)站，其中的項(xiàng)目放置在catenas中，可以通過垂直滾動(dòng)查看。一行中的產(chǎn)品數(shù)量根據(jù)屏幕寬度確定。

移動(dòng)目錄中產(chǎn)品組織的另一種方法是具有水平滾動(dòng)的行。為了使導(dǎo)航更直觀，水平行中的最后一項(xiàng)不應(yīng)顯示在完整視圖中，以便讓用戶看到這是滾動(dòng)的方向。此外，產(chǎn)品的照片或插圖應(yīng)該是高質(zhì)量的，以便用戶可以清楚地看到他們將要購(gòu)買的東西。目錄屏幕應(yīng)包括一個(gè)號(hào)召性用語(yǔ)按鈕，用戶可以通過該按鈕將項(xiàng)目添加到購(gòu)物車。這樣，用戶就可以直接從目錄屏幕上獲取產(chǎn)品，而無需轉(zhuǎn)到此特定位置的頁(yè)面。

咖啡廳優(yōu)惠券應(yīng)用程序

產(chǎn)品卡屏幕

此屏幕適用于想知道他們究竟購(gòu)買什么的人。產(chǎn)品卡顯示有關(guān)商品的關(guān)鍵信息，幫助用戶決定是否需要產(chǎn)品。設(shè)計(jì)師專注于產(chǎn)品的照片，將其置于屏幕的中心。描述數(shù)據(jù)通常放在下面。設(shè)計(jì)人員可以將數(shù)據(jù)劃分為大小，材料或其他組，以便用戶可以輕松找到所需的信息。

珠寶電子商務(wù)應(yīng)用程序

看看屏幕

今天，很多購(gòu)買都是通過智能手機(jī)完成的，因此公司試圖讓移動(dòng)購(gòu)物流程變得前所未有的方便。結(jié)帳過程是用戶的最后一步在他們購(gòu)買產(chǎn)品之前服用。設(shè)計(jì)師的任務(wù)是讓人們?cè)诓扇∵@一步驟時(shí)感到舒適。結(jié)賬屏幕的第一個(gè)和其中一個(gè)基本部分是買方填寫特定個(gè)人數(shù)據(jù)（如信用卡的名稱和編號(hào)）的表格。所需信息的類型取決于用戶進(jìn)行購(gòu)買的資源。此外，對(duì)于人們來說，了解他們的個(gè)人數(shù)據(jù)是安全的很重要，因此設(shè)計(jì)師必須通過視覺元素向用戶保證他們的信息是安全的。它可以是副本中的標(biāo)注，也可以是知名品牌的一些圖標(biāo)，如果有的話，可以給予他們的批準(zhǔn)，甚至可能是一些證書標(biāo)志。

電影應(yīng)用

社交屏幕

飼料

人們經(jīng)常使用各種社交網(wǎng)絡(luò)應(yīng)用程序進(jìn)行通信，并關(guān)注它們周圍的新聞和更新。Feed是一個(gè)不斷變化的新聞和用戶選擇遵循的其他數(shù)據(jù)列表。實(shí)踐表明，移動(dòng)用戶更喜歡通過Feed快速掃描，因此他們需要一個(gè)簡(jiǎn)單明了的設(shè)計(jì)，不會(huì)因視覺細(xì)節(jié)而過載。新聞可以通過滾動(dòng)逐一呈現(xiàn)。為了使導(dǎo)航更直觀，應(yīng)該部分顯示下一條新聞。

時(shí)間線應(yīng)用程序

往來

聯(lián)系人名單已經(jīng)發(fā)展了很長(zhǎng)時(shí)間。從紙質(zhì)筆記到不同的數(shù)字變體，它在視覺上一直在變化，但仍然只提供一個(gè)目的：保存關(guān)于朋友和其他親密人物的關(guān)鍵數(shù)據(jù)。移動(dòng)聯(lián)系人屏幕向用戶顯示按名稱按字母順序排序的聯(lián)系人數(shù)據(jù)列表。每個(gè)聯(lián)系人都應(yīng)該是可點(diǎn)擊的，并提供詳細(xì)的數(shù)據(jù)，其中包括電話號(hào)碼，電子郵件，有時(shí)還包括Skype，Messenger等聯(lián)系人。此外，聯(lián)系信息提供了一張小照片，使搜索過程更容易。

聯(lián)系清單概念

音樂屏幕

播放列表

音樂愛好者喜歡為每個(gè)場(chǎng)合創(chuàng)建自己的播放列表。顯然，每個(gè)音樂應(yīng)用程序都有義務(wù)為其用戶提供此類功能。播放列表屏幕在不同的應(yīng)用程序上看起來類似：它是一個(gè)軌道列表，顯示歌曲，歌手或樂隊(duì)的名稱，以及音軌的長(zhǎng)度。此外，設(shè)計(jì)師可以添加此曲目所屬的專輯的小圖像。如果歌曲沒有圖像，那么仍然應(yīng)該有一個(gè)圖標(biāo)，例如，帶有音符。

音樂應(yīng)用

播放機(jī)

人們可以控制他們聽的內(nèi)容以及他們?nèi)绾瓮ㄟ^播放器收聽。該功能允許使用易于識(shí)別的標(biāo)準(zhǔn)按鈕切換，停止和啟動(dòng)軌道。該組通常位于屏幕底部的中央。屏幕的主要部分通常由附加的圖像拍攝。此外，有時(shí)候不是圖片，許多設(shè)計(jì)師將音樂可視化器應(yīng)用為屏幕的中心部分。Visualizer是一個(gè)展示想象力和創(chuàng)造力的好機(jī)會(huì)，這對(duì)設(shè)計(jì)師來說總是很有啟發(fā)性。

ECHO應(yīng)用程序

如今，出現(xiàn)了大量的移動(dòng)應(yīng)用程序，因此它們?yōu)橛脩魩淼男乱髱砹诵滦推聊?。設(shè)計(jì)師應(yīng)該準(zhǔn)備好接受這一挑戰(zhàn)并始終遵循創(chuàng)新。得到靈感！

翻譯整理文章不易，打賞個(gè)5毛錢吧！

推薦閱讀

2019年設(shè)計(jì)趨勢(shì)指南(全集）

網(wǎng)頁(yè)設(shè)計(jì)：Web內(nèi)容的5種基本圖像類型

公眾號(hào)：設(shè)計(jì)攝影