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

編輯導(dǎo)語(yǔ)：上一期我總結(jié)了文本框的交互要點(diǎn)（可回顧《交互設(shè)計(jì)拆解：文本框》），本文作者從iOS人機(jī)交互和 Material Design指導(dǎo)規(guī)范的共通點(diǎn)以及作者對(duì)設(shè)計(jì)方法論的拙見，整合了文本框的交互細(xì)節(jié)；我們一起來(lái)看一下。

為了體現(xiàn)文本框設(shè)計(jì)形式的科學(xué)性，其實(shí) Google Design（下文簡(jiǎn)稱GD） 團(tuán)隊(duì)在2019年曾分享過(guò)一篇用戶研究文獻(xiàn)，是與高級(jí)用戶體驗(yàn)研究員 Michael Gilbert 共同合作撰寫的關(guān)于文本框的真實(shí)用戶可用性研究報(bào)告。

其實(shí)MD現(xiàn)階段版本的文本框規(guī)范，早在2017年初就進(jìn)行了重設(shè)計(jì)，但在2019年年底才分享出其背后的研究過(guò)程與結(jié)論。

剛好談到了文本框，我想借此機(jī)會(huì)和大家分享GD團(tuán)隊(duì)的該項(xiàng)研究幕后過(guò)程；看到最后，你會(huì)發(fā)現(xiàn)所得到的結(jié)論不僅僅只限于使用在文本框控件上。

最關(guān)鍵的是：從GD團(tuán)隊(duì)所披露的研究過(guò)程和結(jié)論，我發(fā)現(xiàn)其實(shí)再高深的用戶設(shè)計(jì)/研究團(tuán)隊(duì)，都會(huì)在前期做一些“失敗”的設(shè)計(jì)，這并不可怕。

所以在探索過(guò)程中的我們，不要輕易感到沮喪——多去模擬大型團(tuán)隊(duì)的方法和理念，勇于輸出自己的新觀點(diǎn)才是最重要的。

一、為什么需要優(yōu)化？

文本框是用戶在表單和對(duì)話框中輸入、編輯文本的最常用控件之一，本質(zhì)與關(guān)鍵是應(yīng)該讓用戶清楚：這是一個(gè)可交互的控件。

先來(lái)看看MD規(guī)范早期文本框的樣式（2017年前）：

對(duì)于舊版文本框，GD團(tuán)隊(duì)發(fā)現(xiàn)部分用戶并不知道可以與之交互。

因?yàn)榕f文本框下的線條寓意并不清晰，容易讓某些用戶將這條線與分隔線（分割作用）混淆；標(biāo)簽文本（Label text）和輸入內(nèi)容也容易與正文混淆，尤其是在密集文字排版中。

GD團(tuán)隊(duì)的優(yōu)化目標(biāo)是改進(jìn)文本框，使其具有更高的辨識(shí)度、易見性，從而更易被理解；這樣用戶才能夠正確、快速地使用。

于是團(tuán)隊(duì)開始進(jìn)行用戶實(shí)驗(yàn)研究，剖析究竟是哪些要素在干擾用戶判斷。

整個(gè)用戶研究實(shí)驗(yàn)分為兩個(gè)測(cè)試階段。

1. 測(cè)試項(xiàng)目一：158名參與者（+ 45名飛行員）

第一項(xiàng)測(cè)試是將原文本框與其他三種不同設(shè)計(jì)形式的文本框原型進(jìn)行比較，放在簡(jiǎn)單/復(fù)雜/真實(shí)使用場(chǎng)景當(dāng)中，讓用戶完成指定的任務(wù)（例如要求參與者找到特定的“Item L”文本框）。

為了確保參與者無(wú)法提前學(xué)習(xí)和預(yù)測(cè)在測(cè)試過(guò)程中文本框可能出現(xiàn)的位置，團(tuán)隊(duì)將顯示這些文本框的順序隨機(jī)打亂。

GD團(tuán)隊(duì)通過(guò)記錄不同的文本框設(shè)計(jì)形式在不同的場(chǎng)景中，被參與者找到并進(jìn)行準(zhǔn)確點(diǎn)擊的時(shí)間，來(lái)判斷用戶是否能清晰地認(rèn)知文本框——以此得到一個(gè)理論量化值。

然后在感性層面，GD團(tuán)隊(duì)還讓參與者按照自己的視覺偏好來(lái)對(duì)四種文本框設(shè)計(jì)進(jìn)行喜好度排名。

通過(guò)理論和感性兩個(gè)層面綜合得出較優(yōu)的文本框形式，再進(jìn)一步細(xì)化細(xì)節(jié)，投入到測(cè)試項(xiàng)目二中。

2. 測(cè)試項(xiàng)目二：400名參與者

通過(guò)測(cè)試項(xiàng)目一確定了設(shè)計(jì)方向后，測(cè)試項(xiàng)目二為了更進(jìn)一步地確定文本框的細(xì)節(jié)設(shè)計(jì)，GD團(tuán)隊(duì)創(chuàng)建了一個(gè)自定義工具。

團(tuán)隊(duì)從文本框控件中提煉出了7個(gè)特征（例如標(biāo)簽位置、背景顏色對(duì)比度、邊框樣式等），通過(guò)這個(gè)自定義工具進(jìn)行特征組裝，最后組裝出了140多個(gè)文本框樣式。

然后重復(fù)項(xiàng)目一中的測(cè)試模式，進(jìn)行計(jì)時(shí)。這一次還記錄了用戶的點(diǎn)擊熱力圖來(lái)收集有關(guān)參與者正確或錯(cuò)誤點(diǎn)擊的數(shù)據(jù)。

為了確定哪些文本框特征是最能影響到用戶對(duì)文本框控件的判斷的，研究人員和設(shè)計(jì)人員團(tuán)隊(duì)找到了能映射用戶行為的三個(gè)量化指標(biāo)：

• 通過(guò)「正確點(diǎn)擊次數(shù)與錯(cuò)誤點(diǎn)擊次數(shù)」量化可識(shí)別性；
• 通過(guò)「參與者查找并點(diǎn)擊所任務(wù)要求文本框所花費(fèi)的時(shí)間」量化文本框可被查找性；
• 通過(guò)「參與者對(duì)每個(gè)文本字段的變體進(jìn)行排序」量化用戶視覺偏好。

二、主要發(fā)現(xiàn)

兩項(xiàng)實(shí)驗(yàn)的結(jié)果表明，文本框的以下特征最能影響到用戶判斷：

1. 矩形（框形）樣式的封閉文本框的性能優(yōu)于僅帶有線條的文本框；
2. 文本框應(yīng)該帶有有色填充和底部線條；或者空白填充，但需要有色描邊；
3. 文本框的底部線條與背景的顏色對(duì)比度最小應(yīng)為3：1（關(guān)于顏色對(duì)比度相關(guān)話題，我會(huì)在后面寫一篇文章細(xì)致講解）；
4. 標(biāo)簽文本應(yīng)放置在文本框范圍內(nèi)；
5. 文本框應(yīng)具有圓角（用戶視覺喜愛度更偏好）。

于是通過(guò)這個(gè)實(shí)驗(yàn)，就有了如今的MD規(guī)范中的文本框樣式，也被借鑒運(yùn)用到了許多其他規(guī)范與場(chǎng)景當(dāng)中。

三、總結(jié)

GD團(tuán)隊(duì)重新探索文本框控件設(shè)計(jì)的實(shí)驗(yàn)涉及到了兩名設(shè)計(jì)師、一名研究員和大約600名參與者。

得出了在MD規(guī)范中，「文本框控件」細(xì)則開篇便給出的三個(gè)原則：易見、清晰、高效。

可能以前對(duì)MD規(guī)范還算關(guān)注的你，也是知其然，不知其所以然。

新的文本框規(guī)范已經(jīng)應(yīng)用在了Google的各產(chǎn)品線當(dāng)中，從帳戶登錄頁(yè)面到Google表單。

其實(shí)使用上面的實(shí)驗(yàn)，GD團(tuán)隊(duì)不僅解決了舊版文本框的易用性問(wèn)題；通過(guò)前人種樹得到的結(jié)論，我們還可以將這些手法運(yùn)用到許多其他的場(chǎng)景當(dāng)中，來(lái)輔助我們排查控件的可用性：例如對(duì)比、親密性、用戶視覺偏好等等，都值得被借鑒。

希望這個(gè)實(shí)驗(yàn)的分享可以幫助到你。

附上Google?Design團(tuán)隊(duì)文本框優(yōu)化實(shí)驗(yàn)文獻(xiàn)地址，我們下期再見~

#專欄作家#

UCD耍家，公眾號(hào)：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專欄作家。

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

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