在UI界面的設計當中，有很多“小元素”發揮著十分重要的作用。有些元素我們已經司空見慣；有些被設計師們玩兒出了新花樣。在使用了一些產品后，我對這些“小元素”進行了梳理總結。希望其中的一些好的、有趣的設計能對大家有所幫助。
對于“小元素”的這個說法還是有些太籠統，我又把它們分為大致三個部分：
一.提示類元素
二.功能類元素
三.視覺類元素
提示類
“提示類”顧名思義，對于我們有提示作用的或是有引導幫助作用的都可以歸為此類。那么我最先想到的，應該就是讓人又愛又恨的“小紅點”了。
1.徽標??
徽標通俗的叫法就是“小紅點”，一般固定在圖標或是標簽等右上角的位置。它具有非常強的提示作用。強大到有時不想讓它出現。
說起小紅點就不得不提“紅點強迫癥”這個詞。它是現代人的社交網絡依賴癥之一，表現為看到它就不自覺的或是強迫性的點擊它，讓它消失。
導致人們看到“小紅點”就像點開的原因，是因為它的突然出現，破壞了周圍的布局，打破了排版平衡。使某一塊內容變得異常“醒目”。如果想讓“小紅點”在設計中不那么醒目，我們可以通過顏色來淡化它的存在。
徽標的顏色多為紅色。因為紅色足夠醒目且讓用戶能夠警醒。常見的樣式有“小紅點”、“紅點內嵌數字”、“紅點內嵌字符”等樣式。
徽標的尺寸并沒有一個嚴格的規范。“小紅點”在一些主流產品中，尺寸從16px到30px不等。填充字符內容的徽標具體尺寸需視情況而定，最小字號為20px。
顯示的數字最高到“99”。超過了則顯示“99+”或“...”。一些信息或是評論位置的徽標，顯示可以達到四位數的千位甚至更高。
徽標可以出現在多個位置上。標簽欄、導航欄、金剛區、文字標題、頭像等等，均可以發現它的存在。
2. 標簽??
標簽的出現幾率也非常高。常出現在電商、金融、生活娛樂類等產品中。它的主要作用是進行分類或突出重點。比如界面中需要我們區分開商品的屬性；或是對重點商品、新品進行著重提示等，都需要用到標簽。
標簽的樣式非常豐富。底色、邊框、圖標組合；矩形、圓角矩形、異形、標題樣式等等。同時，標簽可以出現在任何地方。首頁、我的頁面、商品詳情頁、搜索頁、客服咨詢頁等等。我們打開淘寶、美團等APP，就可以發現多種樣式的標簽。
顏色方面，還是要以主色和中性色為主。加重提示可選用紅色；突出活力和時尚感可用漸變色。所以這就需要我們根據具體需求和產品屬性來搭配。但使用顏色不可過多，同時還要保持頁面整體配色的平衡。
3. 圖標??
這里我會提到四種主要圖標類型：①“首頁”或“我的頁面”標題前的提示性icon；②新聞或公示模塊左側的標題圖標；③頁面加載圖標；④動態提示icon。
①目前，越來越的主流產品已經放棄了標題前加圖標這樣的設計形式了。取而代之的是簡單粗暴的將標題加粗加大。
在“我的頁面”中還是有很多產品保留了標題前添加提示性icon的設計形式。
而之前出現過的在標題前加豎杠的設計形式在APP端已經基本見不到了。在網頁端還是會時常碰到。個人認為豎杠的設計不僅過時，而且沒有什么實際意義。有點為了裝飾而設計的感覺。在手機端頁面這種寸土寸金的地方，這種意義不大的裝飾直接去掉反而會更好。
這可能也是為什么越來越多的產品不再標題前加icon的原因吧。畢竟，足夠醒目的標題就已經很好的起到提示作用。大標題這種設計形式也是iOS11重點升級點之一。
當然，像一些動漫類或是娛樂類、直播類的產品，增加icon反而會讓頁面更有活力，更有趣味性。還是要根據具體產品而定。
②新聞/公示模塊，在電商、招聘、生活類等產品中經常出現。為了更好的讓用戶注意到，通常的做法是將左側標題進行重新設計。同時，此類標題圖標可以融入產品的品牌基因元素，更好的突出產品特點。
③加載圖標是當網絡速度受限，或頁面內容加載過多等因素出現時的提示性icon。多以小菊花圖標為主。
④動效設計在目前越來越受到人們的重視。這種流暢的表現形式和出色的視覺吸引力受到了很多人們的追捧。我們會發現很多的產品由開始的死板單調，變得活潑豐富起來。這里面動效設計功不可沒。
4.氣泡彈窗??
氣泡出現的場景大致有兩種：一種是新用戶第一次登錄或是更新完畢時。主要起到引導和教學的作用。
第二種是新功能、新產品或新話題推出時，主要作用是提醒和宣傳。
氣泡的樣式并不豐富，多數還是常規的矩形或圓角矩形。配色多是以主色或其他輔助色為主。不過，通過動效的融入，可以使氣泡變得更加吸睛，產生不錯的吸引力。
除此之外還有一種氣泡彈窗是Toast。也就是吐司彈窗。它開始出現在安卓規范當中，是提示彈窗的一種。初始形態是在頁面底部顯示的黑色提示窗。經過演變，即使是在iOS的產品中也出現了類似的設計。形式目前演變成了下拉刷新從上彈出提示，并且有可關閉的樣式。
5.頁面指示器??
頁面指示器就是在banner下方排布的小圓點。會隨著banner進行同步輪播。輪播到當前頁面時，對應的小圓點會有特殊顯示。
頁面指示器的形式不只局限于小圓點。其他的形式包括矩形、異形、數字、延展圖形等等。
同時，頁面指示器還可以和進度條相結合。會讓用戶更加清楚輪播一張圖所消耗的時間。
理想狀態下，最多輪播四到五張banner圖。也就是說頁面指示器的小圓點也最多顯示四到五個。電商類的產品輪播圖會更多一些。
6.導航欄??
安卓導航欄最原本屬于安卓規范當中。目前，很多iOS產品當中也開始使用這種導航欄樣式來進行設計。而原本屬于iOS規范當中的分段選擇器變得不那么常見了。
這種導航欄的優點是除了點擊外，還可以左右滑動進行切換。而且并沒有對導航欄中的選項有過多的數量限制。
導航欄常見的樣式包括文字加線條、底色或品牌圖形等，樣式豐富。
7.音量條??
目前很多產品都將原本彈窗形式的音量顯示，改為固定在頂部的條狀形式。目的是為了不影響用戶的使用體驗。能夠更沉浸的使用產品。
8.按鈕??
這里的按鈕以uber為例。在登錄時，輸入完成手機號下一步的時候，按鈕會變成等待狀態。按鈕與等待演示動效相結合，用流暢的動畫消除了用戶等待時產生的負面情緒。讓整體簡潔的頁面變得充滿活力。
因此，我們在設計按鈕的時候，結合場景，可以添加創意。讓死板的按鈕變得有趣起來。
9.提示性文字??
我們常可以看到在產品中的“我的”頁面中，標題右側會有一行文字提示。有些是單純的提示性文字，而有些則會顯示重要的數據，方便用戶在不點開二級頁面的情況下進行查看。不僅如此，設計師還可以對這類字體進行設計，或是添加圖標來豐富它的設計樣式。
功能類
1.標簽欄??
作為一個基礎控件，位于底部區域的標簽欄已經演化出多種豐富的樣式。
①刷新/返回頂部
瀑布流類的首頁形式，為了方便用戶更新內容。在刷到一定位置后原本的首頁按鈕都會變為刷新狀態。一些產品也將返回頂部一起做到了頁面中。例如馬蜂窩，就將返回頂部按鈕放到了頂部右上角的位置。刷新、返回兩不誤。
②添加按鈕
除此之外，一些具有添加或是上傳功能的按鈕常常被固定在標簽欄中間位置。可以讓用戶第一時間發覺。
這些巧妙的設計不占用過多空間，又能很好的解決用戶遇到的問題，非常方便。
2.懸浮按鈕??
懸浮按鈕最開始屬于安卓規范當中，之后在iOS產品中也被保留了下來。雖然在官方規范中并沒有此類按鈕，但因為他使用起來非常方便，并且國內很多軟件安卓端和iOS端都是使用一套頁面。因此，包括懸浮按鈕等一些共性設計就都被保留了下來，在兩個平臺均可得到使用。
懸浮按鈕不僅僅可以完成點擊等常規操作，還可以作為收藏容器將更多地功能結合在一起。而且位于屏幕右下角，方便用戶使用。
3.頂部擴展內容??
擴展區域是我個人對它的命名，這部分區域在頁面的頂部。因為空間足夠大，所以許多產品可以添加更多的設計想法在里面。比如添加日期或者天氣等。像一些特定的產品會在頂部的區域放置一些特有的功能。比如螞蟻金服的智能助手等。
4.功能性按鈕??
此類按鈕也是非常多見的。比如，導航欄右側或標題欄右側的更多按鈕。它的形式多以三點為主，也有文字、陣列點燈樣式。
三道杠icon多是抽屜導航代表圖形；箭頭基本都是下一頁或返回的固定圖標形式。以上圖標均被廣泛使用，已經成為了用戶的一種固有認識。
因此，我們在設計時可以在此基礎上進行升級或創意性優化。切不可過分顛覆他們，不然會增加用戶的學習成本。
5.下拉/上劃??
①下拉刷新功能已經成為了一種默認操作。根據產品的屬性定位，我們會見到各種不同風格或是設計元素的下拉動效。設計師可以根據品牌延展元素，融入更多的想法，讓頁面變得更有趣。
②拿點融投資來舉例，上劃到頁面底部會出現寶箱圖案。隨著我們上劃的幅度，寶箱會打開出現寶物和品牌形象。上劃到底則直接跳轉到另一頁面。這種設計讓我對頁面底部的空間有了更多的想法。
6.視頻進度條??
視頻進度條放置在視頻底部，是視頻類產品不可或缺的重要控件。當視頻播放時會自動隱藏。除此之外，進度條位置上還可以集成其他功能。比如全屏、點贊、收藏、彈幕開關等。
嗶哩嗶哩的視頻進度條：當拖拽控制按鈕時，小電視icon會隨著我們拖拽的方向而改變。雖然看似是很不起眼的設計，但在視頻區域也可以左右滑動調整進度時，進度條的小icon就能很好的展示出來，充分體現其趣味性。
視覺類
雖然說是視覺類的設計，但還是要盡量避免加入過多無用元素，不能為了裝飾而設計。要結合自身產品，滿足視覺平衡，要達到情感化設計的目的。
1.缺省頁??
通常狀態是，當前頁面沒有內容或無網絡狀態下出現的頁面。由于此頁面沒有內容，設計師發揮的空間就變得很大。根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容。
我想應該沒有人喜歡看到缺少內容的頁面，這會給用戶心理造成很大的落差。非常影響體驗。因此，缺省頁就變得格外重要。如果設計得當，非但不會影響體驗，反而會讓用戶喜歡上它。
除了視覺方面的設計，缺省頁也可以添加刷新按鈕，在功能層面進行完善。
2.頭像??
現在，很多的產品已經放棄了死板的默認頭像，給用戶更多的選擇。比如京東和小贏理財，就提供給用戶多種頭像選擇。
這種增加默認頭像的做法雖然是錦上添花，但這種情感化的設計不僅在視覺上充滿新意；同時，也讓產品更加有趣。
3.輔助元素??
移動端UI都是遵從相對應的規范來進行設計的，因此大部分產品都不太會在這種寸土寸金的地方放置一些硬核的純裝飾性元素。不過，設計師可以在卡片或是瓷片區域上加入自己的想法。
卡片/瓷片的布局多數是左字右圖，而此類輔助元素并不僅僅是為了突出視覺上的設計。更主要的是保持卡片/瓷片的結構平衡，或是填充多于的留白。讓整體頁面在視覺上更加飽滿吸睛。
4.切換動效??
①標簽欄動效
通過動效的使用，標簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調。
②導航欄動效
總結??
以上，就是我個人對手機移動端上關于“小元素”的總結。在整理期間我還發現了其他有意思的設計，只不過它們并不屬于“小”的這個屬性，因此沒有放進文章中。在體驗產品的過程里，一些有趣的不錯的設計想法，會對我之后的作品、工作項目帶來很大的啟發。我也希望能夠有更多的朋友可以開始整理并分享出來。
