2016-10-21 ui設計分享達人
藍藍設計( m.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
微交互對優秀的UI設計師有多重要?UI設計的細節很重要，它不僅僅體現在靜態的元素上，動效和微交互也是如今UI和UX設計中最重要的細節。想要打造優秀的移動端UI設計，微交互和動效設計是繞不開的問題，今天我們一起來聊聊這個~
著名魔術師 Dariel Fitzkee 曾經說過：“魔術是表演和細節的藝術?！倍换ピO計同樣是如此。設計師大多能夠很好的控制設計的大方向，但是細節處理不當的話，會讓優秀的設計方案功虧一簣，要不怎么說“細節當中藏有魔鬼”呢?也正是因此，那些精心設計的微交互會讓用戶體驗顯得精巧而到位。
想要了解微交互到底對你的設計有什么好處，那么你最好將你的設計思路勾勒出來。用來繪制原型和線框圖的工具有很多，這里推薦使用近期比較火的Adobe Experience，也就是Adobe XD，它是專門為線框圖和交互設計而生的。當你有了工具，也有了想法，接下來我們開始進入正題，一起來看看有哪些值得注意的微交互細節設計。
一、呈現系統狀態
對于UI的狀態設計，Jakob Nielsen 曾經說過，“系統應當始終通過合理的反饋告知用戶當前正在發生的事情，所處的狀態。”這也就意味著界面需要通過反饋讓用戶明白發生了什么，而無需用戶猜測。而帶有動效的微交互正是以提供視覺反饋而聞名。想要展現創意十足的微交互動效，數據的上傳和下載過程都是不錯的選擇。一個經典的案例就是下來刷新，這是目前移動端UI中內容更新最常見的交互手段，一個暢快的下拉刷新微交互動效能夠讓用戶欲罷不能。
二、讓按鈕和控件容易被感知
即使隔著手機的玻璃屏幕，界面上的按鈕和控件也應當是易于被感知，讓人覺得它們是真實有形的。運動軌跡和視覺線索能夠以即時反饋的形式，彌合這種現實和虛擬圖像之間的界限，讓人看起來、感覺上都是在直接操作。UI界面中的按鈕能夠模仿現實中的按鈕反饋來強化交互，簡單的說來，就是讓用戶輸入和操作的視覺反饋更加明顯一些。視覺反饋之所以有用，是因為它符合用戶對于交互的期望，當用戶針對某個控件進行了操作，而它們給予了對應的反饋，這種感覺是非常良好的。
三、構建有意義的過渡
動效一個很重要的功能，是展現狀態和內容的轉變與過渡，用來解釋屏幕上各種元素的排布和層次。圖標可能會從一個形狀變為另外一個形狀，在不同的時間以不同的功能呈現，而這種過渡和轉變就是靠動效來表現的。動效設計的優勢不僅僅是單純的引導，它讓轉變和過渡的等待過程變得更加有趣，愉悅用戶。在移動端設備上，過渡動效顯得尤為重要，它使得大量的信息呈現不再那么單調。Apple iOS系統的UI設計中就很好的利用了這些有意義的過渡動效。下面的案例中，用戶點擊文件夾或者APP，圖標當大擴展到整個屏幕，展現出細節和詳情。
四、幫助用戶快速入門
動效和微交互在用戶快速入門的時候是非常有用的。當用戶初次使用應用的時候，流暢的用戶體驗和貼心而不繁復的引導對于用戶的初次使用和交互有著直接的影響。設計師將最關鍵、最重要的信息通過引導告知用戶，同時還要控制好整個引導流程足夠簡明而舒適。這個過程中，動效和微交互讓信息展現更加順暢，幫助用戶更加地抵達目標。
五、凸顯UI中的變化
微交互能夠直接吸引用戶的注意力。在絕大多數情況下，設計師通過動效化的微交互將用的注意力吸引到某個重要的細節上去(比如通知推送)。不過，在這個過程中，要確保動效是功能性的，并且對于用戶而言是合理而能接受的。
六、增加令人愉悅的細節
動效在APP中的主要是以過渡的形式呈現，而那些真正讓用戶感到愉悅的動效大多是非標準和非常規的，它們的不同和令人意外的體驗是取悅用戶的關鍵。下面的案例中，觸發按鈕之后，動效提供了兩重功能：告知用戶按鈕已經觸發，然后見證一段有趣的動畫。
