跳到主要內容

發表文章

目前顯示的是 一月, 2014的文章

選擇輸入項的提示選項設計方式

這篇來提一個設計上的易用性的小技巧,來自前幾天看到的討論
常見到一個需求是,你會想在選項裡增加提示字眼(例如:請選取選項),但又不是真的想讓使用者選取它
這算是在小地方對使用者更貼心的技巧,那麼要如何達成呢?

先從傳統的透過HTML找看看有沒有方法可以達成,印象中optgroup這個tag似乎有可能?
選項1

code:
<select name="demo">
    <optgroup label='請輸入選項'>
        <option value="1">選項1</option>
    </optgroup>
</select>

雖然的確有可以提示的部分,但是否符合需求就見仁見智了

第二種方式是透過selected屬性與disabled屬性並用
請輸入選項選項1

code:
<select name="demo">
    <option selected disabled>請輸入選項</option>
    <option value="1">選項1</option>
</select>

選項的預設值透過selected屬性解決,而disabled屬性則會在進行選取時發揮作用
看起來是不錯的方法,只是我在後面有看到一個我更喜歡的方式

第三種方式是透過CSS輔助
請輸入選項選項1

code:
<select name="demo">
    <option selected style="display: none;">請輸入選項</option>
    <option value="1">選項1</option>
</select>

display: none;會在選取時發揮作用,讓選單裡乾脆不出現這個選項


目前就看到這幾種方式,設計時可以考慮使用來增加易用性

Even Faster Web Site 讀後

這本書寫的時間點比較早
而最近幾年的browser和網路建設更是日新月異
有些內容可能已經不大適用,不過裡面的多數準則依然可以遵守
一部分的內容在blog其它文章提過了,就不寫在這裡了

追求效率的重點之一便是提高檔案的下載、重繪(render)等處理的效率
很多技巧都是為了追求這個要點而發展出來的