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

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

好的地方

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

不好的地方

整體來看這次的登錄頁面給人清爽簡潔的感覺，但是有一種凌亂的感覺，排版不是很整齊。比如登錄表單排版完全是“散落一地”的感覺，主要原因是因為登錄按鈕區域偏離中軸線太遠（下圖），中間兩個復選框設計加重了這種凌亂的感覺。

除此以外還有很多很多細節問題，我就不一一指出了，那么如何改進呢？

改進方案

改進的細節點很多，我就直接上圖吧。

如圖所示主要有6個地方有改動，按編號依次如下：

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

總結：頁面排版的方法和技巧

在改進的設計中，對排版的變動最大。原版的設計中界面元素的排版給我的感覺是有些凌亂，改進版本主要針對排版問題進行修正，重新布局了一些元素，讓界面看起來更整齊一些。

改進版的界面排版準線圖如下：

千萬不要小看這些細節，當所有失敗的細節累積起來的時候，量變就會引起質變，導致界面整體失敗。很多時候我們看一個界面總覺得有哪里別扭，但是又說不出來什么地方做錯了，好像又沒什么問題，這個往往就是因為大量無關緊要的細節失誤，這些小細節的共同作用讓界面失去了吸引力。

對于本例中的排版改動，這里講幾個要點：

一，設計界面之前，首先必須要做的是劃分視覺區塊，以期做到整體設計與細節設計分而治之。舉例來說，在這個界面里視覺區塊只有兩個（藍線標識的部分），一個是左側的登錄表單，另一個是右側的注冊引導按鈕。視覺區塊劃分完成之后，先在區塊內部進行排版，然后是區塊與區塊之間的排版，最后還要注意這個區塊內部的某個元素與另一個區塊內部的某個元素是否要考慮跨區的排版設計（本例中就有一個）。

二，在網頁排版中一個主要的原則是“左對齊優先原則”。這是由于一般人們的閱讀順序都是從左到右、從上到下，所以不論是頁面整體的排版還是某個視覺區塊內部的排版都要遵循這個原則，即優先保證各個視覺元素的左對齊。在本例的準線圖中，就可以看出所有區塊內部的元素都是左對齊的。在對齊的時候還要注意，是“內容對齊”，而不是“背景對齊”。

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

改進版完整的設計圖如下（歡迎批評執指正）：

原創文章，轉載請聯系Liony_小獅

來源：http://www.imliony.cn/blog/1776.hyh/