火星網(wǎng)校
聽一首排版設(shè)計歌，這么做UI排版再無難題
發(fā)布時間：2024-07-22 14:41:54 瀏覽量：112次
聽一首排版設(shè)計歌，這么做UI排版再無難題
日本電視臺NHK教育電視節(jié)目《Design Ah！》（中文譯名：《啊！設(shè)計》），是一檔培養(yǎng)小朋友對設(shè)計有基礎(chǔ)認(rèn)知的節(jié)目，每集節(jié)目當(dāng)中都有一個類似「stop motion」實境小動畫MV的出現(xiàn)。
最近其中一個關(guān)于「字體排版」的由野村律子創(chuàng)作的《Layout song》MV得到廣傳，一路從facebook火到微博，不僅內(nèi)容引起極度舒適，更是贏得一眾設(shè)計師的共鳴！
《Layout Song》MV
這個實境結(jié)合特效動畫的MV，嘗試給大眾展現(xiàn)，在日常的告示、路標(biāo)、報紙，以及生活用品上，文字及資訊經(jīng)過排版設(shè)計后，如何變得更美觀和更容易消化。
《Design Ah！》雖然是面向兒童的，但其視角獨特、充滿對思維的啟發(fā)，其中不乏實際且通用的設(shè)計原則。而這一首《Layout song》字體排版歌，也反映了4種常用的UI排版黃金原則。
掌握4大黃金原則 UI排版無難題
- 視覺焦點
視覺焦點就是在界面中占主導(dǎo)地位的視覺元素，第一時間進(jìn)入你眼睛，在整個設(shè)計中不能強調(diào)所有設(shè)計元素；需要確保關(guān)鍵元素用戶的操作目標(biāo)是清晰的。
生活用品的包裝設(shè)計突出視覺焦點，讓消費者一眼就能認(rèn)出牛奶和牙膏。
在APP選座購票的時候，中間座位元素都處于相同且未標(biāo)亮的狀態(tài)，但是選中后的效果突出，形成視覺焦點；同樣，右邊的空狀態(tài)界面通過提示按鈕形成視覺焦點。
- 層次結(jié)構(gòu)
良好的視覺層次結(jié)構(gòu)可以幫助用戶在幾秒鐘內(nèi)就能明確知道關(guān)鍵要點和頁面元素之間的關(guān)系，并且順利快速的完成當(dāng)前任務(wù)。建立視覺層次結(jié)構(gòu)可以通過大小，對比，顏色，肌理，留白，空間等可感知的視覺元素。
在日常生活中，隨處可見的導(dǎo)視系統(tǒng)經(jīng)過排版設(shè)計，大小、對比、顏色、空間等達(dá)到平衡以形成良好的視覺層次結(jié)構(gòu)。
通過運用有顏色、大小，明暗對比（列表文字關(guān)系），界面中的層次關(guān)系一目了然。
- 視覺重量
影響視覺重量的因素有大小、對比、顏色、留白、形狀、位置等等，那么，在平面、排版及界面的設(shè)計中如何把握衡量視覺重量的比例呢？
上圖所示圖標(biāo)的大小都是120px，但看起來卻不大一樣：
第一個例子：左邊看起來比右邊大
第二個例子：黑色視覺重量比較大
第三個例子：紅紫色比左邊方塊更吸引眼球
學(xué)校的重要通知經(jīng)過排版后，重要信息放大并用紅色標(biāo)出，立馬就能吸引眼球。
左邊界面：用戶會第一時間留意到中間的白色logo 而不是大面積的藍(lán)紫色，這是因為留白，logo圖標(biāo)周圍沒有任何元素。
右邊界面：用戶第一時間被按鈕控件所吸引，這就是通過顏色來吸引用戶的視覺焦點，從而引導(dǎo)用戶關(guān)注到重點的地方。
- 視覺方向
除了視覺重量，視覺方向也發(fā)揮了視覺引導(dǎo)的作用，它能第一時間把用戶帶到特定重要的位置，讓用戶能快速完成任務(wù)和達(dá)到預(yù)期目標(biāo)。
從以上兩個例子就能看出，「對齊」是一大重要的排版原則。通過對齊形成視覺方向上的統(tǒng)一，使得排版邏輯更加清晰明了。
6個功能入口的圖標(biāo)水平排列，在頁面內(nèi)系統(tǒng)的建立一個平行軸的關(guān)系，所以視覺方向比較清晰。
總的來說，視覺焦點、層次結(jié)構(gòu)、視覺重量，三者相互影響，最后的視覺方向是前面三者影響的結(jié)構(gòu)。聽完《Layout song》字體排版歌，如何通過大小、對比、顏色、留白、形狀、位置等來協(xié)調(diào)使用它們，你學(xué)會了嗎？
本文由火星時代教育獨家原創(chuàng)，想學(xué)習(xí)更多關(guān)于排版設(shè)計的技能嗎？快來點擊咨詢吧！
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
