作者：陽陽設(shè)計師
來源：知乎

一、前期調(diào)研

作為設(shè)計團隊，我們知道一個品牌的誕生與發(fā)展，每個公司都投入了巨大的資源和心血。logo設(shè)計就像父母給孩子起名，被企業(yè)寄予了太多的期待與美好的祝愿，它不僅僅是一個圖形一串文字，更代表了企業(yè)的形象和深厚的文化。因此我們在提供設(shè)計方案時，也同樣肩負著品牌價值和品牌責(zé)任傳輸?shù)穆氊?zé)，在接到設(shè)計任務(wù)之后，并不會漫無目的的就開始投入到logo設(shè)計之中。而是要對服務(wù)的公司進行充分系統(tǒng)的調(diào)研。

調(diào)研有助于我們對企業(yè)的文化、核心、價值觀、產(chǎn)品等方面進行全面的了解。根據(jù)企業(yè)客戶的消費行為、喜好，競爭品牌進行分析總結(jié)，有針對性的制定創(chuàng)意和設(shè)計方案，避免與其他品牌“撞臉”。

給大家介紹幾個我經(jīng)常會遇到的研究方法：

1. 用戶采訪

通過對客戶的了解，團隊預(yù)先準(zhǔn)備一些問題，把那些重要的信息進行記錄匯總，這樣可以得到第一手的客戶需求?？蛻羰呛茉敢飧O(shè)計師進行品牌分享的，但是聊天式的采訪往往達不到設(shè)計預(yù)期，因此我們一定要引導(dǎo)客戶進行闡述，一點點把品牌最重要的信息和關(guān)鍵詞梳理出來，這個過程對把握設(shè)計概念十分重要。

2. 領(lǐng)域調(diào)研

很多客戶表示不了解，為啥設(shè)計師可以設(shè)計各個行業(yè)的logo，甚至很多客戶只找做過他們這個行業(yè)設(shè)計的設(shè)計師，其實大可不必這樣，因為一個成熟的設(shè)計團隊，做設(shè)計前都會對這個企業(yè)進行系統(tǒng)的領(lǐng)域研究，況且任何一個團隊也不可能做過所有行業(yè)的設(shè)計。所以我們常常通過調(diào)研系統(tǒng)的了解企業(yè)及其上下游的品牌特征，并對此進行拓展梳理，而設(shè)計語言與方法是相通的，越成熟的設(shè)計師越能進行精準(zhǔn)的設(shè)計。

（如該領(lǐng)域的視覺偏好是什么，對企業(yè)環(huán)境及產(chǎn)品進行實地考察，其他競品的品牌符號有什么共性和區(qū)別，企業(yè)符號可以從哪些視覺方面進行表達等等）

3. 關(guān)鍵詞頭腦風(fēng)暴

以最近給客戶做的一個項目“食品加工器械”的logo設(shè)計為例，針對這個關(guān)鍵詞我們可以想到什么？“機械、科技、食品、高端”等等，根據(jù)這些詞匯，我們再次聯(lián)想，拓展出二級、三級的詞語，最終找出整個思維導(dǎo)圖中最具創(chuàng)新性并符合客戶定位的關(guān)鍵詞。

4. 其他方式

其實可用的方法還有很多，如：實地調(diào)研法、抽樣調(diào)研法、統(tǒng)計調(diào)查法、文獻調(diào)研法等，在這里就不一一列舉了。

俗話說：“知己知彼，百戰(zhàn)不殆”，我們在了解客戶的基本訴求，深度挖掘企業(yè)核心價值與內(nèi)涵之后，才能對企業(yè)進行明確的定位?；诖?，產(chǎn)出最能代表企業(yè)的超級符號。

5. 案例分享

民宿品牌愛彼迎在升級品牌形象時便做了大量的設(shè)計調(diào)研，為了更好的理解與傳達愛彼迎的經(jīng)營理念，設(shè)計工作室Design Studio橫跨4個大洲，往返13個城市，試住了18間房子，并與不同國家的愛彼迎員工進行交流。甚至深入愛彼迎公司內(nèi)部，與工程師、設(shè)計師一同工作，共同交流，只為呈現(xiàn)出更完美的愛彼迎品牌視覺。通過長達數(shù)月的工作，最終完成了這一設(shè)計。

進行了大量調(diào)研，我們才有足夠的話語權(quán)進行創(chuàng)作。我們根據(jù)調(diào)研的結(jié)果，找出最能體現(xiàn)品牌價值的創(chuàng)新點，再開始進入設(shè)計過程。

二、繪制草圖

調(diào)研完成后，為得到最適合的設(shè)計方案，我們常常會使用頭腦風(fēng)暴的方式獲得設(shè)計初稿。在一個集中時間段內(nèi)，將之前的提取的關(guān)鍵詞進行草圖創(chuàng)意繪制，使用圖形打散、重組的手法，將抽象思維用圖形語言表達出來。要求既符合品牌行業(yè)屬性，又具有創(chuàng)新突破的元素。

草圖繪制完成之后，我們會對草圖進行篩選，過濾掉實施性弱、美觀性差、不夠深刻的創(chuàng)意點。挑選出最適合客戶需求的方案進行深入。大量的創(chuàng)意會在這一階段經(jīng)歷打破與重塑，推倒與重來，優(yōu)中選優(yōu)，只為呈現(xiàn)最好的方案。

挑選最優(yōu)方案后，我們才開始進行Logo的下一個階段——成稿制圖，而且會推進幾個可行性較高的方案，這樣在提案時，方便客戶進行選擇。

三、成稿制圖

成稿制圖通常被甲方理解為logo設(shè)計的主要部分，因此會覺得設(shè)計只是做圖，卻忽略了設(shè)計師在前期投入的大量時間和深度思考，還容易給人產(chǎn)生Logo設(shè)計十分簡單的錯覺。我們也經(jīng)常遇到這樣的客戶“logo不就是做個圖么，怎么這么貴？”這個時候，一定要跟客戶進行溝通，讓他們了解到logo設(shè)計的全過程是什么，為什么需要花費大量時間，如果客戶知道你為此付出了這么多的經(jīng)歷，就會得到他們的理解。

實際制圖只是將我們頭腦中的想法表現(xiàn)出來，因此這一步驟僅占設(shè)計過程的十分之一。

四、細節(jié)優(yōu)化與調(diào)整

經(jīng)過之前的努力，到這時，基本設(shè)計方案已經(jīng)完成。這一階段主要針對Logo的細節(jié)、外形、顏色等方面進行調(diào)整。力求設(shè)計感、藝術(shù)感、實用性相統(tǒng)一。

案例分析

我們來看看蘋果公司是如何做的：蘋果公司在Logo設(shè)計時，將圖形定義為一個蘋果。但當(dāng)Logo制作出來以后，圖形的辨識度并不高。為了增強圖形的識別性，避免讓消費者誤認為是“櫻桃”，設(shè)計師決定在Logo圖形上增加更多的趣味性，于是“被咬了一口的蘋果”應(yīng)運而生，可見細節(jié)修改至關(guān)重要。

另外，在基本方案完成的基礎(chǔ)上，設(shè)計師會制定Logo使用規(guī)范，確保Logo在延展應(yīng)用過程中能夠保持高度的品牌辨識度。

以麥當(dāng)勞為例，在品牌升級前，麥當(dāng)勞長久以來并沒有制定一個嚴格統(tǒng)一使用規(guī)范，不同國家地區(qū)的麥當(dāng)勞Logo也并不相同，這對于麥當(dāng)勞塑造品牌形象是非常不利的。

因此，麥當(dāng)勞制定了一系列的標(biāo)志應(yīng)用規(guī)范，此后視覺上，統(tǒng)一規(guī)范的麥當(dāng)勞變得更加具有辨識度。

為使Logo更具形式美，我們會對logo進行視覺優(yōu)化。例如黃金分割比例是我們在這一階段比較常用的手法。

為使Logo設(shè)計更理性、科學(xué)、美觀，我們常常通過黃金分割比例來構(gòu)建Logo。當(dāng)事物之間各部分的比例呈現(xiàn)1:0.618的比例時，最能引起視覺上的美感，這一比例充滿了理性與感性的統(tǒng)一。良好的比例關(guān)系在復(fù)制和傳播的過程中更加方便快捷，也使后期的加工制造過程更加精準(zhǔn)。

以上是我對logo設(shè)計流程的介紹，而這些其實也只是logo設(shè)計過程中的比較重要的步驟，一些具體的設(shè)計細節(jié)會根據(jù)每個不同的方案也會不同和更加深入，這樣大家就明白了，為啥logo設(shè)計這么貴了吧，可不是單單一個圖例制作那么簡單

接下來再給大家分享一些經(jīng)典的Logo設(shè)計案例，一起更加深入的理解那些著名的Logo設(shè)計背后的故事，一定對你有所啟發(fā)～

五、Logo案例分享

1. 百事可樂logo

2006年，百事可樂花費100萬美元升級了logo。當(dāng)品牌視覺手冊發(fā)布之后，甚至有網(wǎng)友調(diào)侃“看完百事的logo設(shè)計，終于明白logo的設(shè)計費為什么這么貴了。”

新的logo圖形不再對稱，字體也去掉邊角變得纖細。與之前相比，現(xiàn)在的Logo更加扁平，便于記憶。

兩條曲線，似是流動的液體，也像是微笑著的人?？蓜e小看這簡單的兩條曲線，弧度細微的變化都會產(chǎn)生不同的效果。百事可樂還加入了幾何角度的思考，通過幾何學(xué)解釋了Logo的原理。

在logo比例關(guān)系的處理上，也融入了對哲學(xué)問題的思考，從古代陰陽五行說到黃金分割比例，最后到地球能量磁場，小小的Logo蘊含了太多。

但是，Logo還存在一些不足之處，如：單色應(yīng)用時缺乏辨識度、需要增加邊框線使用等問題，導(dǎo)致Logo在具體使用時，會有一定的局限性。

2. 蘋果logo

初代的蘋果logo描繪了“坐在樹下看書的牛頓”這樣一副圖案。相比于追求簡約、便于記憶的Logo，這個圖案無疑太過復(fù)雜，在傳播上也有很大的劣勢。可能是意識到了這一點，新logo進行了突破性的改變。

除了圖形上創(chuàng)新之外，顏色上也采用了豐富的彩虹色。它標(biāo)志著第一臺支持彩色電腦的誕生。整個Logo營造出了溫暖、積極的氛圍，為企業(yè)注入了旺盛的生命力。

作為一個科技公司的logo，極具科技感的藍色與邊角處高光、陰影等細節(jié)為Logo營造出了立體感。

在追求極致簡約的時代，純黑的logo更便于識別記憶。

取代經(jīng)典純黑logo的，是具有光澤感的蘋果Logo。與之前相比，Logo圖形更為流暢、水潤。在保持識別性的基礎(chǔ)上，整體造型與材質(zhì)也更加飽滿。

隨著iphone的推出，高光版本Logo被鍍鉻效果所取代。

簡約、易記的logo圖形，也向我們展示了近年標(biāo)志發(fā)展簡約化的設(shè)計趨勢。時至今日，蘋果仍延續(xù)這一Logo。

去年，蘋果公司更是把Logo玩出了花樣，動態(tài)的、靜態(tài)的、豐富的材質(zhì)，讓蘋果logo“多到用不完”。

因此一個好的logo設(shè)計是一定要給logo預(yù)留足夠多的延展空間的

3. 騰訊logo

在成立20周年之際，騰訊更新了logo。仔細觀察字體的筆畫，我們會發(fā)現(xiàn)，Logo整體傾斜了。7度太小、9度太大，傾斜8度的騰訊字體自帶科技感與運動感。

與logo一同發(fā)布的，還有一套定制品牌字體“騰訊字庫”，這套字體包含了中英日文拉丁文多種類別，通過統(tǒng)一的字體，更好的傳達了騰訊的企業(yè)個性，強化了企業(yè)形象的塑造。

由于漢字都是方正的，因此，在漢字的世界中，斜體漢字的概念聞所未聞。由于斜體的漢字很難依靠傳統(tǒng)的字體結(jié)構(gòu)。在文字的正負形、筆畫、空間美感方面，設(shè)計師需要把握平衡與速度之間微妙的制衡。

在字體的筆畫末端進行切角處理。使文字更具力量感與速度感。“騰訊”兩字也做出了細微的調(diào)整，從筆畫、間隔到轉(zhuǎn)角弧度都發(fā)生了變化。

騰訊旗下產(chǎn)品眾多，但風(fēng)格形式都各不相同。“騰訊字庫”有助于這些項目在視覺形象上的統(tǒng)一。

Logo整體顏色也變成了高明度的藍色，這個顏色是與色彩機構(gòu)潘通合作，定制了品牌標(biāo)準(zhǔn)色。藍色取自海洋與天空，蘊含著極致的理性，體現(xiàn)了對技術(shù)精益求精的追求。

來自彩通的國際色彩大師Leatrice Eiseman，也是騰訊藍的開發(fā)者之一介紹道：“它可以非常好的體現(xiàn)出騰訊的原則和哲學(xué)，也就是技術(shù)方面的精益求精對技術(shù)的追求，以及會不斷地去追求新的創(chuàng)新。”

由此，還進行了一系列應(yīng)用部分的延展。

4. 小米logo

小米斥資200萬邀請日本設(shè)計大師原研哉操刀設(shè)計新logo。小米logo剛一發(fā)布，便引起了熱烈的討論，只不過是由方變圓，憑什么值200萬？

 

我們知道，品牌Logo的升級換代，往往要考慮辨識度對品牌的影響。一旦失去了辨識度，相當(dāng)于拋棄了原有幾十年積累的品牌資產(chǎn)，相當(dāng)于重新認識品牌。因此，近年來的品牌重塑，都是在保留了原版Logo的識別性的基礎(chǔ)上，融入了更具價值的品牌理念。

作為設(shè)計行業(yè)的領(lǐng)軍人物。原研哉致力于在設(shè)計中融入東方美學(xué)的概念，將復(fù)雜的事務(wù)化繁為簡。深度理解小米“以科技創(chuàng)造美好生活為使命”的品牌理念后，原研哉提出“探索科技與生命的關(guān)系”融入“ALIVE”的概念，即接近生命的形態(tài)。

Logo中融入最具中國特點的“人情味”，整個logo歷時三年，讓小米的Logo具有了煙火氣息，這也符合小米致力于發(fā)展一種高品質(zhì)、常態(tài)化生活的品牌調(diào)性。

不僅如此，這個外形還運用到一個數(shù)學(xué)公式：|x|^n+|y|^n=1，通過“n”的變化來推算Logo進行由方至圓的演變，經(jīng)過多種對比，最終選擇了當(dāng)n=3時，形成集美感與寓意于一身的Logo圖形，也是最具“ALIVE”內(nèi)涵的代表圖形。

小米logo的英文字體也變得更加靈活圓潤，而“ALIVE”的理念也貫穿了整個視覺系統(tǒng)，不論是產(chǎn)品展示還是品牌宣傳，新Logo都變得更加靈活生動。（視頻）

在沿用橙色作為品牌標(biāo)準(zhǔn)色的基礎(chǔ)上，融入了具有科技感的黑色與銀色作為輔助色，保持識別性的同時也注入了新的活力。

 

5. 麥當(dāng)勞logo

看到這張圖片，第一時間便能聯(lián)想到麥當(dāng)勞，在消費者心中，亮麗的金拱門早就形成了視覺符號。作為一個餐飲品牌，麥當(dāng)勞的視覺設(shè)計也不甘示弱。由于疫情，為鼓勵公眾用餐衛(wèi)生，麥當(dāng)勞將自己的logo一分為二拆分成了兩個分開的門。

 

通過分解Logo的“M”，在品牌延展上，同樣也和其他品牌區(qū)分開來，將logo極致符號化。

明亮積極的“M”提高了麥當(dāng)勞的品牌辨識度，紅黃配色與字母“M”深入人心，哪怕只是局部，也能被一眼認出。這得益于麥當(dāng)勞對于自身品牌的堅持塑造，通過不斷的品牌價值輸出，來影響消費者的心理。

時至今日，麥當(dāng)勞形成了強大的品牌識別符號。簡約的“m”更具記憶點。

 

藍藍設(shè)計(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

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

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

一篇文章補齊你的平面設(shè)計八大構(gòu)成！｜蘭亭妙微UI設(shè)計公司

平面設(shè)計是一門藝術(shù)和科學(xué)的結(jié)合，通過合理運用各種設(shè)計元素和構(gòu)成原則，創(chuàng)造出富有吸引力和有效傳達信息的作品。在平面設(shè)計中，八大構(gòu)成原則被廣泛應(yīng)用，它們是：對比、重復(fù)、對齊、對稱、比例、空白、色彩和排斥。

對比（Contrast）：對比是通過相互之間的區(qū)別來突出一種元素或一個組合的方法。通過使用對比，可以增強圖像的吸引力，并使關(guān)鍵元素更加顯眼。比如使用不同的字體、顏色和大小來營造強烈的對比效果。

2. 重復(fù)（Repetition）：重復(fù)是指在設(shè)計中重復(fù)使用一個或多個元素，以增強整體的統(tǒng)一感和協(xié)調(diào)性。通過重復(fù)使用相似的形狀、顏色或圖案，可以營造出一種重復(fù)的節(jié)奏感，從而使作品更加有序和有力。
   
   

3. 對齊（Alignment）：對齊是將不同的元素或組件置于水平、垂直或?qū)蔷€上，以增強整體的組織性和連貫性。通過合理的對齊，可以使作品的結(jié)構(gòu)更加清晰，并使觀眾的注意力集中在重要的區(qū)域。

4. 對稱（Symmetry）：對稱是指作品的形態(tài)、結(jié)構(gòu)或布局兩側(cè)呈現(xiàn)相似或鏡像關(guān)系。對稱可以給人一種穩(wěn)定和平衡的感覺，它適用于傳達正式、莊重和可靠的信息。
   

5. 比例（Proportion）：比例是指各種元素之間大小和比例的關(guān)系。通過合理的比例，可以使作品達到和諧、舒適和平衡的效果。合理的比例關(guān)系可以通過調(diào)整尺寸、距離和形狀來實現(xiàn)。

6. 空白（Whitespace）：空白是作品中未使用的空間，也被稱為負空間?？瞻卓梢詭椭{(diào)整元素之間的關(guān)系，營造出平衡和穩(wěn)定的效果。合理運用空白可以提高作品的可讀性和可視性，并使重要元素更加突出。

7. 色彩（Color）：色彩是平面設(shè)計中非常重要的一部分，它可以通過情緒、情感和意義來傳達信息。通過選擇適合的色彩方案，可以增強作品的吸引力和表達力。色彩應(yīng)該符合品牌的形象，并與其他設(shè)計元素相互協(xié)調(diào)。

8. 排斥（Hierarchy）：排斥是指通過元素的大小、位置和顏色等方面的差異來創(chuàng)建層次感和視覺引導(dǎo)。通過合理的排斥，可以引導(dǎo)觀眾的目光，使他們更加關(guān)注重要的信息和設(shè)計元素。
   以上八大構(gòu)成原則提供了一個設(shè)計師在平面設(shè)計中創(chuàng)造有吸引力和有效傳達信息的作品的指導(dǎo)。設(shè)計師可以根據(jù)具體情況和目標(biāo)，靈活應(yīng)用這些原則，以實現(xiàn)更好的設(shè)計效果。
   藍藍未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，添加vx藍小助ben_lanlan，報下信息，藍小助會請您入群。同時添加藍小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等，歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
   藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

2個方法幫你從歷史中學(xué)會字體設(shè)計｜蘭亭妙微UI設(shè)計公司

引言：
字體設(shè)計是一門融合藝術(shù)和技術(shù)的復(fù)雜領(lǐng)域，深受歷史的影響。通過深入研究歷史中的字體設(shè)計，我們可以汲取靈感和經(jīng)驗，提升自己的字體設(shè)計能力。本文將介紹兩種方法，幫助您從歷史中學(xué)會字體設(shè)計。

來百度APP暢享高清圖片
一、研究經(jīng)典字體：

1. 深入了解字體的歷史背景：
   了解字體的起源、演變和發(fā)展歷程，可以幫助您理解不同字體背后的文化、時代特征和設(shè)計理念。研究不同歷史時期的經(jīng)典字體，如文藝復(fù)興時期的Garamond字體、18世紀(jì)的Baskerville字體等，可以獲得豐富的設(shè)計靈感。
2. 分析字體的構(gòu)造和特點：
   細致研究字體的構(gòu)造和特點，包括字母間距、筆畫粗細、字形比例和曲線結(jié)構(gòu)等。比較不同字體的細節(jié)差異，探究其設(shè)計目的和美感，有助于提升自己的設(shè)計技巧和審美能力。
3. 進行實踐練習(xí)：
   通過仿制經(jīng)典字體的練習(xí)，可以深入研究字體的細節(jié)和運用。選擇一款您喜愛的經(jīng)典字體，用紙和筆或字體設(shè)計軟件重新繪制它。這個過程中，您將更好地理解字體的結(jié)構(gòu)和設(shè)計原則，并能夠在實踐中掌握相關(guān)技巧。
   
   二、探索地區(qū)文化中的字體設(shè)計：
4. 研究不同地區(qū)的書法傳統(tǒng)：
   不同地區(qū)的書法傳統(tǒng)具有獨特的美感和藝術(shù)特點。通過研究中國的楷書、日本的行書、阿拉伯的庫法字等，您可以了解不同文化對字體設(shè)計的影響，發(fā)現(xiàn)新的設(shè)計元素和風(fēng)格。
5. 掌握當(dāng)?shù)貧v史紀(jì)錄和文獻：
   查閱當(dāng)?shù)貧v史紀(jì)錄和文獻，了解古代的書法作品和印刷品。這些記錄可以幫助您理解當(dāng)時的字體設(shè)計趨勢和審美標(biāo)準(zhǔn)，啟發(fā)您進行相關(guān)的創(chuàng)作。
6. 利用地域標(biāo)志和文化符號：
   探索地區(qū)的標(biāo)志、傳統(tǒng)服飾、建筑風(fēng)格和藝術(shù)作品，尋找與字體設(shè)計相關(guān)的視覺元素。將這些地域符號運用到字體設(shè)計中，可以賦予您的作品獨特的文化內(nèi)涵和地域特色。
   結(jié)論：
   通過研究歷史中的字體設(shè)計，我們可以獲得靈感、豐富設(shè)計技巧，并提升自己的字體設(shè)計能力。通過深入了解經(jīng)典字體和探索地區(qū)文化中的字體設(shè)計，我們可以更好地理解不同的設(shè)計理念和審美標(biāo)準(zhǔn)，并將其應(yīng)用于當(dāng)前的字體設(shè)計中，創(chuàng)造出獨特而受歡迎的作品。不斷學(xué)習(xí)和實踐，將歷史中的經(jīng)驗轉(zhuǎn)化為自己的設(shè)計語言，讓字體設(shè)計更加精妙和富有藝術(shù)性。
   藍藍未來將會持續(xù)在平臺上分享關(guān)于設(shè)計行業(yè)的文章。此外藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，添加vx藍小助ben_lanlan，報下信息，藍小助會請您入群。同時添加藍小助我們將會為您提供優(yōu)秀的設(shè)計案例和設(shè)計素材等，歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
   藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

前言

配圖是我們平時在設(shè)計工作中經(jīng)常用到的，一個好的配圖很多時候會直接影響到一個作品的好壞，圖片本身也是一種視覺語言，通過學(xué)習(xí)跨領(lǐng)域的知識可以幫助我們提升自身所處的領(lǐng)域設(shè)計能力，本篇文章和大家討論一些構(gòu)圖和景別知識，通過對這些知識的了解判斷如何選擇一個好的配圖以及怎么應(yīng)用好配圖，大多數(shù)設(shè)計師選擇配圖時都是憑著主觀意識在選擇配圖，你所選擇的配圖很大程度會受到你的主觀意識的影響，這些主觀意識來源于自身審美、文化、環(huán)境等因素的，因此在我們的主觀意識基礎(chǔ)上，應(yīng)該具備一定的客觀依據(jù)來幫助我們更好的選擇合適的配圖。

構(gòu)圖與景別知識在攝影、繪畫、影視中應(yīng)用很多，但很多設(shè)計師容易忽視這些知識，這些知識看似是攝影、繪畫、影視等行業(yè)的知識與設(shè)計好像沒太大關(guān)系，這些知識也是很有必要學(xué)習(xí)的的理論知識，對構(gòu)圖景別的理解很大程度會影響你能否把握好設(shè)計畫面中的配圖，配圖本身也是一種視覺語言，提升構(gòu)圖和景別知識對設(shè)計師整體綜合實力提升是有幫助的，當(dāng)你做三維和插畫等設(shè)計時同樣也會用到這些知識，了解這些知識會讓你以客觀依據(jù)的角度，運用和判斷設(shè)計中配圖的好與壞。

01 關(guān)于構(gòu)圖

目前來看幾乎所有的藝術(shù)或商業(yè)作品，無論是攝影、繪畫、CG等都離不開畫面的構(gòu)圖與結(jié)構(gòu)，你甚至能在很多繪畫大師的的經(jīng)典作品中看到他們作品中也使用了構(gòu)圖理論，合理的構(gòu)圖作品，給觀眾美的視覺享受和與眾不同的情感體驗，同時提升畫面表現(xiàn)，關(guān)于構(gòu)圖的知識很寬泛，構(gòu)圖方式方法也非常多，有的作品中可能包含多種構(gòu)圖形式，這里給大家大致介紹一些常見的構(gòu)圖知識，目的是拋磚引玉讓大家意識到良好的構(gòu)圖能平衡畫面同時，傳達出更清晰明確的圖像信息。

1.1 中心構(gòu)圖

中心構(gòu)圖是將畫面主體放置在畫面的視覺中心，讓主體成為整個畫面的視覺焦點，通過周圍環(huán)境氛圍烘托畫面主體，這種構(gòu)圖形式聚焦主體，能更好的凸顯畫面主體。

1.2 一點透視

一點透視構(gòu)圖有較強的空間感和縱深感，畫面的元素會向中心聚焦，會把觀眾的視覺引導(dǎo)向畫面中心，比較適合表現(xiàn)畫面空間感。

1.3 黃金法則

黃金法則構(gòu)圖遵循古希臘學(xué)者畢達哥拉斯的黃金分割比例進行構(gòu)圖，也就是我們常說的 0.618:1，黃金法則構(gòu)圖有采用像三分法那樣井字構(gòu)圖，還有采用黃金螺旋的構(gòu)圖方式，構(gòu)圖時將主題放置在黃金比例焦點或線上。

1.4 對角線構(gòu)圖

對角線構(gòu)圖中主體在畫面的對角線位置排列，對角線構(gòu)圖視覺沖擊強，具有動感和不穩(wěn)定性，更使畫面更有趣味和視覺張力。

1.5 三角形構(gòu)圖

主體在畫面中呈三角形狀，正三角形構(gòu)圖畫面更具穩(wěn)定性，反之倒三角形構(gòu)圖會使畫面有緊張感和不穩(wěn)定性。

1.6 字母形構(gòu)圖

字母形構(gòu)圖畫面呈現(xiàn)字母形態(tài)，不同的字母構(gòu)圖會給觀眾帶來不同的視覺感受，S 形構(gòu)圖是一種比較常見的構(gòu)圖形式，S 形構(gòu)圖迂回延伸使畫面產(chǎn)生優(yōu)美、雅致、韻律感。

1.7 引導(dǎo)線構(gòu)圖

引導(dǎo)性構(gòu)圖利用畫面中有形或無形的線，引導(dǎo)觀眾的視覺聚焦到畫面的重點，引線不一定是一條線，它是一種具有引導(dǎo)性的東西，光影、道路、河流等都可以做為引導(dǎo)線，引導(dǎo)性構(gòu)圖視覺表現(xiàn)強，引導(dǎo)觀眾視線突出主體。

1.8 三分構(gòu)圖

三分構(gòu)圖是最常用的構(gòu)圖方法，結(jié)構(gòu)由兩條豎線和兩條橫線構(gòu)成，形成一個井字，也叫井字構(gòu)圖法，在三分構(gòu)圖中主體通常放置在四個交點上或線條上，三分法是比較常見的構(gòu)圖形式，可以在很多攝影和繪畫作品中看到。

1.9 對稱構(gòu)圖

對稱構(gòu)圖是根據(jù)對稱軸，使畫面形成的對稱的構(gòu)圖形式，比較常見的對稱構(gòu)圖上下對稱、左右對稱，對稱構(gòu)圖具有平衡性、穩(wěn)定性、均衡性。

1.10 水平線構(gòu)圖

水平線構(gòu)圖也是比較常見的一種構(gòu)圖，水平線構(gòu)圖通常表現(xiàn)寬廣的場景，地平線、海面、湖面等主題，水平線構(gòu)圖給人寬闊、穩(wěn)定、平靜、舒適的感覺，水平線構(gòu)圖主要是是采用橫畫幅來表現(xiàn)。

1.11 垂直線構(gòu)圖

垂直線構(gòu)圖中主體呈現(xiàn)為垂直的線條，垂直線構(gòu)圖給人高聳、莊嚴、挺拔的感覺，具有較強的視覺張力，錘子線構(gòu)圖常采用豎畫幅來表現(xiàn)。

1.12 十字形構(gòu)圖

十字形構(gòu)圖是水平線和垂直線的組合，十字形構(gòu)圖畫面會給人平穩(wěn)、安全、嚴肅、神秘的感覺。

1.13 夸張透視

夸張透視會以比較特別和夸張的的視角表現(xiàn)畫面和主體，使畫面整體都具有強大的視覺張力和沖擊力。

1.14 虛實對比

虛實對比通過主體和背景的間的虛與實對比，從而突出畫面主體，虛實對比使畫面更有層次和空間感。

1.15 明暗對比

明暗對比通常以暗襯托明，在視覺感受中越暗感覺離我們越遠，越明亮感覺離我們越近，明暗對比對比可以使畫面更有立體感，層次感等，通過畫面中的明暗對比形成的強烈反差，可以凸顯畫面中主體，引導(dǎo)觀眾視線到主體上。

1.16 色彩對比

色彩對比中包含三個要素色相對比、純度對比、明度對比，同時根據(jù)色環(huán)中的色相變化，還可以分為同類色對比、鄰近色對比、對比色對比、互補色對比，色相角度變化越大對比月強烈，通過色彩對比可以突出畫面重點、豐富畫面、提升畫面層次，背景色彩與主體色彩形成對比，能凸顯畫面主體。

1.17 奇數(shù)原則

奇數(shù)原則畫面通常是一個、三個或五個主體，通常不超過七個，超過七個時觀眾會將其視為一個整體，當(dāng)畫面中為主體為奇數(shù)時，在視覺上會比偶數(shù)更和諧、更美觀。

1.18 視覺引導(dǎo)

視覺引導(dǎo)通過畫面內(nèi)容引導(dǎo)用戶視覺，視覺引導(dǎo)形式有很多種，人物或動物直視、運動方向、肢體語言等，都可以引導(dǎo)用戶在觀看畫面時的視線運動。

1.19 大小對比

通過大小對比使主體與周圍元素形成差異化的視覺沖突，同時大小對比中的次要元素還可以作為比例參考，突出主體的大小，強烈的視覺落差增強版面節(jié)奏。

02 關(guān)于景別

裁剪圖片為不同景別的圖片對板式設(shè)計也有很大影響，不同景別的圖片傳達的視覺語言也是不同的，哪怕是圖片朝向的位置都值得我們仔細思考，在配圖時我們要思考通過圖片傳達什么視覺信息給觀眾，所以在我們做設(shè)計時，要想清楚當(dāng)前頁面要傳達什么樣的信息從而采用什么樣的景別。

2.1 大遠景

大遠景通常表現(xiàn)廣闊氣勢宏偉的場景，大遠景的空間感非常強，強化景物與環(huán)境的關(guān)系，主體相對較小與場景形成強烈的大小對比。

2.2 遠景

遠景營造主體與場景的關(guān)系，通過畫面場景敘述主體和場景的關(guān)系，遠景具有較強的空間感，具有開闊的畫面場景。

2.3 全景

全景通過場景來體現(xiàn)主體的處境，利用人物和場景的關(guān)系強化主題，全景中主體會被強化形成明顯的內(nèi)容中心，從而弱化場景。

2.4 中景

中景表現(xiàn)主要表現(xiàn)人物膝蓋以上，在中景中人物在畫面中的占比更大更為突出，人物會被強化，同時弱化場景。

2.5 近景

近景主要表現(xiàn)人物胸部以上，畫面中人物或主體會占有主導(dǎo)地位，強調(diào)人物的情感特征，通過細微人物的動作、肢體語言、表情等表現(xiàn)畫面主題。

2.6 特寫

特寫主要表現(xiàn)人物肩部以上或主體的細微部分，主體被放大，場景弱化到難以分辨，強調(diào)主體的情感、心理或產(chǎn)品的工藝結(jié)構(gòu)等。

2.7 大特寫

大特寫會將主題放的更大，展現(xiàn)主體的局部細節(jié)，大特寫具有強調(diào)和突出主體細節(jié)特征的作用，具有極強的視覺效果。

寫在最后

配圖知識是設(shè)計師在平時工作或設(shè)計練習(xí)中必備知識，很多時候我們在選擇配圖時完全是憑感覺在選，圖片也是一種視覺語言，作品整體質(zhì)量也會受到配圖的影響，本次配圖知識分享希望能幫助大家在之后選擇設(shè)計配圖時，在主觀意識判斷的基礎(chǔ)上有一個客觀的依據(jù)，寫這篇文章的同時，我也正好根據(jù)文章大綱做了一套板式練習(xí)作為文章配圖，最后給大家分享幾個高質(zhì)量的圖片網(wǎng)站（需要翻墻）

圖片網(wǎng)站分享

攝影類圖片
https://unsplash.com/
https://burst.shopify.com/

CG類圖片
https://www.deviantart.com/
https://wallhaven.cc/

作者：Tomato76      來源：站酷



藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 



藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

1-線上圖片的四大類別

2-線上圖片常見的五種處理方式

3-線上圖片使用的五大要點

4-總結(jié)

一、線上圖片的四大類別

1、 信息圖片：

在頁面中單獨存在的圖片，以圖片為主要元素傳達給用戶有效信息。

例如好好住APP，它在“看圖板塊”中就使用了信息圖片，重點表現(xiàn)圖片的信息，周圍無任何干擾元素或輔助信息元素。

2、 背景圖片：

背景圖片可以用于單個元素，也可以用于整體畫面，主要作用于營造氛圍。

單個元素：例如嘀嗒出行的“優(yōu)惠券板塊”，把插畫圖片應(yīng)用在單個卡片中。

整體畫面：例如網(wǎng)易云音樂的“聽歌頁面”，它就把歌曲封面的圖片作為頁面整體的背景。（圖片進行了模糊處理）

3、 Banner圖：

作為導(dǎo)航入口，引導(dǎo)用戶點擊進入詳情頁面，在各應(yīng)用都普遍使用。

Banner圖作為最常見的圖片使用形式之一，大家再熟悉不過了，它可以出現(xiàn)在APP中的各個界面中，如：首頁、個人中心、運營活動頁等等，造作新家APP的首頁就用到了banner圖。

4、 信息配圖：

作為文字的輔助元素，圖片的含義需要和文字相符合才能更好地輔助傳達文字的意思，反之會讓用戶覺得困惑。

二、線上圖片常見的五種處理方式

1、圖片遮照：

1-1黑色遮照：

圖片與文字之間加黑色到透明度（10-60%）的遮罩，保證文字內(nèi)容區(qū)域在黑色區(qū)域，目的是為了能讓用戶看清文字。

1-2顏色遮照：

根據(jù)圖片整體的色調(diào)，在圖片上加與圖片色調(diào)統(tǒng)一的顏色遮照，保證文字的可識別性，不影響圖片的正常顯示。 

1-3漸變遮照：

圖片與文字之間加透明度的漸變遮罩，讓文字顯得更加清晰，使畫面過度更加協(xié)調(diào)。

2、背景模糊：

在很多場景下我們都會采用到封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會在背景上加一個深色半透明蒙層。半透明層可以取黑色、深灰色、背景顏色（深），透明度為（25%-40%），它們呈現(xiàn)出來的效果都各有不同，我們可以根據(jù)不同的場景選擇不同的方案。

3、圖片圓角：

圖片圓角的使用也是十分有講究，根據(jù)不同的產(chǎn)品屬性去設(shè)定氣質(zhì)相符的圓角設(shè)計。

小圓角或直角：視覺印象是硬朗、高冷、具有攻擊性的，多用于時尚、高端、沖突感強烈的設(shè)計中；

大圓角：視覺映像是有親和力，柔軟，安全的，多用于母嬰產(chǎn)品、二次元產(chǎn)品、娛樂性強的設(shè)計中。

4、內(nèi)容出界：

在設(shè)計banner圖時我們?nèi)绻皇窃诳蚩蚶镒鲈O(shè)計，有時候未免顯得太呆板，我們可以突破畫框讓內(nèi)容溢出，營造更大的氛圍，近而使整個畫面更具有沖擊力。

 5、投影

圖片投影的方式一共分為7大類別，分別為：普通投影、等高線投影、矢量投影、圖層模糊投影、多層投影、移軸模糊投影、手動投影。（投影制作步驟可查看我之前發(fā)布的文章《七種投影詳細解析》）。而在線上運用的最多的就是：普通投影、等高線投影、圖片模糊投影，效果如下：

三、線上圖片使用的五大要點

1、文件大小

對于位圖，我們在線上場景中最常使用的文件格式無非是PNG與JPEG（在特殊情況下會用到動畫GIF）。

PNG圖片：

無損文件格式，我們UI設(shè)計師出圖的首選，不會輕易造成細節(jié)像素模糊或輸出文件變色的情況，并且支持alpha通道（透明度）。所以對于高質(zhì)量圖像文件建議輸出為PNG格式，不過正因為像素?zé)o損，所以PNG文件大小相對較大，在特定情況下可以選擇8位處理的做法來減小文件大小，在保證盡可能縮小文件大小的同時，也不會降低圖像質(zhì)量。

JPEG圖片：

JPEG格式會損失掉圖片中的一些像素細節(jié)，所以輸出JPEG通常會比輸出PNG的文件大小更小，適用于對于圖片質(zhì)量要求不過高的場景。并且JPEG格式支持對文件質(zhì)量進行二次壓縮，我們可以選擇使用JPEG格式質(zhì)量壓縮的方式，在文件大小和圖像質(zhì)量之間找到平衡。

2、比例

UI界面中常用的圖片比例是1:1、3:2、4:3、16:9。

1:1

1:1是傳統(tǒng)的120膠片畫幅，也叫大畫幅，因為相機結(jié)構(gòu)和其他一些原因?qū)е铝四z片是方形的，此比例更容易將構(gòu)圖規(guī)整的簡單，能突出主體圖片，通常用于頭像、電商圖片等。

3:2

3:2這個尺寸源于135膠卷的比例，采用這一比例并不是因為它是黃金比例，而是由相機的像場大小決定的，這個尺寸運用到線上時適用于以內(nèi)容為主的應(yīng)用。

4:3

4:3是隨著攝影的發(fā)展，微單的出現(xiàn)而誕生的，3:2尺寸與4:3尺寸極為相似，在做設(shè)計時很容易混淆，不過在同屏顯示中，4:3的圖片內(nèi)容顯示略大于3:2，所以4:3尺寸更適用于以圖片為主或圖片與內(nèi)容比重相同的應(yīng)用。

16:9

16:9是根據(jù)人體工程學(xué)的研究，發(fā)現(xiàn)人的兩只眼睛視野范圍是一個長寬比例為16:9的長方形，所以電視、顯示器行業(yè)根據(jù)這個的黃金比例尺寸設(shè)計產(chǎn)品。這個尺寸的圖片在線上運用于視頻播放的圖片顯示。

3、柵格系統(tǒng)

柵格系統(tǒng)以規(guī)則的網(wǎng)絡(luò)陣列來指導(dǎo)和規(guī)范版面布局以及信息分布，而UI設(shè)計里常用的柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展起來，柵格系統(tǒng)有時候也稱為網(wǎng)格系統(tǒng)。

柵格系統(tǒng)在圖片的排版布局、尺寸設(shè)定方面給了設(shè)計者直觀的參考，它讓圖片變得有規(guī)律，從而減少了設(shè)計決策成本，使整個畫面更加具有條理，讓內(nèi)容的可讀性變高。

移動端常用的柵格系統(tǒng)最小單位為4px（@1x）或3px（@1x），那么我們來看看airbnb是如何用3px（@1x）的柵格系統(tǒng)來確認banner的尺寸大?。╯ketch軟件-顯示-布局，就可以打開柵格系統(tǒng)布局面板）：

如上圖，airbnb的柵格系統(tǒng)布局設(shè)置總寬為328px（總寬為中間6列+4個間距寬度），偏置為24px（左側(cè)初始偏置像素），列數(shù)為6（一共分為6列），列寬45px（列數(shù)的寬度），間距寬度為12px（當(dāng)不能除正數(shù)時，會自動把間距縮小1px，所以會看到有些間距為11px，有些間距為12px）

當(dāng)設(shè)定好柵格系統(tǒng)后，我們就可以很好的得出圖片的寬度：158px（45+11+45+12+45）。再根據(jù)圖片比例的尺寸3:2，我們就可以算出圖片的高度為：106px（158*3x2），所以圖片的像素為：158px X 106px。根據(jù)相同的方法，我們可以用柵格系統(tǒng)+尺寸比例得出更多的尺寸大小。（注：不管是3px或4px柵格，都會出現(xiàn)除不整的情況，如上圖中的11px，這個不用擔(dān)心，不影響大局。）

4、倍率

在對banner圖進行輸出時要考慮倍率的大小，每個產(chǎn)品會根據(jù)產(chǎn)品的特性來決策輸出的倍率，有些產(chǎn)品用二倍圖輸出，有些產(chǎn)品用3倍圖輸出，各有利弊。

標(biāo)準(zhǔn)分辨率的顯示器具有1：1的像素密度（即@1x），其中一個像素占位一個點。高分辨率顯示器具有更高的像素密度， 2倍或3倍的比例系數(shù)（即@2x、@3x）。當(dāng)1倍的位圖放在2倍或3倍的尺寸下時，就會出現(xiàn)圖片損傷現(xiàn)象（失真），那么我們到底該用幾倍圖去制作banner圖呢？

方案一：兩倍圖輸出

優(yōu)點：導(dǎo)出文件比@3x小，可平衡圖片質(zhì)量和線上文件大小的一個優(yōu)質(zhì)方案。

缺點：雖然@2x可向下適配@1x，但適配@3x放大后圖片會微微模糊，所以我們?nèi)绻聾2x導(dǎo)出圖片，那么banner內(nèi)的文字不能過小或過于密集、粗曠，畫面中也不能出現(xiàn)過多的效果，不然會看出明顯的模糊痕跡（如下圖的頂部文字與按鈕文字放大后就有明顯的模糊痕跡）

方案二：三倍圖輸出

優(yōu)點：@3x可向下適配@1x與@2x，能夠很好的保證不同尺寸下的圖片質(zhì)量，對視覺要求高的項目就必須用3倍圖來設(shè)計。

缺點：輸出的文件相對較大。

5、圖片適配

圖片的適配類型非常多，對于不同的布局適配場景我們選擇的適配方案也不同，圖片適配一共分為3大類：智能適配、設(shè)計師制圖適配、用戶裁剪適配。

1、智能適配：

簡單來說智能適配是指通過后臺代碼的約束對上傳的圖片進行智能匹配，匹配內(nèi)容包含圖片大小、圖片尺寸以及圖片的展現(xiàn)方式。

圖片大小：可以限制上傳圖片的最大尺寸。

圖片尺寸：可以限制圖片的長（寬）最小值，也可以限制圖片的精準(zhǔn)尺寸。

圖片展現(xiàn)方式：可以設(shè)定圖片在容器中的呈現(xiàn)方式，下面是最常見的8個圖片呈現(xiàn)方式。

*智能適配之Feed流圖片適配

當(dāng)你無法保證用戶發(fā)幾張圖片，無法預(yù)估圖片的比例時，我們就可以去設(shè)定它相應(yīng)的規(guī)則使之適配。

*1、單張布局：

不管用戶上傳幾張圖片，F(xiàn)eed流中以一張大圖進行展現(xiàn)，使用大圖布局的圖片適配方式一般有兩種，一種是給予圖片一個容器大小，讓其內(nèi)容全部展示；另一種是按照圖片的上傳比例而變化。

*1-1給予容器大小

我們可以給予圖片一個容器尺寸（如：300X300px），無論圖片有多大都不能超過此容器，為了讓圖片內(nèi)容全部展示出來且不變形，我們可以讓圖片保持正比例縮放，使長邊能完全顯示出來（左上或中心區(qū)域）。這一類的適配更偏向于以內(nèi)容為主的產(chǎn)品，下面是常用的兩種適配方案：

*1-2隨圖片比例而變化

如果你想保證圖片最佳的大圖預(yù)覽效果，那么就可以采用隨圖片比例而變化的方案，當(dāng)用戶上傳不同比例的圖片時，圖片展示的高度與寬度會根據(jù)我們提供比例縮放。采用該適配方式能將圖片信息表達完善，圖片占用空間大，適合圖片質(zhì)量高，這一類的適配更偏向于以圖片為主的應(yīng)用。

要做這類適配時我們首先要設(shè)定裁切的比例，裁剪比例一般設(shè)置為常用的圖片比例 1:1、4:3、3:2、16:9。我們上傳的圖片可以根據(jù)圖片的比例進行自行匹配。當(dāng)圖片越接近正方形則選擇1:1，當(dāng)圖片長寬比例越大則選擇16:9。

用戶上傳的很多圖片并不是標(biāo)準(zhǔn)比例，如果存在多余像素，那么可以采用保持圖片正比縮放，從圖片中心區(qū)域展示，根據(jù)比例一共可以分為7種展現(xiàn)方式：

我們可以看到上圖，根據(jù)不同比例的尺寸展現(xiàn)出來的頁面占比也是不同的，如果產(chǎn)品對頁面承載信息量有較高要求，那么可以去除16:9、3:2、4:3的縱向尺寸。

*2、瀑布流：

瀑布流的圖片適配方法需要規(guī)定圖片比例，并且每個比例的容器大小是固定的，呈現(xiàn)方式也是保持圖片正比縮放，從圖片中心區(qū)域展示。

*3、宮格：

宮格式布局簡單來說就是有規(guī)律的方形布局(1:1尺寸)，宮格布局的形式多種多樣可以是九宮格、四宮格、三宮格，下面以較為復(fù)雜的九宮格的適配為例，當(dāng)然最好的參考或者最常見的就是微信朋友圈。

2、設(shè)計師制圖適配

對于特殊頁面的圖片展示，我們?yōu)榱顺尸F(xiàn)最好的視覺效果，需要設(shè)計師對圖片進行單獨尺寸的適配設(shè)計，并且輸出多個尺寸的圖片進行上傳。

例如在適配開屏頁時就對其進行了單獨的制圖適配，想要讓二倍圖適配三倍圖，最簡單的方法就是把畫面的上下區(qū)域留出更多的空間，中心畫面放大10%，可操作按鈕放置畫面安全區(qū)域：

如果設(shè)計師不進行制圖適配，把適配交給程序處理，那么最終呈現(xiàn)的圖片就會顯得非常糟糕。如下圖1的強行適配，使得整個banner比例非常不協(xié)調(diào)，讓人看了后覺得十分廉價；下圖2則稍微好一點，雖然保證了畫面的視覺中心，但是整體畫面看起來過于飽滿，沒有任何呼吸感，并且“點擊參與”按鈕過于靠下，容易與home指示器造成誤操作。

3、用戶裁剪適配

當(dāng)用戶想要呈現(xiàn)某些重要信息或識別性信息時，就可以把主動權(quán)交給用戶，讓用戶進行自行裁剪，如頭像、身份證信息。用戶上傳圖片后，我們可以給用戶設(shè)定一個默認裁剪區(qū)域，當(dāng)用戶不想進行繁瑣時可以直接默認系統(tǒng)裁剪，如上傳頭像，我們可以把默認區(qū)域設(shè)置為圖片的中心區(qū)域。

小紅書在選擇頭像時默認裁剪區(qū)域是圖片的中心區(qū)域1:1圓形，并且圖片是短邊顯示，無論什么比例的圖片都能全部展示在選區(qū)內(nèi)，當(dāng)你想要把圖片脫離到選區(qū)外，系統(tǒng)會自動使圖片彈回。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清，選區(qū)外圖片模糊，選擇狀態(tài)則是選區(qū)內(nèi)圖片高清，選區(qū)外圖片黑色不透明遮罩（高透明度）。

微信在選擇頭像時默認裁剪區(qū)域是圖片的中心區(qū)域1:1正方形，圖片一樣是短邊顯示，也不能讓圖片脫離到選區(qū)外，但是能拖動并放大縮小選區(qū)框。未選擇狀態(tài)是選區(qū)內(nèi)圖片高清，選區(qū)外圖片有黑色不透明遮罩，選擇狀態(tài)則是圖片內(nèi)容全部高清呈現(xiàn)。

作者：黑獅力   來源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司