激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

聽一首排版設(shè)計(jì)歌，這么做UI排版再無難題

發(fā)布時(shí)間：2024-03-26 09:36:47 瀏覽量：128次

聽一首Layout Song

這么做UI排版再無難題

Layout Song - That Is How Layout Works


日本電視臺(tái)NHK教育電視節(jié)目《Design Ah！》（中文譯名：《??！設(shè)計(jì)》），是一檔培養(yǎng)小朋友對(duì)設(shè)計(jì)有基礎(chǔ)認(rèn)知的節(jié)目，每集節(jié)目當(dāng)中都有一個(gè)類似「stop motion」實(shí)境小動(dòng)畫MV的出現(xiàn)。

最近其中一個(gè)關(guān)于「字體排版」的由野村律子創(chuàng)作的《Layout song》MV得到廣傳，一路從facebook火到微博，不僅內(nèi)容引起極度舒適，更是贏得一眾設(shè)計(jì)師的共鳴！


《Layout Song》MV

這個(gè)實(shí)境結(jié)合特效動(dòng)畫的MV，嘗試給大眾展現(xiàn)，在日常的告示、路標(biāo)、報(bào)紙，以及生活用品上，文字及資訊經(jīng)過排版設(shè)計(jì)后，如何變得更美觀和更容易消化。

《Design Ah！》雖然是面向兒童的，但其視角獨(dú)特、充滿對(duì)思維的啟發(fā)，其中不乏實(shí)際且通用的設(shè)計(jì)原則。而這一首《Layout song》字體排版歌，也反映了4種常用的UI排版黃金原則。


掌握4大黃金原則 UI排版無難題

  • 視覺焦點(diǎn)

視覺焦點(diǎn)就是在界面中占主導(dǎo)地位的視覺元素，第一時(shí)間進(jìn)入你眼睛，在整個(gè)設(shè)計(jì)中不能強(qiáng)調(diào)所有設(shè)計(jì)元素；需要確保關(guān)鍵元素用戶的操作目標(biāo)是清晰的。

生活用品的包裝設(shè)計(jì)突出視覺焦點(diǎn)，讓消費(fèi)者一眼就能認(rèn)出牛奶和牙膏。

在UI排版中，如上圖左側(cè)界面，通過圖形黑色塊來強(qiáng)調(diào)重要的控件按鈕，關(guān)鍵元素高亮顯示，以此吸引用戶的注意力。

在APP選座購(gòu)票的時(shí)候，中間座位元素都處于相同且未標(biāo)亮的狀態(tài)，但是選中后的效果突出，形成視覺焦點(diǎn)；同樣，右邊的空狀態(tài)界面通過提示按鈕形成視覺焦點(diǎn)。


  • 層次結(jié)構(gòu)

良好的視覺層次結(jié)構(gòu)可以幫助用戶在幾秒鐘內(nèi)就能明確知道關(guān)鍵要點(diǎn)和頁(yè)面元素之間的關(guān)系，并且順利快速的完成當(dāng)前任務(wù)。建立視覺層次結(jié)構(gòu)可以通過大小，對(duì)比，顏色，肌理，留白，空間等可感知的視覺元素。

在日常生活中，隨處可見的導(dǎo)視系統(tǒng)經(jīng)過排版設(shè)計(jì)，大小、對(duì)比、顏色、空間等達(dá)到平衡以形成良好的視覺層次結(jié)構(gòu)。

同樣，在界面UI的導(dǎo)航欄設(shè)計(jì)中，好的設(shè)計(jì)它的視覺層次結(jié)構(gòu)分明且符合用戶閱讀習(xí)慣。

通過運(yùn)用有顏色、大小，明暗對(duì)比（列表文字關(guān)系），界面中的層次關(guān)系一目了然。

頂部視覺焦點(diǎn)第一也是導(dǎo)航比較重要的一部分。在左邊的界面中，下面介紹設(shè)計(jì)師和聯(lián)系圖標(biāo)；右邊界面頂部視覺重量大，里面文字通過明暗關(guān)系區(qū)分層級(jí)。


  • 視覺重量

影響視覺重量的因素有大小、對(duì)比、顏色、留白、形狀、位置等等，那么，在平面、排版及界面的設(shè)計(jì)中如何把握衡量視覺重量的比例呢？

上圖所示圖標(biāo)的大小都是120px，但看起來卻不大一樣：


第一個(gè)例子：左邊看起來比右邊大

第二個(gè)例子：黑色視覺重量比較大

第三個(gè)例子：紅紫色比左邊方塊更吸引眼球

學(xué)校的重要通知經(jīng)過排版后，重要信息放大并用紅色標(biāo)出，立馬就能吸引眼球。

左邊界面：用戶會(huì)第一時(shí)間留意到中間的白色logo 而不是大面積的藍(lán)紫色，這是因?yàn)榱舭?，logo圖標(biāo)周圍沒有任何元素。

右邊界面：用戶第一時(shí)間被按鈕控件所吸引，這就是通過顏色來吸引用戶的視覺焦點(diǎn)，從而引導(dǎo)用戶關(guān)注到重點(diǎn)的地方。


  • 視覺方向

除了視覺重量，視覺方向也發(fā)揮了視覺引導(dǎo)的作用，它能第一時(shí)間把用戶帶到特定重要的位置，讓用戶能快速完成任務(wù)和達(dá)到預(yù)期目標(biāo)。

從以上兩個(gè)例子就能看出，「對(duì)齊」是一大重要的排版原則。通過對(duì)齊形成視覺方向上的統(tǒng)一，使得排版邏輯更加清晰明了。

要想對(duì)齊并形成視覺方向就需要有線，這條線是看不見摸不著，它是通過軸來形成。比如，常用的視覺引導(dǎo)有Fpattern 和 Zpattern：

左邊圖標(biāo)和右邊列表形成一個(gè)豎向軸的概念，那么就會(huì)有線，線連接元素的方向。右圖再看下形成Z字結(jié)構(gòu)，就是我們說的Z模式。

6個(gè)功能入口的圖標(biāo)水平排列，在頁(yè)面內(nèi)系統(tǒng)的建立一個(gè)平行軸的關(guān)系，所以視覺方向比較清晰。

總的來說，視覺焦點(diǎn)、層次結(jié)構(gòu)、視覺重量，三者相互影響，最后的視覺方向是前面三者影響的結(jié)構(gòu)。聽完《Layout song》字體排版歌，如何通過大小、對(duì)比、顏色、留白、形狀、位置等來協(xié)調(diào)使用它們，你學(xué)會(huì)了嗎？


本文由WELLDESIGN獨(dú)家原創(chuàng)，未經(jīng)授權(quán)請(qǐng)勿轉(zhuǎn)載。

熱門課程推薦

熱門資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定