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

首頁

解鎖HMI設(shè)計(jì)規(guī)范

前端達(dá)人

1. 前言
車載HMI設(shè)計(jì)近年來成為一個(gè)熱門領(lǐng)域。許多朋友對HMI設(shè)計(jì)感興趣,卻苦于不知如何入手,不了解HMI設(shè)計(jì)的基本原則和規(guī)范。有人誤以為HMI設(shè)計(jì)僅是設(shè)計(jì)類似iPad的界面,認(rèn)為可以直接應(yīng)用移動端或Web端的規(guī)范,這是不正確的。HMI設(shè)計(jì)擁有其獨(dú)特的設(shè)計(jì)規(guī)范。本文旨在介紹HMI端的設(shè)計(jì)系統(tǒng)和原則。當(dāng)然,這些規(guī)范主要用于參考,特殊情況下可以適當(dāng)打破這些規(guī)則。
 
2. HMI設(shè)計(jì)原則
2.1. 交互原則
在當(dāng)前的駕駛環(huán)境中,自動駕駛尚不能完全取代人工駕駛,駕駛者在行車過程中仍需保持對路況的高度注意,因此確保駕駛安全是設(shè)計(jì)的首要前提。本文將主要介紹視覺部分的設(shè)計(jì)考量,關(guān)于車載交互的詳細(xì)討論將在后續(xù)文章中更新。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
2.2. 視覺原則
在以駕駛安全為前提的設(shè)計(jì)中,需要確保內(nèi)容的易讀性,目標(biāo)的易用性,以及界面元素的一致性,從而滿足用戶在全場景下的體驗(yàn)需求。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
3. HMI設(shè)計(jì)系統(tǒng)
3.1. 為什么要搭建設(shè)計(jì)系統(tǒng)
一致性
:設(shè)計(jì)系統(tǒng)提供了一套統(tǒng)一的視覺和功能組件,確保不同的產(chǎn)品、頁面和功能在視覺表現(xiàn)和用戶體驗(yàn)上具有高度一致性。這不僅減少了用戶的學(xué)習(xí)成本,也加強(qiáng)了品牌的整體形象和專業(yè)性。
提高效率
:設(shè)計(jì)系統(tǒng)中的可重用組件和明確的設(shè)計(jì)指南可以大大減少設(shè)計(jì)和開發(fā)的工作量。設(shè)計(jì)師和開發(fā)者可以快速采用預(yù)定義的元素來構(gòu)建新功能或改進(jìn)現(xiàn)有功能,無需從零開始。這有助于縮短項(xiàng)目時(shí)間線,實(shí)現(xiàn)產(chǎn)品的快速迭代。
易于維護(hù)
:當(dāng)所有設(shè)計(jì)元素和代碼都遵循一個(gè)統(tǒng)一的系統(tǒng)時(shí),維護(hù)和更新變得更加簡單和高效。例如,如果需要更新品牌顏色或修改按鈕樣式,只需在設(shè)計(jì)系統(tǒng)中進(jìn)行更改,相關(guān)變更即可自動應(yīng)用到所有使用這些元素的地方。
提高跨團(tuán)隊(duì)協(xié)作
:設(shè)計(jì)系統(tǒng)作為一個(gè)共享的資源庫,可以幫助不同的團(tuán)隊(duì)成員(如設(shè)計(jì)師、開發(fā)者、產(chǎn)品經(jīng)理等)更好地協(xié)同工作。一個(gè)擁有詳細(xì)文檔和標(biāo)準(zhǔn)的系統(tǒng)確保每個(gè)團(tuán)隊(duì)成員都能理解和正確使用組件,減少溝通成本和誤解。
適應(yīng)性和可擴(kuò)展性
:良好的設(shè)計(jì)系統(tǒng)具備高度的適應(yīng)性和可擴(kuò)展性,能夠隨著公司和產(chǎn)品的發(fā)展而成長。隨著新需求的出現(xiàn),設(shè)計(jì)系統(tǒng)可以持續(xù)更新和擴(kuò)展,新的設(shè)計(jì)元素和組件可以被添加進(jìn)來,而不會破壞現(xiàn)有的系統(tǒng)結(jié)構(gòu)。
提升用戶體驗(yàn)
:統(tǒng)一和標(biāo)準(zhǔn)化的用戶界面組件不僅可以加速開發(fā)流程,還可以直接提升最終用戶的體驗(yàn)。一致的界面和預(yù)測性的交互可以幫助用戶更快地適應(yīng)軟件,提高用戶滿意度。
3.2. 原子設(shè)計(jì)
談到設(shè)計(jì)系統(tǒng),我們不得不提原子設(shè)計(jì)。原子設(shè)計(jì)是由Brad Frost于2013年提出的一種設(shè)計(jì)系統(tǒng)方法論,它將界面設(shè)計(jì)分解為更小的組件,目的是提高工作效率和保持設(shè)計(jì)一致性。原子設(shè)計(jì)包括五個(gè)層次:原子、分子、組織、模板和頁面。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
原子
:設(shè)計(jì)中最小的可復(fù)用單元,包括顏色、字體、圖標(biāo)等基礎(chǔ)元素。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
分子
:由原子組合形成的更復(fù)雜元素,例如按鈕、輸入框等具有特定功能的組件。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
組織
:由分子和原子構(gòu)成的模塊,承載更復(fù)雜的功能和信息結(jié)構(gòu)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
模板
:將原子和分子組合成的布局框架,定義頁面結(jié)構(gòu)和內(nèi)容區(qū)域的排版。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
頁面
:結(jié)合模板和具體內(nèi)容,形成最終的界面設(shè)計(jì)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
接下來步入正題,本文將詳細(xì)講述HMI的視覺樣式指南,內(nèi)容包括顏色、布局、排版和圖標(biāo)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
4. 顏色
4.1. 顏色對比度
由于駕駛環(huán)境復(fù)雜多變,如地下車庫、隧道、陰雨天、陽光刺眼的晴天、白天及夜晚,設(shè)計(jì)時(shí)需考慮不同光照條件下的可讀性。文本與背景色的對比度應(yīng)滿足特定標(biāo)準(zhǔn),建議對比度大于7:1,至少應(yīng)為4.5:1。這些數(shù)字區(qū)間的依據(jù)是什么呢?參考WCAG(網(wǎng)絡(luò)內(nèi)容無障礙指南),這些標(biāo)準(zhǔn)旨在為視障人士提供更好的體驗(yàn),同時(shí)也便于普通人使用。汽車作為面向大眾的產(chǎn)品,應(yīng)考慮視障用戶的需求。在不佳的使用場景下(如強(qiáng)烈陽光或昏暗環(huán)境中),我們也可能經(jīng)歷暫時(shí)性的視覺障礙,難以清晰感知內(nèi)容。
根據(jù)WCAG,對比度應(yīng)符合AA級與AAA級的標(biāo)準(zhǔn)。AA級要求小文本與背景的對比度至少為4.5:1,大文本與背景的對比度至少為3:1。AAA級則要求小文本與背景的對比度至少為7:1,大文本與背景的對比度至少為4.5:1。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
根據(jù)WCAG,小文本指的是字號在19px以下的粗體文本,或者字號在24px以下的常規(guī)體文本。大文本則是指字號至少為19px且為粗體的文本,或者字號為24px以上的常規(guī)體文本。在HMI設(shè)計(jì)中,最小文本字號定為20px,字重為常規(guī)。因此,文本與背景的對比度不應(yīng)低于4.5:1。同時(shí),對比度也不宜過高,因?yàn)檫^高的對比度可能導(dǎo)致閱讀疲勞,降低閱讀效率。在深色背景下,文本與圖形的對比度建議不要超過18:1。您可以通過以下鏈接訪問一個(gè)網(wǎng)站,以計(jì)算文本與背景的對比度:https://www.siegemedia.com/contrast-ratio#%23272e3b-on-%231868de
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
4.2. 顏色分類
HMI設(shè)計(jì)主流趨勢是采用深色背景,這在夜間或光線較暗的環(huán)境中可以減少屏幕亮度對視野的沖擊,并有效減少陽光及其他光源的反射。在深色背景上,鮮艷的色彩(如紅色、藍(lán)色等)更加突出,便于駕駛員快速識別重要信息。在使用深色背景時(shí),應(yīng)避免大面積使用純白色,以免過度吸引用戶注意力。
然而,隨著屏幕硬件技術(shù)的進(jìn)步,越來越多的車機(jī)系統(tǒng)開始采用淺色背景。這樣做不僅能在保持高對比度的同時(shí)有效控制反射和眩光,還確保了淺色背景在各種光線條件下的良好可讀性。由于手機(jī)和平板設(shè)備普遍采用淺色背景,用戶已習(xí)慣此類界面,這一習(xí)慣也推動了車機(jī)頁面設(shè)計(jì)向淺色背景的轉(zhuǎn)變。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
在界面設(shè)計(jì)中,中性色主要用于文字、背景、邊框和分割線,通過中性色的明度差異來營造空間的縱深感。在視覺感知中,明度較高的顏色在Z軸上的位置看起來更高,這有助于區(qū)分不同層次。在深色背景下,應(yīng)通過調(diào)整白色的透明度而非使用灰色來進(jìn)行對比和層次區(qū)分。功能色代表特定的信息狀態(tài),需符合用戶對色彩的基本認(rèn)知,例如:成功用綠色表示、失敗用紅色表示、提醒用黃色表示、鏈接用藍(lán)色表示。同時(shí),還需要設(shè)定合理的對比度和飽和度,以確保在駕駛環(huán)境下能有效識別這些顏色。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
車機(jī)配色應(yīng)避免大量使用鮮艷的色彩,以免過度吸引用戶的注意力。根據(jù)Munsell Color原理,顏色的飽和度和明度兩個(gè)數(shù)值越大,顏色越鮮艷。在車機(jī)配色中,我們需要遵循以下兩個(gè)規(guī)則:
1.越接近右上角的顏色越鮮艷,應(yīng)避免使用這類顏色;
2.選色時(shí)應(yīng)關(guān)注飽和度和明度,這兩個(gè)數(shù)值之和應(yīng)盡量小于180(S飽和度 + B明度 ≤ 180)。同時(shí),品牌色的合理應(yīng)用能有效傳達(dá)品牌調(diào)性,但不建議大量使用紅色系作為品牌的功能色。
 
4.3. 大廠顏色規(guī)范
解鎖HMI設(shè)計(jì)規(guī)范
 
 
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
5. 布局
5.1. 屏幕種類與屏幕分辨率
車機(jī)的屏幕尺寸與分辨率種類繁多,且車機(jī)涵蓋多種屏幕類型,如儀表屏、中控屏、副駕娛樂屏、后排娛樂屏等。接下來介紹幾款熱門車型的屏幕參數(shù)。
小米SU7
儀表屏:7.1英寸
中控屏:16.1英寸、3072x1920
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
特斯拉 Model Y
中控屏:15英寸、1920x1080
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
問界M7
儀表屏:10.25英寸、1920x720
中控屏:15.6英寸、1920x1080
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
蔚來ES6
儀表屏:10.2英寸、1920x532
中控屏:12.8英寸、1728x1888
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
小鵬G9
儀表屏:10.25英寸、1920x720
中控屏:14.96英寸、2400x1200
副駕娛樂屏:14.96英寸、2400x1200
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
理想L7
儀表屏:4.82英寸、800x166
中控屏:15.7英寸、2880x1620
副駕娛樂屏:15.7英寸、2880x1620
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
通過對主要汽車廠商車型的屏幕分辨率進(jìn)行收集與分析,發(fā)現(xiàn)當(dāng)前市面上主流的屏幕分辨率比例主要為16:9和8:3,這兩種比例合計(jì)覆蓋了72.39%的車型。因此,建議將這兩種比例作為屏幕適配的基準(zhǔn)。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
5.2. 柵格系統(tǒng)
布局區(qū)域大于或等于1600dp時(shí),建議使用12柵格系統(tǒng)。布局區(qū)域在720dp到1600dp之間時(shí),建議使用8柵格。而當(dāng)布局區(qū)域小于720dp時(shí),則建議使用4柵格。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
5.3. 間距規(guī)范
間距可以賦予頁面信息更有節(jié)奏的感覺,從而提升內(nèi)容的可讀性和閱讀效率。通過采用不同的間距,可以有效區(qū)分頁面的組織和內(nèi)容。
在設(shè)計(jì)師層面:制定間距規(guī)范可以有效減少決策和思考的時(shí)間,提高工作效率。
在開發(fā)層面:開發(fā)者不一定能夠準(zhǔn)確辨識1dp的差異,但能夠明顯區(qū)分出8dp的差距。基礎(chǔ)間距以8dp及其倍數(shù)為增量(例如8dp、16dp、24dp、32dp、48dp等),這樣開發(fā)者無需每次都精確測量,同時(shí)也能減少誤差,提高設(shè)計(jì)稿的還原度。
在用戶層面:具有一致節(jié)奏和韻律的頁面更加美觀。依據(jù)親密性原則合理調(diào)整間距,可以使用戶更加輕松地感知和區(qū)分信息,從而提升用戶體驗(yàn)。
 
谷歌Android Auto的布局間距采用8dp作為主要增量,而一些較小的組件則采用4dp作為增量。間距規(guī)范共設(shè)定了九種數(shù)值,分別為P0至P8。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
小tips:為了更好地對齊并留出足夠的間距,較小的組件可以使用4dp和12dp的間距,但需謹(jǐn)慎使用。對于信息較少的頁面(如缺省頁、登錄頁等),使用96dp的間距可能無法很好地滿足留白需求,此時(shí)可以考慮使用120dp、160dp或200dp等其他間距數(shù)值。細(xì)心的朋友可能會注意到,在以8dp為基準(zhǔn)單位定義間距時(shí),40dp和56dp這兩個(gè)數(shù)值并未包括在內(nèi),盡管它們都是8的倍數(shù)。例如,16dp是8dp的2倍,間距變化較為明顯。然而,將56dp與64dp進(jìn)行比較時(shí),64dp僅比56dp大1.4倍,兩者間的差異相對較小。設(shè)計(jì)師在定義間距規(guī)范時(shí)需要遵循倍數(shù)規(guī)則,同時(shí)也應(yīng)考慮頁面的美觀和用戶體驗(yàn),避免過于呆板地遵守規(guī)則。
定義間距沒有絕對的標(biāo)準(zhǔn),主要取決于最小單位,如4dp、5dp、6dp、8dp等,具體選擇哪個(gè)取決于產(chǎn)品的定位和內(nèi)容的形式。重要的是,所有間距需要基于最小單位并以倍數(shù)的形式規(guī)律排列,以保證元素間有良好的節(jié)奏感。
 
6. 排版
文字是界面設(shè)計(jì)中非常重要的信息元素,其字體選擇、字階、字重、顏色及行高都是影響視覺可讀性和閱讀效率的關(guān)鍵因素。對于字體的選擇,建議在中文排版中使用思源黑體,而英文則使用Roboto。在中英文混排的情況下,應(yīng)統(tǒng)一使用系統(tǒng)中文字體;在純英文排版時(shí),則統(tǒng)一使用系統(tǒng)的英文專用字體。
6.1. 字階
字階在界面設(shè)計(jì)中用于區(qū)分內(nèi)容的主次關(guān)系,合理的字階應(yīng)用決定了內(nèi)容的節(jié)奏和秩序。為了構(gòu)建穩(wěn)定且具有良好可讀性的字階設(shè)計(jì),根據(jù)IDX & 同濟(jì)(2020)百度Apollo中控視覺基礎(chǔ)研究項(xiàng)目、谷歌Android Auto和華為車機(jī)UI設(shè)計(jì)規(guī)范的研究成果,我們可以發(fā)現(xiàn)字號通常以4的倍數(shù)遞增,且最小字號不應(yīng)小于20(標(biāo)簽類輔助文案應(yīng)謹(jǐn)慎使用),正文字號最小為24。文本的主副層級應(yīng)通過4至8的字號差距來區(qū)分。對于需要用戶閱讀和處理的重要信息,每個(gè)段落的文字?jǐn)?shù)量不應(yīng)超過20字,以確保用戶可以在2秒內(nèi)閱讀完畢(700字/1分鐘)
解鎖HMI設(shè)計(jì)規(guī)范
 
 
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
6.2. 字重
對于需要用戶關(guān)注的文本信息,可以通過調(diào)整字重來突出內(nèi)容。建議使用Regular或Medium字重,這樣的字重使文本看起來更清晰和舒適。相比之下,更粗的字體不易辨認(rèn),可能會影響閱讀速度,導(dǎo)致駕駛員分心,同時(shí)也可能引起視覺疲勞。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
 
6.3. 行高
行高是指上邊框、下邊框加上字號高度的總和,可以想象成一個(gè)包裹在字體外面的透明盒子。行高主要針對多行文本;對于單行文本,使用默認(rèn)的Auto行高即可。在設(shè)計(jì)頁面時(shí),由于文字會有不同的字號構(gòu)成,便于閱讀的考慮通常會設(shè)定適當(dāng)?shù)男懈摺2煌男懈邔ξ淖值囊鬃x性影響較大。
文本的行高一般設(shè)置為字號的120%-150%,然而由于字階規(guī)范中包含多個(gè)字號,不易確定具體每個(gè)字號應(yīng)使用120%還是150%的行高。行高的具體比例與字號密切相關(guān):字號越小,建議的行高比例越大;反之,字號越大,折行的概率通常越小。
根據(jù)Ant Design的經(jīng)驗(yàn),行高可以設(shè)置為字號加8。雖然這種動態(tài)變化的字號與固定加8的方法看起來可能顯得死板,實(shí)際上它非常有效。例如,20px的字號加8等于28px行高,這是字號的1.4倍;56px字號加8則為64px行高,約是字號的1.14倍,符合‘字號越小,行高越大’的原則。這樣的規(guī)范使得設(shè)計(jì)師和開發(fā)者可以更方便地調(diào)整行高。
解鎖HMI設(shè)計(jì)規(guī)范
 
 
6.4. 字色
為保證普通文本在黑白背景下的清晰可讀,根據(jù)WCAG的AA級與AAA級標(biāo)準(zhǔn),文本與背景的對比度應(yīng)設(shè)定在4.5:1至7:1之間。
在深色背景上,建議通過調(diào)整純白色文本的透明度來創(chuàng)建一致且強(qiáng)烈的視覺層次結(jié)構(gòu),而不是使用純灰色。根據(jù)IDX & 同濟(jì) (2020) 百度Apollo中控視覺基礎(chǔ)研究項(xiàng)目、谷歌Android Auto和華為車機(jī)UI設(shè)計(jì)規(guī)范,建議設(shè)置一級文本的透明度為100%-90%,二級文本的透明度為70%-60%,三級文本的透明度為40%-30%。
 

藍(lán)藍(lán)設(shè)計(jì)(m.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)軟件vue開發(fā)



作者:設(shè)計(jì)師Ksss
鏈接:https://www.zcool.com.cn/article/ZMTYxOTQ5Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

設(shè)計(jì)師必備思維模型

前端達(dá)人

設(shè)計(jì)師應(yīng)該具備的思維模型
數(shù)據(jù)思維
設(shè)計(jì)思維
用戶思維
產(chǎn)品思維
如何提升思維
設(shè)計(jì)師在職業(yè)發(fā)展中應(yīng)具備多種思維模型,包括數(shù)據(jù)思維、設(shè)計(jì)思維、用戶思維,商業(yè)思維和產(chǎn)品思維。這些思維模型有助于提升設(shè)計(jì)師的專業(yè)能力和解決復(fù)雜問題的能力。
設(shè)計(jì)師必備思維模型
 
 
 
數(shù)據(jù)思維:在當(dāng)前競爭激烈的市場環(huán)境下,數(shù)據(jù)思維對于設(shè)計(jì)師尤為重要。它可以幫助設(shè)計(jì)師在眾多同行中脫穎而出。數(shù)據(jù)思維不僅是為了獲取數(shù)據(jù),更重要的是利用數(shù)據(jù)來驗(yàn)證商業(yè)價(jià)值,指導(dǎo)設(shè)計(jì)策略,從而賦能商業(yè)價(jià)值。
 
設(shè)計(jì)思維:設(shè)計(jì)思維模型對于設(shè)計(jì)師至關(guān)重要,它包括了解基礎(chǔ)設(shè)計(jì)規(guī)范、常用設(shè)計(jì)原則、設(shè)計(jì)的實(shí)用性以及對落地負(fù)責(zé)的態(tài)度。設(shè)計(jì)思維還包括對主流設(shè)計(jì)趨勢和手法的把握。
 
用戶思維:用戶思維要求設(shè)計(jì)師從用戶的環(huán)境和場景出發(fā),進(jìn)行深入的用戶洞察。用戶洞察可以通過三部曲來進(jìn)行:理解用戶需求、分析用戶行為、預(yù)測用戶趨勢。
 
商業(yè)思維:商業(yè)思維模型對設(shè)計(jì)師而言同樣不可或缺。它要求設(shè)計(jì)師不僅熟知商業(yè)基礎(chǔ)知識,還要掌握常用的商業(yè)策略與原則。設(shè)計(jì)師需深入理解商業(yè)目標(biāo)的實(shí)用性,并對商業(yè)成果的落地負(fù)責(zé)。
 
產(chǎn)品思維:產(chǎn)品思維涉及到對商業(yè)設(shè)計(jì)的理解,包括如何做出符合市場需求的商業(yè)設(shè)計(jì)。設(shè)計(jì)師需要了解什么是好的商業(yè)設(shè)計(jì),并掌握商業(yè)設(shè)計(jì)的步驟。
 
設(shè)計(jì)師需要掌握的思維模型-數(shù)據(jù)思維
為了提升數(shù)據(jù)思維能力,設(shè)計(jì)師可以采用推理設(shè)計(jì)模型和溯因模型(5W模型)。這些模型有助于提高設(shè)計(jì)思維的縝密度和深度。
 
北極星指標(biāo)是公司在當(dāng)前階段最重要的唯一指標(biāo),它有助于公司聚焦于最重要的問題,提升團(tuán)隊(duì)凝聚力,并鼓勵(lì)實(shí)驗(yàn)文化。北極星指標(biāo)的設(shè)定需要考慮公司的長期價(jià)值和不同發(fā)展階段的重點(diǎn)。
設(shè)計(jì)師必備思維模型
 
 
設(shè)計(jì)師常用的數(shù)據(jù)指標(biāo)模型包括HEART指標(biāo)、GSM指標(biāo)、海盜指標(biāo)(AARRR模型)和NPS指標(biāo)。這些指標(biāo)模型有各自的優(yōu)缺點(diǎn),但北極星指標(biāo)因其重要性而被特別推薦。設(shè)計(jì)師在實(shí)際工作中,可以將北極星指標(biāo)根據(jù)不同場景進(jìn)行分解,以設(shè)定具體工作目標(biāo)。
 
數(shù)據(jù)分析方法多樣,包括使用第三方工具、數(shù)據(jù)埋點(diǎn)、問卷調(diào)研、內(nèi)部行為分析工具和百度指數(shù)等。數(shù)據(jù)埋點(diǎn)需要明確要追蹤的事件,并與數(shù)據(jù)分析師或前端工程師合作。問卷調(diào)研可以幫助收集用戶的詳細(xì)信息,而百度指數(shù)可以提供競品的用戶畫像。
產(chǎn)品設(shè)計(jì)驅(qū)動的增長可以通過四步閉環(huán)方法實(shí)現(xiàn):確定指標(biāo)、提出假設(shè)、進(jìn)行分解和實(shí)驗(yàn)。這有助于設(shè)計(jì)師系統(tǒng)地優(yōu)化產(chǎn)品,實(shí)現(xiàn)數(shù)據(jù)的持續(xù)提升。
設(shè)計(jì)師必備思維模型
 
 
通過上述方法,設(shè)計(jì)師可以更好地理解用戶、市場和業(yè)務(wù),從而提升設(shè)計(jì)質(zhì)量,實(shí)現(xiàn)個(gè)人和產(chǎn)品的共同成長。
 
提高設(shè)計(jì)思維的縝密度和深度,設(shè)計(jì)師可以采用推理設(shè)計(jì)模型和溯因模型(5W模型)。
推理設(shè)計(jì)模型:
- 目的:推理設(shè)計(jì)模型的核心是滿足人的需求,通過推理過程產(chǎn)生多種解決方案。
- 組成部分:
- 形態(tài):產(chǎn)品的基本外觀或互聯(lián)網(wǎng)產(chǎn)品的品牌調(diào)性。
- 屬性:決定產(chǎn)品形態(tài)的特定屬性或種類。
- 功能:產(chǎn)品表達(dá)的目的與用途,受人的意向、喜好、目標(biāo)等因素影響。
- 需求:產(chǎn)品滿足的用戶需求。
- 價(jià)值:產(chǎn)品創(chuàng)造的價(jià)值。
- 聯(lián)系:產(chǎn)品使用受特定環(huán)境影響,屬性客觀而功能主觀,需求和價(jià)值基于功能滿足。
- 注意點(diǎn):設(shè)計(jì)需要直覺和創(chuàng)造力,同時(shí)考慮設(shè)計(jì)場景。
設(shè)計(jì)師必備思維模型
 
 
溯因模型(5W模型):
- 定義:溯因推理是一種根據(jù)現(xiàn)象特征推測其原因的信息加工方式。
- 例子:通過連續(xù)提問“為什么”來找到問題的根本原因,如豐田汽車公司的5WHY法。
- 作用:從結(jié)果出發(fā),通過層層提問找到并解決根本問題。
設(shè)計(jì)師必備思維模型
 
 
 
設(shè)計(jì)師需要掌握的思維模型-設(shè)計(jì)思維
 
設(shè)計(jì)領(lǐng)域中,經(jīng)驗(yàn)豐富的設(shè)計(jì)師會逐漸意識到,優(yōu)秀的設(shè)計(jì)既需要藝術(shù)的直覺和創(chuàng)造性,也需要科學(xué)的嚴(yán)謹(jǐn)和系統(tǒng)性。這種理念可以被重新表述為:
 
隨著設(shè)計(jì)實(shí)踐的深入,設(shè)計(jì)師們會發(fā)現(xiàn),設(shè)計(jì)工作不僅僅依賴于創(chuàng)意和審美(即“藝術(shù)”的一面),同樣需要依賴于理性的分析和科學(xué)的方法(即“科學(xué)”的一面)。藝術(shù)性讓設(shè)計(jì)作品具有吸引力和表現(xiàn)力,而科學(xué)性則確保設(shè)計(jì)解決方案的實(shí)用性、邏輯性和可行性。設(shè)計(jì)師在追求視覺美感的同時(shí),也必須關(guān)注設(shè)計(jì)如何滿足用戶需求和商業(yè)目標(biāo),實(shí)現(xiàn)三者之間的和諧平衡。
 
因此,設(shè)計(jì)師不僅要專注于設(shè)計(jì)的藝術(shù)性,即那些涉及創(chuàng)意、美學(xué)和情感表達(dá)的方面,同樣要關(guān)注設(shè)計(jì)的科學(xué)性,這包括采用系統(tǒng)化的問題解決方法、基于用戶研究和數(shù)據(jù)分析的決策過程,以及對設(shè)計(jì)在整個(gè)產(chǎn)品開發(fā)和市場策略中角色的深入理解。簡而言之,設(shè)計(jì)師的工作是將藝術(shù)的靈感與科學(xué)的分析相結(jié)合,創(chuàng)造出既美觀又實(shí)用的設(shè)計(jì)作品。
 
設(shè)計(jì)思維,作為設(shè)計(jì)師專業(yè)成長的基石,融合了審美、創(chuàng)造力、用戶需求理解、設(shè)計(jì)實(shí)現(xiàn)以及對新趨勢的敏銳洞察。這一思維模式不僅要求設(shè)計(jì)師掌握基礎(chǔ)的設(shè)計(jì)技能,更要求他們具備全局性的視野和解決問題的能力。
一、理解設(shè)計(jì)規(guī)范是設(shè)計(jì)思維的首要任務(wù)。設(shè)計(jì)師需要深入了解不同平臺的設(shè)計(jì)規(guī)范和原則,如蘋果的界面設(shè)計(jì)準(zhǔn)則、谷歌的Material Design理念等。這些規(guī)范為設(shè)計(jì)師提供了清晰的設(shè)計(jì)方向,確保設(shè)計(jì)作品的一致性和專業(yè)性。通過遵循這些規(guī)范,設(shè)計(jì)師能夠減少設(shè)計(jì)中的不確定性和誤解,提高設(shè)計(jì)的效率和質(zhì)量。
設(shè)計(jì)師必備思維模型
 
 
二、應(yīng)用設(shè)計(jì)原則是設(shè)計(jì)思維的關(guān)鍵環(huán)節(jié)。設(shè)計(jì)原則如格式塔原理等,為設(shè)計(jì)師提供了有效的視覺排版方法。設(shè)計(jì)師需要運(yùn)用這些原則,通過合理的布局、色彩搭配和字體選擇,使設(shè)計(jì)作品更加美觀、易讀和易于理解。同時(shí),設(shè)計(jì)師還需要關(guān)注設(shè)計(jì)的實(shí)用性和用戶體驗(yàn),確保設(shè)計(jì)作品能夠滿足用戶的需求和期望。
設(shè)計(jì)師必備思維模型
 
 
三、重視實(shí)用性是設(shè)計(jì)思維的核心要求。設(shè)計(jì)不應(yīng)僅僅追求美觀,更應(yīng)服務(wù)于用戶的實(shí)際需求。設(shè)計(jì)師需要深入了解用戶的需求和痛點(diǎn),通過設(shè)計(jì)來解決他們的問題。例如,設(shè)計(jì)師可以通過優(yōu)化操作流程、提高界面交互的便捷性等方式,提升用戶的使用體驗(yàn)。實(shí)用性是設(shè)計(jì)作品能否得到用戶認(rèn)可的關(guān)鍵,因此設(shè)計(jì)師需要時(shí)刻關(guān)注用戶的需求反饋,不斷優(yōu)化設(shè)計(jì)作品。
設(shè)計(jì)師必備思維模型
 
 
四,對設(shè)計(jì)落地負(fù)責(zé)是設(shè)計(jì)思維的重要體現(xiàn)。設(shè)計(jì)師不僅要關(guān)注設(shè)計(jì)的創(chuàng)意和美感,更要關(guān)注設(shè)計(jì)從概念到實(shí)現(xiàn)的全過程。設(shè)計(jì)師需要與開發(fā)團(tuán)隊(duì)緊密合作,確保設(shè)計(jì)的可行性和可實(shí)現(xiàn)性。同時(shí),設(shè)計(jì)師還需要關(guān)注設(shè)計(jì)的細(xì)節(jié)和規(guī)范,確保設(shè)計(jì)作品在實(shí)際應(yīng)用中能夠達(dá)到預(yù)期的效果。這種對設(shè)計(jì)落地的責(zé)任感有助于提升設(shè)計(jì)師的綜合素質(zhì)和團(tuán)隊(duì)協(xié)作能力。
設(shè)計(jì)師必備思維模型
 
 
五,把握設(shè)計(jì)趨勢是設(shè)計(jì)思維的重要組成部分。隨著科技的進(jìn)步和審美觀念的變化,設(shè)計(jì)手法和風(fēng)格也在不斷演變。設(shè)計(jì)師需要時(shí)刻關(guān)注新的設(shè)計(jì)趨勢和風(fēng)格,如手繪風(fēng)格、分形藝術(shù)、柔光風(fēng)格和紋理風(fēng)格等。將這些新元素融入設(shè)計(jì)中,可以使作品更具時(shí)代感和創(chuàng)新性。同時(shí),設(shè)計(jì)師還需要保持對新技術(shù)的敏感度和探索精神,不斷嘗試新的設(shè)計(jì)方法和工具,提升設(shè)計(jì)的效率和品質(zhì)。
設(shè)計(jì)師必備思維模型
 
 
六、認(rèn)識設(shè)計(jì)的全局性是設(shè)計(jì)思維的升華。設(shè)計(jì)不僅僅是界面或外觀的呈現(xiàn),更是產(chǎn)品體驗(yàn)的一部分。設(shè)計(jì)師需要理解產(chǎn)品設(shè)計(jì)背后的整體邏輯,包括框架層、結(jié)構(gòu)層、戰(zhàn)略層等。通過深入理解產(chǎn)品的整體架構(gòu)和用戶需求,設(shè)計(jì)師可以創(chuàng)造出更符合產(chǎn)品戰(zhàn)略的設(shè)計(jì)作品,提升產(chǎn)品的整體競爭力。同時(shí),設(shè)計(jì)師還需要關(guān)注行業(yè)動態(tài)和市場變化,了解行業(yè)趨勢和用戶需求的變化趨勢,為未來的設(shè)計(jì)創(chuàng)新提供有力支持。
設(shè)計(jì)師必備思維模型
 
 
設(shè)計(jì)師需要掌握的思維模型-用戶思維
用戶思維是設(shè)計(jì)師在設(shè)計(jì)過程中必須具備的一種核心思維模式,它要求設(shè)計(jì)師從用戶的角度出發(fā),深入理解和滿足用戶的需求。用戶思維不僅是一種理念,更是一種實(shí)踐方法,它涉及到對用戶環(huán)境的深入洞察、對用戶行為的細(xì)致觀察、以及對用戶心理的同理心理解。
 
用戶環(huán)境的理解是用戶思維的起點(diǎn)。設(shè)計(jì)師的工作環(huán)境往往與用戶實(shí)際使用環(huán)境存在差異,這種差異可能體現(xiàn)在設(shè)備的多樣性、操作系統(tǒng)的不同、屏幕尺寸和分辨率的差異,以及用戶所處的物理環(huán)境(如室內(nèi)、室外、網(wǎng)絡(luò)條件等)。設(shè)計(jì)師需要超越自己的工作環(huán)境,真正站在用戶的立場上,考慮他們在使用產(chǎn)品時(shí)可能遇到的各種情況。
 
換位思考是用戶思維的重要實(shí)踐方式。設(shè)計(jì)師需要將自己置于用戶的情境中,用普通用戶的視角去審視產(chǎn)品,理解用戶的情緒和需求。這種換位思考的能力可以通過多種方式培養(yǎng),如使用用戶使用的設(shè)備、參與用戶的日常活動、傾聽用戶的聲音等。
設(shè)計(jì)師必備思維模型
 
 
場景思維是用戶思維的另一個(gè)關(guān)鍵組成部分。設(shè)計(jì)師
需要理解用戶在不同場景下的行為和心理狀態(tài),如購買行為中的“認(rèn)知、搜索、判斷、下單、查看”等環(huán)節(jié)。通過深入分析用戶在各個(gè)環(huán)節(jié)的需求和問題,設(shè)計(jì)師可以找到設(shè)計(jì)撬動點(diǎn),優(yōu)化用戶體驗(yàn)。
 
時(shí)間維度的考慮也是場景思維中的重要方面。設(shè)計(jì)師需要關(guān)注用戶在完成任務(wù)的整個(gè)過程中的行為變化,從用戶接觸產(chǎn)品的第一時(shí)間開始,一直到用戶完成目標(biāo)后的反饋和分享。這種全程的視角有助于設(shè)計(jì)師發(fā)現(xiàn)并解決用戶在整個(gè)使用過程中可能遇到的問題。
設(shè)計(jì)師必備思維模型
 
 
在實(shí)際操作中,設(shè)計(jì)師可以通過以下方式提升用戶思維:
 
1. 使用不同設(shè)備:設(shè)計(jì)師應(yīng)同時(shí)使用蘋果和安卓設(shè)備,體驗(yàn)不同系統(tǒng)的設(shè)計(jì)差異,發(fā)現(xiàn)設(shè)計(jì)中的問題。
2. 深入用戶場景:通過實(shí)地調(diào)研、用戶訪談等方式,深入了解用戶在實(shí)際使用中的行為和需求。
3. 傾聽用戶聲音:定期收集和分析用戶的反饋,理解用戶的真實(shí)想法和需求。
4. 全程跟蹤用戶行為:從用戶接觸產(chǎn)品的第一時(shí)間起,全程跟蹤和分析用戶的行為路徑,發(fā)現(xiàn)設(shè)計(jì)中的斷點(diǎn)和痛點(diǎn)。
設(shè)計(jì)師必備思維模型
 
 
用戶思維是設(shè)計(jì)師在設(shè)計(jì)過程中必須具備的一種核心思維模式,它要求設(shè)計(jì)師從用戶的角度出發(fā),深入理解和滿足用戶的需求。用戶思維不僅是一種理念,更是一種實(shí)踐方法,它涉及到對用戶環(huán)境的深入洞察、對用戶行為的細(xì)致觀察、以及對用戶心理的同理心理解。
 
用戶環(huán)境的理解是用戶思維的起點(diǎn)。設(shè)計(jì)師的工作環(huán)境往往與用戶實(shí)際使用環(huán)境存在差異,這種差異可能體現(xiàn)在設(shè)備的多樣性、操作系統(tǒng)的不同、屏幕尺寸和分辨率的差異,以及用戶所處的物理環(huán)境(如室內(nèi)、室外、網(wǎng)絡(luò)條件等)。設(shè)計(jì)師需要超越自己的工作環(huán)境,真正站在用戶的立場上,考慮他們在使用產(chǎn)品時(shí)可能遇到的各種情況。
 
換位思考是用戶思維的重要實(shí)踐方式。設(shè)計(jì)師需要將自己置于用戶的情境中,用普通用戶的視角去審視產(chǎn)品,理解用戶情緒和需求。例如,支付寶提倡管理層傾聽用戶聲音,以真正解決用戶問題。
 
場景思維是用戶思維的另一個(gè)關(guān)鍵組成部分。設(shè)計(jì)師需理解用戶從哪里來,要到哪里去,關(guān)注用戶在每個(gè)環(huán)節(jié)的體驗(yàn)。場景思維帶有時(shí)間維度,包括用戶在購買前、購買中和購買后的行為和心理變化。
 
設(shè)計(jì)師必備思維模型
 
 
設(shè)計(jì)師需要掌握的思維模型-商業(yè)思維
商業(yè)思維是設(shè)計(jì)師在互聯(lián)網(wǎng)公司工作時(shí)必須具備的另一種核心思維模式。設(shè)計(jì)師不僅是藝術(shù)家,更是商業(yè)目標(biāo)的實(shí)現(xiàn)者。商業(yè)思維要求設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí),不僅要考慮用戶需求,還要考慮如何通過設(shè)計(jì)實(shí)現(xiàn)商業(yè)價(jià)值的增長。
 
好的商業(yè)設(shè)計(jì)通常具備以下特點(diǎn):
 
1. 獲得設(shè)計(jì)大獎:如無印良品海報(bào)、德國紅點(diǎn)設(shè)計(jì)大獎、Apple Watch等。
2. 符合好的設(shè)計(jì)原則:遵循Dieter Rams的“好設(shè)計(jì)的10個(gè)原則”。
3. 好用且銷量高:如蘋果系列產(chǎn)品和戴森產(chǎn)品,既獲得設(shè)計(jì)獎項(xiàng),也有良好的市場反饋。
設(shè)計(jì)師必備思維模型
 
 
進(jìn)行商業(yè)設(shè)計(jì)的三個(gè)步驟:
 
1. 了解商業(yè)目標(biāo):與產(chǎn)品經(jīng)理或運(yùn)營溝通,明確產(chǎn)品的商業(yè)目標(biāo)。
2. 以商業(yè)目標(biāo)為前提做設(shè)計(jì):根據(jù)商業(yè)目標(biāo)進(jìn)行設(shè)計(jì)思考,找到設(shè)計(jì)與商業(yè)之間的平衡點(diǎn)。
3. 設(shè)計(jì)判斷和驗(yàn)證:通過數(shù)據(jù)、需求方和用戶反饋驗(yàn)證設(shè)計(jì)的有效性。
 
設(shè)計(jì)師應(yīng)掌握商業(yè)思維,通過系統(tǒng)化的方法和清晰的設(shè)計(jì)思路,提升個(gè)人影響力,驅(qū)動產(chǎn)品創(chuàng)新,實(shí)現(xiàn)商業(yè)價(jià)值的增長。
設(shè)計(jì)師必備思維模型
 
 
設(shè)計(jì)師需要掌握的思維模型-產(chǎn)品思維
設(shè)計(jì)師在現(xiàn)代商業(yè)環(huán)境中,不僅要具備良好的審美和創(chuàng)意能力,還必須擁有產(chǎn)品思維。產(chǎn)品思維是指設(shè)計(jì)師能夠從產(chǎn)品的角度出發(fā),理解用戶需求、市場趨勢和商業(yè)目標(biāo),從而創(chuàng)造出既符合用戶期望又具有商業(yè)價(jià)值的設(shè)計(jì)作品。
一、用戶洞察:設(shè)計(jì)師的首要任務(wù)
產(chǎn)品思維的第一步是深入理解用戶。設(shè)計(jì)師需要通過用戶畫像、用戶訪談、問卷調(diào)查等方法,收集用戶的詳細(xì)信息,包括他們的行為習(xí)慣、偏好、痛點(diǎn)和需求。例如,通過用戶畫像,設(shè)計(jì)師可以構(gòu)建起用戶的立體形象,從而在設(shè)計(jì)中有更強(qiáng)的代入感和同理心。
設(shè)計(jì)師必備思維模型
 
 
 
二、市場趨勢:把握行業(yè)發(fā)展脈絡(luò)
了解市場趨勢對于設(shè)計(jì)師同樣重要。設(shè)計(jì)師應(yīng)關(guān)注行業(yè)報(bào)告、競品分析和市場動態(tài),以便把握設(shè)計(jì)方向和創(chuàng)新點(diǎn)。例如,通過分析競品,設(shè)計(jì)師可以發(fā)現(xiàn)行業(yè)內(nèi)的通用設(shè)計(jì)模式和潛在的創(chuàng)新機(jī)會。
三、商業(yè)目標(biāo):設(shè)計(jì)服務(wù)于商業(yè)
設(shè)計(jì)師需要明確設(shè)計(jì)作品的商業(yè)目標(biāo)。這包括提高用戶轉(zhuǎn)化率、增加用戶粘性、提升品牌形象等。設(shè)計(jì)師應(yīng)與產(chǎn)品經(jīng)理和市場團(tuán)隊(duì)緊密合作,確保設(shè)計(jì)方案能夠支持并推動商業(yè)目標(biāo)的實(shí)現(xiàn)。
設(shè)計(jì)師必備思維模型
 
 
 
四、用戶體驗(yàn)地圖:梳理用戶旅程
用戶體驗(yàn)地圖是設(shè)計(jì)師梳理用戶旅程和發(fā)現(xiàn)設(shè)計(jì)機(jī)會的有力工具。通過繪制用戶與產(chǎn)品交互的全過程,設(shè)計(jì)師可以識別出用戶在不同階段的感受、想法和痛點(diǎn),從而找到改進(jìn)產(chǎn)品體驗(yàn)的機(jī)會。
五、設(shè)計(jì)發(fā)力點(diǎn):從用戶和市場洞察中提煉
基于用戶洞察和市場趨勢,設(shè)計(jì)師應(yīng)提煉出設(shè)計(jì)發(fā)力點(diǎn)。這些發(fā)力點(diǎn)應(yīng)聚焦于解決用戶的核心問題和滿足商業(yè)目標(biāo)。例如,針對理財(cái)平臺的新手用戶,設(shè)計(jì)師可能會提出簡化操作流程、提供教育性內(nèi)容等發(fā)力點(diǎn)。
設(shè)計(jì)師必備思維模型
 
 
 
六、創(chuàng)新與迭代:不斷優(yōu)化產(chǎn)品體驗(yàn)
設(shè)計(jì)師應(yīng)不斷探索創(chuàng)新的設(shè)計(jì)方案,并基于用戶反饋和數(shù)據(jù)分析進(jìn)行迭代優(yōu)化。這要求設(shè)計(jì)師具備快速原型制作和測試的能力,以及靈活調(diào)整設(shè)計(jì)方案以適應(yīng)市場變化的敏捷性。
七、跨部門合作:形成合力
設(shè)計(jì)師需要與產(chǎn)品、市場、技術(shù)等不同團(tuán)隊(duì)成員合作,共同推動產(chǎn)品設(shè)計(jì)和開發(fā)。這種跨部門合作能夠幫助設(shè)計(jì)師獲得更全面的視角,同時(shí)也能提升設(shè)計(jì)方案的實(shí)施效率。
設(shè)計(jì)師必備思維模型
 
 
八、持續(xù)學(xué)習(xí):提升專業(yè)能力
產(chǎn)品思維要求設(shè)計(jì)師不斷學(xué)習(xí)新知識、新技能,以適應(yīng)不斷變化的市場需求。這包括學(xué)習(xí)最新的設(shè)計(jì)工具、理解新興技術(shù)如人工智能對設(shè)計(jì)的影響,以及掌握數(shù)據(jù)分析等技能。
總結(jié)而言,產(chǎn)品思維使設(shè)計(jì)師能夠超越單純的視覺表現(xiàn),將用戶需求、商業(yè)目標(biāo)和市場趨勢融入設(shè)計(jì)過程中,創(chuàng)造出具有競爭力的產(chǎn)品。通過用戶洞察、市場分析、跨部門合作和持續(xù)學(xué)習(xí),設(shè)計(jì)師可以提升自身的產(chǎn)品思維能力,成為真正對產(chǎn)品有影響力的設(shè)計(jì)專家。
 

藍(lán)藍(lán)設(shè)計(jì)(m.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)軟件vue開發(fā)



作者:啊糖糖att
鏈接:https://www.zcool.com.cn/article/ZMTYxODcyNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

霧里看花?這些是你能用上的產(chǎn)品思維

前端達(dá)人

你也許會困惑,明明絞盡腦汁想出方案但為什么總是不被認(rèn)可,為什么每當(dāng)自己來講述設(shè)計(jì)方案時(shí)總是無從談起。在走出新手村之后,你是否也會思考,這一切背后是否有什么規(guī)律可循。今天咱們略微換一個(gè)視角,盤一盤這背后的細(xì)節(jié)。
——
 
我們作為設(shè)計(jì)師這個(gè)角色,對于設(shè)計(jì)思維并不陌生。而在實(shí)際的工作中只根據(jù)設(shè)計(jì)者常有的思維顯然是不太夠的,將視角聚焦在更上游,你是否在心里追問為什么會有這個(gè)需求呢?為什么要做這一改動呢?
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
在實(shí)際的工作場景中,設(shè)計(jì)思維和產(chǎn)品是為是相輔相成的。多方位的思考可以更好的理解需求把控設(shè)計(jì)方向,幫助你更好的發(fā)揮自己的作用,設(shè)計(jì)出更符合用戶需求和商業(yè)目標(biāo)的優(yōu)秀產(chǎn)品。
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
1.1 產(chǎn)品思維是什么
產(chǎn)品的目的是為用戶解決問題滿足用戶的需求。而產(chǎn)品經(jīng)理需要權(quán)衡用戶場景和業(yè)務(wù)三者,發(fā)現(xiàn)問題分析問題解決問題,從而實(shí)現(xiàn)產(chǎn)品不斷的迭代和優(yōu)化。產(chǎn)品思維則是解決問題的思維方式。這里我根據(jù)之前的工作經(jīng)驗(yàn),我挑關(guān)鍵來總結(jié)了一下。
 
用戶導(dǎo)向
理解產(chǎn)品的核心用戶群體,這其中包含了解他們的需求偏好和行為習(xí)慣。為用戶提供好用方便的功能,提升用戶的產(chǎn)品滿意度。
數(shù)據(jù)驅(qū)動
利用產(chǎn)品數(shù)據(jù)分析方法和工具,分析用戶的實(shí)際實(shí)用情況,從中找到產(chǎn)品優(yōu)化的機(jī)會點(diǎn),迭代產(chǎn)品方案。
市場分析
了解產(chǎn)品處在的市場競爭環(huán)境和行業(yè)發(fā)展趨勢,通過競品的特點(diǎn)和優(yōu)勢從而發(fā)現(xiàn)產(chǎn)品的差異化和創(chuàng)新點(diǎn),獲得更好的市場競爭力。
用戶增長
面對存量市場,掌握用戶的增長的方法策略,通過產(chǎn)品設(shè)計(jì)和優(yōu)化實(shí)現(xiàn)用戶和業(yè)務(wù)的增長。
產(chǎn)品策略
 
了解產(chǎn)品策略的定制和執(zhí)行過程,包括但不限于產(chǎn)品定位,目標(biāo)設(shè)置,功能規(guī)劃。制定產(chǎn)品的發(fā)展策略,對東產(chǎn)品的發(fā)展和優(yōu)化。
 
產(chǎn)品思維并不是照本宣科的工具,而是解決問題的切入點(diǎn)。不同的產(chǎn)品經(jīng)理對產(chǎn)品思維也有著不同的理解。如今高度競爭的環(huán)境下,只有為用戶創(chuàng)造獨(dú)特的價(jià)值才能在市場中脫穎而出。這也變相的提高了設(shè)計(jì)師的要求,能否快速準(zhǔn)確的把握需求方向產(chǎn)出有效的設(shè)計(jì)方案顯得尤為重要。
 
1.2 產(chǎn)品思維可以幫助設(shè)計(jì)師做什么
更全面的思考問題
很多時(shí)候受限于視角,設(shè)計(jì)師往往會執(zhí)著于界面的視覺表現(xiàn)。耗費(fèi)更多的精力試圖吸引更多的用戶注意力。而掌握一定的產(chǎn)品思維可以幫助設(shè)計(jì)師在設(shè)計(jì)環(huán)節(jié)更好的思考和參與。設(shè)計(jì)出更符合用戶和業(yè)務(wù)預(yù)期的界面,發(fā)現(xiàn)用戶真實(shí)的痛點(diǎn)從而有針對性的優(yōu)化設(shè)計(jì)方案。
舉個(gè)例子:設(shè)計(jì)師通過對復(fù)雜流程的簡化,視覺降噪等方案,聚焦核心功能,改善用戶的交互體驗(yàn)和視覺感受。
優(yōu)化產(chǎn)品設(shè)計(jì)
通過對數(shù)據(jù)的研究,深入分析用戶行為和市場環(huán)境,發(fā)現(xiàn)產(chǎn)品的改進(jìn)方向。通過數(shù)據(jù)分析和競品分析等手段,發(fā)現(xiàn)用戶需求與市場趨勢,為產(chǎn)品的功能設(shè)計(jì)和界面優(yōu)化提供有力的支持。
舉個(gè)例子:設(shè)計(jì)師根據(jù)用戶反饋的結(jié)果調(diào)整頁面的布局,優(yōu)化產(chǎn)品的交互設(shè)計(jì),提高產(chǎn)品的易用性和吸引力。
提升團(tuán)隊(duì)協(xié)作效率
具備產(chǎn)品思維,可以讓設(shè)計(jì)師和產(chǎn)品經(jīng)理無阻力溝通,通過與團(tuán)隊(duì)的有效溝通和協(xié)作,共同推動產(chǎn)品的開發(fā)和優(yōu)化,提升團(tuán)隊(duì)的協(xié)作效率和產(chǎn)品的質(zhì)量,達(dá)到事半功倍的效果。
舉個(gè)例子:和產(chǎn)品共同研討產(chǎn)品需求文檔,和開發(fā)團(tuán)隊(duì)討論實(shí)現(xiàn)方案。確保項(xiàng)目的快速推進(jìn)。
提升職業(yè)競爭力
 
具備產(chǎn)品思維的設(shè)計(jì)師在職場更具有競爭力,可以在不同的工作場景中承擔(dān)更多的責(zé)任和挑戰(zhàn),為團(tuán)隊(duì)帶來更大的價(jià)值。擁有較好的產(chǎn)品思維可以幫助設(shè)計(jì)師保持對行業(yè)趨勢和技術(shù)發(fā)展的敏感性,在職場競爭中也更具優(yōu)勢。
 
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
現(xiàn)在讓我們立即切換到工作視角,怎樣在原有的工作流程中應(yīng)用好產(chǎn)品思維尤為關(guān)鍵。我們作為設(shè)計(jì)者,了解產(chǎn)品思維是為了更好的發(fā)散思考和推敲設(shè)計(jì)方案。授人以魚不如授人以漁,面對不同領(lǐng)域不同項(xiàng)目的紛繁需求,不妨多問幾個(gè)問題,在不斷的提問中找到答案。
2.1 明確設(shè)計(jì)目標(biāo)
設(shè)計(jì)師需要明確項(xiàng)目背景推導(dǎo)出正確的設(shè)計(jì)目標(biāo)。這要求設(shè)計(jì)師時(shí)刻需要將項(xiàng)目的目標(biāo)和成果放在首位,之后的設(shè)計(jì)決策和行動都需要和這些目標(biāo)保持一致。另外注重跨團(tuán)隊(duì)協(xié)作,合理分類時(shí)間和設(shè)計(jì)資源,將會讓你更加游刃有余。切忌鉆牛角尖的閉門造車,務(wù)必確保項(xiàng)目按時(shí)交付。
 
自問自答:
 
  •  
    項(xiàng)目組都有誰,自己負(fù)責(zé)的哪些板塊,我的目的是什么?
  •  
    項(xiàng)目進(jìn)展到了哪里,什么時(shí)候需要交付,什么時(shí)候需要上線?
  •  
    設(shè)計(jì)方案確定提交后怎樣快速和開發(fā)團(tuán)隊(duì)對接實(shí)現(xiàn)落地,期間是否有什么問題?
 
2.2用戶研究
設(shè)計(jì)師進(jìn)行用戶研究是為了更好的了解用戶的需求和行為,確保產(chǎn)品能夠滿足用戶的真實(shí)需求。用戶研究的方式很多,設(shè)計(jì)師可以根據(jù)團(tuán)隊(duì)需要和項(xiàng)目時(shí)間排期進(jìn)行合理的安排。
 
成功的用戶研究可以幫助設(shè)計(jì)師驗(yàn)證設(shè)計(jì)假設(shè)的有效性,降低產(chǎn)品的開發(fā)風(fēng)險(xiǎn),減少不必要的時(shí)間和成本損耗。
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
自問自答:
 
  •  
    你的用戶是誰,使用場景是什么,需要為他們解決什么問題?
  •  
    你的用戶是如何使用這些功能的,這期間是否還有優(yōu)化的空間?
 
2.3 競品分析
競品分析是一種通過研究和對比競爭對手的產(chǎn)品和服務(wù)細(xì)節(jié),從中發(fā)現(xiàn)優(yōu)勢和劣勢,進(jìn)而指導(dǎo)自身產(chǎn)品設(shè)計(jì)和優(yōu)化的方法。對于設(shè)計(jì)師來說,可以幫助我們更快的了解市場和行業(yè)的整體情況,為產(chǎn)品的設(shè)計(jì)提供給更多的參考依據(jù),另一方面可以快速發(fā)現(xiàn)自身產(chǎn)品的問題 找到優(yōu)化的方向。
 
需要注意的是,競品分析需要帶著目的進(jìn)行,切勿走馬觀花泛泛而談。
自問自答
 
  •  
    競品分析的主題是什么,目標(biāo)是解決當(dāng)下的什么問題?
  •  
    你的競品是誰,他是怎么做的,反饋怎樣?
  •  
    我們可以借鑒什么,改善什么?
 
2.4埋點(diǎn)與數(shù)據(jù)回收
雖然設(shè)計(jì)師并不會直接參與埋點(diǎn)的設(shè)計(jì),但為了更好的捕捉用戶的行為數(shù)據(jù),在設(shè)計(jì)中可以根據(jù)情況和優(yōu)先級將埋點(diǎn)納入設(shè)計(jì)考慮。
 
設(shè)計(jì)師和數(shù)據(jù)分析的溝通可以避免后期添加埋點(diǎn)時(shí),出現(xiàn)和設(shè)計(jì)的不匹配的尷尬狀況。數(shù)據(jù)是驗(yàn)證設(shè)計(jì)合理性的重要指標(biāo),很多時(shí)候設(shè)計(jì)師需要一個(gè)具體的成果反饋來復(fù)盤和指導(dǎo)之后的設(shè)計(jì)工作,多多留意最終呈現(xiàn)頁面效果和用戶反饋,并不是完成上線就可以將這些拋擲腦后了。
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
終極問題:
 
  •  
    如何證明這是個(gè)改版方案是合理的
 
霧里看花?這些是你能用上的產(chǎn)品思維
 
 
3.1設(shè)計(jì)師的痛點(diǎn)
在實(shí)際的工作中,往往會由于不同的產(chǎn)品特點(diǎn)和團(tuán)隊(duì)的配置,設(shè)計(jì)師不得不身兼多職面對更為復(fù)雜的情況。在開發(fā)流程中設(shè)計(jì)師始終處在“夾縫之中”的位置,而站在公司的視角設(shè)計(jì)師這一環(huán)節(jié)既不能直接產(chǎn)生收益也不能為整體降低成本。在進(jìn)入職業(yè)生涯不久我開始思考為什么設(shè)計(jì)師處在這樣一個(gè)被動的處境呢,跑遍了前端后端數(shù)據(jù)和產(chǎn)品小組,“厚著臉皮”旁聽了各種冗雜的會議,以及多少次和前輩的交流中,我才慢慢發(fā)現(xiàn)了背后的“難言之隱”
 
  •  
    依賴需求方案
設(shè)計(jì)師通常是根據(jù)產(chǎn)品需求方案確定以后再參與工作的,設(shè)計(jì)師的工作很大程度上取決于產(chǎn)品需求的制定,因此單從設(shè)計(jì)視角來看有一定的滯后性。設(shè)計(jì)師接到產(chǎn)品需求后沒有辦法理解背后需要解決的核心問題,也很少思考和判斷需求的合理性,很容易和產(chǎn)品的最初想法產(chǎn)生偏差。
  •  
    反饋的延遲
設(shè)計(jì)師的工作成果也需要后期數(shù)據(jù)回收和復(fù)盤,而在實(shí)際的工作中,往往是一個(gè)需求結(jié)束后就需要急匆匆的應(yīng)對下一個(gè)需求。如果不去留意,很多時(shí)候作為設(shè)計(jì)師并不清楚最終交給開發(fā)的設(shè)計(jì)稿到底取得了什么樣的數(shù)據(jù)表現(xiàn),到底哪一個(gè)方案才能更好的實(shí)現(xiàn)目標(biāo)。這也使得設(shè)計(jì)師很難進(jìn)行經(jīng)驗(yàn)總結(jié)。
  •  
    有限的時(shí)間和資源成本
當(dāng)前市場競爭相對激烈,各方產(chǎn)品都需要在有限的時(shí)間中盡可能的搶占市場,而設(shè)計(jì)師需要在較短的時(shí)間中給出合理的設(shè)計(jì)方案,同時(shí)和產(chǎn)品以及開發(fā)團(tuán)隊(duì)不斷進(jìn)行細(xì)節(jié)的調(diào)整,這也使得設(shè)計(jì)師面對的壓力和挑戰(zhàn)更大。
 
 
較低的話語權(quán)、只多不少的需求使得本就焦慮內(nèi)卷的設(shè)計(jì)師處境更加雪上加霜。但是反過來想想,既然改變不了外在的環(huán)境,是否有辦法可以讓設(shè)計(jì)師們由內(nèi)而外的主動爭取些什么呢,我能想到的答案既是化被動為主動,盡可能的參與項(xiàng)目的推進(jìn),同時(shí)和上下游保持溝通,從而提升設(shè)計(jì)師在團(tuán)隊(duì)中的存在感和參與感。而產(chǎn)品思維,是一塊剛剛好的墊腳石。
 
2.2產(chǎn)品思維的訓(xùn)練
講到如何提升產(chǎn)品思維,我總會想起一位前輩曾經(jīng)說過一切技巧惟手熟爾。你也許會說每天都在一成不變的做著公司的內(nèi)容實(shí)在提不起興趣,不過沒有關(guān)系。產(chǎn)品思維的提升并不需要過多一板一眼的訓(xùn)練。就像你走入繁華地段的商場,明明入駐著大差不差的品牌為什么客流量卻有著明顯的不同?是清晰明了的導(dǎo)視路牌?是更為合理的動線規(guī)劃?是明亮舒適的燈光統(tǒng)一的裝置風(fēng)格?用戶體驗(yàn)是多元的,因此很多時(shí)候善于發(fā)現(xiàn)身邊各種各樣的體驗(yàn)細(xì)節(jié),便可以擁有較好的產(chǎn)品感知。關(guān)于具體的方法,我有兩個(gè)方向可供大家參考。
 
  •  
    保持好奇心
打開手機(jī)想想看哪些應(yīng)用是高頻使用的,同樣的音樂類應(yīng)用你更習(xí)慣用哪個(gè)呢,在聯(lián)想一下身邊的朋友同事在聽音樂這件事情上更喜歡哪個(gè)應(yīng)用呢。橫向?qū)Ρ纫幌卤憧砂l(fā)現(xiàn),雖然是同類型的產(chǎn)品但在體驗(yàn)細(xì)節(jié)上其實(shí)有很多門道可以考究。或者你是否留意過最新出現(xiàn)的產(chǎn)品和剛剛更新的功能?為什么要有這樣那樣的改版?用戶的反饋是怎樣的?
刨根問底多問一步為什么,而不是將自己禁錮在工作范圍中的一畝三分地,在不經(jīng)意之間,其實(shí)你已經(jīng)邁出了第一步。
  •  
    知識整理與沉淀
如果你還有多余一些的精力,不妨進(jìn)行更深入的學(xué)習(xí)。不過好消息是,你想要學(xué)習(xí)的很多技術(shù)都可以在網(wǎng)絡(luò)上輕松找到。定期翻看設(shè)計(jì)平臺分享,相關(guān)短視頻頻道,公眾號文章,可以讓你探索更深入更廣闊的知識。不過先別急著開始,走馬觀花的閱讀往往并不會留下什么印記,試著整理這些碎片知識并總結(jié)收獲和心得。不要急于閱讀量收藏量而是爭取收獲更多自己的理解才尤為關(guān)鍵。
 
PS:關(guān)于這部分我之后也會有更多內(nèi)容的分享,多多關(guān)注嘍,謝謝各位啦。
 
3.3 啰啰嗦嗦寫在最后
在工作的第二年,我開始感到枯燥和厭煩。很多次面對頻繁緊急加塞的產(chǎn)品需求和一頭霧水的業(yè)務(wù)指標(biāo),我時(shí)常情緒激動的和當(dāng)時(shí)的組長抱怨吐苦水,但由于人員緊張,并沒有什么實(shí)質(zhì)的改變。后來的一段日子我試著躲避,覺得做好分內(nèi)的任務(wù)就得了,每天出幾版方案到時(shí)候由著他們定奪吧。就這樣又過了一段時(shí)間,從前得枯燥和厭煩變本加厲,而我好像游離在各個(gè)環(huán)節(jié)之中,漸漸我的狀態(tài)變得很差,每天的工作毫無成就感可言,我開始認(rèn)真的思考,究竟為什么會這樣。
事情的轉(zhuǎn)機(jī)出現(xiàn)在不久之后組里來了新的伙伴,一方面分擔(dān)了很多任務(wù)壓力,另一方面由于是剛剛畢業(yè)的職場新人,很多工作細(xì)節(jié)都需要幫他快速上手。也在這期間我發(fā)現(xiàn)了自己的浮躁和心急,我試著系統(tǒng)的總結(jié)過往的經(jīng)驗(yàn)和思考,在這個(gè)過程中我開始和產(chǎn)品以及前端的伙伴更多的交流和請教。在找不到思路的時(shí)候試著切換到其他視角看待問題,去刨根問底無數(shù)個(gè)為什么,竟發(fā)現(xiàn)不知不覺中一切似乎都往積極的方向改變了。
或許我的想法與你也會有所偏頗,不過沒有關(guān)系,每當(dāng)觀點(diǎn)不一致的時(shí)候也意味著我又發(fā)現(xiàn)了一個(gè)新的視角。不同的鏈接使得我們不斷的發(fā)現(xiàn)和探索,正如那句話說沒有人是一座孤島。
在這里我非常期待與更多的優(yōu)秀前輩交流,也很十分榮幸為后輩提供一些思路和幫助。
 
 


作者:Weiweiwei_Alita
鏈接:https://www.zcool.com.cn/article/ZMTYxOTYwMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

優(yōu)秀的UI/UX設(shè)計(jì)師需要具備哪些技能?

濤濤

設(shè)計(jì)既是一門學(xué)問,也是一門藝術(shù)。若想在設(shè)計(jì)這條道路上越走越遠(yuǎn),自然不能把自己定位為“畫圖的”和“搞藝術(shù)的”。需要不斷總結(jié)設(shè)計(jì)經(jīng)驗(yàn),知曉市場需求與用戶心理,保持學(xué)習(xí)和進(jìn)步,鍛煉自己的設(shè)計(jì)思維,方能成才。另外,對我來講,最大的技能就是從失敗中學(xué)習(xí),從失敗中成長!

關(guān)于B端導(dǎo)航的選擇

濤濤

對B端產(chǎn)品架構(gòu)而言,一個(gè)合理的導(dǎo)航設(shè)計(jì)對能夠解決,對團(tuán)隊(duì)內(nèi)部:堆砌功能開發(fā)混亂;對外部用戶:找不到功能的問題,所以本篇主要總結(jié)一下如何正確選取合適的導(dǎo)航。

移動端導(dǎo)航設(shè)計(jì),這里一定有你不知道的——細(xì)節(jié)系列第 01 篇

濤濤

寫這篇講導(dǎo)航的,本質(zhì)上是希望提高自己界面設(shè)計(jì)的組件化意識,也是對近期自己看的關(guān)于導(dǎo)航方面文章的一個(gè)總結(jié)和輸出,

B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)

前端達(dá)人

歡迎小伙伴們收看《B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)》,本節(jié)內(nèi)容將帶領(lǐng)小伙伴們從零開始認(rèn)識圖表,了解圖表在數(shù)據(jù)可視化中的作用,圖表的構(gòu)成,不同圖形可以可視化哪些類型的數(shù)據(jù)等等。希望大家看完后能對圖表有個(gè)相對完整的認(rèn)知,在以后的工作中可以得心應(yīng)手。
一、什么是圖表?
大家對圖表一定不陌生,圖表(chart)就是一種通過圖形化的方式呈現(xiàn)和分析數(shù)據(jù)的工具,就是
將表格中的數(shù)據(jù)進(jìn)行二次加工,將復(fù)雜的業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)化為更加直觀的、有趨勢性、有時(shí)間線、空間性的圖形數(shù)據(jù)
,協(xié)助用戶根據(jù)數(shù)據(jù)變動而變更相關(guān)決策,最終以實(shí)現(xiàn)降本提效的目的。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
不同部門或者角色在公司中會需要各種類型的數(shù)據(jù)信息,以支持其業(yè)務(wù)運(yùn)營和領(lǐng)導(dǎo)層決策需求。這些數(shù)據(jù)信息的準(zhǔn)確性和及時(shí)性對于公司的發(fā)展和競爭優(yōu)勢至關(guān)重要。
產(chǎn)品部門關(guān)注的主要是用戶行為數(shù)據(jù)、收入數(shù)據(jù)、用戶量數(shù)據(jù);運(yùn)營部門關(guān)注用戶活躍度數(shù)據(jù)、營銷效果數(shù)據(jù)和用戶反饋數(shù)據(jù);技術(shù)部門關(guān)注系統(tǒng)運(yùn)行數(shù)據(jù)、技術(shù)指標(biāo)數(shù)據(jù);用戶增長部門關(guān)注用戶生命周期數(shù)據(jù)等。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
二、一個(gè)優(yōu)秀圖表設(shè)計(jì)的標(biāo)準(zhǔn)是什么?
要看一個(gè)圖表是否優(yōu)秀,主要看它是否符合GLAD原則。GLAD原則是一個(gè)在數(shù)據(jù)可視化設(shè)計(jì)中常用來確保圖表質(zhì)量和有效性的方法論,它主要包括以下四個(gè)要素:
GLAD原則
GLAD原則
 
 
G原則:優(yōu)質(zhì)數(shù)據(jù)和洞察
G原則是指Good Data and Insight。G原則在探索性數(shù)據(jù)分析過程中著重提升圖表的商業(yè)價(jià)值,G原則的關(guān)鍵是“有價(jià)值的商業(yè)信息”,這一點(diǎn)就要求在準(zhǔn)備數(shù)據(jù)的時(shí)候,應(yīng)該剔除那些商業(yè)分析價(jià)值不大的部分,而主要留下的是有高價(jià)值密度的信息。除了要求有高價(jià)值的信息之外,還需要有比較好的Insight,也就是能洞察數(shù)據(jù)中的高價(jià)值信息,并以較為通俗易懂的形式在圖表中表達(dá)出來。
優(yōu)化前
優(yōu)化前
 
例圖點(diǎn)評:雖然圖表本身看上去好像并沒什么問題,圖形選擇的也對、顏色搭配也得體,讀者也能理解圖本身要表達(dá)的意思。但是,
沒有商業(yè)價(jià)值,即我能看出茅臺拿鐵賣的最好,然后呢?這是哪個(gè)階段的數(shù)據(jù)?不知道。有沒有持續(xù)的表現(xiàn)數(shù)據(jù)?也不知道。
優(yōu)化后
優(yōu)化后
 
例圖點(diǎn)評:修改后,從數(shù)據(jù)中提煉出更有價(jià)值的商業(yè)數(shù)據(jù),在時(shí)間維度和空間維度都有體現(xiàn),簡潔明了的同時(shí),也具有商業(yè)參考價(jià)值。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
L原則:更少的視覺噪音
L原則是指Less Noise。簡單說就是視覺降噪。
B端產(chǎn)品是高度商業(yè)化的產(chǎn)品,有用有效遠(yuǎn)大于好看,
這要求B端設(shè)計(jì)師對藝術(shù)的追求要適可而止,商業(yè)數(shù)據(jù)分析不是追求藝術(shù)造詣,不是做一張海報(bào)去吸引人的眼球,而是提供商業(yè)價(jià)值并能快速讓人理解。過于酷炫、花哨、浮夸的修飾并不會給圖表帶來任何附加值,反而會增加讀者的閱讀負(fù)擔(dān)。
例圖1
例圖1
 
例圖點(diǎn)評:修改前,有些國家由于人口稀少,導(dǎo)致相關(guān)數(shù)據(jù)也非常小,難以在圖表中展示,造成整個(gè)圖表花里胡哨且復(fù)雜。修改后,把過小數(shù)據(jù)的選項(xiàng)折疊為“其他”,默認(rèn)顯示主要幾個(gè)較大國家的數(shù)據(jù),當(dāng)點(diǎn)擊“其他”圖例的時(shí)候,再顯示詳細(xì)的數(shù)據(jù)信息,使數(shù)據(jù)展示更具有側(cè)重點(diǎn)。
例圖2
例圖2
 
例圖點(diǎn)評:圖例2是dribbble上的圖表作品,左側(cè)是K線圖,右側(cè)是柱狀圖,它們的問題在于花里胡哨,卻缺少必要的刻度,形式大于內(nèi)容,過于追求好看的反面案例。
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
A原則:準(zhǔn)確的表達(dá)
A原則是指Accurate Expression。通俗講,就是要根據(jù)不同的數(shù)據(jù)類型和不同的商業(yè)目的,采用正確的、適合的圖表類型,如表現(xiàn)占比就要用餅圖、百分比柱形圖,表現(xiàn)趨勢就要用折線圖、面積圖等,且要保證圖例的清晰性、刻度的準(zhǔn)確性,避免模棱兩可的圖例和不準(zhǔn)確的刻度。
錯(cuò)誤例圖
錯(cuò)誤例圖
 
正確例圖
正確例圖
 
例圖點(diǎn)評:圖例的本意是對比2023和2024年不同品牌手機(jī)的銷售額占比,是基于時(shí)間維度的對比圖,但錯(cuò)誤圖例卻用了兩個(gè)餅圖,無法直觀的表現(xiàn)特定品牌在不同年度的銷售額占比的對比情況。正確的圖例則直接用了柱狀對比圖,一目了然。
 
D原則:明確的標(biāo)記
D原則是指Dinstinct Mark。D原則的作用是幫助讀者加快理解信息的速度,它強(qiáng)調(diào)
突出重點(diǎn)
,需要把通過數(shù)據(jù)比較得到的差異部分、體現(xiàn)洞察信息的內(nèi)容利用明顯不同的顏色、形狀、文字標(biāo)注等手段進(jìn)行區(qū)別,讓讀者的視線聚焦到那里去。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
三、圖表的構(gòu)成要素
圖表是由:標(biāo)題、圖例、縱軸、橫軸、圖形、圖表范圍及其他輔助元素(如水位線、網(wǎng)格線、刻度值、提示信息等)構(gòu)成,每一個(gè)元素都有它存在的意義。不過在實(shí)際使用中不一定非得把元素全部展示出來,精簡化顯示想要展示的內(nèi)容即可。
圖表的構(gòu)成
圖表的構(gòu)成
 
 
3.1標(biāo)題
標(biāo)題即圖表的名字,是圖表必不可少的元素。標(biāo)題要求簡短明確通俗易懂,視覺上通常需要字體加粗。標(biāo)題下面也可以跟一行副標(biāo)題,用作對標(biāo)題的補(bǔ)充說明。
  •  
    信息類標(biāo)題:提供理解數(shù)據(jù)所需的所有信息,回答「何事」、「何地」、「何時(shí)」這三個(gè)問題
  •  
    描述類標(biāo)題:突出圖表中顯示的主要數(shù)據(jù)模式或趨勢,描繪出圖表所要講述的故事
標(biāo)題常用的位置有3種,左上、頂居中、底居中。
標(biāo)題常用位置
標(biāo)題常用位置
 
 
3.2圖例
3.2.1圖例的作用:
  •  
    區(qū)分不同類別數(shù)據(jù)的標(biāo)志
  •  
    開啟/隱藏類別顯示
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
如果圖表中只有一個(gè)數(shù)據(jù)系列,則可以不用顯示圖例。
常見圖例展現(xiàn)形式
常見圖例展現(xiàn)形式
 
3.2.2圖例的位置
圖例的位置并沒有嚴(yán)格限制與要求,常見位置是上、下、右。
圖例的位置
圖例的位置
 
3.2.3圖例的顏色
在選擇圖例顏色時(shí),不要用色相過于接近的顏色,否則會容易看混或看錯(cuò)。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
要規(guī)范圖例顏色使用,一般分為兩種情況:
  •  
    常用的圖例顏色(顏色本身代表著行業(yè)中的某種含義),此類顏色需要是固定色值,無論哪個(gè) chart 中,都是這個(gè)顏色;
  •  
    無特殊含義的圖例,可以規(guī)范出一個(gè)圖例顏色的使用順序表。那些無特殊含義的 chart 可以按順序使用圖例顏色,圖例整齊劃一。
值得一提的是,為了照顧色弱、色盲群體,有些產(chǎn)品會增加無障礙花紋來進(jìn)行輔助識別,提高辨識度。這種設(shè)計(jì)很有溫度,畢竟設(shè)計(jì)以人為本。
Echarts的無障礙花紋樣式
Echarts的無障礙花紋樣式
 
 
3.2.4圖例的數(shù)量
一般來說圖例不要過多,基本要遵循米勒定律,即7±2法則。
米勒定律
米勒定律
 
所以,5個(gè)以內(nèi)是最佳圖例數(shù)量。如果遇到比較復(fù)雜的圖表,則可以進(jìn)行嘗試進(jìn)行圖例合并,如上面講GLAD原則的時(shí)候的L原則案例,除了多個(gè)圖表可以共用一組圖例(前提是圖例代表的意思一致),還可以把過于零碎的比重要的數(shù)據(jù)圖例合并為一個(gè)“其他”。
如果圖表中只有一個(gè)圖例的話,則可以不顯示。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
3.2.5圖例名稱的長度
根據(jù)不同使用場景,為了更好的展示效果,要給圖例名稱設(shè)置一個(gè)最大值,超過最大值后省略展示,鼠標(biāo)hover時(shí)再顯示完整名稱。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
3.3坐標(biāo)軸
3.3.1什么是坐標(biāo)軸
坐標(biāo)軸是定義域軸(叫什么)和值域軸(有多少)的統(tǒng)稱。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實(shí)意義,因此我們可以根據(jù)坐標(biāo)軸對應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù),將坐標(biāo)軸分成連續(xù)軸、時(shí)間軸、分類軸三大類。軸的類型不同在設(shè)計(jì)處理上也有差異。
坐標(biāo)軸分類
坐標(biāo)軸分類
 
 
3.3.2常見坐標(biāo)軸組合方式
常見二維圖表坐標(biāo)軸分為X軸(橫軸)和Y軸(縱軸),多用于表示趨勢、排名、比較的數(shù)據(jù)結(jié)構(gòu)。常見搭配是1 個(gè) X 軸+1 個(gè) Y 軸。不過特殊情況下也會用到 2X+Y 或 X+2Y。
軸的常見組合方式
軸的常見組合方式
 
在三維圖表里,會多一個(gè)Z軸。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
3.3.3坐標(biāo)軸容易被忽略的設(shè)計(jì)細(xì)節(jié)
  •  
    軸線一般只考慮是否顯示,例如柱狀圖、折線圖等,在有背景網(wǎng)格線的情況下,會隱藏 y 軸線,條形圖則是隱藏 x 軸線,以達(dá)到信息降噪,突出視覺重點(diǎn)的目的。
 
  •  
    軸刻度通常不顯示,只有在肉眼無法定位到某個(gè)標(biāo)簽對應(yīng)的數(shù)據(jù)點(diǎn)時(shí),會顯示刻度線,輔助用戶定位,比如折線圖,或抽樣顯示的柱狀圖。
 
  •  
    網(wǎng)格線用于定位數(shù)據(jù)點(diǎn)的值域范圍,跟隨值域軸的位置單向顯示,柱狀圖采用水平網(wǎng)格,條形圖采用垂直網(wǎng)格。樣式為虛實(shí)線的最多,斑馬線由于感知過強(qiáng),一般不用。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
  •  
    軸標(biāo)題/單位主要用于說明定義域軸、值域軸的數(shù)據(jù)含義。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽已經(jīng)能充分表達(dá)數(shù)據(jù)含義,無需單獨(dú)顯示標(biāo)題/單位,「如無必要,勿增實(shí)體」。
沒有必要就不要多此一舉
沒有必要就不要多此一舉
 
 
  •  
    連續(xù)軸/時(shí)間軸進(jìn)行適當(dāng)抽樣。連續(xù)軸/時(shí)間軸,是由一組前后包含同等差值的等差數(shù)列組成,缺少幾個(gè)數(shù)值也能明顯看出中間的對應(yīng)關(guān)系。當(dāng)多個(gè)標(biāo)簽在容器內(nèi)全顯示發(fā)生重疊,我們可以利用抽樣顯示的手段來避免這種情況。常見的抽樣方式是等分抽樣:當(dāng)多個(gè)標(biāo)簽在 x 軸無法完全顯示,優(yōu)先保留首尾標(biāo)簽,其余標(biāo)簽按同等步長間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù),能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù),就需要「-1」轉(zhuǎn)成合數(shù)。
   舉個(gè)例子:9個(gè)標(biāo)簽,間隔數(shù)是 8,能被 2 或4整除,即分成 2 等分和4等分。8個(gè)標(biāo)簽,間隔數(shù)是        7,無法等分,需要在間隔數(shù)基礎(chǔ)上再「-1」,轉(zhuǎn)成合數(shù) 6 后再等分,此時(shí)最后一個(gè)標(biāo)簽顯示在倒      數(shù)第二個(gè)數(shù)據(jù)點(diǎn)上。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
  •  
    分類軸是由幾組離散數(shù)據(jù)組成,獨(dú)立存在無緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則,隱藏一些標(biāo)簽,用戶對圖表認(rèn)知就會有困難,違背了數(shù)據(jù)可視化清晰、有效的設(shè)計(jì)原則。分類軸最佳處理方式是標(biāo)簽旋轉(zhuǎn) 45 度,若 45 度仍顯示不下,繼續(xù)旋轉(zhuǎn) 90 度。如果 90 度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
  •  
    分類軸標(biāo)簽字段有長有短,長文本標(biāo)簽直接旋轉(zhuǎn)不僅影響美觀,而且也不利于用戶閱讀。如果數(shù)據(jù)量比較少只有 2~4 個(gè),長文本標(biāo)簽更適合水平展示,顯示不下省略即可;如果數(shù)據(jù)量比較多,就限定字符數(shù)后旋轉(zhuǎn)。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
3.4圖形數(shù)據(jù)
圖形數(shù)據(jù)是圖表中最為明顯的地方,即圖表的核心元素,如折線圖中的折線,柱狀圖中的柱,餅狀圖中的圓。
圖形數(shù)據(jù)的使用規(guī)則:
  •  
    邊界要清晰,不可虛化;
  •  
    多個(gè)數(shù)據(jù)同時(shí)顯示的時(shí)候,要保證每個(gè)數(shù)據(jù)都能清晰的看到,可以采用透明度來保證所有數(shù)據(jù)的顯示。
關(guān)于圖形的選擇,第四章會著重介紹。
 
3.5提示信息
提示信息用來標(biāo)識出圖表中重要點(diǎn)的數(shù)據(jù)信息,相當(dāng)于一個(gè)popover浮窗,鼠標(biāo)指針在圖形中hover的地方通常就是該點(diǎn)的數(shù)據(jù)信息。需要注意的是:重要信息盡量簡化,只需要展示重要字段。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
3.6水位線
根據(jù)不同產(chǎn)品的使用場景,有的時(shí)候會用到閾值,當(dāng)達(dá)到某個(gè)閾值后,就會觸發(fā)某種聯(lián)動效果。這個(gè)時(shí)候就需要有個(gè)水位線了,它起到警示的作用。
水位線的表現(xiàn)形式有兩種,實(shí)線和虛線,顏色的選取則取決于產(chǎn)品的警告級別。
水位線可以是一個(gè),也可以是多個(gè),視情況而定。
 
3.7圖表范圍
圖表范圍就是時(shí)間宏變量,用來切換數(shù)據(jù)的時(shí)間區(qū)間,如今天、本周(最近7天)、本月(最近30天)、本年等。
 
四、常見圖形分類及使用場景
圖形種類多種多樣,個(gè)個(gè)身懷絕技,而設(shè)計(jì)師則是作為挑選者。想要做好圖表設(shè)計(jì),就需要對不同圖形有較為深入的了解,并對數(shù)據(jù)進(jìn)行正確理解后,與之匹配正確的圖形,用可視化的方式將數(shù)據(jù)表現(xiàn)出來。
大多數(shù)人可能熟悉折線圖、餅狀圖、柱狀圖,但是對其他的圖形可能就不太了解了。本章節(jié)將帶大家了解更多的圖形和對應(yīng)的特性,以便更好的運(yùn)用和設(shè)計(jì)。
常見的圖形可以分為七大類:
趨勢類、比較類、排名類、占比類、流程類、分布類、關(guān)系類。
 
4.1趨勢類圖形
趨勢類圖形指的是對一段時(shí)間內(nèi)數(shù)據(jù)的展示,如單個(gè)或多個(gè)分類數(shù)據(jù)之間的趨勢變化和比較。常見的趨勢圖形有折線圖、柱狀圖、堆積柱狀圖、面積圖、蠟燭圖、瀑布圖等。
4.1.1折線圖
折線圖(Line Chart)常用于顯示數(shù)據(jù)在連續(xù)時(shí)間上的趨勢變化。通過折線連接各數(shù)據(jù)點(diǎn),突出數(shù)據(jù)的上升或下降趨勢,適合用于時(shí)間序列數(shù)據(jù)的展示。
折線圖構(gòu)成
折線圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.1.2柱狀圖
柱狀圖(Basic Column Chart)用于展示多個(gè)分類的數(shù)據(jù)變化和同類別各變量之間的比較。
柱狀圖構(gòu)成
柱狀圖構(gòu)成
 
如例圖,既能展示店鋪每天銷售額所對應(yīng)的數(shù)據(jù),也能反映出每天份銷售額的對比情況,并能通過圖形能夠快速了解銷售額最多和最少的日期。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
柱狀圖還有個(gè)進(jìn)階用法,就是折柱混合圖。顧名思義,就是折線+柱狀圖的組合。折柱混合圖通常使用在多組數(shù)據(jù)進(jìn)行對比的情景下,如商場物品銷售數(shù)據(jù)增長或減少,商品價(jià)格走勢比較等,它可以非常直觀的展示數(shù)據(jù)與數(shù)據(jù)的比擬,這樣就能一眼查看到不同時(shí)間段的數(shù)據(jù)值,通過折線和柱狀的形式展現(xiàn)出來。
如例圖,通過柱狀圖能看出每個(gè)月的銷售數(shù)據(jù),而折線圖能體現(xiàn)出利潤率。當(dāng)鼠標(biāo)移入對應(yīng)位置就可以看到詳細(xì)數(shù)據(jù)。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
4.1.3堆積柱狀圖
堆積柱狀圖(Stacked Bar Chart)是柱狀圖的變種,可以展示兩個(gè)或多個(gè)數(shù)據(jù)的變化,以及數(shù)據(jù)之間的綜合比較情況。
堆積柱狀圖構(gòu)成
堆積柱狀圖構(gòu)成
 
如例圖所示,兩個(gè)店鋪每月總銷售額用堆積圖展示,在坐標(biāo)軸上的每個(gè)品類都有兩個(gè)數(shù)據(jù),可以直觀的展示每個(gè)品類的數(shù)據(jù)總量。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.1.4面積圖
面積圖(Area Chart)是折線圖的變種。與折線圖不同的是,其變量數(shù)據(jù)和坐標(biāo)軸之間有顏色田中,這樣可以更加突出數(shù)據(jù)的變化趨勢,更加直觀的體現(xiàn)量的變化。
面積圖構(gòu)成
面積圖構(gòu)成
 
需要注意的是,填充的顏色要有30%左右的透明度,這樣在展示多組數(shù)據(jù)的時(shí)候不會互相遮蓋彼此信息。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.1.5蠟燭圖
蠟燭圖也叫K線圖(K Chart),常用于股市或期貨市場(近期炒股的同學(xué)可能看到K線圖心里會一咯噔)。K線是圍繞開盤價(jià)、最高價(jià)、最低價(jià)、收盤價(jià)等反映市場趨勢和價(jià)格信息的。
蠟燭圖構(gòu)成
蠟燭圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.1.6瀑布圖
瀑布圖也叫階梯圖,顧名思義,瀑布圖的形狀像掛在高山上的瀑布流水。瀑布圖也可以呈現(xiàn)隨時(shí)間變化的數(shù)據(jù),但不同于堆積柱狀圖的是,瀑布圖能夠重點(diǎn)突出數(shù)據(jù)變化的結(jié)果,以強(qiáng)調(diào)多個(gè)特定數(shù)據(jù)之間的變化關(guān)系。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
4.2比較類圖形
比較類圖形主要用于兩個(gè)或兩個(gè)以上的類別數(shù)據(jù)進(jìn)行比較。常見的類別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、多條折線圖、子彈圖等。
4.2.1柱狀圖
這里的柱狀圖與前面講的柱狀圖的區(qū)別在于X軸是表現(xiàn)類別的,前面例圖的X軸是表現(xiàn)時(shí)間的。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.2.2分組柱狀圖
分組柱狀圖(Grouped Bar Chart)是柱狀圖的延伸,它可以在同一數(shù)軸上展示各個(gè)分類下不同分組的數(shù)據(jù)情況。如例圖為三家企業(yè)在產(chǎn)研部、設(shè)計(jì)部、商務(wù)部的人數(shù)對比情況,由此可以清晰的看出企業(yè)丙設(shè)計(jì)部人數(shù)最少,商務(wù)部人數(shù)最多的結(jié)論。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.2.3氣泡圖
氣泡圖(Bubble Chart)是是散點(diǎn)圖的變體,由卡迪爾坐標(biāo)系(直角坐標(biāo)系)和大小不一的圓組成,通常每一個(gè)氣泡都代表著一組三個(gè)維度的數(shù)據(jù)。其中兩個(gè)決定了氣泡在笛卡爾坐標(biāo)系中的位置(即x,y軸上的值),另外一個(gè)則通過氣泡的大小來表示。
氣泡圖構(gòu)成
氣泡圖構(gòu)成
 
如例圖,x軸表示季度,y軸表示銷售額,氣泡大小代表產(chǎn)品所占全年銷售額百分比。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.2.4多條折線圖
多條折線圖除了可以表示數(shù)據(jù)隨時(shí)間的變化趨勢,還可以展示多組數(shù)據(jù)的對比情況。如例圖所示,圖為某app經(jīng)營情況的分析,在時(shí)間維度上對比下載量、注冊量、成交量三組數(shù)據(jù)及變化趨勢。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.2.5子彈圖
子彈圖(Bullet Graph)顧名思義,就是像子彈發(fā)射軌道的圖表。它的數(shù)據(jù)展示類似儀表盤,優(yōu)勢在于可以表達(dá)豐富的數(shù)據(jù)信息,且占用的空間相對較小。子彈圖的數(shù)據(jù)值是需要提前設(shè)計(jì)好的。
子彈圖構(gòu)成
子彈圖構(gòu)成
 
如例圖所示,差、良、優(yōu)和目標(biāo)值、實(shí)際值都是作為動態(tài)數(shù)據(jù)呈現(xiàn)的。相較于餅圖,子彈圖可以更高效的傳遞信息。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
4.3排名類圖形
排名圖形可以為分類數(shù)據(jù)進(jìn)行排排坐,它可以直觀的展示最大值和最小值。它的特點(diǎn)是“有序”,數(shù)值往往是從高到底依次排列,類似榜單。
4.3.1有序條形圖
有序條形圖主要用于展示各個(gè)分類的數(shù)據(jù)排名,它是最常用的排名圖形,因?yàn)槭蔷€性結(jié)構(gòu),對于微小數(shù)據(jù)間的對比會有很好的易讀性。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.3.2有序柱狀圖
有序柱狀圖和有序條形圖一樣,都可以表現(xiàn)數(shù)據(jù)的排名情況。區(qū)別在于一個(gè)是橫向?qū)Ρ葓D,一個(gè)是縱向?qū)Ρ葓D。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.4占比類圖形
占比圖形是大家最常見的圖形了,主要用于表現(xiàn)分類數(shù)據(jù)占整體的
百分比情況
。常見的圖形有餅圖、環(huán)形圖、堆積面積圖、矩形樹圖、旭日圖等。
4.4.1餅圖
餅圖(Pie Chart)是展示占比數(shù)據(jù)最最直觀的圖形了,它是通過餅塊的大小來直觀的表示分類的占比。但是餅圖也有一定局限性,即當(dāng)占比數(shù)值比較接近或者占比分類比較多時(shí),在視覺上就不太容易分辨各個(gè)類別的占比情況。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.4.2環(huán)形圖
環(huán)形圖(Donut Chart)的作用和餅圖一樣,但是環(huán)形圖的特點(diǎn)是中間區(qū)域是空的,所以視覺表現(xiàn)上比餅圖要弱一些,中間空心區(qū)域還可以用來放標(biāo)題、圖標(biāo)、數(shù)據(jù)等。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.4.3堆積面積圖
堆積面積圖(Stacked Area Chart)就是疊加數(shù)據(jù),不同顏色之間的數(shù)據(jù)并沒有疊加關(guān)系,它的整體色塊面積是數(shù)據(jù)總量,不同的分類數(shù)據(jù)可展示不同的占比情況。如例圖,不僅可以展示全球能源消耗總量,切換百分比模式還能展示不同國家消耗能源的占比情況。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.4.4矩形樹圖
矩形樹圖(Treemap)由馬里蘭大學(xué)教授Ben Shneiderman于上個(gè)世紀(jì)90年代提出,起初是為了找到一種有效了解磁盤空間使用情況的方法。 矩形樹圖適合展現(xiàn)具有層級關(guān)系的數(shù)據(jù),能夠直觀體現(xiàn)同級之間的比較。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
矩形樹圖的好處在于,相比起傳統(tǒng)的樹形結(jié)構(gòu)圖,矩形樹圖能更有效得利用空間,并且擁有展示占比的功能。矩形樹圖的缺點(diǎn)在于,當(dāng)分類占比太小的時(shí)候文本會變得很難排布。相比起分叉樹圖,矩形樹圖的樹形數(shù)據(jù)結(jié)構(gòu)表達(dá)的不夠直觀、明確。
4.4.5旭日圖
旭日圖(Sunburst Chart)是一種現(xiàn)代餅圖,它超越傳統(tǒng)的餅圖和環(huán)圖,能表達(dá)清晰的層級和歸屬關(guān)系,以父子層次結(jié)構(gòu)來顯示數(shù)據(jù)構(gòu)成情況。旭日圖中,離遠(yuǎn)點(diǎn)越近表示級別越高,相鄰兩層中,是內(nèi)層包含外層的關(guān)系。
如例圖,對醫(yī)院進(jìn)行看病、掛號、取藥的流程,用旭日圖呈現(xiàn)。比如取藥是等號、排隊(duì)、拿藥的父級,其中等號占取藥的比重最大。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.5流程類圖形
流程類圖形用來顯示流程流轉(zhuǎn)和流程流量。一般流程都會呈現(xiàn)出多個(gè)環(huán)節(jié),每個(gè)環(huán)節(jié)之間會有相應(yīng)的流量關(guān)系,這類圖形可以很好的表示這些關(guān)系。常見的流程類圖形有漏斗圖和桑基圖。
4.5.1漏斗圖
漏斗圖(Funnel Chart)適用于業(yè)務(wù)流程
比較規(guī)范
周期長
環(huán)節(jié)多
流程單向分析,通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較能夠直觀地發(fā)現(xiàn)和說明問題所在的環(huán)節(jié),進(jìn)而做出決策。漏斗圖用梯形面積表示某個(gè)環(huán)節(jié)業(yè)務(wù)量與上一個(gè)環(huán)節(jié)之間的差異。漏斗圖
從上到下
,有邏輯上的順序關(guān)系,表現(xiàn)了隨著業(yè)務(wù)流程的推進(jìn)業(yè)務(wù)目標(biāo)完成的情況。
漏斗圖總是開始于一個(gè)100%的數(shù)量,結(jié)束于一個(gè)較小的數(shù)量。在開始和結(jié)束之間由N個(gè)流程環(huán)節(jié)組成。每個(gè)環(huán)節(jié)用一個(gè)梯形來表示,梯形的上底寬度表示當(dāng)前環(huán)節(jié)的輸入情況,梯形的下底寬度表示當(dāng)前環(huán)節(jié)的輸出情況,上底與下底之間的差值形象的表現(xiàn)了在當(dāng)前環(huán)節(jié)業(yè)務(wù)量的減小量,當(dāng)前梯形邊的斜率表現(xiàn)了當(dāng)前環(huán)節(jié)的減小率。 通過給不同的環(huán)節(jié)標(biāo)以不同的顏色,可以幫助用戶更好的區(qū)分各個(gè)環(huán)節(jié)之間的差異。漏斗圖的所有環(huán)節(jié)的流量都應(yīng)該使用同一個(gè)度量。
漏斗圖構(gòu)成
漏斗圖構(gòu)成
 
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.5.2桑基圖
桑基圖 (Sankey Diagram),是一種特定類型的流圖,用于描述一組值到另一組值的流向。因?yàn)槭状问褂盟娜耸且幻蠸ankey的愛爾蘭土木工程師,所以就叫桑基圖。
桑基圖通常應(yīng)用于能源、材料成分、金融等數(shù)據(jù)的可視化分析。
桑基圖的構(gòu)成
桑基圖的構(gòu)成
 
如例圖所示,可以清晰的看到,從搜索框直接搜索進(jìn)入酒店詳情頁的流量是最大的。充分說明了搜索是剛需。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
 
4.6分布類圖形
分布圖形主要用于展示每個(gè)數(shù)值在數(shù)據(jù)集中出現(xiàn)的頻次和數(shù)量,常見類型有散點(diǎn)圖、氣泡圖、熱力圖、直方圖、箱型圖、等高線圖等
4.6.1散點(diǎn)圖
散點(diǎn)圖Scatter Chart,也叫 X-Y 圖,它將所有的數(shù)據(jù)以點(diǎn)的形式展現(xiàn)在笛卡爾坐標(biāo)系上,以顯示變量之間的相互影響程度,點(diǎn)的位置由變量的數(shù)值決定。
例圖展示的是AB兩國男性的身高和體重?cái)?shù)據(jù),通過散點(diǎn)圖中的數(shù)據(jù)點(diǎn)分布情況可看出,B國男性的身高遠(yuǎn)大于A國。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
4.6.2氣泡圖
前面4.2.3里講過單維度數(shù)據(jù)的氣泡圖,這里是多維度的氣泡圖案例。如例圖所示,圖中展示了5個(gè)維度的數(shù)據(jù),氣泡的代表地區(qū)類別,氣泡的大小代表人口總數(shù),氣泡顏色代表國家類別,X軸代表人均國內(nèi)生產(chǎn)總值,Y軸代表人均壽命。
B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈:圖表設(shè)計(jì)
 
 
需要注意的是,氣泡圖的數(shù)據(jù)大小容量有限,氣泡太多會使圖表難以閱讀。但是可以通過增加一些交互行為彌補(bǔ):隱藏一些信息,當(dāng)鼠標(biāo)點(diǎn)擊或者懸浮時(shí)顯示,或者添加一個(gè)選項(xiàng)用于重組或者過濾分組類別。另外,氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因?yàn)槿绻腔诎霃交蛘咧睆降脑挘瑘A的大小不僅會呈指數(shù)級變化,而且還會導(dǎo)致視覺誤差。
 
4.6.3熱力圖
熱力圖就是使用冷色到暖色的不同顏色表示數(shù)據(jù)從大到小的權(quán)重,或用同色系顏色的深淺來表示數(shù)據(jù)的多少。熱力圖可以在坐標(biāo)軸上呈現(xiàn)數(shù)據(jù)的大小分布,也可以在地圖或圖片上使用。
 
 
 


作者:MoeDesigner
鏈接:https://www.zcool.com.cn/article/ZMTYxOTU3Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

這些包裝技巧,簡單又出效果,不看一會就刪了!

前端達(dá)人

最近ui課學(xué)員開始做結(jié)課作業(yè),在給大家批作業(yè)的時(shí)候,發(fā)現(xiàn)很多同學(xué)對于包裝審美還是差一些,課上給大家實(shí)操了很多案例,今天給大家分享幾個(gè),比如一組的這塊需求分析,包裝的就不太行:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
有點(diǎn)太隨意了,包括文字的排版,還有標(biāo)題前面的兩個(gè)圓圈:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
如果我來包裝的話,一定要加點(diǎn)修飾,不能只是文字,比如加點(diǎn)圖標(biāo)或者加點(diǎn)卡片,我可以先把卡片加上,這樣會更加有聚焦的感覺:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這時(shí)候我們可以想辦法加點(diǎn)顏色區(qū)分,比如用產(chǎn)品的主色:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
然后可以再給圓圈里面加點(diǎn)圖標(biāo),或者修飾元素,因?yàn)橐唤M同學(xué)已經(jīng)有了一些質(zhì)感圖標(biāo)的繪制,直接加上就可以了:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
然后再加上標(biāo)題:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
我們來對比下第一版和優(yōu)化后的效果:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這里面其實(shí)差的僅僅只是一點(diǎn)點(diǎn)包裝審美和用心的態(tài)度,技法層面沒什么門檻,只有兩個(gè)質(zhì)感圖標(biāo),還都是一組同學(xué)自己畫的!
再舉一個(gè)1組同學(xué)的例子,他們在展示圖表的時(shí)候,效果是這樣的:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
如果面試官用手機(jī)看你的作品,能看清楚啥呀,所以如果你覺得自己的作品做的還不錯(cuò),一定要學(xué)會放大展示局部,比如我們這樣優(yōu)化一下:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
是不是比剛才更加簡潔大氣?
所以大家一定要記住,有優(yōu)秀的東西,一定要拿出來放大展示,我們看看3組同學(xué)的展示方式,就優(yōu)秀很多:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
再看5組的一個(gè)案例,這張圖:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
啥問題?是不是太空了,主次也不清晰,左上角的logo快比頁面還重了,所以我們一定要先解決畫面主次的問題,先把界面變大變飽滿:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這時(shí)候可以再優(yōu)化一下左側(cè)文案的排版,稍微有點(diǎn)空曠:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
如果覺得層次還是不夠,可以把底色融入一個(gè)黑圈:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這樣的話,把上面黑色的圖標(biāo)頁,銜接在一起,就會好很多了:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
這是不是比最開始那頁的包裝強(qiáng)太多了:
這些包裝技巧,簡單又出效果,不看一會就刪了!
 
 
所以大家在作品包裝展示的時(shí)候,一定要注意這些細(xì)節(jié),而且是非常細(xì)致的細(xì)節(jié),有時(shí)候真的就是差一點(diǎn)點(diǎn),感覺就不一樣了!
希望今天分享的這幾個(gè)包裝小案例,大家可以有所啟發(fā),后面我會經(jīng)常改ui課同學(xué)的作業(yè),尤其是這種細(xì)節(jié)上的改動,讓大家更好的做出精致作品!
加油,兄弟們!
 

藍(lán)藍(lán)設(shè)計(jì)(m.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)軟件vue開發(fā)



作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTYyMDA3Ng==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

UI&UE實(shí)用方法論 | 做交互體驗(yàn),你必須得知道的「多爾蒂閾值」

濤濤

“當(dāng)你使用計(jì)算機(jī)執(zhí)行一系列操作,每當(dāng)你按下回車鍵,它都能在400毫秒內(nèi)給予你反饋,反饋時(shí)間還不到半秒,那么就可以讓你一直保持專注,效率也會飆升,你會完全沉迷進(jìn)去。但反饋時(shí)間哪怕只是偏差到半秒鐘,你的注意力都容易被分散,你甚至?xí)肫鹕硐磦€(gè)碗、拿個(gè)遙控板、看場比賽...所以說400毫秒以下的反饋速度,是最佳節(jié)點(diǎn)。”

日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 日本不良网站在线观看 | 亚洲影视在线观看 | 免费啪啪网址 | 欧美激情视频在线观看 | 国产性受xxxx白人性爽 | 夜夜撸影院 | 全部免费的毛片在线看 | 日韩一卡二卡三卡四卡 | 狠狠色噜噜狠狠狠狠av不卡 | 国产999精品久久久久久绿帽 | 精品免费一区二区 | 黑人精品xxx一区一二区 | 亚洲精品成a人 | 不卡一区二区在线 | 亚洲精品99久久久久中文字幕 | 羞羞的视频网站 | 国产japanhdxxxx麻豆 | 紧缚捆绑精品一区二区 | 毛片无码一区二区三区a片视频 | 精品国产第一页 | 国产精品片aa在线观看 | 在线免费色视频 | а√天堂中文在线资源8 | 国产亚洲高潮精品av久久a | 成人做爰69片免费看网站色戒 | 欧美中文字幕在线 | 99精品全国免费观看视频 | 在线aⅴ亚洲中文字幕 | 精品国产成人一区二区 | 日韩免费一区二区三区 | 天天草视频 | 免费在线观看黄色网 | 日本手机在线视频 | 伊人网伊人网 | 欧美视频在线观看视频 | 久久成人国产精品入口 | 91在线免费视频 | 国内精品久久久久久久97牛牛 | 人人舔人人干 | 在线中文字幕乱码英文字幕正常 | 国产污污 | 色青网 | 免费 成 人 黄 色 网 | 肉视频在线观看 | 亚洲乱亚洲乱妇小说网 | 国产一区二区三区在线视频 | 中文字幕av一区二区三区高 | 国产一区在线免费 | 91国视频| 午夜中文字幕 | 日本在线高清视频 | 八戒八戒在线www视频中文 | 久久久久久久久久久久久女过产乱 | 亚洲成av人在线视 | www在线| 伊人久久大香线蕉av色 | 岛国在线免费视频 | 一本久久a精品一合区久久久 | 伊人第四色 | 国产日韩一区二区在线 | 日韩视频不卡 | 农村激情伦hxvideos | 中文幕无线码中文字蜜桃 | 中文精品一区二区三区四区 | 欧美黄色三级视频 | 精品日韩在线 | 香蕉97视频观看在线观看 | 久久久久久九九99精品 | 亚洲最大的成人网站 | 精品国产91久久久久 | 第一福利在线观看 | 一本到在线视频 | 国产69精品久久久久男男系列 | 久久亚洲精品成人无码网站 | 天堂a视频 | 国内丰满熟女出轨videos | 波多野结衣的av一区二区三区 | 美女毛片一区二区三区四区 | 97视频免费看| 欧美一乱一性一交一视频 | 日韩爱爱网 | 国产偷窥自拍视频 | 国产模特私拍xxxx | 日韩精品 中文字幕 视频在线 | 成人免费在线观看网站 | 国产专区一区二区 | 中文字幕在线资源 | 91精品久久久久久久久 | 国产又色又刺激高潮视频 | 都市激情一区二区三区 | 看片在线| 成人性视频欧美一区二区三区 | 国产区精品一区二区不卡中文 | 亚洲国产第一区 | 国产精品12p | 99er国产| 999zyz玖玖资源站在线观看 | 成人快色 | 操一操 | 成人在线观看www | 免费黄色a级片 | 亚洲熟妇久久国产精品 | 日本免费黄色网址 | 日韩免费二区 | 干一干操一操 | 九九在线免费视频 | 亚洲高清在线看 | aav在线| av在线亚洲男人的天堂 | 久久久wwww| 久久久成人精品 | 天干天干天啪啪夜爽爽av网站 | 日本黄色xxx | 国产视频久久久 | 少妇饥渴难耐 | 波多野结衣在线播放 | 久久久午夜精品福利内容 | 黄色三级小视频 | 久久精品国产一区二区三区 | 久久精品国产一区二区三区不卡 | 日韩乱码人妻无码中文字幕久久 | 日日噜噜夜夜狠狠久久丁香五月 | 嫩草一区二区 | 99久久国产精 | 国产一区二区三区四区三区 | 免费天堂av | 欧美激情视频在线观看 | 亚洲天堂区 | 欧美18aaaⅹxx| 人妻夜夜爽天天爽三区麻豆av网站 | 亚洲日本va午夜蜜芽在线电影 | 在线中文字幕亚洲 | 香蕉成人臿臿在线观看 | 国产美女一区二区三区 | 国产a一级片 | ass日本粉嫩pics珍品 | 国产乱淫av片杨贵妃 | 四虎永久在线精品免费一区二区 | 无遮无挡爽爽免费毛片 | 国产精品毛片在线 | 色九九视频 | 国产视频久久久 | 国产二区视频在线观看 | 亚洲精品手机在线观看 | 国产肥白大熟妇bbbb视频 | hs网站在线观看 | 亚洲色成人网站www永久 | 天天操操操操 | 男人天堂v | 亚洲91久久 | 亚洲另类中文字幕 | av 日韩 人妻 黑人 综合 无码 | 夜夜爽夜夜叫夜夜高潮漏水 | 色综合国产 | 久久狠狠高潮亚洲精品 | 一本久久综合亚洲鲁鲁五月天 | 成人在线网站观看 | 中文字幕四区 | 男人天堂视频网站 | 久久特黄视频 | 欧美三级一区二区三区 | 羞羞视频2023| 国产女同疯狂互摸系列3 | 亚洲国产婷婷香蕉久久久久久 | 嫩草在线看 | 亚洲天堂中文在线 | 亚洲一区成人 | 天天草夜夜操 | 99精品视频播放 | 国产一区二区在线观看视频 | www.av成人| 欧美福利视频 | 成人男男视频拍拍拍在线观看 | 老女人激情视频 | 少妇一边呻吟一边说使劲视频 | 亚洲天堂视频网 | 日韩三级视频 | 亚洲中文字幕久久无码精品 | 亚洲毛片在线免费观看 | jzzijzzij日本成熟丰满 | 911精品国产一区二区在线 | 五月天色站 | 欧美精品在线一区二区 | 性欧美老人牲交xxxxx视频 | 国产爆初菊在线观看免费视频网站 | 久久视频这里只精品 | 公用小sao货h | 少妇高潮一区二区三区99 | 免费在线| 91精品久久久久久久久久久 | 国产亲子乱弄免费视频 | 香蕉视频性 | 一个人看的www日本高清视频 | 免费日本黄色网址 | 一级做a爰黑人又硬又粗 | 黄色小说在线视频 | 少妇无套内谢久久久久 | 一区不卡视频 | av无码a在线观看 | 污视频网站免费在线观看 | aa视频免费在线观看 | 国产乱论视频 | 免费看aaaaa级少淫片 | 少妇啊灬啊别停灬用力啊房东 | 久久亚洲日韩看片无码 | 欧美人与动牲交a精品 | 国产成人a亚洲精品 | 99精品久久精品一区二区 | 最近日韩中文字幕 | 国产最新在线 | 欧美性大战xxxxx久久久 | 亚洲精品乱码久久久久 | 国产免费黄色av | 久久人人爽人人爽人人片av免费 | 国产看片网站 | 欧美做爰性生交视频 | 免费av在线 | 丁香婷婷社区 | 抽插丰满内射高潮视频 | 九九精品成人免费国产片 | 91av色| 喷水白丝蜜臀av久久av | 国产清纯在线一区二区 | 五月天婷婷导航 | 久久综合噜噜激激的五月天 | 手机国产乱子伦精品视频 | 日韩一三区| 高潮一区二区三区 | 91性高潮久久久久久久 | 国产美女包臀裙一区二区 | 四虎永久免费 | 亚洲夜夜性无码 | 色噜噜av男人的天堂 | 欧美偷拍一区二区 | 2021国产精品 | 国产精品国产三级国产av中文 | 伊人网欧美 | 亚洲加勒比久久88色综合 | 蜜桃av抽搐高潮一区二区 | 欧美精品高清 | 少妇自摸视频 | 躁躁日日躁 | 强行无套内谢大学生初次 | 久久精品无码一区二区日韩av | 日韩专区第一页 | 夜夜艹逼 | 国产成人精品自拍 | 亚洲毛片一区 | 成人久久av | 91丨九色丨高潮 | 天天躁夜夜躁狠狠是什么心态 | 懂色av中文一区二区三区 | 国产精品久久高潮呻吟粉嫩av | 奇米av在线| 97久久国产亚洲精品超碰热 | av官网在线| 久久福利视频一区 | 色88888久久久久久影院 | 天天看片天天操 | 亚洲区欧美区综合区自拍区 | 日本囗交一级视频 | 2018国产大陆天天弄 | 亚洲视屏一区 | 国产精品永久免费观看 | 女教师痴汉调教hd中字 | 又粗又硬又大又爽免费视频播放 | 都市激情自拍偷拍 | 狼人青草久久网伊人 | 天堂亚洲2017在线观看 | 99精品在线视频观看 | 午夜噜噜| 小明看国产 | 被c到高潮疯狂喷水国产 | 国产国产成人免费c片 | 国内黄色毛片 | 免费无遮挡无码视频网站 | 一女二男3p波多野结衣 | 巨胸不知火舞露双奶头无遮挡 | 黑人大荫蒂高潮视频 | 影音先锋国产在线 | 成人午夜视频在线 | 亚洲国产成人在线观看 | 日韩av免费一区二区 | 欧美亚洲黄色片 | 五月天精品视频在线观看 | 女人扒开腿让男人桶到爽 | 中文字幕亚洲欧美日韩在线不卡 | 老汉色老汉首页a亚洲 | 人妻夜夜爽天天爽 | 亚洲一本大道无码av天堂 | 超碰成人在线观看 | 96久久精品| 色网站在线看 | 一级黄色大片网站 | 日韩三级黄 | 国产成a人片在线观看视频下载 | 成人做爰66片免费看网站 | 国产精品久久久久久人妻 | 久久婷婷五月国产色综合 | 国产精品自拍区 | 国产无遮挡猛进猛出免费软件 | 欧美性受xxxxxx黑人xyx性爽 | 国产女人精品视频 | 亚洲国产精品日韩av不卡在线 | 日本人和亚洲人zjzjhd | 在线免费看黄网站 | 伊人色综合久久天天网 | 拍真实国产伦偷精品 | 夜夜躁天天躁很很躁 | 色偷偷噜噜噜亚洲男人 | 羞羞色院91精品网站 | 特级少妇 | 久久精品一本到东京热 | 国产又黄又猛又爽 | 国产18毛片 | 2024国产精品| 天天爱天天草 | 青青久操 | 影音先锋久久久久av综合网成人 | 高清在线一区二区 | 国产另类重口一 | 日韩一区二区三区在线免费观看 | 未满成年国产在线观看 | www人人草| 婷婷色亚洲| 一本大道久久a久久精品综合1 | 国产午夜伦理片 | 又爽又黄又无遮挡网站 | 国产午夜精品在线 | 少妇又紧又色又爽又刺激视频 | av 高清 尿 小便 嘘嘘 | 中文字幕第一页在线vr | 日本被黑人强伦姧人妻完整版 | 欧美日韩精品在线观看视频 | 色青网| 91麻豆蜜桃一区二区三区 | 伊人精品在线观看 | 久久全国免费视频 | 久久久999精品视频 久久久99久久久国产自输拍 | 日本欧美在线播放 | 热99这里只有精品 | 999久久久国产999久久久 | 日本一区二区视频免费 | 国产黑丝高跟 | 国产日韩91 | 91麻豆国产福利在线观看 | 国产视频亚洲精品 | 日本精品久久久久久 | 欧美 偷窥 清纯 综合图区 | 九九热在线视频观看这里只有精品 | 黑人一区 | 国产av无码专区亚洲a√ | 一级大片在线观看 | 久久人人爽人人爽人人片av卡 | www.夜夜| 午夜视频在线免费观看 | 久久伊人影视 | 国产麻豆剧传媒精品国产av | 欧美另类z0z变态 | 男生女生羞羞网站 | 精品国产乱码久久久久久影片 | 中文字幕乱码亚洲精品一区 | www.四虎.com | 好大好湿好硬顶到了好爽视频 | 国产亚洲精品久久久久蜜臀 | 亚洲国产成人综合 | 在线观看老湿视频福利 | 五月婷婷久久久 | 2019最新中文字幕在线观看 | 日韩精品一区二区三区中文无码 | 国产美女裸体无遮挡免费视频 | 国产精品视频第一页 | 三个男吃我奶头一边一个视频 | 亚洲精品久久久久久久久久久 | 中文字幕第一页永久有效 | av av在线| 成熟人妻av无码专区 | 18精品爽国产白嫩精品 | 老司机午夜精品视频 | 粉嫩av在线播放 | av一卡| 日韩欧美一级大片 | 亚洲天堂网在线播放 | 国产精品嫩草影院com | 日韩欧美三级视频 | 一本一道久久a久久精品蜜桃 | 亚洲 欧美 日韩在线 | 东京热加勒比无码少妇 | 在线播放小视频 | 日日鲁鲁鲁夜夜爽爽狠狠视频97 | 99久久99久久精品免费看蜜桃 | 丰满的人妻hd高清日本 | 日日躁狠狠躁夜夜躁av中文字幕 | 美女看片| 色婷婷美国农夫综合激情亚洲 | 色五月在线视频 | 欧美第一页浮力影院 | 非洲黑人三级全黄 | 外国三级毛片 | 亚洲一区视频在线 | 天天舔天天 | 日本一本视频 | 色噜噜狠狠一区二区三区果冻 | 国产欧美va欧美va香蕉在线 | 午夜三级在线观看 | 亚洲综合在线一区 | 午夜福利1000集在线观看 | 欧美三级a做爰在线观看 | 簧片av| 99爱精品视频在线观看免费 | 制中文字幕音影 | 999久久久无码国产精品 | 裸体丰满白嫩大尺度尤物 | 91人人爽久久涩噜噜噜 | 另类激情综合 | 天天操综合网 | 女色综合 | 人成免费a级毛片 | 一本色道a无线码一区v | 欧美精品久久一区二区 | 高清无码午夜福利视频 | 吃奶av | 香蕉av福利精品导航 | 天天做天天爱夜夜爽毛片 | 久久久久久a亚洲欧洲av冫 | 国产精品自在线 | 三上悠亚久久精品 | mm131美女久久精品美女图片 | 亚洲成av人片在线观看无码 | 国产精品久久久久久亚洲影视 | 国产精品丝袜久久久久久消防器材 | 国产精品99在线观看 | 在线观看国产精品视频 | 成人性生交大片免费看冫视频 | 激情午夜av | 国产精品久久久久久久久岛国 | 久久欧 | 国产疯狂性受xxxxx喷水 | 亚洲黄网在线 | 18深夜在线观看免费视频 | 日韩福利视频网 | 国产伦精品一区二区三区视频金莲 | 337p西西人体大胆瓣开下部 | 色女人网站 | 一本色道久久综合亚洲精品不 | 欧洲成人综合网 | 樱桃视频影视在线观看免费 | 午夜国产精品成人 | 色版视频在线观看 | 国精品人妻无码一区二区三区性色 | 全国男人的天堂网 | 国产成人精品免费视频大全 | 亚洲国产精品丝袜国产自在线 | 高潮添下面视频免费看 | 国产a√精品区二区三区四区 | 国产精品视频久久久久久久 | 欧美激情影院 | 使劲快高潮了国语对白在线 | 中国性满足hd老少配 | 激情二区| 成人免费视频一区二区 | 97干干干| 欧洲成人一区二区 | 夜夜躁狠狠躁2021 | 大屁股熟女一区二区三区 | 国产日产久久高清欧美 | 国产精品高清一区二区三区不卡 | 91久久极品少妇韩国 | 亚洲综合涩| 欧美成人精品第一区 | 国内偷拍久久 | 少妇口述公做爰全过程目录 | 噜噜噜噜香蕉私人 | 欧美久久久精品 | 欧美成人精品高清视频在线观看 | 国产精品美女久久久久久久久 | 开心久久婷婷综合中文字幕 | 250pp亚洲情艺中心欧美 | 国产精品久久久久久久久久久痴汉 | 亚洲高清毛片一区二区 | 人人澡人人透人人爽 | 成熟女人特级毛片www免费 | 久久99精品国产91久久来源 | 热舞福利精品大尺度视频 | 成年人视频网站 | 琪琪电影午夜理论片八戒八戒 | 欧美××××黑人××性爽 | 国产精品成人免费精品自在线观看 | 黄色免费看视频 | 成人gav| 免费色网 | 亚洲高清视频在线播放 | 亚洲一区二区三区四区不卡 | 高潮毛片无遮挡 | jizz在亚洲 | 天海翼一区二区三区免费 | 邻居少妇2中文字幕hd | 成人禁污污啪啪入口 | 美女国产毛片a区内射 | 成人女人看片免费视频放人 | 国产周晓琳在线另类视频 | 午夜视频免费 | 玖玖爱这里只有精品 | a亚洲天堂 | 亚洲免费永久精品 | mm131亚洲精品| 极品尤物magnet | 日本久久网 | 成人免费视 | 非洲黑人狂躁日本妞 | 欧美精品久久久久久久免费软件 | 超碰色偷偷男人的天堂 | 中文字幕av无码不卡免费 | 内射无码专区久久亚洲 | 在线观看一区二区视频 | 国产–第1页–屁屁影院 | 国产美女自拍视频 | √天堂中文官网8在线 | 国产日韩欧美中文另类 | 国产成人精品一区二区三区视频 | 欧美女优在线观看 | 成人激烈床戏免费观看网站 | 麻豆aⅴ精品无码一区二区 午夜福制92视频 | 又色又爽又高潮免费视频观看酒店 | 欧美牲交a欧美在线 | 熟女少妇精品一区二区 | 久久精品国产69国产精品亚洲 | 人人爽人人爽人人爽人人爽 | 日本精品人妻无码免费大全 | 亚洲线精品一区二区三区八戒 | 国产精品1区2区3区4区 | 国产欧美日韩三级 | 午夜偷拍视频 | 最新国产精品视频 | 国产精品盗摄!偷窥盗摄 | 欧美大波乳人伦免费视频 | 色哟哟在线网站 | 精品人妻一区二区三区浪潮在线 | 国产a√精品区二区三区四区 | 免费毛儿一区二区十八岁 | www国产成人免费观看视频深夜成人网 | 国产91成人欧美精品另类动态 | a级高清免费毛片av在线 | 国产91丝袜在线播放 | 欧美九九九 | 欧美在线 | 亚洲 | 九九九九九九精品 | 欧美一区欧美二区 | 欧美日韩一级黄色片 | 日韩做爰视频免费 | 97涩涩图| 婷婷午夜 | 成人性生活免费视频 | 日韩综合在线观看 | 久久伊人亚洲 | 成人在线观看一区 | 久热热| 蜜桃成人av | 公侵犯一区二区三区四区中文字幕 | 同性色老头性xxxx老头 | 欧美日韩妖精视频 | 人妻人人添人妻人人爱 | 2023亚洲精品国偷拍自产在线 | 午夜av亚洲女人剧场se | 国产又色又爽又黄的免费软件 | 亚洲va中文字幕 | 伊人88| 寂寞少妇让水电工爽了一小说 | 天堂久久一区二区 | 国产伦精品一区二区三区视频金莲 | 色五月色开心色婷婷色丁香 | 无码人妻少妇色欲av一区二区 | 无码人妻丰满熟妇啪啪 | 亚洲精品午睡沙发 | 国产成人精品日本亚洲专区61 | 一级免费片 | 可以直接看的无码av | 欧美乱妇18p | 翁虹三级做爰在线播放 | 亚洲人成网站免费播放 | 国产精品国产三级国产潘金莲 | 日本精品视频一区二区三区 | 一级全黄少妇性色生活免费看 | 亚洲综合色吧 | 少妇1~3伦理 | 欧美成年人在线视频 | 国产成人精品日本亚洲第一区 | 日韩精品99久久久久中文字幕 | 亚洲国产免费视频 | 91精品国自产在线 | 精品国产精品久久一区免费式 | 成人丝袜激情一区二区 | 欧美99久久精品乱码影视 | 色妞导航| 青青草手机视频在线观看 | 丝袜+亚洲+另类+欧美+变态 | 福利视频一区二区 | 亚洲一区二区三区三州 | 国产精品日韩欧美大师 | 久久婷婷成人综合色综合 | 成人亚洲欧美成αⅴ人在线观看 | 午夜丰满寂寞少妇精品 | 99re伊人| 六月婷婷激情网 | 91精品国产一区二区 | 51精品国产人成在线观看 | 精品无码av一区二区三区不卡 | 国产做爰xxxⅹ高潮69 | 亚洲精品国产综合 | 中文字幕日产av | 男女做www免费高清视频网站 | 国产欧美日韩久久 | 欧美日韩一区二区综合 | 国产精品夜夜嗨视频免费视频 | 福利视频一区二区三区 | 美日韩在线视频 | 国产女同疯狂激烈互摸 | 狠狠躁夜夜躁人人爽天天 | 免费jjzz在在线播放国产 | 午夜成人理论无码电影在线播放 | 久人久人久人久久久久人 | 狠狠躁日日躁夜夜躁影院 | 华人在线| 亚洲天堂网一区二区 | 久久在线免费视频 | 亚洲清色 | 精品一区二区不卡 | 超碰精品在线 | 久久婷婷五月综合色中文字幕 | 亚洲一区二区三区中文字幕 | 91重口入口处 | 国产精品视频网站 | 麻豆视频在线看 | 蜜臀av在线观看 | 成人做爰www免费看视频网战 | 国产精品毛片一区视频播 | 久热国产精品视频 | 麻豆短视频 | 2020亚洲男人天堂 | 亚洲欧美在线看 | 女性向h片在线观看 | 中文字幕av久久 | 一级一毛片 | 亚洲欧美日韩精品suv | 少妇久久人人爽人人爽人人片欧美 | 加勒比综合| 成人欧美一区二区三区1314 | 先锋影音av最新资源 | 少妇高潮一区二区三区99女老板 | 人人干网站| 黄色国产视频 | 夜夜嗷 | 美玉足脚交一区二区三区图片 | 99性趣网| 丁香九月激情 | 欧美交性又色又爽又黄 | 男人添女荫道口视频a | 99久久人妻精品免费一区 | 国产精品情侣 | 九色丨9lpony丨大学生 | sese视频在线观看 | 秋霞在线视频 | 天堂中文在线播放 | 国产日韩aaaa片毛片 | 2024男人天堂 | 国产一区日韩二区欧美三区 | 国产精品无码无片在线观看 | 国产主播av | 泰剧19禁啪啪无遮挡 | 国产精品久久久久久久久妇女 | 国产精品成人在线观看 | av大片在线观看 | 自拍偷拍第5页 | 国产露脸久久高潮 | 日本黄色片段 | 91精品国产综合久久香蕉的特点 | 看全色黄大色黄大片大学生 | 婷婷中文网 | 毛片免费视频观看 | 久在线 | 中文字幕一区二区三区四区久久 | 国产女主播喷出白浆视频 | 国产又色又爽又刺激在线播放 | 欧美成人性生活视频 | 欧美黄色性生活 | av在线播放地址 | 日日摸日日碰人妻无码 | 亚洲天堂久 | 日本在线视频中文字幕 | 国产免费极品av吧在线观看 | 天天躁日日躁狠狠躁一区 | 麻豆传媒一区二区三区 | 亚洲蜜桃v妇女 | 浪潮av一区二区三区 | 欧美午夜激情影院 | 98国产精品综合一区二区三区 | 真实国产乱啪福利露脸 | 国产精品美女久久久免费 | 天天天天天天天天干 | 国产精品视频一区二区三区四区国 | 国产同性野外打野战 | 国产精品久久久免费视频 | 在线观看日本中文字幕 | 欧美另类极品videosbest最新版本 | 在线观看污污网站 | 日本在线一区二区 | 免费一级特黄特色的毛片 | 久久久蜜桃一区二区人 | 香蕉视频在线看 | 亚洲欧美日韩在线一区 | 天天躁日日躁狠狠躁人妻 | 五月婷婷综合色 | 午夜在线视频免费 | 人妖和人妖互交性xxxx视频 | 国产精品久久久久久久不卡 | 午夜成人鲁丝片午夜精品 | 无码国产精品一区二区免费式影视 | 国内激情 | 精品国产乱码久久久久久婷婷 | 91中文字幕在线播放 | 好吊妞这里只有精品 | 日本特黄一级片 | 亚洲第一无码av无码专区 | 亚洲s色大片在线观看 | 黄色网在线免费观看 | 亚洲大尺度无码无码专区 | 亚洲日本va在线视频观看 | 亚洲熟妇av一区二区三区浪潮 | 国产精品对白久久久久粗 | 99热只有| 久久久久国精品产熟女久色 | 91爱爱com| 国产精品对白 | 久久中文字幕一区 | 日本福利视频一区 | 91黄色免费网站 | www.国产视频.com| 超碰在线a | 亚洲精品国产精品国自产观看浪潮 | 乱肉合集乱高h男男双龙视频 | 女人裸体做爰免费视频 | 少妇姐姐| 国产精品任我爽爆在线播放 | 性高潮久久久久久久 | 精品久久久免费视频 | 日韩欧美高清一区 | 又爽又黄axxx片免费观看 | 国产伦精品一区二区三区免 | 成人无码一区二区三区 | 鲁鲁鲁爽爽爽在线视频观看 | 黄色成人免费观看 | wwwav在线视频 | 天天干免费视频 | 日日干狠狠干 | 欧美极品少妇无套实战 | 一道本在线播放 | 亚洲精品一区二区另类图片 | 宅男噜噜噜66网站在线观看 | 中文字幕在线永久 | 99久久夜色精品国产亚洲 | 色诱久久久久综合网ywww | 好吊妞人成视频在线观看27du | 无遮挡色视频免费观看 | 久久久久无码精品国产不卡 | 麻豆人妻少妇精品无码专区 | 男人晚上看的网址 | 久久久久久久久久网站 | 色秀av| 精品一区二区久久 | 色爱av综合| 国产日韩欧美在线观看视频 | 国产精品美女久久久久久久久 | 欧美性猛交xxxx| 日本熟妇大屁股人妻 | 欧洲影院 | 91视频区 | 日日操操| 国产精品久久久久久久久免费软件 | 日本人操比 | 女人裸体做爰免费视频 | 外国av网站 | 午夜影院欧美 | 99热91| 国产精品va在线播放 | 国产精品久久久久久久午夜片 | 黄色av网站免费观看 | 性高朝久久久久久久 | 久久99精品久久久水蜜桃 | 9999久久久久| 天堂资源官网在线资源 | 日韩不卡在线观看 | 久一蜜臀av亚洲一区 | 亚洲国产精品一区二区第一页 | 人体写真 福利视频 | 国产精品欧美日韩 | 欧美另类z0zx974 | 91视| 俄罗斯15一18性视频 | 日韩免费视频一区二区 | 国产精品久免费的黄网站 | 欧美18av| 日韩乱码人妻无码中文字幕 | 婷婷色婷婷开心五月四房播播 | 国产精品亚洲欧美日韩久久制服诱 | 久久嫩草 | 免费在线激情视频 | 爱爱激情免费视频 | 欧美人与物videos另类 | 91精品久久久久久综合 | 欧美全免费aaaaaa特黄在线 | 中文人妻无码一区二区三区 | 久久久久久久久久久一区二区 | 丁香久久性网 | 国产在线拍 | 97高清国语自产拍 | 芒果视频污污 | 国产一区二区三区四区精 | 国产三区在线成人av | 成人性生交大片免费看 | 快射视频在线观看 | www.黄色小说.com | 国产精品剧情对白无套在线观看 | av在线不卡播放 | 国产精品粉嫩jk国产呦系列 | 亚洲香蕉成人av网站在线观看 | 成人av无码一区二区三区 | 欧美一级性生活视频 | 永久福利视频 | 色婷婷av一区二区三区丝袜美腿 | 永久免费网站看黄yyy45视频 | 91亚洲精选 | 日韩亚洲一区二区三区 | 日本在线免费视频 | 美国少妇性做爰 | 少妇综合网 | 老头边吃奶边弄进去呻吟 | 99综合视频| 91在线视频免费看 | 亚洲香蕉视频天天爽 | 久久网站热最新地址 | 亚洲熟女www一区二区三区 | 免费拍拍拍网站 | 国产成人精品亚洲日本在线观看 | 成人精品在线播放 | 丰满少妇人妻久久久久久 | 噼里啪啦动漫高清在线观看 | 国产女同疯狂作爱系列2 | 亚洲色图综合 | 欧美偷窥清纯综合图区 | 国产精品夜色一区二区三区 | 国产第3页| 夜夜添无码试看一区二区三区 | 欧美 日韩 国产 成人 | 尤物视频激情在线视频观看网站 | 自拍视频啪 | 国产精品久久二区二区 | 亚洲精品一线二线三线 | 在线无码中文字幕一区 | 国产成人美女视频 | 亚洲国产午夜精品理论片妓女 | 性欧美一区二区三区 | 日韩视频专区 | 九色伊人 | 欧美性折磨bdsm激情另类视频 | 红杏亚洲影院一区二区三区 | 综合精品久久 | 少妇一级淫片免费放 | 污网站在线播放 | 69xxxx在线观看 | 99国产一区 | 欧美日韩无 | 久久精品99| 亚洲小说网 | 玩弄人妻少妇500系列视频 | 国产伦精品一区二区三区四区视频 | 99国产免费 | 噼里啪啦国语影视 | 噜噜噜视频在线观看 | 免费国产在线观看 | 国产主播自拍av | 国产妞干网 | 亚洲国产精品自产在线播放 | 中文在线a√在线8 | 欧美色欧美亚洲高清在线视频 | 国产熟妇高潮叫床视频播放 | 国产免费久久精品99久久 | 日韩av片在线看 | 免费日批视频 | 成年人看的羞羞网站 | 脱岳裙子从后面挺进去在线观看 | 日日综合| 精品久久久久久久久久久国产字幕 | 亚洲中文字幕无码av在线 | 一本久道久久综合狠狠爱 | 小嫩女直喷白浆 | 精品国产乱码久久久久久蜜臀网站 | 五月天一区二区三区 | 精品久久国产老人久久综合 | 毛片网站在线 | 一区二区精品在线观看 | 国产老熟女伦老熟妇露脸 | 精品国产鲁一鲁一区二区张丽 | 久久国产色 | 国模冰冰炮一区二区 | 天天干天天操天天拍 | 日本理论片中文字幕 | 欧美日韩国产综合在线 | 色婷婷香蕉 | 亚洲综合精品一区二区三区 | 五月婷色| jizz丰满的韩国女人 | 欧美精品123 | 黄色片视频在线观看 | 东北少妇av| 国产亚洲精品久久久网站好莱 | 古装清宫性艳史 | 亚洲久爱| 成品片a免人视频 | www.久久久久久久 | 色噜噜网站 | 男人的天堂av女优 | 欧美二区在线 | 久久久久久免费免费精品软件 | 国产一区成人 | 裸体美女无遮挡免费网站 | 又黄又爽又无遮挡免费的网站 | 肉嫁高柳在线 | 奇米第四色7777 | www嫩草| 欧美又粗又长 | 91麻豆精品一二三区在线 | www国产成人免费观看视频,深夜成人网 | 色噜噜狠狠色综合av | 国产av一区二区精品久久凹凸 | 亚洲天堂三级 | 91久操| 日韩精品久久久久久免费 | 91久草视频| 亚洲国产婷婷香蕉久久久久久 | 做爰丰满少妇1314 | 午夜日韩福利 | 日本黄色免费在线观看 | 午夜免费网站 | 国产95在线 | 欧美 | 欧美激情一区二区三区p站 欧美激情一区二区三区蜜桃视频 | 婷婷成人丁香五月综合激情 | 熟女丝袜潮喷内裤视频网站 | 国产亚洲第一页 | 国产成人aaa| 黄色网视频 | 日日噜噜夜夜狠狠va视频v | 亚洲成色在线综合网站 | 在线国产不卡 | 天天狠天天透天天伊人 | 国产69精品久久久久999小说 | 国产三级久久久精品麻豆三级 | 少妇太爽了太深了太硬了 | 国产精品中文字幕av | 成人免费视频视频在线观看 免费 | 北条麻妃在线一区二区免费播放 | 中国毛片视频 | 久久精品一区二区三区中文字幕 | 国产精品一区二区av | 久久久久久久一区 | 日日碰狠狠添天天爽五月婷 | 荫蒂被男人添的好舒服爽免费视频 | 老色批永久免费网站www | 欧美国产日韩一区二区 | 久久久欧美国产精品人妻噜噜 | 婷婷丁香国产 | 久久九九国产 | 国产精品亚洲欧美日韩在线观看 | 欧美黄色小视频 | 日韩六区 | 欧美一区二区三区视频在线观看 | 亚洲成人综合网站 | 日韩特级毛片 | 农村乱人伦一区二区 | 亚洲第一二三四区 | 九九久久精品国产免费看小说 | 免费无码的av片在线观看 | 天堂√在线 | 99精品免费久久久久久久久日本 | 国产精品欧美一区二区三区 | 手机看黄色 | 麻豆文化传媒精品一区观看 | 最近中文字幕在线中文高清版 | 午夜精品久久久久久99热小说 | 国产伦精品一区二区三区免费 | 黑人操bb| 在线亚洲午夜片av大片 | 国产真实交换配乱吟91 | 免费观看成年人网站 | 亚洲中文字幕在线观看 | 女人性做爰24姿势视频 | 青青草伊人久久 | 欧美日韩一区二区在线 | 精品国产www| 国产奶头好大揉着好爽视频 | 看黄色a级片 | 亚洲成人一级 | 91中文字幕在线播放 | 久久精品国产99精品亚洲 | 成人手机在线免费视频 | 久久久久久臀欲欧美日韩 | 男女裸交免费无遮挡全过程 | 欧洲精品视频在线观看 | 国产在线国偷精品产拍免费观看 | 性一交一伦一理一色一情 | 看片日韩 | 动漫精品专区一区二区三区 | 在线国产区 | 亚洲 日韩 激情 无码 中出 | 在线免费观看av网站 | 九色丨蝌蚪丨少妇调教 | 91久久夜色精品国产九色 | 免费看三级毛片 | 黄色网址在线视频 | 欧美成人一区二区三区在线观看 | 性折磨bdsm虐乳欧美激情另类 | 亚洲精品成人av在线 | 亚洲精品国偷拍自产在线观看蜜臀 | 岛国av噜噜噜久久久狠狠av | 青青视频免费看 | 天堂成人网 | 亚洲福利av | 国产亚洲精品aaaa片小说 | 欧美性色a | 成人做爰视频www网站小优视频 | 欧美精品五区 | 中日韩精品视频在线观看 | 欧美精品一区二区三区四区五区 | 中文字幕一区二区三区波野结 | 欧美综合第一页 | 日本黑人一区二区免费视频 | 少妇高潮灌满白浆毛片免费看 | 国自产拍偷拍精品啪啪一区二区 | 亚洲人 女学生 打屁股 得到 | 好紧好爽再进去一点在线视频 | 国产精品久久久久久久妇女 | 午夜精品一区二区三区aa毛片 | 久久久免费视频观看 | 1024精品一区二区三区日韩 | 伊人网国产 | 1024毛片基地 | 欧美人妻一区二区三区 | 亚洲免费视频网 | 久久ww精品w免费人成 | 人成在线免费视频 | 一区二区三区入口 | 岳狂躁岳丰满少妇大叫 | 欧美日本乱大交xxxxx | 97超碰自拍 | 无码熟妇人妻av在线影片 | 插鸡网站在线播放免费观看 | 日本中文字幕不卡 | 在线免费观看不卡av | 国产欧美日韩在线观看 | 一本色道久久综合亚洲精品图片 | 国产91对白在线播放九色 | 日韩第一页 | 极品久久久| 可以免费看污视频的网站 | 精品成人佐山爱一区二区 | 色老头一区 | 欧美黄色一级大片 | 噜噜噜在线视频 | 国产无遮挡又黄又爽免费网站 | 日韩黄色视屏 | 精品人伦一区二区三区 | 免费av网站在线观看 | 中文字幕在线观看亚洲视频 | 日本毛茸茸的丰满熟妇 | 男人午夜av | 中文中幕a在线 | 日本又黄又猛又爽免费视频 | 老熟妇高潮一区二区三区 | 国产精品亚洲а∨无码播放麻豆 | 小蜜蜂www视频在线观看高清 | 午夜成人理论福利片 | 黄色网页免费观看 | 久久不见久久见免费影院视频 | 日韩欧美视频在线免费观看 | 国产精品豆花视频www | 日韩在线视频网址 | 波多野结衣在线观看一区二区三区 | av网址网站 | 国产精品一区二区羞羞答答 | 国产亚洲第一页 | 国产永久免费观看视频 | 色综合中文综合网 | 日韩高清不卡一区 | av无码久久久久不卡免费网站 | 国产精品一区二区无线 | 日本二区在线观看 | 一区二区三区四区精品视频 | www.av在线.com| 免费中文字幕日韩欧美 | 欧美激情视频一区二区三区不卡 | 四虎影院在线观看免费 | 自拍 另类 综合 欧美小说 | 日本aa大片在线播放免费看 | 久久偷看各类wc女厕嘘嘘偷窃 | 女人被黑人狂躁c到高潮小说 | 秋霞影院一区二区 | 日本最新免费二区三区 | 日本三级中文字幕在线观看 | 国模吧无码一区二区三区 | 国产精品丝袜黑色高跟鞋v18 | 婷婷色在线观看 | 亚洲va欧美 | 日韩三级视频 | 国产亚洲视频在线播放香蕉 | 天堂√在线| 污网站免费看 | 老妇女av| 久久久久久九九99精品 | 荷兰成人性大交视频 | 日韩欧美亚洲综合久久 | 人妻尝试又大又粗久久 | 亚洲国产成人av毛片大全 | 一区二区三区视频免费在线观看 | 少妇被爽到高潮喷水久久欧美精品 | 国产福利视频一区二区 | 一本大道久久a久久综合婷婷 | 亚洲欧美日韩愉拍自拍 | 啪啪免费网 | 国产精品69久久久久999小说 | 国产精品揄拍一区二区 | 国产色婷婷久久99精品91 | 国产无遮挡一区二区三区毛片日本 | 浮力影院草草 | 四虎成人永久免费视频 | 精品国产一区二区三区无码 | 91网站永久免费看 | 久久精品伦理 | 亚洲精品乱码久久久久久蜜桃麻豆 | www.亚洲免费| 久久精品国产99精品国产亚洲性色 | 国产精品99久久免费观看 | 国产精品久久久久久亚瑟影院 | 欧洲美熟女乱又伦av影片 | 人妻洗澡被强公日日澡 | 伊人色爱 | 婷色| 西西人体www大胆高清 | 成人在线视频免费观看 | 欧美狂野另类xxxxoooo | 国产精品久久国产三级国不卡顿 | 精品一区二区三区免费播放 | 精品一区二区三区无码免费视频 | 日本天天色| 91大神福利视频 | 亚洲视频综合网 | 天堂8中文在线 | 黑人狂躁中国少妇and | 邻居少妇张开腿让我爽了在线观看 | 国语啪啪| 中文字幕色婷婷在线视频 | 午夜性视频国产牛牛视频 | 四虎免看黄 | 暴力调教一区二区三区 | 91精品国产黑色瑜伽裤 | 无码一区二区三区 | 国产精品99久久久久的智能播放 | 5个黑人躁我一个视频 | 人妻无码熟妇乱又伦精品视频 | 久久金品| 三男一女吃奶添下面视频 | 乱人伦中文字幕成人网站在线 | 亚洲一区二区乱码 | 91国偷自产一区二区介绍 | 国产又黄又猛又粗又爽的 | 性一交一乱一伧国产女士spa | 老熟女一区二区免费 | 日韩视频免费在线 | 香蕉在线视频观看 | 欧美做受| 91亚洲精品久久久蜜桃网站 | 国产不卡视频一区二区三区 | 内射中出无码护士在线 | 久久亚洲一区二区三区四区 | av在线播放国产 | 人人澡人摸人人添 | 丰满少妇作爱视频免费观看 | 一本大道一区二区 | 欧美黄色影院 | 全部av―极品视觉盛宴 | 性无码一区二区三区在线观看 | 中文字幕系列 | 不卡中文字幕av | 97视频在线免费播放 | 少妇一级淫免费播放 | 欧美天天综合色影久久精品 | 在线播放免费人成毛片乱码 | 夜夜嗨一区二区三区 | 亚洲综合无码一区二区三区 | 小早川怜子一区二区的导演 | 亚洲丝袜中文字幕 | 亚洲少妇中出 | 射进来av影视 | 粉嫩av在线播放 | 在线看91 | 亚洲а∨天堂久久精品喷水 | 69精品| 欧美三级大片 | 哺乳一区二区三区中文视频 | 性做久久久久久免费观看 | 无套内谢老熟女 | av综合色 | 完美奇遇在线观看 | 国产女同视频 | 国产成人av一区二区三区在线观看 | 精品国产户外野外 | 手机av免费在线 | 四虎免费视频 | 欧美经典一区二区三区 | 免费三级黄 | 中国肥老太婆高清video | 97久久精品亚洲中文字幕无码 | 亚洲国产精品久久久久久久 | 成人免费小视频 | 久久久噜噜噜久久久白丝袜 | 久久精品蜜芽亚洲国产av | 18禁免费观看网站 | 熟妇五十路六十路息与子 | 精品久久久久久久久久久久久久 | 日本久久久久久科技有限公司 | 欧美成人一区在线 | 亚洲一区二区免费在线观看 | 朝鲜美女黑毛bbw | 丰满少妇理论片在线观看 | 亚洲国产午夜精品理论片在线播放 | 青青草好吊色 | 国产欧美一区二区在线 | 国内免费精品视频 | 成人动漫免费观看 | jizz免费视频| 少妇毛片 | 日本三级吃奶乳视频在线播放 | 亲子伦视频一区二区三区 | 日日躁夜夜躁白天躁晚上 | 无套内谢少妇高潮免费 | 色婷婷综合激情综在线播放 | 久久69av | 天堂网站 | 欧洲熟妇色xxxx欧美老妇 | 国产做爰xxxⅹ久久久精华液 | 亚洲性av网站 | 痴汉电车在线播放 | 日韩在线中文字幕视频 | 日韩欧美123| 爽插| 国产成人精品亚洲日本在线观看 | 国产一区二区在线不卡 | 国产午夜精品一区二区三区四区 | 激情五月激情综合 | 天天躁夜夜躁狠狠躁2020色戒 | 欧美mv日韩mv国产网站 | 欧美67194| 亚洲成av人片一区二区三区 | 尤物99国产成人精品视频 | 天天操天天干天天操 | 专干老熟女视频在线观看 | 日本疯狂做爰xxxⅹ高潮视频 | 亚洲综合久久久久 | 中文字幕成人在线视频 | 刘亦菲乱码一区二区三区 | 麻花传媒在线mv免费观看视频 | 91精品国产综合久久福利不卡 | 久久久久在线观看 | 97久久国产亚洲精品超碰热 | 亚洲视频精品在线观看 | 黄色aa级片 | 亚洲国产va | 色女仆影院 | 久久婷婷国产91天堂综合精品 | 国内精品久久久久久 | 色一情一狱一爱一乱 | 日本久久精品视频 | 再深点灬舒服灬大了添片在线 | 神马影院午夜伦理片 | 国产成人精品亚洲777人妖 | 亚洲少妇第一页 | 另类一区二区 | 亚洲久悠悠色悠在线播放 | 国产剧情av网站 | av色婷婷| 久久精品久久久久久久久久久久久 | 性欧美牲交在线视频 | 国产一级片a | 欧美 日韩 精品 | 成人性生交大片免费看r老牛网站 | 这里只有精品视频在线 | 精品日产乱码久久久久久仙踪林 | 丁香五月网久久综合 | 亚洲自拍偷拍图 | 97精品国产97久久久久久粉红 | 激情网站在线观看 | 色婷五月天| 成人免费毛片明星色大师 | 欧美一级黄 | 男人吃奶摸下挵进去啪啪软件 | 亚洲视频在线播放 | 亚洲成av人影院 | 午夜精品福利一区二区 | 天堂在线www中文 | 人妻无码中文专区久久五月婷 | 欧美最猛黑人xxxxx猛交 | 久久精品一级片 | 亚洲性大片| 国产日韩欧美视频 | 亚洲国产精品一区二区久久恐怖片 | 亚洲高清乱码午夜电影网 | 精品国产亚洲一区 | 在线免费观看国产精品 | 玖玖精品视频 | 性色a码一区二区三区天美传媒 | 两个人看的www免费视频中文 | 久久精品国产一区二区三区 | 精品久久久久久久久久中文字幕 | 黄色网址最新 | 国产午夜啪啪 | 热精品| 五月天婷婷亚洲 | 久久精品99国产精品日本 | 久久久久亚洲精品 | 国产69精品久久久久999天美 | 欧美中文一区 | 日本aaaaa级毛片片 | 毛片网免费 | 女女les互磨高潮国产精品 | 99re国产视频 | 日韩大片在线免费观看 | 日本一区二区三区在线观看 | 亚洲丁香婷婷久久一区二区 | 欧美性猛交xxxx乱大交丰满 | 888夜夜爽夜夜躁精品 | 日本欧美色十大禁片毛片 | 操操久久| 99国产欧美精品久久久蜜芽 | 天堂资源中文网 | 成年人视频网 | 欧美日韩亚洲系列 | 免费日韩一区 | 亚洲视频在线免费播放 | 日韩天堂在线 | 成人午夜高潮a∨猛片 | 超碰99在线 | 国产美女性生活 | 欧美日韩片| 欧美日韩精品人妻狠狠躁免费视频 | 人人干狠狠干 | mm31美女爽爽爽爱做视频vr | 成人精品av| 日韩欧美高清在线视频 | 色婷婷香蕉 | 好男人中文资源在线观看 | 波多野结衣乳巨码无在线 | 亚洲精品成人久久久 | 色麻豆国产原创av色哟哟 | 一本大道伊人av久久综合 | 成人二三区 | www.黄色网 | 无遮挡色视频免费观看 | 国产在线拍揄自揄视精品按摩 | 国产不卡免费视频 | 一级片在线免费 | 夜夜春亚洲嫩草影院 | 亚洲国产精品成人一区二区在线 | 印度a级片 | 成人男女做爰免费视频网老司机 | 强制中出し~大桥未久10在线播放 | 黑人粗一硬一长一进一爽一a级 | 日韩精品在线网站 | 日韩视频h| 国产精品无码一本二本三本色 | 久久夜色精品国产www红杏 | 成年女人永久免费观看视频 | 九色porny丨国产首页注册 | 国产日韩欧美日韩大片 | 国产成年人免费视频 | 国产男女猛烈无遮掩视频免费网站 | 青草青草视频 | 亚洲欧洲在线视频 | 韩国理伦三级 | 高清二区 | 国产性夜夜春夜夜爽1a片 | 国产午夜福利片 | 国产成人av在线婷婷不卡九色 | av大片在线免费观看 | 五月天综合激情 | 色乱码一区二区三区 | 久久国产精品偷任你爽任你 | 国产高潮久久久 | 午夜影院色 | 免费精品无码av片在线观看 | 欧美日本免费一区二区三区 | 日本乳奶水流出来高清xxxx | 国产午夜精品久久久久久免费视 | 国产一区二区三区乱码 | 黄色日批视频 | 色噜噜狠狠一区二区三区果冻 | 中文字幕日韩精品在线观看 | 中文字幕 欧美 日韩 | 极品粉嫩美女露脸啪啪 | 成人免费无遮挡无码黄漫视频 | blacked精品一区国产在线观看 | 欧美成人家庭影院 | 午夜色av | 少妇性l交大片免费快色 | 在线视频日韩欧美 | 国产精品无码av不卡顿 | 国产激情一区二区三区 | 日韩一区视频在线 | 亚洲精品乱码久久久久久9色 | 成人做爰高潮片免费看 | 日本三级欧美三级人妇视频黑白配 | 一本色道久久综合亚洲精品婷婷 | 国产精品嫩草在线 | 成人在线免费看 | 亚洲精品国产主播一区 | 国产男女在线观看 | 人人爱夜夜爽日日做蜜桃 | 国产男女精品视频 | 国产精品视频在线看 | 波多av在线 | 亚洲另类色综合网站 | 午夜久久久久久 | 亚洲97| 久久精品一二 | www在线国产| 嫩草精品福利视频在线观看 | 国产第一页在线播放 | 国产黄色自拍视频 | 国产成人免费xxxxxxxx | 国产精品女教师av久久 | 久久久久久久久久一区二区三区 | 中文字幕乱码免费看电影 | 国产色视频免费 | 国产亚洲精品精华液 | 丰满少妇在线观看bd | cao在线视频 | 摸摸摸bbb毛毛毛片 蘑菇av | 337p人体粉嫩胞高清视频 | 亚洲天堂欧美 | 美女av一区二区三区 | 日日弄天天弄美女bbbb | 国产在线观看黄色 | 少妇人妻一级a毛片 | 欧美在线aa| 牛鞭伸入女人下身的真视频 | 亚洲男人天堂 | 中产乱码中文在线观看免费软件 | 91精品久久久久久久久久 | 黄色毛片小说 | 亚洲成a人蜜臀av在线播放 | 中文字幕第十二页 | 国产又大又黑又粗 | 成人欧美一区二区三区黑人一 | 4438x成人网一全国最大色成网站 | 国产精品操 | 日韩欧美一区二区三区在线 | 久久不射网 | 少妇高潮久久77777 | 精品一区二区三区四区 | 日韩精品在线观看一区二区 | 一级欧美一级日韩 | 国内精品久久久久久久久久久 | 6080影视最新97理伦片 | 一区二区三区网站 | 在线天堂资源www在线中文 | 色 成人 亚洲| 国产va精品免费观看 | 猫咪www免费人成人入口 | 国产高潮好爽受不了了夜夜做 | 久久久久精彩视频 | 一本久道视频一本久道 | 国产午夜精品av一区二区麻豆 | 成人欧美一区二区三区在线播放 | 亚洲精品国产主播一区 | 狠狠躁天天躁无码中文字幕 | 亚洲精品乱码久久久久久金桔影视 | 国产网红福利视频一区二区 | 性色av无码不卡中文字幕 | 偷拍女人私密按摩高潮视频 | 中文字幕日产av | 免费的一级黄色片 | 国产成人精品日本亚洲直播 | 男人的网站在线观看 | 久久蜜臀精品av | 96精品高清视频在线观看软件 | 亚洲黄色片免费看 | 北条麻妃青青久久 | 国产真实露脸精彩对白 | 久久久久成人精品免费播放动漫 | 另类 欧美 日韩 国产 在线 | 国产一区二区三区91 | 亚洲国产高清在线观看视频 | 午夜乱码爽中文一区二区 | 国产精品久久久久影院老司 | 91欧美一区二区 | 激情综合亚洲色婷婷五月app | 中文字幕一区二区三区四区久久 | 久久精品国产精品亚洲蜜月 | 国精品一区二区 | www男人的天堂com | 欧美国产精品一区二区 | 爱爱小视频免费看 | www国产色| 国内精品久久久久久影视8 国内精品久久久久影视老司机 | 女人14毛片毛片毛片毛片区二 | 99久久精品国产免费看不卡 | 九色porny丨国产首页注册 | 成人性视频sm. | 亚洲特级黄色片 | 国产精品天天在线午夜更新 | 国产大屁股喷水视频在线观看 | 视频一区二区在线 | 国产人人草 | 熟女人妇 成熟妇女系列视频 | 美女的胸给男人玩视频 | 久久精品久久久 | 国产人妻777人伦精品hd | 精品欧美小视频在线观看 | 亚洲乱码国产乱码精品精大量 | 老司机亚洲精品影院 | 中文字幕高清一区 | 噜噜啪啪| 丰满少妇高潮惨叫久久久 | 中文区中文字幕免费看 | 亚洲春色在线观看 | 丝袜美腿一区二区三区 | 不卡中文字幕av | 琪琪五月天 | 亚洲精品高清国产一久久 | 久久久精选 | 酒店大战丝袜高跟鞋人妻 | 天堂www中文在线资源 | 亚洲女同另类 | 久久久久国产精品免费免费搜索 | 国产口爆吞精在线视频2020版 | 国产裸体歌舞一区二区 | 亚洲毛片儿 | 视频久久精品 | 午夜在线视频免费 | 国产乱淫av麻豆国产免费 | 国产综合精品一区二区三区 | 99精品欧美一区二区三区 | 三级欧美日韩 | 天天综合天天做天天综合 | 亚洲欧美在线观看 | 亚洲乱码国产乱码精品精乡村 | 麻豆黄色片| 亚洲aaaa级特黄毛片 | 香蕉久久人人爽人人爽人人片av | 色天天综合久久久久综合片 | 免费成人毛片 | 小罗莉极品一线天在线 | 国产精品入口66mio | 成人天堂视频理伦片 | 国产96在线| 18禁黄网站禁片免费观看女女 | 国产成人毛毛毛片 | 色多多福利网站免费破解 | 欧美美女一区二区 | 丰满人妻一区二区三区无码av | 内射无码专区久久亚洲 | 大片av| 亚洲色图婷婷 | 日日摸夜夜添夜夜添毛片av | 神马午夜在线观看 | 麻豆tube| 亚洲2017天堂色无码 | 99爱在线精品免费观看 | 成熟亚洲日本毛茸茸凸凹 | 免费黄色在线观看 | 日韩精品第一 | 日本xxxxx高清 | 国产成人精品123区免费视频 | 精品久久久久久久久久软件 | 免费观看激色视频网站 | 成人无码网www在线观看 | 78成人天堂久久成人 | 日韩在线一二 | 欧美另类极品videosbest使用方法 | 中国女人内谢69xxxxⅹ视频 | 狠狠色综合网站久久久久久久 | 丰满少妇一区二区三区 | 女人18毛片水真多 | 国产精品视频 | 欧美又粗大人妖一进一出 | 国产精品狼人久久久久影院 | 福利一区二区在线 | 国产熟女一区二区三区五月婷 |