APP開發必備的(de)UI設計規範

APP開發的(de)UI設計有哪些規範? 可(kě)能很多(duō)小夥伴都在工作中思考過這(zhè)個(gè)問題，下(xià)面，深圳APP開發公司樂(yuè)信科技的(de)小編爲大(dà)家總結了(le)一些UI的(de)設計規範，給大(dà)家做(zuò)個(gè)參考。

　　一、軸

　　軸在UI設計中是最基本、最常見的(de)概念，也(yě)是用(yòng)來(lái)組織界面結構的(de)重要核心。簡單說來(lái)，軸是在設計的(de)時(shí)候組織一系列元素的(de)假象線，在下(xià)面的(de)設計圖中，軸以虛線的(de)方式被标注出來(lái)。

　　1、對(duì)齊

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

　　2、強化(huà)

　　雖然軸是一條假想的(de)線，但是如果周圍的(de)元素的(de)邊緣控制得(de)足夠整齊，這(zhè)跳線會在視覺中變得(de)更加“明(míng)顯”的(de)。最好的(de)例子是城(chéng)市中的(de)路燈構成了(le)道路兩旁建築物(wù)之間的(de)軸，如果一邊有建築一邊沒有，那麽這(zhè)種軸線的(de)感覺不會那麽強烈。

　　從産品設計的(de)角度上來(lái)看，Twitter 的(de)時(shí)間線設計就是一個(gè)很好的(de)案例，左側的(de)頭像和(hé)右側的(de)推文共同塑造出縫隙中軸線的(de)感覺。

　　3、運動

　　當我們碰到某先線條的(de)時(shí)候，視覺會很自然地沿著(zhe)這(zhè)些方向運動，就如同我們站在街(jiē)上，會自覺地沿著(zhe)街(jiē)道的(de)兩頭走動。兩個(gè)端點決定了(le)線，界定了(le)開始和(hé)結束的(de)地方，線，或者說軸線的(de)存在會引導和(hé)提示運動的(de)方向。

　　4、連續性

　　如果終點是不确定的(de)，那麽你通(tōng)常會沿著(zhe)軸線的(de)方向浏覽/運動，直到你找到感興趣的(de)東西，或者感到厭倦并關閉應用(yòng)。在建築學中，未清楚界定的(de)終點非常少見，因爲建築的(de)修建通(tōng)常沒法永遠(yuǎn)持續下(xià)去，但是UI設計則不一樣，無限地滾動下(xià)去是無比受歡迎的(de)設計手法。

 

　　二、對(duì)稱

　　當元素被均勻地放置在軸線的(de)兩側之時(shí)，他(tā)們構成了(le)對(duì)稱的(de)關系。當元素被精準地在軸線兩側一一對(duì)應之時(shí)，它們就形成了(le)完美(měi)對(duì)稱。

　　1、平衡

　　對(duì)稱令整個(gè)設計更加平衡。當元素與控件在軸線兩側處于相同位置之時(shí)，會給人(rén)以協調和(hé)諧的(de)設計感。當我們在規劃街(jiē)道兩側的(de)房(fáng)屋建設的(de)時(shí)候，如果左右兩側都是5間大(dà)小一緻的(de)房(fáng)子，當你走在街(jiē)上的(de)時(shí)候這(zhè)種平衡的(de)設計會令人(rén)非常舒适，這(zhè)是平衡給人(rén)的(de)感受。

　　2、不對(duì)稱

　　如果軸線兩側的(de)控件布置不再是一一對(duì)應尺寸相近，那就是不對(duì)稱的(de)設計。不對(duì)稱的(de)設計會給人(rén)明(míng)顯的(de)失衡感，可(kě)能會令人(rén)不舒服，但是也(yě)能造就殘缺美(měi)，當然這(zhè)要看你具體怎麽做(zuò)。

 

　　三、層級

　　當某個(gè)元素出現在比其他(tā)元素更重要的(de)位置的(de)時(shí)候，層級就出現了(le)。

　　1、尺寸

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

　　2、形狀

　　如果一個(gè)控件在形狀和(hé)形态上同其他(tā)的(de)不一樣，也(yě)可(kě)以讓它獨立出一個(gè)層級。不規則的(de)設計同樣會令人(rén)側目。建築物(wù)的(de)正面擁有五個(gè)相同的(de)窗(chuāng)戶和(hé)一閃大(dà)門，你會立刻注意到門的(de)獨特之處。

　　3、位置

　　位置的(de)存在同樣能彰顯層級的(de)不一樣。在圓圈之内，中心位置的(de)東西比邊緣部分(fēn)的(de)看起來(lái)更重要。位于軸線頂端的(de)控件會顯得(de)比其他(tā)部分(fēn)的(de)優先級更高(gāo)。