亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

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

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

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

以下文章來源于Nana的設(shè)計(jì)錦囊 ，作者柒爺

Nana的設(shè)計(jì)錦囊

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

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

公眾號

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

菜單基本信息如下：



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

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

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


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


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

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

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

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


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

尤其黑色底板的蒙層應(yīng)用效果更加的好。

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

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

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

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


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

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

1.圖標(biāo)化


2.標(biāo)簽化


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


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


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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

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