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

編輯導(dǎo)語(yǔ)：設(shè)計(jì)師在面對(duì)頁(yè)面編輯的一些設(shè)計(jì)時(shí)，會(huì)更注重用戶體驗(yàn)方面的細(xì)節(jié)，因?yàn)橛脩粼诰庉嬳?yè)面時(shí)會(huì)遇到很多問(wèn)題，這時(shí)怎么讓用戶能順利的完成編輯是非常重要的；本文作者分享了關(guān)于頁(yè)面編輯的細(xì)節(jié)，我們一起來(lái)了解一下。

Ant Design的致謝中提到了《Web界面設(shè)計(jì)》，最近剛好讀了一下，發(fā)現(xiàn)AntD給出的設(shè)計(jì)原則正是來(lái)自于這本書。

這本書是08年出版的，里面的許多設(shè)計(jì)案例還來(lái)自于雅虎時(shí)期，距離今天已經(jīng)有點(diǎn)遙遠(yuǎn)了，但是它的設(shè)計(jì)原則依然具有參考價(jià)值。

01 直截了當(dāng)

咱們今天主要來(lái)說(shuō)，書中的第一條原則「直截了當(dāng)」，文中給出的解釋是，讓界面能夠直接響應(yīng)用戶的操作。

直白一點(diǎn)兒講就是，用戶需要在哪里操作，就直接讓他在原頁(yè)面操作；比如說(shuō)，用戶需要編輯頁(yè)面名稱，就在當(dāng)前位置編輯，不要單獨(dú)打開一個(gè)新頁(yè)面編輯。

直截了當(dāng)有兩個(gè)優(yōu)勢(shì)：

• 用戶操作更加流暢：如果一個(gè)頁(yè)面編輯，一個(gè)頁(yè)面展示，這種體驗(yàn)對(duì)于用戶來(lái)說(shuō)是割裂的。
• 不脫離用戶原有情境：比如說(shuō)，用戶在編輯頁(yè)面的同時(shí)，依然可以參考頁(yè)面中的其他信息，在很多時(shí)候?qū)τ脩魜?lái)講是有必要的。

02 編輯功能

網(wǎng)頁(yè)通常主要用于瀏覽，如果想要編輯的話，就要借助表單，主要包含輸入字段和提交等按鈕。

下面主要從以下四種情況分析，看看如何利用「直截了當(dāng)」的原則，讓頁(yè)面編輯變得更加絲滑。

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

單字段行內(nèi)編輯，是最基礎(chǔ)的行內(nèi)編輯樣式，就是在頁(yè)面內(nèi)編輯一個(gè)文本字段，編輯操作能夠直接在原地進(jìn)行。

設(shè)計(jì)單字段行內(nèi)編輯時(shí)，通常有兩種方式，針對(duì)這兩種方式，AntD中給出了更加符合目前設(shè)計(jì)樣式的示例。

第一種是隱藏編輯鏈接。

在普通瀏覽模式中，隱藏編輯鏈接，不區(qū)分字段是否可編輯。

在鼠標(biāo)懸停在當(dāng)前字段時(shí)，出現(xiàn)編輯提示，需要注意以下三點(diǎn)：

• 「指針」變?yōu)椤甘中汀梗?/li>
• 編輯區(qū)域底色變黃；
• 出現(xiàn)「Tooltips」提示單擊編輯；

鼠標(biāo)點(diǎn)擊后，出現(xiàn)輸入框、確定、取消表單元素，同時(shí)光標(biāo)定位在輸入框中。

第二種是顯示編輯鏈接。

在瀏覽的時(shí)候便在可編輯行附近出現(xiàn)文字鏈/圖標(biāo)。

鼠標(biāo)點(diǎn)擊后，和第一種編輯模式一樣。

兩者的主要區(qū)別在于，編輯功能是否容易發(fā)現(xiàn)。所以，這時(shí)候需要評(píng)估易讀性和易編輯性哪一個(gè)更重要。

當(dāng)頁(yè)面「易讀性」遠(yuǎn)比「易編輯性」重要時(shí)，可以采用隱藏編輯鏈接的形式；如果當(dāng)頁(yè)面以「易讀性」為主，同時(shí)又要突出操作行的「易編輯性」時(shí)，可使用顯示編輯鏈接的形式。當(dāng)「易讀性」遠(yuǎn)比「易編輯性」重要時(shí)，可以使用「單擊編輯」。

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

上面的例子只是在行內(nèi)編輯了一個(gè)值。如果是有多個(gè)值，或者被編輯的項(xiàng)是一串更加復(fù)雜的數(shù)據(jù)類型，我們應(yīng)該怎樣編輯。

多字段行內(nèi)編輯便是解決這個(gè)問(wèn)題的，同時(shí)編輯多個(gè)值。

騰訊問(wèn)卷的問(wèn)題編輯，便是一個(gè)很好的多字段行內(nèi)編輯的例子。問(wèn)題主要由題目和問(wèn)題兩部分組成。

當(dāng)鼠標(biāo)懸停在問(wèn)題上時(shí)，便會(huì)出現(xiàn)邀請(qǐng)編輯的按鈕。

鼠標(biāo)點(diǎn)擊問(wèn)題后，標(biāo)題和內(nèi)容便會(huì)變成可以編輯的表單，可以直觀的編輯內(nèi)容，而且表單還可以擴(kuò)展，包含其他項(xiàng)。

AntD也給出了一個(gè)表格中多字段編輯的案例，當(dāng)點(diǎn)擊編輯按鈕后，表格內(nèi)字段都直接變成輸入框。

注意事項(xiàng)：

• 編輯模式在不破壞整體性的前提下，可擴(kuò)大空間，以便放下「輸入框」等表單元素；其中，在 Table 中進(jìn)行編輯模式切換時(shí)，需要保證每列的不跳動(dòng)。
• 在「多字段行內(nèi)編輯」的情況下，顯示的內(nèi)容和編輯時(shí)所需的字段會(huì)存在比較大的差異，所以需要「解釋剛剛發(fā)生了什么」來(lái)消除這種視覺影響。

比如，用戶更改了表格中的值，然后點(diǎn)擊保存，那么詳情所在的網(wǎng)格出現(xiàn)「黃底」，表明該對(duì)象發(fā)生了更改，底色持續(xù)幾秒后，恢復(fù)正常。

3. 覆蓋層編輯

覆蓋層編輯是通過(guò)在頁(yè)面上方添加一層，來(lái)放置編輯表單。雖然編輯時(shí)也不會(huì)離開當(dāng)前頁(yè)面，但卻不是在頁(yè)面中直接實(shí)現(xiàn)編輯。

選擇覆蓋層而不是行內(nèi)編輯的原因有很多，不可能把某個(gè)復(fù)雜的編輯任務(wù)，直接安排在同一個(gè)頁(yè)面完成。如果嵌入頁(yè)面的編輯區(qū)域很大的話，會(huì)把過(guò)多內(nèi)容推向下方，損害了頁(yè)面的整體感。

覆蓋層主要有浮層、對(duì)話框和抽屜三種。

如果需要編輯的信息較少，那么可以直接使用浮層承載。

比如，下圖中展示態(tài)雖然只有短短一行，但是其中需要編輯的信息有5條，如果直接用行內(nèi)編輯的話，頁(yè)面變化過(guò)大會(huì)失去整體感。這時(shí)候可以采用浮層的方式展示。

鼠標(biāo)「點(diǎn)擊」圖標(biāo)觸發(fā)編輯態(tài)，鼠標(biāo)「點(diǎn)擊」懸浮層以外的其他區(qū)塊后，直接保存輸入結(jié)果并退出。

當(dāng)需要編輯的信息過(guò)多時(shí)，可以采用對(duì)話框和抽屜承載，因?yàn)樵蹅兩洗螌ｉT有一篇文章介紹了對(duì)話框和抽屜的區(qū)別，就不再重復(fù)了，沒看過(guò)的小伙伴可以看一下《對(duì)話框vs抽屜，輔助頁(yè)面如何決策》。

4. 表格編輯

線上表格編輯現(xiàn)在越來(lái)越常見了，但是因?yàn)镋xcel早就成了表格編輯的一種事實(shí)標(biāo)準(zhǔn)。所以，線上表格設(shè)計(jì)的時(shí)候，盡量和Excel的操作保持一致。

比如，現(xiàn)在的飛書等云文檔，幾乎和Excel非常像。

03 案例分析

假設(shè)有一個(gè)這樣的頁(yè)面，它的主要功能是讓用戶瀏覽信息，但是，現(xiàn)在又提出了一個(gè)新的需求，用戶需要編輯頁(yè)面上的信息。

其中，存在90%的可能性是，用戶發(fā)現(xiàn)頁(yè)面1～2處信息錯(cuò)誤，存在10%的可能性是，用戶發(fā)現(xiàn)10+處信息錯(cuò)誤，需要修改。

這時(shí)候應(yīng)該如何設(shè)計(jì)編輯功能？

用戶僅需要修改1～2處錯(cuò)誤時(shí)，最好的方案是只進(jìn)行局部修改，直接采用單字段行內(nèi)編輯；但是當(dāng)錯(cuò)誤達(dá)到一定數(shù)量時(shí)，再去一個(gè)個(gè)點(diǎn)擊修改就非常繁瑣了，最好采用覆蓋層編輯中的抽屜編輯。

因此，這時(shí)候我們可以采用單字段行內(nèi)編輯中的隱藏編輯鏈接，與抽屜編輯相結(jié)合的方式，滿足不同的使用場(chǎng)景。

因?yàn)檫@個(gè)頁(yè)面還是以易讀性為主，并且如果過(guò)多編輯鏈接同時(shí)顯示的話，非常干擾用戶查看信息，因此采用隱藏超級(jí)鏈接的形式。如果需要修改的信息很多的話，用戶可以直接點(diǎn)擊右上角「編輯」按鈕，批量修改信息。

04 總結(jié)一下

針對(duì)直截了當(dāng)選擇，我們可以總結(jié)出四種不同的編輯形態(tài)，主要是單字段行內(nèi)編輯、多字段行內(nèi)編輯、覆蓋層編輯和表格編輯。并且在實(shí)際設(shè)計(jì)中，多種形式可以同時(shí)使用。

本文由@栗子設(shè)計(jì)喵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議