APP開(kāi)發咨詢熱(rè)線：
人(rén)
已閱讀(dú)
已閱讀(dú)
APP開(kāi)發必備的(de)UI設計(jì♣€)規範
來(lái)源：lexintech.com 發布時(shα♠í)間(jiān)：2017-08-21
APP開(kāi)發的(de)UI設計(jì)有(yǒu"Ω€¶)哪些(xiē)規範? 可(kě)能(néng)很(hěn)多(du$λ$£ō)小(xiǎo)夥伴都(dōu)在工(gōng)作(zuò)中®♥σ 思考過這(zhè)個(gè)問(wèn)題，下(xià)面，深圳APP開(kāi)發公司樂(yuè)信科(kē)技(jì)的(de)小(xiǎo)編為(wèi)大(dà)家(jiā)總結了(l♠e)一(yī)些(xiē)UI的(de)設計(jε★ì)規範，給大(dà)家(jiā)做(zuò)個§₹©♥(gè)參考。
一(yī)、軸
軸在UI設計(jì)中是(shì)最基本、•™最常見(jiàn)的(de)概念，也(yě)是(shì)用(yòng)來∞♣∏↕(lái)組織界面結構的(de)重要(yào)核心。簡單說(δ±≠shuō)來(lái)，軸是(shì)在設計(jì)的&↕(de)時(shí)候組織一(yī)系列元素的(de)假象線，在下(xià∑©)面的(de)設計(jì)圖中，軸以虛線的(de)方式被标注出來(lái✘©φ¶)。
1、對(duì)齊
軸最常見(jiàn)于對(duì)稱元素的(de)使用(yòn£∏♥↕g)，當元素被布置成軸對(duì)稱的(de)布局的(de)時(shíΩ∏♦)候，會(huì)給人(rén)有(yǒu)序感。就(jiù)像生σ§¶(shēng)活中絕大(dà)多(duō)數(shù)的(de)事(sγ€'hì)情一(yī)樣，我們更傾向于享受有(yǒu)≈↔§序的(de)的(de)東(dōng)西(xī)，它們☆φ令人(rén)感覺平穩、舒适、平易近(jìn)人(rén)。最簡單的∏™λ♠(de)一(yī)個(gè)例子(zǐ)就(jiù)是≤α↔(shì)iTunes 程序中的(de)專輯列表的(de)設計(jì)，™✘所有(yǒu)的(de)專輯列表在界面的(de)左側保持對(dλγuì)齊，圍繞虛線軸軸對(duì)稱。
2、強化(huà)
雖然軸是(shì)一(yī)條假想的(de)線，但≠₽®✔(dàn)是(shì)如(rú)果周圍的(de)元素的(de)邊緣控制(zh£∑₽<ì)得(de)足夠整齊，這(zhè)跳(tiào)線會(huì)在視(sh®₽ì)覺中變得(de)更加“明ε♠(míng)顯”的(de)。最好(hǎo)的(de)例子(zǐ)是<₩(shì)城(chéng)市(shì)中的(de)路(lù£λ)燈構成了(le)道(dào)路(lù)兩旁建築物(wù)之間₩•(jiān)的(de)軸，如(rú)果一(yī)邊有(yǒu£☆↓)建築一(yī)邊沒有(yǒu)，那(nà)麽這(zh≈☆↕¥è)種軸線的(de)感覺不(bù)會(huì)那(nà)麽強烈。
從(cóng)産品設計(jì)的(de)角₽♠ε™度上(shàng)來(lái)看(kàn♣¥₩)，Twitter 的(de)時(shí)間(jiān'♣φ)線設計(jì)就(jiù)是(shì)一(yī)個(gè) "很(hěn)好(hǎo)的(de)案例，左側的≠≈(de)頭像和(hé)右側的(de)推文(wén)共同塑造出縫隙中軸線的ε↑(de)感覺。
3、運動
當我們碰到(dào)某先線條的(dα$e)時(shí)候，視(shì)覺會(huì)✔₽&很(hěn)自(zì)然地(dì)沿著(zhe)這(zhèπ )些(xiē)方向運動，就(jiù)如(rú)♥∏±同我們站(zhàn)在街(jiē)上(shàng)，會(huì)自(zì)覺地λ÷∞(dì)沿著(zhe)街(jiē)道(d☆®ào)的(de)兩頭走動。兩個(gè)端點決定了(le)線，界₹ α定了(le)開(kāi)始和(hé)結束的(de)地↕€(dì)方，線，或者說(shuō)軸線的(de)存在會(huì)引導和(hé♥©)提示運動的(de)方向。
4、連續性
如(rú)果終點是(shì)不(bù)确定的(de)，那(nà)<≥麽你(nǐ)通(tōng)常會(huì)沿著(zhe)軸線的(de)方向浏• ₩覽/運動，直到(dào)你(nǐ)找到(dào)₽姀感興趣的(de)東(dōng)西(xī)，或者感到(dào)厭(yàn)倦并₽©關閉應用(yòng)。在建築學中，未清楚界定的(de)終點非常少(shǎo)≤✔φ見(jiàn)，因為(wèi)建築的(de)修建通↔™<★(tōng)常沒法永遠(yuǎn)持續下(xià)去(qù)，但(≤•♦>dàn)是(shì)UI設計(jì)則不(bù)一(y↕ ī)樣，無限地(dì)滾動下(xià)去(qù±©€)是(shì)無比受歡迎的(de)設計(jì)手法。
二、對(duì)稱
當元素被均勻地(dì)放(fàngβ↔φε)置在軸線的(de)兩側之時(shí)，他(tā)們構成了↕∑♣(le)對(duì)稱的(de)關系。當元素被精準地(dì)₹£在軸線兩側一(yī)一(yī)對(duì)應之時(shí)，它✘∏們就(jiù)形成了(le)完美(měi)對(∞"duì)稱。
1、平衡
對(duì)稱令整個(gè)設計(jì)更加平衡。當元素與控件(©λ≤&jiàn)在軸線兩側處于相(xiàng)同位置之時(s¶♦™♣hí)，會(huì)給人(rén)以協調₽≈↑α和(hé)諧的(de)設計(jì)感。當我們在規劃街(jiē)道(↔'±"dào)兩側的(de)房(fáng)屋建設的(de)時(sh₹♥í)候，如(rú)果左右兩側都(dōu)是(shì)5間(jiā÷α♦εn)大(dà)小(xiǎo)一(yī)緻的₩↑¶∑(de)房(fáng)子(zǐ)，當你(nǐ)走在街(jiē)☆₹ 上(shàng)的(de)時(shí)候這(zhè)種平衡的(d •e)設計(jì)會(huì)令人(rén)非常舒适，這(zhè)是Ω₹♥(shì)平衡給人(rén)的(de)感受。
2、不(bù)對(duì)稱
如(rú)果軸線兩側的(de)控件(jiàn)布 置不(bù)再是(shì)一(yī)一(yī)對(duì)應尺寸≠≥相(xiàng)近(jìn)，那(nà)就(jiù)是(∏±©shì)不(bù)對(duì)稱的(de)設計(jì)。不(bù)對(duì)®•>稱的(de)設計(jì)會(huì)給人(réσ♠n)明(míng)顯的(de)失衡感，可(kěπ♥)能(néng)會(huì)令人(rén€&≥)不(bù)舒服，但(dàn)是(shì)也(yě)能(£₹✔néng)造就(jiù)殘缺美(měi)，當然這(zhè)要(yào)看(kà¥×n)你(nǐ)具體(tǐ)怎麽做(zuò)。
三、層級
當某個(gè)元素出現(xiàn)在比其他(tā)元素更重要(yγ∞↔ào)的(de)位置的(de)時(shí)候，層級就π•(jiù)出現(xiàn)了(le)。
1、尺寸
如(rú)果一(yī)個(gè)設計(jì©÷)元素在尺寸上(shàng)比其他(tā)的(de)控件(jià÷★n)更大(dà)，就(jiù)會(huì)γ¶σγ區(qū)分(fēn)出層級。毫無疑問(wèn)，我們查看(kà¶<αn)某個(gè)設計(jì)的(de)時(shí)候，通(tōng)&常會(huì)被最大(dà)的(de)元素吸引到(dào'₽¥)。如(rú)果一(yī)個(gè)建築物(wù)有 ¥(yǒu)5個(gè)出窗(chuāng)戶，其中一(yī)個(gè)是(¶'shì)其他(tā)四個(gè)的(de)兩倍大(dà)，我們的(de≥>♥)注意力自(zì)然而然會(huì)被吸引過去(qù)。
2、形狀
如(rú)果一(yī)個(gè)控件(jiàn)在形狀和(h≠★é)形态上(shàng)同其他(tā)的(de)不(bù)一(yī)樣，↓™也(yě)可(kě)以讓它獨立出一(yī)個(gè)層級。不(bù)規σ© 則的(de)設計(jì)同樣會(huì)♣≥✘™令人(rén)側目。建築物(wù)的(de)正面擁有(yǒu)五γ₩個(gè)相(xiàng)同的(de)窗(chuā∑≥✘ng)戶和(hé)一(yī)閃大(dà)門(mén)，你(nǐ)會↓β(huì)立刻注意到(dào)門(mén)的(de₩<¶)獨特之處。
3、位置
位置的(de)存在同樣能(néng)彰顯層級的(de)不(b±Ω" ù)一(yī)樣。在圓圈之內(nèi)，中心位置的(de)東(dōng)西(x©∞ī)比邊緣部分(fēn)的(de)看(kΩ€àn)起來(lái)更重要(yào)。位于軸線頂端的(de)控件(→ ₹jiàn)會(huì)顯得(de)比其他(tā)部分(fēn÷φ©)的(de)優先級更高(gāo)。
- 上(shàng)一(yī)篇：深圳APP開(kāi)發公司該如(rú)何提高(gāo)APP設計(jì)創$φ♠新力
- 下(xià)一(yī)篇：一(yī)名深圳APP開(kāi)發交互設計(jì)師(sh←ī)的(de)幾點工(gōng)作(zuò)感悟
電(diàn)話(huà)：
郵箱：
地(dì)址：
