人
已閱讀
已閱讀
APP開發(fā)必備的UI設(shè)計規(guī)范
來源:lexintech.com ?? ?? 發(fā)布時間:2017-08-21
APP開發(fā)的UI設(shè)計有哪些規(guī)范? 可能很多小伙伴都在工作中思考過這個問題,下面,深圳APP開發(fā)公司樂信科技的小編為大家總結(jié)了一些UI的設(shè)計規(guī)范,給大家做個參考。
![](/uploads/allimg/170821/1-1FR113150C93.jpg)
一、軸
軸在UI設(shè)計中是最基本、最常見的概念,也是用來組織界面結(jié)構(gòu)的重要核心。簡單說來,軸是在設(shè)計的時候組織一系列元素的假象線,在下面的設(shè)計圖中,軸以虛線的方式被標(biāo)注出來。
1、對齊
軸最常見于對稱元素的使用,當(dāng)元素被布置成軸對稱的布局的時候,會給人有序感。就像生活中絕大多數(shù)的事情一樣,我們更傾向于享受有序的的東西,它們令人感覺平穩(wěn)、舒適、平易近人。最簡單的一個例子就是iTunes 程序中的專輯列表的設(shè)計,所有的專輯列表在界面的左側(cè)保持對齊,圍繞虛線軸軸對稱。
2、強化
雖然軸是一條假想的線,但是如果周圍的元素的邊緣控制得足夠整齊,這跳線會在視覺中變得更加“明顯”的。最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸,如果一邊有建筑一邊沒有,那么這種軸線的感覺不會那么強烈。
從產(chǎn)品設(shè)計的角度上來看,Twitter 的時間線設(shè)計就是一個很好的案例,左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺。
3、運動
當(dāng)我們碰到某先線條的時候,視覺會很自然地沿著這些方向運動,就如同我們站在街上,會自覺地沿著街道的兩頭走動。兩個端點決定了線,界定了開始和結(jié)束的地方,線,或者說軸線的存在會引導(dǎo)和提示運動的方向。
4、連續(xù)性
如果終點是不確定的,那么你通常會沿著軸線的方向瀏覽/運動,直到你找到感興趣的東西,或者感到厭倦并關(guān)閉應(yīng)用。在建筑學(xué)中,未清楚界定的終點非常少見,因為建筑的修建通常沒法永遠(yuǎn)持續(xù)下去,但是UI設(shè)計則不一樣,無限地滾動下去是無比受歡迎的設(shè)計手法。
二、對稱
當(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è)計會令人非常舒適,這是平衡給人的感受。
2、不對稱
如果軸線兩側(cè)的控件布置不再是一一對應(yīng)尺寸相近,那就是不對稱的設(shè)計。不對稱的設(shè)計會給人明顯的失衡感,可能會令人不舒服,但是也能造就殘缺美,當(dāng)然這要看你具體怎么做。
三、層級
當(dāng)某個元素出現(xiàn)在比其他元素更重要的位置的時候,層級就出現(xiàn)了。
1、尺寸
如果一個設(shè)計元素在尺寸上比其他的控件更大,就會區(qū)分出層級。毫無疑問,我們查看某個設(shè)計的時候,通常會被最大的元素吸引到。如果一個建筑物有5個出窗戶,其中一個是其他四個的兩倍大,我們的注意力自然而然會被吸引過去。
2、形狀
如果一個控件在形狀和形態(tài)上同其他的不一樣,也可以讓它獨立出一個層級。不規(guī)則的設(shè)計同樣會令人側(cè)目。建筑物的正面擁有五個相同的窗戶和一閃大門,你會立刻注意到門的獨特之處。
3、位置
位置的存在同樣能彰顯層級的不一樣。在圓圈之內(nèi),中心位置的東西比邊緣部分的看起來更重要。位于軸線頂端的控件會顯得比其他部分的優(yōu)先級更高。