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

讓界面直接相應(yīng)用戶的操作，是一條簡單的規(guī)則，通過頁內(nèi)編輯、利用拖放、直接選擇這幾種模式可以實現(xiàn)這一操作。本文主要對業(yè)內(nèi)編輯進(jìn)行介紹，希望對你有所啟發(fā)。

Alan Cooper總結(jié)了一條簡單的規(guī)則：在哪里輸出，就要允許在哪里輸入。就是讓界面能夠直接響應(yīng)用戶的操作——直截了當(dāng)?？梢酝ㄟ^以下模式更直接的響應(yīng)用戶操作：頁內(nèi)編輯、利用拖放、直接選擇。

一、頁內(nèi)編輯

頁內(nèi)編輯最直接的形式是在頁面的上下文中編輯。用戶不會離開頁面，直接在頁面上下文中編輯，此時應(yīng)該支持行內(nèi)編輯。

行內(nèi)編輯的優(yōu)點是不脫離上下文，在編輯的同時不斷參照頁面中其余內(nèi)容。如當(dāng)編輯照片標(biāo)題時，如果能看到照片會很有幫助。如果編輯的元素從屬于較大的元素合集，同樣有必要采用行內(nèi)編輯。如微博的發(fā)表或回復(fù)評論。

1.1 單字段行內(nèi)編輯

編輯操作發(fā)生在原地而不是單獨的窗口或者頁面。如網(wǎng)易郵箱的個人名稱編輯。

不過這種個人信息的編輯采用直接行內(nèi)編輯的并不常見，用的更多的是在新頁面中的批量個人信息編輯。

注意事項：用戶怎么才能發(fā)現(xiàn)單字段行內(nèi)編輯功能，可以嘗試以下幾種：

• 顯示提示條
• 用背景色突出顯示可編輯區(qū)域
• 展示編輯光標(biāo)

只有當(dāng)用戶鼠標(biāo)懸停在標(biāo)題上時，這些提示才會出現(xiàn)。因此也可以在標(biāo)題旁邊放一個“編輯”按鈕，點擊即可觸發(fā)編輯。不過添加“編輯”按鈕也會涉及平衡頁面視覺干擾的問題。每添加一個按鈕，會同時增加頁面的理解難度。

如果易讀性比易編輯性重要，則在用戶與內(nèi)容交互時再給出可以編輯的提示，其他時候應(yīng)該隱藏提示。

1.2 多字段行內(nèi)編輯

如果行內(nèi)編輯的是多個值，或者被編輯的項是一種比文本字符串更復(fù)雜的數(shù)據(jù)類型時，編輯內(nèi)容由主題和內(nèi)容組成，為了便于閱讀，可以將主題顯示為標(biāo)題，將內(nèi)容顯示為常規(guī)文本。編輯時，這兩個值分別對應(yīng)表單中的兩個文本框，同時帶有提示性標(biāo)簽。

如京東商城在退換貨場景下，對于收貨地址及個人聯(lián)系方式的編輯，就采用了直接在當(dāng)前頁面進(jìn)行的多字段行內(nèi)編輯。

注意事項：單字段行內(nèi)編輯時，顯示和編輯模式的差異化較小，多字段行內(nèi)編輯時，顯示內(nèi)容與編輯時可能存在較大差異。編輯模式需要不同大小的頁面空間和布局，也會使用不同數(shù)量和類型的組件。

1.3 覆蓋層編輯

通過在頁面上方添加一層來放置編輯表單。雖然編輯過程不會離開當(dāng)前頁面，但卻不是在頁面中直接實現(xiàn)編輯，而是把一個輕量級的彈出式對話框作為編輯窗格。

選擇覆蓋層編輯而非行內(nèi)編輯的原因有很多：

如果嵌入頁面的編輯區(qū)域太大，會將內(nèi)容過多的推向下面而有損頁面的整體感，我們應(yīng)該避免這樣的干擾。

如京東商城在下單場景下對于收貨地址的編輯：

如果有必要占用專門屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務(wù)也不重，就可以考慮使用覆蓋層編輯。

如微信公眾號平臺中對于圖片素材的分組排序功能，需要單獨一塊覆蓋層區(qū)域，只顯示分組的名稱，不需要把照片詳情展示出來。

總結(jié)：

使用覆蓋層應(yīng)該考慮以下因素：

• 編輯模塊明顯比顯示結(jié)果大得多
• 在頁面中編輯模塊占用的區(qū)域會導(dǎo)致重要信息下移
• 展開后的編輯模塊可能有部分延伸到窗口之外，覆蓋層可以保證編輯模塊完全可見
• 你希望為用戶提供清晰的編輯區(qū)域

1.4 表格編輯

表格編輯在企業(yè)級的Web應(yīng)用中更為常見。啟動編輯功能，必須通過鼠標(biāo)點擊的方式，而非鼠標(biāo)懸停。這樣就能確保網(wǎng)格的整潔顯示效果。試想如果鼠標(biāo)每經(jīng)過一個單元格就顯示一個編輯框，會有多么煩人。

表格首要考慮的數(shù)據(jù)展示，其次才是編輯功能。

總結(jié)：

• 著重關(guān)注表格數(shù)據(jù)的可讀性
• 不要通過鼠標(biāo)懸停啟動單元格編輯，否則會干擾到用戶的正常界面交互手過鼠標(biāo)單擊啟動編輯功能
• 為編輯操作提供大一些的空間，例如使用下拉編輯框或增大編輯單元
• 盡可能模仿用戶已熟悉的常規(guī)性單元格切換操作(例如使用Excel的慣例)

1.5 群組編輯

如果想在盡量保持頁面項目整齊有序的前提下支持編輯功能，可以考慮通過某種交互進(jìn)入一種特殊編輯模式–群組編輯。

盡量保持編輯模式與顯示模式之間的差異最小化。

正常情況下iPhone主屏幕上的圖標(biāo)是被鎖定的，長按某個圖標(biāo)不放會啟動編輯模式，此時可以把圖標(biāo)拖動到新的位置。

Sketch軟件中，當(dāng)進(jìn)行「自定義工具欄」時，所有的工具欄項目同時抖動，提示用戶可以進(jìn)行增減或重新排序，調(diào)整完成后再切回普通模式。

注意事項：

易發(fā)現(xiàn)性：

提供可切換編輯模式的好處是保證編輯模式操作不會干擾正常顯示，不足之處則是難以被發(fā)現(xiàn)。既要容易被發(fā)現(xiàn)，又要確保易讀性的矛盾很常見，這就必須根據(jù)用戶的需求來加以平衡。

對稱性交互：

進(jìn)入編輯模式和退出編輯模式的位置相同，且交互方式應(yīng)該一樣，如通過點擊「編輯」「完成」按鈕。

1.6 模塊配置

要修改某個單獨模塊的配置時，不必打開新的頁面，而是直接配置每個模塊的內(nèi)容數(shù)量和類型。

如網(wǎng)易郵箱中對頁面顯示的郵件列表數(shù)量設(shè)置，在右上角的「設(shè)置」中選擇數(shù)量，選完后頁面中直接根據(jù)新數(shù)量展示。

注意事項：

視覺干擾：

為每個模塊都添加編輯鏈接會造成視覺干擾。替代方案是在整個頁面上添加一個鏈接編輯，通過這個鏈接開啟所有模塊的編輯功能，也就是使用群組編輯模式。

如淘寶的商品展示形式，點擊右上角的圖標(biāo)切換所有商品的排版形式

列表形式：

宮格形式：

總結(jié)：

頁內(nèi)編輯是實現(xiàn)直接交互的重要手段。以下是選擇具體模式的一些指導(dǎo)原則：

• 如果頁面內(nèi)有一個字段需要編輯，應(yīng)優(yōu)先使用單字段行內(nèi)編輯
• 對于多個字段或更復(fù)雜的編輯，可以使用多字段行內(nèi)編輯
• 如果編輯時的上下文無關(guān)緊要，或者用戶在編輯時應(yīng)該全神貫注，則使用覆蓋層編輯
• 網(wǎng)格編輯應(yīng)該遵循表格編輯模式
• 在處理頁面中的多個項時，群組編輯是平衡視覺干擾與易發(fā)現(xiàn)性的有效方案
• 如果想讓用戶直接配置模式，則應(yīng)該使用模塊配置模式