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

轉(zhuǎn)載一紐約妹子Melissa做的分享：總結(jié)了從建筑到產(chǎn)品UI設(shè)計的基本原則。

一、軸

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

1、對齊

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

2、強(qiáng)化

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

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

3、運(yùn)動

當(dāng)我們碰到某先線條的時候，視覺會很自然地沿著這些方向運(yùn)動，就如同我們站在街上，會自覺地沿著街道的兩頭走動。兩個端點決定了線，界定了開始和結(jié)束的地方，線，或者說軸線的存在會引導(dǎo)和提示運(yùn)動的方向。

SoundCloud中，音軌沿著一條既定的水平軸線運(yùn)動，隨著音樂的播放，音軌自然地自左向右勻速運(yùn)動。

4、連續(xù)性

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

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

二、對稱

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

1、平衡

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

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

2、不對稱

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

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

三、層級

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

1、尺寸

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

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

2、形狀

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

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

3、位置

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

以設(shè)計應(yīng)用Path的設(shè)計為例，時間軸頂點處的用戶頭像就明顯比時間軸上的其他部分更重要，而這個地方正好展示的也是用戶頭像。

四、韻律

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

1、模式

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

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

2、間斷

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

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

理念上的規(guī)范有

1. 形式追隨功能—路易斯·沙利文
2. 這里的功能不僅包括用戶需求，還包括產(chǎn)品需求、業(yè)務(wù)需求。
3. less is more—米斯·凡·德羅
4. 把主要精力放到最核心的需求上
5. 存在即合理—黑格爾
6. 頁面上的每一個元素的存在都可以解釋，不要無緣無故增減元素

可用性規(guī)范——尼爾森十大可用性原則

一、狀態(tài)可見原則

用戶在網(wǎng)頁上的任何操作，不論是單擊、滾動還是按下鍵盤，頁面應(yīng)即時給出反饋?！凹磿r”是指，頁面響應(yīng)時間小于用戶能忍受的等待時間。

二、環(huán)境貼切原則

網(wǎng)頁的一切表現(xiàn)和表述，應(yīng)該盡可能貼近用戶所在的環(huán)境(年齡、學(xué)歷、文化、時代背景)，而不要使用第二世界的語言?！秈Phone人機(jī)交互指南》里提到的隱喻與擬物化是很好的實踐。此外，還應(yīng)該使用易懂和約定俗成的表達(dá)。

三、撤銷重做原則

為了避免用戶的誤用和誤擊，網(wǎng)頁應(yīng)提供撤銷和重做功能。

四、一致性原則

同一用語、功能、操作保持一致。

五、防錯原則

通過網(wǎng)頁的設(shè)計、重組或特別安排，防止用戶出錯。

六、易取原則

好記性不如爛筆頭。盡可能減少用戶回憶負(fù)擔(dān)，把需要記憶的內(nèi)容擺上臺面。

七、靈活高效原則

中級用戶的數(shù)量遠(yuǎn)高于初級和高級用戶數(shù)。為大多數(shù)用戶設(shè)計，不要低估，也不可輕視，保持靈活高效。

八、易掃原則

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀，不是看，而是掃。易掃，意味著突出重點，弱化和剔除無關(guān)信息。

九、容錯原則

幫助用戶從錯誤中恢復(fù)，將損失降到最低。如果無法自動挽回，則提供詳盡的說明文字和指導(dǎo)方向，而非代碼，比如404。

十、人性化幫助原則

幫助性提示最好的方式是：1、無需提示;2、一次性提示;3、常駐提示;4;幫助文檔。

界面排版規(guī)范——《格式塔原理》

相似原則

“有相似特征元素比沒有相似特征的元素被認(rèn)為更為緊密相關(guān)”

接近原則

“更接近一起的對象比進(jìn)一步分開的對象被認(rèn)為更相關(guān)?！?

連續(xù)定律

“在直線上或者曲線上的元素比不在直線或者曲線上的元素被認(rèn)為更相關(guān)?！?

對稱原則

“人們往往傾向于感知圍繞勻稱物體的中心對稱的形狀。”

閉合性原則

1. “當(dāng)我們看到一些復(fù)雜排列的元素時，我們趨向于尋找一個更為單一可辨識的圖案模式?！?
2. 共同命運(yùn)原則 “在同一方向上的元素比固定元素或者是朝不同方向移動的元素更為緊密相關(guān)?！?
3. 主體與背景原則 “我們的大腦將視覺區(qū)域分為主體和背景，主體包括一個場景中占據(jù)我們主要注意力的所有元素，其余則是背景。”

配色原則

協(xié)調(diào)配色

• 色相一致
• 明度一致
• 純度一致

強(qiáng)調(diào)配色

• 色相對比
• 明度對比
• 純度對比

設(shè)計規(guī)范輸出

• 多屏適配規(guī)范
• 字體規(guī)范
• 用色規(guī)范
• 布局規(guī)范
• 圖標(biāo)控件規(guī)范
• 提示反饋規(guī)范
• 動效規(guī)范

以上海淘科技為你整理的UI設(shè)計的基本原則。還為你準(zhǔn)備了，MBE風(fēng)格圖標(biāo)設(shè)計資訊，點擊可直接跳轉(zhuǎn)。

文章來源：知乎