做了這么久設計!還不知道UI界面包含哪些內容?

智能手機幾乎已經滲透到了我們生活的方方面面,各種各樣的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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,763評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,238評論 3 428
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,823評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,604評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,339評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,713評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,712評論 3 445
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,893評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,448評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,201評論 3 357
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,397評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,944評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,631評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,033評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,321評論 1 293
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,128評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,347評論 2 377

推薦閱讀更多精彩內容