午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

首頁

按鈕設計的心理機制:打造用戶喜愛的交互方式

杰睿

按鈕是產品中十分常見的交互元素之一,好的按鈕設計可以很大程度地提升用戶體驗。那么,怎么打造出符合用戶需求、深受用戶喜愛的優秀按鈕?這篇文章里,作者對按鈕UX設計進行了拆解分析,一起來看一下。

一、引言

在數字產品中,按鈕是最常用的交互元素之一。一個好的按鈕設計可以提高用戶體驗和產品的使用率。

本文將探討一些關于按鈕UX設計的方法,包括明確按鈕功能、選擇合適的顏色、確定按鈕大小、添加標簽和描述、考慮交互方式、測試和優化等。

通過綜合考慮這些因素,我們可以打造出符合用戶需求的優秀按鈕,提升產品的用戶體驗和競爭力。

二、按鈕的基本要素

1. 按鈕的定義和功能

按鈕是一種用戶界面元素,用于觸發特定的操作或行為。

它可以是文本、圖像或交互式元素,通常位于頁面的底部或頂部,以便于用戶快速訪問。

2. 按鈕的類型和分類

根據不同的用途和設計風格,按鈕可以分為多種類型和分類,例如:

  • 確認按鈕:用于確認用戶的輸入或操作,通常為綠色或藍色。
  • 取消按鈕:用于取消用戶的輸入或操作,通常為紅色或灰色。
  • 導航按鈕:用于跳轉到其他頁面或頁面的一部分,通常為下拉箭頭或回車鍵。
  • 搜索按鈕:用于在網站或應用程序中搜索內容,通常為放大鏡圖標。
  • 提交按鈕:用于提交表單數據或執行其他操作,通常為“提交”或“完成”按鈕。
  • 重置按鈕:用于重置表單或應用程序的設置,通常為“重置”或“恢復默認值”按鈕。

以上僅是一些常見的按鈕類型和分類,實際上還有很多其他的類型和分類。在設計按鈕時,需要根據具體的場景和目的選擇合適的類型和分類,并結合用戶體驗和產品需求進行優化。

三、按鈕的布局和位置

1. 按鈕的位置和大小

按鈕的位置和大小對于用戶體驗和產品可用性非常重要。一般來說,按鈕應該位于用戶視線的中心位置,以便于用戶快速訪問。同時,按鈕的大小也應該適中,不要過大或過小,以免影響用戶的操作。

在實際設計中,可以通過以下幾種方式來確定按鈕的位置和大小:

  • 根據頁面布局來確定按鈕的位置和大小,通常將按鈕放置在頁面的中央位置,并根據頁面元素的大小和間距來進行調整。
  • 根據用戶行為來確定按鈕的位置和大小,例如,將常用的按鈕放在頁面的頂部或底部,以便于用戶快速訪問。
  • 根據設備屏幕大小來確定按鈕的位置和大小,例如,在移動設備上,可以將按鈕放在屏幕的底部或頂部,以便于用戶單手操作。

2. 按鈕的布局方式和排版規則

除了位置和大小之外,按鈕的布局方式和排版規則也非常重要。合理的布局方式和排版規則可以提高用戶的使用體驗和產品的可用性。以下是一些常見的按鈕布局方式和排版規則:

  • 水平布局:將多個按鈕橫向排列在一起,適用于需要同時操作多個功能的場景。
  • 垂直布局:將多個按鈕縱向排列在一起,適用于需要按順序操作多個功能的場景。
  • 對齊方式:將多個按鈕按照左對齊、右對齊、居中對齊等方式進行排列,以便于用戶快速找到目標按鈕。
  • 間距規則:通過調整按鈕之間的間距來增加可讀性和可操作性,例如,可以設置相鄰按鈕之間的間距為20像素。
  • 文字排版規則:通過調整按鈕文字的大小、顏色、字體等方式來提高可讀性和美觀度。

四、按鈕的顏色和樣式

1. 按鈕顏色的選擇原則

按鈕的顏色對于用戶體驗和產品可用性非常重要。一般來說,按鈕的顏色應該與產品的品牌色或主題色相匹配,以便于用戶識別和記憶。同時,按鈕的顏色也應該具有明顯的對比度,以便于用戶在不同的背景下快速找到目標按鈕。

以下是一些常見的按鈕顏色選擇原則:

  • 單色按鈕:使用單一的顏色作為按鈕背景,適用于簡單明了的場景。
  • 漸變色按鈕:使用漸變色作為按鈕背景,可以增加視覺效果和層次感。
  • 反色按鈕:使用與背景形成鮮明對比的顏色作為按鈕背景,可以提高可讀性和可操作性。
  • 白色按鈕:使用白色作為按鈕背景,適用于簡潔明了的場景。

2. 按鈕樣式的設計要點

除了顏色之外,按鈕的樣式設計也是非常重要的。合理的樣式設計可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕樣式設計要點:

  • 圓角按鈕:將按鈕的邊角設置為圓角,可以增加界面的柔和感和親和力。
  • 陰影按鈕:在按鈕周圍添加陰影效果,可以增加立體感和層次感。
  • 描邊按鈕:在按鈕周圍添加描邊效果,可以突出按鈕的輪廓和形狀。
  • 圖標按鈕:在按鈕上添加圖標或圖形元素,可以增加視覺效果和表達意義。
  • 放大鏡按鈕:在按鈕上添加放大鏡效果,可以增加交互性和趣味性。

五、按鈕的文字和標簽

1. 按鈕文字的設計原則

按鈕文字的設計對于用戶體驗和產品可用性非常重要。一般來說,按鈕文字應該簡潔明了、易于理解和記憶,同時要符合產品的品牌形象和主題風格。

以下是一些常見的按鈕文字設計原則:

  • 簡短明了:按鈕文字應該簡短明了,不要過于冗長,以便于用戶快速理解和操作。
  • 可讀性強:按鈕文字應該具有較強的可讀性,字體大小適中,顏色鮮艷,避免使用難以辨認的字體或顏色。
  • 表達意義明確:按鈕文字應該能夠準確地表達按鈕的功能和意義,避免產生歧義或誤解。
  • 與品牌形象相符:按鈕文字應該與產品的品牌形象相符,符合產品的定位和風格。

2. 按鈕標簽的設計要點

除了文字之外,按鈕標簽也是非常重要的。合理的標簽設計可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕標簽設計要點:

  • 標簽內容簡潔明了:標簽內容應該簡潔明了,不要過于復雜,以便于用戶快速理解和操作。
  • 標簽位置合理:標簽的位置應該合理,不要遮擋按鈕的主要內容,也不要過于靠近邊緣,以免誤觸。
  • 標簽樣式統一:標簽的樣式應該統一,不要出現多種不同的字體、顏色或樣式,以保持界面的整潔和一致性。
  • 標簽語義明確:標簽的語義應該明確,不要產生歧義或誤解,以便于用戶理解和操作。

六、按鈕的交互設計

1. 按鈕的點擊效果和反饋機制

按鈕的交互設計對于用戶體驗和產品可用性非常重要。合理的點擊效果和反饋機制可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕點擊效果和反饋機制:

  • 點擊效果:按鈕的點擊效果應該明顯而流暢,可以使用淡入淡出、彈跳、放大縮小等效果,以增加用戶的互動性和趣味性。
  • 反饋機制:按鈕的反饋機制應該及時、準確地告訴用戶操作的結果,可以使用聲音、震動、提示框等方式進行反饋,以增強用戶的感知和滿意度。
  • 錯誤提示:當按鈕操作出現錯誤時,應該及時給出錯誤提示,以避免用戶產生困惑或不滿。

2. 按鈕的動畫效果和過渡效果

除了點擊效果之外,按鈕的動畫效果和過渡效果也可以提高用戶的使用體驗和產品的可用性。

以下是一些常見的按鈕動畫效果和過渡效果:

  • 漸變色:將按鈕的背景顏色漸變為透明或半透明,可以讓用戶感覺到按鈕正在被點擊或激活。
  • 放大縮小:在按鈕被點擊時,可以將按鈕的大小放大或縮小,以增加視覺效果和趣味性。
  • 旋轉:在按鈕被點擊時,可以將按鈕進行旋轉,以增加動態感和趣味性。
  • 彈出框:在按鈕被點擊時,可以彈出一個提示框或確認框,以增加用戶的確認感和安全感。

七、按鈕的測試和優化

1. 按鈕測試的方法和流程

按鈕的測試和優化對于提高產品的用戶體驗和可用性非常重要。合理的測試和優化策略可以發現并解決產品中存在的問題,提高產品的品質和用戶滿意度。

以下是一些常見的按鈕測試方法和流程:

  • 功能測試:對按鈕的功能進行全面的測試,包括點擊效果、反饋機制、錯誤提示等。可以使用手動測試和自動化測試相結合的方式進行測試。
  • 兼容性測試:對按鈕在不同設備、不同瀏覽器、不同操作系統下的兼容性進行測試,以確保產品能夠在各種環境下正常運行。
  • 性能測試:對按鈕的性能進行測試,包括響應時間、加載速度、資源占用等,以確保產品能夠快速響應用戶操作。

2. 按鈕優化的策略和技巧

除了測試之外,按鈕優化也是提高產品用戶體驗和可用性的重要手段。以下是一些常見的按鈕優化策略和技巧:

  • 簡化設計:將按鈕的設計簡化到最少,只保留必要的信息和功能,以便于用戶快速理解和操作。
  • 提供反饋:為按鈕提供及時、準確的反饋,讓用戶知道他們的操作是否成功,以增強用戶的感知和滿意度。
  • 增加互動性:通過動畫效果、過渡效果等方式增加按鈕的互動性,以提高用戶的趣味性和參與度。
  • 考慮用戶習慣:根據用戶的使用習慣和心理特點,合理設計按鈕的位置、大小、顏色等,以提高用戶的使用體驗和便利性。

八、總結

按鈕UX設計對于提高產品的用戶體驗和可用性非常重要。合理的按鈕設計可以增加用戶的參與度、趣味性和便利性,從而提高用戶對產品的滿意度和忠誠度。

在進行按鈕UX設計時,需要考慮按鈕的位置、大小、顏色、樣式、功能、反饋機制等多個方面,以確保產品能夠滿足用戶的需求和期望。同時,還需要進行測試和優化,發現并解決產品中存在的問題,提高產品的品質和用戶滿意度。因此,按鈕UX設計對于現代產品開發和用戶體驗設計都具有重要的意義和必要性。

本文由 @MO魚山寨 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

在設計時,圓角與直角該如何使用?

杰睿

將大東西進行拆解為小的東西,逐步解決問題,解決了小問題,大問題也解決了,在產品設計中也是一樣。在面臨圓角直角的選擇時,我們來看看作者如何做選擇

在當今數字化時代,UI設計已成為創造引人入勝的用戶體驗的關鍵要素。一個成功的UI設計不僅需要技術知識,還需要對細微之處的深刻理解。本文將探討兩種基礎但極為重要的圖形元素:圓角和直角。它們如何影響用戶的感知和互動,如何在設計中恰到好處地應用它們,以及它們在實際案例中的運用。

一、圓角與直角的特性

在介紹“圓角與直角”前,先給大家分享一個心理效應“bouba/kiki效應。”

這個效應最早由德國心理學家沃爾夫岡·科勒在1929年提出。

  • “kiki”這個詞的尖銳、快速的音調與尖銳的星狀圖案相呼應
  • “bouba”這個詞的圓潤、流暢的聲音則與圓潤的云狀圖案相呼應

最早在1929年沃爾夫岡·科勒做了一個實驗,該實驗展示了兩種形式,并詢問讀者哪種形狀被稱為“takete”,哪種形狀被稱為“maluma”。盡管沒有明確說明,科勒暗示人們強烈傾向于將鋸齒狀形狀與“takete”配對,將圓形形狀與“maluma”配對。

在2001年的另一組實驗中拉馬錢德蘭和 愛德華·哈伯德使用“kiki”和“bouba”這兩個詞重復了科勒的實驗,詢問美國大學本科生和印度講泰米爾語的人,“這些形狀中哪個是bouba,哪個是kiki?” 在兩組中,95% 到 98% 的人選擇彎曲的形狀為“bouba”,鋸齒狀的形狀為“kiki”,這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。

這個效應主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺形狀和語音上”

那么我們不妨擴展一下,把這這種效應延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例,我們只聽名字“羊”和“狼”就可以潛意識的認為“喜羊羊”就相當于“bouba”、“灰太狼”相當于“kiki”,“羊族”一聽就是溫和的族群,而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下,“可可愛愛的卡通人物”大部分就是以圓形為基礎“小黃人、葫蘆娃、維尼熊、大頭兒子等”,“超級大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”,這就是“將抽象含義附加到視覺形狀和語音上”。

如果聽完這些你還是不懂,那么最簡單的例子一個堪比吳彥祖的帥哥叫“文軒沒有大腦袋”,那當你見到他時一定會去觀察這個人到底有沒有“大腦袋”

那么回歸正題,我們將“圓角與直角”代入這種思考方式并將其進行UI思考,就可以大致了解“圓角與直角”大致的特性

1. 圓角

1)定義

  • 圓角指的是元素邊角被設計為圓滑的形狀,而非尖銳的直角。
  • 它通常通過設定一個半徑來實現,半徑越大,角越圓滑。

2)特性

  • 視覺友好:「圓角被認為更溫和、更友好,因為它們缺乏尖銳的邊緣,給人一種安全和柔和的感覺。」
  • 現代感:「在現代設計中,圓角被廣泛使用,它們通常與新穎、時尚的設計理念相關聯。」
  • 提高注意力聚焦:「圓角可以引導用戶的視線流動,幫助減少視覺干擾,使用戶更容易聚焦于界面的關鍵部分。」
  • 適用性:「在移動應用和網站設計中尤其流行,特別是在按鈕、輸入框、卡片和其他交互元素中。」

2. 直角

1)定義

  • 直角是指元素的邊角以90度角的形式呈現。
  • 它是最基本的形狀之一,在許多傳統和經典的設計中常見。

2)特性

  • 專業感:「直角通常給人一種更加正式、專業的印象。」
  • 清晰界定:「直角在視覺上提供了清晰的界定,使元素的邊界更加明確,有助于信息的組織和分隔。」
  • 傳統感:「在某些情況下,直角與傳統、經典的設計風格相聯系。」
  • 適用性:「直角在各種應用中都很常見,尤其是在需要傳達清晰、直接信息的界面中,如表格、列表和布局結構。」

那么回想一下“bouba/kiki效應”,今后在設計中當我們看到某個產品大量的使用“直角/圓角”我們就可以分辨這個產品的大致風格,同樣字體搭配也是相似的效果,通過不同的banner可以大致看出運營活動的大致目的。

二、圓角、直角的使用場景

在實際的使用場景中,我們就從最常見的“按鈕、卡片”兩個場景來舉例分析“圓角、直角”的作用。

1. 按鈕

我們首先具體聚焦在UI設計中對于“按鈕”這一元素的圓角和直角的使用:

1)圓角按鈕

  • 用戶友好性:「圓角按鈕通常看起來更加友好和容易接近,它們給用戶一種溫饌和舒適的感覺,適合于鼓勵用戶交互的場景。」
  • 移動設備適應性:「在移動設備上,由于屏幕尺寸較小,圓角按鈕更易于觸控,尤其是屏幕邊緣的按鈕。」
  • 減少視覺沖擊:「圓角可以減少視覺上的尖銳感,使界面看起來更加柔和,適合于尋求輕松視覺體驗的應用。」

2)直角按鈕

  • 專業和正式感:「直角按鈕給人一種更加正式和專業的感覺,在一些傳統的或者保守的設計風格中,直角按鈕更為常見,例如一些服裝品牌(Yohji Yamamoto、CONFIRMED)、學校(各學校官方網站)等。」
  • 內容和功能區分:「直角按鈕在視覺上更加突出,能夠有效地區分不同的功能和內容,尤其是在需要用戶做出明確決策的界面上。」

那么這里我們會有一個疑問,那就是“移動設備適應性”,這里我們可能會想到“直角按鈕”的面積看起來要比“圓角按鈕”的觸控面積更大,那為什么“圓角按鈕”更易于觸控呢?

我們從兩個方面來解答

1)觸控面積

  • 實際上,無論是圓角還是直角,按鈕的觸控面積通常是由其外接矩形決定的。這意味著,即使按鈕的視覺元素有圓角,觸控面積實際上仍然包括了這些圓角區域。
  • 在實際應用中,操作系統或應用平臺通常會為按鈕元素提供一個默認的“觸控目標大小”,這個大小是為了確保良好的觸控體驗而設計的,無論按鈕的視覺樣式如何。

2)視覺感知與觸控體驗

  • 圓角按鈕在視覺上看起來更加柔和和親切,這可能使得用戶更傾向于觸摸和與之交互。這種心理效應可能會導致用戶覺得圓角按鈕更“容易”觸控,即使實際的觸控面積與直角按鈕相同。
  • 在移動設備上,圓角按鈕的另一個優勢是它們的形狀與設備的圓潤邊緣相協調,這在視覺上創造了一種和諧感,可能會無形中增加用戶的觸控舒適度。

通過這兩方面,我們是不是又能聯想到“bouba/kiki效應”,介于“圓角本身的屬性”我們會更容易去點擊他。

2. 卡片

對于卡片我們還是先對比,在進行詳細的分析。

1)圓角卡片

  • 視覺風格:「圓角卡片提供了一種柔和、友好的視覺感受。它們的圓潤邊緣可以減少視覺沖擊,創造出更輕松和親切的外觀。」
  • 用戶體驗:「圓角的設計通常被認為更加現代和用戶友好。它們可以使界面看起來更輕松、更易于接近,這在提高用戶的互動意愿方面很有效。」
  • 適用場景:「圓角卡片通常用于需要提供溫馨、輕松體驗的應用中,例如社交媒體、娛樂內容展示、個人博客,或者任何強調用戶友好和易用性的設計。」
  • 功能效果:「在功能上,圓角卡片可以幫助區分不同的內容模塊,同時保持界面的整體一致性和流暢性。」

2)直角卡片

  • 視覺風格:「直角卡片提供了一種清晰、專業的視覺效果。它們的直線和銳角創造了一種結構化和有序的外觀。」
  • 用戶體驗:「直角設計傳達了一種正式和權威的感覺,適合于需要展示專業性和準確性的應用。」
  • 適用場景:「直角卡片通常用于更正式或專業的環境,如企業網站、在線商務平臺、教育平臺,或任何需要清晰展示大量信息的界面。」
  • 功能效果:「直角卡片在功能上有助于清楚地區分和組織內容,特別是在數據密集或信息密集的應用中。」

這里更要值得注意的一點是視覺效果方面的“圓角對于用戶的視覺效果要強于直角”,巴羅神經學研究所對角落進行的科學研究發現,“角落的感知顯著性隨角落的角度呈線性變化。銳角比淺角產生更強的虛幻顯著性”,這里角越尖,看起來就越亮。角落越亮,就越難看。

通過上述對比我們可以得到一個結論“圓角比直角更親和”,那么可以接著推論“圓角卡片更容易使用戶接受卡片內信息”這是因為圓角向內指向矩形的中心。這會將焦點放在矩形內的內容上。當兩個矩形彼此相鄰時,還可以輕松查看哪條邊屬于哪個矩形。尖角向外,從而減少對矩形內部內容的關注。當兩個矩形彼此相鄰時,它們還使得很難判斷兩條邊屬于哪個矩形。這是因為每個矩形邊都是一條直線。圓角矩形的邊是獨特的,因為線條朝著它所屬的矩形彎曲。

三、案例分析

那么對于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂”這兩個產品來分析看一下這兩個產品對于“直角、圓角”的應用。

1. CONFIRMED

CONFIRMED(Adidas旗下網站,這里懂球鞋的朋友我們可以把它理解為Nike的SNKRS)

作為Adidas旗下產品發售平臺,CONFIRMED更多的是發售一些潮流類的服飾最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服飾,這個應用程序旨在為Adidas的高需求和限量產品提供一個更加公平和直接的購買渠道,通常涵蓋了品牌與設計師和藝術家的合作款,以及特別版的運動鞋。

那么我們從“產品定位、用戶群體、主要功能流程”來分析一下

1)產品定位

  • 獨家發售平臺:「CONFIRMED 專注于提供 Adidas 的獨家發售和限量版產品,特別是鞋類和高端服裝。它的目標是成為品牌與其最忠實粉絲之間的直接連接點」
  • 品牌營銷工具:「通過這個平臺,Adidas 能夠加強其品牌形象,特別是在時尚和高端運動裝備領域。CONFIRMED 作為一個專門平臺,也強化了 Adidas 在潮流和限量產品市場中的地位。」
  • 市場分析和消費者洞察:「CONFIRMED 還可能被用作市場研究工具,通過分析用戶行為和購買模式來更好地理解目標市場。」

2)用戶群體

  • 潮流愛好者:「對最新潮流和設計保持關注的消費者,他們追求限量版、獨家合作系列。」
  • Adidas 忠實粉絲:「品牌的忠實支持者,對于品牌的新產品和特別發售保持高度興趣。」
  • 運動鞋收藏家:「對于限量版運動鞋有收藏價值的消費者,這些人往往愿意為獨特和罕見的設計支付高價。」

3)主要功能流程

  • 產品預覽和信息:「用戶可以在應用程序中瀏覽即將發售的產品,并獲取詳細信息,如價格、設計特點、發售日期等。」
  • 注冊和參與抽簽:「對于感興趣的產品,用戶需要在特定時間內注冊參與抽簽。這通常涉及填寫個人信息和選擇購買尺碼等。」
  • 抽簽結果通知:「抽簽結束后,用戶會收到是否中簽的通知。如果中簽,用戶將有機會購買這些限量產品。」
  • 購買和支付:「中簽用戶可以在應用程序內完成購買流程,包括支付和選擇配送選項。」
  • 社區互動和內容:「CONFIRMED 還可能提供與品牌相關的內容,如設計師訪談、品牌故事等,以增強用戶參與和品牌忠誠度。」

這里我們先從“CONFIRMED”卡片元素分析(本文只講述的直角卡片的用途,不過多講述App功能)

每款產品可以在一個直角卡片中展示,其中包括產品圖片、名稱和一些基本信息。這里在App的“首頁、發售信息、會員權益”這三個模塊最為突出,這種布局有助于用戶快速瀏覽和識別不同的產品

4)功能展示

這里“CONFIRMED”不同的卡片可以承載不同的功能,如顯示即將發售的產品、已經發售的產品、品牌故事等,幫助用戶快速定位他們感興趣的內容。這里使用通過卡片元素的方式來詳細展示產品,會使整個產品的調性保持一致,大卡片的元素傳遞給觀眾的瀏覽體驗會更直觀的感受產品(這里會發現一個很有趣的細節,貌似好的國外、跨境電商的App都會采用這些大的直角卡片)

接下來我們就講述關于“CONFIRMED”按鈕元素使用的分析:

5)突出的功能

直角按鈕通常用于突出最重要的操作,例如“購買”、“注冊抽簽”或“查看詳情”。這些按鈕因其鮮明的邊界和直接的設計而容易被用戶注意到。

6)風格統一

使用直角按鈕可以與應用中其他直角設計元素(如卡片)保持視覺一致性,為用戶提供一致且簡潔的視覺體驗。

7)視覺引導

這些按鈕通常配有“CONFIRMED”的顏色(藍色),用于引導用戶的注意力,幫助他們快速識別應用程序中的不同功能。

這里我們可以看到“直角卡片”“直角按鈕”在 CONFIRMED 應用中的應用可能主要體現在其用戶界面的設計上,通過清晰、有序的布局和直觀的用戶交互,提升用戶的體驗。

2. 汽水音樂

提到“汽水音樂”大家都不陌生,前段是時間各大“rapper、流行歌手”發歌都在汽水,這個App是可以和抖音聯動的,所以播放音樂的模式沒有采用大家常見的“點歌、切歌”操作,而是換成隨機曲子和“抖音”向下滑動切換一樣,這樣既新穎又能容易使用戶養成操作習慣,不至于一下子新的交互方式無法適應。那么我們同樣從“產品定位、用戶群體、主要功能來分析”

1)產品定位

  • 汽水音樂是一款音樂流媒體應用,旨在與主要競爭對手如騰訊音樂和網易云音樂抗衡。
  • 它不僅是一款單純的音樂播放軟件,還與抖音緊密結合,使得用戶可以在兩個平臺之間無縫切換音樂播放列表,顯現出對社交媒體和音樂流的綜合運用。

2)用戶群體

  • 汽水音樂的主要用戶群體是中國市場上的年輕用戶,尤其是那些已經使用抖音并尋求更豐富音樂體驗的用戶。
  • 考慮到字節跳動在短視頻領域的強大影響力,汽水音樂會吸引那些對新興、流行音樂以及個性化推薦感興趣的年輕群體。

3)主要功能流程

  • 個性推薦:「這里“汽水音樂”通過算法推薦“個性電臺”、“歌單推薦”、“3個榜單”」
  • 與社交媒體的整合:「能夠與用戶的抖音賬號同步,提供跨平臺的音樂體驗。用戶可以在抖音中發現音樂,并在汽水音樂中繼續播放,反之亦然。」
  • 播放:「汽水音樂的播放方式與抖音同步營造區分于其他音樂App不同的交互體驗」

那么我們從卡片開始分析,卡片主要應用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂盲盒”

那么他們起到的作用分別是

  • 提高用戶體驗:「圓角卡片的設計通常比直角設計更柔和、更易于接受。這種設計能夠減少視覺疲勞,使應用界面看起來更加友好和現代化。」
  • 增強視覺吸引力:「圓角卡片因其流線型的外觀,在視覺上更加吸引用戶。這有助于提升用戶對應用的整體印象和興趣。」
  • 組織信息:「圓角卡片可以有效地將信息分組,如將不同的歌曲、專輯、播放列表等內容區分開來,使得用戶瀏覽和選擇時更加直觀和方便。」
  • 提升操作便捷性:「在觸摸屏上,圓角卡片可以提供更好的觸摸目標,使得用戶在進行選擇和導航時更加方便。」
  • 增強內容的層次感:「圓角卡片可以通過陰影、邊框或顏色的變化,為界面添加層次感,使得內容更加突出和易于閱讀。」
  • 提升品牌形象:「現代的界面設計往往傾向于使用圓角元素,使用這種設計可以使應用看起來更加時尚,從而提升品牌形象。」
  • 圓角卡片在提升用戶體驗、美化界面、優化信息展示和操作便利性等方面發揮著重要作用。這些設計元素有助于提高應用的整體吸引力和用戶的使用滿意度。

“圓角按鈕”對于“汽水音樂”的作用有:

  • 視覺焦點:「圓角按鈕可以作為視覺焦點,吸引用戶的注意力,特別是對于重要的功能,如播放按鈕或搜索按鈕。」
  • 界面美觀性:「圓角按鈕增加了界面的美觀性,與整體設計風格協調一致,提升了應用的整體視覺效果。」
  • 一致性和標準化:「在應用中使用標準化的圓角按鈕可以提高界面的一致性,使用戶更容易理解和使用不同的功能。」

其實通過對比,我們會發現“圓角”在社交、音樂等偏娛樂方向采用的更加多,因為這些產品屬性需要“產品與用戶”、“用戶與用戶”之間拉近距離,圓角不僅更容易我們的眼睛處理,而且還使信息更容易處理,圓角很有吸引力。那么“直角”就偏向專業領域、正式的場合以及一些小眾的產品。

四、總結

了解并應用這些元素的特性,不僅能夠提升設計的美觀性,還能夠在更深層次上與用戶產生共鳴。作為UI設計師,深入理解圓角和直角的影響,將使我們能夠更精確地傳達我們想要表達的信息,在了解簡單的形狀如何影響感知后,我們就可以有目的地進行設計,將每一個微小的視覺元素加在一起,形成用戶潛意識中感知的一致、獨特的品牌個性。

本文由 @文軒沒有大腦袋 原創發布于人人都是產品經理,未經授權,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

規范的透明度之美:提升可讀性和美觀性的有效工具

杰睿

在頁面中,我們時常會被各種絢麗的色彩所吸引。本文介紹了透明度系統的優勢,并以實際例子展示其在解決設計問題、提高細節表現和可讀性方面的應用。讓我們一起看下去吧。

打開絢麗紛繁的頁面,我們時常會被各種各樣的色彩所吸引。但是,除了鮮艷奪目的顏色外,你可曾留意過那些看似平凡無奇的中性顏色?這些中性顏色在UI設計中扮演著不可或缺的角色,而其中的透明度系統更是隱藏著無限的魅力。今天,我們就要一起揭開透明度系統的神秘面紗,探索其在UI規范中的重要性和作用。

或許你曾聽過“Less is more”這句名言,透明度系統恰好就是這個理念的最佳體現。通過微妙的不透明程度調整,中性顏色的透明度不僅能提升整體界面的平衡感和視覺品質,還能增加元素之間的層次感和空間感。想象一下,通過透明度的微妙運用,你的設計將呈現出一種舒適且現代感的風格。是不是感覺很神奇?同時這個方法還是谷歌設計規范中的推崇之一哦!

在設計規范中,我們通常會根據文字的重要性將其分為重要、常規和輔助三個層級,然后為它們定義不同的顏色。但是,有時候使用定義好的顏色在特定情況下會出現識別不清晰、與背景搭配不美觀的問題。這就是透明度應用的典型場景。下面先說下使用透明度的優勢:

  • 提升設計的細節表現:通過給文字和設計元素設置透明度,可以使其與背景更融合,提升細節的呈現效果,使作品更富有層次感。
  • 提高可讀性:透明度的設置可以在不損害背景色的前提下,增強文字的對比度,使其更易讀,提供更好的用戶體驗。
  • 增加視覺美感:透明度的運用可以使設計更具美感和藝術性,讓作品更具吸引力。

接下來讓我們首先看看純色文字定義經常遇到的問題吧。當設定文字與一些顏色元素搭配時,就可能出現一些尷尬的情況。

比如,下圖中相同顏色的文字在品牌色背景上,識別度低,視覺上也不是很和諧。

規范的透明度之美:提升可讀性和美觀性的有效工具

接下來,我們對文字顏色進行一些小小的改變,通過降低不透明度來解決這個問題。

效果立竿見影!降低不透明度后,文字識別問題迎刃而解,細節也變得更加清晰,文字顏色還與背景色融為一體,看起來更為和諧。

規范的透明度之美:提升可讀性和美觀性的有效工具

其實,不僅僅是文字,我們還可以用這個方法來改善其他元素的設計,比如表格的分割線。讓我們來看一個例子。

通常,我們使用較淺的顏色來填充分割線,在遇到有彩色背景的情況下,分割線可能會“隱身”。在下圖中,同樣顏色的分割線在帶有懸停效果的表格上就“隱身”了。

規范的透明度之美:提升可讀性和美觀性的有效工具

接下來,讓我們同樣的方法來改善這個問題。

效果如下圖所示。左邊的分割線展示出比表格本身顏色更深的藍色,整體顏值得到了提升。這也展示了設計師在細節把控上的魅力。

規范的透明度之美:提升可讀性和美觀性的有效工具

那么這個方法如何應用到實際工作中呢?讓我們來介紹一下具體步驟。

首先,我們需要考慮文字的使用場景,大致分為淺色背景、深色背景和彩色背景。我們需要根據實際項目情況來確定使用場景。一般我們會在設定色階時也會根據實際項目設定一個深色和淺色的透明度階梯,例如:設定顏色#000000,依次設置透明度為90%、80%…20%、10%序列。當然這個序列可以分為有序序列和無序序列,85%、56%等等

接下來下面是對深色背景和淺色背景下文字顏色的定義,具體操作如下:對于淺色背景,我們將文字分為三個層級:重要、次要和輔助。針對這三個層級,文字顏色填充為#000000,并設置序列中對應的不同不透明度。具體來說,重要文字的不透明度設為90%,次要文字為60%,輔助文字為40%。在深色背景下,相同的操作也可以應用,只是將文字顏色設置為#FFFFFF(白色)。在彩色背景下,我們會根據具體情況選擇使用深色背景或淺色背景下的文字顏色,并根據需要進行透明度的調整。

最后,為了確保文字在不同背景下的清晰度和可讀性,我們需要進行對比度測試。可以使用對比度測試工具,來驗證所定義的透明度是否符合設計規范。(https://www.siegemedia.com/contrast-ratio)

規范的透明度之美:提升可讀性和美觀性的有效工具

但是,請記住,設計并不僅止于設計稿。最終需要前端同學來實現,而不是所有前端同學都熟悉并愿意使用透明度的系統。這時,我們可以運用我們的魅力和專業知識來說服他們。我們可以引用谷歌的Material Design官方文檔,證明透明度的可行性和簡便性。我們可以解釋這種設置透明度的方法不僅簡單,而且可以提高工作效率,同時還能增加用戶的視覺體驗。

通過使用透明度解決設計問題,我們可以使文字和設計元素更融合、提升細節表現,并提高用戶體驗。透明度的設置靈活多樣,能夠適應不同項目、不同場景的需求,讓我們的作品在視覺的世界中獨樹一幟。

在UI設計中,中性顏色透明度是一個非常重要的設計工具,它可以提升界面的平衡感、視覺品質,增加元素之間的層次感和空間感,以及創造舒適且現代感的設計風格。通過合理選擇透明度級別,并在不同元素的應用中靈活運用,我們可以創造出令人愉悅和吸引人的界面。

鼓勵設計師們在UI設計中靈活運用中性顏色透明度,并探索出獨特的設計風格。根據不同的設計目標和色彩搭配,選擇合適的透明度級別,并結合其他設計元素,為用戶呈現出現代且優雅的界面。當然,這個方法并非一勞永逸,希望在實際工作中留意并找到適合自己和項目的方法。讓我們的設計在色彩的世界中綻放光芒吧!

本文由 @Esc 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

B端拖動排序的多種場景及交互

杰睿

排序在B端和C端產品中都比較常見,隨著用戶對產品使用的易用性提高,排序在產品交互中也在變化。本文分享B端拖動排序的多種場景及交互,希望對你有所啟發。

很久沒有更新B端產品相關的文章了,近期工作項目中做了很多新需求,接觸了更多業務,也學到了一些新的交互,后續將會根據我在實際工作項目中遇到的需求展開總結。

B端產品設計具有較高的業務屬性,所以對于ui設計師而言也需要有較強的業務知識,在完全理解需求后,再針對業務場景、用戶體驗、交互、布局合理、易用性等多維度展開設計。

這一期主要分享關于B端產品中拖動排序功能。

排序在B端和C端產品中都比較常見,前期排序有通過點擊上下箭頭排序,但是這樣的交互易用性較差,隨著用戶對產品使用的易用性提高,這種排序方式在產品交互中已經漸漸的被舍棄。

目前對于排序功能,使用更多的是通過拖動排序,通過選中數據后長按鼠標右鍵,上下拖動來完成數據的排序。

一、拖動排序的多種組件和交互

在B端產品中,我目前接觸的拖動排序的組件包含以下兩個大類:

  1. 一級目錄常規排序(非樹結構)
  2. 樹組件多層級排序

對于分類2【樹組件多層級排序】又包含兩個小類:

  1. 同層級排序(橫線高亮顯示即將放的位置)
  2. 跨層級排序

對于小分類【跨層級排序】又可以細分為四個場景:

  1. 父級未展開時:拖動到父級、父級整行高亮
  2. 父級未展開時:拖動長按停留在父級時,父級自動展開子級
  3. 父級已展開時:拖動到子級時,父級整行高亮,拖動到的位置出現高亮橫線
  4. 父級已展開時:拖動到子級文件夾時,父級不需要高亮,子級文件夾目錄整行高亮(子級已展開和未展開的交互與父級同理)

二、拖動排序場景和交互實操

上面已經總結了排序的組件和場景,下面我們就一起來看看不同組件在不同場景下的具體交互,通過實際項目設計詳細介紹拖動排序的功能。

1. 一級目錄常規排序(非樹結構)

數據默認展示類似列表數據一樣,平鋪左對齊排版,當拖動排序時,鼠標移動到需要排序的數據行,長按鼠標右鍵并拖動數據上下移動,被拖動的數據原位置置灰(也可以直接消失)。

同時,被拖動的數據跟著鼠標走,移動到其它位置時,在將要放下的位置出現藍色高亮分割線(還可以做到所有數據實時變化位置效果)這樣能讓用戶更加直觀地看到數據位置的變化。

此類需求一般是針對一級數據排序,數據結構比較簡單,沒有文件夾多級樹狀結構,下面列舉幾個工作中遇到的需求場景,以及分享幾個其它產品中遇到的交互,便于大家理解。

由于B端產品具保密性,所以下面分享的截圖非工作實際數據,大家只要明白需求場景和交互即可。

需求場景1:產品業務中有很多的表單,表單中的字段順序在不同企業中不同,應該如何設計呢?

在設計時,可以將表單所有的字段羅列出來,然后用戶通過自定義排序字段即可,這里的交互就可以直接采用上下拖動排序。

需求場景2:飛書中有多個應用,對于每個用戶而言,自己所關注的應用不同,優先級不同,該如何設計?

同理,飛書也是對用戶個人的應該設計了拖動排序功能,可以根據自己關注的應該排序應該的位置,從而更快的找到自己常用的應用,提高工作效率。

無論是對于列表數據還是卡片數據的排序都可以采用這種拖動排序的交互。

2. 樹組件多層級排序

(1)同層級排序(橫線高亮顯示即將放的位置)

樹組件同層級排序默認展示和拖動時效果與一級目錄常規排序一致。

(2)跨層級排序

父級未展開時:拖動到父級、父級整行高亮

如下圖,當需要把文件夾【數據名稱顯示004】放在【數據名稱顯示003】文件夾中,鼠標拖動數據放在【數據名稱顯示003】時,【數據名稱顯示003】整行會出現藍色高亮,表示被拖動的數據即將放在該文件夾內。

父級未展開時:拖動長按停留在父級時,父級自動展開子級。

如下圖,按照上面的步驟拖動時,當鼠標一直停留在【數據名稱顯示003】的位置時,該文件夾會自動展開二級目錄,這是一個拖動排序比較友好的交互,可以讓用戶再次看到該目錄下的數據結構,并快速一次性選擇需要放的位置。

父級已展開時:拖動到子級時,父級整行高亮,拖動到的位置出現高亮橫線。

如下圖,在上圖基礎上,當鼠標繼續拖動數據,想要放在二級目錄中時,數據一級目錄同樣會顯示高亮,告訴用戶當前數據的層級關系。

同時,二級數據中會出現藍色高亮分割線,標識被拖動的數據即將放的位置,這樣就能清晰的知道被拖動的數據將放在那個目錄的那個位置。

父級已展開時:拖動到子級文件夾時,父級不需要高亮,子級文件夾目錄整行高亮(子級已展開和未展開的交互與父級同理)。

當需要將數據拖動到二級文件夾內時,只需要高亮二級文件夾即可。

關于樹組件多層級排序的使用場景和交互比較復雜,上面我根據不同場景分別列出了交互展示方式,下面再根據實際業務需求列舉案例說明,因為此場景主要是針對交互和顯示,所以我就直接拿動圖展示,便于大家理解。

本文由 @設計小余 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

扁平化設計終結?新趨勢來了?

杰睿

扁平化設計這一趨勢已經流行了挺長時間,而現在,設計風向似乎要有所轉變了,這或許可以從一些設計案例中透露出來。這篇文章里,作者就從案例出發,展示了設計趨勢的演變,一起來看看吧。

設計趨勢來來去去,但一個普遍的趨勢已經流行了很長時間,那就是扁平化設計,現在也幾乎是無處不在,UI中的按鈕,Logo,圖形設計等等。

最近感覺設計風向有點變啊,我碰到幾個例子感覺挺有意思的,似乎是印證了這波轉變。

在這篇文章里,我主要聚焦在UI設計領域,看看設計趨勢在這方面都經歷了哪些變化。

一、扁平化設計趨勢是怎么興起的?

2013 年蘋果推出 iOS 7 后,扁平化設計火得一塌糊涂,界面設計方向一夜之間發生了轉變。雖然蘋果也是借鑒了其他制造商已經應用的元素,但其作為行業風向標的影響力依然無人能及。

從擬物到扁平,iOS 7 帶來了革命性的設計語言飛躍,顛覆了之前 iOS 的視覺風格。蒂姆·庫克將其稱為 “iPhone 以來 iOS 最大的變革”。

看上圖就一目了然(iOS 6 左,iOS 7 右),iOS 7 砍掉了許多元素的 3D 效果,整體扁平了很多。其實改成這樣是有道理的,畢竟擬物設計當初是為了讓用戶更快上手新界面,現在大家都習慣了,設計語言也需要更新迭代了。

十年過去了,絕大部分現代界面設計依然在用這種設計語言。然而,隨著設計逐漸追求更多復雜性和立體感(是的,又是3D,回到擬物設計),一些方面也開始出現變化。讓我們來看看幾個近期的例子。

值得說的是,盡管蘋果公司在引領扁平化設計趨勢方面發揮了重要作用,但其實靈感還是來自Windows Mobile 和 Android 等產品。Windows Mobile 才是先在主流制造商中第一個用扁平化設計的大廠。

對這段歷史感興趣的可以看看這篇10年前寫的文章:https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences

二、Reddit 品牌設計刷新

先一起看看最近的一個大廠設計改版案例,Reddit最近刷新了它的Logo。你能從上面的圖中看到,相比于舊版,新的設計有了一些3D風格化。

一直以來,扁平化logo是主流,但隨著像Pentagram這樣的設計大廠都開始探索3D化設計風格,預示著扁平化的時代就快要過去了。

現代的品牌logo設計大多是扁平的,因為這樣既清晰易讀又方便調整大小。真想看看其他公司接下來會怎么玩品牌設計。

三、MacOS Big Sur 圖標

回到2020年,在那年的11月,蘋果刷新了它們的MacOS圖標風格。我個人認為,這是在細節設計上搭配更多3D效果這股趨勢的源頭,我在網上看到了很多這樣的討論。

從 Big Sur 開始,蘋果就在圖標上下功夫,給原生應用圖標加料,讓它們看起來不那么乏味。你看上面那些,陰影也深了,漸變也多了,整個圖標更有立體感。

一看蘋果都整 3D 了,不少第三方應用開發商也坐不住了,紛紛改起了自家圖標,看起來更立體了。

蘋果在界面設計上向來引領潮流,這次的新趨勢,又不知道多少公司和個人會跟著玩。

四、Airbnb 新版本設計

Airbnb在最近的夏冬主題設計更新里,玩了不少 3D 和復雜設計。就拿它們新出的“游客護照”來說吧,圖標就跟真“書”似的,點開交互還有翻書動畫,賊逼真。

游客護照打開后,頂部卡片加了陰影,看著更有立體感,一點都不扁了。

Airbnb 在其他地方也玩兒 3D 了,比如“最受歡迎”那個地方,評分都立體起來了,還有那個改版后的“選月份”的按鈕,做得跟真表盤似的。

最后,他們冬天的新版本里,插畫也搞起了等角投影風格,給你們看下面他們那個新版本宣傳片就知道了。

五、Shopify更新了設計系統

Shopify 對深受好評的設計系統 Polaris 進行了重大更新,換了套新花樣!以前那些扁平的按鈕,現在縮小了,還更帶感了,按著賊舒服。

這次重設計也不是瞎改,當初設計團隊說扁平化做能讓界面干凈,理解簡單,用著還效率高。可時間一長,商家們就不樂意了,說這界面整得“沒勁”、“乏味”還“單調”。

改設計主要是為了把軟件界面打造成 “專業工具”,更加高大上。改動之后,按鈕在點擊時更爽了一些,就像商家們平時在用的物理按鍵一般。

探索的2種不同設計風格

總結

上面這些案例展示了現代設計趨勢的演變,從扁平化設計向更加注重細節的方向過渡。

扁平化設計固然擁有清晰高效等優點,但現代設計更傾向于展現層次和深度。設計師和開發者應當密切關注這一趨勢,并做好準備將相關元素融入自身系統,尤其是在大型品牌和產品中逐漸成為趨勢的情況下。

設計趨勢真是一個輪回。

原文作者:Chan Karunaratne(本文翻譯已獲得作者的正式授權)

譯者:彩云Sky,人人都是產品經理專欄作家,騰訊高級視覺設計師。

本文由@彩云sky 翻譯發布于人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

史上最全B端產品的交互規范來了,建議收藏!

杰睿

交互規范有效地規定了產品如何與用戶進行交互的規則和標準,這篇文章里,作者便梳理了B端產品的交互規范,一起來看看,或許會對產品經理、產品開發人員、交互設計師等人群有所幫助。

序言

從業B端產品7年+,大大小小公司對交互規范有著不同的要求,但是萬變不離其宗,交互總有其底層規范要求,那么接下來跟大家詳細說明一下交互規范細則,超級詳細的交互規范來啦!

WHAT:交互規范是什么?

產品交互規范,也稱為界面交互規范或用戶界面規范,是一套規定產品如何與用戶進行交互的規則和標準。它包括設計元素的布局、動作反饋,以及對產品的使用流程和功能邏輯等各個方面的設定和控制。

交互規范重點在于人機交互的友好性和流暢性,用起來順手且符合商業目的就是交互規范最好的詮釋。

WHY:目的及意義

  • 提高用戶體驗:好的交互規范能夠幫助用戶更好地了解和使用產品,從而提高用戶體驗。
  • 提升開發效率:通過制定交互規范,可以使得設計師和開發者在開發過程中有明確的指導。
  • 提升品牌形象:通過統一的交互規范,可以使得品牌的各個產品在交互方式上保持一致,從而提升品牌形象。

WHO:適合哪些讀者

產品經理,產品開發人員,交互設計師,產品UI設計人員。

一、色彩

1. 色彩體系

分成兩個層面:系統級和產品級。

1)系統級色彩體系可參考螞蟻的交互組件https://ant.design/docs/spec/colors-cn,螞蟻組件對整體交互規范有著細致且順滑的操作演示。假設公司內部有專門的設計部門,可以設計部門整體定義公司色系以及字體等等。

2)產品級色彩體系進一步去突出產品本身色彩調性以及功能屬性。

2. 產品級色彩體系

1)品牌色的應用

品牌色體現產品以及品牌特色,加深使用者對品牌的印象。比如支付寶系列操作均是藍色為主,微信主色調為綠色和白色,抖音是黑色系。

2)功能色

功能色代表了明確的信息以及狀態,比如錯誤提示,失敗提醒,成功提示等等。在一套產品體系下,功能色盡量保持一致,比如新增,刪除等功能按鈕色彩需要跟主題色保持一致。

3. 系統建議

公司重要對外宣傳系統以及內部主系統均使用品牌色,突出公司特色;

另外一個頁面盡量不要超過3種顏色,并且是在同一標準色彩體系內,盡量不要自己去色彩庫隨意選取色彩。

二、字體

1. 字體定義

字體是體系化界面設計中最基本的構成之一。

在中后臺視覺體系中定義字體系統,我們建議從下面四個方面著手考慮:主字體,字階與行高,字重,字體顏色。

2. 主字體

為了保證在多數常用顯示器上的用戶閱讀效率最佳,根據電腦顯示器距離舒適度以及用戶觀感舒適度,確認導航為16px,標題為16px,正文為14px,說明為12px。

3. 字階與行高

字階是指不同尺寸的字體。行高就是一行字的高度,包裝在字體外的邊框盒子的高度。

建議的主要字體為 14,與之對應的行高為 22。其余的字階的選擇可根據具體情況進行自由的定義。建議在一個系統設計中,字階的選擇盡量控制在 3-5 種之間,就跟衣服搭配一樣,顏色不要過多,簡潔舒適為宜,字體字號在一個區間范圍內。

4. 字重

字重為字體的粗細程度,建議用 regular 以及 medium 的兩種字體重量。

5. 字體顏色

黑色為主,正文建議選用 #333333到#666666 之間的顏色。注釋類的文字建議選用#999999。

三、對齊

文案類最好為左對齊,數字類最好為右對齊,表單類間距建議8px,文字右對齊,結尾沒有冒號。

四、按鈕

市面上比較主流的為這四種按鈕,主按鈕,線性按鈕,次按鈕和純文字按鈕。具體使用規則和使用場景如何呢?我們應該從哪些方面下手去設計按鈕?下面給大家一一進行解答。

1. 主按鈕

主按鈕為主要的按鈕。引導用戶進行點擊操作,一個按鈕區域最多使用一個主按鈕。

場景應用:可應用于確認、新增、保存等等,你想引導用戶做何操作,就可以把視覺焦點集中在哪個按鈕上。比如退款操作時,商家本質希望用戶不退款,主按鈕為返回或是再想想的按鈕。

需要注意的是不要在同一個表單中使用多個主按鈕,1-2個即可,次按鈕或是線性按鈕多于5個時可以向上折疊收起。

2. 線性按鈕&次按鈕

線性按鈕&次按鈕兩種按鈕均可點擊,但是功能均弱于主按鈕。如果希望引導用戶進行點擊,可以選擇線性按鈕;若希望用戶盡可能少點擊或是不點擊可以選擇次按鈕。

場景應用:一般在大表單頁面批量導入,下載均為次按鈕或是線性按鈕。

3. 純文字按鈕

純文字按鈕就是有顏色的文字按鈕,可進行點擊。

場景應用:一般應用于表單中大面積需要點擊的操作,比如查看,刪除,編輯等等,對表單中每一行進行的操作。

4. 謹慎按鈕

謹慎按鈕用于特殊情況下防止誤操作的按鈕。

場景應用:一般應用于刪除/付款/退款/修改權限/移除等危險操作,大部分都需要再次確認才可以。

5. 按鈕順序

前面介紹了那么多種按鈕以及應用場景,那么按鈕應該如何進行排列,需要遵循何種規則呢?

1)閱讀習慣

大家可以閉著眼睛想一下,正常我們閱讀的習慣是從左到右,從上到下,表單信息閱讀完畢后需要進行操作,最好都放在右上方。

2)相關性原則

讓相關的操作按鈕更相近,比如上一步和下一步,保存和取消,增刪改查,讓這些兄弟按鈕距離挨得更近一些。

五、導航

導航是B端系統的地圖索引,幫助用戶可以順利到達目的地。導航對于B端產品交互而言,是系統之眼,一方面清晰展示系統結構,另一方面幫助用戶快速找到他們想要的信息。好的導航清晰操作順滑,差的導航會讓用戶沒有二次進入的想法,所以好的導航是系統成功的一半。

市面上主流的導航交互為全局導航和頁內導航,好的導航如何進行設計,我們需要選取哪種導航模式?繼續一起探索吧。

1. 全局導航

1)側邊豎向導航

使用規則:

  • 適用于企業級產品,尤其是較為復雜且操作較為繁瑣的系統,比如人力系統,CRM系統,ERP系統等等;
  • 建議1-3個層級使用,可以承載多個層級;
  • 建議6-8以上菜單使用,可以承載多個菜單。

需要特別注意豎向導航的排列順序,較為復雜的企業級系統從上到下一般依次為:

  1. 首頁(工作臺、駕駛倉):主要展示整體系統主要功能入口以及一些主要數據,內容信息等等。
  2. 主要功能菜單:主要展示系統較為重要的功能菜單,比如人力系統展示入職管理,活水管理,離職管理等等。
  3. 數據統計(數據記錄):主要展示較為重要的數據統計或是數據記錄,比如客服系統的在線會話記錄,在線會話統計,外呼記錄、外呼統計等等。
  4. 系統配置:主要展示系統內部的功能配置,權限配置等等,比如人力系統的人員配置,菜單配置等等。
  5. 消息中心(幫助中心):主要展示系統內部消息,意見反饋,幫助中心等等,比如發貨系統中連接上下游的發貨信息,數據下載消息通知,服務更新通知等等。

優點:

  • 多層級,拓展性較好,可以支持多欄目多菜單;
  • 導航為固定形式,用戶在操作和瀏覽時可以快速定位和回到首頁,操作效率高;
  • 左側導航可以進行收縮,可擴大頁面寬度。

缺點:

層級入口較多時,用戶下鉆縱深體驗稍差。

2)頂部橫向導航

使用規則:

  • 適用于較為簡單的企業級系統或是官網,欄目較少,可以給用戶更好的沉浸式體驗;
  • 建議1-3個以內層級使用,可以承載多個層級;
  • 建議2-6以內菜單使用,菜單字數需要去適應整體屏幕的寬度;
  • 需要特別注意的是橫向菜單從左到右,權重依次減少。

優點:

  • 整體頁面排版較為簡單,方便用戶輕便操作;
  • 用戶能做沉浸式體驗,體驗感較好。

缺點:

  • 承載內容有限,層級拓展性較差;
  • 橫向中文或是英文命名需要受整體屏幕寬度的限制。

2. 頁內導航

1)面包屑

面包屑幫助定位菜單以及返回菜單,可以顯示當前頁面的路徑,是比較常用的導航方式。

使用規則:

顯示當前頁面路徑,方便用戶進行返回操作,最好大于等于3個層級進行使用;

2)Tab

使用規則:

較常應用于顯示頁面不同內容構成,比如人力詳情頁顯示Tab欄為基礎信息、公司任職信息、獎懲信息等等。

3)步驟條

使用規則:

較常應用于一步步按照某種提示去完成任務,任務有明確的先后順序;步驟一般為1-5步。

結語

產品交互規范的內容模塊還是較多的,希望這篇文章對你的產品交互能力有所提升!另外交互規范是產品架構的基礎的地基,具體樓房蓋成什么樣還需要用心去思考以及借助公司內部UI和UE的力量。

本文由 @月亮漫談 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

B端彈窗設計|如何科學定義彈窗的尺寸規范?

杰睿

本文深入分析了B端彈窗設計的尺寸規范問題,提供了科學定義彈窗尺寸的方法和思路,旨在幫助設計師提升操作效率并確保良好的用戶體驗,希望對您在彈窗設計上的決策有所啟發。

相信大多B端設計師對web彈窗設計的規范都不陌生:比如彈窗按交互形式可分為模態彈窗和非模態彈窗;

按承載內容類型分為:提示類、操作類、展示類彈窗;按彈窗承載信息量的大小可以分為:小尺寸彈窗、中尺寸彈窗、大尺寸彈窗…等等但最近,在做一個操作提效的需求設計時遇到了需求方對彈窗尺寸的規范挑戰~

大致需求是這樣:為節省彈窗內對選項選擇的時間,現將原本彈窗內的級聯選擇下拉框改成平鋪按鈕的形式。(見下圖)ps:本平臺為人工審核平臺,使用用戶為審核員,平臺設計要為審核員的審核效率負責,審核效率一般表示為:單人單天(8小時)xxx條審核量。

問題點:承載內容信息量不固定原因:彈窗內用戶選擇項為不通過原因,而此選擇項是用戶根據自身企業的風險標簽來自定義配置,這就涉及到級聯選擇數量的問題,有的客戶風險標簽體系細,多則幾百個,有的客戶只需要粗粒度標簽,例如只有一級標簽,總數可能不超過十個…

設計思路

1.與用戶溝通-明確信息量的承載量級范圍

需求方:我要一個這么大的彈窗!好讓信息呈現更全面!

但做設計從來不是憑空定義一個彈窗大小,要做到有理有據;前期選擇先跟使用此平臺的審核負責人溝通,來確定目前已接入的客戶在此處自定義配置的原因數量量級并整理出溝通結論:

存在少量客戶10個以內的原因個數、常規客戶在30個左右的原因個數、現存一家客戶使用最大量級100+原因個數。但由于控制權在客戶方,原因量級不可控,未來也可能出現幾百的數量。在以上結論中,可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗,但到底哪個最為合適需要進一步判斷。

2.確定彈窗彈窗尺寸

在有可能的600px、800px、1200px三種寬度中選取最合適的彈窗尺寸,分別從操作效率與適配性角度對其進行判斷。操作效率層面:

當原因個數在30個以下時:

若不同寬度時,都選擇第一個處置原因,根據交互方法論–菲茨定律,指點設備到達目標的與兩個因素有關:(1)設備當前位置和目標位置的距離(D)。距離越長,所用時間越長;(2)目標的大小(S)。目標越大,所用時間越短。

由此可見此操作的最終目標按鈕為右下角的確定按鈕,目標按鈕大小不變,但整體的選擇距離是相對兩個較小彈窗要遠的。D3>D2>D1,所用時間 T3>T2>T1。由于對審核員任務操作時間和效率要考慮到秒或毫秒級別,此大小對用戶快速完成此操作起到負向作用。

另外,當原因個數10個以內時,可見此時彈窗寬度過寬,導致空白區域過大。

當原因個數在30個以下時,操作效率評分:

1200px ????

800px ??????

600px ??????

當超過100個原因個數時:1200px 一屏內展示完全,不需要滾屏滑動;800px 可在兩屏內展示完全,需要滾屏滑動;600px 超出兩屏展示才可展示完全,需要滾屏滑動。

當原因個數超過100時,操作效率評分:

1200px ??????

800px ??????

600px ????

適配性層面:

根據市面主流屏幕分辨率尺寸調研:

市面上存在部分 1024 分辨率的顯示屏,所以:600px能夠適配所有市面主流分辨率顯示器;800px能夠適配所有市面主流分辨率顯示器;1200px不能能夠適配市面主流1024*768的分辨率顯示器,彈窗不能在顯示器內顯示完全,固適配性相對較弱。

綜合三種彈窗大小的操作效率和適配性:

800px的表現最優,固選取800px的彈窗大小。

3.確定彈窗基本規范

高度規范:由于信息量的不同可以根據內容多少進行自適應高度,限定max high 700px。由于一般超出800px可能出現瀏覽器外滾動條,所以選取高度為600-800px之間。

滾動條規范:限高后,若信息超出max high支持出現內滾動條。瀏覽器適配規范:瀏覽器窗口>800px,彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應。瀏覽器窗口<600px,彈窗寬度保持600px,出現瀏覽器外滾動條。

本文由人人都是產品經理作者【Clippp】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

交互設計太燒腦?學會模式思維,助你效率狂飆 300%

杰睿

在互聯網領域中,人機之間的互動過程就是交互。交互也有一些可預測的、重復出現的規律,作者總結了其中常見的七種C端交互模式,可以提高大家的工作效率,分享給大家。

前段時間有個產品童鞋,他剛加我就問了一大串問題。

什么是模式(Pattern)?什么是模版(Template)?這兩個概念有什么區別?

作為一個熱心好學、樂于助人的產品仔,我當然和他暢聊了一個多小時,順便總結下聊天內容。

你是不是也經常在生活工作中,碰到類似“行為模式、設計模式、語言模式、文檔模版、表格模版”等名詞。

但又搞不清它們有什么區別,搞懂了又有什么用?

別急,我們花幾分鐘,先來嘮嘮什么是模式。

一、什么是模式?

可預測、重復出現的現象或規律,通過歸納總結,就變成了某一種模式。

我們的生活中,就有許多模式的影子。

比如常見的商業模式、營銷模式、行為模式、數學模式、語言模式等。

舉個例子:

簡單說下行為模式,它分為了“習慣模式、消費模式、學習模式”等等。

苦逼打工仔普遍的消費模式,一般是工作日花錢少,到了周末都愛到商場逛街和購物。

但又有特例,我有個朋友就特別宅,他只喜歡在上班的時候,摸魚逛淘寶下單,簡直離譜~

掌握模式,有什么用?

當你掌握了模式的概念,并嘗試在生活中使用,相信你一定能感受到這 7 個好處。

  1. 信息壓縮:把信息精簡成特定的模式,記憶傳播更容易了,教給別人更是輕輕松松;
  2. 知識萃取:通過學習模式,掌握系統化的知識,就像搭樂高拼積木,簡單易懂、一學就會、舉一反三;
  3. 簡化問題:用模式來解決問題,意味著它不再是一團亂麻,成為了可分割的部分,原來苦惱的事,現在輕松搞定;
  4. 識別規律:當你摸清了模式的現象規律,就像旅游帶著地圖,走到哪里都不慌;
  5. 提高效率:把模式進行泛化使用,可以大大提高你的工作產出,蓋章可比畫圖快太多了;
  6. 組合創新:試著把你學會的各種模式,打亂排序、重新組合,說不定會拼出一些新玩意;
  7. 預測未來:搞懂了特定領域的模式,意味著你熟知并能運用自如,自然而然學會了推演未來。

二、C 端交互設計的 7 種常見模式

我們試著再舉個例子,加深下對模式的理解,順便學學交互設計。

什么是交互?

簡單來說,交互指的是在互聯網領域中,人、機之間的一系列互動過程。

我還提煉了 3 種常見模式(簡單反饋、數據操作、業務判斷),比較粗糙湊合也能用。

現在試著再系統總結下,我常用的 7 種 C 端交互模式,主要有:導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式。

學完就能用,趕緊卷起來~

有人就問了,還有更多交互模式嗎?

確實可以有,等我有時間再編幾個。。

話說回來,如果是一些特別復雜的業務規則,可能會涉及到 N 個交互模式的任意組合。

1. 導航模式

常見的導航模式有按鈕組合、標簽菜單、宮格布局、列表視圖等。

導航模式的主要作用是,告知用戶當前在網站的位置,以及接下來到哪些頁面,這有點像地圖 APP。

上面這張圖中,包含了幾種導航組件呢?

2. 搜索模式

搜索,是各大電商 APP 常見的交互模式。

搜索模式允許用戶輸入關鍵詞,然后系統返回搜索結果。

打個比方,這有點像在 Navicat 中寫了一段 SQL 查詢。

SELECT id, name, age
FROM users
WHERE age > 18

這段 SQL 的作用是,查詢大于 18 歲的用戶信息,包含序號、名稱、年齡。

3. 反饋模式

常見的反饋模式組件,涉及了對話框、吐司提示、氣泡提示等。

反饋模式用的比較多的場景是,告知用戶一些信息或提示,比如“輸入密碼錯了、展示訂單取消的注意事項”等。

4. 輸入模式

輸入模式主要用于新數據創建,例如淘寶下單時,你新增了一個收貨地址。

打開美團叫個外賣,整個訂單創建流程,也是輸入模式。

5. 編輯模式

有很多人可能會把輸入模式和編輯模式搞混。

區別它們的一個方法是,交互流程涉及新數據創建,還是改舊數據。

改數據的話,那就是編輯模式。

6. 分享模式

我們在看到一些干貨文章,或好用的小程序想要轉發給朋友,那就要用到分享模式。

分享模式可以很簡單,也可以往復雜了做,看產品階段去實現。

7. 引導模式

引導模式和反饋模式有點像,都是展示特定的內容。

那怎么分辨它們呢?

以設計師視角來看,反饋模式需要用戶觸發,系統被動顯示。

而要讓用戶特別關注的信息,那就是引導模式。

三、總結

模式,即抽象的規律。——好夕雷

說了這么多概念和例子,你是不是對模式的認知更清晰了呢?

模式運用在產品領域,就有了這 7 種交互模式,分別是“導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式”。

如果學會了模式,那么無論生活還是工作,相信你一定能輕松應對、事半功倍。

本文由 @好夕雷 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

動效設計中的節奏魔力

杰睿

關于動效節奏的問題,有什么好的方法可以提供?這算一個常見疑問,我總結收到的問題反饋,基本都是「動畫節奏應該怎么做呀」「做完的動效一卡一卡的感覺不流暢怎么整」,索性借著今天的契機,我整理了這樣一篇主題文章,分享我對于動效節奏的一點經驗與思考,僅代表個人觀點,歡迎交流探討~

在當今數字時代,動效設計已然成為了產品和服務中不可或缺的一部分。

無論是手機APP、網頁界面還是智能設備,動效設計或是引導用戶操作的微小提示,或是增強用戶體驗的交互反饋,又或是塑造品牌形象的視覺元素,它們都以其獨特的方式,為用戶帶來更加直觀、生動的互動體驗,因此流暢的觀感體驗很重要。

動效設計中的節奏魔力

提到流暢度,那動效節奏的重要性不言而喻。

動效節奏,簡單來說是動態呈現中各個元素動作的速度和時長安排,它決定了動效的快慢、強弱、起伏和變化,從而影響著用戶的感知和情緒。

一個優秀的動效設計,不僅要考慮單個元素的動效表現,更要考慮整個界面的動效節奏,使界面動效更加自然、流暢,也更加符合用戶的心理預期,從而提升用戶體驗。

動效設計中的節奏魔力

所以,想入門動效領域并深耕,我認為深入理解動效節奏是尤為重要的,學會如何運用動效節奏來提升用戶體驗,讓用戶在享受科技帶來便捷的同時,也能感受到藝術的魅力。

一、動效設計基礎認知

1. 動效設計在用戶體驗中的價值

動效可以增強界面的可理解性,例如下圖中廣告推送,有一個手機圖標的旋轉動態示例,

動效設計中的節奏魔力

以及多多視頻模塊中的上滑操作指引等,幫助用戶更好地理解界面功能和操作方式,從而更有效地去使用應用。

動效設計中的節奏魔力

動效可以提升界面的可用性,例如上傳文件的操作,通過提供及時的反饋和指引,降低用戶的學習成本和操作難度。

動效設計中的節奏魔力

動效還可以增加界面的吸引力,例如購物軟件中模擬實際鞋盒開箱的形式,展現鞋品,通過生動有趣的動效表現,提升用戶的使用欲望和滿意度。

動效設計中的節奏魔力

2. 簡述動效設計的基本原理與最佳實踐

提到動效設計,了解其背后的基本概念和原則,才是賦予動效靈魂和意義的關鍵。

這里要提到三個關鍵詞:

1)首先是時間

時間在動效設計中扮演著至關重要的角色。它決定了動畫的快慢、停頓和節奏,從而影響用戶的情感體驗。

動效設計中的節奏魔力

例如,一個緩慢漸入的動畫可能傳達出優雅、穩重的感覺;

動效設計中的節奏魔力

而一個迅速閃現的動畫則可能帶來刺激、緊張的感受。

2)其次是空間

空間是指動畫發生和存在的虛擬環境。在動效設計中,空間的布局、層次和透視關系都至關重要。

它們不僅影響動畫的可視性和可讀性,還影響用戶的認知和行為。

動效設計中的節奏魔力

例如,合理的空間布局可以使用戶更容易理解和操作界面元素,而不合理的布局則可能導致用戶的困惑和誤操作。

3)最后是構圖

構圖是指動畫元素的排列組合和視覺平衡。

一個良好的構圖可以突出重點、引導視線,并營造出和諧、統一的視覺效果。

相反,一個糟糕的構圖可能會分散用戶的注意力,甚至引發視覺疲勞。

動效設計的目標不僅僅是實現技術上的可能性,更是為了創造出讓用戶愉悅、滿意且易于使用的體驗,在美感和技術要求之間尋找平衡點,是我認為需要不斷練習,積累總結經驗的。

二、關鍵要素:動效節奏

在動效設計中,能讓靜態元素動起來形成生動流暢的動態效果,需要用到兩大元素:關鍵幀與動效節奏。

1. 關鍵幀

關鍵幀代表了在特定時間點上某個參數的值。在動效制作過程中,通過設置關鍵幀,可以控制對象在不同時間點的狀態,從而形成連續的動作。

動效設計中的節奏魔力

關鍵幀就像是動效世界里的路標,它標記了在動效呈現中某些重要時刻物體的樣子。比如說,我想讓一個球跳起來,那我就得告訴電腦,在開始的時候球在地上,然后在某個瞬間球在空中最高點,最后又回到地面;這些重要的時刻就是關鍵幀。

關鍵幀之間的變化可以是線性的,也可以是曲線的,后者可以創造出更為自然和復雜的動態效果。

2. 常見的四種動效節奏形式

線性或曲線變化,統稱動效節奏,是指在一定時間內,通過一系列有規律的動效元素的組合和排列所產生的節奏感。

常見的四種動效節奏形式有 勻速、緩入、緩出、緩動。

動效設計中的節奏魔力

1)勻速(Linear)

勻速運動指的是物體在動畫過程中速度保持不變的運動方式。這種節奏簡單直接,沒有加速或減速的過程。

動效設計中的節奏魔力

上面的小球彈跳呈現的效果,就是勻速運動,有些機械,缺乏實際場景中的動感。

在AE中,默認的菱形關鍵幀之間就是勻速運動,例如生活中常見的時鐘,上圖中鐘表秒針旋轉是平穩、機械的,這就是一個典型的勻速運動。

2)緩入(Ease In)

緩入是指物體在動畫開始時速度較慢,隨著時間的推移逐漸加速到最大速度的運動方式。

動效設計中的節奏魔力

一般元素離開畫面或者物體加速階段使用,例如上圖中摩托車駛出畫面的部分、進度條加載緩慢到快速的節奏等,它可以增加動畫的真實感和生動性。

在AE中,以圓球為例,從空中下落的過程,就可以使用緩入的加速曲線;

動效設計中的節奏魔力

調出圖表編輯器,調節曲線弧度如圖「速度圖表」所示,使曲線開始時平緩,越靠近出點速度逐漸上升,完成加速運動,此時結尾有些生硬。

加一個小知識點:曲線調節有兩種形式,一種為速度圖表,一種為值圖表;

速度圖表顧名思義,看曲線的弧度,圖中球的開始入點曲線弧度較緩,結尾出點曲線斜度較大,則代表加速度節奏變化;

值圖表分別代表X,Y軸曲線變化,如圖中球的Y軸位置發生變化,因此對應綠色線條的曲度變化是球體的動效節奏變化,下落過程中加速,則區別于前半段的直線,入點平滑,出點更陡峭。

3)緩出(Ease Out)

動效設計中的節奏魔力

緩出與緩入相反,是指物體在動畫結束時速度逐漸減慢直至停止的運動方式,如元素入畫、人物行走至停下等,它能給人一種平滑和自然的結束感,是先快后慢的減速運動。

動效設計中的節奏魔力

同樣以圓球為例,球落地后反彈的過程,就可以使用緩出的減速曲線;
調出圖表編輯器,調節曲線弧度如圖「速度圖表」所示,使曲線結束時平緩,調節出點的手柄桿,完成減速運動。

4)緩動(Ease In Ease Out)

緩動是最接近真實世界物體運動規律的一種方式,適用于大多數動態場景,尤其是那些需要表現自然、流暢動作的畫面呈現。

緩動曲線結合了緩入和緩出的特點,物體在動畫開始時速度緩慢上升,中間達到最高速度,最后在結束時速度逐漸降低。

動效設計中的節奏魔力

示例繼續完善小球的曲線節奏,我想讓它看起來更順滑、更有彈跳感覺,通過球的大小比例(縮放)的變化,增加模糊變化的細節,這樣球跳起來的動作就會像真實世界里那樣,既有起跳的沖勁,又有落地的緩沖,整個過程更加生動有趣。

動效設計中的節奏魔力

在AE中,緩動曲線沒有具體的數值,多數時候需要結合不同場景表達,去嘗試不同的曲度形式,通過反復預覽檢驗,找到自己滿意、適合畫面感呈現的形式。

3. 刻意練習-節奏感積累

日常積累動效節奏,我會分析電影或MG動畫中的經典鏡頭,比如角色走路、跑步的動作呈現,元素的出入場變化,以及自然界中的運動現象,如樹葉飄落等。

動效設計中的節奏魔力

多做分鏡腳本的拆分練習,多臨摹實踐,就可以逐漸掌握常見的運動規律,自己在做設計內容時,也可以更清晰知道怎樣的節奏更適合當下場景呈現。

三、結論

總的來說,創造流暢體驗對于動效設計來說還是很重要的,而要實現這一目標,掌握并靈活運用好動效節奏則是必不可少的手段之一。

萬變不離其宗,多看、多思考、多練習,通過實踐去總結復盤規律、梳理SOP流程,整理出一套適合自己記憶、使用的方法論與行動標準,提高自己對動態的感知,以及節奏力的把控,也能有效提升工作效率。

「想不如做,知行合一」,想讓學到的知識和技巧,生長到自身,唯一要做的就是立馬行動!在做的過程中解決一個個卡點,迭代出更適合自己的方法。

作者:Shirley_雪

本文由 @Shirley_雪 原創發布于人人都是產品經理。未經作者許可,禁止轉載

題圖來自 Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

B端“簡單設計”-化繁為簡,重塑用戶體驗

杰睿

在當今這個信息爆炸、競爭激烈的市場環境中,用戶體驗已成為企業核心競爭力的關鍵因素。在這一背景下,我們啟動了一項名為“簡單設計”的專項優化項目,旨在通過化繁為簡,重塑用戶體驗,提升B端產品的用戶滿意度和忠誠度。

在當今信息爆炸、競爭白熱化的市場大環境下,企業核心競爭力的內涵已悄然變遷,不再單純聚焦于產品或服務本身,而是將重心逐漸傾向于用戶體驗這一關鍵維度。

于招聘領域而言,B 端產品作為銜接招聘方與求職者的關鍵紐帶,其設計的合理性、操作的便捷性以及語義的明晰度,猶如三把密鑰,直接決定著用戶滿意度與忠誠度的高低。

今年,58招聘B端開啟了“簡單設計”專項優化的征程,作為項目主導設計師,我全程深度參與了從調研、剖析、設計至實施的各個環節,在這一過程中,深刻領悟到設計對于提升用戶體驗的非凡意義。

01 深入業務前言,洞見用戶痛點,錨定設計方向

項目伊始,我們即對58招聘B端產品的現有用戶展開了全面且深入的調研行動。

我們深知,唯有精準洞悉用戶需求與痛點,方能打造出契合用戶期望的產品。

為此,設計團隊全員深入一線,置身于用戶的實際使用環境,與各行業用戶進行深度的面對面溝通。同時,我們運用多種調研方法,包括問卷調查、用戶訪談、數據分析等,多維度、全方位地搜集用戶信息。

在調研過程中,一系列影響用戶體驗的關鍵問題浮出水面。

其中,操作繁瑣成為用戶反饋最為突出的問題。眾多用戶抱怨,在使用B端產品時,完成諸如客戶認證、發布職位、篩選簡歷等簡單任務,往往需歷經多個復雜步驟。

這種繁復的操作流程,不僅耗費大量時間與精力,更易引發用戶的挫敗感和不滿情緒,宛如一道無形的屏障,拉遠了用戶與平臺的距離。

此外,語義晦澀難懂也是普遍存在的問題。

B端產品中的專業術語和復雜表述,對于非專業用戶而言,仿若天書,極大地增加了學習成本,甚至可能導致誤解和誤操作,嚴重損害了用戶體驗。

這些問題的根源,經深入分析,與傳統產品設計理念的局限、對用戶體驗的忽視以及用戶研究與溝通的不足密切相關。

基于此,我們決定從這三個層面入手,重塑設計思路,以提升用戶體驗。

02 解構問題根源,重構設計理念之維

在扎實調研的基礎上,我們對問題進行了抽絲剝繭般的分析。

我們深刻意識到,若要從根本上解決用戶問題,必須對設計理念進行大刀闊斧的革新。

首先,我們毅然摒棄傳統的以產品為核心的設計理念,轉而擁抱以用戶為中心的設計哲學。用戶作為產品的最終使用者,他們的需求和體驗是產品設計的靈魂所在。因此,我們將用戶需求與體驗置于首位,重新審視產品的功能布局、操作流程以及語義表達等各個維度。

其次,我們將用戶體驗的重視程度提升至前所未有的高度。用戶體驗,作為產品競爭力的核心要素,貫穿于設計的全過程。我們通過簡化操作流程、優化界面布局、明晰語義表述等手段,致力于提升用戶的操作效率和滿意度,打造流暢、高效的用戶交互體驗。

最后,我們強化了用戶研究與溝通機制。深知只有深入了解用戶需求與痛點,才能設計出符合用戶期望的產品。因此,在與用戶的每一次接觸中,我們都用心收集他們的意見和建議,為產品設計與優化注入源源不斷的智慧源泉。

03 以用戶為中心,雕琢極致體驗之境

基于對問題的深度剖析,我們開啟了具體的設計工作。

設計,作為解決問題的關鍵環節,需要我們充分施展設計師的專業素養與創新能力,以用戶為中心,對招聘B端產品進行全方位的重塑。

在操作流程優化方面,我們對現有流程進行了細致梳理和深度優化,大刀闊斧地去除了冗余步驟和環節,使操作流程如行云流水般簡潔明了。

例如,在發布職位這一關鍵功能上,我們簡化了信息填寫步驟,并貼心地提供模板和自動填充功能,極大地降低了用戶操作難度和時間成本,讓用戶在操作過程中感受到前所未有的便捷。

在語義表述清晰化上,我們對界面上的專業術語和復雜表述進行了精心簡化和優化,使其通俗易懂且易于記憶。同時,對重點文案和標題進行突出處理,便于用戶快速抓取關鍵信息,清晰知曉每一步操作的目的,輔助用戶迅速決策,從而進一步提升用戶體驗。

在界面布局精簡方面,我們對界面進行了精心雕琢,去除了繁雜的信息和多余的按鈕。通過合理的布局與色彩搭配,提高了界面的可讀性和美觀度,營造出簡潔大氣的視覺體驗。此外,增加搜索和篩選功能,使用戶能夠快速定位所需信息,進一步提升操作效率和滿意度。

在整個設計過程中,我們充分發揮設計師的專業能力和創新精神,運用多種先進的設計方法和工具,如用戶畫像、設計原型、用戶體驗測試等,確保設計方案的科學性和有效性。同時,與產品經理、開發人員等團隊成員緊密協作,形成強大的合力,共同推動項目順利前行。

04 持續優化迭代,升華用戶體驗之峰

設計完成后,項目進入實施階段。

我們深知,實施是設計落地生根的關鍵一步,需要團隊充分發揮協作精神和強大執行力,確保項目順利推進。

在實施過程中,我們采用敏捷開發方法,通過持續迭代和優化,不斷提升產品的功能和性能。定期收集和分析用戶反饋意見,及時對產品進行調整和改進。同時,加強與用戶的溝通,通過多樣化的用戶調研方式,積極捕捉用戶的每一個意見和建議,為產品的持續優化提供堅實支撐。

經過不懈努力,“簡單設計”專項已取得顯著成效。用戶操作效率和滿意度大幅攀升,產品留存率和口碑亦顯著改善。然而,我們明白,設計優化是一場永無止境的修行。隨著用戶需求的持續演變和技術的不斷革新,我們需持續探索與創新,以維持產品的競爭力和生命力。

展望未來,我們將堅定不移地秉持以用戶為中心的設計理念,持續優化產品功能和性能。同時,進一步加強用戶研究與溝通,通過持續收集和分析用戶信息與意見,不斷改進和優化產品設計。我們堅信,在全體設計師的共同努力下,58招聘B端產品將為用戶帶來更便捷、高效、愉悅的使用體驗,成為招聘領域的璀璨之星。

總之,“簡單設計”專項不僅是產品設計層面的優化與提升,更是對用戶需求深度洞察與積極回應的生動實踐。未來,我們將繼續堅守這一理念,為用戶創造更多價值與驚喜,同時不斷提升自身設計能力與創新力,為產品的持續優化與創新注入源源不斷的動力。

 

設計團隊:老李頭、王丹、溫正遠、崔秉鑒、趙德馨、陳浩然、劉靜頤、劉春明

本文由人人都是產品經理作者【58UXD】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

日歷

鏈接

個人資料

藍藍設計的小編 http://www.gerard.com.cn

存檔

主站蜘蛛池模板: 国产精品人人爽人人做av片 | 国产高清一区二区三区 | 亚欧在线免费观看 | 亚洲一区 视频 | 国产婷婷色一区二区三区四区 | 国产精品亚洲综合一区二区三区 | 野狼第一精品社区 | 午夜在线国语中文字幕视频 | 国产一区二区在线视频 | 久久久无码精品亚洲日韩按摩 | 国产精品对白刺激在线观看 | 精品动漫3d一区二区三区免费版 | 久草手机在线播放 | 操大逼免费视频 | 亚洲啪啪aⅴ一区二区三区9色 | 免费成人在线网 | 免费av播放 | 佐佐木希av一区二区三区 | 国产ts人妖一区二区 | 永久免费看mv网站入口亚洲 | 日韩人妻一区二区三区蜜桃视频 | 香蕉久久影院 | 精品一区二区在线观看视频 | 中文字幕亚洲精品在线 | 午夜精品久久久久久99热 | 欧美在线观看a | 免费人成又黄又爽又色 | 日本aaaa级毛片在线看 | av网站免费在线看 | 蜜桃视频在线观看污 | 久久久久久黄 | 欧美成人日韩 | 色噜噜综合网 | 国产成人精品女人久久久 | 亚洲18在线看污www麻豆 | 91亚洲精品一区二区 | 日韩成人高清在线 | 国产欧美日韩三级 | 国产一区二区四区 | 亚洲精品国产拍在线 | 秋霞一级全黄大片 | 国产精品视频偷伦精品视频 | 亚洲成熟毛多妇女av毛片 | 日韩美女中文字幕 | 小蝌蚪九色91探花 | 国产乱码精品一区二区三 | 久久精品无码一区二区小草 | 亚瑟av亚洲精品一区二区 | 亚洲一区在线免费观看 | 三级免费黄| 成年视频免费高清在线看 | 亚洲最新av网站 | 六月丁香av | 91精品国产91久久久久久黑人 | 成人一级黄色 | 亚洲精品午夜一区人人爽 | 欧美乱码精品一区二区三区 | 欧美激情在线一区二区三区 | 黄色a免费看 | 欧美a免费 | 玖玖热麻豆国产精品图片 | 亚洲精久久| 999久久久国产精品 999久久久精品 | 午夜视频成人 | 久久久久人人 | 亚洲精品一区二区三区99 | 日本性xxxxx 日本性高潮视频 | 综合在线播放 | 风间由美一区二区av101 | 日韩成人一区 | 亚洲18禁私人影院 | 99久久久无码国产精品 | 久久久久久久极品内射 | 日韩欧美激情片 | 亚洲色图视频在线 | eeuss鲁片一区二区三区在线观看 | 欧美精品一区二区在线播放 | 成人不卡 | 国产一区欧美一区 | 懂色av中文字幕一区二区三区 | 久久激情久久 | 全部免费毛片在线播放一个 | 性xxxx| 看片国产 | 亚洲国产欧美日韩精品一区二区三区 | 黑人蹂躏少妇在线播放 | 中文字幕在线免费观看视频 | 日韩精品无码一区二区中文字幕 | 国产女同疯狂作爱系列11 | 久久国产精品免费一区二区三区 | 真实的国产乱xxxx在线91 | 天天躁夜夜躁很很躁麻豆 | 97国产成人 | 中文字幕人成人乱码亚洲电影 | 高清av一区二区三区 | 亚洲字幕在线观看 | 午夜色图 | 中文字幕在线观看第一页 | 91啦丨九色丨国产人 | 在线免费观看黄色av | 国产精品免费麻豆入口 | 亚洲石原莉奈一区二区在线观看 | 以色列最猛性xxxxx视频 | 天天综合视频 | 18涩涩午夜精品www | 日日干夜夜艹 | 国产极品视觉盛宴 | 啪啪在线视频 | 久久免费视屏 | 精品乱人码一区二区二区 | 日本人熟老妇 | 噜噜噜噜狠狠狠7777视频 | 四虎视频国产精品免费入口 | 激性欧美激情在线 | 国产黄色大片免费看 | 国产性受xxxx黑人xyx性爽 | 青青在线视频观看 | 丁香婷婷六月天 | 狠狠综合亚洲综合亚洲色 | 饥渴放荡受np公车奶牛 | 色麻豆国产原创av色哟哟 | 网站av | 色网在线免费观看 | 亚洲 另类 春色 国产 | 色哟哟哟www精品视频观看软件 | 人妻被按摩师玩弄到潮喷 | 91丨国产丨香蕉|入口 | 亚洲日韩av无码 | 美女黄色av | 全部毛片永久免费看 | 丰满少妇人妻hd高清大乳在线 | 国产蜜臀97一区二区三区 | 婷婷成人av | 夜av| 久久久久久久国产精品毛片 | 爱豆国产剧免费观看大全剧集 | 国产亚洲视频一区 | 日韩亚洲欧美中文高清 | 国产精品太长太粗太大视频 | 中文字幕日韩视频 | 人人添人人澡人人澡人人人人 | 国产色秀视频在线播放 | 乳孔很大能进去的av番号 | 四虎永久在线精品免费网址 | 我们的2018在线观看免费高清 | 精品少妇一区二区三区免费观 | 长篇h版少妇沉沦交换 | av在线日韩| 人妻被按摩到潮喷中文字幕 | 樱花影院电视剧免费 | 四虎最新站名点击进入 | 超碰97成人 | 免费国产成人高清在线观看网站 | 韩国无码av片在线观看网站 | 日韩欧美国产成人 | 日韩操比 | 级毛片 | 久久影音先锋 | 人妻中出无码一区二区三区 | 欧美女人性生活视频 | 亚洲欧美日韩精品 | 真人毛片一24 | 国产乱人乱精一区二视频国产精品 | 极品气质女神呻吟娇喘91 | 99热这里只有精品99 | 欧美大荫蒂xxx | 中文字幕精品亚洲无线码一区应用 | 青青草原综合网 | 国产视频一区二区 | 每日更新av | 夜夜操夜夜操 | 欧美精品一卡二卡 | 国产区免费 | 伊人网一区二区 | 在线不卡国产 | 亚洲免费在线播放 | 免费无码鲁丝片一区二区 | 久久久久人妻一区二区三区 | 欧美亚洲在线 | 无码人妻精品一区二区三区在线 | 亚瑟av亚洲精品一区二区 | 精品精品 | 东京一木一道一二三区 | 欧美日韩一区二区在线播放 | 久久激情五月丁香伊人 | 性久久久久久久久久久久 | 91久久国产露脸精品国产闺蜜 | 成人性生交大片免费看r老牛网站 | 亚洲精品一区二区三区蜜桃 | 久久这里只有精品视频9 | 情五月 | 亚洲理论在线观看 | 男人资源网站 | 国产在线精品一区二区夜色 | 天天艹av | 国产乱人伦偷精精品视频 | 天堂va在线 | 国产精品视频在线观看 | 伊人影院视频 | 99精产国品一二三产品香蕉 | 激情六月丁香 | 免费麻豆国产一区二区三区四区 | 国产做爰xxxⅹ高潮69 | 国语对白91 | 国模私拍av | 日韩精品中文字幕一区 | 中文字幕av无码不卡 | 午夜伦伦 | 范冰冰一级做a爰片久久毛片 | 东北老女人高潮久久91 | 爱爱视频网站免费 | 免费在线黄网 | 91精品国产综合久久久蜜臀图片 | 小早川怜子一区二区的导演 | av影片在线观看 | 欧美精品欧美精品系列 | 无码熟妇人妻av | 91黄视频在线观看 | 综合人妻久久一区二区精品 | 国产成人福利 | 黄色免费大片 | 青草视频污 | 4438激情网 | 亚洲黄色在线免费观看 | 亚洲一区二区三区自拍公司 | 久久久久久久久淑女av国产精品 | 在线成人精品国产区免费 | 97婷婷大伊香蕉精品视频 | 污污的网站在线观看 | 欧美日韩免费一区二区 | 动漫av在线免费观看 | 日本不卡网 | 成人开心网 | 自拍偷拍专区 | 亚洲图片欧美日韩 | 久久久www免费人成黑人精品 | 国产精品丝袜一区二区 | 日本免费观看视频 | 欧美美女一区二区 | 亚洲人成网亚洲欧洲无码 | 999久久久国产 | 日日躁你夜夜躁你av蜜 | 欧美一性一乱一交一视频 | 美女一区二区三区视频 | 国产极品jizzhd欧美 | 欧美日韩福利视频 | 猫咪www免费人成网站 | 亚洲理论片 | 六个黑人玩一个中国少妇视频 | 九九视频网站 | 91欧美在线| 国产中文一区二区 | 老司机一区二区三区 | 美女销魂一区二区 | 久久免费视频在线观看 | 久久精品久久综合 | 国产又粗又猛又黄视频 | 亚洲88av| 91久久久久久亚洲精品禁果 | 果冻传媒18禁免费视频 | 女人扒开屁股爽桶30分钟 | 狠狠色噜噜狠狠狠四色米奇 | 男人天堂亚洲天堂 | 日本电车痴汉 | 青青在线精品 | 精品久久久久久久久久久国产字幕 | 少妇午夜啪爽嗷嗷叫视频 | 日本亚洲一区二区 | 午夜寂寞少妇aaa片毛片 | 精品三级在线 | 欧美内射深喉中文字幕 | 日韩av网址大全 | 熟妇人妻系列av无码一区二区 | 一 级 黄 色蝶 片 | 小12箩利洗澡无码视频网站 | 奇米影视第4色 | 性高爱久久久久久久久 | 欧美日韩 一区二区三区 | 成人一卡二卡 | 免费视频福利 | 一区二区国产精品精华液 | 一及黄色大片 | www夜插内射视频网站 | 55夜色66夜色国产精品视频 | 亚洲国产精品特色大片观看完整版 | 成人天堂视频在线观看软件 | 亚洲欧洲无码av不卡在线 | 午夜激情黄色 | 性色av网址| 东京一木一道一二三区 | 内射囯产旡码丰满少妇 | 日本久久99| 午夜福利国产成人无码gif动图 | 久久综合伊人77777麻豆 | 免费日韩中文字幕 | 日产91精品卡2卡三卡四 | 亚洲综合无码一区二区三区不卡 | 亚洲欧美日韩一区二区三区在线 | 天天操夜夜拍 | 久久精品人妻少妇一区二区三区 | av网址免费观看 | 最新中文无码字字幕在线 | 欧美色乱| 2018亚洲男人天堂 | 国产无吗一区二区三区在线欢 | 天天久久综合 | 暖暖视频日本在线观看免费hd | 亚洲人午夜射精精品日韩 | 色资源av中文无码先锋 | 欧美片免费网站 | 麻豆av影视| 国产成人精品久久 | 欧美熟妇毛茸茸 | 天天综合精品 | 一级黄色大片免费观看 | 这里只有精品在线观看 | 亚洲成人精选 | 亚洲欧美乱日韩乱国产 | 色播在线| 久久性色 | 国产区一区二区 | 久久婷婷久久一区二区三区 | 老局长的粗大高h | 富婆xxxxx性猛交hd | 99精品久久久久 | 亚洲宅男天堂 | 黄色小视频在线看 | 欧美11p | 国产农村老太xxxxhdxx | 国产女主播在线观看 | 国产精无久久久久久久免费 | 日韩视频三区 | 国产精品丝袜黑色高跟鞋 | 免费看一区二区三区四区 | 成人欧美一区二区三区在线 | h片免费网站 | 欧美黑人精品一区二区不卡 | 国产欧美亚洲精品a | 日本人六九视频 | 亚洲天堂网在线播放 | 久久99视频精品 | 一 级 黄 色蝶 片 | 久久四色| 午夜免费av啪啪噜噜 | 国产激情视频在线播放 | 成人激情视频在线观看 | 99re在线播放 | 激情综合色五月丁香六月亚洲 | 日韩内射美女人妻一区二区三区 | 天海翼一区二区 | 91丨九色丨国产丨porny | 亚洲无毛 | 男女爽爽爽视频 | 久久久网 | 国产精品丝袜久久久久久消防器材 | 亚洲不卡影院 | 99九九99九九九视频精品 | 国产a做爰全过程片 | 日本视频www色 | 成人做爰视频www网站小优视频 | 毛片小视频 | 波多野结衣 黑人 | 日韩免费在线 | 成年入口无限观看免费完整大片 | 久久爽久久爽久久免费观看 | www.亚洲色图.com| 99爱在线视频 | 中文字幕天天躁日日躁狠狠躁免费 | 少妇午夜三级伦理影院播放器 | 6080私人午夜性爽快影院 | 97在线国产 | 男女猛烈激情xx00免费视频 | 亚洲人成伊人成综合网久久久 | 国产精品一级在线 | 欧美大屁股熟妇bbbbbb | 日本黄页视频 | av女星全部名单 | 四虎精品 | 26uuu欧美日本 | 国产人妻精品久久久久野外 | 国产精品久久久久永久免费 | 欧美一级一级一级 | 中文字幕第二区 | 久久疯狂做爰流白浆xxxⅹ | 欧美婷婷六月丁香综合色 | av在线成人 | 人人做人人澡人人爽欧美 | 伊人色婷婷| 国产亚洲精品aaaa片app | 你懂的91| 99久久综合狠狠综合久久止 | 亚洲精品久久久久久宅男 | 欧美人妻一区二区三区 | 欧美大片在线看免费观看 | 日本www免费 | 国产亚洲成av人片在线观看下载 | 91porn国产成人 | 自拍偷拍国产精品 | 在线小视频| 国产精品v欧美精品∨日韩 女邻居的大乳中文字幕 | 日产精致一致六区麻豆 | 免费看美女被靠到爽的视频 | 3344永久在线观看视频免费 | 欧美午夜一区二区福利视频 | 成人a级做爰生活片 | 日本黄大片在线观看 | 色5月婷婷 | 亚洲a∨无码男人的天堂 | 午夜精品久久久久久 | 中国美女囗交视频免费看 | 亚洲一区日韩在线 | 夜色伊人 | 快播av在线 | 日韩精品内射视频免费观看 | 一区二区三区精 | 91欧美视频| 久久久久久久久久久一区二区 | 国产乱人激情h在线观看 | 欧洲精品视频在线观看 | 中文字幕精品一区 | 欧美一级在线观看视频 | 最新亚洲春色av无码专区 | 亚洲男同志网站 | 成年人一级片 | 日噜噜夜噜噜 | 亚洲伦理天堂 | 国产性生活视频 | 国产激情图片 | 国产又色又刺激高潮视频 | 日韩精品一区二区三区 | 天天躁夜夜踩很很踩2022 | 亚洲人成人网站色www | 天天躁日日躁狠狠躁 | 国产麻豆免费观看 | 国产中文字幕网 | 亚洲а∨天堂久久精品喷水 | 欧美成人影院亚洲综合图 | 国产欧美日韩精品一区 | 免费一区二区视频 | 亚洲www永久成人夜色 | 一本色道久久综合亚洲精品不卡 | 一级做a爱高潮免费视频 | 99久久成人 | 久久精品视频在线看15 | 特级a做爰全过程片 | 国产精品12p| 波多在线播放 | 日韩69永久免费视频 | 亚洲免费久久 | 成年人激情网站 | 天天艹天天射 | 少妇二级淫片免费放 | 7777精品久久久久久 | 在线观看黄网 | missav|免费高清av在线看 | 曰本在线 | 91在线精品李宗瑞 | a级毛片蜜桃成熟时2在线播放 | 亚洲精品动漫成人3d无尽在线 | 亚洲国产精品一区二区成人片国内 | 九一精品在线 | 精品国产乱码久久久软件使用方法 | 成人欧美视频在线观看 | 芭乐视频色 | 狠狠插综合| 暖暖日本在线观看免费 | 少妇被粗大的猛烈进出免费视频 | 撕开奶罩揉吮奶头高潮av | 久久久久人妻一区精品 | 久久97精品久久久久久久不卡 | 噜噜噜噜狠狠狠7777视频 | 无码伊人久久大杳蕉中文无码 | 成人在线免费观看网站 | 欧色图 | 精品国产精品久久一区免费式 | 国产精品无码无卡在线播放 | 日韩国产精品一区二区 | 麻豆精品视频 | 91视频a| 久久在线观看 | 在线精品国产一区二区三区 | 精品久久久久久无码中文字幕一区 | 久久黄色片视频 | 青青视频网 | 丰满少妇人妻无码 | 免费看中国毛片 | 麻豆av一区二区三区久久 | 日韩中文字幕免费看 | 国产在线精品免费 | 黄色成人免费网站 | 亚洲mv高清砖码区2022伊甸园 | 色偷偷亚洲 | 开心色99| 亚洲精品一区二区三区中文字幕 | 久久五月激情 | 青青超碰 | 亚洲男人天堂2017 | 欧美成人精品三级网站 | 久久精品视频免费 | 91精产国品一二三区在线观看 | 狠狠躁日日躁夜夜躁 | 香蕉视频国产 | 国产精品9999久久久久 | 性做久久久久久免费观看欧美 | 中国肥胖女人真人毛片 | 一区二区欧美精品 | 国产黄色免费片 | 午夜| 欧美成人免费高清视频 | 国产女同疯狂作爱系列2 | 欧美日韩国产精品成人 | 国产网站黄色 | 日韩超碰 | 欧美美女性视频 | 久久精品国产99久久久古代 | 91成人免费网站 | 国产一区二区三区在线电影 | 亚洲乱淫 | 91久久久色在线观看 | 成人免费视频国产免费网站 | 久操亚洲| 绿帽在线| 亚洲激情图片区 | 久久久久久久久久99精品 | 黄色片xxxx| 天天操天天干天天舔 | 国色天香网www在线观看 | 午夜视频在线网站 | 国内色视频 | 久草视频这里只有精品 | 色噜噜狠狠色综合欧洲 | 国产交换配乱淫视频α | 欧美精品久久久久久久久久白贞 | 凹凸成人精品亚洲精品密奴 | 伊人色在线视频 | 中日黄色片 | 新x8x8拨牐拨牐永久免费影库 | 亚洲精品色在线网站 | 黑人一级女人全片 | 国产网红主播精品av | 一区二区高清视频 | 国模和精品嫩模私拍视频 | 天天躁日日躁狠狠躁一区 | 亚洲乱码日产精品bd在线观看 | 成人第四色 | 国产在线视频自拍 | a v视频在线观看 | 老熟女乱子伦 | 嫩草福利视频精品一区二区三区 | av专区在线 | 国产日韩欧美一区二区久久精品 | 国内精品久久久人妻中文字幕 | 美女诱惑av| 精品久久久无码人妻字幂 | 九九最新视频完整 | 99久久国产综合精品麻豆 | 国产成a人亚洲精品无码久久网 | 国内精品视频在线观看 | 天天干夜夜艹 | 久久99久久99| 国产青草视频在线观看 | 亚洲日本在线电影 | 欧美日韩一区二区三区视频播放 | 国产精品久久久久久久久久久久人四虎 | 影音先锋中文字幕资源 | 黄色免费小视频 | av资源网在线观看 | 九九婷婷 | 欧美一级黄色片在线观看 | 亚洲精品久久一区二区三区 | 国产做爰免费观看 | 久久人妻无码中文字幕 | 亚洲一二三区不卡 | 日韩成人在线网站 | 国产精品一区二区在线免费观看 | 免费一区二区无码东京热 | 亚洲一区二区 | 久久夜色精品国产噜噜av | 欧美成人免费一级 | 中文字幕乱码亚洲无线码按摩 | 五月激情婷婷在线 | 老湿福利影院 | 有码中文字幕在线观看 | 婷婷射精av这里只有精品 | 手机在线观看av | 久久久久久久久久久影院 | 亚洲88| 在线1区| 欧亚一区二区三区 | 一本久道综合色婷婷五月 | 黄色大片免费观看视频 | 狠狠操伊人 | 沈樵精品国产成av片 | 国产一级一级一级 | 亚洲成a人片777777张柏芝 | 香蕉中文网 | 精品国产二区三区 | 久久国产精品广西柳州门 | 88久久精品无码一区二区毛片 | 在线观看av的网站 | 国产男女做爰猛烈床吻戏网站 | 国产黄网永久免费视频大全 | 麻豆aⅴ精品无码一区二区 午夜福制92视频 | 久久久亚洲精品一区二区三区浴池 | 亚洲精品久久久久久蜜桃 | 日韩国产成人在线 | 亚洲一区二区在线播放 | 久久高清| 日韩人妻无码免费视频一区二区三区 | 岛国av免费 | 性――交――性――乱 | 国产av无码久久精品 | 国产1区在线 | 国产一区在线免费观看 | 亚洲精品久久久久avwww潮水 |