九九精品影院-九九精品在线-九九精品在线播放-九九九国产-国产成+人+综合+亚洲不卡-国产成a人片在线观看视频

設(shè)計(jì)師做了哪些事情讓產(chǎn)品界面更高級(jí)？

2025-7-4 濤濤

一、構(gòu)圖排版

（一）構(gòu)圖造型藝術(shù)術(shù)語(yǔ)

定義：構(gòu)圖是作品中藝術(shù)形象的結(jié)構(gòu)配置方法，是造型藝術(shù)表達(dá)作品思想內(nèi)容并獲得藝術(shù)感染力的重要手段，在視覺(jué)藝術(shù)（如繪畫(huà)、平面設(shè)計(jì)、攝影）中常用，在 UI 設(shè)計(jì)中主要作用是構(gòu)建和諧穩(wěn)定的布局頁(yè)面。

（二）構(gòu)圖心理學(xué)

黑林錯(cuò)覺(jué)：中間兩條線實(shí)際平行，但看起來(lái)是彎的。
馮特錯(cuò)覺(jué)：中間兩條線平行，視覺(jué)上呈彎曲狀。
龐佐錯(cuò)覺(jué)：中間四邊形為矩形，而非頂邊比底邊寬的四角星形。
厄任斯坦錯(cuò)覺(jué)：中間矩形四邊看似彎曲。
波根多夫錯(cuò)覺(jué)：觀看時(shí)大腦會(huì)習(xí)慣性自動(dòng)補(bǔ)齊斷線。
菲克錯(cuò)覺(jué)：垂直線段與水平線段等長(zhǎng)，但垂直線段看起來(lái)更長(zhǎng)。
穆勒萊爾錯(cuò)覺(jué)：末端加向外斜線的線段比加向內(nèi)斜線的線段看起來(lái)更長(zhǎng)，實(shí)際等長(zhǎng)。
艾兵浩斯錯(cuò)覺(jué)：左邊中間的圓與右邊中間的圓大小相同，但視覺(jué)上左邊更大。
卡泥沙錯(cuò)覺(jué)：大腦會(huì)腦補(bǔ)出實(shí)際不存在的三角形輪廓。
垂直水平錯(cuò)覺(jué)：正方形是構(gòu)成任何設(shè)計(jì)系統(tǒng)的基石。
馬赫帶效應(yīng)：同色漸變毗鄰擺放是常見(jiàn)的扁平化設(shè)計(jì)手法（如 #E91E63 等色值示例）。
同時(shí)同比錯(cuò)覺(jué)：同色物體置于不同對(duì)比度背景上，會(huì)呈現(xiàn)不同視覺(jué)效果。

（三）設(shè)計(jì)構(gòu)圖技巧

穩(wěn)定性：對(duì)稱平衡的形態(tài)具有自然、安定、均衡、協(xié)調(diào)、整齊、典雅、莊重的樸素美感，符合視覺(jué)習(xí)慣。
強(qiáng)點(diǎn)優(yōu)先：畫(huà)面中人的眼睛、人臉、明暗交界處等是天生強(qiáng)點(diǎn)，常見(jiàn)于黃金分割線位置。
均勢(shì)：通過(guò)物理學(xué)規(guī)律支撐畫(huà)面，保持視覺(jué)重心平衡，調(diào)整積極元素與消極元素關(guān)系，確保區(qū)域無(wú)偏差，元素?zé)o縫銜接。

（四）排版原理

格式塔原理（1912 年由德國(guó)心理學(xué)家提出，解釋人類視覺(jué)工作原理）
- 簡(jiǎn)單：眼腦觀看時(shí)會(huì)將形象各部分組合成更易理解的統(tǒng)一體，暗合三角形構(gòu)圖、對(duì)稱構(gòu)圖、向心式構(gòu)圖、對(duì)角線、X 構(gòu)圖等法則，目的是在復(fù)雜信息環(huán)境中構(gòu)建易懂整體。
- 相似：眼睛易關(guān)注相似物體（形狀、大小、顏色），無(wú)論位置是否相鄰，都會(huì)將其聯(lián)系起來(lái)。
- 接近：?jiǎn)蝹€(gè)視覺(jué)元素距離接近時(shí)，視覺(jué)上會(huì)形成較大整體，個(gè)性減弱。
- 閉合：觀察熟悉視覺(jué)形象時(shí)，會(huì)把不完整局部作為整體感知，若局部過(guò)于陌生或簡(jiǎn)略，會(huì)產(chǎn)生整體閉合聯(lián)想。
親密性原則：相關(guān)項(xiàng)應(yīng)靠近歸組，成為視覺(jué)單位，減少混亂，提供清晰結(jié)構(gòu)。
重復(fù)原則：視覺(jué)要素（字體、顏色、形狀、線條、大小、圖片等）在畫(huà)面中重復(fù)出現(xiàn)，增加條理性和統(tǒng)一性，形成節(jié)奏感。
停頓：節(jié)奏中斷讓設(shè)計(jì)更有層次，如 Twitter feed 流中插入列表推薦，可抓住注意力。

二、色彩

（一）色彩常恒性

定義：當(dāng)照射物體表面的顏色變化時(shí)，人們對(duì)該物體表面顏色的知覺(jué)仍保持不變的知覺(jué)特征。

（二）色散試驗(yàn)

1666 年，英國(guó)物理學(xué)家牛頓用三棱鏡證明光是由紅、橙、黃、綠、藍(lán)、靛、紫等單色光復(fù)合而成。

（三）色彩概念

色光混合：紅、綠、藍(lán)為色光三原色，不同量混合可呈現(xiàn)其他顏色，等量混合為白色光，又稱加法混合或正混合。
油墨混合：青、品、黃為顏料三原色，無(wú)法通過(guò)混合形成，不同比例混合呈現(xiàn)多重色彩，等量混合為次黑色，又稱減法混合或負(fù)混合。

（四）色彩三要素

色相（Hue）：各類色彩的相貌稱謂（如大紅、普藍(lán)、檸檬黃），是色彩首要特征，由原色、間色和復(fù)色構(gòu)成。
飽和度（Saturation）：色彩的鮮艷程度（純度），取決于含色成分和消色成分（灰色）比例，含色成分越大飽和度越高。
明度（Brightness）：眼睛對(duì)光源和物體表面明暗程度的感覺(jué)，由光線強(qiáng)弱決定，取決于物體照明程度和反射系數(shù)。

（五）基本色環(huán)（Color Wheel）

光譜順序：紅、橙紅、黃橙、黃、黃綠、綠、綠藍(lán)、藍(lán)、藍(lán)紫、紫、紫紅，十二色相環(huán)每色相距 30 度，二十四色相環(huán)每色相距 15 度。

（六）配色方法

同一色：色相環(huán)中任意色因明度變化呈現(xiàn)的色彩，通過(guò)在純色中加入黑、白、灰形成，主色和輔色在同一色相，頁(yè)面風(fēng)格一致。
同類色（類似色）：色相環(huán)上原色起 45 度以內(nèi)的色彩，色相性質(zhì)相同但色度有深淺之分，含較多共同色彩元素。
相鄰色：色相環(huán)中相距 90 度或相隔五六個(gè)數(shù)位的兩色，屬中對(duì)比效果色組，色相近似、冷暖性質(zhì)一致、色調(diào)統(tǒng)一和諧。
對(duì)比色：色相環(huán)上色相差異大、純度高的亮色，對(duì)比效果強(qiáng)烈，當(dāng)彩度和明度相同時(shí)對(duì)比更明顯，越接近補(bǔ)色對(duì)比越強(qiáng)烈，需精準(zhǔn)掌控色彩搭配和面積，主導(dǎo)色帶動(dòng)頁(yè)面氣氛。
補(bǔ)色（互補(bǔ)色、余色）：兩種顏色等量混合呈現(xiàn)黑灰色，色環(huán)直徑兩端相對(duì)之色，對(duì)比過(guò)于沖撞，少用于傳統(tǒng)網(wǎng)頁(yè)，多用于活動(dòng) banner 吸引眼球。
消色：黑白灰等無(wú)彩色系。

（七）色彩搭配

色彩構(gòu)成原則：一款 App 顏色不超過(guò)三個(gè)系，主色（75%，決定界面風(fēng)格）、輔色（20%，豐富界面）、點(diǎn)綴色（5%，引導(dǎo)閱讀、裝飾畫(huà)面）。如中國(guó)移動(dòng)設(shè)計(jì)顏色控制在 1-2 個(gè)，輔以黑白灰；常見(jiàn)藍(lán)色系（Facebook、Twitter、支付寶），但非所有應(yīng)用都適合。
色彩關(guān)系
- 協(xié)調(diào)感：通過(guò)同一色混合、同類色混合、相鄰色混合、中消色混合，滿足人類生理和心理安全感需求，保障長(zhǎng)時(shí)間閱讀。
- 對(duì)比：通過(guò)對(duì)比色對(duì)比、純度對(duì)比、面積對(duì)比、明度對(duì)比制造沖突感，引起用戶注意。

（八）配色靈感捕獲

圖片來(lái)源：選取有凝聚力的圖片，通過(guò) Photoshop 濾鏡 - 馬賽克或 Sketch 插件 - Alembic 凝聚色塊獲取配色。
中國(guó)風(fēng)色彩示例：月白藍(lán)、湖水藍(lán)、勿忘草、天青藍(lán)、薄荷藍(lán)、洪藍(lán)、古蘭、深海藍(lán)。