雜談：APP到幻燈片的淺談之層級邏輯

寫之前的啰嗦

作為一個移動端AndroidDev，一直都想從開發的方面來說說app和幻燈片設計相通的思路。至於為何要從app來切入，主要有下面三個原因

一是因為移動端本身軟體的頁面邏輯對於幻燈片的組織、排版都有一定的參考價值；

二是因為移動端所呈現的數據交互、頁面交互、視覺交互對於幻燈片這麼一個以傳遞重要信息的演示文稿來說，很有裨益；

三是設計和習慣的相通性，對於用戶越來越挑剔的眼光，幻燈片應該借鑒新的一些東西。

這幾天理了下大概的寫作方面，寫下來有4-5篇吧。這是一個比較大的坑，可能會有所局限性，示例之中也可能會以前的冷飯，還請諒解。

層級邏輯概述

一般意義上，寫文章需要列好提綱，根據提綱進行內容的填充。同時，這也是我們很多場景下的一種邏輯處理，在幻燈片或者app中，根據內容或者功能進行歸納劃分，之後根據這些劃分，我們一般都能夠得到下面的這張圖：

上述圖形的體現形式還有很多：有可能是一份xmind圖、有可能是一份1/1.1/1.1.1目錄的文字。不論是哪一種呈現形式，最終需要將這樣的結構貫穿到幻燈片主線上去，熟悉每一個環節，否則容易節奏翻車。

下面這張圖中，提及到了一個層級深度為三的一個示例圖，在圖中也有所標註，可以看到1/1.1/1.1.1的痕迹。

層級深度，表示我們在展開文章時所使用的內容關係的一個複雜程度。

樹形層級設計規則：

每設置一個層級子項的時候，需要考慮其是否合理：我們傳遞的信息所接受的程度隨著複雜程度提高而有所降低，只需要將重要的層級子項細節展開即可，其餘的能省略即省略，來降低我們每一層級的子項數目。

樹形層級優缺點：

第一張圖提及到，樹形層級結構優點是內容合理分類、條理清晰，內容跟隨層級結構易於展開，能夠豐富每一個細節要點。當然其缺點也比較明顯，就是如果層級深度結構較深，會增加內容的複雜程度，要點多了會影響信息的實際傳達。

這就要求對主題內容進行合理劃分精簡，進而設置比較合適的層級結構。至於怎麼樣會合理化樹形層級結構，我先挖個坑以後專門寫文章來填。

App中三種層級結構

1 底部導航頁

鑒於Android平台app很多都使用的是iOS的設計稿，所以很多的軟體都是使用底部導航頁實現內容模塊的切換工作。

從下圖可以看到，這樣的導航頁是基於圖標和簡要文本說明作為導航標籤的，同時這也是想要說明的：一般程度上圖形所展示的意義多樣，同一套圖標放在不同的場景下，沒有違和感。所以在選用圖標的時候，為了不引起歧義，還是需要簡要文本的標註。

2 左側導航抽屜

左側導航抽屜遵循了Material Design的設計規範，將這種導航放在左側抽屜之中。同底部導航一樣，也是用於不同版塊內容的切換。

3 標籤布局

標籤布局TabLayout，這主要用於多個標籤頁的切換，各個標籤主要是使用文字。切換過程中通過滑動或者點擊事件實現不同內容版塊的切換。

App層級到PPT

上面的文字中，提及到了三種的層級結構，那麼在實際的幻燈片製作過程中，怎麼將這種思維轉換過來，下面是轉換到ppt中一些說明。

底部導航頁之PPT目錄導航

底部導航一般借鑒於PPT的主目錄和各個層級的目錄，因為文章結構的需求，需要不同的目錄導航的形式，主要將其歸類到幻燈片中的目錄導航主要有以下幾種形式（圖中以使用三個列項作為參考，實際製作過程中可以使用3-5個列項）：

1 圓形圖標

2 圓角矩形圖標

3 圖標+簡要文本標題

4 文本填充形狀

炒冷飯御用圖一：用於作為主目錄

炒冷飯御用圖二：使用文本可填充形狀作為二級或者三級層級並列關係項目錄

底部導航頁切換的過程之中，對應圖標顏色變化，用於指示當前項。同樣，在幻燈片中的目錄頁設計中，也可以通過以下三種方式進行切換標識：

下面是三種方式的使用場景說明，這裡就不明說了。

左側導航抽屜之同層級子項列舉

用於展示同級子項並列內容的方式，這樣做的好處是將子項標題和實際的內容在同一個頁面之中，將標題和實際內容在同一個版面一一對應起來。下面介紹幾種常見的抽屜效果的其他形式使用

1 抽屜為左，內容展示區為右

兩種常用的格式，一種是以圖表作為導航指向，一種是以圖文（文本或文本+圖形）作為導航指向。

2 抽屜為右，內容展示區為左

兩種常用的格式，一種是以圖表作為導航指向，一種是以圖文（文本或文本+圖形）作為導航指向。

下面是一個二級層級三個並列項的示例說明：使用的是文本作為導航指向。

可以看出：通過設置不同的文本大小、字體顏色來區分當前項和其他項，建立內容合標題的一一對應關係。

當然這種方式還有切換的形式和底部導航一樣，還有其他的幾種的表現形式，這裡還是從色彩、大小、其他特殊標識作一下說明。

標籤布局之文本標籤切換

這種方式和左側抽屜導航的形式類似，這裡使用標籤文本作為切換過程的導航指向。可以設置2-5個文本標籤作為內容提要，通過指向不同的標籤內容實現內容版塊的切換。

同抽屜導航的形式一樣，我們可以把文本標籤放在頁面上方，也可以放在頁面的下方。根據實際內容的需要選擇較為合適的表現形式，雖然我趨向於推薦放在頁面上方。

文本標籤在上方：

示例說明

文本標籤在下方：

示例說明：

當然除了使用文本大小、顏色區分標籤，還可以使用其他的形式進行區分說明，下面是常用的兩種形式。

first 以圖形填充作為文本背景載體，來標識當前項說明

second：以色彩和橫線標識當前項

小結

對於這三種層級切換的形式，在每個app都能夠見到。將其遷移到實際的幻燈片製作之中，對於觀眾接受起來也是比較容易的。當然最好的層級切換效果，是以簡易動畫來實現切換過程。將標題和內容通過動畫的動態效果進行關聯。

底部導航的這一種表現形式主要用於根目錄和各層級目錄的使用，這種從層級子項到其內容之間是分散到兩個頁面之中。對於要求標題和內容在同一個頁面，可以選用後面的兩種形式的導航效果了。

最後

鑒於實際的製作過程之中，原始文本素材較少，如果各位朋友有這類幻燈片，可以發送給我一點，保證只是使用這些文本內容作為示例使用，畢竟我接觸比較多的只是趨向於工科類的幻燈片形式。

如果有建議或問題的話，留言或私信。

感謝閱讀。