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

首頁(yè)

高級(jí)設(shè)計(jì)師才會(huì)的設(shè)計(jì)思維,31個(gè)細(xì)節(jié)幫你深入了解!

杰睿

1. 并不存在單一的設(shè)計(jì)過(guò)程

 

設(shè)計(jì)過(guò)程被描述為多個(gè)階段,每個(gè)階段都包含不同的活動(dòng)來(lái)完成該階段,它沒(méi)有統(tǒng)一的標(biāo)準(zhǔn)流程,每個(gè)公司和設(shè)計(jì)師都有自己的流程版本。

盡管存在多個(gè)流程,但一般流程和階段類似于以下內(nèi)容:

了解問(wèn)題:初步了解問(wèn)題。觀察、采訪和傾聽(tīng)用戶。

定義問(wèn)題:解釋和定義要解決的問(wèn)題。

構(gòu)思:通過(guò)頭腦風(fēng)暴產(chǎn)生盡可能多的想法。

原型設(shè)計(jì):構(gòu)建原型并與其他人分享( 再次縮小解決方案空間,為實(shí)驗(yàn)階段 )。

測(cè)試:測(cè)試可能的解決方案、實(shí)施、改進(jìn)或重新設(shè)計(jì)。

 

2. 設(shè)計(jì)思維是傳統(tǒng)解法和創(chuàng)造性設(shè)計(jì)過(guò)程的結(jié)合

 

傳統(tǒng)的問(wèn)題解決采取有條不紊而又科學(xué)的形式。該過(guò)程從一個(gè)問(wèn)題開(kāi)始,定義要采取的步驟以及達(dá)到解決方案的工具或方法。

設(shè)計(jì)思維是一種創(chuàng)造性的策略,可以產(chǎn)生創(chuàng)造性的未來(lái)結(jié)果和/或創(chuàng)造性的問(wèn)題解決方式,它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。

它通常被描述為一種創(chuàng)造性、主觀和感性的對(duì)許多大型組織的分析邏輯( 布朗,2008 年 ),或作為分析和創(chuàng)造性推理模式的組合( 鄧恩 & 馬丁,2006 年;利特卡,2015 年 )。

 

3. 設(shè)計(jì)思維是問(wèn)題解法的進(jìn)階

 

設(shè)計(jì)思維來(lái)源于常規(guī)問(wèn)題解決方法,常規(guī)問(wèn)題解法是設(shè)計(jì)思維的基礎(chǔ)。

 

從解決問(wèn)題到設(shè)計(jì)思維,Liedtka (2013)

結(jié)果發(fā)現(xiàn),設(shè)計(jì)思維實(shí)際上也是一個(gè)解決問(wèn)題的過(guò)程,而不僅僅是一個(gè)創(chuàng)新過(guò)程( 利特卡,2013)

一個(gè)例子是,豐田采用設(shè)計(jì)思維從頭開(kāi)始分析其西海岸的一個(gè)客戶聯(lián)絡(luò)中心,在重新設(shè)計(jì)過(guò)程中,組建了一個(gè)由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊(duì),這一舉動(dòng)最終改變了客戶和員工的服務(wù)中心體驗(yàn)。

 

4. 從起床到入睡,你都在解決問(wèn)題

 

我們每天都會(huì)遇到問(wèn)題,但是當(dāng)我們解決同樣的問(wèn)題時(shí),它們就成了例行公事( 似乎已經(jīng)忘記它們是問(wèn)題了 ),我們甚至都沒(méi)有意識(shí)到正在解決這些問(wèn)題。例如,我的辦公室在 30 分鐘路程之外,該怎么到達(dá)那里?開(kāi)車、坐火車或巴士到目的地;除非車子輪胎被刺破,否則你就需要弄清楚如何到達(dá)辦公室。

 

5. “設(shè)計(jì)思維”術(shù)語(yǔ)的產(chǎn)生

 

1990 年代,IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語(yǔ):“設(shè)計(jì)思維”,并將多年來(lái)醞釀的方法和想法封裝成一個(gè)統(tǒng)一的概念。

 

6. 工程設(shè)計(jì)思維現(xiàn)在被稱為設(shè)計(jì)思維

 

設(shè)計(jì)思維是以人為中心、開(kāi)放式、基于問(wèn)題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式,而工程師處理和解決問(wèn)題的方式有其設(shè)計(jì)思維的基礎(chǔ)。

 

7. 設(shè)計(jì)思維的歷史早已出現(xiàn)(2000 年)

 

設(shè)計(jì)思維一詞可以追溯到 1987 年 Peter Rowe 的著作:“設(shè)計(jì)思維。” 他描述工程師和建筑師處理問(wèn)題的方法有很大不同。

90 年代初,認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊(duì),擔(dān)任他們的用戶體驗(yàn)架構(gòu)師,這使他成為第一個(gè)在職位中包含 UX 的人。他提出了“用戶體驗(yàn)設(shè)計(jì)”這個(gè)術(shù)語(yǔ),因?yàn)樗?ldquo;涵蓋人們對(duì)系統(tǒng)體驗(yàn)的所有方面,包括工業(yè)設(shè)計(jì)、圖形、界面、物理交互和手冊(cè)。” 從那時(shí)起,這些領(lǐng)域中的每一個(gè)都將用戶體驗(yàn),擴(kuò)展到了自己的專業(yè)領(lǐng)域。

 

8. “棘手的”設(shè)計(jì)思維

 

設(shè)計(jì)思維在解決“棘手問(wèn)題”時(shí)特別有用。

 

棘手問(wèn)題的特征

“棘手問(wèn)題”一詞是由設(shè)計(jì)理論家 Horst Rittel 在 1972 年創(chuàng)造的,用來(lái)描述本質(zhì)上非常模糊 \ 特別棘手的問(wèn)題。棘手問(wèn)題,有很多未知因素,沒(méi)有確定的解決方案。問(wèn)題或解決方案可能與另一個(gè)棘手的問(wèn)題有關(guān),因此這是一個(gè)需要設(shè)計(jì)思維的持續(xù)過(guò)程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問(wèn)題。

 

9. 設(shè)計(jì)思維不僅限于數(shù)字化設(shè)計(jì)的應(yīng)用

 

設(shè)計(jì)主題的范圍是普遍的,因?yàn)?設(shè)計(jì)思維可以應(yīng)用于人類經(jīng)驗(yàn)的任何領(lǐng)域。

 

它可以用于:

符號(hào)和視覺(jué)傳達(dá):這包括平面設(shè)計(jì)的傳統(tǒng)工作,如排版和廣告、書(shū)籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計(jì)算機(jī)顯示。

材料:這包括對(duì)日常用品的形式和視覺(jué)外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機(jī)械和車輛。

人類活動(dòng)和組織性服務(wù):包括對(duì)物流的傳統(tǒng)管理關(guān)注,結(jié)合物質(zhì)資源、工具和人類低效的序列和時(shí)間表,以達(dá)到特定的目標(biāo)。

復(fù)雜的系統(tǒng)或環(huán)境:生活、工作、娛樂(lè)和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點(diǎn),或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。

10. 設(shè)計(jì)思維不僅限于設(shè)計(jì)師的實(shí)踐

 

設(shè)計(jì)思維起源于設(shè)計(jì)師的培訓(xùn)和專業(yè)實(shí)踐,但這些原則可以被每個(gè)人實(shí)踐并擴(kuò)展到每個(gè)活動(dòng)領(lǐng)域。(布朗,2013 年)

在企業(yè)中,設(shè)計(jì)過(guò)程可以為企業(yè)環(huán)境中的問(wèn)題解決帶來(lái)創(chuàng)新思維。它還可以用于醫(yī)療保健,通過(guò)向護(hù)士、醫(yī)生和管理人員教授設(shè)計(jì)思維技術(shù),我們可以激勵(lì)相關(guān)從業(yè)者貢獻(xiàn)新的想法。

 

11. 了解問(wèn)題是第一

 

不管是什么設(shè)計(jì),理解和研究問(wèn)題是必不可少的,因?yàn)槲覀兡軌驈钠涑霭l(fā),從而進(jìn)行以用戶為中心的設(shè)計(jì)。

 

設(shè)計(jì)思維的最早階段是搞懂你能帶來(lái)的情感價(jià)值。設(shè)計(jì)思維方法迫使你停留在提問(wèn)與質(zhì)疑階段,而不是準(zhǔn)確定義出問(wèn)題后進(jìn)入下一階段。我們都有過(guò)快進(jìn)入解決方案模式的傾向,所以設(shè)計(jì)思維方法迫使你真實(shí)地存在于這個(gè)不清楚、有時(shí)還非常混亂的時(shí)刻,從而使你對(duì)要解決的問(wèn)題產(chǎn)生更好的理解。(利特克,2013)

 

12. 設(shè)計(jì)思維需要兩種不同的思維

 

傳統(tǒng)的問(wèn)題解決涉及提出一個(gè)解決方案,但設(shè)計(jì)思維首先使我們發(fā)散,試圖為問(wèn)題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維,縮小多種可能性,找到單一的最佳解決方案。

 

13. 設(shè)計(jì)思維是可以傳授和學(xué)習(xí)的,它不是一種人格特質(zhì)

根據(jù)利特卡和奧美 (2011) 的說(shuō)法,設(shè)計(jì)思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問(wèn)題的方法。正如我們思考創(chuàng)造力一樣,即使是設(shè)計(jì)思維也可以通過(guò)實(shí)踐來(lái)教授和改進(jìn)。

 

14. 設(shè)計(jì)過(guò)程不是線性的

 

設(shè)計(jì)過(guò)程從來(lái)都不是線性的,它由多次失敗和迭代組成(布朗,2018)。

首先,設(shè)計(jì)師試圖將問(wèn)題與過(guò)去的類似案例聯(lián)系起來(lái)。如果這種方法不能提供任何解決方案,下一步就是使用知識(shí)和創(chuàng)造力作為一種實(shí)驗(yàn)思維形式來(lái)產(chǎn)生新的想法。使用決策矩陣對(duì)這些想法進(jìn)行評(píng)估,從而會(huì)產(chǎn)生被進(jìn)一步分析和測(cè)試的解決方案。如果成功,它將被實(shí)施。如果不成功,則需要重新表述問(wèn)題,并重復(fù)該過(guò)程。這是一個(gè)迭代過(guò)程,即循環(huán)方法。

這一持續(xù)不斷的重新再設(shè)計(jì)過(guò)程,源于和客戶親密接觸的洞察。

 

15. 調(diào)研是設(shè)計(jì)思維非常重要的工具

 

學(xué)習(xí)設(shè)計(jì)思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著:學(xué)習(xí)收集和分析大量數(shù)據(jù);學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么;學(xué)習(xí)管理不確定感,以及與許多新的伙伴合作( 利特卡和奧美,2011)。你可以進(jìn)行的研究類型分為三類:生成性研究、評(píng)估性研究和驗(yàn)證性研究。

 

16. “要么很快失敗,要么經(jīng)常失敗”

 

一種常見(jiàn)的表述 —— 實(shí)際上是設(shè)計(jì)思維的另一種視角 —— 即設(shè)計(jì)師應(yīng)該預(yù)料到會(huì)“很快失敗或經(jīng)常失敗”(布朗,2009)。

當(dāng)過(guò)程早期發(fā)生故障時(shí),例如被拒絕的原型,實(shí)質(zhì)上它可以為有效解決方案提供關(guān)鍵見(jiàn)解。這種觀點(diǎn)與傳統(tǒng)的先形成理論,再檢驗(yàn)正誤的方式相矛盾。

 

17. 公司正在將設(shè)計(jì)思維作為解決問(wèn)題的核心方法

 

Airbnb、Braun 和百事可樂(lè)等多元化公司都在 采用設(shè)計(jì)思維并將其作為核心戰(zhàn)略。例如,IBM 為全球旗下的 44 個(gè)設(shè)計(jì)工作室聘請(qǐng)了 1600 名設(shè)計(jì)師,并且正在培訓(xùn)數(shù)以萬(wàn)計(jì)的設(shè)計(jì)師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )

 

18. 以人為本的思維

 

設(shè)計(jì)思維為我們解決問(wèn)題添加了以人為本的元素。當(dāng)我們?cè)噲D通過(guò)牢記人們的想法來(lái)解決問(wèn)題,并使用基于直接觀察乃至訪談的研究時(shí),我們便會(huì)捕捉到與消費(fèi)者需求一致的意外見(jiàn)解和創(chuàng)新。

 

19. 可觀的商業(yè)價(jià)值

 

它有助于將成功的產(chǎn)品更快地推向市場(chǎng),最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計(jì)思維實(shí)踐,通過(guò)有效使用設(shè)計(jì)和設(shè)計(jì)思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計(jì)算出的 ROI 超過(guò) 300%。

 

20. 對(duì)復(fù)雜問(wèn)題的作用性

 

由于復(fù)雜的問(wèn)題從來(lái)不能被所有人完全理解,因此在嘗試設(shè)計(jì)解決方案時(shí),處理歧義和多個(gè)并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。

設(shè)計(jì)思維通過(guò)綜合和歸納思維,幫助實(shí)現(xiàn)質(zhì)的飛躍。它允許通過(guò)解構(gòu)來(lái)測(cè)試約束,并允許通過(guò)多樣性思維和批評(píng)思維,來(lái)?yè)肀Ш吞剿髌缌x。

消費(fèi)者通常不知道他們有什么問(wèn)題需要解決,或者他們無(wú)法用語(yǔ)言表達(dá)出來(lái)。只有經(jīng)過(guò)仔細(xì)觀察,設(shè)計(jì)者才能根據(jù)真實(shí)消費(fèi)者行為中看到的東西來(lái)識(shí)別問(wèn)題,而不是簡(jiǎn)單地根據(jù)對(duì)消費(fèi)者的想法來(lái)確定問(wèn)題。這有助于定義模棱兩可的問(wèn)題,并找到解決方案。

 

21. 別名:跳脫框架的思維

 

該方法鼓勵(lì)“跳出框架思考”(“瘋狂的想法”);它蔑視顯而易見(jiàn)的事物并采用更具實(shí)驗(yàn)性的方法。
在早期的流程階段鼓勵(lì)大膽的想法,以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計(jì)師可以嘗試開(kāi)發(fā)新的不受約束的思維方式,或?qū)ΤR?jiàn)問(wèn)題的創(chuàng)新解覺(jué)方法。

 

22. 設(shè)計(jì)思想家的特征

 

根據(jù)大多數(shù)設(shè)計(jì)學(xué)院的說(shuō)法,具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計(jì)思維的作用。

同理心:從多個(gè)角度想象世界 —— 同事、甲方客戶、實(shí)際使用者和消費(fèi)者的角度。要成為更好的同理心,必須傾聽(tīng)和觀察他人的行為,注意并獲得洞察力。

綜合思維:重要的是不僅要有分析能力,而且要能夠提出新穎的解決方案,還要憑直覺(jué)。

樂(lè)觀:除非你相信有解決方案,否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時(shí),你可能會(huì)放棄。

實(shí)驗(yàn)主義:重大創(chuàng)新并非來(lái)自漸進(jìn)式調(diào)整。設(shè)計(jì)思想家以創(chuàng)造性的方式提出問(wèn)題并探索限制因素,并朝著全新的方向發(fā)展。

協(xié)作:產(chǎn)品、服務(wù)和體驗(yàn)日益復(fù)雜,因此必須擁有一支具有不同背景的團(tuán)隊(duì),以幫助從多個(gè)角度看待問(wèn)題。

23. 有助于對(duì)抗某些偏見(jiàn)

當(dāng)我們想到一個(gè)問(wèn)題的多種解決方案時(shí),對(duì)我們解決問(wèn)題會(huì)非常有幫助,因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問(wèn)題。想要擺脫功能固定,首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開(kāi)簡(jiǎn)單的彈簧門鎖。

 

24. 實(shí)用

 

為了幫助設(shè)計(jì)師利用文科和技術(shù)理論,整合多個(gè)領(lǐng)域的知識(shí)以找到創(chuàng)新的解決方案,我們采用設(shè)計(jì)思維來(lái)獲得洞察力。該方法側(cè)重于可視化和操作,因而幫助我們更容易地了解實(shí)際解法,而不僅僅是理論模型。

 

25. 執(zhí)行

 

第一批美國(guó)公司在 2000 年代初期開(kāi)始實(shí)施設(shè)計(jì)思維,這一概念引起了德國(guó)投資者 Hasso Plattner 的興趣,他于 2006 年資助創(chuàng)建了兩所設(shè)計(jì)學(xué)校(d.schools),其中一所位于波茨坦大學(xué)(德國(guó)),另一所位于美國(guó)斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計(jì)思維培訓(xùn),因此該研究重點(diǎn)關(guān)注這些國(guó)家,以尋找早期實(shí)施者。

 

26. 團(tuán)隊(duì)思考

 

設(shè)計(jì)思維通常涉及希望參與整個(gè)設(shè)計(jì)和開(kāi)發(fā)過(guò)程的龐大利益相關(guān)者團(tuán)隊(duì)。

觀點(diǎn)、才能和經(jīng)驗(yàn)的多樣性被認(rèn)為是注入新思維的部分重要來(lái)源。多樣性確保通過(guò)融合不同的觀點(diǎn)、技能和知識(shí)來(lái)產(chǎn)生創(chuàng)意(卡振思,2018 年;薩梅和德拉赫-扎哈維,2013 年)。設(shè)計(jì)思維的協(xié)作方法和工具可幫助團(tuán)隊(duì)以積極的方式利用他們的差異。

決策是平等的,因?yàn)槊總€(gè)成員的意見(jiàn)都被征求和使用(卡爾格倫等,2016)。

27. 不需要花哨的技術(shù)原型

當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時(shí),它不是什么花哨的設(shè)備,而是一個(gè)用膠帶粘起來(lái)的原型。

低保真原型制作起來(lái)既快速又便宜( 想想幾分鐘和幾分錢 ),但可以從用戶和同事那里得到有用的反饋,這符合快速驗(yàn)證、廉價(jià)試錯(cuò)的原則。為每個(gè)想法投入盡可能少的資源意味著前期投入的時(shí)間和金錢更少。此外,將多個(gè)原型帶到現(xiàn)場(chǎng)進(jìn)行測(cè)試為用戶提供了比較的基礎(chǔ)參考,同時(shí)也有助于揭示某些需求。

 

28. 過(guò)程強(qiáng)調(diào)心態(tài)和行動(dòng)

 

為了創(chuàng)新,設(shè)計(jì)思維意識(shí)到認(rèn)知和行動(dòng)對(duì)創(chuàng)新過(guò)程很重要。認(rèn)知包括接受度、樂(lè)觀和創(chuàng)造性的信心( 凱莉 & 凱莉,2013;鄭,2018),而行動(dòng)包括快速原型設(shè)計(jì)、旅程地圖和假設(shè)浮現(xiàn)( 假設(shè)浮現(xiàn):assumption surfacing,這是一種評(píng)估技術(shù),涉及寫(xiě)出潛在的假設(shè)和反假設(shè)。)( 卡爾格倫等,2016;利特卡,2015)

 

29. 在組織中實(shí)施設(shè)計(jì)思維的挑戰(zhàn)

 

如果領(lǐng)導(dǎo)層不歡迎風(fēng)險(xiǎn)、模棱兩可和風(fēng)格的改變,實(shí)施起來(lái)就會(huì)變得更加困難。它會(huì)被管理者“質(zhì)疑”其具體指標(biāo)

沃爾特斯 ( 2011 ) 聲稱,由于設(shè)計(jì)思維的模糊性,它與組織文化相沖突。

據(jù)受訪者稱,在日常業(yè)務(wù)中使用設(shè)計(jì)思維之所以不會(huì)是最優(yōu)選項(xiàng), 因?yàn)樗琴Y源密集型的,增加了工作量。( 麗莎等,2016)

在醫(yī)療保健等規(guī)避風(fēng)險(xiǎn)的行業(yè)和公司中,“經(jīng)常和早點(diǎn)失敗”的方法被認(rèn)為是非常困難的。

 

30. 設(shè)計(jì)思維的問(wèn)題

 

許多設(shè)計(jì)師反對(duì)設(shè)計(jì)思維這一觀點(diǎn),設(shè)計(jì)思維不僅關(guān)乎一個(gè)過(guò)程,而且關(guān)乎改變思維過(guò)程并提高人們可能提出的解決方案的創(chuàng)造力。

“設(shè)計(jì)思維”的推廣已被大型全球公司用來(lái)增加業(yè)務(wù)。不過(guò),在更廣泛的設(shè)計(jì)世界中,我甚至?xí)f(shuō)“設(shè)計(jì)思維”的過(guò)度宣傳導(dǎo)致了所提供設(shè)計(jì)質(zhì)量的下降。—— Yasushi Kusume

弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會(huì)助理教授 Lee Vinsel 在《設(shè)計(jì)思維運(yùn)動(dòng)是荒謬的》中寫(xiě)道,“歸根結(jié)底,設(shè)計(jì)思維與設(shè)計(jì)無(wú)關(guān)。這與文科無(wú)關(guān)。這與任何有意義的創(chuàng)新無(wú)關(guān)。如果這意味著重大的社會(huì)變革,那肯定不是關(guān)于“社會(huì)創(chuàng)新”。這是關(guān)于商業(yè)化的。”

 

31. 為什么需要共情

 

觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動(dòng),可以為你提供有關(guān)人們想法和感受的線索。

你可能認(rèn)為你知道問(wèn)題所在,但只有通過(guò)觀察才能了解消費(fèi)者真正需要什么。

宜家派設(shè)計(jì)師到人們家中,觀測(cè)他們的互動(dòng)行為來(lái)了解他們的需求。這將使設(shè)計(jì)者能夠推斷這些經(jīng)歷的無(wú)形含義,以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實(shí)上,最好的解決方案來(lái)自于對(duì)人類行為的最佳洞察。

Good Kitchen 是一家為老年人和體弱者提供膳食的社會(huì)服務(wù)機(jī)構(gòu)。起初的問(wèn)題似乎是設(shè)計(jì)不當(dāng)?shù)纳攀巢藛巍H缓笤O(shè)計(jì)思維揭示了無(wú)數(shù)問(wèn)題,所有問(wèn)題都源于服務(wù)本身的性質(zhì)。因此,經(jīng)由對(duì)服務(wù)進(jìn)行了徹底改革的之后,最終提高了客戶和員工的滿意度(利特卡,2014)



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

蘭亭妙微(m.73404.com.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。

打開(kāi)設(shè)計(jì)思維才能突破瓶頸

杰睿

對(duì)于設(shè)計(jì)師來(lái)說(shuō),遇到設(shè)計(jì)瓶頸期很正常,入行一段時(shí)間后所具備的能力就會(huì)達(dá)到峰值,無(wú)法突破峰值就會(huì)遇到瓶頸。主要在設(shè)計(jì)思維和設(shè)計(jì)技法層面受限,打開(kāi)設(shè)計(jì)思維才能突破瓶頸期,通過(guò)積累優(yōu)秀的案例并進(jìn)行總結(jié)分析,可以更快的打破思維限制。

 

 

 

 

 

分享目錄

 

一、趣味性的登錄設(shè)計(jì)

二、瓷片區(qū)的趣味性手勢(shì)交互

三、營(yíng)造懷舊感的溫馨體驗(yàn)

四、趣味性的進(jìn)度提示設(shè)計(jì)

五、場(chǎng)景感的點(diǎn)擊操作

六、動(dòng)效引導(dǎo)用戶發(fā)帖

七、卡通形象強(qiáng)化瓷片區(qū)視覺(jué)感

八、不改變布局的曝光強(qiáng)化

九、可以晃動(dòng)的 Banner 圖

十、場(chǎng)景感的底部標(biāo)簽欄設(shè)計(jì)

 

 

 

一、趣味性的登錄設(shè)計(jì)

 

登錄是進(jìn)入產(chǎn)品的第一道防線,也容易讓用戶產(chǎn)生排斥感,降低用戶的防備心理才能提高登錄的意愿度。

 

盯潮 App 在登錄界面中,以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計(jì),使得頁(yè)面視覺(jué)感豐富。晃動(dòng)手機(jī)時(shí)元素也會(huì)移動(dòng),在掉落或者碰撞手機(jī)邊緣時(shí)配合震動(dòng)感,讓體驗(yàn)變得非常有趣。趣味性的設(shè)計(jì)降低了用戶的排斥感,提升了登錄的意愿度和體驗(yàn)感。

 

 

 

 

 

 

二、瓷片區(qū)的趣味性手勢(shì)交互

 

瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運(yùn)營(yíng)模塊,起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁(yè)面中的布局比較靈活,設(shè)計(jì)表現(xiàn)也非常豐富。

 

盯潮 App 在首頁(yè)瓷片區(qū)設(shè)計(jì)中,以柵格式布局進(jìn)行區(qū)塊劃分,占比較大的模塊類似于 Banner 式表現(xiàn)。通過(guò)手勢(shì)可以任意拖動(dòng)實(shí)現(xiàn)切換,趣味性和互動(dòng)性相結(jié)合,提高了用戶的使用樂(lè)趣。

 

 

 

 

 

 

三、營(yíng)造懷舊感的溫馨體驗(yàn)

 

童年的記憶是我們逝去的青春,每每看到小時(shí)候的畫(huà)面,總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營(yíng)造設(shè)計(jì)風(fēng)格的產(chǎn)品,名字叫“軟眠眠”。

 

這是一款拯救失眠者的治愈系睡眠 App,以一幅小時(shí)候生活的環(huán)境插畫(huà)填充界面背景,圖標(biāo)設(shè)計(jì)也是提取小時(shí)候的玩物或者生活用品,視覺(jué)風(fēng)格營(yíng)造極強(qiáng)的懷舊感。無(wú)論是畫(huà)風(fēng)還是配色、配樂(lè)等,都勾起了我們滿滿的回憶,帶給用戶溫馨的體驗(yàn)。

 

 

 

 

 

 

四、趣味性的進(jìn)度提示設(shè)計(jì)

 

在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會(huì)選擇進(jìn)度條,通過(guò)可視化的表達(dá)提高用戶的理解,減輕信息認(rèn)知負(fù)擔(dān)。

 

軟眠眠 App 在定制睡眠計(jì)劃的過(guò)程中,完成選項(xiàng)時(shí)的進(jìn)度條設(shè)計(jì)非常有意思,是一個(gè)小孩通過(guò)拉動(dòng)繩子移動(dòng)。拉動(dòng)過(guò)程中結(jié)合動(dòng)態(tài)表達(dá),配合手繪風(fēng)的表現(xiàn)讓人感覺(jué)輕松愉快,趣味性的設(shè)計(jì)也提高了完成選項(xiàng)任務(wù)的意愿度。

 

 

 

 

 

 

五、場(chǎng)景感的點(diǎn)擊操作

 

在保障底層操作體驗(yàn)的基礎(chǔ)上,設(shè)計(jì)會(huì)越來(lái)越講究細(xì)節(jié)的體驗(yàn),逐步強(qiáng)化情感化的融入和場(chǎng)景感的體驗(yàn)。

 

最近在體驗(yàn)小雞上工 App 時(shí),在找工作的列表設(shè)計(jì)中加入了“搶”按鈕,在點(diǎn)擊列表時(shí)按鈕會(huì)有按壓的動(dòng)效過(guò)程。模擬搶拍按鈕獲得機(jī)會(huì)的體驗(yàn),營(yíng)造場(chǎng)景氛圍感,提高了設(shè)計(jì)表達(dá)的趣味性。

 

 

 

 

 

 

六、動(dòng)效引導(dǎo)用戶發(fā)帖

 

微動(dòng)效可以提高功能的吸引力,也能讓互動(dòng)體驗(yàn)變得更有趣,可以通過(guò)動(dòng)效引導(dǎo)功能操作和提高關(guān)注度。

 

騰訊動(dòng)漫 App 在圈子欄目中,以 IP 形象結(jié)合動(dòng)效強(qiáng)化發(fā)帖按鈕,以此引導(dǎo)用戶參與發(fā)帖。動(dòng)效不僅突出了發(fā)帖的關(guān)注度,也讓發(fā)帖按鈕設(shè)計(jì)更有親和力,進(jìn)而提升用戶的點(diǎn)擊欲。

 

 

 

 

 

 

七、卡通形象強(qiáng)化瓷片區(qū)視覺(jué)感

 

瓷片區(qū)起到強(qiáng)化曝光達(dá)到流量引導(dǎo)的作用,提高該模塊的吸引力至關(guān)重要,視覺(jué)感的突出也尤為重要。

 

會(huì)玩 App 在首頁(yè)“一起玩”的瓷片區(qū)設(shè)計(jì)中,以卡通形象結(jié)合豐富的色彩進(jìn)行表現(xiàn),各種裝扮的形象豐富視覺(jué)感。卡通形象設(shè)計(jì)風(fēng)格統(tǒng)一,卡片色彩豐富且協(xié)調(diào),整體瓷片區(qū)視覺(jué)沖擊力十足。

 

 

 

 

 

 

八、不改變布局的曝光強(qiáng)化

 

在當(dāng)前產(chǎn)品結(jié)構(gòu)不變的基礎(chǔ)上,如何提高局部?jī)?nèi)容或者主推內(nèi)容的曝光度,是產(chǎn)品設(shè)計(jì)師不斷探索的方向。

 

愛(ài)奇藝 App 首頁(yè)推薦欄目 Banner 圖下方,默認(rèn)情況下以宮格布局推薦影片。前段時(shí)間在打開(kāi)時(shí)發(fā)現(xiàn)了一個(gè)臨時(shí)設(shè)計(jì)表達(dá),保持當(dāng)前結(jié)構(gòu)布局不變,放大了圖片填充和推薦影片,整張畫(huà)面填充宮格,視覺(jué)張力十足。該設(shè)計(jì)表達(dá)既不會(huì)干擾當(dāng)前布局,也能強(qiáng)化推薦影片的曝光度,解決方案值得探索。

 

 

 

 

 

 

九、可以晃動(dòng)的 Banner 圖

 

Banner 可以在創(chuàng)意、造型、互動(dòng)形式等方面進(jìn)行設(shè)計(jì)發(fā)揮,也呈現(xiàn)了許多優(yōu)秀的方案,產(chǎn)品設(shè)計(jì)師也在不斷嘗試更多的可能性。

 

最近在體驗(yàn)盯潮 App 時(shí),發(fā)售欄目頂部 Banner 圖設(shè)計(jì)引人關(guān)注。當(dāng)用戶左右晃動(dòng)手機(jī)時(shí),Banner 圖背景層不動(dòng),而文案和產(chǎn)品等元素層會(huì)跟著晃動(dòng)的頻率左右移動(dòng)。可以晃動(dòng)的 Banner 圖非常有意思,成功地吸引了用戶的關(guān)注度和點(diǎn)擊欲。

 

 

 

 

 

 

十、場(chǎng)景感的底部標(biāo)簽欄設(shè)計(jì)

 

底部標(biāo)簽欄設(shè)計(jì)可以在背景、造型、圖標(biāo)等元素中發(fā)揮,其中圖標(biāo)設(shè)計(jì)中的發(fā)揮相對(duì)更多一些,在背景和造型層面的案例較少,不過(guò)最近也發(fā)現(xiàn)了一個(gè)解決方案。

 

在體驗(yàn)云游萬(wàn)里長(zhǎng)城小程序時(shí),進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計(jì)結(jié)合了長(zhǎng)城墻面和結(jié)構(gòu),非常有場(chǎng)景代入感。設(shè)計(jì)了深色版和淺色版,圖標(biāo)造型設(shè)計(jì)也融入了長(zhǎng)城元素,不失為一種優(yōu)秀的差異化設(shè)計(jì)探索。

 

 

 

 

小結(jié)

 

希望本期的分享可以開(kāi)啟大家更多設(shè)計(jì)思維,從優(yōu)秀的設(shè)計(jì)方案中發(fā)現(xiàn)設(shè)計(jì)的軌跡,復(fù)用到后期的項(xiàng)目設(shè)計(jì)中。本文描述屬于個(gè)人理解和總結(jié),不足之處歡迎大家留言補(bǔ)充,我們互相進(jìn)步。



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

蘭亭妙微(m.73404.com.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ì)中形狀的創(chuàng)意與應(yīng)用

杰睿

形狀設(shè)計(jì)可以影響整個(gè)界面的視覺(jué)效果。通過(guò)選擇適當(dāng)?shù)男螤詈团帕蟹绞剑梢詣?chuàng)造出令人愉悅、易于使用和富有吸引力的界面。

寫(xiě)在前面

在UI設(shè)計(jì)中,形狀設(shè)計(jì)是一個(gè)至關(guān)重要的環(huán)節(jié)。對(duì)其選擇和排列會(huì)直接影響到界面的美觀度和用戶的交互體驗(yàn)。接下來(lái)將詳細(xì)探討UI設(shè)計(jì)中的形狀設(shè)計(jì),包括其重要性、基本原則和實(shí)際應(yīng)用。

 

形狀可以幫助用戶理解和操作界面。一個(gè)優(yōu)秀的形狀設(shè)計(jì)應(yīng)該具有清晰、簡(jiǎn)潔和易于理解的特點(diǎn),我們?cè)谄綍r(shí)做設(shè)計(jì)中,需要將這些原則深入到每一個(gè)細(xì)節(jié)中。

在設(shè)計(jì)中,形狀的識(shí)別和理解是至關(guān)重要的。一個(gè)成功的形狀設(shè)計(jì)應(yīng)該能夠快速地被用戶識(shí)別并理解。例如,一個(gè)常見(jiàn)的形狀可以使用不同的顏色和大小來(lái)區(qū)分主要內(nèi)容和次要內(nèi)容,從而引導(dǎo)用戶的注意力。

 

1、形狀的一致性

在UI設(shè)計(jì)中,一致性是一個(gè)非常重要的原則。一個(gè)好的形狀設(shè)計(jì)應(yīng)該在整個(gè)應(yīng)用程序中保持一致,從而使用戶可以輕松地導(dǎo)航和操作。例如,閑魚(yú)APP里的所有的按鈕可以使用相同的形狀和顏色,以便用戶可以輕松地識(shí)別并操作。

 

2、形狀的個(gè)性化與品牌識(shí)別

一個(gè)獨(dú)特的形狀設(shè)計(jì)可以幫助品牌在競(jìng)爭(zhēng)激烈的市場(chǎng)中脫穎而出。一個(gè)好的形狀設(shè)計(jì)應(yīng)該能夠體現(xiàn)品牌的個(gè)性和價(jià)值觀,從而增強(qiáng)品牌的識(shí)別度。使用獨(dú)特的圖標(biāo)和標(biāo)志來(lái)傳達(dá)其品牌形象和價(jià)值觀。例如:小米的logo、京東狗、淘寶天貓。

 

1、按鈕設(shè)計(jì)

按鈕是UI設(shè)計(jì)中最重要的元素之一。一個(gè)好的按鈕設(shè)計(jì)應(yīng)該具有清晰的形狀和易于理解的標(biāo)簽。

按鈕形狀主要有直角、小圓角、全圓角三種樣式。

① 直角按鈕具有嚴(yán)謹(jǐn)、力量、高端的特點(diǎn),適用于大牌美妝、奢侈品類產(chǎn)品;

 

② 小圓角按鈕具有穩(wěn)定、中性的感覺(jué),適用于用戶跨度較大的常規(guī)類產(chǎn)品中,例如微信、滴滴、抖音等;

 

③ 全圓角按鈕更加溫和、親切,適用于電商類和兒童類的產(chǎn)品中。

 

按鈕尺寸和比例根據(jù)iOS和Android的規(guī)范,按鈕尺寸至少高于5.5毫米(36 pt),否則用戶點(diǎn)擊時(shí)會(huì)較為困難。同時(shí),按鈕長(zhǎng)度固定,文字長(zhǎng)度變化或是按鈕長(zhǎng)度根據(jù)文字長(zhǎng)短而變化的設(shè)計(jì)方式也需要考慮文字距離按鈕上下左右邊距的比例關(guān)系。

總的來(lái)說(shuō),UI中按鈕形狀的設(shè)計(jì)需要結(jié)合具體的產(chǎn)品屬性和界面風(fēng)格,以及用戶的使用習(xí)慣來(lái)進(jìn)行綜合考慮。

 

2、圖標(biāo)設(shè)計(jì)

圖標(biāo)是UI設(shè)計(jì)中另一種重要的具有高度概括性和視覺(jué)傳達(dá)性的小尺寸圖像元素。可以幫助用戶快速地識(shí)別和理解功能和信息,是靠文案無(wú)法實(shí)現(xiàn)的。

例如,天氣圖標(biāo)通過(guò)其形狀、色彩和設(shè)計(jì)元素直觀地傳達(dá)不同的天氣狀況和氣象信息,幫助人們更好地了解天氣狀況。又如衛(wèi)生間男女圖標(biāo)的設(shè)計(jì)讓人們易于識(shí)別和理解。

 

在UI設(shè)計(jì)中,圖標(biāo)的圓角度通常是怎么定義的呢?

① 大圓角:應(yīng)用在以圓潤(rùn)、可愛(ài)為主要風(fēng)格的UI設(shè)計(jì)中,以營(yíng)造出更加柔和、親切的視覺(jué)效果。

② 小圓角:小圓角作為一種微妙的細(xì)節(jié)元素,可以增加圖標(biāo)的層次感和細(xì)節(jié)。在追求設(shè)計(jì)質(zhì)感的界面中,適當(dāng)添加小圓角可以使圖標(biāo)更加精致和有品質(zhì)感。

③ 無(wú)圓角:應(yīng)用在科技或現(xiàn)代感的UI設(shè)計(jì)中,以營(yíng)造出更加硬朗、冷峻的視覺(jué)效果。但使用需要克制,過(guò)多的直角可能會(huì)讓整個(gè)界面顯得生硬和冷感。

補(bǔ)充一點(diǎn),我發(fā)現(xiàn)一個(gè)重要細(xì)節(jié),就是很多人在計(jì)算內(nèi)圓角數(shù)值時(shí)都存在困擾。自工作以來(lái),我注意到這個(gè)問(wèn)題影響了很多人,他們不知道如何正確地計(jì)算內(nèi)圓角的數(shù)值。為了解決這個(gè)問(wèn)題,通過(guò)以下方式幫助大家更好地掌握計(jì)算內(nèi)圓角數(shù)值的方法。

 

3、輸入框設(shè)計(jì)

輸入框是用戶輸入信息的重要區(qū)域。在UI設(shè)計(jì)中,輸入框的形狀設(shè)計(jì)可以根據(jù)實(shí)際需求和設(shè)計(jì)風(fēng)格進(jìn)行變化。以下是一些常見(jiàn)的輸入框形狀設(shè)計(jì):

① 方型輸入框:這是最常見(jiàn)的輸入框形狀,它以方形的形式呈現(xiàn),可以在其中輸入文本或信息。這種設(shè)計(jì)簡(jiǎn)單明了,易于使用,適用于大多數(shù)場(chǎng)景。

② 圓角矩形輸入框:這種輸入框在四個(gè)角上采用了圓角設(shè)計(jì),使得整個(gè)輸入框看起來(lái)更加柔和、友好。這種設(shè)計(jì)在一些需要強(qiáng)調(diào)用戶輸入的場(chǎng)景下較為常見(jiàn)。

③ 下拉菜單輸入框:這種輸入框可以讓用戶從下拉菜單中選擇一個(gè)選項(xiàng),而不是直接在文本框中輸入。這種設(shè)計(jì)適用于一些固定選項(xiàng)的場(chǎng)景,可以減少用戶的輸入操作。

④ 按鈕式輸入框:這種輸入框?qū)⑤斎肟蚝桶粹o結(jié)合在一起,用戶可以點(diǎn)擊按鈕來(lái)輸入信息。這種設(shè)計(jì)適用于一些需要強(qiáng)調(diào)點(diǎn)擊操作的場(chǎng)景,例如站酷的登錄。

⑤ 語(yǔ)音識(shí)別輸入框:這種輸入框允許用戶通過(guò)語(yǔ)音來(lái)輸入信息,而不是手動(dòng)輸入。這種設(shè)計(jì)適用于一些需要快速輸入或不方便手動(dòng)輸入的場(chǎng)景,例如駕車、寫(xiě)字等。

總的來(lái)說(shuō),輸入框的形狀設(shè)計(jì)應(yīng)根據(jù)實(shí)際需求和設(shè)計(jì)風(fēng)格來(lái)進(jìn)行選擇,同時(shí)也要考慮用戶的使用習(xí)慣和操作體驗(yàn)。

 

4、導(dǎo)航欄設(shè)計(jì)

導(dǎo)航欄是UI設(shè)計(jì)中重要的組成部分之一。它幫助用戶在不同的頁(yè)面之間進(jìn)行切換和導(dǎo)航。在設(shè)計(jì)導(dǎo)航欄時(shí),應(yīng)考慮其位置、顏色和形狀等因素。以下是一些常見(jiàn)的導(dǎo)航欄形狀設(shè)計(jì):

① 頂部導(dǎo)航欄:這是最常見(jiàn)的導(dǎo)航模式,位于頁(yè)面頂部,可以包含網(wǎng)站的名稱、主要的導(dǎo)航選項(xiàng)、搜索框等元素。這種設(shè)計(jì)簡(jiǎn)單明了,易于使用,適用于大多數(shù)場(chǎng)景。

② 側(cè)邊導(dǎo)航欄:這種導(dǎo)航模式位于頁(yè)面左側(cè),通常用于二級(jí)導(dǎo)航或輔助導(dǎo)航。側(cè)邊導(dǎo)航欄可以以垂直或水平方向呈現(xiàn),根據(jù)實(shí)際需求進(jìn)行選擇。

③ 底部導(dǎo)航欄:這種導(dǎo)航模式位于頁(yè)面底部,通常用于一級(jí)目錄的導(dǎo)航。底部導(dǎo)航欄可以包含網(wǎng)站的名稱、主要的導(dǎo)航選項(xiàng)、搜索框等元素。這種設(shè)計(jì)操作方便,用戶體驗(yàn)好,適用于大多數(shù)場(chǎng)景。

④ 彈出式導(dǎo)航欄:這種導(dǎo)航模式通常用于移動(dòng)端應(yīng)用,通過(guò)點(diǎn)擊或滑動(dòng)屏幕上的按鈕或圖標(biāo)來(lái)喚出導(dǎo)航菜單。彈出式導(dǎo)航欄可以以垂直或水平方向呈現(xiàn),根據(jù)實(shí)際需求進(jìn)行選擇。

總的來(lái)說(shuō),導(dǎo)航欄的形狀設(shè)計(jì)應(yīng)根據(jù)實(shí)際的導(dǎo)航模式和設(shè)計(jì)風(fēng)格來(lái)進(jìn)行選擇,同時(shí)也要考慮用戶的使用習(xí)慣和操作體驗(yàn)。好的導(dǎo)航設(shè)計(jì)應(yīng)該簡(jiǎn)單明了、易于使用,能夠提供清晰的信息架構(gòu)和層級(jí)關(guān)系,幫助用戶快速找到所需內(nèi)容。

 

5、作為底紋設(shè)計(jì)

將形狀用作底紋,可以增加圖形的視覺(jué)層次感和趣味性。尤其是當(dāng)使用如圓圈、條紋、曲線等形狀時(shí),可以使底紋呈現(xiàn)出動(dòng)態(tài)感和動(dòng)感。

也可以強(qiáng)調(diào)文字或圖片中的某些元素,用來(lái)引導(dǎo)觀者的視線,以創(chuàng)造出視覺(jué)焦點(diǎn)。比如,在一個(gè)沉悶的黑色背景上使用鮮艷的彩色形狀作為底紋,可以將觀者的注意力集中在那些形狀上。

但是,必須著重強(qiáng)調(diào)的是,底紋的使用應(yīng)當(dāng)與整體的設(shè)計(jì)風(fēng)格和主題相得益彰。若應(yīng)用不當(dāng),可能會(huì)對(duì)畫(huà)面的整體美感產(chǎn)生破壞性的影響。因此,在決定是否使用底紋時(shí),必須慎重考慮其與整體設(shè)計(jì)的和諧度。

 

1、動(dòng)態(tài)形狀設(shè)計(jì)

隨著技術(shù)的不斷發(fā)展,動(dòng)態(tài)形狀設(shè)計(jì)已經(jīng)成為一種趨勢(shì)。通過(guò)使用動(dòng)畫(huà)和過(guò)渡效果,可以創(chuàng)建更具吸引力和互動(dòng)性的界面。例如,使用漸變效果來(lái)平滑地轉(zhuǎn)換不同的頁(yè)面或狀態(tài)。

 

2、3D和立體形狀設(shè)計(jì)

3D和立體形狀設(shè)計(jì)為UI設(shè)計(jì)師提供了更多的可能性。通過(guò)使用陰影、光照和深度效果,可以創(chuàng)建更立體、更有層次感的界面。例如,使用3D旋轉(zhuǎn)效果來(lái)突出主要內(nèi)容或使用陰影效果來(lái)增加界面的深度感。

 

3、可定制形狀設(shè)計(jì)

隨著用戶對(duì)個(gè)性化需求的不斷增加,可定制的形狀設(shè)計(jì)變得越來(lái)越重要。用戶希望根據(jù)自己的喜好和需求來(lái)調(diào)整界面。例如,允許用戶自定義選擇自己喜歡的頁(yè)面主題風(fēng)格。

 

總結(jié)

在UI設(shè)計(jì)中,精美形狀設(shè)計(jì)的關(guān)鍵是深入理解用戶需求,注重細(xì)節(jié),保持一致性,勇于創(chuàng)新,不斷提高技能水平。這樣才能創(chuàng)造符合用戶口味的界面,提升用戶體驗(yàn)。簡(jiǎn)潔地說(shuō),好的形狀設(shè)計(jì)來(lái)源于用戶需求、細(xì)節(jié)、一致性、創(chuàng)新和自我提升。

以上總結(jié)僅代表個(gè)人觀點(diǎn),如有不足歡迎大家補(bǔ)充互相進(jìn)步。



作者:散落的那些
鏈接:https://www.zcool.com.cn/article/ZMTYwMTYyNA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.73404.com.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。

【設(shè)計(jì)理論】UI設(shè)計(jì)體驗(yàn)如何提升?

杰睿

企業(yè)多產(chǎn)品線模式下,UI體驗(yàn)文化打造、UI設(shè)計(jì)質(zhì)量品控5個(gè)方面闡述項(xiàng)目快速、規(guī)模化提升多產(chǎn)品線整體體驗(yàn)中的方法論和實(shí)踐經(jīng)驗(yàn)。

 

 

前言

SaaS 產(chǎn)品體驗(yàn)要求越來(lái)越高,用戶體驗(yàn)已經(jīng)成為產(chǎn)品競(jìng)爭(zhēng)力的重要組成部分,怎樣在多業(yè)務(wù)線的產(chǎn)品環(huán)境中做好體驗(yàn)設(shè)計(jì),本文從貼合業(yè)務(wù)線的設(shè)計(jì)規(guī)范、敏捷易用的前端組件庫(kù)、產(chǎn)品研發(fā)協(xié)作流程保障、UI體驗(yàn)文化打造、UI設(shè)計(jì)質(zhì)量品控5個(gè)方面闡述項(xiàng)目快速、規(guī)模化提升多產(chǎn)品線整體體驗(yàn)過(guò)程中方法論和實(shí)踐經(jīng)驗(yàn)。

 

關(guān)鍵詞:

用戶體驗(yàn)設(shè)計(jì);UI設(shè)計(jì)規(guī)范;多產(chǎn)品線;體驗(yàn)文化;UI設(shè)計(jì)落地

 

面對(duì)多產(chǎn)品體系,多產(chǎn)品線,需要積極尋找和探索適合我們客觀情況的最佳實(shí)踐,我們面臨的問(wèn)題有:

1.過(guò)往以功能堆砌為主、基本“能用”,缺乏平臺(tái)規(guī)范和一致性,體驗(yàn)不足。

2.產(chǎn)品線多、體量大。

3.客戶對(duì)產(chǎn)品體驗(yàn)要求越來(lái)越高。

4.產(chǎn)品歷史包袱、修復(fù)改動(dòng)困難。

5.對(duì)用戶體驗(yàn)認(rèn)知不一,協(xié)同、溝通成本高。

6.重復(fù)的開(kāi)發(fā)成本。

7.第三方組件與業(yè)務(wù)的匹配度不佳。

 

 

 

 

解決以上幾大難題,我們啟動(dòng)了UI 設(shè)計(jì)規(guī)范的搭建、UI組件庫(kù)的開(kāi)發(fā)等,讓規(guī)范和組件庫(kù)成為各產(chǎn)品線堅(jiān)實(shí)底座的一部分,使用戶體驗(yàn)文化賦能前端和產(chǎn)品經(jīng)理,協(xié)同 QA 力量一起推動(dòng)產(chǎn)品體驗(yàn)升級(jí),以下整理分享的實(shí)踐方法適用于中小型UED團(tuán)隊(duì)支撐復(fù)雜、多業(yè)務(wù)線的企業(yè),本文嘗試從以下幾個(gè)方面總結(jié)和提煉實(shí)踐經(jīng)驗(yàn),跟業(yè)界同行探討。

 

 

貼合業(yè)務(wù)線的UI設(shè)計(jì)規(guī)范

 

設(shè)計(jì)規(guī)范體系的搭建對(duì)于新的團(tuán)隊(duì),如何從復(fù)雜海量的業(yè)務(wù)場(chǎng)景中制定出一套適用于自己產(chǎn)品的UI設(shè)計(jì)規(guī)范,是第一道待翻越的高墻,完整的設(shè)計(jì)規(guī)范應(yīng)該是包含視覺(jué)規(guī)范與交互規(guī)范,本文主要針對(duì)設(shè)計(jì)規(guī)范實(shí)踐過(guò)程進(jìn)行闡述。

 

貼合場(chǎng)景的設(shè)計(jì)規(guī)范:

雖然市面上已經(jīng)有眾多成熟的設(shè)計(jì)規(guī)范體系可供使用,但是當(dāng)前我們所處的產(chǎn)品階段、多業(yè)務(wù) 線以及復(fù)雜的業(yè)務(wù)場(chǎng)景等綜合因素,決定了需要重新搭建一套符合我們自己業(yè)務(wù)場(chǎng)景的設(shè)計(jì)規(guī) 范體系。

 

 

 

 

UI規(guī)范效益最大化:

一旦我們決定制作規(guī)范,就要把規(guī)范當(dāng)成一個(gè)產(chǎn)品去做。去梳理一套高效合理、可復(fù)用的制作流 程,去分析產(chǎn)出什么樣的「規(guī)范產(chǎn)品」才能產(chǎn)生最大的價(jià)值。 依據(jù)規(guī)范效益模型,在規(guī)范的制定中盡可能的提高規(guī)范的通用性至90%,先解決統(tǒng)一性,再解決場(chǎng)景細(xì)分,打造高質(zhì)量通用的模式庫(kù)以提高質(zhì)量和效率,并力求讓更多人從這套設(shè)計(jì)體系中獲益, 從而讓規(guī)范體系發(fā)揮更大的價(jià)值。

 

 

 

 

UI規(guī)范制定的策略:

明確用戶對(duì)設(shè)計(jì)規(guī)范的訴求,構(gòu)建適合產(chǎn)品的UI設(shè)計(jì)規(guī)范,首先,需要明確規(guī)范體系的用戶群體經(jīng)過(guò)設(shè)計(jì)團(tuán)隊(duì)多輪調(diào)研,確定設(shè)計(jì)規(guī)范面向的目標(biāo)用戶群、基于核心用戶的訴求,為后續(xù)規(guī)范內(nèi)容框架的制定提供依據(jù)。

 

 

 

 

確定UI設(shè)計(jì)價(jià)值觀:

產(chǎn)品歷史包袱重,系統(tǒng)結(jié)構(gòu)復(fù)雜,在提升用戶體驗(yàn)時(shí),內(nèi)容表達(dá)「清晰明確」是第一要?jiǎng)?wù),例如尊重已經(jīng)形成的用戶習(xí)慣,優(yōu)化改造時(shí),注意版本之間的銜接,讓用戶「清晰明確」,這也是為什么將「清晰明確」作為價(jià)值觀之首,另外提升效率是企業(yè)級(jí)產(chǎn)品用戶體驗(yàn)的永恒主題,同時(shí)兼顧系統(tǒng)的簡(jiǎn)潔與一致。

 

 

 

 

梳理UI規(guī)范框架:

UI設(shè)計(jì)規(guī)范包括設(shè)計(jì)價(jià)值觀、全局規(guī)則、組件庫(kù)、模式庫(kù)、典型頁(yè)面、移動(dòng)端規(guī)范和設(shè)計(jì)資源框架整理主要從以下3個(gè)方面進(jìn)行:

1.梳理現(xiàn)有組件,剔除不使用的部分 。?

2.同類競(jìng)品的框架借鑒,查漏補(bǔ)缺。 ?

3.場(chǎng)景驗(yàn)證,與業(yè)務(wù)場(chǎng)景深度結(jié)合經(jīng)過(guò)充分論證和梳理,對(duì)規(guī)范框架做了重新定義,增補(bǔ)了業(yè)務(wù)缺少的內(nèi)容。

如上圖所示,例如對(duì)高頻的工具欄組件的補(bǔ)充,典型頁(yè)面的補(bǔ)充,增加模式庫(kù)以及全局規(guī)則,當(dāng)前第一個(gè)版本的規(guī)范框架是基于業(yè)務(wù)場(chǎng)景優(yōu)先級(jí)最高的內(nèi)容進(jìn)行制定,更多的規(guī)范內(nèi)容的增加依托于不斷的迭代,逐漸完善規(guī)范框架。

 

 

 

 

規(guī)范內(nèi)容的制定及評(píng)審:

組件規(guī)范包含:變更記錄、組件定義、何時(shí)使用、組件的類型、組件的響應(yīng)。

 

 

 

 

規(guī)范內(nèi)容制定的原則: ?

1.有明確場(chǎng)景可依。?

2.精簡(jiǎn)不必要的分支 例如在定義表單規(guī)范時(shí),對(duì)于表單標(biāo)簽的對(duì)齊方式做了統(tǒng)一的約束,標(biāo)簽右對(duì)齊,輸入框左對(duì)齊全局保持統(tǒng)一。

 

 

 

 

邏輯正確、規(guī)則明確易懂: ?

例如常見(jiàn)的alert (警告提示)名稱調(diào)整為常駐提示,語(yǔ)義更貼合場(chǎng)景,便于理解。

 

 

 

 

規(guī)則的可拓展性,多場(chǎng)景的兼容性: ?

產(chǎn)品架構(gòu)是PC端到移動(dòng)端的自動(dòng)適配,因此在組件設(shè)計(jì)的時(shí)候需同時(shí)考慮PC端與移動(dòng)端的對(duì)應(yīng)關(guān)系以及兩端場(chǎng)景的兼容性。

 

 

 

 

協(xié)作及敏捷迭代: ?

規(guī)范發(fā)布后,伴隨著實(shí)際項(xiàng)目的檢驗(yàn),業(yè)務(wù)場(chǎng)景的擴(kuò)充變化,如何高效的對(duì)設(shè)計(jì)規(guī)范進(jìn)行迭代,決定了設(shè)計(jì)系統(tǒng)能否持續(xù)的走得更遠(yuǎn),規(guī)范內(nèi)容定期評(píng)審,必須通過(guò)業(yè)務(wù)、技術(shù)、設(shè)計(jì)評(píng)審,確保規(guī)范是可用的、可落地并且易于使用的規(guī)范后期不同的規(guī)范模塊專屬人負(fù)責(zé),同時(shí)有backup,可以幫助走查復(fù)盤雙重保障規(guī)范的質(zhì)量。

 

 

 

 

敏捷易用的前端組件庫(kù): ?

復(fù)雜的業(yè)務(wù)場(chǎng)景和多產(chǎn)品線特點(diǎn),快速打造一套敏捷易用、高質(zhì)量并符合實(shí)際業(yè)務(wù)場(chǎng)景的前端組件庫(kù),是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗(yàn)的關(guān)鍵。

 

 

敏捷易用的前端組件庫(kù)

 

復(fù)雜的業(yè)務(wù)場(chǎng)景和多產(chǎn)品線特點(diǎn),快速打造一套敏捷易用、高質(zhì)量并符合實(shí)際業(yè)務(wù)場(chǎng)景的前端組件庫(kù),是提高產(chǎn)品研發(fā)效率、改善UI質(zhì)量、提升用戶體驗(yàn)的關(guān)鍵。

前端組件庫(kù)建立目標(biāo): ?

1.提高開(kāi)發(fā)效率,對(duì)高頻使用、通用組件進(jìn)行代碼化封裝,避免重復(fù)開(kāi)發(fā)工作。 ?

2.提高開(kāi)發(fā)質(zhì)量,通過(guò)各類業(yè)務(wù)場(chǎng)景和業(yè)務(wù)線的錘煉,沉淀組件代碼最佳實(shí)踐。 ?

3.提高產(chǎn)品體驗(yàn),組件封裝代碼化,減少在多角色協(xié)同中因?yàn)槔斫馄睢⑿畔鬟f問(wèn)題等導(dǎo)致的不確定性和結(jié)果不可控性,不同業(yè)務(wù)線、不行項(xiàng)目、共用一套基礎(chǔ)代碼,保證體驗(yàn)的一致性,組件的組織形式: 結(jié)合實(shí)際業(yè)務(wù)場(chǎng)景和原子設(shè)計(jì)理論,將組件劃分為不同顆粒度:基礎(chǔ)組件、業(yè)務(wù)組件、典型頁(yè)面 組件,以適用于不同研發(fā)場(chǎng)景使用。

 

 

 

 

1.基礎(chǔ)組件,基礎(chǔ)組件為組件庫(kù)最小顆粒度,構(gòu)成系統(tǒng)界面的基本構(gòu)件。 ?

2.業(yè)務(wù)組件,在基礎(chǔ)組件的基礎(chǔ)上,結(jié)合具有共性業(yè)務(wù)特征的業(yè)務(wù)場(chǎng)景,梳理出具有業(yè)務(wù)特征的 業(yè)務(wù)組件。 ? 3.典型頁(yè)面組件,梳理具有業(yè)務(wù)特點(diǎn)的典型頁(yè)面,相比基礎(chǔ)組件和業(yè)務(wù)組件,典型頁(yè)面更加具體, 為用戶提供具有代表性的內(nèi)容和框架,并準(zhǔn)確描述用戶最終看到的內(nèi)容。如列表和左樹(shù)右表典型 頁(yè)面組件,作為最為常見(jiàn)的頁(yè)面結(jié)構(gòu),各業(yè)務(wù)場(chǎng)景可復(fù)用頁(yè)面組件,保證了頁(yè)面組件內(nèi)各基礎(chǔ)組 件的一致性,最大程度的實(shí)現(xiàn)不同產(chǎn)品線產(chǎn)品中頁(yè)面體驗(yàn)的一致性。

 

 

 

 

推進(jìn)前端組件庫(kù)落地執(zhí)行: ?

前期設(shè)計(jì)規(guī)范落地到組件庫(kù)過(guò)程中,面臨諸多問(wèn)題和阻礙,比如開(kāi)發(fā)落地質(zhì)量不高、內(nèi)容遺漏、 各方理解不一致、驗(yàn)收及修復(fù)問(wèn)題不到位等問(wèn)題。處理這些問(wèn)題對(duì)UI團(tuán)隊(duì)資源造成很大消耗, 通過(guò)總結(jié)復(fù)盤前期組件庫(kù)落地時(shí)的經(jīng)驗(yàn)和教訓(xùn),梳理落地執(zhí)行流程,在新的協(xié)作流程下,新一 批的組件開(kāi)發(fā)不論在協(xié)作效率和開(kāi)發(fā)質(zhì)量上都有質(zhì)的提升。

 

分層推進(jìn): ?

組件庫(kù)開(kāi)發(fā)是一個(gè)持續(xù)迭代的過(guò)程,考慮到組件庫(kù)開(kāi)發(fā)資源極為有限且無(wú)專職負(fù)責(zé)人員,在跟組 件庫(kù)開(kāi)發(fā)團(tuán)隊(duì)協(xié)同過(guò)程中,我們通過(guò)分步開(kāi)發(fā)來(lái)解決組件庫(kù)更新優(yōu)化的問(wèn)題并通過(guò)不斷優(yōu)化協(xié)作流程來(lái)助力組件庫(kù)高效落地。

前端組件庫(kù)分步開(kāi)發(fā)原則: ?

1.優(yōu)先級(jí)原則,優(yōu)先開(kāi)發(fā)適用于業(yè)務(wù)線普適場(chǎng)景的組件。 ?

2.緊急性原則,對(duì)于急需的業(yè)務(wù)線所需組件優(yōu)先開(kāi)發(fā)。 ?

3.快速可實(shí)現(xiàn)原則,開(kāi)發(fā)實(shí)現(xiàn)成本高的組件暫緩處理。

 

 

 

 

自查走查驗(yàn)收: ?

組件UI責(zé)任人梳理出下屬組件需開(kāi)發(fā)落地的細(xì)節(jié)點(diǎn),整理為文檔,待開(kāi)發(fā)人員完成組件開(kāi)發(fā)后,自行參照UI提供的自查文檔,查漏補(bǔ)缺,保障進(jìn)入U(xiǎn)I驗(yàn)收環(huán)節(jié)的前端組件不會(huì)出現(xiàn)較多的缺陷,降低后期走查和溝通修改的工作量,同時(shí)監(jiān)督開(kāi)發(fā)人員提高組件落地還原度和質(zhì)量。

 

 

 

 

組件庫(kù)的持續(xù)迭代: ?

UI團(tuán)隊(duì)通過(guò)一套標(biāo)準(zhǔn)的流程來(lái)把控組件庫(kù)迭代的質(zhì)量,在日常工作中經(jīng)常會(huì)收到產(chǎn)品經(jīng)理或項(xiàng)目 方提出新的組件需求或?qū)ΜF(xiàn)有組件的優(yōu)化。UI部門作為推動(dòng)組件庫(kù)搭建的核心環(huán)節(jié),需要以全局 和更深入的視角加以判斷把關(guān),保證前端組件庫(kù)內(nèi)容的普適性和高質(zhì)量,避免組件庫(kù)內(nèi)容冗余, 降低研發(fā)維護(hù)成本。

 

 

 

 

產(chǎn)品研發(fā)協(xié)作流程保障: ?

好的過(guò)程是好的結(jié)果的有力保障,一個(gè)業(yè)務(wù)需求從產(chǎn)生到開(kāi)發(fā)落地需要經(jīng)過(guò)多角色協(xié)同、一系 列環(huán)節(jié)。必須依靠規(guī)范的研發(fā)協(xié)作流程,確保各角色清楚自己職責(zé)以及如何跟上下游銜接,同 時(shí)我們也希望協(xié)作流程能夠確保設(shè)計(jì)資源可以向重點(diǎn)業(yè)務(wù)模塊傾斜,以及發(fā)揮各個(gè)角色可以發(fā) 揮的作用去共同提升產(chǎn)品體驗(yàn)。

 

 

UI角色需融入規(guī)范化的研發(fā)流程

 

UED團(tuán)隊(duì)建立之初,我們面臨的首要問(wèn)題是:需求隨機(jī),完全取決于各產(chǎn)品線和產(chǎn)品經(jīng)理 個(gè)人,為了解決這個(gè)問(wèn)題,我們制定了UI融入研發(fā)體系的流程以解決合理、有效利用UI資 源的問(wèn)題。

企業(yè)級(jí)產(chǎn)品特點(diǎn)、多業(yè)務(wù)線、大量面向管理員用戶的具有相似頁(yè)面結(jié)構(gòu)和交互模式的業(yè)務(wù) 模塊、產(chǎn)品經(jīng)理跟交互團(tuán)隊(duì)人員配比等因素都決定了并非所有需求都需要流轉(zhuǎn)到UI團(tuán)隊(duì)進(jìn) 行設(shè)計(jì),在判斷哪些需求需要流轉(zhuǎn)至UI團(tuán)隊(duì)設(shè)計(jì)時(shí),我們給出了如下指導(dǎo)性方向: ?

1.用戶量角度,大量終端用戶使用的場(chǎng)景,例如訂票、報(bào)銷、采購(gòu)頁(yè)面 。 ?

2.用戶重要程度角度,核心、重要用戶使用的場(chǎng)景 eg.公司領(lǐng)導(dǎo)、決策層。 ?

3.通用性角度,通用組件或框架,需要UI通盤考慮各個(gè)業(yè)務(wù)線場(chǎng)景需求進(jìn)行設(shè)計(jì)。 其他需求則主要由產(chǎn)品經(jīng)理進(jìn)行設(shè)計(jì),UX以評(píng)審方式輕度參與。

 

 

 

 

協(xié)作流程迭代,UI驗(yàn)收成為必要一環(huán): 隨后我們又面臨新的問(wèn)題:設(shè)計(jì)還原度差,被公司老板生動(dòng)的形容為:看設(shè)計(jì)稿是“精裝修”, 開(kāi)發(fā)落地后就成了“毛坯房”了。為盡可能確保設(shè)計(jì)還原質(zhì)量,我們?cè)谘邪l(fā)流程中明確了所有涉 及前端頁(yè)面的功能需求都需要在研發(fā)協(xié)同工具中流轉(zhuǎn)到UI負(fù)責(zé)人驗(yàn)收,在產(chǎn)品團(tuán)隊(duì)TAPD中記 錄UI缺陷、標(biāo)明嚴(yán)重程度,對(duì)于 “嚴(yán)重” 級(jí)別以上UI缺陷,禁止發(fā)版。

 

 

 

 

UI工期評(píng)估合理化:

為了既能盡力配合各產(chǎn)品線迭代計(jì)劃又要爭(zhēng)取合理UI設(shè)計(jì)時(shí)間、保證產(chǎn)出質(zhì)量,合理評(píng)估設(shè)計(jì)周期對(duì)UI人力管理尤其重要。對(duì)此,我們對(duì)設(shè)計(jì)需求分成了ABC三級(jí)進(jìn)行評(píng)估。 對(duì)于A和B級(jí)需求,通常模塊較大,先有UI設(shè)計(jì)方案再去分期迭代開(kāi)發(fā),對(duì)于這兩類需求,在評(píng)估 模型中給出了大致工期概念,比如以月為單位,大于1個(gè)月或2個(gè)月。

對(duì)于C級(jí)需求,通常為產(chǎn)品經(jīng)理先排進(jìn)某個(gè)迭代再來(lái)提UI設(shè)計(jì)需求,設(shè)計(jì)范圍相對(duì)明確,我們則結(jié)合典型頁(yè)面數(shù)量因子和設(shè)計(jì)難度因子給出了UI工期大概評(píng)估公式,以天為單位。 ?

1.設(shè)計(jì)難度因子:根據(jù)業(yè)務(wù)線的復(fù)雜程度而定,范圍為(0.8~1.5)。 ?

2.典型頁(yè)面數(shù)量因子:評(píng)估需求范圍規(guī)模(N)。

 

 

 

 

 

設(shè)計(jì)體驗(yàn)文化打造

 

UI設(shè)計(jì)團(tuán)隊(duì)在協(xié)作過(guò)程中面臨諸多挑戰(zhàn):產(chǎn)品線多、產(chǎn)品邏輯復(fù)雜、研發(fā)鏈路長(zhǎng)、各級(jí)人員對(duì)產(chǎn)品認(rèn)知及重視程度不一、好的體驗(yàn)設(shè)計(jì)難落地、溝通成本高等問(wèn)題,想要解決這些問(wèn)題,若僅靠UI團(tuán)隊(duì)自身力量是不夠的,需要?jiǎng)訂T公司各個(gè)環(huán)節(jié)和人員重視用戶體驗(yàn),共同促進(jìn)產(chǎn) 品體驗(yàn)提升。

搭建體驗(yàn)文化灌溉機(jī)制:

UI部門通過(guò)多維度的體驗(yàn)知識(shí)內(nèi)容矩陣、多渠道多場(chǎng)景全員覆蓋,普及和加深各級(jí)對(duì)產(chǎn)品體驗(yàn) 價(jià)值的認(rèn)識(shí),提升產(chǎn)品體驗(yàn)思考力和洞察力,幫助企業(yè)以新的視角思考業(yè)務(wù)、產(chǎn)品研發(fā)和用戶 體驗(yàn)的關(guān)系,賦能產(chǎn)品經(jīng)理及研發(fā)人員高質(zhì)量的輸出,“以用戶為中心”和“打造產(chǎn)品極致體驗(yàn)” 的價(jià)值觀根植與企業(yè)文化中,指導(dǎo)研發(fā)流程中各項(xiàng)工作最終影響到產(chǎn)品的戰(zhàn)略層、范圍層、結(jié) 構(gòu)層、框架層和表現(xiàn)層這5個(gè)產(chǎn)品體驗(yàn)維度,以實(shí)現(xiàn)企業(yè)產(chǎn)品的“極致產(chǎn)品體驗(yàn)”目標(biāo)。 通過(guò)搭建體驗(yàn)文化灌溉機(jī)制,提升全員體驗(yàn)意識(shí),能為產(chǎn)品研發(fā)帶來(lái)長(zhǎng)久的價(jià)值: ?

1.提高設(shè)計(jì)還原度 ?

2.減少培訓(xùn)成本 ?

3.提升跨部門溝通效率 ?

4.提升UI團(tuán)隊(duì)影響力 ?

5.提升客戶滿意度

 

 

 

 

體驗(yàn)文化落地實(shí)踐:

針對(duì)不同類型的體驗(yàn)知識(shí),我們采取不同的傳播渠道進(jìn)行透,以期達(dá)到最好的效果,避免形式化, 將體驗(yàn)文化滲透、學(xué)習(xí)落到實(shí)處,最終影響產(chǎn)品研發(fā)的各個(gè)環(huán)節(jié)。

 

以下為UI團(tuán)隊(duì)在企業(yè)體驗(yàn)文化 推廣的主要渠道和方法: ?

極致體驗(yàn)公眾號(hào)主要發(fā)布產(chǎn)品體驗(yàn)的基礎(chǔ)原理,體驗(yàn)價(jià)值、項(xiàng)目復(fù)盤、常見(jiàn)體驗(yàn)問(wèn)題等深度長(zhǎng)文。讓公司各級(jí)人 員認(rèn)識(shí)用戶體驗(yàn)及價(jià)值,讓用戶體驗(yàn)理念深入人心。 ?

體驗(yàn)知識(shí)小卡片整理產(chǎn)品體驗(yàn)小的知識(shí)點(diǎn),閱讀學(xué)習(xí)成本低。利用員工碎片時(shí)間,對(duì)細(xì)小體驗(yàn)知識(shí)點(diǎn)的學(xué)習(xí),積 跬步,至千里。 ?

直播宣講針對(duì)重點(diǎn)且復(fù)雜的產(chǎn)品體驗(yàn)內(nèi)容,如交互規(guī)范宣講、重點(diǎn)問(wèn)題復(fù)盤、產(chǎn)品經(jīng)理及開(kāi)發(fā)人員應(yīng)知應(yīng) 會(huì)的知識(shí)點(diǎn),采用宣講直播的方式,更好的對(duì)內(nèi)容進(jìn)行詳細(xì)解說(shuō)和疑難問(wèn)題溝通。 ?

體驗(yàn)調(diào)研分享UI部門成員對(duì)核心競(jìng)品進(jìn)行體驗(yàn)調(diào)研,整理分析后對(duì)產(chǎn)品經(jīng)理及相關(guān)人員進(jìn)行分享,賦能產(chǎn)品經(jīng) 理,為產(chǎn)品的體驗(yàn)設(shè)計(jì)提供新的思路。

 

 

 

 

 

UI設(shè)計(jì)質(zhì)量品控

 

UI團(tuán)隊(duì)專業(yè)水平一定程度上決定了公司產(chǎn)品體驗(yàn)的上限,持續(xù)提升UI自身專業(yè)輸出能力可以從源頭提升公司產(chǎn)品體驗(yàn)。

 

設(shè)計(jì)自查:

企業(yè)級(jí)產(chǎn)品的大量體驗(yàn)問(wèn)題都是設(shè)計(jì)基礎(chǔ)問(wèn)題。因此需要設(shè)計(jì)師不論在內(nèi)審前,還是內(nèi)審過(guò)程中都要牢記設(shè)計(jì)原則,查漏補(bǔ)缺,守住底線。我們?cè)诓块T內(nèi)部制定了一套適合企業(yè)產(chǎn)品的UI自查表來(lái)檢查設(shè)計(jì)方案,通過(guò)這些自查點(diǎn)來(lái)避免產(chǎn)品中出現(xiàn)基礎(chǔ)體驗(yàn)問(wèn)題,從UI設(shè)計(jì)師自己這里 把好第一道關(guān)。

 

 

 

 

在日常工作中,UI自查表始終占據(jù)工區(qū)的醒目位置。在評(píng)審過(guò)程中,大家也會(huì)通過(guò)線上文檔的形 式來(lái)對(duì)設(shè)計(jì)原則的條目進(jìn)行逐一檢查。

 

 

 

 

做好UI內(nèi)部評(píng)審:

設(shè)計(jì)團(tuán)隊(duì)內(nèi)評(píng)審(Design critique)是幾乎所有國(guó)內(nèi)外設(shè)計(jì)團(tuán)隊(duì)的普遍、經(jīng)典做法,可以有效提 高設(shè)計(jì)產(chǎn)出水平、保證團(tuán)隊(duì)對(duì)外輸出質(zhì)量。方法是普適的,但具體執(zhí)行時(shí)如何做才能有更好的效果卻各有各異。 在如何做好內(nèi)部評(píng)審上,我們進(jìn)行了如下嘗試。 從“全員參與” 到 “組成內(nèi)部評(píng)審委員會(huì)” 團(tuán)隊(duì)內(nèi)評(píng)審時(shí)邀請(qǐng)全員參加,但發(fā)現(xiàn)只有少數(shù)同事發(fā)言,另外一些同事因資歷淺、不了解評(píng)審產(chǎn)品或者積極性不高給不出建議。同時(shí)隨著團(tuán)隊(duì)成員數(shù)量從幾個(gè)增加到十幾個(gè),評(píng)審會(huì)議的時(shí)間成 本大大增加。

選取團(tuán)隊(duì)內(nèi)相對(duì)資深和積極提出問(wèn)題、建議的同事組成內(nèi)部評(píng)審委員會(huì),以月為周期輪流進(jìn)行, 可以有效分散評(píng)審委員在團(tuán)隊(duì)內(nèi)部評(píng)審上的工作負(fù)荷,并明確一次UI內(nèi)部評(píng)審除了內(nèi)部評(píng)審委員 會(huì)還有哪些關(guān)聯(lián)同事需要參加。 關(guān)于邀請(qǐng)?jiān)u審內(nèi)容關(guān)聯(lián)同事,比如“消息中心” UI評(píng)審跟另外一位同事負(fù)責(zé)的“討論消息”有關(guān)聯(lián),則需要邀請(qǐng)這位同事一起評(píng)審,以便發(fā)現(xiàn)關(guān)聯(lián)問(wèn)題,整體考慮設(shè)計(jì)方案。

以上參與評(píng)審機(jī)制明確在團(tuán)隊(duì)內(nèi)部協(xié)作工具上,做到人人清楚。另外,對(duì)于評(píng)審建議,要做到有 記錄、有回應(yīng)、有跟蹤,確保有效發(fā)揮了內(nèi)部評(píng)審的價(jià)值。

 

 

 

 

UI設(shè)計(jì)師的能力模型:不言而喻,UI設(shè)計(jì)師自身能力的培養(yǎng)是UI品控的重要一環(huán)。因此對(duì)于設(shè)計(jì)師能力培養(yǎng)通道上,我 們引入了以下模型。

 

 

 

 

我們將UI設(shè)計(jì)師能力歸納成了3x3能力矩陣。這可以設(shè)計(jì)師在工作中也可以有目的提升自身薄弱環(huán)節(jié),同時(shí)也讓企業(yè)對(duì)UI設(shè)計(jì)師的要求更加清晰,除此之外,我們要求UI設(shè)計(jì)師也需要多了解業(yè)務(wù)和前端知識(shí),往前多走一步,跟上下游角色更好的銜接,一方面,UI設(shè)計(jì)師需要理解業(yè)務(wù),要能夠有半個(gè)產(chǎn)品經(jīng)理的業(yè)務(wù)知識(shí)儲(chǔ)備, 如果能站在更高的行業(yè)視角對(duì)自己所服務(wù)的業(yè)務(wù)領(lǐng)域(向 業(yè)務(wù)產(chǎn)品經(jīng)理再邁進(jìn)一點(diǎn))有一定的理解是更好的了,另外一方面,UI設(shè)計(jì)師跟自己的下游-前端 開(kāi)發(fā)工程師也需要很好的銜接上,知道相關(guān)前端技術(shù)概念、基本頁(yè)面布局和交互實(shí)現(xiàn)邏輯、方法,能夠無(wú)縫地將界面和交互設(shè)計(jì)翻譯成前端可理解的語(yǔ)言。

 

 

 


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

蘭亭妙微(m.73404.com.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。

這樣的設(shè)計(jì)想法為啥我沒(méi)有想到

藍(lán)藍(lán)設(shè)計(jì)的小編

對(duì)于產(chǎn)品設(shè)計(jì)師來(lái)說(shuō),在同質(zhì)化的環(huán)境中我們需要具備突破創(chuàng)意的思維,這樣才能輸出差異化的設(shè)計(jì)方案。而創(chuàng)意離不開(kāi)優(yōu)秀作品的靈感啟發(fā),發(fā)現(xiàn)有意思的設(shè)計(jì)細(xì)節(jié)也能提高我們的設(shè)計(jì)思維。

 

今天黑馬哥將會(huì)繼續(xù)為大家?guī)?lái)一些優(yōu)秀的設(shè)計(jì)細(xì)節(jié),我們一起來(lái)反思一下,這樣的設(shè)計(jì)想法為啥自己沒(méi)有想到呢?

 

 

 

 

 

 

分享目錄

 

一、營(yíng)造頂部區(qū)域視覺(jué)感與情感化

二、主題化配圖增強(qiáng)視覺(jué)感

三、彈幕式標(biāo)簽提高關(guān)注度

四、IP 強(qiáng)化底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)

五、強(qiáng)化動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)

六、連貫性的插畫(huà)突出卡片特色

七、動(dòng)態(tài)表情化的評(píng)價(jià)設(shè)計(jì)

八、場(chǎng)景化的推薦設(shè)計(jì)

九、上下輪播的 Banner 設(shè)計(jì)

十、情感化的氛圍營(yíng)造

 

 

 

一、營(yíng)造頂部區(qū)域視覺(jué)感與情感化

 

產(chǎn)品頂部區(qū)域的視覺(jué)感是吸引用戶的關(guān)鍵,在一些功能單一的產(chǎn)品中,強(qiáng)化視覺(jué)表現(xiàn)力也是提升產(chǎn)品豐富度的有效形式。

 

比如麥當(dāng)勞 App 首頁(yè)的設(shè)計(jì)中,頂部區(qū)域結(jié)合溫馨的場(chǎng)景插畫(huà)進(jìn)行表達(dá),讓你早上打開(kāi)麥當(dāng)勞就有種心情愉悅感。動(dòng)態(tài)的太陽(yáng)微笑畫(huà)面給你一天好心情,情感化的設(shè)計(jì)不僅增強(qiáng)了視覺(jué)感,也帶給用戶美好的產(chǎn)品使用體驗(yàn)。

 

 

 

 

 

 

二、主題化配圖增強(qiáng)視覺(jué)感

 

封面圖在產(chǎn)品規(guī)范中相對(duì)比較難約束,通過(guò)構(gòu)圖、比例、固定元素和配圖質(zhì)量等,在一定程度上可以提高感官體驗(yàn)。如果是在重點(diǎn)突出的內(nèi)容上面,結(jié)合主題化配圖也可以增強(qiáng)視覺(jué)感。

 

之前在使用優(yōu)酷 App 時(shí),當(dāng)時(shí)在重點(diǎn)突出熱劇的設(shè)計(jì)中,就將主題化的內(nèi)容融入到宮格的配圖中。以統(tǒng)一的畫(huà)面風(fēng)格和設(shè)計(jì)表現(xiàn)形式填充封面,增強(qiáng)了視覺(jué)表現(xiàn)力,以此突出熱劇的吸引力。

 

 

 

 

 

 

三、彈幕式標(biāo)簽提高關(guān)注度

 

在固定的結(jié)構(gòu)布局中如何提高局部?jī)?nèi)容的關(guān)注度,我們需要在不改變結(jié)構(gòu)的前提下進(jìn)行創(chuàng)意融入。比如動(dòng)態(tài)畫(huà)面、突出視覺(jué)感、內(nèi)容特異化等等,而最近發(fā)現(xiàn)彈幕式標(biāo)簽也是一個(gè)不錯(cuò)的選擇。

 

在體驗(yàn)優(yōu)酷 App 時(shí),在動(dòng)漫欄目中針對(duì)推薦的熱播新番,想要突出的動(dòng)漫結(jié)合了彈幕式標(biāo)簽進(jìn)行強(qiáng)化。動(dòng)感的節(jié)奏會(huì)提高用戶的關(guān)注度,在不改變當(dāng)前結(jié)構(gòu)的基礎(chǔ)上,不失為一種有效的解決方案。

 

 

 

 

 

 

四、IP 強(qiáng)化底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)

 

底部標(biāo)簽欄圖標(biāo)是產(chǎn)品設(shè)計(jì)師經(jīng)常發(fā)揮的場(chǎng)景,在一些節(jié)慶主題或者活動(dòng)中都會(huì)定制設(shè)計(jì)。

 

優(yōu)酷 App 在元旦促銷活動(dòng)期間,就將底部標(biāo)簽欄圖標(biāo)設(shè)計(jì)與 IP 形象結(jié)合,默認(rèn)以促銷主題文字展示,點(diǎn)擊狀態(tài)以 IP 形象顯示。圖標(biāo)與活動(dòng)相結(jié)合,不僅突出圖標(biāo)視覺(jué)表現(xiàn),也營(yíng)造了活動(dòng)氛圍感。

 

 

 

 

 

 

五、強(qiáng)化動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)

 

對(duì)于靠?jī)?nèi)容吸引用戶參與度的產(chǎn)品來(lái)說(shuō),提高用戶發(fā)布動(dòng)態(tài)的意愿度至關(guān)重要,突出動(dòng)態(tài)發(fā)布的吸引力也能起到促進(jìn)作用。

 

會(huì)玩 App 在動(dòng)態(tài)發(fā)布的引導(dǎo)設(shè)計(jì)中給出了不錯(cuò)的思路,未發(fā)布動(dòng)態(tài)時(shí)會(huì)以形象化的空狀態(tài)設(shè)計(jì)進(jìn)行引導(dǎo)。動(dòng)態(tài)發(fā)布的按鈕旁以俏皮可愛(ài)的形象進(jìn)行引導(dǎo)設(shè)計(jì),提高了按鈕的吸引力,讓用戶有種參與的沖動(dòng)。情感化設(shè)計(jì)的引導(dǎo)不僅可以增強(qiáng)感官體驗(yàn),也更容易攻破用戶的防備心理。

 

 

 

 

 

 

六、連貫性的插畫(huà)突出卡片特色

 

卡片式設(shè)計(jì)已經(jīng)成為主流的產(chǎn)品設(shè)計(jì)趨勢(shì),信息的歸納感可以提高識(shí)別效率。探索卡片設(shè)計(jì)的表現(xiàn)特色尤為重要,重點(diǎn)在于卡片造型和內(nèi)部視覺(jué)表現(xiàn)力的發(fā)揮層面。

 

麥當(dāng)勞 App 在主內(nèi)容的卡片設(shè)計(jì)上運(yùn)用了配送場(chǎng)景插畫(huà),連貫性的插畫(huà)突出了卡片特色。插畫(huà)場(chǎng)景結(jié)合了品牌圖形,增強(qiáng)了麥當(dāng)勞的品牌曝光度;白天和晚上還以不同配色風(fēng)格和細(xì)節(jié)進(jìn)行差異表現(xiàn),無(wú)論是想法還是設(shè)計(jì)細(xì)節(jié)都非常不錯(cuò),是一個(gè)挺有創(chuàng)意的案例表現(xiàn)。

 

 

 

 

 

 

七、動(dòng)態(tài)表情化的評(píng)價(jià)設(shè)計(jì)

 

用戶評(píng)價(jià)可以反饋服務(wù)的質(zhì)量,進(jìn)而做出產(chǎn)品迭代或者服務(wù)調(diào)整的思路。如何提高用戶參與評(píng)價(jià)的積極性,需要產(chǎn)品設(shè)計(jì)師多多探索啦!

 

最近在使用順豐速運(yùn)小程序時(shí),完成快遞業(yè)務(wù)之后進(jìn)行評(píng)價(jià),表情化的星級(jí)評(píng)價(jià)非常有意思。不同等級(jí)以不同的表情呈現(xiàn),動(dòng)態(tài)表達(dá)非常形象生動(dòng),讓人不由的挨個(gè)體驗(yàn)。動(dòng)態(tài)表情的形式提高了評(píng)價(jià)的關(guān)注度,情感化的表達(dá)讓用戶更愿意參與評(píng)價(jià),提高了評(píng)價(jià)的體驗(yàn)度。

 

 

 

 

 

 

八、場(chǎng)景化的推薦設(shè)計(jì)

 

針對(duì)電商類產(chǎn)品來(lái)說(shuō),商品/店鋪推薦模塊出現(xiàn)頻次較高,吸引用戶關(guān)注度自然成為了設(shè)計(jì)的首要目標(biāo)。

 

在體驗(yàn) Mars App 時(shí),在生活超市推薦的設(shè)計(jì)中,模擬了便利店的場(chǎng)景形象。真實(shí)感的場(chǎng)景表達(dá)帶給用戶親切自然的購(gòu)物體驗(yàn),同時(shí)也提高了用戶對(duì)于該模塊的關(guān)注度。

 

 

 

 

 

 

九、上下輪播的 Banner 設(shè)計(jì)

 

輪播 Banner 圖算是產(chǎn)品設(shè)計(jì)中最常見(jiàn)的模塊,在移動(dòng)端的設(shè)計(jì)中通常左右輪播為主,最近體驗(yàn)到上下輪播的案例,打破常規(guī)也不失為一種新的設(shè)計(jì)思路。

 

在 Mars App 的首頁(yè) Banner 圖以上下輪播進(jìn)行交互,左側(cè)固定展示定位城市的天氣等信息,提高了 Banner 位置的利用率。Banner 與金剛區(qū)懸浮在特定的背景上,帶給用戶沉浸式的感官體驗(yàn)。

 

 

 

 

 

 

十、情感化的氛圍營(yíng)造

 

情感化的設(shè)計(jì)可以讓產(chǎn)品更有溫度,增加用戶對(duì)產(chǎn)品的好感度。配合傳統(tǒng)節(jié)日或者節(jié)氣主題進(jìn)行表達(dá)是相對(duì)比較普遍的形式,會(huì)在產(chǎn)品主題和視覺(jué)區(qū)域進(jìn)行氛圍營(yíng)造。

 

在清明節(jié)期間體驗(yàn)飛豬旅行 App 時(shí),頂部區(qū)域以踏春的場(chǎng)景營(yíng)造氛圍感,還在搜索區(qū)域以青團(tuán)(青團(tuán)是江南人家在清明節(jié)吃的一道傳統(tǒng)點(diǎn)心)替代搜索按鈕。情感化的設(shè)計(jì)營(yíng)造不僅體現(xiàn)了產(chǎn)品的溫度,也帶給用戶對(duì)于節(jié)日的場(chǎng)景體驗(yàn)。

 

 

 

 

 

 

小結(jié)

 

禁錮我們思維的不是我們的技術(shù),而是我們的眼界和設(shè)計(jì)感知。發(fā)現(xiàn)優(yōu)秀的設(shè)計(jì)并總結(jié)和轉(zhuǎn)化,才能讓我們打開(kāi)禁錮的思維,在優(yōu)秀的基礎(chǔ)上輸出更好的設(shè)計(jì)解決方案。

 

本文對(duì)于設(shè)計(jì)的理解闡述屬于個(gè)人見(jiàn)解,不足之處歡迎大家留言補(bǔ)充,我們互相進(jìn)步。

 

 

作者:黑馬青年(vx: heimaux)

本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。



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

蘭亭妙微(m.73404.com.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。

點(diǎn)擊必看!超全Banner設(shè)計(jì)秘籍,打造吸睛之作

杰睿

Banner設(shè)計(jì)是最常見(jiàn)的一種廣告運(yùn)營(yíng)形式,是我們?cè)O(shè)計(jì)師在日常工作中經(jīng)常接觸到的需求。Banner設(shè)計(jì)看似簡(jiǎn)單,實(shí)則囊括了平面設(shè)計(jì)、設(shè)計(jì)心理學(xué)、用戶研究、文案設(shè)計(jì)等多領(lǐng)域的知識(shí)點(diǎn),那么我們?cè)撊绾巫龊靡粡?ldquo;優(yōu)質(zhì)banner”呢?下面我總結(jié)歸納了自己平時(shí)做banner的一些心得經(jīng)驗(yàn)與各位大佬交流探討,有不足之處,歡迎指出。
超全面的banner設(shè)計(jì)指南
 
 
一、banner的作用
Banner在運(yùn)營(yíng)工作中具有吸引注意力、提高轉(zhuǎn)化率、傳達(dá)信息、增強(qiáng)品牌形象、引導(dǎo)用戶行為和營(yíng)造活動(dòng)氛圍等多種作用。因此,在運(yùn)營(yíng)工作中,需要根據(jù)具體的需求和目標(biāo),精心設(shè)計(jì)并合理運(yùn)用Banner,以實(shí)現(xiàn)更好的運(yùn)營(yíng)效果。
超全面的banner設(shè)計(jì)指南
 
 
二、banner的常見(jiàn)類型
在banner設(shè)計(jì)中,我們常見(jiàn)的幾種設(shè)計(jì)類型,大致分為照片類、文字類、插畫(huà)類、綜合類四種設(shè)計(jì)類型。
 
1.照片類
照片類banner以照片為主題,照片具有直觀性和視覺(jué)沖擊力強(qiáng)的特點(diǎn),能夠迅速吸引人們的注意力,增強(qiáng)視覺(jué)效果。可以直觀地表達(dá)產(chǎn)品的特點(diǎn)和賣點(diǎn),使得信息傳達(dá)更加簡(jiǎn)潔明了。具有記憶性和識(shí)別性,能夠讓人們快速地回憶起品牌或產(chǎn)品,增強(qiáng)品牌形象和知名度。可以結(jié)合不同的創(chuàng)意元素和設(shè)計(jì)手法,如手繪、攝影、合成等,營(yíng)造出獨(dú)特的視覺(jué)效果和品牌形象,提升宣傳品質(zhì)。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
2.文字類
文字型Banner以文字為主要元素,能夠直接傳達(dá)信息,清晰地表達(dá)廣告的主題和內(nèi)容。不需要過(guò)多的視覺(jué)轉(zhuǎn)換,用戶可以快速地理解廣告內(nèi)容,提高廣告的接受度。可以通過(guò)運(yùn)用各種文字技巧,如標(biāo)題、內(nèi)容、標(biāo)語(yǔ)等,吸引用戶的注意力,激發(fā)他們的興趣和好奇心。可以針對(duì)不同的受眾群體,通過(guò)文字的精準(zhǔn)表達(dá),達(dá)到精準(zhǔn)傳播的效果。文字型Banner的內(nèi)容易于復(fù)制和分享,可以通過(guò)社交媒體等渠道進(jìn)行傳播,擴(kuò)大廣告的覆蓋面。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
3.插畫(huà)類
插畫(huà)類型Banner以插畫(huà)為主要元素,具有強(qiáng)烈的視覺(jué)沖擊力和藝術(shù)感,能夠吸引用戶的注意力并留下深刻的印象。可以結(jié)合各種創(chuàng)意元素和設(shè)計(jì)手法,如手繪、矢量圖形、水彩等,營(yíng)造出獨(dú)特的視覺(jué)效果和品牌形象,提升宣傳品質(zhì)。插畫(huà)類型Banner的插畫(huà)具有記憶性和識(shí)別性,能夠讓人們快速地回憶起品牌或產(chǎn)品,增強(qiáng)品牌形象和知名度。可以適應(yīng)不同的宣傳渠道和媒體,如網(wǎng)頁(yè)、社交媒體、戶外廣告等,使得宣傳效果更加廣泛和有效。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
4.綜合類
綜合型Banner綜合運(yùn)用文字、圖像、視頻等多種元素,結(jié)合產(chǎn)品特點(diǎn)和宣傳目的,營(yíng)造出獨(dú)特的視覺(jué)效果和品牌形象。可以通過(guò)創(chuàng)意性的設(shè)計(jì)和排版,將各種元素巧妙地融合在一起,形成獨(dú)特的視覺(jué)效果,吸引用戶的注意力。可以通過(guò)精準(zhǔn)的文字和圖像傳達(dá)產(chǎn)品或服務(wù)的特點(diǎn)和賣點(diǎn),使得信息傳達(dá)更加精準(zhǔn)和有效。以包含交互元素,如按鈕、鏈接等,使用戶能夠與廣告進(jìn)行互動(dòng),增強(qiáng)用戶體驗(yàn)和參與度。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
三、banner的常見(jiàn)布局
在banner設(shè)計(jì)中,我們常見(jiàn)的幾種設(shè)計(jì)布局分為居中布局、左右布局、上下布局、發(fā)射狀布局、對(duì)角線布局五種常見(jiàn)布局。
超全面的banner設(shè)計(jì)指南
 
 
1.居中布局
居中構(gòu)圖是一種將主體文案放在畫(huà)面的正中心進(jìn)行構(gòu)圖的方法。這種構(gòu)圖方式能夠突出主體,使畫(huà)面容易取得左右平衡的效果。居中構(gòu)圖的特點(diǎn)在于能夠?qū)?huà)面的各個(gè)元素有機(jī)地組織起來(lái),形成一個(gè)有機(jī)的整體,使畫(huà)面具有強(qiáng)烈的視覺(jué)沖擊力和平衡感。同時(shí),居中構(gòu)圖還能夠強(qiáng)調(diào)畫(huà)面的主體元素,突出主題和重點(diǎn),提高視覺(jué)沖擊力和藝術(shù)感。
超全面的banner設(shè)計(jì)指南
 
 
2.左右布局
簡(jiǎn)單理解就是將banner文案主題排版在畫(huà)面的左邊或右邊,這里的左右不僅僅指的是居中左右,也可以是左上或者右上。其余的空間可以擺放商品、模特、點(diǎn)綴等元素。對(duì)于橫版海報(bào)來(lái)說(shuō),左右對(duì)齊是將背景元素和文字放置在相對(duì)的區(qū)域,從而達(dá)到一個(gè)畫(huà)面的平衡,這是常見(jiàn)的橫版排版方式。這種構(gòu)圖形式最常見(jiàn),容錯(cuò)率也比較高。可以根據(jù)版面內(nèi)容的信息量劃分畫(huà)面的空間,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
3.環(huán)繞式布局
環(huán)繞式布局能夠有效地吸引讀者的注意力,因?yàn)樗ㄟ^(guò)向四周擴(kuò)散的方式,引導(dǎo)讀者的視線,從而強(qiáng)調(diào)重點(diǎn)信息。相關(guān)元素圍繞文字形成環(huán)繞效果,有效的強(qiáng)調(diào)文字,但在單一的文字排版會(huì)造成視覺(jué)中心留白空間過(guò)大,畫(huà)面太空,這時(shí)的文字設(shè)計(jì)就需要更大更加突出,字間距相對(duì)拉小。設(shè)計(jì)上裝飾性會(huì)更多一些將文字設(shè)計(jì)更加偏向圖形化。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
4.上下布局
上下布局通過(guò)將信息按照重要程度進(jìn)行排列,能夠更好地展示出信息的層次感和主次關(guān)系。通常會(huì)把重要的信息放在頂部,次要的信息放在底部,從而使得整個(gè)banner的信息展示更加有邏輯性和條理性。通過(guò)將圖片和文字進(jìn)行合理的排版和搭配,可以創(chuàng)造出強(qiáng)烈的視覺(jué)沖擊力,從而更好地吸引消費(fèi)者的眼球。上下布局比較適合在長(zhǎng)頁(yè)面上進(jìn)行展示,因?yàn)檫@種布局方式可以更好地利用頁(yè)面空間,使得整個(gè)頁(yè)面的信息展示更加流暢和連貫。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
5.對(duì)角線布局
"對(duì)角線布局"是一種在Banner設(shè)計(jì)中打破常規(guī)的布局方式,其特點(diǎn)是將文案和圖形等元素放置在對(duì)角線上,以形成視覺(jué)上的沖擊力和平衡感。對(duì)角線布局改變了常規(guī)的橫豎排版方式,能夠吸引讀者的注意力,增強(qiáng)畫(huà)面的新穎感和創(chuàng)意性。通過(guò)在兩個(gè)對(duì)角線上放置相應(yīng)的元素,可以保持畫(huà)面的平衡感和穩(wěn)定性,避免過(guò)于傾斜或偏重。對(duì)角線布局可以將重點(diǎn)信息放在畫(huà)面的對(duì)角線上,通過(guò)位置的特殊處理,突出信息的傳達(dá)效果,增強(qiáng)記憶度。可以有效地利用畫(huà)面的空間,將元素放置在對(duì)角線上,增強(qiáng)畫(huà)面的空間感和立體感。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
四、banner設(shè)計(jì)的四大要素
首先我們將一個(gè)一個(gè)運(yùn)營(yíng) banner 按照組件層級(jí)進(jìn)行拆分。分為:文字層、配圖層、裝飾層、背景層。
 
文字層:
文字是banner中必不可少的元素,包括標(biāo)題、副標(biāo)題、標(biāo)語(yǔ)等,用于傳達(dá)banner的主題和信息。
 
配圖層:
配圖是banner核心部分,通常包括產(chǎn)品、品牌、人物等圖像,以及與之相關(guān)的文字內(nèi)容。
 
裝飾層:
裝飾元素可以增強(qiáng)banner的美感和吸引力,通常包括圖形、線條、顏色等。
 
背景層:
背景是banner的基礎(chǔ),可以選擇不同的顏色、圖片或紋理作為背景,以襯托出整個(gè)banner的主題和風(fēng)格。
超全面的banner設(shè)計(jì)指南
 
 
1.文字層
在banner設(shè)計(jì)中,文字層是核心內(nèi)容展示,以展示主要文字信息為主。通常包括標(biāo)題、副標(biāo)題、標(biāo)語(yǔ)等元素。文字層的作用是傳達(dá)信息,幫助用戶快速了解banner的主題和內(nèi)容。在文字層的排版設(shè)計(jì)中,需要注意以下幾點(diǎn):
 
字體選擇:
根據(jù)banner的主題和風(fēng)格選擇合適的字體,通常情況下,簡(jiǎn)潔、清晰的字體更具有可讀性和辨識(shí)度。
 
文字排版
:文字排版要合理,要注意字體大小、行距、對(duì)齊方式等,使得文字更加易讀易懂。
 
文字內(nèi)容:
文字內(nèi)容要簡(jiǎn)潔明了,突出重點(diǎn),避免過(guò)多的文字堆砌和重復(fù),以免讓用戶感到混亂和困惑。
 
文字與背景的對(duì)比:
文字與背景的對(duì)比要強(qiáng)烈,以提高文字的辨識(shí)度和可讀性。通常情況下,深色背景上使用淺色字體,淺色背景上使用深色字體。
 
文字裝飾:
為了提高文字的吸引力和視覺(jué)效果,可以使用一些文字裝飾技巧,如加粗、斜體、下劃線等。
 
在banner設(shè)計(jì)中,大標(biāo)題通常會(huì)采用較大的字體和粗筆畫(huà),以吸引用戶的注意力。為了不與大標(biāo)題搶風(fēng)頭,小標(biāo)題則會(huì)相應(yīng)地變細(xì)變小,并且顏色選擇也會(huì)更加弱化。字體越大,其在畫(huà)面中的占比就越大,用戶在看到畫(huà)面時(shí)就會(huì)直接被大文案所吸引。同樣地,字重越大(即字體越粗、顏色比例越重),也會(huì)增加對(duì)用戶的吸引力。相反,如果字號(hào)過(guò)小、字重過(guò)輕,就很難被用戶注意到。因此,在banner設(shè)計(jì)中,需要根據(jù)要傳達(dá)的信息和設(shè)計(jì)風(fēng)格,恰當(dāng)?shù)剡x擇字體大小、粗細(xì)和顏色,以引導(dǎo)用戶的視線,并突出最重要的信息。。
超全面的banner設(shè)計(jì)指南
 
 
在我們?cè)O(shè)計(jì)banner的時(shí)候,一定要突出我們的文字信息,避免過(guò)多的元素干擾。如下圖所示,左圖文字信息過(guò)于分散且沒(méi)有主次之分,除了一個(gè)90%可以看到外,別的文字信息都看起來(lái)很吃力,無(wú)法正確讓用戶了解到我們的banner傳遞的活動(dòng)信息。右圖層次分明,主層級(jí)明顯,用戶第一眼就可以識(shí)別圖片所傳達(dá)的信息內(nèi)容。
超全面的banner設(shè)計(jì)指南
 
 
字體的選擇上也是衡量當(dāng)前產(chǎn)品用戶定位的標(biāo)準(zhǔn),首先文字結(jié)構(gòu)不能太過(guò)于復(fù)雜,再者就是符合產(chǎn)品的定位。比如教育類banner在字體的選擇上需要字形簡(jiǎn)單而且飽滿有趣,所以一些藝術(shù)手寫(xiě)可愛(ài)字體比較適合。
例如:站酷銳銳體、站酷彤彤體、沐瑤軟筆手寫(xiě)體、站酷快樂(lè)體、鄭慶科黃油體、站酷小薇 LOGO 體等。
超全面的banner設(shè)計(jì)指南
 
 
在人物banner或者知識(shí)分享和知識(shí)付費(fèi)的場(chǎng)景中,為了體現(xiàn)高端,文字應(yīng)該簡(jiǎn)潔明了,不要過(guò)于花哨或隨意。一些簡(jiǎn)單的襯線字體或黑體字形可以很好地滿足這個(gè)需求。這些字體具有簡(jiǎn)潔、清晰的特點(diǎn),能夠有效地傳達(dá)信息,同時(shí)又不會(huì)過(guò)于張揚(yáng)或喧賓奪主。
例如:漢儀瑞意宋、方正清刻本悅宋、方正蘭亭、造字工房朗宋、造字工房黃金時(shí)代體、造字工房尚雅體。思源黑、思源宋、站酷文藝體、方正書(shū)宋簡(jiǎn)體。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
2.配圖層
在banner設(shè)計(jì)中,配圖層是吸引用戶注意力和提高視覺(jué)效果的重要因素之一。配圖層通常包括產(chǎn)品圖片、背景圖片、圖標(biāo)等,需要根據(jù)banner的主題和風(fēng)格進(jìn)行選擇和設(shè)計(jì)。在配圖層的設(shè)計(jì)中,需要注意以下幾點(diǎn):
 
圖片質(zhì)量
:選擇的圖片要清晰、高質(zhì)量,以提高整體的視覺(jué)效果。
 
圖片比例:
圖片的比例要合理,避免過(guò)大或過(guò)小,影響整體的視覺(jué)效果。
 
圖片風(fēng)格:
選擇的圖片要與banner的主題和風(fēng)格相符合,以營(yíng)造出整體的視覺(jué)效果。
 
圖片排版:
圖片的排版要合理,避免過(guò)多的圖片堆砌和重復(fù),以免讓用戶感到混亂和困惑。
 
圖片與文字的配合:
圖片與文字的配合要協(xié)調(diào),避免出現(xiàn)文字與圖片的沖突和不和諧的情況。
 
在我們?cè)O(shè)計(jì)banner的時(shí)候,圖片的傳達(dá)信息一定要清晰明確,如果將精準(zhǔn)傳達(dá)信息的圖片放在畫(huà)面中,無(wú)論是否有文案,用戶的直覺(jué)思維所想到的內(nèi)容都會(huì)非常接近。
 
如下面兩張圖片,哪怕去掉了文字,我們也可以聯(lián)想兩家視頻播放平臺(tái)會(huì)員卡、促銷、打折這些信息。這就是圖片給我們帶來(lái)的最直觀的信息呈現(xiàn)方式。
超全面的banner設(shè)計(jì)指南
 
 
但當(dāng)我們的banner出現(xiàn)配圖與文案不契合的情況下,如果沒(méi)有文案,我們沒(méi)有辦法準(zhǔn)確的了解信息內(nèi)容。整個(gè)banner不管從氛圍還是傳達(dá)信息的功能都會(huì)弱化很多。
 
例如下圖漢字書(shū)寫(xiě)大賽,左圖的配圖是科技風(fēng)的建模圖片,如果去掉文字,我們完全無(wú)法獲知這與漢字書(shū)寫(xiě)有任何關(guān)系,相反右圖的配圖我們就很容易獲取到正確的信息傳遞。
超全面的banner設(shè)計(jì)指南
 
 
在我們?cè)O(shè)計(jì)的時(shí)候注意主體物要突出飽滿,適當(dāng)?shù)脑黾赢?huà)面的元素。主題太小或者太少,會(huì)使會(huì)面變得很空。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
3.裝飾層
在banner設(shè)計(jì)中,裝飾層是一種能夠豐富視覺(jué)效果、提高吸引力和品牌形象的重要因素。裝飾層可以包括各種圖形、線條、顏色等元素,用于增強(qiáng)banner的美感和吸引力。裝飾層的設(shè)計(jì)需要注意以下幾點(diǎn):
 
保持簡(jiǎn)潔:
裝飾層的設(shè)計(jì)不能過(guò)于復(fù)雜或花哨,以免喧賓奪主,影響主要內(nèi)容的傳達(dá)。
 
與主題和風(fēng)格相符
:裝飾層的設(shè)計(jì)需要與整個(gè)banner的主題和風(fēng)格相符,不能與主題相悖,影響整體視覺(jué)效果。
 
運(yùn)用對(duì)比和協(xié)調(diào):
在裝飾層的設(shè)計(jì)中,可以運(yùn)用對(duì)比和協(xié)調(diào)的技巧,以增強(qiáng)banner的視覺(jué)沖擊力和品牌形象。例如,可以使用與背景色對(duì)比強(qiáng)烈的顏色,或者使用與主題相符的紋理和圖形等。
 
避免使用過(guò)于夸張的元素:
在裝飾層的設(shè)計(jì)中,避免使用過(guò)于夸張的元素,如過(guò)于復(fù)雜的圖形、刺眼的顏色等,以免影響用戶的閱讀體驗(yàn)和品牌形象。
 
注意細(xì)節(jié)處理:
在裝飾層的設(shè)計(jì)中,需要注意細(xì)節(jié)處理,如線條的粗細(xì)、圓角的大小、圖形的平滑度等,以保證整體視覺(jué)效果的協(xié)調(diào)性和美觀性。
 
裝飾層的核心是突出主體物,過(guò)于復(fù)雜或花哨的裝飾往往起到適得其反的作用,例如下面左圖則過(guò)度添加元素導(dǎo)致過(guò)度設(shè)計(jì),從而干擾用戶對(duì)運(yùn)營(yíng)活動(dòng)的理解和其表意性。右圖為了讓畫(huà)面更加豐富,設(shè)計(jì)師添加一些輔助元素或圖形使整個(gè)banner飽滿的同時(shí)主體更加突出。
超全面的banner設(shè)計(jì)指南
 
 
然而裝飾元素簡(jiǎn)單不等于裝元素粗糙,例如下面左圖裝飾雖然簡(jiǎn)單,但是過(guò)于粗糙,使整個(gè)banner變得廉價(jià)感滿滿,傳宣作用大打折扣。右圖則使用了更為細(xì)致的裝飾元素,更有利于增強(qiáng)品牌形象。
超全面的banner設(shè)計(jì)指南
 
 
下面說(shuō)一下我們?cè)O(shè)計(jì)中常用到的幾種裝飾類型。
 
1.簡(jiǎn)單的幾何形狀
有時(shí)候,為了使傳達(dá)的主題更加明確,簡(jiǎn)潔化的設(shè)計(jì)是必要的。在這種情境下,使用簡(jiǎn)單的圓形、方形、波浪曲線等圖形元素可以幫助設(shè)計(jì)更加簡(jiǎn)潔、明了。這種設(shè)計(jì)方法也符合“少即是多”的理念,通過(guò)精簡(jiǎn)的圖形元素來(lái)突出主題,提高用戶的理解和關(guān)注度。在知識(shí)付費(fèi)和學(xué)習(xí)類設(shè)計(jì)中,這種簡(jiǎn)潔的設(shè)計(jì)方法可以幫助用戶更好地聚焦于內(nèi)容本身,提高學(xué)習(xí)效果和知識(shí)傳遞的效率。
超全面的banner設(shè)計(jì)指南
 
 
2.不規(guī)則流體
在促銷類電商中,為了營(yíng)造促銷氛圍、激發(fā)購(gòu)買欲望,通常會(huì)使用多色彩的不規(guī)則流體來(lái)傳達(dá)降價(jià)、折扣、滿減、超值、限時(shí)等促銷信息。這些不規(guī)則的流體通常會(huì)圍繞在主體物周圍,以突出主體元素。通過(guò)這種方式,可以有效地吸引用戶的注意力,并引導(dǎo)他們關(guān)注促銷活動(dòng)中的重點(diǎn)信息。同時(shí),這種設(shè)計(jì)方式還可以增強(qiáng)頁(yè)面的視覺(jué)沖擊力和動(dòng)態(tài)感,使整個(gè)頁(yè)面看起來(lái)更加生動(dòng)和有吸引力。
超全面的banner設(shè)計(jì)指南
 
 
3.立體幾何
為了讓設(shè)計(jì)風(fēng)格顯得高質(zhì)感和精簡(jiǎn),需要注重細(xì)節(jié)和品質(zhì)。高品質(zhì)的設(shè)計(jì)通常會(huì)使用相對(duì)規(guī)整的圖形和形狀,避免過(guò)于隨意和繁瑣的設(shè)計(jì)元素。多使用方塊形狀和立體幾何形狀可以增強(qiáng)設(shè)計(jì)的整體感和現(xiàn)代感,同時(shí)也可以更好地突出主題和內(nèi)容。在設(shè)計(jì)過(guò)程中,要注意圖形的比例、線條的流暢性和色彩的搭配,以營(yíng)造出高質(zhì)感和精簡(jiǎn)的設(shè)計(jì)風(fēng)格。
超全面的banner設(shè)計(jì)指南
 
 
4.線框
人們往往會(huì)不自覺(jué)地關(guān)注被框起來(lái)的內(nèi)容,因?yàn)檫@會(huì)引導(dǎo)視覺(jué)焦點(diǎn)。如果要營(yíng)造更為嚴(yán)肅的氣氛,可以使用封閉的線框來(lái)包圍內(nèi)容。而如果想要營(yíng)造更為輕松和時(shí)尚的氛圍,可以打破部分線框,添加一些跨越線框的裝飾,以增加透氣感和視覺(jué)上的趣味性。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
4.背景層
在banner設(shè)計(jì)中,背景層是整個(gè)畫(huà)面最底層的部分,是襯托主體元素的重要因素。背景層的設(shè)計(jì)需要注意以下幾點(diǎn):
 
背景風(fēng)格一致性
:背景層的設(shè)計(jì)需要與整個(gè)banner的風(fēng)格一致,如果背景與圖形元素風(fēng)格不一致或沒(méi)有處理好,二者就會(huì)顯得不融合,會(huì)使畫(huà)面看起來(lái)非常有“山寨感”。
 
背景作用:
背景層的作用是襯托文字層和主體元素,背景切不可喧賓奪主,弱化了文字信息或者主體元素。
 
背景顏色選擇
:在選擇背景顏色時(shí),建議使用與主要內(nèi)容相關(guān)的顏色,或者使用漸變色、紋理等來(lái)增強(qiáng)視覺(jué)效果。同時(shí),背景顏色也需要與主要內(nèi)容形成對(duì)比,以提高文字的可讀性和識(shí)別度。
 
背景圖片運(yùn)用:
在背景層的設(shè)計(jì)中,可以運(yùn)用真實(shí)的圖片或抽象的圖形元素,以增強(qiáng)視覺(jué)效果和傳達(dá)信息的效果。例如,可以使用漸變背景、插畫(huà)場(chǎng)景、放射性背景等。
 
在背景的制作上,我們要嚴(yán)格按照行業(yè)屬性來(lái)制作。
在挑選顏色時(shí),我們會(huì)首先考慮教育行業(yè)的通用色調(diào),這樣可以保持整體設(shè)計(jì)的專業(yè)性和一致性。接著,我們會(huì)選擇那些在畫(huà)面中引人注目的亮色調(diào),它們能夠突出核心信息,抓住用戶的注意力。最后,我們會(huì)根據(jù)文案的內(nèi)容和情感表達(dá),選取最能呼應(yīng)這些情感的顏色,以增強(qiáng)設(shè)計(jì)的吸引力和情感共鳴。
 
例如在教育行業(yè)banner設(shè)計(jì)時(shí),通常使用明亮、清新的顏色,如黃色、綠色、藍(lán)色等,以突出品牌或課程的創(chuàng)新、活力和學(xué)術(shù)水平。這些顏色不僅能夠吸引用戶的注意力,還能夠傳遞出積極、向上的情緒。教育類banner通常會(huì)強(qiáng)調(diào)品牌色,通過(guò)使用品牌標(biāo)志性的顏色來(lái)強(qiáng)化品牌形象。例如,一些知名的教育機(jī)構(gòu)可能會(huì)有特定的標(biāo)志性顏色
超全面的banner設(shè)計(jì)指南
 
 
金融類banner不僅需要傳遞出積極的情緒,還需要表達(dá)出與金融相關(guān)的情感。例如,深藍(lán)色通常被視為代表穩(wěn)健、可靠和信任的顏色,適合用于銀行、保險(xiǎn)和證券類產(chǎn)品的banner設(shè)計(jì);金色和黃色則通常被視為代表財(cái)富、成功和機(jī)遇的顏色,適合用于理財(cái)、投資和金融衍生品類的banner設(shè)計(jì)。
超全面的banner設(shè)計(jì)指南
 
 
在banner設(shè)計(jì)中,配色比例是一個(gè)重要的考慮因素。根據(jù)業(yè)界的研究,當(dāng)色彩搭配比例為6:3:1時(shí),是最和諧美觀的。這個(gè)比例指的是主色、輔助色、點(diǎn)綴色=6:3:1。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
在配色方案中,我們常常使用同色系、相似色、互補(bǔ)色和對(duì)比色進(jìn)行搭配。其中,互補(bǔ)色搭配是一種特別重要的配色方式。然而,在互補(bǔ)色搭配中,為了達(dá)到更為柔和的視覺(jué)效果,我們可以采用補(bǔ)色分割和單邊補(bǔ)色分割的配色方式。
 
補(bǔ)色分割是將互補(bǔ)色的兩個(gè)相鄰顏色進(jìn)行分割,以形成更為柔和的對(duì)比效果。這種配色方式能夠保持互補(bǔ)色的鮮明對(duì)比,同時(shí)又能夠提高顏色的融入度,使其看起來(lái)更加和諧。
 
單邊補(bǔ)色分割則是在互補(bǔ)色的基礎(chǔ)上,僅選擇其中一種顏色與另一種顏色進(jìn)行搭配。這種配色方式可以突出兩種顏色的特點(diǎn),同時(shí)降低對(duì)比度,使配色看起來(lái)更加柔和。
超全面的banner設(shè)計(jì)指南
 
 
超全面的banner設(shè)計(jì)指南
 
 
五、案例思考
1、需求分析
在與客戶對(duì)接需求的時(shí)候,我們經(jīng)常會(huì)遇到很含糊的的需求,比如高大上、有逼格這種非常概念的需求。如果在沒(méi)有了解清楚具體需求的情況下開(kāi)工,很有可能交付的時(shí)候完全沒(méi)有g(shù)et到客戶的點(diǎn),造成反工,增加工作量。
 
當(dāng)我們接到需求的時(shí)候,第一步不要著急馬上開(kāi)工,先要找對(duì)需求的方向,才能提高工作效率,避免重復(fù)改稿,與需求方溝通的時(shí)候需要主要以下幾個(gè)方面:
超全面的banner設(shè)計(jì)指南
 
 
2、頭腦風(fēng)暴
在banner設(shè)計(jì)過(guò)程中,頭腦風(fēng)暴是一種非常有用的方法,可以幫助設(shè)計(jì)師們激發(fā)靈感、產(chǎn)生創(chuàng)意并最終創(chuàng)造出吸引人的banner。以下是一些關(guān)于如何進(jìn)行banner頭腦風(fēng)暴的建議:
 
確定主題和目標(biāo):
在開(kāi)始頭腦風(fēng)暴之前,需要明確banner的主題和目標(biāo),以便參與者能夠聚焦于討論的問(wèn)題和方向。
 
收集素材和參考:
在進(jìn)行頭腦風(fēng)暴之前,收集一些與主題相關(guān)的素材和參考,以便參與者能夠更好地理解主題和激發(fā)靈感。
 
自由暢談:
在頭腦風(fēng)暴過(guò)程中,鼓勵(lì)參與者自由暢談,不要限制任何想法或評(píng)論。可以引導(dǎo)參與者從不同角度思考問(wèn)題,并嘗試提出一些創(chuàng)新的解決方案。
 
記錄想法和創(chuàng)意:
將所有想法和創(chuàng)意記錄下來(lái),包括文字、圖形、顏色等元素。這些記錄可以作為后續(xù)設(shè)計(jì)和制作的基礎(chǔ)。
 
篩選和優(yōu)化:
在記錄下所有想法和創(chuàng)意之后,進(jìn)行篩選和優(yōu)化,找出最有潛力和可行性的方案。可以進(jìn)一步改進(jìn)和細(xì)化方案,以提高其吸引力和可執(zhí)行性。
 
得出結(jié)論:
在討論的基礎(chǔ)上,得出一些具體的結(jié)論或提出一些可行的建議。如果沒(méi)有明確的結(jié)論,也可以確定下一步的行動(dòng)計(jì)劃或研究方向。
 
我們以“淮北市中小學(xué)生機(jī)器人競(jìng)賽”為例,根據(jù)文案提取關(guān)鍵詞,然后將其具像化,在紙上手繪出場(chǎng)景草圖。
超全面的banner設(shè)計(jì)指南
 
 
3、定布局
我們采用左右排版的方式,將文案進(jìn)行主次分層,主標(biāo)題為“中小學(xué)生機(jī)器人競(jìng)賽”,副標(biāo)題為“淮北市中小學(xué)”。根據(jù)布局方式,確保信息層級(jí)關(guān)系,‌格局Z 型視覺(jué)模型引導(dǎo)控制用戶視覺(jué)動(dòng)線‌。
超全面的banner設(shè)計(jì)指南
 
 
4、制作步驟
根據(jù)banner四大要素進(jìn)行繪制,第一步定背景,框定banner整體風(fēng)格以及氛圍。第二步進(jìn)行文字排版,將文案信息進(jìn)行層級(jí)劃分。第三部根據(jù)我們的頭腦風(fēng)暴以及草圖進(jìn)行主體的繪制。第四部增加畫(huà)面的點(diǎn)綴元素,使整個(gè)畫(huà)面更加豐富有層次。最后一步對(duì)頁(yè)面進(jìn)行最后的細(xì)節(jié)優(yōu)化,一個(gè)教育類banner就制作完成啦。
超全面的banner設(shè)計(jì)指南
 
 
設(shè)計(jì)的價(jià)值并非絕對(duì)的好與壞,而是取決于它是否能夠滿足用戶的需求并符合用戶體驗(yàn)的習(xí)慣。一個(gè)優(yōu)秀的設(shè)計(jì)不僅僅是追求視覺(jué)效果,更要以解決問(wèn)題為根本目的。如果設(shè)計(jì)不能解決用戶的問(wèn)題或滿足他們的需求,那么再華麗的外表也是空洞的。因此,設(shè)計(jì)師在創(chuàng)作過(guò)程中,應(yīng)始終關(guān)注用戶的需求和體驗(yàn),以便創(chuàng)造出真正有價(jià)值的設(shè)計(jì),希望這篇文章對(duì)你有用。
 
超全面的banner設(shè)計(jì)指南
 
 


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

蘭亭妙微(m.73404.com.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。

設(shè)計(jì)師如何洞悉用戶?揭秘用戶思維的真相

杰睿

 

如果說(shuō)設(shè)計(jì)思維是設(shè)計(jì)師做設(shè)計(jì)的基礎(chǔ),那么用戶思維就是你發(fā)現(xiàn)和解決問(wèn)題的能力,到底什么是用戶思維?有沒(méi)有一些具體詳細(xì)的解釋讓我們了解它呢?請(qǐng)看分享。

 

用戶思維-環(huán)境

 

undefined

 

說(shuō)到用戶思維第一個(gè)必須是用戶環(huán)境,環(huán)境分為設(shè)計(jì)師的設(shè)計(jì)環(huán)境,以及用戶使用你的產(chǎn)品環(huán)境,以及物理環(huán)境,是不是有刮風(fēng)、下雨的惡劣天氣。

 

1.你的設(shè)計(jì)環(huán)境

 

undefined

 

上圖是大多數(shù)設(shè)計(jì)師平時(shí)工作環(huán)境,每天早上我們帶著一杯星巴克,用著蘋(píng)果電腦,打開(kāi)iMAC做著設(shè)計(jì),效果圖每張圖片都精挑細(xì)選,我們也理所當(dāng)然的以為我們的用戶也和我們一樣,大家都是用的蘋(píng)果電腦,用的蘋(píng)果手機(jī)?

 

2.你心中用戶的環(huán)境

 

undefined

 

很多設(shè)計(jì)師作品集里面喜歡放用戶畫(huà)像,我們理想的用戶畫(huà)像都像上圖一樣,用戶都是白領(lǐng),聰明學(xué)歷高,能很好的看明白你的設(shè)計(jì),也會(huì)使用。就像我之前做支付寶,也曾以為用戶都是如上圖所示,其實(shí)不是。很多時(shí)候用戶的場(chǎng)景和我們想象中相差甚遠(yuǎn)。

 

3.用戶實(shí)際的環(huán)境

 

undefined

 

大家都是每天地鐵里面,在沒(méi)有wifi和4G的公交,地鐵里。也都是用的大屏設(shè)計(jì),各種安卓手機(jī)。

 

undefined

 

舉個(gè)例子,這個(gè)「放大鏡」,做設(shè)計(jì)是人都知道是代表「搜索」但是在我們走訪線下實(shí)際場(chǎng)景時(shí)候,下沉到三四線城市的時(shí)候,很多時(shí)候人們并不認(rèn)識(shí)。

 

undefined

 

三四線城市用戶就覺(jué)得這個(gè)像「平底鍋」,不知道是什么意思,這種情況不在少數(shù)。

 

undefined

 

家里有一臺(tái)臺(tái)式電腦給父母用,有一次打電話給我說(shuō),有個(gè)流氓軟件經(jīng)常彈窗,我教他們?nèi)ノ业碾娔X,找到「設(shè)備管理器」卸載掉即可,結(jié)果,父母問(wèn)什么是「設(shè)備管理器」?

所以,你會(huì)發(fā)現(xiàn),用戶其實(shí)和我們心目中想象的相差甚遠(yuǎn)。我們覺(jué)得很基礎(chǔ)的互聯(lián)網(wǎng)知識(shí),在他們那里可能會(huì)很復(fù)雜。

 

4.用戶設(shè)備環(huán)境

 

undefined

 

機(jī)型尺寸:安卓機(jī)的機(jī)型遠(yuǎn)遠(yuǎn)比我們想象的要多,各種超大屏,國(guó)內(nèi)廠商各種千奇百怪的屏幕,這些做設(shè)計(jì)都需要考慮。

 

undefined

 

操作系統(tǒng):不同的操作系統(tǒng),有華為系統(tǒng),小米系統(tǒng),魅族以及各種第三方定制的系統(tǒng),這些系統(tǒng)上呈現(xiàn)效果,都是需要在設(shè)計(jì)時(shí)候需要去考慮的。

 

undefined

 

手機(jī)分辨率:安卓和蘋(píng)果屏幕各種大小,和主流的分辨率,設(shè)計(jì)時(shí)候如何適配,才能很好滿足主流用戶的體驗(yàn),也都需要設(shè)計(jì)師提前去規(guī)劃。

 

5.用戶物理環(huán)境

 

undefined

 

室內(nèi)環(huán)境:用戶在室內(nèi)使用我們產(chǎn)品時(shí)候,是不是應(yīng)該考慮如果是室內(nèi),光線可以自動(dòng)的調(diào)節(jié)。比如蘋(píng)果的系統(tǒng),會(huì)根據(jù)用戶室內(nèi)室外的光線,調(diào)整亮度。

 

undefined

 

室外環(huán)境:用戶在陽(yáng)光下使用,那么亮度變化,陽(yáng)光下字體識(shí)別度等等,都應(yīng)該考慮進(jìn)去。比如白天和晚上使用蘋(píng)果電腦時(shí)候的場(chǎng)景,是否有不同,比如iOS系統(tǒng)的設(shè)計(jì),也是重復(fù)考慮用戶實(shí)際用戶場(chǎng)景。

 

undefined

 

網(wǎng)絡(luò)環(huán)境:用戶在有無(wú)限和5G情況下的體驗(yàn),是不是視頻直接播放,減少等待,當(dāng)用戶在地鐵手機(jī)網(wǎng)絡(luò)不好時(shí)候,視頻是不是支持緩存或者提醒用戶在使用流量。所以在產(chǎn)品設(shè)計(jì)時(shí)候,重復(fù)需要考慮用戶這種場(chǎng)景。

 

undefined

 

抖音和騰訊視頻,在用戶非wifi情況下,會(huì)提醒用戶當(dāng)前網(wǎng)絡(luò)環(huán)境,提示用戶注意流量使用,除了流量提醒,其實(shí)包括網(wǎng)絡(luò)加載不出來(lái)時(shí)候,如何設(shè)計(jì)產(chǎn)品策略都是需要設(shè)計(jì)時(shí)候考慮的。

 

undefined

 

噪音和隱私:比如在公共場(chǎng)合噪音大的時(shí)候,產(chǎn)品體驗(yàn)該怎么優(yōu)化,有木有可能聲音自動(dòng)調(diào)整大,比如微信當(dāng)你外面很吵時(shí)候,直接把語(yǔ)音放耳邊,就從外放變成內(nèi)放了。

 

undefined

 

比如支付寶理財(cái)頁(yè)面,資產(chǎn)和收益顯示可以隱藏金額,保護(hù)用戶隱私情況。以及支付寶在系統(tǒng)后臺(tái)時(shí)候,可以隱藏頁(yè)面。

 

undefined

 

總結(jié)下,我們平時(shí)設(shè)計(jì)中提到的用戶思維,其中關(guān)于環(huán)境的考慮就包括這些:

 

用戶實(shí)際環(huán)境

 

機(jī)型尺寸/2.操作系統(tǒng)/3.屏幕分辨率

 

用戶物理環(huán)境

 

1.室內(nèi)環(huán)境/2.室外環(huán)境/3/網(wǎng)絡(luò)環(huán)境/4.噪音和隱私

 

該怎么去做?

 

undefined

 

1.一部蘋(píng)果一部安卓機(jī)

 

之前在淘寶天貓時(shí)候,有些領(lǐng)導(dǎo)層會(huì)要求,必須使用安卓機(jī)作為主機(jī),因?yàn)橹挥心闳ンw驗(yàn)安卓機(jī),你才能發(fā)現(xiàn)頁(yè)面和產(chǎn)品有多少問(wèn)題,蘋(píng)果本身的系統(tǒng)設(shè)計(jì)比較好,問(wèn)題會(huì)比較少,但安卓系統(tǒng)沒(méi)有那么穩(wěn)定,容易出BUG;所以用安卓機(jī)能發(fā)現(xiàn)產(chǎn)品更多問(wèn)題,同時(shí)也能讓我們更關(guān)注到真實(shí)用戶的感受。

 

undefined

 

2.換位思考將心比心

 

簡(jiǎn)單來(lái)說(shuō)就是做設(shè)計(jì)要有同理心,懂得如何去“換位思考,將心比心”。要學(xué)會(huì)用普通用戶視角去審視我們的產(chǎn)品問(wèn)題,用理解的心態(tài)去理解用戶情緒;從用戶的角度看待問(wèn)題,進(jìn)而增加更多看待問(wèn)題的角度,找到更多設(shè)計(jì)的空間,最后達(dá)到解決問(wèn)題的目的。

 

之前支付寶時(shí)候,提倡管理層要每年去傾聽(tīng)用戶聲音100小時(shí),老板們需要每月抽時(shí)間去當(dāng)「客服」,看看用戶實(shí)際用我們的產(chǎn)品,有哪些難用的地方,從而做到真正從產(chǎn)品上解決用戶問(wèn)題。

 

 

用戶思維-場(chǎng)景

 

undefined

 

1.理解用戶從哪里來(lái)要到哪里去

 

去過(guò)迪士尼的朋友都知道,人很多,那么如何讓這么多人,有效的去體驗(yàn)更多的項(xiàng)目?就必須根據(jù)場(chǎng)景來(lái)設(shè)計(jì),用戶從門口進(jìn)來(lái),去往哪里,每個(gè)項(xiàng)目的設(shè)計(jì)環(huán)節(jié)都需要思考清楚。

 

undefined

 

場(chǎng)景是從哪里來(lái)到哪里去:從一個(gè)場(chǎng)景到另外一個(gè)場(chǎng)景。我記得之前玩過(guò)一個(gè)迪士尼項(xiàng)目加勒比海盜,里面就把每個(gè)環(huán)節(jié)設(shè)計(jì)的很符合整體場(chǎng)景。

 

undefined

 

從入口,到航行過(guò)程中,到大海里大戰(zhàn),以及故事的高潮,到最后的收尾,都是從一個(gè)時(shí)間到另外一個(gè)時(shí)間,就像在電影中親身經(jīng)歷。其實(shí)我們做設(shè)計(jì)又何嘗不是。用戶從一個(gè)入口,到最終成交轉(zhuǎn)化整個(gè)鏈路。

 

undefined

undefined

 

所以場(chǎng)景思維很重要就是關(guān)注用戶,每個(gè)鏈路的體驗(yàn)環(huán)節(jié),如何去發(fā)現(xiàn)其中問(wèn)題,找到設(shè)計(jì)撬動(dòng)點(diǎn)。

 

2.場(chǎng)景是帶時(shí)間維度的

 

undefined

時(shí)間維度很好理解,是用戶在完成任務(wù)整個(gè)過(guò)程中的行為,常見(jiàn)的有前,中,后。我們還是以案例來(lái)分析:

 

買之前:

 

undefined

 

▲認(rèn)知:用戶打開(kāi)支付寶想買理財(cái),但他很可能從來(lái)沒(méi)有買過(guò)理財(cái)產(chǎn)品,那么第一步他可能會(huì)去了解產(chǎn)品,了解里面的金融術(shù)語(yǔ),比如七日年化,收益率等等。那么我們?cè)谠O(shè)計(jì)時(shí)候,就要去思考,如何降低用戶的認(rèn)知,如何用一些淺顯易懂的文案讓用戶理解理財(cái)。

 

undefined

 

▲搜索:用戶通過(guò)第一步了解了各個(gè)理財(cái)特點(diǎn),鎖定要買基金產(chǎn)品,然后這個(gè)過(guò)程中,他會(huì)去對(duì)比每只基金的收益情況,去尋找適合他的產(chǎn)品。

 

買之中:

 

undefined

 

▲判斷:用戶終于發(fā)現(xiàn)了一個(gè)比較符合他心中預(yù)期的產(chǎn)品,然后會(huì)去比較這產(chǎn)品的優(yōu)缺點(diǎn),比如它最后想選擇,收益在6-8%的一只產(chǎn)品,然后會(huì)去思考到底買那一只合適。

 

undefined

 

▲下單:最后用戶選擇了這款收益為6%的產(chǎn)品,然后進(jìn)行交易。

 

買之后:

 

undefined

 

▲查看:最后用戶購(gòu)買成功了,購(gòu)買后,他就會(huì)每天來(lái)看他這只產(chǎn)品的收益情況,每天的收益,每周收益,以及什么時(shí)候賣出去。

 

undefined

 

了解了用戶的購(gòu)買狀態(tài),以及場(chǎng)景的時(shí)間維度,我們就可以去觀察這些鏈路,去尋找一些設(shè)計(jì)線索,去發(fā)現(xiàn)問(wèn)題解決問(wèn)題,場(chǎng)景思維也能幫我們?cè)O(shè)計(jì)更好的決策。其實(shí)這個(gè)思維在電商中也同樣適用。

 

買之前:

 

undefined

 

▲認(rèn)知:雙11快到了,你在家門口地鐵,公交或者微博廣告里面,看見(jiàn)了雙11的一個(gè)產(chǎn)品廣告。其中一個(gè)商品吸引了你。

 

undefined

 

▲搜索:然后你打開(kāi)淘寶APP,搜索這款產(chǎn)品,通過(guò)搜索的入口,進(jìn)入到了店鋪?lái)?yè)面。或者你通過(guò)外面的廣告頁(yè)面點(diǎn)擊到了商品店鋪?lái)?yè)面。

 

買之中:

 

undefined

 

▲判斷:你通過(guò)店鋪?lái)?yè)面,看見(jiàn)這個(gè)商品正在直播講解,你希望查看真實(shí)的商品情況,于是點(diǎn)進(jìn)去,發(fā)現(xiàn)講解的內(nèi)容能讓你更好的了解了此商品,你決定去商品詳情頁(yè)準(zhǔn)備購(gòu)買。

 

undefined

 

▲下單:后面你決定購(gòu)買,直接淘寶下單付款。

 

買之后:

 

undefined

 

▲查看:買完后,你很想用上它,于是你開(kāi)始查看物流,同時(shí)也在擔(dān)心如果質(zhì)量不好,你要如何發(fā)起七天無(wú)理由退款。

 

以上就是我們說(shuō)的用戶思維里面的場(chǎng)景思維,我們需要了解用戶從哪里來(lái)到哪里去,同時(shí)還需要了解用戶購(gòu)買前,購(gòu)買中,購(gòu)買后的心理變化,了解這個(gè)過(guò)程中的鏈路問(wèn)題進(jìn)行設(shè)計(jì)優(yōu)化。

 

 

最后

 

undefined

 

今天這篇分享的用戶思維,只是一個(gè)基礎(chǔ)框架,讓我們能利用同理心,了解用戶的行為特點(diǎn),提升我們的用戶視角,發(fā)現(xiàn)更多的設(shè)計(jì)問(wèn)題,進(jìn)而解決問(wèn)題,成為一個(gè)真正解決問(wèn)題的設(shè)計(jì)師。



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

蘭亭妙微(m.73404.com.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

 

讓轉(zhuǎn)化率飆升!頂尖按鈕設(shè)計(jì)的20個(gè)黃金法則

杰睿

01. 按鈕設(shè)計(jì)強(qiáng)弱表現(xiàn)

在整個(gè)產(chǎn)品設(shè)計(jì)中我們要根據(jù)信息傳遞的優(yōu)先級(jí)對(duì)按鈕設(shè)計(jì)進(jìn)行主次區(qū)分,設(shè)計(jì)表達(dá)要有強(qiáng)弱差異。按鈕設(shè)計(jì)可以通過(guò)大小、填充、描邊、色相、飽和度等的不同來(lái)進(jìn)行強(qiáng)弱差異,不同強(qiáng)弱的差異表現(xiàn)出按鈕的等級(jí):行動(dòng)觸發(fā)、主要、次要、輔助、禁用等。

 

 

 

 

02. 圓角設(shè)置要合理

對(duì)于按鈕邊框來(lái)說(shuō),我們通常采用全圓角和小圓角居多,這樣顯得穩(wěn)重大氣。而大圓角按鈕并非不可用,只是相對(duì)較少,會(huì)顯得按鈕不方不圓的,設(shè)計(jì)表現(xiàn)顯得不夠成熟。

 

全圓角的圓角值等于按鈕高度值的一半,而小圓角的圓角值我們通常控制在 1/4H(高度值的四分之一)以內(nèi)(僅為個(gè)人參考,并非絕對(duì)值)。

 

 

 

 

03. 投影設(shè)置要用對(duì)色彩關(guān)系

給一個(gè)有彩色系按鈕設(shè)置投影時(shí),選擇無(wú)彩色系(比如黑色)也能達(dá)到效果,只是為了得到更好的視覺(jué)效果,提高用戶感官體驗(yàn)。我們也可以嘗試基于按鈕本身色相來(lái)確定投影顏色,這樣得到的效果會(huì)顯得更加干凈清爽。

 

 

 

 

04. 投影的使用勿過(guò)度泛濫

雖然投影的運(yùn)用可以使按鈕更有層次感,但是也需要根據(jù)具體情況慎用。比如對(duì)于一些淺色按鈕來(lái)說(shuō)也許投影反而會(huì)降低按鈕的識(shí)別度,使得按鈕配色環(huán)境顯得不夠干凈清爽。

 

 

 

 

05. 給按鈕文字一點(diǎn)呼吸感

按鈕文字和邊框的設(shè)計(jì)要預(yù)留一定的留白,不要做“舍不得”的設(shè)計(jì),使得按鈕給人感覺(jué)很擁擠。如果你把控不好可以分析一些按鈕的負(fù)空間獲取經(jīng)驗(yàn),看看文字大小和負(fù)空間之間是否存在某種比例關(guān)系。找到這個(gè)比例關(guān)系運(yùn)用到按鈕設(shè)計(jì)中,也許會(huì)讓你的設(shè)計(jì)顯得更加成熟穩(wěn)重。

 

 

 

 

06. 按鈕設(shè)計(jì)別讓用戶思考

按鈕的存在是為了引導(dǎo)用戶進(jìn)行引導(dǎo)式操作,而不是讓用戶對(duì)其產(chǎn)生困惑。按鈕設(shè)計(jì)別讓用戶思考這是啥,是否可以點(diǎn)擊,需要簡(jiǎn)潔明了的對(duì)此操作進(jìn)行指引。用戶已經(jīng)養(yǎng)成對(duì)按鈕外觀和功能的行為習(xí)慣,如果你設(shè)計(jì)的按鈕樣式與“標(biāo)準(zhǔn)”差異太大,用戶就會(huì)產(chǎn)生疑惑,影響使用體驗(yàn)。

 

 

 

 

07. 樣式表達(dá)的一致性

當(dāng)設(shè)計(jì)元素規(guī)范統(tǒng)一時(shí),用戶操作過(guò)程中的理解成本最低,一致性也因此成為最有力的可用性原則之一。我們?cè)谠O(shè)計(jì)按鈕的時(shí)候要注意樣式表達(dá)的一致性,比如:按鈕形狀、色彩定義、風(fēng)格特征等,這樣會(huì)使得我們的設(shè)計(jì)可用性更強(qiáng)。

 

 

 

 

08. 箭頭運(yùn)用不是字符輸入

一些初入職場(chǎng)的設(shè)計(jì)師會(huì)偷懶直接字符輸入形成按鈕內(nèi)部所需箭頭,這樣的表達(dá)方式自然顯得粗糙些。箭頭要當(dāng)成圖標(biāo)來(lái)進(jìn)行設(shè)計(jì),控制好箭頭的粗細(xì)和文字筆畫(huà)的粗細(xì)值接近,這樣顯得更有細(xì)節(jié)和態(tài)度。

 

 

 

 

09. 按鈕設(shè)計(jì)主次分明

通過(guò)信息對(duì)比才能形成主次之分,按鈕設(shè)計(jì)需要在風(fēng)格上進(jìn)行區(qū)分,達(dá)到層次結(jié)構(gòu)的視覺(jué)提示。主要的按鈕需要和次要的、輔助的形成差異,最大化突出主按鈕的視覺(jué)效果,更好的引導(dǎo)用戶根據(jù)設(shè)定的軌跡進(jìn)行操作。

 

 

 

 

10. 按鈕設(shè)計(jì)不要讓用戶誤解

在整個(gè)項(xiàng)目設(shè)計(jì)規(guī)范中,我們需要避免讓用戶把非按鈕狀態(tài)的內(nèi)容進(jìn)行誤判。在確定好按鈕樣式特征之后,不要在其它場(chǎng)景運(yùn)用其樣式特征或者類似的風(fēng)格特征,這樣會(huì)讓用戶產(chǎn)生錯(cuò)誤的認(rèn)知,因而進(jìn)行無(wú)用的操作。

 

 

 

 

11. 按鈕文本表達(dá)要言簡(jiǎn)意賅

在進(jìn)行按鈕文本思考的時(shí)候,盡量減少字符和單詞的數(shù)量,內(nèi)容表達(dá)言簡(jiǎn)意賅,只要能夠準(zhǔn)確傳達(dá)信息識(shí)別度即可。有時(shí)候也不一定需要文本,圖標(biāo)可以傳遞的信息可以考慮文本的減少,也許可以讓界面的呼吸感更強(qiáng)。

 

 

 

 

12. 按鈕文本設(shè)置切勿換行

單行文字的可讀性更高,如果出現(xiàn)換行就會(huì)降低可讀性。我們?cè)谠O(shè)計(jì)按鈕的時(shí)候,確保文本內(nèi)容在一行之內(nèi)顯示,如果設(shè)計(jì)空間不足要考慮文本內(nèi)容的精簡(jiǎn)。

 

 

 

 

13. 特殊場(chǎng)景要靈活轉(zhuǎn)變

底部按鈕的運(yùn)用并非固定不變,不同機(jī)型或者特殊場(chǎng)景的考慮需要靈活轉(zhuǎn)變。比如 iPhone X 等類型的機(jī)型,由于底部需要預(yù)留主頁(yè)控制器的位置,所以在設(shè)計(jì)按鈕的時(shí)候需要考慮上中下的過(guò)渡銜接,這樣才能帶給用戶更好的感官體驗(yàn)。

 

 

 

 

14. 按鈕大小要便于點(diǎn)擊

按鈕需要方便用戶進(jìn)行點(diǎn)擊操作,如果用戶點(diǎn)擊失敗或者誤點(diǎn)到周邊元素,就會(huì)帶給用戶不友好的體驗(yàn)。若是帶有文本的按鈕,只要文字大小不要小于極限值,通常實(shí)現(xiàn)出來(lái)的按鈕交互熱區(qū)都會(huì)滿足點(diǎn)擊需求。

 

如果是純 icon 的按鈕,除了按鈕大小需要控制合適以外,也要確保交互熱區(qū)能夠滿足點(diǎn)擊區(qū)域要求。

 

 

 

 

15. 同屬板塊按鈕大小一致

在同屬板塊內(nèi)的按鈕設(shè)計(jì),我們可以通過(guò)按鈕的強(qiáng)弱來(lái)體現(xiàn)層級(jí)關(guān)系,不要讓按鈕大小不一,這樣視覺(jué)平衡會(huì)受到影響。

 

 

 

 

16. 按鈕設(shè)計(jì)考慮文本最大值

稍微注意細(xì)節(jié)的設(shè)計(jì)師也不會(huì)讓文本的長(zhǎng)度超過(guò)按鈕寬度,這是一個(gè)非常明顯的錯(cuò)誤。但是按鈕文本變得很長(zhǎng)卻是遇見(jiàn)過(guò)的,幾個(gè)字即可表達(dá)的意思卻使用了過(guò)多修飾詞。在進(jìn)行按鈕文本思考的時(shí)候,要根據(jù)最佳的視覺(jué)效果設(shè)定一個(gè)最大值,不要任其無(wú)限制發(fā)揮,這樣會(huì)使得最終的視覺(jué)效果大打折扣,甚至影響用戶感官體驗(yàn)。

 

 

 

 

17. 保持按鈕可讀性

按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度,確保用戶可以一目了然的發(fā)現(xiàn)它。現(xiàn)在很多產(chǎn)品都適配了深色主題模式,按鈕的配色不能只考慮白色或者淺色背景下的運(yùn)用,需要考慮大多數(shù)背景下的適配。在進(jìn)行色彩選擇的時(shí)候,始終保持按鈕與背景的高對(duì)比度和可讀性。

 

 

 

 

18. 按鈕去文本是否合理

關(guān)于按鈕文本的設(shè)置需要結(jié)合信息傳遞的識(shí)別性和準(zhǔn)確性,雖然純圖標(biāo)顯得設(shè)計(jì)簡(jiǎn)潔大方,但是需要考慮圖形是否可以準(zhǔn)確的表達(dá)其含義,不會(huì)讓用戶出現(xiàn)誤解或者錯(cuò)誤的認(rèn)知。所以,按鈕去文本需要根據(jù)文案代表的含義來(lái)判斷,如果不需要輔助解釋也能判斷出按鈕的意思,那么更為簡(jiǎn)潔的設(shè)計(jì)表達(dá)效果更佳。

 

 

 

 

19. 正確判斷按鈕顏色選擇

色彩在設(shè)計(jì)中是最直觀的體現(xiàn),不同的顏色會(huì)傳遞不同的性格,帶給用戶認(rèn)知差異。而按鈕的顏色選擇也并非隨性發(fā)揮,需要結(jié)合品牌色和輔助色作出判斷。

 

通常比較統(tǒng)一的標(biāo)準(zhǔn)是采用品牌色作為大部分按鈕的顏色,遇到一些需要差異化的按鈕會(huì)選擇輔助色來(lái)表達(dá),紅色或者橙色多為行動(dòng)刺激作用,不適合在非品牌色的時(shí)候?yàn)E用。淺灰色或者低飽和度的色系會(huì)帶有不可用、禁用、失效等屬性,需要酌情選擇。

 

 

 

 

20. 按鈕位置結(jié)合用戶體驗(yàn)

引導(dǎo)用戶作出選擇的按鈕應(yīng)該放在左邊還是右邊,根據(jù)操作系統(tǒng)的不同也引起了設(shè)計(jì)師們的爭(zhēng)議。比如 Windows 系統(tǒng)習(xí)慣將確認(rèn)按鈕放在左邊,而蘋(píng)果系統(tǒng)卻選擇了放在右邊,用戶運(yùn)用系統(tǒng)的習(xí)慣會(huì)影響其行為的適應(yīng)度。不過(guò)要是在移動(dòng)端個(gè)人傾向于將引導(dǎo)用戶作出選擇的按鈕放在右邊,更有利于用戶點(diǎn)擊(特殊人群這里需要除外)。

 

有時(shí)候?yàn)榱朔乐褂脩粽`操作,我們會(huì)將確認(rèn)操作的按鈕放在左邊,通過(guò)助力設(shè)計(jì)讓用戶再次確認(rèn)。所以,一方面我們要結(jié)合操作系統(tǒng)的習(xí)慣,另一方面也要結(jié)合用戶習(xí)慣,將按鈕放在最合適的位置,便于用戶操作。

 

 

 

 

小結(jié)

作為設(shè)計(jì)師來(lái)說(shuō),對(duì)每一個(gè)細(xì)小的元素進(jìn)行深入思考和總結(jié),才能讓我們?cè)O(shè)計(jì)出更好的解決方案。一枚小小的按鈕設(shè)計(jì),其背后也有很多需要探索的東西,本文為大家總結(jié)了 20 條經(jīng)驗(yàn),相信還有更多值得梳理的細(xì)節(jié),期待更多設(shè)計(jì)伙伴去挖掘。

 



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

蘭亭妙微(m.73404.com.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

寫(xiě)給產(chǎn)品總監(jiān):UI設(shè)計(jì):軟件產(chǎn)品的“顏值”與“內(nèi)涵”,如何提高軟件產(chǎn)品中的UI設(shè)計(jì)水準(zhǔn)?

藍(lán)藍(lán)設(shè)計(jì)的小編

作為產(chǎn)品總監(jiān),你一定明白,軟件產(chǎn)品成功的關(guān)鍵在于用戶體驗(yàn),而UI設(shè)計(jì)正是塑造用戶體驗(yàn)的核心。簡(jiǎn)單來(lái)說(shuō),UI設(shè)計(jì)就是用戶界面的設(shè)計(jì),它決定了用戶如何與你的產(chǎn)品互動(dòng),就像產(chǎn)品的“顏值”和“內(nèi)涵”,直接影響用戶的第一印象和使用感受。UI設(shè)計(jì)不僅僅是讓界面好看,更重要的是好用。 它需要平衡視覺(jué)美感與功能實(shí)用性,讓用戶在使用過(guò)程中感到舒適、高效、愉悅。

如何提高軟件產(chǎn)品中的UI設(shè)計(jì)水準(zhǔn)? 以下是一些建議:

設(shè)計(jì)師需要掌握的思維模型

杰睿

關(guān)于設(shè)計(jì)思維你了解多少?

設(shè)計(jì)思維模型對(duì)于互聯(lián)人來(lái)說(shuō)非常重要,經(jīng)常我們?cè)谠u(píng)價(jià)一個(gè)候選人時(shí)候會(huì)說(shuō),這個(gè)同學(xué)系統(tǒng)思考差了點(diǎn),或者說(shuō)用戶和商業(yè)思維不夠。那么到底什么是系統(tǒng)思考,設(shè)計(jì)師該如何學(xué)會(huì)系統(tǒng)思考,系統(tǒng)思考到底能幫助我們?cè)谧鲈O(shè)計(jì)時(shí)候有什么幫助,今天希望我的這個(gè)分享能讓你了解什么是系統(tǒng)思考,以及它的思考模型是什么。

 

設(shè)計(jì)思維模型的重要性

設(shè)計(jì)做久了你會(huì)發(fā)現(xiàn)離不開(kāi)流程和思維,之前支付寶一位大佬總結(jié)下來(lái)叫“左手藝術(shù),右手科學(xué)”,藝術(shù)大家都明白,設(shè)計(jì)師是感性動(dòng)物,對(duì)于美的追求是大家都是擅長(zhǎng)的也非常有發(fā)言權(quán),那么科學(xué)指的是我們需要通過(guò)科學(xué)的方法流程,系統(tǒng)的思考問(wèn)題方式,讓設(shè)計(jì)不止好看,同時(shí)也應(yīng)該符合用戶,商業(yè)訴求,滿足好這3者的平衡點(diǎn)。

 

所以設(shè)計(jì)師,除了關(guān)注「左手」藝術(shù)的部分,同時(shí)也需要關(guān)注「右手」科學(xué)的部分。

 

設(shè)計(jì)思維模型有哪幾種

設(shè)計(jì)思維模型不止是一個(gè)單一的思維模型,它包含三種思維模型,設(shè)計(jì)思維,用戶思維,產(chǎn)品思維。今天這篇文章,我們先來(lái)了解第一個(gè)思維,設(shè)計(jì)思維到底是什么,我們?cè)撊绾翁嵘O(shè)計(jì)師的設(shè)計(jì)思維。

 

設(shè)計(jì)思維包含哪些

第一個(gè)設(shè)計(jì)思維也是最基礎(chǔ)的,就是作為設(shè)計(jì)師,我們必須了解各大平臺(tái)的設(shè)計(jì)規(guī)范,這是做任何設(shè)計(jì)的基礎(chǔ),如果你了解你負(fù)責(zé)的這個(gè)平臺(tái)規(guī)則,那么你的設(shè)計(jì)就無(wú)法邁出第一步,所以對(duì)于剛做設(shè)計(jì)不久的同學(xué),基礎(chǔ)思維規(guī)范需要去死記硬背背下來(lái),沒(méi)有這個(gè)基礎(chǔ)后面都是無(wú)用功。

 

1.知道基礎(chǔ)設(shè)計(jì)規(guī)范

常用的設(shè)計(jì)規(guī)范,比如蘋(píng)果的設(shè)計(jì)規(guī)范,里面詳細(xì)講述了,常用的蘋(píng)果導(dǎo)航欄高度是多少,蘋(píng)果的表格視圖高度多大,頁(yè)面中常用的設(shè)計(jì)字體字號(hào)多少,如何去適配不同分辨率,這些基礎(chǔ)的設(shè)計(jì)原則,都統(tǒng)稱為設(shè)計(jì)思維。

 

谷歌的material規(guī)范,也是設(shè)計(jì)師必須了解的規(guī)范,特別是需要了解它在系統(tǒng)層面和iOS的差異化。

 

2.知道常用設(shè)計(jì)原則

設(shè)計(jì)思維很重要一點(diǎn),就是要了解基礎(chǔ)的審美,以及用戶心理學(xué),其中排版運(yùn)用比較多的格式塔原理,是做設(shè)計(jì)排版的基礎(chǔ)。

 

相似性原則:我們會(huì)潛意識(shí)把更緊密的事物歸屬一組。

 

相似性原則運(yùn)用:淘寶網(wǎng)導(dǎo)航菜單就是運(yùn)用這種原則,根據(jù)產(chǎn)品類別一致,進(jìn)行同類分類,這個(gè)就是運(yùn)用的格式塔緊密設(shè)計(jì)原則。

 

封閉性原則:視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖形關(guān)閉起來(lái),從而將其感知為完整的物體而不是分散的碎片。

 

封閉性原則運(yùn)用:我們會(huì)自動(dòng)將這些不完整的圖形在腦海中封閉起來(lái),形成一個(gè)整體圖形。如圖中海報(bào),雖然文字被遮擋了一部分,或者被一些圖形分割了,但是我們腦海中還是會(huì)自動(dòng)腦補(bǔ)出設(shè)計(jì)畫(huà)面。

 

連續(xù)性原則:我們的視覺(jué)感知系統(tǒng)傾向于連續(xù)性,視覺(jué)系統(tǒng)傾向于感知連續(xù)的形式而不是離散的碎片。

 

連續(xù)性原則運(yùn)用:Pinterest和ins雖然卡片被下面截?cái)嗔耍俏覀冞€是會(huì)認(rèn)為它和下面內(nèi)容是一組的。

 

焦點(diǎn)原則:一個(gè)一面只有一個(gè)核心,一個(gè)眼睛,引導(dǎo)用戶去關(guān)注你想表達(dá)的重點(diǎn)。

 

焦點(diǎn)原則運(yùn)用:少即是多,蘋(píng)果的很多產(chǎn)品就是運(yùn)用一個(gè)焦點(diǎn),做到畫(huà)龍點(diǎn)睛的作業(yè)。

 

地面原則:我們的大腦將視覺(jué)區(qū)域分為主體和背景,主體包括一個(gè)場(chǎng)景中占據(jù)注意力的元素,其余都為背景。

 

地面原則運(yùn)用:如上圖案例中,我們視覺(jué)會(huì)自動(dòng)將紅色,綠色,藍(lán)色當(dāng)做背景,頁(yè)面的幾何圖形會(huì)當(dāng)為主體,用戶的注意力也在上面,在平時(shí)做設(shè)計(jì)時(shí)候需要去營(yíng)造這種空間和層次感。

 

格式塔是設(shè)計(jì)很重要基礎(chǔ)之一,來(lái)源于20世紀(jì)的德國(guó),也是作為設(shè)計(jì)師必須掌握的設(shè)計(jì)原則,也是你做設(shè)計(jì)的第一個(gè)需要掌握的設(shè)計(jì)基礎(chǔ)。

 

3.知道設(shè)計(jì)是用來(lái)用的,而不是藝術(shù)

很多同學(xué)剛做設(shè)計(jì),很容易在頁(yè)面中為了體現(xiàn)自己掌握的某種技法,而做過(guò)了,或者設(shè)計(jì)的頁(yè)面太偏向于個(gè)人喜好。這是不對(duì)的,我們的設(shè)計(jì)最終一定要是用戶使用的,否則再漂亮華麗的設(shè)計(jì)都會(huì)是曇花一現(xiàn)。

 

Path的設(shè)計(jì)在剛出來(lái)時(shí)候,簡(jiǎn)直是業(yè)內(nèi)交互和視覺(jué)標(biāo)桿性產(chǎn)品,創(chuàng)新的交互細(xì)節(jié),精致的頁(yè)面表現(xiàn)。都很完美,但是最終也逃不過(guò)曇花不現(xiàn),很大部分原因是產(chǎn)品定位不準(zhǔn),商業(yè)思考不夠,沒(méi)有很好解決好用戶訴求,最終導(dǎo)致失敗。所以在一個(gè)成熟的設(shè)計(jì)中,設(shè)計(jì)好用比好看更重要,我們要做的就是在這個(gè)過(guò)程中不斷尋找合適的平衡點(diǎn)。

 

當(dāng)年Facebook 出品的paper這款產(chǎn)品,也是業(yè)內(nèi)關(guān)注度極高,把手勢(shì)運(yùn)用到了極致。但最后也逃不過(guò)這種命運(yùn),幾乎移動(dòng)市場(chǎng)上,沒(méi)有一個(gè)產(chǎn)品是因?yàn)楹每炊钕聛?lái)的,幾乎最后的那些被人們每天使用的產(chǎn)品,都不是因?yàn)楹每矗且驗(yàn)楹糜茫瑵M足人們痛點(diǎn)需求。

 

所以,剛工作的設(shè)計(jì)師,在設(shè)計(jì)思維這個(gè)層面,一定要明確我們的每一個(gè)頁(yè)面,一定是滿足用戶完成任務(wù)為第一優(yōu)先級(jí),其次考慮產(chǎn)品整體和品牌,公司大的設(shè)計(jì)方向掛鉤。

 

4.知道設(shè)計(jì)不止是效果圖,對(duì)落地負(fù)責(zé)

工作幾年后,作為一個(gè)漂亮的設(shè)計(jì)效果圖都不難,很多時(shí)候參考下競(jìng)品,在競(jìng)品基礎(chǔ)上去找一些差異化創(chuàng)新,甚至做出一個(gè)超越競(jìng)品的設(shè)計(jì)效果圖,加上真實(shí)動(dòng)效,好看的圖片,精心排版的文案。這些很多設(shè)計(jì)師都可以做到。但是很多設(shè)計(jì)師忽略了真正上線后的效果。

 


上面那個(gè)情況,我想大家都經(jīng)歷過(guò),我們效果圖做的很好,干凈的商品圖,標(biāo)簽也很規(guī)范。但是實(shí)際上線后就是右邊效果,各種圖上放牛皮癬,以及各種標(biāo)簽。

 

從業(yè)務(wù)層面來(lái)說(shuō),沒(méi)有錯(cuò),因?yàn)榉排Fぐ_可能銷量更好。但是設(shè)計(jì)時(shí)候,我們是不是可以再往前一步,幫用戶思考如果圖片上房廣告該在展示,如果文案很多時(shí)候,標(biāo)簽很復(fù)雜的展示規(guī)則。

 

優(yōu)秀設(shè)計(jì)師不僅僅能做出漂亮設(shè)計(jì)圖,同時(shí)他們也能對(duì)內(nèi)容進(jìn)行負(fù)責(zé),定義好詳細(xì)是內(nèi)容規(guī)范。

 

之前淘寶的同事,定完一個(gè)電商的KV風(fēng)格后,還會(huì)出一個(gè)詳細(xì)的風(fēng)格指南,里面會(huì)去定義配色,文案話術(shù),字?jǐn)?shù),以及頁(yè)面圖片的展示規(guī)范,這些的目的都是對(duì)內(nèi)容進(jìn)行控制。

 

5.知道主流設(shè)計(jì)趨勢(shì)和手法

目前很多設(shè)計(jì)師以為做UI就只有扁平化,以為大公司設(shè)計(jì)流程都是痛點(diǎn)分析、人群畫(huà)像、旅程地圖、用戶調(diào)研、方案呈現(xiàn)。各種一堆推導(dǎo),然后最終的方案簡(jiǎn)簡(jiǎn)單單收尾,同時(shí)還暴露一個(gè)很大問(wèn)題,風(fēng)格單一。其實(shí)UI真的不止是只有扁平化。

 

手法一:手繪簡(jiǎn)筆風(fēng)格

如果你是設(shè)計(jì)日記的忠實(shí)讀者,你一定看過(guò)我之前寫(xiě)過(guò)一些大廠的設(shè)計(jì)手法。手繪簡(jiǎn)筆就是其中一個(gè)風(fēng)格之一,整體風(fēng)格都是手繪線條配以低飽和度顏色,有很多趣味性和故事融合在里面。

 

Facebook改版之前的風(fēng)格就是運(yùn)用的這套風(fēng)格,整個(gè)頁(yè)面也更加年輕和時(shí)尚。

 

手法二:分形藝術(shù)風(fēng)格

 

利用簡(jiǎn)單的幾何圖形,不斷重復(fù),形成一種新的形式,在一些背景上,一些圖形和海報(bào)上經(jīng)常被大量運(yùn)用,只不過(guò)很多設(shè)計(jì)師并沒(méi)有關(guān)注到這些風(fēng)格。

 

Uber之前的規(guī)范中,對(duì)于全球的各個(gè)國(guó)家的設(shè)計(jì),都是定義了一個(gè)國(guó)家的基礎(chǔ)圖形,然后圍繞基礎(chǔ)圖形做出了一系列擴(kuò)展,這其實(shí)就運(yùn)用到了這個(gè)分形重復(fù)設(shè)計(jì)手法。

 

包括我們熟知是蘋(píng)果相冊(cè)圖標(biāo),chrome瀏覽器和谷歌相冊(cè)圖標(biāo),都是運(yùn)用這種手法,一個(gè)基礎(chǔ)圖形有規(guī)律的變化。

 

手法三:柔光風(fēng)格

 

 

很多設(shè)計(jì)師做東西風(fēng)格比較單一局限,UI發(fā)展到今天其實(shí)有很多新的風(fēng)格出現(xiàn),柔光風(fēng)格就是其中之一,整體風(fēng)格呈現(xiàn)出光的折射特征,顏色層次豐富,有明顯的光的流動(dòng)感和方向性。在設(shè)計(jì)上常用漸變,光斑,流動(dòng)透明疊加手法,是目前大公司比較主流的一種風(fēng)格。

整個(gè)畫(huà)面有色彩流動(dòng)感,背景一般是多色融合,有層次,有流動(dòng)液體變化。

 

像這個(gè)案例就是色彩上跨度比較大的一個(gè)漸變,同時(shí)運(yùn)用白色透明疊加方式處理,細(xì)節(jié)簡(jiǎn)單細(xì)膩。

 

支付寶之前芝麻信用的風(fēng)格我很喜歡,其中就是運(yùn)用的這套設(shè)計(jì)手法,背景運(yùn)用這種虛實(shí),光斑作為層次。

 

在很多可視化場(chǎng)景中也會(huì)運(yùn)用,比如左圖就是運(yùn)用波浪透明疊加線條作為頁(yè)面核心焦點(diǎn),右邊頁(yè)面背景底部運(yùn)用有層次的漸變和光暈。

 

手法四 :紋理風(fēng)格

這個(gè)風(fēng)格很多人都有印象,特別是韓國(guó)設(shè)計(jì)中大量運(yùn)用了這種設(shè)計(jì),國(guó)內(nèi)電商中也會(huì)運(yùn)用比較多,這種風(fēng)格就是紋理風(fēng)格。

 

 

淘寶的88會(huì)員,我們能看見(jiàn)會(huì)員頁(yè)面輔助元素這些紋理效果作為背景出現(xiàn)在這些頁(yè)面中,能很好將視覺(jué)層次豐富起來(lái)。

 

雙11的宣傳海報(bào),也是運(yùn)用這種幾何紋理作為視覺(jué)層次的裝飾。

 

考拉當(dāng)年的改版設(shè)計(jì),很核心的元素就是這個(gè)圓形,以及他的底紋運(yùn)用效果。

 

這種底紋效果,很多時(shí)候也可以傳遞出品牌的氣質(zhì),品牌的調(diào)性,左側(cè)音樂(lè)播放默認(rèn)圖片,特別有品質(zhì)感,右側(cè)電商主頁(yè)面的背景,清晰感覺(jué),后面線條恰到好處。

 

當(dāng)然,設(shè)計(jì)趨勢(shì)并不止我今天說(shuō)的這些,其實(shí)有很多,作為設(shè)計(jì)師,設(shè)計(jì)思維中很重要的點(diǎn),就是關(guān)注趨勢(shì),并將他運(yùn)用到你設(shè)計(jì)中去,這是必不可少的一項(xiàng)技能。

 

6.了解設(shè)計(jì)只是整體體驗(yàn)的一部分

從這張經(jīng)典的圖中我們可以看出,設(shè)計(jì)只是一個(gè)產(chǎn)品其中很小的一部分,很多設(shè)計(jì)師以為我們看見(jiàn)的就是一切,其實(shí)不是,就像冰山一樣,表現(xiàn)層是最上面的一部分,冰山下面其實(shí)有很多的內(nèi)容。

 

我們來(lái)看個(gè)案例,比如支付寶:

 

表現(xiàn)層:

視覺(jué)設(shè)計(jì)師比較容易關(guān)注的,圓潤(rùn)的圖標(biāo),卡片的設(shè)計(jì),扁平的風(fēng)格,2.5D的插畫(huà)風(fēng)格,小螞蟻的微動(dòng)效,支付寶品牌藍(lán)色,以及一些卡片的動(dòng)畫(huà)效果。

 

框架層/結(jié)構(gòu)層:

頂部的4個(gè)金剛設(shè)計(jì),也是用戶最常用的4個(gè)功能,下面14個(gè)宮格導(dǎo)航,代表不同的服務(wù)入口,小螞蟻卡片是通知入口,下面營(yíng)銷廣告資源位,下面是千人千面或者推薦的服務(wù)卡片等等。理財(cái)頁(yè)面也是如此,頭部用戶數(shù)錢,下面業(yè)務(wù)入口下面不同理財(cái)服務(wù)。

 

范圍層:

根據(jù)用戶的訴求,中間的宮格導(dǎo)航是動(dòng)態(tài)變化的,用戶也可以去根據(jù)內(nèi)容需要去定義,小螞蟻通知入口也是如此,一個(gè)小喇叭的功能,把所有支付寶的通知都收在這個(gè)地方,底部卡片根據(jù)用戶習(xí)慣去展示,比如你經(jīng)常點(diǎn)外賣那么推送你美食卡片,你比較關(guān)注疫情推薦你疫情卡片等等。

 

戰(zhàn)略層:

顧名思義,那就是公司整體戰(zhàn)略,從支付寶品牌升級(jí)更加年輕化,強(qiáng)化生活服務(wù)心智,首頁(yè)新增外賣到家、果蔬商超醫(yī)藥等便民生活版塊,并基于智能算法為用戶推薦喜歡的服務(wù),讓每個(gè)用戶擁有更貼心專屬的支付寶。

 

所以其實(shí)所有產(chǎn)品都是圍繞這樣邏輯去設(shè)計(jì),我們?cè)O(shè)計(jì)師要明白設(shè)計(jì)那種趨勢(shì)手法,只是一部分。我們要不斷的去了解最頂層,才能理解產(chǎn)品設(shè)計(jì)背后的規(guī)則邏輯。

 

最后

今天分享的是設(shè)計(jì)師需要掌握的思維模型,其中關(guān)于設(shè)計(jì)思維的,我們?cè)賮?lái)回顧下,設(shè)計(jì)思維包括哪些:

 

1.了解基礎(chǔ)的設(shè)計(jì)規(guī)范;

2.知道常用設(shè)計(jì)原則;

3.知道設(shè)計(jì)是用來(lái)用的,而不是藝術(shù);

4.知道設(shè)計(jì)不止是效果圖,對(duì)落地負(fù)責(zé);

5.知道主流設(shè)計(jì)趨勢(shì)和手法;

 

 

 

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

蘭亭妙微(m.73404.com.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è)人資料

存檔

主站蜘蛛池模板: 永久免费看动漫黄址 | 色片在线播放 | 三级黄网站 | 午夜免费在线观看 | 国产男女猛烈无遮挡免费视频网站 | 51区成人一码二码三码是什么 | 无码一区二区三区av免费 | 亚洲国产天堂一区二区三区 | 古装大尺度激情呻吟视频 | 少妇无套内谢久久久久 | 亚洲粉嫩 | av青青草原| 扶她futa粗大做到怀孕 | 最近中文字幕在线中文视频 | 青青久草在线视频 | 亚洲人成网站在线播放2019 | 国产午夜成人免费看片 | 天天做天天爱夜夜爽毛片毛片 | 亚洲激情第一页 | 玩弄丰满少妇xxxxx性多毛 | 羞羞麻豆国产精品1区2区3区 | 中文综合网 | 国产又色又爽又刺激在线观看 | 能看av的网站 | 亚洲色成人www永久在线观看 | 久久免费视频在线观看 | 夫妻啪啪呻吟x一88av | 国产免费久久精品99久久 | 亚洲成av人片在线观看天堂无码 | 安野由美中文一区二区 | 国产v亚洲v天堂无码 | 日本特级黄色 | 久久久久在线观看 | 日本www一道久久久免费榴莲 | 亚洲免费大全 | 天堂网手机版 | wwww亚洲熟妇久久久久 | 国模冰莲大胆自慰难受 | 国产欧美va欧美va香蕉在 | 91亚洲人人在字幕国产 | 国产精品三级在线 | 亚洲精品国产第一综合99久久 | 屁屁国产第一页草草影院 | 偷看农村妇女牲交 | 懂色av蜜臀av粉嫩av喷吹 | 国产美女作爱视频 | 亚洲精品一区二区三区大桥未久 | 成人精品国产免费网站 | 色翁荡熄又大又硬又粗又视频图片 | 在线观看av一区 | 色大师在线观看免费播放 | 中文字幕精品无码一区二区三区 | 国产懂色av一区二区三区 | 一卡二卡三卡在线 | 18禁美女黄网站色大片免费看 | 日日av拍夜夜添久久免费 | 国产亚洲精品精品国产亚洲综合 | 黄色a级在线观看 | 三男一女吃奶添下面视频 | 国产精品久久久爽爽爽麻豆色哟哟 | 五月天精品一区二区三区 | 色老板最新地址 | 免费观看性生活大片3 | 精品午夜久久久 | 97影院手机版 | 亚洲精品国产视频 | 国产精品国产三级国产不产一地 | 人人妻人人妻人人人人妻 | 亚洲欧美日韩色图 | 免费毛片在线 | 天天狠天天透天天伊人 | 神马久久久久久 | 极品少妇xxxx精品少妇偷拍 | 欧美aa大片欧美大片观看 | 男女黄色又爽大片 | 91精品国产入口 | 久久九九日本韩国精品 | 久久精品一区二区免费播放 | 亚洲精品久久久久中文字幕 | 不卡av中文字幕 | 国产精品国产a | 欧美人伦禁忌dvd放荡欲情 | 在线看av的网址 | 婷婷丁香五 | 在线免费观看成人 | 天天综合天天做天天综合 | 岳睡了我中文字幕日本 | 熟女毛多熟妇人妻在线视频 | 57pao国产一区二区 | 人人爱人人射 | 婷婷综合少妇啪啪喷水 | 国产毛片毛片毛片毛片 | 自拍偷拍亚洲一区 | 日韩和的一区二区 | 日韩视频一区二区三区 | 国产老太婆免费交性大片 | 国产在线播放一区二区 | 91精产国品一二三区在线观看 | 91精品国产色综合久久不卡粉嫩 | 色窝窝无码一区二区三区成人网站 | 国产欧美日韩久久 | 国产三级农民怕怕乡下姝4 国产三级欧美三级 | 免费看污片的网站 | 中文字幕一区视频 | 亚洲第一精品在线 | 少妇29p| 国产精品刺激 | 嫩呦国产一区二区三区av | 欧美日韩黄 | 无码专区aaaaaa免费视频 | 99热亚洲 | 成人在线视屏 | 久久久99精品免费观看 | 一本久久伊人热热精品中文字幕 | 无码人妻av一二区二区三区 | 人人看人人草 | a毛看片免费观看视频 | 国产精品久久久久久久久夜色 | 亚洲女同ⅹxx女同tv | 久久天天躁夜夜躁狠狠躁2022 | 91精品国产色综合久久不卡98口 | 偷拍青青草 | 日本老妇性生活 | 韩国精品一区二区三区 | 国产一区二区三区影院 | 中文字幕二 | 色夜av| 亚洲精品一区二区三 | xfplay2023成人资源站 | 日本一区二区免费在线 | 成年人黄色在线观看 | 欧亚成人av| 欧美日韩午夜群交多人轮换 | 国产精品一区视频 | 五月色婷婷综合 | 免费观看全黄做爰的视频 | h网址在线观看 | 国产精品嫩草影院av蜜臀 | 久久影视院线 | 小雪婷性欢爱全文阅读 | 新国产三级在线观看播放 | 日韩欧美中文在线观看 | 一级片免费观看视频 | 亚洲人成无码www久久久 | 草裙社区精品视频播放 | 亚洲国产精品自产在线播放 | 国产成人免费一区二区三区 | 超碰在线天天 | 日本在线免费 | 尤物精品| 男女做爰猛烈叫床高潮的书 | 欧美香蕉爽爽人人爽 | 综合天堂av久久久久久久 | √天堂资源网最新版在线 | 中文字幕亚韩 | 黑人狂躁日本妞videos在哪里 | 91porn成人精品| 泰国性xxx视频 | 18禁真人抽搐一进一出在线 | 一个人在线观看www软件 | 国产精品蜜 | 热re99久久精品国99热线看 | 噜噜啪永久免费视频 | 国产亚洲精品久久久久5区 国产亚洲精品久久久久久 国产亚洲精品久久久久久国模美 | 黄色尤物视频 | 伊人av超碰久久久麻豆 | 亚洲国产精品无码久久久秋霞1 | 日韩特黄一级欧美毛片特黄 | 色成人亚洲| 久久男人av资源站 | 野狼第一精品社区 | 成人xxx视频 | 欧美色综合色 | 国产无遮挡裸体免费视频 | 亚洲男男无套gv大学生 | 天天综合亚洲 | 在线播放免费人成毛片乱码 | 国产精品高潮呻吟久久av黑人 | 亚洲日韩国产精品第一页一区 | 国产特级毛片aaaaaa喷潮 | 精品白嫩bbwbbwbbw韩国 | 国产莉萝无码av在线播放 | 性高朝久久久久久久 | 台湾午夜a级理论片在线播放 | 91精品啪在线观看国产81旧版 | 久久无码av中文出轨人妻 | av图片在线观看 | 欧洲丰满少妇做爰 | 日韩网站视频 | 日韩精品影片 | 国内精品伊人久久久久av影院 | 久久亚洲美女精品国产精品 | 亚洲成人国产精品 | 在线播放无码字幕亚洲 | 18成禁人视频免费 | 伊人原创视频 | 国产午夜久久 | 91香蕉在线看 | 欧美一级黄色毛片 | 手机在线看永久av片免费 | 综合网在线视频 | 一级片在线播放 | 免费观看性生交大片女神 | 福利色导航 | 麻豆视频在线观看免费网站 | 在线免费观看午夜视频8 | 在线观看日韩视频 | 色婷婷97 | 欧美69式互添视频在线 | 又黄又爽又刺激久久久久亚洲精品 | jizzjizz国产 | 欧美aaa级片 | 黄色片网站免费观看 | 国产特级毛片aaaaaa高清 | 国产一区二区三区自拍 | 久久久亚洲欧洲日产国码αv | 五月激情丁香网 | 日韩色道 | 国产精品一品二区三区四区18 | 国产精品国产三级国产aⅴ原创 | 无码国产精品一区二区免费i6 | 浴室里强摁做开腿呻吟男男 | 奶罩不戴乳罩邻居hd播放 | 成人片黄网站色大片免费毛片 | 高潮的毛片激情久久精品 | 北条麻妃久久精品 | 不卡精品 | 毛葺葺老太做受视频 | 欧美xxxx黑人xyx性爽 | 四虎国产成人精品免费一女五男 | 日韩欧美在线不卡 | 五月色丁香婷婷网蜜臀av | 狠狠五月婷婷 | 欧美性猛交xxxxx按摩欧美 | 男女交性全过程3d | mm131美女久久精品美女图片 | 激情婷婷av| 国产无套乱子伦精彩是白视频 | 91av在线看 | 国产在线午夜卡精品影院 | 99re中文字幕 | 奶波霸巨乳一二三区乳 | 好吊视频在线观看 | 久久久精品国产免大香伊 | 久久亚洲色www成人欧美 | 欧美精品一区二区三区在线四季 | 亚洲精品一区二区三 | 国产做爰xxxⅹ高潮 国产做爰xxxⅹ高潮69 | 国产裸体无遮挡免费视频 | а√天堂www在线天堂小说 | 激情成人av| 国产乱妇无乱码大黄aa片 | 国产第一亚洲 | 欧美激情影院 | 精品国产欧美一区二区 | 草草影院1| 福利一区在线观看 | 激情狠狠| 国产日韩欧美日韩大片 | 国产色婷婷久久99精品91 | 天天拍夜夜添久久精品 | 综合网国产 | 欧美日韩一二三四区 | 国产情侣主伺候绿帽男m | 韩国三级a视频在线观看 | 亚洲欧美综合精品另类天天更新 | 国产黄色理论片 | 国产精品怡红院永久免费 | 久久久久久久久久久久久大色天下 | 国产又粗又爽又猛又大的动漫片 | 中文字幕久久熟女人妻av免费 | 97视频在线观看免费 | www.亚洲色图.com | 国产又粗又硬又黄的视频 | 白嫩少妇hdxxxⅹ性大陆 | 国产乱码精品一区二区三区不卡 | 伊人成综合 | 一本大道一区二区 | fc2ppv在线播放 | 亚洲色偷偷av男人的天堂 | 日韩欧美在线播放 | 黄色网页在线播放 | 国产精品久久久久久久9999 | 国产精品成人一区无码 | 久久久久有精品国产麻豆 | 一区二区三区无码高清视频 | 极品美女啪啪 | 麻豆精品久久 | 色88久久久久高潮综合影院 | 国产素人在线观看 | 日本免费一区二区三区中文字幕 | 91免费视频播放 | 一级黄色视 | 中文字幕制服丝袜 | 亚洲久草 | 亚洲色图二区 | 特极黄色片 | 欧美高清在线精品一区 | 欧洲另类一二三四区 | 亚洲成在人| 女女互慰吃奶互揉的视频 | 夜夜高潮天天爽欧美国产亚洲一区 | 丁香色婷婷国产精品视频 | 五月天爱爱| 夜夜做爰www | 女人裸体偷拍全过程 | 亚洲欧美人色综合婷婷久久 | 午夜综合网 | 欧美在线一级视频 | 波多野结衣中文字幕久久 | 疯狂欧美牲乱大交777 | wwwav网| 久久久久高潮 | 少妇高潮太爽了在线视频 | 中文字幕avav| 午夜激情毛片 | 欧美91精品久久久久国产性生爱 | 久久99久久98精品免观看软件 | 香港三日本8a三级少妇三级99 | 人人澡人人添人人爽一区二区 | 中文字幕精品一区二区精品 | 桃色网站在线观看 | 日韩xxxxxxxxx | 国产成人午夜高潮毛片 | 尤物视频在线观看免费 | 日韩黄色av网站 | 久一蜜臀av亚洲一区 | 日日天干夜夜狠狠爱 | 久久久久久久人妻无码中文字幕爆 | 日产精品久久久久久久性色 | 国产成人99 | 激情综合一区二区三区 | 17c在线视频| 99精品一区二区三区无码吞精 | 国内少妇偷人精品视频 | 国产福利观看 | 99久久免费视频在线观看 | 女人的天堂av | 亚洲精品无码午夜福利中文字幕 | 国产精品乱码高清在线观看 | 鲁一鲁av2019在线 | 国产伦精品一区二区三区视频免费 | 夜夜高潮夜夜爽夜夜爱爱一区 | 那里有毛片看 | 国产精品成人免费视频网站 | 丰满孕妇性春猛交xx大陆 | 日本乱偷互换人妻中文字幕 | 国产在线精品一区二区三区不卡 | 一区二区三区福利视频 | 欧美成年私人网站 | 欧美福利片在线观看 | 日韩有码在线视频 | 国产男人的天堂 | 撸撸在线视频 | 日本亚洲欧洲无免费码在线 | 亚洲情涩| 欧美成年人视频在线观看 | 国产ts人妖一区二区 | 欧美性猛交xxxⅹ乱大交小说一 | 刘玥91精选国产在线观看 | 久久免费国产精品 | 狠狠色噜噜狠狠狠 | 国产亚洲tv在线观看 | 米奇777超碰欧美日韩亚洲 | 国产精品一二三四五 | 天堂网日本 | 亚洲 自拍 另类小说综合图区 | 亚洲精品网站日本xxxxxxx | 国产又粗又猛又爽又黄视频 | 欧美孕妇变态重口另类 | gogogo日本免费观看电视动漫 | 久久精品8 | 福利国产视频 | 九九色在线观看 | 官场艳妇疯狂性关系 | 欧美在线一级 | а√天堂资源官网在线资源 | 17c国产精品一区二区 | xxx性欧美 | 国产一区二区三区乱码在线观看 | 欧美巨猛xxxx猛交黑人97人 | 欧美最猛黑人xxxx黑人猛叫黄 | 激情五月少妇a | 理论片毛片 | 亚洲精品在线免费观看视频 | 欧洲少妇ooo | 女朋友闺蜜奶好大下面好紧视频 | 日韩中文人妻无码不卡 | 亚洲激情欧美色图 | 少妇的呻吟k8| 好吊色免费视频 | 黑人狂躁日本妞hd | 一区二区在线看 | 羞羞色院91精品网站 | 日本亚洲精品色婷婷在线影院 | 免费一级做a爰片性视频 | 国产精品自在线拍国产手机版 | 日本精品视频免费 | 深夜男女福利18免费软件 | 欧洲s码亚洲m码精品一区 | 免费色站 | 免费午夜拔丝袜www在线看 | 给我免费的视频在线观看 | 国产亚洲欧美在线专区 | 国产成人精品a视频一区 | 一区二区三区黄色片 | 天天做天天躁天天躁 | 激情床戏视频女人叫国语 | 国产三级精品在线观看 | 强开小嫩苞一区二区三区图片 | 男男巨肉啪啪动漫3d | 成片免费观看视频大全 | 四色永久网址在线观看 | 久久久久国产免费 | 2019日韩中文字幕mv | 精品一区二区三区四区 | 国产网友自拍 | 亚洲成人av免费在线观看 | 免费av资源在线观看 | 伊人久久99 | 亚洲六月婷婷 | 日韩av女优在线观看 | 亚洲欧美丝袜精品久久 | 日本韩国欧美中文字幕 | 亚洲九九视频 | 中文字幕丝袜精品久久 | 久久视频一区二区 | 一区二区三区精 | 后入内射无码人妻一区 | 国产黄a三级三级三级av在线看 | 免费毛片在线 | 日韩亚洲国产中文字幕欧美 | 国产成人免费高清激情视频 | 久久夜色精品 | 国产一级 黄 片 | videos娇小粉嫩精品 | 猎艳山村丰满少妇 | 国产区福利 | 国产尤物网站 | 国产精品伦一区二区 | 小嫩批日出水视频 | 看黄色大片 | 成+人+黄+色有声+小说免费 | 污视频网站免费在线观看 | 亚洲一级理论片 | 无限看片在线版免费视频大全 | 三级国产网站 | 人妻无码中文久久久久专区 | 色先锋av资源中文字幕 | 干欧美| 欧美一区二区三区性视频 | 自拍偷拍在线播放 | 五月激情视频 | www.久久久久久久久 | 欧美自拍区 | 少妇无套内谢免费视频 | 日韩大片免费 | 久久精品国产精品亚洲 | 欧美激情四区 | 久久精品亚洲天堂 | 人妖性生活视频 | 亚洲三级在线免费观看 | 肥臀熟女一区二区三区 | 亚洲精品乱码久久久久久蜜桃 | 亚洲看片网 | 国产午夜精品理论片 | 亚洲一区二区三区成人网站 | 99久久久无码国产aaa精品 | 四虎国产在线 | 国产精品久久久久久久久晋中 | 精品一区在线 | 国产成人精品2021 | 99精品免费久久久久久久久日本 | 色播开心网 | 一级作爱视频 | 少妇做爰免费视频网站色黄 | 1769国产精品 | 久久久久国产一区二区三区 | 日韩和欧美一区二区 | 久久福利影视 | 激情久久一区 | 超碰在线天天 | 大度亲吻原声视频在线观看 | 蜜臀av性久久久久蜜臀aⅴ流畅 | 国产乱子伦精品无码码专区 | 亚洲色图插插插 | 91亚洲狠狠婷婷综合久久久 | 一本一道久久综合狠狠老 | 天天拍夜夜拍 | 国产成人精品久久 | 爱看av在线 | 伊伊成人 | 九月丁香婷婷 | 日本黄视频在线观看 | 性做久久| 成年人网站黄色 | 久热这里有精品 | 2017天天干天天射 | 一级肉体全黄裸片 | 在线观看国产黄色 | 久久dvd| 奇米影视7777狠狠狠狠色 | www.色综合| 国产理论在线 | 国产精品无码av天天爽播放器 | 四月婷婷 | 毛片女人 | 中文字幕乱偷无码av先锋 | 欧美碰碰碰| 欧美搡bbbbb搡bbbbb | 日韩精品久久久久久久软件91 | 夜色视频网 | 黑人操日本| 成人性生交大片免费卡看 | 三级少妇 | 极品少妇xxxx精品少妇 | 无码国产精品一区二区免费式芒果 | 日韩狠狠操 | 中国偷拍毛茸茸肥老熟妇 | 国产小视频在线免费观看 | 精品一区二区不卡无码av | 性爱免费在线视频 | 五月香 | 午夜视频网站在线观看 | 日韩午夜一区 | 精品久久久久久中文字幕大豆网 | 国产做爰全过程免费视频 | 亚洲午夜久久久久久久久久久 | 亚洲综合在线一区二区三区 | 欧美性免费 | 亚洲欧美日韩国产成人 | 国产精品久久久久久久久夜色 | 日韩欧美啪啪 | 在线a久青草视频在线观看 无套内射极品少妇chinese | 亚洲乱码国产乱码精品天美传媒 | 在线观看黄网址 | 人妻无码不卡中文字幕系列 | 欧美一区成人 | 99999国产精品 | 欧美一级特黄视频 | 91日日拍夜夜嗷嗷叫国产 | 99久无码中文字幕一本久道 | 国产成人专区 | 亚洲精品国产成人 | 日韩欧美tⅴ一中文字暮 | 婷婷深爱五月 | 国产午夜无码精品免费看 | 影音先锋久久久久av综合网成人 | 国产成人无遮挡在线视频 | 人人草在线视频 | 亚洲一区精品视频 | 狠狠躁18三区二区一区传媒剧情 | 国产精品国产精品国产专区不蜜 | 99久久综合 | 毛片一毛片二毛片三国产片 | 亚洲国产欧美日韩在线 | 天堂va蜜桃一区二区三区 | 噜噜噜久久| 夜鲁鲁鲁夜夜综合视频欧美 | 亚洲一区二区三区四区在线 | 狠狠色丁香婷婷综合最新地址 | 少妇高潮av | 久久久青草| 精品无码成人片一区二区98 | 亚洲一区二区三区视频 | 寂寞少妇让水电工爽了一小说 | 国产欧美又粗又猛又爽 | 久久精品国产精品亚洲 | 玖玖在线视频 | 开心久久婷婷综合中文字幕 | 久久婷婷国产综合 | 亚洲人成无码网站18禁10 | 髙清国产性猛交xxxand | 九九视频在线播放 | 永久免费未满蜜桃 | 人人婷婷人人澡人人爽 | 人人干人人看 | 国产精品激情av久久久青桔 | 国语自产拍91在线a拍拍 | 日韩免费高清视频网站 | 疯狂做爰高潮videossex | 40岁干柴烈火少妇高潮不断 | 欧美乱妇高清无乱码在线观看 | 国产在线观看免费 | 日韩成人免费观看视频 | 成人1啪啪 | 久久久久久久久久影院 | 国产黄色片av| 欧美日韩国 | 亚洲精品久久久久久一区二区 | 国产周晓琳在线另类视频 | 在线免费观看中文字幕 | 台湾绝版午夜裸体写真秀 | 欧美鲁| 午夜影院一区二区 | 成人小视频在线播放 | 国产在线精品一区二区三区不卡 | 超碰人人做 | 毛片在线免费播放 | 黄色大片网 | 我和房东少妇激情 | 亚洲精品一区二区三区四区五区 | 国产精品186在线观看在线播放 | 中文字幕58页 | 尤物在线免费视频 | 亚洲精品国产主播一区 | www夜片内射视频日韩精品成人 | 天天干天天操天天舔 | 免费成人欧美 | 农村妇女做爰偷拍视频 | 99热在线观看| 日日干视频 | 精品国产乱码久久久久久虫虫 | 欧美成人黑人猛交 | 最近中文字幕免费mv在线视频 | 色拍拍欧美视频在线看 | 92看片淫黄大片欧美看国产片 | 免费a级毛片, | 精品无码成人久久久久久 | 色综合影视 | 成人免费视频观看视频 | 国产日韩欧美视频 | 欧美激情二区三区 | 国产igao为爱做激情在线 | 青青草久草在线 | 国产人与禽zoz0性伦 | 人人看人人舔 | 亚洲6080yy久久无码产自国产 | 91精品国自产拍在线观看不卡 | 国模静欣大尺度激情啪啪 | 久久亚洲精品中文字幕冲田杏梨 | 日韩成人一级片 | 欧美大黑帍在线播放 | 日韩欧美亚洲国产精品字幕久久久 | 东北老女人高潮大叫对白 | 三个男吃我奶头一边一个视频 | 亚洲国产成人aⅴ毛片大全密桃 | www.浪潮av.com| 男人天堂a | 肉体肉体xxx肉体d久久 | 成人一区在线观看 | 日本aaaa级毛片 | 久久色网站 | 另类异族videosex太狠了 | 精品日韩欧美一区二区在线播放 | 制服诱惑一区二区 | 偷偷操不一样 | 国产亚洲精品久久久久的角色 | 亚洲高清色综合 | 日美女网站 | 国产一区二区黑人欧美xxxx | 欧美激情精品久久久久久 | 农村黄a三级三级三级 | 欧美超碰在线观看 | 黄色一级片在线看 | 欧美激情一区二区三区蜜桃视频 | 哺乳援交吃奶在线播放 | 久久99久久99精品免观看粉嫩 | 欧美乱大交做爰xxxⅹ性3 | 中文字幕成人av | 欧美操老女人 | 一级国产黄色片 | 亚洲色www成人永久网址 | 国产成人精品国内自产拍免费看 | 无限看片在线版免费视频大全 | 国产中文字幕网 | 午夜在线视频观看日韩17c | 五月天堂网| 香蕉成人伊视频在线观看 | 国产成人无码a区视频在线观看 | 精品一区二区超碰久久久 | 亚洲一区二区在线播放相泽 | 色8久久 | 亚洲日本精品 | 韩国一区二区av | 欧美综合色区 | 久久精品久久久久久久久久久久久 | 国产精品你懂的 | 草裙社区精品视频播放 | 极品少妇一区二区 | 人人妻人人澡人人爽精品日本 | 国产中文视频 | 国产精品久久久久久久久久辛辛 | 538精品在线视频 | 国产精品99精品久久免费 | 99午夜| 色婷婷亚洲一区二区三区 | 东京热男人av天堂 | 亚洲欧美日韩国产 | 国产人妖乱国产精品人妖 | 亚洲成人精品久久 | 欧美视频一二三区 | 国产欧美亚洲精品第一区软件 | 日韩网站在线 | 成人短视频在线免费观看 | eeuss鲁一区二区三区 | 国产乱配视频免费观看 | 亚洲日韩一区精品射精 | sm调教小sao货叫主人语录 | 牛和人交xxxx欧美 | 鲁鲁久久 | av网在线 | 精国产品一区二区三区a片 日韩av在线观看免费 | 国产在线永久视频 | 日日操夜夜骑 | 色婷婷国产精品 | 久久亚洲综合色 | 欧美激情综合在线 | 亚洲欧洲精品成人久久曰 | 久久婷婷国产麻豆91 | 欧美性猛交7777777 | 国产丰满大乳奶水在线视频 | 粉嫩av一区二区在线观看 | 欧美大片视频在线观看 | 99久久国产露脸精品吞精 | 丰满爆乳一区二区三区 | 国产精品国产三级国产有见不卡 | 欧美亚韩一区二区三区 | 欧美日韩中文在线观看 | 91精品啪在线观看国产手机 | 三级全黄做爰在线观看 | 国产浮力视频 | 国产伦久视频免费观看视频 | 日韩中文网 | 色屁屁草草影院ccyycom | 97夜夜澡人人双人人人喊 | 7777色鬼xxxⅹ欧美色妇 | 激情六月综合 | 精品无码久久久久久久久水蜜桃 | 亚洲第一av网 | 国产又色又爽又黄又免费 | 天天看毛片 | 国产午夜不卡片免费视频 | 一区视频在线免费观看 | 久久久精品国产sm调教 | 天堂中文在线资源 | 韩国久久久久 | 亚洲色图18p | 涩涩爱在线 | 亚洲日本中文字幕天天更新 | 夜夜爽亚洲人成8888 | 青青草视频国产 | 亚洲天堂五月天 | 大陆国语对白国产av片 | 日韩在线视频免费 | 亚洲欧美成人一区二区三区 | 国产高清在线一区 | 亚洲天堂网在线视频 | 乱人伦人妻系列 | 日韩中文久久 | 在线观看人成视频免费 | 久久久久夜夜夜精品国产 | 成人无码视频在线观看网址 | 国产真实乱对白精彩久久小说 | 激情欧美综合 | 亚洲精品www久久久 亚洲精品www久久久久久 | 99热久久这里只有精品 | 亚洲欧美日韩第一页 | 日韩欧美一区二区在线观看 | 欧美xxxx黑人又粗又大 | 乱人伦av| 黄色一级国产 | 影音先锋欧美资源 | 日本成人黄色片 | 超碰免费在线 | 亚洲.www | 国产99在线 | 亚洲 | 亚洲激情综合网 | 婷婷色吧| 久草在线观看福利 | 亚洲艹逼视频 | 污网站免费看 | 99久久精品免费看国产小宝寻花 | 成人毛片区 | 少妇激三级做爰在线观看 | 超碰在线cao | 黄色美女av | 综合网在线 | 日韩av线观看 | 欧美理伦片在线播放 | 亚洲男人av天堂午夜在 | 凉森玲梦一区二区三区av免费 | 日本精品一区二区三区视频 | 国产精品久久久久久久久久久久午夜片 | 中国少妇裸体aaa | 国产自产在线视频 | 亚洲一区二区福利视频 | 一本色道无码道dvd在线观看 | 男女一进一出粗大楱视频 | 国产精品久久久免费观看 | 日韩欧美一区二区三区免费观看 | 天天躁日日躁狠狠躁av中文 | 天堂伊人网 | 日本一级淫片免费啪啪3 | 四虎国产精品免费观看视频优播 | 九色蜜桃臀丨porny丨自拍 | 亚洲成人av中文字幕 | 黄色片久久久久 | 日本精品一区二区在线观看 | 欧美老熟妇乱子 | 40一50一60老女人毛片 | 无码任你躁久久久久久 | 久久精品波多野结衣 | 国产福利在线观看视频 | 成人vagaa免费观看视频 | 欧美性淫爽ww久久久久无 | jyzz中国jizz十八岁免费 | 久久久久人妻一区精品色欧美 | jizz少妇 | 97干在线| 91麻豆精品国产91久久久使用方法 | 四虎4545www精品视频 | 成人18夜夜网深夜福利网 | 日韩视频在线观看一区二区三区 | 中文字幕在线不卡视频 | 亚洲欧美一区二区三区三高潮 | 乌克兰少妇videos高潮 | 少妇扒开双腿自慰出白浆 | 男女操操| 国产精品久久久久久久久大全 | h视频在线看 | 老熟女 露脸 嗷嗷叫 | 午夜成年人 | 全部免费毛片在线播放 | 黑人巨大无码中文字幕无码 | 亚洲欧美日韩一区二区三区在线 | 日韩av一卡二卡 | 少妇高潮一区二区三区99女老板 | 女十八免费毛片视频 | 国产成人久久精品激情 | 麻豆视频观看 | 97在线观看免费 | awww在线天堂bd资源在线 | 91蜜桃婷婷狠狠久久综合9色 | 亚洲精品v日韩精品 | 亚洲色一区二区三区四区 | 亚洲粉嫩高潮的18p 国产精品美女www爽爽爽视频 | 亚洲狠狠爱 | 国产精品点击进入在线影院高清 | 中文无码人妻有码人妻中文字幕 | 91麻豆精品91aⅴ久久久久久 | 久久99网| sm调教美女警花少妇 | 亚洲精品成人无码中文毛片不卡 | 一级持黄录像免费观看 | 男人的天堂a在线 | 韩国三级中文字幕hd浴缸戏 | 一级做a免费视频 | 熟妇高潮精品一区二区三区 | 欧美亚洲黄色 | 亚洲爆乳无码精品aaa片蜜桃 | 成人一级免费视频 | 久久视频在线播放 | 久久国产精品无码网站 | 三级网站免费观看 | 希岛爱理aⅴ在线中文字幕 希岛爱理和黑人中文字幕系列 | 欧美www在线观看 | 在线视频欧美亚洲 | 男人猛躁女人网站 | 精品一区二区三区视频 | 成人免费网站www网站高清 | 午夜一区二区三区四区 | 乌克兰黄色片 | 饥渴的少妇和男按摩师 | 亚洲日韩中文字幕在线播放 | 国产毛片毛片毛片 | 国产亚洲视频在线播放香蕉 | 黄色片在线看 | 五月婷婷丁香久久 | 特黄大片又粗又大又暴 | 国产精品永久免费 | 国产精品久久久久久久久岛 | 国产免费又黄又爽又刺激蜜月al | 国产高清在线精品一区不卡 | 9.1成人看片 | 成人亚洲欧美 | 日本免费观看视频 | 国产成人麻豆精品午夜福利在线 | 国产精品高潮呻吟久久久久久 | 爽天天天天天天天 | 亚洲精品无码专区 | 国产乱子伦精品视频 | 精品区| 国产精品乡下勾搭老头1 | 成年人午夜网站 | 成人毛片视频在线播放 | 欧美一二三四成人免费视频 | 白嫩少妇xxxxx性hd美图 | 日韩欧美高清片 | 一本久道久久综合狠狠爱 | 一区二区三区日韩在线 | 色五月五月丁香亚洲综合网 | h黄动漫日本www免费视频网站 | 激情综合六月 | 日韩在线专区 | 日韩精彩视频在线观看 | 在线观看黄色av | 97欧美 | 日日噜噜噜夜夜爽爽狠狠 | 污污小说在线观看 | 亚州五月| 国产女人与拘做受视频9 | 精品久久久久久 | 日韩在线免费观看av | 国产成人精品三级麻豆 | 国产精品揄拍100视频 | 水蜜桃久久夜色精品一区怎么玩 | 男人的天堂网av | 欧美日视频 | 免费无码又爽又刺激网站 | 永久免费的啪啪网站免费观看 | 大尺度裸体日韩羞羞xxx | 粗壮挺进人妻水蜜桃成熟 | 手机看片福利一区二区三区 | 久久影视一区二区 | 中文字幕日韩欧美一区二区三区 | 青青青视频免费观看 | 亚洲日韩国产av无码无码精品 | 午夜精品一区二区国产 | 久久综合中文字幕 | 国产成人久久婷婷精品流白浆 | 女人抽搐喷水高潮国产精品 | 情侣偷偷看的羞羞视频网站 | 亚洲免费在线观看av | 波多野结衣一区二区三区高清av | www国产亚洲精品久久麻豆 | 国产精品综合一区二区三区 | 亚洲精品国精品久久99热 | 农村老熟妇乱子伦视频 | 人人爽在线 | 99精品网站 | 欧美 日韩 国产 成人 在线 91 | 91精品啪在线观看国产 | 欧美疯狂性受xxxxx另类 | 日本韩国一级淫片a免费 | 国产精品午夜一区二区三区视频 | 欧美视频在线免费看 | 欧美日韩亚洲中文字幕一区二区三区 | 妖精视频在线观看免费 | 欧美在线一二三区 | 国内精品久久久久久久久久清纯 | 无码粉嫩虎白一线天在线观看 | 天天躁日日躁狠狠躁性色av王爷 | 国产男女猛烈无遮挡免费视频网站 | 91欧美亚洲 | 免费无码又爽又刺激聊天app | 久久精品一区二区视频 | 伊人久久免费视频 | 一级做a爰片性色毛片99 | 国产69精品久久久久毛片 | 一区二区视频网站 | av网站国产| 中文日韩在线 | 国产亚洲日韩欧美另类第八页 | 9l视频自拍九色9l视频视频 | 久久国产精品精品国产色婷婷 | 国产精品多久久久久久情趣酒店 | 亚洲区小说区激情区图片区 | 成人午夜av在线 | 忘忧草在线社区www中国中文 | 永久黄网站色视频免费观看w | 国产偷窥熟妇高潮呻吟 | 久久综合一 | 无码成人精品区在线观看 | 天堂资源中文 | 国产视频网站在线观看 | 成人av影视在线观看 | 手机免费看av片 | 国产午夜精品av一区二区麻豆 | 少妇bbbb做爰 | 国产喷白浆一区二区三区 | 久久激情综合 | 色综合天天 | 久久五月天综合 | 9999热视频 | 国产成人精品日本亚洲i8 | 色综合久久88色综合天天免费 | 综合久久给合久久狠狠狠97色 | 天天aaaaxxxx躁日日躁 | 免费在线观看成人av | 情侣偷偷看的羞羞视频网站 | 亚洲国产成人在线视频 | 成人久久久精品国产乱码一区二区 | 青青久久av| 日本亚洲综合 | 日本又色又爽又黄又高潮 | 一级淫片免费看 | 108种啪姿势大全动态图 | 中文字幕日本免费毛片全过程 | 欧美叫娇小xx人1314 | 欧美精品成人影院 | juliaann精品艳妇hd | 久久97精品久久久久久久不卡 | 亚洲成av人片在线观看www | 久久综合精品国产一区二区三区无码 | 免费看一区二区三区四区 | 老湿福利影院 | 亚洲自拍成人 | 久久国产成人午夜av影院 | 少妇性xxxx性开放黄色 | 亚洲国产精品激情在线观看 | 亚洲综合五月 | 香蕉影音 | 日韩欧美理论片 | 四虎黄色网址 | 野外做受又硬又粗又大视频√ | 国产成人精品亚洲线观看 | 香蕉视频色 | 亚洲va在线 | 成人av男人的天堂 | 超碰95在线 | 99精品久久久中文字幕 | av在线播放地址 | 天天干天天看 | √天堂资源在线 | 乌克兰极品少妇ⅴαdeo | 五月婷婷深深爱 | 色妞av永久一区二区国产av开 | 5a级毛片 | 女人被狂躁c到高潮喷水一区二区 | 精品国产乱码久久久久软件 | aa毛片视频| 亚洲成人在线免费观看 | 午夜在线观看影院 | 久久久精品欧美一区二区免费 | 欧美特级特黄aaaaaa在线看 | 久久婷婷激情综合色综合俺也去 | 亚洲视频图片 | 国产精品免费视频网站 | 国产精品久久久久久久久久尿 | 国产欧美一区二区三区免费视频 | 亚洲天堂一区 | 日韩在线你懂的 | 日韩一区二区三区在线免费观看 | 亚洲六月婷婷 | 亚洲经典一区二区三区 | 欧美精品一卡二卡 | 肉丝美足丝袜一区二区三区四 | tube少妇高潮 | 久草福利资源在线 | 欧美成人a∨高清免费观看 欧美成人aa | 色国产精品一区在线观看 | 91丨九色丨蝌蚪丨对白 | 性xxxxx大片做受免费视 | 国产精品日 | 天天综合影院 | 免费精品视频 | 日本在线免费 | 日韩在线你懂的 | 香蕉久草 | 亚洲成人91| 亚洲成a人v欧美综合天堂麻豆 | 成人免费在线小视频 | 91精品国产综合久久久蜜臀九色 | 九九热精品在线视频 | 亚洲不卡视频在线观看 | 国产精品丝袜久久久久久不卡 | 天天操天天弄 | 无码少妇一区二区三区免费 | 国产又白又嫩又紧又爽18p | 人妻少妇被粗大爽.9797pw | 真实的国产乱ⅹxxx66小说 | 欧美激情999 | 亚洲再线 | 69日韩| 永久免费的啪啪网站免费观看 | 欧美黄色片视频 | 中文字幕丝袜第1页 | 国产又色又爽又刺激在线播放 | 色综合久久久久综合体桃花网 | 国产91丝袜 | 欧美一级录像 | 蜜桃成人在线 | 欧美一本 | 香蕉大人久久国产成人av | 视频一区二区三区四区五区 | 亚洲多毛妓女毛茸茸的 | 精品久久久久一区 | 午夜精品一区二区三区在线视频 | 国产精品一区二区精品 | 国产欧美一区二区三区免费 | 国产性色视频 | 日产精品久久久一区二区 | 国产丝袜视频一区二区三区 | 日本中文字幕一区二区有码在线 | 欧美日韩不卡视频合集 | 久精品国产| 日本xxxx裸体xxxx出水 | 国产一极毛片 | 国产在线麻豆精品入口 | 亚洲福利视频一区二区 | 天天躁日日躁狠狠躁一区 | 99精品视频免费热播在线观看 | 在线观看黄色av网站 | 少妇高潮一区二区三区99 | 国产精品爽爽爽爽爽爽在线观看 | 对白刺激国产子与伦 | 亚洲人免费 | 国产天堂视频在线观看 | 日本无遮挡大尺度床戏网站 | 少妇一夜三次一区二区 | 伊人久久久大香线蕉综合直播 | 国产成人精品午夜视频 | 成人在线视频中文字幕 | 国产熟妇久久777777 | 久久超碰99 | 欧美综合自拍亚洲综合图 | 国产乱淫av一区二区三区 | 中文字幕在线网址88第一页 | 东北少妇露脸无套对白 | 国产寡妇亲子伦一区二区三区 | 手机看片日韩日韩 | 小sao货水好多真紧h无码视频 | 国产麻豆精东果冻传媒 | 女女同恋一区二区在线观看 | 国产大尺度做爰床 | 人妻在线日韩免费视频 | 久久精品亚洲中文无东京热 | 97国产精品亚洲精品 | 国产乱妇无码大片在线观看 | 精品五月天| 中文无码久久精品 | 久久久老熟女一区二区三区 | 国产视频一区三区 | 精品国产品香蕉在线 | 正在播放国产精品 | 揉捏奶头高潮呻吟视频 | 久久这里只有精品18 | 男女啪啪毛片 | 亚欧洲精品在线 | 无码国内精品久久人妻 | 亚洲中文字幕久久无码精品 | 成人av综合 | 免费av看片 | 亚洲高清乱码午夜电影网 | 中国丰满熟妇xxxx性 | 性色av免费网站 | 午夜伦视频 | 亚洲乱码国产乱码精品精大量 | 国产youjizz | 成年人激情视频 | 少妇av网| jazzjazz国产精品久久 | 国产精品美女高潮视频 | aa一级片| 撕开少妇奶罩疯狂揉吮 | 日韩精品一区二区三区免费视频观看 | 丁香婷婷久久 | 成人免费看片' | 国产乱码精品1区2区3区 | 麻豆av一区二区三区久久 | 二级特黄绝大片免费视频大片 | 真实乱视频国产免费观看 | 欧美成人家庭影院 | 久草老司机 | 少妇高潮惨叫久久久久电影69 | 岛国av不卡| 亚洲国产成人va在线观看天堂 | 最新午夜综合福利视频 | 一本大道在线一本久道视频 | www成人精品免费网站青椒 | 性做爰免费观看 | 在线免费精品 | 亚洲理伦 | 狠狠躁日日躁夜夜躁影院 | 自慰小少妇毛又多又黑流白浆 | 无遮挡国产 | 亚洲另类一二三区 | 欧美综合视频在线观看 | 国产尤物 | 国产精品日日躁夜夜躁欧美 | 成 人 黄 色 视频播放165 | 亚洲国产成人在线观看 | av大全在线播放 | 伊人福利视频 | 午夜福利国产精品久久 | 精品视频不卡 | 日日干夜夜艹 | 精品国产一区av天美传媒 | 亚洲最大福利视频网 | 国产精品女人久久久 | 天天干夜夜玩 | av中文在线天堂 | 看曰本女人大战黑人视频 | 欧美日韩激情在线 | 国产av一区最新精品 | 国产毛a片啊久久久久久保和丸 | 亚洲精品毛片av | 无码国产精成人午夜视频一区二区 | 亚洲国产精品毛片av不卡在线 | 红杏出墙记免费看 | 99精品免费 | 欧美一级免费在线观看 | 一边添奶一边摸pp爽快视频 | 欧美性开放情侣网站 | 中文字幕丰满孑伦无码精品 | 久久99久久99精品免观看软件 | 日本亲与子乱ay中文 | 久久婷婷国产综合国色天香 | 51人人看| 日本不卡免费新一二三区 | 国产三级av片 | 91精品免费视频 | 亚洲激情小视频 | 欧美精品久久久久久久久久丰满 | 亚洲欧美中文日韩在线v日本 | 午夜激情在线免费观看 | 国产韩国精品一区二区三区 | 97久久精品人人 | 影音先锋在线视频 | 国产精品亚洲一区二区三区喷水 | 国产理论在线 | 99热久 | 成人男女做爰免费视频网老司机 | 两个人做羞羞的视频 | 中文字幕爱爱 | 欧美亚洲三级 | 日本精品在线播放 | 久久人人爽人人片 | 中文精品久久久久人妻不卡 | 99国产精品白浆在线观看免费 | 女人高潮av国产伦理剧 | 亚欧洲精品视频 | 亚洲一区二区福利视频 | 日韩视频中文字幕 | 一本色道久久99精品综合蜜臀 | 亚洲日韩一区二区三区 | 久久波多野结衣 | 国产女人被狂躁到高潮小说 | 无码免费一区二区三区免费播放 | 美女插插视频 | аⅴ天堂中文在线网 | 精品人妻系列无码一区二区三区 | 91porny首页入口 | 国产精品一二三级 | 亚洲欧美在线视频 | 91禁在线看| 8x福利精品第一导航 | 久久av不卡 | 黄色成人av | 成年人黄网站 | 国产精品一区二区免费视频 | 午夜精品福利在线 | 亚洲二三区 | 中文字幕人成无码人妻 | 青青草国产成人av片免费 | 爽欲亲伦97部 | 超碰人体| 久久久久久九九精品久 | 色偷偷人人澡人人爽人人模 | 一级全黄毛片 | 五十路丰满中年熟女中出 | 黄色一区二区三区视频 | 无套内射蜜桃小视频 | 亚洲美女自拍偷拍 | 免费毛儿一区二区十八岁 | 国产伦精品一区 | 国产日产久久高清欧美 | 少妇高潮zzzzzzzy一avhd | 国产精品久久久久久免费免熟 | 日韩一级欧美一级 | 香蕉视频最新网址 | 影音先锋天堂网 | 国产精品毛片久久久久久久 | 忍不住的亲子中文字幕 | 国产免费踩踏调教视频 | 乱人伦视频在线 | 国产精品久久久久久久久久98 | 国产女同玩人妖 | 日韩网红少妇无码视频香港 | 国产精品久久久久久久妇 | 欧美激情一区二区三区在线 | 国产精品久久久久久久久人妻 | 国产美女免费看 | 国产无套粉嫩白浆内谢软件 | 亚洲国产精品激情综合图片 | 久久精品午夜福利 | 永久免费精品视频 | 久久久久久欧美六区 | 欧美深度肠交惨叫 | 一级做a爰片久久毛片潮喷 一级做a爰片欧美激情床 | 久久综合伊人77777蜜臀 | 中文字幕无码人妻aaa片 | 男同志毛片特黄毛片 | 蜜桃臀无码内射一区二区三区 | 欧美成人xxxxx| 国产日韩欧美日韩 | 爱情岛论坛亚洲品质自拍 | 亚洲一卡久久 | 成人欧美一区二区三区动漫 | 日韩av一区二区精品不卡 | 黄色视频毛片 | 亚洲自拍偷拍精品 | h片免费观看 | 国产手机在线精品 | 久热精品在线视频 | 黄色免费网站在线 | 国产免费精彩视频 | 亚洲成人精品在线观看 | 国产精品无码av无码 | 老少交欧美另类 | 国产女人的高潮国语对白 | 粉嫩少妇内射浓精videos | 国产免费网址 | 欧美男人又粗又长又大 | 久久综合丁香 | 最新天堂在线视频 | 伊人网综合视频 | 国产精品久久久久久久久久大牛 | 国产a√精品区二区三区四区 | 久久久精品视频一区二区三区 | 亚洲男人的天堂网站 | 亚洲天堂精品视频 | 播播开心激情网 | 亚洲精品久久久打桩机小说 | ass亚洲熟妇毛耸耸pics | 夜夜草| 视频免费1区二区三区 | 无码尹人久久相蕉无码 | 色噜噜狠狠一区 | 国产一二三区精品 | 欧美性xxxx在线播放 | 国产伦久视频免费观看视频 | 国产福利第一视频 | 国产精品久久久久久久久久iiiii | 国产又大又长又粗 | 爱情岛亚洲品质自拍极速福利网站 | 新呦u视频一区二区 | av黄色免费观看 | 狂野欧美激情性xxxx | 中文字幕一区二区三区四区五区 | 美女啪啪无遮挡 | 怡红院最新网址 | 亚洲欧美日韩专区 | 国产欧美精品国产国产专区 | 91偷拍网 | 日韩国产欧美在线视频 | 国产亚洲第一页 | 懂色av色吟av夜夜嗨 | 国产精品你懂的 | 久久99国产精品视频 | 成人免费视频一区二区 | 91免费网站在线观看 | 久久伊人精品一区二区三区 | 天使萌一区二区三区免费观看 | 91成人精品一区在线播放69 | 国产网站在线看 | 极品气质女神呻吟娇喘91 | 亚洲熟妇无码av在线播放 | 操操久久| 午夜人成免费视频 | 欧美日本国产va高清cabal | 国产露脸ⅹxxxⅹ高清hd | 国产三区精品 | 无人在线观看高清视频 | 99草草国产熟女视频在线 | 丁香婷婷激情五月 | www视频在线观看免费 | 麻豆精品久久久 | 亚洲天堂男人影院 | 成人做爰高潮片免费视频美国 | 国产乱人伦精品一区二区三区 | 性丰满白嫩白嫩的hd124 | 国产精品揄拍一区二区 | 国产东北农村女人av | 偷看洗澡的香港三级 | 日韩二区三区 | 中文字幕在线播放一区二区 | 久草在现 | 女国产精品视频一区二区三区 | 成人午夜激情视频 | 欧美成人一区在线 | 亚洲精品一区二区三区蜜臀 | 黄污视频在线播放 | 日本体内she精高潮 中国无码人妻丰满熟妇啪啪软件 | 国产精品久久久久久白浆 | 人人干在线 | 亚洲精品乱码一区二区三区 | 人人爽人人澡人人高潮 | 免费观看全黄做爰大片国产 | 天天色综合天天色 | 国产真人性做爰久久网站 | 久久亚洲婷婷 | 19禁大尺度做爰无遮挡小说 | www国产| 中文字幕四区 | 欧美视频在线播放 | 香蕉视频在线网站 | 又色又爽又黄的视频软件app | 欧洲女人牲交视频免费 | 亚洲色无码专区一区 | 天天做天天爱夜夜爽毛片 | 国产激情久久久久 | 亚洲 一区二区 在线 | 天天综合网久久 | 国精无码欧精品亚洲一区 | 午夜尤物丰满大乳美女 | 三级福利视频 | 欧美不卡视频一区发布 | 亚洲国产精品国自产拍av秋霞 | 精品久久国产字幕高潮 | 国语自产偷拍精品视频偷拍 | www.夜夜骑 | 成人免费毛片内射美女-百度 | 中文字幕免费在线视频 | 高清18麻豆 | 在线免费观看的av | 国产精品久久精品第一页 | 亚洲天堂男人影院 | 国产精品亚洲欧美在线播放 | 欧美午夜精品理论片 | 精品国产乱码久久久久久1区2区 | 亚洲精品一级片 | 狠狠躁夜夜躁人人爽蜜桃 | 亚洲玖玖玖 | 日韩三级免费观看 | 亚洲色大成网站www久久九 | 久久综合另类激情人妖 | 四虎精品成人免费视频 | 亚洲精品乱码久久久久久久久久久久 | www.啪| 18禁裸乳无遮挡自慰免费动漫 | 九九热免费视频 | 激情五月五月婷婷 | 欧美肥妇bwbwbwbxx | 利智三级露全乳 | 99综合久久| 激情综合色五月丁香六月欧美 | 多p混交群体交乱小说h | 亚洲成人免费网站 | 亚洲一区福利视频 | 91 在线观看| 看三级毛片 | 日本亲子乱子伦xxxx60岁 | 看片日韩 | 亚洲精品乱码久久久久久蜜桃 | 男女啪啪资源 | 中文字幕在线2018 | 欧美专区亚洲专区 | 91国内精品 | 精品国产一区二区三区四区 | 国四虎影2020| 亚洲激情三区 | 日本午夜理伦影片大全 | 亚洲高清毛片一区二区 | 精品成人一区二区三区四区 | 青青久草在线视频 | 精品成人一区二区三区四区 | 国产精品久久久久久超碰 | jizzzz中国| 成年男女免费视频网站 | 欧美少妇一区二区三区 | 欧美20p| 国产精品ⅴ无码大片在线看 | 国产免费av片在线 | 欧美日韩免费在线 | 久久久日韩精品一区二区 | 亚洲精品蜜桃久久久久久 | 国产伦子伦对白在线播放观看 | 国产精品资源网 | 国产亚洲xxxx在线播放 | 国产成人精品一区二区阿娇陈冠希 | 上司人妻互换中文字幕 | 超h高h肉h文教室学长男男视频 | 中文不卡在线 | 女教师淫辱の教室蜜av臀 | 亚洲欧洲免费无码 | 欧美xxxx中国 | 久久亚洲国产成人影院 | 青草成人免费视频 | 人妻少妇精品专区性色av | 伊人开心网 | 无遮挡黄色 | 懂色av粉嫩av蜜乳av | 777精品视频 | 精品久久久久久久久久久久久久久久 | 色翁荡息又大又硬又粗又爽电影 | 午夜国产小视频 | 成人天堂入口网站 | 黄色激情网站 | 99久久精品国产免费 | 色播在线观看 | 丰满少妇弄高潮了www | 人妻少妇中文字幕久久 | 99久久99久国产黄毛片 | 无码av免费一区二区三区 | 国产美女一区二区三区在线观看 | 国产亚洲影院 | 日本少妇寂寞少妇aaa | 丰满人妻妇伦又伦精品国产 | 中文字幕一区二区三区乱码 | 激情欧美在线观看 | 91理论片 | 日本精品人妻无码免费大全 | 黄色大片网 | 日日射日日干 | 日韩精品中文字幕在线 | 亚洲综合激情五月丁香六月 | 成年人免费大片 | 亚洲精品久久久久久久久久久久久久 | 欧美老妇牲交videos | 深夜网站在线 | 日日鲁夜夜如影院 | 一本一本久久a久久精品综合麻豆 | 香港三日本三级少妇66 | 国产精品女同一区二区久久夜 | 夜夜操夜夜操 | 无码av动漫精品一区二区免费 | 可以免费看的av网站 | 中文字幕亚洲乱码 | 欧美精品欧美精品系列 | 久久免费高清视频 | 精品一区二区三人妻视频 | 波多一区二区 | 性色av免费 | 亚洲第一福利网站 | 精品亚洲成a人无码成a在线观看 | 性欧美丰满熟妇xxxx性久久久 | 中文字幕无码色综合网 | 久久天天躁狠狠躁夜夜不卡 | 一级全黄裸体免费观看视频 | 国产精品传媒在线观看 | 尤物视频免费在线观看 | 已婚少妇露脸日出白浆 | 天天揉久久久久亚洲精品 | 久久aaaa片一区二区 | 国产精品久久久久久一区二区三区 | 99riav欧美丰满少妇视频 | 欧美日韩在线高清 | 人妻熟妇乱又伦精品视频 | 国产精品污视频 | 8x福利精品第一导航 | 精品人妻一区二区三区浪潮在线 | 一区二区三区福利 | 中国一级片在线观看 | 国产在线综合视频 | 91香蕉一区二区三区在线观看 | 丁香在线视频 | 一本色综合久久 | 性高湖久久久久久久久aaaaa | 色av综合av综合无码网站 | 亚洲第一影视 | 香蕉影院在线 | 日日碰狠狠躁久久躁 | 亚洲精品www. | 肥白大屁股bbwbbwhd | 狠狠干天天干 | 中文字幕在线观看网址 | 98成人网 | 一本色道久久综合亚洲精品按摩 | 国产精品一区二区久久不卡 | 日本在线 | 中文 | 蜜桃视频插满18在线观看 | 久久久精品国产99久久精品麻追 | 午夜青青草 | 一区二区中文字幕在线 | 少妇高潮大叫好爽 | 一级做a爰片久久毛片a | www.色播 | 吻乳三级视频 | 99年国精产品一二二区传媒 | 免费asmr色诱娇喘呻吟欧美 | 久草在线视频在线观看 | 亚洲资源在线 | 岬奈奈美精品一区二区 | 日韩中文字幕精品视频 | √天堂在线 | a级片一级片 | 欧美性猛交xxxx乱大交极品 | 女人少妇偷看a在线观看 | 国产成人日韩 | 国产一级做a爰片久久毛片男男 | 成年免费视频黄网站zxgk | 激情文学欧美 | 亚洲av毛片基地 | 黄色欧美网站 | 久久精品人人做人人爽 | 一级做a爱片| 色婷婷婷婷 | 黄色的一级片 | 亚洲精品视频一二三区 | 国产一区二区三区影院 | 日韩精品中文在线 | 亚洲天堂avav | 日p免费视频 | 91精品国产乱码久久久久久久久 | 在线视频免费观看一区 | 日本人乱人乱亲乱色视频观看 | 竹菊影视欧美日韩一区二区三区四区五区 | 欧美群妇大交群 | 亚洲久久综合 | 亚洲资源av无码日韩av无码 | 色婷婷激情综合 | 亚洲成av人片在线播放无码 | 欧美成人不卡视频 |