今天蒙特企業(yè)APP開發(fā)跟大家分享APP界面開發(fā)當(dāng)中常見的設(shè)計(jì)規(guī)范和知識(shí)，意在跟大家相互學(xué)習(xí)與分享，不做它用。這里，蒙特主要通過(guò)4個(gè)要點(diǎn)進(jìn)行闡述，今天我們講一下軸和對(duì)稱。
一、軸
軸在UI設(shè)計(jì)中是最基本、最常見的概念，也是用來(lái)組織界面結(jié)構(gòu)的重要核心。簡(jiǎn)單說(shuō)來(lái)，軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線，在下面的設(shè)計(jì)圖中，軸以虛線的方式被標(biāo)注出來(lái)。
1、對(duì)齊
軸最常見于對(duì)稱元素的使用，當(dāng)元素被布置成軸對(duì)稱的布局的時(shí)候，會(huì)給人有序感。就像生活中絕大多數(shù)的事情一樣，我們更傾向于享受有序的的東西，它們令人感覺平穩(wěn)、舒適、平易近人。最簡(jiǎn)單的一個(gè)例子就是iTunes 程序中的專輯列表的設(shè)計(jì)，所有的專輯列表在界面的左側(cè)保持對(duì)齊，圍繞虛線軸軸對(duì)稱。
2、強(qiáng)化
雖然軸是一條假想的線，但是如果周圍的元素的邊緣控制得足夠整齊，這條線會(huì)在視覺中變得更加“明顯”的。最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸，如果一邊有建筑一邊沒(méi)有，那么這種軸線的感覺不會(huì)那么強(qiáng)烈。
從產(chǎn)品設(shè)計(jì)的角度上來(lái)看，Twitter 的時(shí)間線設(shè)計(jì)就是一個(gè)很好的案例，左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺。
3、運(yùn)動(dòng)
當(dāng)我們碰到某先線條的時(shí)候，視覺會(huì)很自然地沿著這些方向運(yùn)動(dòng)，就如同我們站在街上，會(huì)自覺地沿著街道的兩頭走動(dòng)。兩個(gè)端點(diǎn)決定了線，界定了開始和結(jié)束的地方，線或者說(shuō)軸線的存在會(huì)引導(dǎo)和提示運(yùn)動(dòng)的方向。
SoundCloud中，音軌沿著一條既定的水平軸線運(yùn)動(dòng)，隨著音樂(lè)的播放，音軌自然地自左向右勻速運(yùn)動(dòng)。
4、連續(xù)性
如果終點(diǎn)是不確定的，那么你通常會(huì)沿著軸線的方向?yàn)g覽/運(yùn)動(dòng)，直到你找到感興趣的東西，或者感到厭倦并關(guān)閉應(yīng)用。在建筑學(xué)中，未清楚界定的終點(diǎn)非常少見，因?yàn)榻ㄖ男藿ㄍǔ](méi)法永遠(yuǎn)持續(xù)下去，但是UI設(shè)計(jì)則不一樣，無(wú)限地滾動(dòng)下去是無(wú)比受歡迎的設(shè)計(jì)手法。
花瓣網(wǎng)的APP中就是這樣做的，持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動(dòng)下去，只要你有興趣一直觀看下去。
二、對(duì)稱
當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí)，他們構(gòu)成了對(duì)稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對(duì)應(yīng)之時(shí)，它們就形成了完美對(duì)稱。
1、平衡
對(duì)稱令整個(gè)設(shè)計(jì)更加平衡。當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí)，會(huì)給人以協(xié)調(diào)和諧的設(shè)計(jì)感。當(dāng)我們?cè)谝?guī)劃街道兩側(cè)的房屋建設(shè)的時(shí)候，如果左右兩側(cè)都是5間大小一致的房子，當(dāng)你走在街上的時(shí)候這種平衡的設(shè)計(jì)會(huì)令人非常舒適，這是平衡給人的感受。
2、不對(duì)稱
如果軸線兩側(cè)的控件布置不再是一一對(duì)應(yīng)尺寸相近，那就是不對(duì)稱的設(shè)計(jì)。不對(duì)稱的設(shè)計(jì)會(huì)給人明顯的失衡感，可能會(huì)令人不舒服，但是也能造就殘缺美，當(dāng)然這要看你具體怎么做。
把握APP的設(shè)計(jì)規(guī)范規(guī)則，賞心悅目的界面便可呼之欲出了，設(shè)計(jì)好的移動(dòng)APP平臺(tái)，來(lái)蒙特——16年互聯(lián)網(wǎng)資深服務(wù)商，海康威視、華為等諸多企業(yè)期待您也能加入!
今天蒙特企業(yè)APP開發(fā)跟大家分享APP界面開發(fā)當(dāng)中常見的設(shè)計(jì)規(guī)范和知識(shí)，意在跟大家相互學(xué)習(xí)與分享，不做它用。這里，蒙特主要通過(guò)4個(gè)要點(diǎn)進(jìn)行闡述，今天我們講一下軸和對(duì)稱。
一、軸
軸在UI設(shè)計(jì)中是最基本、最常見的概念，也是用來(lái)組織界面結(jié)構(gòu)的重要核心。簡(jiǎn)單說(shuō)來(lái)，軸是在設(shè)計(jì)的時(shí)候組織一系列元素的假象線，在下面的設(shè)計(jì)圖中，軸以虛線的方式被標(biāo)注出來(lái)。
1、對(duì)齊
軸最常見于對(duì)稱元素的使用，當(dāng)元素被布置成軸對(duì)稱的布局的時(shí)候，會(huì)給人有序感。就像生活中絕大多數(shù)的事情一樣，我們更傾向于享受有序的的東西，它們令人感覺平穩(wěn)、舒適、平易近人。最簡(jiǎn)單的一個(gè)例子就是iTunes 程序中的專輯列表的設(shè)計(jì)，所有的專輯列表在界面的左側(cè)保持對(duì)齊，圍繞虛線軸軸對(duì)稱。
2、強(qiáng)化
雖然軸是一條假想的線，但是如果周圍的元素的邊緣控制得足夠整齊，這條線會(huì)在視覺中變得更加“明顯”的。最好的例子是城市中的路燈構(gòu)成了道路兩旁建筑物之間的軸，如果一邊有建筑一邊沒(méi)有，那么這種軸線的感覺不會(huì)那么強(qiáng)烈。
從產(chǎn)品設(shè)計(jì)的角度上來(lái)看，Twitter 的時(shí)間線設(shè)計(jì)就是一個(gè)很好的案例，左側(cè)的頭像和右側(cè)的推文共同塑造出縫隙中軸線的感覺。
3、運(yùn)動(dòng)
當(dāng)我們碰到某先線條的時(shí)候，視覺會(huì)很自然地沿著這些方向運(yùn)動(dòng)，就如同我們站在街上，會(huì)自覺地沿著街道的兩頭走動(dòng)。兩個(gè)端點(diǎn)決定了線，界定了開始和結(jié)束的地方，線或者說(shuō)軸線的存在會(huì)引導(dǎo)和提示運(yùn)動(dòng)的方向。
SoundCloud中，音軌沿著一條既定的水平軸線運(yùn)動(dòng)，隨著音樂(lè)的播放，音軌自然地自左向右勻速運(yùn)動(dòng)。
4、連續(xù)性
如果終點(diǎn)是不確定的，那么你通常會(huì)沿著軸線的方向?yàn)g覽/運(yùn)動(dòng)，直到你找到感興趣的東西，或者感到厭倦并關(guān)閉應(yīng)用。在建筑學(xué)中，未清楚界定的終點(diǎn)非常少見，因?yàn)榻ㄖ男藿ㄍǔ](méi)法永遠(yuǎn)持續(xù)下去，但是UI設(shè)計(jì)則不一樣，無(wú)限地滾動(dòng)下去是無(wú)比受歡迎的設(shè)計(jì)手法。
花瓣網(wǎng)的APP中就是這樣做的，持續(xù)不斷的圖片沿著中軸線的方向持續(xù)不斷地滾動(dòng)下去，只要你有興趣一直觀看下去。
二、對(duì)稱
當(dāng)元素被均勻地放置在軸線的兩側(cè)之時(shí)，他們構(gòu)成了對(duì)稱的關(guān)系。當(dāng)元素被精準(zhǔn)地在軸線兩側(cè)一一對(duì)應(yīng)之時(shí)，它們就形成了完美對(duì)稱。
1、平衡
對(duì)稱令整個(gè)設(shè)計(jì)更加平衡。當(dāng)元素與控件在軸線兩側(cè)處于相同位置之時(shí)，會(huì)給人以協(xié)調(diào)和諧的設(shè)計(jì)感。當(dāng)我們?cè)谝?guī)劃街道兩側(cè)的房屋建設(shè)的時(shí)候，如果左右兩側(cè)都是5間大小一致的房子，當(dāng)你走在街上的時(shí)候這種平衡的設(shè)計(jì)會(huì)令人非常舒適，這是平衡給人的感受。
2、不對(duì)稱
如果軸線兩側(cè)的控件布置不再是一一對(duì)應(yīng)尺寸相近，那就是不對(duì)稱的設(shè)計(jì)。不對(duì)稱的設(shè)計(jì)會(huì)給人明顯的失衡感，可能會(huì)令人不舒服，但是也能造就殘缺美，當(dāng)然這要看你具體怎么做。
把握APP的設(shè)計(jì)規(guī)范規(guī)則，賞心悅目的界面便可呼之欲出了，設(shè)計(jì)好的移動(dòng)APP平臺(tái)，來(lái)蒙特——16年互聯(lián)網(wǎng)資深服務(wù)商，?？低暋⑷A為等諸多企業(yè)期待您也能加入!
