網(wǎng)站設(shè)計分享-以表格設(shè)計為主的內(nèi)容行銷

要如何打造吸引人的網(wǎng)站內(nèi)容??今天KPN設(shè)計部要分享以表格設(shè)計為主的內(nèi)容應(yīng)該要注意什么?根據(jù)我們做了千千百百個專案經(jīng)驗,將其珍貴經(jīng)驗分享給大家:

(1)首先是以表格label tag的左與上的差別, 對于視覺上的影響:

label在左邊較適合簡單的表格

label在上較適合需要輸入較多的表格下使用

但視覺的專注上其實(shí)label在上是比較好的方式
參考連結(jié):
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

(2)再來是表格的簡化方向
很多研究都顯示出表單的簡化,可以讓使用者更有意愿填寫

例子1: 藉由郵遞區(qū)號直接帶入城市跟區(qū)

例子2 : 信用卡號直接判別信用卡類型

例子3 : 密碼確認(rèn)輸入時,直接判定是否正確-->延伸(4)

參考連結(jié):
http://uxmovement.com/forms/form-field-input-techniques-to-prevent-garbage-output/

(3)因應(yīng)Google Material Design的使用者體驗
視覺設(shè)計上我們可以把表格簡化,但又不影響使用者的習(xí)慣,所以新的設(shè)計方向是Float Label

參考連結(jié) :

http://www.google.com/design/spec/components/text-fields.html
http://codepen.io/boast/pen/pLjld

(4)最后是APP上提醒password的想法
根據(jù)統(tǒng)計82%的人會忘記密碼,購物網(wǎng)站75%的人在忘記密碼下,放棄購買欲望,所以有幾個方式來輔助記憶或是讓使用者打?qū)γ艽a。

例子: 一個按鈕顯示隱藏密碼,且明確告知現(xiàn)在是Show password的狀態(tài)

以上