1. 界面中的設計細節
在用戶使用APP的第一直觀感受，便是我們所設計的ui界面，所以界面的信息閱讀的舒適感、顏色配色是否合理都是在第一時間直接的傳遞給用戶，我們在界面這塊需要注意的設計細節：1.用戶的閱讀效率 2.視覺舒適度 3.產品品質感。
1.10 用戶閱讀效率
在界面設計中，界面能否準確的將信息傳達給用戶,讓用戶在使用產品的過程中對信息的接受比較快速，所以界面的信息呈現的清晰度是設計師必備的能力，也是基礎能力，我們通過細節處的把控，讓設計助力用戶對界面信息的理解，也許我們下的心思用戶可能不會注意，但是它確確實實起到了作用，關于提升用戶的閱讀效率，我們可以從以下幾方面去入手：1.視覺降噪 2.視覺聚焦 3.容器整合。
1.11 視覺降噪
要讓用戶能清晰的理解我們的產品的第一步是需要整理界面中信息，把干擾用戶的信息都要進行處理，關于視覺降噪我們可以入手的細節有：1.弱化小面積色彩 2.減少次要對比 3.整合半透明 4.弱化分隔 5.元素圖形化。
（1）弱化小面積色彩
小面積的色彩我們在視覺上會將他看作為點，當點在界面中比較多的時候，會將用戶的視線分散，給用戶閱讀上造成不好體驗，所以我們在設計界面中的標簽或者有圖標的顏色的區分的時候，我們盡量要控制顏色的種類，不宜太多，另外如果帶顏色的小標簽也會給用戶一種是按鈕的心理暗示，所以，我們在設計中需要考慮到用戶的使用場景和表意。
（2）減少次要信息對比
在APP中會有很多復用的板塊以及功能相似的板塊，我們盡量需要讓他們去保持統一，比如像feed流這樣通用的樣式，只要有差不多的feed列表出現，我們需要在通用組件里去調用這個feed列表，其次是我們在每個列表和卡片中有不同種類的信息字段，并不是每次出現新的信息我們都要在樣式上作出區分，我們需要盡量的衡量表意和層次，盡量讓字段文字能保持統一，從而提升閱讀的舒適感。
（3）整合半透明
一般的半透明浮層都是為了區分頁面的層級，例如在支付時候，彈窗的半透明的選項卡，這些在視覺的Z軸的層級都是最高的，優點是可以強化浮層與底部的關聯性，缺點是會使得視覺上不夠整齊，所以當功能層面關聯性不強的時候，我們盡量不要去使用半透明的設計形式，所以半透明的浮層通常會用戶一些輔助的流程和體量比較好的任務型頁面，這樣的會讓交互效率和層級都是比較清晰。
（4）弱化分隔
界面的設計都是以板塊去區分每個功能層級模塊的不一樣，所以合理的設計分隔的樣式對于設計師也是一種細節處的考慮。我們在分割的重要層級也是有區分的，分割層級最高的是卡片分割，其次是分割條，在其次就是分割線，而分割線也有種，一種是通欄的分割線，另外一種是不通欄的分割線，所以分割線的層級區分是通欄的高于不通欄的分割線，還有一種情況是通過間距（留白）來區分層級，一般是通過留白沒辦法去區分頁面層級的時候，我們才會考慮用分割線來區分。
①點線面的合理運用
在APP界面中，也會有點線面的區別，一般文字我們會將它看為點，分割線是線，圖片我們會把它看為面，所以一般情況下，如果當我們設計界面的時候，當點太多的時候，我們需要用線來進行整合，所以界面中點和點（文字和文字之間）直接是需要用線來分隔的，而圖片和圖片直接，我們通常用間距來表示，所以圖片和圖片直接一半不會使用分割線。
隨著APP的普及開來，我們用戶對信息分割處理的認知已經升級，現在的分割也是越來越弱，而當一個列表有文字和頭像一起出現的時候，分割線往往也都在文字部分出現，因為頭像是圖片，是一個面，文字是點，面是不需要線去分割的，而文字卻需要分割線去分割。
②狀態提升線需點到為止
我們現在的APP主要目的是傳達內容本身，所以為了讓用戶更專注于內容的閱讀，所以一般界面中的狀態的提升線的意義是為了讓用戶去了解當前所處界面的層級和狀態。以前在做設計的時候，會習慣將提升線做的比較長，但是隨著設計趨勢的發展，人們習慣了短而精致的提升線，所以，過長或者過粗的提示線在當前的設計審美下會成為影響界面美感的因素了。
（5）元素形狀化
我們在APP中看到一個陌生的形狀的時候，這個會在界面中形成視覺噪音，“人們在觀察熟悉的視覺形象時，會把不完整的局部形象“作一個整體的形象來感知，這種知覺上的結束，稱之為閉合。如果局部形象過于陌生或者簡略，則不會產生整體閉合聯想，這時大腦會產生負面體驗”。
所以我們在界面中的元素擺放通常會將它們擺放成人們生活中比較常見的形狀，便于用戶去聯想，來提升用戶的閱讀效率。
1.12 視覺聚焦
在用戶打開APP去瀏覽的時候，在沒有干擾的情況下，用戶是根據自己的喜好去瀏覽頁面，用戶對板塊內容的偏好決定用戶注意力的所在之處，更多的時候，我們想要用戶根據我們設定的瀏覽路徑去瀏覽，我們就需要在設計的時候給用戶埋下“陷阱”。關于設計聚焦，我們可以從以下三個角度上入手：一.焦點放大 ， 二. 瀏覽形式的選擇 三. 對齊基線。
焦點放大
在提升用戶閱讀效率的設計中，比較重要的就是主次要分明，將需要讓用戶了解到重要信息需要放大，讓用戶的視覺動線有落地點，所以關于設計焦點放大我們可以從以下三個角度上入手：①視覺中的“席克海曼定律”、②增加視覺上的對比。
① 視覺中的“席克海曼定律”
我們都知道席克定律吧！給予用戶的選擇越多，用戶做出決定的時間就越長。在APP設計和頁面設計的時候也是一樣的，當用戶進入頁面后，我們的視覺動線的排列也可以基于席克定律，放大想要讓用戶關注的信息點，其他輔助信息可以稍微小點，讓用戶可以直觀的區分去主次的層級，讓用戶帶有預期性的閱讀，可以提升用戶的瀏覽效率。
自從ios11之后，大字重的風格就大行其道了，越來越多的產品開始采用大字重的對比風格，目的也是為了讓用戶明確自己瀏覽的頁面，然后帶著目標在繼續往下去看。那為什么大字重的風格會流行呢？
- 增加視覺上的對比
對比是設計美感的來源。我們在以前做Ui設計的時候，最小的字號大多數都還是11pt,最大的字重是20pt左右，而現在我們在看看，由于蘋果ios大字重風格的影響，標題的引入大字重風格后，最大的字號提升至32pt，有的設置于到了34pt，由于最大的字號上限提升了。我們在12-34pt之間可以選擇的字號就比較多了，很明顯這種強烈而又低頻率的對比從視覺上就更具層次了。
- 增加字號的選擇范圍
以前頁面導航文字較小時，板塊標題以及列表標題也都相對較小，假如導航文字大小為18pt,那么如果頁面內的板塊標題為20pt,就會顯得比較突兀，因為視覺上會感覺壓不住，層級較為混亂?，F在由于最大的字號變大了，我們可以選用的字號就變多了，方便了視覺層級上的對比。
② 瀏覽形式的選擇
UI界面的排版往往需要考慮到不同字段的重要層級而去采用不同的設計樣式。由于我們很多APP的品類的不同，每個產品都很難遵循常規頁面布局來設計。盡管沒有一種布局方法適合所有目的，但回到設計的基礎上并理解諸如“ F”和“ Z”之類的視覺模式可以幫助簡化產品布局，并使產品能夠更有效地與用戶進行交流。
- F型瀏覽模式
F模式是一種簡單的布局，旨在根據根深蒂固的人類行為引導用戶的眼睛查看您希望他們看到的信息。在這種情況下，F模式植根于我們的閱讀方式“從左至右”。
F模式就是指，用戶通常會沿著左側重直瀏覽而下，先去尋找 文章中每個段落開頭的興趣點，這時，如果用戶發現了他喜 歡的，他就會從這里開始水平線方向的閱讀。
- Z型瀏覽模式
Z型瀏覽模式模式相似，因為它遵循用戶的眼睛從左到右然后再向下的移動，但是當使用較少的內容時，路徑會簡化為鋸齒形。下面的示例演示了大型設計元素（而不是文本塊）如何將用戶從左上方的徽標引導到右上方的CTA，然后向下引導至下一個主要設計元素。
Z模式的瀏覽模式在于用戶首先關注的頁頭水平方向上的內 容。當視線抵達底部時，又遵循著從左到右的習慣模式，重復再水平掃視頁尾的最底部的內容。
③ 文字的對齊基線
通常我們在設計界面的時候，在文本需要對齊的時候，不需要強制性的與列表最邊緣對齊，并且當文字出現兩列時，需要設計師主動控制第二列視覺起點，保證符合視覺對齊基線。而在有輸入的表單的標題的長短不一致的時候，我們也是歸檔一端的對其基線，來穩定基本的視覺舒服感。
1.13 容器收納
我們每個APP都會承載大量文字、圖片、視頻的各種操作控件，UI設計師的職責便是將他們按照美的形式來排版設計和歸類，其中歸類信息承擔的責任便是用戶對信息的理解和吸收，所以，這是我們不可忽視的一步。關于容器收納我們可以通過以下設計策略進行：一.接近性原則歸納法，二.卡片既是容器，三.同屬性板塊整合。
（1）接近性原則歸納法
單個視覺元素之間無限接近，視覺上會形成一個較大的整體。距離近的單個視覺元素會溶為一個整體，而單個視覺元素的個性會減弱。如果相關的元素不夠緊湊，用戶瀏覽時就需要根據內容進行主觀上的判斷，降低閱讀效率，所以在設計的時候，我們盡量要將相關聯的元素靠的比較近，不相關的元素隔的比較遠。
（2）卡片既是容器
當產品中的圖標字段和文字和字段比較多的時候，我們想要將他們有序的區別開，且不會很凌亂，這個時候我們可以考慮用卡片的來分隔頁面，這樣板塊與板塊直接會更加清晰明朗，而且列表中的信息比較多的時候，通常是采用卡片的形式進行劃分，讓界面看起來更為整潔。
（3）同屬性板塊整合
我們用戶在同一個板塊看到的相關的元素和列表的時候，我們潛意識會將他們認為他們是有關聯的，所以，為了避免用戶出現認知斷層，我們盡量要將界面中不相關的元素不要放在一起，不然會影響用戶在使用過程中對自己信息的判斷。
1.20 視覺舒適度
視覺的舒適度是用戶對于產品比較直觀的感覺，它在于我們設計對產品顏色的把控、圖標的細節以及其他細節方面的處理。關于視覺舒適度我們可以通過以下設計策略進行：1.色彩的協調感，2.圖形體現細節。
1.21 色彩的協調感
我們產品中一般所包含的顏色的種類會比較多，而協調感是人類生理上和心理安全感的需求，也是受眾時間持久閱讀的色彩保障。關于色彩的協調感我們可以通過以下設計策略進行：一.品牌色的延續，二.讓配色有規律，三.紋理解決配色的極端場景。
（1）品牌色的延展
我們生活比較常見的黑色，除了將眼睛閉上，一般不會有純黑的顏色，純黑色會給與人一種比較悶的感受，比如黑色的夜空不會是純黑色的，黑色的電腦顯示器也不是純黑色的，顯示器上我們去瀏覽的字體，也不會給我們純黑色的的。
所以我們在產品中對黑色的文字的處理也不應該去選用純黑的，純黑的色彩的選用會給我們用戶的視覺來一次斷層的處理，感覺這個顏色會比較突兀，所以，我們較早之前為了避免純黑色文字的出現會采用“高級灰”的文字色彩，即在純黑色上偏灰色的色相，隨著用戶體驗設計的水漲船高，我們現在為了避免文字出現比較純的黑色一般會黑色上往自己產品的主色調去偏移，這樣既不會出現純黑色的不好體驗，也可以對自家產品色的一個顏色，提升對品牌的感知度。
（2）讓配色有規律
一般在我們APP產品的配色中，讓人感覺配色不協調因素主要有兩個，一個是色彩選用的過多和過雜，會讓人感覺顏色的突然出現會比較突兀，第二個是頁面中的色彩缺少關聯性，讓用戶看起來哪個顏色都是新出現的，使用起碼比較容易在當前的產品跳出，感覺進入了一個全新的產品。
所以我們在產品中是色彩的選用，盡量定好一組常用的色彩，然后便可以在界面中的圖標、插畫中去復用，提升色彩在產品中的規律，讓色彩在頁面中能有呼應。
（3）紋理解決配色的極端場景
我們在日常的設計工作的交接過程中，經常會聽到領導這樣的說，“這個背景配色太單薄了，不夠豐滿”這樣的言語，這個時候我們可以采用點綴的紋理來裝飾，通過使用同類色來增加點綴的元素從而讓視覺上更加協調，來增加產品的通透感，使得我們產品的搭配呈現上會更加的立體。
1.22 圖形體現細節
圖形體現細節不是說我這個圖形在畫的時間有多長，而是你的思考點需要深，有些地方是別人想不到的，圖形體現細節我們思考的點是將圖標的設計流程化，標準化。
圖標設計的流程化
圖標在我們在界面中占有舉足輕重的地位，它花費的時間是僅次于我們運營插畫的設計，所以我們需要花心思做思考，去設計，圖標的風格也會帶領界面的風格的走向，所以，圖標的設計也是ui設計師的基本功。
圖標設計有科學的流程，每一次產品中圖標的迭代改變圖標都是經過千錘百煉的，在設計圖標的過程中，有一套科學的流程，我們在提案講訴的過程中，會更加人信服。
- 窮舉關鍵詞
我們在設計圖標的過程中，一個圖標可以代表很多意思，我們怎么可以找出最合適當前產品表意的關鍵詞呢？這個時候我們就需要用到窮舉關鍵詞，將能想到的關鍵詞都列出來，例如我們需要去設計一款租房類的APP，里面有一個“意見反饋”的圖標，這個圖標比較常見，能傳遞這種意思的圖標也有很多，我們需要用窮舉關鍵詞將他們都列出來。
- 圖標設計
當窮舉完圖標表意后，需要列出最佳的詞語，我們需要根據用戶在生活中比較常見的圖片或者類似的圖標進行造型提取，然后就是完善顏色和細節，再其次就是要保證其他圖標在設計中也需要有相同的元素，保證圖標的一致性。
- 用戶測試
用戶測試是需要確定在我們設計的圖標中去選擇一個最能傳遞當前表意的圖標，可以是自己公司其他部門的人，，例如程序員或者銷售部，也可以邀請用戶來參加，需要說出選擇當前圖標的理由。
- 規范制定
當圖標確定后，我們應該對圖標的細節部分進行復盤，保證以后新增或者迭代過程中，有一個可以衡量的標尺，方便團隊協助和復盤設計過程。
1.30 產品品質感
在設計中，如何可以做到產品品質感高級呢？這是我們經常會遇到的問題，其實高級感可以理解為一種可以傳遞感染力的設計，那么哪些界面中設計元素會影響人呢？例如我們的色彩等。另一種高級感就是Dieter Rams(迪特?拉姆斯)在“設計十戒”中提到的“好的設計是盡可能是無設計”，我們可以理解為，在設計中我們需要克制，讓產品統一且簡潔。所以我們產品的品質感可以從以下兩個策略入手：一.界面中的相同與區分 ，二.品牌融入
1.31 界面中的相同與區分
（1）區分相似和相同
我們在生活中，有些花費了很長時間和精力去做的品牌在人們心智中早已建立了，例如，茅臺的包裝早已經深入人心，但是最近有一個奶茶品牌山寨了茅臺的包裝，就會讓人感覺很廉價，像是山寨的。
在我們的產品設計中，如果兩個功能不一樣，但是意思相近，那我們所需要用到的圖標要絕對的不一樣，避免用戶誤解功能，用戶在心理上可能會把它們歸類為一個功能，如果我們要區分開，要很明確的區分，不會有18和17字號的對比。
（2）定義產品的角色性格
一般工作時間比較長的同學，都會有這樣的困惑，每天就是原型美化工，找不到自己的價值，特別是原型和競品的差不多的時候，那我們怎么去創新呢？我們可以思考這樣的一個問題，我們日常生活中的桌子，店內顯示器或者汽車，也都是有固定的樣式，沒人會把汽車的輪子做成方的，方向盤做成三角形的，所以，我們做的APP都是用戶日常生活中的工具，是沒必要做顛覆性的創新的 ，在某些細節做創新，例如寶馬的車燈，凱迪拉克的鉆石切割工藝。
所以，我們UI設計的創新，絕對也不是在功能上做出差異化，也是需要在細節處體現我們的品牌，怎么設計讓我們的產品在打開后看起來和別人不一樣，但是又不會影響使用，這個時候，我們要把產品都可以看作是一個有意識的生命，我們將產品想象成服務者，為我們的用戶去服務，產品有自己獨立的性格，行為動作，我們將這些代入到產品的每一個細節中。
例如我們常用的美團外賣，我們想要去定義它的設計風格，首先要用性格孵化模型去定義產品的性格，我們要通過我們用戶的主要目標用戶群去定義產品的性格，將它想象成一個具體的角色，然后具體落地成一個可以代表產品的ip形象，我們產品的設計、文案都應符合它的定義。
1.32 品牌的延展
除了產品的性格外，我們的產品都基本會有自己的產品線形象或者產品的LOGO，我們設計師可以做的便是放大產品LOGO的記憶點，然后在產品的每個角落中去體驗，這樣也可以極大的提升產品的品質感。
比如，我們的京東的機械狗隨著產品的迭代，慢慢的變胖了，我們可以發現，除了京東的吉祥物發生了變化之外，京東的圖標也是慢慢的變得比較圓潤且通透，仿佛也是在呼應著產品的變化，京東吉祥物狗的微笑也是被提煉到產品的每一個細節中，這種彷佛產品陪伴著用戶在成長的變化，也是一種潤物細無聲的品質感。
1.33 口語化文案
我們可以將我們產品中的提示文案可以想象成產品的ip形象在對用戶講話，在融入產品形象的性格因素，賦予了產品的生命力，同時，體驗層也可以極大提升品質感。
2. 交互中的細節
一個成功的產品，除了需要有好看的外部，實用的細節也是比較重要的，一個產品的交互決定了這個產品在使用過程中的流暢度，交互中的細節便是我們今天要說的微交互，一個好的微交互在使用過程中，可以給用戶留下深刻的印象，我們作為一個體驗設計師，在設計方案的時候，不僅需要考慮視覺層面的舒適度，也需要考慮到交互層面使用的流暢性和信息的傳遞。
2.10 微交互的起源
計算機科學家拉里·特斯勒（Larry Tesler）在為施樂Xerox電腦的文字處理軟件Gypsy設計程序時，突發奇想，給軟件Gypsy加入了鼠標操作和GUI圖形界面，這樣便大大的方便了Gypsy作為文字處理軟件的實用性與便捷性，于是在不斷體驗與嘗試的過程中，于是拉里·特斯勒在改版的時候，給Gypsy加入了復制、粘貼功能鍵。這些概念隨后成為了文本編輯與計算機操作系統用戶界面的基石之一。
拉里·特斯勒其實當初設計復制和粘貼的思路便是較少用戶操作的阻力，讓用戶在使用過程中不會被其他的事物所打斷，往后的數十年，拉里都為了這個目標在奮斗，所以“復制”和“粘貼”便是精心設計過的微交互，沒有任何提示和阻力，一氣呵成的便捷交互。
交互設計以及人機交互在不斷的發展的歷史，實際上就是微交互的歷史。今天，我 們在桌面和筆記本電腦中、在移動設備中習以為常的那些交互方式， 都曾引發過微交互設計的革命。無論是保存文檔，還是把文件拖放到 文件夾，還是連接到Wi-Fi網絡，都曾經是精心設計的微交互。就連滾動和打開多個窗口這么“基本的”交互方式，也都要經過設計。技術在快速發展，不斷對微交互提出創新的要求。用戶習慣了拿來就 用，他們只會關注更好的交互方式，或者是那些由于技術發展催生的、或強制必須使用的微交互方式。
所以，好的微交互就像“Ctrl+C””Ctrl+v”那樣方便，會改善我們的使用體驗。
2.20 移動端微交互應用場景的發展歷程
還是“復制”“粘貼”的例子，我們在功能機的時代，我們想要把一段文字從一個軟件復制到另外一個軟件上，我們通常要在兩個軟件不停止的去切換，然后通過記憶內容然后在來輸入，這樣的效率和精準度都不是很高，而且要是需要復制的內容過于龐大，想要完成便是一件讓人頭疼和心累的事情。
但是在進入移動智能機的時代，該功能的微交互便發生的天翻地覆的變化，第一步我們只需用長按需要復制的文字，調出復制按鈕，第二步，選中我們需要復制的文本內容，第三步便是切換到需要粘貼文字的APP，第四步，長按調出粘貼按鈕，選擇粘貼文字，這與之前僅靠人肉記憶去輸入文字無論在效率上還是在準確度上都有了不小的飛躍。
但是隨著技術的革新和從業者對于用戶體驗的理解更加深刻，我們的操作追求更高效，更精準，于是，該場景的交互又迎來的一次技術的變革，為了跟上時代的發展與用戶的訴求，在2016年10月19日的錘子手機發布會上，它推出了兩個功能：“Big Bang”和“One Step”?！癇ig Bang”的功能是長按一段文字，可以根據算法自動將文字的內容分割獨立的詞語按鈕，只需點擊這些分割的按鈕就可以選擇想要的內容。而“一步”可以直接將所選內容拖動到其他目標應用程序中，而無需在應用程序之間切換。這兩個功能的結合，將之前需要四個步驟的功能簡化為只有兩個步驟：第一步是按下選擇內容；第二步，拖動到目標應用程序。
在2021年6月8日凌晨，一年一度的蘋果WWDC大會在線上正式舉行，ios帶來了類似于“big bang”的功能：live text，也宣告著這個小小復制粘貼功能又完成了一次新的進化，所以，無論是“Blive text”還是“Big Bang”，這兩個功能本質其實就是微交互的進化，只不過用了兩個不同的名字去代表而已。
2.30 交互與微交互的差異性
交互設計是串聯起產品各個頁面與功能反饋的基礎工作，如果缺少了某個交互環節可能會導致產品的BUG或其他負面情況，交互設計簡單的來說就是滿足了產品的可用性。然而微交互的存在是為了給產品提升易用性與好用性，能起到錦上添花的作用。
2.40 微交互為什么這么重要？
自喬布斯在2010年06月08日發布了iPhone 4開始，我們的手機便宣告進入了移動智能機的時代，我們手機從僅僅可以打電話到可以上網玩游戲等等，所以為了搶占用戶的空閑時間，用戶體驗就越來越被企業所看重，細微且無處不在的微交互也掌握著用戶體驗的核心–細節。
在早期，我們一直會覺得安卓手機不如蘋果手機好用，會覺得比較卡斷和粗糙，其實就是因為蘋果的微交互會做的比較好，無論是在手機解鎖后的圖標入場動效還是點擊APP后的轉場效果，細膩舒適的微交互便一度成為蘋果公司的象征。
我們會發現，微交互幾乎無處不在，它可能是一次震動提醒通知、播放下一首歌曲、登錄一次網站、在手機應用里查詢一次天氣、微信回復一條信息、朋友圈點一次贊，如果這些交互設計過渡得順滑流暢又自然的話，幾乎很容易就會忽略他們的存在。雖然微交互近乎隱形，且很容易被人忽視，但它的重要性卻不容小覷。我們知道，移動產品交互設計時考量的因素有兩個——功能和細節。功能吸引用戶使用產品，細節則是留住用戶成為回頭客。好的微交互，可以變無聊為有趣， 把沒有生命力的 app 變得生動好玩，讓用戶感受到參與感和愉悅性，給用戶留下深刻的印象甚至上癮。偉大的產品和平庸的產品之間，區別就在于微交互。
3. 微交互的構成
那怎樣才能做好“微交互”呢？丹·賽弗在他的著作《微交互：細節設計成就卓越產品》中，提出了好的微交互應該有的結構： 觸發器、規則、反饋、循環與模式 。我們一個個來講。
3.10 觸發器
觸發器，是啟動微交互的“扳機”，是微交互啟動的原點。要把識別“扳機”的成本，降得越低越好。就像沈騰在《羞羞的鐵拳》的那句經典臺詞一樣“你過來呀”，簡單且易于識別。
觸發器一般是分為兩種，就像平時打游戲一樣，有主動技能和被動技能，觸發器也被分為手動觸發-即用戶主動去觸發的，被動觸發-即系統被動觸發的。
3.11 手動觸發器
手動觸發器一般是用戶自主的去點擊，所以我們盡量要去保證觸發器的識別性，以及用戶在點擊前的一些心里預期的管控。
（1）降低識別成本
觸發器是微交互啟動的第一步，在使用場景下必須要讓用戶能識別出來，用戶才能去點擊，所以觸發器要足夠清晰明顯。
比如，我們在瀏覽和使用視頻屏網站或者視頻APP的時候，網頁或APP上的視頻中間都有個碩大的“播放”按鈕，比如，攝像機上的錄像鍵，總是最明顯的紅色；這些都是觸發器在提示你應該點我，且外觀樣式都是采用通俗易懂的外觀樣式。
（2）對用戶的預期管控
我們一般去一家陌生的商店的時候，有的商店會玻璃門，比較高級的是自動的，一般的店鋪都會是手動的，這時候，一般的手動的玻璃在門上都會貼上這個門是用推的形式開還是用拉的形式去關，這樣，我們便知道這樣去推或者拉門，是肯定可以把門打開的。
所以我們的觸發器需要讓用戶知道我點了之后會去到哪里，在形式的設計上需要明確，比如我們的微信或郵件APP的一角會顯示未讀郵件的數量，提示用戶在點擊后肯定有未讀的郵件或消息。
（3）考慮用戶的使用場景
在我們平時工作和娛樂中使用的鍵盤，我們鍵盤的按鍵的大小都是根據用戶在日常使用場景的頻次和設計大小的，例如，用戶的最多的空格鍵，是最大的，其次是回車鍵，使用的最少的開關和其他的控制鍵是最小的，這都是考慮到我們生活中的使用場景去設計的。
我們在設計觸發器的時候也是一樣的，需要考慮到用戶在日常生活操作的具體情況來對觸發器的大小位置來進行設計擺放，盡量讓用戶操作起來比較合適。
所以我們APP的按鈕會根據使用頻次來確定圖標的大小的層級，方便用戶憑借第一反應去點擊使用。
3.12 系統觸發器
系統觸發器的微交互一般需要用戶滿足了某些條件才會觸發的，例如我們平時在工作時間設置的起床鬧鐘，我們微信的朋友圈的更新提示，都是屬于系統觸發器，在滿足了某些系統設定的規則之后才會觸發的。
系統觸發器通常會讓用手動設置何時觸發，觸發的頻率狀況，比如，我最近想學習，不想被朋友圈的信息影響，我可以選擇關閉朋友圈紅點提示，比如，我的鬧鐘設置的是周一到周五的工作時間去響鈴，我周三晚上加班太晚了，第二天中午十二點去上班，這個時候我就可以單獨的選擇周四這天鬧鐘不響。
3.20 規則
規則，用來規定微交互的過程，是整個微交互的核心。好的規則，應該順乎人性、體貼方便。簡單的來說，規則就是要按套路出牌，不然就會讓用戶感覺到出其不意。
（1）動詞和名詞
一般的規則都是通過流程圖去演示，理解起來成本比較大，丹·賽弗 （Dan Saffer）提出一個理論：動詞=用戶行為=交互目標，名詞=操作對象=解決方案。
舉個例子我看在電視劇的時候，看到一些不太喜歡的地方，準備去快進，這個時候視頻的進度條就是名詞，而用戶準備快進這個動作便是動詞。
所以在制定規則的時候，我們需要把復雜的流程給簡化下來，弄清楚動詞和名詞，我們便可以開始制定規則了。
（2）及時反饋當前的狀態
好的微交互盡量在一個屏幕內能去展示完成，不需要用戶去跳轉，這樣便是符合人性的微交互的設計，所以我們在設計為微交互的流程的時候，盡量通過不同的狀態去給用戶傳遞消息，這樣可以使用戶感知界面的微交互不會太細碎。
（3）選項的防呆設計
規則，是微交互的核心。要仔細打磨，反復測試，每個環節的問題都需要考慮到。所以，我們在設計微交互的時候，要更加注重細節上的體驗，給予用戶操作上的舒適感。
① 聰明的默認項和有限的選項
什么是“有限的選項”？簡單的說，我們提供給用戶的選項越少，規則越少，用戶便更輕松理解這種交互操作。什么是“聰明的默認項”呢？簡單的說，當給予用戶的選項比較少的時候，我們通常要給用戶一個默認的選項，因為這個選項是用戶最有可能采取的下一個操作，因此有必要提示用戶。
簡單的可以理解為，提供的選項越少，用戶越容易選擇。所以，在設計方案中：提供默認選項>提供有限選項>提供多種選項。
- 聰明的默認項
默認項和有限的選項是相互關聯的，正常的情況，在有限的選項中為用戶提供默認項。而默認項應該是大部分用戶最常用的那個選項。
例如我們在退出或者刪除的時候需要二次確認，正常的會將確認放在我們比較好操作的位置且會高亮放大展示，一般的電商平臺上的產品也是種類繁多，所以一般的電商平臺都會有分類區，將不同的商品歸類為不同默認的選項，來供用戶選擇。
- 有限的選項
有限的選項我們將他分為兩種，一種是只在需要的時候出現，另外一種是只提供需要的選項
-
- 1）只在需要的時候出現
通常我們手機更新系統的按鈕，在沒有新的版本的時候發表，這個下載按鈕是不會出現的，只有當我們手機廠家發布了新版本，下載的按鈕才會被解鎖，出現在界面中。
-
- 2）只提供需要的選項
例如我們國內的搜索百度，主界面上只有搜索框和百度一下，簡潔明了，讓用戶一看就知道產品的主要功能，在例如，當我們因為軟件連接上車上的藍牙后，便進去的車載的模式，因為開車的時候需要集中注意力去開車，所以車載模式下，很多不必要的功能便會被隱藏起來，只會提供必須的功能選項按鈕。
3.30 反饋
反饋，是向用戶說明規則。用戶并不知道你設計了什么規則，你要通過反饋友好地讓他知道。
Twitter在這點上，做得非常好，它在你輸入密碼時，在右邊用文字給你實時反饋，向你說明規則。
你輸入字數太少，它顯示：需要6個以上字符；你輸入簡單單詞，它顯示：密碼太好猜了；符合要求，它會按照密碼的強度，逐級顯示：弱，不錯，強，很強！
3.31 解釋規則
反饋的作用之一就是向用戶去解釋我們所設置的規則，比如，我們工程師所設置的密碼的規則：要有6個以上字符，最好有大寫、小寫和數字。不要用生日、紀念日等。但用戶不知道啊，你要把規則，用反饋告訴他。
（1）反饋與用戶操作相關的信息
我們給與用戶的反饋要盡量與用戶本次的操作的相關，比如，用戶下載文件，我們需要給與用戶的反饋信息是，已開始下載，下載的進度和下載完成，如果反饋再細節點，我們在下載的過程中可以提升用戶,”下載過程中會占用大量的帶寬，也許用影響您瀏覽網頁或者其他是上網操作”，反饋越是細節，用戶在體驗微交互的過程中的負面情緒就越少。
（2）反饋信息簡單清晰
微交互的反饋直觀也是比較重要的因素之一，可以讓用戶更好的理解規則，降低用戶的認知成本，我們反饋給用戶的信息應該都是準確且重要的，例如我們的消息提醒，一般都是在有幾條就提醒幾條消息，消息的傳遞需要做到少即是多，信息越是重要，反饋的層級就要越高。
（3）反饋信息具有幽默感
我們在日常生活中都不太喜歡直來直去的人，都喜歡和幽默、風趣的人聊天，我們對用戶的反饋信息也是一樣，需要避免機械化的回復，回復需要讓用戶感覺我不是在和一臺冰冷的機器溝通，所以我們的信息反饋更多的是對氛圍的一種調節，比如，搜狗輸入法在檢測到網絡不佳的情況下，會用一種比較風趣的口吻說“哎呀！汪仔去太空旅游了”
3.40 循環與模式
循環與模式，我們可以將它理解為是規則的分支。比如，鬧鐘是你每天接觸的第一個“微交互”了吧。眼睛還沒睜開，鬧鐘就響了。你重重拍下去，這時就啟動了“再睡一會兒”這個分支的規則，也就是“模式”。如何設計這個分支，最合理呢？你可以讓它5分鐘后再響，如果再拍下去，就別叫醒他了。“你永遠叫不醒一個裝睡的人”。這樣合理嗎？
也許不合理。更合理的做法是，拍第一次，5分鐘后再響，拍第二次，3分鐘后再響，拍第三次，縮短為1分鐘。然后就一直響。因為你拍的次數越多，越有可能因為貪睡誤事。
循環與模式，就是一次性的或者循環的分支規則。
循環的分類
① 計數循環
即我們在給用戶反饋前需要來回檢查規定好的次數，發現了問題在給用戶反饋，例如，我們的微信在網絡不穩定的情況在，我們會看到微信的刷新的狀態會連續好幾次的出現刷新，然后才會給用戶網絡不好或者斷網的提示。
② 條件循環
即在限定的條件下的循環，比如，我們手機上的鬧鐘，它便是會在我們設定的時間內會準時的叫我們起床，如果當天沒有設定鬧鐘或者手機沒電了，這個循環便不會執行下去。
③ 集合循環
即循環的核對數值，然后停止，和前面的計數循環有相似之處，例如我們短信系統，會對收到的信息進行系統的統計，然后發現有未讀的信息，便會在角標上記錄數值1.
④ 無窮循環
即循環開始后，除非人為的干預讓它停止或者系統出問題的時候才會停止，否則會一直的循環下去，就像永動機一樣。無窮循環分為兩種一種是開放循環，另外一種是封閉循環。
⑤ 開放循環和封閉循環
- 1）開放循環
即在滿足條件后，執行一次便結束，miui有個功能是可以設定手機每天早上什么開始，當每次到達這個時間后，我們原本處于關機狀態的手機便會開機，這個指令執行一次便不會在執行了。
- 2）封閉循環
即在滿足條件執行后，可以進行自行的內部條件，比如，當我們手機開機后，我們的手機屏幕的亮點會根據環境光而去調節。
- 3）長循環
長循環可以理解為是一種陪伴用戶在使用我們產品時候記錄的一種微交互，使用的時間越長，這種記錄就越多，比喻我們軟件的搜索記錄和瀏覽記錄便是一種長循環。
- 4）漸進揭示或漸進減少
長循環的另外一種情況便是當用戶長期使用后對軟件越來越熟悉后，我們可以對有經驗的用戶開放更加進階的玩法。
長循環的另外一種情況便是漸進較少，即當我們的用戶熟悉了我們的軟件后，有些界面上的說明解釋的提示可以適當的去掉，簡化界面，對用戶而言，干擾少了，也會提升使用的效率和交互的速度。
4. 微交互的三種層次
微交互在產品中的應用場景也是比較豐富的，一般我們的用戶首先感受到是微交互給予用戶視覺層的體驗，其次深入體驗后是功能交互層的體驗，最后體驗的是一個比較好的容錯性、比較好的交互后得到的心理上的愉悅，也就是情感層。
視覺層主要給予用戶感官層面的體驗，交互層是給予使用上的效率體驗，情感層主要是讓用戶體驗后心理上有滿足或者愉快的感受。
但是這些層面又不是絕對獨立的，每個微交互設計都能在上述三個層面中找到單獨或者組合，比如雙擊屏幕的反饋，就滿足了視覺層面、功能層面與情感層面的三層優化。
視覺層
在視覺層，考慮的轉場交互動作是否足夠流暢，視覺是否美觀，反饋交互是否有創意，是否加深品牌印象。
交互層
通過控制轉場樣式，反饋樣式與反饋時間是否可提高交互效率，幫助用戶認知，提升產品數據。
情感層
通過趣味幽默化的轉場與反饋動畫是否可以降低產品的負面體驗或者讓用戶產生愉悅感
4.10 微交互的應用場景
微交互不是刻意的。而是被動發現問題的優化過程，當靜態設計不能滿足的時候，可以考慮動態的微交互設計，
所以，我們的微交互設計需要滿足用戶的操作體驗，微交互是否幫產品的數據上有提升，設計角度上微交互是否有創意。
4.20 微交互視覺層的應用
（1）相同的元素串聯轉場
推拉搖移是攝像中的術語。推指把鏡頭變焦到長焦端，使景物更近，拉則是相反，把鏡頭變焦到廣角端，使景物顯得更遠，搖指鏡頭跟隨運動的物體做同方向的轉動，移指鏡頭跟隨動體做平行移動。這些手法都是經歷過前人的無數字的實踐所總結出來的道理
我們在做交互轉場也是一樣，合適轉場是讓產品添姿增色的重要手段之一，在iOS默認的轉場效果就是頁面從左往右去進場，但是想要在讓你交互轉場看起來比較舒服，就需要在細節上下功夫，其中比較常見的手法就是界面中有相同的元素的時候，讓他們將他們串聯起來，這樣的交互轉場會讓你產品看起來更舒適。
（2）卡片推開周圍的元素
在安卓的Material Design提出Z軸的概念，在扁平化的界面上讓產品有三維的層次感（三維就是X軸（左右）、Y軸（上下）、Z軸（前后）組成的立體世界，而二維就是只有X和Y軸的平面世界。）我們知道手機的界面是一個平面和二維的空間，Material Design通過一些二維的表現手段，比如投影和動態效果，來構建Z軸(前后)的概念。
在這個基礎上，我們可以在微交互上下功夫，例如當界面中的卡片比較多的話，我們想讓產品的體驗更具有層次感，我們可以通過卡片與周圍元素的變化產生關聯，營造微交互中的產品層次感。
（3）專屬的元素動畫樣式
我們人天生都有好奇心，對新鮮的事物都有嘗試的心理，我們在微交互的設計中，也需要具有創新精神，讓用戶在視覺體驗層有與其他產品有不一樣的觀感，這樣有利于樹立我們產品的品牌感知。
比如，我們在點擊TAP時候的特殊的動畫呈現，點贊時候獨特的反饋。都會在視覺層面給用戶留下比較深刻的印象。
（4）強化操作過程中的趣味性
下拉刷新是我們在產品中日常會使用的交互，現在的產品一般都不會使用默認的“菊花”的下拉刷新，一般會使用自己的IP或者更加有趣的MG動畫，都是為了讓用戶在使用我們的產品時候在視覺層有新的體驗，與其他的產品去拉來差距。
（5）循環動畫強化產品氛圍
我們在酒吧857的時候，酒吧都會有氣氛組，來讓新來的客人比較快的融入到酒吧愉快的氛圍中，或者一般商業區過節的時候，都會將街道和廣場裝扮與節日相符的燈光，都是為了讓客戶快速的融入到氣氛中。
我們在產品中也是，有的功能想吸引用戶的目光，或者想讓用戶快速的融入到某節日到氛圍中，都是可以通過循環都動畫去引導用戶。
4.30 微交互交互層的應用
（1）交互行為主動聯動性
我們都知道，我們手機的屏幕空間是有限的，有時候的功能布局方面可能不是那么的合理，這個時候，我們的微交互就可以起作用了，比喻，我們手機上滑當時候，就可以將某些用戶比較常用的功能常駐在屏幕上方，當用戶想去操作的時候，不用在滑回去在去操作，在體驗上減少了用戶的操作步驟，提升了用戶在產品用戶過程中的舒適感。
（2）合適的元素出現在適當的時機
我們經歷過這樣的時候，當陌生人來找我們做某些事情的時候，我們的第一反應力都是比較抗拒的，但是熟人的話我們可能會因為各種原因不可以拒絕。
產品設計中也是一樣，如果我們想讓用戶去應用商店去給我們的產品一個好評，肯定是不能一上來就給用戶引導去評價，這樣會極有可能會導致差評的，但是，我們可以利用用戶“啊哈時刻”去提升用戶的好評動機，例如，當用戶覺得某內容不錯的時候點贊了，收藏了，我們這個時候讓用戶去好評，這樣好評的幾率會大點，起碼不會引起用戶的逆反心理。
所以，當我們想要用戶去為我們做某些事情的時候，一定需要找準時機，結合微交互，提升用戶去完成某件事情的意愿，例如，當用戶在瀏覽商品的時候，我們可以給用戶發放優惠券，我們想讓用戶去分享我們的內容的時候，可以在用戶在快看完的時候，出現分享按鈕，都是可以通過微交互去讓用戶幫我們去做某些事情，以達我們想要的結果。
我們的知道豆瓣是一個社區內的產品，它是希望用戶在豆瓣來發表自己的想法的，所以，當用戶看到評論區的時候，它用將評論區給展開放大，吸引用戶的注意力，從而加大用戶互動的意愿。
（3）進場告知用戶隱藏的功能和操作
我們做設計的時候可能經常會遇到一些無理的要求，例如，這個功能需要強化，但是又不能去干擾用戶，每次遇到這種需求，我們設計師往往都是比較痛苦的時候，例如當用戶沒有開通會員的時候，我們想給用戶去展示會員的一些特權和首次開通的優惠，但是，用戶要是沒有開通，我們是沒辦法很好的去展示的，這個時候，我們可以通過微交互，在進場的時候，將隱藏的信息展開，然后過收起來，這樣用戶即看到信息，又不會影響接下來的操作。還有就是當我們上新某些功能的時候，想讓用戶去快速的去了解這個功能，這個時候我們可以通過演示動畫的微交互來讓用戶去快速的了解我們新功能怎么去操作。
（4）元素跟隨頁面的形態改變
我們的產品在操作的時候難免會出現各種狀態，為了讓每個狀態出現的時候都比較符合用戶的操作的習慣，這個時候我們需要考慮用戶的場景來改變頁面的布局，例如快手它的戰略是一個內容分享的社區，它注重的是用戶與主播之間的溝通，所以，正常的軟件，當視頻在播放的時候，完們想看評論，這個時候的步驟只能側中一個，但是，快手它考慮到用戶的體驗，當用戶在上滑的時候，為了不打斷用戶繼續觀看視頻，視頻內容會慢慢變小，然后固定，這個時候用戶可以在看視頻的時候也可以查看評論，方便用戶與主播之間的溝通，強化了內容社區的氛圍。
（5）照顧邊緣場景
一個產品它的交互是否比較好，我們看的是它是不是能滿足用戶大部分的使用的場景，所以，有的時候，當靜態的交互無法去滿足用戶的一些比較特殊的場景的時候， 我們這個時候就可以考慮微交互的設計，讓產品的交互體驗能覆蓋的場景比較全面。
例如，當我們在微信通訊錄想根據用戶的首字母去查找人的時候，一般左邊的字母都會做的比較小，無法精準的查看到我們現在看到哪個字母，所以，當我們的手去點的時候，到了某個字母的時候會放大，比如，我們因為開會將手機調成靜音或者音量關了的時候，我們去播放微信的語音或者看視頻的時候，這個時候，APP會提升我們音量未開之類的，這都是考慮到極端的場景，讓用戶的體驗更加順暢。
4.40 微交互情感層的應用
（1）幽默拉近用戶
當我們看到有趣的東西的時候總是想和身邊的人去分享我們的喜悅，這是人們比較底層的邏輯，我們的APP產品也是這樣的，當我們想讓用戶持續去體驗我們的產品或者想要用戶去主動的分享我們的產品，那么，我們可以將產品做的有趣一點。
比如，轉轉在登陸的時候為了吸引用戶的注意力，它會在用戶登錄的時候做一個比較有趣的小動畫，也消除用戶在多一步操作時候的負面的情緒。
（2）轉場加載占位符
我們在日常的APP使用中，總會遇到像信號不好的情況，這個時候，我們心里是比較著急的，特別是比較緊急的情況，負面的情緒是比較大的，我們需要將這點考慮進去，為了避免用戶在等待時候的焦慮感和負面的情況，我們一般會使用加載的占位符和加載的進度條，讓用戶知道我們的軟件是在工作中，而且是在賣力的工作中，這樣，可以緩解用戶的負面情緒。
（3）產品的儀式感
對于我們來說，儀式感是很重要的，比如結婚紀念日要去慶祝一下，生日的時候一定要和朋友去high一下，這都是來自我們生活的中的儀式感。
儀式感在產品中也很重要，他可以提升我們用戶的幸福感，例如微信在給朋友發送生日快樂的時候，屏幕中會掉下蛋糕，在過年的時候發送新年快樂，屏幕中也會掉落紅包，微信將我們日常生活中所需要的儀式感搬到了產品中，通過微交互來提升我們日常的幸福感。
（4）3D touch判斷用戶的情緒
我們人都是感情動物，滿足人們的日常的情緒需求也是很不錯的角度，例如facebook的點贊功能可以通過人點擊的力度大小去判斷人當天的情緒，例如，點擊的力度越大，說明你的心情比較好，或者對那個觀點比較贊同，如果你點擊的比較輕，說明的你心情不怎么好。
5. 總結
隨著移動互聯網慢慢進入下半場，我們頭部同品類的產品的布局也是越來越相似，所以，很多細節處的地方就是我們設計所能發力的點，無論是產品視覺中還是產品交互中的細節，都是不可忽視的設計細節，它能提升產品的品質和用戶體驗。
其次，我們常說魔鬼在細節，但為什么不說天使在細節？因為細節做得好，也許不能讓我們上天堂，但是細節做不好，足以讓我們下地獄。所以打磨細節是我們做為設計從業者不可繞過的一個環節。
原文地址：站酷
作者： Endings
轉載請注明：學UI網》設計師應該懂的設計細節
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務