欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

首頁

淺談移動端UI設計適配

杰睿

互聯網時代,我們所看到的屏幕有許多的尺寸,如果設計師為每個尺寸都單獨進行設計,那將是一個大工程。那如果減少設計的工作量呢?讓我們來跟著作者學習一下移動端UI設計的適配吧~

在互聯網時代,產品形態是多種多樣的,就手機行業而言,設計師需要面對的屏幕尺寸至少也有一兩百種,我們不可能為每一種屏幕尺寸單獨進行,巨大的工作量是我們無法承受的。

需要一些方法或者說是手段,幫助我們縮減巨大的工作量,這些方法手段的集合就是——UI設計適配。UI設計適配幫助設計師只需要維護幾種尺寸的設計稿,就可以兼容市面上絕大多數的屏幕尺寸,達到不同屏幕尺寸下,視覺效果接近一致的目的。

本篇文章我們主要關注移動端應用的UI設計適配,將從以下幾點來介紹:

  1. UI設計適配是什么
  2. 為什么需要UI設計適配
  3. UI設計適配的一些基礎概念
  4. 如何進行UI設計適配

那么下面,我們進入正式內容。

一、UI設計適配是什么?

UI設計適配是指將同一款應用或網頁的用戶界面針對不同的設備、分辨率、屏幕尺寸、操作系統等因素進行調整,以確保用戶界面的一致性和可用性。

這段定義包含了一些專業名詞,還是讓人有點難理解,如果我們隱藏那些專業名詞,用圖形化的方式去解釋這個定義,如圖1.1,左邊是一個16:9屏幕尺寸的設計稿,我們需要將它轉變為一個1:1屏幕尺寸的設計稿。你要如何處理?

《UX入門》第十六講:淺談移動端UI設計適配

在開始設計前,就需要考慮可能存在屏幕尺寸和比例差異較大情況,就如同圖1.1,應當如何適配;設計中,就會考慮得更細致,頂部輪播Banner是固定的寬度,還是根據不同的屏幕尺寸寬度自適應寬度,圖1.1是選擇了固定寬度;而在設計之后,有可能開發時會發現,如果只有兩個Banner圖,沒法像設計稿中展示3個Banner圖,這時又需要你思考要如何處理。

以上,我們談到這三個場景中你思考和處理問題的過程,就是在進行UI設計適配。

由此看出,適配是UI設計中的過程,卻不是一個具體的環節,不像是標注切圖是固定的流程。它融入在整個UI設計的過程中。在設計前,設計中,設計后都可能會考慮UI設計適配問題。

二、為什么需要UI設計適配?

為了用戶體驗的一致性。

這里的「一致性」主要關注的是視覺表現層是否一致。如圖1.2,是「vivo瀏覽器」在「vivoX Fold 2」機型上,內屏與外屏的首頁截圖。整個頁面在布局結構,控件類型和元素尺寸以及間距都是基本一致的。

《UX入門》第十六講:淺談移動端UI設計適配

用戶體驗中,視覺表現層的一致性是基礎中的基礎。保證了「一致性」,就會有效地降低用戶的使用成本,即使用戶更換了不同的設備,也不會有使用的困難。UI設計適配則是達成這一目標的重要方法之一。

不過,也請大家注意,這里說的「有幾乎相同的用戶體驗」是限定在屏幕尺寸接近的電子設備上。比如說,我們不能要求一個屏幕尺寸7英寸的手機應用和一臺27英寸的PC電腦客戶端,視覺表現層基本一致,即便他們的是同一個應用,也會因為交互方式和操作系統的不同而天差地別。

三、UI設計適配的一些基礎概念

用戶界面不是物理實體,需要一些物理實體去承載它。

本小節我們將重點解釋一些你需要知道與適配息息相關的概念。總的來說,對于適配我們需要著重理解三個參數——邏輯(像素)分辨率,物理(像素)分辨率和倍率,以及他們之間的相互關系。

了解這些概念,是為了幫助我們面對一些適配問題時,能明白為什么會產生這樣的問題,針對問題尋找合適的解決方案就會更加從容

舉一個簡單的例子,如圖2.1,左右兩個尺寸不同屏幕,都有著完全一致的元素。要達到這樣的效果,「邏輯分辨率」,「物理分辨率」和「倍率」 發揮了關鍵作用。

《UX入門》第十六講:淺談移動端UI設計適配

1. 屏幕比例

屏幕比例很好理解,既設備屏幕尺寸的寬高比值。在2016年之前,業內主流的手機屏幕比例都是16:9;但在這一年命運的齒輪開始轉動,小米公司的發布了,對手機行業影響深遠的機型——小米MIX一代,屏幕比例是17:9,由此手機屏幕開啟了全面屏設計時代。時至今日,手機屏幕比例已經完全轉向了18:9,19:9,20:9等等,手機的屏幕高度在不斷地增加。

那么這個比例的變化,是否對我們適配內容有影響呢?

影響是存在的,只是影響并不大,而且僅在一些特定場景下有影響。

我們以「vivo i視頻」影視頁面為例(圖2.2),高度的變化帶來了縱向空間的延展,需要展示更多的內容,對設計適配的影響是比較小的。受影響的一些特定場景,我們將會在之后「適配的手段」小節中詳細說明。

《UX入門》第十六講:淺談移動端UI設計適配

2. 邏輯分辨率,物理分辨率和倍率

分辨率一詞,人們在日常生活中是一個比較常見的概念。比較常說的——720p,1080p,2k,4k等等,都是在說分辨率。

這些參數對應在UI設計中,指的是物理分辨率。物理分辨率是用來衡量屏幕中的像素數量,相同的屏幕尺寸和一定的觀看距離下,分辨率越高,畫面越清晰,反之則是會模糊。

物理分辨率是一個物理世界存在的具象概念,而邏輯分辨率則是一個抽象概念,對應存在于軟件的代碼層面。可以理解為代碼層面有一塊虛擬的屏幕,邏輯分辨率就是衡量這塊虛擬屏幕的像素數量,同樣這里的「像素」也是不存在的抽象概念。

邏輯分辨率也是由一組參數表達的,并且我們是可以知道這個值是多少的,如圖2.3,節選自蘋果的《人機交互指南》,其中詳細地列舉了iPhone,iPad和iPod的邏輯分辨率和物理分辨率。

《UX入門》第十六講:淺談移動端UI設計適配

我們選擇其中一條來解釋邏輯分辨率,物理分辨率和倍率之間的關系。如圖2.3,簡單說來就是——邏輯分辨率乘以倍率就是物理分辨率。

《UX入門》第十六講:淺談移動端UI設計適配

在這個公式中多了兩個單位——“pt”和“px”,px很好理解就是我們設計中所用的像素單位,而pt則是開發代碼中尺寸單位,“pt”來源于印刷行業的術語,翻譯過來是“點”。圖2.3中的“@2x”和“@3x”就是系統默認倍率,我們會常常稱之為一倍圖,二倍圖,三倍圖以此類推。

“@1x”是比較久遠的手機設備,目前已經基本不在設計的考慮范疇了。在一倍圖的情況下,此時的1pt剛好等于1px,這樣就可以減少開發工程師和設計師之間溝通成本。因為假設你的設計稿是使用的三倍圖,那么換算的公式則是1pt=3px,如果和開發溝通時不說明具體的單位,你說12,開發工程師可能就會理解成12pt,但是實際想表達的是12px,這樣最后的效果就會是有較大的誤差。所以在很多設計團隊,針對iOS設備設計時,仍然使用一倍圖作為設計稿尺寸,從而打通了開發工程師與設計師之間的溝通壁壘。不會因為單位不統一,造成結果的誤差。

那么來到Android這邊,道理是一樣的,只是在參數和概念名詞會有些不同。如圖2.5,標黃色的部分是我們目前使用的較多的屏幕尺寸(可能高度數值略有不同)。

《UX入門》第十六講:淺談移動端UI設計適配

首先,Android的倍率是用英文命名的,如mdpi等,但是習慣上我們還是稱之為一倍圖等;其次,“dp”是Android系統中邏輯像素的單位,等同于iOS中的“pt”。

Android系統和iOS系統的邏輯分辨率的參數值是相近的,這也是很多設計團隊只會基于iOS進行設計,Android開發工程師直接使用基于iOS的設計稿進行開發。因為差別不大,只要在適配時候使用相同邏輯,就可以少設計一次相同頁面,也是為了降低設計成本。

以上內容也就說明,我們在本節開頭的例子(圖2.1),為什么不同的尺寸的屏幕,為什么能保持相同的元素布局,因為兩個物理分辨率不同的屏幕都是,基于一個相同邏輯分辨率,等比放大得到的(圖2.6)。

《UX入門》第十六講:淺談移動端UI設計適配

四、UI設計適配的手段

這一小節,我們將介紹適配不同的尺寸屏幕的具體手段——固定尺寸與自適應尺寸。

1. 固定尺寸

先說簡單的,固定尺寸。固定代表著是一個絕對值,固定不變的。

固定尺寸主要是分為兩個場景,一是元素的固定尺寸,這個元素主要是指圖標,按鈕,部分的卡片容器(如Banner)和一些系統控件(如布爾開關,單選多選等)。如圖3.1,vivo賬號的登錄頁面中的登錄按鈕,在折疊屏內屏與外屏不同屏幕尺寸下,按鈕的尺寸依然是相同的

《UX入門》第十六講:淺談移動端UI設計適配

二是元素間的固定間距,主要是指元素與元素間的間距固定和元素與屏幕邊緣的邊距固定。固定的間距有助于相似元素成為一組,符合格式塔原理。比如圖標與文字,卡片列表等。

《UX入門》第十六講:淺談移動端UI設計適配

在手機系統中的設置頁面,如圖3.2,將有關聯性類目使用較小的固定間距排列,不同類別的則是使用分割線和更大的固定間距排列,這些固定間距不會因為機型,屏幕尺寸的不同而發生改變。

《UX入門》第十六講:淺談移動端UI設計適配

2. 自適應尺寸

自適應尺寸也細分為三個場景:元素等比適應,元素間間距自適應和元素彈性自適應。元素等比適應

以寬高的某一邊適配屏幕的寬高,剩余的一邊跟隨比例等比適配。這里主要指圖片,視頻的適配為主。因為這些元素的比例必須是固定的,所以我們只能去等比縮放(如圖3.2)。

《UX入門》第十六講:淺談移動端UI設計適配

通常來說我們都是以寬度去適配,但是這些年短視頻App的火熱,需要為用戶營造沉浸式的觀看體驗。豎版的視頻往往是以高度適配,那么會帶來一個問題,寬度有可能會超出屏幕寬度,超出的部分就會被裁切,但是為了給用戶更好的沉浸式觀看體驗,會選擇裁切視頻。

《UX入門》第十六講:淺談移動端UI設計適配

當然你可能會有疑惑,那如果用戶上傳了一個橫版比例的視頻或圖片,如果按照寬度適配,裁切的內容是不是太多了,而且畫面的清晰度也會降低很多?

沒錯,這里我們就需要在不同的場景下,使用不同的適配策略。所以就會針對橫版內容,就是以寬度適配,豎版以高度適配。

《UX入門》第十六講:淺談移動端UI設計適配

元素間間距自適應

間距自適應的適配手段,是以百分比數值計算適應元素與元素之間的間距,元素與屏幕邊緣的間距。以百分比計算間距,那么就需要一個基數,這個基數往往是以屏幕分辨率的寬度和高度為基數。

這個方法主要是針對元素較少的頁面,也就是我們在「基本概念」小節中說到的不同的屏幕高度變化帶來的影響。最典型的是手機的鎖屏場景,還有狀態結果頁面的展示(圖3.7)。

《UX入門》第十六講:淺談移動端UI設計適配

如圖3.8,還是vivo賬號的登錄頁,在折疊屏內屏與外屏,可以很明顯看到按鈕距離底部的間距是不同的,這里就是用百分比的間距。

《UX入門》第十六講:淺談移動端UI設計適配

元素彈性自適應

彈性自適應,是指控制元素的外邊距與內間距,同向尺寸彈性自適應。彈性的意思是有多少的空白區域就填充滿。如圖3.9,當右側多一個按鈕時,就需要左側元素彈性的適應填充剩余的空白區域。

《UX入門》第十六講:淺談移動端UI設計適配

同時我們會有一個衍生的適配手段——矩形等分適配,是指將屏幕(或區域)進行平均分割成相同寬度(或高度)的矩形(分割的矩形之間可以有固定間距,固定間距可為0px),而不同的元素在矩形中居中放置。

《UX入門》第十六講:淺談移動端UI設計適配

矩形等分主要會是標簽欄,宮格式布局和圖片視頻的瀑布流形式,花瓣網就是其中之一,比較方便適應網頁寬度的不斷改變。移動端中,目前這一方法我們會常用在折疊屏的適配中。如圖3.11,排行榜模塊在內屏是以雙列展示,而在內屏中則是因為寬度增加,需要內容填充頁面,而變成了三列。

《UX入門》第十六講:淺談移動端UI設計適配

以上就是主要的UI設計適配手段,總結一下:

  • 設計適配的手段分為兩大類——固定尺寸和自適應尺寸
  • 固定尺寸針對元素自身尺寸和元素間尺寸,都是確定的固定值
  • 自適應尺寸細分為——元素尺寸等比適應,元素間間距自適應和元素彈性自適應,相對應的自適應的方法都是比值的計算,是一個相對值

我們也只是列舉幾個典型場景,實際業務場景是復雜的,需要注意多種手段相互配合使用。

以上就是關于移動端UI設計適配的全部內容了。

感謝你的閱讀,希望對你的設計工作有所幫助。

作者:宋丹強

本文由人人都是產品經理合作媒體 @VMIC UED 授權發布,未經許可,禁止轉載。

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

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

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

常見的「浮標」按鈕,原來有這么多設計細節!

杰睿

在現代移動應用設計中,「浮標」按鈕(Floating Action Button)已成為一種常見的交互元素,它不僅提供便捷的功能入口,還能增強用戶體驗。然而,設計一個有效的浮標按鈕并非易事,需要綜合考慮功能定位、視覺效果、交互設計以及技術實現等多個方面。

今天分享的是「浮標設計」。結合設計原則與“智能伴學助手”項目應用浮標實踐展開。

文章目錄如下:

一、背景

在教育類移動端中接入了大模型AI智能應用,為保證這個應用入口可長期保持并隨時可見,提高使用率,為用戶提供便利。筆者通過“智能伴學助手”浮標實踐應用,對后續制作浮標在界面設計中思考與探索。  浮標的本質與價值

① 空間維度突破  

作為界面中的「第三層空間」,浮標通過視覺懸浮感打破平面限制 (如iOS的3D視差效果);在信息過載時代,提供「隨時在場」的核心功能入口 (如美團外賣的懸浮購物車,左右動效:進縮)。

▲「第三層空間」并「隨時在場」,也是很好的廣告位和優惠營銷,一些浮標的“小巧思”。

② 認知心理學應用

利用格式塔原則中的「閉合性」設計半透明遮罩,暗示可交互區域;通過菲茨定律優化點擊熱區,圓形浮標直徑建議≥48dp (Android規范)。  

二、浮標設計

就項目中“智能伴學助手”為例,一個教育類的應用入口,結合功能定位、用戶體驗與技術實現浮標在界面中的作用。

通常浮標是一個懸浮的按鈕或圖標,用于快速訪問某些功能,從多個維度探索其在移動端界面中的合理呈現方式:

① 功能定位與場景適配

浮標的設計規范:比如尺寸、顏色、位置。通用的設計規范,教學工具類App的界面設計,可能涉及圖標和布局。

1)尺寸與網格系統

? 圖標尺寸需適配不同屏幕分辨率,常見規范包括128x128px、96x96px、64x64px等,需根據界面層級選擇合適尺寸。

? 尺寸一般用1:1比較好或者成倍數,先做大再導出所需要的不同大小比例。

? 使用網格系統 (如微軟Fluent的24px基礎網格) 確保視覺一致性,留出安全邊距(如2px內邊距)避免元素溢出。

2)造型與風格

? 遵循簡約易懂原則,優先采用象形圖或表意符號增強識別性。

? 保持系列圖標風格統一,包括線條粗細 (建議1.5px)、圓角弧度 (微軟Fluent定義大/中/小三級圓角) 及視覺平衡。

3)適配性

? 導出格式需與開發協作,推薦PNG序列或SVGA文件以兼顧清晰度與性能。

? 自適應考慮不同平臺的顯示情況。

核心功能聚合:語言學習工具類界面將高頻功能 (如首頁入口、作業評論、學習提問) 通過浮標動態整合,支持長按展開二級菜單或滑動切換功能模式,吸附于屏幕邊緣。

根據學習階段智能變化:

  • 課前(預習):浮標展示課程試學入口或學習目標設定;
  • 課中(口語輸):提供實時筆記懸浮窗或標記工具;
  • 課后(點評):將課后作業及鞏固語言習得情況的評價和自我精進。

(外語語言口語學習一般模式:盲聽,然后根據自己的話復述,理解語言并有效使用語言)

▲ 首頁入口、作業評論、學習提問通過浮標智能解答點評,通過二級頁面展開細則

② 視覺與交互設計

以”智能伴學助手“為例,浮標主色是藍色,企業主題色也是藍色,而”智能伴學助手“浮標使用背景一般也以藍色為主,App主題色也是藍色,多場景使用適配藍色背景的靜態浮標,又要使浮標可以在背景中脫穎而出,在其過程中嘗試藍+藍搭配的存在局限性,本身藍色系較統一。

在同為藍色后,產生不同「空間」,通過將界面元素分層(如前景圖標與背景圖像),營造深度感。在浮標進行描邊隔層,現在很多表情包就是這種模式操作。

微信小程序的移動學習平臺設計,強調了用戶需求分析、界面簡潔和交互設計,這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。

在不同背景下的浮標呈現視覺形式,只要點擊即可進入應用。

思考與探索:

  • 浮標需要特色,用戶在使用過程中視覺明顯,提高交互。
  • 浮標既顯眼又不干擾學習,所以需要平衡可見性和沉浸感。
  • 浮標可以移動,用戶可以根據需要調整位置,避免遮擋內容。
  • 現浮標是靜態的,如何嘗試動態浮標,與用戶有更好的交互體驗,參與感。
  • 顏色和動效方面,冷色調營造學習氛圍,浮標可以用品牌色,如藍色或綠色,加上微動效吸引注意。樣式用了藍色圓形浮標,可能適合教育類應用,賦予科技感設計。
  • 不同狀態或者不同頁面下的浮標呈現方式不同,但成一系列,增加趣味性。

▲ 白色背景或者透明背景下的浮標呈現,在不同頁面呈現一“系列”

▲ 藍色背景下或者在統一色系下浮標視覺”糊“,可用白邊的形式將背景和浮標的”空間“區分開

思考與探索:配色方案

1)主色選擇

明亮色系:如紅色、橙色、黃色等,能快速吸引用戶注意,適用于促銷活動入口。

品牌色融合:在特殊場景中融入品牌LOGO或主色,代表企業形象和IP,增強品牌認知。

2)色彩心理學應用

藍色:傳遞信任感,適合金融或工具類應用。

黑金/黑黃組合:營造神秘或高端感,常見于娛樂或奢侈品領域。

紫色+粉紅:適用于美容、女性向產品,傳遞溫柔與創意。

控制色彩平衡,用戶色彩感官可適應。

3)對比與背景

使用中性色(如米色、白色)作為背景,提升信息可讀性。

避免沖突色搭配(如藍色用于食品類浮標易抑制食欲)。

思考與探索:個性化推薦和交互設計,可以結合AI預測用戶行為,動態調整浮標的出現時機,比如在需要提醒作業時顯示。主色選用品牌色(如教育藍/科技紫)強化識別性。

▲ 如何設計浮標會更好?

創新交互模式思考探索:

1)壓力感知交互  

? 安卓壓感屏實現「輕按預覽/重按觸發」分層交互(如華為懸浮球壓感菜單);配合觸覺反饋(Haptic Engine)增強操作確認感。

2)動態語義變形

生物擬態動畫:

? 呼吸感懸浮:模擬水母游動節奏(振幅0.5-1.2px,頻率0.8Hz)  ;

? 點擊時觸發粒子擴散動畫(模擬知識傳遞意象);

? 拖拽時產生彈性形變(阻尼系數0.6-0.8),邊緣碰撞后回彈。

根據場景智能改變形態:  

? 閱讀類App中展開為「書簽浮標+進度條」復合控件  ;

? 音樂播放器浮標可拉伸成波形可視化界面。

通過多模態反饋,聽覺,視覺,觸覺多種情感交互。

3) 空間布局策略

? 默認位置:置于屏幕右下側(符合右手持機習慣),預留10%邊距防止誤觸;

? 智能避讓:通過內容識別算法,在視頻播放或文本輸入時自動偏移避開核心內容區域;

? AR場景中的空間投影浮標(如IKEA Place家具預覽浮窗)。

▲ 位置多為屏幕右下側

③ 技術實現優化

1)跨端一致性

? 使用React等框架封裝可復用浮標組件,通過響應式設計適配不同設備尺寸(如折疊屏展開態需重新計算定位錨點);

? 采用SVGA格式實現高性能動效,控制幀率在30fps以內以降低功耗。

2)AI驅動個性化

? 基于LSTM模型預測用戶行為: 檢測到長時間未操作時,浮標縮小并展示激勵標語; 識別到錯題高峰時段,主動彈出知識點講解入口;

? 支持語音指令交互(如“浮標移到左上角”)。

④ 無障礙與倫理考量

1)包容性設計

? 為色弱用戶提供高對比度模式 (浮標輪廓增加動態描邊,對比度≥4.5:1);

? 支持頭部追蹤控制浮標移動 (iOS Switch Control技術適配)。

2)防沉迷機制 (適合未成年類App)

? 連續使用1小時后,浮標漸變灰色并觸發休息提醒;

? 家長端可遠程設置浮標功能禁用時段。(未成年學習類工具考慮優化)

⑤ 創新方向探索

1)多模態融合

? AR場景中浮標投射為3D虛擬助手,支持手勢交互與空間定位;

? 結合眼動追蹤技術,實現注視區域自動呼出上下文菜單。

2)情感化表達

? 根據學習成就解鎖浮標皮膚 (如連續打卡7天變為獎杯形態);

? 錯誤率過高時,浮標呈現“鼓勵模式” (配色變暖+微震動反饋)。

學習類智能伴學助手的浮標既能作為高效的功能樞紐,又可成為情感化學習伴侶。實際落地時建議結合A/B測試持續優化,例如對比分析「固定浮標」與「場景自適應浮標」的點擊轉化率差異。

三、結語

浮標不應僅是功能載體,更應成為:  

? 空間敘事者:通過動態變化講述產品故事;

? 情感連接器:建立用戶與數字世界的溫度觸點;

? 場景預言家:預判需求并提供恰到好處的服務。

設計師需在「顯性價值」與「隱形干擾」間找到精妙平衡,讓浮標成為提升體驗的優雅解決方案而非視覺負擔。未來可探索腦機接口的意念控制浮標、量子動畫渲染等突破性方向。

技術實現上,探究代碼示例展示了如何控制浮標的移動,確保不超出屏幕,這可以作為技術參考應用實際案例中。同時性能優化方面,使用SVGA格式或減少幀數,可能對動效設計有幫助。

浮標設計需要結合功能定位、用戶行為、視覺設計、交互體驗和技術實現,可多進行參考不同案例,搜索現有項目,對比借鑒然后對新型B端界面有所創新,確保既實用又不干擾用戶。

還可以利用Ai創新思維,設計師可以更快速、高效地生成多種設計方案,結合項目開發滿足消費者對個性化、時尚化的需求。

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

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

教你一文讀懂圖標設計

杰睿

引言
在數字化時代,用戶界面(UI)設計成為了連接用戶與產品的重要橋梁。圖標作為UI設計中不可或缺的元素,不僅承載著信息傳遞和導航的功能,還直接影響著用戶的視覺體驗和情感反應。一個優秀的圖標設計能夠瞬間吸引用戶的注意力,傳達出應用的核心功能,甚至成為品牌識別的一部分。本文將深入探討
圖標設計的基礎、步驟與技巧,并通過實際案例分析
,為設計師們提供一套完整的圖標設計指南。
(如果文中存在任何不準確或遺漏之處,我也非常期待各位專家的指正和建議)
本文目錄
本文目錄
 
「大廠設計師」教你一文讀懂圖標設計
 
 
 
一、圖標設計的基礎
1. 定義與功能
圖標是一種圖形符號,用于代表應用程序、功能或操作。在UI設計中,圖標可以快速傳達信息,提高用戶的理解和操作效率。
(1).定義
圖標設計是UI設計中的重要環節,通過創造
具有高度概括性和象征性的圖形符號
來代表各種物體、動作和概念。這些符號簡潔明了,能夠讓用戶快速識別,并在軟件界面、網站和移動應用等多領域廣泛應用。例如,常見的“保存”圖標是一個軟盤形象,用戶一看即知這是保存文件的功能。這種直觀性是圖標設計的核心價值所在。
(2).功能:
圖標設計的主要功能包括
提升視覺美感、增強用戶交互體驗、節省空間以及提供上下文信息
。例如,在手機桌面上,微信圖標用兩個對話氣泡簡單圖案代表了這個軟件;在界面導航和工具欄中,圖標可以快速引導用戶執行特定操作,例如,“搜索”圖標通常是一個放大鏡的形象,用戶看到這個圖標就知道可以進行搜索操作。這種通用的圖標設計使得用戶無需額外的學習成本就能快速上手。
具有代表性的圖標
具有代表性的圖標
 
2. 圖標的分類
圖標類型可以從多個角度進行分類,以下是根據風格、功能和交互方式等不同維度的分類介紹
(1).按風格分類
  •  
    線性圖標:
線性圖標主要為
單色線性或增加品牌色點綴
,使用輕量的線條勾勒,整體感受趨向于精致、細致,具有銳度感,不同的線條表現會帶來不同的視覺感受。
兩種具有代表性的線性圖標
兩種具有代表性的線性圖標
 
  •  
    面性圖標:
面性圖標包括
單色填充、多色疊加、微漸變
等不同形式,主要通過填充顏色來表達圖形,能夠更好地傳達出圖標的力量感和重量感,依賴于外輪廓的清晰度來提高識別度。
三種具有代表性的面性圖標
三種具有代表性的面性圖標
 
  •  
    輕質感圖標:
輕質感圖標包括
磨砂玻璃、輕寫實、晶白風
等,相較扁平圖標而言,更突出圖標的細節刻畫和真實的質感,增加了一些輕微的陰影或質感,以增加層次感。
三種具有代表性的輕質感圖標
三種具有代表性的輕質感圖標
 
  •  
    擬物化圖標:
擬物化圖標包括
2.5D、偽3D、3D建模
圖標等,盡量將現實世界中的形狀、紋理、光影融入到設計中,以模擬真實物體的外觀。
三種具有代表性的擬物化圖標
三種具有代表性的擬物化圖標
 
  •  
    字符圖標:
字符圖標使用
簡化和通用的圖形
,如字母、數字和簡單的圖形符號,具有較高的識別度和靈活的適用場景。
兩種具有代表性的字符圖標
兩種具有代表性的字符圖標
 
(2).按功能分類
  •  
    應用圖標:
應用圖標是各種應用程序的識別標志,通常在應用商店里下載的一些應用程序的標志
  •  
    頂部導航欄圖標:
常見有搜索、收藏、消息通知、掃一掃、每日簽到等
  •  
    底部導航欄圖標:
根據軟件的功能模塊進行分類,常見有主頁、我的等一些主要的模塊
  •  
    金剛區圖標:
是整個UI界面中的核心功能區域,承載頁面的主要功能和重要信息
  •  
    表單內圖標:
常見于”我的“界面中,根據產品類型不同而有差異
  •  
    通用圖標:
常見有箭頭、睜眼、閉眼、返回、收藏等
按照功能劃分的六種圖標
按照功能劃分的六種圖標
 
(3).按交互方式分類
  •  
    靜態圖標:
靜態圖標不會隨著用戶的操作或界面的變化而改變狀態
  •  
    動態圖標:
動態圖標會根據用戶的交互或界面的其他變化而改變狀態,如Bilibili的三連圖標動效
Bilibili的三連圖標動效
Bilibili的三連圖標動效
 
3. 設計原則
學習了圖標的基本分類之后,設計師們在設計圖標的過程中需要注意
易識別性、統一性、簡潔性
等基本的設計原則。我再給大家分享幾個icon設計的最佳原則幫助大家再UI設計中設計出完美的圖標。
(1).圖標設計的尺寸
最小的圖標大小通常為12×12px
。根據行業標準,在以此為基礎產生的大小值中,大部分的數值都是通過將先前的數字加倍而創建的。通常我們可以看到小、中、大這三個尺寸的圖標大小。值得我們注意的是,在我們創建ICON時,應該以100%的比例設計,這樣才會使得圖標像素看起來比較完美。同時通過進一步放大也可以確保準確性。
  •  
    iOS平臺規范:
iOS界面的網格系統
基于4pt的倍數
。蘋果官方建議最小可點擊區域為44pt,以確保用戶在操作時的準確性和舒適度。因此,設計IOS圖標時應以此為參考,確保交互元素的可點擊性。
  •  
    Android平臺規范:
Android界面
使用8dp的倍數
作為網格基礎,最小操作熱區要求為48dp。因此,通常建議采用48px作為常規圖標的設計尺寸,以便在不同設備和分辨率下都能保持良好的觸控體驗。
iOS系統中美團app的圖標尺寸
iOS系統中美團app的圖標尺寸
 
(2).完美像素
具有完美像素的圖標會呈現出
清晰明快的線條和形狀
。如今,高分辨率顯示器和Retina顯示器越來越流行,因此在不久的將來可能會減少對像素完美圖標的要求。但就目前而言,我們所設計的圖標也應該是可擴展、響應迅速并能適用于許多設備的。我們在創建具有完美像素的圖標時,可以參考以下三種建議:
  •  
    對齊像素網格:
這種設計方法可以使直線變得非常清晰,并增加曲線和拐角的清晰度
  •  
    使圖標保持完美角度:
有角度的線條更有模糊感。在創建圖標時,完美的角度是45°
  •  
    邊緣:
邊緣的4個像素最暗,因此最少需要保留4個像素的留白,這樣線條邊緣看起來才會更清晰
達成完美像素的三個要求
達成完美像素的三個要求
 
(3). 一致性原則
圖標的一致性,就是一組圖標放置在一起,
圖標要看起來差不多
,不能忽大忽小,我們前文提到過幾何圖形它們有視覺差,有的時候并不是說尺寸一樣,大小就一樣了,在設計過程中除了可以利用柵格系統保證圖標大小統一之外,還需要注意以下幾個方面要保證統一:
  •  
    線寬與間隙:
為了使圖標看起來整潔一致,非常重要的一點就是要記住線寬和間隙的大小。這是一條我們必須遵循的規則,即:
所有線條的寬度相同
  •  
    方/圓角一致性:
包括圖標在內的對象圓角半徑會定義項目的外觀和感覺。當我們對一組中的多個對象進行闡述時,就需要遵循這一簡單的規則,即:
在方角和圓角之間選擇其一
,并對整組圖標應用相同的屬性。
線條與間隙、方圓角保持一致性
線條與間隙、方圓角保持一致性
 
  •  
    視覺大小:
當我們把一個大小相等的正方形和一個圓形放在一起時,就會產生一種奇怪的感覺:圓形似乎比正方形小。為了
使我們的形狀在視覺上看上去大小相同
,我們就應該把圓圈變大,或減小正方形的大小。
  •  
    視覺平衡:
我們經常在設計程序中使用中心對齊。雖然這種方法并沒有錯,但在細節方面,比如圖標設計中,我們就需要相信自己的眼睛,
打破數學規律,以增強元素的平衡
。以播放按鈕為例,它的形狀越不對稱,需要改進的地方就會越明顯。
視覺大小、平衡的一致性
視覺大小、平衡的一致性
 
(4).KISS原則
即Keep Simple & Starightforward,這個原則背后的想法是,如果大多數
系統保持簡單操作
,那么它們就會運作得很好。用戶也就會越容易理解并與之交互,而它就越有可能被放到項目設計中。那么,KISS原則是如何運用于圖標設計的呢?
  •  
    不使用文本:
文字和圖標的結合會減少圖標的使用方式。此外,小尺寸的文本具有不可讀性。如果我們仍然需要將文本作為支持元素,就需要使用ICON旁邊的提示工具和標簽。
  •  
    不要過度設計:
不必要的復雜性會妨礙設計目的。重復的設計也會嚴重影響用戶體驗
  •  
    盡可能避免不必要的元素:
但我們不能忘記確保每個圖標在整體上下文中都是可以理解且清晰的
KISS原則的三項要求
KISS原則的三項要求
 
「大廠設計師」教你一文讀懂圖標設計
 
 
二、圖標設計步驟與技巧
 1. 研究與分析
在圖標設計的第一步研究與分析中,需要
對品牌和目標受眾、競爭環境以及設計元素
進行深入的分析。下面詳細介紹圖標設計步驟與技巧第一步研究與分析:
(1).業務需求和用戶需求
了解業務的需求背景是至關重要的。這有助于設計師
理解產品的個性和定位
,確保圖標設計能夠準確傳達品牌信息。同時,
明確品牌的目標受眾
,了解他們的需求和偏好,可以幫助設計師更好地滿足用戶期待,提高圖標的吸引力和有效性。
用戶需求、業務需求與設計需求
用戶需求、業務需求與設計需求
 
目標受眾不同
,他們對圖形的期望也會不一樣,比方說設計兒童產品界面和B端產品界面時,所用的顏色和形狀都是有考究的。例如,兒童產品:叫叫閱讀的圖標設計形狀會比較圓潤,色彩頁比較豐富;而B端產品:騰訊會議的圖標設計用色就會很克制,形狀也不會過于圓潤。
不同目標用戶對圖標設計風格的影響
不同目標用戶對圖標設計風格的影響
 
(2).競品分析
分析競爭對手的圖標設計,
找出差異化的設計方向
,這對于創建獨特的圖標至關重要。通過觀察競爭對手的設計,設計師可以避免重復,并找到創新的切入點。下面以國內最大的兩家電商購物平臺拼多多和淘寶為例,詳細說明其不同的圖標設計風格時是怎樣體現出不同的品牌理念和市場定位的。在UI界面設計的競品分析中,拼多多與淘寶作為電商行業的兩大巨頭,其界面設計各具特色,體現了不同的品牌理念和市場定位。以下是對兩家公司界面設計的詳細競品分析:
i.設計風格:
  •  
    拼多多:
拼多多的界面設計簡潔明快,以紅色為主色調,
象征著活力、熱情和實惠
。首頁主打拼團購物模式,整體風格更加年輕化、社交化,符合其社交電商的定位。
  •  
    淘寶:
淘寶的界面設計則更加穩重且富有現代感,以橙色為主色調,
寓意著財富和繁榮
。首頁布局合理,分類清晰,用戶可以一目了然地找到自己需要的商品。搜索框設計簡潔明了,配合推薦搜索詞,使用戶快速定位到目標商品。
ii.色彩搭配:
  •  
    拼多多:
拼多多主打的紅色調顯得活潑可愛,符合年輕用戶的審美,整體色彩搭配
簡潔明快
  •  
    淘寶:
淘寶
色彩豐富
,但頁面整體顯得稍顯雜亂,缺乏統一的色彩風格。
iii.功能設計:
  •  
    拼多多:
拼多多
注重用戶體驗
,拼團、秒殺等活動設計獨特,社交元素豐富,用戶參與感強。同時,拼多多的搜索框和推薦算法也更加個性化,根據用戶的偏好推薦相應的商品。
  •  
    淘寶:
淘寶
功能豐富多樣
,商品種類繁多,搜索推薦系統較為智能,但頁面加載速度較慢。此外,淘寶還擁有豐富的社交功能,用戶可以通過買家秀、評價等功能進行社交互動。
iv.用戶體驗:
  •  
    拼多多:
拼多多通過社交分享和拼團互動,增加了用戶粘性,
用戶參與感強烈
。同時,拼多多的價格戰略也體現在界面設計上,頁面上經常出現“xx人正在拼團”的提示,吸引用戶參與拼團活動。
  •  
    淘寶:
淘寶作為老牌電商平臺,
用戶體驗相對成熟
,但個性化推薦仍需提升。淘寶的購物流程相對傳統,但廣告較多,頁面略顯復雜。
拼多多、淘寶的界面圖標設計對比
拼多多、淘寶的界面圖標設計對比
 
(3).設計元素
選擇能夠代表品牌核心價值的圖形元素
,如圖標、符號或抽象圖形。這些元素應當簡潔明了,易于識別,同時具有獨特性,能夠在眾多圖標中脫穎而出。字體的選擇應與品牌風格相符,確保字體的可讀性和美觀性。顏色的搭配也非常重要,需要選擇能夠傳達品牌情感和個性的顏色,并確保顏色的搭配和諧。例如,閑魚App的UI設計通過獨特的設計元素,成功體現了品牌風格。以下是對閑魚App圖標設計的詳細分析:
i.顏色:
閑魚App采用了醒目且統一的配色方案,
以黃色為主色調
。黃色作為主色調,
給人一種溫和和舒適的感覺
,同時用于強調重要的功能按鈕或提示信息,使用戶能夠迅速識別出需要操作的按鈕。針對年輕用戶的喜好著重設計,采用了淡黃、淡藍等更為年輕化的色彩,這種配色方案不僅提高了界面的辨識度,還增加了用戶使用的舒適度。
ii.圖標設計:
閑魚App的圖標設計非常簡潔明了,
采用了扁平化+輕質感的風格,簡化了復雜性
,方便用戶快速識別功能。特定的圖標如“待售”、“交易中”、“已售”等,幫助用戶快速識別自己商品的狀態。同時,幾乎每個重要界面上都有閑魚的IP形象小黃魚,頻繁強調品牌形象
閑魚獨特的圖標設計體現出獨特的品牌設計元素
閑魚獨特的圖標設計體現出獨特的品牌設計元素
 
 2. 構思與草圖
圖標設計的構思與草圖階段是整個設計過程中至關重要的環節,它不僅決定了圖標的最終形態,還影響著用戶體驗和品牌傳達。
(1).構思
完成研究與分析后,我們要收集關于
“詞語—圖形”之間能轉化的元素
,用生活中的物或其他視覺對象來代替所要表達的功能信息或操作提示。例如設計圖標“發現”,我們會想到放大鏡、指南針、眼睛、飛機、星球等,可以都畫出來進行選擇,這一階段也稱為頭腦風暴階段。但最終我們設計師選擇什么來表達呢?這個時候我們不僅需要從普通角度進行思考,也要通過
分析行業角度
、以及
產品自身角度
進行思維發散。
通過三個不同角度,完成詞語到圖形的轉化構思
通過三個不同角度,完成詞語到圖形的轉化構思
 
(2).草圖
草圖是設計師
將想法轉化為可視化圖形
的第一步。在紙上快速繪制草圖,可以幫助設計師迅速探索多種構思,并在數字化之前收集靈感 。在繪制草圖時,設計師應注重
簡潔性和可識別性
,避免過于復雜的細節 。同時,草圖還應具有一定的抽象性和概括性,以便在后續的設計中進行靈活調整 。
繪制抽象與概括的草圖
繪制抽象與概括的草圖
 
3. 細節處理
圖標設計的細節處理是確保圖標既美觀又實用的關鍵。以下是一些關于圖標設計細節處理的建議:
(1). 風格選擇
把 icon 的外形確定下來后,就可以開始細化圖標風格了,如果不知道該采用什么風格,不如先看看自家app的風格或設計語言是什么,可以
根據app風格細化圖標風格
。比如站酷的app的頁面風格是扁平、漸變、線條,那么icon就可以按照扁平、帶線條的方向設計。
站酷app的頁面風格與圖標
站酷app的頁面風格與圖標
 
(2).圖標的柵格系統
柵格系統即(Keyline)就是
把圓、正方向、三角形、長方形(縱向和橫向)合并到一起的參考物
,方便我們在設計不同圖標時進行參照對比。正確的使用刪格會
讓設計更加標準和統一
。網格以24*24為基準,可成倍放大或縮小。它是我們設計的“容器”。框架可以幫助我們通過選擇畫布的一個區域來創建設計。大家在創建設計時經常會將ICON放置在框架中,這么做的原因在于以下幾點:
柵格系統及其正確用法
柵格系統及其正確用法
 
  •  
    大小:
由于圖標的幾何形狀,它們都具有不同的高度和寬度。為了在設計中正確使用ICON,我們就應該將它們放置在大小始終相同的框架之中。
  •  
    導出:
框架內的圖標需要與視覺中心對齊,這對于導出帶有框架的圖標至關重要。
  •  
    組件:
如果我們使用Figma,那就需要通過創建組件來節省時間。大家可以使用“實例功能”來快速替換圖標。
使用柵格系統保證圖標大小一致、視覺平衡,同時也能方便建立組件庫
使用柵格系統保證圖標大小一致、視覺平衡,同時也能方便建立組件庫
 
(3).圖標的一致性
我們前文提到過幾何圖形它們有視覺差,有的時候并不是說尺寸一樣,大小就一樣了,在設計過程中除了可以利用柵格系統保證圖標大小統一之外,還需要注意以下幾個方面要保證統一:
i.圓角統一:
圓角統一,就是
圖標之間有相同造型
,然后又都有圓角的,那么他們就要
保持相同的圓角曲度
,比方說下面這組圖標,圖標的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規范和專業。
ii.風格統一:
界面中同樣功能的圖標,
樣式和風格需要保持一致
,比方說這組圖標樣式,風格就保持著高度的一致,都是用的玻璃質感的磨砂材質。
iii.角度統一:
這組扁平化圖標,在右邊
相似的角度
都疊加了一個小色塊,增加了圖標的層次感,相同的角度也增加了圖標的一致性和系列感。
iv.線條粗細統一:
圖標的粗細要統一
,這樣圖標就會看起來比較精致,比方說下面的這組圖標,圖標外框線都是用的3px,圖標里面的線都是用的2px,圖標的粗細都保持一樣的粗細規律,這樣的圖標看著也是同樣的美觀和一致。
v.疏密統一:
下面是一組類似于插畫風格的圖標,圖標的風格是布線比較密集飽滿,
保證布線的疏密統一
,而三個圖標都遵循了這樣的原則,看起來出奇的統一,所以它們看起來像是一組成套圖標。
vi.透視統一:
當設計的圖標是立體時,要
注意它們的透視要統一
,就像下面的這組2.5D圖標,它們的設計透視就保持著高度的一致。
通過六組圖標學習如何保證圖標一致性
通過六組圖標學習如何保證圖標一致性
 
 4. 命名與輸出
圖標設計不僅需要美觀、實用,還需要
符合一定的規范和標準
。以下是關于圖標設計的命名與輸出的詳細指南:
(1).圖標設計的命名規范
i.命名原則:
命名應盡量簡潔明了,
避免使用冗長或復雜的名稱
。且所有命名只能為
小寫英文字母
,不要使用中文或首字母大寫的形式。遵循統一的命名規則,確保團隊成員之間的協作效率。
ii.命名結構:
  •  
    通用切圖命名:
組件_類別_功能_狀態@2x.png(例如:tabbar_icon_home_default@2x.png)。
  •  
    模塊特有切圖命名:
模塊_類別_功能_狀態@2x.png(例如:bill_icon_search_pressed@2x.png)。
iii.命名結構:
  •  
    控件/組件:
指獨立的可操作界面元素,如狀態欄、搜索欄等。
  •  
    模塊:
通常指頁面中的部分區塊,如背景、按鈕等。
  •  
    功能:
指頁面或模塊中需要操作或點擊的點。
  •  
    狀態:
表示當前切圖的狀態,如默認狀態、點擊時狀態等。
ps:圖標的命名一般用英文或者拼音,如果初學者對于英文命名不好理解,那么推薦下面這個網站,它將常用圖標命名匯總非常方便。
圖標命名表與命名網站推薦
圖標命名表與命名網站推薦
 
(2).圖標設計的輸出規范
i.輸出尺寸:
根據不同平臺和設備的需求,圖標可能需要不同的尺寸
。例如,iOS和Android平臺對圖標的尺寸要求有所不同。常用的網格繪制尺寸包括:16、24、36、48、64、128、512、1024等。對于啟動圖標,iOS和Android通常使用1024×1024像素的尺寸。
ii.輸出格式:
位圖格式:
PNG、JPG
等,適用于大多數應用場景。矢量格式:
SVG
,適用于需要無損縮放的場景。
GIF
格式:適用于動態圖標。
iii.輸出注意事項:
確保圖標在不同尺寸下的顯示效果清晰銳利,避免出現半個像素等情況。對于需要透明背景的圖標,確保導出時保留透明度信息。在導出過程中,
注意保持圖標的視覺一致性和平衡感
「大廠設計師」教你一文讀懂圖標設計
 
 
三、應用案例分析
 1. Apple的iOS 18系統圖標
隨著iOS 18系統的發布,蘋果公司再次對系統圖標進行了更新和優化,旨在提升用戶體驗和視覺美感。iOS 18不僅延續了蘋果一貫的簡潔、直觀的設計風格,還
引入了更多現代化的設計元素
,特別是在深色模式下的表現尤為突出。此次圖標設計的更新,反映了蘋果對于細節的關注和對用戶需求的深刻理解。
(1).iOS 系統圖標設計的演變歷史
  •  
    iOS 1-3 擬物設計的巔峰:
   在2007年,初代iPhone問世,iOS(當時稱為iPhone OS)的圖標設計以
擬物風格
為主。蘋果通過逼真的紋理和立體感讓圖標看起來栩栩如生。
  •  
    iOS 4-6 細節打磨:
   隨著iOS的逐漸成熟,蘋果在iOS 4到iOS 6之間繼續使用擬物設計,但
在細節上進行了更精細的打磨
。這一時期的圖標在光影效果和材質感上有了更高的表現。
iOS 1-6的圖標設計
iOS 1-6的圖標設計
 
  •  
    iOS 7-9 扁平化設計的到來:
2013年,iOS 7帶來了劃時代的
扁平化設計
。蘋果放棄了擬物化風格,轉而采用更簡潔、更現代的圖標設計。通過去除多余的陰影和高光,圖標變得更加輕盈。簡約的設計語言讓整個系統顯得煥然一新。這一轉變不僅僅是設計風格的變化,更標志著蘋果設計哲學的更新。
  •  
    iOS 10-12 細節優化與動態效果:
iOS 10到iOS 12在扁平化的基礎上,
加入了更多的動態效果與視覺層次
。圖標的顏色更加鮮艷,層次感更強。例如,信息圖標變得更圓潤,而音樂圖標的顏色更加活潑。蘋果開始在圖標中融入更多的交互動畫,讓用戶體驗更加生動。
iOS 7-12的圖標設計
iOS 7-12的圖標設計
 
  •  
    iOS 13-15 簡約與多樣性的結合:
在iOS 13到iOS 15之間,蘋果繼續優化圖標設計,
加入了深色模式
支持,允許用戶根據環境光線自動調整顯示效果。
  •  
    iOS 16-18 多彩的個性化時代:
進入iOS 16,蘋果推出了
自定義鎖屏和小組件
功能,
圖標也開始支持更多的自定義選項。
用戶可以通過Focus模式設置個性化的圖標風格,從而更好地表達自己的個性。iOS 17更是將這種個性化設計推向了新高度,用戶不僅可以定制App圖標的形狀和顏色,還可以通過Widget讓桌面顯示更多動態信息。
iOS 13-18的圖標設計
iOS 13-18的圖標設計
 
(2).iOS 18系統圖標具體案例分析
i.主屏幕的改動
  •  
    布局:
iOS 18 將會允許用戶將主屏幕上的
圖標放置在任何位置
,而不需要強制依次排列擺放
用戶可以在主屏幕的任意空白位置擺放 app 和小組件,可以把它們放在程序塢上方,以便快捷使用,也可以讓它們圍繞墻紙主體排布。
  •  
    允許用戶自定義圖標顏色:
蘋果將允許用戶定制應用程序圖標, 可以
讓用戶更改應用程序圖標的顏色
。App 圖標和小組件可通過深色或色彩效果變換外觀,用戶還可將它們的尺寸調大,創建最適合自己的體驗。比如說可以將社交軟件圖標設置為藍色、購物軟件圖標設置為橙色、銀行金融類的圖標設置為綠色等等,這樣我們可以更加直觀的對應用進行分類以及查找。
用戶可自由調節布局以及圖標的顏色
用戶可自由調節布局以及圖標的顏色
 
ii.Siri應用圖標
  •  
    歷史演變:
最初的Siri圖標簡單而又獨特。黑色背景上,「i」字母上方的綠色圖形像一個
對話氣泡
,簡潔明了地表達了Siri作為語音助手的功能。蘋果正式收購Siri并將其集成到iOS系統之后。圖標采用了一個
麥克風
的形象,背景則是金屬質感非常強烈的圓圈,中央的麥克風帶有漸變的紫色。這一設計與當時的iOS擬物化設計風格完全一致。第三和第四版圖標繼續沿用麥克風形象,但設計變得更加簡潔,更符合開始流行起來的
扁平化
設計趨勢。從2016年開始,Siri圖標的麥克風移除并被
彩色的音頻波
取代,進一步強調Siri的聲音識別和處理能力。2017年之后,Siri圖標開始以
球體形狀
呈現,內部是多層漸變色組成的動態光芒,給人一種未來感和科技感。
  •  
    iOS 18的更新:
如果你有注意到市面上五花八門的AI產品,你會發現,這些 AI 產品的品牌標志設計也遵循了這一目標,大多數都具有相同的特征:
不構成威脅、抽象、簡單和非擬人化
。從這一「創新」改變來看,重新設計的Siri標志更加符合這一個性化要求。
Siri的歷史演變、新版Siri圖標、Siri其他AI產品的圖標對比
Siri的歷史演變、新版Siri圖標、Siri其他AI產品的圖標對比
 
iii.實時生成表情符號
Genmoji是蘋果公司在iOS 18系統中引入的一項全新功能,它利用
生成式AI技術
讓用戶通過簡單的文本描述就能自動生成獨特的表情符號
。比如在發送短信的時候,可以根據當時聊天的情形實時創建新的表情符號。這些表情符號不僅能夠反映你的心情和個性,還能適應不同的對話和場合。
如何使用Genmoji
如何使用Genmoji
 
(3).iOS 18系統圖標設計未來展望
隨著技術的不斷進步和用戶需求的變化,iOS系統的圖標設計也將不斷創新和發展。未來可能會有更多
個性化和動態化
的圖標設計出現以滿足不同用戶的需求和偏好。同時隨著人工智能和機器學習技術的發展圖標設計可能會
更加智能化和自動化
從而提高設計效率和質量。無論如何變化iOS圖標設計都將繼續秉持簡潔、一致、高辨識度和視覺吸引力的原則為用戶提供更好的使用體驗。
 2.優秀圖標網站推薦
通過前面的文章學習,相信大家已經對圖標設計了如指掌了,那么作為一名合格的設計師,我們如何利用好的設計資源進行提效呢?以下是一些優秀的圖標設計網站推薦:
(1).IconFinder
  •  
    特點:
擁有龐大的圖標庫,包含超過89萬個圖標和17936個圖標集。支持多種格式下載,包括PNG、SVG、CSH等。部分圖標收費,但免費圖標數量也相當可觀。
(2).IconPark
  •  
    特點:
字節跳動旗下的一款圖標下載網站,相比Iconfont,圖標種類不算太多,但圖標的規范非常統一,也可在右側的操作欄更改圖標屬性,另外還有免費的插畫庫可供使用。
(3).Iconfont
  •  
    特點:
iconfont是阿里巴巴的圖標庫,應該也是受眾最多的一個圖標下載網站,給我們平時工作提效不少,造福了不少的設計師。
(4).IKonate
  •  
    特點:
Ikonate是一款可以在線編輯的圖標網站,涵蓋了常用的一些圖標,可以調節線條的粗細和大小,導出的格式是SVG。
(5).Iconduck
  •  
    特點:
Iconduck的優點是有273,858個免費的圖標庫和插畫庫供大家選擇,儲備夠豐富。
(6).Icon8
  •  
    特點:
Icon8是一個專注于提供高質量圖標和設計資源的平臺。這里的圖標涵蓋了扁平化、線條、顏色等多種風格,都是由專業設計師和插畫師手繪制作,確保了其獨特性和高品質。除了豐富的圖標資源,Icon8還提供了字體、照片、音效、視頻、插圖等多元設計資源,滿足各種項目的需求。
推薦的六個圖標網站
推薦的六個圖標網站
 
此外,在選擇這些圖標設計網站時,還需要注意以下幾點:
  •  
    版權問題:
   確保所選網站的圖標資源符合您的使用需求,特別是商業用途時要注意版權限制。
  •  
    格式兼容性:
   根據項目需求選擇合適的圖標格式,如PNG、SVG等。
  •  
    更新頻率:
   選擇那些定期更新圖標資源的網站,以獲取最新的設計趨勢和素材。
總結與展望
圖標設計是UI設計中不可或缺的一部分,它要求設計師具備良好的審美觀、對用戶的深刻理解以及不斷的創新能力。通過遵循設計原則、掌握設計技巧、應對挑戰并關注未來趨勢,設計師可以創造出既直觀又吸引人的圖標,為用戶提供更優質的體驗。在未來,UI設計將繼續發揮其重要作用,成為連接用戶與數字世界的橋梁。設計師們需要注意以下三個未來圖標設計的發展方向:
  •  
    技術影響:
隨著AR/VR等新技術的應用,未來的圖標設計可能會變得更加互動和個性化。新技術的應用將為圖標設計帶來更多的可能性和挑戰。
  •  
    用戶需求變化:
未來的圖標設計可能會更加注重個性化和互動性。未來的設計師需要更多地考慮到用戶的個性化需求和使用場景。
  •  
    人工智能:
   AI輔助設計工具可以幫助設計師更快地生成和優化圖標方案。人工智能的發展將為設計師提供更多的工具和支持,幫助他們更高效地完成工作。
設計師們只有不斷學習和進步,才能在激烈的競爭中保持領先。持續學習不僅是個人成長的需要,也是行業發展的需求。
「大廠設計師」教你一文讀懂圖標設計
 
 
 


作者:阿琳01
鏈接:https://www.zcool.com.cn/article/ZMTY0NjM2MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

UI設計中的圓角相關知識

杰睿

本篇是關于圓角的UI設計知識分享,主要分為兩個部分,第一部分介紹圓角在UI設計中的作用,第二部分是關于在界面中容易被忽略的圓角設計細節。

 

1. 在UI設計中圓角有什么作用

1.1 提升識別效率

視網膜中有塊區域叫做中央凹,是視覺最敏銳的區域。中央凹在處理圓形時速度最快,而在處理棱角邊緣時則需要調用大腦中更多的“神經影像工具”。所以,圓角越大、越趨近于圓形,人眼在處理時速度越快。

多數情況,用戶使用App時在每個頁面的停留時間都比較有限,我們需要確保用戶在盡量短的時間內高效獲取有效信息并完成相關操作,尤其對于工具類App來說更是如此。

 

 

另外,巴羅神經學研究所對“角”的科學研究發現,角的突顯性感知與角的度數呈線性變化關系,銳角比圓角產生更強的虛幻突顯性(The perceived salience of the corner varied linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles)。簡單的說就是,角越銳利,看起來就越突顯。而角出現的越凸顯,就越多地影響視覺的識別過程,導致識別變慢。

 

 

1.2 強化內容引導

圓角具有其特殊的內在指向性,在界面的容器(如卡片、頭像等)上使用圓角,會引導人們的目光聚焦在圓角矩形或圓形內部的內容上面。

而尖角的外擴性會導致視覺發散,不能使用戶的注意力在第一時間集中到容器中的內容本身。因此,作為內容載體,帶有圓角的容器具備較強的內容引導性,能夠讓用戶更加快速的獲取內容信息。

 

 

 

1.3 傳遞正面情緒

在我們長久以來形成的心智認知中,認為尖銳的物品具有危險性,而圓潤的物品更加安全。帶有弧度,造型相對圓潤的物品更有助于制造正面情緒,工業設計中常用圓潤平滑的造型來增加產品傳遞給用戶的安全和舒適性。

對于互聯網產品,我們也存在相同的認知,所以在界面設計中使用圓角圖形,也同樣可以帶給用戶正面情緒。

 

 

1.4 呼應設備外形

考慮到握持舒適度、安全性和生產工藝等原因,目前市面上多數的手機外觀和屏幕都是采用較大圓角的設計。隨著全面屏手機的興起,我們愈發能注意到從手機外型到內部屏幕,圓角都是以一種嵌套的關系層層對應的。

同樣的,為了遵循這種規律,同時延續從硬件到界面的設計語言,屏幕內部界面中的圓角也是呈現出同樣的嵌套和對應關系。

 

 

2. 圓角設計需要注意什么

接下來,說說在UI設計中容易被忽略的兩點問題。

 

2.1 內外圓角的對應關系

首先,我們來看一個對比示例,你能發現左側彈窗的設計細節問題嗎?左右兩個彈窗的不同之處僅在于按鈕的圓角半徑上,左側彈窗的設計問題就是出現在這里。

 

 

前文中我們提到過界面中容器與其內部元素的圓角是存在的對應關系的,但這個細節有時在設計過程中會被我們忽略,導致的結果就是界面的細節經不起推敲,影響視覺的美觀舒適。

我們需要考慮如何去解決這個問題,如果僅僅是做一些個人練習或者單一獨立頁面,那么我們只須要在設計中注意這一點,通過觀察讓圓角在視覺上看起來對應和諧即可。

但是如果你要去制定一套設計規范或在一個已經成熟的產品中去進行設計,我們就須要在保證視覺效果的前提下讓界面中的圓角參數更加嚴謹一些,以便于規范的使用人員了解參數為什么是這個,如何得到的?以及,后續遵從何種規則去進行設計,來保證不同設計師產出標準的一致。

 

我們在網上可以看到好多教程告訴你:外部容器圓角半徑 = 內部元素的圓角半徑 + 二者間距

 

 

△圖片來源于網絡

 

但我認為這種計算方式是有問題的,首先,多數情況下我們是根據外部容器來推導計算內部元素圓角,而不是從內向外,比如:iOS從手機屏幕→Dock欄→Dock欄中的圖標都是存在圓角的對應關系,我相信應該不是先確定內部圖標的圓角再向外推導容器和屏幕圓角的。然后,如果我們向內推導,這個計算公式就僅在一定條件下成立,因為在二者間距大于外部容器圓角半徑的時候,內部元素的圓角半徑就成了負數。

 

那么如何計算是相對嚴謹的呢?

我們從外向內推導,在外部容器圓角固定的情況下,內部元素的圓角半徑與它到外部容器的距離相關,在理想情況下:

內部元素的圓角半徑 = 外部容器圓角半徑 - 二者間距

 

 

 

但是,和前面提到過的問題一樣,以上的計算公式有一定的局限,比如在外部圓角很小的情況下,就無法去根據間距計算內部的圓角參數。

對此,我推導出了一套當存在圓角嵌套情況下,用于輔助定義圓角參數的規則:內外卡片 (元素) 圓角差值必須要小于或等于卡片 (元素) 間距。并且,內外卡片 (元素) 圓角差值越大,內外卡片 (元素) 之間的間距取值范圍越靈活。

具體的推導過程如下:

1. 當內外卡片圓角差值等于卡片間距時,內外圓角“完美”對應。當內外卡片圓角差值大于卡片間距時,圓角部分出現明顯視覺問題;

 

 

2. 內外圓角“完美”對應卡片的圓角部分的間距看起來比直線位置要顯得略小,所以當卡片間距不變,內部圓角在一定范圍內變大時,在視覺上內外圓角仍然是可對應的,但是當內部圓角過大時,則會出現問題。結合這兩步可得出結論a:內外卡片圓角差值必須小于或等于卡片間距;

 

 

3. 根據步驟2,內部卡片圓角略大于“完美”對應圓角時,內外卡片圓角也是能夠形成呼應的;

 

 

4. 此時,在步驟3的基礎上,當內外卡片間距變大時 (18px→34px),左側示例圖的內外圓角依然可以對應,但是右側示例圖的內部圓角看起來會過大,由此可得出結論b:在滿足規則a的條件下,內外卡片圓角差值越大,內外卡片之間的間距取值范圍越靈活;

 

 

2.2 文字到圓角容器的內邊距

下面來說第二個容易被忽略的問題,文字內容到圓角容器的內邊距。如果將容器內的文字粗略看做一個矩形,那么結合前文中提到的內外圓角對應關系,文字到容器的內邊距應隨著容器圓角半徑的增加而增加;

 

 

另外一點,在我們增加容器的圓角半徑后,導致容器內部空間被壓縮,圓角半徑越大越明顯,我們也需要去調整內邊距,以保證視覺上的透氣和呼吸感 。

 

 

最后,補充一點,在前面一張示例圖中我們可以看到,雖然我們通過調整間距的方式,讓界面的視覺看起來更加的舒適美觀,但是同時,也因間距的增加造成了屏幕橫縱空間利用率的下降,所以在工作中需要根據實際情況綜合考量,去定義圓角及內容間距。

 


作者:六邊形Evan
鏈接:https://www.zcool.com.cn/article/ZMTYwMjU4NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

界面設計中【浮標】的思考與探索

杰睿

界面設計中【浮標】的思考與探索
結合設計原則與“智能伴學助手”項目應用浮標實踐展開
-------------
 
目錄:
背景
浮標的本質與價值
浮標設計
一、功能定位與場景適配
二、視覺與交互設計
三、技術實現優化
四、無障礙與倫理考量
五、創新方向探索
結語
 
-------------
背景:
在教育類移動端中接入了大模型AI智能應用,為保證這個應用入口可長期保持并隨時可見,提高使用率,為用戶提供便利。筆者通過“智能伴學助手”浮標實踐應用,對后續制作浮標在界面設計中思考與探索。
 
浮標的本質與價值
1)空間維度突破  
作為界面中的「第三層空間」,浮標通過視覺懸浮感打破平面限制(如iOS 的3D視差效果); 在信息過載時代,提供「隨時在場」的核心功能入口(如美團外賣的懸浮購物車,左右動效:進縮)。
「第三層空間」并「隨時在場」,也是很好的廣告位和優惠營銷,一些浮標的“小巧思”。
「第三層空間」并「隨時在場」,也是很好的廣告位和優惠營銷,一些浮標的“小巧思”。
 
2) 認知心理學應用
利用格式塔原則中的「閉合性」設計半透明遮罩,暗示可交互區域;通過菲茨定律優化點擊熱區,圓形浮標直徑建議≥48dp(Android 規范)。
 
 ---------------------
浮標設計
就項目中“智能伴學助手”為例,一個教育類的應用入口,結合功能定位、用戶體驗與技術實現浮標在界面中的作用。通常浮標是一個懸浮的按鈕或圖標,用于快速訪問某些功能,從多個維度探索其在移動端界面中的合理呈現方式:
 
 
一、功能定位與場景適配
 
浮標的設計規范:
比如尺寸、顏色、位置。通用的設計規范,教學工具類App的界面設計,可能涉及圖標和布局。
1)尺寸與網格系統
 ◇ 圖標尺寸需適配不同屏幕分辨率,常見規范包括128x128px、96x96px、64x64px等,需根據界面層級選擇合適尺寸。
◇ 尺寸一般用1:1比較好或者成倍數,先做大再導出所需要的不同大小比例。
◇ 使用網格系統(如微軟Fluent的24px基礎網格)確保視覺一致性,留出安全邊距(如2px內邊距)避免元素溢出。
2)造型與風格
◇ 遵循簡約易懂原則,優先采用象形圖或表意符號增強識別性。
◇ 保持系列圖標風格統一,包括線條粗細(建議1.5px)、圓角弧度(微軟Fluent定義大/中/小三級圓角)及視覺平衡。
3)適配性
◇ 導出格式需與開發協作,推薦PNG序列或SVGA文件以兼顧清晰度與性能。
◇自適應考慮不同平臺的顯示情況。
 
核心功能聚合:
語言學習工具類界面將高頻功能(如首頁入口、作業評論、學習提問)通過浮標動態整合,支持長按展開二級菜單或滑動切換功能模式,吸附于屏幕邊緣。
根據學習階段智能變化:
課前(預習):浮標展示課程試學入口或學習目標設定;
課中(口語輸出):提供實時筆記懸浮窗或標記工具;
課后(點評):將課后作業及鞏固語言習得情況的評價和自我精進。
(外語語言口語學習一般模式:盲聽,然后根據自己的話復述,理解語言并有效使用語言)
  
首頁入口、作業評論、學習提問通過浮標智能解答點評,通過二級頁面展開細則
首頁入口、作業評論、學習提問通過浮標智能解答點評,通過二級頁面展開細則
 
二、視覺與交互設計
 
以”智能伴學助手“為例,浮標主色是藍色,企業主題色也是藍色,而”智能伴學助手“浮標使用背景一般也以藍色為主,App主題色也是藍色,多場景使用適配藍色背景的靜態浮標,又要使浮標可以在背景中脫穎而出,在其過程中嘗試藍+藍搭配的存在局限性,本身藍色系較統一。
在同為藍色后,產生不同「空間」,通過將界面元素分層(如前景圖標與背景圖像),營造深度感。在浮標進行描邊隔層,現在很多表情包就是這種模式操作。
微信小程序的移動學習平臺設計,強調了用戶需求分析、界面簡潔和交互設計,這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。在不同背景下的浮標呈現視覺形式,只要點擊即可進入應用。
微信小程序的移動學習平臺設計,強調了用戶需求分析、界面簡潔和交互設計,這可能對浮標的功能定位有幫助。智能伴學助手來浮標快速訪問。在不同背景下的浮標呈現視覺形式,只要點擊即可進入應用。
 
思考與探索:
浮標需要特色,用戶在使用過程中視覺明顯,提高交互。
浮標既顯眼又不干擾學習,所以需要平衡可見性和沉浸感。
浮標可以移動,用戶可以根據需要調整位置,避免遮擋內容。
現浮標是靜態的,如何嘗試動態浮標,與用戶有更好的交互體驗,參與感。
顏色和動效方面,冷色調營造學習氛圍,浮標可以用品牌色,如藍色或綠色,加上微動效吸引注意。樣式用了藍色圓形浮標,可能適合教育類應用,賦予科技感設計。
不同狀態或者不同頁面下的浮標呈現方式不同,但成一系列,增加趣味性。
 
白色背景或者透明背景下的浮標呈現,在不同頁面呈現一“系列”
白色背景或者透明背景下的浮標呈現,在不同頁面呈現一“系列”
 
藍色背景下或者在統一色系下浮標視覺”糊“,可用白邊的形式將背景和浮標的”空間“區分開
藍色背景下或者在統一色系下浮標視覺”糊“,可用白邊的形式將背景和浮標的”空間“區分開
 
思考與探索:
配色方案
1)主色選擇
明亮色系:如紅色、橙色、黃色等,能快速吸引用戶注意,適用于促銷活動入口。
品牌色融合:在特殊場景中融入品牌LOGO或主色,代表企業形象和IP,增強品牌認知。
2)色彩心理學應用
藍色:傳遞信任感,適合金融或工具類應用。
黑金/黑黃組合:營造神秘或高端感,常見于娛樂或奢侈品領域。
紫色+粉紅:適用于美容、女性向產品,傳遞溫柔與創意。
控制色彩平衡,用戶色彩感官可適應。
3)對比與背景
使用中性色(如米色、白色)作為背景,提升信息可讀性。
避免沖突色搭配(如藍色用于食品類浮標易抑制食欲)。
 
思考與探索:
個性化推薦和交互設計,可以結合AI預測用戶行為,動態調整浮標的出現時機,比如在需要提醒作業時顯示。主色選用品牌色(如教育藍/科技紫)強化識別性。
 
如何設計浮標會更好?
如何設計浮標會更好?
 
 
創新交互模式思考探索:
1)壓力感知交互  
?安卓壓感屏實現「輕按預覽/重按觸發」分層交互(如華為懸浮球壓感菜單);配合觸覺反饋(Haptic Engine)增強操作確認感。
2)動態語義變形
-生物擬態動畫:
?呼吸感懸浮:模擬水母游動節奏(振幅0.5-1.2px,頻率0.8Hz)  ;
?點擊時觸發粒子擴散動畫(模擬知識傳遞意象);
?拖拽時產生彈性形變(阻尼系數0.6-0.8),邊緣碰撞后回彈。
- 根據場景智能改變形態:  
? 閱讀類App中展開為「書簽浮標+進度條」復合控件  ;
? 音樂播放器浮標可拉伸成波形可視化界面。
 通過多模態反饋,聽覺,視覺,觸覺多種情感交互。
3) 空間布局策略:
?默認位置:置于屏幕右下側(符合右手持機習慣),預留10%邊距防止誤觸;
?智能避讓:通過內容識別算法,在視頻播放或文本輸入時自動偏移避開核心內容區域;
?AR場景中的空間投影浮標(如IKEA Place家具預覽浮窗)。
位置多為屏幕右下側
位置多為屏幕右下側
 
 三、技術實現優化
 
1)跨端一致性
  •  
    使用React等框架封裝可復用浮標組件,通過響應式設計適配不同設備尺寸(如折疊屏展開態需重新計算定位錨點);
  •  
    采用SVGA格式實現高性能動效,控制幀率在30fps以內以降低功耗。
2)AI驅動個性化
  •  
     基于LSTM模型預測用戶行為: 檢測到長時間未操作時,浮標縮小并展示激勵標語; 識別到錯題高峰時段,主動彈出知識點講解入口;
  •  
     支持語音指令交互(如“浮標移到左上角”)。
 
四、無障礙與倫理考量
 
1)包容性設計
◇為色弱用戶提供高對比度模式(浮標輪廓增加動態描邊,對比度≥4.5:1);
◇支持頭部追蹤控制浮標移動(iOS Switch Control技術適配)。
2)防沉迷機制(適合未成年類App)
◇連續使用1小時后,浮標漸變灰色并觸發休息提醒;
◇家長端可遠程設置浮標功能禁用時段。(未成年學習類工具考慮優化)
 
五、創新方向探索
 
1)多模態融合:
◇AR場景中浮標投射為3D虛擬助手,支持手勢交互與空間定位;
◇結合眼動追蹤技術,實現注視區域自動呼出上下文菜單。
2)情感化表達:
◇根據學習成就解鎖浮標皮膚(如連續打卡7天變為獎杯形態);
◇錯誤率過高時,浮標呈現“鼓勵模式”(配色變暖+微震動反饋)。
學習類智能伴學助手的浮標既能作為高效的功能樞紐,又可成為情感化學習伴侶。實際落地時建議結合A/B測試持續優化,例如對比分析「固定浮標」與「場景自適應浮標」的點擊轉化率差異。
 
----------------
 
結語:
浮標不應僅是功能載體,更應成為:  
- 空間敘事者:通過動態變化講述產品故事;
- 情感連接器:建立用戶與數字世界的溫度觸點;
- 場景預言家:預判需求并提供恰到好處的服務。
 
設計師需在「顯性價值」與「隱形干擾」間找到精妙平衡,讓浮標成為提升體驗的優雅解決方案而非視覺負擔。未來可探索腦機接口的意念控制浮標、量子動畫渲染等突破性方向。
技術實現上,探究代碼示例展示了如何控制浮標的移動,確保不超出屏幕,這可以作為技術參考應用實際案例中。同時,性能優化方面,使用SVGA格式或減少幀數,可能對動效設計有幫助。
浮標設計需要結合功能定位、用戶行為、視覺設計、交互體驗和技術實現,可多進行參考不同案例,搜索現有項目,對比借鑒然后對新型B端界面有所創新,確保既實用又不干擾用戶。
還可以利用Ai創新思維,設計師可以更快速、高效地生成多種設計方案,結合項目開發滿足消費者對個性化、時尚化的需求。
 


作者:啊海包船打魚
鏈接:https://www.zcool.com.cn/article/ZMTY1MjgzNg==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

從混沌到有序:設計規范全方位指南

杰睿

從零開始,打造設計規范:設計原則、流程與工具的全方位指南
整個文章我們會講
 
  •  
    為什么建立設計規范?
  •  
    什么時候建立設計規范
  •  
    以及具體的設計規范怎么做
 
一、設計規范的目標?
首先需要明確設計規范的目標,也就是為什么建立設計規范,這里包括提高用戶體驗、降低開發成本、提高團隊協作斜率等。這些目標將為后續的規范制定提供方向。
還有就是大家都知道,在做項目時如果沒有明確的目標和價值,是很難推動的。
從混沌到有序:設計規范全方位指南
 
 
二、什么時候建立設計規范?
在項目全面進入ui設計之前,先設計幾個核心頁面的demo
,確立整體的基礎規范和設計風格,把一些基礎的設計規范定義出來,例如
命名、尺寸、間距、顏色、字體、核心控件
等、這樣在開展設計的過程中保持一致性和統一性,當然,在項目設計過程中,UI設計規范也需要根據實際情況去調整補充。
從混沌到有序:設計規范全方位指南
 
 
三、設計規范具體要怎么做?
這里先講一些基礎通用的規范
3.1、間距
在間距部分我們需要把一些
頁面間距、模塊間距、元素間距
,這些要定義出來
像我平時在工作中
通常以8px作為基數
,以此衍生出
8、16、24、32、48、64
,這6個間距數值,完全能夠滿足絕大多數的使用場景。當然,針對信息較少的頁面也會使用到
120、160、200...其他間距數值,例如缺省頁、登錄頁面等。出去這些特殊頁面,基本上通用的就上面那6個就足夠了
從混沌到有序:設計規范全方位指南
 
 
 
3.2、顏色規范
我們要先把主色調和輔助色,通常主色都是根據
品牌形象和目標用戶
的需求選擇。
拿在顏色的定義中需要注意以下幾點
1、使用色彩心理學:
根據不同的顏色和情感聯想,選擇適合的顏色來傳達品牌形象和用戶體驗。例如,藍色通常被認為具有專業、信任和穩定的感覺,而紅色則具有激情、活力和創新的聯想。
 
2、建立層次結構:
使用顏色的飽和度和明度來建立層次結構。將重要的設計元素設置為高飽和度和明亮的顏色,使其在頁面上突出顯示,而將次要的設計元素設置為低飽和度和較暗的顏色。
3、避免使用過多的顏色:
過多的顏色可能會使頁面顯得混亂和難以聚焦。在設計過程中,盡量使用有限的顏色組合,并且要避免使用過多的對比色或互補色。
從混沌到有序:設計規范全方位指南
 
 
3.3、文字規范
我們需要把
字體、字號、顏色、行距
、這些給定義清楚,有規律的大小字號更有利于閱讀,(另外要注意一些特殊字體的版權問題)
常用的字體大小
20px、24px、28px、32px、36px,44px,48px,且都是間隔4px
,設計師需要根據具體場景去決定字體大小,以確保用戶能夠輕松閱讀和理解界面信息層級比重。
 
3.4、UI圖標規范
圖標是UI設計的重要組成部分,它可以使圖標看起來更加
美觀、易用、統一和有吸引力
。也傳達著整個UI視覺風格調性,和系統功能的作用。
在圖標設計上一定要簡單清晰,定義規范時要對
圖標的大小、圓角、線條粗細、等有明確的指示
,在繪制的時候我們可以制定自己的
網格規范
,以便參考。
從混沌到有序:設計規范全方位指南
 
 
3.5、按鈕
按鈕尺寸:
一般來說,按鈕的尺寸應該能夠適應不同的屏幕尺寸和分辨率,并且應該能夠突出顯示。
按鈕形狀:
應該具有清晰的輪廓和圓潤的邊角,圓角大小是多少
按鈕顏色:
按鈕的顏色應該與整體UI設計風格相協調,并且應該能夠突出主題和重點信息。一般主按鈕大多使用主題色。
按鈕文本:
按鈕的文本應該簡短明了,并且應該能夠清晰地表達按鈕的功能。還需要定義清楚按鈕中限制的字數。
按鈕內邊距:
按鈕的內邊距應該能夠擴大按鈕的可點擊范圍,并且應該能夠提高用戶點擊按鈕的準確性。需要考慮極限情況下,最小應該保持多少內邊距。
按鈕狀態:
按鈕的狀態應該能夠表達按鈕的狀態和功能。一般來說,按鈕的狀態包括正常狀態、點擊狀態等。
從混沌到有序:設計規范全方位指南


作者:考思考
鏈接:https://www.zcool.com.cn/article/ZMTYxMjA4OA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

身為一個ui設計師,為什么我連一個卡片設計都設計不好!

杰睿

 
在ui設計中,卡片是不可避免需要用到的東西。那么什么是卡片?卡片有哪些類型?
本次就以此問題為出發點,為大家詳細介紹ui設計中的卡片設計。
 
 
一、設計基礎
在開始設計之前,我們需要先了解卡片的定義、特點以及應用原則。
 
 
1.卡片的定義:
卡片設計是一種界面設計模式,其作用是使用卡片來作為界面信息展示的基本單元。卡片設計通過將信息分割成獨立的、可管理的部分,使整個界面看起來更加簡潔,讓用戶能夠更容易在瀏覽時理解內容,找到自己需要的信息及商品。
 
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
2.卡片的特點:
在ui的設計卡片的過程中,我們要合理的將卡片的特點發揮出來,卡片主要有三個特點。
 
 
01.瓷片信息模塊化:
ui卡片的作用是將信息呈現為獨立的卡片單元,方便用戶理解和管理信息。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
02.視覺吸引力:
視覺吸引力,顧名思義就是通過精心設計的視覺元素和顏色,讓用戶眼前一亮吸引用戶注意,以此提升用戶的使用體驗。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.強交互性:
一個合格的ui卡片在設計時需要具有豐富的交互功能,如點擊、滑動等和用戶實現“交流”的操作,增強信息傳達效果和用戶滿意度。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
 
3.卡片的應用原則:
在應用卡片時,我們要按照卡片的應用原則來保證卡片不會在運用時出現違和感。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
01.一致性:
保持卡片的一致性,包括樣式布局和交互方式。
 
02.信息層級:
信息的重要性和層級設計讓重要的信息更加顯眼。
 
03.簡潔清晰:
卡片內容簡潔明了,用戶易于理解和消化。
 
04.可交互性:
提供一定的交互功能,增加用戶的使用體驗。
 
05.響應式設計:
適應不同的設備和屏幕尺寸,確保好的顯示效果。
 
06.視覺吸引力:
通過顏色和設計吸引人的視覺效果。
 
 
 
 
二、卡片分類
正所謂人以類聚,物以群分。卡片也可以分為不同的類型,大致來分,卡片可以分為三個類型。
 
 
 
1.封面卡片:
一本書,好的封面就可以吸引讀者。封面卡片作為用戶接觸到的第一個卡片,自然是非常重要。
 
封面卡片可以根據不同的項目軟件來改變,比方實景類,如商品、風景等;或者是影視類,如動漫、影視、直播等。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
2.普通卡片:
普通卡片比較常用的三種設計形式分別為圓角卡片、破形卡片、多張重疊。這樣設計可以形成差異化,增加設計感。
 
 
 
01.圓角卡片:
一般普通的卡片大多數為直角,而圓角卡片的出現則是為了適用不同的屏幕,同時圓角的大小不一,可以增強視覺沖擊力,形成差異化,吸引注意力。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
02.破形卡片:
破形卡片是在界面中,用不規則的形狀做出來的卡片,能夠更好的突出重要信息。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.多張疊加:
在設計過程中,如果想要卡片看起來更加立體,設計感更強可以用到多張疊加。這樣一來,整個卡片的層次感也更加強烈。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
 
 
 
 
 
3.真實物體轉化成的卡片:
在設計過程中,設計師可以根據現實中存在的物體將其轉化成卡片。通過這樣的轉變,可以讓用戶有更加真實的使用體驗。
 
 
01.優惠券類卡片:
在日常生活中,優惠券隨處可見,人們對于優惠券的作用也心知肚明。那么將優惠券轉化成卡片,則能讓用戶更直觀的體驗到優惠力度。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
02.銀行卡類卡片:
當今社會銀行卡幾乎是每個成年人必備的物品,將銀行卡轉化成卡片,用戶在使用手機銀行時會多一點舒心。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
 
 
03.音樂類卡片:
將現實中的cd唱片轉化成卡片,能夠讓用戶有更好的體驗。
身為一個ui設計師,為什么我連一個卡片設計都設計不好!
 
 
總的來說,將現實中習以為常的物品轉化為卡片,能夠更好的和用戶產生共情。
天下沒有不散的宴席,來到這里,又到了再見的時候。
 
今天的卡片分享就到此結束,為了下一次的重逢不在遙遠,關注我,下次再見!



作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTYyNjI2NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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

UI 場景中的 Banner 布局樣式探索

杰睿

今天給大家探討關于產品設計中的布局樣式分析,希望通過本文的梳理和大家一起做一次探索,解析優秀案例的經驗。

 

 

Banner 對于設計師來說并不陌生,更多的還是在于視覺表現的環節,作為視覺設計師來說是重點培養的能力之一。今天給大家探討的關于 UI 場景中的 Banner 布局樣式,并非是視覺層面的探索,而是關于產品設計中的布局樣式分析。

 

在產品中出現 Banner 圖是比較常見的基礎功能,除了在其視覺創意層面不斷探索精進以外,UI 層面的樣式布局也在不斷嘗試更多不同的表現,希望通過本文的梳理和大家一起做一次探索,解析優秀案例的經驗。

 

 

 

分享目錄

 

一、Banner 視覺層表現類別

二、Banner 布局樣式分析

三、移動端線上案例分析

四、總結

 

 

 

一、Banner 視覺層表現類別

 

Banner 在 UI 場景中通常伴隨著輪播的形式展示,所以也經常稱之為輪播圖,這也是導航的一種形式之一,也有輪播導航的功能。在產品中出現可以帶給用戶平臺需要重點傳播的內容,比如活動信息和官宣咨詢等。

 

為了能引起用戶更高的關注度,Banner 在視覺層的表現上面也在不斷的創新。除了 Banner 設計創意、構圖、配色等視覺層面發揮以外,在表現類別上面我分為靜態、動態、視頻、分層視差等。

 

 

 

1.1 靜態 Banner 展示

靜態的輪播圖是最常見的,無論是設計效率還是技術落地都是最為便利的。Banner 畫面為靜態的圖片格式,在產品中分為單圖和多圖,單圖是靜態的展示形式,多圖可以自動輪播和手動滑動切換。

 

 

 

1.2 動態 Banner 展示

動態表現的 Banner 相較于靜態而言更能引起用戶的關注度,強化信息重點,在一些重點元素和行動按鈕等地方實行動態表現。

 

如果采用動態的形式表現,通常為單圖的居多。動態表現可以引起高關注度,但是如果過多也會形成互相干擾,反而削弱了關注度。

 

在這個信息爆炸的互聯網環境中,產品設計師都在不斷的嘗試如何更快、更準地獲得用戶的關注度。微動效無疑是一個不錯的選擇,無論是在功能交互還是視覺表現層面,都隨處可見。

 

 

 

1.3 視頻嵌入展示

視頻廣告由來已久,隨著短視頻的走熱,視頻嵌入到輪播廣告中逐漸增多。較多的表現形式為默認出現在首個 Banner 中,伴隨著倒計時出現,也可以關閉播放。此類廣告為了降低用戶在未知場景中的使用干擾,通常為靜音模式,帶給用戶更加友好的體驗。

 

也有一些產品欄目采用多個視頻輪播的形式,這個應用場景相對較少,一些影視產品偶爾運用。

 

 

 

1.4 分層視差效果展示

為了帶給用戶不一樣的視覺呈現和互動體驗,也逐漸出現一些打破常規表現形式的輪播廣告。分層視差效果是其中變化較大的一種,有輪播疊加的視差、3D翻轉、元素和背景分離視差等。

 

元素或者背景之間的運動差異必將引起用戶高度的關注,帶來提高關注度的目的。產品設計師也在不斷嘗試更多分層視差的效果,帶給用戶不一樣的廣告體驗。

 

 

 

小結

Banner 在視覺表現層的創新有助于提高用戶對內容的關注度,作為產品設計師我們都在不斷的嘗試更多可能性,除了在創意布局和色彩構成等方面發揮以外,表現形式的差異也是至關重要。

 

 

 

二、Banner 布局樣式分析

 

鎖定了 Banner 的視覺表現形式以后,我們來分析一下 Banner 在界面布局中的樣式。造成布局差異的因素較多,比如 Banner 比例、大小、通欄、分欄、孤立還是背景對比等。

 

首先我們來看看通欄和分欄的差別,這個因素會影響 Banner 所能呈現的大小。常規理解都覺得 Banner 越大越好,如果考慮到產品內容布局和信息層級區分方面,也會注意到整個界面布局的舒適度。所以,界面整體的風格和布局樣式也會影響 Banner 布局樣式,需要融合而非格格不入。

 

 

如果遇到一些界面布局頭部采用深色,在布局 Banner 的時候為了讓空間感更強,也會讓 Banner 布局于頭部背景上層。通常背景色為固定色值和變動色值,變動色值會根據輪播圖的色彩來定義背景色值,這樣的設計解決方案不僅融合度高且空間感強。

 

關于 Banner 的比例是很多產品設計師不斷探索的方向,比例影響高度值的控制。界面布局內容量的不同影響高度值的不同,根據內容自定義也是可行的方法之一。也有設計師會根據斐波那契數列計算,推薦出寬高比例有 8:5、8:3、8:2、8:1 等,在計算的過程中我們通常取能被 4 整除的數值。

 

我們將 Banner 的寬度值定義為:W,高度值定義為:H,比值關系用:Y( Y 為 5/8、3/8、2/8、1/8 等)。得出計算公式:H=W*Y,得出來的值取能被 4 整數的數值即可。這只是其中一種計算形式,設計師也可以根據具體布局情況進行自定義,設計不是一層不變的方法論,而是做適合具體情況的解決方案。

 

 

關于布局樣式的分析遠不止此,拋磚引玉,經驗總結只是一個起步,探索與創新才能突破更多可能性。

 

 

 

三、移動端線上案例分析

 

經驗總結很大程度上都會根據已有的優秀案例進行分析,立足于成功案例之上才能更切實際。通過大量的產品體驗日記,梳理出同屬性的不同解決方案,下面便為大家推薦一些上線案例分析。

 

 

3.1 常規形式運用最為普及

Banner 圖的運用組合元素為圖片層和輪播點,通過不同的滑動交互形式來形成不一樣的變化。常見的都是單純的 Banner 圖、輪播點、滑動切換組合,圖片本身以直角或者圓角、通欄或者分欄來呈現,這個需要結合整體的風格來定;輪播點的形式比較多樣,也有不顯示輪播點的形式,以顯示待輪播圖片來替代。

 

 

比如騰訊視頻、愛奇藝、優酷、芒果TV等常用的影視類 App 中,就各自以不同的形式顯示輪播 Banner。騰訊視頻分欄顯示待輪播圖和直角風格,愛奇藝通欄顯示和輪播點配合,優酷圓角風格配合輪播點,芒果TV通欄呈現融合背景且營造前后空間感。

 

 

 

3.2 自然而流暢的縮放切換

除了在圖片層和輪播點進行設計發揮以外,Banner 圖的切換交互也是一種探索的方向,自然而流暢的交互形式能帶給用戶舒適的體驗。比如 MOO 音樂采用縮放過度的形式來進行 Banner 輪播,這種自然而流暢的形式,給人一種非常舒適的操作體驗。

 

 

 

3.3 背景色隨著 Banner 輪播而變化

界面頭部視覺表現為了提高用戶關注度,利用深色表現更能體現空間感和襯托 Banner 效果。通常為品牌色進行襯托,也有很多產品會利用 Banner 進行取色,作為背景色的選擇范圍,這樣更具融合性和視覺表現差異。背景色隨著 Banner 輪播而變化,是比較普遍的一種設計方案,視覺體驗感很好。

 

 

 

3.4 以進度條的形式表達輪播控制

Banner 圖的輪播控制常規的做法是以點的形式呈現或者左右兩側露出待輪播 Banner,最近在淘票票 App 中發現了一種新的表達,以進度條的形式呈現,非常直觀的讓用戶可以判斷出還有多少 Banner 處于待輪播狀態。這樣的表現形式也和觀影時視頻的進度一致,不僅匹配了產品屬性,也能更加直觀的呈現輪播效果,帶給用戶全新的體驗。

 

 

 

3.5 模擬舞臺背景呈現輪播 Banner

在界面布局中空間感的營造可以讓信息對比更加明顯,考拉海購就將 Banner 作為背景來搭建一個具有空間感的舞臺,使得整個界面延伸出更強的深度空間感。Banner 輪播默認以淡入淡出的形式,也可以手動滑動輪播,區別電商產品同質化表現,帶給用戶不一樣的視覺感官體驗。

 

 

 

3.6 異形廣告,打破常規視覺呈現

有時候方方正正的布局讓人感覺受到了一定的束縛,也有一些產品在 Banner 呈現的形式上面不斷打破邊界的束縛,異形廣告的運用逐漸變得頻繁。最簡單的異形廣告是在畫面本身突破束縛,整體的結構布局還是在固定的造型里面,比如騰訊動漫 App 推薦板塊的輪播 Banner。

 

 

除了在 Banner 設計本身進行突破束縛以外,也有在造型上面進行變化的,比如膠囊形狀,也稱之為膠囊廣告;在邊界分割上面除了直線以外,也有采用弧形分割或者特殊形狀分割等。

 

 

 

3.7 微動效增強用戶關注度

動效在產品設計中已經運用非常頻繁,在 Banner 圖的設計中也會有所涉及,相較于靜態的呈現方式來說更能引起用戶的關注度。為了不帶給用戶過多的信息干擾,通常都是單圖呈現,這樣也能將焦點強化。

 

 

通常都是個別元素進行微動效,來體現動感效果,在主 Banner 中相對少見,次級和異形廣告中運用廣泛。

 

 

 

3.8 視頻廣告嵌入,不破壞只融合

視頻廣告的運用是比較常見的,在保持原有 Banner 布局不變的情況下嵌入到結構中,引起用戶的關注度。通常為自動播放的形式,為了降低用戶在未知場景中的使用干擾,默認靜音模式。有倒計時的伴隨著關閉操作,也有一些提供重播的操作,播放結束自動翻頁。

 

 

除了單個視頻嵌入以外,也有 Banner 全部采用短視頻的方式,不過相對較少。

 

 

 

3.9 卡片疊加滑動提升輪播空間感

在探索手勢操作上面,便捷度、流暢度、體驗感都是至關重要的。滑動 Banner 過程中的體驗感能帶給用戶對于當前內容的關注程度,便于操作的同時能引起用戶的好奇心更是重中之重。

 

蝦米音樂的樂庫便是結合了眾多設計思考,卡片疊加帶來視覺呈現的空間感,手勢滑動流暢自然,主題文案隨著滑動而變化顯示或者隱藏,帶給用戶更加友好的選擇體驗。

 

 

 

3.10 主題元素分層視差帶來輪播新玩法

為了提高用戶對輪播廣告的關注度,突破已有的表現形式是設計師不斷思考的方向。

 

自如 App 端的做法引起了我的關注,將主題元素和背景層進行分離,主題元素進行輪播的同時背景層漸隱呈現。不一樣的視覺表現和輪播形式,帶來了 Banner 輪播形式的新玩法。

 

 

 

 

四、總結

 

Banner 在很多產品中是較為常見的元素存在,UI 場景中的 Banner 布局樣式探索是為了在進行結構布局的時候,我們可以嘗試出更多不一樣的解決方案。一個好的體驗也許只是一個細節的探索,如果能在每一個功能設計的時候都能把控每一個細節,必能帶給用戶更好的使用體驗。

 

本文雖然不是講解如何設計 Banner 圖本身,但是關于 Banner 的布局形式、造型特征、內容表達形式等在產品設計中的運用,也是起到非常關鍵的因素。希望通過這種形式的梳理,可以帶給你更多的幫助。

 

文中案例來源于日常的產品體驗日記整理,將具備同屬性的內容進行歸類梳理,形成可指導的設計建議是一種探索思考的過程。希望這個思路可以拋磚引玉,和大家一起探索產品設計中更多用戶體驗和感官體驗的設計解決方案。



作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTE4Njc2MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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

底部標簽導航設計的千奇百態

杰睿

作為 UI 設計師來說,掌握產品設計中的每個組成要素是非常必要的,所謂精細化的設計就是把控好每一個細節的深入。隨著大屏手機的普及,在人機交互的探索上面設計師追求著更多提高用戶體驗的設計方式,不過萬變不離其宗,用戶體驗沉淀下來的行為習慣依然影響著我們的設計。

 

就拿導航設計來深入探索,隨著產品設計的不斷推進,很多新穎的設計呈現帶給用戶更多的操作體驗。本文就以移動端底部標簽欄導航為案例分析,和大家一起探索一下底部標簽欄導航設計的千奇百態。

 

 

 

 

分享目錄

 

一、關于底部標簽導航

二、UI 設計注意事項

三、UI 表現層類別分析

四、移動端線上案例分析

五、總結

 

 

 

一、關于底部標簽導航

 

移動端導航欄設計相當于自身的骨架,是支撐產品中功能交互和內容傳播的血肉。導航系統指引著用戶的操作軌跡,引導用戶抵達目的地和進行相關的操作,將零散的內容和功能進行組織形成結構化的可視軌跡。導航的存在因此顯得格外重要,也是梳理功能結構需要重點確定的內容,以此來形成整個產品的脈絡。

 

 

移動端導航欄比較常見的有:底部標簽欄導航、舵式導航、頂部標簽(Tab)導航、宮格式導航、輪播(平鋪)式導航、懸浮 icon 導航、列表式導航欄、抽屜式導航、下拉導航/菜單導航等等。我們比較常見的產品中采用底部標簽欄導航的居多,便于用戶進行頻繁的操作,這也是本文接下來重點和大家探索的話題方向。

 

在移動端產品中底部標簽欄導航是最常用的導航模式,常作為一級目錄的導航,位于產品界面底部。根據用戶對于界面的操作熱區來看,底部是用戶可以輕松點擊的區域,無論用戶單手還是雙手操作都十分便利。

 

在底部標簽欄導航的基礎上進行拓展欄設計也是比較常見的形式,也就是舵式導航。突出中間的功能強化用戶的關注度,引導用戶使用更多延展功能。底部標簽欄導航和底部(舵式)拓展欄都屬于底部導航的范圍,本文將會重點以此類型為主進行梳理。

 

 

 

 

二、UI 設計注意事項

 

底部標簽欄導航非常直觀的告訴用戶當前的位置,也便于用戶進行同一層級間的不同模塊切換。由于具有很強的包容性,不會與其他功能模塊形成干擾,也能與多種導航模式進行組合使用。

 

底部標簽欄導航在模塊的選擇上面通常是 3-5 個,比較常見的為 5 個,3 個模塊相對比較松散,運用案例不是很多,除非業務功能較少。在設計表現形式上面有:icon + 文字、純 icon、純文字形式,比較主流的還是 icon + 文字的形式,可以降低用戶的理解成本和記憶負擔,提高用戶的操作體驗。

 

 

底部(舵式)拓展欄是為了突出中間功能設計,吸引用戶關注度,提高更多隱藏功能的使用概率。這種導航模式較為常見,比如轉轉、抖音、馬蜂窩旅游、閑魚等等均有使用。可以提高導航欄設計的趣味性和特征性,引導用戶操作更多功能和貢獻更多內容。不過這樣的設計由于關注度被吸引,進而影響其它一級模塊的關注度,由于隱藏的功能增加了用戶的記憶負擔和操作負擔,利弊權衡需要產品設計師進行評估。

 

在進行設計的過程中,功能模塊的確定需要起到牽引的重要作用,鏈接起整個產品的功能脈絡;設計表現上面需要區分默認和點擊狀態,可以跳出規范的束縛,但是需要在不影響其它業務模塊的前提下進行。

 

 

 

 

三、UI 表現層類別分析

 

底部標簽欄導航在 UI 表現層方面也是千奇百態,除了常規的置底形式,設計師也發散了更多新穎的表現。突破現有規范的束縛,不被固有化思維所限制,才能不斷的進行設計創新。

 

 

3.1 最穩定的常規設計形式

底部標簽欄導航最常見的設計形式依然是置于底部的常規形式,通常是 3-5 個功能模塊為主,其中 5 個功能模塊是較為常見的。形成差異化的是在圖標設計上面進行發揮,難度較大的設計是結合品牌基因或者特征性元素表達,也有一些是純文字的設計形式。

 

除了圖標上面進行發揮以外,也有一些會在背景上面進行裝飾,體現產品差異化。不過最常見的依然還是單色為主,或者根據模塊的需求在切換的過程中選擇使用不同的背景體現。雖然是最常規的導航模式,但是設計師依然可以在布局形式、圖標風格、配色關系、背景裝飾等方面進行發揮。

 

 

 

3.2 動靜結合的微動效表現

微動效在產品設計中的運用逐漸變得頻繁,相較于靜態的表現更能引起用戶的關注度,也能帶來趣味性和互動性。在底部標簽欄導航中的圖標設計上面,默認的采用靜態展示,而點擊狀態以動效的形式進行演變過度也是非常常見的設計處理。

 

在進行動效設計的時候,可以采用整個圖標位移形成動效,這是最簡單的動效表現,通常是上下彈跳位移。比較復雜的是圖標本身的結構動效,這也是圖標動效轉換比較連貫的形式。

 

 

 

3.3 突出規范框架的束縛表現

雖然大部分產品設計都會優先采用官方的設計規范,但是為了突出設計的差異化,也會進行一些突出規范框架的設計。在保持原有不變的導航設計中,我們可以針對局部功能模塊進行突出表現(比如舵式導航),也可以將點擊狀態進行突出表現。

 

 

 

3.4 懸浮層增強空間感

一些產品為了增強界面結構的空間感,針對底部標簽欄導航設計采用懸浮層的設計來進行表現,使得界面的通透性和呼吸感更強。這種設計形式依然保留了原本的結構,只是預留了左右和底部的間距,也有一些產品結合交互動效的形式表達,滑動過程中采用隱藏部分功能,增加瀏覽過程的內容輸出面積。

 

 

 

3.5 底部拓展/隱藏式設計

隨著一些工具型產品的使用,功能模塊變得復雜而繁多,也有將更多功能隱藏在底部標簽欄里面,上拉交互時顯示。這種設計形式將底部標簽欄進行了深度的開發利用,但是功能隱藏比較深,曝光度受到了一定的影響,不適合較為重要的功能模塊設計。

 

 

 

3.6 小結

底部標簽欄導航在 UI 表現層方面還有更多可以給予設計師發揮的空間,設計沒有固定不變的形式,在于不斷的發現、總結和創新。期待大家發現更多設計解決方案和進行更多設計創新,下面將會為大家梳理線上的優秀案例,讓我們可以站在巨人的肩膀上不斷超越。

 

 

 

四、移動端線上案例分析

 

移動端底部標簽欄導航設計在眾多產品中浮現出很多優秀的案例,對于線上案例的分析將有助于我們進行落地性的思考,新穎的設計不再是飛機稿,而是可以實現的創意。創新是建立在不斷的發現、總結、分析和改變,希望這些案例可以帶給你點滴靈感。

 

 

4.1 背景結合特定節日增強氛圍

在大部分情況下底部標簽欄導航的背景為單色的居多,不干擾信息的傳遞而保障用戶的瀏覽體驗。也有在特定節日結合氛圍營造對背景進行簡單的裝飾,可以在節假日或者特殊時期引起用戶的共勉,增強產品的情感化設計。

 

比如寶寶巴士兒歌 APP 的底部標簽欄導航設計,在之前的一些版本迭代過程中,結合特定氛圍營造進行背景設計,也是一種非常不錯的設計表達形式。由于屬于兒童類產品,點擊功能模塊切換的過程中還伴隨著音樂,視聽體驗的結合使得操作體驗備受關注。

 

 

 

4.2 強化消息提示的關注度

系統通知或者消息提示往往都會被用戶所忽略,盡管很多產品都會將消息作為單獨的功能模塊來設計,但是依然擺脫不了被忽略的問題。微信讀書將通知和私信等消息提示結合在個人中心的設計中,以氣泡彈出的形式展示在圖標紅點提示上方。以此來吸引用戶的關注度,增加消息閱讀率。

 

 

 

4.3 特異設計引導功能模塊關注度

在底部標簽欄導航的多個功能模塊中,為了突出或者引導使用某個功能時,會采用特異構成的設計做法,在原本的設計規范上面突出表現個例,以此來引起用戶的關注度。比如騰訊動漫在第一次進入 APP 時,圈子的圖標設計會特意突出,點擊之后恢復原樣,以此吸引用戶對該欄目的關注,增強功能模塊的使用率。

 

 

 

4.4 圖標設計的年輕化趨勢

隨著 95 后成為互聯網原住民,產品設計逐漸趨向于“年輕化”的探索和挖掘。優酷 V9.0 升級后設計風格更年輕化,底部標簽欄圖標設計采用低純度、高明度的多色漸變,結合微動效使得風格更加青春活潑,符合年輕一代的審美需求。年輕化的設計不僅提高感官體驗,也拉近了產品與用戶之間的親和力。

 

 

 

4.5 趣味性的情感化設計融入

情感化的設計能夠拉近產品與用戶之間的親和力,這也是設計師在不斷探索并延展的設計方向。QQ 作為社交工具而言,如何更加符合年輕化的設計需求,在底部標簽欄圖標的設計上面也是用盡了心思。消息模塊的圖標設計成各種搞怪的表情,在拖拽的時候會切換不同的表情,帶給用戶更加趣味性的體驗,讓人會心一笑。

 

 

 

4.6 首頁圖標強化品牌曝光

為了強化產品品牌的曝光度,在進行底部標簽欄圖標設計的時候,會將首頁圖標的點擊狀態切換為品牌 LOGO 的形式,以此來增加品牌的曝光度。設計上面的選擇有 LOGO 圖形、吉祥物、應用圖標、品牌局部圖形等,會根據品牌 LOGO 的造型靈活選擇。

 

 

 

4.7 舵式導航轉一轉增強關注度

底部(舵式)拓展欄導航是突出中間功能模塊設計來強化關注度,除了靜態的表達以外,結合微動效更能起到強化突出的作用。轉轉結合吉祥物和微動效運用在舵式導航的設計中,不僅提高用戶的關注度,情感化的設計還能增強產品的親和力。

 

 

 

4.8 結合營銷內容多層共用

產品中的營銷結合是最為常見的,產品設計師也在不斷地思考更多可結合的功能模塊,舵式導航的區域被充分利用是最為便利的。芒果 TV 將營銷內容與會員模塊圖標進行結合,在保持原有功能操作的基礎上強化營銷活動的曝光度,鼓勵更多用戶參與活動。

 

 

 

4.9 微動效結合多層功能運用

微動效運用到底部標簽欄導航圖標動效中較為常見,可以帶給用戶趣味性的點擊體驗。對于一些首頁采用瀑布流設計的產品,也會在用戶上滑瀏覽內容到一定量的時候將首頁變化為“置頂”的操作,方便用戶快速置頂。比如愛奇藝 APP 將品牌色強化在圖標的設計中,結合微動效的變化帶給用戶趣味性和強化品牌記憶,在首頁圖標和置頂圖標切換的過程中也采用了微動效的形式,過度更加自然流暢,也能更加醒目的提示用戶。

 

 

 

4.10 微動效結合突出框架的束縛

一些尋求突破的產品,在設計的時候也嘗試了突出規范框架的束縛表現,點擊狀態會突出局部來強化。結合動效的變化形成自然過度,突出的設計更能引起用戶的關注度,明確自己當前所處的位置。這樣的表現形式不僅可以形成設計差異化,也能讓用戶操作路徑更加明顯,比如愛奇藝早期版本、美團外賣等產品。

 

 

 

4.11 懸浮層設計突破底部標簽欄常規表現

設計師都在不斷的探索設計的差異化,敢于創新才能尋求新的可能性。脈脈在最近的迭代中將底部標簽欄的設計采用懸浮層的形式表現,使得界面內容呈現的呼吸感更強,也增加了界面結構的空間感。在保持基本設計規范的前提下進行小小的變化,就能帶來設計的差異表現,也能帶給用戶較為新穎的感官體驗。

 

 

 

4.12 懸浮層設計結合交互動效的雙向運用

交互動效是 UI 設計師在靜態設計稿中要逐步突破的一種技能,交互動效可以讓我們的設計表達更加直觀,提高產品的互動性和趣味性。馬蜂窩旅游在進行底部標簽欄突破的過程中,除了采用新穎的懸浮層設計以外,在上滑瀏覽內容時采用隱藏局部功能的處理方式,讓內容的輸出面積更大。在下滑或者停頓的過程中恢復默認導航,探知用戶行為習慣并給出不同的交互反饋,帶給用戶更高的操作體驗和互動趣味性。

 

 

 

4.13 底部拓展設計承載更多功能模塊

對于一些功能模塊較多的產品,產品設計師會盡可能的開發每一個常規的功能,拓展出更多可以進行設計延展的模塊。釘釘 APP 在進行底部標簽欄設計的時候,就將更多功能模塊隱藏在上拉展開欄中,方便用戶進行快捷操作。充分的對底部標簽欄進行了深度挖掘,利用手勢的變化實現更多功能模塊的切換,提高了用戶的操作體驗。

 

 

關于移動端底部標簽欄導航設計還有很多非常不錯的線上案例,這里就不一一列舉啦!優秀的案例總結能夠帶給我們更多的靈感參考,基于優秀之上我們才能設計出更新穎的作品,希望以此拋磚引玉,期待大家發現更多好玩的設計。

 

 

 

五、總結

 

對于 UI 設計師來說,產品體驗是一種習慣的養成,結合體驗的日記化摘錄形成設計思路的總結。總結是為了形成最終可供靈感借鑒的經驗,基于優秀的案例分析才能形成更多的設計解決方案。

 

本文以移動端底部標簽欄導航設計的經驗分析為大家進行梳理,任何的設計表達都不是不變的規律,掌握的是這種設計分析和總結的思路,以此反推出更多的設計總結。希望本文的思路作為拋磚引玉,帶給你更多的思路。



作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTIzMTk0MA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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

從用戶體驗到細節之美:移動端彈窗設計

杰睿

前言
在當今的移動應用設計中,彈窗作為一種重要的交互元素,對于提升用戶體驗和增強應用的可用性具有舉足輕重的作用。然而,彈窗設計并非簡單的堆砌信息,它需要考慮到用戶的使用習慣、心理預期以及操作流程等多個方面。因此,如何設計出優秀的移動端彈窗,成為了一個值得探討的話題。
本文旨在為設計師們提供一份全面的移動端彈窗設計指南。我們將從彈窗的定義與重要性、類型與使用場景、設計原則以及不同場景下的彈窗設計等方面進行深入探討。希望通過本文的分享,能夠幫助設計師們更好地掌握移動端彈窗設計的技巧,提升應用的用戶體驗。
從用戶體驗到細節之美:移動端彈窗設計
 
 
從用戶體驗到細節之美:移動端彈窗設計
 
 
彈窗是用戶界面中的一種重要元素,它是一種臨時性的、可交互的窗口,用于向用戶展示信息、提示、警告或提供額外的功能。在移動應用中,彈窗通常用于在用戶執行某些操作或觸發某些事件時提供反饋或額外的信息。
彈窗設計的好壞直接影響到用戶體驗和應用的易用性。一個好的彈窗設計能夠提供清晰、簡潔、易于理解的信息,同時不會干擾用戶的操作流程。而一個不好的彈窗設計可能會讓用戶感到困惑或不便,甚至可能導致誤操作。
從用戶體驗到細節之美:移動端彈窗設計
 
 
從用戶體驗到細節之美:移動端彈窗設計
 
 
1、阻斷式彈窗
模態彈窗是一種需要用戶進行響應的彈窗。它通常會覆蓋整個屏幕,并阻止用戶進行其他操作,直到用戶對彈窗做出響應。打斷用戶當前的操作流程,屬于強勢的干擾行為,通常用于需要用戶確認或選擇的操作,例如刪除數據、確認操作等。
從用戶體驗到細節之美:移動端彈窗設計
 
 
2、非阻斷式彈窗
非模態彈窗是一種不會覆蓋整個屏幕的彈窗。它通常會以小窗口的形式出現在屏幕的一角或下方,用于提供一些簡短的信息提示或警告。是一種輕量級的反饋,不會對用戶流程產生干擾,同時又給了用戶反饋和信息。并且有時間限制,在一定時間里自動消失。不需要用戶進行點擊操作,只需要讓用戶看到即可,常見的非模態彈窗包括Toast提示框、Snackbar提示對話框等。
從用戶體驗到細節之美:移動端彈窗設計
 
 
從用戶體驗到細節之美:移動端彈窗設計
 
 
1、彈窗設計尺寸定義
移動UI彈窗的設計尺寸通常取決于多個因素,通常需要考慮設備的屏幕尺寸和分辨率。以下是一些常見的移動端彈窗設計尺寸定義規范:
① 彈窗寬度
在移動設備上,彈窗的寬度通常會與設備屏幕寬度相適應。因此,彈窗的寬度可以設置為設備屏幕寬度的80%至90%,這樣可以確保彈窗在不同屏幕尺寸上都能良好地展示。
從用戶體驗到細節之美:移動端彈窗設計
 
 
② 彈窗高度
移動端彈窗的高度應該根據內容的多少進行自適應,但要避免過高導致用戶需要滾動查看。通常建議彈窗的最大高度不超過設備屏幕高度的80%。
從用戶體驗到細節之美:移動端彈窗設計
 
 
③ 按鈕大小
在移動端彈窗中,按鈕的大小應該足夠大,以便用戶能夠輕松點擊。按鈕的大小一般建議在44px至56px之間,同時保持足夠的間距,避免誤觸。
從用戶體驗到細節之美:移動端彈窗設計
 
 
④ 字體大小
移動端彈窗中的字體大小應該適中,既要保證內容的可讀性,又要避免過大或過小導致視覺上的不適。通常建議標題字體大小在16px至20px之間,正文字體大小在14px至16px之間。
從用戶體驗到細節之美:移動端彈窗設計
 
 
這些尺寸定義規范可以幫助我們在移動設備上創建具有良好用戶體驗的彈窗。然而,需要注意的是,這些規范并非絕對,在實際設計中還需要根據具體需求和場景進行調整。同時,考慮到不同設備和操作系統的差異,還需要進行充分的測試和調整,以確保彈窗在各種情況下都能提供最佳的用戶體驗。
 
2、彈窗設計版式
彈窗的版式設計可以根據需求進行多種多樣的變化,但一般來說,以下幾種版式設計是比較常見的:
① 文字列表框
在頁面底部出現,以簡潔的功能描述性文字展示功能按鈕,敏感的功能操作一般顏色字體標出。
從用戶體驗到細節之美:移動端彈窗設計
 
 
在進行此類彈窗設計時,有幾個關鍵要點需要特別關注:
首先,文案必須簡潔明了,直接傳達核心信息。避免使用冗長或復雜的措辭,以免用戶產生困惑。
從用戶體驗到細節之美:移動端彈窗設計
 
 
其次,為了突出核心內容,可以采用一些視覺上的設計技巧,如加粗、變色或增大字體大小。這樣有助于迅速吸引用戶的注意力。
從用戶體驗到細節之美:移動端彈窗設計
 
 
在顏色、字體和布局方面,保持一致性至關重要。這樣可以增強應用的品牌識別度,并為用戶提供更加統一和連貫的體驗。
從用戶體驗到細節之美:移動端彈窗設計
 
 
再次,對于包含大量文字信息的彈窗,可讀性是關鍵。合理使用標題、段落和列表來組織內容,避免布局過于擁擠或空白過多。這樣可以提高信息的可讀性和易理解性。
從用戶體驗到細節之美:移動端彈窗設計
 
 
最后,考慮彈窗在不同尺寸屏幕上的適應性是必要的。通過合理的設計布局和響應式設計,確保彈窗在實際使用中的顯示效果和用戶體驗不受屏幕尺寸的影響。
從用戶體驗到細節之美:移動端彈窗設計
 
 
② 圖文排列
當功能按鈕數量很多的時候,將文字和圖片按照一定的排列方式組合在一起,以吸引用戶的注意力并傳達信息。這種樣式下需要注意彈窗內各功能按鈕的UI設計和排列布局。
以下是一些常見的圖文排列類型的彈窗設計方式:
2.1 文字居中,圖片居側
這種方式將文字居中顯示,而圖片則位于文字的一側。這種設計方式常用于一些需要強調文字信息的彈窗,例如確認框或者提示框。
從用戶體驗到細節之美:移動端彈窗設計
 
 
2.2 圖片居中,文字居側
這種方式將圖片居中顯示,而文字則位于圖片的一側。這種設計方式常用于一些需要展示圖片的彈窗,例如相冊或者圖片查看器。
從用戶體驗到細節之美:移動端彈窗設計
 
 
2.3 文字在下方,圖片在上方
這種方式將文字放置在圖片的下方,以增強文字與圖片的聯系。這種設計方式常用于一些需要展示產品或者文章的彈窗,例如產品詳情頁或者新聞摘要。
從用戶體驗到細節之美:移動端彈窗設計
 
 
2.4 文字和圖片交錯排列
這種方式將文字和圖片交錯排列在一起,以增強信息的層次感和視覺沖擊力。這種設計方式常用于一些需要展示多個信息的彈窗,例如表單或者調查問卷。
從用戶體驗到細節之美:移動端彈窗設計
 
 
無論采用哪種圖文排列類型的彈窗設計方式,都需要注重文字和圖片的協調性和統一感,以保證彈窗的整體美觀度和易用性。同時,還需要根據具體的彈窗類型和目的來選擇合適的設計方式,以便更好地傳遞信息并吸引用戶的注意力。
 
③ 選擇列表框
用選項代替了功能按鈕,這種設計方式的好處是減少了功能流程中的頁面跳轉,但如果選項很多而且描述文字較多的時候,還是設計成選項詳情頁更好些。
以下是一些常見的選擇列表框的類型:
3.1 單選列表框
這種方式只允許用戶選擇一個選項,常用于一些需要用戶做出唯一選擇的場景,例如性別選擇、國家選擇等。
從用戶體驗到細節之美:移動端彈窗設計
 
 
3.2 多選列表框
這種方式允許用戶選擇多個選項,常用于一些需要用戶做出多個選擇的場景,例如定制化需求、標簽選擇等。
從用戶體驗到細節之美:移動端彈窗設計
 
 
3.3 下拉列表框
這種方式將所有選項折疊在一個下拉列表中,用戶可以通過滑動或者點擊來查看并選擇選項。這種設計方式常用于一些需要節省空間或者隱藏復雜選項的場景。
從用戶體驗到細節之美:移動端彈窗設計
 
 
3.4 彈出式列表框
這種方式將選項以彈出式的方式展示在彈窗中,用戶可以通過點擊來查看并選擇選項。這種設計方式常用于一些需要快速選擇的場景,例如快捷菜單、操作菜單等。
從用戶體驗到細節之美:移動端彈窗設計
 
 
另:在移動端彈窗設計中,我們還需關注五個關鍵點:
  1.  
    避免過度使用:過多彈窗會干擾用戶,降低體驗。因此,要審慎使用,確保必要性。
  2.  
    設計簡潔:彈窗內容應精簡,標題與內容需清晰傳達目的。
  3.  
    合理擺放按鈕:確保按鈕易于點擊,數量適中,避免混亂。
  4.  
    保持視覺清晰:色彩、字體等需與整體風格協調,動畫效果需自然。
  5.  
    簡化交互流程:操作步驟需簡單明了,提供明確的反饋。
綜上所述,移動端彈窗設計應注重簡潔的文案、突出核心內容、保持一致性、注重可讀性和適應性。通過關注這些關鍵點,可以打造出高品質的彈窗設計,提升用戶的使用體驗。
 
總結
移動端彈窗設計是一項需要綜合考慮用戶體驗和轉化率的復雜任務。通過明確設計目的、選擇合適類型、注重視覺設計、提供明確操作按鈕、適時出現適度使用以及不斷測試與優化,可以打造出更加優秀、更具吸引力的彈窗設計。這不僅能夠提升用戶的滿意度和忠誠度,還能為應用帶來更多的商業價值。
 


作者:散落的那些
鏈接:https://www.zcool.com.cn/article/ZMTYwNDQ2NA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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

日歷

鏈接

個人資料

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

存檔

主站蜘蛛池模板: 欧美黑人性xxx猛交 欧美黑人一区二区 | 日韩欧美中文在线 | 黄色三极片 | 欧美激情午夜 | 做爰xxxⅹ高潮69网站 | 亚洲人成网站999久久久综合 | 亚洲色无码一区二区三区 | 色欲综合一区二区三区 | 性乌克兰xxxx极品 | a毛片基地| 在线播放少妇奶水过盛 | 又色又爽又高潮免费视频国产 | 六月丁香啪啪 | 蜜臀av无码人妻精品 | 1769国产 | 小sao货水好多真紧h国产 | 双腿张开被9个黑人调教影片 | 欧美精品色视频 | 国产成人免费观看视频 | 天天操天天操天天操 | 麻豆久久久9性大片 | 国产午夜福利在线机视频 | 午夜高潮视频 | 欧美啪啪一区 | 久久久久久久久久久丰满 | 91精品久久天干天天天按摩 | 日韩一级高清 | 久久不见久久见免费影院视频 | 久久午夜福利电影 | 91精品国产综合久久福利软件 | 午夜影院在线观看免费 | 欧美成人免费一区二区三区 | 91精品国产日韩一区二区三区 | 美女的尿囗网站免费 | 国产国一国二wwwwww | 五月狠狠亚洲小说专区 | 君岛美绪在线 | 亚洲视频一区二区三区 | 黄色片在线观看免费 | 91久久免费视频 | 日韩精品中文字幕无码一区 | 一级特级片 | 国产片av国语在线观看 | 久久久久国产一区二区 | 色香蕉在线视频 | 日本老太婆做爰视频 | 日韩福利在线播放 | 欧美偷拍一区二区三区 | 成人无码视频在线观看网址 | 国产精品久久久久久久久久久久人四虎 | 夫の上司に犯波多野结衣853 | 交换配乱淫东北大坑性事视频 | 91香焦视频 | a级免费观看| 999久久久免费看 | 一本一本久久a久久精品综合不卡 | 五月婷婷久久草 | 91精品综合久久久久久五月天 | 性高潮网站 | 久久日本精品字幕区二区 | 成人三级网址 | 欧美一乱一性一交一视频 | 精品黑人一区二区三区久久 | 欧美视频一区二区三区在线观看 | 精品一区视频 | 毛片av中文字幕一区二区 | 国内精品国产三级国产a久久 | 欧美九九视频 | 污污视频在线免费看 | 成人禁污污啪啪入口 | 视频精品久久 | 少妇太爽了在线观看 | 农民人伦一区二区三区 | 黑人黄色一级片 | 喷水视频在线观看 | 日日夜夜精品免费 | 中文字幕1区 | 国模妙妙超大尺度啪啪人体 | 国产精品久久久久7777按摩 | 亚洲成av人片天堂网无码 | 亚洲精品一区二区三区在线观看 | 色综合a怡红院怡红院 | 久久99精品久久久久久不卡 | 免费欧美日韩 | 国产露脸150部国语对白 | 国产午夜福利在线播放 | 91区人人爽人人都喜欢人人都有 | 成人深夜免费视频 | 激情xxx | 亚洲夜色噜噜av在线观看 | 精品国产乱码久久久人妻 | 日本簧片在线观看 | 最新网址av| 97视频人人免费看 | 99久久久国产精品免费蜜臀 | av观看在线观看 | 99性视频 | 91涩漫直接入口 | 无人区码一码二码w358cc | 亚洲国产综合一区 | 日本网站在线 | 三级在线视频 | 久久九九精品国产综合喷水 | 国产又黄又爽又刺激的软件 | 日本三级欧美三级 | 天天色天天搞 | 亚洲欧美色图视频 | 香港三级日本三级a视频 | 欧美另类视频在线 | 久操热| 欧美伦理一区 | 无码人妻品一区二区三区精99 | 九九热免费视频 | 一边吃奶一边做爰爽到爆视频 | 亚洲娇小与黑人巨大交 | 亚洲精品一区二区三区在线观看 | 国产免费黄色 | 玩成熟老熟女视频 | 成人av地址 | 99精品久久久久久久免费看蜜月 | 99久久国产露脸国语对白 | 久久8| www亚洲天堂com | 精品视频九九 | 国产人与zoxxxx另类91 | 亚洲激情中文字幕 | 欧美天天性| 国产成人主播 | 国产精品福利网 | 日韩欧美在线中文字幕 | 51av在线视频 | 天堂а√中文最新版在线 | 国产男女无套免费网站 | 国产一区二区 | 日本xxxx丰满人妖学校 | 一级国产20岁美女毛片 | 手机在线免费看av | www色com| 免费在线色 | 人人综合亚洲无线码另类 | 美女久久精品 | 狠狠色噜噜狠狠狠狠69 | 夜夜导航 | 亚洲一区二区三区无码久久 | 国产美女高潮流白浆视频 | 福利片av | 成人小视频在线观看免费 | 91伊人久久 | 亚洲国产综合在线 | 91精品国产综合久久久久久软件 | 91风间由美一区二区三区四区 | 国产成人欧美一区二区三区 | 日韩免费影视 | 亚洲第一成年人网站 | 黄网视频在线观看 | 欧美精品亚洲精品日韩传电影 | 干干人人| 911国内自产精华 | 伊人中文字幕在线 | 性色欲网站人妻丰满中文久久不卡 | 国产女性无套免费看网站 | 91嫩草精品 | 国产深夜福利 | 男女做爰猛烈叫床爽爽免费网站 | 国产www在线 | 欧美少妇xxx | 日本大片在线播放在线软件功能 | 美女的mm视频网站软件 | 欧美色交 | va在线观看 | 日本人视频69式jzzij | 国产女人第一次做爰毛片 | 三上悠亚日韩精品二区 | 91精品夜夜 | 欧美性区 | 天天干国产| 日韩一区二区三区无码影院 | 91麻豆精品91aⅴ久久久久久 | 国产一区二区三区四区五区六区 | 91日批视频 | 精品无人码麻豆乱码1区2区 | 在线观看色视频 | 果冻传媒一区 | 日本一级二级三级aⅴ网站 日本一级二级三级久久久 日本一级二级视频 | 国产男女猛烈无遮挡免费视频 | 美国美女黄色片 | 婷婷成人丁香五月综合激情 | 欧美激情第五页 | 果冻传媒18禁免费视频 | 欧美三级在线看 | 日本人操比 | 哈利波特3在线观看免费版英文版 | 亚洲国产123 | 巨乳动漫美女 | 精品少妇人妻av无码久久 | 亚洲自拍色 | 国产一区二区在线视频观看 | 香蕉黄色片 | 欧美激情精品久久久久久 | 日韩精品视频三区 | 日本三级黄色中文字幕 | 国产特级毛片aaaaaa | 开心激情五月婷婷 | 国产男女做爰免费网站 | 亚洲va欧美va天堂v国产桃 | 日本爱爱网址 | 欧美日韩亚洲视频 | 好吊日av| 风流老熟女一区二区三区 | 521香蕉网站大香网站 | 国产精品视频一区国模私拍 | 日本成人不卡 | 一本加勒比hezyo综合 | 日韩精品99久久久久久 | 国产精品白浆一区二小说 | 亚洲人 女学生 打屁股 得到 | 欧美三级午夜理伦三级小说 | www.亚洲色图.com | 极品粉嫩国产18尤物 | 最近日韩中文字幕 | 国产精品无码v在线观看 | 国产3p露脸普通话对白 | 免费爱爱视频 | 久久一区国产 | 强行糟蹋人妻hd中文 | 亚洲乱码一区二区 | 久久一本精品 | 曰本不卡视频 | 亚洲高清偷拍一区二区三区 | 国产黑丝啪啪 | 各种含道具高h调教1v1男男 | 欧美日韩一区二区三区在线 | 欧美孕交视频 | 欧美激情一区二区三区在线 | 粉嫩av一区二区三区免费看 | 日日弄天天弄美女bbbb | 青青草午夜| 强奷乱码中文字幕 | 黄色高清无遮挡 | 91久久精品一区二区别 | 亚洲已满18点击进入在线看片 | 国内精品久久久久久久日韩 | 熟睡人妻被讨厌的公侵犯 | 国产免费又爽又色又粗视频 | 99久久精品午夜一区二区小说 | 国产特级视频 | 精品亚洲国产成av人片传媒 | 午夜a爱 | 国产成人精品一区二区仙踪林 | 乌克兰极品少妇ⅴαdeo | 日韩成人在线网站 | 免费无码国产欧美久久18 | 影音先锋在线看片资源 | 君岛美绪在线 | 日本乱码视频 | 国产自啪精品视频网站丝袜 | 欧美成年黄网站色视频 | 六月久久| 亚洲 欧美 视频 | 日本三级中文字幕 | 国产成人久久av977小说 | 亚洲第一视频网 | 国产亚洲精品久久久久丝瓜 | 午夜精品久久久久久久99热 | 在线免费看黄色片 | 青青草视频免费 | 国产911视频| 国产精品视频免费看人鲁 | 久久久久久日产精品 | 免费看成人aa片无码视频吃奶 | 免费视频99| 国产精品日本一区二区在线播放 | 亚洲国产一级 | 日本韩国免费观看 | 福利视频免费观看 | 泽村玲子在线中文字幕 | 一本之道色综合网站 | 亚洲区一区二区三区 | 国产日韩久久久 | 少妇高潮21p | 亚洲人成中文字幕在线观看 | 日本三级吃奶乳视频在线播放 | 99久久久无码国产精品试看 | 天堂资源最新在线 | 91丝袜一区在线观看 | 久久久久成人精品 | 四虎成人精品在永久免费 | 国内精品久久久久影院薰衣草 | 99精品久久99久久久久 | 午夜一二三 | av中文字幕一区二区三区 | 青青青视频免费观看 | 黄频在线免费观看 | 精品久久国产字幕高潮 | 国产精品人八做人人女人a级刘 | 中国亚州女人69内射少妇 | 中文字幕日韩美女 | 欧美一区免费看 | 黄色天堂网 | 日日噜噜夜夜狠狠视频 | 无码h片在线观看网站 | 色网在线免费观看 | 黑桃tv视频一区二区 | 国产aⅴ夜夜欢一区二区三区 | 国产男女猛烈无遮挡免费网站 | 久久无码人妻影院 | 男人添女人下部高潮全视频 | 怡春院欧美 | 688欧美人禽杂交狂配 | 日本免费www | 91官网视频| 97视频免费观看2区 97视频网站 | 国产成人精品综合在线观看 | 成年人晚上看的视频 | av片在线观看 | 国产操视频| 久久99热只有频精品8 | 亚洲精品无amm毛片 亚洲精品无码成人aaa片 | 一级黄色片视频 | 男人全程不遮挡撒尿视频 | 先锋影音男人av资源 | 拔萝卜视频在线观看高清版 | 日韩中文字幕在线不卡 | 欧美一级高潮片 | 欧美黑人孕妇孕交 | 中国老女人内谢69xxxx | 亚洲黄网在线 | 国产japanhdxxxx麻豆 | 国产69熟| 国产一级黄色录像 | 欧美日韩中文字幕一区 | 亚洲人成精品久久久久 | 葵司有码中文字幕二三区 | 日本一级视频 | 国内毛片毛片毛片毛片毛片毛片 | 久久精品伦理 | 蜜桃av一区二区三区 | 看看黄色毛片 | 国产精品免费无遮挡无码永久视频 | 豆花视频18成人入口 | 北条麻妃精品久久中文字幕 | 天堂在线网 | 亚洲成人黄色网 | 日本一区二区三区中文字幕 | 老司机67194精品线观看 | 韩日午夜在线资源一区二区 | 波多野结衣在线观看一区 | 国产成人久久av免费高清蜜臀 | 韩国毛片基地 | 27美女少妇洗澡偷拍 | 亚洲中文字幕av无码区 | 无码人妻丰满熟妇区毛片 | 亚洲伊人成无码综合影院 | 看免费真人视频网站 | 特黄aaaaaaaaa毛片免费视频 | 亚洲人成伊人成综合网小说 | 久久五月天综合 | 18一20岁毛毛片 | 色久天堂| 91国在线| 一区二区三区视频网站 | 亚洲精品视频一二三区 | 足疗店女技师按摩毛片 | www.欧美亚洲 | 高级会所人妻互换94部分 | 嫩草影院入口污在线 | 国产精品久久福利网站 | 国产777777线观看视频 | 午夜少妇影院 | 国产日本欧美在线 | 大地资源中文第三页 | 天天欧美 | 午夜精品久久久久久久99芒果 | 国产欧美一区二区三区国产幕精品 | 丰满少妇一区二区三区 | 久青草影视 | 97干视频| 中国免费看的片 | 成人在线免费播放视频 | 久久久亚洲一区二区三区 | 亚洲精品一区二区 | 成人做爰100部片免费下载 | 99精品热| 天天干夜夜做 | 亚洲免费影视 | 国产日韩欧美在线观看 | 天天噜夜夜噜 | 日韩超碰在线 | av午夜精品 | 少妇高潮交换91 | 久久婷婷五月综合色一区二区 | 巨大荫蒂视频欧美大片 | 精品久久久网站 | 激情偷乱人伦小说视频在线 | 欧美日本成人 | 丰满人妻在公车被猛烈进入电影 | 欧洲男女做爰免费视频 | 亚洲爱爱片 | 中文字字幕人妻中文 | h黄动漫日本www免费视频网站 | 精品国产乱子伦 | 国产日韩欧美精品 | 欧美在线brazzers免费视频 | 午夜偷拍视频 | 一级性视频 | 美女视频黄频a免费 | 美国黄色毛片一级 | 中文字幕一区二区三区精品 | 美女视频黄频大全免费 | 一本加勒比波多野结衣 | 国产精品一二区在线观看 | 国产看真人毛片爱做a片 | 五码亚洲| wwwxx国产| 国产真实乱全部视频 | 精品一区二区ww | 亚洲视频网| 9999国产精品欧美久久久久久 | 手机在线精品视频 | 裸体一区二区三区 | 女同舌吻互慰一区二区 | 熟妇人妻系列aⅴ无码专区友真希 | 久久天天躁夜夜躁狠狠85麻豆 | 欧美日韩久久久久久 | 日本大乳高潮视频在线观看 | 国产成人精品999 | 成人毛片视频在线播放 | 丁香五月亚洲综合在线 | 一区二区久久精品66国产精品 | 极品嫩模高潮叫床 | 日本三级欧美三级人妇视频黑白配 | 在线观看亚洲专区 | 99久久国产精 | 在线免费精品 | 亚洲精品久久一区二区三区777 | 日本真人做爰免费视频120秒 | 国产午夜亚洲精品午夜鲁丝片 | 国产精品精品久久久 | 亚洲最大综合网 | 18禁裸乳无遮挡自慰免费动漫 | 一级国产精品一级国产精品片 | 最新天堂资源在线 | 亚洲娇小业余黑人巨大汇总 | 日韩欧美高清一区 | 91精品国自产拍天天拍 | 浪潮av网站 | 久综合| 欧美一区二区三区免费播放视频了 | 日本一区二区三区在线播放 | 国产性受xxxx白人性爽 | 免费黄色一级视频 | 国产网红女主播精品视频 | 欧美日韩xxxx | 少妇大叫太大太爽受不了 | 中文字幕一区二区三区四区欧美 | 性欧美视频一区二区三区 | 国产婷婷精品任我爽欧美 | 亚洲精品网站在线观看 | 一级肉体全黄毛片 | 国产成人a人亚洲精品无码 国产男女猛烈无遮挡免费网站 | 成人高清视频在线 | 日韩在线影院 | 日本19禁啪啪无遮挡网站 | 亚洲精品无圣光一区二区 | 三男一女吃奶添下面视频 | 久久亚洲日韩精品一区二区三区 | 国产精品久久久久久一区二区 | 国产亚洲精品久久久久久无几年桃 | 欧美人与动牲交a精品 | 亚洲熟女乱色一区二区三区 | 热の综合热の国产热の潮在线 | 男人一边吃奶一边做爰网站 | 国产精品毛片一区 | 国产美女在线一区 | 国产一区二区三区免费观看网站上 | 一个人看的视频在线观看www | 天堂中文最新版在线官网在线 | 久久精品无码一区二区三区免费 | 四虎影视永久在线精品 | 一区二区免费视频 | 久久九九精品 | 欧美日韩中文一区 | 欧美成人精品一区二区三区 | 91视频毛片 | 成人动漫视频 | 精品国产第一国产综合精品 | 宅男噜噜噜666在线观看 | 亚洲av毛片基地 | 日韩欧美一区二区三区四区五区 | 亚洲精品一区二区不卡 | 小蜜蜂www视频在线观看高清 | www.色日本 | 美女网站在线永久免费观看 | 九色福利 | 在线视频精品免费 | 99精品欧美一区二区三区综合在线 | 精品免费视频一区二区 | 国产精品二区三区 | 日韩黄色片网站 | 日本三级韩国三级三级a级中文 | 欧美色图19p| 91av九色 | 成年人免费毛片 | 91精品在线国产 | 亚洲第一色在线 | 亚洲天堂小说 | 国产小视频在线免费观看 | 日韩精品内射视频免费观看 | 欧美福利社 | 久久99精品久久久久久噜噜 | 欧美性色黄大片www喷水 | 4虎tv| 国产熟妇搡bbbb搡bbbb搡 | 五月天精品一区二区三区 | 亚洲一区二区在线播放 | 欧美午夜精品久久久久久浪潮 | 久久中文字幕免费视频 | 五月色吧 | 成人免费影视网站 | 懂色一区二区三区av片 | 色婷婷av久久久久久久 | 日本美女视频一区 | 亚洲裸男自慰gv网站 | 国产精品乱码一区二区三区 | 国产精品伦一区二区三区在线观看 | 欧美综合国产精品久久丁香 | 51国偷自产一区二区三区的来源 | 性做久久久久久久久 | 激情按摩系列片aaaa | 国产原创一区 | 国产精品99久久久久久宅男 | 亚洲精品久久久久中文字幕m男 | 一区二区三区四区不卡 | 精品久久久久久久免费人妻 | 人妻系列无码专区久久五月天 | 国产精品爽爽久久久久久蜜臀 | 国产91打白嫩光屁屁网站 | 久久人网| 国产偷国产偷亚洲高清人白洁 | 国产成人综合久久精品免费 | 亚洲国产mv| 国产欧美日韩va另类在线播放 | 欧美极品jizzhd欧美仙踪林 | 少妇乱淫36部 | 日韩黄网站| 日本精品久久久久中文字幕 | 国产精品调教 | 久久99国产精品久久99果冻传媒新版本 | 99久久精品国产片果冻的功能特点 | 精品国产鲁一鲁一区二区三区 | 麻豆免费观看视频 | 久久黄色网| 久久久国产99久久国产久灭火器 | 国产99精品 | 久久久久九九 | 欧美性网站 | 免费看黄片毛片 | 国产精品人妻 | 长河落日电视连续剧免费观看 | 国产97人人超碰caoprom亮点 | 国产免费自拍 | 欧日韩在线 | 国模av | 美女视频黄a视频免费全程软件axs | 中文字幕一区二区三区四区 | 国产福利在线视频观看 | 女厕偷窥一区二区三区 | 成人国内精品久久久久一区 | 日韩不卡毛片 | 国产一区二区三区四区五区加勒比 | 亚洲视频91| 成年人色片 | 中文字幕专区 | 国内精品国产三级国产a久久 | 中文字幕丰满子伦 | 国产片性视频免费播放 | 综合天堂av久久久久久久 | 国产欧美日韩高清 | 免费无毒永久av网站 | 热久久这里只有精品 | 久久综合给合久久狠狠狠97色69 | 一本本月无码- | 最新在线视频 | 欧美日韩国产二区 | 99热最新在线 | 男女视频一区二区三区 | 免费观看又色又爽又黄的韩国 | 日本激情一区 | 成人国产精品齐天大性 | 欧美野外猛男的大粗鳮台湾同胞 | 国产成人啪精品视频免费网 | 精品视频91| 日本japanese极品少妇 | 欧美精品成人a区在线观看 欧美精品成人久久 | 欧美性一区二区 | 黄瓜视频在线观看网址 | 国产91在线高潮白浆在线观看 | 欧美人动与zoxxxx乱 | 中文字幕av一区二区三区高 | 男人久久久 | 四虎国产精品免费观看视频优播 | 日韩三级在线播放 | 久久99精品久久久久婷婷 | 精品国产欧美一区二区三区不卡 | 四虎视频国产精品免费 | 性裸体bbwbbwbbwbbw | 麻豆色淫网站av水蜜桃三级 | av人摸人人人澡人人超碰妓女 | 国产乱xxxxx987国语对白 | www狠狠| 日日夜夜中文字幕 | 国产精品一二三区成毛片视频 | 无码人妻丰满熟妇精品区 | 污夜影院 | 全黄性性激高免费视频 |