01-信息架構(gòu)/內(nèi)容組織形式
信息架構(gòu)即多個信息如何分類組織，彼此之間如何關(guān)聯(lián)與跳轉(zhuǎn)，一般的模式包括分層與平鋪。
分層在于如何返回頂層、下一層之間能否互相跳轉(zhuǎn)、如何讓人不迷失在路徑之中。
平鋪包括縱向分布、橫向分布、折疊展示。橫向分布比縱向之間的關(guān)系更加獨立，分塊更加明顯。
—— 分層 ——
跳板式
launchpad，各菜單之間相互獨立，類似于工作臺的門戶/手機系統(tǒng)的桌面。
how：不同等級的內(nèi)容可以使用不同的尺寸、形式做出區(qū)分。
金字塔式
what：每個頁面都可以從主頁進入，然后回到主頁。各個頁面之間可以通過翻頁來橫向跳轉(zhuǎn)。
when：類似文件夾查看的模式，經(jīng)常和單窗口深入的模式一起使用，路徑再深也能即時回到主頁。
why：組織關(guān)系比較明確，同時讓用戶在較深的路徑中可以更快的回到起點。
how：把前進、后退的導航放置在固定位置，減少鼠標移動的距離。
與跳板式一樣，都是有一個主頁來承載所有的入口。跳板式中，像小程序的設計，點擊右上角的快捷操作，也可以馬上返回主頁/關(guān)閉當前應用。
與跳板式的差異在于，各部分之間有一定的聯(lián)系，并非完全獨立。
儀表式
跳板式的一種細分，不僅展示模塊名稱，還展示關(guān)鍵的指標數(shù)字，點擊后可下鉆查看詳細的分析。先看全局整體狀況，再看每一項細分指標的分析。常見的如支付寶的賬單。
列表菜單式/拓展列表式
分別是獨立功能的入口，如系統(tǒng)的設置界面。通過將信息收納起來，點擊后查看更多的方式，讓信息分層組織，頁面更加簡潔。如通話記錄將同一號碼的多個記錄合并到一起。
與跳板式相比，更多依靠文字描述來區(qū)分各部分。同時可以將在當前頁的操作與進入下層的操作結(jié)合到一個頁面。
超級菜單式
將菜單折疊，點擊后顯示更多。將菜單分層，一開始只顯示主菜單，可以將不重要的次級功能隱藏，讓頁面更加簡潔。
—— 平鋪 ——
選項卡式
頂部tab或者底部tab，在不同的菜單視圖中切換。類似于web端郵箱的左右分屏，即可以看到列表，又可以看到單條內(nèi)容下的詳情。
how：tab的數(shù)量不宜過多，上限為5個。
底部的tab更適合手指的操作，頂部tab一般層級比底部tab更低。
對于已選擇的tab，應該在視覺上進行強調(diào)提示，讓用戶知道自己選擇了哪一項。
輪盤式
輪播圖的形式，左右滑動常看上一張/下一張。常見于電商APP的商品詳情查看、安裝升級后的引導頁、金剛區(qū)的入口布局，不適合太多的分屏數(shù)量。
陳列館式
以縮略圖的形式顯示內(nèi)容項，讓人快速了解每一項是啥意思，一般在相冊中使用。
how：可以對內(nèi)容進行分組，方便用戶快速定位。
手風琴式/Accordion/擴展面板/樹狀結(jié)構(gòu)/分組折疊
可以折疊/展開的內(nèi)容區(qū)域。一般是針對一組內(nèi)容進行折疊/展開，可以多級嵌套，形成樹形結(jié)構(gòu)的內(nèi)容組織。
規(guī)則#
對復雜區(qū)域進行分組和隱藏。
通常，一次只允許單個內(nèi)容區(qū)域展開；特殊情況，多個內(nèi)容區(qū)域可以同時展開。
02-導航模式（Navigation）
導航模式分為：分層導航、扁平導航、內(nèi)容驅(qū)動或者體驗驅(qū)動導航
分層導航（Hierarchical Navigation）
每屏做一個選擇，直到到達目的地。要去往另一個分支，你需要回退或者重新開始來做出不同的選擇。設置和郵件使用這種導航方式。
類似《界面設計模式》中提到的單窗口深入，在一個單一的窗口中顯示應用程序的每個頁面，層層深入。每次都用新的內(nèi)容來替代當前的內(nèi)容。層級應該盡可能的簡單，避免過于瑣碎冗長，讓用戶失去耐心。
扁平導航（Flat Navigation）
在不同的內(nèi)容目錄之間切換。音樂和?App Store使用這種導航方式。
內(nèi)容驅(qū)動或者體驗驅(qū)動導航（Content-Driven or Experience-Driven Navigation）
在內(nèi)容之間自由穿梭，或者內(nèi)容本身定義了導航。游戲、閱讀、和其它沉浸式的應用一般采用這種導航方式。
一些APP結(jié)合了多種導航方式。例如，一個使用扁平導航的APP可能在每一個目錄中使用分層導航。
Material Design Navigation
導航的方向分為：橫向?qū)Ш?、前進導航、反向?qū)Ш健?/p>
橫向?qū)Ш?/b>即同一層次的內(nèi)容之間水平移動。一般使用導航抽屜、標簽欄/底部導航欄、標簽頁、分段控件、頁面指示器等。
前進導航即觸發(fā)進入下一層或者邏輯順序的下一步，如查看詳情、搜索等等。印版使用按鈕、卡片、列表、鏈接等作為觸發(fā)的入口。
反向?qū)Ш?/b>即返回到上一層次或者時間順序上的上一屏。一般使用系統(tǒng)提供的返回按鈕實現(xiàn)。
原則
總是提供清晰的路徑。應該總是要讓人們知道他們在你APP的哪個位置并且如何到達下一個目的地。不管使用那種導航方式，最重要的是貫穿內(nèi)容的路徑是符合邏輯的、可預測的且容易理解的。一般而言，給人們到達每一屏的唯一路徑。如果他們需要在不同的上下文中查看某一屏內(nèi)容，考慮使用動作面板、警告、氣泡式彈窗、或者模態(tài)視圖。了解更多， see?Action Sheets,?Alerts,?Popovers, and?Modality。
設計一個可以快速輕松訪問內(nèi)容的信息架構(gòu)。以需要最少數(shù)量點擊、輕掃和屏幕數(shù)量的方式來組織你的信息架構(gòu)。
使用觸摸手勢來創(chuàng)造流暢感。讓用戶輕松的在界面間跳轉(zhuǎn)，感受不到阻力。例如，你可以讓人們從屏幕的一側(cè)輕掃來返回上一屏。
使用標準的導航組件。盡可能的，使用標準的導航控件例如頁面控制器、標簽欄、分段控件、表單視圖、集合視圖和分屏視圖。用戶已經(jīng)熟悉了這些控件，他們會很自然的知道玩轉(zhuǎn)你的APP。
使用導航欄來訪問分層內(nèi)容。導航欄的標題可以展示在層級中當前的位置，返回按鈕可以很容易的退回到上一個位置。具體指導, see?Navigation Bars。
使用標簽欄來展示內(nèi)容或功能的同級目錄。無論當前處于哪個位置，標簽欄都可以讓人們在目錄之間快速切換。具體指導，see?Tab Bars。
當你有多頁同樣類型的內(nèi)容時，使用頁面指示器。頁面指示器清晰的表明了可用頁面的數(shù)量以及當前在哪一頁。天氣APP使用頁面指示器展示不同位置的天氣。
03-布局
一、表單布局/信息輸入
上下布局：適合于標簽文字較長或者輸入部分較長。
左右布局-左對齊：信息輸入長短不一，適合于默認填寫后的快速檢驗。
左右布局-右對齊：適合于一項一項的細致填寫。
二、信息展示
上下布局：
適合文字較多的場景。
左右布局：
文字較少，整體對齊。
卡片：
分組展示，適合內(nèi)容較多的場景。分組的方式包括間距+標題、分割線、卡片等形式。
三、選項菜單/工具
在功能選項較多的情況下，要如何放置這些功能，讓用戶可以快速操作，又不會讓整體顯得過于凌亂。
隱藏 —— 收納起來，點擊后可以看到。
視覺上會顯得比較干凈簡約，不會干擾用戶。一般適合于非主要的操作。
懸浮按鈕
懸浮按鈕可以作為多個按鈕的入口。點擊后顯示下一步的選擇。數(shù)量不宜過多。
Action sheet
動作面板/底部卡片，點擊后從底部展開?？梢钥闯墒请[藏起來的按鈕組。
菜單下拉
氣泡、上下文菜單、編輯菜單、下拉菜單等形式，從觸發(fā)的位置展開。
組織 —— 平鋪展示，功能位置的分布
操作上只需點擊一次，更方便。適合于主要操作、數(shù)量不多場景。
CTA按鈕
突出主要操作按鈕，弱化次要按鈕。適合用戶目的、意圖較為明確的場景。
按鈕組
將操作按鈕放到一起，適合于按鈕數(shù)量不多的場景。一般要區(qū)分住操作和次要操作，與操作的對象放置在一起。如iOS向左滑動后的刪除。
底部欄/工具欄
iOS叫工具欄（Toolbars），安卓叫底部欄（App bars: bottom），主要用來放置與當前頁面內(nèi)容相關(guān)的按鈕，在需要的時候出現(xiàn)，在不需要的時候隱藏。
tab切換
標簽欄或標簽頁的形式，橫向切換不同部分，實現(xiàn)同級內(nèi)容的切換。
四、分層組織選擇
信息結(jié)構(gòu)比較復雜時，需要分層組織。讓用戶在上下層級之間前進與后退、在同層級之間互相切換的操作方便無礙。即material design中提到的三種導航的方向：橫向、前進、反向。
分層、文件夾式
單窗口深入的模式，點擊后進入下一層。
級聯(lián)菜單、左右組織樹
通過導航菜單、導航軌道、抽屜菜單等方式，實現(xiàn)同級之間的橫向切換。
上下分層組織樹
利用手風琴的方式，點擊展開/折疊。將下層內(nèi)容與上層內(nèi)容之間結(jié)合展示。減少跳轉(zhuǎn)。適合結(jié)構(gòu)層級較淺的場景。
五、頁面中按鈕位置
頁面中主要操作按鈕的位置。按鈕規(guī)范系列！從四個方面詳解「按鈕位置」的設計方法 - 優(yōu)設網(wǎng) - UISDC
頂部
頂部按鈕的尺寸一般較小，且右上角的位置視覺上更弱、操作上更不便。所以一般適合于需要謹慎操作的場景。
頁面底部
頁面內(nèi)容的下方，適合于需要完整瀏覽的內(nèi)容、內(nèi)容較少的頁面。如閱讀許可協(xié)議后點擊同意。
常駐底部/吸底按鈕
固定在底部，不會因為頁面過長而看不到。在多流程頁面中，各個頁面的按鈕位置保持一致，更加清晰。需要注意的是，鍵盤的彈起會遮擋按鈕，可以視情況考慮按鈕隨鍵盤聯(lián)動。適合于一連串流程中的頁面、讓用戶可以隨時操作的場景。
懸浮按鈕（Floating Action Button）
在頁面中持續(xù)出現(xiàn)，一般是產(chǎn)品的主要功能入口。地圖應用中，將大部分按鈕懸浮，做成按鈕組的形式，也可以實現(xiàn)多按鈕的平鋪展示。
04-動作/手勢
動作和手勢使用戶觸發(fā)、輸入的方式。在不同的場景下，選用合適的方式，可以減少干擾與誤操作，讓信息的輸入更加方便快捷。
點擊
手指點擊，移動端主要操作方式。操作對象一般具有明顯的可點擊性提示，如按鈕、卡片、藍色文字等。與web端類似，分為單擊、雙擊等。
長按
按住一段時間，一般用于觸發(fā)隱藏的功能。如刪除、收藏等。
滑動
利用虛擬空間的無限性，水平方向、垂直方向滑動，如圖片輪播的方式，可以顯示更多的內(nèi)容。一般用于同級內(nèi)容的橫向切換、調(diào)節(jié)音量/亮度等。
捏
兩個手指展開或捏合，一般用戶照片的放大/縮小。
拖拽
選擇對象后拖動到目標區(qū)域，一般用于自定義排序、分類、復制等場景。
旋轉(zhuǎn)設備
設備方向的改變，內(nèi)容會隨著變化。如視頻應用播放過程中，橫屏者自動切換為全屏播放。
搖晃設備
適合于特殊場景而非主流程的交互，如微信的搖一搖。
語音
語音輸入的方式，結(jié)合語音轉(zhuǎn)文字技術(shù)，讓輸入更加便捷。
掃描
一般用于條碼、二維碼的識別，快速輸入的一種方式。
其它
其它的還有一些自定義手勢：如小米的多指下拉截圖、華為的指關(guān)節(jié)截屏等，一般用于特殊場景的快捷操作。需要對用戶進行引導教育。
文章結(jié)構(gòu)
組件庫
Ant Design Mobile | A Mobile Design Specification
Themes - iOS - Human Interface Guidelines - Apple Developer
概述 - Material Design - Material design 中文文檔，指南，翻譯
https://www.material.io/design/introduction#updates
Vant - Mobile UI Components built on Vue
參考資源
Calltoidea - Light up your imagination
Mobile Design Patterns - Pttrns
UI Garage - Daily UI Inspiration & Patterns for Web, Mobile & Tablet.
