這里分享一些自己平時(shí)看到的基礎(chǔ)知識(shí)進(jìn)行總結(jié)。此文先只簡(jiǎn)單介紹UI中的組件，網(wǎng)格模式 及格式塔理論。希望對(duì)大家有幫助~

組件

組件分為欄，內(nèi)容視圖，控件，臨時(shí)視圖。

欄：狀態(tài)欄---透明的，大部分出現(xiàn)在屏幕頂部。顯示手機(jī)狀態(tài)：信號(hào)，電量，時(shí)間等部分（但是游戲，工具等沉浸式APP可以沒有狀態(tài)欄）

導(dǎo)航欄---屬于狀態(tài)欄下方的欄

工具欄---工具欄不具有導(dǎo)航作用，它為用戶提供可以控制當(dāng)前屏幕內(nèi)容的控件。

標(biāo)簽欄---標(biāo)簽導(dǎo)航位于頁面底部，使用標(biāo)簽欄是根據(jù)信息架構(gòu)來定的。

搜索欄---移動(dòng)端的搜索往往都是跳轉(zhuǎn)至單獨(dú)的搜索頁面，根據(jù)時(shí)間順序可以分為三個(gè)階段：搜索前、搜索輸入中、搜索完成后。

內(nèi)容視圖：分為活動(dòng)視圖，集合視圖，地圖視圖，模態(tài)視圖，滾動(dòng)視圖，拆分視圖，控制器視圖，列表視圖（平行視圖，分組視圖），文本視圖，Web視圖，以下會(huì)用例子的形式進(jìn)行分析。

控件：根據(jù)需求不同，控件可以是完整的功能模塊，也可以是基本元素的擴(kuò)展或組合，例如時(shí)間選擇器或者亮度的滑塊等。其中分段控件指用戶在一屏內(nèi)能夠查到不同分類的內(nèi)容，而不需要切換到其他屏幕。

臨時(shí)視圖：警告框---警告框向用戶提示會(huì)影響他們使用應(yīng)用或設(shè)備的重要信息。

操作菜單---操作菜單顯示與用戶所發(fā)起的任務(wù)直接相關(guān)的一系列選項(xiàng)。

模態(tài)視圖---是一個(gè)以模態(tài)形式展現(xiàn)的視圖，它為當(dāng)前任務(wù)或情境提供自包含（self-contained）的功能。

以下是對(duì)一款手機(jī)APP進(jìn)行組件的分析，如果有不同見解的歡迎一起探討~

網(wǎng)格模式

問題：遇到呈現(xiàn)一系列信息，大多數(shù)或者所有信息都由圖片構(gòu)成，可用于選擇的時(shí)候可以用網(wǎng)格模式。

解決方法：陳列顯示一組圖片，基于設(shè)備顯示范圍限制，一次只能顯示一部分圖片。

變形處理：1.信息的呈現(xiàn)和組織沿著一個(gè)軸移動(dòng)（獲得焦點(diǎn)的條目上，同時(shí)顯示如標(biāo)題和日期等文本標(biāo)簽）2.把圖片處理排列在平面上，背景可變化（如，桌面）3.在加載和顯示滾動(dòng)動(dòng)效時(shí)使用三維效果4.將縮略圖平鋪在紙或者球面上，類似“無線區(qū)域”模式

讓我們來舉個(gè)栗子~

交互細(xì)節(jié)：網(wǎng)格中的圖片獲得焦點(diǎn)時(shí)可能會(huì)使用更多視覺效果。例如：1.稍微放大一點(diǎn)顯示更多細(xì)節(jié)，2.滾動(dòng)操作（觸摸手勢(shì)，方向鍵或者實(shí)時(shí)動(dòng)態(tài)）

呈現(xiàn)細(xì)節(jié)：三維模擬效果，彈出框，幻燈片，位置跳轉(zhuǎn)，分頁，內(nèi)部跳轉(zhuǎn)，走馬燈，內(nèi)容堆。

錯(cuò)誤模式：1.謹(jǐn)慎選擇操作所對(duì)應(yīng)的行為（選擇定義的太簡(jiǎn)單，導(dǎo)致關(guān)聯(lián)行為 等操作變得難以操作）2.不要讓顯示過于復(fù)雜（例如，二維球面網(wǎng)格）3.只有足夠的屏幕空間和分辨率來呈現(xiàn)縮略圖的情況下來使用“網(wǎng)格”模式4.實(shí)時(shí)的滾動(dòng)效果不能實(shí)現(xiàn)，避免使用“網(wǎng)格模式”5.確保在圖片與圖片之間留下足夠間隙。

格式塔理論：

綜合：在現(xiàn)實(shí)世界中，各種格式塔原理并不是孤立的，而是共同起作用的。在工作中用每一條原理來考量各個(gè)設(shè)計(jì)元素之間的關(guān)系是否符合設(shè)計(jì)初衷。（格式塔原理參考【美】胡伯，【美】伯克曼《移動(dòng)應(yīng)用界面設(shè)計(jì)》）