99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

首頁(yè)

游戲 UI 設(shè)計(jì)落地避坑:3 個(gè)核心原則讓設(shè)計(jì)從 “好看” 到 “好用”

濤濤 圖標(biāo)設(shè)計(jì)文章及欣賞

游戲 UI 設(shè)計(jì)的核心不是 “畫(huà)面精致”,而是 “信息傳遞高效”。設(shè)計(jì)師在交付前可自查三個(gè)問(wèn)題:是否考慮了信息的所有變量?復(fù)雜內(nèi)容是否足夠易懂?設(shè)計(jì)能否適配所有使用情景?只有兼顧美觀與實(shí)用性,才能讓 UI 真正服務(wù)于游戲體驗(yàn)。

圖標(biāo)設(shè)計(jì)全指南:從起源到落地的 8 大核心模塊

濤濤 圖標(biāo)設(shè)計(jì)文章及欣賞

從 1973 年第一代圖形用戶界面誕生至今,圖標(biāo)已從簡(jiǎn)單的功能符號(hào),演變?yōu)?UI 設(shè)計(jì)中 “無(wú)聲的交互語(yǔ)言”。它既是用戶快速識(shí)別功能的 “導(dǎo)航標(biāo)”,也是提升產(chǎn)品質(zhì)感的 “視覺(jué)名片”。想要掌握?qǐng)D標(biāo)設(shè)計(jì)的精髓,無(wú)需復(fù)雜理論,只需理清其發(fā)展邏輯、設(shè)計(jì)原則與落地方法 —— 以下 8 大核心模塊,帶你系統(tǒng)吃透圖標(biāo)設(shè)計(jì)。

【蘭亭妙微圖標(biāo)設(shè)計(jì)】為什么視覺(jué)大小和實(shí)際大小不相同?如何做到視覺(jué)統(tǒng)一?

杰睿


26082bb9-3b33-4e00-b4c1-4c60727d6087.png
在 UI 設(shè)計(jì)和圖標(biāo)開(kāi)發(fā)中,我們常常遇到一個(gè)讓人困惑的問(wèn)題:
明明兩個(gè)圖標(biāo)尺寸一樣,為什么看起來(lái)一個(gè)大一個(gè)小?
這就是「視覺(jué)大小」和「實(shí)際大小」不一致所引發(fā)的經(jīng)典設(shè)計(jì)挑戰(zhàn)。
 這篇文章將帶你了解其中的原理,并分享一些實(shí)操方法,幫你設(shè)計(jì)出視覺(jué)協(xié)調(diào)、統(tǒng)一專業(yè)的圖標(biāo)。

---
一、為什么視覺(jué)大小 ≠ 實(shí)際大小?
在設(shè)計(jì)中,「實(shí)際大小」是指圖標(biāo)在畫(huà)布上的像素尺寸,而「視覺(jué)大小」是指人眼感知到的圖形體積或重量感。這兩者之所以不一致,主要有以下幾個(gè)原因:
1. 圖形形狀對(duì)視覺(jué)感知的影響
不同形狀對(duì)人眼的“占據(jù)感”不同:
- 圓形、橢圓形:邊界柔和,看起來(lái)比實(shí)際尺寸小;
- 尖角圖形:具有延伸感,看起來(lái)更“張揚(yáng)”;
- 封閉 vs. 開(kāi)放圖形:封閉圖形更“緊湊”,視覺(jué)重心靠?jī)?nèi);開(kāi)放圖形更“輕”,容易被忽視。
舉例說(shuō)明:一個(gè) 24x24 的正方形圖標(biāo)和一個(gè) 24x24 的圓形圖標(biāo)放在一起,圓形常常顯得更小。
2. 視覺(jué)重心偏移
圖標(biāo)的視覺(jué)重心不是幾何中心:
- 有些圖標(biāo)上方留白較多,若嚴(yán)格居中,整體會(huì)顯得“偏下”;
- 有些圖標(biāo)線條向一側(cè)偏移,也會(huì)影響視覺(jué)穩(wěn)定性。
3. 顏色、線條粗細(xì)的錯(cuò)覺(jué)
- 顏色明亮的圖標(biāo)通常看起來(lái)更大;
- 線條較細(xì)的圖標(biāo)會(huì)顯得“輕”或“空”;
- 相同尺寸下,深色圖標(biāo)比淺色圖標(biāo)更具“存在感”。

---
二、如何實(shí)現(xiàn)圖標(biāo)的視覺(jué)統(tǒng)一?
4. 關(guān)注“視覺(jué)等值”而非“尺寸一致”
優(yōu)秀的圖標(biāo)設(shè)計(jì)不會(huì)追求數(shù)值上完全一致,而是讓圖標(biāo)“看起來(lái)”一樣大。這就需要設(shè)計(jì)師具備一定的視覺(jué)判斷力和對(duì)比經(jīng)驗(yàn)。
5. 使用統(tǒng)一的對(duì)齊原則
- 每個(gè)圖標(biāo)放在相同的畫(huà)布尺寸(如 24×24、48×48)中;
- 保證主圖形部分在視覺(jué)上居中,而非僅僅坐標(biāo)居中;
- 調(diào)整視覺(jué)重心,讓圖標(biāo)看起來(lái)平衡、不傾斜。
6. 使用光學(xué)微調(diào)
所謂「光學(xué)對(duì)齊」,就是打破機(jī)械對(duì)齊規(guī)則,讓視覺(jué)更舒服:
暫時(shí)無(wú)法在飛書(shū)文檔外展示此內(nèi)容
7. 放在真實(shí)場(chǎng)景中預(yù)覽
設(shè)計(jì)圖標(biāo)時(shí),建議不要孤立操作,而是:
- 放入實(shí)際使用場(chǎng)景(如按鈕、導(dǎo)航欄);
- 對(duì)比多個(gè)圖標(biāo)在一組中是否協(xié)調(diào);
- 測(cè)試在不同設(shè)備分辨率下的適配情況。

---
三、圖標(biāo)設(shè)計(jì)實(shí)操建議
以下是一些日常圖標(biāo)設(shè)計(jì)中實(shí)用的技巧和判斷標(biāo)準(zhǔn):
暫時(shí)無(wú)法在飛書(shū)文檔外展示此內(nèi)容

視覺(jué)大小與實(shí)際大小的偏差,是每一位圖標(biāo)設(shè)計(jì)師都會(huì)經(jīng)歷的學(xué)習(xí)過(guò)程。
 真正優(yōu)秀的設(shè)計(jì)不是追求數(shù)值一致,而是注重 用戶感受的和諧統(tǒng)一。
圖標(biāo)設(shè)計(jì)的細(xì)節(jié)感,往往藏在你“感覺(jué)不舒服但又說(shuō)不出哪里不對(duì)”的那一刻。
理解視覺(jué)感知,訓(xùn)練視覺(jué)判斷力,才是做出專業(yè)、協(xié)調(diào)圖標(biāo)系統(tǒng)的關(guān)鍵。

蘭亭妙微(www.lapeinture.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

UI 界面圖標(biāo)設(shè)計(jì)的 10 個(gè)關(guān)鍵細(xì)節(jié)

濤濤

UI 界面圖標(biāo)設(shè)計(jì)的 10 個(gè)關(guān)鍵細(xì)節(jié):使用光柵框架確保圖標(biāo)視覺(jué)重量一致,設(shè)計(jì)時(shí)注意像素網(wǎng)格重要性、優(yōu)先 2 像素邊框,從最復(fù)雜圖標(biāo)開(kāi)始設(shè)計(jì)以保持細(xì)節(jié)層次統(tǒng)一,控制相鄰元素最小間隙、避免輪廓 “粘滯”,去除重復(fù)圖形元素以簡(jiǎn)化設(shè)計(jì),保持圖標(biāo)風(fēng)格(如角度、線性 / 填充)一致,基于 8 像素網(wǎng)格等二倍數(shù)度量系統(tǒng)設(shè)計(jì),確保輪廓節(jié)點(diǎn)對(duì)齊、尺寸為整數(shù),清理 SVG 代碼中的冗余圖層,同時(shí)強(qiáng)調(diào)這些建議需靈活應(yīng)用而非刻板遵循。

采用 M3 設(shè)計(jì)的 Google Phone 應(yīng)用

杰睿

谷歌已向部分測(cè)試用戶發(fā)布了其手機(jī)應(yīng)用的新界面,該界面采用了 Material 3 Expressive 設(shè)計(jì)。此次改進(jìn)超越了簡(jiǎn)單的視覺(jué)風(fēng)格,更注重使整體應(yīng)用流程和功能更加直觀。

最顯著的變化是底部導(dǎo)航欄的重新組織。現(xiàn)有的“收藏夾”選項(xiàng)卡已被移除,并作為“收藏夾集合”集成到新的“主頁(yè)”選項(xiàng)卡中。“聯(lián)系人”選項(xiàng)卡也消失了,取而代之的是新的“鍵盤”選項(xiàng)卡,該選項(xiàng)卡位于中心位置,取代了現(xiàn)有的浮動(dòng)操作按鈕。因此,底部導(dǎo)航欄簡(jiǎn)化為總共三個(gè)選項(xiàng)卡。

此外,通話記錄功能也得到了簡(jiǎn)化。此前,同一個(gè)人的來(lái)電會(huì)嵌套在一個(gè)條目中,現(xiàn)在它們將被分開(kāi)并按時(shí)間順序列出,方便用戶快速識(shí)別未接來(lái)電或已接來(lái)電。

來(lái)電屏幕也進(jìn)行了改進(jìn)。用戶可以通過(guò)新的水平滑動(dòng)手勢(shì)來(lái)接聽(tīng)或拒絕來(lái)電,這一改進(jìn)是根據(jù)用戶反饋而來(lái)的,旨在減少?gòu)目诖心贸鍪謾C(jī)時(shí)的誤操作。

谷歌解釋說(shuō),這些更新“旨在讓你的應(yīng)用從始至終都擁有更簡(jiǎn)單、更輕松的體驗(yàn)”。新的設(shè)計(jì)和功能將在未來(lái)幾周內(nèi)陸續(xù)向公測(cè)組推出,但并非所有功能都會(huì)一次性推出,而且一些 Material 3 Expressive 元素可能會(huì)限量推出。

(C)谷歌

 

 
蘭亭妙微(www.lapeinture.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

UI 設(shè)計(jì)|審美積累 | 擬物化風(fēng)格(Skeuomorphism)

杰睿

擬物化是指把現(xiàn)實(shí)世界的材質(zhì)、光影和結(jié)構(gòu)帶到數(shù)字界面中。木紋、金屬、皮革、紙張等真實(shí)物體的質(zhì)感,被細(xì)致地還原到屏幕上,讓用戶一眼就明白元素的意義與操作方式。它曾是iOS6之前移動(dòng)端設(shè)計(jì)的主流風(fēng)格,也一度被極簡(jiǎn)風(fēng)格取代,但在如今的創(chuàng)意項(xiàng)目和品牌中,擬物化又以精致的小范圍應(yīng)用回潮。
核心特點(diǎn):
強(qiáng)調(diào)光影、漸變、紋理和材質(zhì)感
元素看上去像真實(shí)物體,有層次和觸感
圖標(biāo)、按鈕、卡片常帶高光或陰影,突出立體效果
通過(guò)形象化隱喻幫助用戶理解功能(例如垃圾桶圖標(biāo)表示刪除)
 
適用場(chǎng)景:
游戲UI界面(卡牌、任務(wù)面板、背包系統(tǒng)等)
兒童類App、教育軟件(通過(guò)形象化幫助理解)
復(fù)古、懷舊主題的官網(wǎng)或活動(dòng)頁(yè)
精致的產(chǎn)品展示頁(yè)、品牌定制化網(wǎng)站
擬物化能帶來(lái)強(qiáng)烈的情感共鳴,尤其在需要溫度感和可玩性的界面中更顯優(yōu)勢(shì)。但大面積使用容易產(chǎn)生信息冗余,對(duì)資源體積和加載性能也要求高。相比純視覺(jué)風(fēng)格,它更適合在重點(diǎn)組件、小范圍點(diǎn)綴,作為界面亮點(diǎn)出現(xiàn)。
 

5aa03006-e211-49d4-90ee-c797a6caf109.png

9a878ddc-1587-41f1-96d0-a3efeeb6380c.png

85001f9c-4ff6-419f-b0d2-4511ae10546e.png

771615d3-923c-4e5b-b438-22214c0ecb9a.png

b8419aeb-fb14-4b7d-831a-21970dce1e40.png

c3bf255b-6cce-4245-9908-19120727d983.png

更多項(xiàng)目/合作請(qǐng)私信,支持定制設(shè)計(jì)服務(wù)
蘭亭妙微(www.lapeinture.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

Google如何分組按鈕——按鈕組功能及其使用方法

杰睿

按鈕組(ButtonGroup)是一個(gè)將多個(gè)按鈕以可視化的方式組合在在一起的組件,幫助用戶快速識(shí)別并操
作相關(guān)操作。在M3Expressive中,按鈕組通過(guò)增強(qiáng)按鈕間的交互、布局適配以及層級(jí)表現(xiàn)力,提升
了界面的靈活性。

DM_20250701224752_001.PNG


為什么要分組按鈕?
現(xiàn)有的按鈕只是簡(jiǎn)單地并排放置,缺乏任何鏈接交互或按鈕之間的視覺(jué)統(tǒng)一。
拼中人。簡(jiǎn)單
Co
在Material3中,我們將按鈕組定義為獨(dú)立的組件,以實(shí)現(xiàn)更豐富的表現(xiàn)力和自適應(yīng)的布局,并提出
了一種名為Connected Button Group的新形式來(lái)取代Segmentted Button的作用。
本文我們將了解新增按鈕組的功能和使用方法。如果您想了解更多關(guān)于Expressive新增的Split Button

配置按鈕組
DM_20250701224752_002.PNG
容器
按鈕組可以包含各種元素,例如圖標(biāo)、文本按鈕等,但其核心概念是"容器",它是一種更高級(jí)的結(jié)構(gòu),
包裹著這些元素并控制其布局和交互。因此,將按鈕組理解為一個(gè)充當(dāng)按鈕容器的容器,而不是按鈕的
集合,似乎更準(zhǔn)確。


按鈕組的類型
按鈕組分為標(biāo)準(zhǔn)按鈕組和聯(lián)動(dòng)按鈕組。
DM_20250701224752_003.PNG
標(biāo)準(zhǔn)按鈕組
使用標(biāo)準(zhǔn)按鈕組將獨(dú)立的操作按鈕并排放置。
每個(gè)按鈕都保持圓潤(rùn)的形狀,并且按鈕之間有一定的間距。在此組中,選定的按鈕可以改變寬度或形
狀,并且這種變化通常會(huì)影響相鄰的按鈕。整個(gè)按鈕組被設(shè)計(jì):為一個(gè)有機(jī)的整體。
一般適合展現(xiàn)保存、取消、刪除等主要操作,并且按鈕的大小和樣式根據(jù)上下文靈活調(diào)整。


DM_20250701224752_004.PNG
鏈接按鈕組
連接按鈕組是一種主要用于允許選擇多個(gè)選項(xiàng)的組件。現(xiàn)有的分段按鈕將被連接按鈕組取代。
按鈕之間物理連接、共享邊框或以一致的高度和寬度對(duì)齊。用戶可以選擇一個(gè)或多個(gè)按鈕,并且只有選中的按鈕會(huì)在視覺(jué)上突出顯示。這種設(shè)計(jì)可以有效地傳過(guò)達(dá)清晰的選擇狀態(tài),而不會(huì)影響其他按鈕。


它主要用于替代分段按鈕的作用,例如過(guò)濾、視圖切換和排序選項(xiàng)。

 

如何使用按鈕組
DM_20250701224752_005.PNG
按鈕組使您的產(chǎn)品更具表現(xiàn)力。
標(biāo)準(zhǔn)按鈕組增加了相鄰按鈕之間的交互,使它們相互響應(yīng)。選擇標(biāo)準(zhǔn)組內(nèi)的按鈕時(shí),會(huì)發(fā)生以下變化:
所選按鈕的形狀和寬度將會(huì)改變。
選定的切換按鈕也會(huì)改變顏色。
相鄰的按鈕移動(dòng)并暫時(shí)改變寬度。

 

DM_20250701224752_006.PNG
僅在重要的交互時(shí)使用形狀變化。
您可以使用不同的按鈕類型、寬度和顏色組合來(lái)強(qiáng)調(diào)重要元素,并在視覺(jué)上對(duì)相關(guān)按鈕進(jìn)行分組。默認(rèn)
情況下,標(biāo)準(zhǔn)按鈕組中的所有按鈕應(yīng)具有相同的尺寸(XS到XL)和形狀(圓形或方形)。
·只有在英雄時(shí)刻,您才應(yīng)該在群體中使用不同尺寸。
?混合尺寸并不常用。
僅當(dāng)選擇按鈕或需要添加含義或?qū)Ρ葧r(shí)才應(yīng)使用不同的形狀。
區(qū)當(dāng)選擇這邊以而安添加古文現(xiàn)對(duì)比的才應(yīng)使用個(gè)問(wèn)的形狀。

 

DM_20250701224752_007.PNG
可以使用一組鏈接的按鈕在類似的操作之間切換。
鏈接按鈕組可幫助用戶選擇選項(xiàng)、切換視圖或?qū)R頁(yè)面上的元素。它們的行為與標(biāo)準(zhǔn)按鈕組類似,但不
會(huì)影響相鄰的按鈕。鏈接按鈕組應(yīng)取代已棄用的分段按鈕。

 

DM_20250701224752_008.PNG

如果按鈕內(nèi)容彼此關(guān)聯(lián)且可選,請(qǐng)使用鏈接按鈕組。在購(gòu)物應(yīng)用中,鏈接按鈕組用于選擇商品的容量,
因此,密切相關(guān)的操作在鏈接按鈕組中效果更佳。

DM_20250701224752_009.PNG
使用一組鏈接按鈕來(lái)實(shí)現(xiàn)單選或多選模式。
對(duì)于使用切換按鈕的單選或多選模式,應(yīng)使用鏈接按鈕組。如果所有按鈕均不可切換,則不應(yīng)使用鏈接
按鈕組。

 

DM_20250701224752_010.PNG

一組鏈接按鈕被配置為填充其所在頁(yè)面或區(qū)域的寬度,這會(huì)導(dǎo)致內(nèi)部按鈕的寬度也隨之增加。在寬屏
上,建議設(shè)置最大寬度,以防止按鈕組過(guò)寬。

 

DM_20250701224752_011.PNG
可以根據(jù)窗口大小手動(dòng)調(diào)整按鈕的寬度、大小和填充。
按鈕組應(yīng)在布局中移動(dòng)到一行,并且不應(yīng)換行。您可以垂直堆疊多個(gè)按鈕組,以使項(xiàng)目保持緊密排列,
但按鈕組之間不能進(jìn)行垂直交互。


手動(dòng)調(diào)整圖標(biāo)按鈕的寬度時(shí),避免將其拉伸得太寬。

 

DM_20250701224752_012.PNG

您還可以根據(jù)窗口大小手動(dòng)調(diào)整一組按鈕的大小、形狀和填充。
在小窗口中,最好使用較小、較窄的按鈕來(lái)容納按鈕組中的所有按鈕,而在較大的屏幕上,最好使用較
大、較寬的按鈕來(lái)有效地填充可用空間。
靈活按鈕或按鈕組會(huì)根據(jù)窗口大小自動(dòng)調(diào)整其寬度。

DM_20250701224752_013.PNG

必須在布局和設(shè)備之間保持一致的層次結(jié)構(gòu)。
當(dāng)窗口變大時(shí),您應(yīng)該利用顏色和大小等屬性來(lái)確保每個(gè)按鈕保持其視覺(jué)層次。例如,主要操作按鈕在
所有窗口尺寸下都應(yīng)保持最大、最寬且視覺(jué)上最突出。

 

DM_20250701224752_014.PNG

根據(jù)屏幕的大小,按鈕應(yīng)該在榮單中隱藏或重新顯示。
在小窗口中,您可以將按鈕組末尾的按鈕設(shè)置為折疊成榮單,然后在窗口大小增加時(shí)重新顯示。建議將
榮單放置在按鈕組的末尾。按鈕組外部的按鈕不受按鈕組行為的影響。


DM_20250701224752_015.PNG
在標(biāo)準(zhǔn)組中,當(dāng)您按下一個(gè)按鈕時(shí),相鄰的按鈕也會(huì)改變寬度...
按下按鈕時(shí),其寬度和形狀會(huì)發(fā)生變化。在標(biāo)準(zhǔn)按鈕組中,按皮下按鈕也會(huì)影響相鄰按鈕的寬度。相比之
下,在鏈接按鈕組中,只有按下的按鈕會(huì)改變形狀,其他按鈕丑不受影響。

 

DM_20250701224752_016.PNG

所選按鈕應(yīng)改變形狀以實(shí)現(xiàn)視覺(jué)區(qū)分。
選定的按鈕應(yīng)從圓形變?yōu)榉叫?或從方形變?yōu)閳A形。

 

鏈接按鈕組和分段按鈕之間有什么區(qū)別?
雖然兩者的功能相同,但可以說(shuō)它們被納入了一個(gè)按鈕組,以實(shí)現(xiàn)富有表現(xiàn)力的交互。
DM_20250701224752_017.PNG
鏈接到現(xiàn)有分段按鈕的一組按鈕。
分段按鈕也允許單選或多選,但其配置相對(duì)固定,并且視覺(jué)呈現(xiàn)受到限制。
鏈接按鈕組在調(diào)整按鈕的大小、顏色和形狀方面提供了更大的靈活性,其視覺(jué)交互也得到了增強(qiáng),例如
根據(jù)選擇狀態(tài)改變形狀。按鈕以連接形式排列,并且只有選中的按鈕才會(huì)在視覺(jué)上突出顯示,從而提供
清晰的反饋。
Expressive在這種靈活性和表現(xiàn)力的基礎(chǔ)上,逐漸減少分段按鈕的的使用,轉(zhuǎn)而采用鏈接按鈕組作為替
代。

綜上所述
DM_20250701224752_018.PNG
按鈕組是實(shí)用的組件,能夠直觀地將相關(guān)操作分組,并為用戶提供清晰的上下文。它們旨在直觀地展示
按鈕之間的關(guān)系,并根據(jù)屏幕尺寸或具體情況靈活操作,從而在不同界面上提供一致的體驗(yàn)。標(biāo)準(zhǔn)按鈕
組有利于實(shí)現(xiàn)交互和層級(jí)結(jié)構(gòu),而鏈接按鈕組則有利于清晰的選擇結(jié)構(gòu)。然而,形狀、尺寸設(shè)置以及響
應(yīng)式設(shè)計(jì)需要精細(xì)的設(shè)計(jì)。
Material3取代了現(xiàn)有的分段按鈕,并提出將一組按鈕作為獨(dú)立組件,以實(shí)現(xiàn)富有表現(xiàn)力的UI組合。
這種設(shè)計(jì)超越了簡(jiǎn)單的按鈕排列,全面考慮了交互、布局和層級(jí),指明了提升整個(gè)產(chǎn)品一致性和可用性
的方向。

 

三維圖標(biāo)設(shè)計(jì)寶典

濤濤

?“三維圖標(biāo)設(shè)計(jì)寶典” 方法論,強(qiáng)調(diào)從前期構(gòu)思(分析競(jìng)品如馬蜂窩與本品飛豬的圖標(biāo)類型、配色、風(fēng)格及核心辨識(shí)點(diǎn),通過(guò)關(guān)鍵詞腦暴鎖定 “品質(zhì)、活力、青春” 方向并產(chǎn)出情緒版)、繪制圖標(biāo)(具象功能、簡(jiǎn)化結(jié)構(gòu)、確定基本形,融入飛豬品牌超級(jí)符號(hào),添加毛玻璃質(zhì)感等細(xì)節(jié))到走查圖標(biāo)(從辨識(shí)度、統(tǒng)一性、美感度、差異化四方面檢查,如類型、風(fēng)格、體量感統(tǒng)一,融入品牌符號(hào)增強(qiáng)差異化)的完整流程,助設(shè)計(jì)師提升過(guò)稿率。

掌握這3個(gè)方法,新手也能做出精致的圖標(biāo)設(shè)計(jì)

lanlanwork

你只需要做三件事情,就可以讓你做出足夠優(yōu)秀的作品

第一:找到合適的圖標(biāo)素材

第二:增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

第三:給設(shè)計(jì)素材加入自己的想法

我們這次做的圖標(biāo)分別為:通知、商城、發(fā)現(xiàn)、我的。

第一:找到合適的圖標(biāo)素材

我就拿最常用的阿里巴巴圖標(biāo)庫(kù),打開(kāi)網(wǎng)址,找通知圖標(biāo),直接下載第一頁(yè),第 1 排第 2 個(gè):

image.png

接下來(lái)是商城圖標(biāo),繼續(xù)搜索商城,我們選用第一頁(yè),第 2 排第 2 個(gè):

image.png

相同的方式,我們找到以下四個(gè)圖標(biāo)的原始素材:

image.png

這里面我們需要注意,在找素材的時(shí)候,你至少需要找到一兩個(gè)不太一樣的圖標(biāo),否則整體就會(huì)比較普通,我們現(xiàn)在這樣看上去,第四個(gè)“我的”圖標(biāo),相對(duì)來(lái)說(shuō)不一樣一點(diǎn),至少?zèng)]那么常見(jiàn):

image.png

第二:增強(qiáng)設(shè)計(jì)素材的統(tǒng)一性

有了素材之后,我們首先要讓他們看起來(lái)是一套的,所以在統(tǒng)一性上需要優(yōu)化,先優(yōu)化大小和線條粗細(xì):

image.png

大小和粗細(xì)優(yōu)化完之后,我們?cè)賰?yōu)化下圓角統(tǒng)一性,現(xiàn)在很明顯,只有第二個(gè)圖標(biāo)是圓潤(rùn)的,其他的都是有點(diǎn)硬朗的,可以進(jìn)行統(tǒng)一下:

image.png

直角圓角統(tǒng)一了之后,還有一個(gè)統(tǒng)一性就是斷線,只有第二個(gè)沒(méi)有斷開(kāi)的設(shè)計(jì),所以我們?cè)侔焉坛沁M(jìn)行斷線處理:

image.png

第三:給設(shè)計(jì)素材加入自己的想法

大家要明白,雖然我們可以直接下載圖標(biāo)素材,而且可以通過(guò)審美讓他們變得相對(duì)精致統(tǒng)一,但素材畢竟還是通用的,我們還是需要融入自己的想法和設(shè)計(jì),不能完全依賴素材,舉一個(gè)最簡(jiǎn)單的例子,“我的”這個(gè)圖標(biāo),他的腦袋是圓形的,那我們是不是可以把他改成矩形的?

image.png

比如一些細(xì)節(jié)的調(diào)整,像通知圖標(biāo),感覺(jué)有點(diǎn)禿,是不是可以讓中間伸出一點(diǎn)寬度來(lái):

image.png

細(xì)微調(diào)整之后,如果覺(jué)得還不夠,我們還可以繼續(xù)添加新的設(shè)計(jì)語(yǔ)言,比如增加配色點(diǎn)綴:

image.png

就這樣,這幾個(gè)圖標(biāo),漸漸的就成為了你自己的作品!

我們?cè)诜胚m當(dāng)?shù)陌b一下:

image.png

我們?cè)賹?duì)比一下原始的素材:

image.png

效果還是提升很大的!

所以,做任何事情,一定要講究方法,不能死腦筋,否則進(jìn)步就很慢。

歡迎關(guān)注作者的微信公眾號(hào):「菜心設(shè)計(jì)鋪」

 

蘭亭妙微(www.lapeinture.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

 

 

應(yīng)用圖標(biāo) | 全面解析,助力設(shè)計(jì)出更優(yōu)質(zhì)的應(yīng)用圖標(biāo)!

杰睿

編輯導(dǎo)語(yǔ):各大APP的圖標(biāo)都各有特點(diǎn),圖標(biāo)的設(shè)計(jì)也是一門學(xué)問(wèn)。在這篇文章中,作者全面解析了各類APP圖標(biāo)設(shè)計(jì)背后的用意,一起學(xué)習(xí)一下吧。

如果說(shuō)一個(gè)人的臉面、衣著打扮是給陌生人的第一印象,那么APP的應(yīng)用圖標(biāo)風(fēng)格與氣質(zhì)就是留給新用戶的第一印象,關(guān)系著用戶是否對(duì)這個(gè)APP感興趣、是否會(huì)打開(kāi)應(yīng)用介紹、是否會(huì)點(diǎn)擊下載按鈕起著決定性的作用。

一個(gè)好的應(yīng)用圖標(biāo)有著無(wú)限可能,無(wú)形中對(duì)用戶產(chǎn)生強(qiáng)大的吸引力,并有一種想要了解的沖動(dòng),況且圖形本身就能讓人充分發(fā)揮想象力,這就是為什么不管在哪個(gè)應(yīng)用市場(chǎng)第一眼看到的是應(yīng)用圖標(biāo),而非應(yīng)用名稱。

在一部手機(jī)就能解決很多問(wèn)題的互聯(lián)網(wǎng)時(shí)代,相信每個(gè)人都有下載幾十上百個(gè)APP,琳瑯滿目的列表,應(yīng)用圖標(biāo)是否能在第一時(shí)間抓住用戶眼球(目標(biāo)明確或鐵粉除外)非常重要,一個(gè)視覺(jué)傳達(dá)清晰且有吸引力的圖標(biāo)能提升用戶點(diǎn)擊率,即便用戶只使用過(guò)一次,相對(duì)來(lái)說(shuō),印象也會(huì)更深刻。

本文根據(jù)筆者對(duì)大量應(yīng)用圖標(biāo)的分析、結(jié)合設(shè)計(jì)準(zhǔn)則進(jìn)行總結(jié),希望能幫助大家在設(shè)計(jì)過(guò)程中規(guī)避掉一些常見(jiàn)的問(wèn)題,歡迎一起探討、取長(zhǎng)補(bǔ)短、共同進(jìn)步。

分享目錄

  1. 四大設(shè)計(jì)原則
  2. 色彩的表現(xiàn)形式
  3. 主體圖形分類
  4. 背景圖案及元素
  5. 主體圖形的表現(xiàn)手法
  6. 應(yīng)用圖標(biāo)設(shè)計(jì)流程
  7. 總結(jié)

一、四大設(shè)計(jì)原則

應(yīng)用圖標(biāo)代表產(chǎn)品的外在形象,設(shè)計(jì)的精美與否決定著用戶的第一印象,是否產(chǎn)生打開(kāi)的欲望跟當(dāng)前圖標(biāo)的視覺(jué)所傳達(dá)的內(nèi)涵有最直接的關(guān)系。應(yīng)用圖標(biāo)雖然不同于設(shè)計(jì)LOGO,表現(xiàn)方式也千變?nèi)f化,但必定有自身的設(shè)計(jì)準(zhǔn)則要去遵守,利用設(shè)計(jì)的手段將視覺(jué)傳播的價(jià)值最大化。

1. 可識(shí)別性

首先,應(yīng)用圖標(biāo)需要盡量簡(jiǎn)約。過(guò)于復(fù)雜的圖標(biāo)會(huì)增加用戶的理解成本、甚至誤導(dǎo)用戶,但如果過(guò)于追求簡(jiǎn)約,缺乏細(xì)節(jié)、個(gè)性化以及必要的隱喻信息,也會(huì)因過(guò)于單調(diào),造成表意不明確等問(wèn)題。

簡(jiǎn)約并非簡(jiǎn)單,設(shè)計(jì)師需要通過(guò)專業(yè)的知識(shí)進(jìn)行合理的簡(jiǎn)化,以提升應(yīng)用圖標(biāo)的設(shè)計(jì)品質(zhì),方便用戶在不同場(chǎng)景中都能清晰的辨認(rèn)。其次,需表意明確、易于理解。

應(yīng)用圖標(biāo)代表的是產(chǎn)品的行業(yè)屬性、功能作用或與眾不同的優(yōu)勢(shì),要讓用戶第一眼就能識(shí)別出所代表的含義,貼近用戶的心理預(yù)期。

簡(jiǎn)約易識(shí)別是應(yīng)用圖標(biāo)必備的基礎(chǔ)屬性之一,這也是為什么大部分產(chǎn)品都將logo作為應(yīng)用圖標(biāo)主視覺(jué)的原因,因?yàn)閘ogo設(shè)計(jì)考慮到了方方面面以及后續(xù)延展的問(wèn)題,即便有些logo較為復(fù)雜,也會(huì)通過(guò)提取局部元素、吉祥物、主體色等方式來(lái)強(qiáng)化應(yīng)用圖標(biāo)屬性,給用戶形成獨(dú)特的記憶,以提升應(yīng)用的下載量和使用率。

2. 關(guān)聯(lián)性

應(yīng)用圖標(biāo)應(yīng)該與產(chǎn)品的屬性、品牌有極強(qiáng)的關(guān)聯(lián)性,通過(guò)品牌延展賦予產(chǎn)品更強(qiáng)的生命力,讓用戶從接觸應(yīng)用圖標(biāo)的第一眼開(kāi)始、再到后面的使用,整個(gè)過(guò)程始終都能保持清晰且統(tǒng)一的品牌認(rèn)知,通過(guò)和諧統(tǒng)一的視覺(jué)效果,帶來(lái)更好的用戶體驗(yàn)。

應(yīng)用圖標(biāo)需要與品牌之間必須保持高度的一致,著重從以下幾點(diǎn)體現(xiàn):

1)LOGO

毫無(wú)疑問(wèn),用品牌logo作為主體圖形是最佳選擇,結(jié)合品牌色搭配使用,能將產(chǎn)品核心理念、品牌形象的傳播效果達(dá)到極致,在APP應(yīng)用市場(chǎng)中,大家會(huì)發(fā)現(xiàn)大多數(shù)產(chǎn)品都在使用logo作為應(yīng)用圖標(biāo)的主視覺(jué)圖形。

2)品牌色

品牌色即主體色,將貫穿APP所有頁(yè)面的元素組件。眾所周知,每種顏色都有其特定的含義,能傳遞給用戶不同的心理感受。用主體色作為應(yīng)用圖標(biāo)的背景色,可以烘托出產(chǎn)品的情感氛圍,并與進(jìn)入應(yīng)用后的主體色遙相呼應(yīng),以最小的視覺(jué)跳躍性將前后關(guān)聯(lián),強(qiáng)化用戶對(duì)產(chǎn)品的記憶感知。

3)IP/吉祥物

吉祥物屬于品牌logo延展的一部分, 也是產(chǎn)品的靈魂。當(dāng)logo較為復(fù)雜時(shí),因移動(dòng)設(shè)備應(yīng)用圖標(biāo)位置空間有限,logo細(xì)節(jié)無(wú)法在短時(shí)間被用戶捕捉,不宜展示時(shí),使用IP/吉祥物或其局部元素代替也是不錯(cuò)的選擇。

4)產(chǎn)品名稱

如果說(shuō)logo是產(chǎn)品的臉面,通過(guò)暗示和隱喻給用戶無(wú)限遐想并讓用戶記住它的樣子,那么名稱的出現(xiàn)就相當(dāng)于產(chǎn)品主動(dòng)進(jìn)行了自我介紹,并讓用戶知道如何稱呼它。

將產(chǎn)品名稱作為應(yīng)用圖標(biāo)需謹(jǐn)慎使用:首先,文字傳達(dá)的信息量有限:其次,用戶對(duì)于圖形的理解效率要優(yōu)于文字;再者,應(yīng)用圖標(biāo)都會(huì)有對(duì)應(yīng)的產(chǎn)品名稱展示(應(yīng)用市場(chǎng)在右、桌面在下方),多少有些信息重復(fù)。

所以大家見(jiàn)到的應(yīng)用圖標(biāo)主體是產(chǎn)品名稱的不外乎兩種情況,一種是產(chǎn)品本身將名稱設(shè)計(jì)成字體logo,例如美團(tuán)、懶飯;另一種是將產(chǎn)品名稱作為logo的輔助信息提示,例如繽紛生活。

以上是應(yīng)用圖標(biāo)與品牌屬性關(guān)聯(lián)最常見(jiàn)的四種方式,在設(shè)計(jì)中可靈活搭配,使用兩種及以上的方式組合,能將品牌傳播的途徑發(fā)揮到最大值。

3. 差異化

筆者上小學(xué)時(shí),曾經(jīng)在一次彩鉛繪畫(huà)作業(yè)中得到了老師的真心夸贊,但內(nèi)心卻備受打擊。老師對(duì)著我畫(huà)的桃子說(shuō)“這西紅柿畫(huà)的太像了”。

舉這個(gè)例子似乎并不恰當(dāng),但結(jié)果是驚人的相似,筆者想要陳述的一個(gè)觀點(diǎn)是,不要讓你辛苦做出的設(shè)計(jì)成為別人的嫁衣,讓用戶誤以為這是其他企業(yè)的“某某某…”產(chǎn)品。

目前,應(yīng)用市場(chǎng)中的APP數(shù)量巨大,且還處于增長(zhǎng)的趨勢(shì),同行業(yè)的圖標(biāo)設(shè)計(jì)同質(zhì)化相當(dāng)嚴(yán)重。想要讓自身產(chǎn)品應(yīng)用圖標(biāo)脫穎而出,就有必要在設(shè)計(jì)之前做好競(jìng)品分析,借鑒競(jìng)品的優(yōu)點(diǎn),在突出自身產(chǎn)品核心特征、屬性的基礎(chǔ)上,還要用不同的表現(xiàn)手法突出其差異性,給用戶留下獨(dú)特的印象,避免同質(zhì)化。

4. 可用性

應(yīng)用圖標(biāo)在設(shè)計(jì)完成之后(測(cè)試小組)、上線后(用戶反饋)進(jìn)行可用性測(cè)試,主要針對(duì)圖標(biāo)對(duì)用戶的吸引力、識(shí)別度等問(wèn)題作進(jìn)一步優(yōu)化,以確保圖標(biāo)在不同場(chǎng)景中都能被用戶清晰識(shí)別并提升印象。

雖然可用性測(cè)試存在設(shè)計(jì)之后,但這一環(huán)節(jié)至關(guān)重要,它決定著產(chǎn)品的下載量以及使用率。

二、圖標(biāo)顏色的表現(xiàn)形式

1. 單色圖標(biāo)

單色圖標(biāo)通常以品牌色作為背景色、logo以反白的形式呈現(xiàn),既能突出品牌色、還能用于烘托主體圖形,不過(guò)這種方式僅適合色值單一的logo,多色值可能會(huì)與背景色產(chǎn)生融合或色彩反差太大影響視覺(jué)傳達(dá)效果。另外,如果logo視覺(jué)重量較大,也可使用白色背景+原品牌色logo,這樣會(huì)更直觀。

單色應(yīng)用圖標(biāo)雖然色彩比較單一、表現(xiàn)形式也受到局限,但視覺(jué)清晰、簡(jiǎn)潔且識(shí)別性強(qiáng),如果能運(yùn)用其他設(shè)計(jì)手法豐富圖標(biāo)細(xì)節(jié)就再好不過(guò)了。

2. 多色圖標(biāo)

多色圖標(biāo)使用了兩種及以上的顏色,更多是直接使原多色彩的logo圖形+白色背景,無(wú)需任何加工,控制好尺寸規(guī)范就行。如果是運(yùn)營(yíng)推廣所需,如春節(jié)、618、雙11等活動(dòng),會(huì)對(duì)應(yīng)用圖標(biāo)加以其他色彩烘托、點(diǎn)綴元素或標(biāo)簽等,色彩就會(huì)更多,但一般都具有時(shí)效性,活動(dòng)過(guò)期即圖標(biāo)復(fù)原。

多色圖標(biāo)的細(xì)節(jié)、層次更加豐富,設(shè)計(jì)時(shí)確保各色彩搭配協(xié)調(diào),一旦因色彩過(guò)多造成視覺(jué)混亂,就得不償失了。

3. 漸變圖標(biāo)

無(wú)論是單色還是多色,添加漸變會(huì)讓?xiě)?yīng)用圖標(biāo)更加細(xì)膩、耐看。漸變的表現(xiàn)手法應(yīng)用廣泛,簡(jiǎn)單的漸變能讓圖標(biāo)細(xì)節(jié)豐富,同時(shí)也具備空間感和微立體感。

設(shè)計(jì)漸變色圖標(biāo)需注意圖形銜接處的對(duì)比度,花里胡哨的漸變色會(huì)拉低品質(zhì)感,要確保色彩的和諧,讓圖標(biāo)視覺(jué)清晰且容易識(shí)別。

4. 顏色疊加

單色、多色或是漸變都可通過(guò)調(diào)整不透明度、圖層疊加的方式來(lái)豐富應(yīng)用圖標(biāo)細(xì)節(jié),相比純粹的漸變,立體感和空間感更強(qiáng)。使用顏色疊加需注意色彩對(duì)比及明暗關(guān)系,否則會(huì)衍生出臟亂的顏色。

5. 色環(huán)的運(yùn)用

環(huán)形構(gòu)圖為主,由多個(gè)元素復(fù)制并以統(tǒng)一的中心點(diǎn)、旋轉(zhuǎn)角度,旋轉(zhuǎn)衍生出一個(gè)主體圖形。這種應(yīng)用圖標(biāo)的設(shè)計(jì)構(gòu)圖飽滿、色彩豐富,能給用戶傳遞出輕松愉快的視覺(jué)體驗(yàn)。

需要注意的是,由于顏色較多,至少在三種顏色及以上,否則無(wú)法構(gòu)成色環(huán)類的主體圖形(錯(cuò)覺(jué))。如果沒(méi)有超強(qiáng)的配色功底,最好按照色環(huán)的順序依次取色,即便沒(méi)有太大的優(yōu)勢(shì),但至少不會(huì)出錯(cuò)。

三、主體圖形的分類

一個(gè)好的應(yīng)用圖標(biāo)應(yīng)該是多元素、多信息結(jié)合運(yùn)用,才能達(dá)到更好的效果。雖然大部分主體圖形使用了logo,但并不影響設(shè)計(jì)師們對(duì)其進(jìn)行拆解,提取局部元素、色彩、名稱等信息進(jìn)行二次創(chuàng)作,從原則上來(lái)說(shuō),是一次線上logo的設(shè)計(jì)。

應(yīng)用圖標(biāo)種類繁多,切不可盲目跟風(fēng),需經(jīng)過(guò)認(rèn)真的分析、研究,找到最適合自身產(chǎn)品的才是最重要的,且每種類型并非獨(dú)立,在條件允許的情況下還能跨類型靈活搭配、相互組合。

1. 中文字體

1)單中文字體

僅次于圖形logo的表現(xiàn)方式,通常會(huì)在產(chǎn)品名稱中提取一個(gè)具有代表性的文字對(duì)筆畫(huà)、結(jié)構(gòu)等進(jìn)行再設(shè)計(jì)。基于國(guó)人文化的優(yōu)勢(shì)以及對(duì)漢字的敏感度,既能降低用戶對(duì)應(yīng)用圖標(biāo)的認(rèn)知成本、還能根據(jù)產(chǎn)品特性設(shè)計(jì)出差異化的視覺(jué)效果。

不過(guò)因?yàn)槲淖止P畫(huà)的原因,單個(gè)文字提取難度較大,避免信息傳遞有誤或影響識(shí)別度,建議選擇筆畫(huà)較少且具有特性/代表性的文字,若達(dá)不到條件,最好選擇其他表現(xiàn)方式。

2)多中文字體

使用兩個(gè)及以上漢字,大多直接將產(chǎn)品名稱用在圖當(dāng)中,對(duì)用戶來(lái)說(shuō)更容易記憶,有利于品牌推廣。相比單字體,設(shè)計(jì)感會(huì)受到一定的局限,不宜做過(guò)于夸張的表現(xiàn)方式,因文字較多,設(shè)計(jì)時(shí)一定要注意文字的協(xié)調(diào)與可讀性。

多文字圖標(biāo)建議將字?jǐn)?shù)控制在2~6個(gè)范圍內(nèi),3字以內(nèi)一行顯示,超過(guò)3字即兩行顯示且最多不超過(guò)兩行,否則會(huì)影響圖標(biāo)的識(shí)別效果。

3)中文、圖形組合

適當(dāng)添加帶有產(chǎn)品特性的輔助圖形,用引導(dǎo)或指向性的方式對(duì)文字進(jìn)行強(qiáng)調(diào),圖標(biāo)細(xì)節(jié)會(huì)更豐富,可以突出產(chǎn)品想要傳達(dá)的信息、以及不同的氣質(zhì),還能增加圖標(biāo)的形式感和趣味性。注意添加的圖形不要過(guò)于復(fù)雜,不然會(huì)讓信息混亂,適得其反。

4)中文圖形化

根據(jù)單個(gè)字體筆畫(huà)的特點(diǎn)進(jìn)行巧妙的變形或延展,會(huì)讓你的應(yīng)用圖標(biāo)更具設(shè)計(jì)感、品質(zhì)好。這種方式對(duì)設(shè)計(jì)功底的要求較高,需要確保字體的識(shí)別度,切勿霸王硬上弓,如果是為了設(shè)計(jì)而設(shè)計(jì),就違背的信息傳播的初衷。

5)中文、IP形象組合

由產(chǎn)品名稱和IP形象組合而成,這種方式能通過(guò)品牌IP不同的視覺(jué)形象帶給用戶情感化的體驗(yàn),讓產(chǎn)品更具親和力,拉近與用戶之間的關(guān)系。例如,IP的喜、怒、哀、樂(lè)表情變化分別對(duì)應(yīng)用戶不同的心理感受,以加深用戶對(duì)產(chǎn)品的印象及品牌認(rèn)知。

2. 英文字體

1)單英文字體

單英文字體通常是提取產(chǎn)品名稱拼音首字母或英文首字母進(jìn)行創(chuàng)意設(shè)計(jì),跟中文字體相比,基于字母本身線條的簡(jiǎn)潔及流暢性,再結(jié)合產(chǎn)品特點(diǎn),很容易設(shè)計(jì)出兼具美感、高識(shí)別度的應(yīng)用圖標(biāo)。

需要明確一點(diǎn),不管如何創(chuàng)意,也僅局限于在26個(gè)英文字母中選擇,如果想設(shè)計(jì)出差異化的應(yīng)用圖標(biāo),對(duì)設(shè)計(jì)師來(lái)說(shuō),是一個(gè)很大的挑戰(zhàn)。

2)多英文字體

跟多中文不同,中文產(chǎn)品名稱在移動(dòng)端基本不會(huì)超出6個(gè)字,而全拼音或英文名則多達(dá)十幾位甚至更多,為了用戶能更好容易識(shí)別、記憶,依然是提取不同拼音或單詞的首字母(中文全稱)進(jìn)行設(shè)計(jì)。

多英文的應(yīng)用圖標(biāo)很很容易形成獨(dú)有的產(chǎn)品簡(jiǎn)稱,更利于用戶記憶,但字母一定不要過(guò)多,如果無(wú)法刪減,那就只突出特定的2~4個(gè)字母。

3)其他類型

字母與圖形、IP形象組合以及字母圖形化,其表現(xiàn)方式、設(shè)計(jì)原則與中文字體圖標(biāo)類似,這里不做過(guò)多闡述。

3. 數(shù)字符號(hào)

1)數(shù)字設(shè)計(jì)

人們對(duì)于數(shù)字來(lái)說(shuō)是非常敏感的,不存在文化差異或認(rèn)知誤區(qū),基于數(shù)字便于記憶且容易識(shí)別的特點(diǎn),將數(shù)字圖形化后應(yīng)用到圖標(biāo)當(dāng)中,會(huì)讓產(chǎn)品具有親和力,有利于品牌傳播。單純的數(shù)字過(guò)于簡(jiǎn)單,需增加一些細(xì)節(jié),豐富圖標(biāo)層次,讓其具備獨(dú)特的記憶點(diǎn),不然會(huì)顯得單調(diào)。

2)符號(hào)設(shè)計(jì)

每個(gè)符號(hào)都有特定的含義,因此,在選擇符號(hào)作為應(yīng)用圖標(biāo)之前,首先需要了解清楚該符號(hào)是否能體現(xiàn)出產(chǎn)品屬性以及想要表達(dá)的意思,例如“¥”適合攢錢、理財(cái)相關(guān)的應(yīng)用,而“+-×÷”則適合用于計(jì)算器或數(shù)學(xué)相關(guān)的應(yīng)用;其次,符號(hào)跟數(shù)字一樣,都比較簡(jiǎn)單,需經(jīng)過(guò)二次創(chuàng)作后才會(huì)使用。

4. 扁平化圖形

1)線性圖形

線性風(fēng)格的應(yīng)用圖標(biāo)能給人一種簡(jiǎn)潔輕快的感覺(jué),設(shè)計(jì)師通過(guò)提取產(chǎn)品的品牌信息、功能服務(wù)等進(jìn)行創(chuàng)意設(shè)計(jì),將得到的關(guān)鍵詞以一條或多條線段組成高度抽象的圖形來(lái)達(dá)到信息傳播的目的。

通常以反白的形式出現(xiàn),背景可以是單色、漸變色或加以輔助圖形點(diǎn)綴。

線性圖形非常適合文藝類簡(jiǎn)約風(fēng)格的應(yīng)用,通過(guò)不同的線條帶給用戶不同的心理感受,例如直線代表大方、專業(yè)、正直;斜線代表張力、速度;曲線代表流暢、飄逸及柔軟等。

設(shè)計(jì)時(shí),切記圖形不能過(guò)于復(fù)雜,否則會(huì)影響其辨識(shí)度,增加用戶的認(rèn)知成本,也不利于品牌推廣。

2)面性圖形

也可稱之為剪影圖形,根據(jù)產(chǎn)品屬性,將日常生活中被大眾所熟知的動(dòng)物、植物、食品、工具、玩具…等事物進(jìn)行簡(jiǎn)化,通過(guò)刻畫(huà)事物的造型輪廓來(lái)形成獨(dú)立的剪影圖形。

高識(shí)別度的剪影圖形會(huì)讓整體看起來(lái)非常醒目,提高信息傳播的效率,只要控制好造型,即便把圖標(biāo)縮到很小也能清晰辨認(rèn)。

因現(xiàn)實(shí)世界中事務(wù)的復(fù)雜性,被提煉出的圖形如果細(xì)節(jié)過(guò)多會(huì)顯的復(fù)雜且不夠干練、細(xì)節(jié)過(guò)少則難以辨認(rèn),所以需要對(duì)圖形進(jìn)行創(chuàng)意加工,最終以確保應(yīng)用圖標(biāo)的功能和美感兼具。

3)幾何圖形

幾何圖形在應(yīng)用圖標(biāo)中使用的很廣泛,可以是線性或面性,表現(xiàn)形式也非常豐富,利用幾何圖形通過(guò)單獨(dú)、組合、布爾運(yùn)算等方式形成簡(jiǎn)單且個(gè)性化的創(chuàng)意圖形,帶給用戶簡(jiǎn)約、現(xiàn)代、空間、熱鬧等不同的心理感受。

幾何圖形構(gòu)圖簡(jiǎn)潔,設(shè)計(jì)形式豐富多樣,想設(shè)計(jì)出具備設(shè)計(jì)感和差異化的應(yīng)用圖標(biāo),很考驗(yàn)設(shè)計(jì)師的創(chuàng)意能力。

5. 卡通形象

對(duì)純色剪影圖形增加太多細(xì)節(jié),無(wú)疑是將其“大卸八塊”,變成一堆零件,但通過(guò)多色、漸變、圖層樣式等表現(xiàn)手法設(shè)計(jì)成卡通形象,就完全不一樣了。

卡通形象能體現(xiàn)出產(chǎn)品的生命力、親和力,以及直觀且易于理解和記憶的特質(zhì),對(duì)品牌形象的塑造、傳播起到了很好作用。

在畫(huà)卡通形象時(shí),需要注意產(chǎn)品主用戶群體的年齡段,切勿一開(kāi)始就把活潑可愛(ài)作為卡通形象的代名詞,避免絕對(duì)低齡化的表達(dá),同時(shí)需要設(shè)計(jì)師有一定的繪畫(huà)功底。

6. 擬人化

利用人體的局部元素,如眼睛、嘴巴、手足、頭部等,再結(jié)合常見(jiàn)的表情動(dòng)作進(jìn)行圖形化設(shè)計(jì),相當(dāng)于給原本冷冰冰的圖形賦予了生命力,傳達(dá)出不一樣的情感,而且用戶原本就對(duì)人體元素敏感度更高,更容易打動(dòng)用戶并形成較強(qiáng)的記憶。

擬人化的應(yīng)用圖標(biāo)會(huì)顯得親民,便于拉近與用戶之間的關(guān)系,適度在抽象的圖形上加入情感化(動(dòng)作/表情)表達(dá),能生動(dòng)、形象的體現(xiàn)出產(chǎn)品獨(dú)有的特性。

如果想要較強(qiáng)的視覺(jué)沖擊力,建議元素不要過(guò)多,最好是對(duì)某個(gè)單一的元素作放大或特寫(xiě)處理,讓用戶看到更多的細(xì)節(jié),也可用夸張、比喻、襯托等表現(xiàn)手法強(qiáng)化特點(diǎn)。

7. 擬物化

擬物化圖標(biāo)使用的比較少,它更偏向于某種行業(yè)類型,例如工具、游戲類型的應(yīng)用,通過(guò)超接近于現(xiàn)實(shí)世界中的物體造型,基本不需要用戶思考,一眼就能理解,但也正因?yàn)檫@種特性,信息量的傳播受到很大局限,僅適合單一且大眾化的信息傳達(dá)。

在如今,想同時(shí)融入行業(yè)、屬性、品牌等多元化內(nèi)容的信息化時(shí)代,顯然不太實(shí)用了。

四、背景圖案及元素

1. 圖形背景

應(yīng)用圖標(biāo)背景通常以單色、漸變色居多,除此之外,還可以添加與主體圖形相呼應(yīng)的輔助圖形背景,以豐富圖標(biāo)的視覺(jué)層次。圖形背景一定是為襯托或突出主體圖形的輔助存在,切勿過(guò)分表達(dá),以免喧賓奪主。

2. 炫彩背景

當(dāng)主體圖形的結(jié)構(gòu)、色彩不是很復(fù)雜,且產(chǎn)品面對(duì)的是年輕化用戶群體時(shí),可通過(guò)色彩拼接、晶格化或多種鮮明的色彩漸變等方式設(shè)計(jì)出炫彩效果,色彩表現(xiàn)豐富的應(yīng)用圖標(biāo),能帶給用戶更強(qiáng)的視覺(jué)沖擊力。色彩可多但不可亂,需要把控好色彩之間的對(duì)比關(guān)系。

3. 運(yùn)營(yíng)標(biāo)簽

常見(jiàn)于在特定的節(jié)日中,例如618、雙11、雙12及傳統(tǒng)節(jié)日等,產(chǎn)品會(huì)存在促銷、打折活動(dòng),為了更早的讓用戶知道,會(huì)在應(yīng)用圖標(biāo)的某個(gè)區(qū)域以標(biāo)簽的方式出現(xiàn),起到引導(dǎo)用戶的作用。

不過(guò)這種表現(xiàn)方式具有時(shí)效性,活動(dòng)截止即圖標(biāo)樣式復(fù)原。

4. 節(jié)日氛圍

通過(guò)配色或節(jié)日相關(guān)的元素點(diǎn)綴,營(yíng)造出一種感同身受的節(jié)日氛圍。例如:春節(jié)期間,部分應(yīng)用圖標(biāo)背景會(huì)調(diào)整為紅色,并使用燈籠、煙花、文案等元素點(diǎn)綴,制造出普天同慶、與用戶同樂(lè)的喜慶感,或者在高考期間鼓勵(lì)學(xué)生,少了套路、多了真誠(chéng),給用戶留下較深的印象。

五、主體圖形的表現(xiàn)手法

1. 對(duì)比

通過(guò)元素的大小、長(zhǎng)短、虛實(shí)、稀疏、方向以及不同的色彩、明暗關(guān)系等方式進(jìn)行對(duì)比,形成強(qiáng)烈的反差效果,同時(shí)兼具張力和美感,這也是應(yīng)用圖標(biāo)設(shè)計(jì)中很常見(jiàn)的技法表現(xiàn)之一。

2. 對(duì)稱

對(duì)稱在自然界中隨處可見(jiàn),在互聯(lián)網(wǎng)設(shè)計(jì)中也是如此,應(yīng)用圖標(biāo)中的主體圖形以對(duì)稱的方式呈現(xiàn),能給用戶平衡、和諧的感覺(jué),也讓圖標(biāo)更具有觀賞性。

3. 分割

將應(yīng)用圖標(biāo)中的主體圖形分割,賦予不同的顏色、樣式等,明確層級(jí)劃分,可提升圖標(biāo)的美感。例如:將色塊分割成不同的比例、形狀,就能組合成一個(gè)完整的熊貓圖形(百度搜“熊貓剪影”圖片)。

如果適合使用0.168黃金比例分割就再好不過(guò)了,這是被公認(rèn)為最具美感的比例。

4. 重復(fù)

將相同或相近的圖形以某種規(guī)律連續(xù)性的排列,相比單調(diào)的圖形,會(huì)更加飽滿。重復(fù)性的表現(xiàn)手法以大小、色彩、位置、形狀等作為出發(fā)點(diǎn)進(jìn)行有序的排列,最終形成一種規(guī)律、整齊的節(jié)奏和藝術(shù)感。

需要注意的是基礎(chǔ)圖形不能過(guò)于復(fù)雜,一定是有規(guī)律的重復(fù),否則會(huì)讓圖形變的混亂,無(wú)法形成整體。

5. 重疊

在保證識(shí)別度清晰的前提下,將兩個(gè)或以上的元素相互重疊、交叉在一起,能形成前后左右的層級(jí)關(guān)系,制造空間感,同時(shí)也能將多個(gè)圖形關(guān)聯(lián)在一起,避免圖標(biāo)元素零散或單調(diào),讓整體性更強(qiáng),豐富用戶視覺(jué)感知。

6. 正負(fù)形

正負(fù)形也是常見(jiàn)的表現(xiàn)手法之一,利用正圖為底,通過(guò)減去底層挖空的方式突出(錯(cuò)覺(jué))負(fù)形,將產(chǎn)品特征、屬性及服務(wù)多途徑的傳達(dá)給用戶,可謂是“一石二鳥(niǎo)”。

正負(fù)形圖標(biāo)能將信息傳播最大化,且設(shè)計(jì)感十足,好的正負(fù)形圖標(biāo)能給用戶形成獨(dú)特的記憶點(diǎn),但設(shè)計(jì)時(shí)需要注意正、負(fù)銜接的順暢度,否則無(wú)法清晰的傳播信息。

六、應(yīng)用圖標(biāo)設(shè)計(jì)流程

1. 發(fā)散思維、尋找隱喻

通過(guò)產(chǎn)品屬性、功能或特點(diǎn)進(jìn)行思維發(fā)散,例如:夏天,我們會(huì)想到空調(diào)、海灘、冰淇淋、比基尼、裙子(女性)、夜空等一系列相關(guān)聯(lián)的事和物,搜集起來(lái)并做好整理歸類,確定大致的設(shè)計(jì)方向。

2. 分析競(jìng)品、避免同質(zhì)化

確定了大致的設(shè)計(jì)方向,就去找同行業(yè)、同類型或相似的應(yīng)用圖標(biāo)分析其形狀、配色、組合類型等,取長(zhǎng)補(bǔ)短,這也是避免同質(zhì)化非常重要的一個(gè)環(huán)節(jié),幫助自己在后續(xù)設(shè)計(jì)出具備差異化的應(yīng)用圖標(biāo)做鋪墊。

3. 提取關(guān)鍵詞

可以從產(chǎn)品名稱或功能屬性方面找出產(chǎn)品最想傳達(dá)的核心信息,并提煉出關(guān)鍵詞。切記,關(guān)鍵詞不可脫離帶水、表意不明確,一定要夠精煉、能表達(dá)出核心內(nèi)容。關(guān)鍵詞在精不在多,如果太多,需要通過(guò)層層遞進(jìn),篩選出“一主三輔”,要知道這關(guān)系著后續(xù)應(yīng)用圖標(biāo)傳達(dá)信息的精準(zhǔn)度。

4. 圖標(biāo)繪制

將上一步得到的關(guān)鍵詞轉(zhuǎn)化成抽象圖形,進(jìn)行視覺(jué)化提煉,這時(shí)應(yīng)用圖標(biāo)的雛形已經(jīng)形成,再結(jié)合前面所提到的圖形分類、表現(xiàn)手法以及注意事項(xiàng)等,進(jìn)入圖標(biāo)繪制流程。關(guān)于圖標(biāo)設(shè)計(jì)規(guī)范及原則,在之前的《圖標(biāo)篇 | 圖標(biāo)設(shè)計(jì)必備的基礎(chǔ)知識(shí)!》文章中有詳細(xì)說(shuō)明,這里不做闡述。

5. 細(xì)節(jié)處理

基本圖形繪制完成后,通過(guò)添加點(diǎn)綴、輔助圖形、背景處理等方式豐富圖標(biāo)細(xì)節(jié),進(jìn)行精細(xì)化處理,使其更精致,具備高識(shí)別度及品質(zhì)感。

6. 適用性測(cè)試

分別通過(guò)移動(dòng)端應(yīng)用商店列表、應(yīng)用詳情、設(shè)置中應(yīng)用列表、桌面以及WEB商店等,對(duì)不同位置的大小、不同的桌面背景進(jìn)行虛擬測(cè)試,以確保在不同場(chǎng)景中都能被用戶高度識(shí)別,如果這些問(wèn)題等著被用戶發(fā)現(xiàn),很可能給產(chǎn)品帶來(lái)不利的影響。

7. 輸出切圖

需要對(duì)iOS和Android系統(tǒng)各輸出一套圖標(biāo),iOS只需一個(gè)1024px的切圖便能適配所有,且無(wú)需設(shè)定圓角。Android則需要多套切圖規(guī)范,如512px、198px、144px、96px、72px、48px,圓角半徑以512px為基準(zhǔn)設(shè)定為90px(參考值)。

這些固定的尺寸規(guī)范并不在技術(shù)能力范疇,如果實(shí)在不清楚,需要用時(shí)就“百度一下”一大把,或直接找開(kāi)發(fā)人員拿尺寸都不是難事。

七、總結(jié)

首先,筆者要感謝耐心看到這里的小伙伴,希望總結(jié)的內(nèi)容能幫到大家,在前期設(shè)計(jì)中作為資料參考,避免出現(xiàn)常見(jiàn)的問(wèn)題,防止進(jìn)入誤區(qū)。

其次,要想設(shè)計(jì)出優(yōu)秀的應(yīng)用圖標(biāo)僅看上述內(nèi)容是遠(yuǎn)遠(yuǎn)不夠的,少不了平時(shí)的多看、多練、多思考,需日積月累,逐漸提升自己的視覺(jué)審美、造型提煉、執(zhí)行效率等多方面設(shè)計(jì)能力。

應(yīng)用圖標(biāo)的總結(jié)分享就到這里了,對(duì)你有幫助的話就給筆者點(diǎn)個(gè)贊吧,如果有不同意見(jiàn),歡迎在評(píng)論區(qū)交流或指正,以便查漏補(bǔ)缺,共同進(jìn)步。

#專欄作家#

大漠飛鷹;公眾號(hào):能量眼球,人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘,利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn),即好看、好用。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于 CC0 協(xié)議

蘭亭妙微(www.lapeinture.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

日歷

鏈接

個(gè)人資料

存檔

国产福利免费观看| 成人影视在线播放| 欧美一级视频高清片| 日本伦理黄色大片在线观看网站| 国产91精品一区| 欧美a级片免费看| 91麻豆tv| 天天做日日爱| 欧美a级片视频| 久久国产精品永久免费网站| 欧美激情一区二区三区视频高清| 欧美大片aaaa一级毛片| 欧美日本免费| 久久99这里只有精品国产| 成人免费观看网欧美片| 国产91精品一区| 久久国产一区二区| 欧美a免费| 99久久精品国产麻豆| 亚洲www美色| 欧美激情一区二区三区在线播放 | 国产一区二区精品久久| 日韩女人做爰大片| 韩国三级视频网站| 国产成人啪精品视频免费软件| 欧美激情一区二区三区在线播放| 国产成人精品综合在线| 久久精品道一区二区三区| 国产国语对白一级毛片| 欧美激情一区二区三区视频高清| 欧美一区二区三区在线观看| 成人av在线播放| 日韩免费在线视频| 精品视频免费看| 一级女性大黄生活片免费| 你懂的日韩| 久久久久久久网| 色综合久久天天综合观看| 天天做人人爱夜夜爽2020毛片| 国产亚洲精品成人a在线| 国产一区二区精品久久91| 美女免费毛片| 日韩一级黄色大片| 亚欧视频在线| 精品视频免费观看| 久久久久久久男人的天堂| 日韩免费在线| 国产一区精品| 国产视频一区二区三区四区| 成人高清免费| 九九精品久久久久久久久| 日本伦理黄色大片在线观看网站| 日韩一级黄色| 九九精品久久久久久久久| 99色视频| 中文字幕97| 久久99这里只有精品国产| 精品久久久久久中文字幕2017| 欧美a级片免费看| 国产视频一区在线| 在线观看导航| 中文字幕一区二区三区 精品| 国产成人啪精品视频免费软件| 可以免费看毛片的网站| 可以免费看污视频的网站| 日韩欧美一二三区| 久久国产精品只做精品| 免费毛片基地| 精品国产一区二区三区久| 91麻豆国产福利精品| 成人av在线播放| 色综合久久天天综线观看| 国产麻豆精品| 日韩女人做爰大片| 香蕉视频久久| 国产成人女人在线视频观看| 国产网站免费视频| 尤物视频网站在线观看| 久久99中文字幕| 天天做日日爱| 欧美日本免费| 久久99青青久久99久久| 国产成人欧美一区二区三区的| 亚洲天堂免费| 国产伦精品一区二区三区在线观看 | 国产视频一区二区三区四区| 久久精品大片| 欧美1区2区3区| 精品视频免费在线| 日韩女人做爰大片| 好男人天堂网 久久精品国产这里是免费 国产精品成人一区二区 男人天堂网2021 男人的天堂在线观看 丁香六月综合激情 | 国产网站免费| 色综合久久天天综合绕观看| 久久99中文字幕久久| 精品国产一区二区三区免费 | 日韩av片免费播放| 亚洲 激情| 精品视频一区二区三区免费| 国产成a人片在线观看视频| 麻豆污视频| 欧美激情一区二区三区在线| 91麻豆tv| 国产亚洲精品aaa大片| 精品视频免费看| 日本在线播放一区| 99久久网站| 九九精品久久久久久久久| 精品视频一区二区三区免费| 韩国三级视频网站| 免费一级片在线| 久草免费在线观看| 国产一区二区精品在线观看| 九九精品久久久久久久久| 精品视频免费在线| 亚欧乱色一区二区三区| 美国一区二区三区| 欧美a级v片不卡在线观看| 成人免费网站久久久| 香蕉视频久久| 欧美激情伊人| 九九九网站| 国产不卡福利| 黄视频网站在线观看| 日韩在线观看免费| 国产国语在线播放视频| 国产视频一区二区在线观看| 久久福利影视| 国产激情一区二区三区| 国产亚洲精品成人a在线| 日韩avdvd| 久久成人综合网| a级精品九九九大片免费看| 二级特黄绝大片免费视频大片| 精品在线观看国产| 精品视频在线看 | 日本久久久久久久 97久久精品一区二区三区 狠狠色噜噜狠狠狠狠97 日日干综合 五月天婷婷在线观看高清 九色福利视频 | 欧美大片a一级毛片视频| 欧美另类videosbestsex视频| 沈樵在线观看福利| 亚洲天堂免费| 国产成人精品一区二区视频| 可以免费看污视频的网站| 黄色福利片| 欧美激情一区二区三区视频 | 久久国产一区二区| 四虎久久影院| 国产国语对白一级毛片| 九九九网站| 可以在线看黄的网站| 日本免费乱人伦在线观看| 国产91精品系列在线观看| 国产伦久视频免费观看 视频| 亚欧视频在线| 亚欧成人乱码一区二区| 香蕉视频久久| 国产麻豆精品hdvideoss| 精品视频在线观看免费| 久久精品大片| 久久国产精品只做精品| 精品国产一级毛片| 国产原创视频在线| 精品视频一区二区三区免费| 一级毛片视频播放| 尤物视频网站在线观看| 精品视频免费观看| 国产一区二区精品在线观看| 精品视频免费看| 日本久久久久久久 97久久精品一区二区三区 狠狠色噜噜狠狠狠狠97 日日干综合 五月天婷婷在线观看高清 九色福利视频 | 欧美1区2区3区| 国产一区精品| 久久久久久久网| 国产91精品系列在线观看| 天堂网中文在线| 国产高清在线精品一区二区| 日本在线播放一区| 午夜激情视频在线观看| 国产麻豆精品视频| 午夜久久网| 日韩中文字幕一区二区不卡| 国产美女在线观看| 精品国产一区二区三区久| 好男人天堂网 久久精品国产这里是免费 国产精品成人一区二区 男人天堂网2021 男人的天堂在线观看 丁香六月综合激情 | 日本特黄一级| 国产网站免费在线观看| 久草免费在线色站| 91麻豆国产| 欧美激情伊人| 夜夜操网| 欧美a级成人淫片免费看| 欧美一区二区三区性| 久久国产精品只做精品| 四虎影视久久久| 99热精品在线| 欧美国产日韩一区二区三区| 精品在线观看一区| 久久福利影视| 日本免费区| 精品视频一区二区三区| 亚州视频一区二区| 欧美另类videosbestsex久久 |