動效在 UI 場景中的運用已經非常普遍，帶給用戶的體驗升級也是很直觀的。無論是一個圖標動效到界面間的轉場動效，還是聊天場景中的表情動效等，都證明了動效已經是無處不在。
最近黑馬哥在體驗產品的過程中，發(fā)現(xiàn)了很多優(yōu)秀的動效案例，今天選擇其中的 10 個和大家一起交流學習，希望能夠帶給大家一些靈感啟發(fā)。
01. 動效，讓點贊與眾不同
動態(tài)表情為社交場景帶來更活躍的體驗，使得交流過程變得更加趣味性。一個動態(tài)的表情不僅活躍了氛圍，也使得通過簡單的一個符號代表了千言萬語。
最近在使用釘釘 APP 進行聊天的過程中，發(fā)現(xiàn)輸入框的大拇指圖標在長按的時候結合了動效的變化，對話場景中出現(xiàn)的大拇指表情會隨著長按而增大。結合動效和長按手勢，為點贊的圖標增加了不一樣的趣味性，帶給用戶不一樣的社交體驗。
02. 動態(tài)提醒，增強消息的關注度
各類通知/消息在產品中隨處可見，紅點提示剛出現(xiàn)的時候還引起了用戶強迫癥，短時間內也增強了消息的閱讀率。隨著紅點效應逐漸淡化，未讀消息的點擊率逐漸降低，大家都在嘗試更多提高關注度的形式。
支付寶在消息模塊的服務提醒中，采用了動態(tài)形式提高關注度。當用戶點擊消息進入界面時，小鈴鐺圖標會左右晃動，以此來吸引用戶的目光，達到增加關注度的目的。
03. 圖標動效，讓你脫穎而出
在金剛區(qū)眾多的業(yè)務模塊中，想要突出重點模塊的關注度，采用動態(tài)圖標是比較常用的方式。采用動靜結合的形式，會讓動態(tài)表達得到突出。
比如 Keep App 將活動挑戰(zhàn)圖標動效化，在不改變配色規(guī)則和圖標設計規(guī)范前提下，依然可以達到突出主題的作用。
04. 博人眼球的動態(tài)懸浮廣告
在不破壞產品結構的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態(tài)異形和動態(tài)異形較多，而動態(tài)的關注度相對更強一些。
比如 Keep App 將活動的折扣信息以懸浮層的形式表達，既不會占用太多空間（隨著滑動會隱藏顯示），又能吸引用戶的關注度。如果用戶覺得影響操作，也可以直接關閉，就不會反復提醒而形成干擾。
05. 內容模塊結合動效替換突出存在感
在一些內容量比較多的產品中，比如電商產品，很多內容模塊都是百花齊放。都想要突出自己模塊的存在感，帶來更好的流量引入。而動效的結合也是不錯的選擇，但是需要考慮動效的干擾度。
當當 App 在突出今日搶購欄目時，為了不影響臨近板塊的干擾度，利用動效轉場來替換展示的商品信息?？s放替換商品時的動效既能達到差異化，也不會破壞整體的結構，算是一舉兩得的設計解決方案。
06. 微弱的動效也能呈現(xiàn)有溫度的設計
有時候在進行產品設計的時候，動效帶來的關注度并不是需要很強的表現(xiàn)力，一些微弱的動效依然可以提升產品體驗，帶給用戶更有溫度的設計。
自如 App 整體的設計都是做得非常不錯的，在“我的”板塊頭部區(qū)域，結合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感，讓用戶感受到這是一款有溫度的產品，提升用戶的好感度。
07. 動態(tài)感十足的底部標簽欄
圖標動效運用到底部標簽欄十分普遍，在這個頻繁切換的操作中，動態(tài)的形式可以帶來更強的趣味性和關注度。
優(yōu)酷 App 底部標簽欄采用多種顏色變化轉場，結合路徑動效帶來動感十足的體驗。首頁圖標還結合了刷新的功能，方便用戶進行內容的刷新，增強用戶體驗感。
08. 拓展功能的動態(tài)指引設計
針對一些功能體量較大的產品，會經常結合一些隱藏式設計，拓展出更多功能操作。通常默認為展開狀態(tài)，在滑動瀏覽內容時隱藏，通過動效吸引點擊展開，不會造成主內容的干擾。
比如平安口袋銀行底部標簽欄上方的拓展功能區(qū)，動態(tài)形式的展開與隱藏方便用戶瀏覽主頁內容。個別內容采用動態(tài)設計（點我抽獎），突出其點擊欲望。動態(tài)設計不僅提高了功能的曝光度，也能引導用戶操作，將繁瑣的操作變得更便利。
09. 結合動態(tài) IP 的下拉刷新
針對下拉刷新這一常規(guī)操作，設計形式也是豐富多樣。結合 IP 形象進行動態(tài)演變完成刷新動作，被很多產品設計師所采納。
美團外賣就將品牌 IP 形象結合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設計結合動態(tài)表現(xiàn)，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。
10. 圖標動效帶動局部功能的關注度
對于一些局部功能或者模塊占比較小的欄目，為了提高曝光度，獲得用戶的關注度，動態(tài)的形式是比較常用的方法。通常會在圖標部分、文字部分、裝飾元素部分等進行動效設計，帶來的效果也是顯而易見。
比如 QQ 音樂在“我的”模塊中，將活動中心、會員中心、每日簽到的圖標采用動態(tài)設計形式，雖然幾個模塊占比較小，但是依然能夠獲得用戶的關注度。
小結
動效表達在產品設計中的應用越發(fā)普及，不僅可以強化功能的關注度，也能帶給用戶感官體驗上的升級。優(yōu)秀案例的積累和分析，有助于我們掌握更多的表現(xiàn)形式，靈活的運用到項目設計中。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經許可，禁止轉載。
當你為你的項目創(chuàng)建有效的，可訪問的，漂亮的ui時，只需要最小的調整來幫助快速改善你的設計。 努力創(chuàng)造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現(xiàn)
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標題給一個更好的光學范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標題……我要說“是”!
你的標題很可能會比他們的標題更大，更重。相比于正文，字母之間的間距有時會出現(xiàn)視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。
留白是UI設計朋友。大膽的使用。適度的留白，即使是少量的白色物質，但要使用得當。能讓你的設計透氣，而且看起來更光亮。
創(chuàng)建長篇內容？給20 pt試試。對于長形式的內容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據(jù)設定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許，簡單地使用一個有限的調色板選擇一個基地顏色，然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。
改善用戶登錄的體驗。記住拇指規(guī)則。允許用戶在任何時候跳過您的移動應用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設計看起來更拋光且統(tǒng)一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當你想要提高你的字體組合技巧的時候，當面對1000個字體選擇，只是去尋找對應的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現(xiàn)兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復雜的內容和圖片。
太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容，保持文本左對齊。你的用戶會感謝你的你。
當選擇一個多用途的文字，盡量找一個大量權重。你搜索的字體有很多選擇嗎？重量、風格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當然也有例外，某些項目會要求“只有一種風格”
更精致的字體，但對于絕大多數(shù)項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格，希望你在設計過程的后期需要更多的空間。
想要創(chuàng)造更容易理解的界面，對吧？把你的文字調暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當涉及到長形式的內容時，某些常規(guī)的粗細字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內容。你認為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區(qū)分，尺寸和標簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標。如果可以使用文本標簽，那就使用它們，讓用戶更好地理解。
當你的字體變小時，請增加行高，以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性。基本上，x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數(shù)字1。
當設計一個在應用程序內部使用的菜單時，確保提供最多經常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色，然后應用各種色調。你選擇的顏色陰影到你的背景，文字，圖標或更多，可以添加。你的設計具有豐富的視覺趣味和個性。
基于字體的x坐標，設置您的線高度。不同x高的字體需要不同的行高測量，實現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現(xiàn)。
突出最重要的元素。通過使用字體大小，權重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創(chuàng)建慷慨的熱區(qū)。當為移動設備設計時，嘗試創(chuàng)建足夠大的可點擊區(qū)域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰(zhàn)性的，盡可能使用帶有標簽的圖標。
以下是iOS和Android的最小推薦點擊區(qū)域：
44 x 44pt用于iOS
48x48dp用于Android
在短標題上盡量使用全大寫。如果你想在標題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標題非常好的。發(fā)現(xiàn)他們真的很適合標題，設計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標題和正文。當你想實現(xiàn)一個好的垂直節(jié)奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設計。我見過許多設計，最常見的是在文章列表中，它們已經被應用標題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會給我的標題更多的頂部邊距，而在底部，標題和下面的內容之間的連接是更強，有良好的垂直節(jié)奏，視覺層次保留在所有的文章之間。
對于下載指標，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現(xiàn)這一點，用百分數(shù)來顯示當前進度，一個簡單的圖標，讓他們可以在任何地方取消下載時間。
如果你能保持標題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標題簡短，時髦，切中要點。而不是“這是你的風格，你的方式”，簡單地使用像這樣的“你的風格。你的方式。”人們會瀏覽，保持這些標題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標受眾來決定方法是合適的，相對于更標準的格式。
正確的設計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時，這似乎是一項艱巨的任務，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來，輕松掃描您的網站或應用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項目在屏幕上，并很容易區(qū)分其他元素。
只是一些細微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設計中使用要適度?，F(xiàn)實世界中的陰影，在大多數(shù)情況下幾乎是不可察覺的，而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經常用于內容豐富的網站，通過最小的調整，你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度，這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒，但是當過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應該是最優(yōu)先的。
在ui中使用已建立的圖標，為了避免給用戶造成混淆。在你的設計中添加圖標時，試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑，成為用戶的認知障礙。不要在這些圖標上過于叛逆。
在眾多經過嘗試和測試的設計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程，表明彼此之間的關系，這有助于加快用戶的認知。
4pt基線網格+ 8pt網格=單一網格。當使用類型時，8點網格旁邊使用4點基線
可以為你的設計帶來更和諧的垂直節(jié)奏。您需要對齊您的類型到基線網格4，使用的行高值為4的倍數(shù)（16、20、24、28等）
為什么4？我發(fā)現(xiàn)在過去使用特定的文本大小時，按8的倍數(shù)縮放是不太合適。
減少標題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進行類比論。類似的顏色，也被稱為相鄰或相鄰的色調，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創(chuàng)建一個簡單的，顏色方案快速。當你需要快速將顏色調和到混合中時，可以使用類似的方法。
在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現(xiàn)清晰和可用性最小化噪聲，從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現(xiàn)這一點有效，不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。
當使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現(xiàn)這一點。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產生任何混淆。
養(yǎng)肥了，字體大小為最佳易讀性。當設置暗色文字與淺色背景，選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量，特別是對于長表單副本。以最佳的易讀性為目標，避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當內容與他們交談當它不是。正確的字體選擇是至關重要的，使您的內容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因為字母更多彼此區(qū)分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補救?？偸亲層脩袅私馇闆r，即使是像常規(guī)一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發(fā)生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前，總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。
參考文獻《UI & UX Micro Tips - The Ultimate Collection》
大體上分為兩類：彩蛋流和體驗流
搜索的本質是什么？無疑是內容的召回和信息的推薦。
可隨著時代的發(fā)展和行業(yè)公司的內卷，不少公司除了持續(xù)優(yōu)化搜索結果與推薦外，在搜索的體驗和彩蛋上也是下了不少功夫，從而進一步加強自有產品的競爭力與用戶黏性。因此今天就來盤點一些，那有意思的大廠搜索交互。
大體上分為兩類：彩蛋流和體驗流
注重提升搜索過程中的趣味程度，以增加用戶的好感度與產品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器
可以說是搜索彩蛋的先行者，內置了很多搜索關鍵詞的有趣彩蛋，如娛樂角色：搜索【滅霸】，頁面右邊會打響指，相關字段會被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點擊彩蛋
還有各種有意思的搜索結果比如搜：is google down（谷歌關閉了嗎），搜索結果優(yōu)先顯示：NO
再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時搜索結果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。
而且在日常的節(jié)日、活動、熱點運營上，谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與，可以已經形成一個穩(wěn)定、具有品牌感的企業(yè)文化了。
如各種復活節(jié)、開學季、母親節(jié)動效。而且更多有趣、創(chuàng)意的設計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設計方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應該是搜索【黑洞】時，頁面上會出現(xiàn)黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉】，頁面會左右翻過來
搜索【跳躍】，頁面會在上下跳動
搜索【失重】，頁面上的字會飄起來
而在【活動運營】上，百度也是很有心地進行著創(chuàng)新設計，力求給用戶一種眼前一亮的感覺。比如每年的愚人節(jié)，搜索結果頁上都有‘調戲’用戶的創(chuàng)意設計，各種輕松調皮的畫風 給不少用戶帶來了新鮮感和趣味性。
還有在【活動入口】的設計上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動入口’嵌套‘在結果頁卡片中間，用活動里的ip形象-雪人「抬著」結果頁卡片和在上面「滾動」
用這種充滿創(chuàng)意+應景的的入口設計與引導方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動。另外，百度搜索框上面的運營活動入口，也和谷歌有異曲同工之妙。
而且更多有趣、創(chuàng)意的設計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設計方法。
注重提升搜索過程中的交互體驗，以增加用戶的操作效率與產品易用性。
代表：蘋果產品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件，它還自帶了【匯率轉換和計算器】。在搜索框輸入【數(shù)學公式、匯率轉換】時會自動計算對應的結果。無需用戶額外打開計算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤里，可以根據(jù)輸入詞檢測+搜索對應的手機號碼：當你輸入 【打+我或通訊錄好友+電話】時，鍵盤上會自動顯示自己或好友的電話號碼，點擊號碼就能自動粘貼在輸入框中。
用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼，大大提升操作體驗與效率
·Mac
在Mac電腦的工具欄上搜索相關幫助時，系統(tǒng)會直接把該結果所對應的頁面位置調取出來并懸浮展示。用戶可以直觀地該結果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統(tǒng)偏好設置’里搜索幫助，在結果列表上會以聚光燈的形式展示各個結果入口。選擇具體某個結果時，該入口的聚光燈會更清晰些，特別容易找到搜索結果。
夸克瀏覽器除了傳統(tǒng)的「點擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢同樣可以喚出搜索框。
降低「需要往上手指移動，才能點擊搜索框」的操作成本，讓用戶更快、更精準地觸達搜索。
而且在輸入網址或英文等字段時，搜索框下方會出現(xiàn)一個滑塊區(qū)。點擊就會變成長條的滑塊，拖拽滑塊即可改變光標位置。
而且更多有趣、創(chuàng)意的設計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設計方法。
讓用戶更方便地將光標快速移動到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會前置搜索結果， 比如在搜索框中輸入“某城市+天氣”的關鍵詞，上方就會以卡片的形式顯示該地區(qū)最近一周的天氣。
用戶無需觸發(fā)搜索、進入結果頁才能看到想要查詢的信息。
精準的分析了UX設計師的技能定位。其實不光是作為一些交互設計師自己不太清楚，領導和客戶往往也會忽略這一重要的步驟...
交互設計：我們是不是要把“用戶體驗”中的“用戶”拿掉了？
前言：這篇文章寫得特別好，很精準的分析了UX設計師的技能定位。其實不光是作為一些交互設計師自己不太清楚，領導和客戶往往也會忽略這一重要的步驟。文章篇幅有點長希望大家能靜下心看完，會幫助自己了解更多哦~
什么是用戶體驗設計師？
我最近從一位來自MathWorks（世界領先的技術計算和基于模型的設計的軟件開發(fā)商和供應商）的高級用戶體驗專家那兒看到了一個很棒的廣告，這是其中一些節(jié)選：
與開發(fā)團隊合作，遵循以用戶為中心的設計方法，協(xié)同工作，對復雜的問題進行頭腦風暴和設計創(chuàng)新的解決方案
向團隊成員建議使用哪些可行的方法來回答他們關于用戶的問題，并根據(jù)項目的需求、目標和約束來設計方向
與團隊成員密切合作，進行用戶研究，發(fā)現(xiàn)痛點，開發(fā)用戶配置文件，并創(chuàng)建任務列表
在紙上畫出功能原型
進行可用性測試，進行用戶交流和網上調研，組織調查，并進行你認為合適的其他可行性評估
它準確地描述了我在對于用戶體驗工作的期望。我們從目標人群和競品那里學習有關項目的一切知識，找到方法來研究用戶的需求和目標，與目標人群一起評估這些需求，修改項目計劃，并在最終確定產品之前創(chuàng)造出經過用戶驗證的解決方案。
但當我換一份新的工作時（當然那是個例外），我看到許多職位描述都要求具備廣泛的用戶體驗技能，有些人甚至要求具備除此以外的更多技能。但似乎他們真的需要一個能進行原型設計的視覺設計師。
來自高級UI/UX設計師的廣告：
有測試和可用性實驗的經驗和熟練的交互原型的經驗
創(chuàng)造清晰和具有視覺沖擊畫面的能力
深入了解用戶的興趣和需求
聽起來他們在尋找一個精通調研、可用性測試和交互原型的人。但更迫切的需要反映在以下關于"附加"的要求中：
項目工作能展示強大的用戶體驗過程和完美的細節(jié)視覺和交互設計原則（IA，IxD，排版，布局，層次結構，顏色，組成）
你認為他們只會招聘一個可以進行用戶調研，畫線框圖和測試的人嗎？或是視覺設計做的很出眾的人？也許這反映了“UI”這部分的職位描述。讓我們來看看一個純粹的UX設計師的職位，它要求：
優(yōu)秀的分析能力
在實際用戶研究、信息架構、交互設計、以用戶為中心的設計過程以及用。戶體驗原則和技術等方面有豐富的經驗
聽起來不錯！但其真面目會在下一個要求中顯示：
把想法/概念轉化為優(yōu)質的視覺設計
如今，用戶體驗已成為熱門詞匯。盡管看起來不言自明，但一些公司并沒有明白這一點——他們仍然忽視了行為經驗，而不是外表和感覺。我看到的許多廣告都是在視覺設計上表達了最具體和生動的語言。這讓我撓頭，懷疑是否只有最成熟、規(guī)模最大的公司才真正需要用戶體驗，并有足夠的預算來支持它。難道其他公司只是通過招聘視覺設計師并給他們貼上“UX”的標簽，來追個市場熱點而已嗎？
遠離調研？
用戶研究員Alan最近離開了一家總部位于亞特蘭大的公司，那里擁有大量的用戶體驗員工。他在公司的頭兩年里，參加了全國各地許多不同類型的用戶調研。然而，在最后一年，他發(fā)現(xiàn)他的調研被拋到一邊了。
"我的新老板不關心做調研。似乎整個公司都在降低它的重要性。相反，他們會開辦設計思維講習班，直接進入開發(fā)階段。“任何研究或可用性測試都被留到最后，只是為了驗證解決方案。”
由于該公司以嚴厲對待用戶體驗而聞名，這一點尤其令人不快。
像用戶體驗（ux）這樣流行的詞匯會突然變得受人追捧，我想不出在這個行業(yè)還有什么比“設計思維”更重要的了。根據(jù)谷歌在過去的五年中的數(shù)據(jù)，對設計思維的網頁搜索翻了兩倍。
顯示從2012年12月到2017年6月設計思維搜索增加的圖表。
搜索“設計思維”，2012年12月-2017年6月（資料來源：Google Trends）
設計思維過程的第一步是移情化，就是讓用戶參與并觀察他們如何談論的，同時觀察他們如何真正完成任務。換句話說，這就是用戶調研。誰做調研？做用戶體驗的諸位！不難想象互聯(lián)網項目負責人和利益相關者繞過這個步驟，直接進入步驟2和3，開始定義問題和開展頭腦風暴去解決方案。爽死他們了。
在“設計思考家最初犯的五個錯誤，”Dana Mitroff Silvers，一個設計思維驅動者和數(shù)據(jù)戰(zhàn)略家寫道，“我經常被客戶要求跳過這個階段，直接進入解決問題的階段。”
她還描述了我有過很多次的經歷，公司禁止接近用戶！很多時候，silvers的客戶都會問他們是否可以跳過這個階段，因為他們“已經知道他們的受眾需要什么，可以為他們代言。”
這就說的通了。團隊繞過不熟悉的移情階段，直接進入定義問題及其解決方案，過去一直都是這么做的。而且如果沒有在移情方面的訓練和指導，或者充分了解，很容易跳過這個階段。在我接下來的交談中可以看到，一個公司告訴我他們需要一個兼并的ux/視覺設計師。我問他們是否需要設計思維，產品總監(jiān)回答：“是的。”他們跳過移情步驟了嗎？他同樣回答道：“是的。”
如果一家公司僅僅遵循設計思維的最后四個階段——設計、構思、原型和測試——那么一個用戶體驗設計師是什么樣的呢？是一個可以做原型開發(fā)的視覺設計師。
分離調研和設計
用戶體驗架構師Alyssa最近與一家大型電信公司簽訂了用戶調研合同。讓人失望的是，設計師似乎沒有責任跟蹤調研結果。調研人員每一到兩周進行一次新的可用性測試，然后將測試結果提交給設計師，也不知道設計師是否會遵循建議
這似乎不對。
我已經注意到越來越多的公司在調研和設計師之間拆分他們的用戶體驗實踐。問題是，“用戶體驗設計師”通常不僅要處理交互設計，還要處理視覺設計。盡管易于使用的工具的出現(xiàn)使得創(chuàng)建可點擊的原型變得容易，但這是兩個不同的技能。我期望交互設計師分析行為和工作流程，并充當用戶的擁護者；視覺設計師則負責推廣品牌。
將設計團隊分成調研人員和設計師可能會阻礙有效的軟件開發(fā)。為了真正了解用戶，設計師需要培養(yǎng)共情心。他們和其他團隊成員可以通過進行用戶調研或可用性研究——或者參與調研過程來實現(xiàn)這一點。這就鎖定了用戶的目標和痛點，并讓設計師了解到什么是最重要的點，這將有效幫助如何更有針對性的設計。除了對設計人員有好處之外，定期的用戶調研還可以讓公司了解用戶的期望和行為。如果這些好處能被廣泛理解，那公司一定會對共情心和用戶調研付出比口頭更多的心思了。
功能原型和測試不足
Alan Cooper是視覺基礎的創(chuàng)造者和用戶體驗的領袖，也是《囚犯們管理收容所》一書的作者，他在Twitter上抨擊了“原型和測試”的思維模式并表示：“原型和測試不是交互設計”。 Cooper寫道交互和測試能讓領導感到高興，但它只是蚍蜉撼大樹。盡管它創(chuàng)造了微小的改進，讓設計師和他們的領導們充滿希望和快樂，但它從來沒有真正從大的程度上理解用戶或者產品。
我們都搞錯了
我們已經看到，在設計思維的大旗下，公司可能會跳過移情階段，回歸到一個舒適、獨立的設計過程。設計思維確實帶來了一個有價值的原型/測試階段，但在用戶研究上的偷工減料卻使本末倒置，并錯過了一個時機，去進行具體的見解和創(chuàng)新，從而可以將產品推向頂峰。而斷斷續(xù)續(xù)的研究只會拖延我們“想要知道我們的用戶想要什么”的心態(tài)。
雖然強調視覺設計的技巧，但分離研究和設計，可能消耗掉那些面向認知將用戶體驗放在首位的設計師。視覺設計提供了一個重要的初步印象，許多研究表明，人們對第一眼有吸引力的網站的評價通常比較高。但視覺只是用戶體驗中的一部分。一個經常使用你的產品的用戶到底是如何評價的？視覺效果將發(fā)揮一定作用，但我認為它更有可能依賴于一個偉大的工作流程——需要反復跟進用戶體驗的流程。
我們到底要什么？
我不知道出了什么問題，但我猜是我們的理由還不夠充分。我們都含蓄地理解真正的用戶體驗過程的價值，但開發(fā)或市場主管是否也是如此？
可能是我們自己被自己的完美所欺騙了。我們已經大幅改善了用戶體驗的程度，現(xiàn)在在任何手機上都可以找到偉大設計的例子。改進后的開發(fā)工具利用了我們創(chuàng)新的交互模式，小工具使平面設計看起來很棒。也許開發(fā)領導者覺得他們已經看到了足夠好的設計，他們相信他們也可以做到這一點。
作者：March1996
鏈接：https://www.zcool.com.cn/article/ZNzYyNDU2.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
按鈕這個組件，在我們UI設計中出現(xiàn)頻率最高，交互使用最重要，確在用戶體驗上最容易被忽略的一個組件元素因此我們要對按鈕做一個重新認識在沒有互聯(lián)網的時代，按鈕就已經被人們廣泛使用了，例如：電燈的開關、電視機的遙控器、最早的固定電話等等，在物理形態(tài)下的按鈕也將是互聯(lián)網時代出現(xiàn)后UI按鈕組件的前身，目前物理按鈕仍在被廣泛沿用，作為UI設計中的按鈕組件，不管如何演變，萬變不離其宗，依然需要參考現(xiàn)實環(huán)境物理按鈕，按鈕的交互就是通過觸摸能夠完成用戶的行為需求，所以按鈕的設計理念一定是直觀性和易用性優(yōu)先，從而指引用戶完成輕松無障礙的完成任務。
我們在UI設計環(huán)節(jié)如何將按鈕完美呈現(xiàn)，是我們將要深入研究一個課題，按鈕的交互體驗、視覺體驗會影響到產品的轉化、引流、行動觸發(fā)等。
按鈕是一個帶有明確指示性的交互提示組件，它指引用戶準確的完成下一步的操作，UI設計中一項任務的關鍵節(jié)點與轉折點的操作步驟，都是通過按鈕來完成的。
我們平時見到UI設計中的按鈕，第一眼看上去很簡單，大多是由一個底色塊或一個帶描邊框加上文字注釋組合構成的，其實真正的按鈕是由其大小尺寸、擺放位置、顏色、文案、圓角的大小…等細節(jié)元素組成，對細節(jié)的運用和把控，直接關系到用戶的使用體驗。
我們在UI設計中，設計按鈕時，會深度探究按鈕在當前環(huán)境下的意義，出現(xiàn)在哪里？是否需要增加按鈕？為何增加按鈕？
按鈕功能：
展開、收起、下拉、加減等功能，重點強調的是功能，在操作之后會發(fā)生一些交互形態(tài)的化這種按鈕主要起到通過功能形態(tài)的變化來告知用戶操作的信息與結果。
引導用戶接下來的操作：
我們完成一項內容編輯或信息的確認后，就會對當前環(huán)節(jié)的頁面失焦（視覺焦點），而引導型按鈕（如：下一步保存、支付、確定）就會重新聚焦視覺重點，通過按鈕功能的文案描述告知用戶下一步該怎么辦。
行為習慣養(yǎng)成：
培養(yǎng)用戶的點擊習慣，當我們在一個操作按鈕之后會得到相對應的信息反饋，并且可以持續(xù)的給用戶帶來價值那么我們設計這個按鈕時可以重點突出這個按鈕的視覺表現(xiàn)力，在同維度不同的區(qū)域保持這個按鈕視覺上的統(tǒng)一持續(xù)培養(yǎng)用戶的點擊習慣，以后在遇到類似的按鈕時思維的慣性就會引導這個行為完成點擊操作。
按鈕需要經過很多細節(jié)的設計，才能發(fā)揮出按鈕的最大作用例如，內容的長短/邊距；容器的大小、圓角；填充色的主/次之分…等，讓我們來了解按鈕到底是由哪些屬性、元素構成。
圓角：通過視覺上給用戶的感受，圓角的大小決定按鈕的氣質，小圓角是按鈕經常使用的如：4PX圓角，也有比較嚴謹?shù)摹⒘α啃偷娜苯且灿腥岷偷綐O致的全圓角等等。
圖標：可視信息抽象化表達，通過圖形直觀表達文字的含義，例如：加載中編輯等。
容器：是按鈕上所有信息的載體，包含顏色、紋理、文案、圖標等元素。
邊框：確定按鈕的邊界，常用于次級按鈕描邊。
文案：用文字表達按鈕的含義，文案要精煉簡要。
背景：表達按鈕的狀態(tài)，形象氣質，品牌氣質。
投影：投影主要運用于凸顯層級關系，讓按鈕在原有維度提升，達到視覺聚焦的作用，往往配合紋理與漸變色可以打造更好的視覺體驗。
按照功能屬性分類，可以將按鈕分為流程控制和功能選項兩大類別
流程控制：常見的傳統(tǒng)按鈕，如支付、確定、下一步、確定、保存等，容器承載著圖標、圖標加文案、文案等形式。
功能選項：開關、加減控件、標簽欄、分類、狀態(tài)切換等，操作之后只針對當前頁面做出屬性上的的調整，不涉及流程的變化。
視覺呈現(xiàn)上有所區(qū)分，在不同的頁面可能存在同等級的權重
常規(guī)型按鈕：常見的按鈕，在同一個頁面出現(xiàn)多個常規(guī)型按鈕時，有主次之分。
虛線型按鈕：常用于添加、上傳等操作。
文本按鈕：僅用文字作為觸發(fā)點，部分會用主色、右側箭頭、下劃線等方式。
高權重：帶有填充色的主功能操作按鈕，當同一個頁面存在多個按鈕，只允許存在一個高權重（主操作）按鈕。
中權重：帶邊框輪廓的按鈕，同一頁面可存在多個中權重的按鈕。
低權重：文本按鈕，圖文按鈕、圖標按鈕，同一頁面可存在多個低權重按鈕。
是設計過程的重要組成部分，在不干擾界面視覺的前提下，對每個按鈕的樣式、狀態(tài)有清晰的定義，與其他元素布局區(qū)分開來。
待激活狀態(tài)：需要完成規(guī)定業(yè)務流程的操作、或滿足一個以上必要的前置條件后才允許交互。
正常狀態(tài)：按鈕的正常狀態(tài)，可正常進行交互操作。
點擊狀態(tài)：按壓效果，表示按鈕正在進行交互還未結束，交互完成后，即會引發(fā)此按鈕的真實事件。
加載狀態(tài)：產生交互后沒有立即執(zhí)行、或系統(tǒng)需要一定的時間才能執(zhí)行完成。
禁用狀態(tài)：暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能操作此按鈕 。
PC端設計按鈕時，注意到鼠標的點擊精確度高一些，通常我們會將按鈕設計的小一些同時也能讓整個界面看起來更加細膩，只要不影響操作，36px~48px 范圍內的按鈕是比較常見的。
移動端的按鈕設計，我們要更多的考慮到物理尺寸，即手指（指尖）在操作的時候需要占用的實際范圍。
標準參考：設計規(guī)范中，將按鈕的最小點擊區(qū)域規(guī)定為 42pt/84PX，一旦小于這個數(shù)值，操作時就會出現(xiàn)精準度較低的情況，導致操作失誤或無效。
文字按鈕：文字按鈕，自身可視化面積較小，所以我們要在操作熱區(qū)上做規(guī)劃，熱區(qū)大于文字按鈕可視化范圍，方便用戶操控。
「費茨定律」告訴我們「目標尺寸越大，移動至目標所花費的時間就越短」，所以在滿足手指觸控范圍的同時，還要根據(jù)所對應功能的權重占比來適當調節(jié)按鈕的大小，當某個元素的尺寸越大就越吸引眼球，就更容易被視覺捕捉到，也更容易被「點擊」，精準度被降低的同時，也減少了用戶的操作成本。
我們以8像素柵格系統(tǒng)、iOS的2倍圖為例，較為常見的有：小型-64px、中型-80~88px、大型-98px、超大型-隨機這四種按鈕。
設計風格常見，例如扁平化、微質感、擬物化、新擬態(tài)（概念）...
扁平化按鈕：填充色平鋪風格，沒有多余的視覺干擾，這種類型的按鈕一般在應用中用的最多，例如：工具型應用、B端應用等。
微質感按鈕：填充漸變色基礎上加入淺淺的投影效果，保持了信息內容的簡潔、同時讓用戶產生更強的點擊欲望更加耐看。
擬物化按鈕：設計的很立體，3D效果、屬性樣式豐富多彩，參考現(xiàn)實世界中的事務或攝取應用場景中的某些元素，使其更加逼真，有較強的代入感。例如：游戲類應用、H5專題、運營banner等。
新擬態(tài)按鈕：風靡一時的風格，目前只有少數(shù)工具類應用使用了新擬態(tài)，例如：計算器、AI設備控制、有道云筆記等。
頁面出現(xiàn)多個按鈕時，只允許存在一個主操作按鈕，其他不做特別設定如果次要按鈕/操作較多，也不益過多的出現(xiàn)次級按鈕，可根據(jù)權重降級處理，以小圖標或文字按鈕的方式呈現(xiàn)。
主/次操作按鈕要統(tǒng)一樣式，用戶需操作時，盡可能的減少其思考及選擇時間按鈕應該迎合用戶固有認知及慣性思維，節(jié)省時間成本，提高操作效率。
常見的按鈕還是以「小圓角」和「全圓角」居多，也有部分按鈕「直角」需要根據(jù)產品的行業(yè)屬性與氣質來選擇最合適的圓角類型，盡量避免大圓角（卡片圓角除外），按鈕外形要規(guī)整統(tǒng)一不可以出現(xiàn)不方不圓的奇怪樣式。
小圓角：小圓角按鈕的圓角值通?？刂圃诟叨鹊?/5、1/6，根據(jù)按鈕的尺寸大小，直接將圓角值固定在 4px（目前使用）能減少設計組件的數(shù)量也利于開發(fā)做組件封裝后續(xù)調用。
全圓角：全圓角按鈕的圓角值固定為高度的1/2，或者在軟件的圓角設置中直接將數(shù)值拉到極限。
直角：不設圓角值，在PC端較為常見，也有部分較為嚴謹?shù)囊苿佣藨檬褂弥苯前粹o。
按鈕中的文字要便于用戶理解，不能過于陌生或繞口，用戶碰到不易理解的信息會產生困惑甚至誤導用戶導致操作失誤從而造成損失，文字還需要言簡意賅，不能過多或折行且能合理的引導用戶完成操作。
如圖：
文案歧義就很明顯，想要挽留用戶，刻意將主次按鈕樣式對換，希望用戶操作不成功，那么用戶在需要取消訂單時就疑惑了，到底是點擊「確定」還是主操作按鈕「取消」才能取消成功呢？或許稍加思考，用戶也能反應過來但無疑增加了選擇難度、思考時間及操作成本。
按鈕中的文字太大或太小都會影響用戶對信息接收的效率，比例需要適中文字太大會感覺很擁擠，沒有呼吸感，要給文字四周留下足夠的空間，同時文字太小會顯得小氣，看起來也會比較吃力，不利于信息接收。
按設計好按鈕組件之后，頁面中的其他組件或元素要與按鈕有很明顯的區(qū)別避免讓用戶產生不必要的誤解。
在彈窗中，主按鈕是在左？還是在右？這是一個爭論不休的問題，在移動端的彈窗設計中，主按鈕靠右就行了，不一定絕對正確，但絕對不是錯的，根據(jù)調查數(shù)據(jù)顯示，單手使用右手操作手機的用戶比左手操作手機的用戶量高且用戶也有一定的意識，左側為上一步、右側為下一步，頂部左側為返回右側為保存或確定。
可操控性是按鈕設計最重要目標之一，不僅要樣式統(tǒng)一，還應符合用戶的認知讓用戶能快速知曉這個元素能否點擊？如果將按鈕樣式設計的與用戶認知有較大的偏差，不易于用戶理解。
按鈕設計中，大部分都需要用戶完成一定任務之后才能正常操作下一步按鈕在完成之前，需少用禁用按鈕，在前面有講到「待激活狀態(tài)」，即在按鈕中填充淺淺的主體色等待用戶完成任務激活。
通常系統(tǒng)默認不允許操作或存在時間限制會用到「填充為灰色的禁用按鈕」即便如此，也要盡量讓系統(tǒng)將其隱藏萬不得已的情況下需要在按鈕附近說明情況，以免使用不當引起用戶的負面情緒。
對于設計師來說，按鈕作為設計組件之一，有很多細節(jié)容易被忽略，我們需要對每一個細小的元素進行深入思考無論任何大小組件，都需要做到精益求精，才能給用戶帶來更好的使用體驗，那我們該如何實現(xiàn)按鈕的正確使用方法？我們總結了20條把按鈕設計到最好的建議，我們一起來看。
按鈕在產品界面中是非常重要的元件之一，按鈕作為用戶引流和行動觸發(fā)來說都是至關重要的，如何把按鈕設計做到最好，是設計師需要不斷探索的問題，把控好每一個細節(jié)才能讓每一個元件更精致，我們梳理總結了 20 條在設計按鈕時需要避免的問題，把按鈕設計做到最好。
在整個產品設計中我們要根據(jù)信息傳遞的優(yōu)先級對按鈕設計進行主次區(qū)分，設計表達要有強弱差異按鈕設計可以通過大小、填充、描邊、色相、飽和度等的不同來進行強弱差異，不同強弱的差異表現(xiàn)出按鈕的等級：行動觸發(fā)主要、次要、輔助、禁用等。
對于按鈕邊框來說，我們通常采用全圓角和小圓角居多，這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用，只是相對較少，會顯得按鈕不方不圓的，設計表現(xiàn)顯得不夠成熟，全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通?？刂圃?1/4H（高度值的四分之一）以內。
給一個有彩色系按鈕設置投影時，選擇無彩色系（比如黑色）也能達到效果，只是為了得到更好的視覺效果，提高用戶感官體驗。我們也可以嘗試基于按鈕本身色相來確定投影顏色，這樣得到的效果會顯得更加干凈清爽。
雖然投影的運用可以使按鈕更有層次感，但是也需要根據(jù)具體情況慎用，比如對于一些淺色按鈕來說也許投影反而會降低按鈕的識別度，使得按鈕配色環(huán)境顯得不夠干凈清爽。
按鈕文字和邊框的設計要預留一定的留白，不要做“舍不得”的設計，使得按鈕給人感覺很擁擠，看看文字大小和負空間之間是否存在某種比例關系，找到這個比例關系運用到按鈕設計中，可以給按鈕賦予生命具有呼吸感。
按鈕的存在是為了引導用戶進行引導式操作，而不是讓用戶對其產生困惑，按鈕設計別讓用戶思考這是啥，是否可以點擊，需要簡潔明了的對此操作進行指引，用戶已經養(yǎng)成對按鈕外觀和功能的行為習慣，如果你設計的按鈕樣式與“標準”差異太大，用戶就會產生疑惑，影響使用體驗。
當設計元素規(guī)范統(tǒng)一時，用戶操作過程中的理解成本最低，一致性也因此成為最有力的可用性原則之一，我們在設計按鈕的時候要注意樣式表達的一致性，比如：按鈕形狀、色彩定義、風格特征等，這樣會使得我們的設計可用性更強。
直接字符輸入形成按鈕內部所需箭頭，這樣的表達方式自然顯得粗糙些，箭頭要當成圖標來進行設計，控制好箭頭的粗細和文字筆畫的粗細值接近，這樣顯得更有細節(jié)和態(tài)度。
通過信息對比才能形成主次之分，按鈕設計需要在風格上進行區(qū)分，達到層次結構的視覺提示，主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺效果，更好的引導用戶根據(jù)設定的軌跡進行操作。
在整個項目設計規(guī)范中，我們需要避免讓用戶把非按鈕狀態(tài)的內容進行誤判，在確定好按鈕樣式特征之后，不要在其它場景運用其樣式特征或者類似的風格特征，這樣會讓用戶產生錯誤的認知，因而進行無用的操作。
在進行按鈕文本思考的時候，盡量減少字符和單詞的數(shù)量，內容表達言簡意賅，只要能夠準確傳達信息識別度即可，有時候也不一定需要文本，圖標可以傳遞的信息可以考慮文本的減少也許可以讓界面的呼吸感更強。
單行文字的可讀性更高，如果出現(xiàn)換行就會降低可讀性，我們在設計按鈕的時候，確保文本內容在一行之內顯示如果設計空間不足要考慮文本內容的精簡。
底部按鈕的運用并非固定不變，不同機型或者特殊場景的考慮需要靈活轉變，比如 iPhone X 等類型的機型，由于底部需要預留主頁控制器的位置，所以在設計按鈕的時候需要考慮上中下的過渡銜接，這樣才能帶給用戶更好的感官體驗。
按鈕需要方便用戶進行點擊操作，如果用戶點擊失敗或者誤點到周邊元素，就會帶給用戶不友好的體驗。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實現(xiàn)出來的按鈕交互熱區(qū)都會滿足點擊需求，如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區(qū)能夠滿足點擊區(qū)域要求。
在同屬板塊內的按鈕設計，我們可以通過按鈕的強弱來體現(xiàn)層級關系，不要讓按鈕大小不一致這樣視覺平衡會受到影響。
稍微注意細節(jié)的設計師也不會讓文本的長度超過按鈕寬度，這是一個非常明顯的錯誤。但是按鈕文本變得很長卻是遇見過的，幾個字即可表達的意思卻使用了過多修飾詞。在進行按鈕文本思考的時候，要根據(jù)最佳的視覺效果設定一個最大值，不要任其無限制發(fā)揮，這樣會使得最終的視覺效果大打折扣，甚至影響用戶感官體驗。
按鈕設計需要考慮在不同環(huán)境下的適應度，確保用戶可以一目了然的發(fā)現(xiàn)它，現(xiàn)在很多產品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運用，需要考慮大多數(shù)背景下的適配。在進行色彩選擇的時候始終保持按鈕與背景的高對比度和可讀性。
關于按鈕文本的設置需要結合信息傳遞的識別性和準確性，雖然純圖標顯得設計簡潔大方，但是需要考慮圖形是否可以準確的表達其含義，不會讓用戶出現(xiàn)誤解或者錯誤的認知。所以，按鈕去文本需要根據(jù)文案代表的含義來判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡潔的設計表達效果更佳。
色彩在設計中是最直觀的體現(xiàn)，不同的顏色會傳遞不同的性格，帶給用戶認知差異。而按鈕的顏色選擇也并非隨性發(fā)揮，需要結合品牌色和輔助色作出判斷。
通常比較統(tǒng)一的標準是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會選擇輔助色來表達，紅色或者橙色多為行動刺激作用，不適合在非品牌色的時候濫用。淺灰色或者低飽和度的色系會帶有不可用、禁用失效等屬性，需要酌情選擇。
引導用戶作出選擇的按鈕應該放在左邊還是右邊，根據(jù)操作系統(tǒng)的不同也引起了設計師們的爭議。比如 Windows 系統(tǒng)習慣將確認按鈕放在左邊，而蘋果系統(tǒng)卻選擇了放在右邊，用戶運用系統(tǒng)的習慣會影響其行為的適應度。不過要是在移動端個人傾向于將引導用戶作出選擇的按鈕放在右邊，更有利于用戶點擊。
有時候為了防止用戶誤操作，我們會將確認操作的按鈕放在左邊，通過助力設計讓用戶再次確認。所以，一方面我們要結合操作系統(tǒng)的習慣，另一方面也要結合用戶習慣，將按鈕放在最合適的位置，便于用戶操作。
作者：CC小酷
鏈接：https://www.zcool.com.cn/article/ZMTUxNTI4MA==.html
來源：站酷
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
蘭亭妙微(www.chinatradebeam.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
在我們使用的產品中，多多少少都會有一些微交互的穿插，但由于微交互性能的不搶眼也不明顯的條件下，所以往往會被很多設計和開發(fā)人員所忽略。
但在一個優(yōu)秀的產品中，微交互卻是必不可少的重要關口，它直接承載著用戶在使用產品時對產品細節(jié)的細微體驗。雖然在互聯(lián)網產品早期，微交互曾被人稱之為是“很炫酷的特性象征”，但時隔今日，在這百花齊放的產品大環(huán)境中，其實微交互已經慢慢從膚淺的炫酷轉型為附有內涵的用戶體驗關鍵要素了。
作為產品細節(jié)體驗的重要承載，微交互的價值與地位逐漸提升，在用戶使用產品過程中，它不僅僅能促進產品與用戶的互動性，而且還能激發(fā)用戶對產品的積極感覺，并且最終影響用戶的整體行為。
微交互的基本概念就是指：關注一項主要任務、一個目的得事件過程。通常情況下，微交互需要關注得是這個事件的整體交互過程，并且它存在的目的也是為了讓用戶在使用產品時能感覺到順暢性、一致性，并產生心理的愉悅感，從而讓用戶喜歡產品，愛上產品，從而留住用戶。
如果籠統(tǒng)概括的話，可以說微交互幾乎會遍布任何設備、任何應用程序中。并且他們存在的價值就是讓用戶高興。就單純從產品說起，如果說在產品設計中，在大多數(shù)用戶與產品接觸時都能發(fā)現(xiàn)微交互的存在與應用。
1、你在Web看一段話時結尾展示是“…”時，那么通過你的心智程序，你就會下意識的將光標停留在這段話上，在這樣的情況下，微交互就會出現(xiàn)了，則在這段話的周圍就會出現(xiàn)這句話完整的展示從而被你瀏覽。
2、還有一種常見的就是在你輸入錯誤的信息時系統(tǒng)會自動識別，并在末尾彈出消息提示，提示你需要從新輸入，更有優(yōu)秀的系統(tǒng)會從你開始輸入時就跟進你的輸入狀態(tài)，時刻提醒你輸入的結果是否正確。
其實這些小的視覺暗示和微妙的指示就是所謂的為微交互，也有人稱之為“圍觀互動”。雖然這些微交互平日不太容易能被用戶所直觀的發(fā)現(xiàn)，但也就是這些微小的交互，才能提升一個產品的整體用戶體驗。所以說，無論他們是多么的微妙，你都需要重視起來，并嘗試著將一般的設計方案和這些結合起來使用，并提供一些有效的信息，這樣才能讓你的用戶在瀏覽產品界面和執(zhí)行操作時有基本的保障。
知道了什么是微交互后，你還需要吃透微交互它到底是怎么工作的，只有這樣才能確保你靈活的使用微交互…
微交互的工作一般要分為四個基本要素：觸發(fā)、規(guī)則、反饋、循環(huán)。
觸發(fā)簡單講就是“啟動微交互”，例如：點擊按鈕或點擊鼠標。這里需要注意的是，觸發(fā)并不單純是人為操作的開始，它也同樣包含系統(tǒng)自動啟動的操作，比如說在你設備上收到一份郵件或短信時，這時的你其實并沒有任何操作，但系統(tǒng)就會有一個微交互啟動為你提示，這時的微交互就是被動的。
這些所謂的啟動微交互，需要注意的是必須與一組已經擬定好的操作規(guī)則一起工作，這些規(guī)則里包含了什么能做，什么不能做的內容。
微交互的規(guī)則就是表明用戶在操作后產品該如何按照用戶正確的心智程序進行微交互，它決定了觸發(fā)之后會發(fā)生什么事情。因此，當你在拉下界面時，產品的規(guī)則就應該包含下滑的規(guī)則，這同時也能表明用戶當時的心理是希望看到界面以上的結果或者下拉刷新看到更多新的結果。同樣，規(guī)則就是規(guī)則，在你沒有進行操作時，規(guī)則時而也在生效，例如：微信里對方并未添加你為好友，但依然和你說了句話，規(guī)則就是生效的，這里的規(guī)則就是阻止了信息的傳入。
顧名思義反饋在現(xiàn)實中就是你與人對話交流，對方饋贈你的信息，在產品中這個環(huán)節(jié)也同樣必不可少，它的存在可以讓用戶明確知道在用戶操作后產品發(fā)生了什么，出現(xiàn)什么結果的回饋信息。在微交互中，用戶看到的、聽到的、操作的、甚至包含感覺到的，都是可以反饋的。
例如：
1、看到的：希望打車，看到的反饋就是地圖和輸入起始地/目的地的界面，這就符合了用戶心理；
2、聽到的：在與人聊天時，其他人也和你說了句話，就聽到手機“蜂”一聲，這樣的反饋就是提醒用戶聽到有新消息；
3、操作的：在任何產品中都需要用戶操作，那么然后反饋用戶操作結果；
4、感覺到的：這包含界面樣式、產品交互是否符合用戶心理預期，并通過預期實現(xiàn)操作后得到想要結果，這里面就包含感覺到的反饋；
循環(huán)在微交互里屬于次數(shù)的說明，在我們手機設置鬧鈴時就經?？吹接刑嵝岩淮?、一周提醒等說明，這就是循環(huán)的微交互，循環(huán)的微交互基本上定義了交互的某種性質，它會告訴你隨著時間的推移發(fā)生了幾次，發(fā)生了多少。
例如：在你去銀行自動取款機取錢時輸入的密碼，如果輸入錯誤，就會提示你還有幾次輸入，這樣的就是循環(huán)的過程，等于是在原地打轉，但當你成功進入后就會從這個環(huán)節(jié)進入到下一個環(huán)節(jié)繼續(xù)循環(huán)。
說了這么多，我想你應該知道了微交互的工作方式以及流程，那么接下來要說的就是微交互需要在何時、何地以及如何才能正確使用了。
現(xiàn)如今產品幾乎都帶有滑動的交互，之所以滑動越來越多，是因為滑動交互可以清楚的展示給用戶行為操作路徑，而點擊確實短期記憶性的，當用戶想要開始滑動時，這是用戶操作前的準備，而當用戶正在滑動時，這是操作中的節(jié)點，這時滑動的界面就會隨著手勢的方向進行移動并告訴用戶界面即將去往哪里，下次想要找到該從哪里找的路徑，在操作結束后，微交互完成，這時操作后的結果，這一整套流程下來，通過短小的微交互，就能很清晰的告知用戶他在做什么以及他做了什么。
下拉/側拉菜單就像產品某個界面內的一個抽屜，它里面包含了當前界面賦予的更多選擇，并且還能占據(jù)極小的空間，根據(jù)用戶的心智程序來講，竟然是抽屜就應該拉取，這才符合環(huán)境映射的條件。當前在產品設計內，幾何都包含了下拉/側拉菜單的微交互，例如淘寶的側拉菜單、美團的下拉菜單都是微交互的展示，在輕松點擊后，界面tab則下拉或側拉出一個抽屜，里面就包含了N多個附加選擇或者篩選器。
對于產品的不斷迭代與改版，其界面一定會發(fā)生一些細微的變化，更有時功能會作為轉移，那么為了能更好的引導用戶的操作路徑，就需要用到一些引導頁，我這里說的引導頁并不是啟動頁后的大篇章引導，而是在半黑透明遮罩的同時，流出需要用戶操作的功能引導，在聚焦了操作功能上，賦予一些微交互，會加大用戶對產品的認可，包括喜歡新產品。
在用戶正在輸入一個列表菜單時，最需要的微交互就是即使反饋，作為產品首先應該賦予用戶的就是安全與人性，安全是指產品在用戶心理的懷疑指數(shù)多少，指數(shù)越低安全度越高，而人性就需要操作的了路徑與展示是符合用戶的心理預期的。安全與人性都可以通過微交互來實現(xiàn)，例如在建設銀行APP登陸前會出現(xiàn)安全掃描，在支付寶輸入了支付密碼后出現(xiàn)的結果符合了人性思維。
有些app會出現(xiàn)卡片類樣式的界面，并通過用戶的操作實現(xiàn)卡片淡化和卡片丟棄等微交互，這樣的微交互則更加具象了用戶的真實空間感受，通過與真實環(huán)境的結合，將用戶帶入產品，使用戶在使用產品時會有現(xiàn)實版的感覺。例如：陌陌的附近人卡片丟棄，網易音樂的音樂專輯封面淡化。
微交互在產品內可以說是無處不在，雖然這些都是一些很小的細節(jié)，如果只是靜態(tài)展示可能并沒有太大作用，但通過產品與用戶的這種互動，變相交流，微交互在產品的整體體驗上就可以增加巨大的價值，這也可能是所謂的“宜家效應”吧，用戶在自己親手制作或行動時，才能賦予產品更大的價值感。
好的產品必須擁有這種精心設計的標志，它不僅包含了對用戶的心智理解，更多的，是對用戶的一種尊重與情感抒發(fā)。
情感是我們生活中不可割舍的元素，UI設計師也開始在設計時添加「情感化元素」
藍藍設計的小編 http://www.chinatradebeam.com