<label id="jgr5k"></label>
    <legend id="jgr5k"><track id="jgr5k"></track></legend>

    <sub id="jgr5k"></sub>
  1. <u id="jgr5k"></u>
      久草国产视频,91资源总站,在线免费看AV,丁香婷婷社区,久久精品99久久久久久久久,色天使av,无码探花,香蕉av在线
      您正在使用IE低版瀏覽器,為了您的雷峰網賬號安全和更好的產品體驗,強烈建議使用更快更安全的瀏覽器
      此為臨時鏈接,僅用于文章預覽,將在時失效
      特寫 正文
      發私信給賀亮
      發送

      4

      移動app交互設計:如何把“手勢流”裝進手機

      本文作者: 賀亮 2015-11-12 15:43
      導語:交互設計當道,手勢和手機操作如何實現無縫結合?這幾個例子不那么詳細地說了,他們都是怎么做的。

      移動app交互設計:如何把“手勢流”裝進手機在智能交互中,手勢已成為新的“點擊”。

      現在每次打開手機里的app、游戲時,都需要用到點擊、拖、拉等動作。單看點擊的話,設計師與開發者只需要考慮用戶點擊屏幕哪里體驗更好。但是手勢不同,手勢操作還需考慮什么動作,屏幕落點在哪里,用戶能否直觀地看到并使用。

      移動app交互設計:如何把“手勢流”裝進手機

      手勢的設計能讓界面看起來更炫,因為一系列動作都潛藏在界面內部。手勢減少了用戶操作的繁瑣度,同時可以和不同規格的設備自由交互。

      基于此,我們來一起看一些現在很流行的app中都應用了哪些“手勢流”。

      常用手勢引導

      手勢操作是用戶通過手部運動,在界面內控制設備的操作過程。就像UXPin發布的2015-2016移動設計趨勢中描述的那樣,手勢操作是手部運動,但也包括搖晃、傾斜設備等操作。

      移動app交互設計:如何把“手勢流”裝進手機

      由 Craig Villamor等人設計的手勢的特定含義詳細地描述了十幾個動作,并說明它們是如何運作的。這些手勢是由執行特定任務和常用移動設備的用戶行為設置出來。

      移動app交互設計:如何把“手勢流”裝進手機

      這些是用戶最常用的姿勢

      • 單擊:輕碰界面

      • 雙擊:兩次快速點擊界面

      • 拖:手不離屏幕保持移動

      • 變形:手不離屏幕用兩個手指改變界面大小

      • 滑動:快速移動

      • 彈開:快速卷動

      每個動作都需要在用戶可操作的范圍內。現在也沒必要擔心手勢會有什么問題,因為隨著大屏手機銷量越來越大,人機互動會越來越普遍。不過在設計中要注意的一點就是,拇指的位置,這里被叫做“拇指區”。很多時候我們單手拿手機時都會用拇指滑動屏幕,拇指是操作手機時最常見的手指。所以,拇指能在手機上碰到多大區域也要考慮清楚。圖標的規格也很重要。每個圖標都需要設計足夠大,以保證多大手指的人都可以在界面上自由操作。

      基于該原則,圖標最好設計成寬高44點。屏幕更大時,圖標擴大至70點,這樣可以使手指更容易點擊。

      關聯手勢和動畫效果

      在移動設計中,手勢和動畫一定是息息相關的。動畫是用戶在完成整個動作之前,與app交互最直接的信號。

      動畫的5個最基本的功能:

      1動畫通知

      2信息披露

      3突出內容

      4折疊形式和菜單

      5卷動

      回想一下每天你在操作手機過程中會遇到多少這樣的動畫。以Dark Sky天氣app為例。

      移動app交互設計:如何把“手勢流”裝進手機

      除了預報天氣冷暖,Dark Sky在整個app的設計中都用到手勢和動畫,讓用戶在操作中有更好的用戶體驗。

      動畫和手勢操作是密不可分的。沒有動畫,用戶就不能判定自己是否完成指令。最好把手勢作為整個操作中的一環,而非單獨設計。

      有了這些,我們從手勢操作中獲得的反饋會不太一樣。

      蘋果和3D Touch

      手勢操作對手機來說是非常重要的平臺,像蘋果和Andriod 的研發者都在嘗試創新。

      2015年最新手機iPhone 6s 引入新技術,3D Touch。從3D Touch開始,手勢操控升至新級別。設備會辨別屏幕所受的壓力,然后發起相應的指令。這種觸控的不同點在于分層接口。在你進入下一層之前,壓力會提示預覽動作。

      移動app交互設計:如何把“手勢流”裝進手機

      地圖界面

      在上圖蘋果手機的例子可見,有人通過短信發給你一個地址,輕輕點擊連接地址就彈出來了。當你把手移開時,彈框就消失了。如果你更用力的話,地圖上所有地點鏈接都會打開,時甚至有被撞了一下的反應。這是一個關于在單一的觸控頁面下,元素在跨應用程序上如何實現無縫對接。

      此外,在蘋果的用戶界面設計準則上,介紹了一些觸控并且如何使用。

      • 避免將不同的動作和標準的手勢聯系在一起

      • 避免創建自定義的手勢,調用相同的動作作為標準手勢

      • 使用多種手勢作為快捷方式加快完成任務,而非唯一方式

      • 避免定義新的手勢,除非你的應用程序是一個游戲

      • 在正常環境中,考慮使用多手指操作

      這會改變我們與iPhone手機的交互方式,當然用戶肯定需要一定的調整期。所以當設計3DTouch時最好考慮到這點,何時應用3DTouch更好。因為相同的手勢對舊版手機來說可能就無效了。

      材料設計改進的手勢操作

      當蘋果從不同的角度提示我們如何觸控手機時,谷歌開始玩起概念游戲。操作和運動有何不同?在不斷發展的材料設計文檔中,谷歌精準描繪出這些動作如何工作。

      為簡化用法,使用指南創造出一系列的運動規則。手勢共有的缺點在于一個動作可能引起多重反應。本文介紹了如何把手勢當做觸發器以使你可以做很多事。

      移動app交互設計:如何把“手勢流”裝進手機

      當提到手勢操作時,材料設計一般包括拖、刷、搖。

      • 拖是一個控制力更強的手勢,與觸摸目標結合使用

      • 刷是一個快速的手勢,不需要觸摸目標

      • 搖動并不需要觸碰

      這些動作口令都是將速度看做唯一準則,憑借速度的優勢,這些動作可能更容易被用戶使用。

      它是這樣打破的:

      拖仍然是和某個元素保持接觸,但是改變手勢方向后,可以撤回

      快速移動刪除,防止被撤銷

      在結束速度的基礎上,滑動變成了一個手指的一個動作,該元素是否越過了一個動作可以被撤消

      復雜手勢

      越來越多手勢開始打破“一次動作一次反饋”的舊模式,多個手勢一起。結果就是復雜的手勢。這個技術是在游戲中最常見的,而且已開始擴展到其他app中。

      移動app交互設計:如何把“手勢流”裝進手機

      復雜手勢需要三級動作完成任務。

      開始:最開始的接觸,例如點、壓

      延續:在一個特定的序列中應用多個手勢,如次在屏幕上使用拖拽操作看看會發生什么

      終止:結束與屏幕接觸的手勢結束

      試想一下最流行的游戲,例如憤怒的小鳥。在用小鳥摧毀目標的過程中,你必須完成如下動作:

      • 點擊,抓住并在屏幕上沿著正確的軌跡,發射小鳥

      • 松手,小鳥飛向目標

      聰明的觸控不僅僅是動作

      移動app交互設計:如何把“手勢流”裝進手機

      動作縮略圖

      聰明的觸控不僅僅完成一個任務或者動作,正如交互設計最佳體驗里寫到的,他們應該讓用戶開心,也可以做一個教學工具。

      最好的手勢交互需要考慮用戶如何與設備接觸

      • 高舉一只手

      • 高舉兩只手

      • 雙手水平

      • 根本不用手(......)

      你知道那些用戶使用你的app時如何操作嗎?需要進行用戶教育嗎?這聽起來非常重要,有時同一個動作在不同app會有不同反應。

      對比一下Soundcloud和Clear。二者使用同樣的手勢操作,但是app反饋大相徑庭。

      移動app交互設計:如何把“手勢流”裝進手機

      移動app交互設計:如何把“手勢流”裝進手機

      Soundcloud里,點擊一下就能打開歌單或者播放歌曲;而在Clear,點擊后是從任務列表中找到你想聽的歌。

      在完成動作時用到的點擊和刷新動作的范疇是一致的,但是特殊觸控就會有不同而含義。

      最關鍵的是,用戶發生的行為因為簡單的視覺藝術便可無縫對接。多虧了它的普及,基于接口的Soundcloud一經出現就很容易被接受,因此也不需向用戶解釋點擊和滑動的區別。Clear的非常規矩形的模塊化設計,暗示每個矩形在刷的時候好像一張紙。

      最后,切記手勢操作不要承擔太多意義。

      下一步怎么樣?

      其實,手勢操作還可以觸及到更本質的東西。大多數的手勢操作是以指尖為基礎,如果加上身體的使用,觸控的定義會涉及更廣。大多數的觸控都是停留在靜態設計層面,隨著視頻和動畫的不斷使用,手勢操作也可用到更多動畫。

      移動app交互設計:如何把“手勢流”裝進手機

      以Haze天氣app為例。隨著溫度變化,app會顯示不同的圖層顏色,效果非常震撼。

      手勢操作也可以讓不同app之間連接。例如,不同應用程序之間的拖放操作。

      移動app交互設計:如何把“手勢流”裝進手機

      Workflow是一款iOS系統的app,可以在不同應用程序之間拖放。這種自動化工具很聰明,完全植根于動畫程序。

      當提到和衣物的交互時,觸控將擴大到物理事件的范疇。比如擺動手臂發送文本或搖動手腕就能給語音信箱留言。腦洞大開......

      總結

      現在設計一款不用手勢操作的手機app有點自尋死路的即視感。手勢操作這一小步,是手機設計進程中邁出的一大步。也會對日后設計者和用戶產生更大的影響。

      當然,這個秘密與任何其他設計方案的思路是一樣。新的手勢操作一定是用戶憑直覺就能接受的,或者稍有提示用戶就能明白,而非復雜繁瑣。如果做得好,新的即將被大眾接受的app就會很快出現。

       via TNW News

      相關閱讀:

      Dashboard:一款iOS app的設計開發過程

      6個應用告訴你——什么會是蘋果表上的設計風尚

      雷峰網原創文章,未經授權禁止轉載。詳情見轉載須知

      分享:
      相關文章
      當月熱門文章
      最新文章
      請填寫申請人資料
      姓名
      電話
      郵箱
      微信號
      作品鏈接
      個人簡介
      為了您的賬戶安全,請驗證郵箱
      您的郵箱還未驗證,完成可獲20積分喲!
      請驗證您的郵箱
      立即驗證
      完善賬號信息
      您的賬號已經綁定,現在您可以設置密碼以方便用郵箱登錄
      立即設置 以后再說
      主站蜘蛛池模板: 自拍视频在线观看成人| 亚洲丝袜熟女在线樱桃| 色综合久久久久综合体桃花网| 99免费视频| 久久免费在线视频| 色综合久久网| 国产亚洲精品AA片在线播放天| 亚洲嫩模高清在线视频| 伊人久久大香线蕉精品,亚洲国产一成人久久精品,久久99精品久久久久久三级,亚 | 91久久国产性奴调教| 国产成人a亚洲精| 人妻熟女av一区二区三区| 浮妇高潮喷白浆视频| 人妻丰满av无码久久不卡| 精品一区二区三区在线观看 | 欧美另类高清videos的特点| 91九色在线观看| 成人在线观看一区| 亚洲色鬼| 久久99国产精品久久| 在线无码免费看黄网站| 久久久中文| 国产欧美精品午夜在线播放| 蜜桃狠狠色伊人亚洲综合网站| 国内精品伊人久久久久777| 成人免费看片又大又黄| 国产中文99视频在线观看| 91超碰人人在线| 一区二区三区精品偷拍| 日本免费一区二区三区| 亚洲蜜桃v妇女| 欧美a在线| 峡江县| 久久亚洲精品成人无码网站夜色| 亚洲色另类| 极品人妻videosss人妻| 五月丁香六月综合缴清无码| 97香蕉碰碰人妻国产欧美| 国产免费午夜福利蜜芽无码| 亚洲色图欧美激情| 无码精品人妻|