1.寫在前面的話
這本交互設(shè)計書籍是一位產(chǎn)品大V安利的，本書介紹了很多UI組件的很多模式，應(yīng)該算是比較全面的。非常適合剛?cè)腴T的交互設(shè)計師、UI設(shè)計師、產(chǎn)品經(jīng)理去閱讀。而且作為工具書，看完之后還可以隨時翻閱。
2.頁面類型
app的頁面類型大致分為五種：
（1）啟動界面：應(yīng)用程序在啟動后若無法立即提供用戶使用，則應(yīng)顯示一個應(yīng)用啟動界面。例如微信在啟動時，出現(xiàn)的地球畫面的頁面，就是啟動界面。
（2）頂層界面：用于顯示各種各樣的信息，并通過導(dǎo)航功能將其他界面關(guān)聯(lián)起來。例如淘寶、京東的首頁，就是屬于頂層界面。
（3）一覽界面：用于連續(xù)顯示所有相關(guān)內(nèi)容，是一種最為常用的界面模式。例如搜索結(jié)果頁、商品列表頁、時間軸頁面，都屬于一覽界面。
（4）詳細(xì)信息界面：用于顯示特定條目的詳細(xì)信息，在界面中的位置較深。例如某個確定條目的搜索詳情、商品詳情頁、文章詳情頁。
（5）輸入/操作界面：用戶可以在輸入/操作界面中執(zhí)行特定的操作。例如注冊/登錄界面、發(fā)帖界面、用戶信息填寫界面。
3.導(dǎo)航控件
導(dǎo)航控件大致分為三類：
（1）標(biāo)簽式導(dǎo)航：一般用在頂層界面提供導(dǎo)航功能，或在各個頁面中提供跳轉(zhuǎn)至其他頁面的導(dǎo)航。例如現(xiàn)在大多數(shù)app采用的底部標(biāo)簽導(dǎo)航，今日頭條首頁的滾動標(biāo)簽導(dǎo)航。
（2）菜單式導(dǎo)航：主要模式有下拉式菜單、深入式菜單、折疊式菜單。菜單式導(dǎo)航主要用在pc端比較多。
（3）儀表盤導(dǎo)航：以一種網(wǎng)格形式排列圖標(biāo)及文本標(biāo)簽的UI組件。例如新浪微博發(fā)動態(tài)時，彈出的導(dǎo)航方式，就是儀表盤導(dǎo)航。
4.列表
列表一般用來顯示大量信息。列表模式有五種：
（1）垂直列表：用于縱向羅列多個條目，是一種最基本的列表UI組件。垂直列表以文本為主，圖片大多作為輔助辨認(rèn)。例如很多新聞客戶端的首頁，就是用的垂直列表。
（2）網(wǎng)格列表：以類似圍棋棋盤的網(wǎng)格形式羅列條目，它的條目元素是圖像或圖像與文本的組合。例如小紅書首頁或者淘寶的商品列表，就是用的網(wǎng)格列表。
（3）輪播面板：通常以橫向方式列出圖片、數(shù)據(jù)及導(dǎo)航控件等各種類型的條目。輪播面板可以將暫時不需要的信息隱藏在屏幕兩側(cè)之外，因此能充分利用界面空間。例如豆瓣的書影音模塊里，就用到了輪播面板。還有探探首頁的滑動表達(dá)是否喜歡的功能，也有用到。
（4）時間軸：以時間為軸羅列條目。設(shè)計師在使用時間軸時，將主要以何時、何人、何事這三點為軸心，顯示用戶之間的交流情況。例如微信朋友圈、新浪微博首頁、知乎首頁，都是屬于時間軸。另外，收發(fā)消息頁面、評論列表是屬于消息模式的時間軸。
（5）日歷：日期列表通常能以一天24小時，1周7天，1個月28-30天這三種方式管理列表中的信息。
5.通知與消息
（1）模態(tài)消息：用于向用戶傳遞消息，它的特點是會在界面中央疊加顯示一個對話框。如果設(shè)計師希望顯示警告消息、重要信息、或讓用戶確認(rèn)需謹(jǐn)慎處理的操作，模態(tài)消息將非常有效。例如執(zhí)行刪除操作，系統(tǒng)會彈出對話框；ios應(yīng)用中，需要用戶授權(quán)的操作，也會彈出對話框。
（2）無模態(tài)消息：與模態(tài)消息不同，無模態(tài)消息不會妨礙用戶對原有界面進(jìn)行操作。Android中又叫toast消息。
（3）塊消息：塊消息可以被插入原有的界面中，作為界面的一部分與其他UI一起顯示。例如登錄/注冊時，如果手機(jī)號碼輸入錯誤，就經(jīng)常用到塊消息。
（4）角標(biāo)：角標(biāo)通過數(shù)字或簡短的標(biāo)簽文本來顯示。例如app圖標(biāo)上的紅色數(shù)字、微信消息列表里的紅點。
（5）氣泡消息：如果需要針對界面中的一部分內(nèi)容向用戶發(fā)出通知，或顯示該功能的補(bǔ)充說明，則可以使用氣泡消息。例如網(wǎng)易云音樂在歌曲播放頁面，播放一段時間后，會彈出引導(dǎo)用戶分享歌曲的氣泡消息。
6.寫在后面的話
終于碼完字了，以上寫出來的，都是比較基礎(chǔ)的UI組件。知道哪些組件，并且知道使用情景之后，最重要的是在實踐中，選擇最合適、體驗最好的組件。學(xué)以致用，把知識轉(zhuǎn)化為認(rèn)知，才是讀書的意義。
