中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：在產(chǎn)品設(shè)計(jì)的排版當(dāng)中，視覺舒服是很重要的，對(duì)于用戶來(lái)說(shuō)，看到的頁(yè)面排版的第一印象比較重要，并且在乎是否能在頁(yè)面上捕捉到重要信息；本文作者分享了關(guān)于把UI排版的思維應(yīng)用于其他地方是如何的，我們一起來(lái)了解一下。

某天中午去食堂吃飯時(shí)看著菜單陷入了沉思…

菜單基本信息如下：

很顯然我不是來(lái)凡爾賽食堂伙食的，我只是突然覺得這個(gè)東西特別像之前收到的很多交互/用研鐵汁的作品集，甚至述職報(bào)告。

其實(shí)關(guān)于ui排版的文章挺多的，但是好像都把ui排版局限在了小小的格式塔原則里；其實(shí)ui排版是一個(gè)很強(qiáng)大的信息收集與處理分發(fā)的過(guò)程，它的核心價(jià)值并不在于變好看這件事兒。

至于它有多強(qiáng)大？核心精髓又如何get？我決定授之以魚不如授之以漁，就用食堂的菜單來(lái)做一個(gè)例子，分享一個(gè)大家可以舉一反三的ui排版方法。

我們假設(shè)，如果要把菜單信息變成一些鐵汁（尤其是純交互/用研）的作品集，可以如何優(yōu)化排版呢？

一、動(dòng)手之前，先拆解信息

第一步不要急著排版，我們需要思考的問(wèn)題是我們的內(nèi)容需要分拆成多少塊進(jìn)行一頁(yè)頁(yè)的輸出，也就是量化每一頁(yè)的文案內(nèi)容。

過(guò)度擁擠的一頁(yè)內(nèi)容，讀者不易發(fā)現(xiàn)內(nèi)容的亮點(diǎn)與優(yōu)先級(jí)，從而產(chǎn)生閱讀抵觸；而如果每一頁(yè)的內(nèi)容都過(guò)少又無(wú)法高效的體現(xiàn)思路與豐滿度。那么我們?cè)撊绾伟盐者@里的節(jié)奏呢？

這里建議大家可以以這樣的思路進(jìn)行拆分，我們將上面的菜單作品集拆為了4頁(yè)左右的ppt，如下圖：

全局上考慮：

• 模塊目錄：午飯+午飯的相關(guān)說(shuō)明——目的為讓各位干飯人清楚干飯的整體時(shí)間、地點(diǎn)；
• 亮點(diǎn)：2號(hào)窗口當(dāng)做了推薦窗口（也就是亮點(diǎn)）給讀者進(jìn)行了閱讀推薦——目的是讓各位干飯人知道我們有特別好次的菜，快來(lái)干飯；
• 集合分類：分類剩下的窗口為配餐與自選2種窗口進(jìn)行集合展示——目的是告訴各位干飯人，我們的飯菜種類超多，想吃啥都有。

細(xì)節(jié)信息考慮：

• 合并同類項(xiàng)：把同類信息合并，避免重復(fù)展示，提煉最有價(jià)值的信息展示；
• 限制層級(jí)：盡量限制一頁(yè)內(nèi)容層級(jí)在2級(jí)以內(nèi)，控制信息長(zhǎng)度；

于是乎，內(nèi)容的信息梳理便有節(jié)奏的完成了，注意是有節(jié)奏的完成了。

*這里可能有細(xì)心的鐵汁發(fā)現(xiàn)我舍棄了菜單里的一些窗口，不是因?yàn)閭€(gè)人不愛吃，而是打個(gè)比方：并不是所有信息都是有價(jià)值展示出來(lái)的，我們不需要面面俱到，判斷好信息的價(jià)值，做到斷舍離。

二、文字與圖片，講究恰到好處

在組織完每頁(yè)的內(nèi)容后，作為設(shè)計(jì)師肯定少不了得配個(gè)圖什么的（插畫、界面、原型什么的），不然無(wú)圖言屌。

這個(gè)時(shí)候文字與圖片之間的關(guān)系就變得十分重要。

這里給大家介紹幾個(gè)高級(jí)配圖的方式以及技巧吧：

1. 關(guān)于全圖背景

有的鐵汁可能會(huì)覺得整張圖放著挺好看的昂，也很簡(jiǎn)單，不用拼接什么的。

但其實(shí)整張圖在排版里的應(yīng)用是很講究條件的，貿(mào)然隨便配個(gè)圖當(dāng)全圖背景就會(huì)使的整體非常不高級(jí)且不專業(yè)；建議大家多使用純色底的元素拼接點(diǎn)綴背景，這樣化繁為簡(jiǎn)容易出效果。

那什么特殊情況下可以使用整圖背景呢？

一般是針對(duì)視覺的同學(xué)有非常亮眼的純視覺效果展示的時(shí)候可以用全圖背景，其他時(shí)候都不推薦。

2. 主圖的破格與個(gè)數(shù)限制

很多鐵汁喜歡把展示的圖片規(guī)規(guī)矩矩的放滿，但其實(shí)亮點(diǎn)要通過(guò)放大與破格突出。

不要企圖用很多圖堆在一起來(lái)說(shuō)明這個(gè)項(xiàng)目的亮點(diǎn)，比如這道菜是你重點(diǎn)推薦的，那么只需要一個(gè)放大的這道菜就會(huì)很有說(shuō)服力，當(dāng)然前提是這個(gè)亮點(diǎn)足夠亮。

（*請(qǐng)不要問(wèn)為什么酸菜魚章魚爪和青菜要配一個(gè)餃子圖，人艱不拆）

3. 多圖排布技巧

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

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

三、沒有對(duì)比，就沒有層次變化

關(guān)于ui排版思維里的對(duì)比主要是為了凸顯內(nèi)容的層次，引導(dǎo)用戶更容易的獲取主要信息。這里對(duì)比包括字體、字重、大小、顏色等多維度的比對(duì)。

我們通常通過(guò)以下幾個(gè)方式來(lái)形成比對(duì)，提升信息的傳達(dá)效率。

1. 不要企圖用同字重字色完成不同層級(jí)的信息展示

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

2. 文字、圖片與色彩的比對(duì)，才是一個(gè)合格的畫面

盡量不要留滿滿一頁(yè)文字，或者滿滿一頁(yè)圖片，合理搭配，按不同配比進(jìn)行碰撞才能有良好的視覺體驗(yàn)及閱讀愉悅感。

四、細(xì)節(jié)元素的視覺化

我們盡可能多的將純文本信息轉(zhuǎn)化為細(xì)節(jié)的視覺元素，不僅可以點(diǎn)綴畫面，也可以讓用戶降低理解成本，從而提升閱讀的可讀性。

這里我們可以通過(guò)標(biāo)簽、圖標(biāo)、分割線等多種方式來(lái)進(jìn)行元素的視覺化傳達(dá)。

1. 圖標(biāo)化

2. 標(biāo)簽化

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

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

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

作者：柒爺，云音樂資深設(shè)計(jì)師；微信公眾號(hào)： Nana的設(shè)計(jì)錦囊

本文由 @柒爺 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議