日本a在线观看_久久久三区_久久99精品久久久久久国产越南_在线观看中文字幕av_国产精品久久久久久久久久东京_a免费视频

PS設計教程網歡迎你!

詳細解析UI動效基本規則全面總結(4)

文章來源于 攝影社區,感謝作者 Taras Skytskyi 給我們帶來經精彩的文章!
設計教程/設計理論/設計理論2018-10-05
均等交互 均等交互意味著所有的元素和對象都遵循一個特定的編排的規則。 在這個實例當中,所有的卡片都遵循著一個方向來引導用戶的注意力,自上到下地次第加載。相反,沒有按照這樣清晰的規則來加載,用戶的注意力

均等交互
均等交互意味著所有的元素和對象都遵循一個特定的編排的規則。
在這個實例當中,所有的卡片都遵循著一個方向來引導用戶的注意力,自上到下地次第加載。相反,沒有按照這樣清晰的規則來加載,用戶的注意力會被分散,元素的外觀排布也會顯得比較糟糕。
詳細解析UI動效基本規則全面總結
至于表格式的布局,它相對就復雜一點。在這里,用戶的視線流向應該是清晰的對角線方向,因此,逐個區塊次第出現是一個糟糕的設計。這樣的逐個顯示,一方面耗時太長,另一方面會讓用戶覺得元素的加載方式是鋸齒狀的,這種方式并不合理。
從屬交互
從屬交互指的是使用一個中心對象作為主體,來吸引用戶的注意力,而其他的元素從屬于它來逐步呈現。這樣的動畫設計能夠創造更強的秩序感,讓主要的內容更容易引起用戶的注意。
在其他的設計當中,用戶很難搞清楚哪個才是主要的,因為注意力被分散了。因此,如果要設置多個動畫元素,應該定義清楚誰為主,誰是中心,并且盡量按照從屬關系來次第呈現不同的子元素。
詳細解析UI動效基本規則全面總結
如果只有一個中心對象,那么其他的對象的運動方式都要受它制約,否則用戶分不清楚主次。
根據 Material Design 的規定,當元素不成比例地變幻尺寸的時候,它應該沿著弧線運動,而不是直線運動,這樣有助于讓它看起來更加自然。所謂「不成比例」地變化指的是元素的長和寬的變化并不是按照相同比例來縮放或者變化的,換句話來說,變化的速度也不一樣。(比如:方形變成矩形)
詳細解析UI動效基本規則全面總結
相反,如果元素是按照比例改變大小的時候,應該沿著直線移動,這樣不僅操作更加方便,而且更符合均勻變化的特征。看一下真實的案例,你會發現直線的運動軌跡會更加合理。
詳細解析UI動效基本規則全面總結
當元素不成比例放大的時候,運動軌跡是弧線,而這種弧線運動軌跡有兩種不同的呈現一種,一種軌跡是初始方向為垂直方向而運動結束時瞬間運動方向是水平的(Horizontal out),另外一種初始方向是水平方向而運動結束時瞬間運動方向是垂直的(Vertical out)。
那么怎么選取這個方向呢?
很簡單,元素運動曲線的方向,應該是要向界面的主要運動方向的主軸靠攏重合。舉個例子,在下面的動效當中,整個界面的滾動方向是上下滾動,主軸是縱向的。因此,當卡片點擊之后被展開的時候,會先向右水平移動,并最終以垂直運動結束,運動的最終方向,切線是垂直的,也就和垂直方向的主軸重合了。
詳細解析UI動效基本規則全面總結
如果幾個不同的元素的運動軌跡相交,那么他們不能彼此穿越。如果每個元素都必須通過某個交點,抵達另外一個位置,那么應該次第減速,依次通過這個點,給彼此留出足夠的空間。另外一種選擇,是元素不相交,而是像實體一樣在靠近的時候,彼此推開。
為什么?
因為我們通常假定界面中所有的元素都位于同一個平面當中。
詳細解析UI動效基本規則全面總結
在運動過程中,元素不應彼此穿越,而應該互相留出空間。
但是這一點也不是一成不變的。在比較擁擠的界面當中,某個元素可以「越過」其他的元素,它同樣沒有穿過其他的元素消失,而是單純的移動。這一點從某種意義上也是延續自我們日常的物理規律,只不過我們會默認界面中的元素在這個情況下擁有了高度這樣的屬性。
詳細解析UI動效基本規則全面總結
結語
我們總結了這么多動效運動的規則和原則,從某種意義上還是延續自我們對于物理世界的認知,摩擦力和加速度在虛擬界面中以另外的方式續存著。模仿現實世界的界面讓我們對于界面的秩序有更清晰的認知,允許我們更輕松的了解和訪問界面的內容。
如果動效按照正確的方式來設計,它應該是不顯著,且不會分散用戶注意力的。如果不是這樣,那么你需要讓動效更微妙一點,實在不行甚至需要將它移除。動效不應該成為影響用戶操控界面的障礙,或者轉移注意力的存在。
當然,即使是遵循這么多規律,動效的設計依然是一門藝術,而非單純的科學,多做測試多摸索總是有必要的。

版權所有PS設計教程網公安備案:蘇公網安備 32058302001023號工信部備案:滬ICP備09005587號
aaa
主站蜘蛛池模板: 欧美一级一片 | 中文日产幕无线码6区免费版 | 91精品国产成人 | 91精品国产综合久久青草 | 久久久久久久一区二区三区 | 国产一级毛片av | 久久久一区二区三区四区 | 毛片视频在线免费观看 | 成人三级电影在线 | 伊人亚洲精品 | 国产毛片自拍 | 久久久久久麻豆 | 成年人在线视频观看 | 91精品国产综合久久久欧美 | 在线成人亚洲 | 国产精品免费一区二区 | 午夜视频久久久 | 欧美一区二区三区不卡免费观看 | 毛片在线免费观看完整版 | 成年性羞羞视频免费观看 | 黄色成人短视频 | 羞羞视频2023 | 亚洲精品成人在线视频 | 国产91大片 | 日韩一级片毛片 | 亚洲网站一区 | 特级毛片免费视频 | 欧美三级欧美成人高清www | 国产一级中文字幕 | 精品一区在线视频 | www.99久| 麻豆国产网站 | 宅男噜噜噜66一区二区 | 精品国产视频一区二区三区 | caoporn国产一区二区 | 精品无码久久久久久国产 | 亚洲第一激情网 | 欧美羞羞视频 | 毛片118极品美女写真 | 日本欧美中文字幕 | 亚洲第一成网站 |