本文做設計探討交流分享，不涉及商業，如有不足多多指教。 其中的優秀案例、插圖部分來自站酷、花瓣和百度（詳情請查看原鏈接）僅供參考學習。
本文從“視覺專題設計簡述”也就是視覺專題設計的基礎理論、“專題設計思維養成”就是總結一些常用的設計前期思維方向如何找到和“案例參考”三個部分構成。
首先是視覺專題設計簡述：
大家有知道”視覺傳達藝術設計“專業吧，這個作為大學藝術設計專業中的一種（Visual Communication Design）是為傳播特定事物通過可視形式的主動行為。大部分或者部分依賴視覺，并且以標識、排版、繪畫、平面設計、插畫、色彩及電子設備等二度空間的影像表現。總之就是針對眼睛可以看到的具備美學影響的設計符號，稱之為“視覺傳達”。
視覺設計的領域很廣，總的大致分為7種，所以印象中視覺傳達專業的同學會的都挺多?。?！哈哈哈
字體設計、標志設計、 插圖設計 ，這三種就是字面意思，大家也常接觸就不做文字說明。
而下面這幾種，我用括號內的文字做區分說明。
編排設計（文字、圖像、圖形、廣告招貼、書籍等編排設計）
廣告設計（主題、創意、語言文字、形象、襯托等要素組合進行平面藝術創意的一種設計）
包裝設計（綜合運用自然科學和美學知識，為在商品流通進行的包裝造型、結構、裝潢設計）
展示設計（主體為商品，在既定的時間和空間范圍內，對展示空間的創作過程）
當視覺設計前面加兩個字，“視覺專題設計”，這個就是將視覺設計加了限制條件，是針對產品某個主題活動，以特定風格傳遞產品想要表達的信息，為提高產品轉化率，達到流量、曝光、口碑收益的運營設計。
如果說需求方讓你只是做一個視覺設計，那么他們的需求就是為了能夠準確傳達信息，有些童鞋做設計過于自嗨，沉浸自己的設計風格中，沒有get到需求方一個簡簡單單的想法，他們只是想要傳達信息，所以給出合適的信息展示就能完成，而設計圖片的美感只是錦上添花，你說他們的審美不過關，也能否先反思一下自己的設計圖是否能讓別人不思考就看懂。如果他們要求是一個專題設計，這是為品牌服務，最后落腳點是品牌，那他們需要的就不僅僅是個美感、信息傳遞、突出符合產品自身的調性，以及帶來流量的設計才是他們想要的目標。
因此想要做好一個視覺專題，不妨倒推一下整個專題設計的目標：
流量增長（當今最具價值證明，數據說話）
曝光增加（好的壞的，只要有，就有熱度，就有話題，區別同類的“臉盲”）
口碑更好（毫無疑問對品牌屬于積極正面的影響）
帶來收益（前三條都是為這條準備，收益才是王）
所以當我們產出一個設計任務時，可以從以下4個不同層次的設計把控點來，反思調整自己的作品：
首先，基礎層級是傳遞出準確的信息，也就是這個信息是能被人識別讀懂（如果一個視覺專題設計產出除了設計師本人能看懂，其余人不明所以，那么只能說明這個設計夠“藝術”不夠“過關”）；
其次，高一點的層級就是除了能準確傳遞正確的信息以外還能包含一定的信息量，說明這個設計傳達出不止是一點有效信息；
再來就是“視覺效果來源于匹配程度”，意思是看完這個設計我能夠聯想或者關聯到一些和他相關的信息事物，證明此設計傳達出了準確有效的信息還能讓所有信息，規律的結合，成為觀看者聯想起過往瀏覽過事物與之匹配的事物；
最高一層就是視覺與信息的唯一匹配，這也就是我以后看到這個設計就只會想起某個特定品牌， （例：看到少了一塊的蘋果圖片
，一定會想到“喬布斯的蘋果公司、他的手機等”；看到
一定會想到“騰訊公司的QQ企鵝”）
市場固定資源有限，想要瓜分到一口蛋糕， 現在每個企業都需要一定的專題設計來提升自己品牌的影響力，借機造勢，作為企業形象與美譽度的提升突破口，結合各種銷售玩法達到目標。
企業發展的不同階段對專題設計的要求也是不同，起初需要一個視覺符號來代表，讓大眾記住公司，這也是初期階段受美學影響，各個公司和企業都想要注冊商標；隨著時間變遷企業的發展和轉型需要，誕生了一批品牌符號，也就是我們常說的IP形象、文創、動漫、虛擬智能人工等等，這些是受營銷思維主導催生的視覺設計產業鏈；最后能扛住時間檢驗，并且讓自己的企業視覺設計做到極致，成為為社會文化審美的標桿，推動風格潮流的風向，就成為了一種特定的文化符號，這是所有企業向往的方向，也是最難成就的頂端。當我們能在制作自己的專題設計時，包含企業所想，那么你一定是個格局大家！
接下來是講述思維養成的一些方法：
拆解需求——了解清楚現在的事實、目前商業需求的背景，收集通常這樣的需求在市場上的視覺風格，分析定量現狀和定型現狀，從而推導出商業假設，得出用戶體驗目標，反復推敲找出設計發力點。
定量屬性是指以數量形式存在著的屬性，并因此可以對其進行測量。測量的結果用一個具體的量（稱為單位）和一個數的乘積來表示。以物理量為例，距離、質量、時間等都是定量屬性。
定性是指通過非量化的手段來探究事物的本質。其概念與定量相對應。
定性的手段可以包括觀測、實驗和分析等，以此來考察研究對象是否具有這種或那種屬性或特征以及它們之間是否有關系。
定性研究是與定量研究相對的概念，也稱質化研究，是社會科學領域的一種基本研究范式，也是科學研究的重要步驟和方法之一。
如果說定量研究解決“是什么”的問題，那么定性研究解決的就是“為什么”的問題。
專題設計一般分為三類：活動、信息、組合；確定好自己的設計類型，
活動類專題設計——時效性強整體活動時間短、活動類主體利益針對人群、設計調性喜慶，通常大紅色，
為了達到想要的商業回饋，爭取利益點，主要信息簡單明了；
信息類專題設計——活動周期可循環、活動類主體利益是產品、設計調性多數貼合品牌性質，為了
穩固原有商業形象、讓品質再次提升，拉近與用戶的距離，多數采用品牌的ip或者文藝的插畫來凸顯溫馨；
舉例為“京東618”和“face u”、“支付寶 花唄”、“飛豬旅行”各有特色
信息組合類的專題設計——活動周期可長可短，也沒有特定的時效性，既包含活動類的特點，也包含信息類的特點。它的定量現狀和定性現狀都可用不同場景區分。從舉例就可看出，
“阿里巴巴云棲大會”、“成都國際設計論壇”、“臺北燈光節”、“海信發布會” 主視覺海報——
思維方式2是分析構思：
團隊的小伙伴一起頭腦風暴，發散思維寫出與主題相關的，盡可能的多寫，然后再根據意向分類，提取出自己關鍵詞匯，結合詞匯在腦海產生的視覺元素，整合篩選定好方向
方向定好后，我們就要選取如何通過創意與表現，來實現專題設計讓人記住。
常見的創意方法，通過流行的表現風格做視覺呈現，如三維立體、手繪插畫、賽博朋克等；
通過獨特風格、操作難度高、技術含量大的表現手法做視覺呈現，如手工塑造、超寫實還原、概念模擬等；
通過具有情感化設計的圖文做視覺呈現，圖文具有強有力共性（例如“杜蕾斯文案”、“江小白酒情懷”堪稱文案絕絕子······）通過動畫實現等等····
而表現從淺至深就是，引導——刺激——價值
?
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：YiVi_eleven
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
首先，我們怎么去理解在作品集版面中的“精致度”。我覺得可以將其轉化為“質感”，“細節”，“細膩”這樣的詞匯。其實“精致度”不足這個問題大部分同學也是能有所感知的，只是不知道哪里出了問題，也就無從下手。當然還有一小部分同學，可能并不覺得自己有什么問題，也無法體會修改前后的差別，這樣的同學，我建議你平時應該多看一些優秀的設計作品，多沉淀一下，這樣的方式對你幫助更大。
很多同學經常把“精致度”理解為形式感不夠，或者是不夠酷炫，這么理解是不準確的。這就好像一個產品，它的精致和它的外觀設計并沒有什么直接聯系，而是更多的取決于這個產品的做工和材質。做工體現在接縫的處理，邊角的打磨等等，而材質決定了其質感的好壞。那么同理，版面的“精致度”實際上和你的設計感也是沒有直接聯系。那么從哪些方面體現版面中的“精致度”呢？我結合自己的經驗總結了以下幾個方面：
1.舒適的間距。一個合適的，讓人舒適的間距特別重要。無論是文字與的，或者說認為不重要的事情?；靵y的，不統一的，不舒適的間距會讓版面變的排布變的無章，這就好像一個產品各個部件的拼接接縫大小不一，會導致“精致度”下降。
2.大小比例。版面中所有元素的互相之間，以及相對于整個版面的大小比例問題。這個也是非常重要的一個體現“精致度”的地方。所有內容都過于傻大粗，無疑會讓版面看起來非常粗糙。
3.層次感。層次感實際上是一個非常好的提升質感從而體現出“精致感”的手段。缺乏層次感的版面會顯得非常的寡淡，以及在內容較多時可能會在視覺上造成較亂的感覺。那么如何提升層次感，主要是靠對比的強弱。比如：深與淺，粗與細，大與小，疏與密等等。
4.字體。選擇一個精致好看的字體，對版面的精致度有一定的提升，不過還是要注意，字體的與版面之間的大小比例要注意。
5.配圖。配圖的質量也一定程度上影響了版面的精致度。無論是你自己做的圖，比如分析圖，效果圖等，還是你網上找的圖，如參考圖等，都很大程度上決定了你這一頁的精致度。
通過以上幾點的提升，我相信你的版面“精致度”一定會有較為顯著的提升，而版面效果也會看上去更為高級。不過這里還是要再次提醒，精致度和設計感是兩回事兒，如果只有精致度，而設計感較差，那也是不行的。希望本期的內容對你的版面有所幫助。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
生活在地球上的我們，每時每刻其實都在感受著重力的存在。除了物理層面的影響，重力是否會改變我們對于視覺畫面的認知呢？又或者說，物理學中經常聽到的重力概念，和設計中的構圖、排版又存在著怎樣的關聯呢？
我們或許能夠從格式塔學派對認知心理學的研究里，尋找到一些蛛絲馬跡。
人們的大腦總是會去腦補眼前看到的事物。就像我們看到的這三個被遮擋住的圓形圖案，位于中心的倒三角雖然沒有實際出現，但我們確實認為它是存在的對吧。
視覺本身是很容易被周圍環境影響的，就像我們現在看到的這個畫面。如果忽略掉空間和透視的話，你還會覺得右側的豎線更高嗎？
而實際上的情況是，左邊的豎線高度要遠遠高于右邊的豎線高度。
再看這個例子，兩側位于中央的白色球形，它們之間，誰看起來更大，誰又看起來更小？也許有的朋友會說左邊更大，這個答案是沒錯的，但它也僅僅是看起來更大而已。
如果我們在畫面中拉出兩條輔助線，我們就會發現，原本右邊看起來更小的圓球，要比左邊的圓球更大。
通過剛剛的幾個小測試，相信大家已經對于用眼睛的判斷能力有了一些認識了，是不是有一種眼見不一定為實的感覺？視覺重力原則，其實就是建立在這樣的認知基礎之上的。我們大腦所認為的重心或平衡感，和真實的情況，往往并不相同。
在做版式設計的時候，我們的構圖越接近重心的平穩狀態，就越會激發和諧的美感。因為重力在自然界中是再平常不過的現象了，生活在這樣環境中的我們，自然也會有這種審美上的傾向了。
我們來看這個例子，這張紙最穩定的位置在哪里呢？答案是它的正中心。
我們把信息添加在頁面的中心位置，現在它看起來更平穩了嗎？然而并沒有，可問題出在哪？一定是我們沒有把文字擺正吧？上方的區域（a），看起來要比下方的區域（b）面積更大一些，真的是這樣么？
可實際上，文字確實是在頁面的正中心位置上了，這同樣我們的眼睛在作怪。
所以為了抵消視覺上的這種墜落感，我們需要將文字略微向上移動，這樣我們看這段文字才是真正居中的。
正向
我們再舉個例子，這是一個數字 8，我們來仔細觀察一下它的造型，頂部與底部的負空間看起來是一樣大的對嗎？
垂直翻轉
而事實上并不是這樣的，通過將它倒置，我們就會更明顯的看出來，其實為了抵消人眼的錯覺，我們在做字的時候，需要將上面做的更小，底部做的更大一些。
這是兩個完全等大的黑色圓形，但它在視覺上其實并不是平衡的，人們的眼睛會覺得右邊更輕，這雖然沒有頂部和底部那么明顯，但也確實存在。那么解決的方法就是將左邊的圓形略微縮小一些，現在這個頁面看起來平衡多了。我們總是會下意識的認為左側要更重要些。
? 畫作：The Creation of Adam
看這幅畫，很明顯左側的內容要比右側更少，可如果我們將它鏡像翻轉過來，它原版的平衡感就會被打破了。人們更多會認為左邊看起來更重了。
同樣的，在我們的漢字設計中，也會應用這種做法，比如林字的兩個木字旁，就并不是左右等大的，因為這樣在視覺上會顯得不平衡。所以需要將左側的偏旁削弱，才會在視覺上看起來更加和諧。
具有左右結構的漢字，基本上都遵循了這個原則。形成了左收右放的構成樣式。
漢字“田”的中心十字筆畫，為了看起來是居中的感覺，實際上也特地微調了文字的重心部分。利用輔助線，我們會更容易察覺到這其中的變化?？梢钥吹剑瑱M筆部分，向上移動了很多。豎筆部分也相應向左做了位置上的調整。
人們常說，細節決定成敗。也正是這些不起眼的細節，拉開了專業平面設計和業余設計師之間的距離。相信看到這里的小伙伴們，應該已經領略到了視覺重力原則在設計中的重要地位了。那么光知道有這么一回事兒可不行，我們更應該去了解它的特點，以及嘗試著去掌握它。
我們看到的所有圖像，無論抽象的還是具象的，其實都是具有重量感的。那么都有哪些因素會影響到視覺重力的大小呢？找到視覺重心之后，我們又要怎樣去利用它們？接下來我們就一起去尋找相應的答案。
色彩對視覺重量有影響嗎？我們看畫面中的這兩個圖形，是不是很明顯感覺到右邊更重呢？黃色的色相本身的視覺明度就要比藍色更淺，所以我們會感覺到右邊更重。
為了抵消顏色對視覺重量的影響，我們需要降低藍色的面積，這樣才能讓兩個圖形看起來是平衡的。
那么換成具象的物體呢？道理其實也是一樣的。我們依然可以把它們看成是純粹的色彩。經過這一步分析，我們是不是發現了左側紅色的蘋果，顯然會更深和更重呢？
所以，為了保持左右的平衡感，我們也需要把紅色相應的縮小一些。
我們看這兩個圖形，它們誰更重？左側的八邊形，它的頁面邊緣更復雜，角度變化也更多，所以承載了更多的信息量，相比正方形更簡潔的造型來說，左側會更重。
那么換成大小相同的秤砣和棉花呢？誰更重？幾乎沒懸念了，棉花完敗。當具象的物體出現時，結合以往的視覺經驗后，誰更重誰更輕也就很顯而易見了。
對齊也需要考慮到視覺重力嗎？如果你也有這種疑問的話，接著往下看。這是兩個馬克杯，它們雖然造型類似，但是色彩卻不同。很顯然藍色的版本會更重，而在位置上更靠近左邊，也就顯得更重了。
所以，為了抵消這種重量上的輕微不平穩，我們可以把顏色更淺的橙色放到左側的位置上。這樣雖然色彩上橙色更輕，可由于它的位置更重要，也就不會給人不平穩的感覺了。
那么構圖基本確定之后，我們為這兩個杯子搭配上一段文案信息。這樣兩個商品的展示也就做完了。你發現這兩個組合出現什么問題了嗎？當文字信息加入到頁面之后，是不是覺得哪里不對呢？
電腦是看不懂圖像的，所以用到對齊命令時，它們會圍繞著像素的邊緣去做對齊?？蓡栴}在于，并不是所有圖片的視覺重心都剛好在方框的中間位置。
所以我們要去修改的地方，也正是這個視覺重心的對齊位置?，F在再看這兩個組合，是不是感覺和諧了很多。
當西文和漢字相互組合時，需不需要考慮到視覺重心的對齊呢？我們看，如果僅僅是依據邊緣進行對齊的話，就會讓西文部分看上去很小。而正確的做法是需要我們忽略掉一些文字邊緣的。
分別找到兩組文字的視覺大小。只有這樣，才能讓兩組文字在視覺面積上達到相同的重量。當然，文字字重部分也是需要做出相應匹配。我們看，經過調整后，中西文的搭配明顯要更加平穩了。
但也是有例外的，比如這個例子，明明是按照之前的調整方式，僅僅是更換了文字的內容。為什么它看上去依然沒有對齊呢？這里的問題其實出現在西文部分，有些單詞組合，字母并沒有占據下伸部的空間。所以在整體上，就會顯得有高低的錯落感。
這種情況，當然就需要重新去匹配了。解決方法依然是對齊文字之間的視覺重心部分。所以，方法并不是死記硬背的。我們需要根據不同的情況去做出有針對性的調整。
接下來我們來做一個包裝的案例。它是一個螃蟹口味的海鮮調味料。首先，我們選擇這個手繪的螃蟹作為這個畫面中的視覺焦點，把它放在版面的中心位置。經過前面的學習，我們知道了，選擇對齊元素時，我們要忽略掉那些細枝末節的部分，才能找到真正的視覺中心位置。
找到了視覺重心后，我們把它安排到頁面真正的中央部位。頂部和底部的空間，我們就繼續調整其他的信息。首先從層級上來說，在頁面頂部我們需要一個相對第二大面積的文字組合。
而其余的元素，圍繞著底部的負空間去排列就可以了，到這里這個包裝也就做完了。
無論是版式設計，還是繪畫攝影，構圖從來都是一個講究的事情。想要做一版在視覺上平穩的版面，最簡單的辦法，就是把主體固定在頁面的中心位置。可是這種對稱的設計，由于太過完美，也多少會給人一種單調和乏味的印象。那么有沒有一種既讓頁面保持平衡，又能在結構上做出變化的設計方法呢？這就引出了我們接下來的內容了。
這個案例，屬于網頁中會出現的廣告頁面。首先，如果我想要讓版面達到平衡狀態，就需要把主體的重心安排在頁面的中央位置。
但是，為了讓頁面中加入更多信息，我們也不得不讓主體向頁面的一端靠攏，從而預留出足夠的空間。
可這樣就導致了頁面的不平衡，左側的文字重量并不能平衡整個版面。
其實，解決的辦法也很簡單，我們可以試著將主體略微移向頁面的中心部分。這樣一來，就實現了一種動態的平衡狀態。
這背后的知識其實很簡單，就是最基本的杠桿原理。如果天平兩端并不平衡，那就讓更重那個的靠近中心，更輕的遠離中心。這樣也就恢復到平衡狀態了。
這同樣是一個網頁中會出現的廣告頁面。我們看，它都出現了哪些問題。版面中所有的元素都集中到了頂部，這就導致了頁面底部重量過輕，頂部重量過重的極端對比。也就是我們俗稱的頭重腳輕。那么經過調整之后問題依然存在。過多的空白，會讓人們感覺這個版面作品沒有完成。所有的重量都集中到了版面的左側，這依然是一個極端的構圖。
正確的做法應該是怎樣的呢？我們可以將重量最大的元素安排在中心位置。并且讓其他元素以對稱的樣式排布。
當然，你也可以將信息放大，和原本的圖像進行一個疊壓組合，形成一個更重更大的整體。
又或者，采用頂部圖像，底部文字的做法，讓頁面中的重量分配均等。
反過來也是一樣的，頂部安排文字，底部安排圖像。
再或者，我們可以將信息安排在頁面的左側，形成左字右圖的配置。這樣的構成，有助于人們第一眼發現你想傳達的信息。
而反過來呢？圖像就成為了更重要的那個。人們會先看到圖，然后緊接著去閱讀相應的文字信息。
到這里，我們分別從細節的刻畫，再到元素的重心對齊；又從視覺重心的動態調整，一直講解到了宏觀頁面的構建思路。我們可以看到，視覺重力原則幾乎滲透了整個設計流程。很多時候我們其實并不缺乏理論知識的武裝，可一到自己實際動手，就馬上繳槍投降了。矛盾點還是出在對理論知識點靈活運用上，接下來我就帶著大家再做幾個案例。
打算做一套大米的包裝設計。產品的名字就叫高山巖米。它長什么樣子呢，就像我們現在看到的這樣，類似葡萄干一樣，和我們平時見到的大米顏色是有一些區別的，據說營養價值很高，也被譽為米中黃金。
我想利用圖形的切割來表現這個巖米的部分。同時，在輔助一個篆書結構的山字，以這樣的圖形來體現這個主題內容。并且，我也希望這個大米的部分是鏤空的，能夠透過它看到真實的米。
主視覺的刻畫差不多后，接下來我把它放到包裝上，并且將其他信息也一并加入到版面里。不過這樣一來，信息和主視覺相互疊壓，對于內容來說可能會有些相互干擾了。所以我們來試著編排一下。到這里，好像出現了我們前面提到過的問題了，那就是，整個布局顯得頭重腳輕了。
接下來再試著調整一下?，F在我們把底部和頂部的空間都占據了，同時也預留出了三分之一的留白，這該不會有什么問題了吧。相信看到這里的小伙伴應該都能看出問題了，那就是這樣的配置確實有些左重右輕了。留白可以有，但絕對不是這樣做的。
除了我們之前提到的上圖下字，或者是左圖右字之外。我們當然也可以綜合的應用它們。我們現在這個構成，其實就是一種全包圍的結構。
又或者，將一部分內容放在底部，而主要去刻畫上方的文本樣式。這就形成了類似半包圍的結構。
如果說之前的版本是上下樣式的半包圍構成的話。那么接下來的這個構圖，就是融合了重心動態布局的左右樣式半包圍構成了。
當我們不知道怎樣去安排版式構成時，視覺重力原則就成為了一個很好的參考依據。
我們再做一版活動海報。畫面中出現的各種電器，都是經過退底處理的。這樣的處理，能夠讓它們毫無違和感的出現在同一個頁面中。
在頁面的部分，我加入了這個活動的具體內容。展覽的主題叫《模塊世界展》，是著名設計師迪特拉姆斯的個人展覽。
拿到這樣的內容時，最保險的做法就是讓頂部的圖片成為一個更大的組合。上圖下字，很平穩，也很保守。
我們可以看到，圖片部分，我盡量將它們還原成了現實中它們本來的比例關系。
或許，我們也可以再換一種思路，相對的更突破一些。將圖片通過顏色劃分成組。我們能夠看到，其中有全黑的，也有彩色的，更有白色的。
除了像剛剛的堆積到角落，我們也可以把圖片組合規劃成對角線的樣式，在這樣的形式下，版面構圖依然是平衡的。
我們當然也能讓圖片組合劃分成一個更大的組合，以及一個更小的組合。
又或者，打亂圖片的順序，完全依據視覺重心去匹配其中的位置關系。
最終，我決定從展覽的主題中尋找突破口，以“錯位”的手法去呼應“模塊化”這個概念。不僅僅是文字部分的錯位和拆解，圖片部分也通過硬邊的投影，形成了一種嵌套于版面中的視覺印象。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：研習社
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天我要和大家介紹的這位設計師，他在業內被譽為是“信息可視化設計”領域的天花板。一提到信息可視化這么高大上的詞，相信大家都多少有些了解，在日益復雜的信息交流活動中，將信息圖表化已經是一名設計所必須掌握的技能之一了。
舉些常見的例子，比如在公共場合中，我們看到的交通標志，以及用來顯示地理位置的地圖、將時間具象化的時刻表等等，這些數據都以某種圖形化的形式呈現在我們周圍。
而信息可視化領域也不僅僅是將簡單的數據繪制成圖表那么簡單，比如要弄清楚社會中隱藏著的各種問題，從而促進新觀點的提出和對問題解決的思考。這種并不以信息為主導，而是著重于根據創建者的主題來選擇要傳達的信息，并尋求接收者的主動解釋。
而我們今天要介紹的這位設計大神就是這個領域的專家
△ 中野豪雄 TAKEO NAKANO 圖形設計師
1977 年出生于東京都。武藏野美術大學畢業，師從著名設計師勝井三雄。2005 年設立中野設計事務所。以信息的構造化和上下文的可視化為主題，在各種領域探索圖形設計的可能性。日本 typographic 年鑒大獎賽，同最佳作品，造書裝幀比賽經濟產業大臣獎等獲獎。入選世界海報三年展和拉哈蒂國際海報雙年展等。作為邀請作家參加了國際泰晤士報雙年展“首爾 2011”。文藝博物館永久收藏。武藏野美術大學、多摩美術大學教授。
咱們先來看看中野老師平時的作品都長什么樣吧！
是不是很厲害！但說實話，這種信息的密度，工作量絕對是巨大的！而在一些訪談中，中野老師也明確指出，自己更傾向于采用更宏觀的視角去做設計，因為這樣不僅能夠達到傳達目標，同時也由于對比的存在，進而產生嶄新的視角。
圖中我們現在看到的信息可視化海報，是 graphic trial 2015 的一次展覽。老師一共設計了五張 B1 大小的凸版印刷海報。內容是關于地震的四年時間里，哪些話題被人們報道直到事件完結，然后回歸到日常生活中。以及在大數據為主的信息社會中，思考有關制作印刷物的意義。
人們在地震發生時，所接受到的信息，就像圖中展示的這樣，是從喧囂到日?；耐埔坪脱葑?，老師會考慮到，促進這個過程的因素和推動力是否能夠被可視化。從當代語言推動社會發展的角度去考察，想象著是否能將這個語言本身地圖話。從而建立起一個提供人們思考的平臺，這也是平面設計能否引發輿論爭議的關鍵。
首先我們從信息收集的角度來向大家講解，這張圖是國立情報研究所的北本先生制作的數據圖，搜索關鍵詞是“受災地”。圖中折線展示的是，受災四年間，相關詞被搜索的高峰和頻率。
接下來我們來看這張語言地圖是如何被延展出來的，常規情況下，我們形容時間的話，當然會使用線性的橫向時間軸。而中野老師的解決辦法，是將時間軸以環形的方式呈現，并且將起點與終點之間的差異可視化。
五張海報，分別從受災后第一個月、半年后、一年后、兩年后以及四年后展開。呈現出由遠到近的視角變化，第一張海報中，展示的是受災后 31 天內的變化，逐漸到最后一樣，受災后 1460 天時，人們對于這個事件的關注轉變。
老師從北本先生那里得到的數據，大概可以劃分成四個種類，分別是時間、主題的力度、語言關鍵詞頻繁出現的次數以及與東日本大地震的關聯度。時間就是剛剛提到的，以環形角度的方式呈現。話題的力度越高，就會離中心越近，反之就越遠。頻率則是按照關鍵詞出現的數量，以圓的大小來呈現。另外也通過顏色來區分與地震話題相關的詞語。
△ 一個月，六個月，一年，兩年，四年
最終就呈現出了這樣的畫面，首先這個項目是單人項目，所以合成這樣圖的工作量是非常巨大的，過程當中老師也請到了一些研究者對這個項目進行一些幫助。整個海報的重量據說非常重，拿起來大約有二十四千克。
如果使用常規的四色印刷的話，也就需要利用青品黃黑去合成不同的顏色。不過這樣最終的效果并不理想。
于是老師選擇了專色印制，也就是每一種顏色都單獨去印制一版。單獨印制一張海報，就需要反復印刷 16 版。
其中的黑色，也就是全部 16 版疊壓到一塊的效果，可以說是黑中之黑了。當然這個黑色也是有所比喻的，也就是龐大的信息是無法單獨存在的，當所有信息混在一起，才能比對出彼此的聯系。
第一張圖展示的是災害發生時的第一個月，畫面中展示了很多的圓圈，大部分都發生在外圓，也就是說當時各種各樣的搜索關鍵詞，與災害相關聯，被搜索的頻率非常高。在色彩的區分中，我們也能感受到相當強大的熱度。
這是兩年后的情況，也就是說圓的一半就是一年，左半邊就是第二年，可以很直觀的看到，前半年使用的暖色是比較多的，當來到了后半年時，話題熱度逐漸冷卻的樣子。
來到第四年的時候，也就是圓的四分之一是一年。右半邊展示的是過去來年的樣子，而左半邊就是又過了兩年之后的樣子。整個圖標展示的是起點“311”大地震動開始的日期，直到截止四年后的 3 月 11 日。
可以看到暖色的部分逐漸變得零星起來。為什么會有這樣比較有規律的分布呢，那是因為暖色出現的位置都是所謂的紀念日，也就是人們會想起那次事件的日期。
比如其中煙花這個詞，就是從災難過后才開始頻繁出現的，它代表了人們對于災難的一種寄托，人們期盼著生活能夠回歸正軌。
這樣的可視化設計，意義在于人們能夠通過它，俯瞰全局，通過使用宏觀的視野來連接新的視角，讓人們意識到它們沒有注意到的觀點。各個詞語，會根據時間軸的變化與聯動，起到喚醒記憶的作用。通過這個設計作品投影人們過去的經歷。
它是從整體到部分之間的一種信息差異。就圖的整體視角來看，它表示了“人們遺忘的節奏”，進而對遺忘進行批判。另外從圖的部分視角出發，它表示了“記憶的意外發現”包含了對回憶的期待。
看到這是不是覺得中野老師很厲害呢。那么接下來，咱們再來看看他的成長經歷
成為一名設計師的契機有很多，比如父母是設計師，或者是有看過一部激動人心的電影海報，想要成為一名從業人員?？芍幸袄蠋熯x擇設計這個專業時卻完全不是這樣的。
他選擇的了一種極度理性的方法，逐一排除自己不喜歡的東西。
但這種做法本身就很難，最終中野猶豫著要不要選擇美術專業。始終沒有鼓足勇氣的他，還是向附近的預備校老師請教了這個事情。
聽了中野的情況后，老師的評價是，他覺得中野很適合平面設計這個專業，還問他要不要試試呢？
因此在報考志愿里，中野寫下了武藏野美術大學和多摩美術大學。如果按照主角光環的劇本，這個時候，中野老師應該就已經平步青云，從此走上人生巔峰了。
然而現實卻是，在第一次考試中，他卻落榜了。作為“差生”的他，周圍都是什么樣的人呢？插畫、攝影甚至編程，這樣的擁有特殊技能的人幾乎占據了大多數。在這樣的環境里，中野老師當時卻并沒有什么特別的特長，對于不善于表達的他，在當時感到很無奈。
那時的他一直在問自己。我的特長是什么？我的興趣點是什么？有次散步的機會，他終于得到了靈感。那就是雖然自己沒辦法做出特別厲害的作品，但踏踏實實的繪制圖形卻是可行的。
當意識到了這一點之后，于是在一次研究宋體（明朝體）的過程中，就產生了做一本書去記錄這段悠久歷史的想法。他想通過探索歷史的過程，去尋找屬于自己的興趣點。
當從宏觀角度看待一段歷史的進程，通過推演，人們總能或多或少看到未來的一些可能性。通過研究書籍的過去，會發現最初的書籍形態起源與泥板，也就是說，從人類發展初期就存在了書的概念。
就是這樣一步步的研究，信息的宏觀樣貌，如果從宏觀的視角來看待的話，會發現人們通常能夠了解到的信息其實并不多，當從更高的維度看到相同的事件時，是能夠展現出事物本質的。所以在之后做視覺圖表作品時，中野就開始有意識的展現從整體到局部之間的相互對照。
我們接下來一起看看中野老師還有哪些精彩的作品吧！
以信息結構和文章脈絡的可視化設計為主題，探索各個領域中平面設計的可能性。
△ 這是中野老師從 2012 年到 2013 年期間，為建筑雜志設計的封面，因為是月刊，所以在兩年時間里，一共做了 24 本。
雜志的內容主要和災害相關，比如第一版，是關于日本東北地區的一些內容、第二本是關于海嘯的內容，除此之外，還有關于建筑產業、能源、以及關于福島災難重建等問題。
每本雜志都有各自的特征，數據來源主要由政府以及大學中的一些數據研究者們提供。當接收到這些信息之后，中野老師需要甄別哪些內容是需要保留的，哪些是需要刪減的。在這個過程中，不斷的思考”怎樣才能將這些數據清晰的傳達給讀者”這類問題。
這個展覽是 2018 的時候，中野老師在印刷博物館策劃的一個天文學與印刷的展覽 。主要展覽的是 15 世紀到 18 世紀的書籍和印刷物。希望能夠以全新的視角，向大家展現天文學與印刷之間的關系。畫面中左上角的同心圓，是哥白尼提出的太陽中心說，從此人們開始以全新的視野觀察這個世界。
這是這個展覽的宣傳單頁，博物館的宣傳單頁通常都是 A4 尺寸的，最初老師設計了八張相同的傳單頁面。
隨后最終通過局部特寫的方式，構建出了八種不同的傳單樣式。如果全部收集完全，可以拼接成完成了一個大畫面。
從天文學和印刷術之間的關系開始發展聯想，結合了天文學，哲學、數學等等一些學科，統一展現出了宇宙的這個概念。老師分別從三個角度思考這個問題，分別是“秩序”“整合”“規格”。
如果把文字去掉，我們會看到這樣一張插圖，我們來分析一下為什么需要做成這個樣子。
這里的橫軸代表著時間，豎軸代表著規模，畫面頂部展現的是關于宇宙的圖像，而下方主要以人的視角，展現了地球的圖像。學術本身是建立在各種各樣的理論之上，前人建立起的理論，可能會被后來者推翻重建，逐步形成了我們今天的天文學。
這個展覽中會展示各種各樣的宇宙學理論體系，通過各種各樣的宇宙論，去展現這個世界的演變。讓人們隨著時間的進程，在各種學術體系中了解了文明的變遷，通過圖像讓觀賞者提前在腦海中呈現出視覺化的內容。也就是說，我們從看到這個宣傳畫面的那一刻起，這個展覽的內容就已經開始了。
這個展會的名字叫《改變世界的信息》，畫面長度有 12 米左右，這個畫面是展會的入口處。從數據我們可以看到，受到貧困和災難的人群，占據著百分之七十的人群。
中野老師針對這一點，將世界各個地區以及不同的國家，把其受災的程度和數據都集中到了一塊。分別是水資源、糧食、能源、醫療、住房、交通、識字率、通訊等問題。一共有一百多個國家。
通過這個圖，我們會發現這其中每一個問題都是相互牽制，相互影響的。比如說水的問題就和所有的內容都有關系。整個圖標并非是想要解決某些問題，而是希望人們在看到它們時，能夠從中發現到一些問題。
通過人們的議論，去碰撞出全新的思考。由此可以知道，圖表設計其實是對社會非常有幫助的設計領域。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：花瓣 作者：研習社
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
但是，究竟如何才能結合網頁/產品特色和用戶的真實需求， 將頁面視覺內容層級化， 從而提供更加優質的用戶體驗，實現與用戶的互動， 最終促成產品購買呢？下面小編就結合最新且具有極佳視覺層次感的網頁設計實例分析和介紹視覺內容組織技巧，以及在原型化這些網頁設計的過程中（結合小編最愛的一款又快又簡單的原型工具Mockplus）需要注意的原型設計技巧：
1.利用界面元素尺寸大小建立層級結構
界面元素（例如文字，圖片或形狀等）尺寸越大，越突出，越容易吸引用戶的注意。所以，在具體的網頁界面設計中，設計師可以通過有梯度的尺寸變化，創建頁面信息的層級關系。當然內容重要性上，也應該是與尺寸大小成正比的（即越大越重要）。
如圖，利用文字的尺寸大小，體現網頁信息的層級。
注意：尺寸大小也要控制在用戶能夠接受的范圍內
太大，能夠展示的內容有限。太小，易讀性差，也會比較繁雜。
原型設計技巧：
在利用Mockplus (一款具有豐富組件庫和圖標庫的原型工具)創建網頁原型時，絕大部分的組件都是可以簡單通過寬高屬性或拖拉邊框兩種方式調整其尺寸，輕松創建直觀的層次結構。
如圖，Mockplus允許用戶簡單通過寬高屬性或拖拉邊框的方式調整組件尺寸大小。
2.利用界面元素明暗，陰影以及透明度的不同，體現簡單層級
如白底黑字般，同類元素，同一色彩，不同的明暗，陰影以及透明度，也可體現簡單的層級關系。當然，在沒有過多顏色的參與下，不同文字，圖片等多種的頁面元素結合透明度，陰影以及明暗，也可使整款設計極具簡約風和層次感。（點擊鏈接更多的簡約風網頁設計技巧）
如圖，文字明暗，結合尺寸變化，讓頁面層級更加清晰簡約：
原型設計技巧：
而在這一方面，小編發現Mockplus提供了專門透明度屬性，可以根據層級設計需求，修改屬性數值進行設置。
如若，需要添加元素陰影，也可輕松通過組件的重疊實現。
如圖，“圖片”與“形狀”組件的組合，實現陰影的添加。
3.利用色彩，劃分頁面層級
色彩，作為設計師最常使用的視覺層次工具，也為他們創建極富層級感的網頁設計發揮著舉足輕重的作用。而具體的設計技巧，大家可以參考以下幾點：
首先，色彩明亮的頁面元素更容易從相對柔和的元素中脫穎而出。如圖：
如圖，明亮的紅色和黃色更易從相對較柔和的粉色背景中脫穎而出。
而且，某些色彩，尤其是某些主題配色方案的選擇，對于確定網頁的整體基調，吸引用戶注意，作用也非常明顯。例如，藍色，一般代表平靜祥和，適合一些日常事物管理類軟件選擇。而紅色，則代表熱情喜氣，適合一些節日相關購物促銷類軟件選擇。
如圖，利用紅色突出網頁促銷信息。
其次，色彩飽和度的梯度變化，也可體現直觀而豐富的層次結構。
同一色彩，飽和度的梯度變化，也可幫助展現網站元素的層次結構。如圖：
最后，色彩模塊，對于體現界面元素的邏輯關系，作用也是顯而易見
存在同一邏輯關系的各個頁面元素就近放置在同一色彩模塊，可以讓頁面組織結構更加清晰，易于用戶快速查看相關內容。
如圖，利用色彩模塊，更直觀地劃分功能區。
原型設計技巧：
而這一方面，Mockplus提供了非常強大的色彩選擇器，設計師們可以簡單點擊實現色彩的選擇和添加。其色彩收藏功能，也為以后復用和保持整款設計配色的一致性提供了可能。
當然，結合“形狀”組件，為頁面添加豐富的功能色塊，以及添加“鼠標懸停時”或“點擊時”的簡單色彩交互狀態，也不是難事。
如圖，添加色塊劃分界面功能結構。
4.利用頁面布局，展現網頁層級結構
頁面布局也是設計師們常用的視覺工具之一。一方面，同一網站，內部各個頁面可以根據軟件或產品展示內容需求，采用多樣的布局模式，增加頁面的多變性和可讀性。另一方面，也可直接在不同頁面采用重復的頁面布局，方便幫助用戶形成一定的閱讀習慣，快速有效的查詢需要的信息。
而具體單個頁面的布局模式，大家可以嘗試以下的方式實現：
*利用網格劃分不同頁面模塊
網格是公認的劃分頁面功能模塊的工具之一。而它在組織界面視覺內容方面，作用也不可小視。加之，結合各個網格的色彩變化，也能使整個頁面更加炫酷直觀。如下圖：
*利用位置不同體現邏輯關系
同一邏輯關系（比如同類，從屬，因果等）或相近/相關的元素放在同一或并列的網頁位置或模塊內，更易于用戶瀏覽所需頁面信息。
當然，每個邏輯關系內，結合大小標題和列表進行展示，層級關系會更加深入清晰。
*利用點線
網頁設計中，設計師不僅可以直接使用點線標出需要強調的內容，還可以利用點線劃分頁面板塊和布局。
如圖，通過位置的不同體現內容之間的邏輯關系。同時，利用線條劃分頁面結構和布局。
*利用對齊方式的不同
文字，圖片以及相關元素的對齊方式，也是體驗不同層級結構的重要工具。
總之，頁面布局也可幫助設計師們創建更具美感和層次感的網頁設計。
原型設計技巧：
在使用Mockplus時，設計師可簡單使用“快速格子+自動填充”的功能組合，實現界面網格的輕松添加。而且，在具體的設計過程中，對齊方式，標尺以及參考線等工具的使用，也可使網頁布局設計更加簡便快捷。
如圖，利用Mockplus的快速格子和自動填充功能制作網頁網格，劃分界面功能結構。
5.利用留白和間距，突出界面視覺內容
留白的巧妙運用，能夠非常有效地突出頁面信息。而頁面內部元素之間，保持適當的間距，讓彼此之間的相互聯系而不“擁擠雜亂”，也是吸引用戶注意的不錯策略。如圖：
6.利用對比，凸顯網頁層級結構關系
以上所提及的各種視覺組織工具，例如尺寸，色彩，明暗，間距等等，同類或不同類之間的鮮明對比，也可以讓頁面視覺上更加美觀而豐富，同時體現元素之間的結構層次關系。
如圖，利用色彩的強烈對比，突出頁面層級。
此外，頁面元素的相互疊加，清晰度，以及細節展示程度的對比，也能有效地凸顯網頁內容的重要性層級。
如圖，靠前的圖片和文字應該更加重要，清晰，細節也應更豐富，從而方便用戶識別讀取，避免層次混亂。
7.采用不同的界面風格，打造獨特的網頁視覺層級
當然，并不是說設計師就必須通過以上的設計工具展示網頁重要性層級結構。實際上，結合設計師特有創意，獨特紋理（texture），圖形或圖像元素等，打造出具有設計師獨特風格的視覺層級，也會是不錯的嘗試。如下圖：
總之，不管是否使用以上的設計工具，結合設計師創意，打造獨具一格的視覺層級風格，都是不錯的設計理念。
原型設計技巧：
而在這一點上，Mockplus提供了很多優質功能，幫助設計師隨心設計，并簡單快捷的原型化，測試和迭代這些天馬行空的創意。
比如，其團隊協作和團隊管理功能，方便設計師更加高效地完成設計。其8種演示和分享方式，例如導出圖片，HTML以及演示包等等，為設計師根據切實需要，選擇適當的方式測試和分享相關設計提供了便利。
此外，其組件樣式庫，也為保存和分享需要的組件樣式并隨時復用提供了可能。
8.分析用戶需求和網頁瀏覽模式，優化頁面內容和位置
在進行網頁界面層級結構化的過程中，并不是毫無章法，盲目的隨意添加或突出某個部分，而是需要分析用戶行為，根據用戶需求等級進行相應結構層次的劃分。否則，再怎么賦有層次感，用戶也會因為找不到需要的東西，莞爾離開。
此外，除了根據用需求決定哪些內容需要放在最緊要，最突出的位置，以吸引用戶。同時還需要根據用戶瀏覽網頁時的閱讀模式，分析重要內容的頁面位置。
根據美國著名網站設計工程師Nielsen Norman Group研究表示，用戶總是在網頁瀏覽中慣用“F”或“Z”型閱讀模式，即用戶常常是從左到右，開頭結尾詳細閱讀，而中間部分則根據網頁或文章大小標題結構，選擇性閱讀的模式。如下圖：
那么，網頁設計中，設計師就需要注意頁面首尾內容的趣味性和實用性，以及中間主體部分注意大小標題簡潔明了，建立清晰的框架層次結構。
總之，無論是用戶行為畫像，還是用戶瀏覽模式分析，最終都是希望能夠根據用戶需求，更加合理的安排和分布頁面內容，直觀清晰，易識別。
9.其他設計工具
而其它視覺設計工具，例如界面文本方面，文本字體，排版，對齊方式等等，也可突出頁面的層級關系。
原型設計技巧：
如若設計師希望通過網頁文本的尺寸，字體，顏色，排版以及對齊方式等實現框架結構的構建時，Mockplus的“單行文字”和“多行文字”組件就可以輕松幫助實現。而且，適當的結合一定的交互設計，也可使整款設計更具吸引力。
結語：
當然，層次結構化不僅能讓網頁更加直觀清晰，賞心悅目。而且，具有一定局限性的Android 或iOS app，例如頁面尺寸的限制，設備屏幕的限制，響應與否的限制等等，更需要清晰的層次結構，讓頁面擺脫混亂繁雜，吸引更多用戶點擊使用。而這方面，也同樣適用以上所有設計技巧。
總之， 無論如何， 及時地將各種設計想法，通過一款實用且強大的原型工具（比如以上介紹到的Mockplus）, 轉化成直觀可視的原型，更進一步的測試和迭代，才是創建真正美觀實用，深受用戶喜愛的web/app的必經之道。
總之，希望以上介紹的相關層次結構設計技巧和原型設計技巧能對你有所啟發。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每當我看到一個漂亮，優雅并且簡潔美觀的界面，就會忍不住保存下來?，F在，我已經收集了100多個美不勝收的UI 界面。在一次次觀摩，欣賞和學習后，我發現這些界面有很多共同點?？删烤故鞘裁醋屛覍λ鼈円灰婄娗槟兀楷F在我找到了答案，是色彩。
本文中，結合自身經歷，我總結了一些UI 設計配色技巧。雖然它們不能像魔術一樣讓你搖身一變成為最優秀的UI設計師，但是我保證，這些為你量身打造的UI 設計配色技巧，定會讓你受益匪淺。
1. 色彩的魔力
色彩是會說話的，甚至可以像語言一樣強大?；叵胍韵?，每當你初見一個網站或產品，給你留下第一印象的是什么呢？是視覺外觀，而視覺外觀很大程度上是取決于色彩運用。
那么，在UI設計中，色彩究竟可以做些什么？
1）反映品牌的內涵和品質
顏色可以為品牌設定基調。 CCICOLOR的一項研究表明，用戶在評估一款在線商品時，只需花費短短90秒，而判斷的依據高達62％至90％將取決于配色方案。
2）實現更佳的用戶體驗
色彩的有效運用能提升整體美感，提供更優的閱讀體驗，創造清晰和諧的風格。
3）影響購買決策
根據Kissmetrics的說法，產品的視覺外觀是影響消費者購買決策的首要因素。此外，QuickSprout的研究也表明，90％的產品評估都與顏色有關。Neil Patel曾寫到，“顏色在你購買特定產品的原因中占據85％的分量”。正因如此，顏色已成為當今重要的營銷手段之一。
2. 色彩的基本概念
色彩被長久的文化生活賦予了很多約定俗成的含義和寓意。每種色彩都形成了自己獨特的語言和象征。解讀色彩的語言，請看下表：
3. UI 設計配色技巧
1） 色彩使用也講究“天時地利人和”
存在即合理，沒有哪一個色彩本身就是丑陋和不具備美感的，只能說，如果我們錯誤的使用了色彩，那么它的美一旦被破壞，就只剩下丑陋和別扭了。
想象一下，如果麥當勞大叔使用比較沉悶的灰色和黑色而不是明快的黃色和紅色，你還對他們的炸雞充滿饑腸轆轆的感覺嗎？女人喜歡穿著黑色禮服搭配鮮艷口紅參加派對，為什么？因為這樣會讓她們看起來性感迷人。
不同的顏色傳達不同的含義和感覺。如何明智地進行選取和搭配呢？這里請注意5點：選取合適的顏色，運用于合適的設計場景，注意時間變化，關注目標用戶，明確想要達到的目的。
這里請認真查看上圖，明確顏色的意義。但如果你非要冒險追求獨一無二的設計，那么祝您好運。
2）留心藍色
為什么專門談藍色？藍色不是海洋天空的專屬色，藍色也是UI 設計的青睞色。
看看你常用的一些比較有名的APP或者網站，比如Facebook，Safari以及辦公軟件等等。有什么發現呢？是的，它們的界面都是藍色，各種層次的藍色。
有研究表明，藍色是唯一一種讓女性和男性都鐘愛的顏色。藍色幾乎無處不在，大自然中，各網站的UI界面，服飾衣物等，藍色隨處可見。包括我此刻寫入文章的Microsoft Word，界面也是藍色的。
藍色無疑是一種安全的顏色，它能最大程度上獲得用戶的信任并被廣泛接受，藍色可以說是UI配色中的典型例子。如果你的UI界面沒有更好的選擇，請用藍色。
3）背景色和元素之間的色彩變化技巧
看看以下的界面：
（來源）
這里暫且不談這又是關于藍色的UI界面，讓我們專注于它的色彩變化。主題顏色是藍色，其他元素是較暗的藍色和更明亮的藍色。整體看上去，各層次的顏色平衡和諧且又脈絡清晰。
怎么做到自然而又極具美感的色彩變化？
只是一個簡單的黃金法則：通過降低亮度和增加飽和度可以使色彩變得更深；通過增加亮度和降低飽和度來使色彩變得更淺。
4）色彩組合的黃金比例——（6：3：1）規則
在設計時，色彩組合必不可免。組合顏色很容易，但組合后如何避免色彩混亂和累贅？如何既能夠不顯得單調又展示設計感？
記住二個原則：
第一個：6：3：1規則
60％+ 30％+ 10％的比例是為了平衡顏色。這個公式能創造出一種平衡的感覺，并能提供更佳的用戶體驗，可以讓用戶的實現從一個點舒緩的移動到另一個點。
第二個：最多3個原色
這個規則與黃金（6：3：1）規則相匹配。這是避免混亂并保持平衡的最佳辦法。
5）顏色組合和互補
提供和諧的配色方案時，需要注意些什么？在這個過程中需要考慮以下方面：
第一， 色調
您可以在色環上生成單個“色度”的許多變體。通過添加白色，黑色和灰色來生成不同的色調。
實現平衡色調，最簡單的方案是單色（單色）方案。
第二， 對比
顏色的不同對比可以喚起不同的情感反應。色輪上相對的兩種顏色可以提供最高的對比度，比如黑色和白色。強烈的對比度可以讓人集中精力，并且產生緊張的心情; 柔和的對比度則適用于輕松、休閑的UI設計。
注意：對比的使用不要過火，這樣容易使用戶產生困擾。
6）黑白色搭配不過時
黑色是所有中性色中最強的，而白色是最常用的背景顏色。黑色是一個很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺。如上所述，黑色和白色也是最大的對比色，如果合理的使用黑色配合白色，會營造出一種優雅的氛圍。黑白色的搭配主要用于網站UI界面。
7）從自然和藝術中獲得靈感
自然與藝術是靈感的主要源泉。抬頭看看天空，你會發現藍色發揮到淋淋盡致的經典模樣。從大自然中獲得的配色靈感可以使您的設計更加切合用戶的審美，非常自然，不帶刻意的痕跡。而藝術是對自然的直接反映，是非常寶貴的資源，值得好好利用。
8）顏色心理學 – 避免性別誤區
或許天生如此，女人不喜歡灰色，橙色和棕色。她們鐘愛藍色，紫色和綠色。而男人不喜歡紫色，橙色和棕色。男人喜歡藍色，綠色和黑色。只要記住，當你的產品目標用戶群是男性時，選擇能傳達男性氣概的色彩。如果你把運動類App的界面使用了女性色彩，結果可想而知。
還有一個誤區，人們以為粉色是女性的喜愛，但結果也許會讓你大跌眼鏡。
4. 工具和模板
這里我總結了一些有助于UI配色的工具和模板，希望對您有所幫助：
1）Coolors.co
Coolors.co是挑選顏色的好工具。只需鎖定所選顏色并按空格即可生成調色板，還提供了鎖定部分色卡再次生成顏色的功能。包括HEX、HSB、RGB、CMYK等四種色彩模式。
2）Mockplus
Mockplus是一款非常方便的UI / UX設計工具，其啟動頁面加入了配色精美的示例項目和模板，可直接導入桌面客戶端。其編輯器中，可對組件進行多樣的色彩設置和編輯，內部也包含完整的顏色選擇器，支持導入圖片和GIF，如果您是要在原型設計過程中產出精美的UI 界面，Mockplus能滿足您的需求。
3）Paletton
Paletton有點類似于Kuler，但又不僅限于5個色調。當您已經擁有原色并想要使用其他色調時，Paletton將會是您很好的選擇，它可以創建協同色彩組合工作，是強大的UI調色板。
4）Check my Color
Check my Color是一款可以用于檢查所有DOM元素的前景和背景顏色組合的工具，也是一款能夠檢查不同網頁自己的顏色亮度和對比度差異的工具。
5）Chinaz
該網站提供了豐富的配色資源，包括在線調色板，網頁常用色彩，web安全色以及網頁顏色選擇器，會使您UI 配色的一個很好的幫助。建議對色彩運用比較初級的設計師可以做一個參考。
注意：可用性是關鍵
創建華麗的UI界面永遠不是最終的目標。提供卓越的用戶體驗，為用戶的生活增添快樂和幸福才是我們設計的目的。因此，在UI 設計配色上，每位UI設計師應該記住，界面應該是符合高度實用和并且清晰明了的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為什么數據可視化ui設計非常重要?
數據可視化的目的是以一種用戶更容易理解的形式呈現復雜信息。
一個優秀的數據可視化界面是什么樣子的？
今天小編就帶給大家一組超酷數據可視化UI設計，風格多樣，供參考。
文章來源：快資訊 作者：ZAKER汽車
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每天學習一點，你就進步一點，不斷向上成長，成功沒有偶然，也沒有理所當然，能夠成為一名優秀UI設計師的人不是因為他們有多幸運，也不是因為他們天賦有多高有多么強的悟性，而是因為他們一直在努力。
只不過一般人只看到別人的成功和輝煌，卻往往忽略了別人背后辛勤的努力和付出，所以，在不服氣或者眼紅之時，才會用偶然來加以解釋。只有不斷學習提升，才能讓自己變得更有價值!
以下是周老師給大家講解UI設計的幾種技能提升技巧。學會了可以讓你快速達到事半公倍的效果。
1. 注入生命
無論是登錄屏幕還是加載消息，用戶都可以從這些小細節中獲得樂趣。這就是為什么像Old Spice和Geico這樣的公司擁有如此知名品牌的原因。通過在他們的營銷中注入幽默感和個性化的設計，他們創造了更令人難忘的廣告和內容。
MailChimp用戶體驗總監Aarron Walter說：“我們已經發現在副本中加入幽默、個性，以及許多塞進工作流的復活節彩蛋都可以把原本平凡的任務變成人們期待的體驗，有時甚至是錯過的體驗。”
將生命注入復制中，這與說“正在加載...”與“我們訓練有素的團隊正在努力做到的”是有區別的。這是出乎意料的，并為你的用戶提供了一點娛樂。
好的文案并不一定意味著它必須幽默。它只是意味著寫一篇引人入勝、值得一讀的文章。當然，在一些領域，如，醫院、政府等地的應用是不合適的。
Reddit的聯合創始人Alexis Ohanian在《Tools of Titans that I loved》中說了一些我非常喜歡的一句話：“花點時間使它更具人性化，或者(取決于你的品牌)更有趣、更不同、或者更多。這是值得的，這就是我的挑戰?！?
在你去設計你的下一個產品時，請考慮如何將體驗與引人入勝或有趣的副本結合在一起。
2. 放入一些圖標和表情符號
添加表情符號和圖標可以幫助快速描述元素的功能。就像是當用戶看到放大鏡圖標時，可以立即識別出他們可以通過單擊來搜索內容。
我喜歡Pieter Levels如何利用他的網站NomadList上的表情符號來使其更具吸引力和用戶友好性。這是使UI更具視覺吸引力的簡單但有效的方法。
除此之外，關于這一點沒有太多要說的了，不要過度使用它，也不要通過嘗試過度創意來重新發明輪子。用戶認識到某些元素具有全局意義。因此，請勿通過干擾用戶熟悉的內容來使用戶感到困惑，盡可能嘗試使用已有的約定。一個用戶圖標代表一個用戶配置文件，UI設計的幾種技能提升技巧https://www.aaa-cg.com.cn/ui/2998.html?seo1一個“+”圖標代表添加，一個購物車代表購物車，一個齒輪代表設置，等等。
下面是一些我最喜歡的地方，你可以在那里找到圖標和表情符號:
Emojione
Icons8
BoxIcons
Feather
Material
3. 通過插圖使你的產品更具人性化
插圖使你能夠以輕松愉快的方式傳達復雜的信息。
在我們還小的時候，我們就已經接受過將視覺與文字和思想相關聯的培訓。你見過沒有插圖的兒童讀物嗎?
添加插圖可以幫助緩解心情并平衡界面。插圖可以吸引用戶的注意力，并使應用程序的各個方面更易于理解。
但是，更重要的是，插圖要有目的性，并用作內容的補充，而不是替代。插圖應重點突出，并提供對UX的改進，而不是干擾操作。與插圖的顏色和樣式保持一致也很重要，這樣它們就不會顯得格格不入。
4. 添加一個黑暗模式選項
根據你正在開發的應用程序，添加深色主題選項可以為像我這樣生活在深色模式下的用戶提供安慰。黑暗模式對眼睛更友好。
在黑暗模式下進行設計與在明亮模式下進行設計沒有太大不同。它所需要的只是一個不同的調色板。我建議讓用戶決定在暗模式還是亮模式之間進行選擇-提供在兩種模式之間切換的能力將改善您的應用程序體驗，并允許用戶保持對其體驗的控制。
5. 使用高質量的圖像
應用程序中的圖像與其他任何視覺元素一樣重要。你選擇的圖像中的視覺效果可以使UI更加生動生動，從而增強你的UI。
有很多很棒的地方可以找到高質量的圖像。以下是一些我的最愛：
Unsplash
Pexels
Freepik
Adobe Stock
Pixabay
6. 設計有趣的404頁面
看到應用程序中的每個事件，即使不是那么令人興奮的事件，都可以提供令人難忘的體驗。
錯誤狀態通常是消極的經歷，但你可以通過提供一些個性或樂趣來將其轉變為積極的經歷。
我最喜歡的示例是Google Chrome瀏覽器的“沒有互聯網”錯誤屏幕。他們提供了所有必要的信息，以告知用戶如何修復它，而且還提供了T-Rex無盡的跑步游戲。
我最喜歡的另一個是Dribbble的404頁面。它之所以出色，是因為它可以使用戶參與其中，并且他們可以快速返回瀏覽涂料設計。
“人們仍然在推特上發布關于我們在Hipmunk上的錯誤推文，這是一條錯誤消息。他們為什么要這樣做?因為這樣做使他們在做一些原本希望很無聊的事情(例如尋找航班)時顯得舉足輕重。” -Hipmunk的創始人Alexis Ohanian說。
元素的高度可以幫助你在應用程序中創建信息的層次結構。用戶認為深度代表了重要性-因此，越靠近的元素優先級越高。
但是，僅僅因為陰影看起來不錯，并不意味著它們始終是不錯的設計選擇。在設計決策時要有目的性，并在添加陰影時要記住這些元素的重要性，這一點很重要。
在做出任何設計決策時，你應該始終這樣做以改善體驗，而不僅僅是美觀。我已經提到過幾次，因為我想開車回家。不要忘記，應用是為使用而設計的。不只是因為好看才被人看的。
文章來源：快資訊 作者：躺雞萌妹
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天給大家分享10個非常實用的UI設計小技巧，請一定要認真看，這能幫助你的設計功底，更上一層樓。
1、對按鈕進行排版，且風格一定要統一。
排版設計也是一門學問，不一樣的排版就會有不一樣的視覺結果。如果對設計的細節不重視，有可能讓我們原本完美的產品變的平庸，比如像按鈕、Tab這些簡單的界面元素也是需要排版的，因為用戶可能每天都會點擊N次。
另外，所有按鈕都需要盡可能的風格統一，這樣看起來才會更美觀。
2、設計的時候要學會留白。
留白的作用在于突顯我們設計的重要內容。
內容元素之間的空白不僅僅是用來分隔的，這也是設計中需要注意的問題之一，比如像按鈕、導航條、文章內容、標題等等元素之間的空白都有必要關注。有效地利用空白，我們可以明確的表現出頁面元素之間的關系。
3、顏色主題盡量素雅、簡單。
顏色主題可以說是用戶對你設計的第一印象，一旦使用的顏色過于豐富，甚至是艷俗，就會使得用戶分心。如果你不希望你的用戶在看到花里胡哨的、扎眼的 App 之后就把它刪掉，你就應當使用一種簡單的顏色主題，給用戶一個簡單大方的第 一印象。簡單的顏色主題順應扁平化設計的要求，這使得用戶在使用你的 App 時能夠有順滑的體驗。
4、只用一種字體。
減少屏幕上字體的數量才能真正發現排版的力量。設計師不需要使用多種字體，只用一種字體，配上斜體、加粗、改變字號等手段，也可以分辨不同區域的內容。
在App、移動端和PC端網站中使用單一字體有助于增強品牌的統一性，優化全平臺的體驗。此外，用戶也更喜歡單一字體所帶來的簡潔性。
5、鏈接體驗需改善。
鼠標移動到超鏈接圖片，文字上面時應該變成手型，暗示該地方是可以點擊的。網頁中文章里的關鍵字通常都標有下劃線，提示用戶這個文字是可以點擊的，但是可點擊區域不會超過字符的寬、高范圍。設計類似這種帶有超鏈接可點擊區域的時候，都可以通過一些小技巧來提高可用性，比如：增加間隔，有些情況下甚至可以把鏈接轉換為塊元素。
6、分層的界面。
以前，用戶界面都是擬物化的，從事物本身選取素材，比如電子日歷長得和紙質桌面日歷一樣，把app圖標設計成立的，按鍵音也模仿傳統電話。
現在，扁平化設計通過分層的方式來表現事物的深度和層次，創造一種更加“有形”的感覺。
這樣就更好的解決了如何做好UI設計的問題，我們的現實世界是3D的，以前人們習慣的界面也是擬物的，所以在進行扁平化設計時可能會出現的一個風險就是“過于扁平”，導致用戶的不適應，而分層設計就是解決這個問題的方法，把一個物件放在另一個物件的上方，充分利用縱向的層次，幫助用戶理清不同物件之間的關系，把注意力放在特定的位置。
7、更短的用戶操作流程。
以前，人們完成一次交易可能要跳轉好幾個頁面，而現在在一屏內就可以完成這些步驟，省時省力。比如用戶在完成某項任務后會高亮接下來所需要進行的操作或者自動打開新頁面。
現在人們的生活節奏較快，經常會在走路的時候用手機，因此簡單快捷的操作更受歡迎。
按照這種思路設計產品操作流程可以幫用戶省時省力，增加轉化率并提高用戶打開App的頻率。
8、利用原型不斷改進。
產品原型可以為功能的開發設計提供寶貴的指導。在產品設計的早期做出矯正，避免在產品基本成型時才修改，浪費時間和精力。
通過低成本的“實驗”，可以測試產品各個功能的需求，通過迭代改進產品，用更少的時間開發出更好的產品。
9、指出產品適用人群而不是做成全年齡。
你是想把產品做成大眾化的呢還是有精確的適用人群？在產品定位上你需要更精確些。通過不斷了解目標客戶的需求及標準，你能把產品做得更好得到更多與客戶交流的機會，并且讓客戶覺得你很專業，在這方面是獨家提供的優質服務。
把產品定位得精確的風險就是可能縮小了目標潛在客戶的范圍，也使自身變得不那么全能。但這種做得更專業的精神卻反過來會贏得信任，權威。
10、暴露選項而不要將操作隱藏。
你使用的任何一個下拉框都會對用戶造成信息的隱藏而需要額外的操作才能顯示。如果這些信息是貫穿整個操作所必需的，那你最好把它展示出來做得更顯而易見一點。下拉框最好用在選擇日期，省份等約定俗成的地方。對于程序中重要的選項最好還是不要做成下拉形式。
希望以上十條技巧對你有用。
文章來源：快資訊 作者：衍果設計
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
從事UI設計的工作人員通常會有一種自己在做時尚行業的錯覺，因為和時尚行業一樣，在設計的時候一定要有最新的元素，如果還在用老掉牙的設計元素，很容易就會被淘汰掉。所以這里給大家介紹兩種風格，幫助最近頭疼設計風格的朋友。
疊加風格
顧名思義，疊加風格就是通過不同元素疊加而成的，當然，不是說我們隨便一堆東西丟在一起就是疊加風格。疊加風格非常在意大膽排版以及排列有序，有層次感，而這其中層次感是疊加風格的核心。
不管是圖文疊加還是圖片之間的疊加，最終目的都是為了突出我們產品的重點，而通過我們疊加方式的不同，效果也是不一樣的。舉個簡單的例子，圖片和文字相互疊加，如果文字在上方，可以很直接展現文字并突出文字思想。而文字在下方，圖片對文字有部分遮擋的話，就會增加神秘感，讓人想要一探究竟。
輪廓化
輪廓化簡單來說就是把文字用輪廓勾勒出來，也可以理解為鏤空，通過描繪輪廓展現出來，這樣我們可以和實心的字體形成強烈的對比。
這種風格多半和實心字體一起出現，當然根據設計理念和表達方式不同，也會有單獨出現的情況，這種風格講究的是設計上的細節，讓人眼前一亮的小心機，同時在層次和情緒表達上會更加的豐富，一般都是用來做封面，給用戶的視覺形成強烈的沖擊效果。
文章來源：快資訊 作者：春風化娛娛
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://m.skdbbs.com
