UI：泛指用戶的操作界面，包含移動APP，網頁，智能穿戴設備等。可以讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由，充分體現軟件的定位和特點。UI用于軟件、游戲開發，網頁設計制作等。
UE：用戶使用產品時的純主觀感受。個體差異也決定了每個用戶的真實體驗是無法通過其他途徑來完全模擬或再現的。但是對于一個界定明確的用戶群體來講，其用戶體驗的共性是能夠經由良好設計的實驗來認識到。UE貫穿在一切設計、創新過程。
簡單的說UE就是交互和動效，UI就是圖標。UE和UI在一定程度上是有所不同的，UI重視的是為用戶提供良好的感官，而UE重視的是對用戶行為的引導。兩者應該是互相包含，互相影響。
那么前端、UI、UE三者怎么更好的協同工作呢？
第一步：產品經理出原型圖和需求文檔
原型圖不要有色彩搭配，只用灰白黑三色，不然會影響到UI的色彩選擇，原型能表明界面有哪些元素即可，時間如果很緊張，有時候產品經理一張紙一根筆畫個草圖也是可以的（理想情況下。盡量還是不要）。然后進行需求評審，評審通過就可以交付UE。
第二步：UE出交互稿和交互說明文檔
交互會出一個交互文檔，有時候省時間的話，會每個模塊都出一張大圖，大圖中有頁面，有彈框，有各種操作的狀態圖，圖下會有配有文字說明。然后進行交互評審，通過后交給UI設計。
第三步：UI設計
UI會按照交互設計稿，出UI設計圖，UI設計圖包含了每個基本頁面元素、彈框、狀態變化。然后上傳到相應平臺，現在大部分用的都是藍湖。 然后進行UI的評審，評審通過后，前端按照交互稿和UI設計圖進行前端頁面的開發。
說明一下，只有前端是需要等交互和UI的，后端和測試是不用等交互和UI的，需求評審后即可進行接口的開發和測試用例的編寫。
更多UI設計的知識歡迎找我咨詢哦~
編輯導語：費茨法則是當一個人用鼠標來移動鼠標指針時，屏幕上的目標的某些特征會使得點擊變得輕松或者困難；目標離的越遠，到達就越是費勁。本文作者分享了關于費茨法則的設計案例以及UI/UE使用方法論，我們一起來看一下。
Fitts’ Law，網絡上的中文翻譯五花八門，但不管是「菲茨」、「菲茲」還是「費茨」，其實都是指同一個法則啦。
費茨定律是我以往文章出現頻次最多的一個設計法則，和費茨定律相關的設計案例也非常多，但以往作為小插曲提及，都沒有進行過深度討論。
要詳細了解費茨定律，我先從維基百科提煉一下它官方的解釋。
費茨定律是一個關系人機交互以及人體工程學活動的數學模型，由保羅·費茨在1954年首次提出，故被命名為「費茨定律」；費茨定律是多用于表現指、點動作的概念模型，無論是真實世界進行的物理接觸，或是在屏內用假想的點擊設備（例如鼠標）進行的虛擬觸碰。
——維基百科
費茨定律預測了指點設備「移動到目標區域所需的時間」是「距目標區域距離」和「目標區域大小」的函數。
其數學關系為 T=a+blog2(D/W+1) ，其中：
我們在這里不去做專業細致的數學研究，所以為了方便理解公式，我一般把公式簡略記為 T=f(D/W) ，即T是關于(D/W)的函數表達。
這樣就很方便去記憶，時間T與距離D成正相關，與目標區域W成負相關。即：當指點初始位置距離目標位置越近，且目標位置所占區域越大，所消耗的時間越短。
可能從公式的描述來看，不太熟悉費茨定律的朋友還是有點懵。
確實，費茨定律是一個在眾多設計法則中難得能將交互形態數學公式化的具象模型。那我就不背離這個公式，針對T、D、W這三個關鍵要素，來展開聊聊。
首先弄清楚：當我們在談論費茨定律的時候，我們在談論什么？
每一個方法論都對應研究了一個關鍵指標，而費茨定律對應研究的就是指點設備執行動作的運動時間，試圖找到相關因素來提高有效執行一個選中動作的效率。
如果這么講還是不夠大白話，那我引用一個 Ashley Towers 在《費茨定律及其具體應用》一文中講到的一個生動的例子：
通常我們進行一次目的地明確的指點動作可以細分為兩個部分：
① 首先一個大幅度的移動，將指點設備移向與目標大致相同的方向和區域；
② 緊接著是一系列精細的小幅度微調，來將指點設備精確定位在目標中心。
你現在就可以做一個小實驗來觀察這一過程：舉起你的手臂并試著用手指指向遠處的一個小物體，例如遠處墻上的一個電燈開關。開始你的手臂可能會往開關的位置大幅的移動而且很有可能稍微過頭了一點。接下來你會做一些微小的調整動作直至你的手指正好對準目標開關的中心。
——引自 Ashley Towers
上面這個例子中，你要準確對準電燈開關這一系列動作所消耗的時間，就是費茨定律要研究的關鍵指標；而在人機界面交互中，我們在研究優化用戶體驗時，通常也希望能幫助用戶快速而精準地完成一系列指點操作。
但費茨定律也有它的適用范圍局限性，不要在任何場景都胡亂套用。
關于費茨定律我有一點需要提醒：費茨定律主要用于表現指、點動作的概念模型，指點設備可以是鼠標、手，甚至腳（油門與剎車設計中也包含了費茨定律的奧義）；但對于按鍵操作型設備，就不太適合了，例如如果你正在設計不支持觸控的車載HMI。
在引用設計方法論之前，一定要先清楚自己手里項目的用戶操作背景。
知道了費茨定律是在研究什么之后，我們就要看看影響關鍵指標的因素有哪些了。
根據公式，時間T與距離D成正相關，即起始點與目標區域越近，那么指點動作的時間越短，有效觸及目標的可能性越高。
那么是不是我們設計控件時，將元素位置都盡量貼近就合理的了呢？并不是。
首先是把元素位置都擠在一起，影響設計視覺風格，在“Less is More”留白美學盛行的當下，盲目減少元素與元素之間的間距肯定是不可取的。
其次因為距離越小，有效觸及目標的可能性越高，不注意把控元素與元素之間的間距，也很可能導致用戶產生誤觸，反而降低了用戶的點擊效率。
以百度網頁版的分頁控件來舉個例子：
大家應該都看的出來，最早期第一版的分頁間距雖小，但過小的間距卻大大增加了用戶小幅度微調的時間，極大增加了誤觸其他分頁的可能性。
第二版，雖然分頁間距沒有多大的改進，但可點擊區域（熱區）增大了，還是能夠減少用戶誤觸可能性的。
而百度現在的分頁控件，不論是分頁間距、熱區大小、視覺風格上，都是在三版之中可行性最高的。
這么看來，熱區大小果然也是費茨定律中不可忽略的因素之一。
依然用到 Ashley Towers 指電燈開關的例子。但現在我要你試著指向一個更大的物體，比如說電視或者干脆就是一面墻壁。
這一次你也會以大幅度的手臂動作來使手指指向目標方向，但因為目標體積很大，所以一般情況下你只需要做很少（甚至不需要任何）的微調。
這意味著增加目標區域的有效可觸區域，可以顯著提高用戶選擇效率。但在UI設計中，也不要為了讓用戶方便選中，而盲目放大目標的區域大小。
我在《如何做好「按鈕」的用戶體驗？》一文中引述過一個確定觸摸屏按鈕的最佳觸摸目標尺寸的實驗；可以看到當按鈕的尺寸大到一個的臨界點時，點擊準確率就趨于一個平衡值了，再增大按鈕并不能提升體驗，反而可能影響視覺構圖效果。
在保證可觀的視覺構圖的前提下，我們可以通過巧思來增大可點擊區域；例如在設計選框時，除了選框本身可點擊，也可以擴大點擊區域到文字標簽上。
說到費茨定律中的目標區域W大小，最讓人津津樂道的案例莫過于，Mac OS 與 Windows 應用菜單欄的對比了。
Windows的應用菜單欄是在視窗標題欄的下方，而Mac OS則是把應用菜單欄固定在了屏幕的最頂部。
思考一下，如果從費茨定律的角度，你覺得哪一個方案更好呢？
如果我們假設動作起始點在屏幕中的同一位置，那么按照前面我們說到的起始位置到目標的距離D越小，選擇消耗時間T越少，可能有讀者認為是Windows的設計更好。
但網上很多研究愛好者認為 Mac OS 在這里運用了「邊緣目標無限大」對目標對象的影響。
什么是「邊緣目標無限大」？我們所使用的顯示設備，一般都包含屏幕邊界，也就是說我們不論怎么操作指點設備，都無法突破邊緣，所以邊緣目標在大幅度移動過程中，就不用擔心會超出屏幕范圍。
于是當一個目標被放置在了屏幕邊緣，用戶可以用力地一甩鼠標，不用再進行小幅度微調過程；不用進行微調過程的目標，也就等同于目標的大小變成了無限大，這就是“邊緣目標無限大”的說法由來。
但對于這一個對比案例來說，我其實對網絡上的說法保持中立，不站邊，我認為具體操作需要具體分析。“邊緣目標無限大”是因為我們不需要進行小幅度微調，如果研究對象是“一整個應用菜單欄”，那么 Mac OS 的設計當然是更優的。
但當我要選擇菜單欄中具體的“文件”選項，在 Mac OS 中我依然要進行微調（甚至因為我用力甩鼠標的過程，超過“文件”選項過遠，導致我微調過程時間變長，不信你試試）；而用戶真實使用中，選擇菜單欄中某一個具體選項的場景更多，所以 Mac OS 菜單欄設計是不是真的更合理呢…哈哈 這是我的思考，你也可以想一想~
但「邊緣目標無限大」在移動端上也有相應的應用案例，我覺得更能夠解釋這個設計方法的優勢。
例如微信在編輯朋友圈時，刪除圖像的操作并不像大多數平臺需要手動點擊刪除按鈕，而是按住拖拽圖片到屏幕底部；這讓用戶刪除圖片的過程變得更不需要小心翼翼，而可以“肆意妄為”，用力一拖。
UCD耍家，公眾號：UCD耍家（ID：ucdplayer），人人都是產品經理專欄作家。
本文由 @UCD耍家 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議