頁面編輯竟然包含這麼多細節，如何把編輯體驗做的順滑
如何做版面
編輯導語：設計師在面對頁面編輯的一些設計時，會更注重使用者體驗方面的細節，因為使用者在編輯頁面時會遇到很多問題，這時怎麼讓使用者能順利的完成編輯是非常重要的；本文作者分享了關於頁面編輯的細節，我們一起來了解一下。
Ant Design的致謝中提到了《Web介面設計》，最近剛好讀了一下，發現AntD給出的設計原則正是來自於這本書。
這本書是08年出版的，裡面的許多設計案例還來自於雅虎時期，距離今天已經有點遙遠了，但是它的設計原則依然具有參考價值。
01 直截了當
咱們今天主要來說，書中的第一條原則「直截了當」，文中給出的解釋是，讓介面能夠直接響應使用者的操作。
直白一點兒講就是，使用者需要在哪裡操作，就直接讓他在原頁面操作；比如說，使用者需要編輯頁面名稱，就在當前位置編輯，不要單獨開啟一個新頁面編輯。
直截了當有兩個優勢：
使用者操作更加流暢：如果一個頁面編輯，一個頁面展示，這種體驗對於使用者來說是割裂的。
不脫離使用者原有情境：比如說，使用者在編輯頁面的同時，依然可以參考頁面中的其他資訊，在很多時候對使用者來講是有必要的。
02 編輯功能
網頁通常主要用於瀏覽，如果想要編輯的話，就要藉助表單，主要包含輸入欄位和提交等按鈕。
下面主要從以下四種情況分析，看看如何利用「直截了當」的原則，讓頁面編輯變得更加絲滑。
1。 單欄位行內編輯
單欄位行內編輯，是最基礎的行內編輯樣式，就是在頁面內編輯一個文字欄位，編輯操作能夠直接在原地進行。
設計單欄位行內編輯時，通常有兩種方式，針對這兩種方式，AntD中給出了更加符合目前設計樣式的示例。
第一種是隱藏編輯連結。
在普通瀏覽模式中，隱藏編輯連結，不區分欄位是否可編輯。
在滑鼠懸停在當前欄位時，出現編輯提示，需要注意以下三點：
「指標」變為「手型」；
編輯區域底色變黃；
出現「Tooltips」提示單擊編輯；
滑鼠點選後，出現輸入框、確定、取消表單元素，同時游標定位在輸入框中。
第二種是顯示編輯連結。
在瀏覽的時候便在可編輯行附近出現文字鏈/圖示。
滑鼠點選後，和第一種編輯模式一樣。
兩者的主要區別在於，編輯功能是否容易發現。所以，這時候需要評估易讀性和易編輯性哪一個更重要。
當頁面「易讀性」遠比「易編輯性」重要時，可以採用隱藏編輯連結的形式；如果當頁面以「易讀性」為主，同時又要突出操作行的「易編輯性」時，可使用顯示編輯連結的形式。當「易讀性」遠比「易編輯性」重要時，可以使用「單擊編輯」。
2。 多欄位行內編輯
上面的例子只是在行內編輯了一個值。如果是有多個值，或者被編輯的項是一串更加複雜的資料型別，我們應該怎樣編輯。
多欄位行內編輯便是解決這個問題的，同時編輯多個值。
騰訊問卷的問題編輯，便是一個很好的多欄位行內編輯的例子。問題主要由題目和問題兩部分組成。
當滑鼠懸停在問題上時，便會出現邀請編輯的按鈕。
滑鼠點選問題後，標題和內容便會變成可以編輯的表單，可以直觀的編輯內容，而且表單還可以擴充套件，包含其他項。
AntD也給出了一個表格中多欄位編輯的案例，當點選編輯按鈕後，表格內欄位都直接變成輸入框。
注意事項：
編輯模式在不破壞整體性的前提下，可擴大空間，以便放下「輸入框」等表單元素；其中，在 Table 中進行編輯模式切換時，需要保證每列的不跳動。
在「多欄位行內編輯」的情況下，顯示的內容和編輯時所需的欄位會存在比較大的差異，所以需要「解釋剛剛發生了什麼」來消除這種視覺影響。
比如，使用者更改了表格中的值，然後點選儲存，那麼詳情所在的網格出現「黃底」，表明該物件發生了更改，底色持續幾秒後，恢復正常。
3。 覆蓋層編輯
覆蓋層編輯是透過在頁面上方新增一層，來放置編輯表單。雖然編輯時也不會離開當前頁面，但卻不是在頁面中直接實現編輯。
選擇覆蓋層而不是行內編輯的原因有很多，不可能把某個複雜的編輯任務，直接安排在同一個頁面完成。如果嵌入頁面的編輯區域很大的話，會把過多內容推向下方，損害了頁面的整體感。
覆蓋層主要有浮層、對話方塊和抽屜三種。
如果需要編輯的資訊較少，那麼可以直接使用浮層承載。
比如，下圖中展示態雖然只有短短一行，但是其中需要編輯的資訊有5條，如果直接用行內編輯的話，頁面變化過大會失去整體感。這時候可以採用浮層的方式展示。
滑鼠「點選」圖示觸發編輯態，滑鼠「點選」懸浮層以外的其他區塊後，直接儲存輸入結果並退出。
當需要編輯的資訊過多時，可以採用對話方塊和抽屜承載，因為咱們上次專門有一篇文章介紹了對話方塊和抽屜的區別，就不再重複了，沒看過的小夥伴可以看一下《對話方塊vs抽屜，輔助頁面如何決策》。
4。 表格編輯
線上表格編輯現在越來越常見了，但是因為Excel早就成了表格編輯的一種事實標準。所以，線上表格設計的時候，儘量和Excel的操作保持一致。
比如，現在的飛書等雲文件，幾乎和Excel非常像。
03 案例分析
假設有一個這樣的頁面，它的主要功能是讓使用者瀏覽資訊，但是，現在又提出了一個新的需求，使用者需要編輯頁面上的資訊。
其中，存在90%的可能性是，使用者發現頁面1～2處資訊錯誤，存在10%的可能性是，使用者發現10+處資訊錯誤，需要修改。
這時候應該如何設計編輯功能？
使用者僅需要修改1～2處錯誤時，最好的方案是隻進行區域性修改，直接採用單欄位行內編輯；但是當錯誤達到一定數量時，再去一個個點選修改就非常繁瑣了，最好採用覆蓋層編輯中的抽屜編輯。
因此，這時候我們可以採用單欄位行內編輯中的隱藏編輯連結，與抽屜編輯相結合的方式，滿足不同的使用場景。
因為這個頁面還是以易讀性為主，並且如果過多編輯連結同時顯示的話，非常干擾使用者檢視資訊，因此採用隱藏超級連結的形式。如果需要修改的資訊很多的話，使用者可以直接點選右上角「編輯」按鈕，批次修改資訊。
04 總結一下
針對直截了當選擇，我們可以總結出四種不同的編輯形態，主要是單欄位行內編輯、多欄位行內編輯、覆蓋層編輯和表格編輯。並且在實際設計中，多種形式可以同時使用。
本文由@栗子設計喵 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
