京東商城正在醞釀改版，目前已經(jīng)放出了新版登錄頁(yè)（下圖1）。與舊版登錄頁(yè)（下圖2）相比，新版登錄界面有非常明顯的變化，下面就分析一下這些變化的優(yōu)劣，并給出一種改進(jìn)方案。

好的地方

1. 去掉了多余的元素。主導(dǎo)航、廣告、底部的幫助信息都去掉了，這一頁(yè)從兩屏直接變成了一屏，信息大大簡(jiǎn)化，可以讓用戶快速完成操作，非常好的改進(jìn)。
2. 去掉多余的顏色。整體非常干凈，不像之前紅的黃的一大片，讓人視覺(jué)上非常放松。新版界面應(yīng)該延續(xù)這種風(fēng)格，尤其是對(duì)于B2C網(wǎng)站來(lái)說(shuō)，突出商品才是最重要的，應(yīng)該簡(jiǎn)化其他界面元素的視覺(jué)表現(xiàn)，所以樸素的風(fēng)格最適合B2C網(wǎng)站。一旦界面樸素起來(lái)，相應(yīng)的商品圖片信息就會(huì)很明顯，這更容易吸引用戶關(guān)注商品，促進(jìn)消費(fèi)沖動(dòng)。
3. 在登錄頁(yè)面弱化注冊(cè)環(huán)節(jié)。新版界面中登錄和注冊(cè)終于區(qū)分開了，在登錄頁(yè)中不再出現(xiàn)完整的注冊(cè)表單，只是放上一個(gè)通往注冊(cè)頁(yè)的入口，具體的注冊(cè)信息在專門的注冊(cè)頁(yè)面完成（相應(yīng)的在注冊(cè)頁(yè)面也只是給出了登錄頁(yè)的入口）。之前將登錄和注冊(cè)都放在一個(gè)頁(yè)面完成的不合理之處在于：用戶是能夠分清楚“注冊(cè)”和“登錄”的區(qū)別的。也就是說(shuō)，如果用戶沒(méi)有網(wǎng)站的帳戶，他自然就會(huì)點(diǎn)擊“注冊(cè)”并期望進(jìn)行注冊(cè)行為，這個(gè)時(shí)候給他一個(gè)登錄的表單是沒(méi)有意義的——如果他能登錄的話他就會(huì)點(diǎn)“登錄”按鈕了，用戶來(lái)注冊(cè)頁(yè)面就是想注冊(cè)帳戶的。在新版中京東已經(jīng)改正了這個(gè)錯(cuò)誤，但是貌似有很多網(wǎng)站仍然在犯同樣的錯(cuò)誤。

不好的地方

整體來(lái)看這次的登錄頁(yè)面給人清爽簡(jiǎn)潔的感覺(jué)，但是有一種凌亂的感覺(jué)，排版不是很整齊。比如登錄表單排版完全是“散落一地”的感覺(jué)，主要原因是因?yàn)榈卿洶粹o區(qū)域偏離中軸線太遠(yuǎn)（下圖），中間兩個(gè)復(fù)選框設(shè)計(jì)加重了這種凌亂的感覺(jué)。

除此以外還有很多很多細(xì)節(jié)問(wèn)題，我就不一一指出了，那么如何改進(jìn)呢？

改進(jìn)方案

改進(jìn)的細(xì)節(jié)點(diǎn)很多，我就直接上圖吧。

如圖所示主要有6個(gè)地方有改動(dòng)，按編號(hào)依次如下：

1. 重新排版了登錄表單。要點(diǎn)如下：一，去掉了“記住用戶名”復(fù)選框，這應(yīng)該是默認(rèn)的功能，不要讓用戶非得選擇一下才有；二，“用戶名”這個(gè)輸入框與右側(cè)的“還不是商城用戶？”這段話水平對(duì)齊（就是編號(hào)4的那句話）。
2. 將“如果您有以下網(wǎng)站帳號(hào)，請(qǐng)點(diǎn)擊相應(yīng)圖標(biāo)登錄”使用更淺的灰色，將非重點(diǎn)語(yǔ)句做灰色處理，可以降低用戶的視覺(jué)壓力，也使得頁(yè)面有層次感。
3. 中間的分割線往左挪了一些，原來(lái)的位置太靠右，顯得右側(cè)過(guò)于狹小。
4. 去掉了“現(xiàn)在免費(fèi)注冊(cè)成為京東商城用戶，便能立刻享受便宜又放心的購(gòu)物樂(lè)趣。”這段毫無(wú)意義的話。這種話能省就省，用戶是不會(huì)看的，界面文字盡可能少，切記這一點(diǎn)。
5. 注冊(cè)按鈕文字換成了“立即注冊(cè)”，這是為了配合上面“還不是京東商城用戶？”這句話的，這樣兩個(gè)元素的語(yǔ)義就是連貫的了。按鈕上的小字“馬上進(jìn)入注冊(cè)頁(yè)面”是對(duì)這個(gè)按鈕的作用進(jìn)行解釋說(shuō)明，按鈕面積增大也變得更容易點(diǎn)擊。
6. “企業(yè)用戶注冊(cè)”和“校園用戶注冊(cè)”這兩句話過(guò)于簡(jiǎn)單了，含義太模糊，所以換成了兩句含義更豐富的話。

總結(jié)：頁(yè)面排版的方法和技巧

在改進(jìn)的設(shè)計(jì)中，對(duì)排版的變動(dòng)最大。原版的設(shè)計(jì)中界面元素的排版給我的感覺(jué)是有些凌亂，改進(jìn)版本主要針對(duì)排版問(wèn)題進(jìn)行修正，重新布局了一些元素，讓界面看起來(lái)更整齊一些。

改進(jìn)版的界面排版準(zhǔn)線圖如下：

千萬(wàn)不要小看這些細(xì)節(jié)，當(dāng)所有失敗的細(xì)節(jié)累積起來(lái)的時(shí)候，量變就會(huì)引起質(zhì)變，導(dǎo)致界面整體失敗。很多時(shí)候我們看一個(gè)界面總覺(jué)得有哪里別扭，但是又說(shuō)不出來(lái)什么地方做錯(cuò)了，好像又沒(méi)什么問(wèn)題，這個(gè)往往就是因?yàn)榇罅繜o(wú)關(guān)緊要的細(xì)節(jié)失誤，這些小細(xì)節(jié)的共同作用讓界面失去了吸引力。

對(duì)于本例中的排版改動(dòng)，這里講幾個(gè)要點(diǎn)：

一，設(shè)計(jì)界面之前，首先必須要做的是劃分視覺(jué)區(qū)塊，以期做到整體設(shè)計(jì)與細(xì)節(jié)設(shè)計(jì)分而治之。舉例來(lái)說(shuō)，在這個(gè)界面里視覺(jué)區(qū)塊只有兩個(gè)（藍(lán)線標(biāo)識(shí)的部分），一個(gè)是左側(cè)的登錄表單，另一個(gè)是右側(cè)的注冊(cè)引導(dǎo)按鈕。視覺(jué)區(qū)塊劃分完成之后，先在區(qū)塊內(nèi)部進(jìn)行排版，然后是區(qū)塊與區(qū)塊之間的排版，最后還要注意這個(gè)區(qū)塊內(nèi)部的某個(gè)元素與另一個(gè)區(qū)塊內(nèi)部的某個(gè)元素是否要考慮跨區(qū)的排版設(shè)計(jì)（本例中就有一個(gè)）。

二，在網(wǎng)頁(yè)排版中一個(gè)主要的原則是“左對(duì)齊優(yōu)先原則”。這是由于一般人們的閱讀順序都是從左到右、從上到下，所以不論是頁(yè)面整體的排版還是某個(gè)視覺(jué)區(qū)塊內(nèi)部的排版都要遵循這個(gè)原則，即優(yōu)先保證各個(gè)視覺(jué)元素的左對(duì)齊。在本例的準(zhǔn)線圖中，就可以看出所有區(qū)塊內(nèi)部的元素都是左對(duì)齊的。在對(duì)齊的時(shí)候還要注意，是“內(nèi)容對(duì)齊”，而不是“背景對(duì)齊”。

三，有時(shí)候?qū)Σ辉谝粋€(gè)區(qū)塊內(nèi)的元素也要考慮排版設(shè)計(jì)。在某些情況下，但是兩個(gè)區(qū)塊之間的某些元素又有一些邏輯關(guān)系（或者僅僅是處于美觀），因此需要對(duì)這些即使不在一個(gè)區(qū)塊里的元素，但是也要根據(jù)各自的位置進(jìn)行對(duì)齊（或其他排版），就好像兩個(gè)元素是在一個(gè)區(qū)塊里一樣。這就是跨區(qū)塊排版設(shè)計(jì)了。在本例中，左側(cè)區(qū)塊中的“用戶名”輸入框和右側(cè)區(qū)塊中的“還不是京東商城用戶？”這句話就進(jìn)行了水平對(duì)齊。

改進(jìn)版完整的設(shè)計(jì)圖如下（歡迎批評(píng)執(zhí)指正）：

原創(chuàng)文章，轉(zhuǎn)載請(qǐng)聯(lián)系Liony_小獅

來(lái)源：http://www.imliony.cn/blog/1776.hyh/