今天25學(xué)堂跟大家來學(xué)習(xí)一下建筑大師如何把建筑設(shè)計(jì)思維運(yùn)用到移動(dòng)APP設(shè)計(jì)當(dāng)中來的。

廢話少說，我們直奔主題吧！

手機(jī)APP設(shè)計(jì)教程之四條APP產(chǎn)品設(shè)計(jì)黃金法則

第一條設(shè)計(jì)黃金法則：軸的把控

軸在UI設(shè)計(jì)中是最基本、最常見的概念，也是用來組織界面結(jié)構(gòu)的重要核心。簡(jiǎn)單說來，軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線，軸以虛線的方式被標(biāo)注出來。也類似我們?cè)趐s里面設(shè)計(jì)的標(biāo)尺、參考線一樣的。

我們的日常生活中絕大多數(shù)的事情都是有序的，我們更傾向于享受有序的的東西，它們令人感覺平穩(wěn)、舒適、平易近人。

如下圖列表的排列：

運(yùn)用了對(duì)齊、向下滑動(dòng)、連續(xù)性、加強(qiáng)等原則。

也符合APP設(shè)計(jì)當(dāng)中，軸的定位和以軸為設(shè)計(jì)的準(zhǔn)則。

第二條設(shè)計(jì)黃金法則：對(duì)稱與平等分

當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí)，他們構(gòu)成了對(duì)稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對(duì)應(yīng)之時(shí)，它們就形成了完美對(duì)稱。

當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí)，會(huì)給人以協(xié)調(diào)和諧的設(shè)計(jì)感。這類布局很適宜閱讀，用戶會(huì)自覺地自上到下，從左向右查看。

在APP界面設(shè)計(jì)里面，常用的設(shè)計(jì)布局就是九宮格或者是六宮格等。

九宮格的源頭可是我們中國(guó)人發(fā)明的一種構(gòu)圖模式，但巧的是它與黃金分割有著驚人的理論聯(lián)系！大家們把畫面的上下左右用黃金分割來做出4條線，我們驚奇的發(fā)現(xiàn)這就是我國(guó)古人所說的九宮格！

人們發(fā)現(xiàn)在九宮格的4條線交匯的4個(gè)點(diǎn)是人們的視覺最敏感的地方，在國(guó)外的攝影理論里把這4個(gè)點(diǎn)稱為“趣味中心”。顧名思義，被反復(fù)證明的是當(dāng)被攝主體處于或發(fā)布在這4個(gè)點(diǎn)附近最容易得到“眼球”

如下圖的排列：看起來是不是很舒服呢？

這就是美學(xué)設(shè)計(jì)當(dāng)中的黃金比例合理運(yùn)用和解讀。

當(dāng)然還有一種是不對(duì)稱設(shè)計(jì)，我們常見代表產(chǎn)品就是瀑布流設(shè)計(jì)的花瓣網(wǎng)。

不對(duì)稱的設(shè)計(jì)會(huì)給人明顯的失衡感，可能會(huì)令人不舒服，但是也能造就殘缺美，當(dāng)然這要看你具體怎么做。值得我們?nèi)グl(fā)揮設(shè)計(jì)創(chuàng)意的地方。

第三條設(shè)計(jì)黃金法則：層級(jí)關(guān)系

重點(diǎn)體現(xiàn)的時(shí)候，這個(gè)時(shí)候就會(huì)出現(xiàn)層級(jí)的關(guān)系。 誰要突出，誰要弱化些，誰在上面，誰在下面，誰先處理，誰后處理 等等。這些都是應(yīng)用了手機(jī)APP設(shè)計(jì)當(dāng)中的層級(jí)關(guān)系。

1、形狀與尺寸

比如如果一個(gè)設(shè)計(jì)元素在尺寸上比其他的控件更大，就會(huì)區(qū)分出層級(jí)。毫無疑問，我們查看某個(gè)設(shè)計(jì)的時(shí)候，通常會(huì)被最大的元素吸引到。如果一個(gè)建筑物有5個(gè)出窗戶，其中一個(gè)是其他四個(gè)的兩倍大，我們的注意力自然而然會(huì)被吸引過去。

2、位置的擺放

位置的存在同樣能彰顯層級(jí)的不一樣。在圓圈之內(nèi)，中心位置的東西比邊緣部分的看起來更重要。位于軸線頂端的控件會(huì)顯得比其他部分的優(yōu)先級(jí)更高。

第四條設(shè)計(jì)黃金法則：節(jié)奏、韻律與風(fēng)格

古代的詩詞都會(huì)有押韻一說。我們?cè)O(shè)計(jì)移動(dòng)APP界面設(shè)計(jì)的時(shí)候，也是如此。

節(jié)奏與韻律的概念來自于音樂，是體現(xiàn)形式美的一種形式，有節(jié)奏的變化才有韻律之美。

節(jié)奏是藝術(shù)表現(xiàn)的重要原則，各種藝術(shù)形式都離不開節(jié)奏：節(jié)奏是按一定的條理、秩序重復(fù)連續(xù)地排列，形成一種律動(dòng)的形式。它有等距離的連續(xù)，也有漸大、漸小、漸長(zhǎng)、漸短、漸高、漸低、漸明、漸暗等排列構(gòu)成，就如同春、夏、秋、冬的四季循環(huán)。節(jié)奏的重復(fù)使單純的更為單純，統(tǒng)一的更為統(tǒng)一。

韻律不是簡(jiǎn)單的重復(fù)，而是比節(jié)奏更高一級(jí)的律動(dòng)，是在節(jié)奏基礎(chǔ)上更超于線形的起伏、流暢與和諧。韻律是宇宙之間善遍存在的一種美感形式，它就像音樂中的旋律，不但有節(jié)奏，更有情調(diào)；它能增強(qiáng)版面的感染力，開拓藝術(shù)表現(xiàn)力，牽動(dòng)人．fl的思想感情，引起觀者的共鳴。

節(jié)奏與韻律的運(yùn)用，能創(chuàng)造出形象鮮明、形式獨(dú)特的視覺效果．表現(xiàn)輕松、優(yōu)雅的情感，通過躍動(dòng)提高訴求力度。從而形成一派風(fēng)格。

所以，手機(jī)UI界面設(shè)計(jì)也要學(xué)會(huì)營(yíng)造出獨(dú)特的節(jié)奏韻律之美，才是上上之作。

具體設(shè)計(jì)體現(xiàn)在 ? ?模式一樣，布局一樣。合理的間斷處理等。

APP列表中每一間房子都占據(jù)一個(gè)模塊，模塊中有著大小相同的圖片，價(jià)格、位置和房東信息和圖片的相對(duì)位置一定，且排版勻稱舒服，兩個(gè)模塊之間的間距也相同，當(dāng)你瀏覽的時(shí)候，熟悉的節(jié)奏會(huì)讓你清楚地知道上哪看關(guān)鍵信息。

以上就是今天25學(xué)堂跟各位分享的手機(jī)APP設(shè)計(jì)教程之四條APP產(chǎn)品設(shè)計(jì)黃金法則。

希望幫助各位在APP界面設(shè)計(jì)當(dāng)中，明確很多設(shè)計(jì)的方向，而不是隨意的擺放和設(shè)計(jì)。