中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

處理UI 狀態(tài)變化的設(shè)計很麻煩，因為要為了一個組件做多種變化很苦惱。但后來發(fā)現(xiàn)，其實設(shè)計本身一直都不是狀態(tài)設(shè)計的痛點，東補西補缺漏的狀態(tài)設(shè)計、以及精準地告訴工程師什么時候要怎么做才是癥結(jié)點。因此，如何從頭開始避免缺漏狀態(tài)和與工程師精準溝通將是本篇文章的重點。

UI 設(shè)計師的工作壓力很大。除了要做出好設(shè)計之外，設(shè)計師們有時得面對客戶跟上級的壓力、有時得負責(zé)使用者經(jīng)驗跟流程的研究、而且還要苦惱于如何跟有效率的工程師溝通。為了減輕設(shè)計師朋友們的負擔(dān)，我將試圖從讓很多設(shè)計師頭痛的狀態(tài)管理著手，介紹一個更好、更輕松的處理UI 狀態(tài)設(shè)計的方法。

我一直都知道處理UI 狀態(tài)變化的設(shè)計很麻煩，因為要為了一個組件做多種變化很苦惱。但后來發(fā)現(xiàn)，其實設(shè)計本身一直都不是狀態(tài)設(shè)計的痛點，東補西補缺漏的狀態(tài)設(shè)計、以及精準地告訴工程師什么時候要怎么做才是癥結(jié)點。因此，如何從頭開始避免缺漏狀態(tài)和與工程師精準溝通將是本篇文章的重點。

狀態(tài)和Flowchart

為了讓設(shè)計團隊準備好所有需要的狀態(tài)，大家一直有在提倡五種基本狀態(tài)（空狀態(tài)、正在加載狀態(tài)、錯誤狀態(tài)、失敗狀態(tài)、成功狀態(tài)）讓設(shè)計師參考。這些狀態(tài)是必要存在的，但如果要求更精準的定義的話，我想有需要先區(qū)分狀態(tài)與前臺視覺（視圖/view）的差異：狀態(tài)其實只是一個UI組件在接收到輸入（input）后的輸出（output），而一個狀態(tài)不一定需要相對應(yīng)的前臺視覺。

也就是說，雖然一個UI 組件可能只擁有五個狀態(tài)，但每一個卻可能擁有多種視覺的可能。如果不太懂，看一下這個提交按鈕（submit button）的例子應(yīng)該就可以理解了。

一個提交按鈕通常會包含預(yù)設(shè)、載入、成功和失敗的狀態(tài)，而一個狀態(tài)可能有多種相對應(yīng)的視覺。

話說回來，我們怎么知道提交按鈕除了預(yù)設(shè)狀態(tài)之外還有其他三種狀態(tài)？而且這些狀態(tài)要如何在彼此之間切換呢？

多數(shù)人應(yīng)該都是靠畫出一個flowchart（流程圖）來解決視覺化這些問題的。

Flowchart 不足以表達詳細的設(shè)計細節(jié)

處理UI 狀態(tài)時，幫助我們管理這些狀態(tài)的方法需要有效的傳遞一個最重要的訊息——組件在接收某個特定輸入后應(yīng)該切換到哪個輸出狀態(tài)。而flowchart 雖然在其他情境下都是非常有效的方法，卻不是上述訊息的有效傳遞者，原因如下：

1. 方便性低：?Flowchart需要特定軟體或插件的幫忙才可以繪制、修改或維護，因此檔案也會比較肥一點。
2. 簡潔度低：很難一眼看出到底有哪些狀態(tài)是需要設(shè)計的、哪些輸入值是會確實改變狀態(tài)的。
3. 復(fù)雜度高：繪制flowchart還需要注意選擇正確的符號或顏色。

簡而言之，我相信多數(shù)設(shè)計師都有發(fā)現(xiàn)用flowchart 來管理UI 狀態(tài)是相對低效而且不精準的事實了。所以，現(xiàn)在就要來介紹更好的方法了。

有限狀態(tài)機器表格（Finite State Machine/FSM table）

FSM表格

千萬不要被這名字給嚇到了！我們來一步一步了解他有多簡單。

什么是FSM 表格

有限狀態(tài)機（Finite state machine / FSM）并不是一個實體——它只是一個整理了各種可能狀態(tài)和輸入值的抽象思考機器。這個方法不僅被大量使用在電腦工程的世界里，也可以運用在各種日常物件里。如果有興趣的話，維基百科介紹的一些實用案例都很淺顯易懂，馬上就能理解了。

如何使用

首先，可以發(fā)現(xiàn)上圖表格里有三個欄位：From State （起始狀態(tài)）， Input （輸入）， To State （切換狀態(tài)）。

在From State 這一欄里，每個表格就是一個狀態(tài)。

緊接著From State 是Input 欄位。這個欄位涵蓋了表格中最重要的資訊：在每個狀態(tài)中，只有哪些特定動作是可以執(zhí)行的（或是哪些特定輸入是可以接收的）。

最后則是包含了所有輸出狀態(tài)的To State 欄位。

這個表格清楚的列出了所有可能的狀態(tài)：什么時候可以做什么、以及做了什么會有什么結(jié)果。跟flowchart、文字說明或互動原型（interactive prototype）比起來，我相信多數(shù)工程師都會偏好這個表格，因為而這些正是工程師最需要的資訊！

除了大幅減低溝通成本之外，因為FSM 表格清楚的交代了各種因果關(guān)系，我認為訓(xùn)練自己使用這個方法也能培養(yǎng)出簡易的工程思維，借此確保自己做的決定都是基于嚴謹?shù)倪壿嬛系摹?/p>

更有效的團隊溝通

簡單的介紹完FSM 表格之后，我們就可以開始看一個實際的登入頁面案例，體會一下這個方法的好用之處了。

登入頁面的flowchart 和wireframe

這個頁面很簡單，只包含了一個header、heading、一組包括兩個輸入欄位的表單以及一個提交按鈕。我們?nèi)耘f需要一組flowchart 來幫我們厘清整個登入頁面的功能，但就像之前提到的種種因素一樣，flowchart 是無法表達精確的組件狀態(tài)變化的。

雖然從flowchart 當中我們只得知了在使用者按下提交按鈕、并且驗證失敗后，畫面會顯示錯誤訊息。但當使用者聚焦（focus）、失焦（blur）或點擊（click）各個欄位時產(chǎn)生的錯誤訊息要怎么顯示？每個欄位的驗證功能要在哪個動作執(zhí)行后開始？提交按鈕在所有欄位被驗證成功前要被鎖住嗎？

“有非常多種情況需要考量”

這些很細微的決定都會影響到使用者經(jīng)驗，但作為一個設(shè)計師，到底要怎么做才能把這些決定精準地傳達給工程師呢？Flowchart、文字說明、口頭會議或互動原型（interactive prototype）都是很沒效率又不精準的方法，但只要準備好一個FSM 表格，一切問題馬上迎刃而解。針對不同的使用者經(jīng)驗考量，設(shè)計師甚至可以快速的準備好多種表格以備不時之需。

舉例來說，如果設(shè)計考量是想要提交按鈕在所有欄位被驗證成功前被鎖住的話，F(xiàn)SM 表格會是這樣呈現(xiàn)的：

“FSM 表格：鎖住提交按鈕的版本”

但如果設(shè)計想要參考Google的Material Design Guide的話，表格會變這樣：

“FSM表格：參考Google Material Design Guide??的版本”

是不是簡單到不行？比其他任何辦法都好太多了！

更贊的是，F(xiàn)SM 表格還能夠處理任何跟資料無關(guān)的UI 組件。假如設(shè)計師想要header 的行為跟這個美麗的網(wǎng)站一模一樣的話，F(xiàn)SM 表格可以精準的傳達每個header 樣式變化的時機點。

快速、簡單又清楚，一個結(jié)合了wireframe、flowchart 以及FSM 表格的登入頁面狀態(tài)管理文件就這樣做好了。

雖然我沒有在大公司工作過，但我猜在一個分工清楚、資源充足的組織里，UI 設(shè)計師很有可能完全不需要煩惱狀態(tài)、使用者經(jīng)驗或流程之類的煩惱，只要好好做好設(shè)計的工作就好。但多數(shù)的UI 設(shè)計師應(yīng)該還是像我了解的一樣，必須要同時面對很多的問題，還要跟工程師、管理職以及其他設(shè)計師溝通狀態(tài)轉(zhuǎn)換的問題吧。

因此，我希望這個FSM 表格真的能夠幫助這些設(shè)計師們在溝通上節(jié)省寶貴的時間、做出更多更棒的設(shè)計、甚至培養(yǎng)一個新的思維。

最后，歡迎留下任何對FSM 表格的想法或心得！

本文由 @愛情俠 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖作者提供