設(shè)計師在設(shè)計過程中，確實可能會遇到一些【困擾】，使得設(shè)計成果顯得不夠【高、大、上】或不夠【有感覺】。這種情況下，如何解決這些問題？本文分享了兩個方法，可以幫我們更好地進(jìn)行界面設(shè)計，提高界面高級感。

PART 01 高級版式學(xué)習(xí)與分析

什么是版式設(shè)計

【小提問】下面兩個啤酒海報，哪個感覺更廉價?

這還用說嘛，當(dāng)然是B了，因為有帥哥呀～因為B出現(xiàn)了人物肖像，親和力比A這種高冷范強(qiáng)多了。買得起的東西才有親和力嘛，所以B給人感覺更廉價，屬于朕買得起的范疇。反觀A呢，給人很大的距離感，感覺就貴，買不起系列?！拘√釂枴肯旅鎯蓚€名片，哪個更易讓人產(chǎn)生信賴感?

這還用說嘛，當(dāng)然是B了～因為對齊做的好呀，給人感覺整潔、專業(yè)。反觀A，太過復(fù)雜，花里胡哨。怎么也不像是能認(rèn)認(rèn)真真辦事兒的嘛!所以B更能讓人產(chǎn)生信賴感為什么都是名片，卻給人不同的心理感受呢?

“ 這其實就是不同的版式設(shè)計所帶來的影響 ”版式設(shè)計的基本概念。

【定義】版式設(shè)計作為平面設(shè)計的重要分支，其核心在于巧妙運(yùn)用各種造型要素和形式原理，對版面中的文字、圖像、圖形、線條、表格及色塊等要素進(jìn)行精心編排。這一過程不僅僅是簡單的排列組合，更是以視覺藝術(shù)的形式，將設(shè)計者的意圖和信息直觀地傳遞給觀看者。通過精心的版式編排，我們力求讓版面呈現(xiàn)出和諧統(tǒng)一的美感，同時確保信息的有效傳達(dá)，使觀看者能夠深刻感受到設(shè)計者的創(chuàng)意與用心。

我們再來看一組海報設(shè)計的樣式，你第一眼的最喜歡哪張呢？或者你第一眼被哪張所吸引了呢？這個被吸引的理由就是我們談?wù)摰降陌媸皆O(shè)計的作用了。

【作用】吸引觀眾的視線，激發(fā)其閱讀興趣，是版式設(shè)計的首要任務(wù)。通過精心編排，確保版面所傳達(dá)的主旨能夠一目了然地呈現(xiàn)在觀眾眼前。同時，充分發(fā)揮版式設(shè)計的表現(xiàn)力，強(qiáng)化版面主題，以其獨特的藝術(shù)魅力深深吸引觀眾的目光，為他們帶來視覺上的享受與心靈的觸動。版式設(shè)計的七大原則

任何的技術(shù)我們都可以抽出更加抽象的概念，用于指導(dǎo)我們的實踐學(xué)習(xí)。接下來讓我們開始了解，版式設(shè)計的七大原則——表現(xiàn)力、圖版率、文字跳躍率、圖片跳躍率、網(wǎng)格拘束率、版面率以及構(gòu)圖。

1. 表現(xiàn)力

【概念】表現(xiàn)力是指版面設(shè)計在視覺上所能傳達(dá)的情感、氛圍和主題的能力。

【意義】一個具有強(qiáng)大表現(xiàn)力的版面設(shè)計，能夠迅速吸引觀眾的注意力，有效地傳達(dá)設(shè)計者的意圖，使觀眾產(chǎn)生共鳴，并留下深刻印象。

【示例】

2. 圖版率

【概念】圖版率是指版面中圖片所占的面積比例。

【意義】圖版率的高低直接影響版面的視覺效果和信息的傳達(dá)效率。高圖版率通常使版面更加生動、活潑，而低圖版率則可能使版面顯得更為簡潔、明了。

【示例】

3. 文字跳躍率

【概念】文字跳躍率是指版面中不同大小、字體、顏色等屬性的文字元素之間的對比程度。

【意義】通過調(diào)整文字跳躍率，可以突出重要的文字信息，引導(dǎo)觀眾的閱讀順序，提高版面的可讀性和信息的傳達(dá)效率。

【示例】

4. 跳躍率

【概念】圖片跳躍率是指版面中不同大小、形狀、色彩等屬性的圖片元素之間的對比程度。

【意義】適當(dāng)?shù)膱D片跳躍率可以增強(qiáng)版面的視覺沖擊力，使版面更具層次感和動態(tài)感，有助于吸引觀眾的注意力。

【示例】

5. 網(wǎng)格拘束率

【概念】網(wǎng)格拘束率是指版面設(shè)計中對網(wǎng)格系統(tǒng)的使用程度和依賴程度。

【意義】網(wǎng)格系統(tǒng)可以使版面布局更加規(guī)范、整齊，提高設(shè)計的一致性和可讀性。但過度的網(wǎng)格拘束可能限制設(shè)計師的創(chuàng)意發(fā)揮，因此需要根據(jù)設(shè)計需求和風(fēng)格來平衡網(wǎng)格的使用。

【示例】

6. 版面率

【概念】版面率是指版面中文字與圖片等元素所占的面積與整個版面面積的比例。

【意義】版面率的高低決定了版面的信息承載量和視覺效果。適當(dāng)?shù)陌婷媛士梢允拱婷婕炔贿^于擁擠也不過于空曠，保持良好的視覺平衡和信息傳達(dá)效率。

【示例】

7. 構(gòu)圖

【概念】構(gòu)圖是指將版面中的各個元素（如文字、圖片、線條等）按照一定的規(guī)則和原則進(jìn)行排列組合，形成一個完整、和諧的視覺畫面。

【意義】良好的構(gòu)圖是版面設(shè)計的基礎(chǔ)，它決定了版面的整體視覺效果和信息的傳達(dá)方式。通過巧妙的構(gòu)圖，可以突出主題、引導(dǎo)視線、營造氛圍，使版面更具吸引力和感染力。

【示例】

這些概念在排版設(shè)計中起著至關(guān)重要的作用，它們相互關(guān)聯(lián)、相互影響，共同構(gòu)成了版面設(shè)計的整體效果和風(fēng)格。設(shè)計師需要熟練掌握這些概念，并根據(jù)設(shè)計需求和目標(biāo)來靈活運(yùn)用它們，以創(chuàng)作出優(yōu)秀的設(shè)計作品。

導(dǎo)言經(jīng)過深入探討，版式設(shè)計的七大原則——表現(xiàn)力、圖版率、文字跳躍率、圖片跳躍率、網(wǎng)格拘束率、版面率以及構(gòu)圖。今天我們將繼續(xù)下篇，知道了這么多道理，我們?nèi)绾蝸韺W(xué)以致用呢？Let’s ?go 。

PART 02 ?如何運(yùn)用在界面設(shè)計

2.1 對比共異?????????????????

版面設(shè)計與APP界面設(shè)計在設(shè)計重點、設(shè)計元素和要求等方面存在顯著的差別，但在視覺設(shè)計基礎(chǔ)、用戶導(dǎo)向以及技術(shù)與工具等方面又具有一定的共性。設(shè)計師在掌握這些共性的基礎(chǔ)上，需要針對具體的設(shè)計領(lǐng)域進(jìn)行深入學(xué)習(xí)和實踐，以便更好地應(yīng)對不同的設(shè)計挑戰(zhàn)和需求。版面設(shè)計與APP界面設(shè)計在視覺設(shè)計領(lǐng)域各自占據(jù)重要地位，它們之間既存在顯著的差別，又有一些共性。

以下是對這兩者在差別和共性方面的詳細(xì)對比：

1.差別對比

a.設(shè)計重點與目的

【版面設(shè)計】主要側(cè)重于形式感和視覺呈現(xiàn)。它追求獨特的藝術(shù)風(fēng)格和視覺效果，旨在通過精美的排版和布局吸引觀眾的注意力，形成深刻的記憶點。版面設(shè)計更多地關(guān)注創(chuàng)意和視覺沖擊力，以及如何在有限的版面空間內(nèi)有效地傳達(dá)信息。

【APP界面設(shè)計】更注重信息傳達(dá)、功能實現(xiàn)和用戶體驗。它旨在通過清晰、直觀的界面設(shè)計，幫助用戶快速理解和使用APP的各項功能。APP界面設(shè)計需要考慮到用戶的使用習(xí)慣、交互邏輯以及易用性，確保用戶在使用過程中能夠順暢地完成各項操作。

b.設(shè)計元素與要求

【版面設(shè)計】通常涉及文字、圖片、色彩、線條等多種元素，要求設(shè)計師具備較高的審美能力和創(chuàng)意能力，能夠?qū)⑦@些元素巧妙地融合在一起，形成具有藝術(shù)感染力的版面效果。

【APP界面設(shè)計】則更注重界面的布局、按鈕設(shè)計、交互效果等，要求設(shè)計師熟悉用戶界面的設(shè)計規(guī)范和原則，能夠設(shè)計出符合用戶習(xí)慣和期望的界面。

2.共性對比

a.視覺設(shè)計基礎(chǔ)無論是版面設(shè)計還是APP界面設(shè)計，都需要掌握基本的視覺設(shè)計原理和技巧，如色彩搭配、字體選擇、排版規(guī)則等。這些基礎(chǔ)知識是構(gòu)建優(yōu)秀設(shè)計的基石，有助于設(shè)計師更好地表達(dá)設(shè)計意圖和實現(xiàn)設(shè)計目標(biāo)。

b.用戶導(dǎo)向兩者都需要深入了解用戶需求和行為習(xí)慣，以便設(shè)計出更符合用戶期望的作品。無論是吸引觀眾注意力還是提高用戶體驗，都需要以用戶為中心進(jìn)行設(shè)計思考。

c.技術(shù)與工具在設(shè)計過程中，兩者都會運(yùn)用到一些相同或相似的設(shè)計軟件和工具，如Adobe系列軟件（Photoshop、Illustrator等）以及Sketch、Figma等界面設(shè)計工具。這些工具能夠幫助設(shè)計師更高效地完成設(shè)計任務(wù)，實現(xiàn)設(shè)計創(chuàng)意。

2.2 APP案例分析

讓我們來看看具體幾個案例的實施效果，具體可以給我們什么啟發(fā)呢:

TIPS：線條分割和空間分割的區(qū)別，分割線給人一種壓迫感，而空間的分割給人更加輕松的閱讀感受。

TIPS：QQ音樂會員中心頁面的設(shè)計，不同的等級對應(yīng)不同的顏色卡片，運(yùn)用顏色填充背景吸引用戶增加界面專屬比重，起到賬戶切換視覺的引導(dǎo)作用，是一個很好的設(shè)計思路。

TIPS：表示在畫面中相對更加突出的內(nèi)容，讓用戶在瀏覽產(chǎn)品時能夠第一視覺捕捉用戶的眼球;焦點是相對的，在大頁面中可以是焦點，在小模塊中也可以是焦點。

TIPS：我們在網(wǎng)上購物時，更多的是通過圖片的第一印象來獲取產(chǎn)品，所以圖片在購物網(wǎng)站的比例都做到盡可能的適合自己的產(chǎn)品特點才能讓版式設(shè)計更優(yōu)。

TIPS：綜合來看，我們在做設(shè)計時很多時候會「高逼格」亦或者去追求「高級灰」、是「獨特性」，其實更重要的是要符合產(chǎn)品的調(diào)性和產(chǎn)品對象人群，不能一味的去追求自我的「設(shè)計追求」?！案鶕?jù)不同的項目需求，選擇不同的模版自然會達(dá)到事半功倍的效果!”

2.3 學(xué)以致用技術(shù)提升??

所有的技術(shù)知識都是可以進(jìn)行遷移的，我們需要學(xué)以致用，將所學(xué)的知識和技能靈活運(yùn)用到實際工作中。遷移技術(shù)知識的過程，不僅是對知識的深化理解，更是對能力的全面提升。也要通過不斷地實踐、探索和創(chuàng)新，我們可以將所學(xué)的技術(shù)知識轉(zhuǎn)化為解決實際問題的能力。

以下是我個人總結(jié)的一點小經(jīng)驗，通過四個過程來逐步進(jìn)行提高，讓我們的【界面設(shè)計更帶感！】

作為一名設(shè)計師，不要受限于CSS,HTML或其他任何技術(shù)工具的約束。它們不應(yīng)成為你理想中完美構(gòu)圖的絆腳石。這些設(shè)計原理適用于任何載體， 像平臺、工業(yè)、網(wǎng)頁等等。它們簡單明了地體現(xiàn)了我們的大腦和眼睛是如何在任何形式下感知視覺信息的。什么都去學(xué)，什么都去用，才能突破瓶頸。

經(jīng)過深入探討，版式設(shè)計的七大原則——表現(xiàn)力、圖版率、文字跳躍率、圖片跳躍率、網(wǎng)格拘束率、版面率以及構(gòu)圖。這些原則不僅提升了視覺的層次感，還讓我們能夠科學(xué)而嚴(yán)謹(jǐn)?shù)乇磉_(dá)出期望呈現(xiàn)的元素。當(dāng)回顧每一個原則所對應(yīng)的案例時，我們不難發(fā)現(xiàn)，每一個案例其實都是多條原則的綜合運(yùn)用，它們彼此相互依存，無法孤立存在。

希望我們都提高能力，確保每一個設(shè)計元素都能和諧共存，共同構(gòu)建出既美觀又實用的版面效果，創(chuàng)造出更加引人入勝的視覺體驗，讓設(shè)計作品更加符合用戶的期望和需求。