這里分享一些自己平時看到的基礎知識進行總結木西。此文先只簡單介紹UI中的組件，網(wǎng)格模式 及格式塔理論随静。希望對大家有幫助~
組件
組件分為欄八千，內(nèi)容視圖，控件燎猛，臨時視圖恋捆。
欄：狀態(tài)欄---透明的，大部分出現(xiàn)在屏幕頂部重绷。顯示手機狀態(tài)：信號沸停，電量，時間等部分（但是游戲昭卓，工具等沉浸式APP可以沒有狀態(tài)欄）
導航欄---屬于狀態(tài)欄下方的欄
工具欄---工具欄不具有導航作用愤钾，它為用戶提供可以控制當前屏幕內(nèi)容的控件瘟滨。
標簽欄---標簽導航位于頁面底部膳殷，使用標簽欄是根據(jù)信息架構來定的棵磷。
搜索欄---移動端的搜索往往都是跳轉至單獨的搜索頁面，根據(jù)時間順序可以分為三個階段：搜索前吵聪、搜索輸入中劲装、搜索完成后胧沫。
內(nèi)容視圖：分為活動視圖，集合視圖占业，地圖視圖绒怨，模態(tài)視圖，滾動視圖谦疾，拆分視圖南蹂，控制器視圖，列表視圖（平行視圖念恍，分組視圖）六剥，文本視圖，Web視圖峰伙，以下會用例子的形式進行分析疗疟。
控件：根據(jù)需求不同，控件可以是完整的功能模塊瞳氓，也可以是基本元素的擴展或組合策彤，例如時間選擇器或者亮度的滑塊等。其中分段控件指用戶在一屏內(nèi)能夠查到不同分類的內(nèi)容匣摘，而不需要切換到其他屏幕店诗。
臨時視圖：警告框---警告框向用戶提示會影響他們使用應用或設備的重要信息。
操作菜單---操作菜單顯示與用戶所發(fā)起的任務直接相關的一系列選項音榜。
模態(tài)視圖---是一個以模態(tài)形式展現(xiàn)的視圖庞瘸，它為當前任務或情境提供自包含（self-contained）的功能。
以下是對一款手機APP進行組件的分析赠叼，如果有不同見解的歡迎一起探討~
網(wǎng)格模式
問題：遇到呈現(xiàn)一系列信息擦囊，大多數(shù)或者所有信息都由圖片構成，可用于選擇的時候可以用網(wǎng)格模式梅割。
解決方法：陳列顯示一組圖片霜第，基于設備顯示范圍限制，一次只能顯示一部分圖片户辞。
變形處理：1.信息的呈現(xiàn)和組織沿著一個軸移動（獲得焦點的條目上，同時顯示如標題和日期等文本標簽）2.把圖片處理排列在平面上癞谒，背景可變化（如底燎，桌面）3.在加載和顯示滾動動效時使用三維效果4.將縮略圖平鋪在紙或者球面上刃榨，類似“無線區(qū)域”模式
讓我們來舉個栗子~
交互細節(jié)：網(wǎng)格中的圖片獲得焦點時可能會使用更多視覺效果。例如：1.稍微放大一點顯示更多細節(jié)双仍，2.滾動操作（觸摸手勢枢希，方向鍵或者實時動態(tài)）
呈現(xiàn)細節(jié)：三維模擬效果，彈出框朱沃，幻燈片苞轿，位置跳轉，分頁逗物，內(nèi)部跳轉搬卒，走馬燈，內(nèi)容堆翎卓。
錯誤模式：1.謹慎選擇操作所對應的行為（選擇定義的太簡單契邀，導致關聯(lián)行為 等操作變得難以操作）2.不要讓顯示過于復雜（例如，二維球面網(wǎng)格）3.只有足夠的屏幕空間和分辨率來呈現(xiàn)縮略圖的情況下來使用“網(wǎng)格”模式4.實時的滾動效果不能實現(xiàn)失暴，避免使用“網(wǎng)格模式”5.確保在圖片與圖片之間留下足夠間隙坯门。
格式塔理論：
綜合：在現(xiàn)實世界中，各種格式塔原理并不是孤立的逗扒，而是共同起作用的古戴。在工作中用每一條原理來考量各個設計元素之間的關系是否符合設計初衷。（格式塔原理參考【美】胡伯矩肩，【美】伯克曼《移動應用界面設計》）
