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

用實戰(zhàn)優(yōu)化案例，教你舉一反三地 UI 排版方法

發(fā)布時間：2024-04-08 10:08:50 瀏覽量：237次

以下文章來源于Nana的設計錦囊 ，作者柒爺

Nana的設計錦囊

某廠資深設計師，周更有價值的原創(chuàng)設計資訊/資源+實戰(zhàn)派干貨。

互聯(lián)網(wǎng)產(chǎn)品設計點擊獲取大廠產(chǎn)品設計規(guī)范及組件庫、免商字體、產(chǎn)品數(shù)據(jù)分析等產(chǎn)品設計資源。[ 互聯(lián)網(wǎng)產(chǎn)品設計 ] 日常分享產(chǎn)品設計、交互設計精選文章、設計案例、設計趨勢等。

公眾號

某天中午去食堂吃飯時看著菜單陷入了沉思...

菜單基本信息如下：



很顯然我不是來凡爾賽食堂伙食的，我只是突然覺得這個東西特別像之前收到的很多交互/用研鐵汁的作品集，甚至述職報告。
其實關于ui排版的文章挺多的，但是好像都把ui排版局限在了小小的格式塔原則里。其實ui排版是一個很強大的信息收集與處理分發(fā)的過程，它的核心價值并不在于變好看這件事兒。
至于它有多強大？核心精髓又如何get？我決定授之以魚不如授之以漁，就用食堂的菜單來做一個例子，分享一個大家可以舉一反三的ui排版方法。
我們假設，如果要把菜單信息變成一些鐵汁（尤其是純交互/用研）的作品集，可以如何優(yōu)化排版呢？

Step 1.動手之前，先拆解信息

第一步不要急著排版，我們需要思考的問題是我們的內容需要分拆成多少塊進行一頁頁的輸出，也就是量化每一頁的文案內容。過度擁擠的一頁內容，讀者不易發(fā)現(xiàn)內容的亮點與優(yōu)先級，從而產(chǎn)生閱讀抵觸。而如果每一頁的內容都過少又無法高效地體現(xiàn)思路與豐滿度。那么我們該如何把握這里的節(jié)奏呢？
這里建議大家可以以這樣的思路進行拆分，我們將上面的菜單作品集拆為了4頁左右的ppt，如下圖：


全局上考慮
模塊目錄：午飯+午飯的相關說明——目的為讓各位干飯人清楚干飯的整體時間、地點
亮點：2號窗口當做了推薦窗口（也就是亮點）給讀者進行了閱讀推薦——目的是讓各位干飯人知道我們有特別好吃的菜，快來干飯
集合分類：分類剩下的窗口為配餐與自選2種窗口進行集合展示——目的是告訴各位干飯人，我們的飯菜種類超多，想吃啥都有。
細節(jié)信息考慮
合并同類項：把同類信息合并，避免重復展示，提煉最有價值的信息展示
限制層級：盡量限制一頁內容層級在2級以內，控制信息長度
于是乎，內容的信息梳理便有節(jié)奏的完成了，注意是有節(jié)奏的完成了。
*這里可能有細心的鐵汁發(fā)現(xiàn)我舍棄了菜單里的一些窗口，不是因為個人不愛吃，而是打個比方：并不是所有信息都是有價值展示出來的，我們不需要面面俱到，判斷好信息的價值，做到斷舍離。


Step 2.文字與圖片，講究恰到好處

在組織完每頁的內容后，作為設計師肯定少不了得配個圖什么的（插畫、界面、原型什么的），不然無圖言屌。
這個時候文字與圖片之間的關系就變得十分重要。這里給大家介紹幾個高級配圖的方式以及技巧吧：
1.關于全圖背景
有的鐵汁可能會覺得整張圖放著挺好看的昂，也很簡單，不用拼接什么的。但其實整張圖在排版里的應用是很講究條件的，貿然隨便配個圖當全圖背景就會使的整體非常不高級且不專業(yè)。建議大家多使用純色底的元素拼接點綴背景，這樣化繁為簡容易出效果。

那什么特殊情況下可以使用整圖背景呢？一般是針對視覺的同學有非常亮眼的純視覺效果展示的時候可以用全圖背景，其他時候都不推薦。

2.主圖的破格與個數(shù)限制
很多鐵汁喜歡把展示的圖片規(guī)規(guī)矩矩地放滿，但其實亮點要通過放大與破格突出。不要企圖用很多圖堆在一起來說明這個項目的亮點，比如這道菜是你重點推薦的，那么只需要一個放大的這道菜就會很有說服力。當然前提是這個亮點足夠亮。
（*請不要問為什么酸菜魚章魚爪和青菜要配一個餃子圖，人艱不拆）


3.多圖排布技巧
我們經(jīng)常要遇到必須要多圖展示的情況，比如全頁面、原型流程的展示、或者表格什么的。比起duang一下扔一組mockup上去，我們可以借用超實用的蒙層來實現(xiàn)圖片與文案間的過渡，防止生硬的尷尬過渡。

尤其黑色底板的蒙層應用效果更加的好。

Step 3.沒有對比，就沒有層次變化

關于ui排版思維里的對比主要是為了凸顯內容的層次，引導用戶更容易地獲取主要信息。這里對比包括字體、字重、大小、顏色等多維度的比對。我們通常通過以下幾個方式來形成比對，提升信息的傳達效率。
1.不要企圖用同字重字色完成不同層級的信息展示。

這里推薦大家盡可能地多用黑白字體，彩色字體僅作為需要分割的輔助信息或者標簽存在，不然會影響整體閱讀的重心，感覺畫面很花。

2.文字、圖片與色彩的比對，才是一個合格的畫面。
盡量不要留滿滿一頁文字，或者滿滿一頁圖片，合理搭配，按不同配比進行碰撞才能有良好的視覺體驗及閱讀愉悅感。


Step 4.細節(jié)元素的視覺化

我們盡可能多地將純文本信息轉化為細節(jié)的視覺元素，不僅可以點綴畫面，也可以讓用戶降低理解成本，從而提升閱讀的可讀性。這里我們可以通過標簽、圖標、分割線等多種方式來進行元素的視覺化傳達。

1.圖標化


2.標簽化


Get完以上的技巧，還有最后一件事情：如果是述職or面試作品集，排版的意義更在于信息表達的清晰度而非視覺上的美觀，無論你是UI還是交互！切記切記！希望大家不要把作品集做成菜單～


基本當你將以上以上的UI排版思維應用到日常時、尤其作品集時，很多人就會開始分不清你是UI還是交互了，這個時候你就可以說自己萬能UX。


最后，看完了這個“精彩”的故事，有人有興趣拿“晚飯”來做個練習嗎？還是說有人默默打開了藍色軟件點了一份圖上的拉面？

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定