設計最有趣的地方在于它的通用性，不論是音樂氨肌、建筑還是工業(yè)鸿秆，設計的規(guī)則大同小異。

今天這篇文章來自紐約的產(chǎn)品設計師妹子Melissa怎囚，由優(yōu)設網(wǎng)@陳子木編譯卿叽。她從建筑系畢業(yè)之后并未從事她的本職工作，2014年11月學習了兩個半月的網(wǎng)頁設計之后開始轉(zhuǎn)戰(zhàn)產(chǎn)品和UI設計了恳守，目前供職于Percolate考婴。不要小瞧她的設計素養(yǎng)，建筑系的系統(tǒng)學習賦予她對于廣泛意義上的設計更深入的認知井誉，這篇文章就是這半年多來的一個階段性答卷蕉扮。

這篇文章總結(jié)了從建筑到產(chǎn)品UI的四個設計的基本原則。

一颗圣、軸

軸在UI設計中是最基本喳钟、最常見的概念，也是用來組織界面結(jié)構(gòu)的重要核心在岂。簡單說來奔则，軸是在設計的時候組織一系列元素的假象線，在下面的設計圖中蔽午，軸以虛線的方式被標注出來易茬。

1、對齊

軸最常見于對稱元素的使用，當元素被布置成軸對稱的布局的時候抽莱，會給人有序感范抓。就像生活中絕大多數(shù)的事情一樣，我們更傾向于享受有序的的東西食铐，它們令人感覺平穩(wěn)匕垫、舒適、平易近人虐呻。最簡單的一個例子就是iTunes 程序中的專輯列表的設計象泵，所有的專輯列表在界面的左側(cè)保持對齊，圍繞虛線軸軸對稱斟叼。

2偶惠、強化

雖然軸是一條假想的線，但是如果周圍的元素的邊緣控制得足夠整齊朗涩，這跳線會在視覺中變得更加“明顯”的忽孽。最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸，如果一邊有建筑一邊沒有馋缅，那么這種軸線的感覺不會那么強烈扒腕。

從產(chǎn)品設計的角度上來看，Twitter 的時間線設計就是一個很好的案例萤悴，左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺瘾腰。

3、運動

當我們碰到某先線條的時候覆履，視覺會很自然地沿著這些方向運動蹋盆，就如同我們站在街上，會自覺地沿著街道的兩頭走動硝全。兩個端點決定了線栖雾，界定了開始和結(jié)束的地方，線伟众，或者說軸線的存在會引導和提示運動的方向析藕。

SoundCloud中，音軌沿著一條既定的水平軸線運動凳厢，隨著音樂的播放账胧，音軌自然地自左向右勻速運動。

4先紫、連續(xù)性

如果終點是不確定的治泥，那么你通常會沿著軸線的方向瀏覽/運動，直到你找到感興趣的東西遮精，或者感到厭倦并關閉應用居夹。在建筑學中，未清楚界定的終點非常少見，因為建筑的修建通常沒法永遠持續(xù)下去准脂，但是UI設計則不一樣劫扒，無限地滾動下去是無比受歡迎的設計手法。

Pinterest的APP中就是這樣做的意狠，持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動下去粟关，只要你有興趣一直觀看下去。

二环戈、對稱

當元素被均勻地放置在軸線的兩側(cè)之時，他們構(gòu)成了對稱的關系澎灸。當元素被精準地在軸線兩側(cè)一一對應之時院塞，它們就形成了完美對稱。

1性昭、平衡

對稱令整個設計更加平衡拦止。當元素與控件在軸線兩側(cè)處于相同位置之時，會給人以協(xié)調(diào)和諧的設計感糜颠。當我們在規(guī)劃街道兩側(cè)的房屋建設的時候汹族，如果左右兩側(cè)都是5間大小一致的房子，當你走在街上的時候這種平衡的設計會令人非常舒適其兴，這是平衡給人的感受顶瞒。

Rdio的APP設計就遵循著這樣的設計規(guī)則，屏幕兩側(cè)的控件是相同的規(guī)格元旬，這類布局很適宜閱讀榴徐，用戶會自覺地自上到下，從左向右查看匀归。

2坑资、不對稱

如果軸線兩側(cè)的控件布置不再是一一對應尺寸相近，那就是不對稱的設計穆端。不對稱的設計會給人明顯的失衡感袱贮，可能會令人不舒服，但是也能造就殘缺美体啰，當然這要看你具體怎么做攒巍。

雖然Pinteret 的APP設計在整體上是沿著中軸線對稱的（寬度一致），但是兩邊的界面控件并非是對稱的狡赐，它們的高度并不一致窑业，位置也是錯落的。稍微一點的落差都會被眼睛捕捉到枕屉，而這樣的差異讓用戶無法準確地左右順序閱讀常柄。不對稱設計打破了設計的平衡性和舒適性，但是也可以緩解了規(guī)律性設計帶來的視覺疲勞。

三西潘、層級

當某個元素出現(xiàn)在比其他元素更重要的位置的時候卷玉，層級就出現(xiàn)了。

1喷市、尺寸

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

通過尺寸來區(qū)分文章列表層級的典型就是稍后讀應用Pocket植酥。頂部的輪播文章?lián)碛懈蟮膱D片镀岛，它的位置和尺寸會令我們一眼注意到。

2友驮、形狀

如果一個控件在形狀和形態(tài)上同其他的不一樣漂羊，也可以讓它獨立出一個層級。不規(guī)則的設計同樣會令人側(cè)目卸留。建筑物的正面擁有五個相同的窗戶和一閃大門走越，你會立刻注意到門的獨特之處。

在Instagram的個人信息頁中艾猜，圓形的個人頭像在方形的圖片中別具一格买喧，非常抓人眼球。它會讓人意識到匆赃，這個獨特的東西淤毛，更為重要。

3算柳、位置

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

以設計應用Path的設計為例，時間軸頂點處的用戶頭像就明顯比時間軸上的其他部分更重要囱淋，而這個地方正好展示的也是用戶頭像猪杭。

四、韻律

UI設計和建筑設計同樣有著韻律之美妥衣，重復的模式會營造出獨特的節(jié)奏之美皂吮。

1戒傻、模式

理解韻律最直接的方式就是聽歌。音樂擁有節(jié)奏感蜂筹，絕大多數(shù)的音樂遵循著相同的節(jié)拍需纳，節(jié)拍就是音樂模式的一部分。

這方面最典型的APP是Airbnb艺挪，APP列表中每一間房子都占據(jù)一個模塊不翩，模塊中有著大小相同的圖片，價格麻裳、位置和房東信息和圖片的相對位置一定口蝠，且排版勻稱舒服，兩個模塊之間的間距也相同津坑，當你瀏覽的時候亚皂，熟悉的節(jié)奏會讓你清楚地知道上哪看關鍵信息。

2国瓮、間斷

當節(jié)奏被間隔打斷的時候，會形成不同的層級狞谱。聽歌的時候乃摹，均勻的節(jié)奏被其他的音樂元素打斷的時候，你會意識到這是比較特別的部分跟衅。

在Twitter的APP中孵睬，推文和推文保持著相同的樣式，均勻的節(jié)奏伶跷，但是其中的“推薦用戶”一項有著不同的樣式掰读，它插入到推文列表中，打破了整個信息流的節(jié)奏叭莫，凸顯出不同的層級蹈集，會很快抓住你的注意力。