註冊頁面是大多數網站必備的頁面,所以很有必要對自己的註冊頁面做些精心的設計。下麵三張圖,第一張是註冊的展示頁面,第二張思維導圖就一個簡單的邏輯,第三張是通過firebug查看調用的JS文件。 註冊的展示頁面 簡單的邏輯 通過firebug查看調用的JS文件 一、給每個輸入框寫下說明 在用戶看到這個輸 ...
註冊頁面是大多數網站必備的頁面,所以很有必要對自己的註冊頁面做些精心的設計。下麵三張圖,第一張是註冊的展示頁面,第二張思維導圖就一個簡單的邏輯,第三張是通過firebug查看調用的JS文件。
註冊的展示頁面 | 簡單的邏輯 | 通過firebug查看調用的JS文件 |
一、給每個輸入框寫下說明
在用戶看到這個輸入框的時候,就能非常清晰的明白這個輸入框是做啥用的,最大限度的降低他們產生疑惑的可能性。我們需要假設用戶毫不瞭解註冊需要輸入的內容,隨後給他們足夠的信息以便幫助他們理解。
二、小圖標icon
Icon是增強內容的工具,而且能給訪客一個很好的暗示。以前使用小圖標都是用圖片,用圖片的話,很多時候那些對齊、寬度高度搞起來特麻煩,這次我將圖標做成字體,操作字體可比操作圖片容易很多。可以到國外的一個網站icomoon製作圖標字體,不過這個網站打開起來比較慢,需要耐心等待。利用線上資源,接受新思想與新技術,讓工作變得越來越簡單。
這些小圖標都是從icomoon網站上面導出的。這種方式操作對齊,大小非常方便,不過IE6和IE7不支持選擇器before(關於選擇器的瀏覽器相容可以參考這裡),所以在這兩個瀏覽器中將不能顯示這個圖標。
<font class="ficomoon icon-signup"></font>註冊新用戶
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'), url('fonts/icomoon.woff?-fl11l') format('woff'), url('fonts/icomoon.ttf?-fl11l') format('truetype'), url('fonts/icomoon.svg?-fl11l#icomoon') format('svg'); font-weight: normal; font-style: normal; } .ficomoon{font-family:'icomoon';} .icon-print:before {content: "\e601"}
三、輸入框還可輸入的字元數