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

首頁

教你一文讀懂圖標設計

杰睿

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

大廠設計總監一直在用的banner設計法則

藍藍設計的小編

本文將從對當下常見banner的設計規則等進行剖析,并融入自己的思考和總結,著重從用戶的角度去思考一張banner廣告的設計規律。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



作者:YTY的雜糧設計鋪
鏈接:https://www.zcool.com.cn/article/ZMTQ1NDU2OA==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

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

關于產品「趣味性設計」的一次深度探索

藍藍設計的小編

你一定也發現了,在這個時代下只要處在同一賽道的產品,大多數免不了日趨同質化,不論是功能還是形式、內容還是算法。就拿內容型產品來舉例:去掉顏色,以下四個產品的首頁,你能分得清誰是誰嗎?

 

 

 

 

雖然可以做品牌差異化,但很多產品在招牌打響前,也會經歷相當漫長的一段成長期。而在大家都卷的分不清誰是誰的時候,通過趣味性來建立情感鏈接倒是一個獨辟蹊徑的狠招。

 

之前在團隊有幸負責過一次產品趣味性的探索,雖未全部落地,但沉淀了不少經驗。今天,我將這些經驗以文章的方式分享給你,希望對你有所啟發。

 

 

 

為什么產品需要趣味性

 


1.符合本能需求

馬斯洛的“需求層次理論”(Hierarchy of Needs)你一定聽過。這個理論提出人類的需求狀態是持續不斷的,一段時間內,個人的動機或許可以獲得暫時性的滿足。但從人的成長角度來看,人類的需求永遠不會止步于一個階段。類似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后,自然會需要情感的滿足。

 

尤其現在這個相對嚴峻、內卷成風的時代下,大家都渴望在上了一天班之后,自己用的產品可以給自己解壓,而不只是個單純的冷血工具。

 

 

 

 

 

 

 

2.影響用戶行為

 

產品傳達趣味性的信息,那么這些信息便更容易被用戶接受、甚至激發興趣。正如用戶關系和精準化運營的先驅——史蒂文·貝萊格姆的那句話:“趣味是設計產品中最人類化,最直接,最能引起人們興趣的因素。”

 

根據艾達模型這個經典理論,一旦用戶對某件事產生興趣后,則更容易促成他的決策、乃至最后行為的發生。畢竟我們絕大多數的決策并非源自理性。

 

 

 

 

 

另外,《瘋傳》這本書提及過一個重要的概念:情緒喚醒。當情緒喚醒度較高時,往往會更容易激發用戶的分享行為(比如愉悅、驚喜這樣的正面情緒,當然也會包括憤怒、恐懼這樣的負面情緒)。而產品所呈現的趣味性,很大程度上更容易引發用戶的高喚醒情緒,從而主動采取一些產品希望他實施的行為。

 

 

 

3.緩解負面情緒

 

使用一款產品的過程中,必然會出現不夠正向的反饋,比如404、斷網、填寫格式錯誤、輸入隱私信息等等。一旦超出了用戶的容忍能力,很容易造成行為中斷甚至流失。

 

但此時如果通過一種趣味性的方式呈現,很大程度上可以緩解用戶的負面情緒。

 

比如readme的登錄頁面,當你輸入密碼時,貓頭鷹捂住雙眼,很好得緩解了用戶的不安全感。再比如餓了么,惡劣天氣下會實時記錄當前的天氣狀態,通過同理心的觸發也可以緩解用戶等待時產生的焦慮。

 

 

 

 

 

 

 

4.實現情感鏈接

 

對應諾曼在《情感化設計》中的「反思層」,通過品牌差異、獨有內涵等方式來喚起用戶深層的記憶和情感,產生情感共鳴,從而形成認知,建立起深厚的情感鏈接,以讓用戶越來越忠實于產品。此時產品作用更多的是作為一個承擔情感的載體。

 

我們旅游時經常會購買一些貌似沒什么實用性的紀念品,明信片、木雕、徽章等等,可能最多只能放在房間當裝飾。但是紀念品的關鍵意義,在于承載著旅游時的記憶。類似的還有單機游戲發售時,除了標準版外,往往會同步發售包含手辦、美術設定集等物品的豪華版,同樣用來承載玩家的情懷。

 

最典型的例子,就是Google的Doodle設計,在不同的節日、紀念日、或者緬懷一些先驅、藝術家時,會投入很高的成本起設計各種趣味性的插畫logo,豐富有趣,而且很多時候可以支持互動游戲。比如18年的萬圣節,就做了一個有趣的多人對戰的小游戲。

 

 

 

 

Doodle不僅是Google文化、價值觀的象征,也通過這種趣味性的創意讓用戶實現更深層次的情感交流,建立情感紐帶并增加粘性,不會輕易得流失到其他替代品中。

 

 

 

趣味性是什么

關于這個概念,有三條相對客觀專業的說法。

 

德國古典哲學創始人康德《實用人類學》中,指出趣味性是人類由于受到外部環境的影響而對客觀事物產生的直接的感性反應,不具有普遍性和必然性。通俗來講是人們對身邊的事物感到新奇、有趣、有意思,從而心理產生愉悅的變化。

 

另外,康德在《判斷力批判》也指出,趣味是指主體以積極主動的姿態,在超功利的層次上對某一對象表現出喜愛和愉悅的情緒狀態。

 

《漢語詞典》將趣味釋義為:使人感到愉快,能引起興趣的特性。

 

看似各不相同,但根據這三個概念提煉下,可以發現他們都是在融入一種正向的情緒加以解釋。

 

那么,趣味性背后的情緒到底是什么?

 

 

 

趣味性背后的情緒


情緒這東西千變萬化,為了避免主觀臆斷的不準確,我搜羅了關于情緒的研究資料,目前相對權威的有三個:plutchik情緒輪、日本感性工學、諾曼的三層理論。

 

后兩者未對情緒進行指標的定義,所以這里只聚焦在情緒輪上。

 

情緒輪由羅伯特·普洛特契克開創,這個理論指出人類的基本情緒一共由8種,生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負面情緒,能夠符合趣味性帶來的情緒基本就三種:愉悅、期待和意外。

 

 

 

 

 

為了為產品所用,就需要提煉出更具象的特征。下面,我通過腦暴的方式對每類情緒進行發散聯想。

 

 

 

關于愉悅感

 

聯想了大量可以引發愉悅情緒的事物,比如可愛的貓貓、各類好玩的表情包、毛絨玩具、影視作品里那些會突然說話的動物、解壓神器等等。

 

我發現這些事物,一般具備了以下特征:

 

1.會給予我們即時反饋;

 

2.擬人化,比如帶有人類才有的表情,或者是人類的動作語言;

 

3.柔軟的、毛茸茸的、圓潤的、有溫度的;

 

4.會動的、解壓的

 

 

 

 

 

 

 

關于期待感

 

聯想了大量可以引發期待情緒的事物,比如被買爆的泡泡瑪特盲盒,商家售賣的福袋,各種諸如擲骰子、老虎機的隨機性游戲,各類抽獎活動,一些游戲開局roll屬性點的環節(比如金2、河洛等游戲,當年玩的時候我驚訝得發現我居然能roll上一整天)

 

這些事物大致會帶有這些特征:

 

1.未知的、神秘的;

 

2.滿足人類的好奇心的;

 

3.對結果能滿懷希望的;

 

4.隨機的正向獎賞;

 

5.只需要一步簡單到發指的操作(打開容器、拉動拉桿、點擊按鈕等等),不需要任何的行動門檻,也沒有等待時間

 

 

 

 

 

 

 

關于驚喜感

 

比如《設計中的設計》這本書中提到的出入境的印章案例、一蘭拉面碗底的細節、電影或者游戲中突然出現的彩蛋、iPhone第一代的發布現場、突然發現的世外桃源、突襲的生日驚喜等等。

 

這些事物大致會帶有這些特征:

 

1.超出原有預期的;

 

2.未提前告知的;

 

3.正向結果的;

 

4.產生共鳴的

 

 

 

 

 

 

那么,這些特征又該如何更具象得落地成策略,產品中又是如何利用這些策略,引導用戶產生這些情緒的呢?

 

下面,我將基于這三類維度,并結合大量的大廠案例來為一步步你抽絲剝繭。

 

 

 

 

如何制造愉悅感

 

 

1.關于擬人化

 

基于上面的挖掘,我發現能引發愉悅感的一個明顯特征,就是擬人化,這個非常有意思。

 

克利福德·納斯在《the man who lied to his laptop》這本書中提出過一個觀點:人們對待電腦的方式,與我們在與他人交流時使用的社會規范是一致的。我們對電腦的反應,就好像它們是人類一樣。

 

 

 

 

 

 

也正因此,很多原本沒有生命體征的物體,一旦被賦予了擬人形象,就容易被大家所接納、引發愉悅。

 

做一下細分的話,擬人化基本涵蓋了三個方面:語言、形象和表情。

 

 

 

 

 

 

 

1.1擬人化的語言

 

人對于具體的擬人形象更容易產生情感,其中便包含擬人化的口吻。使用這種口吻與用戶交流,而非冷冰冰的設備語言,就可以提升產品溫度,引導用戶對產品產生正向情感,關于這塊我總結了兩方面。

 

一方面,文案盡量得接地氣、輕松。

 

拿京東這款產品舉例,文案從口吻上都會采用一種很輕松、接地氣的擬人語氣,來拉近和用戶間的距離。比如在引導詞后加入“哦~”“~”這種輕松的語氣詞。

 

另外,「京東問答」版塊的引導詞:傳統產品是“添加問答”,是不是平平無奇。但京東使用了“我來助你一臂之力~”

 

 

 

 

 

 

 

QQ瀏覽器的評論暗提示,也不是傳統的“寫評論”“輸入評論”,而是像日常聊天那樣“我來說兩句”,非常接地氣、生活化。知乎直接套用了流行語,詼諧的同時引導用戶注意言論。

 

 

 

 

 

 

另一方面,人類富有情緒變化,所以一旦用戶觸發了某個正面/負面行為,就可以給與情緒反饋。

 

在用戶完成商品評價后,京東不僅僅是很傳統得反饋“評價成功”,而是又加入了“感謝您!”的感謝詞。看似加了三個字,但行動過后的正向感激反饋,和我們日常生活中受到正向反饋一樣,被喚起正向的愉悅情緒。并愿意繼續這個行為。

 

知乎的圈子業務,在用戶完成簽到后,反饋完成的基礎上,使用了正向的情感反饋“ 我就知道你會再來看我”,仿佛是一位關系不錯的老朋友,來喚起用戶正向情緒。

 

另外,知乎在改版后,回答收到贊也不僅僅是“點贊成功”這類冷冰冰的機器語言,而是“已收到你的喜歡,謝謝!”并且配以作者頭像,非常形象得傳出對對方對我們的感謝反饋。這種正向反饋,相比”點贊成功“更有效得喚起正向情緒,形成正向激勵。

 

 

 

 

當然,用戶的消極行為也可以產生情緒反饋。

 

比如現在很多產品的取關反饋,不是傳統的“確認”“取消”,而是用“殘忍取關”和“給個機會”這種融入情感的文案來做挽留,就好像真的有個活生生的人,在被你否定后反饋給你的情緒,請求你再給個機會。有趣的同時一定程度上也可以喚醒用戶的同情。(雖然這種做法過于業務導向,且有綁架用戶的嫌疑)

 

 

 

 

 

1.2擬人化的形象

 

人對于具體的擬人形象更容易產生情感。因此,樹立一個擬人化的品牌形象(也就是我們常說的IP),可以使用戶對產品快速建立情感聯系,也可以強化品牌感知。比如優酷的猴子、高德地圖的老鷹、釘釘的燕子、linefriends等等。

 

 

 

 

 

 

世界杯的吉祥物也是同理,每一屆的吉祥物必定會融入擬人化的特征,憑著親切、可愛的形象和全世界的觀眾一起熱情互動。

 

 

 

 

 

說到產品,以京東的這只狗子為例,兜底頁、缺省頁、啟動頁,都做了狗這個擬人形象的貫穿。

 

 

 

 

 

 

如果你記得沒錯的話,形象改版之前這只狗還是四腳坐地上的,但改版后就兩腳著地了。這同樣是通過更擬人的形象來賦予「人格」,以此提升愉悅感,拉近距離。

 

 

 

 

 

 

再比如夸克,它甚至單獨新增了底tab入口,通過3d品牌形象,實現與用戶的智能交流。另外,卡片和語音搜索都做了形象貫穿,后者還使用了形象的眼睛,來通過眼睛的變化進行情感交流。

 

 

 

 

 

 

 

1.3擬人化的表情

 

一段文字在加入了表情后,我們就能迅速了解到對方的情緒(比如我們日常的聊天)。因此表情這一招,也可以用以加深用戶與產品的情感交流。

 

它可以和語音、形象靈活結合使用。通過全面的擬人化,來大幅提升用戶對產品的形象感知,促進用戶情感的產生、加深用戶和產品的情感鏈接。

 

比如用語言輸入,當系統未識別清楚時,傳統的方案可能是一個錯誤圖標加上「未識別聲音,請再試一遍」的文案,但夸克中則使用了品牌形象的雙眼來傳達失落的表情,并結合了擬人化的語言。

 

同樣做法的還有百度的未開麥提示、段子頭圖,快速傳達產品的情緒,和用戶情感交流。

 

 

 

 

 

 

另外,閑魚設置昵稱時,正在輸入時、以及超出了限定字數,右側的形象表情也會發生變化。

 

 

 

 

 

 

除了擬人化能引發愉悅外,還有一個很容易被忽略的要素同樣能起到作用——動畫反饋。

 

 

 

2.動畫反饋

 

提起動畫的作用,我們更多人首先想到的可能是強引導、注意力吸引,但動畫同樣能觸發用戶愉悅。比如當動畫更加貼近現實,或者結合擬人化的特征時。

 

 

2.1貼近現實

 

最典型的例子,就是蘋果appstore從卡片到詳情頁的轉場過渡,點按的預備動作、卡片的放大展開、緩出的曲線、轉場完成的慣性等等,都很貼近現實物理世界的運動規律。而這種自然的絲滑也更能引發用戶的愉悅。

 

 

 

 

 

 

2.2結合擬人化

 

比如知乎的加載動畫,結合了擬人化的特征,讓這個過程變得格外有趣。劉看山奮筆疾書的動作也很符合知乎這款產品的定位。

 

 

 

 

 

如何制造期待感

 

 

隨機給與內容

 

根據我們對期待感的腦暴,發現能觸發這種情緒最典型的特征,就是隨機性。

 

在產品中,則可以通過隨機給予用戶有價值的內容來引發用戶的關注。結果的不確定使過程充滿神秘,這種狀態讓用戶興奮和滿懷期待,不會輕易離開。

 

比如網易新聞在進行新聞加載的操作時,會在加載動畫上加入一個隨機的小貼士。內容大致有三類:黃歷、名言和一句話新聞。而且這些內容完全是隨機出現,這種刷新過程好像在開盲盒,你無法預知會給你什么內容,非常有趣。而且它們入口深,不干擾;內容對用戶也具有價值。

 

 

 

 

 

同樣的還有丁香醫生。在首頁每次下來刷新后,都會出現不一樣的健康類的小貼士。隨機性很強,富有趣味。而且可以很好得滿足求知欲。

 

 

 

 

 

雪球的個人頁上,上劃時也會隨機給一條關于投資、市場的名言和網友的熱門觀點。

 

 

 

 

 

 

 

 

隨機性游戲

 

 

把現實生活中的游戲搬到了手機,同樣能激發用戶的好奇和期待。比如微信讀書的翻牌子、搖一搖、老虎機。還有天貓的翻牌子。

 

 

 

 

 

 

 

如何制造驚喜感

 

 

格雷戈里·伯恩斯曾做個關于腦部區域的研究,發現大腦不僅探尋未知,而且實際上還渴望未知。相比那些已知的日常慣例,新鮮新穎的事物更容易引人注意。所以提供一些以往沒有過的、出乎意料的事物或互動,不但能引起注意力,而且也會帶來驚喜感。

 

 

 

 

 

產品中的驚喜感設計,可以說是使用瞬間能夠觸達我們內心的一種短暫性愉悅,一個體驗的峰值。

 

根據對驚喜感的挖掘,一個典型的特征就是超出預期,并且未提前預料。

 

比如Figma使用過程中,團隊成員和你同時長按鼠標,并且靠在一起后,就可與觸發擊掌的動畫彩蛋,非常有意思。

 

 

 

 

 

 

比如京東在五星好評后,會放煙花慶祝。

 

 

 

 

 

 

比如很多內容型產品,在詳情頁長按點贊按鈕后,會觸發全屏的「爆贊」動畫。

 

 

 

 

 

 

再比如用戶生日當天,通過啟動頁、彈窗等場景送上生日祝福等等。

 

 

 

 

 

這些能夠超出用戶預期的細節,即便多么細枝末節、出現頻率多低,但只要能夠被觸發,都可能因為驚喜感而生成情緒峰值,加深用戶和產品的情感鏈接。

 

 

 

 

最后

 

以上,便是趣味性背后的情緒挖掘和案例講解。

 

作為設計師,我們在工作中總是強調以用戶為中心,通過不斷的調研、跟訪、可用性測試來了解、分類用戶,但更多的結果可能只是讓產品不斷得貼合用戶的心智、符合預期。但如何增加粘度、建立深層鏈接,就需要通過趣味性這種情感化表達方式,來為用戶制造愉悅、期待甚至驚喜。

 

正像諾曼在「情感與設計」中說的那樣,每個產品都需要令人更放松、更愉悅的設計,以此來增強產品的適用性。

 

希望這篇文章能對你有所啟發。



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

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

日歷

鏈接

個人資料

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

存檔

主站蜘蛛池模板: 人妻在厨房被色诱 中文字幕 | 天天躁日日躁狠狠躁免费麻豆 | 欧美大片在线观看免费视频 | 久久久久久久久久亚洲 | 激情婷婷六月 | 夜夜嗨av一区二区三区网页 | 男女猛烈无遮挡免费视频 | 天堂在线www| 成人做爰www免费看视频网站 | 久国产| 日本成人一二三区 | 97性视频 | 亚洲国产成人精品无码区99 | 日本免费在线看 | 国产欧美另类久久久精品图片 | 国产一级淫片a直接免费看 国产一级淫片免费放大片 国产一级影院 | 超碰97干 | 久久国产夫妻 | 一本色道久久综合狠狠躁 | 天天干天天拍 | 久热国产区二三四 | 欧美另类极品videosbes | 看全色黄大色黄大片大学生图片 | 日韩精品无玛区免费专区又长又大 | 亚洲国产专区 | 无码精品一区二区三区在线 | 日韩黄色av网站 | 91亚洲精品久久久蜜桃网站 | 国产精品一区av | 亚洲精品国产电影 | 中文人妻无码一区二区三区 | 色综合激情| 日韩视频一区二区三区在线观看 | 日本成a人片在线播放 | 国产精品无 | 国产精品日韩欧美一区二区 | 成人看黄色s一级大片 | 天堂资源中文在线 | 日韩a毛片 | 波多野结衣家庭主妇 | 精品中文字幕av | 国偷自产中文字幕亚洲手机在线 | 久久国产热| 成人毛片免费网站 | 又湿又紧又大又爽a视频国产 | jzzijzzij亚洲成熟少妇18 jzzijzzij亚洲农村妇女 | 松岛枫av在线一区二区 | 97精品在线 | 亚欧美在线观看 | www.亚洲色图.com | 在线观看a视频 | 最新国产拍偷乱偷精品 | 国产一区二区三区四区五区vm | 青草国产精品久久久久久 | 亚洲成a人v欧美综合天堂 | 91精品久久久久久久久久 | 99视屏| 欧美色图片区 | 国产超级av | 夜夜免费视频 | 国产娇喘精品一区二区三区图片 | 国产无套粉嫩白浆内的人物介绍 | 亚洲a在线视频 | 一本色道久久综合亚洲精品酒店 | 午夜精品国产精品大乳美女 | 精品一区二区三区在线视频 | 全部免费毛片在线播放一个 | 人妻有码中文字幕 | 无毒的av网站 | 欧美激情综合色综合啪啪五月 | 午夜免费片 | 欧美国产精品一区 | 精品国产乱码久久久人妻 | 99在线视频播放 | 人妻丰满熟妇av无码区app | 亚洲成a人片在线观看久 | 国产av麻豆mag剧集 | 色哟哟哟www精品视频观看软件 | 亚洲精品午夜aaa久久久 | 国精产品一区一区三区有限公司杨 | 丰满少妇弄高潮了www | 亚洲日韩中文字幕在线播放 | 久草在线免费资源 | 开心激情综合 | 亚洲高清精品视频 | 欧美亚洲二区 | 中国少妇做爰全过程毛片 | 欧美黄色一级片视频 | 大奶子在线 | 国产大片中文字幕 | 手机在线成人av | 中文字幕av无码一区二区三区 | 成人无遮挡裸免费视频在线观看 | 国产综合久久 | 欧美激情a∨在线视频播放 少妇人妻无码专区视频 | 欧美性猛交ⅹxxx乱大交3 | 国产ts人妖调教重口男 | 亚洲欧美动漫 | 日本少妇吞精囗交 | 久久久精品国产sm最大网站 | 国产又粗又硬又黄的视频 | 免费看特级毛片 | 美女无遮挡免费视频网站 | 18性夜影院午夜寂寞影院免费 | 男女无遮挡激情视频 | 日本道中文字幕 | 国产性网| 久草在线青青草 | 国产精品免费网站 | 亚洲第一福利视频 | 午夜剧场成人 | 亚洲精品网站在线观看你懂的 | 日本欧美色图 | 鲁大师影院在线观看 | 色午夜一av男人的天堂 | 国产小视频自拍 | 精品久久久久久无码免费 | yw.139尤物在线精品视频 | 国产精品对白刺激久久久 | 爱的色放在线 | 中文字幕永久免费视频 | 亚洲国产精品久久久久秋霞蜜臀 | 日韩精品人妻系列无码专区免费 | 手机av在线播放 | 玩弄japan白嫩少妇hd小说 | 成人免费午夜视频69影院 | 亚欧在线高清专区 | 裸体性做爰免费视频网站 | 亚洲欧美中文字幕在线一区 | 久久久久亚洲精品 | 亚洲国产精品人人做人人爱 | 深爱婷婷| 成人国产一区二区 | 中文字幕在线观看视频一区 | 女主播户外勾搭啪啪 | 亚洲天堂区 | 天天干夜夜玩 | 国产愉拍| 五月激情小说 | 久久亚洲精品ab无码播放 | 在线免费观看a视频 | 热久久久久久久 | 久久久www成人免费精品 | 色爱av | 素人在线观看免费视频 | 天天天天躁天天爱天天碰2018 | 毛片一级免费 | 自拍日韩亚洲一区在线 | √新版天堂资源在线资源 | 欧美精品偷自拍另类在线观看 | 性色av无码免费一区二区三区 | 免费国产在线精品一区二区三区 | 嫩草影院av| 中国女人内谢69xxxx喜欢你 | 影音先锋在线看片资源 | 国精产品一区一区三区有限在线 | 青青啪啪 | 亚洲天码中字 | 日本三级一区 | 亚洲爆乳无码精品aaa片蜜桃 | 天堂中文在线8最新版精品版软件 | brazzers欧美一区二区 | 亚洲一区二区在线播放 | 亚洲精品一区国产精品 | 丰满少妇被猛烈进入 | 拔擦拔擦8x海外华人永久 | 欧美日韩亚洲综合 | 国产一区二区三区四区五区美女 | 亚欧日韩在线 | 欧美深性狂猛ⅹxxx深喉 | 免费看的av| 少妇特殊按摩高潮惨叫无码 | 精品在线观看视频 | 国产免费网址 | www.久久爱| 国产精品亚洲第一 | 青青操在线 | 亚洲 欧美 中文 在线 视频 | 刘亦菲毛片一区二区三区 | 女邻居的大乳中文字幕 | 久久黄网 | 一级在线视频 | 杨幂一区二区三区免费看视频 | 久久婷婷五月综合97色 | 毛片福利视频 | 国产aⅴ激情无码久久久无码 | 国产一区亚洲二区 | 亚洲国产精品视频在线观看 | 国产在线播放av | 欧美精品久久久久久久监狱 | 欧美性生交xxxxx久久久 | 啪啪网页 | 国产在线精品一区二区在线看 | 日韩国产免费 | 精品国产一区二区三区久久狼 | 欧美日韩亚洲天堂 | 青青色在线观看 | av在线短片| 日韩播放| 亚洲久久久久久 | 精品黄色片 | 色综合天天综合网国产 | 无尺码精品产品网站 | 人人做人人爽人人爱 | 伊人久久精品久久亚洲一区 | 人妻无码久久一区二区三区免费 | 51国偷自产一区二区三区的 | 高潮又爽又无遮挡又免费 | 色吊丝中文字幕 | 日韩精品在线网站 | 亚洲性免费 | 九色porny丨首页入口在线 | 小早川怜子xxxxaⅴ在线 | 欧美另类亚洲 | 五月婷婷丁香六月 | 成年女人黄小视频 | 人与善交xuanwen3d | a√视频在线 | 国产精品丝袜一区二区 | 日韩午夜性春猛交xxxx | 自拍亚洲欧美 | 狠狠激情| 日本熟妇色一本在线视频 | 羞羞软件| 朋友的姐姐2在线观看 | 美女屁股眼视频免费 | www在线播放 | 日产一二三四五六七区麻豆 | 色妹av | 国内黄色网址 | 日本高清一区免费中文视频 | 2018av天堂在线视频精品观看 | 久久一区av | 国产精品国产a级 | 久久成人欧美 | 国产精品一区二区久久乐下载 | 综合精品欧美日韩国产在线 | 国产精品久久免费视频 | 性无码专区无码 | 日韩精品一区二区三区免费视频 | 亚洲人成网线在线播放 | 久久精品视频久久 | 久久久久久亚洲精品中文字幕 | 国产精品久久久久久久久晋中 | 香蕉视频在线观看网站 | 免费一级片在线观看 | 国产精品国产三级国产aⅴ下载 | 男人女人黄 色视频免费 | 国产视频不卡 | 亚色视频| 亚洲人成77777在线播放网站 | 国产成人+综合亚洲+天堂 | 日韩中文字幕视频在线观看 | 日韩av在线一区 | 麻豆天美传媒毛片av88 | 日韩在线中文字幕视频 | 亚洲国产成人一区二区精品区 | 精品无码国产自产拍在线观看蜜 | 六月综合激情 | 小sao货水好多真紧h无码视频 | 日韩另类在线 | 6080福利 | 亚洲自拍偷拍视频 | 在线一区二区三区在线一区 | 97成人在线| 日韩欧美手机在线 | 亚洲日产韩国一二三四区 | 亚洲久色影视 | 一级黄片毛片 | 日韩精品一区二区中文字幕 | 亚洲综合免费 | 日日摸夜夜添夜夜添欧美毛片小说 | 国产在线观看码高清视频 | 亚洲乱码少妇 | 在线mm视频| 麻豆文化传媒精品一区观看 | 日韩91视频 | 啪啪五月天 | 天天躁恨躁夜躁2020优势对比 | 男人天堂v| 天天干精品 | 国产日产欧洲无码视频 | 一区二区中文字幕 | 91精品国自产 | 欧美大片网址 | 国产免费视频传媒 | aaaaa级毛片 aaaaa女高潮免费视频 | 欧美在线观看不卡 | 在线播放无码高潮的视频 | 欧美激情在线狂野欧美精品 | 野狼第一精品社区 | 欧美成人午夜剧场 | 国产精品日韩 | 精品视频麻豆入口 | 蜜臀av免费一区二区三区久久乐 | 色视频免费看 | 婷婷四月开心色房播播网 | 黄色片网站国产 | 超碰97自拍 | 黑丝久久 | 精品欧美黑人一区二区三区 | 久久网中文字幕 | 日韩免费观看视频 | 亚洲色图视频在线观看 | 久久精品国产v日韩v亚洲 | 91视频网址 | 国内精品久久久久伊人aⅴ 国内精品毛片 | 国语对白永久免费 | 精品国产一区二区三区久久久狼 | 色秀视频在线观看 | 一级黄色性感片 | 国内精品久久久久久无码不卡 | 亚洲爆乳无码专区 | 国产亚洲真人做受在线观看 | 青青国产在线观看 | 国产呻吟对白刺激无套视频在线 | av在线观| 成人毛片18女人毛片免费 | 热久久影院 | 亚洲精品第一区二区三区 | www国产亚洲精品久久麻豆 | а√资源新版在线天堂 | 亚洲一区二区三区免费视频 | 欧美一级日韩一级 | 中文在线中文资源 | 亚洲成a人片在线观看无码专区 | 香蕉色视频| 国产黄色三级网站 | 爆乳2把你榨干哦ova在线观看 | 成人日批视频 | 国产一区二区三区免费播放 | 免费国产a | 国产精品老牛影院99av | 人人妻人人添人人爽欧美一区 | 成人免费久久 | 亚洲一区欧美 | 国产乱了真实在线观看 | 午夜av片| 久久好在线视频 | 男女视频一区二区三区 | 浪潮av激情高潮国产精品香港 | 久草网视频在线观看 | 91视频天堂| 欧美大片aaaaa免费观看 | 麻豆剧场 | 亚洲少妇色 | 亚洲精品白浆 | 无码一区二区波多野结衣播放搜索 | 伊人影院中文字幕 | 奶罩不戴乳罩邻居hd播放 | 国内精品久久久久久久久 | 成人性动漫 | 黄色毛片a级 | 国内少妇偷人精品视频 | 国产精品久久久久av福利动漫 | 特黄特色网站 | 又粗又大又黄又硬又爽免费看 | 国产精品久久久久久久久免费樱桃 | 久久久久九九 | 麻豆视频网址 | 日本裸体精油4按摩做爰 | 天天色天天操天天射 | 色偷偷噜噜噜亚洲男人 | 日韩 欧美 亚洲 精品 少妇 | 日本精品国产 | 成人天堂视频在线观看软件 | 免费拍拍拍网站 | 成人h视频在线 | 国模冰莲自慰肥美胞极品人体图 | 麻豆成人久久精品二区三区免费 | 亚洲色图网站 | 久久人人爽人人爽人人 | 无码h黄肉动漫在线观看 | 欧美xxxxxx片免费播放软件 | 欧美精品成人a区在线观看 欧美精品成人久久 | 佐佐木明希av在线 | 亚洲国产日韩av | 国内外成人激情视频 | 国产熟睡乱子伦视频 | 国产情侣主伺候绿帽男m | 秋霞午夜鲁丝一区二区老狼 | 国产精品久久久久无码人妻 | 免费污网站在线观看 | 中文字幕a∨在线乱码免费看 | 国产网站av | 黑人大长吊大战中国人妻 | 免费视频永久免费人 | 国产中年夫妇交换高潮呻吟 | 夜夜夜夜夜夜av夜夜夜夜 | 国产毛片久久久 | 三级全黄裸体 | 99国产精品欲a | 99er在线观看| 91偷拍网站 | 一区二区三区在线观看视频 | 污污小说在线观看 | 中年两口子高潮呻吟 | 97精品国产97久久久久久春色 | 精品字幕 | 亚洲成人精品一区二区三区 | 亚洲国产精品尤物yw在线观看 | 手机成人av | 黄瓜视频在线观看 | 捆绑白丝粉色jk震动捧喷白浆 | 自拍偷拍第5页 | 午夜大片| 国产精品美女久久久久av超清 | 欧美xxxx免费虐 | 国产精品v欧美精品 | 亚洲制服丝袜一区二区三区 | 性一交一乱一色一情丿按摩 | 人人爽人人爽人人爽人人片av | 国产无玛 | 亚精区在二线三线区别99 | 四虎影视成人永久免费观看亚洲欧美 | 日日摸夜夜添夜夜添国产精品 | 在线色图 | 免费黄色在线播放 | 老妇裸体性激交老太视频 | 日本在线中文 | 精品国产免费久久久久久婷婷 | 成人夜晚视频 | 亚洲视频欧美视频 | 韩国av免费在线 | 日本少妇高潮喷水xxxxxxx | 欧美一区免费观看 | 欧美成人精品高清视频在线观看 | 国产变态拳头交视频一区二区 | 在线精品亚洲欧美日韩国产 | 免费在线色视频 | 日韩有码中文字幕在线观看 | 亚洲午夜精品在线观看 | 日日碰狠狠躁久久躁96avv | 欧美精品系列 | 美女做爰久久久久久 | 18禁网站免费无遮挡无码中文 | 动漫av网站免费观看 | 天天草天天干 | 性色a码一区二区三区天美传媒 | 伊人久久大香线蕉综合5g | 亚洲自拍中文 | 国产精品伦子伦免费视频 | 亚洲精品777 | 在线观看成人小视频 | 色播av| 粗壮挺进人妻水蜜桃成熟 | 中文字幕免费一区二区 | 三级4级全黄60分钟 午夜成人1000部免费视频 | 日本精品一区二区三区四区 | 欧美午夜免费 | www内射国产在线观看 | 潮喷无码正在播放 | 国产精品毛片a∨一区二区三区 | 韩国和女邻居做爰2三级 | 免费无码作爱视频 | 久久综合国产伦精品免费 | 婷婷午夜天 | 国产免费一区二区三区四区五区 | 国产福利萌白酱在线观看视频 | 中文字幕日产每天更新40 | 性欧美videos另类艳妇3d | 337p粉嫩大胆色噜噜噜 | 一区二区免费在线 | 日韩亚射吧 | 国内精品91少妇在线播放 | av动漫大尺度在线 | 日本欧美一区二区三区 | 无码孕妇孕交在线观看 | 一本加勒比hezyo日本变态 | 白嫩嫩翘臀美女在线视频 | 国产a级精品 | 黄色的视频网站 | 五月天激情视频 | 亚洲天堂一区在线 | av日韩高清 | 色99色| 成人国产一区二区三区精品 | 国产一区二区三区精品久久久 | 天堂网中文在线观看 | 什么网站可以看毛片 | 国产露脸150部国语对白 | 欧美成人家庭影院 | 久热网站 | 992tv人人草| 中文日产日产乱码乱偷在线 | 国精产品一二三区传媒公司 | 日日拍夜夜拍 | 日本免费一区二区三区最新vr | cao在线| 99er6免费热在线观看精品 | 91美女网站| 欧美xxxx83d| 99久久免费视频在线观看 | 成人性生交大片免费看在线播放 | 国产综合色在线精品 | 国产成a人亚洲精v品无码性色 | 色爱亚洲 | 欧洲熟妇精品视频 | 亚洲色中文字幕在线播放 | 久久久久久久久久久国产 | 成人国产精品入口免费视频 | 色噜噜狠狠色综合网图区 | 日韩美女免费线视频 | 蜜桃久久精品 | 色婷婷激情网 | 国产乱人伦av在线无码 | 色妞av | 日韩国产精品视频 | 欧日韩视频 | 中文字幕一级二级三级 | 亚洲欧美日韩国产精品b站在线看 | 国产精品色婷婷久久99精品 | 8090yy成人免费看片 | 亚洲色图偷窥自拍 | 国产精品久久久久久亚洲 | 黑人巨大亚洲一区二区久 | 成人动漫在线免费观看 | 最新中文字幕在线播放 | 日本免费成人 | 99久久亚洲精品无码毛片 | 国产免费爽爽视频 | 欧美一级片网址 | 一级视频片 | 国产精品豆花视频www | 激情av小说 | 九九激情网 | 成人做爰9片免费看网站 | 一级高清免费毛片 | 日韩av在线永久免费 | 无码一区二区三区在线 | 伊人色综合久久天天五月婷 | 国产精品噜噜噜66网站 | 制服丝袜美腿一区二区 | 国产一区二区三区四区五区美女 | 久久久久久久久亚洲 | 青青草一区二区三区 | 国产mv欧美mv日产mv免费 | 四虎影成人精品a片 | 亚洲一区av无码专区在线观看 | 亚洲黄v| 亚洲欧美日本一区二区三区 | 嫩草av91| 久青草视频在线观看 | 96精品视频在线观看 | 灌满闺乖女h高h调教尿h | 特黄特色大片免费观看播放器 | 夜夜嗷| 国产欧亚州美日韩综合区 | www.青青草 | 国产成人在线看 | 精品一区二区三区不卡 | 欧洲lv尺码大精品久久久 | 青草青草久热精品视频在线观看 | 青青草午夜 | aaaaa国产欧美一区二区 | 国产精品免费久久久久软件 | 国产欧美日韩亚洲 | 国产欧美激情 | 国产亚洲欧美精品永久 | 日本成人午夜视频 | www激情网| 爱情岛论坛亚洲自拍 | 中文字幕av久久 | 久久不见久久见免费视频7 18禁黄久久久aaa片广濑美月 | 修仙性瘾荡乳小说h | 永久免费无码av网站在线观看 | 人妻与老人中文字幕 | 夜夜嗨av久久av | 俄罗斯xxxx性全过程 | 国产超碰97 | 色姑娘天天操 | 久久精品在这里 | 成人依依 | 国产播放隔着超薄丝袜进入 | 久操国产视频 | 亚洲免费a | 国产日韩欧美中文另类 | 粗暴肉开荤高h文农民工免费视频 | 激情伊人五月天久久综合 | 亚洲一区二区三区丝袜 | 国产精品视频一区二区三区无码 | 久久人人添人人爽添人人88v | 国产亚洲精品久久久网站好莱 | 在线视频一二区 | 91在线观看视频 | 草草影院1 | 中文字幕亚洲综合久久菠萝蜜 | 亚洲精品视频在线免费播放 | 顶级欧美熟妇xx | 超污视频在线观看 | 免费av不卡| 自拍偷拍第5页 | 7777少妇色视频免费播放 | 久久综合久久综合九色 | 久久精品欧美视频 | 国产一区在线看 | av片免费看 | 国产网站免费观看 | 日韩欧美网站 | 永久免费黄色 | 健美运动员性猛交xxxxx | av在线操 | 亚洲国产精品大学美女久久久爽 | 国产成+人欧美+综合在线观看 | 黄色尤物视频 | 97伊人超碰| 成人p站在线观看 | а 天堂 在线 | 欧亚乱熟女一区二区在线 | 北条麻妃在线一区二区免费播放 | 无码高潮少妇毛多水多水 | 桃子视频在线www88av | 99在线精品视频免费观看软件 | 欧美大胆a视频 | 老女人综合网 |