<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »設計跟著指尖走的互動(一)

        設計跟著指尖走的互動(一)

        至成科技 2015-01-22 訪問量(960) 評論(0)
        摘要:

         對于網頁瀏覽者來說,按鈕控件的幾種變化可以說是再熟悉不過的一種機制了:一般使用鼠標瀏覽時較容易感受到的有 Normal、Hover 以及 Archive 這三種效果,分別為按鈕平時的狀態、鼠標游標移到上方的效果、以及點擊按鈕時的效果。

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

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

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

          網頁上較常見的互動效果:Hover

          在網頁中,Hover 效果是常被應用的一種效果,除了可以有效的提供使用者「我現在鼠標有效地瞄準了這個按鈕」、以及「這可能是一個可以互動的控件」的資訊以外,Hover 效果還常常被用來提供許多額外資訊的一種方式:例如在 Dribble 的瀏覽上我們平常看到的都是作品的圖片、而作品的名稱以及描述等資訊則是設計在 Hover 的效果裡:

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

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

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

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

          然而在觸控式螢幕中,Hover 卻變得寸步難行

          與桌上型電腦作業系統不同,觸控式螢幕設備由于操作上的特性,是不存在鼠標游標的,因此操作上是使用手指或觸控筆直接點擊感應面板、于是使用者可以執行的動作不外乎:單擊、雙擊、長壓以及各種方向的滑動(多指手勢屬于部分系統的特殊動作、故不在此討論)。

          例如 iOS 系統中對于 App 圖示的控制就設計成單擊啟動 App、長壓則可以進行刪除或移動的操作:

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

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

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

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

          在觸控設備中,該怎麼達到 Hover 的效果呢?

          既然在觸控設備上具有有效不同的操作特性,而使用者使用觸控設備瀏覽資訊的比例越來越增加,許多網站也不得不考慮如何應對觸控設備瀏覽的需求加以調整:

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

          例如 Behance 的網頁版以及手機 App 即展示了不同的版面配置

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

          點擊快速觸發 Hover 的效果、再點快速即觸發點擊的效果

          例如 Grids 這個網站亦使用了鼠標 Hover 上去才會顯示標題與資訊的設計。而當使用觸控設備瀏覽時,機制則自動變更為按先進次顯示 Hover 效果,再按第二次則真正進行點擊的動作:

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

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

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

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

        讓設計跟著指尖走:觸控設備上的互動效果,互聯網的一些事

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划