• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 用戶(hù)體驗(yàn)與網(wǎng)頁(yè)界面設(shè)計(jì)

用戶(hù)體驗(yàn)與網(wǎng)頁(yè)界面設(shè)計(jì)

奈薇網(wǎng)頁(yè)設(shè)計(jì) 于2019-07-12 22:13發(fā)表 閱讀次數(shù) 2239次

對(duì)于青島網(wǎng)站制作交互設(shè)計(jì)師和用戶(hù)體驗(yàn)設(shè)計(jì)師來(lái)說(shuō)，最困難的莫過(guò)于如何考慮用戶(hù)體驗(yàn)的各個(gè)維度，從而做出平衡與結(jié)合，并創(chuàng)造最優(yōu)的產(chǎn)品。菲茨定律嘗試著為用戶(hù)體驗(yàn)設(shè)計(jì)師們提供一些可以量化的數(shù)學(xué)性質(zhì)的標(biāo)準(zhǔn)來(lái)使得設(shè)計(jì)決定更容易。 　　通常，運(yùn)用數(shù)字很容易來(lái)衡量界面的質(zhì)量和效能：某個(gè)操作的點(diǎn)擊越少越好，定位導(dǎo)航越快越好。常用按鈕被放置的距離操作越近，鼠標(biāo)移動(dòng)越少。 　　事實(shí)上，你應(yīng)當(dāng)像尊重菲茨定律一樣，尊重各種人類(lèi)學(xué)準(zhǔn)則和定律，只要它們能夠真正的提升你的用戶(hù)體驗(yàn)設(shè)計(jì)。 　　然而，界面終究是為人服務(wù)的，界面需要具有一致性，需要體貼包容人們，需要具有一定的可玩性，功能需要易被發(fā)現(xiàn)：這類(lèi)指標(biāo)很難像點(diǎn)擊數(shù)或是像素移動(dòng)距離那樣容易被衡量。那些精確的數(shù)字和簡(jiǎn)化的數(shù)學(xué)模型可能會(huì)比無(wú)法衡量的各種體驗(yàn)維度更容易獲得設(shè)計(jì)師們的偏好。但數(shù)學(xué)定律應(yīng)當(dāng)被用戶(hù)體驗(yàn)設(shè)計(jì)師當(dāng)作設(shè)計(jì)工具和參考，而非金科玉律。 　　缺陷 　　為了驗(yàn)證上述菲茨定律的理論研究而進(jìn)行的實(shí)際測(cè)試表明，環(huán)形菜單在尋找選項(xiàng)和使用錯(cuò)誤率上較垂直線性菜單有微小的優(yōu)勢(shì)。然而當(dāng)問(wèn)及被試的主觀偏好時(shí)，環(huán)形菜單卻不是人們所愛(ài)。 　　事實(shí)上，菲茨定律所偏愛(ài)的環(huán)形菜單，的確具有一些缺陷，這些缺陷在特定情況下甚至遠(yuǎn)遠(yuǎn)超過(guò)它帶來(lái)的好處。 　　其中一點(diǎn)就是環(huán)形當(dāng)環(huán)形菜單的選項(xiàng)較多時(shí)，所能提供的選項(xiàng)點(diǎn)擊范圍非常有限。解決這個(gè)問(wèn)題的方法之一是依據(jù)Hick’s定律移除一些不重要的選項(xiàng)。例如，如果菜單選項(xiàng)不適用于當(dāng)前選中的內(nèi)容，或是它們?cè)诮缑娈?dāng)中的其他位置已經(jīng)存在，那么它們也不一定非要出現(xiàn)在右鍵菜單當(dāng)中。（例如，“撤銷(xiāo)”“重做”“新建文件””保存文件”“打印”或是“放大/縮小”這類(lèi)操作與“剪切”“復(fù)制”“粘貼”這類(lèi)通常針對(duì)選中項(xiàng)的操作相比，與選項(xiàng)內(nèi)容關(guān)聯(lián)并不強(qiáng)，因此可以把它們放置在工具欄當(dāng)中而非右鍵菜單中）。 　　第二種管理多選項(xiàng)菜單的方式是次級(jí)菜單。與線性菜單相比，在環(huán)形菜單中使用次級(jí)菜單會(huì)很容易鋪滿整個(gè)屏幕并且顯得雜亂無(wú)章。在這點(diǎn)上面，線性菜單有巨大的優(yōu)勢(shì)：線性菜單固有的結(jié)構(gòu)使其很容易展現(xiàn)層級(jí)關(guān)系。 　　分組的菜單選項(xiàng)在線性菜單中更加容易表達(dá)。（圖例：Word2013，截圖PCPro.co.uk） 　　最后，環(huán)形菜單需要更多的空間。這會(huì)導(dǎo)致兩個(gè)問(wèn)題：菜單可能會(huì)遮擋選中的選項(xiàng)，并且當(dāng)鼠標(biāo)在屏幕邊緣右擊時(shí)，它們可能很容易彈出在其他位置而非鼠標(biāo)附近。 　　綜上，有以下情況時(shí)，應(yīng)當(dāng)盡力使用線性菜單而非環(huán)形菜單： 　　菜單中需要有多個(gè)選項(xiàng) 　　可能有次級(jí)菜單 　　菜單選項(xiàng)需要被分組和存在優(yōu)先級(jí) 　　屏幕空間非常寶貴 　　最后，在使用鼠標(biāo)操作的設(shè)備時(shí)，對(duì)于屏幕邊緣和角落可能有2個(gè)潛在的問(wèn)題。在大屏幕中，鼠標(biāo)移動(dòng)的距離很長(zhǎng)，由此點(diǎn)擊到邊緣的控件并不一定省力。而且，網(wǎng)頁(yè)設(shè)計(jì)師們可能無(wú)法有效的利用屏幕的邊緣和角落，這是因?yàn)榫W(wǎng)頁(yè)通常運(yùn)行在瀏覽器當(dāng)中。而且網(wǎng)頁(yè)也通常被要求使用更好兼容性的居中布局。 　　在使用非鼠標(biāo)操作的設(shè)備例如觸摸屏?xí)r，將界面元素放在邊角可能不僅不會(huì)帶來(lái)易用的提升，甚至可能帶來(lái)操作交互的倒退。在大觸摸屏上，這樣的布局可能會(huì)需要用戶(hù)不斷的拉伸他們的手臂，從而迅速產(chǎn)生疲勞。因此，在大屏幕界面設(shè)計(jì)中，一些經(jīng)常用到的工具應(yīng)當(dāng)被設(shè)計(jì)成為可以拖拽的。這樣用戶(hù)就可以按照自己的意愿來(lái)拜訪這些工具欄。而通常用戶(hù)可能會(huì)放在他們當(dāng)前主要工作區(qū)域的附近，這樣就又符合了菲茨定律所述節(jié)省移動(dòng)距離的原理。 　　優(yōu)勢(shì) 　　用更少的體力來(lái)完成輸入的好處是非常顯而易見(jiàn)的，尤其是當(dāng)人們使用一些笨重的輸入設(shè)備時(shí)。最具代表性的就是垂直懸掛的觸摸屏，這類(lèi)觸摸屏通常被放在專(zhuān)業(yè)的辦公環(huán)境當(dāng)中，用于創(chuàng)建，視覺(jué)化或是管理大數(shù)據(jù)量的信息數(shù)據(jù)。 　　菲茨定律將會(huì)促進(jìn)并延長(zhǎng)垂直觸摸屏的使用。（圖例：PerceptivePixel） 　　當(dāng)試用垂直觸摸屏?xí)r，長(zhǎng)時(shí)間保持手臂向上會(huì)迅速的導(dǎo)致三角肌疲勞，從而產(chǎn)生各種各樣的錯(cuò)誤，或是最終迫使用戶(hù)放棄操作。 　　因此，避免復(fù)雜和高強(qiáng)度的這類(lèi)輸入方法有助于促進(jìn)和延長(zhǎng)人們對(duì)這類(lèi)設(shè)備的使用。 　　風(fēng)險(xiǎn) 　　復(fù)雜難以進(jìn)行的輸入方法有時(shí)卻能夠避免錯(cuò)誤發(fā)生。例如，移動(dòng)設(shè)備通常都是被放在口袋中隨身攜帶，很容易意外的觸發(fā)設(shè)備。在這種情況下，高精度的輸入方法應(yīng)運(yùn)而生。這種輸入方法有著更高的輸入難度從而保證每一個(gè)輸入指令不是意外產(chǎn)生的。并且，這類(lèi)高精度的輸入方法會(huì)提醒用戶(hù)他們正在進(jìn)行的操作相對(duì)重要。iPhone關(guān)機(jī)時(shí)的操作，就是最好的范例。 　　根據(jù)操作結(jié)果的重要性來(lái)選擇UI控件元素：滑動(dòng)操作通常被用于危險(xiǎn)的操作（圖例：iPhone，截圖源自tankehu.com） 　　關(guān)機(jī)或是重啟設(shè)備是非常重要的操作，一旦觸發(fā)，就無(wú)法撤銷(xiāo)。因此，它們被設(shè)計(jì)成滑動(dòng)條控件，需要高精度的操作才能觸發(fā)。與其相對(duì)的，這里的取消操作產(chǎn)生的后果非常小，因此被設(shè)計(jì)成為一個(gè)普通按鈕。 　　滑動(dòng)操作和其他需要高精度操作的手勢(shì)既是最安全的輸入方法，同時(shí)也是最冗長(zhǎng)的輸入方法。為了平衡安全性和易用性，這些操作通常被保留用在較為危險(xiǎn)而又很少執(zhí)行的命令，例如解鎖屏幕，關(guān)閉設(shè)備，進(jìn)行系統(tǒng)定制設(shè)置，運(yùn)行管理員任務(wù)或是關(guān)閉鬧鐘等等。當(dāng)另外一些危險(xiǎn)的指令在使用中會(huì)被頻繁使用時(shí)，例如編輯，刪除或移動(dòng)操作，合理的圖標(biāo)和包含確認(rèn)的兩步輸入法而非高精度輸入就更加合適。盡管兩部輸入法并不像高精度輸入方式那樣安全，但是它們更好的照顧到了易用性，因?yàn)檫@些操作發(fā)生的頻率較高。 　　另外一個(gè)采用復(fù)雜高精度輸入法的原因是為了利用手勢(shì)操作的重要特性–節(jié)省輸入空間。根據(jù)菲茨定律關(guān)于效率的評(píng)價(jià)標(biāo)準(zhǔn)，包含一定的拖拉手勢(shì)需要更高強(qiáng)度的肌肉緊張，因此，菲茨定律更推薦點(diǎn)擊操作。然而，手勢(shì)操作具有一個(gè)很大的優(yōu)勢(shì)—無(wú)需放置界面控件在屏幕中就可以完成功能操作。 　　以在deviantART管理藝術(shù)收藏為例，為了將一個(gè)選項(xiàng)添加到你的收藏，你不需要點(diǎn)擊一個(gè)按鈕。你只需要拖動(dòng)一幅打算收藏的作品，收藏面板會(huì)自動(dòng)觸發(fā)顯示，允許你把藏品放置其中。 　　由拖拉操作觸發(fā)并完成的操作無(wú)需在界面中放置觸發(fā)操作的控件元素（圖例deviantART） 　　由于拖拉操作不需要按鈕或是其他UI控件來(lái)觸發(fā)功能，因此，它對(duì)于節(jié)省界面空間，提升利用率很有幫助。當(dāng)然，不足也同樣明顯，缺乏明顯的視覺(jué)提示告訴用戶(hù)關(guān)于手勢(shì)操作的存在（除非通過(guò)tooltip提示）無(wú)論如何，如果屏幕空間確實(shí)很緊張，那么手勢(shì)輸入雖然麻煩，但卻絕對(duì)值得。 　　菲茨定律第四條：利用主要像素 　　主要像素的理論表明，某些像素比其他像素更加容易獲得。例如，屏幕的邊緣和角落更容易接近。然而，最容易接近到的像素還是那些鼠標(biāo)當(dāng)前所在的位置，這也是右鍵點(diǎn)擊彈出菜單的緣由。 　　優(yōu)勢(shì) 　　右鍵菜單會(huì)在用戶(hù)當(dāng)前鼠標(biāo)指針右擊時(shí)出現(xiàn)，并且提供給用戶(hù)與當(dāng)前內(nèi)容相關(guān)的選項(xiàng)。因此，你不需要再移動(dòng)鼠標(biāo)一定距離到某個(gè)特定的位置。通常有兩種右鍵菜單：線性右鍵菜單和圓弧形或環(huán)形菜單。 　　按照菲茨定律，環(huán)形菜單會(huì)比垂直線性才對(duì)那更優(yōu)。這是因?yàn)椋菏紫?，梯形的菜單選項(xiàng)擁有更大的點(diǎn)擊響應(yīng)區(qū)域。其次，由于菜單采用的環(huán)形排列，鼠標(biāo)距離每一個(gè)選項(xiàng)的距離都是基本想通的。由此帶來(lái)的一致性會(huì)幫助用戶(hù)的肌肉產(chǎn)生記憶反射。與此相對(duì)的，在線性菜單當(dāng)中，只有最接近鼠標(biāo)初始位置的選項(xiàng)是最容易被點(diǎn)擊到的，因此，這個(gè)位置應(yīng)當(dāng)放置最常用的菜單選項(xiàng)。 　　菲茨定律更偏好環(huán)形菜單（左例：OneNote2013,右例：Firefox） 　　將界面控件放置在屏幕邊緣或是角落的另外一個(gè)好處是鼠標(biāo)的移動(dòng)受限于屏幕的自然空間，從而更容易達(dá)到。 　　屏幕邊緣和角落是屏幕最重要的位置（圖例：Particletree) 　　用戶(hù)可以直接將鼠標(biāo)大幅度移動(dòng)到屏幕的邊緣或是角落而不用進(jìn)一步微調(diào)。因此，目標(biāo)也會(huì)更容易被點(diǎn)擊到。

用戶(hù)體驗(yàn)與網(wǎng)頁(yè)界面設(shè)計(jì)相關(guān)標(biāo)簽：網(wǎng)站建設(shè)公司，網(wǎng)站制作，制作網(wǎng)站，制作網(wǎng)站

相關(guān)熱點(diǎn)推薦

用戶(hù)體驗(yàn)與網(wǎng)頁(yè)界面設(shè)計(jì) 沒(méi)有交互意識(shí)的設(shè)計(jì)師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機(jī)交互界面設(shè)計(jì)的三個(gè) 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶(hù)體驗(yàn)中溝通的技巧 迭代的設(shè)計(jì) 網(wǎng)站中視覺(jué)元素的設(shè)計(jì) 網(wǎng)站設(shè)計(jì)的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對(duì) 手機(jī)建站時(shí)容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺(jué)識(shí)別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁(yè)不到首頁(yè) 青島網(wǎng)站設(shè)計(jì)中關(guān)于al 好設(shè)計(jì)應(yīng)該是平凡的設(shè)計(jì) 網(wǎng)站LOGO簡(jiǎn)論 網(wǎng)頁(yè)布局設(shè)計(jì)基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點(diǎn) 新站快速推廣經(jīng)驗(yàn)，百度 為中文而設(shè)計(jì)的文本框 關(guān)于網(wǎng)站優(yōu)化五大技巧 如何進(jìn)行網(wǎng)站首頁(yè)改版 web設(shè)計(jì)師可以走得更 專(zhuān)業(yè)設(shè)計(jì)網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計(jì)的幾點(diǎn)知識(shí) 青島網(wǎng)站制作哪家強(qiáng) 交互設(shè)計(jì)的8項(xiàng)黃金法則 設(shè)計(jì)良好網(wǎng)頁(yè)的4項(xiàng)原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營(yíng)銷(xiāo)的五個(gè)階段 青島網(wǎng)站設(shè)計(jì)成功要素

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專(zhuān)業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門(mén)戶(hù)