ui設(shè)計(jì)師需要學(xué)什么？今天以APP設(shè)計(jì)為例，跟大家講下ui設(shè)計(jì)師必須要學(xué)的九大經(jīng)典APP導(dǎo)航設(shè)計(jì)。當(dāng)我們?cè)谠O(shè)計(jì)一款A(yù)pp時(shí),我們最注重的很可能是頁(yè)面的布局結(jié)構(gòu)和元素的細(xì)節(jié)優(yōu)化。而如何快速讓你設(shè)計(jì)的作品，能夠在第一時(shí)間快速打動(dòng)用戶。同時(shí)，還能給客戶留下更為深刻的用戶體驗(yàn)是每一位UI設(shè)計(jì)師所必須具備能力之一，那如何才能做到呢？今天小編就為大家分享下UI設(shè)計(jì)師必須掌握的九大神器。

ui設(shè)計(jì)師需要學(xué)底部標(biāo)簽式導(dǎo)航

底部標(biāo)簽式導(dǎo)航位于頁(yè)面底部,用于一級(jí)界面當(dāng)中,是一種最常見的導(dǎo)航模式,如果我們開發(fā)的應(yīng)用是需要用戶頻繁在不同的界面中切換時(shí),最好采用這種導(dǎo)航。標(biāo)簽式導(dǎo)航最好不要多余5個(gè),當(dāng)多余5個(gè)時(shí),我們可以將剩余優(yōu)先級(jí)不高的功能集合到一個(gè)功能入口中,例如:“更多,人中心,我的等”。如下圖

ui設(shè)計(jì)師需要學(xué)頂部標(biāo)簽式導(dǎo)航

頂部標(biāo)簽導(dǎo)航顧名思義,位于界面中的頂部,通常是在導(dǎo)航欄或者狀態(tài)欄下方使用。一般作用于二級(jí)導(dǎo)航,因此頂部標(biāo)簽的樣式通常是用文字直接展示,避免過多的視覺設(shè)計(jì),造成界面中導(dǎo)航層級(jí)不明確。再細(xì)分的話,頂部導(dǎo)航也可以分為兩種:1.固定標(biāo)簽的頂部導(dǎo)航(有些應(yīng)用用來做App中的主導(dǎo)航,例如:QQ音樂)2.可滑動(dòng)標(biāo)簽的頂部導(dǎo)航(導(dǎo)航的入口不能少于5個(gè)),如下圖

優(yōu)點(diǎn):數(shù)量沒有限制,可固定數(shù)量,也可以不固定數(shù)量;界面左右滑動(dòng)可以直接切換;方便直觀瀏覽實(shí)時(shí)更新的內(nèi)容

缺點(diǎn):容易形成界面內(nèi)容過多,占用了界面的一定高度

ui設(shè)計(jì)師需要學(xué)分段式導(dǎo)航

分段式導(dǎo)航是iOS系統(tǒng)自帶的標(biāo)準(zhǔn)控件,適合界面分類的切換頻率比較高的,導(dǎo)航數(shù)量通常在2-4個(gè)之間,如下圖

優(yōu)點(diǎn):可以看到當(dāng)前所謂在的入口位置,輕松在各個(gè)入口間切換且不會(huì)迷失;也可直接展示當(dāng)前選擇的界面內(nèi)容;適用于高頻率切換的界面,方便操作。

缺點(diǎn):樣式守舊,靈活性不高,無(wú)法通過左右側(cè)滑的手勢(shì)進(jìn)行切換。數(shù)量會(huì)因?yàn)樽侄蔚拈L(zhǎng)短受到一定限制。

ui設(shè)計(jì)師需要學(xué)抽屜式導(dǎo)航

從導(dǎo)航名稱上理解,抽屜,通常用來收起整理的意思,也就是除了核心功能以外的低頻操作都放到這個(gè)抽屜里,由此可見,抽屜式導(dǎo)航的核心就是【隱藏】,所以我們的產(chǎn)品如果需要讓用戶獲得沉浸式的體驗(yàn)及其他模塊的切換頻率低的話抽屜式導(dǎo)航則是一個(gè)不錯(cuò)的選擇。抽屜式導(dǎo)航通?？刂频陌咽殖霈F(xiàn)在App的左上角,以按鈕的形式出現(xiàn),點(diǎn)擊之后抽屜被拉開,左側(cè)區(qū)域顯示導(dǎo)航中的內(nèi)容,如下圖

優(yōu)點(diǎn):隱藏非主要功能,可以使用主意力集中在核心功能上,減少其他非核心功能的干擾,節(jié)省界面的利用空間

缺點(diǎn):由于可發(fā)現(xiàn)性底,不能一目了然,其他模塊的流量會(huì)被遏制,不利于整體產(chǎn)品流量最大化。不合適頻繁切換使用,會(huì)增加用戶的學(xué)習(xí)成本高

ui設(shè)計(jì)師需要學(xué)下拉式導(dǎo)航

下拉導(dǎo)航通常用于篩選統(tǒng)一模塊下不同類別的是信息,與抽屜式導(dǎo)航的目的是相同的,都是為了隱藏非核心的操作與功能。這類導(dǎo)航多用于瀏覽類的二級(jí)導(dǎo)航;通過點(diǎn)擊我們可以召喚出下拉菜單,下拉菜單通常會(huì)以浮窗的形式顯示在界面上層,當(dāng)我們點(diǎn)擊菜單以外的區(qū)域便會(huì)收起。相對(duì)抽屜式導(dǎo)航相比,下拉式導(dǎo)航能讓用戶感知到當(dāng)前位置。如下圖)

優(yōu)點(diǎn):與界面的連貫性比較好,用戶可以感知當(dāng)前位置,同時(shí)也節(jié)省界面的利用空間。

缺點(diǎn):不合適頻繁切換使用;無(wú)法結(jié)合左右滑動(dòng)操作;相對(duì)隱蔽。

ui設(shè)計(jì)師需要學(xué)舵式導(dǎo)航

舵式導(dǎo)航屬于底部標(biāo)簽導(dǎo)航的變形,按鈕中間加了個(gè)+號(hào),看起來就像是輪船上用來指揮的船舵。當(dāng)標(biāo)簽導(dǎo)航無(wú)法滿足需求時(shí),我們可以選擇舵式導(dǎo)航,把導(dǎo)航內(nèi)核心的功能放在船舵中央,并用突出的顏色來吸引用戶頻繁點(diǎn)擊。舵式導(dǎo)航主要把生產(chǎn)內(nèi)容的主功能按鈕放在中間,常見于用戶生產(chǎn)∪GC(用戶自發(fā)上傳的內(nèi)容)內(nèi)容的社區(qū)型App。例如簡(jiǎn)書,閑魚,如下圖

優(yōu)點(diǎn):突出重要且頻繁的操作入口,同時(shí)也彌補(bǔ)了底部標(biāo)簽導(dǎo)航數(shù)量的不足,還可以在設(shè)計(jì)上做出靈活,有趣效果。

缺點(diǎn):需要用戶二次點(diǎn)擊才能到達(dá)目標(biāo),增加了用戶的操作流程,同時(shí)隱藏的功能不能過多,會(huì)對(duì)點(diǎn)擊后的用戶造成反感,增加用戶的思考選擇壓力,不合適頻繁切換使用。

ui設(shè)計(jì)師需要學(xué)點(diǎn)聚式導(dǎo)航

當(dāng)層級(jí)信息比較復(fù)雜,并且每個(gè)模塊中都有用戶頻繁使用的核心功能在這些條件的限制下,我們最好的選擇就是點(diǎn)聚式導(dǎo)航,點(diǎn)聚式導(dǎo)航的特點(diǎn)就是無(wú)論你到達(dá)App中那一個(gè)界面,懸浮CON都會(huì)一直在界面的最上面,方便不同的用戶隨時(shí)選擇自己需要的功能入口,如下圖

優(yōu)點(diǎn):占據(jù)空間小,方便不同的用戶進(jìn)入不同的模塊,通常他的出現(xiàn)時(shí)伴隨著互動(dòng)效果的,所以更加吸引用戶的點(diǎn)擊欲望,提高產(chǎn)品核心功能的點(diǎn)擊率。

缺點(diǎn):樣旋懸浮在界面上面的點(diǎn)聚式導(dǎo)航,會(huì)遮擋默寫文字或者操作,用戶需要滑動(dòng)后才可操作,無(wú)形中增加了用戶的使用步驟,通常點(diǎn)聚式導(dǎo)航他的展示方式為一個(gè)|CON,沒有任何文字說明,因此用戶理解上會(huì)出現(xiàn)一定的障礙。

ui設(shè)計(jì)師需要學(xué)列表式導(dǎo)航

列表式導(dǎo)航是App中必不可少的一種信息承載模式,通常是由圖標(biāo)+文字的形式在界面中左對(duì)齊排列,對(duì)于功能之間如果存在不同種類的情況,通常用留白分割的方法處理。(如下圖)列表導(dǎo)航中每一個(gè)列表都是一個(gè)子功能的入口,并且每個(gè)入口之間的切換必須要返回至列表主頁(yè)才可以,如下圖

優(yōu)點(diǎn):列表式結(jié)構(gòu)具有很強(qiáng)的延展性,可以不斷的增加信息,可以很方便的進(jìn)行分組分類。簡(jiǎn)單清晰、易于理解、用戶可以快速找到自己想要的信息。

缺點(diǎn):只能通過排序來區(qū)分個(gè)入口的重要;列表過多會(huì)造成用戶下滑的操作,甚至增加搜索方面的功能。每個(gè)入口切換時(shí),只能通過返回至列表頁(yè)面才可以。

ui設(shè)計(jì)師需要學(xué)宮格式導(dǎo)航

宮格導(dǎo)航將主要入口全部聚合在界面中,讓用戶整體了解App的服務(wù),從而選擇自己需要的服務(wù)。各個(gè)入口之間行相互獨(dú)立,沒有太多交集,無(wú)法跳轉(zhuǎn)互通。宮格式導(dǎo)航的變化很多,比如美圖秀秀,支付寶,如下圖

DD

優(yōu)點(diǎn):宮格式結(jié)構(gòu)可以作為信息或平臺(tái)的入口,讓用戶了解App中的所有服務(wù)并快速選擇自己需要的服務(wù)。同時(shí)也具有較強(qiáng)的延展性。

缺點(diǎn):用戶無(wú)法直接看到想要選擇服務(wù)的內(nèi)容部分,需要點(diǎn)擊后才能看到具體的界面內(nèi)容,會(huì)增加用戶的選擇壓力。

在APP設(shè)計(jì)中ui設(shè)計(jì)師需要學(xué)什么相信大家已經(jīng)有了一些了解，掌握了這九種導(dǎo)航設(shè)計(jì)，app設(shè)計(jì)效果就會(huì)水到渠成。更多ui設(shè)計(jì)師需要學(xué)什么的內(nèi)容大家可以咨詢我們的網(wǎng)站客服，對(duì)想要通過ui設(shè)計(jì)培訓(xùn)快速入行的同學(xué)也可以咨詢客服預(yù)約免費(fèi)試聽我們的課程。