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

編輯功能對于用戶來說，是非常重要的一個功能，產(chǎn)品能夠讓用戶自定義編輯，把選擇權(quán)交給他們，有利于產(chǎn)品呈現(xiàn)多樣性。而在這些編輯功能背后，是否存在著共性的設(shè)計呢？本文從如何觸發(fā)、如何展示、如何保存三個方面進行探索，一起來看看。

最近對于編輯功能做了一個簡單的產(chǎn)品調(diào)研，然后驚訝地發(fā)現(xiàn)，

現(xiàn)在市面上流行的編輯功能樣式盡然有十幾種

單純從數(shù)量上來看，造成編輯樣式如此多的原因，在于所對應(yīng)的業(yè)務(wù)的多樣性。

但如果跳出業(yè)務(wù)層面，僅從產(chǎn)品層面來看待這些編輯功能

“在這些編輯功能背后，是否存在著共性的設(shè)計呢？”

或許我們可以從以下三個方面進行一番探索：

• 如何觸發(fā)？
• 如何展示？
• 如何保存？

一、如何觸發(fā)

用戶在使用某款產(chǎn)品時，最為常見的頁面狀態(tài)為“查看態(tài)”

與這一常規(guī)狀態(tài)相比，“編輯態(tài)”則是一種非常規(guī)狀態(tài)

而這一非常規(guī)狀態(tài)的觸發(fā)，則是需要一個前置的交互操作的。

作為編輯功能的一部分，這一交互操作本身與頁面內(nèi)容并沒有太多的邏輯關(guān)聯(lián)性

所以在實際使用的過程中，很容易作為干擾項，影響用戶當(dāng)前的閱讀進度。

那么為給予用戶更好的使用體驗，應(yīng)該如何設(shè)計這一前置的交互操作呢？

“明確閱讀體驗與編輯需求的優(yōu)先級”

“查看態(tài)”與“編輯態(tài)”并不是一對相互對立的狀態(tài)，相反，這兩種狀態(tài)是可以共存的，而通過需求優(yōu)先級的排序，可以幫助我們確定觸發(fā)操作的交互比重，從而保證當(dāng)前用戶閱讀需求與編輯需求的平衡。

1. hover態(tài)

常規(guī)狀態(tài)下，頁面只是單純的文案展示

當(dāng)鼠標(biāo)hover到內(nèi)容上方后，對應(yīng)的內(nèi)容尾部就會顯示“編輯”按鈕，點擊后

當(dāng)前字段就可切換至可編輯狀態(tài)。

顯然，對于hover態(tài)的觸發(fā)方式來說

其最大的優(yōu)點就在于：“將選擇權(quán)交還給用戶”

用戶可以根據(jù)自己的需求，主動選擇按鈕的顯隱

這樣就可以極大程度的減少前置交互操作，對于用戶閱讀體驗的影響。

hover態(tài)的缺點：“觸發(fā)方式不易發(fā)現(xiàn)，導(dǎo)致編輯功能被忽略”

hover態(tài)輕量級的觸發(fā)方式，將選擇權(quán)交還給了用戶

但具體的觸發(fā)過程，則需要用戶將鼠標(biāo)移動到具體內(nèi)容上

并且對于這一操作，頁面上也不會有對應(yīng)的提示

這樣很容易就會導(dǎo)致，編輯功能被完全遺忘。

意見與建議：

• 如果需要編輯的字段比較重要，或者用戶對于當(dāng)前內(nèi)容編輯的可能性較高，hover模式的編輯觸發(fā)方式，不建議使用
• 如果只是有簡單的編輯需求，并且所編輯的字段不是很重要，那么為了用戶閱讀體驗的流暢性，可以考慮這種觸發(fā)方式

2. 外顯態(tài)

常規(guī)狀態(tài)下，編輯按鈕直接外顯，與頁面內(nèi)容同級，點擊按鈕后，可進入到編輯狀態(tài)中，這種外顯態(tài)的觸發(fā)方式，其優(yōu)缺點也十分的明顯。

優(yōu)點：減少用戶使用路徑

按鈕外顯，用戶不需要進行鼠標(biāo)hover，直接點擊編輯按鈕，從而進入到編輯態(tài)，這樣使用戶更容易觸達編輯態(tài)，整個流程簡潔高效。

缺點：干擾閱讀進度，增加用戶閱讀理解成本

編輯按鈕與頁面內(nèi)容，本身并不存在多少的邏輯關(guān)系，編輯按鈕對于用戶“閱讀”這一行為來說，就是一個干擾信息。

干擾信息的存在，就會徒增用戶的閱讀理解成本，干擾用戶閱讀進度。

意見與建議：

• 如果當(dāng)前頁面的內(nèi)容，用戶有很大概率編輯，建議使用外顯態(tài)的觸發(fā)方式
• 如果用戶需要編輯的內(nèi)容信息比較重要，建議使用外顯的觸發(fā)方式
• 不適合那些以閱讀、查看為核心需求的場景使用

二、如何展示

在選擇了觸發(fā)方式之后，點擊對應(yīng)按鈕就可以切換至編輯狀態(tài)，而這個編輯狀態(tài)，應(yīng)該如何展示呢？

1. 當(dāng)前頁面

點擊編輯按鈕后，當(dāng)前頁面中對應(yīng)的字段，就會自動切換到編輯狀態(tài)

而這些可以在“當(dāng)前頁面”被編輯的內(nèi)容，其自身也具有一些特點：

• 所編輯的內(nèi)容邏輯單一，一般不會出現(xiàn)級聯(lián)編輯的操作
• 所編輯的內(nèi)容簡單，沒有復(fù)雜的交互邏輯
• 所編輯的內(nèi)容樣式簡單

像知乎所設(shè)計的編輯模塊，在當(dāng)前頁面進行的編輯，就是簡單的文字輸入修改

并且在編輯的過程中，不會產(chǎn)生新的級聯(lián)編輯的可能

在我們?nèi)粘Ｊ褂弥?，最為常見的?dāng)前頁面的編輯展現(xiàn)形式，就是excel表格的編輯

除非進行表格的新增，否則這個excel表格的編輯，都是在當(dāng)前頁面進行編輯

這種在當(dāng)前頁面進行編輯的形式，其最大的優(yōu)點：

“用戶可以很方便地對于整體信息進行查看”

這樣就可以保證整體編輯流程的連貫性

但這種頁面內(nèi)的編輯，由于所支持的編輯樣式較少

這樣就對于可編輯的范圍進行了限制，不能給予用戶更完善的編輯體驗

意見與建議：

• 盡量選擇單字段編輯或字段較少的編輯
• 對于閱讀查看有一定要求的場景，可以采用這種編輯展現(xiàn)方式
• 若所編輯的信息內(nèi)容比較重要，不建議采用這種編輯樣式

2. 彈窗/浮層

點擊編輯按鈕后，編輯態(tài)的展現(xiàn)樣式以彈窗/浮層的形式呈現(xiàn)，這種展現(xiàn)樣式最大的特點，就是跳出了原有頁面，以一個“中間態(tài)”的形式來展示所要編輯的信息，而這種“中間態(tài)”的展示，也造就了該樣式的優(yōu)點與缺點。

優(yōu)點：

承載更多信息：

彈窗/浮層，相當(dāng)于是在原有頁面的基礎(chǔ)上，開辟了一個新的空間，新空間所帶來的信息增量，相較于原有頁面的信息量，肯定是更多的，所以彈窗/浮層這種形式，可以承載更多的信息。

聚焦用戶注意力：

點擊按鈕后，彈窗/浮層出現(xiàn)。在那一刻，用戶所有的目光及注意力，會被強行聚焦在彈窗/浮層上。

支持較復(fù)雜的編輯功能：

頁面內(nèi)的編輯形式為了保持統(tǒng)一性，只能支持文本編輯等簡單的編輯模式，而彈窗的展現(xiàn)形式，由于其空間的延展性以及內(nèi)容的相對獨立性，可以支持一些較復(fù)雜的編輯模式，如：附件上傳、圖片上傳等。

缺點：給用戶造成較為嚴重的割裂感

編輯態(tài)作為一種非常規(guī)狀態(tài)，狀態(tài)之間的切換，很容易就會給用戶造成影響，而彈窗/浮層的展現(xiàn)樣式，是在原有頁面的基礎(chǔ)上對于原有頁面的跳出，突然出現(xiàn)在用戶眼前，并且也不是用戶所習(xí)慣的內(nèi)容及狀態(tài)，必然會與用戶現(xiàn)有的使用狀態(tài)產(chǎn)生矛盾，打破用戶當(dāng)前的狀態(tài)，從而產(chǎn)生割裂感。

適合場景：

• 所編輯的信息為重要信息，需要使用者注意力集中
• 所編輯的內(nèi)容，在數(shù)量上有一定的要求
• 所編輯的內(nèi)容，在編輯形式上有一定的要求

3. 新頁面

點擊標(biāo)記按鈕后，當(dāng)前頁面會自刷新或者新開一個新頁面，這種展現(xiàn)方式的核心，是將內(nèi)容放置在一個新的空間下進行編輯，這一新的空間，可以看成是彈窗/浮層的放大版，所以這種新頁面的展現(xiàn)方式，也就繼承了彈窗/浮層的優(yōu)點，并且在數(shù)量與質(zhì)量上，都得到了不同程度的提高。

但與提高的優(yōu)點相對應(yīng)的，彈窗/浮層所具有的缺點，也是被同比例的放大，無論是新增頁面，還是頁面的自刷新，對于用戶閱讀查看體驗的影響，都是成倍增加的。

因為這種展現(xiàn)方式，不僅僅會強制打斷用戶當(dāng)前的閱讀進度，甚至還會將整個閱讀過程切斷，切斷用戶與之前頁面的聯(lián)系。

適用場景：

• 大量數(shù)據(jù)的編輯填寫（比如：新增一篇文章、新建一個數(shù)據(jù)表格等）
• 交互邏輯較多的編輯填寫（比如：所編輯的內(nèi)容包含文本、下拉框選擇、附件上傳、圖片上傳等）

三、如何保存

在編輯完成后，就需要對于所編輯的信息進行保存，現(xiàn)在市面上比較流行的保存方式有兩種。

1. 失焦后，自動保存

沒有保存按鈕，用戶可以隨意點擊任何地方，只要當(dāng)前編輯狀態(tài)失焦，就會自動退出當(dāng)前的編輯狀態(tài)，同時剛才所編輯的內(nèi)容，也會一并保存下來，這種保存方式的特點就是“輕量”，適合與上文提到的“hover態(tài)”配套使用。

適用場景：

• 編輯的信息為單字段的信息——多字段的編輯，很容易出現(xiàn)尚未編輯完，由于誤觸而退出編輯狀態(tài)的情景，這時候就需要用戶再次點擊進入編輯模式，拉長了用戶使用路徑
• 編輯的信息不能是太重要的信息

2. 點擊按鈕后保存

編輯完成之后，點擊保存按鈕，退出編輯態(tài)，并且保存當(dāng)前所編輯的所有信息，這種保存方式相較于失焦保存就更為正式，用戶需要點擊固定的“保存”按鈕后才能保存。

這種保存方式最大的特點就是“確定性”，用戶可以明確的知道，在哪里可以進行信息的保存，并且這種方式與用戶之間的交互感也更強，可以給予用戶更好的結(jié)果反饋。

適用場景：

• 多字段編輯
• 列表編輯
• 整頁面編輯
• 彈窗/浮層編輯

引用文獻：

• 栗子設(shè)計喵：《頁面編輯竟然包含這么多細節(jié)，如何把編輯體驗做的順滑》
• LIZ醬：《B端產(chǎn)品設(shè)計細節(jié)分析：編輯功能》