智能手機幾乎已經滲透到了我們生活的方方面面,各種各樣的app幫助我們生活的更加便利。設計師的工作職能就是給用戶提供滿足需求的UI,并且讓用戶在使用的過程中,獲得愉快而滿意的體驗。為了建立有效的UI,設計師需要深入的了解移動端app的特性,了解他們的組成部分和功能。現如今隨著移動行業的快速發展,很難給所有的app建立一個統一的界面標準,這篇文章將會介紹幾種最常見、最流行的移動端UI界面,并展示他們不同的設計特點。
常見的幾種界面
啟動頁
首次使用app時彈出的啟動頁,是影響用戶第一印象的重要因素,這種最初的愉悅體驗很有可能讓這款app流行起來。這就是為什么要格外重視啟動頁的原因。
啟動頁是用戶打開app時看到的第一個界面,它們通常很簡潔,往往是一個logo、app的名稱或者是這個產品的一句slogan。確保啟動頁在各個不同分辨率的屏幕上適配良好,設計師們常常把它們放在屏幕的中間,啟動頁的建議顯示時間是4~8秒之間,超過這個區間,用戶可能會感覺厭煩。此外,最好顯示加載進度,這樣一些不耐煩的用戶就會知道還要多久才可以進入app。
引導頁
引導頁是app可能提供給新用戶的一組介紹產品功能、特性以及優點的界面,它們在用戶首次使用的時候加載,幫助用戶熟悉它的控件和對應功能,讓用戶更好的上手使用,并且幫助用戶判斷這款軟件是否有用。
雖然每一款app的結構和內容都是非常獨立的,然而它們的引導頁還是有一些相同的設計趨勢。首先,很多引導頁都習慣于用插畫的形式來表現他們的新特性或者優點,這對用戶很有吸引力,同時開發成本也很低。設計師們也常常會為app創建一個卡通形象,用它來模擬真實的使用場景,將它作為一種連接用戶與app的情感紐帶。引導頁的文案也是十分重要的,它應該是簡短的、有幫助的并且具有可讀性。
Underwater World Encyclopedia app的引導頁
首頁和菜單欄界面
首頁是每個app必不可少的界面,在app中起承上啟下的作用,它是用戶與app產生交互的主要界面。首頁的設計取決于產品的類型,它包含各種各樣常見的重要組件。首先,首頁通常包含搜索欄或者搜索icon,可以幫助用戶很方便的搜索他們需要的內容。同時,因為首頁是用戶通往app各個功能的起點,它通常包含導航欄,讓用戶可以訪問到不同的單元模塊。
Homey app的首頁
為了讓用戶的交互更簡單,可以創建一個菜單,里面包含一些常用的功能,僅通過一次點擊即可抵達。這里有兩種app菜單欄的布局方法:它可以是首頁的一部分,或者是一個獨立的頁面,里面包含的內容最好少于7項,僅展示最重要的部分,如果想要包含更多內容,可以創建子類別。
側邊欄菜單
登錄和個性化設置界面
許多app都要求用戶注冊登錄自己的個人賬號,所以每一個設計師都應該知道怎么樣來設計登錄界面,登錄界面應該簡潔清晰,以便用戶可以快速的進入app。該界面通常有兩個輸入框,用來輸入登錄名和密碼,和一個確認按鈕。同時還應該有注冊按鈕。
個性化設置可以使app更加的適用于個人,并且可以幫助app為用戶提供最有效的數據信息。同時,個性化設置數據也是所有社交網絡app的關鍵部分,它引導用戶進入虛擬社區網絡,并且開始與其他人進行分享。設計師的主要任務就是通過流暢的UX設計,使這一步驟盡可能的方便友好。據交互設計組織所說,設計師首要考慮的是,個性化設置界面應該清晰明確,展示的信息數量應該限制在一定范圍內,否則整個界面看上去會很亂很復雜。同時要時刻確保導航欄清晰可見,這樣用戶就不用花費太多精力去摸索app。最后,個性化設置界面的設計應該以目標受眾為主導,如果想要你的app滿足用戶的使用需求,那么用戶研究是必不可少的。
Dating App
數據統計界面
很多app都包含數據統計界面。它提供的數據越多,設計難度就越大。設計師需要確保所有的重要數據在屏幕上都是清晰可見并且有用的,曲線圖、比例尺和統一的icon可以使整個界面看上去很流暢、很整潔。此外,數據統計界面需要為不同的數據劃分不同的區域,以方便用戶閱讀。
NGIN App
日歷
事件app、待辦清單app和一些個人app都有日歷界面,取決于app的類型,日歷主要有這么幾種功能:提醒或者制定計劃。它的視覺風格應該符合用戶的心情和使用目的。
Bright Vibe Calendar App
電商類app界面
產品列表頁
所有的電商平臺主要目的都是為了銷售產品,它的視覺設計對用戶的決策有很大的影響。產品列表是公司銷售的一系列商品。設計師的工作是設計一個可以吸引用戶并且鼓勵他們購買商品的頁面。移動端的產品列表也可以像一些web端的電商平臺一樣,將產品類目放置在一個容器中,可以通過上滑來查看,一行中放置的產品數量應該根據屏幕寬度來決定。
Resto App
另一種展示產品列表的交互方式是水平滑動,為了讓導航更加清晰明確,頁面中最后一個選項不應該完全展示,這樣可以提示用戶滑動的方向。此外,產品的照片或者是插圖應該是高清的,這樣用戶可以更好的了解他們要購買的商品。產品列表界面應該有一個行為召喚按鈕,用戶通過這個按鈕可以將商品添加到購物車。這樣用戶就能從產品列表界面獲取到商品,不用再額外跳轉到特定的界面。
Cafe Coupon app
產品詳情頁
這個界面是給那些想要進一步的人,提供更多關于產品的信息,它用來展示產品的一些主要信息,以此來幫助用戶決定他們是否真的需要這個產品。設計師一般將產品的展示圖片放在屏幕中央,相關描述放在圖片下方。設計師可以將尺寸、材質或者其他數據分成不同的模塊,以便用戶可以輕松的找到他們所需要的信息。
珠寶電商app
確認支付頁面
如今越來越多的人愿意使用智能手機線上支付,各大公司紛紛對這一環節開始加以重視,力求打造最便捷的支付體驗。支付是用戶購買商品的最后一步,設計師的職責是讓用戶在使用的過程中感覺舒服。首先,確認支付頁面的必有的部分是一個表單,用來填寫一些個人信息,諸如姓名、銀行卡賬號此類。填寫信息類別取決于用戶在何地產生購買行為。此外,至關重要的一點是讓用戶知道他個人信息是安全的,所以設計師必須通過一些視覺元素讓用戶知道這些信息不會被泄露出去,令他們安心。可以使用一系列已經約定俗成的icon,它們被賦予了特定意義,并且經過了大公司的檢驗。
Cinema app
社交軟件界面
聯系人
聯系人列表已經存在很久了,從最初的紙筆演變到今天的電子載體,它視覺風格如此多變的一個主要原因是:想要幫助人們保存朋友或者其他重要聯系人的信息。聯系人列表向用戶展示的聯系人應該按照首字母排序,每一個聯系人都應該是可觸的,點擊進去后顯示電話號碼、E-mail之類的詳細信息,比如Skype、Messenger之類的聊天軟件。同時可以允許用戶上傳照片,幫助用戶更方便的搜索聯系人。
聯系人界面
音樂播放器
音樂列表
音樂愛好者們喜歡根據不同類別創建自己的歌單,很顯然每個音樂app都應該為用戶提供這樣的功能,列表頁在不同的app上看起來都差不多:它會顯示歌曲名稱、歌手或者樂隊,以及歌曲的長度。同時設計師可以為這首歌曲添加一張圖片,可以是它的專輯封面。如果一首歌曲沒有封面,那么這個位置仍然應該有一個icon,例如,一個音符標志。
Music app
播放頁
人們可以通過它來控制自己聽到的歌曲,該功能包括切歌、暫停和播放,這里需要醒目、易于識別的button。這一部分通常放在屏幕底部中央,上方主要部分放置一個與歌曲相關的圖片,但是也有一些設計師會在此區域做一些音樂可視化的動效,這對于設計師來說是展示想象力和創造力的好機會。
ECHO app
現如今,移動端app快速發展,每天都有大量的新商品出現,它們在解決用戶新型需求的同時也產生了很多新型界面,設計師應該做好準備面臨這一挑戰,一直保持創新精神,從啟發中迸發靈感。
------
譯文來源:uxplanet.org