正文

app設(shè)計案例（優(yōu)秀app的ui設(shè)計界面）

發(fā)布時間：2023-04-27 20:28:45 稿源：創(chuàng)意嶺閱讀： 1044

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于app設(shè)計案例的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、app導(dǎo)航設(shè)計方式有哪些
2、如何快速分析一款A(yù)PP的用戶體驗(yàn)
3、如何制作app軟件？
4、如何設(shè)計一個 App 的注冊登錄流程

app設(shè)計案例（優(yōu)秀app的ui設(shè)計界面）

一、app導(dǎo)航設(shè)計方式有哪些

生活中大家或多或少都會有迷路的經(jīng)驗(yàn)，但你是不是從來沒思考過迷路的定義是什么？

迷路的定義其實(shí)有兩個核心：

1.想要到達(dá)一個目的地；

2.不知道自己在哪里，應(yīng)該往哪走。

和生活中的迷路一樣，我們在使用APP過程中也可能會「迷路」。因?yàn)槲覀兪褂肁PP時同樣需要到達(dá)一個頁面，如果沒有合適引導(dǎo)，我們很難知道他需要怎么跳轉(zhuǎn)才能到達(dá)自己想要的頁面。在APP中，導(dǎo)航設(shè)計起到的正是這種關(guān)鍵作用：讓我們了解自己此時在哪個頁面，自己想要到達(dá)某個頁面應(yīng)該怎么跳轉(zhuǎn)。

下面我們通過實(shí)例從是什么、為什么、怎么做這三個方面來介紹一下目前APP設(shè)計中最常用的幾種導(dǎo)航。

一、底部標(biāo)簽導(dǎo)航

1.簡介

底部標(biāo)簽導(dǎo)航是APP中最常見的導(dǎo)航。

為什么它會是最常見的？就像超市把利潤最高（最想賣給顧客）的商品擺在顧客觸手可及的地方一樣，APP最核心的功能通常也應(yīng)該放在用戶觸手可及的地方。在我們握持手機(jī)時，屏幕底部區(qū)域恰好是大拇指最方便觸及的區(qū)域。因此大多數(shù)APP產(chǎn)品才會選擇底部標(biāo)簽導(dǎo)航的形式來呈現(xiàn)產(chǎn)品核心功能。

2.設(shè)計特征

1）通常作為APP的一級導(dǎo)航（主導(dǎo)航）。

原因同簡介里的解釋。

2）標(biāo)簽數(shù)通常為3-5個。

為什么不更多？因?yàn)榇竽粗赣|摸屏幕時的接觸面積較大，一旦標(biāo)簽數(shù)超過5個，每個標(biāo)簽的所占面積不足，將會使正確的標(biāo)簽點(diǎn)擊選擇變得困難，甚至導(dǎo)致誤點(diǎn)擊。

3）標(biāo)簽通常是圖標(biāo)+文字形式的。

標(biāo)簽通?？梢杂形淖?、圖標(biāo)、文字加圖標(biāo)這3種設(shè)計形式，為什么非要用圖標(biāo)+文字？首先，文字的意義指向性強(qiáng)于圖標(biāo)。舉個例子，一個X，可以表示關(guān)閉，也可以表示錯誤，甚至可以表示未知數(shù)，但「關(guān)閉」這兩個字表示的就是關(guān)閉。其次，人類作為視覺化動物，對圖形比對文字敏感。綜合起來，圖標(biāo)+文字的形式是意義指向最準(zhǔn)確的形式，也是讓我們以最快理解標(biāo)簽含義（功能）的形式。

4）標(biāo)簽順序通常按功能優(yōu)先級從左至右排列，第1個標(biāo)簽顯示產(chǎn)品主頁面。

為什么？因?yàn)榉灿信帕?，在視覺上必有順序。有順序，必有優(yōu)先級。因此第1個標(biāo)簽通常顯示產(chǎn)品主頁面，或者說放置最核心的功能。

5）如果標(biāo)簽數(shù)多于5個，但依然要使用底部標(biāo)簽導(dǎo)航，可以把最右側(cè)標(biāo)簽設(shè)計為「更多」，然后點(diǎn)擊「更多」會顯示更多功能。

這就像產(chǎn)品調(diào)研的問卷設(shè)計中我們設(shè)置選項(xiàng)一樣，有時候我們需要讓選項(xiàng)互斥，但選項(xiàng)數(shù)量又很多，這個時候我們可以把重要性低的幾個選項(xiàng)合并成一個選項(xiàng)叫「其它」。

6）標(biāo)簽對應(yīng)功能模塊間通常有高頻次切換需求，且功能層級相當(dāng)。

7）通常用戶所在頁的標(biāo)簽需要突出顯示（正常是通過顏色差異和標(biāo)簽圖形變化來突出）。

為什么？因?yàn)橐層脩粼贏PP中不「迷路」，一個至關(guān)重要的點(diǎn)就是讓他知道自己現(xiàn)在在哪。

8）底部標(biāo)簽在特定情況下可以做成沉浸式的。

為了增加頁面的展示空間，讓用戶能更專注（沉浸）于頁面內(nèi)容，比如說內(nèi)容閱讀類產(chǎn)品，底部導(dǎo)航可以設(shè)計成上滑時隱藏、下滑時顯示的形式。但這種設(shè)計可能會導(dǎo)致使底部標(biāo)簽導(dǎo)航失去其原本在標(biāo)簽切換中的便捷性，使用時需要慎重考慮。

9）考慮到大屏手機(jī)的單手操作，底部導(dǎo)航標(biāo)簽有時會采用左滑右滑切換標(biāo)簽的交互。

3.優(yōu)缺點(diǎn)

1）優(yōu)點(diǎn)

可以直觀展現(xiàn)APP的核心功能頁面及入口；

我們可以在不同的功能模塊間進(jìn)行快速切換。

2）缺點(diǎn)

作為頁面固定顯示的內(nèi)容，會擠壓頁面其它內(nèi)容的顯示區(qū)域，進(jìn)而降低頁面的信息承載量。

4.原型設(shè)計實(shí)現(xiàn)案例

底部導(dǎo)航

點(diǎn)此查看原型實(shí)例

二、舵式導(dǎo)航

1.簡介

舵式導(dǎo)航本質(zhì)是底部標(biāo)簽導(dǎo)航的變式。那么舵式導(dǎo)航為什么要叫舵式導(dǎo)航呢？首先是形似，其次是因?yàn)槎媸綄?dǎo)航中最重要的導(dǎo)航就像舵在船的航行中一樣重要。即一個底部標(biāo)簽導(dǎo)航中，有一個功能標(biāo)簽相比其它功能標(biāo)簽來說更重要、突出，更需要強(qiáng)調(diào)。

2.設(shè)計特征

1）有一個核心功能比其它功能更重要，更需要強(qiáng)調(diào)。常見于UGC產(chǎn)品，比如微博、閑魚、抖音以及原型案例中的小紅書。

2）算上需要強(qiáng)調(diào)的標(biāo)簽，標(biāo)簽數(shù)量通常為3個或者5個。

為什么？和船的控制室的對稱式設(shè)計一樣，當(dāng)有標(biāo)簽需要突出的話，兩邊的標(biāo)簽在視覺上則要設(shè)計成對稱的。

3）舵這個概念在標(biāo)簽上的呈現(xiàn)，也就是突出的形式。既可以真的有舵的形，也可以只給標(biāo)簽做簡單的差異化設(shè)計。

前者的例子：閑魚。

后者的例子：微博、抖音、小紅書。

3.優(yōu)缺點(diǎn)

1）優(yōu)點(diǎn)

可以直觀展現(xiàn)APP的核心功能頁面及入口；

我們可以在不同的功能模塊間進(jìn)行快速切換；

可以凸顯核心、頻繁使用的功能，引導(dǎo)用戶使用該功能（比如產(chǎn)出內(nèi)容）。

2）缺點(diǎn)

作為頁面固定顯示的內(nèi)容，會擠壓頁面其它內(nèi)容的顯示區(qū)域，進(jìn)而降低頁面的信息承載量；

凸顯最重要的功能的同時，一定程度上會弱化其它核心功能的使用。

4.原型設(shè)計實(shí)現(xiàn)案例

底部導(dǎo)航

點(diǎn)此查看原型實(shí)例

三、頂部標(biāo)簽導(dǎo)航

1.簡介

頂部標(biāo)簽導(dǎo)航通常作為次級導(dǎo)航，配合底部標(biāo)簽導(dǎo)航或舵式導(dǎo)航一起使用。

2.設(shè)計特征

1）相對底部標(biāo)簽導(dǎo)航而言，標(biāo)簽數(shù)量更靈活。

作為二級導(dǎo)航時，通?？梢允?-3個標(biāo)簽。當(dāng)二級導(dǎo)航的分類數(shù)較多時，也可以超過5個標(biāo)簽。

2）標(biāo)簽通常是文字形式的。

為什么不像底部標(biāo)簽一樣設(shè)置成圖標(biāo)+文字的形式？因?yàn)閳D標(biāo)+文字相比純文字而言會占據(jù)更多的頁面面積。如果采用這種形式，再加上底部導(dǎo)航，將極大擠壓頁面其它內(nèi)容的顯示區(qū)域。

3）當(dāng)標(biāo)簽分類數(shù)量過多時，通?？梢栽O(shè)計成左滑滾動標(biāo)簽的形式。

但需要注意的是，滾動標(biāo)簽意味著在不滾動狀態(tài)下，頁面默認(rèn)狀態(tài)下顯示的標(biāo)簽數(shù)是有限的，這時我們讓默認(rèn)狀態(tài)下可見的最后一個標(biāo)簽露出一半，以提示我們它可以左滑滾動，一定程度上減少用戶的發(fā)現(xiàn)成本。

在電商產(chǎn)品中，通常還會有一種類似于頂部滾動標(biāo)簽導(dǎo)航的側(cè)邊分類滾動導(dǎo)航。

3.優(yōu)缺點(diǎn)

1）優(yōu)點(diǎn)

我們可以在不同的次級功能模塊間進(jìn)行快速切換。

2）缺點(diǎn)

作為頁面固定顯示的內(nèi)容，在和底部導(dǎo)航配合使用時，會擠壓頁面其它內(nèi)容的顯示區(qū)域，進(jìn)而降低頁面的信息承載量。

4.原型設(shè)計實(shí)現(xiàn)案例

1）頂部導(dǎo)航

點(diǎn)此查看原型實(shí)例

2）頂部分類滾動導(dǎo)航

點(diǎn)此查看原型實(shí)例

3）側(cè)邊分類滾動導(dǎo)航

點(diǎn)此查看原型實(shí)例

四、抽屜導(dǎo)航

1.簡介

抽屜導(dǎo)航也叫漢堡菜單，是將一個導(dǎo)航頁（菜單）隱藏在當(dāng)前頁面，點(diǎn)擊漢堡按鈕，導(dǎo)航頁會像抽屜一樣從頁面左側(cè)或右側(cè)拉出。我們可以通過現(xiàn)實(shí)意義的抽屜來理解這種導(dǎo)航：

1）抽屜作為收納物品的容器，通?？梢源娣哦鄠€物品（抽屜導(dǎo)航可以放置多個次級功能入口）

2）抽屜通常是關(guān)起來的，需要時才打開，因此抽屜內(nèi)的物品通常不可見（抽屜導(dǎo)航只有點(diǎn)擊后才能看到次級功能入口）

2.設(shè)計特征

1）通常用于放置非常用、非核心、低頻但必要的功能。如對設(shè)置、個人信息等。

為什么要放置低頻、非核心功能？因?yàn)槌閷蠈?dǎo)航具有隱藏的特性，而根據(jù)前面的介紹，越是核心、高頻的功能，就越應(yīng)該放在用戶容易看到、觸及的地方地方。

2）使用抽屜導(dǎo)航，通常意味著產(chǎn)品的主要功能集中在主頁面當(dāng)中。比如摩拜。

3.優(yōu)缺點(diǎn)

1）優(yōu)點(diǎn)

占用頁面空間較少，使得主頁面能承載更多的信息，頁面更簡潔，我們可以更專注于使用產(chǎn)品的核心功能。

具有較強(qiáng)的次級功能擴(kuò)展性，可以在抽屜導(dǎo)航頁放置較多的功能入口。

2）缺點(diǎn)

隱藏式設(shè)計，可發(fā)現(xiàn)性較差，增加了用戶的發(fā)現(xiàn)成本。

4.原型設(shè)計實(shí)現(xiàn)案例

抽屜導(dǎo)航

點(diǎn)此查看原型實(shí)例

五、宮格導(dǎo)航

1.簡介

說到宮格，很多人第一時間想到的會是九宮格。實(shí)際上宮格導(dǎo)航不只是九宮格，也可以是其它數(shù)量的宮格。宮格導(dǎo)航會以分格、平鋪的形式來展示功能，通常作為次級導(dǎo)航使用。

2.設(shè)計特征

1）宮格對應(yīng)的功能數(shù)量較多。通常用戶提供服務(wù)較多或者類目較多的APP，如支付寶和微信。

為什么？因?yàn)橐M成宮格，宮格數(shù)通常是6、9、12或者8、16甚至更多。

2）通常功能之間層級相同，使用頻率相近、彼此獨(dú)立且切換頻率低。

為什么？因?yàn)榉指衿戒伒男问娇梢宰層脩粢荒苛巳坏乜吹剿泄δ?，彼此之間沒有顯著的優(yōu)先級差異。另外因?yàn)閷m格導(dǎo)航只顯示功能入口，不顯示實(shí)際的功能頁面，因此要切換功能時需要退回宮格導(dǎo)航頁面才能切換其它功能，不適合作為彼此有關(guān)聯(lián)、切換頻繁的功能的導(dǎo)航。

3）功能間如果具備一定的關(guān)聯(lián)性，可以分類處理。

為什么要分類處理？因?yàn)楫?dāng)宮格數(shù)量過多時，依據(jù)功能的關(guān)聯(lián)性做分類，可以便于用戶更快地找到自己想要的功能，減少用戶的尋找成本。

3.優(yōu)缺點(diǎn)

1）優(yōu)點(diǎn)

可擴(kuò)展性強(qiáng)，可以根據(jù)需要向下擴(kuò)展功能入口；

可以讓我們一目了然地知道產(chǎn)品所提供的功能，快速找到自己想要的功能。

2）缺點(diǎn)

不展示功能對應(yīng)頁面的內(nèi)，無法直接執(zhí)行功能操作；

功能間切換不方便，要切換功能時需要退回宮格導(dǎo)航頁面才能切換其它功能；

容易形成較深功能層級和功能路徑，增加用戶的操作成本。

4.原型設(shè)計實(shí)現(xiàn)案例

因設(shè)計較簡單，未附案例

六、列表導(dǎo)航

1.簡介

以列表的形式呈現(xiàn)功能，適用于大量的功能的展現(xiàn)，通常作為次級導(dǎo)航，如網(wǎng)易云音樂的賬號頁。

2.設(shè)計特征

1）通常功能之間層級相同。

2）通常在列的右側(cè)顯示箭頭表示有二級內(nèi)容。

3）當(dāng)列表功能較多時，可以通過調(diào)整間距的方式對功能進(jìn)行分類。如無合適分類名稱，也可以選擇不加分類名稱。

3.優(yōu)缺點(diǎn)

1）優(yōu)點(diǎn)

可擴(kuò)展性強(qiáng)，可以根據(jù)需要向下擴(kuò)展功能入口。

2）缺點(diǎn)

下方的功能可能會被忽略。雖說列表導(dǎo)航的功能間層級相同，但如果列表功能過多，我們需要向下滾動頁面才能看到下方的功能，因此這一部分功能容易被忽略。

4.原型設(shè)計實(shí)現(xiàn)案例

因設(shè)計較簡單，未附案例

七、總結(jié)

1.我們使用產(chǎn)品是為了滿足某種需求（達(dá)到某種目的），因此導(dǎo)航最主要的功能在于讓我們清楚地知道自己所在頁面（所處位置），并幫助我們更快地到達(dá)目的頁（目的地）。

2.導(dǎo)航設(shè)計的形式服從設(shè)計的于目的。每種形式的導(dǎo)航雖然都有常用的使用場景，但這不意味著設(shè)計導(dǎo)航時需要嚴(yán)格遵循這些使用場景。在實(shí)際的設(shè)計當(dāng)中，還需要根據(jù)產(chǎn)品側(cè)及用戶側(cè)的需求具體分析。

3.一款產(chǎn)品通常不會只使用一種導(dǎo)航，而是會根據(jù)信息架構(gòu)以及功能的需求，混合使用多種導(dǎo)航。

以上原型案例現(xiàn)在我們都可以在墨刀模版區(qū)找到并且免費(fèi)使用哦！隨時都可以按自己的需求來編輯模版或者直接復(fù)用！

如何查看模版項(xiàng)目，我們可以登陸墨刀：modao.cc，進(jìn)入工作區(qū)，點(diǎn)擊“新建項(xiàng)目” 就能在下方看到。

選擇一個模版，點(diǎn)擊“使用模版”。

進(jìn)入項(xiàng)目編輯區(qū)，可以隨意改動各種元素。

此外，如果點(diǎn)擊“預(yù)覽模版”，也可以一鍵查看該原型模版的教程哦！

“紅色”批注區(qū)域即為文字教程。

更多模版信息可參考舊文：再也不用四處找原型模版了墨刀模版庫全面升級！

二、如何快速分析一款A(yù)PP的用戶體驗(yàn)

本文章是一種相對高效、快速的分析APP產(chǎn)品的方法論。前幾天我突發(fā)奇想，現(xiàn)在設(shè)計師做APP產(chǎn)品分析分為兩種情況：

1、系統(tǒng)性的分析。對一款A(yù)PP進(jìn)行全方面的剖析，面面俱到。這樣做是十分專業(yè)和完善的，但是顯然十分花時間。

2、隨筆感想式。設(shè)計師對一款A(yù)PP進(jìn)行把玩后，根據(jù)自己的看法和想法，寫出自己的感受，羅列APP的優(yōu)缺點(diǎn)。這樣做雖然比較輕松，但是容易造成對APP的分析過于表面，或者疏漏掉一些值得注意的方面。

根據(jù)這樣的情況，我想嘗試著制作一個快速分析APP的方法論。根據(jù)這個方法論可以指導(dǎo)快速的完成APP的用戶體驗(yàn)分析，其次又可以保證分析報告的邏輯性和完善度。

1、一句話產(chǎn)品定義：用一句話概括產(chǎn)品的定位：包括使用人群、產(chǎn)品特色和主要功能

2、三種用戶畫像：思考APP的目標(biāo)用戶類型。簡潔的例舉三種用戶。例：天天宅寢室的大學(xué)生

3、三種使用場景：思考APP的使用場景。簡潔的描述三種可能的使用場景。例：在沒有網(wǎng)絡(luò)的地鐵上

4、三種用戶目標(biāo)：思考用戶會用這個APP來干什么。例舉三種用戶目標(biāo)。

5、主要頁面分析：截主要界面的圖，最多不超過三張。分析主要頁面的交互邏輯、信息構(gòu)架以及導(dǎo)航模式。

6、交互細(xì)節(jié)分析：找到APP的三個交互上的細(xì)節(jié)（無論好壞）并截圖。并且說明交互細(xì)節(jié)。

7、視覺風(fēng)格：找到三張你認(rèn)為最能說明APP界面設(shè)計風(fēng)格的界面并截圖。并給出三個視覺風(fēng)格關(guān)鍵詞。

8、視覺細(xì)節(jié)：找到三個你認(rèn)為最佳的視覺設(shè)計上的細(xì)節(jié)（包括動效），并且截圖。

9、用戶體驗(yàn)原則：綜合對app的用戶體驗(yàn)的分析。給出該APP的三個用戶體驗(yàn)關(guān)鍵詞

10、產(chǎn)品優(yōu)缺點(diǎn)：指出三個產(chǎn)品的優(yōu)點(diǎn)或缺點(diǎn)?？梢匀莾?yōu)點(diǎn)或缺點(diǎn)，也可以是兩個有點(diǎn)一個缺點(diǎn)或者一個優(yōu)點(diǎn)兩個缺點(diǎn)。

11、產(chǎn)品建議：給出一個APP產(chǎn)品設(shè)計上的建議?？梢允钱a(chǎn)品定位，也可以是交互或視覺設(shè)計。

12、星級評價：給出你對此APP的星級評價，供自己或他人參考。評級說明：

★ ：產(chǎn)品做的太差，簡直不能用。

★★ ：存在一些問題，但是還是可以使用的。

★★★：存在一些瑕疵，平時使用基本沒有什么問題。

★★★★：產(chǎn)品具有一定的特色，體驗(yàn)良好。

★★★★★：在同類產(chǎn)品中脫穎而出，具有新穎的界面設(shè)計或功能。用戶體驗(yàn)極佳，讓人忍不住安利它。

我希望能夠通過這個方法論，來定期進(jìn)行APP的分析，并且建立自己的「APP產(chǎn)品分析資料庫」，希望通過這樣來提高自己對用戶體驗(yàn)設(shè)計的認(rèn)識。這個方法的本質(zhì)也是如此，快速分析APP，建立有一定格式的APP設(shè)計資料庫。接下來我會根據(jù)這個方法論進(jìn)行實(shí)踐，寫一篇「案例篇」。目前該方法處于初級階段，我會邊實(shí)踐邊進(jìn)行修改，直至完善。

另外，由于我的學(xué)識有限，不對之處請指出。

希望本文能有所幫助。

三、如何制作app軟件？

先建立開發(fā)環(huán)境，再找外包公司。

Android開發(fā)涉及到的技術(shù)點(diǎn)非常龐雜。

主要知識點(diǎn)如下：

1.開發(fā)環(huán)境，AndroidStudio、eclipse.如何搭建Android開發(fā)環(huán)境可以去百度。

2.數(shù)據(jù)結(jié)構(gòu)，App的某些功能涉及到做算法，所以要有一定的數(shù)學(xué)基礎(chǔ)

3.AndroidSDK，會API接口開發(fā)，包括自行開發(fā)API的能力和調(diào)用第三發(fā)API的經(jīng)驗(yàn)。

4.熟悉tcp、IP，socket等網(wǎng)絡(luò)協(xié)議

5.如果涉及到服務(wù)器，你還需要了解webservice相關(guān)知識和相應(yīng)的開發(fā)語言，常用有PHP、JSP、ASP.Net.

6.除了這些功能基礎(chǔ)，App開發(fā)還涉及到UI設(shè)計、框架、性能優(yōu)化、調(diào)試適配等。

開發(fā)iOS系統(tǒng)App需要Objective-C主流編程語言，開發(fā)者一般用蘋果公司的iOSSDK搭建開發(fā)環(huán)境，iOSSDK是開發(fā)iOS應(yīng)用程序中不可少的軟件開發(fā)包，提供了從創(chuàng)建程序，到編譯、調(diào)試、運(yùn)行、測試等多種開發(fā)過程中需要等工具。學(xué)習(xí)iOS開發(fā)可以去看蘋果官方文檔，這是最權(quán)威的ios教程。

四、如何設(shè)計一個 App 的注冊登錄流程

下面結(jié)合我做過的案例來分解一下我是如何設(shè)計注冊登錄流程的：

1.明確目標(biāo)：

注冊的目的是讓用戶擁有與設(shè)備無關(guān)的唯一識別的ID，防止用戶因?yàn)樽粤鞒谭爆嵍魇?，增?qiáng)用戶體驗(yàn)。信息補(bǔ)全是為了收集用戶資料，便于后期精準(zhǔn)推廣。

2.明確產(chǎn)品定位：

產(chǎn)品定位：一款類似家校通的產(chǎn)品，家長通過學(xué)生代碼綁定孩子的賬號從而了解孩子在校學(xué)習(xí)狀況的產(chǎn)品。

3.了解元素組成：

根據(jù)產(chǎn)品定位元素組成包括：手機(jī)號，郵箱，密碼，昵稱，性別，城市，社交帳號等。

思考一：

因?yàn)榧议L必須綁定孩子的學(xué)生代碼才可觀看孩子信息，所以擁有一定的強(qiáng)制性和特別性（只有有學(xué)生代碼的家長才可以用），所以“先嘗后買”（先用產(chǎn)品有興趣在注冊）不適用，因此快捷登錄方式也被pass。

思考二：

社交注冊顯而易見的好處是：快，安全，無需驗(yàn)證，可信度高，記憶成本低。但產(chǎn)品用戶多為學(xué)生家長，況且社交賬號容易造成后臺帳號混亂。雖然提供個人