成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

讓設(shè)計(jì)跟著指尖走:觸控設(shè)備上的互動效果

2022-06-17    分類: 網(wǎng)站建設(shè)

對于網(wǎng)頁瀏覽者來說,按鈕控件的幾種變化可以說是再熟悉不過的一種機(jī)制了:一般使用鼠標(biāo)瀏覽時(shí)最容易感受到的有 Normal、Hover 以及 Archive 這三種效果,分別為按鈕平時(shí)的狀態(tài)、鼠標(biāo)游標(biāo)移到上方的效果、以及點(diǎn)擊按鈕時(shí)的效果。

  而另外還有一個(gè)我們稱為 Focus 的效果,F(xiàn)ocus 主要是指使用鍵盤的 Tab 按鍵來「瞄準(zhǔn)」網(wǎng)頁上的控件時(shí)、被瞄準(zhǔn)的那一個(gè)控件所顯示的狀態(tài)。雖然現(xiàn)在鼠標(biāo)已經(jīng)是操作電腦時(shí)的主要設(shè)備,但在某些情況下,例如填寫表單時(shí),讓使用者直接使用鍵盤的 Tab 來切換輸入欄位,比不斷的在鼠標(biāo)與鍵盤之間來回操作要來得順暢多了。因此在注重使用者體驗(yàn)的表單系統(tǒng)設(shè)計(jì),都會特別注重輸入框的 Focus 效果:

網(wǎng)頁上最常見的互動效果:Hover

  在網(wǎng)頁中,Hover 效果是常被應(yīng)用的一種效果,除了可以有效的提供使用者「我現(xiàn)在鼠標(biāo)準(zhǔn)確地瞄準(zhǔn)了這個(gè)按鈕」、以及「這可能是一個(gè)可以互動的控件」的資訊以外,Hover 效果還常常被用來提供許多額外資訊的一種方式:例如在 Dribble 的瀏覽上我們平??吹降亩际亲髌返膱D片、而作品的名稱以及描述等資訊則是設(shè)計(jì)在 Hover 的效果裡:

  以及最常見的提示說明:當(dāng)使用者不清楚按鈕的功能時(shí)、Hover 可以在不改變原始版面的情況下、提示使用者該按鈕的功能描述:

  合理的安排 Hover 可以讓版面的設(shè)計(jì)更為簡潔、許多容易造成版面雜亂的文字與描述都可以暫時(shí)地消失在版面上、卻又可以在適合的時(shí)間提供給使用者必要的資訊。

然而在觸控式螢?zāi)恢校琀over 卻變得寸步難行

  與桌上型電腦作業(yè)系統(tǒng)不同,觸控式螢?zāi)辉O(shè)備由于操作上的特性,是不存在鼠標(biāo)游標(biāo)的,因此操作上是使用手指或觸控筆直接點(diǎn)擊感應(yīng)面板、于是使用者可以執(zhí)行的動作不外乎:單擊、雙擊、長壓以及各種方向的滑動(多指手勢屬于部分系統(tǒng)的特殊動作、故不在此討論)。

  例如 iOS 系統(tǒng)中對于 App 圖示的控制就設(shè)計(jì)成單擊啟動 App、長壓則可以進(jìn)行刪除或移動的操作:

  另外一個(gè)常見的觸控式操作模式則是 iOS 系統(tǒng)中大家熟悉的下拉式重新整理功能,單指往下滑動的手勢取代了傳統(tǒng)的 Refresh 按鈕:

  因此在開發(fā) App 的時(shí)候,設(shè)計(jì)師考慮到設(shè)備本身的特性、必須針對觸控系統(tǒng)的操作改變設(shè)計(jì),例如 Plant Nanny 中即設(shè)計(jì)了必須長壓 2 秒鐘才能完成任務(wù)的按鈕:一方面避免了誤觸,一方面更可以在這 2 秒中配合音效、營造出「喝水」的感覺。

在觸控設(shè)備中,該怎麼達(dá)到 Hover 的效果呢?

  既然在觸控設(shè)備上具有完全不同的操作特性,而使用者使用觸控設(shè)備瀏覽資訊的比例越來越增加,許多網(wǎng)站也不得不考慮如何應(yīng)對觸控設(shè)備瀏覽的需求加以調(diào)整:

  放棄 Hover 效果、利用偵測瀏覽端的設(shè)備給予不同的版面排列方式

  例如 Behance 的網(wǎng)頁版以及手機(jī) App 即展示了不同的版面配置

  點(diǎn)擊一次觸發(fā) Hover 的效果、再點(diǎn)一次即觸發(fā)點(diǎn)擊的效果

  例如 Grids 這個(gè)網(wǎng)站亦使用了鼠標(biāo) Hover 上去才會顯示標(biāo)題與資訊的設(shè)計(jì)。而當(dāng)使用觸控設(shè)備瀏覽時(shí),機(jī)制則自動變更為按第一次顯示 Hover 效果,再按第二次則真正進(jìn)行點(diǎn)擊的動作:

  另一個(gè)類似的作法是 App Store 裡面的購買按鈕,以兩階段按鈕來提示使用者「更多的額外資訊」,例如原本是顯示 App 的價(jià)格,當(dāng)使用者點(diǎn)擊一次后,則變更按鈕的外觀,描述變更成再度按下后會真正執(zhí)行的動作(購買并下載安裝)。當(dāng)然它也同時(shí)具備了防止使用者不小心誤觸而導(dǎo)致購買了 App 的兩階段按鈕設(shè)計(jì)。

  不知道是不是為了設(shè)計(jì)上的一致性,雖然桌面上對于按鈕誤觸的情形較不明顯,但其實(shí) OSX 桌面版的 App Stroe 也設(shè)計(jì)了這個(gè)兩階段的按鈕,而 iTunes 11 卻沒有這麼做,也許在接下來的版本會趨于統(tǒng)一吧。

  使用長壓并滑動的方式來模擬鼠標(biāo)游標(biāo)經(jīng)過的狀況

  但這種方法的學(xué)習(xí)成本較高:一般觸控式螢?zāi)皇褂谜卟⒉皇煜ご朔N UI 操作方式,況且在瀏覽全版面的情況下,讓使用者不斷壓著觸控螢?zāi)徊⑶疫M(jìn)行全螢?zāi)坏幕瑒邮窍喈?dāng)辛苦的一件事情、手指頭亦容易擋住視線,反而遮蔽到想顯示給使用者的資訊。

  所以此種長壓、滑動的操作方式大多使用在游戲中、并且多是使用在限定某一區(qū)域的控制(例如 Angry Bird、Fruit Ninja 等體感游戲,或是如 Minigore 這類模擬傳統(tǒng)搖桿的游戲等等。

  提供特殊功能來模擬鼠標(biāo)的效果

  雖然觸控設(shè)備沒有鼠標(biāo)游標(biāo),但其實(shí)還是可以利用筆記型電腦模擬觸控板的方式、來模擬出有鼠標(biāo)游標(biāo)的效果,例如 Puffin 這個(gè)瀏覽器即提供了「虛擬觸控版」的功能、來模擬鼠標(biāo)游標(biāo)的存在。但依然有缺點(diǎn):虛擬觸控版的設(shè)計(jì)嚴(yán)重影響觸控設(shè)備體驗(yàn)上的直覺性以及流暢感。

  不同瀏覽裝置上的瀏覽方式不同,在設(shè)計(jì)時(shí)自然必須將各種狀況考慮進(jìn)去。如此簡單一個(gè)網(wǎng)頁上的 Hover 效果,在觸控裝置上時(shí)是要怎麼安排呢?是改變排版方式、讓 Hover 的資訊直接顯示出來嗎?採用兩段式點(diǎn)擊是否會影響使用者的瀏覽體驗(yàn)?抑或是其實(shí) Hover 的顯示資訊根本一點(diǎn)也不重要,那麼直接捨棄掉,是否會更好?

  好并可以適用所有設(shè)計(jì)的解決方式并不存在,大家在設(shè)計(jì)時(shí)還是得根據(jù)自己產(chǎn)品的特性、為產(chǎn)品選擇一個(gè)最適當(dāng)?shù)姆桨竵磉M(jìn)行,「觸控設(shè)備不一定會改變世界,但改變了某些設(shè)計(jì)」。


,

關(guān)鍵詞:創(chuàng)新互聯(lián),成都品牌網(wǎng)站建設(shè)公司,網(wǎng)站制作公司,重慶網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì),網(wǎng)站建設(shè),手機(jī)網(wǎng)站開發(fā),品牌設(shè)計(jì),用戶體驗(yàn)

網(wǎng)站題目:讓設(shè)計(jì)跟著指尖走:觸控設(shè)備上的互動效果
本文URL:http://jinyejixie.com/news/168163.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、標(biāo)簽優(yōu)化、商城網(wǎng)站、服務(wù)器托管App開發(fā)、用戶體驗(yàn)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)
玛曲县| 长子县| 郯城县| 石楼县| 华亭县| 皮山县| 富顺县| 固阳县| 张掖市| 衡南县| 湖口县| 吉木萨尔县| 伊宁市| 淄博市| 琼中| 怀远县| 巴马| 临澧县| 华宁县| 临江市| 淮北市| 南丰县| 西平县| 渝中区| 洛阳市| 专栏| 清苑县| 宜昌市| 来凤县| 扎囊县| 城固县| 聂荣县| 都安| 汉阴县| 镇雄县| 博白县| 公安县| 丰镇市| 嘉峪关市| 永平县| 肥城市|