<option id="uausy"></option>
  • <li id="uausy"></li>
  • array(23) {
      ["id"] => string(2) "96"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(1) "0"
      ["name"] => string(6) "服務"
      ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "service"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(88) "定制開發-APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
        ["meta_keywords"] => string(75) "APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_dingzhi.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
      ["son"] => array(9) {
        [0] => array(22) {
          ["id"] => string(3) "187"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(15) "小程序開發"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(112) "專業微信小程序解決方案|各種場景核心功能,提前布局微信新生態,搶占第一波紅利"
          ["pdir"] => string(0) ""
          ["dir"] => string(6) "wechat"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(107) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發-藝源科技小程序開發"
            ["meta_keywords"] => string(103) "小程序開發,商城小程序開發,門店小程序開發,微圈小程序開發,餐飲小程序開發"
            ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發,專業團隊,一對一服務,助企業快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數據架構,系統穩定安全。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_xcx.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "0"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "1"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [1] => array(22) {
          ["id"] => string(3) "199"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(9) "APP開發"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(3) "APP"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(65) "app開發_app定制開發_app制作開發公司【藝源科技】"
            ["meta_keywords"] => string(53) "app開發,app定制開發公司,app制作開發公司"
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_app.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "1"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [2] => array(22) {
          ["id"] => string(3) "244"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "快抖霸屏"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(7) "kuaidou"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術提供商!"
            ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
            ["meta_description"] => string(161) "藝源智能云推廣系統13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結合的營銷爆客解決方案。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(20) "show_page_douyin.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "2"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(27) "需要短視頻推廣排名"
          ["modelname"] => NULL
        }
        [3] => array(22) {
          ["id"] => string(3) "207"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(14) "AI智能名片"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(2) "ai"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(68) "藝源AI智能名片_名片小程序_智能名片_讓銷售更簡單"
            ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡單,電子名片,二維碼名片"
            ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡單。藝源AI智能名片為企業提供名片小程序,智能名片,企業名片,小程序名片,電子名片,二維碼名片等相關的服務。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(16) "show_page_ai.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "3"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [4] => array(22) {
          ["id"] => string(3) "201"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "版權登記"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(9) "copyright"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(0) ""
            ["meta_keywords"] => string(0) ""
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(23) "show_page_copyright.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "4"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [5] => array(22) {
          ["id"] => string(3) "203"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "商標注冊"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(9) "trademark"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(131) "商標注冊_商標注冊流程_商標注冊流程及費用_西安商標注冊_西安商標注冊代理-「源知果」藝源科技"
            ["meta_keywords"] => string(103) "商標注冊,商標注冊流程,商標注冊流程及費用,西安商標注冊,西安商標注冊代理"
            ["meta_description"] => string(182) "「源知果」西安提供代理版權登記,代理商標注冊,代理專利申請,代理企業貫標,代理高新技術企業認定的服務;咨詢電話:13325455411。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(23) "show_page_trademark.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "5"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [6] => array(22) {
          ["id"] => string(3) "205"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "網站建設"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
          ["desc"] => string(149) "節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款|節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款"
          ["pdir"] => string(0) ""
          ["dir"] => string(7) "website"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(80) "西安商城網站建設_政府網站建設_學校網站建設就選藝源科技"
            ["meta_keywords"] => string(113) "西安網站建設,西安網絡公司,西安網頁設計,商城網站建設,政府網站建設,學校網站建設"
            ["meta_description"] => string(248) "「藝源科技」是西安一家專業的西安商城網站建設,政府網站建設,學校網站建設的網絡公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經驗,為您提供一條龍的互聯網應用解決方案。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(21) "show_page_website.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "6"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [7] => array(22) {
          ["id"] => string(3) "208"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "2"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(15) "云服務平臺"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(0) ""
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(0)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(0)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(0) ""
            ["meta_keywords"] => string(0) ""
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(0) ""
            ["formid"] => string(0) ""
            ["url"] => string(21) "http://www.qulvkj.com"
            ["target"] => string(6) "_blank"
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "7"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [8] => array(22) {
          ["id"] => string(3) "202"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(9) "SEO優化"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(3) "seo"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(90) "【西安SEO優化_西安網站優化_關鍵詞排名優化】-SEO優化公司藝源科技"
            ["meta_keywords"] => string(81) "西安SEO優化,西安SEO優化公司,西安網站優化,西安網站優化公司"
            ["meta_description"] => string(244) "藝源科技(yysweb.com),專注為企業提供百度等搜索引擎整站SEO優化服務,針對不同行業、網站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術服務外包商。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_seo.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "8"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
      }
    }
    
    				
    當前位置: 首頁 > 售后 > 藝源智庫
    內部教程!超詳細的支付寶設計規范之交互篇
    時間:2019-10-11 13:40:54
    文章發布:李陽
    原創作者:未知
    來源:互聯網

    一、可用性價值

    動效很容易被象成某種增強愉悅的東西,自身并不具備什么價值。常常被當做可有可無部分,通常作為最后一步點綴。實際上,動效是一種更高級的設計展現形式:表達界面元素在交互事件下的行為動作。它在用戶體驗中的價值可以分為:信息交互、操作反饋、緩解負面情緒、創造個性優雅的愉悅體驗。

    1. 信息交互

    元素的狀態發生變化時銜接的動效,使過渡更自然。同時,引導用戶在視圖中的視覺焦點,暗示元素之間的層級關系。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 反饋操作&反饋狀態

    2. 操作反饋

    用戶交互時元素變化,為操作提供可視化的實時反饋。建立起虛擬元素與真實世界之間的認知聯系,讓操作符合用戶的直覺。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 反饋操作&反饋狀態

    3. 緩解負面情緒

    等待,讓用戶感到焦慮;報錯,讓用戶感到挫敗。加入有趣的動畫可以緩解負面情緒,提高用戶對產品的容忍度。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 緩解等待&錯誤焦慮

    4. 創造個性優雅的體驗

    產品中展示品牌調性的趣味性動效,可以強化品牌的認知,創造愉悅的使用體驗,加深用戶對產品的認可度。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 動效創造個性優雅的體驗


    二、設計原則

    動效通過模擬真實世界的運動,建立起用戶與手機屏幕內虛擬世界的認知連續,從而創造出符合用戶認知習慣的操作體驗,使 APP 的操作更自然流暢。

    同時,品牌的不同特性所表現出來的行為和動作也不盡相同。所以,品牌特性亦會對動效的設計有所影響,并產生指導和約束。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 品牌關鍵詞和動效原則

    安全、專業、信賴、便捷、想象力是支付寶品牌特性的五個關鍵詞,從這五個關鍵詞我們挖掘和推導出動效設計的四個基本原則:真實自然、快速響應、簡單明了、刻意編排。

    1. 真實自然

    動效蘊含了元素的運動規律、材質特性、空間關系、屬性變化,這些應該符合真實世界的物理規律,不能增加用戶的理解和認知成本。

    運動定律

    真實世界的運動遵循基本的物理規律。物體受力發生變化時,運動狀態會發生變化。根據牛頓的力學定律,我們可以得到了符合運動規律的兩條二維曲線。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    曲線一:勻速運動

    根據牛頓第一定律——慣性定律,「任何物體都要保持靜止狀態或勻速直線運動狀態,直到外力迫使它改變運動狀態?!?/p>

    下面的動畫展示了物體到達目的地的過程是「靜止 – 勻速運動 – 到達」,沒有加速和減速的過程。由于阻力的存在,我們模擬出來的勻速直線運動在真實世界中是基本不存在的,所以動畫效果看起生硬不自然。設計中一定要避免這種生硬的動效。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 勻速直線運動

    曲線二:勻加減速運動。

    根據牛頓第二定律:「物體加速度的大小跟作用力成正比,跟物體的質量成反比,且與物體質量的倒數成正比;加速度的方向跟作用力的方向相同?!?/p>

    下面的動畫展示了物體到達目的地的過程是「靜止 – 加速運動 – 減速運動 – 到達」,在靜止和運動狀態的轉換過程中加入了加速和減速的過程,這符合自然的基本規律,所以動畫看起來自然了很多。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 勻加減速運動

    材質特征

    好的動效在滿足了基本的物理原則之后還有很多「材質」上的細節補充,而材質特征影響到物體的質量和彈性等。

    前面的運動規律講到物體的加速度和質量成反比,所以材質的特征會影響到運動曲線的具體曲率,下圖的曲線描述了重和輕兩種材質物體的運動曲線。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 不同材質物體的運動曲線

    曲線一:加速度<減速度

    相同環境,一樣的正向力,同等的位移,較重的物體加速度較小,需要更長的加速時間和更短的減速時間。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 厚重遲緩的運動

    曲線二:加速度>減速度

    相同環境,一樣的正向力,同等的位移,較輕的物體加速度較大,需要更短的加速時間和更長的減速時間

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 輕盈敏捷的運動

    我們實際體驗下兩種運動曲線下的動效的感受,發現用曲線一的動效感覺厚重遲緩,曲線二的動效感覺輕盈敏捷。

    綜合安全、專業、信賴、便捷、想象力的特征,我們可以推導出品牌特征對材質方面的要求:牢固堅韌、精準可靠、敏捷輕盈、靈性活力。所以,支付寶品牌的動效里材質應該是偏輕和偏硬。

    為了表現品牌便捷、想象力的特征,我們一般情況應該選擇看起來輕盈便捷的動效曲線。

    空間關系

    手機的屏幕空間有限,但是元素運動的卻不一定僅限于屏幕以內。所以有些運動是用戶可見的,有些運動是用戶不可見的。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 屏幕空間外的運動

    從上圖我們可以看到:當元素離開屏幕時,后半段的減速過程不可見;當元素進入屏幕時,前半段的加速過程不可見。所以,這兩種場景應該分別使用加速、減速兩條不同的曲線。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 加速曲線&減速曲線

    2. 快速響應

    我們的動效應該快速準確地對用戶的操作做出響應。動效的時間一般不宜過長,過長的動效反而讓用戶感覺拖沓不干脆。下面的動效分別用了600ms 和300ms,我們可以明顯的感覺到時間太長會給人拖沓的感覺。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 快速敏捷 VS 冗長拖沓

    人的反應分三種:條件反射 – 50ms,僵尸反射 – 100ms,意識處理反射 – 200ms 以上。

    為了讓我們的動效看起來不是那么倉促和生硬,動效的最短時間建議在250ms 以上。另外根據人眼的視覺停留特性,50ms 的以上的時間長度變化才是用戶可感知的。所以,我們應該以250ms 為基數,以50ms 的倍數為梯度,來定義和劃分動效的時長。

    3. 簡單明了 & 刻意編排

    動效要簡單明了,并保持連貫,避免同時加入太多效果。動效的編排要有目的,要么提升可用性,要么加強品牌感知。

    1. 唯一的動效主體

    用戶交互出發的動效應該對應唯一的動效主體,以便對應操作觸發點和動效反饋之間的對應關系,避免眼花繚亂的感覺。

    當頁面發生變化時,需考慮元素的進?順序和進?邏輯,保證信息有效的被傳達,同時符合用戶的閱讀規則。在設計過程中需考慮元素主次,進行有效劃分,從而使得動效自然、流暢。

    2. 就近原則

    當用戶觸發動作展開,彈出元素時,應當告知?戶元素來源及從屬關系,明確觸發區域和反饋區域的關系,同時應避免動效幅度過?,影響?戶閱讀內容。


    三、動效規范

    前面講了我們動效設計應該遵循的大原則,這些大原則落實到具體的設計中會以更詳細的參數規范指導我們動效的設計。動效設計的參數包括:緩動曲線、時間長度、彈性系數。

    1. 緩動曲線

    為了讓動效真實自然,每一個動效都應該設置緩動曲線。并且根據不同的運動場景選擇統一的曲線。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技

    △ 運動曲線

    2. 時間長度

    動效既要快速響應,還要優雅從容,所以,我們以大腦的反應時間為基準(250ms),以人眼的分辨能力為梯度(50ms),統一定義不同場景的動效時長規范。

    內部教程!超詳細的支付寶設計規范之交互篇-藝源科技


    小程序開發
    標簽: 交互設計 動效 動效設計 用戶體驗 經驗分享 設計規范
    *版權申明:本站部分文章由藝源科技收集整理,不代表我們的觀點。如果這篇轉載侵犯您的版權,請及時聯系我們刪除!
    為您推薦
    最新文章
    掃碼加他,免費獲取方案
    久久青草费线频观看地址_少妇久久久久久久久久_亚洲欧洲自拍拍偷午夜色_国产sm重味一区二区三区
    <option id="uausy"></option>
  • <li id="uausy"></li>