2025-2-7 濤濤
思路分享~
前段時(shí)間做了一個(gè)項(xiàng)目，里面有一些UI知識(shí)點(diǎn)想要和大家分享一下，希望看完后大家都能有所收獲，將其運(yùn)用到自己的工作中。
1. 模塊化信息和主次梳理
2. 頁面排版節(jié)奏
3. 降噪處理、視覺優(yōu)化、排版工整
最開始一版的設(shè)計(jì)稿是這樣的：
可以看到，還是有很大的優(yōu)化空間，有幾處還可以更好。目前存在的問題如下：
1. 信息分布零散、不工整
2. 信息傳達(dá)的節(jié)奏感不是很好
3. 彩色面積太多，讓人感覺不耐看
那針對(duì)這些問題，在經(jīng)過調(diào)整之后，最后頁面定稿圖如下：
就讓我們一起來看一下，前后究竟經(jīng)歷了什么吧～
01 模塊化信息和主次梳理
針對(duì)信息分布零散、不工整這個(gè)問題，我覺得有兩個(gè)方法可以解決，分別是模塊化信息和信息主次梳理。
在排版時(shí)我們一定要帶著 模塊化 的思維去處理頁面。讓頁面一個(gè)模塊一個(gè)模塊的整合在一起，同類信息是聚合的。
常見的劃分模塊的方式有卡片、分割線，這兩種經(jīng)常用于劃分頁面大模塊、大結(jié)構(gòu)。
除了大的模塊劃分之外，大模塊里包含的小模塊也可以進(jìn)行劃分，它也許沒有用到分割線或者卡片，但是你也能明確感知到這是幾個(gè)小模塊。
看第一版設(shè)計(jì)稿頁面，你會(huì)覺得它很散的原因在于它的模塊劃分不是很整體，都小塊小塊的分布在頁面上。
所以我們需要先把大模塊劃分好，在這個(gè)頁面上，根據(jù)信息的關(guān)聯(lián)度，可以劃分成上下兩大塊，我們用卡片去分割。
再近一步把大模塊里的信息分割成一個(gè)個(gè)小模塊，現(xiàn)在頭部大模塊里有這三個(gè)信息：
模塊分出來了，但是排版信息很亂，這時(shí)候就要學(xué)會(huì)將頁面信息就行主次梳理。
2. 信息主次梳理
大家心中一定要知道信息的權(quán)重級(jí)，我們先看頭部模塊，在這里我認(rèn)為權(quán)重級(jí)是標(biāo)語(模塊a)>參與活動(dòng)的數(shù)量(模塊b)=我的成就按鈕（模塊c）
目前這一版的權(quán)重級(jí)就極不明顯，想要凸顯的信息沒凸顯出來，反而是小插畫和icon很搶鏡。
我們需要把權(quán)重級(jí)高的標(biāo)語重新處理，標(biāo)語很重要 就把它加粗放大，作為標(biāo)題一樣處理：
其次就是數(shù)字信息的強(qiáng)調(diào)處理，不推薦直接拿過來加粗放大改顏色，這樣做就太粗暴了：
如果可以，我們盡量采用另外一種方式，這種方式排版層次更豐富，更有設(shè)計(jì)感。
如果有多個(gè)數(shù)字信息需要凸顯時(shí)，也可以并排放置：
02 頁面排版節(jié)奏
觀察頁面排版時(shí)，會(huì)明顯感到模塊B的信息密度太高了，文字信息全都堆積在右側(cè)。
我們可以把一些信息轉(zhuǎn)移到其他位置，在這里我就把「已捐信息」換了個(gè)位置。
這樣放置也讓信息排版結(jié)構(gòu)更豐富了，使單純的左右結(jié)構(gòu)轉(zhuǎn)變?yōu)橛凶笥乙灿猩舷碌慕Y(jié)構(gòu)。
這樣的排版在整個(gè)頁面中也會(huì)呈現(xiàn)的更有節(jié)奏：
03 其他優(yōu)化小點(diǎn)
現(xiàn)在頁面的排版已經(jīng)完成了，我們看整體顏色，其實(shí)用色有些多，顯得有些浮躁、不耐看。
不需要用那么多強(qiáng)調(diào)的顏色，適當(dāng)?shù)陌岩恍╊伾珡牟噬某蔁o彩色，會(huì)讓頁面更耐看。
現(xiàn)在頭部的視覺還是比較簡(jiǎn)單，我們給它做一點(diǎn)視覺設(shè)計(jì)，讓頁面更好看精致。
3.設(shè)計(jì)工整的小細(xì)節(jié)
在排版的時(shí)候一定要注意對(duì)齊，像之前一版就完全沒有這種意識(shí)，導(dǎo)致排出來工整度差了很多。
在處理之后，這些細(xì)節(jié)都要注意到：
以上就是關(guān)于這次改稿的全部過程啦，希望你能有所獲，最后總結(jié)一下這些知識(shí)點(diǎn)：
1. 模塊化信息：帶著模塊化的思維去處理信息能夠讓頁面不分散。
2. 頁面排版節(jié)奏：如果通篇都是左右的排版，可以考慮加入上下的排版，讓排版更有節(jié)奏。
3. 降噪處理：適可而止的用色，可以在彩色和無彩色之間多試一下。
再來看下頁面前后對(duì)比吧：
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.lapeinture.cn
