這周開始更新原子核系列中實(shí)際案例的部分，案例展示包含兩個(gè)大的部分：

• 單頁改版：針對(duì)單獨(dú)頁面的視覺調(diào)整，分享特定頁面的設(shè)計(jì)、交互、體驗(yàn)思路

• 項(xiàng)目改版：完成整個(gè)項(xiàng)目的視覺設(shè)計(jì)，注重項(xiàng)目模塊化、統(tǒng)一性、項(xiàng)目協(xié)作性

前幾個(gè)案例會(huì)先從表盤頁開始，具體的講解設(shè)計(jì)的操作方式、流程。

提前聲明一下，改版的案例是 “站在旁觀者角度根據(jù)自己的使用體驗(yàn)和理解做的調(diào)整”，部分細(xì)節(jié)思路可能會(huì)和產(chǎn)品團(tuán)隊(duì)內(nèi)部出發(fā)點(diǎn)、利益是不一致的。

如果在產(chǎn)品層面的理解和我的想法有出入，可以在留言中提及。要更多關(guān)注我在改版過程中從產(chǎn)生思路到實(shí)際落地的過程，以及前后的關(guān)聯(lián)。

提示一下：本期案例改版視頻已更新在原子核系列課程中，文末有觀看入口。

下面，是我們這次改版的主角有贊的后臺(tái)首頁——實(shí)時(shí)概況頁面：

這個(gè)頁面是用戶進(jìn)入自己的店鋪后臺(tái)看到的第一個(gè)頁面，聚合了一些基礎(chǔ)的數(shù)據(jù)、任務(wù)事項(xiàng)，以及提供各種功能入口、社區(qū)入口、官方廣告、官方資訊。

在我自己長時(shí)間使用這類工具的經(jīng)驗(yàn)中，這種聚合型（夾帶平臺(tái)私貨）的主頁，只有剛開始用的時(shí)候，會(huì)稍微看看。多用幾天以后，每次登錄后臺(tái)的目的都會(huì)很明確，上架商品、查看訂單、導(dǎo)出流水等等，不會(huì)有什么精力在這個(gè)頁面停留過長的時(shí)間。

在這個(gè)基礎(chǔ)上，我們總結(jié)了一些缺點(diǎn)：

• 該頁面實(shí)在是太長了，接近4屏的高度

• 空間利用率極低，下方的入口分散識(shí)別性又差

• 廣告不吸引人，又和資訊做不出區(qū)別

那么，我們就進(jìn)入改版實(shí)操環(huán)節(jié)，下面是改版的流程分享：

第一步：頁面信息整理

對(duì)于信息特別多，且同級(jí)模塊多的界面，優(yōu)先要做的是整理信息地圖，如果不了解的同學(xué)可以參考前陣子分享的這篇思維導(dǎo)圖文章：

從分析潮汐app，告訴你思維導(dǎo)圖應(yīng)該怎么用

然后，理解其中內(nèi)容的意圖、類型，對(duì)它們進(jìn)行重新的整理。

這里我將主區(qū)域用于放置比較關(guān)鍵的內(nèi)容，合并下方多種入口成一個(gè)緊湊的，更高效的模塊。

將廣告和資訊安排到右側(cè)邊欄，客服、下載等元素做成懸浮框，減少占用的面積。

第二步：搭建頁面框架

第二件事，就是搭建頁面的整體框架了。這次的案例演示，我并不打算用柵格，而是使用樸素的頁面間距分割形式。

首先確定左邊欄和頂部欄的大小、位置，將主體區(qū)域確認(rèn)出來。然后劃分邊距、側(cè)邊欄位置間距 20px。

之后，在這個(gè)基礎(chǔ)上完成細(xì)節(jié)的模塊，以及對(duì)它們間距進(jìn)行統(tǒng)一的管理，所有模塊間距為 8px。

第三步：填充頁面的細(xì)節(jié)內(nèi)容

這一步就是直接開始制作細(xì)節(jié)了，作為第一個(gè)案例，時(shí)間關(guān)系還是省略掉一些步驟的。簡單解釋起來，就是對(duì)這種列表多的頁面使用了大量的 Auto layauto 功能。

同時(shí)，對(duì)一些小細(xì)節(jié)做調(diào)整，比如對(duì)待辦項(xiàng)進(jìn)行卡片化處理（實(shí)際上還沒做完，狗頭），簡化圖標(biāo)成圓點(diǎn)。

然后快速入口分化不同的入口類型，用樣式進(jìn)行呈現(xiàn)。

對(duì)廣告內(nèi)容進(jìn)行翻新，增加視覺吸引力和點(diǎn)擊欲望。

下圖是前后兩個(gè)版本的對(duì)比：

目前視頻講解已經(jīng)發(fā)布到B站的原子核系列課程，大家可以前往觀看視頻，里面有具體的講解和操作過程。

10.10即將開課！想要變強(qiáng)的同學(xué)可以掃描下方二維碼咨詢課程了～